/* =====================================================================
   LABSTELLE · VERANSTALTUNGEN
   Gebaut auf dem Gestaltungssystem (designsystem-fable.html). Tokens und
   Bauteile sind von dort übernommen; was neu ist, steht unter „Neu für
   diese Seite" und ist als Ergänzung des Systems gedacht.

   Grundeinheit u = 7 px · Grundzeile 28 · Halbzeile 14
   ===================================================================== */

/* ---------- 1. Tokens: Hell (Tag) ---------------------------------- */
.labva {
  --brand-moss:  #2E3A32;
  --brand-paper: #F4F4F0;
  --brand-cream: #EEF0E9;
  --brand-ink:   #14171A;

  --color-bg:             #F4F4F0;
  --color-surface:        #EEF0E9;
  --color-surface-raised: #FAFAF8;
  --color-text:           #14171A;
  --color-text-quiet:     #606862;
  --color-line:           #D6D8D4;
  --color-line-strong:    #7D847E;
  --color-focus:          #14171A;
  --color-img-label:      #505853;   /* Beschriftung im Bildplatz: 5,1:1 auf dem unteren Ende des Verlaufs (Linie) */

  --color-moss:           #2E3A32;
  --color-moss-top:       #414C44;
  --color-moss-deep:      #252E2A;
  --color-on-moss:        #EEF0E9;
  --color-on-moss-quiet:  #ABB0A9;
  --color-on-moss-quiet-text: #BFC3BD;   /* leiser Text auf Moos in 12–13 px: 5,0:1 auch auf Moos-oben */
  --color-moss-line:      #7B837B;

  --btn-bg:        #14171A;
  --btn-fg:        #EEF0E9;
  --btn-bg-hover:  #2E3A32;
  --btn-bg-active: #0C0E10;

  --tz-morning: #B9BCB7;
  --tz-noon:    #737B74;
  --tz-evening: #2E3A32;

  --u: 7px;
  --s-1: 7px;   --s-2: 14px;  --s-3: 21px;  --s-4: 28px;  --s-6: 42px;
  --s-8: 56px;  --s-10: 70px; --s-12: 84px; --s-16: 112px; --s-24: 168px; --s-32: 224px;
  --line-h: 28px;
  --half-h: 14px;

  --gutter: 14px;
  --margin: 21px;
  --col: 84px;
  --container: 1316px;
  --measure: 644px;

  --font-display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --font-text:    Manrope, "Helvetica Neue", Arial, sans-serif;
  --font-label:   Archivo, "Helvetica Neue", Arial, sans-serif;

  --radius-built: 0px;
  --radius-touch: 999px;

  --motion-duration: 240ms;
  --motion-ease: cubic-bezier(.3, 0, .2, 1);
  --motion: var(--motion-duration) var(--motion-ease);

  color-scheme: light;

  /* Zweite Zeichnung: Restaurant, Bar und Innenhof. Eigener Satz Werte,
     damit sie den Saalplan nicht anfasst. */
  --skz-ink:#14171A; --skz-hatch:#2E3A32; --skz-poche:#2E3A32; --skz-moss:#919791;
  --skz-hof:#E3E6DE; --skz-leaf:#DDE3D8; --skz-candle:#2E3A32; --skz-glass:#FFFFFF;
  --skz-glass-o:.62; --skz-rib:#2E3A32; --skz-light:#FFFFFF; --skz-pool-o:.95;
  --skz-cone-o:0; --skz-halo-o:.8; --skz-shadow-o:.38; --skz-way:#14171A; --skz-fs:.8px;
}

/* ---------- 1b. Tokens: Dunkel (Abend) ------------------------------ */



/* ---------- 2. Grundzustand ---------------------------------------- */
.labva *, .labva *::before, .labva *::after { box-sizing: border-box; }

/* Schutzwall gegen das Theme. Unser Stylesheet gestaltet Klassen und überlässt
   den Rest dem Browser. Auf labstelle.at steht aber das Theme dazwischen, und
   dessen Elementregeln (li, label, h2, cite …) schlagen jede Vererbung – im
   Moos-Abschnitt würden die Überschriften schwarz auf Dunkelgrün stehen.
   :where() zählt null: eingesperrt liegt die Regel bei (0,1,0), also über jeder
   Elementregel des Themes und unter unseren eigenen Klassenregeln. */
.labva :where(h1, h2, h3, h4, h5, h6, p, blockquote, figure, figcaption, dl, dt, dd,
  ul, ol, li, table, caption, thead, tbody, tfoot, tr, th, td, fieldset, legend,
  form, label, details, summary, article, section, header, footer, nav, aside,
  address, hr, b, strong, i, em, small, cite, time, code) {
  margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit;
  font-style: inherit; line-height: inherit; letter-spacing: inherit;
  text-align: inherit; text-transform: inherit; text-decoration: inherit;
  vertical-align: baseline; float: none;
}
.labva :where(ul, ol) { list-style: none; }
.labva :where(b, strong) { font-weight: 700; }
.labva :where(i, em, cite, address) { font-style: italic; }
.labva { -webkit-text-size-adjust: 100%; }

.labva {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: 18px;
  line-height: var(--line-h);
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-hyphens: auto; hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.labva h1, .labva h2, .labva h3, .labva h4, .labva p, .labva figure, .labva ul, .labva ol, .labva dl, .labva dd, .labva table, .labva blockquote { margin: 0; }
.labva ul, .labva ol { padding: 0; }
.labva img, .labva svg { display: block; max-width: 100%; }
.labva a { color: inherit; }
.labva a, .labva button, .labva label, .labva input, .labva select, .labva textarea, .labva summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.labva button, .labva input, .labva select, .labva textarea { font: inherit; color: inherit; letter-spacing: inherit; }
.labva :focus { outline: none; }
.labva :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* Sprungziele landen unter der Kopfzeile, nicht darunter versteckt */
.labva [id] { scroll-margin-top: var(--s-16); }

.labva a, .labva button, .labva .btn, .labva .chip > span, .labva .card, .labva input, .labva select, .labva textarea, .labva .tl-scene, .labva .link, .labva .case {
  transition:
    background-color var(--motion),
    color var(--motion),
    border-color var(--motion),
    text-decoration-color var(--motion),
    box-shadow var(--motion),
    opacity var(--motion),
    visibility var(--motion);
}
@media (prefers-reduced-motion: reduce) {
  .labva *, .labva *::before, .labva *::after { transition-duration: 0ms !important; animation: none !important; }
}

/* Sprunglink: erstes Element, sichtbar nur im Fokus */
.labva .skip { position: absolute; left: var(--s-3); top: -100px; z-index: 10; }
.labva .skip:focus-visible { top: var(--s-2); }

/* Nur für Vorleser */
.labva .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. Typografische Stufen -------------------------------- */
.labva .t-h1, .labva .t-h2, .labva .t-h3, .labva .t-h4, .labva .t-lead, .labva .t-price, .labva .t-price-l, .labva .t-number, .labva .t-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: none;
  text-wrap: balance;
  -webkit-hyphens: manual; hyphens: manual;
}
.labva .t-h1 { font-size: 48px; line-height: 56px; letter-spacing: -.010em; font-variation-settings: "opsz" 45; }
.labva .t-h2 { font-size: 36px; line-height: 42px; letter-spacing: -.005em; font-variation-settings: "opsz" 32; }
.labva .t-h3 { font-size: 24px; line-height: 28px; letter-spacing: 0;       font-variation-settings: "opsz" 18; }
.labva .t-h4 { font-size: 24px; line-height: 28px; letter-spacing: 0;       font-variation-settings: "opsz" 18; }
.labva .t-lead { font-size: 20px; line-height: 28px; letter-spacing: .005em;  font-variation-settings: "opsz" 14; font-style: italic; font-weight: 400; text-wrap: pretty; }
.labva .t-quote { font-size: 24px; line-height: 28px; letter-spacing: .005em;  font-variation-settings: "opsz" 18; font-style: italic; font-weight: 400; text-wrap: pretty; }
.labva .t-price { font-size: 24px; line-height: 28px; letter-spacing: 0;       font-variation-settings: "opsz" 18; font-variant-numeric: tabular-nums lining-nums; }
.labva .t-price-l { font-size: 36px; line-height: 42px; letter-spacing: -.005em; font-variation-settings: "opsz" 32; font-variant-numeric: tabular-nums lining-nums; }
.labva .t-number { font-size: 48px; line-height: 56px; letter-spacing: -.010em; font-variation-settings: "opsz" 45; font-variant-numeric: tabular-nums lining-nums; }
@media (min-width: 1024px) {
  .labva .t-h1 { font-size: 60px; line-height: 70px; letter-spacing: -.015em; font-variation-settings: "opsz" 58; }
  .labva .t-h2 { font-size: 48px; line-height: 56px; letter-spacing: -.010em; font-variation-settings: "opsz" 45; }
  .labva .t-h3 { font-size: 36px; line-height: 42px; letter-spacing: -.005em; font-variation-settings: "opsz" 32; }
  .labva .t-lead { font-size: 24px; line-height: 28px; letter-spacing: .005em;  font-variation-settings: "opsz" 18; }
  .labva .t-number { font-size: 72px; line-height: 84px; letter-spacing: -.020em; font-variation-settings: "opsz" 72; }
}
.labva .t-h1 em, .labva .t-h2 em, .labva .t-h3 em { display: block; font-style: italic; font-weight: 400; letter-spacing: calc(var(--ls-upright, 0em) + .005em); }
.labva .t-h1 { --ls-upright: -.010em; } .labva .t-h2 { --ls-upright: -.005em; } .labva .t-h3 { --ls-upright: 0em; }
@media (min-width: 1024px) { .labva .t-h1 { --ls-upright: -.015em; } .labva .t-h2 { --ls-upright: -.010em; } .labva .t-h3 { --ls-upright: -.005em; } }

.labva .t-body { font-family: var(--font-text); font-size: 18px; line-height: 28px; font-weight: 400; letter-spacing: 0; }
.labva .t-small { font-family: var(--font-text); font-size: 15px; line-height: 21px; font-weight: 400; letter-spacing: .005em; }
.labva .quiet { color: var(--color-text-quiet); }
.labva .tabular { font-variant-numeric: tabular-nums lining-nums; }
.labva .measure { max-width: var(--measure); }
/* Kleinste Stufe der Orientierungsschicht: 13 / 14 statt 12 / 14. Laufweite nach Systemregel .14 em − .02 em je px über 12 = .12 em.
   Gilt für alles, was unten als Eyebrow-Schnitt gesetzt ist (Eyebrow, Feldbeschriftung, Tabellenköpfe, Bildlabel). */
.labva .eyebrow { font-family: var(--font-label); font-size: 13px; line-height: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-quiet); }
.labva .meta { font-family: var(--font-label); font-size: 13px; line-height: 28px; font-weight: 400; letter-spacing: .02em; color: var(--color-text-quiet); font-variant-numeric: tabular-nums lining-nums; }
.labva .meta b { font-weight: 500; color: var(--color-text); }
.labva .data { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); font-family: var(--font-label); font-size: 13px; line-height: 28px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums lining-nums; }
.labva .data dt { color: var(--color-text-quiet); font-weight: 400; }
.labva .data dd { margin: 0; color: var(--color-text); }
.labva .data > div { display: flex; gap: var(--s-1); }

