/* ═══════════════════════════════════════════════════════════════════
   AI-Move — eine Formatvorlage für alle Seiten.
   Zusammengeführt aus dem früher eingebetteten CSS der Startseite und
   den Bausteinen der Unterseiten.
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   AI-MOVE — Redesign Hauptseite
   Gestaltungsprinzip: Schweizer Raster, Papier & Tinte, Haarlinien.
   Kein Glas, keine Blobs, keine weichen Schatten.
   ══════════════════════════════════════════════════════════════════ */

/* ─── 1. Tokens ─────────────────────────────────────────────────── */
:root {
  /* Papier (Tag) */
  /* Papier ist der helle Pol der Palette, Tinte der dunkle. Beide sind
     Konstanten und wechseln NICHT mit dem Thema – sonst fallen sie im
     Dunkelmodus zusammen und Knöpfe wie „Jetzt berechnen" verschwinden.
     Gewechselt wird allein über die semantischen Token darunter. */
  --paper:      #FFFFFF;
  --paper-2:    #F2F7F8;
  --paper-3:    #E1EDEF;

  /* Tinte */
  --ink:        #0B1418;
  --ink-2:      #132228;
  --ink-3:      #1C3038;

  /* Marke */
  --teal:       #00B7B5;
  --teal-deep:  #00707A;
  --teal-dark:  #005461;
  /* Das Blau der Wortmarke, unverändert aus dem Original. Es ist die
     zweite Markenfarbe neben dem Türkis – ohne sie trägt das Logo nur
     einen Farbton und daneben Schwarz. Die helle Fassung ist dasselbe
     Blau für dunkle Flächen. */
  --navy:       #1C4D8D;
  --navy-hell:  #8FB8EA;
  --signal:     #DC5233;

  /* Messfläche. Der frühere Sandton gab der Seite Wärme, liess sie
     aber wie ein Magazin aussehen und hatte mit Umzug und Analyse
     nichts zu tun. An seine Stelle tritt ein Türkiston aus derselben
     Familie wie die Marke: hervorgehobene Flächen wirken jetzt wie
     ausgemessene Felder, nicht wie Papier. */
  --mess:       #D4EDED;
  --mess-weich: #E8F6F6;
  --mess-tief:  #00707A;
  --mess-linie: #00B7B5;

  /* Semantisch – wird in [data-theme="night"] umgehängt */
  --bg:         var(--paper);
  --bg-raised:  var(--paper-2);
  --text:       var(--ink);
  --text-2:     rgba(11,20,24,.68);
  --text-3:     rgba(11,20,24,.46);
  --line:       rgba(11,20,24,.18);
  --line-soft:  rgba(11,20,24,.085);
  --line-hard:  rgba(11,20,24,.40);
  --accent:     var(--teal-deep);
  --hover-wash: rgba(0,112,122,.07);

  --font-d: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-t: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-m: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad:    clamp(1.15rem, 4.2vw, 4.5rem);
  --nav-h:  66px;
  --rail-w: 128px;

  /* Startbereich: folgt dem Hell/Dunkel-Umschalter. --scrim ist der
     Grundton als RGB-Tripel, damit die Verläufe über dem Film damit
     rechnen können. */
  --scrim:           255,255,255;
  --hero-bg:         #FFFFFF;
  --hero-panel:      #F2F7F8;
  --hero-fg:         #0B1418;
  --hero-fg-2:       rgba(11,20,24,.74);
  --hero-fg-3:       rgba(11,20,24,.46);
  --hero-line:       rgba(11,20,24,.18);
  --hero-accent:     #00707A;
  --hero-accent-rgb: 0,112,122;
  --hero-accent-on:  #EFF7F8;
  --film-rahmen:     rgba(11,20,24,.42);

  --ease:   cubic-bezier(.22,.61,.36,1);
  --ease-o: cubic-bezier(.65,.05,.36,1);
}

/* Tinte als Untergrund: Tokens spiegeln, damit Bausteine überall passen */

[data-theme="night"] {
  /* Die Messfläche muss mitwechseln: Als heller Ton bliebe sie im
     Dunkelmodus hell stehen, während die Schrift auf Kalk umspringt –
     helle Schrift auf heller Fläche. */
  --mess:       #14383B;
  --mess-weich: #0E2A2D;
  --mess-tief:  #4FD6D4;
  --mess-linie: #00707A;

  --bg:        #0B1418;
  --bg-raised: #132228;
  --text:      #E9F1F2;
  --text-2:    rgba(233,241,242,.70);
  --text-3:    rgba(233,241,242,.44);
  --line:      rgba(233,241,242,.19);
  --line-soft: rgba(233,241,242,.09);
  --line-hard: rgba(233,241,242,.42);
  --accent:    var(--teal);
  --hover-wash: rgba(0,183,181,.10);
}
[data-theme="night"] {
  --scrim:           6,14,17;
  --hero-bg:         #0B1418;
  --hero-panel:      #070F12;
  --hero-fg:         #EDF5F6;
  --hero-fg-2:       rgba(233,241,242,.82);
  --hero-fg-3:       rgba(233,241,242,.48);
  --hero-line:       rgba(233,241,242,.18);
  --hero-accent:     #00B7B5;
  --hero-accent-rgb: 0,183,181;
  --hero-accent-on:  #04191B;
  --film-rahmen:     rgba(233,241,242,.34);
}
/* ── Wortmarke ────────────────────────────────────────────────────
   Früher lagen hier zwei fertig eingefärbte PNG, eines für hell und
   eines für dunkel. Für mehr als zwei Farbkombinationen hätte das für
   jede Variante eine weitere Datei bedeutet.

   Stattdessen liegt die Marke jetzt als zwei Alphamasken vor – „ai"
   samt Knotenlinie und „move" (erzeugt von tools/logo-teile.py aus dem
   Original, verlustfrei bis auf Rundung). Die Farbe kommt aus CSS,
   also sind beliebig viele Kombinationen möglich, ohne eine einzige
   zusätzliche Datei. */
.logo-mark {
  position: relative; display: block; flex: none;
  height: var(--logo-h, 25px); aspect-ratio: 3600 / 899;
  --logo-ai: var(--navy);
  --logo-move: var(--teal-deep);
}
.logo-mark i {
  position: absolute; inset: 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-position: center;  mask-position: center;
  transition: background-color .35s var(--ease);
}
.lg-ai   { -webkit-mask-image: url("../img/logos/logo-ai.f0137f18f78a.png");   mask-image: url("../img/logos/logo-ai.f0137f18f78a.png");   background-color: var(--logo-ai); }
.lg-move { -webkit-mask-image: url("../img/logos/logo-move.ef639bd0f6fa.png"); mask-image: url("../img/logos/logo-move.ef639bd0f6fa.png"); background-color: var(--logo-move); }

/* Die Fassungen. Jede Stelle bekommt ihre eigene – das ist der Sinn
   der Zerlegung, nicht Zufall: Die Kopfzeile trägt die Grundfassung,
   der Fuss die getauschte, dunkle Flächen die helle. */
[data-theme="night"] .logo-mark { --logo-ai: var(--navy-hell); --logo-move: var(--teal); }

.logo-mark.getauscht { --logo-ai: var(--teal-deep); --logo-move: var(--navy); }
[data-theme="night"] .logo-mark.getauscht { --logo-ai: var(--teal); --logo-move: var(--navy-hell); }

.logo-mark.auf-tinte,
[data-theme="night"] .logo-mark.auf-tinte { --logo-ai: var(--navy-hell); --logo-move: var(--teal); }

.logo-mark.hell-auf-tinte,
[data-theme="night"] .logo-mark.hell-auf-tinte { --logo-ai: var(--teal); --logo-move: var(--navy-hell); }

.logo-mark.signal { --logo-ai: var(--navy); --logo-move: var(--signal); }
[data-theme="night"] .logo-mark.signal { --logo-ai: var(--navy-hell); --logo-move: var(--signal); }

/* Kalk statt Blau – nur dort, wo neben der Marke ohnehin nichts
   Farbiges steht und ein zweiter Farbton unruhig wirkt. */
.logo-mark.kalk { --logo-ai: #E9F1F2; --logo-move: var(--teal); }

.logo-mark.einfarbig,
[data-theme="night"] .logo-mark.einfarbig { --logo-ai: currentColor; --logo-move: currentColor; }

/* ── Weitere Fassungen des Zweifarbenspiels ────────────────────────
   Die Marke besteht aus zwei Masken, und beide lassen sich frei
   einfärben. Das ist kein Effekt, sondern der Grund für die
   Zerlegung: Jede Stelle bekommt die Fassung, die dort trägt – und
   die Seite bleibt trotzdem eine Marke.

   Neu dazu: ein Verlauf auf «move» (eine Maske nimmt jedes
   Hintergrundbild, nicht nur eine Farbe), die gespiegelte
   Signalfassung, das Grün des angemeldeten Bereichs, ein tiefer
   Zweiklang für ruhige Flächen und die Tinte-auf-Türkis-Fassung für
   helle Markenflächen. */
.logo-mark.verlauf { --logo-ai: var(--navy); }
.logo-mark.verlauf .lg-move { background-color: transparent; background-image: var(--grad); }
[data-theme="night"] .logo-mark.verlauf { --logo-ai: var(--navy-hell); }

.logo-mark.signal-ai { --logo-ai: var(--signal); --logo-move: var(--teal-deep); }
[data-theme="night"] .logo-mark.signal-ai { --logo-ai: var(--signal); --logo-move: var(--teal); }

.logo-mark.gruen { --logo-ai: var(--navy); --logo-move: #1E6B48; }
[data-theme="night"] .logo-mark.gruen { --logo-ai: var(--navy-hell); --logo-move: #5FB98C; }

/* Ein Ton, zwei Tiefen – das Zweifarbenspiel ohne zweiten Farbton.
   Für kleine Stellen, an denen Blau neben Türkis unruhig wirkt. */
.logo-mark.tonal { --logo-ai: var(--teal-dark); --logo-move: var(--teal); }
[data-theme="night"] .logo-mark.tonal { --logo-ai: #4FD6D4; --logo-move: var(--teal-deep); }

/* Angemeldet trägt der Startbereich Grün – die Marke in der Kopfzeile
   zieht mit, damit der Wechsel nicht nur unten passiert. */
body.angemeldet .masthead .logo-mark { --logo-move: #1E6B48; }
[data-theme="night"] body.angemeldet .masthead .logo-mark { --logo-move: #5FB98C; }
/* Im Nachtmodus fällt der Papier/Tinte-Wechsel weg – Rhythmus über Tonwerte */
[data-theme="night"] .app     { background: #101D22; border-block: 1px solid rgba(233,241,242,.12); }
[data-theme="night"] .partner { background: #101D22; border: 1px solid rgba(233,241,242,.14); }

/* ─── 2. Grundlagen ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-t);
  font-size: 16px;
  line-height: 1.58;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--teal); color: #04191B; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
/* Klassen mit eigenem display stechen sonst das hidden-Attribut aus. */
[hidden] { display: none !important; }

/* Hier lag früher ein Papierkorn, danach kurz ein Messraster. Beides
   ist weg: Das Korn machte die Seite zum Druckerzeugnis, das Raster
   legte Gitterlinien hinter den Inhalt. Der Grund bleibt blank, das
   Thema tragen die Motive weiter unten. */
.grain { display: none; }

/* Einzelne Bildschirmseiten statt durchlaufendem Fluss: Es wird nicht
   gescrollt, sondern umgeschaltet – jeweils ein Bereich füllt das Fenster,
   ohne Übergang. Nur dort aktiv, wo ein Bereich auch wirklich auf eine
   Bildschirmhöhe passt; sonst bleibt es beim normalen Scrollen. */
html.deck, html.deck body { height: 100%; overflow: hidden; }
html.deck .page-section {
  position: fixed; inset: 0;
  min-height: 0; height: 100%;
  overflow: hidden;
  /* visibility statt display: Die Bereiche behalten ihre Masse, damit die
     Bühne des Raumscans auch im Hintergrund richtig gerechnet wird. */
  visibility: hidden;
}
html.deck .page-section.is-current { visibility: visible; z-index: 1; }
html.deck .to-top { display: none; }

/* Typo-Bausteine */
.mono {
  font-family: var(--font-m);
  font-size: .6875rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 500;
}
.display {
  font-family: var(--font-d);
  font-weight: 600;
  font-variation-settings: "wght" 620;
  letter-spacing: -.03em;
  line-height: .93;
  margin: 0;
}
em { font-style: normal; color: var(--accent); }

/* Haarlinien-Regel mit Knoten – Logo-Motiv */
.rule { flex: 1; height: 1px; background: var(--line); }
.node { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }

/* ─── 3. Kopfzeile ──────────────────────────────────────────────── */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  height: var(--nav-h);
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem);
  padding: 0 var(--pad);
  /* Deckend statt durchscheinend mit Weichzeichner: Der lag über der
     oberen Kante des Films und machte ihn dort unscharf. */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: background .35s var(--ease);
}
.logo-link { display: flex; align-items: center; flex: none; }

.mast-nav { display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.6rem); margin-left: clamp(.5rem, 3vw, 3rem); }
.mast-link {
  position: relative; padding: 6px 2px; font-size: .875rem; font-weight: 500;
  color: var(--text-2); transition: color .25s var(--ease);
}
.mast-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.mast-link:hover { color: var(--text); }
.mast-link:hover::after, .mast-link[aria-current="page"]::after { transform: scaleX(1); }
.mast-link[aria-current="page"] { color: var(--text); }

.mast-right { margin-left: auto; display: flex; align-items: center; gap: .55rem; }

.lang-select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-m); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2); background: transparent;
  border: 1px solid var(--line); border-radius: 2px;
  padding: 7px 26px 7px 10px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.lang-select:hover { border-color: var(--line-hard); color: var(--text); }

.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 2px; color: var(--text-2);
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.icon-btn:hover { border-color: var(--line-hard); color: var(--text); background: var(--hover-wash); }
/* Ohne gespeicherte Wahl trägt das Dokument kein data-theme. Dann
   greift der Grundfall Tag – sonst stünden Sonne und Mond
   übereinander im Knopf. */
.i-moon { display: none; }
[data-theme="day"]   .i-moon { display: none; }
[data-theme="day"]   .i-sun  { display: block; }
[data-theme="night"] .i-sun  { display: none; }
[data-theme="night"] .i-moon { display: block; }

.btn-ink {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 9px 17px; border-radius: 2px;
  background: var(--text); color: var(--bg);
  font-size: .8125rem; font-weight: 600; letter-spacing: -.005em;
  position: relative; overflow: hidden;
  transition: transform .3s var(--ease);
}
.btn-ink span { position: relative; z-index: 1; }
.btn-ink::before {
  content: ""; position: absolute; inset: 0; background: var(--teal-deep);
  transform: translateY(101%); transition: transform .42s var(--ease);
}
[data-theme="night"] .btn-ink::before { background: var(--teal); }
.btn-ink:hover::before { transform: translateY(0); }
.btn-ink:hover { color: #fff; }
[data-theme="night"] .btn-ink:hover { color: #04191B; }

/* Lesefortschritt */
.mast-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--teal); transform: scaleX(0); transform-origin: left;
}

.burger { display: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 2px; position: relative; }
.burger i { position: absolute; left: 9px; right: 9px; height: 1.5px; background: var(--text); transition: transform .35s var(--ease), opacity .2s; }
.burger i:nth-child(1) { top: 12px; } .burger i:nth-child(2) { top: 16.5px; } .burger i:nth-child(3) { top: 21px; }
.burger.open i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.burger.open i:nth-child(2) { opacity: 0; }
.burger.open i:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* Schublade mobil */
.drawer {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 790;
  background: var(--bg); border-top: 1px solid var(--line);
  padding: 1.5rem var(--pad) 2rem;
  display: flex; flex-direction: column; gap: 0;
  transform: translateY(-101%); transition: transform .5s var(--ease);
  overflow-y: auto;
}
.drawer.open { transform: translateY(0); }
.drawer a.d-link {
  display: flex; align-items: baseline; gap: 1rem; padding: 1.05rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-d); font-size: 1.65rem; font-weight: 600; letter-spacing: -.025em;
}
.drawer a.d-link span.mono { color: var(--text-3); font-size: .625rem; }
.drawer-foot { margin-top: auto; padding-top: 2rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* ─── 4. Abschnittsrahmen ───────────────────────────────────────── */
.section-head {
  display: flex; align-items: center; gap: 1rem;
  padding-bottom: .95rem; margin-bottom: clamp(1.2rem, 2.8vh, 2.2rem);
  border-bottom: 1px solid var(--line);
}
.section-head .mono { color: var(--text-3); white-space: nowrap; }
.section-head .mono b { color: var(--accent); font-weight: 500; }

.sec-title { font-size: clamp(2rem, 3.9vw, 3.3rem); }
.sec-sub { color: var(--text-2); font-size: 1.05rem; max-width: 52ch; margin: 1.15rem 0 0; }

/* ─── 5. Hero ───────────────────────────────────────────────────── */
.hero {
  /* Eine Grösse für beide: Der Film nimmt diese Breite, die Startschiene
     den Rest. In CSS statt über JS gerechnet, sonst springt das Layout
     beim Laden einmal um.

     Die Breite ist bewusst nicht mehr ans Bildformat gekoppelt: Das
     Material ist hochkant, eine breite Fläche schneidet es oben und
     unten an. Der eingebaute Sucher-Rahmen der Clips geht dabei
     verloren – dafür steht das Bild präsent im Raum, und der Rahmen
     kommt von uns. */
  /* Die Clips sind 834 × 1112, also genau 3:4. Solange die Spalte eine
     feste Prozentbreite hatte, stimmte ihr Seitenverhältnis fast nie –
     und weil das Bild die Fläche füllt statt hineinzupassen, war oben
     und unten immer etwas abgeschnitten (bei 1440 × 860 rund ein
     Fünftel der Bildhöhe).

     Jetzt folgt die Breite wieder der Höhe: volle Höhe mal 0,75 ergibt
     exakt das Bildformat, und damit ist der Clip vollständig zu sehen –
     ohne Balken, weiterhin bündig an Oberkante, rechtem Rand und
     Unterkante. Die 62 % sind nur eine Notbremse für sehr hohe, schmale
     Fenster. */
  --film-breite: min(62%, calc((100svh - var(--nav-h) - var(--film-rand)) * 0.75));
  /* Ein schmaler Streifen rechts, damit die gerundeten Ecken auf
     dieser Seite auch zu sehen sind – der Film bleibt trotzdem am
     rechten Rand, er löst sich nicht von ihm. Oben schliesst er an
     die Kopfzeile an, unten an die Fensterkante. Die Textspalte
     rechnet diesen Streifen über --film-rand mit ein. */
  --film-rand: clamp(6px, .62vw, 10px);
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: var(--nav-h);
  background: var(--hero-bg);
  overflow: hidden;
}
/* Der Clip sitzt in einem klar umrissenen Rahmen – wie die Kamerasicht
   eines Telefons – statt über Verläufe in den Grund zu laufen. Harte
   Kante, kein weicher Übergang. Das Seitenverhältnis entspricht dem
   Material (834 × 1112), damit der eingebaute Sucher-Rahmen vollständig
   im Bild bleibt. */
.hero-film {
  /* Bis an den äusseren Rand: oben direkt unter der Kopfzeile, rechts
     und unten bündig mit der Startschiene. Die Breite folgt weiterhin
     dem Bildformat der Clips, damit der Sucher ganz im Bild bleibt. */
  position: absolute;
  top: var(--nav-h);
  right: var(--film-rand);
  bottom: var(--film-rand);
  width: var(--film-breite);
  /* Nicht abgeschnitten: Die Schärpe ragt über die Ecke hinaus.
     Video und Standbild runden sich darum selbst (border-radius: inherit). */
  overflow: visible; z-index: 0;
  background: #0A1417;
  border: 1px solid var(--film-rahmen);
}
.hero-film video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity .8s linear;
}
.hero-film video.is-on { opacity: 1; }
.hero-film video, .hero-film .poster { object-position: 50% 42%; }
.hero-film .poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 1; transition: opacity .6s linear;
}
.hero-film.is-live .poster { opacity: 0; }
.hero-film video, .hero-film .poster { border-radius: inherit; }

/* Lesbarkeit über Verläufe, nicht über Kästen */
.hero-scrim { position: absolute; inset: 0; pointer-events: none; }
/* Die Verläufe entfallen: Der Text steht jetzt auf dem blanken Grund,
   der Film in seinem eigenen Rahmen. Nichts läuft mehr ineinander. */
.hero-scrim { display: none; }

/* Instrumentenleiste über dem Film. Sie endet vor der Filmspalte: Der Clip
   bringt REC-Anzeige und Akku schon mit, beides zusammen wäre doppelt. */
.hero-top {
  position: relative; z-index: 3;
  flex: none;
  display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.6rem);
  height: var(--nav-h);
  padding: 0 var(--pad);
  padding-right: calc(var(--film-breite) + var(--film-rand) + clamp(1rem, 2.5vw, 2.5rem));
  border-bottom: 1px solid var(--hero-line);
}
.hero-top > .mono { color: var(--hero-fg-3); flex: none; }

.hero-inner {
  position: relative; z-index: 3;
  padding: clamp(1.5rem, 4vh, 3rem) var(--pad) clamp(1.75rem, 4vh, 3rem);
  /* Platz für den Filmrahmen freihalten, statt die Spalte über einen
     Prozentwert zu begrenzen – so wird der Titel nie eingeschnürt.
     Muss NACH der Kurzform stehen: sonst setzt die sie wieder zurück. */
  padding-right: calc(var(--film-breite) + var(--film-rand) + clamp(1rem, 2.5vw, 2.5rem));
  /* Text und Knöpfe sind eine Gruppe und stehen als Gruppe in der
     senkrechten Mitte. Vorher hing der Text unten am Rand und die
     Knöpfe klebten darunter an der Kante – neben dem hohen Filmfenster
     sah die linke Spalte dadurch abgesackt aus. */
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
}
.hero-copy { flex: none; width: 100%; max-width: 46rem; }

.eyebrow { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0; }
.eyebrow .mono { color: var(--hero-fg-2); white-space: nowrap; font-size: .625rem; overflow: hidden; text-overflow: ellipsis; }
.eyebrow .rule { background: var(--hero-line); }
.eyebrow .van {
  width: 26px; height: 16px; flex: none;
  color: var(--hero-accent);
  /* Fährt beim Aufbau einmal kurz an – statt dauerhaft zu blinken. */
  animation: vanIn .9s var(--ease) both;
}
@keyframes vanIn {
  from { opacity: 0; transform: translateX(-9px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .eyebrow .van { animation: none; } }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,183,181,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(0,183,181,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,183,181,0); }
}

.hero-title {
  font-family: var(--font-d);
  font-size: clamp(2.1rem, 4.3vw, 4.9rem);
  font-weight: 600; font-variation-settings: "wght" 640, "wdth" 104;
  line-height: .95; letter-spacing: -.035em;
  /* Nicht trennen und nicht umbrechen lassen: „Dein Umzugspreis" soll auf
     einer Zeile stehen, sonst kippt der Rhythmus der beiden Zeilen. */
  hyphens: none;
  color: var(--hero-fg); margin: 0;
}
.hero-title .ln {
  display: block; overflow: hidden;
  /* Die Enthüllung braucht overflow: hidden – das schnitt bei enger
     Zeilenhöhe die Unterlängen von g, p und z ab. Das Polster schafft
     ihnen Platz, der negative Abstand hält die Zeilen trotzdem eng. */
  padding-bottom: .16em; margin-bottom: -.16em;
}
/* Zeilenweise Enthüllung rein über CSS: Eine JS-Animation per rAF läuft in
   Hintergrund-Tabs nicht an – die Überschrift bliebe dann unsichtbar. */
.hero-title .ln > span { display: block; animation: lineUp 1.05s var(--ease) both; }
.hero-title .ln:nth-child(1) > span { animation-delay: .15s; }
.hero-title .ln:nth-child(2) > span { animation-delay: .28s; }
@keyframes lineUp { from { transform: translateY(135%); } to { transform: none; } }
.hero-title .l2 { color: var(--hero-accent); font-variation-settings: "wght" 420, "wdth" 104; letter-spacing: -.035em; }
.hero-title .dot { color: var(--signal); }

.hero-desc {
  margin: clamp(1.4rem, 3vw, 2.1rem) 0 0;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.5; color: var(--hero-fg-2); max-width: 38ch;
}
.hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.3rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 6px 12px; border: 1px solid var(--hero-line); border-radius: 2px;
  font-family: var(--font-m); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hero-fg-2);
}
.chip::before { content: ""; width: 4px; height: 4px; background: var(--hero-accent); border-radius: 50%; }

/* HUD: macht aus Deko-Video eine sichtbare Analyse */
.hud { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.5rem); color: var(--hero-fg-3); flex: none; }
.hud-row { display: flex; align-items: center; gap: .55rem; font-family: var(--font-m); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; }
.hud-rec { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: blink 1.6s steps(1,end) infinite; }
@keyframes blink { 0%,55% { opacity: 1; } 56%,100% { opacity: .18; } }
.hud-mode { color: var(--hero-accent); }
.hud-ticks { display: flex; gap: 5px; }
.hud-ticks i { width: 22px; height: 2px; background: var(--hero-line); transition: background .4s var(--ease); }
.hud-ticks i.on { background: var(--hero-accent); }
.hud-time { font-family: var(--font-m); font-size: .625rem; letter-spacing: .1em; color: var(--hero-fg-3); font-variant-numeric: tabular-nums; }

/* Startschiene – die drei Einstiege sind die Hauptaktion der Seite und
   müssen sich deutlich vom Film absetzen: deckender Grund, kein Glas. */
/* ── Die drei Einstiege ───────────────────────────────────────────
   Vorher war das eine Liste aus drei vollbreiten Zeilen. Es las sich
   wie ein Inhaltsverzeichnis, nicht wie die Hauptaktion der Seite.
   Jetzt sind es drei echte Knöpfe nebeneinander, mit Rahmen, eigener
   Fläche und Anfassrand – und mit einer Rangfolge: Fotos ist der Weg,
   den das Original empfiehlt, also ist dieser Knopf gefüllt und die
   beiden anderen umrissen. */
