/* KorbFertig – Design 2 (über stil.css): mehr Bilder, ruhige Bewegung, klare Flächen, gut lesbar.
 * Grundsätze: Text steht immer auf ruhigem, hellem Grund (Kontrast ≥ 4,5 : 1). Bewegung ist weich und kurz;
 * wer »weniger Bewegung« eingestellt hat, bekommt keine. Bilder sind Schmuck und Orientierung, nie Textträger.
 */
:root {
  --r: 16px; --r-gross: 22px;
  --schatten: 0 1px 2px rgba(29,42,33,.06), 0 8px 24px rgba(29,42,33,.07);
  --schatten-hoch: 0 2px 6px rgba(29,42,33,.08), 0 18px 44px rgba(29,42,33,.14);
  --blatt-2: #1f6a2a; --verlauf: linear-gradient(135deg, #34913f 0%, #2a7d35 55%, #226b2c 100%);
  --sanft: cubic-bezier(.2,.8,.2,1);
}
html { font-size: 17px; }
[hidden] { display: none !important; }
body { background: var(--bg); position: relative; overflow-x: hidden; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }

/* ---------------------------------------------------------------- Hintergrund: weiche Farbwolken */
.hintergrund { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hintergrund i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: wolke 36s ease-in-out infinite alternate; }
.hintergrund i:nth-child(1) { width: 52vmax; height: 52vmax; left: -14vmax; top: -18vmax; background: #d6efd0; }
.hintergrund i:nth-child(2) { width: 40vmax; height: 40vmax; right: -12vmax; top: 20vh; background: #fff0c2; animation-duration: 44s; animation-delay: -12s; }
.hintergrund i:nth-child(3) { width: 46vmax; height: 46vmax; left: 25vw; bottom: -26vmax; background: #e4f4ff; opacity: .45; animation-duration: 52s; animation-delay: -24s; }
@keyframes wolke { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4vmax, 3vmax, 0) scale(1.08); } }

/* ---------------------------------------------------------------- Kopf mit Bilderband */
.kopf { position: relative; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(207,220,209,.9); border-radius: var(--r-gross); padding: 16px 18px; box-shadow: var(--schatten); overflow: hidden; isolation: isolate; }
.kopf-band { position: absolute; inset: 0 0 0 auto; width: min(46%, 560px); z-index: -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); opacity: .95; }
.kopf-band span { border-radius: 12px; background: var(--blatt-zart) center / cover no-repeat; animation: band 18s ease-in-out infinite alternate; }
.kopf-band span:nth-child(2n) { animation-delay: -6s; } .kopf-band span:nth-child(3n) { animation-delay: -11s; }
@keyframes band { from { transform: scale(1); } to { transform: scale(1.07); } }
.kopf .marke, .kopf .versprechen, .kopf .schritte, .kopf .markt, .kopf .schritt-kurz { position: relative; }
.kopf .schritt-kurz { background: rgba(255,255,255,.94); border-radius: 99px; padding: 3px 10px; box-shadow: 0 1px 4px rgba(0,0,0,.1); color: var(--tinte); }
.kopf .versprechen { max-width: 46ch; color: var(--tinte); font-size: 1rem; }
.kopf .markt { max-width: 54%; }
.marke { font-size: 1.9rem; }
.marke img { width: 58px; height: 58px; animation: logo-rein .8s var(--sanft) both; }
@keyframes logo-rein { from { transform: scale(.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 900px) {
  .kopf { padding: 12px 14px; border-radius: 18px; }
  .kopf-band { width: 50%; grid-template-columns: repeat(2, 1fr); }
  .kopf-band span:nth-child(n+5) { display: none; }
  .marke { font-size: 1.45rem; } .marke img { width: 44px; height: 44px; }
}

/* Fortschritt: Schritte als Weg */
.schritte { gap: 4px; }
.schritte li { background: rgba(255,255,255,.9); transition: background .3s, color .3s, border-color .3s; }
.schritte li.an { background: var(--verlauf); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(42,125,53,.28); }
.schritte li.fertig::before { content: "✓ "; color: var(--blatt); font-weight: 700; }

/* Haushalt im Kopf */
.hh-kopf { position: relative; display: inline-flex; align-items: center; gap: 0; margin-left: auto; border: 1.5px solid var(--linie); background: #fff; border-radius: 99px; padding: 4px 12px 4px 4px; min-height: 44px; box-shadow: var(--schatten); transition: transform .2s var(--sanft), box-shadow .2s; }
.hh-kopf:hover { transform: translateY(-1px); box-shadow: var(--schatten-hoch); }
.hh-kopf .pk + .pk { margin-left: -8px; }
.hh-kopf .hh-name { margin-left: 8px; font-weight: 700; font-size: .92rem; white-space: nowrap; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .hh-kopf { order: 3; } .hh-kopf .hh-name { max-width: 10ch; } }

/* Personen-Kreise */
.pk { --f: #2a7d35; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--f); color: #fff; font: 700 .95rem/1 var(--f-titel); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); flex: none; position: relative; }
.pk.plus { background: var(--blatt-zart); color: var(--blatt); }
.pk.gross { width: 64px; height: 64px; font-size: 1.8rem; }
.pk.mini { width: 26px; height: 26px; font-size: .74rem; border-width: 1.5px; }
.pk.mini i { position: absolute; right: -5px; bottom: -4px; width: 15px; height: 15px; border-radius: 50%; font: 700 .62rem/15px var(--f-text); font-style: normal; text-align: center; background: #fff; color: var(--gut); box-shadow: 0 0 0 1.5px currentColor; }
.pk.mini[data-stufe="mag"] i { color: #b8860b; }
.pk.mini[data-stufe="magnicht"] i { color: var(--warn); }
.pk.mini[data-stufe="nein"] i { color: var(--schlecht); }
.personen { display: grid; gap: 4px; margin-top: 6px; }
.personen-knopf { display: inline-flex; gap: 8px; align-items: center; border: 0; background: none; padding: 4px 6px 6px 2px; border-radius: 10px; min-height: 36px; width: fit-content; }
.personen-knopf:hover { background: var(--blatt-zart); }
.personen-text { font-size: .86rem; background: var(--bg); border-radius: 10px; padding: 6px 10px; display: grid; gap: 2px; }
.personen-text .u.nein { color: var(--schlecht); } .personen-text .u.magnicht { color: var(--warn); }

/* ---------------------------------------------------------------- Karten */
.chat, .tafel { border-radius: var(--r-gross); box-shadow: var(--schatten); border-color: rgba(207,220,209,.9); }
.chat { background: rgba(255,255,255,.94); backdrop-filter: blur(6px); }
.tafel { overflow: hidden; }
.ki-band { border-radius: var(--r-gross) var(--r-gross) 0 0; }

/* Chat-Blasen erscheinen weich */
.blase { animation: blase-rein .35s var(--sanft) both; line-height: 1.55; }
.blase.bot { box-shadow: 0 1px 2px rgba(29,42,33,.06); }
.blase.ich { background: var(--verlauf); box-shadow: 0 4px 12px rgba(42,125,53,.22); }
@keyframes blase-rein { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* Knöpfe: klar, groß genug, mit kleinem Druckgefühl */
.knopf { background: var(--verlauf); border-radius: 12px; box-shadow: 0 4px 12px rgba(42,125,53,.22); transition: transform .15s var(--sanft), box-shadow .15s, filter .15s; }
.knopf:hover { filter: brightness(1.05); box-shadow: 0 6px 18px rgba(42,125,53,.3); }
.knopf:active { transform: scale(.97); }
.knopf.zweit { background: #fff; box-shadow: none; }
.knopf.rot, .klein-knopf.rot { background: #fff; color: var(--schlecht); border: 1.5px solid var(--schlecht); box-shadow: none; }
.knopf.klein { min-height: 38px; padding: 6px 14px; font-size: .9rem; }
.chip { transition: transform .15s var(--sanft), background .2s, border-color .2s, box-shadow .2s; }
.chip:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(29,42,33,.08); }
.chip:active { transform: scale(.97); }
.chip.an, .chip.haupt { background: var(--verlauf); }
.klein-knopf { border-radius: 10px; transition: border-color .2s, background .2s; }
.klein-knopf:hover { border-color: var(--blatt); background: var(--blatt-zart); }
.link-knopf { border: 0; background: none; color: var(--leise); text-decoration: underline; padding: 6px 0; min-height: 36px; text-align: left; font-size: .9rem; }
.link-knopf.rot { color: var(--schlecht); }

/* Reiter als Pillenleiste */
.reiter { border: 0; gap: 6px; background: rgba(255,255,255,.75); backdrop-filter: blur(6px); padding: 5px; border-radius: 14px; box-shadow: var(--schatten); scrollbar-width: none; }
.reiter::-webkit-scrollbar { display: none; }
.reiter button { border: 0; border-radius: 10px; min-height: 42px; padding: 8px 14px; transition: background .25s, color .25s; }
.reiter button.an { background: var(--verlauf); color: #fff; box-shadow: 0 3px 10px rgba(42,125,53,.25); }
.reiter button.an .zahl { background: #fff; }
.reiter .zahl.gruen { background: var(--blatt-zart); color: var(--blatt); }

/* Woche: große Bilder */
.tag { grid-template-columns: 56px 176px minmax(0, 1fr) auto; padding: 14px 16px; gap: 10px 16px; transition: background .2s; }
.tag:hover { background: rgba(234,246,231,.45); }
.tag .rbild { width: 176px; height: 110px; border-radius: 14px; }
.rbild.gross { background-size: cover !important; background-position: center !important; transition: transform .4s var(--sanft); }
a.rbild.gross:hover { transform: scale(1.03); }
.tag h3 { font-size: 1.12rem; }
@media (max-width: 560px) {
  .tag { grid-template-columns: 44px minmax(0, 1fr); }
  .tag .rbild { grid-column: 1 / -1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .tag > .rechts { grid-column: 1 / -1; }
}
/* Einblenden beim Wechsel des Reiters */
.rein { animation: rein .45s var(--sanft) both; animation-delay: calc(var(--n, 0) * 45ms); }
@keyframes rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Korb */
.pos { transition: background .2s; }
.pos:hover { background: rgba(234,246,231,.35); }
.pbild { width: 56px; height: 56px; border-radius: 12px; }
.zaehler button { border-radius: 12px; transition: background .15s, transform .1s; }
.zaehler button:active { transform: scale(.92); background: var(--blatt-zart); }
.bon { border-radius: 14px; box-shadow: var(--schatten); background: linear-gradient(#fffdf6, #fffaf0); }
.budget { height: 10px; }
.budget i { transition: width .6s var(--sanft); background: linear-gradient(90deg, #43a047, #2e7d32); }

/* Übergabe: kleines Fest */
.konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.konfetti i { position: absolute; top: -12px; width: 10px; height: 14px; border-radius: 3px; opacity: .9; animation: fall var(--d, 2.4s) cubic-bezier(.3,.6,.4,1) forwards; }
@keyframes fall { to { transform: translate3d(var(--x, 0), 105vh, 0) rotate(var(--r, 540deg)); opacity: .2; } }
.logo-gross img { animation: logo-rein .7s var(--sanft) both; }

/* ---------------------------------------------------------------- Diktieren und Live-Bühne */
.eingabe { align-items: center; }
.mikro { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--blatt-zart); color: var(--blatt); display: grid; place-items: center; position: relative; transition: background .2s, transform .15s; }
.mikro:hover { background: #dcefd8; }
.mikro .mikro-zeichen { width: 24px; height: 24px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a3.5 3.5 0 0 0 3.5-3.5v-6a3.5 3.5 0 1 0-7 0v6A3.5 3.5 0 0 0 12 15Zm6-3.5a1 1 0 1 0-2 0 4 4 0 0 1-8 0 1 1 0 1 0-2 0 6 6 0 0 0 5 5.9V20H8.5a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2H13v-2.6a6 6 0 0 0 5-5.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a3.5 3.5 0 0 0 3.5-3.5v-6a3.5 3.5 0 1 0-7 0v6A3.5 3.5 0 0 0 12 15Zm6-3.5a1 1 0 1 0-2 0 4 4 0 0 1-8 0 1 1 0 1 0-2 0 6 6 0 0 0 5 5.9V20H8.5a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2H13v-2.6a6 6 0 0 0 5-5.9Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.mikro.an { background: var(--schlecht); color: #fff; }
.mikro.an::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(179,38,30,.45); animation: puls 1.4s ease-out infinite; }
@keyframes puls { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

.buehne { margin: 0 10px 8px; border-radius: 18px; padding: 12px 14px; background: linear-gradient(#fff, #f6fbf4); border: 1.5px solid #cfe6ca; box-shadow: var(--schatten-hoch); display: grid; gap: 10px; animation: buehne-rein .3s var(--sanft); max-height: 62vh; overflow-y: auto; }
.buehne[hidden] { display: none; }
@keyframes buehne-rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.buehne-kopf { display: flex; align-items: center; gap: 10px; }
.buehne-kopf b { font: 700 1rem var(--f-titel); flex: 1; }
body:not(.hoert-zu) .buehne-kopf .welle, body:not(.hoert-zu) .buehne-fertig { display: none; }
body:not(.hoert-zu) .buehne-titel::before { content: "So verstehe ich dich"; }
body:not(.hoert-zu) .buehne-titel { font-size: 0; } body:not(.hoert-zu) .buehne-titel::before { font-size: 1rem; }
.welle { display: inline-flex; gap: 3px; align-items: center; height: 22px; }
.welle i { width: 4px; height: 8px; border-radius: 2px; background: var(--schlecht); animation: welle 1s ease-in-out infinite; }
.welle i:nth-child(2) { animation-delay: -.8s; } .welle i:nth-child(3) { animation-delay: -.6s; } .welle i:nth-child(4) { animation-delay: -.4s; } .welle i:nth-child(5) { animation-delay: -.2s; }
@keyframes welle { 0%, 100% { height: 6px; } 50% { height: 22px; } }
.buehne .zu, .blatt .zu, .hh-hinweis .zu { border: 0; background: none; font-size: 1.6rem; line-height: 1; width: 44px; height: 44px; border-radius: 50%; color: var(--leise); }
.buehne .zu:hover, .blatt .zu:hover { background: var(--bg); }
.buehne-tipp { margin: 0; color: var(--leise); }
.buehne-text { margin: 0; font-size: 1.12rem; line-height: 1.5; min-height: 1.5em; }
.buehne-text .zwischen { color: var(--leise); }
.buehne-fakten { display: flex; flex-wrap: wrap; gap: 6px; }
.buehne-fakten:empty { display: none; }
.fakt { font-size: .9rem; font-weight: 700; padding: 5px 11px; border-radius: 99px; background: var(--blatt-zart); color: var(--blatt-2); }
.fakt.neu { animation: fakt-rein .4s var(--sanft); }
@keyframes fakt-rein { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: none; opacity: 1; } }
.fakt.unv, .fakt.nein { background: var(--schlecht-zart); color: var(--schlecht); }
.fakt.weich { background: var(--warn-zart); color: var(--warn); }
.fakt.mag { background: var(--gold-zart); color: var(--gold-schrift); }
.fakt.geld, .fakt.tag, .fakt.koch, .fakt.zeit { background: #eef3ff; color: #2c3e8f; }
.buehne-bilder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; position: relative; min-height: 120px; }
@media (max-width: 560px) { .buehne-bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gkarte { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(29,42,33,.1); transition: opacity .45s var(--sanft), transform .45s var(--sanft); }
.gkarte.kommt { opacity: 0; transform: translateY(12px) scale(.97); }
.gkarte.geht { position: absolute; opacity: 0; transform: scale(.97); pointer-events: none; visibility: hidden; }
.gbild { aspect-ratio: 8 / 5; background: var(--blatt-zart) center / cover no-repeat; animation: band 7s ease-in-out infinite alternate; }
.gkarte figcaption { font-size: .85rem; font-weight: 700; margin: 6px 9px 8px; line-height: 1.3; max-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------------------------------------------------------------- Fenster (Formular), Hinweis-Leiste */
.blatt { position: fixed; inset: 0; z-index: 80; background: rgba(20,32,24,.38); display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .25s; }
.blatt.da { opacity: 1; }
.blatt-karte { width: min(620px, 100%); max-height: min(88vh, 900px); overflow-y: auto; background: #fff; border-radius: 22px; box-shadow: 0 24px 70px rgba(0,0,0,.25); transform: translateY(16px); transition: transform .3s var(--sanft); }
.blatt.da .blatt-karte { transform: none; }
.blatt-kopf { position: sticky; top: 0; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px 20px; border-bottom: 1px solid var(--linie); z-index: 1; }
.blatt-kopf h2 { margin: 0; font: 800 1.3rem var(--f-titel); }
.blatt-inhalt { padding: 14px 20px 20px; display: grid; gap: 14px; }
.blatt-inhalt p, .blatt-inhalt ul { margin: 0; }
.blatt-inhalt ul { padding-left: 20px; color: var(--leise); display: grid; gap: 4px; }
.blatt-inhalt .zeile, .haushalt .zeile, .hh-start .zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 560px) {
  .blatt { place-items: end stretch; padding: 0; }
  .blatt-karte { width: 100%; border-radius: 22px 22px 0 0; max-height: 92vh; transform: translateY(40px); padding-bottom: env(safe-area-inset-bottom, 0px); }
}
.feld { display: grid; gap: 6px; }
.feld > label { font-weight: 700; }
.feld small { color: var(--leise); margin-top: -4px; }
.feld input[type=text], .blatt-inhalt > input, .chips input { border: 1.5px solid var(--rand); border-radius: 12px; padding: 11px 13px; min-height: 48px; font-size: 1rem; width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip.an::before { content: "✓ "; }
.haken { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; cursor: pointer; }
.haken input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--blatt); }
.einwilligung { background: var(--bg); border-radius: 14px; padding: 12px; font-size: .9rem; }
.segment { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--bg); padding: 4px; border-radius: 12px; }
.segment button { border: 0; background: none; border-radius: 9px; padding: 8px 14px; min-height: 42px; font-weight: 700; color: var(--leise); }
.segment button.an { background: #fff; color: var(--tinte); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.hh-hinweis { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); z-index: 85; display: flex; gap: 10px; align-items: center; background: #1d2a21; color: #fff; padding: 10px 10px 10px 16px; border-radius: 16px; box-shadow: var(--schatten-hoch); opacity: 0; transition: opacity .3s, transform .3s var(--sanft); max-width: calc(100vw - 32px); }
.hh-hinweis.da { opacity: 1; transform: translate(-50%, 0); }
.hh-hinweis .zu { color: #fff; }
@media (min-width: 901px) { .hh-hinweis { bottom: 24px; } }

/* ---------------------------------------------------------------- Reiter »Haushalt« */
.haushalt { padding: 16px; display: grid; gap: 14px; }
.hh-start { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 18px 6px; }
.hh-start h3 { margin: 0; font: 800 1.4rem var(--f-titel); }
.hh-start p { margin: 0; max-width: 52ch; color: var(--leise); }
.hh-bild { display: flex; } .hh-bild .pk + .pk { margin-left: -14px; }
.hh-bild .pk { animation: logo-rein .6s var(--sanft) both; } .hh-bild .pk:nth-child(2) { animation-delay: .1s; } .hh-bild .pk:nth-child(3) { animation-delay: .2s; }
.hh-titel { display: flex; align-items: baseline; gap: 10px; } .hh-titel h3 { margin: 0; font: 800 1.35rem var(--f-titel); }
.leise, .klein { color: var(--leise); } .klein { font-size: .88rem; }
.hh-liste { display: grid; gap: 8px; }
.hh-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--linie); border-radius: 16px; background: #fff; }
.hh-person.ich { border-color: var(--blatt); background: linear-gradient(#fff, #f7fcf6); }
.hh-person.basis { background: var(--gold-zart); border-color: transparent; }
.hh-person b { font-size: 1.02rem; } .hh-person small { display: block; color: var(--leise); }
.regeln { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.regel { font-size: .8rem; padding: 2px 9px; border-radius: 99px; background: var(--bg); border: 1px solid var(--linie); }
.regel.unv, .regel.nogo { background: var(--schlecht-zart); color: var(--schlecht); border-color: transparent; }
.regel.ern { background: var(--blatt-zart); color: var(--blatt-2); border-color: transparent; }
.regel.mag { background: var(--gold-zart); color: var(--gold-schrift); border-color: transparent; }
.regel.magnicht { background: var(--warn-zart); color: var(--warn); border-color: transparent; }
.leer-regel { font-size: .85rem; color: var(--leise); }
.code-gross { font: 600 1.25rem var(--f-zahl); letter-spacing: .12em; background: var(--bg); border-radius: 12px; padding: 10px 14px; text-align: center; user-select: all; }
.code-gross.klein { font-size: 1rem; }
.hh-mehr summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--leise); }
.hh-mehr[open] { display: grid; gap: 10px; }

/* ---------------------------------------------------------------- Handy-Leiste unten */
@media (max-width: 900px) {
  .leiste { background: rgba(255,255,255,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top-color: rgba(207,220,209,.8); }
  .eingabe .mikro { width: 48px; height: 48px; }
}
/* In der App: kein doppelter Fuß, Platz für Kamera-Aussparung */
.in-app .fuss-recht { margin-bottom: 80px; }

/* ---------------------------------------------------------------- Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  .hintergrund i, .kopf-band span, .gbild, .welle i, .mikro.an::after { animation: none !important; }
  .rein, .blase, .fakt.neu, .gkarte { animation: none !important; transition: none !important; }
  .konfetti { display: none; }
}

/* ---------------------------------------------------------------- Eingang (Code-Maske) und Rechtliches */
.tor { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(1200px 600px at 20% 10%, #e3f3df 0, transparent 60%), radial-gradient(900px 500px at 90% 90%, #fff3cf 0, transparent 60%), var(--bg);
  transition: opacity .35s ease; }
.tor.weg { opacity: 0; pointer-events: none; }
.tor-karte { width: min(440px, 100%); background: #fff; border: 1px solid var(--linie); border-radius: 22px; padding: 28px 24px; text-align: center; box-shadow: 0 18px 50px rgba(29,42,33,.12); animation: tor-rein .5s var(--sanft); }
@keyframes tor-rein { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.tor-karte img { width: 112px; height: 112px; filter: drop-shadow(0 8px 16px rgba(42,125,53,.25)); }
.tor-karte h1 { font: 800 1.6rem/1.15 var(--f-titel); margin: 10px 0 6px; }
.tor-karte p { margin: 0 0 14px; color: var(--leise); }
.tor-karte form { display: grid; gap: 10px; text-align: left; }
.tor-karte label { font-weight: 700; }
.tor-karte input { border: 1.5px solid var(--rand); border-radius: 12px; padding: 13px 14px; font: 600 1.15rem var(--f-zahl); letter-spacing: .06em; text-transform: uppercase; min-height: 52px; }
.tor-karte .knopf { min-height: 54px; font-size: 1.05rem; }
.tor-fehler { color: var(--schlecht); min-height: 1.4em; margin: 0 !important; }
.tor-klein { font-size: .9rem; }
.tor-recht, .fuss-recht { font-size: .85rem; color: var(--leise); }
.fuss-recht { max-width: 1240px; margin: 22px auto 0; text-align: center; }
.fuss-recht a, .tor-recht a { color: var(--leise); }
@media (max-width: 900px) { .fuss-recht { margin-bottom: 90px; } }

/* »Als App holen« */
.app-hinweis { position: relative; max-width: 1240px; margin: 0 auto 14px; display: grid; gap: 8px; background: #fff; border: 1.5px solid #cfe6ca; border-radius: 16px; padding: 12px 48px 12px 14px; box-shadow: var(--schatten); animation: rein .45s var(--sanft) both; }
.app-hinweis .zeile { display: flex; flex-wrap: wrap; gap: 8px; }
.app-hinweis small { color: var(--leise); }
.app-hinweis .zu { position: absolute; top: 4px; right: 4px; border: 0; background: none; font-size: 1.6rem; width: 44px; height: 44px; border-radius: 50%; color: var(--leise); }

.tor-karte.bedingungen { text-align: left; } .tor-karte.bedingungen img, .tor-karte.bedingungen h1 { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.tor-karte.bedingungen ul { padding-left: 20px; display: grid; gap: 8px; margin: 6px 0 12px; }
.tor-karte.bedingungen .knopf { width: 100%; }
.hh-wartend .zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .hh-wartend .name { font-weight: 700; min-width: 8ch; }