/* ZWÖLFBLICK — styles.css
   Der Saal steht links und bleibt stehen, die Einstellungen laufen rechts durch.
   Der Grundriss liegt nicht neben dem Foto: der Raumumriss ist ausgeschnitten und
   zeigt den echten Saal. Was eingestellt wird, wird in diesen Raum gestellt.
   Grund ist Stein — kein Papier, kein Schwarz. Ein Akzent, aus dem Lampenlicht.
   Zahlen laufen tabellarisch, Überschriften in Instrument Serif, alles andere Karla. */

/* ------------------------------------------------------------------ Schriften */
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrumentserif-latin.woff2?v=9b8dd1ec") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("fonts/karla-var-latin.woff2?v=3006def8") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
/* Metrisch angeglichene Ersatzschriften.
   Instrument Serif: upem 1000, asc 990, desc 310, az-Mittelbreite 0,3922.
   Times New Roman liegt bei 0,4354 -> size-adjust 90 %, Überschreibungen durch 0,90.
   Karla: upem 2000, asc 1834, desc 504, az-Mittelbreite 0,5205.
   Arial liegt bei 0,4564 -> size-adjust 114 %, Überschreibungen durch 1,14.
   So bleibt die Zeilenbreite beim Tausch gleich und nichts springt. */
@font-face {
  font-family: "IS-fb";
  src: local("Times New Roman"), local("Liberation Serif"), local("Nimbus Roman"), local("serif");
  size-adjust: 90%; ascent-override: 110%; descent-override: 34.4%; line-gap-override: 0%;
}
@font-face {
  font-family: "KA-fb";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("sans-serif");
  size-adjust: 114%; ascent-override: 80.4%; descent-override: 22.1%; line-gap-override: 0%;
}

/* ---------------------------------------------------------------- Grundwerte */
:root {
  --stein:      #98a09a;   /* Grundfläche, mittlere Helligkeit, grüngrau */
  --kalk:       #b6bcb4;   /* hellere Fläche: Rechnung, Eingaben */
  --kreide:     #dee1da;   /* Schrift auf Dunkel */
  --schiefer:   #2e352f;   /* dunkle Bänder, der Saal */
  --tinte:      #141813;   /* Schrift */
  --lampe:      #bf7126;   /* Akzent: Flächen, Linien, Zeichnung */
  --lampe-hell: #e6a35c;   /* Akzent auf Dunkel */
  /* Akzent als Schrift auf Hell. Dunkel genug für 4,5:1 auf dem Stein — sonst
     wäre die aktuelle Antwort rechts in jedem Schritt nicht sicher lesbar. */
  --lampe-tief: #58270a;

  --linie:   rgba(20, 24, 19, 0.26);
  --linie-2: rgba(20, 24, 19, 0.52);
  /* 0,78 ist der Punkt, an dem der Nebentext auf Stein UND auf Kalk 4,5:1
     erreicht. Darunter liest er sich hübsch und ist trotzdem zu blass. */
  --dunst:   rgba(20, 24, 19, 0.78);
  --dunst-h: rgba(222, 225, 218, 0.70);   /* dasselbe auf Dunkel */

  --serif: "Instrument Serif", "IS-fb", "Times New Roman", serif;
  --sans:  "Karla", "KA-fb", Arial, sans-serif;

  --rand: clamp(16px, 3vw, 34px);
  --leiste-h: 76px;
  --schnell: 140ms ease;
  --weich: cubic-bezier(0.18, 0.85, 0.30, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--stein);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; letter-spacing: 0.004em; }