.starter {
  position: relative; z-index: 4;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(.45rem, .9vw, .7rem);
  padding: clamp(.9rem, 2vh, 1.35rem) var(--pad);
  background: var(--hero-panel);
  border-top: 3px solid var(--hero-accent);
  /* Die Schiene sitzt jetzt in der Textspalte, läuft aber weiterhin
     von der linken Kante bis an den Film: Die negativen Ränder heben
     genau die Polsterung der Spalte wieder auf. */
  margin: clamp(1.3rem, 3.2vh, 2.2rem) calc(clamp(1rem, 2.5vw, 2.5rem) * -1) 0 calc(var(--pad) * -1);
}

.starter-item {
  position: relative;
  display: flex; flex-direction: column; gap: clamp(.55rem, 1.4vh, .85rem);
  padding: clamp(.7rem, 1.5vh, .95rem) clamp(.7rem, 1vw, .95rem);
  border: 1.5px solid rgba(var(--hero-accent-rgb), .42);
  border-radius: 3px;
  background: var(--paper);
  color: var(--hero-fg);
  transition: background .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), transform .28s var(--ease),
              box-shadow .28s var(--ease);
}
.starter-item:hover,
.starter-item:focus-visible {
  background: var(--hero-accent); border-color: var(--hero-accent);
  color: var(--hero-accent-on);
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(var(--hero-accent-rgb), .24);
}

/* Kopfzeile des Knopfs: Symbol links, Ziffer rechts. */
.s-ico-wrap {
  width: clamp(30px, 2.4vw, 36px); height: clamp(30px, 2.4vw, 36px);
  flex: none; display: grid; place-items: center;
  background: rgba(var(--hero-accent-rgb), .12);
  border: 1px solid rgba(var(--hero-accent-rgb), .34);
  border-radius: 2px;
  transition: background .28s var(--ease), border-color .28s var(--ease);
}
.s-ico { width: 18px; height: 18px; color: var(--hero-accent); transition: color .28s var(--ease); }
.s-idx {
  position: absolute; top: clamp(.7rem, 1.5vh, .95rem); right: clamp(.7rem, 1vw, .95rem);
  font-family: var(--font-m); font-size: .5625rem; letter-spacing: .12em;
  color: var(--hero-fg-3); transition: color .28s var(--ease);
}
.s-label {
  font-size: clamp(.92rem, 1.05vw, 1.05rem); font-weight: 650;
  letter-spacing: -.015em; line-height: 1.22;
  margin-top: auto;
}
.s-go {
  align-self: flex-end; flex: none;
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid rgba(var(--hero-accent-rgb), .38); border-radius: 50%;
  color: var(--hero-accent);
  transition: background .28s var(--ease), border-color .28s var(--ease),
              color .28s var(--ease), transform .28s var(--ease);
}
.s-go svg { width: 14px; height: 14px; }

.starter-item:hover .s-ico-wrap,
.starter-item:focus-visible .s-ico-wrap {
  background: color-mix(in srgb, var(--hero-accent-on) 16%, transparent);
  border-color: color-mix(in srgb, var(--hero-accent-on) 44%, transparent);
}
.starter-item:hover .s-ico, .starter-item:focus-visible .s-ico { color: var(--hero-accent-on); }
.starter-item:hover .s-idx, .starter-item:focus-visible .s-idx {
  color: color-mix(in srgb, var(--hero-accent-on) 62%, transparent);
}
.starter-item:hover .s-go, .starter-item:focus-visible .s-go {
  background: var(--hero-accent-on); border-color: var(--hero-accent-on);
  color: var(--hero-accent); transform: translateX(2px);
}

/* Der empfohlene Weg ist gefüllt – ein Knopf trägt die Hauptaktion,
   die beiden anderen stehen daneben zur Wahl. */
.starter-item.ist-haupt {
  background: var(--hero-accent); border-color: var(--hero-accent);
  color: var(--hero-accent-on);
}
.starter-item.ist-haupt .s-ico-wrap {
  background: color-mix(in srgb, var(--hero-accent-on) 16%, transparent);
  border-color: color-mix(in srgb, var(--hero-accent-on) 44%, transparent);
}
.starter-item.ist-haupt .s-ico { color: var(--hero-accent-on); }
.starter-item.ist-haupt .s-idx { color: color-mix(in srgb, var(--hero-accent-on) 62%, transparent); }
.starter-item.ist-haupt .s-go {
  border-color: color-mix(in srgb, var(--hero-accent-on) 52%, transparent);
  color: var(--hero-accent-on);
}
.starter-item.ist-haupt:hover, .starter-item.ist-haupt:focus-visible {
  background: var(--hero-fg); border-color: var(--hero-fg);
}
.starter-item.ist-haupt:hover .s-go { background: var(--hero-accent-on); color: var(--hero-fg); }

.s-tipp {
  position: absolute; top: 0; left: clamp(.7rem, 1vw, .95rem);
  transform: translateY(-50%);
  font-family: var(--font-m); font-size: .5rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--hero-fg); color: var(--hero-panel);
  padding: .18rem .42rem; border-radius: 2px;
}

/* Angemeldet: ein breiter Knopf über die ganze Zeile. */
.starter-dash { display: none; }
body.angemeldet .starter-dash {
  display: flex; flex-direction: row; align-items: center;
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  grid-column: 1 / -1;
  padding: clamp(.8rem, 1.7vh, 1.1rem) clamp(.9rem, 1.4vw, 1.2rem);
}
body.angemeldet .starter-item:not(.starter-dash) { display: none; }
.starter-dash .s-label { margin-top: 0; font-size: clamp(1rem, 1.2vw, 1.18rem); }
.starter-dash .s-idx { display: none; }
.starter-dash .s-go { margin-left: auto; align-self: center; width: 32px; height: 32px; }

/* Schmal: untereinander, dafür in der Breite liegend. */
@media (max-width: 680px) {
  .starter { grid-template-columns: 1fr; }
  .starter-item {
    flex-direction: row; align-items: center; gap: .8rem;
    padding: .7rem .8rem;
  }
  .s-idx { display: none; }
  .s-label { margin-top: 0; }
  .s-go { margin-left: auto; align-self: center; }
}

.scroll-cue {
  position: absolute; z-index: 4; left: var(--pad); bottom: clamp(.9rem, 2.4vh, 1.6rem);
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-m); font-size: .5625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--hero-fg-3);
}
.scroll-cue i { display: block; width: 34px; height: 1px; background: var(--hero-line); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--hero-accent); transform: translateX(-100%); animation: sweep 2.4s var(--ease) infinite; }
@keyframes sweep { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }

/* ─── 6. Live-Feed ──────────────────────────────────────────────── */
.feed { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + clamp(1.4rem, 3.5vh, 2.6rem)) var(--pad) clamp(1.6rem, 4vh, 3rem); position: relative; }
.feed-grid { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: clamp(1.8rem, 4.5vw, 4.5rem); align-items: start; }
/* No jobs to show right now: fold the feed-list column away entirely
   (rather than leaving an empty/loading list) and let the heading take
   the full row, same single-column rhythm the rest of the page uses.
   The partner block already spans the full width either way. */
.feed-grid.no-feed { grid-template-columns: minmax(0,1fr); }
.feed-grid.no-feed .feed-col { display: none; }

/* Die Zahlen tragen den Abschnitt: eine gross, zwei klein daneben. Drei
   gleich grosse Zeilen lesen sich wie eine Tabelle, nicht wie Gestaltung. */
.stat-lead { border-top: 2px solid var(--ink); padding-top: .7rem; }
.stat-lead .stat-num { font-size: clamp(3.2rem, 7.4vw, 5.8rem); line-height: .82; letter-spacing: -.045em; }
.stat-lead .stat-label { margin-top: .5rem; }
.stat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.9rem, 2.4vw, 1.9rem); margin-top: clamp(.9rem, 2.2vh, 1.6rem); }
.stat-sm { border-top: 1px solid var(--line); padding-top: .55rem; }
.stat-sm .stat-num { font-size: clamp(1.5rem, 3.1vw, 2.3rem); line-height: .95; letter-spacing: -.035em; }
.stat-sm .stat-label { margin-top: .3rem; }
.stat-rule { height: 2px; background: var(--mess-linie); margin-top: .6rem; position: relative; overflow: hidden; }
.stat-rule span { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); }

.stats { border-top: 1px solid var(--line); }
.stats[hidden] { display: none; }
.stat-num {
  font-family: var(--font-d); font-weight: 600;
  font-variation-settings: "wght" 600, "wdth" 100;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: .86; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.stat-label { font-family: var(--font-m); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }

/* Partnerblock – invertiert, damit er als Angebot heraussticht */
.partner {
  grid-column: 1 / -1;
  margin-top: clamp(1rem, 2.6vh, 2rem);
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  background: var(--mess-weich); color: var(--text);
  border-left: 3px solid var(--mess-tief);
  padding: clamp(1rem, 2.2vh, 1.5rem) clamp(1.1rem, 2.6vw, 2rem);
  position: relative; overflow: hidden;
}
.partner::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 210px; height: 210px;
  border: 1px solid rgba(233,241,242,.13); border-radius: 50%;
  pointer-events: none;
}
.partner::before {
  content: ""; position: absolute; right: 44px; top: 44px; width: 1px; height: 150px;
  background: rgba(0,183,181,.5); transform: rotate(-45deg); transform-origin: top;
  pointer-events: none;
}
.partner-title { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.1rem, 2.1vw, 1.4rem); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .55rem; max-width: 34ch; }
.partner-sub { color: var(--text-2); font-size: .92rem; margin: .35rem 0 0; max-width: 62ch; }
.partner-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 11px 18px; border-radius: 2px; background: var(--teal); color: #04191B;
  font-size: .84rem; font-weight: 600; position: relative; overflow: hidden;
}
.partner-btn svg { transition: transform .35s var(--ease); }
.partner-btn:hover svg { transform: translateX(4px); }

/* Karten */
.feed-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); min-height: 260px; }
.fcard {
  padding: clamp(.65rem, 1.6vh, 1.15rem) 0; border-bottom: 1px solid var(--line);
  display: grid; gap: .95rem; position: relative;
}
.fcard.entering { animation: cardIn .75s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.fc-route { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.4rem); }
.fc-city { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.15rem, 2.2vw, 1.65rem); letter-spacing: -.028em; white-space: nowrap; }
.fc-city.dest { color: var(--accent); }
.fc-link { flex: 1; height: 1px; background: var(--line-hard); position: relative; min-width: 34px; }
.fc-link::before, .fc-link::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; transform: translateY(-50%); }
.fc-link::before { left: 0; background: var(--text-3); }
.fc-link::after { right: 0; background: var(--accent); }
.fcard.entering .fc-link { animation: drawLine .9s .12s var(--ease) both; }
@keyframes drawLine { from { transform: scaleX(.05); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.fc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.fbadge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: 4px 9px; border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--font-m); font-size: .5938rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
}
.fbadge.time { margin-left: auto; border-color: transparent; color: var(--signal); }
.fbadge svg { opacity: .65; }

.feed-empty { padding: 2.5rem 0; color: var(--text-3); font-family: var(--font-m); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; }

/* ─── 7. App ────────────────────────────────────────────────────── */
.app {
  display: flex; flex-direction: column; justify-content: center;
  background: var(--bg-raised);
  padding: calc(var(--nav-h) + clamp(1.4rem, 3.5vh, 2.6rem)) var(--pad) clamp(1.6rem, 4vh, 3rem);
  position: relative; overflow: hidden;
}
.app-net { position: absolute; inset: 0; opacity: .5; pointer-events: none; color: var(--text-3); }
.app-net .app-net-dots { color: var(--accent); opacity: .9; }

/* Text links, Gerät rechts. Ohne echte App-Bilder zeigt das Telefon die
   Scan-Ansicht aus einem der Analyseclips – das ist genau das, was die
   App beim Erfassen anzeigt, und keine erfundene Oberfläche. */
.app-grid {
  position: relative; display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: clamp(2rem, 6vw, 5.5rem); align-items: center;
}
.app-punkte { list-style: none; margin: clamp(1.2rem,3vh,1.9rem) 0 0; padding: 0; display: grid; gap: .75rem; }
.app-punkte li { position: relative; padding-left: 1.5rem; font-size: .95rem; color: var(--text-2); line-height: 1.45; }
.app-punkte li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 8px; height: 8px; background: var(--accent);
}
.app-punkte b { color: var(--text); font-weight: 600; }

.app-holen { margin-top: clamp(1.4rem, 3.5vh, 2.2rem); display: grid; gap: clamp(.9rem, 2.2vh, 1.4rem); }
.store-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; max-width: 30rem; }
.store-btn {
  display: flex; align-items: center; gap: .7rem;
  padding: 12px 16px; border-radius: 2px;
  background: var(--text); color: var(--bg);
  transition: background .28s var(--ease), transform .28s var(--ease);
}
.store-btn:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.store-txt { display: flex; flex-direction: column; line-height: 1.1; }
.store-sub { font-family: var(--font-m); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.store-name { font-size: .92rem; font-weight: 600; }

/* Die Codes sind der zweite Weg, nicht der erste – klein und ruhig. */
/* QR-Codes. Die Originale von aimove.ch liefen als Verlauf von Türkis
   nach Schwarz – ein Verlauf senkt genau den Kontrast, von dem ein
   Scanner lebt. Jetzt einfarbig (siehe tools/qr-svg.py), als SVG.

   Ohne Rahmen, ohne Fläche, ohne Verweis: Als Knopf getarnt war der
   Code auf dem Desktop eine Falle – anklicken bringt dort nichts, und
   die Ladeknöpfe darüber tun die Arbeit bereits. Ein QR-Code ist zum
   Abscannen da, nicht zum Drücken. Das weisse Feld samt Ruhezone
   bringt das SVG selbst mit, deshalb bleibt er auch im Dunkelmodus
   lesbar. */
.qr-row { display: flex; align-items: flex-start; gap: clamp(.9rem, 2vw, 1.5rem); }
.qr-hinweis {
  font-family: var(--font-m); font-size: .5625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); line-height: 1.6;
  padding-top: .35rem; white-space: nowrap;
}
.qr-card { width: clamp(96px, 10.5vw, 124px); }
.qr-img { display: block; width: 100%; height: auto; border-radius: 6px; }
.qr-plat {
  display: block; font-family: var(--font-m); font-size: .5rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-2); margin-top: .5rem; text-align: center;
}

/* Geräte: drei echte App-Ansichten aus dem App Store, aus den
   Store-Bildern freigeschnitten – ohne deren Marketing-Überschriften,
   die sich mit unserer eigenen doppeln würden. */
.app-geraete {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.5rem, 1.6vw, 1.1rem);
}
.phone {
  position: relative; flex: none;
  width: clamp(112px, 12.5vw, 176px);
  aspect-ratio: 420 / 922;
  border: 3px solid var(--text); border-radius: 20px;
  background: #fff; overflow: hidden;
  box-shadow: 0 24px 52px rgba(0,0,0,.18);
  transition: transform .45s var(--ease);
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.phone::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 38%; height: 12px; background: var(--text);
  border-radius: 0 0 8px 8px; z-index: 2;
}
/* Die mittlere steht vorn und grösser – sonst wirken drei gleiche
   Rechtecke wie eine Bildergalerie statt wie ein Gerät im Einsatz. */
.phone.vorn {
  width: clamp(132px, 15vw, 208px);
  z-index: 2;
  box-shadow: 0 34px 70px rgba(0,0,0,.26);
}
.phone.seite { opacity: .92; }
.app-geraete:hover .phone.links  { transform: translateX(-6px) rotate(-1.5deg); }
.app-geraete:hover .phone.rechts { transform: translateX(6px) rotate(1.5deg); }

/* ─── 8. Fußzeile ───────────────────────────────────────────────── */
.site-foot { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + clamp(1.4rem, 3vh, 2.4rem)) var(--pad) clamp(1.4rem, 3vh, 2rem); border-top: 1px solid var(--line); }
/* Vier gleich breite Linkspalten sind der schematischste Teil einer
   Seite. Stattdessen: links ein Schlusssatz in Auszeichnungsgrösse,
   rechts die Verweise kompakt in zwei Spalten. */
.foot-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(1.8rem, 5vw, 4.5rem); align-items: start; }
.foot-claim {
  font-family: var(--font-d); font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  line-height: 1.03; letter-spacing: -.035em;
  margin: clamp(1rem, 2.4vh, 1.8rem) 0 0; max-width: 15ch; color: var(--text);
}
.foot-claim em { color: var(--accent); }
.foot-cta {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: clamp(.9rem, 2.2vh, 1.5rem);
  padding: .62rem 1.05rem;
  background: var(--ink); color: var(--paper);
  font-size: .9rem;
  transition: background .3s var(--ease);
}
.foot-cta:hover { background: var(--teal-deep); }
.foot-cta svg { transition: transform .3s var(--ease); }
.foot-cta:hover svg { transform: translateX(3px); }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.foot-tagline { color: var(--text-2); font-size: .92rem; max-width: 34ch; margin: 1.1rem 0 0; }
.foot-col-title { font-family: var(--font-m); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding-bottom: .7rem; border-bottom: 2px solid var(--mess-linie); margin-bottom: .8rem; }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.foot-links a { font-size: .9rem; color: var(--text-2); display: inline-flex; align-items: center; gap: .5rem; transition: color .25s var(--ease); }
.foot-links a::before { content: ""; width: 0; height: 1px; background: var(--accent); transition: width .3s var(--ease); }
.foot-links a:hover { color: var(--text); }
.foot-links a:hover::before { width: 12px; }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: clamp(1.5rem, 4vh, 3rem); padding-top: 1.2rem; border-top: 1px solid var(--line); }
.foot-copy { font-family: var(--font-m); font-size: .625rem; letter-spacing: .08em; color: var(--text-3); }
.foot-socials { margin-left: auto; display: flex; gap: .4rem; }
.foot-social { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 2px; color: var(--text-2); transition: all .25s var(--ease); }
.foot-social:hover { color: var(--text); border-color: var(--line-hard); background: var(--hover-wash); }

/* ─── 9. Cookie-Hinweis ─────────────────────────────────────────── */
.cookiebar {
  position: fixed; right: var(--pad); bottom: var(--pad); z-index: 8500;
  width: min(430px, calc(100vw - 2 * var(--pad)));
  background: var(--ink); color: #E9F1F2; padding: 1.35rem 1.5rem;
  border-left: 2px solid var(--teal);
  transform: translateY(calc(100% + var(--pad) + 10px)); transition: transform .7s var(--ease);
}
.cookiebar.show { transform: none; }
.cookiebar h3 { font-family: var(--font-d); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .5rem; }
.cookiebar p { font-size: .82rem; line-height: 1.5; color: rgba(233,241,242,.66); margin: 0 0 1.15rem; }
.cookie-actions { display: flex; align-items: center; gap: 1.1rem; }
.cookie-accept { padding: 9px 16px; background: var(--teal); color: #04191B; border-radius: 2px; font-size: .8rem; font-weight: 600; }
.cookie-more { font-size: .78rem; color: rgba(233,241,242,.6); border-bottom: 1px solid rgba(233,241,242,.3); padding-bottom: 1px; }

/* Nach oben */
.to-top {
  position: fixed; right: var(--pad); bottom: var(--pad); z-index: 750;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--text); color: var(--bg); border-radius: 2px;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }

/* ─── 10. Auftritt ──────────────────────────────────────────────── */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.rise.in { opacity: 1; transform: none; }
.rise.d1 { transition-delay: .09s; } .rise.d2 { transition-delay: .18s; } .rise.d3 { transition-delay: .27s; }
.line-draw { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); }
.line-draw.in { transform: scaleX(1); }

/* Flachere Fenster: Der Live-Feed ist der dichteste Abschnitt und würde
   sonst über die Bildschirmseite hinauslaufen. */
@media (min-width: 900px) and (max-height: 800px) {
  .sec-title { font-size: clamp(1.75rem, 3.1vw, 2.5rem); }
  .stat-num  { font-size: clamp(1.9rem, 3.8vw, 3rem); }
  .partner-title { font-size: 1.05rem; }
  .partner { padding-top: .75rem; padding-bottom: .75rem; }
  .feed .section-head { margin-bottom: clamp(.8rem, 1.8vh, 1.4rem); }
  .feed { padding-bottom: clamp(1rem, 2.4vh, 1.8rem); }
  .stat-lead .stat-num { font-size: clamp(2.5rem, 5.4vw, 3.9rem); }
  .stat-sm .stat-num { font-size: clamp(1.35rem, 2.7vw, 1.95rem); }
  .partner-sub   { font-size: .86rem; }
  .sec-sub { font-size: .96rem; }
  .fc-city { font-size: clamp(1rem, 1.8vw, 1.35rem); }
}

/* ─── 10. Erklärfenster ─────────────────────────────────────────── */
/* Der Erklärer stammt aus einem eigenständigen Artefakt und brachte eine
   eigene Farbwelt mit (Braun, Grün, Rot). Hier läuft er in den Farben und
   Schriften der Seite, sonst wirkte er wie hineinkopiert. */
#howto {
  position: fixed; inset: 0; z-index: 9500;
  display: none; align-items: center; justify-content: center;
  padding: clamp(.75rem, 3vw, 2.5rem);
  background: rgba(6, 14, 17, .74);
}
#howto.is-open { display: flex; }
.hw-panel {
  position: relative;
  width: min(100%, 60rem);
  max-height: calc(100svh - 2rem);
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 40px 120px rgba(6,14,17,.45);
  animation: hwIn .32s var(--ease) both;
}
@keyframes hwIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hw-panel { animation: none; } }

.hw-head {
  display: flex; align-items: center; gap: 1rem;
  padding: clamp(.9rem, 2vw, 1.3rem) clamp(1rem, 2.4vw, 1.75rem);
  border-bottom: 1px solid var(--line); flex: none;
}
.hw-kicker { font-family: var(--font-m); font-size: .625rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-3); }
.hw-title { font-family: var(--font-d); font-weight: 600; font-size: clamp(1rem, 2.2vw, 1.25rem); letter-spacing: -.025em; margin: 0; flex: 1; }
.hw-x {
  flex: none; width: 34px; height: 34px; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--text-2);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.hw-x:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hw-x svg { width: 15px; height: 15px; }

.hw-stage { position: relative; flex: 1; min-height: min(56svh, 26rem); overflow: hidden; background: var(--paper-2); }
.hw-scene {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: clamp(1rem, 2.6vw, 1.9rem) clamp(1rem, 2.6vw, 2.1rem);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.hw-scene.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.hw-art { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.hw-art svg { width: 100%; height: 100%; max-height: 17rem; }
.hw-cap { padding-top: clamp(.6rem, 1.6vw, 1rem); }
.hw-mark { display: inline-block; font-family: var(--font-m); font-size: .625rem; letter-spacing: .15em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: .5rem; }
.hw-cap h3 { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.15rem, 2.9vw, 1.7rem); line-height: 1.12; letter-spacing: -.03em; margin: 0 0 .45rem; max-width: 22ch; color: var(--ink); }
.hw-cap p { margin: 0; font-size: .95rem; line-height: 1.52; color: var(--text-2); max-width: 48ch; }

.hw-foot { display: flex; align-items: center; gap: .85rem; padding: clamp(.7rem, 1.8vw, 1rem) clamp(1rem, 2.4vw, 1.75rem); border-top: 1px solid var(--line); flex: none; }
.hw-btn { flex: none; width: 34px; height: 34px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--text); transition: background .25s var(--ease), color .25s var(--ease); }
.hw-btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--paper); }
.hw-btn svg { width: 14px; height: 14px; fill: currentColor; }
.hw-track { flex: 1; display: flex; gap: 4px; }
.hw-seg { flex: 1; height: 3px; background: var(--line); position: relative; border: 0; padding: 0; cursor: pointer; }
.hw-seg::after { content: ""; position: absolute; inset: -10px 0; }
.hw-seg i { display: block; height: 100%; width: 0; background: var(--teal-deep); }
.hw-clock { flex: none; font-family: var(--font-m); font-size: .625rem; letter-spacing: .1em; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Auslöser im Hero – gefüllt und in Markenfarbe. Als reine Umrandung
   ging er neben den Chips unter, besonders auf dem Handy. */
.hw-open {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.25rem; padding: .78rem 1.25rem .78rem .82rem;
  background: var(--hero-accent); color: #FFFFFF;
  border: 0; border-radius: 2px;
  font-family: var(--font-t); font-size: .95rem; font-weight: 600;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  transition: background .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}
.hw-open:hover { background: var(--ink); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.26); }
.hw-open .play {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.22); color: #FFFFFF;
  display: grid; place-items: center;
}
.hw-open .play svg { width: 9px; height: 9px; fill: currentColor; margin-left: 1px; }

/* Bewegungen der Szenen */
.hw-fade { opacity: 0; }
.is-on .hw-fade { animation: hwUp .5s var(--ease) forwards; }
@keyframes hwUp { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.is-on .d-1 { animation-delay: .35s; } .is-on .d-2 { animation-delay: .85s; }
.is-on .d-3 { animation-delay: 1.35s; } .is-on .d-4 { animation-delay: 1.85s; }
.hw-pop { opacity: 0; transform-box: fill-box; transform-origin: center; }
.is-on .hw-pop { animation: hwPop .45s cubic-bezier(.2,1.3,.4,1) forwards; }
@keyframes hwPop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
.hw-scan { opacity: 0; }
.is-on .hw-scan { animation: hwScan 2.5s ease-in-out .4s infinite; }
@keyframes hwScan { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(104px); } }
.hw-rec { animation: hwBlink 1.2s steps(1,end) infinite; }
@keyframes hwBlink { 0%,60% { opacity: 1; } 61%,100% { opacity: .15; } }
.hw-draw { stroke-dasharray: 96; stroke-dashoffset: 96; }
.is-on .hw-draw { animation: hwDraw .6s var(--ease) forwards; }
@keyframes hwDraw { to { stroke-dashoffset: 0; } }
#howto.is-paused .hw-scene * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .hw-foot { display: none; }
  .hw-stage { min-height: 0; overflow: visible; }
  .hw-scene { position: static; opacity: 1; visibility: visible; pointer-events: auto; border-bottom: 1px solid var(--line); }
  .hw-scene * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hw-draw { stroke-dashoffset: 0 !important; }
  .hw-panel { max-height: calc(100svh - 2rem); }
  .hw-stage { overflow-y: auto; }
}
@media (max-width: 640px) {
  .hw-art svg { max-height: 12rem; }
  .hw-cap p { font-size: .88rem; }
}