/* ---------- 4. Raster ---------------------------------------------- */
.labva .container { width: 100%; max-width: calc(var(--container) + 2 * var(--margin)); margin-inline: auto; padding-inline: var(--margin); }
.labva .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.labva .grid > * { min-width: 0; }
@media (min-width: 600px) { .labva { --gutter: 28px; --margin: 42px; } .labva .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .labva { --margin: 56px; } .labva .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.labva .span-3, .labva .span-4, .labva .span-5, .labva .span-6, .labva .span-7, .labva .span-8, .labva .span-12, .labva .span-full { grid-column: 1 / -1; }
.labva .span-3 { grid-column: span 2; }
@media (min-width: 600px) { .labva .span-3 { grid-column: span 2; } .labva .span-4, .labva .span-6 { grid-column: span 4; } .labva .span-5, .labva .span-7 { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .labva .span-3 { grid-column: span 3; } .labva .span-4 { grid-column: span 4; } .labva .span-5 { grid-column: span 5; } .labva .span-6 { grid-column: span 6; } .labva .span-7 { grid-column: span 7; } .labva .span-8 { grid-column: span 8; } }
.labva .stack > * + * { margin-top: var(--s-4); }
.labva .stack-2 > * + * { margin-top: var(--s-2); }
.labva .stack-8 > * + * { margin-top: var(--s-8); }
.labva .row-wrap { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; }

/* ---------- 5. Material -------------------------------------------- */
.labva .moss {
  background: var(--color-moss);   /* flach wie der Fuß von labstelle.at, kein Verlauf */
  color: var(--color-on-moss);
  --color-text: var(--color-on-moss);
  --color-text-quiet: var(--color-on-moss-quiet-text);   /* 5,0:1 auf Moos-oben, gemessen 4,39 mit dem alten Wert */
  --color-line: var(--color-on-moss-quiet);              /* Trennlinien 4,1:1 statt 2,3:1 */
  --color-line-strong: var(--color-on-moss-quiet-text);
  --color-focus: var(--color-on-moss);
  --color-surface: var(--color-moss-deep);
  --color-surface-raised: var(--color-moss-top);
  --btn-bg: #EEF0E9; --btn-fg: #14171A; --btn-bg-hover: #F4F4F0; --btn-bg-active: #ABB0A9;
}
/* Farbflächen wie auf der Startseite (seit 3.10): Leinen, Efeu, Champagner. Gleiche Token-Logik wie .moss. */
.labva .leinen, .labva .efeu, .labva .fest {
  color: #14171A;
  --color-text: #14171A;
  --color-text-quiet: #5E655C;
  --color-line: rgba(20,23,26,.22);
  --color-line-strong: rgba(20,23,26,.5);
  --color-focus: #14171A;
  --color-surface: rgba(255,255,255,.30);
  --color-surface-raised: rgba(255,255,255,.48);
  --btn-bg: #14171A; --btn-fg: #EEF0E9; --btn-bg-hover: #2E3A32; --btn-bg-active: #14171A;
}
.labva .leinen { background: #D8D6CC; }
.labva .efeu   { background: #B7C2B2; --color-text-quiet: #4F5A4E; }
.labva .fest   { background: #E0BE84; --color-text-quiet: #6B5B44; --tz-morning: rgba(20,23,26,.18); --tz-noon: rgba(20,23,26,.5); --tz-evening: #14171A; }
.labva .leinen .quiet, .labva .efeu .quiet, .labva .fest .quiet { color: var(--color-text-quiet); }
.labva .sec.leinen, .labva .sec.efeu, .labva .sec.fest { box-shadow: none; }
.labva .sec.leinen + .sec, .labva .sec.efeu + .sec, .labva .sec.fest + .sec { box-shadow: none; }
.labva .leinen .img-dark, .labva .efeu .img-dark, .labva .fest .img-dark { background: var(--color-moss); color: var(--color-on-moss); }

.labva .rule-didone { height: 7px; border-top: 2px solid currentColor; border-bottom: 1px solid currentColor; }
.labva .rule-block { height: 14px; }
.labva .rule { height: 0; border-top: 1px solid var(--color-line); }

/* ---------- 6. Bauteile (aus dem System) --------------------------- */
.labva .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 56px; padding: 0 var(--s-4);
  border-radius: var(--radius-touch); border: 1px solid transparent;
  font-family: var(--font-text); font-size: 13px; line-height: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; user-select: none; text-align: center;
}
.labva .btn-primary { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.labva .btn-primary:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.labva .btn-primary:active { background: var(--btn-bg-active); border-color: var(--btn-bg-active); }
.labva .btn-secondary { background: transparent; color: var(--color-text); border-color: var(--color-line-strong); }
.labva .btn-secondary:hover { background: var(--color-surface-raised); border-color: var(--color-text); }
.labva .btn-secondary:active { background: var(--color-line); border-color: var(--color-text); }
.labva .btn-small { min-height: 42px; padding: 0 var(--s-3); }

.labva .link {
  display: inline-block; min-height: 56px; padding: var(--s-2) 0;
  font-family: var(--font-text); font-size: 15px; line-height: 28px; font-weight: 500; letter-spacing: .005em;
  color: var(--color-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: var(--color-line-strong);
}
.labva .link:hover { text-decoration-color: currentColor; }
.labva .link:active { color: var(--color-text-quiet); text-decoration-color: currentColor; }
.labva .link-dir::after { content: "\2009\2192"; text-decoration: none; display: inline-block; }
.labva .link-inline { min-height: 0; padding: 0; font: inherit; letter-spacing: inherit; }

.labva .card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); background: var(--color-surface); border-radius: var(--radius-built); color: inherit; text-decoration: none; }
.labva .card > * + * { margin: 0; }
.labva a.card:hover { background: var(--color-surface-raised); }
.labva a.card:active { background: var(--color-line); }
.labva .card-foot { margin-top: auto; }

.labva .chip { display: inline-flex; padding: var(--s-1) 0; cursor: pointer; position: relative; }
.labva .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.labva .chip > span {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 var(--s-3);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-touch);
  font-family: var(--font-label); font-size: 13px; line-height: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-text); background: transparent;
}
.labva .chip:hover > span { background: var(--color-surface-raised); border-color: var(--color-text); }
.labva .chip:active > span { background: var(--color-line); border-color: var(--color-text); }
.labva .chip input:checked + span { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.labva .chip input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* Auf Moos ist --color-text hell: der gewählte Chip braucht die dunkle Fläche. */
.labva .moss .chip input:checked + span { background: var(--color-moss-top); color: var(--color-on-moss); border-color: var(--color-on-moss); }
.labva .moss .chip:hover > span { background: var(--color-moss-top); border-color: var(--color-on-moss); }
.labva .moss .chip:active > span { background: var(--color-moss-top); }
.labva .chip-row { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); }

.labva .tz { display: inline-flex; gap: var(--s-1); height: 28px; align-items: center; }
.labva .tz i { display: block; width: 28px; height: 7px; border: 1px solid var(--color-line-strong); background: transparent; }
/* Der Rahmen bleibt in allen Segmenten Linie stark (≥ 3:1 auf beiden Gründen); die Füllung trägt die Tageszeit.
   Vorher stand das Vormittagssegment rahmenlos mit 1,74:1 auf Papier; der Abendmodus hatte es für das dritte Segment bereits so gelöst. */
.labva .tz i.on:nth-child(1) { background: var(--tz-morning); }
.labva .tz i.on:nth-child(2) { background: var(--tz-noon); }
.labva .tz i.on:nth-child(3) { background: var(--tz-evening); }

/* Bildplatz: trägt die Lichtquelle des Hauses. Später: <img> hinein, Label raus. */
.labva .img { position: relative; overflow: hidden; border-radius: var(--radius-built);
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, var(--color-surface-raised) 0%, transparent 70%),
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-line) 100%);
}
.labva .img.r-3-2 { aspect-ratio: 3 / 2; } .labva .img.r-1-1 { aspect-ratio: 1 / 1; } .labva .img.r-4-5 { aspect-ratio: 4 / 5; } .labva .img.r-2-1 { aspect-ratio: 2 / 1; }
.labva .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.labva .img-label { position: absolute; inset: auto 0 var(--s-2) 0; text-align: center; padding: 0 var(--s-2); font-family: var(--font-label); font-size: 13px; line-height: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-img-label); }
.labva .img-caption { padding-top: var(--s-1); font-family: var(--font-text); font-size: 15px; line-height: 21px; letter-spacing: .005em; color: var(--color-text-quiet); }
.labva .img-caption b { font-weight: 500; color: var(--color-text); }
.labva .img-dark { background: var(--color-moss); color: var(--color-on-moss); }
.labva .img-dark .img-label { color: var(--color-on-moss-quiet); }
/* Kuppelsprossen als Zeichnung im leeren Bildplatz: das Haus, nicht ein Symbol */
.labva .img-dome::before { content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='xMidYMax slice'><g fill='none' stroke='%237D847E' stroke-opacity='.55'><path d='M40 210 Q300 -60 560 210' stroke-width='1.5'/><path d='M110 210 Q300 10 490 210'/><path d='M180 210 Q300 80 420 210'/><path d='M300 40 V210'/><path d='M40 210 H560' stroke-width='1.5'/></g></svg>");
  background-size: cover; background-position: center bottom; opacity: 1; }

/* Formular */
.labva .field { display: flex; flex-direction: column; gap: 0; }
.labva .field > label, .labva .field > legend { font-family: var(--font-label); font-size: 13px; line-height: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-quiet); padding-bottom: var(--s-2); }
.labva .field > legend { display: block; float: none; }
.labva .input {
  width: 100%; min-height: 56px; padding: 0 var(--s-3);
  background: var(--color-surface-raised); color: var(--color-text);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-built);
  font-family: var(--font-text); font-size: 18px; line-height: 28px; letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
  appearance: none; -webkit-appearance: none;
}
.labva .input::placeholder { color: var(--color-text-quiet); opacity: 1; }
/* Zeiger: ein Schritt dunkler, aber nicht die Textfarbe – die ist dem Fehler vorbehalten */
.labva .input:hover { border-color: var(--color-text-quiet); }
.labva .input:focus-visible { border-color: var(--color-text); outline: 2px solid var(--color-focus); outline-offset: 0; }
.labva .field > label .req, .labva .field > legend .req { color: var(--color-text-quiet); font-weight: 400; }
.labva .field > label .req::before, .labva .field > legend .req::before { content: "\2009\00B7\2009"; }
.labva .field-hint { font-family: var(--font-text); font-size: 15px; line-height: 21px; letter-spacing: .005em; color: var(--color-text-quiet); padding-top: var(--s-1); }
.labva .field-hint a { text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--color-line-strong); }
.labva .field-hint a:hover { text-decoration-color: currentColor; }
/* Fehler ohne Rot, ohne Skript und ohne :has(): erst nach Berührung des Feldes (:user-invalid), mit Skript zusätzlich nach dem Absendeversuch (.is-invalid).
   Drei Zeichen zugleich: Rahmen 2 px in Textfarbe, ein Balken 7 px innen links, ein eigener Fehlersatz je Feld. */
