/* =========================================================================
   DACHUNTERNEHMEN — Design System
   Ein Stylesheet. Kein Framework. Keine externen Requests.

   Aufbau
   1. Tokens          6. Abschnitte
   2. Grundlagen      7. Bausteine
   3. Typografie      8. Portfolio
   4. Kopfzeile       9. Fusszeile
   5. Hero           10. Bewegung & Ausnahmen
   ========================================================================= */

/* --- Schriften ------------------------------------------------------------
   Drei Familien, alle unter der SIL Open Font License, alle vom eigenen
   Server (Lizenztexte unter /assets/fonts/):

   Instrument Serif  die Ueberschriften. Eine Antiqua gibt einer Aussage
                     Gewicht und Dauer — im bekanntesten Versuch dazu
                     (Errol Morris, New York Times, rund 45 000 Teilnehmer)
                     wurde derselbe Satz in einer klassischen Antiqua
                     haeufiger geglaubt als in jeder anderen Schrift. Und
                     sie unterscheidet die Seite von den vielen, die alle
                     dieselbe Grotesk tragen. Nur ein Schnitt: Ueberschriften
                     stehen deshalb in 400, nie fett — sonst setzt der
                     Browser eine falsche Fette.
   Geist             Text und Bedienung. Am Bildschirm macht Serife oder
                     nicht beim Lesen keinen messbaren Unterschied; der Text
                     soll klar und ruhig sein, und Geist ist fuer kleine
                     Groessen am Bildschirm gezeichnet.
   Geist Mono        alles, was gemessen ist: Kennzahlen, Nummern, Adressen.

   latin traegt Deutsch und Englisch vollstaendig (ä, ö, ü, ß, €, „“);
   latin-ext laedt der Browser nur, wenn ein Zeichen daraus vorkommt.
   font-display: swap — der Text steht sofort, die Schrift folgt. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-mono-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-mono-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
  /* Farben — tiefe Basis, zwei Lichter.

     Das erste Licht ist Champagner und gehoert der Marke: Es steht im
     Zeichen, im Wortbild, in den Ueberschriften. Das zweite ist kuehl und
     gehoert der Bedienung: Fokus, Zustaende, alles, was gerade laeuft. Ein
     Haus aus warmem Licht, in dem kalte Anzeigen leuchten — daher kommt
     der Eindruck von Technik, nicht aus mehr Farbe.

     Die Basis ist dunkler als zuvor und kaum noch blau: Auf tieferem
     Grund wirken beide Lichter heller, ohne dass sie kraeftiger werden
     muessten. */
  --ink:         #07090C;   /* Basis */
  --ink-raised:  #0E1219;   /* angehobene Flaeche, Karten */
  --ink-deep:    #040507;   /* abgesenkt, Fusszeile */
  --line:        #1D242F;   /* Haarlinie auf dunklem Grund */
  --line-soft:   #131922;   /* Haarlinie, kaum sichtbar */

  --gold:        #E4C489;   /* Akzent der Marke */
  --prisma-ink:  #93A8FF;   /* Schriftton zum Prisma-Zeichen */
  --gold-bright: #FFE6B6;   /* Akzent, angehoben (Hover) */
  --gold-dim:    #8E7847;   /* Akzent, gedaempft */

  --puls:        #6FE0FF;   /* Akzent der Bedienung: Fokus, Zustaende */
  --puls-dim:    #2E6E85;   /* derselbe, gedaempft */

  --text:        #F3F5F8;   /* Fliesstext auf dunklem Grund */
  --text-strong: #FFFFFF;   /* Ueberschriften */
  --text-muted:  #A3ACB9;   /* Beiwerk, Bildunterschriften */
  /* 4.66:1 auf der Grundflaeche — die tiefere Basis hat den alten Wert
     unter AA gedrueckt, report.py hat es gemeldet. */
  --text-faint:  #737B87;   /* Randnotizen, Platzhalterhinweise */

  /* Drei Farben als Zahlentripel statt als Wert. Sie stehen ueberall dort,
     wo eine halbdurchsichtige Schicht gebraucht wird — und genau die
     mussten beim hellen Thema umgedreht werden koennen:

       --film   die aufliegende Schicht (auf dunklem Grund hell,
                auf hellem Grund dunkel): Haarlinien, Schleier, Kanten
       --grund  die Grundflaeche der Seite, fuer Glas und Verlaeufe
       --szene  der Grund der Kopfszene. Der bleibt in BEIDEN Themen
                dunkel: Die gerechnete Szene zeichnet Licht additiv, und
                additives Licht auf Weiss ist unsichtbar. Der Kopf ist
                deshalb auch am Tag ein dunkles Band — nicht aus Trotz,
                sondern weil das Bild sonst keines waere.
  */
  --film:  243, 245, 248;
  --grund: 7, 9, 12;
  --szene: 12, 14, 17;

  /* Typografie — Systemschriften, damit keine Datei von fremden Servern
     nachgeladen wird.

     Vorher stand hier eine alte Antiqua. Sie war schoen und sie war das
     Falsche: Sie liess ein Haus, das Software baut, aussehen wie eine
     Anwaltskanzlei. Jetzt traegt die ganze Seite dieselbe enge Grotesk,
     dicht gesetzt und mit negativer Laufweite in den grossen Graden —
     die Schrift, in der heute Werkzeuge beschriftet werden.

     Dazu eine Schreibmaschinenschrift fuer alles, was gemessen ist:
     Nummern, Zustaende, Kennzahlen, das Schriftfeld. Zahlen in der
     Textschrift tanzen; hier stehen sie in Reih und Glied.

     Zum Austausch gegen selbst gehostete Schriften: @font-face oben
     ergaenzen und hier die erste Familie ersetzen. Sonst aendert sich
     nichts. */
  --font-serif:   'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype',
                  Georgia, serif;
  --font-display: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Geist', system-ui, -apple-system, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', SFMono-Regular,
                  Menlo, Consolas, 'Liberation Mono', monospace;

  /* Skala — fluid ueber clamp(), keine Breakpoint-Spruenge */
  /* Die enge Grotesk traegt bei gleicher Punktzahl deutlich mehr als die
     alte Antiqua: 7rem sprengten die Zeile in drei Teile. */
  --fs-hero:  clamp(2.7rem, 6.4vw, 5.4rem);
  --fs-h1:    clamp(2.25rem, 5.2vw, 4rem);
  --fs-h2:    clamp(1.7rem, 3.3vw, 2.6rem);
  --fs-h3:    clamp(1.15rem, 1.9vw, 1.45rem);
  --fs-lead:  clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.7rem;
  --fs-numeral: clamp(2.5rem, 5vw, 3.75rem);

  /* Rhythmus */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.875rem;
  --space-sm:  1.25rem;
  --space-md:  2rem;
  --space-lg:  3.5rem;
  --space-xl:  6rem;
  --space-2xl: 7.5rem;

  /* Masse */
  --wrap:        1280px;
  --wrap-text:   720px;
  --wrap-mid:    980px;
  --gutter:      clamp(1.25rem, 5vw, 4rem);
  --header-h:    5rem;
  --radius:      2px;

  /* Bewegung — langsam und knapp, nie federnd. Eleganz kommt aus
     Zurueckhaltung, nicht aus Effekten. */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:    160ms;
  --dur:         320ms;
  --dur-slow:    720ms;
}

/* --- Die Suche -----------------------------------------------------------
   Eine Tafel ueber der Seite, kein eigenes Fenster: Wer sucht, will nicht
   die Seite verlassen, auf der er steht. Sie liegt ueber allem, nimmt die
   Tastatur an und gibt sie beim Schliessen zurueck.

   Der Knopf sieht aus wie der Themaschalter daneben — beide sind Werkzeuge
   der Bedienung und keine Inhalte, und zwei verschiedene Formen fuer
   dieselbe Sache waeren zwei Erklaerungen statt einer. */
