/* =========================================================================
   MIZ OFFICE KONFIGURATOR — tvOS
   Neuanfang, begonnen 22.08.2026

   Die alte konfigurator/style.css bleibt liegen, bis diese hier steht.
   Sie hatte 4.116 Zeilen, 207 !important, 129 rohe Hexfarben und keinen
   einzigen Hauswert. Das ist der Grund fuer den Schnitt.

   STILRICHTUNG
     Eine Glasscheibe je Etappe auf dem dunklen Grund der Seite. Der
     Fortschritt ist ein Weg aus elf Punkten, kein Prozentsatz. Gewaehlt
     wird die ganze Karte, nicht ein Haken in der Ecke. Preise stehen
     ruhig und tabellarisch im Fuss ihrer Karte. Bewegung gibt es nur an
     zwei Stellen: beim Etappenwechsel und im Moment der Wahl.

   DREI REGELN, die hier nicht verhandelt werden:

   1. Kein `!important`. Setzt sich eine Regel nicht durch, ist die
      Ursache zu suchen, nicht zu ueberschreiben.
   2. Jeder Wert kommt aus einem Token. Keine Zahl, die nicht erklaert
      ist, keine Farbe, die nicht aus miz-tv.css stammt.
   3. Die Schriftskala hat neun Stufen und keine Zwischenwerte. Wer eine
      Groesse braucht, nimmt die Rolle, die am besten passt.

   AUFBAU
     00  Rollen           lokale Namen auf Hauswerte
     01  Grundlage        Grund, Buehne, Scheibe
     02  Kopfleiste       Marke, Weg, Ring
     03  Ansicht          Kopf, Rumpf, Fuss einer Etappe
     04  Antwortkarte     das Muster fuer alle Kartenarten
     05  Paketkarte       Karte mit Preis
     06  Zusatzkarte      Aufklapper mit optionalen Zusaetzen
     07  Betreuungskarte  Schalter, Hinweis, Grundausstattung
     08  Hilfe            Fragezeichen und Fenster
     09  Steuerung        Weiter, Zurueck, Lieber besprechen
     10  Zusammenfassung  Auswahl, Empfehlung, zwei Wege
     11  Fragen und Antworten
     12  Enge Schirme
     13  Bewegung und Zugaenglichkeit

   ZUSTAENDE, wie sie miz-konfigurator.js wirklich setzt. Der zweite
   Entwurf hatte hier data-Attribute erfunden, die es nie gab:
     .miz-screen--active   sichtbare Etappe
     .is-selected          gewaehlte Karte      (+ aria-pressed am Knoten)
     .is-disabled          gesperrte Karte
     .is-visible           Fehlerzeile, Betreuungshinweis
     .is-collapsed         eingeklapptes Zusatzraster
     .is-open              geoeffneter Aufklapper
     .miz-check-row--strong aktive Zeile bei der Grundausstattung
   ========================================================================= */

/* =========================================================================
   00  ROLLEN

   Nicht neue Werte, sondern Namen fuer die Aufgabe. Wer spaeter liest,
   soll sehen, wofuer eine Farbe da ist — nicht welchen Hexwert sie hat.
   Alles verweist auf miz-tv.css; faellt ein Token dort weg, faellt es
   hier auf und nicht erst im Browser.

   Die Kartenflaechen sind aus --tv-ink gemischt und nicht aus Weiss:
   so kippen sie im hellen Erscheinungsbild mit, ohne zweite Palette.
   ========================================================================= */

.miz-config {
  /* Flaechen */
  --k-grund:        var(--tv-bg);

  /* Die Scheibe deckt hier deutlich staerker als --tv-glas-panel (58 %).
     Der Grund bleibt unangetastet hell, also muss die Lesbarkeit von
     hier kommen. Gemessen am 22.08.2026 gegen die hellste Stelle von
     konfigwp-4k.webp, ohne jeden Schleier:

       78 %  Vorzeile 3,33  Beitext 4,84  Meta im Hover 4,34   zu wenig
       84 %  Vorzeile 4,11  Beitext 5,68  Meta im Hover 4,87   zu wenig
       88 %  Vorzeile 4,70  Beitext 6,27  Meta im Hover 5,21   traegt
       92 %  Vorzeile 5,32  Beitext 6,86  Meta im Hover 5,52   dichter als noetig

     88 % ist der erste Wert, bei dem alles ueber 4,5:1 steht. Das Bild
     bleibt daneben und dahinter vollstaendig sichtbar.
     --tv-surface-1 ist derselbe Ton, aus dem --tv-glas-panel gemacht
     ist; hier nur mit anderer Deckung. */
  --k-scheibe:      color-mix(in srgb, var(--tv-surface-1) 88%, transparent);
  --k-scheibe-kante: var(--tv-glas-kante);
  --k-scheibe-glanz: var(--tv-glas-glanz);

  /* Karten dunkeln gegen die Scheibe ab, statt aufzuhellen. Mit Weiss
     gemischt kam der Beitext auf 4,46:1 zurueck, im Hover auf 4,12:1 —
     die Kartenflaeche hat den Gewinn der Scheibe wieder aufgezehrt.
     Aus --tv-bg gemischt kippt das Verhaeltnis im hellen Erscheinungs-
     bild richtig mit, ohne zweite Palette.

     Drei Stufen, deutlich voneinander abgesetzt: Scheibe, Karte,
     angehobene Karte. Bei 26 / 14 Prozent lagen Karte und Scheibe zu
     dicht beieinander — die Karte war eher eine Kante als eine Flaeche. */
  --k-karte:        color-mix(in srgb, var(--tv-bg) 38%, transparent);
  --k-karte-hoch:   color-mix(in srgb, var(--tv-bg) 22%, transparent);

  /* Linienfuehrung, eine Regel: was etwas umschliesst, ist die staerkere
     Linie; was innerhalb einer Flaeche trennt, die leisere. */
  --k-kante:        var(--tv-line-2);   /* Aussenkante von Karten */
  --k-karte-kante:  var(--tv-line);     /* Trennung innerhalb einer Flaeche */
  --k-karte-kante2: var(--tv-line-2);

  /* Tiefe. Karten liegen AUF der Scheibe: ein Lichtsaum an der Oberkante
     und ein weicher Schatten darunter. Ohne beides wirkten sie in die
     Scheibe geschnitten statt daraufgelegt. */
  --k-tiefe:       0 1px 2px rgba(0, 0, 0, .28), 0 8px 20px -14px rgba(0, 0, 0, .75);
  --k-tiefe-hoch:  0 2px 4px rgba(0, 0, 0, .32), 0 18px 36px -18px rgba(0, 0, 0, .85);
  --k-glanz:       inset 0 1px 0 rgba(255, 255, 255, .06);

  /* Schrift */
  --k-ink:      var(--tv-ink);
  --k-ink-2:    var(--tv-ink-2);
  --k-ink-3:    var(--tv-ink-3);

  /* ---- Das Farbsystem ---------------------------------------------------
     Zwei Farben mit Bedeutung, eine dritte fuer den Ausnahmefall, sonst
     Grauwerte. Keine Farbe ist Schmuck; jede beantwortet eine Frage.

       BLAU   Wahl und Weg. Was anklickbar ist, was gewaehlt wurde, der
              Fortschritt, "Weiter", der Fokusring.
       GRUEN  Das Laufende und das Ergebnis. Enthaltene Leistungen, die
              Betreuung, die Haken an den Merkmallisten, die
              Zusammenfassung.
       ROT    Folgen: die Meldung bei fehlender Angabe und der Hinweis
              beim Abschalten der Betreuung. AUSNAHME seit 22.08.2026:
              die Plakette der Stufe Ultra, auf Wunsch des Inhabers.
       GELB   Nur die Plakette der Stufe Starter. Sonst nirgends.
       GRAU   Inhalt. Drei Stufen Text, mehr nicht.

     Waerme kommt aus dem Foto im Grund, nicht aus der Palette. Deshalb
     braucht das Werkzeug keine dritte Familie.

     REGEL ZUR LESBARKEIT, gemessen und nicht geschaetzt: farbiger Text
     auf einer Flaeche derselben Farbe traegt nicht. Die blaue Plakette
     mit blauem Text stand bei 3,89:1, die gruene bei 4,91. Auf einer
     farbigen Flaeche ist der Text deshalb weiss (10,12:1) und die Farbe
     wandert in das Zeichen daneben — dort ist sie Erkennungsmerkmal und
     muss nur die 3:1 fuer Bedienelemente halten. */

  /* Akzent in drei Rollen, wie im Haus */
  --k-akzent:       var(--tv-accent);        /* Linien, Symbole, Fokus */
  --k-akzent-text:  var(--tv-accent-2);      /* Text auf dunklem Grund */
  --k-akzent-flach: var(--tv-accent-solid);  /* Flaeche unter weisser Schrift */
  --k-akzent-dim:   var(--tv-accent-dim);

  /* Zustaende */
  --k-gewaehlt:  var(--tv-accent);
  --k-fertig:    var(--tv-gruen-ergebnis);
  --k-warnung:   var(--tv-warn);
  --k-warnung-dim: var(--tv-warn-dim);

  /* Form */
  --k-r-karte: var(--tv-r-card);
  --k-r-ui:    var(--tv-r-ui);
  --k-r-btn:   var(--tv-r-btn);
  --k-r-pille: var(--tv-r-pill);

  /* Raum. Der Rhythmus der Seite, nicht ein eigener. */
  --k-luft:      var(--tv-gap);
  --k-luft-eng:  calc(var(--tv-gap) * .62);
  --k-luft-weit: calc(var(--tv-gap) * 1.6);
  --k-rand:      var(--tv-gutter);

  /* Geometrie der Bedienelemente. Einmal benannt, weil sie an
     mehreren Stellen zusammenpassen muss. */
  /* Die Buehne hat eine Mindesthoehe. Gemessen am 22.08.2026 lagen die
     zwoelf Etappen zwischen 477 und 1.071 Pixeln — bei jedem Klick
     sprang die Karte, und das Werkzeug wirkte bei jeder Frage anders.
     Mit der Mindesthoehe stehen die neun leichten Etappen auf exakt
     derselben Hoehe. Die drei mit Paketen duerfen darueber hinaus
     wachsen: sie in ein Rollfeld zu zwingen haette den Preis unter die
     Kante geschoben, und der ist das Wichtigste auf der Karte. */
  --k-buehne: clamp(24rem, 62dvh, 38rem);

  --k-symbolfeld:  2.75rem; /* Traegerflaeche eines Symbols */
  /* Das Zeichen fuellt die Flaeche nicht aus. Gemessen lag es bei 28 von
     44 Pixeln, also 64 Prozent — das wirkt gedraengt. Bei 24 zu 44 sind
     es 55 Prozent, und das Symbol steht in seiner Flaeche statt an ihr
     zu kleben. */
  --k-symbolzeichen: 1.5rem;
  /* Die kleine Plakette an der Kachel und ihr Zeichen. Gemessen fuellte
     das Zeichen 85 Prozent der Plakette (18 von 21 Pixeln) und stiess an
     deren Ring — es sah gequetscht aus. Bei 11 zu 22 sind es 50 Prozent,
     dasselbe Verhaeltnis wie bei der grossen Kachel. */
  --k-plakette:        1.4rem;
  --k-plakettenzeichen: .7rem;
  --k-marke:      1.5rem;   /* Wahlzeichen an gewaehlten Karten */
  --k-hilfe:      1.85rem;  /* Fragezeichen. Eigenes Mass, weil es
                               sichtbar sein muss und das Wahlzeichen
                               nicht mitwachsen soll. */
  --k-btn-hoehe:  40px;     /* Mindesthoehe aller Schaltflaechen */

  /* Bewegung */
  --k-zeit:      var(--tv-base);
  --k-zeit-kurz: var(--tv-fast);
  --k-lauf:      var(--tv-ease);
  --k-pop:       var(--tv-ease-pop);
}

