/* Bewerbungsweg. Baut auf ../kuenstler/kuenstler.css auf (Farben, Karten,
   Knoepfe, Hell/Dunkel) und ergaenzt nur, was dort fehlt. Keine Inline-
   Stile im HTML - die CSP verbietet sie.

   Bewegung (Skills "animate" und "apple-design"):
   - nur transform und opacity (Ausnahme: der Haken zeichnet sich ueber
     stroke-dashoffset, ein winziges SVG, einmal pro Bewerbung)
   - Kurve --aus = cubic-bezier(.23,1,.32,1), keine eingebauten Kurven
   - Schrittwechsel 280 ms in die Richtung, in die man geht; alles andere
     unter 300 ms; der Einstieg darf laenger (einmaliger Moment)
   - Antippen antwortet sofort (:active), Hover nur mit Maus
   - "Bewegung reduzieren": nur Ueberblenden, nichts rutscht */
h1:focus,.hero-brand:focus{outline:none}
/* hidden gilt immer - sonst gewinnt z. B. .zeiten{display:grid} und "Genau eintippen" stand offen da. */
[hidden]{display:none!important}

/* ---------- Ansichten wechseln ---------- */
.ein-vor{animation:ein-vor .28s var(--aus) both}
.ein-zurueck{animation:ein-zurueck .28s var(--aus) both}
.ein-fade{animation:ein-fade .24s var(--aus) both}
@keyframes ein-vor{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes ein-zurueck{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes ein-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Gestaffelter Einstieg: Kinder kommen nacheinander (60 ms Abstand). */
.stag > *{animation:rein .55s var(--aus) both}
.stag > :nth-child(1){animation-delay:40ms}
.stag > :nth-child(2){animation-delay:100ms}
.stag > :nth-child(3){animation-delay:160ms}
.stag > :nth-child(4){animation-delay:220ms}
.stag > :nth-child(5){animation-delay:280ms}
.stag > :nth-child(6){animation-delay:340ms}
@keyframes rein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Der Knopf kommt zuletzt und waechst aus .96, nicht aus 0. */
.hero-cta{animation:rein-cta .5s var(--aus) .36s both}
@keyframes rein-cta{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- Startseite ---------- */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;
  min-height:min(34rem,calc(100svh - 6rem));padding-top:.6rem}
/* Ein Schimmer in der Markenfarbe hinter dem Namen. Atmet langsam, nur Deckkraft. */
/* Der Schimmer ragt bewusst 3rem ueber die Spalte hinaus. Ist die Spalte so
   breit wie das Fenster (Telefon), war die Seite dadurch 32 px breiter als der
   Bildschirm und liess sich seitlich verschieben (gefunden 04.10.2026).
   Abgeschnitten wird an der Spalte - aber nur, wo sie das Fenster ausfuellt;
   breiter hat der Schimmer Platz. clip am body reicht NICHT: das wird an den
   Fensterrahmen weitergereicht und laesst sich dort trotzdem scrollen. */
@media (max-width:36rem){.seite{overflow-x:clip}}
.hero::before{content:"";position:absolute;z-index:-1;left:-3rem;right:-3rem;top:-3rem;height:24rem;
  background:radial-gradient(55% 60% at 28% 30%,var(--tint-bg),transparent 72%);
  pointer-events:none}   /* steht still: auf der Startseite bewegt sich nur die Wellenform (Codex-Vorschlag 16) */
@keyframes atmen{from{opacity:.5}to{opacity:1}}
/* Die Marke schreibt sich "twofoursix Studios" - nicht in Grossbuchstaben setzen (Drae, 05.10.2026). */
.hero-kicker .marke{font-weight:inherit;text-transform:none;letter-spacing:.02em}
.hero-kicker{display:flex;align-items:center;gap:.75rem;margin:0 0 1.4rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;line-height:1.35;color:var(--ink-3)}
.logo246{flex:0 0 auto;width:2rem;height:auto;color:var(--ink)}
/* Grosse Schrift will ENGER laufen (apple-design, Typografie). */
.hero-brand{margin:0;font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(3.8rem,20vw,5.8rem);line-height:.92;letter-spacing:-.01em;text-wrap:balance}
.hero-brand span{color:var(--tint)}
.hero-tag{margin:1.3rem 0 .4rem;font-size:1.4rem;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.hero-text{margin:0;max-width:25rem;color:var(--ink-2)}
.hero-cta{margin-top:auto;padding-top:2.2rem;display:flex;flex-direction:column;align-items:stretch;gap:.4rem}
button.cta{margin-top:0;padding:1.15rem 1rem;border-radius:18px;font-size:1.2rem;letter-spacing:-.01em;
  transition:transform .18s var(--aus),opacity .18s var(--aus)}
button.cta:active{transform:scale(.985);opacity:.9}
.mehr{padding:.8rem;text-align:center;font-weight:600;color:var(--ink-2);text-decoration:none}
.pause b{display:block}
/* ---------- Der Song als Wellenform (Startseite) ----------
   Drei feste Ausschnitte wechseln in ruhigen Abstaenden. Nur transform
   und opacity bewegen sich; die Balken heben sich unter dem Abspielkopf. */
.format{margin:2rem 0 0}
.spur{position:relative;height:4.4rem}
.welle{position:absolute;inset:0;display:block;width:100%;height:100%;fill:var(--sep-2);
  opacity:0;transition:opacity .24s var(--aus)}
.format[data-ausschnitt="0"] .welle[data-schicht="0"],
.format[data-ausschnitt="1"] .welle[data-schicht="1"],
.format[data-ausschnitt="2"] .welle[data-schicht="2"]{opacity:1}
.welle .intro{fill:var(--tint);opacity:.45}
.welle .auftritt{fill:var(--tint)}
/* Fenster: Balken 18 bis 44 von 56 */
.fenster{position:absolute;top:-.35rem;bottom:-.35rem;left:32.14%;width:46.43%;
  border:1.5px solid var(--tint);border-radius:10px;background:var(--tint-bg);overflow:visible;
  transform-origin:left center;animation:fenster .45s var(--aus) .85s both;
  /* Gleiten wie gezogen: iOS-Schubladenkurve, gut eine knappe Sekunde (erklaerend, nicht UI). */
  transition:transform .9s cubic-bezier(.32,.72,0,1),box-shadow .16s var(--aus)}
@keyframes fenster{from{opacity:0;transform:scaleX(.9)}to{opacity:1;transform:none}}
.format.bereit .fenster{animation:none}
.format[data-ausschnitt="0"] .fenster{transform:translateX(-38.46%)}
.format[data-ausschnitt="2"] .fenster{transform:translateX(34.62%)}
/* Gegriffen: das Fenster hebt sich etwas ab (Schatten), wie unter dem Finger. */
.format.greift .fenster{box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 3px var(--tint-bg)}
/* Der "Finger": ein heller Punkt mitten auf dem Fenster, nur waehrend des Ziehens. */
.fenster::before{content:"";position:absolute;left:50%;top:50%;width:1.6rem;height:1.6rem;margin:-.8rem 0 0 -.8rem;
  border-radius:50%;background:var(--ink);opacity:0;transform:scale(.6);
  transition:opacity .16s var(--aus),transform .16s var(--aus);pointer-events:none}
.format.greift .fenster::before{opacity:.28;transform:scale(1)}
/* Balken wachsen um ihre eigene Mitte (SVG braucht transform-box). */
.welle rect{transform-box:fill-box;transform-origin:center}
/* Abspielkopf: ein Durchlauf pro Ausschnitt, danach wieder Ruhe. */
/* Die rechte Kante dieses fensterbreiten Elements ist der Strich; es wandert um die eigene Breite. */
.kopf{position:absolute;inset:0;opacity:0;transform:translateX(-100%);pointer-events:none}
.kopf::after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;border-radius:1px;background:var(--ink)}
/* Am Ende blendet der Strich auf den letzten Millimetern aus, statt an der Kante stehen
   zu bleiben (Drae, 05.10.2026: "am Ende ein bisschen am haengen"). */
.format.spielt .kopf{animation:abspielen 4.4s linear both}
@keyframes abspielen{0%{transform:translateX(-100%);opacity:0}3%{opacity:1}94%{opacity:1}
  100%{transform:translateX(0);opacity:0}}
.legende{display:flex;flex-wrap:wrap;gap:.45rem 1rem;margin-top:.95rem;font-size:.85rem;color:var(--ink-2)}
.legende span{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.legende b{color:var(--ink);font-weight:700}
.legende i{width:.7rem;height:.7rem;border-radius:3px;background:var(--tint)}
.lg-intro i{opacity:.45}
.lg-kamera svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}

/* ---------- Ablauf: drei Stationen auf einer Linie ----------
   Die Linie zieht sich, wenn der Ablauf ins Bild kommt, die Stationen
   tauchen nacheinander auf (120 ms Abstand). */
.ablauf{list-style:none;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0;padding:1.1rem .4rem 1.2rem;border-radius:20px;background:var(--raised);text-align:center}
.ablauf::before{content:"";position:absolute;top:2.55rem;left:16.6%;right:16.6%;height:2px;border-radius:1px;
  background:var(--tint);transform:scaleX(0);transform-origin:left center;transition:transform .7s var(--aus)}
.ablauf.sichtbar::before{transform:scaleX(1)}
.ablauf li{position:relative;display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:0;
  opacity:0;transform:translateY(8px);transition:opacity .4s var(--aus),transform .4s var(--aus)}
.ablauf.sichtbar li{opacity:1;transform:none}
.ablauf.sichtbar li:nth-child(2){transition-delay:120ms}
.ablauf.sichtbar li:nth-child(3){transition-delay:240ms}
.ab-icon{display:grid;place-items:center;width:2.9rem;height:2.9rem;margin-bottom:.45rem;border-radius:50%;
  background:var(--raised);box-shadow:0 0 0 2px var(--tint) inset;color:var(--tint)}
.ab-icon svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ablauf li:last-child .ab-icon{background:var(--tint);color:var(--on-tint)}
.ablauf b{font-size:1rem}
.ablauf li span:last-child{font-size:.78rem;line-height:1.25;color:var(--ink-3);padding:0 .2rem}

/* ---------- Bis zu 3 Songs: Ordner, aus dem drei Noten kommen ----------
   Laeuft jedes Mal, wenn "Link einfuegen" sichtbar wird (display none ->
   block startet die Animation neu) - selten genug, kein Dauerzappeln. */
.mehrere{display:flex;align-items:center;gap:.9rem;margin-top:.9rem;padding:.8rem .9rem;border-radius:14px;background:var(--sunken)}
.mehrere p{margin:0;font-size:.85rem;line-height:1.35;color:var(--ink-2)}
.mehrere b{color:var(--ink)}
.ordner{position:relative;flex:0 0 auto;width:3rem;height:3.1rem}
.ordner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.45rem;border-radius:4px 4px 6px 6px;
  background:var(--tint);box-shadow:0 -.3rem 0 -.1rem var(--tint)}
.ordner i{position:absolute;left:50%;bottom:.75rem;width:1.15rem;height:1.4rem;margin-left:-.575rem;border-radius:3px;
  background:var(--raised);box-shadow:0 0 0 1px var(--sep-2);transform-origin:50% 100%;
  animation:raus .5s var(--aus) both}
.ordner i::before{content:"♪";display:block;text-align:center;font-size:.75rem;line-height:1.4rem;color:var(--tint)}
.ordner i:nth-child(1){--z:-16deg;--x:-.55rem;animation-delay:.15s}
.ordner i:nth-child(2){--z:0deg;--x:0;animation-delay:.23s}
.ordner i:nth-child(3){--z:16deg;--x:.55rem;animation-delay:.31s}
@keyframes raus{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translate(var(--x),-.6rem) rotate(var(--z))}}
.ordner i{transform:translate(var(--x),-.6rem) rotate(var(--z))}

