/* JoAmy — Produkt-Look (Wizard, Fernzugriff): dieselbe schwarze Bühne wie
   die Landing. Trick: Die hellen Design-System-Variablen werden im
   App-Scope auf die Nacht-Palette remappt — alle Komponenten ziehen mit. */

body.app {
  background: var(--nacht);
  color: var(--nacht-tinte-1);
  --akzent: var(--nacht-bronze);
  /* Remap: hell → Nacht */
  --flaeche: var(--nacht);
  --karte: var(--nacht-karte);
  --vertieft: var(--nacht-vertieft);
  --tinte-1: var(--nacht-tinte-1);
  --tinte-2: var(--nacht-tinte-2);
  --tinte-3: var(--nacht-tinte-3);
  --tinte-4: #6f685e;
  --bronze: var(--nacht-bronze);
  --bronze-stark: #d8b285;
  --bronze-soft: rgba(194, 154, 108, .16);
  --gruen: #8fbf98; --gruen-soft: rgba(61, 122, 80, .22);
  --amber: #d9b36a; --amber-soft: rgba(176, 130, 31, .16);
  --rot: #e08573;  --rot-soft: rgba(179, 64, 46, .22);
  --schatten-karte: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
  --schatten-float: 0 10px 30px rgba(0, 0, 0, .5), 0 30px 70px rgba(0, 0, 0, .5);
  --linie: var(--nacht-linie);
}

/* Navigation (dunkel wie Landing) */
.app .nav {
  background: color-mix(in srgb, var(--nacht) 82%, transparent);
  border-bottom: 1px solid var(--nacht-linie);
}
.app .wortmarke { color: var(--nacht-tinte-1); }
.app .nav-links a { color: var(--nacht-tinte-2); }
.app .nav-links a:hover { color: var(--nacht-tinte-1); }

/* Buttons im dunklen Scope: Haupt-CTA = helle Pille (wie Landing) */
.app .btn-primaer { background: var(--nacht-tinte-1); color: var(--nacht); }
.app .btn-primaer:hover { background: #ffffff; }
.app .btn-sekundaer { background: transparent; border-color: var(--nacht-linie); color: var(--nacht-tinte-2); }
.app .btn-sekundaer:hover { border-color: var(--akzent); color: var(--nacht-tinte-1); }
.app .btn-bronze { color: var(--nacht); font-weight: 600; }

.app-kopf { text-align: center; padding: clamp(36px, 6vh, 64px) 0 8px; }
.app-kopf h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 600; letter-spacing: -.025em; margin: 12px 0 10px; }
.app-kopf p { color: var(--tinte-3); max-width: 620px; margin: 0 auto; }

/* ---------- Wizard-Gerüst ---------- */
.stepper {
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
  padding: 26px 0 8px;
}
.step-punkt {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--tinte-4); font-weight: 500;
  padding: 6px 12px; border-radius: var(--r-pill);
}
.step-punkt .kreis {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
  background: var(--vertieft); color: var(--tinte-3);
}
.step-punkt.aktiv { color: var(--tinte-1); background: var(--bronze-soft); }
.step-punkt.aktiv .kreis { background: var(--bronze); color: var(--nacht); }
.step-punkt.fertig .kreis { background: var(--gruen-soft); color: var(--gruen); }

/* Handy (≤480px): Stepper bräche sonst auf 2 Zeilen. Nur Kreise zeigen, das
   Text-Label (Text-Node nach .kreis) via font-size:0 ausblenden; .kreis behält
   eigene font-size. Der aktive Schritt zeigt sein Label weiterhin. */
@media (max-width: 480px) {
  .stepper { gap: 4px; padding: 18px 0 6px; }
  .step-punkt { font-size: 0; gap: 0; padding: 5px 7px; }
  .step-punkt .kreis { font-size: 12px; }
  .step-punkt.aktiv { font-size: 13px; gap: 6px; padding: 5px 12px; }
}

