/* ==================================================================
   LUSTVIERTEL — ULM / HERO
   Laedt direkt nach ulm.css. ulm.css hat geraeumt; hier wird gebaut.

   Der geerbte Hero ist ein spanisches Plakat: Mittelachse, Name in
   der Mitte, darunter ein Faecher aus fuenf Torbogen. Alles sitzt
   auf einer Symmetrieachse, und Symmetrie ist genau das, was Ulm
   nicht macht. Ulm setzt asymmetrisch auf ein sichtbares Raster:
   der Satz sitzt links an der Rasterkante, rechts bleibt Leere, und
   die Leere ist kein Rest, sondern gesetzt.

   Drei Eingriffe tragen die Seite:

     1. Zwoelfspaltiges Raster im Hero. Der Titelblock haelt die
        linken sieben bis acht Spalten, der Rest bleibt leer und ist
        durch eine Haarlinie in der Rinne markiert. Erst die Linie
        macht aus dem freien Feld ein Bauteil statt eines Lochs.

     2. Die fuenf Karten werden ein Band: gleich breite Rechtecke,
        fugenlos aneinander, getrennt durch 1px Schwarz. Kein
        Bogen, keine Drehung, kein Anheben. Ein Leitsystem, kein
        Kartenfaecher.

     3. Harte Bauteile statt Zierde: die Fahne (Schwarz, Rot, Gold
        in exakten Dritteln) als Trennlinie unter dem Titelblock,
        und eine randlose schwarze Regel als unterer Abschluss des
        Hero.
   ================================================================== */

/* ==================================================================
   0 — NACHTRAG ZU ulm.css
   ulm.css raeumt mit `*{box-shadow:none !important}` und
   `*{text-shadow:none !important}` auf. Das ist Spezifitaet 0-0-0 —
   und casa.css setzt seine Schlagschatten mit Selektoren wie
   `.hero-sec .hero-h1.hero-mark .line`. Bei zwei !important gewinnt
   die hoehere Spezifitaet, also gewinnt casa.css. Der Fehldruck
   hinter dem Namen und der Goldrahmen um die Fotos stehen also
   trotz Abriss noch. Hier werden sie mit gleicher Waffe erschlagen.
   ================================================================== */
.hero-sec .hero-h1.hero-mark,
.hero-sec .hero-h1.hero-mark .line,
.hero-sec .hero-h1.hero-mark .word{
  text-shadow:none !important;
  color:var(--sw) !important;
  -webkit-text-fill-color:var(--sw) !important;
}
.hero-deck .hd-face,
.hero-deck .hd-card:hover .hd-face,
.hero-deck .hd-card:focus-visible .hd-face{
  box-shadow:none !important;
  filter:none !important;
}

/* ==================================================================
   1 — DIE FLAECHE
   Der Hero traegt keinen eigenen Grund. Papier von body, sonst
   nichts. Was ihn begrenzt, ist eine Linie — nicht ein Farbfeld.
   ================================================================== */
.hero-sec{
  position:relative;
  overflow:visible !important;
  isolation:auto;
  /* Die Navigationsleiste ist fixiert und nimmt --nav-h weg. Ohne den
     Zuschlag laeuft die Versalzeile der H1 dahinter und wird oben
     abgeschnitten — bei einer 180px-Zeile faellt das sofort auf. */
  padding-top:calc(var(--nav-h,64px) + clamp(38px,4.4vw,66px)) !important;
  /* Der Abstand nach unten liegt als Innenabstand hier und nicht als
     Aussenabstand am Hinweis. Sonst faellt der Aussenabstand des
     letzten Kindes aus der Sektion heraus (Margin Collapsing) und die
     schwarze Regel klebt am Etikett. */
  padding-bottom:clamp(22px,2.6vw,38px) !important;
}

/* Unter der schwarzen Regel setzt ulm.css noch die Haarlinie zwischen
   zwei Sektionen. Zwei Linien uebereinander sind eine Linie zu viel. */
.hero-sec + section{border-top:0 !important}

/* Der Strahlenkranz bleibt tot. ::after nehmen wir dagegen zurueck
   in Dienst: nicht mehr als Lichtschein, sondern als randlose
   schwarze Regel, die den Hero unten hart abschliesst. Sie laeuft
   ueber die volle Sektionsbreite, also ueber das Raster hinaus —
   das ist der Unterschied zwischen einer Linie, die etwas begrenzt,
   und einer Linie, die dekoriert. */