/* ---------- Ausschnitt per Regler ----------
   Oben gross die Zeiten, darunter der Song als Spur mit dem gelben Fenster
   (heller Teil = 6 s Intro). Das Fenster folgt dem Finger OHNE Uebergang:
   was man direkt zieht, darf nicht hinterherlaufen. Vor der ersten
   Beruehrung ist es nur angedeutet. */
.regler{margin:.5rem 0 0;padding:.9rem .9rem .6rem;border-radius:14px;background:var(--sunken)}
.rg-anzeige{display:flex;align-items:baseline;gap:.45rem;margin:0 0 .7rem;font-variant-numeric:tabular-nums}
.rg-anzeige b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:1.75rem;line-height:1;letter-spacing:.01em}
.rg-strich{font-size:.85rem;color:var(--ink-3)}
.rg-dauer{margin-left:auto;font-size:.85rem;font-weight:700;color:var(--ink-3)}
.regler.gesetzt .rg-dauer{color:var(--gruen)}
.regler:not(.gesetzt) .rg-anzeige b{color:var(--ink-3)}
.rg-spur{position:relative;height:2.2rem;border-radius:8px;overflow:hidden;
  background:repeating-linear-gradient(90deg,var(--sep-2) 0 2px,transparent 2px 6px)}
.rg-fenster{position:absolute;top:0;bottom:0;display:flex;border-radius:6px;background:var(--tint);
  box-shadow:0 0 0 2px var(--tint);opacity:.35;transition:opacity .2s var(--aus),background-color .2s var(--aus)}