/* =========================================================================
   01  GRUNDLAGE

   Der Grund kommt aus dem Haus und nicht aus dem Werkzeug. Bis 22.08.2026
   lag hier ein eigenes, weichgezeichnetes Buerofoto — eigene Datei,
   eigene Werte, eigene Anmutung. Es weicht dem Grund der Live-Seite:
   dasselbe Bild, derselbe Schleier, dieselben Tokens wie im Kopf der
   Startseite. Das Werkzeug soll auf der Seite stehen und nicht daneben.

   Darueber liegt die App-Karte als Milchglasscheibe. Genau dieser
   Unterschied — weich hinten, scharf vorn — traegt die Tiefe; im
   Einwilligungsbanner ist es dasselbe Material.

   Der Knoten .miz-fixed-wallpaper liegt seit dem 22.08.2026 ausserhalb
   von .miz-config-app. Innerhalb wuerde ihn das backdrop-filter der
   Karte auf deren Flaeche beschneiden, weil ein Filter einen eigenen
   Bezugsrahmen fuer feste Knoten aufspannt.
   ========================================================================= */

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

.miz-config {
  /* Bezug fuer den Grundknoten darunter. */
  position: relative;
  isolation: isolate;
  /* Schneidet den klebenden Grundknoten am Ende des Abschnitts ab. Ohne
     das ragte er 155 Pixel darueber hinaus und deckte wieder den Anfang
     des Seitenfusses zu: sein negativer Aussenabstand macht die Randbox
     null hoch, und damit schiebt ihn das Ende des Abschnitts nicht mehr
     nach oben.
     `clip` und nicht `hidden`: hidden wuerde einen Rollbereich
     aufmachen, und dann klebte der Knoten an diesem statt am
     Sichtfenster. Feste Knoten und der Bilddialog haengen nicht daran —
     .miz-config ist fuer sie kein Bezugsrahmen. */
  overflow: clip;
  min-height: 100dvh;
  /* Der Grund beginnt an der Oberkante. Den Platz fuer die schwebende
     Leiste traegt nur die App-Karte, nicht der Wallpaper-Knoten. */
  padding: 0 0 var(--k-luft-weit);
  background: var(--k-grund);
  color: var(--k-ink);
  /* Grundschrift ausdruecklich, nicht nur geerbt. Bis 22.08.2026 hat
     miz-werkzeug-bruecke.css hier Inter auf 16px/1.72 erzwungen; der
     Infobereich lief dadurch in einer fremden Schrift mitten auf einer
     Geist-Seite. */
  font-family: var(--tv-font);
  font-size: var(--tv-t-body);
  line-height: 1.6;
}

/* Das Motiv der Live-Seite, und zwar so, wie es dort steht: hell,
   offen, ohne Schleier darueber. Es soll einladen, nicht gedaempft
   werden. Alles, was an Lesbarkeit noetig ist, traegt die Scheibe —
   siehe die Messung bei --k-scheibe.

   KLEBEND statt fest. Drei Stufen, und die ersten beiden waren falsch:

   1. `position: fixed` sah richtig aus, hat aber den Seitenfuss
      verschluckt — der Knoten deckte das ganze Sichtfenster ab und lag
      damit ueber .tv-foot, das als Geschwister von <main> erst danach
      kommt. 955 Pixel Fuss, im Markup vorhanden und trotzdem unsichtbar.
      Weder ein eigener Stapel noch z-index: -1 haben das verhindert.
   2. `position: absolute` hat den Fuss gerettet, aber das Motiv rollte
      mit — der ruhende Grund war weg.
   3. `position: sticky` kann beides: der Knoten bleibt am oberen Rand
      des Sichtfensters stehen, solange man durch .miz-config rollt, ist
      aber ein Kind im Fluss und damit auf diesen Abschnitt begrenzt. Er
      kann den Fuss gar nicht erreichen.

   Der negative Aussenabstand nach unten holt den folgenden Inhalt
   wieder ueber ihn: ohne ihn schoebe der Knoten die ganze Etappe um
   eine Bildschirmhoehe nach unten.

   Auf iOS faellt sticky nicht aus wie background-attachment: fixed, und
   es kostet keinen neuen Anstrich der Flaeche bei jedem Rollen. */
.miz-fixed-wallpaper {
  position: sticky;
  top: 0;
  height: 100dvh;
  margin-bottom: -100dvh;
  z-index: -1;
  pointer-events: none;
  background-color: var(--k-grund);
  background-image: url("../assets/images/konfigwp-4k.webp");
  background-size: cover;
  background-position: center center;
}

/* Beide brauchen nur den Bezug fuer ihre eigenen Kinder; die
   Stapelordnung macht der Grundknoten mit z-index: -1. */
.miz-config-app,
.miz-config-faq {
  position: relative;
}

/* Die App-Karte. Praefix VOR der Standardform — sonst wirft
   lightningcss die unpraefixierte Zeile weg.

   ACHTUNG: .miz-config-step ist NICHT die Karte. Es ist das kleine
   Textfeld mit dem Prozentwert in der Kopfleiste. Der zweite Entwurf
   hatte die beiden verwechselt. */
.miz-config-app {
  max-width: var(--tv-shell);
  /* Die Leiste schwebt ueber der Seite. Nur die Karte weicht ihr aus;
     das Motiv bleibt lueckenlos ab der Oberkante sichtbar. */
  margin: var(--tv-bar-raum) auto 0;
  border: 1px solid var(--k-scheibe-kante);
  border-radius: var(--k-r-karte);
  background: var(--k-scheibe);
  box-shadow: var(--k-scheibe-glanz), var(--tv-lift);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  overflow: hidden;
}

/* Ohne Rueckhalt im Browser bleibt eine deckende Flaeche stehen: sonst
   staende die Karte ungefiltert auf dem Foto und waere schlechter zu
   lesen als vorher. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .miz-config-app { background: var(--tv-surface-1); }
}

/* Die Ueberschrift traegt die Seite fuer Suche und Vorlesewerkzeuge.
   Sichtbar steht an ihrer Stelle die Marke in der Kopfleiste. */
.miz-config__h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.miz-config-stage {
  display: grid;
  /* Zwei Zeilen: die Fehlerzeile nimmt, was sie braucht, die Etappe den
     Rest. Ohne die Festlegung teilen sich beide die feste Hoehe zu
     gleichen Teilen, und eine einzeilige Meldung wird zum halben
     Bildschirm.

     Beide Zeilen werden ausdruecklich zugewiesen. Die Fehlerzeile steht
     meistens auf display:none und ist dann gar kein Rasterkind — ohne
     die Zuweisung rutschte die Etappe in die auto-Zeile, und das 1fr
     darunter blieb als Loch stehen. */
  grid-template-rows: auto 1fr;
  min-height: var(--k-buehne);
  padding: var(--k-luft-weit) var(--k-luft-weit) var(--k-luft);
}

/* Fehlerzeile ueber der Etappe. Sie meldet sich nur, wenn sie etwas zu
   sagen hat — leer nimmt sie keinen Platz. */
.miz-config-inlineerror {
  grid-row: 1;
  display: none;
  margin-bottom: var(--k-luft-eng);
  padding: .7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--k-warnung) 42%, transparent);
  border-radius: var(--k-r-ui);
  background: var(--k-warnung-dim);
  color: var(--k-warnung);
  font-size: var(--tv-t-small);
  line-height: 1.5;
}

.miz-config-inlineerror.is-visible {
  display: block;
}

/* =========================================================================
   02  KOPFLEISTE UND FORTSCHRITT

   Hier stand eine nackte Prozentzahl ("0 %"). Bei elf Fragen, von denen
   keine Pflicht ist, ist das zu wenig: eine Zahl misst, sie zieht nicht.
   Der Ersatz ist ein Weg aus elf Punkten, links die Marke, rechts ein
   Ring mit der Zahl fuer alle, die es genau wissen wollen.

   Der Weg liegt absolut in der Mitte der Leiste und nicht im Fluss
   zwischen Marke und Ring — sonst wandert er, sobald einer der beiden
   Nachbarn breiter wird.
   ========================================================================= */

.miz-config-topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-luft);
  padding: .85rem var(--k-luft-weit);
  border-bottom: 1px solid var(--k-karte-kante);
}

/* Die Marke oben links: das Hauslogo, dahinter das Wort, das sagt, wo
   man ist. Beides auf einer Grundlinie, getrennt durch einen feinen
   Strich — so liest es sich als "MIZ OFFICE | Konfigurator" und nicht
   als zwei Dinge, die zufaellig nebeneinander liegen.
   Das Logo stand bis 22.08.2026 zwoelfmal im Fuss jeder Etappe. Einmal
   oben ist richtiger: dort sucht man es. */
.miz-config-marke {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex: none;
}

.miz-config-marke__logo {
  width: auto;
  height: 20px;
  opacity: .92;
}

.miz-config-kicker {
  display: inline-flex;
  align-items: center;
  padding-left: .7rem;
  border-left: 1px solid var(--k-karte-kante2);
  color: var(--k-ink-3);
  font-size: var(--tv-t-label);
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Der Weg. Ein Punkt je Etappe: erledigt fuellt sich, die aktuelle
   streckt sich zum Strich. Nur Farbe und Breite bewegen sich, beides
   auf einem 7-Pixel-Element ohne Nachbarn im Fluss. */
.miz-config-weg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.miz-config-weg li {
  width: .42rem;
  height: .42rem;
  border-radius: var(--k-r-pille);
  background: var(--k-karte-kante2);
  transition:
    background-color var(--k-zeit) var(--k-lauf),
    width var(--k-zeit) var(--k-lauf);
}

.miz-config-weg li[data-erledigt] {
  background: var(--k-akzent);
}

.miz-config-weg li[aria-current] {
  width: 1.6rem;
  background: linear-gradient(90deg, var(--k-akzent), var(--k-akzent-text));
}

/* Der Ring. Der Fortschritt sitzt im Strichmuster des Kreises, die
   Zahl in der Mitte. Bewegt wird stroke-dashoffset — das faellt beim
   Zeichnen an, nicht beim Umbruch. */
.miz-config-topbar__status {
  display: flex;
  align-items: center;
  flex: none;
}

.miz-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  flex: none;
}

.miz-ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.miz-ring circle {
  fill: none;
  stroke-width: 2.5;
}

.miz-ring .bahn  { stroke: var(--k-karte-kante2); }

.miz-ring .fuell {
  stroke: var(--k-akzent);
  stroke-linecap: round;
  transition: stroke-dashoffset .5s var(--k-lauf);
}

/* Der Prozentwert. Eigener Knoten, damit die Zahl beim Wechsel nicht
   springt: tabellarische Ziffern halten die Breite. */
