/* ==========================================================================
   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;
  /* Die drei Abstufungen sind angehoben. Gemessen auf dem Grund
     #08090A lagen sie bei 8,8:1, 5,1:1 und 2,6:1 - der schwaechste
     Ton war damit unter dem, was als lesbar gilt (4,5:1), und genau
     der traegt die Beschriftungen ueber den Feldern, die Fusszeilen
     und die Zahlenkacheln. Jetzt 11,2:1, 7,2:1 und 5,7:1.

     Der Abstand zwischen den Stufen bleibt erhalten, die Hierarchie
     also auch - es wird nur alles eine Stufe klarer. */
  --leise:rgba(237,228,225,.84);
  --leiser:rgba(237,228,225,.66);
  --sehrleise:rgba(237,228,225,.58);

  --rot:#C8102E;
  --rot-hell:#E4223E;
  /* Rot als Schrift: #C8102E kommt auf dem dunklen Grund nur auf
     3,4:1 und ist in kleinen Groessen kaum zu entziffern. Dieser Ton
     liegt bei 7:1 und bleibt trotzdem dasselbe Rot. Fuer Flaechen,
     Raender und Knoepfe weiter --rot verwenden. */
  --rot-schrift:#F2707F;
  --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}
}

/* --------------------------------------------------------------------------
   GAESTELISTE

   Die Seite hinter dem Einladungslink. Sie benutzt die Bausteine der
   Hauptseite - Fakten, Zeitstrahl, Abschnitte -, braucht aber drei
   eigene Dinge: einen Kopf ohne Bildflaeche, ein Raster fuer die vier
   Hinweiskaesten, und einen Schlussblock, der den Knopf ein zweites Mal
   traegt, ohne wie eine Wiederholung zu wirken.
   -------------------------------------------------------------------------- */
/* Kein Abstand oben: der Kopf traegt jetzt selbst ein Bild und muss
   unter der Kopfzeile beginnen, nicht darunter schweben. */
.gl-seite{ padding-top:0; }
/* Der erste Abschnitt nach dem Kopf sitzt naeher dran - das Bild
   ist dort schon schwarz, ein zusaetzlicher Abstand liesse ein
   Loch. */
.gl-hero + .abschnitt{ padding-top:clamp(2.5rem, 6vh, 4rem); }

/* Der Kopf. Wie der Hero der Startseite, aber niedriger - hier steht
   der Knopf mit im Bild, und wer eingeladen ist, soll ihn sehen, ohne
   zu scrollen. Deshalb keine volle Bildschirmhoehe. */
/* Der Kopf ist EIN Block: Bild, Schriftzug, Text, Knopf und die
   Faktenreihe stehen zusammen darin. Vorher endete das Bild mit einer
   sichtbaren Kante, und darunter fing eine neue Flaeche an - zwei
   Sachen, die nichts miteinander zu tun hatten. Jetzt laeuft das Bild
   nach unten ins Schwarz aus, und die Fakten stehen noch darin. */
.gl-hero{
  position:relative;
  display:grid; align-items:end;
  overflow:hidden;
  isolation:isolate;
  padding-top:clamp(4rem, 9vh, 6rem);
}
.gl-hero-bild{ position:absolute; inset:0; z-index:-2; }
.gl-hero-bild img{
  width:100%; height:100%; object-fit:cover; object-position:50% 34%;
  /* Deutlich dunkler als auf der Startseite. Dort traegt das Bild die
     ganze Flaeche und darf wirken; hier ist es Grund fuer Schriftzug,
     Text, Knopf und vier Zahlen - ein kraeftiges Motiv darunter macht
     alles davon schwerer lesbar und nichts davon besser. */
  filter:saturate(.42) brightness(.6) contrast(1.16);
  transform:scale(1.04);
}
.gl-hero-bild::after{
  content:""; position:absolute; inset:0;
  background:
    /* Nach unten frueh und vollstaendig ins Schwarz: unter dem Kopf
       folgt eine schwarze Flaeche, und dazwischen darf keine Kante
       stehen. Oben etwas Dunkelheit, damit die Kopfzeile nicht auf dem
       Motiv schwimmt. */
    linear-gradient(to top,
      var(--bg) 0%, var(--bg) 12%, rgba(8,9,10,.88) 30%,
      rgba(8,9,10,.52) 58%, rgba(8,9,10,.28) 82%, rgba(8,9,10,.6) 100%),
    linear-gradient(to right,
      rgba(8,9,10,.66) 0%, rgba(8,9,10,.3) 44%, transparent 76%);
}

/* Die Fakten stehen im Bild, nicht darunter: kein eigener Grund, nur
   feine Linien. */
.gl-fakten{
  margin-top:clamp(2rem, 5vh, 3.2rem);
  background:transparent;
  border-block:1px solid rgba(237,228,225,.16);
}
.gl-fakten .fakt{ background:transparent; }
.gl-hero-innen{
  position:relative; z-index:3; width:100%;
  padding-block:clamp(2.5rem, 7vh, 4.5rem) clamp(3rem, 8vh, 5rem);
}
.gl-hero-innen .ein-marke{ margin-bottom:clamp(1rem, 3vh, 1.8rem); }
/* Letzte Absicherung gegen einen Ueberlauf: passt der Schriftzug trotz
   allem nicht, wird er verkleinert statt herauszuragen. */
.gl-hero .bb-lockup{ max-width:100%; }
.gl-hero .bb-event{ max-width:100%; }
.gl-hero-innen .bb-event{ margin-bottom:clamp(1.4rem, 4vh, 2.4rem); }
.gl-hero-text{ margin-bottom:clamp(1.6rem, 4vh, 2.4rem); }

/* Der Schriftzug. Die Obergrenze war viel zu niedrig und zusaetzlich an
   die Fensterhoehe gekoppelt - auf einem breiten, flachen Monitor kam
   dabei eine Schrift heraus, die ein Drittel der Flaeche fuellte und
   den Rest leer stehen liess. Jetzt zaehlt vor allem die Breite. */
/* Die Groesse rechnet mit 6vw, nicht mit 8,6. Der Schriftzug ist rund
   acht Zeichen breit; bei 8,6vw wurde er breiter als die Spalte, in der
   er steht - Chrome laesst ihn dann ueberlaufen und er schiebt sich
   ueber den Knopf daneben, waehrend Safari das Raster anders aufloest
   und es unauffaellig bleibt. Ein Wert, der in beiden passt, ist besser
   als einer, der in einem von beiden schoener ist. */
.gl-hero .bb-event{ --bb-size:clamp(2rem, min(6vw, 15vh), 5.6rem); }

/* Auf breiten Bildschirmen zwei Spalten.
   Vorher stand alles - Marke, Schriftzug, Text, Knopf - in einer
   schmalen Saeule ganz links, und rechts daneben lagen achthundert
   Pixel Bild ohne Aufgabe. Das liest sich nicht als Komposition,
   sondern als abgeschnittene Handyansicht auf einem grossen Monitor.
   Jetzt traegt die linke Spalte den Schriftzug und den Text, die rechte
   den Knopf - und beide stehen auf derselben Grundlinie. */
@media(min-width:1080px){
  .gl-hero-innen{
    display:grid;
    /* min-content statt 0 als Untergrenze: die linke Spalte darf nicht
       schmaler werden als das, was darin steht. Sonst rutscht der
       Schriftzug darueber hinaus, und zwar lautlos - ein Ueberlauf
       wirft keinen Fehler, er sieht nur falsch aus. */
    grid-template-columns:minmax(min-content, 1.25fr) minmax(17rem, .75fr);
    grid-template-areas:
      "text  ruf"
      "fakten fakten";
    align-items:end;
    column-gap:clamp(2rem, 5vw, 5rem);
  }
  .gl-hero-kopftext{ grid-area:text; }
  .gl-hero-innen .gl-knopf-oben{
    grid-area:ruf; max-width:none; padding-bottom:.4rem;
  }
  .gl-fakten{ grid-area:fakten; }
  /* Der Text darf breiter laufen als die 34 Zeichen der Handyansicht -
     er hat hier eine eigene Spalte und keinen Knopf unter sich. */
  .gl-hero-text.breite-34{ max-width:44ch; }
}

/* Der Knopf oben steht allein, ohne die volle Breite der Textspalte -
   sonst wirkt er wie eine Formularschaltflaeche und nicht wie eine
   Einladung. */
.gl-knopf-oben{ max-width:26rem; }

.gl-raster{
  display:grid; gap:var(--s3);
  grid-template-columns:1fr;
  margin-top:var(--s4);
}
@media(min-width:760px){
  .gl-raster{ grid-template-columns:1fr 1fr; gap:var(--s4); }
}
.gl-raster .ein-block{ margin-top:0; }

/* Der Schluss hebt sich vom Rest ab: eine eigene Flaeche mit einem
   Schimmer Rot, damit der zweite Knopf nicht wie ein vergessener
   Zwilling des ersten aussieht, sondern wie das Ende eines Wegs. */
.gl-schluss{ padding-bottom:clamp(4rem, 9vh, 7rem); }
.gl-schluss-innen{
  border:1px solid var(--linie);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(200,16,46,.14), transparent 62%),
    var(--flaeche);
  padding:clamp(2rem, 5vw, 3.4rem);
  text-align:center;
}
.gl-schluss-innen .breite-34{ margin-inline:auto; }
.gl-schluss-innen .ein-marke{ margin-bottom:var(--s2); }
.gl-knopf-unten{ max-width:26rem; margin-inline:auto; }
.gl-schluss-innen .ein-fertig,
.gl-schluss-innen .ein-abgelaufen{ justify-content:center; text-align:left; }