.rg-intro{display:block;height:100%;background:var(--raised);opacity:.45}
.regler.gesetzt .rg-fenster{opacity:1}
.rg-fenster.schlecht{background:var(--rot);box-shadow:0 0 0 2px var(--rot)}
.rg-skala{display:flex;justify-content:space-between;margin:.25rem 0 .2rem;font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rg-label{margin:.7rem 0 .1rem;font-weight:600;color:var(--ink)}
.rg-label .opt-text{font-size:.78rem;margin-left:.3rem}
/* Grosser Daumen (28 px) fuer den Finger, Spur in der Markenfarbe. */
.rg-regler{-webkit-appearance:none;appearance:none;width:100%;height:2.4rem;margin:0;padding:0;background:transparent;border-radius:0}
.rg-regler:focus{outline:none}
/* Fokus fuer Tastatur in JEDEM Browser (Firefox kennt ::-webkit-slider-thumb nicht; Codex-Befund). */
.rg-regler:focus-visible{outline:3px solid var(--tint);outline-offset:2px;border-radius:8px}
.rg-regler::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--sep-2)}
.rg-regler::-moz-range-track{height:6px;border-radius:3px;background:var(--sep-2)}
.rg-regler::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;
  background:var(--tint);border:3px solid var(--raised);box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .12s var(--aus)}
.rg-regler::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--tint);border:3px solid var(--raised);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.rg-regler:active::-webkit-slider-thumb{transform:scale(1.12)}
.rg-regler:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--tint-bg),0 1px 4px rgba(0,0,0,.3)}
.rg-genau{margin:.8rem .1rem .1rem}
@media (prefers-reduced-motion:reduce){.rg-fenster,.rg-regler::-webkit-slider-thumb{transition:none}}
.hinweis-unter{margin:.8rem .2rem 0}
.feld-hinweis{margin:.35rem .1rem 0}
.ohne-oben{margin-top:0}
.recht{margin:1rem .1rem 0}
/* Turnstile (Bot-Schutz): meist unsichtbar; erscheint es doch, steht es mittig ueber dem Knopf. */
.botschutz{display:flex;justify-content:center}
.botschutz:not(:empty){margin-top:1rem}
.fuss a,.recht a,.leise a,.pause a{color:var(--tint);font-weight:600}
.karte + .karte,.stufen.karte + .karte{margin-top:.8rem}
.karte + .label{margin-top:1.8rem}

