/* ==========================================================================
   BLACK & BLOOD  -  Red Tree x Roomers Berlin  -  31.10.2026
   Design-System

   Leitmotiv: Der Red Tree blueht das ganze Jahr in Rot. In dieser Nacht
   verliert er seine Farbe. Um Mitternacht blutet er.
   Die Seite baut das nach: oben fast schwarz und entfaerbt, nach unten
   hin kippt alles ins Rot. Gesteuert ueber die Variable --blut, die beim
   Scrollen von 0 auf 1 laeuft.
   ========================================================================== */

/* ---------------------------------------------------------------- Schrift */

@font-face{
  font-family:"Cocogoose";
  src:url("../fonts/Cocogoose-Pro-Light.otf") format("opentype");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cocogoose";
  src:url("../fonts/Cocogoose-Pro-Thin.otf") format("opentype");
  font-weight:200; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"CocogooseText";
  src:url("../fonts/Cocogoose-Pro-Text-Regular.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"CocogooseText";
  src:url("../fonts/Cocogoose-Pro-Text-Bold.otf") format("opentype");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ----------------------------------------------------------------- Tokens */

:root{
  /* Farben. Kontrast gegen --bg gemessen:
     bone   #EDE4E1 auf #08090A  =  15,4:1
     leise  75 % bone            =   9,0:1
     rot-hell #E4223E auf #08090A =  4,6:1   -> nur ab 18 px oder fett
     Deshalb steht Fliesstext nie in Rot, nur Auszeichnungen und Linien. */
  --bg:#08090A;
  --bg-tief:#050506;
  --flaeche:#0C0D0F;
  --flaeche-hoch:#111214;

  --bone:#EDE4E1;
  --leise:rgba(237,228,225,.74);
  --leiser:rgba(237,228,225,.54);
  --sehrleise:rgba(237,228,225,.34);

  --rot:#C8102E;
  --rot-hell:#E4223E;
  --rot-tief:#7A0A1C;
  --rot-glut:#4A0511;

  --linie:rgba(237,228,225,.13);
  --linie-fein:rgba(237,228,225,.07);
  --linie-rot:rgba(200,16,46,.42);

  /* Scroll-Fortschritt der ganzen Seite, 0 bis 1. Wird von seite.js gesetzt. */
  --blut:0;

  /* Typo. clamp() statt Umbruchpunkten - die Skala waechst mit dem Fenster. */
  /* min() bindet die Riesenschrift zusaetzlich an die Fensterhoehe.
     Ohne den zweiten Wert laeuft der Hero auf flachen Bildschirmen
     (Notebook mit 900 px Hoehe) unten heraus. */
  --t-riese:clamp(3rem, min(14vw, 17vh), 10rem);
  --t-gross:clamp(1.95rem, 5.6vw, 4.15rem);
  --t-mittel:clamp(1.5rem, 3.6vw, 2.5rem);
  --t-klein:clamp(1.08rem, 2.1vw, 1.35rem);
  --t-text:clamp(1rem, 1.28vw, 1.1rem);
  --t-mini:.83rem;
  --t-label:.66rem;

  /* Raster */
  --rand:clamp(1.15rem, 5vw, 5.5rem);
  --spalte-max:78rem;
  --lese-max:36rem;

  --s1:.4rem;  --s2:.75rem; --s3:1.15rem; --s4:1.75rem;
  --s5:2.6rem; --s6:4rem;   --s7:6rem;    --s8:9rem;
  --abschnitt:clamp(4.5rem, 11vw, 9.5rem);

  /* Bewegung */
  --ruhig:.7s cubic-bezier(.16,1,.3,1);
  --zart:.28s cubic-bezier(.4,0,.2,1);
  --lang:1.35s cubic-bezier(.16,1,.3,1);
}

/* -------------------------------------------------------------- Grundlagen */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--bg);
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--bone);
  font-family:"CocogooseText",-apple-system,BlinkMacSystemFont,"Segoe UI",
              Helvetica,Arial,sans-serif;
  font-size:var(--t-text);
  line-height:1.72;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}

::selection{background:var(--rot);color:var(--bone)}

:focus-visible{
  outline:2px solid var(--rot-hell);
  outline-offset:3px;
}

/* Sprungmarke fuer die Tastaturbedienung */
.sprung{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--rot); color:var(--bone);
  padding:.8rem 1.2rem; text-decoration:none;
  font-size:var(--t-mini); letter-spacing:.14em; text-transform:uppercase;
}
.sprung:focus{left:0}

/* ------------------------------------------------- Atmosphaere ueber allem */

/* Filmkorn. Ein einziges SVG-Rauschen als Datenadresse, damit kein
   zusaetzlicher Netzabruf entsteht. Sehr niedrige Deckkraft - man soll
   es nur spueren, nicht sehen. */
.korn,
.vignette,
.glut{
  position:fixed; inset:0; pointer-events:none; z-index:90;
}
.korn{
  opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}

/* Vignette. Zieht die Raender zu und legt die Aufmerksamkeit in die Mitte. */
.vignette{
  background:radial-gradient(ellipse 132% 100% at 50% 44%,
    transparent 42%, rgba(5,5,6,.26) 78%, rgba(5,5,6,.66) 100%);
  z-index:88;
}

/* Die Glut. Waechst mit dem Scroll-Fortschritt und flackert leise wie
   eine Kerze. Das ist der eigentliche Traeger des Blut-Motivs. */
.glut{
  z-index:0;
  background:
    radial-gradient(ellipse 90% 62% at 50% 108%,
      rgba(200,16,46,.30) 0%, rgba(122,10,28,.13) 42%, transparent 72%),
    radial-gradient(ellipse 62% 42% at 50% 0%,
      rgba(74,5,17,.34) 0%, transparent 68%);
  opacity:calc(.18 + var(--blut) * .82);
  animation:flackern 7.5s ease-in-out infinite;
}
@keyframes flackern{
  0%,100%{filter:brightness(1)}
  22%    {filter:brightness(1.09)}
  41%    {filter:brightness(.95)}
  63%    {filter:brightness(1.05)}
  81%    {filter:brightness(.98)}
}
@media(prefers-reduced-motion:reduce){
  .glut{animation:none}
}

/* --------------------------------------------------------------- Bausteine */

.rand{
  width:100%;
  max-width:calc(var(--spalte-max) + var(--rand) * 2);
  margin-inline:auto;
  padding-inline:var(--rand);
  position:relative;
  z-index:2;
}

.abschnitt{
  padding-block:var(--abschnitt);
  position:relative;
}
.abschnitt + .abschnitt{border-top:1px solid var(--linie-fein)}

/* Kapitelmarke: laufende Nummer, Linie, Titel */
.marke{
  display:flex; align-items:center; gap:var(--s3);
  font-family:"CocogooseText",sans-serif;
  font-size:var(--t-label); font-weight:700;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--sehrleise);
  margin-bottom:var(--s4);
}
.marke .nr{color:var(--rot-hell)}
.marke .strich{
  flex:1 1 auto; height:1px; max-width:7rem;
  background:linear-gradient(90deg,var(--linie-rot),transparent);
}

h1,h2,h3,.display{
  font-family:"Cocogoose",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  font-weight:300;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}

h1{ font-size:var(--t-riese); line-height:.9;  letter-spacing:-.035em; }
h2{ font-size:var(--t-gross); line-height:1.06; margin-bottom:var(--s3); }
h3{ font-size:var(--t-klein); line-height:1.28; letter-spacing:-.012em; }

.vorzeile{
  font-size:var(--t-mini); font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--rot-hell);
  margin-bottom:var(--s2);
}