/* ─── 11. Umbrüche ──────────────────────────────────────────────── */
@media (max-width: 1180px) {
  /* Neben dem Film bleibt hier wenig Platz. Die Spalte auf 26 Zeichen
     zu klemmen war der falsche Hebel – der Titel brach um und lief
     unter den Film. Sie bekommt den ganzen Rest, dafür geht die
     Überschrift eine Stufe zurück. */
  .hero-copy  { max-width: none; }
  .hero-title { font-size: clamp(1.8rem, 4.1vw, 3.1rem); }
  .hero-desc  { font-size: clamp(.95rem, 1.5vw, 1.05rem); }
  .feed-grid { grid-template-columns: 1fr; }
  .app-grid  { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --nav-h: 60px; }
  .mast-nav { display: none; }
  .mast-right .lang-select, .icon-btn.theme, .mast-right .btn-ink { display: none; }
  .burger { display: block; }
  .hud { display: none; }
  /* Hochformat: Der Film steht als gerahmte Kamerasicht über dem Text,
     nicht mehr dahinter. Dadurch braucht es keinen Verlauf zur
     Lesbarkeit – der Text sitzt auf blankem Grund. */
  .hero-film {
    position: relative; inset: auto;
    width: min(94vw, calc(52svh * 0.75));
    aspect-ratio: 834 / 1112;
    margin: clamp(.5rem, 1.5vh, 1rem) auto 0;
    flex: none;
    border: 1px solid var(--film-rahmen);
  }
  /* Reihenfolge: Leiste, Kamerasicht, Text. Im Markup steht der Film
     zuerst, damit er auf breiten Schirmen hinter allem liegen kann. */
  .hero-top   { order: 1; padding-right: var(--pad); }

  /* Schrift für das Handy nachgezogen: Die Überschrift darf grösser
     werden, weil sie jetzt auf blankem Grund steht; Chips und Beiwerk
     treten zurück, damit unter dem Videofenster nicht zu viel Höhe
     verbraucht wird. */
  .hero-title { font-size: clamp(2.3rem, 10.5vw, 3.1rem); line-height: .98; }
  .hero-desc  { font-size: 1rem; line-height: 1.45; margin-top: clamp(.8rem, 2vh, 1.1rem); max-width: 40ch; }
  .hero-chips { gap: .4rem; margin-top: .9rem; }
  .chip { padding: 5px 9px; font-size: .5625rem; letter-spacing: .09em; }
  .hw-open { margin-top: .95rem; padding: .7rem 1.05rem .7rem .72rem; font-size: .9rem; }
  .hero-inner { padding-top: clamp(.9rem, 2.4vh, 1.4rem); padding-bottom: clamp(1rem, 2.6vh, 1.6rem); }
  .hero-film  { order: 2; }
  .hero-inner { order: 3; padding-right: var(--pad); }
  .hero-copy  { max-width: 100%; }
  .starter    { order: 4; width: auto; }
  .starter-item { padding: clamp(.9rem, 2vh, 1.25rem) var(--pad); }
  .hero-top > .mono { display: none; }          /* Abschnittsziffer weglassen */
  .eyebrow .mono { font-size: .5rem; letter-spacing: .1em; }
  .starter { grid-template-columns: 1fr; }
  .starter-item { border-left: 0; border-top: 1px solid rgba(233,241,242,.14); padding-top: .95rem; padding-bottom: .95rem; }
  .starter-item:first-child { border-top: 0; }
  .scroll-cue { display: none; }
  .hero-title { font-size: clamp(2.3rem, 9.4vw, 4.1rem); }
  .hero-desc { max-width: 30ch; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .qr-row { display: none; }
  .store-row { grid-template-columns: 1fr; }
  .partner::before, .partner::after { display: none; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
  .fbadge.time { margin-left: 0; }
  .cookiebar { left: 0; right: 0; bottom: 0; width: 100%; border-left: 0; border-top: 2px solid var(--teal); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero-title .ln > span { transform: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   12. Unterseiten
   Bausteine, die nur Über uns, Anleitung, Kontakt, Karriere,
   Anmeldung und Registrierung brauchen. Die Startseite nutzt sie
   nicht – sie stehen hier, damit alle Seiten aus einer Datei lesen.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Seitenkopf ─────────────────────────────────────────────────── */
.page-head {
  padding: calc(var(--nav-h) + clamp(2.5rem, 7vh, 5.5rem)) var(--pad) clamp(1.8rem, 4vh, 3rem);
  border-bottom: 1px solid var(--line);
}
.page-kicker { display: flex; align-items: center; gap: .8rem; margin-bottom: clamp(1rem, 2.5vh, 1.8rem); }
.page-kicker .mono { color: var(--text-3); white-space: nowrap; }
.page-title { font-size: clamp(2.2rem, 6vw, 4.6rem); max-width: 18ch; }
.page-lead { margin: clamp(1rem, 2.5vh, 1.7rem) 0 0; font-size: clamp(1rem, 1.7vw, 1.18rem); color: var(--text-2); max-width: 62ch; line-height: 1.55; }

/* ── Inhalt ─────────────────────────────────────────────────────── */
.wrap { padding: clamp(2.2rem, 6vh, 4.5rem) var(--pad); }
.wrap + .wrap { padding-top: 0; }
.sec-mark { display: flex; align-items: center; gap: .8rem; margin-bottom: clamp(1.1rem, 3vh, 2rem); }
.sec-mark .mono { color: var(--text-3); white-space: nowrap; }
.sec-h { font-size: clamp(1.6rem, 3.4vw, 2.6rem); max-width: 20ch; }

.prose { max-width: 68ch; }
.prose p { margin: 0 0 1.05rem; color: var(--text-2); line-height: 1.62; }
.prose p.lead { font-size: 1.1rem; color: var(--text); }
.prose strong { color: var(--text); font-weight: 600; }

.cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cards-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cards-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.card { background: var(--bg); color: var(--text); padding: clamp(1.2rem, 2.6vw, 2rem); display: flex; flex-direction: column; gap: .6rem; transition: background .35s var(--ease); }
.card:hover { background: var(--bg-raised); }
.card-mark { font-family: var(--font-m); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.card-h { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.05rem, 1.9vw, 1.3rem); letter-spacing: -.02em; line-height: 1.16; margin: 0; }
.card-p { margin: 0; font-size: .93rem; color: var(--text-2); line-height: 1.55; }

/* Nummerierte Schritte */
.steps { border-top: 2px solid var(--mess-linie); }
.step {
  display: grid; grid-template-columns: auto minmax(0,1fr) minmax(0,1.1fr);
  gap: clamp(1rem, 3vw, 3rem); align-items: start;
  padding: clamp(1.4rem, 3.4vh, 2.4rem) 0; border-bottom: 1px solid var(--line);
}
.step-no { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.8rem, 4vw, 3rem); line-height: .9; letter-spacing: -.04em; color: var(--mess-tief); min-width: 2ch; }
.step-h { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.15rem, 2.2vw, 1.55rem); letter-spacing: -.025em; line-height: 1.14; margin: 0 0 .4rem; }
.step-sub { margin: 0; font-size: .92rem; color: var(--accent); }
.step-p { margin: 0 0 .9rem; font-size: .95rem; color: var(--text-2); line-height: 1.58; }
.step-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.step-facts li { position: relative; padding-left: 1.1rem; font-size: .88rem; color: var(--text-2); }
.step-facts li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--accent); }
.step-facts b { color: var(--text); font-weight: 600; }

/* Kontaktzeilen */
.contact-rows { border-top: 1px solid var(--line); }
.contact-row { display: grid; grid-template-columns: minmax(0,.55fr) minmax(0,1fr); gap: 1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.contact-row dt { font-family: var(--font-m); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.contact-row dd { margin: 0; font-size: 1rem; }
.contact-row a:hover { color: var(--accent); }

/* Formular */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.8rem, 2vw, 1.3rem); max-width: 46rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-m); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; color: var(--text);
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 2px;
  padding: .7rem .85rem; width: 100%;
  transition: border-color .25s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field-error, .form-error { color: var(--signal); font-size: .85rem; line-height: 1.5; margin: 0; }
.field-error[hidden], .form-error[hidden] { display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--signal); }

.btn-solid {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.3rem; background: var(--accent); color: #fff;
  font-weight: 600; font-size: .95rem; border-radius: 2px;
  transition: background .28s var(--ease), transform .28s var(--ease);
}
.btn-solid:hover { background: var(--ink); transform: translateY(-2px); }
[data-theme="night"] .btn-solid:hover { background: var(--paper-2); color: var(--text); }
.btn-solid svg { transition: transform .3s var(--ease); }
.btn-solid:hover svg { transform: translateX(3px); }

/* Aufruf-Band */
.band {
  background: var(--mess-weich); border-left: 3px solid var(--mess-tief);
  padding: clamp(1.2rem, 3vw, 2rem);
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(1rem,3vw,2.5rem); align-items: center;
}
.band-h { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.1rem, 2.1vw, 1.45rem); letter-spacing: -.025em; margin: 0; }
.band-p { margin: .35rem 0 0; font-size: .93rem; color: var(--text-2); max-width: 60ch; }

[data-theme="night"] .btn-solid:hover { background: var(--paper-2); color: var(--text); }

/* Auf Unterseiten steht der Fuss im normalen Fluss, nicht als Bildschirmseite. */
body:not(.start) .site-foot { display: block; min-height: 0; padding-top: clamp(2.4rem, 6vh, 4rem); }

@media (max-width: 1080px) {
  .step { grid-template-columns: auto minmax(0,1fr); }
  .step-facts-col { grid-column: 2; }
}
@media (max-width: 900px) {
  .cards-3, .cards-2 { grid-template-columns: 1fr; }
  .band { grid-template-columns: 1fr; }
  .contact-row { grid-template-columns: 1fr; gap: .3rem; }
}
@media (max-width: 620px) {
  .uk-fakten { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .foot-cols { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: .6rem; }
  .step-no { font-size: 1.5rem; }
  .step-facts-col { grid-column: auto; }
}

/* ── Illustrationen der Anleitung ───────────────────────────────────
   Strichzeichnungen von aimove.ch, übernommen und auf unsere Farbnamen
   umgestellt. Sie sind eingebettet statt als Datei verlinkt: Nur so
   greifen die Farbvariablen und die Zeichnungen wechseln mit Hell/Dunkel. */
.il { width: 100%; height: auto; max-width: 23rem; display: block; }
.il-line  { stroke: var(--text); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.il-dash  { stroke: var(--accent); stroke-width: 1.5; fill: none; stroke-dasharray: 5 5; stroke-linecap: round; }
.il-thin  { stroke: var(--text-2); stroke-width: 1.2; fill: none; stroke-linecap: round; }
.il-card  { fill: var(--bg); }
.il-fill  { fill: var(--mess-weich); }
.il-ink   { fill: var(--accent); }
.il-mono  { font-family: var(--font-m); font-size: 9px; fill: var(--text-2); }
.il-mono-invers { font-family: var(--font-m); font-size: 8px; fill: var(--bg); }
.il-bold  { font-family: var(--font-d); font-weight: 700; fill: var(--text); }
.il-strong{ font-family: var(--font-t); font-weight: 600; fill: var(--text); }

/* Schritt mit Illustration: Bild, Titel, Text */
.step-il { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1fr) minmax(0,1.1fr); gap: clamp(1rem,3vw,2.6rem); align-items: start; }
.step-il .step-no { grid-column: 1; grid-row: 1; margin-bottom: .6rem; }
@media (max-width: 1080px) {
  .step-il { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
}
@media (max-width: 720px) {
  .step-il { grid-template-columns: 1fr; }
  .il { max-width: 19rem; margin-inline: auto; }
  .step-facts-col { grid-column: auto; }
}

/* ── Anmelden und Registrieren ──────────────────────────────────── */
.auth { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 100svh; }
.auth-pitch {
  background: var(--ink); color: #E9F1F2;
  padding: calc(var(--nav-h) + clamp(2rem,6vh,4.5rem)) var(--pad) clamp(2rem,5vh,3.5rem);
  display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;
}
.auth-pitch .mono { color: rgba(233,241,242,.5); }
.auth-claim { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.9rem,3.6vw,3.2rem); line-height: 1.02; letter-spacing: -.035em; margin: clamp(1rem,3vh,2rem) 0 0; max-width: 16ch; }
.auth-claim em { color: var(--teal); }
/* Nur die Fliesstext-Absätze: Der Anspruch daneben ist ebenfalls
   ein <p> (er ist keine Überschrift), braucht aber seine eigene
   Grösse. */
.auth-pitch p:not(.auth-claim) { color: rgba(233,241,242,.68); font-size: .98rem; max-width: 42ch; margin: 1.1rem 0 0; }
.auth-points { list-style: none; margin: clamp(1.4rem,4vh,2.4rem) 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.auth-points li { position: relative; padding-left: 1.4rem; font-size: .93rem; color: rgba(233,241,242,.78); }
.auth-points li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; background: var(--teal); }

.auth-form {
  padding: calc(var(--nav-h) + clamp(2rem,6vh,4rem)) var(--pad) clamp(2rem,5vh,3.5rem);
  display: flex; flex-direction: column; justify-content: center;
}
.auth-inner { width: 100%; max-width: 27rem; margin-inline: auto; }
.auth-back { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-m); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: clamp(1rem,3vh,1.8rem); }
.auth-back:hover { color: var(--accent); }
.auth-h { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.5rem,3vw,2.1rem); letter-spacing: -.03em; line-height: 1.08; margin: 0 0 .5rem; }
.auth-sub { color: var(--text-2); font-size: .95rem; margin: 0 0 clamp(1.2rem,3vh,2rem); }
.auth-stack { display: flex; flex-direction: column; gap: clamp(.75rem,2vh,1.1rem); }
.auth-stack .btn-solid { justify-content: center; width: 100%; }

.field-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; }
.btn-line {
  padding: .7rem 1rem; border: 1px solid var(--line-hard); border-radius: 2px;
  font-size: .85rem; font-weight: 600; white-space: nowrap;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.btn-line:hover { background: var(--hover-wash); border-color: var(--accent); color: var(--accent); }

.auth-or { display: flex; align-items: center; gap: .9rem; margin: clamp(.8rem,2vh,1.2rem) 0; }
.auth-or span { font-family: var(--font-m); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.social-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.social-btn { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .72rem .9rem; border: 1px solid var(--line-hard); border-radius: 2px; font-size: .88rem; font-weight: 500; transition: background .25s var(--ease); }
.social-btn:hover { background: var(--hover-wash); }
.social-btn { background: none; font-family: inherit; color: inherit; cursor: pointer; width: 100%; }
.social-btn svg { width: 16px; height: 16px; flex: none; }

.check { display: flex; align-items: flex-start; gap: .65rem; font-size: .88rem; color: var(--text-2); line-height: 1.45; }
.check input { flex: none; width: 17px; height: 17px; margin-top: .12rem; accent-color: var(--teal-deep); }
.check a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.auth-foot { margin-top: clamp(1.2rem,3vh,1.8rem); padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--text-2); }
.auth-foot a { color: var(--accent); font-weight: 600; }

/* ── Schritt-für-Schritt-Formular ──────────────────────────────────
   Ablauf und Reihenfolge wie im Original: Unternehmen, Konto,
   Servicegebiete, Kapazität, Überprüfung. Nur Farben und Formen sind
   auf das neue Design gebracht. */
.wiz-bar { margin-bottom: clamp(1.2rem,3vh,2rem); }
.wiz-line { height: 3px; background: var(--line); position: relative; overflow: hidden; }
.wiz-line span { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(.2); transition: transform .45s var(--ease); }
.wiz-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; }
.wiz-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .7rem; border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--font-m); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); background: none; cursor: default;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.wiz-chip b { font-weight: 500; }
.wiz-chip.fertig { color: var(--accent); border-color: var(--accent); cursor: pointer; }
.wiz-chip.fertig:hover { background: var(--hover-wash); }
.wiz-chip.jetzt { color: #fff; background: var(--accent); border-color: var(--accent); }

.wiz-step { display: none; }
.wiz-step.jetzt { display: block; animation: wizIn .32s var(--ease) both; }
@keyframes wizIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wiz-step.jetzt { animation: none; } }

.wiz-nav { display: flex; align-items: center; gap: .7rem; margin-top: clamp(1.2rem,3vh,1.8rem); padding-top: 1.1rem; border-top: 1px solid var(--line); }
.wiz-nav .btn-solid { margin-left: auto; }
.wiz-zurueck { display: inline-flex; align-items: center; gap: .45rem; padding: .78rem 1.1rem; border: 1px solid var(--line-hard); border-radius: 2px; font-size: .92rem; font-weight: 600; transition: background .25s var(--ease); }
.wiz-zurueck:hover { background: var(--hover-wash); }
.wiz-zurueck[hidden] { display: none; }

/* Zusammenfassung im letzten Schritt */
.wiz-pruef { border-top: 1px solid var(--line); margin-bottom: clamp(1rem,2.5vh,1.6rem); }
.wiz-pruef-gruppe { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.wiz-pruef-titel { font-family: var(--font-m); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; }
.wiz-pruef-zeile { display: grid; grid-template-columns: minmax(0,.6fr) minmax(0,1fr); gap: .8rem; font-size: .9rem; padding: .18rem 0; }
.wiz-pruef-zeile dt { color: var(--text-3); margin: 0; }
.wiz-pruef-zeile dd { color: var(--text); margin: 0; }
.wiz-fehler { color: var(--signal); font-size: .85rem; margin: .6rem 0 0; }
.wiz-fehler[hidden] { display: none; }

.fieldset { border: 0; margin: 0 0 clamp(1.4rem,3.5vh,2.2rem); padding: 0; }
.fieldset > legend { font-family: var(--font-m); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding: 0 0 .7rem; border-bottom: 2px solid var(--mess-linie); width: 100%; margin-bottom: 1rem; }
.fieldset-note { font-size: .85rem; color: var(--text-3); margin: -.4rem 0 1rem; }
.fleet { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .7rem; }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth-pitch { order: 2; padding-top: clamp(2rem,5vh,3rem); }
  .auth-form { order: 1; }
  .auth-inner { max-width: 32rem; }
}
@media (max-width: 480px) {
  .social-row { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}

/* ── Rechtstexte ────────────────────────────────────────────────────
   Aufbau und Klassennamen stammen unverändert von aimove.ch – geändert
   ist nur die Gestaltung: unsere Farben, Formen und Schriften. */
.legal { padding: calc(var(--nav-h) + clamp(2rem,6vh,4rem)) var(--pad) clamp(2.5rem,7vh,5rem); }
.legal-inner { max-width: 54rem; margin-inline: auto; }
.legal-eyebrow { font-family: var(--font-m); font-size: .625rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-3); }
.legal-title { font-family: var(--font-d); font-weight: 600; font-size: clamp(2rem,5vw,3.6rem); letter-spacing: -.035em; line-height: 1.02; margin: .7rem 0 0; }
.legal-date { font-family: var(--font-m); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-top: .9rem; padding-bottom: 1.2rem; border-bottom: 2px solid var(--mess-linie); }

.legal-highlight { background: var(--mess-weich); border-left: 3px solid var(--mess-tief); padding: clamp(1rem,2.4vw,1.6rem); margin: clamp(1.4rem,3.5vh,2.2rem) 0; }
.legal-highlight p { margin: 0; color: var(--text-2); font-size: .96rem; line-height: 1.6; }

.legal-toc { border: 1px solid var(--line); padding: clamp(1rem,2.4vw,1.5rem); margin-bottom: clamp(1.6rem,4vh,2.6rem); }
.legal-toc-title { font-family: var(--font-m); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: .8rem; }
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; columns: 2; column-gap: clamp(1rem,3vw,2.5rem); }
.legal-toc li { break-inside: avoid; margin-bottom: .4rem; }
.legal-toc a { font-size: .9rem; color: var(--text-2); border-bottom: 1px solid transparent; transition: color .25s var(--ease), border-color .25s var(--ease); }
.legal-toc a:hover { color: var(--accent); border-color: var(--accent); }

.legal-section { padding-top: clamp(1.4rem,3.5vh,2.4rem); }
.legal-section + .legal-section { border-top: 1px solid var(--line); margin-top: clamp(1.4rem,3.5vh,2.4rem); }
.legal-h2 { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.2rem,2.4vw,1.7rem); letter-spacing: -.028em; line-height: 1.15; margin: 0 0 .9rem; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.legal-p { margin: 0 0 1rem; color: var(--text-2); line-height: 1.62; font-size: .96rem; }
.legal-p strong, .legal-ul strong { color: var(--text); font-weight: 600; }
.legal-p a, .legal-ul a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-ul { margin: 0 0 1rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.legal-ul li { position: relative; padding-left: 1.15rem; color: var(--text-2); font-size: .94rem; line-height: 1.55; }
.legal-ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--accent); }

/* Abschnitte aus der Kundenvereinbarung */
.tnc-section { padding-top: clamp(1.4rem,3.5vh,2.4rem); }
.tnc-section + .tnc-section { border-top: 1px solid var(--line); margin-top: clamp(1.4rem,3.5vh,2.4rem); }
.tnc-section-title { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.2rem,2.4vw,1.7rem); letter-spacing: -.028em; line-height: 1.15; margin: 0 0 .9rem; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.tnc-section-text { margin: 0 0 1rem; color: var(--text-2); line-height: 1.62; font-size: .96rem; }
.tnc-points-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.tnc-point-item { position: relative; padding-left: 1.15rem; color: var(--text-2); font-size: .94rem; line-height: 1.55; }
.tnc-point-item::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--accent); }
.tnc-point-item strong { display: block; color: var(--text); font-weight: 600; margin-bottom: .1rem; }