/* ------------------------------------------------------- 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. */
  /* Das neue Titelmotiv bringt viel weisses Laserlicht mit. Der
     Schriftzug steht direkt darauf, deshalb faengt die Helligkeit
     tiefer an als beim vorigen Bild und zieht beim Scrollen nach. */
  /* Kontrast und Zoom bleiben niedriger als frueher: beides schaerft
     nicht, sondern hebt die Kompressionsspuren des Fotos hervor - und
     ein Bild, das ohnehin schon vergroessert wird, sieht dadurch
     matschig aus. Der Zoom beim Scrollen bleibt als Bewegung erhalten,
     nur setzt er jetzt bei 1,02 statt 1,07 an. */
  filter:
    saturate(calc(.42 + var(--blut) * .58))
    brightness(calc(.6 + var(--blut) * .22))
    contrast(calc(1.07 - var(--blut) * .04));
  transform:scale(calc(1.02 - var(--blut) * .02));
  image-rendering:auto;
  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,.62) 0%, rgba(8,9,10,.26) 44%, transparent 72%);
}

/* Auf dem Handy traegt das Titelbild ein eigenes Motiv: der Baum steht
   ueber dem Schriftzug, darunter wird es dunkel fuer Text und Knoepfe.
   Etwas heller als am Rechner - auf dem kleinen Schirm verschluckt die
   Abdunklung sonst genau das, was man sehen soll. */
@media(max-width:719px){
  .hero-bild img{
    filter:
      saturate(calc(.6 + var(--blut) * .4))
      brightness(calc(.72 + var(--blut) * .14))
      contrast(calc(1.03 - var(--blut) * .02));
    transform:scale(1); }
  .hero-bild::after{
    /* Der Baum leuchtet oben (ab 62 %), der Schriftzug steht darunter auf
       einem dunklen Band - rote Schrift auf rotem Laub liest sich sonst
       nicht. Die Prozentwerte zaehlen von unten. */
    background:
      /* Prozente zaehlen von unten. Die Zonen von unten nach oben:
         Knoepfe und Angaben (bis 33 %), der brennende Baum (35-50 %),
         das Band fuer den Schriftzug (54-62 %), darueber die Laser.
         Der Baum war vorher zu 90 % weggedunkelt und praktisch nicht
         zu sehen - jetzt bleibt er stehen, und Countdown und Angaben
         bekommen stattdessen einen Schatten. */
      linear-gradient(to top,
        var(--bg) 0%, rgba(8,9,10,.94) 24%, rgba(8,9,10,.86) 33%,
        rgba(8,9,10,.46) 41%, rgba(8,9,10,.36) 50%,
        rgba(8,9,10,.64) 56%, rgba(8,9,10,.72) 62%,
        rgba(8,9,10,.26) 73%, rgba(8,9,10,.12) 90%,
        rgba(8,9,10,.38) 100%); }
  /* Countdown und Angaben stehen jetzt teils auf dem Baum. */
  .countdown .z, .countdown .b,
  .hero-meta span, .hero-sub{
    text-shadow:0 1px 16px rgba(8,9,10,.9), 0 1px 3px rgba(8,9,10,.75); }
}


.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. */
/* Der Schriftzug im Hero kommt jetzt aus dem Lockup-Bauteil weiter
   unten. Hier bleibt nur, was die Ueberschrift als Block braucht - die
   Behandlung der Buchstaben macht .bb. */
.hero .bb-event{
  margin-bottom:var(--s4);
}