p{margin:0 0 var(--s3)}
p:last-child{margin-bottom:0}
.lese{max-width:var(--lese-max)}
.lese-weit{max-width:44rem}
.leise{color:var(--leise)}
.leiser{color:var(--leiser)}
.klein{font-size:var(--t-mini);line-height:1.66}
.mini{font-size:.76rem;line-height:1.6;color:var(--sehrleise)}
strong,b{font-weight:700}
.rot{color:var(--rot-hell)}

a{color:var(--bone);text-decoration:none}
.textlink{
  border-bottom:1px solid var(--linie-rot);
  padding-bottom:1px;
  transition:border-color var(--zart),color var(--zart);
}
.textlink:hover{border-bottom-color:var(--rot-hell)}

/* --------------------------------------------------------------- Knoepfe */

.knopf{
  --k-rand:var(--linie);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem;
  min-height:3.15rem;
  padding:.9rem 1.9rem;
  border:1px solid var(--k-rand);
  background:transparent;
  color:var(--bone);
  font-family:"CocogooseText",sans-serif;
  font-size:.74rem; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:border-color var(--zart),color var(--zart);
  -webkit-tap-highlight-color:transparent;
}
/* Der Fuellstrich laeuft beim Hover von unten hoch - eine Anspielung
   auf das Bluten, ohne dass es plakativ wird. */
.knopf::after{
  content:""; position:absolute; inset:auto 0 0 0; height:100%;
  background:var(--rot);
  transform:translateY(101%);
  transition:transform var(--ruhig);
  z-index:-1;
}
.knopf span{position:relative;z-index:1}
.knopf:hover{--k-rand:var(--rot)}
.knopf:hover::after{transform:translateY(0)}
.knopf:active{transform:translateY(1px)}

.knopf.voll{background:var(--rot);--k-rand:var(--rot)}
.knopf.voll::after{background:var(--rot-hell)}
.knopf.geist{--k-rand:var(--linie-fein);color:var(--leise)}
.knopf.geist:hover{color:var(--bone)}
.knopf[disabled]{opacity:.45;cursor:not-allowed}
.knopf[disabled]::after{display:none}

/* --------------------------------------------------------------- Bilder */

/* Jedes Bild startet entfaerbt und dunkel. Sobald es in den Blick
   kommt, laeuft es in die volle Farbe. Das ist der Moment, in dem
   der Baum Farbe bekommt. */
.bild{
  position:relative;
  overflow:hidden;
  background:var(--flaeche);
}
.bild img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.06) brightness(.52) contrast(1.06);
  transform:scale(1.06);
  transition:filter 1.6s cubic-bezier(.16,1,.3,1),
             transform 1.9s cubic-bezier(.16,1,.3,1),
             opacity .9s ease;
  opacity:0;
}
.bild.sichtbar img{
  filter:saturate(1) brightness(.94) contrast(1.02);
  transform:scale(1);
  opacity:1;
}
/* Bilder, die schwarz bleiben sollen - vor dem Mitternachtsmoment */
.bild.kalt.sichtbar img{
  filter:saturate(.1) brightness(.6) contrast(1.1);
}
@media(prefers-reduced-motion:reduce){
  .bild img{transition:opacity .4s ease;transform:none}
  .bild.sichtbar img{transform:none}
}

/* ------------------------------------------------------- Auftritt beim Scrollen */

.auftritt{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),
             transform 1s cubic-bezier(.16,1,.3,1);
}
.auftritt.sichtbar{opacity:1;transform:none}
.auftritt.v1{transition-delay:.08s}
.auftritt.v2{transition-delay:.16s}
.auftritt.v3{transition-delay:.24s}
.auftritt.v4{transition-delay:.32s}
.auftritt.v5{transition-delay:.4s}

@media(prefers-reduced-motion:reduce){
  .auftritt{opacity:1;transform:none;transition:none}
}
.kein-js .auftritt{opacity:1;transform:none}
.kein-js .bild img{opacity:1;filter:saturate(1) brightness(.94);transform:none}

/* ==========================================================================
   KOPFZEILE
   ========================================================================== */

.kopf{
  position:fixed; inset:0 0 auto 0; z-index:80;
  transition:background var(--ruhig),border-color var(--ruhig),
             backdrop-filter var(--ruhig);
  border-bottom:1px solid transparent;
}
.kopf.geklebt{
  background:rgba(8,9,10,.86);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom-color:var(--linie-fein);
}
.kopf-innen{
  display:flex; align-items:center; gap:var(--s3);
  padding-block:.95rem;
}
.kopf-logos{display:flex;align-items:center;gap:.85rem;flex:0 0 auto}
.kopf-logos img{height:1.35rem;width:auto;opacity:.94}
.kopf-logos .kreuz{color:var(--sehrleise);font-size:.8rem}
.kopf-logos .roomers{height:.8rem}

.kopf-datum{
  margin-left:auto;
  font-size:var(--t-label); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--leiser);
  white-space:nowrap;
}
.kopf .knopf{min-height:2.6rem;padding:.6rem 1.25rem;font-size:.68rem}

@media(max-width:719px){
  .kopf-datum{display:none}
  .kopf-logos img{height:1.15rem}
  .kopf-logos .roomers{height:.68rem}
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:end;
  overflow:hidden;
  isolation:isolate;
}

.hero-bild{
  position:absolute; inset:0; z-index:-2;
}
.hero-bild img{
  width:100%; height:100%; object-fit:cover; object-position:50% 38%;
  /* Der Baum ist am Anfang fast entfaerbt. Beim Scrollen kommt das Rot.
     Die Rechnung liest --blut, das seite.js fortschreibt. */
  /* Der Trick fuer "ein schwarzer Baum, der von innen rot brennt":
     NICHT entsaettigen. Das Motiv ist durchgehend rot - saturate(0)
     macht daraus grauen Matsch. Stattdessen bleibt ein Rest Farbe
     stehen, die Helligkeit wird stark heruntergezogen und der Kontrast
     angehoben. Ergebnis ist ein fast schwarzes Bild mit dunkelrotem
     Glimmen. Mit --blut kommen Farbe und Licht zurueck. */
  filter:
    saturate(calc(.4 + var(--blut) * .6))
    brightness(calc(.74 + var(--blut) * .16))
    contrast(calc(1.14 - var(--blut) * .1));
  transform:scale(calc(1.07 - var(--blut) * .04));
  transition:filter .18s linear,transform .18s linear;
}
/* Abdunklung nach unten, damit die Schrift immer steht */
.hero-bild::after{
  content:""; position:absolute; inset:0;
  background:
    /* Nur so viel Abdunklung wie die Schrift braucht. Links unten
       steht die Headline, dort dunkler; oben rechts darf das Bild
       atmen. */
    linear-gradient(to top,
      var(--bg) 0%, rgba(8,9,10,.7) 16%, rgba(8,9,10,.26) 46%,
      rgba(8,9,10,.06) 74%, rgba(8,9,10,.3) 100%),
    linear-gradient(to right,
      rgba(8,9,10,.52) 0%, rgba(8,9,10,.18) 42%, transparent 70%);
}

.hero-innen{
  position:relative; z-index:3;
  padding-block:clamp(6rem,13vh,7.5rem) clamp(3.5rem,9vh,5.5rem);
  width:100%;
}

.hero-vor{
  display:flex; align-items:center; gap:var(--s3);
  font-size:var(--t-label); font-weight:700;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--leiser);
  margin-bottom:var(--s4);
}
.hero-vor .punkt{
  width:4px;height:4px;border-radius:50%;background:var(--rot-hell);
  box-shadow:0 0 12px 2px rgba(228,34,62,.7);
  animation:puls 2.6s ease-in-out infinite;
  flex:0 0 auto;
}
@keyframes puls{
  0%,100%{opacity:1;transform:scale(1)}
  50%    {opacity:.35;transform:scale(.8)}
}
@media(prefers-reduced-motion:reduce){ .hero-vor .punkt{animation:none} }

