* { box-sizing: border-box; }

html {
  /* Ohne diese Zeile zeigt Safari beim Überziehen (Gummiband-Effekt) und im
     Bereich über dem Inhalt die weiße Leinwand. Sie muss dieselbe Farbe haben
     wie der Hintergrund, sonst blitzt beim Scrollen ein heller Streifen auf. */
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

button, input, select { font: inherit; }
a { color: var(--b-liste); }

/* ============================================================ Anmelde-Ansicht */

.tor { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

.tor-karte {
  width: 100%; max-width: 410px;
  background: var(--panel);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 26px;
  /* Farbiger Streifen oben – dieselbe Sprache wie im Rest der App. */
  border-top: 3px solid var(--b-liste);
  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, .8);
}

.tor-karte h1 { margin: 0 0 4px; font-size: 21px; }
.tor-karte .unter { color: var(--text-leise); font-size: 14px; margin: 0 0 20px; }

.feld { margin-bottom: 13px; }
.feld label { display: block; font-size: 12.5px; color: var(--text-leise); margin-bottom: 5px; }
.feld input {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-klein);
  border: 1px solid var(--linie); background: var(--bg); color: var(--text);
}
.feld input:focus { outline: 2px solid var(--b-liste); outline-offset: -1px; }

.knopf {
  --k: var(--b-liste);
  width: 100%; padding: 12px 18px; border: 0; border-radius: 11px;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--k) 92%, white) 0%,
      var(--k) 55%,
      color-mix(in srgb, var(--k) 88%, black) 100%);
  color: #08121c; font-weight: 680; letter-spacing: .1px; cursor: pointer;
  box-shadow:
    0 1px 0 color-mix(in srgb, white 28%, transparent) inset,
    0 6px 16px -8px color-mix(in srgb, var(--k) 75%, transparent);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.knopf:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 color-mix(in srgb, white 32%, transparent) inset,
    0 10px 22px -8px color-mix(in srgb, var(--k) 85%, transparent);
}
.knopf:active { transform: translateY(1px); box-shadow: none; filter: brightness(.96); }
.knopf:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.knopf:disabled {
  background: var(--panel-hoch); color: var(--text-still);
  box-shadow: none; transform: none; cursor: default;
  border: 1px solid var(--linie);
}

.knopf.leise {
  background: color-mix(in srgb, var(--k) 12%, transparent);
  color: var(--k);
  border: 1px solid color-mix(in srgb, var(--k) 40%, transparent);
  box-shadow: none;
}
.knopf.leise:hover {
  background: color-mix(in srgb, var(--k) 20%, transparent);
  box-shadow: none;
}

.knopf.schmal { width: auto; padding: 9px 16px; font-size: 14px; white-space: nowrap; }

.wechsel { text-align: center; margin-top: 15px; font-size: 13.5px; color: var(--text-leise); }
.wechsel button { background: 0; border: 0; color: var(--b-liste); cursor: pointer; padding: 0; }

.meldung { padding: 10px 12px; border-radius: var(--radius-klein); font-size: 13.5px; margin-bottom: 14px; }
.meldung.fehler { background: color-mix(in srgb, var(--p-teuer) 15%, transparent); color: var(--p-teuer); }
.meldung.gut    { background: color-mix(in srgb, var(--p-bestpreis) 15%, transparent); color: var(--p-bestpreis); }
.meldung.info   { background: color-mix(in srgb, var(--b-liste) 15%, transparent); color: var(--b-liste); }

.zustimmung {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; color: var(--text-leise); margin: 4px 0 18px;
  background: color-mix(in srgb, var(--b-haushalt) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--b-haushalt) 25%, transparent);
  border-radius: var(--radius-klein); padding: 10px 12px;
}
.zustimmung input { margin-top: 2px; }

/* ============================================================ App-Gerüst */

.app { display: grid; grid-template-columns: 236px 1fr 280px; min-height: 100vh; }

.nav { background: var(--panel); border-right: 1px solid var(--linie); padding: 16px 10px; }
.marke { font-weight: 700; font-size: 17px; padding: 6px 12px 18px; }
.marke span { color: var(--text-still); font-weight: 500; font-size: 12px; display: block; }

.nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; margin-bottom: 3px;
  border-radius: var(--radius-klein); color: var(--text-leise);
  text-decoration: none; cursor: pointer;
  border-left: 3px solid transparent;
}
.nav a .sym {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 8px; font-size: 14px;
  background: color-mix(in srgb, var(--f) 16%, transparent);
}
.nav a:hover { background: var(--panel-hoch); color: var(--text); }
.nav a.aktiv {
  color: var(--text); border-left-color: var(--f);
  background: color-mix(in srgb, var(--f) 13%, transparent);
}
.nav a.aktiv .sym { background: var(--f); }

.abmelden { margin-top: 20px; padding: 0 11px; }

/* ---- Mitte ---- */

.inhalt {
  /* Kein Farbstreifen mehr über die ganze Breite. Er sollte zeigen, welcher
     Bereich offen ist — auf 3 px wirkt eine helle Farbe aber nur wie ein
     weißer Strich unter der Adressleiste. Die Bereichsfarbe trägt ohnehin
     schon das Zeichen in der Überschrift und die aktive Kachel im Menü. */
  padding-bottom: 40px;
}

.kopf { padding: 20px 26px 8px; }
.kopf h1 { margin: 0; font-size: 22px; display: flex; align-items: center; gap: 10px; }
.kopf h1 .sym {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px;
  background: color-mix(in srgb, var(--f) 20%, transparent); font-size: 17px;
}
.kopf p { margin: 6px 0 0; color: var(--text-leise); font-size: 14px; }

.bereich {
  padding: 14px 26px; display: grid; gap: 12px;
  /* minmax(0,…) statt 1fr: „1fr" bedeutet in Wahrheit minmax(auto, 1fr), und
     „auto" heißt „mindestens so breit wie der Inhalt". Ein langes Wort in
     einer Kachel sprengt damit die Spalte über den Bildschirmrand hinaus.
     Diese eine Zeile ist der Unterschied zwischen „passt" und „ragt raus". */
  grid-template-columns: minmax(0, 1fr);
}

.karte {
  background: var(--panel); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 15px 17px;
  border-left: 3px solid var(--f, var(--linie));
}
.karte h2 { margin: 0 0 3px; font-size: 15px; }
.karte .unter { color: var(--text-leise); font-size: 13px; }

/* Farbige Kacheln für Kennzahlen */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .kacheln { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); } }
/* Kacheln: farbiger Schimmer von oben, damit sie nicht wie graue Kästen wirken */
.kachel {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -30%, color-mix(in srgb, var(--f) 26%, transparent), transparent 70%),
    var(--panel);
  border: 1px solid color-mix(in srgb, var(--f) 22%, var(--linie));
  border-radius: var(--radius); padding: 16px 17px 15px;
  transition: transform .14s ease, border-color .14s ease;
}
.kachel::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--f), color-mix(in srgb, var(--f) 25%, transparent));
}
.kachel:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--f) 45%, transparent); }
.kachel .sym {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px;
  background: color-mix(in srgb, var(--f) 20%, transparent); font-size: 16px; margin-bottom: 11px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--f) 28%, transparent);
}
.kachel .wert {
  font-size: 27px; font-weight: 750; color: var(--f); line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.kachel .titel { font-size: 12.5px; color: var(--text-leise); margin-top: 3px; }

.reihe { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.reihe + .reihe { border-top: 1px solid var(--linie); }
.reihe .name { font-weight: 600; }

.person { display: flex; align-items: center; gap: 11px; }
.kopfbild {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: color-mix(in srgb, var(--f) 22%, transparent);
  color: var(--f); border: 1px solid color-mix(in srgb, var(--f) 45%, transparent);
}

.marke-klein {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c);
}

.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg); border: 1px solid var(--linie);
  padding: 8px 11px; border-radius: var(--radius-klein);
  font-size: 12.5px; word-break: break-all; color: var(--text-leise);
}

/* ---- Rechts ---- */

