/* HM Global Logistics GmbH – Corporate Design für test-hmgl.de
   Farben und Schriftart abgeleitet von der bestehenden Website www.hmgl.de */

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/files/fonts/lato-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/files/fonts/lato-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/files/fonts/lato-latin-700-normal.woff2') format('woff2');
}

:root {
  --hmgl-blue: #2e6f9e;
  --hmgl-blue-dark: #0f2a43;
  --hmgl-text: #14202b;
  --hmgl-gray: #5b6b7a;
  --hmgl-light-bg: #e7eff5;
}

body {
  font-family: 'Lato', Arial, sans-serif;
  font-size: 17px;
  color: var(--hmgl-text);
  line-height: 1.7;
}

.rte p {
  color: var(--hmgl-gray);
}

a {
  color: var(--hmgl-blue);
  text-decoration: none;
}
a:hover {
  color: var(--hmgl-blue-dark);
  text-decoration: underline;
}

h1, h2, h3, h4, h5 {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
h1 { font-size: 2.5rem; margin-bottom: 1rem; }
h2 { font-size: 1.85rem; margin-bottom: 0.75rem; }

/* Kopfbereich / Topbar */
#header {
  border-bottom: 1px solid #dde3ea;
  background: #fff;
}
#header .inside {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1140px;
  margin: 0 auto;
}
.hmgl-topbar {
  background: var(--hmgl-light-bg);
  color: var(--hmgl-gray);
  font-size: 0.85rem;
  padding: 6px 0;
}
.hmgl-topbar a {
  color: var(--hmgl-blue);
}

/* Logo */
#header img, .hmgl-logo img {
  max-height: 56px;
  width: auto;
}

/* Hauptnavigation */
.mod_navigation {
  position: relative;
  z-index: 20;
  overflow: visible;
}
.mod_navigation ul.level_1 {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
}
.mod_navigation ul.level_1 > li {
  position: relative;
}
.mod_navigation ul.level_1 > li > a,
.mod_navigation ul.level_1 > li > strong {
  display: block;
  padding: 12px 16px;
  color: #717c8e;
  font-weight: 400;
  border-radius: 3px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.mod_navigation ul.level_1 > li > a:hover {
  background: var(--hmgl-blue);
  color: #fff;
}
.mod_navigation ul.level_1 > li.active > a,
.mod_navigation ul.level_1 > li.active > strong,
.mod_navigation ul.level_1 > li.trail > a {
  background: var(--hmgl-blue);
  color: #fff !important;
}

/* Untermenüs (Dropdown bei Hover) */
.mod_navigation ul.level_2 {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid #dde3ea;
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.mod_navigation ul.level_1 > li:hover > ul.level_2 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mod_navigation ul.level_2 a {
  display: block;
  padding: 8px 16px;
  color: #717c8e;
  white-space: nowrap;
}
.mod_navigation ul.level_2 a:hover {
  background: var(--hmgl-blue);
  color: #fff;
}
.mod_navigation ul.level_2 li.active > a {
  color: var(--hmgl-blue);
  font-weight: 700;
}

/* Hauptspalte */
#main, .mod_article {
  padding: 40px 0;
}

/* Hero-Bereich (Startseite) */
html, body { overflow-x: hidden; }
.mod_article:has(.hmgl-hero) {
  overflow: visible;
}
.hmgl-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -40px;
  margin-bottom: 40px;
  padding: 64px 48px;
  min-height: 60vh;
  max-height: 640px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  color: #ffffff;
  text-align: center;
  box-sizing: border-box;
}
.hmgl-hero figure {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.hmgl-hero figure img,
.hmgl-hero figure video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hmgl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15,42,67,0.15) 0%, rgba(15,42,67,0.2) 45%, rgba(15,42,67,0.82) 100%);
  pointer-events: none;
}
.hmgl-hero-inner {
  max-width: 800px;
  margin: 0 auto;
}
.hmgl-hero h1 {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 2.6rem;
  max-width: 800px;
  margin-bottom: 16px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.hmgl-hero p {
  position: relative;
  z-index: 2;
  font-size: 1.15rem;
  color: #e7eff5;
  max-width: 700px;
  margin-bottom: 28px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
.hmgl-hero .rte {
  position: relative;
  z-index: 2;
}
.hmgl-hero .hmgl-btn {
  background: #fff;
  color: var(--hmgl-blue-dark) !important;
}
.hmgl-hero .hmgl-btn:hover {
  background: #e7eff5;
}
@media (max-width: 768px) {
  .hmgl-hero { padding: 32px 20px; min-height: 46vh; }
  .hmgl-hero h1 { font-size: 1.9rem; }
}

/* Buttons / CTAs */
.hmgl-btn, a.btn, button.btn {
  display: inline-block;
  background: var(--hmgl-blue);
  color: #fff !important;
  padding: 12px 28px;
  border-radius: 3px;
  font-weight: 700;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
}
.hmgl-btn:hover, a.btn:hover, button.btn:hover {
  background: var(--hmgl-blue-dark);
}

/* Listen */
#main ul {
  padding-left: 1.2rem;
}
#main ul li {
  margin-bottom: 0.4rem;
}

/* Footer */
#footer {
  background: var(--hmgl-blue-dark);
color: #e7eff5;
  padding: 32px 0;
  font-size: 0.9rem;
}
#footer a {
  color: #ffffff;
}
#footer a:hover {
  color: #ffffff;
}

/* Container */
.inside {
  max-width: 1140px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Tabellen (z.B. Container-Spezifikationen, falls später als Tabelle) */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
table th, table td {
border: 1px solid #dde3ea;
  padding: 8px 12px;
  text-align: left;
}
table th {
  background: var(--hmgl-light-bg);
  color: var(--hmgl-blue-dark);
}

/* Responsive */
@media (max-width: 900px) {
  #header .inside {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
  }
  .mod_navigation ul.level_1 {
    flex-direction: column;
    width: 100%;
    gap: 0;
  }
  .mod_navigation ul.level_1 > li {
    width: 100%;
      border-top: 1px solid #dde3ea;
  }
  .mod_navigation ul.level_1 > li > a,
  .mod_navigation ul.level_1 > li > strong {
    padding: 12px 4px;
  }
  /* Auf schmalen Bildschirmen gibt es keinen Hover: Untermenüs werden
     direkt unter dem Hauptpunkt eingeblendet, nicht als Dropdown. */
  .mod_navigation ul.level_2 {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    min-width: 0;
    width: 100%;
    padding: 0 0 6px 16px;
    display: none;
  }
  .mod_navigation ul.level_1 > li.trail > ul.level_2,
  .mod_navigation ul.level_1 > li.active > ul.level_2 {
    display: block;
  }
  h1 { font-size: 1.7rem; }
  .inside { padding-left: 16px; padding-right: 16px; }
}


/* ===== RTL-Unterstuetzung fuer Arabisch (ar) ===== */
html[lang="ar"] {
  direction: rtl;
}
html[lang="ar"] body {
  text-align: right;
  font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Noto Sans Arabic", Arial, sans-serif;
}
html[lang="ar"] .level_2 {
  left: auto;
  right: 0;
}
html[lang="ar"] ul,
html[lang="ar"] ol {
  padding-right: 20px;
  padding-left: 0;
}
/* ===== Startseite: zentrierte Texte wie auf der alten Website ===== */
#article-1 > .content-text:not(.hmgl-hero) > h2 {
  
text-align: center;
}
#article-1 > .content-text:not(.hmgl-hero) > .rte {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#article-1 > .content-text:not(.hmgl-hero) > .rte:has(.hmgl-leistungen) {
  max-width: none;
}
#article-1 > .content-text:not(.hmgl-hero) > .rte ul,
#article-1 > .content-text:not(.hmgl-hero) > .rte ol {
  text-align: left;
  display: inline-block;
}