.miz-config-step {
  position: relative;
  color: var(--k-ink);
  /* Die einzige Schriftgroesse ausserhalb der Skala, und sie ist keine
     Textgroesse: die Zahl muss zwischen die beiden Kreisbahnen passen.
     "100 %" bei --tv-t-label stoesst dort an. */
  font-size: .74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* =========================================================================
   03  ANSICHT

   Zwoelf Ansichten, immer derselbe Aufbau: Vorzeile mit Fragezeichen,
   Ueberschrift, ein Satz darunter, Inhalt, Fuss.

   Die Erklaerung unter dem Titel stand auf jeder Etappe. Sie gehoert auf
   die erste: wer weiterklickt, hat verstanden, worum es geht.
   ========================================================================= */

.miz-screen {
  grid-row: 2;
  display: none;
}

.miz-screen--active {
  display: flex;
  flex-direction: column;
  min-height: 0;
  animation: kEintritt .42s var(--k-lauf) both;
}

@keyframes kEintritt {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.miz-screen__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Der Abstand zwischen den Baendern kommt aus dem Polster der Baender
     selbst, nicht aus einer Luecke — sonst stuende die Trennlinie nicht
     mittig zwischen den Bereichen. */
  gap: 0;
  /* Ohne die Null darf ein Flex-Kind nie kleiner werden als sein
     Inhalt — der Rumpf wuerde dann nicht rollen, sondern die Buehne
     aufdruecken. */
  min-height: 0;
}

/* Der Rumpf traegt alles zwischen Kopf und Fuss und ist das einzige,
   was rollt. Er beginnt oben und streckt sich nicht auf die Hoehe:
   eine kurze Etappe soll nicht auseinandergezogen wirken. */
.miz-screen__rumpf {
  display: grid;
  padding-top: var(--k-luft-weit);
  padding-bottom: var(--k-luft-weit);
  /* Eine kurze Etappe hat bis zur Mindesthoehe Platz uebrig. Der Inhalt
     steht dann in der Mitte statt oben mit einem Loch darunter. `safe`
     faengt den Fall ab, dass er groesser ist als der Raum: dann beginnt
     er wieder oben. */
  align-content: safe center;
  gap: var(--k-luft);
  flex: 1;
  min-height: 0;
}

/* Der Fuss laeuft als Band von Kante zu Kante: er zieht den seitlichen
   Rand der Buehne per negativem Aussenabstand heraus und gleicht ihn
   innen wieder aus. Unter dem Kopf stand bis zum 22.08.2026 dieselbe
   Linie — sie ist wieder raus. Innerhalb einer Etappe trennt der Abstand
   genug; eine zweite Linie machte aus einer ruhigen Karte ein
   Formular. */
.miz-screen__footer {
  margin-inline: calc(var(--k-luft-weit) * -1);
  padding-inline: var(--k-luft-weit);
}

.miz-screen__header {
  display: grid;
  flex: none;
  gap: .6rem;
}

/* Vorzeile und Fragezeichen stehen auf einer Linie. Das Markup fuehrt
   die Reihe heute als .miz-screen__header-row; der dritte Entwurf nennt
   sie __eyebrow-row. Beide gelten, bis das Markup sich entschieden hat. */
.miz-screen__header-row,
.miz-screen__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Die Etappenbezeichnung als Plakette, in derselben Form wie der
   Paketname auf der Karte. Als blosser blauer Text stand sie neben dem
   Fragezeichen wie eine Bildunterschrift; als Plakette ist sie das, was
   sie ist — die Marke der Etappe. Eine Form fuer eine Rolle, im ganzen
   Werkzeug dieselbe.

   Jede Etappe traegt darin ihr eigenes Zeichen, nach einer Regel: das
   Zeichen ihres Gegenstands, und dasselbe Zeichen taucht auf ihren
   Karten wieder auf. Die Website-Etappe fuehrt das Browserzeichen, das
   auch auf ihren drei Paketen steht; Google fuehrt Google, Social
   fuehrt Instagram. Die beiden Betreuungsetappen fuehren das Zeichen
   der Wiederholung — nicht ihren Kanal, denn das Laufende ist es, was
   sie von der Paketetappe davor unterscheidet.

   Damit ist auf einen Blick erkennbar, wo man steht, ohne dass eine
   zweite Farbfamilie noetig waere. */
.miz-screen__eyebrow,
.miz-package-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .25rem .7rem;
  border: 1px solid color-mix(in srgb, var(--k-akzent) 30%, transparent);
  border-radius: var(--k-r-pille);
  background: var(--k-akzent-dim);
  /* Weiss, nicht Blau: siehe die Lesbarkeitsregel im Farbsystem oben.
     Blauer Text auf blauer Flaeche stand bei 3,89:1. */
  color: var(--k-ink);
  font-size: var(--tv-t-label);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Das Zeichen sitzt eine Spur groesser als die Versalien daneben —
   sonst wirkt es neben der Grossschrift geschrumpft. */
/* Das Zeichen traegt die Farbe, der Text die Lesbarkeit. */
.miz-screen__eyebrow .ti {
  display: block;
  color: var(--k-akzent-text);
  font-size: var(--tv-i-sm);
  line-height: 1;
}

/* ---- Farbe nach Art der Etappe -----------------------------------------
   Das Werkzeug war durchgehend blau; Gruen kam nur an den Haekchen vor.
   Blau bleibt, was es ist — die Farbe des Waehlens. Gruen bekommt die
   Rolle, die es im Haus schon hat: das Laufende und das Ergebnis.

   Damit hat der Weg eine Gliederung, die man sieht statt sie zu zaehlen:
   blaue Etappen sind Fragen, gruene sind das, was danach traegt. Zwei
   Farben mit Bedeutung, keine dritte Palette. */
.miz-screen[data-screen="website-betreuung"] .miz-screen__eyebrow,
.miz-screen[data-screen="google-betreuung"] .miz-screen__eyebrow,
.miz-screen[data-screen="zusammenfassung"] .miz-screen__eyebrow {
  border-color: color-mix(in srgb, var(--k-fertig) 34%, transparent);
  background: color-mix(in srgb, var(--k-fertig) 15%, transparent);
}

.miz-screen[data-screen="website-betreuung"] .miz-screen__eyebrow .ti,
.miz-screen[data-screen="google-betreuung"] .miz-screen__eyebrow .ti,
.miz-screen[data-screen="zusammenfassung"] .miz-screen__eyebrow .ti {
  color: var(--k-fertig);
}

/* Das Satzmass fuer Ueberschriften (--tv-mass-titel, 28 Zeichen) ist
   fuer Fliesstext gedacht und brach jede Frage auf zwei Zeilen. Die
   laengste hier hat 51 Zeichen und passt damit in eine.

   Die Groesse ist eine Stufe hoeher als vorher. Gemessen am 22.08.2026
   benutzte der Konfigurator nur die untere Haelfte der Hausskala: die
   groesste Schrift war --tv-t-h3 mit 21,9 Pixeln, waehrend die Skala bis
   54,9 reicht. Vier Groessen auf einer Spanne von 1,6 — das ist kein
   Kontrast, das ist ein Formular. Die Frage ist der Grund, warum jemand
   auf die Etappe schaut; sie bekommt --tv-t-h2-ruhig. */
.miz-screen__title {
  margin: 0;
  max-width: var(--tv-mass-weit);
  color: var(--k-ink);
  font-size: var(--tv-t-h2-ruhig);
  line-height: 1.12;
  letter-spacing: -.028em;
  text-wrap: balance;
}

/* Der Satz steht unter dem Titel, nicht neben ihm. Das Satzmass ist
   weiter als --tv-mass-eng (46 Zeichen): damit lief der Text auf drei
   Zeilen und stapelte den Kopf unnoetig hoch. Bei --tv-mass-weit steht
   er in zwei. */
.miz-screen__subline {
  margin: 0;
  max-width: var(--tv-mass-weit);
  color: var(--k-ink-2);
  font-size: var(--tv-t-small);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Nur die erste Etappe erklaert sich. Ueber das Kennzeichen der Etappe
   und nicht ueber :first-of-type — im Markup stehen zwischen den
   Abschnitten Kommentare, und die Reihenfolge kann sich noch aendern. */
.miz-screen:not([data-screen="ausgangslage"]) .miz-screen__subline {
  display: none;
}

.miz-screen__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex: none;
  gap: var(--k-luft);
  margin-top: auto;
  padding-top: var(--k-luft);
  border-top: 1px solid var(--k-karte-kante);
}

.miz-screen__footer-actions {
  display: flex;
  gap: var(--k-luft-eng);
  margin-left: auto;
}

.miz-screen__hinweis {
  color: var(--k-ink-3);
  font-size: var(--tv-t-label);
}

/* =========================================================================
   04  KARTEN — das gemeinsame Muster

   Vier Kartenarten teilen sich Flaeche, Kante, Radius und Verhalten.
   Was sie unterscheidet, steht in den Abschnitten darunter — nicht wie
   bisher vier vollstaendige Saetze nebeneinander.

   Die Karte selbst ist die Schaltflaeche: sie traegt role="button",
   tabindex und aria-pressed. Der Fokusring gehoert deshalb an die Karte
   und nicht an das leere .__select-Span darin.
   ========================================================================= */

.miz-answer-card,
.miz-package-card,
.miz-addon-card,
.miz-care-card {
  position: relative;
  border: 1px solid var(--k-kante);
  border-radius: var(--k-r-ui);
  background: var(--k-karte);
  box-shadow: var(--k-glanz), var(--k-tiefe);
  transition:
    transform var(--k-zeit-kurz) var(--k-pop),
    border-color var(--k-zeit-kurz) var(--k-lauf),
    background-color var(--k-zeit-kurz) var(--k-lauf),
    box-shadow var(--k-zeit-kurz) var(--k-lauf);
}

.miz-answer-card,
.miz-package-card,
.miz-addon-card {
  cursor: pointer;
}

/* Beim Ueberfahren hebt sich die Karte einen Hauch an und bekommt eine
   hellere Kante. Nur transform, also Sache des Compositors. */
.miz-answer-card:hover,
.miz-package-card:hover,
.miz-addon-card:hover {
  transform: translateY(-2px);
  border-color: var(--k-karte-kante2);
  background: var(--k-karte-hoch);
  box-shadow: var(--k-glanz), var(--k-tiefe-hoch);
}

.miz-answer-card:active,
.miz-package-card:active,
.miz-addon-card:active {
  transform: translateY(0) scale(.985);
}

.miz-answer-card:focus-visible,
.miz-package-card:focus-visible,
.miz-addon-card:focus-visible {
  outline: 2px solid var(--k-akzent);
  outline-offset: 3px;
}

/* Gewaehlt: Kante in der Hausfarbe, ein Schein dahinter. Kein Haken
   irgendwo in der Ecke — die ganze Karte ist die Antwort. */
.miz-answer-card.is-selected,
.miz-package-card.is-selected,
.miz-addon-card.is-selected {
  border-color: var(--k-gewaehlt);
  background: var(--k-akzent-dim);
  /* Die gewaehlte Karte steht eine Stufe hoeher: doppelte Kante, ein
     Schein in der Hausfarbe und derselbe Schatten wie im Hover. */
  box-shadow:
    0 0 0 1px var(--k-gewaehlt),
    0 10px 30px -14px var(--k-akzent),
    var(--k-tiefe-hoch);
}

/* Gesperrt, weil eine fruehere Antwort sie ausschliesst. Sichtbar
   bleiben, damit man versteht, was es gaebe. */
.miz-answer-card.is-disabled,
.miz-package-card.is-disabled,
.miz-addon-card.is-disabled {
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Das Wahlzeichen ----------------------------------------------------
   .__select ist im Markup ein leeres, aria-verstecktes Span. Es traegt
   keine Bedienung — die liegt an der Karte — sondern zeigt nur an, dass
   gewaehlt wurde. Der Haken ist ein gedrehtes Eck aus zwei Kanten; das
   spart eine Grafik und skaliert mit der Schrift. */

.miz-answer-card__select,
.miz-package-card__select,
.miz-addon-card__select {
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: var(--k-marke);
  height: var(--k-marke);
  border: 1px solid var(--k-karte-kante2);
  border-radius: var(--k-r-pille);
  background: var(--k-karte);
  transition:
    background-color var(--k-zeit-kurz) var(--k-lauf),
    border-color var(--k-zeit-kurz) var(--k-lauf);
}

.miz-answer-card__select::after,
.miz-package-card__select::after,
.miz-addon-card__select::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: content-box;
  width: .3rem;
  height: .58rem;
  margin: auto;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  opacity: 0;
  transform: translateY(-.08rem) rotate(45deg) scale(.4);
  transition:
    opacity var(--k-zeit-kurz) var(--k-lauf),
    transform var(--k-zeit-kurz) var(--k-pop);
}

.miz-answer-card.is-selected .miz-answer-card__select,
.miz-package-card.is-selected .miz-package-card__select,
.miz-addon-card.is-selected .miz-addon-card__select {
  border-color: var(--k-akzent-flach);
  background: var(--k-akzent-flach);
}

.miz-answer-card.is-selected .miz-answer-card__select::after,
.miz-package-card.is-selected .miz-package-card__select::after,
.miz-addon-card.is-selected .miz-addon-card__select::after {
  opacity: 1;
  transform: translateY(-.08rem) rotate(45deg) scale(1);
}

/* ---- Antwortkarte ------------------------------------------------------- */

.miz-answer-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.2rem;
  padding-right: calc(1.2rem + var(--k-marke));
}

