:root {
    --dunkel: #061f28;
    --dunkel-2: #082f3a;
    --dunkel-3: #0c3b47;
    --tuerkis: #00a4b3;
    --tuerkis-hell: #64e3ea;
    --tuerkis-sehr-hell: #dffbfd;
    --rot: #e4002b;
    --weiss: #ffffff;
    --hell: #f4f8f9;
    --grau: #60737a;
    --linie: rgba(6, 31, 40, 0.12);
    --schatten: 0 26px 70px rgba(4, 27, 35, 0.16);
    --radius: 24px;
    --radius-klein: 14px;
    --container: 1240px;
    --kopfhoehe: 86px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--dunkel);
    background: var(--hell);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
body.menue-offen { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
address { font-style: normal; }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.sprunglink {
    position: fixed;
    z-index: 9999;
    top: 10px;
    left: 10px;
    padding: 12px 16px;
    color: var(--dunkel);
    background: var(--weiss);
    border-radius: 10px;
    transform: translateY(-140%);
}
.sprunglink:focus { transform: translateY(0); }

.lesefortschritt {
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    pointer-events: none;
}
.lesefortschritt span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--rot), var(--tuerkis-hell));
}

.kopfzeile {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    height: var(--kopfhoehe);
    color: var(--weiss);
    transition: background .25s ease, box-shadow .25s ease, height .25s ease;
}
.kopfzeile.ist-kompakt {
    height: 72px;
    background: rgba(6, 31, 40, .96);
    box-shadow: 0 12px 36px rgba(0,0,0,.18);
    backdrop-filter: blur(14px);
}
.kopfzeile__innen { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.marke { display: block; flex: 0 0 auto; }
.marke img { width: clamp(190px, 20vw, 285px); height: auto; }
.hauptnavigation { display: flex; align-items: center; gap: 26px; font-size: .93rem; font-weight: 700; }
.hauptnavigation > a { position: relative; padding: 12px 0; color: rgba(255,255,255,.86); }
.hauptnavigation > a:not(.nav-anfrage)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 5px;
    height: 2px;
    background: var(--tuerkis-hell);
    transition: right .22s ease;
}
.hauptnavigation > a:hover,
.hauptnavigation > a:focus-visible,
.hauptnavigation > a.aktiv { color: var(--weiss); }
.hauptnavigation > a:hover::after,
.hauptnavigation > a:focus-visible::after,
.hauptnavigation > a.aktiv::after { right: 0; }
.nav-anfrage {
    padding: 11px 18px !important;
    border-radius: 999px;
    background: var(--rot);
    color: var(--weiss) !important;
    box-shadow: 0 10px 28px rgba(228,0,43,.25);
}
.nav-anfrage:hover { transform: translateY(-1px); }
.menueknopf { display: none; width: 48px; height: 48px; padding: 12px; border: 0; border-radius: 12px; background: rgba(255,255,255,.1); }
.menueknopf span { display: block; height: 2px; margin: 5px 0; background: var(--weiss); transition: .22s ease; }

