/* ErfinderWerk: dieselbe Seite, die Farbwelt des Produkts.

   Die Website des Ingenieurbüros ist dunkel und grün, die Anwendung ist hell
   und türkis. Wer auf der Produktseite klickt, landet in der Anwendung — sähe
   dort alles anders aus, wäre das ein Bruch im wichtigsten Moment.

   Deshalb tauscht diese Datei ausschließlich Farbwerte aus. Aufbau, Typografie
   und alle Klassen bleiben, wie sie sind: Was auf der einen Seite funktioniert,
   funktioniert auf der anderen genauso.

   Die Werte stammen aus der Anwendung (Tailwind slate + das Marken-Türkis
   #14a9a5) und sind auf Kontrast geprüft, nicht nach Augenmaß gewählt. Die
   Verhältnisse stehen jeweils daneben. */
:root {
  color-scheme: light;

  --bg: #F7F9FB;             /* Seitengrund */
  --bg-2: #FFFFFF;           /* das hellere der beiden Bänder */
  --card: #FFFFFF;
  --card-2: #F1F5F9;         /* angehobene Fläche: Diagrammteile, Fensterrahmen */
  --dark: #0B2239;           /* Fußzeile und dunkle Akzentflächen */

  --ink: #0B2239;            /* Überschriften: auf Grund 15.3:1 */
  --ink-2: #33475C;          /* Fließtext:     auf Grund  9.1:1 */
  --muted: #5A6B7D;          /* Nebentext:     auf Grund  5.2:1 */

  --line: #E3E9EF;
  --line-2: #CFD8E3;

  /* Auf Hell trägt die Kante weniger, dafür der Helligkeitssprung mehr —
     umgekehrt als auf Dunkel. Deshalb hellere Linien und weichere Schatten. */
  --green: #14A9A5;          /* Markenton, Flächen */
  --green-deep: #00909B;     /* Grafik und Symbole */
  --green-ink: #007480;      /* Text und Verweise, türkiser als vorher (14.10.2026): auf Weiß 5.5:1, auf Grund 5.2:1 */
  --green-text-aa: #007F8A;  /* kleiner Akzenttext (Eyebrow): auf Weiß 5.0:1, auf --bg 4.8:1 */
  --green-bright-text: #0BA0AA; /* leuchtendes Petrol nur für große, fette Schrift (ab 24 px bzw. 19 px fett) und Symbole:
                                   auf Weiß 3.25:1, auf --bg 3.08:1 (Mindestwert 3:1); #14A9A5 selbst hat nur 2.9:1 */
  --green-wash: rgba(20, 169, 165, .10);
  --on-green: #04211F;       /* Schrift auf der Markenfläche: 5.8:1 */

  --sh-1: 0 1px 2px rgba(11, 34, 57, .06), 0 8px 24px rgba(11, 34, 57, .07);
  --sh-2: 0 2px 6px rgba(11, 34, 57, .08), 0 18px 44px rgba(11, 34, 57, .12);
}

/* Die Fußzeile bleibt dunkel: Sie schließt die helle Seite ab und wiederholt
   das Blau des Schriftzugs. Ihre Farben stehen deshalb wieder auf Dunkel. */
