/* =========================================================================
   verk.studio — "Neunzig Sekunden"
   Eine Seite, die wie ein Reel funktioniert: eine Szene, eine Handlung.
   Der Besucher baut in sechs Entscheidungen seine eigene Startseite.

   Palette aus der Werkstatt: Gusseisen, kühles Papier, Signalgelb.
   Für dieses Format ins Dunkle gezogen — die Bühne muss zurücktreten,
   damit jeweils genau eine Sache leuchtet.
   ========================================================================= */
@import url('schrift.css');

/* ---- Tokens --------------------------------------------------------------- */
:root{
  --buehne:#0D1211;        /* Bühne, fast schwarz mit dem Grünstich des Gusseisens */
  --buehne-2:#151E1C;      /* abgesetzte Fläche */
  --gusseisen:#1E2A28;
  --papier:#F0F1EC;        /* kühles Papier, bewusst kein warmes Creme */
  --papier-leise:#9AA5A2;
  --signal:#F2C300;        /* Zollstockgelb — die Marke */
  --linie:rgba(240,241,236,.16);
  --linie-stark:rgba(240,241,236,.38);

  /* Die Farbe, die der Besucher wählt. Startwert = Marke.
     --kunde  faerbt FLAECHEN, --kunde-hell ist die SCHRIFT auf der Buehne.
     Getrennt, weil Ziegel und Kobalt als Schrift auf Fastschwarz nur
     3,88 bzw. 3,49:1 tragen — zu wenig fuer die kleinen Schilder. */
  --kunde:#F2C300;
  --kunde-hell:#F2C300;
  --kunde-tinte:#0D1211;   /* lesbare Schrift auf --kunde */

  --display:'Familjen Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Martian Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --rand:clamp(1.25rem,5vw,4rem);
  --takt:.55s;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--buehne);color:var(--papier);
  font-family:var(--display);font-size:clamp(1rem,.95rem + .3vw,1.12rem);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input{font:inherit;color:inherit;}
h1,h2,h3,p{margin:0;}
h1,h2,h3{font-weight:600;line-height:1.02;letter-spacing:-.03em;text-wrap:balance;}

/* Während des Ablaufs steht die Seite still — kein Wegscrollen aus der Szene */
body.laeuft{overflow:hidden;height:100dvh;}

/* ---- Fortschritt: die Zeigarnik-Leiste ------------------------------------ */
.fortschritt{
  position:fixed;inset:0 0 auto 0;z-index:80;
  display:flex;gap:4px;padding:14px var(--rand) 0;
  pointer-events:none;
}
.fortschritt span{
  flex:1 1 0;height:3px;background:var(--linie);border-radius:2px;overflow:hidden;
}
.fortschritt span::after{
  content:"";display:block;height:100%;width:0;background:var(--kunde-hell);
  transition:width var(--takt) ease;
}
.fortschritt span.voll::after{width:100%;}

/* Markenzeile oben rechts, immer sichtbar */
.marke{
  position:fixed;top:30px;right:var(--rand);z-index:80;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--papier-leise);
  text-decoration:none;
}
.marke b{color:var(--papier);font-weight:600;}

/* ---- Bühne und Szenen ----------------------------------------------------- */
.buehne{position:relative;}
.szene{
  position:fixed;inset:0;z-index:10;display:none;
  padding:clamp(4.5rem,10vh,7rem) var(--rand) clamp(3rem,8vh,5rem);
  overflow-y:auto;
}
/* Eine Spalte ueber die volle Breite, senkrecht mittig. Mit place-content:center
   bemaesse sich die Spalte am Inhalt — die gebaute Vorschau fiele auf ~310px
   zusammen, weil sie keine breite Eigenbreite hat. */
.szene.aktiv{
  display:grid;grid-template-columns:minmax(0,1fr);align-content:center;
}
.szene-innen{width:100%;max-width:56rem;margin-inline:auto;}

/* Szenenwechsel: nur eine Ebene bewegt sich, nie der ganze Text einzeln */
.szene.aktiv .szene-innen{animation:auftritt .5s cubic-bezier(.22,.7,.3,1) both;}
@keyframes auftritt{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:none;}
}

