/* ==========================================================
   komponenten.css · GedankenRESET-LP
   Kanon v3.1 · Runde p.013 · 08.09.2026

   Gebaut gegen Textstaffelstab v1.3, Designtokens v1.2,
   Pruefrunde 1 v1.4, Gestaltungsrunde v1.5.

   Ausschliesslich var()-Verweise. Ausnahmen: Nullwerte, 100 %,
   auto und die Umbruchpunkte in den Media-Praeambeln.

   KONTRASTREGEL DIESER RUNDE (v1.5 Pruefkriterien):
   keine Textfarbe in Gold auf Creme. Gold ist Zierlinie und
   Flaeche, nie Text auf hellem Grund. Wo v1.5 "in Gold" fuer
   Text sagt, steht --farbe-gold-text (4,79:1) oder Marine.
   ========================================================== */

/* --- Markenzeichen, EINE Stelle --------------------------
   v1.5 G-00: Freigabe liegt vor, das Zeichen ist ™ und wird
   gezeigt. Kommt spaeter eine Eintragung, ist der Wechsel auf
   ® eine Zeile im Generator. */
.gr-marke{ font-size:.6em; vertical-align:.45em; letter-spacing:0 }

/* --- Huelle und Baender · G-02 --------------------------- */

.gr-huelle{
  width:100%;
  max-width:var(--breite-voll);
  margin-inline:auto;
  padding-inline:var(--sp-6);
}
.gr-band{ padding-block:var(--sektion-y) }
.gr-band--eng{ padding-block:var(--sec-m) }
/* A-08 und A-11: KEINE Sektion setzt eigene vertikale
   Abstaende. v1.5 G-08 wollte fuer S-06 "sehr viel Weissraum";
   v1.8 verlangt einen einheitlichen Rhythmus und nennt S-06
   ausdruecklich. Die neuere Vorgabe gilt - die Ruhe der Sektion
   entsteht jetzt allein aus der schmalen Spalte und den
   grossen Abstaenden zwischen den Absaetzen. */
.gr-band--ruhe{ padding-block:var(--sektion-y) }
/* A-11: "Der Abstand zwischen Textblöcken innerhalb einer
   Sektion ist über die gesamte Seite gleich." Hier stand
   --sp-8 statt --sp-5, ein Rest der Sonderbehandlung aus v1.5
   G-08. Die drei Absaetze standen dadurch so weit auseinander,
   dass sie nicht mehr als ein Text lasen. */
.gr-band--ruhe p{ margin-bottom:var(--sp-5) }

/* K-09: die Huelle bleibt in JEDER Sektion gleich breit und
   behaelt denselben Seitenabstand. Klassen wie .gr-schmal
   begrenzen deshalb ihre KINDER, nicht sich selbst - sonst
   schrumpft der Container, zentriert sich neu, und der Block
   beginnt an einer anderen senkrechten Kante als alle uebrigen.
   Gemessen war das bei S-06 eine Abweichung von 238px. */
.gr-schmal > *{ max-width:var(--breite-lesen) }

/* K-06: zentriert platziert heisst nicht mittig gesetzt.
   Der Block steht mittig in der Sektion, der Fliesstext darin
   laeuft linksbuendig in der Lesespalte. Zentrierter Flattersatz
   bleibt Ueberschriften und dem Abbinderstatement vorbehalten.
   Gilt fuer die ganze Seite. */
.gr-mitte{ text-align:center }
/* :where() zaehlt nicht zur Spezifitaet. Mit sechs verketteten
   :not(.klasse) lag die Regel bei 0,7,1 und schlug jede spaetere
   Ausnahme - die Diagrammspalten in S-04 und S-05 waeren
   linksbuendig geworden, obwohl sie unter Kreisen und Ziffern
   stehen. So liegt sie bei 0,1,1 und laesst sich normal
   ueberschreiben. */
.gr-mitte p:not(:where(.gr-format, .gr-preis, .gr-preis__titel,
                       .gr-statement, .gr-microcopy, .gr-einleitung,
                       .gr-zusatzzeile, .gr-textlink__zeile,
                       .gr-vertraulich, .gr-folgen__satz,
                       .gr-folgen__schluss)),
.gr-mitte li,
.gr-mitte .gr-nutzen,
.gr-mitte .gr-enthalten{
  text-align:left;
}
/* Was unter einem Kreis, einem Symbol oder einer Ziffer steht,
   bleibt darunter zentriert - sonst steht die Beschriftung neben
   dem, was sie beschriftet. */
.gr-mitte .gr-modell__schritt p,
.gr-mitte .gr-stufe p{ text-align:center }
.gr-mitte__text{ margin-inline:auto }

/* --- Kopfzeile ------------------------------------------- */

.gr-kopf{
  display:flex; align-items:center; justify-content:center;
  gap:var(--sp-5);
  padding-block:var(--sp-4);
}
.gr-kopf .nic-logo{ width:170px }
/* 72px und ein enger Ausschnitt auf das Gesicht. Bei 56px und dem
   Halbfigurenschnitt war die Scheibe zwar da, aber niemand haette
   ein Gesicht darin erkannt - sie las sich als heller Punkt.
   Dieselbe Kreisform wie die Buchstabenkreise in S-04 und das
   Portraet der Schlusskarte. */
.gr-kopf__portraet{
  width:72px; height:72px;
  border-radius:var(--radius-pille);
  object-fit:cover;
  flex:0 0 auto;
}
@media (max-width:760px){
  .gr-kopf__portraet{ width:56px; height:56px }
}

/* --- Buehne · G-03 ---------------------------------------
   Mindesthoehe 88vh, Inhalt senkrecht zentriert. Die
   Mindesthoehe ist ein Minimum, kein Festwert: waechst der
   Inhalt, waechst die Sektion. Der Button bleibt bei
   1440 x 900 im sichtbaren Bereich - gemessen, nicht
   angenommen. */

.gr-buehne{
  min-height:88vh;
  display:grid;
  align-items:center;
  padding-block:var(--sec-m);
}
.gr-buehne__block{ text-align:center }

/* 1 · Wortmarke, klein, Gold-hell, Versalabstand .08em.
   Seit G-00 gesetzter Text - die SVG-Auflage aus v1.4 P-07
   ist mit der Freigabe aufgehoben. */
.gr-wortmarke{
  font-family:var(--schrift-serif);
  font-size:var(--grad-h3);
  font-weight:500;
  letter-spacing:.08em;
  color:var(--farbe-gold-hell);        /* 6,56:1 auf Marine */
  margin:0 0 var(--sp-4);              /* K-02: klein */
  /* A-02: Die Wortmarke ist eine Zeile, kein Fliesstext. Die
     Regel p{max-width:--breite-lesen} gab ihr einen 1020px
     breiten Kasten an der linken Containerkante - der Text
     darin zentrierte auf 602 statt auf 720 und stand damit
     als einziges Element des Heros neben der Mittelachse. */
  max-width:none;
}

/* 2 · H1, hoechstens zwei Zeilen bei Desktopbreite */
/* K-02: Die H1 ist das groesste Textelement der Seite und steht
   in --grad-hero. Damit ist der Deckel aus p.013 aufgehoben.

   Was das kostet, gemessen bei 1440 x 900: der zweite Satz passt
   erst ab 66,7px in eine Zeile, --grad-hero liefert 104px. Mit
   dem festen Umbruch nach "vorbei." sind es drei Zeilen, 349px.
   Der Primaerbutton steht damit NICHT mehr im ersten Bildschirm.

   v1.4 P-01 und v1.5 G-03 hatten das verlangt, v1.6 wiederholt es
   nicht und stellt die Groesse ausdruecklich voran. Gebaut ist
   v1.6. Der Verlust ist in der Rueckmeldung benannt, damit die
   Entscheidung sichtbar bleibt und nicht nebenbei passiert. */
.gr-buehne__titel{
  font-size:var(--grad-hero);
  font-weight:500;                     /* G-01: 500, nicht 600 */
  line-height:var(--zeile-eng);
  letter-spacing:-.015em;
  margin:0 0 var(--sp-4);              /* K-02: klein zum Claim */
  text-wrap:balance;
  /* Gemessen bei 390px: "Rufbereitschaft." ist 332,4px breit,
     die Spalte 326px. Die sechs Pixel Ueberstand erzeugten
     waagerechtes Rollen der ganzen Seite. Getrennt wird nur,
     wenn das Wort sonst nicht passt - oberhalb von rund 400px
     Fensterbreite greift die Regel nie. Der Schriftgrad aus
     v1.5 G-01 bleibt unberuehrt; ein kleinerer Grad haette das
     Problem bei 360px wieder gehabt. */
  hyphens:auto;
  -webkit-hyphens:auto;
}

/* 3 · Claim unmittelbar unter der H1, Gold-hell, etwa halbe
      H1-Groesse */
/* K-02: mindestens 40 % der H1-Groesse. Die Versalhoehe einer
   Zeile betraegt rund 7,5 % der SVG-Breite; fuer 40 % von 104px
   sind das rund 560px. Eine feine Schreibschrift traegt kleiner
   nicht. */
