/* ==================================================================
   LUSTVIERTEL — CRAV-SCHICHT

   Geliehen von cravburgers.shop. Was diese Seite gut macht, habe ich
   an den berechneten Stilwerten abgelesen, nicht geraten:

     Schrift   Mouse Memoirs traegt fast alles (148 Elemente), Modak
               steht als fette Blase daneben (30). Zwei Google-Fonts,
               beide hier lokal eingebunden — kein Google-Request.
     Groesse   H1 309 px, H2 155 px. Das ist keine Ueberschrift mehr,
               das ist ein Plakat.
     Zeile     Durchschuss 0,75–0,8. Enger als die Versalhoehe. Genau
               daher kommt der Block-Eindruck.
     Farbe     Rot #f91814 auf Creme #f5e3cd, Text #1b1b1b, dazu
               Bernstein #f4a804, Gelb #ffd750, Gruen #60a905.
     Form      Vollrunde Pillen — 23 Elemente mit Radius "unendlich".
     Schatten  Praktisch keine. Flaeche und Kontur tragen.

   Uebertragen, nicht kopiert. Zwei Aenderungen sind Absicht:

   1. Rot bleibt #dd0000, das deutsche Fahnenrot, nicht CRAVs #f91814.
      Der Unterschied ist minimal, aber die Fahne ist die Marke.
   2. Gruen faellt raus. Schwarz-Rot-Gold plus Creme ist gesetzt; eine
      fuenfte Farbe wuerde die Fahne aufloesen.

   Laedt NACH den ulm-Dateien. Deren Aufraeumarbeit — Kugeln, Korn,
   Leuchten, Schimmer weg — bleibt bestehen und ist weiter richtig.
   Ueberschrieben wird nur, was Ulm streng gemacht hat und was hier
   laut sein soll: Schrift, Grundton, Rundung, Groesse.
   ================================================================== */