/* ---- Wiederkehrende Bausteine --------------------------------------------- */
.schild{
  display:flex;align-items:center;gap:.7rem;margin-bottom:1.5rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--kunde-hell);
}
.schild::before{content:"";width:1.6rem;height:2px;background:currentColor;}

.frage{font-size:clamp(2.1rem,1.3rem + 3.9vw,4.4rem);margin-bottom:1.1rem;}
.frage em{font-style:normal;color:var(--kunde-hell);}
.dazu{color:var(--papier-leise);max-width:44ch;font-size:clamp(1rem,.95rem + .35vw,1.18rem);}

.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--mono);font-weight:600;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;
  padding:1.1rem 2.1rem;border:2px solid var(--kunde);
  background:var(--kunde);color:var(--kunde-tinte);
  border-radius:2px;
}
.knopf:hover,.knopf:focus-visible{background:transparent;color:var(--kunde-hell);border-color:var(--kunde-hell);}
.knopf[disabled]{opacity:.35;cursor:not-allowed;}
.knopf[disabled]:hover{background:var(--kunde);color:var(--kunde-tinte);}
.knopf--leise{background:transparent;color:var(--papier);border-color:var(--linie-stark);}
.knopf--leise:hover,.knopf--leise:focus-visible{border-color:var(--papier);color:var(--papier);background:transparent;}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.6rem;}

/* ---- Szene 0: der erste Tipp ---------------------------------------------- */
#szene-0.aktiv{justify-items:center;align-content:center;}
#szene-0{text-align:center;cursor:pointer;}
.puls{
  width:clamp(88px,18vw,128px);aspect-ratio:1;border-radius:50%;
  border:2px solid var(--signal);display:grid;place-items:center;
  margin:0 auto 4.6rem;position:relative;   /* Platz fuer die auslaufenden Ringe */
}
.puls::before,.puls::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--signal);animation:welle 2.6s ease-out infinite;
}
.puls::after{animation-delay:1.3s;}
@keyframes welle{
  from{transform:scale(1);opacity:.7;}
  to{transform:scale(2.1);opacity:0;}
}
.puls span{
  width:14px;height:14px;border-radius:50%;background:var(--signal);
}
.tipp-text{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--papier-leise);}

/* ---- Szene 2: Branchenwahl ------------------------------------------------- */
.wahl{
  display:grid;gap:1px;background:var(--linie);
  border:1px solid var(--linie);margin-top:2.4rem;
  grid-template-columns:1fr;
}
@media (min-width:640px){.wahl{grid-template-columns:repeat(2,1fr);}}
.wahl button{
  background:var(--buehne);padding:1.6rem 1.5rem;text-align:left;
  display:flex;flex-direction:column;gap:.4rem;min-width:0;
}
.wahl button:hover,.wahl button:focus-visible{background:var(--buehne-2);}
.wahl b{font-size:1.28rem;font-weight:600;letter-spacing:-.02em;}
.wahl small{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--papier-leise);}

/* ---- Szene 3: Name eintippen ---------------------------------------------- */
.echo{
  font-size:clamp(2rem,1rem + 5.4vw,5rem);font-weight:600;letter-spacing:-.035em;
  line-height:1.02;min-height:1.1em;color:var(--kunde-hell);margin-bottom:1.6rem;
  overflow-wrap:anywhere;
}
.echo:empty::before{content:"…";color:var(--linie-stark);}
.eingabe{
  width:100%;background:transparent;border:0;border-bottom:2px solid var(--linie-stark);
  padding:.8rem 0;font-size:1.25rem;letter-spacing:-.01em;
}
.eingabe:focus{outline:none;border-bottom-color:var(--kunde-hell);}
.eingabe::placeholder{color:var(--papier-leise);opacity:.7;}