.labva .field-error { display: none; font-family: var(--font-text); font-size: 15px; line-height: 21px; letter-spacing: .005em; color: var(--color-text); padding-top: var(--s-1); }
.labva .field-error::before { content: "\2014\2009"; }
.labva .input:user-invalid, .labva .field.is-invalid .input { border-color: var(--color-text); border-width: 2px; padding-inline: 20px; box-shadow: inset 7px 0 0 var(--color-text); }
.labva .input:user-invalid ~ .field-error, .labva .field.is-invalid .field-error { display: block; }
.labva .input:user-invalid ~ .field-hint, .labva .field.is-invalid .field-hint { color: var(--color-text); }
/* Fehlerüberblick über dem Absendeknopf, vom Skript befüllt */
.labva .form-errors { grid-column: 1 / -1; border-top: 2px solid var(--color-text); padding: 13px 0 0; }
.labva .form-errors[hidden] { display: none; }
.labva .form-errors p { font-family: var(--font-text); font-size: 18px; line-height: 28px; }
.labva .form-errors a { text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--color-line-strong); }
.labva .form-errors a:hover { text-decoration-color: currentColor; }
/* Bestätigung nach dem Absenden: versteckt, bis das Formular-Plugin sie einblendet */
.labva .form-done[hidden] { display: none; }
.labva select.input { padding-right: 56px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M2 5l5 5 5-5' fill='none' stroke='%237D847E' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 21px center; }


.labva select.input:user-invalid, .labva .field.is-invalid select.input { padding-right: 55px; }
.labva textarea.input { min-height: 112px; padding-block: var(--s-2); resize: vertical; }

/* Navigationszeile: reagiert auf ihren Platz (Container), nicht aufs Fenster.
   Schwelle 840 px = was Wortmarke, fünf Einträge und zwei Knöpfe tatsächlich brauchen;
   bei 1024 px Fensterbreite hat der Container 912 px, die Einträge bleiben also sichtbar. */
/* NUR FÜR DIE VORSCHAU, wird nicht ausgeliefert.
   Nachbau der Theme-Kopfzeile: „+ Menü" liegt frei über dem Inhalt, dazu die
   beiden Reiter an der linken Kante. Auf dem dunklen Einstieg steht alles in
   Creme – genau das ist der Gewinn gegenüber heute, wo es auf Papierton
   in hellem Grau steht und praktisch unsichtbar ist. */
.labva .site-head { position: absolute; top: 0; left: 0; right: 0; z-index: 5; pointer-events: none; }
.labva .theme-menu {
  position: absolute; left: var(--margin); top: var(--s-4);
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-label); font-size: 19px; line-height: 34px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-on-moss); text-decoration: none; pointer-events: auto;
}
.labva .theme-plus { position: relative; width: 34px; height: 34px; flex: 0 0 auto; }
.labva .theme-plus::before, .labva .theme-plus::after { content: ""; position: absolute; background: currentColor; }
.labva .theme-plus::before { left: 0; top: 16px; width: 34px; height: 1.5px; }
.labva .theme-plus::after { top: 0; left: 16px; height: 34px; width: 1.5px; }
.labva .theme-tab {
  position: absolute; left: 0; width: 44px; padding: var(--s-2) 0;
  writing-mode: vertical-rl; transform: rotate(180deg); text-align: center;
  font-family: var(--font-label); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.labva .theme-tab-karten { top: 112px; color: var(--color-on-moss); box-shadow: inset -1px 0 0 var(--color-on-moss-quiet); }
.labva .theme-tab-shop { top: 224px; background: var(--color-moss-top); color: var(--color-on-moss); }
@media (max-width: 767px) { .labva .theme-tab { display: none; } .labva .theme-menu { font-size: 16px; } }

.labva .nav-wrap { container-type: inline-size; }
.labva .nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 84px; padding: var(--s-2) 0; }
.labva .nav-brand { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: 0; font-variation-settings: "opsz" 18; font-optical-sizing: none; text-decoration: none; color: var(--color-text); padding: var(--s-2) 0; }
.labva .nav-list { display: flex; list-style: none; padding: 0; margin: 0; gap: var(--s-4); }
.labva .nav-link { display: inline-block; padding: var(--s-2) 0; font-family: var(--font-label); font-size: 13px; line-height: 28px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-quiet); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.labva .nav-link:hover { color: var(--color-text); }
.labva .nav-link:active { color: var(--color-text); text-decoration-color: var(--color-line-strong); }
.labva .nav-link[aria-current="page"] { color: var(--color-text); text-decoration-color: var(--color-text); }
.labva .nav-actions { display: flex; gap: var(--s-2); align-items: center; }
.labva .nav-brand, .labva .nav-list, .labva .nav-actions { min-width: 0; }
/* Aufklappmenü für schmale Kopfzeilen: <details> ohne Skript. Der Knopf heißt „Seiten", nicht „Menü" –
   auf einer Restaurantseite liest jeder „Menü" als Speisekarte. Die Liste legt sich unter die Kopfzeile. */
.labva .nav-menu { display: none; position: static; }
.labva .nav-menu summary { list-style: none; }
.labva .nav-menu summary::-webkit-details-marker { display: none; }
.labva .nav-menu summary::after { content: "\2009+"; }
.labva .nav-menu[open] summary::after { content: "\2009\2212"; }
.labva .nav-menu[open] summary { background: var(--color-surface-raised); border-color: var(--color-text); }
.labva .nav-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-bg); box-shadow: 0 1px 0 var(--color-line), 0 -1px 0 var(--color-line); padding: var(--s-2) 0 var(--s-4); }
.labva .nav-panel ul { list-style: none; margin: 0; padding: 0; }
.labva .nav-panel .nav-link { display: block; min-height: 56px; }
@container (max-width: 839px) {
  .labva .nav-list { display: none; }
  .labva .nav-menu { display: block; }
}
@media (max-width: 599px) {
  /* Zwei Zeilen à 56 als Raster: Wortmarke und „Seiten" oben, „Angebot anfragen" darunter in voller Zeile. Bricht bis 320 nicht um. */
  .labva .nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s-2); padding: var(--s-1) 0; min-height: 0; align-items: center; }
  .labva .nav-actions { display: contents; }
  .labva .nav-menu { grid-column: 2; grid-row: 1; justify-self: end; }
  .labva .nav-actions .btn { grid-column: 1 / -1; grid-row: 2; justify-self: end; padding: 0 var(--s-3); letter-spacing: .08em; white-space: nowrap; }
  .labva .nav-menu summary { background: transparent; border-color: transparent; padding-right: 0; }
  .labva .nav-panel { padding-top: 0; }
  /* Die Kopfzeile ist hier 126 px hoch; Sprungziele landen weiter darunter */
  .labva [id] { scroll-margin-top: calc(var(--s-16) + var(--s-6)); }
}