.gr-buehne .gr-claim{
  width:min(100%, 36rem);
  margin:0 auto;
  color:var(--farbe-gold-hell);        /* 6,56:1 auf Marine */
}

/* 4 · Der eine Vorspannsatz. Hier sitzt die Zaesur: groesster
      Abstand des Blocks (G-03). */
.gr-vorspann{
  max-width:var(--breite-lesen);
  margin:var(--sec-s) auto var(--sp-6);   /* K-02: gross, dann mittel */
  font-size:var(--grad-text);
}

/* 5 · Formatzeile */
/* --breite-lesen ist in em angegeben (A-01) und damit KEINE
   feste Breite: 34em sind bei --grad-text 748px, bei --grad-h3
   aber 1020px und bei --grad-klein 544px. Elemente, die nicht
   zusammenhaengender Fliesstext sind, duerfen sie deshalb nicht
   erben - sonst landen sie auf einer vierten, fuenften, sechsten
   Kante. Gemessen in p.016: genau das war bei der Formatzeile
   und der Zusatzzeile der Fall. */
.gr-format{
  font-family:var(--schrift-serif);
  font-size:var(--grad-h3);
  max-width:none;                      /* einzeilig, kein Fliesstext */
  margin:0 0 var(--sp-8);              /* K-02: gross vor dem Button */
}
.auf-marine .gr-format{ color:var(--farbe-gold-hell) }

/* --- Zweispalter S-02 · G-04 ----------------------------- */

.gr-zwei-spalten{ display:grid; gap:var(--sp-8) }
@media (min-width:1001px){
  .gr-zwei-spalten{ grid-template-columns:1fr 1fr; align-items:start }
}
.gr-spalte-text > *{ max-width:var(--breite-lesen) }
.gr-ueberleitung{
  font-family:var(--schrift-serif);
  font-size:var(--grad-h3);
  margin-top:var(--sp-6);
}

/* Tabliste: je Eintrag eine eigene Flaeche in Weiss mit sehr
   feiner Goldlinie oben. Der Bezug zu offenen Tabs soll
   erkennbar sein, ohne eine Browseroberflaeche nachzubauen. */
/* A-04: gleiche Spaltenbreiten, gleicher Abstand, gleiche
   Hoehe je Reihe. Kein Element waechst mit seinem Inhalt -
   deshalb 1fr statt auto und align-items:stretch. */
.gr-tabliste{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--sp-4);
  grid-auto-rows:1fr;
  align-items:stretch;
}
@media (min-width:1001px){
  .gr-tabliste{ grid-template-columns:1fr 1fr }
}
/* K-07: die Fragen sind der Ort, an dem die Wiedererkennung
   entsteht - sie sollen gelesen werden. Grad auf --grad-text,
   Innenabstand entsprechend groesser. Lieber weniger Kacheln je
   Reihe als kleinere Schrift: das zweispaltige Raster greift
   deshalb erst ab 1001px. */
.gr-tabliste li{
  background:var(--farbe-weiss);
  border-top:2px solid var(--farbe-gold);   /* Zierlinie */
  border-radius:0 0 var(--radius-klein) var(--radius-klein);
  padding:var(--sp-5) var(--sp-5) var(--sp-6);
  font-size:var(--grad-text);
  line-height:var(--zeile-weit);
  box-shadow:var(--sh-1);
}

/* --- Statement ------------------------------------------- */

.gr-statement{
  font-family:var(--schrift-serif);
  font-size:var(--grad-statement);
  line-height:var(--zeile-eng);
  letter-spacing:-.015em;
  max-width:var(--breite-mittel);
  margin:var(--sp-8) auto;
  text-wrap:balance;
}
/* v2.0 D-03: In S-02 laeuft das Statement ueber die volle
   Innenbreite, nicht in --breite-mittel. Gemessen sass es dadurch
   auf Kante 272 - in einer linksbuendigen Sektion die einzige
   Kante neben 92 und 752. Damit ist auch die Kollision K-1 aus
   p.016 entschieden: A-04 woertlich, nicht A-01. In S-03 bleibt
   --breite-mittel, das verlangt A-05 ausdruecklich. */
#s-02 .gr-statement{ max-width:none }

/* A-05: in S-03 nur zwei Breiten - Fliesstext in
   --breite-lesen, Nutzenliste UND Statement in --breite-mittel,
   beide auf derselben Mittelachse. */
.gr-statement--stark{ margin-block:calc(var(--sektion-y) * .6) 0 }
.gr-mitte .gr-nutzen{ max-width:var(--breite-mittel) }
/* A-04: das Statement ist der einzige Block ueber die volle
   Innenbreite in dieser Sektion und damit die eindeutige
   Ausnahme von ihrer linksbuendigen Achse. Gleicher Abstand
   oben und unten. */
.gr-motivflaeche .gr-statement{ margin-block:var(--sektion-y) }

/* --- S-03 Wende · G-05 -----------------------------------
   Die H2 dieser Sektion steht in --grad-h1 und ist damit
   deutlich groesser als alle anderen Zwischenueberschriften. */

.gr-wende{
  font-size:var(--grad-h1);
  letter-spacing:-.015em;
  margin-bottom:var(--sektion-y);
  text-wrap:balance;
}
.gr-mitte__text{ max-width:var(--breite-lesen) }
.gr-mitte h3{ margin-top:var(--sp-8) }

/* Nutzenliste zweispaltig, ohne Trennlinien, Haken in Gold-hell */
.gr-nutzen{
  list-style:none; margin:var(--sp-6) 0 0; padding:0;
  display:grid; gap:var(--sp-4);
  text-align:left;
}
@media (min-width:1001px){
  .gr-nutzen{ grid-template-columns:1fr 1fr; column-gap:var(--sp-7) }
}
.gr-nutzen li{
  position:relative;
  padding-left:var(--sp-6);
  max-width:var(--breite-lesen);
}
.gr-nutzen li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:var(--sp-3); height:var(--sp-2);
  border-left:2px solid var(--farbe-gold-hell);
  border-bottom:2px solid var(--farbe-gold-hell);
  transform:rotate(-45deg);
}

/* --- S-04 RESET-Modell · G-06 ----------------------------
   Fuenf Stufen ab 1000px nebeneinander, darunter untereinander.
   Eine durchgehende Goldlinie auf Hoehe der Kreismitte
   verbindet die Stationen und endet an den aeusseren Kreisen -
   sie laeuft NICHT ueber den Rand hinaus. Umgesetzt ueber
   ein Pseudoelement, dessen Breite bei 1/10 beginnt und bei
   9/10 endet: das ist genau die Mitte des ersten und des
   letzten von fuenf gleichen Feldern.
   Bei 390px entfaellt die Linie (v1.5 Pruefkriterien). */

.gr-modell{ margin-top:var(--sp-8) }
.gr-modell__schritt{ text-align:center }
/* K-03: Kreise mindestens 88px, Buchstabe in Serif und grossem
   Grad. Es ist das Methodenmodell der Kundin und stand bisher
   als unscheinbarstes Element der Seite. */
.gr-modell__zeichen{
  display:inline-flex; align-items:center; justify-content:center;
  width:88px; height:88px;
  border-radius:var(--radius-pille);
  background:var(--farbe-beige);
  color:var(--farbe-marine);           /* 10,45:1 */
  font-family:var(--schrift-serif);
  font-size:var(--grad-h2);
  font-weight:500;
  line-height:1;
  margin-bottom:var(--sp-5);
}
.gr-modell h3{
  font-size:var(--grad-h3);            /* K-03 */
  font-family:var(--schrift-serif);
  font-weight:500;
  margin-bottom:var(--sp-3);
}
.gr-modell p{
  font-size:var(--grad-klein);
  color:var(--farbe-grau);             /* 5,91:1 auf Creme */
  max-width:var(--breite-lesen);
  margin:0 auto;
}

.gr-modell__linie{ display:none }
@media (max-width:1000px){
  .gr-modell{ display:grid; gap:var(--sec-s) }
}
@media (min-width:1001px){
  .gr-modell{
    position:relative;
    display:grid; grid-template-columns:repeat(5,1fr);
    /* A-06: gap NULL. Nur ohne Spaltenabstand liegt die Mitte
       des ersten Kreises exakt bei 10 % und die des letzten bei
       90 % - genau dort beginnt und endet die Verbindungslinie.
       Mit gap sass sie gemessen 10px zu kurz an beiden Enden.
       Der Abstand kommt stattdessen aus dem Innenabstand der
       Stationen, der die Achse nicht verschiebt. */
    gap:0;
  }
  .gr-modell__schritt{ padding-inline:var(--sp-4) }
  /* K-03: gezeichnete Linie, kein Rechteck mit Hoehe 1. Sie
     sitzt auf Kreismitte - Symbolhoehe plus halber Kreis - und
     endet an den aeusseren Kreisen: bei fuenf gleichen Feldern
     ist das 1/10 bis 9/10. */
  .gr-modell__linie{
    display:block;
    position:absolute;
    left:10%; width:80%;     /* = Mitte Kreis 1 bis Mitte Kreis 5 */
    top:calc(var(--sp-7) + var(--sp-4) + 44px);
    height:auto;
    color:var(--farbe-gold);
    z-index:0;
  }
  .gr-modell__schritt{ position:relative; z-index:1 }
}