/* Die Schrift bleibt Knochenweiss. Das Rot kommt aus dem Raum, nicht
   aus den Buchstaben - ein Farbverlauf in der Headline liest sich rosa
   und damit billig. Stattdessen ein tiefer Schein, der mit --blut
   waechst und die Schrift vom Bild abhebt. */
.hero h1{
  margin-bottom:var(--s4);
  color:var(--bone);
  text-shadow:
    0 0 calc(30px + var(--blut) * 50px) rgba(200,16,46,calc(.12 + var(--blut) * .3)),
    0 2px 40px rgba(5,5,6,.7);
}

.hero-sub{
  font-size:var(--t-klein);
  line-height:1.58;
  color:var(--leise);
  max-width:31rem;
  margin-bottom:var(--s5);
}
.hero-sub b{color:var(--bone);font-weight:700}

.hero-meta{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4);
  font-size:var(--t-mini); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--leiser);
  margin-bottom:var(--s5);
}
.hero-meta span{display:flex;align-items:center;gap:.55rem}
.hero-meta span::before{
  content:""; width:14px; height:1px; background:var(--linie-rot);
}

.hero-knoepfe{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* ------------------------------------------------------------ Countdown */

.countdown{
  display:flex; gap:var(--s3);
  margin-bottom:var(--s5);
  font-variant-numeric:tabular-nums;
}
/* Feste Mindestbreite, sonst huepfen die Spalten bei jedem Ziffernwechsel.
   Tabellenziffern allein reichen nicht, weil eine 1 und eine 0 zwar gleich
   breit sind, "09" und "10" aber unterschiedlich viel Raum brauchen, wenn
   die Spalte mitwaechst. */
.countdown div{min-width:3.5rem}
@media(min-width:900px){ .countdown{gap:var(--s4)} }

/* Die Sekunden laufen mit, sollen aber nicht wie ein Raketenstart wirken.
   Etwas kleiner und ruhiger als die drei Spalten davor - man sieht die
   Bewegung, ohne dass sie den Blick zieht. */
.countdown .z-sek{
  font-size:clamp(1.35rem,3.8vw,2rem);
  color:var(--leiser);
}
.countdown .z{
  font-family:"Cocogoose",sans-serif; font-weight:200;
  font-size:clamp(1.9rem,5.5vw,2.9rem); line-height:1;
  letter-spacing:-.03em;
  display:block;
}
.countdown .b{
  font-size:.6rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--sehrleise);
  margin-top:.5rem; display:block;
}
.countdown.vorbei{display:none}

/* Scroll-Hinweis */
.hero-hinweis{
  position:absolute; left:50%; bottom:1.5rem; z-index:4;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.58rem; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:var(--sehrleise);
}
.hero-hinweis i{
  display:block; width:1px; height:2.6rem;
  background:linear-gradient(to bottom,var(--linie-rot),transparent);
  animation:tropfen 2.8s ease-in-out infinite;
  transform-origin:top;
}
@keyframes tropfen{
  0%,100%{transform:scaleY(.3);opacity:.3}
  50%    {transform:scaleY(1);opacity:1}
}
@media(max-width:719px){ .hero-hinweis{display:none} }
@media(prefers-reduced-motion:reduce){ .hero-hinweis i{animation:none} }

/* --------------------------------------------------- Hero auf dem Handy
   Auf 375 x 812 muss alles Wichtige ueber die Faltkante passen: Marke,
   Headline, Countdown, Zeile mit Datum und Ort, und beide Knoepfe.
   Deshalb wird hier die Reihenfolge umgestellt - der Countdown rutscht
   direkt unter die Headline - und alle Abstaende ziehen sich zusammen. */
@media(max-width:899px){
  .hero-innen{
    display:flex; flex-direction:column;
    padding-block:clamp(5rem,12vh,6.5rem) clamp(2rem,5vh,3rem);
  }
  .hero-vor  {order:1; margin-bottom:var(--s3); font-size:.58rem;
              letter-spacing:.22em; line-height:1.5}
  .hero h1   {order:2; margin-bottom:var(--s3)}
  .hero-rechts{order:3; margin-bottom:var(--s3)}
  .hero-links{order:4}
  .countdown {margin-bottom:0; gap:.7rem}
  .countdown div{min-width:0;flex:1 1 0}
  .countdown .z{font-size:clamp(1.5rem,7vw,2.1rem)}
  .countdown .z-sek{font-size:clamp(1.2rem,5.4vw,1.7rem)}
  .countdown .b{font-size:.54rem;letter-spacing:.16em}
  .hero-sub  {margin-bottom:var(--s3); font-size:1rem; line-height:1.52}
  .hero-meta {margin-bottom:var(--s3); gap:.45rem var(--s3); font-size:.7rem}
  .hero-knoepfe{flex-direction:column; gap:.55rem; width:100%}
  .hero-knoepfe .knopf{width:100%; min-height:2.95rem; padding-block:.75rem}

  /* Das Handy bekommt ein eigenes Hochformat (siehe picture-Element in
     der Seite). Der Ausschnitt sitzt oben, damit die Baumkrone steht. */
  .hero-bild img{object-position:50% 24%}
}

@media(min-width:900px){
  .hero-innen{display:grid;grid-template-columns:1.45fr .8fr;
    gap:var(--s6);align-items:end}
  .hero-links{grid-column:1}
  .hero-rechts{grid-column:2;padding-bottom:.4rem}
  .hero h1{grid-column:1 / -1}
  .hero-vor{grid-column:1 / -1}
}

/* ==========================================================================
   FAKTEN-KACHELN
   ========================================================================== */

.fakten{
  display:grid; gap:1px;
  background:var(--linie-fein);
  border-block:1px solid var(--linie);
  grid-template-columns:repeat(2,1fr);
}
/* Die Startseite hat fuenf Fakten, die Dinnerseite vier. Statt zwei
   Regeln zu pflegen, richtet sich das Raster nach der Anzahl - sonst
   bliebe auf der Dinnerseite eine leere Spalte stehen. */
@media(min-width:720px){
  .fakten{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
}
/* Bei ungerader Anzahl bliebe im zweispaltigen Raster des Handys unten
   eine halbe Zelle leer. Das letzte Feld nimmt dann die ganze Breite -
   so steht dort nie ein angeschnittener Rest. */
.fakt:last-child:nth-child(odd){ grid-column:1 / -1; }
@media(min-width:720px){
  .fakt:last-child:nth-child(odd){ grid-column:auto; }
}

.fakt{
  background:var(--bg);
  padding:var(--s4) var(--s3);
  transition:background var(--ruhig);
}
.fakt:hover{background:var(--flaeche)}
.fakt .f-label{
  font-size:.58rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sehrleise);
  margin-bottom:var(--s2);
}
.fakt .f-wert{
  font-family:"Cocogoose",sans-serif; font-weight:300;
  font-size:clamp(1.1rem,2.4vw,1.5rem); line-height:1.12;
  letter-spacing:-.02em;
  margin-bottom:.35rem;
}
.fakt .f-unten{font-size:.74rem;line-height:1.5;color:var(--leiser)}

/* ==========================================================================
   KOPFNAVIGATION
   ========================================================================== */

.kopf-nav{display:flex;gap:var(--s3);margin-left:var(--s3)}
.kopf-nav a{
  font-size:var(--t-label); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--leiser); white-space:nowrap;
  padding-block:.3rem;
  border-bottom:1px solid transparent;
  transition:color var(--zart),border-color var(--zart);
}
.kopf-nav a:hover{color:var(--bone);border-bottom-color:var(--rot)}
@media(max-width:899px){ .kopf-nav{display:none} }