.kontext { background: var(--panel); border-left: 1px solid var(--linie); padding: 18px 14px; }
.block { margin-bottom: 24px; }
.block h3 {
  margin: 0 0 10px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-still); display: flex; align-items: center; gap: 7px;
}
.block h3::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--f); }
.zeile { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.zeile b { font-variant-numeric: tabular-nums; }
.gross { font-size: 27px; font-weight: 700; color: var(--f); font-variant-numeric: tabular-nums; }

.leer {
  color: var(--text-still); font-size: 14px; padding: 18px;
  border: 1px dashed var(--linie); border-radius: var(--radius-klein); text-align: center;
}

/* Mittlere Breite: die Navigation schrumpft auf Symbole, aber links UND rechts
   bleiben stehen. Der Markenname passt dann nicht mehr in die schmale Spalte
   und würde in den Inhalt ragen — also weg damit. */
@media (max-width: 1180px) {
  .app { grid-template-columns: 62px 1fr 236px; }
  .nav { overflow: hidden; padding: 16px 7px; }
  .nav .wort, .marke, .abmelden { display: none; }
  .nav a { justify-content: center; padding: 8px 0; gap: 0; border-left: 0; }
  .nav a.aktiv { background: transparent; }
  .nav a.aktiv .sym { box-shadow: 0 0 0 2px color-mix(in srgb, var(--f) 40%, transparent); }
  .kopf, .bereich { padding-left: 18px; padding-right: 18px; }
  .kontext { padding: 16px 12px; }
}

/* Erst am Handy rutscht die rechte Spalte unter den Inhalt. */
@media (max-width: 820px) {
  .app { grid-template-columns: 62px 1fr; }
  .kontext { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--linie); }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================ Bedienelemente Profil */

select {
  background: var(--bg); color: var(--text); border: 1px solid var(--linie);
  border-radius: var(--radius-klein); padding: 8px 11px; cursor: pointer;
}
select:focus { outline: 2px solid var(--b-liste); outline-offset: -1px; }

/* Farbwähler ohne Browser-Kanten – nur der Farbfleck. */
.farbwahl {
  width: 38px; height: 30px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--linie); border-radius: 8px;
}
.farbwahl::-webkit-color-swatch-wrapper { padding: 3px; }
.farbwahl::-webkit-color-swatch { border: 0; border-radius: 5px; }

/* Symbolfeld sieht aus wie das Symbol selbst, ist aber ein Eingabefeld. */
.sym-feld {
  width: 40px; height: 36px; flex: none; text-align: center; font-size: 17px;
  background: color-mix(in srgb, var(--f) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--f) 40%, transparent);
  border-radius: 9px; color: var(--text); cursor: pointer;
}
.sym-feld:focus { outline: 2px solid var(--f); outline-offset: 1px; }

.schalter { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-leise); }

/* Kompakte Dichte: alles ein Stück enger. */
body.kompakt { font-size: 14px; }
body.kompakt .bereich { gap: 8px; padding-top: 8px; }
body.kompakt .karte { padding: 11px 13px; }
body.kompakt .reihe { padding: 7px 0; }
body.kompakt .nav a { padding: 6px 11px; }
body.kompakt .kachel { padding: 11px 13px; }

/* ============================================================ Profil, neu gestaltet */

/* Segment-Umschalter statt Auswahlfeld – man sieht alle Möglichkeiten auf einmal. */
.segment { display: inline-flex; background: var(--bg); border: 1px solid var(--linie);
  border-radius: 10px; padding: 3px; gap: 3px; }
.segment button {
  border: 0; background: transparent; color: var(--text-leise);
  padding: 7px 14px; border-radius: 7px; cursor: pointer; font-size: 13.5px;
  transition: background .12s ease, color .12s ease;
}
.segment button:hover { color: var(--text); }
.segment button.an {
  background: color-mix(in srgb, var(--k, var(--b-liste)) 22%, transparent);
  color: var(--k, var(--b-liste)); font-weight: 620;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k, var(--b-liste)) 45%, transparent);
}

.einstell-zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 13px 0;
}
.einstell-zeile + .einstell-zeile { border-top: 1px solid var(--linie); }
.einstell-zeile .titel { font-weight: 600; }
.einstell-zeile .hinweis { color: var(--text-leise); font-size: 12.5px; margin-top: 2px; }

/* Menü-Baukasten */
.menue-liste { display: grid; gap: 7px; margin-top: 12px; }
.menue-zeile {
  display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center;
  gap: 11px; padding: 8px 10px; border-radius: 11px;
  background: color-mix(in srgb, var(--f) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--f) 26%, transparent);
}
.menue-zeile.aus { opacity: .42; }
.menue-zeile .bezeichnung { font-weight: 600; }

.pfeile { display: flex; flex-direction: column; gap: 2px; }
.pfeil {
  width: 24px; height: 17px; border: 1px solid var(--linie); background: var(--panel);
  color: var(--text-leise); border-radius: 5px; cursor: pointer;
  font-size: 10px; line-height: 1; padding: 0;
}
.pfeil:hover:not(:disabled) { color: var(--text); border-color: var(--f); }
.pfeil:disabled { opacity: .3; cursor: default; }

.auge {
  width: 34px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px;
  border: 1px solid color-mix(in srgb, var(--f) 40%, transparent);
  background: color-mix(in srgb, var(--f) 14%, transparent);
}
.auge.aus { background: transparent; border-color: var(--linie); filter: grayscale(1); }
.auge:disabled { cursor: default; opacity: .55; }

/* Preisfarben als Kachelfeld */
.farbkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 9px; margin-top: 12px; }
.farbkarte {
  border-radius: 11px; padding: 12px 13px; background: color-mix(in srgb, var(--c) 11%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.farbkarte .zeichen { font-size: 19px; color: var(--c); line-height: 1; }
.farbkarte .was { font-size: 12.5px; color: var(--text-leise); margin-top: 3px; }
.farbkarte .beispiel { font-weight: 700; color: var(--c); font-variant-numeric: tabular-nums; }

/* ============================================================ Intro vor dem Login */

.buehne { min-height: 100vh; display: grid; place-items: center; padding: 28px 20px; }

.intro { width: 100%; max-width: 520px; text-align: center; }

.intro .logo {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 18px;
  display: grid; place-items: center; font-size: 30px;
  background: linear-gradient(145deg, var(--b-start), var(--b-lieblinge));
  box-shadow: 0 16px 40px -16px var(--b-lieblinge);
}

.intro h1 { font-size: 30px; line-height: 1.2; margin: 0 0 10px; letter-spacing: -.4px; }
.intro h1 em { font-style: normal; color: var(--p-bestpreis); }
.intro .versprechen { color: var(--text-leise); font-size: 15.5px; margin: 0 0 26px; }

.punkte { display: grid; gap: 9px; text-align: left; margin-bottom: 26px; }
.punkt-karte {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px;
  border-radius: 13px; background: color-mix(in srgb, var(--f) 9%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--f) 26%, transparent);
}
.punkt-karte .sym {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 10px; font-size: 17px;
  background: color-mix(in srgb, var(--f) 20%, transparent);
}
.punkt-karte .titel { font-weight: 640; font-size: 14.5px; }
.punkt-karte .text { color: var(--text-leise); font-size: 13px; margin-top: 1px; }

.intro .fusszeile { margin-top: 15px; font-size: 13.5px; color: var(--text-leise); }
.intro .fusszeile button { background: 0; border: 0; color: var(--b-liste); cursor: pointer; padding: 0; }

/* Einblenden: Intro und Anmeldemaske wechseln sich weich ab. */
@keyframes auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.einblenden { animation: auf .42s cubic-bezier(.22,.7,.3,1) both; }
.einblenden > * { animation: auf .5s cubic-bezier(.22,.7,.3,1) both; }
.punkt-karte:nth-child(1) { animation-delay: .05s; }
.punkt-karte:nth-child(2) { animation-delay: .12s; }
.punkt-karte:nth-child(3) { animation-delay: .19s; }
.punkt-karte:nth-child(4) { animation-delay: .26s; }

@media (prefers-reduced-motion: reduce) {
  .einblenden, .einblenden > * { animation: none; }
}

/* Verfügbarkeitsanzeige beim Benutzernamen */
.frei { float: right; font-size: 12px; color: var(--text-still); font-weight: 600; }
.frei.ja { color: var(--p-bestpreis); }
.frei.nein { color: var(--p-teuer); }

/* ============================================================ Offline-Hinweis */

.offline-leiste {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 60; padding: 9px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--p-endet) 22%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--p-endet) 50%, transparent);
  color: var(--p-endet);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.8);
}
.offline-leiste.sendet {
  background: color-mix(in srgb, var(--p-kommt) 20%, var(--panel));
  border-color: color-mix(in srgb, var(--p-kommt) 50%, transparent);
  color: var(--p-kommt);
}

/* ============================================================ Startseite: Einladung */

