/* ═══════════════════════════════════════════════════════════════════
   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);
  --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-move { 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); }
[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 { 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); }

/* ─── 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);
  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;
  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; gap: .6rem; align-items: center; }

/* ─── 4. Abschnittsrahmen ───────────────────────────────────────── */
.section-head {
  display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(1.2rem, 2.8vh, 2.2rem);
}
.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; }

/* Seitliche Abschnittsnavigation */

/* ─── 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);
  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; } }

.hero-title {
  font-family: var(--font-d);
  font-size: clamp(2.1rem, 4.3vw, 4.9rem); 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; }
.chip {
  display: inline-flex; align-items: center; border-radius: 2px;
}

/* 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));
}

.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);
  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);
  color: var(--hero-accent-on);
  transform: translateY(-2px);
}

/* 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);
  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-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);
  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-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 {
  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-go {
  border-color: color-mix(in srgb, var(--hero-accent-on) 52%, transparent);
  color: var(--hero-accent-on);
}

/* Angemeldet: ein breiter Knopf über die ganze Zeile. */
body.angemeldet .starter-dash { flex-direction: row;
  grid-column: 1 / -1;
}

/* 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-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); align-items: start; }

/* 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-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); }
.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;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem); color: var(--text);
  border-left: 3px solid var(--mess-tief);
  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%;
}
.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;
}
.partner-title { font-family: var(--font-d); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .55rem; max-width: 34ch; }
.partner-sub { color: var(--text-2); 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 { border-bottom: 1px solid var(--line);
  display: grid; 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; }
.fc-city { font-family: var(--font-d); font-weight: 600; 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; border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--font-m); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
}
.fbadge.time { margin-left: auto; border-color: transparent; }
.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;
  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; 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;
  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);
  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); 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); }
.phone-marke {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: .5rem .4rem .45rem;
  background: linear-gradient(to top, rgba(11,20,24,.82), rgba(11,20,24,0));
  text-align: center;
  font-family: var(--font-m); font-size: .5rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
}

/* ─── 8. Fußzeile ───────────────────────────────────────────────── */
.site-foot { display: flex; flex-direction: column; }
/* 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; 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;
  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-tagline { color: var(--text-2); font-size: .92rem; max-width: 34ch; }
.foot-col-title { font-family: var(--font-m); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); 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; 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; 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 { display: flex; gap: .4rem; }
.foot-social { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); 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; }
.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); }
  .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);
  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;
  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 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%; }
.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; 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 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; }
.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; padding: .78rem 1.25rem .78rem .82rem;
  font-family: var(--font-t); font-size: .95rem; font-weight: 600;
  transition: background .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}
.hw-open:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.26); }
.hw-open .play {
  flex: none; width: 26px; height: 26px;
  display: grid; place-items: center;
}
.hw-open .play svg { width: 9px; height: 9px; fill: currentColor; margin-left: 1px; }

/* Bewegungen der Szenen */

#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-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; }
  .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 { line-height: .98; }
  .hero-desc  { font-size: 1rem; line-height: 1.45; margin-top: clamp(.8rem, 2vh, 1.1rem); }
  .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); padding: clamp(1.2rem, 2.6vw, 2rem); display: flex; flex-direction: column; gap: .6rem; }
.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);
  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); }

.btn-solid {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; font-size: .95rem;
}
.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; }

/* 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; }
}

/* ── 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; }
}
/* Bilder der Anleitung aus Canva (assets/anleitung/schritt-1…6.jpg):
   weisser Grund, darum ein ruhiger Rahmen statt Schatten */
.step-bild { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px;
  border: 1px solid var(--line); background: #fff; }
/* Handy: alles untereinander – Nummer, Bild, Titel, Text. Die Tablet-Regel
   (.step-facts-col in Spalte 2) würde sonst eine zweite Spalte erzwingen
   und das Bild auf die Breite der Nummer schrumpfen. */
@media (max-width: 720px) {
  .step-il { gap: .9rem; }
  .step-il .step-facts-col { grid-column: auto; }
  .step-il .step-no { margin-bottom: .5rem; }
  .step-bild { max-width: 30rem; margin-inline: 0; }
  .step-il .step-h { margin-top: .2rem; }
}

/* ── 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 { 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; }

.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"] .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)); margin-bottom: clamp(1.4rem,3.5vh,2.4rem); }
.kachel { background: var(--bg); 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; 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); }
.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-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-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-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; }

/* 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; }

/* Hochladen */
.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-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 { border-left: 3px solid var(--mess-tief); 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; 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);
}
.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; }
}

/* ── 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;
  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; font-weight: 600; font-size: .9rem; border-radius: 2px; transition: background .25s var(--ease); }
.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; 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; }
.mini {
  display: flex; flex-direction: column;
}
.mini-wert { font-family: var(--font-d); font-weight: 600; line-height: 1; color: var(--hero-fg); }
.mini svg { width: 100%; height: 22px; display: block; overflow: visible; }
.mini-linie { fill: none; stroke: var(--hero-accent); stroke-linejoin: round; stroke-linecap: round; }
.mini-flaeche { fill: var(--hero-accent); }
.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); }
.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] {
  color: var(--text-3);
  cursor: not-allowed;
}
.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. */

/* Messteilung — ersetzt die Haarlinie dort, wo ein Abschnitt anfängt. */

/* 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 { border-right: 0; border-bottom: 0; }
.mini::after  { 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. */

/* 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, .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; 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; }

/* 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, .demo-h { 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 {
  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. */

/* ── Hero: Bühne links, Instrument rechts ─────────────────────────── */
.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-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%; }

/* ── 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);
  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);
}
.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-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.
   ═══════════════════════════════════════════════════════════════════ */
.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.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Die Schätzung: Formular links, Spanne rechts ────────────────── */
.sch { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.95fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
/* Richtwert, kein Fixpreis – gut sichtbar neben jeder Schätzung und
   jedem Rechenbeispiel. Signalfarbe wie die Preisgrenzen im Formular. */

/* ── Der Ablauf in fünf Schritten, quer ─────────────────────────── */

/* ── 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; }

/* ── 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 ────── */
.preis, .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); }
.card-p a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── Bestellablauf: Zusatzleistungen, Hilfe, Entwurf, was jetzt passiert ── */
.ob-hilfe { display: flex; 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: 900px) {
  .sch { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .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; }

/* Zimmer und Fläche nebeneinander */

/* 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 */
.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; }

/* Termine mit eigenem Preis */
#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); }

/* Übersicht vor dem Senden */
.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-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; }

.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; }

/* 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-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 */

/* 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-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; }
}

/* ── 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); }
/* 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; }
}

/* ── Erklärfenster: fünfte Staffel und Ladebalken ─────────────────── */

/* 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 { 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-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 */

/* ── Bestellablauf, vereinfacht: vier Schritte ──────────────────── */
.ob-zeile[hidden] { display: none; }
.ob-kurz { font-family: var(--font-m); font-size: .78rem; letter-spacing: .02em; color: var(--text-3); }
.ob-kurz:empty { display: none; }