.suchknopf {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.suchknopf:hover { color: var(--puls); border-color: var(--puls-dim); }
.suchknopf__wort { display: none; }

.suchknopf--schublade {
  width: auto;
  height: auto;
  justify-items: start;
  grid-auto-flow: column;
  gap: .7em;
  border: 0;
  border-top: 1px solid var(--line-soft);
  text-align: left;
}

.suchknopf--schublade .suchknopf__wort {
  display: inline;
  font-family: var(--font-mono);
}

@media (max-width: 760px) {
  .header__side .suchknopf { display: none; }
}

/* WICHTIG: display muss hinter [hidden] zurueckstehen. Ein eigenes display
   auf demselben Element schlaegt das display:none, das der Browser fuer
   [hidden] setzt — die Tafel war damit unsichtbar UND lag trotzdem als
   ganzflaechige Schicht ueber der Seite. Kein Knopf darunter liess sich
   mehr druecken, und man sah nicht, warum. */
.suche[hidden] { display: none; }

.suche {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: clamp(1rem, 9vh, 6rem) var(--gutter) var(--gutter);
}

.suche__schirm {
  position: absolute;
  inset: 0;
  background: rgba(var(--grund), 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.suche__tafel {
  position: relative;
  width: min(100%, 42rem);
  background: var(--ink-raised);
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -50px rgba(var(--film), .9);
  padding: var(--space-md);
}

.suche__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
}

.suche__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.suche__zu {
  background: none;
  border: 0;
  padding: 0 .2em;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

.suche__zu:hover { color: var(--text-strong); }

.suche__eingabe {
  width: 100%;
  padding: .7rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.suche__eingabe:focus { outline: none; border-bottom-color: var(--puls); }
.suche__eingabe::placeholder { color: var(--text-faint); }

/* Das eingebaute Kreuz des Browsers traegt seine eigene Farbe und sitzt
   neben unserem — zwei Kreuze fuer dieselbe Sache. Escape und der Knopf
   oben rechts reichen. */
.suche__eingabe::-webkit-search-cancel-button,
.suche__eingabe::-webkit-search-decoration { -webkit-appearance: none; }

.suche__stand {
  margin: var(--space-2xs) 0 0;
  font-size: var(--fs-small);
  color: var(--text-faint);
}

.suche__liste {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
  max-height: min(52vh, 26rem);
  overflow-y: auto;
}

.suche__treffer a {
  display: grid;
  /* Dritte Spalte fuer das Bildschirmfoto eines Produkts. Sie ist auto
     breit und bleibt bei allen anderen Treffern leer — dadurch stehen
     Art und Titel in jeder Zeile an derselben Stelle. */
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--space-sm);
  padding: .6rem 0;
  border-top: 1px solid var(--line-soft);
}

.suche__art {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: .25em;
}

.suche__titel { color: var(--text-strong); }

/* Das Kapitel sagt, WARUM diese Seite ein Treffer ist. Es steht deshalb
   unter dem Titel und nicht neben ihm. */
.suche__kapitel {
  grid-column: 2;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.suche__bild {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 4.5rem;
  height: auto;
  margin-right: .2rem;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  opacity: .82;
  transition: opacity var(--dur-fast) var(--ease);
}

.suche__treffer.ist-gewaehlt .suche__bild,
.suche__treffer a:hover .suche__bild { opacity: 1; }

.suche__treffer.ist-gewaehlt a,
.suche__treffer a:hover {
  background: rgba(var(--film), .05);
  box-shadow: inset 2px 0 0 var(--puls);
}

@media (max-width: 560px) {
  /* Eine Spalte fuer den Text, eine schmale fuer das Bild. Art, Titel und
     Kapitel muessen dabei ausdruecklich in die erste — sonst rutscht der
     Titel in die Bildspalte, und die waechst mit ihm ueber den Rand
     hinaus. */
  .suche__treffer a { grid-template-columns: minmax(0, 1fr) auto; }
  .suche__art { grid-column: 1; padding-top: 0; }
  .suche__titel { grid-column: 1; }
  .suche__kapitel { grid-column: 1; }
  .suche__bild { grid-column: 2; grid-row: 1 / span 3; width: 3.6rem; }
}

@media print { .suche, .suchknopf { display: none !important; } }


/* --- Der Umschalter -----------------------------------------------------
   Zwei Zeichen uebereinander, von denen immer genau eines zu sehen ist:
   Beim dunklen Thema die Sonne (weil sie das Ziel ist), beim hellen der
   Mond. Sie liegen im selben Feld, damit beim Wechsel nichts springt.

   Das Wort daneben steht nur in der Schublade — in der Kopfzeile ist der
   Platz knapp, und dort erklaert die Beschriftung fuer Vorleseprogramme
   den Knopf ohnehin. */
.thema {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.thema:hover { color: var(--puls); border-color: var(--puls-dim); }

.thema__zeichen { grid-area: 1 / 1; }
.thema__wort { display: none; }

/* Sichtbar ist immer das Zeichen des Ziels: dunkel -> Sonne, hell -> Mond. */
:root[data-thema="dunkel"] .thema__mond,
:root[data-thema="hell"] .thema__sonne { display: none; }

/* In der Schublade steht der Knopf in der Reihe der Links und traegt
   deshalb deren Form — mit Wort, ohne Kasten. */
.thema--schublade {
  width: auto;
  height: auto;
  justify-items: start;
  grid-auto-flow: column;
  gap: .7em;
  border: 0;
  border-top: 1px solid var(--line-soft);
  text-align: left;
}

.thema--schublade .thema__wort {
  display: inline;
  font-family: var(--font-mono);
}

@media (max-width: 760px) {
  /* In der Kopfzeile weicht er wie die Sprachwahl — beide stehen in der
     Schublade. */
  .header__side .thema { display: none; }
}

@media print { .thema { display: none; } }


/* -------------------------------------------------------------------------
   1b. Das helle Thema
   -------------------------------------------------------------------------

   Dieselbe Seite bei Tageslicht. Nicht die dunkle mit umgedrehten Farben —
   das gibt grau in grau —, sondern eine eigene Stimmung: kuehles Weiss mit
   einem Hauch Blau, Karten in reinem Weiss, die sich mit Schatten statt
   mit Linien abheben, und beide Lichter so weit abgedunkelt, dass sie auf
   Weiss noch tragen. Champagner auf Weiss waere unlesbar; hier steht ein
   dunkleres Gold, das dieselbe Farbe MEINT.

   Gesetzt wird das Thema ueber [data-thema="hell"] am html-Element. Wer
   umschaltet, bekommt es sofort; wer nichts tut, bekommt das, was sein
   Geraet sagt — beides entscheidet assets/js/thema.js, und zwar vor dem
   ersten Zeichnen, damit nichts aufblitzt.

   Ohne JavaScript bleibt es beim dunklen Thema. Das ist kein Mangel,
   sondern die Ausgangslage: Die Seite war immer dunkel und funktioniert
   so vollstaendig.
   ------------------------------------------------------------------------- */

:root[data-thema="hell"] {
  --ink:         #F5F7FA;
  --ink-raised:  #FFFFFF;
  --ink-deep:    #EAEEF4;
  --line:        #D5DCE6;
  --line-soft:   #E5EAF1;

  /* Champagner wird zu gebranntem Gold: 4,69:1 auf der Grundflaeche.
     Der helle Ton der Marke bleibt trotzdem erhalten, weil er im Zeichen,
     im Kopfband und in den Bildern weiter leuchtet. */
  --gold:        #8A6A24;
  --prisma-ink:  #3348E0;
  --gold-bright: #6E5316;
  --gold-dim:    #B79E63;

  --puls:        #0E7A99;
  --puls-dim:    #7EC6DC;

  --text:        #171C25;
  --text-strong: #05070B;
  --text-muted:  #4E5866;
  --text-faint:  #646D7A;

  /* Die aufliegende Schicht wird dunkel, die Grundflaeche hell. Alle
     Haarlinien, Schleier und Glasflaechen drehen sich damit mit, ohne dass
     eine einzige Regel doppelt geschrieben werden muesste. */
  --film:  10, 14, 22;
  --grund: 245, 247, 250;
}

/* Was auf dunklem Grund als Licht gedacht war, muss auf hellem Grund
   Schatten sein. Die folgenden Regeln drehen genau das um — mehr nicht. */

/* Das Korn ueber der Seite ist auf Weiss ein grauer Schleier. */
:root[data-thema="hell"] body::before { opacity: .35; }

/* Karten heben sich auf Weiss durch Schatten ab, nicht durch eine hellere
   Flaeche: Weiss auf Weiss sieht man nicht. */
:root[data-thema="hell"] .card,
:root[data-thema="hell"] .product,
:root[data-thema="hell"] .kachel {
  background-color: var(--ink-raised);
  background-image: none;
  box-shadow: 0 1px 2px rgba(var(--film), 0.05),
              0 12px 30px -22px rgba(var(--film), 0.35);
}

:root[data-thema="hell"] a.card:hover,
:root[data-thema="hell"] .product:hover,
:root[data-thema="hell"] .kachel:hover {
  box-shadow: 0 2px 4px rgba(var(--film), 0.06),
              0 26px 60px -30px rgba(var(--film), 0.45),
              0 0 34px -14px var(--akzent, rgba(138, 106, 36, 0.4));
}

/* Der volle Knopf traegt auf Weiss keinen Schein mehr — ein Leuchten auf
   hellem Grund ist ein Fleck. Er wird stattdessen dunkel und deckend.
   .btn.btn--solid, nicht nur .btn--solid: Die Regel fuer alle Knoepfe
   (dunkle Schrift) steht weiter unten mit gleicher Staerke und gewann
   sonst — weisse Flaeche war gemeint, heraus kam dunkle Schrift auf
   dunklem Knopf, etwa in der Leiste "Produkt oeffnen". */
:root[data-thema="hell"] .btn.btn--solid {
  background: linear-gradient(160deg, #1A2029, #0B0F16 70%);
  border-color: #0B0F16;
  color: #FFFFFF;
  box-shadow: 0 10px 26px -18px rgba(var(--film), 0.6);
}

:root[data-thema="hell"] .btn.btn--solid:hover { color: #FFFFFF; }
:root[data-thema="hell"] .btn:hover { color: var(--ink-raised); }
:root[data-thema="hell"] .btn::before { background: var(--text-strong); }
:root[data-thema="hell"] .btn { border-color: var(--line); color: var(--text-strong); }
:root[data-thema="hell"] .btn::after { display: none; }

/* Der Schein hinter der Seite und der Lichtwurf der Ueberschrift sind
   Nachtwirkungen. Am Tag stoeren sie nur. */
:root[data-thema="hell"] .schein { display: none; }

:root[data-thema="hell"] .hero__title em { text-shadow: none; }
:root[data-thema="hell"] .stat__value { text-shadow: none; }

/* Die Fusszeile faellt nicht ins Dunkle, sie wird ruhiger. */
:root[data-thema="hell"] .footer {
  background: var(--ink-deep);
  border-top: 1px solid var(--line);
}

/* Das Raster der angehobenen Abschnitte war ein Licht; jetzt ist es ein
   Strich — und ein Strich auf Weiss traegt viel weiter als ein Schimmer
   auf Schwarz. Bei gleicher Deckkraft sah die Flaeche aus wie kariertes
   Papier; sie soll aber nur einen Massstab andeuten. */
:root[data-thema="hell"] .section--raised::before { opacity: .32; }

/* Bild und Vorschau bleiben, wie sie sind — nur der Verlauf darunter
   war fuer dunkle Karten gerechnet. */
:root[data-thema="hell"] .product__bild::after {
  background: linear-gradient(180deg,
    rgba(var(--szene), 0.02) 0%,
    rgba(var(--szene), 0.02) 50%,
    rgba(var(--szene), 0.30) 100%);
}

/* Bildlaufleiste und Auswahl: dasselbe Prinzip, dunklere Werte. */
:root[data-thema="hell"] { scrollbar-color: rgba(14, 122, 153, .45) transparent; }
:root[data-thema="hell"] ::-webkit-scrollbar-thumb { background: rgba(14, 122, 153, .35); }
:root[data-thema="hell"] ::selection {
  background: rgba(14, 122, 153, 0.20);
  color: var(--text-strong);
}

/* Der Aufriss zeichnet mit Licht; auf Weiss muss er mit Tinte zeichnen. */
:root[data-thema="hell"] .aufriss__dach { opacity: .9; }
:root[data-thema="hell"] .aufriss__traufe,
:root[data-thema="hell"] .aufriss__stuetze { stroke: var(--text-muted); }

/* Das Kopfband bleibt dunkel — dort laeuft die gerechnete Szene. Damit der
   Uebergang zur hellen Seite kein Bruch ist, endet es mit einer Kante in
   der Grundfarbe statt mit einem Verlauf ins Nichts. */
:root[data-thema="hell"] .hero {
  background: rgba(var(--szene), 1);
  border-bottom: 1px solid var(--line);
}

:root[data-thema="hell"] .hero h1,
:root[data-thema="hell"] .hero .hero__title,
:root[data-thema="hell"] .hero__lead,
:root[data-thema="hell"] .hero__kicker,
:root[data-thema="hell"] .hero .lead,
:root[data-thema="hell"] .hero .crumb,
:root[data-thema="hell"] .schriftfeld dd {
  color: #F3F5F8;
}

:root[data-thema="hell"] .hero__lead,
:root[data-thema="hell"] .hero .lead { color: #C3CAD4; }
:root[data-thema="hell"] .hero__kicker { color: #E4C489; }
:root[data-thema="hell"] .hero__title em { color: #E4C489; }
:root[data-thema="hell"] .schriftfeld dt { color: #9AA3B0; }
:root[data-thema="hell"] .schriftfeld__zelle { border-left-color: rgba(243, 245, 248, 0.16); }
:root[data-thema="hell"] .hero__rule {
  background: linear-gradient(90deg, #8E7847, rgba(243, 245, 248, 0.16) 55%, transparent);
}

/* Der Lichtzug ueber der zweiten Zeile rechnet mit den Markenfarben. Im
   hellen Thema sind die dunkel — auf dem dunklen Kopfband waere die Zeile
   damit fast schwarz. Sie bekommt deshalb dort die hellen Werte fest. */
:root[data-thema="hell"] .hero__title em {
  background: linear-gradient(100deg,
    #E4C489 0%, #E4C489 42%,
    #FFF3DA 50%,
    #E4C489 58%, #E4C489 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Der Umschalter steht im Kopfband auf dunklem Grund — dort braucht er
   helle Schrift und eine helle Kante, sonst ist er ein leerer Kasten. */
:root[data-thema="hell"] .header .thema {
  color: #C3CAD4;
  border-color: rgba(243, 245, 248, 0.28);
}

:root[data-thema="hell"] .header--scrolled .thema {
  color: var(--text-muted);
  border-color: var(--line);
}

/* Der volle Knopf im Kopfband steht auf dunklem Grund und behaelt deshalb
   dort seine helle Fassung. */
:root[data-thema="hell"] .hero .btn--solid {
  background: linear-gradient(160deg, #FFE6B6, #E4C489 62%);
  border-color: #FFE6B6;
  color: #07090C;
}

/* :not(.btn--solid), weil der volle Knopf zwei Zeilen weiter oben schon
   seine eigene Fassung bekommen hat — ohne die Ausnahme ueberschriebe
   diese Regel sie wieder, gleiche Staerke, nur spaeter. */
:root[data-thema="hell"] .hero .btn:not(.btn--solid) {
  border-color: rgba(243, 245, 248, 0.28);
  color: #F3F5F8;
}

:root[data-thema="hell"] .hero .btn:not(.btn--solid)::before { background: #E4C489; }
:root[data-thema="hell"] .hero .btn:not(.btn--solid):hover { color: #07090C; }

/* Die Kopfzeile liegt ueber dem dunklen Band, solange nicht gescrollt ist,
   und ueber der hellen Seite, sobald gescrollt wird. */
:root[data-thema="hell"] .header {
  background: linear-gradient(180deg,
              rgba(var(--szene), 0.72), rgba(var(--szene), 0.24) 70%, transparent);
}

:root[data-thema="hell"] .header .wordmark,
:root[data-thema="hell"] .header .nav__link,
:root[data-thema="hell"] .header .lang { color: #F3F5F8; }

:root[data-thema="hell"] .header--scrolled {
  background: rgba(var(--grund), 0.86);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -32px rgba(var(--film), 0.5);
}

/* Steht die helle Schublade offen, liegt die Kopfzeile ueber ihr und
   nicht mehr ueber dem dunklen Kopfband. */
:root[data-thema="hell"].menue-offen .header {
  background: rgba(var(--grund), 0.94);
}

:root[data-thema="hell"].menue-offen .header .wordmark,
:root[data-thema="hell"].menue-offen .header .nav__link,
:root[data-thema="hell"].menue-offen .header .lang,
:root[data-thema="hell"].menue-offen .header .burger { color: var(--text-strong); }

:root[data-thema="hell"].menue-offen .header .thema {
  color: var(--text-muted);
  border-color: var(--line);
}

:root[data-thema="hell"] .header--scrolled .wordmark,
:root[data-thema="hell"] .header--scrolled .nav__link,
:root[data-thema="hell"] .header--scrolled .lang { color: var(--text-strong); }


/* -------------------------------------------------------------------------
   2. Grundlagen
   ------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Damit Formularfelder, Bildlaufleisten und die Leiste des Browsers zum
     Thema passen — sonst steht ein weisses Eingabefeld in der dunklen
     Seite und umgekehrt. */
  color-scheme: dark;
}

:root[data-thema="hell"] { color-scheme: light; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Kaum wahrnehmbare Koernung ueber der ganzen Seite. Nimmt der grossen
   schwarzen Flaeche das Digitale und laesst sie wie bedrucktes Papier
   wirken. Rein dekorativ, deshalb ohne Zeigerereignisse. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 15% 12%, rgba(212, 180, 120, 0.06), transparent 45%),
    radial-gradient(circle at 88% 8%, rgba(150, 180, 210, 0.045), transparent 40%);
}

img, svg { max-width: 100%; height: auto; display: block; }

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection {
  background: var(--gold);
  color: var(--ink);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--space-xs) var(--space-sm);
  background: var(--gold);
  color: var(--ink);
  font-size: var(--fs-small);
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   3. Typografie
   ------------------------------------------------------------------------- */

/* Enge Grotesk, halbfett, mit negativer Laufweite: Je groesser der Grad,
   desto enger muss gesetzt werden, sonst faellt eine Zeile auseinander.
   Der Wert steigt deshalb weiter unten mit der Groesse. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.028em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
/* Die grossen Ueberschriften in der Antiqua — ein Schnitt, daher 400 und
   kaum Sperrung: Eine Antiqua braucht die Luft, die eine Grotesk nicht
   braucht. Bausteine mit kleinen h2 (Karten) setzen die Grotesk selbst. */
h1, h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.04;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; line-height: 1.25; }

p { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text);
  max-width: 62ch;
  text-wrap: pretty;
}

.prose {
  max-width: var(--wrap-text);
  color: var(--text);
}
.prose p + p { margin-top: var(--space-sm); }
.prose p { text-wrap: pretty; }

/* Kapitaelchen-Label ueber jeder Ueberschrift. Der wichtigste einzelne
   Baustein fuer den gehobenen Eindruck: weite Sperrung, kleine Groesse,
   Akzentfarbe, davor eine kurze Linie. */
.label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.label::before {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: var(--gold-dim);
  flex: none;
}
.label--plain::before { display: none; }

/* =========================================================================
   DAS BLATT — die Seite als technische Zeichnung

   Bis hierher sah die Seite aus wie viele: dunkel, golden, eine Spalte.
   Was fehlte, war eine eigene Handschrift. Sie kommt aus dem, was das Haus
   tut — Dinge bauen — und aus dem Zeichen oben links: einem Dach.

   Von hier an ist jede Seite ein Blatt einer Zeichnung. Abschnitte sind
   nummeriert wie Positionen, Karten tragen Passermarken an den Ecken, und
   ueber dem Ganzen liegt ein Blattrand. Nichts davon ist Zierrat, das man
   auch weglassen koennte: Es ist die Ordnung, in der ein Bauplan gelesen
   wird, auf eine Website uebertragen.
   ========================================================================= */

/* --- 1. Die Abschnitte tragen Nummern ----------------------------------
   Gezaehlt wird im Stylesheet, nicht beim Bauen: So bekommt jede Seite die
   Nummerierung, auch die, die es noch nicht gibt, und niemand muss beim
   Umstellen zweier Abschnitte an die Zahlen denken. */
body { counter-reset: register; }

.section { counter-increment: register; }

.section__head .label::before {
  content: counter(register, decimal-leading-zero);
  width: auto;
  height: auto;
  background: none;
  font-family: var(--font-mono);
  font-size: .82em;
  letter-spacing: .1em;
  color: var(--gold);
  opacity: .55;
}

/* Die Linie steht hinter dem Wort und laeuft aus, statt davor zu stehen
   und aufzuhoeren: So liest sich die Zeile als Position auf einem Blatt
   und nicht als Ueberschrift mit Verzierung. */
.section__head .label::after {
  content: '';
  flex: 1;
  height: 1px;
  min-width: 2rem;
  background: linear-gradient(90deg, var(--gold-dim), transparent);
  opacity: .5;
}

.muted { color: var(--text-muted); }
.small { font-size: var(--fs-small); }

.note {
  font-size: var(--fs-small);
  color: var(--text-faint);
  font-style: italic;
}

/* Textlink im Fliesstext: Haarlinie, die beim Zeigen von links nachwaechst */
.link {
  position: relative;
  color: var(--text-strong);
  padding-bottom: 1px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: color var(--dur-fast) var(--ease);
}
.link:hover { color: var(--gold-bright); }

/* -------------------------------------------------------------------------
   4. Kopfzeile
   ------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              height var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.header--scrolled {
  height: 4rem;
  background: rgba(var(--grund), 0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}

.header__inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* Wortmarke: gesperrte Versalien, der Zusatz in Akzentfarbe und kleiner */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-strong);
  white-space: nowrap;
}
/* Das Bildzeichen vor der Wortmarke. Es nimmt seine Farbe aus der Schrift
   (currentColor), sitzt auf der Grundlinie und traegt in Gold nur den
   Giebel — die Punkte bleiben etwas zurueck. */
.wordmark__zeichen {
  width: 1.75em;
  height: 1.75em;
  flex: none;
  align-self: center;
  margin-right: 0.25em;
  color: var(--gold);
  transition: color var(--dur-fast) var(--ease);
}
.wordmark:hover .wordmark__zeichen { color: var(--gold-bright); }

/* Das Prisma-D steht hochkant (100 x 120) und traegt seine eigenen Farben —
   currentColor greift hier nicht. Etwas schmaler als der quadratische
   Giebel, damit es optisch gleich gross neben der Schrift steht. */
.wordmark__zeichen.zeichen--prisma {
  width: 1.3em;
  height: 1.56em;
  margin-right: 0.5em;
  transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.wordmark:hover .wordmark__zeichen.zeichen--prisma {
  transform: translateY(-1px);
  filter: brightness(1.12) saturate(1.08);
}

.wordmark__suffix {
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--gold);
  transform: translateY(-0.15em);
}
/* Neben dem Prisma-Zeichen nimmt der Zusatz dessen Ton an: Gold neben
   Indigo und Cyan waeren zwei Marken nebeneinander. */
.wordmark:has(.zeichen--prisma) .wordmark__suffix { color: var(--prisma-ink); }
:root[data-thema="hell"]:not(.menue-offen) .header:not(.header--scrolled) .wordmark:has(.zeichen--prisma) .wordmark__suffix {
  color: #93A8FF;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}

.nav__link {
  position: relative;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: var(--space-2xs) 0;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--text-strong); }
.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); }
.nav__link[aria-current='page'] { color: var(--text-strong); }

.header__side {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.lang {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* "IN ENGLISH" ist zwei Woerter und darf trotzdem nie zwei Zeilen
     werden: Zwischen 1080 und 1240 Pixeln wurde der Knopf sonst doppelt
     so hoch wie die Kopfzeile daneben. */
  white-space: nowrap;
  color: var(--text-muted);
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.lang:hover { color: var(--gold); border-color: var(--gold-dim); }

/* Menuetaste: drei Linien, die sich zum Kreuz legen */
.burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 50%; top: 50%;
  width: 1.1rem; height: 1px;
  margin-left: -0.55rem;
  background: var(--text);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger span:nth-child(1) { transform: translateY(-4px); }
.burger span:nth-child(3) { transform: translateY(4px); }
.burger[aria-expanded='true'] span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: rotate(-45deg); }

/* Mobiles Menue: volle Flaeche, grosse Serifenschrift, wie eine Titelseite */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ink);
  padding: calc(var(--header-h) + var(--space-lg)) var(--gutter) var(--space-lg);
  display: flex;
  flex-direction: column;
  /* Zentriert, solange alles hineinpasst — sonst von oben, damit der erste
     Punkt nicht oben abgeschnitten wird. Und scrollbar, denn seit der
     Umschalter dazugekommen ist, stehen acht Zeilen darin: Auf einem
     kleinen Telefon reicht das nicht mehr aufs Bild, und was man nicht
     erreichen kann, ist nicht da. */
  justify-content: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  gap: var(--space-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur);
}
.drawer[data-open='true'] {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.drawer__link {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  color: var(--text-strong);
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: var(--space-xs);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}
.drawer__index {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  color: var(--gold-dim);
}

/* -------------------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: calc(var(--header-h) + var(--space-2xl)) 0 var(--space-lg);
  overflow: hidden;
}
.hero--page {
  padding: calc(var(--header-h) + var(--space-xl)) 0 var(--space-lg);
  border-bottom: 1px solid var(--line-soft);
}

/* --- Die Szene im Hintergrund ------------------------------------------
   .hero__bg traegt zwei Schichten uebereinander: den CSS-Verlauf, der
   immer da ist, und darueber das WebGL-Bild, sobald es steht. Faellt
   WebGL aus, bleibt der Verlauf — niemand sieht ein Loch. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 68% 88%, var(--himmel-warm), transparent 60%),
    radial-gradient(ellipse 70% 50% at 30% 10%, var(--himmel-kalt), transparent 65%),
    linear-gradient(180deg, rgb(12, 13, 16) 0%, rgba(var(--szene), 1) 55%,
                rgba(var(--szene), 1) 100%);
  transition: background-image 1.2s ease;
}

/* =========================================================================
   DAS LICHT KENNT DIE UHRZEIT

   Der Schein hinter dem Kopf der Seite ist morgens klarer, abends waermer
   und nachts tiefer — nach der Uhr des Geraets, das die Seite anzeigt.
   Das ist keine Spielerei um ihrer selbst willen: Wer eine Seite zweimal
   am Tag oeffnet, soll nicht zweimal dasselbe Standbild sehen.

   Wichtig, was hier NICHT passiert: Es wird nichts gemessen, nichts
   gespeichert und nichts gesendet. Das Skript liest die Stunde des
   Geraets und setzt ein Attribut — mehr steht nicht dahinter.

   Ohne JavaScript bleibt es beim Standardwert, also bei genau dem Bild,
   das die Seite vorher hatte.
   ========================================================================= */

:root {
  --himmel-warm: rgba(200, 169, 106, 0.12);
  --himmel-kalt: rgba(143, 163, 200, 0.05);
}

/* Frueher Morgen: kuehler und klarer, wie Licht vor Sonnenaufgang. */
:root[data-stimmung="morgen"] {
  --himmel-warm: rgba(206, 180, 128, 0.10);
  --himmel-kalt: rgba(150, 178, 214, 0.08);
}

/* Tag: der Grundton der Seite, unveraendert. */

/* Abend: die warme Seite wird kraeftiger und rueckt ins Kupferne. */
:root[data-stimmung="abend"] {
  --himmel-warm: rgba(206, 152, 96, 0.15);
  --himmel-kalt: rgba(132, 138, 178, 0.05);
}

/* Nacht: beides zurueckgenommen, das Blau bekommt Uebergewicht. */
:root[data-stimmung="nacht"] {
  --himmel-warm: rgba(176, 152, 110, 0.08);
  --himmel-kalt: rgba(124, 148, 194, 0.08);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
/* Setzt hero.js, sobald das erste Bild steht. */
.hero__bg[data-scene='on'] .hero__canvas { opacity: 1; }

/* --- Die Videoschleife der Startseite ----------------------------------
   Zuerst steht das Standbild, dann blendet das Video darueber ein, sobald
   es wirklich laeuft — kein schwarzes Rechteck, kein Sprung. Das Motiv
   liegt rechts; auf schmalen Bildschirmen rueckt der Ausschnitt dorthin,
   statt die Prismen in die Mitte unter die Schrift zu schieben. */
.hero__bg--video { background: #0A0D14; }
.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  display: block;
}
.hero__video {
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__video.laeuft { opacity: 1; }
@media (max-width: 760px) {
  .hero__poster, .hero__video { object-position: 78% 50%; }
}

/* Der Schleier: links deckend, damit die Schrift ruhig steht, nach rechts
   hin offen, damit die Szene sichtbar bleibt. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(var(--szene), 1) 0%,
      rgba(var(--szene), 0.94) 30%,
      rgba(var(--szene), 0.8) 50%,
      rgba(var(--szene), 0.5) 62%,
      rgba(var(--szene), 0.16) 76%,
      rgba(var(--szene), 0.04) 90%,
      rgba(var(--szene), 0.14) 100%),
    linear-gradient(180deg,
      rgba(var(--szene), 1) 0%,
      rgba(var(--szene), 0.55) 9%,
      rgba(var(--szene), 0.14) 30%,
      rgba(var(--szene), 0.10) 60%,
      rgba(var(--szene), 0.72) 80%,
      rgba(var(--szene), 1) 100%);
}

.hero__kicker {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-md);
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 650;
  margin: 0 0 var(--space-md);
}
/* Zweite Zeile in der Farbe der Marke, mit einem Hauch Licht dahinter.
   Kursiv war sie, solange die Schrift eine Antiqua war; in einer engen
   Grotesk ist Kursiv nur schraeg, nicht anders. Das Licht macht denselben
   Unterschied, ohne die Form zu verbiegen. */
.hero__title em {
  display: block;
  font-style: normal;
  color: var(--gold);
  text-shadow: 0 0 38px rgba(228, 196, 137, 0.28);
}

/* Fester heller Ton statt --text-muted: das Kopfband ist in beiden Themen
   dunkel, und seit dem Video laeuft rechts bewegtes Licht unter dem
   Zeilenende durch. Mit #A3ACB9 sank der Kontrast dort auf 3,4:1. */
.hero__lead {
  font-size: var(--fs-lead);
  color: #C3CAD4;
  max-width: 56ch;
  margin: 0 0 var(--space-lg);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Die lange Haarlinie am Fuss des Heros — von links einlaufend */
.hero__rule {
  margin-top: var(--space-xl);
  height: 1px;
  background: linear-gradient(90deg, var(--gold-dim), var(--line) 55%, transparent);
  transform-origin: left;
  animation: rule-in var(--dur-slow) var(--ease) both;
}
@keyframes rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- 4. Das Schriftfeld -------------------------------------------------
   Der Titelblock einer Zeichnung: vier harte Angaben in einer Reihe, durch
   Haarlinien getrennt, in der Schreibmaschinenschrift der technischen
   Beschriftung. Er steht unter dem Kopf der Startseite, wo sonst nur Luft
   war, und beantwortet in einer Zeile, womit man es zu tun hat.

   Die Zahlen darin werden beim Bauen gezaehlt, nicht gepflegt.
   ------------------------------------------------------------------------ */
.schriftfeld {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: var(--space-md) 0 0;
  max-width: 46rem;
}

.schriftfeld__zelle {
  padding: 0 var(--space-sm);
  border-left: 1px solid var(--line);
}

/* Die erste Zelle beginnt buendig mit dem Text darueber: Eine Linie ganz
   links haette die Spalte nach rechts geschoben und die Flucht gebrochen,
   an der die ganze Seite haengt. */
.schriftfeld__zelle:first-child { padding-left: 0; border-left: 0; }

.schriftfeld dt {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .35rem;
}

.schriftfeld dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .92rem;
  letter-spacing: .02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Hochkant stehen vier Spalten zu eng. Zwei Reihen zu zwei Feldern lesen
   sich dort wie ein Formular — und genau das ist es. */
@media (max-width: 620px) {
  .schriftfeld {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-sm);
  }
  .schriftfeld__zelle:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* Fortschrittslinie unter der Kopfzeile. Ein Haarstrich, mehr nicht —
   sie soll das Gefuehl fuer die Laenge der Seite geben, nicht auffallen. */
.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 101;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  pointer-events: none;
}

/* Rueckweg nach oben. Erscheint erst, wenn er gebraucht wird. */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  z-index: 80;
  width: 3rem; height: 3rem;
  display: grid;
  place-items: center;
  background: rgba(16, 18, 22, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.6rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility var(--dur), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.to-top[data-show='true'] { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--gold); border-color: var(--gold-dim); }
.to-top svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* -------------------------------------------------------------------------
   6. Abschnitte
   ------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 1;
}
/* Schmale Spalten behalten die linke Kante der Seite. Zentriert man sie
   stattdessen, springt der Textanfang beim Scrollen von Abschnitt zu
   Abschnitt — genau die Unruhe, die eine ruhige Seite nicht haben darf.
   Deshalb bleibt der Rahmen breit und nur der Inhalt wird begrenzt. */
.wrap--mid  > * { max-width: var(--wrap-mid); }
.wrap--text > * { max-width: var(--wrap-text); }

.section { padding: var(--space-2xl) 0; }
.section--tight { padding: var(--space-xl) 0; }
.section--raised { background: var(--ink-raised); }

/* --- 2. Jeder Abschnittswechsel beginnt mit einem Dach -------------------
   Bisher trennte die Abschnitte ein Strich, wie ihn jede Seite hat. Jetzt
   traegt der Strich in seiner Mitte die Dachlinie aus dem Signet —
   derselbe Winkel, dieselbe Staerke — und laeuft nach beiden Seiten aus.

   Es ist dieselbe Figur, die zwischen den Kapiteln eines Artikels steht.
   Wiedererkennung entsteht daraus, dass ein Motiv wiederkehrt, nicht
   daraus, dass es gross ist.

   Gezeichnet als Hintergrund und nicht als Element: So braucht es kein
   zusaetzliches Markup auf zwanzig Seiten, und wo der Browser die Adresse
   nicht mag, bleibt schlicht die Linie. */
.section + .section {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2046%2014%22%3E%3Cpath%20d=%22M1%2013%20L23%203%20L45%2013%22%20fill=%22none%22%20stroke=%22%23978154%22%20stroke-opacity=%22.55%22%20stroke-width=%221%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E"),
    linear-gradient(90deg, transparent, var(--line-soft)),
    linear-gradient(90deg, var(--line-soft), transparent);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center top 0, left top 8px, right top 8px;
  background-size: 46px 14px, calc(50% - 27px) 1px, calc(50% - 27px) 1px;
}

/* Bleibt die Flaeche danach angehoben, muss die Farbe darunter erhalten
   bleiben: background-image und background-color stehen sich nicht im
   Weg, die Kurzschrift oben wuerde das Bild aber wegwerfen. */
.section + .section--raised { background-color: var(--ink-raised); }

/* Nach einem Seitenkopf ist der volle Abstand zu viel: der Kopf bringt
   seinen eigenen unteren Rand schon mit. */
.hero--page + .section { padding-top: var(--space-xl); }

.section__head { margin-bottom: var(--space-xl); }
.section__head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: end;
}
.section__head--split .lead { margin: 0; }

.section__foot {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-soft);
}

/* -------------------------------------------------------------------------
   7. Bausteine
   ------------------------------------------------------------------------- */

/* --- Schaltflaechen --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.95rem 1.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Die Fuellung waechst von unten nach oben — ruhiger als ein Farbwechsel */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur) var(--ease);
  z-index: -1;
}
.btn:hover { color: var(--ink); border-color: var(--gold); }
.btn:hover::before { transform: scaleY(1); }
.btn > * { position: relative; }

.btn--solid { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--solid::before { background: var(--gold-bright); }
.btn--solid:hover { color: var(--ink); }

.btn--quiet { border-color: var(--line); color: var(--text); }
.btn--quiet::before { background: var(--text-strong); }
.btn--quiet:hover { color: var(--ink); border-color: var(--text-strong); }

/* Pfeillink: der Pfeil rueckt beim Zeigen eine Spur nach rechts */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  transition: color var(--dur-fast) var(--ease);
}
.arrow-link::after {
  content: '→';
  transition: transform var(--dur) var(--ease);
}
.arrow-link:hover { color: var(--gold-bright); }
.arrow-link:hover::after { transform: translateX(0.35em); }

/* --- Kennzahlen --- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--line);
}
.stat {
  padding: var(--space-md) var(--space-sm) var(--space-md) 0;
  border-bottom: 1px solid var(--line);
}
.stat + .stat { padding-left: var(--space-md); border-left: 1px solid var(--line); }
.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-numeral);
  line-height: 1;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}
.stat__label {
  margin-top: var(--space-2xs);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* --- Nummerierte Punkte (Modell, Grundsaetze) --- */
.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.point {
  padding: var(--space-md) var(--space-md) var(--space-lg) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.point + .point { padding-left: var(--space-md); border-left: 1px solid var(--line); }
.point__index {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
  color: var(--gold-dim);
  display: block;
  margin-bottom: var(--space-sm);
}
.point__title { margin-bottom: var(--space-2xs); }
.point__text { color: var(--text-muted); margin: 0; }

/* --- Aufzaehlung mit Akzentstrich --- */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative;
  padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.55em;
  width: 1rem; height: 1px;
  background: var(--gold);
}
.ticks li:last-child { border-bottom: 0; }

/* --- Zeitleiste --- */
.timeline { position: relative; padding-left: clamp(1.5rem, 6vw, 5rem); }
.timeline::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6rem; bottom: 0.6rem;
  width: 1px;
  background: linear-gradient(180deg, var(--gold-dim), var(--line) 40%, transparent);
}
.tl-item { position: relative; padding: 0 0 var(--space-lg); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(1.5rem, 6vw, 5rem) - 3px);
  top: 0.65rem;
  width: 7px; height: 7px;
  background: var(--gold);
  border-radius: 50%;
}
.tl-item__year {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--gold);
  display: block;
  margin-bottom: var(--space-3xs);
}
.tl-item__text { color: var(--text-muted); margin: var(--space-3xs) 0 0; }

/* --- Karten allgemein --- */
/* Die Trennlinien zeichnen die Karten selbst — nicht der Hintergrund des
   Rasters. Sonst bleibt in der letzten Reihe dort, wo keine Karte mehr
   steht, ein heller Kasten stehen. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
/* --- 3. Passermarken an den Karten --------------------------------------
   Auf einem Druckbogen stehen an den Ecken feine Winkel: Passermarken.
   Sie sagen, wo das Blatt beginnt und endet. Genau das tun sie hier auch —
   sie geben jeder Karte eine Ecke, ohne sie einzurahmen.

   Im Ruhezustand sind sie kaum zu sehen; wer auf eine Karte zeigt, sieht
   sie deutlich. Ein Rahmen waere lauter und wuerde weniger sagen.

   Alle vier Winkel stehen in EINEM Element aus acht Verlaeufen. Das ist
   dichter geschrieben als acht kleine Kaesten, kostet den Browser nichts
   und laesst ::before frei — bei der Produktkarte traegt es schon den
   Akzentstrich.

   Die drei Kartenarten des Hauses stehen im Selektor statt einer eigenen
   Klasse im HTML: So bekommt jede kuenftige Karte die Winkel dadurch,
   dass sie eine Karte ist, und nicht dadurch, dass jemand daran denkt.
   ------------------------------------------------------------------------ */
:is(.card, .product, .kachel) {
  --passer-farbe: var(--gold-dim);
  --passer-laenge: 11px;
  position: relative;
}

:is(.card, .product, .kachel)::after {
  content: '';
  position: absolute;
  inset: 6px;
  pointer-events: none;
  opacity: .22;
  transition: opacity var(--dur) var(--ease), inset var(--dur) var(--ease);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--passer-farbe), var(--passer-farbe)),
    linear-gradient(var(--passer-farbe), var(--passer-farbe)),
    linear-gradient(var(--passer-farbe), var(--passer-farbe)),
    linear-gradient(var(--passer-farbe), var(--passer-farbe)),
    linear-gradient(var(--passer-farbe), var(--passer-farbe)),
    linear-gradient(var(--passer-farbe), var(--passer-farbe)),
    linear-gradient(var(--passer-farbe), var(--passer-farbe)),
    linear-gradient(var(--passer-farbe), var(--passer-farbe));
  background-size:
    var(--passer-laenge) 1px, 1px var(--passer-laenge),
    var(--passer-laenge) 1px, 1px var(--passer-laenge),
    var(--passer-laenge) 1px, 1px var(--passer-laenge),
    var(--passer-laenge) 1px, 1px var(--passer-laenge);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

:is(.card, .product, .kachel):hover::after,
:is(.card, .product, .kachel):focus-visible::after {
  opacity: .8;
  inset: 3px;
}

/* Wer weniger Bewegung wuenscht, bekommt den Helligkeitswechsel, aber die
   Winkel bleiben, wo sie sind. */
@media (prefers-reduced-motion: reduce) {
  :is(.card, .product, .kachel)::after { transition: opacity 1ms; }
  :is(.card, .product, .kachel):hover::after,
  :is(.card, .product, .kachel):focus-visible::after { inset: 6px; }
}

/* Auf Papier ist eine Passermarke ein Strich ohne Zweck. */
@media print {
  :is(.card, .product, .kachel)::after { display: none; }
}

.card {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
a.card:hover { background: var(--ink-raised); }
.card__text { color: var(--text-muted); margin: 0; flex: 1; }
.card__foot { margin-top: var(--space-sm); }

.card__meta {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-2xs);
}

/* --- Zitat in einer Meldung --- */
.quote {
  margin: var(--space-xl) 0 0;
  padding-left: var(--space-md);
  border-left: 1px solid var(--gold-dim);
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: var(--text-strong);
}
.quote figcaption {
  margin-top: var(--space-sm);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.quote figcaption span { color: var(--text-faint); }

/* --- Fragen und Antworten ---------------------------------------------
   <details>/<summary> statt eigener Steuerung: aufklappbar, per Tastatur
   bedienbar und durchsuchbar, ganz ohne JavaScript. */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__frage {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--text-strong);
  transition: color var(--dur-fast) var(--ease);
}
.faq__frage::-webkit-details-marker { display: none; }
/* Das Zeichen rechts: ein Plus, das sich beim Aufklappen zum Minus dreht. */
.faq__frage::after {
  content: '+';
  flex: none;
  font-family: var(--font-body);
  font-size: 1.25rem;
  color: var(--gold);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] .faq__frage::after { transform: rotate(45deg); }
.faq__frage:hover { color: var(--gold-bright); }
.faq__antwort {
  padding: 0 0 var(--space-md);
  max-width: 68ch;
  color: var(--text-muted);
}

/* --- Personen --- */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg) var(--space-md);
}
.person__mark {
  width: 3.5rem; height: 3.5rem;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  color: var(--gold-dim);
  margin-bottom: var(--space-sm);
}
.person__role {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: var(--space-3xs) 0 var(--space-2xs);
}
.person__text { color: var(--text-muted); font-size: var(--fs-small); margin: 0; }

/* --- Meldungen / Stellen: Zeilen mit Haarlinie --- */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: baseline;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--dur) var(--ease);
}
/* Die Zellen einer Zeile sind <span>, damit sie auch innerhalb eines
   umschliessenden <a> gueltiges HTML bleiben. Ohne diese Zeile stuenden
   Titel und Text hintereinander statt untereinander. */