/* --- S-05 Stufenfolge · G-07 -----------------------------
   Keine Karten mit Rahmen. Drei Stufen, verbunden durch eine
   waagerechte Goldlinie mit drei Punkten. Die mittlere Stufe
   ist zurueckgenommen - sie ist keine Sitzung.

   ABWEICHUNG: v1.5 verlangt die Ziffern "in Gold". Auf Creme
   erreicht Gold 2,60:1; die Pruefkriterien derselben Runde
   verbieten Gold als Textfarbe auf Creme. Die Ziffern stehen
   deshalb in Gold-Text (4,79:1). */

.gr-stufen{ margin-top:var(--sp-8) }
.gr-stufe{ text-align:center }
.gr-stufe__nr{
  display:block;
  font-family:var(--schrift-serif);
  font-size:var(--grad-h2);
  font-weight:500;
  line-height:1;
  color:var(--farbe-gold-text);        /* 4,79:1 statt Gold 2,60:1 */
  margin-bottom:var(--sp-5);
}
/* A-07: gemeinsame Oberkante UND gemeinsame Unterkante der
   Ueberschriften. Die mittlere Stufe steht in kleinerem Grad
   (die Zuruecknahme aus K-04); ohne feste Kastenhoehe begann
   ihr Text dadurch 3px hoeher als bei den anderen beiden. */
.gr-stufe h3{
  font-size:var(--grad-h3);
  font-family:var(--schrift-serif);
  font-weight:500;
  min-height:calc(var(--grad-h3) * var(--zeile-eng));
  margin-bottom:var(--sp-2);
}
.gr-stufe__zeit{
  font-size:var(--grad-klein);
  font-weight:600;
  letter-spacing:.06em;
  color:var(--farbe-gold-text);
  margin:0 0 var(--sp-3);
}
.gr-stufe p{
  font-size:var(--grad-klein);
  max-width:var(--breite-lesen);
  /* margin-inline:auto NICHT. Die Stufe ist ein Raster, und ein
     Rasterkind mit automatischen Seitenabstaenden schrumpft auf
     seine Inhaltsbreite und zentriert sich darin. Die Zeile
     "90 Minuten" war dadurch 104px statt 323 breit und sass auf
     den Kanten 202 und 1134 - zwei Werte, die es sonst auf der
     Seite nirgends gibt. Zentriert wird ueber text-align, das
     macht die Zeile nicht schmaler. */
  margin:0;
}
/* A-07: gemeinsame Grundlinie fuer alle drei Ziffern. Die
   kleine Ziffer der mittleren Stufe wird ueber eine feste
   Zeilenhoehe auf dieselbe Grundlinie gesetzt wie die grossen -
   gemessen sass sie 34px hoeher. */
/* A-07: gemeinsame Grundlinie fuer alle drei Ziffern. Die
   kleine Ziffer der mittleren Stufe sass gemessen 34px hoeher,
   weil sie einen kleineren Grad UND einen kleineren
   Aussenabstand hatte. Beides gleichgezogen: dieselbe
   Kastenhoehe, dieselbe Bodenkante, derselbe Abstand nach
   unten. Die Zuruecknahme bleibt - sie kommt aus Grad und
   Farbe, nicht aus der Position. */
.gr-stufe__nr{
  display:flex; align-items:flex-end; justify-content:center;
  min-height:var(--grad-h2);
  margin-bottom:var(--sp-5);
}
@media (min-width:1001px){
  /* Im subgrid regeln die Zeilen die Hoehe, nicht die
     Aussenabstaende der einzelnen Teile. */
  .gr-stufe__nr,.gr-stufe h3,.gr-stufe__zeit{ margin-bottom:var(--sp-3) }
  .gr-stufe h3{ min-height:0 }
}
/* A-07: die mittlere Stufe hat keine Zeitangabe - sie ist keine
   Sitzung. Damit ihr Text trotzdem auf derselben Zeile beginnt
   wie bei den anderen beiden, steht dort eine leere Zeile
   gleicher Hoehe. Sie ist aus dem Vorlesefluss genommen. */
.gr-stufe__zeit--leer{ visibility:hidden }

/* Stufe 02 trug bis p.020 eine eigene Auszeichnung: Ziffer und
   Ueberschrift in der Grotesk statt der Serife, kleiner, der Text
   grau statt marine. Gedacht war das als Zuruecknahme (v1.6 K-04,
   v1.8 A-07: "ueber Schriftgrad, Textfarbe und den Verzicht auf
   die grosse Ziffer"). Auf der Gesamtaufnahme standen dadurch
   drei Texte nebeneinander, von denen einer anders gesetzt war.
   Chris am 08.09.2026: "Es kann nicht sein, dass wir drei Texte
   nebeneinander haben und die sind unterschiedlich formatiert."
   Die Klasse bleibt im Markup nicht mehr gesetzt; dass 02 kein
   Termin ist, sagt jetzt allein die Ueberschrift "Dazwischen:"
   und die fehlende Zeitangabe. */

@media (max-width:1000px){
  .gr-stufen{ display:grid; gap:var(--sp-7) }
}
@media (min-width:1001px){
  /* K-04: Stufe 02 ist der Zwischenraum, nicht die dritte Karte.
     Das Raster gibt ihr weniger Platz - 1fr gegen 0,72fr - und
     dazwischen stehen die beiden gezeichneten Pfeile. Am Text
     wurde nichts gekuerzt, die Gewichtung kommt aus der
     Gestaltung. */
  .gr-stufen{
    position:relative;
    display:grid;
    /* A-07: drei GLEICH breite Spalten mit gemeinsamer
       Oberkante. Die Zuruecknahme von Stufe 02 kommt
       ausschliesslich aus Schriftgrad, Textfarbe und dem
       Verzicht auf die grosse Ziffer - nicht aus einer
       schmaleren Spalte. Die war gemessen 171px gegen 195px
       und machte die Stufe hoeher statt leiser. */
    /* minmax(0,1fr), nicht 1fr: "1fr" heisst minmax(auto,1fr),
       und das automatische Minimum ist die Mindestbreite des
       Inhalts. Sobald die Stufen selbst Raster wurden, zog der
       laengste Text die mittlere Spalte auf 544px, waehrend die
       aeusseren auf 122 und 109 schrumpften. Mit 0 als Minimum
       teilen sich die drei Spalten den Platz wirklich gleich. */
    /* Die beiden Pfeilspalten bekommen eine feste Breite. Mit
       "auto" wird die Spalte so breit wie der Inhalt - und der
       Inhalt ist ein SVG mit width:100%, dessen Breite sich auf
       genau diese Spalte bezieht. Gemessen ergab das 300px und
       544px statt der gezeichneten 120 und 200. */
    grid-template-columns:minmax(0,1fr) 6rem minmax(0,1fr) 6rem minmax(0,1fr);
    /* A-07: vier Zeilen - Ziffer, Ueberschrift, Zeitangabe,
       Text. Die Stufen teilen sie sich per subgrid, damit jede
       Zeile ueber alle drei Stufen dieselbe Hoehe hat. Ohne das
       lagen die Textanfaenge 3px auseinander, weil die kleinere
       Ueberschrift der mittleren Stufe auf vier statt drei
       Zeilen bricht. Eine feste Kastenhoehe haette geraten,
       subgrid misst. */
    grid-template-rows:auto auto auto auto;
    gap:var(--sp-5);
    align-items:start;
    padding-top:var(--sp-6);
  }
  /* Die durchgehende Linie ist durch die beiden gezeichneten
     Pfeile ersetzt (K-04, K-10) - sie zeigen eine Richtung, was
     eine Linie nicht kann. */
  /* Jedes der fuenf Kinder bekommt seine Spalte ausdruecklich.
     Ohne das entscheidet die automatische Platzierung - und die
     kam mit den beiden Ausnahmen (Stufen ueber vier Zeilen,
     Pfeile nur in Zeile 1) nicht zurecht: gemessen standen die
     Pfeile in Spalte 1 und 2, die Stufen in 4, 5 und irgendwo,
     Breiten 105/544/105. Ausdrueckliche Platzierung raet nicht. */
  .gr-stufen > *:nth-child(1){ grid-column:1 }
  .gr-stufen > *:nth-child(2){ grid-column:2 }
  .gr-stufen > *:nth-child(3){ grid-column:3 }
  .gr-stufen > *:nth-child(4){ grid-column:4 }
  .gr-stufen > *:nth-child(5){ grid-column:5 }
  .gr-stufe{
    position:relative;
    display:grid;
    grid-row:1 / span 4;
    grid-template-rows:subgrid;
    row-gap:0;
  }
  .gr-stufen__pfeil{ grid-row:1 / 2 }
}

