/* ==========================================================================
   Hildebrandt.AI · Stilgrundlage
   Gebaut nach ~/SecondBrain/firmen/Hildebrandt-AI-UG-ci.md
   Bewegungsmotiv: die Stufe aus der Bildmarke. Alles startet auf einem
   Niveau und springt eine Stufe hoch.
   ========================================================================== */

/* --- 1 · Marken-Werte ---------------------------------------------------- */

:root {
  /* Grundfarben, hell */
  --graphit:      #1D1D1F;
  --grau:         #6E6E73;
  --grau-leise:   #64646A;
  --platin:       #F5F5F7;
  --karte:        #FFFFFF;
  --karte-hoch:   #FFFFFF;
  --haarlinie:    #D2D2D7;
  --haarlinie-fein: rgba(0, 0, 0, .06);

  /* Zustandsfarben. Regel aus dem CI: Farbe gehoert dem Geld.
     Diese drei stehen nur auf Zahlen und Zustaenden, nie auf Flaechen.

     Am 02.08.2026 nachgemessen und abgedunkelt: Weil sie auf ZAHLEN
     stehen, sind sie Textfarben und muessen 4,5:1 erreichen. Die
     urspruenglichen Werte lagen bei 2,90 (gruen), 4,34 (rot) und 3,86
     (gelb) auf hellem Grund und waren damit zu schwach. */
  --gewinn:       #127A42;
  --verlust:      #C62A22;
  --achtung:      #8A5300;
  /* Gemessen am 02.08.2026: Apples #0A84FF erreicht auf hellem Grund nur
     3,65:1 und ist damit für Text zu schwach. Es ist die Farbe des
     DUNKLEN Modus. Hier steht deshalb ein dunklerer Ton derselben
     Familie, gemessen 5,27:1 auf Weiß und 4,84:1 auf Platin. */
  --fokus:        #0B69D4;
  --fokus-leise:  rgba(11, 105, 212, .10);
  --fokus-glut:   rgba(11, 105, 212, .28);

  /* Abgeleitete Rollen */
  --grund:        var(--platin);
  --grund-tief:   #EBEBF0;
  --tinte:        var(--graphit);
  --tinte-leise:  var(--grau);
  --marke:        var(--graphit);

  /* Radien aus dem CI */
  --r-gross:      20px;
  --r-innen:      13px;
  --r-klein:      8px;
  --r-rund:       999px;

  /* Schrift. Systemaufruf ist lizenzkonform, es wird nichts eingebettet.
     Die Mono ist Charakterschrift: Zahlen, Quellen, Kennwerte. */
  --satz: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  /* Raster */
  --breite-text:  min(680px, 100% - 48px);
  --breite-voll:  min(1180px, 100% - 48px);
  --breite-weit:  min(1400px, 100% - 48px);

  /* Bewegung */
  --stufe-zeit:   .72s;
  --stufe-kurve:  cubic-bezier(.16, 1, .3, 1);
  --schnell:      cubic-bezier(.2, .8, .2, 1);

  color-scheme: light dark;
}

/* Dunkel per Systemeinstellung */
@media (prefers-color-scheme: dark) {
  :root {
    --graphit:      #F5F5F7;
    --grau:         #98989D;
    /* Nachgemessen: #6E6E73 erreichte auf Schwarz nur 4,14:1. */
    --grau-leise:   #86868B;
    --platin:       #000000;
    --karte:        #1C1C1E;
    --karte-hoch:   #242428;
    --haarlinie:    #38383A;
    --haarlinie-fein: rgba(255, 255, 255, .07);

    --gewinn:       #30D158;
    --verlust:      #FF453A;
    --achtung:      #FF9F0A;
    --fokus:        #0A84FF;
    --fokus-leise:  rgba(10, 132, 255, .14);
    --fokus-glut:   rgba(10, 132, 255, .40);

    --grund:        #000000;
    --grund-tief:   #0A0A0C;
    --tinte:        var(--graphit);
    --tinte-leise:  var(--grau);
    --marke:        var(--graphit);
  }
}

/* Umschalter am Wurzelelement gewinnt in beide Richtungen */
:root[data-theme="dark"] {
  --graphit:      #F5F5F7;
  --grau:         #98989D;
  --grau-leise:   #86868B;
  --platin:       #000000;
  --karte:        #1C1C1E;
  --karte-hoch:   #242428;
  --haarlinie:    #38383A;
  --haarlinie-fein: rgba(255, 255, 255, .07);
  --gewinn:       #30D158;
  --verlust:      #FF453A;
  --achtung:      #FF9F0A;
  --fokus-leise:  rgba(10, 132, 255, .14);
  --fokus-glut:   rgba(10, 132, 255, .40);
  --grund:        #000000;
  --grund-tief:   #0A0A0C;
  --tinte:        var(--graphit);
  --tinte-leise:  var(--grau);
  --marke:        var(--graphit);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --graphit:      #1D1D1F;
  --grau:         #6E6E73;
  --grau-leise:   #64646A;
  --platin:       #F5F5F7;
  --karte:        #FFFFFF;
  --karte-hoch:   #FFFFFF;
  --haarlinie:    #D2D2D7;
  --haarlinie-fein: rgba(0, 0, 0, .06);
  --gewinn:       #127A42;
  --verlust:      #C62A22;
  --achtung:      #8A5300;
  --fokus:        #0B69D4;
  --fokus-leise:  rgba(11, 105, 212, .10);
  --fokus-glut:   rgba(11, 105, 212, .28);
  --grund:        var(--platin);
  --grund-tief:   #EBEBF0;
  --tinte:        var(--graphit);
  --tinte-leise:  var(--grau);
  --marke:        var(--graphit);
  color-scheme: light;
}


/* --- 2 · Grundlagen ------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--satz);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background .5s var(--schnell), color .5s var(--schnell);
}

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

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

:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
  border-radius: var(--r-klein);
}

::selection {
  background: var(--fokus);
  color: #fff;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.028em;
  text-wrap: balance;
  line-height: 1.06;
}

p { margin: 0; text-wrap: pretty; }


/* --- 3 · Typografische Stufen -------------------------------------------- */

.riese {
  font-size: clamp(2.9rem, 9.5vw, 7.2rem);
  letter-spacing: -.045em;
  line-height: .95;
  font-weight: 600;
}

.gross {
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  letter-spacing: -.036em;
  line-height: 1.03;
}

.mittel {
  font-size: clamp(1.45rem, 3vw, 2.05rem);
  letter-spacing: -.026em;
  line-height: 1.15;
}

.fuehrung {
  font-size: clamp(1.14rem, 2.1vw, 1.42rem);
  line-height: 1.5;
  color: var(--tinte-leise);
  letter-spacing: -.014em;
  font-weight: 400;
}

.klein   { font-size: .94rem; line-height: 1.5; }
.winzig  { font-size: .81rem; line-height: 1.45; }

/* Das Etikett. Mono, gesperrt, Grossbuchstaben. Kennzeichnet jeden
   Abschnitt und jeden Bereich. Traegt die Marke durch die Seite. */
.etikett {
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .6em;
}

/* Die Stufe im Kleinformat, aus drei Strichen gebaut: unten links
   waagerecht, in der Mitte senkrecht hoch, oben rechts waagerecht
   weiter. Genau die Bewegung der Bildmarke. */
.etikett::before {
  content: "";
  width: 16px;
  height: 8px;
  flex: none;
  transform: translateY(-1px);
  background:
    linear-gradient(currentColor, currentColor) 0    100% / 50%    1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0    / 50%    1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 50%  0    / 1.5px  100%  no-repeat;
  opacity: .55;
}

/* Zahlen immer in Mono mit gleichmaessiger Breite */
.zahl {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  font-weight: 500;
}