.hero-sec::before{display:none !important}
.hero-sec::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  left:0;right:0;bottom:0;
  top:auto;
  width:auto;height:3px;
  transform:none;
  background:var(--sw) !important;
  -webkit-mask-image:none;mask-image:none;
  pointer-events:none;
  z-index:1;
}

/* Der Satzspiegel des Hero ist derselbe wie ueberall. casa.css hat
   ihn auf 1290px aufgeblasen, damit der Faecher Platz hatte — den
   Faecher gibt es nicht mehr, also zurueck auf die Hausbreite. Nur
   wenn Hero und Sektionen dieselbe Kante haben, sieht man, dass ein
   Raster da ist. */
.hero-sec .hero-wrap{
  max-width:var(--maxw) !important;
  margin-inline:auto !important;
  padding-inline:var(--sp) !important;
  padding-top:0 !important;
  position:relative;z-index:2;
}

/* ==================================================================
   2 — RASTER DES HERO
   Zwoelf Spalten, Rinne 24. Der Titelblock nimmt acht Spalten, ab
   1200 nur noch sieben; das Band der fuenf Tueren nimmt alle zwoelf.
   Was rechts frei bleibt, ist die Komposition, nicht ein Versaeumnis.
   ================================================================== */
.hero-wrap.hero-split{
  display:block;
  text-align:left !important;
  gap:0;
}

@media (min-width:901px){
  .hero-wrap.hero-split{
    display:grid !important;
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--sp);
    row-gap:0;
    align-items:start;
  }
  .hero-wrap.hero-split > .hero-col{
    grid-column:1 / span 8;
    grid-row:1;
    min-width:0;width:auto;
    position:relative;z-index:2;
  }
  .hero-wrap.hero-split > .hero-deck{
    grid-column:1 / -1;
    grid-row:2;
  }
  /* Die Haarlinie in der Rinne vor der leeren Zone. Sie behauptet:
     hier hoert der Satz auf, und das ist Absicht. Ohne sie liest
     man rechts nur „da fehlt etwas". */
  .hero-wrap.hero-split::after{
    content:"";
    grid-column:9;grid-row:1;
    justify-self:start;align-self:stretch;
    width:1px;
    margin-left:calc(var(--sp) / -2);
    background:var(--hair-2);
  }
}

/* Ab 1200 wird die Leere breiter: der Satz gibt eine Spalte ab.
   Grosse Schirme vertragen mehr Nichts, nicht mehr Schrift. */
@media (min-width:1200px){
  .hero-wrap.hero-split > .hero-col{grid-column:1 / span 7}
  .hero-wrap.hero-split::after{grid-column:8}
}

/* ==================================================================
   3 — DER NAME
   Er sitzt hart an der linken Rasterkante und bricht in zwei
   Zeilen: LUST / VIERTEL. Der Umbruch ist keine Notloesung — ein
   gestapelter Wortblock ist eine Flaeche, eine einzelne lange Zeile
   ist nur ein Streifen. Das HTML liefert die beiden Woerter schon
   als eigene <span class="word">, wir machen daraus Bloecke.
   ================================================================== */
.hero-sec .hero-h1.hero-mark{
  font-size:clamp(54px,12.6vw,182px) !important;
  line-height:.84 !important;
  letter-spacing:-.03em !important;
  white-space:normal !important;
  text-align:left !important;
  margin:0 0 clamp(18px,1.9vw,28px) !important;
  padding:0;
  max-width:none;
}
.hero-sec .hero-h1.hero-mark .line{display:block}
/* Jedes Wort eine Zeile. Anton ist zwar eng, aber bei 182px passen
   LUST und VIERTEL nebeneinander in keine sieben Spalten. */
.hero-sec .hero-h1.hero-mark .word{
  display:block;
  opacity:1 !important;transform:none !important;
}

.hero-wrap.hero-split .hero-lede{
  text-align:left !important;
  margin:0 0 clamp(20px,2.2vw,30px) !important;
  max-width:44ch !important;
}

.hero-wrap.hero-split .hero-cta{
  display:flex;justify-content:flex-start !important;
  margin:0 !important;padding:0;
}

/* Die Fahne als Bauteil, nicht als Schleife. Drei exakte Drittel,
   harte Kanten, keine Rundung, kein Schatten — Aicher 1972. Sie
   liegt ueber die ganze Breite des Titelblocks und ist damit die
   Linie, an der der Titelblock endet und das Band beginnt. Genau
   deshalb ist sie 10px hoch und nicht 4: sie muss als Bauteil
   lesbar sein, nicht als Unterstreichung. */
