/* ==========================================================================
   Empathiesolutions, Design-System
   Fassung 1 (Pilot Startseite), Stand 15.08.2026

   Aufbau dieser Datei:
     00  Schriften, lokal eingebunden
     01  Farbschema hell (Markenfassung, Standard)
     02  Farbschema dunkel (eigenstaendiges zweites Schema)
     03  Zuruecksetzen und Grundtypografie
     04  Textur: Farbverlauf, Halbton, Korn
     05  Raster, Abschnitte, Abstaende
     06  Typografie-Skala
     07  Auszeichnung (Pille ueber der Ueberschrift)
     08  Knoepfe
     09  Karten
     10  Weichen-Kacheln
     11  Zeitstrahl und Vertrauensstreifen
     12  Fensterrahmen und Eckmarken (nur Software-Silo)
     13  Preistafel
     14  Tabelle, wird unter 768 px zur Karte
     15  Formularfelder
     16  Kopfzeile, Menue, Modus-Umschalter
     17  Fusszeile
     18  Schwebende Knoepfe und Barrierefreiheits-Schalter
     19  Bewegung
     20  Breakpoints

   Regeln, die in dieser Datei durchgehalten werden:
     Keine Gedankenstriche, weder lang noch halb.
     Fliesstext nie unter 16 px, auch nicht in Eingabefeldern.
     Tap-Ziele mindestens 44 mal 44 px.
     Jede Einzelanimation unter 400 ms.
     Kein horizontaler Ueberlauf, keine festen Breiten.
   ========================================================================== */

/* --- 00  Schriften -------------------------------------------------------
   Lokal eingebunden, keine Verbindung zu Google. Die Dateien liegen unter
   /assets/fonts/ und werden beim Deploy mitgeliefert. Fehlt eine Datei,
   greift stillschweigend die Systemschrift aus der jeweiligen Variablen.  */

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/sora-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/sora-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/sora-800.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/space-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-mono-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-italic-400.woff2') format('woff2');
}

/* --- 01  Farbschema hell ------------------------------------------------- */

:root {
  color-scheme: light;

  /* Markenfarben, unveraendert aus dem bestehenden Design-System */
  --coral: #EE8975;
  --coraldeep: #C9583F;
  --blue: #5AA0E0;
  --teal: #17A2C4;
  --tealdeep: #0F86A6;
  --violet: #8A7BD8;
  --mint: #2FB68C;
  --mintdeep: #1B8A66;
  --gold: #E6A24C;
  --acc1: #1AA6C9;
  --acc2: #34B79B;
  --glowrgb: 23, 162, 196;

  /* Helle Toene der Marke */
  --tint: #DCF1F5;
  --tint2: #EAF7FA;
  --tintb: #BFE9F2;
  --minttint: #E0F3EB;
  --peach: #FCE7E1;
  --peach2: #FDF1ED;
  --lav: #ECE8FB;
  --sky: #D2EEF5;

  /* Tiefe Fassungen fuer gefuellte Flaechen mit weisser Schrift.
     Auf diesen Werten erreicht Weiss mindestens 4.5:1. */
  --petroltief: #0A5F78;
  --petrolmitte: #0C6E8A;
  --petrolgruen: #0E7A6E;
  --korallentief: #A8452F;
  --korallenmitte: #BE5637;

  /* Flaechen und Linien */
  --bg: #F4F8FB;
  --panel: #F7FAFC;
  --karte: rgba(255, 255, 255, .82);
  --kartegrad: linear-gradient(155deg, rgba(255, 255, 255, .82) 0%, rgba(252, 243, 240, .58) 48%, rgba(234, 247, 250, .58) 100%);
  --border: #E6EDF2;
  --borderstrong: #D3DEE6;
  --kontur: #C3D2DD;

  /* Schrift */
  --ink: #1E2B3B;
  --soft: #566576;
  --leise: #64707F;
  --faint: #8A97A4;
  --link: #0F86A6;
  --linkhover: #17A2C4;

  /* Textur */
  --punkt: rgba(30, 43, 59, .055);
  --korn: .05;
  --verlauf:
    radial-gradient(58% 44% at 12% 6%, rgba(236, 232, 251, .85) 0%, rgba(236, 232, 251, 0) 62%),
    radial-gradient(52% 40% at 88% 2%, rgba(210, 238, 245, .8) 0%, rgba(210, 238, 245, 0) 60%),
    radial-gradient(64% 46% at 78% 62%, rgba(224, 243, 235, .75) 0%, rgba(224, 243, 235, 0) 60%),
    radial-gradient(70% 52% at 18% 92%, rgba(252, 231, 225, .9) 0%, rgba(252, 231, 225, 0) 62%),
    radial-gradient(46% 34% at 52% 44%, rgba(253, 241, 237, .7) 0%, rgba(253, 241, 237, 0) 64%);

  /* Ueberdruck und harte Schatten, die Retro-Signatur */
  --schatten-hart: 5px 5px 0 rgba(30, 43, 59, .12);
  --schatten-hart-tief: 7px 7px 0 rgba(30, 43, 59, .16);
  --schatten-weich: 0 18px 40px -22px rgba(30, 43, 59, .38);
  --schatten-pille: 0 8px 32px -14px rgba(60, 40, 30, .2);

  /* Masse */
  --wrap: 1180px;
  --rand: 20px;

  /* Abstandsleiter, fuenf Stufen. Am Rechner exakt 8, 16, 24, 40, 64 px,
     auf schmalen Geraeten ziehen sich die drei oberen Stufen zusammen.
     Jeder Abstand im Dokument benutzt eine dieser fuenf Stufen, keine
     Zwischenwerte mehr.                                                */
  --a1: 8px;
  --a2: 16px;
  --a3: clamp(18px, 2vw, 24px);
  --a4: clamp(26px, 3.2vw, 40px);
  --a5: clamp(34px, 4.6vw, 64px);

  --radius: 22px;
  --radius-klein: 14px;
  --tempo: .28s;
  --kurve: cubic-bezier(.2, .7, .2, 1);

  /* Schriften */
  --serif: 'Instrument Serif', Georgia, serif;
  --display: 'Sora', system-ui, sans-serif;
  --text: 'Inter', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- 02  Farbschema dunkel ----------------------------------------------
   Kein umgedrehtes Hell: tiefer, leicht blaustichiger Untergrund,
   die warmen Akzente bleiben erkennbar und werden nur so weit
   aufgehellt, dass sie auf dunklem Grund 4.5:1 erreichen.        */

:root[data-thema="dunkel"] {
  color-scheme: dark;

  --coral: #F2A18C;
  --coraldeep: #F2A18C;
  --teal: #4CC3DE;
  --tealdeep: #6FD3E6;
  --mint: #4FCBA3;
  --mintdeep: #4FCBA3;
  --gold: #EFB86B;
  --acc1: #37BEDE;
  --acc2: #4FCBA3;
  --glowrgb: 55, 190, 222;

  --tint: #14304A;
  --tint2: #142B41;
  --tintb: #1B3C57;
  --minttint: #13352F;
  --peach: #38241E;
  --peach2: #2C1D19;
  --lav: #241F3D;
  --sky: #12314A;

  --petroltief: #0B4E63;
  --petrolmitte: #0D5E76;
  --petrolgruen: #0F6A60;
  --korallentief: #8F3B28;
  --korallenmitte: #A64A31;

  --bg: #0F1826;
  --panel: #17233A;
  --karte: rgba(23, 35, 58, .82);
  --kartegrad: linear-gradient(155deg, rgba(28, 42, 66, .9) 0%, rgba(38, 34, 46, .72) 48%, rgba(20, 43, 65, .78) 100%);
  --border: #26344C;
  --borderstrong: #33455F;
  --kontur: #3B4E6A;

  --ink: #EDF3F9;
  --soft: #B3C2D6;
  --leise: #8B9AB0;
  --faint: #7D8CA3;
  --link: #6FD3E6;
  --linkhover: #9AE3F0;

  --punkt: rgba(190, 214, 240, .06);
  --korn: .07;
  --verlauf:
    radial-gradient(58% 44% at 12% 6%, rgba(60, 52, 104, .5) 0%, rgba(60, 52, 104, 0) 62%),
    radial-gradient(52% 40% at 88% 2%, rgba(18, 76, 104, .55) 0%, rgba(18, 76, 104, 0) 60%),
    radial-gradient(64% 46% at 78% 62%, rgba(16, 74, 66, .45) 0%, rgba(16, 74, 66, 0) 60%),
    radial-gradient(70% 52% at 18% 92%, rgba(102, 54, 40, .45) 0%, rgba(102, 54, 40, 0) 62%),
    radial-gradient(46% 34% at 52% 44%, rgba(30, 46, 70, .6) 0%, rgba(30, 46, 70, 0) 64%);

  --schatten-hart: 5px 5px 0 rgba(0, 0, 0, .45);
  --schatten-hart-tief: 7px 7px 0 rgba(0, 0, 0, .5);
  --schatten-weich: 0 18px 40px -22px rgba(0, 0, 0, .8);
  --schatten-pille: 0 10px 34px -16px rgba(0, 0, 0, .85);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    color-scheme: dark;
    --coral: #F2A18C;
    --coraldeep: #F2A18C;
    --teal: #4CC3DE;
    --tealdeep: #6FD3E6;
    --mint: #4FCBA3;
    --mintdeep: #4FCBA3;
    --gold: #EFB86B;
    --acc1: #37BEDE;
    --acc2: #4FCBA3;
    --glowrgb: 55, 190, 222;
    --tint: #14304A;
    --tint2: #142B41;
    --tintb: #1B3C57;
    --minttint: #13352F;
    --peach: #38241E;
    --peach2: #2C1D19;
    --lav: #241F3D;
    --sky: #12314A;
    --petroltief: #0B4E63;
    --petrolmitte: #0D5E76;
    --petrolgruen: #0F6A60;
    --korallentief: #8F3B28;
    --korallenmitte: #A64A31;
    --bg: #0F1826;
    --panel: #17233A;
    --karte: rgba(23, 35, 58, .82);
    --kartegrad: linear-gradient(155deg, rgba(28, 42, 66, .9) 0%, rgba(38, 34, 46, .72) 48%, rgba(20, 43, 65, .78) 100%);
    --border: #26344C;
    --borderstrong: #33455F;
    --kontur: #3B4E6A;
    --ink: #EDF3F9;
    --soft: #B3C2D6;
    --leise: #8B9AB0;
    --faint: #7D8CA3;
    --link: #6FD3E6;
    --linkhover: #9AE3F0;
    --punkt: rgba(190, 214, 240, .06);
    --korn: .07;
    --verlauf:
      radial-gradient(58% 44% at 12% 6%, rgba(60, 52, 104, .5) 0%, rgba(60, 52, 104, 0) 62%),
      radial-gradient(52% 40% at 88% 2%, rgba(18, 76, 104, .55) 0%, rgba(18, 76, 104, 0) 60%),
      radial-gradient(64% 46% at 78% 62%, rgba(16, 74, 66, .45) 0%, rgba(16, 74, 66, 0) 60%),
      radial-gradient(70% 52% at 18% 92%, rgba(102, 54, 40, .45) 0%, rgba(102, 54, 40, 0) 62%),
      radial-gradient(46% 34% at 52% 44%, rgba(30, 46, 70, .6) 0%, rgba(30, 46, 70, 0) 64%);
    --schatten-hart: 5px 5px 0 rgba(0, 0, 0, .45);
    --schatten-hart-tief: 7px 7px 0 rgba(0, 0, 0, .5);
    --schatten-weich: 0 18px 40px -22px rgba(0, 0, 0, .8);
    --schatten-pille: 0 10px 34px -16px rgba(0, 0, 0, .85);
  }
}

/* Barrierefreiheits-Schalter.
   Die Schriftgroesse setzt rahmen.js als Prozentwert direkt auf <html>,
   in vier Stufen von 100 bis 140. Diese Regel ist nur der Rueckfall,
   falls das Skript nicht laeuft. */
:root[data-gross] {
  font-size: 112%;
}

/* --- Mehr Kontrast, helle Fassung -------------------------------------
   Wirkt spuerbar: reiner Grund, flache Karten, kraeftige Linien,
   gefuellte Flaechen auf ihren tiefsten Ton. Fliesstext erreicht ueber
   7:1, grosse Schrift ueber 4.5:1. */
:root[data-kontrast] {
  --bg: #FFFFFF;
  --panel: #FFFFFF;
  --karte: #FFFFFF;
  --kartegrad: #FFFFFF;
  --ink: #000000;
  --soft: #14202E;
  --leise: #14202E;
  --faint: #26374B;
  --border: #14202E;
  --borderstrong: #000000;
  --kontur: #000000;
  --link: #0A4D63;
  --linkhover: #06323F;
  --punkt: transparent;
  --korn: 0;
  --verlauf: none;
  --tint: #E4F4F8;
  --tint2: #F0FAFC;
  --tintb: #D2EDF3;
  --minttint: #E6F6EF;
  --peach: #FBE7E1;
  --peach2: #FDF3EF;
  --lav: #EFECFB;
  --sky: #E1F2F8;
  --petroltief: #044053;
  --petrolmitte: #054C63;
  --petrolgruen: #05564D;
  --korallentief: #7C2C1B;
  --korallenmitte: #8E3722;
  --schatten-hart: 4px 4px 0 #000000;
  --schatten-hart-tief: 6px 6px 0 #000000;
  --schatten-weich: 0 0 0 1px #14202E;
  --schatten-pille: 0 0 0 2px #14202E;
}

