/* =============================================================================
   kessler engineering: Gestaltung (Struktur seit r008, helle Abschnitte seit r009, 14.10.2026)
   Farben, Schriften und alle Abschnitte in der Reihenfolge der Seite.
   Alle Schriften liegen in assets/fonts und stehen als Base64 in schriften.css
   (werkzeuge/schriften-einbetten.js). Nichts wird von fremden Servern geladen.
   Look: dunkle Bühnen mit grünem Licht, helle Abschnitte, Grün als einzige
   Akzentfarbe, Handschrift als Notiz. Kein Baukasten: wechselnde Rhythmen
   (bildschirmfüllender Einstieg, großer Satz, Stapel, festgehaltene Bühne,
   Zeitleiste, Aussagen), wenige präzise Bewegungen. Alles funktioniert ohne
   JavaScript (dann steht alles still und ist sichtbar) und mit „weniger Bewegung“.
   Keine style="…"-Attribute und kein Inline-Skript im HTML (Sicherheitsregel in .htaccess).
   ============================================================================= */

/* --- Farben und Grundwerte ------------------------------------------------- */
:root {
  --gruen: #4F8A33;          /* Buttons, Linien, Symbole */
  --gruen-btn: #46822C;      /* Button-Fläche (seit r023, Weiß darauf 4,7:1; vorher #4F8A33 mit 4,2:1) */
  --gruen-hover: #3B6F25;    /* Button beim Darüberfahren */
  --gruen-hell: #7CC15A;     /* Akzent in Überschriften, Handschrift und Markierungen auf Dunkel */
  --gruen-gross: #3E7F27;    /* Akzent in großen Überschriften auf Hell (Kontrast 4,9:1) */
  --gruen-text: #2F6B1E;     /* kleine grüne Schrift und Handschrift auf Hell (Kontrast 6,5:1) */
  --gruen-dunkel: #163D24;   /* dunkelgrüne Bühne (Warum) */
  --gruen-rgb: 79, 138, 51;
  --gruen-hell-rgb: 124, 193, 90;
  --nacht: #0C110E;          /* dunkle Flächen: Einstieg, Platine, Kontakt, Fuß, Stapelkarten */
  --nacht-2: #121A15;        /* etwas hellere dunkle Fläche */
  --tinte: #141A16;          /* Schrift auf Hell */
  --tinte-70: rgba(20, 26, 22, .74);
  --tinte-15: rgba(20, 26, 22, .14);
  --tinte-30: rgba(20, 26, 22, .3);   /* feine Maß- und Bezugslinien */
  --tinte-60: rgba(20, 26, 22, .66);  /* kleine Beschriftungen auf Hell (Kontrast 4,7:1 auf --warm) */
  --weiss: #FFFFFF;
  --papier: #FAF6EF;         /* Papierton der Zeichnung im Einstieg (seit r013): ersetzt Weiß als Seitenhintergrund, ruhiger und passend zum Dunkel */
  --warm: #F4EFE6;           /* helle Fläche der Leistungen: etwas tiefer als das Papier, gleiche warme Familie */
  --hell: #F4F6F3;           /* leicht getönte helle Fläche */
  --hell-75: rgba(244, 246, 243, .78);
  --hell-50: rgba(244, 246, 243, .5);
  --hell-18: rgba(244, 246, 243, .18);
  --hell-rgb: 244, 246, 243;
  --status-fehler: #E05A4E;

  --schrift-text: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --schrift-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --breite: 1240px;
  --kurve-a: clamp(24px, 3.4vw, 56px);   /* Wölbung der Oberkante von Leistungen (symmetrisch) */
  --kurve-b: clamp(28px, 4.2vw, 72px);   /* Wölbung der Oberkante von Kontakt (asymmetrisch, höher) */
  --hs-rand: clamp(24px, 4vw, 64px);   /* Seitenrand von Kopfzeile und Einstieg am Desktop */
  --hero-breite: 1420px;     /* Einstieg, Bühnen und Kopfzeile: breiter als die Textabschnitte */
  --rand: clamp(16px, 4vw, 48px);
  --kopf-h: 76px;
  --weich: cubic-bezier(.2, .7, .2, 1);

  --luft-1: 16px; --luft-2: 24px; --luft-3: 32px; --luft-4: 48px; --luft-5: 64px;
  --h2: clamp(2.1rem, 3.6vw, 3.4rem);                             /* Abschnitts-H2: 34 bis 54 px */
  --text-normal: clamp(1.0625rem, .95rem + .3vw, 1.125rem);       /* Fließtext 17 bis 18 px */
  --text-klein: .9375rem;
  --notiz-gr: clamp(1.45rem, 1.3rem + .5vw, 1.85rem);
  --btn-gr: 1.0625rem;
  --abschnitt: clamp(72px, 8vw, 128px);                           /* Abstand zwischen Abschnitten */
}
@media (max-width: 1099px) { :root { --luft-4: 32px; --luft-5: 48px; } }
@media (max-width: 759px) { :root { --luft-2: 16px; --luft-3: 24px; --luft-4: 32px; --luft-5: 32px; --kopf-h: 64px; } }