/* Kapazitätsmatrix, Betriebsgröße: 6 Räume × 4 Nutzungsarten */
.labva .matrix { position: relative; }
.labva .matrix input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.labva .matrix table { width: 100%; border-collapse: collapse; }
.labva .matrix th, .labva .matrix td { text-align: left; vertical-align: top; padding: 13px var(--s-3) var(--s-2) 0; border-top: 1px solid var(--color-line); }
.labva .matrix th:last-child, .labva .matrix td:last-child { padding-right: 0; }
/* Ab der zweiten Spalte 14 px links: dort sitzt später der Balken der gewählten Spalte, ohne dass sich Text bewegt */
.labva .matrix th:not(:first-child), .labva .matrix td:not(:first-child) { padding-left: var(--s-2); }
.labva .matrix thead th { font-family: var(--font-label); font-size: 13px; line-height: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-quiet); padding-top: 0; padding-bottom: var(--s-2); border-top: 0; }
.labva .matrix tbody tr:last-child td, .labva .matrix tbody tr:last-child th { border-bottom: 1px solid var(--color-line); }
.labva .matrix th.room { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 500; font-optical-sizing: none; font-variation-settings: "opsz" 18; -webkit-hyphens: manual; hyphens: manual; }
.labva .matrix th.room small { display: block; font-family: var(--font-label); font-size: 13px; line-height: 28px; font-weight: 400; letter-spacing: .02em; color: var(--color-text-quiet); }
.labva .matrix td.cap { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 500; font-optical-sizing: none; font-variation-settings: "opsz" 18; font-variant-numeric: tabular-nums lining-nums; }
.labva .matrix td.cap b { font-weight: inherit; }
.labva .matrix td.cap .note { display: block; font-family: var(--font-label); font-size: 13px; line-height: 28px; font-weight: 400; letter-spacing: .02em; color: var(--color-text-quiet); text-decoration: none; }
.labva .matrix td.cap.none { color: var(--color-line-strong); }
.labva .matrix td, .labva .matrix th { transition: color var(--motion), background-color var(--motion), box-shadow var(--motion); }
/* Ohne :has() gibt es keine Filterlogik: dann bleiben die Chips weg, statt bedienbar auszusehen. Die Tabelle steht vollständig. */
.labva .matrix-filters { display: none; }
.labva .matrix-status { padding-bottom: var(--s-4); }
@supports selector(:has(*)) {
  .labva .matrix-filters { display: grid; gap: var(--s-2) var(--s-6); padding-bottom: var(--s-4); }
  @media (min-width: 600px) { .labva .matrix-filters { grid-template-columns: auto auto; justify-content: start; } }
  /* Reihenfolge ist Kaskade: 1. Nutzungsart, 2. Gästezahl. Der Gästezahl-Block steht bewusst zuletzt, damit die Streichung
     nicht von der gewählten Form wieder aufgehoben wird (An Tischen + ab 81: 70, 22 und — bleiben leise). */
  .labva .matrix:has(#f-bankett:checked) .cap:not([data-use="bankett"]), .labva .matrix:has(#f-tafel:checked)   .cap:not([data-use="tafel"]), .labva .matrix:has(#f-reihen:checked)  .cap:not([data-use="reihen"]), .labva .matrix:has(#f-empfang:checked) .cap:not([data-use="empfang"]) { color: var(--color-line-strong); }
  /* Gewählte Spalte: gehobene Fläche und ein Balken 2 px in Textfarbe – die Fläche allein misst 1,04:1 */
  .labva .matrix:has(#f-bankett:checked) .cap[data-use="bankett"], .labva .matrix:has(#f-tafel:checked)   .cap[data-use="tafel"], .labva .matrix:has(#f-reihen:checked)  .cap[data-use="reihen"], .labva .matrix:has(#f-empfang:checked) .cap[data-use="empfang"] { background: var(--color-surface); box-shadow: inset 2px 0 0 var(--color-text); }
  .labva .matrix:has(#f-bankett:checked) thead th:nth-child(3), .labva .matrix:has(#f-tafel:checked)   thead th:nth-child(4), .labva .matrix:has(#f-reihen:checked)  thead th:nth-child(5), .labva .matrix:has(#f-empfang:checked) thead th:nth-child(6) { color: var(--color-text); box-shadow: inset 2px 0 0 var(--color-text); }
  /* Gewählte Nutzungsart wird Text. Bewusst ohne :not(.none) im Selektor: das hielte die Spezifität über der des
     Gästezahl-Blocks, und die Streichung würde wieder schwarz. Die Striche bekommen ihre Farbe in einer eigenen Regel. */
  .labva .matrix:has(#f-bankett:checked) .cap[data-use="bankett"], .labva .matrix:has(#f-tafel:checked)   .cap[data-use="tafel"], .labva .matrix:has(#f-reihen:checked)  .cap[data-use="reihen"], .labva .matrix:has(#f-empfang:checked) .cap[data-use="empfang"] { color: var(--color-text); }
  .labva .matrix:has(#f-bankett:checked) .cap[data-use="bankett"].none, .labva .matrix:has(#f-tafel:checked)   .cap[data-use="tafel"].none, .labva .matrix:has(#f-reihen:checked)  .cap[data-use="reihen"].none, .labva .matrix:has(#f-empfang:checked) .cap[data-use="empfang"].none { color: var(--color-line-strong); }
  /* Gästezahl: Zellen unter der Untergrenze werden leise und gestrichen. Strich in currentColor, 2 px: 3,5:1 hell, 4,6:1 dunkel. */
  .labva .matrix:has(#g-15:checked)  .cap:not(.ge15), .labva .matrix:has(#g-31:checked)  .cap:not(.ge31), .labva .matrix:has(#g-81:checked)  .cap:not(.ge81), .labva .matrix:has(#g-131:checked) .cap:not(.ge131) { color: var(--color-line-strong); }
  /* Gestrichen wird nur die Zahl (<b>), nicht Bezeichnung und Notiz – eine Dekoration am Elternelement liefe durch alle Kinder */
  .labva .matrix:has(#g-15:checked)  .cap:not(.ge15):not(.none) b, .labva .matrix:has(#g-31:checked)  .cap:not(.ge31):not(.none) b, .labva .matrix:has(#g-81:checked)  .cap:not(.ge81):not(.none) b, .labva .matrix:has(#g-131:checked) .cap:not(.ge131):not(.none) b { text-decoration: line-through; text-decoration-color: currentColor; text-decoration-thickness: 2px; }
  .labva .matrix:has(#g-15:checked)  tr:not(:has(.ge15)) .room, .labva .matrix:has(#g-31:checked)  tr:not(:has(.ge31)) .room, .labva .matrix:has(#g-81:checked)  tr:not(:has(.ge81)) .room, .labva .matrix:has(#g-131:checked) tr:not(:has(.ge131)) .room { color: var(--color-text-quiet); }
}
.labva .matrix-filters .eyebrow { line-height: 28px; }
@media (max-width: 899px) {
  /* Der Tabellenkopf bleibt im Baum: Technik für Bildschirmlesegeräte statt display: none */
  .labva .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .labva .matrix table, .labva .matrix tbody { display: block; }
  .labva .matrix tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-2); border-top: 1px solid var(--color-line); padding: 13px 0 var(--s-2); }
  .labva .matrix tbody tr:last-child { border-bottom: 1px solid var(--color-line); }
  .labva .matrix td, .labva .matrix th { display: block; border: 0; padding: 0; }
  .labva .matrix tbody tr:last-child td, .labva .matrix tbody tr:last-child th { border: 0; }
  .labva .matrix th.room { grid-column: 1 / -1; padding-bottom: var(--s-2); }
  .labva .matrix td.tzc { grid-column: 1 / -1; order: 9; padding-top: var(--s-2); }
  .labva .matrix td.cap::before { content: attr(data-label); display: block; font-family: var(--font-label); font-size: 13px; line-height: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-quiet); padding-bottom: var(--s-2); }
  .labva .matrix td.cap { padding: var(--s-1) var(--s-1) var(--s-1) var(--s-2); }
  .labva .matrix td.cap .note { line-height: 21px; padding-top: 3px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .labva .matrix tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .labva .matrix td.cap::before { padding-bottom: 0; }
}

/* Saalplan (Blatt A). Übernommen aus plaene-fable.html, Abschnitt „02 · Blatt A · Saal, Skizze".
   Dort heißen die Klassen .skz-*, hier .sp-*. Nur die helle Fassung und nur die Schreibtisch-
   Zeichnung (die Telefonfassung wäre zusammen über 290 KB); Farben ausschließlich über die Tokens
   dieser Seite. Umgeschaltet wird wie beim Tageslauf: Radios und :has(), kein Skript. */
.labva .saalplan { position: relative; }
.labva .saalplan input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; visibility: hidden; }
.labva .sp-fig figure { margin: 0; }
.labva .sp-side { display: flex; flex-direction: column; gap: var(--s-4); }
.labva .sp-uses { border: 0; padding: 0; margin: 0; min-width: 0; }
.labva .sp-uses legend { line-height: 28px; float: left; width: 100%; }
.labva .sp-uses .chip-row { clear: both; }
.labva .sp-run-head { display: flex; flex-direction: column; gap: 0; padding-bottom: var(--s-2); }
.labva .sp-verdict { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 20px; line-height: 28px; font-optical-sizing: none; font-variation-settings: "opsz" 14; }
.labva .sp-run .t-small { color: var(--color-text-quiet); }
.labva .sp-download { margin-top: var(--s-6); }
.labva .sp-download .t-body { margin-bottom: var(--s-1); }

/* Die Zeichnung selbst: Tinte auf Papier, Schraffur statt Fläche. Fläche nur, wo Fläche ist:
   Tresen, Bühne, Schnittfläche der Wand. --sp-fs ist die Schriftgröße in Metern der Zeichnung. */
.labva .sp-svg { width: 100%; height: auto; display: block; overflow: visible; --sp-fs: .86px; }
.labva .sp-svg text { font-variant-numeric: lining-nums tabular-nums; }
.labva .sp-svg path, .labva .sp-svg line { fill: none; stroke: var(--color-text); stroke-linecap: round; stroke-linejoin: round; }
.labva .sp-svg .k1 { stroke-width: 1.45px; }
.labva .sp-svg .k2 { stroke-width: .9px; }
.labva .sp-svg .k3 { stroke-width: .62px; stroke-opacity: .9; }
.labva .sp-svg .k4 { stroke-width: .5px; stroke-opacity: .5; }
.labva .sp-svg .h { stroke: var(--color-moss); stroke-width: .55px; stroke-opacity: .55; }
.labva .sp-svg .hf { stroke-opacity: .32; }
.labva .sp-svg .hg { stroke-opacity: .28; }
.labva .sp-svg .bg { fill: var(--color-bg); stroke: none; }
.labva .sp-svg .poche { fill: var(--color-moss); stroke: none; }
/* In der Quelle ein eigener Farbwert („Moos 50 % zu Papier"); hier Moos mit halber Deckkraft, das ergibt denselben Ton ohne fünften Wert. */
.labva .sp-svg .sp-moss { fill: var(--color-moss); fill-opacity: .5; stroke: none; }
.labva .sp-svg .ch { fill: var(--color-bg); stroke: var(--color-text); stroke-width: .55px; stroke-opacity: .8; }
.labva .sp-svg .cd { fill: var(--color-moss); stroke: none; }
.labva .sp-svg .glass { fill: var(--color-surface-raised); fill-opacity: .62; stroke: none; }
.labva .sp-svg .rib { stroke: var(--color-moss); }
.labva .sp-svg .rib-apex { fill: var(--color-moss); stroke: none; }
.labva .sp-svg .cone { opacity: 0; stroke: none; }   /* Lichtkegel gehört zur Abendfassung, die hier nicht mitkommt */
.labva .sp-svg .pool, .labva .sp-svg .halo { stroke: none; }
.labva .sp-svg .s-halo0 { stop-color: var(--color-surface-raised); stop-opacity: .8; }
.labva .sp-svg .s-halo1 { stop-color: var(--color-surface-raised); stop-opacity: 0; }
.labva .sp-svg .s-pool0 { stop-color: var(--color-surface-raised); stop-opacity: .95; }
.labva .sp-svg .s-pool1 { stop-color: var(--color-surface-raised); stop-opacity: .43; }
.labva .sp-svg .s-pool2 { stop-color: var(--color-surface-raised); stop-opacity: 0; }
.labva .sp-svg .s-cone0, .labva .sp-svg .s-cone1 { stop-color: var(--color-surface-raised); stop-opacity: 0; }
.labva .sp-svg .arrow { stroke-opacity: .7; }
.labva .sp-svg .door { stroke-opacity: .7; }
.labva .sp-svg .street { fill: var(--color-text-quiet); font-family: var(--font-label); letter-spacing: .16em; text-transform: uppercase; }
/* Beschriftung: Name kursiv in Bodoni, Zahl in Archivo, Führungslinie fein und kurz */
.labva .sp-svg .lb { font-size: var(--sp-fs); }
.labva .sp-svg .lead { stroke-width: .6px; stroke-opacity: .7; }
.labva .sp-svg .lead-dot { fill: var(--color-text); stroke: none; }
.labva .sp-svg .lb-name { font-family: var(--font-display); font-style: italic; font-weight: 400; fill: var(--color-text); font-size: calc(var(--sp-fs) * 1.5); letter-spacing: .01em; }
.labva .sp-svg .lb-meta { font-family: var(--font-label); fill: var(--color-text-quiet); font-size: var(--sp-fs); letter-spacing: .02em; }
.labva .sp-svg .l-set .lb-meta:first-of-type { fill: var(--color-text); }
/* Die Zeichnung läuft auf allen Breiten. Lesbar bleibt sie über den viewBox-Ausschnitt und die
   Schriftgröße, nicht über eine zweite Fassung: der viewBox ist rechts um drei Einheiten weiter
   als in der Quelle, damit die Beschriftung hineinpasst. Zwischen 1024 und 1279 ist die Spalte am
   schmalsten, dort steht die Schrift eine Spur größer. */
@media (min-width: 1024px) and (max-width: 1279px) { .labva .sp-svg { --sp-fs: .96px; } }

/* Unter 768 ist die Zeichnung breiter als die Spalte. Statt einer zweiten Fassung bekommt sie eine
   waagrecht scrollende Region – dasselbe Muster wie .spec-wrap, mit Tastatur erreichbar. Sie läuft
   bis an den Rand des Fensters, damit möglichst viel Plan im Bild steht. */
.labva .sp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.labva .sp-hint { display: none; }
/* Bildzeile, die nur noch die Bedienhilfe traegt: ab 768 ist sie leer. */
.labva .nur-hinweis { display: none; }
@media (max-width: 767px) { .labva .nur-hinweis { display: block; } }
@media (max-width: 767px) { .labva .sp-hint { display: inline; } }
.labva .sp-wrap:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
@media (max-width: 767px) {
  .labva .sp-wrap { margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); }
  .labva .sp-wrap .sp-svg { min-width: 620px; }
}

/* Ohne :has() gibt es keine Umschaltung: dann steht die Gala-Bestuhlung sichtbar da, die
   Reiterzeile bleibt weg statt bedienbar auszusehen, und die Radios hängen nicht als leere
   Tabstationen im Tabverlauf. Es fehlt nichts – wie bei .tageslauf und .switch. */
.labva .sp-uses { display: none; }
.labva .sp-svg .set { display: none; }
.labva .sp-svg .set-gala { display: inline; }
.labva .sp-run { display: none; }
.labva .sp-run[data-sp="gala"] { display: block; }
.labva .sp-alt { display: none; }
.labva .sp-alt[data-sp="gala"] { display: inline; }
@supports selector(:has(*)) {
  .labva .saalplan input[type="radio"] { visibility: visible; }
  .labva .sp-uses { display: block; }
  .labva .sp-svg .set-gala { display: none; }
  .labva .sp-run[data-sp="gala"] { display: none; }
  .labva .sp-alt[data-sp="gala"] { display: none; }
  .labva .saalplan:has(#sp-gala:checked)    .set-gala, .labva .saalplan:has(#sp-empfang:checked) .set-empfang, .labva .saalplan:has(#sp-kino:checked)    .set-kino { display: inline; }
  .labva .saalplan:has(#sp-gala:checked)    .sp-run[data-sp="gala"], .labva .saalplan:has(#sp-empfang:checked) .sp-run[data-sp="empfang"], .labva .saalplan:has(#sp-kino:checked)    .sp-run[data-sp="kino"] { display: block; }
  /* Ohne Skript bleibt die Kinobestuhlung im Vorrat und die Zeichnung wäre leer.
     Dann wird die Auswahl gar nicht erst angeboten – Gala und Empfang stehen,
     und was im Kino gilt, steht als Text daneben. */
  .labva .saalplan .chip:has(#sp-kino) { display: none; }
  .labva .labva.js .saalplan .chip:has(#sp-kino), .labva.js .saalplan .chip:has(#sp-kino) { display: inline-flex; }
  .labva .saalplan:has(#sp-gala:checked)    .sp-alt[data-sp="gala"], .labva .saalplan:has(#sp-empfang:checked) .sp-alt[data-sp="empfang"], .labva .saalplan:has(#sp-kino:checked)    .sp-alt[data-sp="kino"] { display: inline; }
}
@media (max-width: 599px) {
  .labva .sp-uses .chip-row { gap: 0 var(--s-1); }
  .labva .sp-uses .chip > span { padding: 0 var(--s-2); letter-spacing: .08em; }
}

/* Tageslauf im Einstieg: drei Szenen, eine Kameraposition */
.labva .tageslauf { position: relative; border: 0; padding: 0; margin: 0; min-width: 0; }
.labva .tageslauf input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; visibility: hidden; }
.labva .tl-stage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-built); background: var(--color-surface); }
.labva .tl-scene { position: absolute; inset: 0; margin: 0; }
.labva .tl-scene svg, .labva .tl-scene img { width: 100%; height: 100%; object-fit: cover; }
/* Ohne :has(): die Vormittagsszene steht, die beiden anderen sind aus dem Baum (visibility), die Achse bleibt weg */
.labva .tl-scene:not(.abend) { visibility: hidden; }
.labva .tl-axis { display: none; }
@supports selector(:has(*)) {
  /* Ohne :has() sind die Beschriftungen weg; dann dürfen die Radios auch nicht im Tabverlauf stehen. */
  .labva .tageslauf input[type="radio"] { visibility: visible; }
  /* Mit :has(): visibility statt opacity allein – opacity: 0 ließe alle drei Bilder im Vorlesebaum */
  .labva .tl-scene { visibility: hidden; opacity: 0; }
  .labva .tageslauf:has(#tz-morgen:checked) .tl-scene.morgen, .labva .tageslauf:has(#tz-mittag:checked) .tl-scene.mittag, .labva .tageslauf:has(#tz-abend:checked)  .tl-scene.abend { visibility: visible; opacity: 1; }
  .labva .tl-axis { display: grid; }
}
.labva .tl-axis { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-line-strong); margin-top: 13px; }
.labva .tl-axis label { display: block; position: relative; padding: var(--s-2) var(--s-2) var(--s-2) 0; min-height: 56px; cursor: pointer; color: var(--color-text-quiet); }
.labva .tl-axis label::before { content: ""; position: absolute; top: -1px; left: 0; width: 1px; height: 7px; background: var(--color-line-strong); }
.labva .tl-axis label:hover, .labva .tl-axis label:active { color: var(--color-text); }
.labva .tl-time { display: block; font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 500; font-optical-sizing: none; font-variation-settings: "opsz" 18; font-variant-numeric: tabular-nums lining-nums; }
.labva .tl-desc { display: block; font-family: var(--font-label); font-size: 13px; line-height: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding-top: var(--s-2); }
.labva .tageslauf:has(#tz-morgen:checked) label[for="tz-morgen"], .labva .tageslauf:has(#tz-mittag:checked) label[for="tz-mittag"], .labva .tageslauf:has(#tz-abend:checked)  label[for="tz-abend"] { color: var(--color-text); }
.labva .tageslauf:has(#tz-morgen:checked) label[for="tz-morgen"]::before, .labva .tageslauf:has(#tz-mittag:checked) label[for="tz-mittag"]::before, .labva .tageslauf:has(#tz-abend:checked)  label[for="tz-abend"]::before { background: var(--color-text); width: 2px; }
.labva .tageslauf:has(#tz-morgen:focus-visible) label[for="tz-morgen"], .labva .tageslauf:has(#tz-mittag:focus-visible) label[for="tz-mittag"], .labva .tageslauf:has(#tz-abend:focus-visible)  label[for="tz-abend"] { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 599px) { .labva .tl-desc { letter-spacing: .08em; overflow-wrap: break-word; } }
@media (max-width: 413px) { .labva .tl-desc { letter-spacing: .04em; } .labva .tl-axis label { padding-right: var(--s-1); } }
@media (min-width: 1024px) { .labva .tl-stage { aspect-ratio: 2 / 1; } }
/* Der Film aus dem Saal. Er ersetzt die drei Tageszeiten: eine Zeichnung zeigt
   einen Grundriss, ein Film zeigt den Raum. Ohne Ton, läuft von selbst, keine
   Bedienelemente – er ist Bild, nicht Medienspieler. Wer Bewegung abbestellt
   hat, bekommt ihn angehalten und mit Bedienelementen (siehe Skript). */
.labva .saalfilm { margin: 0; }
.labva .saalfilm .tl-stage { aspect-ratio: 3 / 2; }
@media (min-width: 1024px) { .labva .saalfilm .tl-stage { aspect-ratio: 2 / 1; } }
.labva .film { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--color-moss); }
.labva .film[controls] { object-fit: contain; }

/* Der erste Bildplatz der Seite ist dunkel: eine Entscheidung, kein Ladezustand. */
.labva .tl-stage { background: var(--color-moss); }

/* Zitat */
.labva .quote { display: flex; flex-direction: column; gap: var(--s-2); }
.labva .quote cite { font-style: normal; }

/* Spezifikationstabelle (Factsheet, Kapazitäten zum Kopieren) */
.labva .spec { width: 100%; border-collapse: collapse; font-family: var(--font-text); font-size: 15px; line-height: 21px; letter-spacing: .005em; font-variant-numeric: tabular-nums lining-nums; }
.labva .spec th, .labva .spec td { text-align: left; vertical-align: top; padding: 6px var(--s-3) var(--s-1) 0; border-top: 1px solid var(--color-line); }
.labva .spec th:last-child, .labva .spec td:last-child { padding-right: 0; }
.labva .spec thead th { font-family: var(--font-label); font-size: 13px; line-height: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-quiet); border-top: 0; padding-bottom: var(--s-2); }
.labva .spec tbody th { font-weight: 500; }
.labva .spec tr:last-child td, .labva .spec tr:last-child th { border-bottom: 1px solid var(--color-line); }
.labva .spec td.num { text-align: right; }
.labva .spec-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.labva .spec-wrap .spec { min-width: 520px; }

/* ---------- 7. Neu für diese Seite --------------------------------- */
/* Seitenaufbau: Sektionen auf 84 (mobil) und 112 (ab 1024) */
.labva .sec { padding: var(--s-8) 0; box-shadow: inset 0 1px 0 var(--color-line); }
.labva .sec-first { box-shadow: none; padding-top: var(--s-4); }

/* Der Einstieg ist die dunkle Fläche, mit der die Seite anfängt. Er läuft bis
   an den oberen Rand; die Kopfzeile des Hauses liegt durchsichtig darüber und
   steht dadurch in Creme statt in hellem Grau auf Papier.
   Der obere Abstand hält den Platz für diese Kopfzeile frei. */
.labva .sec-first.moss { padding-top: calc(84px + var(--s-8)); padding-bottom: var(--s-10); }
@media (min-width: 1024px) { .labva .sec-first.moss { padding-top: calc(84px + var(--s-12)); padding-bottom: var(--s-12); } }
/* Der Bildplatz bekommt eine Kante, damit er sich auf Moos als Bild abhebt. */
.labva .moss .tl-stage { box-shadow: inset 0 0 0 1px rgba(238, 240, 233, .18); }
@media (min-width: 1024px) { .labva .sec-first { padding-top: var(--s-6); } }

/* ---------- Sprungleiste -------------------------------------------
   Die Seite ist lang. Von elf internen Sprungmarken zeigten zehn nach unten
   zum Formular und keine zurück nach oben – wer zwischendrin etwas
   nachsehen wollte, musste scrollen.

   Die Leiste steht IM FLUSS hinter dem Einstieg und klebt erst ab dort. So
   bleibt der Kopf der Seite ungestört, und ab dem zweiten Bildschirm ist
   der Weg zu Preisen, Räumen, Fakten und zur Anfrage immer einen Griff weit.

   Sie funktioniert ohne Skript – es sind gewöhnliche Sprungmarken. Das
   Skript setzt nur zusätzlich hervor, wo man gerade steht.

   ACHTUNG bei Änderungen: position:sticky stirbt lautlos, sobald ein
   Vorfahre overflow-x:hidden oder overflow:auto trägt. Am Rumpf steht
   bewusst overflow-x:clip – das erzeugt keinen Scroll-Container und ist
   deshalb unschädlich. Nicht auf hidden umstellen. */
/* Moos statt durchscheinendem Papier: Kopf und Fuß des Hauses sind Moos, die
   Leiste gehört zur selben Familie und liest sich dadurch als Navigation und
   nicht als Inhalt. Volldeckend – eine halbdurchsichtige Leiste ließ die
   Überschriften darunter durchschimmern und war unruhig. */
.labva .jump {
  /* Sollte der Kopf des Themes eines Tages selbst mitlaufen, setzt das Plugin
     --labva-kopf auf dessen Höhe, und die Leiste klebt darunter statt darüber. */
  position: sticky; top: var(--labva-kopf, 0px); z-index: 40;
  background: var(--color-moss);
  color: var(--color-on-moss);
  /* Feine Kante nach unten. Über den Moos-Abschnitten verschmilzt die Leiste
     sonst mit dem Text, der darunter durchläuft, und das sieht nach Fehler aus. */
  box-shadow: inset 0 -1px 0 rgba(238, 240, 233, .22);
}
.labva .jump-in {
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--s-8);
}
.labva .jump a {
  font-family: var(--font-label); font-size: 12px; line-height: 14px;
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
/* Der Rückweg. Steht links, weil dort der Daumen nichts anderes zu tun hat. */
.labva .jump-top {
  display: inline-flex; align-items: center; gap: var(--s-1);
  color: var(--color-on-moss-quiet-text); flex: none;
  padding: var(--s-2) 0;
}
.labva .jump-top:hover { color: var(--color-on-moss); }
.labva .jump-top b { font-weight: inherit; }

.labva .jump-list {
  display: flex; align-items: center; gap: 0 var(--s-4);
  list-style: none; margin: 0; padding: 0;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.labva .jump-list::-webkit-scrollbar { display: none; }
.labva .jump-list a {
  display: block; color: var(--color-on-moss-quiet-text);
  padding: var(--s-2) 0;
  border-bottom: 2px solid transparent;
}
.labva .jump-list a:hover { color: var(--color-on-moss); }
.labva .jump-list a.is-here { color: var(--color-on-moss); border-bottom-color: var(--color-on-moss); }

.labva .jump-cta {
  flex: none;
  display: inline-flex; align-items: center;
  min-height: 38px; padding: 0 var(--s-3);
  border-radius: var(--radius-touch);
  background: var(--brand-cream); color: var(--brand-ink);
  font-weight: 600;
}
.labva .jump-cta:hover { background: #FFFFFE; }

/* Am Telefon ist die Leiste 390 px breit und muss ohne Schieben auskommen:
   der Rückweg wird zum Pfeil, und „Beispiele“ fällt weg – die Rechenbeispiele
   stehen ohnehin direkt hinter den Räumen und werden von dort erreicht.
   Drei Sprünge plus Knopf passen gemessen in 390 px, vier nicht. */
@media (max-width: 767px) {
  .labva .jump-in { gap: var(--s-2); }
  .labva .jump-list { gap: 0 var(--s-2); }
  .labva .jump a { font-size: 11px; letter-spacing: .1em; }
  .labva .jump-cta { padding: 0 var(--s-2); }
  .labva .jump-top b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .labva .jump-list li:nth-child(3) { display: none; }   /* Beispiele */
}
/* Unter 375 px bleibt nur Platz für zwei Sprünge und den Knopf. */
@media (max-width: 374px) {
  .labva .jump-list li:nth-child(4) { display: none; }   /* Fakten */
}
@media (prefers-contrast: more) {
  .labva .jump-list a, .labva .jump-top { color: var(--color-on-moss); }
}

.labva .sec > .container > .promise + .grid { margin-top: var(--s-8); }
.labva .sec > .container > .grid + .grid { margin-top: var(--s-6); }
@media (max-width: 767px) { .labva .sec > .container > .grid + .grid { margin-top: var(--s-4); } }
.labva .sec-head { display: flex; flex-direction: column; gap: var(--s-2); }
.labva .sec-head .t-lead { max-width: var(--measure); }
.labva .sec.moss { box-shadow: none; }
.labva .sec.moss + .sec { box-shadow: none; }

/* Nummerierung als Zähler: Sektionen und Streckenindex zählen sich selbst, damit sie mit und ohne
   Referenzfälle (data-referenzen) stimmen. Ein ausgeblendeter Abschnitt zählt nicht. */
/* Der Zähler sitzt am Rumpf, nicht an <main>: die Plugin-Fassung hat kein <main>,
   dort wird body zu .labva. Die Abschnitte sind die einzigen .sec im Dokument. */
.labva { counter-reset: sec; }
.labva .sec { counter-increment: sec; }
.labva .sec-num::before { content: counter(sec, decimal-leading-zero) "\2009\00B7\2009"; font-variant-numeric: tabular-nums lining-nums; }
.labva[data-referenzen="aus"] #referenzen, .labva[data-referenzen="aus"] .if-ref { display: none; }
.labva:not([data-referenzen="aus"]) .if-noref { display: none; }

/* Streckenindex: zwei Spalten, Nummern aus dem Zähler (beginnt bei 02, weil der Einstieg 01 ist) */
.labva .steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); counter-reset: step 1; }
.labva .steps li { counter-increment: step; }
.labva .steps a { display: block; min-height: 56px; padding: var(--s-2) 0 13px; font-family: var(--font-label); font-size: 13px; line-height: 28px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-quiet); text-decoration: none; border-bottom: 1px solid var(--color-line); }
.labva .steps a:hover { color: var(--color-text); }
.labva .steps a:active { color: var(--color-text); border-color: var(--color-text); }
.labva .steps a::before { content: counter(step, decimal-leading-zero); display: inline-block; width: 42px; font-variant-numeric: tabular-nums lining-nums; }

/* Abschluss eines Abschnitts: Satz und Knopf, der Weg zur Anfrage */
.labva .sec-go { display: flex; flex-wrap: wrap; align-items: center; align-self: start; gap: var(--s-2) var(--s-6); }
.labva .sec-go .t-body { max-width: var(--measure); flex: 1 1 320px; }

/* Waagrecht scrollende Region: mit Tastatur erreichbar, Fokus sichtbar */
.labva .spec-wrap:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* Einstieg, Seitenspalte: zwischen 600 und 1023 stehen Kennzahlen und Streckenindex nebeneinander */
@media (min-width: 600px) and (max-width: 1023px) {
  .labva .hero-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--gutter); align-items: start; }
  .labva .hero-side > * + * { margin-top: 0; }
}
/* Kennzahlenzeile im Einstieg: vier Werte in Bodoni, Bezeichnung in Archivo */
.labva .figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--gutter); margin-top: var(--s-6); }
@media (min-width: 768px) { .labva .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.labva .figure { display: flex; flex-direction: column; border-top: 1px solid var(--color-line-strong); padding-top: 13px; }
.labva .figure .t-number { font-size: 48px; line-height: 56px; letter-spacing: -.010em; font-variation-settings: "opsz" 45; }
.labva .figure .eyebrow { padding-top: var(--s-2); line-height: 14px; }

/* Anlassliste: eine geführte Reihe, keine Kacheln. Jede Zeile: Anlass, die Zahl, der Preisanker, der Weg. */
.labva .lead-list { list-style: none; padding: 0; margin: 0; }
.labva .lead-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2) var(--gutter); padding: 13px 0 var(--s-3); border-top: 1px solid var(--color-line); }
.labva .lead-row:last-child { border-bottom: 1px solid var(--color-line); }
.labva .lead-row > * { min-width: 0; }
.labva .lead-name { grid-column: 1 / -1; }
.labva .lead-name .t-h3 { margin-top: var(--s-2); }
.labva .lead-name .t-body { margin-top: var(--s-2); max-width: 30em; }
.labva .lead-fig { grid-column: span 2; display: flex; flex-direction: column; }
.labva .lead-fig .t-price-l { font-variant-numeric: tabular-nums lining-nums; }
.labva .lead-fig .meta { line-height: 28px; }
.labva .lead-price { grid-column: span 2; display: flex; flex-direction: column; }
.labva .lead-go { grid-column: 1 / -1; display: flex; align-items: flex-start; }
@media (min-width: 600px) {
  .labva .lead-row { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .labva .lead-name { grid-column: span 8; }
  .labva .lead-fig { grid-column: span 3; }
  .labva .lead-price { grid-column: span 3; }
  .labva .lead-go { grid-column: span 2; justify-content: flex-end; }
}
@media (min-width: 1024px) {
  .labva .lead-row { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .labva .lead-name { grid-column: span 5; }
  .labva .lead-fig { grid-column: span 2; }
  .labva .lead-price { grid-column: span 3; }
  .labva .lead-go { grid-column: span 2; }
  .labva .lead-name .t-h3 { margin-top: 0; }
  .labva .lead-row .eyebrow.lead-eyebrow { display: none; }
}
@media (max-width: 599px) { .labva .lead-fig .t-price-l, .labva .lead-price .t-price-l { font-size: 24px; line-height: 28px; letter-spacing: 0; font-variation-settings: "opsz" 18; white-space: nowrap; } }
@media (min-width: 1024px) { .labva .lead-fig, .labva .lead-price { padding-top: var(--s-3); } .labva .lead-go { padding-top: var(--s-1); } }
.labva .lead-row.is-first .lead-name .t-h3 { font-size: 36px; line-height: 42px; letter-spacing: -.005em; font-variation-settings: "opsz" 32; }
@media (min-width: 1024px) { .labva .lead-row.is-first .lead-name .t-h3 { font-size: 48px; line-height: 56px; letter-spacing: -.010em; font-variation-settings: "opsz" 45; } }

/* Preisleiter: der Preis pro Person fällt mit der Gästezahl. Balkenlänge = Preis, längster Balken = 100 %. */
.labva .ladder { display: flex; flex-direction: column; }
@media (max-width: 1023px) { .labva .ladder { padding-bottom: var(--s-6); } }
.labva .ladder-head { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-4); }
.labva .ladder-rows { list-style: none; padding: 0; margin: 0; }
.labva .ladder-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 84px; gap: 0 var(--s-2); align-items: center; min-height: 42px; border-top: 1px solid var(--color-line); padding: 7px 0; }
.labva .ladder-row:last-child { border-bottom: 1px solid var(--color-line); }
.labva .ladder-guests { font-family: var(--font-label); font-size: 13px; line-height: 28px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-quiet); font-variant-numeric: tabular-nums lining-nums; }
.labva .ladder-guests b { display: inline; font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 500; font-optical-sizing: none; font-variation-settings: "opsz" 18; color: var(--color-text); letter-spacing: 0; text-transform: none; }
.labva .ladder-bar { height: 14px; background: var(--color-line); position: relative; }
.labva .ladder-bar i { display: block; height: 100%; width: var(--w, 100%); background: var(--color-text); }
.labva .ladder-price { text-align: right; font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 500; font-optical-sizing: none; font-variation-settings: "opsz" 18; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.labva .ladder-price small { display: block; font-family: var(--font-label); font-size: 13px; line-height: 28px; font-weight: 400; letter-spacing: .02em; color: var(--color-text-quiet); }
.labva .ladder-foot { padding-top: var(--s-2); }
.labva .ladder-incl { list-style: none; padding: 0; margin: 0; font-family: var(--font-text); font-size: 15px; line-height: 21px; letter-spacing: .005em; color: var(--color-text-quiet); }
.labva .ladder-incl li { padding-left: var(--s-3); position: relative; }
.labva .ladder-incl li::before { content: "\2014"; position: absolute; left: 0; }
@media (max-width: 374px) { .labva .ladder-row { grid-template-columns: 98px minmax(0, 1fr) 84px; } }

/* Umschalter für die drei Pauschalen: dieselbe Mechanik wie der Tageslauf – Radios, kein Skript.
   Ohne :has() bleibt die Reiterzeile weg und alle drei Leitern stehen untereinander; es fehlt nichts. */
.labva .switch { position: relative; border: 0; padding: 0; margin: 0; min-width: 0; }
.labva .switch input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; visibility: hidden; }
/* ---- Die Wahl der Pauschale ------------------------------------------
   Vorher standen hier drei Wörter in großer Bodoni – sie sahen aus wie
   Überschriften, nicht wie Schalter, und der aktive unterschied sich nur
   durch etwas mehr Schwarz. Die Seite benutzt für dieselbe Aufgabe an
   zwei anderen Stellen Karten mit Rand (Bestuhlung, Bereich); hier steht
   jetzt dasselbe Muster.

   Dazu bekommt jede Karte zwei Angaben mehr: WIE gefeiert wird (stehend,
   an Tischen, in Reihen) und WO der Preis beginnt. Beides macht den
   Unterschied zwischen den dreien körperlich – „Empfang" allein sagt
   einem Firmenkunden nichts. */