/* --- 4 · Rumpf und Abschnitte -------------------------------------------- */

.rumpf { width: var(--breite-voll); margin-inline: auto; }
.rumpf-weit { width: var(--breite-weit); margin-inline: auto; }

/* Lesetext läuft NICHT in einer eigenen, zentrierten Spalte. Er beginnt
   an derselben linken Kante wie alle Raster und ist nur schmaler. Sonst
   springt die Seite beim Scrollen zwischen zwei linken Rändern hin und
   her, was bei dieser strengen Gestaltung sofort auffällt. */
.rumpf-text {
  width: var(--breite-voll);
  margin-inline: auto;
}

.rumpf-text > * { max-width: 68ch; }

/* Die Ausnahme: bewusst mittig gesetzte Abschnitte */
.rumpf-text.mitte { text-align: center; }
.rumpf-text.mitte > * { margin-inline: auto; }

section { position: relative; }

.abschnitt {
  padding-block: clamp(64px, 8vw, 112px);
}

/* Der Streifen um eine Stufenlinie. Er braucht Luft, aber deutlich
   weniger als ein voller Abschnitt, sonst zerfällt die Seite in
   zusammenhanglose Inseln. */
.abschnitt-eng { padding-block: clamp(22px, 3vw, 40px); }

/* Ein Abschnitt, der unmittelbar vor einer Stufenlinie endet, zieht sein
   unteres Polster zurück. Sonst addieren sich beide Abstände zu einem
   Loch von über 200 Bildpunkten, und die Seite zerfällt in Inseln. */
.abschnitt:has(+ .abschnitt-eng) { padding-bottom: clamp(30px, 4vw, 56px); }


/* --- 5 · Die Stufenlinie -------------------------------------------------
   Der Abschnittstrenner. Kommt direkt aus der Bildmarke: eine Linie, die
   nicht gerade durchlaeuft, sondern einmal die Stufe nach oben macht.
   ------------------------------------------------------------------------ */

.stufenlinie {
  height: 34px;
  width: 100%;
  color: var(--haarlinie);
  overflow: visible;
}

.stufenlinie path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--laenge, 1200);
  stroke-dashoffset: 0;
}

.js .stufenlinie path { stroke-dashoffset: var(--laenge, 1200); }

.js .stufenlinie.sichtbar path {
  animation: linie-zeichnen 1.5s var(--stufe-kurve) forwards;
}

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


/* --- 6 · Der Auftritt beim Scrollen --------------------------------------
   Das Kernmotiv: ein Element liegt tief und springt eine Stufe hoch,
   sobald es in den Blick kommt.
   ------------------------------------------------------------------------ */

/* WICHTIG: Das Verstecken greift nur, wenn JavaScript läuft. Ohne
   JavaScript ist die Seite vollständig sichtbar statt leer. Die Klasse
   setzt ein winziges Skript im Kopf der Seite, deshalb blitzt nichts auf. */
.js [data-auftritt] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity   var(--stufe-zeit) var(--stufe-kurve),
    transform var(--stufe-zeit) var(--stufe-kurve),
    filter    var(--stufe-zeit) var(--stufe-kurve);
  filter: blur(6px);
  will-change: opacity, transform;
}

.js [data-auftritt].da {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Variante: von der Seite */
.js [data-auftritt="seite"]        { transform: translate3d(-22px, 0, 0); }
.js [data-auftritt="seite-rechts"] { transform: translate3d(22px, 0, 0); }

/* ACHTUNG: Eine seitliche Startverschiebung lässt das Element überstehen,
   solange die Animation noch nicht gelaufen ist. Auf schmalen Schirmen
   erzeugt das eine Querscroll-Leiste. Dort wird deshalb von unten
   eingeblendet statt von der Seite. Nebenbei ist das auch richtiger:
   einspaltig gibt es kein links und rechts mehr. */
@media (max-width: 780px) {
  .js [data-auftritt="seite"],
  .js [data-auftritt="seite-rechts"] { transform: translate3d(0, 22px, 0); }
}
.js [data-auftritt="ruhig"]        { transform: none; filter: none; }
.js [data-auftritt="skala"]        { transform: scale(.965); filter: blur(4px); }

/* Zeilenweiser Aufstieg fuer grosse Ueberschriften */
.zeile-huelle { display: block; overflow: hidden; }

.js .zeile {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1.05s var(--stufe-kurve);
  will-change: transform;
}

.js .da .zeile, .js .zeile.da { transform: none; }


/* --- 7 · Kopfzeile -------------------------------------------------------- */

.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  padding-block: 14px;
  transition: transform .45s var(--schnell), background .35s, backdrop-filter .35s,
              border-color .35s, padding .35s var(--schnell);
  border-bottom: 1px solid transparent;
}

.kopf.geheftet {
  background: color-mix(in srgb, var(--grund) 78%, transparent);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom-color: var(--haarlinie-fein);
  padding-block: 9px;
}

.kopf.versteckt { transform: translateY(-104%); }

.kopf-innen {
  width: var(--breite-weit);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Die Marke in der Kopfzeile */
.marke-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--marke);
  flex: none;
}

.marke-link .bildmarke { width: 26px; height: 26px; }

.wortmarke {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.028em;
  white-space: nowrap;
}

.wortmarke .punkt-ai {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -.02em;
}

.kopf-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.nav-punkt {
  position: relative;
  padding: 7px 13px;
  font-size: .88rem;
  color: var(--tinte-leise);
  border-radius: var(--r-klein);
  transition: color .25s, background .25s;
  white-space: nowrap;
}

.nav-punkt:hover { color: var(--tinte); background: var(--haarlinie-fein); }
.nav-punkt[aria-current="page"] { color: var(--tinte); font-weight: 500; }

.nav-punkt[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 1px;
  height: 1.5px;
  background: var(--fokus);
  border-radius: 2px;
}

/* Umschalter Hell und Dunkel */
.themenschalter {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--haarlinie);
  background: transparent;
  color: var(--tinte-leise);
  border-radius: var(--r-rund);
  cursor: pointer;
  transition: color .25s, border-color .25s, transform .25s var(--schnell);
}

.themenschalter:hover { color: var(--tinte); border-color: var(--tinte-leise); transform: rotate(18deg); }
.themenschalter svg { width: 15px; height: 15px; }
.themenschalter .sonne { display: none; }
:root[data-theme="dark"] .themenschalter .sonne,
:root[data-theme="dark"] .themenschalter .mond { display: revert; }

/* Menueknopf fuer schmale Bildschirme */
.menue-knopf {
  position: relative;
  display: none;
  flex: none;
  width: 34px; height: 34px;
  place-items: center;
  border: 1px solid var(--haarlinie);
  background: transparent;
  color: var(--tinte);
  border-radius: var(--r-rund);
  cursor: pointer;
}

/* GEMESSEN: Als Raster zog der Knopf seine drei Zeilen auf die volle
   Hoehe auseinander, die Balken standen 11,3 statt 4 Punkte auseinander.
   Die Drehung rechnete mit 5,5 Punkten und schob sie nur zur Haelfte
   zusammen: Statt eines Kreuzes stand dort ein Pfeil nach rechts.

   Jetzt liegen die Balken absolut uebereinander. Damit stimmt der Weg
   zum Kreuz unabhaengig von der Knopfhoehe. */
.menue-knopf span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px; height: 1.5px;
  margin-left: -7.5px;
  margin-top: -0.75px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .34s var(--stufe-kurve), opacity .2s;
}

.menue-knopf span:nth-child(1) { transform: translateY(-5px); }
.menue-knopf span:nth-child(2) { transform: translateY(0); }
.menue-knopf span:nth-child(3) { transform: translateY(5px); }