/* --- Grundlagen ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 8px); }
body { margin: 0; background: var(--papier); color: var(--tinte); font-family: var(--schrift-text); font-size: var(--text-normal); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a[href^="tel:"] { white-space: nowrap; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; overflow-wrap: break-word; }   /* lange Wörter (Entwicklungsprojekt) brechen am 320-px-Handy um, statt die Seite zu verbreitern */
h2 { font-size: var(--h2); }
h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gruen); color: #fff; }
:focus-visible { outline: 3px solid var(--gruen-hell); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
svg [stroke="#4F8A33" i] { stroke: var(--gruen); }
svg [fill="#4F8A33" i] { fill: var(--gruen); }
.dunkel svg [stroke="#4F8A33" i] { stroke: var(--gruen-hell); }

.wrap { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.akzent { color: var(--gruen-gross); }
.dunkel .akzent { color: var(--gruen-hell); }
.sprunglink { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--gruen); color: #fff; text-decoration: none; transition: top .2s; }
.sprunglink:focus { top: 12px; }
.dunkel { position: relative; background: var(--nacht); color: var(--hell); }
.dunkel p, .dunkel li { color: var(--hell-75); }
.dunkel h2, .dunkel h3, .dunkel strong { color: var(--hell); }
.platzhalter { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 6px; border: 1.5px dashed currentColor; border-radius: 6px; font-weight: 600; font-size: .85em; line-height: 1.45; }
.notiz { display: inline-block; font-family: var(--schrift-hand); font-weight: 600; font-size: var(--notiz-gr); line-height: 1.15; color: var(--gruen-text); transform: rotate(-2deg); transform-origin: left center; }
.dunkel .notiz { color: var(--gruen-hell); }
picture.bild-huelle { display: contents; }
picture.bild-huelle > source { display: none; }

/* --- Button: die eine Handlungsaufforderung -------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 11px 11px 11px 24px; border: 0; border-radius: 999px; background: var(--gruen-btn); color: #fff; font-family: var(--schrift-text); font-weight: 700; font-size: var(--btn-gr); line-height: 1.1; text-decoration: none; cursor: pointer; box-shadow: 0 12px 24px -14px rgba(var(--gruen-rgb), .9); transition: background-color .2s, box-shadow .25s var(--weich), transform .25s var(--weich); }
.btn:hover { background: var(--gruen-hover); }
.btn:active { transform: translateY(1px); }
.btn__pfeil { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--gruen); transition: transform .25s var(--weich); }
.btn__pfeil svg { width: 18px; height: 18px; }
.btn:hover .btn__pfeil { transform: translateX(4px); }
.btn--klein { gap: 10px; min-height: 0; padding: 10px 18px; font-size: .95rem; box-shadow: none; }
.btn--klein .btn__pfeil { width: 28px; height: 28px; }
.btn.ist-am-senden { opacity: .7; pointer-events: none; }
@media (max-width: 659px) {
  .btn:not(.btn--klein) { gap: 8px; padding: 10px 9px 10px 16px; font-size: .9375rem; }
  .btn:not(.btn--klein) .btn__pfeil { width: 30px; height: 30px; }
  .btn:not(.btn--klein) .btn__pfeil svg { width: 16px; height: 16px; }
}
.mehr-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-weight: 700; text-decoration: none; color: var(--gruen-text); transition: color .2s; }
.mehr-link svg { width: 18px; height: 18px; transition: transform .25s var(--weich); }
.mehr-link:hover { color: var(--tinte); }
.mehr-link:hover svg { transform: translateX(3px); }

/* --- Logo (vorläufig als Text) ---------------------------------------------- */
.logo { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: var(--hell); line-height: 1; }
/* Logo: Original von Tobias (Brandkit/Logo, 16.10.2026), freigestellt als logo-auf-dunkel.png (Weiß und Logo-Grün). Für den hellen Papierbereich im Einstieg gibt es eine Vorschlagsfassung (logo-auf-hell.png: Name in Tinte, Punkt und engineering in Grün). */
.logo { position: relative; }
.logo__bild { display: block; width: auto; height: 54px; }
@media (max-width: 759px) { .logo__bild { height: 46px; } }

/* --- Kopfzeile: schwebend, Menü als Pille, auf dem Handy als Klappmenü --------- */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--hell); transition: background-color .35s; }
.kopf.ist-gescrollt, .kopf--fest { background: rgba(12, 17, 14, .78); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.kopf__innen { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--kopf-h); max-width: var(--hero-breite); }
.kopf__logo { justify-self: start; padding: 6px 0; }
.kopf__nav { justify-self: center; }
.kopf__pille { display: flex; gap: 2px; padding: 5px; border: 1px solid var(--hell-18); border-radius: 999px; background: rgba(var(--hell-rgb), .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.kopf__pille a { display: block; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: .9375rem; text-decoration: none; color: var(--hell-75); white-space: nowrap; transition: background-color .2s, color .2s; }
.kopf__pille a:hover { background: rgba(var(--hell-rgb), .1); color: var(--hell); }
.kopf__nav .btn--menue { display: none; }
.kopf__cta { justify-self: end; white-space: nowrap; }
.kopf__menuknopf { display: none; }
/* Umschaltpunkt Menü (r074): Mit fünf Punkten ist die Pille 624 px breit; Logo (140 px), Pille und Button brauchen mit 32 px Abstand etwa 1060 px (mit Rollbalken). Darunter steht das Klappmenü. */
@media (max-width: 1059px) {
  .kopf__innen { grid-template-columns: 1fr auto auto; gap: 12px; }
  .kopf__cta { order: 2; }
  .kopf__menuknopf { order: 3; display: inline-grid; place-items: center; align-content: center; gap: 5px; width: 46px; height: 46px; margin-right: -8px; padding: 0; border: 0; background: none; cursor: pointer; }
  .kopf__menuknopf span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--hell); transition: transform .3s var(--weich), opacity .2s; }
  .menue-offen .kopf__menuknopf span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menue-offen .kopf__menuknopf span:nth-child(2) { opacity: 0; }
  .menue-offen .kopf__menuknopf span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .kopf__nav { display: none; position: fixed; inset: var(--kopf-h) 0 0 0; justify-self: stretch; padding: 32px var(--rand) 40px; overflow-y: auto; background: var(--nacht); }
  .menue-offen { overflow: hidden; }
  .menue-offen .kopf { background: var(--nacht); }
  .menue-offen .kopf__nav { display: flex; flex-direction: column; gap: 34px; }
  .kopf__pille { flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .kopf__pille a { padding: 8px 0; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; color: var(--hell); white-space: normal; }
  .kopf__nav .btn--menue { display: inline-flex; align-self: flex-start; }
}
@media (max-width: 459px) { .kopf__cta { display: none; } }
/* Desktop (seit r013, passend zum Einstieg „Schnittstelle“): Logo links am Seitenrand, Menü und Kontakt rechts; im Einstieg ohne Glasleiste, die Pille ist dunkel hinterlegt (lesbar auf Papier und Dunkel),
   das Logo wird dunkel, solange die Grenze noch rechts davon liegt (main.js setzt .logo-dunkel). Die Glasleiste erscheint erst, wenn der Einstieg zu Ende ist. */
@media (min-width: 900px) {
  .kopf__innen { grid-template-columns: 1fr auto auto; gap: 20px; max-width: none; padding-inline: var(--hs-rand); }
}
@media (min-width: 1060px) {
  .kopf__nav { justify-self: end; }
  .kopf:not(.ist-gescrollt) .kopf__pille { background: rgba(12, 17, 14, .84); }   /* r074: die breitere Pille liegt im Einstieg auch auf der hellen Hälfte, dort braucht die helle Schrift mehr Grund */
}
@media (min-width: 1060px) and (max-width: 1099px) { .kopf__pille a { padding-inline: 12px; } }   /* knapper Platz: nur der Innenabstand der Links wird enger, die Schrift bleibt */
/* Aktiver Bereich (r074): Startseite durch main.js (aria-current="location"), Unterseite „Prototypen & Serie“ fest (aria-current="page"). Nicht nur Farbe: dazu Unterstreichung und etwas hellerer Grund. */
.kopf__pille a[aria-current] { color: var(--hell); background: rgba(var(--hell-rgb), .12); text-decoration: underline; text-decoration-color: var(--gruen-hell); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 1059px) { .kopf__pille a[aria-current] { background: none; text-decoration-thickness: 3px; text-underline-offset: 8px; } }
.kopf__logo .logo__bild--hell { position: absolute; left: 0; top: 6px; opacity: 0; }
.kopf__logo .logo__bild { transition: opacity .3s; }
.kopf.logo-dunkel .logo__bild:not(.logo__bild--hell) { opacity: 0; }
.kopf.logo-dunkel .logo__bild--hell { opacity: 1; }
.menue-offen .kopf.logo-dunkel .logo__bild:not(.logo__bild--hell) { opacity: 1; }
.menue-offen .kopf.logo-dunkel .logo__bild--hell { opacity: 0; }
@media (max-width: 1059px) { html:not(.js) .kopf__menuknopf { visibility: hidden; } }   /* ohne JavaScript tut der Menüknopf nichts */

/* Dezente Leiterbahnen auf dunklen Flächen (Kontakt) */
.bahnen { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bahnen::before, .bahnen::after { content: ""; position: absolute; background: center / contain no-repeat; }
.bahnen::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200' fill='none' stroke='%237CC15A' stroke-opacity='.16' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M320 26H236v44h-70v38h-58'/%3E%3Cpath d='M320 64h-46v52h-84v34h-46'/%3E%3Cpath d='M320 104h-22v58h-70'/%3E%3Ccircle cx='103' cy='108' r='5'/%3E%3Ccircle cx='139' cy='150' r='5'/%3E%3Ccircle cx='223' cy='162' r='5'/%3E%3Ccircle cx='166' cy='70' r='5'/%3E%3C/svg%3E"); }
.bahnen::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 140' fill='none' stroke='%237CC15A' stroke-opacity='.16' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 20h52v36h40v30h51'/%3E%3Cpath d='M0 62h30v44h47'/%3E%3Ccircle cx='148' cy='86' r='5'/%3E%3Ccircle cx='82' cy='106' r='5'/%3E%3Ccircle cx='52' cy='56' r='5'/%3E%3C/svg%3E"); }
.bahnen--kontakt::before { opacity: .6; left: 0; top: 10%; width: clamp(200px, 18vw, 300px); aspect-ratio: 320 / 200; transform: scaleX(-1); }
.bahnen--kontakt::after { display: none; }   /* seit r021 nur noch eine Leiterbahn links oben (zusammen mit der FAQ-Zeichnung sonst zu viel) */
@media (max-width: 899px) { .bahnen { display: none; } }

@keyframes strich { 0% { transform: scaleY(0); opacity: 0; } 35% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* --- 1 Einstieg „Die Schnittstelle“ (Desktop und Handy, seit r013, aus prototyp/hero-test-schnittstelle) ------------------------------------------------------------
   Zwei deckungsgleiche Bildebenen (.hs__welt--dunkel unten, .hs__welt--hell oben) mit gleicher Lage; die helle ist mit clip-path bis --grenze beschnitten (Start 50 %, Ende −6 %, main.js).
   Beide Ebenen nutzen denselben Bildkasten (--zoom 1,05, object-position = Gerätemitte im Bild 49,4 % / 53,3 %), verschoben auf Gerätemitte 48 % Breite / 58 % Höhe (2,5 % tiefer als zuerst, damit es zwischen Überschrift und Unterzeile nicht eng wirkt); der Kasten ragt über die Bühne
   hinaus, es gibt keine verlängerten Ränder. max-width: none ist nötig (img { max-width: 100 % } würde den Kasten kappen). Mitte ≤ Zoom × 53,3 %, sonst entsteht oben ein Streifen. */
.hs { background: #080808; }
.hs__lauf { position: relative; height: 325svh; }   /* Scrollweg: 2,25 Bildschirmhöhen für die Verwandlung plus 1 Bildschirmhöhe, in der der Einstieg noch steht und „Leistungen" darüberfährt (main.js rechnet mit lauf − 2 × Bildschirmhöhe) */
.hs__buehne { --grenze: 50%; position: sticky; top: 0; height: 100svh; overflow: clip; background: #080808; isolation: isolate; }
.hs__welt { --zoom: 1.05; --gx: 49.4%; --gy: 53.3%; --gxn: .494; --gyn: .533; position: absolute; inset: 0; overflow: hidden; }
.hs__welt picture { position: absolute; inset: 0; }
.hs__welt img { position: absolute; max-width: none; width: calc(var(--zoom) * 100%); height: calc(var(--zoom) * 100%); left: calc(48% - var(--zoom) * var(--gx)); top: calc(58% - var(--zoom) * var(--gy)); object-fit: cover; object-position: var(--gx) var(--gy); }
.hs__welt--dunkel { background: #080808; }
/* weicher Verlauf in der Bühnenfarbe am oberen Rand: überdeckt den schmalen Streifen über der Bildkante (oben ist das Bild nur leerer Hintergrund) */
.hs__welt::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16%; pointer-events: none; background: linear-gradient(180deg, var(--rand-ton) 0, var(--rand-ton) 12%, transparent); }
.hs__welt--dunkel { --rand-ton: #080808; }
.hs__welt--hell { --rand-ton: var(--papier); }
.hs__welt--hell { background: var(--papier); clip-path: inset(0 calc(100% - var(--grenze)) 0 0); }
.hs__grenze { position: absolute; top: 0; bottom: 0; left: var(--grenze); width: 1px; background: var(--gruen-hell); transition: opacity .3s; }   /* feine Linie, kein Lichtschein */
.hs__grenze.ist-weg { opacity: 0; }
/* kein z-index an den Texten: sie liegen durch die Reihenfolge über den Bildern, und die Differenz-Mischung braucht das Bild als Hintergrund */
.hs-misch { color: #fff; mix-blend-mode: difference; }   /* weiß auf Dunkel, schwarz auf Papier, exakt an der Grenze */
.hs-akzent { color: var(--gruen-hell); }
.hs-akzent.auf-hell { color: var(--gruen); }
.hs__titel { position: absolute; left: 0; right: 0; top: calc(var(--kopf-h) + 8vh); min-height: 2em; margin: 0; padding: 0 var(--hs-rand); font-weight: 500; font-size: clamp(2.2rem, 4.2vw, 4.6rem); line-height: .96; letter-spacing: -.035em; color: #fff; text-wrap: balance; }   /* 60,5 px bei 1440, höchstens 73,6 px */
.hs__links { position: absolute; left: 0; top: 0; width: 50%; text-align: center; }   /* mittig in der linken Bildschirmhälfte (die Grenze startet bei 50 %), bleibt beim Scrollen stehen */
.hs__rechts { position: absolute; left: 54%; top: 0; width: 8.6em; text-align: left; }   /* zwei Zeilen wie in der Referenz: „Unser“ / „Zusammenspiel.“ (das Wort bleibt ganz) */
.hs__zeile { position: absolute; left: var(--hs-rand); bottom: calc(6vh + var(--kurve-a)); margin: 0; font-weight: 500; font-size: clamp(.9rem, 1.15vw, 1.35rem); line-height: 1.4; letter-spacing: -.005em; color: #fff; mix-blend-mode: difference; }   /* seit r033 kürzer und leiser (etwa 22 % kleiner als r031): erste Zeile mittel, zweite kleiner und leichter */
.hs__zeile span { display: block; }
.hs__zeile span + span { margin-top: 14px; font-size: .92em; font-weight: 400; }   /* seit r133: Nutzenzeile im selben Block, ordnet sich der Erklärung unter */
.hs__zeile { max-width: min(30em, 46vw); text-wrap: balance; }   /* seit r130: ein Erklärsatz statt zwei kurzer Zeilen, bricht auf zwei bis drei Zeilen */
.hs__link { position: absolute; right: calc(var(--hs-rand) - 12px); bottom: calc(6vh - 12px + var(--kurve-a)); display: inline-flex; align-items: center; gap: 10px; min-height: 48px; min-width: 12.6em; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; font-weight: 600; font-size: 1.0625rem; line-height: 1.2; text-decoration: none; color: #fff; transition: color .2s; }   /* immer auf der dunklen Seite; feste Mindestbreite (Breite mit Manrope), damit der rechtsbündige Link beim Laden der Schrift nicht nach links springt (CLS, gemessen r023) */
.hs__link svg { width: 20px; height: 20px; color: var(--gruen-hell); transition: transform .25s var(--weich); }
.hs__link:hover { color: var(--gruen-hell); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.hs__link:hover svg { transform: translateX(4px); }
.hs__hinweis { position: absolute; left: 50%; bottom: 3.5vh; white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; transform: translateX(-50%); font-size: .78rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #fff; mix-blend-mode: difference; opacity: .7; }   /* ohne Übergang: während einer Deckkraft-Animation zeichnet Chrome die Differenz-Mischung als graues Rechteck (gemessen r023) */
.hs__hinweis.weg { opacity: 0; visibility: hidden; }   /* verschwindet sofort mit dem ersten Scrollschritt */
.hs__strich { display: block; width: 1px; height: 46px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8)); transform-origin: top; animation: strich 2.2s var(--weich) infinite; }
html:not(.js) .leistungen { margin-top: calc(-1 * var(--kurve-a)); }   /* ohne Skript kein Darüberfahren, nur die Wölbung */
html:not(.js) .hs__lauf { height: auto; }
html:not(.js) .hs__buehne { position: relative; }
html:not(.js) .hs__hinweis { display: none; }
/* Handy und Tablet hoch (bis 899 px): dieselbe Komposition. Das Gerät füllt die Breite (Bildkasten 195 %, Gerätemitte bei 48 % Breite und 58 % Höhe), die Überschrift steht oben links in zwei Zeilen
   (die Differenz-Mischung färbt den Teil rechts der Grenze hell), Zeile und Link unten. Der Bildkasten ist niedriger als die Bühne: oben und unten laufen seine Ränder per Maske in die Bühnenfarbe aus. */
@media (max-width: 899px) {
  /* Komposition nach Breite und Höhe (seit r048): Überschrift und Erklärung hängen oben, der Kontaktlink unten rechts auf der dunklen Hälfte. Das Gerät sitzt in der Mitte zwischen
     Unterkante der Erklärung (--hs-unter) und Oberkante des Links (--hs-link-oben), also bei hohen Bildschirmen mit gleichmäßig wachsendem Abstand statt einer Leerfläche unter dem Gerät,
     bei kurzen Bildschirmen nie näher als 16 px an der Erklärung (die Klammer lässt dort den Abstand nach oben gewinnen). Größe des Geräts unverändert (halbe sichtbare Höhe ≈ 24 vw). */
  .hs__buehne {
    --hs-fs: clamp(2.3rem, 10.6vw, 3.6rem);   /* Überschriftgröße, damit die Erklärung direkt darunter folgen kann */
    --hs-zf: clamp(.84rem, 3.5vw, .95rem);   /* Schrift der Erklärung */
    --hs-unter: calc(var(--kopf-h) + 4vh + 3.1 * var(--hs-fs) + 16px + 2.85 * var(--hs-zf));   /* Unterkante der Erklärung */
    --hs-link-oben: calc(100svh - 4vh - var(--kurve-a) - 58px);   /* Oberkante des Kontaktlinks (zwei Zeilen) */
    --hs-halb: 24vw;   /* halbe sichtbare Höhe des Geräts */
    --hs-mitte: clamp(calc(var(--hs-unter) + var(--hs-halb) + 16px), calc((var(--hs-unter) + var(--hs-link-oben)) / 2), calc(var(--hs-link-oben) - var(--hs-halb) - 12px));
  }
  .hs__lauf { height: 305svh; }
  .hs__welt { --zoom: 1.95; }
  .hs__welt::after { display: none; }
  .hs__welt img { height: auto; aspect-ratio: 16 / 9; object-fit: fill; left: calc(48% - var(--gxn) * var(--zoom) * 100%); top: calc(var(--hs-mitte) - var(--gyn) * var(--zoom) * 56.25vw);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); }
  .hs__titel { top: calc(var(--kopf-h) + 4vh); min-height: 0; padding: 0 20px; font-size: var(--hs-fs); line-height: .98; }
  .hs__links { position: static; display: block; width: auto; text-align: left; }
  .hs__rechts { position: static; display: block; width: 8em; margin-top: .14em; }   /* bricht in „Unser“ / „Zusammenspiel.“ */
  .hs__zeile { max-width: none; left: 20px; right: 20px; top: calc(var(--kopf-h) + 4vh + 3.1 * var(--hs-fs) + 16px); bottom: auto; font-size: var(--hs-zf); line-height: 1.4; }   /* direkt unter der Überschrift (drei Zeilen à .98 plus Abstand), vor dem Gerät */
  .hs__link { right: 20px; top: calc(var(--hs-mitte) + var(--hs-halb) + 40px); bottom: auto; width: auto; min-width: 0; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 8px; background: rgba(12, 17, 14, .9); font-size: 1rem; line-height: 1.2; white-space: nowrap; }   /* einzeilig (Text und Pfeil bleiben zusammen), auf eigener dunkler Fläche, damit er auch über dem hellen Papier lesbar bleibt; 40 px unter dem Gerät (Gerät selbst unverändert) */
  @media (max-width: 359px) { .hs__link { right: 16px; padding: 10px 14px; font-size: .9375rem; } }
  .hs__hinweis { display: none; }
}

/* --- Helle Abschnitte (seit r009): große Überschriften, Produktkomposition, offene Linie, ruhige FAQ ---------------------
   Zwei helle Flächen: sehr helles warmes Grau (--warm) bei Leistungen, Weiß bei Entwicklungsweg und Fragen (eine zusammenhängende Fläche). Bilder mit weißem Grund
   stehen per mix-blend-mode: multiply ohne Kachel auf der Fläche. Alle Texte stehen immer da; Bewegung nur beim Ansichtswechsel (Leistungen) und beim Öffnen einer Frage. */
.wrap--breit { max-width: var(--hero-breite); }
.leistungen :focus-visible, .weg :focus-visible { outline-color: var(--gruen-text); }   /* dunkleres Grün als Fokusring auf hellem Grund */
.gross { font-size: clamp(2.3rem, 4.4vw, 4.5rem); line-height: 1.02; letter-spacing: -.03em; }
.gross--mittel { font-size: clamp(2rem, 3.3vw, 3.4rem); }

/* --- 2 Leistungen (hell, warmes Grau): ein großes Bild, daneben vier Zeilen ----------------------------------------- */
/* Organischer Übergang (Leitlinie Scrollfluss): der Einstieg bleibt nach der Verwandlung eine Bildschirmhöhe lang stehen, die helle Fläche fährt mit gewölbter Oberkante von unten darüber (die Wölbung ragt schon am Ende der Verwandlung ein Stück ins Bild, dort ist das Gerät bewusst höher gesetzt: Zeile und Link haben --kurve-a Abstand mehr); alle anderen Grenzen bleiben gerade */
.leistungen { position: relative; margin-top: calc(-100svh - var(--kurve-a)); padding: calc(var(--kurve-a) + clamp(64px, 6.5vw, 96px)) 0 clamp(56px, 6vw, 80px); border-radius: 50% 50% 0 0 / var(--kurve-a) var(--kurve-a) 0 0; background: var(--warm); }
.produkt { --z: 1; --px: .5; --py: .5; --dx: 0%; --dy: 0%; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(16px, 2vw, 32px); }
/* Ansichten im selben Bild: Bildausschnitt (Zoom --z auf den Punkt --px/--py, Anteile von Breite und Höhe) und Lage des grünen Bezugspunkts (--dx/--dy ab Bildmitte, auf Chip, Gehäuse und Diagramm). Nur ab 900 px, gesetzt von main.js. */
.produkt[data-ansicht="hardware"] { --z: 1.515; --px: .289; --py: .524; --dx: -6.3%; --dy: 1.2%; }
.produkt[data-ansicht="software"] { --z: 1.894; --px: .252; --py: .524; }   /* vorher 2,7: Ausschnitt war sichtbar weich */
.produkt[data-ansicht="geraet"] { --z: 1.326; --px: .247; --py: .536; --dx: 3.8%; --dy: 32.4%; }
.produkt[data-ansicht="apps"] { --z: 1.704; --px: .764; --py: .536; --dx: 16.9%; --dy: -12%; }
.produkt__bild { margin: 0; }
.produkt__flaeche { position: relative; aspect-ratio: 1212 / 800; overflow: hidden; background: var(--warm); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent); mask-composite: intersect; }
.produkt__flaeche img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; mix-blend-mode: multiply; transform-origin: 0 0; transform: translate(calc(50% - var(--z) * var(--px) * 100%), calc(50% - var(--z) * var(--py) * 100%)) scale(var(--z)); transition: transform 1.1s var(--weich); }
.produkt__punkt { position: absolute; left: calc(50% + var(--dx)); top: calc(50% + var(--dy)); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 4px rgba(255, 255, 255, .85); opacity: 0; transition: opacity .5s var(--weich) .2s, left .9s var(--weich), top .9s var(--weich); }
.produkt[data-ansicht="hardware"] .produkt__punkt, .produkt[data-ansicht="software"] .produkt__punkt, .produkt[data-ansicht="geraet"] .produkt__punkt, .produkt[data-ansicht="apps"] .produkt__punkt { opacity: 1; }
/* Maßlinie unter dem Bild mit sachlicher Beschriftung */
.produkt__mass { display: flex; align-items: center; gap: 14px; margin-top: 14px; font-size: .875rem; line-height: 1.4; color: var(--tinte-70); }
.produkt__mass::before, .produkt__mass::after { content: ""; flex: 1 1 20px; height: 11px; background: linear-gradient(var(--tinte-30), var(--tinte-30)) 0 50% / 100% 1px no-repeat; }
.produkt__mass::before { border-left: 1px solid var(--tinte-30); }
.produkt__mass::after { border-right: 1px solid var(--tinte-30); }
.produkt__ausschnitt { font-weight: 700; color: var(--gruen-text); }
.produkt__ausschnitt:empty { display: none; }
.produkt__liste { counter-reset: leistung; }
.leistung { counter-increment: leistung; display: grid; grid-template-columns: 3rem minmax(0, 1fr); padding: 18px 0 22px; border-top: 1px solid var(--tinte-15); transition: border-color .3s, box-shadow .3s; }
.leistung:last-child { border-bottom: 1px solid var(--tinte-15); }
.leistung::before { content: counter(leistung, decimal-leading-zero); content: counter(leistung, decimal-leading-zero) / ""; grid-row: 1 / span 2; padding-top: .55em; font-weight: 700; font-size: .8125rem; letter-spacing: .08em; color: var(--tinte-60); transition: color .3s; }
.leistung > * { grid-column: 2; }
.leistung h3 { font-size: clamp(1.35rem, 1.75vw, 1.7rem); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.leistung .mehr-link { margin-top: 6px; }
.leistung p { margin: 8px 0 0; font-size: clamp(1rem, .94rem + .2vw, 1.0625rem); color: var(--tinte-70); }
.leistung.ist-aktiv { border-top-color: var(--gruen); box-shadow: 0 -1px 0 var(--gruen); }
.leistung.ist-aktiv::before { color: var(--gruen-text); }
.leistung__wahl { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; line-height: inherit; text-align: left; color: inherit; cursor: pointer; text-wrap: balance; }
.leistung__wahl:hover { text-decoration: underline; text-decoration-color: var(--gruen); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.leistungen__einleitung { max-width: 38rem; margin: clamp(14px, 1.4vw, 20px) 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--tinte-70); text-wrap: balance; }
#leistungen-titel { text-wrap: balance; }
@media (max-width: 599px) { #leistungen-titel br { display: none; } }   /* r132: auf dem Handy kein fester Umbruch, „was“ steht sonst allein in einer Zeile */
.leistungen__einleitung + .produkt, .leistungen__nutzen + .produkt { margin-top: clamp(20px, 2.4vw, 36px); }
.leistungen__branchen { margin: clamp(32px, 4vw, 56px) 0 0; font-size: var(--text-klein); color: var(--tinte-70); }
.leistungen__branchen strong { color: var(--tinte); }
@media (max-width: 899px) {   /* Handy und Tablet: statisches Gesamtbild, keine Auswahl, kein Hover */
  .produkt { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .produkt__flaeche { -webkit-mask-image: none; mask-image: none; }   /* seit r133 ist der Leerrand im Bild selbst abgeschnitten */
  .produkt__zeile2, .produkt__tipp { display: none; }
  .leistung { grid-template-columns: 2.6rem minmax(0, 1fr); padding: 16px 0 18px; }
}

/* --- 4 Entwicklungsweg (hell, weiß): offene Linie mit fünf unterschiedlich gewichteten Stationen ------------------------ */
.weg { padding: clamp(64px, 7vw, 100px) 0 clamp(32px, 3.6vw, 52px); background: var(--papier); }   /* unten kürzer (seit r031): die Wölbung der Filmsektion kommt dazu */
.weg__kopf h2 { max-width: 11.5em; }
.weg__einleitung { max-width: 36rem; margin: clamp(16px, 1.6vw, 22px) 0 0; color: var(--tinte-70); text-wrap: pretty; }
.weg__schritte { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1.25fr); column-gap: clamp(20px, 2.4vw, 36px); margin-top: clamp(32px, 4vw, 56px); }
.weg__schritte::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--tinte-30); }   /* die Linie läuft rechts offen aus */
.weg__schritte::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border-top: 1px solid var(--tinte-30); border-right: 1px solid var(--tinte-30); transform: rotate(45deg); transform-origin: 100% 0; }
.weg__schritt { position: relative; padding-top: 34px; }
.weg__schritt::before { content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--tinte); }
.weg__nr { display: block; margin-bottom: 10px; font-weight: 500; font-size: clamp(2.4rem, 3.4vw, 3.6rem); line-height: 1; letter-spacing: -.03em; color: rgba(20, 26, 22, .16); }
.weg__schritt h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.25; -webkit-hyphens: auto; hyphens: auto; }   /* schmale Spalten bei 900 bis 1100 px: „Systemarchitektur“ trennt statt zu überlappen (gemessen r023) */
.weg__schritt p { margin: 8px 0 0; max-width: 20rem; font-size: var(--text-klein); color: var(--tinte-70); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.weg__schritt--prototyp::before { left: -1px; top: -8px; width: 17px; height: 17px; background: var(--gruen); box-shadow: 0 0 0 5px rgba(var(--gruen-rgb), .18); }
.weg__schritt--prototyp .weg__nr { color: var(--gruen-text); }
.weg__schritt--prototyp h3 { font-size: 1.4rem; }
.weg__schritt:last-child::before { background: transparent; border: 1.5px solid var(--tinte); }   /* Ziel: Übergabe in die Serie */
.weg__bild { position: absolute;   /* kein z-index: sonst bildet das Bild einen Stapelkontext und multiply wirkt nicht gegen den Papierton */
  left: 0; bottom: calc(100% + 26px); width: min(140%, 25rem); margin: 0; }
.weg__bild::after { content: ""; position: absolute; left: 7px; top: 100%; width: 1px; height: 26px; background: var(--gruen); }   /* Bezug: vom Bild zur Station */
.weg__bild img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }   /* weißer Bildgrund löst sich auf dem Papierton auf */
.weg__bild figcaption { margin-top: 8px; font-size: .875rem; line-height: 1.4; color: var(--tinte-70); }
@media (max-width: 1159px) {   /* bis 1159 px (seit r031, vorher 899): senkrechter Ablauf, Linie links, Aufnahme unter dem Text von Schritt 4; fünf Spalten erst, wenn sie ohne Wortbrüche passen */
  .weg__schritt p { max-width: 34rem; }
  .weg__schritte { grid-template-columns: minmax(0, 1fr); row-gap: 22px; padding-left: 28px; margin-top: 28px; }
  .weg__schritte::before { left: 4px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .weg__schritte::after { left: 0; right: auto; top: auto; bottom: -1px; transform: rotate(135deg); transform-origin: 100% 0; }
  .weg__schritt { padding-top: 0; }
  .weg__schritt::before { left: -28px; top: 8px; }
  .weg__schritt--prototyp::before { left: -32px; top: 4px; }
  .weg__nr { margin-bottom: 2px; font-weight: 700; font-size: 1rem; letter-spacing: .06em; color: var(--tinte-60); }
  .weg__bild { position: relative; left: auto; bottom: auto; width: min(100%, 21rem); margin: 16px 0 0; order: 1; }
  .weg__bild::after { display: none; }
  .weg__schritt--prototyp { display: flex; flex-direction: column; }
  .weg__schritt--prototyp .weg__nr, .weg__schritt--prototyp h3, .weg__schritt--prototyp p { order: 0; }
}

@media (min-width: 900px) and (max-width: 1159px) {
  .weg__bild { position: absolute; right: 0; top: -36px; left: auto; bottom: auto; width: min(34%, 20rem); margin: 0; order: 0; }
}

@media (min-width: 1160px) {   /* fünf Spalten: Wörter bleiben ganz, die Zeilen brechen nur an Leerzeichen (balance trennte „Anforderun-gen“); Trennhilfen greifen nur, wenn ein Wort wirklich nicht passt */
  .weg__schritt h3 { text-wrap: wrap; }
  .weg__schritt p { -webkit-hyphens: manual; hyphens: manual; }
}

/* --- 4b Projekt-Teaser (Gestaltung seit r066 nach Referenz exec-4ace7905): kompakte Gruppe aus Projekttext, PDF-Button und offener Gruppennotiz links und dem geschlossenen Konzeptgerät rechts ---
   Ab 900 px liegt die Zone (.teaser__zone) absolut in der unteren Hälfte der Sektion: ihre SVG-Kurve (.teaser__kante) ist der echte Farbwechsel zu den FAQs (links tief, nach rechts steil ansteigend hinter dem Gerät);
   das Gerät (.teaser__bild) liegt in einer eigenen Ebene darüber (z-index 3), etwa das untere Drittel steht vor dem Dunkelgrün, nichts wird beschnitten. Darunter (Handy, Tablet) stehen die Teile untereinander,
   das Gerät ragt nur wenig ins Dunkelgrün. Keine Animation. */
.teaser { --kz: clamp(90px, 15vw, 230px); position: relative; padding: clamp(36px, 3.6vw, 56px) 0 0; background: var(--warm); color: var(--tinte); }   /* kein overflow, kein z-index: das Gerät darf über die Sektionsgrenze */
/* Die Hintergrundskizze (r073, assets/img/projekt-skizze.webp, werkzeuge/skizze-test-bauen.js) ist seit r076 ausgeblendet: die Stationslinie über dem Gerät übernimmt die Aufgabe, die rechte Fläche zu verbinden. */
.teaser .wrap--breit { max-width: 1180px; }
.teaser__innen { display: block; position: relative; z-index: 4; pointer-events: none; }   /* Text über der aufsteigenden Kante; die leere Fläche daneben lässt Mausereignisse zum Gerät durch */
.teaser__text { max-width: min(100%, 36rem); pointer-events: auto; }
.teaser__dach { margin: 0; font-weight: 500; font-size: .8125rem; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-60); }
.teaser__titel { margin-top: clamp(14px, 1.6vw, 22px); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; }
.teaser .teaser__titel { font-size: clamp(2.1rem, 1rem + 2.6vw, 3.4rem); line-height: 1.04; }   /* r076: kräftigere Aussage, auf dem Handy kleiner */
.teaser__beschreibung { max-width: 30rem; margin: clamp(14px, 1.5vw, 20px) 0 0; font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.5; color: var(--tinte-70); text-wrap: balance; }
.teaser__knopf { margin-top: clamp(20px, 2.2vw, 28px); max-width: 100%; text-align: left; }
.teaser__hinweis { margin: 14px 0 0; font-size: .875rem; line-height: 1.45; color: var(--tinte-70); }   /* r078: etwas größer und kontrastreicher, bleibt dem Button untergeordnet */
/* Gruppenlink (r076): kompakter offener Link, links eine feine grüne Linie, dem PDF-Button untergeordnet (kleiner, kein Button, keine Karte) */
.gruppenlink { margin: clamp(18px, 1.8vw, 26px) 0 0; padding-left: 18px; border-left: 2px solid var(--gruen); }
.gruppenlink a { display: inline-block; padding: 10px 0; font-weight: 500; font-size: 1rem; line-height: 1.3; text-decoration: underline; text-decoration-color: var(--tinte-30); text-decoration-thickness: 1px; text-underline-offset: 6px; color: var(--tinte); transition: color .2s, text-decoration-color .2s; }
.gruppenlink a svg { display: inline-block; width: 15px; height: 15px; margin-left: 8px; vertical-align: -2px; transition: transform .25s var(--weich); }
.gruppenlink a:hover { color: var(--gruen-text); text-decoration-color: var(--gruen-text); }
.gruppenlink a:hover svg { transform: translate(2px, -2px); }
.gruppenlink a:focus-visible { outline: 2px solid var(--gruen-text); outline-offset: 3px; border-radius: 3px; }
.teaser__zone { position: relative; height: var(--kz); margin-top: clamp(16px, 2vw, 28px); }
.teaser__kante { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: var(--nacht-2); }   /* Beige über der Kurve, Dunkelgrün darunter */
.teaser__kante-hell { fill: var(--warm); }
.teaser__huelle { position: relative; height: 100%; }
.teaser__bild { position: absolute; right: var(--rand); bottom: calc(var(--kz) * .2); z-index: 3; width: min(100%, 560px); margin: 0; }
.teaser__geraet { margin: 0; }
.teaser__bild img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 18px rgba(20, 26, 22, .22)); }
/* Vier Projektstationen über dem Gerät (r076): reine Übersicht, keine Schalter (kein Hover, kein Zeiger). Eine feine Linie verbindet die Mittelpunkte der vier Spalten, die Nummernringe sitzen mit Beige-Grund darauf. */
.teaser__stationen { position: absolute; left: 0; right: 0; bottom: calc(100% + clamp(14px, 1.8vw, 26px)); margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.teaser__stationen::before { content: ""; position: absolute; top: 12px; left: 12.5%; right: 12.5%; height: 1px; background: var(--tinte-30); }
.teaser__stationen li { position: relative; text-align: center; }
.teaser__nr { position: relative; display: grid; place-items: center; width: 25px; height: 25px; margin: 0 auto; border: 1.5px solid var(--gruen); border-radius: 50%; background: var(--warm); font-weight: 700; font-size: .8125rem; line-height: 1; color: var(--gruen-text); }
.teaser__station { display: block; margin-top: 8px; font-weight: 500; font-size: .9375rem; line-height: 1.3; color: var(--tinte-70); }   /* ein weicher Schatten unter dem Gerät */
.teaser__bild figcaption { position: absolute; right: 0; top: calc(100% + 10px); max-width: 15rem; font-size: .875rem; line-height: 1.45; text-align: right; color: rgba(244, 246, 243, .9); }   /* liegt auf dem Dunkelgrün */
@media (min-width: 900px) {
  .teaser { padding-bottom: clamp(84px, 8vw, 116px); }   /* das Beige bleibt links unter der Notiz tief genug */
  .teaser__text { max-width: 54%; }
  .teaser__zone { position: absolute; left: 0; right: 0; bottom: 0; height: 66%; margin: 0; }   /* untere Hälfte der Sektion; die Kurve steigt von links unten nach rechts hinter das Gerät */
  .teaser__bild { right: calc(var(--rand) + clamp(0px, 1.8vw, 30px)); bottom: clamp(44px, 6vw, 92px); width: min(45vw, 620px); }
  .teaser__bild figcaption { max-width: none; }
  .teaser__stationen { left: 10%; }   /* die Stationslinie beginnt etwas rechts vom Geräterand, damit sie nicht an die Überschrift stößt */
}
@media (min-width: 1200px) { .teaser__stationen { left: 15%; } }
@media (max-width: 899px) {
  .teaser { --kz: clamp(70px, 17vw, 120px); --sh: 76px; }
  .teaser__zone { height: calc(var(--kz) * 1.05 + var(--gh) - 62px + var(--sh)); --gh: calc(min(100vw - 32px, 340px) * .47); }   /* Gerät steht unter Text und Notiz; die Zone ist so hoch, dass es in die Kurve ragt (r071: 50 px weniger Leerfläche über dem Gerät) */
  .teaser__kante { top: auto; bottom: 0; height: calc(var(--kz) * 1.3); }
  .teaser__bild { width: min(calc(100% - 2 * var(--rand)), 340px); bottom: calc(var(--kz) * .1); }
  .teaser__zone { margin-top: 20px; }
}
@media (min-width: 600px) and (max-width: 899px) { .teaser__zone { --gh: calc(min(100vw - 32px, 480px) * .47); height: calc(var(--kz) * .8 + var(--gh) - 62px + var(--sh)); } .teaser__bild { width: min(calc(100% - 2 * var(--rand)), 480px); } }   /* Tablet: das Gerät darf größer stehen */
@media (max-width: 420px) { .gruppenlink a { font-size: .9375rem; } }   /* der Pfeil soll nicht allein in die nächste Zeile fallen */
@media (max-width: 420px) {   /* schmal: Stationen als 2 x 2, Nummer links, Beschriftung rechts, Lesereihenfolge 1, 2 / 3, 4 */
  .teaser { --sh: 84px; }
  .teaser__stationen { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; column-gap: 12px; }
  .teaser__stationen::before { display: none; }
  .teaser__stationen li { display: flex; align-items: center; gap: 10px; text-align: left; }
  .teaser__nr { margin: 0; flex: none; }
  .teaser__station { margin-top: 0; }
}
@media print { .teaser { background: #fff; } .teaser__kante { display: none; } }

/* --- 5 Fragen und Antworten (dunkel seit r050, vorher hell) ---------------------------------------- */
.fragen { position: relative; overflow: clip; padding: clamp(64px, 7vw, 104px) 0 clamp(64px, 6.5vw, 96px); background: var(--nacht-2); color: var(--hell); }   /* dunkel; die obere Kante (Farbwechsel vom Beige) bildet seit r059 die Kurve im Projekt-Teaser, die FAQ beginnt eben */
/* Rückbezug zum Hero: die Zeichnung (Linien mit Transparenz, aus der Hero-Zeichnung abgeleitet, bilder-original/faq-zeichnung-linien.png) links unten, am linken und unteren Rand angeschnitten,
   blendet nach rechts und oben aus. Rein dekorativ, statisch, ohne Mausfang, löst keinen Scrollweg und keinen Layoutsprung aus (absolut, die Fragenliste bleibt frei). */
.fragen__skizze { position: absolute; left: -5vw; bottom: -3vw; z-index: 0; width: min(54vw, 780px); aspect-ratio: 3 / 2; opacity: .12; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, #000 48%, transparent 92%), linear-gradient(0deg, #000 45%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000 48%, transparent 92%), linear-gradient(0deg, #000 45%, transparent 100%); mask-composite: intersect; }
.fragen__skizze img { width: 100%; height: 100%; filter: invert(1); mix-blend-mode: screen; }   /* auf Dunkel umgekehrt: helle Linien (die Zeichnung hat weißen Grund und dunkle Linien) */   /* weißer Grund + dunkle Linien, auf dem Papierton durchsichtig (seit r023: lazy, 85 statt 215 KB) */
.fragen__raster { position: relative; z-index: 1; }
@media (max-width: 899px) { .fragen__skizze { display: none; } }   /* Handy: weglassen, Ruhe und Seitenlänge gehen vor */
.fragen__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40rem); justify-content: space-between; column-gap: clamp(32px, 7vw, 112px); align-items: start; }
.fragen__kopf { position: sticky; top: calc(var(--kopf-h) + 32px); }
.fragen__einleitung { max-width: 22rem; margin: clamp(18px, 2vw, 28px) 0 0; color: var(--hell-75); }
.fragen__einleitung a { color: var(--hell); font-weight: 700; }
.faq { margin-top: clamp(40px, 6vw, 104px); }   /* Versatz nach unten: die Liste beginnt tiefer als die Überschrift */
.faq details { position: relative; border-top: 1px solid var(--hell-18); }
.faq details:last-child { border-bottom: 1px solid var(--hell-18); }
.faq details::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--gruen-hell); transition: width .45s var(--weich); }
.faq details[open]::before { width: 56px; }   /* dezenter grüner Akzent an der geöffneten Frage */
.faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; min-height: 66px; padding: 22px 0; list-style: none; cursor: pointer; font-weight: 600; font-size: clamp(1.0625rem, .98rem + .35vw, 1.25rem); line-height: 1.35; letter-spacing: -.005em; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; background: linear-gradient(var(--gruen-hell), var(--gruen-hell)) center / 100% 2px no-repeat, linear-gradient(var(--gruen-hell), var(--gruen-hell)) center / 2px 100% no-repeat; transition: background-size .35s var(--weich); }
.faq details[open] summary::after { background-size: 100% 2px, 2px 0; }
.faq summary:hover { color: var(--gruen-hell); }
.faq__antwort { max-width: 38rem; padding: 0 48px 26px 0; color: var(--hell-75); }
.faq__antwort p { margin: 0; }
.faq__antwort a { color: var(--hell); font-weight: 700; }
@supports selector(::details-content) {   /* ruhiges Öffnen, wo der Browser es kann; sonst öffnet sich die Frage sofort */
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .4s var(--weich), opacity .3s, content-visibility .4s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
}
@media (max-width: 899px) {
  .fragen { padding-top: 56px; }
  .fragen__raster { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .fragen__kopf { position: static; }
  .faq { margin-top: 0; }
  .faq__antwort { padding-right: 0; }
}

/* --- 3 Risiken früh erkennen (dunkel, seit r019): drei große Schalter, die Platine rechts; Maus, Fokus oder Tipp öffnet ein Thema und lässt seine Markierungen aufleuchten ------------------- */
.risiko { padding: clamp(72px, 8vw, 120px) 0 clamp(64px, 7vw, 104px); }
.risiko > .wrap, .risiko .wrap { max-width: var(--hero-breite); }
.risiko__kopf { margin-bottom: clamp(32px, 4vw, 56px); }
.risiko__titel { max-width: 22ch; font-size: clamp(1.9rem, 3.6vw, 3.4rem); }
.risiko__unter { max-width: 40rem; margin: 14px 0 0; color: var(--hell-75); }
.risiko__mitte { position: relative; display: grid; grid-template-columns: minmax(320px, 27rem) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.risiko__liste { display: grid; align-content: start; gap: 0; min-height: 27rem; border-bottom: 1px solid var(--hell-18); }   /* feste Mindesthöhe: beim Öffnen und Schließen springt nichts darunter */
.risiko__platine { margin: clamp(0px, 1.5vw, 24px) 0 0 clamp(0px, calc((100vw - 900px) * .4), 40px); }   /* linker Rand wie der Browser-Standard von figure (40 px) ab 1000 px, darunter fließend 0: bei 900 px ragte das Bild 19 px über den Bildschirm (gemessen r023) */
.risiko__punkt { border-top: 1px solid var(--hell-18); border-radius: 0; transition: border-color .3s, background-color .3s, box-shadow .3s; }   /* geschlossen nur eine Haarlinie, keine Karte */
.risiko__wahl { display: flex; align-items: center; gap: 18px; width: 100%; margin: 0; padding: 18px 20px; border: 0; border-radius: 12px; background: none; font: inherit; text-align: left; color: var(--hell-75); cursor: pointer; transition: color .3s, background-color .3s; }
.risiko__name { font-weight: 700; font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); line-height: 1.2; letter-spacing: -.01em; }
.risiko__nr { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--hell-18); border-radius: 50%; font-weight: 800; font-size: 1rem; color: var(--hell-75); transition: border-color .3s, color .3s, background-color .3s; }
.risiko__wahl:hover { background: rgba(var(--hell-rgb), .05); color: var(--hell); }
.risiko__punkt.ist-offen { border-top-color: transparent; border-radius: 12px; background: rgba(var(--hell-rgb), .05); box-shadow: inset 2px 0 0 var(--gruen-hell); }   /* aktives Thema: ruhige Hinterlegung und grüne Kante */
.risiko__punkt.ist-offen .risiko__wahl { color: var(--hell); }
.risiko__punkt.ist-offen .risiko__nr { background: var(--gruen-hell); border-color: var(--gruen-hell); color: var(--nacht); }
.risiko__text { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s var(--weich), visibility 0s .45s; }
.risiko__text-innen { min-height: 0; overflow: hidden; padding: 0 22px 0 82px; }
.risiko__text-innen p { margin: 0; padding-top: 2px; font-size: .9875rem; line-height: 1.55; color: var(--hell-75); }
.risiko__punkt.ist-offen .risiko__text { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .45s var(--weich), visibility 0s; }
.risiko__punkt.ist-offen .risiko__text-innen { padding-bottom: 22px; }
.risiko__begriffe { display: block; margin-top: 10px; font-weight: 600; font-size: .875rem; letter-spacing: 0; color: var(--hell-75); }   /* deutsche Bezeichnung vorn */
.risiko__kuerzel { font-weight: 700; font-size: .75rem; letter-spacing: .06em; color: var(--gruen-hell); opacity: .8; }   /* Kürzel ergänzend, kleiner */
.risiko__platine { position: relative; width: 100%; }   /* kein Rahmen, keine Rundung: die Bildränder laufen weich in den Hintergrund aus */
.risiko__platine img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); mask-composite: intersect; }
/* Markierungen: alle als kleine blasse Punkte sichtbar, die des offenen Themas leuchten mit Ring und Etikett */
.marke { position: absolute; z-index: 2; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--gruen-hell); box-shadow: 0 0 0 3px rgba(12, 17, 14, .8); opacity: .35; transform: scale(.7); transition: opacity .35s var(--weich), transform .45s var(--weich); }
.marke::before { content: ""; position: absolute; inset: -10px; border: 1.5px solid var(--gruen-hell); border-radius: 50%; opacity: 0; }
.marke.ist-aktuell { opacity: 1; transform: scale(1); }
.marke.puls::before { animation: ring 1.4s ease-out 2; }   /* seit r035 nur zweimal beim Wechsel des Themas, danach Ruhe (Klasse .puls setzt main.js, nimmt sie nach animationend wieder weg) */
@media (prefers-reduced-motion: reduce) { .marke.puls::before { animation: none; } }
@keyframes ring { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.marke__etikett { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); padding: 6px 12px; border: 1px solid rgba(var(--gruen-hell-rgb), .55); border-radius: 999px; background: rgba(12, 17, 14, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-weight: 700; font-size: .8125rem; line-height: 1.2; white-space: nowrap; color: var(--hell); opacity: 0; transition: opacity .3s var(--weich) .1s; }
.marke__etikett::before { content: ""; position: absolute; left: -10px; top: 50%; width: 10px; height: 1px; background: rgba(var(--gruen-hell-rgb), .55); }
.marke.ist-aktuell .marke__etikett { opacity: 1; border-color: var(--gruen-hell); background: var(--gruen-hell); color: var(--nacht); }
.marke--links .marke__etikett { left: auto; right: 22px; }
.marke--links .marke__etikett::before { left: auto; right: -10px; }
@media (min-width: 900px) and (max-width: 1199px) { .marke--4 .marke__etikett { left: auto; right: 22px; } .marke--4 .marke__etikett::before { left: auto; right: -10px; } }   /* r071: das lange Etikett lag am rechten Bildrand und ragte bei 900 bis 1150 px über den Bildschirm */
/* Lage der sechs Markierungen auf dem Bild platine-risiko (Prozent von links / oben). Bei neuem Bild neu setzen. Gruppen: siehe data-gruppe in index.html.
   „Nicht stornierbar“ steht jetzt mit dem Etikett nach links (r019), damit es nie mit „Keine Zweitquelle“ kollidiert. */
.marke--1 { left: 48.7%; top: 47%; }     /* Mikrocontroller (QFP) in der Mitte: abgekündigt */
.marke--2 { left: 24%; top: 50.2%; }     /* kleiner IC links: nicht für Neuentwicklungen */
.marke--3 { left: 36.8%; top: 22.7%; }   /* Elektrolytkondensator oben links: nicht stornierbar */
.marke--4 { left: 65%; top: 68%; }       /* IC unten rechts: letzte Bestellmöglichkeit */
.marke--5 { left: 60%; top: 39%; }       /* Quarz: lange Lieferzeit */
.marke--6 { left: 69%; top: 24%; }       /* Spannungsregler mit Kühlkörper, Etikett links: keine Zweitquelle */
@media (max-width: 899px) {   /* Handy und Tablet hoch: alle Themen offen, alle Markierungen sichtbar, Etiketten nur am Desktop */
  .risiko { padding: 72px 0 64px; }
  .risiko__titel { font-size: clamp(1.8rem, 7.4vw, 2.4rem); }
  .risiko__mitte { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .risiko__liste { min-height: 0; }
  .risiko__platine { order: -1; margin: 0; }   /* margin: 0 gegen den Browser-Standardrand von figure (40 px links): sonst ragt das Bild am Handy 24 px über den Bildschirm (gemessen r023) */
  .marke { opacity: 1; transform: none; }
  .marke__etikett { display: none; }
  .risiko__wahl { pointer-events: none; padding: 16px 18px 6px; }
  .risiko__nr { width: 36px; height: 36px; font-size: .9rem; background: none; border-color: var(--gruen-hell); color: var(--gruen-hell); }
  .risiko__punkt, .risiko__punkt.ist-offen { border-top-color: var(--hell-18); border-radius: 0; background: none; box-shadow: none; }
  .risiko__punkt .risiko__wahl { color: var(--hell); }
  .risiko__text, .risiko__punkt.ist-offen .risiko__text { grid-template-rows: 1fr; visibility: visible; }
  .risiko__text-innen { padding: 0 18px 18px 72px; }
  .risiko__punkt.ist-offen .risiko__nr { background: none; color: var(--gruen-hell); border-color: var(--gruen-hell); }
}
/* Ohne JavaScript: alle Themen offen, alle Markierungen sichtbar */
html:not(.js) .marke { opacity: 1; transform: none; }
html:not(.js) .risiko__text { grid-template-rows: 1fr; visibility: visible; }
html:not(.js) .risiko__text-innen { padding-bottom: 22px; }
html:not(.js) .risiko__wahl { pointer-events: none; }

/* --- 4b Anschluss an die Gruppe (dunkel): zwischen Entwicklungsweg und FAQ ------------------------------------------------- */

/* Drei offene Leistungszeilen an einer feinen senkrechten Linie mit drei grünen Punkten (r076), keine Karten */
/* Danke-Fenster nach dem Absenden des Formulars (seit r101): klein, hell, grüne Linie oben */
.danke { width: min(88vw, 380px); max-width: none; margin: auto; padding: 28px 28px 24px; border: 0; border-top: 4px solid var(--gruen); border-radius: 14px; background: var(--papier); color: var(--tinte); text-align: left; box-shadow: 0 24px 60px rgba(6, 9, 7, .35); }
.danke::backdrop { background: rgba(6, 9, 7, .55); }
.danke[open] { animation: filmbox-auf .28s var(--weich); }
.danke__titel { margin: 0 0 6px; font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.danke__text { margin: 0 0 20px; line-height: 1.5; color: var(--tinte-70); }
.danke__zu { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .danke[open] { animation: none; } }
@keyframes filmbox-auf { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }

/* --- 6 Kontakt (hell, beige; seit r098 statt dunkel, Wunsch Tobias 28.10.2026) ------------------------------------------------------- */
/* Oberkante asymmetrisch gewölbt (Höhepunkt bei 62 % der Breite), überdeckt die untere Polsterung der FAQ (dunkel); unten wölbt sich der Fuß (dunkel) in den Abschnitt (.fuss--kurve).
   Felder weiß auf Beige, Schrift Tinte, kleine grüne Schrift und Linien im Hell-Grün der Website (Brandkit: Text #2F6B1E, Linien #4F8A33). */
.kontakt { position: relative; margin-top: calc(-1 * var(--kurve-b)); padding: calc(var(--kurve-b) + clamp(56px, 6vw, 88px)) 0 calc(var(--kurve-b) + clamp(64px, 7vw, 104px)); border-radius: 62% 38% 0 0 / var(--kurve-b) var(--kurve-b) 0 0; background: var(--warm); color: var(--tinte); }
.kontakt__kopf { position: relative; z-index: 1; max-width: 62rem; margin-bottom: clamp(40px, 5vw, 72px); text-align: center; }
.kontakt__kopf .kontakt__einleitung { margin-inline: auto; }
.kontakt__raster { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); column-gap: clamp(36px, 6vw, 96px); row-gap: 0; align-items: start; }
.kontakt h2 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); -webkit-hyphens: auto; hyphens: auto; color: var(--tinte); }
.kontakt__einleitung { max-width: 30rem; margin: var(--luft-2) 0 0; color: var(--tinte-70); }
.formular__vorspann { margin: 0 0 20px; max-width: 40rem; text-wrap: balance; padding-left: 14px; border-left: 2px solid var(--gruen); font-size: .9375rem; line-height: 1.5; color: var(--tinte-70); }   /* Hinweis über dem Formular (seit r031) */
/* Firmengebäude im Kontakt (seit r105): Desktop links unter den Direktkontakten, Handy unter dem Formular (Textblock wird dort per display: contents aufgelöst) */
.kontakt__haus { margin: 40px 0 0; max-width: 28rem; }
.kontakt__haus img { display: block; width: 100%; height: auto; border-radius: 14px; }
.kontakt__haus figcaption { margin-top: 10px; font-size: .875rem; line-height: 1.4; color: var(--tinte-60); }
@media (max-width: 999px) { .kontakt__text { display: contents; } .kontakt__direkt { order: 1; } .kontakt__formular { order: 2; } .kontakt__haus { order: 3; margin-top: 8px; max-width: none; } }
.kontakt__direkt { margin-top: 0; padding-top: 22px; border-top: 1px solid var(--tinte-30); }
.kontakt__direkt-titel { margin-bottom: 8px; font-family: var(--schrift-hand); font-weight: 600; font-size: 1.5rem; color: var(--gruen-text); }
.kontakt__direkt a { display: block; width: fit-content; padding-block: 4px; font-weight: 700; font-size: 1.2rem; text-decoration: none; color: var(--tinte); transition: color .2s; }
.kontakt__direkt a:hover { color: var(--gruen-text); }
.kontakt__formular { padding: 0; }   /* offene Fläche statt Karte (Leitlinie: keine einheitlichen Karten) */
.formular-status { display: none; margin: 0 0 24px; padding: 16px 18px; border: 1.5px solid var(--gruen); border-radius: 10px; background: rgba(var(--gruen-rgb), .1); color: var(--tinte); }
.formular-status:target { display: block; }
.formular-status a { color: var(--tinte); }
.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.feld { display: grid; align-content: start; gap: 7px; }
.feld--breit { grid-column: 1 / -1; }
.feld label, .feld__titel { font-weight: 600; font-size: .95rem; color: var(--tinte); }
.pflicht { color: var(--gruen-text); }
.feld__optional { font-weight: 400; color: var(--tinte-60); }
.feld input, .feld textarea { width: 100%; padding: 13px 15px; border: 1.5px solid rgba(20, 26, 22, .5); border-radius: 10px; background: #fff; color: var(--tinte); font-size: 1.02rem; transition: border-color .2s, box-shadow .2s; }
.feld input::placeholder, .feld textarea::placeholder { color: rgba(20, 26, 22, .56); }
.feld input:hover, .feld textarea:hover { border-color: rgba(20, 26, 22, .72); }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(var(--gruen-rgb), .22); }
.feld textarea { min-height: 150px; resize: vertical; }
.feld--falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.upload { position: relative; display: flex; align-items: center; gap: 18px; padding: 20px 22px; border: 1.5px dashed rgba(20, 26, 22, .5); border-radius: 12px; background: rgba(255, 255, 255, .55); transition: border-color .2s, background-color .2s; }
.upload:hover, .upload:focus-within, .upload.ist-ziel { border-color: var(--gruen); background: rgba(var(--gruen-rgb), .09); }
.upload input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload svg { flex: none; width: 34px; height: 34px; color: var(--gruen-text); }
.upload__text strong { display: block; font-weight: 600; color: var(--tinte); }
.upload__text span { font-size: var(--text-klein); color: var(--tinte-70); }
.upload__liste { margin-top: 4px; font-size: var(--text-klein); color: var(--tinte-70); }
.upload__liste li::before { content: "+ "; color: var(--gruen-text); font-weight: 700; }
.formular__fuss { grid-column: 1 / -1; margin-top: 6px; }
.formular__fuss .btn { width: 100%; justify-content: space-between; }
.formular__meldung { grid-column: 1 / -1; min-height: 1.5em; margin: 0; font-weight: 600; color: var(--tinte); }
.formular__meldung.ist-ok { color: var(--gruen-text); }
.formular__meldung.ist-fehler { color: #B23A2F; }   /* auf Beige dunkler als --status-fehler (Kontrast 5:1) */
.formular__datenschutz { grid-column: 1 / -1; position: relative; margin: 0; padding-left: 30px; font-size: var(--text-klein); color: var(--tinte-70); }
.formular__datenschutz svg { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; color: var(--gruen-text); }
.formular__datenschutz a { color: var(--tinte); }
@media (max-width: 999px) { .kontakt__raster { grid-template-columns: minmax(0, 1fr); row-gap: var(--luft-4); } }
@media (max-width: 599px) { .formular { grid-template-columns: minmax(0, 1fr); } .kontakt__formular { padding: 0; } .upload { padding: 18px 16px; } }

/* --- Fußbereich (dunkel) --------------------------------------------------------- */
.fuss { position: relative; padding: 0 0 36px; background: var(--nacht); color: var(--hell-75); font-size: 1rem; }
.fuss--allein { margin-top: clamp(40px, 6vw, 80px); padding-top: 8px; }
.fuss--kurve { margin-top: calc(-1 * var(--kurve-b)); padding-top: var(--kurve-b); border-radius: 38% 62% 0 0 / var(--kurve-b) var(--kurve-b) 0 0; }   /* Startseite: Fuß wölbt sich in den hellen Kontakt (seit r098) */
.fuss--kurve .fuss__innen { border-top: 0; padding-top: 40px; }
.fuss__innen { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 48px; border-top: 1px solid var(--hell-18); }
.fuss__logo { padding: 2px 0; }
.fuss__logo .logo__bild { height: 76px; }
.fuss__slogan { margin: 16px 0 8px; font-weight: 700; font-size: .95rem; color: var(--hell); }
.fuss__marke p:last-child { font-size: var(--text-klein); }
.fuss__titel { margin: 0 0 14px; font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hell); }
.fuss li + li { margin-top: 6px; }
.fuss a { text-decoration: none; transition: color .2s; }
.fuss a:hover { color: var(--gruen-hell); }
.fuss address { margin-bottom: 8px; }
.fuss li a { display: inline-block; min-height: 24px; padding: 2px 0; }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 44px; font-size: var(--text-klein); }
@media (max-width: 899px) { .fuss__innen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 499px) { .fuss__innen { grid-template-columns: minmax(0, 1fr); } }

