/* ── MAGIC-EINSTIEG (05.09.2026) ────────────────────────────────────────
   Nutzt ausschliesslich die vorhandenen Tokens: --pink (CTA), --mint
   (Beweis), --navy (Text), --ink-2 (Sekundaertext), --radius, --ease,
   --line, --card-grad, --shadow-card. Keine neue Farbe, kein neuer Radius.
   Auf Unterseiten heissen dieselben Tokens --ws-* (body.ws26-sub) — dort
   sorgt der Alias-Block am Ende fuer die Zuordnung.                      */

/* Die Seite hatte bisher keine Eyebrow-Zeile — es gibt keine .eyebrow-Regel
   im Bestand (geprueft in index2026.php). Darum hier definiert, im
   vorhandenen System: Sekundaerfarbe, gesperrte Versalien, kleine Groesse. */
.eyebrow{
  margin:0 0 .7rem;
  font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2)}
body.ws26-sub .eyebrow{color:var(--ws-ink-2)}

/* Fortschrittsmeldung nur fuer Screenreader. */
.magic-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.magic{margin:1.4rem 0 0}
.magic-form{position:relative}

/* Auf /werbetext-generator steht die Komponente im normalen Textfluss —
   dort liegt die Buehne im selben Container, es gibt kein Hero-Grid. */
.magic-page{margin:1.8rem 0 2.4rem}
.magic-page .magic-form{max-width:62ch}

.magic-label{
  display:block;font-weight:600;font-size:1.02rem;
  color:var(--navy);margin:0 0 .55rem}

/* Das Eingabefeld ist der Hauptanker des Heros — es darf Gewicht haben. */
.magic-input{
  width:100%;box-sizing:border-box;
  min-height:118px;resize:vertical;
  padding:.95rem 1.05rem;
  font:inherit;font-size:1rem;line-height:1.55;
  color:var(--navy);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.magic-input::placeholder{color:var(--ink-2);opacity:.75}
.magic-input:hover{border-color:rgba(22,28,112,.18)}
.magic-input:focus{
  outline:none;
  border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(255,0,106,.14),var(--shadow-card)}

.magic-help{
  margin:.5rem 0 0;font-size:.88rem;color:var(--ink-2)}

.magic-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.4rem;
  margin:1.05rem 0 0}

.magic-submit .arr{transition:transform .18s var(--ease)}
.magic-submit:hover .arr{transform:translateX(3px)}
.magic-submit.is-busy{opacity:.65;pointer-events:none}

/* Zweiter Weg — bewusst leise. Ein primaerer Anker je Screen: der CTA.
   Darum normale Schriftstaerke und Sekundaerfarbe, kein Fettdruck. */
.magic-alt{
  font-size:.9rem;font-weight:400;color:var(--ink-2);
  text-decoration:none;border-bottom:1px solid transparent;
  transition:color .18s var(--ease),border-color .18s var(--ease)}
.magic-alt:hover{color:var(--navy);border-bottom-color:var(--line)}

.magic-trust{
  margin:.7rem 0 0;font-size:.85rem;color:var(--ink-2)}

/* ── Buehne ──────────────────────────────────────────────────────────────
   Liegt ausserhalb des Hero-Grids, damit die drei Karten die volle Breite
   bekommen. In der 44%-Heldenspalte wurden sie zu schmalen Textsaeulen,
   waehrend rechts daneben Flaeche leer blieb.

   🚨 .hero .wrap ist selbst ein zweispaltiges Grid (44fr/56fr). Ein
   zusaetzlicher .wrap INNERHALB des Heros erbt diese Regel und wird wieder
   zum Zweispalter — die Karten landeten erneut links. Darum ein eigener
   Container mit ausdruecklichem display:block.                           */
/* Spezifitaet muss `.hero .wrap` (0,2,0) erreichen — eine einzelne Klasse
   (0,1,0) wird ueberschrieben. Gemessen: display blieb grid mit
   "548.945px 698.664px", die Karten landeten in der linken Spalte.
   Darum .wrap.magic-outlet (0,2,0) statt !important. */
.wrap.magic-outlet{display:block;width:100%}
.magic-stage{margin:2.6rem 0 0;padding-top:2.2rem;border-top:1px solid var(--line-soft)}
.magic-stage[hidden]{display:none}

.magic-loading{
  display:flex;align-items:center;gap:.8rem;
  padding:1.15rem 1.25rem;
  background:var(--card-grad);
  border:1px solid var(--line);border-radius:var(--radius)}
.magic-loading-text{margin:0;color:var(--ink-2);font-size:.95rem}

.magic-spinner{
  flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--pink);
  animation:magic-spin .8s linear infinite}
@keyframes magic-spin{to{transform:rotate(360deg)}}

.magic-error{
  padding:1.05rem 1.2rem;
  background:var(--card-grad);
  border:1px solid var(--line);border-radius:var(--radius)}
.magic-error p{margin:0 0 .7rem;color:var(--navy)}

/* ── Was verstanden wurde ────────────────────────────────────────────── */
.magic-understood{
  padding:1.05rem 1.2rem;margin:0 0 1.6rem;
  max-width:64ch;                       /* sonst ein sehr langes Band */
  background:var(--card-grad);
  border:1px solid var(--line);border-radius:var(--radius)}
.magic-understood-h{
  margin:0 0 .55rem;font-size:.95rem;font-weight:600;color:var(--navy)}