.hero,
.unterseiten-hero,
.recht-hero,
.fehler-hero { position: relative; overflow: hidden; color: var(--weiss); background: var(--dunkel); }
.hero { min-height: 820px; display: grid; align-items: center; }
.hero__bild,
.unterseiten-hero__bild { position: absolute; inset: 0; }
.hero__picture,
.hero__picture img,
.unterseiten-hero__picture,
.unterseiten-hero__picture img { width: 100%; height: 100%; object-fit: cover; }
.hero__picture img { object-position: 62% center; }
.hero__verlauf {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3,22,29,.96) 0%, rgba(4,28,36,.88) 37%, rgba(4,28,36,.28) 68%, rgba(4,28,36,.42) 100%),
        linear-gradient(0deg, rgba(2,19,25,.82) 0%, transparent 42%);
}
.hero__gitter,
.unterseiten-hero__gitter,
.fehler-hero__gitter {
    position: absolute;
    inset: 0;
    opacity: .24;
    background-image:
        linear-gradient(rgba(100,227,234,.17) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100,227,234,.17) 1px, transparent 1px);
    background-size: 78px 78px;
    transform: perspective(780px) rotateX(64deg) scale(1.6) translateY(11%);
    transform-origin: center bottom;
    mask-image: linear-gradient(to top, black 0%, rgba(0,0,0,.85) 45%, transparent 90%);
}
.hero__routen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .72; }
.hero__route { fill: none; stroke: rgba(100,227,234,.62); stroke-width: 2; stroke-dasharray: 9 13; vector-effect: non-scaling-stroke; }
.hero__route--zwei { opacity: .48; }
.hero__route--drei { opacity: .34; }
.hero__routenpunkt { fill: var(--weiss); filter: drop-shadow(0 0 8px var(--tuerkis-hell)); }
.hero__innen { position: relative; z-index: 3; padding-top: calc(var(--kopfhoehe) + 72px); padding-bottom: 105px; }
.hero__inhalt { max-width: 760px; }
.eyebrow { margin: 0 0 16px; color: var(--tuerkis-hell); font-size: .77rem; font-weight: 850; letter-spacing: .2em; line-height: 1.45; text-transform: uppercase; }
.eyebrow--dunkel { color: #087b86; }
h1, h2, h3 { margin-top: 0; letter-spacing: -.035em; line-height: 1.08; }
h1 { margin-bottom: 24px; font-size: clamp(3rem, 6.4vw, 6.6rem); }
h2 { margin-bottom: 22px; font-size: clamp(2.1rem, 4vw, 4.35rem); }
h3 { margin-bottom: 12px; font-size: clamp(1.2rem, 2vw, 1.65rem); }
.hero__text,
.lead { max-width: 760px; margin: 0 0 30px; color: rgba(255,255,255,.82); font-size: clamp(1.05rem, 1.5vw, 1.28rem); }
.hero-aktionen { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: 13px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 800;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button--primaer { color: var(--weiss); background: var(--rot); box-shadow: 0 15px 36px rgba(228,0,43,.3); }
.button--glas { color: var(--weiss); border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.button--hell { color: var(--dunkel); background: var(--weiss); }
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero__chips li { padding: 8px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: rgba(255,255,255,.78); background: rgba(3,24,31,.34); font-size: .84rem; }
.scrollhinweis { position: absolute; z-index: 4; left: 50%; bottom: 28px; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.7); font-size: .78rem; font-weight: 700; transform: translateX(-50%); }
.scrollhinweis span { width: 1px; height: 34px; background: linear-gradient(var(--tuerkis-hell), transparent); }

.kennzahlen { position: relative; z-index: 8; margin-top: -1px; color: var(--weiss); background: var(--dunkel); }
.kennzahlen--hell { color: var(--dunkel); background: var(--weiss); }
.kennzahlen__raster { display: grid; grid-template-columns: repeat(3, 1fr); }
.kennzahl { min-height: 190px; padding: 40px 34px; border-right: 1px solid rgba(255,255,255,.12); }
.kennzahlen--hell .kennzahl { border-color: var(--linie); }
.kennzahl:last-child { border-right: 0; }
.kennzahl strong { display: block; color: var(--tuerkis-hell); font-size: clamp(2.7rem, 5vw, 5rem); line-height: 1; letter-spacing: -.06em; }
.kennzahlen--hell .kennzahl strong { color: var(--tuerkis); }
.kennzahl sup { font-size: .44em; }
.kennzahl p { margin: 14px 0 0; font-weight: 800; }

.abschnitt,
.inhalt-bloecke,
.querverweise,
.faq-section,
.prozess-section,
.standorte-uebersicht,
.standortkarten-section,
.schwerpunkt-section,
.standort-leistungen,
.kontakt-section,
.timeline-section,
.team-section,
.werte-section { padding: 110px 0; }
.abschnitt--hell,
.inhalt-bloecke,
.faq-section,
.standorte-uebersicht,
.kontakt-section,
.team-section { background: var(--weiss); }
.abschnittskopf { max-width: 780px; margin-bottom: 52px; }
.abschnittskopf--breit { max-width: 970px; }
.abschnittskopf p { max-width: 760px; margin: 0; color: var(--grau); font-size: 1.08rem; }

.leistungen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.leistungskarte {
    position: relative;
    overflow: hidden;
    min-height: 310px;
    padding: 32px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--weiss);
    box-shadow: 0 18px 48px rgba(4,27,35,.06);
    transform-style: preserve-3d;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.leistungskarte:hover { border-color: rgba(0,164,179,.35); box-shadow: var(--schatten); }
.leistungskarte > span { color: var(--tuerkis); font-size: .78rem; font-weight: 900; letter-spacing: .15em; }
.leistungskarte h3 { margin-top: 20px; }
.leistungskarte p { color: var(--grau); }
.leistungskarte strong { display: block; margin-top: 26px; font-size: .9rem; }
.leistungskarte__ikon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 14px; color: var(--weiss); background: var(--dunkel); font-size: 1.4rem; }
.leistungskarte--gross { grid-row: span 2; min-height: 642px; padding: 0; color: var(--weiss); background: var(--dunkel); }
.leistungskarte__bild,
.leistungskarte__bild img { width: 100%; height: 100%; object-fit: cover; }
.leistungskarte__bild { position: absolute; inset: 0; opacity: .68; }
.leistungskarte--gross::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3,24,31,.98), rgba(3,24,31,.06) 72%); }
.leistungskarte__inhalt { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 38px; }
.leistungskarte__inhalt p { color: rgba(255,255,255,.76); }

