/* Talruna — Hausstil
   Eine Idee: die Werkstatt. Schwarzer Hallenraum, alles Sichtbare weiss oder
   Stahl, und genau eine Farbe — Signalrot, so sparsam gesetzt wie eine
   Kontrollleuchte. Wer Rot sieht, soll hinsehen. Deshalb gibt es kein
   dekoratives Rot, nur bedeutungstragendes.

   Schrift: IBM Plex, selbst gehostet (LG Muenchen I, 3 O 17493/20).
   EINE Superfamilie statt vorher vier. Plex traegt Kyrillisch von Haus aus,
   deshalb entfaellt der Notbehelf mit untergeschobenen Begleitschnitten.
   Die Mono hat eine Rolle, die nur sie erfuellt: Zahlen, Kennwerte, Fristen
   und Marken lesen sich wie von einem Messgeraet abgelesen. Genau das
   verspricht die Seite - feste Preise, feste Termine.
   Plex Sans ist variabel: eine Datei deckt 400 bis 600 ab. */

@font-face { font-family:'Plex'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('schrift/IBMPlexSans-var-lat.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Plex'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('schrift/IBMPlexSans-var-kyr.woff2') format('woff2-variations');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

@font-face { font-family:'Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('schrift/IBMPlexMono-400-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('schrift/IBMPlexMono-400-kyr.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Plex Mono'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('schrift/IBMPlexMono-500-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Plex Mono'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('schrift/IBMPlexMono-500-kyr.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* ---------------------------------------------------------------- Marken */

:root {
  /* Die drei Farben des Films, unveraendert uebernommen. */
  --schwarz:#08090A;
  --weiss:#F4F5F3;
  --signal:#FF3D1F;

  /* Abstufungen des Hallenraums. Keine Blautoene: Stahl ist neutral. */
  --grund:#08090A;
  --grund-hoch:#101113;
  --grund-tief:#050506;
  --stahl:#9DA0A3;
  --stahl-matt:#83868A;   /* 4,5:1 auch auf --grund-hoch; vorher 3,74:1 */
  --linie:#1E2023;
  --linie-hell:#2B2E32;

  /* Eine Familie traegt Text UND Ueberschriften - das Gewicht macht die
     Hierarchie, nicht ein Stilbruch. Die Mono ist das Messgeraet. */
  --text:'Plex', 'Segoe UI', system-ui, sans-serif;
  --display:'Plex', 'Segoe UI', system-ui, sans-serif;
  --mono:'Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --bahn:76rem;
  --mass:40rem;
  --rand:clamp(1.25rem, 5vw, 4rem);
  --luft:clamp(4.5rem, 11vh, 9rem);
  --ein:.5s cubic-bezier(.2,.7,.3,1);
  --aus:.18s ease;
}

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

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

body {
  margin:0;
  background:var(--grund);
  color:var(--weiss);
  font-family:var(--text);
  font-size:clamp(1rem, .95rem + .24vw, 1.1rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection { background:var(--signal); color:var(--weiss); }

/* --------------------------------------------------------------- Geruest */

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

main > section {
  position:relative;
  padding-block:var(--luft);
  border-top:1px solid var(--linie);
}
main > section:first-child { border-top:0; }

.sprung {
  position:absolute; left:.5rem; top:.5rem; z-index:100;
  clip-path:inset(50%); white-space:nowrap;
  background:var(--signal); color:var(--schwarz);
  padding:.75rem 1.25rem; font-weight:600; text-decoration:none;
}
.sprung:focus { clip-path:none; }

/* ---------------------------------------------------------------- Schrift */

h1,h2,h3 {
  font-family:var(--display);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.028em;
  margin:0;
  text-wrap:balance;
}
h1 { font-size:clamp(2.45rem, 1.4rem + 5.1vw, 5.4rem); }
h2 { font-size:clamp(1.9rem, 1.25rem + 3vw, 3.3rem); }
h3 { font-size:clamp(1.2rem, 1.08rem + .6vw, 1.5rem); letter-spacing:-.018em; }

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

/* Die kleine Zeile ueber jeder Ueberschrift. Sie ordnet ein, sie schreit nicht. */
.klein {
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--stahl-matt);
  margin:0 0 1.5rem;
  display:flex; align-items:center; gap:.75rem;
}
.klein::before {
  content:""; width:1.75rem; height:2px;
  background:var(--signal); flex:none;
}

.vorspann {
  max-width:var(--mass);
  font-size:clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  color:var(--stahl);
  margin-top:1.75rem;
  text-wrap:pretty;
}

h2 + .vorspann { margin-top:1.5rem; }

.fussnote {
  font-size:.875rem;
  line-height:1.55;
  color:var(--stahl-matt);
  max-width:var(--mass);
  margin-top:1.25rem;
}
.fussnote-warn {
  border-left:2px solid var(--signal);
  padding-left:.9rem;
}
.fussnote-warn strong { color:var(--weiss); font-weight:600; }

/* ------------------------------------------------------------------- Kopf */

.kopf {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--grund) 86%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie);
}
.kopf-inhalt {
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  min-height:4.25rem;
  max-width:100%;
}

/* Die Wortmarke: TAL | RUNA. Die rote Linie ist die Klinge aus der Schnittszene;
   sie ragt ueber die Versalien hinaus, wie im Logo. */
.wortmarke {
  display:inline-flex; align-items:center; gap:.3em;
  font-family:var(--text);
  font-size:1.25rem; font-weight:700;
  letter-spacing:-.045em; line-height:1;
  color:var(--weiss); text-decoration:none;
  flex:none;
}
.wortmarke-klinge {
  width:2px; height:1.18em; background:var(--signal);
  transition:transform var(--aus);
}
.wortmarke:hover .wortmarke-klinge { transform:scaleY(1.25); }

.kopf-nav { display:flex; gap:clamp(.9rem,2vw,1.9rem); margin-inline-start:auto; }
.kopf-nav a {
  position:relative;
  font-size:.9375rem; font-weight:500;
  color:var(--stahl); text-decoration:none;
  padding-block:.35rem;
  transition:color var(--aus);
  white-space:nowrap;
}
.kopf-nav a::after {
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--signal);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--aus);
}
.kopf-nav a:hover { color:var(--weiss); }
.kopf-nav a:hover::after { transform:scaleX(1); }

.sprachen { display:flex; gap:.125rem; flex:none; }
.sprachen a {
  font-size:.75rem; font-weight:600; letter-spacing:.08em;
  color:var(--stahl-matt); text-decoration:none;
  padding:.3rem .5rem;
  transition:color var(--aus);
}
.sprachen a:hover { color:var(--weiss); }
.sprachen a[aria-current="page"] { color:var(--weiss); box-shadow:inset 0 -1px 0 var(--signal); }

/* ---------------------------------------------------------------- Auftakt */

.auftakt {
  position:relative;
  min-height:min(100svh, 52rem);
  display:flex; align-items:flex-end;
  padding-block:calc(var(--luft) * 1.1) var(--luft);
  border-top:0;
  overflow:hidden;
}
.auftakt-bild { position:absolute; inset:0; }

.szene {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(.15) contrast(1.06);
}
.szene-voll { position:absolute; inset:0; }

/* Der Schleier macht die Schrift lesbar, ohne das Bild zu ertraenken. */
.schleier {
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--grund) 4%, color-mix(in srgb, var(--grund) 55%, transparent) 46%, color-mix(in srgb, var(--grund) 12%, transparent) 100%),
    linear-gradient(to right, color-mix(in srgb, var(--grund) 72%, transparent), transparent 62%);
}

.auftakt-inhalt { position:relative; }
.auftakt h1 { max-width:16ch; }
.auftakt .vorspann { color:color-mix(in srgb, var(--weiss) 82%, transparent); }

.knopfreihe { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.5rem; }

.knopf {
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--signal); color:var(--schwarz);
  font-family:var(--text); font-size:.9375rem; font-weight:600;
  letter-spacing:.01em;
  padding:.9rem 1.6rem;
  border:1px solid var(--signal);
  text-decoration:none;
  transition:background var(--aus), color var(--aus), transform var(--aus);
}
.knopf:hover { background:transparent; color:var(--signal); transform:translateY(-1px); }
button.knopf { cursor:pointer; line-height:1.2; }
button.knopf:disabled { opacity:.38; cursor:not-allowed; transform:none; background:var(--signal); color:var(--schwarz); }
.kasse-hinweis { color:var(--weiss); }
.knopf-leer {
  background:transparent; color:var(--weiss);
  border-color:var(--linie-hell);
}
.knopf-leer:hover { background:var(--weiss); color:var(--grund); border-color:var(--weiss); }