h1, h2, h3 { margin: 0; line-height: 1.08; }
p { margin: 0 0 0.7em; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

.zahl { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

:focus-visible {
  outline: 2px solid var(--lampe-tief);
  outline-offset: 2px;
}
.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.spring {
  position: absolute; left: var(--rand); top: -60px; z-index: 40;
  background: var(--tinte); color: var(--kreide);
  padding: 8px 14px; text-decoration: none;
}
.spring:focus { top: 8px; }

/* ------------------------------------------------------------- Demo-Hinweis */
.hinweis {
  display: flex; align-items: baseline; gap: 14px;
  background: var(--schiefer); color: var(--kreide);
  padding: 9px var(--rand);
  font-size: 13.5px; line-height: 1.35;
}
.hinweis p { margin: 0; }
.hinweis strong { color: #fff; font-weight: 700; }
.hinweis a { color: var(--kreide); text-underline-offset: 3px; }
.hinweis button {
  margin-left: auto; flex: none;
  background: none; border: 1px solid rgba(222,225,218,0.4); color: var(--kreide);
  font: inherit; line-height: 1; padding: 5px 9px; cursor: pointer;
}
.hinweis button:hover { border-color: var(--kreide); }
.hinweis[hidden] { display: none; }

/* -------------------------------------------------------------- Kopf + Titel */
.kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px;
  padding: 14px var(--rand) 11px;
  border-bottom: 1px solid var(--linie);
}
.marke { font-family: var(--serif); font-size: clamp(26px, 3.2vw, 36px); line-height: 1; }
.marke a { text-decoration: none; }
.marke-sub {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dunst); font-weight: 600;
}
.kopf nav { margin-left: auto; display: flex; gap: 18px; font-size: 14.5px; font-weight: 600; }
.kopf nav a { text-underline-offset: 4px; }

/* Der Titel bleibt schmal: die Bühne soll auf den ersten Schirm. */
.titel { padding: clamp(14px, 1.8vw, 24px) var(--rand) clamp(14px, 1.8vw, 22px); }
.titel h1 {
  font-size: clamp(25px, 2.7vw, 40px);
  max-width: 26ch;
  text-wrap: balance;
}
.titel h1 em { font-style: normal; color: var(--lampe-tief); }
.titel .unterzeile {
  margin: 10px 0 0; max-width: 58ch;
  font-size: 15px; color: var(--dunst);
}

/* =========================================================== Bühne: der Saal */
.buehne { display: block; border-top: 1px solid var(--linie); }

.saal-spalte {
  background: var(--schiefer); color: var(--kreide);
  border-bottom: 1px solid var(--tinte);
}
.saal-halt { display: flex; flex-direction: column; }

.saal-kopf {
  display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap;
  padding: 10px var(--rand) 8px;
  font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700;
  color: rgba(222, 225, 218, 0.82);
}
.saal-kopf .rechts {
  margin-left: auto; letter-spacing: 0.04em; text-transform: none;
  font-weight: 600; font-size: 13px; color: #fff;
}
.saal-kopf button {
  background: none; border: 1px solid rgba(222,225,218,0.38); color: var(--kreide);
  font: inherit; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; cursor: pointer;
}
.saal-kopf button:hover { border-color: var(--kreide); background: rgba(222,225,218,0.1); }

.plan-flaeche {
  padding: 2px var(--rand) 4px;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
.plan-flaeche[hidden] { display: none; }

/* Der Raum: ein Kasten mit festem Seitenverhältnis. Darin das Foto, auf den
   Umriss des Saals zugeschnitten, und darüber die Zeichnung. Beide liegen exakt
   übereinander, weil beide vom selben Kasten aufgespannt werden. Nichts springt. */
.raum {
  position: relative; width: 100%;
  aspect-ratio: 492 / 340;
  margin-inline: auto;
}
.raum-foto {
  position: absolute; inset: 0; overflow: hidden;
  background: #0e120d;
  /* Der Grundriss ist ein Fünfeck: 21 x 13 m mit abgeschrägter Südostecke.
     Die Prozente sind aus der viewBox (-36 -44 492 340) gerechnet, also genau
     die Punkte, die plan.js zeichnet. */
  clip-path: polygon(7.317% 12.941%, 92.683% 12.941%, 92.683% 65.882%,
                     76.423% 89.412%, 7.317% 89.412%);
}
.raum-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  filter: saturate(0.82) contrast(0.94) brightness(1.06);
  transition: opacity 520ms ease, filter 400ms ease;
}
.raum-foto img.an { opacity: 1; }
/* Alle drei Fotos sind unten interessant und oben leer. */
.raum-foto img[data-bild="start"] { object-position: 50% 62%; }
.raum-foto img[data-bild="leer"]  { object-position: 50% 56%; }
.raum-foto img[data-bild="tisch"] { object-position: 50% 62%; }
/* Der Schleier zieht nach hinten zu: das Licht kommt von der Fensterfront unten. */
.raum-foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(14, 18, 13, 0.20) 0%, rgba(14, 18, 13, 0.40) 48%, rgba(14, 18, 13, 0.64) 100%);
}
#plan { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Passt die Personenzahl nicht in die Bestuhlung, wird der Raum kalt. */
.saal-halt.eng .raum-foto img { filter: saturate(0.08) contrast(0.9) brightness(0.72); }

/* Personenzahl gross, daneben was gerade zu sehen ist und was der Plan sagt */
.saal-stand {
  margin: 0; padding: 8px var(--rand) 2px;
  display: flex; align-items: baseline; gap: 10px; line-height: 1;
}
.saal-stand b {
  font-family: var(--serif); font-weight: 400; color: #fff;
  font-size: clamp(38px, 4.4vw, 62px); line-height: 0.82;
  display: inline-block; min-width: 1.85em; text-align: right;
}
.saal-stand span {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  color: var(--dunst-h); line-height: 1.25;
}
.saal-wort { margin: 0 0 4px; font-size: 13px; line-height: 1.4; }
.saal-wort b { color: #fff; font-weight: 700; }
.saal-wort b::after { content: " · "; color: var(--dunst-h); font-weight: 400; }
.saal-wort span { color: var(--dunst-h); }

.saal-text { padding: 8px var(--rand) 14px; }

.plan-sagt {
  margin: 0; min-height: 40px;
  font-size: 14px; color: var(--kreide);
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
}
.plan-sagt.eng { color: var(--lampe-hell); font-weight: 600; }

/* Schriftfeld unten am Blatt, wie bei einer Bauzeichnung. Die Muster sind
   dieselben wie in der Zeichnung darüber. */
.plan-legende {
  display: none; margin: 0;
  padding: 9px var(--rand) 11px;
  border-top: 1px solid rgba(222,225,218,0.18);
  font-size: 11px; letter-spacing: 0.06em;
  color: rgba(222,225,218,0.62);
  gap: 4px 18px; flex-wrap: wrap; align-items: center;
}
.plan-legende span { display: inline-flex; align-items: center; gap: 6px; }
.plan-legende .rechts { margin-left: auto; letter-spacing: 0.04em; }
.plan-legende i { width: 15px; height: 9px; flex: none; display: block; }
.plan-legende .l-sperr {
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,0.5) 0 1px, transparent 1px 4px);
  outline: 1px solid rgba(255,255,255,0.35);
}
.plan-legende .l-flucht { height: 0; border-top: 1px dashed rgba(255,255,255,0.55); }
.plan-legende .l-tisch { height: 7px; background: rgba(230,163,92,0.88); }
.plan-legende .l-stuhl { width: 9px; height: 8px; background: rgba(255,255,255,0.9); }
.plan-legende .l-glas { height: 0; border-top: 3px solid var(--lampe-hell); }
.plan-sagt button {
  font: inherit; font-size: 13px; font-weight: 700;
  background: var(--lampe); border: 1px solid var(--lampe); color: var(--tinte);
  padding: 4px 11px; cursor: pointer;
}
.plan-sagt button:hover { background: var(--kreide); border-color: var(--kreide); }
.plan-sagt button:focus-visible { outline: 2px solid var(--kreide); outline-offset: 2px; }