.gr-zusatzzeile{
  border-top:var(--hair) solid var(--farbe-gold);
  padding-top:var(--sp-4);
  /* S-05 ist seit p.021 eine zentrierte Sektion (siehe dort).
     Die Zeile folgt derselben Achse wie Ueberschrift, Stufen und
     Knopf - ein einzelner Satz, kein Fliesstext. */
  /* Volle Innenbreite statt --breite-mittel: als einziger Block
     der Sektion sass die Zeile sonst auf Kante 272, waehrend
     Ueberschrift, Stufenfolge und Knopf auf 92 stehen. Zentriert
     bleibt sie ueber text-align. */
  margin:var(--sp-8) 0 0;
  max-width:none;
  font-size:var(--grad-klein);
  text-align:center;
}

/* --- S-07 Portraet · G-09 --------------------------------
   Asymmetrisch. Das Bild nimmt links rund 45 % ein und laeuft
   nach links ueber den Container hinaus bis an den Seitenrand.

   Umgesetzt ueber ein Raster, dessen linke Spalte am
   Viewportrand beginnt: der Container wird nicht verlassen,
   die Sektion traegt das Raster selbst. So entsteht kein
   waagerechtes Rollen - das ist der Grund, warum hier nicht
   mit negativen Aussenabstaenden gearbeitet wird. */

.gr-portraet__raster{ display:grid; gap:var(--sp-8) }

@media (min-width:1001px){
  /* A-12: zwei gleich breite Spalten wie in S-02. Vorher trug
     die Sektion selbst das Raster und rechnete den Seitenrand
     nach - gemessen endete der Textblock bei 1344 statt bei
     1348, vier Pixel neben der Containerkante der uebrigen
     Seite. Jetzt liefert die Huelle beide Kanten. */
  .gr-portraet__raster{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:var(--sp-8);
    /* Das Bild fuellt die Zeile, der Text bestimmt ihre Hoehe.
       Vorher gab das Bild die Hoehe vor: 688 px breit mal
       Seitenverhaeltnis 1,5 ergab 1392 px, der Text daneben war
       753 px hoch - gemessen 639 px leere Cremeflaeche unter dem
       Text. Mit stretch kann diese Luecke gar nicht entstehen.
       A-09 bleibt erfuellt: die Ueberschrift beginnt um den
       Innenabstand unter der Bildoberkante, also im oberen
       Drittel. */
    align-items:stretch;
  }
  /* --sp-8 statt calc(520px / 6): derselbe Zweck, aber ein Wert
     der Leiter statt einer Zahl, die aus einer Bildhoehe stammt,
     die es so nicht mehr gibt. Die Ueberschrift liegt damit
     weiterhin im oberen Drittel des Portraets (A-09). */
  .gr-portraet__text{ padding-top:var(--sp-8) }
  /* Das Bild laeuft nach links bis an den Fensterrand. Der
     negative Aussenabstand ist genau der linke Seitenrand der
     Huelle. Ueberstand nach links erzeugt kein waagerechtes
     Rollen, er wird abgeschnitten - eine klassische
     Bildlaufleiste kostet hier also hoechstens ein paar Pixel
     Bildrand, nie eine Verschiebung des Textes. Deshalb steht
     die vw-Rechnung hier und nicht an der Textspalte. */
  .gr-portraet__bild{
    margin-left:calc(-1 * max(
      var(--sp-6),
      (100vw - var(--breite-voll)) / 2 + var(--sp-6)));
  }
}

.gr-portraet__bild{ position:relative }
.gr-portraet__bild > img{
  display:block;
  width:100%;
  min-height:520px;
  height:auto;
  object-fit:cover;
  object-position:center top;
  border-radius:0 var(--radius-karte) var(--radius-karte) 0;
  /* Weiche Maske am unteren Rand, solange das freigestellte
     Portraet nicht vorliegt (O-27) - damit der Studiogrund
     nicht als hartes Rechteck auf der Cremeflaeche steht. */
  -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
}
@media (max-width:1000px){
  .gr-portraet__bild > img{ border-radius:var(--radius-karte); min-height:0 }
}
@media (min-width:1001px){
  /* Das Bild wird aus dem Hoehenspiel genommen: absolut gesetzt
     traegt es nichts zur Zeilenhoehe bei, die kommt allein vom
     Text. align-items:stretch allein reichte nicht - das Bild
     brachte seine eigene Hoehe aus dem Seitenverhaeltnis mit
     (928 breit mal 1,5 = 1392) und zog den Textblock auf dasselbe
     Mass. Gemessen vorher: Bild 1392, Text 753, dazwischen 639 px
     leere Cremeflaeche.

     Diese Regel steht HINTER der Grundregel, nicht in der
     Mediaquery weiter oben: dort stand sie zuerst, und die
     spaetere Grundregel mit height:auto hat sie ueberstimmt -
     gleiche Spezifitaet, die spaetere gewinnt (P-40, gleiche
     Ursache). */
  .gr-portraet__bild{ min-height:520px }
  .gr-portraet__bild > img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-height:0;
  }
}

.gr-portraet__text > *{ max-width:var(--breite-lesen) }

/* Das Buchcover ist ein eigenes Objekt, nicht Teil des
   Textblocks: klein, weicher Schatten, ueberlappend an der
   unteren rechten Ecke des Portraets. */
/* F-02: Cover UND Bildunterschrift bleiben vollstaendig in der
   Bildspalte. Bis p.022 ragte die Figur 164px darueber hinaus und
   lag mit beidem ueber der Textspalte - gemessen Cover 532..852
   und Unterschrift 700..844 gegen eine Textspalte, die bei 752
   beginnt. Die Unterschrift steht deshalb jetzt UNTER dem Cover
   statt daneben; seitlich ist der Platz nicht da, ohne die
   Bildspalte zu verlassen.

   Sie sitzt dabei im unteren Bereich des Bildes, wo die weiche
   Maske das Foto bereits in die Cremeflaeche ausblendet - dort
   gilt ihre gemessene 4,79:1 wieder. */
.gr-cover{
  margin:0;
  position:absolute;
  right:var(--sp-7);
  bottom:var(--sp-7);          /* A-09: gleicher Abstand wie rechts */
  width:152px;
  display:block;
  transform:rotate(-2deg);
  transform-origin:right bottom;
}
.gr-cover img{
  display:block; width:100%; height:auto;
  border-radius:var(--radius-klein);
  box-shadow:var(--sh-3);
}
.gr-cover figcaption{
  margin-top:var(--sp-3);
  font-size:var(--grad-klein);
  line-height:var(--zeile-eng);
  /* Marine, nicht Gold-Text. Die Unterschrift steht ueber dem
     ausgeblendeten Fuss des Fotos, nicht auf reiner Creme. Dort
     gemessen: Gold-Text kommt auf 3,86:1 im schlechtesten Pixel
     und liegt auf 79,7 % der Flaeche unter 4,5:1. Marine misst
     an derselben Stelle 10,40:1 im schlechtesten Pixel. */
  color:var(--farbe-marine);           /* 10,40:1, gemessen */
  text-align:center;
}
@media (max-width:1000px){
  .gr-cover{
    position:static;
    margin:var(--sp-6) auto 0;
    transform:none;
  }
}

.gr-vertrauen{
  border-top:var(--hair) solid var(--farbe-gold);
  padding-top:var(--sp-4);
  margin-top:var(--sp-6);
  font-size:var(--grad-klein);
  color:var(--farbe-grau);
}

/* --- S-09 Preisbereich · G-10 ----------------------------
   Zentriert, der Preis ist das groesste Element der Sektion.
   Die Ueberschrift steht klein darueber, nicht darunter.
   Die Platzhalter wandern an den rechten Rand: sichtbar,
   aber nicht komponierend. */

/* K-05: die Sektion nutzt die volle Innenbreite. Die
   Platzhalterkaesten sind aus dem Fluss genommen und sitzen
   absolut am rechten Rand - damit entspricht die Komposition
   dem Zustand NACH ihrem Wegfall. Gebaut ist der fertige
   Zustand, nicht der Zwischenstand. */
.gr-preisblock{ position:relative }
.gr-preisblock__inhalt{ position:relative }
/* A-10 verlangt, die Platzhalterkaesten "vollstaendig aus dem
   Fluss" zu nehmen, damit der Inhalt sich zentriert, "als waeren
   sie nicht vorhanden". Woertlich umgesetzt lagen sie ueber der
   Leistungsliste und ueber dem Knopf - gemessen bei 1920 px
   ueberdeckten sie beide. Aus dem Fluss heisst nicht ueber dem
   Text. Sie stehen jetzt unter dem Inhalt: der zentriert sich
   weiterhin ohne sie, und verdeckt ist nichts.
   Es sind Bauhinweise, keine Gestaltung - sie fallen mit
   html.ohne-platzhalter ohnehin weg (P-29). */
.gr-randnotizen{ margin-top:var(--sektion-y) }
@media (min-width:1001px){
  .gr-randnotizen{ grid-template-columns:1fr 1fr }
}
/* K-05: die Ueberschrift steht in --grad-h3, nicht in
   Kleinschrift. */