/* Die Laufmarke unten: ein Strich, der faellt. Kein Pfeil, kein Maeuschen. */
.weiterlauf {
  position:absolute; left:50%; bottom:1.75rem;
  translate:-50% 0;
  width:1px; height:3.5rem;
  overflow:hidden;
}
.weiterlauf-strich {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent, var(--signal));
  animation:fallen 2.4s ease-in-out infinite;
}
@keyframes fallen {
  0%   { transform:translateY(-100%); }
  60%,100% { transform:translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .weiterlauf-strich { animation:none; background:var(--linie-hell); }
}

/* --------------------------------------------------------- KI-Kennzeichnung */

.ki-marke {
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono);
  font-size:.75rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--weiss);
  background:color-mix(in srgb, var(--grund) 80%, transparent);
  border:1px solid var(--linie-hell);
  padding:.3rem .6rem;
  backdrop-filter:blur(6px);
}
.ki-marke::before {
  content:""; width:.375rem; height:.375rem; border-radius:50%;
  background:var(--signal); flex:none;
}
.ki-marke-ecke { position:absolute; right:var(--rand); top:1.5rem; z-index:2; }
.ki-marke-klein { position:absolute; left:.75rem; bottom:.75rem; z-index:2; }

/* ------------------------------------------------------------------- Film */