/* Mehr Kontrast, dunkle Fassung */
:root[data-kontrast][data-thema="dunkel"],
:root[data-kontrast] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-kontrast]:not([data-thema="hell"]) {
    --bg: #000000;
    --panel: #000000;
    --karte: #000000;
    --kartegrad: #000000;
    --ink: #FFFFFF;
    --soft: #F0F5FA;
    --leise: #F0F5FA;
    --faint: #D5DFEA;
    --border: #F0F5FA;
    --borderstrong: #FFFFFF;
    --kontur: #FFFFFF;
    --link: #86E4F5;
    --linkhover: #B6F0FA;
    --verlauf: none;
    --tint: #082B3A;
    --tint2: #06222E;
    --tintb: #0B3A4D;
    --minttint: #072B24;
    --peach: #34201A;
    --peach2: #281813;
    --lav: #1E1934;
    --sky: #082B3F;
    --schatten-hart: 4px 4px 0 #FFFFFF;
    --schatten-hart-tief: 6px 6px 0 #FFFFFF;
    --schatten-weich: 0 0 0 1px #F0F5FA;
    --schatten-pille: 0 0 0 2px #F0F5FA;
    color-scheme: dark;
  }
}

:root[data-kontrast][data-thema="dunkel"] {
  --bg: #000000;
  --panel: #000000;
  --karte: #000000;
  --kartegrad: #000000;
  --ink: #FFFFFF;
  --soft: #F0F5FA;
  --leise: #F0F5FA;
  --faint: #D5DFEA;
  --border: #F0F5FA;
  --borderstrong: #FFFFFF;
  --kontur: #FFFFFF;
  --link: #86E4F5;
  --linkhover: #B6F0FA;
  --verlauf: none;
  --tint: #082B3A;
  --tint2: #06222E;
  --tintb: #0B3A4D;
  --minttint: #072B24;
  --peach: #34201A;
  --peach2: #281813;
  --lav: #1E1934;
  --sky: #082B3F;
  --schatten-hart: 4px 4px 0 #FFFFFF;
  --schatten-hart-tief: 6px 6px 0 #FFFFFF;
  --schatten-weich: 0 0 0 1px #F0F5FA;
  --schatten-pille: 0 0 0 2px #F0F5FA;
  color-scheme: dark;
}

/* Karten und Flaechen werden flach, Rahmen deutlich */
:root[data-kontrast] .karte,
:root[data-kontrast] .kachel,
:root[data-kontrast] .fenster,
:root[data-kontrast] .tafel {
  background-image: none;
  border-width: 2px;
  border-color: var(--border);
}

:root[data-kontrast] .herzen,
:root[data-kontrast] .textur { display: none; }

/* Verweise im Fliesstext immer unterstrichen */
:root[data-kontrast] main a:not(.knopf),
:root[data-unterstrichen] main a:not(.knopf),
:root[data-unterstrichen] .fuss a,
:root[data-kontrast] .fuss a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* --- 03  Zuruecksetzen und Grundtypografie ------------------------------- */

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  margin: 0;
  position: relative;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.62;
  text-wrap: pretty;
  hyphens: auto;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0;
  hyphens: auto;
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--tempo) var(--kurve);
}

a:hover {
  color: var(--linkhover);
}

img,
svg {
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--acc1);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* Das eine kursive Serif-Wort pro Hauptueberschrift */
.wort {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--coraldeep);
  padding-right: .04em;
  hyphens: manual;
}

/* Sprungmarke fuer die Tastatur */
.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 14px 20px;
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0 0 12px 0;
  font-weight: 600;
}

.sprung:focus {
  left: 0;
}

/* --- 04  Textur ----------------------------------------------------------
   Alle drei Lagen sind CSS oder Inline-SVG, keine Bilddateien.
   Lage 1: weicher Marken-Verlauf, wandert sehr langsam.
   Lage 2: Halbtonpunkte.
   Lage 3: feines Korn.                                                   */

.textur {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.textur::before,
.textur::after {
  content: "";
  position: absolute;
  inset: -10%;
}

.textur::before {
  background: var(--verlauf);
  background-size: 180% 180%;
  animation: verlaufWandern 46s ease-in-out infinite;
}

.textur::after {
  background-image:
    radial-gradient(var(--punkt) 1px, transparent 1.2px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size: 7px 7px, 160px 160px;
  opacity: var(--korn);
}

@keyframes verlaufWandern {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- 05  Raster, Abschnitte, Abstaende ----------------------------------- */

/* Das Herz aus der Wortmarke, weichgezeichnet und sehr leise,
   ueber die ganze Seitenhoehe verteilt. Nicht auf der Kabine-Seite. */
.herzen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .13;
  filter: blur(5px);
  background-repeat: no-repeat;
  background-image:
    var(--herz), var(--herz), var(--herz), var(--herz), var(--herz), var(--herz);
  background-size: 300px, 190px, 250px, 160px, 280px, 210px;
  background-position:
    92% 4%, 6% 17%, 88% 38%, 10% 55%, 84% 72%, 12% 90%;
}

:root[data-kontrast] .herzen { display: none; }

@media (max-width: 768px) {
  .herzen {
    opacity: .1;
    background-size: 180px, 120px, 150px, 110px, 170px, 130px;
  }
}

.buehne {
  position: relative;
  z-index: 1;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--rand);
}

.abschnitt {
  padding: var(--a3) 0;
}

.abschnitt-eng {
  padding: var(--a2) 0;
}

.raster {
  display: grid;
  gap: var(--a3);
}

.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mitte {
  text-align: center;
}

.mitte .lead,
.mitte .kopfzeile-text {
  margin-left: auto;
  margin-right: auto;
}

.reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.mitte .reihe {
  justify-content: center;
}

/* --- 06  Typografie-Skala ------------------------------------------------ */

h1, .h1 {
  font-size: clamp(2.05rem, 1.15rem + 3.7vw, 3.85rem);
  font-weight: 800;
}

h2, .h2 {
  font-size: clamp(1.65rem, 1.1rem + 2.1vw, 2.65rem);
  font-weight: 700;
}

h3, .h3 {
  font-size: clamp(1.18rem, 1.04rem + .55vw, 1.42rem);
  font-weight: 700;
}

.unterzeile {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem);
  color: var(--soft);
  line-height: 1.28;
  margin: 14px 0 0;
  letter-spacing: -.01em;
}

.lead {
  font-size: clamp(1.05rem, 1rem + .32vw, 1.19rem);
  color: var(--soft);
  max-width: 62ch;
}

.text-leise {
  color: var(--leise);
}

.text-soft {
  color: var(--soft);
}

.klein {
  font-size: 1rem;
  color: var(--leise);
}

.marke-mono {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--leise);
}

/* --- 07  Auszeichnung ---------------------------------------------------- */

.auszeichnung {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--kontur);
  background: var(--peach2);
  color: var(--coraldeep);
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.3;
}

.auszeichnung::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
  flex: none;
}

.auszeichnung.kuehl {
  background: var(--tint2);
  color: var(--tealdeep);
}

.auszeichnung.auf-farbe {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
}

/* --- 08  Knoepfe ---------------------------------------------------------
   Alle Knoepfe sind Pillen mit mindestens 48 px Hoehe.
   Die Retro-Signatur ist der harte, versetzte Schatten.                  */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve), background-color var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}

.knopf:hover {
  transform: translate(-2px, -2px);
}

.knopf:active {
  transform: translate(1px, 1px);
}

.knopf-haupt {
  background: linear-gradient(135deg, var(--petrolmitte) 0%, var(--petrolgruen) 100%);
  color: #fff;
  border-color: var(--petroltief);
  box-shadow: 4px 4px 0 rgba(10, 95, 120, .34);
}

.knopf-haupt:hover {
  color: #fff;
  box-shadow: 7px 7px 0 rgba(10, 95, 120, .34);
}

/* In der Menupille ist zu wenig Luft. Waechst der Schatten beim Zeigen mit,
   tritt er unten rechts aus der Pille heraus. Deshalb bleibt er dort gleich
   gross und wandert mit dem Knopf nach innen. */
.kopf-pille .knopf-haupt:hover { box-shadow: 4px 4px 0 rgba(10, 95, 120, .34); }
.kopf-pille .knopf-warm:hover { box-shadow: 4px 4px 0 rgba(168, 69, 47, .3); }
.kopf-pille .knopf-linie:hover { box-shadow: 4px 4px 0 rgba(30, 43, 59, .16); }

.knopf-warm {
  background: linear-gradient(135deg, var(--korallenmitte) 0%, var(--korallentief) 100%);
  color: #fff;
  border-color: var(--korallentief);
  box-shadow: 4px 4px 0 rgba(168, 69, 47, .3);
}

.knopf-warm:hover {
  color: #fff;
  box-shadow: 7px 7px 0 rgba(168, 69, 47, .3);
}

.knopf-linie {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 rgba(30, 43, 59, .16);
}

.knopf-linie:hover {
  color: var(--ink);
  box-shadow: 7px 7px 0 rgba(30, 43, 59, .16);
}

.knopf-hell {
  background: #fff;
  color: var(--petroltief);
  border-color: #fff;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .22);
}

.knopf-hell:hover {
  color: var(--petroltief);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, .22);
}

.knopf-klein {
  min-height: 44px;
  padding: 10px 18px;
  font-size: .95rem;
}

.knopf-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}

.knopf-text:hover {
  gap: 12px;
}

/* --- 09  Karten ---------------------------------------------------------- */

.karte {
  position: relative;
  padding: clamp(22px, 2.6vw, 30px);
  border: 2px solid var(--borderstrong);
  border-radius: var(--radius);
  background: var(--kartegrad);
  background-color: var(--karte);
  box-shadow: var(--schatten-hart);
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}

.karte:hover {
  transform: translate(-2px, -3px);
  box-shadow: var(--schatten-hart-tief);
}

/* Ueberdruck-Kante: eine leicht versetzte Farbflaeche hinter der Karte */
.karte.ueberdruck::before {
  content: "";
  position: absolute;
  inset: 10px -8px -8px 10px;
  z-index: -1;
  border-radius: var(--radius);
  background: var(--tint);
  opacity: .7;
}

.karte-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border: 2px solid var(--kontur);
  border-radius: 12px;
  background: var(--tint2);
  color: var(--tealdeep);
  font-family: var(--mono);
  font-size: .84rem;
  font-weight: 700;
}

.karte h3 {
  margin-bottom: 10px;
}

/* --- 10  Weichen-Kacheln -------------------------------------------------
   Das Herzstueck der Startseite: zwei gleich grosse Kacheln in
   eigenen Farbwelten, Software links und auf dem Telefon oben.          */

.weiche {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--a3);
  align-items: stretch;
}

@media (max-width: 1180px) {
  .weiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .weiche { grid-template-columns: minmax(0, 1fr); }
}

.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(26px, 3vw, 40px);
  border-radius: clamp(24px, 2.6vw, 32px);
  border: 2px solid rgba(255, 255, 255, .3);
  color: #fff;
  overflow: hidden;
  box-shadow: var(--schatten-weich);
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}

.kachel:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -28px rgba(20, 50, 70, .55);
}

.kachel-software {
  background:
    linear-gradient(152deg, var(--petroltief) 0%, var(--petrolmitte) 52%, var(--petrolgruen) 100%);
}

.kachel-alltag,
.kachel-produkt {
  background:
    linear-gradient(152deg, var(--korallentief) 0%, var(--korallenmitte) 58%, #A6553A 100%);
}

/* Dritter Bereich seit Runde 4: Webdesign, in Violett zwischen den beiden */
.kachel-web {
  background:
    linear-gradient(152deg, #3F3577 0%, #4C3F8C 54%, #5B4E9E 100%);
}

/* Halbton im Kachelkopf, gleiche Sprache wie der Seitenhintergrund */
.kachel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.2px);
  background-size: 8px 8px;
  opacity: .8;
  pointer-events: none;
}

.kachel > * {
  position: relative;
  z-index: 1;
}

.kachel h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.05rem);
}

.kachel p {
  color: rgba(255, 255, 255, .93);
}

.kachel-liste {
  list-style: none;
  margin: 0;
  padding: 18px 20px;
  display: grid;
  gap: 10px;
  border-radius: var(--radius-klein);
  background: rgba(255, 255, 255, .12);
  border: 1.5px solid rgba(255, 255, 255, .26);
}

.kachel-liste li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 1rem;
  color: #fff;
}

.kachel-liste li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: .55em;
  border-radius: 2px;
  background: #fff;
  transform: rotate(45deg);
  opacity: .9;
}

.kachel .knopf {
  margin-top: auto;
  align-self: flex-start;
}

/* Einstiegs-Kacheln im Hero, die zwei Wege in Kurzform */
.einstieg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  min-height: 92px;
  border: 2px solid var(--kontur);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--schatten-hart);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, .95rem + .3vw, 1.14rem);
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve), background-color var(--tempo) var(--kurve);
}

.einstieg:hover {
  color: var(--ink);
  transform: translate(-3px, -3px);
  box-shadow: var(--schatten-hart-tief);
}

.einstieg-software {
  background: linear-gradient(150deg, var(--tint2) 0%, var(--minttint) 100%);
}

.einstieg-alltag,
.einstieg-produkt {
  background: linear-gradient(150deg, var(--peach2) 0%, var(--lav) 100%);
}

.einstieg-web {
  background: linear-gradient(150deg, var(--lav) 0%, var(--sky) 100%);
}

.einstieg .marke-mono {
  display: block;
  margin-bottom: 6px;
}

.einstieg-pfeil {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid var(--kontur);
  background: var(--panel);
  font-size: 1.1rem;
  color: var(--ink);
  transition: transform var(--tempo) var(--kurve), background-color var(--tempo) var(--kurve);
}

.einstieg:hover .einstieg-pfeil {
  transform: translateX(4px);
  background: var(--tint);
}

/* Der Halbton in den Kacheln wandert beim Ueberfahren ein Stueck mit */
.kachel::before {
  transition: background-position .34s var(--kurve), opacity .34s var(--kurve);
}

.kachel:hover::before {
  background-position: 4px 4px;
  opacity: 1;
}

.station {
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve);
}

.station:hover {
  transform: translate(-2px, -2px);
  border-color: var(--kontur);
  box-shadow: var(--schatten-hart-tief);
}

/* Hero: Text links, die zwei Wege rechts */
.hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: var(--a5);
  align-items: center;
}

.hero-wege {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1100px) {
  .hero-wege { gap: 12px; }
}

/* Bruecke: Text und Zeitstrahl nebeneinander */
.bruecke {
  align-items: start;
  gap: var(--a4);
}