/* ---- Symbolsystem -------------------------------------------------------
   Vier Kartenarten trugen bis 22.08.2026 vier fast gleiche, einzeln
   ausgeschriebene Traegerflaechen. Sie teilen sich jetzt ein Muster;
   was verschieden ist, steht bei der jeweiligen Karte.

   Material wie bei den Schaltflaechen: ein Verlauf nach unten und ein
   Lichtsaum an der Oberkante. So gehoert die Symbolflaeche sichtbar zur
   selben Familie wie "Weiter" und liegt nicht als Farbfleck daneben. */
.miz-answer-card__icon-wrap,
.miz-package-card__icon-combo,
.miz-addon-card__icon-wrap,
.miz-care-card__icon-wrap {
  display: grid;
  place-items: center;
  width: var(--k-symbolfeld);
  height: var(--k-symbolfeld);
  flex: none;
  border: 1px solid color-mix(in srgb, var(--k-akzent) 26%, transparent);
  border-radius: var(--k-r-ui);
  /* Die Flaeche ist getoent und HELLER als die Karte, nicht dunkler.
     Bis 22.08.2026 dunkelte sie ab: auf einer dunklen Karte sass eine
     noch dunklere Flaeche, und darauf ein duenner blauer Strich. Das
     las sich als Loch mit einer Zeichnung darin, nicht als Kachel.

     Jetzt wie eine App-Kachel: getoente Flaeche, weisses Zeichen. Der
     blaue Strich auf der dunklen Flaeche stand bei 6,02:1, das weisse
     Zeichen auf der getoenten steht bei 11,83 — und vor allem sieht man
     jetzt ein Symbol statt einer Kontur. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--k-akzent) 24%, transparent),
      color-mix(in srgb, var(--k-akzent) 14%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  color: var(--k-ink);
  font-size: var(--k-symbolzeichen);
  transition:
    background-color var(--k-zeit-kurz) var(--k-lauf),
    border-color var(--k-zeit-kurz) var(--k-lauf),
    color var(--k-zeit-kurz) var(--k-lauf);
}

/* Symbolschriften bringen eine eigene Grundlinie mit. Als Zeile gesetzt
   sitzt das Zeichen dadurch zu tief; als Block ohne Zeilenhoehe faellt
   der Versatz weg und place-items zentriert wirklich. In der
   Antwortkarte steckt das Zeichen zusaetzlich in einem <span>, das
   ebenfalls als Zeile lief. */
.miz-answer-card__icon-wrap,
.miz-answer-card__icon,
.miz-package-card__icon-main,
.miz-answer-card__icon-wrap .ti,
.miz-package-card__icon-combo .ti,
.miz-addon-card__icon-wrap .ti,
.miz-care-card__icon-wrap .ti {
  line-height: 1;
}

.miz-answer-card__icon,
.miz-answer-card__icon-wrap .ti,
.miz-package-card__icon-combo .ti,
.miz-addon-card__icon-wrap .ti,
.miz-care-card__icon-wrap .ti {
  display: block;
}

.miz-answer-card__icon-wrap svg,
.miz-package-card__icon-combo svg,
.miz-addon-card__icon-wrap svg,
.miz-care-card__icon-wrap svg {
  width: var(--k-symbolzeichen);
  height: var(--k-symbolzeichen);
}

/* Rang ueber die Toenung der Kachel, nicht ueber das Zeichen: ein Zusatz
   ist kein kleines Paket, sondern eine andere Art von Entscheidung, und
   ungewaehlt soll er den drei Paketen darueber nicht die Aufmerksamkeit
   streitig machen. Seine Kachel bleibt deshalb grau und nimmt die
   Hausfarbe erst mit der Wahl an. Das Zeichen bleibt in beiden Faellen
   hell — Rang ist eine Frage der Farbe, nicht der Lesbarkeit. */
.miz-addon-card__icon-wrap {
  border-color: var(--k-karte-kante2);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--tv-ink) 12%, transparent),
      color-mix(in srgb, var(--tv-ink) 6%, transparent));
  color: var(--k-ink-2);
}

/* Gewaehlt: die Flaeche fuellt sich, das Zeichen wird weiss. Eine Regel
   fuer alle drei waehlbaren Kartenarten statt dreimal derselbe Satz. */
.miz-answer-card.is-selected .miz-answer-card__icon-wrap,
.miz-package-card.is-selected .miz-package-card__icon-combo,
.miz-addon-card.is-selected .miz-addon-card__icon-wrap {
  border-color: transparent;
  background: linear-gradient(180deg,
    var(--k-akzent-flach),
    color-mix(in srgb, var(--k-akzent-flach) 88%, #000));
  /* Die einzige rohe Farbe der Datei, und mit Absicht: --tv-ink ist
     #f5f5f7 und damit fuer ein Symbol auf gefuelltem Blau einen Tick zu
     weich. Weiss auf --tv-accent-solid steht bei 4,76:1. */
  color: #fff;
}

/* Drei Stufen statt zwei: Titel traegt, Beitext erklaert. Der Abstand
   dazwischen ist groesser als der Zeilenabstand im Beitext — sonst
   verschwimmen Ueberschrift und Erklaerung zu einem Block. */
.miz-answer-card__body  { display: grid; gap: .3rem; align-content: start; }

.miz-answer-card__title {
  color: var(--k-ink);
  font-size: var(--tv-t-body);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.miz-answer-card__meta {
  color: var(--k-ink-3);
  font-size: var(--tv-t-small);
  line-height: 1.55;
}

.miz-answer-grid {
  display: grid;
  gap: var(--k-luft-eng);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.miz-answer-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.miz-answer-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Gleich hohe Karten, wo die Texte unterschiedlich lang sind. */
.miz-answer-grid--stack-mobile { grid-auto-rows: 1fr; }

@media (min-width: 60rem) {
  .miz-answer-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   05  PAKETKARTE

   Erbt Flaeche und Verhalten von Abschnitt 04. Dazu kommen Symbolpaar,
   Vorzeile, Merkmalliste und der Preis im Fuss.

   Der Inhaber hat entschieden, dass Preise an jedem Paket sichtbar sind.
   Sie stehen deshalb ruhig und immer an derselben Stelle — unten, ueber
   einer feinen Linie, mit tabellarischen Ziffern.
   ========================================================================= */

.miz-package-grid {
  display: grid;
  gap: var(--k-luft-eng);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

@media (min-width: 60rem) {
  .miz-package-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .miz-package-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Drei Zeilen: Plakette, Beschreibung, Preis. Die mittlere gibt nach,
   die aeussere nicht — so steht der Preis bei allen drei Karten auf
   derselben Linie, egal wie lang der Text darueber ist. */
.miz-package-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Mehr Luft nach oben und unten als zur Seite: die Karte wird in der
     Hoehe gelesen — Plakette, Name, Beschreibung, Merkmale, Preis — und
     stand vorher zu eng gestapelt. */
  gap: 1.35rem;
  padding: 1.6rem 1.25rem;
  padding-bottom: calc(1.6rem + var(--k-hilfe));
}

.miz-package-card__top {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-right: var(--k-marke);
}

/* Zwei Symbole, das kleinere ueberlappt das groessere. Die Tiefe kommt
   aus der Ueberlappung, nicht aus einem Schatten. */
/* Die beiden Flaechen mit Plakette tragen den Bezug fuer sie. */
.miz-package-card__icon-combo,
.miz-care-card__icon-wrap { position: relative; }

/* Die kleine Plakette ueberlappt die Kachel; die Ueberlappung ist die
   Tiefe. Ihr Ring war eine harte 2-Pixel-Kante in --tv-surface-1 — das
   passte, solange die Kachel darunter dunkel war, und wurde zur Kerbe,
   als sie blau getoent wurde. Jetzt ein durchscheinender dunkler Saum:
   der setzt sich auf der getoenten Kachel UND auf der Karte ab, weil
   beide dunkel sind, ohne auf einer von beiden als Fremdkoerper zu
   stehen. */
.miz-package-card__icon-badge,
.miz-care-card__icon-badge {
  position: absolute;
  right: -.35rem;
  bottom: -.35rem;
  display: grid;
  place-items: center;
  width: var(--k-plakette);
  height: var(--k-plakette);
  border: 0;
  border-radius: var(--k-r-pille);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--tv-bg) 82%, transparent),
    0 2px 5px rgba(0, 0, 0, .45);
  font-size: var(--k-plakettenzeichen);
  line-height: 1;
}

.miz-package-card__icon-badge .ti,
.miz-care-card__icon-badge .ti {
  display: block;
  line-height: 1;
}

.miz-package-card__icon-badge {
  background: var(--k-akzent-flach);
  color: #fff;
}

/* ---- Die Plaketten der drei Stufen -------------------------------------
   Entscheidung des Inhabers am 22.08.2026: Starter gelb, Pro gruen,
   Ultra rot. Die Toene kommen aus der Hauspalette und sind keine neuen
   Werte.

   Umgekehrt aufgebaut als der erste Versuch: die Flaeche ist dunkel und
   das ZEICHEN traegt die Farbe, dazu ein Ring im selben Ton. Gefuellt
   waren die drei Plaketten drei bunte Punkte, die lauter sprachen als
   die Paketnamen daneben; als Zeichen auf dunklem Grund sind sie eine
   Auszeichnung und kein Signal.

   ZUM MITDENKEN, falls das spaeter jemand liest: das durchbricht die
   Regel im Farbsystem oben. Gruen heisst dort "ist enthalten / laeuft"
   und steht auch auf den Betreuungsplaketten; Rot heisst dort
   ausschliesslich "Achtung" und steht auf der Fehlerzeile und dem
   Hinweis beim Abschalten der Betreuung. Ein rotes Zeichen am teuersten
   Paket kann deshalb als Warnung gelesen werden. Beim Inhaber
   angesprochen und so gewollt.

   Das Zeichen ist auf allen dreien DUNKEL und nicht weiss. Gemessen:
   weiss auf Gelb 2,06:1, auf Gruen 2,02, auf Rot 2,82 — alle unter der
   3:1-Grenze fuer Symbole. Dunkel steht bei 9,69, 9,85 und 7,06. */
/* Gemessen auf --tv-surface-1: Rot 6,52:1, Gruen 9,10, Gelb 8,95 —
   alle deutlich ueber der 3:1-Grenze fuer Symbole. */
.miz-package-card__icon-badge {
  background: var(--tv-surface-1);
}

.miz-package-card[data-value="Starter"] .miz-package-card__icon-badge {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tv-kanal-mail) 55%, transparent),
    0 0 0 3px color-mix(in srgb, var(--tv-bg) 82%, transparent),
    0 2px 5px rgba(0, 0, 0, .45);
  color: var(--tv-kanal-mail);
}

.miz-package-card[data-value="Pro"] .miz-package-card__icon-badge {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--k-fertig) 55%, transparent),
    0 0 0 3px color-mix(in srgb, var(--tv-bg) 82%, transparent),
    0 2px 5px rgba(0, 0, 0, .45);
  color: var(--k-fertig);
}

.miz-package-card[data-value="Ultra"] .miz-package-card__icon-badge {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--k-warnung) 55%, transparent),
    0 0 0 3px color-mix(in srgb, var(--tv-bg) 82%, transparent),
    0 2px 5px rgba(0, 0, 0, .45);
  color: var(--k-warnung);
}