.hero-wrap.hero-split .hero-col::after{
  content:"";display:block;
  width:100% !important;height:10px !important;
  margin:clamp(26px,3.2vw,46px) 0 0 !important;
  background:linear-gradient(90deg,
    var(--sw) 0 33.333%,
    var(--rt) 33.333% 66.666%,
    var(--gd) 66.666% 100%) !important;
  box-shadow:none !important;
}

/* ==================================================================
   4 — DAS BAND DER FUENF TUEREN
   Aus dem Faecher wird ein Filmstreifen. Gleiche Breiten, keine
   Fuge, 1px Schwarz zwischen den Feldern. Oben und unten eine
   staerkere Regel: das Band ist ein Bauteil mit Anfang und Ende,
   nicht eine Reihe schwebender Karten.

   Links und rechts bleibt das Band offen. Dadurch sitzt die Kante
   des ersten Fotos exakt auf derselben Achse wie das L von LUST —
   und das ist die einzige Ausrichtung, die den Hero zusammenhaelt.
   ================================================================== */
.hero-deck{
  --chip:clamp(22px,2.1vw,28px);
  counter-reset:hd;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0 !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  width:100%;
  margin:clamp(26px,3.2vw,46px) 0 0 !important;
  padding:0 !important;
  border-top:2px solid var(--sw);
  border-bottom:2px solid var(--sw);
  perspective:none;
  position:relative;z-index:2;
}

.hero-deck .hd-card{
  counter-increment:hd;
  display:flex;flex-direction:column;
  flex:initial;width:auto;min-width:0;margin:0;
  transform:none !important;
  --rot:0deg;--arc:0px;--lift:0px;--dx:0px;
  /* ulm.css gibt jedem <a> eine rote Unterkante. Fuenf rote Striche
     unter fuenf Feldern waeren fuenf Signale — Rot ist aber das
     Signal, nicht die Grundfarbe. Weg damit. */
  border:0;
  background:var(--pap);
  transition:background-color .1s linear;
}
/* Die Trennlinie sitzt zwischen den Feldern, nicht um sie herum.
   Ein Rahmen pro Karte gaebe doppelte Linien und das Band wuerde
   wieder in fuenf Kaesten zerfallen. */
.hero-deck .hd-card + .hd-card{border-left:1px solid var(--sw)}

.hero-deck .hd-card:hover{background:var(--pap-2)}
.hero-deck .hd-card:focus{outline:none}
.hero-deck .hd-card:focus-visible{
  outline:3px solid var(--rt);
  outline-offset:-3px;
}

/* --- 4.1 Das Foto ------------------------------------------------
   Die Karte war ein Torbogen mit Goldrahmen. Jetzt: ein Rechteck.
   Der Rahmen faellt weg, weil das Band die Linien schon setzt. */
.hero-deck .hd-face{
  position:relative;display:grid !important;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:1fr auto;
  width:100%;
  aspect-ratio:4/5 !important;
  border:0 !important;
  overflow:hidden;
  background:none !important;
  transition:none !important;
}
/* Das Foto liegt in ::before und laesst unten genau den Streifen
   frei, in dem der schwarze Ziffernblock sitzt. So stapeln sich
   Foto und Ziffer wirklich uebereinander, statt dass die Ziffer auf
   dem Bild klebt — obwohl beide im HTML im selben Kasten stehen. */
.hero-deck .hd-face[data-img]::before{
  content:"";position:absolute;z-index:0;
  inset:0 0 var(--chip) 0 !important;
  background:var(--img) center/cover no-repeat !important;
  transform:none !important;
  transition:none !important;
}
.hero-deck .hd-card:hover .hd-face[data-img]::before,
.hero-deck .hd-card:focus-visible .hd-face[data-img]::before{
  transform:none !important;
}
/* Der dunkle Schleier ueber dem Bild war noetig, solange Schrift
   darauf lag. Es liegt keine mehr darauf. */
.hero-deck .hd-face::after{display:none !important}

/* --- 4.2 Der Ziffernblock ----------------------------------------
   Zweistellig: 01 bis 05. Einstellige Ziffern sehen aus wie eine
   Aufzaehlung, zweistellige wie eine Ordnung — das ist der Grund,
   warum bei Ulm und bei Aicher immer die Null davorsteht.

   Das HTML liefert 1 bis 5. Wir setzen die Ziffer aus dem Markup
   auf Schriftgrad 0 und schreiben die echte Nummer mit einem
   Zaehler in ::before. Kein Eingriff ins HTML noetig.

   Ziffernblock und Stichwort teilen sich eine Zeile und haben beide
   schwarzen Grund: zusammen ergeben sie einen durchgehenden Balken
   unter dem Foto. */
