/* Teilnehmenden-App – Handy zuerst. Gleiche Marke wie die Verwaltung (Blau, Signalgelb, Grün),
   eigenes Motiv: jeder Mini-Check ist eine Linie mit Haltestellen, jede Aufgabe ein Halt –
   leer (offen), gelb (Entwurf), grün mit Haken (abgegeben). Große Flächen, wenig Text,
   Bildsymbole; die Hilfesprache steht klein unter dem deutschen Text (Arabisch rechts nach links). */
.app {
    --tn-papier: #edf1f4; --tn-tinte: #16212c; --tn-leise: #4d5a68; --tn-linie: #cfd8df;
    --tn-blau: #203755; --tn-blau-tief: #15253a; --tn-blau-hell: #e5eaf1; --tn-gelb: #f2b632; --tn-gelb-hell: #fdf1d3;
    --tn-gruen: #2c7a4b; --tn-gruen-hell: #e2f1e7; --tn-rot: #c0262d; --tn-rot-hell: #fbe8e8;
    --tn-rund: .85rem; --tn-tipp: 3.5rem;
    background: var(--tn-papier); color: var(--tn-tinte); font-size: 1.125rem; line-height: 1.5;
    min-height: 100vh; display: flex; flex-direction: column;
}
.app main { width: 100%; max-width: 34rem; padding: 1rem 1rem 2.5rem; flex: 1 0 auto; }
.app h1 { color: var(--tn-tinte); font-size: 1.85rem; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: .6rem 0 1rem; }
.app h2 { font-size: 1.2rem; line-height: 1.25; margin: 0; }
.app .hilfe { display: block; font-size: .82em; font-weight: 400; line-height: 1.4; color: var(--tn-leise); margin-top: .15rem; letter-spacing: 0; }
.app .hilfe[dir="rtl"] { font-size: .9em; }
.app h1 .hilfe { font-size: .5em; font-weight: 500; margin-top: .3rem; }
.symbol { width: 1.5rem; height: 1.5rem; flex: none; }
.symbol.gross { width: 2.4rem; height: 2.4rem; }

/* Kopf */
.app-kopf { background: var(--tn-blau); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .55rem 1rem; padding-top: max(.55rem, env(safe-area-inset-top)); position: relative; }
.app-marke { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.app-marke img { border-radius: .45rem; display: block; }
.app .logo-zeile .logo { height: 2.5rem; }
.app-fuss .logo-fuss { display: block; height: 1.6rem; width: auto; margin: 0 0 .8rem; opacity: .9; }
.sprachwahl { position: relative; }
.sprachwahl summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .3rem .8rem;
    border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 2rem; font-size: .95rem; font-weight: 600; }
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl summary .symbol { width: 1.25rem; height: 1.25rem; }
.sprachwahl-aktuell { background: var(--tn-gelb); color: var(--tn-tinte); border-radius: 1rem; padding: 0 .4rem; font-size: .75rem; margin-inline-start: .2rem; }
.sprachwahl[open] summary { background: #fff; color: var(--tn-blau); }
.sprachwahl-liste { position: absolute; right: 0; top: calc(100% + .45rem); z-index: 10; width: 16rem; background: #fff; color: var(--tn-tinte);
    border-radius: var(--tn-rund); padding: .5rem; box-shadow: 0 .6rem 1.8rem rgba(21, 37, 58, .28); display: grid; gap: .3rem; }
.sprachwahl-erklaerung { margin: .2rem .4rem .3rem; font-size: .9rem; color: var(--tn-leise); }
.app .sprachwahl-liste button { display: block; width: 100%; min-height: 3rem; text-align: start; background: var(--tn-papier); color: var(--tn-tinte);
    border: 2px solid transparent; border-radius: .6rem; font-weight: 600; font-size: 1.05rem; padding: .5rem .9rem; }
.app .sprachwahl-liste button[aria-pressed="true"] { border-color: var(--tn-blau); background: var(--tn-blau-hell); }
.app .sprachwahl-liste button:hover { background: var(--tn-blau-hell); }

/* Fuß */
.app-fuss { max-width: 34rem; width: 100%; margin: 0 auto; padding: 1.2rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--tn-linie);
    font-size: .9rem; color: var(--tn-leise); }
.app-fuss p { margin: 0 0 .6rem; }
.app-fuss form.inline { display: block; margin-bottom: .8rem; }
.app-fuss button.leise { min-height: 2.75rem; padding: .3rem 1rem; border-radius: 2rem; }