/* Aufklappbares: Hinweis an den Betrieb, «Was passiert nach dem Senden?» */
.ob-mehr { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.ob-mehr > summary { cursor: pointer; list-style: none; font-size: .9rem; font-weight: 600; color: var(--accent); display: inline-flex; align-items: baseline; gap: .45rem; }
.ob-mehr > summary::-webkit-details-marker { display: none; }
.ob-mehr > summary::before { content: "+"; font-family: var(--font-m); font-weight: 600; }
.ob-mehr[open] > summary::before { content: "−"; }
.ob-mehr > summary small { font-weight: 400; color: var(--text-3); font-size: .8rem; }
.ob-mehr > .field { margin-top: .8rem; }
.ob-mehr .ob-ablauf { margin-top: .8rem; }

/* Senden unter dem Preis */
.ob-buchen { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.ob-buchen > .ob-sub { margin-bottom: 1rem; }
.ob-buchen .ob-kontakt .field.ob-verif { grid-column: auto; }
.ob-zustimmung { margin: .8rem 0 0; }
.ob-zustimmung a { color: var(--text-2); }
.ob-code-wechsel { display: block; margin: .9rem auto 0; font-size: .85rem; }
.ob-code-wechsel[hidden] { display: none; }

/* Adresse: Strasse und Nr. in einem Feld, PLZ und Ort auch am Handy nebeneinander */
.ob-adresse > .field { margin-bottom: .7rem; }
@media (max-width: 720px) {
  .ob-gitter.zwei { grid-template-columns: 6.5rem 1fr; }
  /* Kopf am Handy: eine Zeile, die Analyse-Anzeige nur mit dem Kreis und den Sekunden */
  .ob-kopf { flex-wrap: nowrap; gap: .6rem; }
  .ob-zurueck, .ob-titel { white-space: nowrap; }
  .ob-kopf-analyse { padding: .3rem; }
  .ob-kopf-analyse [data-analyse-kopf] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Keller, Garten & Co. als Kacheln in zwei Spalten; die gewählte
   öffnet sich über die ganze Breite und fragt nach dem Füllstand. */
#obBereiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
#obBereiche .ob-bereich { margin: 0; padding: .7rem .85rem; }
#obBereiche .ob-bereich.an { grid-column: 1 / -1; border-color: var(--accent); }
#obBereiche .ob-bereich-kopf { font-size: .9rem; }

/* Handy: Es speichert von selbst – «Später fortfahren» fällt weg, der
   Fuss bleibt einzeilig. */
@media (max-width: 620px) {
  .ob-fuss .ob-spaeter { display: none; }
}
@media (max-width: 620px) {
  /* Im Preisschritt: Preis, «←» und «Auftrag senden» in einer Zeile */
  .ob-inner-fuss:has(.ob-fusspreis:not([hidden])) { flex-wrap: nowrap; }
  .ob-inner-fuss:has(.ob-fusspreis:not([hidden])) .ob-fusspreis { flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 0; }
  .ob-inner-fuss:has(.ob-fusspreis:not([hidden])) .wiz-zurueck { font-size: 0; padding: .6rem .8rem; }
  .ob-inner-fuss:has(.ob-fusspreis:not([hidden])) .wiz-zurueck::before { content: "←"; font-size: 1rem; }
  .ob-inner-fuss:has(.ob-fusspreis:not([hidden])) #obFertig { white-space: nowrap; padding-inline: 1.1rem; }
}

/* ── Bestellablauf: Fragekarten, Farbe, «Weiter» wird farbig ───────
   Jede Frage ist eine Karte mit Nummer auf der Kante. Beantwortet:
   grüner Haken. Die erste offene Karte leuchtet türkis. Die Nummern
   zählt CSS (counter), den Stand setzt fortschritt() in site.js. */
.ob-panel { counter-reset: karte; }
.ob-karte {
  position: relative; counter-increment: karte;
  margin: 1.7rem 0 0; padding: 1.45rem clamp(1rem, 2.4vw, 1.4rem) clamp(1rem, 2.4vw, 1.3rem);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ob-karte::before {
  content: counter(karte);
  position: absolute; top: -15px; left: clamp(.8rem, 2vw, 1.1rem);
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  border: 3px solid var(--bg); background: var(--mess); color: var(--mess-tief);
  font: 600 .78rem/1 var(--font-m);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.ob-karte.ist-dran { border-color: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 14%, transparent), 0 18px 40px -26px rgba(0,112,122,.55); }
.ob-karte.ist-dran::before { background: var(--teal); color: #fff; }
.ob-karte.ist-ok { border-color: color-mix(in srgb, var(--gut) 40%, var(--line)); }
.ob-karte.ist-ok::before { content: "✓"; background: var(--gut); color: #fff; font-size: .85rem; transform: scale(1.04); }
.ob-karte-titel {
  display: block; margin: 0 0 .9rem; padding: 0; border: 0;
  font-family: var(--font-d); font-weight: 600; font-size: 1.02rem; letter-spacing: -.015em;
  text-transform: none; color: var(--text);
}
.ob-karte-titel small { font-family: var(--font-t); font-weight: 400; font-size: .8rem; letter-spacing: 0; color: var(--text-3); margin-left: .35rem; }
.ob-karte .ob-sub:last-child { margin-bottom: 0; }

/* Adressen: Von türkis, Nach blau; auf breiten Schirmen nebeneinander */
.ob-adresse.ob-karte { margin: 1.7rem 0 0; }
@media (min-width: 900px) {
  #obAdressen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  #obAdressen .ob-gitter.zwei { grid-template-columns: 5.5rem 1fr; }
}

/* Schritt 1: kleine Kacheln für den Immobilientyp, getönte Ablage */
.ob-kacheln-klein { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.ob-kacheln-klein .ob-kachel { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem .6rem; }
.ob-kacheln-klein .ob-kachel svg { width: 18px; height: 18px; margin: 0; }
.ob-kacheln-klein .ob-kachel span { font-size: .9rem; }
.ob-karte .ob-methoden { margin-top: 0; }

/* Termin */
.ob-termin { border-radius: calc(var(--r) * .6); }
.ob-termin-plus { font-size: .85rem; }

/* Liste: Leistungen auf Antippen */
.ob-eintrag:not(.offen) .ob-opt[aria-pressed="false"] { display: none; }
.ob-eintrag:not(.offen) .ob-optionen:not(:has(.ob-opt[aria-pressed="true"])) { display: none; }
.ob-karte .ob-liste { border-top: 0; }

/* Bestätigung und Kontakt als Karten */
.ob-bestaetigung.ob-karte { margin-top: 1.7rem; padding-top: 1.35rem; border-width: 1px; background: color-mix(in srgb, var(--mess-weich) 60%, var(--bg)); }
.ob-bestaetigung.ob-karte.ist-dran { border-width: 1px; }
.ob-buchen.ob-karte { margin-top: 1.9rem; padding-top: 1.45rem; border-top: 1px solid var(--line); }
.ob-buchen.ob-karte.ist-dran { border-color: var(--teal); }
.ob-buchen.ob-karte.ist-ok { border-color: color-mix(in srgb, var(--gut) 40%, var(--line)); }

/* Fortschritt oben: farbige Strecke */
.ob-ziel { color: var(--teal-deep); }
[data-theme="night"] .ob-ziel { color: var(--teal); }

/* «Weiter» und «Auftrag senden»: grau, solange etwas fehlt – farbig,
   sobald der Schritt stimmt. Klickbar bleiben sie immer. */
.ob-fuss #obWeiter, .ob-fuss #obFertig { border-radius: 999px; transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .25s var(--ease); }
.ob-fuss #obWeiter:not(.ist-bereit), .ob-fuss #obFertig:not(.ist-bereit) { box-shadow: none; }
[data-theme="night"] .ob-fuss #obWeiter:not(.ist-bereit), [data-theme="night"] .ob-fuss #obFertig:not(.ist-bereit) { background: var(--ink-3); }
.ob-fuss #obWeiter:not(.ist-bereit):hover, .ob-fuss #obFertig:not(.ist-bereit):hover { transform: none; }
.ob-fuss #obWeiter.ist-bereit::before, .ob-fuss #obFertig.ist-bereit::before { content: "✓"; font-weight: 700; }
.ob-fuss .ist-frisch { animation: obBereit .75s var(--ease); }
@keyframes obBereit {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,183,181,.55); }
  40%  { transform: scale(1.07); }
  100% { transform: scale(1); box-shadow: 0 0 0 16px rgba(0,183,181,0), 0 12px 28px -10px rgba(0,183,181,.85); }
}
@media (prefers-reduced-motion: reduce) { .ob-fuss .ist-frisch { animation: none; } }
/* Google und Microsoft auch am Handy nebeneinander */
.ob-sozial .social-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ob-sozial .social-btn { min-width: 0; padding-inline: .6rem; }
.ob-fusspreis b { white-space: nowrap; }
@media (max-width: 400px) {
  .ob-inner-fuss:has(.ob-fusspreis:not([hidden])) #obFertig { padding-inline: .9rem; font-size: .9rem; gap: .4rem; }
  .ob-inner-fuss:has(.ob-fusspreis:not([hidden])) .ob-fusspreis b { font-size: 1.05rem; }
}
.stats[hidden] { display: none; }

/* Schrittnamen oben: sagen, was verlangt ist – lesbar statt Kürzel */
/* Handy: nur der aktuelle Schritt mit Namen */
.ob-kacheln-klein .ob-kachel svg { flex: none; }

/* ── Schritt 1: Weg schon gewählt, Kamera zuerst ──────────────────── */
.ist-methode-fest [data-gruppe="methode"] { display: none; }
.ob-methode-wechsel { margin: -.45rem 0 1rem; font-size: .84rem; color: var(--text-3); display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .7rem; }
.ob-methode-wechsel[hidden], .ob-methode-wechsel [hidden] { display: none; }
.ob-methode-wechsel .ob-link { font-size: .84rem; }
.ist-methode-fest .ob-weg { margin-top: 0; }

/* Der grosse Knopf: Aufnahme mit unserer Kamera */
.ob-aufnahme-los {
  width: 100%; display: flex; align-items: center; gap: .9rem; text-align: left;
  margin-top: .9rem; padding: 1rem 1.15rem; border-radius: var(--r);
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%); color: #fff;
  box-shadow: 0 14px 30px -14px rgba(0,112,122,.8);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.ist-methode-fest .ob-aufnahme-los { margin-top: 0; }
.ob-aufnahme-los:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(0,112,122,.9); }
.ob-aufnahme-los-sym { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.ob-aufnahme-los-sym svg { width: 24px; height: 24px; }
.ob-aufnahme-los-text { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.ob-aufnahme-los-text b { font-family: var(--font-d); font-size: 1.08rem; font-weight: 600; letter-spacing: -.015em; }
.ob-aufnahme-los-text small { font-size: .82rem; opacity: .88; line-height: 1.35; }
.ob-aufnahme-los-pfeil { flex: none; font-size: 1.3rem; transition: transform .25s var(--ease); }
.ob-aufnahme-los:hover .ob-aufnahme-los-pfeil { transform: translateX(3px); }

/* Galerie: zweite Wahl, schmal */
.ob-zaehlzeile[hidden] { display: none; }

/* Wohnung / Haus oder Büro / Gewerbe: bei Gewerbe nur die Fläche */
.ob-art { grid-template-columns: 1fr 1fr; margin-bottom: 1.1rem; }
.ist-gewerbe .ob-zimmer { display: none; }

/* ── Fixpreis: drei Varianten (bestehende Auswahlkarten) ───────────── */
.ob-varianten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 1.1rem 0 .5rem; }
.ob-varianten .ob-methode { flex-direction: column; gap: 0; padding: 1rem .95rem; text-align: left; align-items: stretch; }
.ob-varianten .ob-methode > span { display: flex; flex-direction: column; gap: .35rem; }
.ob-variante-marke { align-self: flex-start; font-style: normal; font-family: var(--font-m); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ob-varianten [data-wert="spar"] .ob-variante-marke { color: var(--gut); }
.ob-varianten [data-wert="mittel"] .ob-variante-marke { color: var(--accent); }
.ob-variante-preis { font-family: var(--font-d); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.ob-varianten .ob-methode.gewaehlt .ob-variante-preis { color: var(--accent); }
.ob-variante-liste { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .25rem; font-size: .8rem; line-height: 1.35; color: var(--text-3); }
.ob-variante-liste li { display: flex; gap: .4rem; }
.ob-variante-liste li::before { content: "–"; flex: none; width: .8rem; }
.ob-variante-liste li.ja { color: var(--text-2); }
.ob-variante-liste li.ja::before { content: "✓"; color: var(--gut); font-weight: 700; }
@media (max-width: 620px) {
  .ob-varianten { grid-template-columns: 1fr; }
  .ob-varianten .ob-methode > span { display: grid; grid-template-columns: 1fr auto; column-gap: .8rem; }
  .ob-varianten .ob-variante-marke, .ob-varianten .ob-variante-liste { grid-column: 1 / -1; }
  .ob-varianten h3 { align-self: baseline; }
}

/* Entsorgung bei Rundum: Kontingent als Balken */
.ob-kontingent-balken { display: block; width: min(14rem, 100%); height: 4px; margin-top: .4rem; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.ob-kontingent-balken[hidden] { display: none; }
.ob-kontingent-balken i { display: block; height: 100%; background: var(--gut); transform-origin: left; transition: transform .3s var(--ease); }
.ob-kontingent-balken.ist-voll i { background: var(--signal); }

/* Endreinigung inklusive (Rundum): kein Schalter */
.ob-preis-reinigung.ist-inklusive .ob-schalter { visibility: hidden; }
.ob-preis-reinigung.ist-inklusive { cursor: default; }
.ob-preis-flex b { color: var(--gut); }
.ob-flex-fenster[hidden] { display: none; }
.ob-flex-fenster select { font: inherit; font-size: .88rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: calc(var(--r) * .6); background: var(--bg); color: var(--text); }

/* Niedrige Fenster (1024 × 680): 03 und 04 passen ganz auf eine Höhe –
   vorher lagen die letzten Zeilen einige Pixel unter der Kante. */
@media (max-height: 720px) and (min-width: 900px) {
  html.deck .cards-vertrauen .card { padding-top: .9rem; padding-bottom: .9rem; }
  html.deck .cards-vertrauen .card-p { font-size: .84rem; line-height: 1.45; }
}

/* Kombi-Rabatt (Umzug + Endreinigung) in der Preisbox */
.ob-preis-rabatt b { color: var(--gut); }
.ob-preis-zeile[hidden] { display: none; }

/* ── Schnellpreis (Schritt 1): Preis zuerst, Kontakt darunter ───────── */
.ob-danke { border-color: color-mix(in srgb, var(--gut) 45%, transparent); }
.ob-panel[hidden], .ob-pillen[hidden], .ob-ziel[hidden], .ob-fuss[hidden] { display: none !important; }

/* Schnellpreis: eine Karte – Art, Zimmer + m², PLZ, Preise */
.ob-einheit { position: relative; }
.ob-einheit input { width: 100%; padding-right: 2.6rem; }
.ob-einheit span { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); font-size: .88rem; color: var(--text-3); pointer-events: none; }
.ob-karte .ob-art { margin-bottom: 0; }

/* Kontaktprüfung: Hinweis unter dem Feld */
.ob-feld-hinweis { margin: .35rem 0 0; font-size: .8rem; line-height: 1.4; color: var(--text-2); }
.ob-feld-hinweis[hidden] { display: none; }
.ob-feld-hinweis.ist-fehler { color: var(--signal); }
.ob-feld-hinweis .ob-link { font-size: .8rem; font-weight: 600; }
/* Fallen-Feld gegen Bots: aus dem Bild, aber nicht display:none (das überspringen manche Bots) */
.ob-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Erste Seite (Schnellpreis), schlicht ───────────────────────────
   Eine ruhige Karte ohne Nummer; anfangs nur Zimmer · Von PLZ · Nach PLZ.
   Preise, Rabatte und Kontakt gleiten herein, sobald die PLZ stimmen. */
.ob-start .ob-sub { margin-bottom: 0; }
.ob-flaeche-feld[hidden], .ob-art-versteckt[hidden], .ob-schnell-mehr[hidden], .ob-schnell-optionen .ob-link[hidden], .ob-fuss .ob-spaeter[hidden] { display: none !important; }
.ob-schnell-optionen { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: .65rem 0 0; }
.ob-schnell-optionen .ob-link { font-size: .82rem; color: var(--text-2); }
.ob-schnell-optionen .ob-link:hover { color: var(--accent); }
.ob-schnell-mehr.ist-neu { animation: obAuf .45s var(--ease) both; }
@keyframes obAuf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ob-schnell-mehr.ist-neu { animation: none; } }
.ob-schnell-lead { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); }
.ob-schnell-lead .ob-karte-titel { margin-bottom: .8rem; }
.ob-lead-zeile { grid-template-columns: 1fr 1.6fr; gap: .7rem; margin: 0; }
@media (max-width: 620px) {
  .ob-lead-zeile { grid-template-columns: 1fr; }
}
.ob-fuss .ob-spaeter[hidden] ~ .btn-solid { margin-left: auto; }   /* gleich hoch wie die PLZ-Felder */

/* ── Formular schlicht, alle Schritte ───────────────────────────────
   Keine Nummern-Abzeichen mehr; eine erledigte Karte zeigt ein kleines ✓
   im Titel. Fortschritt als Balken mit «Schritt 2 von 5 · Umzugsgut». */
.ob .ob-karte::before { content: none !important; display: none !important; }
.ob .ob-karte { margin-top: 1rem; padding-top: clamp(1rem, 2.4vw, 1.3rem); }
.ob .ob-karte.ist-ok > .ob-karte-titel::after { content: "✓"; margin-left: .45rem; color: var(--gut); font-weight: 700; font-size: .9em; }
.ob .ob-pillen { display: block; margin-bottom: clamp(1rem, 2.6vh, 1.5rem); }
.ob-balken { display: block; height: 4px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.ob-balken i { display: block; height: 100%; border-radius: 2px; transition: width .45s var(--ease); }
.ob-balken-text { display: block; margin-top: .5rem; font-size: .8rem; color: var(--text-3); }
.ob-balken-text b { color: var(--text); font-weight: 600; }
.ob [data-folgt][hidden] { display: none !important; }
.ob [data-folgt].ist-neu { animation: obAuf .45s var(--ease) both; }

/* Schritt 2: eine Zeile kleiner Links unter dem Kamera-Knopf */
.ob-aufnahme-mehr { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.3rem; margin: .85rem 0 .1rem; }
.ob-aufnahme-mehr .ob-link { font-size: .85rem; cursor: pointer; }
.ob-ablage-link.hat-dateien { color: var(--gut); }

/* Schritt 3: Zufahrt zugeklappt */
.ob-zufahrt { border-top: 1px solid var(--line); margin-top: .1rem; padding-top: .7rem; }
.ob-zufahrt > summary { cursor: pointer; list-style: none; font-size: .88rem; color: var(--text-2); }
.ob-zufahrt > summary::-webkit-details-marker { display: none; }
.ob-zufahrt > summary em { font-style: normal; font-weight: 600; color: var(--accent); margin-left: .3rem; }
.ob-zufahrt[open] > summary em { display: none; }
.ob-zufahrt .ob-zeile:first-of-type { margin-top: .6rem; }

/* Schritt 4 und 5: aufklappbare Zusätze ruhig */
.ob-raeume > summary, .ob-geltung > summary { font-size: .88rem; }
.ob-geltung .ob-kleingedrucktes { margin: .6rem 0 0; }

/* Liste: eine Zeile je Gegenstand; Optionen als «⋯» neben dem Zähler */
.ob-eintrag { padding: .55rem 0; }
.ob-eintrag .ob-optionen { padding-top: .1rem; }
.ob-eintrag.ob-karton { padding: .8rem 1rem; }

/* Varianten am Handy: drei kompakte Karten nebeneinander, darunter der
   Inhalt der gewählten – statt drei langer Karten untereinander. */
.ob-variante-detail { display: none; }
@media (max-width: 620px) {
  .ob-varianten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  .ob-varianten .ob-methode { padding: .75rem .55rem; text-align: center; }
  .ob-varianten .ob-methode > span { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
  .ob-varianten .ob-variante-marke, .ob-varianten .ob-variante-liste { display: none; }
  .ob-varianten h3 { font-size: .95rem; }
  .ob-varianten .ob-variante-preis { font-size: .95rem; white-space: nowrap; }
  .ob-variante-detail { display: block; margin: .2rem 0 .9rem; padding: .75rem .9rem; border-radius: var(--r); background: var(--mess-weich); }
  .ob-variante-detail em { display: block; font-style: normal; font-family: var(--font-m); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .35rem; }
  .ob-variante-detail .ob-variante-liste { display: grid; margin: 0; }
}

/* 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); }
.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); }
.starter-ein .s-label { font-family: var(--font-d); font-weight: 600; letter-spacing: -.018em; line-height: 1.15; }
.ob-bestaetigung[hidden] { display: none !important; }

/* Adresse: nur Strasse sichtbar, PLZ und Ort als Zeile */
.ob-ort-zeile { margin: -.25rem 0 .7rem; font-size: .88rem; color: var(--text-2); }
.ob-ort-zeile[hidden], .ob-ort-felder[hidden] { display: none !important; }
.ob-ort-zeile .ob-link { font-size: .85rem; margin-left: .3rem; }
.ob-ort-text { font-weight: 600; color: var(--text); }

/* Sicherheit kurz: drei Karten und ein Link */
.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; }

/* Schnellpreis: Kontakt freiwillig, Hinweis zum Weitermachen-Link */
.ob .ob-optional { font-weight: 400; font-size: .78em; color: var(--text-3); margin-left: .25rem; }
.ob-lead-info { display: flex; gap: .5rem; align-items: flex-start; margin: .6rem 0 0;
  font-size: .85rem; line-height: 1.45; color: var(--text-3); }
.ob-lead-info svg { flex: none; width: 1rem; height: 1rem; margin-top: .15rem; color: var(--teal); }
.ob-rueckruf-tel { margin-top: .6rem; max-width: 22rem; }
.ob-rueckruf-tel[hidden], .ob-link-mail[hidden] { display: none !important; }
.ob-link-mail { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin-top: .7rem; }
.ob-link-mail .field { flex: 1 1 14rem; margin: 0; }

/* E-Mail später nachtragen (Schritte 2–4, unter dem Balken) */
.ob-preismail { margin: -.2rem 0 1rem; }
.ob-preismail[hidden], .ob-preismail-box[hidden], .ob-preismail-auf[hidden], .ob-preismail-ok[hidden] { display: none !important; }
.ob-preismail-auf { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; }
.ob-preismail-auf svg { width: 1rem; height: 1rem; flex: none; }
.ob-preismail-box { padding: .9rem 1rem; border-radius: var(--r);
  background: var(--mess-weich); border: 1px solid color-mix(in srgb, var(--mess-linie) 35%, transparent); }
.ob-preismail-box .ob-link-mail { margin-top: 0; }
.ob-preismail-ok { margin: 0; font-size: .88rem; color: var(--gut); }
.ob-preismail-ok::before { content: "✓ "; font-weight: 700; }

/* ══ Formular: eine Frage pro Bildschirm, Koralle für Klicks ══════════
   Petrol bleibt die Marke; Koralle gibt es nur dort, wo es weitergeht. */
:root {
  --aktion:       #CD4C24;   /* Weiss darauf: 4,6 : 1 */
  --aktion-tief:  #AE3D1A;
  --aktion-weich: #FBE5DD;
  --aktion-text:  #8F3212;
}
.ob-frage:not(.ist-dran-frage) { display: none !important; }
.ob-frage.ist-dran-frage { animation: obFrageRein .35s var(--ease) both; }
@keyframes obFrageRein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ob-frage > .ob-h { font-size: clamp(1.45rem, 4.6vw, 1.9rem); line-height: 1.15; margin-bottom: .35rem; }
.ob-frage > .ob-sub { margin-bottom: 1.2rem; }
.ob-versteckt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Weiter / Senden: weiche Koralle, solange etwas fehlt – kräftig, sobald es passt */
.ob-fuss #obWeiter:not(.ist-bereit), .ob-fuss #obFertig:not(.ist-bereit) { background: var(--aktion-weich); color: var(--aktion-text); }
.ob-fuss #obWeiter:not(.ist-bereit):hover, .ob-fuss #obFertig:not(.ist-bereit):hover { background: #F7D3C6; color: var(--aktion-text); }
.ob-fuss #obWeiter.ist-bereit, .ob-fuss #obFertig.ist-bereit { background: var(--aktion); color: #fff; box-shadow: 0 12px 26px -12px rgba(205,76,36,.8); }
.ob-fuss #obWeiter.ist-bereit:hover, .ob-fuss #obFertig.ist-bereit:hover { background: var(--aktion-tief); color: #fff; }
.ob-fuss .ist-frisch { animation-name: obBereitKoralle; }
@keyframes obBereitKoralle {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(205,76,36,.5); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); box-shadow: 0 0 0 14px rgba(205,76,36,0); }
}
.ob-balken i { background: var(--teal-deep); }

/* Zimmer als Chips */
.ob-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-bottom: .9rem; }
.ob-chip { font: 500 1rem/1 var(--font-t); padding: .85rem 0; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease); }
.ob-chip:hover { border-color: var(--teal-deep); }
.ob-chip:active { transform: scale(.96); }
.ob-chip.gewaehlt { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.ob.ist-gewerbe .ob-chips { display: none; }
.ob-frage[data-frage="groesse"] .ob-flaeche-feld { max-width: 14rem; }
.ob-frage[data-frage="groesse"] .ob-schnell-optionen { margin-top: .2rem; }

/* PLZ mit Ort */
.ob-strecke input { font-size: 1.15rem; letter-spacing: .04em; }
.ob-plz-ort { display: block; min-height: 1.2em; margin-top: .35rem; font-size: .85rem; color: var(--text-3); }
.ob-plz-ort.ist-ok { color: #0F6E56; }
.ob-plz-ort.ist-fehler { color: var(--signal); }

/* Preis-Frage */
.ob-vertrauen-zeile { margin: 1.1rem 0 0; font-size: .8rem; color: var(--text-3); text-align: center; }

/* Liste: freiwillig genauer mit Fotos */
.ob-genauer { display: flex; align-items: center; gap: .8rem; width: 100%; margin: 0 0 1rem; padding: .8rem 1rem; text-align: left; cursor: pointer;
  border-radius: var(--r); border: 1px dashed color-mix(in srgb, var(--teal-deep) 45%, transparent); color: var(--text);
  transition: border-color .2s var(--ease), background .2s var(--ease); }
.ob-genauer:hover { border-style: solid; }
.ob-genauer svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--teal-deep); }
.ob-genauer span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.ob-genauer b { font-size: .95rem; }
.ob-genauer small { font-size: .8rem; color: var(--text-3); }
.ob-genauer > span:last-child { color: var(--teal-deep); font-weight: 600; }
.ob-ohne-fotos { margin: 1rem 0 0; text-align: center; font-size: .9rem; }
.ob-raeume.ob-karte { padding-top: .4rem; }

/* ══ Preis-Frage: eine Zahl, der genaue Fixpreis verdeckt ═════════════ */
.ob-preis-route { margin: 0 0 .9rem; font-size: .9rem; color: var(--text-2); }
.ob-ab { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; margin-bottom: 1.3rem; }
.ob-ab-etikett { font-size: 1rem; color: var(--text-2); }
.ob-ab-preis { font: 600 clamp(2.4rem, 10vw, 3.2rem)/1.05 var(--font-d); letter-spacing: -.03em; color: var(--text); }
.ob-ab-klein { font-size: .78rem; color: var(--text-3); }
.ob-ab-vorteil { margin: .55rem 0 0; font-size: .9rem; font-weight: 500; color: #0F6E56; }
.ob-ab-vorteil::before { content: none; }

.ob-verdeckt { padding: 1rem 1.1rem; border-radius: var(--r); border: 1.5px dashed color-mix(in srgb, var(--teal-deep) 40%, transparent); background: var(--mess-weich); }
.ob-verdeckt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ob-verdeckt-kopf span { font-weight: 500; }
.ob-verdeckt-kopf b { font: 600 1.25rem/1 var(--font-d); letter-spacing: .08em; color: color-mix(in srgb, var(--text) 30%, transparent); }
.ob-verdeckt-zeit { margin: .5rem 0 .55rem; font-size: .85rem; color: var(--text-2); }
.ob-verdeckt-liste { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.ob-verdeckt-liste li { font-size: .8rem; padding: .25rem .65rem; border-radius: 999px; background: var(--bg); color: var(--teal-deep); border: 1px solid color-mix(in srgb, var(--teal-deep) 25%, transparent); }
.ob-verdeckt-liste li::before { content: "○ "; }

.ob-frage[data-frage="preis"] .ob-schnell-lead { margin-top: 1rem; }
.ob-lead-link { margin: 0; text-align: center; font-size: .9rem; }
.ob-lead-box { margin-top: .6rem; padding: 1rem; border-radius: var(--r); background: var(--bg-raised); }
.ob-lead-box[hidden], .ob-rueckruf-box[hidden], #obLeadAuf[hidden], #obRueckrufAuf[hidden] { display: none !important; }
.ob-lead-los { margin-top: .8rem; }
.ob-frage[data-frage="preis"] .ob-preismail-ok { text-align: center; margin-top: .3rem; }

.ob-hilfe { flex-wrap: wrap; row-gap: .3rem; }
.ob-hilfe .ob-link { font-size: inherit; color: var(--accent); font-weight: 600; }
.ob-rueckruf-box { margin-top: .7rem; padding: 1rem; border-radius: var(--r); background: var(--bg-raised); }
.ob-rueckruf-box .ob-link-mail { margin-top: 0; }
.ob-rueckruf-ok { margin-top: .6rem; }
/* Handy: «Zurück» nur als Pfeil, damit lange Knopftexte
   («Meinen Fixpreis berechnen →») in einer Zeile bleiben */
@media (max-width: 480px) {
  .ob-inner-fuss { flex-wrap: nowrap; }
  .ob-fuss .wiz-zurueck { font-size: 0; padding: .6rem .85rem; flex: none; }
  .ob-fuss .wiz-zurueck::before { content: "←"; font-size: 1rem; }
  .ob-fuss #obWeiter, .ob-fuss #obFertig { white-space: nowrap; padding-inline: 1.1rem; }
}

/* ══ Inventarliste: Kacheln mit Symbol, nach Räumen ══════════════════ */
.ob-teilliste { border-top: 0 !important; margin-bottom: .2rem; }
.ob-teilgruppe[hidden] { display: none; }
.ob-teile { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .55rem; }

#obErkannt .ob-teil { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: .5rem; border: 1px solid color-mix(in srgb, var(--teal-deep) 28%, var(--line));
  transition: border-color .2s var(--ease), background .2s var(--ease), opacity .2s var(--ease); }
.ob-teil-sym { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--mess-weich); color: var(--teal-deep); flex: none; }
.ob-teil-sym svg { width: 26px; height: 26px; }
#obErkannt .ob-teil .ob-eintrag-name { flex: 1 0 auto; }
#obErkannt .ob-teil .ob-zaehlwerk { width: 100%; justify-content: space-between; border-radius: 999px; border-color: transparent; }
#obErkannt .ob-teil .ob-zaehlwerk button { width: 38px; height: 34px; border-radius: 999px; font-size: 1.15rem; color: var(--teal-deep); }
#obErkannt .ob-teil .ob-zaehlwerk button:hover { background: var(--mess-weich); }
#obErkannt .ob-teil .ob-zaehlwerk span { min-width: 0; font: 600 1rem/1 var(--font-t); color: var(--text); }
#obErkannt .ob-teil .ob-optionen { flex-basis: auto; width: 100%; padding-top: 0; }
#obErkannt .ob-teil.offen { margin: 0; padding: .75rem; background: var(--mess-weich); border-color: var(--teal-deep); border-radius: 14px; }
#obErkannt .ob-teil.ist-null .ob-teil-sym { background: var(--bg-raised); }
#obErkannt .ob-teil.ist-null .ob-eintrag-name { text-decoration: none; color: var(--text-2); }
#obErkannt .ob-teil.ist-neu { animation: obTeilNeu .6s var(--ease); }
@keyframes obTeilNeu {
  0%   { transform: scale(.94); box-shadow: 0 0 0 0 rgba(0,112,122,.35); }
  60%  { transform: scale(1.02); }
  100% { transform: none; box-shadow: 0 0 0 10px rgba(0,112,122,0); }
}
/* Handy: eine Zeile je Gegenstand – Symbol, Name, Zähler, ⋯ */
@media (max-width: 560px) {
  .ob-teile { grid-template-columns: 1fr; gap: .4rem; }
  #obErkannt .ob-teil { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 30px; align-items: center; padding: .5rem .55rem .5rem .5rem; }
  #obErkannt .ob-teil .ob-teil-sym { width: 40px; height: 40px; border-radius: 10px; }
  #obErkannt .ob-teil .ob-teil-sym svg { width: 24px; height: 24px; }
  #obErkannt .ob-teil .ob-eintrag-name { min-height: 0; overflow: hidden; text-overflow: ellipsis; }
  #obErkannt .ob-teil .ob-zaehlwerk { width: auto; }
  #obErkannt .ob-teil .ob-zaehlwerk button { height: 32px; }
  #obErkannt .ob-teil .ob-zaehlwerk span { min-width: 1.6rem; }
  #obErkannt .ob-teil .ob-optionen { grid-column: 2 / -1; }
  #obErkannt .ob-teil.offen { padding: .5rem .55rem .6rem .5rem; }
  /* mehr Platz für lange Namen («Kleiderschrank», «Wäschetrockner») */
  .ob-inventar.ob-karte { padding-inline: .7rem; }
  #obErkannt .ob-teil { gap: .35rem .5rem; padding-inline: .45rem .4rem; }
  #obErkannt .ob-teil .ob-zaehlwerk button { width: 30px; }
}

/* Hinzufügen */

/* Kartons: eigene Karte mit Kiste */
#obKartons .ob-karton { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; padding: .9rem 1rem; border-radius: 14px; }
#obKartons .ob-karton .ob-eintrag-name { flex: 1 1 10rem; }
#obKartons .ob-karton .ob-zaehlwerk { border-radius: 999px; background: var(--bg); border-color: var(--line); }
#obKartons .ob-karton .ob-zaehlwerk button { border-radius: 999px; color: var(--teal-deep); }
#obKartons .ob-karton .ob-zaehlwerk span { font: 600 1.05rem/1 var(--font-t); }
/* Kartonzahl direkt eintippen – gross, damit die Schätzung im Mittelpunkt steht */
.ob-karton .ob-karton-hinweis { display: block; margin-top: .2rem; font-size: .76rem; color: var(--text-3); font-weight: 400; }
.ob-karton .ob-karton-zahl { width: 4.6rem; height: 2.6rem; margin: 0 .3rem; padding: 0 .4rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-raised); color: var(--text); font: 600 1.3rem/1 var(--font-t); text-align: center; -moz-appearance: textfield; appearance: textfield; }
.ob-karton .ob-karton-zahl::-webkit-outer-spin-button, .ob-karton .ob-karton-zahl::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ob-karton .ob-karton-zahl:focus { outline: none; border-color: var(--teal-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal-deep) 18%, transparent); }
.ob-karton .ob-zaehlwerk { align-items: center; }
@media (max-width: 480px) {
  #obKartons .ob-karton .ob-zaehlwerk { flex-basis: 100%; justify-content: space-between; }
}