/* ------------------------------------------------- Zeichnung: Grundwerte
   Diese Werte gelten für den Druck (dunkle Tinte auf Papier). Auf dem Schirm
   liegt die Zeichnung auf einem Foto und wird weiter unten hell überschrieben. */
.p-raster { fill: none; stroke: rgba(20,24,19,0.10); stroke-width: 0.75; }
.p-sperr  { stroke: none; }
.p-schraffur { stroke: rgba(20,24,19,0.22); stroke-width: 1.4; }
.p-wand   { fill: rgba(255,255,255,0.30); stroke: var(--tinte); stroke-width: 3.4; stroke-linejoin: miter; }
.p-glas   { fill: none; stroke: var(--lampe); stroke-width: 4.4; }
.p-glas2  { fill: none; stroke: var(--lampe); stroke-width: 1.2; }
.p-flucht { fill: none; stroke: rgba(20,24,19,0.42); stroke-width: 1; stroke-dasharray: 5 4; }
.p-bau    { fill: rgba(20,24,19,0.16); stroke: var(--tinte); stroke-width: 1.6; }
.p-bau-l  { fill: none; stroke: var(--tinte); stroke-width: 1; }
.p-tuer   { fill: none; stroke: rgba(20,24,19,0.5); stroke-width: 1.2; }
.p-tuer-luft { stroke: var(--kalk); stroke-width: 5; }
.p-tisch  { fill: rgba(191,113,38,0.30); stroke: var(--lampe-tief); stroke-width: 1.6; }
.p-steh   { fill: none; stroke: var(--lampe-tief); stroke-width: 1.6; stroke-dasharray: 3 3; }
.p-naht   { fill: none; stroke: var(--lampe-tief); stroke-width: 0.8; opacity: 0.65; }
.p-stuhl  { fill: var(--tinte); }
.p-mass   { fill: none; stroke: rgba(20,24,19,0.55); stroke-width: 1; }
.p-label, .p-mini {
  font-family: var(--sans); fill: var(--tinte); stroke: none;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em;
}
.p-mini { font-size: 8.5px; font-weight: 500; fill: rgba(20,24,19,0.66); letter-spacing: 0.09em; }
.p-label-r { text-anchor: end; }
.p-mid { text-anchor: middle; }
.p-mass text { fill: rgba(20,24,19,0.66); }

/* ------------------------------------- Zeichnung auf dem Foto: helle Tinte */
#plan .p-raster    { stroke: rgba(255,255,255,0.13); }
#plan .p-schraffur { stroke: rgba(255,255,255,0.26); stroke-width: 1.2; }
#plan .p-wand      { fill: none; stroke: rgba(255,255,255,0.92); stroke-width: 3.2; }
#plan .p-glas      { stroke: var(--lampe-hell); stroke-width: 5; }
#plan .p-glas2     { stroke: rgba(230,163,92,0.55); stroke-width: 1.2; }
#plan .p-flucht    { stroke: rgba(255,255,255,0.44); }
#plan .p-bau       { fill: rgba(14,18,13,0.62); stroke: rgba(255,255,255,0.75); stroke-width: 1.4; }
#plan .p-bau-l     { stroke: rgba(255,255,255,0.55); }
#plan .p-tuer      { stroke: rgba(255,255,255,0.5); }
#plan .p-tuer-luft { stroke: var(--schiefer); }
#plan .p-tisch     { fill: rgba(230,163,92,0.88); stroke: rgba(46,53,47,0.55); stroke-width: 0.8; }
#plan .p-steh      { fill: none; stroke: rgba(230,163,92,0.9); stroke-width: 1.4; stroke-dasharray: 3 3; }
#plan .p-naht      { stroke: rgba(46,53,47,0.5); opacity: 0.8; }
#plan .p-stuhl     { fill: rgba(255,255,255,0.9); }
#plan .p-mass      { stroke: rgba(222,225,218,0.5); }
#plan .p-mass text { fill: rgba(222,225,218,0.66); }
/* Beschriftung liegt im Bild und braucht einen eigenen Rücken, sonst verschwindet
   sie über einem hellen Fenster. */
#plan .p-label, #plan .p-mini {
  fill: #fff; stroke: rgba(14,18,13,0.8); stroke-width: 2.6px;
  paint-order: stroke fill; stroke-linejoin: round;
}
#plan .p-mini { fill: rgba(255,255,255,0.82); stroke-width: 2.2px; }
#plan .p-mass .p-mini, #plan .p-mass text { stroke: none; }

/* Passt es nicht, wird die Zeichnung zur Warnung */
.saal-halt.eng #plan .p-wand { stroke: var(--lampe-hell); }
.saal-halt.eng #plan .p-glas { stroke: rgba(230,163,92,0.45); }

/* -------------------------------------------- Die Bestuhlung wird gestellt
   Jeder Platz kommt an, von der Fensterfront nach hinten — in der Reihenfolge,
   in der im Haus wirklich eingedeckt wird. Nur transform und opacity. */