/* Abschluss: gefuellte Petrol-Flaeche, weisse Schrift */
.abschluss {
  position: relative;
  padding: clamp(30px, 4.6vw, 60px);
  border-radius: clamp(24px, 2.6vw, 34px);
  border: 2px solid var(--petroltief);
  background: linear-gradient(148deg, var(--petroltief) 0%, var(--petrolmitte) 55%, var(--petrolgruen) 100%);
  color: #fff;
  overflow: hidden;
  box-shadow: var(--schatten-weich);
}

.abschluss::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .15) 1px, transparent 1.2px);
  background-size: 8px 8px;
  pointer-events: none;
}

.abschluss > * {
  position: relative;
  z-index: 1;
}

.abschluss h2 {
  max-width: 18ch;
}

.abschluss a:not(.knopf) {
  text-decoration: underline;
}

/* --- 21  Bausteine im Software-Silo -------------------------------------
   Fenster, Gitter, Monospace und Eckmarken erscheinen ausschliesslich
   auf /software/, den Produktseiten und /kabine/.                       */

.fenster-inhalt.text {
  font-family: var(--text);
  font-size: 1rem;
}

.fenster-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.fenster-liste li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: .92rem;
  color: var(--soft);
}

.fenster-liste li b {
  color: var(--acc1);
  font-weight: 700;
}

.fenster-liste li span {
  color: var(--ink);
}

/* Sechs Problempunkte */
.problem {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.problem li {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border: 2px solid var(--borderstrong);
  border-radius: var(--radius-klein);
  background: var(--karte);
  box-shadow: var(--schatten-hart);
  color: var(--soft);
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}

.problem li:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--schatten-hart-tief);
}

.problem li::before {
  content: attr(data-nr);
  flex: none;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 700;
  color: var(--coraldeep);
  padding-top: .18em;
}

/* Leistungsblock: Titel links, Beschreibung rechts */
.leistung {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: var(--a4);
  padding: var(--a4) 0;
  border-top: 2px solid var(--border);
}

.leistung h3 {
  position: sticky;
  top: 96px;
}

.faelle {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: .86rem;
  line-height: 1.6;
  color: var(--leise);
}

.faelle b {
  color: var(--tealdeep);
  font-weight: 700;
}

/* Vier Ablaufschritte */
.schritte {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--a3);
}

.schritt-nr {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--acc1);
  letter-spacing: .04em;
}

/* Haeufige Fragen */
.fragen details {
  margin-bottom: 12px;
  border: 2px solid var(--borderstrong);
  border-radius: var(--radius-klein);
  background: var(--karte);
  box-shadow: var(--schatten-hart);
  overflow: hidden;
}

.fragen summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 60px;
  padding: 14px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.04rem;
}

.fragen summary::-webkit-details-marker {
  display: none;
}

.fragen summary::after {
  content: "+";
  flex: none;
  font-family: var(--mono);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--acc1);
  transition: transform var(--tempo) var(--kurve);
}

.fragen details[open] summary::after {
  transform: rotate(45deg);
}

.fragen details[open] summary {
  color: var(--link);
}

.fragen .antwort,
.fragen details > p {
  padding: 0 20px 20px;
  color: var(--soft);
  animation: antwortAuf .3s var(--kurve) both;
}

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

@media (max-width: 900px) {
  .problem { grid-template-columns: minmax(0, 1fr); }
  .leistung { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .leistung h3 { position: static; }
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .schritte { grid-template-columns: minmax(0, 1fr); }
}

/* Warme Fassung des Abschluss-Bereichs, fuer den Alltagshilfe-Silo */
.abschluss.warm {
  border-color: var(--korallentief);
  background: linear-gradient(148deg, var(--korallentief) 0%, var(--korallenmitte) 58%, #A6553A 100%);
}

/* Portraets: Foto formatfuellend, sonst gestreifter Platzhalter */
.portraet {
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-klein);
  background-image: repeating-linear-gradient(135deg, var(--tint2) 0 8px, var(--panel) 8px 16px);
}

.portraet img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.portraet span {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--leise);
}

/* Anlass-Auswahl im Kontaktformular */
.anlass {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.anlass legend {
  padding: 0;
  margin-bottom: 12px;
  font-family: var(--display);
  font-weight: 600;
  font-size: .98rem;
}

.anlass label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin-bottom: 10px;
  padding: 12px 16px;
  border: 2px solid var(--kontur);
  border-radius: var(--radius-klein);
  background: var(--panel);
  cursor: pointer;
  transition: border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve), transform var(--tempo) var(--kurve);
}

.anlass label:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 rgba(30, 43, 59, .12);
}

.anlass input {
  width: 22px;
  height: 22px;
  flex: none;
  accent-color: var(--acc1);
}

.anlass label:has(input:checked) {
  border-color: var(--acc1);
  background: var(--tint2);
  box-shadow: 4px 4px 0 rgba(var(--glowrgb), .25);
}

/* Hakenliste im Hero */
.haken {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.haken li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 1rem;
}

.haken li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 10px;
  margin-top: .3em;
  border-left: 3px solid var(--mintdeep);
  border-bottom: 3px solid var(--mintdeep);
  transform: rotate(-45deg);
  border-radius: 1px;
}

/* Symbolflaeche in Karten */
.ikon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border: 2px solid var(--kontur);
  border-radius: 12px;
}

.ikon svg {
  width: 21px;
  height: 21px;
}

/* Fallstudie auf tiefem Petrol */
.fall {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: var(--a4);
  padding: clamp(26px, 3.4vw, 44px);
  border: 2px solid var(--petroltief);
  border-radius: clamp(24px, 2.6vw, 32px);
  background: linear-gradient(148deg, #0A4A5E 0%, var(--petroltief) 55%, var(--petrolgruen) 100%);
  color: #fff;
  box-shadow: var(--schatten-weich);
}

.fall-zahlen {
  display: grid;
  gap: 18px;
  align-content: center;
  padding-left: clamp(0px, 2vw, 26px);
  border-left: 2px solid rgba(255, 255, 255, .18);
}

.fall-zahl {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
  color: #9FE7D6;
}

.fall-zahlen strong {
  display: block;
  margin-top: 8px;
  font-family: var(--display);
  font-size: 1.02rem;
}

.fall-zahlen p {
  margin: 4px 0 0;
  font-size: .95rem;
  color: rgba(255, 255, 255, .7);
}

/* Sprechblasen im KI-Abschnitt */
.blase {
  max-width: 92%;
  margin: 0 0 10px;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  background: var(--panel);
  font-size: 1rem;
}

.blase.rechts {
  margin-left: auto;
  border-radius: 14px 14px 4px 14px;
  background: var(--tint2);
  border-color: var(--tintb);
}

/* Preisliste in der Preistafel */
.preisliste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.preisliste li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}

.preisliste li:last-child {
  border-bottom: 0;
}

.preisliste span {
  color: var(--soft);
  font-size: .98rem;
}

.preisliste b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  white-space: nowrap;
}

.preisliste small {
  font-weight: 400;
  font-size: .78rem;
  color: var(--leise);
}

.abschluss.mitte h2 {
  max-width: 22ch;
}

@media (max-width: 900px) {
  .fall { grid-template-columns: minmax(0, 1fr); }
  .fall-zahlen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 0;
    padding-top: 20px;
    border-left: 0;
    border-top: 2px solid rgba(255, 255, 255, .18);
  }
}

@media (max-width: 480px) {
  .fall-zahlen { grid-template-columns: minmax(0, 1fr); }
}

/* --- 11  Zeitstrahl und Vertrauensstreifen ------------------------------- */

.zeitstrahl {
  display: grid;
  gap: 16px;
  position: relative;
}

.station {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 20px 22px;
  border: 2px solid var(--borderstrong);
  border-radius: var(--radius-klein);
  background: var(--karte);
  box-shadow: var(--schatten-hart);
}

.station-label {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tealdeep);
  padding-top: .28em;
}

.station h3 {
  font-size: 1.08rem;
  margin-bottom: 6px;
}

.station p {
  font-size: 1rem;
  color: var(--soft);
}

/* Pillenreihe (Vertrauensstreifen und alle vergleichbaren Punktreihen).
   Jeder Punkt ist eine eigene Pille gleicher Hoehe, die Reihe ist zentriert.
   Unter 560 px stehen die Pillen gleichmaessig untereinander. */
.streifen {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}

/* Fuenf Pillen: drei oben, zwei darunter, beide Reihen mittig. */
.streifen span { grid-column: span 2; }
.streifen span:nth-child(4) { grid-column: 2 / span 2; }
.streifen span:nth-child(5) { grid-column: span 2; }

/* Variante fuer schmale Kaesten: einfach umbrechend, linksbuendig. */
.streifen-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.streifen-links span { grid-column: auto; }

.streifen span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 18px;
  border: 1.5px solid var(--borderstrong);
  border-radius: 999px;
  background: var(--karte);
  box-shadow: 3px 3px 0 rgba(30, 43, 59, .1);
  font-size: .98rem;
  line-height: 1.3;
  color: var(--soft);
  text-align: center;
  /* Pillen sind Schlagworte, keine Fliesstexte: nie trennen, gleichmaessig umbrechen. */
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: balance;
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}

/* In schmalen Kaesten bestimmt der Text die Breite, dann bleibt jede Pille einzeilig. */
.streifen-links { gap: 10px; }
.streifen-links span { flex: 0 1 auto; }

.streifen span:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 rgba(30, 43, 59, .12);
}

.streifen span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--acc2);
  transform: rotate(45deg);
  flex: none;
}

/* --- 12  Fensterrahmen und Eckmarken -------------------------------------
   Nur im Software-Silo, auf den drei Produktseiten und auf Kabine.
   Auf der Startseite und im Alltagshilfe-Silo bleiben sie ungenutzt.    */

.fenster {
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--schatten-hart-tief);
  overflow: hidden;
}

.fenster-leiste {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 2px solid var(--ink);
  background: var(--tint2);
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}

.fenster-punkte {
  display: flex;
  gap: 6px;
}

.fenster-punkte i {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--coral);
}

.fenster-punkte i:nth-child(2) { background: var(--gold); }
.fenster-punkte i:nth-child(3) { background: var(--mint); }

.fenster-inhalt {
  padding: clamp(18px, 2.4vw, 26px);
  font-family: var(--mono);
  font-size: .95rem;
}

.cursor::after {
  content: "";
  display: inline-block;
  width: .6em;
  height: 1.05em;
  margin-left: .18em;
  background: var(--acc1);
  vertical-align: -.16em;
  animation: blinken 1.05s steps(1) infinite;
}

@keyframes blinken {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.eckmarken {
  position: relative;
  border-radius: 0;
  border: 1px solid var(--kontur);
  background:
    linear-gradient(var(--punkt) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, var(--punkt) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--panel);
  padding: clamp(20px, 2.6vw, 28px);
}

.eckmarken::before,
.eckmarken::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--acc1);
}

.eckmarken::before {
  top: -2px;
  left: -2px;
  border-right: 0;
  border-bottom: 0;
}

.eckmarken::after {
  bottom: -2px;
  right: -2px;
  border-left: 0;
  border-top: 0;
}

/* --- 13  Preistafel ------------------------------------------------------ */