.gr-preis__titel{
  font-family:var(--schrift-serif);
  font-size:var(--grad-h3);
  font-weight:500;
  color:var(--farbe-beige);            /* 10,45:1 auf Marine */
  margin:0 0 var(--sp-4);
}
/* K-02 verlangt die H1 als groesstes Textelement der SEITE, nicht
   nur unter den Ueberschriften. Der Preis stand in --grad-hero und
   damit gleichauf. Er faellt auf --grad-h1 - immer noch das
   groesste Element seiner Sektion (K-05), aber unter der H1. */
.gr-preis{
  font-family:var(--schrift-serif);
  font-size:var(--grad-h1);
  font-weight:500;
  line-height:1;
  letter-spacing:-.015em;
  color:var(--farbe-gold-hell);        /* 6,56:1 auf Marine */
  margin:0 0 var(--sp-7);
}
.gr-enthalten{
  list-style:none; margin:0 auto var(--sp-7); padding:0;
  display:grid; gap:var(--sp-3);
  text-align:left;
  max-width:var(--breite-mittel);
}
@media (min-width:761px){
  .gr-enthalten{ grid-template-columns:1fr 1fr; column-gap:var(--sp-7) }
}
.gr-enthalten li{ position:relative; padding-left:var(--sp-6) }
.gr-enthalten li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:var(--sp-3); height:var(--sp-2);
  border-left:2px solid var(--farbe-gold-hell);
  border-bottom:2px solid var(--farbe-gold-hell);
  transform:rotate(-45deg);
}
.gr-microcopy{ margin-top:var(--sp-5); color:var(--farbe-beige) }

.gr-randnotizen{ display:grid; gap:var(--sp-5); align-content:start }
.gr-randnotizen .gr-platzhalter{ margin-bottom:0 }

/* --- S-10 Akkordeon · G-11 -------------------------------
   details/summary: ohne JavaScript bedienbar, Inhalt steht im
   Markup, jede Antwort oeffnet einzeln. Kein Pfeil, sondern
   ein Plus, das sich beim Oeffnen zum Minus dreht - eine
   Drehung um 90 Grad an einem Balkenpaar. */

.gr-fragen > *{ max-width:var(--breite-mittel) }
.gr-fragen h2{ margin-bottom:var(--sp-7) }
.gr-frage{ border-bottom:var(--hair) solid var(--farbe-gold) }
.gr-frage > summary{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-5);
  min-height:var(--ziel-touch);
  padding-block:var(--sp-4);
  font-family:var(--schrift-serif);
  font-size:var(--grad-h3);
  font-weight:500;
  line-height:var(--zeile-eng);
  cursor:pointer;
  list-style:none;
}
.gr-frage > summary::-webkit-details-marker{ display:none }

.gr-frage__zeichen{
  position:relative;
  flex:none;
  width:var(--sp-5); height:var(--sp-5);
}
.gr-frage__zeichen::before,
.gr-frage__zeichen::after{
  content:"";
  position:absolute; left:0; top:50%;
  width:100%; height:2px;
  background:var(--farbe-gold-text);   /* 4,79:1 auf Creme */
  transform:translateY(-50%);
  transition:transform var(--dur-2) ease;
}
.gr-frage__zeichen::after{ transform:translateY(-50%) rotate(90deg) }
.gr-frage[open] .gr-frage__zeichen::after{ transform:translateY(-50%) rotate(0deg) }

.gr-frage > p{
  max-width:var(--breite-lesen);
  margin:0 0 var(--sp-5);
}

/* --- S-11 Schlusskarte · G-12 ---------------------------- */

.gr-schlusskarte{
  min-height:60vh;
  display:grid;
  align-items:center;
  padding-block:var(--sektion-y);
}
/* K-02: Die Schlusskarte bekommt einen eigenen, kleineren Grad,
   damit die H1 der Buehne das groesste Textelement bleibt.
   104px zu 72px ist ein Verhaeltnis von 1,44 - gefordert ist
   mindestens ein Fuenftel. */
.gr-schlusskarte__titel{
  font-size:var(--grad-h1);
  font-weight:500;
  line-height:var(--zeile-eng);
  letter-spacing:-.015em;
  margin:0 0 var(--sp-7);
  text-wrap:balance;
}
.gr-schlusskarte .gr-knopfgruppe{ margin-bottom:var(--sp-8) }

/* Rundes Portraet ueber dem Schlusstitel. 160px, damit es eine
   Signatur bleibt und nicht mit der H2 konkurriert - die
   Buchstabenkreise in S-04 messen 88px, der Kreis hier ist der
   groesste der Seite und damit der letzte Halt vor dem Knopf. */
.gr-schlusskarte__portraet{
  display:block;
  width:160px; height:160px;
  margin:0 auto var(--sp-6);
  border-radius:var(--radius-pille);
  object-fit:cover;
}

/* --- Buttons ---------------------------------------------
   inline-flex, nicht inline: an einem Inline-Element bleibt
   min-height wirkungslos (Kanon 5.3, dort als Fehler gefuehrt). */

.gr-knopf{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--sp-2);
  min-height:var(--ziel-touch);        /* 52px, Kanon 5.3 */
  padding:var(--sp-3) var(--sp-7);
  max-width:100%;
  border:2px solid transparent;
  border-radius:var(--radius-pille);
  font-family:var(--schrift-sans);
  font-size:var(--grad-text);
  font-weight:600;
  line-height:var(--zeile-eng);
  text-align:center; text-decoration:none;
  cursor:pointer;
  /* E-10: die Flaeche laeuft aus, sie springt nicht. v1.9 nennt
     280ms; die Leiter kennt .15s und .3s (Kanon 5.1). Gebaut ist
     --dur-2, also 300ms - 20ms daneben, dafuer kein Rohwert und
     keine sechzehnte Dauer im Projekt. */
  transition:background-color var(--dur-2) ease,
             border-color var(--dur-2) ease,
             color var(--dur-2) ease;
}
/* E-10: keine Skalierung, kein Schatten, keine Verschiebung. */
.gr-knopf:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}
.auf-marine .gr-knopf--primaer:focus-visible{ outline-color:var(--farbe-gold-hell) }
.gr-knopf--primaer:focus-visible{ outline-color:var(--farbe-gold-text) }

/* G-10: der Button in S-09 ist deutlich groesser als die
   uebrigen, mindestens 64px hoch. */
.gr-knopf--gross{
  min-height:64px;
  padding:var(--sp-4) var(--sp-8);
  font-size:var(--grad-h3);
}

.gr-knopf--primaer{ background:var(--farbe-gold); color:var(--farbe-marine) }      /* 4,98:1 */
@media (hover:hover){
  .gr-knopf--primaer:hover{ background:var(--farbe-gold-hell) }
}
.gr-knopf--primaer:active{ background:var(--farbe-gold) }

.gr-knopf--sekundaer{
  background:transparent;
  color:var(--farbe-marine);                    /* 12,93:1 */
  border-color:var(--farbe-gold-text);          /* 4,79:1, Gold waere 2,60:1 */
}
@media (hover:hover){
  .gr-knopf--sekundaer:hover{ background:var(--farbe-beige) }
}
.gr-knopf--sekundaer:active{ background:var(--farbe-beige) }

.auf-marine .gr-knopf--primaer{ background:var(--farbe-gold-hell); color:var(--farbe-marine) }
@media (hover:hover){
  .auf-marine .gr-knopf--primaer:hover{ background:var(--farbe-beige) }
}
.auf-marine .gr-knopf--primaer:active{ background:var(--farbe-gold-hell) }
.auf-marine .gr-knopf--sekundaer{ color:var(--farbe-creme); border-color:var(--farbe-gold-hell) }
@media (hover:hover){
  .auf-marine .gr-knopf--sekundaer:hover{ background:var(--farbe-gold-hell); color:var(--farbe-marine) }
}

.gr-knopf[disabled],.gr-knopf[aria-disabled="true"]{
  background:var(--farbe-beige); border-color:transparent;
  color:var(--farbe-grau); cursor:not-allowed; transform:none;
}

@media (prefers-reduced-motion:reduce){
  .gr-knopf{ transition:none }
  .gr-knopf:active{ transform:none }
}
@media (hover:hover) and (prefers-reduced-motion:reduce){
  .gr-knopf:hover{ transform:none }
}

.gr-knopfgruppe{ display:flex; flex-wrap:wrap; gap:var(--sp-5); align-items:center }
.gr-knopfgruppe--mitte{ justify-content:center }
.gr-buehne .gr-knopfgruppe{ justify-content:center }

/* --- Logo ------------------------------------------------ */

.nic-logo{ display:block; width:100%; height:auto }
.gr-fuss .nic-logo{ width:120px }
.gr-fuss .nic-logo__zeile{ display:none }   /* unter 160px, P-15 */

/* --- Fuss ------------------------------------------------ */

/* Der Fuss folgt der Achse der Schlusskarte darueber. Bis p.030
   stand er linksbuendig unter einer zentrierten Sektion - der Bruch
   lag genau am Seitenende. Alle vier Bloecke sind kurz (Logo,
   vierzeilige Anschrift, Verweisreihe, eine Creditzeile), zentriert
   ist hier also kein Flattersatz im Fliesstext. */