.buehne {
  margin:3rem 0 0;
  position:relative;
  border:1px solid var(--linie);
  background:var(--grund-tief);
}
.hauptfilm { width:100%; display:block; aspect-ratio:16/9; background:#000; }
.buehne figcaption {
  position:absolute; left:.75rem; bottom:.75rem; z-index:2;
  pointer-events:none;
}

/* -------------------------------------------------------------- Werkbaenke */

.baenke { margin-top:4rem; display:grid; gap:clamp(3rem,7vh,5.5rem); }

.bank {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
}
.bank-gedreht .bank-bild { order:2; }

.bank-bild {
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border:1px solid var(--linie);
  background:var(--grund-tief);
}
.szene-bank { transition:transform 1.2s cubic-bezier(.2,.7,.3,1); }
.bank:hover .szene-bank { transform:scale(1.035); }

.nummer {
  font-family:var(--mono);
  font-size:.875rem; font-weight:500;
  letter-spacing:.2em;
  color:var(--signal);
  margin:0 0 .9rem;
}
.bank-lauf { color:var(--stahl); margin-top:1rem; max-width:34rem; }

.haken { list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.5rem; }
.haken li {
  position:relative; padding-left:1.4rem;
  font-size:.9375rem; color:var(--stahl);
}
.haken li::before {
  content:""; position:absolute; left:0; top:.58em;
  width:.5rem; height:2px; background:var(--signal);
}

.eckdaten {
  display:flex; flex-wrap:wrap; gap:2.5rem;
  margin:1.75rem 0 0;
  padding-top:1.25rem;
  border-top:1px solid var(--linie);
}
.eckdaten dt {
  font-family:var(--mono);
  font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--stahl-matt);
  margin-bottom:.3rem;
}
.eckdaten dd { margin:0; font-size:1rem; }
.eckdaten strong {
  font-family:var(--mono); font-size:1.375rem; font-weight:500;
  letter-spacing:-.02em;
}
.eckdaten dd span { color:var(--stahl-matt); font-size:.875rem; }

/* ----------------------------------------------------------- Rechner-Pult */

.pult {
  margin-top:3rem;
  border:1px solid var(--linie);
  background:var(--grund-hoch);
  padding:clamp(1.25rem,3.5vw,2.5rem);
}

.posten-liste { display:grid; }

.posten {
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:1rem clamp(.75rem,2vw,1.75rem);
  padding-block:1rem;
  border-bottom:1px solid var(--linie);
}
.posten:first-child { padding-top:0; }

.posten-an { display:flex; align-items:center; gap:.85rem; cursor:pointer; min-width:0; }
.posten-an input {
  appearance:none; flex:none;
  width:1.125rem; height:1.125rem;
  border:1px solid var(--linie-hell);
  background:transparent;
  display:grid; place-content:center;
  cursor:pointer;
  transition:border-color var(--aus), background var(--aus);
}
.posten-an input::after {
  content:""; width:.5rem; height:.5rem; background:var(--signal);
  transform:scale(0); transition:transform var(--aus);
}
.posten-an input:checked { border-color:var(--signal); }
.posten-an input:checked::after { transform:scale(1); }
.posten-name { font-weight:500; }

