/* 00-tokens.css */
/* BauPragma Webseite 3.0 - Tokens. Alle Werte der Gestaltung stehen hier, Bausteine nutzen nur diese Variablen. */
:root {
  /* Farben (BRIEF) */
  --w3-navy: #0B1E33;
  --w3-navy-2: #10294A;
  --w3-navy-3: #17386A;
  --w3-blau: #0D5DB8;
  --w3-blau-dunkel: #0A4A94;
  --w3-blau-hell: #4DA3FF;
  --w3-verlauf: linear-gradient(90deg, #0D5DB8 0%, #2F8CFF 55%, #6CC4FF 100%);
  /* Verlaufstext: auf Weiss und auf Navy je eine Variante, damit jedes Ende >= 3:1 Kontrast hat (grosse Schrift) */
  --w3-verlauf-text-hell: linear-gradient(90deg, #0D5DB8 0%, #1A73E0 100%);
  --w3-verlauf-text-dunkel: linear-gradient(90deg, #3B97FF 0%, #7CCBFF 100%);
  --w3-verlauf-karte: linear-gradient(135deg, #0B1E33 0%, #0D3A74 58%, #0B4F9E 100%);
  --w3-blau-hell-2: #A8D4FF;
  --w3-text: #1D1D1F;
  --w3-text-2: #515154;
  --w3-flaeche: #F5F5F7;
  --w3-linie: #D2D2D7;
  --w3-weiss: #FFFFFF;
  --w3-auf-dunkel: #FFFFFF;
  --w3-auf-dunkel-2: rgba(255, 255, 255, .76);
  --w3-linie-dunkel: rgba(255, 255, 255, .16);
  --w3-fehler: #B3261E;
  --w3-ok: #1B7F3B;

  /* Schrift */
  --w3-font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Arial, sans-serif;
  --w3-h1: clamp(40px, 6vw, 80px);
  --w3-h2: clamp(32px, 4.4vw, 56px);
  --w3-h3: clamp(22px, 2.3vw, 28px);
  --w3-h4: 19px;
  --w3-lead: clamp(19px, 1.9vw, 24px);
  --w3-fliess: 19px;
  --w3-klein: 14px;

  /* Form */
  --w3-r-kachel: 24px;
  --w3-r-cta: 28px;
  --w3-r-pille: 980px;
  --w3-r-feld: 14px;

  /* Raster und Abstaende */
  --w3-kopf-h: 52px;
  --w3-breite: 1120px;
  --w3-text-breite: 720px;
  --w3-gutter: clamp(16px, 4vw, 32px);
  --w3-abschnitt: 120px;
  --w3-luecke: 20px;

  /* Bewegung (Apple-Kurve aus werkzeuge.md, Bauregel 7/8) */
  --w3-ease: cubic-bezier(0.52, 0.16, 0.24, 1);
  --w3-ease-kurz: cubic-bezier(0.25, 0.1, 0.25, 1);
  --w3-dauer: 700ms;
  --w3-dauer-kurz: 250ms;

  /* Schatten */
  --w3-schatten-1: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  --w3-schatten-2: 0 2px 4px rgba(0, 0, 0, .05), 0 18px 48px rgba(0, 0, 0, .12);
}

@media (max-width: 767px) {
  :root {
    --w3-kopf-h: 48px;
    --w3-abschnitt: 72px;
    --w3-fliess: 17px;
    --w3-luecke: 14px;
  }
}

html:not(.w3-js) {
  --w3-kopf-h: 0px;
}

/* 10-basis.css */
/* Basis: Reset, Typografie, Layout, Knoepfe, Links, Chips, Icons, Seitenwahl */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--w3-kopf-h) + 16px);
  interpolate-size: allow-keywords;
}

body {
  margin: 0;
  background: var(--w3-weiss);
  color: var(--w3-text);
  font-family: var(--w3-font);
  font-size: var(--w3-fliess);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, h4, figure, blockquote, dl, dd { margin: 0; }
a { color: var(--w3-blau); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:where(strong, b) { font-weight: 600; }

/* Fokus immer sichtbar */
:focus-visible {
  outline: 3px solid var(--w3-blau);
  outline-offset: 3px;
  border-radius: 6px;
}
.w3-buehne :focus-visible,
.w3-kachel--dunkel :focus-visible,
.w3-cta :focus-visible,
html[data-w3-kopfthema="dunkel"] .w3-kopf :focus-visible {
  outline-color: var(--w3-blau-hell);
}
[tabindex="-1"]:focus { outline: none; }

::selection { background: rgba(13, 93, 184, .22); }

/* Ueberschriften: nie hyphens:auto, Umbruch ausgleichen */
:where(.w3-seite) :where(h1, h2, h3, h4),
.w3-h1, .w3-h2, .w3-h3, .w3-h4 {
  font-weight: 700;
  color: inherit;
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: balance;
}
:where(.w3-seite) :where(h1), .w3-h1 { font-size: var(--w3-h1); line-height: 1.04; letter-spacing: -0.035em; }
:where(.w3-seite) :where(h2), .w3-h2 { font-size: var(--w3-h2); line-height: 1.08; letter-spacing: -0.03em; }
:where(.w3-seite) :where(h3), .w3-h3 { font-size: var(--w3-h3); line-height: 1.18; letter-spacing: -0.02em; font-weight: 600; }
:where(.w3-seite) :where(h4), .w3-h4 { font-size: var(--w3-h4); line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }

:where(.w3-seite) p { text-wrap: pretty; }
.w3-lead {
  font-size: var(--w3-lead);
  line-height: 1.38;
  letter-spacing: -0.012em;
  color: var(--w3-text-2);
  max-width: 34em;
}
.w3-klein { font-size: var(--w3-klein); line-height: 1.45; }
.w3-gedaempft { color: var(--w3-text-2); }

/* Augenbraue: 14 px, 600, Blau, keine Grossbuchstaben-Sperrung */
.w3-augenbraue {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--w3-blau);
  letter-spacing: 0;
  margin-bottom: 14px;
}
.w3-buehne .w3-augenbraue,
.w3-kachel--dunkel .w3-augenbraue,
.w3-cta .w3-augenbraue { color: var(--w3-blau-hell); }

/* Verlaufs-Schluesselwort: fuellt sich beim Einscrollen (--w3-fuell 0 -> 100 %), ohne JS sofort voll */
.w3-glanz {
  --w3-glanz-verlauf: var(--w3-verlauf-text-hell);
  --w3-glanz-basis: rgba(29, 29, 31, .2);
  background-image: var(--w3-glanz-verlauf), linear-gradient(var(--w3-glanz-basis), var(--w3-glanz-basis));
  background-repeat: no-repeat;
  background-size: var(--w3-fuell, 100%) 100%, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: .06em;
}
@media (min-width: 600px) { .w3-glanz { white-space: nowrap; } }
.w3-buehne .w3-glanz,
.w3-kachel--dunkel .w3-glanz,
.w3-cta .w3-glanz,
.w3-glanz--dunkel {
  --w3-glanz-verlauf: var(--w3-verlauf-text-dunkel);
  --w3-glanz-basis: rgba(255, 255, 255, .26);
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .w3-glanz { background: none; color: var(--w3-blau); -webkit-text-fill-color: currentColor; }
  .w3-buehne .w3-glanz, .w3-kachel--dunkel .w3-glanz, .w3-cta .w3-glanz { color: var(--w3-blau-hell); }
}

/* Layout */
.w3-wrap {
  width: min(100% - 2 * var(--w3-gutter), var(--w3-breite));
  margin-inline: auto;
}
.w3-wrap--text { width: min(100% - 2 * var(--w3-gutter), var(--w3-text-breite)); }
.w3-abschnitt { padding-block: var(--w3-abschnitt); }
.w3-abschnitt--oben { padding-top: var(--w3-abschnitt); }
.w3-abschnitt--kompakt { padding-block: calc(var(--w3-abschnitt) * .6); }
.w3-abschnitt--ohne-unten { padding-bottom: 0; }

.w3-sektionskopf { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.w3-sektionskopf > * + * { margin-top: 18px; }
.w3-sektionskopf .w3-augenbraue { margin-bottom: 0; }
.w3-sektionskopf--mitte { margin-inline: auto; text-align: center; }
.w3-sektionskopf--mitte .w3-lead { margin-inline: auto; }

/* Aussage: grosser Satz mit Schluesselwoertern, Apple-Rhythmus */
.w3-aussage {
  font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
  max-width: 17em;
  margin-inline: auto;
  text-align: center;
}

/* Knoepfe: Pillen */
.w3-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--w3-r-pille);
  background: var(--w3-blau);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color var(--w3-dauer-kurz) var(--w3-ease-kurz), box-shadow var(--w3-dauer-kurz) var(--w3-ease-kurz);
  cursor: pointer;
}
.w3-knopf:hover { background: var(--w3-blau-dunkel); text-decoration: none; }
.w3-knopf:active { background: #083A75; }
.w3-knopf--klein { min-height: 32px; padding: 0 14px; font-size: 13px; }
.w3-knopf--hell { background: #fff; color: var(--w3-navy); }
.w3-knopf--hell:hover { background: #E8F1FB; }
.w3-knopf--hell:active { background: #D6E6F8; }
.w3-knopf--flaeche { background: var(--w3-flaeche); color: var(--w3-text); }
.w3-knopf--flaeche:hover { background: #E8E8ED; }
.w3-knopf[disabled] { opacity: .5; cursor: not-allowed; }

/* Sekundaer: Text-Link mit ">" wie Apple */
.w3-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--w3-blau);
  text-decoration: none;
  min-height: 44px;
}
.w3-link::after { content: "\203A"; font-size: 1.15em; line-height: 1; transition: transform var(--w3-dauer-kurz) var(--w3-ease-kurz); }
.w3-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.w3-link:hover::after { transform: translateX(2px); }
.w3-link--hell, .w3-buehne .w3-link, .w3-kachel--dunkel .w3-link, .w3-cta .w3-link { color: var(--w3-blau-hell); }
.w3-link--klein { font-size: 15px; min-height: 32px; }

.w3-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }

/* Chips */
.w3-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--w3-r-pille);
  background: var(--w3-flaeche);
  color: var(--w3-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  transition: background-color var(--w3-dauer-kurz) var(--w3-ease-kurz), color var(--w3-dauer-kurz) var(--w3-ease-kurz);
}
button.w3-chip:hover { background: #E8E8ED; }
.w3-chip[aria-pressed="true"], .w3-chip--aktiv { background: var(--w3-navy); color: #fff; }
.w3-chip--blau { background: rgba(13, 93, 184, .1); color: var(--w3-blau); }
.w3-chip--klein { min-height: 26px; padding: 0 10px; font-size: 13px; }

/* Listen */
.w3-liste { display: grid; gap: 12px; }
.w3-liste li { position: relative; padding-left: 30px; color: var(--w3-text-2); }
.w3-liste li::before {
  content: "";
  position: absolute; left: 0; top: .32em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(13, 93, 184, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.4' fill='none' stroke='%230D5DB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.w3-kachel--dunkel .w3-liste li { color: var(--w3-auf-dunkel-2); }
.w3-kachel--dunkel .w3-liste li::before {
  background-color: rgba(77, 163, 255, .18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.4' fill='none' stroke='%234DA3FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Zeile "Sie erhalten" */
.w3-erhalten { font-size: 15px; line-height: 1.45; color: var(--w3-text-2); }
.w3-erhalten strong { color: var(--w3-text); font-weight: 600; margin-right: 6px; }

/* Icons (Sprite im Geruest) */
.w3-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.w3-icon--gross { width: 28px; height: 28px; }

/* Hilfsklassen */
.w3-visuell-versteckt {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.w3-mitte { text-align: center; }
.w3-tabellenzahl { font-variant-numeric: tabular-nums; }
.w3-zahl { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Sprunglink */
.w3-sprunglink {
  position: fixed; left: 16px; top: 8px; z-index: 300;
  padding: 12px 20px; border-radius: var(--w3-r-pille);
  background: var(--w3-navy); color: #fff; font-weight: 600;
  opacity: 0; pointer-events: none; transform: translateY(-12px);
  transition: opacity var(--w3-dauer-kurz) var(--w3-ease-kurz), transform var(--w3-dauer-kurz) var(--w3-ease-kurz);
}
.w3-sprunglink:focus { opacity: 1; pointer-events: auto; transform: none; text-decoration: none; }

/* Seiten: in der Einzeldatei steht immer genau eine sichtbar, die Auswahl macht das Kopfskript vor dem ersten Paint */
.w3-seite { position: relative; }
@keyframes w3-seite-ein { from { opacity: 0; } to { opacity: 1; } }
.w3-seite--wechsel { animation: w3-seite-ein .45s var(--w3-ease) both; }

main { display: block; }

/* 20-kopf.css */
/* Kopfleiste: Milchglas wie apple.com, hell/dunkel ueber html[data-w3-kopfthema], Haarlinie erst nach dem Scrollen */
.w3-kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--w3-kopf-h);
  background: rgba(250, 250, 252, .72);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  color: var(--w3-text);
  /* Paket G (P2-5): auf Weiss helles Milchglas mit weichem Schatten statt Haarlinie, damit kein "weisses Papier mit Kante" entsteht */
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .04);
  transition: background-color .35s var(--w3-ease-kurz), color .35s var(--w3-ease-kurz), box-shadow .35s var(--w3-ease-kurz);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .w3-kopf { background: rgba(255, 255, 255, .94); }
  html[data-w3-kopfthema="dunkel"] .w3-kopf { background: rgba(11, 30, 51, .96); }
}
html.w3-gescrollt .w3-kopf { box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 10px 30px rgba(0, 0, 0, .08); }
html[data-w3-kopfthema="dunkel"] .w3-kopf {
  background: rgba(11, 30, 51, .72);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0), 0 8px 24px rgba(0, 0, 0, 0);
}
html[data-w3-kopfthema="dunkel"].w3-gescrollt .w3-kopf { box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .22); }

.w3-kopf__innen {
  width: min(100% - 2 * var(--w3-gutter), var(--w3-breite));
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.w3-kopf__logo { display: inline-flex; align-items: center; height: 100%; flex: none; }
.w3-kopf__logo:hover { text-decoration: none; }
.w3-logo { height: 26px; width: auto; display: block; }
html[data-w3-kopfthema="dunkel"] .w3-kopf .w3-logo { filter: brightness(0) invert(1); }
.w3-kopf .w3-logo { transition: filter .35s var(--w3-ease-kurz); }

.w3-nav { margin-left: auto; }
.w3-nav__liste { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px); }
.w3-nav__link {
  display: inline-flex; align-items: center;
  height: var(--w3-kopf-h);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: inherit;
  opacity: .82;
  text-decoration: none;
  transition: opacity var(--w3-dauer-kurz) var(--w3-ease-kurz);
}
.w3-nav__link:hover { opacity: 1; text-decoration: none; }
.w3-nav__link[aria-current="page"] { opacity: 1; font-weight: 600; }
.w3-nav__kontakt { margin-left: 4px; }
.w3-kopf .w3-knopf { color: #fff; }
html[data-w3-kopfthema="dunkel"] .w3-kopf .w3-knopf { background: #fff; color: var(--w3-navy); }
html[data-w3-kopfthema="dunkel"] .w3-kopf .w3-knopf:hover { background: #E8F1FB; }

.w3-menueknopf {
  display: none;
  width: 44px; height: 44px;
  margin-right: -10px;
  border: 0; background: none;
  color: inherit;
  align-items: center; justify-content: center;
  border-radius: 50%;
}
.w3-menueknopf__striche { position: relative; width: 18px; height: 10px; display: block; }
.w3-menueknopf__striche::before, .w3-menueknopf__striche::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 1px;
  transition: transform .35s var(--w3-ease), top .35s var(--w3-ease);
}
.w3-menueknopf__striche::before { top: 0; }
.w3-menueknopf__striche::after { top: 8.5px; }
html.w3-menue-offen .w3-menueknopf__striche::before { top: 4px; transform: rotate(45deg); }
html.w3-menue-offen .w3-menueknopf__striche::after { top: 4px; transform: rotate(-45deg); }

/* Handy-Menue */
@media (max-width: 860px) {
  .w3-js .w3-menueknopf { display: inline-flex; }
  .w3-js .w3-nav {
    position: fixed;
    top: var(--w3-kopf-h);
    left: 0; right: 0;
    height: calc(100vh - var(--w3-kopf-h));
    height: calc(100dvh - var(--w3-kopf-h));
    margin: 0;
    padding: 24px var(--w3-gutter) 40px;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--w3-ease-kurz), visibility 0s linear .3s;
  }
  html[data-w3-kopfthema="dunkel"] .w3-nav { background: rgba(11, 30, 51, .97); }
  html.w3-menue-offen .w3-nav { opacity: 1; visibility: visible; transition: opacity .3s var(--w3-ease-kurz), visibility 0s; }
  html.w3-menue-offen { overflow: hidden; }
  html.w3-menue-offen .w3-kopf { background: rgba(255, 255, 255, .97); }
  html.w3-menue-offen[data-w3-kopfthema="dunkel"] .w3-kopf { background: rgba(11, 30, 51, .97); }
  .w3-nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .w3-nav__liste > li { border-bottom: 1px solid rgba(128, 128, 128, .22); }
  .w3-nav__liste > li.w3-nav__kontakt { border-bottom: 0; margin: 28px 0 0; }
  .w3-nav__link { height: auto; padding: 16px 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; opacity: 1; }
  .w3-nav .w3-knopf { width: 100%; min-height: 52px; font-size: 19px; }
  html[data-w3-kopfthema="dunkel"] .w3-nav .w3-knopf { background: #fff; color: var(--w3-navy); }
}
/* ohne JS: Kopfleiste im Fluss, Navigation bricht um */
html:not(.w3-js) .w3-kopf { position: static; height: auto; padding-block: 10px; background: var(--w3-weiss); }
html:not(.w3-js) .w3-kopf__innen { flex-wrap: wrap; height: auto; }
html:not(.w3-js) .w3-nav__liste { flex-wrap: wrap; gap: 6px 20px; }
html:not(.w3-js) .w3-nav__link { height: 32px; }
html:not(.w3-js) .w3-menueknopf { display: none; }
html:not(.w3-js) .w3-seitenkopf { padding-top: 56px; }
@media (prefers-reduced-motion: reduce) {
  .w3-kopf, .w3-nav, .w3-menueknopf__striche::before, .w3-menueknopf__striche::after, .w3-kopf .w3-logo { transition: none; }
}

/* 30-buehne.css */
/* Buehnen: Navy mit feinem Zeichenblock-Raster (8 / 40 px), Hero, Seitenkopf der Unterseiten, Zahlenband */
.w3-buehne {
  position: relative;
  isolation: isolate;
  background-color: var(--w3-navy);
  color: var(--w3-auf-dunkel);
  overflow: hidden;
}
.w3-buehne::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 35%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 35%, transparent 100%);
}
.w3-buehne::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 82% 12%, rgba(47, 140, 255, .26) 0%, transparent 70%),
    radial-gradient(50% 50% at 8% 100%, rgba(13, 93, 184, .30) 0%, transparent 72%);
}
.w3-buehne :where(h1, h2, h3, h4) { color: var(--w3-auf-dunkel); }
.w3-buehne .w3-lead { color: var(--w3-auf-dunkel-2); }
.w3-buehne :where(p) { color: var(--w3-auf-dunkel-2); }
.w3-buehne a:not(.w3-knopf):not(.w3-link) { color: var(--w3-blau-hell); }

/* Hero (Start, dunkel): Kopf ueber die ganze Breite, darunter Text links und Medium (Rohbau) rechts */
.w3-hero {
  padding-top: calc(var(--w3-kopf-h) + 96px);
  padding-bottom: clamp(64px, 8vw, 112px);
}
.w3-hero__kopf { max-width: 1040px; }
.w3-hero__kopf > * + * { margin-top: 0; }
.w3-hero__kopf .w3-augenbraue { margin-bottom: 20px; }
.w3-hero .w3-h1, .w3-hero h1 { letter-spacing: -0.035em; text-wrap: balance; }
.w3-hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-top: clamp(32px, 4.5vw, 56px);
}
.w3-hero__text { display: grid; gap: 28px; justify-items: start; }
.w3-hero__text .w3-lead { max-width: 28em; }
.w3-hero__medium { position: relative; min-width: 0; }
.w3-hero__medium .w3-bild { box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
@media (max-width: 900px) {
  .w3-hero__raster { grid-template-columns: minmax(0, 1fr); }
  .w3-hero__medium { order: 2; }
}
@media (max-width: 767px) {
  .w3-hero { padding-top: calc(var(--w3-kopf-h) + 56px); }
}

/* Seitenkopf der Unterseiten: hell, ruhig, grosszuegig */
.w3-seitenkopf {
  padding-top: calc(var(--w3-kopf-h) + 88px);
  padding-bottom: clamp(48px, 7vw, 88px);
}
.w3-seitenkopf__innen { max-width: 880px; display: grid; gap: 22px; justify-items: start; }
.w3-seitenkopf__innen .w3-augenbraue { margin: 0; }
.w3-seitenkopf--mitte .w3-seitenkopf__innen { margin-inline: auto; justify-items: center; text-align: center; }
.w3-seitenkopf--mitte .w3-lead { margin-inline: auto; }
.w3-seitenkopf :where(h1) { font-size: clamp(40px, 5.6vw, 72px); }
@media (max-width: 767px) { .w3-seitenkopf { padding-top: calc(var(--w3-kopf-h) + 48px); } }
/* Seitenkopf als dunkle Buehne (eine je Seite) */
.w3-seitenkopf.w3-buehne { padding-bottom: clamp(56px, 8vw, 104px); }

/* Zahlenband (dunkel) */
.w3-zahlenband { padding-block: clamp(64px, 8vw, 104px); }
.w3-zahlenband__liste {
  display: grid;
  grid-template-columns: repeat(var(--w3-spalten, 3), minmax(0, 1fr));
  gap: 0;
}
.w3-zahlenband__item {
  padding: 8px clamp(16px, 3vw, 40px);
  border-left: 1px solid var(--w3-linie-dunkel);
}
.w3-zahlenband__item:first-child { border-left: 0; padding-left: 0; }
.w3-zahlenband__zahl {
  display: block;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.w3-zahlenband__zahl .w3-zahl__einheit { color: var(--w3-blau-hell); }
.w3-zahlenband__text { margin-top: 14px; font-size: 17px; line-height: 1.4; color: var(--w3-auf-dunkel-2); max-width: 15em; }
.w3-zahlenband--2 { --w3-spalten: 2; }
.w3-zahlenband--4 { --w3-spalten: 4; }
@media (max-width: 767px) {
  .w3-zahlenband__liste { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .w3-zahlenband__item { border-left: 0; padding-left: 0; padding-top: 28px; border-top: 1px solid var(--w3-linie-dunkel); }
  .w3-zahlenband__item:first-child { border-top: 0; padding-top: 8px; }
}
@media (min-width: 768px) and (max-width: 1000px) {
  .w3-zahlenband--4 { --w3-spalten: 2; }
  .w3-zahlenband--4 .w3-zahlenband__item:nth-child(3) { border-left: 0; padding-left: 0; }
}

/* 40-kacheln.css */
/* Bento-Kacheln, Leistungskarte, Referenzkarte, Filter, Bildrahmen, Personenkarte */

/* Bildrahmen (Standbild des Rohbaus; keine Fotos, keine KI-Bilder, MM 03.10.2026) */
.w3-bild {
  position: relative;
  overflow: hidden;
  border-radius: var(--w3-r-kachel);
  background: var(--w3-flaeche);
  aspect-ratio: var(--w3-seitenverhaeltnis, 4 / 3);
}
.w3-bild--breit { --w3-seitenverhaeltnis: 16 / 9; }
.w3-bild--quadrat { --w3-seitenverhaeltnis: 1 / 1; }
.w3-bild--hoch { --w3-seitenverhaeltnis: 4 / 5; }
.w3-bild--frei { aspect-ratio: auto; }
.w3-bild img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.w3-bild--frei img { height: auto; }
/* Bento */
.w3-bento {
  display: grid;
  grid-template-columns: repeat(var(--w3-spalten, 3), minmax(0, 1fr));
  gap: var(--w3-luecke);
}
.w3-bento--1 { --w3-spalten: 1; }
.w3-bento--2 { --w3-spalten: 2; }
.w3-bento--3 { --w3-spalten: 3; }
.w3-kachel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 320px;
  --w3-kp: clamp(28px, 3.4vw, 48px);
  padding: var(--w3-kp);
  border-radius: var(--w3-r-kachel);
  background: var(--w3-flaeche);
  color: var(--w3-text);
  overflow: hidden;
  transition: box-shadow var(--w3-dauer) var(--w3-ease), background-color var(--w3-dauer-kurz) var(--w3-ease-kurz);
}
.w3-kachel:hover { box-shadow: var(--w3-schatten-2); }
.w3-kachel--gross { grid-column: span 2; grid-row: span 2; min-height: 560px; }
.w3-kachel--breit { grid-column: 1 / -1; min-height: 0; }
.w3-kachel--zwei { grid-column: span 2; }
.w3-kachel--dunkel {
  background: var(--w3-navy-2);
  color: var(--w3-auf-dunkel);
}
.w3-kachel--dunkel::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    radial-gradient(70% 60% at 100% 0%, rgba(47, 140, 255, .28), transparent 70%);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px, 100% 100%;
}
.w3-kachel--dunkel:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 22px 56px rgba(11, 30, 51, .45); }
.w3-kachel__label { font-size: 14px; font-weight: 600; color: var(--w3-blau); line-height: 1.3; }
.w3-kachel--dunkel .w3-kachel__label { color: var(--w3-blau-hell); }
.w3-kachel__titel {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
  hyphens: manual;
}
.w3-kachel--gross .w3-kachel__titel { font-size: clamp(30px, 3.6vw, 48px); }
.w3-kachel__text { font-size: 17px; line-height: 1.45; color: var(--w3-text-2); max-width: 30em; }
.w3-kachel--dunkel .w3-kachel__text { color: var(--w3-auf-dunkel-2); }
.w3-kachel__zahl {
  font-size: clamp(64px, 8vw, 112px);
  line-height: .95;
  letter-spacing: -0.045em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.w3-kachel__fuss { margin-top: auto; padding-top: 12px; }
.w3-kachel__medium { margin: auto calc(-1 * var(--w3-kp)) calc(-1 * var(--w3-kp)); }
.w3-kachel__medium .w3-bild { border-radius: 0; aspect-ratio: auto; }
.w3-kachel--dunkel :where(h2, h3, h4) { color: #fff; }
@media (max-width: 1000px) {
  .w3-bento--3 { --w3-spalten: 2; }
  .w3-kachel--gross { grid-column: 1 / -1; grid-row: auto; min-height: 420px; }
}
@media (max-width: 767px) {
  .w3-bento, .w3-bento--2, .w3-bento--3 { --w3-spalten: 1; }
  .w3-kachel, .w3-kachel--gross { min-height: 0; --w3-kp: 28px; }
  .w3-kachel--gross, .w3-kachel--zwei { grid-column: auto; }
}

/* Leistungskarte */
.w3-leistungen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--w3-luecke);
}
.w3-leistung {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 32px 28px;
  border-radius: var(--w3-r-kachel);
  background: var(--w3-flaeche);
  transition: box-shadow var(--w3-dauer) var(--w3-ease);
}
.w3-leistung:hover { box-shadow: var(--w3-schatten-2); }
.w3-leistung__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: #fff;
  color: var(--w3-blau);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.w3-leistung__phase { font-size: 13px; font-weight: 600; color: var(--w3-text-2); line-height: 1.3; }
.w3-leistung__titel { font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.w3-leistung__text { font-size: 17px; line-height: 1.45; color: var(--w3-text-2); }
.w3-leistung .w3-erhalten { padding-top: 12px; border-top: 1px solid var(--w3-linie); }
.w3-leistung__link { margin-top: auto; padding-top: 4px; }
.w3-leistung__link .w3-link { font-size: 17px; }
@media (max-width: 1000px) { .w3-leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .w3-leistungen { grid-template-columns: minmax(0, 1fr); } .w3-leistung { padding: 28px 24px 24px; } }

/* Referenzkarte (anonym: Art, Stadt, Leistung, Umfang, Jahr), kein Filter (MM 03.10.2026, WEB-W3-261003 Nr. 4) */
.w3-referenzen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--w3-luecke);
}
.w3-referenz {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 28px 24px;
  border-radius: var(--w3-r-kachel);
  background: var(--w3-flaeche);
  transition: box-shadow var(--w3-dauer) var(--w3-ease);
}
.w3-referenz[hidden] { display: none; }
.w3-referenz:hover { box-shadow: var(--w3-schatten-2); }
.w3-referenz__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.w3-referenz__jahr { font-size: 14px; font-weight: 600; color: var(--w3-text-2); font-variant-numeric: tabular-nums; }
.w3-referenz__art { font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
.w3-referenz__ort { font-size: 15px; color: var(--w3-text-2); margin-top: 4px; }
.w3-referenz__daten { display: grid; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--w3-linie); }
.w3-referenz__daten div { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; font-size: 15px; line-height: 1.4; }
.w3-referenz__daten dt { color: var(--w3-text-2); }
.w3-referenz__daten dd { color: var(--w3-text); font-weight: 500; }
@media (max-width: 1000px) { .w3-referenzen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .w3-referenzen { grid-template-columns: minmax(0, 1fr); } }


/* 50-abschnitte.css */
/* Sticky-Erzaehlung, Schritte-Zeitleiste, FAQ, CTA-Karte */

/* Sticky-Erzaehlung: links steht die Grafik (position: sticky), rechts laufen drei Phasen. Unter 1000 px untereinander ohne Grafik. */
.w3-erzaehlung__spur {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.w3-erzaehlung__grafik {
  position: sticky;
  top: calc(var(--w3-kopf-h) + 48px);
  align-self: start;
}
.w3-erzaehlung__karte {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  max-height: calc(100vh - var(--w3-kopf-h) - 112px);
  width: 100%;
  border-radius: var(--w3-r-kachel);
  background: var(--w3-navy);
  color: #fff;
  overflow: hidden;
  box-shadow: var(--w3-schatten-2);
}
.w3-erzaehlung__karte::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}
.w3-erzaehlung__karte::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 60% at 85% 10%, rgba(47, 140, 255, .32), transparent 70%);
}
.w3-erzaehlung__bild {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 16px;
  padding: clamp(24px, 3vw, 40px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--w3-ease), transform .6s var(--w3-ease);
  pointer-events: none;
}
.w3-erzaehlung[data-aktiv="1"] .w3-erzaehlung__bild[data-schritt="1"],
.w3-erzaehlung[data-aktiv="2"] .w3-erzaehlung__bild[data-schritt="2"],
.w3-erzaehlung[data-aktiv="3"] .w3-erzaehlung__bild[data-schritt="3"],
.w3-erzaehlung[data-aktiv="4"] .w3-erzaehlung__bild[data-schritt="4"] { opacity: 1; transform: none; }
.w3-erzaehlung:not([data-aktiv]) .w3-erzaehlung__bild[data-schritt="1"] { opacity: 1; transform: none; }
.w3-erzaehlung__ziffer {
  font-size: clamp(96px, 13vw, 176px);
  line-height: .85;
  font-weight: 700;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 0%, rgba(124, 203, 255, .55) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.w3-erzaehlung__titel { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; color: #fff; }
.w3-erzaehlung__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.w3-erzaehlung__chips li {
  padding: 6px 12px;
  border-radius: var(--w3-r-pille);
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .9);
  font-size: 14px; line-height: 1.2; font-weight: 500;
}
.w3-erzaehlung__punkte { position: absolute; top: clamp(20px, 2.4vw, 32px); left: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px); display: flex; gap: 6px; }
.w3-erzaehlung__punkte i {
  flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .22); position: relative; overflow: hidden;
}
.w3-erzaehlung__punkte i::after {
  content: ""; position: absolute; inset: 0; background: var(--w3-blau-hell);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--w3-ease);
}
.w3-erzaehlung[data-aktiv="1"] .w3-erzaehlung__punkte i:nth-child(-n+1)::after,
.w3-erzaehlung[data-aktiv="2"] .w3-erzaehlung__punkte i:nth-child(-n+2)::after,
.w3-erzaehlung[data-aktiv="3"] .w3-erzaehlung__punkte i:nth-child(-n+3)::after,
.w3-erzaehlung[data-aktiv="4"] .w3-erzaehlung__punkte i:nth-child(-n+4)::after { transform: scaleX(1); }
.w3-erzaehlung:not([data-aktiv]) .w3-erzaehlung__punkte i:first-child::after { transform: scaleX(1); }