.einladung {
  text-align: center; padding: 38px 26px;
  border: 2px dashed color-mix(in srgb, var(--b-bons) 40%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--b-bons) 7%, var(--panel));
  transition: border-color .15s ease, background .15s ease;
}
.einladung.bereit, .ablage-klein.bereit {
  border-color: var(--b-bons);
  background: color-mix(in srgb, var(--b-bons) 16%, var(--panel));
}
.einladung-sym { font-size: 44px; line-height: 1; margin-bottom: 12px; }
.einladung h2 { margin: 0 0 6px; font-size: 19px; }
.einladung p { color: var(--text-leise); font-size: 14px; margin: 0 auto 20px; max-width: 380px; }
.einladung-knoepfe { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.ablage-klein {
  display: flex; gap: 10px; flex-wrap: wrap; padding: 12px;
  border: 2px dashed color-mix(in srgb, var(--b-bons) 32%, transparent);
  border-radius: var(--radius-klein);
}

.schritte { display: grid; gap: 9px; }
.schritt {
  display: flex; gap: 13px; align-items: flex-start; padding: 13px 15px;
  border-radius: 13px; background: var(--panel);
  border: 1px solid var(--linie); border-left: 3px solid var(--f);
}
.schritt .nummer {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: color-mix(in srgb, var(--f) 20%, transparent); color: var(--f);
}
.schritt .titel { font-weight: 640; font-size: 14.5px; }
.schritt .text { color: var(--text-leise); font-size: 13px; margin-top: 2px; }

/* ---- Tagesfunde ---- */

.fund { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.fund + .fund { border-top: 1px solid var(--linie); }
.mini {
  width: 42px; height: 42px; flex: none; border-radius: 9px; object-fit: contain;
  background: var(--bg); border: 1px solid var(--linie);
}
.leer-mini { display: grid; place-items: center; font-size: 18px; }
.fund .name { font-weight: 600; }
.fund .rechts { text-align: right; }
.fund .preis { font-weight: 700; font-variant-numeric: tabular-nums; }
.fund .vorher { color: var(--text-still); text-decoration: line-through; font-size: 12.5px; }

/* ---- Hochladen ---- */

.laeuft { display: flex; align-items: center; gap: 13px; padding: 6px 2px; }
.laeuft .titel { font-weight: 620; }
.kreisel {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--b-bons) 30%, transparent);
  border-top-color: var(--b-bons);
  animation: dreh .8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

.ergebnis {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: var(--radius-klein); margin-bottom: 10px;
}
.ergebnis.gut {
  background: color-mix(in srgb, var(--p-bestpreis) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--p-bestpreis) 40%, transparent);
}
.ergebnis.achtung {
  background: color-mix(in srgb, var(--p-teuer) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--p-teuer) 40%, transparent);
}
.ergebnis-sym { font-size: 26px; line-height: 1; }
.ergebnis .titel { font-weight: 700; font-size: 16px; }

.befund {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px 2px;
  font-size: 13.5px; color: var(--text-leise);
}
.befund + .befund { border-top: 1px solid var(--linie); }

@media (prefers-reduced-motion: reduce) { .kreisel { animation: none; } }

/* ============================================================ Menügruppen */

.gruppe-kopf {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 5px; padding: 0 11px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-still);
}
.gruppe-kopf:first-of-type { margin-top: 4px; }
.gruppe-sym { font-size: 11px; opacity: .8; }

/* Kleine Zahl am Menüpunkt — was auf mich wartet */
.blase {
  margin-left: auto; min-width: 19px; height: 19px; padding: 0 6px;
  border-radius: 999px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--f) 30%, transparent);
  color: var(--f); box-shadow: 0 0 0 1px color-mix(in srgb, var(--f) 45%, transparent);
}

@media (max-width: 1180px) {
  /* Schmal: nur ein Trennstrich statt der Überschrift */
  .gruppe-kopf {
    margin: 10px 4px 8px; padding: 0; height: 1px;
    background: var(--linie); border-radius: 1px;
  }
  .gruppe-sym { display: none; }
  .blase {
    position: absolute; margin: 0; top: 2px; right: 2px;
    min-width: 15px; height: 15px; font-size: 9.5px; padding: 0 4px;
  }
  .nav a { position: relative; }
}

/* ============================================================ Einkaufsliste */

.neu-zeile { display: flex; gap: 8px; margin-bottom: 14px; }
.neu-zeile input {
  flex: 1; padding: 10px 12px; border-radius: var(--radius-klein);
  border: 1px solid var(--linie); background: var(--bg); color: var(--text);
}
.neu-zeile input:focus { outline: 2px solid var(--f, var(--b-liste)); outline-offset: -1px; }

.listenpunkt { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.listenpunkt + .listenpunkt { border-top: 1px solid var(--linie); }
.listenpunkt.erledigt .name { text-decoration: line-through; color: var(--text-still); }
.listenpunkt.erledigt .preis-tipp { display: none; }

/* Großzügiger Haken — im Laden trifft man mit dem Daumen nichts Kleineres. */
.haken {
  width: 28px; height: 28px; flex: none; border-radius: 8px; cursor: pointer;
  border: 2px solid var(--linie); background: transparent;
  color: #08121c; font-weight: 800; font-size: 15px; line-height: 1;
  transition: background .12s ease, border-color .12s ease;
}
.haken:hover { border-color: var(--p-bestpreis); }
.haken.an { background: var(--p-bestpreis); border-color: var(--p-bestpreis); }

.weg {
  width: 26px; height: 26px; flex: none; border: 0; background: transparent;
  color: var(--text-still); cursor: pointer; border-radius: 7px; font-size: 13px;
}
.weg:hover { background: color-mix(in srgb, var(--p-teuer) 18%, transparent); color: var(--p-teuer); }

.preis-tipp {
  display: inline-block; margin-top: 3px; font-size: 12.5px; font-weight: 600;
  color: var(--c);
}

/* ---- Balken in der Auswertung ---- */
.balken {
  height: 6px; border-radius: 3px; background: var(--bg);
  margin-top: 6px; overflow: hidden;
}
.balken-fuellung { height: 100%; border-radius: 3px; transition: width .3s ease; }

/* ============================================================ Seitenleiste, neu */

.block-unter {
  color: var(--text-leise); font-size: 12.5px; margin: 2px 0 10px; line-height: 1.35;
}

/* Schnellzugriff: eine Zeile zum Antippen, kein blauer Textlink */
.schnell {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; margin-top: 5px; border-radius: 10px;
  text-decoration: none; color: var(--text);
  background: color-mix(in srgb, var(--f) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--f) 22%, transparent);
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.schnell:hover {
  background: color-mix(in srgb, var(--f) 18%, transparent);
  border-color: color-mix(in srgb, var(--f) 45%, transparent);
  transform: translateX(2px);
}
.schnell-sym {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 8px; font-size: 13px;
  background: color-mix(in srgb, var(--f) 20%, transparent);
}
.schnell-text { flex: 1; font-size: 13.5px; font-weight: 560; }
.schnell-pfeil { color: var(--text-still); font-size: 17px; line-height: 1; }

/* Person in der Seitenleiste */
.person-zeile { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.person-zeile + .person-zeile { border-top: 1px solid var(--linie); }
.kopfbild.klein { width: 28px; height: 28px; font-size: 11px; }
.person-name { flex: 1; font-size: 14px; font-weight: 560; }
.person-rolle { font-size: 11px; color: var(--text-still); }

/* Anstoß, solange noch nichts da ist */
.anstoss {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px; border-radius: 11px;
  background: color-mix(in srgb, var(--b-bons) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--b-bons) 35%, transparent);
}
.anstoss-sym { font-size: 22px; line-height: 1; }
.anstoss-text { font-size: 13px; color: var(--text-leise); line-height: 1.4; }

/* Tipp aus dem Ratgeber */
.tipp {
  padding: 11px 12px; border-radius: 11px;
  background: color-mix(in srgb, var(--p-endet) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--p-endet) 24%, transparent);
}
.tipp-titel { font-size: 13.5px; font-weight: 640; margin-bottom: 3px; }
.tipp-text { font-size: 12.5px; color: var(--text-leise); line-height: 1.4; }
.tipp-fuss {
  font-size: 11.5px; color: var(--p-endet); margin-top: 6px; font-weight: 600;
}

/* ============================================================ Mehr Farbe in den Flächen */

/* Ein farbiger Hauch über der ganzen Seite, in der Farbe des offenen Bereichs.
   Kostet nichts und nimmt dem Dunkel das Leblose. */