.posten-menge { display:flex; align-items:center; gap:.25rem; opacity:.35; transition:opacity var(--aus); }
.posten.an .posten-menge { opacity:1; }
.stufe {
  width:1.875rem; height:1.875rem;
  display:grid; place-content:center;
  background:transparent; color:var(--weiss);
  border:1px solid var(--linie-hell);
  font-size:.9375rem; line-height:1;
  cursor:pointer;
  transition:border-color var(--aus), color var(--aus);
}
.stufe:hover:not(:disabled) { border-color:var(--signal); color:var(--signal); }
.stufe:disabled { cursor:not-allowed; opacity:.4; }
.menge {
  min-width:2ch; text-align:center;
  font-family:var(--mono); font-size:1.0625rem; font-weight:500;
  font-variant-numeric:tabular-nums;
}

.posten-preis {
  margin:0; text-align:right;
  font-variant-numeric:tabular-nums;
  color:var(--stahl-matt);
  font-size:.9375rem;
  min-width:6ch;
  transition:color var(--aus);
}
.posten.an .posten-preis { color:var(--weiss); }

.regler { margin-top:2rem; display:grid; gap:1.5rem; }
.regler-zeile {
  display:flex; align-items:baseline; gap:.75rem;
  font-size:.9375rem; font-weight:500;
}
.regler-wert {
  font-family:var(--mono); font-size:1.125rem; font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--signal);
}
.regler-zeile + input[type=range] { margin-top:-.75rem; }

input[type=range] {
  appearance:none; width:100%; height:2px;
  background:var(--linie-hell);
  cursor:pointer; margin:.5rem 0 0;
}
input[type=range]::-webkit-slider-thumb {
  appearance:none; width:1.125rem; height:1.125rem;
  background:var(--signal); border:3px solid var(--grund-hoch);
  box-shadow:0 0 0 1px var(--signal);
  cursor:pointer;
}
input[type=range]::-moz-range-thumb {
  width:1.125rem; height:1.125rem;
  background:var(--signal); border:3px solid var(--grund-hoch);
  box-shadow:0 0 0 1px var(--signal);
  cursor:pointer;
}
.stufen {
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:.75rem; color:var(--stahl-matt);
  font-variant-numeric:tabular-nums;
  margin-top:.5rem;
}

.schalter { display:flex; align-items:center; gap:.85rem; cursor:pointer; }
.schalter input { position:absolute; opacity:0; width:0; height:0; }
.schalter-bahn {
  flex:none; width:2.5rem; height:1.25rem;
  border:1px solid var(--linie-hell);
  display:flex; align-items:center;
  padding:.125rem;
  transition:border-color var(--aus), background var(--aus);
}
.schalter-knopf {
  width:.875rem; height:.875rem;
  background:var(--stahl-matt);
  transition:transform var(--ein), background var(--aus);
}
.schalter input:checked + .schalter-bahn { border-color:var(--signal); }
.schalter input:checked + .schalter-bahn .schalter-knopf {
  transform:translateX(1.125rem); background:var(--signal);
}
.schalter-text { font-size:.9375rem; font-weight:500; }
.schalter-text em {
  display:block; font-style:normal;
  font-size:.8125rem; font-weight:400; color:var(--stahl-matt);
}

.tafel {
  display:block;
  margin-top:2rem; padding-top:2rem;
  border-top:1px solid var(--linie);
}
.tafel-leer { color:var(--stahl-matt); font-size:.9375rem; margin:0; }
.tafel-zahlen { display:flex; flex-wrap:wrap; gap:clamp(2rem,6vw,5rem); }
/* display:flex ueberschreibt sonst das hidden-Attribut des Browsers. */
[hidden] { display:none !important; }
.tafel-kopf {
  font-family:var(--mono);
  font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--stahl-matt); margin:0 0 .4rem;
}
.tafel-gross {
  font-family:var(--mono);
  font-size:clamp(2rem,1.45rem + 2.3vw, 3rem);
  font-weight:500; line-height:1;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  margin:0;
}
.tafel-einheit {
  font-family:var(--text); font-size:.9375rem; font-weight:400;
  letter-spacing:0; color:var(--stahl-matt);
  margin-left:.4rem;
}
.pult .knopf { margin-top:2rem; }

/* ------------------------------------------------------- Weisses Etikett */

.warum { overflow:hidden; }
.warum-bild { position:absolute; inset:0; }
.warum-bild .schleier {
  background:linear-gradient(to bottom,
    var(--grund) 0%,
    color-mix(in srgb, var(--grund) 84%, transparent) 40%,
    var(--grund) 100%);
}
.warum .bahn { position:relative; }