/* Der Paketname als Plakette. Er ist der Griff, an dem man die drei
   Angebote auseinanderhaelt — kein Beiwerk in der Zeile. Die Form steht
   oben bei .miz-screen__eyebrow; hier nur, was anders ist. */
.miz-package-card__eyebrow { padding-inline: .6rem; }

/* ---- Die Stufenleiter ---------------------------------------------------
   Starter, Pro und Ultra unterscheiden sich in der STAERKE eines Tons und
   nicht in drei Toenen. Drei Farbtoene wuerden das Farbsystem brechen:
   jeder muesste eine Bedeutung beanspruchen, die er nicht hat, und einer
   liefe zwangslaeufig in Gruen (enthalten) oder Rot (Folge) hinein. Eine
   Leiter in einem Ton sagt "mehr", nicht "anders" — und genau das ist der
   Unterschied zwischen den drei Paketen.

     Starter  nur eine Kante, grauer Text     — der Einstieg
     Pro      gefuellt, weisser Text          — die Mitte, empfohlen
     Ultra    staerker gefuellt, weisser Text — die Spitze

   Pro traegt zusaetzlich die Kante aus --featured. Das ist eine andere
   Aussage als die Stufe: "empfohlen" ist nicht dasselbe wie "groesser". */
.miz-package-card[data-value="Starter"] .miz-package-card__eyebrow {
  border-color: var(--k-karte-kante2);
  background: transparent;
  color: var(--k-ink-3);
}

.miz-package-card[data-value="Ultra"] .miz-package-card__eyebrow {
  border-color: color-mix(in srgb, var(--k-akzent) 55%, transparent);
  background: color-mix(in srgb, var(--k-akzent) 30%, transparent);
}

.miz-package-card__body {
  display: grid;
  gap: .6rem;
  align-content: start;
}

.miz-package-card__title {
  margin: 0;
  color: var(--k-ink);
  font-size: var(--tv-t-lead);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.miz-package-card__lead {
  margin: 0;
  color: var(--k-ink-2);
  font-size: var(--tv-t-small);
  line-height: 1.65;
}

/* Merkmale mit gesetztem Haken statt Aufzaehlungspunkt. */
.miz-package-card__list {
  display: grid;
  gap: .6rem;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}

.miz-package-card__list li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--k-ink-3);
  font-size: var(--tv-t-small);
  line-height: 1.55;
}

.miz-package-card__list li::before {
  content: "";
  position: absolute;
  top: .42em;
  left: .12rem;
  box-sizing: content-box;
  width: .2rem;
  height: .4rem;
  border: 1.5px solid var(--k-fertig);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

.miz-package-card__bottom {
  padding-top: 1.2rem;
  border-top: 1px solid var(--k-karte-kante);
}

/* Der Preis ist die Zahl, wegen der die Karte gelesen wird. Er steht
   immer an derselben Stelle und in derselben Groesse — so vergleicht
   man drei Pakete mit einem Blick nach unten statt mit Suchen. */
.miz-package-card__price {
  color: var(--k-ink);
  font-size: var(--tv-t-h3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1.1;
}

/* Das empfohlene Paket. Eine Kante in der Hausfarbe reicht — wer das
   Paket waehlt, bekommt zusaetzlich den Schein aus Abschnitt 04. */
.miz-package-card--featured {
  border-color: color-mix(in srgb, var(--k-akzent) 45%, transparent);
}

/* =========================================================================
   06  ZUSATZKARTE

   Optionale Zusaetze liegen eingeklappt hinter einer Schaltflaeche, die
   miz-konfigurator.js zur Laufzeit vor das Raster setzt. Eingeklappt
   heisst hier wirklich weg: eine Hoehe zu bewegen kostet Umbruch, und
   der Gewinn waere ein halbe Sekunde Aufziehen.
   ========================================================================= */

/* Der Zusatzblock. Er steht offen, also braucht er eine eigene Kante
   nach oben und eine Ueberschrift — sonst laufen die kleinen
   Zusatzkarten optisch in die drei Pakete darueber hinein. */
.miz-addon-block {
  padding-top: var(--k-luft);
  border-top: 1px solid var(--k-karte-kante);
}

.miz-addon-block__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.miz-addon-block__titel {
  color: var(--k-ink-3);
  font-size: var(--tv-t-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Zuklappen ist die Nebenhandlung: ein Textweg, keine Schaltflaeche,
   die mit "Weiter" um Aufmerksamkeit kaempft. */
.miz-addon-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .2rem;
  border: 0;
  background: transparent;
  color: var(--k-ink-3);
  font: inherit;
  font-size: var(--tv-t-label);
  font-weight: 600;
  cursor: pointer;
  transition:
    color var(--k-zeit-kurz) var(--k-lauf),
    transform var(--k-zeit-kurz) var(--k-pop);
}

.miz-addon-toggle:hover { color: var(--k-ink); }

.miz-addon-toggle__chev {
  transition: transform var(--k-zeit-kurz) var(--k-lauf);
}

.miz-addon-toggle.is-open .miz-addon-toggle__chev {
  transform: rotate(180deg);
}

.miz-addon-grid {
  display: grid;
  gap: var(--k-luft-eng);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-top: var(--k-luft);
}

.miz-addon-grid.is-collapsed { display: none; }

@media (min-width: 60rem) {
  .miz-addon-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .miz-addon-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.miz-addon-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.2rem;
  padding-right: calc(1.2rem + var(--k-marke));
  padding-bottom: calc(1.2rem + var(--k-hilfe));
}

/* Der Preis stand direkt hinter dem Beschreibungstext — und der ist mal
   zwei, mal drei Zeilen lang. In einer Reihe nebeneinander sassen die
   Preise dadurch auf drei verschiedenen Hoehen.

   Vier Zeilen: Name, Beschreibung, Preis, Fussnote. Die zweite gibt
   nach, die anderen nicht — so steht der Preis bei jeder Karte auf
   derselben Linie.

   Die vierte Zeile hat eine Mindesthoehe und steht deshalb AUCH in den
   Karten ohne Fussnote. Ohne sie schob "zzgl. Werbebudget" die Karten,
   die es tragen, um seine eigene Hoehe nach oben; neben den Preis
   gesetzt brach es dagegen in der schmalen Spalte um. Reservierter
   Platz loest beides. */
.miz-addon-card__body {
  display: grid;
  grid-template-rows: auto 1fr auto minmax(1.25rem, auto);
  gap: .25rem;
}

.miz-addon-card__title { grid-row: 1; }
.miz-addon-card__lead  { grid-row: 2; }
.miz-addon-card__price { grid-row: 3; }
.miz-addon-card__note  { grid-row: 4; }


.miz-addon-card__title {
  margin: 0;
  color: var(--k-ink);
  font-size: var(--tv-t-small);
  font-weight: 600;
}

.miz-addon-card__lead {
  margin: 0;
  color: var(--k-ink-3);
  font-size: var(--tv-t-small);
  line-height: 1.55;
}

.miz-addon-card__price {
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--k-karte-kante);
  color: var(--k-ink);
  font-size: var(--tv-t-lead);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.miz-addon-card__note {
  color: var(--k-ink-3);
  font-size: var(--tv-t-label);
  line-height: 1.5;
}

/* =========================================================================
   07  BETREUUNGSKARTE UND GRUNDAUSSTATTUNG

   Die Betreuung ist standardmaessig an. Wer sie abschaltet, bekommt
   keinen Riegel, sondern einen Satz, der sagt, was das bedeutet.
   ========================================================================= */

.miz-care-card {
  display: grid;
  gap: var(--k-luft-eng);
  padding: var(--k-luft-weit);
  padding-bottom: calc(var(--k-luft-weit) + var(--k-hilfe));
}

.miz-care-card__main {
  display: flex;
  align-items: flex-start;
  gap: var(--k-luft-eng);
}

.miz-care-card__icon-badge {
  background: var(--k-fertig);
  color: var(--tv-bg);
}

.miz-care-card__content { display: grid; gap: .35rem; align-content: start; }

.miz-care-card__eyebrow {
  color: var(--k-fertig);
  font-size: var(--tv-t-label);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Die Empfehlung bei Neugruendung ist keine Zusage, sondern ein Rat.
   Deshalb Akzent statt Gruen — Gruen heisst hier "ist drin". */
.miz-care-card__eyebrow--recommendation {
  color: var(--k-akzent-text);
}

.miz-care-card__title {
  margin: 0;
  color: var(--k-ink);
  font-size: var(--tv-t-lead);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.miz-care-card__lead {
  margin: 0;
  max-width: var(--tv-mass);
  color: var(--k-ink-2);
  font-size: var(--tv-t-small);
  line-height: 1.55;
}

.miz-care-card__list {
  display: grid;
  gap: .32rem;
  margin: .35rem 0 0;
  padding: 0;
  list-style: none;
}

.miz-care-card__list li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--k-ink-3);
  font-size: var(--tv-t-small);
  line-height: 1.55;
}

.miz-care-card__list li::before {
  content: "";
  position: absolute;
  top: .42em;
  left: .12rem;
  box-sizing: content-box;
  width: .2rem;
  height: .4rem;
  border: 1.5px solid var(--k-fertig);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

/* Die Entscheidungsspalte. Preis und Schalter gehoeren zusammen — davor
   sass der Schalter oben rechts in der Luft und der Preis unten links,
   also so weit auseinander wie die Karte es zuliess. */
.miz-care-card__entscheidung {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: .9rem;
  flex: none;
}

.miz-care-card__price {
  color: var(--k-ink);
  font-size: var(--tv-t-lead);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
  white-space: nowrap;
}

/* Ab hier ist Platz fuer zwei Haelften: links, was die Betreuung ist,
   rechts, was sie kostet und ob sie mitkommt. Eine Kante trennt beide,
   damit es zwei Bereiche sind und nicht ein langer Streifen. */
@media (min-width: 60rem) {
  .miz-care-card__main {
    align-items: stretch;
    gap: var(--k-luft-weit);
  }

  .miz-care-card__content { flex: 1; }

  .miz-care-card__entscheidung {
    justify-items: center;
    align-content: center;
    min-width: 12rem;
    padding-left: var(--k-luft-weit);
    border-left: 1px solid var(--k-karte-kante);
  }

  .miz-care-card__entscheidung .miz-care-card__price {
    font-size: var(--tv-t-name);
  }
}

/* ---- Das Beispielbild auf der Etappe "Digitale Basis" -------------------
   "Grundausstattung" ist ein Wort, unter dem sich niemand etwas
   vorstellt. Das Bild zeigt es: Logo, Farben, Schrift, Briefbogen,
   Visitenkarte. Ab 60rem steht es neben dem Text, darunter darueber.

   Quadratisch und deshalb gedeckelt — ohne Hoehenbegrenzung zoege es
   die Etappe auf die doppelte Hoehe. */
.miz-care-card__beispiel {
  margin: 0;
  display: grid;
  gap: .6rem;
  justify-items: start;
}

/* Das Bild ist eine Schaltflaeche. Sie sieht aus wie das Bild und
   verhaelt sich wie ein Bedienelement: hebt sich beim Ueberfahren, gibt
   beim Druck nach, hat einen Fokusring. */
.miz-care-card__lupe {
  appearance: none;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--k-r-ui);
  background: none;
  cursor: zoom-in;
  transition: transform var(--k-zeit-kurz) var(--k-pop);
}

.miz-care-card__lupe:hover { transform: scale(1.02); }
.miz-care-card__lupe:active { transform: scale(.99); }

.miz-care-card__lupe:focus-visible {
  outline: 2px solid var(--k-akzent);
  outline-offset: 3px;
}

.miz-care-card__beispiel img {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: auto;
  border: 1px solid var(--k-karte-kante2);
  border-radius: var(--k-r-ui);
  box-shadow: var(--k-tiefe);
}

.miz-care-card__lupe-hinweis { color: var(--k-akzent-text); }

/* ---- Das Bild in gross ---------------------------------------------------
   <dialog> statt eigener Bauweise wie beim Hilfe-Fenster: Escape,
   Fokusfalle und das Stilllegen der Seite dahinter bringt der Browser
   mit. Weniger Logik, und die Tastatur stimmt von selbst. */
.miz-bild-modal {
  max-width: min(46rem, 100vw - 2rem);
  max-height: min(46rem, 100dvh - 2rem);
  padding: 0;
  border: 1px solid var(--k-scheibe-kante);
  border-radius: var(--k-r-karte);
  background: var(--tv-surface-2);
  box-shadow: var(--tv-lift);
  color: var(--k-ink);
  overflow: visible;
}

.miz-bild-modal[open] {
  animation: kFensterAuf .28s var(--k-pop) both;
}

.miz-bild-modal::backdrop {
  background: rgba(4, 6, 10, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.miz-bild-modal img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--k-r-karte);
}

.miz-bild-modal__close {
  position: absolute;
  top: -.9rem;
  right: -.9rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--k-karte-kante2);
  border-radius: var(--k-r-pille);
  background: var(--tv-surface-2);
  color: var(--k-ink-2);
  cursor: pointer;
  transition:
    color var(--k-zeit-kurz) var(--k-lauf),
    border-color var(--k-zeit-kurz) var(--k-lauf),
    transform var(--k-zeit-kurz) var(--k-pop);
}

.miz-bild-modal__close::before,
.miz-bild-modal__close::after {
  content: "";
  position: absolute;
  width: .82rem;
  height: 1px;
  background: currentColor;
}

.miz-bild-modal__close::before { transform: rotate(45deg); }
.miz-bild-modal__close::after  { transform: rotate(-45deg); }

.miz-bild-modal__close:hover {
  transform: scale(1.06);
  border-color: var(--k-ink-3);
  color: var(--k-ink);
}

.miz-bild-modal__close:focus-visible {
  outline: 2px solid var(--k-akzent);
  outline-offset: 3px;
}

.miz-care-card__beispiel figcaption {
  max-width: 24rem;
  color: var(--k-ink-3);
  font-size: var(--tv-t-label);
  line-height: 1.5;
}

@media (min-width: 60rem) {
  /* Die Karte wird zweispaltig: links Text, Preis und die Ja/Nein-Zeilen,
     rechts das Beispiel. Ueber grid-template-areas, weil die drei Teile
     im Markup nacheinander stehen und nicht ineinander. */
  .miz-care-card:has(.miz-care-card__beispiel) {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--k-luft-weit);
    align-items: start;
  }

  .miz-care-card:has(.miz-care-card__beispiel) .miz-care-card__main,
  .miz-care-card:has(.miz-care-card__beispiel) .miz-check-options {
    grid-column: 1;
  }

  /* Auf dieser Karte nimmt das Beispiel die rechte Haelfte. Die
     Entscheidungsspalte mit ihrer Trennlinie hat links keinen Platz
     mehr — der Preis wurde abgeschnitten. Er steht hier unter dem Text
     statt daneben. */
  .miz-care-card:has(.miz-care-card__beispiel) .miz-care-card__main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--k-luft-eng);
    align-items: start;
  }

  .miz-care-card:has(.miz-care-card__beispiel) .miz-care-card__icon-wrap {
    grid-row: 1 / span 2;
  }

  .miz-care-card:has(.miz-care-card__beispiel) .miz-care-card__content,
  .miz-care-card:has(.miz-care-card__beispiel) .miz-care-card__entscheidung {
    grid-column: 2;
  }

  .miz-care-card:has(.miz-care-card__beispiel) .miz-care-card__entscheidung {
    justify-items: start;
    align-content: start;
    min-width: 0;
    margin-top: .5rem;
    padding-left: 0;
    border-left: 0;
  }

  .miz-care-card__beispiel {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .miz-care-card__beispiel img { max-width: 20rem; }
  .miz-care-card__beispiel figcaption { max-width: 20rem; }
}