.row > *, .row__title, .row__text { display: block; }
a.row:hover { padding-left: var(--space-sm); }
a.row:hover .row__title { color: var(--gold-bright); }
.row__meta {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.row__meta strong { display: block; color: var(--gold); font-weight: 600; }
.row__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--text-strong);
  margin: 0 0 var(--space-2xs);
  transition: color var(--dur-fast) var(--ease);
}
.row__text { color: var(--text-muted); margin: 0; max-width: 60ch; }
.row__side {
  font-size: var(--fs-small);
  color: var(--text-muted);
  white-space: nowrap;
}

/* --- Aufrufband --- */
.band {
  position: relative;
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 120%, rgba(200, 169, 106, 0.08), transparent 60%),
    var(--ink-raised);
  text-align: center;
}
.band h2 { max-width: 22ch; margin: 0 auto var(--space-sm); }
.band p { max-width: 55ch; margin: 0 auto var(--space-lg); color: var(--text-muted); }

/* --- Kontaktwege --- */
.routes {
  display: grid;
  /* 240px als Mindestbreite, damit vier Wege auf einer breiten Seite auch in
     eine Reihe passen — bei 280px kippt der vierte um. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-sm);
}
.route {
  display: block;
  padding: var(--space-md);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.route:hover { border-color: var(--gold-dim); background: var(--ink-raised); }
.route__mail {
  display: block;
  margin-top: var(--space-sm);
  color: var(--gold);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  word-break: break-word;
}

/* --- Die eine Adresse ------------------------------------------------
   Eine Karte ueber die ganze Breite haette links zwei Zeilen und rechts
   eine leere Flaeche. Deshalb steht die Adresse selbst rechts, gross —
   sie ist das, weswegen jemand auf diese Seite kommt. Auf dem Telefon
   rutscht sie unter den Text. */
.route--gross {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  padding: var(--space-lg);
}
.route--gross .route__text { max-width: 34rem; }
.route--gross .route__mail {
  margin-top: 0;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  letter-spacing: 0.01em;
}
.route--gross .route__mail::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.35em;
  transition: transform var(--dur) var(--ease);
}
.route--gross:hover .route__mail::after { transform: translateX(0.25em); }
.route--gross.route--offen .route__mail::after { content: none; }
@media (max-width: 720px) {
  .route--gross { grid-template-columns: minmax(0, 1fr); padding: var(--space-md); }
}

/* --- Was noch aussteht --------------------------------------------------
   Eine Adresse, die es noch nicht gibt, steht als stiller Text da, wo
   sonst der Verweis stuende: gleiche Stelle, gleiche Groesse, nur ohne
   Farbe und ohne Zeigefinger. Sie soll nicht wie ein kaputter Link
   aussehen, sondern wie eine Zeile, die noch geschrieben wird. */
.platzhalter {
  color: var(--text-faint);
  font-style: italic;
}

/* Der Weg ohne Adresse ist keine Karte zum Anklicken — also verhaelt er
   sich auch nicht so: keine Randfarbe beim Zeigen, kein Zeigefinger. */
.route--offen { cursor: default; }
.route--offen:hover { border-color: var(--line); background: none; }
.route--offen .route__mail { color: var(--text-faint); font-style: italic; }

/* --- Definitionsliste (Impressum, Produktdaten) --- */
.facts { margin: 0; }
.facts > div {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--line-soft);
}
.facts dt {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: 0.25em;
}
.facts dd { margin: 0; color: var(--text); }

/* -------------------------------------------------------------------------
   8. Portfolio
   ------------------------------------------------------------------------- */

/* --- Kachelreihe der Startseite ---------------------------------------
   Kompakter als die Karten im Portfolio: Bild, Name, Stand, Bereich. Sie
   soll auf einen Blick zeigen, welche Seiten es gibt — nicht sie erklaeren.
   auto-fill statt auto-fit: Auch bei zwei Eintraegen bleiben die Kacheln
   klein, statt sich ueber die halbe Seite zu ziehen. */
.kacheln-produkte {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-lg) var(--space-md);
}

.kachel {
  display: block;
  position: relative;
}

.kachel__bild {
  display: grid;
  place-items: center;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}
.kachel__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  filter: saturate(0.94) brightness(0.92);
  transform: scale(1.01);
  transition: transform 1.1s var(--ease), filter var(--dur) var(--ease);
}
/* Die Akzentkante erscheint erst beim Zeigen — im Ruhezustand bleibt die
   Reihe eine ruhige Fläche aus Haarlinien. */
.kachel__bild::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--akzent, var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.kachel:hover .kachel__bild { border-color: var(--gold-dim); }
.kachel:hover .kachel__bild::after { transform: scaleX(1); }
.kachel:hover .kachel__bild img {
  transform: scale(1.05);
  filter: saturate(1.04) brightness(1.02);
}

/* Monogramm statt Bild, solange keiner vorliegt */
.kachel__mark {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--akzent, var(--gold));
  opacity: 0.5;
  transition: opacity var(--dur) var(--ease);
}
.kachel:hover .kachel__mark { opacity: 0.8; }

.kachel__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.kachel__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--text-strong);
  transition: color var(--dur-fast) var(--ease);
}
.kachel:hover .kachel__name { color: var(--gold-bright); }
.kachel__kopf .status { flex: none; }

.kachel__meta {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.kachel--offen .kachel__bild {
  background:
    radial-gradient(ellipse 70% 90% at 50% 120%,
      rgba(212, 180, 120, 0.10), transparent 70%),
    var(--ink-raised);
}
.kachel--offen .kachel__meta { color: var(--gold); }

.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

/* Jede Karte traegt ihre eigene Akzentfarbe als --akzent aus dem Datensatz.
   Sichtbar wird sie nur sparsam: Monogramm, Statuspunkt, obere Kante beim
   Zeigen. Sechs bunte Kacheln waeren das Gegenteil von edel. */
.product {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  transition: background var(--dur) var(--ease);
}
.product::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--akzent, var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.product:hover { background: var(--ink-raised); }
.product:hover::before { transform: scaleX(1); }
.product:hover .product__name { color: var(--akzent, var(--gold)); }

/* Der Schnappschuss auf der Karte. Er sitzt buendig in der Kachel, wird
   beim Zeigen eine Spur groesser und traegt einen dunklen Verlauf nach
   unten — so bleibt der Uebergang zur Typografie ruhig, egal wie hell das
   Bild ist. */
.product__bild {
  display: block;
  position: relative;
  margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-md)) var(--space-xs);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-raised);
  border-bottom: 1px solid var(--line);
}
.product__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: saturate(0.94) brightness(0.94);
  transform: scale(1.01);
  transition: transform 1.2s var(--ease), filter var(--dur) var(--ease);
}
.product:hover .product__bild img {
  transform: scale(1.045);
  filter: saturate(1.04) brightness(1.02);
}
.product__bild::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--szene), 0.06) 0%,
    rgba(var(--szene), 0.02) 50%,
    rgba(var(--szene), 0.55) 100%);
}
/* Die Einladungskarte behaelt dieselbe Hoehe, damit das Raster ruhig
   bleibt — sie zeigt nur den Akzentschimmer statt eines Bildes. */
.product__bild--leer {
  background:
    radial-gradient(ellipse 70% 90% at 50% 120%,
      rgba(212, 180, 120, 0.10), transparent 70%),
    var(--ink-raised);
}

.product__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}
.product__mark {
  width: 2.75rem; height: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--akzent, var(--gold));
  border: 1px solid currentColor;
  opacity: 0.85;
}
.product__category {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: right;
}
.product__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  /* Ausdruecklich gesetzt, weil dieselbe Karte je nach Ort ein h2 oder ein
     h3 traegt und die Voreinstellung des Browsers je Ordnung eine andere
     Zeilenhoehe mitbringt. Gleich aussehen soll sie in beiden Faellen. */
  line-height: 1.15;
  color: var(--text-strong);
  margin: 0;
  transition: color var(--dur) var(--ease);
}
/* Kursiv war das Mittel, solange die Schrift eine Antiqua war. In einer
   engen Grotesk ist Kursiv nur schraeg; der Satz hebt sich jetzt ueber
   Groesse, Laufweite und Helligkeit ab — und auf Linux-Geraeten ohne
   kursiven Schnitt sprang die Schrift ausserdem in eine fremde Familie. */
.product__claim {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text-strong);
  margin: 0;
}
.product__text { color: var(--text-muted); margin: 0; flex: 1; }
.product__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Umbrechen darf die Zeile als Ganzes, nicht der Text darin: "IN
     ENTWICKLUNG" und "MEHR ERFAHREN" nebeneinander sind in einer schmalen
     Spalte zu breit, und dann stand "MEHR" ueber "ERFAHREN" — zwei Zeilen
     Grossbuchstaben mit Sperrung, die aussehen wie ein Fehler. */
  flex-wrap: wrap;
  row-gap: var(--space-2xs);
  gap: var(--space-sm);
}

/* Global gesetzt war "nicht umbrechen" ein Fehler: Ein langer englischer
   Pfeillink ("Subscribe to announcements (RSS) →") machte die Seite auf dem
   Telefon acht Pixel breiter als das Fenster — ein nicht umbrechendes Wort
   laesst keine Spalte schmaler werden. */
.product__foot {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line-soft);
}

/* Nur HIER darf der Pfeillink nicht umbrechen: "MEHR ERFAHREN" in zwei
   Zeilen Grossbuchstaben sieht aus wie ein Fehler. */
.product__foot .arrow-link { white-space: nowrap; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.status::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--akzent, var(--gold));
}
.status--live::before { box-shadow: 0 0 0 3px rgba(111, 224, 255, 0.20); }
.status--entwicklung::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

/* Filterleiste im Portfolio */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}
.filter {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--line);
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.filter:hover { color: var(--text-strong); border-color: var(--text-faint); }
.filter[aria-pressed='true'] {
  color: var(--gold);
  border-color: var(--gold-dim);
}
.product[hidden] { display: none; }

/* Der grosse Schnappschuss auf der Produktseite: ein Haarlinienrahmen,
   eine Akzentkante oben und ein weicher Schlagschatten. Mehr braucht ein
   Bild nicht, das fuer sich selbst spricht. */
.schnappschuss {
  margin: 0;
  position: relative;
  border: 1px solid var(--line);
  background: var(--ink-raised);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}
.schnappschuss::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--akzent, var(--gold));
  opacity: 0.75;
  z-index: 1;
}
.schnappschuss img {
  width: 100%;
  height: auto;
  display: block;
}

/* Produktdetailseite */
.product-hero { padding: calc(var(--header-h) + var(--space-xl)) 0 var(--space-lg); }
.product-hero__mark {
  width: 4.5rem; height: 4.5rem;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--akzent, var(--gold));
  border: 1px solid currentColor;
  margin-bottom: var(--space-md);
}
.product-hero__claim {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--akzent, var(--gold));
  margin: var(--space-sm) 0 var(--space-md);
  max-width: 24ch;
  line-height: 1.08;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.crumb {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.crumb::before { content: '←'; }
.crumb:hover { color: var(--gold); }

/* -------------------------------------------------------------------------
   9. Fusszeile
   ------------------------------------------------------------------------- */

.footer {
  background: var(--ink-deep);
  border-top: 1px solid var(--line);
  padding: var(--space-xl) 0 var(--space-md);
  position: relative;
  z-index: 1;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-lg) var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--line-soft);
}
.footer__claim {
  color: var(--text-muted);
  max-width: 32ch;
  margin: var(--space-sm) 0 0;
  font-size: var(--fs-small);
}
.footer__title {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-sm);
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: var(--space-2xs); }
.footer__list a {
  font-size: var(--fs-small);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}
.footer__list a:hover { color: var(--gold); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  font-size: var(--fs-small);
  color: var(--text-faint);
}

.footer__note {
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-left: 1px solid var(--gold-dim);
  font-size: var(--fs-small);
  color: var(--text-faint);
  background: rgba(200, 169, 106, 0.03);
}

/* -------------------------------------------------------------------------
   10. Hilfsklassen

   Wenige, klar benannte Abstandsklassen — sie ersetzen die style-Attribute
   im HTML. Das ist kein Selbstzweck: Ohne Inline-Stile darf die
   Content-Security-Policy 'unsafe-inline' streichen, und die Seite haelt
   damit ein, was sie im Abschnitt „Nachpruefbar" verspricht.
   ------------------------------------------------------------------------- */

.mt-2xs { margin-top: var(--space-2xs); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mb-lg  { margin: 0 0 var(--space-lg); }

/* Zwischenueberschrift in langen Rechtstexten */
.abstand-titel { margin: var(--space-lg) 0 var(--space-sm); }

/* Rechtsbuendige Zeile im geteilten Abschnittskopf */
.zeile-rechts { margin: 0; text-align: right; }

/* Anschrift: <address> ohne Kursive, mit ruhigem Zeilenabstand */
.anschrift {
  font-style: normal;
  margin-top: var(--space-md);
  line-height: 1.9;
}

/* -------------------------------------------------------------------------
   10b. Lebendigkeit — Effekte auf Zeigerbewegung
   Alle Werte hier setzen Skripte als eigene Eigenschaften (--rx, --mx, …);
   im HTML steht kein einziges style-Attribut, die Richtlinie bleibt streng.
   Jeder Effekt ist doppelt gesichert: Skripte starten ihn nur bei feinem
   Zeiger, und prefers-reduced-motion unten schaltet alle Uebergaenge ab.
   ------------------------------------------------------------------------- */

/* --- Kacheln kippen dem Zeiger entgegen -------------------------------- */
.kachel { perspective: 900px; }
.kachel__bild {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.45s var(--ease), border-color var(--dur) var(--ease);
  will-change: transform;
}
.kachel:hover .kachel__bild { transition-duration: 0.12s; }

/* Ein Lichtstreif wandert mit dem Zeiger ueber den Schnappschuss. */
.kachel__bild::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    340px circle at var(--gx, 50%) var(--gy, 40%),
    rgba(253, 246, 232, 0.14), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.kachel:hover .kachel__bild::before { opacity: 1; }

/* --- Lichtkegel folgt dem Zeiger ueber Karten --------------------------- */
a.card { position: relative; overflow: hidden; }
a.card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 0%),
    rgba(212, 180, 120, 0.09), transparent 55%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
a.card:hover::before { opacity: 1; }