/* ---------- Schritte: Leiste und Fortschritt ---------- */
.leiste{display:grid;grid-template-columns:2.75rem 1fr 2.75rem;align-items:center;margin:-.4rem 0 .3rem}
.zurueck-pfeil{width:2.75rem;height:2.75rem;display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;color:var(--ink);cursor:pointer;transition:transform .12s var(--aus),background-color .12s var(--aus)}
.zurueck-pfeil:active{transform:scale(.92);background:var(--sunken)}
.zurueck-pfeil.leer{pointer-events:none}
.zurueck-pfeil svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.leiste-text{text-align:center;font-size:.85rem;font-weight:600;letter-spacing:.02em;color:var(--ink-3)}
.fortschritt{height:4px;margin:.2rem 0 1.5rem;overflow:hidden;border-radius:2px;background:var(--sunken)}
.fortschritt i{display:block;width:100%;height:100%;border-radius:2px;background:var(--tint);
  transform-origin:left center;transform:scaleX(.5);animation:fuellen-1 .5s var(--aus) .12s both}
.fortschritt[data-schritt="2"] i{transform:scaleX(1);animation-name:fuellen-2}
@keyframes fuellen-1{from{transform:scaleX(0)}to{transform:scaleX(.5)}}
@keyframes fuellen-2{from{transform:scaleX(.5)}to{transform:scaleX(1)}}

/* ---------- Formular ---------- */
.wahl.zwei{grid-template-columns:repeat(2,1fr)}
.datei-feld{display:flex;align-items:center;justify-content:center;text-align:center;margin:.6rem 0 0;
  min-height:4rem;padding:.8rem;border:2px dashed var(--sep-2);border-radius:14px;color:var(--ink-2);
  font-size:.95rem;cursor:pointer;transition:border-color .16s var(--aus),color .16s var(--aus)}
.datei-feld:active{border-color:var(--tint);color:var(--ink)}
.zeiten{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.zeiten label{margin-top:.2rem}
.laenge{min-height:1.3em;margin:.5rem .1rem 0;font-size:.92rem;font-weight:600;color:var(--ink-2)}
.laenge.gut{color:var(--gruen)}
.laenge.schlecht{color:var(--rot)}
label.haken{display:flex;align-items:flex-start;gap:.7rem;margin:1.2rem 0 0;font-size:.9rem;color:var(--ink-2);cursor:pointer}
label.haken input{flex:0 0 auto;width:1.4rem;height:1.4rem;margin:.1rem 0 0;padding:0;accent-color:var(--tint)}
.song-release:first-of-type{margin-top:1.2rem}

/* ---------- Bewerber-Bereich ---------- */
.hub-titel{margin:0 0 1rem}
.status-karte{display:flex;gap:1rem;align-items:flex-start;padding:1.2rem 1.1rem}
.status-zeichen{flex:0 0 3.2rem;height:3.2rem;display:grid;place-items:center}
.status-k{margin:0;font-size:1.2rem;font-weight:700;letter-spacing:-.02em}
.status-t{margin:.35rem 0 0;font-size:.97rem;color:var(--ink-2)}
.status-gut .status-k{color:var(--gruen)}
/* "Ausstehend": ein ruhiger Puls, der sagt "laeuft", nicht "wartet auf dich". */
.puls{position:relative;display:block;width:1.1rem;height:1.1rem}
.puls i{position:absolute;inset:0;border-radius:50%;background:var(--tint)}
.puls::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--tint);opacity:.4;
  animation:puls 2.4s var(--aus) infinite}
@keyframes puls{0%{transform:scale(1);opacity:.45}70%,100%{transform:scale(2.6);opacity:0}}
/* Erfolg nach dem Abschicken: Ring und Haken zeichnen sich, einmal. */
.haken-zeichen{width:3.2rem;height:3.2rem;overflow:visible}
.haken-ring{fill:none;stroke:var(--gruen);stroke-width:3;stroke-linecap:round;stroke-dasharray:145;stroke-dashoffset:145;
  transform-box:fill-box;transform-origin:center;transform:rotate(-90deg);animation:zeichnen .6s var(--aus) .1s forwards}
.haken-strich{fill:none;stroke:var(--gruen);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;animation:zeichnen .4s var(--aus) .55s forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}
.spruch{margin:1.4rem .2rem;padding:.2rem 0 .2rem 1rem;border-left:3px solid var(--tint);
  font-size:1.12rem;font-weight:600;letter-spacing:-.015em;line-height:1.35;color:var(--ink)}
blockquote.grund{margin:.5rem 0 .8rem;padding:.2rem 0 .2rem .9rem;border-left:3px solid var(--tint);color:var(--ink)}
.stufen.karte{margin-top:.8rem;padding:1rem 1.1rem}
.aktionen-unten{margin:1.4rem 0 0;text-align:center}
.aktionen-unten .leise{margin:.2rem 0 .4rem}
button.klein{font-size:.9rem}
button.gefahr{color:var(--rot);background:var(--rot-bg)}
.fuss-klein{margin:.6rem 0 0;text-align:center}
.hub .label{margin-top:1.6rem}
/* Nach einer Absage: in zehn Tagen nochmal, mit einem anderen Song. */
.nochmal{margin-top:.8rem}
.nochmal-zahl{margin:0 0 .3rem;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:2.6rem;line-height:1;color:var(--tint)}
.nochmal-zahl em{font-style:normal;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-weight:700;font-size:1.1rem;color:var(--ink-2);margin-left:.3rem}
.nochmal-t{margin:0}