/* Der Versatz aus der Grundstellung muss AUFGEHOBEN werden, nicht
   weggelassen: Der obere Balken steht bei -5 und muss +5 wandern, damit
   beide in der Mitte zusammenfinden. Ohne das drehen sie sich zwar, aber
   auf ihrer eigenen Hoehe, und es entsteht ein Pfeil statt eines Kreuzes. */
.menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }


/* --- 7b · Der Fortschritt als Treppe -------------------------------------
   Kein gleitender Balken: der Fortschritt springt in festen Stufen, wie
   das Markenzeichen. Zwischen zwei Stufen steht er still.
   ------------------------------------------------------------------------ */

.fortschritt {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 99;
  pointer-events: none;
  background: transparent;
}

.fortschritt span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(to right,
              color-mix(in srgb, var(--fokus) 40%, transparent), var(--fokus));
  /* Kurz und hart: der Sprung soll als Sprung erkennbar sein */
  transition: transform .18s cubic-bezier(.3, 1.4, .5, 1);
}

@media (prefers-reduced-motion: reduce) {
  .fortschritt { display: none; }
}


/* --- 8 · Der Kopfbereich mit Leinwand ------------------------------------ */

.buehne {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.buehne-leinwand {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;

  /* Die Fläche tritt dort zurück, wo der Text steht. Ohne das läuft die
     Schrift durch die Striche und wird schlecht lesbar. Der Verlauf ist
     bewusst weich, damit keine sichtbare Kante entsteht. */
  /* Zwei Masken übereinander: eine blendet nach links aus, damit der Text
     frei steht, die zweite hält den obersten Streifen frei, damit keine
     Linie quer durch die Navigation läuft. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 26%,
                    rgba(0,0,0,.9) 52%, #000 70%),
    linear-gradient(to bottom, transparent 0, #000 96px);
          mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 26%,
                    rgba(0,0,0,.9) 52%, #000 70%),
    linear-gradient(to bottom, transparent 0, #000 96px);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* Auf schmalen Bildschirmen steht der Text über der ganzen Breite,
   dort blendet die Fläche stattdessen nach unten aus. */
@media (max-width: 760px) {
  /* Sanfter als zuvor: Mit dem harten Auslauf bei 62 Prozent wirkte die
     untere Haelfte der Buehne auf dem Telefon leer. */
  .buehne-leinwand {
    -webkit-mask-image:
      linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.28) 74%, transparent 96%);
            mask-image:
      linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.28) 74%, transparent 96%);
  }
}

/* Weicher Auslauf nach unten, damit die Leinwand nicht abgeschnitten wirkt */
.buehne::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34vh;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--grund) 88%);
  pointer-events: none;
}

.buehne-inhalt {
  width: var(--breite-weit);
  margin-inline: auto;
  padding-block: 150px 108px;
  position: relative;
  z-index: 1;
}

.buehne-these {
  max-width: 15ch;
  margin-top: 22px;
}

.buehne-fuehrung {
  max-width: 46ch;
  margin-top: 26px;
}

.buehne-fuss {
  margin-top: 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Hinweis zum Weiterscrollen */
.scroll-wink {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: var(--tinte-leise);
  z-index: 1;
  pointer-events: none;
}

.scroll-wink .balken {
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, transparent, currentColor);
  transform-origin: top;
  animation: wink 2.4s var(--schnell) infinite;
}

@keyframes wink {
  0%, 100% { transform: scaleY(.34); opacity: .3; }
  50%      { transform: scaleY(1);   opacity: .9; }
}


/* --- 9 · Knoepfe ---------------------------------------------------------- */

.knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--r-rund);
  font-size: .96rem;
  font-weight: 500;
  letter-spacing: -.012em;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform .3s var(--schnell), box-shadow .3s, background .3s,
              color .3s, border-color .3s;
  isolation: isolate;
}

.knopf-voll {
  background: var(--tinte);
  color: var(--grund);
}

.knopf-voll:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--tinte) 55%, transparent);
}

.knopf-linie {
  border-color: var(--haarlinie);
  color: var(--tinte);
  background: transparent;
}

.knopf-linie:hover {
  border-color: var(--tinte);
  transform: translateY(-2px);
}

/* Solange der Zeiger auf dem Knopf liegt, folgt er ihm schnell. Ohne das
   hinkt er der Maus sichtbar hinterher. */
.knopf.magnet { transition: transform .14s var(--schnell), box-shadow .3s, background .3s; }

.knopf:active { transform: translateY(0) scale(.985); }

/* Der Pfeil springt die Stufe */
.knopf .pfeil {
  width: 15px; height: 15px;
  transition: transform .34s var(--stufe-kurve);
}
.knopf:hover .pfeil { transform: translate(3px, -3px); }


/* --- 10 · Der Beleg -------------------------------------------------------
   Das Herzstueck. Jede Zahl auf dieser Seite hat eine Quelle. Antippen
   klappt den Messbefehl auf.
   ------------------------------------------------------------------------ */

.beleg {
  position: relative;
  display: inline;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}

.beleg-wert {
  position: relative;
  display: inline-block;
  border-bottom: 1.5px dashed color-mix(in srgb, var(--fokus) 55%, transparent);
  transition: color .25s, border-color .25s;
}

.beleg:hover .beleg-wert,
.beleg[aria-expanded="true"] .beleg-wert {
  color: var(--fokus);
  border-bottom-color: var(--fokus);
}

/* Die aufklappbare Quelle */
/* GEMESSEN: Als reines Grid ist dieser Kasten Block-Level und reisst den
   Fliesstext um, auch wenn er zugeklappt null Punkte hoch ist. Bei 1280
   Punkten blieben 917 Punkte der Zeile ungenutzt. Zugeklappt verhaelt er
   sich deshalb wie ein Zeichen im Text, erst beim Aufklappen wird er zum
   eigenen Block. */
.beleg-quelle {
  display: inline grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--stufe-kurve), opacity .3s, margin .5s var(--stufe-kurve);
  opacity: 0;
  margin-top: 0;
}

.beleg-quelle.offen {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 12px;
}

/* Im Markup stehen hier <span>, weil die Belege in Fließtext-Absätzen
   liegen. Der Selektor muss deshalb auf jedes Kind passen, nicht auf div.
   Und display:block ist Pflicht: an einem inline-Element wirkt weder
   overflow noch max-width, die Karte sprengte sonst das Layout. */
.beleg-quelle > * { overflow: hidden; display: block; }

.quelle-karte {
  display: block;
  max-width: 100%;
  font-family: var(--mono);
  font-size: .77rem;
  line-height: 1.65;
  background: var(--grund-tief);
  border: 1px solid var(--haarlinie-fein);
  border-left: 2px solid var(--fokus);
  border-radius: var(--r-klein);
  padding: 11px 14px;
  color: var(--tinte-leise);
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

/* Der Befehl selbst darf nicht umbrechen, sonst stimmt er nicht mehr.
   Er scrollt innerhalb seiner Karte. */
.quelle-karte .befehl { display: inline-block; }

.quelle-karte .befehl { color: var(--tinte); }
.quelle-karte .kommentar { color: var(--grau-leise); }

/* Solange der Befehl getippt wird, blinkt dahinter ein Eingabezeichen. */
.quelle-karte .befehl.tippt::after {
  content: "";
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: .08em;
  background: var(--fokus);
  vertical-align: text-bottom;
  animation: blinken .68s steps(1) infinite;
}

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


/* --- 11 · Die Messtafel --------------------------------------------------- */

.messtafel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--haarlinie-fein);
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-gross);
  overflow: hidden;
}

@media (min-width: 560px) {
  .messtafel { grid-template-columns: repeat(auto-fit, minmax(228px, minmax(0, 1fr))); }
}

.messfeld {
  background: var(--karte);
  padding: 26px 24px 22px;
  position: relative;
  transition: background .3s;
}