.gr-fuss{ font-size:var(--grad-klein); text-align:center }
/* Ohne das behaelt jeder Absatz --breite-lesen und zentriert seinen
   Text INNERHALB dieses Kastens - die Creditzeile sass dadurch auf
   Mitte 364 statt 720. */
.gr-fuss p{ max-width:none }
.gr-fuss ul{
  list-style:none; margin:var(--sp-5) 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--sp-3) var(--sp-6);
}
.gr-fuss a{ display:inline-flex; align-items:center; min-height:var(--ziel-touch) }

/* --- Platzhalter · v1.4 P-08 -----------------------------
   Muessen stoeren. Magenta auf Creme 4,53:1; auf Marine waere
   es 2,85:1 - deshalb bleibt der Kasten auch dort hell. Ein
   heller Kasten auf dunklem Grund ist zugleich das, was P-08
   verlangt: auf den ersten Blick erkennbar. */

.gr-platzhalter{
  position:relative; display:block;
  background:var(--farbe-creme);
  color:var(--farbe-marine);
  border:2px dashed var(--farbe-eyedee-herz);
  border-radius:var(--radius-klein);
  padding:var(--sp-4);
  margin-bottom:var(--sp-5);
  text-align:left;
}
.gr-platzhalter::before{
  content:"PLATZHALTER · " attr(data-quelle);
  display:block;
  font-family:var(--schrift-sans);
  font-size:var(--grad-klein);
  font-weight:600; letter-spacing:.08em;
  color:var(--farbe-eyedee-herz);
  margin-bottom:var(--sp-2);
}
.gr-platzhalter p{ font-size:var(--grad-klein); max-width:none }
.auf-marine .gr-platzhalter p{ color:var(--farbe-marine) }
.auf-marine .gr-platzhalter .gr-klein{ color:var(--farbe-grau) }

/* EINE Stelle zum Abschalten (v1.4 P-08, P-29) */
html.ohne-platzhalter .gr-platzhalter{ display:none }
/* Der Kasten faellt weg, sein Behaelter behaelt sonst seinen
   Aussenabstand: gemessen 160px leerer Raum unter dem Preisbereich,
   wo nichts mehr steht. */
html.ohne-platzhalter .gr-randnotizen{ display:none }

/* --- Erster Bildschirm auf kleinen Anzeigen ---------------
   P-28: der Primaerbutton steht im ersten Bildschirm, bei
   1440 x 900 UND bei 390 x 844.

   Bei 390 liefert --grad-hero 47,4px. Der Innencontainer ist
   dort 342px breit; "Dein Tag ist vorbei." misst bei 47,4px
   rund 474px und bricht selbst um. Zusammen mit dem festen
   Umbruch werden daraus fuenf Zeilen, 265px, und der Button
   rutscht 112px unter die Kante.

   Auf --grad-h2 gedeckelt (33,4px) passt der erste Satz in
   eine Zeile, der zweite in zwei - drei Zeilen statt fuenf.
   Kein neuer Wert: die naechste Stufe derselben Leiter. */

@media (max-width:760px){
  .gr-kopf{ padding-block:var(--sp-3) }
  .gr-kopf .nic-logo{ width:120px }
  .gr-kopf .nic-logo__zeile{ display:none }

  .gr-buehne{ padding-block:var(--sec-s) }
  .gr-buehne .gr-claim{ width:min(100%, 20rem) }
  .gr-vorspann{ margin-top:var(--sp-7) }
}

/* ==========================================================
   Gezeichnete Bildelemente · v1.6 K-10
   Die Formen liegen in doku/pruefstand/bildelemente.py, die
   Farbe kommt hier: Gold auf Creme, Gold-hell auf Marine.
   ========================================================== */

.gr-motiv,.gr-symbol,.gr-pfeil,.gr-unterstrich,.gr-feder,.gr-uebergang{
  color:var(--farbe-gold);
}
.auf-marine .gr-motiv,.auf-marine .gr-symbol,.auf-marine .gr-pfeil,
.auf-marine .gr-unterstrich,.auf-marine .gr-feder,.auf-marine .gr-uebergang{
  color:var(--farbe-gold-hell);
}

/* --- Leitmotiv, angeschnitten am Rand --------------------
   Sehr zurueckgenommen. K-10: kein Element liegt hinter
   Fliesstext mit mehr als 8 % Deckkraft - hier 7 %.
   Das Motiv ragt bewusst ueber den Sektionsrand hinaus und
   wird von overflow:hidden angeschnitten; damit entsteht kein
   waagerechtes Rollen. */

.gr-motivflaeche{ position:relative; overflow:hidden }
.gr-motiv{
  position:absolute;
  width:min(46rem, 78vw);
  height:auto;
  opacity:.07;
  pointer-events:none;
}
.gr-motiv--knaeuel{ top:-8%; right:-14% }
.gr-motiv--wellen{ top:-16%; right:-18% }
@media (max-width:1000px){
  .gr-motiv{ width:min(30rem, 92vw); opacity:.05 }
}

/* --- Symbole ueber den Buchstabenkreisen · K-03 ---------- */

.gr-modell__symbol{
  display:block;
  width:var(--sp-7);
  margin:0 auto var(--sp-4);
}
.gr-modell__symbol svg{ display:block; width:100%; height:auto }

/* --- Pfeile im Ablauf · K-04 ----------------------------- */

.gr-stufen__pfeil{ display:none }
.gr-stufen__pfeil svg{ display:block; width:100%; height:auto }
@media (min-width:1001px){
  .gr-stufen__pfeil{
    display:block;
    align-self:start;
    margin-top:var(--sp-8);
  }
  /* Beide Pfeile gleich breit. Vorher 80 % und 100 % derselben
     Spalte, gemessen 77 gegen 96 Pixel. */
  .gr-stufen__pfeil{ width:100%; justify-self:center }
}

/* --- Auszeichnung im Statement · K-10 -------------------- */

.gr-betont{ position:relative; white-space:nowrap }
.gr-unterstrich{
  position:absolute;
  left:-2%; bottom:-.34em;
  width:104%;
  height:auto;
  color:var(--farbe-gold-hell);
}

/* --- Feder als Signatur · K-10 --------------------------- */

/* Seit p.033 ist das der Originalpfad aus der Logodatei und nicht
   mehr eine Nachzeichnung. Die echte Feder ist mit einem
   Seitenverhaeltnis von 0,265 deutlich schlanker als die alte
   Zeichnung (0,556): bei --sp-7 Breite waere sie 181 px hoch
   geworden. Ueber --sp-6 kommt sie auf 121 px und bleibt damit in
   der Groessenordnung der alten Signatur. */
.gr-feder{
  display:block;
  width:var(--sp-6);
  margin:var(--sp-8) auto 0;
  height:auto;
  opacity:.85;
}

/* --- Sektionsuebergang · K-10 ---------------------------- */

.gr-uebergangszeile{ display:flex; justify-content:center }
.gr-uebergang{ width:33%; height:auto }


/* ==========================================================
   Ausrichtung · v1.6 K-09
   Alle Sektionen teilen denselben Innencontainer mit
   identischem Seitenabstand. Kein Block bekommt eigene
   Randwerte - deshalb steht der Seitenabstand AUSSCHLIESSLICH
   an .gr-huelle und nirgends sonst.
   ========================================================== */

/* Linksbuendige Bloecke beginnen an derselben senkrechten
   Kante, sektionsuebergreifend: sie sitzen alle in .gr-huelle
   und ziehen ihre Breite aus --breite-lesen, nicht aus eigenen
   Randwerten. */
.gr-spalte-text > *,
.gr-schmal > *,
.gr-portraet__text > *{ margin-inline:0 }

/* Zentrierte Bloecke werden auf den CONTAINER zentriert, nicht
   auf ihre eigene Inhaltsbreite. */
.gr-mitte > *{ margin-inline:auto }

/* Icon-Text-Kombinationen: das Icon sitzt optisch an der ersten
   Textzeile, nicht am Blockrahmen. Bei --grad-text und
   --zeile-weit liegt die Mitte der ersten Zeile bei .85em. */
.gr-nutzen li::before,
.gr-enthalten li::before{ top:.62em }

/* Mehrspaltige Bereiche haben eine gemeinsame Oberkante. */
.gr-zwei-spalten,
.gr-stufen,
.gr-modell,
.gr-nutzen,
.gr-enthalten{ align-items:start }

/* Buttons werden optisch zentriert, nicht rechnerisch: bei
   Versalabstand traegt der Text rechts einen zusaetzlichen
   Zwischenraum, der links fehlt. Der Ausgleich ist halb so
   gross wie der Versalabstand. */
.gr-knopf{ text-indent:.02em }

/* ==========================================================
   Rechtstexte · v1.7
   Eigene Seite, dieselbe Huelle. Anrede "Sie", abweichend vom
   Du der Landingpage - das steht im Text, nicht im CSS.
   ========================================================== */