.w3-erzaehlung__schritte { display: grid; }
.w3-erzaehlung__schritt {
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  min-height: 68vh;
  padding-block: 40px;
  transition: opacity .5s var(--w3-ease);
}
.w3-erzaehlung__schritt:first-child { padding-top: 0; justify-content: flex-start; min-height: 60vh; }
.w3-erzaehlung__schritt:last-child { min-height: 60vh; justify-content: flex-start; }
.w3-erzaehlung__nr { font-size: 15px; font-weight: 600; color: var(--w3-blau); font-variant-numeric: tabular-nums; }
.w3-erzaehlung__schritt :where(h3) { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.03em; }
.w3-erzaehlung__schritt > p:not(.w3-erzaehlung__nr) { font-size: var(--w3-lead); line-height: 1.4; color: var(--w3-text-2); max-width: 24em; }
/* Paket G (P1-1): inaktive Phasen bleiben voll lesbar (Kontrast >= 4,5:1). Die aktive hebt sich ueber Farbe, Balken und Gewicht ab, nicht ueber Deckkraft. */
.w3-erzaehlung__schritt { position: relative; padding-left: 28px; }
.w3-erzaehlung__schritt::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 2px;
  background: var(--w3-linie);
  transition: background-color .5s var(--w3-ease);
}
.w3-erzaehlung__schritt.is-aktiv::before { background: var(--w3-blau); }
html.w3-anim .w3-erzaehlung__schritt:not(.is-aktiv) :where(h3, .w3-erzaehlung__nr, p) { color: var(--w3-text-2); }
.w3-erzaehlung__schritt :where(h3, .w3-erzaehlung__nr, p) { transition: color .5s var(--w3-ease); }
@media (max-width: 1000px) {
  .w3-erzaehlung__schritt { padding-left: 0; }
  .w3-erzaehlung__schritt::before { display: none; }
  .w3-erzaehlung__spur { grid-template-columns: minmax(0, 1fr); }
  .w3-erzaehlung__grafik { display: none; }
  .w3-erzaehlung__schritt, .w3-erzaehlung__schritt:first-child, .w3-erzaehlung__schritt:last-child { min-height: 0; padding-block: 28px; border-top: 1px solid var(--w3-linie); justify-content: flex-start; }
  .w3-erzaehlung__schritt:first-child { border-top: 0; padding-top: 0; }
  html.w3-anim .w3-erzaehlung__schritt:not(.is-aktiv) :where(h3, p) { color: inherit; }
  html.w3-anim .w3-erzaehlung__schritt:not(.is-aktiv) p:not(.w3-erzaehlung__nr) { color: var(--w3-text-2); }
  html.w3-anim .w3-erzaehlung__schritt:not(.is-aktiv) .w3-erzaehlung__nr { color: var(--w3-blau); }
}