.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 .bb-event {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 .bb-event{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}

/* Hinweiskasten in den Rechtstexten. Er stand im Markup von imprint.html
   und privacy.html, ohne dass es je eine Regel dafuer gab - der Hinweis
   las sich dadurch wie Flowtext und ging genau da unter, wo er auffallen
   soll. Der rote Balken links ist derselbe wie an den Zitaten. */
.rechtstext .meldung{
  border-left:2px solid var(--rot);
  background:rgba(200,16,46,.06);
  padding:var(--s3) var(--s4);
  border-radius:2px;
  font-size:.9rem;line-height:1.62;color:var(--leise)}
.rechtstext .meldung b{color:var(--bone)}
.rechtstext .my-4{margin-block:var(--s4)}

/* ==========================================================================
   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;
}

/* ==========================================================================
   INSTAGRAM-FELD - LIVE-PRUEFUNG

   Zeigt, was aus der Eingabe wird, und laesst einmal nachsehen. Eine
   echte Namenssuche bei Instagram gibt es nicht - die oeffentliche
   Schnittstelle kennt keine, und der interne Weg braucht eine
   Anmeldung. Das hier loest das eigentliche Problem: den Tippfehler.
   ========================================================================== */

.ig-pruefen{
  display:flex; align-items:center; gap:.55rem;
  margin-top:.5rem;
  font-family:"CocogooseText",-apple-system,system-ui,sans-serif;
  font-size:.78rem;
  color:var(--leise);
}
.ig-zeichen{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.05rem; height:1.05rem; flex:none;
  border-radius:50%;
  background:rgba(200,16,46,.16);
  color:var(--rot-schrift);
  font-size:.62rem; line-height:1;
}
.ig-handle{ color:var(--leise); }

.ig-pruefen.ig-fehler .ig-zeichen{
  background:rgba(237,228,225,.10); color:var(--leiser);
}
.ig-pruefen.ig-fehler .ig-handle{ color:var(--leiser); }

/* --------------------------------------------------------------------------
   METAMORPHOUS - die Schrift des Schriftzugs

   Selbst gehostet, nicht von Google. Die Seite laedt grundsaetzlich
   nichts von fremden Servern: so steht es in der Datenschutzerklaerung,
   und die Sicherheitsrichtlinie wuerde eine fremde Quelle ohnehin
   blockieren.

   Lizenz: SIL Open Font License 1.1. Kommerzielle Nutzung und
   Web-Einbettung sind erlaubt. Die Lizenz verlangt, dass die
   Lizenzdatei mit den Schriftdateien ausgeliefert wird - sie liegt
   daher als /fonts/OFL-Metamorphous.txt neben den woff2-Dateien.

   Zwei Schnitte, aufgeteilt nach Zeichenbereich: der zweite traegt die
   Umlaute und die uebrigen europaeischen Akzente. Der Browser laedt nur
   den Bereich, den die Seite tatsaechlich braucht.
   -------------------------------------------------------------------------- */

@font-face{
  font-family:"Metamorphous";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/metamorphous-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:"Metamorphous";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/metamorphous-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   BLACK & BLOOD - WORDMARK LOCKUP

   Uebernommen aus dem gelieferten Bauteil. Angepasst wurde nur, was die
   Einbettung verlangt:

   1. --bb-font zeigt auf Cocogoose statt auf die Platzhalterschrift von
      Google. Die Seite laedt grundsaetzlich nichts von fremden Servern -
      das steht so in der Datenschutzerklaerung und die
      Sicherheitsrichtlinie wuerde es ohnehin blockieren.
   2. --bb-size ist deutlich groesser gesetzt. Die Vorgabe des Bauteils
      (max 84px) ist fuer Kopfzeilen gedacht; im Hero traegt der
      Schriftzug die ganze Seite und muss die Groesse der alten
      Ueberschrift halten.
   3. Anordnung: --minimal und --left. Beides nach den Regeln des
      Bauteils selbst - Red Tree steht bereits in der Kopfzeile, sonst
      liest es sich doppelt, und der Hero ist linksbuendig gesetzt.
   ========================================================================== */

:root{
  --bb-font: "Metamorphous", Georgia, serif;
  --bb-ui-font: "CocogooseText", -apple-system, system-ui, sans-serif;

  --bb-gold-deep:  #241804;
  --bb-gold-dark:  #7E5F1D;
  --bb-gold-mid:   #C79B3A;
  --bb-gold-light: #F0D993;
  --bb-gold-peak:  #FFF7D8;
  --bb-blood-deep: #2A0409;
  --bb-blood:      #B3122B;
  --bb-blood-lite: #E23046;
  /* Neonroehre: der Kern ist fast weiss mit einem Rosastich, die
     Farbe entsteht im Schein. Ein satt rot gefuellter Buchstabe
     sieht nach Aufkleber aus, nicht nach Licht. */
  --bb-neon-kern: #FFF3F5;
  /* Die Farbe der Roehrenwand - satt genug, um gegen den hellen Kern
     eine Kante zu bilden, aber nicht so dunkel, dass sie wie eine
     Schablone wirkt. */
  --bb-neon-rohr: #FF2440;
  --bb-neon-rand: #FF6B7F;
  --bb-neon-glut-farbe: #FF1E3C;
  --bb-neon-dauer: 14s;

  --bb-presenter-color: #C9A24B;
  --bb-rule-color: rgba(212,169,74,.55);

  /* Groesser als im Bauteil vorgesehen - siehe Punkt 2 oben.
     Metamorphous laeuft schmaler und hoeher als Cocogoose, deshalb
     etwas kleiner gesetzt und mit mehr Laufweite: die Zierformen
     brauchen Luft, sonst verhaken sich die Serifen ineinander. */
  --bb-size: clamp(2.3rem, min(11vw, 14vh), 7.6rem);
  --bb-duration: 6s;
  --bb-emblem-size: .82em;
  --bb-emblem-gap: .3em;
  --bb-letter-spacing: .035em;
}

.bb-event{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px, 2.4vw, 26px);
  text-align:center;
}
.bb-event--inline{
  flex-direction:row; align-items:center; text-align:left;
  gap:clamp(16px, 2.6vw, 32px); flex-wrap:wrap;
}
.bb-event--inline .bb-presenter{ align-items:flex-start; }
.bb-event--inline .bb-rt-word{ width:clamp(84px, 9vw, 124px); }
.bb-event--inline .bb-edition{ max-width:none; width:auto; }
.bb-event--inline .bb-edition::before{ display:none; }

.bb-event--minimal .bb-presenter{ display:none; }

.bb-event--left{ align-items:flex-start; text-align:left; }
.bb-event--left .bb-presenter{ align-items:flex-start; }
.bb-event--left .bb-edition::before{ display:none; }
/* Linksbuendig faellt die linke Haarlinie weg. Ohne Begrenzung liefe die
   rechte quer ueber die ganze Spalte - sie endet jetzt dort, wo auch der
   Schriftzug endet. */
.bb-event--left .bb-edition{ max-width:min(100%, 28rem); }

.bb-presenter{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.bb-kicker{
  font-family:var(--bb-ui-font);
  font-size:9.5px; letter-spacing:.42em; text-transform:uppercase;
  color:#8C7A62; font-weight:600; padding-left:.42em;
}
.bb-rt-word{
  width:clamp(112px, 15vw, 172px); height:auto; display:block;
  color:var(--bb-presenter-color);
}

.bb{
  font-family:var(--bb-font);
  font-size:var(--bb-size);
  font-weight:400; line-height:1.06; letter-spacing:var(--bb-letter-spacing);
  white-space:nowrap; margin:0;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* Raster statt Flex, mit Absicht: bei "1fr auto 1fr" werden beide
   Aussenspalten gleich breit, das Emblem sitzt damit auf der exakten
   Mitte des Schriftzugs - obwohl "Black" und "Blood" unterschiedlich
   breit sind. */
.bb-lockup{
  display:inline-grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:var(--bb-emblem-gap);
}
.bb-lockup > span:first-child{ justify-self:end; }
.bb-lockup > span:last-child{
  justify-self:start;
  margin-right:calc(var(--bb-letter-spacing) * -1);
}
.bb-emblem{
  width:var(--bb-emblem-size); height:var(--bb-emblem-size);
  flex:none; overflow:visible;
  /* Der globale Zurueckstzer setzt auf jedes svg  max-width:100%.
     In einer auto-Rasterspalte bezieht sich diese Prozentangabe auf
     eine Breite, die ihrerseits erst vom Inhalt bestimmt wird - das
     ist zirkulaer, und der Browser loest es mit null auf. Das Emblem
     verschwaende dann spurlos zwischen den beiden Woertern. */
  max-width:none;
}
.bb-lockup.bb-stack{
  display:inline-flex; flex-direction:column; align-items:center; gap:.14em;
}
.bb-lockup.bb-stack .bb-emblem{ width:1.15em; height:1.15em; order:-1; }

.bb--sweep{
  background-image:linear-gradient(100deg,
    #6E4B14 0%, #C9A24B 16%, var(--bb-gold-peak) 28%, #D9B45C 38%,
    #8A6320 50%, #E8CE86 66%, #FFFDF2 76%, #A97F2C 100%);
  background-size:280% 100%;
  animation:bb-sweep var(--bb-duration) linear infinite;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(212,169,74,.28));
}
@keyframes bb-sweep{ from{ background-position:0% 0; } to{ background-position:280% 0; } }

.bb--chrome{
  background-image:
    linear-gradient(105deg, transparent 34%, rgba(255,255,255,.9) 47%, transparent 60%),
    linear-gradient(180deg,
      var(--bb-gold-deep) 0%, var(--bb-gold-dark) 11%, var(--bb-gold-peak) 24%,
      var(--bb-gold-mid) 33%, #3E2B0C 45%, #FFFBE8 55%,
      #E7C86E 63%, #8A6520 74%, #2A1C06 85%, var(--bb-gold-light) 100%);
  background-size:260% 100%, 100% 100%;
  background-position:-160% 0, 0 0;
  animation:bb-glint var(--bb-duration) linear infinite;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.75));
}

.bb--blood{
  background-image:
    linear-gradient(105deg, transparent 36%, rgba(255,255,255,.85) 48%, transparent 60%),
    linear-gradient(180deg,
      var(--bb-blood-deep) 0%, var(--bb-blood) 13%, var(--bb-blood-lite) 22%,
      #FFE7B0 34%, #D4A94A 43%, #5C1010 54%,
      #FFF6DC 64%, #C9932F 73%, #7A0C1B 86%, var(--bb-gold-light) 100%);
  background-size:260% 100%, 100% 100%;
  background-position:-160% 0, 0 0;
  animation:bb-glint var(--bb-duration) linear infinite;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.75));
}
@keyframes bb-glint{
  from{ background-position:-160% 0, 0 0; }
  to  { background-position: 260% 0, 0 0; }
}

/* --------------------------------------------------------------------------
   NEONSCHILD

   Die Chromfassung lebt von einem Farbverlauf im Buchstaben - dafuer ist
   die Schrift durchsichtig und der Verlauf scheint hindurch
   (background-clip:text). Ein Neonschild funktioniert genau andersherum:
   die Roehre selbst ist fast weiss, die Farbe entsteht erst im Licht
   drumherum. Deshalb bekommt der Text hier wieder eine echte Farbe und
   das Leuchten kommt aus mehreren text-shadow-Lagen - von einem engen,
   harten Rand bis zu einem weiten, weichen Schein.

   Warum nicht filter:drop-shadow wie bei Chrom: drop-shadow legt sich um
   die Form als Ganzes. Neon braucht das Licht pro Buchstabenkontur, und
   das kann nur text-shadow.

   Das Flackern ist absichtlich sparsam. Eine Roehre, die im Sekundentakt
   zuckt, sieht nach kaputt aus, nicht nach Bar. Hier atmet die Glut
   langsam, und nur zweimal im Zyklus setzt sie fuer den Bruchteil einer
   Sekunde aus.
   -------------------------------------------------------------------------- */
/* Doppelt geschrieben, mit Absicht: .bb setzt die Fuellung auf
   transparent, weil die Chromfassung einen Verlauf durch die
   Buchstaben scheinen laesst. Steht .bb spaeter in der Datei -
   und das tut es -, gewinnt es bei gleicher Spezifitaet. Dann
   bleibt vom Neon nur der Schatten uebrig, und der Schriftzug
   sieht verwaschen aus. */
.bb.bb--neon{
  background-image:none;
  -webkit-background-clip:border-box; background-clip:border-box;
  color:var(--bb-neon-kern);
  -webkit-text-fill-color:var(--bb-neon-kern);
  filter:none;
  animation:bb-neon var(--bb-neon-dauer) ease-in-out infinite;
}

/* Die Glut liegt in einer eigenen Eigenschaft, damit die Trickfilmspur
   nur ihre Staerke aendern muss und nicht acht Schatten neu schreibt. */
@property --bb-neon-glut{ syntax:"<number>"; inherits:false; initial-value:1; }

.bb.bb--neon{
  /* Die Roehrenwand, und warum sie so umstaendlich gebaut ist:
     -webkit-text-stroke waere der direkte Weg, zeichnet die Kontur aber
     zur Haelfte nach innen. Metamorphous hat sehr feine Striche - die
     laufen davon vollstaendig zu, und aus dem hellen Kern wird eine
     rote Flaeche. paint-order:stroke fill soll das verhindern und tut
     es fuer HTML-Text nicht zuverlaessig.
     Acht Schatten ohne Weichzeichnung, rund um die Null gelegt, ergeben
     dieselbe Kante - und liegen garantiert HINTER der Fuellung.
     Danach erst die Glut, in drei enger werdenden Lagen. */
  text-shadow:
     .022em 0      0 var(--bb-neon-rohr),
    -.022em 0      0 var(--bb-neon-rohr),
     0      .022em 0 var(--bb-neon-rohr),
     0     -.022em 0 var(--bb-neon-rohr),
     .016em .016em 0 var(--bb-neon-rohr),
    -.016em .016em 0 var(--bb-neon-rohr),
     .016em -.016em 0 var(--bb-neon-rohr),
    -.016em -.016em 0 var(--bb-neon-rohr),
     0 0 .13em rgba(255,36,64,.85),
     0 0 .38em rgba(220,20,52,.5),
     0 0 .95em rgba(200,16,46,.24);
}

@keyframes bb-neon{
  /* Fast die ganze Runde steht der Schriftzug ruhig. Ein einziger
     Aussetzer, und der nur halb - eine gute Roehre zuckt selten. */
  0%, 100%{ opacity:1; }
  55%{ opacity:.96; }
  72%{ opacity:1; }
  72.5%{ opacity:.66; }
  73.2%{ opacity:1; }
}

/* Der Baum in der Mitte ist Teil desselben Schilds und muss mitleuchten,
   sonst sitzt ein mattes Zeichen zwischen zwei gluehenden Woertern. */
.bb.bb--neon .bb-emblem{
  filter:
    drop-shadow(0 0 .035em var(--bb-neon-rohr))
    drop-shadow(0 0 .16em rgba(255,30,60,.7))
    drop-shadow(0 0 .5em rgba(200,16,46,.4));
}


.bb-edition{
  display:flex; align-items:center; gap:16px;
  width:100%; max-width:640px; margin:0;
  font-family:var(--bb-ui-font);
  font-size:clamp(9.5px, 1.5vw, 12px); letter-spacing:.38em;
  text-transform:uppercase; color:var(--bb-gold-mid); font-weight:600;
  padding-left:.38em;
}
.bb-edition::before, .bb-edition::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--bb-rule-color));
}
.bb-edition::after{ background:linear-gradient(90deg, var(--bb-rule-color), transparent); }