.preistafeln {
  display: grid;
  gap: var(--a3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

.preistafel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(24px, 2.8vw, 32px);
  border: 2px solid var(--borderstrong);
  border-radius: var(--radius);
  background: var(--karte);
  box-shadow: var(--schatten-hart);
}

/* Premium: die gehobene Fassung, dunkel mit Gold */
.preistafel.premium {
  border-color: #C9A227;
  background-color: #101C28;
  background-image: linear-gradient(155deg, #101C28 0%, #1B2A38 58%, #241F16 100%);
  color: #F5F0E6;
  box-shadow: 7px 7px 0 rgba(201, 162, 39, .38);
}

.premium .preis { color: #E8C766; }
.premium h3, .premium .preis:not(.gold) { color: #F5F0E6; }
.premium .marke-mono { color: #E8C766; }
.premium .preis-zusatz,
.premium .klein,
.premium .text-soft { color: rgba(245, 240, 230, .74); }
.premium .preisliste span { color: rgba(245, 240, 230, .78); }
.premium .preisliste b { color: #FFF; }
.premium .preisliste small { color: rgba(232, 199, 102, .85); }
.premium .preisliste li { border-bottom-color: rgba(232, 199, 102, .24); }
.premium .preistafel-marke {
  border-color: #8A6E12;
  background: linear-gradient(135deg, #E8C766, #C9A227);
  color: #1A1408;
}
.premium a.knopf-text { color: #E8C766; }

.preistafel.empfohlen {
  border-color: var(--petrolmitte);
  box-shadow: 7px 7px 0 rgba(12, 110, 138, .28);
}

.preistafel-marke {
  position: absolute;
  top: -14px;
  left: 24px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 2px solid var(--petroltief);
  background: var(--petrolmitte);
  color: #fff;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.preis {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
}

.preis-zusatz {
  font-family: var(--mono);
  font-size: .84rem;
  color: var(--leise);
}

/* --- 14  Tabelle ---------------------------------------------------------
   Ab 768 px eine klassische Tabelle, darunter gestapelte Karten,
   in denen jedes Feld seine eigene Beschriftung traegt.
   Keine Tabelle scrollt horizontal.                                      */

.tabelle {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid var(--borderstrong);
  border-radius: var(--radius-klein);
  overflow: hidden;
  background: var(--karte);
}

.tabelle th,
.tabelle td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  vertical-align: top;
  /* In Zellen steht Kurztext, keine Fliesstexte. Silbentrennung zerlegt sonst
     Eigennamen wie „Empathiesolutions" in einen Stapel aus Silben. */
  hyphens: none;
  -webkit-hyphens: none;
}

/* Markentabelle: Die erste Spalte traegt Eigennamen, sie darf nicht umbrechen
   und nimmt sich nur die Breite, die sie wirklich braucht. Unter 769 px wird
   die Tabelle zu gestapelten Karten, dort waere eine Spaltenbreite falsch. */
@media (min-width: 769px) {
  .tabelle-marken td:first-child,
  .tabelle-marken th:first-child {
    width: 1%;
    white-space: nowrap;
  }
}

.tabelle th {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tealdeep);
  background: var(--tint2);
  hyphens: none;
}

.tabelle tr:last-child td {
  border-bottom: 0;
}

/* Das hidden-Attribut schlaegt jede Anzeigeart, sonst blenden Klassen
   wie .feld mit display:grid es versehentlich wieder ein. */
[hidden] { display: none !important; }

/* --- 15  Formularfelder -------------------------------------------------- */

.feld {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
  min-width: 0;
}

/* Datums- und Zeitfelder tragen in Safari ein eigenes Innenleben mit eigener
   Mindestbreite, dadurch war das Feld breiter als seine Nachbarn und trat
   rechts aus dem Kasten. Die Abfrage trifft nur Safari auf dem iPhone und iPad;
   anderswo bleibt das Kalendersymbol des Browsers erhalten. */
@supports (-webkit-touch-callout: none) {
  .feld input[type="date"],
  .feld input[type="time"],
  .feld input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
  }
}

.feld label {
  font-family: var(--display);
  font-weight: 600;
  font-size: .98rem;
}

.feld input,
.feld textarea,
.feld select {
  width: 100%;
  /* Gitterkinder schrumpfen von sich aus nicht unter ihre Inhaltsbreite. Safari
     gibt Datumsfeldern eine eigene Mindestbreite, dadurch wuchs die Spalte und
     das Feld trat rechts aus dem Kasten heraus. */
  min-width: 0;
  max-width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  font-family: var(--text);
  font-size: 16px;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--kontur);
  border-radius: var(--radius-klein);
  transition: border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}

.feld textarea {
  min-height: 140px;
  resize: vertical;
}

.feld input:focus,
.feld textarea:focus,
.feld select:focus {
  outline: none;
  border-color: var(--acc1);
  box-shadow: 4px 4px 0 rgba(var(--glowrgb), .25);
}

.feld-hinweis {
  font-size: .95rem;
  color: var(--leise);
}

/* --- 16  Kopfzeile, Menue, Modus-Umschalter ------------------------------ */

.fortschritt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--coral), var(--gold), var(--acc1), var(--acc2));
  border-radius: 0 999px 999px 0;
}

.vorschau {
  position: relative;
  z-index: 40;
  padding: 9px 16px;
  text-align: center;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  border-bottom: 2px solid var(--ink);
}

.kopf {
  position: sticky;
  top: 12px;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 12px 14px 0;
}

.kopf-pille {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px 9px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1.5px solid var(--borderstrong);
  box-shadow: var(--schatten-pille);
}

.kopf-logo {
  display: flex;
  align-items: center;
  flex: none;
  min-height: 44px;
}

.kopf-logo img {
  height: 42px;
  width: auto;
  display: block;
}

img.nur-hell { display: block; }
img.nur-dunkel { display: none; }

:root[data-thema="dunkel"] img.nur-hell { display: none; }
:root[data-thema="dunkel"] img.nur-dunkel { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) img.nur-hell { display: none; }
  :root:not([data-thema="hell"]) img.nur-dunkel { display: block; }
}

.menue {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menue > li {
  position: relative;
}

.menue a,
.menue .aufklapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 13px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: none;
  font-family: var(--text);
  font-size: .93rem;
  font-weight: 500;
  color: var(--soft);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--tempo) var(--kurve), background-color var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve), transform var(--tempo) var(--kurve);
}

/* Gleiche Retro-Signatur wie beim Knopf: harte Kante, versetzter Schatten */
.menue a:hover,
.menue .aufklapp:hover,
.menue .aufklapp[aria-expanded="true"],
.menue a[aria-current="page"] {
  color: var(--link);
  background: var(--tint2);
  border-color: var(--kontur);
  box-shadow: 3px 3px 0 rgba(30, 43, 59, .16);
  transform: translate(-1px, -1px);
}

.menue a:active,
.menue .aufklapp:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 rgba(30, 43, 59, .16);
}

.menue > li:hover .aufklapp-pfeil,
.menue .aufklapp[aria-expanded="true"] .aufklapp-pfeil {
  transform: rotate(180deg);
}

.aufklapp-pfeil {
  font-size: .6rem;
  opacity: .7;
  transition: transform var(--tempo) var(--kurve);
}

.untermenue {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 268px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  margin: 10px 0 0;
  list-style: none;
  border-radius: 18px;
  border: 1.5px solid var(--borderstrong);
  background: var(--panel);
  box-shadow: 0 24px 60px -24px rgba(30, 43, 59, .45), 5px 5px 0 rgba(30, 43, 59, .1);
  animation: menueAuf .26s var(--kurve) both;
}

/* Bruecke ueber die Luecke zwischen Reiter und Menue,
   damit das Menue beim Hinuntergehen mit der Maus offen bleibt. */
.untermenue::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.menue > li:hover .untermenue,
.menue > li:focus-within .untermenue,
.untermenue[data-offen="1"] {
  display: flex;
}

.untermenue a {
  width: 100%;
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ink);
  font-size: .96rem;
}

@keyframes menueAuf {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.kopf-rechts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* Modus-Umschalter mit drei Zustaenden */
.modus {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1.5px solid var(--borderstrong);
  background: var(--bg);
}

.modus button {
  min-width: 46px;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--leise);
  cursor: pointer;
  transition: background-color var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}

.modus button:hover {
  color: var(--ink);
}

.modus button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

.burger {
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1.5px solid var(--borderstrong);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

/* Vollbild-Menue auf dem Telefon */
.mobilmenue {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  padding: 14px var(--rand) 22px;
  background: var(--bg);
  overflow-y: auto;
  /* Scrollt man im Menue bis ans Ende, soll die Seite dahinter nicht
     weiterlaufen. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Geschlossen liegt das Menue ueber dem oberen Rand geparkt. Von dort faehrt
     es herunter und beim Schliessen wieder hinauf. `display` bleibt bewusst
     stehen, sonst gaebe es nichts zu bewegen. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: transform .3s var(--kurve), opacity .22s var(--kurve),
              visibility 0s linear .3s;
}

/* Auf dem Telefon nimmt das Menue den ganzen sichtbaren Bereich ein,
   auch wenn die Adressleiste ein- und ausfaehrt. */
@supports (height: 100dvh) {
  @media (max-width: 700px) {
    .mobilmenue { height: 100dvh; }
  }
}

.mobilmenue[data-offen="1"] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: transform .34s var(--kurve), opacity .2s var(--kurve),
              visibility 0s;
}

/* Auf dem Tablet ist der Bildschirm gross genug, dass ein Vollbildmenue wuchtig
   wirkt. Dort faellt stattdessen eine Tafel in Telefonbreite oben rechts
   heraus, und daneben bleibt die Seite sichtbar. */
@media (min-width: 701px) and (max-width: 1040px) {
  .mobilmenue {
    inset: auto 14px auto auto;
    top: 12px;
    width: min(420px, calc(100vw - 28px));
    max-height: calc(100vh - 24px);
    padding: 14px 18px 20px;
    border: 1.5px solid var(--borderstrong);
    border-radius: 26px;
    box-shadow: 0 22px 60px rgba(15, 30, 45, .28);
    transform: translateY(calc(-100% - 24px));
  }
  .mobilmenue[data-offen="1"] { transform: translateY(0); }
}

@supports (height: 100dvh) {
  @media (min-width: 701px) and (max-width: 1040px) {
    .mobilmenue { max-height: calc(100dvh - 24px); }
  }
}

/* Die Flaeche hinter dem Menue. Ein Klick darauf schliesst. */
.mobilmenue-schirm {
  position: fixed;
  inset: 0;
  z-index: 54;
  background: rgba(15, 30, 45, .38);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .26s var(--kurve), visibility 0s linear .26s;
}

.mobilmenue-schirm[data-offen="1"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .26s var(--kurve), visibility 0s;
}

/* Am Rechner gibt es kein Sandwich-Menue, dort bleiben beide ganz weg. */
@media (min-width: 1041px) {
  .mobilmenue,
  .mobilmenue-schirm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobilmenue,
  .mobilmenue-schirm { transition: none; }
}

.mobilmenue-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  margin-bottom: 10px;
}

.mobilmenue-zeile {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--leise);
  padding: 2px 4px 10px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 14px;
}

.mobilmenue ul {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.mobilmenue > ul > li > a,
.mobilmenue-gruppe > .mobil-aufklapp {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 10px 16px;
  border-radius: var(--radius-klein);
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  background: var(--karte);
  border: 2px solid var(--border);
  cursor: pointer;
}

/* Ausklapper: zugeklappt, ausser man steht auf einer der Unterseiten */
.mobil-aufklapp { justify-content: space-between; gap: 10px; }

.mobil-pfeil {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--tealdeep);
  border-bottom: 2px solid var(--tealdeep);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--tempo) var(--kurve);
}

.mobil-aufklapp[aria-expanded="true"] { border-color: var(--tealdeep); }
.mobil-aufklapp[aria-expanded="true"] .mobil-pfeil { transform: rotate(-135deg) translate(-2px, -2px); }

.mobilmenue-gruppe > ul {
  display: block;
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--border);
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height var(--tempo) var(--kurve), margin var(--tempo) var(--kurve), visibility 0s linear var(--tempo);
}

.mobilmenue-gruppe > ul[data-offen="1"] {
  max-height: 420px;
  visibility: visible;
  margin: 6px 0;
  transition: max-height var(--tempo) var(--kurve), margin var(--tempo) var(--kurve), visibility 0s;
}

.mobilmenue-gruppe ul a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 14px;
  font-size: 1.04rem;
  color: var(--ink);
  text-decoration: none;
}

.mobilmenue-fuss {
  display: grid;
  gap: 6px;
  /* Vorher stand hier margin-top:auto, spaeter eine feste Stufe. Beides
     riss eine sichtbare Luecke zwischen dem letzten Menuepunkt und
     diesem Block. Jetzt schliesst er direkt an, im selben Abstand wie
     die Menuepunkte untereinander.                                   */
  margin-top: 0;
  padding-top: 0;
}

/* Farbmodus steht als letztes, abgesetzt durch eine Linie */
.mobilmenue-modus {
  display: grid;
  gap: 10px;
  justify-items: start;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 2px solid var(--border);
}

.mobilmenue-modus-titel {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--leise);
}

.mobilmenue-modus .modus { width: 100%; }
.mobilmenue-modus .modus button { flex: 1; min-height: 44px; }

/* --- 17  Fusszeile ------------------------------------------------------- */

.fuss {
  position: relative;
  z-index: 1;
  margin-top: clamp(22px, 3vw, 40px);
  padding: clamp(30px, 4vw, 52px) 0 24px;
  border-top: 2px solid var(--borderstrong);
  background: var(--peach2);
}

.fuss-raster {
  display: grid;
  gap: var(--a4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.fuss img {
  height: 52px;
  width: auto;
  margin-bottom: 14px;
}

.fuss h5 {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--leise);
  margin-bottom: 14px;
}

.fuss ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.fuss ul a,
.fuss-kontakt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--soft);
  text-decoration: none;
  font-size: 1rem;
}

.fuss ul a:hover,
.fuss-kontakt a:hover {
  color: var(--link);
}

.fuss-adresse {
  font-size: 1rem;
  color: var(--soft);
}

.fuss-unten {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 22px;
  border-top: 1.5px solid var(--borderstrong);
  font-size: .98rem;
  color: var(--leise);
}

/* --- 18  Schwebende Knoepfe und Barrierefreiheit ------------------------- */

.schwebt {
  position: fixed;
  bottom: 20px;
  z-index: 45;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--schatten-hart);
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}

.schwebt:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--schatten-hart-tief);
}

.schwebt-links {
  left: 20px;
  background: linear-gradient(135deg, var(--petrolmitte), var(--petrolgruen));
  color: #fff;
  border-color: var(--petroltief);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--tempo) var(--kurve), transform var(--tempo) var(--kurve),
              box-shadow var(--tempo) var(--kurve), visibility var(--tempo);
}

/* Der Knopf nach oben erscheint erst, wenn man ein Stueck gescrollt hat. */
.schwebt-links.sichtbar {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.schwebt-links.sichtbar:hover {
  transform: translate(-2px, -2px);
}

.schwebt-rechts {
  right: 20px;
  background: linear-gradient(135deg, var(--petrolmitte), var(--petrolgruen));
  color: #fff;
  border-color: var(--petroltief);
}

.zugang-tafel {
  position: fixed;
  right: 20px;
  bottom: 86px;
  z-index: 46;
  width: min(92vw, 300px);
  max-height: min(78vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: none;
  padding: 16px;
  border-radius: 18px;
  border: 2px solid var(--ink);
  background: var(--panel);
  box-shadow: var(--schatten-hart-tief);
}

.zugang-tafel[data-offen="1"] {
  display: block;
}

.zugang-tafel h4 {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--leise);
  margin: 0 0 12px;
}

.zugang-tafel button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  margin-bottom: 8px;
  padding: 10px 14px;
  border: 2px solid var(--borderstrong);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  cursor: pointer;
}

.zugang-tafel button[aria-pressed="true"] {
  border-color: var(--acc1);
  background: var(--tint2);
}

/* Zeile mit Beschriftung darueber, fuer Farbmodus und Schriftgroesse */
.zugang-zeile {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
}

.zugang-titel {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--leise);
}

/* Der Farbmodus-Regler war als Pille gebaut, alle anderen Zeilen der
   Tafel sind eckige Kaesten. In der Tafel und im Telefonmenue nimmt er
   deshalb dieselbe Form an. "Dunkel" bleibt einzeilig.              */
.zugang-zeile .modus,
.mobilmenue-modus .modus {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  border-radius: var(--radius-klein);
  border-color: var(--kontur);
  background: var(--tint2);
  padding: 4px;
  gap: 4px;
}