.miz-care-card__notice {
  display: none;
  padding: .7rem .9rem;
  border: 1px solid color-mix(in srgb, var(--k-warnung) 34%, transparent);
  border-radius: var(--k-r-ui);
  background: var(--k-warnung-dim);
  color: var(--k-ink-2);
  font-size: var(--tv-t-label);
  line-height: 1.55;
}

.miz-care-card__notice.is-visible { display: block; }

/* ---- Der Schalter -------------------------------------------------------
   Ein Kippschalter in der Sprache des Systems: Bahn faerbt sich, Knopf
   faehrt hinueber. Bewegt wird nur transform. */

.miz-care-switch {
  position: relative;
  flex: none;
  width: 3.25rem;
  height: 2rem;
  cursor: pointer;
}

.miz-care-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.miz-care-switch__ui {
  position: absolute;
  inset: 0;
  border-radius: var(--k-r-pille);
  background: var(--k-karte-hoch);
  transition: background-color var(--k-zeit-kurz) var(--k-lauf);
  pointer-events: none;
}

.miz-care-switch__ui::after {
  content: "";
  position: absolute;
  top: .1875rem;
  left: .1875rem;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: var(--k-r-pille);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  transition: transform var(--k-zeit-kurz) var(--k-pop);
}

.miz-care-switch input:checked + .miz-care-switch__ui {
  background: var(--k-fertig);
}

.miz-care-switch input:checked + .miz-care-switch__ui::after {
  transform: translateX(1.25rem);
}

.miz-care-switch input:focus-visible + .miz-care-switch__ui {
  outline: 2px solid var(--k-akzent);
  outline-offset: 3px;
}

/* ---- Ja / Nein bei der Grundausstattung --------------------------------- */

.miz-check-options {
  display: grid;
  gap: .5rem;
}

.miz-check-row {
  appearance: none;
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-height: var(--k-btn-hoehe);
  padding: .6rem .9rem;
  border: 1px solid var(--k-karte-kante);
  border-radius: var(--k-r-ui);
  background: var(--k-karte);
  color: var(--k-ink-2);
  font: inherit;
  font-size: var(--tv-t-small);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--k-zeit-kurz) var(--k-lauf),
    background-color var(--k-zeit-kurz) var(--k-lauf),
    color var(--k-zeit-kurz) var(--k-lauf),
    transform var(--k-zeit-kurz) var(--k-pop);
}

.miz-check-row:hover {
  border-color: var(--k-karte-kante2);
  background: var(--k-karte-hoch);
}

/* Das eingebettete Auswahlfeld bleibt bedienbar fuer Vorlesewerkzeuge,
   traegt aber die Hausform statt der des Systems. */
.miz-check-row input {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  margin: 0;
  accent-color: var(--k-akzent);
  pointer-events: none;
}

.miz-check-row--strong {
  border-color: var(--k-gewaehlt);
  background: var(--k-akzent-dim);
  color: var(--k-ink);
}

/* =========================================================================
   08  HILFE

   Der Plan sah vor, das Fenster durch einen Aufklapper unter der Frage
   zu ersetzen. Im dritten Entwurf hat sich gezeigt, warum das nicht
   traegt: der Aufklapper schiebt die Karten nach unten, und wer Hilfe
   liest, verliert dabei die Stelle, an der er stand. Das Fenster bleibt
   — es laesst die Etappe unberuehrt.

   Es gibt zwei Ausloeser: das Fragezeichen an der Vorzeile fuer die
   ganze Etappe, und das kleine an einer Karte fuer genau diese Karte.
   ========================================================================= */

/* Das Fragezeichen war durchsichtig, mit grauer Kante und grauem
   Zeichen — auf der Scheibe praktisch nicht zu finden. Jetzt traegt es
   Flaeche und die Hausfarbe: sichtbar genug, um gesucht und gefunden zu
   werden, ruhig genug, um "Weiter" nicht Konkurrenz zu machen. */
.miz-help-badge {
  appearance: none;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--k-hilfe);
  height: var(--k-hilfe);
  flex: none;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--k-akzent) 48%, transparent);
  border-radius: var(--k-r-pille);
  background: var(--k-akzent-dim);
  /* Gemessen am 22.08.2026: das Zeichen in --tv-accent-2 stand auf der
     blauen Fuellung bei 3,89:1. In --tv-ink sind es 10,12 — dieselbe
     ruhige Flaeche, aber das Zeichen ist wirklich zu sehen. */
  color: var(--k-ink);
  font: inherit;
  font-size: var(--tv-i-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    color var(--k-zeit-kurz) var(--k-lauf),
    border-color var(--k-zeit-kurz) var(--k-lauf),
    background-color var(--k-zeit-kurz) var(--k-lauf),
    transform var(--k-zeit-kurz) var(--k-pop);
}

.miz-help-badge:hover {
  transform: scale(1.08);
  border-color: var(--k-akzent);
  background: color-mix(in srgb, var(--k-akzent) 30%, transparent);
  color: var(--k-ink);
}

.miz-help-badge__icon {
  display: grid;
  place-items: center;
  line-height: 1;
}

/* Symbolschriften bringen eine eigene Grundlinie mit, und die
   Werkzeug-Teilschrift hat keine ascent-/descent-override wie die
   tv-Schicht. Als Zeile gesetzt sass das Fragezeichen dadurch sichtbar
   zu tief im Kreis. Als Block ohne Zeilenhoehe faellt der Grundlinien-
   versatz weg und place-items zentriert wirklich. */
.miz-help-badge .ti,
.miz-card-help .ti {
  display: block;
  line-height: 1;
}

/* Ein kurzes Pulsieren beim Betreten der Etappe: ein Ring laeuft
   dreimal nach aussen und ist dann still. Dauerhaft blinken waere
   Laerm — es soll einmal zeigen, dass hier etwas zu holen ist.
   Bewegt werden nur transform und opacity. */
.miz-help-badge::after,
.miz-card-help::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--k-akzent);
  border-radius: var(--k-r-pille);
  opacity: 0;
  pointer-events: none;
  animation: kHilfePuls 2.4s var(--k-lauf) .6s 3;
}

.miz-help-badge:hover::after,
.miz-card-help:hover::after { animation: none; }

@keyframes kHilfePuls {
  0%  { opacity: .6; transform: scale(1); }
  60% { opacity: 0;  transform: scale(1.6); }
  100%{ opacity: 0;  transform: scale(1.6); }
}

/* Das Fragezeichen an einer Karte. Es sitzt in der unteren rechten Ecke,
   damit es dem Wahlzeichen oben rechts nicht in die Quere kommt. */
.miz-card-help {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  display: grid;
  place-items: center;
  width: var(--k-hilfe);
  height: var(--k-hilfe);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--k-akzent) 48%, transparent);
  border-radius: var(--k-r-pille);
  background: var(--k-akzent-dim);
  color: var(--k-ink);
  font: inherit;
  font-size: var(--tv-i-sm);
  line-height: 1;
  cursor: pointer;
  transition:
    color var(--k-zeit-kurz) var(--k-lauf),
    border-color var(--k-zeit-kurz) var(--k-lauf),
    background-color var(--k-zeit-kurz) var(--k-lauf),
    transform var(--k-zeit-kurz) var(--k-pop);
}

.miz-card-help:hover {
  transform: scale(1.08);
  border-color: var(--k-akzent);
  background: color-mix(in srgb, var(--k-akzent) 30%, transparent);
  color: var(--k-ink);
}

/* ---- Das Fenster -------------------------------------------------------- */

.miz-help-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--k-rand);
}

.miz-help-modal[hidden] { display: none; }

.miz-help-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 10, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: kSchleier .25s var(--k-lauf) both;
}

.miz-help-modal__panel {
  position: relative;
  width: min(36rem, 100%);
  max-height: min(80dvh, 44rem);
  padding: 1.7rem 1.8rem 1.6rem;
  border: 1px solid var(--k-scheibe-kante);
  border-radius: var(--k-r-karte);
  background: var(--tv-surface-2);
  box-shadow: var(--tv-lift);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: kFensterAuf .28s var(--k-pop) both;
}