.labva .switch-tabs { margin-top: 0; margin-bottom: var(--s-4); }

.labva .pk-wahl { display: grid; grid-template-columns: 1fr; gap: var(--s-2); margin-bottom: var(--s-6); }
@media (min-width: 600px) { .labva .pk-wahl { grid-template-columns: repeat(3, 1fr); } }

.labva .pk-karte { display: block; cursor: pointer; margin: 0; }
.labva .pk-karte > span {
  display: block; height: 100%;
  padding: var(--s-3) var(--s-3) var(--s-3);
  border: 1px solid var(--color-line-strong);
  border-radius: 4px;
  background: transparent;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.labva .pk-karte:hover > span { border-color: var(--color-text); }

.labva .pk-name {
  display: block;
  font-family: var(--font-display); font-weight: 500; font-style: normal;
  font-size: 24px; line-height: 28px; letter-spacing: 0;
  color: var(--color-text);
}
.labva .pk-wie {
  display: block; margin-top: 3px;
  font-family: var(--font-text); font-size: 15px; line-height: 21px;
  color: var(--color-text-quiet);
}
.labva .pk-ab {
  display: block; margin-top: var(--s-2);
  font-family: var(--font-label); font-size: 12px; line-height: 20px;
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-text-quiet);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Die gewählte Karte wird zur Moosfläche – dieselbe Sprache wie die
   gewählten Chips weiter unten, nur größer. */
.labva .switch input:checked + .pk-karte > span, .labva .pk-karte:has(input:checked) > span {
  background: var(--color-moss); border-color: var(--color-moss);
}
.labva .switch input:checked + .pk-karte .pk-name, .labva .pk-karte:has(input:checked) .pk-name { color: var(--color-on-moss); }
.labva .switch input:checked + .pk-karte .pk-wie, .labva .switch input:checked + .pk-karte .pk-ab, .labva .pk-karte:has(input:checked) .pk-wie, .labva .pk-karte:has(input:checked) .pk-ab { color: var(--color-on-moss-quiet-text); }
.labva .switch input:focus-visible + .pk-karte > span { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Ohne :has() bleibt es bei drei Karten ohne Auswahl, und alle drei
   Pauschalen stehen untereinander – nichts geht verloren. */

.labva .switch-panels { display: grid; gap: var(--s-8); }
.labva .switch-panels .ladder { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4) var(--gutter); padding-bottom: 0; align-items: start; }
.labva .switch-panels .ladder-head { padding-bottom: 0; }
.labva .switch-panels .ladder-foot { padding-top: 0; }
@media (min-width: 768px) {
  .labva .switch-panels .ladder { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-6); }
  .labva .switch-panels .ladder-head { grid-column: 1 / -1; }
}
@supports selector(:has(*)) {
  .labva .switch input[type="radio"] { visibility: visible; }
  .labva .switch:has(#pk-empfang:checked) .ladder:not([data-pk="empfang"]), .labva .switch:has(#pk-gala:checked)    .ladder:not([data-pk="gala"]), .labva .switch:has(#pk-seminar:checked) .ladder:not([data-pk="seminar"]) { display: none; }
}
@media (max-width: 599px) { .labva .switch-tabs .tl-time { font-size: 20px; line-height: 28px; } }

/* Zwischenzeile: eine Zeile, viel Luft, kein eigener Abschnitt – die Zählung bleibt unberührt. */
/* Die Strichstärken der Zeichnung skalieren nicht mit: einmal als Regel
   statt tausendfach als Attribut – das spart rund 40 KB. */
.labva .sp-svg * { vector-effect: non-scaling-stroke; }

/* Szenensatz in der Anlassliste: solange keine Fotos da sind, ist ein Satz das Bild. */
.labva .lead-scene {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: 20px; line-height: 28px; letter-spacing: .005em;
  font-variation-settings: "opsz" 14; font-optical-sizing: none;
  max-width: 24em; margin-top: var(--s-2); text-wrap: pretty;
}
@media (min-width: 1024px) { .labva .lead-scene { font-size: 24px; line-height: 28px; font-variation-settings: "opsz" 18; } }
.labva .lead-name .lead-scene + .t-body { color: var(--color-text-quiet); }

/* Zwei Moos-Abschnitte hintereinander: der zweite ohne Verlauf und ohne Kante,
   sonst entsteht an der Naht ein sichtbarer Sprung von dunkel zu hell zu dunkel. */
.labva .sec-close { background: var(--color-moss); padding-top: 0; }
.labva .sec-close .input { background: var(--color-moss); }
.labva .sec-close .input:focus-visible { background: var(--color-moss-top); }

/* Saisonband. Steht zwischen Einstieg und Anlass und ist als einziges Bauteil
   der Seite datiert – wer das Datum sieht, sieht auch, wann es weg muss.
   Abschalten: das <div class="saison"> löschen, sonst ändert sich nichts. */
.labva .saison { padding: var(--s-6) 0; box-shadow: inset 0 1px 0 var(--color-text), inset 0 -1px 0 var(--color-line); }
.labva .saison .inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2) var(--gutter); align-items: baseline; }
@media (min-width: 768px) { .labva .saison .inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-6); } }
.labva .saison .t-h3 { max-width: 16em; }
.labva .saison .t-body { max-width: var(--measure); }
.labva .saison .stand { display: block; padding-top: var(--s-1); }