/* --- Unterseiten: Impressum, Datenschutz, 404 (feste dunkle Kopfzeile) ------------------ */
.rechtliches { padding: calc(var(--kopf-h) + clamp(40px, 6vw, 80px)) 0 clamp(60px, 8vw, 110px); }
.rechtliches__innen { max-width: 800px; }
.rechtliches h1 { margin: 4px 0 28px; font-size: clamp(2.4rem, 5vw, 3.8rem); }
.rechtliches h2 { margin: 44px 0 12px; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.15; }
.rechtliches p:not(.notiz), .rechtliches li { color: var(--tinte-70); }
.rechtliches ul { margin: 0 0 1em; padding-left: 1.3em; list-style: disc; }
.rechtliches li + li { margin-top: 4px; }
.rechtliches a { color: var(--gruen-text); font-weight: 600; }
.rechtliches__stand { font-weight: 600; }
.rechtliches .platzhalter { color: var(--gruen-text); }
.rechtliches__download { margin: 6px 0 22px; }
.rechtliches__download a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.rechtliches__download svg { flex: none; width: 18px; height: 18px; }
.rechtliches__download small { font-weight: 500; font-size: .875rem; color: var(--tinte-60); }
@media print {   /* r080: Druckansicht = Grundlage des PDFs (werkzeuge/datenschutz-pdf-bauen.js) */
  body { background: #fff; }
  .fuss, .sprunglink, .rechtliches__download, .rechtliches .notiz { display: none !important; }
  .rechtliches { padding: 0; }
  .rechtliches__innen { max-width: none; }
  .rechtliches h1 { margin: 0 0 10pt; font-size: 26pt; color: #000; }
  .rechtliches h2 { margin: 18pt 0 6pt; font-size: 13pt; color: #000; break-after: avoid; }
  .rechtliches p, .rechtliches li { font-size: 10pt; line-height: 1.45; color: #222; }
  .rechtliches a { color: #222; text-decoration: underline; }
  .rechtliches .platzhalter { color: #000; }
}
.nicht-gefunden { padding: calc(var(--kopf-h) + clamp(60px, 10vw, 140px)) 0 clamp(60px, 10vw, 140px); }
.nicht-gefunden h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.nicht-gefunden p:not(.notiz) { max-width: 34rem; margin: 22px 0 30px; font-size: 1.15rem; color: var(--tinte-70); }
.nicht-gefunden__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.nicht-gefunden__links a:not(.btn) { font-weight: 700; }
body:has(> main.nicht-gefunden) { display: flex; flex-direction: column; min-height: 100svh; }
body:has(> main.nicht-gefunden) > main { flex: 1 0 auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  /* Einstieg ohne Inszenierung: kein Scrollweg, Text links, fertiges Gerät rechts (main.js setzt das letzte Bild), alles sichtbar und erreichbar */
  .hs__hinweis { display: none !important; }
  .hs__lauf { height: auto !important; }
  .leistungen { margin-top: calc(-1 * var(--kurve-a)); }
  .hs__buehne { position: relative !important; }
}

/* --- Kleinigkeiten ------------------------------------------------------------------- */
@media (max-width: 899px), (pointer: coarse) { .fuss ul a { display: inline-block; padding-block: 9px; } .fuss li + li { margin-top: 0; } .mehr-link { padding-block: 10px; } .kopf__logo { padding-block: 12px; }
.kopf__logo .logo__bild--hell { top: 12px; } }
@media print { .kopf, .bahnen, .hs__hinweis { display: none !important; } .dunkel, .hs, .kontakt, .fuss { background: #fff !important; color: #000 !important; } .hs__lauf { height: auto !important; } .hs__buehne { position: relative !important; height: auto !important; } .marke { opacity: 1 !important; transform: none !important; } .risiko__text { grid-template-rows: 1fr !important; visibility: visible !important; } }

/* --- Leistungsseiten (seit r023): /elektronikentwicklung, /embedded-software, /geraeteentwicklung ------------------------------
   Gleiche Grundlage wie die Hauptseite (Papierton, feine Linien, grüner Akzent), aber ohne Scroll-Inszenierung: Einstieg mit Bild,
   dann Anlass, Leistungsumfang, Platz im Entwicklungsweg, Fragen und ein dunkler Kontaktstreifen. Keine Karten, keine Animation außer dem ruhigen Öffnen der Fragen. */
.lp { padding-top: calc(var(--kopf-h) + clamp(24px, 3.5vw, 48px)); }
.lp__zurueck { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; font-weight: 600; font-size: .9375rem; text-decoration: none; color: var(--tinte-70); }
.lp__zurueck svg { width: 16px; height: 16px; transform: scaleX(-1); transition: transform .25s var(--weich); }
.lp__zurueck:hover { color: var(--gruen-text); }
.lp__zurueck:hover svg { transform: scaleX(-1) translateX(4px); }
.lp-intro { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: clamp(32px, 5vw, 88px); align-items: center; padding: clamp(12px, 2vw, 28px) 0 clamp(48px, 6vw, 88px); }
.lp-intro h1 { margin: 6px 0 clamp(18px, 2vw, 26px); font-size: clamp(1.85rem, 3.5vw, 3.3rem); line-height: 1.04; letter-spacing: -.03em; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.lp-intro__lead { max-width: 34rem; margin: 0; font-size: clamp(1.125rem, 1.02rem + .4vw, 1.3rem); line-height: 1.55; color: var(--tinte-70); }
.lp-intro__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(24px, 3vw, 36px); }
.lp-bild { margin: 0; }
.lp-bild__flaeche { aspect-ratio: 3 / 2; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 92%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 92%, transparent); mask-composite: intersect; }
.lp-bild__flaeche img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }   /* Weiß des Konzeptbilds wird auf dem Papierton durchsichtig */
.lp-bild figcaption { margin-top: 10px; font-size: .875rem; line-height: 1.4; color: var(--tinte-70); }

.lp-abschnitt { padding: clamp(44px, 5.5vw, 80px) 0; border-top: 1px solid var(--tinte-15); }
.lp-abschnitt__raster { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: clamp(32px, 6vw, 96px); align-items: start; }
.lp-abschnitt h2 { font-size: clamp(1.8rem, 2.8vw, 2.7rem); line-height: 1.05; letter-spacing: -.028em; -webkit-hyphens: auto; hyphens: auto; }
.lp-anlass { margin: 0; }
.lp-anlass li { position: relative; padding: 16px 0 16px 28px; border-top: 1px solid var(--tinte-15); font-size: clamp(1.0625rem, .98rem + .3vw, 1.1875rem); line-height: 1.5; }
.lp-anlass li:last-child { border-bottom: 1px solid var(--tinte-15); }
.lp-anlass li::before { content: ""; position: absolute; left: 2px; top: 1.35em; width: 9px; height: 9px; border-radius: 50%; background: var(--gruen); }
.lp-umfang { counter-reset: umfang; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); margin-top: clamp(28px, 3.5vw, 48px); }
.lp-umfang li { counter-increment: umfang; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-content: start; padding: 18px 0 22px; border-top: 1px solid var(--tinte-15); }
.lp-umfang li::before { content: counter(umfang, decimal-leading-zero); content: counter(umfang, decimal-leading-zero) / ""; grid-row: 1 / span 2; padding-top: .45em; font-weight: 700; font-size: .8125rem; letter-spacing: .08em; color: var(--tinte-60); }
.lp-umfang h3 { grid-column: 2; font-size: clamp(1.2rem, 1.5vw, 1.4rem); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.lp-umfang p { grid-column: 2; margin: 6px 0 0; font-size: clamp(1rem, .95rem + .2vw, 1.0625rem); color: var(--tinte-70); }
.lp-umfang__begriffe { grid-column: 2; display: block; margin-top: 8px; font-weight: 700; font-size: .8125rem; letter-spacing: .06em; color: var(--gruen-text); }
.lp-weg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); margin-top: clamp(28px, 3.5vw, 48px); border-top: 1px solid var(--tinte-30); }
.lp-weg li { position: relative; padding-top: 30px; }
.lp-weg li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--tinte); }
.lp-weg li:last-child::before { background: var(--papier); border: 1.5px solid var(--tinte); }
.lp-weg__nr { display: block; font-weight: 700; font-size: .8125rem; letter-spacing: .08em; color: var(--tinte-60); }
.lp-weg h3 { margin-top: 4px; font-size: 1.15rem; font-weight: 700; line-height: 1.25; -webkit-hyphens: auto; hyphens: auto; }
.lp-weg p { margin: 8px 0 0; font-size: var(--text-klein); color: var(--tinte-70); }
.lp-fragen .faq { margin-top: 0; }
.lp-weitere { margin: clamp(24px, 3vw, 36px) 0 0; font-size: var(--text-klein); color: var(--tinte-70); }
.lp-weitere a { font-weight: 700; color: var(--gruen-text); }

.lp-kontakt { padding: clamp(48px, 6vw, 88px) 0; }
.lp-kontakt__raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 96px); align-items: center; }
.lp-kontakt h2 { font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.05; letter-spacing: -.028em; }
.lp-kontakt__text { max-width: 32rem; margin: 18px 0 0; font-size: var(--text-normal); }
.lp-kontakt .btn { margin-top: 28px; }
.lp-kontakt__wege { margin: 0; padding-top: 8px; border-top: 1px solid var(--hell-18); }
.lp-kontakt__wege li { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--hell-18); font-weight: 600; font-size: 1.0625rem; }
.lp-kontakt__wege a { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 48px; text-decoration: none; color: var(--hell); transition: color .2s; }
.lp-kontakt__wege a:hover { color: var(--gruen-hell); }
.lp-kontakt__wege svg { flex: none; width: 18px; height: 18px; color: var(--gruen-hell); }
.lp-kontakt__wege + .lp-kontakt__titel { margin-top: 28px; }
.lp-kontakt__titel { margin: 0 0 4px; padding-top: 8px; font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hell); }
@media (max-width: 899px) {
  .lp-intro, .lp-abschnitt__raster, .lp-kontakt__raster { grid-template-columns: minmax(0, 1fr); }
  .lp-intro { row-gap: 28px; }
  .lp-abschnitt__raster { row-gap: 22px; }
  .lp-kontakt__raster { row-gap: 32px; align-items: start; }
  .lp-umfang { grid-template-columns: minmax(0, 1fr); }
  .lp-weg { grid-template-columns: minmax(0, 1fr); row-gap: 26px; margin-left: 4px; padding-left: 26px; border-top: 0; border-left: 1px solid var(--tinte-30); }
  .lp-weg li { padding-top: 0; }
  .lp-weg li::before { left: -31px; top: 8px; }
  .lp__zurueck { padding-block: 12px; }
}
@media print { .lp-bild__flaeche img { mix-blend-mode: normal; } .lp-kontakt { background: #fff !important; } }

/* --- Umbrüche (seit r035): nur lokale Korrekturen, keine globalen Schriftregeln --------------------------------------------------- */
@media (min-width: 900px) and (max-width: 1159px) {   /* FAQ: die Überschrift hatte nur 230 px und brach in vier Zeilen („Idee?“ allein) */
  .fragen__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 56%); }
  .fragen__kopf h2 { font-size: clamp(2.1rem, 3.4vw, 2.6rem); }
}
@media (max-width: 359px) {   /* 320-px-Handys: „funktionierendes“ brach mitten im Wort, die Kontaktüberschrift zerfiel in fünf Zeilen */
  #leistungen-titel { font-size: 1.85rem; }
  .kontakt h2 { font-size: 1.7rem; }
}