@keyframes kSchleier {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes kFensterAuf {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.miz-help-modal__close {
  position: absolute;
  top: .9rem;
  right: .9rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--k-karte-kante2);
  border-radius: var(--k-r-pille);
  background: transparent;
  color: var(--k-ink-2);
  font: inherit;
  font-size: var(--tv-i-sm);
  cursor: pointer;
  transition:
    color var(--k-zeit-kurz) var(--k-lauf),
    border-color var(--k-zeit-kurz) var(--k-lauf),
    transform var(--k-zeit-kurz) var(--k-pop);
}

/* Zwei gekreuzte Striche statt eines Schriftzeichens. */
.miz-help-modal__close::before,
.miz-help-modal__close::after {
  content: "";
  position: absolute;
  width: .82rem;
  height: 1px;
  background: currentColor;
}

.miz-help-modal__close::before { transform: rotate(45deg); }
.miz-help-modal__close::after  { transform: rotate(-45deg); }

.miz-help-modal__close:hover {
  border-color: var(--k-ink-3);
  color: var(--k-ink);
}

/* Der Inhalt kommt aus dem Vorrat und bringt seine eigene Auszeichnung
   mit: Vorzeile, fette Frage, Absaetze, Liste. */
/* Vier Stufen von oben nach unten: woher die Frage kommt, die Frage
   selbst, die Antwort in einem Absatz, dann die Faelle einzeln. Der
   Abstand vor der Liste ist groesser als der darin — sonst liest sich
   der Absatz als erster Listenpunkt. */
.miz-help-modal__content {
  display: grid;
  gap: .55rem;
  padding-right: 2rem;
}

.miz-help-modal__content > .miz-help-content__list {
  margin-top: .5rem;
  padding-top: .9rem;
  border-top: 1px solid var(--k-karte-kante);
}

.miz-help-content__eyebrow,
.miz-help-modal__eyebrow {
  color: var(--k-akzent-text);
  font-size: var(--tv-t-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Nur die Frage direkt im Fenster traegt Ueberschriftgroesse. Ohne das
   > erbten auch die ausgezeichneten Woerter in der Liste die Groesse
   und sprengten den Absatz. */
.miz-help-modal__content > strong,
.miz-help-modal__titel {
  margin: 0;
  color: var(--k-ink);
  font-size: var(--tv-t-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.miz-help-modal__content p,
.miz-help-modal__text {
  margin: 0;
  max-width: var(--tv-mass);
  color: var(--k-ink-2);
  font-size: var(--tv-t-small);
  line-height: 1.6;
}

.miz-help-content__list {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.miz-help-content__list li {
  position: relative;
  padding-left: 1.05rem;
  color: var(--k-ink-2);
  font-size: var(--tv-t-small);
  line-height: 1.55;
}

/* Der Punkt haengt an der Grundlinie der ersten Zeile, nicht in ihrer
   Mitte — bei zweizeiligen Eintraegen saehe das sonst verrutscht aus. */
.miz-help-content__list li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: .34rem;
  height: .34rem;
  border-radius: var(--k-r-pille);
  background: var(--k-akzent);
}

.miz-help-content__list strong { color: var(--k-ink); font-weight: 600; }

/* Der Vorrat selbst wird nie gezeigt; er ist die Quelle fuer das
   Fenster. */
.miz-help-store[hidden] { display: none; }

/* Solange das Fenster offen ist, steht die Seite dahinter still. */
body.miz-config-modal-open { overflow: hidden; }

/* =========================================================================
   09  STEUERUNG

   Drei Rollen, ein Radius. "Weiter" traegt Farbe, "Zurueck" nur eine
   Kante, "Lieber persoenlich besprechen" ist ein Textweg und keine
   Schaltflaeche — es soll nicht mit "Weiter" konkurrieren.

   "Weiter" ist das meistbenutzte Bedienelement des Werkzeugs: bei elf
   Etappen wird es elfmal gedrueckt. Es traegt deshalb Material und
   nicht nur Farbe — ein Verlauf von oben nach unten, ein Lichtsaum an
   der Oberkante und ein farbiger Schein darunter, wie Licht, das von
   der Flaeche abfaellt. Flach gefuellt sah es aus wie ein Rechteck mit
   Hintergrundfarbe.

   Alle Zustaende sind gestaffelt: ruhend, ueberfahren (hebt sich),
   gedrueckt (geht hinunter), Fokus (Ring), gesperrt (ohne Tiefe).
   Bewegt werden nur transform und Schatten.
   ========================================================================= */

.miz-nav-btn {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: var(--k-btn-hoehe);
  padding: .45rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--k-r-btn);
  font: inherit;
  font-size: var(--tv-t-small);
  font-weight: 600;
  /* Ohne die eigene Zeilenhoehe erbt die Schaltflaeche die 1,6 des
     Fliesstextes und wird allein dadurch ein Viertel hoeher. */
  line-height: 1.2;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--k-zeit-kurz) var(--k-pop),
    box-shadow var(--k-zeit-kurz) var(--k-lauf),
    background-color var(--k-zeit-kurz) var(--k-lauf),
    border-color var(--k-zeit-kurz) var(--k-lauf),
    color var(--k-zeit-kurz) var(--k-lauf);
}

.miz-nav-btn[hidden] { display: none; }

/* Gedrueckt geht jede Schaltflaeche hinunter statt zur Seite. Der Weg
   ist kurz und die Rueckmeldung sofort — das ist der Unterschied
   zwischen "reagiert" und "hakt". */
.miz-nav-btn:active { transform: translateY(0) scale(.97); }

/* ---- Weiter ------------------------------------------------------------- */

/* "Weiter" ist breiter als sein Text. Es ist die Hauptaktion und wird
   elfmal gedrueckt; eine Schaltflaeche, die sich auf ihre Beschriftung
   zusammenzieht, sieht daneben aus wie eine von vielen. Das Mindestmass
   faengt ausserdem den Wechsel der Beschriftung ab: auf der letzten
   Etappe heisst sie "Zur Anfrage" und waere sonst sprunghaft breiter. */
.miz-nav-btn--primary {
  min-width: 9.5rem;
  border-color: transparent;
  /* Der Verlauf geht NUR nach unten ins Dunkle. Aufgehellt hat er die
     Oberkante zuerst auch — dort stand Weiss dann bei 3,94:1 und damit
     unter der Grenze. Das Licht von oben macht jetzt der Lichtsaum,
     nicht die Fuellung: eine Haarlinie kostet keinen Kontrast, eine
     aufgehellte Flaeche schon. Oben 4,76:1, unten 5,45:1. */
  background:
    linear-gradient(180deg,
      var(--k-akzent-flach),
      color-mix(in srgb, var(--k-akzent-flach) 90%, #000));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    0 1px 2px rgba(0, 0, 0, .34),
    0 10px 22px -12px var(--k-akzent);
}

.miz-nav-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 2px 5px rgba(0, 0, 0, .38),
    0 16px 32px -13px var(--k-akzent);
}

.miz-nav-btn--primary:active {
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .28),
    0 1px 2px rgba(0, 0, 0, .3);
}

/* ---- Zurueck ------------------------------------------------------------ */

.miz-nav-btn--ghost {
  border-color: var(--k-karte-kante2);
  /* Eine Spur Flaeche statt gar keiner: eine blosse Kante auf dem Glas
     las sich wie ein Umriss, nicht wie eine Schaltflaeche. */
  background: color-mix(in srgb, var(--tv-ink) 5%, transparent);
  color: var(--k-ink-2);
  box-shadow: var(--k-glanz);
}

.miz-nav-btn--ghost:hover {
  transform: translateY(-1px);
  border-color: var(--k-ink-3);
  background: color-mix(in srgb, var(--tv-ink) 10%, transparent);
  color: var(--k-ink);
  box-shadow: var(--k-glanz), var(--k-tiefe);
}

.miz-nav-btn--ghost:active { box-shadow: none; }

/* ---- Lieber persoenlich besprechen -------------------------------------- */

.miz-nav-btn--ghost-alt {
  padding-inline: .4rem;
  border-color: transparent;
  background: transparent;
  color: var(--k-akzent-text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--k-akzent-text) 38%, transparent);
  transition:
    color var(--k-zeit-kurz) var(--k-lauf),
    text-decoration-color var(--k-zeit-kurz) var(--k-lauf);
}

.miz-nav-btn--ghost-alt:hover {
  color: var(--k-ink);
  text-decoration-color: currentColor;
}

/* Ein Textweg hebt und senkt sich nicht — er ist keine Flaeche. */
.miz-nav-btn--ghost-alt:active { transform: none; }

/* ---- Gesperrt ----------------------------------------------------------- */

.miz-nav-btn:disabled {
  opacity: .38;
  cursor: not-allowed;
  transform: none;
  /* Ohne Tiefe: was nicht gedrueckt werden kann, liegt auch nicht auf
     der Flaeche. */
  box-shadow: none;
}

.miz-nav-btn:disabled:hover { transform: none; }

/* ---- Fokus, fuer alle Schaltflaechen gleich ------------------------------ */

.miz-nav-btn:focus-visible,
.miz-addon-toggle:focus-visible,
.miz-check-row:focus-visible,
.miz-help-badge:focus-visible,
.miz-card-help:focus-visible,
.miz-help-modal__close:focus-visible {
  outline: 2px solid var(--k-akzent);
  outline-offset: 3px;
}

/* Auch die uebrigen Schaltflaechen geben beim Druck nach. */
.miz-addon-toggle:active,
.miz-check-row:active,
.miz-help-modal__close:active { transform: scale(.97); }

/* =========================================================================
   10  ZUSAMMENFASSUNG

   miz-konfigurator.js baut hier die gewaehlten Leistungen und eine
   Empfehlung in Worten. Preise stehen an den Paketen, nicht noch einmal
   am Ende. Die zweite Aktion fuehrt zum Online-Check.

   Die Uebergabe an das Kontaktformular laeuft ueber
   sessionStorage["mizConfigSummary"] und darf beim Umbau nicht brechen.
   ========================================================================= */

/* Zwei Spalten: links die Auswahl, rechts die Einordnung. */
.miz-summary {
  display: grid;
  gap: var(--k-luft-eng);
}

.miz-summary-card {
  display: grid;
  gap: .6rem;
  align-content: start;
  padding: 1.2rem;
  border: 1px solid var(--k-karte-kante);
  border-radius: var(--k-r-ui);
  background: var(--k-karte);
}

.miz-summary-card__label {
  color: var(--k-ink-3);
  font-size: var(--tv-t-label);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.miz-summary-card__value {
  color: var(--k-ink);
  font-size: var(--tv-t-name);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.miz-summary-card__rows { display: grid; gap: .35rem; }

.miz-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: var(--k-ink-2);
  font-size: var(--tv-t-label);
  line-height: 1.5;
}

.miz-summary-row strong {
  color: var(--k-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.miz-summary-card__list {
  color: var(--k-ink-3);
  font-size: var(--tv-t-label);
  line-height: 1.55;
}

/* Die Summe des ersten Jahres. Sie traegt die Hausfarbe und die
   groesste Zahl der Seite, weil sie die ist, mit der der Kunde ins
   Gespraech geht. */
.miz-summary-card--highlight {
  border-color: var(--k-gewaehlt);
  background: var(--k-akzent-dim);
  box-shadow: var(--k-scheibe-glanz);
}

.miz-summary-card--highlight .miz-summary-card__value {
  font-size: var(--tv-t-h2-ruhig);
}

.miz-summary-card--highlight .miz-summary-card__label { color: var(--k-akzent-text); }

/* Die Posten sind Listen, keine Kacheln: eine feine Trennlinie reicht,
   ein Rahmen um jede waere Laerm. Die Regeln stehen bewusst hinter der
   Basisregel — davor hat sie die Basis wieder ueberschrieben. */
.miz-summary__posten,
.miz-summary__empfehlung {
  display: grid;
  align-content: start;
  gap: var(--k-luft-eng);
}

.miz-summary-card--posten {
  padding: .9rem 0;
  border: 0;
  border-bottom: 1px solid var(--k-karte-kante);
  border-radius: 0;
  background: none;
}

.miz-summary__posten .miz-summary-card--posten:last-child { border-bottom: 0; }

.miz-summary-card__recommendation {
  margin: 0;
  color: var(--k-ink);
  font-size: var(--tv-t-small);
  font-weight: 600;
  line-height: 1.55;
  text-wrap: pretty;
}

@media (min-width: 60rem) {
  .miz-summary {
    grid-template-columns: minmax(0, 1.55fr) minmax(15rem, .9fr);
    align-items: start;
  }

  .miz-summary__posten { gap: 0; }
}

.miz-screen__footer-actions--summary { flex-wrap: wrap; }

.miz-summary-note {
  margin-top: var(--k-luft-eng);
  max-width: var(--tv-mass);
  color: var(--k-ink-3);
  font-size: var(--tv-t-label);
  line-height: 1.6;
}

/* =========================================================================
   11  FRAGEN UND ANTWORTEN

   Sie stehen unter dem Werkzeug und beantworten, was jemand vor dem
   Start wissen will. Ab der zweiten Etappe sind sie ueberfluessig —
   wer weiterklickt, hat begonnen.

   ACHTUNG: der Text verspricht "zwoelf einfache Fragen". Es sind elf
   plus Zusammenfassung. Gehoert korrigiert, sobald das Markup drankommt.
   ========================================================================= */

/* Der Infobereich ist ein Band, kein zweites Fenster. Er laeuft von
   Rand zu Rand durch, ohne Ecken, ohne Schatten, ohne Kante ausser der
   Haarlinie oben — so ist er sichtbar ein anderer Bereich der Seite und
   nicht noch eine Karte neben der Karte.

   Eine abdunkelnde Schicht braucht er trotzdem: auf dem blanken Motiv
   stand sein Text am 22.08.2026 bei 1,05:1, also unlesbar. Bei 88 %
   stehen Titel 13,82, Text 6,85 und Vorzeile 5,31. Das Motiv darueber
   bleibt unangetastet hell. */
.miz-config-faq {
  position: relative;
  margin-top: var(--tv-section);
  margin-bottom: calc(var(--k-luft-weit) * -1);
  border-top: 1px solid var(--k-scheibe-kante);
  /* Unschaerfe statt reiner Deckfarbe: das Motiv bleibt als Bewegung
     dahinter erkennbar. Bei 78 % sah das am besten aus, aber die
     Vorzeile stand dann bei 3,72:1 und der Beitext bei 4,28 — beide
     unter der Grenze. Bei 85 % stehen sie bei 4,81 und 5,05, und das
     Motiv scheint immer noch durch. Praefix VOR der Standardform —
     sonst wirft lightningcss die unpraefixierte Zeile weg. */
  background: color-mix(in srgb, var(--tv-bg) 85%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  backdrop-filter: saturate(160%) blur(22px);
}

/* Ohne Rueckhalt im Browser deckt die Flaeche wieder voll — sonst
   staende der Text ungefiltert auf dem hellen Motiv. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .miz-config-faq { background: color-mix(in srgb, var(--tv-bg) 90%, transparent); }
}

/* Der Uebergang von der Karte ins Band. Ohne ihn stiess die Haarlinie
   hart auf das helle Foto; so laeuft das Band nach oben aus und man
   sieht, dass hier ein zweiter Bereich beginnt. */
.miz-config-faq::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--tv-section);
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--tv-bg) 85%, transparent));
}

.miz-config-faq__inner {
  max-width: var(--tv-shell);
  margin-inline: auto;
  padding-block: var(--k-luft-weit);
}

.miz-config-faq[hidden] { display: none; }

.miz-config-faq__head {
  max-width: var(--tv-mass);
  margin-bottom: var(--k-luft-weit);
}

.miz-config-faq__head h2 { text-wrap: balance; }

/* ---- Die drei Merkmale --------------------------------------------------
   Kacheln im Material des Hauses, nicht als Aufzaehlung: was vor dem
   ersten Klick zaehlt, soll man sehen und nicht lesen muessen. */
.miz-fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--k-luft-eng);
  margin: 0 0 var(--k-luft-weit);
  padding: 0;
  list-style: none;
}