.labva .band { background: var(--color-surface); padding: var(--s-12) 0; }
@media (min-width: 1024px) { .labva .band { padding: var(--s-12) 0; } }
.labva .band .t-h2 { max-width: 22em; }

/* Mietstaffel-Tabelle */
.labva .rent { width: 100%; border-collapse: collapse; }
.labva .rent th, .labva .rent td { text-align: left; vertical-align: top; padding: 13px var(--s-3) var(--s-2) 0; border-top: 1px solid var(--color-line); }
.labva .rent th:last-child, .labva .rent td:last-child { padding-right: 0; text-align: right; }
.labva .rent thead th { font-family: var(--font-label); font-size: 13px; line-height: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-quiet); padding-top: 0; padding-bottom: var(--s-2); border-top: 0; }
.labva .rent thead th:last-child { text-align: right; }
.labva .rent tbody th { font-family: var(--font-text); font-size: 18px; line-height: 28px; font-weight: 500; }
.labva .rent tbody th small { display: block; font-family: var(--font-label); font-size: 13px; line-height: 28px; font-weight: 400; letter-spacing: .02em; color: var(--color-text-quiet); }
.labva .rent td { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 500; font-optical-sizing: none; font-variation-settings: "opsz" 18; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.labva .rent td.quiet { color: var(--color-text-quiet); }
.labva .rent td.dash { color: var(--color-line-strong); }
.labva .rent tbody tr:last-child td, .labva .rent tbody tr:last-child th { border-bottom: 1px solid var(--color-line); }
.labva .rent-wrap { overflow-x: auto; }
.labva .rent-wrap .rent { min-width: 0; }


/* Miettabelle unter 768: jede Zeile ein Block, drei Werte nebeneinander mit Bezeichnung */
@media (max-width: 767px) {
  .labva .rent thead { display: none; }
  .labva .rent, .labva .rent tbody { display: block; }
  .labva .rent tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-2); border-top: 1px solid var(--color-line); padding: 13px 0 var(--s-2); }
  .labva .rent tbody tr:last-child { border-bottom: 1px solid var(--color-line); }
  .labva .rent th, .labva .rent td { display: block; border: 0; padding: 0; text-align: left; white-space: normal; }
  .labva .rent tbody tr:last-child th, .labva .rent tbody tr:last-child td { border: 0; }
  .labva .rent tbody th { grid-column: 1 / -1; padding-bottom: var(--s-2); }
  .labva .rent td::before { content: attr(data-label); display: block; font-family: var(--font-label); font-size: 13px; line-height: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-quiet); min-height: 28px; font-variant-numeric: tabular-nums lining-nums; }
  .labva .rent td { font-size: 20px; line-height: 28px; }
  /* In 20 px gilt 4,5:1: Linie-stark misst 3,48, leiser Text 5,21. */
  .labva .rent td.dash { color: var(--color-text-quiet); }
}
.labva .person-links a.link { overflow-wrap: anywhere; }

