/* Anton liegt selbst auf dem Server (web/schrift/, OFL-Lizenz), nicht mehr bei
   Google: kein Abruf fremder Server (Google Fonts von aussen wurde in DE schon
   abgemahnt, LG Muenchen 20.01.2022), schneller. Nur Latein + Deutsch, 24 KB. */
@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;src:url("schrift/anton.woff2") format("woff2")}
/* Kuenstlerbereich. Farben und Kurven 1:1 aus web/css/app.css, damit es
   nach derselben App aussieht. Bewusst eine eigene Datei: app.css traegt
   die ganze Team-App mit, und hier soll nichts davon versehentlich
   mitlaufen. Keine Inline-Stile im HTML - die CSP verbietet sie. */
:root{
  color-scheme:light;
  --bg:#F2F2F7; --raised:#FFFFFF; --sunken:#E9E9EE;
  --sep:rgba(60,60,67,.13); --sep-2:rgba(60,60,67,.22);
  --ink:#000; --ink-2:rgba(60,60,67,.74); --ink-3:rgba(60,60,67,.5);
  --tint:#8A5D00; --tint-bg:rgba(138,93,0,.13); --on-tint:#fff;
  --action:#111113; --on-action:#D99A00;
  --gruen:#26743A; --gruen-bg:rgba(38,116,58,.14); --rot:#B01B4E; --rot-bg:rgba(176,27,78,.12);
  --e1:0 1px 2px rgba(27,31,44,.04),0 8px 24px rgba(27,31,44,.07);
  --aus:cubic-bezier(.23,1,.32,1);
}
/* Dunkel: vom Handy uebernommen, solange der Kuenstler nichts gewaehlt
   hat - oder fest ueber den Knopf oben rechts (thema.js, data-theme). */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#000; --raised:#1C1C1E; --sunken:#2C2C2E;
  --sep:rgba(84,84,88,.5); --sep-2:rgba(120,120,128,.55);
  --ink:#fff; --ink-2:rgba(235,235,245,.64); --ink-3:rgba(235,235,245,.4);
  --tint:#FFB700; --tint-bg:rgba(255,183,0,.16); --on-tint:#1A1200;
  --action:#F2F2F7; --on-action:#6A4700;
  --gruen:#4FD06F; --gruen-bg:rgba(79,208,111,.17); --rot:#FF7BA3; --rot-bg:rgba(255,123,163,.15);
  --e1:0 .5px 1px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000; --raised:#1C1C1E; --sunken:#2C2C2E;
  --sep:rgba(84,84,88,.5); --sep-2:rgba(120,120,128,.55);
  --ink:#fff; --ink-2:rgba(235,235,245,.64); --ink-3:rgba(235,235,245,.4);
  --tint:#FFB700; --tint-bg:rgba(255,183,0,.16); --on-tint:#1A1200;
  --action:#F2F2F7; --on-action:#6A4700;
  --gruen:#4FD06F; --gruen-bg:rgba(79,208,111,.17); --rot:#FF7BA3; --rot-bg:rgba(255,123,163,.15);
  --e1:0 .5px 1px rgba(0,0,0,.5);
}
:root[data-theme="light"]{color-scheme:light}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
button,a,input,textarea{touch-action:manipulation}
html{overscroll-behavior-y:none}
body{margin:0;background:var(--bg);color:var(--ink);overscroll-behavior-y:none;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  font-size:17px;line-height:1.4;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
.seite{overflow-wrap:anywhere;max-width:32rem;margin:0 auto;padding:1.6rem 1rem calc(3rem + env(safe-area-inset-bottom))}
.brand{font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-weight:400;
  font-size:1rem;letter-spacing:.02em;margin:0 0 1.4rem;color:var(--ink-2)}
.brand span{color:var(--tint)}
h1{text-wrap:balance;font-size:2rem;line-height:1.1;letter-spacing:-.025em;margin:0 0 .3rem}
.unter{color:var(--ink-2);margin:0 0 1.6rem}
/* Abschnittsueberschrift (h2 beim eigenen Video, h3 im Feature-Block). */
.label{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);
  font-weight:600;margin:1.8rem 0 .5rem .2rem}