.gr-rechtstext__titel{
  font-size:var(--grad-h1);
  letter-spacing:-.015em;
  margin-bottom:var(--sp-5);
}
.gr-rechtstext .gr-einleitung{ margin-bottom:var(--sektion-y) }

.gr-rechtsabschnitt{ margin-bottom:var(--sp-8) }
.gr-rechtsabschnitt h2{
  font-size:var(--grad-h3);
  margin-bottom:var(--sp-4);
}
.gr-rechtsabschnitt p,
.gr-rechtsabschnitt li{ max-width:var(--breite-lesen) }

.gr-rechtsliste{ margin:0 0 var(--sp-5) var(--sp-5); padding:0 }
.gr-rechtsliste li{ margin-bottom:var(--sp-2) }

.gr-anschrift{ line-height:var(--zeile-weit) }

/* Luecken im Fliesstext. Wie die Platzhalterkaesten magenta -
   ein Rechtstext mit unbemerkter Luecke ist gefaehrlicher als
   eine fehlende Seite (P-20). */
.gr-luecke{
  color:var(--farbe-eyedee-herz);      /* 4,53:1 auf Creme */
  border-bottom:2px dashed var(--farbe-eyedee-herz);
  font-weight:600;
  white-space:nowrap;
}
.gr-luecke::before{ content:"[" }
.gr-luecke::after{ content:"]" }
/* Abgeschaltet verliert die Luecke ihre Signalfarbe - die eckigen
   Klammern bleiben. Ohne sie stuende in der Datenschutzerklaerung
   "E-Mail: E-Mail-Adresse", also eine Luecke, die wie Inhalt
   aussieht. Das ist schlimmer als eine, die man sieht: der Anwalt,
   der die Seite prueft, findet die Klammern, den Fliesstext
   ueberliest er. */
html.ohne-platzhalter .gr-luecke{
  color:inherit; border-bottom:0; font-weight:inherit;
}

/* --- Preishinweis · v1.7 --------------------------------- */

/* A-10: die Zeile steht UNTER dem Preis auf der Mittelachse,
   nicht am linken Rand. Sie war von der K-06-Regel erfasst, die
   Fliesstext in zentrierten Bloecken linksbuendig setzt - fuer
   eine einzeilige Angabe unter dem Preis ist das falsch. */
.gr-preis__hinweis{
  font-size:var(--grad-klein);
  color:var(--farbe-beige);            /* 10,45:1 auf Marine */
  text-align:center;
  max-width:var(--breite-mittel);
  margin:calc(var(--sp-6) * -1) auto var(--sp-7);
}

/* --- Fussangaben und Cookie-Schalter · v1.7 -------------- */

/* Schlusskarte und Fuss sind beide marine; ihre beiden
   Innenabstaende stossen aneinander und ergaben 241 px, in denen
   nichts steht und nichts den Uebergang markiert. Der Haarstrich
   macht aus der Leere einen Abstand - dieselbe Geste wie an der
   Vertrauens- und der Zusatzzeile. */
.gr-fuss{ border-top:var(--hair) solid var(--farbe-gold) }
/* Das Logo ist ein Blockelement mit fester Breite; text-align
   zentriert nur seinen Inhalt, nicht den Kasten. */
.gr-fuss .nic-logo{ margin-inline:auto }

.gr-fuss__anschrift{
  line-height:var(--zeile-weit);
  margin-bottom:var(--sp-5);
}
.gr-fuss__anschrift a{ color:var(--farbe-gold-hell) }   /* 6,56:1 */

/* Der Schalter sieht aus wie die Nachbarverweise, ist aber ein
   button - er navigiert nicht, er oeffnet ein Fenster. Ein
   <a href="#"> waere hier eine Luege gegenueber der Tastatur
   und dem Vorleseprogramm. */
.gr-cookie{
  display:inline-flex; align-items:center;
  min-height:var(--ziel-touch);
  background:none; border:0; padding:0;
  font-family:var(--schrift-sans);
  font-size:inherit;
  color:var(--farbe-gold-hell);        /* 6,56:1 auf Marine */
  text-decoration:underline;
  text-decoration-thickness:var(--hair);
  text-underline-offset:.2em;
  cursor:pointer;
}
@media (hover:hover){
  .gr-cookie:hover{ color:var(--farbe-creme) }
}

/* ==========================================================
   Lightbox fuer Rechtstexte
   Der Verweis im Fuss bleibt ein Link auf eine echte Seite;
   das Skript faengt den Klick nur ab, wenn es das Fenster
   auch oeffnen kann. Faellt es aus, oeffnet die Seite.
   ========================================================== */

.gr-lightbox{
  /* --breite-mittel wie jeder andere zentrierte Block (A-01).
     Der Text darin bleibt auf --breite-lesen. */
  width:min(var(--breite-mittel), 100% - var(--sp-6) * 2);
  max-width:none;
  padding:0;
  border:0;
  border-radius:var(--radius-karte);
  background:var(--farbe-creme);
  color:var(--farbe-marine);
  box-shadow:var(--sh-3);
  /* Kanon 5.6: dvh mit vh davor als Rueckfallebene. Mit 100vh
     allein steht der untere Rand auf Telefonen unter der
     eingeblendeten Browserleiste. */
  max-height:calc(100vh - var(--sp-7) * 2);
  max-height:calc(100dvh - var(--sp-7) * 2);
  overflow:hidden;
}
/* display GEHOERT an [open] und nicht an die Klasse. Die
   Browserregel fuer ein geschlossenes dialog lautet
   dialog:not([open]){display:none} - eine Elementregel. Eine
   Klassenregel schlaegt sie. Mit display:flex an .gr-lightbox
   standen alle vier Rechtstexte offen im Fluss am Seitenende:
   gemessen 4 x 804px, zusammen 3216px, ein Viertel der ganzen
   Seite. Sichtbar wurde das erst auf der Gesamtaufnahme - beim
   Messen hatte ich immer nur den Zustand NACH dem Oeffnen
   angesehen. */
.gr-lightbox[open]{
  display:flex;
  flex-direction:column;
}
.gr-lightbox::backdrop{
  background:rgba(var(--marine-rgb), .62);
}

.gr-lightbox__leiste{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-5);
  padding:var(--sp-5) var(--sp-6);
  border-bottom:var(--hair) solid var(--hairline);
  background:var(--farbe-creme);
}
.gr-lightbox__titel{
  font-size:var(--grad-h3);
  margin:0;
}

.gr-lightbox__zu{
  /* Kanon 5.3: 52px, nicht 44. Der Knopf sitzt oben rechts,
     also genau dort, wo der Daumen ihn am schlechtesten
     trifft - da zaehlt jeder Millimeter. */
  flex:0 0 auto;
  width:var(--ziel-touch);
  height:var(--ziel-touch);
  display:grid;
  place-items:center;
  padding:0;
  border:var(--hair) solid var(--hairline);
  border-radius:var(--radius-pille);
  background:transparent;
  color:var(--farbe-marine);
  cursor:pointer;
  transition:background-color var(--dur-1) ease;
}
.gr-lightbox__zu svg{ width:1.25rem; height:1.25rem }
@media (hover:hover){
  .gr-lightbox__zu:hover{ background:var(--hairline) }
}
@media (prefers-reduced-motion:reduce){
  .gr-lightbox__zu{ transition:none }
}

.gr-lightbox__inhalt{
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:var(--sp-6);
  -webkit-overflow-scrolling:touch;
}
.gr-lightbox__inhalt .gr-einleitung{ margin-bottom:var(--sp-7) }
.gr-lightbox .gr-rechtsabschnitt h3{
  font-size:var(--grad-h3);
  margin-bottom:var(--sp-4);
}
.gr-lightbox .gr-rechtsabschnitt p,
.gr-lightbox .gr-rechtsabschnitt li{ max-width:var(--breite-lesen) }
.gr-lightbox__abgang{ margin-top:var(--sp-7) }

/* Muster-Widerrufsformular. Es ist ein Formular zum Abschreiben,
   kein ausfuellbares - deshalb ein abgesetzter Kasten und keine
   Eingabefelder. Die Zeilen stehen weiter auseinander als
   Fliesstext, damit man sie ausgedruckt beschreiben kann. */
.gr-formularkasten{
  border:var(--hair) solid var(--hairline);
  border-radius:var(--radius-klein);
  padding:var(--sp-6);
  margin-top:var(--sp-5);
  max-width:var(--breite-lesen);
}
.gr-formularkasten p{
  margin-bottom:var(--sp-6);
  border-bottom:var(--hair) solid var(--hairline);
  padding-bottom:var(--sp-2);
}
.gr-formularkasten p:last-child{
  margin-bottom:0; border-bottom:0; padding-bottom:0;
}

/* ==========================================================
   Klickfuehrung und Anmutung · v1.9
   ========================================================== */

/* --breite-lesen ist in em angegeben und misst deshalb je
   Schriftgrad eine andere Pixelbreite: 34em sind bei --grad-text
   710px, bei --grad-h3 aber 1020. Die Einleitung in S-04 sass
   dadurch auf Kante 210 - eine Kante, die es sonst nirgends gibt.
   In einer zentrierten Sektion nimmt sie --breite-mittel, damit
   sie auf 272 steht wie Nutzenliste und Statement. */