.weg__gruppe { margin: clamp(26px, 3vw, 40px) 0 0; }   /* ruhiger Textlink am Ende des Entwicklungswegs */

/* --- Ablauf-Film im Entwicklungsweg (seit r095): zusätzliches Video unter den fünf Schritten, Standbild darunter, Leiste mit den fünf Kapiteln ------------------------ */
.weg-film { margin: clamp(48px, 6vw, 88px) 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.weg-film__dach { display: block; margin: 0 0 12px; font-weight: 700; font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gruen-text); }
.weg-film__satz { display: block; max-width: 24rem; font-size: 1.125rem; line-height: 1.5; color: var(--tinte); text-wrap: pretty; }
.weg-film__hinweis { display: block; margin-top: 14px; font-size: .875rem; line-height: 1.45; color: var(--tinte-60); }
@media (min-width: 1100px) {
  .weg-film { grid-template-columns: minmax(0, 1fr) 300px; column-gap: clamp(36px, 4vw, 64px); align-items: start; }
  .weg-film figcaption { padding-top: 6px; }
}
.weg-film__rahmen { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--nachtgruen, #0C110E); box-shadow: 0 0 0 1px var(--tinte-15), 0 28px 50px -34px rgba(20, 26, 22, .5); }
.weg-film__bild, .weg-film__bild img, .weg-film__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.weg-film__bild img { object-fit: cover; }
.weg-film__video { object-fit: cover; opacity: 0; transition: opacity .5s; background: transparent; }
.weg-film.laeuft .weg-film__video { opacity: 1; }
.weg-film__bedienung { position: absolute; z-index: 2; right: 14px; top: 14px; display: flex; gap: 8px; }
.weg-film__bedienung[hidden], .weg-film__start[hidden], .weg-film__video[hidden] { display: none; }
.weg-film__knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(12, 17, 14, .72); color: var(--hell, #F4F6F3); font: inherit; font-weight: 700; font-size: .875rem; cursor: pointer; transition: background .2s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.weg-film__knopf:hover { background: rgba(12, 17, 14, .9); }
.weg-film__knopf:focus-visible, .weg-film__start:focus-visible { outline: 3px solid var(--gruen-hell); outline-offset: 2px; }
.weg-film__knopf svg { width: 22px; height: 22px; flex: none; }
.weg-film__pause { padding: 0; }
.weg-film__pause .i-spiel { display: none; margin-left: 2px; }
.weg-film.angehalten .weg-film__pause .i-pause { display: none; }
.weg-film.angehalten .weg-film__pause .i-spiel { display: block; }
.weg-film__ton .i-welle { opacity: .35; }
.weg-film__ton[aria-pressed="true"] { background: var(--gruen-btn); }
.weg-film__ton[aria-pressed="true"] .i-welle { opacity: 1; }
.weg-film__start { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: rgba(12, 17, 14, .18); cursor: pointer; }
.weg-film__start-knopf { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; background: rgba(12, 17, 14, .6); color: var(--hell, #F4F6F3); transition: background .2s, transform .2s; }
.weg-film__start-knopf svg { width: 32px; height: 32px; margin-left: 4px; }
.weg-film__start:hover .weg-film__start-knopf { background: rgba(12, 17, 14, .8); transform: scale(1.06); }
.weg-film__spur { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 12px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: none; }
.weg-film__spur li { position: relative; padding-top: 12px; font-weight: 600; font-size: .875rem; line-height: 1.3; color: var(--tinte-60); transition: color .3s; }
.weg-film__spur li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; background: var(--tinte-15); }
.weg-film__spur li::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: var(--p, 0%); border-radius: 2px; background: var(--gruen); }
.weg-film__spur li span { font-weight: 800; color: var(--tinte-30); transition: color .3s; }
.weg-film__spur li.an { color: var(--tinte); }
.weg-film__spur li.an span { color: var(--gruen-text); }
@media (max-width: 699px) {
  .weg-film__spur li { font-size: 0; padding-top: 10px; }
  .weg-film__spur li span { font-size: .8125rem; }
  .weg-film__bedienung { right: 8px; top: 8px; }
  .weg-film__ton-text { display: none; }
  .weg-film__ton { padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .weg-film__video { transition: none; } }

/* Einblenden von rechts (seit r097, Wunsch Tobias): Beim Erreichen zieht sich der Rahmen von der rechten Kante nach links auf (Maske, Negativränder lassen den Schatten stehen) und gleitet dabei
   ein Stück von rechts herein; die Textspalte folgt leicht versetzt, danach die fünf Kapitel der Leiste nacheinander. Der Film startet erst, wenn der Rahmen steht (main.js, 450 ms).
   Nur mit JavaScript (Klasse .js); der Abschnitt schneidet seitlich ab (overflow-x: clip), damit der Versatz keinen Bildlauf nach rechts erzeugt; bei „weniger Bewegung“ ohne Übergang. */
.weg { overflow-x: clip; }
.js .weg-film__rahmen { clip-path: inset(-80px -80px -80px 100% round 16px); transform: translateX(9%); transition: clip-path 1.05s var(--weich), transform 1.05s var(--weich); }
.js .weg-film.ist-eingeblendet .weg-film__rahmen { clip-path: inset(-80px -80px -80px -80px round 16px); transform: none; }
.js .weg-film figcaption { opacity: 0; transform: translateX(44px); transition: opacity .7s var(--weich) .4s, transform .9s var(--weich) .4s; }
.js .weg-film.ist-eingeblendet figcaption { opacity: 1; transform: none; }
.js .weg-film__spur li { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--weich), transform .6s var(--weich), color .3s; transition-delay: calc(.65s + var(--i, 0) * .09s), calc(.65s + var(--i, 0) * .09s), 0s; }
.js .weg-film.ist-eingeblendet .weg-film__spur li { opacity: 1; transform: none; }
.weg-film__spur li:nth-child(2) { --i: 1; } .weg-film__spur li:nth-child(3) { --i: 2; } .weg-film__spur li:nth-child(4) { --i: 3; } .weg-film__spur li:nth-child(5) { --i: 4; }
@media (prefers-reduced-motion: reduce) {
  .js .weg-film__rahmen, .js .weg-film figcaption, .js .weg-film__spur li { transition: none; transition-delay: 0s; }
}

/* --- Cookie-Hinweis unten rechts (übernommen von emsproto, seit r043; nur für Google Ads, siehe main.js GOOGLE_ADS) -------------------------------------------- */
/* Dezent, beide Knöpfe gleichwertig (gleiche Größe und Farbe). Rechts, weil er links im Einstieg Text verdecken würde.  */
.einwilligung { position: fixed; z-index: 60; right: 24px; bottom: 24px; width: 380px; max-height: calc(100vh - var(--kopf-h) - 48px); overflow-y: auto; box-sizing: border-box; padding: 20px 22px 18px; border-radius: 12px; background: var(--papier); color: var(--tinte); box-shadow: 0 0 0 1px var(--tinte-15), 0 24px 48px -20px rgba(20, 26, 22, .5); opacity: 0; transform: translateY(24px); transition: transform .35s var(--weich), opacity .35s var(--weich); }
.einwilligung[hidden] { display: none; }
.einwilligung.ist-da { opacity: 1; transform: none; }
.einwilligung:focus { outline: none; }
.einwilligung:focus-visible { outline: 3px solid var(--gruen-text); outline-offset: 3px; border-radius: 12px; }
.einwilligung__hand { margin: 0 0 2px; font-family: var(--schrift-hand); font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: var(--gruen-text); transform: rotate(-2deg); transform-origin: left center; }
.einwilligung__titel { margin: 0; text-wrap: balance; font-weight: 800; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em; }
.einwilligung__text { margin: 8px 0 0; font-size: var(--text-klein); line-height: 1.45; color: var(--tinte-70); }
.einwilligung__mehr { margin: 6px 0 0; font-size: .875rem; line-height: 1.4; color: var(--tinte-70); }
.einwilligung__mehr a { color: var(--tinte); text-decoration-color: var(--gruen); text-decoration-thickness: 2px; }
.einwilligung__mehr a:hover { color: var(--gruen-text); }
.einwilligung__knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.einwilligung__knopf { min-height: 44px; padding: 8px 14px; border: 0; border-radius: 10px; background: var(--tinte); color: var(--papier); font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.1; cursor: pointer; transition: background-color .2s, color .2s; }
.einwilligung__knopf:hover { background: var(--gruen-text); color: #fff; }
.einwilligung__knopf:focus-visible { outline: 3px solid var(--gruen-text); outline-offset: 2px; }
.einwilligung__knopf:active { transform: translateY(1px); }
@media (max-width: 759px) {
  .einwilligung { left: 16px; right: 16px; bottom: 16px; width: auto; max-height: calc(100vh - var(--kopf-h) - 32px); padding: 16px 18px 14px; }
  .einwilligung__titel { font-size: 1.375rem; }
  .einwilligung__knoepfe { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .einwilligung { transform: none; transition: none; } }
@media print { .einwilligung { display: none !important; } }
/* „Cookie-Einstellungen“ im Fußbereich: ein Knopf, der aussieht wie die Links daneben */
.fuss__einwilligung[hidden] { display: none; }
.fuss__einwilligung button { display: inline-block; min-height: 24px; padding: 2px 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: color .2s; }
.fuss__einwilligung button:hover { color: var(--gruen-hell); }
.fuss__einwilligung button:focus-visible { outline: 2px solid var(--gruen-hell); outline-offset: 2px; }
@media (max-width: 899px), (pointer: coarse) { .fuss__einwilligung button { padding-block: 9px; } }

/* --- Unterseite „Nach der Entwicklung“ (seit r064, neu gestaltet r077 nach entwuerfe/nach-der-entwicklung-aufgelockert-referenz-2026-10-17.png) ------------------------
   Drei Flächen: Beige-Einstieg (Foto rechts, am Rand angeschnitten), Dunkelgrün-Auswahl, kompakter beiger Abschluss. Die Farbwechsel sind echte Sektionsgrenzen: die obere Sektion hat unten
   einen breiten, asymmetrischen Bogen (border-radius), die darunter liegende ragt per negativem Außenabstand dahinter. Keine Animation, keine Karten. Alle Regeln gelten nur unter .nd. */
.nd { --nd-k1: clamp(32px, 6.4vw, 110px); --nd-k2: clamp(28px, 3.8vw, 66px); --nd-bildb: min(50vw, 800px); --nd-oben: calc(var(--kopf-h) + clamp(12px, 2vw, 28px)); background: var(--warm); }
.nd-start { position: relative; z-index: 3; padding: var(--nd-oben) 0 calc(var(--nd-k1) + clamp(28px, 3.4vw, 52px)); border-radius: 0 0 62% 38% / 0 0 var(--nd-k1) var(--nd-k1); background: var(--warm); color: var(--tinte); }
.nd-start__innen { display: grid; grid-template-columns: minmax(0, 1fr); }
.nd-dach { margin: clamp(10px, 1.4vw, 18px) 0 0; font-weight: 500; font-size: .8125rem; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-60); }
.nd .nd-titel { margin-top: clamp(12px, 1.4vw, 20px); font-weight: 800; font-size: clamp(2.3rem, .8rem + 3.5vw, 4.1rem); line-height: 1.03; letter-spacing: -.03em; }
.nd-einleitung { max-width: 30rem; margin: clamp(18px, 2vw, 26px) 0 0; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.5; color: var(--tinte-70); text-wrap: pretty; }
.nd-stationen { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(18px, 2.2vw, 32px); margin: clamp(30px, 3.6vw, 48px) 0 0; padding: 0; list-style: none; max-width: 36rem; }
.nd-stationen::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--tinte-30); }   /* feine Linie hinter den Punkten */
.nd-station { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-top: 30px; }
.nd-station::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--tinte); }
.nd-station--hier::before { background: var(--gruen); }   /* der erste Punkt ist grün: hier sind Sie */
.nd-name { font-weight: 700; font-size: clamp(1.0625rem, .95rem + .4vw, 1.25rem); line-height: 1.2; letter-spacing: -.012em; color: var(--tinte); }
.nd-rolle { margin-top: 5px; font-size: var(--text-klein); line-height: 1.4; color: var(--tinte-60); }
.nd-frei { max-width: 30rem; margin: clamp(16px, 1.8vw, 22px) 0 0; font-size: var(--text-klein); line-height: 1.45; color: var(--tinte-60); }
/* Foto: Ausschnitt mit wenig Pflaster, links organisch gerundet, am rechten Rand angeschnitten (kein Rahmen, kein Schatten) */
.nd-bild { margin: clamp(28px, 5vw, 44px) 0 0 var(--rand); }
.nd-bild img { display: block; width: 100%; height: auto; aspect-ratio: 745 / 552; object-fit: cover; object-position: 50% 0; border-radius: 22% 0 0 18% / 48% 0 0 52%; }
.nd-bild figcaption { margin-top: 12px; padding-left: 8%; font-size: var(--text-klein); line-height: 1.4; color: var(--tinte-60); }
.nd a:focus-visible { outline: 2px solid var(--gruen-text); outline-offset: 3px; border-radius: 3px; }
.nd .dunkel a:focus-visible { outline-color: var(--gruen-hell); }
.nd .nd-btn:focus-visible { border-radius: 999px; }
@media (min-width: 1000px) {
  .nd-start { min-height: calc(var(--nd-oben) + var(--nd-bildb) * 552 / 745 + 40px + var(--nd-k1) + 28px); }
  .nd-start__innen { grid-template-columns: minmax(0, 1fr) max(0px, calc(var(--nd-bildb) - (100vw - 100%) / 2)); }   /* rechts bleibt genau der Platz des Fotos frei, das über den Seitenrand hinausläuft */
  .nd-start__text { padding-right: clamp(28px, 4vw, 64px); }
  .nd-bild { position: absolute; top: var(--nd-oben); right: 0; width: var(--nd-bildb); margin: 0; }
}
/* Dunkelgrün: drei offene Einstiege */
.nd-wahl { position: relative; z-index: 2; margin-top: calc(-1 * var(--nd-k1)); padding: calc(var(--nd-k1) + clamp(44px, 5.5vw, 88px)) 0 calc(var(--nd-k2) + clamp(48px, 5.5vw, 84px)); border-radius: 0 0 38% 62% / 0 0 var(--nd-k2) var(--nd-k2); background: radial-gradient(ellipse 55% 65% at 88% 14%, rgba(var(--gruen-hell-rgb), .1), transparent 70%), var(--nacht); }
.nd-wahl__titel { margin: 0; font-weight: 800; font-size: clamp(2rem, 1rem + 2.8vw, 3.4rem); line-height: 1.05; letter-spacing: -.028em; }
.nd-wahl__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 4.2vw, 96px); margin-top: clamp(34px, 4.4vw, 64px); }
.nd-weg { display: flex; flex-direction: column; align-items: flex-start; }
.nd-weg .nd-weg__nr { margin: 0; font-weight: 500; font-size: 1rem; line-height: 1.3; letter-spacing: .06em; color: var(--gruen-hell); }
.nd-weg h3 { margin: clamp(10px, 1vw, 14px) 0 0; font-weight: 800; font-size: clamp(1.45rem, 1rem + 1.1vw, 2.05rem); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.nd-weg .nd-weg__firma { margin: 8px 0 0; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.3; }
.nd-weg .nd-weg__text { margin: clamp(16px, 1.6vw, 22px) 0 0; padding-bottom: clamp(26px, 2.8vw, 38px); max-width: 22rem; font-size: clamp(1.0625rem, 1rem + .2vw, 1.15rem); line-height: 1.55; }
.nd-weg .btn { margin-top: auto; }   /* die drei Buttons stehen auf einer gemeinsamen unteren Linie */
/* Button: vorhandene Komponente, hier helles Kessler-Grün mit dunkler Schrift (Kontrast über 8:1), ohne Leuchten und Schatten */
.nd .nd-btn { min-height: 52px; gap: 12px; padding: 10px 16px 10px 24px; background: var(--gruen-hell); color: var(--nacht); font-size: 1.0625rem; white-space: nowrap; box-shadow: none; }
.nd .nd-btn:hover { background: #8FCE6E; }
.nd .nd-btn .btn__pfeil { width: 26px; height: 26px; background: transparent; color: var(--nacht); }
.nd .nd-btn .btn__pfeil svg { width: 19px; height: 19px; }
/* Beiger Abschluss: kompakt, Text links, Button rechts */
.nd-schluss { position: relative; z-index: 1; margin-top: calc(-1 * var(--nd-k2)); padding: calc(var(--nd-k2) + clamp(36px, 4vw, 56px)) 0 clamp(40px, 4.4vw, 64px); background: var(--warm); color: var(--tinte); }
.nd-schluss__innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 48px; }
.nd-schluss h2 { margin: 0; font-weight: 800; font-size: clamp(1.45rem, 1rem + 1.2vw, 2rem); line-height: 1.15; letter-spacing: -.02em; }
.nd-schluss p { margin: 6px 0 0; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.45; color: var(--tinte-70); }
@media (max-width: 899px) {
  .nd-wahl__raster { grid-template-columns: minmax(0, 1fr); row-gap: 52px; }
  .nd-weg .nd-weg__text { padding-bottom: 22px; }
}
@media (max-width: 759px) {   /* Handy: die Stationen stehen untereinander an einer senkrechten Linie */
  .nd-stationen { grid-template-columns: minmax(0, 1fr); row-gap: 20px; margin-top: 28px; padding-left: 30px; }
  .nd-stationen::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .nd-station { padding-top: 0; }
  .nd-station::before { left: -30px; top: 6px; }
}
@media (max-width: 559px) { .nd-schluss__innen { flex-direction: column; align-items: flex-start; } }
@media print { .nd-start, .nd-schluss, .nd-wahl { background: #fff; color: #000; } .nd-wahl * { color: #000 !important; } }

/* Tippflächen (r084, Prüfbericht Befund 15): Textlinks im Fließtext bekommen am Handy mehr Trefferfläche. Der Innenabstand eines Inline-Links verschiebt keine Zeilen, die Schrift bleibt gleich. Telefon und E-Mail im Kontaktblock etwas höher. */
@media (max-width: 899px), (pointer: coarse) {
  main p:not(.gruppenlink):not(.rechtliches__download) a:not(.btn), .faq__antwort a, .einwilligung__mehr a { padding-block: 11px; }
  .kontakt__direkt a { padding-block: 8px; }
}

/* Startseite (seit r113, Übernahme der Testversion „Flow“): Messebereich, Übergänge, Ablauf-Film kompakter, Film-Hinweis oben im Leistungsbereich, Bildhinweise. Nur unter body.startseite. */
.startseite {
  --kurve-w: clamp(14px, 1.8vw, 26px);            /* Entwicklungsweg: sehr flacher Bogen über dem Risikobereich */
}

/* Übergänge ------------------------------------------------------------------------------------------------------------------ */
/* Risikobereich (dunkel) zum Entwicklungsweg (hell): sehr flacher Bogen statt gerader Kante, Höhepunkt bei 46 % */
.startseite .weg {
  position: relative;
  margin-top: calc(-1 * var(--kurve-w));
  padding-top: calc(var(--kurve-w) + clamp(64px, 7vw, 100px));
  border-radius: 46% 54% 0 0 / var(--kurve-w) var(--kurve-w) 0 0;
}

/* 5 Ablauf-Film: kompakter und sachlicher, ergänzende Erklärung im Entwicklungsweg; der Imagefilm darunter bleibt die große Bühne --------- */
.startseite .weg-film { margin-top: clamp(40px, 4.6vw, 64px); gap: 18px; }
.startseite .weg-film__buehne { max-width: 1000px; }
.startseite .weg-film__rahmen { border-radius: 12px; box-shadow: 0 0 0 1px var(--tinte-15); }
@media (min-width: 1100px) {
  .startseite .weg-film { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); column-gap: clamp(36px, 4vw, 56px); }
}
.startseite .weg-film__satz { font-size: 1rem; max-width: 22rem; }
.startseite .weg-film__dach { margin-bottom: 8px; font-size: .8125rem; }

/* 6 Bildhinweise: eine ruhige Schrift (0,875 rem), gleiche Zeilenhöhe, gleiche Abstände, begrenzte Breite; der KI-Hinweis steht als zweite Zeile */
.startseite .hinweis-ki { display: block; margin-top: 2px; }
.startseite .weg__bild figcaption,
.startseite .weg-film__hinweis,
.startseite .teaser__geraet figcaption,
.startseite .produkt__mass,
.startseite .kontakt__haus figcaption { font-size: .875rem; line-height: 1.45; font-weight: 400; }
.startseite .weg__bild figcaption,
.startseite .weg-film__hinweis,
.startseite .teaser__geraet figcaption,
.startseite .kontakt__haus figcaption { max-width: 36ch; margin-top: 10px; }
.startseite .weg-film__hinweis { margin-top: 12px; }
.startseite .weg__bild figcaption,
.startseite .weg-film__hinweis,
.startseite .teaser__geraet figcaption,
.startseite .kontakt__haus figcaption { color: var(--tinte-60); }
.startseite .kontakt__haus img { border-radius: 12px; }
.startseite .weg__bild figcaption,
.startseite .weg-film__hinweis,
.startseite .teaser__geraet figcaption,
.startseite .kontakt__haus figcaption { text-wrap: pretty; }

/* ===== Zweite Runde: Imagefilm im Leistungsbereich, Entwicklungsweg direkt zum Projektteaser =================================================== */
.startseite { --kurve-t: clamp(14px, 1.8vw, 26px); }                        /* Projektteaser: sehr flache Oberkante über dem Entwicklungsweg */


/* Entwicklungsweg und Projektteaser sind jetzt benachbart und beide hell: Papierton (Weg) zu Warmbeige (Teaser) mit sehr flachem, asymmetrischem Bogen
   (Höhepunkt bei 60 %), davor und danach genug Luft; der Teaser behält Gerät und organische Verbindung zur FAQ unverändert. */
.startseite .weg { padding-bottom: calc(var(--kurve-t) + clamp(44px, 5vw, 72px)); }
.startseite .teaser { margin-top: calc(-1 * var(--kurve-t)); padding-top: calc(var(--kurve-t) + clamp(40px, 4vw, 64px)); border-radius: 60% 40% 0 0 / var(--kurve-t) var(--kurve-t) 0 0; }

/* ===== Leistungsbereich organisch beenden (Wunsch Tobias, spiegelt den runden Anfang) ================================================================ */
/* Anfang der Sektion ist oben rund (50 % / --kurve-a, siehe style.css). Das Ende bekommt dieselbe Rundung nach unten: das Beige läuft in einem Bogen aus,
   der dunkle Risikobereich liegt dahinter und wird um die Bogenhöhe nach oben gezogen. */
.startseite .leistungen { z-index: 1; padding-bottom: calc(var(--kurve-a) + clamp(56px, 6vw, 80px)); border-radius: 50% 50% 50% 50% / var(--kurve-a) var(--kurve-a) var(--kurve-a) var(--kurve-a); }
.startseite .risiko { margin-top: calc(-1 * var(--kurve-a)); padding-top: calc(var(--kurve-a) + clamp(72px, 8vw, 120px)); }

/* Ablauf-Film (seit r115): dunkelgrüne Einfassung (#15231C) mit Bedienleiste oben, beigem Video, Zeitleiste unten; Kapitel darunter auf Beige als Sprungmarken. Spalten, Abstände und rechter Text bleiben wie zuvor. Keine Schatten oder Leuchteffekte. */
.startseite .weg-film { --film-gruen: #15231C; }

/* Einfassung: außen 16 px, innen 10 px; seitlich 14 px, unten Platz für die Zeitleiste */
.startseite .weg-film__rahmen { aspect-ratio: auto; overflow: hidden; padding: 0 14px 8px; border-radius: 16px; background: var(--film-gruen); box-shadow: none; color: var(--hell); }
.startseite .weg-film__leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 2px; }
.startseite .weg-film__leistentitel { font-weight: 600; font-size: .75rem; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 246, 243, .74); }
.startseite .weg-film__bedienung { position: static; display: flex; flex: none; gap: 8px; }
.startseite .weg-film__bedienung[hidden] { display: flex; }

/* Knöpfe: ruhige Umrisse auf Dunkelgrün, 44 px hoch (Fingerfläche) */
.startseite .weg-film__knopf { min-width: 44px; height: 44px; padding: 0 16px; border: 1px solid rgba(244, 246, 243, .32); background: transparent; color: var(--hell); }
.startseite .weg-film__knopf:hover { background: rgba(244, 246, 243, .12); }
.startseite .weg-film__knopf:focus-visible { outline: 3px solid var(--gruen-hell); outline-offset: 2px; }
.startseite .weg-film__pause { padding: 0; }
.startseite .weg-film__ton[aria-pressed="true"] { background: var(--gruen-btn); border-color: var(--gruen-btn); }

/* Video: beiger Grund, innen 10 px Rundung, 16:9 */
.startseite .weg-film__feld { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--warm); }
.startseite .weg-film__video { background: var(--warm); }
.startseite .weg-film__start { border-radius: 0; background: rgba(21, 35, 28, .12); }