body::before {
  content: ''; position: fixed; inset: 0 0 auto 0; height: 340px;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(90% 100% at 18% 0%,
      color-mix(in srgb, var(--flaeche, var(--b-start)) 16%, transparent), transparent 70%),
    radial-gradient(70% 100% at 100% 0%,
      color-mix(in srgb, var(--b-lieblinge) 9%, transparent), transparent 65%);
}
.app, .tor, .buehne { position: relative; z-index: 1; }

/* Navigation und Kontextspalte mit leichtem Farbstich statt flachem Grau */
.nav {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--b-start) 8%, var(--panel)) 0%,
      var(--panel) 45%);
}
.kontext {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--b-haushalt) 6%, var(--panel)) 0%,
      var(--panel) 40%);
}

/* Karten bekommen einen ganz leichten Farbschimmer ihrer Bereichsfarbe */
.karte {
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--f, var(--linie)) 7%, var(--panel)) 0%,
      var(--panel) 55%);
}

/* Der Kopfbereich trägt seine Farbe jetzt sichtbar, nicht nur als Strich */
.kopf {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--f) 12%, transparent), transparent);
  border-radius: 0 0 18px 18px;
}

/* ============================================================ Produktbilder */

.pbild {
  flex: none; border-radius: 11px; object-fit: contain;
  border: 1px solid var(--linie);
  display: grid; place-items: center;
  /* Bis das Bild da ist: ruhige dunkle Fläche. Ein weißer Kasten, der eine
     halbe Sekunde lang leuchtet, wirkt wie ein Fehler. */
  background: var(--panel-hoch);
  transition: background .2s ease;
}
/* Produktfotos sind fast immer freigestellt auf Weiß — erst dann umschalten. */
img.pbild.geladen { background: #fff; padding: 3px; }
.pbild-s { width: 38px; height: 38px; }
.pbild-m { width: 52px; height: 52px; }
.pbild-l { width: 68px; height: 68px; }

/* Kein Bild da: farbiges Feld mit passendem Symbol statt weißer Fläche */
.pbild-ersatz {
  background: color-mix(in srgb, var(--f) 18%, var(--panel-hoch));
  border-color: color-mix(in srgb, var(--f) 35%, transparent);
}
.pbild-ersatz.pbild-s { font-size: 17px; }
.pbild-ersatz.pbild-m { font-size: 23px; }
.pbild-ersatz.pbild-l { font-size: 30px; }

/* Fundzeile luftiger, damit das größere Bild nicht klemmt */
.fund { gap: 14px; padding: 13px 0; }

/* ══════════════════════════════════════════════ Einreichen
 * Farbe traegt hier Bedeutung: gruen = Geld ist zurueck, gelb = unterwegs,
 * blau = liegt noch hier. Jede Farbe steht zusaetzlich neben einem Wort,
 * damit die Seite auch ohne Farbsehen lesbar bleibt. */

.jahrwahl { display: flex; align-items: center; gap: .6rem; margin: 1rem 0; }
.jahrwahl label { color: var(--text-leise); font-size: .9rem; }

/* Die rechtliche Grenze steht sichtbar oben, nicht klein unten. */
.grenze {
  background: color-mix(in srgb, var(--p-endet) 12%, var(--panel));
  border-left: 4px solid var(--p-endet);
  border-radius: var(--radius-klein);
  padding: .7rem .9rem; margin: 1rem 0; font-size: .92rem; color: var(--text-leise);
}

.bilanz { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8rem; margin: 1.2rem 0; }
.bilanz-teil {
  background: linear-gradient(160deg, color-mix(in srgb, var(--f) 22%, var(--panel)), var(--panel));
  border: 1px solid color-mix(in srgb, var(--f) 45%, transparent);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.bilanz-zahl { font-size: 1.7rem; font-weight: 700; color: var(--f); letter-spacing: -.02em; }
.bilanz-wort { color: var(--text-leise); font-size: .88rem; }

.pauschbetrag {
  background: var(--panel); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1rem 1.1rem; margin: 1rem 0;
}
.pauschbetrag.drueber { border-color: color-mix(in srgb, var(--p-bestpreis) 55%, transparent); }
.pb-kopf { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem; }
.pb-zahl { color: var(--text-leise); font-variant-numeric: tabular-nums; }
.pb-schiene { height: 10px; border-radius: 5px; background: var(--panel-hoch);
  overflow: hidden; margin: .6rem 0; }
.pb-fuell { height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--b-liste), var(--p-bestpreis)); transition: width .4s; }
.pauschbetrag p { margin: 0; font-size: .9rem; color: var(--text-leise); }

.abschnitt { margin: 2rem 0 .8rem; font-size: 1.1rem; display: flex;
  align-items: center; gap: .5rem; }
.abschnitt .anzahl {
  background: var(--panel-hoch); color: var(--text-leise);
  border-radius: 999px; padding: .1rem .55rem; font-size: .8rem; font-weight: 600;
}

.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .8rem; }
.karten .karte {
  background: var(--panel); border: 1px solid var(--linie);
  border-top: 3px solid var(--f, var(--linie));
  border-radius: var(--radius); padding: .9rem 1rem;
}
.karten .karte p { font-size: .88rem; color: var(--text-leise); margin: .45rem 0; }
/* Eigener Name: .weg ist oben schon der kleine Loeschen-Knopf. */
.karte.blass { opacity: .5; }

.zm-kopf { display: flex; align-items: center; gap: .5rem; }
.zm-sym { font-size: 1.2rem; }
.zm-summe { font-size: 1.5rem; font-weight: 700; color: var(--f); margin: .35rem 0 .1rem; }
.zm-fuss { font-size: .82rem; color: var(--text-still); }

.monatsband { display: flex; align-items: flex-end; gap: .4rem; height: 150px;
  margin: 1rem 0; padding: .8rem; background: var(--panel);
  border: 1px solid var(--linie); border-radius: var(--radius); }
.mb-spalte { flex: 1; height: 100%; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; gap: .3rem; }
.mb-stapel { width: 100%; display: flex; flex-direction: column;
  border-radius: 5px 5px 0 0; overflow: hidden; min-height: 3px; }
.mb-teil { width: 100%; }
.mb-name { font-size: .72rem; color: var(--text-still); }

.ew-kopf { display: flex; gap: .6rem; align-items: flex-start; }
.ew-sym { font-size: 1.6rem; line-height: 1; }
.ew-kopf strong { display: block; }
.ew-wer { font-size: .8rem; color: var(--text-still); }
.ew-wie { border-left: 2px solid var(--f); padding-left: .6rem; }
.ew-frist { color: var(--p-endet) !important; font-size: .85rem !important; }
.ew-passt { color: var(--text-still) !important; font-style: italic; }
.paragraf { font-size: .78rem; color: var(--text-still); font-family: ui-monospace, monospace; }

.merkposten { border-top-color: var(--b-haushalt) !important; }
.merk-wert { font-size: 1.25rem; font-weight: 700; color: var(--b-haushalt); margin: .3rem 0; }

.hinweis-zeile { font-size: .88rem; color: var(--text-leise); margin: .8rem 0;
  padding: .55rem .8rem; background: var(--panel); border-radius: var(--radius-klein); }
.leer-hinweis { color: var(--text-still); padding: 1.2rem; text-align: center;
  background: var(--panel); border: 1px dashed var(--linie); border-radius: var(--radius); }

.tabelle { width: 100%; border-collapse: collapse; margin: .8rem 0; font-size: .9rem; }
.tabelle th { text-align: left; color: var(--text-still); font-weight: 600;
  font-size: .8rem; padding: .5rem .6rem; border-bottom: 1px solid var(--linie); }
.tabelle td { padding: .55rem .6rem; border-bottom: 1px solid var(--linie); }
.tabelle tr:hover td { background: var(--panel-hoch); }
.tabelle .r, .tabelle th.r { text-align: right; }
.still { color: var(--text-still); }

.pille { display: inline-flex; align-items: center; gap: .3rem;
  background: color-mix(in srgb, var(--f) 20%, transparent);
  color: var(--f); border-radius: 999px; padding: .12rem .6rem;
  font-size: .8rem; font-weight: 600; white-space: nowrap; }

.gut { color: var(--p-bestpreis); }
.schlecht { color: var(--p-teuer); }
.wb-zahlen { display: flex; flex-wrap: wrap; gap: .6rem; font-size: .85rem;
  color: var(--text-leise); margin-top: .4rem; }