/* ---- Szene 4: Tonregler ---------------------------------------------------- */
.probe{
  border:1px solid var(--linie);padding:clamp(1.6rem,4vw,2.6rem);
  margin-top:2rem;background:var(--buehne-2);min-height:9.5rem;
  display:grid;align-content:center;
}
.probe-satz{font-weight:600;line-height:1.06;letter-spacing:-.03em;
  font-size:clamp(1.5rem,1rem + 2.4vw,2.6rem);}
.regler-reihe{display:flex;align-items:center;gap:1rem;margin-top:1.8rem;}
.regler-marke{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--papier-leise);flex:0 0 auto;}
input[type=range]{
  flex:1 1 auto;-webkit-appearance:none;appearance:none;
  background:transparent;height:34px;min-width:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:3px;background:var(--linie-stark);border-radius:2px;}
input[type=range]::-moz-range-track{
  height:3px;background:var(--linie-stark);border-radius:2px;}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--kunde);margin-top:-11.5px;border:0;cursor:grab;}
input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--kunde);
  border:0;cursor:grab;}
input[type=range]:focus-visible{outline:2px solid var(--kunde);outline-offset:4px;}

/* ---- Szene 5: Farbwahl ----------------------------------------------------- */
/* Die Beschriftung liegt UNTER dem Knopf, nicht darin — sonst erbt sie dessen
   Farbfläche und wäre auf ihr unlesbar. */
.farben{display:flex;flex-wrap:wrap;gap:1.6rem;margin:2.4rem 0 2rem;}
.farbfeld{display:inline-flex;flex-direction:column;align-items:center;gap:.75rem;}
.farbfeld button{
  width:clamp(72px,15vw,104px);aspect-ratio:1;border-radius:50%;
  border:3px solid transparent;display:block;
}
.farbfeld button:hover,.farbfeld button:focus-visible{border-color:var(--papier);}
.farbfeld > span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--papier-leise);white-space:nowrap;
}

/* ---- Szene 6: gedrückt halten ---------------------------------------------- */
.halten{
  width:clamp(150px,32vw,208px);aspect-ratio:1;border-radius:50%;
  margin:2.6rem auto 0;display:grid;place-items:center;position:relative;
  border:2px solid var(--linie-stark);touch-action:none;user-select:none;
}
.halten svg{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);
  transform:rotate(-90deg);}
.halten circle{fill:none;stroke:var(--kunde);stroke-width:3;
  stroke-linecap:round;transition:stroke-dashoffset .08s linear;}
.halten-text{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;text-align:center;line-height:1.7;padding:0 1rem;}

/* ---- Szene 7 + 8: die gebaute Seite ---------------------------------------- */
.werk{
  background:var(--papier);color:var(--gusseisen);
  border-radius:3px;overflow:hidden;margin-top:2rem;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.werk-teil{opacity:0;}                       /* GSAP blendet ein */
.werk.fertig .werk-teil{opacity:1;}          /* Endzustand ohne JS-Lauf */

.werk-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.2rem;border-bottom:1px solid rgba(30,42,40,.14);
}
.werk-marke{font-weight:700;font-size:.95rem;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%;}
.werk-menue{display:flex;gap:.9rem;}
.werk-menue i{display:block;width:34px;height:6px;border-radius:3px;
  background:rgba(30,42,40,.22);font-style:normal;}
.werk-punkt{width:10px;height:10px;border-radius:50%;background:var(--kunde);}

.werk-held{padding:clamp(1.6rem,4.5vw,2.8rem) 1.2rem;background:var(--kunde);
  color:var(--kunde-tinte);}
.werk-held h3{font-size:clamp(1.4rem,1rem + 2.4vw,2.5rem);letter-spacing:-.03em;
  line-height:1.02;margin-bottom:.5rem;overflow-wrap:anywhere;}
.werk-held p{font-size:.92rem;opacity:.92;max-width:38ch;}
.werk-knopf{display:inline-block;margin-top:1.1rem;background:var(--gusseisen);
  color:var(--papier);font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.6rem 1.1rem;border-radius:2px;}