.magic-understood-list{
  margin:0;padding:0 0 0 1.1rem;color:var(--ink-2);font-size:.93rem}
.magic-understood-list li{margin:.2rem 0}
.magic-missing{
  margin:.7rem 0 0;font-size:.86rem;color:var(--ink-2);
  padding-top:.6rem;border-top:1px solid var(--line-soft)}
.magic-change{
  margin:.75rem 0 0;padding:0;
  background:none;border:0;cursor:pointer;
  font:inherit;font-size:.88rem;font-weight:600;color:var(--pink);
  border-bottom:1px solid transparent;transition:border-color .18s var(--ease)}
.magic-change:hover{border-bottom-color:var(--pink)}

.magic-result-h{margin:0 0 .9rem}

/* ── Die drei Karten ─────────────────────────────────────────────────── */
.magic-cards{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:900px){.magic-cards{grid-template-columns:repeat(3,1fr)}}

/* Eine Kartensignatur, identisch zur uebrigen Seite. */
.magic-card{
  display:flex;flex-direction:column;
  padding:1.15rem 1.2rem;
  background:var(--card-grad);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  transition:box-shadow .22s var(--ease)}
.magic-card:hover{box-shadow:var(--shadow-card-hover)}

.magic-card-label{
  align-self:flex-start;
  padding:.2rem .7rem;margin:0 0 .6rem;
  font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mint-ink);background:rgba(45,210,141,.12);
  border-radius:999px}
.magic-card-concept{
  margin:0 0 .7rem;font-size:.88rem;color:var(--ink-2)}
.magic-card-script{
  margin:0 0 .8rem;font-size:.97rem;line-height:1.6;color:var(--navy)}
.magic-card-meta{
  margin:0 0 .9rem;font-size:.82rem;color:var(--ink-2);
  padding-top:.7rem;border-top:1px solid var(--line-soft)}

/* Der Player-Bereich sitzt in allen drei Karten auf derselben Achse —
   sonst rutscht er je nach Textlaenge unterschiedlich tief. */
.magic-card-player{margin:auto 0 .85rem;padding-top:.2rem;min-height:76px}
.magic-player-wait,.magic-player-error{
  margin:0 0 .6rem;font-size:.88rem;color:var(--ink-2)}
.magic-player-error{color:var(--navy)}

/* Der Moment, auf den alles hinauslaeuft. */
.magic-firstdone{
  margin:0 0 .55rem;font-size:.95rem;font-weight:600;color:var(--mint-ink)}

.magic-audio{width:100%;height:38px;display:block}

/* Buttons in der Karte: ganze Breite, EINE Zeile.
   Ohne nowrap brach "Im Spotstudio oeffnen" in der schmalen Karte auf drei
   Zeilen um und die Pille wurde zum Oval. */
.magic-card-actions{margin-top:auto;padding-top:.2rem}
.magic-card-actions .btn,
.magic-play-btn{
  width:100%;justify-content:center;text-align:center;
  white-space:nowrap;
  padding-left:1rem;padding-right:1rem;
  font-size:.9rem}

/* ── Mobil ───────────────────────────────────────────────────────────── */
@media(max-width:600px){
  .magic-input{min-height:104px;font-size:16px}  /* 16px verhindert iOS-Zoom */
  .magic-actions{gap:.7rem}
  .magic-actions .btn{width:100%;justify-content:center}
  .magic-alt{width:100%;text-align:center}
}

/* Bewegung nur, wo sie Zustand zeigt — und abschaltbar. */
@media(prefers-reduced-motion:reduce){
  .magic-spinner{animation-duration:2.4s}
  .magic-input,.magic-card,.magic-submit .arr,.magic-alt,.magic-change{
    transition:none}
}

/* ── Unterseiten: dieselben Tokens heissen dort --ws-* ───────────────── */
body.ws26-sub .magic-label,
body.ws26-sub .magic-input,
body.ws26-sub .magic-card-script{color:var(--ws-navy)}
body.ws26-sub .magic-help,
body.ws26-sub .magic-trust,
body.ws26-sub .magic-alt,
body.ws26-sub .magic-understood-list,
body.ws26-sub .magic-missing,
body.ws26-sub .magic-card-concept,
body.ws26-sub .magic-card-meta,
body.ws26-sub .magic-loading-text,
body.ws26-sub .magic-player-wait{color:var(--ws-ink-2)}
body.ws26-sub .magic-input,
body.ws26-sub .magic-card,
body.ws26-sub .magic-understood,
body.ws26-sub .magic-loading,
body.ws26-sub .magic-error{
  border-color:var(--ws-line);border-radius:var(--ws-radius)}
body.ws26-sub .magic-card,
body.ws26-sub .magic-understood,
body.ws26-sub .magic-loading,
body.ws26-sub .magic-error{background:var(--ws-card-grad)}
body.ws26-sub .magic-card{box-shadow:var(--ws-shadow-card)}
body.ws26-sub .magic-card:hover{box-shadow:var(--ws-shadow-card-hover)}
body.ws26-sub .magic-input:focus{border-color:var(--ws-pink)}
body.ws26-sub .magic-spinner{border-top-color:var(--ws-pink)}
body.ws26-sub .magic-change{color:var(--ws-pink)}
body.ws26-sub .magic-card-label{color:var(--ws-mint-ink);background:rgba(45,210,141,.12)}
body.ws26-sub .magic-firstdone{color:var(--ws-mint-ink)}