.messfeld:hover { background: var(--karte-hoch); }

.messfeld-wert {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 4.4vw, 2.9rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
  display: block;
}

/* Die Ziffern schieben sich einzeln herein. Der angezeigte Wert ist dabei
   immer der richtige, es zählt nichts hoch. Begründung siehe motor.js. */
.ziffer-huelle {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.js .ziffer {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform .78s var(--stufe-kurve), opacity .5s var(--stufe-kurve);
}

.js [data-zaehl].da .ziffer {
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js .ziffer { transform: none; opacity: 1; }
}

.messfeld-einheit {
  font-size: .48em;
  font-weight: 500;
  color: var(--tinte-leise);
  margin-left: .18em;
  letter-spacing: 0;
}

.messfeld-name {
  margin-top: 9px;
  font-size: .93rem;
  color: var(--tinte);
  font-weight: 500;
}

.messfeld-bei {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--tinte-leise);
  letter-spacing: -.01em;
}


/* --- 12 · Die vier Bereiche ---------------------------------------------- */

/* Zweispaltiger Block. Die Untergrenze ist ausdrücklich 0 und nicht der
   Inhalt: sonst bläht ein langes Wort die Spalte über die Seitenbreite
   hinaus auf, und der Text steht auf dem Telefon seitlich über. Genau
   das ist hier passiert und war ohne Messung nicht zu sehen, weil
   overflow-x am Rumpf es verdeckt hat. */
.zweispalt {
  display: grid;
  gap: clamp(30px, 5vw, 60px);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 780px) {
  .zweispalt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

@media (min-width: 620px) {
  .bereiche { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), minmax(0, 1fr))); }
}

/* Bei genau vier Karten würde die vierte allein in einer Zeile stehen.
   Zwei mal zwei ist ausgewogen und gibt jeder Karte mehr Raum. */
@media (min-width: 880px) {
  .bereiche-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bereich {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  background: var(--karte);
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-gross);
  overflow: hidden;
  isolation: isolate;
  transition: transform .55s var(--stufe-kurve), border-color .4s, box-shadow .55s var(--stufe-kurve);
  transform-style: preserve-3d;
}

.bereich::before {
  /* Lichtschein, der der Maus folgt */
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: radial-gradient(
    340px circle at var(--maus-x, 50%) var(--maus-y, 0%),
    var(--fokus-leise), transparent 62%);
  opacity: 0;
  transition: opacity .45s;
}

.bereich:hover {
  border-color: color-mix(in srgb, var(--fokus) 34%, var(--haarlinie));
  box-shadow: 0 22px 48px -26px color-mix(in srgb, var(--tinte) 40%, transparent);
}

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

.bereich-nr {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--tinte-leise);
  letter-spacing: .1em;
}

.bereich-name {
  margin-top: 14px;
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -.028em;
}

.bereich-satz {
  margin-top: 10px;
  color: var(--tinte-leise);
  font-size: .96rem;
  line-height: 1.5;
}

.bereich-liste {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  font-size: .89rem;
  color: var(--tinte-leise);
}

.bereich-liste li {
  display: flex;
  gap: 9px;
  align-items: baseline;
}

/* Dasselbe Stufenzeichen als Aufzählungspunkt */
.bereich-liste li::before {
  content: "";
  flex: none;
  width: 12px; height: 6px;
  color: var(--fokus);
  transform: translateY(-3px);
  background:
    linear-gradient(currentColor, currentColor) 0    100% / 50%   1.3px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0    / 50%   1.3px no-repeat,
    linear-gradient(currentColor, currentColor) 50%  0    / 1.3px 100%  no-repeat;
}

.bereich-fuss {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--fokus);
}

.bereich-fuss .pfeil {
  width: 14px; height: 14px;
  transition: transform .34s var(--stufe-kurve);
}

.bereich:hover .bereich-fuss .pfeil { transform: translate(3px, -3px); }

/* Der ganze Kasten ist anklickbar, ohne verschachtelte Links */
.bereich-deckel::after {
  content: "";
  position: absolute;
  inset: 0;
}


/* --- 13 · Kennwerte in Textform ------------------------------------------ */

.kennliste {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.kennzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--haarlinie-fein);
}

.kennzeile:first-child { border-top: 1px solid var(--haarlinie-fein); }

.kennzeile dt { color: var(--tinte-leise); font-size: .95rem; margin: 0; }

.kennzeile dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
  letter-spacing: -.02em;
}


/* --- 14 · Ablauf in Schritten -------------------------------------------- */

.ablauf {
  counter-reset: schritt;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  position: relative;
}

.schritt {
  position: relative;
  padding: 26px 0 26px 62px;
  border-bottom: 1px solid var(--haarlinie-fein);
}

.schritt:first-child { border-top: 1px solid var(--haarlinie-fein); }

.schritt::before {
  counter-increment: schritt;
  content: counter(schritt, decimal-leading-zero);
  position: absolute;
  left: 0; top: 26px;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  color: var(--fokus);
  letter-spacing: .06em;
}

/* Die senkrechte Linie, die die Schritte verbindet */
.schritt::after {
  content: "";
  position: absolute;
  left: 12px; top: 46px; bottom: -1px;
  width: 1px;
  background: var(--haarlinie-fein);
}

.schritt:last-child::after { display: none; }

.schritt h3 { font-size: 1.14rem; font-weight: 600; letter-spacing: -.022em; }
.schritt p  { margin-top: 7px; color: var(--tinte-leise); font-size: .96rem; }


/* --- 15 · Abgrenzung: was nicht gemacht wird ----------------------------- */

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

@media (min-width: 640px) {
  .grenze { grid-template-columns: repeat(auto-fit, minmax(258px, minmax(0, 1fr))); }
}

.grenzfeld {
  padding: 20px 22px;
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-innen);
  background: var(--karte);
}

.grenzfeld h4 {
  font-size: .99rem;
  display: flex;
  align-items: center;
  gap: 9px;
}

.grenzfeld h4::before {
  content: "";
  width: 13px; height: 13px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--verlust);
  background:
    linear-gradient(currentColor, currentColor) 50% 50% / 6px 1.5px no-repeat;
  color: var(--verlust);
}

.grenzfeld p { margin-top: 8px; color: var(--tinte-leise); font-size: .9rem; }


/* --- 16 · Zitat und Betonung --------------------------------------------- */

.merksatz {
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.032em;
  line-height: 1.16;
  text-wrap: balance;
}

.merksatz em {
  font-style: normal;
  color: var(--fokus);
}


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

.fuss {
  border-top: 1px solid var(--haarlinie-fein);
  padding-block: 64px 40px;
  margin-top: 60px;
}

.fuss-raster {
  display: grid;
  gap: 42px;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(140px, 1fr));
  align-items: start;
}

.fuss-spalte h5 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  font-weight: 500;
}

.fuss-spalte ul { margin: 0; padding: 0; list-style: none; display: grid;
  grid-template-columns: minmax(0, 1fr); gap: 9px; }
.fuss-spalte a { color: var(--tinte-leise); font-size: .92rem; transition: color .25s; }
.fuss-spalte a:hover { color: var(--tinte); }

.fuss-unten {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--haarlinie-fein);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--tinte-leise);
}

.fuss-unten .mono { font-family: var(--mono); letter-spacing: -.01em; }


/* --- 18 · Hinweisband ----------------------------------------------------- */

.hinweisband {
  background: color-mix(in srgb, var(--achtung) 12%, var(--grund));
  border-bottom: 1px solid color-mix(in srgb, var(--achtung) 30%, transparent);
  color: var(--tinte);
  font-size: .82rem;
  padding: 9px 0;
  text-align: center;
  position: relative;
  z-index: 95;
}