.wizard-schritt { display: none; padding: 26px 0 80px; }
.wizard-schritt.aktiv { display: block; }

.karte {
  background: var(--karte); border-radius: var(--r-20);
  box-shadow: var(--schatten-karte); padding: 26px;
  border: 1px solid var(--nacht-linie);
}

/* Schritt 1: Wege-Wahl */
.wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
@media (max-width: 860px) { .wege { grid-template-columns: 1fr; } }
.weg {
  text-align: left; position: relative;
  border: 1.5px solid var(--nacht-linie); border-radius: var(--r-20);
  background: var(--karte); padding: 24px 22px;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.weg:not(.bald):hover { border-color: var(--bronze); transform: translateY(-2px); }
.weg.gewaehlt { border-color: var(--bronze); box-shadow: var(--schatten-karte); }
.weg .badge {
  display: inline-block; margin-bottom: 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  border-radius: var(--r-pill); padding: 3px 10px;
  background: var(--bronze-soft); color: var(--bronze-stark);
}
.weg.bald { opacity: .62; cursor: default; }
.weg.bald .badge { background: var(--vertieft); color: var(--tinte-3); }
.weg h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.weg p { font-size: 14px; color: var(--tinte-3); margin: 0; }

/* Paste-Bereich */
.paste-bereich { margin-top: 26px; }
.anleitung { counter-reset: schritt; display: grid; gap: 10px; margin: 18px 0; }
.anleitung li {
  list-style: none; position: relative; padding-left: 40px;
  font-size: 15px; color: var(--tinte-2);
}
.anleitung li::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bronze-soft); color: var(--bronze-stark);
  font-size: 13px; font-weight: 600;
}
textarea.paste {
  width: 100%; min-height: 170px; resize: vertical;
  border: 1.5px dashed #3a332a; border-radius: var(--r-12);
  background: var(--vertieft); padding: 16px;
  font-family: var(--mono); font-size: 12.5px; color: var(--tinte-2);
}
textarea.paste:focus { outline: none; border-color: var(--bronze); background: #000; }
.paste-status { min-height: 24px; font-size: 14px; margin-top: 10px; }
.paste-status.ok { color: var(--gruen); }
.paste-status.fehler { color: var(--rot); }
.paste-status.hinweis { color: var(--amber); }

.beruhigung {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--gruen-soft); color: var(--gruen);
  border-radius: var(--r-12); padding: 12px 16px; font-size: 13.5px;
  margin-top: 14px;
}

/* Schritt 2: Analyse */
.scan {
  font-family: var(--mono); font-size: 13px; line-height: 1.9;
  background: var(--nacht-vertieft); color: #d6cec2;
  border: 1px solid var(--nacht-linie);
  border-radius: var(--r-12); padding: 40px 22px 20px;
  height: 236px; overflow: hidden; position: relative;
}
.scan div b { color: var(--bronze); font-weight: 500; }
/* Zähler in eigener Kopfzeile (padding-top 40px hält die Log-Zeilen darunter),
   damit "35 / 35" auf dem Handy nicht die umbrechende Mono-Zeile überlappt. */
.scan .zaehler { position: absolute; right: 18px; top: 14px; color: #8d857a; }
.statistik { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 20px; }
@media (max-width: 720px) { .statistik { grid-template-columns: repeat(2, 1fr); } }
.stat { text-align: center; padding: 20px 12px; }
.stat h3 { font-size: 34px; font-weight: 600; letter-spacing: -.02em; }
.stat.hilfe h3 { color: var(--amber); }
.stat p { font-size: 13.5px; color: var(--tinte-3); margin-top: 2px; }

/* Schritt 3: Räume */
.fortschritt { display: flex; align-items: center; gap: 14px; margin: 18px 0; }
.fortschritt .balken { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--vertieft); overflow: hidden; }
.fortschritt .balken i { display: block; height: 100%; background: var(--bronze); border-radius: var(--r-pill); transition: width .3s var(--ease); }
.fortschritt span { font-size: 13.5px; color: var(--tinte-3); white-space: nowrap; }
.zuordnen-liste { display: grid; gap: 14px; }
.geraet-karte h3 { font-size: 17px; font-weight: 600; }
.geraet-karte .eid { font-family: var(--mono); font-size: 12px; color: var(--tinte-4); margin: 2px 0 4px; }
.geraet-karte .warum { font-size: 13.5px; color: var(--tinte-3); margin-bottom: 14px; }