/* Ein Feature ist ein eigener Block mit Titel "Izzy × Senem". Zwischen
   zwei Features eine Linie, damit klar ist, wo das naechste anfaengt. */
.block-titel{font-size:1.35rem;line-height:1.2;letter-spacing:-.015em;margin:1.6rem 0 0;text-wrap:balance}
.block-song{margin:.15rem 0 0}
.feature .block-titel{margin-top:.4rem}
.feature .block-titel:focus{outline:none}
/* Feature-Liste: antippbare Karten, erst der Tipp zeigt die Einzelheiten. */
.feature-liste{display:grid;gap:.55rem;margin-top:.9rem}
.feature-karte .chev{font-size:1.4rem;line-height:1;color:var(--ink-3)}
button.zurueck{border:0;background:none;font:inherit;font-weight:600;color:var(--tint);cursor:pointer;
  padding:.6rem .2rem;min-height:44px;margin:.2rem 0 0}
/* Release: drei Moeglichkeiten als Segmente, Datum nur bei "Release steht". */
.wahl{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;padding:.25rem;margin:.8rem 0 0;background:var(--sunken);border-radius:12px}
.wahl [role=radio]{min-width:0;min-height:44px;border:0;border-radius:9px;padding:.45rem .15rem;overflow-wrap:normal;
  font:inherit;font-size:clamp(.75rem,3.4vw,.85rem);letter-spacing:-.01em;font-weight:600;color:var(--ink-2);background:transparent;cursor:pointer;
  transition:background .18s var(--aus),color .18s var(--aus)}
.wahl [role=radio][aria-checked=true]{background:var(--raised);color:var(--ink);box-shadow:var(--e1)}
.rel-datum{margin-top:.2rem}
.karte{background:var(--raised);border-radius:16px;box-shadow:var(--e1);padding:1rem 1.1rem}
.leise{color:var(--ink-2);font-size:.95rem;margin:.4rem 0 0}
.fein{color:var(--ink-3);font-size:.85rem}

/* Fortschritt: vier Stufen senkrecht, die aktuelle hervorgehoben. */
.stufen{list-style:none;margin:0;padding:0}
.stufe{display:grid;grid-template-columns:1.6rem 1fr;column-gap:.8rem;position:relative;padding-bottom:1.05rem}
.stufe:last-child{padding-bottom:0}
.stufe::before{content:"";position:absolute;left:calc(.8rem - 1px);top:1.6rem;bottom:0;width:2px;background:var(--sep-2)}
.stufe:last-child::before{display:none}
.stufe.fertig::before{background:var(--gruen)}
.punkt{width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--sep-2);background:var(--raised);font-size:.8rem;font-weight:700;color:var(--ink-3)}
.stufe.fertig .punkt{background:var(--gruen);border-color:var(--gruen);color:#fff}
.stufe.jetzt .punkt{border-color:var(--tint);color:var(--tint);box-shadow:0 0 0 4px var(--tint-bg)}
.st-titel{font-weight:600;line-height:1.6rem}
.stufe:not(.fertig):not(.jetzt) .st-titel{color:var(--ink-3)}
.st-text{color:var(--ink-2);font-size:.92rem}

/* Drehtag */
.termin{display:flex;align-items:center;gap:.9rem}
.kal{flex:0 0 3.4rem;height:3.6rem;border-radius:12px;background:var(--tint-bg);color:var(--tint);
  display:grid;place-items:center;text-align:center;line-height:1}
.kal b{display:block;font-size:1.45rem}
.kal small{display:block;font-size:.7rem;text-transform:uppercase;font-weight:700;margin-top:.15rem}
.tage{display:grid;gap:.55rem}
.tag{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;font:inherit;color:inherit;
  background:var(--raised);border:2px solid transparent;border-radius:16px;box-shadow:var(--e1);
  padding:.75rem .9rem;cursor:pointer;transition:transform .14s var(--aus),border-color .14s var(--aus)}
.tag:active{transform:scale(.98)}
.tag[aria-pressed="true"]{border-color:var(--tint)}
.tag .wachs{flex:1;min-width:0}
.frei{font-size:.8rem;font-weight:600;padding:.2rem .55rem;border-radius:99px;background:var(--gruen-bg);color:var(--gruen);white-space:nowrap}
.frei.knapp{background:var(--tint-bg);color:var(--tint)}
/* Ausgebuchter Tag: sichtbar, aber nicht waehlbar. */
.tag.voll{opacity:.55;cursor:default}
.tag.voll:active{transform:none}
.frei.aus{background:var(--sunken);color:var(--ink-2)}

a.haupt{text-align:center;text-decoration:none;box-sizing:border-box}
.adresse{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--sep)}
.leer b{display:block}
button.haupt,a.haupt{display:block;width:100%;margin-top:.8rem;border:0;border-radius:14px;padding:.95rem 1rem;
  font:inherit;font-weight:600;background:var(--action);color:var(--on-action);cursor:pointer;
  transition:transform .14s var(--aus),opacity .14s}