.hinweisband strong { font-weight: 600; }
.hinweisband .mono { font-family: var(--mono); font-size: .95em; }


/* --- 19 · Bildmarke ------------------------------------------------------- */

.bildmarke {
  color: currentColor;
  flex: none;
}

.bildmarke path {
  fill: none;
  stroke: currentColor;
  stroke-width: 7.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* --- 20 · Schmale Bildschirme -------------------------------------------- */

@media (max-width: 900px) {
  :root {
    --breite-text: min(680px, 100% - 36px);
    --breite-voll: min(1180px, 100% - 36px);
    --breite-weit: min(1400px, 100% - 36px);
  }

  .kopf-nav {
    position: fixed;
    inset: 0 0 auto 0;
    top: 0;
    padding: 74px 22px 26px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: color-mix(in srgb, var(--grund) 96%, transparent);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--haarlinie-fein);
    transform: translateY(-102%);
    transition: transform .48s var(--stufe-kurve);
    z-index: -1;
    margin-left: 0;
  }

  .kopf-nav.offen { transform: none; }

  .nav-punkt {
    padding: 13px 12px;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--haarlinie-fein);
    border-radius: 0;
  }

  .nav-punkt[aria-current="page"]::after { display: none; }

  .menue-knopf { display: grid; order: 3; }
  .themenschalter { margin-left: auto; order: 2; }
  .marke-link { order: 1; }

  .fuss-raster { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
  .buehne-inhalt { padding-block: 128px 96px; }
  .schritt { padding-left: 46px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .messfeld { padding: 20px 18px 18px; }
  .bereich  { padding: 24px 22px 22px; }
}


/* --- 21 · Bewegung aus ---------------------------------------------------
   Pflicht. Wer Bewegung abgeschaltet hat, bekommt dieselbe Seite ohne
   Bewegung, nicht eine kaputte.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-auftritt] { opacity: 1; transform: none; filter: none; }
  .js .zeile { transform: none; }
  .js .stufenlinie path { stroke-dashoffset: 0; }
  .stufenlinie path { stroke-dashoffset: 0; }
  .scroll-wink { display: none; }
}


/* --- 22 · Druck ----------------------------------------------------------- */

@media print {
  .kopf, .scroll-wink, .buehne-leinwand, .themenschalter, .menue-knopf { display: none !important; }
  body { background: #fff; color: #000; }
  .js [data-auftritt] { opacity: 1; transform: none; filter: none; }
  .buehne { min-height: auto; }
}


/* ==========================================================================
   23 · Neue Bausteine aus dem Textkonzept vom 02.08.2026
   ========================================================================== */

/* --- Die zweite Zeile der Buehne ----------------------------------------
   Traegt den eigentlichen Satz. Deshalb groesser und in voller Tinte,
   nicht im Grauton der uebrigen Fuehrungstexte.
   ------------------------------------------------------------------------ */

.buehne-zweitzeile {
  margin-top: 26px;
  max-width: 22ch;
  font-size: clamp(1.28rem, 2.7vw, 2rem);
  line-height: 1.28;
  letter-spacing: -.022em;
  color: var(--tinte);
  font-weight: 400;
}


/* --- Die Weiche ---------------------------------------------------------
   Zwei Wege statt eines Menues: der Betrieb und der mit der Idee.
   ------------------------------------------------------------------------ */

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

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

.weichenfeld {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 26px;
  background: var(--karte);
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-gross);
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--stufe-kurve), border-color .4s,
              box-shadow .5s var(--stufe-kurve);
}

.weichenfeld::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: radial-gradient(420px circle at 50% 0%, var(--fokus-leise), transparent 65%);
  opacity: 0;
  transition: opacity .45s;
}

.weichenfeld:hover {
  border-color: color-mix(in srgb, var(--fokus) 40%, var(--haarlinie));
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--tinte) 45%, transparent);
}

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

.weichenfeld-nr {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--tinte-leise);
}

.weichenfeld-titel {
  margin-top: 16px;
  font-size: clamp(1.32rem, 2.5vw, 1.72rem);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.14;
}

.weichenfeld-satz {
  margin-top: 12px;
  color: var(--tinte-leise);
  font-size: .97rem;
  line-height: 1.5;
}

.weichenfeld-fuss {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--fokus);
}

.weichenfeld-fuss .pfeil {
  width: 14px; height: 14px;
  transition: transform .34s var(--stufe-kurve);
}

.weichenfeld:hover .weichenfeld-fuss .pfeil { transform: translate(3px, -3px); }


/* --- Der Rechner --------------------------------------------------------
   Zugleich Arbeitsprobe. Ohne JavaScript stehen die Beispielwerte fertig
   ausgerechnet da, statt eines leeren Kastens.
   ------------------------------------------------------------------------ */

.rechner {
  display: grid;
  gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  background: var(--haarlinie-fein);
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-gross);
  overflow: hidden;
}

@media (min-width: 820px) {
  .rechner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.rechner-regler {
  background: var(--karte);
  padding: clamp(26px, 3.5vw, 38px);
  display: grid;
  gap: 26px;
  align-content: start;
}

.regler-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: .95rem;
  color: var(--tinte-leise);
  margin-bottom: 10px;
  cursor: pointer;
}

.regler-kopf output {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--tinte);
  letter-spacing: -.02em;
}

/* Der Schieberegler. Bewusst gross genug fuer einen Daumen. */
.regler input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  cursor: pointer;
  display: block;
}

.regler input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: var(--haarlinie);
}

.regler input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: var(--haarlinie);
}

.regler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10.5px;
  border-radius: 50%;
  background: var(--tinte);
  border: 0;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--tinte) 60%, transparent);
  transition: transform .2s var(--schnell);
}

.regler input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tinte);
  border: 0;
}

.regler input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }

.regler input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
}

.rechner-ergebnis {
  background: var(--karte-hoch);
  padding: clamp(26px, 3.5vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  justify-content: center;
}

.rechner-summe {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.5rem, 6vw, 3.9rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--tinte);
  display: block;
}

.rechner-satz {
  color: var(--tinte-leise);
  font-size: .96rem;
  line-height: 1.55;
  max-width: 38ch;
}


/* --- Die Gegenliste -----------------------------------------------------
   Behauptung links, Wirklichkeit rechts. Traegt den Abschnitt "Was Ihnen
   gerade verkauft wird" und die vier Zusagen beim Werbespruch.
   ------------------------------------------------------------------------ */

.gegenliste {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.gegenzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 28px;
  padding: 20px 0;
  border-bottom: 1px solid var(--haarlinie-fein);
}

.gegenzeile:first-child { border-top: 1px solid var(--haarlinie-fein); }

@media (min-width: 720px) {
  .gegenzeile { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}

.gegenzeile dt {
  margin: 0;
  color: var(--tinte);
  font-weight: 500;
  font-size: 1rem;
}

.gegenzeile dd {
  margin: 0;
  color: var(--tinte-leise);
  font-size: .96rem;
  line-height: 1.55;
}


/* --- Die Spruchtafel ----------------------------------------------------- */

.spruchtafel {
  background: var(--karte);
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-gross);
  padding: clamp(30px, 4.5vw, 56px);
}

.spruch {
  letter-spacing: -.04em;
  line-height: 1.02;
}


/* --- Groessere Bereichsueberschrift auf der Startseite -------------------- */

.bereich-gross {
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.1;
  margin-top: 16px;
}


/* --- Die Beispielliste auf den Leistungsseiten ---------------------------- */

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

@media (min-width: 780px) {
  .beispielgruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.beispielgruppe h3 {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  font-weight: 500;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--haarlinie-fein);
}

.beispielgruppe ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}

.beispielgruppe li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--tinte);
  font-size: .97rem;
  line-height: 1.45;
}