.zugang-zeile .modus button,
.mobilmenue-modus .modus button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 4px;
  color: var(--leise);
  border-radius: 10px;
  letter-spacing: .04em;
  /* Die Sperrung haengt hinter dem letzten Buchstaben. Ohne Ausgleich
     sitzt die Beschriftung sichtbar zu weit links im Feld. */
  text-indent: .04em;
  white-space: nowrap;
  /* Auch die nicht gewaehlten Felder tragen eine sichtbare Flaeche.
     Vorher stand ein gefuellter Block neben zwei losen Woertern,
     dadurch wirkten die drei Felder unterschiedlich breit.        */
  background: var(--karte);
  border: 1.5px solid var(--kontur);
}

.zugang-zeile .modus button[aria-pressed="true"],
.mobilmenue-modus .modus button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
/* Schriftgroesse: Minus, Wert, Plus */
.zugang-stufe {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  gap: 6px;
  align-items: stretch;
}

.zugang-stufe button {
  justify-content: center;
  min-height: 48px;
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
}

.zugang-stufe .zugang-wert {
  font-family: var(--mono);
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .04em;
  background: var(--panel);
}

.zugang-stufe button:disabled {
  opacity: .38;
  cursor: not-allowed;
  border-color: var(--border);
}

/* Schalter mit Punkt statt Abkuerzung */
.zugang-punkt {
  flex: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid var(--borderstrong);
  background: var(--panel);
  position: relative;
  transition: background var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve);
}

.zugang-punkt::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--leise);
  transition: transform var(--tempo) var(--kurve), background var(--tempo) var(--kurve);
}

.zugang-schalter[aria-pressed="true"] .zugang-punkt {
  border-color: var(--tealdeep);
  background: var(--tint);
}

.zugang-schalter[aria-pressed="true"] .zugang-punkt::after {
  background: var(--tealdeep);
  transform: translateX(16px);
}

.zugang-reset {
  justify-content: center !important;
  min-height: 44px !important;
  margin: 4px 0 0 !important;
  border-style: dashed !important;
  background: none !important;
  color: var(--leise) !important;
  font-size: .92rem !important;
}

.zugang-tafel button span {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--leise);
}

/* --- 19  Bewegung --------------------------------------------------------
   Einblenden beim Scrollen. Jede Bewegung endet unter 400 ms.           */

.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .34s var(--kurve), transform .38s var(--kurve);
}

.rv.drin {
  opacity: 1;
  transform: none;
}

.rv-2 { transition-delay: .06s; }
.rv-3 { transition-delay: .12s; }
.rv-4 { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .textur::before { animation: none; }
  .textur::after { display: none; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}

:root[data-ruhig] .rv { opacity: 1; transform: none; transition: none; }
:root[data-ruhig] .textur::before { animation: none; }
:root[data-ruhig] *,
:root[data-ruhig] *::before,
:root[data-ruhig] *::after {
  animation-duration: .001s !important;
  animation-iteration-count: 1 !important;
}

/* --- 20  Breakpoints -----------------------------------------------------
   Entworfen ab 360 px, Stufen bei 480, 768, 1024 und 1280.              */

@media (max-width: 1024px) {
  .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-raster { grid-template-columns: minmax(0, 1fr); }
  .hero-wege { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bruecke { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1040px) {
  .menue,
  .kopf-rechts .modus,
  .kopf-rechts .knopf {
    display: none;
  }
  .burger { display: grid; }
  .kopf-pille { padding: 8px 8px 8px 14px; }
}

@media (max-width: 768px) {
  html { scroll-padding-top: 92px; }

  .weiche { grid-template-columns: minmax(0, 1fr); }
  .raster-2,
  .raster-3,
  .raster-4 { grid-template-columns: minmax(0, 1fr); }

  .streifen {
    gap: 10px;
  }

  .hero-wege { grid-template-columns: minmax(0, 1fr); }

  /* Tabellen werden zu gestapelten Karten */
  .tabelle,
  .tabelle tbody,
  .tabelle tr,
  .tabelle td {
    display: block;
    width: 100%;
  }

  .tabelle thead { display: none; }

  .tabelle {
    border: 0;
    background: none;
  }

  .tabelle tr {
    margin-bottom: 14px;
    border: 2px solid var(--borderstrong);
    border-radius: var(--radius-klein);
    background: var(--karte);
    box-shadow: var(--schatten-hart);
    overflow: hidden;
  }

  .tabelle td {
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
  }

  .tabelle td:last-child { border-bottom: 0; }

  .tabelle td::before {
    content: attr(data-titel);
    display: block;
    margin-bottom: 4px;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tealdeep);
  }

  .preistafeln { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  /* Pillen gleichmaessig untereinander statt ungleich umgebrochen */
  .streifen,
  .streifen span,
  .streifen span:nth-child(4),
  .streifen span:nth-child(5) {
    grid-column: auto;
  }

  .streifen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

@media (max-width: 480px) {
  :root { --rand: 16px; }

  .station {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .kachel .knopf,
  .hero-knoepfe .knopf { width: 100%; }

  .schwebt { width: 52px; height: 52px; bottom: 16px; }
  .schwebt-links { left: 16px; }
  .schwebt-rechts { right: 16px; }
}

/* Beim Drucken faellt alles Dekorative weg */
@media print {
  .textur, .kopf, .fortschritt, .schwebt, .zugang-tafel, .vorschau { display: none !important; }
  body { background: #fff; }
}

/* --- 23  Karten: Verlauf und Retro-Bewegung beim Ueberfahren -------------
   Gilt auf allen Seiten. Der Verlauf ist sehr flach, damit der Text in
   jedem Zustand seinen Kontrast behaelt.                                */
.karte {
  background-image: linear-gradient(155deg, rgba(255, 255, 255, .5) 0%, rgba(220, 241, 245, .28) 55%, rgba(252, 231, 225, .22) 100%);
  background-size: 160% 160%;
  background-position: 0% 0%;
  transition:
    transform var(--tempo) var(--kurve),
    box-shadow var(--tempo) var(--kurve),
    border-color var(--tempo) var(--kurve),
    background-position var(--tempo) var(--kurve);
}

:root[data-thema="dunkel"] .karte {
  background-image: linear-gradient(155deg, rgba(40, 58, 88, .55) 0%, rgba(20, 48, 74, .35) 55%, rgba(56, 36, 30, .3) 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .karte {
    background-image: linear-gradient(155deg, rgba(40, 58, 88, .55) 0%, rgba(20, 48, 74, .35) 55%, rgba(56, 36, 30, .3) 100%);
  }
}

.karte:hover {
  transform: translate(-3px, -3px);
  border-color: var(--acc1);
  background-position: 100% 100%;
  box-shadow: 8px 8px 0 rgba(30, 43, 59, .16);
}

/* Ueberdruck-Karten bleiben ruhig: die versetzte Farbflaeche dahinter
   laeuft sonst gegen den Versatz der Karte und flackert mit.        */
.karte.ueberdruck:hover {
  transform: none;
  border-color: var(--borderstrong);
  box-shadow: var(--schatten-hart);
}

.karte.ueberdruck:hover::before { opacity: .7; }

/* Eine Ueberschrift, die auf breiten Schirmen in einer Zeile bleibt */
.h2-einzeilig { font-size: clamp(1.35rem, 3.1vw, 2.3rem); }

@media (min-width: 720px) {
  .h2-einzeilig { white-space: nowrap; }
}

.karte:hover .karte-nummer {
  color: var(--acc1);
  transform: translateY(-2px);
}

.karte-nummer {
  transition: transform var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}

/* Halbton wird beim Ueberfahren einen Hauch sichtbarer */
.karte::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background-image: radial-gradient(var(--punkt) 1.4px, transparent 1.6px);
  background-size: 8px 8px;
  transition: opacity var(--tempo) var(--kurve);
}

.karte:hover::before { opacity: 1; }

/* Farbwelt je Silo: Petrol im Software-Teil, Koralle im Alltagshilfe-Teil */
.silo-software .karte:hover { border-color: var(--tealdeep); }
.silo-alltag .karte:hover { border-color: var(--coraldeep); }

@media (prefers-reduced-motion: reduce) {
  .karte, .karte::before, .karte-nummer { transition: none; }
  .karte:hover { transform: none; }
}

/* --- 24  Schwebende Knoepfe am Telefon ----------------------------------
   Kleiner, tiefer und mit Abstand zum Inhalt, damit sie nichts anschneiden. */
@media (max-width: 560px) {
  .schwebt {
    width: 44px;
    height: 44px;
    bottom: 10px;
  }

  .schwebt-links { left: 10px; }
  .schwebt-rechts { right: 10px; }

  .buehne { padding-bottom: 68px; }
}

/* --- 25  Preistafeln: die Staffelung sichtbar machen ---------------------
   Basic zurueckhaltend, Verein als empfohlene Mitte, Pro als Loge.       */
.preistafel.zurueckhaltend {
  border-color: var(--kontur);
  background-image: none;
  box-shadow: 4px 4px 0 rgba(30, 43, 59, .08);
}

.preistafel.empfohlen {
  border-width: 3px;
  border-color: var(--acc1);
  background-image: linear-gradient(160deg, var(--tint2) 0%, var(--karte) 62%, var(--minttint) 100%);
  box-shadow: 7px 7px 0 rgba(23, 162, 196, .22);
}

/* Traegt eine Tafel beides, also "empfohlen" und "premium", dann gewinnt
   die dunkle Fassung vollstaendig. Vorher stand der helle Grund der
   empfohlenen Tafel unter den hellen Schriftfarben der Loge, damit war
   der Text praktisch unlesbar.                                       */
.preistafel.premium.empfohlen {
  border-width: 3px;
  border-color: #C9A227;
  background-color: #101C28;
  background-image: linear-gradient(155deg, #101C28 0%, #1B2A38 58%, #241F16 100%);
  box-shadow: 7px 7px 0 rgba(201, 162, 39, .38);
}

/* Die empfohlene Tafel stand frueher 10 px hoeher als die anderen. Das
   liest sich als Fehler, nicht als Auszeichnung. Dafuer ist das Abzeichen
   da. Alle Tafeln stehen jetzt in einer Reihe und sind gleich hoch. */

/* Innerhalb einer Preisreihe erscheinen alle Tafeln gleichzeitig, sonst
   wirken sie beim Einblenden versetzt. */
.preistafeln .rv-2,
.preistafeln .rv-3,
.preistafeln .rv-4 { transition-delay: 0s; }

/* Glanz auf der Loge, nur beim Ueberfahren */
.preistafel.premium::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(232, 199, 102, .3) 50%, transparent 62%);
  transition: opacity var(--tempo) var(--kurve);
}

.preistafel.premium:hover::after { opacity: 1; }

.preistafel {
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}

.preistafel:hover { transform: translate(-2px, -2px); }
.preistafel.premium:hover { box-shadow: 9px 9px 0 rgba(201, 162, 39, .45); }

@media (prefers-reduced-motion: reduce) {
  .preistafel, .preistafel.premium::after { transition: none; }
  .preistafel:hover { transform: none; }
}

/* Aussage-Kacheln: eine kurze Aussage steht mittig, nicht linksbuendig.
   Ueber align-items statt auto-Raendern, damit ein margin:0 im Markup
   die Zentrierung nicht aushebelt. */
.karte.aussage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.karte.aussage > * {
  width: 100%;
  max-width: 62ch;
}

/* Hakenliste auf hellen Karten */
.haken-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.haken-liste li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  color: var(--soft);
  font-size: 1rem;
  line-height: 1.5;
}

.haken-liste li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--minttint);
  box-shadow: inset 0 0 0 2px var(--mintdeep);
}

/* --- 26  Portraets: Bilder bleiben in Originalfarbe. Keine Behandlung,
   keine Auflage ueber dem Bild, damit die Ecken sauber bleiben.          */

/* --- 27  KI-Bereich, auf /kabine/ und auf der Plattform-Seite ----------- */
/* --- KI-Bereich ---------------------------------------------------------- */
.ki-raster {
  display: grid;
  gap: var(--a3);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: stretch;
}

.ki-fenster {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 2px solid var(--borderstrong);
  border-radius: var(--radius);
  background: var(--karte);
  box-shadow: var(--schatten-hart-tief);
}

.ki-blase {
  max-width: 82%;
  padding: 14px 18px;
  border: 2px solid var(--borderstrong);
  border-radius: 16px;
  font-size: 1rem;
  line-height: 1.5;
}

.ki-blase.frage {
  align-self: flex-end;
  border-color: var(--acc1);
  background: var(--tint2);
  color: var(--ink);
}

.ki-blase.antwort {
  align-self: flex-start;
  background: var(--panel);
  color: var(--ink);
}

.ki-blase.antwort[hidden] { display: none; }

.ki-cursor {
  display: inline-block;
  width: 9px;
  height: 1.05em;
  margin-left: 2px;
  background: var(--acc1);
  vertical-align: text-bottom;
  animation: blinken .9s steps(1) infinite;
}

@keyframes blinken { 50% { opacity: 0; } }

.ki-grenzen {
  display: grid;
  gap: 12px;
  align-content: start;
}

.ki-spalte {
  padding: 18px;
  border: 2px solid var(--borderstrong);
  border-radius: var(--radius-klein);
  background: var(--panel);
}

.ki-spalte.rein { border-color: var(--mintdeep); }
.ki-spalte.raus { border-color: var(--coraldeep); }

.ki-spalte ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.ki-spalte li { position: relative; padding-left: 22px; font-size: .97rem; color: var(--soft); }
.ki-spalte.rein li::before { content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 11px; background: var(--mintdeep); }
.ki-spalte.raus li::before { content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 11px; background: var(--coraldeep); transform: rotate(45deg); }

@media (max-width: 860px) {
  .ki-raster { grid-template-columns: minmax(0, 1fr); }
  .ki-blase { max-width: 100%; }
}

/* --- 28  KI-Buehne: dunkle Flaeche mit langsam driftendem Nebel ----------
   Gilt auf /kabine/ und auf der Plattformseite. Die Bewegung laeuft in
   langen Schleifen und faellt bei reduzierter Bewegung weg.            */
.ki-buehne {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 4vw, 60px) clamp(18px, 3vw, 46px);
  border: 1px solid rgba(150, 220, 240, .18);
  border-radius: clamp(22px, 3vw, 34px);
  background:
    radial-gradient(120% 90% at 50% -10%, #17384F 0%, #0D2436 44%, #08151F 100%);
  box-shadow: 0 40px 90px -50px rgba(6, 20, 30, .9);
  color: #E9F4F9;
}

/* Drei weiche Farbwolken, jede mit eigener Bahn und eigenem Tempo */
.ki-nebel {
  position: absolute;
  inset: -25%;
  z-index: -2;
  pointer-events: none;
}

.ki-nebel span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  will-change: transform;
}

.ki-nebel span:nth-child(1) {
  top: 6%;
  left: 4%;
  width: 46%;
  height: 60%;
  background: radial-gradient(circle, rgba(23, 162, 196, .85) 0%, rgba(23, 162, 196, 0) 70%);
  animation: nebelA 34s ease-in-out infinite;
}

.ki-nebel span:nth-child(2) {
  top: 22%;
  right: 2%;
  width: 42%;
  height: 56%;
  background: radial-gradient(circle, rgba(47, 182, 140, .7) 0%, rgba(47, 182, 140, 0) 70%);
  animation: nebelB 44s ease-in-out infinite;
}

.ki-nebel span:nth-child(3) {
  bottom: 0%;
  left: 32%;
  width: 40%;
  height: 52%;
  background: radial-gradient(circle, rgba(138, 123, 216, .6) 0%, rgba(138, 123, 216, 0) 70%);
  animation: nebelC 52s ease-in-out infinite;
}

@keyframes nebelA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(14%, 10%, 0) scale(1.18); }
}

