/* Listenly: Ergänzungen für die echte App (Navigation, Listen, Klassenmodus). Grundlagen stehen in ui.css und app.css. */
.kopf-app { gap: 12px; }
.navi { display: none; gap: 4px; margin: 0 auto; background: var(--glas); padding: 5px; border-radius: 99px; box-shadow: var(--tiefe-1); backdrop-filter: blur(18px); }
.navi a { padding: 8px 16px; border-radius: 99px; font-weight: 800; font-size: .95rem; color: var(--text); text-decoration: none; }
.navi a[aria-current="page"] { background: var(--iris); color: #fff; }
.stand-pille { margin-left: auto; padding: 8px 14px; border-radius: 99px; background: var(--glas); box-shadow: var(--tiefe-1); font-weight: 800; font-size: .85rem; color: var(--iris); text-decoration: none; white-space: nowrap; }
.tabs { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--glas); backdrop-filter: blur(20px); border-top: 1px solid var(--linie); }
.tabs a { flex: 1; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; font-size: .72rem; font-weight: 800; color: var(--text-2); text-decoration: none; border-radius: 12px; min-width: 0; }
.tabs a[aria-current="page"] { color: var(--iris); }
[data-zustand="magie"] .tabs, [data-zustand="magie"] .navi { display: none; }
main { padding-bottom: 84px; }
.hinweis-leiste { position: fixed; z-index: 19; top: calc(66px + env(safe-area-inset-top)); left: 12px; right: 12px; max-width: 760px; margin: 0 auto; display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 16px; border-radius: var(--r-m); background: var(--koralle-hell); color: var(--tinte); font-weight: 700; font-size: .92rem; box-shadow: var(--tiefe-1); }
.hinweis-leiste button { font-weight: 800; color: var(--iris); white-space: nowrap; }
.seite { max-width: 980px; margin: 0 auto; padding: calc(84px + env(safe-area-inset-top)) 16px 28px; display: grid; gap: 16px; }
.seite-kopf { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.karte { background: #fff; border-radius: var(--r-l); box-shadow: var(--tiefe-1); padding: 18px; display: grid; gap: 10px; min-width: 0; }
.liste { display: grid; gap: 10px; }
.listen-zeile { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border-radius: var(--r-m); box-shadow: var(--tiefe-1); text-decoration: none; color: inherit; min-width: 0; }
.listen-zeile:hover { box-shadow: var(--tiefe-2); }
.listen-haupt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.listen-titel { font-weight: 800; color: var(--tinte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marke { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--lavendel); color: var(--iris); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.marke.fehler { background: var(--koralle-hell); color: #B8330F; }
.marke.laeuft { background: var(--ok-hell); color: #157349; }
.leer { text-align: center; padding: 48px 20px; color: var(--text-2); display: grid; gap: 14px; justify-items: center; }
.feld { display: grid; gap: 6px; font-weight: 700; color: var(--tinte); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--linie); border-radius: var(--r-s); background: #fff; font: inherit; color: var(--tinte); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 3px solid rgba(79, 46, 201, .3); border-color: var(--iris); }
.fehlertext { color: #B8330F; font-weight: 700; font-size: .92rem; }
.reihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.karten-raster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.tarif-karte { display: grid; gap: 6px; padding: 16px; background: #fff; border-radius: var(--r-m); box-shadow: var(--tiefe-1); }
.tarif-preis { font-size: 1.4rem; font-weight: 900; color: var(--iris-tief); }
.balken { height: 8px; border-radius: 99px; background: var(--lavendel-2); overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--iris); border-radius: 99px; }
.ergebnis-frage { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabelle th { text-align: left; color: var(--text-2); font-size: .8rem; padding: 6px 8px; }
.tabelle td { padding: 10px 8px; border-top: 1px solid var(--linie); }
.tabelle-huelle { overflow-x: auto; }
.bearbeitbar:focus { outline: 2px solid var(--iris); border-radius: 6px; }
.themen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; margin: 0 auto; }
.link-zeile { word-break: break-all; }
.code-gross { font-size: 2rem; font-weight: 900; letter-spacing: .14em; color: var(--iris-tief); text-align: center; }
.qr-feld { display: grid; place-items: center; }
.qr-feld svg { width: min(220px, 60vw); height: auto; border-radius: var(--r-s); }
.klassenmodus { position: fixed; inset: 0; z-index: 60; background: #120C33; color: #fff; display: grid; place-items: center; text-align: center; padding: 24px; }
.klassenmodus[hidden] { display: none; }
.km-innen { display: grid; gap: 22px; justify-items: center; max-width: 720px; width: 100%; }
.km-titel { font-size: clamp(1.6rem, 5vw, 2.8rem); font-weight: 900; }
.km-spielen { width: 160px; height: 160px; border-radius: 50%; background: var(--iris); color: #fff; display: grid; place-items: center; box-shadow: 0 20px 60px rgba(79, 46, 201, .6); }
.km-spielen svg { width: 72px; height: 72px; fill: currentColor; }
.km-zeit { font-size: 1.3rem; font-weight: 800; color: #CFC6FF; min-height: 1.8em; }
.km-schliessen { position: absolute; top: 18px; right: 18px; color: #fff; background: rgba(255, 255, 255, .14); }
.km-knopf { color: #fff; background: rgba(255, 255, 255, .14); }
.km-knopf:hover { background: rgba(255, 255, 255, .24); }
.km-knopf[aria-pressed="true"] { background: #fff; color: var(--iris-tief); }
/* Schüleransicht */
.schueler { max-width: 720px; margin: 0 auto; padding: calc(24px + env(safe-area-inset-top)) 16px 40px; display: grid; gap: 16px; }
.schueler-logo { height: 30px; width: auto; justify-self: center; }
.antwort-eingabe { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--linie); border-radius: var(--r-s); font: inherit; }
.frage.richtig { box-shadow: inset 0 0 0 2px var(--ok); }
.frage.falsch { box-shadow: inset 0 0 0 2px var(--koralle); }
.punkte-gross { font-size: 3rem; font-weight: 900; color: var(--iris); text-align: center; }
@media (min-width: 760px) {
  .navi { display: flex; }
  .stand-pille { margin-left: 0; }
  .tabs { display: none; }
  main { padding-bottom: 0; }
  .hinweis-leiste { top: 84px; }
  .seite { padding-top: 104px; }
}
@media print { .tabs, .leiste { display: none; } }
.seite, .schueler { grid-template-columns: minmax(0, 1fr); }
.schueler > div { min-width: 0; }
a.knopf { text-decoration: none; }
.merkmale .pille { background: var(--lavendel); }
/* Die Leiste steht in der App im Fluss, unten sitzt die Navigation. */
.teilen-leiste { position: static; background: none; padding: 0; pointer-events: auto; }
.ergebnis { padding-bottom: 28px; }
.kopf-app { background: var(--glas); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
[data-zustand="start"] .kopf-app { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Abo-Hinweis im Konto: gekündigt bzw. Zahlung offen */
.abo-hinweis { margin: 10px 0 4px; padding: 12px 14px; border-radius: var(--r-m); background: var(--lavendel); color: var(--tinte); font-size: .95rem; line-height: 1.5; }
.abo-hinweis-warn { background: var(--koralle-hell); }
/* Rechtslinks in App und Anmeldung (Impressum, Kündigungs- und Widerrufsbutton) */
.recht-zeile { margin: 28px auto 16px; max-width: 760px; text-align: center; font-size: .85rem; line-height: 1.8; color: var(--text); opacity: .85; position: relative; z-index: 1; }
.recht-zeile a { color: inherit; }