.beispielgruppe li::before {
  content: "";
  flex: none;
  width: 11px; height: 6px;
  color: var(--fokus);
  transform: translateY(-3px);
  background:
    linear-gradient(currentColor, currentColor) 0    100% / 50%   1.3px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0    / 50%   1.3px no-repeat,
    linear-gradient(currentColor, currentColor) 50%  0    / 1.3px 100%  no-repeat;
}



/* ==========================================================================
   24 · v2 · Auftakt, Enthuellung, Nachlauf
   ========================================================================== */

/* --- Der Auftakt ---------------------------------------------------------
   Kurzer Vorhang beim ersten Besuch. Kein Ladebalken: die Seite ist sofort
   da, hier wird nichts vorgetaeuscht. Er hebt sich wie eine Stufe.
   ------------------------------------------------------------------------ */

.auftakt {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--grund);
  display: grid;
  place-items: center;
  color: var(--marke);
  cursor: pointer;
  transition: transform .78s cubic-bezier(.7, 0, .2, 1);
}

.auftakt.hoch { transform: translateY(-100%); }

.auftakt-marke {
  width: clamp(56px, 8vw, 84px);
  height: auto;
}

@keyframes marke-zeichnen {
  to { stroke-dashoffset: 0; }
}

/* Solange der Vorhang liegt, wird darunter nicht gescrollt */
.auftakt-laeuft body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .auftakt { display: none; }
}


/* --- Enthuellung beim Scrollen -------------------------------------------
   Die Merksaetze hellen sich Wort fuer Wort auf. Die Grundhelligkeit liegt
   bei 22 Prozent und nicht bei null: Ein Satz, der voellig unsichtbar
   beginnt, ist ohne Scrollen nicht lesbar. Das waere schlechter Text, kein
   guter Effekt.
   ------------------------------------------------------------------------ */

.merksatz .wort {
  display: inline-block;
  transition: opacity .22s linear;
  will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
  .merksatz .wort { opacity: 1 !important; }
}


/* --- Nachlauf beim Scrollen ----------------------------------------------
   Der Motor verschiebt hier die Layout-Kaesten leicht. Die Angabe hilft
   dem Browser, das auf der Grafikkarte zu halten.
   ------------------------------------------------------------------------ */

/* will-change nur dort, wo der Nachlauf wirklich laeuft. Dauerhaft auf
   allen Kaesten gesetzt kostet es Speicher und erzeugt nebenbei eine
   eigene Zeichenebene, deren Rundung die Dokumentbreite um zwei Punkte
   aufblaeht. Der Motor setzt die Klasse, wenn er den Nachlauf einschaltet. */
@media (min-width: 780px) {
  .nachlauf .abschnitt > .rumpf,
  .nachlauf .abschnitt > .rumpf-text,
  .nachlauf .abschnitt > .rumpf-weit { will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  .abschnitt > .rumpf,
  .abschnitt > .rumpf-text,
  .abschnitt > .rumpf-weit { will-change: auto; transform: none !important; }
}


/* --- Hinweiskarte --------------------------------------------------------
   Ein Weg aus der Seite heraus, ohne die Gestaltung zu unterbrechen.
   ------------------------------------------------------------------------ */

.hinweiskarte {
  padding: 26px 28px;
  border-radius: var(--r-gross);
  border: 1px solid var(--haarlinie-fein);
  background: var(--karte);
  max-width: 68ch;
}


/* ==========================================================================
   25 · v2 · Bewegung ueberall
   Jede einzelne Regung bleibt dezent. Viele dezente Bewegungen wirken
   reich, wenige kraeftige wirken billig.
   ========================================================================== */

/* --- Listen laufen ein ---------------------------------------------------
   Betrifft die grossen Beispiellisten, die Aufzaehlungen im Lieferumfang
   und die Punkte auf den Karten. Reines CSS, kostet keine Rechenzeit.
   ------------------------------------------------------------------------ */

.js .beispielgruppe li,
.js .bereich-liste li,
.js .fuss-spalte li {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity .5s var(--stufe-kurve), transform .5s var(--stufe-kurve);
}

.js .beispielgruppe.da li,
.js .da .bereich-liste li,
.js .bereich-liste.da li,
.js .fuss.da li,
.js .bereich:hover .bereich-liste li {
  opacity: 1;
  transform: none;
}

/* Gestaffelt, damit sie nacheinander kommen statt als Block */
.js .beispielgruppe li:nth-child(1),  .js .bereich-liste li:nth-child(1)  { transition-delay:  30ms; }
.js .beispielgruppe li:nth-child(2),  .js .bereich-liste li:nth-child(2)  { transition-delay:  75ms; }
.js .beispielgruppe li:nth-child(3),  .js .bereich-liste li:nth-child(3)  { transition-delay: 120ms; }
.js .beispielgruppe li:nth-child(4),  .js .bereich-liste li:nth-child(4)  { transition-delay: 165ms; }
.js .beispielgruppe li:nth-child(5),  .js .bereich-liste li:nth-child(5)  { transition-delay: 210ms; }
.js .beispielgruppe li:nth-child(6),  .js .bereich-liste li:nth-child(6)  { transition-delay: 255ms; }
.js .beispielgruppe li:nth-child(7)  { transition-delay: 300ms; }
.js .beispielgruppe li:nth-child(n+8) { transition-delay: 345ms; }


/* --- Karten kippen leicht ------------------------------------------------
   Der Zeiger neigt die Karte ein wenig. Sehr flach dosiert: Es soll wie
   ein Blatt Papier wirken, das man anhebt, nicht wie ein Karussell.
   ------------------------------------------------------------------------ */

.bereiche, .weiche { perspective: 1400px; }

.js .bereich.kippbar,
.js .weichenfeld.kippbar {
  transform: rotateX(var(--kipp-x, 0deg)) rotateY(var(--kipp-y, 0deg))
             translate3d(0, var(--heb, 0px), 0);
  transition: transform .5s var(--stufe-kurve);
}

.js .bereich.kippbar.folgt,
.js .weichenfeld.kippbar.folgt {
  /* Waehrend der Zeiger darauf liegt, folgt sie schnell */
  transition: transform .16s var(--schnell);
}


/* --- Die Navigation ------------------------------------------------------
   Der Strich waechst aus der Mitte, statt einfach da zu sein.
   ------------------------------------------------------------------------ */

.nav-punkt::before {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 1px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .32s var(--stufe-kurve);
  opacity: .5;
}

.nav-punkt:hover::before { transform: scaleX(1); }
.nav-punkt[aria-current="page"]::before { display: none; }


/* --- Die Bildmarke in der Kopfzeile --------------------------------------
   Beim Zeigen springt die Stufe kurz eine Stufe hoeher. Das Markenmotiv
   als kleine Geste.
   ------------------------------------------------------------------------ */

.marke-link .bildmarke path { transition: transform .42s var(--stufe-kurve); }
.marke-link:hover .bildmarke path:last-child { transform: translateY(-3px); }


/* --- Knoepfe bekommen einen Schimmer -------------------------------------- */

.knopf-voll::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%,
              color-mix(in srgb, var(--grund) 22%, transparent) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .7s var(--stufe-kurve);
}

.knopf-voll:hover::before { transform: translateX(100%); }


/* --- Die Stufenlinie zeichnet sich beim Scrollen -------------------------- */

.stufenlinie { transition: color .5s; }
.stufenlinie.sichtbar { color: color-mix(in srgb, var(--fokus) 28%, var(--haarlinie)); }


@media (prefers-reduced-motion: reduce) {
  .js .beispielgruppe li,
  .js .bereich-liste li,
  .js .fuss-spalte li { opacity: 1; transform: none; }
  .js .bereich.kippbar,
  .js .weichenfeld.kippbar { transform: none; }
  .nav-punkt::before { display: none; }
  .knopf-voll::before { display: none; }
}