.bb-flicker{ display:inline-block; animation:bb-flicker 5.5s steps(1, end) infinite; }
@keyframes bb-flicker{
  0%, 38%{ opacity:1; }
  39%{ opacity:.35; } 40%{ opacity:1; } 41.5%{ opacity:.55; } 42.5%{ opacity:1; }
  73%{ opacity:1; } 74%{ opacity:.25; } 75%{ opacity:.9; } 76%{ opacity:1; }
  100%{ opacity:1; }
}
.bb-pulse{ animation:bb-pulse 2.6s ease-in-out infinite; transform-origin:50% 50%; }
@keyframes bb-pulse{
  0%, 58%, 100%{ transform:scale(1); }
  62%{ transform:scale(1.055); } 68%{ transform:scale(1); }
  74%{ transform:scale(1.035); } 80%{ transform:scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .bb--sweep, .bb--chrome, .bb--blood{ animation:none; background-position:50% 0, 0 0; }
  /* Das Leuchten bleibt, nur das Flackern hoert auf - der Schriftzug
     soll auch ohne Bewegung noch nach Neon aussehen. */
  .bb.bb--neon{ animation:none; opacity:1; }
  .bb-flicker, .bb-pulse{ animation:none; }
}
@media (forced-colors: active){
  .bb{
    -webkit-background-clip:border-box; background-clip:border-box;
    background-image:none; color:CanvasText; -webkit-text-fill-color:CanvasText;
    filter:none;
  }
  .bb--neon{ color:CanvasText; -webkit-text-fill-color:CanvasText;
    text-shadow:none; -webkit-text-stroke:0; }
  .bb--neon .bb-emblem{ filter:none; }
  .bb-emblem use{ fill:CanvasText; }
  .bb-rt-word{ color:CanvasText; }
}

/* --------------------------------------------------------------------------
   ABSENDERZEILE UNTER DEM SCHRIFTZUG

   Vorher stand die Red-Tree-Wortmarke als eigener Block ueber dem Titel -
   auf derselben linken Kante wie die in der Kopfzeile und nur 74 Pixel
   darunter, die untere sogar groesser. Zwei gleiche Marken so dicht
   uebereinander liest niemand als Absicht.

   Jetzt sitzt sie klein in einer Textzeile unter dem Titel. Damit stehen
   die beiden auf verschiedenen Ebenen: oben der Absender der Seite,
   hier der Absender des Abends. Der Titel dazwischen trennt sie.
   -------------------------------------------------------------------------- */

.bb-event--left .bb-edition{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:.5rem 1.5rem;
  max-width:min(100%, 34rem);
  padding-left:0;
  letter-spacing:.26em;
}
.bb-event--left .bb-edition::after{ display:none; }

.bb-ed-teil{ display:inline-flex; align-items:center; gap:.6rem; }

.bb-ed-vor{
  font-size:.62rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--leiser); font-weight:600;
}

/* Der Absender steht als Satz, nicht als verkleinertes Logo. Bei rund
   70 Pixel Breite zerfaellt eine Wortmarke mit Emblem zu einem Fleck -
   gesperrte Versalien in Gold tragen dieselbe Aussage und wirken auf
   dieser Groesse ungleich hochwertiger. */
.bb-ed-marke{
  color:var(--bb-gold-light);
  font-weight:700;
  letter-spacing:.3em;
}

.bb-ed-punkt{ color:var(--sehrleise); letter-spacing:0; }

@media(max-width:719px){
  .bb-event--left .bb-edition{
    gap:.4rem .7rem;
    font-size:.6rem; letter-spacing:.2em;
    max-width:100%;
  }
  .bb-ed-vor{ font-size:.55rem; letter-spacing:.26em; }
  /* Zwischen Absender und Ausgabe trennt der Abstand, kein Zeichen -
     ein Trennpunkt haette beim Umbruch am Zeilenende gehangen. */
}

/* ==========================================================================
   EINLADUNGSSEITE

   Das Ziel der Zusage-Mail. Sie soll sich wie die Hauptseite anfuehlen -
   der Bruch zum fremden Ticketshop kommt frueh genug, aber nicht schon
   hier. Deshalb dieselben Farben, dieselbe Schrift, dasselbe Korn.
   ========================================================================== */

.ein-karte{
  border:1px solid var(--linie);
  border-left:2px solid var(--rot);
  background:linear-gradient(178deg,rgba(200,16,46,.07),transparent 62%),var(--flaeche);
  padding:var(--s5) var(--s4);
  max-width:34rem;
}

.ein-posten{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s3);
  padding:.7rem 0;
  border-bottom:1px solid var(--linie-fein);
}
.ein-posten:first-child{ padding-top:0 }
.ep-label{
  font-size:var(--t-label); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--leiser);
}
.ep-wert{ color:var(--bone); text-align:right }

.ein-knopf{ margin-top:var(--s4) }
.knopf.gross{ width:100%; justify-content:center; padding-block:1.05rem }

/* Knopfbeschriftungen brechen nie um. Ein zweizeiliger Knopf in der
   Kopfzeile sprengt dort die Hoehe und sieht nach Versehen aus. */
.knopf span{ white-space:nowrap }

.ein-frist{
  margin-top:var(--s3);
  font-size:.82rem; color:var(--leiser); line-height:1.5;
}

.ein-fertig{
  display:flex; align-items:flex-start; gap:var(--s3);
  padding:var(--s3) 0 0;
  line-height:1.5;
}
.ein-haken{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.9rem; height:1.9rem; flex:none;
  border-radius:50%; background:rgba(200,16,46,.16); color:var(--rot);
}
.ein-abgelaufen{ line-height:1.6; padding-top:var(--s2) }

.ein-block{
  margin-top:var(--s6);
  max-width:34rem;
  padding-top:var(--s5);
  border-top:1px solid var(--linie);
}

@media(max-width:719px){
  .ein-karte{ padding:var(--s4) var(--s3) }
  .ein-posten{ flex-direction:column; gap:.2rem }
  .ep-wert{ text-align:left }
}

/* ==========================================================================
   TICKETSEITE

   Was der Gast nach dem Kauf sieht. Hier steht - und nur hier - dass er
   am schnelleren Einlass reinkommt. Im Shop stuende es vorher und wuerde
   die anderen Kategorien abwerten, bevor jemand gekauft hat.
   ========================================================================== */

.tk-karte{
  border:1px solid var(--linie);
  background:var(--flaeche);
  padding:var(--s4);
  max-width:34rem;
}

.tk-block{
  margin-top:var(--s6);
  max-width:34rem;
  padding-top:var(--s5);
  border-top:1px solid var(--linie);
}

/* Der Vorrechts-Block hebt sich ab, ohne laut zu werden: ein roter
   Rand und ein Hauch Glut, mehr braucht es nicht. */
.tk-vip{
  margin-top:var(--s6);
  max-width:34rem;
  padding:var(--s4);
  border:1px solid var(--linie-rot);
  border-left:2px solid var(--rot);
  background:linear-gradient(178deg,rgba(200,16,46,.12),transparent 66%),var(--flaeche);
}
.tk-vip-marke{
  font-size:var(--t-label); font-weight:700;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--rot-schrift);
  margin-bottom:var(--s2);
}

@media(max-width:719px){
  .tk-karte{ padding:var(--s3) }
  .tk-vip{ padding:var(--s3) }
}

/* ==========================================================================
   Persoenliche Einladung  /invitation/<schluessel>
   --------------------------------------------------------------------------
   Ruhiger als die Gaestelistenseite. Dort steht ein roter Knopf und die
   Seite arbeitet darauf hin; hier gibt es nichts zu tun. Also mehr Luft
   und kein Rot ausser an den feinen Linien - alles, was nach Kampagne
   aussieht, nimmt einer Einladung ihren Charakter.

   Auf breiten Schirmen laufen Ablauf und Regeln nebeneinander. Als
   Einspalter untereinander war die Seite dreimal so lang wie ihr Inhalt
   und las sich wie ein Formular ohne Felder.
   ========================================================================== */

.vip-hero{
  position:relative; display:grid; align-items:end;
  overflow:hidden; isolation:isolate;
  min-height:clamp(28rem, 68vh, 42rem);
  /* Viel Luft nach oben, wenig nach unten: das Bild traegt die obere
     Haelfte, der Text sitzt in der abgedunkelten unteren. */
  padding-top:clamp(6rem, 16vh, 11rem); }
.vip-hero-bild{ position:absolute; inset:0; z-index:-2; }
.vip-hero-bild img{
  width:100%; height:100%; object-fit:cover; object-position:50% 38%;
  filter:brightness(.5) saturate(.85); }
.vip-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,9,10,.5) 0%,
             rgba(8,9,10,.2) 30%, rgba(8,9,10,.8) 66%,
             rgba(8,9,10,.99) 100%); }

.vip-hero-innen{
  padding-block:clamp(2rem, 6vh, 4rem);
  max-width:52rem; overflow-x:clip; }
/* Sitzt jetzt unter der Absenderzeile, direkt ueber dem Namen. Etwas
   groesser und heller als das reine Markenrot: als kleinste Schrift auf
   der Seite stand sie sonst gegen ein Foto an und verlor. */
.vip-marke{
  margin:var(--s4) 0 0;
  font-size:.68rem; letter-spacing:.32em; text-transform:uppercase;
  font-weight:600; color:#E0455C;
  text-shadow:0 1px 12px rgba(0,0,0,.75); }
/* Etwas kleiner als auf der Startseite: dort traegt der Schriftzug die
   ganze Flaeche, hier steht direkt darunter ein Name, der gelesen
   werden soll. */
.vip-hero .bb-event{ --bb-size:clamp(1.7rem, min(6vw, 13vh), 4.6rem); }
.vip-hero .bb-lockup{ max-width:100%; }
/* Der Name ist das Einzige auf dieser Seite, das nur einem Menschen
   gehoert. Als Zeile im Fliesstext neben dem Schriftzug ging er unter -
   jetzt steht er darunter, mit Luft davor, in einer Groesse zwischen
   Schriftzug und Text, und "for" schrumpft zur Vorsilbe. */
.vip-fuer{
  margin-top:var(--s2);
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.5em; }
.vip-fuer-vor{
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(237,228,225,.5); }
/* "from Nick" direkt unter dem Namen - kleiner als der Name, aber
   deutlich genug, dass man es beim Ueberfliegen mitnimmt. */
.vip-von{
  margin-top:var(--s2);
  font-size:1.02rem; color:var(--leiser); }
.vip-von span{
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(237,228,225,.5); margin-right:.4em; }
.vip-von b{ color:var(--bone); font-weight:600; }