button.haupt:active,a.haupt:active{transform:scale(.98)}
button.haupt:disabled{background:var(--sunken);color:var(--ink-3);cursor:default}
button.zweit{display:block;width:100%;margin-top:.8rem;border:0;border-radius:14px;padding:.85rem 1rem;
  font:inherit;font-weight:600;background:var(--sunken);color:var(--ink);cursor:pointer}
button.txt{border:0;background:none;font:inherit;color:var(--tint);cursor:pointer;padding:.3rem .2rem}

label{display:block;font-size:.85rem;color:var(--ink-2);margin:.8rem 0 .3rem}
label:first-child{margin-top:0}
input,textarea{width:100%;font:inherit;font-size:17px;color:var(--ink);background:var(--sunken);
  border:0;border-radius:10px;padding:.7rem .8rem}
textarea{min-height:5.5rem;resize:vertical}
/* iOS Safari gibt dem Datumsfeld eine eigene Mindestbreite und schiebt es
   rechts aus der Karte (Draes Bildschirmfoto 25.09.2026). */
input[type="date"]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;min-height:2.9rem;text-align:left}
input[type="date"]::-webkit-date-and-time-value{text-align:left}
.rel-datum{min-width:0;overflow:hidden}
input:focus,textarea:focus{outline:2px solid var(--tint);outline-offset:0}
.msg{font-size:.9rem;color:var(--ink-2);margin:.6rem 0 0;min-height:1.2em}
.msg.gut{color:var(--gruen)}
.msg.schlecht{color:var(--rot)}