.knopf.breit { width: 100%; margin-top: .5rem; }
/* Ein Knopf mit langem Text darf nie über den Rand laufen — lieber zwei
   Zeilen als ein abgeschnittenes Wort.
   `.knopf.schmal` setzt weiter oben `white-space: nowrap` und hat mehr
   Gewicht (zwei Klassen gegen eine). Deshalb muss es hier ausdrücklich
   zurückgenommen werden — eine Regel mit gleichem Gewicht, aber später. */
.knopf, .knopf.schmal, .knopf.leise, .knopf.breit {
  max-width: 100%; white-space: normal; overflow-wrap: anywhere;
  text-align: center;
}
.bereit-text .knopf, .bereitkarte .knopf { text-align: left; }
.kachel.warnung { border-left: 3px solid var(--p-endet); }

@media (max-width: 700px) {
  .monatsband { height: 110px; }
  .tabelle { font-size: .82rem; }
}

/* ══════════════════════════════════════════════ Läden & Minikarte
 * Nummer auf der Karte = Nummer in der Liste = gleiche Kettenfarbe.
 * Darum geht es: zuordnen können, ohne zu suchen. */

.minikarte-huelle { margin: 1rem 0; }
.minikarte { width: 100%; height: auto; max-height: 340px; display: block; }
.mk-ring { fill: var(--text-still); font-size: 9px; font-family: ui-monospace, monospace; }
.mk-himmel { fill: var(--text-still); font-size: 10px; letter-spacing: .1em; }
.mk-nr { font-size: 12px; font-weight: 700; }
.mk-punkt { cursor: pointer; }
.mk-punkt:hover circle, .mk-punkt:focus circle { fill-opacity: .5; }
.mk-punkt.hervor circle { fill-opacity: .65; stroke-width: 3; }
.mk-punkt:focus { outline: none; }
/* Der eigene Standort pulst leise — so findet man sich sofort wieder. */
.mk-ich circle:first-child { animation: mk-puls 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes mk-puls { 0%,100% { opacity: .25; r: 10 } 50% { opacity: .05; r: 17 } }
@media (prefers-reduced-motion: reduce) { .mk-ich circle:first-child { animation: none } }

.ladenliste { display: flex; flex-direction: column; gap: .4rem; }
.ladenzeile {
  display: flex; align-items: center; gap: .8rem;
  background: var(--panel); border: 1px solid var(--linie);
  border-left: 4px solid var(--f); border-radius: var(--radius-klein);
  padding: .6rem .8rem; transition: background .2s;
}
.ladenzeile.hervor { background: color-mix(in srgb, var(--f) 16%, var(--panel)); }
.laden-nr {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  color: var(--f); background: color-mix(in srgb, var(--f) 18%, transparent);
  border: 1.5px solid var(--f);
}
.laden-text { flex: 1; min-width: 0; }
.laden-text .name { font-weight: 600; }
.laden-zahlen { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  justify-content: flex-end; }
.karte.ortbitte { margin-bottom: 1rem; }
.karte.ortbitte .unter { margin-bottom: 12px; }

/* ══════════════════════════════════════════════ Rundgang
 * Ein Kasten über allem, aber nicht bildschirmfüllend: Man soll sehen, dass
 * die App dahinter weiterläuft — sonst fühlt es sich an wie eine Sperre. */

.rg-huelle {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: end center; padding: 1.2rem;
  background: color-mix(in srgb, #000 45%, transparent);
  backdrop-filter: blur(2px);
  animation: rg-auf .25s ease;
}
@keyframes rg-auf { from { opacity: 0 } to { opacity: 1 } }

.rg-kasten {
  width: min(620px, 100%);
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--f) 45%, var(--linie));
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  padding: 1rem 1.2rem 1.1rem;
  animation: rg-hoch .3s cubic-bezier(.2,.8,.3,1);
}
@keyframes rg-hoch { from { transform: translateY(22px); opacity: 0 } }

.rg-schiene { display: flex; gap: 4px; margin-bottom: .9rem; }
.rg-tropfen {
  flex: 1; height: 4px; border-radius: 2px; background: var(--panel-hoch);
  cursor: pointer; transition: background .2s;
}
.rg-tropfen.fertig { background: color-mix(in srgb, var(--f) 55%, transparent); }
.rg-tropfen.jetzt  { background: var(--f); }

.rg-kopf { display: flex; align-items: flex-start; gap: .8rem; }
.rg-sym { font-size: 2rem; line-height: 1; }
.rg-kopf h2 { margin: .1rem 0 0; font-size: 1.15rem; }
.rg-zaehler { font-size: .75rem; color: var(--text-still); letter-spacing: .04em;
  text-transform: uppercase; }
.rg-zu { margin-left: auto; background: none; border: 0; color: var(--text-still);
  font-size: 1.1rem; cursor: pointer; padding: .2rem .4rem; border-radius: 6px; }
.rg-zu:hover { background: var(--panel-hoch); color: var(--text); }

.rg-text { margin: .8rem 0 1rem; line-height: 1.55; color: var(--text-leise); }
.rg-fuss { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.rg-fuss .knopf:last-child { margin-left: auto; }

.rg-einladung { margin-bottom: 1rem; }
.rg-knopf { width: 100%; text-align: left; font: inherit; cursor: pointer; }

@media (max-width: 700px) {
  .rg-huelle { padding: .6rem; }
  .rg-fuss .knopf:last-child { margin-left: 0; flex: 1; }
}

/* Grundpreis: leise, aber immer da. Er soll nicht mit dem Preis konkurrieren,
   sondern ihn einordnen. */
.grundpreis {
  display: inline-block; font-size: .76rem; font-variant-numeric: tabular-nums;
  color: var(--text-still); background: var(--panel-hoch);
  border-radius: 5px; padding: .05rem .35rem; white-space: nowrap;
}
.grundpreis.guenstigster { color: var(--p-bestpreis);
  background: color-mix(in srgb, var(--p-bestpreis) 15%, transparent); }

/* ══════════════════════════════════════════════ Regelwerk */

.regelliste { display: flex; flex-direction: column; gap: .5rem; }
.regelkarte {
  display: flex; align-items: center; gap: .7rem;
  background: var(--panel); border: 1px solid var(--linie);
  border-left: 4px solid var(--f); border-radius: var(--radius-klein);
  padding: .6rem .8rem;
}
.regelkarte.aus { opacity: .5; }
.regel-sym { font-size: 1.3rem; }
.regel-text { flex: 1; min-width: 0; }
.regel-zahlen { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.regel-fehler { color: var(--p-teuer); font-size: .8rem; margin-top: .2rem; }

/* Schalter statt Kästchen — an/aus ist hier die häufigste Handlung. */
.schalter { position: relative; width: 38px; height: 22px; flex: none; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0;
  cursor: pointer; z-index: 1; }
.schieber { position: absolute; inset: 0; border-radius: 11px;
  background: var(--panel-hoch); border: 1px solid var(--linie); transition: .18s; }
.schieber::after { content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--text-still);
  transition: .18s; }
.schalter input:checked + .schieber { background: color-mix(in srgb, var(--f) 30%, transparent);
  border-color: var(--f); }
.schalter input:checked + .schieber::after { left: 18px; background: var(--f); }

.regel-teil { margin: 1.2rem 0 .5rem; font-size: .95rem; color: var(--text); }
.ausloeserwahl { display: grid; gap: .4rem; }
.ausloeser { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
  padding: .5rem .7rem; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--panel-hoch); }
.ausloeser.gewaehlt { border-color: var(--f);
  background: color-mix(in srgb, var(--f) 12%, var(--panel-hoch)); }
.ausloeser input { margin-top: .2rem; }
.ausl-sym { font-size: 1.1rem; }
.ausloeser .unter { display: block; }

.verknuepfung { display: flex; gap: 1rem; margin-bottom: .5rem; font-size: .9rem; }
.bedzeile, .aktzeile { display: flex; gap: .4rem; align-items: center;
  margin-bottom: .35rem; flex-wrap: wrap; }
.bedzeile .feld, .aktzeile .feld { flex: 1; min-width: 110px; }
.bed-hilfe { font-size: .78rem; color: var(--text-still); margin: -.15rem 0 .5rem .2rem; }
.einheit { font-size: .8rem; color: var(--text-still); }

.regel-fuss { display: flex; gap: .5rem; justify-content: flex-end;
  margin-top: 1.2rem; flex-wrap: wrap; }
.regel-neu-leiste { margin: 1rem 0; }