.miz-fakt {
  display: grid;
  gap: .35rem;
  padding: 1.2rem;
  border: 1px solid var(--k-kante);
  border-radius: var(--k-r-ui);
  background: var(--k-karte);
  box-shadow: var(--k-glanz), var(--k-tiefe);
}

.miz-fakt__zeichen {
  display: grid;
  place-items: center;
  width: var(--k-symbolfeld);
  height: var(--k-symbolfeld);
  margin-bottom: .35rem;
  border: 1px solid color-mix(in srgb, var(--k-akzent) 26%, transparent);
  border-radius: var(--k-r-ui);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--k-akzent) 24%, transparent),
      color-mix(in srgb, var(--k-akzent) 14%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  color: var(--k-ink);
  font-size: var(--k-symbolzeichen);
}

.miz-fakt__zeichen .ti { display: block; line-height: 1; }

.miz-fakt__wert {
  color: var(--k-ink);
  font-size: var(--tv-t-lead);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.miz-fakt__text {
  color: var(--k-ink-3);
  font-size: var(--tv-t-small);
  line-height: 1.55;
}

/* ---- Die vier Bereiche --------------------------------------------------
   Dieselben Zeichen wie im Werkzeug: wer hier liest, erkennt sie oben
   wieder. */
.miz-bereiche {
  margin-bottom: var(--k-luft-weit);
  padding-top: var(--k-luft);
  border-top: 1px solid var(--k-karte-kante);
}

.miz-bereiche__titel,
.miz-config-faq__listentitel {
  margin: 0 0 var(--k-luft);
  color: var(--k-ink);
  font-size: var(--tv-t-lead);
  font-weight: 600;
  letter-spacing: -.02em;
}

.miz-config-faq__listentitel {
  padding-top: var(--k-luft);
  border-top: 1px solid var(--k-karte-kante);
}

.miz-bereiche__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--k-luft);
  margin: 0;
  padding: 0;
  list-style: none;
}

.miz-bereich {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
}

.miz-bereich__zeichen {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--k-karte-kante);
  border-radius: var(--k-r-ui);
  background: color-mix(in srgb, var(--tv-ink) 8%, transparent);
  color: var(--k-akzent-text);
  font-size: var(--tv-i-md);
}

.miz-bereich__zeichen .ti { display: block; line-height: 1; }

.miz-bereich div { display: grid; gap: .2rem; }

.miz-bereich strong {
  color: var(--k-ink);
  font-size: var(--tv-t-small);
  font-weight: 600;
}

.miz-bereich span {
  color: var(--k-ink-3);
  font-size: var(--tv-t-label);
  line-height: 1.55;
}

.miz-config-faq__eyebrow {
  display: block;
  margin-bottom: .4rem;
  color: var(--k-akzent-text);
  font-size: var(--tv-t-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.miz-config-faq h2 {
  margin: 0 0 .5rem;
  color: var(--k-ink);
  font-size: var(--tv-t-h3);
  line-height: 1.2;
  letter-spacing: -.02em;
}

.miz-config-faq__head p,
.miz-config-faq__lead {
  margin: 0;
  color: var(--k-ink-2);
  font-size: var(--tv-t-small);
  line-height: 1.6;
}

/* Die Fragen als Liste mit Trennzeichen, nicht als Reihe von Kaesten.
   Eine Haarlinie je Zeile ist die ruhigere und in dieser Formensprache
   die richtige Form — vier gerahmte Bloecke unter einer gerahmten
   Scheibe waeren ein Rahmen zu viel. */
.miz-config-faq__list { display: grid; }

.miz-config-q {
  border-bottom: 1px solid var(--k-karte-kante);
}

.miz-config-faq__list .miz-config-q:last-child { border-bottom: 0; }

.miz-config-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem .2rem;
  color: var(--k-ink);
  font-size: var(--tv-t-small);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.miz-config-q summary::-webkit-details-marker { display: none; }

.miz-config-q summary::after {
  content: "+";
  flex: none;
  color: var(--k-ink-3);
  font-weight: 400;
}

.miz-config-q[open] summary::after { content: "\2212"; }

.miz-config-q summary:focus-visible {
  outline: 2px solid var(--k-akzent);
  outline-offset: 2px;
  border-radius: var(--k-r-ui);
}

.miz-config-q p {
  margin: 0;
  padding: 0 .2rem 1rem;
  max-width: var(--tv-mass);
  color: var(--k-ink-2);
  font-size: var(--tv-t-label);
  line-height: 1.6;
}

/* =========================================================================
   12  ENGE SCHIRME

   Am Handy faellt der Weg weg — elf Punkte auf 360 Pixel sind kein Weg
   mehr, sondern ein Muster. Der Ring bleibt, er traegt dieselbe
   Auskunft auf einem Viertel der Breite.
   ========================================================================= */

@media (max-width: 48rem) {
  .miz-config-weg { display: none; }

  /* Am Handy wird mit dem Daumen getroffen, nicht mit dem Zeiger. Die
     Leiste darf dort wieder hoeher sein. */
  .miz-config { --k-btn-hoehe: 46px; }

  /* Am Handy zaehlt die Mindesthoehe nicht: dort ist jede Etappe ohnehin
     hoeher, und ein leerer Sockel unter kurzen Fragen waere nur Weg. */
  .miz-config-stage { min-height: 0; }

  .miz-screen__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .miz-screen__footer-actions {
    margin-left: 0;
  }

  .miz-screen__footer-actions .miz-nav-btn { flex: 1; justify-content: center; }

  .miz-screen__footer-actions--summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .miz-care-card__main { flex-wrap: wrap; }
}

@media (max-width: 34rem) {
  .miz-answer-card,
  .miz-addon-card {
    grid-template-columns: 1fr;
  }

  /* Weniger Seitenpolster auf der Buehne — dann muessen die Baender
     ihren negativen Rand mitziehen, sonst stehen sie ueber die Karte
     hinaus und die Seite bekommt einen waagerechten Ueberlauf. */
  .miz-config-stage { padding-inline: var(--k-luft-eng); }

  .miz-screen__footer {
    margin-inline: calc(var(--k-luft-eng) * -1);
    padding-inline: var(--k-luft-eng);
  }
}

/* =========================================================================
   13  BEWEGUNG UND ZUGAENGLICHKEIT
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .miz-screen--active,
  .miz-help-modal__panel,
  .miz-help-modal__backdrop,
  .miz-bild-modal[open],
  .miz-help-badge::after,
  .miz-card-help::after {
    animation: none;
  }

  .miz-config *,
  .miz-config *::before,
  .miz-config *::after {
    transition-duration: .01ms;
    animation-duration: .01ms;
  }
}

@media (forced-colors: active) {
  .miz-config-app,
  .miz-help-modal__panel {
    border: 1px solid CanvasText;
    background: Canvas;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .miz-answer-card,
  .miz-package-card,
  .miz-addon-card,
  .miz-care-card {
    border: 1px solid CanvasText;
    background: Canvas;
  }

  .miz-answer-card.is-selected,
  .miz-package-card.is-selected,
  .miz-addon-card.is-selected {
    border-color: Highlight;
    background: Canvas;
    box-shadow: none;
  }

  .miz-config-weg li[data-erledigt],
  .miz-config-weg li[aria-current] { background: Highlight; }

  .miz-care-switch input:checked + .miz-care-switch__ui { background: Highlight; }
}