.werk-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(30,42,40,.14);}
.werk-karte{background:var(--papier);padding:1.1rem .9rem;min-width:0;}
.werk-karte b{display:block;font-size:.82rem;margin-bottom:.4rem;letter-spacing:-.01em;}
.werk-karte i{display:block;height:5px;border-radius:3px;background:rgba(30,42,40,.16);
  margin-bottom:5px;font-style:normal;}
.werk-karte i:last-child{width:60%;}

.werk-text{padding:1.4rem 1.2rem;display:grid;gap:6px;}
.werk-text i{display:block;height:6px;border-radius:3px;background:rgba(30,42,40,.13);
  font-style:normal;}
.werk-text i:nth-child(2){width:92%;}
.werk-text i:nth-child(3){width:78%;}

.werk-fuss{background:var(--gusseisen);color:var(--papier);
  padding:.9rem 1.2rem;display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;}
.werk-fuss span:last-child{color:var(--papier-leise);}

.bau-schritt{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--kunde-hell);margin-top:1.4rem;min-height:1.4em;
}

/* ---- Szene 8: Abrechnung ---------------------------------------------------- */
.bilanz{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);
  grid-template-columns:1fr;margin-top:2.2rem;}
@media (min-width:620px){.bilanz{grid-template-columns:repeat(3,1fr);}}
.bilanz div{background:var(--buehne);padding:1.3rem 1.4rem;min-width:0;}
.bilanz dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--papier-leise);margin-bottom:.5rem;}
.bilanz dd{margin:0;font-size:1.5rem;font-weight:600;letter-spacing:-.025em;}
.bilanz dd small{display:block;font-size:.8rem;font-weight:400;
  color:var(--papier-leise);letter-spacing:0;margin-top:.25rem;}

.schluss-fuss{
  margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:baseline;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--papier-leise);
}
.schluss-fuss a{color:var(--papier-leise);text-decoration:none;
  border-bottom:1px solid var(--linie-stark);}
.schluss-fuss a:hover{color:var(--papier);}
.schluss-fuss .weg{margin-left:auto;}

/* ---- Kurzfassung: immer im Dokument, für Suchmaschinen und ohne JS --------- */
.kurzfassung{
  position:relative;z-index:5;max-width:44rem;margin-inline:auto;
  padding:clamp(3rem,9vh,6rem) var(--rand);
}
body.laeuft .kurzfassung{display:none;}
.kurzfassung h1{font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem);margin-bottom:1rem;}
.kurzfassung h2{font-size:1.25rem;margin:2.2rem 0 .6rem;}
.kurzfassung p{color:var(--papier-leise);margin-bottom:.9rem;}
.kurzfassung a{color:var(--papier);}
.kurzfassung ul{color:var(--papier-leise);padding-left:1.1rem;}
.kurzfassung li{margin-bottom:.35rem;}

/* ---- Rechtstexte ------------------------------------------------------------ */
.rechtsseite{max-width:44rem;margin-inline:auto;padding:clamp(3rem,8vh,5rem) var(--rand);}
.rechtsseite h1{font-size:clamp(1.9rem,1.5rem + 2vw,2.8rem);margin-bottom:1.6rem;}
.rechtsseite h2{font-size:1.1rem;margin:2.2rem 0 .6rem;color:var(--signal);}
.rechtsseite p{color:var(--papier-leise);margin-bottom:.9rem;}
.rechtsseite a{color:var(--papier);}
.zurueck{display:inline-flex;align-items:center;gap:.5em;margin-bottom:2.4rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--papier-leise);text-decoration:none;}
.zurueck:hover{color:var(--papier);}

/* ---- Zugänglichkeit --------------------------------------------------------- */
:focus-visible{outline:3px solid var(--kunde-hell);outline-offset:3px;}
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* Beim Tabben sichtbar werden - sonst springt der Fokus ins Nichts */
a.nur-vorlesen:focus{
  width:auto;height:auto;margin:0;clip:auto;overflow:visible;
  left:.75rem;top:.75rem;z-index:100;
  background:var(--signal);color:var(--buehne);
  padding:.7rem 1.1rem;border-radius:2px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .puls::before,.puls::after{display:none;}
}