/* Schritte-Zeitleiste (vier Schritte, waagerecht, mobil senkrecht) */
.w3-zeitleiste {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--w3-schritte, 4), minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  counter-reset: w3-schritt;
}
.w3-zeitleiste--3 { --w3-schritte: 3; }
.w3-zeitleiste--4 { --w3-schritte: 4; }
.w3-zeitleiste::before {
  content: "";
  position: absolute; left: 22px; right: 0; top: 21px; height: 2px;
  background: linear-gradient(90deg, var(--w3-blau), rgba(13, 93, 184, .12));
}
.w3-zeitleiste__schritt { position: relative; display: grid; gap: 10px; align-content: start; counter-increment: w3-schritt; }
.w3-zeitleiste__nr {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--w3-blau); color: #fff;
  font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 8px #fff;
  margin-bottom: 14px;
}
.w3-zeitleiste__schritt :where(h3) { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.w3-zeitleiste__schritt > p { font-size: 17px; line-height: 1.45; color: var(--w3-text-2); }
@media (max-width: 860px) {
  .w3-zeitleiste { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .w3-zeitleiste::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; background: linear-gradient(180deg, var(--w3-blau), rgba(13, 93, 184, .12)); }
  .w3-zeitleiste__schritt { grid-template-columns: 44px minmax(0, 1fr); column-gap: 20px; row-gap: 6px; }
  .w3-zeitleiste__nr { grid-row: 1 / span 3; margin-bottom: 0; }
}

/* FAQ: native details, aufgeraeumt */
.w3-faq { max-width: 840px; margin-inline: auto; border-top: 1px solid var(--w3-linie); }
.w3-faq__item { border-bottom: 1px solid var(--w3-linie); }
.w3-faq__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--w3-text);
  cursor: pointer;
  list-style: none;
  transition: color var(--w3-dauer-kurz) var(--w3-ease-kurz);
}
.w3-faq__item > summary::-webkit-details-marker { display: none; }
.w3-faq__item > summary::marker { content: ""; }
.w3-faq__item > summary:hover { color: var(--w3-blau); }
.w3-faq__item > summary::after {
  content: "";
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  background:
    linear-gradient(var(--w3-blau), var(--w3-blau)) center / 12px 1.8px no-repeat,
    linear-gradient(var(--w3-blau), var(--w3-blau)) center / 1.8px 12px no-repeat,
    var(--w3-flaeche);
  transition: transform .45s var(--w3-ease), background-color var(--w3-dauer-kurz) var(--w3-ease-kurz);
}
.w3-faq__item[open] > summary::after { transform: rotate(45deg); }
.w3-faq__antwort { padding: 0 56px 28px 0; font-size: 19px; line-height: 1.5; color: var(--w3-text-2); max-width: 44em; }
.w3-faq__antwort > p + p { margin-top: 12px; }
.w3-faq__item::details-content {
  block-size: 0; overflow: clip;
  transition: block-size .45s var(--w3-ease), content-visibility .45s allow-discrete;
}
.w3-faq__item[open]::details-content { block-size: auto; }
@media (max-width: 767px) { .w3-faq__antwort { padding-right: 0; font-size: 17px; } .w3-faq__item > summary { padding: 20px 0; } }