.vip-name{
  font-size:clamp(1.7rem, 4.6vw, 2.9rem);
  line-height:1.1; font-weight:600; color:var(--bone);
  letter-spacing:-.01em;
  text-shadow:0 2px 24px rgba(0,0,0,.6); }

.vip-block{ max-width:64rem; padding-block:var(--s6) var(--s7); }

.vip-fakten{
  display:grid; gap:1px; background:var(--linie);
  border:1px solid var(--linie); margin-bottom:var(--s6);
  grid-template-columns:repeat(4, 1fr); }
/* Unter 760px passen drei Kacheln nebeneinander und die vierte steht
   allein - daneben klafft der Hintergrund des Rasters als grauer Block.
   auto-fit kann das nicht wissen, also werden es hier feste zwei mal
   zwei. */
@media (max-width:760px){
  .vip-fakten{ grid-template-columns:repeat(2, 1fr); }
}
.vip-fakten > div{ background:#0B0C0D; padding:var(--s3) var(--s3) var(--s4); }
.vip-fakten span{
  display:block; font-size:.56rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(237,228,225,.44);
  margin-bottom:var(--s2); }
.vip-fakten b{ display:block; font-size:1.32rem; color:var(--bone); }
.vip-fakten i{
  display:block; font-style:normal; font-size:.78rem;
  color:rgba(237,228,225,.56); margin-top:.2rem; }

.vip-einleitung{ max-width:40rem; }
.vip-block p{
  color:var(--leise); font-size:1.02rem; line-height:1.78;
  margin-bottom:var(--s3); }
.vip-titel{
  margin:0 0 var(--s3);
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--bone); padding-bottom:var(--s2);
  border-bottom:1px solid var(--linie); }

.vip-spalten,
.vip-adresse{
  display:grid; gap:var(--s5) var(--s6);
  grid-template-columns:1fr; margin-top:var(--s6); }
@media (min-width:860px){
  .vip-spalten{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  .vip-adresse{ grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); }
}

.vip-ablauf{ list-style:none; padding:0; margin:0; }
.vip-ablauf li{
  display:grid; grid-template-columns:4.4rem 1fr; gap:var(--s3);
  padding:var(--s3) 0; border-bottom:1px solid var(--linie); }
.vip-ablauf li:last-child{ border-bottom:0; }
.vip-ablauf span{
  font-size:.88rem; letter-spacing:.08em; color:var(--rot-schrift);
  padding-top:.1rem; }
.vip-ablauf b{ display:block; color:var(--bone); margin-bottom:.24rem; }
.vip-ablauf div{ color:var(--leise); font-size:.94rem; line-height:1.66; }

.vip-regeln{ list-style:none; padding:0; margin:0; }
.vip-regeln li{
  position:relative; padding:var(--s2) 0 var(--s2) var(--s4);
  color:var(--leise); font-size:.96rem; line-height:1.7; }
.vip-regeln li::before{
  content:""; position:absolute; left:0; top:1.06em;
  width:.7rem; height:1px; background:var(--rot); }
.vip-regeln b{ color:var(--bone); font-weight:600; }

.vip-ort{ font-size:1.02rem; line-height:1.72; color:var(--bone) !important; }
.vip-ort b{ color:var(--bone); }
.vip-ort-dazu{ font-size:.88rem !important; }

.vip-schluss{
  margin-top:var(--s7); padding-top:var(--s5);
  border-top:1px solid var(--linie); max-width:40rem; }
.vip-schluss-titel{
  margin:0 0 var(--s3);
  font-size:clamp(1.3rem, 3vw, 1.9rem); line-height:1.15;
  color:var(--bone); font-weight:600; letter-spacing:-.01em; }
.vip-kontakt{
  margin-top:var(--s4);
  font-size:1.06rem !important; color:var(--bone) !important; }
.vip-kontakt b{ color:var(--bone); font-weight:600; }
.vip-signatur{
  margin-top:var(--s3); font-size:.6rem; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(237,228,225,.4) !important; }

@media (max-width:600px){
  .vip-ablauf li{ grid-template-columns:3.6rem 1fr; gap:var(--s2); }
  .vip-block{ padding-block:var(--s5) var(--s6); }
  /* Auf dem Telefon steht der Schriftzug ohnehin ueber der halben
     Breite. Ein Hero von 56vh liess darueber eine handhohe schwarze
     Flaeche stehen, in der nichts passierte - das Motiv ist dort
     dunkler als auf dem grossen Schirm. */
  /* Auf dem Telefon ebenso: das Motiv oben, der Text unten im
     Dunkeln. Ohne Mindesthoehe klebte alles direkt unter der
     Kopfzeile, mitten im hellsten Teil des Bildes. */
  .vip-hero{
    min-height:min(64vh, 30rem);
    padding-top:clamp(4rem, 14vh, 8rem);
    padding-bottom:var(--s4); }
  .vip-hero-bild img{ filter:brightness(.6) saturate(.9); }
  .vip-hero-innen{ padding-block:var(--s3) var(--s2); }
  .vip-marke{ margin-top:var(--s3); }
}

/* Der Weg ins Backend. Er steht in der Fusszeile, weil ein Lesezeichen
   verlorengeht und "wie war noch die Adresse" am Abend niemand
   gebrauchen kann. Dezent genug, dass ein Gast darueber hinwegliest,
   und deutlich genug, dass man ihn findet, wenn man ihn sucht.
   rel="nofollow" und der Eintrag in robots.txt halten Suchmaschinen
   davon fern. */
.fuss-team{
  opacity:.32;
  transition:opacity .2s ease; }
.fuss-team:hover,
.fuss-team:focus-visible{ opacity:.85; }

/* Das Logo auf der Startseite.
   Der Verlauf steckt im SVG, das Leuchten hier: ein enger Schein in
   der Marke selbst, darunter ein weiterer, weicherer. Zwei Schatten
   statt einem, weil ein einzelner entweder hart aussieht oder
   verwaschen. Kein Puls und kein Flackern - die Vorlage ist gesetzt,
   nicht gebaut, und Bewegung wuerde sie zum Effekt machen. */
.bb-logo{ margin:0; line-height:0; }
.bb-logo img{
  display:block;
  width:min(100%, 44rem);
  height:auto;
  filter:drop-shadow(0 0 10px rgba(200,16,46,.34))
         drop-shadow(0 0 42px rgba(140,10,32,.28)); }
@media (max-width:719px){
  .bb-logo img{ width:min(100%, 22rem); }
}

/* ==========================================================================
   Dresscode  /dress-code
   --------------------------------------------------------------------------
   Zwei Spalten, Do und Don't nebeneinander. Nicht als Verbotsschild:
   die linke Spalte ist doppelt so lang wie die rechte und steht zuerst,
   damit die Seite nach Einladung aussieht und nicht nach Tuerpolitik.
   ========================================================================== */

.dc-hero{
  position:relative; display:grid; align-items:end;
  overflow:hidden; isolation:isolate;
  /* Hoeher als zuvor: der Kopf traegt jetzt ein Motiv mit einem
     Gesicht darin, und ein flacher Streifen schneidet es weg. */
  min-height:min(74vh, 35rem);
  padding-top:clamp(5rem, 14vh, 9rem); }
/* Kein negativer z-index: .dc-hero bildet mit isolation:isolate einen
   eigenen Stapel, und darin verschwand das Bild hinter dem Grund.
   Die drei Ebenen liegen jetzt positiv uebereinander:
   Bild 0, Abdunklung 1, Text 2. */
.dc-hero-bild{ position:absolute; inset:0; z-index:0; }
.dc-hero-bild img{
  width:100%; height:100%; object-fit:cover;
  /* Das Motiv ist ein Ausschnitt: das Gesicht sitzt links der Mitte
     und leicht oberhalb. object-position haelt es im Bild, wenn der
     Kopfbereich auf schmalen Fenstern hochkant beschnitten wird. */
  object-position:56% 46%;
  filter:brightness(.78) saturate(.98); }
.dc-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  /* Nur so viel Schwarz wie die Schrift braucht - das Bild ist der
     Grund der Seite und soll erkennbar bleiben. Unten laeuft es
     vollstaendig aus, damit keine Kante zum naechsten Block steht. */
  background:
    linear-gradient(180deg, rgba(8,9,10,.42) 0%,
             rgba(8,9,10,.1) 34%, rgba(8,9,10,.62) 78%,
             rgba(8,9,10,.99) 100%),
    linear-gradient(90deg, rgba(8,9,10,.72) 0%,
             rgba(8,9,10,.3) 40%, transparent 66%); }
.dc-hero-innen{ position:relative; z-index:2;
  padding-block:var(--s5) var(--s5); max-width:46rem; }
.dc-marke{
  font-size:.66rem; letter-spacing:.32em; text-transform:uppercase;
  font-weight:600; color:var(--rot-schrift);
  text-shadow:0 1px 12px rgba(0,0,0,.75); margin-bottom:var(--s3); }
.dc-titel{
  font-size:clamp(1.9rem, 5.4vw, 3.4rem); line-height:1.08;
  letter-spacing:-.02em; color:var(--bone); margin:0;
  text-shadow:0 2px 24px rgba(8,9,10,.8), 0 1px 3px rgba(8,9,10,.7); }
.dc-unter{
  margin-top:var(--s3); font-size:1.05rem; color:var(--bone);
  text-shadow:0 1px 14px rgba(8,9,10,.8); }

.dc-block{ max-width:60rem; padding-block:var(--s6) var(--s7); }
.dc-einleitung{ max-width:40rem; }
.dc-einleitung p{
  color:var(--leise); font-size:1.06rem; line-height:1.78;
  margin-bottom:var(--s3); }
.dc-einleitung b{ color:var(--bone); }

.dc-listen{
  display:grid; gap:var(--s4); margin-top:var(--s6);
  grid-template-columns:1fr; }
