/* Barlow, selbst gehostet (OFL 1.1, @fontsource/barlow 5.3.0) */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/barlow-latin-800-normal.woff2") format("woff2"); }

/* Farben laut kontext.md, Abschnitt 6 */
:root {
  --paper: #FFFFFF;
  --paper-2: #F7F6F4;
  --ink: #1D181B;
  --ink-2: #3F3E40;
  --rule: #B3B3B4;
  --signal: #F5821F;      /* nur Fläche oder auf Dunkel */
  --signal-ink: #A8440A;  /* orange Schrift auf Hell */

  /* Flächen der Seite: Hellgrau (Florian, 14.10.2026). Weiß (--paper) bleibt für Kopfleiste, Kästen und Bildflächen.
     Kontraste: #1D181B auf #ECEBE9 14,7 / auf #E4E3E0 13,7; #A8440A auf #ECEBE9 5,0 / auf #E4E3E0 4,7. */
  --bg: #ECEBE9;
  --bg-2: #E4E3E0;
  --surface: #FFFFFF;          /* Medienflächen, Logo-Kacheln */
  --dim: var(--rule);          /* noch nicht gefüllte Wörter der Mission */

  --gutter: 16px;
  --max: 1240px;
  --header-h: 64px;

  --fs-body: 1.125rem;
  --fs-lede: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --fs-h3: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  --fs-h2: clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem);
  --fs-h1: clamp(3.25rem, 1.6rem + 6vw, 7.25rem);
  --fs-mega: clamp(4.5rem, 2rem + 10vw, 11rem);
}
/* Seitenrand: 16 px nur auf dem Handy, ab Tablet 40 px wie auf dem Desktop (Florian, 15.10.2026) */
@media (min-width: 720px) { :root { --gutter: 40px; } }
@media (min-width: 960px) { :root { --fs-body: 1.1875rem; } }

/* Dunkle Abschnitte: Farbwerte werden im Abschnitt umgedreht.
   Kontraste auf #1D181B: #F2F1EF 15,5; #B3B3B4 8,4; #F5821F 6,75 (orange Schrift hier erlaubt).
   Kopfleiste bleibt weiß: Das Grau im Logo (ca. #B3B3B4) hätte auf Grau kaum Kontrast. */