/* Leistungen - Icon-Reihe wie auf der alten Website */
.hmgl-leistungen {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: 32px 0;
}
.hmgl-leistungen-item {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 12px;
  text-align: center;
  box-sizing: border-box;
  margin-bottom: 32px;
}
.hmgl-leistungen-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--hmgl-blue);
  border-radius: 100%;
  margin-bottom: 16px;
}
.hmgl-leistungen-icon-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: var(--hmgl-blue);
  color: #fff;
  font-size: 12px;
  line-height: 1;
}
.hmgl-leistungen-item h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
}
.hmgl-leistungen-item p {
  font-size: 0.95rem;
  color: var(--hmgl-gray);
  margin-bottom: 8px;
}
.hmgl-leistungen-link em {
  font-style: italic;
  color: var(--hmgl-blue);
  font-size: 0.9rem;
}
@media (max-width: 900px) {
  .hmgl-leistungen-item { flex: 1 1 45%; }
}
@media (max-width: 560px) {
  .hmgl-leistungen-item { flex: 1 1 100%; }
}

/* Seewege Bilderband - volle Breite, ohne Abstand, mit Karten-Hover wie auf der alten Website */
.hmgl-imgstrip {
  display: flex;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.hmgl-imgstrip-item {
  position: relative;
  overflow: hidden;
  width: 20%;
  height: 254px;
  border-top: 5px solid #e5e8ee;
}
.hmgl-imgstrip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hmgl-imgstrip-hover {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  transition: top 0.4s ease-out;
}
.hmgl-imgstrip-item:hover .hmgl-imgstrip-hover,
.hmgl-imgstrip-item:focus .hmgl-imgstrip-hover {
  top: 0;
  transition-duration: 0.2s;
}
.hmgl-imgstrip-item h3 {
  position: absolute;
  bottom: -3.125em;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0.625em 0 0.6875em;
  font-size: 0.8em;
  font-weight: 700;
  color: var(--hmgl-text);
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  transition: bottom 0.4s ease-out;
}
.hmgl-imgstrip-item:hover h3,
.hmgl-imgstrip-item:focus h3 {
  bottom: 0;
  transition-duration: 0.2s;
}
@media (max-width: 700px) {
  .hmgl-imgstrip { flex-wrap: wrap; }
  .hmgl-imgstrip-item { width: 50%; height: 160px; }
}


/* Touch-Fallback fuer Bilderband-Hover (Unsere Seewege): auf Geraeten ohne echtes Hover
   (Touch/Tablet/Smartphone) bleibt der Regionsname dauerhaft sichtbar, da :hover dort
   nicht zuverlaessig ausgeloest werden kann. Die Kartenansicht bleibt Desktop-Bonus. */
@media (hover: none) {
  .hmgl-imgstrip-item h3 {
    bottom: 0;
  }
}


/* Fix: Dropdown-Untermenü wurde vom Hauptinhalt überdeckt (fehlender z-index) */
header { position: relative; z-index: 20; }
.mod_navigation ul.level_2 { z-index: 50; }


/* Verschiffung-Seite (Vorlage fuer Unterseiten): Text zentrieren wie auf der Startseite */
#article-3 > .content-text > .rte {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
#article-3 > .content-text > .rte ul {
  display: inline-block;
  text-align: left;
}
#article-3 > .content-text > .rte figure {
  margin-left: auto;
  margin-right: auto;
}


/* Verschiffung-Seite (Vorlage): Ueberschrift (H1) ebenfalls zentrieren - war zuvor nicht erfasst, da ausserhalb .rte */
#article-3 > .content-text > h1 {
  text-align: center;
}
/* Aufzaehlungszeichen in Inhalts-Listen wiederherstellen (globale Reset-Regel entfernte sie site-weit) */
.content-text .rte ul {
  list-style: disc;
  padding-left: 1.3em;
}


/* "Unsere Leistungen im Ueberblick" (Verschiffung-Seite): gleiche Farbe wie andere Ueberschriften */
.content-text .rte strong {
  color: #1a1a1a;
}


/* Unterseiten-Rollout (Leistungen/Seewege/Container, 23.09.2026): Text zentrieren wie Verschiffung-Vorlage */
#article-4 > .content-text > .rte,
#article-5 > .content-text > .rte,
#article-6 > .content-text > .rte,
#article-8 > .content-text > .rte,
#article-10 > .content-text > .rte,
#article-11 > .content-text > .rte,
#article-12 > .content-text > .rte,
#article-13 > .content-text > .rte,
#article-15 > .content-text > .rte,
#article-16 > .content-text > .rte {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
#article-4 > .content-text > .rte ul,
#article-5 > .content-text > .rte ul,
#article-6 > .content-text > .rte ul,
#article-8 > .content-text > .rte ul,
#article-10 > .content-text > .rte ul,
#article-11 > .content-text > .rte ul,
#article-12 > .content-text > .rte ul,
#article-13 > .content-text > .rte ul,
#article-15 > .content-text > .rte ul,
#article-16 > .content-text > .rte ul {
  display: inline-block;
  text-align: left;
}
#article-4 > .content-text > .rte figure,
#article-5 > .content-text > .rte figure,
#article-6 > .content-text > .rte figure,
#article-8 > .content-text > .rte figure,
#article-10 > .content-text > .rte figure,
#article-11 > .content-text > .rte figure,
#article-12 > .content-text > .rte figure,
#article-13 > .content-text > .rte figure,
#article-15 > .content-text > .rte figure,
#article-16 > .content-text > .rte figure {
  margin-left: auto;
  margin-right: auto;
}
#article-4 > .content-text > h1,
#article-5 > .content-text > h1,
#article-6 > .content-text > h1,
#article-8 > .content-text > h1,
#article-10 > .content-text > h1,
#article-11 > .content-text > h1,
#article-12 > .content-text > h1,
#article-13 > .content-text > h1,
#article-15 > .content-text > h1,
#article-16 > .content-text > h1 {
  text-align: center;
}