/* CTA-Karte: abgerundet, Navy -> Blau, immer mit Weissraum ringsum, nie buendig an der Fusszeile */
.w3-cta-abschnitt { padding-block: var(--w3-abschnitt); }
.w3-cta-abschnitt:last-child, .w3-cta-abschnitt--ende { padding-bottom: calc(var(--w3-abschnitt) + 24px); }
.w3-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--w3-r-cta);
  background: var(--w3-verlauf-karte);
  color: #fff;
  padding: clamp(48px, 8vw, 104px) clamp(24px, 6vw, 80px);
  text-align: center;
}
.w3-cta::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  -webkit-mask-image: radial-gradient(90% 90% at 50% 50%, #000 20%, transparent 100%);
  mask-image: radial-gradient(90% 90% at 50% 50%, #000 20%, transparent 100%);
}
.w3-cta::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 80% at 50% 0%, rgba(108, 196, 255, .28), transparent 70%);
}
.w3-cta__innen { display: grid; gap: 22px; justify-items: center; max-width: 760px; margin-inline: auto; }
.w3-cta :where(h2) { color: #fff; font-size: clamp(32px, 4.4vw, 56px); }
.w3-cta p { color: rgba(255, 255, 255, .82); font-size: var(--w3-lead); line-height: 1.38; max-width: 30em; text-wrap: balance; }
.w3-cta .w3-augenbraue, .w3-cta .w3-link { color: var(--w3-blau-hell-2); }
.w3-cta .w3-glanz { --w3-glanz-verlauf: linear-gradient(90deg, #8CC8FF 0%, #C4E4FF 100%); }
.w3-cta .w3-aktionen { justify-content: center; margin-top: 10px; }

/* 60-fuss.css */
/* Fusszeile Hellgrau, aufgeraeumt wie apple.com */
.w3-fuss {
  background: var(--w3-flaeche);
  color: var(--w3-text-2);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  padding-block: 20px 28px;
}
.w3-fuss__innen { width: min(100% - 2 * var(--w3-gutter), var(--w3-breite)); margin-inline: auto; }
.w3-fuss__kurz {
  padding-block: 12px 18px;
  border-bottom: 1px solid var(--w3-linie);
  padding-right: clamp(0px, 24vw, 340px);
}
.w3-fuss__spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 32px;
  padding-block: 24px 20px;
  border-bottom: 1px solid var(--w3-linie);
}
.w3-fuss__titel { margin: 0 0 10px; font-size: 12px; line-height: 1.4; font-weight: 600; color: var(--w3-text); }
.w3-fuss__liste { display: grid; gap: 8px; }
.w3-fuss a { color: var(--w3-text-2); font-size: 12px; text-decoration: none; }
.w3-fuss a:hover { color: var(--w3-text); text-decoration: underline; text-underline-offset: 3px; }
.w3-fuss__unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-top: 16px;
}
.w3-fuss__recht { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.w3-fuss__recht li + li { padding-left: 20px; border-left: 1px solid var(--w3-linie); }
@media (max-width: 767px) {
  .w3-fuss__spalten { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .w3-fuss__recht li + li { padding-left: 0; border-left: 0; }
}

@media print { .w3-kopf { display: none !important; } }

/* 60-seiten-d1.css */
/* Paket D1 (Seitenbau start, leistungen, arbeitsweise): zusaetzliche Bausteine, alle Klassen w3-d1-*, Werte nur ueber Tokens.
   Neu: Hero mit 3D-Rohbau, LV-Blatt in der Erzaehlung, Grafik-Kacheln mit Linienzeichnung, Phasenband, Ring, Fortschritts-Zeitleiste,
   Zahlenband-Feinschliff, Lichtkante (Maus), FAQ mit Kopf links. Bewegung nur unter html.w3-anim, sonst Endzustand. */

/* ------------------------------------------------------------------ Abschnitte kompakt (Seitenlaenge) */
.w3-d1-abschnitt { padding-top: clamp(44px, 4.4vw, 64px); padding-bottom: 0; }
.w3-d1-abschnitt--unten { padding-bottom: clamp(44px, 4.4vw, 64px); }
.w3-d1-abschnitt .w3-sektionskopf { margin-bottom: clamp(24px, 2.8vw, 36px); max-width: none; }
.w3-d1-abschnitt .w3-sektionskopf h2 { font-size: clamp(30px, 3.6vw, 48px); }

/* ------------------------------------------------------------------ Start: Hero */
.w3-d1-hero {
  padding-top: calc(var(--w3-kopf-h) + 96px);
  padding-bottom: clamp(56px, 6vw, 88px);
}
.w3-d1-hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}
.w3-d1-hero__links { display: grid; gap: 28px; justify-items: start; min-width: 0; }
.w3-d1-hero__links .w3-hero__kopf { max-width: none; }
.w3-d1-hero__links .w3-hero__text .w3-lead { max-width: 24em; }
.w3-d1-hero h1 { font-size: clamp(40px, 4.1vw, 58px); line-height: 1.05; }
.w3-d1-hero .w3-rohbau { max-width: 480px; justify-self: end; }
.w3-d1-hero .w3-rohbau__hilfe { margin-bottom: 8px; }
.w3-d1-hero .w3-rohbau__liste { margin-top: 10px; gap: 4px; }
.w3-d1-hero .w3-rohbau__wahl { padding: 8px 12px; font-size: 14px; grid-template-columns: 52px 1fr auto; gap: 10px; }
.w3-d1-hero .w3-rohbau__rechenwege { margin-top: 10px; min-height: 4.4em; }
.w3-d1-hero .w3-rohbau__rechenweg { font-size: 13px; }
.w3-d1-hero .w3-rohbau__unterschrift { margin-top: 8px; }
@media (max-width: 1000px) {
  .w3-d1-hero__raster { grid-template-columns: minmax(0, 1fr); }
  .w3-d1-hero .w3-rohbau { justify-self: start; max-width: 560px; }
  .w3-d1-hero h1 { font-size: clamp(40px, 8.4vw, 60px); }
}
@media (max-width: 767px) { .w3-d1-hero { padding-top: calc(var(--w3-kopf-h) + 40px); } }

/* ------------------------------------------------------------------ Start: Erzaehlung mit LV-Blatt */
.w3-d1-erz .w3-erzaehlung__schritt { min-height: 38vh; padding-block: 28px; }
.w3-d1-erz .w3-erzaehlung__schritt:first-child { min-height: 32vh; }
.w3-d1-erz .w3-erzaehlung__schritt:last-child { min-height: 32vh; }
.w3-d1-erz .w3-erzaehlung__ziffer { font-size: clamp(48px, 5vw, 64px); line-height: .9; letter-spacing: -0.05em; }
.w3-d1-erz .w3-erzaehlung__bild { gap: 10px; padding-bottom: clamp(22px, 2.6vw, 30px); }
.w3-d1-erz .w3-erzaehlung__titel { font-size: clamp(20px, 2vw, 24px); }
.w3-d1-erz .w3-erzaehlung__chips li { font-size: 13px; padding: 5px 10px; }
.w3-d1-erz .w3-erzaehlung__schritt .w3-link { margin-top: 4px; }

.w3-d1-lv {
  position: absolute;
  left: clamp(20px, 2.6vw, 30px); right: clamp(20px, 2.6vw, 30px);
  top: 54px;
  display: grid; gap: 5px;
  font-size: 12.5px; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.w3-d1-lv__kopf, .w3-d1-lv__zeile {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 58px 78px;
  gap: 8px; align-items: center;
}
.w3-d1-lv__kopf { padding: 0 10px 4px; color: rgba(255, 255, 255, .62); font-weight: 600; border-bottom: 1px solid var(--w3-linie-dunkel); }
.w3-d1-lv__zeile {
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .92);
}
.w3-d1-lv__oz { color: rgba(255, 255, 255, .66); }
.w3-d1-lv__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w3-d1-lv__menge { text-align: right; font-weight: 600; }
.w3-d1-lv__stand { position: relative; height: 18px; }
.w3-d1-lv__stand > span {
  position: absolute; right: 0; top: 50%;
  display: inline-flex; align-items: center; gap: 5px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity .5s var(--w3-ease) calc(var(--i, 0) * 90ms + 160ms);
  white-space: nowrap; font-weight: 600; color: var(--w3-blau-hell-2);
}
.w3-d1-lv__stand > span::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: rgba(77, 163, 255, .28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.2l2.3 2.3 4.5-4.8' fill='none' stroke='%23A8D4FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.w3-d1-lv__stand .w3-d1-soll { color: rgba(255, 255, 255, .86); }
.w3-d1-lv__stand .w3-d1-soll::before { display: none; }
.w3-d1-lv__balken { display: inline-grid; gap: 3px; width: 60px; }
.w3-d1-lv__balken i { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .45); }
.w3-d1-lv__balken i + i { background: var(--w3-blau-hell); width: var(--ist, 80%); }
/* Phase 1: bepreist, Phase 2: Soll und Ist, Phase 3: abgerechnet. Ohne Phase (kein JS) steht Phase 1. */
.w3-erzaehlung:not([data-aktiv]) .w3-d1-lv__stand .s1,
.w3-erzaehlung[data-aktiv="1"] .w3-d1-lv__stand .s1,
.w3-erzaehlung[data-aktiv="2"] .w3-d1-lv__stand .s2,
.w3-erzaehlung[data-aktiv="3"] .w3-d1-lv__stand .s3 { opacity: 1; }
.w3-d1-lv__zeile--nachtrag, .w3-d1-lv__zeile--schluss {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(77, 163, 255, .55);
  opacity: 0; transform: translateY(8px);
  transition: opacity .6s var(--w3-ease), transform .6s var(--w3-ease);
}
.w3-d1-lv__zeile--nachtrag .w3-d1-lv__menge, .w3-d1-lv__zeile--schluss .w3-d1-lv__menge { color: var(--w3-blau-hell-2); }
.w3-erzaehlung[data-aktiv="2"] .w3-d1-lv__zeile--nachtrag,
.w3-erzaehlung[data-aktiv="3"] .w3-d1-lv__zeile--nachtrag,
.w3-erzaehlung[data-aktiv="3"] .w3-d1-lv__zeile--schluss { opacity: 1; transform: none; }
.w3-erzaehlung[data-aktiv="3"] .w3-d1-lv__zeile--schluss { background: rgba(77, 163, 255, .16); }

/* ------------------------------------------------------------------ Zahlenband (Start) */
.w3-d1-band { padding-block: clamp(48px, 6vw, 80px); }
.w3-d1-band .w3-sektionskopf { margin-bottom: clamp(24px, 3.2vw, 40px); }
.w3-d1-band .w3-sektionskopf h2 { font-size: clamp(30px, 3.6vw, 44px); }
.w3-d1-band .w3-zahlenband__zahl { font-size: clamp(44px, 5.4vw, 72px); }
.w3-d1-band .w3-zahl__einheit { font-size: .36em; font-weight: 600; letter-spacing: 0; margin-left: .2em; color: var(--w3-blau-hell); }
.w3-d1-band .w3-zahlenband__text { margin-top: 12px; font-size: 16px; }
.w3-d1-band .w3-zahlenband__item { position: relative; }
.w3-d1-band .w3-zahlenband__item::after {
  content: ""; display: block; height: 2px; margin-top: 18px; width: 56px;
  background: var(--w3-verlauf-text-dunkel); border-radius: 2px;
  transform-origin: 0 50%;
  transition: transform 1.2s var(--w3-ease) .35s;
}
html.w3-anim .w3-d1-band .w3-zahlenband__item:not(.is-ein)::after { transform: scaleX(0); }

/* ------------------------------------------------------------------ Start: Team-Bento */
.w3-d1-team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: var(--w3-luecke);
}
.w3-d1-team .w3-kachel { min-height: 0; }
.w3-d1-team__gross { grid-column: span 2; grid-row: span 2; justify-content: space-between; }
.w3-d1-team .w3-kachel__zahl { font-size: clamp(44px, 4.8vw, 64px); line-height: 1; }
.w3-d1-team .w3-kachel__zahl small { font-size: .42em; font-weight: 600; letter-spacing: -0.01em; color: var(--w3-text-2); margin-left: .12em; }
.w3-d1-team .w3-kachel__text { font-size: 16px; }
.w3-d1-team__gross .w3-kachel__titel { font-size: clamp(28px, 3vw, 40px); max-width: 14em; }
.w3-d1-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.w3-d1-chips a, .w3-d1-chips li {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  border-radius: var(--w3-r-pille);
  background: rgba(255, 255, 255, .1); color: #fff;
  font-size: 14px; font-weight: 500; line-height: 1;
  transition: background-color var(--w3-dauer-kurz) var(--w3-ease-kurz);
}
.w3-d1-chips a:hover { background: rgba(255, 255, 255, .2); text-decoration: none; }
.w3-d1-chips--hell a, .w3-d1-chips--hell li { background: #fff; color: var(--w3-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
@media (max-width: 1000px) {
  .w3-d1-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w3-d1-team__gross { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 600px) { .w3-d1-team { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ Referenz-Teaser */
.w3-d1-refkopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; }
.w3-d1-refkopf .w3-sektionskopf { margin-bottom: 0; }
.w3-d1-referenzen .w3-referenz { gap: 14px; }
.w3-d1-referenzen .w3-referenz__art { font-size: 21px; }
.w3-d1-referenzen .w3-referenz__daten { padding-top: 14px; }

/* ------------------------------------------------------------------ FAQ mit Kopf links */
.w3-d1-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.w3-d1-faq .w3-sektionskopf { margin-bottom: 0; position: sticky; top: calc(var(--w3-kopf-h) + 32px); }
.w3-d1-faq .w3-faq { max-width: none; margin: 0; }
.w3-d1-faq .w3-faq__item > summary { padding: 20px 0; font-size: clamp(18px, 1.7vw, 21px); }
.w3-d1-faq .w3-faq__antwort { font-size: 17px; padding-bottom: 22px; }
@media (max-width: 900px) {
  .w3-d1-faq { grid-template-columns: minmax(0, 1fr); }
  .w3-d1-faq .w3-sektionskopf { position: static; }
}

/* CTA kompakter */
.w3-d1-cta { padding-block: clamp(40px, 5vw, 64px); }
.w3-d1-cta:last-child { padding-bottom: clamp(56px, 7vw, 96px); }
.w3-d1-cta .w3-cta { padding: clamp(44px, 6vw, 72px) clamp(24px, 6vw, 80px); }
.w3-d1-cta .w3-cta__innen { gap: 16px; }

/* ------------------------------------------------------------------ Lichtkante (Maus), nur Helligkeit */
.w3-kachel[data-w3-d1-licht]::after,
[data-w3-d1-licht] .w3-kachel::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(47, 140, 255, .09), transparent 70%);
  opacity: 0; transition: opacity .4s var(--w3-ease-kurz);
}
[data-w3-d1-licht] .w3-kachel:hover::after { opacity: 1; }
[data-w3-d1-licht] .w3-kachel > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ Grafik-Kacheln mit Linienzeichnung */
.w3-d1-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--w3-luecke); }
.w3-d1-s4 { grid-column: span 4; }
.w3-d1-s5 { grid-column: span 5; }
.w3-d1-s6 { grid-column: span 6; }
.w3-d1-s7 { grid-column: span 7; }
.w3-d1-s8 { grid-column: span 8; }
@media (max-width: 1100px) {
  .w3-d1-s4, .w3-d1-s5, .w3-d1-s6, .w3-d1-s7, .w3-d1-s8 { grid-column: span 6; }
  .w3-d1-raster > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .w3-d1-s4, .w3-d1-s5, .w3-d1-s6, .w3-d1-s7, .w3-d1-s8 { grid-column: 1 / -1; }
}
.w3-kachel.w3-d1-kachel { min-height: 0; gap: 12px; --w3-kp: clamp(24px, 2.6vw, 32px); }
.w3-d1-kachel .w3-kachel__titel { font-size: clamp(22px, 2vw, 26px); }
.w3-d1-kachel .w3-kachel__text { font-size: 16px; }
.w3-d1-kachel .w3-erhalten { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--w3-linie); font-size: 14.5px; }
.w3-kachel--dunkel .w3-erhalten { color: var(--w3-auf-dunkel-2); border-top-color: var(--w3-linie-dunkel); }
.w3-kachel--dunkel .w3-erhalten strong { color: #fff; }
.w3-d1-kachel .w3-erhalten strong { display: block; margin: 0 0 2px; }

.w3-d1-grafik {
  --g2: var(--w3-text-2);
  --gfill: rgba(13, 93, 184, .09);
  color: var(--w3-blau);
  margin-bottom: 4px;
}
.w3-kachel--dunkel .w3-d1-grafik { --g2: rgba(255, 255, 255, .8); --gfill: rgba(255, 255, 255, .09); color: var(--w3-blau-hell); }
.w3-d1-grafik svg { display: block; width: 100%; max-width: 460px; height: auto; max-height: 140px; overflow: visible; }
.w3-d1-linie { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.w3-d1-grau { stroke: var(--g2); stroke-opacity: .55; }
.w3-d1-flaeche { fill: var(--gfill); stroke: none; }
.w3-d1-voll { fill: currentColor; stroke: none; }
.w3-d1-gestrichelt { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-dasharray: 5 5; }
.w3-d1-t { font-family: var(--w3-font); font-size: 13px; font-weight: 600; fill: var(--g2); }
.w3-d1-t--w { fill: #fff; }
.w3-d1-t--a { fill: currentColor; }
/* Ausgangszustaende ohne opacity (Gate: nichts mit Deckkraft unter 1): Linien per Strichversatz, Flaechen und Schrift per fill-/stroke-opacity */
.w3-d1-linie { transition: stroke-dashoffset 1s var(--w3-ease) calc(var(--d, 0) * 110ms); }
.w3-d1-pop { transition: fill-opacity .5s var(--w3-ease) calc(var(--d, 0) * 110ms + 250ms), stroke-opacity .5s var(--w3-ease) calc(var(--d, 0) * 110ms + 250ms), transform .5s var(--w3-ease) calc(var(--d, 0) * 110ms + 250ms); }
.w3-d1-balken { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .8s var(--w3-ease) calc(var(--d, 0) * 90ms); }
html.w3-anim .w3-d1-grafik:not(.is-an) .w3-d1-linie { stroke-dashoffset: 1; }
html.w3-anim .w3-d1-grafik:not(.is-an) .w3-d1-pop { fill-opacity: 0; stroke-opacity: 0; transform: translateY(6px); }
html.w3-anim .w3-d1-grafik:not(.is-an) .w3-d1-balken { transform: scaleY(0); }

/* ------------------------------------------------------------------ Seitenkopf mit Grafik rechts (Leistungen, Arbeitsweise) */
.w3-d1-kopf .w3-seitenkopf__innen {
  max-width: none;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(32px, 6vw, 96px);
  align-items: center;
  justify-items: start;
}
.w3-d1-kopf__text { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.w3-d1-kopf__text .w3-augenbraue { margin: 0; }
.w3-d1-kopf .w3-seitenkopf__innen > .w3-d1-kopf__grafik { justify-self: end; width: 100%; max-width: 420px; }
@media (max-width: 900px) {
  .w3-d1-kopf .w3-seitenkopf__innen { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .w3-d1-kopf .w3-seitenkopf__innen > .w3-d1-kopf__grafik { justify-self: start; }
}

/* Phasenband: 3 + 2 + 3 = 8 */
.w3-d1-phasen { position: relative; display: grid; gap: 10px; counter-reset: p; }
.w3-d1-phasen::before {
  content: ""; position: absolute; left: 33px; top: 30px; bottom: 74px; width: 2px;
  background: var(--w3-verlauf-text-hell); transform-origin: 50% 0; border-radius: 2px;
  transition: transform 1.3s var(--w3-ease) .2s;
}
html.w3-anim .w3-d1-phasen:not(.is-an)::before { transform: scaleY(0); }
.w3-d1-phasen li { position: relative; }
.w3-d1-phasen a {
  display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 14px;
  min-height: 68px; padding: 8px 20px 8px 0;
  border-radius: 20px;
  background: var(--w3-flaeche);
  color: var(--w3-text);
  text-decoration: none;
  transition: box-shadow var(--w3-dauer) var(--w3-ease);
}
.w3-d1-phasen a:hover { box-shadow: var(--w3-schatten-1); text-decoration: none; }
.w3-d1-phasen__zahl {
  justify-self: center;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--w3-blau); color: #fff;
  font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
  box-shadow: 0 0 0 6px var(--w3-weiss);
  position: relative; z-index: 1;
}
.w3-d1-phasen__text { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.w3-d1-phasen__text small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--w3-text-2); }
.w3-d1-phasen__summe {
  display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 14px;
  min-height: 68px; border-radius: 20px;
  background: var(--w3-navy); color: #fff; padding: 8px 20px 8px 0;
}
.w3-d1-phasen__summe .w3-d1-phasen__zahl { background: var(--w3-blau-hell); color: var(--w3-navy); box-shadow: none; width: 46px; }
.w3-d1-phasen__summe .w3-d1-phasen__text small { color: rgba(255, 255, 255, .78); }

/* Phasenueberschrift ueber den Kachelreihen */
.w3-d1-phase { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 8px clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(20px, 2.4vw, 28px); }
.w3-d1-phase .w3-augenbraue { margin: 0 0 6px; }
.w3-d1-phase h2 { font-size: clamp(30px, 3.4vw, 42px); }
.w3-d1-phase p.w3-d1-phase__text { font-size: 18px; color: var(--w3-text-2); max-width: 24em; padding-bottom: 6px; }
@media (max-width: 800px) { .w3-d1-phase { grid-template-columns: minmax(0, 1fr); } }
.w3-d1-phasenblock + .w3-d1-phasenblock { margin-top: clamp(44px, 5vw, 64px); }
.w3-d1-fussnote { margin-top: clamp(28px, 3.4vw, 40px); text-align: center; color: var(--w3-text-2); font-size: 15px; }

/* ------------------------------------------------------------------ Arbeitsweise: Ring im Kopf */
.w3-d1-ring { position: relative; width: min(100%, 340px); aspect-ratio: 1 / 1; margin-inline: auto; }
.w3-d1-ring svg { width: 100%; height: 100%; overflow: visible; }
.w3-d1-ring__spur { fill: none; stroke: var(--w3-linie); stroke-width: 10; stroke-linecap: round; }
.w3-d1-ring__bogen { fill: none; stroke: var(--w3-blau); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--w3-ease) calc(var(--d, 0) * 380ms); }
html.w3-anim .w3-d1-ring:not(.is-an) .w3-d1-ring__bogen { stroke-dashoffset: 1; }
.w3-d1-ring__nr { font-family: var(--w3-font); font-size: 16px; font-weight: 700; fill: var(--w3-blau); text-anchor: middle; dominant-baseline: central; }
.w3-d1-ring__mitte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.w3-d1-ring__mitte strong { display: block; font-size: clamp(64px, 8vw, 96px); line-height: .9; letter-spacing: -0.05em; font-weight: 700; font-variant-numeric: tabular-nums; }
.w3-d1-ring__mitte > span { display: block; margin-top: 8px; color: var(--w3-text-2); font-size: 17px; }

/* ------------------------------------------------------------------ Arbeitsweise: Zeitleiste mit Fortschritt */
.w3-zeitleiste[data-w3-d1-fortschritt]::before { background: var(--w3-linie); right: 0; }
.w3-zeitleiste[data-w3-d1-fortschritt]::after {
  content: ""; position: absolute; left: 22px; right: 0; top: 21px; height: 2px;
  background: var(--w3-verlauf-text-hell); border-radius: 2px;
  transform-origin: 0 50%;
  transform: scaleX(var(--w3-d1-fort, 1));
}
.w3-d1-schritt .w3-zeitleiste__nr { transition: background-color .5s var(--w3-ease), color .5s var(--w3-ease), transform .5s var(--w3-ease); }
.w3-d1-schritt { gap: 10px; }
.w3-d1-schritt .w3-d1-chips { margin-top: 6px; }
.w3-d1-schritt .w3-d1-chips li { background: var(--w3-flaeche); color: var(--w3-text); min-height: 30px; padding: 0 12px; font-size: 14px; }
html.w3-anim .w3-zeitleiste[data-w3-d1-fortschritt] .w3-zeitleiste__schritt:not(.is-erreicht) .w3-zeitleiste__nr { background: var(--w3-weiss); color: var(--w3-text-2); box-shadow: 0 0 0 8px #fff, inset 0 0 0 2px var(--w3-linie); }
html.w3-anim .w3-zeitleiste[data-w3-d1-fortschritt] .w3-zeitleiste__schritt.is-erreicht .w3-zeitleiste__nr { transform: scale(1.06); }
@media (max-width: 860px) {
  .w3-zeitleiste[data-w3-d1-fortschritt]::after {
    left: 21px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto;
    transform-origin: 50% 0; transform: scaleY(var(--w3-d1-fort, 1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .w3-d1-linie, .w3-d1-pop, .w3-d1-balken, .w3-d1-ring__bogen { transition: none !important; }
}

/* ------------------------------------------------------------------ Ergaenzungen */
.w3-d1-soll-balken { fill: var(--g2); fill-opacity: .5; stroke: none; }
.w3-d1-ring__disc { fill: #fff; stroke: var(--w3-blau); stroke-width: 2; }
.w3-d1-kopf h1 { font-size: clamp(38px, 4.6vw, 60px); }
.w3-d1-schritt { grid-template-rows: auto 1fr; }
.w3-d1-schritt__karte { display: grid; gap: 10px; align-content: start; padding: 22px 22px 24px; border-radius: 22px; background: var(--w3-flaeche); height: 100%; }
.w3-d1-schritt__karte :where(h3) { font-size: 21px; }
.w3-d1-schritt__karte > p { font-size: 16px; line-height: 1.45; color: var(--w3-text-2); }
.w3-d1-schritt .w3-d1-chips { margin-top: 4px; }
.w3-d1-schritt .w3-d1-chips li { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.w3-d1-gaeb { margin-top: 2px; }
.w3-d1-gaeb li { transition: opacity .5s var(--w3-ease) calc(var(--d, 0) * 90ms + 200ms), transform .5s var(--w3-ease) calc(var(--d, 0) * 90ms + 200ms), background-color var(--w3-dauer-kurz) var(--w3-ease-kurz); }
html.w3-anim .w3-d1-gaeb:not(.is-an) li { opacity: 0; transform: translateY(6px); }
@media (max-width: 860px) {
  .w3-d1-schritt { grid-template-rows: auto auto; }
}

/* ------------------------------------------------------------------ Runde 1: Laenge kuerzen */
.w3-d1-hero { padding-bottom: clamp(48px, 5vw, 64px); }
.w3-d1-hero .w3-rohbau__rechenwege { min-height: 0; }
.w3-d1-erz .w3-erzaehlung__schritt, .w3-d1-erz .w3-erzaehlung__schritt:first-child, .w3-d1-erz .w3-erzaehlung__schritt:last-child { min-height: 0; padding-block: 26px; justify-content: center; }
.w3-d1-erz .w3-erzaehlung__schritt :where(h3) { font-size: clamp(26px, 3vw, 36px); }
.w3-d1-erz .w3-erzaehlung__schritt > p:not(.w3-erzaehlung__nr) { font-size: 19px; }
/* LV-Blatt: neuer Stand blendet verzoegert ein, alter sofort aus */
.w3-d1-lv__stand > span { transition: opacity .2s var(--w3-ease-kurz); }
.w3-erzaehlung:not([data-aktiv]) .w3-d1-lv__stand .s1,
.w3-erzaehlung[data-aktiv="1"] .w3-d1-lv__stand .s1,
.w3-erzaehlung[data-aktiv="2"] .w3-d1-lv__stand .s2,
.w3-erzaehlung[data-aktiv="3"] .w3-d1-lv__stand .s3 { transition: opacity .5s var(--w3-ease) calc(var(--i, 0) * 90ms + 160ms); }

/* Zahlenband kompakt */
.w3-d1-band { padding-block: clamp(40px, 4.4vw, 56px); }
.w3-d1-band .w3-sektionskopf { margin-bottom: 22px; }
.w3-d1-band .w3-sektionskopf h2 { font-size: clamp(28px, 3.2vw, 40px); }
.w3-d1-band .w3-zahlenband__item::after { display: none; }
.w3-d1-band .w3-zahlenband__text { margin-top: 8px; font-size: 15px; }

/* Team-Bento: eine Reihe */
.w3-d1-team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.w3-d1-team .w3-kachel { gap: 10px; --w3-kp: clamp(22px, 2.2vw, 28px); }
.w3-d1-team .w3-kachel__titel { font-size: clamp(22px, 2vw, 26px); }
.w3-d1-team .w3-kachel__zahl { font-size: clamp(44px, 4.2vw, 56px); line-height: 1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.w3-d1-team .w3-kachel__zahl small { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--w3-text-2); margin: 0; }
.w3-d1-team .w3-kachel__text { font-size: 15px; line-height: 1.4; }
.w3-d1-team .w3-d1-team__format { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.08; letter-spacing: -0.03em; display: block; }
@media (max-width: 1000px) { .w3-d1-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w3-d1-team__gross { grid-column: auto; grid-row: auto; } }
@media (max-width: 600px) { .w3-d1-team { grid-template-columns: minmax(0, 1fr); } }

/* Referenzen und FAQ kompakt */
.w3-d1-refkopf { margin-bottom: clamp(24px, 2.8vw, 36px); }
.w3-d1-refkopf .w3-sektionskopf h2 { white-space: normal; }
.w3-d1-faq .w3-faq__item > summary { padding: 16px 0; }
.w3-d1-faq .w3-faq__antwort { padding-bottom: 18px; }
.w3-d1-cta { padding-top: clamp(40px, 4.4vw, 56px); }
.w3-d1-cta .w3-cta { padding: clamp(40px, 5vw, 56px) clamp(24px, 6vw, 80px); }

/* Seitenkopf der Unterseiten kompakt, Ring kleiner */
.w3-d1-kopf { padding-top: calc(var(--w3-kopf-h) + 72px); padding-bottom: 8px; }
.w3-d1-ring { width: min(100%, 300px); }
.w3-d1-kopf .w3-seitenkopf__innen > .w3-d1-ring { max-width: 300px; }
.w3-d1-ring__mitte strong { font-size: clamp(52px, 6vw, 72px); }
.w3-d1-ring__mitte > span { font-size: 16px; margin-top: 4px; }
.w3-d1-phasen a, .w3-d1-phasen__summe { min-height: 60px; }
.w3-d1-phasen::before { bottom: 32px; top: 28px; }

/* Leistungen: Kacheln und Phasenkoepfe straffer */
.w3-d1-phase { margin-bottom: 18px; }
.w3-d1-phasenblock + .w3-d1-phasenblock { margin-top: 36px; }
.w3-kachel.w3-d1-kachel { --w3-kp: clamp(22px, 2.2vw, 28px); gap: 10px; }
.w3-d1-kachel .w3-kachel__text { font-size: 15.5px; line-height: 1.42; }
.w3-d1-kachel .w3-kachel__titel { font-size: clamp(21px, 1.9vw, 24px); }
.w3-d1-kachel .w3-erhalten { padding-top: 10px; font-size: 14px; }
.w3-d1-grafik svg { max-height: 112px; }
.w3-d1-fussnote { margin-top: 22px; }

/* Zusammenarbeit: Zeile 2 waagerecht (Grafik links, Text rechts) */
.w3-d1-quer { flex-direction: row; align-items: center; gap: 24px; }
.w3-d1-quer .w3-d1-grafik { flex: 0 0 44%; margin: 0; }
.w3-d1-quer .w3-d1-quer__text { display: grid; gap: 8px; align-content: center; min-width: 0; }
@media (max-width: 700px) { .w3-d1-quer { flex-direction: column; align-items: stretch; } .w3-d1-quer .w3-d1-grafik { flex: none; } }

/* ------------------------------------------------------------------ Runde 1b */
.w3-d1-hero { padding-bottom: clamp(40px, 4vw, 48px); }
.w3-d1-erz .w3-erzaehlung__schritt, .w3-d1-erz .w3-erzaehlung__schritt:first-child, .w3-d1-erz .w3-erzaehlung__schritt:last-child { padding-block: 20px; }
.w3-d1-lv__kopf, .w3-d1-lv__zeile { grid-template-columns: 44px minmax(0, 1fr) 64px 88px; }
.w3-d1-team { grid-template-columns: 1.3fr 1fr 1.1fr 1fr 1.1fr; }
.w3-d1-team .w3-kachel__zahl small { font-size: 17px; }
@media (max-width: 1000px) { .w3-d1-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w3-d1-team > :first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .w3-d1-team { grid-template-columns: minmax(0, 1fr); } }
.w3-d1-quer .w3-d1-grafik { flex: 0 0 50%; }
.w3-d1-schritt .w3-d1-chips li { min-height: 28px; padding: 0 11px; font-size: 13px; }
.w3-d1-schritt .w3-d1-chips { gap: 6px; }
.w3-d1-schritt__karte { padding: 20px 20px 22px; }
.w3-d1-gross .w3-d1-grafik svg { max-width: 560px; max-height: 128px; }
.w3-d1-kopf { padding-top: calc(var(--w3-kopf-h) + 88px); }
.w3-d1-fussnote { margin-top: 18px; }
.w3-d1-faq .w3-faq__item > summary { padding: 14px 0; }

/* Runde 1c */
@media (max-width: 767px) {
  .w3-d1-hero { padding-top: calc(var(--w3-kopf-h) + 56px); }
  .w3-d1-breit .w3-d1-t { font-size: 17px; }
}
.w3-d1-phasenblock + .w3-d1-phasenblock { margin-top: 30px; }
.w3-d1-cta { padding-top: clamp(36px, 4vw, 48px); }

/* Runde 2: Gates (CLS, Sticky, Abstand) */
html.w3-js .w3-d1-hero .w3-rohbau__rechenwege { height: 5.9em; overflow: hidden; }
.w3-d1-erz .w3-erzaehlung__grafik { top: calc(var(--w3-kopf-h) + 15vh); }
.w3-d1-erz .w3-erzaehlung__schritt, .w3-d1-erz .w3-erzaehlung__schritt:first-child, .w3-d1-erz .w3-erzaehlung__schritt:last-child { min-height: 22vh; }
.w3-d1-cta:last-child, .w3-d1-cta--ende { padding-bottom: clamp(64px, 7vw, 96px); }
.w3-d1-cta .w3-cta { padding: clamp(36px, 4.4vw, 48px) clamp(24px, 6vw, 80px); }

/* Runde 2b: Seitenlaenge Start */
.w3-d1-band { padding-block: clamp(32px, 3.4vw, 40px); }
.w3-d1-band .w3-zahlenband__zahl { font-size: clamp(40px, 4.6vw, 64px); }
.w3-d1-band .w3-sektionskopf { margin-bottom: 16px; }
.w3-d1-team .w3-kachel { --w3-kp: 22px; gap: 8px; }
.w3-d1-team .w3-kachel__text { font-size: 14.5px; }
.w3-d1-referenzen .w3-referenz { padding: 24px 24px 20px; gap: 12px; }
.w3-d1-referenzen .w3-referenz__daten { gap: 8px; padding-top: 12px; }
.w3-d1-faq .w3-faq__item > summary { padding: 12px 0; }
.w3-d1-cta .w3-cta :where(h2) { font-size: clamp(30px, 3.8vw, 48px); }
.w3-d1-cta .w3-cta { padding: clamp(32px, 4vw, 40px) clamp(24px, 6vw, 80px); }
.w3-d1-hero { padding-bottom: clamp(32px, 3.4vw, 40px); }

/* Runde 2c: Sticky-Gate (Grafik bleibt stehen, bis Phase 3 durch ist) */
.w3-d1-erz .w3-erzaehlung__grafik { top: calc(var(--w3-kopf-h) + 10vh); }
.w3-d1-erz .w3-erzaehlung__schritt:first-child { min-height: 25vh; }
.w3-d1-erz .w3-erzaehlung__schritt:last-child { min-height: 30vh; }
.w3-d1-erz.w3-d1-abschnitt--unten { padding-bottom: 28px; }
.w3-d1-band { padding-block: 30px; }
.w3-d1-cta { padding-top: 32px; }

/* Runde 3: Grafikschrift mindestens 11 px gerendert (Tablet, Handy) */
@media (max-width: 1100px) {
  .w3-d1-quer { flex-direction: column; align-items: stretch; gap: 12px; }
  .w3-d1-quer .w3-d1-grafik { flex: none; }
  .w3-d1-quer .w3-d1-grafik svg { max-width: 300px; }
}
@media (max-width: 900px) { .w3-d1-breit .w3-d1-t { font-size: 18px; } }

/* 61-seiten-d2.css */
/* Paket D2: Referenzen, Ueber uns, Kontakt, Impressum, Datenschutz.
   Nur Tokens aus 00-tokens.css. Diese Datei steht in der Reihenfolge VOR 70-formular.css und 80-bewegung.css,
   deshalb tragen alle Ueberschreibungen die Wurzelklasse .w3-d2 (Spezifitaet 0,2,0) und eigene Bausteine die Vorsilbe w3-d2-. */

/* ---------- Gemeinsame Hilfen ---------- */
.w3-d2 .w3-abschnitt--d2 { padding-block: clamp(40px, 4.4vw, 60px); }
.w3-d2 .w3-abschnitt--recht { padding-top: clamp(8px, 1.5vw, 20px); }
.w3-d2 .w3-sektionskopf--d2 { margin-bottom: clamp(24px, 3vw, 40px); max-width: 760px; }
.w3-d2 .w3-sektionskopf--d2 .w3-h2-d2,
.w3-d2 .w3-h2-d2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.03em; }
.w3-d2 .w3-seitenkopf--kompakt { padding-top: calc(var(--w3-kopf-h) + clamp(40px, 5vw, 64px)); padding-bottom: clamp(32px, 4vw, 48px); }
.w3-d2 .w3-seitenkopf--kompakt :where(h1) { font-size: clamp(36px, 5vw, 60px); }

/* Offene Punkte (Platzhalter, die vor Livegang geklaert werden): Marker, keine Textfarbe der Seite */
.w3-offen {
  display: inline;
  padding: 1px 6px;
  border-radius: 5px;
  background: #FFF1A8;
  color: #3D3200;
  font-weight: 500;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Kopf als dunkle Buehne (Referenzen, Ueber uns): ruhiger als der Start-Hero, eine Buehne je Seite */
.w3-d2 .w3-d2-kopf { padding-top: calc(var(--w3-kopf-h) + clamp(40px, 5vw, 72px)); padding-bottom: clamp(40px, 5vw, 64px); }
.w3-d2 .w3-d2-kopf .w3-seitenkopf__innen { max-width: 920px; gap: 18px; }
.w3-d2 .w3-d2-kopf :where(h1) { font-size: clamp(38px, 5vw, 62px); }
.w3-d2 .w3-d2-kopf .w3-lead { max-width: 44em; }

/* ---------- Referenzen ---------- */
.w3-d2-band {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 9fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--w3-linie-dunkel);
}
.w3-d2-band__titel { font-size: clamp(22px, 2vw, 26px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; max-width: 7em; }
.w3-d2 .w3-d2-band .w3-zahlenband__liste { --w3-spalten: 3; }
.w3-d2 .w3-d2-band .w3-zahlenband__zahl { font-size: clamp(44px, 4.6vw, 60px); }
.w3-d2 .w3-d2-band .w3-zahlenband__text { margin-top: 10px; font-size: 16px; }
.w3-d2 .w3-d2-band .w3-zahlenband__item { padding: 4px clamp(16px, 2.4vw, 32px); }
.w3-d2 .w3-d2-band .w3-zahlenband__item:first-child { border-left: 1px solid var(--w3-linie-dunkel); }
@media (max-width: 900px) {
  .w3-d2-band { grid-template-columns: minmax(0, 1fr); }
  .w3-d2 .w3-d2-band .w3-zahlenband__item:first-child { padding-left: 0; border-left: 0; }
  .w3-d2 .w3-d2-band .w3-zahlenband__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
}
@media (max-width: 640px) {
  .w3-d2 .w3-d2-band .w3-zahlenband__liste { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .w3-d2 .w3-d2-band .w3-zahlenband__item { border-left: 0; padding-left: 0; padding-top: 16px; border-top: 1px solid var(--w3-linie-dunkel); }
  .w3-d2 .w3-d2-band .w3-zahlenband__item:first-child { border-top: 0; padding-top: 4px; }
  .w3-d2 .w3-d2-band .w3-zahlenband__zahl { display: inline-block; margin-right: 12px; font-size: 52px; }
  .w3-d2 .w3-d2-band .w3-zahlenband__text { display: inline-block; max-width: 11em; vertical-align: baseline; }
}

.w3-d2 .w3-chip { min-height: 36px; }

/* Referenzkarte: grosse Zahl als Blickfang, darunter Projektart, Ort, Leistung */
.w3-d2 .w3-referenzen { gap: 16px; }
.w3-d2 .w3-referenz { gap: 10px; padding: 22px 24px 18px; }
.w3-d2 .w3-referenz__kopf { align-items: center; }
.w3-d2 .w3-referenz__art { font-size: clamp(19px, 1.7vw, 21px); line-height: 1.2; }
.w3-d2 .w3-referenz__ort { margin-top: 3px; }
.w3-d2 .w3-referenz__daten { padding-top: 10px; gap: 4px; }
.w3-d2-ref__zahl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 2px; }
.w3-d2-ref__zahl strong {
  font-size: clamp(42px, 3.8vw, 50px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--w3-blau);
  background-image: var(--w3-verlauf-text-hell);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.w3-d2-ref__zahl > span { font-size: 15px; font-weight: 500; color: var(--w3-text-2); }
.w3-d2-ref__fuss { margin-top: 20px; font-size: 14px; color: var(--w3-text-2); }

/* ---------- FAQ in zwei Spalten ---------- */
.w3-d2-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
.w3-d2-faq__kopf { position: sticky; top: calc(var(--w3-kopf-h) + 32px); }
.w3-d2-faq__kopf > * + * { margin-top: 14px; }
.w3-d2-faq__kopf .w3-augenbraue { margin-bottom: 0; }
.w3-d2 .w3-d2-faq .w3-faq { max-width: none; margin: 0; }
.w3-d2 .w3-faq__item > summary { padding: 20px 0; font-size: clamp(18px, 1.7vw, 21px); }
.w3-d2 .w3-faq__antwort { padding-bottom: 22px; font-size: 18px; }
@media (max-width: 900px) {
  .w3-d2-faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .w3-d2-faq__kopf { position: static; }
}

/* ---------- CTA kompakt ---------- */
.w3-d2 .w3-cta-abschnitt { padding-block: clamp(16px, 3vw, 32px) clamp(72px, 7vw, 88px); }
.w3-d2 .w3-cta { padding: clamp(36px, 4.4vw, 52px) clamp(24px, 5vw, 64px); }
.w3-d2 .w3-cta :where(h2) { font-size: clamp(30px, 3.8vw, 48px); }
.w3-d2 .w3-cta__innen { gap: 14px; }
.w3-d2 .w3-cta .w3-aktionen { margin-top: 6px; }

/* ---------- Ueber uns ---------- */
.w3-d2-ueber { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.w3-d2-ueber__kopf { display: grid; gap: 18px; justify-items: start; }
.w3-d2-ueber__kopf .w3-augenbraue { margin: 0; }
.w3-d2 .w3-d2-ueber__kopf :where(h1) { font-size: clamp(36px, 4.5vw, 58px); }
.w3-d2-ueber__kopf .w3-glanz { white-space: normal; }
.w3-d2 .w3-d2-ueber__kopf .w3-lead { max-width: 30em; }
.w3-d2-zahlen__titel { font-size: 18px; line-height: 1.3; font-weight: 600; margin-bottom: 4px; color: var(--w3-auf-dunkel-2); }
.w3-d2-zahlen__liste { display: grid; }
.w3-d2-zahlen__zeile {
  display: grid; grid-template-columns: minmax(2.4em, auto) minmax(0, 1fr); gap: 4px 18px; align-items: center;
  padding-block: 12px;
  border-top: 1px solid var(--w3-linie-dunkel);
}
.w3-d2-zahlen__zahl { font-size: clamp(44px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.04em; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.w3-d2-zahlen__text { font-size: 16px; line-height: 1.35; color: var(--w3-auf-dunkel-2); }
@media (max-width: 900px) { .w3-d2-ueber { grid-template-columns: minmax(0, 1fr); align-items: start; } }

.w3-d2-gf__titel { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; margin: clamp(40px, 5vw, 56px) 0 20px; }
.w3-d2-gf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--w3-luecke); }
@media (max-width: 767px) { .w3-d2-gf { grid-template-columns: minmax(0, 1fr); } }

.w3-d2-punkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.w3-d2-punkt { display: grid; gap: 12px; align-content: start; padding-top: 24px; border-top: 2px solid var(--w3-text); }
.w3-d2-punkt__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(13, 93, 184, .1); color: var(--w3-blau); }
.w3-d2-punkt :where(h3) { font-size: clamp(22px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.w3-d2-punkt > p { font-size: 17px; line-height: 1.45; color: var(--w3-text-2); }
@media (max-width: 860px) { .w3-d2-punkte { grid-template-columns: minmax(0, 1fr); gap: 28px; } .w3-d2-punkt { padding-top: 20px; } }

/* ---------- Kontakt ---------- */
.w3-d2-kontakt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.w3-d2-wege { display: grid; gap: var(--w3-luecke); margin-top: 8px; }
.w3-d2-weg {
  position: relative;
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 18px; align-items: center;
  padding: 22px 24px;
  border-radius: var(--w3-r-kachel);
  background: var(--w3-flaeche);
  color: var(--w3-text);
  text-decoration: none;
  transition: box-shadow var(--w3-dauer) var(--w3-ease);
}
a.w3-d2-weg:hover { box-shadow: var(--w3-schatten-2); text-decoration: none; }
/* Telefon als Hauptweg: dunkel, Verlauf wie die CTA-Karte */
.w3-d2-weg--primaer { background: var(--w3-verlauf-karte); color: #fff; }
.w3-d2-weg--primaer .w3-d2-weg__art { color: rgba(255, 255, 255, .8); }
.w3-d2-weg--primaer .w3-d2-weg__pfeil { color: var(--w3-blau-hell-2); }
a.w3-d2-weg--primaer:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 22px 56px rgba(11, 30, 51, .4); }
.w3-d2-weg__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff; color: var(--w3-blau); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.w3-d2-weg__art { display: block; font-size: 14px; font-weight: 600; color: var(--w3-text-2); line-height: 1.3; }
.w3-d2-weg address { font-style: normal; }
.w3-d2-weg__wert { display: block; margin-top: 2px; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; font-style: normal; overflow-wrap: anywhere; }
.w3-d2-weg address .w3-d2-weg__wert { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.35; }
.w3-d2-weg__pfeil { font-size: 28px; line-height: 1; color: var(--w3-blau); }
.w3-d2-weg__pfeil::before { content: "\203A"; }
.w3-d2-formkachel { padding: clamp(24px, 3.4vw, 44px); border-radius: var(--w3-r-kachel); background: var(--w3-flaeche); }
.w3-d2-formkachel__kopf { display: grid; gap: 10px; margin-bottom: 24px; }
.w3-d2-formkachel__kopf .w3-augenbraue { margin: 0; }
.w3-d2-vorschau { font-size: 15px; line-height: 1.5; color: var(--w3-text-2); }
.w3-d2-vorschau .w3-chip { margin-right: 8px; vertical-align: 1px; }
.w3-d2-vorschau .w3-offen { display: inline-block; margin-top: 8px; }
.w3-d2 .w3-formular { max-width: none; gap: 16px; }
.w3-d2 .w3-formular .w3-feld__eingabe { min-height: 48px; }
.w3-d2 .w3-formular textarea.w3-feld__eingabe { min-height: 128px; }
.w3-d2 .w3-formular .w3-feld__hinweis { margin-top: 2px; }
.w3-d2 .w3-formular .w3-formular__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.w3-d2 .w3-formular__aktion .w3-feld__hinweis { flex: 1 1 280px; }
@media (max-width: 960px) { .w3-d2-kontakt { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 540px) { .w3-d2-weg { grid-template-columns: 44px minmax(0, 1fr); padding: 18px; } .w3-d2-weg__pfeil { display: none; } .w3-d2-weg__icon { width: 44px; height: 44px; } }

/* Lageskizze auf Navy-Buehne */
.w3-d2-lage { padding-block: clamp(48px, 5.6vw, 72px); }
.w3-d2-lage__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.w3-d2-lage__text { display: grid; gap: 16px; justify-items: start; }
.w3-d2-lage__text .w3-augenbraue { margin: 0; }
.w3-d2-lage__adresse { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 8px; font-style: normal; color: #fff; font-size: 18px; line-height: 1.4; }
.w3-d2-lage__adresse .w3-d2-weg__icon { background: rgba(255, 255, 255, .1); color: var(--w3-blau-hell); width: 44px; height: 44px; border-radius: 14px; box-shadow: none; }
.w3-d2-lage__karte { min-width: 0; }
.w3-d2-lage__rahmen { border-radius: var(--w3-r-kachel); background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset; overflow: hidden; }
.w3-d2-lage__rahmen svg { width: 100%; height: auto; }
.w3-d2-lage__karte figcaption { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--w3-auf-dunkel-2); }
.w3-d2-karte--mobil { display: none; }
@media (max-width: 1180px) { .w3-d2-lage__raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 679px) { .w3-d2-karte--desktop { display: none; } .w3-d2-karte--mobil { display: block; } }
/* Kartenfarben (Klassen im SVG) */
.w3-d2-k-r1 { fill: none; stroke: #fff; stroke-opacity: .05; stroke-width: 1; }
.w3-d2-k-r2 { fill: none; stroke: #fff; stroke-opacity: .1; stroke-width: 1; }
.w3-d2-k-wr { fill: none; stroke: #6CC4FF; stroke-opacity: .6; stroke-linejoin: round; }
.w3-d2-k-wf { fill: none; stroke: #0F3F78; stroke-linejoin: round; }
.w3-d2-k-ab { fill: none; stroke: #C7D6E8; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.w3-d2-k-t { font-family: var(--w3-font); fill: #fff; fill-opacity: .94; font-variant-numeric: tabular-nums; }
.w3-d2-k-t2 { fill-opacity: .76; }
.w3-d2-k-tw { fill: #8AD0FF; fill-opacity: 1; }
.w3-d2-k-tn { fill: #0B1E33; fill-opacity: 1; }
.w3-d2-k-b6 { font-weight: 600; } .w3-d2-k-b7 { font-weight: 700; } .w3-d2-k-b5 { font-weight: 500; }
.w3-d2-k-mi { text-anchor: middle; } .w3-d2-k-en { text-anchor: end; }
.w3-d2-k-chip { fill: #4DA3FF; }
.w3-d2-k-dreieck { fill: #10294A; stroke: #C7D6E8; stroke-width: 1.5; }
.w3-d2-k-kasten { fill: #0B1E33; stroke: #fff; stroke-opacity: .3; stroke-width: 1; }
.w3-d2-k-akzent { fill: #4DA3FF; }
.w3-d2-k-stiel { fill: none; stroke: #fff; stroke-opacity: .5; stroke-width: 1; }
.w3-d2-k-ring { fill: none; stroke: #4DA3FF; stroke-width: 1.5; }
.w3-d2-k-pin { fill: #4DA3FF; stroke: #fff; stroke-width: 1.5; }
.w3-d2-k-weiss { fill: #fff; }
.w3-d2-k-nord { fill: #fff; } .w3-d2-k-nord-o { fill: #0B1E33; stroke: #fff; stroke-width: 1.5; }
.w3-d2-k-ko { fill: #10294A; stroke: #fff; stroke-opacity: .6; stroke-width: 1.5; }
.w3-d2-k-pfeil { fill: none; stroke: #fff; stroke-opacity: .7; stroke-width: 1.5; stroke-linecap: round; }
.w3-d2-k-halo { stroke: #0F3F78; stroke-width: 4; stroke-linejoin: round; paint-order: stroke fill; }

/* ---------- Rechtsseiten ---------- */
.w3-d2-fakten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.w3-d2-fakten li { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--w3-r-pille); background: rgba(13, 93, 184, .1); color: var(--w3-blau); font-size: 14px; font-weight: 500; line-height: 1.2; }
.w3-d2 .w3-recht { padding-bottom: 8px; justify-content: start; }
/* Verzeichnis-Zelle steht von Anfang an (kein Layoutsprung, wenn das Skript sie fuellt); ohne JS gibt es keine Spalte */
.w3-d2 .w3-recht__nav:empty { display: block; }
html:not(.w3-js) .w3-d2 .w3-recht { grid-template-columns: minmax(0, 720px); }
html:not(.w3-js) .w3-d2 .w3-recht__nav { display: none; }
.w3-d2 .w3-recht__nav { max-height: calc(100vh - var(--w3-kopf-h) - 64px); overflow: auto; padding-right: 4px; }
.w3-d2 .w3-recht__nav a[aria-current="true"] { color: var(--w3-text); border-left-color: var(--w3-blau); font-weight: 600; }
.w3-d2 .w3-recht__text { font-size: 17px; line-height: 1.62; }
.w3-d2 .w3-recht__text :where(address) { padding: 16px 20px; border-radius: 16px; background: var(--w3-flaeche); line-height: 1.55; }
.w3-d2 .w3-recht__text :where(h2) { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--w3-linie); }
.w3-d2 .w3-recht__text :where(h2):first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.w3-d2 .w3-recht__text :where(h3) { margin-top: 28px; }
.w3-d2-hinweis { padding: 16px 20px; border-radius: 16px; background: var(--w3-flaeche); color: var(--w3-text-2); font-size: 15px; line-height: 1.5; }
.w3-d2-hinweis strong { color: var(--w3-text); }
.w3-d2 .w3-recht__tabelle caption { text-align: left; font-weight: 600; color: var(--w3-text); padding-bottom: 8px; }
.w3-d2 .w3-recht__tabelle--vier { font-size: 14.5px; line-height: 1.45; }
.w3-d2 .w3-recht__tabelle--vier th, .w3-d2 .w3-recht__tabelle--vier td { padding: 12px 12px 12px 0; width: auto; }
.w3-d2 .w3-recht__tabelle--vier thead th { font-size: 13px; color: var(--w3-text-2); }
@media (max-width: 700px) {
  .w3-d2 .w3-recht__tabelle--vier thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .w3-d2 .w3-recht__tabelle--vier, .w3-d2 .w3-recht__tabelle--vier tbody, .w3-d2 .w3-recht__tabelle--vier tr,
  .w3-d2 .w3-recht__tabelle--vier th, .w3-d2 .w3-recht__tabelle--vier td { display: block; width: auto; }
  .w3-d2 .w3-recht__tabelle--vier caption { display: block; width: 100%; }
  .w3-d2 .w3-recht__tabelle--vier tr { padding: 14px 0; border-bottom: 1px solid var(--w3-linie); }
  .w3-d2 .w3-recht__tabelle--vier th, .w3-d2 .w3-recht__tabelle--vier td { border: 0; padding: 3px 0; }
  .w3-d2 .w3-recht__tabelle--vier td::before { content: attr(data-titel); display: block; font-size: 13px; font-weight: 600; color: var(--w3-text); }
}
@media (max-width: 900px) {
  .w3-d2 .w3-recht__nav { max-height: none; overflow: visible; padding: 16px 18px; border-radius: 16px; background: var(--w3-flaeche); }
  .w3-d2 .w3-recht__nav ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .w3-d2 .w3-recht__nav a { border-left: 0; padding-left: 0; }
}
@media (max-width: 540px) { .w3-d2 .w3-recht__nav ol { grid-template-columns: minmax(0, 1fr); } }

/* 70-formular.css */
/* Formular-Bausteine und Rechtsseiten-Layout */
.w3-formular { display: grid; gap: 20px; max-width: 640px; }
.w3-formular--breit { max-width: none; }
.w3-formular__zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.w3-feld { display: grid; gap: 8px; min-width: 0; }
.w3-feld__label { font-size: 15px; font-weight: 600; color: var(--w3-text); line-height: 1.3; }
.w3-feld__label .w3-feld__pflicht { color: var(--w3-text-2); font-weight: 400; }
.w3-feld__eingabe {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--w3-linie);
  border-radius: var(--w3-r-feld);
  background: #fff;
  font-size: 17px;
  line-height: 1.3;
  color: var(--w3-text);
  transition: border-color var(--w3-dauer-kurz) var(--w3-ease-kurz), box-shadow var(--w3-dauer-kurz) var(--w3-ease-kurz);
  appearance: none;
  -webkit-appearance: none;
}
textarea.w3-feld__eingabe { min-height: 148px; resize: vertical; }
select.w3-feld__eingabe {
  padding-right: 44px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23515154' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 18px center / 12px no-repeat;
}
.w3-feld__eingabe::placeholder { color: #6E6E73; opacity: 1; }
.w3-feld__eingabe:hover { border-color: #AEAEB2; }
.w3-feld__eingabe:focus { outline: none; border-color: var(--w3-blau); box-shadow: 0 0 0 4px rgba(13, 93, 184, .18); }
.w3-feld__eingabe[aria-invalid="true"], .w3-feld--fehler .w3-feld__eingabe { border-color: var(--w3-fehler); }
.w3-feld__hinweis { font-size: 14px; line-height: 1.4; color: var(--w3-text-2); }
.w3-feld__fehler { font-size: 14px; line-height: 1.4; color: var(--w3-fehler); font-weight: 500; }
.w3-feld__fehler[hidden] { display: none; }

.w3-haken { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.45; color: var(--w3-text-2); }
.w3-haken input {
  appearance: none; -webkit-appearance: none;
  width: 24px; height: 24px; margin: 0;
  border: 1.5px solid #8E8E93; border-radius: 7px; background: #fff;
  display: grid; place-items: center;
  transition: background-color var(--w3-dauer-kurz) var(--w3-ease-kurz), border-color var(--w3-dauer-kurz) var(--w3-ease-kurz);
}
.w3-haken input::after {
  content: ""; width: 12px; height: 7px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0); transition: transform .25s var(--w3-ease);
}
.w3-haken input:checked { background: var(--w3-blau); border-color: var(--w3-blau); }
.w3-haken input:checked::after { transform: rotate(-45deg) scale(1); }
.w3-haken input:focus-visible { outline: 3px solid var(--w3-blau); outline-offset: 3px; }

.w3-formular__status { padding: 16px 20px; border-radius: var(--w3-r-feld); background: rgba(27, 127, 59, .1); color: #145C2B; font-size: 16px; line-height: 1.4; font-weight: 500; }
.w3-formular__status[hidden] { display: none; }
.w3-formular__status--fehler { background: rgba(179, 38, 30, .08); color: var(--w3-fehler); }
.w3-formular .w3-knopf { justify-self: start; min-height: 52px; padding: 0 32px; }
.w3-formular__honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .w3-formular__zeile { grid-template-columns: minmax(0, 1fr); } .w3-formular .w3-knopf { justify-self: stretch; } }

/* Rechtsseiten (Impressum, Datenschutz): schmaler Lesetext, Inhaltsverzeichnis links */
.w3-recht { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 720px); gap: clamp(32px, 6vw, 96px); justify-content: center; align-items: start; }
.w3-recht--ohne-nav { grid-template-columns: minmax(0, 720px); }
.w3-recht__nav { position: sticky; top: calc(var(--w3-kopf-h) + 32px); font-size: 14px; line-height: 1.4; }
.w3-recht__nav:empty { display: none; }
.w3-recht__nav-titel { font-weight: 600; color: var(--w3-text); margin-bottom: 12px; }
.w3-recht__nav ol { display: grid; gap: 4px; }
.w3-recht__nav a { display: block; padding: 6px 0 6px 14px; border-left: 2px solid var(--w3-linie); color: var(--w3-text-2); }
.w3-recht__nav a:hover { color: var(--w3-text); text-decoration: none; border-left-color: var(--w3-blau); }
.w3-recht__text { font-size: 17px; line-height: 1.6; color: var(--w3-text-2); }
.w3-recht__text > * + * { margin-top: 16px; }
.w3-recht__text :where(h2) { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.025em; color: var(--w3-text); margin-top: 56px; scroll-margin-top: calc(var(--w3-kopf-h) + 24px); }
.w3-recht__text :where(h2):first-child { margin-top: 0; }
.w3-recht__text :where(h3) { font-size: 19px; line-height: 1.3; color: var(--w3-text); margin-top: 32px; font-weight: 600; letter-spacing: -0.01em; }
.w3-recht__text :where(ul) { display: grid; gap: 8px; padding-left: 22px; list-style: disc; }
.w3-recht__text :where(ol) { display: grid; gap: 8px; padding-left: 22px; list-style: decimal; }
.w3-recht__text a { text-decoration: underline; text-underline-offset: 3px; }
.w3-recht__text :where(strong) { color: var(--w3-text); }
.w3-recht__text :where(address) { font-style: normal; color: var(--w3-text); }
.w3-recht__tabelle { width: 100%; border-collapse: collapse; font-size: 16px; }
.w3-recht__tabelle th, .w3-recht__tabelle td { padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--w3-linie); }
.w3-recht__tabelle th { color: var(--w3-text); font-weight: 600; width: 34%; }
@media (max-width: 900px) { .w3-recht { grid-template-columns: minmax(0, 1fr); } .w3-recht__nav { position: static; } }

/* 80-bewegung.css */
/* Bewegung: Ausgangszustaende nur unter html.w3-anim (gesetzt vom Kopfskript, nur ohne prefers-reduced-motion, vom Kernskript wieder entfernt,
   wenn GSAP fehlt). Ohne JS, mit reduced-motion oder ohne GSAP ist alles sofort im Endzustand sichtbar.
   Die Selektorliste der Einblendung steht hier UND in src/js/00-kern.js (W3.EIN) und muss gleich bleiben. */
html.w3-anim :is(
  [data-w3-ein],
  .w3-sektionskopf > *,
  .w3-aussage,
  .w3-zahlenband__item,
  .w3-kachel,
  .w3-leistung,
  .w3-referenz,
  .w3-person,
  .w3-zeitleiste__schritt,
  .w3-faq__item,
  .w3-cta__innen > *,
  .w3-formular > *,
  .w3-recht__text > *
):not(.is-ein) {
  opacity: 0;
  transform: translateY(24px);
}

/* Hero und Seitenkoepfe: Einblenden rein per CSS (kein Skript im Weg, Paket G P2-1). Gestaffelt 0,08 s, 0,8 s, einmal beim Laden. */
/* Startwert .01 statt 0: optisch gleich, der Text zaehlt aber ab dem ersten Zeichnen als sichtbar (LCP der Ueberschrift, gemessen 116 statt 492 ms) */
@keyframes w3-start-ein { from { opacity: .01; transform: translateY(24px); } to { opacity: 1; transform: none; } }
html.w3-anim :is(.w3-hero__kopf, .w3-hero__text, .w3-seitenkopf__innen) > * { animation: w3-start-ein .8s var(--w3-ease) both; }
html.w3-anim :is(.w3-hero__kopf, .w3-hero__text, .w3-seitenkopf__innen) > :nth-child(2) { animation-delay: .08s; }
html.w3-anim :is(.w3-hero__kopf, .w3-hero__text, .w3-seitenkopf__innen) > :nth-child(3) { animation-delay: .16s; }
html.w3-anim :is(.w3-hero__kopf, .w3-hero__text, .w3-seitenkopf__innen) > :nth-child(n+4) { animation-delay: .24s; }

/* Verlaufstext fuellt sich. Im Hero und in Seitenkoepfen laeuft die Fuellung per CSS (registrierte Eigenschaft), sonst per Skript. */
@property --w3-fuell { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@keyframes w3-glanz-fuell { from { --w3-fuell: 0%; } to { --w3-fuell: 100%; } }
html.w3-anim .w3-glanz:not(.is-gefuellt) { --w3-fuell: 0%; }
html.w3-anim :is(.w3-hero__kopf, .w3-seitenkopf__innen) .w3-glanz { animation: w3-glanz-fuell 1.2s var(--w3-ease) .35s both; }

/* Bild-Skalierung 1,06 -> 1,0 (Bildausschnitt, nicht Layout) */
html.w3-anim .w3-bild:not([data-w3-skala="aus"]):not(.is-skaliert) img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 90-nachbesserung.css */
/* Paket G: Nachbesserung nach der Gegenpruefung (pruefung\BEFUNDE.md). Steht nach allen Baustein-Dateien, ueberschreibt nur gezielt.
   Inhalt: Flaechenlogik (jede Seite beginnt mit einer Navy-Buehne), Seitenkoepfe, Phasenband und Ring auf Navy, Ueber uns, Lage-Kachel,
   Hero-Hoehe, Beleg-Zeile, Team-Kacheln, Sticky-Erzaehlung (Mini-Karten mobil, Tablet-Ueberdeckung), Abstaende vor der CTA-Karte, Fusszeile. */

/* ------------------------------------------------------------------ Hilfen */
.w3-vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ Flaechenlogik: Seitenkopf = Navy-Buehne
   Start: Hero mit 3D. Unterseiten: flacher (rund 54 % der Bildschirmhoehe), Rechtsseiten und Kontakt noch kleiner. Feines Raster kommt von .w3-buehne. */
.w3-seitenkopf.w3-buehne {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(380px, 54vh, 560px);
  min-height: clamp(380px, 54svh, 560px);
  padding-top: calc(var(--w3-kopf-h) + clamp(32px, 3.6vw, 52px));
  padding-bottom: clamp(36px, 4vw, 56px);
}
.w3-seitenkopf.w3-buehne > .w3-wrap { width: min(100% - 2 * var(--w3-gutter), var(--w3-breite)); }
.w3-seitenkopf--kompakt.w3-buehne {
  min-height: clamp(260px, 32vh, 340px);
  min-height: clamp(260px, 32svh, 340px);
}
@media (max-width: 767px) {
  .w3-seitenkopf.w3-buehne,
  .w3-seitenkopf--kompakt.w3-buehne { min-height: 0; padding-top: calc(var(--w3-kopf-h) + 32px); padding-bottom: 36px; }
}
.w3-seitenkopf.w3-buehne .w3-d2-fakten li { background: rgba(255, 255, 255, .1); color: #fff; }
.w3-d2-hinweis { max-width: none; margin-bottom: clamp(24px, 3vw, 36px); }

/* Rechtsseiten: Text beginnt mit Luft unter der Buehne */
.w3-d2 .w3-abschnitt--recht { padding-top: clamp(32px, 4vw, 56px); }

/* Leistungen: Phasenband auf Navy. Zahlen 1 bis 3 sind die Phasen, "N Leistungen" steht ausgeschrieben, die Summe 8 ist abgesetzt. */
.w3-buehne .w3-d1-phasen::before { background: var(--w3-verlauf-text-dunkel); }
.w3-buehne .w3-d1-phasen a:not(.w3-knopf):not(.w3-link) { background: rgba(255, 255, 255, .07); color: #fff; }
.w3-buehne .w3-d1-phasen a:not(.w3-knopf):not(.w3-link):hover { background: rgba(255, 255, 255, .12); box-shadow: none; }
.w3-d1-kopf .w3-seitenkopf__innen > .w3-d1-kopf__grafik.w3-d1-phasen { max-width: 470px; }
.w3-buehne .w3-d1-phasen__text small { font-size: 13.5px; }
.w3-buehne .w3-d1-phasen__zahl { box-shadow: 0 0 0 6px var(--w3-navy); }
.w3-buehne .w3-d1-phasen__text small { color: rgba(255, 255, 255, .8); }
.w3-buehne .w3-d1-phasen__summe { background: rgba(77, 163, 255, .16); box-shadow: inset 0 0 0 1px rgba(77, 163, 255, .55); }
.w3-buehne .w3-d1-phasen__summe .w3-d1-phasen__zahl { box-shadow: none; }

/* Arbeitsweise: Ring auf Navy */
.w3-buehne .w3-d1-ring__spur { stroke: rgba(255, 255, 255, .16); }
.w3-buehne .w3-d1-ring__bogen { stroke: var(--w3-blau-hell); }
.w3-buehne .w3-d1-ring__disc { fill: var(--w3-navy); stroke: var(--w3-blau-hell); }
.w3-buehne .w3-d1-ring__nr { fill: var(--w3-blau-hell); }
.w3-buehne .w3-d1-ring__mitte strong { color: #fff; }
.w3-buehne .w3-d1-ring__mitte > span { color: var(--w3-auf-dunkel-2); }

/* Ueber uns: die zwei Geschaeftsfuehrer als dunkle Textkarten auf Weiss (Buehne ist nur der Seitenkopf; Karten in 95-umsetzung.css) */
.w3-d2 .w3-d2-gf__titel { margin-top: 0; }

/* Kontakt: Lageskizze als dunkle Kachel (Radius wie CTA) mit Weissraum ringsum */
.w3-d2-lagesec .w3-d2-lage {
  border-radius: var(--w3-r-cta);
  padding: clamp(28px, 4.4vw, 56px);
  box-shadow: var(--w3-schatten-2);
}

/* ------------------------------------------------------------------ Start: Hero */
/* H2 (MM 02.10.2026: Abstand zur Kopfleiste "zu gross gefuehlt"): Hero-Inhalt (Text und 3D-Grafik) beginnt 48 bis 72 px unter der Kopfleiste
   (1440 x 900: 58 px), oben ausgerichtet statt mittig. Die Hero-Hoehe ist Bildschirmhoehe minus 96 px (hoechstens 880 px), damit der Anfang
   des naechsten Abschnitts am unteren Rand zu sehen ist und zum Weiterscrollen einlaedt (frueher: Hero = ganze Bildschirmhoehe, bis 1200 px).
   Ist der Inhalt hoeher (niedrige Fenster), waechst der Hero mit. */
.w3-d1-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: clamp(560px, calc(100vh - 96px), 880px);
  min-height: clamp(560px, calc(100svh - 96px), 880px);
  padding-top: calc(var(--w3-kopf-h) + clamp(48px, 6.4vh, 72px));
  padding-top: calc(var(--w3-kopf-h) + clamp(48px, 6.4svh, 72px));
  padding-bottom: clamp(24px, 3vh, 32px);
}
/* der naechste Abschnitt lugt mit Eyebrow und Ueberschrift unter dem Hero hervor */
.w3-d1-hero + .w3-d1-erz { padding-top: clamp(36px, 3.4vw, 48px); }
.w3-d1-hero > .w3-wrap { width: min(100% - 2 * var(--w3-gutter), var(--w3-breite)); }
.w3-d1-hero__raster { align-items: start; }
@media (max-width: 1000px) {
  .w3-d1-hero { min-height: 0; padding-top: calc(var(--w3-kopf-h) + 40px); padding-bottom: 48px; }
}
@media (max-width: 767px) { .w3-d1-hero { padding-top: calc(var(--w3-kopf-h) + 32px); } }

/* P3-8: Belegzeile unter der Einleitung: drei Zahlen aus dem Zahlenband, klein gesetzt (nur belegte Werte) */
.w3-d1-beleg { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px clamp(20px, 2.6vw, 36px); margin: -4px 0 0; padding-top: 18px; border-top: 1px solid var(--w3-linie-dunkel); max-width: 34em; font-size: 13px; line-height: 1.35; color: var(--w3-auf-dunkel-2); }
.w3-d1-beleg li { display: grid; gap: 2px; align-content: start; max-width: 11em; }
.w3-d1-beleg strong { display: block; color: #fff; font-size: clamp(22px, 2vw, 26px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .w3-d1-beleg { gap: 4px 14px; font-size: 12.5px; } }

/* ------------------------------------------------------------------ Start: Sticky-Erzaehlung */
/* P2-7: zwischen 1000 und 1280 px liegt die Karte hoeher, damit Ziffer und Titel der Phase nicht ueber den LV-Zeilen stehen */
@media (min-width: 1001px) and (max-width: 1280px) {
  .w3-d1-erz .w3-erzaehlung__spur { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .w3-d1-erz .w3-erzaehlung__karte { aspect-ratio: 1 / 1.08; }
  .w3-d1-erz .w3-erzaehlung__ziffer { font-size: 44px; }
  .w3-d1-erz .w3-erzaehlung__chips li { padding: 4px 9px; font-size: 12.5px; }
}

/* P2-6: mobil zeigt jede Phase eine kompakte LV-Karte (statt die Grafik wegzulassen) */
.w3-d1-mini { display: none; }
@media (max-width: 1000px) {
  .w3-d1-mini {
    display: grid; gap: 5px; margin-top: 16px; padding: 12px;
    border-radius: 20px; background: var(--w3-navy); color: #fff;
    font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums;
    box-shadow: var(--w3-schatten-1);
    max-width: 520px;
  }
  .w3-d1-mini__zeile {
    display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 8px; align-items: center;
    padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .07);
  }
  .w3-d1-mini__oz { color: rgba(255, 255, 255, .72); }
  .w3-d1-mini__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .w3-d1-mini__stand { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--w3-blau-hell-2); white-space: nowrap; min-height: 14px; }
  .w3-d1-mini__stand:not(:empty):not(:has(.w3-d1-lv__balken))::before {
    content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none;
    background: rgba(77, 163, 255, .28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.2l2.3 2.3 4.5-4.8' fill='none' stroke='%23A8D4FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  }
  .w3-d1-mini__zeile--nt, .w3-d1-mini__zeile--sr { background: transparent; box-shadow: inset 0 0 0 1px rgba(77, 163, 255, .55); }
  .w3-d1-mini__zeile--sr { background: rgba(77, 163, 255, .16); }
  .w3-d1-mini .w3-d1-lv__balken { width: 48px; }
  /* Zeilen fuellen sich beim Einscrollen (Klasse is-an setzt data-w3-d1-zeichnen) */
  .w3-d1-mini__stand { transition: opacity .5s var(--w3-ease); }
  .w3-d1-mini__zeile:nth-child(2) .w3-d1-mini__stand { transition-delay: .1s; }
  .w3-d1-mini__zeile:nth-child(3) .w3-d1-mini__stand { transition-delay: .2s; }
  .w3-d1-mini__zeile:nth-child(4) .w3-d1-mini__stand { transition-delay: .3s; }
  html.w3-anim .w3-d1-mini:not(.is-an) .w3-d1-mini__stand { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .w3-d1-mini__stand { transition: none; } }

/* ------------------------------------------------------------------ Start: Team-Kacheln (P2-8) */
.w3-d1-team .w3-d1-team__format { font-size: clamp(22px, 2vw, 28px); line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.w3-d1-team .w3-kachel__text { overflow-wrap: break-word; hyphens: manual; }

/* ------------------------------------------------------------------ Leistungen: Kartentitel */
.w3-d1-kachel .w3-kachel__titel { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }

/* ------------------------------------------------------------------ gleicher Abstand letzter Abschnitt zur CTA-Karte: 96 px (P3-4) */
.w3-d1-cta { padding-top: clamp(56px, 6.67vw, 96px); }
.w3-d2 .w3-cta-abschnitt { padding-top: calc(clamp(56px, 6.67vw, 96px) - clamp(40px, 4.4vw, 60px)); }


/* Kontext-Links am Ende eines Abschnitts (Arbeitsweise, Referenzen, Ueber uns; Paket G, P3-9 c) */
.w3-mehr { margin-top: clamp(24px, 3vw, 36px); }


/* ================================================================== Paket H2 (Abnahme 02.10.2026, WEB-W3-261002 Nr. 6 bis 11) */

/* Abschnittsabstand: Apple-grosszuegig, nicht leer. Gleicher Wert wie vor der CTA-Karte (96 px bei 1440 px Breite). */
.w3-d1-abschnitt { padding-top: clamp(56px, 6.67vw, 96px); }
.w3-d1-abschnitt--unten { padding-bottom: clamp(56px, 6.67vw, 96px); }

/* Sticky-Erzaehlung (Start): Scrollweg je Phase 42 % der Bildschirmhoehe (MM 02.10.2026 WEB-W3-261002 Nr. 12: kuerzer, vorher 64 %), damit auf grossen Bildschirmen nicht mehrere Phasen
   auf einmal verbraucht werden. Der Text einer Phase beginnt an deren Oberkante, die Phase wird aktiv, wenn diese Oberkante die
   Bildschirmmitte erreicht (31-erzaehlung.js). */
@media (min-width: 1001px) {
  .w3-d1-erz .w3-erzaehlung__schritt,
  .w3-d1-erz .w3-erzaehlung__schritt:first-child { min-height: 42vh; padding-block: 0 24px; justify-content: flex-start; }
  .w3-d1-erz .w3-erzaehlung__schritt:last-child { min-height: 30vh; }
  .w3-d1-erz .w3-erzaehlung__schritt::before { top: 2px; bottom: auto; height: min(100% - 8px, 11.5rem); }
}

/* Zeitleiste (Arbeitsweise): die Linie waechst mit dem Schritt, nicht ruckartig */
.w3-zeitleiste[data-w3-d1-fortschritt]::after { transition: transform .9s var(--w3-ease); }

/* Referenzkarten: Volumen des Loses als Blickfang, Objekte ab 1 Mio. EUR als dunkle Kachel vorn */
.w3-referenz--mio { background: var(--w3-navy); box-shadow: none; }
.w3-referenz--mio:hover { box-shadow: var(--w3-schatten-2); }
.w3-referenz--mio .w3-referenz__art { color: #fff; }
.w3-referenz--mio .w3-referenz__ort,
.w3-referenz--mio .w3-referenz__jahr,
.w3-referenz--mio .w3-d2-ref__zahl > span,
.w3-referenz--mio .w3-referenz__daten dt { color: var(--w3-auf-dunkel-2); }
.w3-referenz--mio .w3-referenz__daten dd { color: #fff; }
.w3-referenz--mio .w3-referenz__daten { border-top-color: var(--w3-linie-dunkel); }
.w3-referenz--mio .w3-chip { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }
.w3-referenz--mio .w3-d2-ref__zahl strong { background-image: var(--w3-verlauf-text-dunkel); color: var(--w3-blau-hell); }
.w3-d2-ref__zahl strong { white-space: nowrap; }
.w3-d2-ref__zahl > span { max-width: 14em; line-height: 1.3; }
.w3-d1-referenzen .w3-d2-ref__zahl { margin-top: 0; }
/* Zahlenband der Referenzseite: vier Zaehler */
.w3-d2 .w3-d2-band .w3-zahlenband__liste { --w3-spalten: 4; }
.w3-d2 .w3-d2-band .w3-zahlenband__zahl { font-size: clamp(32px, 3.3vw, 46px); }
.w3-d2 .w3-d2-band .w3-zahlenband__item { padding-inline: clamp(12px, 1.8vw, 24px); }
.w3-d2 .w3-d2-band .w3-zahlenband__zahl .w3-zahl__einheit { font-size: .5em; margin-left: .15em; letter-spacing: 0; }
@media (max-width: 900px) {
  .w3-d2 .w3-d2-band .w3-zahlenband__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .w3-d2 .w3-d2-band .w3-zahlenband__item:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  .w3-d2 .w3-d2-band .w3-zahlenband__liste { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}

/* 95-umsetzung.css */
/* Phase C (MM 03.10.2026, Chat; WEB-W3-261003 Nr. 4 bis 7, VORSCHLAEGE P1-4 und P1-6): steht nach allen anderen Dateien.
   Inhalt: zwei dunkle Textkarten statt Portraets (Ueber uns), Strichgrafik statt Symbolbild (Arbeitsweise), die zehnte Referenzkarte ueber die ganze Reihe (V3),
   Zeilenlaenge hoechstens 60 Zeichen (28 em), Lageskizze mobil mindestens 11 px, Linkhoehe der Fusszeile bleibt unveraendert. */

/* Ueber uns: zwei dunkle Textkarten (Kachel dunkel mit Raster), Name gross, Profil unten abgesetzt */
.w3-d2-gf__karte { min-height: clamp(240px, 21vw, 280px); gap: 10px; justify-content: flex-start; --w3-kp: clamp(28px, 3.2vw, 44px); }
.w3-d2-gf__rolle { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--w3-blau-hell); }
.w3-d2-gf__name { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 700; color: #fff; }
.w3-d2-gf__profil { margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--w3-linie-dunkel); font-size: 17px; line-height: 1.5; color: var(--w3-auf-dunkel-2); max-width: 30em; }
@media (max-width: 767px) { .w3-d2-gf__karte { min-height: 0; gap: 12px; } }

/* Arbeitsweise: dunkle Rollenkachel mit Strichgrafik statt Symbolbild */
.w3-d1-rolle .w3-d1-grafik { margin-bottom: 10px; }
.w3-d1-rolle .w3-d1-grafik svg { max-width: 230px; max-height: 100px; }

/* Referenzen (V3): zehnte Karte ueber die ganze Reihe, nur bei drei Spalten */
@media (min-width: 1101px) {
  #referenzen-liste > .w3-referenz:last-child:nth-child(3n+1) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.3fr); grid-template-rows: auto auto; align-items: center; column-gap: 40px; row-gap: 10px; padding: 28px 32px; }
  #referenzen-liste > .w3-referenz:last-child:nth-child(3n+1) > .w3-referenz__kopf { grid-column: 1; grid-row: 1; align-self: end; justify-content: flex-start; gap: 14px; }
  #referenzen-liste > .w3-referenz:last-child:nth-child(3n+1) > .w3-d2-ref__zahl { grid-column: 1; grid-row: 2; align-self: start; }
  #referenzen-liste > .w3-referenz:last-child:nth-child(3n+1) > div:not(.w3-referenz__kopf) { grid-column: 2; grid-row: 1 / span 2; }
  #referenzen-liste > .w3-referenz:last-child:nth-child(3n+1) > .w3-referenz__daten { grid-column: 3; grid-row: 1 / span 2; border-top: 0; padding: 0 0 0 32px; border-left: 1px solid var(--w3-linie); }
}

/* P1-6: Beschriftung der Lageskizze mobil mindestens 11 px gerendert (bei 360 px Breite: 14,6 Einheiten x 0,756; bei 390 px 12,2 px) */
.w3-d2-karte--mobil text { font-size: 14.6px; }

/* P1-4: Zeilenlaenge hoechstens 60 Zeichen (VORSCHLAEGE: 28 em ergab 59 bei 17 px; auf Ueber uns bei 18 px 61 Zeichen, deshalb 27 em) */
.w3-faq__antwort p { max-width: 27em; }
.w3-d2 .w3-d2-kopf .w3-lead { max-width: 27em; }
.w3-d2-ref__fuss { max-width: 27em; }

/* F16 A (MM 03.10.2026, P2-7): Fusszeilenlinks mobil mindestens 24 px hoch (WCAG 2.2, 2.5.8); Inhalt und Abstaende sonst unveraendert */
@media (max-width: 767px) {
  .w3-fuss a { display: inline-block; padding-block: 5px; }
}

/* 96-v6.css */
/* Webseite 3.0 Fassung v6 (MM 03.10.2026): aktiver Menuepunkt und Phasenband. Nur Tokens, kein Orange. */

/* 1. Kopfleiste: aktiver Menuepunkt. Unterstrich 2 px in Akzentfarbe (hell: --w3-blau, dunkel: --w3-blau-hell), volle Deckkraft, Gewicht 600;
      die uebrigen Punkte sind leicht zurueckgenommen (Deckkraft .74, Kontrast bleibt ueber 4,5:1). */
.w3-nav__link { position: relative; opacity: .74; }
.w3-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 11px; height: 2px; border-radius: 2px;
  background: var(--w3-blau); transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform var(--w3-dauer-kurz) var(--w3-ease-kurz);
}
html[data-w3-kopfthema="dunkel"] .w3-nav__link::after { background: var(--w3-blau-hell); }
.w3-nav__link:hover { opacity: 1; }
.w3-nav__link[aria-current="page"] { opacity: 1; font-weight: 600; }
.w3-nav__link[aria-current="page"]::after { transform: scaleX(1); }
html:not(.w3-js) .w3-nav__link::after { bottom: 2px; }
/* Kontakt (Knopf): aktiv = Ring in Akzentfarbe mit 2 px Abstand */
.w3-nav__kontakt a[aria-current="page"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--w3-blau); }
html[data-w3-kopfthema="dunkel"] .w3-nav__kontakt a[aria-current="page"] { box-shadow: 0 0 0 2px var(--w3-navy), 0 0 0 4px var(--w3-blau-hell); }

/* Handy-Menue: aktiver Punkt mit Balken links (4 px) und Gewicht 700, die uebrigen leichter (500, Deckkraft .78) */
@media (max-width: 860px) {
  .w3-nav__link { padding-left: 20px; font-weight: 500; opacity: .78; }
  .w3-nav__link::after {
    left: 0; right: auto; top: 16px; bottom: 16px; width: 4px; height: auto;
    transform: scaleY(0); transform-origin: 50% 50%;
  }
  .w3-nav__link[aria-current="page"] { font-weight: 700; opacity: 1; }
  .w3-nav__link[aria-current="page"]::after { transform: scaleY(1); }
  .w3-nav__kontakt a[aria-current="page"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--w3-blau); }
  html[data-w3-kopfthema="dunkel"] .w3-nav__kontakt a[aria-current="page"] { box-shadow: 0 0 0 3px var(--w3-navy), 0 0 0 5px var(--w3-blau-hell); }
}
html:not(.w3-js) .w3-nav__link { padding-left: 0; font-weight: 500; opacity: .74; }
html:not(.w3-js) .w3-nav__link[aria-current="page"] { font-weight: 600; opacity: 1; }

/* 2. Leistungen, Seitenkopf: Phase 1, 2, 3 durchgezogen verbunden, von Phase 3 zur Summe gestrichelt (8 ist die Summe, kein vierter Schritt).
      Die Linie besteht aus Teilstuecken je Zeile (laeuft mit der Zeilenhoehe mit); vor der Summe steht mehr Abstand (28 statt 10 px). */
.w3-d1-phasen::before { content: none; }
.w3-d1-phasen > li:last-child { margin-top: 18px; }
.w3-d1-phasen > li::before, .w3-d1-phasen > li::after {
  content: ""; position: absolute; left: 33px; width: 2px; pointer-events: none; border-radius: 2px;
  background: var(--w3-blau); transform-origin: 50% 0;
  transition: transform .5s var(--w3-ease);
}
.w3-buehne .w3-d1-phasen > li::before, .w3-buehne .w3-d1-phasen > li::after { background: var(--w3-blau-hell); }
.w3-d1-phasen > li:not(:last-child)::after { top: 50%; bottom: -10px; }
.w3-d1-phasen > li:nth-child(3)::after { bottom: 0; }
.w3-d1-phasen > li:nth-child(2)::before, .w3-d1-phasen > li:nth-child(3)::before { top: 0; bottom: 50%; }
.w3-d1-phasen > li:nth-child(1)::before { content: none; }
.w3-d1-phasen > li:last-child::after { content: none; }
.w3-d1-phasen > li:last-child::before {
  top: -28px; bottom: 50%; width: 0; background: none; border-left: 2px dashed var(--w3-blau); border-radius: 0;
}
.w3-buehne .w3-d1-phasen > li:last-child::before { border-left-color: var(--w3-blau-hell); background: none; }
html.w3-anim .w3-d1-phasen:not(.is-an) > li::before, html.w3-anim .w3-d1-phasen:not(.is-an) > li::after { transform: scaleY(0); }
.w3-d1-phasen > li:nth-child(1)::after { transition-delay: .2s; }
.w3-d1-phasen > li:nth-child(2)::before { transition-delay: .5s; }
.w3-d1-phasen > li:nth-child(2)::after { transition-delay: .7s; }
.w3-d1-phasen > li:nth-child(3)::before { transition-delay: 1s; }
.w3-d1-phasen > li:nth-child(3)::after { transition-delay: 1.2s; }
.w3-d1-phasen > li:last-child::before { transition-delay: 1.5s; }
@media (prefers-reduced-motion: reduce) {
  .w3-nav__link::after, .w3-d1-phasen > li::before, .w3-d1-phasen > li::after { transition: none; }
}

/* 97-v7.css */
/* Webseite 3.0 Fassung v7 (MM 03.10.2026, WEB-W3-261003-V7): deckendes Handy-Menue und Symbol-Links der Fusszeile. Nur Tokens, kein Orange. */

/* 1. Handy-Menue wie apple.com am Handy: Vollflaeche in der Farbe der Buehne, Deckkraft 1, kein Blur, Seitenhintergrund nicht erkennbar.
      Ersetzt rgba(...,.97) plus Blur aus 20-kopf.css (dort schien der Seiteninhalt zu 3 Prozent durch). */
@media (max-width: 860px) {
  .w3-js .w3-nav {
    background: var(--w3-weiss);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overscroll-behavior: contain;
  }
  html[data-w3-kopfthema="dunkel"] .w3-nav { background: var(--w3-navy); }
  html.w3-menue-offen .w3-kopf {
    background: var(--w3-weiss);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html.w3-menue-offen[data-w3-kopfthema="dunkel"] .w3-kopf { background: var(--w3-navy); }
  /* Seiteninhalt bei offenem Menue nicht scrollbar (auch Safari/iOS: Koerper mit sperren) */
  html.w3-menue-offen, html.w3-menue-offen body { overflow: hidden; overscroll-behavior: none; }
}

/* 2. Fusszeile: LinkedIn und Instagram als kleine, ruhige Symbol-Links unter der Spalte Unternehmen. Eigene SVG (currentColor), kein Skript, keine Einbettung.
      Trefferflaeche 32 px (mobil 40 px, mindestens 24 px), Symbolfarbe --w3-text-2 auf --w3-flaeche (Kontrast ueber 3:1), Fokus ueber den allgemeinen Fokusring. */
.w3-fuss__social { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 0 -7px; padding: 0; list-style: none; }
.w3-fuss__social li { margin: 0; padding: 0; }
.w3-fuss .w3-fuss__social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--w3-text-2);
  text-decoration: none;
  transition: color var(--w3-dauer-kurz) var(--w3-ease-kurz), background-color var(--w3-dauer-kurz) var(--w3-ease-kurz);
}
.w3-fuss .w3-fuss__social-link:hover { color: var(--w3-text); background-color: rgba(0, 0, 0, .06); text-decoration: none; }
.w3-fuss__social-link svg { display: block; width: 18px; height: 18px; flex: none; }
@media (max-width: 767px) {
  .w3-fuss__social { margin-left: -9px; }
  .w3-fuss .w3-fuss__social-link { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .w3-fuss .w3-fuss__social-link { transition: none; } }

/* rohbau.css */
/* Webseite 3.0, Baustein w3-rohbau (Paket B). Nur Klassen w3-rohbau*, Werte über Tokens (Rückfallwerte aus BRIEF.md). */
.w3-rohbau {
  --_navy: var(--w3-navy, #0B1E33);
  --_navy2: var(--w3-navy-2, #10294A);
  --_blau: var(--w3-blau, #0D5DB8);
  --_hell: var(--w3-blau-hell, #4DA3FF);
  --_text: #fff;
  --_text2: #B8C4D3;
  /* Farbe je Bauteil (Legende der LV-Zeilen und Beschriftungen, gleiche Werte wie F in rohbau3d.js) */
  --rb-aushub: #D9B36B;
  --rb-fundament: #4D83F2;
  --rb-sohle: #2BC297;
  --rb-aufkantung: #B895FB;
  --rb-gelaende: #B3A38D;
  position: relative;
  width: 100%;
  max-width: 594px;
  color: var(--_text);
  font-family: var(--w3-font, "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
  font-variant-numeric: tabular-nums;
}

.w3-rohbau__hilfe { margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: var(--_text2); }

/* Bühne: niedrig (max. 360 px), Canvas transparent auf der Navy-Fläche */
.w3-rohbau__buehne {
  position: relative;
  width: 100%;
  aspect-ratio: 33 / 20;
  max-height: 360px;
  container-type: size;
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 38%, rgba(77, 163, 255, .10) 0%, rgba(77, 163, 255, 0) 62%), rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  isolation: isolate;
  touch-action: pan-y;
}
.w3-rohbau__buehne:focus-visible { outline: 2px solid var(--_hell); outline-offset: 3px; }
/* weicher Bodenschatten, tiefer bei Hover/Fokus */
.w3-rohbau__buehne::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 3%; height: 11%; z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0));
  opacity: .55; transform: scale(.92); transition: opacity .7s ease, transform .7s ease; pointer-events: none;
}
.w3-rohbau.is-hover .w3-rohbau__buehne::after, .w3-rohbau__buehne:focus-visible::after { opacity: 1; transform: scale(1.04); }
.w3-rohbau__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Standbild und feste Beschriftungen: Rückfall ohne WebGL oder JS */
.w3-rohbau__still { position: absolute; left: 50%; top: 50%; width: min(100%, 165cqh); aspect-ratio: 33 / 20; transform: translate(-50%, -50%); }
.w3-rohbau__standbild { display: block; width: 100%; height: 100%; object-fit: contain; }
.w3-rohbau__statisch { list-style: none; margin: 0; padding: 0; }
.w3-rohbau__statisch li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.w3-rohbau__buehne.is-3d .w3-rohbau__still { display: none; }

/* Beschriftungen über der Szene (projiziert) */
.w3-rohbau__etiketten, .w3-rohbau__leitungen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.w3-rohbau__leitungen line { stroke: rgba(242, 247, 255, .6); stroke-width: 1; }
.w3-rohbau__leitungen circle { fill: var(--_hell); stroke: #fff; stroke-width: 1; }
.w3-rohbau__etikett, .w3-rohbau__statisch .w3-rohbau__etikett {
  display: inline-block; white-space: nowrap; font-size: 13px; line-height: 1.25; font-weight: 500; color: #fff;
  padding: 4px 9px; border-radius: 8px; background: rgba(11, 30, 51, .9);   /* weiß auf Navy .9: auch über hellem Sand mindestens 9:1 */
  box-shadow: inset 0 0 0 1.5px var(--f, rgba(255, 255, 255, .18));
}
.w3-rohbau__etiketten .w3-rohbau__etikett { position: absolute; left: 0; top: 0; will-change: transform; animation: w3-rohbau-ein .35s ease both; }
.w3-rohbau__etikett--stark { background: rgba(11, 30, 51, .94); box-shadow: inset 0 0 0 2px var(--f, var(--_hell)); font-weight: 600; }
@keyframes w3-rohbau-ein { from { opacity: 0; } to { opacity: 1; } }

/* LV-Auszug */
.w3-rohbau__liste { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.w3-rohbau__wahl {
  display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: baseline; width: 100%;
  margin: 0; padding: 10px 14px; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
  font: inherit; font-size: 15px; line-height: 1.3; color: var(--_text); background: rgba(255, 255, 255, .05);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.w3-rohbau__wahl:disabled { cursor: default; }
.w3-rohbau__wahl:not(:disabled):hover { background: rgba(255, 255, 255, .10); }
.w3-rohbau__wahl:focus-visible { outline: 2px solid var(--_hell); outline-offset: 2px; }
.w3-rohbau__wahl[data-teil="aushub"] { --rb-f: var(--rb-aushub); }
.w3-rohbau__wahl[data-teil="fundament"] { --rb-f: var(--rb-fundament); }
.w3-rohbau__wahl[data-teil="sohle"] { --rb-f: var(--rb-sohle); }
.w3-rohbau__wahl[data-teil="aufkantung"] { --rb-f: var(--rb-aufkantung); }
.w3-rohbau__wahl[data-teil="gesamt"] { --rb-f: rgba(255, 255, 255, .78); }
/* gewählt: Fläche aufgehellt, Rand in der Farbe des Bauteils (Blau-Füllung entfällt, sonst verschwindet der Farbpunkt) */
.w3-rohbau__wahl[aria-pressed="true"] { background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 2px var(--rb-f, var(--_hell)); }
.w3-rohbau__oz { font-size: 13px; color: var(--_text2); }
.w3-rohbau__wahl[aria-pressed="true"] .w3-rohbau__oz { color: #fff; }
/* Farbpunkt als Legende vor dem Text (nicht in der schmalen OZ-Spalte, damit Seiten mit eigener Spaltenbreite nichts ändern müssen) */
.w3-rohbau__text::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin: 0 9px 0 0; border-radius: 50%; vertical-align: -0.5px;
  background: var(--rb-f, var(--_hell)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}
.w3-rohbau__wahl--summe .w3-rohbau__text::before {
  width: 26px; height: 10px; border-radius: 5px; margin-right: 9px;
  background: linear-gradient(90deg, var(--rb-fundament) 0 33.4%, var(--rb-sohle) 33.4% 66.7%, var(--rb-aufkantung) 66.7% 100%);
}
.w3-rohbau__menge { font-weight: 600; white-space: nowrap; }
.w3-rohbau__wahl--summe { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.w3-rohbau__vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Rechenwege: ohne JS alle lesbar, mit JS nur der gewählte */
.w3-rohbau__rechenwege { margin-top: 12px; }
.w3-rohbau__rechenweg { margin: 0 0 6px; font-size: 14px; line-height: 1.45; color: var(--_text2); }
.w3-rohbau__rechenweg strong { display: block; color: #fff; font-weight: 600; }
.w3-rohbau.is-js .w3-rohbau__rechenweg { display: none; margin: 0; }
.w3-rohbau.is-js .w3-rohbau__rechenweg.is-aktiv { display: block; }
.w3-rohbau__unterschrift { margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: var(--_text2); }
.w3-rohbau__ansage { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pause/Abspielen für die Eigenbewegung (WCAG 2.2.2): nullhohe Zeile über der Bühne, Knopf liegt oben rechts in der Bühne */
.w3-rohbau__steuer { position: relative; z-index: 3; height: 0; display: flex; justify-content: flex-end; }
.w3-rohbau__steuer[hidden] { display: none; }
.w3-rohbau__pause {
  position: relative; box-sizing: border-box; width: 34px; height: 34px; margin: 10px 10px 0 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(11, 30, 51, .78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); opacity: .78; transition: opacity .25s ease, background-color .25s ease;
}
.w3-rohbau__pause::before { content: ""; position: absolute; inset: -5px; }   /* Trefferfläche 44 px */
.w3-rohbau__pause svg { display: block; fill: currentColor; }
.w3-rohbau__pause:hover, .w3-rohbau__pause:focus-visible { opacity: 1; background: rgba(11, 30, 51, .95); }
.w3-rohbau__pause:focus-visible { outline: 2px solid var(--_hell); outline-offset: 2px; }
.w3-rohbau__pause .w3-rohbau__ic-play { display: none; }
.w3-rohbau__pause[aria-pressed="true"] .w3-rohbau__ic-pause { display: none; }
.w3-rohbau__pause[aria-pressed="true"] .w3-rohbau__ic-play { display: inline; }

@media (max-width: 600px) {
  .w3-rohbau__buehne { aspect-ratio: 4 / 3.4; }
  .w3-rohbau__still { width: min(100%, 165cqh); }
  .w3-rohbau__wahl { grid-template-columns: 52px 1fr auto; gap: 8px; padding: 10px 12px; font-size: 14px; }
  .w3-rohbau__wahl--summe .w3-rohbau__text::before { width: 18px; margin-right: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .w3-rohbau__etiketten .w3-rohbau__etikett { animation: none; }
  .w3-rohbau__buehne::after { transition: none; }
  .w3-rohbau__pause { transition: none; }
  .w3-rohbau__steuer { display: none; }   /* keine Eigenbewegung, also nichts zu pausieren */
}