.raster-vier {
  list-style:none; margin:3.5rem 0 0; padding:0;
  display:grid; gap:2.5rem;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
}
.raster-vier li { border-top:1px solid var(--linie-hell); padding-top:1.25rem; }
.raster-vier p { margin-top:.75rem; color:var(--stahl); font-size:.9375rem; }

/* ------------------------------------------------------------------ Weg */

.folge {
  list-style:none; margin:3.5rem 0 0; padding:0;
  display:grid; gap:2.5rem;
  grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr));
  counter-reset:schritt;
}
.folge li { position:relative; padding-top:2.75rem; }
.folge li::before {
  content:""; position:absolute; left:0; top:1.5rem; right:0;
  height:1px; background:var(--linie-hell);
}
.schritt-nr {
  position:absolute; left:0; top:0;
  font-family:var(--mono); font-size:.875rem; font-weight:500;
  letter-spacing:.2em; color:var(--signal);
}
.folge p { margin-top:.75rem; color:var(--stahl); font-size:.9375rem; }

/* ------------------------------------------------------------------- KI */

.ki { background:var(--grund-hoch); }
.punkte { list-style:none; margin:2.5rem 0 0; padding:0; display:grid; gap:1.1rem; max-width:52rem; }
.punkte li {
  position:relative; padding-left:1.75rem;
  color:var(--stahl); font-size:.9375rem;
}
.punkte li::before {
  content:""; position:absolute; left:0; top:.6em;
  width:.75rem; height:2px; background:var(--signal);
}

/* -------------------------------------------------------------- Kontakt */

.kontakt .knopf { margin-top:2rem; }
.mailto {
  display:block;
  font-family:var(--mono);
  font-size:clamp(1.25rem, .9rem + 1.8vw, 2.1rem);
  font-weight:500; letter-spacing:-.03em;
  color:var(--weiss); text-decoration:none;
  margin-top:2.25rem;
  border-bottom:1px solid var(--linie-hell);
  padding-bottom:.5rem;
  transition:color var(--aus), border-color var(--aus);
  overflow-wrap:anywhere;
}
.mailto:hover { color:var(--signal); border-color:var(--signal); }

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

.fuss {
  background:var(--grund-tief);
  border-top:1px solid var(--linie);
  padding-block:calc(var(--luft) * .7);
  font-size:.875rem;
}
.fuss h2 {
  font-family:var(--mono);
  font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--stahl-matt);
  margin-bottom:1.75rem;
}
.fuss dl {
  margin:0;
  display:grid;
  grid-template-columns:minmax(10rem,auto) 1fr;
  gap:.6rem 2rem;
}
.fuss dt { color:var(--stahl-matt); }
.fuss dd { margin:0; color:var(--stahl); overflow-wrap:anywhere; }
.fuss dd em { color:var(--stahl-matt); }
.fuss a { color:var(--stahl); text-decoration:underline; text-underline-offset:.2em; }
.fuss a:hover { color:var(--signal); }
.fuss-schluss {
  margin-top:2.25rem; padding-top:1.25rem;
  border-top:1px solid var(--linie);
  color:var(--stahl-matt);
}

/* ------------------------------------------------- Der Unterschied (USP) */
/* Drei Saeulen, nummeriert - hier ist die Nummer echte Information:
   sie zaehlt die Gruende, die nur zusammen den Vorsprung ergeben. */
.vorteil { background:var(--grund-hoch); }
.saeulen {
  list-style:none; margin:3.25rem 0 0; padding:0;
  display:grid; gap:2.25rem;
  grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
}
.saeulen li { border-top:2px solid var(--signal); padding-top:1.25rem; }
.saeule-nr {
  display:block; font-family:var(--mono); font-size:.8125rem; font-weight:500;
  letter-spacing:.18em; color:var(--signal); margin-bottom:.6rem;
}
.saeulen p { margin-top:.7rem; color:var(--stahl); font-size:.9375rem; }

/* --------------------------------------------- Was die Agentur behaelt */
.tabellenrolle { overflow-x:auto; margin-top:2.75rem; }
.marge { width:100%; border-collapse:collapse; font-size:.9375rem; min-width:34rem; }
.marge th, .marge td {
  text-align:left; padding:.85rem 1.25rem .85rem 0;
  border-bottom:1px solid var(--linie); vertical-align:baseline;
}
.marge thead th {
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--stahl-matt);
  white-space:nowrap; border-bottom-color:var(--linie-hell);
}
.marge tbody tr:last-child th, .marge tbody tr:last-child td { border-bottom:0; }
.marge .zahl {
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  white-space:nowrap; color:var(--stahl); text-align:right;
}
/* Die letzte Spalte ist das Argument - sie bekommt das Gewicht. */
.marge .zahl-stark { color:var(--weiss); font-weight:500; }
.marge .zahl-stark span {
  display:block; font-size:.75rem; color:var(--signal); font-weight:400;
}