.testleiste{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .8rem;
  padding:.5rem 1rem;background:var(--tint-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:.85rem;color:var(--tint);font-weight:600}
.testleiste span{flex:1 1 auto}
.demo{display:grid;gap:.55rem}
.demo a{text-decoration:none}

/* Reiter: eigenes Video und jedes Duo. Segmentierte Leiste wie iOS. Bei
   vielen Duos bricht sie um, statt Reiter hinter den Rand zu schieben -
   ein abgeschnittener Reiter wird am Handy schlicht uebersehen. */
.reiter{display:flex;flex-wrap:wrap;gap:.25rem;padding:.25rem;margin:0 0 .4rem;background:var(--sunken);border-radius:12px}
.reiter [role=tab]{flex:1 1 auto;min-height:44px;border:0;border-radius:9px;padding:.5rem .85rem;
  font:inherit;font-size:.92rem;font-weight:600;color:var(--ink-2);background:transparent;cursor:pointer;
  white-space:nowrap;transition:background .18s var(--aus),color .18s var(--aus)}
.reiter [role=tab][aria-selected=true]{background:var(--raised);color:var(--ink);box-shadow:var(--e1)}
.wert{margin:.2rem 0 0;font-weight:600}
.hinweis{margin:0 0 .7rem .2rem;color:var(--ink-2);font-size:.92rem}
.ohne-abstand{margin:0}
/* Song-Block: Titel oben, darunter der Release-Teil. */
.song-release{margin:1.1rem 0 .15rem;font-weight:600}
#s-msg:empty{display:none}
.fuss{margin-top:2rem;text-align:center}
.nurleser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (hover:hover){
  .tag:not(.voll):hover{border-color:var(--sep-2)}
  .tag[aria-pressed="true"]:hover{border-color:var(--tint)}
  button.haupt:not(:disabled):hover,a.haupt:hover{opacity:.88}
  button.zweit:hover{background:var(--sep-2)}
  .reiter [role=tab][aria-selected=false]:hover,.wahl [role=radio][aria-checked=false]:hover{color:var(--ink)}
}
button:focus-visible,a:focus-visible,[role=tab]:focus-visible,[role=radio]:focus-visible{outline:3px solid var(--tint);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Hell/Dunkel-Knopf (thema.js). Schwebt oben rechts, bleibt beim
   Scrollen stehen. Das Symbol zeigt, wohin der Tipp fuehrt: Mond = gleich
   dunkel, Sonne = gleich hell. */
.thema{position:fixed;z-index:10;top:calc(.9rem + env(safe-area-inset-top));right:calc(.9rem + env(safe-area-inset-right));
  width:44px;height:44px;border-radius:50%;border:.5px solid var(--sep);background:var(--raised);
  box-shadow:var(--e1);color:var(--ink);padding:0;cursor:pointer;display:grid;place-items:center;
  transition:transform .16s var(--aus)}
.thema:active{transform:scale(.9)}
.thema:focus-visible{outline:2px solid var(--tint);outline-offset:3px}
.thema svg{grid-area:1/1;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .25s var(--aus)}
.thema .sonne circle{fill:currentColor;stroke:none}
.thema .mond path{fill:currentColor;stroke:none}
.thema[data-thema="light"] .sonne,.thema[data-thema="dark"] .mond{opacity:0;transform:rotate(-90deg) scale(.4)}
.thema[data-thema="dark"] .sonne{color:var(--tint)}
/* Kreis-Einblendung: die alte Seite bleibt stehen, die neue waechst
   darueber (Animation in thema.js). */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}
/* Browser ohne View Transitions: Farben kurz ueberblenden. */
.thema-weich,.thema-weich *{transition:background-color .35s var(--aus),color .35s var(--aus),border-color .35s var(--aus)!important}
@media (prefers-reduced-motion:reduce){.thema,.thema svg{transition:none}}

/* Hinweis-Karten ganz oben (Migration 39, Drae 06.10.2026): auffaellig rot
   bzw. orange, verschwinden von selbst, sobald erledigt. */
.hinweis{border-radius:16px;padding:1rem 1.1rem;margin:0 0 .8rem;border:1.5px solid var(--rot);background:var(--rot-bg)}
.hinweis b{display:block;color:var(--rot);font-size:1.05rem}
.hinweis p{margin:.35rem 0 0;color:var(--ink)}
.hinweis.orange{border-color:var(--tint);background:var(--tint-bg)}
.hinweis.orange b{color:var(--tint)}
.hinweis .mailform input{background:var(--raised)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.textknopf{background:none;border:0;padding:.2rem 0;font:inherit;color:var(--tint);text-decoration:underline;cursor:pointer}
.mailadr{margin:0;word-break:break-all}
.schalter{display:flex;align-items:center;gap:.6rem;font-size:1rem;color:var(--ink);margin:.9rem 0 0}
.schalter input{width:1.3rem;height:1.3rem;margin:0;accent-color:var(--tint)}
.hinweis .msg:empty{display:none}
.hinweis button.haupt{margin-top:.7rem;padding:.75rem 1rem}
.hinweis input{margin-top:.7rem}