/* ==========================================================================
   DRESSCODE-KARTE
   ========================================================================== */

.dresscode{border:1px solid var(--linie);background:var(--flaeche)}
.dresscode .d-kopf{
  padding:var(--s4);
  border-bottom:1px solid var(--linie);
  background:linear-gradient(178deg,rgba(200,16,46,.11),transparent 78%);
}
.dresscode .d-label{
  font-size:var(--t-label); font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--rot-hell); margin-bottom:var(--s2);
}
.dresscode .d-wert{
  font-family:"Cocogoose",sans-serif; font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.05rem); line-height:1.1;
  letter-spacing:-.022em;
}
/* Ja und Nein stehen untereinander, nicht nebeneinander. Die Karte
   sitzt in der schmalen Spalte des Abschnitts; zwei Spalten darin waeren
   je rund 200 px breit, und dann bricht "Black, velvet, leather, one
   note of red" Wort fuer Wort um. Zwei Spalten schaltet erst eine
   Container-Abfrage frei, wenn die Karte wirklich Platz hat. */
.dresscode{container-type:inline-size}
.dresscode .d-gegen{
  display:grid; gap:var(--s4); padding:var(--s4);
  grid-template-columns:1fr;
}
@container (min-width:560px){
  .dresscode .d-gegen{grid-template-columns:1fr 1fr;gap:var(--s4)}
}
.dresscode h3{
  font-family:"CocogooseText",sans-serif; font-weight:700;
  font-size:var(--t-label); letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:var(--s1);
}
.dresscode .d-ja{color:var(--rot-hell)}
.dresscode .d-nein{color:var(--sehrleise)}
.dresscode .liste li{padding:.55rem 0;font-size:.85rem;line-height:1.5}
.dresscode .liste li::before{margin-top:.48rem;width:4px;height:4px}
.dresscode .liste.nein li{color:var(--leiser)}

/* ==========================================================================
   MARKEN-BLOCK
   ========================================================================== */

.markenkasten{
  border:1px solid var(--linie);
  background:
    linear-gradient(178deg,rgba(200,16,46,.07) 0%,transparent 42%),
    var(--flaeche);
  padding:clamp(1.5rem,4vw,3rem);
  display:grid; gap:var(--s5); grid-template-columns:1fr;
}
@media(min-width:900px){
  .markenkasten{grid-template-columns:1.35fr .9fr;gap:var(--s6);align-items:center}
}
.modelle{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--linie-fein);border:1px solid var(--linie)}
.modelle li{
  background:var(--bg); padding:var(--s3);
  display:grid; gap:.15rem;
}
.modelle b{
  font-size:.9rem; font-weight:700;
}
.modelle span{font-size:.78rem;color:var(--leiser);line-height:1.5}

/* ==========================================================================
   ZWEISPALTIGE ABSCHNITTE
   ========================================================================== */

.zwei{
  display:grid; gap:var(--s5);
  grid-template-columns:1fr;
  align-items:start;
}
@media(min-width:900px){
  .zwei{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .zwei.schmal-links{grid-template-columns:.85fr 1.15fr}
  .zwei.schmal-rechts{grid-template-columns:1.15fr .85fr}
  .zwei.klebt > .haftet{position:sticky;top:6.5rem}
}

/* Aufzaehlung mit feinen Linien statt Punkten */
.liste{list-style:none;padding:0;margin:0}
.liste li{
  padding:var(--s3) 0;
  border-top:1px solid var(--linie-fein);
  display:grid; grid-template-columns:1.15rem 1fr; gap:var(--s2);
  align-items:baseline;
}
.liste li:last-child{border-bottom:1px solid var(--linie-fein)}
.liste li::before{
  content:""; width:5px; height:5px; margin-top:.62rem;
  background:var(--rot); transform:rotate(45deg);
}
.liste.nein li::before{
  background:transparent; border:1px solid var(--sehrleise);
}
.liste li b{font-weight:700}
.liste li .z{display:block;color:var(--leiser);font-size:var(--t-mini);
  margin-top:.2rem}

/* Zwei Listen gegeneinander: So sieht es aus / So nicht */
.gegen{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media(min-width:760px){.gegen{grid-template-columns:1fr 1fr;gap:var(--s5)}}
.gegen h3{
  font-family:"CocogooseText",sans-serif; font-weight:700;
  font-size:var(--t-label); letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:var(--s2);
}
.gegen .ja h3{color:var(--rot-hell)}
.gegen .nein h3{color:var(--sehrleise)}
.gegen .nein li{color:var(--leiser)}

/* ==========================================================================
   THE BLEEDING  -  der Mitternachtsmoment
   ========================================================================== */

.bleeding{
  position:relative;
  min-height:min(96svh,52rem);
  display:grid; place-items:center;
  overflow:hidden;
  isolation:isolate;
  text-align:center;
  border-top:1px solid var(--linie-fein);
}

.bleeding-bild{position:absolute;inset:0;z-index:-2}
.bleeding-bild img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:saturate(.04) brightness(.3) contrast(1.2);
  transform:scale(1.08);
  transition:filter 2.6s cubic-bezier(.16,1,.3,1),
             transform 3.4s cubic-bezier(.16,1,.3,1);
}
/* Wenn der Abschnitt in der Mitte des Bildschirms steht, blutet der Baum. */
.bleeding.blutet .bleeding-bild img{
  filter:saturate(1.28) brightness(.86) contrast(1.06);
  transform:scale(1);
}

/* Der Blutschleier. Laeuft von oben nach unten ueber das Bild. */
.bleeding-schleier{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom,
    rgba(74,5,17,0) 0%,
    rgba(122,10,28,.5) 34%,
    rgba(200,16,46,.44) 62%,
    rgba(74,5,17,.72) 100%);
  opacity:0;
  transform:translateY(-14%);
  transition:opacity 2.2s ease,transform 3s cubic-bezier(.16,1,.3,1);
  mix-blend-mode:screen;
}
.bleeding.blutet .bleeding-schleier{opacity:.62;transform:translateY(0)}

/* Abdunklung, damit der Text lesbar bleibt */
.bleeding::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 78% 62% at 50% 50%,
    rgba(5,5,6,.62) 0%, rgba(5,5,6,.84) 100%);
}

.bleeding-innen{position:relative;z-index:2;padding-block:var(--s7)}

.bleeding .uhr{
  font-family:"Cocogoose",sans-serif; font-weight:200;
  font-size:clamp(2.6rem,11vw,6.5rem); line-height:1;
  letter-spacing:.02em;
  color:var(--rot-hell);
  margin-bottom:var(--s3);
  text-shadow:0 0 60px rgba(200,16,46,.55);
  font-variant-numeric:tabular-nums;
}
.bleeding h2{
  font-size:clamp(2.4rem,9vw,5.5rem);
  margin-bottom:var(--s4);
  text-transform:uppercase;
  letter-spacing:.01em;
}
.bleeding p{
  max-width:34rem; margin-inline:auto;
  font-size:var(--t-klein); line-height:1.62; color:var(--leise);
}

/* Ein Tropfen, der als Trennung dient */
.tropfen{
  display:block; margin:var(--s5) auto 0;
  width:12px; height:34px;
}

@media(prefers-reduced-motion:reduce){
  .bleeding-bild img,.bleeding-schleier{transition:opacity .5s ease}
  .bleeding-bild img{transform:none}
}

/* ==========================================================================
   ZEITSTRAHL  -  Der Ablauf
   ========================================================================== */