/* ==========================================================================
   26 · v3 · Uebergang, Begleiter, Zeichen
   ========================================================================== */

/* --- Der Seitenuebergang -------------------------------------------------
   Zwei Haelften mit Versatz: der Vorhang faehrt als STUFE herein, nicht
   als gerade Kante. Das Markenmotiv im Moment des Wechsels.
   ------------------------------------------------------------------------ */

.uebergang {
  position: fixed;
  inset: 0;
  z-index: 190;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.uebergang span {
  display: block;
  background: var(--grund);
  transform: translateY(-101%);
  transition: transform .46s cubic-bezier(.7, 0, .25, 1);
}

/* Der Versatz macht die Stufe */
.uebergang span:nth-child(2) { transition-delay: .07s; }

.uebergang.zu span { transform: translateY(0); }

/* Beim Ankommen liegt er und faehrt nach unten weg */
.uebergang.ankommen span {
  transform: translateY(0);
  animation: vorhang-heben .62s cubic-bezier(.7, 0, .25, 1) forwards;
}
.uebergang.ankommen span:nth-child(2) { animation-delay: .08s; }

@keyframes vorhang-heben {
  to { transform: translateY(101%); }
}


/* --- Der Zeigerbegleiter -------------------------------------------------
   Der echte Mauszeiger bleibt sichtbar. Ihn zu verstecken ist auf
   Award-Seiten ueblich und erschwert vielen die Bedienung.
   ------------------------------------------------------------------------ */

.begleiter {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  border: 1.5px solid var(--fokus);
  border-radius: 50%;
  pointer-events: none;
  z-index: 150;
  opacity: 0;
  transition: opacity .3s, width .3s var(--stufe-kurve),
              height .3s var(--stufe-kurve), background .3s, border-color .3s;
  will-change: transform;
}

.begleiter.da { opacity: .75; }

.begleiter.gross {
  width: 52px; height: 52px;
  background: var(--fokus-leise);
  border-color: color-mix(in srgb, var(--fokus) 70%, transparent);
}

.begleiter.druck {
  width: 18px; height: 18px;
  background: var(--fokus);
  border-color: var(--fokus);
}

@media (prefers-reduced-motion: reduce) {
  .begleiter, .uebergang { display: none; }
}


/* Die zeichenweise Ueberschrift wurde am 02.08.2026 zurueckgebaut,
   siehe Begruendung in motor.js. Der Wortblock bleibt, er haelt
   Woerter beim Umbruch zusammen. */
.wortblock { display: inline-block; white-space: nowrap; }


/* --- Die Gegenfall-Karte -------------------------------------------------
   Hebt sich ab, ohne eine Zustandsfarbe zu benutzen. Das CI sagt: Farbe
   gehoert den Zahlen, nie einer Flaeche oder einem Rahmen. Also arbeitet
   diese Karte mit einem kraeftigeren Strich statt mit Rot.
   ------------------------------------------------------------------------ */

.bereich.gegenfall {
  border-color: var(--haarlinie);
  border-left-width: 3px;
}

.bereich.gegenfall .bereich-nr { color: var(--tinte); font-weight: 500; }


/* ==========================================================================
   27 · Vier Befunde aus der Endabnahme (02.08.2026)
   ========================================================================== */

/* --- Sprungziele unter der Kopfzeile -------------------------------------
   GEMESSEN: Der Knopf "Die drei Fälle" sprang so, dass das Etikett komplett
   hinter der festen Kopfleiste verschwand und die Überschrift 10 Punkte
   angeschnitten war. Die Kopfleiste ist 55 Punkte hoch, also braucht jedes
   Sprungziel diesen Abstand plus Luft.
   ------------------------------------------------------------------------ */

[id] { scroll-margin-top: 84px; }

@media (max-width: 900px) {
  [id] { scroll-margin-top: 76px; }
}


/* --- Bedienbar mit dem Daumen --------------------------------------------
   GEMESSEN: Themenschalter und Menüknopf waren 34 × 34 Punkte und sitzen
   direkt nebeneinander. Empfohlen sind 44. Die sichtbare Rundung bleibt
   klein, die Trefferfläche wächst unsichtbar darüber hinaus.
   ------------------------------------------------------------------------ */

.themenschalter, .menue-knopf { position: relative; }

.themenschalter::after, .menue-knopf::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: var(--r-rund);
}


/* --- Das geschlossene Menü ist auch für die Tastatur zu --------------------
   GEMESSEN: Die zugeschobene Menütafel war weiterhin ansteuerbar. Wer mit
   der Tastatur bedient, tippte acht Mal ins Leere, bevor der sichtbare
   Menüknopf drankam. Sichtbar zu sein und erreichbar zu sein muss
   zusammenfallen.
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .kopf-nav:not(.offen) {
    visibility: hidden;
    pointer-events: none;
  }

  .kopf-nav.offen { visibility: visible; pointer-events: auto; }
}



/* --- Keine Bewegung hinter dem offenen Menue ------------------------------
   GEMESSEN: Bei offenem Menue lief die Seite darunter beim Wischen weiter
   (scrollY von 0 auf 900). Die Menueflaeche ist 533 Punkte hoch bei 844
   Punkten Sichtfeld, das untere Drittel blieb lebende Seite.
   ------------------------------------------------------------------------ */

.menue-offen body { overflow: hidden; }

/* ==========================================================================
   DIE MOMENTE · je Bereichsseite einer, den es nur dort gibt
   Angelegt 04.08.2026. Vorher benutzte jede der zwoelf Seiten exakt dieselben
   fuenf Effekte. Ein Effekt, der ueberall gleich gut passt, gehoert nirgends.

   Grundsatz fuer alle vier: Das Markup zeigt bereits den ENDZUSTAND. Diese
   Regeln machen daraus eine Vorfuehrung. Wer „Bewegung reduzieren" gesetzt hat
   oder kein JavaScript nutzt, sieht Inhalt statt Geruest.
   ========================================================================== */

/* ── 1 · Automatisierung: „Der Montag" ──────────────────────────────────── */

.montag {
  margin-top: 36px; padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--haarlinie-fein); border-radius: var(--r-gross);
  background: var(--karte);
}
.montag-kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.montag-stand { margin: 0; color: var(--tinte-leise); font-size: .92rem;
  font-variant-numeric: tabular-nums; }

.montag-liste { list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px; }

.montag-zeile {
  display: grid; grid-template-columns: 22px 1fr auto;
  align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--r-klein);
  transition: background .3s ease, opacity .3s ease;
}
.montag-haken {
  width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid var(--haarlinie); position: relative;
  transition: border-color .25s ease, background .25s ease;
}
.montag-was { color: var(--tinte); }
.montag-zeit {
  color: var(--tinte-leise); font-size: .82rem; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .3s ease;
}

/* erledigt: Haken faellt, Zeitstempel erscheint, die Zeile tritt zurueck */
.montag-zeile.fertig { background: var(--grund-tief); }
.montag-zeile.fertig .montag-haken { border-color: var(--gewinn); background: var(--gewinn); }
.montag-zeile.fertig .montag-haken::after {
  content: ""; position: absolute; inset: 0;
  background: var(--karte);
  clip-path: polygon(19% 47%, 8% 58%, 39% 88%, 92% 30%, 81% 20%, 39% 66%);
}
.montag-zeile.fertig .montag-was { color: var(--tinte-leise); }
.montag-zeile.fertig .montag-zeit { opacity: 1; }

.montag-fuss { margin: 22px 0 0; color: var(--tinte-leise); max-width: 54ch; }

/* ── 2 · Software: „Aus der Tabelle wird ein Programm" ───────────────────── */