@media (hover:hover) and (pointer:fine){
  button.cta:hover{opacity:.9}
  .zurueck-pfeil:hover{background:var(--sunken)}
  .mehr:hover{color:var(--ink)}
}

/* ---------- Weniger Bewegung: ueberblenden statt rutschen ---------- */
@media (prefers-reduced-motion:reduce){
  .ein-vor,.ein-zurueck,.ein-fade{animation-name:ein-ruhig;animation-duration:.2s}
  .stag > *{animation-name:rein-ruhig;animation-duration:.3s}
  .hero-cta{animation-name:rein-ruhig;animation-duration:.3s}
  .hero::before,.puls::before{animation:none}
  .welle{animation:none}
  .fenster{animation-name:rein-ruhig;animation-duration:.3s}
  .kopf{display:none}
  .ablauf::before,.ablauf li{transition:none}
  .ordner i{animation-name:rein-ruhig}
  .puls::before{opacity:.25}
  .fortschritt i{animation:none;transition:none}
  .haken-ring,.haken-strich{animation:none;stroke-dashoffset:0}
  .zurueck-pfeil,button.cta{transition:none}
  @keyframes ein-ruhig{from{opacity:0}to{opacity:1}}
  @keyframes rein-ruhig{from{opacity:0}to{opacity:1}}
}

/* ---------- Mac-Fenster (ab 64rem) ----------
   Draes Wunsch 04.10.2026: am Mac nicht wie eine Handy-Seite. Nur die
   STARTSEITE bekommt zwei Spalten: links der Name gross, rechts Zahlen und
   Ablauf. Die Formularschritte bleiben eine schmale Spalte - so sehen
   Formulare auf dem Mac aus, und ein Feld ueber die ganze Breite liest sich
   schlechter. :has() statt einer Klasse aus dem Skript: die Ansicht weiss
   selbst, dass sie die Startseite ist (Safari ab 15.4). */
@media (min-width:64rem){
  .seite:has(.hero){max-width:68rem;padding-top:clamp(2.5rem,8vh,6rem)}
  .ansicht:has(>.hero){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    column-gap:clamp(2.5rem,5vw,5rem);align-items:start}
  .ansicht:has(>.hero)>*{grid-column:2}
  .ansicht>.hero{grid-column:1;grid-row:1 / span 8;min-height:0;padding-top:0}
  .ansicht>.hero .hero-brand{font-size:clamp(6rem,9vw,8.5rem)}
  .ansicht>.hero .hero-tag{font-size:1.7rem}
  .ansicht>.hero .hero-cta{margin-top:2.6rem;padding-top:0;max-width:22rem}
  .ansicht:has(>.hero)>#so-gehts{margin-top:0}
  .seite:has(.hero) .fuss{text-align:left}
  /* Der Ablauf steht am Mac schon daneben - der Sprung-Link waere doppelt. */
  .ansicht>.hero .mehr{display:none}
}

/* ---------- Link-Anbieter (Schritt 2) ----------
   Namen als ruhige Chips, keine Original-Logos (Rechtliches, siehe bewerben.js).
   Der erkannte Anbieter leuchtet in der Markenfarbe der Seite auf. */
.anbieter{list-style:none;margin:.55rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.anbieter li{padding:.28rem .62rem;border-radius:999px;font-size:.8rem;font-weight:600;
  color:var(--ink-2);background:var(--sunken);transition:background-color .18s var(--aus),color .18s var(--aus)}
.anbieter li.erkannt{background:var(--tint-bg);color:var(--tint)}
.anbieter li.erkannt::before{content:"✓ "}
.anbieter .anbieter-co{background:transparent;color:var(--ink-3);font-weight:500;padding-left:.2rem}
#s-linkhinweis.warn{color:var(--rot)}
@media (prefers-reduced-motion:reduce){.anbieter li{transition:none}}

/* Ohne Mail ist der persoenliche Link der einzige Zugang (Drae, 05.10.2026:
   "auf jeden Fall klar machen, dass er den Link kopieren und abspeichern soll"). */
.link-wichtig{border:1.5px solid var(--tint);background:var(--tint-bg)}
.link-wichtig b{color:var(--ink)}
.link-wichtig .haupt{margin-top:.8rem}
.opt-text{font-weight:400;color:var(--ink-3)}
#b-ig-hinweis{margin-top:.35rem}

/* ---------- Bewerber-Bereich: Stufen quer, Song als Karte, Annahme gross ----------
   Drae, 05.10.2026: weniger Text. Die Stufen laufen quer wie der Ablauf auf
   der Startseite (gleiche Bildsprache), der Song zeigt seinen Ausschnitt als
   Balken, die Fakten als Chips. */
.hub .stufen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:1.05rem .4rem}
.hub .stufe{display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:0;text-align:center}
.hub .stufe::before{left:calc(50% + 1rem);right:calc(-50% + 1rem);top:calc(.8rem - 1px);bottom:auto;width:auto;height:2px}
.hub .st-titel{font-size:.82rem;line-height:1.2}