/* Referenzfälle: Filter ohne Skript, Fälle als Artikel */
.labva .cases { position: relative; }
.labva .cases input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.labva .case { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); background: var(--color-surface); }
.labva .case > * + * { margin: 0; }
.labva .case .data { padding-top: var(--s-2); }
.labva .case .data > div { flex-direction: column; gap: 0; }
.labva .case .data dd { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 500; font-optical-sizing: none; font-variation-settings: "opsz" 18; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums lining-nums; }
.labva .case .data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--gutter); }
.labva .case-run { list-style: none; padding: 0; margin: 0; }
.labva .case-run li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 0 var(--s-2); border-top: 1px solid var(--color-line); padding: 6px 0 7px; font-family: var(--font-text); font-size: 15px; line-height: 21px; letter-spacing: .005em; }
.labva .case-run li:last-child { border-bottom: 1px solid var(--color-line); }
.labva .case-run time { font-family: var(--font-label); font-size: 13px; letter-spacing: .02em; color: var(--color-text-quiet); font-variant-numeric: tabular-nums lining-nums; }
.labva .case-tag { display: inline-flex; align-items: center; gap: var(--s-1); }
.labva .case-tag::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; }
/* Ohne :has() keine Filterlogik, also auch keine Chips; alle vier Fälle stehen */
.labva .cases-filters { display: none; }
.labva .cases-status { padding-bottom: var(--s-4); }
@supports selector(:has(*)) {
  .labva .cases-filters { display: block; }
  .labva .cases:has(#c-tagung:checked)   .case:not([data-kind="tagung"]), .labva .cases:has(#c-feier:checked)    .case:not([data-kind="feier"]), .labva .cases:has(#c-hochzeit:checked) .case:not([data-kind="hochzeit"]), .labva .cases:has(#c-sommer:checked)   .case:not([data-kind="sommer"]) { display: none; }
}
.labva .cases-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gutter); }
@media (min-width: 600px) { .labva .cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Factsheet: Nachschlagematerial, aufgeklappt statt ausgebreitet. Reines <details>,
   kein Skript. Vier Gruppen in zwei Spalten ab 768; zwei Einträge stehen offen. */
.labva .facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6) var(--gutter); align-items: start; }
@media (min-width: 768px) { .labva .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .labva .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .labva .facts-col { display: contents; } }
.labva .facts-col > * + * { margin-top: var(--s-6); }
.labva .facts-group > .eyebrow { padding-bottom: 13px; }
.labva .fact { border-top: 1px solid var(--color-line); }
.labva .facts-group > .fact:last-child, .labva .fact-wide { border-bottom: 1px solid var(--color-line); }
.labva .fact > summary {
  display: flex; gap: var(--s-2); align-items: baseline; justify-content: space-between;
  list-style: none; cursor: pointer; min-height: 56px; padding: 13px 0 15px;
  font-family: var(--font-label); font-size: 13px; line-height: 28px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-text);
}
.labva .fact > summary::-webkit-details-marker { display: none; }
.labva .fact > summary::after { content: "+"; flex: none; font-family: var(--font-text); font-size: 18px; line-height: 28px; letter-spacing: 0; color: var(--color-text-quiet); }
.labva .fact[open] > summary::after { content: "\2212"; }
.labva .fact > summary:hover { color: var(--color-text); }
.labva .fact > summary:hover::after { color: var(--color-text); }
.labva .fact-body { padding: 0 0 var(--s-3); max-width: var(--measure); }
.labva .fact-body > * + * { margin-top: var(--s-2); }
.labva .fact-wide { border-bottom: 1px solid var(--color-line); }
.labva .fact-wide .fact-body { max-width: none; }
.labva .facts > .fact-wide { grid-column: 1 / -1; }

/* Personen: nicht klickbare Karten mit Hochformat */
.labva .person { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gutter); align-items: start; }
.labva .person .img { width: 100%; }
.labva .person-links { display: flex; flex-direction: column; }
.labva .person-links a.link { display: block; min-height: 56px; }
@media (max-width: 599px) { .labva .person { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
@media (max-width: 374px) { .labva .person { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }

/* Anfrage: sechs Felder in zwei Spalten ab 600 */
.labva .form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4) var(--gutter); }
@media (min-width: 600px) { .labva .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .labva .form-grid .field.wide { grid-column: 1 / -1; } }
.labva .form-actions { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; padding-top: var(--s-2); }
.labva .form-actions .t-body { flex: 1 1 280px; }
.labva .form-actions .btn { min-width: 224px; }
@media (max-width: 374px) { .labva .form-actions .btn { width: 100%; min-width: 0; } .labva .nav-actions .btn { justify-self: stretch; } }

/* Zusage auf Moos: der Satz trägt, die Zeilen darunter erklären */
.labva .promise { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6) var(--gutter); }
@media (min-width: 1024px) { .labva .promise { grid-template-columns: repeat(12, minmax(0, 1fr)); } .labva .promise-main { grid-column: span 7; } .labva .promise-side { grid-column: 9 / span 4; } }
.labva .promise-side dl { display: flex; flex-direction: column; }
.labva .promise-side dl > div { padding: 13px 0 var(--s-2); border-top: 1px solid var(--color-line); }
.labva .promise-side dl > div:last-child { border-bottom: 1px solid var(--color-line); }
.labva .promise-side dt { font-family: var(--font-label); font-size: 13px; line-height: 28px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-quiet); }
.labva .promise-side dd { margin: 0; }

/* Fußzeile */
.labva .site-foot { padding: var(--s-12) 0 var(--s-16); box-shadow: inset 0 1px 0 var(--color-line); }
.labva .foot-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.labva .foot-list a { display: block; min-height: 56px; padding: var(--s-2) 0; font-family: var(--font-label); font-size: 13px; line-height: 28px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-quiet); text-decoration: none; }
.labva .foot-list a:hover, .labva .foot-list a:active { color: var(--color-text); }
.labva .foot-contact a { text-transform: none; letter-spacing: .02em; font-weight: 400; font-variant-numeric: tabular-nums lining-nums; }
.labva .toggle { display: none; align-items: center; gap: var(--s-2); min-height: 56px; padding: 0 var(--s-4); border: 1px solid var(--color-line-strong); border-radius: var(--radius-touch); background: transparent; color: var(--color-text); cursor: pointer; font-family: var(--font-label); font-size: 13px; line-height: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.labva .toggle:hover { background: var(--color-surface-raised); border-color: var(--color-text); }
.labva .toggle:active { background: var(--color-line); }
.labva .toggle i { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--color-line-strong); border-radius: 999px; }
.labva .toggle[aria-pressed="true"] i { background: var(--color-text); border-color: var(--color-text); }
.labva .toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.labva.js .toggle { display: inline-flex; }
.labva .copy-btn { display: none; }
.labva.js .copy-btn { display: inline-flex; }

/* Notizen für den Redakteur: sichtbar, klar als solche gekennzeichnet */
.labva .placeholder { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--font-label); font-size: 13px; line-height: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-quiet); border: 1px solid var(--color-line-strong); padding: 6px var(--s-2); }

/* ---------- Restaurant, Bar und Innenhof ---------------------------
   Zweites Blatt, aufklappbar. Die Zeichnung selbst liegt im Vorrat und
   kommt erst beim Aufklappen ins Dokument – sie ist mit 1.653 Linien
   noch größer als die Kinobestuhlung. Alle Regeln hängen an .skz-svg
   und können den Saalplan (.sp-svg) nicht anfassen. */