/* Klartext-Typen in den Rückfragen (2026-07-19): der Kunde soll ohne Vorwissen
   verstehen, WAS gefragt wird und WAS die Einträge sind. Gleiche Farbwelt wie
   .eid/.warum, damit es in hellem und dunklem Scope passt. */
.typ-mix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.typ-mix-label { font-size: 13px; color: var(--tinte-3); margin-right: 2px; }
.typ-pill { display: inline-block; font-size: 12px; font-weight: 600; color: var(--tinte-2);
  background: var(--vertieft); border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap; }
.typ-erkl { font-size: 13.5px; color: var(--tinte-2); line-height: 1.5; margin: 0 0 8px; }
.typ-erkl .typ-pill { margin-right: 6px; }
.eid-voll { font-size: 12px; color: var(--tinte-4); margin: 0 0 12px; }
.eid-voll code { font-family: var(--mono); word-break: break-all; }
.mitglieder { margin: 0 0 12px; }
.mitglieder summary { cursor: pointer; font-size: 13px; color: var(--tinte-3);
  text-decoration: underline; text-underline-offset: 3px; }
.mitglieder[open] summary { margin-bottom: 8px; }
.mitglieder ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mitglieder li { font-size: 13px; line-height: 1.45; padding: 8px 12px;
  background: var(--vertieft); border-radius: 10px; }
.mitglieder li b { display: block; font-weight: 600; color: var(--tinte-1, inherit); }
.mitglieder li .typ-satz { display: block; color: var(--tinte-3); }
.mitglieder li code { font-family: var(--mono); font-size: 11px; color: var(--tinte-4); word-break: break-all; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1.5px solid #3a332a; background: transparent; border-radius: var(--r-pill);
  padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--tinte-2);
  transition: all .15s var(--ease); position: relative;
}
.chip:hover { border-color: var(--bronze); }
.chip.vorschlag { border-color: var(--bronze); background: var(--bronze-soft); color: var(--bronze-stark); }
.chip.vorschlag::after { content: ' ✦'; font-size: 11px; }
.chip.gewaehlt { background: var(--tinte-1); border-color: var(--tinte-1); color: var(--nacht); }
.chip.neutral { color: var(--tinte-4); }
.geraet-karte.erledigt { opacity: .55; }
.geraet-karte.erledigt .fertig-zeile { color: var(--gruen); font-size: 14px; font-weight: 500; margin-top: 10px; }

/* --- Schritt 3: Räume-Akkordeon ---
   Jede Geräte-Karte wird ein Akkordeon: Kopfzeile (Anzahl · Titel · Status · Chevron)
   immer sichtbar, Chips + Frage darunter ein-/ausklappbar. Die Höhen-Animation läuft
   über grid-template-rows 0fr↔1fr (misst die echte Inhaltshöhe, kein max-height-Raten). */