.probe { margin-top: .8rem; padding: .8rem; border-radius: var(--radius-klein);
  background: var(--panel-hoch); border: 1px solid var(--linie); }
.probezeile { display: flex; justify-content: space-between; gap: .6rem;
  padding: .3rem 0; border-bottom: 1px solid var(--linie); font-size: .88rem; }
.probezeile:last-child { border-bottom: 0; }

.trefferliste { display: flex; flex-direction: column; gap: .35rem; }
.trefferzeile { display: flex; align-items: center; gap: .7rem;
  background: var(--panel); border-left: 3px solid var(--f);
  border-radius: var(--radius-klein); padding: .45rem .7rem; font-size: .9rem; }
.karte.vorlage .ew-kopf { margin-bottom: .3rem; }

/* ══════════════════════════════════════════════ Einrichtung / „Damit alles läuft"
 * Die mittlere Zeile jeder Karte — die Folge — trägt die eigentliche Botschaft.
 * Sie steht deshalb farbig abgesetzt und nicht in Grau wie eine Fußnote. */

.bereitliste { display: flex; flex-direction: column; gap: .6rem; }
.bereitkarte {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--linie);
  border-left: 4px solid var(--f); border-radius: var(--radius);
  padding: .8rem 1rem;
}
.bereitkarte.fertig { opacity: .55; border-left-color: var(--p-bestpreis); padding: .5rem 1rem; }
.bereit-sym { font-size: 1.4rem; line-height: 1.2; flex: none; }
.bereitkarte.fertig .bereit-sym { color: var(--p-bestpreis); font-size: 1.1rem; }
.bereit-text { flex: 1; min-width: 0; }
.bereit-kopf { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.stufe {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c); border: 1px solid var(--c); border-radius: 999px;
  padding: .02rem .4rem; cursor: help;
}
.bereit-fehlt { color: var(--text-leise); font-size: .88rem; margin: .3rem 0 .2rem; }
.bereit-folge {
  font-size: .88rem; line-height: 1.5; margin-bottom: .6rem;
  padding-left: .6rem; border-left: 2px solid var(--f);
  color: color-mix(in srgb, var(--f) 55%, var(--text));
}

.bereit-mini-kopf { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.bereit-mini .klein { margin-bottom: .5rem; }
.bereit-alle { display: block; margin-top: .6rem; font-size: .8rem;
  color: var(--text-still); text-decoration: none; }
.bereit-alle:hover { color: var(--text); }
.bereit-fertig { color: var(--p-bestpreis); font-size: .9rem; }

/* ══════════════════════════════════════════════ Einklappbare Leisten
 *
 * Ein Knopf für beide: Links und rechts sind der Rahmen, und wer sich auf eine
 * Sache konzentrieren will, will den ganzen Rahmen weg.
 *
 * KEIN Übergang auf grid-template-columns — Chrome startet dabei eine
 * Animation, die nie ankommt, und die Leiste bleibt über dem Inhalt liegen.
 * Die Spalten schalten hart, weich bewegt sich nur der Inhalt der Leisten.
 */

/* Jede Seite für sich, und beide zusammen. display:none statt durchsichtig:
   Was nicht da ist, kann nichts verdecken. */
body.nav-zu   .app { grid-template-columns: minmax(0, 1fr) 280px; }
body.seite-zu .app { grid-template-columns: 236px minmax(0, 1fr); }
body.nav-zu.seite-zu .app { grid-template-columns: minmax(0, 1fr); }
body.nav-zu   .nav     { display: none; }
body.seite-zu .kontext { display: none; }

/* ---------- Griff je Seite ----------
 *
 * Er schwebt NICHT über dem Inhalt. Ein Element mit `position: fixed` liegt
 * zwangsläufig über etwas — bei 280 px Spaltenbreite über Text, und dann ist
 * es kein Bedienelement mehr, sondern eine Störung.
 *
 * Stattdessen: Ist die Leiste offen, sitzt der Griff als schmale Zeile IN der
 * Leiste. Ist sie zu, klebt er als schmaler Streifen am äußersten Rand — dort
 * ist keine Spalte mehr, also auch kein Inhalt, den er verdecken könnte. */
.griff {
  position: fixed; top: 50%; transform: translateY(-50%);
  z-index: 390; width: 14px; height: 64px; padding: 0;
  border: 1px solid var(--linie); background: var(--panel);
  color: var(--text-still); cursor: pointer;
  display: grid; place-items: center; font-size: 12px;
  transition: background .16s, color .16s, width .16s;
}
.griff:hover, .griff:focus-visible {
  background: var(--panel-hoch); color: var(--text); width: 20px; outline: none;
}
.griff.links  { left: 0;  border-left: 0;  border-radius: 0 8px 8px 0; }
.griff.rechts { right: 0; border-right: 0; border-radius: 8px 0 0 8px; }
.griff-pfeil { line-height: 1; }

/* Ist die Leiste offen, wird aus dem schwebenden Griff eine Zeile in der
   Leiste selbst. Dann liegt nichts mehr über irgendetwas. */
.griff.offen {
  position: static; transform: none; width: auto; height: 22px;
  border: 0; border-radius: 0; background: transparent;
  display: block; text-align: right; padding: 0 4px;
  font-size: 13px; opacity: .5;
}
.griff.offen:hover { opacity: 1; background: transparent; width: auto; }
.griff.links.offen { text-align: left; }

body.nav-zu   .griff.links,
body.seite-zu .griff.rechts {
  background: color-mix(in srgb, var(--b-start) 24%, var(--panel));
  color: var(--text);
}

.leisten-knopf {
  position: fixed; top: 12px; right: 14px; z-index: 400;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--linie); background: var(--panel);
  color: var(--text-still); font-size: 14px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .16s, color .16s, transform .16s;
}
.leisten-knopf:hover, .leisten-knopf:focus-visible {
  background: var(--panel-hoch); color: var(--text); transform: scale(1.08);
  outline: none;
}
.leisten-knopf.zu {
  background: color-mix(in srgb, var(--b-start) 30%, var(--panel));
  color: var(--text); border-color: color-mix(in srgb, var(--b-start) 50%, var(--linie));
}

/* Sind die Leisten weg, darf der Inhalt atmen — aber nicht ins Uferlose
   laufen. Text über 90 Zeichen Breite liest sich schlecht. */
/* Sind beide weg, darf der Inhalt atmen — aber nicht ins Uferlose laufen.
   Text über 90 Zeichen Breite liest sich schlecht. */
body.nav-zu.seite-zu .inhalt > * {
  max-width: 1100px; margin-left: auto; margin-right: auto;
}
body.nav-zu.seite-zu .inhalt { padding-left: 26px; padding-right: 26px; }
/* Platz für den Knopf, damit er auf keine Überschrift fällt. */
body.nav-zu.seite-zu .kopf { padding-right: 62px; }

/* ---------- Das Menü als Kacheln, zwei nebeneinander ---------- */

.nav-kacheln {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px;
  margin-bottom: 14px;
}
/* Die Zwischenüberschrift läuft über beide Kacheln — sie ordnet sie zu. */
.nav-kacheln .gruppe-kopf { grid-column: 1 / -1; }