.dunkel {
  --ink: #F2F1EF; --ink-2: #B3B3B4; --rule: #4A4648; --surface: #2A2528; --signal-ink: var(--signal);
  --dim: #4A4648; --bg: #1D181B;
  background: #1D181B; color: var(--ink);
}
.dunkel .btn-primary { color: #1D181B; }
.dunkel .btn-primary:hover { background: #F2F1EF; color: #1D181B; }
/* Oranger Abschnitt: nur Anthrazit darauf (6,75) */
.band-orange { --ink: #1D181B; --ink-2: #1D181B; --rule: #1D181B; background: var(--signal); color: #1D181B; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; font-family: "Barlow", system-ui, sans-serif; font-size: var(--fs-body); line-height: 1.55;
  color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.025em; line-height: 1; text-wrap: balance; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 800; }
p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* Entwurfs-Hinweise */
.draft-bar { margin: 0; max-width: none; padding: 6px var(--gutter); background: var(--ink); color: var(--paper); font-size: 0.875rem; font-weight: 500; text-align: center; }
.draft-bar a { color: var(--signal); }
mark.open { background: none; color: var(--signal-ink); border: 1.5px dashed var(--signal-ink); border-radius: 3px; padding: 0 6px; font-size: 0.85em; font-weight: 600; }
mark.open-dark { color: var(--signal); border-color: var(--signal); }
.placeholder-note { font-size: 0.875rem; line-height: 1.4; color: var(--ink-2); font-weight: 500; }
.placeholder-inline { margin-top: 12px; }

/* Kopf */
.site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid color-mix(in srgb, var(--rule) 50%, transparent); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 24px; }
.brand img { height: 28px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 28px; font-weight: 600; font-size: 1rem; }
.main-nav a:not(.btn) { text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.main-nav a:not(.btn):hover { border-bottom-color: var(--ink); }
.menu-toggle { display: none; }
@media (max-width: 959px) {
  .menu-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font: inherit; font-weight: 600; color: var(--ink); background: none; border: 1.5px solid var(--ink); border-radius: 4px; cursor: pointer; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 8px var(--gutter) 20px; }
  .main-nav.is-open { display: flex; }
  .main-nav a:not(.btn) { padding: 12px 0; border-bottom: 1px solid var(--paper-2); }
  .main-nav .btn { margin-top: 14px; align-self: flex-start; }
}
/* Tablet: Menü als Feld rechts unter dem Button, halbe Breite (Florian, 15.10.2026) */
@media (min-width: 720px) and (max-width: 959px) {
  .main-nav { left: auto; right: var(--gutter); top: calc(100% + 8px); width: min(400px, 50%); padding: 8px 24px 22px; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 18px 40px rgba(29, 24, 27, .16); }
}

/* Buttons und Links */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 1.0625rem; text-decoration: none; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.btn-small { min-height: 40px; padding: 0 18px; font-size: 1rem; }
.btn-primary { background: var(--signal); color: var(--ink); }        /* dunkel auf Orange, 6,75 : 1 */
.btn-primary:hover { background: var(--ink); color: var(--signal); }  /* Orange auf dunkel, 6,75 : 1 */
.btn-quiet { color: var(--ink); padding-inline: 4px; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.btn-quiet:hover { color: var(--signal-ink); }
.more { display: inline-block; margin-top: 4px; font-weight: 700; color: var(--signal-ink); text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.more:hover { color: var(--ink); }

/* Abschnitte */
.band { padding-block: clamp(80px, 10vw, 160px); position: relative; }
.band-tint { background: var(--bg-2); }
.section-title { margin-bottom: 24px; max-width: 18ch; }
.section-lede { font-size: var(--fs-lede); color: var(--ink-2); margin-bottom: 48px; }
.narrow { max-width: calc(820px + 2 * var(--gutter)); margin-inline: auto; margin-left: 0; }
.narrow h2, .split-text h2 { margin-bottom: 28px; }
.split { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; }
  .split-media-right { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* Medienflächen */
.media { margin: 0; position: relative; background: var(--surface); border-radius: 18px; overflow: hidden; }
.media .placeholder-note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 12px 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.media-werkstatt { aspect-ratio: 4 / 3; }
.werkstatt-hint { position: absolute; left: 14%; right: 14%; top: 46%; height: 5px; background: var(--signal); border-radius: 3px; transform: rotate(-4deg); }

/* ---------- Hero ---------- */
.hero { background: var(--bg); }
.hero-stage { position: relative; padding-block: clamp(40px, 6vw, 88px) 56px; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } }
.hero h1 { font-size: var(--fs-h1); line-height: 0.93; letter-spacing: -0.035em; margin-bottom: 32px; max-width: 10.5ch; }
.lede { font-size: var(--fs-lede); color: var(--ink-2); max-width: 44ch; margin-bottom: 36px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
/* Fäden laufen auf allen Geräten randlos hinter dem Text über die ganze Bühne (Florian, 14.10. Desktop, 15.10.2026
   Tablet und Handy). Die Fadenfläche nimmt keinen eigenen Platz ein, sie liegt über der ganzen Bühne. */
.hero-slot { position: static; }
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: transparent; }
.hero-text { position: relative; z-index: 1; }
.threads-hero { width: 100%; height: 100%; }
.hero-claim { position: absolute; z-index: 1; margin: 0; max-width: none; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.hero-claim span { display: block; }
.claim-a { color: var(--ink-2); font-weight: 500; }
.claim-b { color: var(--ink); font-weight: 800; }

/* Ohne Bewegung: Endzustand, das geordnete Bündel läuft am unteren Rand über die ganze Breite. Der Spruch steht auf
   dem Desktop rechts neben dem Text, auf Tablet und Handy zwischen Text und Bündel. */
html:not(.fx) .hero-stage { padding-bottom: 250px; }
html:not(.fx) .hero-claim { left: var(--gutter); right: var(--gutter); bottom: 100px; font-size: clamp(2rem, 1rem + 2.6vw, 3.75rem); }
@media (min-width: 960px) {
  html:not(.fx) .hero-stage { padding-bottom: 112px; }
  html:not(.fx) .hero-claim { left: auto; right: max(var(--gutter), calc((100% - var(--max)) / 2)); bottom: auto; top: 50%; transform: translateY(-50%); text-align: right; }
}

/* Mit Bewegung: Bühne über die Bildschirmhöhe. Hinter dem Text ein weicher Schleier in der Grundfarbe, damit die
   Schrift lesbar bleibt; er verschwindet mit dem Text. Der Schleier ragt über den Rand und wird abgeschnitten. */
.fx .hero-stage { height: calc(100svh - var(--header-h)); min-height: 600px; padding-block: 0; display: flex; align-items: center; overflow: clip; }
.fx .hero-grid { width: 100%; }
.fx .hero-text::before {
  content: ""; position: absolute; z-index: -1; inset: -12% -18% -14% -14%; pointer-events: none;
  background: radial-gradient(closest-side, var(--bg) 62%, transparent);
}
.fx .hero-claim { left: var(--gutter); right: var(--gutter); top: 36%; text-align: center; font-size: clamp(2rem, 1rem + 4.4vw, 5.5rem); }
@media (min-width: 960px) { .fx .hero-stage { min-height: 620px; overflow: visible; } }
@media (max-width: 959px) { .hero-grid { gap: 0; } }

/* ---------- Mission ---------- */
.mission { padding-block: clamp(96px, 14vw, 200px); }
.mission-text { font-size: clamp(2rem, 1.1rem + 3.4vw, 4.25rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; max-width: 22ch; margin: 0; }
.mission-text .w { transition: none; }
.fx .mission-text .w { color: var(--dim); }

/* ---------- Schaubild Ansprechpartner: Die Lücken ----------
   main.js zeichnet das SVG in der Breite der Fläche (1 Einheit = 1 px), quer ab 640 px, darunter senkrecht.
   Ohne Bewegung: Endzustand (eine Linie, Ergebnis orange). */
.lu-title { margin-bottom: 32px; }
.lu-title span { display: block; }
.lu-text { max-width: 46ch; color: var(--ink-2); }
.lu-stage { margin: clamp(40px, 6vw, 72px) 0; }
.lu-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: "Barlow", sans-serif; }
.lu-schluss { font-size: var(--fs-lede); color: var(--ink); font-weight: 600; margin: 0; }
.lu-cap { font-size: 16px; font-weight: 700; fill: var(--ink-2); }
.lu-seg { stroke: var(--ink); stroke-width: 4; stroke-linecap: square; }
.lu-tick { stroke: var(--ink); stroke-width: 2; }
.lu-dot { fill: var(--ink); }
.lu-ziel { fill: var(--bg-2); stroke: var(--ink); stroke-width: 2.5; }
.lu-ziel-fill { fill: var(--signal); }
.lu-end { font-size: 17px; font-weight: 700; fill: var(--ink); }
.lu-name { font-size: 20px; font-weight: 800; fill: var(--ink); }
.lu-cap, .lu-name { transition: fill .4s ease; }
.lu-g .is-orange { fill: var(--signal-ink); }   /* #A8440A: orange Schrift auf Hell (Kontrastregel) */
.lu-frage { font-size: 18px; font-weight: 500; fill: var(--ink-2); }
.lu-klammer { fill: none; stroke: var(--ink); stroke-width: 2; }
.lu-haken { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 3 4; }
@media (max-width: 639px) {
  .lu-name { font-size: 18px; }
  .lu-frage { font-size: 15px; }
}

/* ---------- Drei Bereiche ----------
   Bilder randlos über die volle Breite (Florian, 14.10.2026), Text darunter bzw. auf der Bühne darüber. */
.bereiche { padding-block: clamp(80px, 10vw, 140px) 0; }
.bereiche-head h2 { max-width: 14ch; margin-bottom: 40px; }
.bereich-nav { display: none; }
.bereich { padding-bottom: clamp(56px, 8vw, 96px); }
.bereich-bild { position: relative; margin: 0; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
@media (min-width: 960px) { .bereich-bild { aspect-ratio: 21 / 9; } }
.bereich-bild .werkstatt-hint { left: 48%; right: 8%; }
/* Werkstattbilder: Motiv in der rechten Hälfte, beim schmaleren Handy-Ausschnitt bleibt es rechts im Bild */
.bereich-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
/* Platzhalter unterscheidbar machen, bis die Bilder da sind */
.bereich:nth-child(2) .bereich-bild { background: #3A3436; }
.bereich:nth-child(2) .werkstatt-hint { transform: rotate(3deg); top: 58%; }
.bereich:nth-child(3) .bereich-bild { background: #4A4447; }
.bereich:nth-child(3) .werkstatt-hint { transform: rotate(-1deg); top: 38%; }
.bereich-bild .placeholder-note { position: absolute; right: 16px; bottom: 14px; margin: 0; max-width: 340px; padding: 10px 14px; border-radius: 8px; background: color-mix(in srgb, var(--bg) 85%, transparent); text-align: right; }
.bereich-inner { padding-top: 32px; }
.bereich-text { max-width: 620px; }
.bereich-text h3 { margin-bottom: 18px; }
.ki-line { border-left: 3px solid var(--signal); padding-left: 16px; color: var(--ink-2); }
.ki-line strong { color: var(--ink); }

/* Bereiche mit Bewegung: Leiste Marketing · Web · IT füllt sich (main.js). Ab Tablet bleibt die Bühne stehen und die
   Bilder blenden weich über, auf dem Handy klebt nur die Leiste oben (Florian, 15.10.2026). */
.fx .bereich-nav { display: flex; position: relative; gap: 0; width: min(440px, 40%); justify-content: space-between; padding-top: 22px; }
.fx .bn-track { position: absolute; left: 6px; right: 6px; top: 6px; height: 3px; background: rgba(242, 241, 239, .25); border-radius: 2px; overflow: hidden; }
.fx .bn-fill { position: absolute; inset: 0; background: var(--signal); transform: scaleX(0); transform-origin: left; }
.fx .bereich-nav button {
  position: relative; font: inherit; font-weight: 600; font-size: 1.0625rem; color: #D9D8D5; background: none; border: 0; padding: 4px 0; cursor: pointer;
}
.fx .bereich-nav button::before { content: ""; position: absolute; left: 50%; top: -22px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #1D181B; border: 2px solid #8D8A8C; transition: background-color .2s, border-color .2s; }
.fx .bereich-nav button:first-of-type::before { left: 7px; }
.fx .bereich-nav button:last-of-type::before { left: auto; right: 0; margin-left: 0; }
.fx .bereich-nav button:first-of-type { text-align: left; }
.fx .bereich-nav button.is-active { color: var(--ink); font-weight: 800; }
.fx .bereich-nav button.is-active::before, .fx .bereich-nav button.is-past::before { background: var(--signal); border-color: var(--signal); }
/* Handy: Überschrift scrollt weg, die Leiste klebt unter dem Kopf, solange die Bereiche durchlaufen */
@media (max-width: 719px) {
  .fx .bereiche-head { display: contents; }
  .fx .bereiche-head h2 { padding-inline: var(--gutter); margin-bottom: 28px; }
  .fx .bereich-nav { position: sticky; top: var(--header-h); z-index: 5; width: auto; padding: 34px var(--gutter) 14px; background: #1D181B; border-bottom: 1px solid #4A4648; }
  .fx .bn-track { left: calc(var(--gutter) + 6px); right: calc(var(--gutter) + 6px); top: 18px; }
  .fx .bereich-nav { padding-bottom: 4px; }
  .fx .bereich-nav button { min-height: 44px; padding: 0 10px; }   /* Tippfläche */
  .fx .bereich-nav button:first-of-type { padding-left: 0; }
  .fx .bereich-nav button:last-of-type { padding-right: 0; }
}
@media (min-width: 720px) {
  .fx .bereiche { padding-block: 0; }
  /* jeder Bereich eine eigene Ebene in Seitenreihenfolge, sonst liegen Beschriftungen des ersten Bilds über den
     späteren (Überblendung mit Deckkraft macht eigene Ebenen). Klicks gehen nur an den sichtbaren Text. */
  .fx .bereich { position: absolute; inset: 0; padding: 0; pointer-events: none; }
  .fx .bereich:nth-child(1) { z-index: 1; }
  .fx .bereich:nth-child(2) { z-index: 2; }
  .fx .bereich:nth-child(3) { z-index: 3; }
  .fx .bereich-text { pointer-events: auto; }
}

/* Tablet: oben Überschrift und Leiste, darunter das Bild randlos in voller Breite, darunter der Text auf Dunkel.
   Hochkant würde ein Bild über die ganze Bühne vom 16:9-Motiv nur ein Drittel zeigen (Florian, 15.10.2026). */
@media (min-width: 720px) and (max-width: 959px) {
  .fx .bereiche-stage { position: relative; height: calc(100svh - var(--header-h)); min-height: 640px; overflow: hidden; display: flex; flex-direction: column; padding-top: 32px; }
  .fx .bereiche-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; padding-bottom: 28px; }
  .fx .bereiche-head h2 { margin-bottom: 0; font-size: clamp(2rem, 1rem + 2.4vw, 3.25rem); }
  .fx .bereich-nav { width: min(360px, 46%); }
  .fx .bereich-list { position: relative; flex: 1; }
  .fx .bereich-bild { aspect-ratio: 16 / 9; max-height: 44svh; }
  .fx .bereich-inner { padding-top: 28px; }
  .fx .bereich-text { max-width: none; }
  .fx .bereich-text p { font-size: 1.0625rem; line-height: 1.5; max-width: 68ch; }
}

/* Desktop: Bild über die ganze Bühne, Text liegt links darüber. Abdunklung links und oben, damit Schrift auf jedem
   Bild lesbar bleibt (#F2F1EF ab 0,9 Deckung über 9:1, #F5821F über 4,5:1, auch auf weißem Bild). */
@media (min-width: 960px) {
  .fx .bereiche-stage { position: relative; height: calc(100svh - var(--header-h)); min-height: 640px; overflow: hidden; }
  .fx .bereiche-head { position: absolute; left: 0; right: 0; top: 40px; z-index: 5; display: flex; justify-content: space-between; align-items: end; gap: 40px; }
  .fx .bereiche-head h2 { margin-bottom: 0; font-size: clamp(2rem, 1rem + 2.4vw, 3.25rem); }
  .fx .bereich-list { position: absolute; inset: 0; }
  .fx .bereich-bild { position: absolute; inset: 0; aspect-ratio: auto; }
  .fx .bereich-bild::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to bottom, rgba(29, 24, 27, .82) 0, rgba(29, 24, 27, .82) 120px, rgba(29, 24, 27, 0) 220px),
      linear-gradient(to right, rgba(29, 24, 27, .9) 0, rgba(29, 24, 27, .9) 46%, rgba(29, 24, 27, 0) 72%);
  }
  .fx .bereich-bild .placeholder-note { z-index: 1; }
  .fx .bereich-inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; padding-top: 0; padding-bottom: 64px; }
  .fx .bereich-text { max-width: min(560px, 42vw); }
  .fx .bereich-text h3 { font-size: clamp(3.5rem, 1rem + 5.6vw, 7.5rem); letter-spacing: -0.04em; line-height: .9; margin-bottom: 24px; }
  .fx .bereich-text p { font-size: 1.0625rem; line-height: 1.5; }
}
@media (min-width: 960px) and (max-height: 820px) {
  .fx .bereiche-head { top: 24px; }
  .fx .bereich-inner { padding-bottom: 36px; }
  .fx .bereich-text h3 { font-size: clamp(3rem, 1rem + 4.4vw, 5.5rem); margin-bottom: 16px; }
}

/* ---------- Ablauf ----------
   Ein Faden zeigt, wer arbeitet: schwarz wir, orange KI. Ohne Bewegung: senkrechte Linie links, KI-Schritte orange. */
.flow-head { margin-bottom: 56px; }
.flow-head-text { max-width: 820px; }
.flow-head h2 { margin-bottom: 28px; }
.flow-kicker { font-weight: 700; color: var(--signal-ink); margin-bottom: 14px; font-size: 1.125rem; }
.flow-legend { list-style: none; margin: 24px 0 0; padding: 0; display: flex; gap: 28px; font-size: 0.9375rem; font-weight: 700; color: var(--ink-2); }
.flow-legend li { display: flex; align-items: center; gap: 10px; }
.lg { display: inline-block; width: 36px; border-radius: 3px; }
.lg-wir { height: 3px; background: var(--ink); }
.lg-ki { height: 6px; background: var(--signal); }
.flow-track { list-style: none; margin: 0; padding: 0 var(--gutter); display: grid; gap: 48px; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; }
.flow-step { position: relative; padding-left: 36px; }
.flow-step::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: -54px; width: 3px; border-radius: 2px; background: var(--ink); }
.flow-step:last-child::before { bottom: 0; }
.flow-step.is-ki::after { content: ""; position: absolute; left: 16px; top: 18px; bottom: -66px; width: 6px; border-radius: 3px; background: var(--signal); }
.flow-step.is-ki + .flow-step:not(.is-ki)::after { content: none; }
.flow-step.is-ki:has(+ .flow-step:not(.is-ki))::after { bottom: 10px; }
.flow-svg { display: none; }
.flow-bar { display: none; }
.flow-who { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--ink-2); }
.flow-step.is-ki .flow-who { color: var(--signal-ink); }
.step-no { display: block; font-size: clamp(4rem, 2rem + 6vw, 8.5rem); font-weight: 800; line-height: .85; letter-spacing: -0.05em; color: var(--ink); margin: 14px 0 18px; }
.flow-step h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); margin-bottom: 14px; }
.flow-step p { color: var(--ink-2); max-width: 34ch; }
/* Schlusssatz des Ablaufs: groß, als Abschluss der Bühne; der Abstand zu den Zahlen bleibt dafür knapper */
.flow-value { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; margin-top: 56px; max-width: 30ch; }
.ablauf { padding-bottom: clamp(64px, 7vw, 104px); }
.zahlen { padding-top: clamp(64px, 7vw, 104px); }

/* Ablauf mit Bewegung: der Faden zeichnet sich mit (main.js), Schritte werden deutlich, sobald er sie erreicht.
   Handy senkrecht im Fluss, ab Tablet bleibt der Abschnitt stehen. */
.fx .flow-move { position: relative; }
.fx .flow-svg { display: block; position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.fx .fl-main { fill: none; stroke: var(--ink); stroke-width: 3; }
.fx .fl-ki { fill: var(--signal); stroke: none; }   /* Band neben bzw. unter der schwarzen Linie, wächst aus ihr heraus */
.fx .flow-step { opacity: .35; transition: opacity .4s ease; }
.fx .flow-step::before, .fx .flow-step::after { content: none; }
.fx .flow-step .step-no { color: transparent; -webkit-text-stroke: 2px var(--ink-2); transition: color .4s ease, -webkit-text-stroke-color .4s ease; }
.fx .flow-step.is-on { opacity: 1; }
.fx .flow-step.is-on .step-no { color: var(--ink); -webkit-text-stroke-color: var(--ink); }
@media (min-width: 720px) {
  .fx .ablauf { padding-block: 0; }
  .fx .flow-value { margin-top: 0; padding-block: 8px clamp(64px, 7vw, 104px); }
}

/* Tablet: Schritte in zwei Spalten, über jeder Reihe die Linie (Florian, 15.10.2026) */
@media (min-width: 720px) and (max-width: 959px) {
  .fx .flow-pin { height: calc(100svh - var(--header-h)); min-height: 620px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .fx .flow-head { margin-bottom: 32px; }
  .fx .flow-head h2 { margin-bottom: 20px; }
  .fx .flow-legend { margin-top: 16px; }
  .fx .flow-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; }
  .fx .flow-step { padding: 48px 0 0; }
  .fx .flow-step .step-no { font-size: 3.75rem; margin: 8px 0 12px; }
  .fx .flow-step h3 { font-size: 1.75rem; margin-bottom: 8px; }
}
/* niedrige Tablets (z. B. 768 × 1024): Einleitung weglassen wie auf niedrigen Desktops, sonst reicht die Höhe nicht */
@media (min-width: 720px) and (max-width: 959px) and (max-height: 1060px) {
  .fx .flow-head-text > p:not(.flow-kicker) { display: none; }
}
/* ohne Bewegung: gleiche zwei Spalten, Linien fertig gezeichnet (KI-Schritte mit oranger Spur darunter) */
@media (min-width: 720px) and (max-width: 959px) {
  html:not(.fx) .flow-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
  html:not(.fx) .flow-step { padding: 52px 0 0; }
  html:not(.fx) .flow-step::before { left: 0; right: -48px; top: 9px; bottom: auto; width: auto; height: 3px; }
  html:not(.fx) .flow-step:nth-child(2n)::before { right: 0; }
  html:not(.fx) .flow-step.is-ki::after { left: 0; right: -48px; top: 26px; bottom: auto; width: auto; height: 7px; }
  html:not(.fx) .flow-step.is-ki:nth-child(2n)::after, html:not(.fx) .flow-step.is-ki:has(+ .flow-step:not(.is-ki))::after { right: 0; }
}

/* Desktop: Kopf bleibt stehen, Schritte fahren seitwärts */
@media (min-width: 960px) {
  .fx .flow-pin { height: calc(100svh - var(--header-h)); min-height: 620px; display: grid; grid-template-columns: 100%; grid-template-rows: auto 1fr; padding-top: clamp(32px, 5vh, 64px); overflow: hidden; }
  .fx .flow-head { margin-bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
  .fx .flow-head h2 { font-size: clamp(2rem, 1rem + 2.6vw, 3.5rem); margin-bottom: 16px; }
  .fx .flow-head-text > p:not(.flow-kicker) { margin-bottom: 0; max-width: 60ch; }
  .fx .flow-legend { margin: 0; flex: none; }
  .fx .flow-move { align-self: center; width: max-content; padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); padding-right: 10vw; }
  .fx .flow-svg { height: 44px; }
  .fx .flow-track { display: flex; gap: 96px; padding: 0; margin: 0; max-width: none; }
  .fx .flow-step { width: min(34vw, 460px); flex: none; padding: 64px 0 0; }
}
@media (min-width: 960px) and (max-height: 820px) {
  .fx .flow-head-text > p:not(.flow-kicker) { display: none; }
  .fx .step-no { font-size: clamp(3.5rem, 1.5rem + 5vw, 6.5rem); }
}

/* ---------- Zahlen ----------
   Breiter Rahmen über fast die ganze Seite; auf großen Bildschirmen vier Spalten mit gleichen Zeilen (Subgrid),
   damit Vorzeile, Zahl, Text und Schaubild nebeneinander auf derselben Höhe stehen. */
.container-breit { max-width: calc(1600px + 2 * var(--gutter)); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px; }
.facts li { display: flex; flex-direction: column; border-top: 1px solid var(--rule); padding-top: 24px; }
/* ab Tablet zwei Spalten (Florian, 15.10.2026), ab 1200 px vier; Zeilen jeweils bündig (Subgrid) */
@media (min-width: 720px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; row-gap: 0; }
  .facts li { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
  .facts li:nth-child(n+3) { margin-top: 56px; }
}
@media (min-width: 1200px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: clamp(40px, 4vw, 72px); }
  .facts li:nth-child(n+3) { margin-top: 0; }
}
.fact-pre { font-weight: 700; color: var(--signal-ink); font-size: 0.9375rem; letter-spacing: .04em; text-transform: uppercase; }
.fact-num { font-size: clamp(3rem, 1.5rem + 3vw, 4.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: .95; margin: 10px 0 12px; font-variant-numeric: tabular-nums; }
.fact-label { color: var(--ink-2); font-size: 1.0625rem; max-width: 26ch; }
/* Kleine Schaubilder unter den Zahlen: alle im gleichen Band (viewBox 300 × 80), unten bündig.
   Sie laufen mit dem Scrollen mit (main.js), ohne Bewegung stehen sie fertig da. */
.fact-viz { display: block; width: 100%; height: auto; margin-top: 28px; align-self: end; overflow: visible; font-family: "Barlow", sans-serif; }
.fact-viz .on { fill: var(--signal); }
.fact-viz .off { fill: rgba(29, 24, 27, .12); }
.fact-viz .base { stroke: rgba(29, 24, 27, .18); stroke-width: 2; }
.fact-viz .line { stroke: var(--signal); stroke-width: 3; stroke-linecap: round; }
.fact-viz .tick { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.fact-viz .tip { fill: var(--signal); }
.fact-viz .lbl { font-size: 13px; font-weight: 700; fill: var(--ink-2); }

/* ---------- KI, dunkle Bühne ---------- */
.ki h2 { color: var(--paper); font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem); }
.ki p { color: color-mix(in srgb, var(--paper) 84%, var(--ink)); }
.ki-kicker { font-weight: 700; color: var(--signal) !important; margin-bottom: 18px; font-size: 1.125rem; }
.ki .examples { margin: 0 0 32px; padding-left: 1.1em; }
.ki .examples li { margin-bottom: 10px; }
.ki :focus-visible { outline-color: var(--signal); }
/* Text und Wochenplan nebeneinander, darunter der Rechner über die volle Breite. Tablet und Handy untereinander:
   Text, Wochenplan, Rechner (Florian, 15.10.2026) */
.ki { padding-block: clamp(80px, 10vw, 140px); }
.ki-grid { display: grid; gap: 40px; align-items: center; }
.ki-text { max-width: 620px; }
.ki-text h2 { margin-bottom: 28px; }
@media (min-width: 960px) { .ki-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; } }

/* KI: Wochenplan „Die Woche wird leichter“. Routine grau, wird orange (KI) und schmal; Ihre Arbeit dunkel mit Rand;
   gewonnene Zeit hell mit dunkler Schrift. Kontraste: #D9D8D5 auf #3F3A3D 8,1; #1D181B auf #E4E3E0 13,7. */
.ki-woche { margin: 0; }
.ki-woche .placeholder-note { margin: 16px 0 0; }
.woche-flaeche { display: grid; gap: 20px; max-width: 640px; margin-inline: auto; }
.woche { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; height: 380px; }
@media (max-width: 599px) { .woche { grid-template-columns: repeat(3, minmax(0, 1fr)); height: 340px; } .wt:nth-child(n+4) { display: none; } }
.wt { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-width: 0; }
.wt-tag { margin: 0; font-weight: 700; font-size: 0.9375rem; color: var(--ink-2); }
.wt-spalte { display: flex; flex-direction: column; min-height: 0; }
.wb { position: relative; flex: none; overflow: hidden; border-bottom: 4px solid var(--bg); border-radius: 7px; padding: 0 9px; }
.wb span { position: relative; z-index: 1; display: block; padding-top: 7px; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; hyphens: manual; }
.wb-r { background: #3F3A3D; color: #D9D8D5; }
.wb-r::after { content: ""; position: absolute; inset: 0; background: var(--signal); opacity: 0; transition: opacity .35s ease; }
.wb-r.is-ki::after { opacity: 1; }
.wb-r span { transition: opacity .3s ease; }
.wb-r.is-ki span { opacity: 0; }
.wb-m { background: #2A2528; box-shadow: inset 0 0 0 1.5px #6A6568; color: #F2F1EF; }
.wb-frei { background: #E4E3E0; color: #1D181B; }
.wb-frei span { font-weight: 700; }
.woche-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.woche-legende li { display: flex; align-items: center; gap: 8px; }
.wl { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.wl-r { background: #3F3A3D; } .wl-ki { background: var(--signal); } .wl-m { background: #2A2528; box-shadow: inset 0 0 0 1.5px #6A6568; } .wl-frei { background: #E4E3E0; }
@media (min-width: 960px) {
  .woche-flaeche { max-width: none; }
  .woche { height: min(440px, 54vh); }
}

/* ---------- Referenzen ---------- */
/* Laufband mit Logos: zwei Reihen in Gegenrichtung, weiche Ränder; die zweite Hälfte jeder Reihe ist eine
   Kopie (aria-hidden) für den nahtlosen Übergang. Bewegung über main.js (GSAP). */
.ref-kicker { font-weight: 700; color: var(--signal-ink); margin-bottom: 14px; font-size: 1.125rem; }
.logo-band { display: grid; gap: 48px; padding-block: 48px; margin-top: 16px; overflow: hidden; border-block: 1px solid var(--rule); }
.fx .logo-band {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.logo-track { list-style: none; margin: 0; padding: 0 96px 0 0; display: flex; align-items: center; gap: 96px; width: max-content; will-change: transform; }
.logo-track li { flex: none; display: flex; align-items: center; }
.logo-track img { display: block; height: auto; opacity: .7; filter: grayscale(1); transition: opacity .3s ease; }
.logo-track li:hover img { opacity: 1; }
/* Ohne Bewegung: Reihen stehen still und lassen sich seitlich wischen */
html:not(.fx) .logo-band { overflow: visible; }
html:not(.fx) .logo-track { overflow-x: auto; width: auto; max-width: 100%; padding-inline: var(--gutter); scroll-snap-type: x proximity; }
html:not(.fx) .logo-track li { scroll-snap-align: start; }
@media (max-width: 719px) { .logo-band { gap: 32px; padding-block: 32px; } .logo-track { gap: 56px; padding-right: 56px; } .logo-track img { width: auto; height: auto; max-height: 44px; max-width: 120px; } }
/* Kundenstimmen: eine Stimme groß, links Navigation mit oranger Marke; Orange nur als Fläche, Schrift darauf dunkel */
.stimmen { display: grid; gap: 32px; margin-top: clamp(72px, 9vw, 120px); }
@media (min-width: 960px) { .stimmen { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 64px; align-items: start; } }
.stimmen-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px 20px; }
@media (min-width: 960px) { .stimmen-nav { grid-template-columns: auto 1fr; grid-template-areas: "mark mark" "count count" "btns btns" "prog prog"; gap: 24px; } .stimmen-mark { grid-area: mark; } .stimmen-count { grid-area: count; } .stimmen-btns { grid-area: btns; } .stimmen-progress { grid-area: prog; } }
.stimmen-mark { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 14px; background: var(--signal); color: #1D181B; }
.stimmen-mark svg { width: 46px; height: 42px; }
.stimmen-count { margin: 0; font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.stimmen-count .sc-cur { color: var(--ink); font-size: 1.75rem; }
.stimmen-btns { display: flex; gap: 10px; }
.st-btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--signal); color: #1D181B; cursor: pointer; transition: background-color .2s, color .2s; }
.st-btn svg { width: 22px; height: 22px; }
.st-btn:hover { background: #1D181B; color: var(--signal); }
.stimmen-progress { grid-column: 1 / -1; position: relative; height: 3px; background: color-mix(in srgb, var(--rule) 60%, transparent); border-radius: 2px; overflow: hidden; }
.stimmen-progress span { position: absolute; inset: 0; background: var(--signal); transform-origin: left; transform: scaleX(.2); transition: transform .4s ease; }
.stimmen-track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; align-items: start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; transition: height .35s ease; }
html:not(.fx) .stimmen-track { transition: none; }
/* Höhe folgt der gezeigten Stimme (main.js), darum unten am Abschnitt nur ein knapper Abstand (Florian, 15.10.2026) */
#referenzen { padding-bottom: clamp(56px, 6vw, 96px); }
.stimmen-track::-webkit-scrollbar { display: none; }
.stimmen-track:focus-visible { outline-offset: 6px; }
.stimme { scroll-snap-align: start; padding-right: 8px; }
blockquote { margin: 0; }
.stimme blockquote p { font-size: clamp(1.1875rem, 0.95rem + 0.75vw, 1.625rem); line-height: 1.38; font-weight: 600; letter-spacing: -0.005em; max-width: 46ch; margin-bottom: 0.7em; }
.stimme blockquote p:last-of-type { margin-bottom: 28px; }
.stimme blockquote footer { display: flex; flex-direction: column; gap: 2px; padding-left: 16px; border-left: 3px solid var(--signal); }
.stimme blockquote footer strong { font-weight: 800; font-size: 1.0625rem; }
.stimme blockquote footer span { color: var(--ink-2); font-size: 1rem; }

/* ---------- Herkunft ----------
   Stationen groß untereinander; links eine Schiene von Punkt zu Punkt, die sich beim Scrollen orange füllt (main.js).
   Ohne Bewegung: alles gefüllt. Orange nur als Fläche (Linie, Punkte), Schrift bleibt dunkel. */
.hk-kicker { font-weight: 700; color: var(--signal-ink); margin-bottom: 14px; font-size: 1.125rem; }
.herkunft { position: relative; padding-left: 56px; }
.hk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 3.2vw, 44px); }
.hk-list li { display: flex; flex-direction: column; }
.hk-rail { position: absolute; left: 11px; top: 0; height: 0; width: 3px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.hk-fill { position: absolute; inset: 0; background: var(--signal); transform-origin: top; }
.hk-when { font-size: 0.875rem; font-weight: 700; color: var(--signal-ink); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.hk-desc { margin-top: 10px; font-size: 1.0625rem; line-height: 1.45; color: var(--ink-2); max-width: 36ch; transition: opacity .4s ease; }
.hk-what { position: relative; font-size: clamp(2.25rem, 1.3rem + 3vw, 4.25rem); font-weight: 700; line-height: 1.05; letter-spacing: 0; color: var(--ink); transition: color .4s ease, -webkit-text-stroke-color .4s ease; }
.hk-what::before { content: ""; position: absolute; left: -52px; top: calc(0.5em - 11px); width: 16px; height: 16px; border-radius: 50%; background: var(--signal); border: 3px solid var(--bg-2); box-shadow: 0 0 0 2px var(--signal); transition: background-color .3s, box-shadow .3s; }
/* mit Bewegung: zuerst Umriss, gefüllt sobald die Linie die Station erreicht */
.fx .hk-fill { transform: scaleY(0); }
.fx .hk-what { color: transparent; -webkit-text-stroke: 1.2px var(--ink-2); }
.fx .hk-desc { opacity: .35; }
.fx .hk-list li.is-on .hk-desc { opacity: 1; }
.fx .hk-what::before { background: var(--bg-2); box-shadow: 0 0 0 2px var(--rule); }
.fx .hk-list li.is-on .hk-what { color: var(--ink); -webkit-text-stroke-color: var(--ink); }
.fx .hk-list li.is-on .hk-what::before { background: var(--signal); box-shadow: 0 0 0 2px var(--signal); }
/* Text oben bündig mit der Zeitleiste, sonst beginnt er weit unten und der Abstand zu den Kundenstimmen wird zu groß (Florian, 15.10.2026) */
@media (min-width: 960px) { #herkunft .split { align-items: start; } }

/* ---------- Kontakt (dunkel) ----------
   Drei große Kontaktwege als Zeilen; oben zieht sich der orange Faden auf (Ende des Fadens aus dem Hero).
   Auf Dunkel: Schrift #F2F1EF, Orange nur als Linie und als Pfeil-Fläche mit dunklem Pfeil (6,75 : 1). */
.kontakt { padding-block: clamp(88px, 11vw, 160px) clamp(64px, 8vw, 112px); }
.kt-faden { display: block; height: 6px; width: min(420px, 60%); border-radius: 3px; background: var(--signal); margin-bottom: clamp(40px, 5vw, 64px); transform-origin: left; }
.fx .kt-faden { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.fx .kt-faden.is-drawn { transform: scaleX(1); }
.kt-kicker { font-weight: 700; color: var(--signal); margin-bottom: 14px; font-size: 1.125rem; }
.kontakt-title { font-size: var(--fs-h1); letter-spacing: -0.03em; line-height: .95; margin-bottom: 24px; }
.kt-head .lede { color: var(--ink-2); margin-bottom: clamp(40px, 5vw, 64px); }
.kt-wege { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.kt-wege li { border-bottom: 1px solid var(--rule); }
.kt-weg { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label pfeil" "wert pfeil"; align-items: center; gap: 4px 24px; padding: 22px 8px; text-decoration: none; color: var(--ink); transition: background-color .25s ease, padding .25s ease; border-radius: 4px; }
@media (min-width: 960px) { .kt-weg { grid-template-columns: 200px 1fr auto; grid-template-areas: "label wert pfeil"; padding: 28px 12px; } }
.kt-label { grid-area: label; font-size: 0.9375rem; font-weight: 700; color: var(--ink-2); letter-spacing: .04em; text-transform: uppercase; }
.kt-wert { grid-area: wert; font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.kt-pfeil { grid-area: pfeil; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface); color: var(--ink); transition: background-color .25s ease, color .25s ease, transform .25s ease; }
.kt-pfeil svg { width: 22px; height: 22px; }
.kt-weg-haupt .kt-pfeil, .kt-weg:hover .kt-pfeil, .kt-weg:focus-visible .kt-pfeil { background: var(--signal); color: #1D181B; }
.kt-weg-haupt .kt-label { color: var(--signal); }
.kt-weg:hover, .kt-weg:focus-visible { background: var(--surface); }
.kt-weg:hover .kt-pfeil { transform: translateX(6px); }
.kt-zeiten { max-width: 62ch; margin: clamp(40px, 5vw, 64px) 0 0; color: var(--ink-2); font-size: 1.125rem; }
.kt-zeiten a { color: var(--ink); text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.kt-zeiten a:hover { color: var(--signal); }

/* ---------- Fuß ---------- */
.site-footer { background: var(--ink); color: var(--rule); border-top: 1px solid var(--ink-2); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: 28px; font-size: 0.9375rem; }
.footer-inner p, .footer-adresse { margin: 0; font-style: normal; }
.footer-inner nav { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.footer-inner .ecg img { display: block; opacity: .68; transition: opacity .2s ease; }   /* hell auf Dunkel, etwa wie die Fußlinks */
.footer-inner .ecg:hover img, .footer-inner .ecg:focus-visible img { opacity: 1; }
.footer-inner a { color: var(--rule); text-decoration: none; }
.footer-inner a:hover { color: var(--paper); text-decoration: underline; }

/* ---------- Rechner „Ihr eigener Zeitgewinn“ (unter dem Wochenplan, volle Breite) ---------- */
.rechner { display: grid; gap: 32px 64px; margin-top: clamp(56px, 7vw, 96px); padding: clamp(28px, 3vw, 44px); border-radius: 18px; background: var(--surface); }
.rechner h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); margin-bottom: 12px; }
.ki .rechner-intro { margin: 0 0 28px; max-width: 58ch; }
.rechner-regler-paar { display: grid; gap: 24px 40px; }
.rechner-regler { display: flex; flex-direction: column; justify-content: flex-end; }   /* Regler auf einer Höhe, auch wenn eine Beschriftung umbricht */
.rechner-regler label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-weight: 700; margin-bottom: 12px; }
.rechner-regler output { color: var(--signal); font-size: 1.25rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Regler: Knopf 28 px, Tippfläche 44 px, links vom Knopf orange (Florian, 15.10.2026) */
.rechner-regler input { --p: 0%; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.rechner-regler input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--signal) var(--p), #4A4648 var(--p)); }
.rechner-regler input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--signal); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--signal); }
.rechner-regler input::-moz-range-track { height: 6px; border-radius: 3px; background: #4A4648; }
.rechner-regler input::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--signal); }
.rechner-regler input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--signal); border: 3px solid var(--surface); }
.rechner-ergebnis { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
.ki .rechner-ergebnis p { margin: 0; color: var(--ink-2); font-weight: 600; }
.rechner-ergebnis strong { display: block; color: var(--ink); font-size: clamp(2.5rem, 1.6rem + 2.2vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.ki .rechner-hinweis { margin: 0; font-size: 0.875rem; color: var(--ink-2); }
@media (min-width: 720px) { .rechner-regler-paar { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .rechner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .rechner-ergebnis { padding: 0 0 4px 48px; border-top: 0; border-left: 1px solid var(--rule); }
  .rechner-hinweis { grid-column: 1 / -1; }
}

/* ---------- Häufige Fragen (aufklappbar) ---------- */
.fragen-grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .fragen-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; align-items: start; } }
.fragen-head h2 { margin-bottom: 24px; }
.fragen-head .lede { margin-bottom: 0; }
.frage { border-top: 1px solid var(--rule); }
.frage:last-child { border-bottom: 1px solid var(--rule); }
.frage summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; cursor: pointer; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--ink); border-radius: 50%; font-size: 1.375rem; font-weight: 500; transition: transform .2s ease; }
.frage[open] summary::after { transform: rotate(45deg); }
.frage summary:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.frage p { margin: 0; padding: 0 60px 26px 0; max-width: 62ch; color: var(--ink-2); }
.frage a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Nur für Screenreader sichtbar (z. B. „öffnet in neuem Fenster“) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Unterseiten: rechtliche Texte (Impressum, Datenschutz, Haftungsausschluss, AGB) ----------
   Gemeinsame Vorlage in unterseiten/vorlage.html, gebaut mit unterseiten/bauen.py */
.rechtstext-band { background: var(--bg); }
.rechtstext { max-width: 760px; }
.rechtstext h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); margin-bottom: 20px; }
.rechtstext h2 { font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); letter-spacing: -0.01em; margin: 48px 0 14px; }
.rechtstext h3 { font-size: 1.1875rem; margin: 32px 0 10px; }
.rechtstext p, .rechtstext dd { color: var(--ink-2); }
.rechtstext p { margin: 0 0 14px; }
.rechtstext a { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.rechtstext a:hover { color: var(--signal-ink); }
.rechtstext-lede { font-size: var(--fs-lede); }
.rechtstext-teil { padding-top: 32px; border-top: 1px solid var(--rule); }
.rechtstext-stand { margin-top: 40px; font-size: 0.9375rem; }
.rechtstext-daten { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 8px 24px; margin: 0 0 16px; }
.rechtstext-daten dt { font-weight: 700; }
.rechtstext-daten dd { margin: 0; }
/* Handy: Bezeichnung über dem Wert, sonst ragen lange Wörter (Bezirkshauptmannschaft) über den Rand */
@media (max-width: 719px) { .rechtstext-daten { grid-template-columns: minmax(0, 1fr); gap: 0; } .rechtstext-daten dd { margin-bottom: 12px; } }
.footer-inner a[aria-current="page"] { color: var(--paper); }
/* Handy: Fuß mittig, Ort in eigener Zeile, ECG-Hinweis darunter (Florian, 15.10.2026) */
@media (max-width: 719px) {
  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .footer-adresse .fa-trenner { display: none; }
  .footer-adresse .fa-ort { display: block; }
  /* Rechtslinks 2 × 2 statt „AGB“ allein in der letzten Zeile */
  .footer-inner nav { display: grid; grid-template-columns: auto auto; justify-content: center; justify-items: center; gap: 0 28px; }
  .footer-inner .ecg { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 4px; }
}
/* Tippflächen auf Touch-Geräten mindestens 44 px hoch, ohne das Aussehen zu ändern */
@media (max-width: 959px) {
  .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-inner nav a { display: inline-flex; align-items: center; min-height: 44px; }
}