:root{
  --accent: #FFA040;
  --orange: #FFA040;
  --dark: #222;
  --footer-dark: #444;
  --light: #fff;
  --grey: #f5f5f5;
  --border: #eee;
  --card-bg: rgba(255,255,255,0.96);
  --radius: 14px;
  --maxwidth: 1200px;
  --avatar-size: 220px;
  --branch-img-width: 600px;   /* Größe der Branchen-Bilder, an Original angelehnt */
  --branch-img-wide: 650px;    /* für besonders breite Partner-Bilder (lcd-partner.gif) */
  --sidecol-width: 320px;      /* Breite der rechten Bildspalte (genutzt als Basis) */
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}


* { box-sizing: border-box; }
body {
  font-family: 'Segoe UI', 'Calibri', Arial, sans-serif;
  color: var(--dark);
  margin: 0;
  background: url("Backgroundimg.png") no-repeat center center fixed;
  background-size: cover;
}
header.sticky-header {
  background: linear-gradient(135deg, #ff9a2a 0%, #f5a84a 100%);
  color: var(--light);
  max-width: calc(100vw - 6cm);
  margin: 0.3cm auto 0.2cm auto;
  border-radius: 22px;
  box-shadow: 0 2px 12px rgba(255,160,64,0.10);
  border-bottom: 4px solid var(--footer-dark);
  padding: 0.5em 2em 0.3em 2em;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: all 0.3s;
}
.header-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 2em;
}
.logo-box {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-large {
  height: 70px;
  transition: height 0.3s;
  width: auto;
}
.header-center-block {
  flex: 1;
  text-align: center;
  min-width: 400px;
}
.header-title-index {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.1em 0;
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
}
.subtitle-index {
  font-size: 0.8em;
  color: #fffdd0;
  margin: 0 0 0.2em 0;
  text-align: center;
  font-family: 'Segoe UI', 'Calibri', Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.dropdown-content,
.dropdown-submenu {
  display: none !important;
}
li.submenu-open > .dropdown-content,
li.submenu-open > .dropdown-submenu {
  display: block !important;
}
li.submenu-open > .dropdown-submenu {
  display: block !important;
}
.nav-search-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5em;
}
.nav-search-bar nav {
  flex: 3 1 0;
}
.nav-search-bar form {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Eingeklapptes Header-Layout */
header.sticky-header.shrunk {
  max-width: calc(100vw - 4cm);
  height: 40px;
  min-height: 40px;
  padding: 0 1em;
  display: flex;
  align-items: center;
}
header.sticky-header.shrunk .header-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100%;
  height: 100%;
  flex-wrap: nowrap !important;
}
header.sticky-header.shrunk .logo-box {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 40px !important;
}
header.sticky-header.shrunk .logo-large {
  height: 28px !important;
  width: auto;
  display: block;
}
header.sticky-header.shrunk .header-center-block {
  display: none !important;
}
header.sticky-header.shrunk .nav-search-bar.nav-search-shrunk {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important; /* Nav mittig, Search rechts */
  width: 100% !important;
  height: 100% !important;
  gap: 0 !important;
}
header.sticky-header.shrunk .main-nav {
  flex: 1 1 0 !important;
  display: flex !important;
  justify-content: center !important; /* Navigation mittig */
  align-items: center !important;
}
header.sticky-header.shrunk .main-nav ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.5em;
}
header.sticky-header.shrunk .main-nav li {
  white-space: nowrap !important;
}
header.sticky-header.shrunk .search-form {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-left: 1em;
}
.header-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-height: 80px;
}
/* Linke Spalte */
.header-logo-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: rgba(255, 160, 64, 0); /* orange, aber 100% transparent */
  border-radius: 14px;
  padding: 0.6em 1em;
  height: 100%;
}
# /* Logo vertikal mittig und linksb?ndig */
.header-logo-box a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Mittlere Spalte */
.header-center-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.header-center-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}
.main-nav {
  width: 100%;
  margin-top: 0.6em;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 0em 0.2em 0;
}
}
.header-center-box nav.main-nav {
  margin-top: auto;
  margin-bottom: 0;
  align-self: center;
}

/* Rechte Spalte: Search Bar unten ausgerichtet */
.header-search-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
  padding: 0 1em 0 0;
}
.header-search-box .search-form {
  margin-top: auto; /* nach unten schieben */
}


/* Navigation & Dropdown */
.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}
.main-nav ul {
  display: flex;
  gap: 2em;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}