.song-karte .sk-kopf{display:flex;align-items:center;gap:.7rem}
.sk-icon{display:grid;place-items:center;flex:0 0 auto;width:2.4rem;height:2.4rem;border-radius:12px;background:var(--tint-bg);color:var(--tint)}
.sk-icon svg,.chips svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sk-icon svg{width:1.2rem;height:1.2rem}
.song-karte .wert{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.sk-spur{position:relative;height:.5rem;margin:1rem 0 .2rem;border-radius:999px;background:var(--sunken);overflow:hidden}
.sk-teil{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--tint);
  transform-origin:left center;animation:teil .6s var(--aus) .25s both}
@keyframes teil{from{transform:scaleX(0)}to{transform:none}}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.75rem 0 0;padding:0}
.chips li{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .6rem;border-radius:999px;
  font-size:.8rem;font-weight:600;color:var(--ink-2);background:var(--sunken)}
.chips svg{width:.95rem;height:.95rem}

/* Annahme: der seltenste und schoenste Moment - hier darf es feiern.
   Haken zeichnet sich, ein Ring laeuft einmal nach aussen, dann der Satz gross. */
.dabei{display:flex;flex-direction:column;align-items:flex-start;margin:.4rem 0 1.4rem}
.dabei-zeichen{position:relative;width:3.6rem;height:3.6rem;margin-bottom:1rem}
.dabei-zeichen .haken-zeichen{width:100%;height:100%}
.strahl{position:absolute;inset:0;border-radius:50%;border:2px solid var(--gruen);opacity:0;
  animation:strahl 1.1s var(--aus) .7s both}
@keyframes strahl{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(2.4)}}
.dabei-titel{margin:0;font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(3.2rem,16vw,4.6rem);line-height:.92;letter-spacing:-.01em}
.dabei-titel span{color:var(--tint)}
.dabei-t{margin:.9rem 0 0;font-size:1.05rem;font-weight:600;line-height:1.35;max-width:22rem}
.leise-mitte{text-align:center;color:var(--ink-3);margin:1rem 0 0}
@media (prefers-reduced-motion:reduce){
  .sk-teil{animation:none}
  .strahl{display:none}
}
.leise-mitte a{color:var(--tint)}

/* CRO (Skill "cro", 05.10.2026): Aufwand direkt unter dem Knopf nennen. */
.cta-zeit{margin:.1rem 0 0;text-align:center;font-size:.85rem;font-weight:600;color:var(--ink-3)}

/* ---------- Kleine Uebergaenge (Skill "find-animation-opportunities", 05.10.2026) ----------
   Nur dort, wo sich heute etwas ohne Bruecke aendert. Alles unter 300 ms. */

/* 1. Auswahl-Segmente: die helle Pille gleitet zum gewaehlten Feld (Zustand
   sichtbar machen) statt zu springen. Feld i liegt um i x (eigene Breite + Luecke)
   rechts; die Luecke ist .25rem (kuenstler.css). */
.wahl{position:relative;isolation:isolate}
.wahl::before{content:"";position:absolute;z-index:-1;top:.25rem;bottom:.25rem;left:.25rem;
  width:calc((100% - 1rem) / 3);border-radius:9px;background:var(--raised);box-shadow:var(--e1);
  opacity:0;transition:transform .24s var(--aus),opacity .15s var(--aus)}
.wahl.zwei::before{width:calc((100% - .75rem) / 2)}
.wahl[data-i]::before{opacity:1}
.wahl[data-i="1"]::before{transform:translateX(calc(100% + .25rem))}
.wahl[data-i="2"]::before{transform:translateX(calc(200% + .5rem))}
.wahl [role=radio][aria-checked=true]{background:transparent;box-shadow:none}

/* 2. Was per hidden auftaucht (Release-Datum, Hinweis, Rueckfrage, Datei/Link),
   blendet ein statt aufzuspringen. display:none -> sichtbar startet die Animation. */
#q-datei:not([hidden]),#q-link:not([hidden]){animation:ein-fade .22s var(--aus) both}

/* 3. Fehler wackeln kurz (wie ein falsches Passwort am iPhone): Feedback, dass
   der Knopf gehoert hat, aber etwas fehlt. 4 px, 280 ms. */
.msg.schlecht{animation:wackeln .28s var(--aus)}
@keyframes wackeln{0%,100%{transform:none}25%{transform:translateX(-4px)}60%{transform:translateX(3px)}}