.foot {
  --ink: #EDF1F7;
  --ink-2: #C2CCDA;
  --muted: #9DAABB;
  --line: #2C4058;
  --green-ink: #5FD6D2;      /* auf #0B2239 7.9:1 */
  --green-text-aa: #5FD6D2;
  --green-bright-text: #5FD6D2;
}
.foot a { color: var(--ink-2); }
.foot a:hover { color: #FFFFFF; }

/* Die Kopfzeile steht auf hellem Grund und braucht eine sichtbare Unterkante,
   die sie auf Dunkel nicht brauchte. */
.top { background: rgba(255, 255, 255, .86); border-bottom: 1px solid var(--line); }
.top-nav a { color: var(--ink-2); }
.top-nav a:hover { color: var(--green-ink); }

/* Das Logo trägt auf Hell keinen weißen Untergrund mehr — es steht direkt. */
/* Auf der Produktseite traegt das Logo die Marke allein, deshalb steht es
   deutlich groesser als die Wortmarke des Ingenieurbueros. Die Leiste selbst
   waechst dafuer nur um acht Pixel — auf schmalen Geraeten bleibt das Logo
   klein, sonst draengt es die Menuetaste heraus. */
.top-in { height: 84px; }
.top-logo--ew img { height: 56px; width: auto; display: block; }
@media (max-width: 560px) {
  .top-in { height: 72px; }
  .top-logo--ew img { height: 34px; }
  /* Das Bild ist nur 34 Pixel hoch; der Verweis darum herum bekommt Polster,
     damit die Trefferflaeche 44 Pixel erreicht. Die Leiste waechst nicht mit,
     sie ist hoeher als das Logo. */
  .top-logo--ew { padding-block: 5px; }
}

/* Ohne Plättchen fehlt dem Logo der eigene Rand, und Logo, Hinweis und Slogan
   rückten zu dicht zusammen. Mehr Luft dazwischen, der Slogan eine Stufe kleiner. */
.auftakt { gap: 30px; padding: 20px 0 clamp(40px, 5vw, 64px); }
.auftakt-claim { font-size: clamp(1.6rem, 3.8vw, 2.8rem); }
.auftakt-claim-rest { margin-top: .75em; }
@media (max-width: 560px) {
  .auftakt { gap: 20px; padding: 8px 0 36px; }
  .auftakt-claim { font-size: 1.5rem; }
}
.top-nav--haupt { gap: clamp(4px, 1vw, 12px); }
.foot-logo--ew { height: 62px; width: auto; max-width: 100%; background: #FFFFFF;
  border-radius: 12px; padding: 10px 16px; }
@media (max-width: 560px) { .foot-logo--ew { height: 48px; padding: 8px 13px; } }

/* Auf Hell ist der Screenshot-Rahmen selbst hell; der dunkle Balken der
   dunklen Seite würde hier wie ein Fremdkörper sitzen. */
.appshow { background: var(--card-2); border: 1px solid var(--line); }
.appshow-bar { background: #E7EDF3; border-bottom: 1px solid var(--line); }
.appshow-name, .appshow-count { color: var(--muted); }
/* Die weißen Punkte der dunklen Seite verschwinden auf dem hellen Balken.
   Ein zartes Türkis bleibt sichtbar, ohne mit dem aktiven Punkt zu konkurrieren. */
.appshow-dot { background: rgba(20, 169, 165, .30); }
.appshow-dot:hover { background: rgba(20, 169, 165, .60); }
.appshow-dot.is-active { background: var(--green); }

/* Der Kasten „In einfachen Worten" lebt von seiner angehobenen Fläche. Auf Hell
   ist die Karte bereits weiß, also übernimmt ein zarter Grundton die Aufgabe. */
.einfach { background: var(--green-wash); border-color: rgba(20, 169, 165, .22); }

/* Formularfelder: auf Dunkel waren sie heller als der Grund, hier ist es
   umgekehrt. */
.field input, .field select, .field textarea {
  background: #FFFFFF; border-color: var(--line-2); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green); outline-color: var(--green);
}

/* Der Aufruf-Block am Seitenende: auf Dunkel ein aufgehellter Kasten, hier ein
   ruhiger Grundton mit Markenkante. */
.cta { background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); }

/* --- Nachbesserungen nach dem ersten Durchgang --------------------------- */

/* Die Fusszeile faerbt ihr Logo weiss ein (brightness(0) invert(1)) — richtig
   fuer die einfarbige Wortmarke des Ingenieurbueros, falsch fuer das bunte
   Produktlogo: Es wurde weiss auf weissem Plaettchen und verschwand. */
.foot-logo--ew { filter: none; opacity: 1; width: auto; }

/* Die Eingabefelder lagen im dunklen Entwurf auf --dark und waren dort eine
   Stufe heller als die Karte. Auf Hell ist die Karte selbst weiss, also muss
   das Feld eine Stufe dunkler werden, sonst steht Weiss auf Weiss und das
   Formular verschwindet. */
.field input, .field select, .field textarea {
  background: #F4F7FA; border: 1px solid var(--line-2); color: var(--ink);
}
.field :hover { border-color: #A9B8C9; }
.field :focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(20, 169, 165, .18); }
.consent { color: var(--ink-2); }

/* Der gruene Schein um die Hauptschaltflaeche stammt aus dem dunklen Entwurf,
   wo er die Flaeche vom Hintergrund abhob. Auf Hell wirkt er wie ein Leuchten
   ohne Anlass. */
.btn { box-shadow: var(--sh-1); }
.btn:hover { box-shadow: var(--sh-2); }
.btn--ghost { background: #FFFFFF; border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--green); color: var(--green-ink); }

/* Ein Abzug des Datenblatts geht in die Akte einer Rechtsabteilung und wird
   dort aelter als die Seite. Der Hinweis darauf steht nur im Druck, die
   Schaltflaechen nur am Bildschirm. */
.nur-drucken { display: none; }
@media print {
  .nur-drucken { display: block; margin: 18px 0; padding: 12px 16px;
    border: 1px solid #999; border-radius: 6px; font-size: 11pt; }
  .nicht-drucken { display: none !important; }
  .top, .foot { display: none !important; }
  .band { padding: 0 !important; }
  h2 { break-after: avoid; }
  h3 { break-after: avoid; }
  ul, p { break-inside: avoid; }
  /* Eine Kachel zerschneiden heisst, eine Anschrift auf zwei Seiten zu legen.
     Dasselbe gilt fuer Bilder samt Unterschrift und fuer die hervorgehobenen
     Kaesten: Was zusammen gelesen wird, gehoert auf eine Seite. */
  .legal-tile, figure, .einfach { break-inside: avoid; }
  /* Das Kachelraster darf umbrechen, die Kacheln darin nicht. Zwei Spalten
     statt drei, sonst wird der Text in den Kacheln zu schmal. */
  .legal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .legal-tile { padding: 12px 14px; }
}

/* Ein Abzug des Datenblatts geht in die Akte einer Rechtsabteilung und wird
   dort aelter als die Seite. Der Hinweis darauf steht nur im Druck, die
   Schaltflaechen nur am Bildschirm. */
.nur-drucken { display: none; }
@media print {
  .nur-drucken { display: block; margin: 18px 0; padding: 12px 16px;
    border: 1px solid #999; border-radius: 6px; font-size: 11pt; }
  .nicht-drucken { display: none !important; }
  .top, .foot { display: none !important; }
  h2 { break-after: avoid; }
  h3 { break-after: avoid; }
  ul, p { break-inside: avoid; }
  /* Eine Kachel zerschneiden heisst, eine Anschrift auf zwei Seiten zu legen.
     Dasselbe gilt fuer Bilder samt Unterschrift und fuer die hervorgehobenen
     Kaesten: Was zusammen gelesen wird, gehoert auf eine Seite. */
  .legal-tile, figure, .einfach { break-inside: avoid; }
  /* Das Kachelraster darf umbrechen, die Kacheln darin nicht. Zwei Spalten
     statt drei, sonst wird der Text in den Kacheln zu schmal. */
  .legal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .legal-tile { padding: 12px 14px; }
}

/* Die drei Ansichten des Datenblatts stehen untereinander und nutzen die volle
   Breite, am Bildschirm wie im Druck: nebeneinander waeren die dichten
   App-Bilder nicht lesbar, und eine feste Hoehe liess rechts eine leere Flaeche. */
.db-bilder { grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media print {
  .legal .db-bilder { gap: 14px; }
  .legal .db-bilder .shot img { width: 100%; max-height: none; }
}

/* Eine Adresse mit Bindestrich wie erfinder-werk.de bricht der Browser gern
   genau dort um, und dann steht der Name auf zwei Zeilen. Im Druck faellt das
   besonders auf, weil man die Adresse dort abtippen muss. */
.ganze-adresse { white-space: nowrap; }

/* Briefkopf: nur im Druck, oben auf der ersten Seite. */
.briefkopf { display: none; }
@media print {
  .briefkopf { display: flex !important; align-items: flex-start;
    justify-content: space-between; gap: 16mm; margin: 0 0 10mm;
    padding-bottom: 5mm; border-bottom: 1px solid #c9d3dd; }
  .briefkopf img { height: 13mm; width: auto; }
  .briefkopf-adresse { font-size: 8.5pt; line-height: 1.45; color: #4a5b6d;
    text-align: right; white-space: nowrap; }
  .briefkopf-adresse b { color: #0B2239; }
}
/* Der Anfang nach dem Slogan: eine Idee, so wie sie getippt wird, groß und in
   der Markenfarbe, darunter nur die Arbeitsfläche des Ideen-Raums. Kein
   Fließtext daneben — erst sehen, dann lesen. */
/* Das Zitat ist eine Notiz, kein Werbesatz: kursiv und in einer Serifenschrift,
   damit es sich vom übrigen Inter-Satz abhebt. Keine Webschrift nachgeladen — die
   Liste nimmt, was das Gerät mitbringt (Mac, Windows, Android, Linux). */
.idee-zitat { position: relative; margin: 0 auto; max-width: 32ch; text-align: center;
  text-wrap: balance; font-family: "Iowan Old Style", "Palatino Linotype", Palatino,
  "Book Antiqua", Georgia, "Noto Serif", "DejaVu Serif", serif; font-style: italic;
  font-weight: 500; font-size: clamp(1.7rem, 3.8vw, 2.9rem); line-height: 1.28;
  letter-spacing: 0; color: var(--ink); }
.idee-zitat::before { content: "“"; display: block; height: .62em; font-size: 3em;
  line-height: 1; font-style: normal; color: var(--green); }

/* Galerie auf erfinder-werk.de: Die Bildunterschrift lag auf dem Bild und war
   schlecht lesbar. Hier steht sie darunter, wie bei den Einzelbildern. Die Folien
   liegen dazu in derselben Rasterzelle übereinander statt absolut positioniert,
   so bestimmt die höchste Folie die Höhe und nichts springt beim Blättern. */
.appshow-view { aspect-ratio: auto; background: #fff; }
/* Helle Seite, helle Screenshots: Beim gegenlaeufigen Ueberblenden lagen beide
   Folien in der Mitte bei 50 % und der dunkle Grund blitzte durch. Hier blendet
   die neue Folie oben ein, die alte bleibt darunter voll sichtbar, bis die neue
   deckt (Verzoegerung = Blenddauer). Die Firmenseite behaelt ihre dunkle Blende. */
.appshow-track { isolation: isolate; }
.appshow-slide { z-index: 0; transition: opacity 0s linear .55s, visibility 0s linear .55s; }
.appshow-slide.is-active { z-index: 1; transition: opacity .55s ease; }
.appshow-track { display: grid; height: auto; }
.appshow-slide { position: static; grid-area: 1 / 1; }
.appshow-slide img { height: auto; aspect-ratio: 16 / 10; }
/* Abstand Bild->Bildunterschrift mindestens 24px (Nachschaerfung 09.10.2026,
   Handy-Test, Mindestabstands-Durchgang). */
.appshow-cap { position: static; padding: 24px 16px 14px; background: var(--card);
  color: var(--muted); font-size: 13.5px; line-height: 1.5; text-shadow: none;
  border-top: 1px solid var(--line); }
.idee-quelle { margin: 14px auto 0; text-align: center; font-size: 15px; color: var(--muted); }
.einfach a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; }
.top-nav--haupt a, .top-nav--haupt .nav-drop-knopf { white-space: nowrap; }
.btn--puls { animation: ewPuls 2.8s ease-out infinite; }
.btn--puls:hover, .btn--puls:focus-visible { animation: none; }
@keyframes ewPuls {
  0%   { box-shadow: var(--sh-1), 0 0 0 0 rgba(20, 169, 165, .45); }
  70%  { box-shadow: var(--sh-1), 0 0 0 12px rgba(20, 169, 165, 0); }
  100% { box-shadow: var(--sh-1), 0 0 0 0 rgba(20, 169, 165, 0); }
}
@media (prefers-reduced-motion: reduce) { .btn--puls { animation: none; } }

/* --- Bewerbung zum Pilot-Test ---------------------------------------------
   Vier Kacheln mit den Eckdaten, darunter das Formular über die volle
   Inhaltsbreite. Die Einzelheiten stehen in den Teilnahmebedingungen. */
.pilot-fakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pilot-fakt { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 20px 18px; box-shadow: var(--sh-1); }
.pilot-fakt svg { width: 22px; height: 22px; color: var(--green-deep); }
.pilot-fakt b { display: block; margin-top: 12px; font-size: 15.5px; color: var(--ink); }
.pilot-fakt p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.pilot-verweis { margin: 18px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.pilot-verweis a { color: var(--green-ink); }
/* Das Formular soll aus Text und Weiß herausstechen: Markenkante und ein
   zarter Türkiston als Fläche. Die Felder werden darin weiß, sonst lägen sie
   grau auf Türkis und sähen deaktiviert aus. */
.pilot-form { margin-top: 32px; padding: clamp(22px, 3.5vw, 40px);
  background: #EDF8F7; border: 2px solid var(--green); box-shadow: var(--sh-2); }
.pilot-form .field input, .pilot-form .field select, .pilot-form .field textarea {
  background: #FFFFFF; border-color: #B9DCDA; }
.pilot-form-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px 24px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid rgba(20, 169, 165, .30); }
.pilot-form-kopf h3 { margin: 0; font-size: 20px; }
.pilot-form-kopf p { margin: 0; font-size: 14.5px; color: var(--muted); }
.field-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pilot-einwilligung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 32px; }
.pilot-form-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
  margin-top: 10px; padding-top: 22px; border-top: 1px solid rgba(20, 169, 165, .30); }
.pilot-form-fuss .form-note { margin: 0; flex: 1 1 320px; }
.pilot-angestellt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px; max-width: none; margin-top: 24px; }
.pilot-angestellt > div:first-child { flex: 1 1 440px; }
.pilot-angestellt .btn-row { margin: 0; }
@media (max-width: 1080px) { .pilot-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .field-trio, .pilot-einwilligung { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pilot-fakten { grid-template-columns: minmax(0, 1fr); } }

/* ===========================================================================
   Landingpage-Neugestaltung (2026-10-09): Handschrift, Zonen 1/3/5/6, Kreislauf
   und Ordnen-Film. Plan: app-patents/features/waiting/Feature_landingpage-neugestaltung.md
   =========================================================================== */

/* --- Handschrift: freie Webschrift Caveat (OFL, Lizenz liegt daneben in
   fonts/caveat-OFL.txt), selbst gehostet wie Inter. Nur fuer kurze Akzente,
   nie fuer Buttons, Navigation oder Formulare — hoechstens drei Vorkommen
   auf der Startseite. --- */
@font-face {
  font-family: 'Caveat';
  src: url('fonts/caveat-var.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
/* Handschrift (Caveat) ist ein bewusst seltenes Stilmittel, kein Fliesstext-Font.
   Regel (Auftraggeber 09.10.2026, ersetzt das fruehere Budget "hoechstens drei
   je Seite"): sparsam einsetzen, nie im Fliesstext, nie an Bedienelementen
   (Buttons/Links mit Funktion), nie in der Navigation. Aktuell eingesetzt bei:
   Zone-1-Claim, Anfangssatz des Ordnen-Films ("Am Anfang steht immer die Idee."), Zone-2-Abschluss ("... und wieder von vorn."), Zone-6-Einstieg
   ("Gemeinsam mehr moeglich machen.") und in "Ueber mich" (Ueberschrift +
   Unterschrift unter dem Namen). */
.hand { font-family: 'Caveat', cursive; font-weight: 600; color: var(--green-ink); line-height: 1.2; fill: currentColor; }

/* Kopfzeilenhoehe als Variable (frueher fuer die klebende Buehne des Ordnen-Films) setzt
   sich unter die Kopfzeile, nicht dahinter. */
:root { --kopf-h: 84px; }
@media (max-width: 560px) { :root { --kopf-h: 72px; } }

/* --- Zone 1: Auftakt, zweispaltig mit Bild-Komposition rechts -------------
   Das Hauptmotiv (B0) bringt einen eigenen weissen Grund mit; auf dem leicht
   getoenten Seitengrund (--bg) stand das sonst als sichtbares Rechteck da.
   Zwei Massnahmen zusammen: der Abschnitt selbst wird reinweiss (--bg-2,
   identisch mit dem Bildgrund, deshalb keine Farbkante mehr moeglich), und
   eine weiche Maske loest zusaetzlich die Bildkontur selbst auf. Die (nach
   wie vor kantige) Bauteil-Karte bleibt davon unberuehrt.
   Kopfzeile bringt schon 84px/72px mit; .band haengt serienmaessig noch
   clamp(52,6.5vw,96)px oben dran — bewusst auf ein Minimum zurueckgenommen,
   damit zwischen Kopfzeile und Handschrift nur noch rund 48-64px frei bleiben
   (Nachschaerfung 09.10.2026) statt vorher rund 150px. */
.auftakt-sec { background: var(--bg-2); padding-top: clamp(32px, 4vw, 56px); }
/* Handschrift ueber der vollen Auftakt-Breite (Nachschaerfung 09.10.2026,
   dritte Runde): vorher stand sie nur ueber der linken Spalte und brach in
   vier Zeilen um. Jetzt zwei echte Zeilen (eigene <span>, white-space:nowrap
   statt freiem Umbruch), Zeile 2 ca. 8-10% eingerueckt und kleiner, damit sie
   bei 1440px rund 55-65% der Auftakt-Breite einnimmt (ausgemessen, kein fester
   Wert, weil Caveat ein proportionaler Schriftschnitt ist). */
.zone1-hand { display: block; margin: 0 0 clamp(32px, 4.44vw, 64px); }
.zone1-hand-zeile { display: block; width: max-content; max-width: 100%; margin-inline: auto;
  position: relative; white-space: nowrap; }
.zone1-hand-zeile--1 { font-size: clamp(26px, 4.44vw, 64px); font-weight: 700; transform: rotate(-2deg); }
.zone1-hand-zeile--2 { font-size: clamp(20px, 3.68vw, 53px); font-weight: 700; margin-top: 6px;
  left: 10%; transform: rotate(-3deg); }
/* Raster, Bildrahmen und Andockpunkte des früheren Kreislauf-Hero sind mit Paket v1.6.4 entfallen
   (Hero: siehe .hero2 am Dateiende). */
@media (max-width: 860px) {
  .zone6-hand { font-size: clamp(18px, 6vw, 23px); }
}

/* --- Zone 2: Kreislauf ------------------------------------------------------
   Inline-SVG mit Zeichen-Animation beim Scrollen (.kreislauf-zeichnen haengt
   in der bestehenden IntersectionObserver-Liste von main.js). Dasselbe SVG auf
   allen Breiten (Auftraggeber 09.10.2026: keine Listen-Fassung mehr unter
   720px) - .kreislauf-zeichnen ist ein Container-Query-Rahmen (wie
   .zone1-bild-rahmen), damit die Stationstexte per cqw mit der tatsaechlich
   gerenderten SVG-Breite mitskalieren statt mit dem Viewport. */
.kreislauf-zeichnen { container-type: inline-size; }
.kreislauf-svg { display: block; width: 100%; height: auto; max-width: 980px; margin: 0 auto; overflow: visible; }
.kreislauf-strich { fill: none; stroke: var(--line-2); stroke-width: 2.5; stroke-dasharray: 1 1;
  stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s ease; }
.kreislauf-strich--rueck { stroke: url(#kreislaufRueckVerlauf); stroke-linecap: round;
  transition-delay: .5s; }
/* Stationsname/-unterzeile: Mindestgroesse 11px/9px fuer die Lesbarkeit auf
   kleinen Screens, obere Grenze = die bisherige Desktop-Groesse (15.5/12
   SVG-Einheiten, bei voller Rahmenbreite ~980px nahezu 1:1 in CSS-Pixel). */
.kreislauf-stationstitel { font-size: clamp(11px, 1.6cqw, 15.5px); }
.kreislauf-stationsunter { font-size: clamp(9px, 1.25cqw, 12px); }
/* Korrektur 09.10.2026 (Auftraggeber, nach Handy-Test): die grosse Slogan-Groesse
   bleibt allein Zone 1 und "Ueber mich" vorbehalten. Hier deutlich kleiner (rund
   1,25rem/20px bei 1440px) und wieder in Dunkelblau (--ink) statt der Tinte/des
   Logo-Tons - Position unveraendert unterhalb der Pfeillinie mit Abstand. */
/* Seit 11.10.2026 HTML-Absatz unter dem SVG (vorher SVG-Text, der auf dem Handy auf ~5 px
   schrumpfte). Groesser als Fliesstext, deutlich kleiner als die Zonen-Handschrift (26-64px). */
.kreislauf-hand { font-size: clamp(22px, 2vw, 30px); font-weight: 700; color: var(--ink);
  text-align: center; margin: 10px auto 0; }
.kreislauf-zeichnen.is-in .kreislauf-strich { stroke-dashoffset: 0; }
/* Unter 420px ueberlappen Name und Unterzeile sonst leicht - die Unterzeile
   (zwei Zeilen je Station) blendet hier aus, der Name bleibt (Mindestgroesse
   11px greift weiterhin ueber .kreislauf-stationstitel). */
@media (max-width: 420px) {
  .kreislauf-stationsunter { display: none; }
  /* Geprueft (09.10.2026): bei voller Breite und den cqw-Mindestgroessen bleibt
     die Darstellung bis 390px ohne Ueberlappung lesbar - ein zusaetzliches
     Verbreitern+Beschneiden ist hier nicht noetig und wuerde die aeusseren
     Stationen (Idee/Verguetung) nur unnoetig anschneiden. Bliebe es bei noch
     schmaleren Screens eng, waere .kreislauf-svg { width: >100%; } mit
     .kreislauf-zeichnen { overflow:hidden } der Ansatz - siehe Pruefvermerk
     im Abnahme-Bericht vom 09.10.2026. */
}
@media (prefers-reduced-motion: reduce) { .kreislauf-strich { transition: none; stroke-dashoffset: 0; } }

/* --- Zone 3: Personen-Kacheln ---------------------------------------------- */
.personen-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.personen-kachel { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); text-decoration: none;
  color: inherit; transition: box-shadow .2s ease, transform .2s ease; }
.personen-kachel:hover, .personen-kachel:focus-visible { box-shadow: var(--sh-2); transform: translateY(-2px); }
.personen-bild { aspect-ratio: 1 / 1; overflow: hidden; flex: 0 0 auto; }
.personen-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Textbereich mit flex:1, damit alle vier Links trotz unterschiedlich langer
   Saetze auf einer Linie stehen (Nachschaerfung 09.10.2026). */
.personen-info { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.personen-info b { display: block; font-size: 15.5px; color: var(--ink); }
.personen-info p { flex: 1; margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.personen-pfeil { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 13px; font-weight: 600; color: var(--green-ink); }
.personen-pfeil svg { width: 16px; height: 16px; }
@media (max-width: 860px) { .personen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Zone 5: Vertrauen, dunkles Band ---------------------------------------
   Neue Farbkombinationen auf var(--dark) #0B2239 gemessen (WCAG-Kontrast,
   Mindestmass 4,5:1): #C2CCDA (Haekchen-Text) 9,94:1 · #9DAABB (Fussnotiz)
   6,84:1 · #5FD6D2 (Link/Icon) 9,24:1 · #EDF1F7 (Ueberschrift) 14,23:1. Alle
   vier Werte stammen aus der bereits geprueften Fusszeilen-Palette weiter oben. --- */
.vertrauen-band { background: var(--dark); padding-block: 32px; }
.vertrauen-band .t-h3 { color: #EDF1F7; }
.vertrauen-band .checks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 22px; color: #C2CCDA; }
.vertrauen-band .checks svg { color: #5FD6D2; }
.vertrauen-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #2C4058; }
.vertrauen-zeile p { margin: 0; font-size: 13.5px; color: #9DAABB; }
.vertrauen-zeile a { display: inline-flex; align-items: center; gap: 6px; color: #5FD6D2; font-weight: 600; white-space: nowrap; }
.vertrauen-zeile a svg { width: 16px; height: 16px; flex: 0 0 auto; }
@media (max-width: 860px) { .vertrauen-band .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vertrauen-band .checks { grid-template-columns: minmax(0, 1fr); } }

/* --- Zone 6: Handschrift-Akzent ueber der Bewerbungskarte ------------------ */
/* Eigener Hintergrund (gleiche Farbe wie der Tint-Abschnitt direkt darunter),
   damit die Handschrift sichtbar zum Abschnitt "Einstieg" gehoert und nicht
   zwischen dem dunkelblauen Vertrauens-Band und der Formular-Karte eingequetscht
   wirkt. Gleiche Groesse wie die Zone-1-Handschrift Zeile 1. */
.zone6-intro { background: var(--bg-2); padding-top: clamp(40px, 6vw, 64px);
  padding-bottom: clamp(24px, 2.2vw, 28px); }
.zone6-hand { text-align: center; margin: 0 auto; font-size: clamp(26px, 4.44vw, 64px);
  font-weight: 700; }

/* ===========================================================================
   Ordnen-Film (portiert aus Mockup D, 05.10.2026):
   Ordnen-Knopf, einmal je Seitenbesuch. Ablauf/Zustand in main.js; hier nur
   Optik. Farbvariablen sind identisch mit denen oben in dieser Datei — im
   Mockup standen sie als eigener :root-Block, der hier entfaellt. Die
   Mockup-Leiste (Review-Werkzeug) ist kein Bestandteil der echten Seite. --- */
.ansehen-intro { padding-block: 4px 0; }
/* Seit 11.10.2026 ohne klebende Buehne und ohne feste Hoehe: der Film ist zeitgesteuert, die
   Abschnittshoehe bleibt zwischen Film und Standbild gleich (kein Hoehensprung beim Scrollen). */
.scrollfilm { position: relative; background: var(--card-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 28px; }
.scrollfilm-innen { display: flex; align-items: center; padding: 28px clamp(16px, 4vw, 48px); }
.buehnen-rahmen { position: relative; flex: 1 1 auto; max-width: 1560px; margin-inline: auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-2); overflow: hidden; }
/* Band über der Bühne (Konzept v2, F1): sechs Knoten, der aktive groß mit Symbol, erledigte klein
   gefüllt, kommende als Ring. Farben sind die dokumentierten Dunkel-Werte der Seite (--dark,
   #EDF1F7 14,2:1, #9DAABB 6,8:1, #5FD6D2 9,2:1). Die Knoten-Höhe ist fest (Slot 28 px), damit der
   große aktive Knoten nichts verschiebt. */
/* Kopfzeile „ERFINDERWERK · Fläche“ entfiel am 14.10.2026 (Auftraggeber): der Platz geht an die
   Stationenleiste, die dafür größer wurde, damit sie auch auf dem Handy lesbar ist. */
.film-band { background: var(--dark); color: #EDF1F7; padding: 10px clamp(14px, 3vw, 28px) 10px; }
.band-knoten { list-style: none; display: flex; margin: 0; padding: 0; }
.knoten { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.knoten::before { content: ""; position: absolute; top: 19px; right: 50%; width: 100%; height: 3px; background: #2C4058;
  transition: background .3s ease; }
.knoten:first-child::before { display: none; }
.knoten.aktiv::before, .knoten.erledigt::before { background: var(--green); }
.knoten-slot { position: relative; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; }
.knoten-punkt { box-sizing: border-box; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #9DAABB; background: var(--dark); color: var(--dark);
  transition: width .3s ease, height .3s ease, background .3s ease, border-color .3s ease; }
.knoten-punkt svg { width: 22px; height: 22px; display: none; }
.knoten.erledigt .knoten-punkt { background: var(--green); border-color: var(--green); }
.knoten.aktiv .knoten-punkt { width: 40px; height: 40px; background: #5FD6D2; border-color: #5FD6D2; }
.knoten.aktiv .knoten-punkt svg { display: block; }
.knoten-name { font-size: 15px; font-weight: 600; color: #9DAABB; white-space: nowrap; transition: color .3s ease; }
.knoten.aktiv .knoten-name { color: #EDF1F7; }
#buehne { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #FBFCFE;
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1px); background-size: 22px 22px; }
#svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Film-Satz: genau ein ruhiger Satz pro Phase, unter den Knoten im Band, weiches Ein-/Ausblenden.
   Feste Höhe, damit kein Umbruch das Band springen lässt. Alle Sätze in einer Schrift und Größe;
   die Handschrift für den Anfangssatz entfiel am 14.10.2026 (Auftraggeber: einheitlich, größer). */
.film-satz { margin: 10px 0 0; height: 2.6rem; display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.75rem); color: #EDF1F7; line-height: 1.25;
  opacity: 0; transition: opacity .5s ease; }
.film-satz.zeigen { opacity: 1; }
.buehnen-fuss { padding: 14px 18px 18px; border-top: 1px solid var(--line); background: var(--card); }
/* Abspielleiste wie bei einem Videoplayer: Knopf, Zeit, Schieber. Teal für Bedienelemente, Tinte für Text.
   Der Export blendet .buehnen-fuss aus, die Leiste erscheint dort also nicht. */
.abspielleiste { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto; }
.abspiel-knopf { flex: none; width: 40px; height: 40px; border: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-ink); color: #fff; cursor: pointer; }
.abspiel-knopf:hover { background: var(--green-deep); }
.abspiel-knopf:focus-visible, .film-regler:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.abspiel-knopf svg { width: 20px; height: 20px; grid-area: 1 / 1; }
.abspiel-knopf .ico-pause, .abspiel-knopf.spielt .ico-play { display: none; }
.abspiel-knopf.spielt .ico-pause { display: block; }
.film-zeit { flex: none; min-width: 5.6em; font-size: 13.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.film-regler { --fortschritt: 0%; flex: 1 1 auto; min-width: 0; height: 24px; margin: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; touch-action: pan-y; border-radius: 12px; }
.film-regler::-webkit-slider-runnable-track { height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--green-ink) var(--fortschritt), var(--line-2) var(--fortschritt)); }
.film-regler::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line-2); }
.film-regler::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--green-ink); }
.film-regler::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: #fff; border: 3px solid var(--green-ink); }
.film-regler::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--green-ink); }
/* Wasserzeichen: fest über der Bühne, die Deckkraft setzt ew.js aus der Filmzeit. */
.film-wasserzeichen { position: absolute; right: 3%; bottom: 4%; z-index: 2; width: clamp(120px, 15%, 240px); height: auto;
  pointer-events: none; user-select: none; }
@media (max-width: 600px) {
  .film-wasserzeichen { width: max(120px, 30%); right: 3%; bottom: 10px; }
  .abspielleiste { gap: 10px; }
}
/* Die ganze Zeile ist das <summary> (native Aufklapp-Semantik); nur "Ablauf
   als Text" sieht wie ein Link aus, auch wenn die ganze Zeile klickbar ist. */
.ablauf-text { margin: 12px auto 0; max-width: 60ch; text-align: center; font-size: 12.5px; color: var(--muted); }
.ablauf-text summary { cursor: pointer; list-style: none; }
.ablauf-text summary::-webkit-details-marker { display: none; }
.ablauf-text .ablauf-link { color: var(--green-ink); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; }
.ablauf-text ol { margin-top: 8px; padding-left: 20px; text-align: left; font-size: 13.5px; color: var(--ink-2); }
/* Auftakt „Idee“: denkende Figur, Bildmarke mit Schein und Strahlen. Die Ebene liegt über dem ganzen
   Rahmen, weil die Birne am Ende im Band ankommt; Lage und Größe setzt ew.js aus der Bühne. */
.idee-szene { position: absolute; display: none; pointer-events: none; z-index: 3; }
.idee-figur { position: absolute; left: 33%; bottom: 13%; height: 46%; aspect-ratio: 1 / 2; width: auto; overflow: visible;
  fill: none; stroke: #0B2239; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.idee-figur .strich { stroke-dasharray: 1; stroke-dashoffset: 1; }
.idee-figur .boden { stroke-opacity: .3; }
.idee-marke { position: absolute; left: 54.4%; top: 13%; height: 32.4%; aspect-ratio: 1965 / 2523; transform-origin: 50% 50%;
  will-change: transform, opacity; opacity: 0; }
.idee-marke .bildmarke { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.idee-halo { position: absolute; left: -45%; top: -12%; width: 190%; aspect-ratio: 1; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(20, 169, 165, .55) 0%, rgba(20, 169, 165, .18) 40%, rgba(20, 169, 165, 0) 66%); }
.idee-strahlen { position: absolute; left: -40.7%; top: -31.7%; width: 181.4%; max-width: none; height: 163.4%; overflow: visible; opacity: 0;
  stroke: #14A9A5; stroke-width: 64; stroke-linecap: round; transform-origin: 50% 40%; }

/* Ende des Films (Konzept v2, F7/F8): Blatt „Strukturierter Patententwurf“ rechts neben der Struktur, darunter
   die zwei Ziele. Nie „erteilt“, kein Häkchen-Stempel (R1): das Ziel heißt Anmeldung. Der Block bleibt
   immer im Layout (nur unsichtbar), damit ew.js seine Höhe messen kann. */
.film-ende { position: absolute; left: 61%; right: 3%; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; visibility: hidden; }
.film-ende.an { visibility: visible; }
.blatt-huelle { position: relative; }
.entwurf-blatt { opacity: 0; background: #fff; border: 2px solid var(--green); border-radius: 10px; padding: 14px 18px 16px;
  box-shadow: var(--sh-1); }
.blatt-kopf { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); font-size: clamp(13px, 1.5vw, 17px);
  /* Platz für den Stempel rechts oben: die Überschrift bricht um, statt unter ihn zu laufen. */
  padding-right: 30%; }
.blatt-kopf svg { width: 18px; height: 18px; flex: none; color: var(--green-deep); }
.blatt-zeile { margin-top: 12px; opacity: 0; font-size: clamp(12.5px, 1.4vw, 16px); font-weight: 600; color: var(--ink-2); min-height: 1.4em; }
.blatt-text { display: inline; }
.blatt-cursor { display: inline-block; width: 2px; height: 1.05em; background: var(--green); vertical-align: -2px; margin-left: 1px; }
.blatt-balken { display: block; height: 5px; width: 82%; border-radius: 3px; background: var(--line-2); margin-top: 6px; opacity: 0; }
.blatt-zeile:nth-child(3) .blatt-balken { width: 64%; }
.blatt-zeile:nth-child(4) .blatt-balken { width: 72%; }
/* Pfeil Struktur -> Blatt: Querformat auf Bühnenebene (Bühnenmaß 1600 × 900), Hochformat im Fluss. */
.ende-pfeil { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.ende-pfeil path, .ende-pfeil-h path { stroke: var(--green); stroke-linecap: round; stroke-linejoin: round; }
#pfeilWeg, #pfeilSpitze { stroke-width: 13; }
.ende-pfeil-h { display: none; }
#pfeilWegH { stroke-width: 5.5; }
#pfeilSpitzeH { fill: var(--green); stroke: none; }
/* Stempel: dunkelblau, über dem rechten oberen Blattrand, gedreht; Größe und Animation aus ew.js. */
.stempel { position: absolute; right: -7%; top: -46%; width: 56%; aspect-ratio: 1; color: var(--dark); opacity: 0;
  pointer-events: none; font-family: Inter, sans-serif; transform: rotate(-12deg); }
.ende-gabel { display: block; width: 100%; height: 30px; opacity: 0; stroke: var(--green-deep); stroke-width: 2; }
.ende-ziele { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ziel { opacity: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: #fff;
  border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 8px; font-size: clamp(11.5px, 1.25vw, 14px);
  font-weight: 600; color: var(--ink); line-height: 1.25; }
.ziel-icon { display: flex; align-items: center; gap: 8px; }
.ziel-icon svg { width: 26px; height: 26px; color: var(--green-deep); }
.ziel-icon img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-2); }

@media (max-width: 900px) {
  .scrollfilm-innen { padding-top: 10px; }
  .buehnen-rahmen { width: 100%; }
  /* Handy-Band (F11): nur der aktive Knoten trägt seinen Namen, die übrigen sind Punkte. */
  .knoten-name { display: none; }
  .knoten.aktiv .knoten-name, .knoten.zuletzt .knoten-name { display: block; }
  .knoten-punkt { width: 14px; height: 14px; }
  .film-satz { height: 3.4rem; font-size: 1.3rem; }
}
@media (max-width: 600px) {
  /* Hochformat (Rückmeldung vom echten Handy 11.10.2026): 1 : 1,35 für den ganzen Film. Ziel: Band und Bühne
     zusammen passen mit dem kompletten Endbild auf einen Bildschirm (390 px: höchstens 720 px). Die Höhe
     ändert sich im Film nie. */
  #buehne { aspect-ratio: 1 / 1.35; }
  /* Band auf dem Handy: Knoten 16 px (aktiv 36 px), nur der aktive Name, Satz in bis zu drei Zeilen. */
  .film-band { padding: 10px 12px; }
  .knoten { gap: 3px; }
  .knoten-slot { width: 36px; height: 36px; }
  .knoten::before { top: 17px; }
  .knoten-punkt { width: 16px; height: 16px; }
  .knoten.aktiv .knoten-punkt { width: 36px; height: 36px; }
  .knoten-punkt svg { width: 20px; height: 20px; }
  .knoten-name { font-size: 14px; }
  /* Die Namen am Rand („Idee“, „Anmeldung“) rücken nach innen, sonst ragen sie über das Band hinaus. */
  .knoten:first-child .knoten-name { transform: translateX(10px); }
  .knoten:last-child .knoten-name { transform: translateX(-14px); }
  .film-satz { margin-top: 6px; height: 4.8rem; font-size: 1.25rem; line-height: 1.25; }   /* Platz für drei Zeilen des längsten Satzes */
  /* Ende: unten Blatt, Bügel und Ziele in Pixelmaßen, darüber die Struktur; ew.js misst die Höhe dieses
     Blocks und stellt die Kamera darauf ein. Der kleine Pfeil ragt links aus dem Blatt-Block nach oben,
     NOCH OFFEN steht in der Struktur rechts neben dem Ring „Hydrophobe Lamellen“. */
  /* unten 34 px frei: dort sitzt das Wasserzeichen, es soll keine Zielkachel verdecken */
  .film-ende { left: 12px; right: 12px; top: auto; bottom: 34px; justify-content: flex-end; }
  .ende-pfeil { display: none !important; }
  .ende-pfeil-h { display: block; position: absolute; left: 6%; bottom: 100%; margin-bottom: 2px; width: 40px; height: 60px; }
  .entwurf-blatt { padding: 8px 10px 9px; border-width: 1.5px; border-radius: 8px; }
  .blatt-kopf { font-size: 15px; padding-right: 27%; }
  .blatt-kopf svg { width: 16px; height: 16px; }
  .blatt-zeile { margin-top: 2px; font-size: 13px; min-height: 0; line-height: 1.25; }
  .blatt-balken { display: none; }
  .ende-gabel { height: 14px; margin-top: 3px; }
  .ende-ziele { gap: 8px; }
  .ziel { gap: 2px; padding: 8px 6px; font-size: 12.5px; line-height: 1.2; border-radius: 8px; }
  .ziel-icon svg { width: 22px; height: 22px; flex: none; }
  .ziel-icon img { width: 28px; height: 28px; }
  .stempel { width: 30%; right: -2%; top: -34%; }
}
@media (prefers-reduced-motion: reduce) {
  .film-satz, .knoten-punkt, .knoten::before, .knoten-name { transition: none !important; }
}

/* --- "Über mich": Naehe zwischen Gruender und Kunden (Nachschaerfung 09.10.2026) ---
   Leicht abgesetzter Hintergrund (--bg-2, NICHT das dunkle Vertrauens-Band),
   links das Portraet, rechts zwei kurze Bloecke. Foto und Texte vom
   Auftraggeber (09.10.2026). Handschrift (Caveat) bewusst nur an zwei Stellen:
   Ueberschrift und Unterschrift unter dem Namen, siehe Regel bei .hand oben. */
.ueber-mich-band { background: var(--bg-2); }
.ueber-mich-grid { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px); align-items: start; }
.ueber-mich-bild { display: block; width: 180px; height: 180px; border-radius: 50%;
  overflow: hidden; border: 1px solid var(--line); margin-inline: auto; box-shadow: var(--sh-1); }
.ueber-mich-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ueber-mich-text .t-h2 { margin-top: 4px; }
.ueber-mich-lead { margin-top: 14px; }
/* Ueberschrift als Handschrift: gleiche Groesse wie Zone-1-Handschrift Zeile 1,
   Petrol (Erbe von .hand), leicht geneigt. */
.ueber-mich-titel { font-size: clamp(26px, 4.44vw, 64px); font-weight: 700; transform: rotate(-1.5deg);
  display: inline-block; margin-top: 2px; }
.ueber-mich-block { margin-top: 22px; }
.ueber-mich-block .t-h3 { font-size: 17px; }
/* Persönliche Kontaktmöglichkeit unter der Unterschrift (Auftraggeber 11.10.2026). */
.ueber-mich-kontakt { margin-top: 12px; }
.ueber-mich-name { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-2); line-height: 1.5; }
/* Unterschrift unter dem Namen: Handschrift, Dunkelblau statt der petrolenen
   hand-Grundfarbe, etwas kleiner als die Ueberschrift. */
.ueber-mich-unterschrift { font-size: 1.8rem; font-weight: 700; color: var(--ink); }
@media (max-width: 720px) {
  .ueber-mich-grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .ueber-mich-bild { margin-bottom: 4px; }
}

/* LinkedIn-Verweis mit Zeichen (Fußzeilen, Gründerprofil) */
.li-link { display: inline-flex; align-items: center; gap: 8px; }
.li-ico { flex: none; width: 17px; height: 17px; }
.foot a.li-link { display: flex; }
.li-link--text { color: var(--green-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* --- Häufige Fragen (12.10.2026) ---------------------------------------------
   Aufklappbar mit <details>: funktioniert ohne Skript, ist per Tastatur bedienbar
   und wird von Suchmaschinen als Text gelesen. Das Zeichen rechts ist ein Plus im
   Kreis, das sich beim Öffnen um 45 Grad dreht — kein Icon-Font, nur zwei Striche. */
.fragen-band { background: var(--bg-2); }
.fragen { max-width: 76ch; margin: 22px auto 0; border-top: 1px solid var(--line); }
.frage { border-bottom: 1px solid var(--line); }
.frage summary { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 2px; cursor: pointer; list-style: none; font-weight: 600; font-size: 17px;
  line-height: 1.35; color: var(--ink); }
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--green-ink); }
.frage summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
.frage-zeichen { position: relative; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--line-2); transition: transform .25s ease, border-color .2s; }
.frage-zeichen::before, .frage-zeichen::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 1.5px; background: var(--green-ink); transform: translate(-50%, -50%); }
.frage-zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }
.frage[open] .frage-zeichen { transform: rotate(45deg); border-color: var(--green); }
.frage-antwort { padding: 0 44px 18px 2px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.frage-antwort a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
  .frage summary { font-size: 16px; padding: 14px 0; }
  .frage-antwort { padding-right: 0; font-size: 15px; }
}

/* --- Vertraulichkeitszusage: Dienstleister-Tabelle, Unterschriftsfelder nur im Druck. */
.zusage-tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 10px; }
.zusage-tabelle th, .zusage-tabelle td { text-align: left; vertical-align: top; padding: 8px 10px;
  border-bottom: 1px solid var(--line); }
.zusage-tabelle th { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.unterschrift { display: none; }
@media print {
  .zusage-tabelle { font-size: 9.5pt; break-inside: avoid; }
  .unterschrift { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14mm;
    margin: 22mm 0 0; padding: 0; border: 0; font-size: 9pt; color: #4a5b6d; break-inside: avoid; }
  .unterschrift-feld { line-height: 1.4; }
  .unterschrift-linie { display: block; height: 14mm; margin-bottom: 2mm; border-bottom: 1px solid #0B2239; }
}


/* ===========================================================================
   Relaunch Phase 1 (13.10.2026): Hauptnavigation mit Menueknopf, Statuskennzeichen,
   neue Startseitenabschnitte. Menueknopf/Aufklappen/Esc: main.js, Feinheiten: ew-nav.js.
   =========================================================================== */

/* Haupt-Navigation: Logo (312 px) plus fuenf Eintraege brauchen mehr Platz als die Firmenseite,
   deshalb schaltet das Menue schon bei 1100 px auf den Knopf um (styles.css erst bei 900 px). */
@media (max-width: 1100px) {
  .burger { display: block; }
  .top-nav--haupt { position: fixed; inset: var(--kopf-h) 0 auto 0; flex-direction: column;
    align-items: stretch; gap: 6px; background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 14px var(--gutter) 24px; display: none; box-shadow: var(--sh-2);
    max-height: calc(100vh - var(--kopf-h)); max-height: calc(100dvh - var(--kopf-h)); overflow-y: auto; }
  .top-nav--haupt.open { display: flex; }
  .top-nav--haupt a { padding: 14px 16px; border-radius: var(--r-sm); font-size: 16px;
    background: var(--card); border: 1px solid var(--line); }
  .top-nav--haupt a.btn { margin: 10px 0 0; justify-content: center; background: var(--green);
    border-color: var(--green); color: var(--on-green); }
  .top-nav--haupt .nav-drop { display: flex; flex-direction: column; gap: 6px; }
  .top-nav--haupt .nav-drop-pfeil { display: none; }
  .top-nav--haupt .nav-drop-knopf { padding: 14px 16px 6px; font-size: 13px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted); cursor: default; }
  .top-nav--haupt .nav-drop-knopf:hover { background: none; color: var(--muted); }
  .top-nav--haupt .nav-sub { position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0; margin: 0 0 0 16px; background: none; border: 0; box-shadow: none;
    display: flex; flex-direction: column; gap: 6px; }
  .top-nav--haupt .nav-drop::after { display: none; }
  .top-nav--haupt .nav-sub a { padding: 12px 16px; font-size: 15px; white-space: normal;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); }
}
/* Sichtbarer Fokus auch auf den hellen Knoepfen der Kopfzeile. */
.burger:focus-visible, .nav-drop-knopf:focus-visible, .top-nav a:focus-visible {
  outline: 3px solid var(--green-ink); outline-offset: 2px; }

/* Statuskennzeichen aus ew_seiten/status.py: live, pilot, geplant, vision. Texte und Farben
   getrennt von der Aussage, Kontrast je mindestens 4,5:1. */
.status-kenn { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; vertical-align: middle;
  border: 1px solid transparent; white-space: nowrap; }
.status-kenn--live { background: #E6F6F5; color: #0A5F5C; border-color: #B9DCDA; }
.status-kenn--pilot { background: #E6F6F5; color: #0A5F5C; border-color: #B9DCDA; }
.status-kenn--geplant { background: #FFF4DB; color: #6B4200; border-color: #F0D9A0; }
.status-kenn--vision { background: var(--card-2); color: var(--ink-2); border-color: var(--line-2); }
.personen-info .status-kenn { align-self: flex-start; margin: 6px 0 0; }

/* Hero: Subline unter der H1, Handschrift als kleine Bruecke unter dem Bild. */
.auftakt-sub { margin: 12px 0 0; font-size: clamp(1.05rem, 1.9vw, 1.3rem); font-weight: 600;
  line-height: 1.35; color: var(--green-ink); }
.film-h2 { margin: clamp(28px, 4vw, 48px) 0 10px; text-align: center; }

/* Wizard/Solo, Kreislauf, Angebot: gemeinsame Fusszeile mit Verweis. */
.wege-fuss { margin: 24px 0 0; text-align: center; font-size: 15.5px; color: var(--ink-2); }
.wege-link { display: inline-flex; align-items: center; gap: 6px; color: var(--green-ink);
  font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.wege-link svg { width: 16px; height: 16px; flex: 0 0 auto; }
.ueber-mich-kontakt .wege-link { margin-top: 4px; }

/* Vertrauensblock: Kurztext und zwei Verweise. */
.vertrauen-kurz { margin: 10px 0 20px; max-width: 70ch; font-size: 15px; line-height: 1.6; color: #C2CCDA; }
.vertrauen-zeile { gap: 10px 28px; }
.vertrauen-zeile p { flex: 1 1 300px; }

/* Pilot-Teaser. */
.pilot-teaser .sec-head { margin-bottom: 22px; }
.pilot-punkte { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; }
.pilot-punkte li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink-2); }
.pilot-punkte svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--green-bright-text); margin-top: 1px; }

/* Doppelklickschutz (ew-nav.js): gesperrter Absende-Knopf. */
.pilot-form button[disabled] { opacity: .65; cursor: progress; }

/* ---- Film-Abspann (Paket v1.4, Datei 08): Fläche über der Bühne, Deckkraft setzt ew.js aus der Filmzeit.
   Nie zwei Texte zugleich; letztes Bild ist das Logo ohne Claim-Zeile. ---- */
.film-outro { position: absolute; inset: 0; display: grid; place-items: center; background: #FBFCFE;
  visibility: hidden; opacity: 0; pointer-events: none; }
.film-outro.an { visibility: visible; }
.film-outro > * { grid-area: 1 / 1; margin: 0; text-align: center; }
/* Eine Schriftgröße für beide Aussagen (Auftraggeber 14.10.2026): auf dem Handy
   waren 24 und 20 px zu klein, obwohl die Bühne Platz bietet. */
.outro-a, .outro-b { padding: 0 6%; font-weight: 700; color: var(--ink); line-height: 1.2; letter-spacing: -.01em;
  font-size: clamp(2rem, 4.2vw, 3rem); text-wrap: balance; }
.outro-b { opacity: 0; }
.outro-wort { display: inline-block; opacity: 0; }
/* Logo und Claim stehen als Gruppe in der Mitte; die Logo-Breite bezieht sich auf die Bühne, nicht auf die Gruppe. */
.outro-c { width: 100%; display: flex; flex-direction: column; align-items: center; }
.outro-logo { width: min(74%, 560px); height: auto; opacity: 0; }
/* Die Maske ist 2,5-mal so breit wie der Claim; ew.js verschiebt sie, so entsteht die weiche Wischkante. */
/* Wie die Handschrift-Überschrift der Startseite (.zone1-hand-zeile--1): fett, 2 Grad geneigt, und
   mit negativem Abstand leicht in das Logo hineinragend (Auftraggeber 14.10.2026: dynamischer). */
.outro-claim { margin: -.32em 0 0; padding: 0 .3em; font-size: clamp(1.6rem, 3.6vw + .5rem, 4rem); font-weight: 700;
  line-height: 1.2; white-space: nowrap; transform: rotate(-2deg);
  opacity: 0; clip-path: inset(0 100% 0 0);
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent 70%); mask-image: linear-gradient(90deg, #000 60%, transparent 70%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* Statische Fassung bei reduzierter Bewegung: unter der fertigen Struktur, alles zugleich, ohne Übergang. */
.film-outro-statisch { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 4px 0 16px; margin-bottom: 14px; border-bottom: 1px solid var(--line); text-align: center; }
.film-outro-statisch[hidden] { display: none; }
.film-outro-statisch p { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.film-outro-statisch .os-a { letter-spacing: -.01em; }
.film-outro-statisch .os-b { font-weight: 600; color: var(--ink-2); }
.film-outro-statisch .os-logo { width: min(70%, 260px); height: auto; margin-top: 8px; }
.film-outro-statisch .os-claim { font-family: 'Caveat', cursive; font-size: 1.8rem; font-weight: 700; color: var(--green-ink); margin-top: -4px; transform: rotate(-2deg); }
@media (max-width: 600px) {
  .outro-logo { width: 84%; }
}
@media (prefers-reduced-motion: reduce) {
  .film-outro, .outro-a, .outro-b, .outro-wort, .outro-logo { transition: none; }
}

/* --- Nachbesserung Abnahme 13.10.2026 --------------------------------------- */
/* Links im Fließtext: Unterstreichung statt Farbunterschied allein (axe link-in-text-block). */
p a:not([class]) { text-decoration: underline; text-underline-offset: 3px; }
/* Galeriepunkte: sichtbarer Punkt bleibt klein (8 px, aktiv 22 px), die Schaltfläche selbst
   misst mindestens 24 x 24 px (WCAG 2.2 Zielgröße, 2.5.8). */
.appshow-dots { gap: 0; }
.appshow-dot, .appshow-dot:hover, .appshow-dot.is-active { background-clip: content-box; }
.appshow-dot { box-sizing: content-box; width: 8px; height: 8px; padding: 8px;
  border-radius: 12px; }
.appshow-dot.is-active { width: 22px; border-radius: 12px; }
.appshow-dot::after { display: none; }
.appshow-dot:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
/* Aufklappmenü „Für wen“ (Desktop): offen nur per Maus-Hover oder aria-expanded="true". Der
   Tastaturfokus allein hält es nicht offen, damit Esc es sichtbar schließt (WCAG 1.4.13). */
@media (min-width: 1101px) {
  .top-nav--haupt .nav-drop:focus-within:not(:hover) > .nav-drop-knopf[aria-expanded="false"] + .nav-sub {
    opacity: 0; visibility: hidden; transform: translateY(-6px); }
  .top-nav--haupt .nav-drop:focus-within:not(:hover) > .nav-drop-knopf[aria-expanded="false"] .nav-drop-pfeil {
    transform: none; }
}

/* === v1.6 Paket A: Startseite und Lightbox === */

/* --- Hero (docs/16, Vorlage branchen_hero_mockup_REFERENZ.png, Auftraggeber 14.10.) ------------
   Flaches Raster aus Geschwisterelementen: Handy und Desktop ordnen dieselben Bausteine verschieden an.
   Handy-Reihenfolge: Slogan, Eyebrow, H1, Nutzenzeile, Bild, Knopf, Absatz, Video-Link.
   Desktop ab 1024 px: Der Hero ist breiter als die übrigen Abschnitte (Rand 56 px, ab 1560 px
   Viewport mittig begrenzt), die Textspalte nimmt 40 %, das Bild 60 % und läuft rechts bis zum
   Viewport-Rand. Die sechs Branchen-Schilder sind HTML über dem Bild (Prozentwerte relativ zum Bild). */
.band.hero2 { padding-block: clamp(14px, 3vw, 40px) clamp(32px, 4vw, 56px); overflow-x: clip; }
.hero2-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 14px;
  grid-template-areas: "slogan" "kopf" "bild" "cta" "text" "video" "reihe"; }
.hero2-slogan { grid-area: slogan; margin: 0; position: relative; z-index: 3; color: var(--green-bright-text); }
.hero2 .zone1-hand-zeile { margin-inline: 0; max-width: none; text-align: left; color: var(--green-bright-text); }
.hero2 .zone1-hand-zeile--1 { font-size: clamp(1.75rem, 6.2vw, 2.45rem); transform: rotate(-1deg); }
.hero2 .zone1-hand-zeile--2 { font-size: clamp(1.4rem, 4.8vw, 1.9rem); left: 5%; margin-top: 2px; transform: rotate(-1deg); }
/* Schwung-Unterstrich als Inline-SVG: gefüllte, spitz auslaufende Form in der Markenfläche. */
.hero2-schwung { display: block; width: min(86%, 520px); height: auto; margin: -8px 0 0 4%;
  transform: rotate(-1deg); }   /* Füllung ist ein Verlauf im SVG selbst (Vorlage: links verblassend, rechts hell) */
.hero2-kopf { grid-area: kopf; }
.hero2 .eyebrow { display: block; margin: 0; color: var(--green-text-aa); }
.hero2 .auftakt-claim { font-size: clamp(2.1rem, 8.4vw, 3rem); line-height: 1.04; margin: 6px 0 0; }
.hero2 .auftakt-claim span { display: inline; }
.hero2 .auftakt-sub { font-size: 1.2rem; font-weight: 700; color: var(--green-bright-text); }
.hero2 .auftakt-sub span { display: inline-block; }
.hero2-bild { grid-area: bild; margin: 0; position: relative; z-index: 1; }
.hero2-bild picture, .hero2-voll { display: block; }
.hero2-bild img { display: block; width: 100%; height: auto; }
/* Weich in Weiß auslaufen, contain statt Beschnitt: nur die äußeren 10 % blenden aus. */
.hero2-bild img { -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent),
    linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent),
    linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect; }
.hero2-bild .hero2-fokus { display: none; }
.hero2-bild figcaption { margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--muted); text-align: center; }
.hero2-schilder { display: none; }
.hero2-text { grid-area: text; margin: 0; max-width: 58ch; }
.hero2-cta { display: contents; }
.hero2-cta-1 { grid-area: cta; justify-content: center; text-align: center; }
/* Auf 360 px darf der Knopftext nicht in zwei Zeilen brechen: etwas kleiner, engeres Polster. */
@media (max-width: 480px) { .hero2-cta-1 { font-size: 15px; padding-inline: 14px; gap: 8px; } }
.hero2-cta-2 { grid-area: video; justify-self: start; gap: 10px; }
.hero2-cta-2 svg, .hero2-reihe svg { flex: 0 0 auto; color: var(--green-bright-text); }
.hero2-cta-2 svg { width: 26px; height: 26px; }
.hero2-cta-2:hover { border-color: var(--green); }
.hero2-reihe { grid-area: reihe; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap;
  gap: 8px 26px; font-size: 14px; color: var(--muted); }
.hero2-reihe li { display: inline-flex; align-items: center; gap: 9px; }
.hero2-reihe svg { width: 22px; height: 22px; }

@media (max-width: 767px) {
  /* Vergleichsansicht ?bild=fokus: das quadratische Ausschnittbild statt der vollen 4:3-Fassung. */
  html.bild-fokus .hero2-bild .hero2-voll { display: none; }
  html.bild-fokus .hero2-bild .hero2-fokus { display: block; }
}
@media (min-width: 768px) {
  .hero2 .zone1-hand-zeile--1 { font-size: 2.6rem; }
  .hero2 .zone1-hand-zeile--2 { font-size: 2.2rem; }
  .hero2 .auftakt-claim { font-size: 3.2rem; }
  .hero2-bild { width: min(100%, 720px); margin-inline: auto; }
  .hero2-cta { display: flex; flex-wrap: wrap; gap: 14px; grid-area: cta; margin-top: 6px; }
  .hero2-cta-1, .hero2-cta-2 { grid-area: auto; justify-self: auto; }
  .hero2-grid { grid-template-areas: "slogan" "kopf" "text" "cta" "bild" "reihe"; row-gap: 18px; }
}
@media (min-width: 1024px) {
  .hero2-grid { max-width: none; margin: 0; width: 100%;
    padding-left: max(56px, calc((100vw - 1560px) / 2)); padding-right: 0;
    grid-template-columns: minmax(0, .4fr) minmax(0, .6fr); column-gap: 0; row-gap: 0;
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
    grid-template-areas: "slogan slogan" "kopf bild" "text bild" "cta bild" "reihe bild" "rest bild";
    align-items: start; }
  /* Das Bild liegt neben dem Textblock und beginnt unter der Slogan-Zeile; der Slogan darf in den
     Bildbereich hineinreichen, weil die oberen Bildzeilen dort nur Himmel und Verläufe zeigen. */
  .hero2-bild { width: auto; max-width: 1120px; margin: 0 0 0 auto; align-self: start; grid-row: 2 / -1;
    margin-top: clamp(-130px, -7.6vw, -60px); }
  .hero2-bild figcaption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; }
  .hero2-kopf, .hero2-text, .hero2-cta, .hero2-reihe { padding-right: clamp(12px, 2vw, 32px); }
  .hero2-slogan { margin: 0 0 clamp(24px, 3vw, 46px) clamp(8px, 1.6vw, 32px); }   /* Markenclaim statt Slogan, weiter links (15.10.2026) */
  .hero2 .zone1-hand-zeile--1 { font-size: clamp(2.6rem, 4.6vw, 4.2rem); transform: rotate(-2deg); }   /* Markenclaim, eine Zeile, etwas größer (15.10.2026) */
  .hero2 .zone1-hand-zeile--2 { font-size: clamp(1.85rem, 3.25vw, 2.9rem); left: 6%; margin-top: 4px; transform: rotate(-2deg); }
  .hero2-schwung { width: min(40vw, 660px); margin-left: 5%; margin-top: -24px; transform: rotate(-2deg); }   /* Unterschrift: lang nach links, eng an der Schrift (15.10.2026) */
  .hero2 .auftakt-claim { font-size: clamp(2.4rem, 3.9vw, 4.2rem); line-height: 1.02; margin-top: clamp(10px, 1.2vw, 16px); }
  .hero2 .auftakt-claim span { display: block; white-space: nowrap; }
  .hero2 .auftakt-sub { font-size: clamp(1.2rem, 1.45vw, 1.45rem); }
  .hero2-text { font-size: clamp(1rem, 1.2vw, 1.12rem); margin-top: 16px; }
  .hero2-cta { flex-wrap: wrap; margin-top: 20px; position: relative; z-index: 2; padding-right: 0; }
  .hero2-reihe { margin-top: 20px; }
}
@media (min-width: 1360px) {
  /* Beide Knöpfe nebeneinander; der zweite darf in den leeren Bildfuß links unten hineinreichen. */
  .hero2-cta { grid-column: 1 / -1; flex-wrap: nowrap; }
}
@media (min-width: 1024px) {
  /* Branchen-Schilder: echte Elemente über dem Bild, Mittelpunkt in Prozent des Bildkastens. */
  .hero2-schilder { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
  .hero2-schild { position: absolute; display: flex; align-items: center; gap: 8px; transform: translate(-50%, -50%);
    padding: 7px 12px 7px 9px; background: #fff; border-radius: 999px; box-shadow: 0 6px 22px rgba(11, 34, 57, .14);
    font-size: clamp(11px, .92vw, 13.5px); line-height: 1.22; font-weight: 500; color: var(--ink); width: max-content; }
  .hero2-schild svg { width: 1.9em; height: 1.9em; flex: 0 0 auto; color: var(--green-bright-text); }
  .hs-chemie { left: 16%; top: 30%; }
  .hs-luft { left: 55%; top: 9%; }   /* oberhalb von Flugzeug und Satellit (Auftraggeber 14.10.) */
  .hs-agrar { left: 87%; top: 40%; }
  .hs-maschine { left: 13%; top: 63%; }
  .hs-software { left: 34%; top: 94%; }
  .hs-energie { left: 79%; top: 94%; }
  /* Vergleichsvariante B (?hero=b): Slogan klein über dem Textblock, nichts ragt ins Bild. */
  html.hero-b .hero2 .zone1-hand-zeile--1 { font-size: clamp(1.4rem, 2.3vw, 2.2rem); }
  html.hero-b .hero2 .zone1-hand-zeile--2 { font-size: clamp(1.2rem, 2vw, 1.9rem); left: 0; }
  html.hero-b .hero2-schwung { width: min(20vw, 300px); margin-left: 8%; }
}

/* --- Galerie nach dem Film (Abschnitt 3) -------------------------------------------------- */
.galerie-hinweis { margin: -4px 0 20px; font-size: 14px; color: var(--muted); }
.shot-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.shotkarte { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.shotkarte--gross { grid-column: 1 / -1; width: min(100%, 880px); margin-inline: auto; }
.shotkarte figcaption { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.shotkarte figcaption b { display: block; margin-bottom: 2px; font-size: 14.5px; color: var(--ink); }
@media (max-width: 860px) { .shot-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .shot-raster { grid-template-columns: minmax(0, 1fr); } }

/* Vorschaubild, das die Lightbox öffnet (Vertrag: a.zoom, siehe ew-lightbox.js). */
a.zoom { position: relative; display: block; border: 1px solid var(--line-2); border-radius: 12px;
  overflow: hidden; background: var(--card); box-shadow: var(--sh-1); cursor: zoom-in; }
a.zoom img { display: block; width: 100%; height: auto; }
a.zoom:hover, a.zoom:focus-visible { box-shadow: var(--sh-2); }
a.zoom:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
/* Das Lupenzeichen sagt „vergrößerbar“, ohne dass man es erst erraten muss; auf dem Handy immer sichtbar. */
.zoom-zeichen { position: absolute; right: 10px; top: 10px; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; background: rgba(11, 34, 57, .78); color: #fff; pointer-events: none; }
.zoom-zeichen svg { width: 16px; height: 16px; }

/* --- USP-Dreiklang (Abschnitt 4) ---------------------------------------------------------- */
.usp-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.usp-karte { display: flex; flex-direction: column; gap: 10px; }
.usp-karte p { margin: 0; }
.usp-bild { margin: auto 0 0; padding-top: 6px; }
.usp-bild figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }
/* „Visuell“ trägt die Kernaussage: breiter und mit Markenrand. */
.usp-karte--visuell { border-color: var(--green); box-shadow: var(--sh-2); }
@media (min-width: 981px) { .usp-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); } }
@media (max-width: 980px) { .usp-raster { grid-template-columns: minmax(0, 1fr); } }

/* --- Produktzugänge (Abschnitt 5) --------------------------------------------------------- */
.wege-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.wege-raster .card p { margin: 6px 0 0; }
@media (max-width: 980px) { .wege-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wege-raster { grid-template-columns: minmax(0, 1fr); } }


/* --- Zielgruppen: sechs Kacheln (Abschnitt 7) --------------------------------------------- */
/* Symbolkachel im selben Quadrat wie die Personenbilder, damit das Raster ruhig bleibt. */
.personen-bild--icon { display: grid; place-items: center; background: var(--green-wash); color: var(--green-deep); }
.personen-bild--icon svg { width: 34%; height: 34%; }

/* --- Tarifüberblick (Abschnitt 8) --------------------------------------------------------- */
.tarif-raster { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tarif { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-1); }
.tarif b { font-size: 15.5px; color: var(--ink); }
.tarif-preis { font-size: 1.35rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.tarif .status-kenn { white-space: normal; }
.tarif-hinweis { margin: 18px 0 0; font-size: 14px; color: var(--muted); text-align: center; }

/* --- Lightbox (ew-lightbox.js) ------------------------------------------------------------ */
html.lb-offen { overflow: hidden; }
.lb { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
  border: 0; background: rgba(8, 20, 34, .94); color: #fff; }
.lb[open] { display: flex; flex-direction: column; }
.lb::backdrop { background: rgba(8, 20, 34, .94); }
.lb-kopf { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 14px; flex: 0 0 auto; }
.lb-zaehler { margin-right: auto; font-size: 14px; color: #C2CCDA; }
.lb-knopf { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }
.lb-knopf:hover { background: rgba(255, 255, 255, .2); }
.lb-knopf:focus-visible, .lb-rolle:focus-visible { outline: 3px solid #5FD6D2; outline-offset: 2px; }
.lb-knopf[hidden] { display: none; }
.lb-knopf svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-zoom[aria-pressed="true"] { background: var(--green); color: var(--on-green); border-color: var(--green); }
.lb-buehne { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.lb-nav { flex: 0 0 auto; }
.lb-rolle { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; overflow: auto; overscroll-behavior: contain; }
/* margin:auto zentriert das Bild, solange es kleiner ist als die Fläche, und lässt es bei
   Originalgröße ohne abgeschnittenen linken Rand scrollen (anders als align-items: center). */
.lb-bild { display: block; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; background: #fff; border-radius: 6px; cursor: zoom-in; }
.lb--gross .lb-bild { max-width: none; max-height: none; cursor: zoom-out; }
.lb-titel { flex: 0 0 auto; margin: 0; padding: 10px 18px 16px; max-width: 80ch; align-self: center; text-align: center;
  font-size: 14.5px; line-height: 1.5; color: #E3E9EF; }
@media (max-width: 640px) {
  /* Auf dem Handy bleibt die Fläche dem Bild; geblättert wird mit dem Finger oder den Knöpfen am Rand. */
  .lb-buehne { padding: 0 4px; gap: 2px; }
  .lb-nav { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: no-preference) {
  .lb[open] { animation: lb-ein .18s ease-out; }
  @keyframes lb-ein { from { opacity: 0; } to { opacity: 1; } }
}
/* === v1.6 Paket B: Preise und Funktionen === */
/* Kacheln auf /preise/: Desktop 3x2, Tablet 2x3, Mobil untereinander. */
.tarif-gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 1099px) { .tarif-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .tarif-gitter { grid-template-columns: minmax(0, 1fr); } }
.tarif { display: flex; flex-direction: column; padding: 26px; }
.tarif .tarif-name { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.tarif .tarif-sub { margin: 4px 0 0; font-size: 14.5px; color: var(--muted); }
.tarif .tarif-preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 18px 0 0; }
.tarif .tarif-betrag { font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.tarif .tarif-einheit { font-size: 14.5px; color: var(--ink-2); }
.tarif .tarif-steuer { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.tarif .tarif-lead { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.tarif .tarif-merkmale { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.tarif .tarif-merkmale li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.tarif .tarif-merkmale li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--green); }
.tarif .tarif-status { margin: auto 0 0; padding-top: 20px; }
.tarif .tarif-status .status-kenn { margin-left: 0; }
/* Spätere Pakete: ruhiger Grund, Text bleibt voll lesbar (Kontrast unverändert). */
.tarif--kern { border-top: 3px solid var(--green); }
.tarif--spaeter { background: #FAFBFC; border-color: var(--line-2); box-shadow: none; }
.tarif--spaeter .tarif-betrag { color: var(--ink-2); }
.tarif .tarif-mehr { margin-top: 14px; border-top: 1px solid var(--line); }
.tarif .tarif-mehr summary { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 600; color: var(--green-ink); }
.tarif .tarif-mehr summary::-webkit-details-marker { display: none; }
.tarif .tarif-mehr summary::after { content: "+"; font-size: 20px; line-height: 1; font-weight: 400; }
.tarif .tarif-mehr[open] summary::after { content: "×"; }
.tarif .tarif-mehr summary:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 2px; border-radius: 4px; }
.tarif .tarif-mehr-inhalt { padding-bottom: 6px; }
.tarif .tarif-mehr-inhalt ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.tarif .tarif-mehr-inhalt p { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.tarif .tarif-link { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--green-ink);
  text-decoration: underline; text-underline-offset: 3px; }
.tarif .tarif-link:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 3px; border-radius: 3px; }
.tarif-vergleich { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  margin-top: 28px; padding: 22px 26px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--green-wash); }
.tarif-vergleich p { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.tarif-dimensionen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tarif-dimensionen h3 { margin: 0; font-size: 18px; }
@media (max-width: 1099px) { .tarif-dimensionen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .tarif-dimensionen { grid-template-columns: minmax(0, 1fr); } }
.tarif-viewer { display: grid; gap: 14px; max-width: 76ch; margin-top: 16px; }
.tarif-viewer p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); }

/* Funktionsvergleich /funktionen/. */
.fm-zurueck { margin: 18px 0 0; }
.fm-zurueck a { color: var(--green-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fm-werkzeug { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px; margin-bottom: 14px; }
.fm-werkzeug[hidden] { display: none; }
.fm-feld { display: grid; gap: 6px; flex: 1 1 260px; max-width: 420px; }
.fm-feld label { font-size: 14px; font-weight: 600; color: var(--ink); }
.fm-feld input { width: 100%; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 10px;
  background: #FFFFFF; color: var(--ink); font: inherit; font-size: 16px; }
.fm-feld input:focus-visible, .fm-schalter input:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 2px; }
.fm-schalter { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px;
  font-weight: 600; color: var(--ink); cursor: pointer; }
.fm-schalter input { width: 20px; height: 20px; accent-color: var(--green-ink); }
.fm-knoepfe { display: flex; gap: 10px; }
.fm-klein { min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 10px; background: #FFFFFF;
  color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.fm-klein:hover { border-color: var(--green); color: var(--green-ink); }
.fm-klein:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 2px; }
.fm-zaehler { margin: 0 0 8px; min-height: 1.5em; font-size: 14px; color: var(--muted); }
.fm:not(.fm--js) .fm-zaehler { display: none; }
.fm-legende { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 12px; padding: 0; list-style: none;
  font-size: 13.5px; color: var(--ink-2); }
.fm-legende li { display: inline-flex; align-items: center; gap: 8px; }
.fm-scrollhinweis { display: none; margin: 0 0 8px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 1099px) { .fm-scrollhinweis { display: block; } }
.fm-huelle { position: relative; overflow-x: auto; overscroll-behavior-x: contain; background: #FFFFFF; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--sh-1); }
.fm-huelle:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 3px; }
.fm-gruppe[hidden] { display: none; }
.fm-gruppe--zu .fm-zeile { display: none; }
.fm-gruppenzeile { background: var(--card-2); }
.fm-kopf { padding: 0; background: var(--card-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-align: left; font-weight: 400; }
.fm-kopf h3 { margin: 0; font-size: inherit; }
.fm-knopf { position: sticky; left: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center;
  width: 100%; max-width: min(100%, calc(100vw - 2 * var(--gutter, 20px) - 2px)); padding: 14px 20px; text-align: left;
  background: transparent; border: 0; color: var(--ink); font: inherit; cursor: default; }
.fm--js .fm-knopf { cursor: pointer; }
.fm-gruppe-name { grid-column: 1; font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.fm-gruppe-info { font-weight: 400; grid-column: 1; grid-row: 2; font-size: 14px; color: var(--muted); }
.fm-gruppe-zahl { display: none; grid-column: 2; grid-row: 1 / span 2; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.fm--js .fm-gruppe-zahl { display: inline-flex; align-items: center; gap: 12px; }
.fm--js .fm-gruppe-zahl::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--green-ink);
  border-bottom: 2px solid var(--green-ink); transform: rotate(45deg); transition: transform .2s ease; }
.fm-knopf[aria-expanded="false"] .fm-gruppe-zahl::after { transform: rotate(-45deg); }
.fm-knopf:focus-visible { outline: 3px solid var(--green-ink); outline-offset: -3px; }
.fm-tabelle { width: 100%; min-width: 1020px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.fm-spalte { padding: 10px 6px; border-bottom: 1px solid var(--line); background: var(--card-2);
  text-align: center; font-size: 13px; line-height: 1.25; color: var(--ink); hyphens: manual; overflow-wrap: normal; }
.fm-spalte--erste { position: sticky; left: 0; z-index: 2; width: 26%; padding-left: 20px; text-align: left; font-size: 13px; color: var(--muted); }
.fm-spalte-name { display: block; font-weight: 700; }
.fm-spalte-preis { display: block; margin-top: 2px; font-weight: 400; color: var(--muted); }
.fm-leistung { position: sticky; left: 0; z-index: 1; padding: 11px 12px 11px 20px; background: #FFFFFF; text-align: left; font-weight: 400;
  border-bottom: 1px solid var(--line); }
.fm-titel { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.fm-text { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.fm-wert { padding: 8px 4px; text-align: center; border-bottom: 1px solid var(--line); }
.fm-tabelle tbody tr:last-child > * { border-bottom: 0; }
.fm-tabelle tbody tr:hover > td, .fm-tabelle tbody tr:hover > th { background: #F6FAFA; }
.fm-zeichen { display: inline-block; min-width: 1.2em; font-size: 19px; line-height: 1; font-weight: 700; }
.fm-wert--1 .fm-zeichen, .fm-zeichen.fm-wert--1, .fm-wert--2 .fm-zeichen, .fm-zeichen.fm-wert--2 { color: var(--green-ink); }
.fm-wert--3 .fm-zeichen, .fm-zeichen.fm-wert--3 { color: var(--ink-2); }
.fm-wert--0 .fm-zeichen, .fm-zeichen.fm-wert--0 { color: var(--muted); font-weight: 400; }
.fm-leer { margin: 18px 0 0; padding: 18px 20px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--ink-2); font-size: 15px; }
.fm-leer[hidden] { display: none; }
@media (max-width: 639px) {
  .fm-spalte--erste, .fm-leistung { padding-left: 14px; }
  .fm-spalte--erste { width: 36%; }
  .fm-gruppe-name { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .fm--js .fm-gruppe-zahl::after { transition: none; } }
/* === v1.6 Paket C: Produkt, Erfinder, Unternehmen, Pilot === */
/* Lightbox-Link im Screenshot: Grundregel a.zoom aus Paket A, hier nur der Fokusring nach innen (der Rahmen schneidet ab). */
.shot a.zoom:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
/* Zwei Bilder nebeneinander (z. B. Rechner und Schnellcheck). */
.ap-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); align-items: start; }
/* Vier Karten in einer Reihe, auf schmaleren Breiten zwei und eine. */
.ap-reihe.ap-reihe--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ap-reihe--vier .card h3 { margin: 0 0 8px; font-size: 17px; }
.ap-reihe--vier .card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.ap-zwei.ap-zwei--oben { align-items: start; margin-top: 32px; }
/* Verfahren als nummerierte Schritte. */
.c-schritte { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: verfahren; }
.c-schritte li { position: relative; padding-left: 40px; line-height: 1.6; color: var(--ink-2); counter-increment: verfahren; }
.c-schritte li::before { content: counter(verfahren); position: absolute; left: 0; top: 1px; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: var(--on-green); font-weight: 700; font-size: 14px; }
.c-schritte b { color: var(--ink); }
/* Genau eine Statuszeile je Seite. */
.c-status { margin: 28px 0 0; font-size: 14px; color: var(--muted); }
.c-status .status-kenn { margin: 0 8px 0 0; }
/* Alternative Darstellung (Hybridgrafik) zum Betreibervergleich: schmaler, mittig. */
/* Vertrauenszeile der Pilot-Seite. */
.c-vertrauen { margin: 22px 0 0; font-weight: 600; color: var(--ink); line-height: 1.6; }
@media (max-width: 1100px) { .ap-reihe.ap-reihe--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .ap-paar, .ap-reihe.ap-reihe--vier { grid-template-columns: minmax(0, 1fr); } }
/* === v1.6 Paket D: Zielgruppenseiten === */
/* Netzwerk, Enterprise, Spin-offs, KI und Datenschutz, Patentkanzleien, Hochschulen. Präfix zg-. */
.zg-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px);
  align-items: center; }
.zg-hero--text { grid-template-columns: minmax(0, 1fr); }
.zg-hero-text .lead { margin-top: 16px; max-width: 64ch; }
.zg-hero-text .btn-row { margin-top: 26px; justify-content: flex-start; }
.zg-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 20px 0 0;
  max-width: 62ch; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.zg-status .status-kenn { margin: 0; }
.zg-persona { margin: 0; min-width: 0; }
.zg-persona { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--sh-1); }
.zg-persona img { display: block; width: 100%; height: auto; }
.zg-fig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.zg-fig { margin: 22px 0 0; min-width: 0; }
.zg-fig figcaption strong { color: var(--ink-2); }
.zg-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); }

.zg-sektion { max-width: 76ch; margin-inline: auto; }
.zg-sektion:has(.zg-karten), .zg-sektion:has(.zg-kette), .zg-sektion:has(.zg-tabelle),
.zg-sektion:has(.zg-zwei) { max-width: var(--max); }
.zg-sektion .t-h2 { max-width: none; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.zg-inhalt { margin-top: 16px; }
.zg-inhalt .lead { max-width: none; }
.zg-inhalt .lead + .lead { margin-top: 12px; }
.zg-karten { margin-top: 4px; }
.zg-karten .card p { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.zg-liste { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; color: var(--ink-2); line-height: 1.6; }
.zg-karten + .zg-grenze, .zg-liste + .zg-grenze, .zg-liste + .zg-klein, .zg-tabelle-huelle + .zg-klein,
.zg-liste + .zg-preis, .zg-karten + .zg-preis { margin-top: 20px; }
.zg-klein { margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.zg-klein a, .zg-inhalt .lead a, .zg-liste a, .zg-tabelle a, .zg-grenze a { color: var(--green-ink);
  text-decoration: underline; text-underline-offset: 3px; }
.zg-tabelle-huelle:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 2px; }
.zg-grenze { margin-top: 20px; padding: 14px 18px; border: 1px solid var(--line-2); border-left: 4px solid var(--green-ink);
  border-radius: 12px; background: var(--card-2); color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 76ch; }
.zg-grenze strong { color: var(--ink); }
.zg-preis { padding: 18px 20px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card);
  max-width: 76ch; }
.zg-preis p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.zg-preis .zg-preis-wert { font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.zg-preis-wert .status-kenn { margin-left: 10px; }

.zg-tabelle-huelle { overflow-x: auto; }
.zg-tabelle { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line-2);
  border-radius: var(--r); font-size: 15px; line-height: 1.55; }
.zg-tabelle th, .zg-tabelle td { padding: 14px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); }
.zg-tabelle thead th { background: var(--card-2); color: var(--ink); }
.zg-tabelle tbody th { width: 20%; color: var(--ink); font-weight: 600; }
.zg-tabelle td { color: var(--ink-2); }
.zg-nur-lesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.zg-schau { margin: 0; padding: 20px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--card-2); }
.zg-schau-kopf { font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.zg-kette { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.zg-kette--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zg-kette--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.zg-station { position: relative; display: grid; gap: 4px; align-content: start; padding: 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.zg-station strong { color: var(--ink); font-size: 15.5px; }
.zg-station:not(:last-child)::after { content: "\2192"; position: absolute; right: -13px; top: 50%;
  transform: translateY(-50%); z-index: 1; width: 12px; text-align: center; font-weight: 700;
  color: var(--green-ink); background: var(--card-2); }
.zg-schau-fuss { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.zg-fragen { margin-inline: 0; max-width: none; }
.zg-ende { max-width: 70ch; margin-inline: auto; text-align: center; }
.zg-ende .lead { margin: 12px auto 0; }
.zg-ende .btn-row { margin-top: 24px; justify-content: center; }
.zg-ende .zg-klein a { color: var(--green-ink); }

@media (max-width: 1100px) {
  .zg-kette--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zg-kette--5 .zg-station:nth-child(3)::after { display: none; }
}
@media (max-width: 860px) {
  .zg-hero, .zg-zwei { grid-template-columns: minmax(0, 1fr); }
  .zg-kette--4, .zg-kette--5 { grid-template-columns: minmax(0, 1fr); }
  .zg-station:not(:last-child)::after, .zg-kette--5 .zg-station:nth-child(3)::after { display: block;
    content: "\2193"; right: auto; left: 50%; top: auto; bottom: -15px; transform: translateX(-50%); }
  .zg-tabelle { font-size: 14px; }
  .zg-tabelle th, .zg-tabelle td { padding: 10px; }
}
@media (max-width: 480px) {
  .zg-hero-text .btn, .zg-ende .btn { width: 100%; justify-content: center; }
}

/* Leuchtendes Petrol für große Handschrift-Überschriften der Startseite (≥ 24 px, Kontrast ≥ 3:1). */
.zone6-hand, .ueber-mich-titel { color: var(--green-bright-text); }

/* Kopfzeile der ErfinderWerk-Seiten bündig mit dem breiten Hero (Auftraggeber 14.10.2026): Logo und
   Menü beginnen an derselben Kante wie Slogan und Text, nicht an der schmaleren Inhaltsbreite. */
.top-in--ew { min-width: 0; }   /* Grundregel außerhalb der Medienabfrage, damit pruefen.py die Klasse findet */
@media (min-width: 1024px) {
  .top .top-in--ew { max-width: none; padding-left: max(56px, calc((100vw - 1560px) / 2));
    padding-right: max(56px, calc((100vw - 1560px) / 2)); }
}

/* Zielgruppen-Köpfe zeigen die ungefadeten Quadrat-Fotos (Auftraggeber 14.10.2026); die breiten
   Fassungen laufen links in Weiß aus und sind für Flächen mit Text darüber gedacht. Querformat-
   Ausschnitt per CSS, Blickpunkt etwas oberhalb der Mitte, damit Gesichter im Bild bleiben. */
.zg-persona img, .org-persona img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 35%; width: 100%; height: auto; }

/* === Konzeptgrafien als SVG (ew_seiten/grafiken.py) ===========================================
   Farben nur aus den Tokens; die vier Baustein-Töne (rot, blau, violett) folgen den Baustein-Farben der App.
   Zwei Fassungen je Grafik: breit ab 901 px, schmal (einspaltig) darunter, damit die Schrift lesbar bleibt. */
.gf-paar { margin: 0 auto; width: 100%; }
.gf { display: block; width: 100%; height: auto; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gf-rot: #D64550; --gf-rot-fl: #FDEEEE; --gf-rot-ln: #F4C3C3;
  --gf-blau: #2F6FDE; --gf-blau-fl: #EAF2FD; --gf-blau-ln: #B3CEF2;
  --gf-vio: #7C4DDB; --gf-vio-fl: #F2EEFC; --gf-vio-ln: #CFC0F0;
  --gf-pet-fl: #E7F6F5; --gf-pet-ln: #A5DCD9; --gf-sl-fl: #E8EDF3; }
/* Auf allen Geräten dieselbe Darstellung wie am PC (Auftraggeber 14.10.2026). Unter 900 px wird die Grafik
   nicht umgebaut, sondern behält eine lesbare Mindestbreite und lässt sich seitlich wischen. */
.gf--schmal { display: none; }
@media (max-width: 900px) {
  .gf-paar { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding-bottom: 6px; }
  .gf-paar .gf--breit { min-width: 780px; }
}
.gf text { font-weight: 400; }
.gf .gf-fett { font-weight: 700; }
.gf-ink { fill: var(--ink); } .gf-body { fill: var(--ink-2); } .gf-mut { fill: var(--muted); }
.gf-karte { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.gf-karte-akz { stroke: var(--green); stroke-opacity: .55; }
.gf-fenster { fill: var(--card); stroke: var(--line-2); stroke-width: 1.5; }
.gf-trenn { stroke: var(--line); stroke-width: 1.5; }
.gf-seite { fill: var(--card-2); opacity: .7; }
.gf-linie { fill: none; stroke: var(--green); stroke-width: 2.2; }
.gf-linie-d { stroke: var(--line-2); stroke-width: 2; }
.gf-knoten { fill: var(--card); stroke: var(--green); stroke-width: 3.5; }
.gf-punkt { fill: var(--green); opacity: .65; }
.gf-knopf { fill: var(--green-ink); } .gf-knopf-t { fill: #fff; }
.gf-bs { stroke-width: 1.5; }
.gf-bs-rot { fill: var(--gf-rot-fl); stroke: var(--gf-rot-ln); }
.gf-bs-petrol { fill: var(--gf-pet-fl); stroke: var(--gf-pet-ln); }
.gf-bs-blau { fill: var(--gf-blau-fl); stroke: var(--gf-blau-ln); }
.gf-bs-violett { fill: var(--gf-vio-fl); stroke: var(--gf-vio-ln); }
.gf-kachel { fill: #fff; stroke: var(--line); stroke-width: 1; }
.gf-balken { fill: var(--line-2); opacity: .8; } .gf-balken-akz { fill: var(--green); }
.gf-blatt { fill: #fff; stroke: var(--line-2); stroke-width: 1.5; } .gf-blatt-hint { fill: var(--card-2); }
.gf-av-petrol { fill: var(--gf-pet-fl); } .gf-av-blau { fill: var(--gf-blau-fl); }
.gf-av-violett { fill: var(--gf-vio-fl); } .gf-av-slate { fill: var(--gf-sl-fl); }
.gf-av-rand { stroke: #fff; stroke-width: 2; }
.gf-plus { fill: var(--card-2); stroke: var(--line-2); stroke-width: 1.5; }
.gf-ic-petrol { color: var(--green-deep); } .gf-ic-rot { color: var(--gf-rot); } .gf-ic-blau { color: var(--gf-blau); }
.gf-ic-violett { color: var(--gf-vio); } .gf-ic-slate { color: var(--ink-2); } .gf-ic-grau { color: var(--muted); }
.gf-ic-ink { color: var(--ink); } .gf-ic-weiss { color: #fff; }
.gf-station { fill: var(--card); stroke: var(--green); stroke-width: 3; }
.gf-halo { fill: var(--green-wash); opacity: .55; } .gf-halo-k { fill: var(--green-wash); }
.gf-ring { fill: none; stroke: var(--green); stroke-opacity: .35; stroke-width: 1.5; stroke-dasharray: 5 7; }
.gf-bogen { fill: none; stroke: var(--green); stroke-width: 3.5; stroke-linecap: round; opacity: .75; }
.gf-bogen-d { stroke-width: 3; opacity: .9; }
.gf-pfeil { fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gf-pille { fill: var(--gf-pet-fl); stroke: var(--gf-pet-ln); stroke-width: 1.5; } .gf-pille-t { fill: var(--green-ink); }
.gf-tile { fill: var(--card); stroke: var(--green); stroke-width: 2.5; }
.gf-badge { fill: var(--green-deep); }
.gf-fig { margin: 0 auto; max-width: 1100px; min-width: 0; }
.gf-rahmen { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--sh-1); padding: clamp(14px, 2.4vw, 32px); }
.gf-fig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
.gf-fig figcaption b { color: var(--green-ink); }
.gf-fig--enterprise .gf-rahmen { max-width: 100%; }
.gf-text { max-width: 76ch; margin: 0 auto 28px; }
.gf-breitraum { margin-top: 28px; }
.gf--breit { min-width: 0; }
.gf-av { stroke: none; }
.gf-ic { overflow: visible; }
.gf-zusammenarbeit, .gf-hybrid, .gf-enterprise { position: relative; }
/* Die Hybrid-Grafik ist die dichteste: volle Inhaltsbreite und schmaler Rahmen, damit die Schrift nicht unter ca. 12 px fällt. */

/* Einheitliche Inhaltsbreite auf allen ErfinderWerk-Seiten (Auftraggeber 14.10.2026): Abschnitte nutzen
   dieselbe Kante wie Kopfzeile und Hero (56 px Rand, Inhalt höchstens 1560 px), statt der schmaleren
   Firmenseiten-Breite aus styles.css. Gilt nur ab 1024 px; darunter bleibt der normale Seitenrand. */
@media (min-width: 1024px) {
  .wrap:not(.hero2-grid) { max-width: 1672px; padding-inline: 56px; }
  .scrollfilm-innen { padding-inline: max(56px, calc((100vw - 1560px) / 2)); }
  /* Beim Abspielen muss alles in die Fensterhöhe passen (Auftraggeber 14.10.2026): Kopfzeile, Satzband,
     Bühne und Abspielleiste brauchen zusammen rund 370 px plus die 16:9-Bühne. Die Breite folgt daraus,
     höchstens aber die volle Inhaltsbreite. */
  .buehnen-rahmen { max-width: min(100%, calc((100dvh - 380px) * 16 / 9)); min-width: min(100%, 720px); }
}

/* Tarifüberblick der Startseite im Kachel-Design der Preisseite, aus denselben Stammdaten (tarife.py). */
.tarif-raster--kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1023px) { .tarif-raster--kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tarif-raster--kacheln { grid-template-columns: minmax(0, 1fr); } }
.tarif-raster--kacheln > li { display: flex; }
.tarif-raster--kacheln .tarif { width: 100%; }

/* Fünf Zielgruppen seit 14.10.2026 (Spin-offs zu Hochschulen): eine Reihe auf breiten Bildschirmen,
   darunter zentriert umbrechend, damit keine Lücke am Ende der Reihe bleibt. */
.personen-grid--5 { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.personen-grid--5 > * { flex: 0 1 calc((100% - 36px) / 3); min-width: 0; }
@media (min-width: 1200px) { .personen-grid--5 > * { flex-basis: calc((100% - 72px) / 5); } }
@media (max-width: 860px) { .personen-grid--5 > * { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 480px) { .personen-grid--5 > * { flex-basis: 100%; } }
/* Spin-off-Abschnitt der Hochschulseite: Text links, Foto rechts. */
.zg-spinoff-text { min-width: 0; }
.zg-spinoff { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 4vw, 48px);
  align-items: center; margin-bottom: 28px; }
@media (max-width: 860px) { .zg-spinoff { grid-template-columns: minmax(0, 1fr); } }

/* Textlastige Abschnitte stehen an derselben linken Kante wie alle anderen (Auftraggeber 14.10.2026);
   die Zeilenlänge bleibt über die Textbreite begrenzt, nicht über einen eingerückten Container. */
@media (min-width: 1024px) {
  .wrap.ap-schmal, .wrap.zg-sektion { max-width: 1672px; margin-inline: auto; }
  .wrap.ap-schmal > *, .zg-sektion:not(:has(.zg-karten, .zg-kette, .zg-tabelle, .zg-zwei)) .zg-inhalt { max-width: 76ch; }
}

/* Bildergalerie wie der Film: im Querformat 16:10 vollständig sichtbar, Leiste und Punkte inklusive
   (Auftraggeber 14.10.2026). Rund 310 px gehen an Kopfzeile, Galerieleiste, Punkte und Luft. */
@media (min-width: 1024px) {
  .appshow { max-width: min(100%, calc((100dvh - 310px) * 16 / 10)); margin-inline: auto; }
}

/* Wörter mit Bindestrich, die nicht getrennt werden sollen (z. B. „Spin-offs“, Auftraggeber 14.10.2026). */
.ohne-umbruch { white-space: nowrap; }

/* Startseite: sechs schmale Hochformat-Karten in einer Reihe statt 3 x 2 (Auftraggeber 14.10.2026);
   kompaktere Abstände und Schrift, damit die Karten nicht wie die großen Kacheln der Preisseite wirken. */
@media (min-width: 1200px) { .tarif-raster--kacheln { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } }
.tarif-raster--kacheln .tarif { padding: 20px 18px; gap: 0; }
.tarif-raster--kacheln .tarif-name { font-size: 1.15rem; }
.tarif-raster--kacheln .tarif-sub { font-size: 13.5px; margin-top: 4px; min-height: 2.6em; }
.tarif-raster--kacheln .tarif-preis { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.tarif-raster--kacheln .tarif-betrag { font-size: 1.6rem; line-height: 1.1; }
.tarif-raster--kacheln .tarif-einheit { font-size: 13px; }
.tarif-raster--kacheln .tarif-steuer { font-size: 12.5px; margin-top: 4px; }
.tarif-raster--kacheln .tarif-lead { font-size: 14px; line-height: 1.5; margin-top: 12px; flex: 1 1 auto; }
.tarif-raster--kacheln .tarif-status { margin-top: 14px; }
.tarif-raster--kacheln .tarif-link { margin-top: 12px; font-size: 14px; }

/* Gründerblock als Ganzes mittig; Überschrift der Fragen bündig über der Fragenliste (Auftraggeber 14.10.2026). */
.ueber-mich-grid { max-width: 1080px; margin-inline: auto; }
.fragen-band .wrap > h2 { max-width: 76ch; margin-inline: auto; }

/* „Eine Plattform. Unterschiedliche Arbeitsweisen.“: alle vier Karten in einer Reihe (Auftraggeber 14.10.2026).
   Auf /produkt/ nur das Raster mit vier Karten, die Zweierraster anderer Seiten bleiben. */
@media (min-width: 1024px) {
  .wege-raster, .ap-gegen:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Personenfotos der Zielgruppenköpfe nicht größer als nötig (Auftraggeber 14.10.2026): feste Höchstbreite,
   rechtsbündig in ihrer Spalte, damit der Text die Seite trägt. */
.zg-persona, .org-persona { max-width: 460px; width: 100%; }
/* Text und Foto als Paar mit festem Abstand, gemeinsam mittig; sonst entsteht zwischen beiden ein
   großes Loch, sobald das Foto kleiner ist als seine Spalte (Auftraggeber 14.10.2026). */
@media (min-width: 1024px) {
  .zg-hero:not(.zg-hero--text), .org-hero { grid-template-columns: minmax(0, 720px) minmax(0, 460px);
    justify-content: center; column-gap: clamp(40px, 5vw, 80px); }
}

/* Hero-Bild beim Öffnen vollständig sichtbar (Auftraggeber 14.10.2026): Die Breite folgt der Fensterhöhe.
   Das Bild beginnt rund 220 px unter der Fensterkante, ist 4:3 und braucht unten 30 px Luft für die
   Branchen-Schilder; nie kleiner als 560 px, damit es nicht zu klein wird. */
@media (min-width: 1024px) {
  .hero2-bild { max-width: min(1120px, max(600px, calc((100dvh - 190px) * 4 / 3)));
    margin-top: clamp(-190px, -11vw, -90px); }   /* höher ansetzen (Auftraggeber 14.10.2026), Slogan bleibt frei */
}

/* Galerie-Leiste: der dritte Fensterpunkt kommt aus dem gemeinsamen Baustein der Firmenseite (Grün #7FCB28);
   auf ErfinderWerk-Seiten in Türkis, damit kein Grün im Bedienbereich erscheint (Auftraggeber 14.10.2026). */
.appshow-bar i:nth-of-type(3) { background: var(--green) !important; }

/* Einspaltig (unter 1024 px): Das Bild folgt dem Textblock darüber, der links beginnt und schmaler ist als
   die Seite; deshalb links an der Inhaltskante statt in der Fenstermitte (Auftraggeber 14.10.2026). */
@media (max-width: 1023px) {
  .hero2-bild { width: min(100%, 720px); margin-inline: 0; justify-self: start; }
}

/* Galerie: jede Aufnahme vollständig einpassen statt zuschneiden (Auftraggeber 14.10.2026). Die Folie
   „Ordnen“ ist fast quadratisch und verlor sonst den unteren Teil; weißer Rand statt Beschnitt. */
.appshow-slide img { object-fit: contain; object-position: center; background: #fff; }

/* Kreislauf wie am PC, auch auf dem Handy (Auftraggeber 14.10.2026): Unterzeilen bleiben, die Grafik behält
   eine lesbare Mindestbreite und lässt sich seitlich wischen. Hebt die 420-px-Regel von 11.10.2026 auf. */
@media (max-width: 900px) {
  .kreislauf-zeichnen { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .kreislauf-svg { min-width: 760px; }
  .kreislauf-stationsunter { display: inline; }
}

/* Preisseite: alle sechs Pakete in einer Reihe (Auftraggeber 14.10.2026). Kompakte Schrift und Abstände,
   Preis und Einheit untereinander, damit die schmalen Karten lesbar bleiben. */
@media (min-width: 1200px) {
  .tarif-gitter { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 14px !important; }
  .tarif-gitter .tarif { padding: 22px 18px; }
  .tarif-gitter .tarif-name { font-size: 1.2rem; }
  .tarif-gitter .tarif-sub { font-size: 13.5px; min-height: 2.6em; }
  .tarif-gitter .tarif-preis { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
  .tarif-gitter .tarif-betrag { font-size: 1.7rem; line-height: 1.1; }
  .tarif-gitter .tarif-einheit, .tarif-gitter .tarif-steuer { font-size: 13px; }
  .tarif-gitter .tarif-lead { font-size: 14px; line-height: 1.5; }
  .tarif-gitter .tarif-merkmale li { font-size: 13.5px; line-height: 1.45; }
  .tarif-gitter .tarif-mehr summary, .tarif-gitter .tarif-link { font-size: 14px; }
}

/* === Einheitliches Klick-Signal (Auftraggeber 14.10.2026) ======================================
   Alles, was man anklicken kann, reagiert sichtbar auf Maus und Tastatur: Knöpfe und Karten heben sich,
   Screenshots zoomen leicht und zeigen eine Lupe, Textlinks färben sich, Aufklapper bekommen eine Fläche.
   Tastatur bekommt denselben Effekt über :focus-visible plus einen klaren Fokusrahmen. */
:where(a, button, summary, [tabindex="0"]):focus-visible {
  outline: 3px solid var(--green); outline-offset: 3px; border-radius: 8px; }

/* Knöpfe */
.btn, .appshow-nav, .appshow-play, .appshow-zoom, .abspiel-knopf, .fm-knopf, .fm-klein {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 34, 57, .16); }
.btn:not(.btn--ghost):hover, .btn:not(.btn--ghost):focus-visible { background-color: #0F9793; }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--green); color: var(--green-ink); }
.appshow-nav:hover, .appshow-play:hover, .appshow-zoom:hover, .abspiel-knopf:hover,
.appshow-nav:focus-visible, .appshow-play:focus-visible, .appshow-zoom:focus-visible, .abspiel-knopf:focus-visible {
  transform: scale(1.08); box-shadow: 0 6px 16px rgba(11, 34, 57, .22); }
.fm-knopf:hover, .fm-klein:hover, .fm-knopf:focus-visible, .fm-klein:focus-visible { border-color: var(--green); color: var(--green-ink); }
.appshow-dot { transition: transform .15s ease, background-color .15s ease; }
.appshow-dot:hover, .appshow-dot:focus-visible { transform: scale(1.35); background-color: var(--green); }

/* Karten, die als Ganzes ein Link sind */
.personen-kachel { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.personen-kachel:hover, .personen-kachel:focus-visible { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--green); }
.personen-kachel img { transition: transform .35s ease; }
.personen-kachel:hover img, .personen-kachel:focus-visible img { transform: scale(1.04); }
.personen-kachel:hover .personen-pfeil, .personen-kachel:focus-visible .personen-pfeil { color: var(--green-ink); text-decoration: underline; }

/* Karten mit einem Link darin: die ganze Karte reagiert, sobald man darüberfährt */
.tarif, .wege-raster .card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tarif:hover, .tarif:focus-within, .wege-raster .card:hover, .wege-raster .card:focus-within {
  transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--green); }

/* Screenshots mit Vergrößerung: leichter Zoom und Lupe */
a.zoom { position: relative; display: block; overflow: hidden; cursor: zoom-in; border-radius: inherit; }
a.zoom img { transition: transform .35s ease, filter .35s ease; }
a.zoom::after { content: ""; position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(11, 34, 57, .78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 22px no-repeat;
  opacity: 0; transform: scale(.85); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
a.zoom:hover img, a.zoom:focus-visible img { transform: scale(1.03); filter: brightness(1.02); }
a.zoom:hover::after, a.zoom:focus-visible::after { opacity: 1; transform: scale(1); }
.appshow-view { cursor: zoom-in; }

/* Textlinks und Pfeil-Links */
.wege-link, .tarif-link, main a:not([class]) { transition: color .15s ease, text-decoration-color .15s ease; }
.wege-link:hover, .tarif-link:hover, main a:not([class]):hover,
.wege-link:focus-visible, .tarif-link:focus-visible, main a:not([class]):focus-visible {
  color: var(--green); text-decoration-color: var(--green); text-decoration-thickness: 2px; }

/* Aufklapper (Fragen, Varianten, Funktionsgruppen) */
summary { cursor: pointer; transition: background-color .15s ease, color .15s ease; border-radius: 8px; }
summary:hover, summary:focus-visible { background-color: var(--green-wash); color: var(--green-ink); }

/* Seitlich wischbare Grafiken und Tabellen: Zeiger zeigt, dass man ziehen kann */
.gf-paar, .kreislauf-zeichnen, .zg-tabelle-huelle, .ap-tabelle-huelle, .fm-huelle { cursor: grab; }

@media (prefers-reduced-motion: reduce) {
  .btn, .personen-kachel, .personen-kachel img, .tarif, .wege-raster .card, a.zoom img, .appshow-dot,
  .appshow-nav, .appshow-play, .appshow-zoom, .abspiel-knopf { transition: none !important; transform: none !important; }
}

/* Sechs Arbeitsweisen in einer Reihe (Startseite und /produkt/), Link immer unten bündig. */
.wege-raster--6 { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1200px) { .wege-raster--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wege-raster--6 { grid-template-columns: minmax(0, 1fr); } }
.wege-raster--6 .card { display: flex; flex-direction: column; }
.wege-raster--6 .card > p:not(.wege-karte-link) { flex: 1 1 auto; }
.wege-karte-link { margin-top: 12px !important; }

/* Live-Prüfung der E-Mail (ew-nav.js): Fehler rot mit Text, gültige Adresse dezent bestätigt. */
.feld-hinweis { margin: 4px 0 0; min-height: 1.3em; font-size: 14px; color: var(--muted); }
form .feld-hinweis.feld-hinweis--fehler { color: #B42318; font-weight: 600; }
input.feld--fehler { border-color: #B42318 !important; box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
input.feld--ok { border-color: var(--green) !important; }

/* Menüsymbole (14.10.2026): gedämpft, beim Zeigen und auf der aktuellen Seite türkis. */
.top-nav--haupt > a:not(.btn), .top-nav--haupt .nav-drop-knopf, .top-nav--haupt .nav-sub a { display: inline-flex; align-items: center; gap: 7px; }
.top-nav--haupt .nav-sub a { display: flex; gap: 10px; }
.nav-ico { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); transition: color .2s ease, transform .2s ease; }
.top-nav--haupt .nav-sub .nav-ico { width: 18px; height: 18px; }
.top-nav--haupt a:hover .nav-ico, .top-nav--haupt a:focus-visible .nav-ico, .top-nav--haupt .nav-drop-knopf:hover .nav-ico,
.top-nav--haupt a[aria-current="page"] .nav-ico, .top-nav--haupt .nav-drop--hier .nav-drop-knopf .nav-ico { color: var(--green-ink); }
.top-nav--haupt a:hover .nav-ico, .top-nav--haupt .nav-drop-knopf:hover .nav-ico { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .nav-ico { transition: none; } }

/* Menüzustände in Logo-Petrol (Auftraggeber 14.10.2026): Weiß auf Weiß war beim Zeigen kaum zu sehen.
   Zeigen = heller Petrol-Schleier, aktuelle Seite = volles Logo-Petrol mit Logo-Navy-Schrift
   (Weiß auf #14a9a5 läge unter dem Kontrastminimum, Navy erreicht es; so auch der Wartelisten-Knopf). */
@media (min-width: 1101px) {
  .top-nav--haupt > a:not(.btn):hover, .top-nav--haupt .nav-drop-knopf:hover,
  .top-nav--haupt .nav-drop:focus-within > .nav-drop-knopf, .top-nav--haupt .nav-drop-knopf[aria-expanded="true"],
  .top-nav--haupt .nav-sub a:hover {
    background: rgba(20, 169, 165, .16); color: #005f63; }
  .top-nav--haupt > a:not(.btn)[aria-current="page"], .top-nav--haupt .nav-sub a[aria-current="page"],
  .top-nav--haupt .nav-drop--hier > .nav-drop-knopf {
    background: #14a9a5; color: #002a52; }
  .top-nav--haupt > a:not(.btn)[aria-current="page"] .nav-ico, .top-nav--haupt .nav-sub a[aria-current="page"] .nav-ico,
  .top-nav--haupt .nav-drop--hier > .nav-drop-knopf .nav-ico, .top-nav--haupt .nav-drop--hier > .nav-drop-knopf .nav-drop-pfeil { color: #002a52; }
  .top-nav--haupt > a:not(.btn)[aria-current="page"]:hover, .top-nav--haupt .nav-sub a[aria-current="page"]:hover,
  .top-nav--haupt .nav-drop--hier > .nav-drop-knopf:hover { background: #119590; color: #002a52; }
}

/* Vertrauensleiste unter der KI-Grafik (14.10.2026): drei Punkte nebeneinander, auf dem Handy untereinander. */
.ki-leiste { list-style: none; margin: 28px auto 0; padding: 0; max-width: 1100px; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ki-leiste li { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line, #DCE4EC);
  border-radius: 16px; padding: 16px 18px; box-shadow: var(--sh-1); }
.ki-leiste li > span:last-child { display: grid; gap: 2px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.ki-leiste b { font-size: 16px; color: var(--ink); }
@media (max-width: 860px) { .ki-leiste { grid-template-columns: minmax(0, 1fr); } }
.ki-leiste .ico-tile { margin: 0; }

/* Eignungsprüfung der KI-Modelle (14.10.2026): hervorgehoben, weil sie den Unterschied zu „irgendeiner KI“ erklärt. */
.ki-pruefung { max-width: 1100px; margin: 28px auto 0; display: flex; gap: 18px; align-items: flex-start;
  background: #EEF8F7; border: 1px solid rgba(20, 169, 165, .35); border-radius: 18px; padding: 22px 26px; }
.ki-pruefung .ico-tile { margin: 0; background: #fff; color: var(--green-ink); }
.ki-pruefung h3 { margin: 0 0 6px; font-size: 19px; color: var(--ink); }
.ki-pruefung p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 78ch; }
.ki-pruefung ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ki-pruefung li { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--green-ink); }
.ki-pruefung li svg { width: 17px; height: 17px; }
.ki-pruefung + .ki-leiste { margin-top: 14px; }
@media (max-width: 640px) { .ki-pruefung { flex-direction: column; padding: 18px; } }

/* Basiszeile der Preiskacheln: zeigt, worauf das Paket aufbaut (14.10.2026). */
.tarif .tarif-basis { margin: 16px 0 -6px; font-size: 14px; font-weight: 700; color: var(--green-ink); }

/* Varianten mit Preis und Erklärung (Auftraggeber 14.10.2026) */
.tarif .tarif-mehr-inhalt ul.tarif-varianten { list-style: none; padding-left: 0; gap: 12px; }
.tarif-varianten li { display: grid; gap: 2px; }
.tarif-varianten b { color: var(--ink); font-size: 14px; }
.tarif-varianten .tv-preis { color: var(--green-ink); font-weight: 600; font-size: 14px; }
.tarif-varianten .tv-text { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.tv-tabelle .tv-preis-zelle { white-space: nowrap; font-weight: 600; color: var(--green-ink); }
.tv-fuss { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.tv-titel { margin: 28px 0 12px; }
@media (max-width: 760px) { .tv-tabelle .tv-preis-zelle { white-space: normal; min-width: 96px; } .tv-tabelle th, .tv-tabelle td { padding-left: 10px; padding-right: 10px; } }
@media (max-width: 760px) { .tv-tabelle thead { display: none; } .tv-tabelle, .tv-tabelle tbody, .tv-tabelle tr, .tv-tabelle th, .tv-tabelle td { display: block; width: auto; } .tv-tabelle tr { padding: 12px 0; border-bottom: 1px solid var(--line); } .tv-tabelle th, .tv-tabelle td { border: 0; padding: 2px 12px; } .tv-tabelle .tv-preis-zelle { min-width: 0; } }
@media (max-width: 760px) { .zg-tabelle.tv-tabelle th[scope="row"] { width: auto; min-width: 0; max-width: none; white-space: normal; } }

/* Lizenzmodell statt Preis, solange Preise nicht öffentlich sind (15.10.2026) */
.tarif .tarif-preis--modell { margin-top: 14px; }
.tarif .tarif-modell { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--ink); }
/* Dienstleistertabelle am Handy untereinander statt seitlich überlaufend (15.10.2026) */
@media screen and (max-width: 760px) { .zusage-tabelle thead { display: none; } .zusage-tabelle, .zusage-tabelle tbody, .zusage-tabelle tr, .zusage-tabelle td { display: block; width: auto; } .zusage-tabelle tr { padding: 10px 0; border-bottom: 1px solid var(--line); } .zusage-tabelle td { border: 0; padding: 2px 0; overflow-wrap: anywhere; } .zusage-tabelle td:first-child { font-weight: 600; } }

/* Sprachwahl DE | EN (englische Fassung, 15.10.2026). Breit: im Menü vor dem Wartelisten-Knopf.
   Schmal (Menü hinter dem Burger): einmal in der Kopfleiste neben dem Burger und einmal als Zeile im Menü. */
.sprachwahl { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: 13px;
  font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.top-nav .sprachwahl a, .sprachwahl a { padding: 6px 7px; border-radius: 8px; font-size: 13px; color: var(--muted);
  background: none; border: 0; }
.top-nav .sprachwahl a:hover, .sprachwahl a:hover { color: var(--ink); background: var(--card); }
.top-nav .sprachwahl a[aria-current], .sprachwahl a[aria-current] { color: var(--green-ink); background: var(--green-wash); }
.sprachwahl-strich { color: var(--line); }
.sprachwahl a:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 2px; }
.sprachwahl--leiste { display: none; }
@media (max-width: 1100px) {
  .sprachwahl--leiste { display: inline-flex; margin-left: auto; margin-right: 8px; }
  .sprachwahl--leiste + .burger { margin-left: 0; }
  .top-nav--haupt .sprachwahl { margin: 6px 0 0; align-self: flex-start; }
  .top-nav--haupt .sprachwahl a { padding: 10px 14px; font-size: 15px; }
}

/* Hinweis auf englischen Rechtsseiten: nur die deutsche Fassung ist verbindlich (auch im PDF-Abzug sichtbar). */
.rechtshinweis-en { margin: 18px 0 0; padding: 12px 16px; border: 1px solid var(--line); border-left: 4px solid var(--green);
  border-radius: var(--r-sm); background: var(--card); font-size: 15px; line-height: 1.5; }
.rechtshinweis-en a { white-space: nowrap; }

/* Slogan über der Warteliste (15.10.2026): oben im Kopf steht jetzt der Markenclaim, der Slogan
   beschreibt hier den Weg, den der Eintrag beginnt. Handschrift wie im Kopf, eine Stufe kleiner. */
.wl-slogan { display: block; margin: 0 0 clamp(30px, 4vw, 56px); color: var(--green-bright-text); }
.wl-slogan .zone1-hand-zeile { display: block; margin-inline: 0; max-width: none; text-align: left; color: var(--green-bright-text); }
.wl-slogan .zone1-hand-zeile--1 { font-size: clamp(1.5rem, 3vw, 2.4rem); transform: rotate(-1deg); }
.wl-slogan .zone1-hand-zeile--2 { font-size: clamp(1.35rem, 2.6vw, 2.1rem); margin-left: 6%; margin-top: 2px; transform: rotate(-1deg); }

/* a-produkt-erfinder-ueber.css */
/* Seiten /produkt/, /erfinder/, /ueber/. Präfix ap-; Grundlagen aus styles.css und ew.css. */
.ap-hero .lead { max-width: 64ch; margin-top: 16px; }
.ap-knoepfe { margin-top: 28px; justify-content: flex-start; }
.ap-einleitung { margin: 14px 0 0; max-width: 68ch; }
.ap-schmal { max-width: 72ch; }
.ap-schmal .lead { max-width: none; margin-top: 14px; }
.ap-unter { margin-top: 28px; }
.ap-nur-lesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.ap-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: 28px; }
.ap-spalte > p { margin: 8px 0 14px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.ap-gegen { margin-top: 24px; }
.ap-gegen .card .ap-fig { margin-top: 16px; }
.ap-fig { margin: 0; min-width: 0; }
.ap-fig figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.ap-fig figcaption b { color: var(--ink-2); }

.ap-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); align-items: center; }
.ap-zwei .lead { margin-top: 14px; }
.ap-liste { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); line-height: 1.6; }
.ap-hinweis { margin: 18px 0 0; font-size: 14.5px; color: var(--ink-2); }
.ap-grenzen { margin-top: 24px; }
.ap-cta { text-align: center; }
.ap-cta .lead { margin: 12px auto 0; }
.ap-cta .btn-row { justify-content: center; margin-top: 24px; }

.ap-chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ap-chips li { padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff;
  font-size: 14px; color: var(--ink-2); }

.ap-tabelle-huelle { margin-top: 24px; overflow-x: auto; }
.ap-tabelle { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line-2);
  border-radius: var(--r); font-size: 15px; line-height: 1.55; }
.ap-tabelle th, .ap-tabelle td { padding: 14px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); }
.ap-tabelle thead th { background: var(--card-2); color: var(--ink); }
.ap-tabelle tbody th { width: 16%; color: var(--ink); font-weight: 600; }
.ap-tabelle td { color: var(--ink-2); }

.ap-frage { border-bottom: 1px solid var(--line-2); padding: 14px 0; }
.ap-frage summary { cursor: pointer; font-weight: 600; color: var(--ink); line-height: 1.4; }
.ap-frage p { margin: 10px 0 0; color: var(--ink-2); line-height: 1.65; }
.ap-frage a, .ap-schmal a, .ap-hinweis a { color: var(--green-ink); }

.ap-ueber { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.ap-portraet img { width: 240px; height: 240px; border-radius: 50%; object-fit: cover; display: block; }
.ap-name { margin: 22px 0 0; color: var(--ink-2); }

@media (max-width: 860px) {
  .ap-reihe, .ap-zwei { grid-template-columns: minmax(0, 1fr); }
  .ap-zwei--um > :first-child { order: 2; }
  .ap-ueber { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .ap-tabelle { font-size: 14px; }
  .ap-tabelle th, .ap-tabelle td { padding: 10px 10px; }
}
@media (max-width: 480px) {
  .ap-knoepfe .btn, .ap-cta .btn { width: 100%; justify-content: center; }
}

/* b-organisationen.css */
/* Unternehmen, Patentkanzleien, Hochschulen (13.10.2026): Interessen- und Vorschauseiten. */
.org-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px);
  align-items: center; }
.org-hero-text .lead { margin-top: 18px; }
.org-persona { margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-2);
  box-shadow: var(--sh-1); }
.org-persona img { display: block; width: 100%; height: auto; }
.org-hinweis { margin-top: 22px; padding: 14px 18px; border: 1px solid #F0D9A0; background: #FFF4DB;
  color: #4A2E00; border-radius: 12px; font-size: 14.5px; line-height: 1.55; max-width: 62ch; }
.org-hinweis a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.org-sektion { max-width: 76ch; margin-inline: auto; }
.org-sektion .t-h2 { max-width: none; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.org-inhalt { margin-top: 16px; }
.org-inhalt .lead { max-width: none; }
.org-inhalt .grid { margin-top: 4px; }
.org-sektion:has(.grid--4), .org-sektion:has(.org-kette) { max-width: var(--max); }
.org-liste { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; color: var(--ink-2); line-height: 1.6; }
.org-klein { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.org-shot { margin: 20px 0 0; }
.org-shot figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.org-schau { margin: 6px 0 20px; padding: 20px; border: 1px dashed var(--line-2); border-radius: var(--r);
  background: var(--card-2); }
.org-schau-kopf { font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.org-schau-kopf .status-kenn { margin: 0 8px 0 0; }
.org-kette { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: st; }
.org-station { position: relative; display: grid; gap: 4px; align-content: start; padding: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-size: 14px;
  line-height: 1.45; color: var(--muted); }
.org-station strong { color: var(--ink); font-size: 15.5px; }
.org-station:not(:last-child)::after { content: "\2192"; position: absolute; right: -13px; top: 50%;
  transform: translateY(-50%); z-index: 1; color: var(--green-ink); font-weight: 700; background: var(--card-2);
  width: 12px; text-align: center; }
.org-schau-fuss { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.org-fragen { margin-inline: 0; max-width: none; }
.org-cta { max-width: 70ch; margin-inline: auto; text-align: center; }
.org-cta .lead { margin-inline: auto; margin-top: 12px; }
.org-cta .btn-row { margin-top: 24px; justify-content: center; }
@media (max-width: 860px) {
  .org-hero { grid-template-columns: minmax(0, 1fr); }
  .org-kette { grid-template-columns: minmax(0, 1fr); }
  .org-station:not(:last-child)::after { content: "\2193"; right: auto; left: 50%; top: auto; bottom: -15px;
    transform: translateX(-50%); }
}
/* Text und Foto als zentriertes Paar wie auf den anderen Zielgruppenseiten (Auftraggeber 14.10.2026);
   steht hier, weil diese Datei nach ew.css geladen wird. */
@media (min-width: 1024px) {
  .org-hero { grid-template-columns: minmax(0, 720px) minmax(0, 460px); justify-content: center;
    column-gap: clamp(40px, 5vw, 80px); }
}

/* c-preise-pilot.css */
/* Seiten /preise/ und /pilot/ (Relaunch Phase 2). Nutzt nur Variablen und Klassen aus ew.css. */
.sprung-nav { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.sprung-nav a { display: inline-block; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--ink); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.sprung-nav a:hover, .sprung-nav a:focus-visible { border-color: var(--green); color: var(--green-ink); }
.preis-gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.preis-gitter--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preis-karte { display: flex; flex-direction: column; }
.preis-karte h3 { margin: 0; font-size: 21px; line-height: 1.25; }
.preis-karte .preis-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 4px; margin-bottom: 4px; }
.preis-karte .status-kenn { margin-left: 0; }
.preis-art { margin: 8px 0 0; font-size: 14.5px; color: var(--muted); }
.preis-karte ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.preis-karte li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.preis-karte li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--green); }
.preis-karte .preis-hinweis { margin-top: auto; padding-top: 18px; font-size: 13.5px; color: var(--muted); }
.preis-grundsatz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.preis-grundsatz h3 { margin: 0; font-size: 18px; }
.preis-fuss { max-width: 76ch; margin: 28px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.preis-fuss a, .pilot-ablauf a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; }
.pilot-ablauf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: schritt; }
.pilot-ablauf .card { counter-increment: schritt; }
.pilot-ablauf .card::before { content: counter(schritt); display: inline-grid; place-items: center; width: 30px;
  height: 30px; margin-bottom: 12px; border-radius: 50%; background: var(--green); color: var(--on-green);
  font-weight: 700; font-size: 14px; }
.pilot-ablauf h3 { margin: 0; font-size: 18px; }
.pilot-kopf-hinweis { max-width: 68ch; margin-top: 20px; font-size: 15px; color: var(--muted); }
@media (max-width: 1000px) {
  .preis-gitter, .preis-grundsatz, .pilot-ablauf { grid-template-columns: minmax(0, 1fr); }
  .preis-gitter--zwei { grid-template-columns: minmax(0, 1fr); }
}

/* Warteliste: Auswahl "Ich interessiere mich für" und einzelnes Häkchen */
.pilot-wahl { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.pilot-wahl legend { padding: 0; margin: 0 0 10px; font-weight: 600; color: var(--ink); font-size: 15px; }
.pilot-wahl-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 32px; }
.pilot-einwilligung--eins { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .pilot-wahl-liste { grid-template-columns: minmax(0, 1fr); } }

/* Kleiner Knopf auf den Paketkarten */
.btn--klein { padding: 9px 18px; font-size: 14.5px; min-height: 0; }
.tarif .tarif-warteliste { margin-top: 12px; }

/* Warteliste (14.10.2026): kompakter Abschnitt #warteliste auf der Startseite. Desktop: Text und drei Punkte links,
   Formular rechts, alles in einer Bildschirmhöhe; Handy: Überschrift, sofort das Formular, dann die Punkte. */
.wl-band { padding-block: clamp(28px, 4vw, 52px); }
/* Kopf über dem Formular; die drei Karten stehen genau neben dem Formularkasten und teilen sich seine Höhe
   gleichmäßig (Auftraggeber 14.10.2026). Abmelden liegt darunter, zählt also nicht zur Kartenhöhe. */
.wl-gitter { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 400px);
  grid-template-areas: "kopf ." "form punkte" "abm ."; column-gap: clamp(24px, 4vw, 56px); row-gap: 20px; align-items: stretch; }
.wl-kopf { grid-area: kopf; min-width: 0; }
.wl-kopf .lead { margin-top: 10px; max-width: 52ch; }
.wl-form { grid-area: form; min-width: 0; display: flex; }
.wl-form .wl-formular { flex: 1 1 auto; }
.wl-abm { grid-area: abm; margin-top: -8px; }
/* Drei Karten rechts füllen die Höhe der linken Spalte (Auftraggeber 14.10.2026). */
.wl-punkte { grid-area: punkte; list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(3, 1fr); gap: 14px; }
.wl-punkte li { background: #fff; border: 1px solid var(--line, #DCE4EC); border-radius: 16px; padding: 14px 20px;
  display: flex; align-items: center; gap: 16px; box-shadow: var(--sh-1); }
.wl-punkte .ico-tile { flex: 0 0 auto; }
.wl-punkt-text { display: grid; gap: 4px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.wl-punkte b { font-size: 17px; color: var(--ink); }
.wl-formular { margin-top: 0; padding: clamp(16px, 2.4vw, 26px); }
.wl-formular .field { margin-bottom: 10px; }
.wl-formular .pilot-wahl { margin-bottom: 8px; }
.wl-formular .pilot-wahl legend { margin-bottom: 6px; font-size: 14px; }
.wl-formular .pilot-wahl-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.wl-formular .consent { margin-bottom: 6px; font-size: 13px; }
.wl-formular .pilot-form-fuss { margin-top: 6px; padding-top: 14px; gap: 10px 20px; }
.wl-formular .form-note { font-size: 12.5px; line-height: 1.5; }
@media (max-width: 900px) {
  .wl-gitter { grid-template-columns: minmax(0, 1fr); }
  .wl-gitter { grid-template-areas: "kopf" "form" "abm" "punkte"; }
  .wl-punkte { grid-template-rows: none; }
}
@media (max-width: 560px) {
  .wl-formular .pilot-wahl-liste { grid-template-columns: minmax(0, 1fr); }
  .wl-punkte { grid-template-columns: minmax(0, 1fr); }
}

/* Abmeldung: kleiner Aufklapper unter dem Formular */
.abmelde-auf { margin-top: 12px; font-size: 14px; }
.abmelde-auf summary { cursor: pointer; color: var(--ink-2); font-weight: 600; padding: 6px 2px; }
.abmelde-auf[open] summary { margin-bottom: 4px; }
.abmelde-form { margin-top: 12px; }
.abmelde-form h3 { margin: 0 0 6px; font-size: 14.5px; }
.abmelde-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.abmelde-zeile .field { flex: 1 1 200px; margin: 0; }

/* Startseite: Zielgruppenkarten mit Preisanker, Wizard-Streifen, Paketvergleich (14.10.2026) */
.personen-grid--5 { align-items: stretch; }
.pk { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pk:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--green); }
.pk .personen-info { padding: 14px 16px 16px; }
.pk-titel { margin: 0; font-size: 15.5px; color: var(--ink); }
.pk .pk-satz { flex: 1 1 auto; margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.pk-preis { margin: 12px 0 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; color: var(--ink-2); }
.pk-preis b { font-size: 17px; color: var(--ink); }
.pk-preis small { font-size: 12px; color: var(--muted); }
.pk-status { margin: 8px 0 0; }
.pk-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.pk-mehr { font-size: 13.5px; font-weight: 600; color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; }
.pk-wizard { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; padding: 14px 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pk-wizard:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--green); }
.pk-wizard-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--green-wash); color: var(--green-deep); flex: 0 0 auto; }
.pk-wizard-icon svg { width: 22px; height: 22px; }
.pk-wizard-text { flex: 1 1 380px; min-width: 0; }
.pk-wizard-text h3 { margin: 0; font-size: 16px; color: var(--ink); }
.pk-wizard-text p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.pk-wizard .pk-aktion { margin: 0; }
.vgl-zeile { margin-top: 22px; text-align: center; }
.vgl > summary { display: inline-flex; list-style: none; cursor: pointer; }
.vgl > summary::-webkit-details-marker { display: none; }
.vgl > summary::after { content: ""; width: 8px; height: 8px; margin-left: 10px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.vgl[open] > summary::after { transform: rotate(-135deg); }
.vgl-inhalt { margin-top: 18px; text-align: left; }
.vgl .vgl-tabelle { min-width: 900px; }
.vgl .fm-legende { margin-bottom: 10px; }
.vgl-text { padding: 8px 6px; text-align: center; font-size: 13px; line-height: 1.4; color: var(--ink-2);
  border-bottom: 1px solid var(--line); }
.vgl-text b { color: var(--ink); }
.vgl-links { margin: 14px 0 0; text-align: center; font-weight: 600; }
.vgl-links a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; }
.vgl-inhalt .tarif-hinweis { text-align: center; margin-top: 6px; }
@media (max-width: 700px) { .pk-wizard-text { flex-basis: 100%; } }

/* d-land.css */
/* ErfinderWerk: Länderauswahl der Warteliste, Standard-Auswahlfeld des Browsers (select mit optgroup).
   Die Zahl sichtbarer Zeilen der geöffneten Liste bestimmt der Browser bzw. das Betriebssystem. Schrift 16 px
   (kein Zoomen auf iOS). Die Flagge des gewählten Landes steht links im Feld. */
.land-feld[hidden] { display: none; }
.land-box { position: relative; }
.land-box .land-auswahl { padding-left: 15px; }
.land-feld.hat-land .land-auswahl { padding-left: 50px; }
.land-flagge { position: absolute; left: 14px; top: 50%; margin-top: -9px; width: 24px; height: 18px;
  object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--line-2); pointer-events: none; z-index: 1; }
.land-flagge[hidden] { display: none; }