@keyframes zb-platz {
  from { opacity: 0; transform: scale(0.28); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes zb-tisch {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes zb-ankunft {
  from { opacity: 0; transform: translateY(0.22em); }
  to   { opacity: 1; transform: translateY(0); }
}
#plan .p-stuhl {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: zb-platz 300ms var(--weich) backwards;
  animation-delay: calc(var(--i, 0) * 5.5ms);
}
#plan .p-tisch, #plan .p-steh {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: zb-tisch 400ms var(--weich) backwards;
  animation-delay: calc(var(--i, 0) * 7ms);
}
#plan .p-naht { animation: zb-tisch 400ms var(--weich) backwards; animation-delay: 120ms; }

.saal-stand .gross b.neu { animation: zb-ankunft 280ms var(--weich); }

/* ============================================================ Werk: Schritte */
.werk-spalte { border-top: 1px solid var(--linie); }
.schritte { padding: 0 var(--rand) 26px; }

.schritt {
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--linie);
  position: relative;
}
/* Kopfzeile jedes Abschnitts: links die Frage, rechts die aktuelle Antwort.
   So liest sich die Spalte beim Zurückscrollen wie ein ausgefülltes Formular. */
.schritt-kopf {
  display: flex; align-items: baseline; gap: 14px; justify-content: space-between;
  margin: 0 0 4px;
}
.schritt-kopf h2 { font-size: clamp(20px, 2.2vw, 27px); margin: 0; }
.stand {
  flex: none; text-align: right; max-width: 46%;
  font-size: 11.5px; letter-spacing: 0.11em; text-transform: uppercase;
  font-weight: 700; color: var(--lampe-tief); line-height: 1.3;
}
.stand.offen { color: var(--dunst); }
.schritt .sagt { font-size: 14.5px; color: var(--dunst); margin: 0 0 14px; max-width: 58ch; }
.schritt .sagt.duenn { margin-top: -4px; }

/* Auswahlreihen: keine Karten, nur Linien */
.wahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.wahl legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl label {
  display: inline-flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--linie-2); background: transparent;
  padding: 7px 13px; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background var(--schnell), color var(--schnell);
}
.wahl label small { font-weight: 500; color: var(--dunst); font-size: 12.5px; }
.wahl label:hover { background: rgba(255,255,255,0.24); }
.wahl input:checked + label {
  background: var(--tinte); color: var(--kalk); border-color: var(--tinte);
}
.wahl input:checked + label small { color: rgba(182,188,180,0.75); }
.wahl input:focus-visible + label { outline: 2px solid var(--lampe-tief); outline-offset: 2px; }

.anlass-note { margin: 12px 0 0; font-size: 14px; color: var(--lampe-tief); font-weight: 600; }

/* Personenzähler */
.zaehler { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zaehler button {
  width: 46px; height: 46px; flex: none;
  background: transparent; border: 1px solid var(--tinte); color: var(--tinte);
  font-family: var(--serif); font-size: 24px; line-height: 1; cursor: pointer;
}
.zaehler button:hover:not(:disabled) { background: var(--tinte); color: var(--kalk); }
.zaehler button:disabled { opacity: 0.35; cursor: not-allowed; }
.zaehler input {
  width: 100px; height: 46px; text-align: center;
  font-family: var(--sans); font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--kalk); color: var(--tinte); border: 1px solid var(--tinte);
  -moz-appearance: textfield;
}
.zaehler input::-webkit-outer-spin-button,
.zaehler input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zaehler .spanne { font-size: 13.5px; color: var(--dunst); }
.schnellwahl { display: flex; gap: 6px; margin: 12px 0 0; flex-wrap: wrap; }
.schnellwahl button {
  font: inherit; font-size: 13px; font-weight: 600;
  background: none; border: 1px dashed var(--linie-2); color: var(--dunst);
  padding: 3px 9px; cursor: pointer;
}
.schnellwahl button:hover { color: var(--tinte); border-style: solid; }

/* Kalender */
.kal-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.kal-kopf h3 { font-size: 20px; flex: 1; }
.kal-kopf .saison {
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  border: 1px solid var(--linie-2); padding: 2px 8px;
}
.kal-kopf .saison.winter { background: var(--tinte); color: var(--kalk); border-color: var(--tinte); }
.kal-kopf button {
  width: 34px; height: 34px; flex: none; cursor: pointer;
  background: none; border: 1px solid var(--linie-2); color: var(--tinte);
  font: inherit; font-size: 15px; line-height: 1;
}
.kal-kopf button:disabled { opacity: 0.3; cursor: not-allowed; }
.kalender { min-height: 268px; }
table.kal { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.kal th {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--dunst); padding-bottom: 6px;
}
table.kal td {
  height: 40px; text-align: center; vertical-align: middle;
  border: 1px solid rgba(20,24,19,0.13);
  font-size: 15px; font-variant-numeric: tabular-nums;
  position: relative;
}
table.kal td.leer { border-color: transparent; }
table.kal td.frei { cursor: pointer; background: var(--kalk); font-weight: 600; }
table.kal td.frei:hover { background: var(--lampe); }
table.kal td.belegt, table.kal td.zu, table.kal td.frueh { color: rgba(20,24,19,0.58); }
table.kal td.belegt {
  background-image: repeating-linear-gradient(-45deg,
    rgba(20,24,19,0.30) 0 1px, transparent 1px 5px);
}
table.kal td.zu { background: rgba(20,24,19,0.10); }
table.kal td.gewaehlt { background: var(--tinte); color: var(--kalk); font-weight: 700; }
table.kal td.gewaehlt::after {
  content: ""; position: absolute; inset: 3px; border: 1px solid var(--lampe);
}
table.kal td:focus-visible { outline: 2px solid var(--lampe-tief); outline-offset: -2px; }
.kal-legende {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
  font-size: 12.5px; color: var(--dunst);
}
.kal-legende span { display: inline-flex; align-items: center; gap: 6px; }
.kal-legende i { width: 14px; height: 14px; border: 1px solid var(--linie-2); display: block; }
.kal-legende i.f { background: var(--kalk); }
.kal-legende i.b { background-image: repeating-linear-gradient(-45deg,
    rgba(20,24,19,0.30) 0 1px, transparent 1px 5px); }