.kapitel{
  display:grid; gap:var(--s4);
  grid-template-columns:1fr;
  margin-bottom:var(--s6);
}
@media(min-width:760px){ .kapitel{grid-template-columns:1fr 1fr;gap:var(--s4)} }

.kap{
  border:1px solid var(--linie);
  padding:var(--s4);
  position:relative;
  background:linear-gradient(180deg,var(--flaeche),transparent 70%);
  transition:border-color var(--ruhig);
}
.kap:hover{border-color:var(--linie-rot)}
.kap .k-nr{
  font-size:var(--t-label); font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--rot-hell); margin-bottom:var(--s2);
}
.kap .k-zeit{
  font-size:var(--t-mini); font-weight:700; letter-spacing:.16em;
  color:var(--sehrleise); margin-bottom:var(--s3);
}
.kap h3{margin-bottom:var(--s2);font-size:var(--t-mittel)}
.kap p{color:var(--leise);font-size:.94rem;margin:0}

/* Der Ablauf als Zeitstrahl. Mobil einspaltig mit Linie links,
   ab 760 px zweispaltig mit der Linie in der Mitte des Textblocks. */
.strahl{list-style:none;margin:0;padding:0;position:relative}
.strahl::before{
  content:""; position:absolute; left:0; top:.7rem; bottom:.7rem; width:1px;
  background:linear-gradient(to bottom,
    transparent, var(--linie-rot) 12%, var(--linie-rot) 88%, transparent);
}
.strahl li{
  position:relative;
  padding:0 0 var(--s4) var(--s4);
  display:grid; gap:.2rem;
}
.strahl li:last-child{padding-bottom:0}
.strahl li::before{
  content:""; position:absolute; left:-3px; top:.72rem;
  width:7px; height:7px; background:var(--bg);
  border:1px solid var(--rot); transform:rotate(45deg);
}
.strahl li.spitze::before{
  background:var(--rot-hell);
  box-shadow:0 0 16px 3px rgba(228,34,62,.6);
  width:9px;height:9px;left:-4px;
}
.strahl .s-zeit{
  font-family:"CocogooseText",sans-serif; font-weight:700;
  font-size:var(--t-mini); letter-spacing:.14em;
  color:var(--rot-hell); font-variant-numeric:tabular-nums;
}
.strahl .s-titel{
  font-family:"Cocogoose",sans-serif; font-weight:300;
  font-size:var(--t-klein); line-height:1.3; letter-spacing:-.012em;
}
.strahl li.spitze .s-titel{text-transform:uppercase;letter-spacing:.03em}
.strahl .s-text{font-size:.88rem;line-height:1.6;color:var(--leiser)}

@media(min-width:760px){
  .strahl li{
    grid-template-columns:6.5rem 1fr;
    grid-template-areas:"zeit titel" ". text";
    column-gap:var(--s3); padding-left:var(--s4);
  }
  .strahl .s-zeit{grid-area:zeit;text-align:right;padding-top:.18rem}
  .strahl .s-titel{grid-area:titel}
  .strahl .s-text{grid-area:text}
}

/* ==========================================================================
   HOFPLAN
   ========================================================================== */

.hofplan{border:1px solid var(--linie);background:var(--flaeche);padding:var(--s3)}
.hofplan svg{width:100%;height:auto;display:block}

.zonen{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--linie-fein);border:1px solid var(--linie)}
.zonen li{
  background:var(--bg); padding:var(--s3);
  display:grid; grid-template-columns:1.7rem 1fr; gap:var(--s2);
  align-items:baseline;
  transition:background var(--zart);
}
.zonen li:hover{background:var(--flaeche)}
.zonen .z-b{
  font-family:"Cocogoose",sans-serif; font-weight:300;
  color:var(--rot-hell); font-size:.94rem;
}
.zonen .z-name{font-weight:700;font-size:.92rem;display:block}
.zonen .z-text{font-size:.82rem;color:var(--leiser);line-height:1.55}
@media(min-width:520px){ .zonen{grid-template-columns:1fr 1fr} }
@media(min-width:900px){ .zonen{grid-template-columns:1fr} }

/* ==========================================================================
   KATEGORIEN
   ========================================================================== */

.karten{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:640px){ .karten{grid-template-columns:1fr 1fr} }
@media(min-width:1080px){ .karten{grid-template-columns:repeat(3,1fr)} }

.karte{
  border:1px solid var(--linie);
  padding:var(--s4);
  display:flex; flex-direction:column;
  background:linear-gradient(178deg,var(--flaeche) 0%,transparent 62%);
  position:relative;
  transition:border-color var(--ruhig),transform var(--ruhig);
}
.karte::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,var(--rot),transparent 72%);
  opacity:0; transition:opacity var(--ruhig);
}
.karte:hover{border-color:var(--linie-rot);transform:translateY(-3px)}
.karte:hover::before{opacity:1}
@media(prefers-reduced-motion:reduce){ .karte:hover{transform:none} }

.karte.hervor{
  border-color:var(--linie-rot);
  background:linear-gradient(178deg,rgba(200,16,46,.09) 0%,transparent 60%);
}
.karte .k-band{
  position:absolute; top:0; right:0;
  font-size:.56rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone);
  background:var(--rot); padding:.32rem .6rem;
}
.karte .k-nr{
  font-size:var(--t-label); font-weight:700; letter-spacing:.24em;
  color:var(--sehrleise); margin-bottom:var(--s3);
}
.karte h3{margin-bottom:.55rem}
.karte .k-claim{
  font-size:.9rem; line-height:1.55; color:var(--leise);
  margin-bottom:var(--s3); padding-bottom:var(--s3);
  border-bottom:1px solid var(--linie-fein);
}
.karte .liste{margin-bottom:var(--s3)}
.karte .liste li{padding:.5rem 0;font-size:.86rem;line-height:1.5}
.karte .liste li::before{margin-top:.5rem;width:4px;height:4px}
.karte .k-fuss{
  margin-top:auto; padding-top:var(--s3);
  border-top:1px solid var(--linie-fein);
  font-size:.74rem; line-height:1.55; color:var(--sehrleise);
}
.karte .k-fuss b{color:var(--rot-hell);font-weight:700}

/* ==========================================================================
   GALERIE
   ========================================================================== */

.galerie{
  display:grid; gap:var(--s2);
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:minmax(0,auto);
}
@media(min-width:760px){ .galerie{grid-template-columns:repeat(4,1fr);gap:var(--s2)} }

.galerie .bild{aspect-ratio:3/4}
.galerie .bild.hoch{aspect-ratio:2/3}
.galerie .bild.breit{grid-column:span 2;aspect-ratio:3/2}
@media(min-width:760px){
  .galerie .bild.gross{grid-column:span 2;grid-row:span 2;aspect-ratio:1/1}
}

/* ==========================================================================
   FRAGEN
   ========================================================================== */

