/* ============================================================
   probe.css: Technik-Probe der Berlin-Fassung (06.10.2026), liegt ueber basis.css. Handy zuerst.
   Akte: projekte/marvin-web/_konzept-berlin.md (Richtung C, Konturensatz Feld 4, Stationen Feld 10).
   Schriftgroessen nach Kanon §13 Regel 10: Lesetext bis 20 px, Ueberschriften ab 32 px, nichts dazwischen;
   funktionaler Text nie unter 12 px.
   Ohne JS und in der Ruhefassung: Dokument mit Standbildern, fester Konturensatz um das Standbild-Ei.
   Mit Buehne (html.szene-an): Standbilder weg, js/probe.js fuehrt den Konturensatz, js/szene.js zeichnet.
   ============================================================ */

:root{ --kopf-h:5.6rem;
  /* Regler-Werte (js/probe.js setzt sie aus dem Tuner, hier die Standardwerte, gleich wie dort) */
  --pointe-skala:1.15; --pointe-breite:100%; --fall-abstand:14vh }
html{scrollbar-gutter:stable}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* Kopf: fest, weicht nie aus; der Punkt der Wortmarke ist das erste Orange */
.kopf{position:fixed;inset:0 0 auto 0;z-index:10;height:var(--kopf-h);display:flex;align-items:center;justify-content:space-between;gap:1.6rem;padding:0 var(--gutter);background:rgba(245,241,232,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.kopf-marke{display:block;width:14rem;color:var(--teer)}
.kopf-marke .wm{width:100%}
.kopf-hinweis{color:var(--muted);font-size:1.2rem}

/* Buehne: eine Leinwand ueber allem, nur Dekor, faengt keine Klicks */
.buehne{position:fixed;inset:0;width:100%;height:100vh;pointer-events:none;z-index:5;display:none}
.szene-an .buehne{display:block}
.szene-an .standbild{visibility:hidden}

/* Schrift */
.gross{font-size:clamp(3.4rem,1.6rem + 4.6vw,8.8rem)}
.mittel{font-size:clamp(3.2rem,2rem + 2.6vw,5.6rem)}
.ort{color:var(--muted);margin-bottom:1.6rem}
h3{font-size:1.9rem;font-weight:750;line-height:1.3}

/* Station Zusagen (erster Inhalt nach den Wolken) */
.zusagen{padding:calc(var(--kopf-h) + 7.2rem) 0 7.2rem}
.zusagen-liste{display:grid;gap:3.2rem;margin-top:4.8rem}
.zusagen-liste p{margin-top:.8rem;max-width:44rem}
@media (min-width:900px){.zusagen-liste{grid-template-columns:repeat(3,1fr)}}

/* Station Taube: leerer Streifen, die Taube quert ihn, das Ei loest sich */
.taube{height:72vh;min-height:42rem;display:grid;place-items:center;overflow:hidden}
.taube-still{width:min(88vw,86rem);height:auto}
@media (min-width:768px){.taube{height:84vh}}

/* Station Fall: je Schwaeche ein Block, die Zeilen weichen dem Ei aus (Konturensatz). Standard 2 x 2 (Marvins Wahl
   06.10. nachts), wahlweise versetzt (html.schwaechen-versetzt: links, rechts, links, rechts, die Innenkante reicht
   ueber die Bahn des Ei).
   Luft zwischen den Bloecken = Fall-Laenge (--fall-abstand). Bloecke im Blocksatz: die Kante folgt dem Kreis um das
   Ei sauber (Konturensatz wie im Druck), die letzte Zeile bleibt links. */
.fall{padding:6.4rem 0 12rem}
/* die Ueberschrift laesst die Bahn des Ei frei (Handy: Ei am rechten Rand, Desktop: Ei in der Mitte) */
.fall > .wrap > h2{max-width:calc(100% - 9.5rem)}
@media (min-width:768px){.fall > .wrap > h2{max-width:46%}}
.satz{margin:4.8rem auto 0;display:grid;gap:var(--fall-abstand) 6.4rem}
@media (min-width:768px){
  .satz{grid-template-columns:1fr 1fr;max-width:84rem}
  /* versetzt: Bloecke um die Mitte, jeder reicht 9 rem ueber die Bahn des Ei, damit der Satz sichtbar um es herumlaeuft */
  .schwaechen-versetzt .satz{grid-template-columns:1fr;max-width:none;--sb:min(64rem,54%);--ueber:9rem}
  .schwaechen-versetzt .spalte{width:var(--sb);justify-self:start;margin-left:calc(50% + var(--ueber) - var(--sb))}
  .schwaechen-versetzt .spalte:nth-child(even){margin-left:calc(50% - var(--ueber))}
}
.spalte{display:flow-root;font-size:1.8rem;line-height:1.55;hyphens:auto;-webkit-hyphens:auto}
/* Blocksatz nur ab 768 px: in der schmalen Handyspalte reisst er Loecher zwischen die Woerter */
@media (min-width:768px){.spalte p{text-align:justify;text-align-last:left}}
.spalte h3{margin:0 0 .4rem;hyphens:manual;-webkit-hyphens:manual}
.problem{padding-top:2.4rem}
.spalte p{max-width:none}
.kontur-ab{float:right;width:0;height:0}
.kontur-form{float:right;clear:right;width:0;height:0}
/* fester Konturensatz ohne Buehne: das Standbild-Ei rechts in der ersten Spalte */
.spalte:first-child .kontur-form{width:15.5rem;height:18.6rem;margin:2.4rem -1.2rem 1.2rem 1.6rem;shape-outside:ellipse(50% 50%);shape-margin:1.2rem}
.ei-still{width:100%;height:auto}
.szene-an .ei-still{display:none}

/* Station Bruch: die Pointe steht links, das Ei bleibt an seinem Platz */
.bruch{padding:10rem 0 16rem}
/* Pointe: Groesse ueber --pointe-skala (Tuner, 0,5 bis 3), gedeckelt, damit das laengste Wort (WEBSITE, 6,0 em)
   immer in die Zeile passt; Hoechstbreite (--pointe-breite, Tuner) nie unter 6,3 em. Die Pointe darf hinter dem Ei
   stehen (Marvin 06.10.). Standard mittig (Marvins Wahl 06.10. nachts), wahlweise links (html.pointe-links). */
.pointe{font-size:min(calc(clamp(3.4rem,1.6rem + 4.6vw,8.8rem) * var(--pointe-skala)),calc((100vw - 2 * var(--gutter) - 2rem) / 6.2));max-width:max(var(--pointe-breite),6.3em)}
.pointe-beleg{margin-top:2.4rem;max-width:34rem;font-size:1.8rem}
.pointe,.pointe-beleg{text-align:center;margin-inline:auto}
.pointe-links .pointe,.pointe-links .pointe-beleg{text-align:left;margin-inline:0}

/* Station Punkt: die Wortmarke liegt da, ihr Punkt ist die leere Mulde, bis das Eigelb landet */
.punkt{padding:8rem 0 6rem;overflow-x:clip}
/* Die Wortmarke liegt gross und angeschnitten da, mittig auf dem Punkt (Punkt = 247 von 7460 Einheiten Breite,
   Mitte bei 62,77 %): am Handy 3 rem, am Desktop 6 rem gross, damit man die Landung sieht */
.punkt-marke{--w:calc(3rem / 0.03311);width:var(--w);max-width:none;margin-left:calc(50% - var(--w) * 0.6277);color:var(--teer)}
@media (min-width:768px){.punkt-marke{--w:calc(7rem / 0.03311)}}
.punkt .wm-gross{width:100%;--wm-punkt:var(--kreide-2)}
.punkt.gelandet .wm-gross,html:not(.szene-an) .punkt .wm-gross{--wm-punkt:var(--signal)}
.punkt-still{width:min(100%,64rem);height:auto;margin:4rem auto 0}
.szene-an .punkt-still{display:none}
.bei-mir{margin:0 0 6.4rem;display:grid;gap:2rem;max-width:72rem;font-size:1.8rem}
.bei-mir .mono{display:block;color:var(--teer);margin-bottom:.2rem}
@media (min-width:900px){.bei-mir{grid-template-columns:1fr 1fr;gap:2.4rem 4.8rem;max-width:none}}

/* Station Beleg: das Eigelb laeuft ueber die Kante in die Signal-Flaeche */
.tropfkante{display:block;width:100%;height:18vh;min-height:9rem;fill:var(--signal);overflow:visible}
.beleg-flaeche{background:var(--signal);color:var(--teer);padding:4.8rem 0 10rem;margin-top:-1px}
.werte{display:grid;grid-template-columns:repeat(2,1fr);gap:2.4rem;margin:4rem 0}
.werte b{display:block;font-family:var(--disp);font-weight:900;font-stretch:125%;font-size:clamp(4.8rem,3rem + 4vw,9.6rem);line-height:1}
.werte .mono{display:block;margin-top:.8rem}
.beleg p{max-width:62rem;font-size:1.8rem}
.beleg .klein{font-size:1.4rem;margin-top:1.6rem}
@media (min-width:900px){.werte{grid-template-columns:repeat(4,1fr)}}

.fuss{padding:4rem var(--gutter) 6rem;color:var(--muted)}
.fuss .mono{text-transform:none;letter-spacing:0;font-size:1.3rem}

/* Live-Tuner (nur mit ?tuner): Kernwerte der bewegten Teile */
.tuner{position:fixed;left:1.2rem;bottom:1.2rem;z-index:20;width:min(32rem,calc(100vw - 2.4rem));max-height:calc(100vh - 2.4rem);overflow:auto;background:var(--teer);color:var(--kreide);padding:1.2rem 1.4rem;font-family:var(--mono);font-size:1.2rem}
.tuner summary{cursor:pointer;color:var(--signal)}
.tuner form{display:grid;gap:.8rem;margin-top:.8rem}
.tuner label{display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;align-items:center}
.tuner input,.tuner select{grid-column:1 / -1;accent-color:var(--signal)}
.tuner select{font:inherit;background:var(--kreide);color:var(--teer);border:0;padding:.4rem}
.tuner button{background:var(--signal);color:var(--teer);border:0;padding:.6rem;font:inherit;cursor:pointer}