.main-nav a,
.main-nav .dropdown-toggle {
  font-family: inherit;
  font-size: 1.11em;
  font-weight: 500;
  color: var(--light);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  text-decoration: none;
  transition: color 0.2s;
}
.main-nav a:hover, .dropdown-toggle:hover {
  color: #fffdd0;
  text-decoration: underline;
}
.dropdown-toggle svg {
  width: 1em;
  height: 1em;
  margin-left: 0.22em;
  vertical-align: middle;
  display: inline-block;
  stroke: currentColor;
  position: relative;
  top: 2px;    /* schiebt das SVG ca. 2px nach unten */
}
.main-nav li {
  white-space: nowrap;
}
.dropdown {
  position: relative;
}
.dropdown-toggle {
  background: none;
  border: none;
  color: var(--light);
  font-size: 1.13em;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 2.2em;
  left: 0.3cm;
  background: var(--light);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(255,160,64,0.10);
  padding: 1em 10em 1em 1em;
  width: auto; 
  z-index: 110;
}
.dropdown-content > li {
  margin-bottom: 0.5em;
  position: relative;
  margin-left: 0.3cm;
}
.dropdown-content a {
  color: var(--dark);
  padding: 0.2em 0;
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 1.06em;
  transition: color 0.2s, text-decoration 0.2s;
}
.dropdown-content a img.nav-flag {
  height: 18px;
  width: 28px;
  margin-right: 8px;
  vertical-align: middle;
}
.dropdown-content a:hover {
  color: var(--orange);
  text-decoration: underline;
}
.dropdown-content ul.dropdown-submenu {
  display: none;
  background: var(--light);
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(255,160,64,0.08);
  margin: 0.2em 0 0.2em 1em;
  padding: 0.4em 0.7em;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 200px;
  z-index: 111;
}
/* Submenu link (trigger for dropdown-submenu) */
.dropdown-link {
  color: var(--dark);
  font-weight: 500;
  text-decoration: none;
  font-size: 1.06em;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.2s, text-decoration 0.2s;
}
.dropdown-link:hover {
  color: var(--orange);
  text-decoration: underline;
}

/* Positionierung und Anzeige der Submenus */
.dropdown-content ul.dropdown-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background: var(--light);
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(255,160,64,0.08);
  margin: 0.2em 0 0.2em 1em;
  padding: 0.4em 0.7em;
  min-width: 220px;
  z-index: 111;
}


/* Zeige das Submenu beim .submenu-open (durch JS!) */
li.submenu-open > .dropdown-submenu {
  display: block !important;
}
.caret {
  margin-left: 0.5em;
  font-size: 1em;
}
.search-form {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 0;
  flex-shrink: 0;
}
.search-form input[type="text"] {
  width: 170px;
  padding: 0.5 1em;
  border-radius: 24px;
  border: 1px solid var(--border);
  font-size: 1em;
}
.search-btn-orange {
  background: var(--light);
  color: var(--orange);
  border: 2px solid var(--orange);
  padding: 0.1em 1em;
  border-radius: 24px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(255,160,64,0.07);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.search-btn-orange:hover {
  background: #FFF4E3;
  color: #ffb65c;
  border-color: #ffb65c;
}
/* bis hier kopierem */







/* ---- Floating, zentrierte orange Section-Headlines über den weißen Cards ----
   Füge diesen Block ans Ende von style-adr.css */
.section-headline.orange.centered {
  display: inline-block;               /* sorgt dafür, dass die Breite dem Text folgt */
  color: var(--orange);                /* oranger Text */
  background: transparent;             /* kein füllendes Rechteck, nur Text */
  font-size: 1.55rem;                  /* etwas größer */
  font-weight: 700;
  text-align: center;
  padding: 0.18rem 0.6rem;             /* leichter Innenabstand für bessere Lesbarkeit */
  border-radius: 8px;
  position: relative;
  left: 50%;
  transform: translateX(-50%) translateY(-10%); /* hebt die Überschrift leicht über die Card */
  margin: 0 0 0;                       /* Abstand wird über Card gesteuert */
  z-index: 12;                         /* über der Card anzeigen */
  line-height: 1;
  white-space: nowrap;
}

/* 1) Reset und Formatierung nur für die Headline-h4 (beibehaltung der Semantik) */
.section-headline.orange.centered h4 {
  margin: 0;                     /* entfernt den Default-Abstand der h4 */
  padding: 0.18rem 0.6rem;       /* visuelle Polsterung wie bei vorherigem h3 */
  font-size: 1.55rem;            /* gleiche Größe wie .section-headline vorher */
  font-weight: 700;
  line-height: 1;
  display: inline-block;         /* Breite folgt dem Text; erlaubt transform korrekt */
}
/* --- Begrenzung für das Impressums-Bild (terms.gif) --- */
img[src="terms.gif"],
img.terms-img {
  display: block;
  margin: 0.6rem auto;     /* zentriert und etwas Abstand */
  max-width: 320px;        /* maximale Breite auf großen Bildschirmen */
  width: 40%;              /* skaliert responsiv (60% der Card/Bereichsbreite) */
  height: auto;            /* erhält das Seitenverhältnis */
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  
}
/* schmale Variante nur für ausgewählte Cards (Impressum / Kontakt) */
.card.card-narrow {
  max-width: 820px;        /* gewünschte maximale Breite (anpassen nach Bedarf) */
  width: calc(100% - 2rem);/* responsive Breite mit etwas horizontalem Puffer */
  margin: 0.6rem auto;     /* zentriert die Card */
  padding: 1rem;           /* innerer Abstand bleibt erhalten */
  box-sizing: border-box;
}

/* Kontakt-Kopf zentrieren und Role-Badge größer machen */
.contact-card-head {
  display: flex;
  flex-direction: column;   /* Rolle über Name, vertikal zentriert */
  align-items: center;      /* horizontal zentrieren */
  justify-content: center;
  text-align: center;       /* Text in der Mitte */
  gap: 0.18rem;
  padding-bottom: 0.18rem;
}

/* Tighten spacing for contact cards (reduziert Abstände in allen .contact-card) */
.contact-card .contact-card-head {
  gap: 0.08rem;         /* vorher 0.18rem */
  padding-bottom: 0.06rem; /* vorher 0.18rem */
  align-items: center;
}

.contact-card .contact-role {
  margin-top: 0.12rem;  /* vorher 0.25rem */
}

/* Abstand zwischen Kopf (Name) und Metadaten verringern */
.contact-card .contact-meta {
  margin-top: 0.55rem;  /* vorher 0.6rem */
}

/* Abstand zwischen H4 (Name) und der ersten meta-row verringern */
.contact-card .contact-meta h4 {
  margin: 0 0 0.16rem 0; /* vorher für h4 evtl. Standard; setzt nun kleinen Abstand */
  font-size: 1.04rem;    /* behält angemessene Größe */
}

/* Kontakt-Überschrift innerhalb der Card/Section */
.contact-headline {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 0.6rem 0;
  text-align: left;
}
/* Contacts: force 2x2 grid on medium+ screens, 1 column on small screens */
.contacts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 nebeneinander */
  gap: 1rem;
  margin-top: 0.6rem;
}


