/* Mastercut Freigabe – ruhig, hell, viel Weissraum (Apple-artig); dunkel bei Systemeinstellung „Dunkel“ */
:root {
  --bg: #F5F5F7; --flaeche: #FFFFFF; --flaeche2: #FBFBFD; --linie: rgba(0, 0, 0, .08); --text: #1D1D1F; --leise: #6E6E73; --leiser: #6E6E73;
  /* Farben mit Kontrast >= 4,5:1 (WCAG AA) als Text auf Weiss bzw. hinter weisser Schrift */
  --akzent: #0071E3; --gut: #1E7E34; --korr: #D70015; --blau: #0066CC; --auf-farbe: #FFFFFF;
  --radius: 22px; --schatten: 0 2px 6px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .06);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #000000; --flaeche: #1C1C1E; --flaeche2: #141416; --linie: rgba(255, 255, 255, .1); --text: #F5F5F7; --leise: #A1A1A6; --leiser: #8E8E93;
    --gut: #30D158; --korr: #FF6961; --blau: #409CFF; --akzent: #409CFF; --auf-farbe: #000000;
    --schatten: 0 2px 6px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .5); color-scheme: dark; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.47 var(--font); letter-spacing: -.022em; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
/* sichtbarer Fokusrahmen fuer Tastatur-Bedienung (Maus-Klicks bleiben ohne Rahmen) */
:focus-visible { outline: 3px solid color-mix(in srgb, var(--akzent) 60%, transparent); outline-offset: 2px; border-radius: 10px; }

.kopf { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linie); }
.marke { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; }
.punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 18%, transparent); }
.kopf-zurueck { border: 0; background: none; color: var(--akzent); font-size: 17px; padding: 8px 0; }
.kopf-zurueck::before { content: '‹ '; font-size: 22px; line-height: 0; position: relative; top: 2px; }

main { max-width: 1120px; margin: 0 auto; padding: 0 20px 140px; }
.held { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 44px 0 28px; }
.vorzeile { margin: 0; color: var(--blau); font-size: 15px; font-weight: 600; }
h1 { font-size: clamp(34px, 7vw, 56px); line-height: 1.05; letter-spacing: -.035em; margin: 4px 0 8px; font-weight: 700; }
.unter { margin: 0; color: var(--leise); font-size: 19px; }
.ring { position: relative; width: 132px; height: 132px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring-bg { stroke: var(--linie); }
.ring-fg { stroke: var(--gut); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .2, 1); }
.ring-zahl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.ring-zahl b { font-size: 34px; letter-spacing: -.03em; } .ring-zahl span { font-size: 13px; color: var(--leise); } .ring-zahl small { font-size: 11px; color: var(--leiser); }
@media (max-width: 560px) { .held { padding-top: 28px; } .ring { width: 96px; height: 96px; } .ring-zahl b { font-size: 26px; } }

.reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
@media (max-width: 560px) { .reels { grid-template-columns: 1fr 1fr; gap: 12px; } }
.karte { position: relative; background: var(--flaeche); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); border: 0; padding: 0; text-align: left;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; animation: rein .5s both; }
.karte:hover { transform: translateY(-4px) scale(1.01); }
.karte:active { transform: scale(.98); }
.karte .bild { aspect-ratio: 9 / 16; background: #000; position: relative; }
.karte video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.karte .neu-badge { position: absolute; top: 10px; left: 10px; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 99px; background: var(--blau); color: var(--auf-farbe); }
.karte .info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.karte b { font-size: 16px; line-height: 1.25; }
@keyframes rein { from { opacity: 0; transform: translateY(12px); } }

.pille { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 99px; width: fit-content; white-space: nowrap;
  background: color-mix(in srgb, var(--blau) 12%, transparent); color: var(--blau); }
.pille::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pille.freigegeben { background: color-mix(in srgb, var(--gut) 15%, transparent); color: color-mix(in srgb, var(--gut) 85%, var(--text)); }
.pille.korrektur { background: color-mix(in srgb, var(--korr) 12%, transparent); color: var(--korr); }

.ansicht { padding-top: 20px; animation: rein .4s both; }
.ansicht-raster { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 820px) { .ansicht-raster { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; } }
@media (max-width: 680px) { .ansicht-raster { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.spieler { background: #000; border-radius: 26px; overflow: hidden; aspect-ratio: 9 / 16; max-height: 76vh; margin: 0 auto; box-shadow: var(--schatten); }
.spieler video { width: 100%; height: 100%; display: block; background: #000; }
.leiste { position: relative; height: 22px; margin: 12px 6px 0; cursor: pointer; }
.spur { position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 99px; background: var(--linie); }
.marken { position: absolute; inset: 0; }
.mk { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid var(--bg); transition: transform .2s; }
.mk:hover { transform: scale(1.3); }
.mk.kom { background: var(--korr); } .mk.mk-neu { background: var(--blau); }
.versionen { display: flex; justify-content: center; margin-top: 12px; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.seg button { border: 0; background: transparent; padding: 6px 16px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--leise); transition: .2s; }
.seg button.an { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }

.reel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h2 { font-size: 28px; letter-spacing: -.03em; margin: 0; line-height: 1.15; }
.neu:empty { display: none; }
.neu { margin-top: 16px; background: color-mix(in srgb, var(--blau) 8%, var(--flaeche)); border-radius: 16px; padding: 14px 16px; }
.neu b { font-size: 15px; color: var(--blau); }
.neu ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.neu li { font-size: 15px; display: flex; gap: 8px; align-items: baseline; }
.neu li .zt { color: var(--blau); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; flex: none; }
.kommentare { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.kom { background: var(--flaeche); border-radius: 16px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); animation: rein .35s both; }
.kom .k-kopf { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--leiser); margin-bottom: 2px; }
.kom .zt { font-weight: 700; color: var(--korr); cursor: pointer; font-variant-numeric: tabular-nums; }
.kom.passt { background: color-mix(in srgb, var(--gut) 10%, var(--flaeche)); }
.kom.korrektur { background: color-mix(in srgb, var(--korr) 7%, var(--flaeche)); }
.kom a { color: var(--akzent); text-decoration: none; }
.leer { color: var(--leise); font-size: 15px; padding: 6px 2px; }
.eingabe { background: var(--flaeche); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--schatten); }
.eingabe textarea { width: 100%; border: 0; outline: none; resize: none; background: transparent; font-size: 17px; min-height: 52px; }
.zeit-pille { align-self: flex-start; border: 0; border-radius: 99px; padding: 4px 11px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--leise); }
.zeit-pille.an { background: color-mix(in srgb, var(--korr) 12%, transparent); color: var(--korr); }
.zeit-pille b { font-variant-numeric: tabular-nums; }
.eingabe-unten { display: flex; gap: 8px; align-items: center; }
.eingabe-unten input[type=text] { flex: 1; min-width: 0; border: 0; border-radius: 12px; padding: 9px 12px; background: color-mix(in srgb, var(--text) 5%, transparent); outline: none; font-size: 15px; }
.anhang { display: inline-flex; align-items: center; gap: 6px; color: var(--leise); padding: 8px; border-radius: 12px; font-size: 13px; max-width: 45%; }
.anhang span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anhang input { display: none; }
.senden { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--akzent); color: var(--auf-farbe); display: grid; place-items: center; flex: none; transition: transform .15s; }
.senden:active { transform: scale(.9); }
.hinweis { font-size: 13px; color: var(--leiser); margin: 10px 4px 0; }

.aktion { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--linie);
  animation: hoch .45s cubic-bezier(.2, .8, .2, 1) both; }