.hero-deck .hd-face[data-img] .hd-n{
  display:flex !important;
  position:static !important;
  grid-column:1;grid-row:2;
  align-items:center;
  min-height:var(--chip);
  padding:0 10px !important;
  font-size:0 !important;          /* unterdrueckt die 1 aus dem HTML */
  line-height:1 !important;
  background:var(--sw) !important;
  color:var(--pap) !important;
  opacity:1 !important;
}
.hero-deck .hd-face[data-img] .hd-n::before{
  content:counter(hd,decimal-leading-zero);
  font-family:var(--disp);
  font-variant-numeric:tabular-nums;
  font-size:clamp(13px,1.15vw,17px);
  letter-spacing:.01em;
  line-height:1;
}

/* Das Stichwort war Schreibschrift und deshalb in ulm.css tot.
   Als gesperrte Versalie im schwarzen Balken ist es wieder ein
   Bauteil: die Nummer sagt wo, das Stichwort sagt was. */
.hero-deck .hd-face[data-img] .hd-glifo{
  display:block !important;
  position:static !important;
  grid-column:2;grid-row:2;
  min-width:0;min-height:var(--chip);
  padding:0 10px !important;
  background:var(--sw) !important;
  color:var(--pap) !important;
  font-size:.56rem !important;
  letter-spacing:.14em !important;
  /* Zeilenhoehe gleich Balkenhoehe: damit sitzt das Wort mittig, ohne
     dass ein zweiter Flexkasten noetig waere. Block statt Flex, weil
     nur ein Blockkasten sauber mit Auslassungspunkten abschneidet —
     „ganzer Monat" ist auf schmalen Feldern laenger als der Platz. */
  line-height:var(--chip) !important;
  text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* --- 4.3 Der Name der Tuer ---------------------------------------
   Er stand als weisse Schrift auf einer dunklen Verlaufsbande im
   Bild. Jetzt steht er darunter auf Papier: schwarz auf hell, in
   der Grotesk, versal und gesperrt. Lesbarkeit braucht keinen
   Verlauf, sie braucht Kontrast. */
.hero-deck .hd-face[data-img] + .hd-tit,
.hero-deck .hd-tit{
  position:static !important;
  top:auto !important;bottom:auto !important;
  left:auto !important;right:auto !important;
  display:flex !important;align-items:flex-start;gap:.5em;
  flex:1 1 auto;
  padding:10px 10px 12px !important;
  background:none !important;
  color:var(--sw) !important;
  font-size:clamp(11px,.86vw,13px) !important;
  letter-spacing:.1em !important;
  line-height:1.2 !important;
  text-shadow:none !important;
  overflow-wrap:anywhere;
}
.hero-deck .hd-card:hover .hd-tit,
.hero-deck .hd-card:focus-visible .hd-tit{color:var(--sw) !important}

.hero-deck .hd-go{
  margin-left:auto;flex:0 0 auto;
  font-style:normal;
  color:var(--sw) !important;
  font-size:1em;
  transform:none !important;
  transition:none !important;
}
.hero-deck .hd-card:hover .hd-go{color:var(--rt) !important}

/* ==================================================================
   5 — DER HINWEIS NACH UNTEN
   Vorher: eine zentrierte Pfeilspitze mit fallendem Leuchtpunkt.
   Nachher: ein Etikett links an der Rasterkante, danach eine
   Haarlinie, die nach rechts auslaeuft. Ein Hinweis ist Beschriftung,
   keine Animation. Er sitzt ausserhalb von .wrap, bekommt also den
   Satzspiegel hier noch einmal gesetzt, damit seine linke Kante auf
   derselben Achse liegt wie der Name.
   ================================================================== */
.hero-scroll{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px;
  width:auto !important;
  max-width:var(--maxw) !important;
  margin:clamp(18px,2vw,28px) auto 0 !important;
  padding:0 var(--sp) !important;
  border:0 !important;
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
  position:relative;z-index:2;
}
.hero-scroll:hover,.hero-scroll:focus-visible{
  opacity:1 !important;transform:none !important;
}
.hero-scroll .hs-txt{
  font-family:var(--grot) !important;
  font-weight:700 !important;
  text-transform:uppercase;
  font-size:.62rem !important;
  letter-spacing:.2em !important;
  color:var(--sw) !important;
  flex:0 0 auto;
}
.hero-scroll:hover .hs-txt{color:var(--rt) !important}
/* Aus der senkrechten Leuchtschiene wird eine waagerechte Haarlinie.
   Sie laeuft aus, statt zu zeigen — der Text zeigt schon. */
.hero-scroll .hs-rail{
  position:static !important;
  display:block !important;
  width:min(280px,34vw) !important;height:1px !important;
  background:var(--sw) !important;
  flex:0 0 auto;
}
.hero-scroll .hs-dot,
.hero-scroll .hs-chev{display:none !important}

/* ==================================================================
   6 — SCHMALE SCHIRME
   Unter 900 gibt es keine leere Spalte mehr: bei dieser Breite ist
   Leere kein Bauteil, sondern nur fehlender Platz. Der Satz laeuft
   ueber die volle Breite, das Band wird zum waagerecht scrollbaren
   Streifen.

   Gescrollt statt umgebrochen, weil ein Band mit fuenf gleichen
   Feldern seine Ordnung verliert, sobald zwei Felder in einer
   zweiten Zeile haengen. Und weil fuenf Felder auf 390px Breite
   gequetscht keine Fotos mehr waeren, sondern Briefmarken.
   ================================================================== */
@media (max-width:900px){
  .hero-wrap.hero-split{
    display:block !important;
    text-align:left !important;
  }
  .hero-wrap.hero-split > .hero-col{width:auto;min-width:0;text-align:left !important}
  .hero-wrap.hero-split::after{display:none}
  .hero-wrap.hero-split .hero-lede{
    margin-left:0 !important;margin-right:0 !important;
    max-width:36ch !important;
  }
  .hero-wrap.hero-split .hero-cta{justify-content:flex-start !important}

  .hero-sec .hero-h1.hero-mark{
    font-size:clamp(54px,15.4vw,132px) !important;
    margin-bottom:clamp(14px,3vw,22px) !important;
  }

  /* Das Band bricht bewusst aus dem Satzspiegel aus, bis an den
     Bildschirmrand. Nur so sieht man, dass rechts noch etwas
     kommt — ein Streifen, der brav im Satzspiegel endet, sieht
     abgeschnitten aus statt scrollbar. Die Randregeln oben und
     unten laufen damit ueber die volle Breite und werden zur
     Architektur, die sie am grossen Schirm auch sind. */
  .hero-wrap.hero-split > .hero-deck{
    grid-template-columns:none !important;
    grid-auto-flow:column;
    grid-auto-columns:clamp(158px,42vw,260px);
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scroll-padding-left:var(--sp);
    margin-inline:calc(var(--sp) * -1) !important;
    padding-inline:var(--sp) !important;
    width:auto;
  }
  .hero-deck .hd-card{scroll-snap-align:start}
  .hero-deck .hd-face{aspect-ratio:1/1 !important}
  /* Derselbe Selektor wie oben, sonst gewinnt die Grundregel: ein
     Medienabfragen-Block erhoeht die Spezifitaet nicht. */
  .hero-deck .hd-face[data-img] + .hd-tit{
    font-size:11.5px !important;
    padding:9px 9px 11px !important;
  }

  .hero-scroll .hs-rail{width:min(150px,38vw) !important}
}

/* Telefon. Die Fahne wird flacher, sonst nimmt sie im Hochformat zu
   viel vom Bildschirm. Das Stichwort faellt weg: neben der Nummer
   bleiben auf 158px Feldbreite keine lesbaren gesperrten Versalien
   uebrig, und ein abgeschnittenes Wort ist schlechter als keines.
   Die Nummer nimmt dann den ganzen Balken. */
@media (max-width:480px){
  .hero-wrap.hero-split .hero-col::after{height:8px !important}
  .hero-deck .hd-face[data-img] .hd-glifo{display:none !important}
  .hero-deck .hd-face[data-img] .hd-n{grid-column:1 / -1;justify-content:flex-start}
  .hero-sec .hero-h1.hero-mark{letter-spacing:-.025em !important}
}

/* Wer weniger Bewegung will, bekommt hier ohnehin keine. Der Block
   steht nur zur Sicherheit: casa.css schaltet in diesem Zweig
   eigene Regeln, die sonst wieder Uebergaenge einbringen. */
@media (prefers-reduced-motion:reduce){
  .hero-deck .hd-card,
  .hero-deck .hd-face,
  .hero-deck .hd-face[data-img]::before{transition:none !important}
}