@media (min-width:800px){
  .dc-listen{ grid-template-columns:1.15fr .85fr; gap:var(--s5); }
}
.dc-liste{
  border:1px solid var(--linie); padding:var(--s4);
  background:rgba(255,255,255,.012); }
.dc-liste h2{
  margin:0 0 var(--s3);
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; }
.dc-ja h2{ color:var(--bone); }
.dc-nein h2{ color:var(--rot-schrift); }
.dc-liste ul{ list-style:none; padding:0; margin:0; }
.dc-liste li{
  position:relative; padding:.44rem 0 .44rem var(--s4);
  color:var(--leise); font-size:.99rem; line-height:1.6; }
.dc-ja li::before{
  content:""; position:absolute; left:0; top:1.02em;
  width:.8rem; height:1px; background:var(--bone); opacity:.5; }
.dc-nein li::before{
  content:"\00d7"; position:absolute; left:.1rem; top:.44rem;
  color:var(--rot-schrift); font-size:.9rem; }

.dc-schluss{
  margin-top:var(--s6); padding-top:var(--s5);
  border-top:1px solid var(--linie); max-width:40rem; }
.dc-schluss p{
  color:var(--leise); font-size:1rem; line-height:1.72;
  margin-bottom:var(--s4); }

/* Der kurze Block auf der Startseite */
.dresscode-kurz{ max-width:46rem; }
.dresscode-kurz .dk-regel{
  font-size:clamp(1.4rem, 3.4vw, 2.1rem); line-height:1.16;
  letter-spacing:-.01em; color:var(--bone); margin:0 0 var(--s3); }
.dresscode-kurz p{
  color:var(--leise); font-size:1.04rem; line-height:1.76;
  margin-bottom:var(--s3); }
.dk-paare{
  display:flex; flex-wrap:wrap; gap:.5rem; margin:var(--s4) 0 var(--s4); }
.dk-paare span{
  border:1px solid var(--linie); padding:.4rem .8rem;
  font-size:.8rem; color:var(--leise); }
.dk-paare .aus{
  border-color:rgba(242,112,127,.3); color:rgba(242,112,127,.85);
  text-decoration:line-through; text-decoration-color:rgba(242,112,127,.5); }

/* ==========================================================================
   DER KNOPF AM FUSS JEDER KATEGORIEKARTE

   Er stand vorher zwischen Nummer und Ueberschrift und riss den Kopf der
   Karte auseinander. Jetzt schliesst er die Karte unten ab - bei allen
   sechs Karten an derselben Stelle, egal wie lang der Text darueber ist.
   Moeglich macht das .k-fuss mit margin-top:auto: der Fuss und alles
   danach werden an den unteren Rand gedrueckt.
   ========================================================================== */

.k-waehlen{
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem;
  margin-top:var(--s4);
  min-height:48px;
  padding:.85rem 1rem;
  border:1px solid rgba(200,16,46,.34);
  background:rgba(200,16,46,.06);
  font-family:"CocogooseText",-apple-system,system-ui,sans-serif;
  font-size:.76rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone); text-decoration:none;
  transition:border-color .18s ease, color .18s ease, background .18s ease; }
.k-waehlen:hover,
.k-waehlen:focus-visible{
  border-color:var(--rot); color:var(--bone);
  background:rgba(200,16,46,.16); }
.k-pfeil{ transition:transform .18s ease; color:var(--rot-schrift); }
.k-waehlen:hover .k-pfeil{ transform:translateX(3px); }
/* Die ganze Karte reagiert mit, damit klar ist, dass sie zusammengehoert. */
.karte:hover .k-waehlen{ border-color:rgba(200,16,46,.55);
  background:rgba(200,16,46,.12); }

/* Der Verweis auf die Dinnerseite ist ein Textlink, kein Knopf. Als
   Flex-Kind wuerde er sonst auf volle Kartenbreite gestreckt und sein
   Unterstrich liefe quer durch die Karte. */
.karte .k-mehr{ align-self:flex-start; }
/* Steht er direkt vor dem Knopf, reicht der kleine Abstand - sonst
   stapeln sich zwei Aussenabstaende uebereinander. */
.karte .k-mehr + .k-waehlen{ margin-top:var(--s3); }

/* Karten ohne Preis (Creator, Brand) brauchen unter der Ueberschrift
   dieselbe Luft wie die Karten mit Preisblock, sonst sitzt ihr Text
   im Raster sichtbar hoeher als bei den Nachbarn. */
.karte h3 + .k-claim{ margin-top:var(--s2); }

@media(max-width:639px){
  /* Einspaltig liegen die Kaesten direkt uebereinander und brauchen
     mehr Trennung als in der Rasteransicht. */
  .karten{ gap:var(--s4); }
  .k-waehlen{ min-height:52px; font-size:.74rem; letter-spacing:.14em; }
}

/* ==========================================================================
   VERWEIS-KACHEL UND HANDYMENUE

   Zwei Luecken, die auf dem Handy wehtaten: die Dresscode-Kachel sah aus
   wie etwas zum Antippen und war keins, und unter 900 px verschwindet die
   Kopfnavigation ersatzlos - man kam von jeder Unterseite nur noch ueber
   den Zurueck-Knopf weg.
   ========================================================================== */

.fakt-verweis{
  display:block; text-decoration:none; color:inherit;
  position:relative;
}
.fakt-verweis .f-mehr{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:var(--s2);
  font-size:.66rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rot-schrift);
  border-bottom:1px solid rgba(242,112,127,.32);
  padding-bottom:.2rem;
  transition:color var(--zart), border-color var(--zart); }
.fakt-verweis:hover{ background:var(--flaeche); }
.fakt-verweis:hover .f-mehr,
.fakt-verweis:focus-visible .f-mehr{
  color:var(--bone); border-bottom-color:var(--rot); }
@media(max-width:719px){
  /* Auf dem Handy ist die Kachel das Ziel eines Daumens, nicht eines
     Zeigers - der Hinweis darf deshalb nicht kleiner sein als der Rest. */
  .fakt-verweis .f-mehr{ font-size:.68rem; padding-bottom:.35rem; }
}

/* Der Knopf. Zwei Striche statt drei: schmaler, ruhiger, und er dreht
   sich beim Oeffnen zum Kreuz. */
.burger{
  display:none;
  width:44px; height:44px; flex:0 0 auto;
  margin-left:.35rem;
  background:none; border:1px solid var(--linie);
  cursor:pointer; position:relative;
  transition:border-color var(--zart); }
.burger span{
  position:absolute; left:12px; width:20px; height:1.5px;
  background:var(--bone);
  transition:transform .22s ease, opacity .22s ease; }
.burger span:nth-child(1){ top:18px; }
.burger span:nth-child(2){ top:25px; }
.burger:hover{ border-color:var(--linie-rot); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.mobilmenue{
  /* Ueber die ganze Hoehe, nicht als Klappe: ein halbhohes Menue laesst
     die Seite dahinter durchscheinen, und man weiss nicht, was gilt. */
  position:fixed; inset:0; z-index:79;
  padding:5.5rem var(--s4) var(--s5);
  background:var(--bg);
  overflow-y:auto;
  display:flex; flex-direction:column;
  transform:translateY(-8px); opacity:0;
  transition:transform .2s ease, opacity .2s ease; }
.mobilmenue.offen{ transform:none; opacity:1; }
/* Das hidden-Attribut muss gegen display:flex gewinnen - sonst liegt das
   Menue unsichtbar, aber anklickbar ueber der ganzen Seite: jeder Tipp
   auf einen Knopf darunter traf einen Menuepunkt. Genau so landeten
   Gaeste vom "Party ticket"-Knopf auf der Dresscode-Seite. */
.mobilmenue[hidden]{ display:none !important; }
.mobilmenue:not(.offen){ pointer-events:none; }
.mm-liste{ display:grid; }
.mm-liste a{
  display:flex; align-items:center;
  min-height:56px;
  border-bottom:1px solid var(--linie-fein);
  font-family:"CocogooseText",-apple-system,system-ui,sans-serif;
  font-size:.94rem; letter-spacing:.06em;
  color:var(--bone); text-decoration:none;
  transition:color var(--zart), padding-left var(--zart); }
.mm-liste a:hover,
.mm-liste a:focus-visible{ color:var(--rot-schrift); padding-left:.35rem; }
.mm-fuss{ margin-top:auto; padding-top:var(--s5); }
.mm-fuss .knopf{ width:100%; justify-content:center; }
.mm-datum{
  margin-top:var(--s3); font-size:.72rem; letter-spacing:.08em;
  color:var(--sehrleise); }

@media(max-width:899px){
  .burger{ display:block; }
}
@media(min-width:900px){
  /* Am Rechner gibt es die Kopfnavigation - dann waere das Menue
     doppelt gemoppelt und bliebe womoeglich offen stehen. */
  .mobilmenue{ display:none !important; }
}
@media(max-width:479px){
  /* Auf sehr schmalen Schirmen wird es im Kopf eng - beide Marken
     bleiben trotzdem stehen, sie sind der Absender des Abends. Platz
     schaffen stattdessen kleinere Marken, ein schmalerer Knopf und
     engere Abstaende. */
  .kopf-logos{ gap:.5rem; }
  .kopf-logos img{ height:.95rem; }
  .kopf-logos .roomers{ height:.58rem; }
  .kopf-logos .kreuz{ font-size:.62rem; }
  .kopf .knopf{ padding:.6rem .8rem; font-size:.6rem; letter-spacing:.12em; }
  .kopf-innen{ gap:.5rem; }
  .burger{ margin-left:.15rem; }
}

/* ==========================================================================
   ABLAUFBAND

   Drei Saetze zwischen Faktenleiste und Kategorien. Sie beantworten die
   Frage, die ein Erstbesucher nach dem Titelbild hat: was soll ich hier
   eigentlich tun? Ohne sie beginnt die Seite mit sechs Preiskarten -
   und wer nicht weiss, dass man sich bewirbt, liest sie als Shop.
   ========================================================================== */

.ablauf-band{
  padding-block:var(--s5);
  border-bottom:1px solid var(--linie); }
.ab-schritte{
  list-style:none; margin:0 0 var(--s4); padding:0;
  display:grid; gap:var(--s4);
  grid-template-columns:1fr; }
@media(min-width:760px){
  .ab-schritte{ grid-template-columns:repeat(3,1fr); gap:var(--s5); }
}
.ab-schritte li{
  display:grid; gap:.3rem;
  padding-left:var(--s4);
  border-left:1px solid var(--linie); }
.ab-nr{
  font-size:var(--t-label); font-weight:700; letter-spacing:.24em;
  color:var(--rot-schrift); }
.ab-schritte b{
  font-family:"Cocogoose",sans-serif; font-weight:300;
  font-size:clamp(1.05rem,2.4vw,1.35rem); letter-spacing:-.01em;
  color:var(--bone); }
.ab-schritte span:last-child{
  font-size:.86rem; line-height:1.6; color:var(--leiser); }
.ab-knopf{
  display:inline-flex; align-items:center; gap:.7rem;
  min-height:48px; padding:.8rem 1.4rem;
  border:1px solid rgba(200,16,46,.4);
  background:rgba(200,16,46,.08);
  font-family:"CocogooseText",-apple-system,system-ui,sans-serif;
  font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone); text-decoration:none;
  transition:background var(--zart), border-color var(--zart); }