.split-section { padding: 110px 0; }
.split-section--dunkel { color: var(--weiss); background: var(--dunkel); }
.split-section__raster,
.team-section__raster,
.standort-inhalt,
.standorte-uebersicht__raster,
.kontakt-section__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: center; }
.split-section__text p { color: rgba(255,255,255,.74); }
.abschnitt--hell .split-section__text p,
.team-section__text p,
.standort-inhalt__text p { color: var(--grau); }
.bildrahmen { display: block; overflow: hidden; border-radius: var(--radius); box-shadow: var(--schatten); }
.bildrahmen img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bildrahmen--hoch img { aspect-ratio: 4 / 5; }
.split-section__bild { position: relative; }
.bild-badge { position: absolute; right: -18px; bottom: 28px; display: grid; gap: 2px; padding: 18px 22px; border-radius: 16px; color: var(--dunkel); background: var(--weiss); box-shadow: var(--schatten); }
.bild-badge span { color: var(--grau); font-size: .78rem; }
.checkliste { display: grid; gap: 12px; margin: 30px 0; padding: 0; list-style: none; }
.checkliste li { position: relative; padding-left: 30px; }
.checkliste li::before { content: "✓"; position: absolute; left: 0; color: var(--tuerkis); font-weight: 900; }
.checkliste--hell li { color: rgba(255,255,255,.82); }
.checkliste--hell li::before { color: var(--tuerkis-hell); }
.textlink { display: inline-flex; margin-top: 12px; color: var(--tuerkis-hell); font-weight: 850; }
.textlink--dunkel { color: #057b85; }

.prozess-section { background: linear-gradient(180deg, var(--hell), #eaf4f5); }
.prozess-schritte { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-bottom: 120px; }
.prozess-schritte article { position: relative; z-index: 2; min-height: 220px; padding: 28px; border: 1px solid var(--linie); border-radius: 20px; background: rgba(255,255,255,.86); box-shadow: 0 14px 38px rgba(4,27,35,.06); }
.prozess-schritte article > span { color: var(--tuerkis); font-weight: 900; }
.prozess-schritte article p { color: var(--grau); font-size: .94rem; }
.prozess-schritte svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 150px; }
.prozess-schritte path,
.prozessgrafik path { fill: none; stroke: rgba(0,164,179,.45); stroke-width: 3; stroke-dasharray: 10 12; }
.prozess-schritte circle,
.prozessgrafik circle { fill: var(--rot); filter: drop-shadow(0 0 8px rgba(228,0,43,.55)); }

.standorte-teaser { padding: 110px 0; color: var(--weiss); background: linear-gradient(120deg, #09323d, #061f28); }
.standorte-teaser__raster { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }
.standorte-teaser__text p { color: rgba(255,255,255,.72); }
.netzkarte { position: relative; min-height: 560px; }
.netzkarte svg { width: 100%; height: 100%; max-height: 650px; overflow: visible; }
.netzkarte__land { fill: rgba(100,227,234,.18); stroke: rgba(255,255,255,.62); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.netzkarte__route { fill: none; stroke: rgba(255,255,255,.42); stroke-width: 2; stroke-dasharray: 8 11; vector-effect: non-scaling-stroke; }
.netzkarte__route--zwei { opacity: .78; }
.netzkarte__route--drei { opacity: .72; }
.netzkarte__route--vier, .netzkarte__route--fuenf, .netzkarte__route--sechs, .netzkarte__route--sieben { opacity: .64; }
.netzkarte__punkt { fill: var(--weiss); stroke: var(--tuerkis); stroke-width: 3; transition: r .2s ease, fill .2s ease, stroke .2s ease; vector-effect: non-scaling-stroke; }
.netzkarte__punkt--hauptsitz { fill: var(--rot); stroke: var(--weiss); stroke-width: 3.5; }
.netzkarte a:hover .netzkarte__punkt, .netzkarte a:focus-visible .netzkarte__punkt { r: 12px; fill: var(--rot); stroke: var(--weiss); }
.netzkarte a:focus-visible { outline: none; }
.netzkarte a:focus-visible text { text-decoration: underline; }
.netzkarte text { fill: var(--weiss); paint-order: stroke; stroke: rgba(3,24,31,.72); stroke-width: 4px; stroke-linejoin: round; font-size: 16px; font-weight: 850; }
.netzkarte__label--hauptsitz { fill: var(--rot); font-weight: 950; }
.netzkarte--gross text { fill: var(--dunkel); }
.netzkarte--gross .netzkarte__land { fill: #d9f2f3; stroke: rgba(0,91,102,.5); }
.netzkarte--gross .netzkarte__route { stroke: rgba(0,91,102,.28); }
.netzkarte--gross text { stroke: rgba(255,255,255,.8); stroke-width: 5px; }

.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; align-items: start; }
.faq-liste { display: grid; gap: 12px; }
.faq-liste details { border: 1px solid var(--linie); border-radius: 16px; background: var(--hell); }
.faq-liste summary { position: relative; padding: 22px 58px 22px 24px; list-style: none; font-weight: 850; cursor: pointer; }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after { content: "+"; position: absolute; right: 24px; top: 50%; color: var(--tuerkis); font-size: 1.6rem; transform: translateY(-50%); }
.faq-liste details[open] summary::after { content: "–"; }
.faq-liste details p { margin: 0; padding: 0 24px 24px; color: var(--grau); }

.cta-band { padding: 90px 0; color: var(--weiss); background: linear-gradient(110deg, var(--tuerkis), #076f7a 58%, var(--dunkel)); }
.cta-band__innen { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.cta-band__innen > div:first-child { max-width: 760px; }
.cta-band__innen p { color: rgba(255,255,255,.78); }
.cta-band__aktionen { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

.unterseiten-hero { min-height: 690px; display: flex; align-items: flex-end; }
.unterseiten-hero--kompakt { min-height: 590px; }
.unterseiten-hero__picture img { object-position: center 58%; }
.unterseiten-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,22,29,.95) 0%, rgba(4,28,36,.78) 48%, rgba(4,28,36,.24) 100%), linear-gradient(0deg, rgba(3,22,29,.75), transparent 55%); }
.unterseiten-hero__innen { position: relative; z-index: 3; padding-top: calc(var(--kopfhoehe) + 75px); padding-bottom: 76px; }
.unterseiten-hero h1 { max-width: 960px; font-size: clamp(2.8rem, 5.7vw, 5.8rem); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; color: rgba(255,255,255,.62); font-size: .82rem; }
.breadcrumbs a:hover { color: var(--weiss); }
.faktenleiste { color: var(--weiss); background: var(--dunkel); }
.faktenleiste__raster { display: grid; grid-template-columns: repeat(4, 1fr); }
.faktenleiste__punkt { min-height: 150px; padding: 30px 24px; border-right: 1px solid rgba(255,255,255,.12); }
.faktenleiste__punkt:last-child { border-right: 0; }
.faktenleiste__punkt span { color: var(--tuerkis-hell); font-size: .75rem; font-weight: 900; }
.faktenleiste__punkt p { margin: 14px 0 0; font-weight: 800; line-height: 1.35; }
.inhalt-bloecke { background: var(--weiss); }
.inhalt-block { display: grid; grid-template-columns: 90px minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding: 68px 0; border-bottom: 1px solid var(--linie); }
.inhalt-block--umgekehrt .inhalt-block__text { order: 3; }
.inhalt-block--umgekehrt .prozessgrafik { order: 2; }
.inhalt-block__nummer { color: rgba(0,164,179,.22); font-size: 4rem; font-weight: 900; line-height: 1; }
.inhalt-block__text p { color: var(--grau); }
.prozessgrafik { position: relative; min-height: 340px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 24px; border-radius: var(--radius); color: var(--weiss); background: var(--dunkel); overflow: hidden; }
.prozessgrafik > div { position: relative; z-index: 2; padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.04); }
.prozessgrafik strong, .prozessgrafik small { display: block; }
.prozessgrafik span { color: var(--tuerkis-hell); font-weight: 900; }
.prozessgrafik small { margin-top: 5px; color: rgba(255,255,255,.6); }
.prozessgrafik svg { position: absolute; inset: auto 0 0; width: 100%; height: 140px; opacity: .8; }
.kontaktkarte { padding: 36px; border-radius: var(--radius); color: var(--weiss); background: linear-gradient(140deg, var(--dunkel-2), var(--dunkel)); box-shadow: var(--schatten); }
.kontaktkarte p { color: rgba(255,255,255,.72); }
.kontaktkarte a { color: var(--tuerkis-hell); font-weight: 850; overflow-wrap: anywhere; }
.querverweise { background: var(--hell); }
.kartenraster { display: grid; gap: 20px; }
.kartenraster--drei { grid-template-columns: repeat(3, 1fr); }
.kartenraster--vier { grid-template-columns: repeat(4, 1fr); }
.linkkarte,
.fokuskarte { min-height: 250px; padding: 30px; border: 1px solid var(--linie); border-radius: 20px; background: var(--weiss); transition: transform .2s ease, box-shadow .2s ease; }
.linkkarte:hover { transform: translateY(-5px); box-shadow: var(--schatten); }
.linkkarte > span,
.fokuskarte > span { color: var(--tuerkis); font-size: .75rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.linkkarte p,
.fokuskarte p { color: var(--grau); }
.linkkarte strong { display: block; margin-top: 22px; }

.standort-kontaktband { padding: 42px 0; background: var(--weiss); border-bottom: 1px solid var(--linie); }
.standort-kontaktband__raster { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 30px; align-items: center; }
.standort-kontaktband h2 { margin-bottom: 0; font-size: 1.5rem; }
.standort-kontaktband__links { display: grid; gap: 5px; }
.standort-kontaktband__links a { color: #067b85; font-weight: 800; }
.region-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.region-tags li { padding: 8px 12px; border-radius: 999px; background: var(--tuerkis-sehr-hell); color: #056c75; font-size: .84rem; font-weight: 750; }
.schwerpunkt-section { background: var(--hell); }
.standort-leistungen { padding: 110px 0; background: var(--weiss); }
.standortkarten-section { background: var(--hell); }
.standortkarten-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.standortkarte { min-height: 300px; padding: 32px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); box-shadow: 0 15px 40px rgba(4,27,35,.05); transition: transform .22s ease, box-shadow .22s ease; }
.standortkarte:hover { transform: translateY(-5px); box-shadow: var(--schatten); }
.standortkarte__status { display: inline-flex; padding: 7px 10px; border-radius: 999px; color: #076f78; background: var(--tuerkis-sehr-hell); font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.standortkarte p { color: var(--grau); }
.standortkarte__regionen { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0; }
.standortkarte__regionen span { color: var(--grau); font-size: .78rem; }

.timeline-section { background: linear-gradient(180deg, var(--hell), #eaf4f5); }
.timeline { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 60px; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--tuerkis), rgba(0,164,179,.1)); transform: translateX(-50%); }
.timeline article { position: relative; padding: 30px; border: 1px solid var(--linie); border-radius: 20px; background: var(--weiss); }
.timeline article:nth-child(even) { margin-top: 80px; }
.timeline time,
.timeline-jahr { color: var(--rot); font-size: 1.2rem; font-weight: 900; }
.timeline p { color: var(--grau); }
.werte-section { background: var(--hell); }

.kontakt-hauptkarte,
.anfrage-checkliste { padding: 42px; border-radius: var(--radius); }
.kontakt-hauptkarte { color: var(--weiss); background: linear-gradient(145deg, var(--dunkel-2), var(--dunkel)); box-shadow: var(--schatten); }
.kontakt-hauptkarte address { margin: 30px 0; color: rgba(255,255,255,.82); font-size: 1.05rem; }
.kontakt-direktlinks { display: grid; gap: 12px; }
.kontakt-direktlinks > * { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.05); }
.kontakt-direktlinks span { color: rgba(255,255,255,.55); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; }
.kontakt-direktlinks strong { overflow-wrap: anywhere; }
.anfrage-checkliste { border: 1px solid var(--linie); background: var(--hell); }
.anfrage-checkliste ol { display: grid; gap: 10px; margin: 30px 0; padding: 0; list-style: none; }
.anfrage-checkliste li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--linie); }
.anfrage-checkliste li > span { color: var(--tuerkis); font-weight: 900; }
.anfrage-checkliste li p { margin: 4px 0 0; color: var(--grau); font-size: .9rem; }

.recht-hero { padding: calc(var(--kopfhoehe) + 90px) 0 80px; background: radial-gradient(circle at 75% 20%, rgba(0,164,179,.28), transparent 34%), var(--dunkel); }
.recht-hero h1 { font-size: clamp(2.7rem, 5vw, 5rem); }
.recht-hero p:last-child { color: rgba(255,255,255,.72); }
.rechtstext { max-width: 920px; }
.rechtstext article { padding: 30px 0; border-bottom: 1px solid var(--linie); }
.rechtstext h2 { font-size: 1.7rem; }
.rechtstext p { color: #42575e; }
.rechtstext a { color: #067b85; text-decoration: underline; text-underline-offset: 3px; }

.fehler-hero { min-height: 720px; display: grid; align-items: center; }
.fehler-hero__raster { position: relative; z-index: 2; display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; padding-top: calc(var(--kopfhoehe) + 50px); padding-bottom: 70px; }
.fehler-code { color: var(--tuerkis-hell); font-size: clamp(5rem, 12vw, 10rem); font-weight: 950; line-height: .8; letter-spacing: -.09em; }
.fehler-hero h1 { margin-top: 20px; font-size: clamp(2.4rem, 4.5vw, 4.6rem); }
.fehler-hero__text > p:not(.eyebrow) { color: rgba(255,255,255,.72); }
.fehler-hero__visual { position: relative; }
.fehler-hero__visual img { width: 100%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.35)); }
.umleitungsschild { position: absolute; right: 10%; bottom: 7%; display: grid; place-items: center; width: 120px; height: 120px; color: var(--dunkel); background: #ffd64c; border: 8px solid var(--weiss); transform: rotate(-7deg); box-shadow: var(--schatten); }
.umleitungsschild strong { font-size: 2rem; }
.umleitungsschild span { font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.fehler-werbung { padding: 72px 0; background: var(--weiss); }
.fehler-werbung__innen { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.fehler-werbung__innen > div { max-width: 760px; }
.fehler-werbung__innen p { color: var(--grau); }
.fehler-werbung__innen > a { display: grid; justify-items: center; gap: 10px; color: #087b86; font-size: .85rem; }
.fehler-werbung__innen img { width: 150px; height: auto; }

.fusszeile { padding-top: 74px; color: rgba(255,255,255,.74); background: #04171d; }
.fusszeile__raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 46px; padding-bottom: 50px; }
.fuss-logo img { width: 260px; height: auto; }
.fusszeile h2 { margin-bottom: 18px; color: var(--weiss); font-size: 1rem; letter-spacing: 0; }
.fusszeile ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.fusszeile a:hover { color: var(--weiss); }
.fuss-recht { display: flex; gap: 15px; margin-top: 20px; font-size: .85rem; }
.fusszeile__unten { display: flex; align-items: center; justify-content: space-between; min-height: 88px; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.ceis-werbung { display: inline-flex; align-items: center; opacity: .82; transition: opacity .2s ease, transform .2s ease; }
.ceis-werbung:hover { opacity: 1; transform: translateY(-1px); }
.ceis-werbung img { display: block; width: 57px; height: auto; filter: brightness(0) invert(86%); }
.nach-oben { position: fixed; z-index: 900; right: 22px; bottom: 22px; width: 48px; height: 48px; border: 0; border-radius: 50%; color: var(--weiss); background: var(--tuerkis); box-shadow: 0 14px 34px rgba(0,0,0,.18); opacity: 0; pointer-events: none; transform: translateY(12px); transition: .2s ease; }
.nach-oben.ist-sichtbar { opacity: 1; pointer-events: auto; transform: translateY(0); }

[data-einblenden] { opacity: 0; transform: translateY(28px); transition: opacity .72s cubic-bezier(.2,.65,.25,1), transform .72s cubic-bezier(.2,.65,.25,1); }
[data-einblenden].ist-sichtbar { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
    :root { --kopfhoehe: 76px; }
    .menueknopf { display: block; }
    .hauptnavigation {
        position: fixed;
        top: var(--kopfhoehe);
        right: 16px;
        left: 16px;
        display: grid;
        gap: 2px;
        padding: 18px;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 18px;
        background: rgba(6,31,40,.98);
        box-shadow: var(--schatten);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: .2s ease;
    }
    .hauptnavigation.ist-offen { opacity: 1; visibility: visible; transform: translateY(0); }
    .hauptnavigation > a { padding: 13px 14px; border-radius: 10px; }
    .nav-anfrage { margin-top: 8px; text-align: center; }
    .split-section__raster,
    .team-section__raster,
    .standort-inhalt,
    .standorte-uebersicht__raster,
    .kontakt-section__raster,
    .standorte-teaser__raster { grid-template-columns: 1fr; }
    .standorte-teaser__text { order: 1; }
    .netzkarte { order: 2; }
    .faq-layout { grid-template-columns: 1fr; gap: 30px; }
    .kartenraster--vier { grid-template-columns: repeat(2, 1fr); }
    .prozess-schritte { grid-template-columns: repeat(2, 1fr); }
    .inhalt-block { grid-template-columns: 70px 1fr; }
    .inhalt-block__visual,
    .prozessgrafik,
    .kontaktkarte { grid-column: 2; }
    .inhalt-block--umgekehrt .inhalt-block__text,
    .inhalt-block--umgekehrt .prozessgrafik { order: initial; }
    .fusszeile__raster { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .container { width: min(calc(100% - 28px), var(--container)); }
    .hero { min-height: 760px; }
    .hero__picture img { object-position: 67% center; }
    .hero__verlauf { background: linear-gradient(90deg, rgba(3,22,29,.96), rgba(3,22,29,.75)), linear-gradient(0deg, rgba(3,22,29,.82), transparent); }
    h1 { font-size: clamp(2.7rem, 13vw, 4.5rem); }
    h2 { font-size: clamp(2rem, 9vw, 3.2rem); }
    .hero__innen { padding-top: calc(var(--kopfhoehe) + 48px); }
    .kennzahlen__raster,
    .faktenleiste__raster { grid-template-columns: 1fr; }
    .kennzahl,
    .faktenleiste__punkt { min-height: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
    .kennzahl:last-child,
    .faktenleiste__punkt:last-child { border-bottom: 0; }
    .leistungen-grid,
    .kartenraster--drei,
    .kartenraster--vier,
    .standortkarten-grid,
    .timeline { grid-template-columns: 1fr; }
    .leistungskarte--gross { min-height: 520px; grid-row: auto; }
    .prozess-schritte { grid-template-columns: 1fr; padding-bottom: 0; }
    .prozess-schritte svg { display: none; }
    .cta-band__innen,
    .fehler-werbung__innen { align-items: flex-start; flex-direction: column; }
    .cta-band__aktionen { justify-content: flex-start; }
    .unterseiten-hero { min-height: 620px; }
    .unterseiten-hero__picture img { object-position: 62% center; }
    .inhalt-block { grid-template-columns: 1fr; gap: 20px; padding: 48px 0; }
    .inhalt-block__nummer { font-size: 2.7rem; }
    .inhalt-block__visual,
    .prozessgrafik,
    .kontaktkarte { grid-column: auto; }
    .prozessgrafik { grid-template-columns: 1fr; }
    .standort-kontaktband__raster { grid-template-columns: 1fr; }
    .timeline::before { display: none; }
    .timeline article:nth-child(even) { margin-top: 0; }
    .kontakt-hauptkarte,
    .anfrage-checkliste { padding: 28px; }
    .fehler-hero__raster { grid-template-columns: 1fr; padding-top: calc(var(--kopfhoehe) + 60px); }
    .fehler-hero__visual { max-width: 620px; }
    .fusszeile__raster { grid-template-columns: 1fr; }
    .fusszeile__unten { align-items: flex-start; flex-direction: column; gap: 18px; padding: 24px 0; }
    .ceis-werbung img { width: 54px; }
}

@media (max-width: 480px) {
    .marke img { width: 190px; }
    .hero-aktionen,
    .cta-band__aktionen { display: grid; width: 100%; }
    .button { width: 100%; }
    .leistungskarte,
    .linkkarte,
    .fokuskarte,
    .standortkarte { padding: 24px; }
    .leistungskarte--gross { padding: 0; }
    .leistungskarte__inhalt { padding: 26px; }
    .netzkarte { min-height: 440px; }
    .netzkarte text { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    [data-einblenden] { opacity: 1; transform: none; }
}

/* Navigation, Zugänglichkeit und neue Inhaltsmodule */
:focus-visible {
    outline: 3px solid #ffd24a;
    outline-offset: 4px;
}
.visuell-versteckt {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.button--dunkel { color: var(--weiss); background: var(--dunkel); }
.button--sekundaer { color: var(--dunkel); border-color: rgba(6,31,40,.28); background: transparent; }

.navgruppe { position: relative; }
.navgruppe > summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 0;
    color: rgba(255,255,255,.86);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.navgruppe > summary::-webkit-details-marker { display: none; }
.navgruppe > summary::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 5px;
    height: 2px;
    background: var(--tuerkis-hell);
    transition: right .22s ease;
}
.navgruppe > summary span { font-size: .72rem; transition: transform .2s ease; }
.navgruppe[open] > summary span { transform: rotate(180deg); }
.navgruppe > summary:hover,
.navgruppe > summary:focus-visible,
.navgruppe.aktiv > summary { color: var(--weiss); }
.navgruppe > summary:hover::after,
.navgruppe > summary:focus-visible::after,
.navgruppe.aktiv > summary::after { right: 0; }
.navgruppe__menue {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    display: grid;
    width: max-content;
    min-width: 285px;
    max-width: 360px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    background: rgba(4,23,29,.98);
    box-shadow: 0 24px 58px rgba(0,0,0,.3);
    transform: translateX(-50%);
}
.navgruppe__menue a {
    padding: 10px 12px;
    border-radius: 9px;
    color: rgba(255,255,255,.82);
    line-height: 1.35;
}
.navgruppe__menue a:hover,
.navgruppe__menue a:focus-visible,
.navgruppe__menue a[aria-current="page"] { color: var(--weiss); background: rgba(100,227,234,.12); }

.vorteile-section,
.branchen-section,
.branchen-teaser { padding: 110px 0; }
.vorteile-section { background: linear-gradient(180deg, #edf7f8, var(--weiss)); }
.vorteile-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.vorteile-grid article {
    min-height: 285px;
    padding: 30px;
    border: 1px solid var(--linie);
    border-radius: 22px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 16px 44px rgba(4,27,35,.055);
}
.vorteile-grid article > span {
    display: inline-flex;
    min-width: 52px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border-radius: 12px;
    color: var(--weiss);
    background: var(--dunkel);
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .04em;
}
.vorteile-grid h3 { margin-top: 24px; }
.vorteile-grid p { color: var(--grau); }
.vorteile-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.branchen-teaser { background: var(--weiss); }
.branchen-teaser__raster {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 70px;
    align-items: center;
}
.branchen-teaser__raster p { color: var(--grau); }
.branchen-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.branchen-chips li {
    display: flex;
    min-height: 94px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--linie);
    border-radius: 18px;
    color: var(--dunkel);
    background: var(--hell);
    font-weight: 800;
}

.branchen-section { background: var(--hell); }
.branchen-liste { display: grid; gap: 24px; }
.branchen-karte {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    gap: 34px 60px;
    padding: 40px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--weiss);
    box-shadow: 0 16px 48px rgba(4,27,35,.05);
    scroll-margin-top: 100px;
}
.branchen-karte__kopf { display: flex; gap: 18px; align-items: flex-start; }
.branchen-karte__kopf > span { color: var(--rot); font-size: 1.05rem; font-weight: 900; }
.branchen-karte__kopf p,
.branchen-karte > p { color: var(--grau); }
.branchen-karte .checkliste { grid-column: 2; margin-top: 0; }

.zertifikate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.zertifikat-karte {
    display: flex;
    min-height: 470px;
    flex-direction: column;
    padding: 34px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--weiss);
    box-shadow: 0 18px 50px rgba(4,27,35,.06);
}
.zertifikat-karte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.zertifikat-karte__kopf > span:last-child { color: var(--grau); font-size: .78rem; font-weight: 900; letter-spacing: .15em; }
.zertifikat-karte > p { color: var(--grau); }
.dokument-status { display: inline-flex; padding: 7px 10px; border-radius: 999px; font-size: .74rem; font-weight: 900; }
.dokument-status--aktuell { color: #064f3c; background: #d9f7e9; }
.dokument-status--archiv { color: #674d00; background: #fff0b8; }
.dokument-meta { display: grid; gap: 10px; margin: 24px 0 28px; }
.dokument-meta div { display: grid; grid-template-columns: 105px 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid var(--linie); }
.dokument-meta dt { color: var(--grau); font-size: .82rem; }
.dokument-meta dd { margin: 0; font-weight: 750; }
.zertifikat-karte .button { align-self: flex-start; margin-top: auto; }

.fusszeile__raster { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); }
.fuss-recht { flex-wrap: wrap; }

@media (max-width: 1200px) {
    .hauptnavigation { gap: 17px; font-size: .86rem; }
    .navgruppe__menue { min-width: 265px; }
    .vorteile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fusszeile__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fusszeile__marke { grid-column: 1 / -1; }
}

@media (max-width: 1050px) {
    .navgruppe > summary { padding: 13px 14px; border-radius: 10px; }
    .navgruppe__menue {
        position: static;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 2px 0 8px;
        padding: 6px 8px 10px 22px;
        border: 0;
        border-left: 2px solid rgba(100,227,234,.28);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
    }
    .navgruppe__menue a { padding: 9px 10px; }
    .branchen-teaser__raster { grid-template-columns: 1fr; gap: 36px; }
    .branchen-karte { grid-template-columns: 1fr; }
    .branchen-karte .checkliste { grid-column: auto; }
    .zertifikate-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .vorteile-section,
    .branchen-section,
    .branchen-teaser { padding: 78px 0; }
    .vorteile-grid,
    .branchen-chips { grid-template-columns: 1fr; }
    .branchen-karte { padding: 28px; gap: 22px; }
    .zertifikat-karte { min-height: 0; padding: 28px; }
    .dokument-meta div { grid-template-columns: 1fr; gap: 2px; }
    .fusszeile__raster { grid-template-columns: 1fr; }
    .fusszeile__marke { grid-column: auto; }
}

@media (prefers-contrast: more) {
    :root { --grau: #33464c; --linie: rgba(6,31,40,.32); }
    .button,
    .linkkarte,
    .vorteile-grid article,
    .zertifikat-karte { border-width: 2px; }
}

@media (forced-colors: active) {
    .hero__gitter,
    .unterseiten-hero__gitter,
    .hero__routen,
    .lesefortschritt { display: none; }
    .button,
    .nav-anfrage,
    .dokument-status { border: 1px solid ButtonText; }
}

.hero__chips, .branchen-chips { margin-block: 0; padding-left: 0; list-style: none; }

.region-tags { padding-left: 0; list-style: none; }

/* Update: Deutschlandkarte klar erkennbar */
.netzkarte svg { filter: drop-shadow(0 24px 40px rgba(0,0,0,.18)); }
.netzkarte__land {
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.netzkarte__route--drei { opacity: .55; }
.netzkarte a { outline: none; }
.netzkarte a:focus-visible .netzkarte__punkt,
.netzkarte a:hover .netzkarte__punkt {
    filter: drop-shadow(0 0 12px rgba(255,255,255,.55));
}
.netzkarte a:focus-visible text,
.netzkarte a:hover text { text-decoration: underline; text-decoration-thickness: 2px; }
@media (max-width: 760px) {
    .netzkarte svg { max-height: 520px; }
}

/* CEIS-IT: gezielte Korrektur Startseiten-LKW und lesbare Standortlabels */
.hero__lkw {
    position: absolute;
    z-index: 0;
    right: clamp(-50px, -2vw, 0px);
    bottom: 22px;
    width: min(55vw, 916px);
    pointer-events: none;
}
.hero__lkwbild,
.hero__lkwbild img {
    display: block;
    width: 100%;
    height: auto;
}
.hero__lkwbild img {
    filter: drop-shadow(0 34px 42px rgba(0, 0, 0, .38));
}

/* Dezente Lichthupe am Startseiten-LKW */
.hero__lichthupe {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    pointer-events: none;
}
.hero__scheinwerfer {
    position: absolute;
    width: clamp(34px, 5.2%, 50px);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.72);
    transform-origin: center;
    background: radial-gradient(circle,
        rgba(255,255,255,.98) 0 9%,
        rgba(226,250,255,.95) 15%,
        rgba(151,232,242,.62) 34%,
        rgba(100,227,234,.18) 58%,
        transparent 74%);
    filter: blur(.35px) drop-shadow(0 0 8px rgba(220,252,255,.92)) drop-shadow(0 0 22px rgba(100,227,234,.72));
    mix-blend-mode: screen;
    will-change: opacity, transform, filter;
}
.hero__scheinwerfer::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(105px, 15vw, 220px);
    height: clamp(62px, 8.5vw, 126px);
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(230,252,255,.28) 0%, rgba(100,227,234,.12) 45%, transparent 74%);
    filter: blur(9px);
    opacity: .74;
}
.hero__scheinwerfer--links { left: 61.8%; top: 75.4%; }
.hero__scheinwerfer--rechts { left: 95.0%; top: 74.7%; }
.hero__lichthupe.ist-aktiv .hero__scheinwerfer {
    animation: klw-lichthupe 1.35s cubic-bezier(.22,.61,.36,1) both;
}
.hero__lichthupe.ist-aktiv .hero__scheinwerfer--rechts { animation-delay: 35ms; }
@keyframes klw-lichthupe {
    0%, 8%, 24%, 48%, 66%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.72); filter: blur(.35px) drop-shadow(0 0 4px rgba(220,252,255,.42)); }
    12%, 19%, 53%, 61% { opacity: .98; transform: translate(-50%, -50%) scale(1.17); filter: blur(.2px) drop-shadow(0 0 12px rgba(255,255,255,.98)) drop-shadow(0 0 34px rgba(100,227,234,.86)); }
}

.hero__verlauf,
.hero__gitter,
.hero__routen { z-index: 1; }
.hero__verlauf {
    background:
        linear-gradient(90deg, rgba(3,22,29,.97) 0%, rgba(4,28,36,.90) 40%, rgba(4,28,36,.28) 68%, rgba(4,28,36,.10) 100%),
        linear-gradient(0deg, rgba(2,19,25,.78) 0%, transparent 44%);
}

.netzkarte__hinweislinie {
    stroke: rgba(255,255,255,.72);
    stroke-width: 1.35;
    vector-effect: non-scaling-stroke;
}
.netzkarte__labelbox {
    fill: rgba(3,24,31,.92);
    stroke: rgba(100,227,234,.72);
    stroke-width: 1.15;
    vector-effect: non-scaling-stroke;
    transition: fill .2s ease, stroke .2s ease;
}
.netzkarte__labelbox--hauptsitz {
    fill: rgba(196,0,36,.96);
    stroke: rgba(255,255,255,.92);
}
.netzkarte text,
.netzkarte--gross text {
    fill: #fff;
    stroke: none;
    paint-order: normal;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: -.01em;
}
.netzkarte__label--hauptsitz { fill: #fff; }
.netzkarte a { cursor: pointer; }
.netzkarte a:hover .netzkarte__labelbox,
.netzkarte a:focus-visible .netzkarte__labelbox {
    fill: rgba(0,136,149,.98);
    stroke: #fff;
}
.netzkarte a:hover .netzkarte__labelbox--hauptsitz,
.netzkarte a:focus-visible .netzkarte__labelbox--hauptsitz {
    fill: var(--rot);
}

@media (max-width: 1100px) {
    .hero__lkw {
        right: -18vw;
        bottom: 24px;
        width: min(76vw, 820px);
        opacity: .76;
    }
}

@media (max-width: 760px) {
    .hero__lkw {
        right: -37vw;
        bottom: 20px;
        width: 108vw;
        max-width: none;
        opacity: .48;
    }
    .netzkarte text,
    .netzkarte--gross text { font-size: 13.5px; }
}

@media (max-width: 480px) {
    .hero__lkw {
        right: -49vw;
        bottom: 12px;
        width: 124vw;
        opacity: .42;
    }
}


/* CEIS-IT: kompakte und ruhige Hauptnavigation nach CMS-Erweiterung */
.kopfzeile {
    background: rgba(6, 31, 40, .9);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.kopfzeile.ist-kompakt {
    background: rgba(6, 31, 40, .98);
}
.kopfzeile__innen {
    width: min(calc(100% - 48px), 1480px);
    gap: 24px;
}
.marke img {
    width: clamp(205px, 14vw, 250px);
}
.hauptnavigation {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    gap: clamp(13px, 1.15vw, 22px);
    font-size: clamp(.82rem, .72vw, .9rem);
}
.hauptnavigation > a,
.navgruppe > summary {
    white-space: nowrap;
}
.nav-anfrage {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 10px 18px !important;
    line-height: 1.15;
    white-space: nowrap;
}

@media (max-width: 1280px) {
    :root { --kopfhoehe: 76px; }
    .kopfzeile__innen { width: min(calc(100% - 32px), 1480px); }
    .marke img { width: clamp(205px, 29vw, 245px); }
    .menueknopf { display: block; }
    .hauptnavigation {
        position: fixed;
        top: var(--kopfhoehe);
        right: 16px;
        left: 16px;
        display: grid;
        max-height: calc(100dvh - var(--kopfhoehe) - 24px);
        justify-content: stretch;
        gap: 2px;
        overflow-y: auto;
        padding: 18px;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 18px;
        background: rgba(6,31,40,.99);
        box-shadow: var(--schatten);
        font-size: .92rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
    }
    .hauptnavigation.ist-offen {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .hauptnavigation > a,
    .navgruppe > summary {
        padding: 13px 14px;
        border-radius: 10px;
        white-space: normal;
    }
    .navgruppe__menue {
        position: static;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 2px 0 8px;
        padding: 6px 8px 10px 22px;
        border: 0;
        border-left: 2px solid rgba(100,227,234,.28);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
    }
    .navgruppe__menue a { padding: 9px 10px; }
    .nav-anfrage {
        width: 100%;
        margin-top: 8px;
        text-align: center;
        white-space: nowrap;
    }
}


@media (prefers-reduced-motion: reduce) {
    .hero__lichthupe { display: none; }
}
@media (max-width: 760px) {
    .hero__scheinwerfer { width: clamp(30px, 5.5%, 44px); }
    .hero__scheinwerfer::after { opacity: .42; }
}

/* Startseite: Leistungsbegriffe mit mehr Abstand und kantiger Darstellung */
.hero .hero__chips {
    margin: 38px 0 0;
}

.hero .hero__chips li {
    padding: 9px 14px;
    border-radius: 4px;
}

/* Deutschlandkarte: kollisionsfreie Beschriftungen in getrennten Randzonen */
.netzkarte {
    overflow: visible;
}
.netzkarte svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 720px;
}
.netzkarte__labelbox {
    stroke-width: 1.35;
}
.netzkarte__hinweislinie {
    stroke-width: 1.5;
}
.netzkarte text,
.netzkarte--gross text {
    font-size: 16px;
    font-weight: 900;
}
@media (max-width: 680px) {
    .netzkarte {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        padding-bottom: 8px;
    }
    .netzkarte svg {
        width: 620px;
        min-width: 620px;
        max-height: none;
        margin-inline: auto;
    }
}

/* AGB-Seite */
.agb-downloads {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}
.agb-download {
    display: flex;
    min-height: 290px;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid var(--linie);
    border-radius: 18px;
    background: var(--weiss);
    box-shadow: 0 16px 44px rgba(4,27,35,.07);
}
.agb-download__typ {
    display: inline-flex;
    margin-bottom: 22px;
    padding: 7px 10px;
    border-radius: 4px;
    color: var(--weiss);
    background: var(--rot);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .12em;
}
.agb-download h3 { margin: 0 0 12px; }
.agb-download p { color: var(--grau); }
.agb-download__meta { margin-top: auto; font-size: .86rem; font-weight: 800; }
.agb-download .button { margin-top: 18px; }
.agb-bedingungen { background: var(--weiss); }
.agb-layout {
    display: grid;
    grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
    gap: clamp(38px, 6vw, 88px);
    align-items: start;
}
.agb-inhaltsverzeichnis {
    position: sticky;
    top: 112px;
    padding: 26px;
    border: 1px solid var(--linie);
    border-radius: 16px;
    background: var(--hell);
}
.agb-inhaltsverzeichnis h2 { margin-top: 0; font-size: 1.15rem; }
.agb-inhaltsverzeichnis ol { margin: 0; padding-left: 1.25rem; }
.agb-inhaltsverzeichnis li + li { margin-top: 8px; }
.agb-inhaltsverzeichnis a { color: var(--dunkel); font-size: .9rem; font-weight: 750; }
.agb-inhaltsverzeichnis a:hover,
.agb-inhaltsverzeichnis a:focus-visible { color: var(--rot); }
.agb-text { min-width: 0; }
.agb-abschnitt {
    scroll-margin-top: 120px;
    padding: 0 0 40px;
    border-bottom: 1px solid var(--linie);
}
.agb-abschnitt + .agb-abschnitt { padding-top: 40px; }
.agb-abschnitt h2 { margin-top: 0; font-size: clamp(1.3rem, 2vw, 1.75rem); }
.agb-abschnitt .cms-text p,
.agb-abschnitt .cms-text li { color: var(--grau); }
.agb-abschnitt .cms-text h3 { margin-top: 28px; font-size: 1.05rem; }
@media (max-width: 900px) {
    .agb-layout { grid-template-columns: 1fr; }
    .agb-inhaltsverzeichnis { position: static; }
}
@media (max-width: 680px) {
    .agb-downloads { grid-template-columns: 1fr; }
    .agb-download { min-height: 0; padding: 26px; }
}