/* HELDENGESCHICHTEN — Planung, dritte Sektion (16.10.2026, Wirt). Stil nach „Nyheder" (Bild über die ganze Breite,
   abgedunkelt, Schrift links), Bild ohne eingebaute Schrift (bilder/chaos/heldengeschichten.jpg, 1916 × 821).
   Seit 16.10.2026 mittags mit Funktion (Wirt: „die Überschrift weiter rauf, darunter ein Pfeil; das Bild schiebt sich nach
   rechts, links wird Platz für Inhalt, bis der Kellner auf der rechten Seite zentriert ist"). Danach (Wirt: „der ganze Kellner
   muss zu sehen sein“ → „rechts breiter“): die rechte Fläche ist so breit, dass der GANZE Kellner mit beiden Tabletts bei voller
   Höhe drin ist (er nimmt 40–93 % der Bildbreite ein → Fläche = 60 % der angezeigten Bildbreite, ≈ 58 % der Sektion bei 1920);
   helden.js rechnet Breite (--hg-b) und Ausschnitt (--hg-x). Unter 1600 kein Schieben, sondern untereinander.
   geschlossen füllt das Bild die Sektion; offen (.offen) gleitet sein linker Rand auf 70 % und der Ausschnitt wandert, bis der
   Kellner in der Mitte der rechten Fläche steht (helden.js rechnet den Ausschnitt). Ablauf helden.js. Präfix hg-. */
.hg{position:relative;width:100%;overflow:hidden;background:#101013;color:#FFFFFF;min-height:640px;aspect-ratio:1916/821;max-height:calc(100vh - 90px)}   /* offen steht sie unter dem festen Kopf (90) — so bleibt sie ganz im Bild */
.hg-rahmen{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;transition:left .9s cubic-bezier(.65,0,.35,1)}
.hg-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%;transition:object-position .9s cubic-bezier(.65,0,.35,1)}
.hg-rahmen::after{content:'';position:absolute;inset:0;background:rgba(10,8,6,.45);pointer-events:none;transition:background .9s}
.hg.offen .hg-rahmen{left:calc(100% - var(--hg-b,58%))}
.hg.offen .hg-rahmen::after{background:rgba(10,8,6,.12)}   /* offen ist das Bild nur noch Bild — kaum abgedunkelt */
.hg.offen .hg-bild{object-position:var(--hg-x,73%) 30%}

/* links: Überschrift oben, darunter der Pfeil; offen kommt der Inhalt darunter */
.hg-innen{position:absolute;z-index:1;top:0;bottom:0;left:max(24px,calc((100vw - 1404px) / 2));right:calc(30% + 56px);transition:right .9s cubic-bezier(.65,0,.35,1),left .9s cubic-bezier(.65,0,.35,1),padding .9s cubic-bezier(.65,0,.35,1);
  display:flex;flex-direction:column;padding:112px 0 56px}