/* Einzelne Kontaktkarte */
.contact-card {
  background: linear-gradient(180deg, var(--card-bg) 0%, rgba(255,250,245,0.96) 100%);
  border-radius: 12px;
  padding: 0.9rem;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Hover-Effekt */
.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
}

/* Kopfbereich */
.contact-card-head h4 {
  margin: 0;
  font-size: 1.04rem;
  color: var(--dark);
}
.contact-role {
  font-size: 0.88rem;
  color: #666;
  margin-top: 0.25rem;
}
/* Hervorhebung der Rollen: oranger Badge / Text */
.role-badge {
  display: inline-block;
  color: var(--orange);
  background: rgba(255,160,64,0.08);
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1;
}
/* Metadaten (Telefon/Mobil) */
.contact-meta {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.95rem;
}
.meta-row { display:flex; gap:0.6rem; align-items:center; }
.meta-label { color:#666; min-width:76px; font-weight:600; }

/* Links wie telephone */
.contact-meta a { color: var(--accent); text-decoration: none; }
.contact-meta a:hover { text-decoration: underline; }

/* Scope Buttons nur für Kontakt-Karten, damit Header-Buttons nicht beeinflusst werden */
.contact-actions .btn {
  font-family: inherit;
  font-size: 0.92rem;
  padding: 0.38rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
}

.contact-actions .btn.btn-tertiary {
  background: #fff;
  color: #333;
  border: 1px solid var(--border);
}

.contact-actions .btn.btn-tertiary:hover {
  background: #fff7f0;
  border-color: rgba(255,160,64,0.35);
}




/* Alle Inhalts-Links (innerhalb von <body>) schwarz + keine Unterstreichung, Unterstreichung on hover/focus */
body a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

body a:hover,
body a:focus {
  text-decoration: underline;
  color: var(--accent);
}
/* Fix: set fixed base font-size for narrow screens <= 1000px
   - legt sowohl root (html) als auch body fest, damit rem- und em-Berechnungen stabil bleiben 

/* Container */
.container { max-width: var(--maxwidth); margin: 1.4rem auto; padding: 0 1rem; }

/* Hero */
.hero { background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95)); border-radius: var(--radius); padding:1.2rem; box-shadow:0 10px 26px rgba(0,0,0,0.08); }
.hero h2 { color:var(--accent); margin:0 0 0.6rem 0; font-size:1.25rem; }
.hero .intro { margin:0 0 1rem 0; color:var(--muted); line-height:1.45; }
.hero-grid { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.hero-text { flex:1 1 480px; }
.hero-image-wrap { flex:0 0 600px; display:flex; justify-content:center; align-items:center; }
.large-img { width:600px; max-width:95%; height:auto; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,0.08); }

/* Section and cards */
.section { margin-top:1.6rem; }
.card-section .card { background: var(--card-bg); border-radius:12px; padding:1rem; box-shadow:0 10px 26px rgba(0,0,0,0.06); margin-bottom:1rem; }
.section-title { color:var(--accent); text-align:center; margin:0 0 0.8rem 0; font-size:1.2rem; }

.card h3 { margin:0 0 0.6rem 0; color:var(--accent); }
.card p { margin:0 0 0.8rem 0; color:var(--muted); line-height:1.45; }
.large-img-row { display:flex; gap:1rem; flex-wrap:wrap; margin-top:0.8rem; justify-content:flex-start; }