.verwandlung {
  margin-top: 36px; display: grid; gap: clamp(18px, 3vw, 30px);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .verwandlung { grid-template-columns: 1fr 1fr; align-items: start; } }

.verwandlung-blatt, .verwandlung-maske {
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid var(--haarlinie-fein); border-radius: var(--r-gross);
  background: var(--karte);
}
.v-tabelle { width: 100%; border-collapse: collapse; font-size: .84rem; }
.v-zelle {
  padding: 8px 9px; border: 1px solid var(--haarlinie-fein);
  color: var(--tinte-leise); white-space: nowrap;
  transition: transform .5s cubic-bezier(.7,0,.25,1), opacity .5s ease, color .4s ease;
}
.v-kopf { color: var(--tinte); font-weight: 600; }

/* Waehrend die Maske erscheint, tritt das Blatt zurueck und verschiebt sich
   leicht – als ob die Angaben hinuebergezogen werden. */
.verwandlung.zieht .v-zelle { opacity: .32; transform: translateX(-6px); }

.v-feld, .v-ergebnis {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 12px 2px; border-bottom: 1px solid var(--haarlinie-fein);
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.7,0,.25,1);
}
.v-feld span, .v-ergebnis span { color: var(--tinte-leise); font-size: .88rem; }
.v-feld b { color: var(--tinte); font-size: 1.02rem; }
.v-ergebnis { border-bottom: none; border-top: 1px solid var(--haarlinie); margin-top: 6px; }
.v-ergebnis b { color: var(--tinte); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.verwandlung.zieht .v-feld,
.verwandlung.zieht .v-ergebnis { opacity: 1; transform: none; }
.verwandlung.zieht .v-feld:nth-of-type(2) { transition-delay: .09s; }
.verwandlung.zieht .v-feld:nth-of-type(3) { transition-delay: .18s; }
.verwandlung.zieht .v-ergebnis          { transition-delay: .30s; }

.v-hinweis { margin: 16px 0 0; color: var(--tinte-leise); font-size: .9rem; }

/* ── 3 · Websites: „Gefunden werden" ─────────────────────────────────────── */

.gefunden { margin-top: 36px; }

.gefunden-suche {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: var(--r-rund);
  border: 1px solid var(--haarlinie); background: var(--karte);
  max-width: 30rem;
}
.gefunden-lupe { display: inline-flex; color: var(--tinte-leise); }
.gefunden-lupe svg { width: 19px; height: 19px; }
.gefunden-eingabe { color: var(--tinte); font-size: 1.02rem; white-space: nowrap; }
.gefunden-strich {
  width: 1.5px; height: 1.1em; background: var(--fokus); opacity: 0;
}
.gefunden.tippt .gefunden-strich { opacity: 1; animation: gefunden-blinken 1s steps(2) infinite; }
@keyframes gefunden-blinken { 50% { opacity: 0; } }

.gefunden-unten {
  margin-top: 26px; display: grid; gap: clamp(18px, 3vw, 32px);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .gefunden-unten { grid-template-columns: 1.1fr 1fr; align-items: center; } }

.gefunden-karte { width: 100%; height: auto; }
.gefunden-karte .ort {
  fill: var(--haarlinie);
  transition: fill .45s ease, r .45s cubic-bezier(.7,0,.25,1);
}
.gefunden-karte .ort.an { fill: var(--fokus); r: 2.9; }

.gefunden-treffer { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px; }
.treffer {
  padding: 13px 15px; border-radius: var(--r-innen);
  border: 1px solid var(--haarlinie-fein); background: var(--karte);
  opacity: 0; transform: translateY(9px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.7,0,.25,1);
}
.treffer.da { opacity: 1; transform: none; }
.treffer b { display: block; color: var(--tinte); }
.treffer span { display: block; margin-top: 3px; color: var(--tinte-leise); font-size: .88rem; }

.gefunden-fuss { margin: 24px 0 0; color: var(--tinte-leise); max-width: 52ch; }

/* ── 4 · Apps: „Auch ohne Netz" ──────────────────────────────────────────── */

.inderhand {
  margin-top: 36px; display: grid; gap: clamp(22px, 4vw, 40px);
  grid-template-columns: 1fr; align-items: center; justify-items: center;
}
@media (min-width: 780px) { .inderhand { grid-template-columns: auto 1fr; justify-items: start; } }

.telefon {
  width: 268px; border-radius: 34px; padding: 10px;
  border: 1px solid var(--haarlinie); background: var(--karte-hoch);
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
}
.telefon-leiste {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 12px 8px; font-size: .72rem; color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}
.telefon-netz { transition: color .3s ease; }
.telefon-netz.aus { color: var(--achtung); }

.telefon-schirm {
  border-radius: 26px; padding: 16px 14px 18px;
  background: var(--grund-tief); min-height: 300px;
}
.telefon-titel { margin: 0 0 12px; font-size: .8rem; color: var(--tinte-leise);
  letter-spacing: .04em; text-transform: uppercase; }
.telefon-liste { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }

.telefon-punkt {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 10px 10px; border-radius: var(--r-klein);
  border: 1px solid transparent; background: transparent;
  color: var(--tinte); font: inherit; font-size: .88rem; text-align: left;
  cursor: pointer; transition: background .2s ease;
}
.telefon-punkt:hover { background: var(--karte); }
.telefon-punkt:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.telefon-kasten {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid var(--haarlinie); position: relative;
  transition: border-color .2s ease, background .2s ease;
}
.telefon-punkt[aria-pressed="true"] .telefon-kasten {
  border-color: var(--gewinn); background: var(--gewinn);
}
.telefon-punkt[aria-pressed="true"] .telefon-kasten::after {
  content: ""; position: absolute; inset: 0; background: var(--grund-tief);
  clip-path: polygon(19% 47%, 8% 58%, 39% 88%, 92% 30%, 81% 20%, 39% 66%);
}
.telefon-punkt[aria-pressed="true"] span:last-child { color: var(--tinte-leise); }

.telefon-stand { margin: 14px 2px 0; font-size: .76rem; color: var(--tinte-leise);
  transition: color .3s ease; }
.telefon-stand.gemerkt { color: var(--achtung); }

.inderhand-neben { max-width: 34ch; }
.inderhand-satz { margin: 16px 0 0; color: var(--tinte-leise); }

/* ── Rücksicht auf reduzierte Bewegung ───────────────────────────────────
   PFLICHT aus dem Skill „website-baustein": Endzustand sofort, nie eine leere
   Flaeche. Der Motor steigt bei istRuhig() aus, hier faellt zusaetzlich jede
   Anlaufzeit weg – sonst haengt ein Element in seinem Startzustand fest. */
@media (prefers-reduced-motion: reduce) {
  .v-feld, .v-ergebnis, .treffer { opacity: 1; transform: none; transition: none; }
  .v-zelle, .montag-zeile, .montag-zeit, .gefunden-karte .ort { transition: none; }
  .gefunden.tippt .gefunden-strich { animation: none; }
  /* Nachgetragen 04.08.2026: Der Baustein-Waechter fand, dass die Uebergaenge
     im Telefon hier fehlten. Der Moment animiert zwar nichts von selbst, aber
     die Haken und der Netz-Schalter blenden weich - auch das ist Bewegung. */
  .telefon-punkt, .telefon-kasten, .telefon-netz, .telefon-stand { transition: none; }
  /* Nachgetragen 04.08.2026 nach dem Blick ins Bild: Bei reduzierter Bewegung
     wird der Endzustand sofort gezeigt – das hiess hier, dass die Tabelle
     dauerhaft auf 32 % Deckkraft stand und kaum noch lesbar war. Wer keine
     Animation sieht, soll BEIDE Seiten lesen koennen. */
  .verwandlung.zieht .v-zelle { opacity: 1; transform: none; }
}