/* Unterseiten-Rollout EN/FR/AR/ZH (23.09.2026): Text zentrieren wie DE-Vorlage */
#article-29 > .content-text > .rte,
#article-30 > .content-text > .rte,
#article-31 > .content-text > .rte,
#article-32 > .content-text > .rte,
#article-34 > .content-text > .rte,
#article-35 > .content-text > .rte,
#article-36 > .content-text > .rte,
#article-37 > .content-text > .rte,
#article-39 > .content-text > .rte,
#article-40 > .content-text > .rte,
#article-47 > .content-text > .rte,
#article-48 > .content-text > .rte,
#article-49 > .content-text > .rte,
#article-50 > .content-text > .rte,
#article-52 > .content-text > .rte,
#article-53 > .content-text > .rte,
#article-54 > .content-text > .rte,
#article-55 > .content-text > .rte,
#article-57 > .content-text > .rte,
#article-58 > .content-text > .rte,
#article-68 > .content-text > .rte,
#article-69 > .content-text > .rte,
#article-70 > .content-text > .rte,
#article-71 > .content-text > .rte,
#article-73 > .content-text > .rte,
#article-74 > .content-text > .rte,
#article-75 > .content-text > .rte,
#article-76 > .content-text > .rte,
#article-78 > .content-text > .rte,
#article-79 > .content-text > .rte,
#article-89 > .content-text > .rte,
#article-90 > .content-text > .rte,
#article-91 > .content-text > .rte,
#article-92 > .content-text > .rte,
#article-94 > .content-text > .rte,
#article-95 > .content-text > .rte,
#article-96 > .content-text > .rte,
#article-97 > .content-text > .rte,
#article-99 > .content-text > .rte,
#article-100 > .content-text > .rte {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
#article-29 > .content-text > .rte ul,
#article-30 > .content-text > .rte ul,
#article-31 > .content-text > .rte ul,
#article-32 > .content-text > .rte ul,
#article-34 > .content-text > .rte ul,
#article-35 > .content-text > .rte ul,
#article-36 > .content-text > .rte ul,
#article-37 > .content-text > .rte ul,
#article-39 > .content-text > .rte ul,
#article-40 > .content-text > .rte ul,
#article-47 > .content-text > .rte ul,
#article-48 > .content-text > .rte ul,
#article-49 > .content-text > .rte ul,
#article-50 > .content-text > .rte ul,
#article-52 > .content-text > .rte ul,
#article-53 > .content-text > .rte ul,
#article-54 > .content-text > .rte ul,
#article-55 > .content-text > .rte ul,
#article-57 > .content-text > .rte ul,
#article-58 > .content-text > .rte ul,
#article-68 > .content-text > .rte ul,
#article-69 > .content-text > .rte ul,
#article-70 > .content-text > .rte ul,
#article-71 > .content-text > .rte ul,
#article-73 > .content-text > .rte ul,
#article-74 > .content-text > .rte ul,
#article-75 > .content-text > .rte ul,
#article-76 > .content-text > .rte ul,
#article-78 > .content-text > .rte ul,
#article-79 > .content-text > .rte ul,
#article-89 > .content-text > .rte ul,
#article-90 > .content-text > .rte ul,
#article-91 > .content-text > .rte ul,
#article-92 > .content-text > .rte ul,
#article-94 > .content-text > .rte ul,
#article-95 > .content-text > .rte ul,
#article-96 > .content-text > .rte ul,
#article-97 > .content-text > .rte ul,
#article-99 > .content-text > .rte ul,
#article-100 > .content-text > .rte ul {
  display: inline-block;
  text-align: left;
}
#article-29 > .content-text > .rte figure,
#article-30 > .content-text > .rte figure,
#article-31 > .content-text > .rte figure,
#article-32 > .content-text > .rte figure,
#article-34 > .content-text > .rte figure,
#article-35 > .content-text > .rte figure,
#article-36 > .content-text > .rte figure,
#article-37 > .content-text > .rte figure,
#article-39 > .content-text > .rte figure,
#article-40 > .content-text > .rte figure,
#article-47 > .content-text > .rte figure,
#article-48 > .content-text > .rte figure,
#article-49 > .content-text > .rte figure,
#article-50 > .content-text > .rte figure,
#article-52 > .content-text > .rte figure,
#article-53 > .content-text > .rte figure,
#article-54 > .content-text > .rte figure,
#article-55 > .content-text > .rte figure,
#article-57 > .content-text > .rte figure,
#article-58 > .content-text > .rte figure,
#article-68 > .content-text > .rte figure,
#article-69 > .content-text > .rte figure,
#article-70 > .content-text > .rte figure,
#article-71 > .content-text > .rte figure,
#article-73 > .content-text > .rte figure,
#article-74 > .content-text > .rte figure,
#article-75 > .content-text > .rte figure,
#article-76 > .content-text > .rte figure,
#article-78 > .content-text > .rte figure,
#article-79 > .content-text > .rte figure,
#article-89 > .content-text > .rte figure,
#article-90 > .content-text > .rte figure,
#article-91 > .content-text > .rte figure,
#article-92 > .content-text > .rte figure,
#article-94 > .content-text > .rte figure,
#article-95 > .content-text > .rte figure,
#article-96 > .content-text > .rte figure,
#article-97 > .content-text > .rte figure,
#article-99 > .content-text > .rte figure,
#article-100 > .content-text > .rte figure {
  margin-left: auto;
  margin-right: auto;
}
#article-29 > .content-text > h1,
#article-30 > .content-text > h1,
#article-31 > .content-text > h1,
#article-32 > .content-text > h1,
#article-34 > .content-text > h1,
#article-35 > .content-text > h1,
#article-36 > .content-text > h1,
#article-37 > .content-text > h1,
#article-39 > .content-text > h1,
#article-40 > .content-text > h1,
#article-47 > .content-text > h1,
#article-48 > .content-text > h1,
#article-49 > .content-text > h1,
#article-50 > .content-text > h1,
#article-52 > .content-text > h1,
#article-53 > .content-text > h1,
#article-54 > .content-text > h1,
#article-55 > .content-text > h1,
#article-57 > .content-text > h1,
#article-58 > .content-text > h1,
#article-68 > .content-text > h1,
#article-69 > .content-text > h1,
#article-70 > .content-text > h1,
#article-71 > .content-text > h1,
#article-73 > .content-text > h1,
#article-74 > .content-text > h1,
#article-75 > .content-text > h1,
#article-76 > .content-text > h1,
#article-78 > .content-text > h1,
#article-79 > .content-text > h1,
#article-89 > .content-text > h1,
#article-90 > .content-text > h1,
#article-91 > .content-text > h1,
#article-92 > .content-text > h1,
#article-94 > .content-text > h1,
#article-95 > .content-text > h1,
#article-96 > .content-text > h1,
#article-97 > .content-text > h1,
#article-99 > .content-text > h1,
#article-100 > .content-text > h1 {
  text-align: center;
}


/* ===== Mobile-Navigation (Hamburger-Menü) ===== */
.hmgl-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 34px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  order: 2;
}
.hmgl-nav-toggle span {
  display: block;
  height: 3px;
  width: 26px;
  background: var(--hmgl-blue-dark);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
#header.hmgl-nav-open .hmgl-nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#header.hmgl-nav-open .hmgl-nav-toggle span:nth-child(2) { opacity: 0; }
#header.hmgl-nav-open .hmgl-nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .hmgl-nav-toggle { display: flex; }
  #header .mod_navigation { order: 3; width: 100%; display: none; }
  #header.hmgl-nav-open .mod_navigation { display: block; }
  #header .mod_navigation ul.level_1 {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid #dde3ea;
    margin-top: 12px;
    padding-top: 8px;
  }
  #header .mod_navigation ul.level_1 > li { width: 100%; }
  #header .mod_navigation ul.level_1 > li > a,
  #header .mod_navigation ul.level_1 > li > strong {
    display: block;
    padding: 12px 4px;
  }
  #header .mod_navigation ul.level_2 {
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    border: none;
    box-shadow: none;
    padding: 0 0 8px 16px;
    transition: none;
  }
  #header .mod_navigation ul.level_2 a { padding: 8px 4px; }
}