/* Zeitleiste mit Zeitangaben am unteren Rand der Einfassung */
.startseite .weg-film__zeit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 32px; margin-top: 2px; padding: 0 2px; font-size: .75rem; line-height: 1; font-variant-numeric: tabular-nums; color: rgba(244, 246, 243, .82); }
.startseite .weg-film__regler { --p: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; padding: 0; background: transparent; touch-action: pan-y; cursor: pointer; }
.startseite .weg-film__regler::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--gruen-hell) var(--p), rgba(244, 246, 243, .22) var(--p)); }
.startseite .weg-film__regler::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(244, 246, 243, .22); }
.startseite .weg-film__regler::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--gruen-hell); }
.startseite .weg-film__regler::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--hell); }
.startseite .weg-film__regler::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--hell); }
.startseite .weg-film__regler:focus-visible { outline: none; }
.startseite .weg-film__regler:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--gruen-hell); outline-offset: 2px; }
.startseite .weg-film__regler:focus-visible::-moz-range-thumb { outline: 3px solid var(--gruen-hell); outline-offset: 2px; }

/* Kapitel darunter auf Beige: jetzt Knöpfe, Optik wie bisher (Balken oben, Nummer und Name), 44 px Fingerfläche */
.startseite .weg-film__spur li { padding-top: 0; }
.startseite .weg-film__kapitel { display: block; width: 100%; min-height: 44px; padding: 12px 0 8px; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.startseite .weg-film__kapitel:hover { color: var(--tinte); }
.startseite .weg-film__kapitel:focus-visible { outline: 3px solid var(--gruen-text); outline-offset: 2px; border-radius: 4px; }
.startseite .weg-film__spur li.an .weg-film__kapitel { color: var(--tinte); }

/* Schmale Bildschirme: Titel kürzer, Knöpfe nur mit Symbol (Beschriftung bleibt im aria-label) */
@media (max-width: 599px) {
  .startseite .weg-film__rahmen { padding: 0 10px 8px; }
  .startseite .weg-film__leiste { min-height: 52px; }
  .startseite .weg-film__leistentitel { font-size: .6875rem; letter-spacing: .12em; }
  .startseite .weg-film__ton-text { display: none; }
  .startseite .weg-film__ton { padding: 0; }
  .startseite .weg-film__zeit { gap: 10px; min-height: 40px; }
  .startseite .weg-film__regler { height: 40px; }
  .startseite .weg-film__spur li { font-size: 0; }
  .startseite .weg-film__spur li span { font-size: .8125rem; }
  .startseite .weg-film__kapitel { padding: 14px 0 10px; }
}

/* Feinschliff (seit r119, Übernahme der Testversion „Fein“): Proportionen des Ablauf-Players, linke Inhaltskante des Projektteasers, Abstand vor dem Teaser, differenzierte organische Übergänge, ruhiger Bildhinweis. Alles unter body.startseite. */
.startseite {
  --kurve-e: clamp(12px, 1.5vw, 20px);    /* Leistungen zu Risiko: sehr flacher Bogen */
  --kurve-w: clamp(18px, 2.2vw, 32px);    /* Risiko zu Entwicklungsweg: zurückhaltend, flach (überschreibt den früheren Wert) */
  --kurve-f: clamp(20px, 2.6vw, 38px);    /* FAQ zu Kontakt: ruhiger, flacher Bogen */
}

/* 1 Ablauf-Player: Film etwa 66 %, Erklärung etwa 34 % der Zeilenbreite abzüglich 48 px Spaltenabstand (66fr/34fr verteilen nur den Rest nach dem Abstand), Höhe folgt dem Seitenverhältnis */
.startseite .weg-film__buehne { max-width: none; }
.startseite .weg-film__satz { max-width: 28rem; }
.startseite .weg-film__hinweis { max-width: 40ch; }
@media (max-width: 1199px) {
  .startseite .weg-film__buehne { max-width: 820px; }                    /* untereinander: Film nicht breiter als nötig (Seitenverhältnis bleibt) */
}
@media (min-width: 1100px) and (max-width: 1199px) {
  .startseite .weg-film { grid-template-columns: minmax(0, 1fr); }       /* mittlere Breiten: untereinander, bevor Film oder Text zu schmal werden */
}
@media (min-width: 1200px) {
  .startseite .weg-film { grid-template-columns: minmax(0, 66fr) minmax(0, 34fr); column-gap: 48px; }
}

/* 2 Linke Inhaltskante: Text des Projektteasers beginnt auf derselben Kante wie der Entwicklungsweg (gleiche Breite wie .wrap--breit),
   das Gerät und die Stationslinie bleiben unabhängig davon in der 1180-px-Hülle stehen */
.startseite .teaser__innen { max-width: var(--hero-breite); }

/* 3 Abstand vor dem Projektteaser: die großen Abstände (Ende Weg, Gruppenlink, Anfang Teaser) um zusammen etwa 50 px auf dem Desktop gekürzt, Luft um Link und Überschrift bleibt */
.startseite .weg { padding-bottom: calc(var(--kurve-t) + clamp(30px, 3.4vw, 50px)); }
.startseite .weg__gruppe { margin-top: clamp(18px, 2vw, 28px); }
.startseite .teaser { padding-top: calc(var(--kurve-t) + clamp(30px, 3.2vw, 46px)); }

/* 4 Organische Übergänge unterscheiden sich in Höhe und Schwerpunkt */
/* Leistungen zu Risiko: Oberkante bleibt rund (siehe style.css), die Unterkante läuft sehr flach und leicht nach rechts verschoben aus */
.startseite .leistungen { padding-bottom: calc(var(--kurve-e) + clamp(56px, 6vw, 80px)); border-radius: 50% 50% 56% 44% / var(--kurve-a) var(--kurve-a) var(--kurve-e) var(--kurve-e); }
.startseite .risiko { margin-top: calc(-1 * var(--kurve-e)); padding-top: calc(var(--kurve-e) + clamp(72px, 8vw, 120px)); }
/* Risiko zu Entwicklungsweg: flach, Höhepunkt links (30 %) */
.startseite .weg { border-radius: 30% 70% 0 0 / var(--kurve-w) var(--kurve-w) 0 0; }
/* FAQ zu Kontakt: ruhiger, flacher Bogen, Höhepunkt rechts (66 %); der Projektteaser zur FAQ bleibt unverändert */
.startseite .kontakt { margin-top: calc(-1 * var(--kurve-f)); padding-top: calc(var(--kurve-f) + clamp(56px, 6vw, 88px)); border-radius: 66% 34% 0 0 / var(--kurve-f) var(--kurve-f) 0 0; }

/* 5 Bildhinweis unter der großen Leistungsgrafik: zwei Zeilen, begrenzte Breite, mittig, ohne seitliche Zierlinien */
.startseite .produkt__mass { display: block; max-width: 30rem; margin: 12px auto 0; text-align: center; font-size: .875rem; line-height: 1.45; color: var(--tinte-60); }
.startseite .produkt__mass::before, .startseite .produkt__mass::after { display: none; }
.startseite .produkt__mass .hinweis-ki { margin-top: 2px; }

/* „Der Ablauf in 48 Sekunden“ deutlich größer (seit r120, Wunsch Tobias): aus der kleinen Dachzeile wird eine Überschrift der rechten Spalte */
.startseite .weg-film__dach { margin: 0 0 14px; font-weight: 800; font-size: clamp(1.75rem, 1.05rem + 1.7vw, 2.5rem); line-height: 1.08; letter-spacing: -.025em; text-transform: none; text-wrap: balance; color: var(--gruen-text); }

/* Übergang Ablauf-Film zu Projekteinblick (seit r122, Übernahme der Testversion „Übergang“): durchgehende Fläche ohne Bogen, grüner Auftakt, kompakter Abstand. Alles unter body.startseite. */
/* 1 Durchgehende Fläche: der obere Bogen des Teasers entfällt, der Teaser bekommt exakt den Papierton des Entwicklungswegs
   (Stationsnummern und die untere Kante zur FAQ ziehen den Ton mit, damit dort keine hellere Naht entsteht) */
.startseite .teaser { margin-top: 0; border-radius: 0; background: var(--papier); }
.startseite .teaser__nr { background: var(--papier); }
.startseite .teaser__kante-hell { fill: var(--papier); }

/* 3 Kompakter Abstand mit regulären Abständen statt negativer Verschiebung: Ende des Wegs und Anfang des Teasers je 24 bis 32 px,
   zusammen mit dem Kapitelknopf-Innenabstand etwa 72 px auf dem Desktop und etwa 56 px auf dem Handy */
.startseite .weg { padding-bottom: clamp(24px, 2.2vw, 32px); }
.startseite .teaser { padding-top: clamp(24px, 2.2vw, 32px); }

/* 4 Grüner Auftakt über „PROJEKTEINBLICK“: 40 x 2 px, Markengrün, links an der Textkante, 18 px Abstand zur Beschriftung */
.startseite .teaser__dach::before { content: ""; display: block; width: 40px; height: 2px; margin: 0 0 18px; background: var(--gruen); }

/* 5 Linke Kante: Linie, Beschriftung, Überschrift, Beschreibung und Button liegen auf der Kante des Videorahmens (gleiche Breite wie .wrap--breit);
   das Gerät und die Stationen bleiben unabhängig davon in der 1180-px-Hülle */
.startseite .teaser__innen { max-width: var(--hero-breite); }

/* Anordnung Entwicklungsweg, Ablauf-Film und Projektteaser (seit r124, Übernahme der Testversion „Anordnung“): links Erklärung, rechts Player, großzügige Abstände, ein Hinweis. Alles unter body.startseite. */
/* 1 Entwicklungsweg als eigene Einheit: etwa 100 bis 120 px bis zum Videobereich auf dem Desktop (zwischen 56 und 72 px auf Handy und Tablet);
   der Abstand kommt nur von diesem einen Wert (kein zusätzlicher Sektions- oder Listenabstand) */
.startseite .weg-film { margin-top: clamp(56px, 6vw + 26px, 112px); }

/* 2 Ablauf-Film: links Erklärung (etwa 38 %), rechts Player (etwa 62 %), 56 px Spaltenabstand sind in den fr-Anteilen schon abgezogen;
   der Textblock beginnt im oberen Drittel des Players. Gestapelt (unter 1200 px): Erklärung, Player, Kapitel */
@media (min-width: 1200px) {
  .startseite .weg-film { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); column-gap: 56px; align-items: start; }
  .startseite .weg-film figcaption { grid-column: 1; grid-row: 1; align-self: start; margin-top: clamp(40px, 8vw, 120px); padding-top: 0; }
  .startseite .weg-film__buehne { grid-column: 2; grid-row: 1; }
}
@media (max-width: 1199px) {
  .startseite .weg-film figcaption { order: -1; padding-top: 0; }
}
.js .startseite .weg-film:not(.ist-eingeblendet) figcaption { transform: translateX(-44px); }   /* die Erklärung kommt jetzt von links, der Player weiterhin von rechts */
.startseite .weg-film__satz { max-width: 30rem; }