/* Cookie-Kategorien und Tabellen */
.cookie-cat { border: 1px solid var(--line); padding: clamp(1rem,2.4vw,1.5rem); margin-bottom: 1.1rem; }
.cookie-cat-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--accent); margin-bottom: .8rem; }
.cookie-cat-icon svg { width: 16px; height: 16px; }
.cookie-cat-title { font-family: var(--font-d); font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; margin: 0 0 .35rem; }
.cookie-cat-desc { margin: 0 0 1rem; color: var(--text-2); font-size: .92rem; line-height: 1.55; }
.cookie-table-wrap { overflow-x: auto; }
.cookie-table-wrap table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 26rem; }
.cookie-table-wrap th { text-align: left; font-family: var(--font-m); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding: .6rem .8rem .6rem 0; border-bottom: 2px solid var(--mess-linie); white-space: nowrap; }
.cookie-table-wrap td { padding: .7rem .8rem .7rem 0; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.cookie-table-wrap td:first-child { font-family: var(--font-m); font-size: .8rem; color: var(--text); white-space: nowrap; }

@media (max-width: 640px) {
  .legal-toc ol { columns: 1; }
}

/* ── Dunkelmodus: dunkle Flächen auf dunklem Grund auflösen ────────
   Knöpfe in Tinte verschwinden im Dunkelmodus, weil Grund und Fläche
   dieselbe Farbe hätten. Dort übernimmt Türkis. */
[data-theme="night"] .foot-cta   { background: var(--teal); color: #04191B; }
[data-theme="night"] .foot-cta:hover { background: #E9F1F2; color: #0B1418; }
[data-theme="night"] .btn-ink    { background: var(--teal); color: #04191B; }
[data-theme="night"] .btn-solid:hover { background: #E9F1F2; color: #0B1418; }
[data-theme="night"] .hw-open:hover   { background: #E9F1F2; color: #0B1418; }
[data-theme="night"] .hw-x:hover      { background: var(--teal); border-color: var(--teal); color: #04191B; }
[data-theme="night"] .auth-pitch { border-right: 1px solid var(--line); }
[data-theme="night"] .il-card    { fill: #101C21; }

/* Das Erklärfenster folgt dem Thema. Früher war es fest auf Hell
   genagelt, weil seine Zeichnungen feste helle Farbwerte trugen; die
   Beschriftungen blieben dabei auf Tinte stehen und standen im
   Dunkelmodus mit 1,08:1 auf dunklem Grund – praktisch unsichtbar.
   Seit die Zeichnungen dieselben Variablen benutzen wie der Rest der
   Seite, kann auch der Rahmen mitwechseln. */
#howto .hw-panel { background: var(--bg); color: var(--text); }
#howto .hw-stage { background: var(--bg-raised); }
#howto .hw-head, #howto .hw-foot { border-color: var(--line); }
#howto .hw-kicker, #howto .hw-clock { color: var(--text-3); }
#howto .hw-title, #howto .hw-cap h3 { color: var(--text); }
#howto .hw-cap p { color: var(--text-2); }
#howto .hw-x, #howto .hw-btn { border-color: var(--line); color: var(--text-2); }
#howto .hw-x:hover, #howto .hw-btn:hover { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
#howto .hw-seg { background: var(--line); }
#howto .hw-seg i { background: var(--accent); }
#howto .hw-mark { color: var(--accent); }

@media (max-width: 400px) {
  /* Auf schmalen Geräten sprengt die Zusatzangabe den Knopf. */
  .hero-title { font-size: clamp(2.1rem, 10vw, 2.7rem); }
}

/* ── Dashboard ──────────────────────────────────────────────────────
   Aufbau nach der App (Screenshots app-1 / app-2): Begrüssung,
   Zeitraumfilter, Kennzahlen, Verlauf, zuletzt eingegangene Umzüge.
   Die Statusfarben tragen je ein Symbol und eine Beschriftung – Rot
   und Grün allein sind bei Farbsehschwäche nicht zu unterscheiden. */
:root {
  --gut:      #2F7D32;
  --gut-weich: rgba(47,125,50,.12);
  --kritisch: var(--signal);
  --kritisch-weich: rgba(220,82,51,.12);
}
[data-theme="night"] { --gut: #5FB463; --kritisch: #F07B5C; }

/* Die Kopfzeile liegt fest und damit ausserhalb des Flusses – ohne
   diesen Abstand beginnt die Seite darunter und wird verdeckt. */
.db-zeit { display: flex; gap: .3rem; margin-left: auto; flex-wrap: wrap; }
.db-zeit button {
  padding: .45rem .85rem; border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--font-m); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2); transition: all .25s var(--ease);
}
.db-zeit button:hover { border-color: var(--line-hard); color: var(--text); }
.db-zeit button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Die Trennlinien entstehen aus den Kachelrändern, nicht aus dem
   Grund der Gruppe. Bleibt in der letzten Reihe eine Zelle frei,
   ist sie dadurch einfach weiss statt ein grauer Klotz. */
.db-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem,1fr)); gap: 1px; background: var(--bg); border: 1px solid var(--line); margin-bottom: clamp(1.4rem,3.5vh,2.4rem); }
.kachel { background: var(--bg); box-shadow: 0 0 0 1px var(--line); padding: clamp(1rem,2.2vw,1.4rem); display: flex; flex-direction: column; gap: .5rem; }
.kachel-kopf { display: flex; align-items: center; gap: .55rem; }
.kachel-sym { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 2px; background: rgba(0,112,122,.1); color: var(--accent); flex: none; }
.kachel-sym svg { width: 15px; height: 15px; }
.kachel.ist-gut .kachel-sym { background: var(--gut-weich); color: var(--gut); }
.kachel.ist-kritisch .kachel-sym { background: var(--kritisch-weich); color: var(--kritisch); }
.kachel-marke { margin-left: auto; font-family: var(--font-m); font-size: .5625rem; letter-spacing: .1em; padding: .15rem .4rem; border-radius: 2px; }
.kachel.ist-gut .kachel-marke { background: var(--gut-weich); color: var(--gut); }
.kachel-wert { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.7rem,3.4vw,2.5rem); letter-spacing: -.04em; line-height: 1; }
.kachel-name { font-family: var(--font-m); font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.kachel-zusatz { font-size: .82rem; color: var(--text-3); }

.db-block { border: 1px solid var(--line); padding: clamp(1rem,2.4vw,1.6rem); margin-bottom: clamp(1.4rem,3.5vh,2.4rem); }
.db-block-kopf { display: flex; align-items: baseline; gap: .8rem; margin-bottom: clamp(.9rem,2.2vh,1.4rem); }
.db-block-kopf h2 { font-family: var(--font-d); font-weight: 600; font-size: 1.15rem; letter-spacing: -.025em; margin: 0; }
.db-block-kopf .mono { color: var(--text-3); margin-left: auto; }
/* Vier Kacheln statt fünf: engere Spalten, damit keine leere Zelle bleibt. */
.db-kacheln.vier { grid-template-columns: repeat(auto-fit, minmax(11rem,1fr)); }

/* Verlauf */
.trend { position: relative; }
.trend svg { width: 100%; height: auto; display: block; overflow: visible; }
.trend-gitter { stroke: var(--line); stroke-width: 1; }
.trend-flaeche { fill: var(--accent); opacity: .08; }
.trend-linie { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-punkt { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.trend-achse { font-family: var(--font-m); font-size: 9px; fill: var(--text-3); letter-spacing: .08em; }
.trend-faden { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.trend-treffer { fill: transparent; cursor: crosshair; }
.trend-tipp {
  position: absolute; pointer-events: none; opacity: 0;
  background: var(--text); color: var(--bg);
  padding: .4rem .6rem; border-radius: 2px; font-size: .78rem; white-space: nowrap;
  transform: translate(-50%, -130%); transition: opacity .15s var(--ease);
}
.trend-tipp b { font-family: var(--font-d); font-weight: 600; }

/* Liste der Umzüge */
.db-tab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.db-tab th { text-align: left; font-family: var(--font-m); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding: 0 .8rem .6rem 0; border-bottom: 2px solid var(--mess-linie); white-space: nowrap; }
.db-tab td { padding: .75rem .8rem .75rem 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.db-tab tr:hover td { background: var(--hover-wash); }
.db-tab .ort { color: var(--text); font-weight: 600; }
.stand { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-m); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .5rem; border-radius: 2px; white-space: nowrap; }
.stand::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stand-aktiv { background: rgba(0,112,122,.12); color: var(--accent); }
.stand-fertig { background: var(--gut-weich); color: var(--gut); }
.stand-offen { background: var(--mess-weich); color: var(--mess-tief); }
.db-hinweis { font-size: .82rem; color: var(--text-3); margin: 1rem 0 0; }

@media (max-width: 720px) {
  .db-tab thead { display: none; }
  .db-tab tr { display: grid; gap: .25rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .db-tab td { border: 0; padding: 0; }
  .db-tab td::before { content: attr(data-spalte) " "; font-family: var(--font-m); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
}

/* ── Bestellablauf ──────────────────────────────────────────────────
   Ablauf, Reihenfolge und Texte wie im Original (/order-move/),
   nachgelesen in vorlagen/bestellablauf.md. Neu sind nur Farben,
   Formen und Typografie. */
.ob-kopf {
  position: sticky; top: var(--nav-h); z-index: 700;
  margin-top: var(--nav-h);
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem var(--pad);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.ob-zurueck { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--text-2); }
.ob-zurueck:hover { color: var(--accent); }
.ob-titel { font-family: var(--font-d); font-weight: 600; font-size: 1rem; letter-spacing: -.02em; }
.ob-zaehler { margin-left: auto; font-family: var(--font-m); font-size: .625rem; letter-spacing: .12em; color: var(--text-3); border: 1px solid var(--line); padding: .3rem .6rem; border-radius: 2px; }

.ob { padding: clamp(1.4rem,4vh,2.6rem) var(--pad) clamp(7rem,14vh,9rem); }
.ob-inner { max-width: 46rem; margin-inline: auto; }
.ob-pillen { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-bottom: clamp(1.4rem,3.5vh,2.2rem); }
.ob-pille { display: flex; align-items: center; gap: .4rem; font-family: var(--font-m); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ob-pille i { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-style: normal; font-size: .6rem; }
.ob-pille.fertig { color: var(--accent); }
.ob-pille.fertig i { border-color: var(--accent); background: var(--accent); color: #fff; }
.ob-pille.jetzt { color: var(--text); }
.ob-pille.jetzt i { border-color: var(--accent); color: var(--accent); border-width: 2px; }
.ob-strich { flex: 1; min-width: 8px; height: 1px; background: var(--line); }

.ob-panel { display: none; }
.ob-panel.jetzt { display: block; animation: wizIn .32s var(--ease) both; }
.ob-h { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.35rem,2.8vw,1.9rem); letter-spacing: -.03em; line-height: 1.1; margin: 0 0 .4rem; }
.ob-sub { color: var(--text-2); font-size: .95rem; margin: 0 0 clamp(1.2rem,3vh,1.9rem); }

/* Werbekarte Reinigung */
.ob-promo { border: 1px solid var(--accent); background: rgba(0,112,122,.05); padding: clamp(1rem,2.4vw,1.5rem); margin-bottom: clamp(1.2rem,3vh,1.8rem); }
.ob-promo-h { display: flex; align-items: center; gap: .6rem; font-family: var(--font-d); font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; margin-bottom: .5rem; }
.ob-promo-h svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.ob-promo p { margin: 0 0 .9rem; font-size: .9rem; color: var(--text-2); line-height: 1.55; }
.ob-merkmale { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.ob-merkmal { font-family: var(--font-m); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(0,112,122,.35); padding: .25rem .55rem; border-radius: 2px; }
.ob-schalter { display: flex; align-items: center; gap: .8rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .93rem; font-weight: 500; cursor: pointer; }
.ob-schalter input { position: absolute; opacity: 0; pointer-events: none; }
.ob-schalter .knopf { margin-left: auto; width: 46px; height: 26px; border-radius: 13px; background: var(--line); position: relative; flex: none; transition: background .25s var(--ease); }
.ob-schalter .knopf::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); transition: transform .25s var(--ease); }
.ob-schalter input:checked + .knopf { background: var(--accent); }
.ob-schalter input:checked + .knopf::after { transform: translateX(20px); }

/* Auswahlkacheln */
.ob-feldname { font-family: var(--font-m); font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: .7rem; }
.ob-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem,1fr)); gap: .6rem; }
.ob-kachel { border: 1px solid var(--line); padding: 1.1rem .8rem; text-align: center; cursor: pointer; transition: border-color .25s var(--ease), background .25s var(--ease); }
.ob-kachel svg { width: 22px; height: 22px; color: var(--text-2); margin: 0 auto .5rem; display: block; }
.ob-kachel span { font-size: .92rem; font-weight: 600; }
.ob-kachel:hover { border-color: var(--line-hard); }
.ob-kachel.gewaehlt { border-color: var(--accent); border-width: 2px; background: rgba(0,112,122,.06); }
.ob-kachel.gewaehlt svg { color: var(--accent); }

/* Regler */
.ob-block { margin-top: clamp(1.2rem,3vh,1.8rem); }
.ob-reglerkopf { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; }
.ob-reglerwert { font-family: var(--font-d); font-weight: 600; font-size: 1.5rem; letter-spacing: -.03em; color: var(--accent); }
.ob-regler { width: 100%; appearance: none; height: 3px; background: var(--line); border-radius: 2px; outline: none; }
.ob-regler::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--accent); cursor: pointer; }
.ob-regler::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); cursor: pointer; }
.ob-reglerenden { display: flex; justify-content: space-between; font-family: var(--font-m); font-size: .5625rem; letter-spacing: .1em; color: var(--text-3); margin-top: .4rem; }

/* Methodenkarten */
.ob-methoden { display: grid; gap: .7rem; }
.ob-methode { position: relative; border: 1px solid var(--line); padding: clamp(1rem,2.4vw,1.4rem); cursor: pointer; display: flex; gap: 1rem; align-items: flex-start; transition: border-color .25s var(--ease), background .25s var(--ease); }
.ob-methode:hover { border-color: var(--line-hard); }
.ob-methode.gewaehlt { border-color: var(--accent); border-width: 2px; background: rgba(0,112,122,.06); }
.ob-methode svg { width: 24px; height: 24px; color: var(--accent); flex: none; margin-top: .15rem; }
.ob-methode h3 { font-family: var(--font-d); font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; margin: 0 0 .25rem; }
.ob-methode p { margin: 0; font-size: .88rem; color: var(--text-2); line-height: 1.5; }
.ob-empfohlen { position: absolute; top: -9px; right: 14px; background: var(--accent); color: #fff; font-family: var(--font-m); font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 2px; }

/* Hochladen */
.ob-ablage { border: 1px dashed var(--line-hard); padding: clamp(1.6rem,4vw,2.6rem) 1rem; text-align: center; color: var(--text-3); font-size: .9rem; }
.ob-knopfreihe { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.ob-zaehlzeile { display: flex; align-items: center; justify-content: space-between; margin-top: .9rem; font-family: var(--font-m); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

/* Inventar */
.ob-gruppe { border: 1px solid var(--line); margin-bottom: .5rem; }
.ob-gruppe-kopf { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .9rem 1rem; text-align: left; font-family: var(--font-d); font-weight: 600; font-size: .98rem; }
.ob-gruppe-kopf svg.sym { width: 17px; height: 17px; color: var(--accent); flex: none; }
.ob-gruppe-zahl { margin-left: auto; font-family: var(--font-m); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ob-gruppe-pfeil { width: 14px; height: 14px; transition: transform .3s var(--ease); color: var(--text-3); flex: none; }
.ob-gruppe.offen .ob-gruppe-pfeil { transform: rotate(180deg); }
.ob-gruppe-inhalt { display: none; padding: 0 1rem 1rem; }
.ob-gruppe.offen .ob-gruppe-inhalt { display: block; }
.ob-posten { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.ob-posten label { flex: 1; display: flex; align-items: center; gap: .6rem; font-size: .92rem; cursor: pointer; }
.ob-posten input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--teal-deep); flex: none; }

/* Zählwerk */
.ob-zaehlwerk { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 2px; flex: none; }
.ob-zaehlwerk button { width: 30px; height: 30px; display: grid; place-items: center; font-size: 1rem; color: var(--text-2); }
.ob-zaehlwerk button:hover { background: var(--hover-wash); color: var(--text); }
.ob-zaehlwerk span { min-width: 2.2rem; text-align: center; font-family: var(--font-m); font-size: .85rem; }
.ob-etage { display: flex; align-items: center; gap: .8rem; }
.ob-etage-text { font-size: .85rem; color: var(--text-3); }

/* Bereiche */
.ob-bereich { border: 1px solid var(--line); padding: .9rem 1rem; margin-bottom: .5rem; }
.ob-bereich-kopf { display: flex; align-items: center; gap: .6rem; font-size: .95rem; font-weight: 600; cursor: pointer; }
.ob-bereich-kopf input { width: 17px; height: 17px; accent-color: var(--teal-deep); }
.ob-fuellung { display: none; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.ob-bereich.an .ob-fuellung { display: block; }
.ob-fuellung-frage { font-family: var(--font-m); font-size: .5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: .5rem; }
.ob-stufen { display: flex; flex-wrap: wrap; gap: .4rem; }
.ob-stufe { border: 1px solid var(--line); padding: .35rem .7rem; font-size: .82rem; cursor: pointer; transition: all .2s var(--ease); }
.ob-stufe:hover { border-color: var(--line-hard); }
.ob-stufe.gewaehlt { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Adressen */
.ob-adresse { border: 1px solid var(--line); padding: clamp(1rem,2.4vw,1.4rem); margin-bottom: 1rem; }
.ob-adresse-h { font-family: var(--font-m); font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--mess-linie); }
.ob-gitter { display: grid; grid-template-columns: 2fr 1fr; gap: .7rem; margin-bottom: .7rem; }
.ob-gitter.zwei { grid-template-columns: 1fr 2fr; }
.ob-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--line); font-size: .9rem; }
.ob-zeile .ob-schalter { padding-top: 0; border-top: 0; flex: 1; }

/* Termine */
.ob-tipp { background: var(--mess-weich); border-left: 3px solid var(--mess-tief); padding: 1rem; margin-bottom: 1.2rem; }
.ob-tipp b { display: block; margin-bottom: .5rem; font-family: var(--font-d); font-size: .95rem; }
.ob-tipp ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; font-size: .88rem; color: var(--text-2); }
.ob-termine { display: grid; gap: .5rem; margin-bottom: .9rem; }
.ob-termin { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--line); padding: .6rem .8rem; }
.ob-termin input { border: 0; background: none; font: inherit; color: var(--text); flex: 1; }
.ob-termin button { color: var(--text-3); font-size: 1.1rem; line-height: 1; }
.ob-termin button:hover { color: var(--signal); }

/* Überprüfung und Bestätigung */
.ob-liste { border-top: 1px solid var(--line); margin-bottom: 1rem; }
.ob-eintrag { display: flex; align-items: center; gap: .9rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.ob-eintrag-name { flex: 1; font-size: .93rem; }
.ob-eintrag-name small { display: block; color: var(--text-3); font-size: .8rem; }
.ob-preis { border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: clamp(1.1rem,2.6vw,1.6rem); margin-bottom: 1rem; }
.ob-preis-zeile { display: flex; justify-content: space-between; padding: .45rem 0; font-size: .92rem; color: var(--text-2); }
.ob-preis-summe { display: flex; justify-content: space-between; align-items: baseline; margin-top: .7rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.ob-preis-summe span { font-family: var(--font-m); font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.ob-preis-summe b { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.6rem,3.4vw,2.4rem); letter-spacing: -.04em; }
.ob-kleingedrucktes { font-size: .82rem; color: var(--text-3); line-height: 1.5; }

/* Fusssteuerung */
.ob-fuss {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 720;
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem var(--pad);
  background: var(--bg); border-top: 1px solid var(--line);
}
.ob-fuss .ob-inner-fuss { width: 100%; max-width: 46rem; margin-inline: auto; display: flex; align-items: center; gap: .8rem; }
.ob-fuss .btn-solid { margin-left: auto; }
.ob-fehler { color: var(--signal); font-size: .85rem; margin: 0 0 .8rem; }
.ob-fehler[hidden] { display: none; }

@media (max-width: 620px) {
  .uk-fakten { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ob-gitter, .ob-gitter.zwei { grid-template-columns: 1fr; }
  .ob-pille span { display: none; }
  .ob-pille { gap: 0; }
}

/* ── Konsole (angemeldeter Bereich) ─────────────────────────────────
   Aufbau nach dem Original /service-customer/: dunkle Seitenleiste
   links, Inhalt rechts. Zwei Rollen teilen sich den Rahmen, füllen
   ihn aber unterschiedlich. */
.kons { display: grid; grid-template-columns: 250px minmax(0,1fr); min-height: 100svh; }
.kons-leiste {
  background: #0B1418; color: #E9F1F2;
  padding: clamp(1rem,2.4vh,1.6rem) 1.1rem;
  display: flex; flex-direction: column; gap: 1.2rem;
  position: sticky; top: 0; height: 100svh;
}
.kons-marke { display: flex; align-items: center; gap: .7rem; }
.kons-marke-zeichen { width: 34px; height: 34px; display: grid; place-items: center; background: var(--teal); color: #04191B; border-radius: 2px; flex: none; }
.kons-marke-zeichen svg { width: 18px; height: 18px; }
.kons-marke > span:last-child > span { display: block; margin-top: .25rem; font-family: var(--font-m); font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(233,241,242,.45); }
.kons-abschnitt { font-family: var(--font-m); font-size: .5rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(233,241,242,.38); }
.kons-nav { display: grid; gap: .15rem; }
.kons-nav a {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .7rem; border-radius: 2px;
  font-size: .9rem; color: rgba(233,241,242,.72);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.kons-nav a svg { width: 16px; height: 16px; flex: none; }
.kons-nav a:hover { background: rgba(233,241,242,.07); color: #E9F1F2; }
.kons-nav a[aria-current="page"] { background: rgba(0,183,181,.16); color: var(--teal); }
.kons-cta svg { width: 16px; height: 16px; flex: none; }
.kons-cta { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem; background: var(--teal); color: #04191B; font-weight: 600; font-size: .9rem; border-radius: 2px; transition: background .25s var(--ease); }
.kons-cta:hover { background: #E9F1F2; }
.kons-person { margin-top: auto; display: flex; align-items: center; gap: .7rem; padding-top: 1rem; border-top: 1px solid rgba(233,241,242,.12); }
.kons-kuerzel { width: 32px; height: 32px; display: grid; place-items: center; background: var(--teal); color: #04191B; font-family: var(--font-d); font-weight: 600; border-radius: 2px; flex: none; }
.kons-person small { display: block; font-size: .78rem; color: rgba(233,241,242,.8); line-height: 1.2; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
.kons-person span { font-family: var(--font-m); font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(233,241,242,.42); }
.kons-abmelden { margin-left: auto; color: rgba(233,241,242,.5); }
.kons-abmelden:hover { color: var(--teal); }
.kons-abmelden svg { width: 15px; height: 15px; }

.kons-inhalt { background: var(--bg); }
.kons-kopf { display: flex; align-items: center; gap: 1rem; padding: clamp(1rem,2.4vh,1.5rem) clamp(1.1rem,3vw,2.2rem); border-bottom: 1px solid var(--line); }
.kons-kopf h1 { font-family: var(--font-d); font-weight: 600; font-size: 1.15rem; letter-spacing: -.025em; margin: 0; }
.kons-kopf p { margin: .1rem 0 0; font-size: .82rem; color: var(--text-3); }
.kons-werkzeuge { margin-left: auto; display: flex; gap: .4rem; }
.kons-koerper { padding: clamp(1.1rem,3vh,2rem) clamp(1.1rem,3vw,2.2rem) clamp(2.5rem,6vh,4rem); }

.kons-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; background: var(--mess-weich); border-left: 3px solid var(--mess-tief); padding: .9rem 1.1rem; margin-bottom: clamp(1.1rem,3vh,1.8rem); font-size: .9rem; }
.kons-hinweis a { margin-left: auto; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.kons-leer { border: 1px solid var(--line); padding: clamp(2rem,6vh,4rem) 1.5rem; text-align: center; }
.kons-leer svg { width: 42px; height: 42px; color: var(--text-3); margin: 0 auto 1rem; display: block; }
.kons-leer h2 { font-family: var(--font-d); font-weight: 600; font-size: 1.2rem; letter-spacing: -.025em; margin: 0 0 .4rem; }
.kons-leer p { margin: 0 0 1.2rem; color: var(--text-2); font-size: .92rem; }

/* Schmal: Die Leiste legt sich als zweizeiliger Kopf über den Inhalt.
   Oben Marke und Konto, unten die Navigation – sie darf seitlich
   rollen, statt die Seite breiter zu machen. */
@media (max-width: 900px) {
  .kons { grid-template-columns: 1fr; }
  .kons-leiste {
    position: static; height: auto;
    display: grid; grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "marke person" "nav cta";
    align-items: center; gap: .7rem 1rem;
    padding: .7rem var(--pad);
  }
  .kons-marke  { grid-area: marke; }
  .kons-person { grid-area: person; margin: 0; padding: 0; border: 0; }
  .kons-nav {
    grid-area: nav; min-width: 0;
    grid-auto-flow: column; grid-auto-columns: max-content;
    overflow-x: auto; scrollbar-width: none;
  }
  .kons-nav::-webkit-scrollbar { display: none; }
  .kons-cta { grid-area: cta; padding: .5rem .85rem; font-size: .82rem; white-space: nowrap; }
  /* Ohne Knopf (Firmenleiste) nimmt die Navigation die ganze Breite –
     sonst bliebe rechts eine leere Spalte stehen. */
  .kons-leiste:not(:has(.kons-cta)) { grid-template-areas: "marke person" "nav nav"; }
  .kons-abschnitt { display: none; }
  .kons-person > span:not(.kons-kuerzel) { display: none; }
  /* Der Konsolenkopf hat keine Schublade – der Umschalter bleibt hier
     sichtbar, anders als in der Marketing-Kopfzeile. */
  .kons-kopf .icon-btn.theme { display: inline-flex; }
  .kons-kopf { padding-top: clamp(.9rem,2.2vh,1.3rem); }
}
@media (max-width: 620px) {
  .uk-fakten { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .db-kacheln, .db-kacheln.vier { grid-template-columns: 1fr; }
  .kons-marke span span { display: none; }
}

/* ── Begrüssung auf der Startseite ──────────────────────────────────
   Erscheint nur bei angemeldeter Sitzung, an Stelle der Merkmal-Chips.
   Drei kleine Kennzahlen, jede mit einem Verlauf als Linie – klein
   genug, dass sie den Hero nicht sprengen. */
.hero-gruss { display: none; margin-top: 1.1rem; }
body.angemeldet .hero-gruss { display: block; }
body.angemeldet .hero-chips { display: none; }
.hero-gruss-titel { font-family: var(--font-d); font-weight: 600; font-size: clamp(1rem,1.8vw,1.2rem); letter-spacing: -.02em; margin: 0 0 .8rem; color: var(--hero-fg); }
.mini-reihe { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; max-width: 30rem; }
.mini {
  border: 1px solid var(--hero-line); padding: .65rem .7rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.mini-wert { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.1rem,2.2vw,1.5rem); letter-spacing: -.035em; line-height: 1; color: var(--hero-fg); }
.mini-name { font-family: var(--font-m); font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hero-fg-3); }
.mini svg { width: 100%; height: 22px; display: block; overflow: visible; }
.mini-linie { fill: none; stroke: var(--hero-accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.mini-flaeche { fill: var(--hero-accent); opacity: .12; }
.mini-punkt { fill: var(--hero-accent); }
.mini-balken rect { fill: var(--hero-accent); opacity: .35; }
.mini-balken rect:last-child { opacity: 1; }

@media (max-width: 620px) {
  .uk-fakten { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mini-reihe { grid-template-columns: 1fr 1fr; }
  .mini:last-child { display: none; }
}

/* Benutzerkürzel in der Kopfzeile */
.mast-person { display: none; align-items: center; gap: .5rem; }
body.angemeldet .mast-person { display: flex; }
body.angemeldet .mast-anmelden { display: none; }
.mast-kuerzel { width: 30px; height: 30px; display: grid; place-items: center; background: var(--accent); color: #fff; font-family: var(--font-d); font-weight: 600; font-size: .8rem; border-radius: 2px; }
.mast-person .name { font-size: .85rem; font-weight: 500; }
@media (max-width: 1080px) { .mast-person .name { display: none; } }

/* Testzugang */
.demo { border: 1px dashed var(--line-hard); padding: clamp(1rem,2.4vw,1.4rem); margin-top: clamp(1rem,2.5vh,1.6rem); }
.demo-h { font-family: var(--font-m); font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: .5rem; }
.demo p { margin: 0 0 .9rem; font-size: .86rem; color: var(--text-2); line-height: 1.5; }
.demo-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 480px) { .demo-knoepfe { grid-template-columns: 1fr; } }

/* Fortschritt eines einzelnen Umzugs – vier Stationen, die dritte ist
   die aktuelle. Zustand steht nicht nur in der Farbe, sondern auch im
   Punkt und in der Beschriftung. */
.kons-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kons-schritte li {
  position: relative; padding: .75rem 0 .75rem 2rem;
  border-left: 1px solid var(--line); margin-left: .45rem;
}
.kons-schritte li:last-child { border-left-color: transparent; }
.kons-schritte li::before {
  content: ""; position: absolute; left: -5px; top: 1.05rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line-hard);
}
.kons-schritte li.ist-fertig::before { background: var(--teal); border-color: var(--teal); }
.kons-schritte li.ist-jetzt::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.kons-schritte li b { display: block; font-weight: 600; font-size: .95rem; }
.kons-schritte li span { display: block; font-size: .84rem; color: var(--text-3); margin-top: .1rem; }
.kons-schritte li.ist-fertig b::after { content: " ✓"; color: var(--teal); }
.kons-schritte li.ist-jetzt b::after { content: " · jetzt"; color: var(--accent); font-family: var(--font-m); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }

.kons-daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem,1fr)); gap: 0; margin: 0; }
.kons-daten > div { padding: .7rem 0; border-bottom: 1px solid var(--line); padding-right: 1.5rem; }
.kons-daten dt { font-family: var(--font-m); font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.kons-daten dd { margin: .2rem 0 0; font-size: .92rem; }
.kons-daten dd.fehlt { color: var(--signal); }

/* Textknopf im Fliesstext – für die beiden Entwurfsschalter unter der
   Umzugsliste. */
.ob-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ob-link:hover { color: var(--text); }

/* Gesperrter Weiter-Knopf: Solange ein Schritt unvollständig ist,
   bleibt er grau und ohne Zeiger. Erst mit der Freigabe springt er
   auf die Aktionsfarbe – die Farbe ist die Rückmeldung. */
.btn-solid:disabled,
.btn-solid[disabled] {
  background: var(--line);
  color: var(--text-3);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-solid:disabled:hover,
.btn-solid[disabled]:hover { background: var(--line); color: var(--text-3); transform: none; }
.btn-solid:disabled svg, .btn-solid[disabled] svg { opacity: .55; }

/* ═══════════════════════════════════════════════════════════════════
   Motive: Erkennung und Vermessung

   Bis hierher war die Seite sauber, aber thematisch stumm – Haarlinien
   und Serifenlosigkeit hätten genauso zu einer Zeitung gepasst. Die
   folgenden Bausteine holen das Thema in die Fläche, und zwar aus dem
   Material, das die Seite ohnehin zeigt: den Analyseclips. Dort liegen
   Eckwinkel um erkannte Möbel, laufen Messteilungen und stehen Masse in
   Monospace. Genau diese drei Zeichen wiederholt die Oberfläche.
   ═══════════════════════════════════════════════════════════════════ */

/* Eckwinkel — „erkannt". Sitzen an gewählten Kacheln, Kennzahlen und
   überall dort, wo etwas hervorgehoben ist. Zwei Ecken genügen; vier
   wirken schnell wie ein Rahmen und nicht mehr wie eine Markierung. */
.eck { position: relative; }
.eck::before, .eck::after {
  content: ""; position: absolute; width: 13px; height: 13px;
  border: 2px solid var(--teal); pointer-events: none;
}
.eck::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.eck::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Messteilung — ersetzt die Haarlinie dort, wo ein Abschnitt anfängt. */
.rule.mess, .section-head .rule, .page-kicker .rule {
  height: 7px; background:
    repeating-linear-gradient(90deg, var(--line-hard) 0 1px, transparent 1px 9px) 0 100%/100% 5px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 100%/100% 1px no-repeat;
}

/* Kennzahlen bekommen die Winkel, sobald sie etwas melden. */
.kachel { position: relative; }
.kachel.ist-gut::before, .kachel.ist-gut::after,
.kachel.ist-kritisch::before, .kachel.ist-kritisch::after {
  content: ""; position: absolute; width: 11px; height: 11px;
  border: 2px solid var(--gut); pointer-events: none;
}
.kachel.ist-gut::before, .kachel.ist-kritisch::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.kachel.ist-gut::after,  .kachel.ist-kritisch::after  { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.kachel.ist-kritisch::before, .kachel.ist-kritisch::after { border-color: var(--signal); }

/* Gewählte Kacheln im Bestellablauf: wie ein erkanntes Objekt im Clip. */
.ob-kachel, .ob-methode { position: relative; }
.ob-kachel.gewaehlt::before, .ob-kachel.gewaehlt::after,
.ob-methode.gewaehlt::before, .ob-methode.gewaehlt::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 2px solid var(--teal); pointer-events: none;
}
.ob-kachel.gewaehlt::before, .ob-methode.gewaehlt::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.ob-kachel.gewaehlt::after,  .ob-methode.gewaehlt::after  { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }

/* Die kleinen Kennzahlen der Begrüssung. */
.mini { position: relative; }
.mini::before, .mini::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  border: 2px solid var(--hero-accent); pointer-events: none; opacity: .75;
}
.mini::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.mini::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Der Leerzustand ist der Sucher ohne Fund. */
.kons-leer { position: relative; }
.kons-leer::before, .kons-leer::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border: 2px solid var(--line-hard); pointer-events: none;
}
.kons-leer::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.kons-leer::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* Der Auftakt einer Seite bekommt eine türkise Kante. Auf weissem
   Grund trägt die Marke, nicht mehr der Papierton. */
.page-head { border-top: 3px solid var(--teal); }
.kons-kopf { border-top: 3px solid var(--teal); }

/* Spaltentitel, Tabellenköpfe und Feldgruppen sind mit der Messlinie
   unterstrichen – vorher lag dort der Sandton. */
.foot-col-title, .db-tab th, .cookie-table-wrap th,
.fieldset > legend, .legal-date, .ob-adresse-h, .steps {
  border-color: var(--mess-linie);
}

/* „Wartet auf Partner" ist ein Wartezustand, kein laufender. Mit den
   Messtönen sah er aus wie „in Arbeit"; er bekommt deshalb das
   Signalrot – Symbolpunkt und Beschriftung tragen die Bedeutung
   ohnehin mit, die Farbe ist nur die dritte Angabe. */
.stand-offen { background: rgba(220,82,51,.12); color: #B23F20; }
[data-theme="night"] .stand-offen { background: rgba(220,82,51,.18); color: #F07B5C; }

/* Abschnittsziffern als gefülltes Feld. Auf weissem Grund braucht die
   Seite Stellen, an denen die Marke wirklich Fläche bekommt – sonst
   bleibt sie ein Raster aus grauen Linien. */
.section-head .mono b,
.page-kicker > .mono:first-child {
  display: inline-block; background: var(--accent); color: #FFFFFF;
  padding: .2em .5em; border-radius: 2px; font-weight: 500;
}
[data-theme="night"] .section-head .mono b,
[data-theme="night"] .page-kicker > .mono:first-child { color: #04191B; }

/* Karten fangen die Eckwinkel beim Überfahren ein – dasselbe Zeichen,
   mit dem der Scan im Film ein Objekt fasst. */
.card { position: relative; }
.card::before, .card::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 2px solid var(--teal); pointer-events: none;
  opacity: 0; transition: opacity .25s var(--ease);
}
.card::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.card::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.card:hover::before, .card:hover::after { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   Angemeldet: der Startbereich wechselt die Stimmung

   Wer eingeloggt ist, kommt nicht mehr als Interessent, sondern als
   Kunde – die Seite soll das zeigen, ohne die Marke aufzugeben.
   Türkis bleibt überall sonst; nur im Startbereich (Bereich 01) tritt
   ein Grün an seine Stelle: derselbe Ton, den die Seite für
   „abgeschlossen" benutzt, also die Farbe des erledigten Umzugs.

   Die Werte sind gerechnet, nicht geschätzt: #17773F auf Weiss ergibt
   5,4:1, #4ECB7B auf der Nachtfläche 9,1:1 – beide über 4,5:1, also
   auch für Fliesstext tragfähig.
   ═══════════════════════════════════════════════════════════════════ */
body.angemeldet .hero {
  /* Tannengrün statt Signalgrün. Das vorherige #17773F war als Fläche
     in Ordnung, im Nachtmodus stand daneben aber ein mintfarbenes
     #4ECB7B – das war das Grelle. Jetzt trägt beides denselben
     gedeckten Ton, und die Füllung der Hauptaktion ist in beiden
     Themen dieselbe dunkle Tanne mit weisser Schrift (5,0:1).
     Auf der Nachtfläche hebt ein Schein sie ab, nicht ein helleres
     Grün. */
  --hero-accent:     #1E6B48;
  --hero-accent-rgb: 30,107,72;
  --hero-accent-on:  #FFFFFF;
  --hero-panel:      #F3F8F5;
  --hero-line:       rgba(16,48,34,.17);
  --gruen-fuell:     linear-gradient(135deg, #2F7D57 0%, #1E5C3F 100%);
  --gruen-schein:    0 12px 30px -12px rgba(47,125,87,.5);
  --gruen-tief:      #1E5C3F;
}
[data-theme="night"] body.angemeldet .hero {
  --hero-accent:     #5FB98C;
  --hero-accent-rgb: 95,185,140;
  --hero-accent-on:  #06190F;
  --hero-panel:      #0B1712;
  --hero-line:       rgba(140,196,170,.20);
  --gruen-fuell:     linear-gradient(135deg, #2F7D57 0%, #1E5C3F 100%);
  --gruen-schein:    0 14px 34px -12px rgba(95,185,140,.45);
}

/* Der vierte Einstieg ersetzt die drei Analysewege, sobald jemand
   angemeldet ist: Wer ein Konto hat, will in seine Konsole und nicht
   noch einmal bei der Methodenwahl anfangen. */
.starter-dash { display: none; }
body.angemeldet .starter-dash { display: flex; border-top: 0; }
body.angemeldet .starter-item:not(.starter-dash) { display: none; }
body.angemeldet .starter-dash .s-idx { font-size: .85rem; line-height: 1; }

/* Angemeldet braucht es den Verkaufstitel nicht mehr: „Dein Umzugspreis
   in Minuten" wirbt um jemanden, der schon da ist. An seine Stelle
   rückt die Begrüssung als eigentliche Überschrift. */
body.angemeldet .hero-title,
body.angemeldet .hero-desc { display: none; }
body.angemeldet .hero-gruss { margin-top: 0; }
body.angemeldet .hero-gruss-titel {
  font-family: var(--font-d); font-weight: 600;
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  line-height: 1.02; letter-spacing: -.035em;
  margin: 0 0 clamp(1rem, 2.4vh, 1.6rem); max-width: 16ch;
}
.hero-gruss-lead {
  margin: calc(clamp(1rem, 2.4vh, 1.6rem) * -1) 0 clamp(1rem, 2.4vh, 1.6rem);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.5; color: var(--hero-fg-2); max-width: 38ch;
}

/* ═══════════════════════════════════════════════════════════════════
   § Plattform-Ausdruck

   Rückmeldung: «erinnert an eine Print-Media-Agentur». Zu Recht – die
   Seite war nach Zeitungsregeln gebaut: enge Grossbuchstaben-Titel,
   Haarlinien, Ziffernleisten wie ein Inhaltsverzeichnis, scharfe
   Ecken. Das ist sauber, aber es ist die Sprache von Papier.

   AI-Move ist ein Instrument: Eine Kamera geht durch die Wohnung, eine
   Software rechnet, ein Preis erscheint. Die Oberfläche soll sich wie
   dieses Instrument anfühlen – wie ein Produkt, das man bedient, nicht
   wie ein Magazin, das man liest. Konkret:

   • Rundungen (14 px Flächen, 9 px Felder, Pillen für Knöpfe und
     Etiketten) statt 0–2 px Druckkanten.
   • Elevation: Karten stehen auf einer türkis getönten, weichen
     Schattenfläche; die Hauptaktion leuchtet.
   • Ein Verlauf Türkis → Tiefsee als Markenzeichen auf Knöpfen und
     Kennzahlen – nicht als Fläche, nur an den Stellen, die zählen.
   • Der Live-Feed wird zur dunklen Leitstelle: Zahlen glühen, Karten
     liegen auf Glas. Der einzige dunkle Bereich der Seite – Kontrast
     zur weissen Bühne, kein Themawechsel.
   • Pillen statt «02 — Live-Feed»-Ziffernleisten; die Messteilung
     weicht einer dünnen Verlaufslinie.

   Was bleibt: Weiss als Grund, die Eckwinkel aus dem Scan, der HUD über
   dem Film, Mono für Messwerte. Die Motive sind richtig – nur das
   Papier drumherum musste weg.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --r:   14px;
  --r-s: 9px;
  --grad: linear-gradient(135deg, #00B7B5 0%, #00707A 100%);
  --grad-text: linear-gradient(90deg, #00B7B5 0%, #00707A 100%);
  --glow: 0 12px 30px -10px rgba(0,183,181,.55);
  --schatten: 0 1px 2px rgba(11,20,24,.05), 0 16px 40px -20px rgba(0,112,122,.30);
  --schatten-hoch: 0 2px 4px rgba(11,20,24,.06), 0 24px 54px -22px rgba(0,112,122,.42);
}
[data-theme="night"] {
  --grad-text: linear-gradient(90deg, #4FD6D4 0%, #00B7B5 100%);
  --schatten: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,183,181,.25);
  --schatten-hoch: 0 2px 4px rgba(0,0,0,.5), 0 24px 54px -22px rgba(0,183,181,.35);
}

/* ── Schrift: weniger eng, weniger Schlagzeile ────────────────────── */
.display, .hero-title, .page-title, .foot-claim, .kons-kopf h1, .ob-h, .auth-h,
.auth-claim, .db-block-kopf h2, .card-h, .partner-title, .hero-gruss-titel { letter-spacing: -.022em; }
.hero-title { font-weight: 600; }

/* ── Kopfzeile: schwebt über dem Inhalt ───────────────────────────── */
.masthead {
  background: rgba(255,255,255,.84);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
[data-theme="night"] .masthead { background: rgba(11,20,24,.82); }
.btn-ink { border-radius: 999px; }
.icon-btn, .lang-select { border-radius: var(--r-s); }

/* ── Knöpfe ───────────────────────────────────────────────────────── */
.btn-solid {
  border-radius: 999px; padding: .85rem 1.5rem;
  background: var(--grad); color: #FFFFFF;
  box-shadow: var(--glow);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), filter .28s var(--ease);
}
.btn-solid:hover { background: var(--grad); filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(0,183,181,.7); }
[data-theme="night"] .btn-solid:hover { background: var(--grad); color: #FFFFFF; }
.btn-solid:disabled, .btn-solid[disabled] { background: var(--line); box-shadow: none; filter: none; transform: none; }
.btn-line, .wiz-zurueck, .social-btn, .db-zeit button, .ob-link { border-radius: 999px; }
.btn-line { padding: .8rem 1.35rem; }
.partner-btn, .foot-cta, .kons-cta { border-radius: 999px; }
.foot-cta, .partner-btn { background: var(--grad); color: #FFFFFF; box-shadow: var(--glow); }
.foot-cta:hover, .partner-btn:hover { background: var(--grad); filter: brightness(1.07); }
.store-btn { border-radius: var(--r-s); }
.kons-cta { background: var(--grad); color: #FFFFFF; box-shadow: var(--glow); }
.kons-cta:hover { background: var(--grad); color: #FFFFFF; filter: brightness(1.08); }

/* ── Etiketten als Pillen ─────────────────────────────────────────── */
.stand, .chip, .fbadge, .wiz-chip, .kachel-marke, .s-tipp, .demo-h, .ob-pille { border-radius: 999px; }
.section-head { border-bottom: 0; padding-bottom: .4rem; }
.section-head .mono,
.page-kicker > .mono:first-child,
.page-kicker > .mono:last-child {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .32rem .85rem .32rem .35rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-raised); color: var(--text-2);
  white-space: nowrap;
}
.section-head .mono b,
.page-kicker > .mono:first-child {
  border-radius: 999px; background: var(--grad); color: #FFFFFF; padding: .2em .6em;
}
.page-kicker > .mono:first-child { border: 0; }
.page-kicker > .mono:last-child { padding-left: .85rem; }
.section-head .rule, .page-kicker .rule, .rule.mess {
  height: 1px; background: linear-gradient(90deg, rgba(0,183,181,.7), transparent);
}
.page-head { border-top: 0; }
.kons-kopf { border-top: 0; }
/* Ein weicher Lichtschein oben links, wo eine Seite anfängt – kein
   Raster, keine Fläche, nur Licht auf Weiss. */
.page-head, .auth-pitch, .kons-kopf {
  background-image: radial-gradient(70% 90% at 12% 0%, rgba(0,183,181,.12), transparent 62%);
}

/* ── Flächen mit Elevation ────────────────────────────────────────── */
.card, .db-block, .kons-leer, .ob-tipp, .ob-adresse, .legal-highlight, .demo,
.mini, .kons-hinweis, .wiz-pruef-gruppe, .auth-inner > form {
  border-radius: var(--r);
}
.card { border: 1px solid var(--line); box-shadow: var(--schatten); transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); }
.card:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
.cards-3, .cards-2 { gap: clamp(.8rem, 1.6vw, 1.2rem); background: transparent; border: 0; }
.db-block { box-shadow: var(--schatten); }
.db-kacheln { gap: clamp(.7rem, 1.4vw, 1rem); background: transparent; border: 0; }
.kachel { border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--schatten); }
.kachel-sym { border-radius: var(--r-s); }
.kons-hinweis { border-left: 0; border: 1px solid rgba(0,183,181,.35); background: var(--mess-weich); }
.ob-tipp, .legal-highlight { border-left: 0; border: 1px solid rgba(0,183,181,.3); }
/* Ein Hinweis, der den Preis begrenzt, ist kein Tipp: Er bekommt die
   Signalfarbe, damit er nicht mit den Ratschlägen daneben verschwimmt. */
.ob-tipp.ist-wichtig {
  border-color: color-mix(in srgb, var(--signal) 32%, transparent);
  background: var(--kritisch-weich);
  margin-top: clamp(1.1rem,2.6vh,1.6rem);
}
.ob-tipp.ist-wichtig > b { color: var(--signal); }
.ob-tipp.ist-wichtig p { margin: .45rem 0 0; font-size: .88rem; color: var(--text-2); }
/* Im Fliesstext steht <b> mitten im Satz – die Blockregel des Tipps
   riss ihn sonst auseinander. */
.ob-tipp p b { display: inline; margin: 0; font-family: inherit; font-size: inherit; color: var(--text); }
.ob-kachel, .ob-methode { border-radius: var(--r); background: var(--bg); }
.ob-kachel.gewaehlt, .ob-methode.gewaehlt { box-shadow: var(--schatten); }
.field input, .field select, .field textarea { border-radius: var(--r-s); }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 3px rgba(0,183,181,.22); }
.phone { border-radius: 26px; }
.phone::before { border-radius: 0 0 8px 8px; }   /* Kerbe, nicht Gehäuse */
.trend { border-radius: var(--r); }

/* Eckwinkel rücken in die Rundung hinein. */
.mini::before { top: 5px; left: 5px; }
.mini::after  { bottom: 5px; right: 5px; }
.eck::before  { top: 6px; left: 6px; }
.eck::after   { bottom: 6px; right: 6px; }

/* ── Hero: Bühne links, Instrument rechts ─────────────────────────── */
.hero-film { border-radius: 18px 0 0 18px; }
.hero-top { border-bottom-color: transparent; }
/* Merkmale als Vertrauenszeile mit Haken statt Punkten. */
.hero-chips { gap: .45rem .9rem; margin-top: 1.1rem; }
.chip { border: 0; padding: 0; text-transform: none; letter-spacing: 0; font-family: var(--font-t); font-size: .88rem; color: var(--hero-fg-2); background: transparent; gap: .4rem; }
.chip::before {
  content: "✓"; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(var(--hero-accent-rgb), .14); color: var(--hero-accent);
  font-size: .7rem; font-weight: 700; display: grid; place-items: center;
}
/* Der Erklärknopf wird zum leisen Zweitweg. */
.hw-open {
  background: transparent; color: var(--hero-fg); border: 1px solid var(--hero-line);
  border-radius: 999px; box-shadow: none; margin-top: 1rem;
}
.hw-open:hover { background: rgba(var(--hero-accent-rgb), .08); border-color: var(--hero-accent); }
.hw-open .play { background: var(--hero-accent); color: var(--hero-accent-on); border-radius: 50%; }

/* Die drei Einstiege: ein Aktionsblock, kein Band mehr. */
.starter {
  background: transparent; border-top: 0; box-shadow: none;
  margin: clamp(1.1rem, 2.8vh, 1.8rem) 0 0; padding: 0;
  gap: clamp(.55rem, 1vw, .8rem);
}
.starter-label {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  margin-bottom: .1rem;
}
.starter-label > span:first-child { font-weight: 600; font-size: .95rem; color: var(--hero-fg); }
.starter-label .mono { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hero-accent); }
.starter-item {
  border-radius: var(--r); border: 1px solid var(--hero-line);
  background: var(--paper); box-shadow: var(--schatten);
}
[data-theme="night"] .starter-item { background: var(--bg-raised); }
.starter-item:hover, .starter-item:focus-visible { box-shadow: var(--schatten-hoch); border-color: var(--hero-accent); }
.starter-item.ist-haupt { background: var(--grad); border-color: transparent; box-shadow: var(--glow); }
.starter-item.ist-haupt:hover, .starter-item.ist-haupt:focus-visible { background: var(--grad); border-color: transparent; filter: brightness(1.07); }
.starter-item.ist-haupt:hover .s-go { background: #FFFFFF; color: var(--teal-deep); }
body.angemeldet .starter-item.ist-haupt,
body.angemeldet .starter-dash { background: var(--gruen-fuell); box-shadow: var(--gruen-schein); }
.s-ico-wrap { border-radius: var(--r-s); }
.s-go { border-radius: 50%; }
.s-tipp { background: var(--hero-fg); color: var(--hero-bg); }

/* ── Live-Feed als Leitstelle ─────────────────────────────────────
   Der Bereich war fest auf Tinte gesetzt und blieb damit auch im
   Hellmodus dunkel – der Umschalter hatte hier keine Wirkung. Er
   folgt jetzt dem Thema: derselbe Aufbau, dieselben Leuchtpunkte,
   nur der Grund wechselt mit. Die Zahlen brauchen dafür zwei
   Verläufe, weil das helle Türkis auf Weiss nur 2,2:1 erreicht. */
.feed {
  background:
    radial-gradient(55% 70% at 85% 15%, rgba(0,183,181,.10), transparent 60%),
    radial-gradient(40% 50% at 10% 90%, rgba(0,112,122,.07), transparent 60%),
    var(--bg);
  --zahl-grad: linear-gradient(90deg, #00707A 0%, #00545E 100%);
  --feed-zeit: #B23F20;
}
[data-theme="night"] .feed {
  background:
    radial-gradient(55% 70% at 85% 15%, rgba(0,183,181,.20), transparent 60%),
    radial-gradient(40% 50% at 10% 90%, rgba(0,112,122,.18), transparent 60%),
    var(--ink);
  --zahl-grad: linear-gradient(90deg, #4FD6D4 0%, #00B7B5 100%);
  --feed-zeit: #F49A80;
}
.feed .display em, .feed .stat-num {
  background: var(--zahl-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.feed .stat-lead { border-top: 2px solid var(--accent); }
.feed .stat-rule { background: var(--line); border-radius: 999px; overflow: hidden; }
.feed .stat-rule span { background: var(--zahl-grad); }
.fcard {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(.9rem, 1.6vw, 1.15rem) clamp(1rem, 1.8vw, 1.3rem);
  box-shadow: var(--schatten);
}
[data-theme="night"] .fcard {
  background: rgba(233,241,242,.045); border-color: rgba(233,241,242,.12);
  box-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.fcard + .fcard { margin-top: .6rem; }
.fbadge.time { color: var(--feed-zeit); }
.feed .fc-link { background: var(--line-hard); }
[data-theme="night"] .feed .fc-link { background: rgba(233,241,242,.28); }
.partner {
  background: rgba(0,183,181,.09); border: 1px solid rgba(0,112,122,.28);
  border-radius: var(--r); border-left-width: 1px;
}
[data-theme="night"] .partner { background: rgba(0,183,181,.10); border-color: rgba(0,183,181,.32); }

/* ── App-Bereich: hell, Geräte auf Glanz ──────────────────────────── */
.app { background: var(--bg); }
.app-net { opacity: .55; }

/* ── Fuss ─────────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--line); background: var(--bg-raised); }
.foot-col-title { border-bottom: 0; padding-bottom: .3rem; }
.foot-social { border-radius: 50%; }

/* ── Konsole ──────────────────────────────────────────────────────── */
.kons-nav a { border-radius: var(--r-s); }
.kons-marke-zeichen, .kons-kuerzel, .mast-kuerzel { border-radius: var(--r-s); }
.kons-schritte li.ist-jetzt::before { box-shadow: 0 0 0 4px rgba(0,183,181,.18); }

/* ── Formulare ────────────────────────────────────────────────────── */
.ob-kopf { border-bottom-color: transparent; box-shadow: 0 8px 24px -20px rgba(11,20,24,.35); }
.ob-fuss { border-top: 1px solid var(--line); }
.wiz-line { border-radius: 999px; }
.wiz-chip.jetzt { background: var(--grad); border-color: transparent; }

@media (max-width: 900px) {
  .hero-film { border-radius: var(--r); }
  .starter { margin-top: clamp(1rem, 2.4vh, 1.4rem); }
}

/* ── Nachtmodus: Hover der Einstiege ──────────────────────────────
   `[data-theme="night"] .starter-item` und `.starter-item:hover` haben
   dieselbe Spezifität; die Nachtregel steht später und gewann. Der
   Hintergrund blieb dunkel, die Schrift wurde trotzdem auf
   --hero-accent-on umgestellt – schwarz auf schwarz. Der Zustand
   braucht darum eine eigene Regel für beide Themen. */
[data-theme="night"] .starter-item:hover,
[data-theme="night"] .starter-item:focus-visible {
  background: var(--hero-accent);
  border-color: var(--hero-accent);
  color: var(--hero-accent-on);
}
[data-theme="night"] .starter-item.ist-haupt,
[data-theme="night"] .starter-item.ist-haupt:hover,
[data-theme="night"] .starter-item.ist-haupt:focus-visible { background: var(--grad); border-color: transparent; }
[data-theme="night"] body.angemeldet .starter-item.ist-haupt,
[data-theme="night"] body.angemeldet .starter-dash { background: var(--gruen-fuell); }

/* ── App-Geräte auf dem Handy ─────────────────────────────────────
   Drei feste Breiten ergaben 372 px in einer 338 px breiten Spalte –
   die rechte Ansicht wurde abgeschnitten. Statt alle drei kleiner zu
   rechnen (dann ist die Oberfläche der App nicht mehr zu erkennen)
   liegen sie jetzt in einer Wischleiste: gleich gross, deutlich
   grösser als vorher, eine nach der anderen einrastend.

   Das Neigen beim Überfahren entfällt hier: Auf einem Tastbildschirm
   löst die erste Berührung den Hover aus, und die seitlichen Geräte
   blieben verschoben stehen. */
@media (max-width: 900px) {
  /* Die Spalte darf nicht mehr von der Gerätereihe aufgeblasen werden:
     „1fr" hat min-content als Untergrenze, und die Reihe war 372 px
     breit – dadurch stand auch der Fliesstext 15 px über dem rechten
     Fensterrand und wurde vom overflow:hidden des Bereichs gekappt. */
  .app-grid { grid-template-columns: minmax(0, 1fr); }
  .app-text, .app-geraete { min-width: 0; }
  .app-geraete {
    justify-content: flex-start;
    gap: clamp(.7rem, 3vw, 1.1rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1);
    padding: 8px var(--pad) 1.6rem;
  }
  .app-geraete::-webkit-scrollbar { display: none; }
  .phone, .phone.vorn {
    width: min(52vw, 210px);
    scroll-snap-align: center;
    box-shadow: 0 10px 26px rgba(0,0,0,.16);
  }
  .phone.seite { opacity: 1; }
  .app-geraete:hover .phone.links,
  .app-geraete:hover .phone.rechts { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   § Fuss

   Der Fuss ist im Umschaltbetrieb ein eigener Bildschirm – 800 px hoch
   bei 285 px Inhalt. Das sah nicht luftig aus, sondern unfertig. Er
   bekommt jetzt drei Zonen, die die Höhe auch rechtfertigen:

   1. Ein Abschlussband mit dem Versprechen und den beiden Wegen
      (Preis rechnen / Partner werden) – die letzte Gelegenheit auf
      der Seite, und damit die wichtigste.
   2. Das Hauptraster: links die Marke mit Anspruch, drei Belegen und
      den beiden App-Läden; rechts vier Spalten statt drei, die vierte
      mit Anschrift und E-Mail.
   3. Die Schlusszeile mit Rechtsstand, Sprachwahl und Netzwerken.
   ═══════════════════════════════════════════════════════════════════ */
.site-foot {
  justify-content: center;
  gap: clamp(1.4rem, 3.4vh, 2.6rem);
  padding: calc(var(--nav-h) + clamp(1.2rem, 3vh, 2.2rem)) var(--pad) clamp(1.2rem, 3vh, 1.8rem);
}

/* ── 1. Abschlussband ─────────────────────────────────────────── */
.foot-band {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.1rem, 3vw, 2.5rem);
  padding: clamp(1.3rem, 3.2vh, 2.2rem) clamp(1.3rem, 3vw, 2.4rem);
  border-radius: var(--r);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(0,183,181,.22), transparent 60%),
    var(--ink);
  color: #E9F1F2;
}
.foot-kicker { margin: 0 0 .5rem; }
.foot-kicker .mono {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(233,241,242,.62);
}
.foot-kicker .mono::before {
  content: ""; width: 18px; height: 1px;
  background: linear-gradient(90deg, var(--teal), transparent);
}
.foot-band .foot-claim { margin: 0; color: #E9F1F2; max-width: 18ch; }
.foot-band .foot-claim em { color: var(--teal); }
.foot-band-aktion { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.foot-cta { margin-top: 0; padding: .85rem 1.5rem; font-weight: 600; }
.foot-cta-zweit {
  display: inline-flex; align-items: center; padding: .8rem 1.35rem;
  border: 1px solid rgba(233,241,242,.34); border-radius: 999px;
  color: #E9F1F2; font-size: .92rem; font-weight: 500;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.foot-cta-zweit:hover { background: rgba(233,241,242,.1); border-color: rgba(233,241,242,.6); }

/* ── 2. Hauptraster ───────────────────────────────────────────── */
/* Fünf Spalten in einer Reihe statt zwei Blöcke mit verschachteltem
   Raster: Bei vier Linkspalten in einem 1,55fr-Block blieben je 130 px
   übrig – „Nutzungsbedingungen" lief über und schob sich unter die
   Anschrift. `display: contents` löst den Zwischenbehälter auf, die
   Spalten hängen direkt im Hauptraster und teilen dessen Breite. */
.foot-grid {
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.8rem);
}
.foot-cols { display: contents; }
.foot-links a { align-items: baseline; max-width: 100%; }   /* lange Titel dürfen umbrechen */
.foot-marke { display: flex; flex-direction: column; align-items: flex-start; }
.foot-tagline { margin: 1rem 0 0; }
.foot-punkte {
  list-style: none; margin: clamp(.9rem, 2.2vh, 1.3rem) 0 0; padding: 0;
  display: grid; gap: .45rem;
}
.foot-punkte li {
  display: flex; align-items: center; gap: .55rem;
  font-size: .88rem; color: var(--text-2);
}
.foot-punkte li::before {
  content: "✓"; flex: none;
  width: 17px; height: 17px; border-radius: 50%;
  background: rgba(0,183,181,.16); color: var(--accent);
  font-size: .62rem; font-weight: 700; display: grid; place-items: center;
}
.foot-stores { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: clamp(1rem, 2.4vh, 1.5rem); }
.foot-store {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .9rem .5rem .75rem;
  border: 1px solid var(--line-hard); border-radius: var(--r-s);
  color: var(--text); font-size: .88rem; font-weight: 600; line-height: 1.1;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.foot-store:hover { background: var(--hover-wash); border-color: var(--accent); }
.foot-store svg { width: 17px; height: 17px; flex: none; }
.foot-store small {
  display: block; font-family: var(--font-m); font-weight: 400;
  font-size: .5rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
}

.foot-cols { grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(.9rem, 2.2vw, 1.8rem); }
.foot-kontakt .foot-mail {
  display: inline-block; font-size: .9rem; color: var(--accent);
  border-bottom: 1px solid transparent; transition: border-color .25s var(--ease);
}
.foot-kontakt .foot-mail:hover { border-bottom-color: var(--accent); }
.foot-adresse { margin: .6rem 0 0; font-size: .86rem; color: var(--text-3); line-height: 1.6; }

/* ── 3. Schlusszeile ──────────────────────────────────────────── */
.foot-bottom { margin-top: 0; gap: .8rem 1.2rem; }
.foot-lang { margin-left: auto; }
.foot-socials { margin-left: 0; }

@media (max-width: 900px) {
  .foot-band { flex-direction: column; align-items: flex-start; }
  .foot-band-aktion { margin-left: 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem,3vw,1.8rem); }
  .foot-lang { margin-left: 0; order: 3; }
  .foot-socials { margin-left: auto; }
}
@media (max-width: 520px) {
  .foot-cols { grid-template-columns: 1fr; }
  .foot-stores { display: grid; grid-template-columns: 1fr; }
}

/* Im Dunkelmodus liegt das Abschlussband auf fast gleichem Grund –
   eine Kante und etwas mehr Schein trennen es wieder ab. */
[data-theme="night"] .foot-band {
  border: 1px solid rgba(0,183,181,.28);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(0,183,181,.26), transparent 62%),
    #101D22;
}

/* ═══════════════════════════════════════════════════════════════════
   § Angemeldet: Hauptaktion und Kennzahlen

   Zwei Rückmeldungen: Der Dashboard-Knopf war zu dünn, sein Symbol
   verschwand, und die Kennzahlen daneben waren nicht zu lesen.

   Beim Knopf lag es an der Symbolfläche – weisse Schrift auf halb-
   durchsichtigem Weiss auf Grün ergibt kaum Kontrast. Sie ist jetzt
   deckend weiss mit dunkelgrünem Symbol; das ist die stärkste
   Trennung, die auf dieser Fläche möglich ist.

   Bei den Kennzahlen lag es an der Beschriftung: 8 px Monospace in
   Versalien auf 46 % Deckung ist eine Marke, keine Beschriftung. Sie
   sind jetzt Karten mit Symbol, lesbarem Namen (11,5 px Fliessschrift)
   und einem doppelt so hohen Bild.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Die Hauptaktion ──────────────────────────────────────────── */
body.angemeldet .starter-dash {
  padding: clamp(.95rem, 2.3vh, 1.4rem) clamp(1rem, 1.5vw, 1.35rem);
  border: 0; color: #FFFFFF;
  align-items: center;
  gap: clamp(.8rem, 1.5vw, 1.15rem);
}
body.angemeldet .starter-dash:hover,
body.angemeldet .starter-dash:focus-visible {
  background: var(--gruen-fuell); filter: brightness(1.08);
  box-shadow: 0 18px 40px -12px rgba(47,125,87,.62);
}
.starter-dash .s-ico-wrap {
  width: clamp(38px, 3vw, 46px); height: clamp(38px, 3vw, 46px);
  background: #FFFFFF; border-color: transparent; border-radius: 11px;
}
body.angemeldet .starter-dash:hover .s-ico-wrap,
body.angemeldet .starter-dash:focus-visible .s-ico-wrap { background: #FFFFFF; border-color: transparent; }
.starter-dash .s-ico,
body.angemeldet .starter-dash:hover .s-ico { color: var(--gruen-tief, #1E5C3F); width: 22px; height: 22px; stroke-width: 1.9; }
.starter-dash .s-text { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.starter-dash .s-label {
  margin-top: 0; font-family: var(--font-d); font-weight: 600;
  font-size: clamp(1.02rem, 1.25vw, 1.22rem); letter-spacing: -.018em;
  line-height: 1.15; color: #FFFFFF;
}
.starter-dash .s-sub {
  font-size: clamp(.78rem, .9vw, .86rem); line-height: 1.35;
  color: rgba(255,255,255,.82);
}
.starter-dash .s-go {
  margin-left: auto; align-self: center; width: 34px; height: 34px;
  background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.42); color: #FFFFFF;
}
body.angemeldet .starter-dash:hover .s-go,
body.angemeldet .starter-dash:focus-visible .s-go { background: #FFFFFF; border-color: #FFFFFF; color: var(--gruen-tief, #1E5C3F); }

/* ── Die Kennzahlen ───────────────────────────────────────────── */
.mini-reihe {
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(.45rem, .9vw, .7rem);
  max-width: 36rem;
}
.mini {
  gap: .55rem; padding: clamp(.75rem, 1.6vh, .95rem) clamp(.7rem, 1vw, .9rem);
  border-radius: var(--r); border: 1px solid var(--hero-line);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(11,20,24,.04), 0 14px 32px -20px rgba(var(--hero-accent-rgb), .45);
}
[data-theme="night"] .mini { background: rgba(233,241,242,.045); }
.mini::before { top: 6px; left: 6px; }
.mini::after  { bottom: 6px; right: 6px; }
.mini-kopf { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.mini-sym {
  width: 23px; height: 23px; flex: none; border-radius: 7px;
  display: grid; place-items: center;
  background: rgba(var(--hero-accent-rgb), .14); color: var(--hero-accent);
}
.mini-sym svg { width: 13px; height: 13px; }
.mini-name {
  font-family: var(--font-t); font-size: .72rem; letter-spacing: 0;
  text-transform: none; line-height: 1.25; color: var(--hero-fg-2);
  min-width: 0;
}
.mini-wert {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -.03em;
  display: flex; align-items: baseline; gap: .2rem; flex-wrap: wrap;
}
.mini-wert small { font-size: .52em; font-weight: 500; color: var(--hero-fg-3); letter-spacing: 0; }
.mini svg.mini-bild { width: 100%; height: 28px; display: block; overflow: visible; }
.mini-linie { stroke-width: 2.1; }
.mini-flaeche { opacity: .14; }
.mini-spur { fill: var(--hero-accent); opacity: .16; }

@media (max-width: 620px) {
  .uk-fakten { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mini-reihe { grid-template-columns: 1fr 1fr; max-width: none; }
  .mini:last-child { display: none; }
}

/* Sprungmarke: für Tastatur und Screenreader der Weg an der Navigation
   vorbei. Sichtbar nur, solange sie den Fokus hat. */
.zum-inhalt {
  position: absolute; left: .5rem; top: .5rem; z-index: 2000;
  transform: translateY(-160%);
  padding: .7rem 1.1rem; border-radius: 999px;
  background: var(--accent); color: #FFFFFF; font-weight: 600; font-size: .9rem;
  transition: transform .2s var(--ease);
}
.zum-inhalt:focus { transform: translateY(0); }

/* ── Live-Feed: Grössen an die übrigen Bereiche angeglichen ───────
   Nachgemessen bei 1280 px: Die grosse Zahl stand auf 92,8 px – mehr
   als die Seitenüberschrift (55 px) und mehr als die Abschnitts-
   überschrift direkt daneben (49,9 px). Damit war nicht der Abschnitt
   wichtig, sondern eine einzelne Zahl, und der Rest zerfiel daneben.

   Die Zahl ordnet sich jetzt der Abschnittsüberschrift unter, die
   beiden kleinen folgen im selben Verhältnis, und die Karten werden
   knapper: Vier Einträge sollen als Liste lesbar sein, nicht als vier
   Kacheln. Beschriftungen gehen im Gegenzug von 10 auf 11 px – sie
   waren das kleinste Schriftbild der ganzen Seite. */
.feed .stat-lead { padding-top: .6rem; }
.feed .stat-lead .stat-num { font-size: clamp(2.2rem, 4.1vw, 3.4rem); line-height: .88; letter-spacing: -.04em; }
.feed .stat-lead .stat-label { margin-top: .4rem; }
.feed .stat-pair { gap: clamp(.8rem, 2vw, 1.5rem); margin-top: clamp(.8rem, 1.8vh, 1.2rem); }
.feed .stat-sm .stat-num { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: .95; letter-spacing: -.03em; }
.feed .stat-label { font-size: .6875rem; letter-spacing: .12em; color: var(--text-2); }
.feed .stat-rule { margin-top: .5rem; }

.fcard {
  padding: clamp(.7rem, 1.1vw, .95rem) clamp(.85rem, 1.3vw, 1.15rem);
  gap: .55rem;
}
.fcard + .fcard { margin-top: .45rem; }
.fc-city { font-size: clamp(1rem, 1.5vw, 1.25rem); letter-spacing: -.02em; }
.fc-route { gap: clamp(.6rem, 1.4vw, 1rem); }
.fbadge { padding: 3px 8px; font-size: .5625rem; }
.feed-grid { gap: clamp(1.6rem, 3.4vw, 3.2rem); }
.partner { padding: clamp(.9rem, 1.8vh, 1.3rem) clamp(1rem, 2vw, 1.6rem); margin-top: clamp(.9rem, 2.2vh, 1.5rem); }
.partner-title { font-size: clamp(1rem, 1.7vw, 1.2rem); }
.partner-sub { font-size: .88rem; }

/* Rechts und unten derselbe Abstand – ein Rand, der auf einer Seite
   anders ist als auf der anderen, liest sich als Fehler. Oben schliesst
   der Film an die Kopfzeile an. Die Breite rechnet den unteren Abstand
   mit, damit das Seitenverhältnis 3:4 der Clips exakt bleibt und nichts
   abgeschnitten wird. */
.hero-film { bottom: var(--film-rand); border-radius: 16px; }
@media (max-width: 900px) { .hero-film { border-radius: var(--r); } }

/* ── Erklärfenster ────────────────────────────────────────────────
   Die Zeichnungen steckten noch in der Kalksteinpalette von früher –
   Sandtöne, harte Ecken, feste Werte. Sie nehmen jetzt dieselben
   Variablen wie der Rest der Seite und wechseln damit auch das Thema
   mit. Der Rahmen bekommt die Formensprache der Plattform: gerundete
   Flächen, Pillen für Knöpfe, Verlauf für den Fortschritt. */
.hw-panel { border-radius: var(--r); overflow: hidden; box-shadow: var(--schatten-hoch); }
.hw-head { gap: clamp(.7rem, 1.6vw, 1.1rem); align-items: center; }
.hw-logo { flex: none; }
.hw-head > div { min-width: 0; }
.hw-x { border-radius: 50%; }
.hw-x:hover { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.hw-mark {
  border-radius: 999px; padding: .22rem .6rem;
  background: rgba(0,183,181,.12); color: var(--accent);
}
.hw-btn { border-radius: 50%; }
.hw-btn:hover { background: var(--grad); border-color: transparent; color: #FFFFFF; }
.hw-seg { border-radius: 999px; overflow: hidden; }
.hw-seg i { background: var(--grad); }
.hw-art svg { overflow: visible; }

/* Auf dunklem Grund sind die Zeichnungen sonst zu blass: Die Flächen
   dürfen etwas heller stehen als der Fenstergrund. */
[data-theme="night"] #howto .hw-stage { background: #101D22; }

/* ═══════════════════════════════════════════════════════════════════
   § Umzugskarte — „Meine Umzüge"

   Rückmeldung zur App: Nach der Analyse steht der Umzug als Stapel
   gleich aussehender grauer Pillen da, und die Details liegen hinter
   fünf identischen Klappen, die zugeklappt keinen einzigen Wert
   zeigen. Man sieht viel und erfährt wenig.

   Die neue Karte sortiert dieselben Angaben nach Rang:

   1  Route als Überschrift – ein Umzug ist eine Strecke, keine
      Auftragsnummer. Die Nummer steht klein und einzeilig daneben.
   2  Der Fixpreis bekommt eine eigene Spalte mit eigener Fläche.
   3  Vier Messwerte als Reihe: Symbol, grosse Zahl, kleine Einheit,
      eine Zeile Zusammenhang. Keine zwei Werte in derselben Pille.
   4  Eine liegende Spur zeigt den Stand – Punkt, Wort und Platz, nie
      nur Farbe.
   5  Die Details öffnen in einem Zug; jeder Abschnitt trägt seine
      Werte sofort. Balken und Anteile sind einfarbig und direkt
      beschriftet, es gibt also nichts zu entschlüsseln.
   ═══════════════════════════════════════════════════════════════════ */
.kons-karten { margin-bottom: clamp(1.4rem,3.5vh,2.4rem); }
.uk-liste { display: grid; gap: clamp(.6rem,1.3vw,.85rem); }

.uk {
  display: grid;
  grid-template-columns: minmax(0,1fr) 15.5rem;
  gap: 0 clamp(.9rem,1.8vw,1.4rem);
  padding: clamp(.85rem,1.8vw,1.2rem);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg); box-shadow: var(--schatten);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.uk:hover { box-shadow: var(--schatten-hoch); }
.uk-haupt { min-width: 0; }

/* Kopf: Zustand links, Nummer rechts – beide klein, damit die Route
   die Überschrift bleibt. */
.uk-kopf { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.uk-nr {
  margin-left: auto; font-family: var(--font-m); font-size: .625rem;
  letter-spacing: .06em; color: var(--text-3);
}
.uk-nr::before { content: "#"; opacity: .5; }

.uk-weg {
  display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .6rem;
  margin: 0; font-family: var(--font-d); font-weight: 600;
  font-size: clamp(1.05rem,1.9vw,1.3rem); letter-spacing: -.022em; line-height: 1.15;
}
.uk-weg i { display: inline-flex; color: var(--accent); }
.uk-weg i svg { width: 17px; height: 17px; }
/* Datum, Typ und Grösse sind Lesetext, keine Beschriftung: Sie stehen
   im Fliesston, nicht im blassen Ton der Etiketten (3,1:1 → 6,5:1). */
.uk-unter { margin: .2rem 0 0; font-size: .82rem; color: var(--text-2); }
.uk-unter b, .uk-unter span { font-weight: inherit; }

/* Die vier Messwerte. Die Zahl trägt die Zeile, das Etikett steht
   klein darüber, der Zusammenhang klein darunter. */
.uk-fakten {
  /* Feste vier Spalten statt auto-fit: Bei auto-fit rutschte der vierte
     Wert in eine zweite Reihe und liess eine graue Leerzelle stehen. */
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px; margin: clamp(.7rem,1.5vw,.9rem) 0 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--r-s); overflow: hidden;
}
.uk-fakt { background: var(--bg); padding: .5rem .65rem .55rem; min-width: 0; }
.uk-fakt-sym {
  display: grid; place-items: center; width: 21px; height: 21px; margin-bottom: .25rem;
  border-radius: 6px; background: var(--mess-weich); color: var(--accent);
}
.uk-fakt-sym svg { width: 12px; height: 12px; }
.uk-fakt dt {
  font-family: var(--font-m); font-size: .5rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}
.uk-fakt dd {
  margin: .1rem 0 0; font-family: var(--font-d); font-weight: 600;
  font-size: 1.15rem; letter-spacing: -.03em; line-height: 1.05; color: var(--text);
}
.uk-fakt dd small { font-size: .62rem; font-weight: 500; color: var(--text-3); margin-left: .22rem; letter-spacing: 0; }
.uk-fakt p b { font-weight: 500; }
/* Die Zusatzzeile darf umbrechen: «1 Std. 25 Min. Fahrzeit» passt auf
   einem Telefon nicht in eine Zeile, und abgeschnitten sagt sie nichts
   mehr. Im Raster ziehen die Nachbarn mit. */
.uk-fakt p {
  margin: .15rem 0 0; font-size: .72rem; color: var(--text-2);
  line-height: 1.25; overflow-wrap: anywhere;
}

/* Woraus sich der Fixpreis zusammensetzt – Teil und Betrag, direkt
   unter der Summe. «nicht gebucht» steht ausdrücklich da: Eine Zeile,
   die fehlt, beantwortet die Frage nach der Reinigung nicht. */
.uk-teile { list-style: none; margin: .5rem 0 0; padding: .45rem 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: .18rem; width: 100%; }
.uk-teile li { display: flex; align-items: baseline; gap: .6rem; font-size: .78rem; color: var(--text-2); }
.uk-teile li b { margin-left: auto; font-family: var(--font-m); font-size: .76rem; font-weight: 500; color: var(--text); white-space: nowrap; }
/* «nicht gebucht» ist eine Antwort, keine Fussnote: Es steht so
   lesbar da wie ein gebuchter Posten (3,0:1 → 6,0:1), nur ohne
   Betragsgewicht. */
.uk-teile li.ist-ohne b { font-family: var(--font-t); font-size: .74rem; color: var(--text-2); }

/* Preisspalte: eigene Fläche, damit die Zahl nicht zwischen den
   Messwerten steht. */
.uk-preis {
  display: flex; flex-direction: column; align-items: flex-start; gap: .12rem;
  padding: clamp(.7rem,1.4vw,.9rem);
  border-radius: var(--r-s); background: var(--bg-raised); border: 1px solid var(--line-soft);
  align-self: start;
}
.uk-etikett {
  font-family: var(--font-m); font-size: .5rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}
.uk-preis-wert {
  margin: .12rem 0 0; font-family: var(--font-d); font-weight: 600;
  font-size: clamp(1.4rem,2.5vw,1.72rem); letter-spacing: -.04em; line-height: 1;
  color: var(--text); white-space: nowrap;
}
.uk-preis-wert small {
  font-size: .5em; font-weight: 500; letter-spacing: 0;
  color: var(--text-3); margin-right: .3rem; vertical-align: .18em;
}
.uk-preis-fuss { margin: .4rem 0 0; font-size: .72rem; color: var(--text-3); }
.uk-mehr {
  margin-top: .7rem; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  font-size: .82rem; font-weight: 600;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.uk-mehr:hover { border-color: var(--accent); color: var(--accent); background: var(--hover-wash); }
.uk-mehr svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.uk.ist-offen .uk-mehr svg { transform: rotate(180deg); }

/* Die liegende Spur. Die Linie liegt hinter den Punkten und färbt sich
   bis zur aktuellen Station ein. */
.uk-lauf { grid-column: 1 / -1; margin-top: clamp(.8rem,1.7vw,1rem); padding-top: clamp(.7rem,1.5vw,.9rem); border-top: 1px solid var(--line-soft); }
.uk-spur { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: .5rem; }
.uk-spur li { position: relative; padding-top: 1.15rem; min-width: 0; }
.uk-spur li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--line-hard);
}
.uk-spur li::after {
  content: ""; position: absolute; left: 10px; right: 0; top: 6.5px;
  height: 1.5px; background: var(--line);
}
.uk-spur li:last-child::after { display: none; }
.uk-spur li.ist-fertig::before { background: var(--teal); border-color: var(--teal); }
.uk-spur li.ist-fertig::after { background: var(--teal); }
.uk-spur li.ist-jetzt::before {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.uk-spur li b { display: block; font-size: .8rem; font-weight: 600; color: var(--text-3); }
.uk-spur li span { display: block; font-size: .73rem; color: var(--text-3); margin-top: .05rem; }
.uk-spur li.ist-fertig b, .uk-spur li.ist-jetzt b { color: var(--text); }
.uk-spur li.ist-fertig b::after { content: " ✓"; color: var(--teal-deep); font-size: .8em; }
.uk-spur li.ist-jetzt b::after {
  content: " · jetzt"; color: var(--accent); font-family: var(--font-m);
  font-size: .56rem; letter-spacing: .1em; text-transform: uppercase;
}

.uk-notiz {
  grid-column: 1 / -1; margin: clamp(.7rem,1.5vw,.9rem) 0 0; padding: .55rem .75rem;
  border-radius: var(--r-s); background: var(--mess-weich);
  border: 1px solid var(--mess); border-left: 3px solid var(--mess-tief);
}
.uk-notiz p { margin: .1rem 0 0; font-size: .83rem; color: var(--text-2); }

/* ── Die aufgeklappten Details ───────────────────────────────────── */
.uk-details {
  grid-column: 1 / -1; margin-top: clamp(.8rem,1.7vw,1rem);
  padding-top: clamp(.8rem,1.7vw,1rem); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(.8rem,1.8vw,1.25rem);
  animation: ukAuf .3s var(--ease) both;
}
@keyframes ukAuf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ukd-teil.weit { grid-column: 1 / -1; }
.ukd-teil h4 {
  margin: 0 0 .55rem; font-family: var(--font-m); font-size: .5625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
  padding-bottom: .4rem; border-bottom: 2px solid var(--mess-linie);
}

.ukd-tab { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ukd-tab th {
  text-align: left; font-family: var(--font-m); font-size: .5rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); padding: 0 .6rem .45rem 0; font-weight: 400;
}
.ukd-tab td { padding: .32rem .6rem .32rem 0; border-top: 1px solid var(--line-soft); color: var(--text-2); }
.ukd-tab tbody tr td:first-child { color: var(--text); }
.ukd-tab .z { text-align: right; font-family: var(--font-m); font-size: .78rem; white-space: nowrap; }
.ukd-tab tfoot td { border-top: 1.5px solid var(--line); font-weight: 600; color: var(--text); }

.ukd-preis { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ukd-preis li { display: grid; grid-template-columns: 1fr 4.5rem auto; align-items: center; gap: .6rem; }
.ukd-preis .n { font-size: .85rem; color: var(--text); min-width: 0; }
.ukd-preis .n small { display: block; font-size: .74rem; color: var(--text-3); }
.ukd-preis .b { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.ukd-preis .b i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.ukd-preis .w { font-family: var(--font-m); font-size: .82rem; color: var(--text); white-space: nowrap; }

.ukd-summe {
  display: flex; align-items: baseline; gap: .8rem; margin: .8rem 0 0;
  padding-top: .6rem; border-top: 1.5px solid var(--line);
  font-family: var(--font-m); font-size: .5625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
.ukd-summe b {
  margin-left: auto; font-family: var(--font-d); font-weight: 600; font-size: .95rem;
  letter-spacing: -.02em; text-transform: none; color: var(--text);
}
.ukd-summe.gross b { font-size: 1.15rem; }
.ukd-fuss { margin: .6rem 0 0; font-size: .76rem; color: var(--text-3); }

.ukd-route { list-style: none; margin: 0; padding: 0; }
.ukd-route li { position: relative; padding: 0 0 0 1.5rem; }
.ukd-route li:not(.fahrt)::before {
  content: ""; position: absolute; left: 0; top: .55rem;
  width: 9px; height: 9px; border-radius: 50%; background: var(--bg);
  border: 2px solid var(--accent);
}
.ukd-route li.fahrt {
  margin: .1rem 0; padding: .35rem 0 .35rem 1.5rem;
  font-family: var(--font-m); font-size: .74rem; color: var(--text-3);
  border-left: 1.5px dashed var(--line); margin-left: 4px; padding-left: calc(1.5rem - 4px);
}
.ukd-marke { font-family: var(--font-m); font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.ukd-route b { display: block; font-size: .87rem; font-weight: 600; color: var(--text); }
.ukd-route li span:not(.ukd-marke) { display: block; font-size: .78rem; color: var(--text-3); }

.ukd-paare { margin: 0; display: grid; gap: .3rem; }
.ukd-paare div { display: flex; align-items: baseline; gap: .8rem; border-bottom: 1px solid var(--line-soft); padding-bottom: .4rem; }
.ukd-paare dt { font-family: var(--font-m); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ukd-paare dd { margin: 0 0 0 auto; font-size: .85rem; color: var(--text); text-align: right; }
.ukd-paare dd.mono { font-family: var(--font-m); font-size: .74rem; }

/* Nachtmodus: Die Karte steht auf der angehobenen Fläche, damit sie
   sich vom Grund löst; die Preisspalte geht eine Stufe tiefer. */
[data-theme="night"] .uk { background: var(--bg-raised); }
[data-theme="night"] .uk-fakt { background: var(--bg-raised); }
[data-theme="night"] .uk-preis { background: rgba(0,183,181,.07); border-color: rgba(0,183,181,.2); }
[data-theme="night"] .uk-mehr { background: transparent; }
[data-theme="night"] .ukd-route li:not(.fahrt)::before { background: var(--bg-raised); }
[data-theme="night"] .uk-spur li::before { background: var(--bg-raised); }

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

@media (max-width: 900px) {
  .uk { grid-template-columns: minmax(0,1fr); }
  .uk-fakten { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .uk-preis {
    flex-direction: row; flex-wrap: wrap; align-items: baseline;
    gap: .2rem .8rem; margin-top: clamp(.9rem,2.4vw,1.2rem);
  }
  .uk-preis .uk-etikett { width: 100%; }
  .uk-preis-fuss { margin-top: 0; }
  .uk-mehr { margin-top: .7rem; }
  .uk-details { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 620px) {
  .uk-fakten { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* Vier Stationen nebeneinander werden zu schmal für die Wörter –
     ab hier stehen sie untereinander, Linie links. */
  .uk-spur { grid-template-columns: 1fr; gap: 0; }
  .uk-spur li { padding: .4rem 0 .4rem 1.5rem; }
  .uk-spur li::before { top: .55rem; }
  .uk-spur li::after { left: 4.25px; top: 1.05rem; right: auto; bottom: -.4rem; width: 1.5px; height: auto; }
  .uk-spur li:last-child::after { display: none; }
  .ukd-preis li { grid-template-columns: 1fr auto; }
  .ukd-preis .b { grid-column: 1 / -1; order: 3; }
}

/* Abgelehnt heisst weg: Der Eintrag fährt zusammen und verschwindet.
   Was bleibt, ist eine Zeile darüber – sonst wäre nicht zu sehen,
   warum die Liste kürzer geworden ist. */
.uk.geht {
  height: 0 !important; opacity: 0;
  padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0;
  overflow: hidden;
  transition: height .3s var(--ease), opacity .2s var(--ease),
              padding .3s var(--ease), border-width .3s var(--ease);
}
.zu-spur { list-style: none; margin: clamp(.8rem,1.8vw,1.1rem) 0 0; padding: 0; display: grid; gap: .4rem; }
.zu-spur li {
  font-size: .84rem; color: var(--text-2);
  padding: .5rem .8rem; border-radius: var(--r-s);
  background: var(--bg-raised); border: 1px solid var(--line-soft);
}
.zu-spur li::before { content: "↺"; color: var(--text-3); margin-right: .5rem; }
.kons-leer-zeile { margin: 0; font-size: .9rem; color: var(--text-3); }

/* ═══════════════════════════════════════════════════════════════════
   § Die Karte auf der Firmenseite

   Dieselbe Karte wie beim Kunden – der Betrieb sieht denselben
   Auftrag. Dazu kommen drei Dinge:

   • Die Frist als Kreis, der sich leert. Die Form allein wäre zu
     ungenau, die Zahl allein zu leise; zusammen sind sie beides.
     Unter einer Viertelstunde kommt Rot dazu – nie als einziges
     Zeichen, die Minuten stehen immer daneben.
   • Zwei Antworten statt eines Angebots: annehmen oder ablehnen,
     Letzteres mit Grund (Preis, Datum, Ort).
   • Zwei verschlossene Abschnitte: Kontaktdaten und Originalauf-
     nahmen. Sie sagen nichts darüber, ob ein Auftrag passt, und
     gehen erst mit der Annahme auf.
   ═══════════════════════════════════════════════════════════════════ */
.stand-exklusiv { background: rgba(0,112,122,.12); color: var(--accent); }
.uk-firma.ist-knapp { border-color: color-mix(in srgb, var(--kritisch) 45%, var(--line)); }

/* ── Die Frist als Kreis ──────────────────────────────────────────── */
.uk-uhr {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  margin-bottom: .6rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line-soft);
}
.uk-ring { width: 30px; height: 30px; flex: none; transform: rotate(-90deg); }
.uk-ring circle { fill: none; stroke-width: 3.5; }
.ring-spur { stroke: var(--line-soft); }
.ring-lauf {
  stroke: var(--accent); stroke-linecap: round;
  transition: stroke-dashoffset .6s var(--ease), stroke .3s var(--ease);
}
.uk-firma.ist-knapp .ring-lauf { stroke: var(--kritisch); }
.uk-uhr-text { min-width: 0; line-height: 1.25; }
.uk-uhr-text b { display: block; font-size: .88rem; font-weight: 600; color: var(--text); }
.uk-uhr-text span { display: block; font-size: .74rem; color: var(--text-3); }
.uk-firma.ist-knapp .uk-uhr-text b, .uk-firma.ist-abgelaufen .uk-uhr-text b { color: var(--kritisch); }

/* ── Annehmen oder ablehnen ───────────────────────────────────────── */
.uk-aktion { display: grid; gap: .4rem; width: 100%; margin-top: .7rem; }
.uk-aktion .btn-solid, .uk-aktion .btn-line {
  width: 100%; justify-content: center; padding: .58rem 1rem; font-size: .86rem;
}
.uk-firma .uk-mehr { margin-top: .45rem; }

.uk-grund {
  grid-column: 1 / -1; margin-top: clamp(.9rem,2vw,1.2rem);
  padding-top: clamp(.9rem,2vw,1.2rem); border-top: 1px solid var(--line);
}
.uk-frage { margin: 0 0 .6rem; font-size: .92rem; font-weight: 600; }
.uk-gruende { display: flex; flex-wrap: wrap; gap: .4rem; }
.uk-gruende button {
  padding: .5rem 1.15rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text-2); font-size: .88rem;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.uk-gruende button:hover { border-color: var(--accent); color: var(--accent); }
.uk-gruende button[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.uk-gruende button[aria-checked="true"]::before { content: "✓ "; }
.uk-grund .uk-aktion {
  display: flex; flex-wrap: wrap; width: auto; margin-top: .9rem;
}
.uk-grund .uk-aktion .btn-solid, .uk-grund .uk-aktion .btn-line { width: auto; }

/* Nach der Zusage: Danke, Stand der Dinge, Hinweis. Kein Erfolgsgrün –
   verbindlich ist der Auftrag erst mit der Bestätigung der Kundschaft,
   und ein sattes Grün würde das Gegenteil behaupten. */
.uk-danke {
  grid-column: 1 / -1; margin: clamp(.7rem,1.5vw,.9rem) 0 0;
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .7rem .85rem; border-radius: var(--r-s);
  background: var(--mess-weich); border: 1px solid var(--mess);
}
.uk-danke-sym { display: inline-flex; color: var(--mess-tief); flex: none; margin-top: .05rem; }
.uk-danke-sym svg { width: 17px; height: 17px; }
.uk-danke b { display: block; font-size: .88rem; font-weight: 600; color: var(--text); }
.uk-danke p { margin: .2rem 0 0; font-size: .83rem; color: var(--text-2); }
.uk-danke p.leise { color: var(--text-3); font-size: .78rem; }

/* ── Verschlossene Abschnitte ─────────────────────────────────────── */
.ukd-teil.ist-zu h4 { display: flex; align-items: center; gap: .45rem; }
.ukd-schloss { display: inline-flex; color: var(--text-3); }
.ukd-schloss svg { width: 12px; height: 12px; }
.ukd-sperre {
  display: flex; align-items: flex-start; gap: .6rem; margin: 0;
  padding: .7rem .85rem; border-radius: var(--r-s);
  border: 1px dashed var(--line); background: var(--bg-raised);
  font-size: .84rem; color: var(--text-2);
}
.ukd-sperre svg { width: 16px; height: 16px; flex: none; color: var(--text-3); margin-top: .1rem; }

.ukd-bilder { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ukd-bilder li {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .7rem; border-radius: var(--r-s);
  border: 1px solid var(--line-soft); background: var(--bg-raised);
  font-size: .84rem; color: var(--text-2);
}
.ukd-bilder svg { width: 15px; height: 15px; flex: none; color: var(--accent); }

@media (max-width: 900px) {
  .uk-uhr { border-bottom: 0; padding-bottom: 0; margin-bottom: .2rem; }
  .uk-aktion { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  /* Nebeneinander bricht «Auftrag annehmen» in zwei Zeilen um. */
  .uk-aktion { grid-template-columns: 1fr; }
}

[data-theme="night"] .uk-gruende button { background: transparent; }
[data-theme="night"] .ukd-sperre, [data-theme="night"] .ukd-bilder li { background: rgba(233,241,242,.04); }

/* ── Signal in der Navigation ───────────────────────────────────────
   «Es warten zwei Aufträge, der knappste läuft in neun Minuten ab» –
   das muss von jeder Seite der Konsole aus zu sehen sein, sonst
   verstreicht eine Frist, während jemand den Umsatz anschaut. Der
   Eintrag trägt darum eine zweite Zeile mit der Restzeit und rechts
   die Anzahl. Knapp wird beides rot – die Zahl bleibt daneben
   stehen, Farbe allein sagt hier nichts. */
.kons-nav-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.kons-nav-text small {
  font-family: var(--font-m); font-size: .56rem; letter-spacing: .06em;
  color: rgba(233,241,242,.5); margin-top: .1rem;
}
.kons-nav-text small.ist-knapp { color: #F49A80; }
.kons-signal {
  margin-left: auto; flex: none;
  min-width: 20px; height: 20px; padding: 0 .35rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--teal); color: #04191B;
  font-family: var(--font-m); font-size: .62rem; font-weight: 500;
}
.kons-signal.ist-knapp { background: #F07B5C; color: #2A0B03; }
/* Ohne Frist ist die Zahl eine Angabe, kein Alarm – sie steht darum
   ruhiger als das Signal mit laufender Uhr. */
.kons-signal.ist-ruhig { background: rgba(233,241,242,.14); color: rgba(233,241,242,.85); }
.kons-signal[hidden], .kons-nav-text small[hidden] { display: none; }
/* Schmal rollt die Navigation seitlich. Der Eintrag mit der laufenden
   Frist steht dann vorn – ein Signal, das man erst scrollen muss, ist
   keins. */
@media (max-width: 900px) {
  .kons-nav a:has(.kons-signal) { order: -1; }
  /* In der rollenden Zeile sässe die Zahl am rechten Rand des
     Eintrags – und der ragt aus dem sichtbaren Bereich. Sie rückt
     darum nach vorn, gleich hinter das Symbol. */
  .kons-nav .kons-signal { order: -1; margin-left: 0; margin-right: -.25rem; }
}

/* ── Farbe als Akzent: der Exklusivbereich ──────────────────────────
   Die Konsole ist durchgehend türkis. Exklusiv zugewiesen zu sein ist
   aber ein anderer Zustand als «offen» oder «angenommen»: Da läuft
   eine Uhr, und es gehört gerade mir. Das trägt jetzt die zweite
   Markenfarbe – das Blau der Wortmarke. Es ist nicht erfunden, es war
   schon da.

   Der Akzent sitzt an drei Stellen: eine Kante oben auf der Karte, das
   Zustandsetikett, der Fristring. Wird die Zeit knapp, wechseln Ring
   und Zahl auf Signalrot – dann ist es kein Zustand mehr, sondern eine
   Warnung. Farbe steht dabei nie allein: Etikett, Minuten und Kante
   sagen dasselbe. */
:root {
  --exklusiv:       var(--navy);
  --exklusiv-weich: rgba(28,77,141,.10);
  --exklusiv-linie: rgba(28,77,141,.28);
}
[data-theme="night"] {
  --exklusiv:       var(--navy-hell);
  --exklusiv-weich: rgba(143,184,234,.14);
  --exklusiv-linie: rgba(143,184,234,.30);
}

/* Nur die Zuweisungen, nicht die offenen Umzüge: Die haben keine Uhr
   und keinen Anspruch – sie bleiben in der ruhigen Grundfarbe. */
.uk-firma:not(.uk-offen) {
  border-color: var(--exklusiv-linie);
  box-shadow: inset 0 3px 0 var(--exklusiv), var(--schatten);
}
.uk-firma:not(.uk-offen):hover { box-shadow: inset 0 3px 0 var(--exklusiv), var(--schatten-hoch); }
.uk-firma:not(.uk-offen) .uk-preis { background: var(--exklusiv-weich); border-color: var(--exklusiv-linie); }
.uk-firma:not(.uk-offen) .uk-fakt-sym { background: var(--exklusiv-weich); color: var(--exklusiv); }
.stand-exklusiv { background: var(--exklusiv-weich); color: var(--exklusiv); }
.uk-firma:not(.uk-offen) .ring-lauf { stroke: var(--exklusiv); }

/* Knapp: Ring, Zahl und Kante wechseln gemeinsam auf Signalrot. */
.uk-firma.ist-knapp { border-color: color-mix(in srgb, var(--kritisch) 45%, var(--line)); }
.uk-firma.ist-knapp:not(.uk-offen) { box-shadow: inset 0 3px 0 var(--kritisch), var(--schatten); }
.uk-firma.ist-knapp .ring-lauf, .uk-firma:not(.uk-offen).ist-knapp .ring-lauf { stroke: var(--kritisch); }

[data-theme="night"] .uk-firma:not(.uk-offen) .uk-preis { background: var(--exklusiv-weich); }

/* ── Zahlungsmittel ─────────────────────────────────────────────────
   aimove verkauft die Aufträge und behält fünf Prozent, fällig nach
   verbindlichem Abschluss. Dafür liegt eine Karte hinterlegt – beim
   Zahlungsanbieter, nicht hier: Eine Kartennummer gehört nicht in ein
   Formular von aimove, und darum gibt es hier auch keins. Der Entwurf
   zeigt den hinterlegten und den leeren Zustand. */
.zk {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem .9rem;
  padding: clamp(.75rem,1.6vw,1rem);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-raised);
}
.zk-art {
  flex: none; width: 46px; height: 30px; display: grid; place-items: center;
  border-radius: 5px; background: var(--ink); color: #FFFFFF;
  font-family: var(--font-d); font-weight: 700; font-size: .62rem; letter-spacing: .06em;
}
.zk-art.ist-leer { background: var(--line-soft); color: var(--text-3); }
.zk-nr { min-width: 0; }
.zk-nr b { display: block; font-family: var(--font-m); font-size: .92rem; letter-spacing: .02em; color: var(--text); }
.zk-nr small { display: block; font-size: .76rem; color: var(--text-3); margin-top: .1rem; }
.zk .stand { margin-left: auto; }
.zk .btn-line, .zk .btn-solid { padding: .5rem 1rem; font-size: .84rem; }
.zk.ist-leer .btn-solid { margin-left: auto; }
.zk-fuss { margin: .6rem 0 0; font-size: .78rem; color: var(--text-3); }
@media (max-width: 620px) {
  .zk .stand, .zk.ist-leer .btn-solid { margin-left: 0; }
  .zk-nr { flex: 1 1 100%; }
}
[data-theme="night"] .zk-art { background: rgba(233,241,242,.14); }

/* Provision und Ertrag in der Karte: eine zweite kleine Rechnung
   unter der des Kunden. Der Ertrag trägt die Linie – er ist die Zahl,
   die den Betrieb angeht. */
.uk-teile.ist-ertrag { margin-top: .35rem; padding-top: .35rem; }
.uk-teile.ist-ertrag li.ist-summe { padding-top: .3rem; border-top: 1px solid var(--line); }
.uk-teile.ist-ertrag li.ist-summe span { color: var(--text); font-weight: 600; }
.uk-teile.ist-ertrag li.ist-summe b { font-family: var(--font-d); font-size: .95rem; letter-spacing: -.02em; }

.uk-warnung {
  display: flex; align-items: flex-start; gap: .5rem; width: 100%;
  margin: .6rem 0 0; padding: .55rem .7rem; border-radius: var(--r-s);
  background: var(--kritisch-weich); border: 1px solid color-mix(in srgb, var(--kritisch) 30%, transparent);
  font-size: .78rem; color: var(--text-2);
}
.uk-warnung svg { width: 14px; height: 14px; flex: none; color: var(--kritisch); margin-top: .1rem; }
.uk-warnung a { color: var(--kritisch); text-decoration: underline; text-underline-offset: 2px; }

/* Der Geltungsbereich des Fixpreises – in der ersten Ansicht, nicht im
   Kleingedruckten. Die Kundschaft soll wissen, wofür der Preis steht;
   der Betrieb, was er separat abrechnet. Neutral gehalten: Es ist eine
   Bedingung, keine Warnung. */
.uk-geltung {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: .55rem;
  margin: clamp(.7rem,1.5vw,.9rem) 0 0; padding: .55rem .75rem;
  border-radius: var(--r-s); border: 1px dashed var(--line);
  background: var(--bg-raised);
  font-size: .8rem; line-height: 1.45; color: var(--text-2);
}
.uk-geltung svg { width: 15px; height: 15px; flex: none; color: var(--text-3); margin-top: .12rem; }
.uk-geltung b { color: var(--text); font-weight: 600; }
[data-theme="night"] .uk-geltung { background: rgba(233,241,242,.04); }

/* Die Marke an den neuen Stellen: Sie steht dort als Absender, nicht
   als Schmuck – in der Partnerkarte, im Cookie-Hinweis, im leeren
   Zustand der Konsole und über dem Anspruch der Anmeldeseite. */
.partner .logo-mark { margin-bottom: .5rem; }
.cookiebar h3 .logo-mark { display: inline-block; vertical-align: -2px; margin-right: .35rem; }
.kons-leer .logo-mark { margin: 0 auto .9rem; }
.auth-pitch .logo-mark { margin-bottom: clamp(1rem, 3vh, 1.6rem); }
.hero-gruss .logo-mark { display: block; margin-bottom: .55rem; }

/* ═══════════════════════════════════════════════════════════════════
   § Sofort-Schätzung, Ablauf, Fragen, Checkliste
   Was eine Person braucht, bevor sie bestellt: eine Spanne ohne
   Konto, der Ablauf in fünf Schritten, die Antworten auf die Fragen,
   die sonst den Tab schliessen. Alles aus denselben Bausteinen wie
   der Rest – Haarlinien, Mono-Etiketten, Messfläche als Akzent.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Der Ablauf in fünf Schritten, quer ─────────────────────────── */
.ablauf {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: clamp(.6rem, 1.5vw, 1.2rem);
  border-top: 1px solid var(--line);
}
.ablauf li { position: relative; padding-top: .9rem; min-width: 0; }
.ablauf li::before { content: ""; position: absolute; top: -1px; left: 0; width: 2rem; height: 2px; background: var(--accent); }
.ablauf li .mono { display: block; font-size: .625rem; letter-spacing: .14em; color: var(--accent); }
.ablauf li b { display: block; margin-top: .35rem; font-family: var(--font-d); font-weight: 600; font-size: clamp(.95rem, 1.5vw, 1.1rem); letter-spacing: -.02em; line-height: 1.2; }
.ablauf li span:last-child { display: block; margin-top: .25rem; font-size: .84rem; color: var(--text-2); line-height: 1.45; }

/* ── Fragen: das eingebaute <details> ───────────────────────────── */
.faq-liste { border-top: 1px solid var(--line); max-width: 62rem; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem;
  padding: 1rem 0; font-family: var(--font-d); font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.15rem); letter-spacing: -.015em; line-height: 1.3;
  transition: color .25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { flex: 1; }
.faq summary svg { width: 16px; height: 16px; flex: none; color: var(--accent); transition: transform .3s var(--ease); }
.faq[open] summary svg { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent); }
.faq-a { padding: 0 2.5rem 1.1rem 0; max-width: 66ch; }
.faq-a p { margin: 0 0 .7rem; font-size: .95rem; color: var(--text-2); line-height: 1.6; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.faq-kurz .faq summary { padding: .7rem 0; font-size: .98rem; }
.faq-kurz .faq-a { padding-bottom: .9rem; }
.faq-kurz .faq-a p { font-size: .9rem; }

/* ── Checkliste: Häkchen, die bleiben ───────────────────────────── */
.liste { border-top: 1px solid var(--line); max-width: 62rem; }
.liste-punkt { display: flex; align-items: flex-start; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; line-height: 1.5; cursor: pointer; }
.liste-punkt input { flex: none; width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--teal-deep); }
.liste-punkt input:checked + span { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-hard); }
.sec-mark .liste-stand { margin-left: auto; color: var(--accent); }
.liste-phase.ist-fertig .liste-stand::after { content: " ✓"; }

/* ── Startseite: drei Bildschirmseiten zwischen Feed und App ────── */
.vertrauen, .fragen {
  display: flex; flex-direction: column; justify-content: center; position: relative;
  padding: calc(var(--nav-h) + clamp(1.4rem, 3.5vh, 2.6rem)) var(--pad) clamp(1.6rem, 4vh, 3rem);
}
.vertrauen { background: var(--bg-raised); }
.fragen-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(1.8rem, 4.5vw, 4.5rem); align-items: start; }
.cards-4 { grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: clamp(1rem, 2.5vh, 1.8rem); }
.card-p a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.vertrauen-ablauf { margin-top: clamp(1.2rem, 3vh, 2rem); }
.vertrauen-fuss { margin: clamp(.8rem, 2vh, 1.2rem) 0 0; font-size: .82rem; color: var(--text-3); max-width: 70ch; }
.fragen-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }

/* ── Bestellablauf: Zusatzleistungen, Hilfe, Entwurf, was jetzt passiert ── */
.ob-zusatz { border-top: 1px solid var(--line); }
.ob-zusatz .ob-zeile { cursor: pointer; padding: .75rem 0; border-top: 0; border-bottom: 1px solid var(--line); gap: 1rem; flex-wrap: nowrap; }
.ob-zusatz .ob-zeile > span:first-child { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.ob-zusatz .ob-zeile b { font-weight: 600; font-size: .93rem; }
.ob-zusatz .ob-zeile small { color: var(--text-3); font-size: .8rem; line-height: 1.4; }
.ob-zusatz .ob-schalter { padding: 0; border: 0; flex: none; }
.ob-hilfe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--text-3); }
.ob-hilfe a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ob-danach { margin-top: 1.2rem; }
.ob-ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; counter-reset: schritt; }
.ob-ablauf li { position: relative; padding-left: 2rem; counter-increment: schritt; }
.ob-ablauf li::before {
  content: counter(schritt); position: absolute; left: 0; top: .05rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1.5px solid var(--accent);
  color: var(--accent); font-family: var(--font-m); font-size: .65rem; display: grid; place-items: center;
}
.ob-tipp .ob-ablauf li b { display: block; margin: 0; font-family: var(--font-t); font-size: .9rem; color: var(--text); }
.ob-ablauf li span { display: block; font-size: .84rem; color: var(--text-2); line-height: 1.45; }
.ob-gespeichert p { margin: .3rem 0 0; font-size: .88rem; color: var(--text-2); }
.ob-gespeichert p a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.ob-fuss .ob-spaeter { margin-left: auto; }
.ob-fuss .ob-spaeter ~ .btn-solid { margin-left: 0; }

/* ── Die Kundenkarte: der zugeteilte Betrieb ────────────────────── */
.uk-partner {
  grid-column: 1 / -1; display: flex; gap: .8rem; align-items: flex-start;
  margin-top: .8rem; padding: .85rem 1rem;
  background: var(--mess-weich); border-left: 3px solid var(--mess-tief);
}
.uk-partner-sym svg { width: 18px; height: 18px; color: var(--accent); }
.uk-partner b { display: block; margin-top: .1rem; font-family: var(--font-d); font-weight: 600; font-size: 1rem; letter-spacing: -.02em; }
.uk-partner p { margin: .2rem 0 0; font-size: .82rem; color: var(--text-2); line-height: 1.45; }

@media (max-width: 1080px) {
  .cards-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .fragen-grid { grid-template-columns: 1fr; }
  .ablauf { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .ablauf { grid-template-columns: 1fr; }
  .cards-4 { grid-template-columns: 1fr; }
  .ob-fuss .ob-spaeter { padding: .6rem .9rem; font-size: .8rem; }
  .faq-a { padding-right: 0; }
}

/* ── Der Aufkleber im Film ─────────────────────────────────────────
   Oben rechts, schräg über die Filmkante geklebt – gelesen wird er wie
   ein Preisschild im Laden: «Endreinigung» gross, darunter die
   Garantie, unten die Aufforderung als weisse Pille. Rot, weil es auf
   der ganzen Seite sonst nirgends steht und über jeder Szene – hell
   wie dunkel – heraussticht. Deckend, über beiden Clip-Ebenen. Rechts
   ragt er genau so weit über den Film, wie der Rand zur Fensterkante
   breit ist; mehr würde der Hero abschneiden. */
.film-kleber {
  --kleber-rot: #FF4B3E;
  position: absolute; z-index: 10;
  top: clamp(.9rem, 2.4vh, 1.5rem);
  right: calc(-1 * var(--film-rand, 10px));
  transform: rotate(7deg); transform-origin: 70% 30%;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: .8rem 1.05rem .85rem;
  background: var(--kleber-rot); color: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(0,0,0,.32);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.film-kleber b {
  font-family: var(--font-d); font-weight: 800;
  font-size: clamp(1.35rem, 1.9vw, 1.9rem); letter-spacing: -.03em; line-height: 1;
}
.film-kleber span { margin-top: .2rem; font-size: clamp(.8rem, .95vw, .95rem); font-weight: 600; line-height: 1.2; }
.film-kleber em {
  margin-top: .55rem; font-style: normal;
  font-family: var(--font-m); font-size: clamp(.56rem, .62vw, .66rem); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  background: #fff; color: var(--kleber-rot);
  padding: .3rem .6rem; border-radius: 999px;
}
.film-kleber em::after { content: " →"; }
.film-kleber:hover { transform: rotate(4deg) translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.36); }
.film-kleber:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 900px) {
  .film-kleber { top: .9rem; right: -.75rem; padding: .65rem .85rem .7rem; }
  .film-kleber b { font-size: 1.3rem; }
  .film-kleber span { font-size: .8rem; }
  .film-kleber em { font-size: .56rem; }
}
/* Textspalte und Kopfleiste liegen als Ebenen über dem ganzen Hero,
   auch über dem Film – sonst wäre der Aufkleber darin nicht anklickbar. Die Spalte
   selbst fängt darum keine Klicks, nur ihr Inhalt. */
@media (min-width: 901px) {
  .hero-inner, .hero-top { pointer-events: none; }
  .hero-inner > *, .hero-top > * { pointer-events: auto; }
}

/* ── Fuss: Balken oben, Schlusszeile unten ─────────────────────────
   Im Umschaltbetrieb der Startseite füllt der Fuss ein ganzes Fenster.
   Senkrecht zentriert rutschte der dunkle Balken auf hohen Bildschirmen
   weit nach unten (1920 × 1080: 207 px Leerraum unter der Kopfzeile).
   Jetzt steht er direkt unter der Kopfzeile, die Schlusszeile sitzt am
   unteren Rand, der Raum dazwischen gehört dem Hauptraster. Ausserhalb
   des Umschaltbetriebs braucht der Fuss keinen Abstand für die
   Kopfzeile – er liegt dort nicht unter ihr. */
html.deck .site-foot {
  justify-content: flex-start;
  padding-top: calc(var(--nav-h) + clamp(1rem, 2.6vh, 1.8rem));
}
html.deck .site-foot .foot-bottom { margin-top: auto; }
html:not(.deck) body.start .site-foot { padding-top: clamp(2.4rem, 6vh, 4rem); }
/* Niedrige Fenster im Umschaltbetrieb: Der Fuss muss in eine
   Bildschirmhöhe passen, sonst verschwindet die Schlusszeile unten.
   Die drei Belege und die App-Knöpfe fallen weg – die App hat ihren
   eigenen Abschnitt direkt davor. */
@media (max-height: 760px) {
  html.deck .site-foot { gap: clamp(.9rem, 2.2vh, 1.4rem); }
  html.deck .foot-punkte, html.deck .foot-stores { display: none; }
  html.deck .foot-band { padding-top: clamp(1rem, 2.4vh, 1.5rem); padding-bottom: clamp(1rem, 2.4vh, 1.5rem); }
}

/* ═══════════════════════════════════════════════════════════════════
   § Bestellablauf in fünf Schritten
   Erfassen, Adressen, Liste, Fixpreis, Senden. Dieselben Bausteine wie
   vorher – Kacheln, Regler, Zählwerke, Tipps –, neu verteilt. Neu sind
   der mitlaufende Preis im Fuss, die Auswertung während der Adressen,
   die Preise je Termin und die Reinigung als Schalter im Preis.
   ═══════════════════════════════════════════════════════════════════ */
.ob-ziel { margin: -1.1rem 0 clamp(1.1rem, 2.6vh, 1.6rem); font-family: var(--font-m); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ob-pille.ist-preis span { color: var(--accent); font-weight: 600; }

/* Zimmer und Fläche nebeneinander */
.ob-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); }

/* Methode als drei kompakte Reiter */
.ob-methoden.kompakt { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.ob-methoden.kompakt .ob-methode { padding: .75rem .8rem; gap: .6rem; align-items: center; }
.ob-methoden.kompakt .ob-methode svg { width: 20px; height: 20px; margin: 0; }
.ob-methoden.kompakt .ob-methode h3 { font-size: .95rem; margin: 0; }
.ob-methoden.kompakt .ob-methode p { font-size: .75rem; color: var(--text-3); }
.ob-weg { margin-top: 1rem; }
.ob-weg[hidden] { display: none; }

/* Ablage als Knopf: ein Klick öffnet Galerie oder Kamera */
label.ob-ablage { display: flex; flex-direction: column; align-items: center; gap: .35rem; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
label.ob-ablage b { font-family: var(--font-d); font-weight: 600; font-size: 1rem; color: var(--text); }
label.ob-ablage span { font-size: .85rem; }
label.ob-ablage:hover, label.ob-ablage.ueber { border-color: var(--accent); background: rgba(0,112,122,.05); }
label.ob-ablage.hat-dateien { border-style: solid; border-color: var(--accent); }
.ob-dateien { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.ob-dateien:empty { display: none; }
.ob-dateien li { display: inline-flex; align-items: baseline; gap: .4rem; max-width: 100%; padding: .3rem .55rem; border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-dateien li small { color: var(--text-3); font-size: .7rem; }

/* Auswertung, während die Adressen entstehen */
.ob-analyse { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.1rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--r); font-size: .85rem; color: var(--text-2); }
.ob-analyse[hidden] { display: none; }
.ob-analyse.ist-fertig { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: rgba(0,112,122,.05); color: var(--text); }

/* Liste: Null heisst gestrichen, bleibt aber sichtbar zum Zurückholen */
.ob-eintrag.ist-null .ob-eintrag-name { color: var(--text-3); text-decoration: line-through; }
.ob-hinzu { display: flex; gap: .5rem; margin: .6rem 0 0; }
.ob-hinzu select { flex: 1; min-width: 0; font: inherit; font-size: .9rem; color: var(--text); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 2px; padding: .6rem .7rem; }

/* Termine mit eigenem Preis */
.ob-termin-preis { font-family: var(--font-m); font-size: .72rem; color: var(--text-2); white-space: nowrap; }
.ob-termin-preis.ist-guenstig { color: var(--gut); }
.ob-termin-preis.ist-teuer { color: var(--kritisch); }
.ob-termin-preis.ist-nein { color: var(--kritisch); }
#obTerminPlus { margin-bottom: 1.3rem; }

/* Der Preis: Posten, Reinigung als Schalter, Summe */
.ob-preis-zeile { align-items: center; gap: 1rem; }
.ob-preis-zeile > span:first-child { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.ob-preis-zeile small { font-size: .75rem; color: var(--text-3); }
.ob-preis-zeile b { font-family: var(--font-m); font-weight: 500; color: var(--text); white-space: nowrap; }
.ob-preis-reinigung { cursor: pointer; border-top: 1px solid var(--line-soft); margin-top: .3rem; padding-top: .7rem; }
.ob-preis-reinigung .ob-schalter { padding: 0; border: 0; flex: none; }
.ob-preis-reinigung:not(.ist-an) b { color: var(--text-3); }
.ob-preis-summe b small { font-size: .45em; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.ob-preis-fuss { margin: .5rem 0 0; font-size: .8rem; color: var(--text-3); }

/* Übersicht vor dem Senden */
.ob-uebersicht { margin-bottom: 1.3rem; padding: clamp(.9rem, 2vw, 1.2rem); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-raised); }
.ob-uebersicht .ukd-paare { margin: 0; }
.ob-kontakt { max-width: none; }

/* Fuss: mitlaufender Preis links neben den Knöpfen */
.ob-fusspreis { display: flex; flex-direction: column; line-height: 1.1; }
.ob-fusspreis[hidden] { display: none; }
.ob-fusspreis small { font-family: var(--font-m); font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.ob-fusspreis small[hidden] { display: none; }
.ob-fusspreis b { font-family: var(--font-d); font-weight: 600; font-size: 1.15rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#obWeiter span[hidden] { display: none; }

@media (max-width: 620px) {
  .ob-zwei { grid-template-columns: 1fr; }
  .ob-methoden.kompakt .ob-methode { flex-direction: column; text-align: center; padding: .7rem .4rem; }
  .ob-methoden.kompakt .ob-methode p { display: none; }
  .ob-fuss .ob-inner-fuss { flex-wrap: wrap; row-gap: .5rem; }
  .ob-fusspreis { order: -1; width: 100%; flex-direction: row; align-items: baseline; gap: .5rem; }
  .ob-termin { flex-wrap: wrap; }
}
/* Die Zahl steht in einem <span> – die Etikettregel der Summenzeile
   (.ob-preis-summe span) darf sie nicht klein und in Mono setzen. */
.ob-preis-summe #obPreisSumme { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
/* Handy: Preis und «Später» in der ersten Zeile, Zurück und Weiter in
   der zweiten – sonst rutschte «Weiter» in eine dritte Zeile. */
@media (max-width: 620px) {
  .ob-fusspreis { order: -2; flex: 1 1 55%; width: auto; }
  .ob-fuss .ob-spaeter { order: -1; margin-left: auto; padding: .3rem 0; border: 0; background: none; box-shadow: none; font-size: .8rem; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
  .ob-fuss .wiz-zurueck { padding: .6rem .9rem; }
  .ob-fuss #obWeiter, .ob-fuss #obFertig { margin-left: auto; }
}

/* ── Bestellablauf: Analyse, Kontingent, Inventarliste ──────────── */
.ob-kopf-analyse {
  margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-m); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); padding: .3rem .6rem; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 999px;
}
.ob-kopf-analyse[hidden] { display: none; }
.ob-kopf-analyse:not([hidden]) + .ob-zaehler { margin-left: .6rem; }
@keyframes ob-puls { 50% { opacity: .25; } }

.ob-kontingent { margin: .7rem 0 0; font-size: .8rem; color: var(--text-3); }
.ob-kontingent[hidden] { display: none; }
.ob-kontingent.ist-voll { color: var(--kritisch); font-weight: 600; }
.ob-tor { margin-top: 1rem; }
.ob-tor[hidden] { display: none; }

.ob-warten { display: flex; align-items: center; gap: .9rem; padding: 1.4rem 1rem; margin-bottom: 1rem; border: 1px dashed var(--line-hard); border-radius: var(--r); font-size: .92rem; color: var(--text-2); }
.ob-warten[hidden], #obListeBlock[hidden] { display: none; }
.ob-warten .ob-analyse-balken { width: 7rem; }

/* Zeile der Inventarliste: Name und Menge, darunter die Optionen */
#obErkannt .ob-eintrag { flex-wrap: wrap; row-gap: .45rem; }
.ob-optionen { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .35rem; }
.ob-opt {
  font-size: .75rem; padding: .25rem .6rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-2); background: var(--bg); cursor: pointer; transition: all .2s var(--ease);
}
.ob-opt:hover { border-color: var(--line-hard); color: var(--text); }
.ob-opt[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ob-opt-e[aria-pressed="true"] { background: var(--text-2); border-color: var(--text-2); }
.ob-opt-z { order: -1; }
.ob-opt-z[aria-pressed="true"] { background: var(--kritisch-weich); border-color: color-mix(in srgb, var(--kritisch) 45%, transparent); color: var(--kritisch); font-weight: 600; }
.ob-opt-z[aria-pressed="true"]::before { content: "⚠ "; }
.ob-eintrag.ist-null .ob-optionen { display: none; }

/* Umzugskartons: eigener Kasten, weil die Zahl vom System kommt */
.ob-kartons { margin-top: 1.2rem; }
.ob-karton { padding: .9rem 1rem; border: 1px solid var(--accent); border-radius: var(--r); background: rgba(0,112,122,.05); gap: 1rem; }
.ob-karton .ob-eintrag-name b { font-family: var(--font-d); font-size: 1rem; }
.ob-karton .ob-karton-vorschlag { color: var(--accent); font-family: var(--font-m); font-size: .7rem; letter-spacing: .06em; margin-top: .2rem; }
.ob-karton .ob-zaehlwerk button { width: 34px; font-size: .8rem; }

.ob-bestaetigung {
  margin-top: 1.2rem; padding: 1rem; border: 2px solid var(--accent); border-radius: var(--r);
  background: rgba(0,112,122,.05); font-size: .9rem; color: var(--text);
}
.ob-bestaetigung b { font-weight: 600; }

/* Preis je Termin im Preisschritt */
.ob-terminpreise { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--line); }
.ob-terminpreise:empty { display: none; }
.ob-terminpreise li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }

/* Kartenansicht: Hinweise je Gegenstand */
.ukd-hinweis { display: block; font-size: .72rem; color: var(--text-3); margin-top: .1rem; }
@media (max-width: 620px) {
  .ob-karton { flex-wrap: wrap; }
  .ob-kopf-analyse { font-size: .55rem; padding: .25rem .5rem; }
}

/* ── Bestätigung per Code ───────────────────────────────────────── */
.ob-verif-zeile { display: flex; align-items: center; gap: .5rem; }
.ob-verif-zeile input { flex: 1; min-width: 0; }
.ob-code-knopf { flex: none; padding: .6rem 1rem; font-size: .85rem; white-space: nowrap; }
.ob-code-knopf[hidden] { display: none; }
.ob-verif-ok { flex: none; font-size: .85rem; font-weight: 600; color: var(--gut); white-space: nowrap; }
.ob-verif-ok[hidden] { display: none; }
.ob-verif.ist-ok input { border-color: color-mix(in srgb, var(--gut) 55%, transparent); }

.ob-code-hg {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center; padding: var(--pad);
  background: rgba(11,20,24,.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: wizIn .2s var(--ease) both;
}
.ob-code-hg[hidden] { display: none; }
body.ob-code-offen { overflow: hidden; }
.ob-code {
  position: relative; width: min(100%, 26rem);
  padding: clamp(1.3rem, 4vw, 1.8rem);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.ob-code-zu { position: absolute; top: .8rem; right: .9rem; font-size: 1rem; color: var(--text-3); }
.ob-code-zu:hover { color: var(--text); }
.ob-code-feld {
  width: 100%; padding: .8rem 1rem; text-align: center;
  font-family: var(--font-m); font-size: 1.6rem; letter-spacing: .5em; text-indent: .5em;
  color: var(--text); background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r);
}
.ob-code-feld:focus { outline: none; border-color: var(--accent); }
.ob-code #obCodeFehler { margin: .6rem 0 0; }
.ob-code-entwurf { margin: .7rem 0 0; font-family: var(--font-m); font-size: .7rem; color: var(--text-3); }
.ob-code-aktion { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; }
.ob-code-aktion .btn-solid { flex: 1; justify-content: center; }
.ob-code-aktion .ob-link[disabled] { color: var(--text-3); text-decoration: none; cursor: default; }
@media (max-width: 480px) {
  .ob-verif-zeile { flex-wrap: wrap; }
  .ob-code-knopf { width: 100%; }
}

/* ── Fuss auf Unterseiten ──────────────────────────────────────────
   Dort steht der Fuss als Block im Fluss, nicht als Flex-Spalte – der
   Abstand aus «gap» greift nicht, und das Band «Bereit, wenn du es
   bist» klebte direkt am Logo darunter, die Schlusszeile am Raster. */
body:not(.start) .foot-band { margin-bottom: clamp(2rem, 5vh, 3.2rem); }
body:not(.start) .foot-bottom { margin-top: clamp(1.8rem, 4vh, 2.8rem); }
/* Ein Schlussband ohne Knopf: Text über die volle Breite. */
.band > div:only-child { grid-column: 1 / -1; }

/* ── 04 Sicherheit: drei Karten, darunter der Verweis auf die Fragen ── */
.cards-vertrauen { margin-top: clamp(1rem, 2.5vh, 1.8rem); }
.vertrauen-link { margin: clamp(1.2rem, 3vh, 1.8rem) 0 0; font-size: .95rem; color: var(--text-2); }
.vertrauen-link a { color: var(--accent); font-weight: 600; text-decoration: none; }
.vertrauen-link a:hover { text-decoration: underline; }
.vertrauen-fragen {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem;
  margin-top: clamp(1rem, 2.4vh, 1.6rem); padding-top: clamp(.9rem, 2vh, 1.2rem);
  border-top: 1px solid var(--line);
}
.vertrauen-fragen p { flex: 1 1 26rem; margin: 0; font-size: .92rem; color: var(--text-2); line-height: 1.5; }
.vertrauen-fragen p b { color: var(--text); font-family: var(--font-d); font-weight: 600; }
.vertrauen-fragen .fragen-links { margin: 0; }
/* Niedrige Fenster: 04 muss mit Fragen-Verweis und Bewertungssatz auf
   eine Bildschirmhöhe passen (1024 × 680 lag der Satz 18 px darunter). */
@media (max-height: 720px) and (min-width: 900px) {
  html.deck .cards-vertrauen { margin-top: .6rem; }
  html.deck .vertrauen-ablauf { margin-top: .8rem; }
  html.deck .vertrauen-fragen { margin-top: .7rem; padding-top: .6rem; }
  html.deck .vertrauen-fuss { margin-top: .4rem; }
}

/* ── Erklärfenster: fünfte Staffel und Ladebalken ─────────────────── */
.is-on .d-5 { animation-delay: 2.35s; }
.hw-lade { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.is-on .hw-lade { animation: hwLade 6.5s linear .4s forwards; }
@keyframes hwLade { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .hw-lade { transform: scaleX(.7) !important; } }
/* Die Szenen tragen jetzt längere Texte – die Bühne wächst mit, damit
   die Zeichnung nicht auf ein Drittel schrumpft. */
.hw-stage { min-height: min(64svh, 31rem); }
.hw-art svg { max-height: 19rem; }

/* ── Bestätigen über Google oder Microsoft ─────────────────────────── */
.ob-sozial { margin-bottom: .4rem; }
.ob-sozial .social-btn.ist-an { border-color: var(--gut); background: color-mix(in srgb, var(--gut) 8%, transparent); }
.ob-sozial-ok { margin: .6rem 0 0; font-size: .85rem; font-weight: 600; color: var(--gut); }
.ob-sozial-ok[hidden] { display: none; }
.ob-code .field { margin-bottom: .2rem; }

/* ── Tipps für bessere Aufnahmen ───────────────────────────────────── */
.ob-tipps-knopf { margin-top: .8rem; padding: .55rem 1rem; font-size: .85rem; }
.ob-tipps { width: min(100%, 30rem); max-height: calc(100svh - 2rem); overflow-y: auto; }
.ob-tipps [hidden] { display: none; }
.ob-tipps .ob-ablauf { margin-top: .9rem; }
.ob-tipps .ob-ablauf li b { display: block; font-size: .92rem; }
.ob-foto-knoepfe { margin: .8rem 0 0; gap: .5rem; }
.ob-foto-knoepfe .ob-tipps-knopf { margin-top: 0; cursor: pointer; }
.ob-tipps-geraet { padding: .7rem .9rem; margin-top: .5rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-raised); }
.ob-tipps-geraet b { display: block; font-family: var(--font-d); font-size: .92rem; }
.ob-tipps-geraet p { margin: .2rem 0 0; font-size: .86rem; color: var(--text-2); line-height: 1.45; }

/* ── Aufnahme direkt auf der Seite ─────────────────────────────────── */
.ob-aufnahme {
  position: fixed; inset: 0; z-index: 9100; background: #000; color: #fff;
  display: flex; flex-direction: column;
}
.ob-aufnahme[hidden] { display: none; }
.ob-aufnahme video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ob-aufnahme-blitz { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.ob-aufnahme-blitz.an { animation: ob-blitz .35s ease-out; }
@keyframes ob-blitz { from { opacity: .7; } to { opacity: 0; } }
.ob-aufnahme-kopf, .ob-aufnahme-fuss, .ob-aufnahme-hinweis { position: relative; z-index: 1; }
.ob-aufnahme-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: max(1rem, env(safe-area-inset-top)) 1.1rem 1rem;
  background: linear-gradient(rgba(0,0,0,.55), transparent);
}
.ob-aufnahme-stand { font-family: var(--font-m); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.ob-aufnahme-zu { width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 1.1rem; }
.ob-aufnahme-hinweis { margin: 0 auto; padding: .4rem .8rem; border-radius: 999px; background: rgba(0,0,0,.45); font-size: .82rem; }
.ob-aufnahme-fuss {
  margin-top: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: 1.2rem 1.2rem max(1.4rem, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0,0,0,.6));
}
.ob-aufnahme-zahl { font-family: var(--font-m); font-size: .8rem; }
.ob-ausloeser {
  width: 74px; height: 74px; border-radius: 50%; border: 4px solid #fff; background: transparent;
  display: grid; place-items: center; cursor: pointer;
}
.ob-ausloeser i { width: 58px; height: 58px; border-radius: 50%; background: #fff; transition: all .2s var(--ease); }
.ob-ausloeser:active i { transform: scale(.9); }
.ob-ausloeser.ist-video i { background: #FF3B30; }
.ob-ausloeser.ist-video.laeuft i { width: 28px; height: 28px; border-radius: 6px; }
.ob-aufnahme-fertig { justify-self: end; }

/* ── Analyse: Kreis, der abläuft (wie die Frist im Firmen-Dashboard) ── */
.ob-ring { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; }
.ob-ring .uk-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.ob-ring b { position: relative; font-family: var(--font-m); font-size: .8rem; font-weight: 600; color: var(--accent); }
.ob-ring.ist-fertig .ring-lauf { stroke: var(--gut); }
.ob-ring.ist-fertig b { color: var(--gut); }
.ob-kopf-analyse .uk-ring { width: 16px; height: 16px; }
.ob-kopf-analyse .uk-ring circle { stroke-width: 5; }
.ob-kopf-analyse.ist-fertig .ring-lauf { stroke: var(--gut); }
.ob-warten .ob-ring { width: 58px; height: 58px; }
.ob-warten .ob-ring b { font-size: .95rem; }

/* Eine Bestätigung reicht: E-Mail oder Telefon */
.ob-verif-hinweis { margin: 0 0 .8rem; font-size: .85rem; color: var(--text-2); }
.ob-verif-hinweis b { color: var(--text); }

@media (max-width: 900px){ [data-theme="night"] .auth-pitch, [data-theme="night"] .auth-form { box-shadow: none; } }
@media (max-width: 900px){ [data-theme="night"] .auth-pitch { border-right: 0; border-top: 1px solid var(--line-hard); } }
[data-theme="night"] .auth-pitch { border-right: 1px solid var(--line-hard); box-shadow: inset -56px 0 56px -44px rgba(0,183,181,.28); }
[data-theme="night"] .auth-form { box-shadow: inset 56px 0 56px -44px rgba(0,183,181,.12); }
.page-lead-tight { margin-top: .6rem; }
.sec-body { margin-top: clamp(1.2rem, 3vh, 2rem); }
.contact-rows-wide { max-width: 52rem; }
.band-spaced { margin-top: clamp(1.4rem, 3vh, 2.2rem); }
.kons-anfragen { list-style: none; margin: 0; padding: 0; }
.kons-anfragen li { display: grid; grid-template-columns: minmax(9rem,1.1fr) minmax(10rem,1.4fr) auto auto; align-items: center; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.kons-anfragen li:last-child { border-bottom: 0; }
.kons-anfragen li > span:nth-child(2) { font-size: .84rem; color: var(--text-3); }
@media (max-width: 780px){
.kons-anfragen li { grid-template-columns: 1fr auto; }
.kons-anfragen li > span:nth-child(2) { grid-column: 1 / -1; }
}

/* Startseite: ein Knopf statt drei Wege – über die ganze Zeile */
.starter-ein {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; gap: clamp(.75rem, 1.4vw, 1.1rem);
  padding: clamp(.95rem, 2vh, 1.25rem) clamp(1rem, 1.5vw, 1.3rem);
}
.starter-ein .s-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.starter-ein .s-label { margin-top: 0; font-size: clamp(1.05rem, 1.35vw, 1.3rem); font-family: var(--font-d); font-weight: 600; letter-spacing: -.018em; line-height: 1.15; }
.starter-ein .s-sub { font-size: .8rem; opacity: .86; }
.starter-ein .s-go { margin-left: auto; align-self: center; width: 34px; height: 34px; }
.starter-ein .s-ico-wrap { width: clamp(36px, 2.8vw, 42px); height: clamp(36px, 2.8vw, 42px); }