@media (max-width: 46rem) {
  .marge { min-width:30rem; }
  .marge th, .marge td { padding-right:.85rem; }
}

/* ------------------------------------------------------- Aufmerksamkeit */

:where(a,button,input,summary,video):focus-visible {
  outline:2px solid var(--signal);
  outline-offset:3px;
}

/* Sanftes Aufziehen beim Scrollen. Bedeutung: etwas tritt aus dem Dunkel. */
.tritt-ein {
  opacity:0; transform:translateY(1.25rem);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.tritt-ein.da { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .tritt-ein { opacity:1; transform:none; transition:none; }
  .szene { display:none; }
  .bank-bild, .auftakt-bild, .warum-bild { background:var(--grund-tief); }
}

/* --------------------------------------------------------------- Schmal */

@media (max-width: 60rem) {
  .bank { grid-template-columns:1fr; }
  .bank-gedreht .bank-bild { order:0; }
  .bank-bild { aspect-ratio:16/9; }
}

/* Der Kopf muss frueher umbrechen als der Rest der Seite. Gemessen: bei 742 px
   Fensterbreite griff der Mobilkopf noch nicht (Haltepunkt 736 px), der
   Desktopkopf hatte aber schon keinen Platz mehr - der Sprachumschalter stand
   23 px ueber dem rechten Rand, und die bulgarische Fassung lief quer. */
@media (max-width: 54rem) {
  .kopf { position:static; }
  .kopf-inhalt { flex-wrap:wrap; padding-block:.75rem; min-height:0; }
  .kopf-nav {
    order:3; width:100%; margin-inline-start:0;
    overflow-x:auto; flex-wrap:nowrap;
    padding-bottom:.25rem;
    scrollbar-width:none;
  }
  .kopf-nav::-webkit-scrollbar { display:none; }
  .sprachen { margin-inline-start:auto; flex:none; }
  .sprachen a { padding-inline:.35rem; }
}

@media (max-width: 46rem) {
  /* Ein klebender Kopf frisst auf dem Telefon ein Fuenftel der Sicht. */
  .kopf { position:static; }
  .kopf-inhalt { flex-wrap:wrap; padding-block:.75rem; min-height:0; }
  .kopf-nav {
    order:3; width:100%; margin-inline-start:0;
    overflow-x:auto; flex-wrap:nowrap;
    padding-bottom:.25rem;
    scrollbar-width:none;
  }
  .kopf-nav::-webkit-scrollbar { display:none; }
  /* Bei etwa 730 px stand der Umschalter 23 px ueber dem rechten Rand -
     die bulgarische Fassung lief dadurch quer. */
  .sprachen { margin-inline-start:auto; flex:none; }
  .sprachen a { padding-inline:.35rem; }

  .auftakt { min-height:auto; padding-block:4.5rem 3.5rem; }
  .knopfreihe { margin-top:2rem; }
  .knopf { width:100%; justify-content:center; }
  .weiterlauf { display:none; }

  .posten {
    grid-template-columns:1fr auto;
    grid-template-areas:"name name" "menge preis";
    gap:.85rem 1rem;
  }
  .posten-an   { grid-area:name; }
  .posten-menge{ grid-area:menge; }
  .posten-preis{ grid-area:preis; align-self:center; }

  .fuss dl { grid-template-columns:1fr; gap:.15rem; }
  .fuss dt { margin-top:.85rem; }
}

/* ------------------------------------------- Was ausserhalb der Liste liegt */
/* Kein Raster aus Kacheln: eine Aufzaehlung liest sich schneller, und genau
   darum geht es - die Agentur sucht ihre Aufgabe, nicht eine Gestaltung. */
.koennen {
  list-style:none; margin:2.75rem 0 0; padding:0;
  display:grid; gap:0;
  border-top:1px solid var(--linie);
}
.koennen li {
  padding:1.1rem 0 1.1rem 2.25rem;
  border-bottom:1px solid var(--linie);
  position:relative; color:var(--stahl); font-size:.9375rem;
}
.koennen li::before {
  content:""; position:absolute; left:0; top:1.55rem;
  width:14px; height:2px; background:var(--signal);
}
.breit-fuss {
  margin-top:2rem; max-width:var(--mass);
  color:var(--weiss); font-size:1rem;
}