/* --- Schaltflaechen ziehen leicht zum Zeiger ----------------------------- */
.btn {
  transform: translate(var(--tx, 0px), var(--ty, 0px));
  transition: transform 0.3s var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

/* --- Kennzahlen: das Zaehlwerk braucht feste Ziffernbreiten -------------- */
.stat__value { font-variant-numeric: tabular-nums; }

/* --- Der Statuspunkt eines laufenden Produkts atmet ---------------------- */
@keyframes statusAtmen {
  0%, 100% { box-shadow: 0 0 0 3px rgba(111, 224, 255, 0.20); }
  50%      { box-shadow: 0 0 0 7px rgba(111, 224, 255, 0.04); }
}
.status--live::before { animation: statusAtmen 2.6s var(--ease) infinite; }

/* --- Antworten klappen weich auf ----------------------------------------- */
@keyframes antwortAuf {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to   { opacity: 1; transform: none; }
}
.faq__item[open] .faq__antwort { animation: antwortAuf 0.45s var(--ease); }

/* --- Die Worte der Startzeile treten einzeln auf -------------------------
   Die Spannen setzt ein Skript; ohne Skript steht die Zeile einfach da. */
.hero__title .wort {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--wi, 0s);
}
.hero__title.ist-da .wort { opacity: 1; transform: none; }

/* Die kursive Zeile traegt einen sehr langsamen Lichtzug — Gold, das im
   Licht steht, nicht Gold, das blinkt. */
@keyframes goldzug {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}
.hero__title em {
  background: linear-gradient(100deg,
    var(--gold) 0%, var(--gold) 42%,
    #F4E3C2 50%,
    var(--gold) 58%, var(--gold) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldzug 7s var(--ease) 1.6s infinite;
}

/* --- Das Bildzeichen: die drei Punkte gruessen beim Zeigen ---------------- */
.wordmark__zeichen.zeichen--giebel circle { transition: transform 0.35s var(--ease); }
.wordmark:hover .wordmark__zeichen.zeichen--giebel circle:nth-of-type(1) { transform: translateY(-2px); transition-delay: 0s; }
.wordmark:hover .wordmark__zeichen.zeichen--giebel circle:nth-of-type(2) { transform: translateY(-2.5px); transition-delay: 0.06s; }
.wordmark:hover .wordmark__zeichen.zeichen--giebel circle:nth-of-type(3) { transform: translateY(-2px); transition-delay: 0.12s; }

/* --- Wissenskarten ------------------------------------------------------- */
/* h2 oder h3 — welche Ordnung die Ueberschrift in der Karte traegt, haengt
   davon ab, wo die Karte steht: auf der Uebersicht folgt sie unmittelbar
   auf die Seitenueberschrift, im Anhang eines Artikels auf einen Abschnitt.
   Aussehen soll sie in beiden Faellen gleich. */
.cards--wissen .card :is(h2, h3) {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.25;
}
.card--wissen .arrow-link { margin-top: var(--space-sm); }
.prose--artikel h2 { margin-top: var(--space-lg); }

/* Die enge Grotesk sitzt dichter auf ihrer Grundlinie als die Antiqua
   vorher — ohne diesen Abstand klebt der erste Absatz samt Initial an der
   Unterkante der Ueberschrift. */
.prose--artikel h2 + p { margin-top: var(--space-sm); }

/* -------------------------------------------------------------------------
   11. Bewegung & Ausnahmen
   ------------------------------------------------------------------------- */

/* Einblenden beim Scrollen. Die Klasse setzt JavaScript; ohne JavaScript
   bleibt alles sichtbar, weil erst .is-revealable die Startwerte setzt. */
.js .is-revealable {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}
.js .is-revealable.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .section__head--split { grid-template-columns: 1fr; align-items: start; }
  .split { grid-template-columns: 1fr; gap: var(--space-lg); }
  .row { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .row__side { margin-top: var(--space-2xs); }
  .stat + .stat,
  .point + .point { padding-left: 0; border-left: 0; }
  .point { padding-right: 0; }
}

@media (max-width: 760px) {
  :root { --space-2xl: 5.5rem; --space-xl: 4rem; }
  .nav { display: none; }
  .burger { display: block; }
  .lang { display: none; }
  /* Hochkant traegt die Szene den unteren Bildrand, der Text steht oben. */
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(var(--szene), 1) 0%,
        rgba(var(--szene), 0.95) 36%,
        rgba(var(--szene), 0.74) 62%,
        rgba(var(--szene), 0.42) 84%,
        var(--ink) 100%);
  }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .facts > div { grid-template-columns: 1fr; gap: var(--space-3xs); }
}

@media (max-width: 460px) {
  .footer__top { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
}

/* Wer weniger Bewegung wuenscht, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .is-revealable { opacity: 1; transform: none; }
  .hero__title .wort { opacity: 1; transform: none; }
  .hero__title em {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* Die Seite ist fuer dunkle Darstellung gebaut. Beim Drucken waere das
   eine Tonerverschwendung — also einmal umdrehen. */

/* =========================================================================
   LESELAYOUT — Wissensartikel

   Zwei Spalten: links die Kapitel, die mitlaufen, rechts der Text. Der
   Grund ist nicht Zierrat. Ein langer Text ohne Uebersicht zwingt zum
   Zurueckscrollen, und wer zurueckscrollt, hoert meistens ganz auf.

   Unter 1080 px faellt die Randspalte weg statt zu schrumpfen: Ein
   Inhaltsverzeichnis, das die halbe Breite frisst, ist auf dem Telefon
   kein Dienst, sondern eine Huerde vor dem Text.
   ========================================================================= */

.lesung {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

@media (min-width: 1080px) {
  .lesung {
    grid-template-columns: 232px minmax(0, var(--wrap-text));
    gap: 64px;
    justify-content: center;
  }
}

.lesung__rand { display: none; }

@media (min-width: 1080px) {
  .lesung__rand {
    display: block;
    position: sticky;
    top: 132px;
    align-self: start;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
  }
}

.lesung__rand .label { margin-bottom: 14px; }

.kapitel { list-style: none; margin: 0; padding: 0; }

.kapitel a {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 1px solid transparent;
  padding-left: 14px;
  margin-left: -15px;
  transition: color .28s ease, border-color .28s ease;
}

.kapitel a:hover { color: var(--text); }

/* Das laufende Kapitel wird nicht nur farbig, sondern bekommt die Kante:
   Farbe allein waere fuer jemanden mit Farbschwaeche kein Unterschied. */
.kapitel a.is-hier {
  color: var(--text);
  border-left-color: var(--gold);
}

.kapitel__nummer {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--gold);
  opacity: .75;
}

.kapitel__titel { font-size: .84rem; line-height: 1.45; }

.lesebalken {
  height: 2px;
  margin-top: 20px;
  background: rgba(var(--film), 0.10);
  overflow: hidden;
}

.lesebalken__fuellung {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  background: var(--gold);
  transform-origin: left center;
}

/* --- Der Text selbst ---------------------------------------------------- */

/* Die Kapitelzahl steht ueber der Ueberschrift, nicht daneben: daneben
   verschoebe sie die Grundlinie, und die Ueberschriften stuenden nicht
   mehr auf einer Achse mit dem Absatz darunter. */
.kapitel__zahl {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--gold);
  opacity: .7;
  margin-bottom: 10px;
}

.prose--artikel h2 { scroll-margin-top: 120px; text-wrap: balance; }

/* --- Die Sprungmarke am Kapitel ----------------------------------------
   Sie steht neben der Ueberschrift und ist ruhig, bis jemand sie sucht:
   beim Zeigen auf die Ueberschrift, beim Anspringen mit der Tastatur.
   Immer sichtbar waere sie beim dritten Kapitel Schmutz; gar nicht
   sichtbar waere sie nicht da.

   Sie sitzt in einem eigenen Feld links vom Text statt hinter ihm: So
   verschiebt sich beim Erscheinen keine Zeile. */
.prose--artikel h2 .marke {
  margin-left: .4em;
  font-family: var(--font-mono);
  font-size: .58em;
  font-weight: 400;
  color: var(--gold);
  text-decoration: none;
  opacity: 0;
  transition: opacity .22s ease;
  vertical-align: .18em;
}

.prose--artikel h2:hover .marke,
.prose--artikel h2 .marke:focus-visible { opacity: .75; }

.prose--artikel h2 .marke:hover { opacity: 1; }

/* Auf Geraeten ohne Zeiger gibt es kein "zeigen auf". Dort steht sie
   leise dauerhaft da, statt unerreichbar zu sein. */
@media (hover: none) {
  .prose--artikel h2 .marke { opacity: .4; }
}

/* Auf Papier ist eine Sprungmarke sinnlos. */
@media print {
  .prose--artikel h2 .marke { display: none; }
}

/* Das Initial. Es traegt den Einstieg und sonst nichts — deshalb genau
   einmal je Artikel und nur, wo genug Platz dafuer ist. */
.prose--artikel .anriss::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.4em;
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: .82;
  padding: 0.06em 0.1em 0 0;
  color: var(--gold);
}

@media (max-width: 640px) {
  .prose--artikel .anriss::first-letter { font-size: 2.6em; }
}

/* --- Der Kapiteltrenner -------------------------------------------------
   Dieselbe Dachlinie wie im Zeichen oben links. Wiedererkennung entsteht
   aus der Wiederholung eines Motivs, nicht aus mehr Verzierung. */

.kapiteltrenner {
  display: flex;
  justify-content: center;
  color: var(--gold);
  opacity: .38;
  margin: var(--space-lg) 0 var(--space-md);
}

.kapiteltrenner svg { display: block; }

/* --- Der Merksatz ------------------------------------------------------- */

.merksatz {
  margin: var(--space-md) 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--gold);
}

.merksatz p {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.42;
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}

@media (min-width: 1080px) {
  /* Auf breiten Schirmen tritt der Merksatz aus der Spalte heraus. Das
     ist der einzige Bruch der Satzkante im ganzen Text — und genau
     deshalb faellt er auf. */
  .merksatz { margin-left: -34px; padding-left: 32px; }
}


/* =========================================================================
   KORN UND RANDABDUNKLUNG

   Eine gleichmaessig dunkle Flaeche wirkt auf einem grossen Schirm flach
   und zeigt an weichen Verlaeufen Streifen. Ein feines Korn bricht beides:
   Es gibt der Flaeche eine Oberflaeche und den Verlaeufen ihre Rundung
   zurueck. Dasselbe Mittel benutzt die Hintergrundszene im Hero bereits
   im letzten Schritt — hier liegt es ueber allem.

   Das Muster ist erzeugt, nicht geladen: ein SVG-Rauschfilter als Adresse
   in der Datei. Keine zusaetzliche Anfrage, rund ein halbes Kilobyte, und
   die Sicherheitsrichtlinie erlaubt es ausdruecklich (img-src 'self' data:).
   ========================================================================= */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* Die Randabdunklung sitzt hinter dem Inhalt, nicht darueber: Sie soll
   den Blick zur Mitte fuehren, nicht den Text daempfen. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 12%,
              rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.34) 100%);
}

/* Im Druck faellt beides weg — Korn kostet Toner und bringt auf Papier
   nichts. */
/* =========================================================================
   SEITENUEBERGAENGE

   Ein Klick auf einen internen Link laesst die alte Seite kurz stehen,
   waehrend die neue kommt. Das ist eine Zugabe des Browsers: Wo er sie
   nicht kennt, passiert genau das, was vorher passierte — ein harter
   Wechsel. Keine Bibliothek, kein Skript, vier Zeilen.

   Die Ueberschrift der Seite bleibt dabei stehen und wandert an ihre neue
   Stelle, statt mitzublenden: Das ist der Unterschied zwischen "eine neue
   Seite" und "dieselbe Sache, naeher betrachtet".
   ========================================================================= */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: verblassen .18s ease both; }
::view-transition-new(root) { animation: auftauchen .32s ease both; }

@keyframes verblassen { to { opacity: 0; } }

@keyframes auftauchen {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}


/* =========================================================================
   PRODUKTSEITE — Kennzahlen, Merkmale, Schnappschuss

   Die harten Zahlen eines Produkts standen bisher in einem Nebensatz der
   Merkmalsliste. Wer 48 Rechner gebaut hat, soll das nicht beilaeufig
   erwaehnen — die Zahlen bekommen deshalb ein eigenes Band, direkt unter
   dem Bild und vor dem Fliesstext.
   ========================================================================= */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  border-top: 1px solid rgba(var(--film), 0.10);
  border-bottom: 1px solid rgba(var(--film), 0.10);
}

.kennzahl {
  padding: 26px 22px 24px;
  box-shadow: 0 0 0 1px rgba(var(--film), 0.06);
}

.kennzahl b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.1rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  /* Die Akzentfarbe des Produkts kommt aus der Klasse akzent-<slug>, die
     der Generator ans Stylesheet haengt. Faellt sie aus, bleibt Gold. */
  color: var(--akzent, var(--gold));
}

.kennzahl > span {
  display: block;
  margin-top: 10px;
  font-size: .78rem;
  line-height: 1.45;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Wann diese Zahlen zuletzt gegen die laufende Anwendung geprueft wurden.
   Klein und ruhig: Die Zahlen sind die Aussage, das Datum ist die
   Fussnote dazu. Es steht trotzdem da, weil eine Zahl ohne Stand eine
   Behauptung ist und mit Stand eine Angabe. */
.kennzahlen__stand {
  margin: var(--space-sm) 0 0;
  font-size: .8rem;
  color: var(--text-faint);
}

/* --- Merkmale als Karten statt Strichliste ------------------------------ */

.merkmale {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}

.merkmal {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid rgba(var(--film), 0.08);
  line-height: 1.55;
}

.merkmal:last-child { border-bottom: 1px solid rgba(var(--film), 0.08); }

/* Das Zeichen ist dieselbe Dachlinie wie ueberall sonst, nur klein und
   ohne Datei: zwei Kanten eines Quadrats, um 45 Grad gedreht. */
.merkmal__zeichen {
  width: 9px;
  height: 9px;
  margin-top: .45em;
  border-left: 1.5px solid var(--akzent, var(--gold));
  border-top: 1.5px solid var(--akzent, var(--gold));
  transform: rotate(45deg);
  opacity: .85;
}

/* --- Der Schnappschuss bekommt Tiefe ------------------------------------
   Vorher lag der Bildschirmauszug flach auf der Flaeche. Jetzt steht er
   in einem Rahmen mit Lichtkante und Schatten — und kippt beim Zeigen
   minimal, als laege er auf einem Tisch. Ohne Zeiger (Telefon) und bei
   Wunsch nach weniger Bewegung passiert nichts davon. */

.schnappschuss {
  position: relative;
  margin: 0;
  border: 1px solid rgba(var(--film), 0.10);
  border-radius: 3px;
  overflow: hidden;
  background: var(--ink-2, #12151b);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85),
              0 2px 0 0 rgba(var(--film), 0.04) inset;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1),
              box-shadow .5s ease, border-color .5s ease;
}

/* Die Lichtkante oben: ein Streifen in der Akzentfarbe, der andeutet, wo
   das Licht herkommt. Ein Strich, keine Flaeche — sonst wird aus dem
   Hinweis eine Verzierung. */
.schnappschuss::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
              transparent, var(--akzent, var(--gold)), transparent);
  opacity: .5;
  z-index: 1;
}

.schnappschuss img { display: block; width: 100%; height: auto; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .schnappschuss:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--film), 0.18);
    box-shadow: 0 40px 90px -32px rgba(0, 0, 0, 0.9),
                0 2px 0 0 rgba(var(--film), 0.06) inset;
  }
}

/* --- Produktkarte ohne Bild ---------------------------------------------
   Ein Produkt ohne Schnappschuss stand neben einem mit Bild wie ein
   Fehler. Statt eines Platzhalterbilds bekommt es eine Flaeche aus seiner
   eigenen Akzentfarbe mit dem Monogramm — sichtbar Absicht, nicht Mangel. */

.karte__ersatz {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 140% at 78% 12%,
      color-mix(in srgb, var(--akzent, #d4b478) 26%, transparent) 0%,
      transparent 62%),
    linear-gradient(180deg, rgba(var(--film), 0.04), transparent 70%);
  border-bottom: 1px solid rgba(var(--film), 0.08);
}

.karte__ersatz span {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--akzent, var(--gold));
  opacity: .55;
}


/* --- Der Weg nach dem Artikel -------------------------------------------
   Zwei Wege, mehr nicht: ansehen oder fragen. Ein Kasten mit fuenf
   Angeboten waere keiner — er waere eine Kreuzung ohne Schilder. */

.danach {
  padding: 32px;
  border: 1px solid rgba(var(--film), 0.12);
  border-left: 2px solid var(--gold);
  background: linear-gradient(180deg, rgba(var(--film), 0.035), transparent 70%);
}

.danach .label { margin-bottom: 14px; }

.danach__titel {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}

.danach__text {
  margin: 12px 0 0;
  color: var(--text-muted);
  max-width: 52ch;
}

.danach__wege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 26px;
}

.danach__frage { font-size: .9rem; }

@media (max-width: 640px) {
  .danach { padding: 22px; }
}


/* =========================================================================
   GETEILTE ELEMENTE BEIM SEITENWECHSEL

   Die Karte im Portfolio und die Produktseite tragen denselben Namen fuer
   Bild und Titel (erzeugt aus data/products.json). Der Browser laesst das
   eine ins andere wandern, statt beide auszutauschen: Aus "eine neue
   Seite" wird "dieselbe Sache, naeher betrachtet".

   Wo der Browser das nicht kennt, passiert genau das, was vorher passierte.
   Und wer weniger Bewegung wuenscht, bekommt einen harten Schnitt.
   ========================================================================= */

::view-transition-group(*) {
  animation-duration: .42s;
  animation-timing-function: cubic-bezier(.2, .7, .25, 1);
}

/* Das Bild wandert als Ganzes, statt zu ueberblenden: Zwei Fassungen
   desselben Bildes ineinander zu blenden sieht nach Fehler aus. */
::view-transition-old(root) { z-index: 0; }
::view-transition-new(root) { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation-duration: 1ms; }
}

/* =========================================================================
   DAS LICHT NIMMT DIE FARBE DES PRODUKTS AN

   Zeigt jemand auf eine Produktkarte, faerbt sich der Schein hinter der
   Seite in die Farbe dieses Produkts — langsam genug, dass es wie Licht
   wirkt und nicht wie ein Schalter. Gesetzt wird nur eine Variable; die
   Flaeche selbst liegt hinter allem und faengt keine Klicks.
   ========================================================================= */

.schein {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(60% 55% at var(--schein-x, 50%) var(--schein-y, 30%),
              var(--seiten-akzent, var(--gold)) 0%, transparent 68%);
  transition: opacity .7s ease, background-image .7s ease;
}

.schein.is-an { opacity: .085; }

@media (prefers-reduced-motion: reduce) {
  .schein { transition: none; }
  .schein.is-an { opacity: .05; }
}

/* =========================================================================
   BEWEGUNG AUS DEM BILDLAUF — ohne JavaScript

   Was frueher ein Beobachter im Skript erledigt hat, kann der Browser
   selbst: Eine Animation, deren Zeitachse der Bildlauf ist. Das laeuft im
   Kompositor, kostet keinen Hauptthread und haelt auch dann Schritt, wenn
   sonst etwas rechnet.

   Bewusst sparsam eingesetzt — nur dort, wo die Bewegung etwas ueber die
   Sache sagt: Der Hero tritt beim Weiterscrollen zurueck, die Dachlinie
   zwischen zwei Kapiteln zeichnet sich, die Kennzahlen steigen auf.
   ========================================================================= */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Der Hero tritt zurueck, statt einfach nach oben zu verschwinden.
       Der Text wird langsamer als die Seite — das ist die einzige Stelle
       mit Parallaxe, und genau deshalb faellt sie nicht auf, sondern
       wirkt nur. */
    .hero .wrap {
      animation: hero-zurueck linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 90%;
    }

    @keyframes hero-zurueck {
      to { opacity: .25; transform: translateY(-26px) scale(.985); }
    }

    /* Die Dachlinie zeichnet sich, wenn sie ins Bild kommt. */
    .kapiteltrenner svg {
      animation: linie-ziehen linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 70%;
    }

    @keyframes linie-ziehen {
      from { opacity: 0; transform: translateY(6px) scaleX(.7); }
      to   { opacity: 1; transform: none; }
    }

    /* Die Kennzahlen steigen auf, jede fuer sich, sobald das Band kommt. */
    .kennzahl {
      animation: zahl-auf linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }

    @keyframes zahl-auf {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: none; }
    }
  }
}


/* =========================================================================
   BAUWEISE — vier Stationen

   Das einzige Schaubild der Seite. Auf breiten Schirmen eine Reihe mit
   einer Linie dahinter, die sich beim Bildlauf zieht; auf schmalen eine
   Spalte, in der die Linie senkrecht steht. Beides aus derselben Struktur,
   ohne zweite Fassung im HTML.
   ========================================================================= */

.bauweise { position: relative; margin-top: var(--space-lg); }

/* Die Linie liegt hinter den Stationen und waechst von links. Ohne
   Bildlauf-Animation steht sie einfach da — sichtbar, nur nicht gezogen. */
.bauweise__linie {
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  height: 1px;
  background: linear-gradient(90deg,
              transparent, rgba(212, 180, 120, .45) 12%,
              rgba(212, 180, 120, .45) 88%, transparent);
  transform-origin: left center;
}

.stationen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 34px;
}

@media (min-width: 860px) {
  .stationen { grid-template-columns: repeat(4, 1fr); gap: 28px; }
}

@media (max-width: 859px) {
  /* Senkrecht: Die Linie laeuft dann an der linken Kante entlang. */
  .bauweise__linie {
    top: 8px;
    bottom: 8px;
    left: 19px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg,
                transparent, rgba(212, 180, 120, .45) 6%,
                rgba(212, 180, 120, .45) 94%, transparent);
    transform-origin: center top;
  }
  .stationen { padding-left: 56px; }
  .station__nummer { left: -56px; }
}

.station { position: relative; }

.station__nummer {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(var(--film), .16);
  border-radius: 50%;
  background: var(--ink, #0c0e11);
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--gold);
  position: relative;
  z-index: 1;
  transition: border-color .4s ease, transform .4s cubic-bezier(.2,.7,.3,1);
}

.station:hover .station__nummer { border-color: var(--gold); transform: translateY(-2px); }

.station__dach { display: block; color: var(--gold); opacity: .3; margin: 18px 0 10px; }
.station__dach svg { display: block; }