.kal-legende i.z { background: rgba(20,24,19,0.10); }
.kal-gewaehlt { margin-top: 12px; font-size: 15.5px; font-weight: 600; min-height: 24px; }
.kal-gewaehlt em { font-style: normal; color: var(--lampe-tief); }

/* Pakete: Hauptbuch, keine Karten */
.pakete { display: grid; gap: 0; }
.paket { border-top: 1px solid var(--linie); padding: 14px 0; }
.paket:first-child { border-top: 0; }
.paket > label {
  display: flex; align-items: baseline; gap: 10px; cursor: pointer;
  font-size: 18px; font-weight: 700; font-family: var(--serif);
}
.paket > label .preis { margin-left: auto; font-family: var(--sans); font-size: 16px; }
.paket input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.paket .marker {
  width: 15px; height: 15px; flex: none; border: 1px solid var(--tinte); border-radius: 50%;
  position: relative; top: 2px;
}
.paket input:checked + label .marker { background: var(--lampe); box-shadow: inset 0 0 0 2px var(--kalk); }
.paket input:focus-visible + label { outline: 2px solid var(--lampe-tief); outline-offset: 3px; }
.paket .zeile { font-size: 14px; color: var(--dunst); margin: 4px 0 0 25px; }
.paket .listen { margin: 10px 0 0 25px; display: none; font-size: 14px; }
.paket input:checked ~ .listen { display: block; }
.paket ul { list-style: none; margin: 0 0 8px; padding: 0; }
.paket li { padding-left: 20px; position: relative; margin-bottom: 3px; }
.paket li::before {
  position: absolute; left: 0; font-weight: 700; font-variant-numeric: tabular-nums;
}
.paket .drin li::before { content: "+"; color: var(--lampe-tief); }
.paket .raus li::before { content: "–"; color: var(--dunst); }
.paket .raus { color: var(--dunst); }
.paket h3 {
  margin: 0 0 4px; font-family: var(--sans);
  font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 700; line-height: 1.4;
}

/* ------------------------------------------------------ Die Aufstellung
   Kein Tabellenblatt: ein gesetztes Blatt. Kopf mit Haarlinie, gezogene
   Geldspalten wie im Kassabuch, Doppelstrich über der Summe, Summe im Serif. */
.rechnung {
  background: var(--kalk);
  border-top: 2px solid var(--tinte); border-bottom: 2px solid var(--tinte);
  overflow-x: auto;
}
.rechnung-kopf {
  display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap;
  padding: 12px 16px 9px;
  border-bottom: 1px solid var(--linie-2);
}
.rk-marke { font-family: var(--serif); font-size: 20px; line-height: 1; }
.rk-titel {
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700; color: var(--dunst);
}
.rk-sub { margin-left: auto; font-size: 12.5px; color: var(--dunst); }

.rechnung table { width: 100%; border-collapse: collapse; }
.rechnung th {
  text-align: left; font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--dunst);
  padding: 9px 16px 6px; border-bottom: 1px solid var(--linie);
}
.rechnung td { padding: 5px 16px; vertical-align: baseline; font-size: 15px; }
.rechnung th.r, .rechnung td.r {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--linie);
  width: 1%;
}
/* Die pro-Person-Spalte liegt eine Spur tiefer im Blatt */
.rechnung th.pp, .rechnung td.pp { background: rgba(20, 24, 19, 0.05); }
.rechnung .hint { display: block; font-size: 12.5px; color: var(--dunst); line-height: 1.35; }
.rechnung tr.trenn td { padding-top: 12px; }
.rechnung td.gruppe {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--dunst); padding-bottom: 1px;
  border-top: 1px solid var(--linie);
}
.rechnung tr.mindest td { color: var(--lampe-tief); font-weight: 600; }
.rechnung tr.summe td {
  border-top: 3px double var(--tinte); padding-top: 11px; padding-bottom: 13px;
  font-size: 15px; font-weight: 700;
}
/* Die Summe wächst, bleibt aber in Karla: die Eins der Instrument Serif ist ein
   nackter Strich, und in einem Betrag darf keine Ziffer nach einem l aussehen. */
.rechnung tr.summe td.r { font-size: 20px; letter-spacing: 0.005em; }
.rechnung tr.summe td.r:last-child { font-size: 24px; }
.rechnung tr.summe td.pp { background: rgba(20, 24, 19, 0.07); }
.rechnung .fuss {
  margin: 0; padding: 11px 16px 13px; font-size: 12.5px; color: var(--dunst);
  border-top: 1px solid var(--linie);
}
.rechnung .z { display: inline-block; }
.rechnung .z.neu { animation: zb-ankunft 300ms var(--weich); }

/* Anmerkungen hängen an einem Zeichen im Ausschuss, nicht an einem Farbbalken. */
.notiz {
  margin: 14px 0 0; padding: 11px 0 0 26px;
  border-top: 1px solid var(--linie-2);
  font-size: 14px; position: relative; max-width: 58ch;
}
.notiz::before {
  content: "→"; position: absolute; left: 0; top: 11px;
  color: var(--lampe-tief); font-weight: 700;
}
.notiz strong { color: var(--lampe-tief); }
.notiz p:last-child { margin-bottom: 0; }