/* ══ Marke in kräftigem Zweiklang ══════════════════════════════════════
   Die bisherige Wortmarke (Masken logo-ai.png + logo-move.png), neu
   eingefärbt: «ai» samt Knotenlinie weiss mit dunklem Umriss, «move» in Koralle.
   Gilt für alle Fassungen, damit die Marke überall gleich aussieht. */
.logo-mark, .logo-mark.getauscht, .logo-mark.signal, .logo-mark.verlauf,
.logo-mark.signal-ai, .logo-mark.gruen, .logo-mark.tonal { --logo-ai: #FFFFFF; --logo-ai-rand: #111111; --logo-move: #CD4C24; }
/* Vektorfassung (tools/logo-vektor.py): Umrisse der Originalmarke als
   SVG-Masken, verdickt, in fünf Ebenen – der Strich durch das «o» läuft
   unten hinter dem Ring durch und oben darüber:
     ::before  unterer Strich, Umriss      (dunkel)
     ::after   unterer Strich, Füllung     (weiss)
     .lg-move  «move»                      (Koralle)
     .lg-ai    «ai» + oberer Strich, Umriss (dunkel)
     .lg-ai::after  dieselben, Füllung     (weiss)                     */
.logo-mark { aspect-ratio: 3720 / 1019; isolation: isolate; }
.logo-mark::before, .logo-mark::after, .lg-ai::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.logo-mark::before { z-index: 1; background-color: var(--logo-ai-rand, #111111); -webkit-mask-image: url("../img/logos/logo-ai-hinten-rand-maske.2c7730d6ebb5.svg"); mask-image: url("../img/logos/logo-ai-hinten-rand-maske.2c7730d6ebb5.svg"); }
.logo-mark::after  { z-index: 2; background-color: var(--logo-ai); -webkit-mask-image: url("../img/logos/logo-ai-hinten-maske.8e31af26338f.svg"); mask-image: url("../img/logos/logo-ai-hinten-maske.8e31af26338f.svg"); }
.lg-move { z-index: 3; -webkit-mask-image: url("../img/logos/logo-move-maske.8cc2d2036029.svg"); mask-image: url("../img/logos/logo-move-maske.8cc2d2036029.svg"); }
.lg-ai   { z-index: 4; background-color: var(--logo-ai-rand, #111111); -webkit-mask-image: url("../img/logos/logo-ai-rand-maske.d74177aea9e7.svg"); mask-image: url("../img/logos/logo-ai-rand-maske.d74177aea9e7.svg"); }
.lg-ai::after { background-color: var(--logo-ai); -webkit-mask-image: url("../img/logos/logo-ai-maske.9cb36906fb20.svg"); mask-image: url("../img/logos/logo-ai-maske.9cb36906fb20.svg"); }
.logo-mark.verlauf .lg-move { background-image: none; background-color: var(--logo-move); }
[data-theme="night"] .logo-mark, .logo-mark.auf-tinte, .logo-mark.hell-auf-tinte, .logo-mark.kalk,
[data-theme="night"] .logo-mark.getauscht, [data-theme="night"] .logo-mark.signal, [data-theme="night"] .logo-mark.verlauf,
[data-theme="night"] .logo-mark.signal-ai, [data-theme="night"] .logo-mark.gruen, [data-theme="night"] .logo-mark.tonal,
[data-theme="night"] .logo-mark.auf-tinte, [data-theme="night"] .logo-mark.hell-auf-tinte { --logo-ai: #FFFFFF; --logo-ai-rand: #111111; --logo-move: #E8673C; }

/* ══ Startseite warm: Creme, Sand, Petrol, Koralle ═════════════════════
   Für Erstbesucher: warm statt technisch. Petrol trägt Vertrauen
   (Marke, Überschriften), Koralle gibt es nur auf Knöpfen, die
   weiterführen. Gilt im hellen Modus; der Dunkelmodus bleibt. */
:root:not([data-theme="night"]) body.start {
  --bg: #FFFFFF;  --bg-raised: #F7F5F1;          /* Hintergrund immer weiss */
  --paper-2: #F7F5F1; --paper-3: #EEEAE3;
  --ink: #16302F; --ink-2: #1D3B39; --ink-3: #27504D;
  --text: #16302F; --text-2: rgba(22,48,47,.74); --text-3: rgba(22,48,47,.52);
  --line: rgba(22,48,47,.14); --line-soft: rgba(22,48,47,.08); --line-hard: rgba(22,48,47,.36);
  --teal: #2A8C84; --teal-deep: #0F5E5C; --teal-dark: #0B4745; --navy: #0F5E5C;
  --accent: #0F5E5C; --hover-wash: rgba(15,94,92,.07);
  --mess: #E2EEE8; --mess-weich: #EEF4EF; --mess-tief: #0F5E5C; --mess-linie: #6FA9A0;
  --grad: linear-gradient(135deg, #E8673C 0%, #CD4C24 100%);
  --glow: 0 14px 30px -12px rgba(205,76,36,.6);
  --hero-bg: #FFFFFF; --hero-panel: #F7F5F1; --hero-fg: #16302F;
  --hero-fg-2: rgba(22,48,47,.76); --hero-fg-3: rgba(22,48,47,.52); --hero-line: rgba(22,48,47,.16);
  --hero-accent: #0F5E5C; --hero-accent-rgb: 15,94,92; --hero-accent-on: #FFFFFF;
  background: var(--bg);
}
:root:not([data-theme="night"]) body.start .masthead { background: color-mix(in srgb, #FFFFFF 90%, transparent); }
:root:not([data-theme="night"]) body.start .grain { opacity: .5; }

/* Überschriften: ruhige Grotesk, Akzentzeile in Petrol, Punkt in Koralle */
body.start .hero-title .l2, body.start .sec-title em { color: var(--teal-deep); }
body.start .hero-title .dot { color: var(--aktion); }

/* Schweizer Plakette statt Code-Zeile */
body.start .hero-top .eyebrow > .mono, body.start .hero-top .eyebrow > .rule,
body.start .hero-top .eyebrow > .van, body.start .hero-top > .mono { display: none; }
.ch-plakette { display: none; }
body.start .ch-plakette {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .4rem;
  border-radius: 999px; background: #E4F0EC; color: var(--teal-deep); font: 600 .82rem/1 var(--font-t);
}
body.start .ch-plakette i { width: 18px; height: 18px; border-radius: 4px; background: #D52B1E; position: relative; flex: none; }
body.start .ch-plakette i::before, body.start .ch-plakette i::after { content: ""; position: absolute; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); }
body.start .ch-plakette i::before { width: 10px; height: 3.2px; }
body.start .ch-plakette i::after { width: 3.2px; height: 10px; }

/* Analyse-Videos laufen wie bisher; im Bild ein Beispielpreis */
.film-preis { display: none; }
body.start .film-preis {
  display: flex; flex-direction: column; gap: .2rem; position: absolute; z-index: 9;
  left: clamp(.9rem, 2vw, 1.4rem); bottom: clamp(.9rem, 2.4vh, 1.4rem);
  padding: .7rem 1rem; border-radius: 14px; background: #FFFFFF; color: #16302F;
  box-shadow: 0 14px 30px -14px rgba(22,48,47,.45);
}
body.start .film-preis span { font-size: .8rem; color: rgba(22,48,47,.66); }
body.start .film-preis b { font: 700 1.05rem/1.1 var(--font-d); letter-spacing: -.01em; }
/* Endreinigung: freundliches Etikett statt rotem Warnschild */
body.start .film-kleber { --kleber-rot: #FFFFFF; color: #16302F; transform: rotate(3deg); box-shadow: 0 14px 30px -14px rgba(22,48,47,.45); }
body.start .film-kleber b { color: var(--teal-deep); font-size: clamp(1.1rem, 1.5vw, 1.45rem); }
body.start .film-kleber em { background: #FBE5DD; color: #8F3212; border-color: transparent; }

/* Hauptknopf: warmes Kupfer (wie im Logo «Tannengrün + Kupfer») mit leichtem
   Verlauf – hebt sich klar von den Petrol-Tönen der Seite ab, wirkt aber
   gediegener als volles Korallenorange. Weisse Schrift (Kontrast ≥ 4,5 : 1),
   der Pfeil-Kreis weiss mit Kupfer-Pfeil. */
body.start .starter-item.ist-haupt { background: linear-gradient(135deg, #C26A36 0%, #9C4E22 100%); border-color: transparent; color: #FFFFFF;
  box-shadow: 0 14px 30px -14px rgba(156,78,34,.6), inset 0 1px 0 rgba(255,255,255,.14); }
body.start .starter-item.ist-haupt:hover, body.start .starter-item.ist-haupt:focus-visible { background: linear-gradient(135deg, #CC743F 0%, #A65427 100%); filter: none; }
body.start .starter-item.ist-haupt .s-ico-wrap { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); }
body.start .starter-item.ist-haupt .s-ico, body.start .starter-item.ist-haupt .s-label { color: #FFFFFF; }
body.start .starter-item.ist-haupt .s-sub { color: rgba(255,255,255,.85); opacity: 1; }
body.start .starter-item.ist-haupt .s-go { background: #FFFFFF; border-color: #FFFFFF; color: #9C4E22; transition: transform .2s ease; }
body.start .starter-item.ist-haupt:hover .s-go, body.start .starter-item.ist-haupt:focus-visible .s-go { background: #FFFFFF; border-color: #FFFFFF; color: #9C4E22; transform: translateX(3px); }

/* Abschnittsköpfe: ohne Nummern und Code-Schrift */
body.start .section-head .mono { font-family: var(--font-t); text-transform: none; letter-spacing: 0; font-size: .85rem; font-weight: 600; color: var(--teal-deep); }
body.start .section-head .mono b { display: none; }
body.start .section-head .mono:last-child { display: none; }
body.start .section-head .rule { opacity: .5; }

/* Vertrauens-Karten: weiss auf Sand, mit Haken */
:root:not([data-theme="night"]) body.start .vertrauen { background: #FFFFFF; }
:root:not([data-theme="night"]) body.start .cards-vertrauen .card { background: #FFFFFF; border: 1px solid rgba(22,48,47,.1); box-shadow: 0 12px 30px -20px rgba(22,48,47,.4); }
body.start .cards-vertrauen .card-mark { font-family: var(--font-t); text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 600; color: var(--teal-deep); display: inline-flex; align-items: center; gap: .4rem; }
body.start .cards-vertrauen .card-mark::before { content: "✓"; width: 20px; height: 20px; border-radius: 50%; background: #E4F0EC; color: var(--teal-deep); display: grid; place-items: center; font-size: .72rem; font-weight: 700; }

/* Abschlussband: warmes Dunkelgrün, Knopf in Koralle */
:root:not([data-theme="night"]) body.start .foot-band {
  background: radial-gradient(90% 140% at 100% 0%, rgba(232,103,60,.22), transparent 60%), #16302F; color: #F4EDE3;
}
body.start .foot-band .foot-claim { color: #F4EDE3; }
body.start .foot-band .foot-claim em { color: #F08A5D; }
body.start .foot-band .foot-kicker .mono { color: rgba(244,237,227,.7); }
body.start .foot-cta { background: var(--aktion); color: #fff; }
body.start .foot-cta:hover { background: var(--aktion-tief); }
:root:not([data-theme="night"]) body.start .site-foot { background: #FFFFFF; }
/* Handy: Video im Querformat, damit «Jetzt Fixpreis berechnen» früher
   im Blick ist; das Endreinigungs-Etikett macht das kleine Bild zu voll. */
@media (max-width: 900px) {
  body.start .hero-film { width: auto; margin-inline: var(--pad); aspect-ratio: 16 / 10; }
  body.start .film-preis { padding: .55rem .8rem; }
  body.start .film-preis b { font-size: .95rem; }
}
@media (max-width: 600px) {
  body.start .film-kleber { display: none; }
  body.start .hero-title { font-size: clamp(2rem, 9vw, 2.6rem); }
}

body.start .film-preis.ist-neu { animation: filmPreisNeu .5s var(--ease); }
@keyframes filmPreisNeu { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Adresse: Etage, Lift und Zufahrt erst nach der Strasse */
.ob-adresse:not(.hat-strasse) .ob-etage,
.ob-adresse:not(.hat-strasse) .ob-lift,
.ob-adresse:not(.hat-strasse) .ob-zufahrt { display: none !important; }
.ob-adresse.ist-neu-strasse .ob-etage,
.ob-adresse.ist-neu-strasse .ob-lift:not([hidden]),
.ob-adresse.ist-neu-strasse .ob-zufahrt { animation: obFrageRein .35s var(--ease) both; }

/* ══ «Was kommt mit?»: Lieferwagen, Räume, Kacheln zum Antippen ═══════ */
.ob-inventar { margin-top: .2rem; }
.ob-wagen { margin-bottom: .9rem; }

/* Räume */
#obErkannt { border: 0; margin: 0; }
.ob-raum { border: 1px solid var(--line); border-radius: 14px; background: var(--bg); margin-bottom: .5rem; transition: border-color .2s var(--ease); }
.ob-raum[hidden] { display: none !important; }
.ob-raum.offen { border-color: color-mix(in srgb, var(--teal-deep) 45%, var(--line)); }
.ob-raum-kopf { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .8rem .95rem; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--text); }
.ob-raum-kopf b { flex: 1; font-weight: 600; font-size: .95rem; }
.ob-raum-sum { font-size: .82rem; color: var(--text-2); }
.ob-raum-ok { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #E4F0EC; color: var(--teal-deep); font-size: .72rem; font-weight: 700; }
.ob-raum-ok::before { content: "✓"; }
.ob-raum-kartons.ist-offen-pruefen .ob-raum-ok::before { content: "!"; }
.ob-raum-kartons.ist-offen-pruefen .ob-raum-sum { color: var(--aktion-text); font-weight: 600; }
.ob-raum-pfeil { width: 9px; height: 9px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease); flex: none; margin-right: .2rem; }
.ob-raum.offen .ob-raum-pfeil { transform: rotate(-135deg) translateY(-2px); }
.ob-raum:not(.offen) > .ob-teile, .ob-raum:not(.offen) > .ob-raum-inhalt { display: none; }
.ob-raum.offen > .ob-teile, .ob-raum.offen > .ob-raum-inhalt { animation: obFrageRein .3s var(--ease) both; }

/* Kacheln */
#obErkannt .ob-teile { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .6rem; padding: .3rem .8rem .95rem; }
#obErkannt .ob-teil { position: relative; display: block; margin: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--teal-deep) 26%, var(--line)); border-radius: 12px; background: var(--bg); opacity: 1; grid-template-columns: none; }
#obErkannt .ob-teil-plus { display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 100%; padding: .75rem .3rem .65rem; background: none; border: 0; cursor: pointer; font: inherit; color: var(--text); border-radius: 12px; }
#obErkannt .ob-teil-plus:active { transform: scale(.96); }
#obErkannt .ob-teil .ob-teil-sym { width: auto; height: auto; background: none; border-radius: 0; color: var(--teal-deep); }
#obErkannt .ob-teil .ob-teil-sym svg { width: 30px; height: 30px; }
#obErkannt .ob-teil .ob-eintrag-name { font-size: .78rem; font-weight: 500; line-height: 1.2; text-align: center; min-height: 0; overflow: visible; }
#obErkannt .ob-teil .ob-zaehlwerk { position: static; display: contents; border: 0; background: none; }
#obErkannt .ob-teil .ob-teil-zahl { position: absolute; padding: 0 6px; border-radius: 12px;
  display: grid; place-items: center; background: var(--teal-deep); color: #fff; font: 700 .78rem/1 var(--font-t); pointer-events: none; }
#obErkannt .ob-teil .ob-teil-minus { position: absolute; border-radius: 50%; padding: 0;
  display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-hard); line-height: 1; }
#obErkannt .ob-teil .ob-teil-minus:hover { color: var(--aktion); border-color: var(--aktion); background: var(--bg); }
#obErkannt .ob-teil.ist-null { opacity: .5; border-style: dashed; border-color: var(--line); }
#obErkannt .ob-teil.ist-null .ob-teil-zahl, #obErkannt .ob-teil.ist-null .ob-teil-minus { display: none; }
#obErkannt .ob-teil.ist-null .ob-teil-sym { color: var(--text-3); }
#obErkannt .ob-teil .ob-optionen { display: flex; justify-content: center; gap: .2rem; padding: 0 .3rem .5rem; margin-top: -.25rem; pointer-events: none; }
#obErkannt .ob-teil .ob-opt[aria-pressed="false"] { display: none; }
#obErkannt .ob-teil .ob-opt { font-size: .62rem; padding: .1rem .45rem; border-radius: 999px; }
#obErkannt .ob-teil .ob-optionen:not(:has(.ob-opt[aria-pressed="true"])) { display: none; }
@media (max-width: 560px) {
  #obErkannt .ob-teile { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; padding: .3rem .65rem .9rem; }
  #obErkannt .ob-teil { display: block; padding: 0; }
  #obErkannt .ob-teil .ob-teil-sym { width: auto; height: auto; }
  #obErkannt .ob-teil .ob-eintrag-name { overflow: visible; text-overflow: clip; font-size: .74rem; }
  .ob-inventar.ob-karte { padding-inline: 0; }
}

/* Kartons als eigener Raum */
.ob-raum-inhalt { padding: 0 .95rem .95rem; }
.ob-karton-hilfe { margin: 0 0 .7rem; font-size: .85rem; color: var(--text-2); }
#obRaumKartons .ob-kartons { margin: 0; }
#obRaumKartons .ob-karton { border: 0; padding: 0 !important; background: none; }
#obRaumKartons .ob-karton .ob-teil-sym, #obRaumKartons .ob-karton .ob-eintrag-name { display: none; }
#obRaumKartons .ob-karton .ob-zaehlwerk { flex-basis: 100%; justify-content: space-between; }

/* Frage «Entsorgen» */
.ob-weg { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .75rem .3rem .65rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; font: 500 .76rem/1.2 var(--font-t); color: var(--text); text-align: center; }
.ob-weg svg { width: 28px; height: 28px; color: var(--teal-deep); }
.ob-weg.gewaehlt { border-color: var(--aktion); background: var(--aktion-weich); color: var(--aktion-text); }
.ob-weg.gewaehlt svg { color: var(--aktion); }
/* Feinschliff Kacheln: zugeklappt wirklich zu, Zahl und Minus in der
   Kachel statt darüber, Zerbrechlich nicht anzeigen (läuft automatisch) */
#obErkannt .ob-raum:not(.offen) > .ob-teile { display: none; }
#obErkannt .ob-teil .ob-teil-zahl { top: 6px; right: 6px; min-width: 22px; height: 22px; font-size: .74rem; }
#obErkannt .ob-teil .ob-teil-minus { top: 6px; left: 6px; width: 22px; height: 22px; border-color: var(--line); color: var(--text-3); font-size: .9rem; }
#obErkannt .ob-teil .ob-opt-z { display: none !important; }
#obErkannt .ob-teil .ob-optionen:not(:has(.ob-opt-e[aria-pressed="true"])) { display: none; }
#obErkannt .ob-teil-plus { padding-top: 1.85rem; padding-bottom: .6rem; }

/* ══ Lieferwagen / Lastwagen und Mulde – begleiten bis zum Fixpreis ═══ */
.ob-wagen { padding: .8rem .9rem .7rem; margin: 0 0 1rem; border-radius: 16px; }
.ob-wagen[hidden] { display: none !important; }
.ob-wagen-defs { position: absolute; width: 0; height: 0; }
.ob-wagen-reihe { display: flex; align-items: flex-end; gap: .9rem; }
.ob-wagen-flotte { display: flex; align-items: flex-end; gap: .6rem; }
.ob-lw { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; animation: obFrageRein .35s var(--ease) both; }
.ob-lw svg { width: 108px; height: auto; display: block; }
.ob-lw.ist-lkw svg { width: 150px; }
.ob-lw figcaption { font-size: .74rem; color: var(--text-2); white-space: nowrap; }
.ob-lw figcaption b { color: var(--teal-deep); font-weight: 700; }
.ob-wagen-text { margin: .55rem 0 0; font-size: .8rem; color: var(--text-2); }

/* Mulde für Entsorgtes */
.ob-mulde { display: flex; flex-direction: column; align-items: center; gap: .1rem; flex: none; }
.ob-mulde[hidden] { display: none !important; }

.ob-mulde-bild { height: auto; }
.ob-mulde-bild path { fill: var(--aktion-weich); stroke: var(--aktion); stroke-width: 2; stroke-linejoin: round; }
.ob-mulde-bild circle { fill: #16302F; }
.ob-mulde-text { font-size: .72rem; color: var(--aktion-text); white-space: nowrap; margin-top: .15rem; }

@media (max-width: 560px) {
  .ob-lw svg { width: 92px; }
  .ob-lw.ist-lkw svg { width: 128px; }
  .ob-wagen { padding: .65rem .75rem .6rem; }
}
/* Fahrzeuge und Mulde in einer Reihe; Fahrzeuge werden bei Platzmangel kleiner */
.ob-wagen-reihe { flex-wrap: nowrap; }
.ob-wagen-flotte { flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; }
.ob-lw { min-width: 0; }
.ob-lw svg, .ob-lw.ist-lkw svg { width: 100%; }
.ob-lw figcaption { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .ob-lw figcaption { font-size: .68rem; }
  .ob-mulde-bild { width: 62px; }
  .ob-mulde-text { font-size: .66rem; }
}
/* Fahrzeuge im Stil der Canva-Vorlage */
.ob-lw svg { overflow: visible; }

/* ══ 3D-Fahrzeuge aus Canva mit Kartons ══════════════════════════════ */
.ob-wagen { background: var(--bg); border: 1px solid var(--line); color: var(--text); }
.lw-bild { width: 100%; }
.lw-bild img { display: block; width: 100%; height: auto; }
.lw-bild .lw-kisten, .ob-mulde-bild .lw-kisten { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ob-lw figcaption { margin-top: .1rem; }

/* Mulde aus Canva, Kartons fallen hinein */
.ob-mulde-bild { position: relative; }
.ob-mulde-bild img { display: block; width: 100%; height: auto; }

@media (max-width: 560px) {
  .ob-lw { flex-basis: 128px; }
  .ob-lw.ist-lkw { flex-basis: 180px; }
  .ob-mulde-bild { width: 66px; }
}

/* ══ Schweizer Umzugswagen mit Hebebühne und eigenen Möbeln ══════════ */
.lw-bild { position: relative; }
.lw-bild .lw-zu { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.ob-lw.ist-zu .lw-zu { opacity: 1; }
.ob-lw.ist-zu .lw-offen { transition: opacity .6s ease .1s; opacity: 0; }
.lw-bild .lw-kisten { z-index: 2; }
.lw-moebel { transform-box: view-box; }
/* Rein und raus mit einem kurzen «Pop» – vom Fuss des Möbels aus */
.lw-fracht .lw-moebel { transform-box: fill-box; transform-origin: 50% 92%; }
.lw-moebel.ist-neu { animation: obPopRein .32s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes obPopRein { 0% { transform: scale(0); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
/* In die Mulde: von oben hineinfallen, leicht kippen, beim Aufkommen
   nachfedern */
#obMuldeKisten .lw-moebel { transform-box: fill-box; transform-origin: 50% 100%; }
.lw-moebel.ist-in-mulde { animation: obInMuldeMoebel .75s cubic-bezier(.45,0,.55,1) both; }
@keyframes obInMuldeMoebel {
  0% { transform: translateY(-120px) rotate(-14deg); opacity: 0; }
  12% { opacity: 1; }
  62% { transform: translateY(6px) rotate(4deg) scaleY(.94); }
  80% { transform: translateY(-4px) rotate(-1deg) scaleY(1.02); }
  100% { transform: none; opacity: 1; }
}
.ob-lw { flex: 0 1 170px; }
.ob-lw.ist-lkw { flex-basis: 190px; }
/* «Was kommt mit?»: Wagen gross, damit man die Möbel erkennt */
.ob[data-frage="liste"] .ob-lw { flex: 1 1 0; max-width: 330px; }
.ob[data-frage="liste"] .ob-wagen-flotte { justify-content: center; }
.ob[data-frage="liste"] .ob-wagen { box-shadow: none; }
.ob-mulde-bild { width: 92px; }
@media (max-width: 560px) {
  .ob-lw { flex-basis: 140px; }
  .ob-lw.ist-lkw { flex-basis: 156px; }
  .ob-mulde-bild { width: 70px; }
}
.lw-moebel.ist-raus { animation: obPopRaus .22s cubic-bezier(.5,0,.8,.5) both; pointer-events: none; }
@keyframes obPopRaus { 0% { transform: none; opacity: 1; } 35% { transform: scale(1.08); } 100% { transform: scale(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lw-moebel.ist-neu, .lw-moebel.ist-in-mulde { animation: none; } .lw-moebel.ist-raus { display: none; } }

/* ══ Fotos und Video immer wieder anbieten ═══════════════════════════ */
[data-nur-standard][hidden], [data-nur-aufnahmen][hidden] { display: none !important; }
.ob-wagen-quelle { margin: .35rem 0 0; font-size: .78rem; color: var(--text-3); }
.ob-wagen-quelle .ob-link { font-size: inherit; font-weight: 600; color: var(--aktion); }
.ob-quelle-gemessen { color: #0F6E56; font-weight: 600; }
.ob-foto-tipp { display: flex; gap: .8rem; align-items: flex-start; margin: 0 0 1rem; padding: .95rem 1rem; border-radius: 14px;
  background: var(--aktion-weich); border: 1px solid color-mix(in srgb, var(--aktion) 30%, transparent); color: var(--text); }
.ob-foto-tipp > svg { width: 28px; height: 28px; flex: none; color: var(--aktion); margin-top: .1rem; }
.ob-foto-tipp b { display: block; font-size: .95rem; margin-bottom: .2rem; }
.ob-foto-tipp p { margin: 0; font-size: .86rem; color: var(--text-2); line-height: 1.45; }
.ob-foto-tipp .ob-foto-tipp-knoepfe { margin-top: .7rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.ob-foto-tipp .btn-line { border-color: var(--aktion); color: var(--aktion-text); background: var(--bg); }
.ob-foto-tipp .ob-link { font-size: .85rem; }
.ob-foto-hinweis { display: flex; gap: .55rem; align-items: flex-start; margin: .8rem 0 0; font-size: .84rem; color: var(--text-2); }
.ob-foto-hinweis svg { width: 20px; height: 20px; flex: none; color: var(--aktion); margin-top: .05rem; }
.ob-foto-hinweis .ob-link { font-size: inherit; font-weight: 600; color: var(--aktion); }
/* «Genauer mit Fotos» in der Liste: als Empfehlung hervorgehoben */
.ob-genauer { border-color: color-mix(in srgb, var(--aktion) 45%, transparent); background: var(--aktion-weich); }
.ob-genauer svg, .ob-genauer > span:last-child { color: var(--aktion); }
.ob-genauer:hover { border-color: var(--aktion); }

/* ══ Deine Angaben: mitlaufende Übersicht ═══════════════════════════ */
.ob-angaben { margin: .6rem 0 .75rem; border: 1px solid var(--line, #E3E6E8); border-radius: 12px; background: #fff; }
.ob-angaben-kopf { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; cursor: pointer; font-size: .85rem; }
.ob-angaben-kopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.ob-angaben-kopf b { flex: none; font-weight: 600; color: var(--text-1, #111); }
.ob-angaben-kurz { flex: 1; min-width: 0; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-angaben.offen .ob-raum-pfeil { transform: rotate(-135deg) translateY(-2px); }
.ob-angaben-liste { margin: 0; padding: 0 .8rem .55rem; display: grid; gap: .1rem; }
.ob-angaben-liste[hidden] { display: none; }
.ob-angabe { display: grid; grid-template-columns: 6.2rem 1fr auto; gap: 0 .6rem; align-items: baseline; padding: .3rem 0; border-top: 1px solid var(--line, #EEF0F1); font-size: .82rem; line-height: 1.35; }
.ob-angabe dt { color: var(--text-3); font-size: .74rem; }
.ob-angabe dd { margin: 0; color: var(--text-1, #111); overflow-wrap: anywhere; }
.ob-angabe .ob-link { font-size: .8rem; }
.ob-angabe.ist-hier dt, .ob-angabe.ist-hier dd { font-weight: 600; }
@media (max-width: 420px) {
  .ob-angabe { grid-template-columns: 1fr auto; }
  .ob-angabe dd { grid-column: 1 / 2; }
  .ob-angabe .ob-link { grid-row: 1; grid-column: 2; }
}

/* ══ Marke in acht Farbkombinationen ════════════════════════════════
   assets/marke.js vergibt je Logo eine Kombination (.logo-f1 … f8):
   Farbe A für «ai» und den Strich durch das «o», Farbe B für «move»,
   ohne Umriss. Nur im hellen Modus. Vorlagen: entwuerfe/logo-farben/,
   Vorschau mit Dunkel-Tönen: entwuerfe/logo-vorschlaege.html. */
:root:not([data-theme="night"]) .logo-mark.logo-f1 { --logo-ai: #1F4D3A; --logo-move: #C2703D; --logo-ai-rand: transparent; }  /* Tannengrün + Kupfer */
:root:not([data-theme="night"]) .logo-mark.logo-f2 { --logo-ai: #0E3B5C; --logo-move: #2BB59A; --logo-ai-rand: transparent; }  /* Tiefseeblau + Mint */
:root:not([data-theme="night"]) .logo-mark.logo-f3 { --logo-ai: #2B2F33; --logo-move: #0F7C7A; --logo-ai-rand: transparent; }  /* Graphit + Petrol */
:root:not([data-theme="night"]) .logo-mark.logo-f4 { --logo-ai: #D52B1E; --logo-move: #0F5E5C; --logo-ai-rand: transparent; }  /* Schweizerrot + Petrol */
:root:not([data-theme="night"]) .logo-mark.logo-f5 { --logo-ai: #14284B; --logo-move: #D9961A; --logo-ai-rand: transparent; }  /* Marine + Senf */
:root:not([data-theme="night"]) .logo-mark.logo-f6 { --logo-ai: #4A2545; --logo-move: #E8865A; --logo-ai-rand: transparent; }  /* Aubergine + Apricot */
:root:not([data-theme="night"]) .logo-mark.logo-f7 { --logo-ai: #0B4745; --logo-move: #2A9D8F; --logo-ai-rand: transparent; }  /* Petrol tonal */
:root:not([data-theme="night"]) .logo-mark.logo-f8 { --logo-ai: #16253F; --logo-move: #E0573A; --logo-ai-rand: transparent; }  /* Nachtblau + Koralle */

/* ══ «Was kommt mit?» spielerischer ═══════════════════════════════════ */
/* Haken im Raumkopf: grau, bis der Raum bearbeitet ist – dann Petrol */
.ob-raum .ob-raum-ok { background: #EEF0F0; color: #B4BCBC; transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.ob-raum.ist-bearbeitet .ob-raum-ok { background: var(--teal-deep); color: #FFFFFF; transform: scale(1.06); }
.ob-raum-kartons.ist-offen-pruefen .ob-raum-ok { background: var(--aktion-weich); color: var(--aktion-text); transform: none; }
/* Fuss je Raum: Hinweis, Foto, Raum fertig */
.ob-raum:not(.offen) > .ob-raum-fuss { display: none; }
.ob-raum-fuss { display: grid; gap: .5rem; padding: .2rem .7rem .75rem; }
.ob-tipp { margin: 0; padding: .55rem .7rem; border-radius: 10px; background: #FFF6DE; color: #6B4E00; font-size: .8rem; line-height: 1.4; }
.ob-tipp::before { content: "💡 "; }
.ob-tipp.ist-neu { animation: obFrageRein .35s var(--ease) both; }
.ob-raum-foto { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px dashed color-mix(in srgb, var(--aktion) 55%, transparent);
  border-radius: 10px; background: var(--aktion-weich); color: var(--aktion-text); cursor: pointer; }
.ob-raum-foto svg { width: 22px; height: 22px; flex: none; color: var(--aktion); }
.ob-raum-foto span { display: grid; gap: 1px; }
.ob-raum-foto b { font-size: .84rem; }
.ob-raum-foto small { font-size: .74rem; opacity: .85; }
.ob-raum-foto.ist-fertig { border-style: solid; background: #E7F1EE; border-color: color-mix(in srgb, var(--teal-deep) 40%, transparent); color: var(--teal-deep); }
.ob-raum-foto.ist-fertig svg { color: var(--teal-deep); }
.ob-raum-weiter { justify-self: end; padding: .45rem .9rem; border: 1px solid var(--line-hard, #999); border-radius: 999px; background: var(--bg);
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--text); cursor: pointer; }
.ob-raum-weiter:hover { border-color: var(--teal-deep); color: var(--teal-deep); }
/* Karton-Rechner */
/* Eigener Gegenstand */
.ob-hinzu-groessen { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.ob-hinzu-groessen button { all: unset; box-sizing: border-box; display: grid; gap: 1px; text-align: center; padding: .45rem .3rem; border-radius: 10px;
  background: #FFFFFF; border: 1px solid color-mix(in srgb, var(--aktion) 35%, transparent); cursor: pointer; }
.ob-hinzu-groessen b { font-size: .84rem; color: var(--text); }
.ob-hinzu-groessen small { font-size: .7rem; color: var(--text-3); }
.ob-hinzu-groessen button:focus-visible { outline: 2px solid var(--aktion); }
/* Wagen: Momente, Sparhinweis, Genauigkeit */
.ob-wagen { position: relative; }
.ob-wagen-moment { position: absolute; left: 50%; top: .5rem; z-index: 5; margin: 0; transform: translateX(-50%); padding: .4rem .85rem; border-radius: 999px;
  background: #1F2B2B; color: #FFFFFF; font-size: .8rem; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); pointer-events: none; }
.ob-wagen-moment.ist-neu { animation: obMoment 2.8s var(--ease) both; }
@keyframes obMoment { 0% { opacity: 0; transform: translate(-50%, -6px) scale(.9); } 10%, 85% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -4px); } }
.ob-lw.ist-angekommen { animation: obWagenVor .7s cubic-bezier(.2,.8,.3,1) both; }
@keyframes obWagenVor { 0% { transform: translateX(60%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ob-wagen-spar { margin: .45rem 0 0; padding: .45rem .6rem; border-radius: 10px; background: #FFF6DE; color: #6B4E00; font-size: .78rem; line-height: 1.4; }
.ob-wagen-spar .ob-link { font-size: inherit; font-weight: 600; color: var(--aktion); }
.ob-genau { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: .1rem .55rem; margin-top: .5rem; font-size: .76rem; color: var(--text-2); }
.ob-genau[hidden] { display: none; }
.ob-genau-balken { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ob-genau-balken i { display: block; height: 100%; width: 0; border-radius: 4px; background: #E0A526; transition: width .5s var(--ease), background .3s; }
.ob-genau.ist-hoch .ob-genau-balken i { background: var(--teal-deep); }
.ob-genau-zahl { font-weight: 700; color: var(--text); }
.ob-genau-tipp { grid-column: 1 / -1; color: var(--text-3); font-size: .74rem; }
@media (prefers-reduced-motion: reduce) { .ob-lw.ist-angekommen, .ob-wagen-moment.ist-neu, .ob-tipp.ist-neu { animation: none; } }
.ob-raum-foto.ist-laeuft { border-style: solid; }
.ob-raum-foto.ist-laeuft svg { animation: obFotoPuls 1s ease-in-out infinite; }
@keyframes obFotoPuls { 50% { opacity: .35; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .ob-raum-foto.ist-laeuft svg { animation: none; } }

/* ══ Handy: robust gegen Safari (iPhone) ═══════════════════════════════
   1. Nichts darf seitlich überstehen. «clip» statt «hidden»: iOS Safari
      lässt die Seite bei overflow-x: hidden auf body trotzdem seitlich
      wischen, clip schneidet hart ab und bricht position: sticky nicht.
   2. Das Video oben auf der Startseite: Safari rechnet aspect-ratio bei
      width: auto in einer Flex-Spalte falsch und zeichnet das Video
      breiter als den Rahmen – es ragt dann links hinaus. Deshalb Breite
      und Höhe fest aus der Fensterbreite, Rahmen schneidet ab, und die
      Maske sorgt dafür, dass Safari die runden Ecken beim Video hält. */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
img, video, svg, canvas, iframe { max-width: 100%; }
@media (max-width: 900px) {
  body.start .hero-film {
    position: relative; inset: auto; flex: none; align-self: stretch;
    width: auto; max-width: none; margin: .75rem var(--pad) 0;
    height: calc((100vw - 2 * var(--pad)) * .625); aspect-ratio: auto;
    overflow: hidden; border-radius: var(--r);
    -webkit-mask-image: -webkit-radial-gradient(white, black); isolation: isolate;
  }
  body.start .hero-film video, body.start .hero-film .poster {
    left: 0; top: 0; right: auto; bottom: auto; width: 100%; height: 100%; max-width: 100%; object-fit: cover;
  }
}
/* Lange Etiketten dürfen auf dem Handy umbrechen statt hinauszuragen */
@media (max-width: 600px) {
  .page-kicker, .sec-mark, .section-head { flex-wrap: wrap; min-width: 0; }
  .page-kicker .mono, .sec-mark .mono, .section-head .mono { white-space: normal; min-width: 0; }
  .page-kicker .rule, .sec-mark .rule { min-width: 1.5rem; }
}
/* «Nach oben» darf am Seitenende nichts verdecken: Platz unter dem Fuss */
@media (max-width: 900px) {
  .site-foot { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
  .foot-socials { margin-left: 0; }
  .to-top { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
}
/* Handy-Menü: Sprachwahl sichtbar (oben in der Leiste ist sie ausgeblendet) */
@media (max-width: 900px) {
  .drawer .lang-select { display: inline-block; height: 40px; padding: 0 .7rem; font-size: .9rem; }
  .drawer-foot { flex-wrap: wrap; }
}
@media (max-width: 900px) { .drawer .d-cta { margin-top: 1.4rem; justify-content: center; text-align: center; } }
/* iPhone ohne Home-Knopf: Fussleiste des Formulars über dem Home-Balken */
.ob-fuss { padding-bottom: max(.9rem, env(safe-area-inset-bottom, 0px)); }

/* ══ Wie füllen wir deinen Wagen? ════════════════════════════════════ */
.ob-leerwagen { margin: .2rem auto .7rem; max-width: 230px; text-align: center; }
.ob-leerwagen img { display: block; width: 100%; height: auto; }
.ob-leerwagen figcaption { margin-top: .2rem; font-size: .8rem; color: var(--text-3); }
.ob-wege { display: grid; gap: .6rem; }
.ob-wegwahl { all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: .3rem .8rem;
  padding: .9rem 1rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg); cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
.ob-wegwahl:hover { border-color: color-mix(in srgb, var(--teal-deep) 45%, var(--line)); }
.ob-wegwahl:focus-visible { outline: 2px solid var(--aktion); outline-offset: 2px; }
.ob-wegwahl-sym { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #EEF4F2; color: var(--teal-deep); }
.ob-wegwahl-sym svg { width: 24px; height: 24px; }
.ob-wegwahl-text { display: grid; gap: .15rem; min-width: 0; }
.ob-wegwahl-text b { font-size: 1rem; color: var(--text); }
.ob-wegwahl-text small { font-size: .8rem; line-height: 1.35; color: var(--text-2); }
.ob-wegwahl-zeit { font-style: normal; font-size: .72rem; color: var(--text-3); white-space: nowrap; align-self: start; padding-top: .15rem; }
.ob-wegwahl-marke { position: absolute; top: -.6rem; left: .9rem; padding: .12rem .55rem; border-radius: 999px; background: var(--aktion); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; }
.ob-wegwahl.ist-empfohlen { border-color: color-mix(in srgb, var(--aktion) 45%, var(--line)); background: #FFFAF7; }
.ob-wegwahl.ist-empfohlen .ob-wegwahl-sym { background: var(--aktion-weich); color: var(--aktion); }
.ob-wegwahl.gewaehlt { border-color: var(--teal-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal-deep) 18%, transparent); background: #F2F8F6; }
.ob-wegwahl.gewaehlt .ob-wegwahl-sym { background: var(--teal-deep); color: #fff; }
.ob-wegwahl.gewaehlt::after { content: "✓"; position: absolute; top: .55rem; right: .7rem; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--teal-deep); color: #fff; font-size: .7rem; font-weight: 700; }
.ob-wegwahl.gewaehlt .ob-wegwahl-zeit { visibility: hidden; }
@media (max-width: 420px) { .ob-wegwahl { grid-template-columns: 40px minmax(0, 1fr); } .ob-wegwahl-zeit { grid-column: 2; padding: 0; } }
/* Anleitung Foto-Analyse */
.ob-anleitung { margin: 1rem 0 .2rem; }
.ob-anleitung[hidden] { display: none; }
.ob-anleitung-titel { margin: 0 0 .5rem; font-size: .9rem; font-weight: 600; }
.ob-anleitung-schritte { list-style: none; margin: 0; padding: 0 0 .4rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 46%);
  gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.ob-anleitung-schritte li { scroll-snap-align: start; display: grid; gap: .45rem; padding: .5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.ob-anleitung-schritte img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #F3F6F5; }
.ob-anleitung-schritte span { display: grid; gap: .2rem; padding: 0 .2rem .2rem; }
.ob-anleitung-schritte b { display: flex; align-items: center; gap: .4rem; font-size: .86rem; }
.ob-anleitung-schritte b i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-deep); color: #fff; font-size: .7rem; flex: none; }
.ob-anleitung-schritte small { font-size: .78rem; line-height: 1.35; color: var(--text-2); }
@media (min-width: 760px) { .ob-anleitung-schritte { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }
.ob-anleitung.ist-kompakt .ob-anleitung-schritte { grid-auto-columns: minmax(170px, 40%); }
/* Raum für Raum: nur der offene Raum, mit Navigation */
.ob-raum-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; }
.ob-raum-schritt { text-align: center; font-size: .76rem; color: var(--text-3); }
.ob-raum-zurueck { all: unset; cursor: pointer; padding: .45rem .2rem; font-size: .82rem; color: var(--text-2); }
.ob-raum-zurueck[hidden] { visibility: hidden; display: inline; }
.ob-raum-nav .ob-raum-weiter { justify-self: end; background: var(--teal-deep); color: #fff; border-color: var(--teal-deep); }
.ob-raum-nav .ob-raum-weiter:hover { color: #fff; filter: brightness(1.08); }
.ob-raum-fuss-nav { padding: .6rem 0 0; }
.ist-raumweise.hat-offen .ob-raum:not(.offen) { display: none; }
.ist-raumweise.hat-offen .ob-raum.offen { margin-bottom: .8rem; }

/* ══ «So funktioniert's» mit Bildern aus Canva ═══════════════════════
   Jede Szene ein Bild mit langsamem Heranfahren (wie im Video), der
   Text blendet von unten ein. Pausiert der Player, steht alles still. */
@keyframes hwText { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Texte im Bild: Der weisse Rahmen trägt links den Text, rechts die
   Illustration – wie eine Folie im Erklärvideo. Titel und Punkte poppen
   auf, sobald das passende Bild-Element erscheint (--t je Punkt im HTML).
   Am Handy steht der Text über der Illustration. Die Szenen liegen im
   selben Rasterfeld, so ist die Bühne so hoch wie die höchste Szene. */
.hw-stage:has(.hw-szene-bild) { display: grid; min-height: 0; }
.hw-stage:has(.hw-szene-bild) .hw-scene { position: relative; inset: auto; grid-area: 1 / 1; justify-content: center; }
.hw-szene-bild .hw-art { flex: none; width: 100%; max-width: calc((100svh - 21rem) * 2.7); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); align-items: center;
  overflow: hidden; border-radius: 14px; background: #FEFEFE; container-type: inline-size; }
.hw-szene-bild .hw-buehne { height: auto; aspect-ratio: 1680 / 944; }
.hw-szene-bild .hw-cap { padding: 0 0 0 clamp(1rem, 4cqw, 2.3rem); }
#howto .hw-szene-bild .hw-mark { color: #B8461F; background: #FBEDE6; }
#howto .hw-szene-bild .hw-cap h3 { color: #12302F; font-size: clamp(1.02rem, 3.1cqw, 1.65rem); line-height: 1.12; margin: 0 0 clamp(.55rem, 1.6cqw, .9rem); }
.hw-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(.3rem, 1cqw, .5rem); }
.hw-punkte li { display: flex; align-items: flex-start; gap: .45rem; font-size: clamp(.76rem, 1.75cqw, .95rem); line-height: 1.3; color: #31504E; font-weight: 500; }
.hw-punkte li::before { content: ""; flex: none; width: 1.05em; height: 1.05em; margin-top: .08em; border-radius: 50%;
  background: #D2572B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 72% no-repeat; }
.hw-szene-bild.is-on .hw-mark { animation: hwPop .45s 0s cubic-bezier(.2,.9,.3,1.3) both; }
.hw-szene-bild.is-on .hw-cap h3 { animation: hwText .6s .15s var(--ease) both; }
.hw-szene-bild.is-on .hw-punkte li { animation: hwPunkt .5s var(--t, 1s) cubic-bezier(.2,.9,.3,1.25) both; }
.hw-szene-bild:not(.is-on) .hw-cap * { animation: none; }
@keyframes hwPop { 0% { opacity: 0; transform: scale(.5); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes hwPunkt { 0% { opacity: 0; transform: translateX(-10px) scale(.92); } 65% { opacity: 1; transform: translateX(2px) scale(1.03); } 100% { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .hw-szene-bild .hw-art { grid-template-columns: 1fr; max-width: none; }
  .hw-szene-bild .hw-cap { padding: 1rem 1rem .4rem; }
  #howto .hw-szene-bild .hw-cap h3 { font-size: 1.08rem; margin-bottom: .5rem; }
  .hw-punkte { gap: .3rem; }
  .hw-punkte li { font-size: .76rem; }
}
.is-paused .hw-szene-bild .eb, .is-paused .hw-szene-bild .hw-cap * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hw-szene-bild .eb, .hw-szene-bild .hw-cap * { animation: none !important; }
  .hw-stage:has(.hw-szene-bild) { display: block; }
}
.hw-cta-zeile { padding: .7rem clamp(1rem, 3vw, 1.6rem); border-top: 1px solid var(--line); background: var(--bg); }
.hw-cta { display: flex; justify-content: center; align-items: center; gap: .5rem; padding: .85rem 1.2rem; border-radius: 999px;
  background: var(--aktion); color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none; }
.hw-cta::after { content: "→"; }
.hw-cta:hover { background: var(--aktion-tief); }
.hw-szene-bild .hw-cap h3 { max-width: none; } .hw-szene-bild .hw-cap p { max-width: 60ch; }

/* ══ Erklärvideo: Szenen aus Canva-Ebenen ══════════════════════════════
   Jede Szene ist eine Bühne (Seitenverhältnis 1680 × 944) aus einzelnen
   freigestellten Ebenen (assets/erklaer/s1…s6), die wie in einem
   Erklärvideo nacheinander auftreten und sich bewegen. Wege in cqw
   (Breite der Bühne), damit alles mit der Grösse mitskaliert.
   Gestartet wird, sobald die Szene .is-on bekommt. */
.hw-buehne { position: relative; width: 100%; height: 100%; container-type: inline-size; overflow: hidden; }
.hw-buehne .eb { position: absolute; display: block; height: auto; max-width: none; pointer-events: none; }
.hw-szene-bild:not(.is-on) .eb { animation: none !important; }
/* Erste Animation je Ebene hält Anfang und Ende (both), die zweite ihr Ende (forwards) */
.hw-szene-bild.is-on .eb { animation-fill-mode: both, forwards; }
@keyframes ebBlende { from { opacity: 0; } to { opacity: 1; } }
@keyframes ebPop { 0% { opacity: 0; transform: scale(.4); } 65% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: none; } }
@keyframes ebVonUnten { from { opacity: 0; transform: translateY(9cqw); } to { opacity: 1; transform: none; } }
@keyframes ebVonOben { 0% { opacity: 0; transform: translateY(-14cqw); } 60% { opacity: 1; transform: translateY(1cqw); } 80% { transform: translateY(-.5cqw); } 100% { opacity: 1; transform: none; } }

@keyframes ebVonRechts { from { opacity: 0; transform: translateX(9cqw); } to { opacity: 1; transform: none; } }
@keyframes ebZeichnen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ebZeichnenAbwaerts { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ebFunkeln { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.7) rotate(25deg); opacity: .6; } }
@keyframes ebWippen { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes ebPuls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes ebSchweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.6cqw); } }

/* 1 · Richtwert in 30 Sekunden: Formular füllt sich, Preisschild fliegt heraus, Route zeichnet sich */
.hw-b1 .eb-screen-oben { animation: ebPop .5s .4s ease; transform-origin: 50% 70%; }
.hw-b1 .eb-screen-unten { animation: ebZeichnen .9s 1s steps(9) both; }
.hw-b1 .eb-preis { transform-origin: 8% 45%; animation: ebPreisRaus .9s 2s cubic-bezier(.2,.9,.3,1.2) both, ebPreisSchwingen 2.2s 2.9s ease-in-out infinite; }
@keyframes ebPreisRaus { 0% { opacity: 0; transform: translate(-7cqw, 7cqw) scale(.2) rotate(-30deg); } 100% { opacity: 1; transform: none; } }
@keyframes ebPreisSchwingen { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
.hw-b1 .eb-strahlen { animation: ebPop .4s 2.7s ease both, ebFunkeln 1.2s 3.1s ease-in-out infinite; }
.hw-b1 .eb-funkeln { animation: ebPop .5s 2.8s ease both, ebFunkeln 1.6s 3.3s ease-in-out infinite; }
.hw-b1 .eb-karte { animation: ebVonRechts .8s 3.4s ease-out both; }
.hw-b1 .eb-route { animation: ebZeichnen 1.4s 4.1s ease-in-out both; }

/* 2 · Adressen & Termin: Häuser stehen auf, Kalender fällt herein, Lieferwagen fährt von Haus zu Haus */
.hw-b2 .eb-haus-links { animation: ebVonUnten .7s .1s cubic-bezier(.2,.8,.3,1.1); }
.hw-b2 .eb-haus-rechts { animation: ebVonUnten .7s .3s cubic-bezier(.2,.8,.3,1.1); }
.hw-b2 .eb-baum-links, .hw-b2 .eb-baum-rechts { transform-origin: 50% 100%; animation: ebPop .5s .6s ease both, ebWippen 3s 1.2s ease-in-out infinite; }
.hw-b2 [class*="eb-busch"] { transform-origin: 50% 100%; animation: ebPop .45s .75s ease both; }
.hw-b2 .eb-kalender { animation: ebVonOben .9s 1s ease-out both, ebKalenderWackeln .6s 2.1s ease-in-out both; }
@keyframes ebKalenderWackeln { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-4deg); } 65% { transform: rotate(3deg); } }
.hw-b2 .eb-weg { animation: ebZeichnen 3.8s 1.8s cubic-bezier(.45,0,.55,1) both; }
.hw-b2 .eb-wagen { animation: ebWagenFahrt 3.8s 1.8s cubic-bezier(.45,0,.55,1) both, ebRuckeln .35s 1.8s linear 11; }
@keyframes ebWagenFahrt { 0% { opacity: 0; translate: -34.5cqw 0; } 6% { opacity: 1; } 100% { opacity: 1; translate: 13.7cqw 0; } }
@keyframes ebRuckeln { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-.25cqw) rotate(-.6deg); } }
.hw-b2 .eb-lift { animation: ebPop .5s 5.4s ease both; }
.hw-b2 .eb-pfeil-oben { animation: ebPop .3s 5.7s ease both, ebPfeilHoch .9s 6s ease-in-out infinite; }
.hw-b2 .eb-pfeil-unten { animation: ebPop .3s 5.8s ease both, ebPfeilRunter .9s 6s ease-in-out infinite; }
@keyframes ebPfeilHoch { 50% { transform: translateY(-.5cqw); } }
@keyframes ebPfeilRunter { 50% { transform: translateY(.5cqw); } }

/* 3 · Du wählst: Wagen fährt leer herein, die drei Wege erscheinen, die Hand tippt */
.hw-b3 .eb-wagen { animation: ebWagenRein 1.7s .2s cubic-bezier(.15,.75,.3,1) both, ebRuckeln .4s .2s linear 4; }
@keyframes ebWagenRein { 0% { opacity: 0; translate: -62cqw 0; } 15% { opacity: 1; } 100% { opacity: 1; translate: 0 0; } }
.hw-b3 .eb-kamera { animation: ebPop .6s 2s ease both, ebPuls 1.6s 3.2s ease-in-out infinite; }
.hw-b3 .eb-stern { animation: ebSternRein .7s 2.4s cubic-bezier(.2,.9,.3,1.3) both, ebFunkeln 1.6s 3.2s ease-in-out infinite; }
@keyframes ebSternRein { from { opacity: 0; transform: scale(0) rotate(-180deg); } to { opacity: 1; transform: none; } }
.hw-b3 .eb-video { animation: ebPop .6s 2.6s ease both; }
.hw-b3 .eb-raster { animation: ebPop .6s 3s ease both; }
.hw-b3 .eb-icon-1 { animation: ebPop .35s 3.4s ease both, ebPuls .5s 5.1s ease-in-out 2; }
.hw-b3 .eb-icon-2 { animation: ebPop .35s 3.55s ease both; }
.hw-b3 .eb-icon-3 { animation: ebPop .35s 3.7s ease both; }
.hw-b3 .eb-icon-4 { animation: ebPop .35s 3.85s ease both; }
.hw-b3 .eb-hand { transform-origin: 20% 10%; animation: ebHandRein .8s 4.1s ease-out both, ebTippen .7s 4.9s ease-in-out 3; }
@keyframes ebHandRein { from { opacity: 0; transform: translate(6cqw, 8cqw); } to { opacity: 1; transform: none; } }
@keyframes ebTippen { 0%, 100% { transform: none; } 45% { transform: translate(-.4cqw, -.4cqw) scale(.92); } }

/* 4 · Die Analyse füllt den Wagen: Foto wird gescannt, Möbel erkannt und fliegen in den Wagen */
.hw-b4 .eb-handy-bild { animation: ebZeichnenAbwaerts 1.2s .3s linear both; }
.hw-b4 .eb-scan { left: 4.9%; width: 20.2%; top: 27%; height: .6%; border-radius: 4px; background: #5FE0C8; box-shadow: 0 0 1.5cqw .4cqw rgba(95,224,200,.7);
  animation: ebScan 1.2s .3s linear both, ebBlende .3s 1.5s ease reverse both; }
@keyframes ebScan { from { transform: translateY(0); } to { transform: translateY(8000%); } }
.hw-b4 .eb-wagen { animation: ebVonRechts .9s .6s ease-out both, ebFederung .5s 3.9s ease-in-out 4; }
@keyframes ebFederung { 0%, 100% { transform: none; } 40% { transform: translateY(.5cqw) scaleY(.985); } }
.hw-b4 .eb-pfeile { animation: ebZeichnen .9s 2.3s ease-out both; }
.hw-b4 [class*="eb-m-"] { --dx: 34cqw; --dy: 0cqw; animation: ebPop .45s ease both, ebInDenWagen 1s cubic-bezier(.5,0,.75,0) forwards; }
.hw-b4 .eb-m-sofa    { animation-delay: 1.4s, 3.2s; --dx: 30cqw; --dy: 10cqw; }
.hw-b4 .eb-m-regal   { animation-delay: 1.55s, 3.45s; --dx: 32cqw; --dy: 3cqw; }
.hw-b4 .eb-m-sessel  { animation-delay: 1.7s, 3.7s; --dx: 32cqw; }
.hw-b4 .eb-m-tisch   { animation-delay: 1.85s, 3.95s; --dx: 33cqw; --dy: -1cqw; }
.hw-b4 .eb-m-kartons { animation-delay: 2s, 4.2s; --dx: 33cqw; --dy: -6cqw; }
@keyframes ebInDenWagen { 0% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.45); } }
.hw-b4 .eb-tacho { animation: ebPop .6s 5.2s ease both; }
.hw-b4 .eb-gewicht { animation: ebVonOben .8s 5.5s ease-out both; }

/* 5 · Drei Fixpreise: Karten steigen auf, die Hand wählt die mittlere, das Band fällt herein */
.hw-b5 .eb-karte-l { animation: ebVonUnten .7s .2s cubic-bezier(.2,.8,.3,1.1) both, ebAbblenden .5s 3.3s ease forwards; }
.hw-b5 .eb-karte-m { animation: ebVonUnten .7s .45s cubic-bezier(.2,.8,.3,1.1) both, ebGewaehlt .6s 2.9s ease forwards; transform-origin: 50% 60%; }
.hw-b5 .eb-karte-r { animation: ebVonUnten .7s .7s cubic-bezier(.2,.8,.3,1.1) both, ebAbblenden .5s 3.3s ease forwards; }
@keyframes ebAbblenden { from { opacity: 1; } to { opacity: .45; } }
@keyframes ebGewaehlt { 0% { transform: none; filter: none; } 60% { transform: scale(1.06); } 100% { transform: scale(1.04); filter: drop-shadow(0 1.2cqw 1.6cqw rgba(205,76,36,.35)); } }
.hw-b5 .eb-sterne { animation: ebPop .4s 1.2s ease both, ebFunkeln 1.4s 1.6s ease-in-out infinite; }
.hw-b5 .eb-hand { transform-origin: 30% 10%; animation: ebHandRein .9s 1.7s ease-out both, ebTippen .6s 2.7s ease-in-out 2; }
.hw-b5 .eb-band { animation: ebVonOben .8s 3.2s ease-out both; }

/* 6 · Zusage: der Lastwagen fährt vor, das Team steigt aus, Haken und Handschlag */
.hw-b6 .eb-lkw { animation: ebLkwRein 1.8s .2s cubic-bezier(.15,.75,.3,1) both, ebRuckeln .4s .2s linear 4; }
@keyframes ebLkwRein { 0% { opacity: 0; translate: 50cqw 0; } 15% { opacity: 1; } 100% { opacity: 1; translate: 0 0; } }
.hw-b6 .eb-mann-1 { animation: ebVonUnten .7s 1.7s ease-out both, ebSchweben 2.4s 3s ease-in-out infinite; }
.hw-b6 .eb-mann-2 { animation: ebVonUnten .7s 1.95s ease-out both, ebSchweben 2.4s 3.4s ease-in-out infinite; }
.hw-b6 .eb-handy { animation: ebVonUnten .8s .4s ease-out both; }
.hw-b6 .eb-handy-moebel { animation: ebPop .5s 1.1s ease both; }
.hw-b6 .eb-haken { animation: ebHaken .8s 2.6s cubic-bezier(.2,.9,.3,1.4) both, ebPuls 1.4s 3.6s ease-in-out infinite; }
@keyframes ebHaken { from { opacity: 0; transform: scale(0) rotate(-40deg); } to { opacity: 1; transform: none; } }
.hw-b6 .eb-handschlag { animation: ebPop .6s 3.4s ease both, ebSchuetteln .5s 4.1s ease-in-out 4; }
@keyframes ebSchuetteln { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg) translateY(-.3cqw); } 75% { transform: rotate(6deg) translateY(.3cqw); } }

/* ══ Ruhiger Rahmen, Wagen-Leiste, Raum-Reiter, Desktop-Spalte ══════
   Handy und Tablet: ein Kopf statt zwei, darunter eine feste Leiste mit
   dem Wagen (und in der Liste den Raum-Reitern). Beim Scrollen bewegt
   sich nichts davon. Logik: assets/site.js (wagenKlein). */
.ob-leiste { display: none; }
@media (max-width: 1023px) {
  /* «Neuer Umzug» sitzt in der Logo-Leiste – eine schmale Zeile */
  body:has(.ob) { --nav-h: 52px; }
  body:has(.ob) .ob-kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 801; height: var(--nav-h); margin: 0;
    padding: 0 calc(var(--pad) + 52px) 0 calc(var(--pad) + 112px); background: none; border: 0; box-shadow: none;
    justify-content: flex-end; gap: .5rem; pointer-events: none; }
  body:has(.ob) .ob-kopf > * { pointer-events: auto; }
  body:has(.ob) .ob-zurueck { display: none; }
  body:has(.ob) .ob-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
  body:has(.ob) .ob-kopf:has(.ob-kopf-analyse:not([hidden])) .ob-titel { display: none; }
  body:has(.ob) .ob-zaehler { margin-left: 0; }
  .ob { margin-top: calc(var(--nav-h) + var(--ob-leiste-h, 0px)); }
  body.ob-mit-leiste { --ob-leiste-h: 100px; }
  body.ob-mit-reiter { --ob-leiste-h: 148px; }
  .ob .ob-raum, .ob .ob-frage, .ob [id] { scroll-margin-top: calc(var(--nav-h) + var(--ob-leiste-h, 0px) + .75rem); }
  body.ob-mit-leiste .ob-wagen { display: none !important; }      /* die Leiste ersetzt den grossen Kasten */
  body.ob-mit-leiste .ob-leiste { display: block; }
}
.ob-leiste { position: fixed; left: 0; right: 0; top: var(--nav-h); z-index: 650; padding: 6px var(--pad) 8px;
  background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 10px 22px -20px rgba(22,48,47,.6); }
.ob-leiste-innen { position: relative; max-width: 46rem; height: 84px; margin-inline: auto; display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: .8rem; padding: 0 .3rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ob-leiste-innen:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; border-radius: 10px; }
.ob-leiste-fahrzeuge { display: flex; align-items: flex-end; gap: .3rem; }
.ob-leiste .ob-wagen-flotte { display: flex; flex-wrap: nowrap; gap: .3rem; align-items: flex-end; }
.ob .ob-leiste .ob-wagen-flotte .ob-lw { flex: 0 0 112px; width: 112px; max-width: none; animation: none; }
.ob .ob-leiste .ob-wagen-flotte:has(> :nth-child(2)) .ob-lw { flex-basis: 84px; width: 84px; }
.ob-leiste .ob-lw figcaption, .ob-leiste .ob-mulde-text { display: none; }
.ob-leiste .ob-mulde-bild { width: 54px; }
.ob-leiste-zahlen { display: grid; gap: .35rem; min-width: 0; }
.ob-leiste .ob-wagen-text { margin: 0; font-size: .78rem; line-height: 1.3; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ob-leiste .ob-genau { margin: 0; grid-template-columns: minmax(30px, 1fr) auto; font-size: .72rem; }
.ob-leiste .ob-genau-name, .ob-leiste .ob-genau-tipp, .ob-leiste .ob-wagen-spar, .ob-leiste .ob-wagen-quelle { display: none; }
.ob-leiste .ob-wagen-moment { top: calc(100% + 6px); bottom: auto; font-size: .74rem; }
/* Angetippt: der Wagen gross über dem Inhalt, Zahlen darunter */
.ob-leiste.ist-offen .ob-leiste-innen { height: auto; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center;
  padding: .3rem .3rem .6rem; animation: obLeisteAuf .25s var(--ease) both; }
.ob-leiste.ist-offen .ob-leiste-fahrzeuge { width: 100%; justify-content: center; }
.ob-leiste.ist-offen .ob-wagen-flotte { flex: 1 1 auto; justify-content: center; }
.ob .ob-leiste.ist-offen .ob-wagen-flotte .ob-lw { flex: 1 1 0; width: auto; max-width: 280px; }
.ob-leiste.ist-offen .ob-lw figcaption { display: block; font-size: .7rem; }
.ob-leiste.ist-offen .ob-leiste-zahlen { width: 100%; max-width: 340px; }
.ob-leiste.ist-offen .ob-wagen-text { -webkit-line-clamp: unset; }
.ob-leiste.ist-offen .ob-genau { grid-template-columns: auto minmax(30px, 1fr) auto; }
.ob-leiste.ist-offen .ob-genau-name { display: inline; }
.ob-leiste.ist-offen .ob-wagen-spar:not([hidden]), .ob-leiste.ist-offen .ob-wagen-quelle { display: block; }
@keyframes obLeisteAuf { from { opacity: .4; transform: scale(.97); } to { opacity: 1; transform: none; } }
/* Raum-Reiter: waagrecht wischen, ✓ = erledigt, gefüllt = offen */
.ob-reiter { display: flex; gap: .45rem; max-width: 46rem; height: 46px; margin: 0 auto; padding: 9px .5rem 0 .1rem; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; overscroll-behavior-x: contain; }
.ob-reiter::-webkit-scrollbar { display: none; }
.ob-reiter[hidden] { display: none; }
.ob-reiter-raum { flex: none; display: inline-flex; align-items: center; gap: .35rem; height: 34px; padding: 0 .85rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--bg); color: var(--text-2); font: inherit; font-size: .8rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.ob-reiter-raum i { display: none; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: var(--teal-deep); color: #fff;
  font-style: normal; font-size: .6rem; font-weight: 700; }
.ob-reiter-raum i::before { content: "✓"; }
.ob-reiter-raum.ist-ok { color: var(--teal-deep); border-color: color-mix(in srgb, var(--teal-deep) 35%, var(--line)); }
.ob-reiter-raum.ist-ok i { display: grid; }
.ob-reiter-raum.ist-hier { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.ob-reiter-raum.ist-hier i { background: #fff; color: var(--teal-deep); }
.ob-reiter-raum:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 1px; }

/* Desktop: Wagen in eigener Spalte rechts, läuft mit */
@media (min-width: 1024px) {
  .ob:is([data-frage="kartons"], [data-frage="liste"]) .ob-inner {
    max-width: 76rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 22rem); column-gap: clamp(1.5rem, 3vw, 3rem); align-items: start;
  }
  .ob:is([data-frage="kartons"], [data-frage="liste"]) .ob-inner > * { grid-column: 1; min-width: 0; }
  .ob:is([data-frage="kartons"], [data-frage="liste"]) .ob-inner > .ob-wagen {
    grid-column: 2; grid-row: 1 / span 40; align-self: start; position: sticky; top: calc(var(--nav-h) + var(--ob-kopf-h, 3.5rem) + 1rem); margin: 0;
    max-height: calc(100vh - var(--nav-h) - var(--ob-kopf-h, 3.5rem) - 7rem); overflow: auto;
  }
  .ob:is([data-frage="kartons"], [data-frage="liste"]) .ob-wagen .ob-wagen-reihe { flex-wrap: wrap; justify-content: center; }
  .ob:is([data-frage="kartons"], [data-frage="liste"]) .ob-wagen .ob-wagen-flotte { flex-wrap: wrap; justify-content: center; }
  .ob:is([data-frage="kartons"], [data-frage="liste"]) .ob-wagen .ob-lw { flex: 1 1 100%; max-width: 300px; }
}

/* ══ Kacheln: grosse −/+-Leiste unten ═══════════════════════════════
   Immer da (auch bei 0), damit sich beim ersten Tipp nichts verschiebt.
   Die Kachel selbst zählt weiterhin eins dazu. */
#obErkannt .ob-teil .ob-zaehlwerk { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: static; height: 40px;
  border: 0; border-top: 1px solid color-mix(in srgb, var(--teal-deep) 18%, var(--line)); border-radius: 0 0 12px 12px; background: none; }
#obErkannt .ob-teil .ob-teil-minus, #obErkannt .ob-teil .ob-teil-mehr { position: static; display: grid; place-items: center; width: auto; height: 40px;
  padding: 0; border: 0; background: none; color: var(--teal-deep); font-size: 1.35rem; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#obErkannt .ob-teil .ob-teil-minus { border-radius: 0 0 0 12px; }
#obErkannt .ob-teil .ob-teil-mehr { border-radius: 0 0 12px 0; }
#obErkannt .ob-teil .ob-teil-minus:hover, #obErkannt .ob-teil .ob-teil-mehr:hover,
#obErkannt .ob-teil .ob-teil-minus:active, #obErkannt .ob-teil .ob-teil-mehr:active { background: var(--mess-weich); color: var(--teal-deep); }
#obErkannt .ob-teil .ob-teil-zahl { position: static; display: grid; min-width: 1.6rem; height: auto; padding: 0; background: none; color: var(--text);
  font: 700 .95rem/1 var(--font-t); }
#obErkannt .ob-teil.ist-null .ob-teil-zahl { display: grid; color: var(--text-3); font-weight: 500; }
#obErkannt .ob-teil.ist-null .ob-teil-minus { display: grid; opacity: .3; pointer-events: none; }
#obErkannt .ob-teil.ist-null .ob-zaehlwerk { border-top-style: dashed; }

/* «Hier kommt nichts mit» im Fuss eines leeren Raums */
.ob-raum-leer { padding: .65rem .9rem; border: 1px dashed var(--line-hard); border-radius: 10px; background: none; color: var(--text-2);
  font: inherit; font-size: .86rem; cursor: pointer; }
.ob-raum-leer:hover { border-color: var(--teal-deep); color: var(--teal-deep); }
.ob-raum-leer[hidden] { display: none; }

/* ══ Suche über alle Gegenstände ════════════════════════════════════ */
.ob-suche { position: relative; margin: 0 0 .85rem; }
.ob-suche > svg { position: absolute; left: .85rem; top: 14px; width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }
.ob-suche input { width: 100%; height: 46px; padding: 0 .9rem 0 2.5rem; border: 1px solid var(--line-hard); border-radius: 12px; background: var(--bg);
  color: var(--text); font: inherit; font-size: 16px; }
.ob-suche input:focus { outline: none; border-color: var(--teal-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal-deep) 18%, transparent); }
.ob-suche-treffer { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; max-height: min(52vh, 420px); overflow: auto; padding: .35rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -22px rgba(22,48,47,.55); }
.ob-suche-treffer[hidden] { display: none; }
.ob-treffer { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: .6rem; width: 100%; padding: .45rem .5rem;
  border: 0; border-radius: 9px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ob-treffer:hover, .ob-treffer:focus-visible { background: var(--mess-weich); outline: none; }
.ob-treffer-sym { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: var(--mess-weich); color: var(--teal-deep); }
.ob-treffer-sym svg { width: 22px; height: 22px; }
.ob-treffer-text { display: grid; gap: .1rem; min-width: 0; }
.ob-treffer-text b { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-treffer-text small { font-size: .74rem; color: var(--text-3); }
.ob-treffer-zahl { padding: .3rem .65rem; border: 1px solid color-mix(in srgb, var(--teal-deep) 35%, var(--line)); border-radius: 999px;
  color: var(--teal-deep); font-size: .9rem; font-weight: 700; white-space: nowrap; }
.ob-treffer-zahl.ist-drin { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.ob-treffer.ist-dazu .ob-treffer-zahl { animation: obPopRein .32s cubic-bezier(.3,1.6,.5,1); }
.ob-treffer-leer { margin: .35rem .45rem .55rem; font-size: .85rem; color: var(--text-2); }
.ob-suche-treffer .ob-hinzu-groessen { padding: 0 .3rem .3rem; }

@media (prefers-reduced-motion: reduce) {
  .ob-leiste.ist-offen .ob-leiste-innen, .ob-treffer.ist-dazu .ob-treffer-zahl { animation: none; }
}

/* ══ Entsorgen direkt auf der Kachel ════════════════════════════════
   Mulde oben rechts; markiert das Stück zum Entsorgen (Merkmal «e»):
   Es fährt in der Mulde statt im Wagen, der Preis rechnet die Entsorgung. */
.ob-liste-hinweis { display: flex; align-items: flex-start; gap: .45rem; margin: -.3rem 0 .9rem; font-size: .8rem; line-height: 1.35; color: var(--text-3); }
.ob-liste-hinweis svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--aktion); }
#obErkannt .ob-teil .ob-optionen { position: absolute; top: 3px; right: 3px; left: auto; z-index: 2; display: block !important; width: auto; margin: 0; padding: 0; pointer-events: auto; }
#obErkannt .ob-teil.ist-null .ob-optionen { display: none !important; }
#obErkannt .ob-teil .ob-optionen .ob-opt-e { display: grid !important; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-3); font-size: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#obErkannt .ob-teil .ob-optionen .ob-opt-e::before { content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5h18l-2.6 11H5.6z'/%3E%3Cpath d='M3.7 10.5h16.6M1 8.5h2M21 8.5h2M9 13v3M15 13v3'/%3E%3Ccircle cx='7.5' cy='20' r='1'/%3E%3Ccircle cx='16.5' cy='20' r='1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5h18l-2.6 11H5.6z'/%3E%3Cpath d='M3.7 10.5h16.6M1 8.5h2M21 8.5h2M9 13v3M15 13v3'/%3E%3Ccircle cx='7.5' cy='20' r='1'/%3E%3Ccircle cx='16.5' cy='20' r='1'/%3E%3C/svg%3E") center / contain no-repeat; }
#obErkannt .ob-teil .ob-optionen .ob-opt-e:hover { background: var(--aktion-weich); color: var(--aktion); }
#obErkannt .ob-teil .ob-optionen .ob-opt-e[aria-pressed="true"] { background: var(--aktion); color: #fff; }
#obErkannt .ob-teil .ob-optionen .ob-opt-e:focus-visible { outline: 2px solid var(--aktion); outline-offset: 1px; }
.ob-teil-weg { display: none; }
#obErkannt .ob-teil:has(.ob-opt-e[aria-pressed="true"]) { border-color: color-mix(in srgb, var(--aktion) 55%, var(--line)); background: var(--aktion-weich); }
#obErkannt .ob-teil:has(.ob-opt-e[aria-pressed="true"]) .ob-teil-sym { color: var(--aktion); }
#obErkannt .ob-teil:has(.ob-opt-e[aria-pressed="true"]) .ob-teil-weg { display: block; margin-top: -.15rem; font-size: .68rem; font-weight: 600; color: var(--aktion-text); }
#obErkannt .ob-teil:has(.ob-opt-e[aria-pressed="true"]) .ob-zaehlwerk { border-top-color: color-mix(in srgb, var(--aktion) 30%, var(--line)); }

/* Keller, Estrich & Garage als Raum in der Liste */
#obRaumKeller .ob-raeume { display: grid; gap: .5rem; }

/* ══ «Stimmt deine Liste?» – alles auf einen Blick ══════════════════ */
.ob-pruefliste { display: grid; gap: .7rem; margin: 1rem 0 1.1rem; }
.ob-pruef-teil { padding: .85rem 1rem .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.ob-pruef-teil header { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .55rem; }
.ob-pruef-teil h3 { margin: 0; font-size: .98rem; font-weight: 700; }
.ob-pruef-teil .ob-link { font-size: .8rem; white-space: nowrap; }
.ob-pruef-angaben { display: grid; gap: .5rem; margin: 0; }
.ob-pruef-angaben > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; align-items: baseline; gap: .1rem .6rem; font-size: .86rem; }
.ob-pruef-angaben dt { color: var(--text-3); }
.ob-pruef-angaben dd { margin: 0; overflow-wrap: anywhere; }
.ob-pruef-raum + .ob-pruef-raum { margin-top: .65rem; padding-top: .65rem; border-top: 1px dashed var(--line); }
.ob-pruef-raum h4 { margin: 0 0 .35rem; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ob-pruef-teil ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .3rem 1rem; margin: 0; padding: 0; list-style: none; font-size: .88rem; }
.ob-pruef-teil li b { display: inline-block; min-width: 2.1rem; color: var(--teal-deep); }
.ob-pruef-teil li em { font-style: normal; font-size: .74rem; color: var(--text-3); }
.ob-pruef-weg li b { color: var(--aktion); }
.ob-pruef-kartons { margin: 0; font-size: .9rem; }
.ob-pruef-kartons b { font-size: 1.1rem; color: var(--teal-deep); }
.ob-pruef-leer { margin: 0; font-size: .86rem; color: var(--text-3); }
.ob-pruef-summe { display: flex; justify-content: space-between; gap: .8rem; margin: 0; padding: .8rem 1rem; border-radius: 14px; background: var(--mess-weich); font-size: .88rem; }
.ob-pruef-summe b { text-align: right; }
@media (max-width: 480px) {
  .ob-pruef-angaben > div { grid-template-columns: minmax(0, 1fr) auto; }
  .ob-pruef-angaben dt { grid-column: 1 / -1; font-size: .74rem; }
  .ob-pruef-teil ul { grid-template-columns: 1fr; }
}
#obRaumKeller .ob-bereich { border-radius: 12px; }
#obRaumKeller .ob-stufe { border-radius: 999px; }
#obRaumKeller .ob-fuellung-frage { font-family: inherit; font-size: .78rem; letter-spacing: 0; text-transform: none; color: var(--text-2); }

/* ══ «Was kommt mit?» aufgeräumt, «Zuerst die Kartons» ══════════════
   Kopf schlank, eine Navigation (Reiter oben, Knopf unten), Foto und
   «Hier kommt nichts mit» klein oben im Raum, Koralle nur für Entsorgen
   und Weiter. */
.ob:is([data-frage="kartons"], [data-frage="liste"]) :is(#obAngaben, #obPreisMail, .ob-hilfe) { display: none !important; }
/* «Genauer mit Fotos oder Video» als schlichter Link */
#obGenauer { display: inline-flex; width: auto; gap: .45rem; margin: -.35rem 0 .95rem; padding: 0; border: 0; background: none; color: var(--teal-deep); }
#obGenauer svg { width: 18px; height: 18px; color: var(--teal-deep); }
#obGenauer span:nth-child(2) { flex: none; }
#obGenauer b { font-size: .86rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#obGenauer small { display: none; }
#obGenauer > span:last-child { color: var(--teal-deep); }
/* Werkzeugzeile oben im offenen Raum */
.ob-raum-werkzeug { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 0 .8rem .55rem; }
.ob-raum:not(.offen) > .ob-raum-werkzeug { display: none; }
#obRaumKeller .ob-raum-werkzeug { padding: 0 0 .55rem; justify-content: flex-end; }
.ob-raum-werkzeug .ob-raum-foto { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border: 1px solid color-mix(in srgb, var(--teal-deep) 35%, var(--line));
  border-radius: 999px; background: none; color: var(--teal-deep); font-size: .78rem; font-weight: 600; cursor: pointer; }
.ob-raum-werkzeug .ob-raum-foto svg { width: 16px; height: 16px; color: var(--teal-deep); }
.ob-raum-werkzeug .ob-raum-foto.ist-fertig { background: var(--mess-weich); border-color: var(--teal-deep); }
.ob-raum-werkzeug .ob-raum-leer { padding: .3rem 0; border: 0; border-radius: 0; background: none; color: var(--text-2); font-size: .8rem;
  text-decoration: underline; text-underline-offset: 3px; }
.ob-raum-werkzeug .ob-raum-leer:hover { color: var(--teal-deep); }
.ob-raum-fuss:not(:has(.ob-tipp:not([hidden]))) { display: none; }
/* «Dein Entwurf ist wieder da» als kurze Meldung über dem Fuss */
#obWieder:not([hidden]) { position: fixed; left: var(--pad); right: var(--pad); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 640;
  max-width: 30rem; margin: 0 auto; box-shadow: 0 16px 34px -18px rgba(22,48,47,.55); animation: obFrageRein .3s var(--ease) both; }

/* Zuerst die Kartons */
.ob-frage[data-frage="kartons"] .ob-kr-zeile { grid-template-columns: 1fr; gap: .45rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.ob-frage[data-frage="kartons"] .ob-kr-frage { font-size: .92rem; font-weight: 600; }
.ob-frage[data-frage="kartons"] .ob-kr-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; border: 0; border-radius: 0; overflow: visible; }
.ob-frage[data-frage="kartons"] .ob-kr-wahl button { padding: .55rem .3rem; border: 1px solid var(--line); border-radius: 999px; text-align: center; font-size: .84rem; }
.ob-frage[data-frage="kartons"] .ob-kr-wahl button + button { border-left: 1px solid var(--line); }
.ob-frage[data-frage="kartons"] .ob-kr-wahl button[aria-pressed="true"] { background: var(--mess-weich); border-color: var(--teal-deep); color: var(--teal-deep); }
.ob-frage[data-frage="kartons"] .ob-kr-ergebnis { margin: .15rem .2rem 0; font-size: .82rem; }
.ob-frage[data-frage="kartons"] .ob-kartons { margin: 0; }
#obKartons .ob-karton { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .85rem 1rem; border: 0; border-radius: 14px;
  background: var(--mess-weich); }
#obKartons .ob-karton .ob-teil-sym { display: none; }
#obKartons .ob-karton .ob-eintrag-name b { font-size: .95rem; }
#obKartons .ob-karton .ob-karton-vorschlag { display: block; margin-top: .15rem; font-family: inherit; font-size: .76rem; letter-spacing: 0; color: var(--text-2); }
#obKartons .ob-karton .ob-zaehlwerk { display: grid; grid-template-columns: 44px minmax(2.6rem, auto) 44px; align-items: center; gap: .2rem; flex-basis: auto;
  border: 0; background: none; }
#obKartons .ob-karton .ob-zaehlwerk button { width: 44px; height: 44px; border: 1px solid var(--teal-deep); border-radius: 50%; background: var(--bg); color: var(--teal-deep); font-size: 1.3rem; }
#obKartons .ob-karton .ob-zaehlwerk span { text-align: center; font: 700 1.5rem/1 var(--font-t); color: var(--teal-deep); }
.ob-frage[data-frage="kartons"] .ob-karton-vorschlag { display: none !important; }

/* ══ Die ganze Rechnung beim Fixpreis ═══════════════════════════════ */
.ob-rechnung { margin: 1.4rem 0 1rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.ob-rechnung h3 { margin: 0 0 .2rem; font-size: 1.02rem; font-weight: 700; }
.ob-rechnung-paket { margin: 0 0 .8rem; font-size: .8rem; color: var(--text-3); }
.ob-rechnung-tabelle { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.ob-rechnung-tabelle th { padding: .5rem 0; text-align: left; font-weight: 500; vertical-align: top; }
.ob-rechnung-tabelle th small { display: block; margin-top: .1rem; font-size: .74rem; font-weight: 400; color: var(--text-3); }
.ob-rechnung-tabelle td { padding: .5rem 0 .5rem 1rem; text-align: right; white-space: nowrap; vertical-align: top; }
.ob-rechnung-tabelle .ist-posten + .ist-posten th, .ob-rechnung-tabelle .ist-posten + .ist-posten td { border-top: 1px dashed var(--line); }
.ob-rechnung-tabelle .ist-zwischen th, .ob-rechnung-tabelle .ist-zwischen td { border-top: 1px solid var(--line-hard); font-weight: 600; }
.ob-rechnung-tabelle .ist-rabatt td, .ob-rechnung-tabelle .ist-rabatt th { color: var(--teal-deep); }
.ob-rechnung-tabelle .ist-total th, .ob-rechnung-tabelle .ist-total td { padding-top: .75rem; border-top: 2px solid var(--text); font-size: 1.05rem; font-weight: 700; }
.ob-rechnung-tabelle .ist-mwst th, .ob-rechnung-tabelle .ist-mwst td { padding-top: .15rem; font-size: .76rem; font-weight: 400; color: var(--text-3); }
.ob-rechnung-gespart { display: inline-block; margin: .7rem 0 0; padding: .3rem .75rem; border-radius: 999px; background: var(--mess-weich); color: var(--teal-deep);
  font-size: .82rem; font-weight: 700; }

/* Handy und Tablet, «Raum für Raum»: Raumwahl nur über die Reiter oben –
   der offene Raum zeigt seinen Namen ohne Auf-/Zuklapp-Pfeil. */
@media (max-width: 1023px) {
  .ist-raumweise .ob-raum.offen > .ob-raum-kopf { cursor: default; }
  .ist-raumweise .ob-raum.offen > .ob-raum-kopf .ob-raum-pfeil { display: none; }
}

/* Rote Zahl oben rechts am Raum-Reiter: gewählte Artikel im Raum */
.ob-reiter-raum { position: relative; }
.ob-reiter-zahl { position: absolute; top: -8px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center;
  border-radius: 999px; background: #E0322B; color: #fff; font-size: .66rem; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--bg); }
.ob-reiter-zahl[hidden] { display: none; }
.lw-schatten { fill: rgba(16,34,33,.28); }

/* ══ Weniger Absprünge: Express, Vertrauen, Rückruf-Knopf ═══════════ */
/* Express nach dem Richtwert */
.ob-express-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .55rem; margin-bottom: .6rem; }
.ob-express-zeile .field { margin: 0; }
.ob-rueckruf-blatt [data-rueckruf-ok] { margin: 0; }
.ob-rueckruf-blatt [data-rueckruf-form][hidden] { display: none; }
@media (max-width: 420px) { .ob-express-zeile { grid-template-columns: 1fr; } }
/* Vertrauen */
.ob-vertrauen { margin: 1.2rem 0 .2rem; }
.ob-vertrauen-punkte { display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin: 0 0 .8rem; padding: 0; list-style: none; }
.ob-vertrauen-punkte li { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .6rem; border-radius: 999px; background: var(--mess-weich); color: var(--teal-deep); font-size: .76rem; font-weight: 600; }
.ob-vertrauen-punkte li::before { content: "✓"; font-size: .7rem; }
.ob-vertrauen-punkte.ist-kompakt { margin: -.3rem 0 1rem; }
.ob-stimmen { display: grid; gap: .55rem; }
.ob-stimmen figure { margin: 0; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.ob-stimmen blockquote { margin: 0; font-size: .86rem; line-height: 1.45; }
.ob-stimmen figcaption { margin-top: .3rem; font-size: .74rem; color: var(--text-3); }
.ob-stimmen figcaption::before { content: "★★★★★ "; color: #E0A526; letter-spacing: .05em; }
@media (min-width: 640px) { .ob-stimmen { grid-template-columns: 1fr 1fr; } }
/* Nach dem Senden: sichtbar statt zugeklappt */
.ob-danach[open] summary { pointer-events: none; list-style: none; font-weight: 700; }
.ob-danach[open] summary::-webkit-details-marker { display: none; }
/* Rückruf-Knopf im Kopf */
.ob-rueckruf-knopf { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--teal-deep); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.ob-rueckruf-knopf svg { width: 16px; height: 16px; }
.ob-rueckruf-knopf:hover { border-color: var(--teal-deep); background: var(--mess-weich); }
.ob-rueckruf-knopf + .ob-zaehler { margin-left: .6rem; }
@media (max-width: 1023px) {
  body:has(.ob) .ob-rueckruf-knopf { padding: .35rem; margin-left: .4rem; }
  body:has(.ob) .ob-rueckruf-knopf span { display: none; }
}
.ob-rueckruf-blatt .ob-code { text-align: left; }
.ob-rueckruf-blatt .ob-express-zeile { margin: .9rem 0 .2rem; }
.ob-rueckruf-blatt .ob-kleingedrucktes { margin-top: .8rem; }

/* ══ Analyse: der Wagen füllt sich, dann direkt zur Prüfliste ═══════ */
.ob-analyse-lauf { display: flex; align-items: center; gap: .7rem; margin: .4rem 0 1rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.ob-analyse-lauf .ob-ring { flex: none; }
.ob-analyse-stand { font-size: .9rem; font-weight: 600; color: var(--teal-deep); }
.ob[data-frage="analyse"] .ob-wagen { margin-top: .2rem; }
.ob[data-frage="analyse"] .ob-wagen-quelle, .ob[data-frage="analyse"] .ob-genau { display: none; }

/* ══ Kundenmeinungen auf der Startseite ═════════════════════════════ */
/* Kundenstimmen klein unter «Jetzt Fixpreis berechnen»: eine Zeile,
   die Stimmen wechseln weich (site.js). Alle liegen im selben Feld,
   so springt beim Wechsel nichts. */
.start-stimmen { grid-column: 1 / -1; margin-top: .15rem; padding: 0 .2rem; }
/* Sterne je Stimme: graue Reihe, darüber die goldene, auf --anteil gekürzt –
   so gehen auch halbe Sterne (4,5 = 90 %). */
.start-sterne { position: relative; display: inline-block; grid-row: 1 / span 2; font-size: .78rem; letter-spacing: .06em; line-height: 1.5; white-space: nowrap; }
.start-sterne::before { content: "★★★★★"; color: #DCD6C6; }
.start-sterne::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--anteil, 100%); overflow: hidden; color: #E0A526; }
.start-stimmen-reihe { display: grid; flex: 1; min-width: 0; }
.start-stimme { grid-area: 1 / 1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; align-items: start; margin: 0; opacity: 0; transform: translateY(4px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.start-stimme.ist-dran { opacity: 1; transform: none; pointer-events: auto; }
.start-stimme blockquote { grid-column: 2; margin: 0; font-size: .82rem; line-height: 1.45; color: var(--text-2); }
.start-stimme figcaption { grid-column: 2; margin-top: .15rem; font-size: .72rem; color: var(--text-3); }
.start-sterne.anteil-100 { --anteil: 100%; }
.start-sterne.anteil-90 { --anteil: 90%; }
.start-sterne.anteil-80 { --anteil: 80%; }
@media (prefers-reduced-motion: reduce) { .start-stimme { transition: none; transform: none; } }

/* ══ Details je Stück: Knopf auf der Kachel und Detail-Blatt ════════
   Oben links auf jeder gewählten Kachel ein kleiner Stift; er öffnet
   das Blatt mit Gewicht je Stück, Chips und Notiz (assets/site.js,
   detailOeffnen). Hat ein Stück Details, steht eine Kurzzeile darunter. */
#obErkannt .ob-teil .ob-teil-details { position: absolute; left: 3px; top: 3px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px;
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; -webkit-tap-highlight-color: transparent; }
#obErkannt .ob-teil .ob-teil-details::before { content: ""; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat; }
#obErkannt .ob-teil .ob-teil-details:hover { background: var(--mess-weich); color: var(--teal-deep); }
#obErkannt .ob-teil .ob-teil-details:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 1px; }
#obErkannt .ob-teil.hat-details .ob-teil-details { color: var(--teal-deep); }
#obErkannt .ob-teil.ist-null .ob-teil-details { display: none; }
.ob-teil-info { display: none; }
#obErkannt .ob-teil.hat-details .ob-teil-info { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; margin-top: -.15rem; padding: 0 .35rem;
  overflow: hidden; font-size: .66rem; font-weight: 600; line-height: 1.25; text-align: center; color: var(--teal-deep); }

.ob-detail-blatt .ob-code { text-align: left; }
.ob-detail-kicker { margin: 0 0 .15rem; font-family: var(--font-m); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.ob-detail-blatt .ob-h { font-size: 1.3rem; margin-bottom: .9rem; }
.ob-detail-blatt .field { margin: 0 0 .9rem; }
.ob-detail-kg-zeile { display: flex; align-items: center; gap: .5rem; }
.ob-detail-kg-zeile input { width: 7.5rem; font: 600 1.15rem/1 var(--font-t); -moz-appearance: textfield; appearance: textfield; }
.ob-detail-kg-zeile input::-webkit-outer-spin-button, .ob-detail-kg-zeile input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ob-detail-kg-zeile span { font-weight: 600; color: var(--text-2); }
.ob-detail-hinweis { display: block; margin-top: .3rem; font-size: .76rem; line-height: 1.35; color: var(--text-3); }
.ob-detail-hinweis.ist-warnung { color: var(--aktion-text); font-weight: 600; }
.ob-detail-zaehler { text-align: right; }
.ob-detail-notiz textarea { width: 100%; resize: vertical; min-height: 3.6rem; font: inherit; }
.ob-detail-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .95rem; }
.ob-chip { padding: .42rem .8rem; border: 1px solid var(--line-hard); border-radius: 999px; background: var(--bg); color: var(--text-2);
  font: 500 .82rem/1.2 var(--font-t); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ob-chip:hover { border-color: var(--teal-deep); color: var(--teal-deep); }
.ob-chip[aria-pressed="true"] { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.ob-chip[aria-pressed="true"]::before { content: "✓ "; }
.ob-chip:focus-visible { outline: 2px solid var(--aktion); outline-offset: 2px; }
.ob-detail-aktion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.ob-detail-aktion .ob-link { font-size: .82rem; color: var(--text-3); }
.ob-pruef-details { margin-left: .35rem; font-size: .76rem; }


/* ══ Kachelfarben ══════════════════════════════════════════════════
   Ruhig: Die Kachel bleibt weiss, nur der untere Bereich (− Zahl +) ist
   gefärbt – gewählt = Petrol, mit Details = Gold, wird entsorgt = Orange.
   Je mehr Stück, desto kräftiger (--dichte 0…1 aus assets/site.js,
   kachelFaerben); schon 1 Stück ist klar farbig (24 %), voll 68 %; ab 0.6
   werden −, Zahl und + weiss (.ist-dunkel). Die Zahl hat keine Plakette. */
#obErkannt .ob-teil:not(.ist-null) { --kf: var(--teal-deep); background: var(--bg);
  border-style: solid; border-color: color-mix(in srgb, var(--kf) 35%, var(--line)); }
#obErkannt .ob-teil.hat-details:not(.ist-null) { --kf: #B08425; }
#obErkannt .ob-teil:not(.ist-null):has(.ob-opt-e[aria-pressed="true"]) { --kf: var(--aktion); background: var(--bg);
  border-color: color-mix(in srgb, var(--kf) 35%, var(--line)); }
#obErkannt .ob-teil:not(.ist-null) .ob-zaehlwerk { background: color-mix(in srgb, var(--kf) calc(24% + 44% * var(--dichte, 0)), var(--bg));
  border-top-color: color-mix(in srgb, var(--kf) 25%, var(--line)); transition: background-color .35s ease; }
#obErkannt .ob-teil:not(.ist-null) .ob-teil-sym { color: var(--kf); }
#obErkannt .ob-teil:not(.ist-null) .ob-eintrag-name { color: var(--text); font-weight: 600; }
/* Die Kacheln einer Reihe sind gleich hoch: Der farbige Bereich sitzt immer
   ganz unten, darunter bleibt kein weisser Streifen */
#obErkannt .ob-teil { display: flex; flex-direction: column; align-items: stretch; }
#obErkannt .ob-teil .ob-teil-plus { flex: 1 0 auto; }
#obErkannt .ob-teil .ob-zaehlwerk { margin-top: auto; align-self: stretch; width: auto; }
/* Die Zahl ohne Plakette – nur farbig, gross und fett */
#obErkannt .ob-teil:not(.ist-null) .ob-teil-zahl { background: none; padding: 0; border-radius: 0; color: color-mix(in srgb, var(--kf) 75%, #000); font: 700 1.05rem/1 var(--font-t); }
#obErkannt .ob-teil:not(.ist-null) .ob-zaehlwerk button:hover { background: rgba(255,255,255,.25); }
#obErkannt .ob-teil:not(.ist-null) .ob-zaehlwerk button { color: color-mix(in srgb, var(--kf) 85%, var(--text)); }
#obErkannt .ob-teil.hat-details:not(.ist-null) .ob-teil-info, #obErkannt .ob-teil.hat-details .ob-teil-details { color: color-mix(in srgb, var(--kf) 85%, var(--text)); }
/* Kräftiger unterer Bereich: − und + weiss, die Zahl als helle Plakette */
#obErkannt .ob-teil.ist-dunkel:not(.ist-null) .ob-zaehlwerk button { color: #fff; }
#obErkannt .ob-teil.ist-dunkel:not(.ist-null) .ob-teil-zahl { color: #fff; }
/* An der Höchstzahl: kurz rütteln */
#obErkannt .ob-teil.ist-voll { animation: obKachelVoll .4s ease; }
@keyframes obKachelVoll { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) { #obErkannt .ob-teil.ist-voll { animation: none; } #obErkannt .ob-teil:not(.ist-null) .ob-zaehlwerk { transition: none; } }
/* Legende über den Kacheln */
.ob-farben { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin: -.15rem 0 .85rem; font-size: .76rem; color: var(--text-2); }
.ob-farben span { display: inline-flex; align-items: center; gap: .35rem; }
.ob-farben span::before { content: ""; width: 12px; height: 12px; border-radius: 4px; }
.ob-farben .f-gewaehlt::before { background: var(--teal-deep); }
.ob-farben .f-details::before { background: #B08425; }
.ob-farben .f-weg::before { background: var(--aktion); }

/* ══ Erklär-Zeile an den Kacheln (nur mit Maus) ═══════════════════════
   assets/site.js: kachelTippZeigen – eine Zeile über dem Element, kurz
   verzögert, mit kleinem Pfeil. */
.ob-kachel-tipp { position: fixed; z-index: 9000; max-width: 17rem; padding: .45rem .7rem; border-radius: 10px;
  background: #16252A; color: #fff; font: 500 .78rem/1.35 var(--font-t); box-shadow: 0 8px 24px rgba(0,0,0,.18);
  pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; }
.ob-kachel-tipp.ist-sichtbar { opacity: 1; transform: none; }
.ob-kachel-tipp::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px;
  background: inherit; transform: rotate(45deg); border-radius: 2px; }
.ob-kachel-tipp.ist-unten::after { bottom: auto; top: -5px; }
@media (prefers-reduced-motion: reduce) { .ob-kachel-tipp { transition: none; transform: none; } }

/* ══ Fixpreis und Anfrage auf einer Seite (Vorschlag A) ══════════════
   Karten mit einer Zeile statt Liste, Plus/Premium als Aufpreis, die
   Empfehlung aus der Liste, ein Preis, die Rechnung zugeklappt und die
   Anfrage direkt darunter. */
.ob-varianten .ob-variante-liste { display: none; }
.ob-variante-kurz { display: block; font-size: .8rem; line-height: 1.35; color: var(--text-2); }
.ob-varianten .ob-methode.ist-empfohlen { border-color: var(--teal-deep); }
.ob-varianten .ob-methode.ist-empfohlen .ob-variante-marke { padding: .15rem .45rem; border-radius: 999px; background: var(--teal-deep); color: #fff; }
.ob-empfehlung { display: flex; align-items: flex-start; gap: .45rem; margin: .1rem 0 .7rem; font-size: .84rem; line-height: 1.4; color: var(--teal-deep); font-weight: 600; }
.ob-empfehlung::before { content: "★"; flex: none; color: #E0A526; }
.ob-spar-hinweis { margin: -.2rem 0 .9rem; font-size: .8rem; line-height: 1.4; color: var(--text-3); }
/* Ein Preis: Umzug, Entsorgung und Rabatt stehen in der Rechnung */
#obPreis .ob-preis-umzug, #obPreis #obPreisEntsZeile, #obPreis #obPreisRabattZeile { display: none !important; }
#obPreis .ob-rechnung { margin: .4rem 0 0; padding: 0; border: 0; background: none; }
#obPreis .ob-rechnung > summary { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem 0; cursor: pointer; list-style: none;
  font-size: .85rem; font-weight: 600; color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }
#obPreis .ob-rechnung > summary::-webkit-details-marker { display: none; }
#obPreis .ob-rechnung > summary::after { content: "›"; transition: transform .2s ease; }
#obPreis .ob-rechnung[open] > summary::after { transform: rotate(90deg); }
#obPreis .ob-rechnung #obRechnungInhalt { margin-top: .6rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
/* Die Anfrage */
.ob-frage[data-frage="variante"] .ob-buchen { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.ob-anfrage-h { margin: 0 0 .2rem; font-size: 1.15rem; font-weight: 700; }
.ob-anfrage-sub { margin: 0 0 .9rem; font-size: .86rem; color: var(--text-2); }
.ob-vertrauen-zeile-klein { margin: .6rem 0 .2rem; font-size: .76rem; color: var(--teal-deep); font-weight: 600; }
.ob-vertrauen-zeile-klein::before { content: "✓ "; }
.ob-frage[data-frage="variante"] .ob-danach, .ob-frage[data-frage="variante"] .ob-geltung { margin-top: .4rem; }

/* «Stimmt deine Liste?»: nur die Liste – Wagen, «Preise per Mail» und der
   Foto-Tipp sind hier ausgeblendet */
.ob[data-frage="bestaetigen"] #obPreisMail, .ob[data-frage="bestaetigen"] .ob-foto-tipp { display: none !important; }
@media (max-width: 620px) {
  /* Schmale Karten: nur die empfohlene trägt ihr Etikett */
  .ob-varianten .ob-methode.ist-empfohlen .ob-variante-marke { display: block; align-self: center; font-size: .5rem; letter-spacing: .06em; line-height: 1.3; text-align: center; }
}

/* Was ist dabei? – Vergleich der drei Varianten unter den Karten */
.ob-vergleich { width: 100%; margin: .2rem 0 .3rem; border-collapse: collapse; font-size: .82rem; line-height: 1.3; }
.ob-vergleich caption { text-align: left; margin-bottom: .4rem; font-size: .9rem; font-weight: 700; color: var(--text); }
.ob-vergleich th, .ob-vergleich td { padding: .42rem .35rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ob-vergleich tbody th { text-align: left; font-weight: 500; color: var(--text-2); }
.ob-vergleich thead th { font-size: .78rem; font-weight: 700; color: var(--text-2); text-align: center; border-bottom: 1px solid var(--line-hard); }
.ob-vergleich td { text-align: center; width: 17%; }
.ob-vergleich .ja { color: var(--gut, #1E7F5C); font-weight: 700; }
.ob-vergleich .nein { color: var(--text-3); }
.ob-vergleich td small { font-size: .72rem; color: var(--text-3); }
.ob-vergleich tbody tr:last-child th, .ob-vergleich tbody tr:last-child td { font-weight: 600; }
.ob-vergleich tbody tr:last-child td small { color: var(--text); font-size: .76rem; font-weight: 600; }
/* gewählte Spalte hervorheben */
.ob-vergleich[data-gewaehlt="spar"] [data-spalte="spar"],
.ob-vergleich[data-gewaehlt="mittel"] [data-spalte="mittel"],
.ob-vergleich[data-gewaehlt="rundum"] [data-spalte="rundum"] { background: var(--mess-weich); }
.ob-vergleich[data-gewaehlt="spar"] thead [data-spalte="spar"],
.ob-vergleich[data-gewaehlt="mittel"] thead [data-spalte="mittel"],
.ob-vergleich[data-gewaehlt="rundum"] thead [data-spalte="rundum"] { color: var(--teal-deep); border-radius: 8px 8px 0 0; }
.ob-vergleich-fuss { margin: .2rem 0 .8rem; font-size: .8rem; font-weight: 600; color: var(--teal-deep); }
.ob-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 620px) {
  .ob-vergleich { font-size: .76rem; }
  .ob-vergleich th, .ob-vergleich td { padding: .38rem .2rem; }
  .ob-vergleich td { width: 16%; }
}

/* ══ Wagen läuft, solange geladen wird ═══════════════════════════════
   Leichtes Motorruckeln und Abgas am Auspuff (GEO.auspuff in %). Ist der
   Wagen voll (.ist-voll) oder zu (.ist-zu, z. B. beim Fixpreis), steht er
   still. */
.lw-bild { position: relative; }
.ob-lw:not(.ist-voll):not(.ist-zu) .lw-bild { animation: lwMotor .16s steps(2) infinite; }
@keyframes lwMotor { 0% { transform: translateY(0); } 100% { transform: translateY(-.7px); } }
.lw-abgas { position: absolute; width: 0; height: 0; z-index: 3; pointer-events: none; display: none; }
.ob-lw:not(.ist-voll):not(.ist-zu) .lw-abgas { display: block; }
.lw-bild { container-type: inline-size; }
.lw-abgas i { position: absolute; left: -1.6cqw; top: -1.6cqw; width: 3.2cqw; height: 3.2cqw; border-radius: 50%;
  /* heller Kern, grauer Rand: sichtbar vor dem dunklen Unterboden
     und vor hellem Hintergrund */
  background: radial-gradient(circle at 45% 45%, rgba(236,238,239,.95) 0, rgba(196,201,204,.85) 45%, rgba(120,128,132,.55) 70%, rgba(120,128,132,0) 72%);
  filter: blur(.6px); opacity: 0;
  animation: lwAbgas 1.8s ease-out infinite; }
.lw-abgas i:nth-child(2) { animation-delay: .6s; }
.lw-abgas i:nth-child(3) { animation-delay: 1.2s; }
@keyframes lwAbgas {
  0% { transform: translate(0, 0) scale(.5); opacity: 0; }
  12% { opacity: .95; }
  55% { opacity: .65; }
  100% { transform: translate(-8cqw, -5cqw) scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ob-lw:not(.ist-voll):not(.ist-zu) .lw-bild { animation: none; }
  .lw-abgas { display: none !important; }
}

.node { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
.feed-grid.no-feed { grid-template-columns: minmax(0,1fr); }
.feed-grid.no-feed .feed-col { display: none; }
.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; }
.rise.d3 { transition-delay: .27s; }
.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); }
.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-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-block { margin-top: clamp(1.2rem,3vh,1.8rem); }
.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; }
.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; }
.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-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); }
.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; ; top: 6px; left: 6px; }
.eck::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; ; bottom: 6px; right: 6px; }
.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; }
.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; }
.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; }
.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); }
.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; }
.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-pille.ist-preis span { color: var(--accent); font-weight: 600; }
.ob-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); }
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-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; }
.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); }
.ob-preis-fuss { margin: .5rem 0 0; font-size: .8rem; color: var(--text-3); }
.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; }
@keyframes ob-puls { 50% { opacity: .25; } }
.ob-warten .ob-analyse-balken { width: 7rem; }
.ob-karton .ob-karton-vorschlag { color: var(--accent); font-family: var(--font-m); font-size: .7rem; letter-spacing: .06em; margin-top: .2rem; }
.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; }
.ob-code-knopf { flex: none; padding: .6rem 1rem; font-size: .85rem; white-space: nowrap; }
.ob-code-knopf[hidden] { display: none; }
.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; }
.ob-tipps-knopf { margin-top: .8rem; padding: .55rem 1rem; font-size: .85rem; }
.ob-foto-knoepfe { margin: .8rem 0 0; gap: .5rem; }
.ob-foto-knoepfe .ob-tipps-knopf { margin-top: 0; cursor: pointer; }
.ob-verif-hinweis { margin: 0 0 .8rem; font-size: .85rem; color: var(--text-2); }
.ob-verif-hinweis b { color: var(--text); }
[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 (min-width: 900px) and (max-height: 800px) {
.stat-sm .stat-num { font-size: clamp(1.35rem, 2.7vw, 1.95rem); }
}
@media (max-width: 620px) {
.step-facts-col { grid-column: auto; }
.ob-pille span { display: none; }
.ob-pille { gap: 0; }
.ablauf { grid-template-columns: 1fr; }
.cards-4 { grid-template-columns: 1fr; }
.ob-zwei { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.step-facts-col { grid-column: auto; }
}
@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)); }
[data-theme="night"] .auth-pitch, [data-theme="night"] .auth-form { box-shadow: none; }
[data-theme="night"] .auth-pitch { border-right: 0; border-top: 1px solid var(--line-hard); }
}
@media (max-width: 480px) {
.ob-code-knopf { width: 100%; }
}
@media (max-height: 720px) and (min-width: 900px) {
html.deck .vertrauen-ablauf { margin-top: .8rem; }
html.deck .vertrauen-fragen { margin-top: .7rem; padding-top: .6rem; }
html.deck .vertrauen-fuss { margin-top: .4rem; }
}
@media (max-width: 780px) {
.kons-anfragen li { grid-template-columns: 1fr auto; }
.kons-anfragen li > span:nth-child(2) { grid-column: 1 / -1; }
}

.lh-20 { --logo-h: 20px; }
.lh-21 { --logo-h: 21px; }
.lh-30 { --logo-h: 30px; }

/* ── Startseite: kleine Animationen (24.10.2026) ──────────────────── */
/* 1 · Gezeichneter Kupferstrich unter «Fixpreis» */
.hero-strich { position: relative; white-space: nowrap; }
.hero-strich::after { content: ""; position: absolute; left: -2%; right: -3%; bottom: -.1em; height: .2em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 48 4, 118 2, 197 6' fill='none' stroke='%23CD4C24' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0); animation: heroStrich .75s 1.25s cubic-bezier(.6,0,.3,1) forwards; }
@keyframes heroStrich { to { clip-path: inset(0 0 0 0); } }

/* 4 · Lieferwagen fährt in den Abschnitt «Sicherheit» */
.vertrauen-fahrt { position: relative; height: 84px; margin-top: .6rem; overflow: hidden;
  background: linear-gradient(90deg, var(--line) 50%, transparent 0) 0 calc(100% - 6px) / 22px 2px repeat-x; }
.vertrauen-wagen { position: absolute; bottom: 5px; left: min(68%, calc(100% - 132px)); width: 120px; container-type: inline-size; }
.vertrauen-wagen img { display: block; width: 100%; height: auto; }
.vertrauen-fahrt.in .vertrauen-wagen { animation: vfRein 2.1s .3s cubic-bezier(.15,.7,.25,1) both; }
.vertrauen-fahrt:not(.in) .vertrauen-wagen { transform: translateX(-120vw); }
@keyframes vfRein {
  0% { transform: translateX(-120vw); }
  80% { transform: translateX(3px); }
  90% { transform: translateX(-1px) rotate(-.6deg); }
  100% { transform: none; }
}
.vf-abgas { position: absolute; left: 4%; top: 84%; width: 0; height: 0; }
.vf-abgas i { position: absolute; left: -2cqw; top: -2cqw; width: 4cqw; height: 4cqw; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 45% 45%, rgba(236,238,239,.95) 0, rgba(196,201,204,.85) 45%, rgba(120,128,132,.55) 70%, rgba(120,128,132,0) 72%); }
.vertrauen-fahrt.in .vf-abgas i { animation: lwAbgas 1.2s .3s ease-out 2; }
.vertrauen-fahrt.in .vf-abgas i:nth-child(2) { animation-delay: .7s; }
.vertrauen-fahrt.in .vf-abgas i:nth-child(3) { animation-delay: 1.1s; }
@media (prefers-reduced-motion: reduce) {
  .hero-strich::after { animation: none; clip-path: none; }
  .vertrauen-fahrt .vertrauen-wagen, .vertrauen-fahrt:not(.in) .vertrauen-wagen { animation: none; transform: none; }
  .vf-abgas { display: none; }
}

/* ══ Startknopf «Jetzt Fixpreis berechnen»: Pfeil poppt auf und blinkt leicht
   Der runde Pfeil rechts springt nach dem Laden auf (mit Nachfedern), danach
   zieht er alle 2,6 s kurz nach rechts, wird kurz blasser, und ein heller
   Ring läuft um den Kreis. Beim Überfahren hält das Blinken an. */
.starter-ein .s-go { animation: sGoPop .6s 1s cubic-bezier(.3,1.7,.5,1) backwards, sGoRing 2.6s 2s ease-out infinite; }
.starter-ein .s-go svg { animation: sGoBlink 2.6s 2s ease-in-out infinite; }
.starter-ein:hover .s-go, .starter-ein:focus-visible .s-go,
.starter-ein:hover .s-go svg, .starter-ein:focus-visible .s-go svg { animation-play-state: paused; }
@keyframes sGoPop { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes sGoBlink { 0%, 55%, 100% { opacity: 1; transform: none; } 70% { opacity: .35; transform: translateX(3px); } 85% { opacity: 1; transform: none; } }
@keyframes sGoRing { 0%, 50% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 85%, 100% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .starter-ein .s-go, .starter-ein .s-go svg { animation: none; } }

/* ══ Partner-Laufband auf der Startseite (25.10.2026) ══════════════════
   Schmal unter dem Startknopf: links der Titel, rechts laufen die Betriebe
   mit Logo und Google-Bewertung endlos durch. Hält beim Überfahren an;
   bei «Bewegung reduzieren» steht es still und lässt sich seitlich wischen. */
.partner-band { display: flex; align-items: center; gap: .8rem; margin-top: clamp(.8rem, 2vh, 1.2rem);
  padding: .45rem 0 .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  max-width: 100%; overflow: hidden; }
.pb-titel { flex: none; font-family: var(--font-m); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.pb-fenster { flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.pb-reihe { display: flex; gap: 1.6rem; width: max-content; margin: 0; padding: 0 .8rem; list-style: none; }
.pb-reihe.ist-laufend { animation: pbLauf 45s linear infinite; }
.partner-band:hover .pb-reihe, .partner-band:focus-within .pb-reihe { animation-play-state: paused; }
@keyframes pbLauf { to { transform: translateX(-50%); } }
.pb-firma { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; font-size: .82rem; color: var(--text); }
.pb-logo { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 6px; background: var(--f, var(--teal-deep));
  color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .02em; flex: none; overflow: hidden; }
.pb-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pb-name { font-weight: 600; }
.pb-google { display: inline-flex; align-items: center; gap: .2rem; font-size: .74rem; color: var(--text-3); }
.pb-google b { color: var(--text); font-weight: 600; }
.pb-google i { font-style: normal; color: #E0A526; }
@media (prefers-reduced-motion: reduce) { .pb-fenster { overflow-x: auto; scrollbar-width: none; } }
@media (max-width: 560px) { .partner-band { border-radius: 14px; flex-direction: column; align-items: stretch; gap: .35rem; padding: .5rem 0 .5rem; }
  .pb-titel { padding-left: .8rem; } }
.pb-farbe-0 { --f: #0F5E5C; }
.pb-farbe-1 { --f: #1C4D8D; }
.pb-farbe-2 { --f: #9C4E22; }
.pb-farbe-3 { --f: #2B2F33; }
.pb-farbe-4 { --f: #1F4D3A; }
.pb-farbe-5 { --f: #C2703D; }
.pb-farbe-6 { --f: #0E3B5C; }
.pb-farbe-7 { --f: #D52B1E; }
/* Am Handy hat .starter order: 4 – das Band gehört danach, nicht davor */
.hero-inner > .partner-band { order: 5; }