/* offen: mehr Breite für die Erklärung — die linke Kante rückt an den Fensterrand (56 px), oben knapp unter den Kopf */
.hg.offen .hg-innen{left:56px;right:calc(var(--hg-b,58%) + 56px);padding-top:56px;padding-bottom:40px}
.hg.offen .hg-titel{font-size:40px;line-height:46px}
.hg-titel{transition:font-size .9s cubic-bezier(.65,0,.35,1),line-height .9s cubic-bezier(.65,0,.35,1);margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:56px;line-height:62px;letter-spacing:-.01em}
.hg-pfeil{align-self:flex-start;margin-top:24px;padding:8px 0;border:0;background:none;display:inline-flex;align-items:center;gap:16px;cursor:pointer;
  font:500 17px/1 'DM Sans',system-ui,sans-serif;color:#FFFFFF}
.hg-pfeil svg{width:64px;height:14px;overflow:visible;stroke:#FFFFFF;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.hg-pfeil:hover svg{width:96px}
.hg-pfeil:focus-visible{outline:2px solid #B356FF;outline-offset:6px;border-radius:4px}
.hg-pfeil .zu{display:none}
.hg.offen .hg-pfeil svg.zu{display:block}
.hg.offen .hg-pfeil .auf{display:none}
.hg.offen .hg-pfeil .zu{display:inline}
.hg-pfeil svg.zu{width:40px}
.hg.offen .hg-pfeil:hover svg.zu{width:40px}

/* der Inhalt — kommt erst, wenn das Bild angekommen ist */
.hg-inhalt{margin-top:22px;opacity:0;transform:translateY(16px);visibility:hidden;transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s .6s}
.hg.offen .hg-inhalt{opacity:1;transform:none;visibility:visible;transition-delay:.6s,.6s,0s}
/* Titel: geschlossen „Ein guter Service …“, offen „Deshalb sagt dir Sweet Spot …“ — beide liegen übereinander und wechseln weich */
.hg-titel{display:grid}
.hg-titel > span{grid-area:1/1;transition:opacity .5s}
.hg-titel .auf-text{opacity:0}
.hg.offen .hg-titel .zu-text{opacity:0}
.hg.offen .hg-titel .auf-text{opacity:1;transition-delay:.35s}
.hg-unter{display:none}

/* DIE ToDos, erklärt (Wirt, 16.10.2026: „erkläre genau, wie die ToDos zustande kommen — Tafelzusammenlegungen und was sonst noch
   kommt und warum, visuell hochwertig im begrenzten Platz“). Inhalt aus aktionen.js › todos(): drei Gruppen (Mit Uhrzeit · Heute ·
   Wenn Zeit ist), sortiert nach Frist; 15 Min vorher dringend (Zahl am Punkt der Seitenleiste); erledigt mit „Steht“, zurück unter
   „Erledigt“. Gestalt: eine ruhige Zeitleiste — Uhrzeit, Punkt auf einer feinen Linie, Titel und ein Satz „warum“. */
.hg-text{margin:0 0 20px;max-width:620px;font-size:16.5px;line-height:25px;color:rgba(255,255,255,.74)}
/* die Erklärung füllt die Fläche (Wirt, 16.10.2026: „das füllt nicht richtig“ — bei 3270 stand alles oben links): die Schrift bleibt
   in festen px (Regel 9), aber der Inhalt nimmt die ganze Höhe, die Zeilen verteilen sich darüber, und ab 1100 px Inhaltsbreite stehen
   die beiden Gruppen nebeneinander */
.hg.offen .hg-inhalt{flex:1 1 auto;min-height:0}
.hg-plan{flex:1 1 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));column-gap:64px;align-content:center}
.hg-spalte{min-height:0}
.hg-gruppe{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hg-zeilen{list-style:none;margin:0 0 12px;padding:0;position:relative}
.hg-zeilen::before{content:'';position:absolute;left:61px;top:10px;bottom:10px;width:1px;background:rgba(255,255,255,.18)}
.hg-zeilen li{position:relative;display:grid;grid-template-columns:48px 28px minmax(0,1fr);align-items:start;padding:5px 0}
.hg-zeit{font-size:14px;line-height:22px;font-weight:600;font-variant-numeric:tabular-nums;color:#FFFFFF;text-align:right;padding-right:6px}
.hg-p{position:relative;z-index:1;justify-self:center;margin-top:6px;width:9px;height:9px;border-radius:50%;background:#101013;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.hg-p.b{background:#E0A422;box-shadow:none}   /* Bernstein = gleich fällig (Aufmerksamkeit) */
.hg-zeilen b{display:block;font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:20px;line-height:24px;color:#FFFFFF}
.hg-zeilen span:not(.hg-zeit){display:block;margin-top:2px;font-size:14px;line-height:20px;color:rgba(255,255,255,.66)}
.hg-fuss{display:flex;align-items:flex-start;gap:10px;margin:2px 0 0;max-width:520px;font-size:14px;line-height:21px;color:rgba(255,255,255,.74)}
.hg-fuss .hg-p{flex:0 0 auto;margin-top:6px}
.hg .hg-weiter{margin-top:14px;color:#FFFFFF;font-size:15px}   /* .hg davor: detail.css (später geladen) färbt .dt-pfeil sonst schwarz */
.hg .hg-weiter line,.hg .hg-weiter path{stroke:#FFFFFF}
.hg .hg-weiter svg{width:48px}
.hg .hg-weiter:hover svg{width:72px}
.hg-knopf{display:none;align-self:flex-start;display:inline-flex;align-items:center;height:40px;margin-top:30px;padding:0 18px;border:1px solid rgba(255,255,255,.7);border-radius:4px;
  color:#FFFFFF;text-decoration:none;font:500 15px/1 'DM Sans',system-ui,sans-serif;transition:background .2s,color .2s}
.hg-knopf:hover{background:#FFFFFF;color:#101013}
.hg-knopf:focus-visible{outline:2px solid #B356FF;outline-offset:4px}
.hg-inhalt{display:flex;flex-direction:column}

@media (max-width:1599px){ .hg-titel{font-size:46px;line-height:52px} }
@media (max-width:1799px) and (min-width:1600px){ .hg-text{display:none} .hg.offen .hg-innen{padding-top:36px;padding-bottom:28px} .hg-zeilen li{padding:4px 0} .hg-pfeil{margin-top:18px} .hg-inhalt{margin-top:16px} }

/* ab 2800 (dort stehen die Gruppen nebeneinander) eine größere feste Stufe (Wirt bei 3270: „das füllt nicht richtig“) — feste px wie jede Stufe, kein Mitwachsen */
@media (min-width:2800px){
  .hg.offen .hg-innen{left:96px;right:calc(var(--hg-b,58%) + 96px);padding-top:80px;padding-bottom:64px}
  .hg.offen .hg-titel{font-size:60px;line-height:68px}
  .hg-pfeil{margin-top:32px;font-size:19px}
  .hg-inhalt{margin-top:36px}
  .hg-text{max-width:820px;font-size:20px;line-height:31px;margin-bottom:28px}
  .hg-plan{column-gap:96px}
  .hg-gruppe{font-size:14px;margin-bottom:14px}
  .hg-zeilen::before{left:79px}
  .hg-zeilen li{grid-template-columns:64px 30px minmax(0,1fr);padding:16px 0}
  .hg-zeit{font-size:17px;line-height:30px}
  .hg-p{margin-top:10px;width:11px;height:11px}
  .hg-zeilen b{font-size:28px;line-height:34px}
  .hg-zeilen span:not(.hg-zeit){font-size:17px;line-height:26px;margin-top:4px}
  .hg-fuss{max-width:720px;font-size:17px;line-height:26px}
  .hg .hg-weiter{font-size:18px;margin-top:20px}
}

/* ---------- VERANSTALTUNGEN — dieselbe Bauart, gespiegelt (.links): Satz oben rechts, offen gleitet das Bild nach LINKS
   und die Erklärung kommt rechts (Wirt, 16.10.2026) ---------- */
.hg.links .hg-rahmen{transition:right .9s cubic-bezier(.65,0,.35,1)}
.hg.links.offen .hg-rahmen{left:0;right:calc(100% - var(--hg-b,58%))}
.hg.links .hg-innen{left:calc(30% + 56px);right:max(24px,calc((100vw - 1404px) / 2));align-items:flex-end;text-align:right}
.hg.links.offen .hg-innen{left:calc(var(--hg-b,58%) + 56px);right:56px;align-items:stretch;text-align:left}
.hg.links .hg-pfeil{align-self:flex-end}
.hg.links.offen .hg-pfeil{align-self:flex-start}
.hg.links .hg-titel{justify-items:end}
.hg.links.offen .hg-titel{justify-items:start}

/* das Zeitband: ein Abend, an dem eine Veranstaltung Fläche braucht — eine Bahn, Abschnitte als Flächen (keine Verläufe) */
.va-band{margin:0 0 22px;padding:16px 18px 14px;border:1px solid rgba(255,255,255,.14);border-radius:12px}
.va-band-kopf{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.va-band-kopf b{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:22px;line-height:26px}
.va-band-kopf span{font-size:13.5px;color:rgba(255,255,255,.6)}
.va-band-bahn{position:relative;height:34px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.va-seg{position:absolute;top:0;bottom:0;left:calc(var(--a) * 1%);width:calc((var(--b) - var(--a)) * 1%);display:flex;align-items:center;
  padding:0 10px;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;color:rgba(255,255,255,.55)}
.va-seg.aufbau{background:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 6px,transparent 6px 12px);color:#FFFFFF}
.va-seg.einlass{background:rgba(255,255,255,.22);color:#FFFFFF}
.va-seg.quiz{background:#FFFFFF;color:#101013}
.va-band-achse{position:relative;height:20px;margin-top:6px}
.va-band-achse span{position:absolute;left:calc(var(--a) * 1%);font-size:12px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.6);transform:translateX(-50%)}
.va-band-achse span:first-child{transform:none}
.va-band-satz{display:flex;gap:10px;margin:10px 0 0;font-size:14px;line-height:21px;color:rgba(255,255,255,.78)}
.va-band-satz i{flex:0 0 auto;width:14px;height:14px;margin-top:3px;border-radius:3px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.4) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}

/* unter 2800 ist die Fläche zu niedrig für alles — der Einleitungssatz und der Satz zum Soft Event entfallen dort */
@media (min-width:1600px) and (max-width:2799px){ .hg.links .hg-text,.hg.links .hg-fuss{display:none} }
.va-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.va-liste{list-style:none;margin:0 0 18px;padding:0}
.va-liste li{padding:8px 0;border-top:1px solid rgba(255,255,255,.14)}
.va-liste b{display:block;font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:19px;line-height:24px}
.va-liste span{display:block;margin-top:3px;font-size:14px;line-height:20px;color:rgba(255,255,255,.66)}
@media (max-width:1799px) and (min-width:1600px){ .va-band{padding:12px 16px 10px;margin-bottom:14px} .va-band-kopf{margin-bottom:10px} .va-liste li{padding:4px 0} .va-liste b{font-size:18px;line-height:22px} .va-liste span{font-size:13.5px;line-height:18px} }
@media (min-width:2800px){
  .hg.links.offen .hg-innen{left:calc(var(--hg-b,58%) + 96px);right:96px}
  .va-band{padding:24px 28px 20px;margin-bottom:36px}
  .va-band-kopf b{font-size:28px;line-height:34px} .va-band-kopf span{font-size:16px}
  .va-band-bahn{height:44px} .va-seg{font-size:15px;padding:0 14px} .va-band-achse span{font-size:14px} .va-band-satz{font-size:17px;line-height:26px}
  .va-spalten{column-gap:72px} .va-liste li{padding:16px 0} .va-liste b{font-size:26px;line-height:32px} .va-liste span{font-size:17px;line-height:26px}
}

/* unter 1600: kein Schieben (die rechte Fläche fräße den Inhalt) — oben das ganze Bild, darunter Überschrift und Inhalt, immer offen.
   Unter 1000 ist das Bild auf den Kellner geschnitten (er nimmt 40–93 % der Bildbreite ein: Ausschnitt 58 % breit, Mitte 66,5 % →
   object-position 89 %), immer mit beiden Tabletts */
@media (max-width:1599px){
  .hg{aspect-ratio:auto;min-height:0;max-height:none;height:auto}
  .hg-rahmen,.hg.offen .hg-rahmen{position:relative;left:0;aspect-ratio:1916/821}
  .hg-bild,.hg.offen .hg-bild{object-position:50% 0}
  .hg-rahmen::after,.hg.offen .hg-rahmen::after{background:rgba(10,8,6,.2)}
  .hg-innen,.hg.offen .hg-innen{position:static;width:min(100% - 48px,1404px);margin:0 auto;padding:40px 0 64px}
  .hg-titel,.hg.offen .hg-titel{font-size:40px;line-height:46px}
  .hg-pfeil{display:none}
  .hg-inhalt{opacity:1;transform:none;visibility:visible;margin-top:24px}
  .hg-text{display:block}
  .hg-titel .auf-text{display:none}
  .hg-unter{display:block;margin:0 0 14px;font-family:'Playfair Display',Georgia,serif;font-size:26px;line-height:32px;color:#FFFFFF}
}
@media (max-width:999px){
  .hg-rahmen,.hg.offen .hg-rahmen{aspect-ratio:1.35}
  .hg-bild,.hg.offen .hg-bild{object-position:89% 0}
  .hg-innen,.hg.offen .hg-innen{width:calc(100% - 32px);padding:28px 0 56px}
  .hg-titel,.hg.offen .hg-titel{font-size:30px;line-height:36px}
  .hg-titel br{display:none}
}
/* gestapelt (unter 1600) gilt auch für die gespiegelte Sektion: Bild oben, Text darunter, linksbündig */
@media (max-width:1599px){
  .hg.links .hg-rahmen,.hg.links.offen .hg-rahmen{left:0;right:0}
  .hg.links .hg-innen,.hg.links.offen .hg-innen{left:auto;right:auto;align-items:stretch;text-align:left}
  .hg.links .hg-titel{justify-items:start}
}
@media (max-width:759px){
  .va-spalten{grid-template-columns:1fr}   /* zwei Spalten bis 760 — bei 1280 standen sie sonst untereinander und leer daneben */
  .va-band{padding:14px 14px 12px}
  .va-band-kopf{flex-direction:column;gap:2px}
  .va-seg.aufbau,.va-seg.einlass{font-size:0;padding:0}
  .va-band-achse span:nth-child(1),.va-band-achse span:nth-child(3){display:none}   /* am Handy nur 18:30 · 19:30 · 22:30 — die Zahlen stießen sonst aneinander */
}
@media (prefers-reduced-motion:reduce){ .hg-rahmen,.hg-bild,.hg-inhalt{transition:none} }