.ab-knopf:hover,
.ab-knopf:focus-visible{
  background:rgba(200,16,46,.18); border-color:var(--rot); }
@media(max-width:759px){
  /* Auf dem Handy steht der Knopf ueber die volle Breite - er ist hier
     der kuerzeste Weg zum Formular. */
  .ab-knopf{ width:100%; justify-content:center; }
}


/* ==========================================================================
   VEREINFACHTE STARTSEITE (September 2026)

   Der Flyer traegt den Kopf der Seite. Er sagt in einem Blick, was
   vorher fuenf Kacheln und vier Bildschirme brauchten. Daneben der
   Schriftzug, ein Satz, zwei Wege hinein - beide mit Preis.
   ========================================================================== */

.hero--flyer{
  min-height:0;
  align-items:start;
  background:
    radial-gradient(60% 50% at 30% 40%, rgba(200,16,46,.12), transparent 70%),
    var(--bg); }
.hf-innen{
  position:relative; z-index:3;
  display:grid; gap:var(--s5);
  padding-block:clamp(5.5rem,12vh,7.5rem) var(--s6);
  align-items:center; }
@media(min-width:720px){
  .hf-innen{ grid-template-columns:minmax(0,44fr) minmax(0,56fr); gap:var(--s6); }
}
@media(min-width:1100px){
  .hf-innen{ grid-template-columns:520px minmax(0,1fr); gap:var(--s7); }
}

/* Der Flyer: Hochformat 4:5, mit Rand und tiefem Schatten, damit er als
   Plakat liest und nicht als Hintergrund. */
.hf-bild{ position:relative; }
.hf-bild img{
  display:block; width:100%; height:auto;
  border:1px solid rgba(237,228,225,.08);
  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    0 0 0 1px rgba(200,16,46,.12),
    0 0 90px rgba(200,16,46,.16); }
@media(max-width:719px){
  /* Auf dem Handy nicht bildschirmfuellend: die Knoepfe sollen ohne
     Scrollen erreichbar bleiben. */
  /* Auf dem Handy sitzt der Flyer direkt unter der Kopfzeile - kein
     Leerraum darueber, der im ersten Bildschirm nichts sagt. Was oben
     gespart wird, kommt unten dem Text und den Knoepfen zugute. */
  .hf-bild{ max-width:min(100%, 19rem); margin-inline:auto; }
  .hf-innen{ gap:var(--s3); padding-top:calc(5.3rem + env(safe-area-inset-top, 0px)); padding-bottom:var(--s5); }
  /* Auf dem Handy traegt der Flyer den Schriftzug schon - ein zweiter
     direkt darunter las sich doppelt. Am Rechner stehen beide
     nebeneinander, dort bleibt er. */
  .bb-logo--svg{ display:none; }
  .hf-text{ gap:var(--s2); }
  .hf-sub{ font-size:1rem; line-height:1.55; }
  .hf-zeile{ font-size:.6rem; letter-spacing:.2em; }
  .hf-klein{ font-size:.8rem; }
}

.hf-text{ display:grid; gap:var(--s3); align-content:center; }
.bb-logo--svg img{
  width:min(100%, 40rem);
  filter:drop-shadow(0 0 14px rgba(145,27,45,.35))
         drop-shadow(0 8px 30px rgba(0,0,0,.6)); }
.hf-zeile{
  font-size:var(--t-label); font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--rot-schrift); margin:0;
  display:flex; flex-wrap:wrap; gap:.4rem .6rem; }
.hf-sub{
  font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.6;
  color:var(--leise); max-width:30rem; margin:0; }
.hf-sub b{ color:var(--bone); font-weight:700; }
.hf-knoepfe{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s2); }
.hf-knoepfe .knopf{ padding-block:1rem; min-height:3.4rem; }
.hf-knoepfe .knopf.gross{ width:auto; }
@media(max-width:719px){
  .hf-knoepfe{ display:grid; }
  .hf-knoepfe .knopf.gross{ width:100%; }
}
/* Der Preis im Knopf: gleich gross, aber ohne Sperrung - Zahlen mit
   Sperrung lesen sich wie Telefonnummern. */
.k-preis-klein{
  font-style:normal; letter-spacing:.04em; opacity:.92;
  padding-left:.55rem; margin-left:.15rem;
  border-left:1px solid rgba(237,228,225,.35); }
.hf-klein{ font-size:.86rem; color:var(--leiser); margin:0; }
.hf-klein .textlink{ margin-left:.3rem; }
@media(max-width:719px){
  .hf-text{ text-align:center; justify-items:center; }
  .hf-zeile{ justify-content:center; }
  .hf-sub{ max-width:none; }
}

/* ------------------------------------------------------------- Tickets */
.tickets{
  display:grid; gap:var(--s4);
  grid-template-columns:1fr; }
@media(min-width:760px){ .tickets{ grid-template-columns:1fr 1fr; gap:var(--s5); } }

.ticket{
  position:relative; display:flex; flex-direction:column; gap:var(--s3);
  padding:clamp(1.5rem,3.5vw,2.4rem);
  border:1px solid var(--linie);
  background:linear-gradient(178deg,var(--flaeche) 0%,transparent 70%);
  color:inherit; text-decoration:none;
  transition:border-color var(--ruhig), transform var(--ruhig), background var(--ruhig); }
.ticket:hover{ border-color:var(--linie-rot); transform:translateY(-3px); }
.ticket--kauf{
  border-color:rgba(200,16,46,.55);
  background:linear-gradient(178deg,rgba(200,16,46,.13) 0%,transparent 66%); }
.ticket--kauf:hover{ border-color:var(--rot); background:linear-gradient(178deg,rgba(200,16,46,.2) 0%,transparent 66%); }
@media(prefers-reduced-motion:reduce){ .ticket:hover{ transform:none; } }

.t-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; }
.t-kopf{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; }
.t-label{
  font-family:"Cocogoose",sans-serif; font-weight:300;
  font-size:clamp(1.35rem,2.6vw,1.8rem); letter-spacing:-.015em;
  color:var(--bone); }
.t-preis{
  font-family:"Cocogoose",Georgia,serif; font-weight:300;
  font-size:clamp(2.1rem,5vw,2.9rem); line-height:1; letter-spacing:-.02em;
  color:var(--bone); }
.ticket--kauf .t-preis{ color:var(--rot-schrift); }
.t-text{ font-size:.95rem; line-height:1.6; color:var(--leise); }
.t-fuss{
  margin-top:auto; padding-top:var(--s3);
  border-top:1px solid var(--linie-fein);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; }
.t-hinweis{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sehrleise); }
.t-knopf{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:44px; padding:.7rem 1.1rem;
  border:1px solid rgba(200,16,46,.4); background:rgba(200,16,46,.08);
  font-family:"CocogooseText",sans-serif;
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone);
  transition:background var(--zart), border-color var(--zart); }
.ticket--kauf .t-knopf{ background:var(--rot); border-color:var(--rot); }
.ticket:hover .t-knopf{ background:rgba(200,16,46,.2); border-color:var(--rot); }
.ticket--kauf:hover .t-knopf{ background:var(--rot-hell); }
.t-mehr{
  margin-top:var(--s5); max-width:40rem;
  font-size:.95rem; line-height:1.65; color:var(--leiser); }
.t-mehr b{ color:var(--leise); font-weight:700; }

/* ----------------------------------------------------------- The night */
.momente{
  list-style:none; margin:0 0 var(--s5); padding:0;
  display:grid; gap:var(--s4); grid-template-columns:1fr; }
@media(min-width:640px){ .momente{ grid-template-columns:1fr 1fr; } }
@media(min-width:1000px){ .momente{ grid-template-columns:repeat(4,1fr); gap:var(--s5); } }
.momente li{
  display:grid; gap:.4rem; padding-left:var(--s4);
  border-left:1px solid var(--linie); }
.momente li:nth-child(3){ border-left-color:var(--rot); }
.momente b{
  font-family:"Cocogoose",sans-serif; font-weight:300;
  font-size:clamp(1.15rem,2.2vw,1.45rem); letter-spacing:-.01em; color:var(--bone); }
.momente span{ font-size:.9rem; line-height:1.6; color:var(--leiser); }


/* ==========================================================================
   KAUFSEITE PARTY-TICKET UND DANKESEITE
   ========================================================================== */

.kauf-kopf{
  padding-top:clamp(6.5rem,14vh,9rem); padding-bottom:var(--s5);
  background:
    radial-gradient(50% 60% at 20% 30%, rgba(200,16,46,.14), transparent 70%),
    var(--bg);
  border-bottom:1px solid var(--linie-fein); }