.nav a.kachel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 11px 5px 9px; margin: 0; text-align: center;
  border: 1px solid var(--linie); border-left: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--f) 7%, var(--panel));
  color: var(--text-leise); position: relative; min-height: 66px;
  transition: background .15s, border-color .15s, transform .1s;
}
.nav a.kachel:hover {
  background: color-mix(in srgb, var(--f) 16%, var(--panel));
  border-color: color-mix(in srgb, var(--f) 45%, var(--linie));
  color: var(--text);
}
.nav a.kachel:active { transform: scale(.97); }
.nav a.kachel.aktiv {
  background: color-mix(in srgb, var(--f) 24%, var(--panel));
  border-color: var(--f); color: var(--text);
}
.nav a.kachel .sym {
  width: 30px; height: 30px; font-size: 15px;
  background: color-mix(in srgb, var(--f) 22%, transparent);
}
.nav a.kachel.aktiv .sym { background: color-mix(in srgb, var(--f) 40%, transparent); }
.nav a.kachel .wort {
  font-size: 11.5px; line-height: 1.25; font-weight: 600;
  /* Zwei Zeilen sind erlaubt, drei nicht — sonst tanzen die Kachelhöhen. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; hyphens: auto; overflow-wrap: anywhere; min-width: 0;
}
.nav a.kachel .blase {
  position: absolute; top: 5px; right: 5px; margin: 0;
  min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px;
}

/* ---------- Einklappbare Abschnitte ---------- */

h2.abschnitt {
  cursor: pointer; user-select: none; border-radius: var(--radius-klein);
  padding: .25rem .4rem; margin-left: -.4rem;
  transition: background .15s;
}
h2.abschnitt:hover { background: var(--panel); }
h2.abschnitt:focus-visible { outline: 2px solid var(--b-liste); outline-offset: 2px; }
.klapp-pfeil {
  display: inline-block; color: var(--text-still); font-size: .85em;
  transition: transform .18s; transform-origin: center;
}
h2.abschnitt.zu .klapp-pfeil { transform: rotate(-90deg); }
h2.abschnitt.zu { color: var(--text-leise); }
.abschnitt-inhalt { animation: klapp-auf .18s ease; }
@keyframes klapp-auf { from { opacity: 0; transform: translateY(-4px) } }

/* Der Balken existiert nur am Handy. Diese Regel steht VOR der Handy-Regel —
   stünde sie danach, würde sie diese bei gleicher Spezifität überschreiben und
   der Balken bliebe unsichtbar. */
.handy-balken { display: none; }

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 1180px) and (min-width: 821px) {
  /* Auch schmal bleiben es zwei Kacheln — sie werden nur kleiner.
     Die alte Symbolleiste ohne Wörter entfällt damit. */
  .app { grid-template-columns: 178px minmax(0,1fr) 236px; }
  body.nav-zu   .app { grid-template-columns: minmax(0,1fr) 236px; }
  body.seite-zu .app { grid-template-columns: 178px minmax(0,1fr); }
  body.nav-zu.seite-zu .app { grid-template-columns: minmax(0,1fr); }

  .nav { padding: 16px 8px; }
  .nav .wort, .marke, .abmelden { display: revert; }
  .nav a.kachel { min-height: 60px; padding: 9px 3px 8px; }
  .nav a.kachel .wort { font-size: 10.5px; }
}

@media (max-width: 820px) {
  /* Am Handy stehen die Leisten UNTEREINANDER, nicht übereinander.
     Zwei eingeblendete Leisten auf 375 px Breite können nicht nebeneinander —
     und übereinander verdecken sie sich gegenseitig. Also: Menü oben,
     Inhalt, Kontext unten. Alles erreichbar, nichts verdeckt.
     Das ✕ blendet beide aus und lässt reinen Inhalt übrig. */
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  body.nav-zu .app, body.seite-zu .app, body.nav-zu.seite-zu .app {
    grid-template-columns: minmax(0, 1fr);
  }
  .nav {
    position: static; border-right: 0; border-bottom: 1px solid var(--linie);
    padding: 12px 12px 8px;
  }
  .nav .wort, .marke, .abmelden { display: revert; }
  .marke { padding: 2px 4px 12px; }
  /* Auf dem schmalen Bildschirm passen drei Kacheln nebeneinander —
     die Zwischenüberschriften bleiben. */
  .nav-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 10px; }
  .nav a.kachel { min-height: 58px; padding: 8px 3px 7px; }
  .nav a.kachel .sym { width: 26px; height: 26px; font-size: 13px; }
  .nav a.kachel .wort { font-size: 10px; }
  .abmelden { margin-top: 4px; }

  .kontext {
    position: static; grid-column: auto; border-left: 0;
    border-top: 1px solid var(--linie); padding: 16px 14px 32px;
  }
  /* Die Kontextblöcke nebeneinander statt in einer langen Spalte —
     sonst scrollt man ewig, bevor man unten ankommt. */
  .kontext { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 14px;
    align-content: start; }
  .kontext .block { margin-bottom: 18px; }

  /* ---------- Keine schwebenden Knöpfe am Handy ----------
   *
   * Ein Knopf, der über dem Inhalt schwebt, verdeckt auf 375 px Breite immer
   * irgendetwas — es gibt schlicht keine freie Ecke. Die Griffe an den Rändern
   * haben hier ohnehin keine Aufgabe mehr, weil die Leisten untereinander
   * stehen statt daneben. Also: beide weg, und stattdessen eine Zeile, die
   * mitscrollt und nichts verdecken kann. */
  .griff { display: none; }
  .leisten-knopf { display: none; }

  /* Der Balken steht GANZ oben und klebt dort. Läge er unter dem Menü,
     müsste man an 17 Kacheln vorbeiscrollen, um das Menü zuklappen zu können. */
  .app { grid-template-areas: 'balken' 'leiste' 'inhalt' 'kontext'; }
  .nav { grid-area: leiste; }
  .inhalt { grid-area: inhalt; }
  .kontext { grid-area: kontext; }

  .handy-balken {
    grid-area: balken; display: flex; gap: .5rem; align-items: center;
    padding: .5rem .8rem; background: var(--panel);
    border-bottom: 1px solid var(--linie);
    position: sticky; top: 0; z-index: 300;
  }
  .handy-balken button {
    flex: 1; font: inherit; font-size: .82rem; cursor: pointer;
    background: var(--panel-hoch); color: var(--text-leise);
    border: 1px solid var(--linie); border-radius: var(--radius-klein);
    padding: .45rem .5rem; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
  }
  .handy-balken button.an { color: var(--text);
    border-color: color-mix(in srgb, var(--b-start) 50%, var(--linie));
    background: color-mix(in srgb, var(--b-start) 18%, var(--panel-hoch)); }

  body.nav-zu.seite-zu .kopf { padding-right: 18px; }
  body.nav-zu.seite-zu .inhalt > * { max-width: none; }
  body.nav-zu.seite-zu .inhalt { padding-left: 0; padding-right: 0; }
}



@media (max-width: 460px) {
  .nav-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kontext { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .leisten-knopf, .klapp-pfeil, .nav a.kachel, .griff { transition: none; }
  .abschnitt-inhalt { animation: none; }
}

/* Der Zweck einer Seite steht dauerhaft unter der Überschrift — leiser als
   der Stand von jetzt, aber immer da. Wer eine Seite zum ersten Mal öffnet,
   soll nicht raten müssen, wofür sie gedacht ist. */
.kopf .zweck {
  color: var(--text-still); font-size: 13px; margin-top: 4px;
  max-width: 62ch; line-height: 1.5;
}
.kopf .zweck + p { margin-top: 6px; color: var(--text-leise); }

/* ---------- Farbwelten-Auswahl ----------
   Die Kachel zeigt genau das, was man bekommt: Hintergrund, Panel und die
   drei wichtigsten Bedeutungsfarben darauf. Eine Farbwahl ohne Vorschau ist
   ein Ratespiel. */

.einstell-zeile.senkrecht { display: block; }
.einstell-zeile.senkrecht > div:first-child { margin-bottom: 10px; }

.weltkacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}
.weltkachel {
  background: none; border: 2px solid transparent; border-radius: var(--radius-klein);
  padding: 3px; cursor: pointer; display: grid; gap: 5px; justify-items: center;
  color: var(--text-leise); font: inherit; font-size: 12px;
  transition: border-color .15s, color .15s;
}
.weltkachel:hover { border-color: var(--linie); color: var(--text); }
.weltkachel.gewaehlt { border-color: var(--b-liste); color: var(--text); }
.welt-probe {
  display: block; position: relative; width: 100%; height: 48px;
  border-radius: 8px; overflow: hidden;
}
.welt-panel {
  position: absolute; left: 6px; right: 6px; bottom: 6px; height: 22px;
  border-radius: 5px; border: 1px solid;
}
.welt-punkte { position: absolute; top: 7px; left: 7px; display: flex; gap: 4px; }
.welt-punkte i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.welt-name { font-weight: 600; }

/* ══════════════════════════════════════════════ Sofort-Prüfung
 *
 * Der Bildschirm für die zwei Meter neben der Kasse: eine Aussage, groß, in
 * einer Farbe, die man aus einem Meter Entfernung liest. Alles andere ist
 * Beiwerk und steht darunter. */