.geraet-karte.akkordeon { padding: 0; overflow: hidden; }
.akk-kopf {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; margin: 0; padding: 16px 20px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.akk-kopf:focus-visible { outline: 2px solid var(--bronze); outline-offset: -2px; border-radius: var(--r-20); }
.akk-anzahl {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 27px; height: 27px; padding: 0 7px; border-radius: var(--r-pill);
  background: var(--bronze-soft); color: var(--bronze-stark);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.akk-titel { flex: 1 1 auto; min-width: 0; }
.akk-titel h3 { font-size: 16px; font-weight: 600; line-height: 1.25; }
.akk-titel h3:empty { display: none; }
.akk-titel .eid {
  font-family: var(--mono); font-size: 12px; color: var(--tinte-4);
  margin-top: 2px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.akk-status {
  flex: 0 0 auto; max-width: 46%; font-size: 12.5px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  background: rgba(255,255,255,.05); color: var(--tinte-3);
}
.akk-status[data-zustand="erledigt"] { background: var(--bronze-soft); color: var(--gruen); }
.akk-chevron {
  flex: 0 0 auto; width: 9px; height: 9px; margin: 0 2px;
  border-right: 2px solid var(--tinte-4); border-bottom: 2px solid var(--tinte-4);
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.geraet-karte.akkordeon.offen .akk-chevron { transform: rotate(-135deg); }
.akk-koerper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); }
.geraet-karte.akkordeon.offen .akk-koerper { grid-template-rows: 1fr; }
/* Padding liegt auf .akk-pad, NICHT auf .akk-inner: so schrumpft der Grid-Track im
   eingeklappten Zustand sauber auf 0 (Padding des Grid-Items bliebe sonst als Rest). */
.akk-inner { overflow: hidden; min-height: 0; }
.akk-pad { padding: 0 20px 18px; }
.akk-pad .warum { margin-top: 0; }
/* Erledigte Karten NICHT ausgrauen (Kopf soll lesbar bleiben) — der grüne Status zeigt „fertig". */
.geraet-karte.akkordeon.erledigt { opacity: 1; }
.geraet-karte.akkordeon.erledigt .akk-anzahl { background: var(--bronze-soft); color: var(--gruen); }
@media (prefers-reduced-motion: reduce) {
  .akk-koerper, .akk-chevron { transition: none; }
}
.leer-hinweis { text-align: center; color: var(--tinte-3); padding: 30px 0; }

/* Schritt 4: Design */
.style-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
@media (max-width: 980px) { .style-grid { grid-template-columns: repeat(2, 1fr); } }
/* Handy: 2-spaltig BEHALTEN. Früher fiel es bei ≤520px auf 1 Spalte → 8 handyhohe
   Previews untereinander (halbe Höhe verschenkt). Jetzt 2 Spalten mit kleineren
   Vorschauen: engerer Gap + kompakter Text. Halbiert die Schritt-Höhe. */
@media (max-width: 520px) {
  .style-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
  .style-karte .st-text { padding: 10px 11px 12px; }
  .style-karte h3 { font-size: 14px; }
  .style-karte p { font-size: 11.5px; }
  .style-karte .st-preis { margin-top: 5px; font-size: 12px; }
}
.style-karte {
  border: 2px solid var(--nacht-linie); border-radius: var(--r-20); overflow: hidden;
  background: var(--karte); padding: 0; text-align: left;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.style-karte:hover { transform: translateY(-3px); }
.style-karte.gewaehlt { border-color: var(--bronze); box-shadow: var(--schatten-float); }
.style-karte img { aspect-ratio: 1170 / 2532; object-fit: cover; width: 100%; background: #111; }
.style-karte .st-text { padding: 14px 16px 16px; }
.style-karte h3 { font-size: 16px; font-weight: 600; }
.style-karte p { font-size: 13px; color: var(--tinte-3); margin-top: 2px; }
.style-karte .st-preis { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--bronze-stark); }

/* Schritt 5: Fertig */
.fertig-gitter { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; margin-top: 24px; align-items: start; }
@media (max-width: 860px) { .fertig-gitter { grid-template-columns: 1fr; } }
.zusammenfassung ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.zusammenfassung li { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--tinte-2); border-bottom: 1px dashed #2e2822; padding-bottom: 8px; }
.zusammenfassung li b { font-weight: 600; color: var(--tinte-1); }
.kauf-box { text-align: center; }
.kauf-box .preis { font-size: 44px; font-weight: 600; letter-spacing: -.03em; margin: 6px 0; }
.kauf-box .preis small { font-size: 15px; color: var(--tinte-3); font-weight: 400; }
.kauf-box .btn { width: 100%; justify-content: center; margin-top: 14px; }
.kauf-box .klein { font-size: 12.5px; color: var(--tinte-4); margin-top: 12px; }

.meile { margin-top: 26px; }
.meile h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.meile > p { color: var(--tinte-3); font-size: 14.5px; }
.meile-liste { display: grid; gap: 12px; margin-top: 16px; }
.meile-punkt { display: flex; gap: 14px; align-items: flex-start; }
.meile-punkt .häkchen {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--gruen-soft); color: var(--gruen);
  display: grid; place-items: center; font-size: 14px; margin-top: 2px;
}
.meile-punkt h4 { font-size: 15px; font-weight: 600; }
.meile-punkt p { font-size: 13.5px; color: var(--tinte-3); }
.meile-punkt a { color: var(--bronze-stark); }

/* Ausbaustufen */
.ausbau-zeile { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--nacht-linie); border-radius: var(--r-12); }
.ausbau-zeile.da { opacity: .75; }
.ausbau-status { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--gruen-soft); color: var(--gruen); font-size: 13px; margin-top: 1px; }
.ausbau-status.fehlt { background: var(--vertieft); color: var(--tinte-4); }
.ausbau-zeile b { font-size: 14.5px; font-weight: 600; }
.ausbau-zeile p { font-size: 13px; color: var(--tinte-3); margin: 2px 0 0; }
.ausbau-zeile details { margin-top: 8px; }
.ausbau-zeile summary { cursor: pointer; font-size: 13px; color: var(--bronze-stark); font-weight: 600; }
.ausbau-zeile ol { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; color: var(--tinte-2); }
.ausbau-zeile ol a { color: var(--bronze-stark); }
.ausbau-hinweis { font-size: 12px !important; color: var(--tinte-4) !important; margin-top: 8px !important; }