@keyframes nebelB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); }
  50% { transform: translate3d(-16%, 14%, 0) scale(.92); }
}

@keyframes nebelC {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.95); }
  50% { transform: translate3d(10%, -16%, 0) scale(1.2); }
}

/* Feines Punktraster, das sehr langsam wandert */
.ki-buehne::before {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(180, 226, 240, .18) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(120% 90% at 50% 10%, #000 0%, transparent 78%);
  animation: rasterzug 60s linear infinite;
}

@keyframes rasterzug {
  to { transform: translate3d(26px, 26px, 0); }
}

/* Lichtsichel, die einmal pro Minute langsam ueber die Flaeche zieht */
.ki-buehne::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -30%;
  z-index: -1;
  width: 70%;
  height: 220%;
  pointer-events: none;
  opacity: .16;
  background: linear-gradient(100deg, transparent 0%, rgba(190, 236, 248, .75) 50%, transparent 100%);
  filter: blur(38px);
  animation: lichtzug 26s ease-in-out infinite;
}

@keyframes lichtzug {
  0%, 100% { transform: translateX(0) rotate(8deg); }
  50% { transform: translateX(210%) rotate(8deg); }
}

/* Inhalte auf der dunklen Flaeche */
.ki-buehne h2,
.ki-buehne h3 { color: #FFFFFF; }
.ki-buehne .wort { color: #9BE3F2; }
.ki-buehne .lead { color: rgba(233, 244, 249, .82); }
.ki-buehne .text-soft { color: rgba(233, 244, 249, .74); }
.ki-buehne .klein { color: rgba(233, 244, 249, .6); }
.ki-buehne .marke-mono { color: #8FD9EA; }

.ki-buehne .auszeichnung {
  border-color: rgba(160, 226, 242, .34);
  background: rgba(255, 255, 255, .07);
  color: #A9E4F2;
}

.ki-buehne .karte,
.ki-buehne .ki-fenster,
.ki-buehne .ki-spalte {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .055);
  background-image: none;
  backdrop-filter: blur(14px);
  box-shadow: 0 26px 60px -40px rgba(0, 0, 0, .95);
  color: #E9F4F9;
}

.ki-buehne .karte:hover {
  transform: translateY(-3px);
  border-color: rgba(140, 224, 244, .6);
  box-shadow: 0 0 0 1px rgba(140, 224, 244, .22), 0 30px 70px -44px rgba(0, 0, 0, .95);
}

.ki-buehne .ki-spalte.rein { border-color: rgba(79, 203, 163, .55); }
.ki-buehne .ki-spalte.raus { border-color: rgba(242, 161, 140, .55); }
.ki-buehne .ki-spalte.rein li::before { background: #4FCBA3; }
.ki-buehne .ki-spalte.raus li::before { background: #F2A18C; }
.ki-buehne .ki-spalte li { color: rgba(233, 244, 249, .74); }

.ki-buehne .blase {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #E9F4F9;
}

.ki-buehne .ki-blase { border-color: rgba(255, 255, 255, .16); color: #E9F4F9; }

.ki-buehne .ki-blase.frage {
  border-color: rgba(107, 214, 238, .6);
  background: rgba(23, 162, 196, .22);
  box-shadow: 0 0 34px -10px rgba(76, 195, 222, .5);
}

.ki-buehne .ki-blase.antwort { background: rgba(255, 255, 255, .07); }
.ki-buehne .ki-cursor { background: #7FDCF0; }

@media (prefers-reduced-motion: reduce) {
  .ki-nebel span,
  .ki-buehne::before,
  .ki-buehne::after { animation: none; }
}

:root[data-ruhig] .ki-nebel span,
:root[data-ruhig] .ki-buehne::before,
:root[data-ruhig] .ki-buehne::after { animation: none; }

@media (max-width: 700px) {
  .ki-buehne { padding: clamp(20px, 5vw, 28px) clamp(14px, 4vw, 20px); }
  .ki-nebel span { filter: blur(46px); }
}

/* --- 29  Rechtstexte: Impressum, Datenschutz, AGB, Kuendigung -----------
   Eine Karte, viele kurze Abschnitte. Enger Rhythmus, ruhige Typografie. */
.rechtstext { text-align: left; }

/* Hinweiskasten (warm) und eingerueckter Kasten in Rechtstexten, genutzt von
   den App-Seiten im Website-Design (AGB-Entwurfshinweis, Widerrufsformular). */
.hinweis-warm {
  margin-bottom: var(--a2);
  padding: 12px 16px;
  border: 1.5px solid var(--korallentief);
  border-radius: var(--radius-klein);
  background: var(--peach);
  font-size: .95rem;
  line-height: 1.5;
}

.rechtstext-kasten {
  margin-top: var(--a1);
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-klein);
  background: var(--tint2);
}

.rechtstext-kasten p { margin: 6px 0 0; }
.rechtstext-kasten p:first-child { margin-top: 0; }


/* --- Bestellstrecke (App-Seiten im Website-Design) ----------------------- */

/* Zwei-Wege-Wahl am Ende der Strecke: Testmonat oder direkter Abschluss. */
.weg-wahl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a2);
}

@media (max-width: 700px) {
  .weg-wahl { grid-template-columns: 1fr; }
}

.weg-karte {
  display: block;
  width: 100%;
  padding: 18px;
  text-align: left;
  border: 2px solid var(--kontur);
  border-radius: var(--radius-klein);
  background: var(--panel);
  cursor: pointer;
  transition: border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}

.weg-karte[aria-pressed="true"] {
  border-color: var(--acc1);
  box-shadow: 4px 4px 0 rgba(var(--glowrgb), .2);
}

.weg-karte .marke-mono { display: block; margin-bottom: 6px; }
.weg-karte p { margin: 6px 0 0; font-size: .95rem; color: var(--soft); }

/* Unterschriftsfeld im Website-Design */
.unterschrift-rahmen {
  border: 2px dashed var(--borderstrong);
  border-radius: var(--radius-klein);
  background: #fff;
  overflow: hidden;
  max-width: 520px;
}

:root[data-thema="dunkel"] .unterschrift-rahmen { background: #F4F8FB; }




/* Konfigurator: Inhalt links, klebende Preisbox rechts */
.konfig-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--a3);
  align-items: start;
}

@media (max-width: 1024px) {
  .konfig-raster { grid-template-columns: 1fr; }
}

.konfig-preisbox { position: sticky; top: 110px; }

@media (max-width: 1024px) {
  .konfig-preisbox { position: static; }
}

.weg-wahl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 700px) {
  .weg-wahl-3 { grid-template-columns: 1fr; }
}

/* Modulzeile im Konfigurator: waehlbar wie eine Pille, mit Haken */
.modul-zeile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--kontur);
  border-radius: var(--radius-klein);
  background: var(--panel);
  cursor: pointer;
  transition: border-color var(--tempo) var(--kurve);
}

.modul-zeile[data-aktiv="1"] {
  border-color: var(--acc1);
  background: var(--tint2);
}

/* Plus/Minus-Zaehler und warnender Textknopf (Warenkorb) */
.zaehler-knopf {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--borderstrong);
  border-radius: 10px;
  background: var(--panel);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
}

.zaehler-knopf:hover { border-color: var(--acc1); }

.knopf-text-warn { color: var(--korallentief); }

/* Schlichte Liste in Karten (Bestelluebersicht) */
.liste-schlicht {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Schrittleiste der Bestellstrecke: Warenkorb, Daten, Pruefen */
.schritte {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 var(--a3);
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.schritte li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--leise);
}

.schritte li::after {
  content: "→";
  color: var(--leise);
}

.schritte li:last-child::after { content: none; }

.schritte li[aria-current="step"] { color: var(--tealdeep); font-weight: 700; }

/* Fehlerzeile unter Formularen (App-Seiten im Website-Design). */
.feld-fehler {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--a2);
  padding: 10px 14px;
  border: 1.5px solid var(--korallentief);
  border-radius: var(--radius-klein);
  background: var(--peach);
  font-size: .95rem;
}



.rechtstext h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.35;
  margin: 26px 0 8px;
  color: var(--ink);
}

.rechtstext h2:first-child { margin-top: 0; }

.rechtstext p {
  margin: 0;
  color: var(--soft);
  max-width: 68ch;
}

.rechtstext .offen {
  color: var(--coraldeep);
  font-weight: 600;
}

/* ======================================================================
   MOBILE VERDICHTUNG
   Zugeklappte Bloecke und gekuerzte Absaetze. Der Inhalt bleibt im
   Dokument, er ist nur zunaechst nicht sichtbar. Ab 701 px ist alles
   offen und die Bedienelemente verschwinden.
   ====================================================================== */

.klapp { margin: 10px 0 4px; }

.klapp > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 12px 16px;
  border: 2px solid var(--borderstrong);
  border-radius: var(--radius-klein);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.klapp > summary::-webkit-details-marker { display: none; }

.klapp > summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--tealdeep);
  border-bottom: 2px solid var(--tealdeep);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--tempo) var(--kurve);
}

.klapp[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.klapp[open] > summary { border-color: var(--tealdeep); margin-bottom: 10px; }

.klapp-zahl {
  flex: none;
  margin-left: auto;
  margin-right: 4px;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--leise);
}

.gekuerzt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gekuerzt { margin-bottom: 0 !important; }

.mehr {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin: 0 0 10px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--link);
  font-family: var(--text);
  font-size: .93rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (max-width: 700px) {
  /* Ueberschriften etwas kleiner, Fliesstext bleibt bei 17 px */
  h1 { font-size: clamp(1.62rem, 7.2vw, 1.86rem) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(1.24rem, 5.4vw, 1.42rem) !important; line-height: 1.15 !important; }
  h3 { font-size: 1.02rem !important; }


  /* Heros und Schlussbereiche gedeckelt */
  .abschluss { padding-top: 22px !important; padding-bottom: 22px !important; }
}

/* Ab 701 px ist alles offen, die Bedienelemente verschwinden */
@media (min-width: 701px) {
  .klapp > summary { display: none; }
  .mehr { display: none; }
  .gekuerzt { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
}

/* Abschnitt als Ausklapper: die Ueberschrift ist das Bedienelement */
.klapp-sektion { margin: 0; }

/* Der Kopf eines zugeklappten Abschnitts steht immer gleich: Pille in der
   ersten Zeile, Ueberschrift darunter, Pfeil rechts daneben. Vorher lag
   das an einem Zeilenumbruch, kurze Pillen wie "Preise" behielten die
   Ueberschrift neben sich und der Block sah anders aus als die uebrigen. */
.klapp-sektion > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  min-height: 60px;
  padding: 14px 16px;
  border: 2px solid var(--borderstrong);
  border-radius: var(--radius-klein);
  background: var(--kartegrad, var(--karte));
  cursor: pointer;
  list-style: none;
}

.klapp-sektion > summary::-webkit-details-marker { display: none; }
.klapp-sektion > summary::after { content: none; }

.klapp-sektion > summary > .auszeichnung {
  grid-column: 1;
  justify-self: start;
}

.klapp-sektion > summary > h2,
.klapp-sektion > summary > .mitte > h2 {
  grid-column: 1;
  margin: 0 !important;
  text-align: left !important;
  max-width: none !important;
}

.klapp-sektion > summary > .klapp-pfeil {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  margin-left: 0;
}

.klapp-sektion > summary > .mitte { display: contents; }

.klapp-pfeil {
  flex: none;
  margin-left: auto;
  width: 12px;
  height: 12px;
  border-right: 2.5px solid var(--tealdeep);
  border-bottom: 2.5px solid var(--tealdeep);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--tempo) var(--kurve);
}

.klapp-sektion[open] > summary { border-color: var(--tealdeep); margin-bottom: 14px; }
.klapp-sektion[open] .klapp-pfeil { transform: rotate(-135deg) translate(-2px, -2px); }

@media (min-width: 701px) {
  .klapp-sektion > summary {
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: default;
  }
  .klapp-pfeil { display: none; }
}

/* Fusszeile auf dem Telefon: die vier Verweisspalten laufen zweispaltig
   und mit engeren Zeilen. Spart rund tausend Pixel auf jeder Seite. */
@media (max-width: 700px) {
  .fuss { padding-top: 26px !important; }

  .fuss-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 14px !important;
  }

  .fuss-raster > :first-child { grid-column: 1 / -1; }
  .fuss h5 { margin-bottom: 8px; font-size: .68rem; }
  .fuss ul { gap: 0; }
  .fuss ul a { font-size: .92rem; line-height: 1.35; padding: 5px 0; display: block; }
  .fuss img { height: 42px; }
  .fuss-adresse, .fuss-kontakt { font-size: .9rem; line-height: 1.45; }
  .fuss-unten { font-size: .78rem !important; line-height: 1.5 !important; }
}

