/* DER VOLLBILD-EINSTIEG — Planung und CRM (15.10.2026). Ein Foto füllt den Bildschirm, darauf der Satz der Seite.
   Planung: Pictures/Pl8 (Rotweinglas). CRM: Pictures/CRM → bilder/crm/crm.jpg (seit 17.10.2026) („Aus Gästen können Beziehungen entstehen.").
   Zur Planung: Erst eine Bilderabfolge, die schneller wird und bis zum Vollbild wächst — verworfen
   (Wirt: „das Rauszoomen ist schlecht, der Endframe sehr gut, der Header passt nicht … belasse es nur bei dem Endframe").
   Jetzt: das Rotweinglas (Pictures/Pl8 → bilder/chaos/pl8.jpg) als Vollbild, gleichmäßig abgedunkelt (kein Verlauf),
   darauf „Der Abend ist schon chaotisch genug." Der Kopf darüber durchsichtig und weiß wie über dem Hero der Startseite
   (kopf.js › .im-held — die Regeln aus held.css stehen unten für diese Seite). Ablauf chaos.js. Präfix ch-. */
.ch{position:relative;height:100vh;min-height:620px;background:#1A1714;overflow:hidden}
.ch-voll{position:absolute;inset:0}
.ch-voll img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ch-ton{position:absolute;inset:0;background:#000;opacity:.58}
.ch-ende{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);width:min(100% - 48px,1404px);margin:0 auto;color:#FFFFFF}
.ch-titel{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:84px;line-height:88px;letter-spacing:-.015em;max-width:980px}
.ch-unter{margin:28px 0 0;max-width:620px;font-size:22px;line-height:32px;color:rgba(255,255,255,.88)}
.ch-weiter{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF;background:none;border:0;cursor:pointer;font-family:inherit}
.ch-weiter svg{width:16px;height:42px;stroke:#FFFFFF;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ch-weiter:focus-visible{outline:2px solid #B356FF;outline-offset:6px;border-radius:4px}
/* ruhiges Einblenden beim Öffnen */
.ch-titel,.ch-unter,.ch-weiter{opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.ch-titel{transform:translateY(18px)}
.ch-unter{transition-delay:.35s}
.ch-weiter{transition-delay:.8s}
.ch.da .ch-titel,.ch.da .ch-unter,.ch.da .ch-weiter{opacity:1}
.ch.da .ch-titel{transform:none}
@media (prefers-reduced-motion:reduce){ .ch-titel,.ch-unter,.ch-weiter{transition:none} }

/* der Kopf über dem Bild — wie über dem Hero der Startseite (held.css), hier für jede Seite mit diesem Einstieg */
.seite .kopf{transition:opacity .16s ease}
.seite .kopf.blendet{opacity:0}
body .seite .kopf.im-held{width:calc(100% - 86px)}
body .seite .kopf.im-held::before{background:transparent}
body .seite .kopf.im-held .marke b{color:#FFFFFF}
body .seite .kopf.im-held .nav{left:auto;right:206px;top:23.5px;gap:32px;color:#FFFFFF}
body .seite .kopf.im-held .nav a[aria-current="page"]::after{background:#FFFFFF}
body .seite .kopf.im-held .zugang{gap:28px;right:0}
body .seite .kopf.im-held .pille-hell{width:auto;padding:0;background:transparent;box-shadow:none;color:#FFFFFF;font-weight:400;font-size:16.5px}
body .seite .kopf.im-held .pille-hell:hover{opacity:.7}
body .seite .kopf.im-held .pille-dunkel{background:#FFFFFF;color:#101013}

@media (max-width:1599px){ .ch-titel{font-size:68px;line-height:72px} }
@media (max-width:759px){
  body .seite .kopf.im-held{width:calc(100% - 48px)}
  body .seite .kopf.im-held .zugang{gap:18px}
  .ch-titel{font-size:42px;line-height:46px}
  .ch-unter{font-size:18px;line-height:26px;margin-top:18px}
}