/* Style-Pillen (Schritt 5 — wie auf der Landing) */
.app .style-pille {
  flex: 0 0 auto;
  border: 1px solid var(--nacht-linie); border-radius: var(--r-pill);
  background: transparent; color: var(--nacht-tinte-2);
  padding: 9px 18px; font-size: 14.5px; font-weight: 500;
  transition: all .25s var(--ease); white-space: nowrap;
}
.app .style-pille:hover { border-color: var(--nacht-tinte-3); color: var(--nacht-tinte-1); }
.app .style-pille.aktiv {
  background: var(--akzent); border-color: var(--akzent);
  color: var(--nacht); font-weight: 600;
}

/* Plattform-Tabs (Vollbild-Anleitung) */
.tabs { display: inline-flex; background: var(--vertieft); border-radius: var(--r-pill); padding: 4px; gap: 4px; margin: 10px 0; }
.tab { border: none; background: transparent; border-radius: var(--r-pill); padding: 7px 16px; font-size: 13.5px; font-weight: 500; color: var(--tinte-3); }
.tab.aktiv { background: #2a251f; color: var(--tinte-1); box-shadow: var(--schatten-karte); }

.wizard-fuss { display: flex; justify-content: space-between; margin-top: 30px; gap: 12px; }
/* Schritt 1: #demo-btn ist versteckt (hidden) — Analysieren bleibt trotzdem rechts,
   wo er in allen anderen Schritten steht (space-between hätte ihn links platziert). */
.wizard-fuss #weiter-1 { margin-left: auto; }

/* ---------- Fernzugriff ---------- */
.hinweis-box {
  background: var(--amber-soft); color: var(--amber);
  border-radius: var(--r-12); padding: 14px 18px; font-size: 14px;
  margin: 22px auto 0; max-width: 760px;
}
.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; align-items: stretch; }
@media (max-width: 860px) { .vergleich { grid-template-columns: 1fr; } }
.anbieter-karte { display: flex; flex-direction: column; }
.anbieter-karte h2 { font-size: 22px; font-weight: 600; }
.anbieter-karte .unter { color: var(--tinte-3); font-size: 14.5px; margin: 4px 0 16px; }
.anbieter-karte .preis-zeile { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.anbieter-karte .preis-zeile small { font-size: 13.5px; font-weight: 400; color: var(--tinte-3); }
.eigenschaften { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; flex: 1; }
.eigenschaften li { display: flex; gap: 10px; font-size: 14.5px; color: var(--tinte-2); }
.eigenschaften li::before { content: '✓'; color: var(--gruen); font-weight: 600; }
.eigenschaften li.neutral::before { content: '·'; color: var(--tinte-4); }
.anbieter-karte .btn { margin-top: 20px; justify-content: center; }
.empfohlen-rand { border: 2px solid var(--bronze); position: relative; }
.empfohlen-rand .badge-oben {
  position: absolute; top: -12px; left: 24px;
  background: var(--bronze); color: #fff; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; padding: 3px 12px;
}

.wie-zeile {
  font-family: var(--mono); font-size: 13px; color: var(--tinte-3);
  background: var(--vertieft); border-radius: var(--r-12);
  padding: 12px 16px; margin-top: 14px; overflow-x: auto; white-space: nowrap;
}
.wie-zeile b { color: var(--bronze-stark); font-weight: 500; }

/* Geführte Anleitungen */
.guide { margin-top: 44px; }
.guide-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.guide-kopf h2 { font-size: 24px; font-weight: 600; }
.guide-fortschritt { font-size: 13.5px; color: var(--tinte-3); }
.guide-schritte { display: grid; gap: 12px; margin-top: 16px; }
.g-schritt { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 18px 20px; }
/* min-width:0: sonst spannt eine lange Code-Zeile (white-space:pre) die 1fr-Spalte
   über den Handy-Viewport auf — Karte + Seite scrollten horizontal. */
.g-schritt > div { min-width: 0; }
.g-schritt input[type="checkbox"] {
  width: 22px; height: 22px; margin-top: 1px; accent-color: var(--bronze);
}
.g-schritt h4 { font-size: 15.5px; font-weight: 600; }
.g-schritt p { font-size: 14px; color: var(--tinte-2); margin-top: 3px; }
.g-schritt .pfad { font-size: 13.5px; color: var(--tinte-3); }
.g-schritt .pfad b { color: var(--tinte-1); font-weight: 500; }
.g-schritt.erledigt { opacity: .55; }
.g-schritt .warn { color: var(--amber); background: var(--amber-soft); border-radius: var(--r-8); padding: 8px 12px; font-size: 13px; margin-top: 8px; }
.copy-zeile {
  display: flex; gap: 8px; align-items: center; margin-top: 10px;
  background: var(--vertieft); border-radius: var(--r-8); padding: 8px 8px 8px 14px;
}
.copy-zeile code { font-family: var(--mono); font-size: 12.5px; color: var(--tinte-2); flex: 1; min-width: 0; overflow-x: auto; white-space: pre; }
.copy-btn {
  border: 1px solid var(--nacht-linie); background: #2a251f; border-radius: var(--r-8);
  padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--bronze-stark);
  white-space: nowrap;
}
.copy-btn.ok { color: var(--gruen); }
.copy-btn.fehler { color: var(--rot); border-color: var(--rot); }
.auto-kasten {
  margin-top: 40px; text-align: center;
  background: var(--bronze-soft); border-radius: var(--r-28); padding: 34px 26px;
}
.auto-kasten h2 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.auto-kasten p { color: var(--tinte-2); max-width: 640px; margin: 0 auto; font-size: 15px; }