/* 6 Ein zusammenhängender Hinweis beim Erklärungstext (Beispieldaten, Konzeptdarstellung, KI): Konzepthinweis und KI-Zeile laufen als ein Absatz */
.startseite .weg-film__hinweis { max-width: 42ch; }
.startseite .weg-film__hinweis .hinweis-ki { display: inline; margin: 0; }
.startseite .weg-film__hinweis .hinweis-ki::before { content: " "; }

/* 4 Großzügiger Abstand nach der Videoeinheit (inklusive Kapitel): Wegende und Teaseranfang je etwa 60 px, zusammen etwa 120 px auf dem Desktop,
   auf Handy und Tablet je 28 bis 32 px */
.startseite .weg { padding-bottom: clamp(28px, 4.2vw, 64px); }
.startseite .teaser { padding-top: clamp(28px, 4.2vw, 64px); }

/* Gestapelt (unter 1200 px): ruhiger Abstand zwischen Erklärung und Player */
@media (max-width: 1199px) {
  .startseite .weg-film { row-gap: 28px; }
}

/* 4 Projektteaser: zwischen Text und Gerät bleibt auf mittleren Breiten (900 bis 1199 px, Gerät dort 45 % der Breite) mindestens 32 px Freiraum;
   Größe und Lage des Geräts bleiben unverändert, nur die Textbreite folgt dem Platz */