/* Formular */
.feld { margin-bottom: 14px; }
.feld label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.feld .zusatz { font-weight: 500; color: var(--dunst); }
.feld input, .feld textarea {
  width: 100%; font: inherit; font-size: 16px;
  background: var(--kalk); color: var(--tinte);
  border: 1px solid var(--linie-2); padding: 9px 11px;
}
.feld textarea { resize: vertical; min-height: 76px; }
.feld input:focus-visible, .feld textarea:focus-visible { border-color: var(--tinte); }
.fehler { display: block; min-height: 18px; font-size: 13.5px; color: var(--lampe-tief);
  font-weight: 600; margin-top: 3px; }
.fehler:empty { min-height: 0; }
.feld .fehler { font-size: 13px; }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: var(--lampe-tief); border-width: 2px; }
.doppel { display: grid; gap: 14px; }

.knopf {
  display: inline-flex; align-items: center; gap: 9px; justify-content: center;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  background: var(--tinte); color: var(--kalk); border: 1px solid var(--tinte);
  padding: 12px 22px; text-decoration: none;
}
.knopf:hover { background: var(--lampe-tief); border-color: var(--lampe-tief); color: #fff; }
.knopf.leer { background: transparent; color: var(--tinte); }
.knopf.leer:hover { background: var(--tinte); color: var(--kalk); }
.knopf.breit { width: 100%; }

/* Bestätigung */
.bestaetigt { border: 2px solid var(--tinte); background: var(--kalk); padding: 18px; }
.bestaetigt h3 { font-size: 25px; margin-bottom: 6px; }
.bestaetigt .ref {
  font-family: var(--sans); font-size: 27px; font-weight: 700; letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums; margin: 10px 0 2px; color: var(--lampe-tief);
}
.bestaetigt dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 16px;
  margin: 14px 0; font-size: 15px; }
