/* BETRIEBSSEITE UND TAGESKALENDER — Planung, zweite Sektion nach dem Einstieg (16.10.2026, Wirt). Aufbau nach dem Bild
   von Quoti „CRM & Operations": links große Überschrift und zwei Punkte, der offene läuft mit einem Strich weiter;
   rechts ein echtes Bildschirmfoto im Rahmen bis an den Fensterrand. Am offenen Punkt ein Pfeil — ein Klick schiebt die
   Sektion nach links wie Kontakt → Preise, dahinter die Detailansicht dieser Seite wie bei allen Pfeilen: Punkte links,
   antippen zeigt die Stelle im Bild (Klassen dt-punkt/dt-ort aus detail.css, Inhalt aus detail.js SEITEN).
   Ersetzt „Zwei Seiten für deinen Tag" (Kacheln) und „Ohne und mit Tafel". Ablauf zwei-seiten.js. Präfix tv-. */
/* Der Rahmen ist so hoch wie der Bildausschnitt bei halber Fensterbreite (Seitenleiste bis Grundriss, 1548 : 1125) —
   höchstens so hoch, wie das Fenster unter dem Kopf Platz hat. */
.tv{--tv-h:max(440px, min(calc(100vh - 174px), calc(50vw * 1125 / 1548)));
  position:relative;height:100vh;min-height:760px;background:#FFFFFF;color:#101013;overflow:hidden}
.tv-bahn{position:absolute;left:0;top:0;bottom:0;display:flex;width:200vw;transition:transform .9s cubic-bezier(.65,0,.35,1)}
.tv.offen .tv-bahn{transform:translateX(-100vw)}
.tv-seite{position:relative;flex:0 0 100vw;height:100%}
.tv-innen{position:absolute;left:0;right:0;top:max(118px, calc((100vh - var(--tv-h)) / 2 + 20px));height:var(--tv-h);width:min(100% - 48px,1404px);margin:0 auto}

/* 1 · links: Überschrift oben, Liste unten */
.tv-text{position:absolute;left:0;top:0;bottom:0;width:min(560px,calc(50vw - 64px));display:flex;flex-direction:column}
.tv-marke{margin:0 0 24px;font-weight:500;font-size:15px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#6A6A70}
.tv-titel{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:64px;line-height:70px;letter-spacing:-.015em}
.tv-unter{margin:20px 0 0;max-width:500px;font-size:19px;line-height:28px;color:#4A4A50}
/* die Punkte folgen der Unterzeile mit festem Abstand (Wirt, 16.10.2026: „die riesige Lücke zwischen Überschrift und den Seiten“ —
   vorher standen sie ganz unten, margin-top:auto) */
.tv-liste{margin-top:56px;list-style:none;padding:0}
.tv-punkt{position:relative;border-bottom:1px solid #E2E2E6}
.tv-punkt:first-child{border-top:1px solid #E2E2E6}
.tv-knopf{display:block;width:100%;padding:22px 0;border:0;background:none;text-align:left;cursor:pointer;
  font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:34px;line-height:40px;color:#A3A0A8;transition:color .3s}
.tv-knopf:hover{color:#4A4A50}
.tv-knopf:focus-visible{outline:2px solid #B356FF;outline-offset:4px;border-radius:4px}
.tv-punkt.an .tv-knopf{color:#101013;padding-bottom:12px;cursor:default}
.tv-knopf small{display:block;margin-bottom:6px;font-family:'DM Sans',system-ui,sans-serif;font-size:14px;line-height:1;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:inherit}
.tv-auf{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.tv-punkt.an .tv-auf{grid-template-rows:1fr}
.tv-auf > div{overflow:hidden}
.tv-auf p{margin:0;font-size:18px;line-height:27px;color:#4A4A50}
.tv-auf .dt-pfeil{margin:16px 0 24px}
.tv-auf p,.tv-auf .dt-pfeil{opacity:0;transition:opacity .4s}
.tv-punkt.an .tv-auf p,.tv-punkt.an .tv-auf .dt-pfeil{opacity:1;transition-delay:.15s}
/* der Fortschritt des offenen Punkts — auf seiner Linie unten */
.tv-lauf{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:#101013}

/* 1 · rechts: der Rahmen, bis an den Fensterrand */
.tv-rahmen{position:absolute;top:0;bottom:0;left:max(50%, 620px);right:calc(-1 * (100vw - 100%) / 2);
  border:1px solid #E2E2E6;border-right:0;border-radius:14px 0 0 14px;background:#F7F7F8;overflow:hidden}
.tv-bild{position:absolute;left:0;top:0;height:100%;aspect-ratio:1548/1125}
.tv-bild img{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s}
.tv-bild img.an{opacity:1}

/* 2 · die Detailansicht (16.10.2026, Wirt: „das Bild muss viel größer, die Container besser aufgeteilt; wenn ich auf etwas
   klicke, zoomt es in den Bereich hinein, und per Animation sieht man, wie das Element ausgeführt aussieht").
   Links schmal: Kopf, Einleitung, die Punkte als kompakte Liste (nur der gewählte zeigt seinen Satz). Rechts das Bild so
   groß, wie Breite und Höhe erlauben. Antippen: das Bild zoomt auf die Stelle; hat der Punkt eine Handlung, erscheint der
   Zeiger, tippt, und das echte Bild NACH der Handlung blendet ein — in Schleife, solange der Punkt gewählt ist. */
/* Maße nach dem Bild des Wirts (17.10.2026, „neu skalieren in den Detailseiten“; Bild 1700 breit = 1920 × 0,885): links eine
   Spalte 418, Zurück oben in ihr, das Bild beginnt auf derselben Höhe und geht bis 40 vor den rechten Rand; größere Schrift */
.tv-d{display:none;position:absolute;left:54px;right:40px;top:96px;bottom:32px;
  grid-template-columns:418px minmax(0,1fr);grid-template-rows:44px auto minmax(0,1fr);
  grid-template-areas:"kopf bild" "head bild" "liste bild";column-gap:45px}
.tv-d.an{display:grid}
.tv-d-kopf{grid-area:kopf;display:flex;align-items:center;justify-content:space-between}
.tv-zurueck{padding:8px 0;border:0;background:none;display:inline-flex;align-items:center;gap:14px;cursor:pointer;font:500 17px/1 'DM Sans',system-ui,sans-serif;color:#101013}
.tv-zurueck svg{width:40px;height:14px;overflow:visible;stroke:#101013;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tv-zurueck:focus-visible{outline:2px solid #B356FF;outline-offset:6px;border-radius:4px}
.tv-esc{display:none;font-size:14px;color:#6A6A70}
.tv-esc kbd{display:inline-block;margin-right:6px;padding:3px 7px;border-radius:6px;box-shadow:inset 0 0 0 1px #C9C9CE;font:500 12px/1 'DM Sans',system-ui,sans-serif;color:#4A4A50}
.tv-d-head{grid-area:head;padding-top:22px}
.tv-d-head .dt-marke{margin-bottom:24px;font-size:14px;letter-spacing:.14em}
.tv-d-head .dt-titel{font-size:48px;line-height:54px}
.tv-d-head .dt-intro{margin-top:22px;font-size:19px;line-height:30px}
.tv-d-liste{grid-area:liste;min-height:0;overflow-y:auto;margin:28px 0 0;padding:0 4px 0 0;list-style:none;scrollbar-width:thin}
.tv-pk{position:relative;border-top:1px solid #E7E7E9}
.tv-pk:last-child{border-bottom:1px solid #E7E7E9}
.tv-pk::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:1px;background:transparent;transition:background .2s}
.tv-pk.an::before{background:#B356FF}
.tv-pk-k{display:flex;align-items:center;gap:10px;width:100%;padding:18px 4px 18px 16px;border:0;background:none;text-align:left;cursor:pointer;
  font:600 21px/27px 'DM Sans',system-ui,sans-serif;color:#4A4A50;transition:color .2s}
.tv-pk-k:hover,.tv-pk.an .tv-pk-k{color:#101013}
.tv-pk-k:focus-visible{outline:2px solid #B356FF;outline-offset:2px;border-radius:4px}
/* der kleine Abspielpfeil: dieser Punkt zeigt eine Handlung */
.tv-pk-k svg{flex:0 0 auto;margin-left:auto;width:13px;height:13px;fill:#101013}
.tv-pk-auf{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
.tv-pk.an .tv-pk-auf{grid-template-rows:1fr}
.tv-pk-auf > div{overflow:hidden}
.tv-pk-auf p{margin:0;padding:0 8px 18px 16px;font-size:16.5px;line-height:25px;color:#4A4A50}

.tv-d-bild{grid-area:bild;min-height:0}
.tv-d-fig{margin:0;width:100%;max-width:calc((max(760px, 100vh) - 216px) * var(--v))}
.tv-d-rahmen{position:relative;width:100%;aspect-ratio:var(--v);border-radius:14px;box-shadow:0 0 0 1px #E2E2E6;background:#F5F4F8;overflow:hidden}
.tv-z{--s:1;position:absolute;inset:0;transform-origin:0 0;transition:transform .9s cubic-bezier(.65,0,.35,1)}
.tv-z img{position:absolute;inset:0;width:100%;height:100%;display:block}
.tv-z img.nach,.tv-z img.mitte{opacity:0;transition:opacity .4s}
.tv-z.nachher img.nach,.tv-z.mitte img.mitte{opacity:1}
.tv-z.mitte .dt-ort{opacity:0}
/* gezoomt: die Stelle nur fein umrandet (die Linie bleibt 2 px, egal wie groß gezoomt ist), kein Abdunkeln */
.tv-d-rahmen.zoom .dt-ort{box-shadow:0 0 0 calc(2px / var(--s)) #B356FF;border-radius:calc(8px / var(--s))}
.tv-z.nachher .dt-ort{opacity:0}
/* der Zeiger — tiefschwarz, er tippt einmal */
.tv-maus{position:absolute;width:0;height:0;opacity:0;transition:opacity .25s}
/* beim Ziehen wandert der Zeiger */
.tv-maus.zug{transition:opacity .25s,left 1.1s cubic-bezier(.45,0,.25,1),top 1.1s cubic-bezier(.45,0,.25,1)}
.tv-maus.an{opacity:1}
.tv-maus svg{position:absolute;left:-3px;top:-2px;width:26px;height:26px;transform-origin:3px 2px;transform:scale(calc(1 / var(--s)));overflow:visible}
.tv-maus svg path{fill:#101013;stroke:#FFFFFF;stroke-width:1.6;stroke-linejoin:round}
.tv-maus i{position:absolute;left:0;top:0;width:calc(44px / var(--s));height:calc(44px / var(--s));margin:calc(-22px / var(--s)) 0 0 calc(-22px / var(--s));
  border-radius:50%;box-shadow:0 0 0 calc(2px / var(--s)) #101013;opacity:0;transform:scale(.3)}
.tv-maus.tipp i{animation:tv-tipp .6s cubic-bezier(.2,.7,.2,1)}
@keyframes tv-tipp{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1)}}
.tv-ganz{position:absolute;top:14px;right:14px;height:34px;padding:0 14px;border:0;border-radius:17px;background:#FFFFFF;box-shadow:0 0 0 1px #E2E2E6,0 4px 14px rgba(16,16,19,.12);
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:500 14px/1 'DM Sans',system-ui,sans-serif;color:#101013;opacity:0;pointer-events:none;transition:opacity .3s}
.tv-ganz svg{width:15px;height:15px;stroke:#101013;fill:none;stroke-width:1.8;stroke-linecap:round}
.tv-d-rahmen.zoom .tv-ganz{opacity:1;pointer-events:auto}
.tv-d-quelle{display:flex;justify-content:space-between;gap:20px;margin-top:12px;font-size:14px;line-height:20px;color:#6A6A70}
.tv-d-quelle b{font-weight:500;color:#101013}
/* die Erklärung kommt erst, wenn die Bahn angekommen ist */
.tv-d > *{opacity:0;transform:translateX(24px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.tv.offen .tv-d > *{opacity:1;transform:none;transition-delay:.55s}
.tv.offen .tv-d > .tv-d-bild{transition-delay:.7s}

@media (max-width:1599px){
  .tv-titel{font-size:54px;line-height:60px} .tv-knopf{font-size:30px;line-height:36px}
  .tv-d{grid-template-columns:340px minmax(0,1fr);column-gap:36px;left:40px;right:32px} .tv-d-head .dt-titel{font-size:38px;line-height:44px}
  .tv-d-head .dt-intro{font-size:17px;line-height:27px} .tv-pk-k{font-size:18px;line-height:24px;padding:14px 4px 14px 16px} .tv-pk-auf p{font-size:15.5px;line-height:23px}
}
@media (max-height:860px) and (min-width:1000px){
  .tv-titel{font-size:48px;line-height:54px} .tv-knopf{padding:16px 0}
  .tv-auf p{font-size:16px;line-height:24px} .tv-auf .dt-pfeil{margin:12px 0 18px}
  .tv-unter{font-size:17px;line-height:25px;margin-top:14px}
  .tv-d-head .dt-intro{display:none} .tv-pk-k{padding:11px 4px 11px 16px}
}
/* schmal: untereinander, kein Schieben — der Pfeil klappt die Detailansicht unter der Sektion auf */
@media (max-width:999px){
  .tv{height:auto;overflow:visible}
  .tv-bahn{position:static;display:block;width:auto;transform:none!important}
  .tv-seite{height:auto}
  .tv-innen{position:static;height:auto;width:min(100% - 32px,1404px);padding:64px 0}
  .tv-text{position:static;width:auto}
  .tv-titel{font-size:36px;line-height:42px}
  .tv-liste{margin-top:32px}
  .tv-knopf{font-size:26px;line-height:32px;padding:16px 0}
  .tv-rahmen{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin-top:28px;border-right:1px solid #E2E2E6;border-radius:12px}
  .tv-bild{position:relative;width:100%;height:auto}
  .tv-seite.zwei{display:none}
  .tv.offen .tv-seite.zwei{display:block}
  .tv-d.an{position:static;display:block;width:min(100% - 32px,1404px);margin:0 auto;padding:0 0 64px}
  .tv-pk-k{font-size:17px;line-height:23px;padding:13px 4px 13px 14px} .tv-pk-auf p{font-size:15px;line-height:22px}
  .tv-d > *{opacity:1;transform:none}
  .tv-esc{display:none}
  .tv-d-head .dt-titel{font-size:30px;line-height:36px}
  .tv-d-bild{padding-top:24px} .tv-d-fig{max-width:none}
  .tv-d-liste{overflow:visible;margin-top:24px}
  .tv-unter{font-size:17px;line-height:25px}
}
@media (prefers-reduced-motion:reduce){ .tv-lauf{display:none} .tv-bahn{transition:none} }

/* in der Detailansicht stört die Sprungleiste am rechten Bildrand */
html:has(.tv.offen) .sl{opacity:0;pointer-events:none}

/* (die gespiegelte Fassung für „Du behältst die Kontrolle“ ist weg — Wirt, 16.10.2026: „genau so aufteilen wie Sektion 2“) */
/* das Bild füllt den Rahmen immer ganz — ist der Rahmen breiter als das Bild, blieb sonst am Fensterrand ein heller
   Streifen stehen (Wirt, 16.10.2026). Das Bild wird dann unten etwas angeschnitten, nie seitlich verzerrt. */
@media (min-width:1000px){
  .tv-bild{right:0;width:auto;aspect-ratio:auto}
  .tv-bild img{object-fit:cover;object-position:left top}
}