/* 4. "Link kopieren": der Knopf wird kurz zur Bestaetigung. */
button.erledigt{background:var(--gruen-bg);color:var(--gruen);transition:background-color .18s var(--aus),color .18s var(--aus)}
button.haupt.erledigt{background:var(--gruen);color:#fff}

/* ---------- Gut zu wissen (Drae, 05.10.2026) ---------- */
.faq{list-style:none;margin:0;padding:.4rem 1.1rem;display:grid}
.faq li{padding:0}
.faq li + li{border-top:1px solid var(--sep)}
.faq-icon{display:grid;place-items:center;flex:0 0 auto;width:2.3rem;height:2.3rem;border-radius:12px;background:var(--tint-bg);color:var(--tint)}
.faq-icon svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.faq b{flex:1;min-width:0;font-size:.98rem;line-height:1.25}
.faq a{color:var(--tint);font-weight:600}
.ansicht:has(>.hero)>#gut-zu-wissen{margin-top:1.8rem}

@media (prefers-reduced-motion:reduce){
  .wahl::before{transition:opacity .15s}
  .msg.schlecht{animation:none}
}

/* Spotify-Link bei "Schon draussen" (Migration 35): erkannt = gruen. */
#s-relspotify{margin-top:.2rem}
.feld-hinweis.gut{color:var(--gruen);font-weight:600}


/* ---------- Link sichern: eigener Schritt nach dem Abschicken (Drae, 05.10.2026) ----------
   Seltener, wichtiger Moment: das Lesezeichen faellt einmal sanft ein. */
.sichern{margin:.4rem 0 1.2rem}
.sichern-ok{margin:0 0 1rem;font-size:.9rem;font-weight:700;color:var(--gruen)}
.sichern-zeichen{display:grid;place-items:center;width:3.6rem;height:3.6rem;margin-bottom:1rem;border-radius:18px;
  background:var(--tint);color:var(--on-tint)}
.sichern-zeichen svg{width:1.8rem;height:1.8rem;fill:currentColor}
.stag > .sichern-zeichen{animation:einfallen .6s cubic-bezier(.34,1.56,.64,1) .1s both}
@keyframes einfallen{from{opacity:0;transform:translateY(-14px) scale(.9)}to{opacity:1;transform:none}}
.sichern-titel{margin:0;font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2.6rem,13vw,3.6rem);line-height:.95;letter-spacing:-.005em}
.sichern-t{margin:.8rem 0 0;font-size:1.02rem;font-weight:600;line-height:1.35;color:var(--ink-2);max-width:24rem}
.sichern-url{margin:0;padding:.7rem .8rem;border-radius:10px;background:var(--sunken);font-size:.82rem;line-height:1.35;
  color:var(--ink-2);word-break:break-all;user-select:all;-webkit-user-select:all;font-variant-numeric:tabular-nums}
.sichern-weiter{margin-top:1.2rem}
.sichern-weiter:disabled{opacity:.55}
@media (prefers-reduced-motion:reduce){.stag > .sichern-zeichen{animation:rein-ruhig .3s both}}

/* ---------- Codex-Vorschlaege, Runde 2 (05.10.2026) ---------- */
/* FAQ: nur die Kernsaetze, Antippen klappt den Satz darunter auf (Vorschlag 8). */
/* Ladezustand am Knopf (Vorschlag 5): ein gelber Strich laeuft unten durch. */
button.laeuft{position:relative;overflow:hidden}
button.laeuft::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tint);
  transform-origin:left center;animation:laden 1.1s var(--aus) infinite}
@keyframes laden{from{transform:scaleX(0);opacity:1}to{transform:scaleX(1);opacity:.2}}
/* Fehler am Feld (Vorschlag 13). */
.feld-fehler{outline:2px solid var(--rot)!important;outline-offset:1px}
input[type=checkbox].feld-fehler{outline-offset:3px;border-radius:4px}
/* Schnellwahl der Laenge (Vorschlag 22). */
.rg-schnell{display:flex;gap:.35rem;margin:.35rem 0 .1rem}
.rg-schnell button{border:0;border-radius:999px;padding:.35rem .75rem;min-height:36px;font:inherit;font-size:.82rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink-2);background:var(--raised);cursor:pointer;transition:transform .14s var(--aus)}
.rg-schnell button:active{transform:scale(.95)}
/* Fenster direkt ziehen (Vorschlag 21): die Spur gehoert dem Finger, nicht dem Scrollen. */
.rg-spur{touch-action:none;cursor:grab}
.rg-spur.zieht{cursor:grabbing}
.rg-spur.zieht .rg-fenster{box-shadow:0 0 0 2px var(--tint),0 4px 14px rgba(0,0,0,.3)}
.geraet{margin:.6rem 0 0;color:var(--gruen)}
/* Karten: feine Kontur zusaetzlich zum Schatten, im Hellen besser abgegrenzt (Vorschlag 36). */
.karte{box-shadow:var(--e1),0 0 0 1px var(--sep)}
@media (prefers-reduced-motion:reduce){
  .rg-schnell button{transition:none}
  button.laeuft::after{animation:none;transform:none;opacity:.6}
}

/* ---------- Ausschnitt kompakt (Drae, 05.10.2026: "schoener, kompakter, effizienter") ----------
   Eine Karte: Zeit gross, Spur als Hauptbedienung, eine Zeile Laenge, Tippen klappt auf. */
.regler{padding:.85rem .85rem .7rem}
.rg-anzeige{margin:0 0 .55rem;justify-content:center;gap:.5rem}
.rg-anzeige b{font-size:2rem}
.rg-strich{font-size:1.4rem;color:var(--ink-3)}
.rg-spur{height:2.8rem;border-radius:10px}
.rg-tipp{position:absolute;inset:0;display:grid;place-items:center;font-size:.78rem;font-weight:700;color:var(--ink-2);
  pointer-events:none;transition:opacity .2s var(--aus)}