@font-face{
  font-family:"Mouse Memoirs";
  font-style:normal;font-weight:400;font-display:swap;
  src:url("/css/fonts/mouse-memoirs-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Modak";
  font-style:normal;font-weight:400;font-display:swap;
  src:url("/css/fonts/modak-latin-400-normal.woff2") format("woff2");
}

:root{
  /* CRAVs Creme, unveraendert uebernommen. Waermer als das Ulmer
     Papier und der Grund, auf dem Rot ueberhaupt erst knallt. */
  --pap:#f5e3cd !important;
  --pap-2:#efd9bd !important;
  --pap-3:#e6cba7 !important;
  --sw:#1b1b1b !important;      /* CRAVs Textschwarz, nicht reines Schwarz */
  --sw-2:#4a4038 !important;
  --rt:#dd0000 !important;      /* Fahnenrot statt CRAVs #f91814 */
  --gd:#ffce00 !important;
  --bern:#f4a804;               /* Bernstein — zweite Signalstufe */
  --gelb:#ffd750;               /* Gelbflaeche fuer Baender */

  --hair:#1b1b1b24 !important;
  --hair-2:#1b1b1b47 !important;

  --crav:"Mouse Memoirs","Anton SC",Haettenschweiler,sans-serif;
  --blase:"Modak","Mouse Memoirs",sans-serif;
}

/* ==================================================================
   1 — PLAKATSCHRIFT
   Mouse Memoirs ist eine schmale, leicht handgesetzte Grotesk. Sie
   vertraegt Groessen, bei denen jede normale Schrift auseinander
   faellt — und sie braucht sie auch, sonst wirkt sie beliebig.
   ================================================================== */
h1,h2,.hero-h1,.feat-h2,.cta-h2,.show-h2,.cl-ed-h,.ls-disp-line,
.cl-fr-frase,.cl-cita-frase,.lq-hook-text{
  font-family:var(--crav) !important;
  font-weight:400 !important;
  text-transform:uppercase !important;
  letter-spacing:.004em !important;
  color:var(--rt) !important;
}

/* Der Durchschuss ist der eigentliche Trick. 0,78 heisst: die
   Unterlaenge der ersten Zeile beruehrt die Versalhoehe der zweiten.
   Bei einer normalen Schrift ist das ein Fehler, bei einer schmalen
   Versalzeile wird daraus ein Block. */
h1,.hero-h1{
  font-size:clamp(4.2rem,15.5vw,17rem) !important;
  line-height:.78 !important;
}
h2,.feat-h2,.cta-h2,.show-h2,.cl-ed-h{
  font-size:clamp(2.6rem,7.4vw,8rem) !important;
  line-height:.8 !important;
}
.cl-fr-frase,.cl-cita-frase,.lq-hook-text{
  font-size:clamp(2.2rem,6vw,6.2rem) !important;
  line-height:.82 !important;
}

/* Zwischenzeilen bleiben lesbar gesetzt: die Plakatschrift ist fuer
   Schlagzeilen, nicht fuer Fliesstext. Darunter laeuft weiter die
   Grotesk, sonst wird die Seite unlesbar. */
h3,h4{font-family:var(--crav) !important;text-transform:uppercase !important;
  letter-spacing:.02em !important;font-size:1.34rem !important;
  font-weight:400 !important;color:var(--sw) !important;line-height:1.05 !important}

body,p,li,dd,.lede,.hero-lede,.feat-sub,.muted{
  font-family:"Inter Tight",Helvetica,Arial,sans-serif !important;
}
body{background-color:var(--pap) !important;color:var(--sw) !important}

/* Die Vorzeile in CRAVs Ton: gesperrt, klein, aber in der
   Plakatschrift statt in der Grotesk. */
.eyebrow,.cl-ed-ojo,.cl-fr-ojo,.rank-pill{
  font-family:var(--crav) !important;
  font-size:.98rem !important;
  letter-spacing:.2em !important;
  color:var(--rt) !important;
}

/* ==================================================================
   2 — MODAK, DIE BLASE
   Modak ist eine aufgeblasene Displayschrift. Auf CRAV traegt sie
   genau 30 Elemente — Zahlen, Marken, kurze Rufe. Mehr vertraegt sie
   auch nicht: als Fliesstext ist sie unlesbar. Hier bekommt sie die
   Ziffern, und nur die.
   ================================================================== */
.stat-num,.cl-esc-n,.step-n,.hd-n{
  font-family:var(--blase) !important;
  font-weight:400 !important;
  color:var(--rt) !important;
  letter-spacing:0 !important;
  line-height:1 !important;
}
.stat-num{font-size:clamp(3rem,6vw,5.4rem) !important}
.cl-esc-n{font-size:clamp(3rem,6.5vw,5.6rem) !important}
.hd-n{
  background:var(--rt) !important;color:var(--pap) !important;
  font-size:1.05rem !important;padding:1px 10px 3px !important;
}

/* ==================================================================
   3 — PILLEN
   Ulm hatte ueberall Radius 0. CRAV hat 23 vollrunde Elemente, und
   die Pille ist der halbe Charakter der Seite: sie nimmt der grossen
   Schrift die Haerte. Klassenselektoren schlagen Ulms `*`-Regel, das
   `!important` allein wuerde nicht reichen.
   ================================================================== */
.btn,.nav-cta,.nm-cta,.badge,.rank-pill,.pill,.lv-yes,.lv-no,
.ag-actions .btn,.go,.cl-esc-go,.cl-ed-link,.soon-badge{
  border-radius:999px !important;
}
.btn,.nav-cta,.nm-cta{
  background:var(--rt) !important;color:var(--pap) !important;
  font-family:var(--crav) !important;font-weight:400 !important;
  font-size:1.16rem !important;text-transform:uppercase !important;
  letter-spacing:.06em !important;
  padding:13px 30px 15px !important;border:0 !important;
}
.btn:hover,.nav-cta:hover,.nm-cta:hover{background:var(--sw) !important;color:var(--pap) !important}
.btn-ghost{
  background:transparent !important;color:var(--sw) !important;
  border:2px solid var(--sw) !important;
}
.btn-ghost:hover{background:var(--sw) !important;color:var(--pap) !important}

.go,.cl-esc-go,.cl-ed-link{
  font-family:var(--crav) !important;font-size:1.04rem !important;
  text-transform:uppercase !important;letter-spacing:.08em !important;
  border:2px solid var(--sw) !important;border-bottom-width:2px !important;
  padding:6px 18px 7px !important;color:var(--sw) !important;
}
.go:hover,.cl-esc-go:hover,.cl-ed-link:hover{
  background:var(--rt) !important;color:var(--pap) !important;border-color:var(--rt) !important;
}

.badge{
  font-family:var(--crav) !important;font-size:.94rem !important;
  letter-spacing:.08em !important;padding:4px 14px 5px !important;border:0 !important;
}
.badge.good{background:var(--gd) !important;color:var(--sw) !important}
.badge.warn{background:var(--rt) !important;color:var(--pap) !important}

/* Bilder und Karten bleiben eckig. Wenn alles rund ist, ist nichts
   mehr rund — CRAV haelt das genauso: Pille am Knopf, Kante am Bild. */
.card,.feat-card,.cat-card,.step-card,.hd-face,.cat-thumb,
.cl-ed-img,.cl-fr-foto,img{border-radius:0 !important}
.card,.feat-card,.cat-card,.step-card{
  background:var(--pap) !important;
  border:2px solid var(--sw) !important;
}
.card:hover,.feat-card:hover,.cat-card:hover{background:var(--pap-2) !important}

/* ==================================================================
   4 — FLAECHEN
   CRAV setzt ganze Baender in Gelb und Rot. Das ersetzt hier die
   Ulmer Haarlinien als Gliederung: die Seite wird in Bloecke
   geschnitten statt in Spalten geritzt.
   ================================================================== */
.marquee-sec{
  background:var(--gelb) !important;
  border-top:3px solid var(--sw) !important;
  border-bottom:3px solid var(--sw) !important;
}
.marquee-item{
  font-family:var(--crav) !important;font-size:1.7rem !important;
  text-transform:uppercase !important;letter-spacing:.04em !important;
  color:var(--sw) !important;
}
.mq-dot{color:var(--rt) !important}

.site-footer{background:var(--sw) !important;color:var(--pap) !important;border-top:0 !important}
.site-footer p,.site-footer .muted,.site-footer a{color:var(--pap) !important}
.site-footer a:hover{color:var(--gd) !important}
.site-footer .disclosure{
  background:#ffffff14 !important;border-left:6px solid var(--rt) !important;
  color:var(--pap) !important;
}

.stats{border-top:3px solid var(--sw) !important}
.disclosure{background:var(--gelb) !important;color:var(--sw) !important}

/* Das Fahnenband bleibt, aber dicker — es muss gegen die Plakat-
   schrift bestehen, sonst verschwindet es. */
.casa-cinta{height:10px !important;width:180px !important}

/* Haarlinien zwischen Sektionen werden zu Kanten. */
section + section{border-top:3px solid var(--sw) !important}
.cl-esc-row{border-top:2px solid var(--sw) !important}

/* ==================================================================
   5 — DAS RASTER GEHT AUS
   Die feine Spaltenlinie im Hintergrund war eine Ulmer Geste. Unter
   einer Plakatschrift auf Creme sieht sie nur noch schmutzig aus.
   ================================================================== */
body.lqx{background-image:none !important}

/* ==================================================================
   6 — NACHTRAG: DER RICHTIGE HEBEL

   Erster Versuch war falsch gebaut. Ich habe `h1,h2,…` neu gesetzt
   und mich gewundert, warum ueberall weiter Anton stand: die
   ulm-Dateien setzen die Schrift an rund einem Dutzend Stellen ueber
   spezifischere Selektoren (`.cl-edit .cl-ed-h`, `.hero-h1 .word`,
   Pseudoelemente der Zaehler). Gegen jede einzelne anzuschreiben
   waere ein Spezifitaetskrieg mit Ansage.

   Alle diese Regeln lesen aber dieselbe Variable: --disp. Also wird
   nicht die Regel getauscht, sondern der Wert. Ein Zeichen statt
   zwoelf Selektoren, und neue ulm-Regeln erben es automatisch mit.
   ================================================================== */
:root{
  --disp:var(--crav) !important;
  --anton:var(--crav) !important;
}

/* Die Wortspannen der H1 erben jetzt statt selbst zu setzen. */
.hero-sec .hero-h1.hero-mark .word,
.hero-h1 .word,.word{font-family:inherit !important}

/* Zaehler bleiben Modak — sie sind Ziffern, nicht Schlagzeile. */
.cl-esc-n::before,.hd-n::before,.step-n::before,
.cl-esc-n,.hd-n,.step-n,.stat-num{font-family:var(--blase) !important}
.cl-esc-n::before{font-size:clamp(3rem,6.5vw,5.6rem) !important;color:var(--rt) !important;line-height:.9 !important}
.hd-n::before{color:var(--pap) !important}

/* Rot fuer die grossen Zeilen. `html body` hebt die Spezifitaet ueber
   die ulm-Regeln, ohne jede davon einzeln nachzubauen.
   Ausgenommen: Text auf Foto (.cl-fr-frase) bleibt hell, sonst
   verschwindet er im Bild. Und der Fusszeilenblock bleibt creme. */
html body h1,html body h2,
html body .hero-h1,html body .feat-h2,
html body .cta-h2,html body .show-h2,
html body .cl-ed-h,html body .lq-hook-text{
  color:var(--rt) !important;
  font-family:var(--crav) !important;
  text-transform:uppercase !important;
  letter-spacing:.004em !important;
}
html body .hero-h1{line-height:.78 !important}
html body h2,html body .feat-h2,html body .cta-h2,
html body .show-h2,html body .cl-ed-h{line-height:.8 !important}
html body .site-footer h2,html body .site-footer h3{color:var(--pap) !important}
html body h3,html body h4{color:var(--sw) !important;font-family:var(--crav) !important}

/* Die Wortspannen und Kursivteile in Ueberschriften setzen eigene
   Farben. Sie sollen die Zeile erben, nicht gegen sie arbeiten. */
html body .hero-h1 .word,
html body .hero-h1 .line,
html body h1 .word,html body h2 .word,
html body .cl-ed-h em,html body .cl-ed-h .serif,
html body .feat-h2 .serif,html body h2 .serif,
html body .cta-h2 .serif{
  color:inherit !important;
  font-family:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}

/* ==================================================================
   7 — DIE H1 IST ROT

   Gemessen statt geraten: ulm-hero.css setzt die Farbe ueber
   `.hero-sec .hero-h1.hero-mark` — Spezifitaet (0,3,1). Mein
   `html body .hero-h1` liegt bei (0,1,2) und verliert, `!important`
   hin oder her. Also wird derselbe Selektor benutzt, nicht ein
   laengerer erfunden.

   Rot ist hier richtig, weil es bei CRAV die Kopfzeile traegt: eine
   rote Versalwand auf Creme. Schwarz waere ruhiger und langweiliger.
   ================================================================== */
.hero-sec .hero-h1.hero-mark,
.hero-sec .hero-h1.hero-mark .word,
.hero-sec .hero-h1.hero-mark .line{
  color:var(--rt) !important;
  -webkit-text-fill-color:var(--rt) !important;
}

/* Modak ist eine Blase: unter etwa 2 rem verschmieren die Ziffern zu
   einem Klecks. Die kleinen Chips im Deckband bekommen deshalb die
   Plakatschrift, Modak bleibt den grossen Zahlen vorbehalten. */
.hd-n,.hd-n::before{
  font-family:var(--crav) !important;
  font-size:1.32rem !important;
  letter-spacing:.04em !important;
  padding-bottom:1px !important;
}

/* ==================================================================
   8 — MODAK BRAUCHT LUFT

   Die Ziffern liefen ineinander: "02" wurde ein Klecks. Modak ist
   extrem breit laufend und hat praktisch keine Seitenraender — mit
   `letter-spacing:0` beruehren sich Null und Zwei. Bei einer normalen
   Schrift faellt das nicht auf, hier sofort.

   Also Sperrung rein, Grad etwas runter, und die Zahlenspalte breit
   genug, dass zwei Modak-Ziffern nebeneinander passen.
   ================================================================== */
.cl-esc-n,.cl-esc-n::before,
.stat-num,.step-n,.step-n::before{
  letter-spacing:.07em !important;
  font-variant-numeric:normal !important;
}
.cl-esc-n::before,.cl-esc-n{
  font-size:clamp(2.2rem,4.4vw,3.9rem) !important;
  line-height:1.02 !important;
  display:block !important;
  min-width:2.6em;
}
.stat-num{font-size:clamp(2.4rem,4.6vw,4.2rem) !important}

@media(min-width:1000px){
  /* Zahlenspalte von 112 px auf 150 px: zwei Modak-Ziffern brauchen
     schlicht mehr Platz als zwei Anton-Ziffern. */
  #escenarios.wrap{grid-template-columns:150px minmax(0,1fr) !important}
}

/* ==================================================================
   9 — DER NAME NIMMT DIE GANZE BREITE

   ulm-hero.css hatte den Titelblock auf acht von zwoelf Spalten
   gesetzt und die vier rechten bewusst leer gelassen — mit Haarlinie
   in der Rinne als Ansage „hier hoert der Satz auf". Das ist eine
   saubere Ulmer Setzung, aber sie liest sich auf einem breiten Schirm
   trotzdem als unfertig. Und sie passt nicht mehr: CRAVs Prinzip ist
   nicht die gesetzte Leere, sondern die volle Wand aus Schrift.

   Also andersherum. Der Name laeuft als EINE Zeile ueber die gesamte
   Satzbreite, randlos von Kante zu Kante. Kein Umbruch, keine leere
   Zone, keine Haarlinie.

   Der Grad kommt aus einer Messung, nicht aus dem Gefuehl: bei
   Mouse Memoirs ist "LUSTVIERTEL" (11 Zeichen) rund 4,63-mal so
   breit wie hoch. Satzbreite / 4,63 = Schriftgrad. In vw gerechnet
   und oben gedeckelt, damit die Zeile ab 1240 px nicht ueber den
   Satzspiegel hinauswaechst.
   ================================================================== */
@media (min-width:901px){
  /* Titel und Lede spannen wieder ueber alle zwoelf Spalten. */
  .hero-wrap.hero-split > .hero-col{grid-column:1 / -1 !important}
  /* Die Haarlinie der leeren Zone hat keine Aufgabe mehr. */
  .hero-wrap.hero-split::after{content:none !important;display:none !important}
}
@media (min-width:1200px){
  .hero-wrap.hero-split > .hero-col{grid-column:1 / -1 !important}
}

.hero-sec .hero-h1.hero-mark{
  font-size:min(20.6vw,268px) !important;
  line-height:.86 !important;
  letter-spacing:-.014em !important;
  white-space:nowrap !important;
  text-align:center !important;
  margin:0 0 clamp(14px,1.6vw,24px) !important;
  max-width:none !important;
}
/* Beide Woerter zurueck in eine Zeile — der gestapelte Block war die
   Loesung fuer acht Spalten, nicht fuer zwoelf. */
.hero-sec .hero-h1.hero-mark .line{display:block !important;white-space:nowrap !important}
.hero-sec .hero-h1.hero-mark .word{display:inline !important}

/* Darunter bleibt alles fluchtlinks: eine zentrierte Wortwand mit
   zentriertem Fliesstext darunter waere Hochzeitseinladung. */
.hero-wrap.hero-split .hero-lede{text-align:left !important}
.hero-wrap.hero-split .hero-cta{justify-content:flex-start !important}

/* Am Telefon passt die Zeile nicht in eine Breite. Dort darf sie
   wieder stapeln, sonst wird der Grad unlesbar klein. */
@media (max-width:900px){
  .hero-sec .hero-h1.hero-mark{
    white-space:normal !important;
    text-align:left !important;
    font-size:clamp(56px,15.5vw,120px) !important;
  }
  .hero-sec .hero-h1.hero-mark .word{display:block !important}
}

/* ==================================================================
   10 — GRAD AUS DER MESSUNG, NICHT AUS DEM GEFUEHl

   Mein geschaetztes Breiten-zu-Hoehen-Verhaeltnis (4,63) war falsch.
   Im Browser gemessen liegt "LUSTVIERTEL" in Mouse Memoirs inklusive
   der Sperrung bei genau 3,156 — die Zeile fuellte also nur 71 % der
   Satzbreite, und rechts blieb wieder Luft. Genau das Problem, das
   hier weg sollte.

   Das Verhaeltnis ist groessenunabhaengig (in em gerechnete Sperrung
   skaliert mit), deshalb reicht eine Division:

       Schriftgrad = Satzbreite / 3,17

   Satzbreite = min(Sichtbreite, 1240) minus 2 × 24 px Rinne. Der
   Deckel bei 376 px greift ab 1240 px Sichtbreite, ab da waechst der
   Satzspiegel nicht mehr mit.

   Teiler 3,17 statt 3,156: knapp ein Prozent Luft, damit die Zeile
   bei anderer Schriftsynthese nicht doch umbricht.
   ================================================================== */
.hero-sec .hero-h1.hero-mark{
  font-size:min(calc((100vw - 48px) / 3.17),376px) !important;
  line-height:.85 !important;
}
@media (max-width:900px){
  .hero-sec .hero-h1.hero-mark{font-size:clamp(56px,15.5vw,120px) !important}
}