/* DER LIVE-BETRIEB — Sektion 3 der Startseite (15.10.2026, Aufbau nach der Beschreibung des Wirts):
   Überschrift linksbündig in der Schrift des Heros („Kontrolliere deinen Live-Betrieb, so wie du willst."), Abstand,
   darunter links drei Container untereinander (Überschrift + Unterzeile), rechts das Video — genau so hoch wie die drei
   Container zusammen, ohne Hintergrund. Der erste Container ist gewählt; unter dem gewählten läuft ein schwarzer Strich,
   so lange wie sein Teil des Videos; ist er durch, kommt der nächste (clip.js). Klick wählt sofort.
   Video: neu aufgenommen aus SweetSpot Motion/spot-07-aufhaenger (21,4–52,9 s), durchsichtig, ohne die eingeblendeten
   Sätze — die Texte stehen jetzt in den Containern. video/betrieb.webm (Alpha), video/betrieb-weiss.mp4 für Safari.
   Teile: Zeitleiste 0–7,3 s · Tisch, Grundriss, Bild 7,3–21,1 s · Live-Seite 21,1–31,5 s.
   Die Sektion bleibt stehen, die schwarze Sektion fährt darüber (korrektur.js klebt .cl). Präfix cl-. */
.cl{position:relative;min-height:100vh;box-sizing:border-box;padding:130px 0 90px;background:#FFFFFF;color:#101013;display:flex;align-items:center;overflow:clip}
/* Der Pinselstrich (Wirt, 15.10.2026: „hinter die Video-Sektion; er bewegt sich so, dass er genau am Ende ankommt, wenn das
   Video fertig ist") — derselbe Strich wie vorher hinter den Schritten, breit und sehr hell; clip.js zeichnet ihn nach der
   Stelle im Video. Mobil keiner. */
.cl-band{position:absolute;inset:0;pointer-events:none;z-index:0}
.cl-band svg{display:block;width:100%;height:100%}
.cl-band path{fill:none;stroke:#F1F0EC;stroke-width:120px;stroke-linecap:round;stroke-linejoin:round}
.cl-innen{position:relative;z-index:1}
/* etwas größer als die Spalte des Kopfs (1404 → 1560, Wirt 15.10.2026: „etwas größer am Desktop") — das Video wächst um ~17 % */
.cl-innen{width:min(100% - 48px, 1560px);margin:0 auto}
.cl-titel{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:72px;line-height:76px;letter-spacing:-.01em;color:#101013}
/* Knopf zur Planungsseite (Wirt, 15.10.2026) — rechts neben der Überschrift, auf ihrer Unterkante und der rechten Kante
   des Videos; dieselbe hohle Pille wie „So sprichst du Gäste an" bei den E-Mails (karussell-start.css › .ks-knopf) */
.cl-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.cl-knopf{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 30px;border-radius:27px;margin-bottom:8px;
  box-shadow:inset 0 0 0 1.5px #CFCFCF;background:#fff;color:#101013;font-weight:500;font-size:19px;text-decoration:none;white-space:nowrap}
.cl-knopf:hover{box-shadow:inset 0 0 0 1.5px #101013}
.cl-knopf:focus-visible{outline:2px solid #B356FF;outline-offset:3px}
.cl-raster{display:grid;grid-template-columns:minmax(320px,440px) 1fr;column-gap:64px;align-items:stretch;margin-top:72px}

/* GESPIEGELT (.cl-rechts, die Gäste): Überschrift rechtsbündig, Knopf links, Video links, Container rechts */
.cl-rechts .cl-kopf{flex-direction:row-reverse}
.cl-rechts .cl-titel{text-align:right}
.cl-rechts .cl-raster{grid-template-columns:1fr minmax(320px,440px)}

/* die drei Container: teilen sich die Höhe des Videos */
.cl-liste{display:grid;grid-template-rows:repeat(3,1fr);margin:0;padding:0;list-style:none}
.cl-liste li{display:flex;min-height:0}
.cl-liste li .cl-punkt{flex:1}
.cl-punkt{position:relative;display:flex;flex-direction:column;justify-content:center;gap:10px;width:100%;margin:0;padding:0 0 4px;
  border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.cl-punkt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#E7E7E9}   /* die Spur */
.cl-strich{position:absolute;left:0;bottom:0;width:100%;height:2px;background:#101013;transform-origin:0 0;transform:scaleX(0);z-index:1}
.cl-punkt b{font-weight:500;font-size:26px;line-height:32px;color:#9A9AA0;transition:color .3s}
.cl-punkt span{font-size:19px;line-height:27px;color:#B4B4B9;transition:color .3s}
.cl-punkt[aria-pressed="true"] b{color:#101013}
.cl-punkt[aria-pressed="true"] span{color:#4A4A50}
.cl-punkt:hover b{color:#101013}
.cl-punkt:focus-visible{outline:2px solid #B356FF;outline-offset:6px;border-radius:4px}

/* das Video: 16:9, durchsichtig — es bestimmt die Höhe der Zeile */
.cl-bild{aspect-ratio:16 / 9;min-width:0}
.cl-bild video{display:block;width:100%;height:100%;object-fit:contain}

@media (max-width:1599px){ .cl-titel{font-size:56px;line-height:60px} .cl-raster{column-gap:48px;margin-top:56px} .cl-punkt b{font-size:22px;line-height:28px} .cl-punkt span{font-size:17px;line-height:24px} }
@media (max-width:999px){
  .cl-band{display:none}
  .cl-kopf,.cl-rechts .cl-kopf{flex-direction:column;align-items:flex-start;gap:24px}
  .cl-rechts .cl-titel{text-align:left}
  .cl-rechts .cl-raster{grid-template-columns:1fr}
  .cl-knopf{margin-bottom:0;height:48px;padding:0 24px;font-size:17px}
  .cl{min-height:0;padding:110px 0 72px}
  .cl-raster{grid-template-columns:1fr;row-gap:28px}
  .cl-bild{order:-1}
  .cl-liste{grid-template-rows:none;row-gap:18px}
  .cl-punkt{padding:0 0 14px}
}
@media (max-width:759px){ .cl-titel{font-size:40px;line-height:44px} }