/* Ergänzungen der Laravel-App zum Prototyp-Design (site.css wird automatisch erzeugt, diese Datei nicht). */
[hidden]{display:none!important}

/* Nichts darf seitlich überstehen (Sprechblasen, Riesenwörter, schräge Fenster, Laufband).
   clip statt hidden: erzeugt keinen Scroll-Container, die mitwandernden Szenen (position:sticky) bleiben intakt. */
html,body{overflow-x:clip}
@supports not (overflow-x:clip){body{overflow-x:hidden}}

/* Hinweise und Fehler */
.notice{background:var(--good-bg);color:var(--ink);border-radius:16px;padding:12px 16px;margin-bottom:16px;font-weight:600}
.errors{background:var(--bad-bg);color:var(--ink);border-radius:16px;padding:12px 16px;margin-bottom:16px}
.errors ul{margin:0;padding-left:20px}
.err{color:var(--bad);font-weight:600;font-size:13px}

/* Menüpunkte, die erst in späteren Meilensteinen kommen */
.menu a.soon,.tabbar a.soon{opacity:.4;cursor:default}
.menu a.soon:hover{background:transparent}
.notif form{margin:0}
.lang-btn svg.out{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Formulare (Anmeldung, Registrierung, Profil) */
.auth{max-width:560px}
.auth h1{font-size:clamp(34px,5vw,52px)}
.form{display:grid;gap:16px}
.form .field input,.form .field select{width:100%}
.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--rojo);flex:none}
.check a{color:var(--link)}
.form .btn{justify-self:start}
.small-print{font-size:13px;color:var(--muted)}
.qr svg{width:180px;height:180px;background:#fff;padding:8px;border-radius:12px}
.codes{font-family:ui-monospace,Menlo,monospace;background:var(--surface);border-radius:12px;padding:12px;columns:2}
.grid-2{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));align-items:start}

/* Startvideo-Platzhalter, solange kein Video hinterlegt ist */
.vid .ph{pointer-events:none}

/* Keine Bewegung für Menschen, die das so eingestellt haben */
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Formularfelder: <label>Text<input></label> */
.form label:not(.check){display:grid;gap:6px;font-weight:700;font-size:14px}
.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea{font:inherit;font-weight:400;font-size:16px;width:100%;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:12px;padding:11px 12px;min-width:0}
.form .check{font-weight:400}
.auth .card{padding:24px}
.auth > p{margin-block:16px 0}

/* Lernbereich */
a.fbtn{text-decoration:none;display:inline-block}
.box[aria-disabled="true"]{cursor:not-allowed}
.box[aria-disabled="true"] h3,.box[aria-disabled="true"] .desc{opacity:.6}
.video video{width:100%;display:block;border-radius:inherit;background:#000}
.preview-bar{background:#0033A0;color:#fff;border-radius:14px;padding:10px 16px;margin-bottom:16px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.preview-bar a{color:#fff;font-weight:700}