/* Meldungen, Tafeln */
.app .meldung { border-radius: var(--tn-rund); font-weight: 600; margin: .4rem 0 1rem; }
.app .meldung .hilfe { font-weight: 400; }
.tafel { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: var(--tn-rund); margin: 0 0 1rem; }
.tafel p { margin: 0 0 .5rem; }
.tafel p:last-child { margin: 0; }
.tafel-info { background: var(--tn-blau-hell); }
.tafel-warnung { background: var(--tn-gelb-hell); border: 1.5px solid #e9cf8d; }
.tafel .anleitung { margin-top: .6rem; font-size: .98rem; }

/* Knöpfe */
.app button, .app .knopf { border-radius: .7rem; min-height: 3rem; font-size: 1.05rem; }
.app .gross-knopf { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: var(--tn-tipp);
    font-size: 1.2rem; font-weight: 700; padding: .7rem 1.2rem; }
.app .gross-knopf .hilfe, .app button .hilfe { color: inherit; opacity: .85; }
.app .gross-knopf > span { text-align: center; }
.app button:disabled { background: var(--tn-linie); border-color: var(--tn-linie); color: var(--tn-leise); cursor: not-allowed; }
.app button.zweitrangig { display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: var(--tn-blau); border: 2px solid var(--tn-blau); }
.knopf-reihe { display: grid; grid-template-columns: 1fr 1.5fr; gap: .6rem; margin: 1rem 0 .4rem; align-items: stretch; }

/* ------------------------------------------------------------ Meine Aufgaben */
.abschnitt { margin: 2rem 0 .7rem !important; color: var(--tn-leise); font-size: 1.05rem !important; }
.check-karte { background: #fff; border-radius: var(--tn-rund); border: 1px solid var(--tn-linie); margin: 0 0 1rem; overflow: hidden; }
.check-karte.check-jetzt { border: 2px solid var(--tn-blau); }
.check-karte > header { padding: .9rem 1rem .4rem; }
.frist { display: flex; align-items: flex-start; gap: .45rem; margin: .45rem 0 0; font-size: .98rem; color: var(--tn-leise); }
.frist .symbol { width: 1.25rem; height: 1.25rem; margin-top: .12rem; }
.frist-bald { color: var(--tn-tinte); font-weight: 700; background: var(--tn-gelb-hell); border-radius: .5rem; padding: .3rem .55rem; width: fit-content; }
.frist-bald .hilfe { font-weight: 400; }
.frist-fertig { color: var(--tn-gruen); font-weight: 600; }

/* Linie mit Haltestellen */
.halte { list-style: none; margin: 0; padding: .2rem 0 .5rem; }
.halt { position: relative; }
.halt::before { content: ""; position: absolute; left: 2.35rem; top: 0; bottom: 0; border-left: 3px solid var(--tn-linie); }
.halt:first-child::before { top: 50%; }
.halt:last-child::before { bottom: 50%; }
.halt:only-child::before { display: none; }
.halt a { position: relative; display: flex; align-items: center; gap: .85rem; min-height: 4.4rem; padding: .55rem 1rem; color: var(--tn-tinte); text-decoration: none; }
.halt a:hover, .halt a:focus-visible { background: var(--tn-blau-hell); }
.halt-punkt { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none; position: relative; z-index: 1;
    background: #fff; border: 3px solid var(--tn-blau); color: var(--tn-blau); }
.halt-punkt .symbol { width: 1.35rem; height: 1.35rem; }
.halt-entwurf .halt-punkt { background: var(--tn-gelb); border-color: var(--tn-tinte); color: var(--tn-tinte); box-shadow: 0 0 0 4px var(--tn-gelb-hell); }
.halt-abgegeben .halt-punkt { background: var(--tn-gruen); border-color: var(--tn-gruen); color: #fff; }
.halt-verpasst .halt-punkt { border-style: dashed; border-color: var(--tn-linie); color: var(--tn-leise); background: var(--tn-papier); }
.halt-selbst:not(.halt-abgegeben) .halt-punkt { border-style: dashed; }
.halt-abgegeben + .halt::before, .halt-abgegeben::before { border-left-color: var(--tn-gruen); }
.halt-text { flex: 1; min-width: 0; }
.halt-titel { display: block; font-weight: 700; line-height: 1.3; }
.halt-status { display: block; font-size: .95rem; color: var(--tn-leise); }
.halt-entwurf .halt-status { color: var(--tn-tinte); font-weight: 600; }
.halt-abgegeben .halt-status { color: var(--tn-gruen); font-weight: 600; }
.halt-status .hilfe { font-weight: 400; }
.pfeil { color: var(--tn-leise); width: 1.3rem; height: 1.3rem; }

.leer-tn { display: flex; gap: .8rem; align-items: flex-start; background: #fff; border: 2px dashed var(--tn-linie); border-radius: var(--tn-rund); padding: 1.1rem 1rem; margin: 0 0 1rem; }
.leer-tn .symbol { color: var(--tn-gruen); width: 2rem; height: 2rem; }
.leer-tn p { margin: 0; }

/* Installationshinweis */
.installieren { position: relative; background: #fff; border-radius: var(--tn-rund); border: 2px solid var(--tn-gelb); padding: 1rem 1rem .8rem; margin: 2rem 0 0; }
.installieren h2 { padding-inline-end: 2.5rem; margin-bottom: .5rem; }
.installieren p { margin: 0 0 .6rem; }
.app .installieren-weg { position: absolute; top: .45rem; right: .45rem; min-height: 2.75rem; width: 2.75rem; padding: 0; display: grid; place-items: center;
    background: transparent; border: 0; color: var(--tn-leise); }
.installieren-schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.installieren-schritte li { display: flex; gap: .7rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--tn-linie); }
.installieren-schritte li:first-child { border-top: 0; }
.installieren-schritte .symbol { color: var(--tn-blau); width: 1.9rem; height: 1.9rem; }

/* ------------------------------------------------------------ Aufgabe */
.zurueck { margin: .2rem 0 0; }
.zurueck a { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; color: var(--tn-blau); font-weight: 600; text-decoration: none; }
.zurueck .hilfe { display: inline; margin-inline-start: .4rem; }
.aufgabe-check { margin: .5rem 0 0; color: var(--tn-leise); font-size: .95rem; }
.aufgabe-kopf h1 { display: flex; gap: .7rem; align-items: center; margin: .3rem 0 .6rem; font-size: 1.6rem; }
.format-marke { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--tn-blau); color: #fff; flex: none; }
.aufgabe-stand { margin: 0; }
.pille { display: inline-block; padding: .2rem .8rem; border-radius: 2rem; font-weight: 700; font-size: .95rem; background: #fff; border: 2px solid var(--tn-blau); color: var(--tn-blau); }
.pille-entwurf { background: var(--tn-gelb); border-color: var(--tn-tinte); color: var(--tn-tinte); }
.pille-abgegeben { background: var(--tn-gruen); border-color: var(--tn-gruen); color: #fff; }
.pille-verpasst { border-style: dashed; border-color: var(--tn-leise); color: var(--tn-leise); }
.pille .hilfe { color: inherit; display: inline; margin-inline-start: .35rem; }
.anweisung, .antwort { background: #fff; border-radius: var(--tn-rund); padding: 1rem; margin: 1rem 0; border: 1px solid var(--tn-linie); }
.anweisung { border-inline-start: 6px solid var(--tn-blau); }
.anweisung h2, .antwort h2 { color: var(--tn-leise); font-size: 1rem; margin-bottom: .4rem; }
.anweisung > p { font-size: 1.2rem; line-height: 1.55; margin: 0; }
.anweisung-hilfe { margin-top: .7rem; }
.anweisung-hilfe summary { cursor: pointer; color: var(--tn-blau); font-weight: 600; }
.anweisung-hilfe p { margin: .3rem 0 0; line-height: 1.5; }
.material { margin-top: 1rem; }
.material img { max-width: 100%; height: auto; border-radius: .5rem; border: 1px solid var(--tn-linie); }
.material-titel, .fertig-titel { display: flex; gap: .5rem; align-items: center; font-weight: 600; margin: 0 0 .4rem; }
.app audio { width: 100%; display: block; margin: .3rem 0 .6rem; }
.abgegeben { display: flex; gap: .5rem; align-items: flex-start; color: var(--tn-gruen); font-weight: 600; margin: .6rem 0 0; }
.abgegeben .hilfe { font-weight: 400; }
.status-zeile { min-height: 1.5rem; margin: .6rem 0 0; font-weight: 600; }
.status-zeile .hilfe { font-weight: 400; }
.rekorder-meldung { margin: .6rem 0 0; font-weight: 600; color: var(--tn-tinte); }
.rekorder-meldung:empty { display: none; }
.abschicken { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--tn-linie); }
.abschicken .hinweis, .antwort .hinweis { font-size: .92rem; margin: 0 0 .6rem; }

/* Hinweis vor der ersten Aufnahme */
.datenschutz { background: var(--tn-blau-hell); border-radius: var(--tn-rund); padding: 1rem; }
.datenschutz > .symbol { color: var(--tn-blau); }
.datenschutz h3 { margin: .4rem 0 .5rem; font-size: 1.15rem; }
.datenschutz ul { margin: 0 0 1rem; padding-inline-start: 1.2rem; }
.datenschutz li { margin: 0 0 .55rem; }

/* Aufnahme: großer runder Knopf, Ring zeigt die verbrauchte Zeit */
.erlaubnis-text { display: flex; gap: .8rem; align-items: flex-start; margin: 0 0 1rem; }
.erlaubnis-text .symbol { color: var(--tn-blau); }
.rekorder-hinweis { margin: 0 0 1rem; }
.rekorder { --anteil: 0; }
.app .aufnahme-knopf { position: relative; display: grid; place-items: center; width: 10rem; height: 10rem; margin: 1.4rem auto 1rem; padding: 0;
    border-radius: 50%; border: 0; background: #fff; color: var(--tn-tinte); box-shadow: inset 0 0 0 2px var(--tn-linie); }
.app .aufnahme-knopf:hover { background: #fff; }
.aufnahme-ring { position: absolute; inset: -.6rem; border-radius: 50%;
    background: conic-gradient(var(--tn-rot) calc(var(--anteil) * 360deg), var(--tn-linie) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .6rem), #000 calc(100% - .55rem));
    mask: radial-gradient(farthest-side, transparent calc(100% - .6rem), #000 calc(100% - .55rem)); }
.aufnahme-punkt { width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--tn-rot); margin-top: -1.4rem; transition: border-radius .2s, width .2s, height .2s; }
.aufnahme-text { position: absolute; bottom: 1.35rem; font-weight: 800; font-size: 1.05rem; }
.aufnahme-text .hilfe { display: none; }
.nimmt-auf .aufnahme-punkt { width: 3rem; height: 3rem; border-radius: .5rem; }
.nimmt-auf .aufnahme-knopf { box-shadow: inset 0 0 0 2px var(--tn-rot), 0 0 0 1.3rem var(--tn-rot-hell); }
.zeit { text-align: center; font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; margin: .8rem 0 .3rem; letter-spacing: .02em; }
.zeit-max { font-size: 1.1rem; color: var(--tn-leise); font-weight: 600; }
.pegel { height: .9rem; border-radius: 1rem; background: var(--tn-papier); overflow: hidden; border: 1px solid var(--tn-linie); }
.pegel span { display: block; height: 100%; background: var(--tn-gruen); transform: scaleX(0); transform-origin: left center; }
.pegel-text { font-size: .9rem; color: var(--tn-leise); margin: .35rem 0 0; }
@media (prefers-reduced-motion: no-preference) {
    .nimmt-auf .aufnahme-knopf { animation: atmen 1.6s ease-in-out infinite; }
}
@keyframes atmen { 50% { box-shadow: inset 0 0 0 2px var(--tn-rot), 0 0 0 1.7rem var(--tn-rot-hell); } }

/* Text */
.text-antwort label { display: block; font-weight: 700; margin-bottom: .4rem; }
.app textarea { width: 100%; max-width: none; min-height: 12rem; font-size: 1.15rem; line-height: 1.5; padding: .8rem; border: 2px solid var(--tn-linie);
    border-radius: .7rem; resize: vertical; background: #fff; color: var(--tn-tinte); }
.app textarea:focus { border-color: var(--tn-blau); }
.text-fuss { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .95rem; color: var(--tn-leise); margin: .4rem 0 .6rem; }
.text-fuss .status-zeile { margin: 0; text-align: end; }
#zeichen { font-variant-numeric: tabular-nums; }
.eigener-text { margin: 0; padding: .8rem 1rem; background: var(--tn-papier); border-radius: .6rem; font-size: 1.1rem; }

/* Auswahlfragen: große Antwortflächen */
.frage { border: 0; padding: 0; margin: 0 0 1.5rem; background: none; max-width: none; }
.frage legend { display: flex; gap: .6rem; font-weight: 700; font-size: 1.15rem; padding: 0; margin-bottom: .6rem; }
.frage-nr { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--tn-blau-hell); color: var(--tn-blau-tief); flex: none; font-size: 1rem; }
.frage-hinweis { margin: -.2rem 0 .5rem; font-size: .95rem; color: var(--tn-leise); }
.antworten { display: grid; gap: .55rem; }
.antwort-flaeche { display: flex; align-items: center; gap: .8rem; min-height: var(--tn-tipp); padding: .65rem .9rem; border: 2px solid var(--tn-linie);
    border-radius: .75rem; background: #fff; cursor: pointer; font-size: 1.1rem; }
.antwort-flaeche input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.antwort-marke { width: 1.6rem; height: 1.6rem; border: 2.5px solid var(--tn-leise); border-radius: 50%; flex: none; display: grid; place-items: center; }
.antwort-flaeche input[type=checkbox] + .antwort-marke { border-radius: .35rem; }
.antwort-flaeche:has(input:checked) { border-color: var(--tn-blau); background: var(--tn-blau-hell); font-weight: 600; }
.antwort-flaeche input:checked + .antwort-marke { border-color: var(--tn-blau); background: var(--tn-blau); box-shadow: inset 0 0 0 4px #fff; }
.antwort-flaeche:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.frage:disabled .antwort-flaeche { cursor: default; color: var(--tn-leise); }
.frage:disabled .antwort-flaeche:has(input:checked) { color: var(--tn-tinte); }

/* Selbsteinschätzung: vier Bildflächen je Satz */
.einleitung { margin: 0 0 1.2rem; }
.aussage { border: 1px solid var(--tn-linie); background: #fff; border-radius: var(--tn-rund); padding: 1rem; margin: 0 0 1rem; max-width: none; }
.aussage legend { padding: 0; float: left; width: 100%; margin-bottom: .8rem; }
.aussage legend + * { clear: both; }
.aussage-fertigkeit { display: block; font-size: .9rem; color: var(--tn-blau); font-weight: 700; margin-bottom: .2rem; }
.aussage-fertigkeit .hilfe { display: inline; margin-inline-start: .35rem; }
.aussage-text { display: block; font-size: 1.2rem; font-weight: 700; line-height: 1.35; }
.skala { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.skala-wahl { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .65rem .2rem .55rem; border: 2px solid var(--tn-linie); border-radius: .75rem;
    cursor: pointer; text-align: center; min-height: 6rem; }
.skala-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.skala-symbol { width: 2.4rem; height: 2.4rem; }
.skala-symbol .rand { fill: #fff; stroke: var(--tn-blau); stroke-width: 2.5; }
.skala-symbol .fuellung { fill: var(--tn-blau); }
.skala-symbol .haken { stroke: #fff; }
.skala-text { font-size: .9rem; font-weight: 600; line-height: 1.2; }
.skala-text .hilfe { font-size: .85em; }
.skala-wahl:has(input:checked) { border-color: var(--tn-blau); background: var(--tn-blau-hell); box-shadow: 0 0 0 2px var(--tn-blau) inset; }
.skala-wahl:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.aussage:disabled .skala-wahl:not(:has(input:checked)) { opacity: .45; }
/* Ohne :has() (ältere Browser): Auswahl am Symbol und am Text sichtbar */
.skala-wahl input:checked + .skala-symbol { border-radius: 50%; box-shadow: 0 0 0 3px var(--tn-blau); background: var(--tn-blau-hell); }
.skala-wahl input:checked ~ .skala-text { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.skala-wahl input:focus-visible + .skala-symbol { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 50%; }
.antwort-flaeche input:focus-visible + .antwort-marke { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* Offline- und Fehlerseite */
.offline { text-align: center; padding: 2rem 0; }
.offline > .symbol { color: var(--tn-leise); width: 3.5rem; height: 3.5rem; }
.offline .hilfe { margin: .8rem 0; }

/* Anmeldung und Start (abgemeldet) im App-Rahmen */
.app form.anmeldung input { width: 100%; max-width: none; min-height: var(--tn-tipp); border-width: 2px; border-radius: .7rem; }
.app form.anmeldung button { width: 100%; min-height: var(--tn-tipp); }

@media (min-width: 30rem) {
    .app h1 { font-size: 2.1rem; }
}
.app button > span { display: block; }
.app button.zweitrangig { justify-content: center; text-align: center; }
/* Inline-Übersetzungen hinter deutschem Text: Abstand immer links (die Zeile ist deutsch/ltr, auch bei arabischer Hilfe) */
.app .pille .hilfe, .app .zurueck .hilfe, .app .aussage-fertigkeit .hilfe { margin-inline-start: 0; margin-inline-end: 0; margin-left: .45rem; }

/* Rückmeldung der Lehrkraft (Stufe 5): Stufe je Fertigkeit als große Zahl, darunter das Stufenband
   unter A2 … B2+ – erreichte Stufen gefüllt, die aktuelle hervorgehoben. Kommentar als Zitat. */
.halt-bewertet .halt-status { color: var(--tn-blau); }
.rueckmeldung { background: #fff; border-radius: var(--tn-rund); padding: 1rem; margin: 1rem 0; border: 1px solid var(--tn-linie); border-inline-start: 6px solid var(--tn-gruen); }
.rueckmeldung h2 { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; }
.rueckmeldung h2 .symbol { color: var(--tn-gruen); }
.rueckmeldung-warten, .rueckmeldung-weiter { display: flex; gap: .6rem; align-items: flex-start; margin: .4rem 0; }
.rueckmeldung-warten .symbol { color: var(--tn-leise); }
.rueckmeldung-weiter { font-weight: 600; color: var(--tn-gruen); }
.rueckmeldung-einleitung { margin: 0 0 .5rem; }
.stufen-liste { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .6rem; }
.stufe-karte { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3rem .8rem; padding: .7rem .8rem; background: var(--tn-gruen-hell); border-radius: .7rem; }
.stufe-fertigkeit { font-weight: 700; }
.stufe-wert { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--tn-gruen); }
.stufenband { grid-column: 1 / -1; list-style: none; margin: .2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.stufenband li { height: .55rem; border-radius: .3rem; background: #fff; border: 1px solid var(--tn-linie); position: relative; }
.stufenband li span { position: absolute; top: .75rem; left: 0; right: 0; text-align: center; font-size: .62rem; color: var(--tn-leise); white-space: nowrap; }
.stufenband li.erreicht { background: var(--tn-gruen); border-color: var(--tn-gruen); }
.stufenband li.aktuell { box-shadow: 0 0 0 2px var(--tn-gelb); }
.stufenband li.aktuell span { color: var(--tn-tinte); font-weight: 700; }
.stufe-karte { padding-bottom: 1.5rem; }
.kommentar { margin: .8rem 0; }
.kommentar figcaption { color: var(--tn-leise); font-size: .95rem; margin-bottom: .3rem; }
.kommentar blockquote { margin: 0; padding: .8rem 1rem; background: var(--tn-papier); border-radius: .7rem; font-size: 1.15rem; line-height: 1.5; }
.rueckmeldung .hinweis { font-size: .9rem; color: var(--tn-leise); margin: .3rem 0; }

/* ------------------------------------------------------------ App-Navigation und Fortschritt (Stufe 6) */
.app-nav { background: #fff; border-bottom: 1px solid var(--tn-linie); position: sticky; top: 0; z-index: 5; }
.app-nav ul { list-style: none; margin: 0 auto; padding: 0 .5rem; max-width: 34rem; display: grid; grid-template-columns: 1fr 1fr 1fr; }
.app-nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: var(--tn-tipp);
    padding: .45rem .3rem .5rem; color: var(--tn-leise); text-decoration: none; font-weight: 700; text-align: center; border-bottom: 4px solid transparent; }
.app-nav a .symbol { width: 1.4rem; height: 1.4rem; }
.app-nav a .hilfe { font-size: .75rem; font-weight: 500; margin: 0; }
.app-nav a.aktiv { color: var(--tn-blau); border-bottom-color: var(--tn-gelb); }
.app-nav a:hover { background: var(--tn-blau-hell); }

.app .verlauf-liste { display: grid; gap: 1rem; }
.app .verlauf-karte { background: #fff; border: 1px solid var(--tn-linie); border-radius: var(--tn-rund); padding: .9rem .8rem .5rem; }
.app .verlauf-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; padding: 0 .2rem; }
.app .verlauf-kopf h2 { font-size: 1.25rem; }
.app .verlauf-zuletzt { flex-direction: column; align-items: flex-end; gap: .15rem; }
.app .verlauf-stufe { font-size: 2.1rem; color: var(--tn-blau-tief); }
.app .verlauf-zuletzt-text { color: var(--tn-leise); font-size: .85rem; }
.app .verlauf-zuletzt-text .hilfe { margin: 0; }
.app .verlauf-hinweis { margin: 0 .2rem .3rem; color: var(--tn-leise); font-size: .95rem; }
.app .verlauf-tabelle { padding: 0 .2rem; }
.app .verlauf-tabelle summary { min-height: 2.75rem; display: flex; flex-direction: column; justify-content: center; color: var(--tn-blau); }
.app .verlauf-tabelle th, .app .verlauf-tabelle td { padding: .35rem .3rem; border-bottom: 1px solid var(--tn-linie); text-align: start; vertical-align: top; }
.app .verlauf-tabelle th .hilfe { font-size: .75rem; }
.app .verlauf-ohne { background: #fff; border: 2px dashed var(--tn-linie); border-radius: var(--tn-rund); padding: .9rem 1rem; }
.app .verlauf-ohne h2 { font-size: 1.05rem; color: var(--tn-leise); margin-bottom: .5rem; }
.app .verlauf-ohne li { display: flex; flex-direction: column; padding: .45rem 0; border-top: 1px solid var(--tn-linie); }
.app .verlauf-ohne li:first-child { border-top: 0; }
.app .verlauf-ohne-text { font-size: .95rem; }
.weg-karte { display: flex; align-items: center; gap: .9rem; margin: 1.2rem 0 .8rem; padding: 1rem; background: #fff; border: 2px solid var(--tn-blau);
    border-radius: var(--tn-rund); color: var(--tn-tinte); text-decoration: none; min-height: 5rem; }
.weg-karte > .symbol.gross { color: var(--tn-blau); }
.weg-karte:hover, .weg-karte:focus-visible { background: var(--tn-blau-hell); }
.weg-text { flex: 1; min-width: 0; }
.weg-titel { display: block; font-weight: 800; font-size: 1.15rem; }
.weg-info { display: block; color: var(--tn-leise); font-size: .98rem; }
.fortschritt-fuss { font-size: .9rem; }
.leer-tn > .symbol { color: var(--tn-blau); }

.app .vergleich-karte { background: #fff; border: 1px solid var(--tn-linie); border-radius: var(--tn-rund); padding: .9rem 1rem 1rem; }
.app .vergleich-karte h2 { font-size: 1.2rem; }
.app .vergleich-spalte { border-radius: .7rem; border-color: var(--tn-linie); background: var(--tn-papier); }
.app .vergleich-nachher { background: var(--tn-blau-hell); border-color: var(--tn-blau); }
.app .vergleich-marke { font-size: 1.05rem; color: var(--tn-blau-tief); }
.app .stufe-marke { background: #fff; }
.app .stufe-marke .hilfe { display: inline; margin-left: .3rem; }
.app .vergleich-text { background: #fff; font-size: 1.05rem; }
.app .vergleich-wahl select { min-height: 3rem; font-size: 1rem; border: 2px solid var(--tn-linie); border-radius: .6rem; }
.app .vergleich-wahl button { min-height: 3rem; }

/* Hilfesprache vor der Anmeldung */
.hilfe-wahl { margin: 1.5rem 0; padding: .9rem 1rem; background: #fff; border-radius: var(--tn-rund); border: 1px solid var(--tn-linie); }
.hilfe-wahl p { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 .5rem; font-weight: 600; }
.hilfe-wahl ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.hilfe-wahl a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .3rem .9rem; border-radius: 2rem; border: 2px solid var(--tn-linie);
    color: var(--tn-tinte); text-decoration: none; font-weight: 600; }
.hilfe-wahl a[aria-current] { border-color: var(--tn-blau); background: var(--tn-blau-hell); }
.app .knopf.gross-knopf { text-decoration: none; }

/* Löschfrist: freundlicher Hinweis statt Aufnahme/Text; Datenschutzhinweis */
.tafel.geloescht { background: var(--tn-blau-hell); }
.tafel.geloescht svg { flex: 0 0 auto; }
.entwurf-vermerk { font-weight: 700; }
.ds-text { margin-top: .5rem; }
.ds-abschnitt { margin: 0 0 1.1rem; }
.ds-abschnitt h2 { font-size: 1.1rem; margin: 0 0 .3rem; }
.ds-abschnitt p { margin: 0; }
/* Fußlinks mit Zielgröße ≥ 44 px (WCAG 2.5.5) */
.app-fuss .fuss-links a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .2rem .15rem; }

/* Prüfungsmodus (Phase 3a): deutlich gekennzeichnet, ruhig. Telefonat als Folge von Gesprächsschritten. */
.pruefung-banner { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; padding: .55rem .9rem; border-radius: var(--tn-rund);
    background: var(--tn-tinte); color: #fff; font-weight: 700; font-size: 1rem; }
.pruefung-banner .hilfe { color: #d9e2e9; }
.check-pruefung { border: 2px solid var(--tn-tinte); }
.check-pruefung header .pruefung-banner { margin: -.1rem -.2rem .6rem; }
.pruefung-start { padding: 0 1rem; margin: .8rem 0; }
.check-karte > .hinweis { padding: 0 1rem 1rem; margin: 0; }
.pruefung-hinweis { background: #fff; border-radius: var(--tn-rund); padding: 1rem; margin: 1rem 0; box-shadow: 0 1px 0 var(--tn-linie); }
.pruefung-hinweis h2 { margin-bottom: .7rem; }
.pruefung-dauer { display: flex; gap: .6rem; align-items: center; font-weight: 700; background: var(--tn-blau-hell); border-radius: .6rem; padding: .6rem .8rem; }
.pruefung-regeln { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .7rem; }
.pruefung-regeln li { display: flex; gap: .6rem; align-items: flex-start; }
.pruefung-regeln .symbol { color: var(--tn-gruen); }
.app label.bestaetigen { display: flex; gap: .7rem; align-items: flex-start; font-weight: 600; padding: .7rem .8rem; border: 2px solid var(--tn-linie); border-radius: .6rem; background: var(--tn-papier); }
.app label.bestaetigen input { width: 1.5rem; height: 1.5rem; flex: none; margin-top: .1rem; }
.gespraech-schritte { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .9rem; }
.gespraech-schritt { background: #fff; border-radius: var(--tn-rund); padding: .8rem 1rem; border: 2px solid var(--tn-linie); }
.gespraech-schritt h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; font-size: 1.05rem; }
.schritt-zahl { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--tn-papier); border: 2px solid var(--tn-linie); font-weight: 800; flex: none; }
.schritt-jetzt { border-color: var(--tn-gelb); box-shadow: 0 0 0 4px var(--tn-gelb-hell); }
.schritt-jetzt .schritt-zahl { background: var(--tn-gelb); border-color: var(--tn-tinte); }
.schritt-fertig .schritt-zahl { background: var(--tn-gruen); border-color: var(--tn-gruen); color: #fff; }
.schritt-spaeter { opacity: .7; border-style: dashed; }
.gespraech-schritt.spielt .hoeren-knopf { animation: impuls-puls 1.2s ease-in-out infinite; }
@keyframes impuls-puls { 50% { box-shadow: 0 0 0 6px var(--tn-blau-hell); } }
@media (prefers-reduced-motion: reduce) { .gespraech-schritt.spielt .hoeren-knopf { animation: none; } }
.gespraech-schritt audio { width: 100%; }
.stufe-zertifikat { display: block; font-size: .92rem; color: var(--tn-leise); margin-top: .35rem; }

/* ------------------------------------------------------------ Zertifikat, Freigaben, Einwilligungen (Phase 3b)
   Das Zertifikat als Karte in der Markenfarbe: Stufe je Fertigkeit mit Stufenband A2 … B2 (wie das Dokument), Gültigkeit als
   Frist („noch x Tage“), Knöpfe für PDF und Prüfseite. Einwilligungen: je Zweck eine Karte mit Stand und genau einem Knopf. */
.zert-karte { background: #fff; border-radius: var(--tn-rund); border: 1px solid var(--tn-linie); border-top: 6px solid var(--tn-blau); padding: 1rem; margin: 0 0 1rem; }
.zert-karte header { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; margin-bottom: .7rem; }
.zert-name { margin: 0; font-weight: 800; color: var(--tn-blau); font-size: 1.15rem; line-height: 1.25; }
.zert-stand { margin: 0; flex: none; }
.zert-karte .stufe-karte { background: var(--tn-blau-hell); }
.zert-karte .stufe-wert { color: var(--tn-blau); }
.stufenband-zert { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.zert-karte .stufenband li.erreicht { background: var(--tn-blau); border-color: var(--tn-blau); }
.stufe-zertifikat { grid-column: 1 / -1; font-size: .9rem; color: var(--tn-leise); margin-top: 1rem; }
.zert-daten { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .8rem 0; }
.zert-daten div { background: var(--tn-papier); border-radius: .7rem; padding: .6rem .7rem; }
.zert-daten dt { font-size: .9rem; color: var(--tn-leise); }
.zert-daten dd { margin: .15rem 0 0; font-weight: 800; font-size: 1.2rem; }
.knopf-spalte { display: grid; gap: .6rem; margin: 1rem 0 .6rem; }
.app .knopf-spalte .knopf { display: flex; align-items: center; justify-content: center; gap: .55rem; text-align: center; }
.app .knopf.zweitrangig { background: #fff; color: var(--tn-blau); border: 2px solid var(--tn-blau); }
.zert-abgelaufen, .zert-ersetzt { border-top-color: var(--tn-leise); }
.zert-frueher { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.zert-frueher li { background: #fff; border-radius: .7rem; padding: .6rem .8rem; border: 1px solid var(--tn-linie); }

.freigaben { background: #fff; border-radius: var(--tn-rund); border: 1px solid var(--tn-linie); padding: 1rem; margin: 0 0 1rem; }
.freigaben h2 { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .5rem; }
.freigaben h3 { font-size: 1.05rem; margin: 1.3rem 0 .6rem; }
.freigabe-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.freigabe { border: 2px solid var(--tn-linie); border-radius: .8rem; padding: .7rem .8rem; }
.freigabe p { margin: .2rem 0; }
.freigabe form { margin-top: .5rem; }
.freigabe-neu { border: 2px solid var(--tn-gruen); background: var(--tn-gruen-hell); border-radius: .8rem; padding: .8rem; margin: .4rem 0 1rem; }
.freigabe-neu-titel { display: flex; gap: .5rem; align-items: flex-start; font-weight: 700; margin: 0 0 .5rem; }
.freigabe-werkzeug { margin: .5rem 0; }
.app input.freigabe-url { width: 100%; font-size: .9rem; padding: .55rem .6rem; border-radius: .6rem; border: 1.5px solid var(--tn-linie); background: #fff; color: var(--tn-tinte); }
.freigabe-werkzeug .knopf-reihe { grid-template-columns: 1fr 1fr; margin: .5rem 0 0; }
.freigabe-werkzeug .knopf-reihe button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.freigabe-formular .frage { margin-bottom: 1rem; }
.probe-anhoeren { margin: -.2rem 0 .8rem; }
.probe-anhoeren audio { width: 100%; }
.hilfe-zeile { display: block; font-weight: 400; font-size: .9rem; color: var(--tn-leise); }
.freigabe-alt { margin-top: 1rem; }
.freigabe-alt summary { cursor: pointer; color: var(--tn-blau); min-height: 2.75rem; display: flex; flex-direction: column; justify-content: center; }

.einwilligung { background: #fff; border-radius: var(--tn-rund); border: 1px solid var(--tn-linie); border-inline-start: 6px solid var(--tn-linie); padding: 1rem; margin: 0 0 1rem; }
.einwilligung-aktiv { border-inline-start-color: var(--tn-gruen); }
.einwilligung h2 { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .5rem; }
.einwilligung h2 .symbol { color: var(--tn-blau); margin-top: .1rem; }
.einwilligung p { margin: .3rem 0 .6rem; }
.einwilligung-stand { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.einwilligung form button { width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; }

.check-karte .check-art, .aufgabe-kopf .check-art { margin: .1rem 0 .3rem; font-weight: 600; color: var(--tn-leise); }

/* Eingangstest: eine Frage je Seite, Text in einer Fläche, Hörknopf, Überspringen abgesetzt */
.app .et-kopf { display: block; }
.et-kopf .et-teil { margin: 0; color: var(--tn-leise); font-weight: 600; }
.et-stimulus { background: #fff; border: 1px solid var(--tn-linie); border-radius: var(--tn-rund); padding: 1rem; margin: 0 0 1rem; line-height: 1.55; }
.et-punkte { list-style: none; padding: 0; }
.et-punkte li { display: flex; gap: .6rem; align-items: flex-start; margin: .6rem 0; }
.et-hoeren { margin: 0 0 1rem; }
.et-kopf .et-frage-nr { margin: .1rem 0 0; color: var(--tn-leise); font-weight: 600; }
.et-balken { display: flex; gap: .35rem; margin: .5rem 0 .6rem; }
.et-segment { flex: 1 1 0; block-size: .8rem; background: #fff; border: 2px solid var(--tn-blau); border-radius: .4rem; overflow: hidden; display: block; }
.et-fuell { display: block; block-size: 100%; background: var(--tn-blau); inline-size: 0; }
.et-segment-fertig { background: var(--tn-blau); }
.et-f0 { inline-size: 0%; } .et-f5 { inline-size: 5%; } .et-f10 { inline-size: 10%; } .et-f15 { inline-size: 15%; } .et-f20 { inline-size: 20%; } .et-f25 { inline-size: 25%; } .et-f30 { inline-size: 30%; } .et-f35 { inline-size: 35%; } .et-f40 { inline-size: 40%; } .et-f45 { inline-size: 45%; } .et-f50 { inline-size: 50%; } .et-f55 { inline-size: 55%; } .et-f60 { inline-size: 60%; } .et-f65 { inline-size: 65%; } .et-f70 { inline-size: 70%; } .et-f75 { inline-size: 75%; } .et-f80 { inline-size: 80%; } .et-f85 { inline-size: 85%; } .et-f90 { inline-size: 90%; } .et-f95 { inline-size: 95%; } .et-f100 { inline-size: 100%; }
.et-geschafft { display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; color: var(--tn-gruen); font-weight: 700; }
.et-geschafft .symbol { width: 1.3rem; height: 1.3rem; }
.et-weissnicht { margin: .9rem 0 0; }
.app .et-weissnicht button { width: 100%; min-height: var(--tn-tipp); justify-content: center; font-size: 1.05rem; font-weight: 600; border-width: 1.5px;
    border-color: var(--tn-linie); color: var(--tn-leise); background: transparent; }
.et-ueberspringen { margin-top: 1.5rem; border-top: 1px solid var(--tn-linie); padding-top: 1rem; }
.et-teil-naechster { font-weight: 700; font-size: 1.2rem; }
.et-karte-text { padding: 0 1rem; margin: 0; }

/* ------------------------------------------------------------ In-App-Hinweise (Stufe 0): Karte „Neu für Sie“ und Zahl am Reiter */
.app .hinweis-neu { background: #fff; border: 2px solid var(--tn-blau); border-radius: var(--tn-rund); padding: .8rem 1rem .6rem; margin: 0 0 1rem; }
.app .hinweis-neu h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; font-size: 1.15rem; color: var(--tn-blau); }
.app .hinweis-neu h2 .symbol { width: 1.4rem; height: 1.4rem; flex: none; }
.app .hinweis-neu ul { list-style: none; margin: 0; padding: 0; }
.app .hinweis-neu li + li { border-top: 1px solid var(--tn-linie); }
.app .hinweis-neu a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: var(--tn-tipp); padding: .3rem 0;
    color: var(--tn-tinte); font-weight: 700; text-decoration: none; }
.app .hinweis-neu a:hover { color: var(--tn-blau); text-decoration: underline; }
.app .hinweis-neu .pfeil { flex: none; width: 1.2rem; height: 1.2rem; color: var(--tn-blau); }
.app .hinweis-neu .hinweis-weitere { display: block; padding: .6rem 0; color: var(--tn-leise); }
.app .hinweis-neu .hinweis { margin: .3rem 0 0; font-size: .9rem; color: var(--tn-leise); }
.hinweis-zahl { display: inline-block; min-width: 1.35rem; padding: 0 .3rem; border-radius: 1rem; background: var(--tn-blau); color: #fff;
    font-size: .8rem; font-weight: 800; line-height: 1.35rem; text-align: center; }
.app-nav .hinweis-zahl { position: absolute; top: .3rem; inset-inline-start: calc(50% + .55rem); box-shadow: 0 0 0 2px #fff; }

/* Lernstandsbericht (/bericht): nur den Bericht drucken */
@media print {
    .app-kopf, .app-nav, .app-fuss, .nicht-drucken, .sprunglink { display: none; }
    .bericht { max-width: none; }
}