@media (min-width: 821px) { .aktion { left: 50%; right: auto; bottom: 24px; transform: translateX(-50%); width: 520px; border-radius: 22px; border: 1px solid var(--linie); box-shadow: var(--schatten); padding: 10px; } }
@keyframes hoch { from { transform: translateY(100%); } }
@media (min-width: 821px) { @keyframes hoch { from { opacity: 0; transform: translate(-50%, 30px); } to { transform: translate(-50%, 0); } } }
.k-gut, .k-korr { border: 0; border-radius: 14px; height: 50px; font-size: 16px; white-space: nowrap; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .15s, opacity .2s; }
.k-gut { background: var(--gut); color: var(--auf-farbe); } .k-korr { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.k-gut:active, .k-korr:active { transform: scale(.97); }
.k-gut:disabled, .k-korr:disabled { opacity: .4; cursor: default; }
.breit { width: 100%; }

.danke { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: einblenden .3s both; }
@keyframes einblenden { from { opacity: 0; } }
.danke-karte { width: min(380px, 100%); background: var(--flaeche); border-radius: 28px; padding: 32px 26px 20px; text-align: center; box-shadow: var(--schatten); animation: federn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes federn { from { transform: scale(.85); opacity: 0; } }
.danke h3 { font-size: 28px; margin: 14px 0 6px; letter-spacing: -.03em; }
.danke p { color: var(--leise); margin: 0 0 22px; }
.haken { width: 72px; height: 72px; }
.haken circle { fill: none; stroke: var(--gut); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: zeichnen .6s .1s forwards; }
.haken path { fill: none; stroke: var(--gut); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: zeichnen .4s .55s forwards; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
.link { border: 0; background: none; color: var(--akzent); margin-top: 10px; padding: 8px; font-size: 15px; }
.toast { position: fixed; left: 50%; bottom: 100px; transform: translate(-50%, 16px); opacity: 0; z-index: 50; background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: 14px; font-size: 15px;
  transition: .3s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.toast.zeigen { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Skript-Transparenz */
.skript:empty { display:none; }
.skript { margin:0 0 14px; border-radius:16px; background:var(--karte, rgba(255,255,255,.7)); border:1px solid var(--linie, rgba(0,0,0,.08)); overflow:hidden; }
.skript summary { list-style:none; display:flex; justify-content:space-between; align-items:center; padding:14px 16px; cursor:pointer; font-size:15px; }
.skript summary::-webkit-details-marker { display:none; }
.skript summary span { font-weight:700; color:var(--akzent, #0a84ff); }
.skript .sk-titel { margin:0 16px 6px; font-size:13px; opacity:.6; }
.skript ul { list-style:none; margin:0; padding:0 16px 12px; }
.skript li { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--linie, rgba(0,0,0,.06)); font-size:14px; }
.skript li i { width:8px; height:8px; border-radius:50%; flex:none; margin-top:6px; }
.skript li.gleich i { background:#34c759; } .skript li.umformuliert i { background:#ffcc00; } .skript li.fehlt i { background:#ff3b30; }
.skript li span { flex:1; } .skript li em { font-style:normal; font-size:12px; opacity:.5; white-space:nowrap; }
.skript { margin-top:10px; }

.fuss { text-align:center; font-size:12px; opacity:.45; padding:28px 16px 120px; } .fuss a { color:inherit; }

/* Handy: Video etwas kleiner, damit Version, Neuigkeiten und Kommentar ohne langes Scrollen erreichbar sind */
@media (max-width: 560px) {
  .spieler { max-height: 62vh; max-height: 62svh; border-radius: 22px; }
  .seite { padding-bottom: 8px; }
  /* iOS zoomt bei Eingabefeldern unter 16 px ungefragt hinein */
  #autor { font-size: 16px; }
}
/* Tablet hochkant: Player und Kommentare nebeneinander wirken zu gedraengt – untereinander, Player begrenzt */
@media (min-width: 681px) and (max-width: 820px) { .spieler { max-height: 72vh; } .seite { padding-bottom: 90px; } }
.aktion button { min-height: 50px; } /* Apple: Tipp-Ziele mindestens 44 pt */

/* „Wie lief das Reel?“ */
.leistung { margin:0 0 14px; padding:16px; border-radius:16px; background:var(--karte, #fff); border:1px solid var(--linie, rgba(0,0,0,.08)); display:flex; flex-direction:column; gap:10px; }
.leistung b { font-size:16px; } .leistung p { margin:0; font-size:14px; opacity:.65; line-height:1.4; }
.l-bild { display:flex; align-items:center; justify-content:center; min-height:52px; border-radius:12px; border:1.5px dashed color-mix(in srgb, var(--text) 25%, transparent); cursor:pointer; font-size:15px; }
.l-bild input { display:none; }
.l-zahlen { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.l-zahlen label { display:flex; flex-direction:column; gap:4px; font-size:12px; opacity:.8; }
.l-zahlen input { width:100%; min-width:0; box-sizing:border-box; font-size:16px; padding:10px 12px; border-radius:12px; border:0; background:color-mix(in srgb, var(--text) 5%, transparent); color:inherit; }
.l-danke:empty { display:none; } .l-danke { font-size:13px; color:#34c759; }
.fuss .sprachwahl { font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 8px; padding: 2px 6px; margin-left: 2px; }

/* Kommentar am Handy: klarer Einstieg unter dem Video, fester Zeitpunkt, Leiste weg beim Tippen */
.kom-hier { width: 100%; margin-top: 12px; min-height: 50px; border: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 16px; font-weight: 600; background: color-mix(in srgb, var(--korr) 12%, var(--flaeche)); color: var(--korr); transition: transform .15s; }
.kom-hier[hidden] { display: none; }
.kom-hier:active { transform: scale(.98); }
.kom-hier b { font-variant-numeric: tabular-nums; }
.zeit-pille.fest { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--korr) 45%, transparent); }
.eingabe textarea.wackeln { animation: wackeln .35s; }
@keyframes wackeln { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.kom.neu { box-shadow: 0 0 0 2px var(--korr); }
.senden:disabled { opacity: .5; }
@media (max-width: 820px) { body.tippt .aktion { display: none; } }
@media (max-width: 560px) { .eingabe-unten input[type=text] { font-size: 16px; } .eingabe textarea { font-size: 17px; } }

/* Korrektur-Liste: sammeln, aendern, loeschen – dann abschicken */
.wuensche { background: var(--flaeche); border-radius: 18px; padding: 16px; margin-bottom: 14px; box-shadow: var(--schatten); }
.wuensche[hidden] { display: none; }
.wuensche h3 { font-size: 17px; margin: 0; } .wuensche h3 span { color: var(--korr); font-variant-numeric: tabular-nums; }
.w-unter { font-size: 13px; color: var(--leise); margin: 2px 0 10px; }
.wuensche ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.wunsch { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 10px 10px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--text) 4%, transparent); animation: rein .3s both; }
.wunsch.neu { box-shadow: 0 0 0 2px var(--korr); }
.wunsch .zt { font-weight: 700; color: var(--korr); font-variant-numeric: tabular-nums; cursor: pointer; padding-top: 1px; white-space: nowrap; }
.wunsch .w-text { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.w-knoepfe { display: flex; gap: 2px; }
.w-knoepfe button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--leise); display: grid; place-items: center; }
.w-knoepfe button:active { background: color-mix(in srgb, var(--text) 8%, transparent); }
.wunsch.bearbeitet { grid-template-columns: auto 1fr; } .wunsch.bearbeitet .w-knoepfe { display: none; }
.w-feld { width: 100%; box-sizing: border-box; font-size: 16px; border-radius: 10px; border: 1px solid var(--linie); padding: 8px 10px; background: var(--flaeche); color: inherit; resize: vertical; }
.w-zeile { display: flex; gap: 8px; margin-top: 8px; }
.w-zeile button { border: 0; border-radius: 10px; padding: 8px 14px; font-weight: 600; font-size: 14px; }
.w-ok { background: var(--akzent); color: var(--auf-farbe); } .w-abbr { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.noch-was { margin-top: 14px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--gut) 8%, transparent); text-align: center; animation: rein .3s both; }
.noch-was[hidden] { display: none; }
.noch-was b { display: block; font-size: 16px; margin-bottom: 10px; }
.noch-knoepfe { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 420px) { .noch-knoepfe { grid-template-columns: 1fr 1.3fr; } }
.noch-knoepfe button { min-height: 48px; }
/* Hilfe direkt am Feld */
.eingabe-kopf { display: flex; align-items: center; gap: 8px; }
.zeit-quelle { font-size: 12px; color: var(--leise); }
.zeit-pille.text { background: color-mix(in srgb, var(--akzent) 16%, transparent); color: var(--akzent); }
.tipps { font-size: 14px; border-top: 1px solid var(--linie); padding-top: 8px; }
.tipps summary { cursor: pointer; color: var(--akzent); font-weight: 600; list-style: none; padding: 4px 0; }
.tipps summary::-webkit-details-marker { display: none; }
.tipps summary::before { content: '? '; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; margin-right: 6px; font-size: 11px;
  background: color-mix(in srgb, var(--akzent) 15%, transparent); }
.tipps p { margin: 6px 0; color: var(--leise); line-height: 1.4; }
.tipp-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.tipp-liste button { border: 1px solid var(--linie); background: var(--flaeche); border-radius: 99px; padding: 7px 12px; font-size: 14px; color: var(--text); text-align: left; }
.tipp-klein { font-size: 12.5px; }
/* Aktionsleiste: mit offenen Korrekturen nur ein grosser Knopf */
.aktion.einer { grid-template-columns: 1fr; }
.k-korr.k-haupt { background: var(--akzent); color: var(--auf-farbe); }
.k-gut[hidden] { display: none; }
/* Danke: Zusammenfassung */
.danke-liste { list-style: none; padding: 0; margin: 4px 0 16px; text-align: left; display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow: auto; }
.danke-liste:empty { display: none; }
.danke-liste li { display: flex; gap: 10px; font-size: 15px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.danke-liste .zt { font-weight: 700; color: var(--korr); white-space: nowrap; font-variant-numeric: tabular-nums; }
.leer[hidden] { display: none; }