.kauf-block{ padding-block:var(--s6) var(--s7); }
.kauf-raster{ display:grid; gap:var(--s5); grid-template-columns:1fr; align-items:start; }
@media(min-width:900px){
  .kauf-raster{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--s7); }
  /* Die Infoseite bleibt beim Scrollen stehen - das Formular ist laenger. */
  .kauf-info{ position:sticky; top:6rem; }
}
.kauf-flyer{ max-width:16rem; margin-bottom:var(--s4); }
.kauf-flyer img{
  display:block; width:100%; height:auto;
  border:1px solid rgba(237,228,225,.08);
  box-shadow:0 20px 50px rgba(0,0,0,.6); }
/* Dinner-Seite fuer Hausgaeste: auf dem Handy steht der Flyer unter dem
   Titel, weil die Seitenleiste dort erst nach dem Formular kommt. */
.rd-flyer-mobil{ display:none; }
@media(max-width:899px){
  .rd-flyer-mobil{ display:block; max-width:13rem; margin:var(--s4) auto 0; }
  .rd-flyer-mobil img{
    display:block; width:100%; height:auto;
    border:1px solid rgba(237,228,225,.08);
    box-shadow:0 20px 50px rgba(0,0,0,.6); }
}
@media(max-width:899px){
  .kauf-flyer{ display:none; }
  /* Auf dem Handy zuerst der Kauf, dann die Liste - wer hier ist, hat
     sich entschieden und will nicht erst scrollen. */
  .kauf-formular{ order:-1; }
  .kauf-info{ padding-top:var(--s3); border-top:1px solid var(--linie-fein); }
}

.kauf-formular fieldset{ margin-bottom:var(--s4); }
.feld-zaehler .zaehler{ margin-top:.2rem; }
.feldhilfe{ font-size:.78rem; line-height:1.5; color:var(--sehrleise); }
.zeile-2{ display:grid; gap:var(--s3); grid-template-columns:1fr; }
@media(min-width:560px){ .zeile-2{ grid-template-columns:1fr 1fr; } }
.kauf-formular textarea{
  width:100%; min-height:4.5rem; resize:vertical;
  background:transparent; color:var(--bone);
  border:1px solid var(--linie); padding:.8rem .9rem;
  font:inherit; font-size:.95rem; }
.kauf-formular textarea:focus{ outline:none; border-color:var(--rot); }

.kauf-summe{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) 0; margin-bottom:var(--s3);
  border-top:1px solid var(--linie); border-bottom:1px solid var(--linie); }
.ks-zeile{ font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; color:var(--leiser); }
.ks-betrag{
  font-family:"Cocogoose",Georgia,serif; font-weight:300;
  font-size:clamp(1.8rem,4vw,2.4rem); line-height:1; color:var(--bone); }
.kauf-hinweis{ margin-top:var(--s3); }
.abgebrochen{
  padding:var(--s3) var(--s4); margin-bottom:var(--s4);
  border:1px solid rgba(242,112,127,.4); background:rgba(200,16,46,.08);
  font-size:.92rem; color:var(--leise); }

.danke{ max-width:44rem; }
/* Das Siegel ist im Formular ueber .erfolg bemessen - hier braucht es
   eigene Masse, sonst fuellt das Haekchen den ganzen Bildschirm. */
.danke .siegel{
  width:3.4rem; height:3.4rem; margin-bottom:var(--s4);
  display:grid; place-items:center;
  border:1px solid var(--linie-rot); border-radius:50%; }
.danke .siegel svg{ width:1.5rem; height:1.5rem; }
.danke-fakten{
  display:grid; gap:var(--s3); margin-top:var(--s5);
  grid-template-columns:1fr; }
@media(min-width:640px){ .danke-fakten{ grid-template-columns:repeat(3,1fr); } }
.danke-fakten div{ display:grid; gap:.3rem; padding-left:var(--s3); border-left:1px solid var(--linie); }
.danke-fakten b{ font-size:.95rem; color:var(--bone); }
.danke-fakten span{ font-size:.82rem; color:var(--leiser); }
.mt-5{ margin-top:var(--s5); }


/* Rueckweg-Link ueber dem Seitentitel der Unterseiten */
.zurueck{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-bottom:var(--s4); min-height:44px;
  font-size:var(--t-label); font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--leiser); text-decoration:none;
  transition:color var(--zart); }
.zurueck:hover{ color:var(--bone); }
.zurueck span{ transition:transform var(--zart); }
.zurueck:hover span{ transform:translateX(-3px); }
.dc-hero-innen .zurueck, .kauf-kopf .zurueck{ margin-bottom:var(--s3); }


/* Wer per Adresse (#apply, #answers) auf einen Abschnitt springt, landet
   sonst mit der Ueberschrift unter der klebenden Kopfzeile. */
section[id], [id="apply"], [id="answers"], [id="tickets"]{ scroll-margin-top:5.2rem; }


/* Versteckte Dinnerseite fuer Hausgaeste */
.rd-fakten{ display:grid; gap:1px; background:var(--linie-fein); border-block:1px solid var(--linie);
  grid-template-columns:repeat(2,1fr); margin-bottom:var(--s6); }
@media(min-width:720px){ .rd-fakten{ grid-template-columns:repeat(4,1fr); } }
.rd-fakten .fakt{ background:var(--bg); }
.rd-ablauf{ list-style:none; margin:0 0 var(--s5); padding:0; display:grid; gap:var(--s3); }
.rd-ablauf li{ display:grid; grid-template-columns:4.2rem 1fr; gap:var(--s3); padding-bottom:var(--s3);
  border-bottom:1px solid var(--linie-fein); }
.rd-ablauf b{ font-family:"Cocogoose",sans-serif; font-weight:300; color:var(--bone); font-size:1.05rem; }
.rd-ablauf span{ font-size:.92rem; line-height:1.55; color:var(--leiser); }
.rd-ablauf span b{ display:block; font-family:inherit; font-weight:700; font-size:.95rem; color:var(--bone); margin-bottom:.15rem; }

/* ============================================================ MANON-MENUE
   Titelbild links, Karte als Text rechts; auf dem Handy untereinander.
   Die Karte nimmt Aufbau und Ton des Originals auf: Gang in Sperrschrift,
   drei Punkte als Gangzaehler, zentriert. */
.menue{ display:grid; gap:var(--s5); align-items:start; margin-top:var(--s5); }
@media(min-width:900px){
  .menue{ grid-template-columns:minmax(0,26rem) minmax(0,1fr); gap:var(--s6); }
  .menue-titel{ position:sticky; top:6rem; }
}
.menue-titel{ margin:0; width:100%; max-width:26rem; justify-self:center; }
@media(max-width:899px){ .menue-titel{ max-width:22rem; } }
.menue-titel a{ display:block; }
.menue-titel img{
  display:block; width:100%; height:auto;
  border:1px solid var(--linie);
  box-shadow:0 30px 70px rgba(0,0,0,.55); }
.menue-karte{
  border:1px solid var(--linie);
  background:linear-gradient(180deg, rgba(122,10,28,.24), rgba(12,13,15,.65));
  padding:clamp(1.6rem, 4.5vw, 3rem) clamp(1.15rem, 4vw, 3rem);
  text-align:center; }
.mk-kopf{ margin:0 0 var(--s4); }
.mk-kopf span{
  display:block; font-size:var(--t-label); font-weight:700;
  letter-spacing:.34em; text-transform:uppercase; color:var(--leiser); }
.mk-kopf b{
  display:block; margin-top:.35rem;
  font:400 clamp(2.4rem, 7vw, 3.6rem)/1 Georgia, "Times New Roman", serif;
  letter-spacing:.02em; text-transform:uppercase; color:var(--bone); }
.mk-gang{ padding:var(--s4) 0; border-top:1px solid var(--linie-fein); }
.mk-gang h3{
  margin:0; font-family:"CocogooseText", sans-serif; font-weight:700;
  font-size:.8rem; letter-spacing:.32em; text-transform:uppercase; color:var(--bone); }
.mk-punkte{ display:inline-flex; gap:.4rem; margin:.8rem 0 1.05rem; }
.mk-punkte i{
  display:block; width:.55rem; height:.55rem; border-radius:50%;
  border:1px solid var(--leise); }
.mk-punkte i.voll{ background:var(--leise); }
.mk-gang ul{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.mk-gang li{ font-size:var(--t-text); line-height:1.5; color:var(--leise); text-wrap:balance; }
.mk-gang li::before{ content:none; }
.mk-vegan{ margin:var(--s2) 0 var(--s4); font-style:italic; font-size:var(--t-mini); color:var(--leiser); }
.mk-knoepfe{ display:flex; justify-content:center; }
@media(max-width:599px){ .mk-knoepfe .knopf{ width:100%; } }
.mk-hinweis{ margin:var(--s3) auto 0; max-width:30rem; font-size:var(--t-mini); line-height:1.6; color:var(--leiser); }

/* Fraimit-Seiten: kein Burger-Menue, der Knopf steht rechts */
body[data-seite^="fraimit"] .kopf-innen > .knopf{ margin-left:auto; }
.fm-fakten{ margin-top:var(--s4); }

/* Fraimit als Partner: klein, ruhig, mit Abstand - kein zweites Hauptlogo */
.partner-zeile{ display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--linie-fein); }
.partner-zeile span{ font-size:.6rem; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:var(--leiser); }
.partner-zeile img{ display:block; height:26px; width:auto; }
.partner-zeile--klein{ margin-top:var(--s3); padding-top:0; border-top:0; }
.partner-zeile--klein img{ height:20px; }
.partner-fuss img{ display:inline-block; height:14px; width:auto; vertical-align:-2px; margin-left:.25rem; opacity:.9; }
@media(max-width:719px){
  .hf-text .partner-zeile{ justify-content:center; }
}