@media (min-width: 900px) and (max-width: 1199px) {
  .startseite .teaser__text { max-width: min(36rem, calc(55vw - 2 * var(--rand) - 32px)); }
}

/* Feinschliff Lesbarkeit (seit r126): ruhigere Textgruppen. Alles unter body.startseite. */
/* 1 Erklärung links neben dem Ablauf-Film: Lesetext vorn, Hinweis dezent mit 22 px Abstand darunter (14 px Schrift bleibt, Kontrast 4,7:1) */
.startseite .weg-film__satz { font-size: 1.0625rem; line-height: 1.55; max-width: 30rem; color: var(--tinte); }
.startseite .weg-film__hinweis { margin-top: 22px; max-width: 38ch; }
/* 2 Fünf Prozessschritte: gleiche Abstände (Zahl 12 px, Beschreibung 10 px), Zeilenhöhe 1,5, Zahlen etwas kontrastreicher, aber hellgrau (konkurrieren nicht mit den Überschriften) */
.startseite .weg__nr { margin-bottom: 12px; color: rgba(20, 26, 22, .3); }
.startseite .weg__schritt--prototyp .weg__nr { color: var(--gruen-text); }
.startseite .weg__schritt h3 { line-height: 1.25; }
.startseite .weg__schritt p { margin-top: 10px; max-width: 21rem; line-height: 1.5; }
/* 3 Bild- und Videohinweise: eine Darstellung (14 px, Zeilenhöhe 1,55, gedämpftes Dunkelgrün auf Hell, helle Schrift auf dem dunklen Bereich unter dem Gerät) */
.startseite .weg__bild figcaption, .startseite .kontakt__haus figcaption, .startseite .produkt__mass, .startseite .weg-film__hinweis { font-size: .875rem; line-height: 1.55; font-weight: 400; color: var(--tinte-60); }
.startseite .weg__bild figcaption, .startseite .kontakt__haus figcaption { margin-top: 12px; max-width: 36ch; }
.startseite .teaser__bild figcaption { font-size: .875rem; line-height: 1.55; color: rgba(244, 246, 243, .88); }   /* lag bisher mit dunkler Schrift auf dem Dunkelgrün */