/* Auszeichnungspillen mit langem Text duerfen auf schmalen Bildschirmen
   umbrechen. Ohne diese Regel schiebt eine einzige Pille die ganze Seite
   ueber den Rand. */
.auszeichnung {
  max-width: 100%;
  flex-wrap: nowrap;
  align-items: flex-start;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Die Raute richtet sich an der ersten Zeile aus, nicht an der Mitte
   des umgebrochenen Textes. */
.auszeichnung::before { margin-top: .42em; }

@media (max-width: 700px) {
  .auszeichnung { letter-spacing: .08em; line-height: 1.35; }
  .ki-nebel { display: none; }
}

/* Team-Karten: bei vier Spalten reissen deutsche Komposita.
   Silbentrennung an, und ab 1024 px nur noch zwei Spalten,
   damit die Textspalte lesbar breit bleibt. */
.karte h3,
.karte p,
.karte .marke-mono {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* Vier Spalten sind fuer deutsche Komposita zu schmal.
   Zwischen 701 und 1240 px laufen die Team-Karten zweispaltig. */
@media (min-width: 701px) and (max-width: 1240px) {
  .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Einheitliche Bildbehandlung: die drei Studioaufnahmen und das
   Buerofoto sollen wie ein Satz wirken. Beim Ueberfahren volle Farbe. */
.portraet img {
  filter: saturate(.62) contrast(1.04);
  transition: filter var(--tempo) var(--kurve);
}

.portraet {
  position: relative;
  isolation: isolate;
}

/* Beim Ueberfahren bekommt das Foto eine eigene Ebene im Browser. Ohne
   eigenen Eckenradius wird diese Ebene rechteckig beschnitten, die Ecken
   springen also kurz auf eckig. Jede Ebene traegt deshalb den Radius
   selbst.                                                            */
.portraet img,
.portraet::after { border-radius: inherit; }

.portraet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(155deg, rgba(23, 162, 196, .26) 0%, rgba(15, 134, 166, .1) 46%, rgba(238, 137, 117, .16) 100%);
  mix-blend-mode: multiply;
  opacity: 1;
  transition: opacity var(--tempo) var(--kurve);
}

.karte:hover .portraet img,
.portraet:hover img { filter: none; }

.karte:hover .portraet::after,
.portraet:hover::after { opacity: 0; }

:root[data-thema="dunkel"] .portraet::after { mix-blend-mode: screen; opacity: .5; }

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .portraet::after { mix-blend-mode: screen; opacity: .5; }
}

:root[data-ruhig] .portraet img,
:root[data-ruhig] .portraet::after { transition: none; }

/* Ueberschrift und Absatz in Karten standen mal 6, mal 10 px auseinander,
   beides nicht auf der Leiter. Jetzt ueberall dieselbe Stufe.        */
.karte h3, .karte h4,
.kachel h3, .station h3 { margin-bottom: var(--a1); }

.karte h3 + p,
.karte h4 + p,
.karte h3 + ul,
.kachel h3 + p,
.station h3 + p,
.station h4 + p { margin-top: var(--a1); }

/* Rollenzeile in Karten: enger gesperrt, damit sie in schmale Spalten passt */
.karte > .marke-mono { letter-spacing: .06em; }

/* In schmalen Spalten trennt der Browser lange Woerter sonst irgendwo.
   Mit Silbentrennung steht wenigstens ein Trennstrich da.            */
.karte p,
.karte li,
.kachel p { hyphens: auto; -webkit-hyphens: auto; }

/* Namen in den Personenkarten: einer bricht zweizeilig um, die anderen
   nicht. Damit Rollenzeile und Fliesstext bei allen vier auf derselben
   Hoehe beginnen, ist Platz fuer zwei Zeilen reserviert.             */
.portraet + h3 {
  min-height: 2.4em;
  display: flex;
  align-items: flex-start;
}

/* --- Ueberlauf-Absicherungen -------------------------------------------
   Drei Stellen, an denen ein Element breiter wurde als sein Behaelter.
   Sichtbar nur als waagerechtes Rucken, deshalb hier festgezurrt. */

/* 1. Einstiegskachel: der Textteil schrumpft, der Pfeil bleibt rechts
      daneben stehen und rutscht nie darunter. */
.einstieg { flex-wrap: nowrap; align-items: center; }
.einstieg > :not(.einstieg-pfeil) { min-width: 0; flex: 1 1 auto; overflow-wrap: break-word; }
.einstieg .marke-mono { overflow-wrap: break-word; }
.einstieg-pfeil { flex: none; }

/* Beide Kacheln gleich hoch, gestapelt wie nebeneinander */
.hero-wege { align-items: stretch; grid-auto-rows: 1fr; }
.hero-wege > .einstieg { height: auto; align-self: stretch; }

/* 2. Knoepfe brechen um, statt aus dem Rahmen zu laufen */
.knopf { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }

/* 3. Bei vergroesserter Schrift wird die Kopfzeile zu breit. Dann
      entfaellt der Umschalter in der Leiste, er steht weiterhin in der
      Tafel fuer die Darstellung und im Telefonmenue. */
:root[data-gross] .kopf-rechts { flex-wrap: wrap; justify-content: flex-end; }
:root[data-gross="2"] .kopf .modus,
:root[data-gross="3"] .kopf .modus { display: none; }
:root[data-gross] .kopf-pille { flex-wrap: wrap; row-gap: 8px; }
:root[data-gross] .menue { flex-wrap: wrap; }

/* Auch textbetonte Verweise und Ueberschriften brechen bei sehr grosser
   Schrift um, statt den Rahmen zu sprengen. */
.knopf-text { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

h1, h2, h3, h4 { overflow-wrap: break-word; }

/* Bei den obersten Schriftstufen duerfen sehr lange Komposita auch
   innerhalb des Wortes brechen. anywhere wirkt anders als break-word:
   es verkleinert auch die Mindestbreite des Kastens. */
:root[data-gross="2"] h1, :root[data-gross="2"] h2, :root[data-gross="2"] h3,
:root[data-gross="3"] h1, :root[data-gross="3"] h2, :root[data-gross="3"] h3 {
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Die einzeilige Ueberschrift darf bei vergroesserter Schrift umbrechen,
   sonst schiebt sie die Seite waagerecht auf. */
:root[data-gross] .h2-einzeilig { white-space: normal !important; }

/* Vertrauensstreifen auf dem Telefon: alle Pillen gleich aufgebaut,
   Raute links, Text daneben. Vorher stand die Raute bei umbrechendem
   Text am linken Rand und der Text mittig, das sah wie ein Fehler aus. */
@media (max-width: 700px) {
  .streifen { grid-template-columns: minmax(0, 1fr); }
  .streifen span,
  .streifen span:nth-child(4),
  .streifen span:nth-child(5) { grid-column: auto; }

  .streifen span {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    padding-left: 16px;
    padding-right: 16px;
  }

  .streifen span::before { margin-top: .42em; }
}

/* Der Schalter "mehr" liegt manchmal auf einer gefuellten Flaeche mit
   weisser Schrift. Dort nimmt er die Textfarbe der Flaeche an, sonst
   steht ein helles Blau auf Petrol oder Koralle. */
.kachel .mehr,
.abschluss .mehr,
.rasen .mehr,
.ki-buehne .mehr {
  color: currentColor;
  opacity: .92;
}

.kachel .mehr:hover,
.abschluss .mehr:hover { opacity: 1; }

/* Referenzbilder auf der Webdesign-Seite */
.arbeit-bild > img,
.arbeit-bild > picture > img,
.schau-buehne img,
.schau-waehler button img { border-radius: inherit; }

.arbeit-bild {
  margin: 0 0 18px;
  border: 2px solid var(--borderstrong);
  border-radius: var(--radius-klein);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--schatten-hart);
  aspect-ratio: 16 / 10;
}

.arbeit-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--tempo) var(--kurve);
}

.karte:hover .arbeit-bild img { transform: scale(1.02); }
:root[data-ruhig] .arbeit-bild img { transition: none; }
:root[data-ruhig] .karte:hover .arbeit-bild img { transform: none; }

/* ======================================================================
   BILDERGALERIE, zwei Formen
   A) .schau-gross  Grosses Bild plus Auswaehler darunter, fuer
      Bildschirmaufnahmen im Querformat.
   B) .schau-reihe  Fuenf Aufnahmen nebeneinander, auf dem Telefon ein
      Wischkarussell mit Einrastpunkten, fuer Telefonaufnahmen.
   Beide zeigen je nach Bildschirm die passende Aufnahme, gesteuert
   ueber <picture> mit Medienabfrage.
   ====================================================================== */

/* Die Strecke laeuft schmaler als der Textsatz. In voller Breite wird die
   Aufnahme ueber 600 px hoch, dann sieht man Bild und Auswaehler nicht
   mehr zusammen.                                                       */
.schau { margin-top: var(--a3); }

/* Nur die Form mit grosser Buehne laeuft schmaler als der Textsatz. In
   voller Breite wird die Aufnahme ueber 600 px hoch, dann sieht man Bild
   und Auswaehler nicht mehr zusammen. Die Kabine-Reihe bleibt breit. */
.schau-geraet,
.schau-buehne,
.schau-waehler {
  max-width: 920px;
  margin-inline: auto;
}

/* --- A) Gross plus Auswaehler ---------------------------------------- */

.schau-buehne {
  position: relative;
  display: grid;
  border: 2px solid var(--borderstrong);
  border-radius: var(--radius-klein);
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--schatten-hart-tief);
}

.schau-buehne img {
  display: block;
  width: 100%;
  height: auto;
}

/* Alle fuenf liegen uebereinander in derselben Rasterzelle. Die Buehne ist
   damit immer so hoch wie die hoechste Aufnahme, und beim Umschalten
   springt die Seite nicht mehr.                                        */
.schau-buehne figure {
  grid-area: 1 / 1;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .18s var(--kurve);
}

.schau-buehne figure[data-aktiv="1"] {
  visibility: visible;
  opacity: 1;
}

.schau-buehne figcaption {
  padding: 12px 16px;
  border-top: 2px solid var(--border);
  background: var(--karte);
  font-family: var(--text);
  font-size: .95rem;
  color: var(--soft);
}

.schau-buehne figcaption b {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
  color: var(--ink);
  margin-bottom: 2px;
}

.schau-waehler {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--a1);
  margin: var(--a1) auto 0;
}

.schau-waehler button {
  display: block;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
  cursor: pointer;
  transition: border-color var(--tempo) var(--kurve), transform var(--tempo) var(--kurve);
}

.schau-waehler button img { display: block; width: 100%; height: auto; }
.schau-waehler button:hover { transform: translateY(-2px); border-color: var(--tealdeep); }

.schau-waehler button[aria-pressed="true"] {
  border-color: var(--tealdeep);
  box-shadow: 0 0 0 2px var(--tint);
}

.schau-waehler span {
  display: block;
  padding: 5px 6px 6px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--leise);
  text-align: center;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* --- B) Reihe und Wischkarussell ------------------------------------- */

.schau-reihe {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.schau-reihe figure { margin: 0; }

.schau-reihe img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid rgba(11, 26, 18, .45);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--schatten-hart);
}

.schau-reihe figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--leise);
  text-align: center;
}

.schau-punkte { display: none; }

@media (max-width: 760px) {
  /* Der Auswaehler wird auf dem Telefon zur Wischleiste, sonst sind die
     fuenf Vorschaubilder zu klein und die Beschriftungen brechen um. */
  .schau-waehler {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin-inline: calc(var(--rand) * -1);
    padding-inline: var(--rand);
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .schau-waehler::-webkit-scrollbar { display: none; }

  .schau-waehler {
    /* Die Leiste ist ein Scrollbereich und beschneidet oben. Ohne dieses
       Polster wird der Rahmen des angetippten Bildes abgeschnitten,
       weil es sich beim Antippen leicht hebt.                       */
    margin-top: calc(var(--a2) - 6px);
    padding-top: 6px;
  }

  .schau-waehler button { flex: 0 0 96px; }

  /* Die Telefonaufnahmen sind hochkant. In voller Hoehe wird daraus ein
     Vorschaubild von ueber 200 px, das drueckt sich an die Buehne. Als
     quadratischer Ausschnitt vom oberen Rand bleibt es klein und man
     erkennt trotzdem, welche Ansicht gemeint ist.                  */
  .schau-waehler button img {
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    object-position: top center;
  }

  .schau-waehler span {
    font-size: .56rem;
    padding: 4px 3px 5px;
  }

  .schau-reihe {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--rand);
    margin-inline: calc(var(--rand) * -1);
    padding-inline: var(--rand);
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .schau-reihe::-webkit-scrollbar { display: none; }

  .schau-reihe figure {
    flex: 0 0 calc(100% - 44px);
    scroll-snap-align: center;
  }

  /* Punkte zeigen an, wo man sich befindet */
  .schau-punkte {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
  }

  .schau-punkte i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--borderstrong);
    transition: background var(--tempo) var(--kurve), transform var(--tempo) var(--kurve);
  }

  .schau-punkte i[data-aktiv="1"] { background: var(--tealdeep); transform: scale(1.35); }

  .schau-waehler { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .schau-waehler span { font-size: .55rem; }
}

/* Hinweiszeile unter jeder Galerie */
.schau-hinweis {
  margin-top: 12px;
  font-size: .9rem;
  color: var(--leise);
}

/* Auswahlmenue im Formular: eigener Pfeil, damit es in beiden
   Farbschemata gleich aussieht */