.gr-mitte .gr-einleitung{ max-width:var(--breite-mittel) }

/* --- S-12 Die Folgen ------------------------------------- */
/* Der Seite fehlte ein Hoehepunkt: alle Sektionen etwa gleich hoch,
   gleich dicht, gleich laut. Dieser Abschnitt ist bewusst der
   lauteste nach dem Hero - grosser Grad, viel Luft, nichts sonst
   darin. Er steht unmittelbar vor dem Preis. */
.gr-folgen__satz{
  font-family:var(--schrift-serif);
  font-size:var(--grad-h3);
  line-height:var(--zeile-weit);
  color:var(--farbe-beige);            /* 10,45:1 auf Marine */
  max-width:var(--breite-mittel);
  margin:0 auto var(--sp-6);
  text-wrap:balance;
}
.gr-folgen__schluss{
  font-family:var(--schrift-serif);
  font-size:var(--grad-statement);
  line-height:var(--zeile-eng);
  letter-spacing:-.015em;
  color:var(--farbe-creme);            /* 13,86:1 auf Marine */
  max-width:var(--breite-mittel);
  margin:var(--sp-8) auto 0;
  text-wrap:balance;
}

/* --- E-02 Zielgruppenzeile im Hero ----------------------- */
.gr-zielgruppe{
  font-size:var(--grad-klein);
  color:var(--farbe-gold-hell);        /* 6,56:1 auf Marine */
  /* Kein negativer Abstand: er waere der fuenfzehnte Wert der
     Leiter (Kanon 5.1, zulaessig sind 14). Die Zeile ruecht
     stattdessen mit einer Leiterstufe an die Formatzeile. */
  margin:var(--sp-3) auto var(--sp-6);
  max-width:var(--breite-mittel);
}

/* --- E-05 Vertraulichkeitszeile -------------------------- */
/* "gedaempft" heisst leiser, nicht unlesbar: auf Marine
   --farbe-beige mit 10,45:1, auf Creme --farbe-grau mit
   6,29:1. Beides deutlich ueber den 4,5:1 aus v1.2. */
/* MELDEPFLICHTIG (v2.0): geteilte Klasse, sie steht in S-01,
   S-05, S-09 und S-11. Wie die Zusatzzeile auf die
   Containerkante gebracht - in S-05 war sie sonst der zweite
   Block auf Kante 272. Sichtbar aendert sich nur die Umbruch-
   breite; der Satz passt so wie so in eine Zeile. */
.gr-vertraulich{
  font-size:var(--grad-klein);
  color:var(--farbe-grau);              /* 6,29:1 auf Creme */
  margin:var(--sp-4) 0 0;
  max-width:none;
  text-align:center;
}
/* v2.0 D-01: Auf Marine stand die Zeile in --farbe-beige mit
   10,45:1 und war damit HELLER als die Zielgruppenzeile darueber
   (Gold-hell, 6,56:1) - die Hierarchie stand auf dem Kopf. Der
   gedaempfte Ton misst 4,68:1: leiser als Gold-hell und ueber der
   Schwelle aus v1.2. */
.auf-marine .gr-vertraulich{ color:var(--farbe-gedaempft) }

/* --- E-06 Zeile zur Bindung ------------------------------ */
.gr-bindung{
  font-size:var(--grad-klein);
  color:var(--farbe-beige);            /* 10,45:1 auf Marine */
  margin:var(--sp-5) auto 0;
  max-width:var(--breite-mittel);
}

/* --- E-01 Vertrauensband unter dem Hero ------------------ */
/* Abschluss der Buehne, keine eigene Sektion: deshalb sitzt es
   in S-01 und traegt nur einen oberen Innenabstand. Die Zeile
   bricht auf schmalen Anzeigen um, sie rollt nicht. */
.gr-vertrauensband{
  margin:var(--sektion-y) 0 0;
  padding:var(--sp-5) var(--sp-6);
  border-top:var(--hair) solid var(--farbe-gold);
  max-width:none;
  text-align:center;
  text-transform:uppercase;
  font-size:var(--grad-klein);
  letter-spacing:.12em;
  line-height:var(--zeile-weit);
  /* v1.9 nennt Deckkraft 0,8. Als opacity gerechnet ergibt das
     ueber Marine rgb(164 142 114) und damit 4,68:1 statt der
     6,56:1 von Gold-hell - ueber der Schwelle aus v1.2, aber
     knapp. Gebaut ist die Mischfarbe direkt statt opacity: der
     Wert ist damit messbar und verschiebt sich nicht, wenn
     spaeter etwas am Hintergrund geaendert wird. Seit p.027
     steht er als Token, weil die Vertraulichkeitszeile denselben
     gedaempften Ton braucht. */
  color:var(--farbe-gedaempft);        /* 4,68:1 auf Marine */
}

/* --- E-04 Textlinks -------------------------------------- */
.gr-textlink__zeile{
  margin:var(--sp-8) 0 0;
  max-width:none;
  text-align:inherit;
}
.gr-textlink{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  min-height:var(--ziel-touch);        /* Kanon 5.3 */
  font-family:var(--schrift-sans);
  font-size:var(--grad-text);
  font-weight:600;
  color:var(--farbe-gold-text);        /* 4,79:1 auf Creme */
  text-decoration:none;
  /* Gezeichnete Unterstreichung im Stil aus v1.6: eine Linie,
     die unter der Schrift durchlaeuft, kein text-decoration. */
  background-image:linear-gradient(currentColor, currentColor);
  background-repeat:no-repeat;
  background-size:100% 1px;
  background-position:0 calc(100% - .7em);
}
.auf-marine .gr-textlink{ color:var(--farbe-gold-hell) }   /* 6,56:1 */
.gr-textlink__pfeil{
  width:1.5rem; height:.75rem;
  flex:0 0 auto;
  transition:transform var(--dur-2) ease;
}
@media (hover:hover){
  /* E-04: beim Ueberfahren wandert nur der Pfeil, vier Pixel. */
  .gr-textlink:hover .gr-textlink__pfeil{ transform:translateX(4px) }
}
.gr-textlink:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  .gr-textlink__pfeil{ transition:none }
}

/* --- E-03 Mitlaufende Buchungsleiste --------------------- */
.gr-buchungsleiste{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:40;
  background:var(--farbe-marine);
  border-top:var(--hair) solid var(--farbe-gold);
  /* Kanon 5.24: auf Telefonen mit Gestenleiste sitzt sonst der
     Knopf unter der Systemleiste. */
  padding-bottom:env(safe-area-inset-bottom, 0);
  opacity:0;
  transform:translateY(12px);
  /* v1.9 nennt 240ms. Die Leiter kennt .15s und .3s (Kanon 13.6,
     Tokenquote 90 %). Gebaut ist --dur-2, also 300ms - wie beim
     Knopfverhalten aus E-10, das 280ms nennt. Zwei Rohwerte
     haetten die Quote auf 82 % gedrueckt. */
  transition:opacity var(--dur-2) ease, transform var(--dur-2) ease;
  pointer-events:none;
}
.gr-buchungsleiste.ist-da{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.gr-buchungsleiste__inhalt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-5);
  /* v1.9 nennt 64px auf dem Desktop und 56 auf schmalen
     Anzeigen. Kein zusaetzlicher Innenabstand: der Knopf misst
     52px (Kanon 5.3, nicht verhandelbar), mit Polsterung kaeme
     die Leiste auf 70 statt 64. So bestimmt die Mindesthoehe
     die Leiste und der Knopf sitzt mittig darin. */
  min-height:56px;
}
.gr-buchungsleiste__format{
  margin:0;
  max-width:none;
  font-size:var(--grad-klein);
  color:var(--farbe-beige);            /* 10,45:1 auf Marine */
}
.gr-buchungsleiste .gr-knopf{ min-height:var(--ziel-touch); flex:0 0 auto }
@media (min-width:761px){
  .gr-buchungsleiste__inhalt{ min-height:64px }
}
@media (max-width:760px){
  /* Unter 720px nur der Knopf, ueber die volle Breite. Die
     Formatzeile steht dort ohnehin im ersten Bildschirm. */
  .gr-buchungsleiste__format{ display:none }
  .gr-buchungsleiste__inhalt{ padding-inline:var(--sp-5) }
  .gr-buchungsleiste .gr-knopf{ flex:1 1 auto }
}
@media (prefers-reduced-motion:reduce){
  .gr-buchungsleiste{ transition:none; transform:none }
}

/* --- E-08 Papierstruktur --------------------------------- */
/* feTurbulence als Datei-URI, gekachelt, Deckkraft 3 %. Die
   Struktur liegt HINTER dem Text (z-index 0 gegen auto) und
   veraendert die Textfarbe nicht - gepruefte Kontrastwerte aus
   v1.2 bleiben, weil nichts ueber der Schrift liegt. */
body{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat:repeat;
}
/* Auf Marine nicht: die Marineflaechen tragen ihre eigene
   Hintergrundfarbe und decken die Struktur damit ab. */