.regler.gesetzt .rg-tipp{opacity:0}
.rg-laenge{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-top:.6rem}
.rg-laenge button{white-space:nowrap;overflow-wrap:normal}
.rg-schnell button{padding:.35rem .65rem}
.rg-laenge .rg-label{margin:0 auto 0 0;font-size:.85rem;font-weight:700;color:var(--ink)}
.rg-schnell{margin:0}
.rg-schnell button[aria-pressed="true"]{background:var(--tint);color:var(--on-tint)}
.rg-stufe{display:flex;align-items:center;gap:.15rem;padding:.15rem;border-radius:999px;background:var(--raised)}
.rg-stufe button{width:2rem;height:2rem;border:0;border-radius:50%;background:transparent;color:var(--ink);font:inherit;font-size:1.1rem;font-weight:700;cursor:pointer;
  transition:transform .12s var(--aus),background-color .12s var(--aus)}
.rg-stufe button:active{transform:scale(.9);background:var(--sunken)}
.rg-stufe b{min-width:2.6rem;text-align:center;font-size:.85rem;font-variant-numeric:tabular-nums}
.regler .laenge{margin:.55rem .1rem 0;font-size:.85rem}
/* Die beiden grossen Zeiten sind selbst Eingabefelder: antippen, tippen (65 oder 1:05). */
.rg-zeit{width:4.6ch;padding:0 0 .1rem;border:0;border-bottom:2px dashed var(--sep-2);border-radius:0;background:transparent;
  color:var(--ink);font-family:Anton,Impact,sans-serif;font-weight:400;font-size:2rem;line-height:1.1;text-align:center;
  font-variant-numeric:tabular-nums;transition:border-color .15s var(--aus)}
.rg-zeit::placeholder{color:var(--ink-3);opacity:1}
.rg-zeit:focus{outline:none;border-bottom:2px solid var(--tint)}
.rg-zeit:focus-visible{outline:none}
/* Griffe an beiden Raendern: sichtbar ein schmaler Strich, gepackt wird per Abstand (JS). */
.rg-griff{position:absolute;top:50%;width:5px;height:58%;border-radius:3px;background:var(--on-tint);
  opacity:.9;transform:translateY(-50%);pointer-events:none;transition:transform .15s var(--aus)}
.rg-griff.links{left:4px}
.rg-griff.rechts{right:4px}
.regler:not(.gesetzt) .rg-griff{opacity:0}
.rg-spur[data-modus="links"] .rg-griff.links,.rg-spur[data-modus="rechts"] .rg-griff.rechts{transform:translateY(-50%) scaleY(1.25)}
.rg-spur[data-modus="links"],.rg-spur[data-modus="rechts"]{cursor:ew-resize}
/* Anschlag (36 s, 66 s, 0:00, Songende): der Rahmen zuckt kurz rot. */
.rg-fenster.anschlag{animation:anschlag .38s var(--aus)}
@keyframes anschlag{0%,100%{box-shadow:0 0 0 2px var(--tint)}30%{box-shadow:0 0 0 3px var(--rot)}}
/* Die Regler sind unsichtbar, aber per Tastatur bedienbar: ihr Fokus zeigt sich an der Spur bzw. Laengenzeile. */
.regler:has(#s-start:focus-visible) .rg-spur,.regler:has(#s-dauer:focus-visible) .rg-stufe{outline:3px solid var(--tint);outline-offset:2px}
/* FAQ: eigener Knopf statt <details>, damit das Aufklappen gleiten kann. */
.faq-kopf{display:flex;align-items:center;gap:.85rem;width:100%;padding:.75rem 0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.faq-kopf::after{content:"";flex:0 0 auto;width:.5rem;height:.5rem;margin-right:.2rem;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.faq-kopf[aria-expanded="true"]::after{transform:rotate(-135deg)}
.faq-text > span{display:block;margin:-.35rem 0 .8rem 3.15rem;font-size:.88rem;line-height:1.35;color:var(--ink-2)}
.faq-text a{color:var(--tint);font-weight:600}
@media (prefers-reduced-motion:reduce){.rg-tipp,.rg-stufe button,.faq-kopf::after,.rg-zeit,.rg-griff{transition:none}.rg-fenster.anschlag{animation:none;box-shadow:0 0 0 3px var(--rot)}}
/* Daumen-Flaechen mind. 44 px (Codex-Vorschlag 6, 05.10.2026). Sichtbar bleibt alles
   so kompakt wie bisher; nur die unsichtbare Tippflaeche ragt ueber den Rand. */
.rg-schnell button,.rg-stufe button{position:relative}
.rg-schnell button::after{content:"";position:absolute;inset:-4px -2px}
.rg-stufe button::after{content:"";position:absolute;inset:-6px}
.rg-zeit{min-height:44px}
/* Ein Fokusring fuer alles, in jedem Browser gleich (Codex-Vorschlag 37): der
   Standardring verschwindet sonst auf dem gelben Knopf. Nur bei Tastatur, nicht beim Tippen. */
button:focus-visible,a:focus-visible,input:not(.rg-zeit):not(.rg-regler):focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--tint);outline-offset:2px}
.haupt:focus-visible{outline-color:var(--ink)}
/* Kopfzeile "In Der Lobby" fuehrt zur Startseite (?start), sieht aber aus wie vorher. */
.brand a{color:inherit;text-decoration:none}
.brand a:focus-visible{outline:3px solid var(--tint);outline-offset:3px;border-radius:4px}
/* Startseite mit gemerkter Bewerbung: der Weg zurueck dorthin. */
.zu-meiner{font-weight:700;color:var(--tint)}
.ansicht>.hero .mehr.zu-meiner{display:block}