.bestaetigt dt { color: var(--dunst); }
.bestaetigt dd { margin: 0; font-weight: 600; }
.bestaetigt .notiz { margin: 12px 0; }
.bestaetigt .taten { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* Preisleiste */
.leiste {
  position: sticky; bottom: 0; z-index: 7;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  min-height: var(--leiste-h);
  background: var(--schiefer); color: var(--kreide);
  padding: 10px var(--rand); border-top: 1px solid var(--tinte);
}
.leiste .preise { display: flex; gap: 22px; align-items: baseline; }
.leiste .block { line-height: 1.15; }
.leiste .etikett { font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(222,225,218,0.66); font-weight: 700; }
.leiste .wert { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.leiste .wert.gross { font-size: 25px; color: #fff; }
.leiste .wert.neu { animation: zb-ankunft 300ms var(--weich); }
.leiste .knopf {
  margin-left: auto; background: var(--lampe); border-color: var(--lampe); color: var(--tinte);
  padding: 10px 18px;
}
.leiste .knopf:hover { background: var(--kreide); border-color: var(--kreide); color: var(--tinte); }

/* ==================================================== Saison: ein Bild, ganz
   Welche Jahreshälfte hier steht, entscheidet der gewählte Tag. Die Saison ist
   auf dieser Seite keine Stimmung, sie ist eine Zeile in der Rechnung. */
.saison-band {
  display: grid;
  grid-template-rows: clamp(300px, 48vh, 520px) auto;
  background: var(--tinte);
  border-top: 1px solid var(--tinte);
}
.saison-band .saison-karte {
  grid-row: 1; grid-column: 1; margin: 0; position: relative; overflow: hidden;
  opacity: 0; transition: opacity 620ms ease;
}
.saison-band.s-sommer .saison-karte[data-saison="sommer"],
.saison-band.s-winter .saison-karte[data-saison="winter"] { opacity: 1; }
.saison-band img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.saison-band .saison-karte[data-saison="sommer"] img { object-position: 50% 58%; }
.saison-band .saison-karte[data-saison="winter"] img { object-position: 50% 50%; }
.saison-band figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(40px, 8vw, 100px) var(--rand) clamp(18px, 2.4vw, 30px);
  background: linear-gradient(to top,
    rgba(14,18,13,0.90) 0%, rgba(14,18,13,0.58) 40%, rgba(14,18,13,0) 100%);
  color: var(--kreide);
  display: grid; gap: 3px; justify-items: start;
}
.saison-band figcaption > * { max-width: 52ch; }
.saison-band figcaption b {
  font-family: var(--serif); font-weight: 400; color: #fff;
  font-size: clamp(30px, 4vw, 52px); line-height: 1;
}
.saison-band figcaption .spanne {
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700;
  color: var(--dunst-h);
}
.saison-band figcaption .satz { font-size: 15px; margin-top: 5px; }
.saison-band figcaption .satz b {
  font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--lampe-hell);
}
/* Der gewählte Tag markiert seine Saison zusätzlich. Die Aussage selbst steht
   als echter Satz in .saison-sagt, das hier ist nur die Markierung dazu. */
.saison-band .saison-karte.an .spanne::after {
  content: " · Ihr Tag"; color: var(--lampe-hell);
}
.saison-sagt {
  grid-row: 2; grid-column: 1; margin: 0;
  padding: 12px var(--rand) 14px;
  background: var(--schiefer); color: var(--dunst-h);
  font-size: 13.5px; line-height: 1.45;
  border-top: 1px solid rgba(222,225,218,0.16);
}
.saison-sagt em { font-style: normal; color: #fff; font-weight: 600; }

/* --------------------------------------------------------------- unterer Teil */
.band { padding: clamp(30px, 4vw, 56px) var(--rand); border-top: 1px solid var(--linie); }
.band > h2 { font-size: clamp(23px, 2.8vw, 34px); max-width: 24ch; margin-bottom: 10px; }
.band .lead { max-width: 60ch; color: var(--dunst); }

.wissen { display: grid; gap: 22px; margin-top: 26px; }
.wissen figure { margin: 0; }
.wissen img { width: 100%; height: auto; }
.wissen figcaption { font-size: 13px; color: var(--dunst); margin-top: 7px; }
.wissen dl { margin: 0; }
.wissen dt {
  font-family: var(--serif); font-size: 20px; margin-top: 16px;
  padding-top: 12px; border-top: 1px solid var(--linie);
}
.wissen dd { margin: 3px 0 0; font-size: 15px; max-width: 54ch; }

.studio { background: var(--schiefer); color: var(--kreide); }
.studio h2 { color: #fff; }
.studio .lead { color: rgba(222,225,218,0.78); }
.studio .taten { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.studio .knopf { background: var(--lampe); border-color: var(--lampe); color: var(--tinte); }
.studio .knopf:hover { background: #fff; border-color: #fff; }
.studio .knopf.leer { background: transparent; color: var(--kreide); border-color: rgba(222,225,218,0.5); }
.studio .knopf.leer:hover { background: var(--kreide); color: var(--schiefer); }

.fuss {
  padding: 20px var(--rand) 30px; font-size: 13.5px; color: var(--dunst);
  border-top: 1px solid var(--linie);
}
.fuss a { color: var(--tinte); }
.fuss p { margin: 0 0 5px; }

/* ------------------------------------------------------------------ raum.html */
.praxis { padding: 0 var(--rand) 10px; }
.praxis section { border-top: 1px solid var(--linie); padding: 22px 0; }
.praxis h2 { font-size: clamp(22px, 2.6vw, 31px); margin-bottom: 10px; }
.praxis .fakten { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 18px; font-size: 15.5px; }
.praxis .fakten dt { color: var(--dunst); }
.praxis .fakten dd { margin: 0; font-weight: 600; }
.praxis p { max-width: 62ch; }
.praxis .notiz { max-width: 62ch; }
.praxis ul { max-width: 62ch; padding-left: 18px; }
.praxis li { margin-bottom: 5px; }
.bilderpaar { display: grid; gap: 16px; margin: 22px 0 0; }
.bilderpaar figure { margin: 0; }
.bilderpaar img { width: 100%; height: auto; }
.bilderpaar figcaption { font-size: 13px; color: var(--dunst); margin-top: 7px; }

/* Schmale Fenster: nichts darf quer hinauslaufen */
@media (max-width: 560px) {
  /* Die Aufstellung muss auf ein Telefon passen, ohne dass man sie seitwärts
     schieben muss: sie ist die Antwort, nicht eine Beilage. */
  .rechnung td, .rechnung th { padding-left: 8px; padding-right: 8px; }
  .rechnung td { font-size: 14px; }
  .rechnung th { letter-spacing: 0.1em; }
  .rechnung tr.summe td.r { font-size: 16px; }
  .rechnung tr.summe td.r:last-child { font-size: 17.5px; }
  .rechnung-kopf { padding-left: 11px; padding-right: 11px; }
  .rechnung .fuss { padding-left: 11px; padding-right: 11px; }
  .praxis .fakten, .bestaetigt dl { grid-template-columns: 1fr; gap: 0 0; }
  .praxis .fakten dt, .bestaetigt dt { margin-top: 8px; }
  .bestaetigt .ref { font-size: 23px; }
  .saal-kopf .rechts { margin-left: 0; }
  .leiste .knopf { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------------------------ Breiten */
@media (min-width: 700px) {
  .doppel { grid-template-columns: 1fr 1fr; }
  .wissen { grid-template-columns: 1.15fr 1fr; align-items: start; gap: 34px; }
  .bilderpaar { grid-template-columns: 1.35fr 1fr; align-items: start; }
}

/* Schmale Fenster: der Saal klebt oben, die Schritte laufen darunter durch.
   Die grosse Zahl hat dort keinen Platz, die Kopfzeile sagt dasselbe. */
@media (max-width: 1079px) {
  .saal-spalte { position: sticky; top: 0; z-index: 6; }
  /* Der Saal klebt oben und darf höchstens gut vier Zehntel des Schirms nehmen,
     sonst bleibt für die Schritte darunter nichts übrig. Auf dem Telefon greift
     ohnehin die Spaltenbreite zuerst. */
  .raum { max-width: calc((44vh - 90px) * 492 / 340); }
  .saal-stand, .saal-wort { display: none; }
  .saal-text { padding-top: 8px; padding-bottom: 11px; }
  .plan-sagt { min-height: 38px; font-size: 13.5px; }
  /* Sprungziele dürfen nicht unter dem klebenden Saal landen. */
  .schritt, #bestaetigung { scroll-margin-top: calc(44vh + 16px); }
}

/* Schmal: die Beschriftung im Grundriss wird mitskaliert und wäre sonst 7 px
   hoch. Die Zeichnung selbst bleibt unverändert, nur die Schrift wächst. */
@media (max-width: 560px) {
  .saal-kopf { gap: 5px 9px; font-size: 10px; letter-spacing: 0.1em; }
  .saal-kopf .rechts { font-size: 12px; }
  .saal-kopf button { font-size: 10px; padding: 2px 7px; letter-spacing: 0.06em; }
  #plan .p-label { font-size: 13px; stroke-width: 3.4px; }
  #plan .p-mini { font-size: 11.5px; stroke-width: 3px; }
}

@media (min-width: 1080px) {
  /* Die Spalte wird auf Zeilenhöhe gestreckt, klebrig ist der Inhalt.
     Andersherum hätte das Klebeelement keinen Weg und würde wegscrollen. */
  .buehne {
    display: grid;
    grid-template-columns: 47fr 53fr;
    align-items: stretch;
  }
  .saal-spalte { border-right: 1px solid var(--tinte); border-bottom: 0; }
  /* Kopfzeile oben, der Raum darunter, unten in einer Zeile die Personenzahl
     und das, was der Plan dazu sagt. Alles oben ausgerichtet: wächst der Satz
     unten (etwa weil die Bestuhlung nicht passt), rückt der Raum nicht weg. */
  .saal-halt {
    position: sticky; top: 0; height: 100vh;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "kopf kopf" "raum raum" "zahl wort" "fuss fuss";
    padding-top: clamp(6px, 1.6vh, 20px);
  }
  .plan-legende { display: flex; grid-area: fuss; align-self: end; }
  .saal-kopf { grid-area: kopf; }
  /* Der Raum reicht fast bis an die Spaltenkanten: es ist der Saal, nicht ein
     Bild von einem Plan in einem Kästchen. */
  .plan-flaeche { grid-area: raum; padding: 0 10px; }
  /* Er nimmt, was die Spalte an Höhe übrig lässt, behält aber sein
     Seitenverhältnis. Feste Rechnung, also kein Springen beim Laden. */
  .raum { max-width: calc((100vh - 210px) * 492 / 340); }
  .saal-stand { grid-area: zahl; align-self: end; padding-top: 12px; padding-right: 4px; }
  .saal-text { grid-area: wort; align-self: end; padding-left: 4px; }
  .werk-spalte { border-top: 0; }
  /* Der Titel wird auf zwei Spalten gelegt und bleibt flach, damit der Saal
     schon auf dem ersten Schirm ganz dasteht. */
  .titel {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px 40px; align-items: end;
    padding-top: 16px; padding-bottom: 16px;
  }
  .titel h1 { font-size: clamp(28px, 2.6vw, 37px); max-width: 30ch; }
  .titel .unterzeile { margin: 0 0 4px; }
  .saison-band figcaption { padding-bottom: clamp(24px, 3vw, 44px); }
}

@media (min-width: 1440px) {
  .schritte, .leiste, .saal-kopf, .plan-flaeche, .saal-stand, .plan-sagt { --rand: 40px; }
}

/* Niedrige Desktop-Fenster: die grosse Zahl weicht, der Raum bleibt */
@media (min-width: 1080px) and (max-height: 719px) {
  .saal-stand, .plan-legende { display: none; }
  .saal-halt {
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "kopf kopf" "raum raum" "wort wort";
  }
  .raum { max-width: calc((100vh - 150px) * 492 / 340); }
}

/* Kurze Fenster: der Saal darf nicht den ganzen Schirm fressen */
@media (max-width: 1079px) and (max-height: 640px) {
  .saal-spalte { position: static; }
  .leiste { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  /* Ausdrücklich: kein Stellen, kein Ankommen. Die Zeichnung ist sofort da
     und vollständig, der Rest der Seite bleibt unverändert bedienbar. */
  #plan .p-stuhl, #plan .p-tisch, #plan .p-steh, #plan .p-naht,
  .saal-stand .gross b, .rechnung .z, .leiste .wert {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------- Druck */
#druck { display: none; }

@media print {
  @page { size: A4 portrait; margin: 14mm; }
  html, body { background: #fff; color: #000; }
  body { font-size: 10.5pt; }
  .hinweis, .kopf, .titel, .buehne, .band, .studio, .fuss, .leiste, .spring,
  .praxis, .bilderpaar, .saison-band {
    display: none !important;
  }
  #druck { display: block; }
  #druck h1 { font-size: 21pt; margin-bottom: 2mm; }
  #druck .kopfzeile { display: flex; align-items: baseline; gap: 6mm;
    border-bottom: 1.2pt solid #000; padding-bottom: 2mm; margin-bottom: 4mm; }
  #druck .kopfzeile .ref { margin-left: auto; font-size: 14pt; font-weight: 700;
    font-variant-numeric: tabular-nums; }
  #druck .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
  #druck dl { display: grid; grid-template-columns: auto 1fr; gap: 1mm 4mm; margin: 0; }
  #druck dt { color: #444; }
  #druck dd { margin: 0; font-weight: 700; }
  #druck svg { width: 100%; height: auto; border: 0.6pt solid #000; }
  #druck .p-wand { stroke: #000; fill: #fff; }
  #druck .p-tisch { fill: #ddd; stroke: #000; }
  #druck .p-stuhl { fill: #000; }
  #druck .p-glas, #druck .p-glas2 { stroke: #000; }
  #druck .p-raster { stroke: #eee; }
  #druck table { width: 100%; border-collapse: collapse; margin-top: 4mm; }
  #druck td { padding: 1mm 0; font-size: 10pt; vertical-align: baseline; }
  #druck td.r { text-align: right; font-variant-numeric: tabular-nums; }
  #druck tr.summe td { border-top: 1.2pt solid #000; font-weight: 700; font-size: 12pt;
    padding-top: 2mm; }
  #druck tr.trenn td { border-top: 0.5pt solid #999; padding-top: 2mm; }
  #druck .klein { font-size: 8.5pt; color: #444; margin-top: 4mm; }
  #druck .planwort { font-size: 9pt; margin-top: 2mm; }
}

/* ── SPRACHMENÜ ────────────────────────────────────────────────────────────
   js/i18n.js setzt das Menü erst nach DOMContentLoaded in [data-lang-host].
   Der Host hält den Platz vorher frei — ohne ihn rutscht die Navigation beim
   Einsetzen (CLS). Heller Kopf, also eine helle Fläche mit echter Kante. */
.lang-host { display: inline-flex; align-items: center; min-width: 3.4em; min-height: 30px; }
.kopf .wdm-lang {
  --wdm-lang-bg: var(--kreide);
  --wdm-lang-fg: var(--tinte);
  --wdm-lang-border: var(--linie-2);
  --wdm-lang-font: var(--sans);
}