.station__titel {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  margin: 0 0 8px;
}

.station__text {
  margin: 0;
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.6;
  max-width: 34ch;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Die Linie zieht sich, waehrend der Abschnitt ins Bild kommt. Sie ist
       der Weg, den die Seite selbst gegangen ist — deshalb laeuft sie in
       Leserichtung und nicht von der Mitte nach aussen. */
    .bauweise__linie {
      animation: linie-wachsen linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 35%;
    }

    @keyframes linie-wachsen {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }

    @media (max-width: 859px) {
      @keyframes linie-wachsen {
        from { transform: scaleY(0); }
        to   { transform: scaleY(1); }
      }
    }

    .station {
      animation: station-auf linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }

    @keyframes station-auf {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: none; }
    }
  }
}


/* =========================================================================
   RUECKMELDUNG BEIM KOPIEREN

   Sie steht unten in der Mitte, kurz, und verschwindet von selbst. Kein
   Kasten mit Schliessen-Knopf: Was man wegklicken muss, haette man besser
   nicht gezeigt.
   ========================================================================= */

.kopiert {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 60;
  transform: translate(-50%, 14px);
  margin: 0;
  padding: 11px 18px;
  max-width: min(92vw, 460px);
  border: 1px solid rgba(var(--film), .16);
  border-left: 2px solid var(--gold);
  background: rgba(var(--grund), .96);
  color: var(--text);
  font-size: .84rem;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease, transform .32s cubic-bezier(.2,.7,.3,1);
}

.kopiert.is-da { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .kopiert { transition: opacity .2s linear; transform: translate(-50%, 0); }
}

/* =========================================================================
   DER SCHNAPPSCHUSS ENTHUELLT SICH

   Statt einzublenden wird er aufgedeckt: eine Kante, die von unten nach
   oben laeuft. Das ist die Bewegung, die zu einem Bild passt, das man
   gerade hinlegt — und sie erzaehlt in einer halben Sekunde, dass hier
   etwas gezeigt wird, das vorher nicht da war.
   ========================================================================= */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .schnappschuss img {
      animation: bild-aufdecken linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 62%;
    }

    @keyframes bild-aufdecken {
      from {
        clip-path: inset(18% 0 0 0);
        opacity: .35;
        transform: scale(1.03);
      }
      to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: none;
      }
    }
  }
}

/* =========================================================================
   SYSTEMDETAILS

   Drei Kleinigkeiten, die niemand nennt und alle sehen: eine Bildlaufleiste
   im Ton der Seite, ein sauberes Verhalten im Kontrastmodus des
   Betriebssystems, und weniger Durchsichtigkeit fuer alle, die das
   eingestellt haben.
   ========================================================================= */

/* Firefox kennt die kurze Form, die uebrigen den Aufbau darunter. */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 224, 255, .34) transparent;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  background: rgba(111, 224, 255, .26);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: rgba(111, 224, 255, .5); }

/* Wer im Betriebssystem hohe Kontraste erzwingt, will keine Halbtoene:
   Verlaeufe, Korn und Schein treten zurueck, Kanten treten hervor. */
@media (forced-colors: active) {
  body::before, body::after, .schein { display: none; }
  .kennzahl, .merkmal, .station__nummer, .danach, .schnappschuss {
    border: 1px solid CanvasText;
  }
  .kapitel a.is-hier { border-left-color: Highlight; }
}

/* Und wer weniger Durchsichtigkeit eingestellt hat, bekommt volle
   Flaechen statt Schleier. */
@media (prefers-reduced-transparency: reduce) {
  body::after { display: none; }
  .kopiert { background: #0c0e11; }
  .schein { display: none; }
}


/* --- Der Strich vor der Abschnittsmarke zieht sich ----------------------
   Er steht ohnehin ueberall, wo ein Abschnitt beginnt. Dass er sich beim
   Hereinkommen zieht, macht aus einem Zeichen eine Ankuendigung — dieselbe
   Bewegung wie die Linie unter der Bauweise, damit es eine Handschrift
   bleibt und keine Sammlung von Einfaellen. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .label::before {
      transform-origin: left center;
      animation: marke-ziehen linear both;
      animation-timeline: view();
      animation-range: entry 12% entry 58%;
    }

    @keyframes marke-ziehen {
      from { transform: scaleX(0); opacity: .2; }
      to   { transform: scaleX(1); opacity: 1; }
    }
  }
}


/* =========================================================================
   DAS SIGNET ZEICHNET SICH

   Beim ersten Aufruf einer Sitzung zieht sich die Dachlinie, danach setzen
   sich die drei Punkte — von aussen nach innen, wie man ein Dach stuetzt.
   Genau einmal je Sitzung; das Skript setzt die Klasse dafuer.

   Der Strich wird ueber stroke-dasharray gezogen: kein zweites Bild, keine
   zweite Datei, nur eine Zahl, die sich aendert.
   ========================================================================= */

/* Die Regeln stehen bewusst in "no-preference": Wer weniger Bewegung
   wuenscht, soll das Zeichen unveraendert sehen — nicht eine abgeschaltete
   Fassung davon. Das Skript setzt die Klasse ohnehin nur dann; hier steht
   die zweite Sicherung, falls die Klasse doch einmal haengen bleibt. */
@media (prefers-reduced-motion: no-preference) {
  .signet-zeichnet .zeichen--prisma g > path {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: left center;
    animation: prisma-facette .62s cubic-bezier(.2, .8, .3, 1) forwards;
  }
  .signet-zeichnet .zeichen--prisma g > path:nth-child(1) { animation-delay: .10s; }
  .signet-zeichnet .zeichen--prisma g > path:nth-child(2) { animation-delay: .24s; }
  .signet-zeichnet .zeichen--prisma g > path:nth-child(3) { animation-delay: .38s; }

  .signet-zeichnet .wordmark__zeichen.zeichen--giebel path {
    stroke-dasharray: 46;
    stroke-dashoffset: 46;
    animation: signet-linie .78s cubic-bezier(.3, .8, .3, 1) .12s forwards;
  }

  .signet-zeichnet .wordmark__zeichen.zeichen--giebel circle {
    opacity: 0;
    transform: scale(.4);
    transform-origin: center;
    transform-box: fill-box;
    animation: signet-punkt .42s cubic-bezier(.2, .8, .3, 1) forwards;
  }

  /* Die mittlere Kugel ist im Zeichen voll deckend, die aeusseren nicht.
     Deshalb zwei Verlaeufe statt einem: Ein gemeinsamer wuerde alle drei auf
     volle Deckkraft bringen und das Zeichen dauerhaft veraendern. */
  .signet-zeichnet .wordmark__zeichen.zeichen--giebel circle:nth-of-type(1) {
    animation-name: signet-punkt-aussen;
    animation-delay: .74s;
  }

  .signet-zeichnet .wordmark__zeichen.zeichen--giebel circle:nth-of-type(3) {
    animation-name: signet-punkt-aussen;
    animation-delay: .82s;
  }

  .signet-zeichnet .wordmark__zeichen.zeichen--giebel circle:nth-of-type(2) {
    animation-name: signet-punkt;
    animation-delay: .92s;
  }
}

@keyframes signet-linie { to { stroke-dashoffset: 0; } }

@keyframes signet-punkt {
  to { opacity: 1; transform: scale(1); }
}

@keyframes signet-punkt-aussen {
  to { opacity: .72; transform: scale(1); }
}

/* =========================================================================
   DER FILTER BEWEGT DIE KARTEN

   Beim Wechsel des Bereichs ruecken die verbleibenden Karten an ihre neuen
   Plaetze, statt zu springen — jede Karte traegt dafuer einen eigenen
   Namen (vt-karte-<kuerzel>, erzeugt aus data/products.json).

   Die Bewegung selbst kommt aus den Regeln weiter oben bei den geteilten
   Elementen: dieselbe Dauer, dieselbe Kurve. Eine zweite Fassung stuende
   nur daneben und wuerde beim naechsten Feinschliff vergessen.
   ========================================================================= */

/* Die Karte "Das naechste Dach" kommt nicht aus products.json und bekommt
   ihren Namen deshalb hier. Ohne ihn wuerde sie beim Filtern springen,
   waehrend die anderen gleiten — und genau das faellt auf. */
.vt-karte-offen { view-transition-name: karte-offen; }

/* =========================================================================
   DAS ZWEITE LICHT — die Oberflaechen

   Bis hierher war die Seite aus Papier: Haarlinien, Korn, warmes Licht.
   Sie sah gut aus und sie sah nach gestern aus. Was fehlte, war das, was
   ein Werkzeug von einem Prospekt unterscheidet — Flaechen, die leuchten,
   statt bedruckt zu sein.

   Die Regel dahinter, damit es nicht bunt wird: WARM gehoert der Marke
   (Zeichen, Wortbild, Ueberschriften), KUEHL gehoert der Bedienung
   (Fokus, Zustaende, alles was gerade laeuft). Zwei Lichter, klar
   getrennte Aufgaben. Wer sie mischt, bekommt Weihnachten.
   ========================================================================= */

/* --- Die Kopfzeile ist immer Glas ---------------------------------------
   Vorher wurde sie erst beim Scrollen deckend — darueber lag der Text der
   Seite frei und traf beim Scrollen auf die Schrift dahinter. Jetzt liegt
   von Anfang an eine unscharfe Scheibe darunter, die beim Scrollen nur
   dichter wird. */
.header {
  background: linear-gradient(180deg,
              rgba(var(--grund), 0.72), rgba(var(--grund), 0.28) 70%, transparent);
  backdrop-filter: saturate(130%) blur(8px);
  -webkit-backdrop-filter: saturate(130%) blur(8px);
}

.header--scrolled {
  background: rgba(var(--grund), 0.78);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(111, 224, 255, 0.10),
              0 18px 40px -30px rgba(0, 0, 0, 0.9);
}

/* --- Fokus ist kuehl und leuchtet ---------------------------------------
   Ein Fokusring in der Markenfarbe verschwindet zwischen goldenen Linien.
   In Cyan sieht man sofort, wo die Tastatur gerade steht — und genau das
   ist seine einzige Aufgabe. */
:focus-visible {
  outline: 2px solid var(--puls);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection {
  background: rgba(111, 224, 255, 0.26);
  color: var(--text-strong);
}

/* --- Knoepfe: Licht statt Farbflaeche ------------------------------------
   Der volle Knopf traegt jetzt einen Verlauf und einen Schein nach unten,
   als stuende er eine Spur ueber der Seite. Beim Zeigen zieht ein heller
   Streifen darueber — einmal, schnell, nicht als Schleife. */
.btn--solid {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold) 62%);
  border-color: var(--gold-bright);
  box-shadow: 0 10px 34px -16px rgba(228, 196, 137, 0.75);
}

.btn--solid:hover {
  box-shadow: 0 14px 40px -14px rgba(228, 196, 137, 0.85);
}

/* Der Streifen liegt in ::after und braucht damit kein zusaetzliches
   Element im HTML — ::before ist von der Fuellung belegt. */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%,
              rgba(255, 255, 255, 0.42) 50%, transparent 62%);
  transform: translateX(-130%);
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover::after { animation: glanz .62s var(--ease); }
  @keyframes glanz { to { transform: translateX(130%); } }
}

/* Der ruhige Knopf bekommt beim Zeigen die kuehle Kante: Er ist die
   Bedienung, nicht die Marke. */
.btn--quiet:hover {
  border-color: var(--puls-dim);
  color: var(--text-strong);
}

.btn--quiet:hover::before { background: rgba(111, 224, 255, 0.08); }

/* --- Karten stehen ueber der Seite, statt in ihr zu liegen ---------------
   Ein Verlauf von oben (kaum sichtbar) gibt der Flaeche eine Richtung,
   und beim Zeigen legt sich ein weiter, farbiger Schatten darunter: die
   Karte hebt ab, ohne sich zu bewegen. Bewegung haetten wir schon. */
.card,
.product,
.kachel {
  background-image: linear-gradient(180deg,
                    rgba(255, 255, 255, 0.028), transparent 42%);
  transition: background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

a.card:hover,
.product:hover,
.kachel:hover {
  box-shadow: 0 26px 70px -40px rgba(0, 0, 0, 0.95),
              0 0 0 1px rgba(255, 255, 255, 0.045),
              0 0 46px -18px var(--akzent, rgba(228, 196, 137, 0.5));
}

/* --- Angehobene Abschnitte tragen ein Raster ----------------------------
   Ein Netz aus Haarlinien, so schwach, dass man es eher spuert als sieht.
   Es gibt der grossen dunklen Flaeche einen Massstab — dieselbe Aufgabe,
   die das Korn auf Papier hatte, nur mit gerader Kante.

   Nach unten laeuft es aus (mask-image), sonst endet das Raster mitten im
   Text wie ein abgeschnittenes Blatt. */
.section--raised {
  position: relative;
  isolation: isolate;
}

.section--raised::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px),
    linear-gradient(180deg, var(--line-soft) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 82%);
  mask-image: linear-gradient(180deg, #000, transparent 82%);
}

/* --- Zahlen sind gemessen, also stehen sie in der Maschinenschrift -------
   Und sie tragen einen Hauch Licht: Eine Kennzahl ist das Ergebnis, nicht
   der Weg dorthin, und darf hervorstechen. */