/* ---------- 7. Neu: Skizze ------------------------------------------ */
/* Skizze: Papier als Grund, Linie mit Hand, Schraffur statt Fläche. Fläche nur wo Fläche ist: Hofboden, Tresen, Bühne, Schnitt der Wand. */
.labva .skz-svg { width: 100%; height: auto; display: block; overflow: visible; }
.labva .skz-svg text { font-variant-numeric: lining-nums tabular-nums; }
.labva .skz-svg path, .labva .skz-svg line { fill: none; stroke: var(--skz-ink); stroke-linecap: round; stroke-linejoin: round; }
.labva .skz-svg .k1 { stroke-width: 1.45px; }
.labva .skz-svg .k2 { stroke-width: .9px; }
.labva .skz-svg .k3 { stroke-width: .62px; stroke-opacity: .9; }
.labva .skz-svg .k4 { stroke-width: .5px; stroke-opacity: .5; }
.labva .skz-svg .h { stroke: var(--skz-hatch); stroke-width: .55px; stroke-opacity: .55; }
.labva .skz-svg .hf { stroke-opacity: .32; }
/* Bodenschraffur im Saal, zur Kuppel hin ausgeblendet */
.labva .skz-svg .hs { stroke-opacity: var(--skz-shadow-o); }
/* Baumschatten: am Abend fast weg */
.labva .skz-svg .hg { stroke-opacity: .28; }
/* Glas im Schatten */
.labva .skz-svg .fuge { stroke-opacity: .3; }
.labva .skz-svg .bg { fill: var(--color-bg); stroke: none; }
.labva .skz-svg .poche { fill: var(--skz-poche); stroke: none; }
.labva .skz-svg .moss { fill: var(--skz-moss); stroke: none; }
.labva .skz-svg .floor-hof { fill: var(--skz-hof); stroke: none; }
.labva .skz-svg .canopy { fill: var(--skz-leaf); stroke: none; }
.labva .skz-svg .ch { fill: var(--color-bg); stroke: var(--skz-ink); stroke-width: .55px; stroke-opacity: .8; }
.labva .skz-svg .cd { fill: var(--skz-candle); stroke: none; }
.labva .skz-svg .glass { fill: var(--skz-glass); fill-opacity: var(--skz-glass-o); stroke: none; }
.labva .skz-svg .rib { stroke: var(--skz-rib); }
.labva .skz-svg .rib-apex { fill: var(--skz-rib); stroke: none; }
.labva .skz-svg .cone { opacity: var(--skz-cone-o); stroke: none; }
.labva .skz-svg .pool, .labva .skz-svg .halo { stroke: none; }
.labva .skz-svg .s-halo0 { stop-color: var(--skz-light); stop-opacity: var(--skz-halo-o); }
.labva .skz-svg .s-halo1 { stop-color: var(--skz-light); stop-opacity: 0; }
.labva .skz-svg .s-pool0 { stop-color: var(--skz-light); stop-opacity: var(--skz-pool-o); }
.labva .skz-svg .s-pool1 { stop-color: var(--skz-light); stop-opacity: calc(var(--skz-pool-o) * .45); }
.labva .skz-svg .s-pool2 { stop-color: var(--skz-light); stop-opacity: 0; }
.labva .skz-svg .s-cone0 { stop-color: var(--skz-light); stop-opacity: .9; }
.labva .skz-svg .s-cone1 { stop-color: var(--skz-light); stop-opacity: 0; }
.labva .skz-svg .link { stroke: var(--skz-ink); stroke-width: 1px; stroke-opacity: .6; stroke-dasharray: 1 4; }
.labva .skz-svg .arrow { stroke-opacity: .7; }
.labva .skz-svg .street { fill: var(--color-text-quiet); font-family: var(--font-label); letter-spacing: .16em; text-transform: uppercase; }
.labva .skz-svg .onfloor { fill: var(--color-text-quiet); font-family: var(--font-label); letter-spacing: .14em; text-transform: uppercase; }
/* Beschriftung: Name kursiv in Bodoni, Zahlen in Archivo, Führungslinie fein und kurz */
.labva .skz-svg .lb { font-size: var(--skz-fs); }
.labva .skz-svg .lead { stroke-width: .6px; stroke-opacity: .7; }
.labva .skz-svg .lead-dot { fill: var(--skz-ink); stroke: none; }
.labva .skz-svg .lb-name { font-family: var(--font-display); font-style: italic; font-weight: 400; fill: var(--color-text); font-size: calc(var(--skz-fs) * 1.5); letter-spacing: .01em; }
.labva .skz-svg .lb-meta { font-family: var(--font-label); fill: var(--color-text-quiet); font-size: var(--skz-fs); letter-spacing: .02em; }
/* Marken (Telefon) */
.labva .skz-svg .mk-bg { fill: var(--color-bg); stroke: none; }
.labva .skz-svg .mk-ring { stroke-width: 1px; }
.labva .skz-svg .mk text { font-family: var(--font-display); font-weight: 500; fill: var(--color-text); font-size: 1.45px; text-anchor: middle; }
/* Wege: ein Zug mit dem Stift, nummerierte Stationen; ohne Anlass unsichtbar */
.labva .skz-svg .way { opacity: 0; transition: opacity var(--motion); }
.labva .skz-svg .way-line { stroke: var(--skz-way); stroke-width: 2.2px; stroke-opacity: .85; }
.labva .skz-svg .st-bg { fill: var(--skz-way); stroke: none; }
.labva .skz-svg .st-ring { stroke: var(--color-bg); stroke-width: 1px; }
.labva .skz-svg .st text { font-family: var(--font-display); font-weight: 500; fill: var(--color-bg); text-anchor: middle; }
.labva .skz-svg .room { transition: opacity var(--motion); }
/* Das Bauteil: Radios, Zeichnung, Anlass-Wahl, Ablauf */
.labva .skz { position: relative; }
.labva .skz input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.labva .skz-fig { display: flex; flex-direction: column; }
.labva .skz-fig figure { max-width: 644px; }
.labva .skz-desk { display: none; }
.labva .skz-cap { padding-top: var(--s-2); }
.labva .skz-cap .note { max-width: none; }
.labva .skz-legend { list-style: none; padding: 0; margin: 0; padding-top: var(--s-2); }
.labva .skz-legend li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 0 var(--s-2); padding: 6px 0 7px; border-top: 1px solid var(--color-line); font-family: var(--font-text); font-size: 15px; line-height: 21px; letter-spacing: .005em; color: var(--color-text-quiet); }
.labva .skz-legend li:last-child { border-bottom: 1px solid var(--color-line); }
.labva .skz-legend li b { color: var(--color-text); font-weight: 500; }
.labva .skz-legend li i { font-style: normal; font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 21px; color: var(--color-text); font-variant-numeric: lining-nums tabular-nums; }
.labva .skz-uses legend { line-height: 28px; float: left; width: 100%; }
.labva .skz-uses .chip-row { clear: both; }
.labva .skz-side { display: flex; flex-direction: column; gap: var(--s-4); }
.labva .skz-runs { position: relative; }
.labva .skz:has(#w-haus:checked)   .run[data-w="haus"], .labva .skz:has(#w-gala:checked)   .run[data-w="gala"], .labva .skz:has(#w-tagung:checked) .run[data-w="tagung"], .labva .skz:has(#w-sommer:checked) .run[data-w="sommer"], .labva .skz:has(#w-klein:checked)  .run[data-w="klein"] { display: block; }
.labva .skz:has(#w-gala:checked)   .way-gala, .labva .skz:has(#w-tagung:checked) .way-tagung, .labva .skz:has(#w-sommer:checked) .way-sommer, .labva .skz:has(#w-klein:checked)  .way-klein { opacity: 1; }
.labva .skz:has(#w-gala:checked)   .room:not(.r-saal, .r-hof), .labva .skz:has(#w-tagung:checked) .room:not(.r-saal, .r-hof, .r-rest), .labva .skz:has(#w-klein:checked)  .room:not(.r-saal) { opacity: .38; }
.labva .skz:has(#w-gala:checked)   .label:not(.l-saal, .l-hof, .l-bar), .labva .skz:has(#w-tagung:checked) .label:not(.l-saal, .l-hof, .l-rest1, .l-rest2), .labva .skz:has(#w-sommer:checked) .label:not(.l-hof, .l-rest1, .l-rest2, .l-bar), .labva .skz:has(#w-klein:checked)  .label:not(.l-bar, .l-pd) { opacity: .35; }
.labva .skz .label, .labva .skz .marks { transition: opacity var(--motion); }
.labva .skz:has(input:checked:not(#w-haus)) .marks { opacity: 0; }
.labva .skz:has(input:checked:not(#w-haus)) .skz-legend { display: none; }
@media (max-width: 599px) {
  .labva .skz-uses .chip-row { gap: 0 var(--s-1); }
  .labva .skz-uses .chip > span { padding: 0 var(--s-2); letter-spacing: .08em; }
}
@media (min-width: 600px) {
  .labva .skz-desk { display: block; }
  .labva .skz-phone { display: none; }
  .labva .skz-legend { display: none; }
}
@media (min-width: 1024px) {
  .labva .skz-fig figure { max-width: none; }
}
@media (min-width: 1280px) {
  .labva .skz-fig figure { max-width: 700px; }
}
/* ---------- 8. Neu: Pläne ------------------------------------------- */
/* Drei Blätter. A und C in der Machart der Skizze (Klassen .skz-*), B als Maßplan (.pl-*), dazu die Übersicht (.pl-over). */
.labva .skz-svg .win { stroke: var(--color-bg); stroke-opacity: .95; }
.labva .skz-svg .win-f { fill-opacity: .92; }
.labva .skz-svg .door { stroke-opacity: .7; }
.labva .skz-svg .stool .ch { stroke-opacity: .7; }
.labva .sheet-fig .skz-desk, .labva .sheet-fig .pl-desk, .labva .plan-sheet .pl-desk { display: none; }
@media (min-width: 600px) {
  .labva .sheet-fig .skz-desk, .labva .sheet-fig .pl-desk, .labva .plan-sheet .pl-desk { display: block; }
  .labva .sheet-fig .skz-phone, .labva .sheet-fig .pl-phone, .labva .plan-sheet .pl-phone { display: none; }
}
/* Schriftgröße in der Skizze je Blattbreite (Meter der Zeichnung) */
.labva .skz-a { --skz-fs: .78px; }
.labva .skz-c { --skz-fs: .92px; }
@media (min-width: 768px) {
  .labva .skz-a { --skz-fs: .72px; }
  .labva .skz-c { --skz-fs: .86px; }
}
@media (min-width: 1024px) {
  .labva .skz-a { --skz-fs: .82px; }
  .labva .skz-c { --skz-fs: .98px; }
}
@media (min-width: 1280px) {
  .labva .skz-a { --skz-fs: .74px; }
  .labva .skz-c { --skz-fs: .9px; }
}
.labva .skz-svg .lb-name { font-size: calc(var(--skz-fs) * 1.5); }
.labva .skz-svg .lb-meta { font-size: var(--skz-fs); }
/* ---------- 10. Blatt A: drei Bestuhlungen, ohne Skript über :has() ------- */
.labva .skz-svg .set { display: none; }
.labva .skz-svg .kc { fill: var(--color-bg); stroke: var(--skz-ink); stroke-width: .5px; stroke-opacity: .8; }
.labva .skz-svg .ghost-ring { stroke-dasharray: .35 .25; stroke-opacity: .55; }
.labva .skz-svg .ghost-n { font-family: var(--font-display); font-weight: 500; fill: var(--color-text-quiet); font-size: calc(var(--skz-fs) * 1.3); }
.labva .skz-svg .l-set .lb-meta:first-of-type { fill: var(--color-text); }
.labva .no-has .sets .run, .labva .no-has .skz-svg .set-gala { display: block; }
.labva .sets .skz-uses legend { line-height: 28px; float: left; width: 100%; }
.labva .sets .skz-uses .chip-row { clear: both; }
@media (max-width: 1023px) {
  .labva .sets .skz-uses { order: 1; grid-column: 1 / -1; }
  .labva .sets .skz-runs { order: 3; grid-column: 1 / -1; max-width: var(--measure); }
}
@media (max-width: 599px) {
  .labva .sets .skz-uses .chip-row { gap: 0 var(--s-1); }
  .labva .sets .skz-uses .chip > span { padding: 0 var(--s-2); letter-spacing: .08em; }
}

/* Zwei Bereiche, eine Zeichnung.
   Vorher lag das zweite Blatt in einem Aufklapper unter dem Saalplan – dort
   rechnet niemand damit, dass eine zweite Zeichnung dahintersteckt. Jetzt ist
   es eine Wahl auf derselben Ebene wie die Bestuhlung: erst der Bereich, dann
   im Saal die Bestuhlung.

   Ohne :has() greift das alles nicht; dann bleibt es beim Saal, genau wie bei
   der Bestuhlung darunter. Ohne Skript bliebe das zweite Blatt leer, deshalb
   wird der zweite Knopf dann gar nicht erst angeboten. */
.labva .sp-wo { border: 0; padding: 0; margin: 0; min-width: 0; display: none; }
.labva .sp-wo legend { line-height: 28px; float: left; width: 100%; }
.labva .sp-wo .chip-row { clear: both; }
.labva .sp-blatt2 { display: none; }
.labva .sp-kopf[data-bereich="rest"] { display: none; }

/* ---- Die drei Bilder unter dem zweiten Blatt -------------------------
   Restaurant, Bar und Innenhof als Reihe. Alle drei sind auf dasselbe
   Format (3:2) geschnitten und auf dieselbe Helligkeit, Wärme und
   Sättigung gebracht – sonst fällt die Reihe auseinander: die
   Innenaufnahmen stammen von 2015, der Innenhof von 2023. */
.labva .sp-bilder {
  display: grid; gap: var(--s-3);
  grid-template-columns: 1fr;
  margin-top: var(--s-6);
}
@media (min-width: 768px) { .labva .sp-bilder { grid-template-columns: repeat(3, 1fr); gap: var(--s-2); } }
.labva .sp-bild { margin: 0; }
.labva .sp-bild img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  background: var(--color-surface);
}
.labva .sp-bild figcaption {
  margin-top: var(--s-1);
  font-family: var(--font-label); font-size: 12px; line-height: 20px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-quiet);
}

.labva .plan2-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Blatt 2 hat keine Telefon-Fassung: die Zeichnung bleibt auch unter 600 px sichtbar (seitlich schiebbar). */
.labva .plan2-wrap .skz-desk { display: block; }
@media (max-width: 767px) { .labva .plan2-wrap .skz-svg { min-width: 560px; } }

@supports selector(:has(*)) {
  .labva .labva.js .sp-wo, .labva.js .sp-wo { display: block; }
  .labva .saalplan:has(#wo-rest:checked) .sp-uses, .labva .saalplan:has(#wo-rest:checked) .sp-fig, .labva .saalplan:has(#wo-rest:checked) .sp-side { display: none; }
  .labva .saalplan:has(#wo-rest:checked) .sp-blatt2 { display: block; }
}
/* Die Überschrift wechselt mit. Sie steht in einem eigenen Raster über dem
   Saalplan, deshalb muss der Schalter vom Abschnitt aus greifen. */
@supports selector(:has(*)) {
  .labva .sec:has(#wo-rest:checked) .sp-kopf[data-bereich="saal"] { display: none; }
  .labva .sec:has(#wo-rest:checked) .sp-kopf[data-bereich="rest"] { display: flex; }
}