.fragen{border-top:1px solid var(--linie)}
.frage{border-bottom:1px solid var(--linie-fein)}
.frage summary{
  cursor:pointer; list-style:none;
  padding:var(--s3) 2.6rem var(--s3) 0;
  position:relative;
  font-family:"Cocogoose",sans-serif; font-weight:300;
  font-size:var(--t-klein); line-height:1.35; letter-spacing:-.012em;
  transition:color var(--zart);
  -webkit-tap-highlight-color:transparent;
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{
  content:""; position:absolute; right:.5rem; top:50%;
  width:11px; height:1px; background:var(--rot-hell);
  transition:transform var(--zart);
}
.frage summary::before{
  content:""; position:absolute; right:.5rem; top:50%;
  width:11px; height:1px; background:var(--rot-hell);
  transform:rotate(90deg);
  transition:transform var(--zart),opacity var(--zart);
}
.frage[open] summary::before{transform:rotate(0);opacity:0}
.frage summary:hover{color:var(--rot-hell)}
.frage .antwort{
  padding:0 var(--s5) var(--s4) 0;
  color:var(--leise); font-size:.94rem; line-height:1.7;
  max-width:44rem;
}
.frage .antwort p{margin-bottom:var(--s2)}

/* ==========================================================================
   FUSSZEILE
   ========================================================================== */

.fuss{
  border-top:1px solid var(--linie);
  padding-block:var(--s6) var(--s5);
  position:relative; z-index:2;
}
.fuss-oben{display:grid;gap:var(--s5);grid-template-columns:1fr;
  margin-bottom:var(--s5)}
@media(min-width:760px){ .fuss-oben{grid-template-columns:1.4fr 1fr 1fr} }

.fuss h2{font-size:var(--t-mittel);margin-bottom:var(--s3)}
.fuss .f-titel{
  font-size:var(--t-label); font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--sehrleise); margin-bottom:var(--s3);
}
.fuss ul{list-style:none;margin:0;padding:0}
/* Tippflaeche statt Textzeile: die Links in den Listen sind fuer den
   Daumen gedacht, deshalb bekommen sie Hoehe. Reine Textlinks im
   Fliesstext bleiben inline - dort waere zusaetzliche Hoehe stoerend. */
.fuss li{font-size:.9rem}
.fuss li a{display:inline-block;padding-block:.55rem;min-height:2.6rem;
  line-height:1.5rem}
.fuss a{color:var(--leise);transition:color var(--zart)}
.fuss a:hover{color:var(--bone)}
.fuss .person{margin-bottom:var(--s3);font-size:.9rem;line-height:1.6}
.fuss .person b{display:block;color:var(--bone);font-weight:700}
.fuss .person span{color:var(--sehrleise);font-size:.8rem;display:block;
  margin-bottom:.2rem}

.fuss-unten{
  border-top:1px solid var(--linie-fein);
  padding-top:var(--s4);
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4);
  align-items:center;
  font-size:.72rem; color:var(--sehrleise);
}
.fuss-unten nav{display:flex;gap:var(--s3);flex-wrap:wrap}
.fuss-unten nav a{display:inline-block;padding-block:.7rem;min-height:2.6rem;
  line-height:1.2rem}
.fuss-logos{margin-left:auto;display:flex;align-items:center;gap:.8rem;
  opacity:.55}
.fuss-logos img{height:1rem;width:auto}
.fuss-logos .roomers{height:.5rem}

/* ==========================================================================
   KLEBELEISTE FUER MOBIL
   ========================================================================== */

.leiste{
  position:fixed; inset:auto 0 0 0; z-index:85;
  background:rgba(8,9,10,.93);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--linie);
  padding:.7rem var(--rand);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:var(--s3);
  transform:translateY(105%);
  transition:transform var(--ruhig);
}
.leiste.da{transform:translateY(0)}
.leiste .l-text{flex:1 1 auto;min-width:0}
.leiste .l-titel{
  font-size:.7rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.leiste .l-unten{font-size:.68rem;color:var(--sehrleise);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.leiste .knopf{flex:0 0 auto;min-height:2.85rem;padding:.7rem 1.35rem;
  font-size:.68rem}

@media(min-width:900px){ .leiste{display:none} }

/* ==========================================================================
   ANMELDEFORMULAR
   ========================================================================== */

.anmeldung{
  border:1px solid var(--linie);
  background:
    linear-gradient(178deg,rgba(200,16,46,.055) 0%,transparent 34%),
    var(--flaeche);
  padding:clamp(1.35rem,4vw,3rem);
  max-width:52rem;
}

/* Fortschritt: drei Striche, der laufende ist rot */
.schritte{
  display:flex; gap:var(--s2); margin-bottom:var(--s5);
  counter-reset:schritt;
}
.schritte div{
  flex:1 1 0; display:grid; gap:.55rem;
}
.schritte i{
  display:block; height:2px; background:var(--linie);
  transition:background var(--ruhig);
}
.schritte b{
  font-size:.58rem; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--sehrleise);
  transition:color var(--ruhig);
}
.schritte div.jetzt i{background:var(--rot-hell)}
.schritte div.jetzt b{color:var(--bone)}
.schritte div.fertig i{background:var(--rot-tief)}
.schritte div.fertig b{color:var(--leiser)}

fieldset{border:0;margin:0;padding:0;min-width:0}
legend{
  font-family:"Cocogoose",sans-serif; font-weight:300;
  font-size:var(--t-mittel); line-height:1.2; letter-spacing:-.018em;
  margin-bottom:.5rem; padding:0;
}
.f-erklaerung{
  color:var(--leiser); font-size:.9rem; line-height:1.6;
  margin-bottom:var(--s4); max-width:34rem;
}

/* ---- Kategorie-Auswahl als Karten ---- */

.wahl{display:grid;gap:.6rem;margin-bottom:var(--s4)}
@media(min-width:640px){ .wahl{grid-template-columns:1fr 1fr} }

.wahl label{
  position:relative; display:block; cursor:pointer;
  border:1px solid var(--linie);
  padding:var(--s3) var(--s3) var(--s3) 3rem;
  transition:border-color var(--zart),background var(--zart);
  -webkit-tap-highlight-color:transparent;
}
.wahl label:hover{border-color:var(--linie-rot)}
.wahl input{
  position:absolute; opacity:0; width:1px; height:1px;
  left:1.15rem; top:1.35rem;
}
/* Die Markierung ist ein gedrehtes Quadrat - der gleiche Rhombus wie in
   den Aufzaehlungen. Sie haengt am Geschwisterelement des Feldes, damit
   sie auch ohne :has() umschaltet. Nur die Rahmenfarbe der Karte braucht
   :has(), und das ist reine Zugabe. */
.wahl .w-inhalt::before{
  content:""; position:absolute; left:1.15rem; top:1.42rem;
  width:11px; height:11px; border:1px solid var(--sehrleise);
  transform:rotate(45deg);
  transition:border-color var(--zart),background var(--zart),
             box-shadow var(--zart);
}
.wahl input:checked + .w-inhalt::before{
  background:var(--rot-hell); border-color:var(--rot-hell);
  box-shadow:0 0 14px 2px rgba(228,34,62,.5);
}
.wahl label:has(input:checked){
  border-color:var(--rot);
  background:rgba(200,16,46,.075);
}
.wahl input:focus-visible + .w-inhalt{outline:2px solid var(--rot-hell);
  outline-offset:6px}
.wahl .w-inhalt{display:block}

/* Die drei Zeilen der Auswahlkarte sind span-Elemente, damit sie im
   Label stehen duerfen. Ohne display:block liefen sie in eine Zeile. */
.w-titel{
  display:block;
  font-family:"Cocogoose",sans-serif; font-weight:300;
  font-size:1.06rem; line-height:1.25; letter-spacing:-.012em;
  margin-bottom:.28rem;
}
.w-text{display:block;font-size:.82rem;line-height:1.5;color:var(--leiser)}
.w-hinweis{
  display:block;
  font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rot-hell); margin-top:.5rem;
}

/* ---- Felder ---- */

.felder{display:grid;gap:var(--s3);margin-bottom:var(--s4)}
@media(min-width:640px){
  .felder{grid-template-columns:1fr 1fr;column-gap:var(--s3)}
  .felder .weit{grid-column:1 / -1}
}

.feld{display:grid;gap:.45rem;min-width:0}
.feld > label,
.feldgruppe > .g-titel{
  font-size:.6rem; font-weight:700; letter-spacing:.19em;
  text-transform:uppercase; color:var(--sehrleise);
}
.feld > label .pflicht{color:var(--rot-hell);margin-left:.2rem}
.feld .hilfe{font-size:.74rem;color:var(--sehrleise);line-height:1.5}