.sofort-huelle {
  position: fixed; inset: 0; z-index: 950;
  display: grid; place-items: center; padding: 1rem;
  background: color-mix(in srgb, #000 62%, transparent);
  backdrop-filter: blur(3px);
  animation: sofort-auf .2s ease;
}
@keyframes sofort-auf { from { opacity: 0 } }

.sofort-karte {
  width: min(520px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--panel); border-radius: var(--radius);
  border: 1px solid var(--linie);
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
  padding: 1.4rem 1.3rem 1.2rem;
  animation: sofort-hoch .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes sofort-hoch { from { transform: translateY(26px) scale(.97); opacity: 0 } }

.sofort-kopf { text-align: center; }
.sofort-zeichen {
  width: 74px; height: 74px; margin: 0 auto .8rem;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 38px; font-weight: 700; line-height: 1;
  color: var(--f);
  background: color-mix(in srgb, var(--f) 16%, transparent);
  border: 3px solid var(--f);
  animation: sofort-puls .5s cubic-bezier(.2,1.5,.4,1);
}
@keyframes sofort-puls { from { transform: scale(.6); opacity: 0 } }
.sofort-kopf h2 {
  margin: 0 0 .5rem; font-size: 1.55rem; line-height: 1.2; color: var(--f);
  letter-spacing: -.02em;
}
.sofort-kopf p { margin: 0; color: var(--text-leise); line-height: 1.55; }

.sofort-laeuft { text-align: center; padding: 1.5rem 0; }
.sofort-laeuft h2 { margin: 1rem 0 .4rem; font-size: 1.2rem; }
.sofort-laeuft p { color: var(--text-still); font-size: .9rem; margin: 0; }
.sofort-kreisel {
  width: 46px; height: 46px; margin: 0 auto; border-radius: 50%;
  border: 3px solid var(--panel-hoch); border-top-color: var(--b-start);
  animation: kreis 0.9s linear infinite;
}
@keyframes kreis { to { transform: rotate(360deg) } }

/* Verlässlichkeit */
.verl {
  margin: 1.2rem 0 0; padding: .8rem .9rem;
  background: var(--panel-hoch); border-radius: var(--radius-klein);
  border-left: 3px solid var(--f);
}
.verl-kopf { display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; flex-wrap: wrap; }
.verl-kopf strong { color: var(--f); font-size: .95rem; }
.verl-punkte { color: var(--text-still); font-size: .82rem; font-variant-numeric: tabular-nums; }
.verl-schiene { height: 6px; border-radius: 3px; background: var(--panel);
  overflow: hidden; margin: .5rem 0; }
.verl-fuell { height: 100%; background: var(--f); border-radius: 3px;
  transition: width .5s cubic-bezier(.2,.9,.3,1); }
.verl-bedeutung { margin: .4rem 0 0; font-size: .87rem; color: var(--text-leise);
  line-height: 1.5; }
.verl-gruende { list-style: none; margin: .6rem 0 0; padding: 0;
  font-size: .82rem; display: grid; gap: .18rem; }
.verl-gruende .dafuer { color: var(--p-bestpreis); }
.verl-gruende .dagegen { color: var(--text-still); }

.sofort-vorzeigen {
  margin-top: 1rem; padding: .9rem; border-radius: var(--radius-klein);
  background: color-mix(in srgb, var(--p-teuer) 10%, var(--panel-hoch));
  border: 1px solid color-mix(in srgb, var(--p-teuer) 30%, transparent);
}
.sofort-vorzeigen h3 { margin: 0 0 .5rem; font-size: .95rem; }
.befund { display: flex; justify-content: space-between; gap: .8rem;
  padding: .35rem 0; border-bottom: 1px solid var(--linie); font-size: .9rem; }
.befund:last-of-type { border-bottom: 0; }
.befund-betrag { color: var(--p-teuer); font-variant-numeric: tabular-nums; }
.sofort-vorzeigen .klein { margin: .6rem 0 0; color: var(--text-still); font-size: .8rem; }

.sofort-fuss { text-align: center; color: var(--text-still); font-size: .78rem;
  margin: 1rem 0 0; }
.sofort-knoepfe { display: flex; gap: .5rem; margin-top: 1.1rem; flex-wrap: wrap; }
.sofort-knoepfe > * { flex: 1; text-align: center; }
.sofort-knopf { width: 100%; text-align: left; font: inherit; cursor: pointer; }

@media (max-width: 520px) {
  .sofort-karte { padding: 1.1rem .9rem 1rem; }
  .sofort-kopf h2 { font-size: 1.3rem; }
  .sofort-knoepfe > * { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sofort-huelle, .sofort-karte, .sofort-zeichen { animation: none; }
  .verl-fuell { transition: none; }
}

/* ══════════════════════════════════════════════ Vorrat
   Keine Mahnliste: Was gerettet wurde, steht vorn. Der Müllbetrag daneben,
   kleiner, ohne Ausrufezeichen. */
.vorratliste { display: flex; flex-direction: column; gap: .45rem; }
.vorratkarte {
  display: flex; align-items: center; gap: .8rem;
  background: var(--panel); border: 1px solid var(--linie);
  border-left: 4px solid var(--f); border-radius: var(--radius-klein);
  padding: .6rem .8rem;
}
.vorrat-sym { font-size: 1.5rem; flex: none; }
.vorrat-text { flex: 1; min-width: 0; }
.vorrat-satz { font-size: .87rem; font-weight: 600; margin: .1rem 0; }
.vorrat-knoepfe { display: flex; gap: .3rem; flex: none; }
.vorrat-knoepfe .knopf { padding: .3rem .5rem; }
@media (max-width: 560px) {
  .vorratkarte { flex-wrap: wrap; }
  .vorrat-knoepfe { width: 100%; justify-content: flex-end; }
}

/* Rückmeldung direkt am Feld: grün, wenn es stimmt, rot, wenn nicht.
   Erst beim Absenden zu meckern ist die schlechteste aller Möglichkeiten. */
.frei.ja   { color: var(--p-bestpreis); }
.frei.nein { color: var(--p-teuer); }
.feld-hilfe {
  margin: -6px 0 12px; font-size: 12.5px; line-height: 1.5;
  color: var(--text-leise);
  background: color-mix(in srgb, var(--p-endet) 12%, transparent);
  border-left: 3px solid var(--p-endet);
  border-radius: 0 6px 6px 0; padding: 8px 10px;
}

/* ══════════════════════════════════════════════ Händler-Seite
   Bewusst schlicht: Ein Marktleiter öffnet das zwischen zwei Anlieferungen. */
.haendler { max-width: 900px; margin: 0 auto; padding: 24px 18px 60px; }
.h-kopf { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.h-kopf h1 { margin: 0; font-size: 1.5rem; }
.h-kopf p { margin: .2rem 0 0; color: var(--text-still); font-size: .88rem; }

/* Zeitkritisches darf blinken — aber nur, wenn es wirklich drängt.
   Unter zwei Stunden pulst die Marke leise; darüber wäre es Panikmache. */
.marke-klein.draengt { animation: draengt 2.2s ease-in-out infinite; }
@keyframes draengt { 50% { opacity: .45 } }
@media (prefers-reduced-motion: reduce) { .marke-klein.draengt { animation: none } }
.karte.reduziert { border-left-width: 4px; }

/* ══════════════════════════════════════════════ Über die App / Einwilligung
   Das Geschäftsmodell steht ÜBER den Schaltern. Wer gleich darunter etwas
   abschalten kann, liest den Absatz darüber auch. */
.karte.bekenntnis p { margin: .6rem 0; line-height: 1.6; color: var(--text-leise); }
.karte.bekenntnis p b { color: var(--text); }

.zweckliste { display: flex; flex-direction: column; gap: .7rem; }
.zweckkarte {
  background: var(--panel); border: 1px solid var(--linie);
  border-left: 4px solid var(--f); border-radius: var(--radius);
  padding: .9rem 1rem;
}
.zweckkarte.offen { border-color: color-mix(in srgb, var(--p-endet) 45%, var(--linie)); }
.zweck-kopf { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; }
.zweck-kopf strong { display: inline-block; margin-right: .4rem; }
.zweck-frage { margin: .5rem 0 .3rem; font-size: 1rem; color: var(--text); }
.zweck-text { margin: 0 0 .5rem; font-size: .88rem; color: var(--text-leise);
  line-height: 1.55; }
/* Die Folge eines Nein steht abgesetzt — sie ist der Satz, den fast alle
   weglassen, und ohne den keine Antwort informiert ist. */
.zweck-nein {
  margin: 0; font-size: .86rem; line-height: 1.5;
  padding: .5rem .7rem; border-radius: var(--radius-klein);
  background: var(--panel-hoch); color: var(--text-leise);
}
.zweck-nein b { color: var(--text); }

/* Kontrollraum: das Urteil steht ganz oben, groß und in einem Satz. */
.karte.lage-urteil h2 { margin: 0; font-size: 1.15rem; color: var(--f); }
.kacheln .titel { font-size: 13px; margin-top: 2px; }