/* ===== Seewege: Laender-Akkordeon ===== */
.hmgl-seewege-map {
  width: 100%;
  max-width: 1100px;
  display: block;
  margin: 2rem auto 2.5rem;
  border-radius: 8px;
}
.hmgl-seewege-accordion {
  max-width: 700px;
  margin: 0 auto;
}
.hmgl-country {
  border: 1px solid #d8e2ea;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
}
.hmgl-country summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  font-weight: 600;
  color: var(--hmgl-blue-dark);
  background: var(--hmgl-light-bg);
  transition: background 0.2s;
}
.hmgl-country summary::-webkit-details-marker { display: none; }
.hmgl-country summary::marker { content: ""; }
.hmgl-country summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--hmgl-blue);
}
.hmgl-country[open] summary::after { content: "\2212"; }
.hmgl-country summary:hover { background: #dde8f0; }
.hmgl-country .hmgl-flag {
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.hmgl-ports {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 20px 18px;
  background: #fafcfd;
}
.hmgl-port {
  flex: 1 1 160px;
  text-align: center;
  padding: 10px;
}
.hmgl-port .hmgl-days {
  display: block;
  color: var(--hmgl-blue);
  font-size: 0.85rem;
  margin-bottom: 4px;
}
.hmgl-port .hmgl-city {
  display: block;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--hmgl-text);
}
.hmgl-port .hmgl-label {
  display: block;
  font-size: 0.8rem;
  color: var(--hmgl-gray);
}
.hmgl-seewege-note {
  font-size: 0.8rem;
  color: var(--hmgl-gray);
  text-align: center;
  margin-top: 1rem;
}
@media (max-width: 600px) {
  .hmgl-ports { flex-direction: column; }
}

/* Sprachumschalter (oben rechts im Header) */
header { position: relative; }
.hmgl-lang-switch {
  position: absolute;
  top: 14px;
  right: 20px;
  display: flex;
  gap: 10px;
  font-size: 0.85rem;
  z-index: 25;
}
.hmgl-lang-switch a {
  color: var(--hmgl-gray);
  text-decoration: none;
}
.hmgl-lang-switch a:hover {
  color: var(--hmgl-blue);
}
html[lang="de"] .hmgl-lang-switch a[hreflang="de"],
html[lang="en"] .hmgl-lang-switch a[hreflang="en"],
html[lang="fr"] .hmgl-lang-switch a[hreflang="fr"],
html[lang="ar"] .hmgl-lang-switch a[hreflang="ar"],
html[lang="zh"] .hmgl-lang-switch a[hreflang="zh"] {
  color: var(--hmgl-blue);
  font-weight: 700;
}
@media (max-width: 900px) {
  .hmgl-lang-switch {
    position: static;
    margin-top: 8px;
  }
}

/* Social-Media-Icons (Footer) */
.hmgl-social-icons {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.hmgl-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  text-decoration: none;
  transition: transform .15s ease, opacity .15s ease;
}
.hmgl-social-icon svg {
  width: 100%;
  height: 100%;
  border-radius: 7px;
  display: block;
}
.hmgl-social-icon:hover {
  transform: scale(1.08);
  opacity: 0.85;
}


/* Social-Media-Icons oben rechts im Header (neben Sprachumschalter) */
header .hmgl-social-icons {
  position: absolute;
  top: 44px;
  right: 20px;
  margin-top: 0;
  z-index: 25;
}
header .hmgl-social-icon {
  width: 24px;
  height: 24px;
}
@media (max-width: 900px) {
  header .hmgl-social-icons {
    position: static;
    margin-top: 4px;
    justify-content: center;
  }
}


/* RTL-Fix (Arabisch): Sprachumschalter + Social-Icons wuerden sonst das (in RTL nach rechts gespiegelte) Logo ueberlappen */
html[lang="ar"] .hmgl-lang-switch,
html[lang="ar"] .hmgl-social-icons {
  position: static;
  right: auto;
  left: auto;
  margin: 4px 0 0;
}
html[lang="ar"] .hmgl-social-icons {
  justify-content: flex-end;
}


/* Kopfzeile: Hauptnavigation immer in eigener Zeile erzwingen (verhindert Ueberlappung mit Sprachumschalter/Social-Icons bei kurzen Menuetexten wie Chinesisch) */
header .mod_navigation {
  flex-basis: 100%;
}


/* Transitzeiten-Counter (Home) - 4 Beispielrouten mit Tagen/Seemeilen, Zahlen zaehlen beim Einblenden hoch */
.hmgl-transit-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1100px;
  margin: 40px auto 12px;
  padding: 0 20px;
  text-align: center;
  box-sizing: border-box;
}
.hmgl-transit-days {
  font-size: 2.6rem;
  font-weight: 300;
  color: var(--hmgl-blue);
  line-height: 1.1;
}
.hmgl-transit-distance {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--hmgl-gray);
  margin-top: 8px;
}
.hmgl-transit-route {
  font-weight: 700;
  color: var(--hmgl-text);
  margin-top: 10px;
}
.hmgl-transit-caption {
  font-size: 0.78rem;
  color: var(--hmgl-gray);
  margin-top: 4px;
}
.hmgl-transit-note {
  max-width: 1100px;
  margin: 8px auto 0;
  padding: 0 20px;
  font-size: 0.75rem;
  color: var(--hmgl-gray);
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .hmgl-transit-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 20px;
  }
}
@media (max-width: 480px) {
  .hmgl-transit-stats {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}


/* Depot accordion (city lists, no images) */
.hmgl-depot-body {
  padding: 18px 20px;
  background: #fafcfd;
}
.hmgl-depot-body p {
  margin: 6px 0;
  font-size: 0.95rem;
  color: var(--hmgl-text);
}
.hmgl-depot-body p strong {
  color: var(--hmgl-blue-dark);
}


/* Container-Spezifikationen accordion (Grafik + Spezifikationen) */
.hmgl-spec-body {
  padding: 20px 20px 22px;
  background: #fafcfd;
}
.hmgl-spec-body > p {
  margin: 0 0 14px;
  font-size: 0.95rem;
  color: var(--hmgl-text);
}
.hmgl-spec-graphic {
  margin: 0 0 16px;
  text-align: center;
}
.hmgl-spec-graphic svg {
  max-width: 320px;
  width: 100%;
  height: auto;
}
.hmgl-spec-size {
  margin: 14px 0 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--hmgl-blue-dark);
}
.hmgl-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.hmgl-spec-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #dde6ec;
  color: var(--hmgl-text);
}
.hmgl-spec-table td:first-child {
  color: var(--hmgl-gray);
  width: 55%;
}
.hmgl-spec-table tr:last-child td {
  border-bottom: none;
}
.hmgl-spec-disclaimer {
  margin: 14px 0 0;
  font-size: 0.8rem;
  color: var(--hmgl-gray);
  font-style: italic;
}