.stat__value,
.kennzahl b {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat__value {
  color: var(--text-strong);
  text-shadow: 0 0 30px rgba(111, 224, 255, 0.18);
}

/* --- Rubriken und Zustaende in der Maschinenschrift ---------------------- */
.label,
.status,
.card__meta,
.hero__kicker,
.filter {
  font-family: var(--font-mono);
  font-weight: 500;
}

/* Der Punkt eines laufenden Produkts leuchtet kuehl: "laeuft" ist ein
   Zustand, kein Markenzeichen. */
.status--live::before { background: var(--puls); }

/* --- Die Fusszeile faellt ins Dunkle ------------------------------------- */
.footer {
  background:
    radial-gradient(120% 100% at 50% 0%,
                    rgba(111, 224, 255, 0.05), transparent 62%),
    var(--ink-deep);
}

/* Wer hohe Kontraste erzwingt, will keine Halbtoene: Raster, Schein und
   Glanz treten zurueck. */
@media (forced-colors: active) {
  .section--raised::before, .btn::after { display: none; }
}

@media print {
  .section--raised::before, .btn::after { display: none !important; }
}


/* =========================================================================
   DER AUFRISS — die Gruppe als Bauzeichnung

   Ein Dach, darunter je Produkt eine Stuetze auf eigenem Fuss. Erzeugt aus
   data/products.json: Kommt ein Haus dazu, kommt eine Stuetze dazu.

   Die Zeichnung traegt nur das Gerippe und nimmt jede Breite an
   (preserveAspectRatio="none"); die Beschriftung steht als Text darunter
   in ebenso vielen Spalten. Beide sitzen ueber demselben Bruchteil der
   Breite und treffen sich deshalb auf den Pixel.

   Beim Erscheinen zieht sich das Dach, dann setzen sich die Stuetzen —
   von aussen nach innen, wie man ein Dach abstuetzt. Die Regeln dafuer
   stehen in "no-preference": Wer weniger Bewegung wuenscht, sieht das
   fertige Bild, nicht eine abgeschaltete Fassung davon.
   ========================================================================= */

.aufriss {
  margin: var(--space-2xl) 0 0;
  padding: 0;
}

.aufriss__riss {
  display: block;
  width: 100%;
  height: clamp(96px, 13vw, 168px);
  overflow: visible;
}

.aufriss__dach,
.aufriss__traufe,
.aufriss__stuetze {
  fill: none;
  stroke: var(--gold-dim);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Das Dach ist die Hauptsache und darf das auch zeigen. Traufe und
   Stuetzen halten sich zurueck — sie sind die Konstruktion, nicht die
   Aussage. */
.aufriss__dach { stroke: var(--gold); opacity: .8; }
.aufriss__traufe { opacity: .45; }
.aufriss__stuetze { opacity: .55; }

.aufriss__fuesse {
  display: grid;
  grid-auto-flow: column;
  /* minmax(0, 1fr) und nicht 1fr: Sonst setzt der laengste Name die
     Mindestbreite einer Spalte — "StrikeAndYield" schob das Raster auf dem
     Telefon vier Pixel ueber den Rand, und die ganze Seite liess sich
     seitwaerts schieben. Vier Pixel, die man nur im Messwert sieht. */
  grid-auto-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.aufriss__fuss {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  padding: 0 var(--space-2xs);
}

/* Der Fusspunkt sitzt genau unter seiner Stuetze und traegt die Farbe des
   Produkts — dieselbe, die auch die Karte im Portfolio traegt. */
.aufriss__punkt {
  width: 7px;
  height: 7px;
  margin-bottom: var(--space-2xs);
  background: var(--akzent, var(--gold));
  transform: rotate(45deg);
}

.aufriss__fuss b {
  font-family: var(--font-display);
  /* Umbrochen wird an der Naht zwischen zwei Wortteilen — das <wbr> dafuer
     setzt der Seitenbau. "anywhere" bleibt als letzte Reissleine fuer den
     Fall, dass jemand einen Namen ohne jede Naht vergibt. */
  overflow-wrap: anywhere;
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--text);
}

.aufriss__bereich {
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.aufriss__text {
  margin: var(--space-md) 0 0;
  max-width: 58ch;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* Hochkant tragen drei Spalten die Bereichsnamen nicht mehr. Der Name
   bleibt, der Bereich weicht — lieber eine Angabe lesbar als zwei
   zerbrochen. */
@media (max-width: 620px) {
  .aufriss__fuss b { font-size: .9rem; }
  .aufriss__bereich { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Eingezeichnet wird ueber eine Maske, nicht ueber ein Strichmuster:
     Mit non-scaling-stroke legt der Browser Strichmuster in
     Bildschirmpixeln an (auch mit pathLength), und ein fester Wert von 960
     reichte auf breiten Fenstern nicht bis zur letzten Stuetze. Die Maske
     rechnet in Prozent der eigenen Breite und endet immer am Rand. */
  .aufriss__dach,
  .aufriss__traufe {
    clip-path: inset(-6px 100% -6px -6px);
  }

  .aufriss__stuetze {
    transform: scaleY(0);
    transform-origin: 0 84px;
  }

  .aufriss__punkt { opacity: 0; }

  /* Gezeichnet wird erst, wenn der Abschnitt da ist. Die Klasse setzt das
     Einblenden, das ohnehin jeden Abschnitt begleitet. */
  .is-visible .aufriss__dach {
    animation: riss-linie 1.1s cubic-bezier(.35, .75, .3, 1) .1s forwards;
  }

  .is-visible .aufriss__traufe {
    animation: riss-linie .8s cubic-bezier(.35, .75, .3, 1) .75s forwards;
  }

  .is-visible .aufriss__stuetze {
    animation: riss-stuetze .5s cubic-bezier(.3, .8, .35, 1) forwards;
  }

  /* Von aussen nach innen: Die aeusseren Stuetzen zuerst, die mittlere
     zuletzt. So sieht es aus wie Abstuetzen und nicht wie ein Vorhang. */
  .is-visible .aufriss__stuetze:nth-child(3) { animation-delay: 1.0s; }
  .is-visible .aufriss__stuetze:nth-child(4) { animation-delay: 1.16s; }
  .is-visible .aufriss__stuetze:nth-child(5) { animation-delay: 1.08s; }
  .is-visible .aufriss__stuetze:nth-child(6) { animation-delay: 1.24s; }

  .is-visible .aufriss__punkt {
    animation: riss-punkt .4s ease 1.35s forwards;
  }

  @keyframes riss-linie { to { clip-path: inset(-6px -6px -6px -6px); } }
  @keyframes riss-stuetze { to { transform: scaleY(1); } }
  @keyframes riss-punkt { to { opacity: 1; } }
}

/* Auf Papier steht das Bild fertig da — dort blendet nichts ein. */
@media print {
  .aufriss__dach, .aufriss__traufe {
    stroke: #8a6a24 !important;
    stroke-dashoffset: 0 !important;
  }
  .aufriss__stuetze { stroke: #8a6a24 !important; transform: none !important; }
  .aufriss__punkt { opacity: 1 !important; }
  .aufriss__fuss b { color: #14161a !important; }
}


/* =========================================================================
   BILDER KOMMEN AUS DER UNSCHAERFE

   Ein Produktbild wiegt bis zu 350 KB. Bis es da ist, stand an seiner
   Stelle ein Loch — und ein Loch mitten in der Seite sieht nach Fehler
   aus, auch wenn nur die Leitung langsam ist.

   Jetzt liegt darunter eine 24 Pixel breite Fassung desselben Bildes als
   Hintergrund (erzeugt von scripts/vorschaubilder.py, eingebaut als eigene
   Regel — ein style-Attribut wuerde die Sicherheitsregeln aufweichen).
   Man sieht sofort Farbe und Aufbau, verschwommen und an der richtigen
   Stelle; das scharfe Bild blendet darueber, sobald es da ist.

   Ohne JavaScript bleibt das Bild einfach sichtbar: Die Regel haengt an
   .js. Ein unsichtbares Bild waere schlimmer als ein spaetes.
   ========================================================================= */

.js img[data-blur] {
  opacity: 0;
  transition: opacity .55s ease;
}

.js img[data-blur].ist-da { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js img[data-blur] { transition-duration: 1ms; }
}

/* Ist das Bild da, hat die Vorschau ihren Dienst getan. Sie bleibt
   trotzdem liegen: Sie kostet nichts mehr, und beim Zurueckblaettern
   steht sofort wieder Farbe an der Stelle. */


/* =========================================================================
   DRUCK — die Seite auf Papier

   Wer einen Artikel ausdruckt oder als PDF sichert, will den Text, nicht
   die Navigation. Hell statt dunkel (eine dunkle Seite frisst eine
   Patrone), ohne Bedienelemente, mit Adressen ausgeschrieben: Ein Link auf
   Papier, dem man nicht ansieht, wohin er fuehrt, ist kein Link.
   ========================================================================= */

@media print {
  html, body {
    background: #fff !important;
    color: #14161a !important;
  }

  /* Koernung und Vignette liegen als Auflagen ueber der Seite. Auf Papier
     waeren sie ein grauer Schleier ueber jedem Buchstaben. */
  body::before, body::after { display: none !important; }

  /* Alles, was zum Bedienen da ist — auf Papier bedient niemand etwas. */
  .skip-link, .header, .drawer, .progress, .to-top, .crumb,
  .filters, .filter, .schein, .kopiert, .lang,
  .lesung__rand, .lesebalken,
  .hero__bg, .hero__canvas, .hero__scrim, .hero__video, .hero__poster, canvas,
  .band, .danach__wege, .footer__top, .footer__note {
    display: none !important;
  }

  /* WICHTIG: Abschnitte blenden sich beim Scrollen ein. Wer druckt,
     scrollt nicht — ohne diese Zeile bleibt der halbe Artikel eine leere
     Flaeche, und man merkt es erst am Drucker. */
  .js .is-revealable,
  .js .is-revealable:not(.is-visible),
  .js img[data-blur] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  /* Dunkle Flaechen werden auf Papier zu Tonerfeldern. */
  .section--raised, .footer, .danach, .merksatz, .kennzahl, .station {
    background: transparent !important;
    box-shadow: none !important;
  }

  .footer { border-top: 1px solid #c9ccd1 !important; }
  .footer__bottom { color: #4a5058 !important; }

  .hero, .section { padding: 0 0 1.2cm !important; }
  .wrap, .wrap--text, .wrap--mid { max-width: none !important; padding: 0 !important; }
  .lesung { display: block !important; }

  h1, h2, h3, .kennzahl b, .station__titel, .merksatz p, .danach__titel {
    color: #14161a !important;
  }

  .lead, .muted, .station__text, .merkmal, .danach__text,
  .facts dd, .facts dd a, .status, .product__text, .product__claim, p, li {
    color: #2b2f36 !important;
  }

  .label, .hero__kicker, .card__meta, .facts dt, .product__category,
  .schriftfeld dt {
    color: #5c626b !important;
  }

  /* Das Schriftfeld gehoert aufs Papier: Es ist der Titelblock. Die Werte
     stehen in heller Schrift fuer dunkle Bildschirme — auf Weiss waeren
     sie unsichtbar. */
  .schriftfeld dd { color: #14161a !important; }
  .schriftfeld__zelle { border-left-color: #c9ccd1 !important; }

  /* Ein Knopf auf Papier ist ein Farbfleck, den niemand druecken kann.
     Die Adresse dahinter steht ohnehin im Text daneben. */
  .btn { display: none !important; }

  /* Die Farbverlaeufe der Karten und Bildplatzhalter werden auf Papier zu
     grossen Tonerflaechen — ohne sie steht dort die Ueberschrift, und die
     ist der Grund, warum die Karte gedruckt wird. */
  .product, .product__bild, .karte__ersatz, .schnappschuss,
  .product-hero__mark, .product__mark {
    background: none !important;
    background-color: transparent !important;
  }

  /* Und das Kartenbild ganz: Auf Papier zaehlt der Name des Produkts und
     der Satz darunter. Ein Bild wegzulassen haelt ausserdem die Karten auf
     gleicher Hoehe — sonst rutscht die eine mit Bild neben die ohne. */
  .product__bild { display: none !important; }

  .merksatz { border-left: 2px solid #8a6a24 !important; }
  .kapiteltrenner { color: #8a6a24 !important; }
  .kennzahl b { color: #8a6a24 !important; }

  a { color: #14161a !important; text-decoration: underline; }

  /* Wohin ein Link fuehrt, gehoert auf Papier danebengeschrieben — aber
     nur bei echten Adressen. Sprungmarken und Menuepunkte wuerden die
     Zeilen mit Zeichen fuellen, die niemand abtippt. */
  .prose a[href^="http"]::after,
  .prose a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: .82em;
    color: #4a5058;
    word-break: break-all;
  }

  .prose--artikel h2 { break-after: avoid; }
  .prose p, .merksatz, .kennzahl, .station, .anriss { break-inside: avoid; }

  @page { margin: 1.6cm; }
}

/* =========================================================================
   SPRUNGMARKEN UND TASTATURKUERZEL

   Zwei Zugaben fuer den, der die Seite oefter benutzt. Beide sind stumm,
   solange niemand sie sucht — das ist die Bedingung: Eine Bequemlichkeit,
   die den ersten Besuch stoert, ist keine.
   ========================================================================= */

/* Das Doppelkreuz am Rand der Ueberschrift. Es steht ausserhalb des Textes,
   damit die Zeile nicht springt, wenn es erscheint. */
.prose h2, .prose h3 { position: relative; }

.anker {
  position: absolute;
  left: -1.5rem;
  top: .18em;
  width: 1rem;
  /* Eigene Groesse statt der geerbten: Eine Ueberschrift ist gross, und ein
     Doppelkreuz in Ueberschriftgroesse waere ein zweites Zeichen und keine
     Marke am Rand. */
  font: 400 .85rem/1 var(--font-mono, monospace);
  color: var(--gold);
  opacity: .22;
  text-align: center;
  transition: opacity .18s ease;
}

/* Leise da statt beim Zeigen erscheinend. Eine Marke, die man erst findet,
   wenn man mit der Maus darueberfaehrt, findet niemand, der nicht schon
   weiss, dass es sie gibt — und auf einem Telefon gar niemand. */
.prose h2:hover .anker,
.prose h3:hover .anker,
.anker:focus-visible { opacity: .7; }

.anker:hover { opacity: 1; }

/* Traegt die Ueberschrift eine Kapitelzahl, faengt der Text erst darunter
   an — und die Marke gehoert neben den Text, nicht neben die Zahl. */
.prose h2:has(.kapitel__zahl) .anker { top: 1.9rem; }

/* Die Rueckmeldung nach dem Kopieren. Sie steht neben der Marke und
   verschwindet nach anderthalb Sekunden von selbst. */
.anker--fertig { opacity: 1; }

.anker--fertig::after {
  content: attr(data-fertig);
  position: absolute;
  left: 1.6em;
  top: 0;
  white-space: nowrap;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  animation: anker-melden 1.6s ease forwards;
}

@keyframes anker-melden {
  0%, 70% { opacity: 1; }
  100%    { opacity: 0; }
}

/* Auf schmalen Fenstern ist links kein Platz — dort steht die Marke hinter
   der Ueberschrift und ist dauerhaft sichtbar. Ein Zeichen, das nur beim
   Zeigen erscheint, gibt es auf einem Telefon ohnehin nicht. */
@media (max-width: 900px) {
  .anker {
    position: static;
    display: inline;
    margin-left: .45em;
    vertical-align: .12em;
  }
}

/* --- Die Tafel mit den Kuerzeln ------------------------------------------ */

.kuerzel {
  position: fixed;
  inset: 0;
  /* Ueber der Kopfzeile (100). Eine Tafel, die vor der Seite liegt und
     hinter dem Menue, ist keine Tafel, sondern ein Fehler. */
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  /* Ein Schleier und keine Farbe: --szene bleibt in beiden Themen dunkel,
     und im hellen Aufzug sah die Seite dahinter dadurch aus, als waere sie
     mit umgeschaltet worden. */
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  animation: kuerzel-auf .18s ease;
}

:root[data-thema="hell"] .kuerzel { background: rgba(18, 24, 34, .38); }

.kuerzel[hidden] { display: none; }

@keyframes kuerzel-auf { from { opacity: 0; } to { opacity: 1; } }

.kuerzel__kasten {
  width: min(30rem, 100%);
  padding: 1.6rem 1.8rem;
  background: var(--ink-deep, #0e1116);
  border: 1px solid var(--line-stark, rgba(255,255,255,.18));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.kuerzel__kopf {
  margin: 0 0 1.1rem;
  font-family: var(--font-mono, monospace);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

.kuerzel__liste {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .55rem 1.1rem;
  margin: 0;
  align-items: baseline;
}

.kuerzel__liste dt { display: flex; gap: .25rem; }
.kuerzel__liste dd { margin: 0; color: var(--text); font-size: .92rem; }

.kuerzel kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: .12em .4em;
  font-family: var(--font-mono, monospace);
  font-size: .72rem;
  text-align: center;
  color: var(--text);
  background: rgba(var(--film, 255 255 255), .06);
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-bottom-width: 2px;
}

.kuerzel__fuss {
  margin: 1.3rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  color: var(--text-muted);
}

/* Solange die Tafel offen ist, scrollt dahinter nichts. */
.kuerzel-offen { overflow: hidden; }

@media print {
  .kuerzel { display: none !important; }
  .anker { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .kuerzel { animation: none; }
  .anker { transition: none; }
}

/* =========================================================================
   PASST / PASST NICHT

   Die zweite Liste ist die wichtigere. Wer nach drei Zeilen merkt, dass er
   hier falsch ist, hat sich einen Klick gespart — und weiss, woran er bei
   diesem Haus ist. Ein Produkt, das fuer jeden passt, wurde fuer niemanden
   gemacht, und eine Seite, die das nicht sagt, verkauft.
   ========================================================================= */

.passung {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: var(--space-lg);
}

.passung__spalte {
  padding: var(--space-md) 0 0;
  border-top: 2px solid var(--line);
}

/* Die Farbe traegt die Aussage, aber sie traegt sie nicht allein: Die
   Ueberschrift sagt dasselbe in Worten, und die Zeichen vor den Zeilen
   unterscheiden sich in der Form. Wer Farben nicht unterscheidet, verliert
   damit nichts. */
.passung__spalte--ja { border-top-color: var(--gold); }

.passung__titel {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.passung__spalte--ja .passung__titel { color: var(--gold); }

.passung__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-sm);
}

.passung__liste li {
  position: relative;
  padding-left: 1.6rem;
  max-width: 46ch;
  color: var(--text-muted);
}

.passung__liste li::before {
  position: absolute;
  left: 0;
  top: -.05em;
  font-family: var(--font-mono);
  font-size: .95em;
}

.passung__spalte--ja .passung__liste li::before {
  content: "+";
  color: var(--gold);
}

.passung__spalte--nein .passung__liste li::before {
  content: "\2212";       /* echtes Minus, kein Bindestrich */
  color: var(--text-muted);
}

.hinweis-fein {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
  max-width: 60ch;
  font-size: .88rem;
  color: var(--text-muted);
}

/* Der Knopf nach den Fragen. Wer bis hierher gelesen hat, soll nicht wieder
   nach oben scrollen muessen, um dorthin zu kommen, worum es ging. */
.faq__weiter {
  margin: var(--space-lg) 0 0;
}

/* =========================================================================
   VORSCHLAEGE AUF DER FEHLERSEITE

   Sie entstehen erst im Browser und sind darum bis dahin verborgen. Ohne
   JavaScript bleibt der Abschnitt weg — und die Fehlerseite ist, was sie
   vorher war: eine Entschuldigung mit zwei Knoepfen.
   ========================================================================= */

.vorschlaege[hidden] { display: none; }

/* Der Pfad steht ueber dem Titel und in der Schreibmaschinenschrift: Wer
   sich vertippt hat, erkennt daran, was er gemeint haben koennte, schneller
   als am Titel. */
.vorschlaege .card__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .04em;
  color: var(--gold-dim);
  word-break: break-all;
}

.vorschlaege .card h2 {
  margin: var(--space-xs) 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--text-strong);
}

/* Der Verweis auf den Feed unter den Artikeln. Er steht rechts und leise:
   Wer Feeds benutzt, sucht ihn; wer nicht, soll nicht darueber stolpern. */
.feedzeile {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line-soft);
  text-align: right;
}

/* Das Datenblatt der Pressemappe. Dieselbe Form wie die Eckdaten einer
   Produktseite — wer beide liest, soll sie als dasselbe Mittel erkennen. */
.fakten {
  margin: var(--space-md) 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.fakten > div {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 0 var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--line-soft);
}

.fakten dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.fakten dd { margin: 0; color: var(--text); }

@media (max-width: 700px) {
  .fakten > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

/* =========================================================================
   DIE VERGLEICHSTABELLE

   Vier Karten untereinander beantworten, was jedes Produkt ist. Sie
   beantworten nicht, welches zu jemandem passt — dafuer muss man zwischen
   ihnen springen und sich merken, was in der vorigen stand. Eine Zeile je
   Frage und eine Spalte je Produkt tut das in einem Blick.
   ========================================================================= */

/* Auf schmalen Fenstern scrollt die Tabelle in sich statt die Seite breit
   zu machen. Der Rahmen bekommt darum den Bildlauf, nicht der Body. */
.tabellenrahmen {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.vergleich {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: .94rem;
}

.vergleich th,
.vergleich td {
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}

/* Die Kopfzeile traegt die Produktnamen. Kein sticky: Der Rahmen scrollt
   waagerecht, nicht senkrecht — eine Kopfzeile, die sich beim Blaettern der
   Seite loesen wuerde, schwebte ueber fremdem Inhalt und loeste ein Problem,
   das eine Tabelle mit fuenf Zeilen nicht hat. */
.vergleich thead th {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-strong);
  border-bottom: 1px solid var(--line);
}

/* Die erste Spalte benennt die Frage. Sie ist die Achse, an der gelesen
   wird, und darum leiser gesetzt als die Antworten. */
.vergleich tbody th {
  width: 9.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.vergleich td { color: var(--text-muted); }
.vergleich tbody tr:last-child th,
.vergleich tbody tr:last-child td { border-bottom: 0; }

.vergleich__zahlen td { color: var(--text-muted); line-height: 1.7; }
.vergleich__zahlen b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--text-strong);
}

/* Die Zeile am Ende eines Artikels, die ankuendigt, in welchen Produkten
   steckt, was gerade beschrieben wurde. Sie steht ueber dem Streifen und
   ist nur noch die Anrede dazu — die Auskunft geben die Stuecke darunter. */
.steckt-in {
  margin: var(--space-sm) 0 0;
  font-size: .92rem;
  color: var(--text-muted);
}

/* =========================================================================
   DER PRODUKTSTREIFEN

   Am Ende eines Artikels und unter einer Meldung stand der blosse Name des
   Produkts, um das es ging. Ein Name ist keine Auskunft: Wer ueber
   Datenschutz gelesen hat und darunter "EveryLingua" liest, weiss nicht,
   was das ist, und klickt darum nicht.

   Der Streifen zeigt dasselbe Bildschirmfoto wie das Portfolio, nur klein,
   daneben Bereich, Name und den Anspruch in einem Satz. Er ist schmal
   genug fuer die Textspalte und breit genug, um zu zeigen, dass es die
   Seite wirklich gibt.
   ========================================================================= */

.streifen {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.streifen__stueck {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 14px 10px 10px;
  border: 1px solid rgba(var(--film), 0.10);
  border-radius: 4px;
  background: rgba(var(--film), 0.02);
  color: inherit;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.streifen__stueck:hover {
  border-color: var(--akzent, var(--gold));
  background: rgba(var(--film), 0.05);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .streifen__stueck:hover { transform: none; }
}

.streifen__bild {
  display: block;
  aspect-ratio: 760 / 475;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(var(--film), 0.06);
  /* Das kleine Bild ist ein Ausschnitt, kein Beweisstueck — es darf
     beschnitten werden, damit die Zeile ihre Hoehe behaelt. */
}

.streifen__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.streifen__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--akzent, var(--gold));
}

.streifen__bereich {
  display: block;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.streifen__name {
  display: block;
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--text-strong);
}

.streifen__anspruch {
  display: block;
  margin-top: 4px;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.streifen__pfeil {
  color: var(--gold);
  transition: transform var(--dur) var(--ease);
}

.streifen__stueck:hover .streifen__pfeil { transform: translateX(.3em); }

@media (prefers-reduced-motion: reduce) {
  .streifen__stueck:hover .streifen__pfeil { transform: none; }
}

/* Auf dem Telefon ist die Spalte zu schmal fuer drei Spalten: Der Pfeil
   faellt weg — die ganze Zeile ist ohnehin der Link — und das Bild wird
   kleiner, damit der Name nicht in drei Zeilen bricht. */
@media (max-width: 560px) {
  .streifen__stueck { grid-template-columns: 5.2rem 1fr; padding: 8px; }
  .streifen__pfeil { display: none; }
  .streifen__anspruch { display: none; }
}

/* Der Rahmen ist mit der Tastatur erreichbar, damit sich die Tabelle auch
   ohne Maus waagerecht bewegen laesst. Dann muss er den Fokus aber auch
   zeigen. */
.tabellenrahmen:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* =========================================================================
   DAS HOEHENFELD

   Der Hintergrund der Seite. Dreizehn Hoehenlinien, die waagerecht
   fliessen — die vorderen schneller als die hinteren. Daraus entsteht die
   Tiefe: nicht aus einem Weichzeichner, sondern daraus, dass Nahes sich
   schneller bewegt als Fernes. Dasselbe Mittel, mit dem eine Landschaft
   aus einem fahrenden Zug tief aussieht.

   Warum Hoehenlinien und kein Raster: Ein Raster ist ein Massstab, ein
   Hoehenzug ist eine Form. Beide gehoeren in dieselbe Familie wie der
   Aufriss und das Signet; die Form traegt mehr.

   Bewegt wird ausschliesslich transform. Kein Skript, kein Bildaufbau je
   Halbbild, nichts, was im Leerlauf mitrechnet — die Linien liegen als
   Markup in der Seite, und der Browser schiebt sie.
   ========================================================================= */

.hoehenfeld {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Abgeschlossen: Was darin passiert, loest ausserhalb kein Layout und
     kein Neuzeichnen aus. */
  contain: strict;

}

/* Die Lesespalte bleibt frei — aber mit einem Schleier und nicht mit einer
   Maske. Beides sieht gleich aus; eine Maske zwingt den Browser jedoch,
   die ganze Flaeche in jedem Halbbild neu zusammenzusetzen, ein aufgemalter
   Verlauf wird einmal gezeichnet und bleibt liegen. Gemessen sieben Bilder
   je Sekunde Unterschied auf einem Rechner ohne Grafikkarte.

   Die Farbe ist die des Papiers: Der Schleier deckt zu, er faerbt nicht. */
.hf__schleier {
  position: absolute;
  inset: 0;
  /* Deckend ueber der Lesespalte, durchsichtig an den Raendern — nicht
     umgekehrt. Beim ersten Versuch stand es andersherum, und die Linien
     liefen genau dort, wo der Text steht. */
  background:
    linear-gradient(to right, transparent 0%, var(--ink) 22%,
                    var(--ink) 78%, transparent 100%);
}

/* Auf schmalen Fenstern gibt es keine Raender — dort fuellt der Text die
   ganze Breite. Die Maske traegt dann nichts mehr, also traegt die
   Deckkraft: sichtbar genug, dass die Seite lebt, blass genug, dass sie
   unter dem Text bleibt. */
@media (max-width: 900px) {
  /* Auf schmalen Fenstern gibt es keine Raender — dort fuellt der Text die
     ganze Breite. Der Schleier traegt dann nichts mehr, also traegt die
     Deckkraft: sichtbar genug, dass die Seite lebt, blass genug, dass sie
     unter dem Text bleibt. */
  .hf__schleier { display: none; }
  .hoehenfeld { opacity: .45; }
}

/* Bewegt wird der Kasten, nicht die Zeichnung darin. Als Flaeche mit einem
   Bild darauf ist eine Ebene fuer den Browser etwas, das er verschieben
   kann, ohne es neu zu zeichnen. Als eingebettetes SVG mit
   non-scaling-stroke musste er in jedem Halbbild die Striche neu berechnen —
   gemessen 28 statt 60 Bildern je Sekunde. */
.hf__lage {
  position: absolute;
  top: 0;
  left: 0;
  /* Doppelt so breit wie das Fenster: Gezeichnet sind zwei Wellenlaengen,
     verschoben wird um eine. Deshalb ist die Naht nie zu sehen. */
  width: 200%;
  height: 100%;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  background-position: 0 0;
  animation-name: hf-fliessen;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* Tempo und Deckkraft je Ebene. Vorn schneller und deutlicher, hinten
   langsamer und blasser — daraus entsteht die Tiefe, nicht aus einem
   Weichzeichner. Die vorderste Ebene braucht zweieinhalb Minuten fuer eine
   Wellenlaenge, die hinterste knapp sechs. */
.hf__lage--fern {
  background-image: url("/assets/img/hoehen-fern-dunkel.svg");
  animation-duration: 340s;
  opacity: .14;
}

.hf__lage--mittel {
  background-image: url("/assets/img/hoehen-mittel-dunkel.svg");
  animation-duration: 220s;
  /* Die mittlere Ebene laeuft andersherum. Ein Feld, in dem alles in
     dieselbe Richtung zieht, sieht aus wie ein Laufband; eines mit
     Gegenstroemung sieht aus wie Wasser. */
  animation-direction: reverse;
  opacity: .26;
}

.hf__lage--nah {
  background-image: url("/assets/img/hoehen-nah-dunkel.svg");
  animation-duration: 150s;
  opacity: .38;
}

/* Genau eine halbe Kastenbreite — das ist eine Wellenlaenge. */
@keyframes hf-fliessen {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Der Lichtzug. Sehr breit, sehr blass, sehr langsam: Was man bemerkt,
   waehrend man liest, ist ein Fehler und kein Effekt. */
.hf__licht {
  position: absolute;
  top: -25%;
  bottom: -25%;
  width: 55vw;
  left: -60vw;
  background: linear-gradient(102deg,
              transparent 0%,
              rgba(212, 180, 120, .012) 22%,
              rgba(212, 180, 120, .035) 40%,
              rgba(212, 180, 120, .055) 50%,
              rgba(150, 180, 210, .035) 62%,
              rgba(150, 180, 210, .01) 80%,
              transparent 100%);
  /* Kein blur(): Ein Weichzeichner ueber einer Flaeche dieser Groesse
     kostet in jedem Halbbild. Derselbe Eindruck entsteht aus einem
     Verlauf mit vielen weichen Stufen — und der ist gratis. */
  animation: hf-licht 74s linear infinite;
}

@keyframes hf-licht {
  from { transform: translateX(0); }
  to   { transform: translateX(215vw); }
}

/* Im hellen Aufzug wird aus dem Lichtschein eine Tuschezeichnung: dunkle
   Linien auf hellem Grund, und deutlich blasser — ein dunkler Strich auf
   Weiss traegt bei gleicher Deckkraft ungefaehr doppelt so weit. */
/* Im hellen Aufzug dieselbe Landschaft in Tinte statt in Gold — und
   blasser, weil ein dunkler Strich auf Weiss bei gleicher Deckkraft
   ungefaehr doppelt so weit traegt. */
:root[data-thema="hell"] .hf__lage--fern {
  background-image: url("/assets/img/hoehen-fern-hell.svg");
  opacity: .10;
}

:root[data-thema="hell"] .hf__lage--mittel {
  background-image: url("/assets/img/hoehen-mittel-hell.svg");
  opacity: .16;
}

:root[data-thema="hell"] .hf__lage--nah {
  background-image: url("/assets/img/hoehen-nah-hell.svg");
  opacity: .22;
}

:root[data-thema="hell"] .hf__licht {
  background: linear-gradient(102deg,
              transparent 0%,
              rgba(38, 62, 92, .03) 42%,
              rgba(38, 62, 92, .05) 52%,
              transparent 100%);
}

@media print { .hoehenfeld { display: none !important; } }
@media (forced-colors: active) { .hoehenfeld { display: none; } }

/* Wer keine Bewegung will, bekommt keine. Die Linien bleiben — sie sind
   eine Zeichnung und keine Animation —, aber nichts daran ruehrt sich. */
@media (prefers-reduced-motion: reduce) {
  .hf__lage { animation: none; }
  .hf__licht { display: none; }
}

/* =========================================================================
   DIE PRODUKTBUEHNE

   Kacheln zeigten, DASS es ein Produkt gibt. Sie zeigten nicht, WAS es ist
   — dafuer musste man klicken, und wer nicht klickt, hat das Portfolio nie
   gesehen. Eine Buehne je Produkt kostet Hoehe und beantwortet dafuer die
   Frage, die eine Kachel offenlaesst.
   ========================================================================= */

.buehnen {
  display: grid;
  gap: clamp(3.5rem, 7vw, 6.5rem);
}

.buehne {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

/* Abwechselnd: Bild links, Bild rechts, Bild links. Vier gleich gebaute
   Bloecke untereinander liest niemand bis zum vierten. */
.buehne:nth-child(even) .buehne__bild { order: 2; }

.buehne__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.1rem;
  margin: 0 0 var(--space-sm);
}

.buehne__bereich {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.buehne__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.08;
  color: var(--text-strong);
}

.buehne__anspruch {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.35;
  color: var(--akzent, var(--gold));
  max-width: 34ch;
}

.buehne__kurz {
  margin: var(--space-sm) 0 0;
  max-width: 46ch;
  color: var(--text-muted);
}

/* Die drei Zahlen des Produkts, gross gesetzt. Sie sind das Einzige an
   einer Buehne, das eine Groesse zeigt — und das Einzige, was sich
   nachpruefen laesst. */
.buehne__zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}

.buehne__zahlen div { display: grid; gap: .15rem; }

.buehne__zahlen b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.buehne__zahlen div > span {
  font-size: var(--fs-label);
  letter-spacing: .04em;
  color: var(--text-faint);
}

.buehne__wege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0 0;
}

.buehne__direkt { white-space: nowrap; }

/* Die offene Stelle am Ende: dasselbe Format, ohne Bild. */
.buehne--offen {
  grid-template-columns: minmax(0, 1fr);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
}

.buehne--offen .buehne__name { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }

@media (max-width: 860px) {
  .buehne { grid-template-columns: minmax(0, 1fr); }
  /* Auf dem Telefon steht das Bild immer oben — abwechselnd waere dort
     kein Wechsel, sondern Zufall. */
  .buehne:nth-child(even) .buehne__bild { order: 0; }
}

/* --- Der Browserrahmen ---------------------------------------------------
   Ohne Rahmen ist ein Bildschirmfoto ein Bild. Mit Rahmen ist es eine
   Seite, die es gibt — und die Adresse in der Leiste ist dieselbe, die
   darunter als Link steht.
   ------------------------------------------------------------------------ */

.rahmen {
  border: 1px solid var(--line);
  background: var(--ink-raised, var(--ink-2, var(--ink)));
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .8);
  overflow: hidden;
}

.rahmen__leiste {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--line);
  background: rgba(var(--film), .04);
}

.rahmen__punkte { display: flex; gap: .3rem; flex: none; }

.rahmen__punkte i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(var(--film), .18);
}

.rahmen__adresse {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--text-faint);
  text-align: center;
  padding-right: 2rem;   /* gleicht die Punkte links aus */
}

.rahmen__bild { display: block; line-height: 0; }
.rahmen img { width: 100%; height: auto; }

/* Ohne Adresse — ein Produkt ohne eigene Seite bekommt keinen erfundenen
   Rahmen, nur eine Kante. */
.rahmen--ohne { border: 1px solid var(--line); }

.rahmen--zeichen {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5rem);
  color: var(--akzent, var(--gold));
  opacity: .35;
}

@media (prefers-reduced-motion: reduce) {
  .rahmen { box-shadow: none; }
}

/* =========================================================================
   DIREKT HINEIN

   Ein Knopf "Produkt oeffnen" fuehrt auf eine Startseite, und von dort muss
   man wieder suchen. Wer schon weiss, dass er Spanisch lernen will, soll
   dort landen und nicht davor.

   Jede Zeile traegt ihren Pfad mit — sichtbar, in der Schreibmaschine. Das
   ist kein Schmuck: Es macht nachpruefbar, wohin der Verweis fuehrt, bevor
   man ihn anklickt.
   ========================================================================= */

.einstiege {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}

.einstiege li { border-bottom: 1px solid var(--line-soft); }

.einstiege a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  color: var(--text);
  transition: color var(--dur-fast) var(--ease);
}

/* Der Pfeil steht nicht da, er entsteht beim Zeigen — sonst haetten fuenf
   Zeilen fuenf Pfeile, und die Liste saehe aus wie ein Menue. */
.einstiege a::after {
  content: '→';
  flex: none;
  opacity: 0;
  transform: translateX(-.3em);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  color: var(--akzent, var(--gold));
}

.einstiege a:hover,
.einstiege a:focus-visible { color: var(--akzent, var(--gold-bright)); }

.einstiege a:hover::after,
.einstiege a:focus-visible::after { opacity: 1; transform: none; }

.einstiege__wort { flex: 1; min-width: 0; }

.einstiege__pfad {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .02em;
  color: var(--text-faint);
}

@media (max-width: 520px) {
  /* Auf dem Telefon faellt der Pfad weg: Er ist eine Zugabe fuer den, der
     prueft, und dort nimmt er der Beschriftung den Platz. */
  .einstiege__pfad { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .einstiege a::after { transition: none; }
}

/* =========================================================================
   EINBLICK

   Ein einzelnes Bild einer Startseite sagt, dass es die Seite gibt. Zwei
   Bilder aus dem Inneren sagen, was drin ist. Ueber jedem steht die
   Adresse, die es zeigt — dieselbe, die weiter unten als Weg angeboten
   wird. Wer nachsieht, findet dasselbe.
   ========================================================================= */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(23rem, 100%), 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.galerie__stueck { margin: 0; }

.galerie figcaption {
  margin-top: var(--space-sm);
  font-size: .9rem;
  color: var(--text-muted);
}

/* Das Bild ist der Weg. Wer den Schnappschuss einer Seite sieht, klickt
   darauf — also muss er dorthin fuehren, wo die Adresse in der Leiste
   darueber hinzeigt. Der Hinweis liegt im Bild und ist immer da, nicht
   erst beim Zeigen: Auf einem Telefon gibt es kein Zeigen. */
.galerie__weg {
  display: block;
  color: inherit;
  transition: transform var(--dur) var(--ease);
}

.galerie__weg .rahmen {
  position: relative;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.galerie__weg:hover { transform: translateY(-3px); }

.galerie__weg:hover .rahmen,
.galerie__weg:focus-visible .rahmen {
  border-color: var(--akzent, var(--gold));
}

.galerie__weg .rahmen__bild { position: relative; }

.galerie__hinweis {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .38em .7em;
  border: 1px solid rgba(var(--film), .16);
  border-radius: 2px;
  background: rgba(10, 12, 16, .72);
  font-size: .7rem;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #f2ead8;
  opacity: .78;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}

.galerie__hinweis::after { content: '\2197'; }

.galerie__weg:hover .galerie__hinweis,
.galerie__weg:focus-visible .galerie__hinweis {
  opacity: 1;
  background: rgba(10, 12, 16, .88);
}

@media (prefers-reduced-motion: reduce) {
  .galerie__weg:hover { transform: none; }
}

@media print {
  .galerie__hinweis { display: none; }
}

/* =========================================================================
   DIE KOSTPROBE

   Vier Zeilen aus dem Produkt, im Wortlaut. Alles andere auf einer
   Produktseite sagt, was es gibt; das hier zeigt, wie es klingt.

   Sie sind bewusst als Karten gesetzt und nicht als Zitatblock: Ein Zitat
   gehoert jemand anderem, dieser Text gehoert uns — er steht nur woanders.
   Und jede Karte ist ein Weg dorthin.
   ========================================================================= */

.proben {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1px;
  background: rgba(var(--film), 0.08);
  border: 1px solid rgba(var(--film), 0.08);
}

.probe { margin: 0; }

.probe a {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  height: 100%;
  padding: var(--space-md);
  background: var(--ink);
  color: inherit;
  transition: background var(--dur) var(--ease);
}

.probe a:hover { background: rgba(var(--film), 0.04); }

.probe__marke {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--akzent, var(--gold));
}

.probe__titel {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--text-strong);
}

.probe__text {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Steht der Name des Begriffs schon in der Marke, waere er darunter eine
   Wiederholung. Dann traegt die Karte nur die Erklaerung. */
.probe__marke + .probe__titel:only-of-type { }

@media (max-width: 560px) {
  .probe a { padding: var(--space-sm) var(--space-md); }
}

/* =========================================================================
   DIE MITLAUFENDE LEISTE

   Auf einer Produktseite steht der Weg zum Produkt oben und ganz unten.
   Dazwischen liegen zehn Abschnitte — wer beim Lesen ueberzeugt wird, muss
   zum Handeln erst wieder scrollen. Und wer scrollen muss, tut es meistens
   nicht.

   Ohne JavaScript bleibt sie stehen, wo sie im Text steht: am Fuss der
   Seite, als gewoehnlicher Kasten. Ein Weg zum Produkt, der von einem
   Skript abhaengt, ist kein Weg.
   ========================================================================= */

.js .klebeleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(10px);
}

.js .klebeleiste[data-zeigen="true"] { transform: translateY(0); }

.klebeleiste__inner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 10px var(--space-md);
}

.klebeleiste__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--akzent, var(--gold));
}

.klebeleiste__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.klebeleiste__text b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  color: var(--text-strong);
}

.klebeleiste__text span {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.klebeleiste__weg { margin-left: auto; flex: none; }

/* Solange die Leiste steht, bekommt der Fuss der Seite Platz — sonst
   verdeckt sie die letzte Zeile. */
.js body.hat-klebeleiste { padding-bottom: 62px; }

/* Der Knopf nach oben weicht der Leiste aus, statt auf ihr zu liegen. */
.js body.hat-klebeleiste .to-top { bottom: calc(clamp(1rem, 3vw, 2.5rem) + 58px); }

/* Ohne Skript: ein gewoehnlicher Kasten am Ende der Seite. */
html:not(.js) .klebeleiste {
  border-top: 1px solid var(--line);
  background: rgba(var(--film), 0.02);
}

@media (max-width: 560px) {
  .klebeleiste__text span { display: none; }
  .klebeleiste__inner { padding: 8px var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .js .klebeleiste { transition-duration: 1ms; }
}

@media print { .klebeleiste { display: none; } }

/* Zwei Wege mitten in das Produkt, unter den Knoepfen der Buehne. Sie sind
   bewusst leiser gesetzt als die Knoepfe darueber: Wer nichts Bestimmtes
   sucht, nimmt den Knopf; wer etwas Bestimmtes sucht, findet hier den
   kuerzeren Weg. */
.buehne__hinein {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1rem;
  margin-top: var(--space-sm);
  font-size: .88rem;
}

.buehne__hinein-wort {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.buehne__hinein a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: .28em;
  transition: color var(--dur-fast) var(--ease),
              text-decoration-color var(--dur-fast) var(--ease);
}

.buehne__hinein a:hover {
  color: var(--akzent, var(--gold));
  text-decoration-color: var(--akzent, var(--gold));
}

/* =========================================================================
   DIREKT HINEIN, IM PORTFOLIO

   Dieselben Wege wie auf der Produktseite, hier nach Haus geordnet. Wer im
   Portfolio steht, hat sich noch fuer nichts entschieden — und sieht an
   neun Zeilen schneller, was es unter diesem Dach zu holen gibt, als an
   vier Kacheln.
   ========================================================================= */

.hinein {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.hinein__haus { min-width: 0; }

.hinein__name {
  margin: 0 0 var(--space-sm);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.2;
}

.hinein__name a {
  color: var(--text-strong);
  transition: color var(--dur-fast) var(--ease);
}

.hinein__name a:hover { color: var(--akzent, var(--gold)); }

.hinein__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hinein__liste li + li { border-top: 1px solid var(--line-soft); }

.hinein__liste a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: .55rem 0;
  color: var(--text);
  transition: color var(--dur-fast) var(--ease);
}

.hinein__liste a::after {
  content: '→';
  flex: none;
  opacity: 0;
  transform: translateX(-.3em);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  color: var(--akzent, var(--gold));
}

.hinein__liste a:hover,
.hinein__liste a:focus-visible { color: var(--akzent, var(--gold-bright)); }

.hinein__liste a:hover::after,
.hinein__liste a:focus-visible::after { opacity: 1; transform: none; }

.hinein__wort { flex: 1; min-width: 0; font-size: .95rem; }

.hinein__pfad {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .hinein__pfad { display: none; }
}

/* =========================================================================
   DIE LIVEZEILE

   Vier Adressen unter dem Kopf der Startseite. Ueber der Faltkante stand
   bisher, was dieses Haus ist; was es hat, stand weiter unten. Wer nicht
   scrollt, hatte vier Seiten nicht gesehen, die es wirklich gibt.

   Kein Bild, kein Kasten, keine Behauptung — die Adressen in der Schrift,
   in der Adressen geschrieben werden.
   ========================================================================= */

.livezeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.4rem;
  margin: var(--space-md) 0 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .02em;
}

.livezeile__wort {
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.livezeile__ziel {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}

.livezeile__ziel:hover,
.livezeile__ziel:focus-visible { color: var(--akzent, var(--gold)); }

.livezeile__punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--akzent, var(--gold));
  flex: none;
}

/* Ein Produkt im Aufbau bekommt einen hohlen Punkt — dieselbe Sprache wie
   die Statuszeile auf den Karten, damit beides dasselbe heisst. */
.livezeile__punkt.status--entwicklung {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--akzent, var(--gold));
}

@media (max-width: 560px) {
  .livezeile { gap: .35rem 1rem; font-size: .72rem; }
}

/* Im Kopfband steht die Zeile immer auf dunklem Grund — auch im hellen
   Thema, dessen Grautoene dort dunkelgrau auf Schwarz ergaben (2,4:1), und
   seit dem Video ueber bewegtem Licht. Deshalb feste helle Toene, eine
   Stufe kraeftiger als die stillen Grauwerte, unabhaengig vom Thema. */
.hero .livezeile__wort { color: #9AA3B0; }
.hero .livezeile__ziel { color: #C3CAD4; }
.hero .livezeile__ziel:hover,
.hero .livezeile__ziel:focus-visible { color: var(--akzent, #E4C489); }


@keyframes prisma-facette {
  from { opacity: 0; transform: translateX(-12%) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================================
   Startseitenkopf, zweite Fassung (Oktober 2026)

   Die erste Fassung trug, was viele Seiten tragen: eine gesperrte
   Versalzeile, eine Zeile mit Goldglanz, einen langen Absatz mit allen
   Produktnamen und zwei gleich schwere Versalknoepfe. Jedes fuer sich
   ordentlich — zusammen das Muster, das man inzwischen sofort als
   Baukasten erkennt. Diese Fassung setzt auf Typografie statt Effekt und
   auf Belege statt Behauptungen:

   - die Ueberschrift in der Antiqua, die zweite Zeile kursiv statt golden;
   - ein Satz statt eines Absatzes;
   - ein klarer Knopf und ein leiser Verweis — eine Hauptaktion, nicht zwei;
   - darunter das Belegraster: je Produkt die erste Kennzahl, live
     abgelesen, mit Datum (siehe beleg() in build.py).

   Das Kopfband ist in beiden Themen dunkel, deshalb feste helle Toene.
   ========================================================================= */
.hero--start .hero__marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--space-md);
  padding: 0.42rem 0.9rem 0.42rem 0.75rem;
  border: 1px solid rgba(243, 245, 248, 0.16);
  border-radius: 999px;
  background: rgba(10, 13, 20, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 450;
  letter-spacing: 0;
  color: #D3D9E2;
}

.hero__puls,
.beleg__puls {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #5BD49A;
}
.hero__puls::after,
.beleg__puls::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid #5BD49A;
  opacity: 0;
  animation: puls 2.6s var(--ease) infinite;
}
@keyframes puls {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Die Ueberschrift: Antiqua, 400, kaum gesperrt. Die zweite Zeile kursiv
   und im Ton des Zeichens — ohne Glanz, ohne Verlauf, ohne Lichtzug. Die
   Regeln der ersten Fassung (Gold, text-shadow, goldzug, die helle
   Verlaufsfassung) werden hier ausdruecklich zurueckgenommen; deshalb die
   hoehere Spezifitaet. */
.hero.hero--start .hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(3.1rem, 7.6vw, 6.9rem);
  line-height: 0.96;
  letter-spacing: -0.018em;
  margin: 0 0 var(--space-md);
  max-width: 11.5em;
}
:root .hero.hero--start .hero__title em {
  display: block;
  font-style: italic;
  color: #BFCBFF;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
  animation: none;
}

.hero--start .hero__lead {
  font-size: clamp(1.08rem, 1.5vw, 1.24rem);
  line-height: 1.6;
  max-width: 34rem;
  color: #C9D0D9;
  margin: 0 0 var(--space-lg);
}

.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.8rem;
}

.hero-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.45rem 0.95rem 1.6rem;
  border-radius: 999px;
  background: #F3F5F8;
  color: #07090C;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 560;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(147, 168, 255, 0.55);
  transition: background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.hero-knopf svg { transition: transform var(--dur-fast) var(--ease); }
.hero-knopf:hover,
.hero-knopf:focus-visible {
  background: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -12px rgba(147, 168, 255, 0.75);
}
.hero-knopf:hover svg,
.hero-knopf:focus-visible svg { transform: translateX(3px); }
.hero-knopf:focus-visible,
.hero-link:focus-visible,
.beleg__eintrag:focus-visible {
  outline: 2px solid #BFCBFF;
  outline-offset: 3px;
}

.hero-link {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: #F3F5F8;
  text-decoration: underline;
  text-decoration-color: rgba(243, 245, 248, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.hero-link:hover { text-decoration-color: #F3F5F8; }

/* --- Das Belegraster ----------------------------------------------------- */
.beleg {
  margin-top: clamp(2.6rem, 6vw, 4.2rem);
  max-width: 46rem;
}
.beleg__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(243, 245, 248, 0.16);
}
.beleg__titel {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 550;
  color: #E7EAF0;
}
.beleg__stand {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #A9B1BD;
}
.beleg__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.beleg__liste li { border-bottom: 1px solid rgba(243, 245, 248, 0.09); }
.beleg__eintrag {
  display: grid;
  gap: 0.15rem;
  height: 100%;
  padding: 1.05rem 1rem 1.1rem 0;
  color: inherit;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
/* Geist mit Ziffern gleicher Breite statt der Mono: In der Mono ist das
   Leerzeichen in "1 516" so breit wie eine Ziffer, und die Zahl faellt
   auseinander. */
.beleg__zahl {
  font-family: var(--font-body);
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  font-weight: 520;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: #F3F5F8;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease);
}
.beleg__was {
  font-size: 0.9rem;
  color: #C9D0D9;
}
.beleg__produkt {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #C3CAD4;   /* #A9B1BD reichte auf dem Telefon ueber dem helleren
                       unteren Videorand nur fuer 3,3:1 */
}
.beleg__produkt::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--akzent, #BFCBFF);
}
.beleg__eintrag:hover .beleg__zahl,
.beleg__eintrag:focus-visible .beleg__zahl { color: var(--akzent, #BFCBFF); }
.beleg__eintrag:hover .beleg__produkt { color: #E7EAF0; }

@media (max-width: 760px) {
  .beleg__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Hochkant liegt das Raster ueber dem helleren unteren Videorand. Ein
     Grund statt einer helleren Schrift: Die Schrift ist schon hell. */
  .beleg {
    padding: 1rem 1.1rem 0.2rem;
    border: 1px solid rgba(243, 245, 248, 0.1);
    border-radius: 18px;
    background: rgba(10, 13, 20, 0.62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .beleg__liste li:nth-last-child(-n+2) { border-bottom: 0; }
  .hero.hero--start .hero__title { font-size: clamp(2.7rem, 12.5vw, 4rem); }
  .hero-knopf { padding: 0.9rem 1.3rem 0.9rem 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__puls::after,
  .beleg__puls::after { animation: none; }
}

/* =========================================================================
   FARBEN = "indigo" (Oktober 2026)

   Ein Akzent statt neun. Vorher riefen Gold, Indigo, Cyan und sechs
   Produktfarben gleichzeitig "schau hierher" — und hoben sich damit auf.
   Jetzt traegt das Indigo des Prisma-Zeichens alles, was Akzent ist:
   Knoepfe, Verweise, Fokus, Auszeichnungen. Die Produktfarben bleiben,
   aber nur als Kennung (Punkt, Rahmen, Monogramm), nie als Schriftfarbe.

   Umgesetzt ueber die bestehenden Marken --gold, --gold-bright, --gold-dim:
   Ihre Namen sind historisch, ihre Rolle ist "Akzent". So greift der
   Wechsel ueberall, ohne 115 Regeln anzufassen, und FARBEN = "gold" in
   build.py holt den alten Stand zurueck.

   Werte gegen die Grundflaechen gemessen:
     dunkel  #8B93FF auf #07090C  7,3:1   (als Flaeche mit dunkler Schrift ebenso)
     hell    #4338CA auf #F5F7FA  7,4:1   (als Flaeche mit heller Schrift ebenso)
   ========================================================================= */
:root[data-farbe="indigo"] {
  --gold:        #8B93FF;
  --gold-bright: #B3B9FF;
  --gold-dim:    #4D53B8;
}
:root[data-farbe="indigo"][data-thema="hell"] {
  --gold:        #4338CA;
  --gold-bright: #312A9E;
  --gold-dim:    #A4A8EE;
}

/* Der volle Knopf: Schein im Ton des Akzents statt in Gold. */
:root[data-farbe="indigo"] .btn--solid { box-shadow: 0 10px 34px -16px rgba(139, 147, 255, 0.7); }
:root[data-farbe="indigo"] .btn--solid:hover { box-shadow: 0 14px 40px -14px rgba(139, 147, 255, 0.85); }

/* Das Kopfband ist in beiden Themen dunkel; dort gilt das helle Indigo,
   auch wenn die Seite sonst hell ist. */
:root[data-farbe="indigo"][data-thema="hell"] .hero__kicker,
:root[data-farbe="indigo"][data-thema="hell"] .hero__title em { color: #B3B9FF; }
:root[data-farbe="indigo"] .hero__title em { text-shadow: none; }
:root[data-farbe="indigo"][data-thema="hell"] .hero__title em {
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}
:root[data-farbe="indigo"][data-thema="hell"] .hero__rule {
  background: linear-gradient(90deg, #4D53B8, rgba(243, 245, 248, 0.16) 55%, transparent);
}
:root[data-farbe="indigo"][data-thema="hell"] .hero .btn--solid {
  background: linear-gradient(160deg, #B3B9FF, #8B93FF 62%);
  border-color: #B3B9FF;
  color: #07090C;
}
:root[data-farbe="indigo"][data-thema="hell"] .hero .btn:not(.btn--solid)::before { background: #8B93FF; }

/* Produktfarben nur als Kennung: Aussagen und Zahlen in Schriftfarbe,
   Hover in Indigo. Das Monogramm, der Punkt und der Rahmen behalten die
   Farbe des Produkts. */
:root[data-farbe="indigo"] .product-hero__claim,
:root[data-farbe="indigo"] .buehne__anspruch,
:root[data-farbe="indigo"] .kennzahl b { color: var(--text-strong); }
/* Der Kopf bleibt in beiden Aufzuegen dunkel. --text-strong ist im hellen
   Aufzug fast schwarz — auf dem dunklen Kopf stand der Anspruch damit
   unsichtbar da und sah aus, als lade die Seite noch. */
:root[data-farbe="indigo"] .hero .product-hero__claim { color: #F3F5F8; }
:root[data-farbe="indigo"] .product:hover .product__name,
:root[data-farbe="indigo"] .einstiege a:hover,
:root[data-farbe="indigo"] .einstiege a:focus-visible,
:root[data-farbe="indigo"] .buehne__hinein a:hover,
:root[data-farbe="indigo"] .hinein__name a:hover,
:root[data-farbe="indigo"] .hinein__liste a:hover,
:root[data-farbe="indigo"] .hinein__liste a:focus-visible { color: var(--gold); }

/* =========================================================================
   STARTSEITE = "atlas" (Oktober 2026)

   Alle Produkte auf dem ersten Bildschirm. Der Kopf wird kuerzer, darunter
   ein dunkles Band mit Ueberschrift, Themenfilter und Stand, und das
   Kachelraster greift von dort in den hellen Grund hinein — die Kacheln
   stehen so schon im ersten Bild, auch auf einem Laptop.

   Das Band hat die Farbe, in die der Schleier des Kopfs unten auslaeuft
   (--szene), damit kein Absatz entsteht. Seine Schrift ist deshalb fest
   hell, in beiden Themen.
   ========================================================================= */
.hero.hero--atlas { padding-top: calc(var(--header-h) + 2.6rem); padding-bottom: var(--space-md); }
.hero--atlas .hero__marke { margin-bottom: 1.1rem; }
:root[data-thema="hell"] .hero--atlas { border-bottom: 0; }
.hero.hero--start.hero--atlas .hero__title { font-size: clamp(2.6rem, 5.4vw, 4.6rem); margin-bottom: 1.1rem; }
.hero--atlas .hero__lead { margin-bottom: 1.6rem; }

.atlas { position: relative; padding-bottom: var(--space-2xl); }
.atlas__oben { background: rgb(var(--szene)); padding-bottom: 7.5rem; }
.atlas__leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  padding-top: var(--space-md);
}
.atlas__titel {
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  color: #F3F5F8;
  margin-right: auto;
}
.atlas__filter { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.atlas__filter[hidden], .atlas__kachel[hidden] { display: none; }
.atlas__filter button {
  font: 500 0.86rem/1 var(--font-body);
  color: #D3D9E2;
  background: rgba(243, 245, 248, 0.05);
  border: 1px solid rgba(243, 245, 248, 0.2);
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.atlas__filter button:hover { background: rgba(243, 245, 248, 0.12); }
.atlas__filter button[aria-pressed="true"] { background: #F3F5F8; color: #07090C; border-color: #F3F5F8; }
.atlas__filter button:focus-visible { outline: 2px solid #B3B9FF; outline-offset: 2px; }
.atlas__stand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #A9B1BD;
  flex-basis: 100%;
}

.atlas__raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: -6.4rem;
  position: relative;
  z-index: 2;
}
.atlas__kachel {
  grid-column: span 3;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(5, 7, 11, 0.04), 0 14px 34px -22px rgba(5, 7, 11, 0.45);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.atlas__kachel:hover,
.atlas__kachel:focus-within {
  transform: translateY(-2px);
  border-color: var(--gold-dim);
  box-shadow: 0 1px 0 rgba(5, 7, 11, 0.04), 0 20px 40px -22px rgba(5, 7, 11, 0.55);
}
.atlas__kachel--gross {
  grid-column: span 6;
  grid-template-rows: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.atlas__bild { display: block; aspect-ratio: 16 / 8; overflow: hidden; background: var(--ink-deep); border-bottom: 1px solid var(--line); }
.atlas__kachel--gross .atlas__bild { order: 2; aspect-ratio: auto; border-bottom: 0; border-left: 1px solid var(--line); min-height: 15rem; }
.atlas__bild img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; transition: transform 0.6s var(--ease); }
.atlas__kachel:hover .atlas__bild img { transform: scale(1.03); }

.atlas__text { display: grid; gap: 0.5rem; align-content: start; padding: 1.1rem 1.2rem 1.15rem; }
.atlas__kachel--gross .atlas__text { padding: 1.4rem 1.5rem; }
.atlas__kopf { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.78rem; color: var(--text-muted); }
.atlas__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent, var(--gold)); flex: none; }
.atlas__name { font-family: var(--font-body); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.015em; margin: 0; }
.atlas__kachel--gross .atlas__name { font-size: 1.5rem; }
.atlas__name a { color: var(--text-strong); text-decoration: none; }
/* Die ganze Kachel fuehrt zur Detailseite; "Oeffnen" liegt darueber und
   fuehrt ins Produkt. */
.atlas__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.atlas__name a:focus-visible { outline: none; }
.atlas__kachel:has(.atlas__name a:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.atlas__claim { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-muted); }
.atlas__kachel--gross .atlas__claim { font-size: 1rem; }
.atlas__zahl { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.25rem 0 0; flex-wrap: wrap; }
.atlas__zahl b { font-weight: 500; font-size: 1.55rem; letter-spacing: -0.03em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.atlas__kachel--gross .atlas__zahl b { font-size: 2rem; }
.atlas__zahl span { font-size: 0.82rem; color: var(--text-muted); }
.atlas__wege { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin: 0.35rem 0 0; font-size: 0.86rem; }
.atlas__mehr { color: var(--gold); font-weight: 550; }
.atlas__mehr::after { content: " →"; }
.atlas__oeffnen { position: relative; z-index: 2; color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.atlas__oeffnen:hover, .atlas__oeffnen:focus-visible { color: var(--gold); text-decoration-color: currentColor; }

/* Gefiltert: alle Kacheln gleich gross — eine grosse Kachel neben einer
   Luecke saehe nach Fehler aus. */
.atlas__raster[data-gefiltert] .atlas__kachel { grid-column: span 4; grid-template-columns: none; grid-template-rows: auto 1fr; }
.atlas__raster[data-gefiltert] .atlas__kachel .atlas__bild { order: 0; aspect-ratio: 16 / 8; min-height: 0; border-left: 0; border-bottom: 1px solid var(--line); }

@media (max-width: 1000px) {
  .atlas__kachel { grid-column: span 6; }
  .atlas__kachel--gross { grid-column: span 12; }
  .atlas__raster[data-gefiltert] .atlas__kachel { grid-column: span 6; }
}
@media (max-width: 640px) {
  .atlas__oben { padding-bottom: 6rem; }
  .atlas__raster { gap: 12px; margin-top: -5rem; }
  .atlas__kachel,
  .atlas__kachel--gross,
  .atlas__raster[data-gefiltert] .atlas__kachel { grid-column: span 12; }
  .atlas__kachel--gross { grid-template-columns: none; grid-template-rows: auto 1fr; }
  .atlas__kachel--gross .atlas__bild { order: 0; aspect-ratio: 16 / 8; min-height: 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .atlas__kachel--gross .atlas__name { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas__kachel, .atlas__bild img { transition: none; }
  .atlas__kachel:hover, .atlas__kachel:focus-within { transform: none; }
  .atlas__kachel:hover .atlas__bild img { transform: none; }
}

/* Im Atlas geht der Kopf nahtlos in das dunkle Band ueber — der Schleier
   endet deshalb in der Farbe der Szene, nicht im Seitengrund. */
@media (max-width: 760px) {
  .hero--atlas .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(var(--szene), 1) 0%,
        rgba(var(--szene), 0.95) 36%,
        rgba(var(--szene), 0.74) 62%,
        rgba(var(--szene), 0.6) 84%,
        rgba(var(--szene), 1) 100%);
  }
}

/* --- Ausprobier-Buehne ------------------------------------------------
   Eine echte Probe aus jedem Produkt, direkt unter dem Atlas. Heller
   Grund wie alles, was gelesen wird; die Produktfarbe nur als Punkt
   und als Rand der Antwort, Indigo fuer alles, was man drueckt. */
.versuche { padding: var(--space-2xl) 0 var(--space-xl); }
.versuche__kopf { max-width: 44rem; margin-bottom: var(--space-md); }
.versuche__kopf h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 0.35rem 0 0.75rem; }
.versuche__lead { color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; margin: 0; }
.versuche__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.versuch {
  display: grid;
  gap: 0.85rem;
  padding: 1.25rem 1.3rem 1.2rem;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(5, 7, 11, 0.04), 0 14px 34px -24px rgba(5, 7, 11, 0.4);
}
.versuch--rechner { grid-column: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.6rem; }
.versuch--rechner > .versuch__kopf,
.versuch--rechner > .versuch__frage { grid-column: 1 / -1; }
.versuch__kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.55rem;
  margin: 0; font-size: 0.82rem; color: var(--text-muted);
}
.versuch__produkt { color: var(--text-strong); font-weight: 600; }
.versuch__marke { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.02em; }
.versuch__marke { flex-basis: 100%; padding-left: calc(8px + 0.55rem); }
.versuch__frage {
  font-family: var(--font-body); font-weight: 600; font-size: 1.12rem;
  line-height: 1.4; color: var(--text-strong); margin: 0; letter-spacing: -0.005em;
}
.versuch__hinweis { margin: -0.4rem 0 0; font-size: 0.8rem; color: var(--text-muted); }
.versuch__optionen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.versuch__option {
  width: 100%; text-align: left;
  font: 500 0.95rem/1.4 var(--font-body);
  color: var(--text); background: transparent;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 0.62rem 0.85rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.versuch__option:hover:not(:disabled) { border-color: var(--gold); background: rgba(139, 147, 255, 0.07); }
.versuch__option:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.versuch__option:disabled { cursor: default; color: var(--text); }
.versuch--beantwortet .versuch__option:not(.versuch__option--richtig):not(.versuch__option--falsch) { color: var(--text-muted); border-color: var(--line-soft); }
.versuch__option--richtig { border-color: #2F9E6E; background: rgba(47, 158, 110, 0.1); }
.versuch__option--richtig::after { content: " ✓"; color: #2F9E6E; font-weight: 700; }
.versuch__option--falsch { border-color: #C2554A; background: rgba(194, 85, 74, 0.08); }
.versuch__option--falsch::after { content: " ✗"; color: #C2554A; font-weight: 700; }
:root[data-thema="hell"] .versuch__option--richtig::after { color: #1D7550; }
:root[data-thema="hell"] .versuch__option--falsch::after { color: #A23B31; }

.versuch__loesung { border-top: 1px solid var(--line-soft); padding-top: 0.7rem; }
.versuch__loesung summary {
  cursor: pointer; font-size: 0.86rem; font-weight: 500; color: var(--gold);
  list-style: none;
}
.versuch__loesung summary::-webkit-details-marker { display: none; }
.versuch__loesung summary::before { content: "+ "; }
.versuch__loesung[open] summary::before { content: "− "; }
.versuch--beantwortet .versuch__loesung summary { display: none; }
.versuch--beantwortet .versuch__loesung { border-top: 0; padding-top: 0; }
.versuch__ergebnis { margin: 0.5rem 0 0.4rem; font-weight: 600; color: var(--text-strong); }
.versuch--beantwortet .versuch__ergebnis { margin-top: 0; }
.versuch__warum { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--text-muted); }
.versuch__warum--zitat {
  border-left: 2px solid var(--akzent, var(--gold));
  padding-left: 0.8rem;
}
.versuch__weiter {
  justify-self: start;
  font-size: 0.9rem; font-weight: 600; color: var(--gold);
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.versuch__weiter:hover { color: var(--gold-bright); }
.versuch__weiter:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.versuch__rechner { display: grid; gap: 0.7rem; margin: 0; }
.versuch__rechner label { display: grid; gap: 0.3rem; font-size: 0.84rem; color: var(--text-muted); }
.versuch__rechner input {
  font: 500 1.05rem/1.2 var(--font-body); color: var(--text-strong);
  background: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.6rem 0.75rem; width: 100%;
}
.versuch__rechner input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.versuch__ergebnisse { margin: 0; display: grid; gap: 0.7rem; align-content: start; }
.versuch__ergebnisse div {
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 0.65rem 0.85rem;
  background: var(--ink);
}
.versuch__ergebnisse dt { font-size: 0.8rem; color: var(--text-muted); }
.versuch__ergebnisse dd { margin: 0.15rem 0 0; font: 400 1.7rem/1.15 var(--font-serif); color: var(--text-strong); }
.versuch--rechner > .versuch__warum,
.versuch--rechner > .versuch__weiter { grid-column: 1 / -1; }

@media (max-width: 1000px) {
  .versuche__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .versuch--rechner { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .versuche { padding-top: var(--space-xl); }
  .versuche__raster { grid-template-columns: minmax(0, 1fr); }
  .versuch--rechner { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .versuch__option { transition: none; }
}

/* --- Leichter Gang ------------------------------------------------------
   Gesetzt von initLeistung() in main.js, nur wenn ein Geraet beim Messen
   spuerbar Bilder verliert. Es faellt Zierrat weg, kein Inhalt: Die
   Unschaerfe hinter der Kopfzeile (wird ueber bewegtem Grund in jedem Bild
   neu gerechnet) weicht einem fast deckenden Grund, die Hoehenlinien
   bleiben als Zeichnung stehen, der Lichtzug entfaellt. */
:root[data-leicht] .header,
:root[data-leicht] .header--scrolled,
:root[data-leicht] .hero--start .hero__marke {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root[data-leicht] .header {
  background: linear-gradient(180deg,
              rgba(var(--grund), 0.88), rgba(var(--grund), 0.5) 70%, transparent);
}
:root[data-leicht] .header--scrolled { background: rgba(var(--grund), 0.95); }
:root[data-leicht] .hf__lage { animation-play-state: paused; }
:root[data-leicht] .hf__licht { display: none; }
/* Ohne Unschaerfe traegt der Grund der Marke im Kopf allein — dichter. */
:root[data-leicht] .hero--start .hero__marke { background: rgba(10, 13, 20, 0.72); }


/* -------------------------------------------------------------
   Akzentfarben der Produkte — beim Bauen aus data/products.json
   erzeugt. Nicht von Hand pflegen.
   ------------------------------------------------------------- */
.akzent-everylingua { --akzent: #45C3A4; }
.vt-bild-everylingua { view-transition-name: bild-everylingua; }
.vt-titel-everylingua { view-transition-name: titel-everylingua; }
.vt-karte-everylingua { view-transition-name: karte-everylingua; }
.akzent-bootsschein-trainer { --akzent: #D2953F; }
.vt-bild-bootsschein-trainer { view-transition-name: bild-bootsschein-trainer; }
.vt-titel-bootsschein-trainer { view-transition-name: titel-bootsschein-trainer; }
.vt-karte-bootsschein-trainer { view-transition-name: karte-bootsschein-trainer; }
.akzent-einbuergerungstest { --akzent: #D98A7E; }
.vt-bild-einbuergerungstest { view-transition-name: bild-einbuergerungstest; }
.vt-titel-einbuergerungstest { view-transition-name: titel-einbuergerungstest; }
.vt-karte-einbuergerungstest { view-transition-name: karte-einbuergerungstest; }
.akzent-immozahl { --akzent: #7FC0A4; }
.vt-bild-immozahl { view-transition-name: bild-immozahl; }
.vt-titel-immozahl { view-transition-name: titel-immozahl; }
.vt-karte-immozahl { view-transition-name: karte-immozahl; }
.akzent-strikeandyield { --akzent: #4D9FFF; }
.vt-bild-strikeandyield { view-transition-name: bild-strikeandyield; }
.vt-titel-strikeandyield { view-transition-name: titel-strikeandyield; }
.vt-karte-strikeandyield { view-transition-name: karte-strikeandyield; }
.akzent-indigo-atoll { --akzent: #5FB3B3; }
.vt-bild-indigo-atoll { view-transition-name: bild-indigo-atoll; }
.vt-titel-indigo-atoll { view-transition-name: titel-indigo-atoll; }
.vt-karte-indigo-atoll { view-transition-name: karte-indigo-atoll; }

.vorschau-everylingua {
  background-image: url("data:image/webp;base64,UklGRn4AAABXRUJQVlA4IHIAAADwAwCdASoYAA8APrVIn0onJCKhsAgA4BaJZQAAW52tG6D5vOTaVI6AAP71HVryCYDC5/BK9fS0i9l7QW8nrHvUOICYwjTi9jms358ezT6Er7p5ts181x487PZPOe1ja5PvOOybe/SjAexh/CK766uAAAA=");
  background-size: cover;
  background-position: center;
}
.vorschau-bootsschein-trainer {
  background-image: url("data:image/webp;base64,UklGRqYAAABXRUJQVlA4IJoAAAAwBACdASoYAA8APrVKn0onJCKhsAgA4BaJYgCdAywBs/jLIG9cFV4BO4AA/vQSSm7299IOaIgcRalkHqu/aA116yY3vQSjp5Xqh6jgXajaIlvw2soi43xy2SmUQcaevoIeBs3epUN0lgR1aM+LvUtb3KJoT2VnfOxjA7uWvHi67tGZ/dJA27tc4Le8XidMUfujXj6ihhhIvRAA");
  background-size: cover;
  background-position: center;
}
.vorschau-einbuergerungstest {
  background-image: url("data:image/webp;base64,UklGRpAAAABXRUJQVlA4IIQAAAAQBACdASoYAA8APrVMnkmnJKKhMAgA4BaJYwC/OCIj6HiQ7r5Ln94vgAD+9zOPjDlmsM2JjVZlSsuXS1v7Cn16HQkBCM8+otaR98nmuTBLX4k1Q+FK/D1eYVQS+WMua7XxGrcnHWC9bSUbr6fPZ8fLwc3OpwD0yMPg7i7kNLMectZAAAA=");
  background-size: cover;
  background-position: center;
}
.vorschau-immozahl {
  background-image: url("data:image/webp;base64,UklGRlQAAABXRUJQVlA4IEgAAABQAwCdASoYAA8APrVKn0onJCKhsAgA4BaJaQAAXAYlmeMBgAD+9w5u76fgq9WwIGUKT6mxPY4QOjrx2VKV7yytvmCIEXmAAAA=");
  background-size: cover;
  background-position: center;
}
.vorschau-strikeandyield {
  background-image: url("data:image/webp;base64,UklGRlgAAABXRUJQVlA4IEwAAABQAwCdASoYAA8APrVInkmnJCKhMAgA4BaJZwC7ACHhVp0y2AD+9w6NO0Hkt7x4xPNaJy65R4t0lvz7RM9musLxXiqsfUmYLoHw8AAA");
  background-size: cover;
  background-position: center;
}
.vorschau-indigo-atoll {
  background-image: url("data:image/webp;base64,UklGRsAAAABXRUJQVlA4ILQAAADwBACdASoYAA8APrVInkmnJCKhMAgA4BaJbACdL11s1bJRA0rSBLIr0tXJqi8MD2AA/uwa3VJrcgkVhrTiJWsCEiCThCY7miYnQ4WmTwZQW8pruSTIyXlaLqWoTxo/JuvBHs9UaP6+y1J9rhpnuwDfEC98fj3jSep8sCaf09u2hVV4N9YaqVZ8/Ao+qQCsFs4sqs6kLxzlSEZgKk1WkTuxtgHK5g/HstlM/+Xaw2uBq8AAAAA=");
  background-size: cover;
  background-position: center;
}