.feld select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tealdeep) 50%),
    linear-gradient(135deg, var(--tealdeep) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.feld select:invalid { color: var(--leise); }

/* --- 14b  Hervorgehobene Spalte in der Vergleichstabelle -----------------
   Nur fuer Tabellen mit .tabelle-hervor. Die zweite Spalte (Kabine)
   bekommt Grund, Rahmen ueber die volle Hoehe und einen kraeftigen Kopf.
   Der Haken ersetzt das Wort optisch, fuer Vorleseprogramme bleibt es
   in .nur-vorlesen stehen.                                            */

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

/* Haken und Strich sitzen als Zeichnung im Kreis, nicht als zwei
   gedrehte Rahmenlinien. Damit sind sie in jeder Groesse von selbst
   mittig und muessen nicht je Bildschirmbreite nachgerueckt werden. */
.zeichen {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: -5px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.zeichen.ja {
  background-color: rgba(30, 122, 60, .14);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E7A3C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12l4 4 8-8'/></svg>");
  box-shadow: inset 0 0 0 2px rgba(30, 122, 60, .5);
}

.zeichen.nein {
  background-color: transparent;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A97A4' stroke-width='2.6' stroke-linecap='round'><path d='M7.5 12h9'/></svg>");
  box-shadow: inset 0 0 0 2px var(--borderstrong);
}

.tabelle-hervor th:nth-child(2),
.tabelle-hervor td[data-titel='Kabine'] {
  border-left: 2px solid #1E7A3C;
  border-right: 2px solid #1E7A3C;
}

/* Grund bekommt nur, was wirklich ein Unterschied ist. Wo ein anderer
   Anbieter dasselbe kann, bleibt die Zelle neutral. Alles andere waere
   ein Hervorheben ohne Aussage.                                      */
.tabelle-hervor td[data-nurwir='1'] { background: rgba(30, 122, 60, .12); }

.tabelle-hervor th:nth-child(2) {
  color: #fff;
  background: #1E7A3C;
  border-top: 2px solid #1E7A3C;
}

.tabelle-hervor tbody tr:last-child td[data-titel='Kabine'] {
  border-bottom: 2px solid #1E7A3C;
}

.tabelle-hervor td[data-nurwir='1'] .zeichen.ja {
  background-color: rgba(30, 122, 60, .24);
  box-shadow: inset 0 0 0 2px #1E7A3C;
}

.tabelle-hervor td[data-nurwir='1']::after {
  content: 'nur bei Kabine';
  display: inline-block;
  margin-left: 8px;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1E7A3C;
  vertical-align: 4px;
}

/* --- Sprungmarke im KI-Fenster (kein Verweis nach aussen) --------------- */

.ki-sprung {
  display: inline-block;
  padding: 8px 14px;
  border: 2px dashed var(--borderstrong);
  border-radius: 999px;
  background: var(--tint2);
  color: var(--tealdeep);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Gestapelte Kartenfassung der hervorgehobenen Tabelle */
/* --- Vergleichstabelle auf dem Telefon ----------------------------------
   Als gestapelte Karten wurde daraus eine sehr lange Liste, in der jede
   Zeile fuenfmal untereinander stand. Jetzt bleibt es eine Tabelle: das
   Merkmal ueber die volle Breite, darunter die vier Anbieter in einer
   Viererleiste. Nichts laeuft seitlich heraus.                       */
@media (max-width: 768px) {
  .tabelle-hervor,
  .tabelle-hervor tbody { display: block; }

  .tabelle-hervor thead { display: none; }

  .tabelle-hervor tr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 10px;
    border: 2px solid var(--borderstrong);
    border-radius: var(--radius-klein);
    background: var(--karte);
    box-shadow: var(--schatten-hart);
    overflow: hidden;
  }

  .tabelle-hervor td {
    display: block;
    padding: 8px 4px 10px;
    border: 0;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: .82rem;
    line-height: 1.25;
    /* Trennstriche statt harter Wortbrueche, sonst steht in der schmalen
       Spalte ein einzelnes "n" auf der letzten Zeile.               */
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  .tabelle-hervor td[data-titel='Merkmal'] {
    grid-column: 1 / -1;
    padding: 11px 14px 9px;
    border-top: 0;
    text-align: left;
    font-size: .92rem;
    background: var(--tint2);
  }

  .tabelle-hervor td::before {
    content: attr(data-titel);
    display: block;
    margin-bottom: 3px;
    font-family: var(--mono);
    font-size: .56rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--leise);
  }

  .tabelle-hervor td[data-titel='Merkmal']::before { display: none; }

  .tabelle-hervor td[data-titel='Kabine'] {
    border-left: 0;
    border-right: 0;
    box-shadow: inset 0 -3px 0 #1E7A3C;
  }

  .tabelle-hervor td[data-titel='Kabine']::before { color: #1E7A3C; }

  /* Die Auszeichnung "nur bei Kabine" braucht auf dem Telefon keine
     eigene Zeile, dort genuegt der gruene Grund.                   */
  .tabelle-hervor td[data-nurwir='1']::after { display: none; }

  /* Nur noch die Groesse, die Zeichnung zentriert sich selbst. */
  .tabelle-hervor .zeichen { width: 20px; height: 20px; vertical-align: -5px; }
}

/* Bildunterschriften, die sich je nach Geraet unterscheiden. Auf dem
   Telefon zeigen manche Strecken andere Ansichten als am Rechner, dann
   muss auch die Beschriftung eine andere sein.                       */
/* Der Klassenname steht doppelt, damit diese Regel auch dort greift, wo
   ein Bauteil dem Element selbst schon eine Anzeigeart gibt.          */
.nur-klein.nur-klein { display: none; }

@media (max-width: 760px) {
  .nur-gross.nur-gross { display: none; }
  .nur-klein.nur-klein { display: inline; }
  /* Bloecke bleiben Bloecke, sonst laeuft der Text aus seinem Kasten. */
  b.nur-klein.nur-klein,
  p.nur-klein.nur-klein,
  div.nur-klein.nur-klein,
  li.nur-klein.nur-klein { display: block; }
}

/* --- Abstand zwischen Pille und Ueberschrift, global --------------------
   Die Auszeichnung ist eine Vorzeile, keine Beschriftung. Sie braucht
   sichtbar Luft nach unten, sonst klebt die Ueberschrift daran.
   Ueberschriften mit eigenem Abstand im Dokument sind auf dieselbe
   Stufe gesetzt, damit ueberall derselbe Wert steht.                  */
.auszeichnung + h1,
.auszeichnung + h2,
.auszeichnung + h3,
.auszeichnung + p,
.auszeichnung + div { margin-top: var(--a3); }

/* In den Weichen-Kacheln steuert bereits die Rasterluecke den Abstand.
   Dort kommt nur der Rest bis zur Stufe dazu.                        */
.kachel .auszeichnung + h3 { margin-top: var(--a1); }

/* --- Hinweis auf die Telefon-Fassung ------------------------------------
   Erscheint nur unter 760 px, dort zeigt die Buehne die App fuers
   Telefon und nicht die vollstaendige Fassung vom Rechner.            */
.schau-geraet {
  margin: 0 0 var(--a1);
  padding: 9px 14px;
  border: 1.5px solid var(--kontur);
  border-radius: 12px;
  background: var(--tint2);
  font-family: var(--text);
  font-size: .88rem;
  line-height: 1.45;
  color: var(--soft);
}

.schau-geraet b {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tealdeep);
  margin-bottom: 3px;
}

/* ========================================================================
   26  Redesign 19.08.2026: Nebel, Boutique-Hero, Glas-Kacheln
   Entscheidungen Matthias (Grill-Protokoll): Dunkel ist Standard, echter
   WebGL-Nebel mit Stufenleiter (nebel.js), Startseiten-Hero neu, die drei
   Themenbereiche als interaktive Glas-Kacheln. Innenseiten unangetastet.
   ======================================================================== */

/* --- Nebel-Leinwand: liegt hinter allem, Korn und Punkte bleiben davor. -- */
#nebel {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: none;
}

:root[data-thema="dunkel"] #nebel { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) #nebel { display: block; }
}

/* Laeuft der Nebel, tritt der gemalte Verlauf zurueck, Tiefe kommt vom Shader. */
.nebel-an .textur::before { opacity: .38; }

/* Feines Punktraster im Dunkeln, die ruhige "Nerd-Tiefe" hinter allem. */
:root[data-thema="dunkel"] .textur {
  background-image: radial-gradient(rgba(190, 214, 240, .055) 1px, transparent 1.4px);
  background-size: 26px 26px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .textur {
    background-image: radial-gradient(rgba(190, 214, 240, .055) 1px, transparent 1.4px);
    background-size: 26px 26px;
  }
}

/* Stufe 2 ohne WebGL: die vorhandene Aurora wandert kraeftiger. */
.aurora-an .textur::before {
  animation-duration: 24s;
  background-size: 240% 240%;
}

@media (prefers-reduced-motion: reduce) {
  .textur::before { animation: none; }
}

/* --- Boutique-Hero der Startseite ---------------------------------------- */

.hero-mitte {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.boutique {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(var(--glowrgb), .5);
  color: var(--acc1);
  background: rgba(var(--glowrgb), .07);
  box-shadow: 0 0 24px rgba(var(--glowrgb), .18), inset 0 0 14px rgba(var(--glowrgb), .07);
}

.boutique::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acc2);
  box-shadow: 0 0 10px var(--acc2);
  animation: boutiquePuls 2.6s ease-in-out infinite;
}

@keyframes boutiquePuls {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.65); opacity: .55; }
}

.hero-mitte h1 {
  margin-top: var(--a3);
  letter-spacing: -.02em;
}

/* Der zweite Satz der Ueberschrift traegt den wandernden Leucht-Verlauf. */
.verlauf-wort {
  background: linear-gradient(92deg, var(--acc1) 0%, var(--acc2) 46%, var(--coral) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: verlaufZiehen 9s ease-in-out infinite;
}

@keyframes verlaufZiehen {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

/* Tippende Terminal-Zeile unter dem Slogan. */
.tipper {
  font-family: var(--mono);
  font-size: .95rem;
  color: var(--soft);
  letter-spacing: .02em;
  margin: var(--a2) 0 0;
  min-height: 1.7em;
}

.tipper::before {
  content: "> ";
  color: var(--acc2);
}

.tipper-text::after {
  content: "▌";
  margin-left: 2px;
  color: var(--acc1);
  animation: tipperBlink 1.1s steps(1) infinite;
}

.hero-knoepfe {
  margin-top: var(--a3);
  justify-content: center;
}

.hero-mitte .lead {
  margin: var(--a3) auto 0;
}

@keyframes tipperBlink {
  50% { opacity: 0; }
}

/* Pfeil-Knoepfe im Stil der Referenz: der Pfeil rueckt beim Zeigen vor. */
.knopf-pfeil .pfeil {
  display: inline-block;
  transition: transform var(--tempo) var(--kurve);
}

.knopf-pfeil:hover .pfeil,
.knopf-pfeil:focus-visible .pfeil {
  transform: translateX(4px);
}

/* --- Glas-Kacheln der Weiche --------------------------------------------- */

/* Jede Kachel behaelt ihre Farbe, im Glas-Look als Leuchtfarbe. */
.kachel-glas { --kglow: 55, 190, 222; }
.kachel-glas.kachel-web { --kglow: 150, 132, 244; }
.kachel-glas.kachel-produkt { --kglow: 242, 161, 140; }

/* Lichtschein, der dem Zeiger folgt (Lage kommt aus nebel.js). */
.kachel-glas::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 28%),
    rgba(var(--kglow), .2), transparent 58%);
  opacity: 0;
  transition: opacity .35s var(--kurve);
  pointer-events: none;
}

.kachel-glas:hover::after,
.kachel-glas.kachel-aktiv::after { opacity: 1; }

.kachel-glas:hover,
.kachel-glas.kachel-aktiv {
  border-color: rgba(var(--kglow), .6);
  box-shadow: 0 0 0 1px rgba(var(--kglow), .25), 0 28px 64px -30px rgba(var(--kglow), .4);
}

/* Im Dunkeln werden die Kacheln zu Glas: tief, durchscheinend, Leuchtkante. */
:root[data-thema="dunkel"] .kachel.kachel-glas {
  background: linear-gradient(160deg, rgba(23, 35, 58, .74) 0%, rgba(15, 24, 38, .6) 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
}

:root[data-thema="dunkel"] .kachel.kachel-glas .kachel-liste,
:root[data-thema="dunkel"] .kachel.kachel-glas .produkt-links {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .kachel.kachel-glas {
    background: linear-gradient(160deg, rgba(23, 35, 58, .74) 0%, rgba(15, 24, 38, .6) 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
    backdrop-filter: blur(16px) saturate(1.25);
  }
  :root:not([data-thema="hell"]) .kachel.kachel-glas .kachel-liste,
  :root:not([data-thema="hell"]) .kachel.kachel-glas .produkt-links {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
  }
}

/* Direkt anklickbare Produkt-Zeilen in der dritten Kachel. */
.produkt-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  border-radius: var(--radius-klein);
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .1);
}

.produkt-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 13px 18px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-top: 1px solid rgba(255, 255, 255, .16);
  transition: background var(--tempo) var(--kurve);
}

.produkt-links a:first-child { border-top: 0; }

.produkt-links a small {
  display: block;
  font-weight: 400;
  font-size: .85rem;
  color: rgba(255, 255, 255, .78);
}

.produkt-links .pfeil {
  font-family: var(--mono);
  flex: none;
  opacity: .7;
  transition: transform var(--tempo) var(--kurve), opacity var(--tempo) var(--kurve);
}

.produkt-links a:hover,
.produkt-links a:focus-visible {
  background: rgba(255, 255, 255, .16);
}

.produkt-links a:hover .pfeil,
.produkt-links a:focus-visible .pfeil {
  transform: translateX(4px);
  opacity: 1;
}

/* --- Telefon: alles untereinander, volle Breite, grosse Tippflaechen. ---- */

@media (max-width: 700px) {
  .hero-knoepfe {
    flex-direction: column;
    width: 100%;
  }
  .hero-knoepfe .knopf {
    width: 100%;
    justify-content: center;
  }
  .tipper { font-size: .82rem; }
  .boutique { font-size: .68rem; letter-spacing: .14em; }
}

/* --- Ruhe-Modus: alles steht still, nichts blinkt. ----------------------- */

@media (prefers-reduced-motion: reduce) {
  .boutique::before,
  .verlauf-wort,
  .tipper-text::after {
    animation: none;
  }
  .kachel-glas:hover { transform: none; }
}