.feld input[type=text],
.feld input[type=email],
.feld input[type=tel],
.feld input[type=url],
.feld input[type=number],
.feld select,
.feld textarea{
  width:100%;
  background:var(--bg);
  border:1px solid var(--linie);
  color:var(--bone);
  padding:.82rem .95rem;
  font-size:1rem;                 /* 16 px verhindert das Zoomen auf iPhones */
  line-height:1.4;
  border-radius:0;
  -webkit-appearance:none; appearance:none;
  transition:border-color var(--zart),background var(--zart);
  min-height:3.15rem;
}
.feld textarea{min-height:7.5rem;resize:vertical;line-height:1.65}
.feld select{
  padding-right:2.4rem; cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--leiser) 50%),
    linear-gradient(135deg,var(--leiser) 50%,transparent 50%);
  background-position:calc(100% - 19px) 1.44rem,calc(100% - 13px) 1.44rem;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
.feld input:hover,.feld select:hover,.feld textarea:hover{
  border-color:rgba(237,228,225,.24)}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none; border-color:var(--rot); background:var(--flaeche-hoch)}
.feld input::placeholder,.feld textarea::placeholder{color:rgba(237,228,225,.26)}

/* Zahlen-Wahl fuer die Personenzahl: Knoepfe statt Zahlenfeld,
   damit es auf dem Handy mit einem Daumen geht. */
.zaehler{display:flex;align-items:stretch;gap:0;max-width:12rem}
.zaehler button{
  width:3.15rem; min-height:3.15rem;
  border:1px solid var(--linie); background:var(--bg);
  color:var(--bone); cursor:pointer; font-size:1.15rem; line-height:1;
  transition:border-color var(--zart),background var(--zart);
  -webkit-tap-highlight-color:transparent;
}
.zaehler button:hover{border-color:var(--rot);background:rgba(200,16,46,.1)}
.zaehler input{
  width:4rem; text-align:center; border-inline:0 !important;
  font-variant-numeric:tabular-nums; font-weight:700;
  -moz-appearance:textfield;
}
.zaehler input::-webkit-outer-spin-button,
.zaehler input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Mehrfachauswahl als Marken */
.marken{display:flex;flex-wrap:wrap;gap:.4rem}
.marken label{
  position:relative; cursor:pointer;
  border:1px solid var(--linie);
  padding:.58rem .9rem;
  font-size:.8rem;
  transition:border-color var(--zart),background var(--zart),color var(--zart);
  -webkit-tap-highlight-color:transparent;
}
.marken input{position:absolute;opacity:0;width:1px;height:1px}
.marken label:has(input:checked){
  border-color:var(--rot); background:rgba(200,16,46,.13); color:var(--bone)}
.marken label:hover{border-color:var(--linie-rot)}
.marken input:focus-visible + span{outline:2px solid var(--rot-hell);
  outline-offset:5px}

/* Einwilligungen */
.zustimmungen{display:grid;gap:var(--s3);margin-bottom:var(--s4)}
.zustimmung{
  display:grid; grid-template-columns:1.5rem 1fr; gap:var(--s2);
  align-items:start; cursor:pointer;
  font-size:.86rem; line-height:1.62; color:var(--leise);
}
.zustimmung input{
  appearance:none; -webkit-appearance:none;
  width:1.15rem; height:1.15rem; margin:.2rem 0 0;
  border:1px solid var(--sehrleise); background:var(--bg);
  cursor:pointer; position:relative; flex:0 0 auto;
  transition:border-color var(--zart),background var(--zart);
}
.zustimmung input:checked{background:var(--rot);border-color:var(--rot)}
.zustimmung input:checked::after{
  content:""; position:absolute; left:3px; top:.5px;
  width:5px; height:9px; border:solid var(--bone);
  border-width:0 1.5px 1.5px 0; transform:rotate(45deg);
}
.zustimmung a{border-bottom:1px solid var(--linie-rot)}
.zustimmung .pflicht{color:var(--rot-hell)}

/* Fehler */
.feld.fehlerhaft input,
.feld.fehlerhaft select,
.feld.fehlerhaft textarea{border-color:var(--rot-hell);
  background:rgba(200,16,46,.06)}
.feldfehler{
  font-size:.76rem; line-height:1.5; color:var(--rot-hell);
  display:none;
}
.feld.fehlerhaft .feldfehler,
.zustimmung.fehlerhaft .feldfehler{display:block}
.zustimmung.fehlerhaft{color:var(--bone)}

.sammelfehler{
  border:1px solid var(--rot);
  background:rgba(200,16,46,.1);
  padding:var(--s3);
  margin-bottom:var(--s4);
  font-size:.88rem; line-height:1.6;
}
.sammelfehler b{display:block;margin-bottom:.3rem}
.sammelfehler[hidden]{display:none}

/* Steuerung */
.f-steuerung{
  display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center;
  padding-top:var(--s4); border-top:1px solid var(--linie-fein);
}
.f-steuerung .rechts{margin-left:auto;display:flex;gap:var(--s2)}
.f-steuerung .hinweis{font-size:.74rem;color:var(--sehrleise);
  flex:1 1 100%; order:3}

/* Zweige nur zeigen, wenn sie gebraucht werden */
.zweig[hidden]{display:none}
.feld[hidden]{display:none}
.schritt[hidden]{display:none}

/* Ladezustand */
.knopf.laedt{pointer-events:none;color:transparent}
.knopf.laedt::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:15px; height:15px;
  border:1.5px solid rgba(237,228,225,.28);
  border-top-color:var(--bone);
  border-radius:50%;
  animation:dreht .7s linear infinite;
  z-index:2;
}
@keyframes dreht{to{transform:rotate(360deg)}}

/* ---- Erfolgszustand ---- */

.erfolg{text-align:center;padding:var(--s5) 0}
.erfolg[hidden]{display:none}
.erfolg .siegel{
  width:64px; height:64px; margin:0 auto var(--s4);
  display:grid; place-items:center;
  border:1px solid var(--rot);
  background:radial-gradient(circle at 50% 50%,
    rgba(200,16,46,.28),transparent 70%);
}
.erfolg .siegel svg{width:30px;height:30px}
.erfolg h3{
  font-size:var(--t-mittel); margin-bottom:var(--s3);
}
.erfolg p{color:var(--leise);max-width:30rem;margin-inline:auto}
.erfolg .ref{
  display:inline-block; margin-top:var(--s4);
  border:1px solid var(--linie); padding:.75rem 1.4rem;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sehrleise);
}
.erfolg .ref b{color:var(--bone);font-weight:700;letter-spacing:.1em}

/* Geschlossene Anmeldung */
.geschlossen{
  border:1px solid var(--linie-rot); background:rgba(200,16,46,.08);
  padding:var(--s4); max-width:38rem;
}
.geschlossen[hidden]{display:none}

/* Nur fuer Hilfsprogramme, optisch versteckt */
.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;
}
/* Honigtopf - fuer Menschen unerreichbar, fuer Skripte sichtbar */
.honig{
  position:absolute !important; left:-9999px !important;
  width:1px !important; height:1px !important; overflow:hidden;
  opacity:0 !important; pointer-events:none;
}

/* ==========================================================================
   RECHTSTEXT-SEITEN
   ========================================================================== */

.rechtstext{max-width:46rem;padding-block:var(--s7) var(--s6)}
.rechtstext h1{font-size:var(--t-gross);line-height:1.08;
  margin-bottom:var(--s4)}