/* Feinschliff Leistungen und Kontakt (seit r133). Alles unter body.startseite bzw. .produkt */
/* Beschreibungen: erster Satz mittelstark, Rest regulär, als eine kompakte Textgruppe */
.leistung .leistung__kern { font-weight: 600; color: var(--tinte); }
/* Auswahl: nur per Klick, Tippen oder Tastatur (Schalter ab 900 px); Hinweis über der Liste, ausgewählte Leistung deutlich markiert */
.produkt__text { min-width: 0; }
.produkt__tipp { display: none; margin: 0 0 12px; font-size: .875rem; line-height: 1.45; color: var(--tinte-60); }
.produkt.mit-wahl .produkt__tipp { display: block; }
.leistung__wahl[aria-pressed="true"] { text-decoration: underline; text-decoration-color: var(--gruen); text-decoration-thickness: 3px; text-underline-offset: 7px; }
.leistung.ist-aktiv h3 { color: var(--tinte); }
/* Bildhinweis: feste Zeile, darunter 7 px Abstand die Zeile für Ausschnitt und Rücksprung (Platz bleibt reserviert, damit nichts springt) */
.startseite .produkt__mass { max-width: 34rem; }
.startseite .produkt__fest { display: block; }
.startseite .produkt__zeile2 { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 14px; margin-top: 7px; height: 1.45em; }
.startseite .produkt__ausschnitt { font-weight: 600; }
.startseite .produkt__zurueck { margin: -8px 0; padding: 8px 4px; border: 0; background: none; font: inherit; line-height: 1.45; font-weight: 600; color: var(--gruen-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.startseite .produkt__zurueck:hover { color: var(--tinte); }
.startseite .produkt__zurueck[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .produkt__flaeche img, .produkt__punkt, .leistung { transition: none; } }
/* Kontakt: gut lesbare Zeilenlänge unter der Überschrift */
.startseite .kontakt__einleitung { max-width: 34rem; text-wrap: balance; }
/* Leistungsgrafik oben mit der Liste ausrichten (kein Leerraum über dem Motiv), seit r133 */
@media (min-width: 900px) { .produkt { align-items: start; } }
@media (min-width: 900px) { .produkt__bild { position: sticky; top: calc(var(--kopf-h, 76px) + 20px); } }   /* Bild bleibt beim Lesen der Liste im Blick */
@media (max-width: 899px) { .startseite .produkt__zeile2 { display: none; } }   /* Handy und Tablet: statisches Gesamtbild, keine Auswahlzeile */

/* --- Hinweis „Und nach der Entwicklung?“ (seit r136) -------------------------------------------------------------------
   Unten rechts, kommt von rechts herein (Handy: unten, schmaler Streifen über die Breite). Liegt unter dem Cookie-Hinweis (z-index 60) und wird ausgeblendet, solange dieser offen ist. */
.nachhinweis { position: fixed; z-index: 55; right: 24px; bottom: 24px; width: 340px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 18px 20px 16px; border-radius: 12px; border-top: 3px solid var(--gruen); background: var(--papier); color: var(--tinte); box-shadow: 0 0 0 1px var(--tinte-15), 0 24px 48px -20px rgba(20, 26, 22, .5); opacity: 0; transform: translateX(calc(100% + 40px)); transition: transform .5s var(--weich), opacity .4s var(--weich); }
.nachhinweis[hidden] { display: none; }
.nachhinweis.ist-da { opacity: 1; transform: none; }
.einwilligung-offen .nachhinweis { visibility: hidden; pointer-events: none; }
.nachhinweis__zu { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tinte-70); cursor: pointer; transition: color .2s, background-color .2s; }
.nachhinweis__zu svg { width: 18px; height: 18px; }
.nachhinweis__zu:hover { color: var(--tinte); background: var(--tinte-15); }
.nachhinweis__titel { margin: 0; padding-right: 30px; font-family: var(--schrift-hand); font-weight: 700; font-size: clamp(1.7rem, 1.55rem + .4vw, 1.95rem); line-height: 1.05; color: var(--gruen-text); text-wrap: balance; }   /* wie „Lieber direkt?“ im Kontakt, nur größer */
.nachhinweis__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 0; font-size: 1.125rem; font-weight: 700; text-decoration: none; color: var(--gruen-text); }
.nachhinweis__link svg { flex: none; width: 18px; height: 18px; transition: transform .25s var(--weich); }
.nachhinweis__link:hover { color: var(--tinte); }
.nachhinweis__link:hover svg { transform: translateX(3px); }
@media (max-width: 599px) {
  .nachhinweis { left: 16px; right: 16px; bottom: 16px; width: auto; max-width: none; transform: translateY(calc(100% + 32px)); }
}
@media (prefers-reduced-motion: reduce) { .nachhinweis { transform: none; transition: opacity .2s; } .nachhinweis__link svg { transition: none; } }
@media print { .nachhinweis { display: none !important; } }

/* --- Einwilligung Fassung 2 (seit r141): zwei getrennte Zwecke (Statistik, Werbemessung) und drei Knöpfe -------------------
   „Alles ablehnen“ und „Alles zulassen“ stehen gleichwertig (gleiche Größe und Farbe) nebeneinander, „Auswahl speichern“ darunter über die ganze Breite. Kästchen sind nie vorausgewählt. */
.einwilligung__auswahl { display: grid; gap: 10px; margin-top: 12px; }
.einwilligung__zweck { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; font-size: var(--text-klein); line-height: 1.4; color: var(--tinte); cursor: pointer; }
.einwilligung__zweck input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--gruen-text); cursor: pointer; }
.einwilligung__zweck input:focus-visible { outline: 3px solid var(--gruen-text); outline-offset: 2px; }
.einwilligung__knopf[data-wahl="auswahl"] { grid-column: 1 / -1; order: 3; background: transparent; color: var(--tinte); box-shadow: inset 0 0 0 2px var(--tinte); }
.einwilligung__knopf[data-wahl="auswahl"]:hover { background: var(--tinte); color: var(--papier); }

/* --- r150 (29.10.2026): fünf Detailoptimierungen ---------------------------------------------------------------------------- */
/* 1. Hinweis „Und nach der Entwicklung?“: auf dem Handy gar nicht (kein Platz, kein unsichtbarer Klickbereich); der Gruppenlink im Projektteaser bleibt. */
@media (max-width: 759px) { .nachhinweis { display: none !important; } }

/* 2. Cookie-Hinweis kompakter: weniger Höhe, gleiche Auswahl. „Alles ablehnen“ und „Alles zulassen“ bleiben gleich gestaltet. */
.einwilligung { right: 20px; bottom: 20px; width: 348px; padding: 14px 16px 12px; }
.einwilligung__titel { font-size: 1.125rem; line-height: 1.15; }
.einwilligung__text { margin-top: 6px; font-size: .875rem; line-height: 1.4; }
.einwilligung__auswahl { gap: 2px; margin-top: 8px; }
.einwilligung__zweck { align-items: center; min-height: 34px; font-size: .9375rem; line-height: 1.25; }
.einwilligung__zweck input { margin: 0; }
.einwilligung__mehr { margin-top: 6px; font-size: .8125rem; line-height: 1.35; }
.einwilligung__knoepfe { gap: 8px; margin-top: 10px; }
.einwilligung__knopf { min-height: 42px; padding: 6px 12px; font-size: .9375rem; }
.einwilligung__knopf[data-wahl="auswahl"] { min-height: 38px; }
@media (max-width: 759px) {
  .einwilligung { left: 12px; right: 12px; bottom: 12px; width: auto; max-height: min(66vh, 440px); max-height: min(66svh, 440px); padding: 12px 14px 10px; }
  .einwilligung__titel { font-size: 1.0625rem; }
  .einwilligung__knoepfe { margin-top: 8px; }
}

/* 4. Nutzenaussage unter der Einleitung des Leistungsbereichs */
.leistungen__nutzen { max-width: 38rem; margin: clamp(12px, 1.1vw, 16px) 0 0; font-size: 1rem; line-height: 1.5; font-weight: 600; color: var(--tinte); text-wrap: balance; }

/* 5. Gruppenlink: Pfeil bleibt mit dem letzten Wort zusammen, der übrige Text darf umbrechen */
.gruppenlink__ende { white-space: nowrap; }

/* --- r153 (29.10.2026): grüner Effekt beim Überfahren und Auswählen einer Leistung (nur wo es eine Ansicht gibt, ab 900 px) ------------------------------
   Rechts: Überschrift wird grün, feiner grüner Streifen links und zarter grüner Schimmer über die Zeile. Links im Bild: um den gezeigten Bereich ein weicher grüner Schimmer
   und ein ruhig pulsierender Ring um den Punkt (bei reduzierter Bewegung steht der Ring still). */
.leistung { position: relative; }
.leistung h3, .leistung__wahl { transition: color .25s; }
.leistung::after { content: ""; position: absolute; inset: 0 -16px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity .3s var(--weich);
  background: linear-gradient(var(--gruen), var(--gruen)) left top / 3px 100% no-repeat, linear-gradient(90deg, rgba(var(--gruen-rgb), .10), rgba(var(--gruen-rgb), 0) 78%); }
.leistung.ist-aktiv::after { opacity: 1; }
.leistung.ist-aktiv h3, .leistung.ist-aktiv .leistung__wahl { color: var(--gruen-text); }
.produkt__punkt { width: 16px; height: 16px; margin: -8px 0 0 -8px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 0 18px 6px rgba(var(--gruen-rgb), .45); }
.produkt__punkt::before { content: ""; position: absolute; left: 50%; top: 50%; width: 280px; height: 280px; margin: -140px 0 0 -140px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--gruen-rgb), .42) 0%, rgba(var(--gruen-rgb), .22) 40%, rgba(var(--gruen-rgb), 0) 70%); }
.produkt__punkt::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--gruen); pointer-events: none; animation: punkt-puls 2s ease-out infinite; }
@keyframes punkt-puls { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .produkt__punkt::after { animation: none; transform: scale(2.4); opacity: .5; } .leistung::after { transition: none; } }