/* Branch images: preserve original-like sizes */
.branch-img {
  width: var(--branch-img-width);
  max-width: 95%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.branch-img-wide {
  width: var(--branch-img-wide);
  max-width: 95%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

@media (max-width: 700px) {
  .hero-image-wrap img.large-img[src="network.jpg"] {
    transform: scale(0.7);
    height: auto;
  }
}

/* bullets */
.bullet-list { margin:0.6rem 0 0.8rem 1.2rem; color:var(--muted); }

/* History grid: text left, image right, same large size */
.history-grid {
  display:flex;
  gap:1rem;
  align-items:center; /* vertically zentrieren der rechten Abbildung zur Textbox */
  flex-wrap:wrap;
}
.history-text { flex:1 1 520px; }
.history-image { flex:0 0 400px; display:flex; justify-content:center; align-items:center; }
.history-image img { max-height:100%; height:auto; }

/* --- Replace existing .three-column/.three-left/.three-mid/.three-right/.branch-img-col rules with this block --- */

/* Variablen für drei-spalten Grid und Bildbox-Höhe */
:root {
  --three-left: 59%;           /* konkrete Breite der linken Textspalte (ändere z.B. 35%/45% nach Bedarf) */
  --three-gap: 1rem;           /* Abstand zwischen den Spalten */
  --side-img-row-height: 140px;/* Höhe jeder Bild-"bbox" in Mitte/Rechts (anpassen z.B. 120/160) */
}

/* Replace the existing three-column / three-mid / three-right / branch-img-col rules with this block */

/* Seiten-Spalten: 2 Zeilen, die die gesamte Spaltenhöhe teilen (keine fixe row-height) */
.three-column {
  display: grid;
  grid-template-columns: var(--three-left, 40%) minmax(0,1fr) minmax(0,1fr);
  gap: var(--three-gap, 1rem);
  align-items: stretch; /* sorgt dafür, dass die Seiten-Spalten die Texthöhe bekommen */
  width: 100%;
  box-sizing: border-box;
}

/* mittlere & rechte Spalte: 2 Grid-Zeilen, die den verfügbaren Platz teilen */
.three-column .three-mid,
.three-column .three-right {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr)); /* zwei Zeilen, jede wächst */
  gap: 0.6rem;
  align-items: center;    /* vertikal zentrieren IN DER ZELLE */
  justify-items: center;  /* horizontal zentrieren IN DER ZELLE */
  align-content: stretch; /* wenn Spalten gestreckt sind, füllen die zwei Zeilen die Spaltenhöhe */
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
}

/* Bildverhalten in den Grid-Zellen:
   Bilder dürfen nicht die Zelle "aufblasen" – sie skalieren innerhalb der Zelle */
.branch-img-col {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;    /* behält Seitenverhältnis */
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  margin: 0;
}

/* Wenn nur ein Bild in der Spalte ist, spannt es beide Zeilen und bleibt mittig */
.three-column .three-mid .branch-img-col:only-child,
.three-column .three-right .branch-img-col:only-child {
  grid-row: 1 / -1;       /* spannt beide Zeilen */
  justify-self: center;
  align-self: center;
  max-height: 100%;
}

/* Utility for vertical stacking in mid/right columns */
.images-vertical { display:flex; flex-direction:column; gap:0.6rem; align-items:center; }