.app .footer { border-top: 1px solid var(--nacht-linie); color: var(--tinte-4); }
.app .footer a { color: var(--tinte-4); }
.app .footer a:hover { color: var(--tinte-1); }

/* ============================================================
   Handy-Kompaktierung des Wizards (≤640px). Desktop unberührt —
   alle Regeln leben ausschließlich in dieser Media-Query.
   Ziel: jeder Schritt möglichst wenige Screens (Räume/Design waren
   ~10 bzw. ~9 Screens). Nur Paddings/Schriften/Abstände, keine Logik.
   ============================================================ */
@media (max-width: 640px) {
  /* Kopf + Schritt-Luft schrumpfen */
  .app-kopf { padding: 22px 0 4px; }
  .app-kopf h1 { font-size: 26px; margin: 8px 0 8px; }
  .app-kopf p { font-size: 14px; }
  .stepper { padding: 14px 0 4px; }
  .wizard-schritt { padding: 14px 0 40px; }
  .wizard-fuss { margin-top: 18px; }

  /* Karten generell kompakter — greift auf Geräte-, Ausbau-, Automatik-,
     Feinschliff-, Raumfoto-, Namen-, Raum-Review-, Szenen-, Zusammenfassungs-
     und Kauf-Karten (alle tragen die Klasse .karte). */
  .karte { padding: 15px 14px; }

  /* Schritt-Überschriften (inline font-size:26px) auf Handy kleiner.
     !important schlägt das Inline-Style; nur hier im Handy-Scope. */
  .wizard-schritt h2 { font-size: 21px !important; }
  /* Inline-Titel der Zusatzkarten (font-size:17px) + deren Beschreibungs-p. */
  .karte > h3[style] { font-size: 15.5px !important; }
  .karte > p[style] { font-size: 12.5px !important; margin-top: 3px !important; }

  /* --- Schritt 3: Räume — Geräte-Karten + Chips kompakt --- */
  .zuordnen-liste { gap: 8px; }
  .geraet-karte h3 { font-size: 15px; }
  .geraet-karte .eid { font-size: 11px; margin: 1px 0 3px; }
  .geraet-karte .warum { font-size: 12.5px; margin-bottom: 8px; }
  .chips { gap: 6px; }
  .chip { padding: 6px 12px; font-size: 13px; }
  /* Akkordeon-Kopfzeile auf dem Handy kompakter (nur Kopf sichtbar bei eingeklappt). */
  .akk-kopf { padding: 12px 14px; gap: 9px; }
  .akk-anzahl { min-width: 23px; height: 23px; font-size: 12px; }
  .akk-titel h3 { font-size: 14.5px; }
  .akk-titel .eid { font-size: 10.5px; margin-top: 1px; }
  .akk-status { font-size: 11.5px; padding: 3px 8px; max-width: 42%; }
  .akk-pad { padding: 0 14px 14px; }
  /* Raum-Review: schmaleres Label (inline min-width:150px) → die Emoji-Chips
     bekommen mehr Breite und brechen auf weniger Zeilen um. */
  #raum-review-liste .raum-review-zeile > b { min-width: 118px !important; font-size: 13.5px !important; }

  /* Ausbaustufen / Automatiken-Zeilen enger */
  .ausbau-zeile { padding: 8px 10px; gap: 10px; }
  .ausbau-status { width: 20px; height: 20px; font-size: 12px; }
  .ausbau-zeile b { font-size: 13.5px; }
  .ausbau-zeile p { font-size: 12px; }

  /* Zusatzkarten-Felder (Feinschliff/Geräte-Namen/Raumfotos) enger gepackt.
     Container-Gaps sind inline (gap:10px/8px) → !important nötig. */
  #feinschliff-felder, #geraete-namen-felder,
  #raumfotos-liste, #raum-review-liste { gap: 8px !important; }
  #feinschliff-felder input,
  #geraete-namen-felder input { padding: 8px 12px !important; }

  /* --- Schritt 5: letzte Meile kompakter --- */
  .meile { margin-top: 18px; }
  .meile-liste { gap: 10px; }
  .kauf-box .preis { font-size: 36px; }
}