.rechtstext h2{font-size:var(--t-mittel);margin:var(--s5) 0 var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--linie-fein)}
.rechtstext h3{font-size:var(--t-klein);margin:var(--s4) 0 var(--s2)}
.rechtstext p,.rechtstext li{color:var(--leise);font-size:.96rem;
  line-height:1.78}
.rechtstext ul,.rechtstext ol{padding-left:1.3rem;margin-bottom:var(--s3)}
.rechtstext li{margin-bottom:.5rem}
.rechtstext a{color:var(--bone);border-bottom:1px solid var(--linie-rot)}
.rechtstext .platzhalter{
  background:rgba(200,16,46,.14); border-bottom:1px dashed var(--rot);
  padding:0 .2rem; color:var(--bone);
}
.rechtstext table{width:100%;border-collapse:collapse;font-size:.84rem;
  margin-bottom:var(--s4)}
.rechtstext th,.rechtstext td{border:1px solid var(--linie);
  padding:.6rem .7rem;text-align:left;vertical-align:top}
.rechtstext th{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sehrleise);font-weight:700}
.rechtstext .tabellenrahmen{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ==========================================================================
   DRUCK
   ========================================================================== */

@media print{
  .korn,.vignette,.glut,.leiste,.kopf,.hero-hinweis{display:none !important}
  body{background:#fff;color:#000}
  .bild img{filter:none !important}
  a{color:#000}
}

/* ==========================================================================
   HILFSKLASSEN

   Sie ersetzen die frueheren style="..."-Attribute in den Seiten.
   Der Grund ist nicht Ordnungsliebe, sondern die Sicherheitsrichtlinie:
   ein Stil-Attribut faellt unter style-src-attr, und diese Direktive
   kennen aeltere Safari- und Firefox-Fassungen nicht. Dort greift dann
   style-src - und weil dort nur eine Nonce steht, waeren saemtliche
   Stil-Attribute blockiert und das Layout kaputt. Ohne Attribute kann
   die Richtlinie ueberall streng bleiben.
   ========================================================================== */

.mt-2{margin-top:var(--s2)}
.mt-3{margin-top:var(--s3)}
.mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)}
.mb-3{margin-bottom:var(--s3)}
.mb-4{margin-bottom:var(--s4)}
.mb-5{margin-bottom:var(--s5)}
.my-4{margin-block:var(--s4)}
.m-0{margin:0}
.mt-2-0{margin:var(--s2) 0 0}

.breite-26{max-width:26rem}
.breite-32{max-width:32rem;margin-inline:auto}
.breite-34{max-width:34rem}
.strich-kurz{max-width:3rem}

.mittig{text-align:center;display:block}
.h-mittel{font-size:var(--t-mittel)}
.h-seitentitel{font-size:var(--t-gross);line-height:1.04}
.abschnitt-hoch{padding-top:clamp(7rem,16vh,10rem)}

/* Die letzte Kachel in den fuenf Wegen: keine Kategorie, sondern die
   Einladung, sich trotzdem zu melden. */
.karte.karte-frage{
  justify-content:center; text-align:center;
  background:linear-gradient(178deg,rgba(200,16,46,.14),transparent 70%);
}

/* ==========================================================================
   PREISE AUF DEN KARTEN

   Der Preis ist die Zahl, auf die jeder zuerst schaut. Er steht deshalb
   direkt unter der Ueberschrift, gross genug zum Erfassen, aber in Bone
   statt Crimson - Rot ist auf dieser Seite dem Baum vorbehalten, nicht
   dem Kassenzettel.
   ========================================================================== */

.k-preis{
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap:.5rem .7rem;
  margin:-.35rem 0 var(--s3);
}
.p-zahl{
  font-family:"Cocogoose",Georgia,serif;
  font-weight:300;
  font-size:clamp(1.9rem,5.5vw,2.4rem);
  line-height:1;
  letter-spacing:-.022em;
  color:var(--bone);
}
/* Der Zimmerpreis kommt zum Dinnerpreis hinzu, steht also kleiner daneben */
.p-plus{ font-size:.62em; color:var(--leiser); letter-spacing:0; }
.p-klein{
  font-family:"CocogooseText",-apple-system,system-ui,sans-serif;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--leiser);
}

/* Verweis auf die Dinnerseite, sitzt am Fuss der Karte */
.k-mehr{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:var(--s2);
  font-family:"CocogooseText",-apple-system,system-ui,sans-serif;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bone); text-decoration:none;
  border-bottom:1px solid rgba(237,228,225,.28);
  padding-bottom:.25rem;
  transition:border-color var(--zart),color var(--zart);
}
.k-mehr::after{ content:"\2192"; transition:transform var(--zart); }
.k-mehr:hover{ color:var(--rot); border-color:var(--rot); }
.k-mehr:hover::after{ transform:translateX(3px); }

@media(max-width:719px){
  .k-preis{ margin-bottom:var(--s2); }
  .p-klein{ font-size:.66rem; }
  /* Auf dem Handy wird mit dem Daumen getippt, nicht mit dem Mauszeiger.
     Der Verweis bekommt deshalb Hoehe, ohne optisch groesser zu werden -
     die Unterkante bleibt da, wo sie war. */
  .k-mehr{
    min-height:44px;
    padding-top:.9rem;
    padding-bottom:.55rem;
    margin-top:calc(var(--s2) - .5rem);
  }
}

/* ==========================================================================
   DINNERSEITE - BILDRASTER

   Die Vorlage vom Haus ist eine Collage aus sechs Aufnahmen, 3 x 2.
   Statt sie in sechs Dateien zu schneiden, zeigt jede Kachel dieselbe
   Datei und verschiebt nur den Ausschnitt. Das ist pixelgenau, spart
   fuenf Anfragen, und der Browser laedt das Bild genau einmal.

   background-size:300% 200%  blaest das Bild auf die dreifache Breite
   und doppelte Hoehe der Kachel - dann zeigt jede Kachel genau ein
   Sechstel. background-position waehlt welches.
   ========================================================================== */

.tafel-raster{
  display:grid;
  /* Auf dem Handy zwei Spalten, nicht eine. Sechs Bilder untereinander
     waeren ueber 3000 Pixel Scrollweg - in zwei Spalten die Haelfte, und
     als Raster liest man sie ohnehin schneller. */
  grid-template-columns:repeat(2,1fr);
  gap:2px;
  background:var(--linie-fein);
  border:1px solid var(--linie);
}
.tafel-bild{
  margin:0;
  aspect-ratio:2 / 3;
  background-image:url("/img/manon-tafel-1024.jpg");
  background-size:300% 200%;
  background-repeat:no-repeat;
  filter:saturate(.92) brightness(.94);
  transition:filter var(--ruhig), transform var(--ruhig);
}
.t1{background-position:0%   0%}
.t2{background-position:50%  0%}
.t3{background-position:100% 0%}
.t4{background-position:0%   100%}
.t5{background-position:50%  100%}
.t6{background-position:100% 100%}

@media(hover:hover){
  .tafel-bild:hover{ filter:saturate(1.05) brightness(1.02); }
}

@media(min-width:560px){
  .tafel-raster{ grid-template-columns:repeat(3,1fr); }
}
@media(min-width:1100px){
  .tafel-raster{ gap:3px; }
}

/* Auf sehr grossen Schirmen die Datei in besserer Aufloesung nachladen */
@media(min-width:900px){
  .tafel-bild{ background-image:url("/img/manon-tafel-1600.jpg"); }
}

/* Zwei Spalten fuer "was ist drin" - mobil untereinander */
.zwei-spalten{
  display:grid; grid-template-columns:1fr; gap:var(--s5);
}
@media(min-width:760px){
  .zwei-spalten{ grid-template-columns:1fr 1fr; gap:var(--s6); }
}

/* Nur fuer Vorleseprogramme sichtbar */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}