/* Management: große runde Avatare */
.management { display:flex; gap:0.5rem; flex-wrap:wrap; justify-content:center; margin-top:0.8rem; }
.profile { background: var(--card-bg); border-radius:12px; padding:1rem; width:375px; text-align:center; box-shadow:0 12px 26px rgba(0,0,0,0.06); display:flex; flex-direction:column; gap:0.6rem; align-items:center; }
.avatar { width:var(--avatar-size); height:var(--avatar-size); border-radius:50%; overflow:hidden; display:block; box-shadow:0 12px 26px rgba(0,0,0,0.12); border:8px solid rgba(255,255,255,0.7); background:linear-gradient(180deg,#fff,#fff0); }
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.profile h4 { margin:0; font-size:1.05rem; color:var(--dark); }
.profile-short { margin:0; color:var(--muted); line-height:1.45; font-size:0.95rem; }






























/* ab hier kopierem */


/* Footer */
footer {
  background: var(--footer-dark);
  color: var(--light);
  padding: 2em 0 1em 0;
  margin-top: 3em;
  border-top: 4px solid var(--orange);
}
.footer-quicklangs {
  display: flex;
  flex-direction: row;
  gap: 2em;
  align-items: flex-start;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto 1em auto;
}
.footer-quicklangs > div {
  min-width: 120px;
}
.footer-quicklangs h4 {
  color: var(--orange);
  margin-bottom: 0.7em;
  font-size: 1.1em;
}
.footer-quicklangs ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-quicklangs li {
  margin-bottom: 0.5em;
}
.footer-quicklangs a {
  color: var(--light);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s, color 0.2s;
}
.footer-quicklangs a:hover {
  opacity: 1;
  color: var(--orange);
}
.footer-langlist img.nav-flag {
  height: 18px;
  width: 28px;
  margin-right: 8px;
  vertical-align: middle;
}
.copyright {
  text-align: center;
  margin-top: 1em;
  font-size: 0.95em;
  opacity: 0.7;
}
.main-nav .dropdown-content,
.main-nav .dropdown-submenu {
  display: none;
  flex-direction: column !important;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 220px;
  z-index: 50;
  background: #fff;
  color: #222;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border-radius: 6px;
  padding: 0.5em 0;
}

.main-nav .dropdown-submenu {
  left: 100%;
  top: 0;
  min-width: 200px;
  z-index: 51;
}

li.submenu-open > .dropdown-submenu {
  display: block;
}

.main-nav {
  position: relative;
  z-index: 40;
}

/* ---- NEW: hide center title and logo when page is scrolled more than 1px ----
   Die JS-Funktion fügt dem Header die Klasse "scrolled" hinzu/entfernt.
   Hiermit werden .header-center-title und .header-logo-box ausgeblendet. */
header.sticky-header.scrolled .header-center-title,
header.sticky-header.scrolled .header-logo-box {
  display: none !important;
}

/* Optional: reduziert die Höhe des Logos bei scrolled (sanfter Übergang) */
header.sticky-header .logo-large {
  transition: height 0.25s ease, opacity 0.25s ease;
}
header.sticky-header.scrolled .logo-large {
  height: 28px !important;
  opacity: 1;
}


/* ==== Zusatz: Header beim Scrollen auf minimale Breite schrumpfen ==== */
/* Die JS-Klasse "scrolled" wird bereits gesetzt — hier wird die Breite angepasst. */

header.sticky-header.scrolled {
  /* statt großer max-width: passe die Breite an den Inhalt an */
  max-width: none;
  width: -moz-max-content;   /* Firefox */
  width: -webkit-max-content; /* alte WebKit */
  width: max-content;        /* moderne Browser: passt die Box an ihren Inhalt an */
  padding: 0.25em 0.6em;     /* engerer Innenabstand */
  border-radius: 12px;       /* kleinerer Radius beim geschrumpften Zustand */
  margin: 0.4cm auto 0.2cm auto;
  transition: width 0.25s ease, padding 0.25s ease, border-radius 0.25s ease;
  display: block;            /* sicherstellen, dass max-content funktioniert */
}

/* Layout innerhalb verkleinert: nur eine Spalte, Inhalte zentrieren */
header.sticky-header.scrolled .header-grid {
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  min-height: 40px;
}

/* Logo und Titel sind bereits ausgeblendet (display: none) — Navigation zentrieren */
header.sticky-header.scrolled .main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Abstand in der Nav etwas kleiner, damit alles in die enge Breite passt */
header.sticky-header.scrolled .main-nav ul {
  gap: 1em;
}

/* Suchfeld weiter rechts behalten, aber kleiner machen, falls nötig */
header.sticky-header.scrolled .search-form input[type="text"] {
  width: 120px;
  transition: width 0.25s ease;
}

/* Stelle sicher, dass die Grid-Struktur drei Spalten hat */
header.sticky-header .header-grid {
  grid-template-columns: auto 1fr auto; /* Logo | Nav (flex) | Search */
  align-items: center;
}

/* Weisen wir die Grid-Spalten explizit zu (sicherheitshalber) */
header.sticky-header .header-logo-box   { grid-column: 1; }
header.sticky-header .header-center-box { grid-column: 2; }
header.sticky-header .header-search-box { grid-column: 3; justify-self: end; align-self: center; }

/* Beim geschrumpften Header: Grid behalten, Inhalt der linken + mittleren Zelle unsichtbar machen,
   aber die Zellen selbst im Layout belassen (so bleibt die 3. Spalte = Suche an Ort und Stelle). */
header.sticky-header.scrolled {
  /* kompakterer Header, aber Grid bleibt erhalten */
  padding: 0.25em 0.6em;
  border-radius: 12px;
  transition: width 0.25s ease, padding 0.25s ease;
}

/* Wichtig: nicht display:none setzen (das entfernt die Zelle).
   Stattdessen Sichtbarkeit ausblenden und Interaktion verhindern. */
header.sticky-header.scrolled .header-logo-box,
header.sticky-header.scrolled .header-center-title {
  display: flex !important;    /* überschreibt vorheriges display:none !important */
  visibility: hidden;          /* unsichtbar, nimmt aber Platz ein */
  opacity: 0;
  pointer-events: none;
}

/* Suche soll rechts stehen und gut sichtbar bleiben */
header.sticky-header.scrolled .header-search-box {
  justify-self: end;
  align-self: center;
  display: flex;
}

/* kleinere Lücken in der Nav, damit alles in die kompaktere Breite passt */
header.sticky-header.scrolled .main-nav ul {
  gap: 1em;
}

/* Suchfeld etwas kleiner im shrunk Zustand */
header.sticky-header.scrolled .search-form input[type="text"] {
  width: 120px;
  transition: width 0.2s ease;
}

/* ==== Shrink header to text height when scrolled ==== */
/* (muss nach vorhandenen scrolled-Regeln kommen, damit !important überschrieben wird) */

header.sticky-header {
  transition: padding 200ms ease, border-radius 200ms ease, background 200ms;
}

/* Stelle sicher, dass Grid immer drei Spalten hat */
header.sticky-header .header-grid {
  grid-template-columns: auto 1fr auto; /* Logo | Center (Nav) | Search */
  align-items: center;
}

/* Grid-Spalten explizit zuweisen (sicherstellen, 3. Spalte bleibt Search) */
header.sticky-header .header-logo-box   { grid-column: 1; }
header.sticky-header .header-center-box { grid-column: 2; }
header.sticky-header .header-search-box { grid-column: 3; justify-self: end; }

/* Zustand nach dem Scrollen -> sehr kompakter Header:
   - Padding reduzieren
   - Header-Höhe durch Nav-Text bestimmen lassen (height: auto)
   - Grid bleibt erhalten */
header.sticky-header.scrolled {
  padding: 0.18em 0.6em;   /* sehr kleine vertikale Abstände */
  border-radius: 12px;
  min-height: 0;
  height: auto;
  transition: padding 180ms ease, border-radius 180ms ease;
}

/* WICHTIG: überschreibe ggf. vorhandene display:none !important-Regel:
   wir müssen die Zellen behalten, aber ihren sichtbaren Inhalt einklappen. */
header.sticky-header.scrolled .header-logo-box,
header.sticky-header.scrolled .header-center-title {
  display: flex !important;        /* grid-zelle bestehen lassen */
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;            /* nimmt keine Höhe mehr ein */
  min-height: 0 !important;
  overflow: hidden !important;     /* alles ausblenden */
  opacity: 0 !important;
  pointer-events: none !important;
}

/* WICHTIG: nicht die ganze header-center-box einklappen (darin sitzt die Nav),
   sondern nur die header-center-title (H1 + subtitle). */
header.sticky-header.scrolled .header-center-box {
  /* Die Box bleibt sichtbar, damit .main-nav weiter dargestellt wird */
  align-items: center;
  justify-content: center;
}

/* Navigation: entferne Abstand oben, damit die Nav die Höhe bestimmt */
header.sticky-header.scrolled .main-nav {
  margin-top: 0 !important;
  padding-top: 0 !important;
  align-items: center;
  display: flex;
}

/* Kleine Anpassungen: weniger gap in der Nav, kleinere Suchbox */
header.sticky-header.scrolled .main-nav ul {
  gap: 0.85em;
}
header.sticky-header.scrolled .search-form input[type="text"] {
  width: 110px;
  transition: width 160ms ease;
}

/* Logo: falls sichtbar, sicherstellen, dass es nicht Höhen erzeugt */
header.sticky-header.scrolled .header-logo-box img,
header.sticky-header.scrolled .logo-large {
  height: 0 !important;
  width: auto !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==== Abstand zwischen Text (mittlere Spalte) und Suchfeld (3. Spalte) nach Scrollen +1cm ==== */
/* Dieses Snippet gehört ans Ende von style-index.css */

header.sticky-header.scrolled .header-grid {
  /* Grid beibehalten (Logo | Nav | Search) */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  /* 1cm zusätzlicher Abstand zwischen den Spalten (insbesondere zwischen Mitte und Suche) */
  column-gap: 1cm;
  /* optional: sanfte Animation beim Ändern des Abstands */
  transition: column-gap 200ms ease, padding 180ms ease;
}

/* Stelle sicher, dass die Suche rechts bleibt */
header.sticky-header.scrolled .header-search-box {
  grid-column: 3;
  justify-self: end;
  align-self: center;
}

/* ==== Nach dem Scrollen: Nav + Suche 3px nach oben schieben ==== */
header.sticky-header.scrolled .main-nav,
header.sticky-header.scrolled .header-search-box {
  transform: translateY(-4px);
  -webkit-transform: translateY(-4px);
  transition: transform 160ms ease;
  align-self: center;    /* sicherstellen, dass Elemente vertikal zentriert bleiben */
}


/* ==== Dropdown-Subitems (z.B. "Thermal Processes") beim Shrink / schmalen Screen anpassen ==== */

/* 1) Beim geschrumpften Header die Dropdown-Trigger (dropdown-link) kleiner machen
   und Abstand/Padding anpassen, damit sie optisch zum verkleinerten Header passen. */
header.sticky-header.scrolled .main-nav .dropdown-link,
header.sticky-header.scrolled .main-nav .dropdown-content a,
header.sticky-header.scrolled .main-nav .dropdown-content .dropdown-link {
  font-size: 0.95em !important;     /* etwas kleiner als die Standard-Navigation */
  line-height: 1.15 !important;
  padding: 0.18em 0.35em !important; /* kompakteres Padding in den Dropdowns */
}

/* 2) Auch die Submenus (dropdown-submenu) kleiner skalieren */
header.sticky-header.scrolled .main-nav .dropdown-submenu,
header.sticky-header.scrolled .main-nav .dropdown-submenu a {
  font-size: 0.95em !important;
}



/* 4) Kleiner Icon- / Caret-Anpassung für kompaktere Darstellung */
header.sticky-header.scrolled .dropdown-link .caret,
header.sticky-header.scrolled .dropdown-toggle svg {
  width: 0.9em;
  height: 0.9em;
  vertical-align: middle;
}

/* 5) Optional: verringere den Abstand innerhalb des Dropdown-Containers, falls es zu viel Leerraum gibt */
header.sticky-header.scrolled .main-nav .dropdown-content {
  padding: 0.6em 0.8em !important;
}
@media (max-width: 1550px) {
  /* Haupt-Header-Titel (war 1.4rem) -> 1.26rem (90%) */
  header.sticky-header .header-title-index {
    font-size: 1.26rem;
  }

  /* Subtitle (war 0.8em) -> 0.72em (90%) */
  header.sticky-header .subtitle-index {
    font-size: 0.72em;
  }

  /* Navigationstexte (waren ~1.11em / 1.13em) -> ca. 1.00em (˜90%) */
  header.sticky-header .main-nav a,
  header.sticky-header .main-nav .dropdown-toggle {
    font-size: 0.80em;
  }

  /* Optional: leichte Anpassung für Dropdown-Icons falls nötig */
  header.sticky-header .dropdown-toggle svg {
    width: 0.95em;
    height: 0.95em;
  }

  /* Suchfeld-Button / Input ggf. kleiner skalieren, damit alles harmonisch bleibt */
  header.sticky-header .search-form input[type="text"] {
    width: 120px; /* bleibt wie bei shrunk-Regeln, passt aber zum kleineren Text */
  }
}
/* ==== Bei <=1400px: header-search-box um 30% verkleinern ==== */
/* Füge diesen Block ans Ende von style-index.css ein */

@media (max-width: 1550px) {
  /* Suchbox-Container: etwas kompakter machen */
  header.sticky-header .header-search-box {
    padding: 0;
    gap: 0.3em;
    align-items: center;
  }

  /* Eingabefeld: 30% kleiner (170px ? 119px) */
  header.sticky-header .search-form input[type="text"] {
    width: 119px;
    font-size: 0.9em;            /* leicht kleinere Schrift im Feld */
    padding: 0.35em 0.6em;
    transition: width 160ms ease, font-size 160ms ease, padding 160ms ease;
  }

  /* Button: ebenfalls 30% kleiner (visuell) */
  header.sticky-header .search-form .search-btn-orange {
    padding: 0.08em 0.7em;       /* reduzierte horizontale Polsterung */
    font-size: 0.9em;
    border-width: 1.6px;
    transition: padding 160ms ease, font-size 160ms ease;
  }


  header.sticky-header.scrolled .search-form .search-btn-orange {
    padding: 0.06em 0.55em;
    font-size: 0.9em;
  }

  /* Sicherstellen, dass die Search-Box in der 3. Grid-Spalte bleibt und
     nicht die vertikale Ausrichtung stört */
  header.sticky-header .header-search-box {
    grid-column: 3;
    justify-self: end;
    align-self: center;
  }

  }
  /* 3) Bei Notebook-/kleineren Bildschirmen ebenfalls anpassen (Breakpoints wie zuvor) */
@media (max-width: 1550px) {
  header.sticky-header .main-nav .dropdown-link,
  header.sticky-header .main-nav .dropdown-content a,
  header.sticky-header .main-nav .dropdown-submenu a {
    font-size: 0.7em !important;
  }
}
  /* ==== Reduce .search-form height by 5px for <=1400px (before & after scroll) ==== */
@media (max-width: 1550px) and (min-width: 1270px) {
  /* Container: sicherstellen, dass Kinder zentriert sind */
  header.sticky-header .search-form,
  header.sticky-header .header-search-box .search-form {
    display: flex;
    align-items: center;
    gap: 0.4em;
    height: auto;
  }

  /* Vor dem Scrollen: Eingabefeld + Button um 5px kleiner als Standard */
  /* (Standard war ungefähr ~39px; hier setzen wir 34px) */
  header.sticky-header .search-form input[type="text"],
  header.sticky-header .header-search-box .search-form input[type="text"] {
    height: 20px;
    line-height: 20px;
    padding: 0 0.6em; /* horizontales Padding beibehalten */
    font-size: 0.95rem;
    box-sizing: border-box;
    border-radius: 20px;
  }
  header.sticky-header .search-form .search-btn-orange,
  header.sticky-header .header-search-box .search-form .search-btn-orange {
    height: 20px;
    line-height: 20px;
    padding: 0 10px;
    font-size: 0.95rem;
    box-sizing: border-box;
  }
  /* vor dem Scrollen: Input-Feld auf 20px Höhe setzen */
header.sticky-header .header-search-box .search-form input[type="text"][name="query"],
header.sticky-header .search-form input[type="text"][name="query"] {
  height: 20px;
  line-height: 20px;
  padding: 0 0.5em;
  font-size: 0.88rem;
  border-radius: 18px;
  box-sizing: border-box;
  vertical-align: middle;
}
  /* scrolled Zustand: ebenfalls explizit das Input-Feld verkleinern */
header.sticky-header.scrolled .header-search-box .search-form input[type="text"][name="query"],
header.sticky-header.scrolled .search-form input[type="text"][name="query"] {
  height: 20px;                 /* Zielhöhe nach dem Scrollen */
  line-height: 20px;
  padding: 0 0.5em;
  font-size: 0.88rem;
  border-radius: 18px;
}
/* ==== Logo bei =1400px um 20% verkleinern ==== */
  /* Standardzustand: 70px -> 56px (˜ -20%) */
  header.sticky-header .logo-large {
    height: 56px;
    width: auto;
    transition: height 180ms ease;
  }
  /* ==== Abstand zwischen Text (mittlere Spalte) und Suchfeld (3. Spalte) - ohne Scrollen ==== */
/* Gleiche Werte wie im .scrolled-Zustand, aber für den normalen Headerzustand */
header.sticky-header .header-grid {
  /* Grid: Platzhalter links | Navigation mittig (flex) | Suche rechts */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  /* 1cm zusätzlicher Abstand zwischen Mitte und Suche */
  column-gap: 0.6cm;
  /* sanfte Animation beim Ändern des Abstands */
  transition: column-gap 200ms ease, padding 180ms ease;
}
/* ==== Reduce gap between top-level nav items by 2px ==== */
/* Place at the end of the file so it overrides earlier gap declarations */

header.sticky-header .main-nav ul {
  /* original: 2em -> reduce by 2px */
  gap: calc(2em - 6px);
}
}

  /* Nach dem Scrollen (.scrolled): ebenfalls um 5px reduzieren gegenüber scrolled-Standard.
     Falls dein scrolled-Standard schon z.B. 34px war, setze hier 29px (-5px).
  /* ==== Reduce .search-form height by 5px for <=1400px (before & after scroll) ==== */
/* Für Bildschirmbreiten zwischen 900px und 1270px:
   Header soll vor dem Scrollen wie nach dem Scrollen aussehen,
   jedoch ist .header-center-box sichtbar. */
@media (max-width: 1270px) {
  /* Container: sicherstellen, dass Kinder zentriert sind */
  header.sticky-header .search-form,
  header.sticky-header .header-search-box .search-form {
    display: flex;
    align-items: center;
    gap: 0.4em;
    height: auto;
  }

  /* Vor dem Scrollen: Eingabefeld + Button um 5px kleiner als Standard */
  /* (Standard war ungefähr ~39px; hier setzen wir 34px) */
  header.sticky-header .search-form input[type="text"],
  header.sticky-header .header-search-box .search-form input[type="text"] {
    height: 20px;
    line-height: 20px;
    padding: 0 0.6em; /* horizontales Padding beibehalten */
    font-size: 0.95rem;
    box-sizing: border-box;
    border-radius: 20px;
  }
  header.sticky-header .search-form .search-btn-orange,
  header.sticky-header .header-search-box .search-form .search-btn-orange {
    height: 20px;
    line-height: 20px;
    padding: 0 10px;
    font-size: 0.95rem;
    box-sizing: border-box;
  }
  /* vor dem Scrollen: Input-Feld auf 20px Höhe setzen */
header.sticky-header .header-search-box .search-form input[type="text"][name="query"],
header.sticky-header .search-form input[type="text"][name="query"] {
  height: 20px;
  line-height: 20px;
  padding: 0 0.5em;
  font-size: 0.88rem;
  border-radius: 18px;
  box-sizing: border-box;
  vertical-align: middle;
}
  /* scrolled Zustand: ebenfalls explizit das Input-Feld verkleinern */
header.sticky-header.scrolled .header-search-box .search-form input[type="text"][name="query"],
header.sticky-header.scrolled .search-form input[type="text"][name="query"] {
  height: 20px;                 /* Zielhöhe nach dem Scrollen */
  line-height: 20px;
  padding: 0 0.5em;
  font-size: 0.88rem;
  border-radius: 18px;
}
  /* Logo ausblenden (falls noch nicht wirksam) */
  .logo-large,
  .logo,
  .logo-title img {
    display: none !important;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
  }
  
  /* ==== Abstand zwischen Text (mittlere Spalte) und Suchfeld (3. Spalte) - ohne Scrollen ==== */
/* Gleiche Werte wie im .scrolled-Zustand, aber für den normalen Headerzustand */
header.sticky-header .header-grid {
  /* Grid: Platzhalter links | Navigation mittig (flex) | Suche rechts */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  /* 1cm zusätzlicher Abstand zwischen Mitte und Suche */
  column-gap: 0.6cm;
  /* sanfte Animation beim Ändern des Abstands */
  transition: column-gap 200ms ease, padding 180ms ease;
}
  /* ==== Abstand zwischen Text (mittlere Spalte) und Suchfeld (3. Spalte) - ohne Scrollen ==== */
/* Gleiche Werte wie im .scrolled-Zustand, aber für den normalen Headerzustand */
/* ==== Reduce gap between top-level nav items by 2px ==== */
/* Place at the end of the file so it overrides earlier gap declarations */

header.sticky-header .main-nav ul {
  /* original: 2em -> reduce by 2px */
  gap: calc(2em - 22px);
}
/* main-nav bleibt in der mittleren Spalte, erste Reihe */
header.sticky-header:not(.scrolled) .main-nav {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  justify-self: center;
  width: 100%;
}

/* Suchbox unterhalb der main-nav in der mittleren Spalte, zweite Reihe */
header.sticky-header:not(.scrolled) .header-search-box,
header.sticky-header:not(.scrolled) .search-form {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  justify-self: center;
  width: 76%;
  margin-top: 0.3rem;  /* Abstand zur main-nav */

}


/* Kleine Anpassung damit das Input-Feld in der mittleren Spalte schön skaliert */
header.sticky-header:not(.scrolled) .header-search-box .search-form,
header.sticky-header:not(.scrolled) .search-form {
  display: flex;
  align-items: center;
  gap: 0.4em;
}
header.sticky-header:not(.scrolled) .header-search-box .search-form input[type="text"],
header.sticky-header:not(.scrolled) .search-form input[type="text"] {
  width: 100%;
  max-width: 200px;  
  box-sizing: border-box;
}

}