/* Logo im Header (26.09.2026): feste Höhe, damit das Logo im Flex-Header nicht auf 0 px Breite schrumpft */
#header .hmgl-logo{flex:0 0 auto;display:block;line-height:0}
#header .hmgl-logo img{display:block;height:56px;width:auto;max-width:none;max-height:none}
@media (max-width:900px){#header .hmgl-logo img{height:44px}}


/* Mobiler Kopfbereich kompakt (26.09.2026): Logo + Menüknopf in einer Zeile, darunter Sprachen/Social, größere Tipp-Flächen */
@media (max-width:900px){
  #header .inside{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 16px}
  #header .hmgl-logo{order:1}
  #header .hmgl-nav-toggle{order:2;margin-inline-start:auto;width:44px;height:44px}
  #header .hmgl-lang-switch{order:3}
  #header .hmgl-social-icons{order:3;margin-inline-start:auto}
  #header .mod_navigation{order:4;width:100%}
  /* RTL: Menüknopf ans linke Ende */
  [dir="rtl"] #header .hmgl-nav-toggle{margin-left:0!important;margin-right:auto!important}
  [dir="rtl"] #header .hmgl-social-icons{margin-left:0!important;margin-right:auto!important}
  #header .hmgl-lang-switch a,#header .hmgl-lang-switch strong,#header .hmgl-lang-switch span{display:inline-block;padding:10px 6px}
  #header .hmgl-social-icons a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:40px}
  #header .hmgl-social-icons svg,#header .hmgl-social-icons img{width:24px!important;height:24px!important}
  #header .hmgl-lang-switch,#header .hmgl-social-icons{flex:0 0 auto;width:auto;position:static;margin-top:0;margin-bottom:0}
}


/* Formulare – Absende-Button und Felder im HMGL-Stil */
.ce_form input[type="text"], .ce_form input[type="email"], .ce_form input[type="tel"], .ce_form textarea, .ce_form select { width:100%; padding:10px 12px; border:1px solid #c9d3df; border-radius:6px; font:inherit; box-sizing:border-box; }
.ce_form input:focus, .ce_form textarea:focus, .ce_form select:focus { outline:2px solid #004593; outline-offset:1px; border-color:#004593; }
.ce_form button.submit, .ce_form [type="submit"] { background:#004593; color:#fff; border:0; border-radius:6px; padding:12px 28px; font:inherit; font-weight:700; cursor:pointer; transition:background .2s ease; }
.ce_form button.submit:hover, .ce_form [type="submit"]:hover { background:#00336d; }
figure.hmgl-map { margin:24px 0 0; }
figure.hmgl-map figcaption { margin-top:8px; font-size:.95rem; }


/* Hero: stärkere Abdunklung für Lesbarkeit (Video/Bild), alle Sprachen */
.hmgl-hero::after { background: linear-gradient(180deg, rgba(15,42,67,0.35) 0%, rgba(15,42,67,0.45) 45%, rgba(15,42,67,0.85) 100%); }
.hmgl-hero h1, .hmgl-hero p { text-shadow: 0 1px 3px rgba(0,0,0,0.45); }


/* News-Seite: Meldungen als Karten */
.hmgl-news { display:grid; gap:20px; margin-top:24px; }
.hmgl-news-item { background:#fff; border:1px solid #dfe6ee; border-left:4px solid var(--hmgl-blue,#2e6f9e); border-radius:8px; padding:20px 24px; box-shadow:0 1px 3px rgba(15,42,67,.06); }
[dir="rtl"] .hmgl-news-item { border-left:1px solid #dfe6ee; border-right:4px solid var(--hmgl-blue,#2e6f9e); }
.hmgl-news-item h2 { font-size:1.25rem; margin:4px 0 10px; }
.hmgl-news-meta { font-size:.85rem; color:var(--hmgl-gray,#5b6b7a); text-transform:uppercase; letter-spacing:.03em; margin:0; }
.hmgl-news-source { font-size:.9rem; color:var(--hmgl-gray,#5b6b7a); margin-bottom:0; }
@media (max-width:600px){ .hmgl-news-item { padding:16px; } }


/* Seewege: Hinweis-Box (Hormus), Embargo-Hinweis, Häfen mit Laufzeit auf Anfrage */
.hmgl-notice { background:#fff6e0; border:1px solid #f0d58a; border-left:4px solid #e0a800; border-radius:6px; padding:14px 18px; margin:0 0 20px; }
[dir="rtl"] .hmgl-notice { border-left:1px solid #f0d58a; border-right:4px solid #e0a800; }
.hmgl-embargo { font-size:.9rem; color:var(--hmgl-gray,#5b6b7a); border-top:1px solid #dfe6ee; padding-top:12px; margin-top:20px; }
.hmgl-port-note .hmgl-days { font-size:.95rem; color:#9a6b00; }
.hmgl-port-note .hmgl-label { color:#9a6b00; }


/* Abschnitt "Warum über uns statt Reederei" + Transportkette */
.hmgl-why { margin:48px 0; text-align:center; }
.hmgl-why h2 { margin-bottom:10px; }
.hmgl-why-lead { max-width:760px; margin:0 auto 28px; font-size:1.08rem; }
.hmgl-chain { display:grid; grid-template-columns:repeat(6,1fr); gap:10px 8px; margin:0 auto 36px; max-width:1100px; }
.hmgl-chain-bar { border-radius:6px; padding:7px 10px; font-weight:700; font-size:.9rem; color:#fff; }
.hmgl-chain-bar-hmgl { grid-column:1 / -1; grid-row:1; background:var(--hmgl-blue,#2e6f9e); }
.hmgl-chain-bar-carrier { grid-column:5 / 6; grid-row:2; background:#8a97a5; }
.hmgl-chain-step { grid-row:3; display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; }
.hmgl-chain-step:nth-of-type(3){grid-column:1} .hmgl-chain-step:nth-of-type(4){grid-column:2} .hmgl-chain-step:nth-of-type(5){grid-column:3}
.hmgl-chain-step:nth-of-type(6){grid-column:4} .hmgl-chain-step:nth-of-type(7){grid-column:5} .hmgl-chain-step:nth-of-type(8){grid-column:6}
.hmgl-chain-icon { width:64px; height:64px; border-radius:50%; background:#e7eff5; color:var(--hmgl-blue,#2e6f9e); display:flex; align-items:center; justify-content:center; border:2px solid var(--hmgl-blue,#2e6f9e); }
.hmgl-chain-step.is-sea .hmgl-chain-icon { background:#eef0f2; color:#5b6b7a; border-color:#8a97a5; }
.hmgl-chain-icon svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hmgl-chain-label { font-size:.92rem; font-weight:600; line-height:1.3; }
.hmgl-chain-tag { display:none; }
.hmgl-chain-step:not(:last-child)::after { content:""; position:absolute; top:32px; inset-inline-start:calc(50% + 38px); inset-inline-end:calc(-50% + 34px); border-top:2px dashed #b9c6d3; }
.hmgl-why-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:start; margin-bottom:28px; }
.hmgl-why-card { background:#fff; border:1px solid #dfe6ee; border-radius:10px; padding:20px; box-shadow:0 1px 3px rgba(15,42,67,.06); }
.hmgl-why-card h3 { font-size:1.05rem; margin:10px 0 6px; }
.hmgl-why-card p { margin:0; font-size:.95rem; }
.hmgl-why-icon { display:inline-flex; width:44px; height:44px; border-radius:10px; background:#e7eff5; color:var(--hmgl-blue,#2e6f9e); align-items:center; justify-content:center; }
.hmgl-why-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hmgl-why-cta { margin:0; }
.hmgl-why-compact { margin:28px 0 36px; text-align:center; }
.hmgl-why-compact .hmgl-why-lead { font-size:1rem; margin-bottom:18px; }
@media (max-width:1000px){ .hmgl-why-cards { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){
  .hmgl-chain { grid-template-columns:1fr; gap:0; max-width:420px; text-align:start; }
  .hmgl-chain-bar-carrier { display:none; }
  .hmgl-chain-bar-hmgl { grid-row:auto; margin-bottom:12px; text-align:center; }
  .hmgl-chain-step, .hmgl-chain-step:nth-of-type(n) { grid-column:1; grid-row:auto; flex-direction:row; gap:14px; padding:6px 0; border-inline-start:3px solid var(--hmgl-blue,#2e6f9e); padding-inline-start:12px; }
  .hmgl-chain-step::after { display:none; }
  .hmgl-chain-icon { width:46px; height:46px; flex:0 0 46px; }
  .hmgl-chain-icon svg { width:22px; height:22px; }
  .hmgl-chain-tag { display:inline-block; background:#8a97a5; color:#fff; font-size:.75rem; font-weight:700; border-radius:4px; padding:2px 7px; margin-inline-start:auto; }
  .hmgl-why-cards { grid-template-columns:1fr; }
}


/* Box "Aktuelle Lage" (Startseite) */
.hmgl-lage { max-width:1100px; margin:0 auto 40px; background:#f4f7fa; border:1px solid #dfe6ee; border-radius:10px; padding:18px 22px; }
.hmgl-lage-title { font-weight:700; margin:0 0 8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hmgl-lage-dot { width:10px; height:10px; border-radius:50%; background:#e0a800; box-shadow:0 0 0 4px rgba(224,168,0,.2); }
.hmgl-lage-date { font-weight:400; font-size:.85rem; color:var(--hmgl-gray,#5b6b7a); }
.hmgl-lage ul { margin:0 0 6px; padding-inline-start:20px; }
.hmgl-lage li { margin:4px 0; }
.hmgl-lage a { color:inherit; }
.hmgl-lage-more { margin:0; font-weight:600; }
.hmgl-lage-more a { color:var(--hmgl-blue,#2e6f9e); }

/* Beladungsrechner */
.hmgl-calc { margin:10px 0 30px; }
.hmgl-calc-intro { max-width:760px; }
.hmgl-calc-grid { display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:28px; align-items:start; }
.hmgl-calc-form fieldset { border:1px solid #dfe6ee; border-radius:8px; padding:12px 14px; margin:0 0 14px; }
.hmgl-calc-form legend { font-weight:700; padding:0 6px; }
.hmgl-calc-radio, .hmgl-calc-check { display:block; margin:6px 0; cursor:pointer; }
.hmgl-calc-pal label, .hmgl-calc-box label { display:block; margin:0 0 10px; font-size:.92rem; }
.hmgl-calc-pal input[type=number], .hmgl-calc-box input[type=number] { display:block; width:100%; margin-top:4px; padding:9px 10px; border:1px solid #c9d3df; border-radius:6px; font:inherit; box-sizing:border-box; }
.hmgl-calc-out { background:#fff; border:1px solid #dfe6ee; border-radius:10px; padding:18px 22px; box-shadow:0 1px 3px rgba(15,42,67,.06); }
.hmgl-calc-out h2 { margin-top:0; font-size:1.2rem; }
.hmgl-calc-big { font-size:1.15rem; margin:0 0 6px; }
.hmgl-calc-big strong { font-size:2.2rem; color:var(--hmgl-blue,#2e6f9e); }
.hmgl-calc-warn { background:#fff6e0; border-left:4px solid #e0a800; padding:8px 12px; border-radius:4px; }
.hmgl-calc-fig { margin:14px 0 6px; overflow-x:auto; }
.hmgl-calc-svg { width:100%; max-width:760px; height:auto; display:block; }
.hmgl-calc-svg .hc-cont { fill:#f4f7fa; stroke:#0f2a43; stroke-width:2; }
.hmgl-calc-svg .hc-item { fill:#cfe0ee; stroke:var(--hmgl-blue,#2e6f9e); stroke-width:1; }
.hmgl-calc-svg .hc-door { fill:#e0a800; }
.hmgl-calc-legend, .hmgl-calc-dims { font-size:.85rem; color:var(--hmgl-gray,#5b6b7a); margin:4px 0; }
.hmgl-calc-disc { font-size:.88rem; color:var(--hmgl-gray,#5b6b7a); margin-top:18px; }
@media (max-width:800px){ .hmgl-calc-grid { grid-template-columns:1fr; } }

/* Ratgeber-Seiten */
.hmgl-guide-intro { max-width:780px; font-size:1.05rem; }
.hmgl-guide-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin:20px 0 30px; }
.hmgl-guide-card { display:block; background:#fff; border:1px solid #dfe6ee; border-top:4px solid var(--hmgl-blue,#2e6f9e); border-radius:10px; padding:18px 20px; color:inherit; text-decoration:none; box-shadow:0 1px 3px rgba(15,42,67,.06); transition:transform .15s ease, box-shadow .15s ease; }
.hmgl-guide-card:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(15,42,67,.12); }
.hmgl-guide-card h2 { font-size:1.1rem; margin:0 0 6px; color:var(--hmgl-blue,#2e6f9e); }
.hmgl-guide-card p { margin:0; font-size:.95rem; }
ul.hmgl-check { list-style:none; padding-inline-start:0; }
ul.hmgl-check li { position:relative; padding-inline-start:30px; margin:10px 0; }
ul.hmgl-check li::before { content:"✓"; position:absolute; inset-inline-start:0; top:0; width:22px; height:22px; border-radius:50%; background:#e7eff5; color:var(--hmgl-blue,#2e6f9e); font-weight:700; font-size:.8rem; display:flex; align-items:center; justify-content:center; }
ol.hmgl-steps li { margin:8px 0; }
.hmgl-table-wrap { overflow-x:auto; margin:10px 0 20px; }
.hmgl-table { width:100%; border-collapse:collapse; font-size:.95rem; }
.hmgl-table th, .hmgl-table td { border:1px solid #dfe6ee; padding:10px 12px; text-align:start; vertical-align:top; }
.hmgl-table thead th { background:#e7eff5; }
.hmgl-table tbody td:first-child { font-weight:600; white-space:nowrap; }
.hmgl-glossary dt { font-weight:700; color:var(--hmgl-blue,#2e6f9e); margin-top:18px; }
.hmgl-glossary dd { margin:4px 0 0; padding-bottom:14px; border-bottom:1px solid #eef2f6; }
.hmgl-guide-cta { margin-top:28px; }
@media (max-width:600px){ .hmgl-table tbody td:first-child { white-space:normal; } }


/* Beladungsrechner 2.0 (Ladeplaner) */
.hmgl-lp { margin:10px 0 30px; }
.hmgl-lp h2 { margin:1.4em 0 .6em; }
.hmgl-lp-intro { max-width:760px; }
.hmgl-lp-bar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.hmgl-lp-bar select, .hmgl-lp-row input:not([type=checkbox]) { font:inherit; background:#fff; border:1px solid #c9d3df; border-radius:6px; padding:8px 10px; box-sizing:border-box; }
.hmgl-lp-add { display:flex; flex-wrap:wrap; gap:8px; }
.hmgl-lp-add button { font:inherit; cursor:pointer; background:#fff; color:var(--hmgl-blue,#2e6f9e); border:1px solid var(--hmgl-blue,#2e6f9e); border-radius:6px; padding:7px 12px; font-weight:700; font-size:.9rem; }
.hmgl-lp-add button:hover { background:#e7eff5; }
.hmgl-lp-table { overflow-x:auto; border:1px solid #dfe6ee; border-radius:10px; background:#fff; }
.hmgl-lp-head, .hmgl-lp-row { display:grid; grid-template-columns:14px minmax(140px,1.6fr) repeat(5,minmax(70px,.7fr)) 92px 100px 32px; gap:8px; align-items:center; padding:8px 12px; min-width:880px; }
.hmgl-lp-head { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--hmgl-gray,#5b6b7a); border-bottom:1px solid #dfe6ee; }
.hmgl-lp-row + .hmgl-lp-row { border-top:1px solid #eef2f6; }
.hmgl-lp-row input { width:100%; font-variant-numeric:tabular-nums; }
.hmgl-lp-sw { width:14px; height:14px; border-radius:3px; }
.hmgl-lp-cb { display:flex; gap:6px; align-items:center; font-size:.85rem; margin:0; }
.hmgl-lp-cb span { display:none; }
.hmgl-lp-del { background:none; border:0; color:var(--hmgl-gray,#5b6b7a); font-size:1.4rem; cursor:pointer; line-height:1; }
.hmgl-lp-del:hover { color:#c0504d; }
.hmgl-lp-go { border:0; cursor:pointer; margin-top:12px; }
.hmgl-lp-out { min-height:60px; }
.hmgl-lp-sum { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:14px; }
.hmgl-lp-sum div { background:#fff; border:1px solid #dfe6ee; border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; }
.hmgl-lp-sum span { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--hmgl-gray,#5b6b7a); }
.hmgl-lp-sum strong { font-size:1.35rem; font-variant-numeric:tabular-nums; color:var(--hmgl-blue-dark,#0f2a43); }
.hmgl-lp-sum small { color:var(--hmgl-gray,#5b6b7a); }
.hmgl-lp-warn { background:#fff6e0; border-left:4px solid #e0a800; padding:8px 12px; border-radius:4px; }
.hmgl-lp-cont { background:#fff; border:1px solid #dfe6ee; border-radius:10px; padding:16px; margin:0 0 14px; }
.hmgl-lp-cont h3 { font-size:1rem; margin:0 0 10px; }
.hmgl-lp-cont em { font-style:normal; } .hmgl-lp-cont em.ok { color:#2f7d4f; } .hmgl-lp-cont em.bad { color:#9a6b00; }
.hmgl-lp-views { display:grid; grid-template-columns:1.2fr 1fr; gap:16px; align-items:start; }
.hmgl-lp-views figure { margin:0 0 10px; } .hmgl-lp-views figcaption { font-size:.8rem; color:var(--hmgl-gray,#5b6b7a); }
.hmgl-lp-svg { width:100%; height:auto; display:block; }
.hmgl-lp-c { fill:#e7eff5; stroke:#0f2a43; stroke-width:1.5; }
.hmgl-lp-legend { display:flex; flex-wrap:wrap; gap:14px; font-size:.9rem; }
.hmgl-lp-legend i { display:inline-block; width:12px; height:12px; border-radius:3px; margin-inline-end:6px; vertical-align:-1px; }
.hmgl-lp-disc { font-size:.88rem; color:var(--hmgl-gray,#5b6b7a); max-width:760px; }
.hmgl-lp-req { font-weight:700; }
.hmgl-lp-form { background:#f4f7fa; border:1px solid #dfe6ee; border-radius:10px; padding:20px 24px; margin-top:24px; scroll-margin-top:120px; }
.hmgl-lp-form input[type=file] { display:block; padding:10px; border:1px dashed #9fb3c6; border-radius:6px; background:#fff; width:100%; box-sizing:border-box; }
@media (max-width:760px){ .hmgl-lp-views { grid-template-columns:1fr; } .hmgl-lp-form { padding:16px; } }

/* Ladeplaner: Container-Abmessungen */
.hmgl-lp-cdim,.hmgl-lp-cd{font-size:.9rem;color:#5a6472;margin:.35rem 0 .6rem;line-height:1.4}
.hmgl-lp-cd{margin-top:0}

/* Aktiver Menü-Unterpunkt: blau hinterlegt wie Hauptpunkt, nicht fett */
.mod_navigation .level_2 strong.active{display:block;padding:8px 16px;font-weight:400;background:var(--hmgl-blue,#2e6f9e);color:#fff;border-radius:3px}

/* Menü: kein Unterstrich beim Überfahren */
.mod_navigation a,.mod_navigation a:hover,.mod_navigation a:focus,.mod_navigation strong{text-decoration:none!important}

/* Seewege-Bildstreifen: 2 Reihen x 4, Breite und Kartenstil wie "Warum HMGL" */
.hmgl-imgstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;width:auto;max-width:1140px;margin:0 auto}
.hmgl-imgstrip-item{width:auto;height:210px;border-top:0;border-radius:10px;box-shadow:0 1px 3px rgba(15,42,67,.06)}
.hmgl-imgstrip-item h3{bottom:0}
@media (max-width:900px){.hmgl-imgstrip{grid-template-columns:repeat(2,1fr);gap:12px}.hmgl-imgstrip-item{width:auto;height:170px}}

/* Glossar A-Z */
.hmgl-az{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 24px;padding:12px;background:#e7eff5;border-radius:10px}
.hmgl-az a,.hmgl-az span{display:inline-block;min-width:32px;padding:6px 0;text-align:center;border-radius:6px;font-weight:700;text-decoration:none}
.hmgl-az a{background:#fff;color:var(--hmgl-blue,#2e6f9e)}
.hmgl-az a:hover{background:var(--hmgl-blue,#2e6f9e);color:#fff}
.hmgl-az span{color:#a9b6c3}
h2.hmgl-az-letter{margin:28px 0 8px;padding-bottom:4px;border-bottom:2px solid var(--hmgl-blue,#2e6f9e);color:var(--hmgl-blue,#2e6f9e);font-size:1.4rem;scroll-margin-top:120px}

/* Hero-Video auf Inhaltsbreite (wie Bildstreifen) */
.hmgl-hero{width:auto;max-width:1140px;margin:24px auto 40px;min-height:0;height:480px;max-height:none;border-radius:10px;padding:48px 40px}
@media (max-width:900px){.hmgl-hero{height:380px;margin:12px auto 28px;padding:32px 20px}}

/* Große Bildschirme: ganze Seite stufenweise vergrößern, Rand bleibt */
@media (min-width:1600px){html{zoom:1.12}}
@media (min-width:1800px){html{zoom:1.22}}
@media (min-width:2100px){html{zoom:1.35}}
@media (min-width:2500px){html{zoom:1.55}}

/* News-Ticker Startseite */
.hmgl-ticker{display:flex;align-items:stretch;max-width:1140px;margin:20px auto 0;background:#0f2a43;border-radius:8px;overflow:hidden;font-size:.95rem;line-height:1}
.hmgl-ticker-label{flex:0 0 auto;display:flex;align-items:center;padding:12px 16px;background:var(--hmgl-blue,#2e6f9e);color:#fff!important;font-weight:700;text-decoration:none!important;text-transform:uppercase;letter-spacing:.04em;font-size:.8rem}
.hmgl-ticker-track{flex:1;overflow:hidden;display:flex;align-items:center;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.hmgl-ticker-move{display:inline-flex;white-space:nowrap;padding:12px 0;will-change:transform}
.hmgl-ticker-move a{color:#fff!important;text-decoration:none!important;padding:0 6px}
.hmgl-ticker-move a:hover{text-decoration:underline!important}
.hmgl-ticker-move a.imp{color:#ffd24d!important;font-weight:700}
.hmgl-ticker-warn{color:#ffd24d}
.hmgl-ticker-sep{color:#6f93b3;padding:0 14px}
.hmgl-ticker-set{display:inline-flex;align-items:center}
.hmgl-ticker.run .hmgl-ticker-move{animation:hmgl-tick 60s linear infinite}
.hmgl-ticker.run[dir=rtl] .hmgl-ticker-move{animation-name:hmgl-tick-rtl}
.hmgl-ticker:hover .hmgl-ticker-move,.hmgl-ticker:focus-within .hmgl-ticker-move{animation-play-state:paused}
@keyframes hmgl-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes hmgl-tick-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.hmgl-ticker.run .hmgl-ticker-move{animation:none}.hmgl-ticker-track{overflow-x:auto}}
.hmgl-ticker + .hmgl-hero, .hmgl-ticker ~ .hmgl-hero{margin-top:14px}
main h2.wichtig::before{content:"⚠ ";color:#d08a00}
main h2:target{background:#fff6e0;box-shadow:0 0 0 8px #fff6e0;border-radius:4px}

/* Ticker hellblau (Farben wie Seite) */
.hmgl-ticker{background:var(--hmgl-light-bg,#e7eff5);border:1px solid #d3e0ea}
.hmgl-ticker-move a{color:var(--hmgl-blue-dark,#0f2a43)!important}
.hmgl-ticker-move a:hover{color:var(--hmgl-blue,#2e6f9e)!important}
.hmgl-ticker-move a.imp{color:#b35f00!important}
.hmgl-ticker-warn{color:#d97a00}
.hmgl-ticker-sep{color:#9bb3c8}

/* Ticker: einheitliche Schrift, nur gelbes Warnzeichen bei wichtigen */
.hmgl-ticker-move a.imp{color:var(--hmgl-blue-dark,#0f2a43)!important;font-weight:inherit}
.hmgl-ticker-move a.imp:hover{color:var(--hmgl-blue,#2e6f9e)!important}
.hmgl-ticker-warn{color:#f0b400;font-size:1.1em;text-shadow:0 0 1px rgba(120,80,0,.5)}


/* hmgl-chain-no-carrier */
.hmgl-chain > .hmgl-chain-step{grid-row:2;grid-column:auto !important}
.hmgl-chain > .hmgl-chain-bar-carrier{display:none}
@media (max-width:700px){.hmgl-chain > .hmgl-chain-step{grid-row:auto}}


/* hmgl-tracking-highlight */
.hmgl-trackbtn{position:absolute;top:18px;right:178px;display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border:1.5px solid var(--hmgl-blue,#2e6f9e);border-radius:20px;color:var(--hmgl-blue,#2e6f9e);background:#fff;font-weight:700;font-size:.88rem;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.hmgl-trackbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hmgl-trackbtn:hover,.hmgl-trackbtn:focus-visible,.hmgl-trackbtn.is-active{background:var(--hmgl-blue,#2e6f9e);color:#fff;text-decoration:none}
@media (max-width:900px){.hmgl-trackbtn{position:static;order:1;margin-left:auto;margin-right:10px;padding:7px;border-radius:50%}.hmgl-trackbtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.hmgl-trackbtn svg{width:20px;height:20px}}
.hmgl-trackband{display:flex;align-items:center;gap:16px;max-width:1140px;margin:0 auto 36px;padding:14px 20px;background:#e7eff5;border:1px solid #d3e0ea;border-radius:10px;box-sizing:border-box}
.hmgl-trackband-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid var(--hmgl-blue,#2e6f9e);color:var(--hmgl-blue,#2e6f9e)}
.hmgl-trackband-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.hmgl-trackband-text{flex:1 1 auto;margin:0;color:#14202b;line-height:1.4}
.hmgl-trackband-text strong{font-size:1.05rem;margin-right:6px}
.hmgl-trackband-text span{color:#3d4f60}
.hmgl-trackband-btn{flex:0 0 auto;display:inline-block;padding:9px 20px;border-radius:6px;background:var(--hmgl-blue,#2e6f9e);color:#fff !important;font-weight:700;text-decoration:none !important;white-space:nowrap}
.hmgl-trackband-btn:hover{filter:brightness(1.1)}
[dir=rtl] .hmgl-trackband-text strong{margin:0 0 0 6px}
@media (max-width:700px){.hmgl-trackband{flex-wrap:wrap;margin:0 16px 28px}.hmgl-trackband-text{flex-basis:calc(100% - 60px)}.hmgl-trackband-text strong{display:block}.hmgl-trackband-btn{width:100%;text-align:center}}

/* hmgl-tracking-highlight-2 */
[dir=rtl] .hmgl-trackbtn{right:auto;left:20px}
@media (max-width:900px){.hmgl-trackbtn + .hmgl-nav-toggle{margin-left:0}[dir=rtl] .hmgl-trackbtn{margin-left:10px;margin-right:auto}[dir=rtl] .hmgl-trackbtn + .hmgl-nav-toggle{margin-right:0}}
/* hmgl-tracking-highlight-3 */
@media (max-width:900px){#header .inside .hmgl-trackbtn + .hmgl-nav-toggle{margin-left:0 !important}[dir=rtl] #header .inside .hmgl-trackbtn + .hmgl-nav-toggle{margin-right:0 !important}}

/* hmgl-whatsapp */
.hmgl-wa{position:fixed;right:20px;bottom:20px;z-index:900;display:flex;align-items:center;gap:0;height:54px;min-width:54px;padding:0 13px;border-radius:27px;background:#25d366;color:#fff !important;text-decoration:none !important;box-shadow:0 4px 14px rgba(0,0,0,.22);font-weight:700;font-size:.92rem;overflow:hidden;transition:gap .2s,padding .2s,box-shadow .2s}
.hmgl-wa svg{width:28px;height:28px;flex:0 0 28px}
.hmgl-wa span{max-width:0;white-space:nowrap;overflow:hidden;transition:max-width .25s}
.hmgl-wa:hover,.hmgl-wa:focus-visible{gap:9px;padding:0 18px 0 13px;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.hmgl-wa:hover span,.hmgl-wa:focus-visible span{max-width:260px}
[dir=rtl] .hmgl-wa{right:auto;left:20px}
@media (max-width:700px){.hmgl-wa{right:14px;bottom:14px;height:50px;min-width:50px;padding:0 11px}[dir=rtl] .hmgl-wa{left:14px}}
@media print{.hmgl-wa,.hmgl-trackbtn{display:none}}


/* hmgl-country-pages */
.hmgl-cp{max-width:1100px;margin:0 auto 20px}
.hmgl-cp h1{font-size:2.3rem;line-height:1.15;margin:0 0 14px;text-align:start}
.hmgl-cp h2{text-align:center;margin:38px 0 16px}
.hmgl-cp-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;margin:10px 0 28px}
.hmgl-cp-hero img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.hmgl-cp-lead{font-size:1.1rem;color:#3d4f60;margin:0 0 20px}
.hmgl-cp-btns{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.hmgl-cp-btn{display:inline-block;background:var(--hmgl-blue,#2e6f9e);color:#fff !important;font-weight:700;padding:11px 22px;border-radius:6px;text-decoration:none !important}
.hmgl-cp-btn2{display:inline-block;border:1.5px solid #25d366;color:#128c4a !important;font-weight:700;padding:10px 18px;border-radius:6px;text-decoration:none !important;background:#fff}
.hmgl-cp-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hmgl-cp-facts>div{background:#e7eff5;border:1px solid #d3e0ea;border-radius:10px;padding:14px 16px}
.hmgl-cp-facts small{display:block;color:#5b6b7a;font-size:.8rem}
.hmgl-cp-facts strong{font-size:1.02rem;line-height:1.35}
.hmgl-cp-facts a{color:inherit}
.hmgl-cp-goods{list-style:none;padding:0;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:900px}
.hmgl-cp-goods li{background:#fff;border:1.5px solid #d3e0ea;border-radius:20px;padding:6px 14px;font-weight:700;font-size:.92rem;color:#14202b}
.hmgl-cp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hmgl-cp-step{text-align:center}
.hmgl-cp-step i{display:inline-flex;width:44px;height:44px;border-radius:50%;border:1.8px solid var(--hmgl-blue,#2e6f9e);color:var(--hmgl-blue,#2e6f9e);align-items:center;justify-content:center;font-style:normal;font-weight:700;margin-bottom:8px}
.hmgl-cp-step b{display:block;margin-bottom:4px}
.hmgl-cp-step p{margin:0;color:#5b6b7a;font-size:.93rem}
.hmgl-cp-two{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;margin:40px 0 10px}
.hmgl-cp-box{border:1px solid #e3e8ee;border-radius:10px;padding:18px 22px}
.hmgl-cp-box h3{margin:0 0 10px}
.hmgl-cp-box ul{margin:0;padding-inline-start:20px}
.hmgl-cp-box li{margin:6px 0}
.hmgl-cp-note{background:#fff8e1;border-color:#f3dc92}
.hmgl-cp-note p{margin:0}
.hmgl-cp-small{font-size:.88rem;color:#5b6b7a;margin:10px 0 0}
.hmgl-cp-more{text-align:center;margin:18px 0 0}
.hmgl-cp-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--hmgl-blue,#2e6f9e);color:#fff;border-radius:12px;padding:24px 28px;margin:34px 0 10px}
.hmgl-cp-cta h3{margin:0 0 4px;color:#fff}
.hmgl-cp-cta p{margin:0;opacity:.92}
.hmgl-cp-btn-w{background:#fff;color:var(--hmgl-blue,#2e6f9e) !important;white-space:nowrap}
@media (max-width:900px){.hmgl-cp-hero,.hmgl-cp-two{grid-template-columns:1fr}.hmgl-cp-facts,.hmgl-cp-steps{grid-template-columns:1fr 1fr}.hmgl-cp h1{font-size:1.8rem}.hmgl-cp-cta{flex-direction:column;align-items:flex-start}}
@media (max-width:520px){.hmgl-cp-facts,.hmgl-cp-steps{grid-template-columns:1fr}}

.hmgl-cp-dest{max-width:1100px;margin:30px auto 36px;text-align:center}
.hmgl-cp-dest h2{margin:0 0 6px}
.hmgl-cp-dest p{color:#5b6b7a;margin:0 0 14px}
.hmgl-cp-dest-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hmgl-cp-dest-links a{display:inline-block;padding:8px 16px;border:1.5px solid var(--hmgl-blue,#2e6f9e);border-radius:20px;color:var(--hmgl-blue,#2e6f9e);font-weight:700;text-decoration:none}
.hmgl-cp-dest-links a:hover{background:var(--hmgl-blue,#2e6f9e);color:#fff}


/* Hauptnavigation: 12 Punkte (inkl. Abfahrten) in einer Zeile halten – 28.09.2026 */
@media (min-width:901px){header .mod_navigation ul.level_1>li>a,header .mod_navigation ul.level_1>li>strong,header .mod_navigation ul.level_1>li>span{padding-left:11px;padding-right:11px}}
@media (min-width:901px) and (max-width:1280px){header .mod_navigation ul.level_1>li>a,header .mod_navigation ul.level_1>li>strong,header .mod_navigation ul.level_1>li>span{padding-left:8px;padding-right:8px;font-size:15px}}