/* Kesselhaus Kolbermoor · Studie · Glanzformat 2026
   Leitidee „Der Faden“: eine Gold-Ocker-Haarlinie verbindet Orte, Räume und am Ende den Besucher mit Anton. */

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Farbe */
  --weiss: #ffffff;
  --papier: #f7f5f1;          /* sehr helles Warmweiß für Felder und Flächen */
  --text: #2b2825;            /* warmes Dunkelgrau statt Schwarz, ca. 14:1 */
  --text-2: #6b645c;          /* Nebentext, 5,8:1 */
  --linie: #e5dfd6;
  --linie-stark: #cfc7bb;
  --gold: #947a4f;            /* Akzent aus Antons Grundrissen, 4,1:1: Linien, Zahlen, große Schrift */
  --gold-text: #7a6440;       /* Gold für kleine Schrift, 5,6:1 */
  --schleier: rgba(31, 28, 25, .38);

  /* Schrift: wenige Stufen */
  --f: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --t-label: .78rem;
  --t-notiz: .8125rem;   /* kleine Hinweise, Quellen, Fußzeile – neben --t-label die einzige kleine Stufe */
  --t-klein: .9375rem;
  --t-text: 1.0625rem;
  --t-lead: clamp(1.25rem, 1.05rem + .75vw, 1.625rem);
  --t-h2: clamp(1.875rem, 1.25rem + 2.3vw, 3.25rem);
  --t-hero: clamp(2.5rem, 1.35rem + 4.7vw, 5.75rem);
  --t-zahl: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);          /* Kennzahlen „mittel“: Fakten im Seitenkopf, 360°, Gäste-Eingabe */
  --t-zahl-gross: clamp(3.5rem, 1.9rem + 4.4vw, 6.5rem);     /* Kennzahlen „groß“: nur 900 / 600 auf der Startseite (Designprüfung C5) */

  /* Raum */
  --rand: clamp(20px, 4.4vw, 64px);
  --spalte: clamp(16px, 2vw, 32px);
  --max: 1520px;
  --abschnitt: clamp(96px, 7rem + 6vw, 220px);
  --kopf-h: 76px;
  --radius: clamp(14px, 1.4vw, 22px);

  /* Bewegung */
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}
@media (min-width: 900px) { :root { --t-text: 1.125rem; --kopf-h: 88px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* „versteckt“ gilt immer, auch wo eine Klasse display setzt (Milad 19.10.: Pfeil ohne Text neben „Jetzt anfragen“) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 12px); }
body {
  margin: 0; background: var(--weiss); color: var(--text);
  font-family: var(--f); font-size: var(--t-text); line-height: 1.6; font-weight: 400;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
img, video, svg, picture { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgba(148, 122, 79, .22); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 200; padding: 12px 18px; background: var(--text); color: var(--weiss); border-radius: 999px; transform: translateY(-160%); transition: transform .3s var(--ease); }
.skip:focus { transform: none; }

/* Typografie */
.label { font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--text-2); }
.label--gold { color: var(--gold-text); }
.nr { font-variant-numeric: tabular-nums; color: var(--gold-text); }
.h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.012em; font-weight: 400; text-wrap: balance; }
/* Fließtexte ohne text-wrap: pretty (Milad 16.10.): Safari verteilt damit den ganzen Absatz neu und macht am Handy mehrere Zeilen
   kurz („Treppe“); jetzt umbricht jeder Browser gleich, und kh.js hält das letzte Wort am vorletzten (keine Waise) */
.lead { font-size: var(--t-lead); line-height: 1.45; font-weight: 400; }
.text { max-width: 62ch; }
.text p + p { margin-top: 1em; }
.klein { font-size: var(--t-klein); }
.leise { color: var(--text-2); }

/* Raster */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--rand); }
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalte); }
.abschnitt { padding-block: var(--abschnitt); position: relative; }
.kopfzeile { display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(28px, 3vw, 48px); }
.kopfzeile .linie { flex: 1; height: 1px; background: var(--linie); transform: translateY(-.3em); }

/* Knöpfe */
.knopf {
  --k-bg: var(--text); --k-fg: var(--weiss); --k-fill: var(--gold-text);   /* Hover dunkles Gold: weiße Schrift 5,6 : 1 statt 4,1 : 1 (Milad 29.10.) */
  position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 0 26px; border-radius: 999px; background: var(--k-bg); color: var(--k-fg);
  font-size: var(--t-klein); letter-spacing: .02em; overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: color .35s var(--ease);
}
.knopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--k-fill);
  clip-path: circle(0% at var(--x, 85%) 50%); transition: clip-path .55s var(--ease);
}
@media (hover: hover) { .knopf:hover::before { clip-path: circle(150% at var(--x, 85%) 50%); } }
.knopf .pfeil { width: 16px; height: 16px; transition: transform .45s var(--ease); }
@media (hover: hover) { .knopf:hover .pfeil { transform: translateX(4px); } }
.knopf--hell { --k-bg: var(--weiss); --k-fg: var(--text); --k-fill: var(--papier); }
.knopf--linie { --k-bg: rgba(148, 122, 79, .1); --k-fg: var(--text); --k-fill: rgba(148, 122, 79, .2); } /* Zweitknopf: getönt statt umrandet */
.knopf--glas { --k-bg: rgba(255,255,255,.14); --k-fg: var(--weiss); --k-fill: rgba(255,255,255,.26); box-shadow: inset 0 0 0 1px rgba(255,255,255,.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.textlink { display: inline-flex; align-items: center; gap: 10px; padding-block: 6px; font-size: var(--t-klein); background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease); }
@media (hover: hover) { .textlink:hover { background-size: 0% 1px; background-position: 100% 100%; } }
.textlink .pfeil { width: 14px; height: 14px; }

/* Offen-Markierung der Studie */
.offen { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border: 1px dashed var(--gold); border-radius: 999px; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); font-weight: 500; vertical-align: middle; }

/* ───────── Faden ───────── */
.faden { position: absolute; pointer-events: none; overflow: visible; z-index: 2; }
.faden path, .faden line, .faden circle.f { fill: none; stroke: var(--gold); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.js-motion .faden [data-zeichnen] { stroke-dasharray: 1; stroke-dashoffset: var(--off, 1); }
.faden .knoten { fill: var(--gold); stroke: none; }

/* ───────── Kopf ───────── */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--kopf-h);
  display: flex; align-items: center; transition: transform .5s var(--ease), background-color .4s, box-shadow .4s;
}
.kopf.ist-fest { background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); box-shadow: 0 1px 0 var(--linie); }
.kopf.ist-weg { transform: translateY(-100%); }
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; color: var(--text); }
.logo svg { width: clamp(118px, 9vw, 150px); height: auto; }
.nav { display: none; }
@media (min-width: 1100px) {
  .nav { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 40px); }
  .nav a { position: relative; font-size: var(--t-klein); padding-block: 8px; }
  .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
  .nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
}
.kopf__rechts { display: flex; align-items: center; gap: 10px; }
.kopf .knopf { min-height: 46px; padding: 0 22px; }
.menueknopf { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 6px 0 16px; border-radius: 999px; font-size: var(--t-klein); }
.menueknopf .striche { position: relative; width: 26px; height: 10px; }
.menueknopf .striche::before, .menueknopf .striche::after { content: ""; position: absolute; left: 0; right: 0; height: 1.25px; background: currentColor; transition: transform .45s var(--ease); }
.menueknopf .striche::before { top: 0; } .menueknopf .striche::after { bottom: 0; right: 8px; }
@media (hover: hover) { .menueknopf:hover .striche::after { right: 0; } }
@media (min-width: 1100px) { .menueknopf { display: none; } }
@media (max-width: 1099px) { .kopf .knopf--anfrage { display: none; } }

/* ───────── Menü (typografisch, ohne Fotos) ───────── */
.menue { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.menue.ist-offen { visibility: visible; }
.menue__schleier { position: absolute; inset: 0; background: var(--schleier); opacity: 0; transition: opacity .5s var(--ease); }
.menue.ist-offen .menue__schleier { opacity: 1; }
.menue__blatt {
  position: absolute; inset: 0 0 0 auto; width: min(100%, 760px); background: var(--weiss);
  display: flex; flex-direction: column; padding: 0 var(--rand) calc(28px + env(safe-area-inset-bottom));   /* oben 0: Logo und Knopf stehen beim Öffnen exakt wie im Seitenkopf (A6) */
  transform: translateX(100%); transition: transform .56s var(--ease); overflow-y: auto; overscroll-behavior: contain;
}
.menue.ist-offen .menue__blatt { transform: none; }
.menue__oben { display: flex; justify-content: space-between; align-items: center; min-height: var(--kopf-h); }
.schliessen { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--weiss); transition: transform .5s var(--ease); }
@media (hover: hover) { .schliessen:hover { transform: rotate(90deg); } }
.schliessen svg { width: 18px; height: 18px; }
.menue .schliessen { width: 46px; height: 46px; }   /* so hoch wie der Menüknopf (A6) */
.menue__liste { margin-top: clamp(28px, 6vh, 72px); border-top: 1px solid var(--linie); }
.menue__liste li { border-bottom: 1px solid var(--linie); }
.menue__liste a { position: relative; display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: baseline; padding: clamp(14px, 2.2vh, 22px) 0; }
.menue__liste .nr { font-size: var(--t-klein); }
.menue__liste .wort { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.05; letter-spacing: -.01em; transition: transform .6s var(--ease); }
.menue__liste .pfeil { width: 22px; height: 22px; color: var(--gold); opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .5s var(--ease); }
.menue__liste a::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
@media (hover: hover) {
  .menue__liste a:hover .wort { transform: translateX(10px); }
  .menue__liste a:hover .pfeil { opacity: 1; transform: none; }
  .menue__liste a:hover::after { transform: scaleX(1); }
}
.menue__liste a[aria-current] .wort { color: var(--gold); }
.js-motion .menue__liste li { opacity: 0; transform: translateY(18px); }
.menue.ist-offen .menue__liste li { opacity: 1; transform: none; transition: opacity .6s var(--ease) calc(.12s + var(--i) * .055s), transform .8s var(--ease) calc(.12s + var(--i) * .055s); }
.menue__fuss { margin-top: auto; padding-top: 36px; display: grid; gap: 22px; }
@media (min-width: 640px) { .menue__fuss { grid-template-columns: 1fr 1fr; } }
.menue__fuss .label { display: block; margin-bottom: 8px; color: var(--gold-text); }
/* Menü-Fuß (Milad 16.10.: „etwas dezenter“): kleine Kontaktzeilen wie im Fuß – Telefon · WhatsApp · E-Mail, Lesegröße klein, keine Pille */
.menue__fuss a:not(.knopf) { display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; min-height: 36px; padding-block: 5px; font-size: var(--t-klein); line-height: 1.45; }
.menue__adresse { display: block; padding-block: 5px; font-size: var(--t-klein); line-height: 1.6; color: var(--text-2); }
.menue__fuss a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.menue__fuss .knopf { display: inline-flex; margin-top: 4px; }
/* Handy: „Jetzt anfragen“ direkt unter der Navigation – sonst läge der Knopf unter dem Bildrand (Safari mit Leisten ~660 px hoch) */
@media (max-width: 639px) { .menue__fuss > div:last-child { order: -1; } .menue__fuss .knopf { margin-top: 0; } }
/* sechs Einträge seit dem Eventkalender: bei wenig Höhe (iPhone SE mit Leisten) enger, Schriftgrößen bleiben (Prüfrunde 29.10.) */
@media (max-width: 639px) and (max-height: 700px) { .menue__liste { margin-top: 16px; } .menue__liste a { padding-block: 10px; } .menue__fuss { padding-top: 20px; } }

/* ───────── Hero ───────── */
.hero { position: relative; height: 100svh; min-height: 600px; padding: var(--kopf-h) 0 0; }
.hero__rahmen {
  --inset: clamp(10px, 1.6vw, 24px);
  position: absolute; inset: var(--kopf-h) 0 0 0; overflow: hidden; color: var(--weiss);
  clip-path: inset(0 var(--inset) var(--inset) var(--inset));   /* eckig: was randlos wird, ist nie rund (Milad 15.10.) */
  background: #2b2825;
}
.hero__bild, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }
.hero__verlauf { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,16,.18) 0%, rgba(20,18,16,0) 30%, rgba(20,18,16,0) 48%, rgba(20,18,16,.55) 100%); }
.hero__inhalt { position: absolute; inset: auto 0 0 0; padding: 0 calc(var(--rand) + var(--inset)) calc(var(--inset) + clamp(28px, 5vh, 64px)); display: grid; gap: clamp(22px, 3vh, 36px); }
.hero__ort { color: rgba(255,255,255,.86); }
@media (max-width: 599px) { .hero__trenner { display: none; } .hero__ort2 { display: block; margin-top: 6px; } }
.hero h1 { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -.02em; font-weight: 400; max-width: 13ch; text-wrap: balance; }
.hero__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero__pause { position: absolute; right: calc(var(--inset) + 18px); bottom: calc(var(--inset) + 18px); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--weiss); background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero__pause svg { width: 14px; height: 14px; }
@media (min-width: 900px) {
  .hero__inhalt { grid-template-columns: 1fr auto; align-items: end; }
  .hero__aktionen { padding-right: 64px; }
}
.js-motion .hero__anim { opacity: 0; transform: translateY(26px); }
.ist-geladen .hero__anim { opacity: 1; transform: none; transition: opacity 1s var(--ease) calc(var(--i) * .12s + .1s), transform 1.2s var(--ease) calc(var(--i) * .12s + .1s); }

/* ───────── Einstieg: Bestandstext Wort für Wort ───────── */
.einstieg { padding-top: clamp(80px, 12vw, 180px); }
.einstieg__text { grid-column: 1 / -1; font-size: var(--t-h2); line-height: 1.18; letter-spacing: -.012em; text-wrap: balance; }   /* Aussagesatz = Überschriften-Stufe (C5) */
@media (min-width: 900px) { .einstieg__text { grid-column: 2 / 12; } }
.einstieg__text .w { color: var(--text); transition: color .25s linear; }
/* große Sätze wie Überschriften ausgeglichen (balance); Wörter bleiben ganz – „Membran-Dächern“ wird nicht am Strich getrennt */
[data-woerter] .w { white-space: nowrap; }
.js-motion .einstieg__text .w { color: #d9d2c8; }
.js-motion .einstieg__text .w.an { color: var(--text); }
.einstieg__mehr { grid-column: 1 / -1; margin-top: clamp(32px, 4vw, 64px); }
.einstieg__mehr > .lead { color: var(--text-2); max-width: 40ch; }
@media (min-width: 900px) { .einstieg__mehr { grid-column: 7 / 13; } }
.einstieg__fuss { margin-top: clamp(24px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }

/* ───────── Flexible Raumaufteilung (Kennzahlen) ───────── */
.ausstattung { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 3vw, 44px); }

/* ───────── Räume ───────── */
.raum__fakten { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 24px 0 28px; padding-top: 18px; border-top: 1px solid var(--linie); font-size: var(--t-klein); }
.raum__fakten span { display: inline-flex; align-items: center; gap: 9px; }
.raum__fakten span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.rahmenbild { display: block; position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 2; background: var(--papier); }
.rahmenbild picture, .rahmenbild img { width: 100%; height: 100%; object-fit: cover; }
.js-motion [data-oeffnen] { background: transparent; }   /* keine Platzhalterfläche um das sich öffnende Foto */
.js-motion [data-oeffnen] > picture { clip-path: inset(9% round var(--radius)); }
.js-motion [data-oeffnen] img { scale: 1.12; }
.js-motion [data-oeffnen].ist-offen > picture { clip-path: inset(0 round var(--radius)); transition: clip-path 1.3s cubic-bezier(.6, 0, .2, 1) var(--verz, 0s); }
.js-motion [data-oeffnen].ist-offen img { scale: 1; transition: scale 1.7s cubic-bezier(.2, .7, .2, 1) var(--verz, 0s), transform 1.1s var(--ease); }

/* ───────── Galerie: klickbare Fotos (Zoom beim Überfahren) und Steuerknöpfe ───────── */
[data-gross] img { transition: transform 1.1s var(--ease); }
@media (hover: hover) and (pointer: fine) { [data-gross]:hover img { transform: scale(1.03); } }   /* gleicher Zoom wie die Wegweiser (.bb-weg) */
.steuer { display: flex; gap: 10px; }
.rund { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--linie-stark); transition: background-color .3s, color .3s; }
@media (hover: hover) { .rund:hover { background: var(--text); color: var(--weiss); } }
.rund svg { width: 18px; height: 18px; }
.rund:disabled { opacity: .35; pointer-events: none; }

/* Großansicht */
.gross { position: fixed; inset: 0; z-index: 120; background: rgba(20,18,16,.96); color: var(--weiss); display: grid; grid-template-rows: auto 1fr auto; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.gross.ist-offen { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.gross__oben, .gross__unten { display: flex; justify-content: space-between; align-items: center; padding: 16px var(--rand); }
.gross__bild { position: relative; display: grid; place-items: center; padding: 0 var(--rand); overflow: hidden; touch-action: pan-y; }
.gross__bild img { max-height: calc(100svh - 170px); width: auto; }
.gross .rund { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); color: var(--weiss); }
@media (hover: hover) { .gross .rund:hover { background: var(--weiss); color: var(--text); } }
.gross .schliessen { background: var(--weiss); color: var(--text); }
/* Flug: das Foto wächst von seiner Kachel in die Großansicht und kehrt beim Schließen zurück (kh.js) */
.gross-flug { position: fixed; z-index: 130; margin: 0; pointer-events: none; object-fit: cover; will-change: transform, clip-path; }

/* ───────── Rundgang ───────── */
.rundgang__buehne { position: relative; margin-top: clamp(32px, 4vw, 56px); }
.rundgang__start { position: absolute; inset: 0; display: grid; place-items: center; }
.rundgang__knopf { display: grid; place-items: center; gap: 10px; width: clamp(132px, 13vw, 168px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--text); text-align: center; font-size: var(--t-klein); line-height: 1.2; transition: transform .6s var(--ease); }
.rundgang__knopf svg { width: 30px; height: 30px; color: var(--gold); }
.rundgang__hinweis { margin-top: 14px; font-size: var(--t-notiz); color: var(--text-2); }
.rundgang-dialog { position: fixed; inset: 0; z-index: 130; background: #141210; display: grid; grid-template-rows: auto 1fr; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; }
.rundgang-dialog.ist-offen { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
.rundgang-dialog__oben { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--rand); color: var(--weiss); }
.rundgang-dialog iframe { width: 100%; height: 100%; border: 0; }
.rundgang-dialog .schliessen { background: var(--weiss); color: var(--text); }

/* ───────── Lage ───────── */
.lage { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(32px, 4vw, 56px); }
@media (min-width: 1000px) { .lage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.lage__text .text { margin-top: 28px; font-size: var(--t-lead); line-height: 1.5; color: var(--text-2); max-width: 34ch; }
.lage__adresse { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }

/* ───────── Kontakt (Startseite) ───────── */
.kontakt { background: var(--papier); }
.kontakt__raster { display: grid; gap: clamp(28px, 3vw, 48px) clamp(36px, 5vw, 72px); align-items: center; }
.kontakt__kopf { grid-column: 1 / -1; margin-bottom: 0; }
@media (min-width: 900px) { .kontakt__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.portrait { position: relative; max-width: 460px; }
.portrait .rahmenbild { aspect-ratio: 4 / 5; }
.portrait figcaption { margin-top: 14px; display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-klein); }
@media (max-width: 899px) {   /* Handy: Anton als kleines rundes Bild mit Namen – Überschrift und Kontaktwege rücken nach oben */
  .kontakt .portrait { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; column-gap: 14px; max-width: none; }
  .kontakt .portrait .rahmenbild { aspect-ratio: 1; border-radius: 50%; }
  .kontakt .portrait figcaption { margin-top: 0; flex-direction: column; justify-content: center; gap: 2px; }
}
/* Kontaktwege (Milad 16.10.: dezenter – „wir sind mit Kontaktmöglichkeiten gut ausgestattet, muss nicht alles dicker und größer sein“):
   eine getönte Karte mit drei ruhigen Zeilen statt drei großer Karten; Angabe in Lesegröße, Symbol im weißen Kreis (wie der Schieber
   der Kapsel), feine Trennlinien. Breite Spalte: Bezeichnung und Angabe in einer Zeile wie im Datenblatt; schmal: übereinander, ohne Pfeil */
.wege { container-type: inline-size; margin-top: clamp(28px, 3vw, 40px); display: grid; border-radius: var(--radius); background: rgba(148, 122, 79, .07); overflow: hidden; }
.weg-zeile { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 12px 18px 12px 12px; transition: background-color .35s var(--ease); }
.weg-zeile + .weg-zeile::before { content: ""; position: absolute; top: 0; left: 62px; right: 18px; border-top: 1px solid rgba(148, 122, 79, .16); }
.weg-zeile .ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--weiss); color: var(--gold); box-shadow: 0 1px 2px rgba(43, 40, 37, .05), 0 3px 10px rgba(43, 40, 37, .05); }
.weg-zeile .ico svg { width: 16px; height: 16px; }
.weg-zeile .label { display: block; margin-bottom: 1px; }
.weg-zeile .was { display: block; font-size: var(--t-text); line-height: 1.3; overflow-wrap: anywhere; }
.weg-zeile > .pfeil { display: none; width: 16px; height: 16px; color: var(--gold); transition: transform .5s var(--ease); }
/* schmale Spalten (Kontaktseite 1000–1279 px, kleine Handys): eine Stufe kleiner, damit auch die E-Mail einzeilig bleibt */
@container (max-width: 340px) { .weg-zeile { padding-right: 12px; } .weg-zeile .was { font-size: var(--t-klein); } }
@container (min-width: 520px) {
  .weg-zeile { grid-template-columns: 36px minmax(0, 1fr) auto; padding-block: 10px; }
  .weg-zeile > span:not(.ico) { display: flex; align-items: baseline; gap: 12px; }
  .weg-zeile .label { flex: none; width: 6.5rem; margin: 0; }
  .weg-zeile > .pfeil { display: block; }
}
@media (hover: hover) { a.weg-zeile:hover { background: rgba(148, 122, 79, .08); } a.weg-zeile:hover .pfeil { transform: translateX(4px); } }
a.weg-zeile:active { background: rgba(148, 122, 79, .08); }
a.weg-zeile:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: var(--radius); }
.kontakt__aktion { margin-top: clamp(28px, 3vw, 40px); }

/* Kleine Kontaktzeilen (Fuß, Menü): Symbol im kleinen Kreis (WhatsApp gefüllt wie überall), Wort mit wachsender Linie beim Zeigen
   (wie in der Navigation), Nebenangabe wie Nummer oder Dateigröße leise daneben */
.mini-kreis { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(148, 122, 79, .1); color: var(--gold); }
.mini-kreis svg { width: 13px; height: 13px; }
.mini-kreis--wa { background: var(--gold); color: var(--weiss); }
.mini-kreis--wa svg { width: 14px; height: 14px; stroke-width: 1.6; }
.wort-linie { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
@media (hover: hover) { a:hover > .wort-linie, button:hover > .wort-linie { background-size: 100% 1px; } }
.nebeninfo { font-size: var(--t-notiz); color: var(--text-2); white-space: nowrap; }

/* ───────── Fuß ─────────
   Milad 16.10.: dunkler Schlussvorhang im Ton der Kontaktleiste – das Logo zeichnet sich hell mit goldener Kontur, der Faden endet daran.
   Ruhig: eine Schriftgröße für alle Verweise, Nebenangaben leise daneben, Kontakt mit kleinen Symbolkreisen, Titel hellgold,
   feine Linien unter dem Logo und über der Rechtszeile. Handy: Location und Folgen nebeneinander, Kontakt und Downloads darunter. */
.fuss { --fuss-grund: #24211e; --fuss-text: #f3efe8; --fuss-leise: rgba(243, 239, 232, .58); --fuss-linie: rgba(243, 239, 232, .12); --fuss-gold: #cdb88f;
  position: relative; padding: clamp(96px, 10vw, 168px) 0 calc(28px + env(safe-area-inset-bottom)); background: var(--fuss-grund); color: var(--fuss-text);
  box-shadow: 0 50vh 0 50vh var(--fuss-grund); }   /* nach unten verlängert: beim Nachfedern am Seitenende kein weißer Streifen */
.fuss__marke { color: var(--fuss-text); }
.fuss__marke svg { width: 100%; height: auto; }
.fuss .schlusslogo__zeile { color: var(--fuss-leise); }
.fuss__spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "location folgen" "kontakt kontakt" "downloads downloads"; gap: 36px 24px; margin-top: clamp(48px, 6vw, 88px); padding-top: clamp(32px, 3vw, 44px); border-top: 1px solid var(--fuss-linie); }
.fuss__gruppe--location { grid-area: location; }
.fuss__gruppe--kontakt { grid-area: kontakt; }
.fuss__gruppe--downloads { grid-area: downloads; }
.fuss__gruppe--folgen { grid-area: folgen; }
@media (min-width: 700px) { .fuss__spalten { grid-template-areas: "location kontakt" "downloads folgen"; column-gap: var(--spalte); } }
@media (min-width: 1100px) { .fuss__spalten { grid-template-columns: repeat(4, auto); grid-template-areas: "location kontakt downloads folgen"; justify-content: space-between; } }
.fuss__spalten .label { display: block; margin-bottom: 12px; color: var(--fuss-gold); }
/* alle Zeilen 36 px hoch, damit die vier Spalten auf einer Linie laufen (Kontakt: 26 px Kreis + 2 × 5 px) */
.fuss__spalten li > a, .fuss__knopf { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding-block: 5px; font-size: var(--t-klein); line-height: 1.45; }
.fuss__knopf { -webkit-appearance: none; appearance: none; margin: 0; padding-inline: 0; border: 0; background: none; font-family: inherit; color: inherit; cursor: pointer; }
.fuss__spalten a:focus-visible, .fuss__knopf:focus-visible { outline: 2px solid var(--fuss-gold); outline-offset: 3px; border-radius: 4px; }
.fuss .nebeninfo { color: var(--fuss-leise); }
.fuss .mini-kreis { background: rgba(205, 184, 143, .14); color: var(--fuss-gold); }
.fuss .mini-kreis--wa { background: var(--gold); color: var(--weiss); }
.fuss__adresse { margin: 12px 0 0 36px; font-size: var(--t-notiz); line-height: 1.6; color: var(--fuss-leise); }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; margin-top: clamp(40px, 5vw, 64px); padding-top: 20px; border-top: 1px solid var(--fuss-linie); font-size: var(--t-notiz); color: var(--fuss-leise); }
.fuss__unten nav { display: flex; gap: 24px; }
@media (max-width: 599px) { .fuss__unten { flex-direction: column; gap: 2px; } }   /* Handy: © und Rechtliches sauber untereinander statt versetzt nebeneinander (Milad 19.10.) */
.fuss__unten a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease), color .3s; }
@media (hover: hover) { .fuss__unten a:hover { color: var(--fuss-text); background-size: 100% 1px; } }
.fuss a:focus-visible { outline-color: var(--fuss-gold); }

/* ───────── Kontakt-Panel (von links, nach Likova) ───────── */
.panel { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.panel.ist-offen { visibility: visible; }
.panel__schleier { position: absolute; inset: 0; background: var(--schleier); opacity: 0; transition: opacity .5s var(--ease); }
.panel.ist-offen .panel__schleier { opacity: 1; }
.panel__blatt {
  position: absolute; inset: 0 auto 0 0; width: min(100%, 780px); background: var(--weiss);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-100%); transition: transform .62s var(--ease);
}
.panel.ist-offen .panel__blatt { transform: none; }
.panel__innen { padding: 22px var(--rand) calc(40px + env(safe-area-inset-bottom)); }
@media (min-width: 781px) { .panel__innen { padding: 30px clamp(32px, 4vw, 64px) 64px; } }
.panel__oben { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.panel__titel { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem); line-height: 1; letter-spacing: -.02em; font-weight: 400; margin: clamp(24px, 4vh, 48px) 0 clamp(20px, 3vh, 32px); }
.gastgeber { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 16px 0; border-block: 1px solid var(--linie); }
.gastgeber img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.gastgeber strong { font-weight: 500; display: block; }
.gastgeber .leise { font-size: var(--t-klein); }
/* Panel am Handy kompakter (Designprüfung A9): Fokus liegt auf dem Titel, ohne Ring; Label einzeilig, Titel eine Stufe kleiner */
.panel__titel:focus { outline: none; }
@media (max-width: 599px) {
  .panel__zusatz { display: none; }
  .panel__titel { font-size: 2.25rem; margin: 18px 0 16px; }
}

/* Formular */
.formular { margin-top: 26px; display: grid; gap: 4px; }
.formular__zeile { display: grid; gap: 0 var(--spalte); }
@media (min-width: 600px) { .formular__zeile--2 { grid-template-columns: 1fr 1fr; } }
.feld { position: relative; padding-top: 18px; }
.feld label, .feld .feld__titel { display: block; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); font-weight: 500; }
.feld input, .feld select, .feld textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--linie-stark); border-radius: 0; background: transparent;
  padding: 10px 0 12px; font-size: 1.0625rem; line-height: 1.4; outline: none; transition: border-color .3s;
  -webkit-appearance: none; appearance: none;
}
.feld textarea { resize: vertical; min-height: 92px; }
.feld select { background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-bottom-color: var(--gold); }
/* Fokus: nur die Unterkante des Feldes selbst wird golden. Die frühere Zusatzlinie unter dem ganzen .feld lag unter Fehlertext
   bzw. Gäste-Check und ergab eine zweite Linie (Abschlussprüfung #7). */
.feld .fehler { display: none; font-size: var(--t-notiz); color: #9b3b2a; margin-top: 6px; }
.feld.ist-falsch input { border-bottom-color: #9b3b2a; }
.feld.ist-falsch .fehler { display: block; }
.pflicht { color: var(--gold-text); }
.check { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; font-size: var(--t-klein); cursor: pointer; }
/* Ja/Nein im Baukasten: Schalter (eine kleine Kapsel), an = Gold */
.check input {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0;
  border-radius: 999px; background: rgba(43, 40, 37, .14); cursor: pointer; transition: background-color .3s var(--ease);
}
.check input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--weiss);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .08); transition: transform .45s var(--ease);
}
.check input:checked { background: var(--gold); }
.check input:checked::after { transform: translateX(18px); }
@media (hover: hover) { .check:hover input:not(:checked) { background: rgba(43, 40, 37, .2); } }
.check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Datum und Personen (Designprüfung A5): leeres Datum in Platzhalterfarbe statt „heute“ in voller Schrift (Safari), keine Zählpfeile */
.feld input[type="date"]:not(.hat-wert), .feld input[type="date"]:not(.hat-wert)::-webkit-datetime-edit, .feld input[type="date"]:not(.hat-wert)::-webkit-datetime-edit-fields-wrapper,
.feld input[type="date"]:not(.hat-wert)::-webkit-datetime-edit-text, .feld input[type="date"]:not(.hat-wert)::-webkit-datetime-edit-day-field,
.feld input[type="date"]:not(.hat-wert)::-webkit-datetime-edit-month-field, .feld input[type="date"]:not(.hat-wert)::-webkit-datetime-edit-year-field { color: var(--linie-stark); }
.feld input[type="date"] { min-height: 46px; }
.feld input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.feld input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.feld input[type="number"]::-webkit-outer-spin-button, .feld input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ohne-bewegung .check input::after { transition: none; }
.gaestecheck { margin-top: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--papier); font-size: var(--t-klein); line-height: 1.5; }
.gaestecheck[hidden] { display: none; }
.gaestecheck__titel { display: block; margin-bottom: 6px; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); font-weight: 500; }
.gaestecheck__zeile { display: grid; grid-template-columns: 7.5rem 1fr; gap: 10px; padding: 4px 0; }
.gaestecheck__zeile b { font-weight: 500; }
.wahl-feld > legend { padding: 0; }   /* bündig mit den anderen Feldbeschriftungen (Abschlussprüfung #12) */
.wahl label { position: relative; }
.zusammenfassung { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: var(--t-klein); color: var(--text-2); min-height: 1.6em; }
.zusammenfassung b { color: var(--text); font-weight: 500; }
.formular__aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.formular__hinweis { margin-top: 14px; font-size: var(--t-notiz); color: var(--text-2); }
.formular__hinweis a { text-decoration: underline; text-underline-offset: 3px; }
.danke { display: none; text-align: left; padding-top: 12px; }
.panel.ist-gesendet .formular, .panel.ist-gesendet .schnellwege, .panel.ist-gesendet .gastgeber { display: none; }   /* Antons Foto nur einmal (Abschlussprüfung #4) */
.panel.ist-gesendet .panel__titel { display: none; }   /* „Jetzt anfragen“ nicht über „Anfrage erfolgreich“ */
[data-anfrage-huelle]:focus { outline: none; }
.panel.ist-gesendet .danke { display: block; }
.danke__bild { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; }
.danke .faden-knoten { width: 100%; height: 40px; margin: 8px 0 18px; }

/* ───────── Unterseiten-Kopf ───────── */
.seitenkopf { padding-top: calc(var(--kopf-h) + clamp(48px, 8vw, 120px)); padding-bottom: clamp(40px, 5vw, 72px); }
.seitenkopf h1 { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -.02em; font-weight: 400; margin-top: 18px; text-wrap: balance; }

/* ───────── Recht ───────── */
.recht { display: grid; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 1000px) { .recht { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.recht__inhalt { position: sticky; top: calc(var(--kopf-h) + 24px); align-self: start; font-size: var(--t-klein); }
.recht__inhalt a { display: block; padding: 7px 0; border-bottom: 1px solid var(--linie); color: var(--text-2); }
.recht__inhalt a:hover { color: var(--text); }
.recht__text { max-width: 70ch; }
.recht__text h2 { font-size: var(--t-lead); font-weight: 400; margin: 2.2em 0 .6em; line-height: 1.3; }
.recht__text h2:first-child { margin-top: 0; }
.recht__text p, .recht__text li { color: var(--text); }
.recht__text p + p, .recht__text ul { margin-top: .8em; }
.recht__text ul { padding-left: 1.1em; list-style: disc; }
.recht__text a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
.siegel-zeile { display: flex; align-items: center; gap: 14px; margin-top: 2.4em; padding-top: 1.6em; border-top: 1px solid var(--linie); }

/* ───────── Einblendung beim Eintritt ───────── */
.js-motion [data-auftritt] { opacity: 0; transform: translateY(24px); }
.js-motion [data-auftritt]:focus-within { opacity: 1; transform: none; }   /* Fokus nie auf Unsichtbarem (Prüfrunde 29.10.) */
.js-motion [data-auftritt].ist-sichtbar { opacity: 1; transform: none; transition: opacity .9s var(--ease) calc(var(--i, 0) * .08s), transform 1.1s var(--ease) calc(var(--i, 0) * .08s); }

/* ───────── Reduzierte Bewegung ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
.ohne-bewegung .faden [data-zeichnen] { stroke-dashoffset: 0 !important; }
.ohne-bewegung [data-auftritt], .ohne-bewegung .hero__anim, .ohne-bewegung .menue__liste li { opacity: 1 !important; transform: none !important; }
.ohne-bewegung [data-oeffnen] > picture { clip-path: none !important; }
.ohne-bewegung [data-oeffnen] img { scale: 1 !important; }
.ohne-bewegung .einstieg__text .w { color: var(--text) !important; }

/* ───────── Ergänzungen Startseite ───────── */
.hero__pause .i-play { display: none; }
.hero__pause:not(.spielt) .i-pause { display: none; }
.hero__pause:not(.spielt) .i-play { display: block; }
.zahlen-kopf { display: grid; gap: 18px; margin-bottom: clamp(36px, 4vw, 56px); }
.zahlen-kopf .h2 { max-width: 20ch; }
.zahlen-kopf .lead { max-width: 46ch; }
@media (min-width: 1000px) { .zahlen-kopf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--spalte); } }
.schluss { margin-top: clamp(48px, 6vw, 96px); max-width: 20ch; }
/* Schluss der Startseite: der Faden führt ins Bild des Ortes (der Claim steht nur im Hero) */
.kontakt__aktion { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.wahl-feld { border: 0; margin: 0; min-width: 0; padding: 18px 0 0; }
.wa-vorschau { margin-top: 16px; padding: 16px 18px; border-radius: var(--radius); background: var(--papier); }
.wa-vorschau[hidden] { display: none; }
.wa-vorschau pre { margin: 10px 0 0; white-space: pre-wrap; font: inherit; font-size: var(--t-klein); line-height: 1.55; }
.feld[hidden] { display: none; }
.schnellweg .offen { display: block; margin: 4px auto 0; width: max-content; }
.rundgang__zahl { display: block; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1; letter-spacing: -.02em; color: var(--gold); }
.rundgang__knopf { gap: 6px; align-content: center; }
.wahl label { text-transform: none; letter-spacing: normal; font-size: inherit; color: inherit; font-weight: 400; }
.gaestecheck__ort { display: block; margin-top: 10px; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); font-weight: 500; }
.gaestecheck__ort:first-of-type { margin-top: 2px; }
.gaestecheck__opt { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--linie); }
.gaestecheck__opt:last-child { border-bottom: 0; }
.gaestecheck__opt span:last-child { color: var(--gold-text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ───────── Korrekturen 1 (Milad, Desktop) ───────── */
/* Ausstattung als Vergleich Kesselhaus · Rosengarten */
.vergleich table { width: 100%; border-collapse: collapse; font-size: var(--t-klein); }
.vergleich thead th { padding: 0 0 14px; text-align: center; border-bottom: 1px solid var(--linie-stark); }
.vergleich thead th:first-child { text-align: left; }
.vergleich tbody th { font-weight: 400; text-align: left; padding: 13px 12px 13px 0; }
.vergleich td { width: 22%; text-align: center; }
.vergleich tbody tr { border-bottom: 1px solid var(--linie); transition: background-color .3s; }
@media (hover: hover) { .vergleich tbody tr:hover { background: linear-gradient(90deg, transparent, var(--papier) 12%, var(--papier) 88%, transparent); } }
.vergleich .ja, .vergleich .nein { display: inline-block; vertical-align: middle; }
.vergleich .ja { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(148,122,79,.12); }
.vergleich .nein { width: 12px; height: 1px; background: var(--linie-stark); }
.ausstattung { display: none; }

/* 360°-Knopf mit Schrift-Ring (dreht beim Scrollen) */
.rundgang__knopf { position: relative; width: clamp(168px, 15vw, 212px); gap: 2px; background: rgba(255,255,255,.96); }
.rundgang__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(var(--dreh, 0deg)); }
.rundgang__ring text { font-family: var(--f); font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase; fill: var(--text-2); }
.rundgang__zahl { font-size: clamp(2.25rem, 1.6rem + 1.8vw, 3.25rem); font-weight: 300; }
.rundgang__unter { font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.rundgang__knopf::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linie); transition: box-shadow .5s var(--ease), inset .5s var(--ease); }
@media (hover: hover) {
  .rundgang__knopf:hover { transform: scale(1.05); }
  .rundgang__knopf:hover::after { box-shadow: inset 0 0 0 1px var(--gold); }
  .rundgang__knopf:hover .rundgang__ring text { fill: var(--gold-text); }
}

/* Abschluss: das Kesselhaus-Logo wird nachgezeichnet */
.fuss__marke { display: flex; justify-content: center; padding: clamp(24px, 4vw, 64px) 0 clamp(8px, 2vw, 24px); }
.schlusslogo { width: min(100%, 820px); height: auto; overflow: visible; }
.schlusslogo__haus { fill: currentColor; }
.schlusslogo__wort { fill: currentColor; }
.js-motion .schlusslogo__haus { fill-opacity: 0; stroke: var(--fuss-gold, var(--gold)); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-motion .schlusslogo__wort { clip-path: inset(0 100% 0 0); }
.js-motion .ist-gezeichnet .schlusslogo__haus { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; transition: stroke-dashoffset 2.2s var(--ease-io), fill-opacity 1s var(--ease) 1.7s, stroke-opacity .8s linear 2.4s; }
.js-motion .ist-gezeichnet .schlusslogo__wort { clip-path: inset(0 0 0 0); transition: clip-path 1.5s var(--ease) 2s; }
.ohne-bewegung .schlusslogo__haus { fill-opacity: 1 !important; stroke: none !important; }
.ohne-bewegung .schlusslogo__wort { clip-path: none !important; }
.rundgang__knopf .rundgang__ring { width: 100%; height: 100%; color: inherit; }
.fuss__marke .schlusslogo { width: min(100%, 680px); }
.rundgang__ring text { letter-spacing: 0; font-size: 11px; }

/* Korrekturen 2: Schlusslogo feiner (zwei Flächen nacheinander, Fläche steigt auf, Gold-Kante führt den Schriftzug); 360°-Knopf mit Luft */
.fuss__marke { flex-direction: column; align-items: center; gap: clamp(14px, 1.6vw, 22px); }
.schlusslogo__flaeche { fill: currentColor; }
.schlusslogo__haus { fill: none; }
.schlusslogo__kante { fill: var(--gold); opacity: 0; }
.schlusslogo__zeile { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--text-2); }
.js-motion .schlusslogo__haus { vector-effect: none; stroke-width: .3; }
.js-motion .schlusslogo__flaeche { clip-path: inset(100% 0 0 0); }
.js-motion .schlusslogo__zeile { opacity: 0; transform: translateY(6px); }
/* Logo (Milad 14.10.: kürzer, hochwertiger): der Faden zieht die Kontur in einem Zug, die Fläche steigt von unten nach,
   die Wortmarke folgt mit der Lichtkante – zusammen rund 1,7 s (Milad: 1,5–1,8 s), ohne Moment mit leerem Umriss */
.js-motion .ist-gezeichnet .schlusslogo__haus { stroke-dashoffset: 0; stroke-opacity: 0; transition: stroke-dashoffset 1.05s cubic-bezier(.55, 0, .25, 1), stroke-opacity .55s linear 1.25s; }
.js-motion .ist-gezeichnet .schlusslogo__flaeche { clip-path: inset(0 0 0 0); transition: clip-path .95s cubic-bezier(.6, 0, .2, 1) .4s; }
.js-motion .ist-gezeichnet .schlusslogo__wort { clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.6, 0, .2, 1) .65s; }
.js-motion .ist-gezeichnet .schlusslogo__kante { animation: kante-weg 1s cubic-bezier(.6, 0, .2, 1) .65s both, kante-licht 1s linear .65s both; }
.js-motion .ist-gezeichnet .schlusslogo__zeile { opacity: 1; transform: none; transition: opacity .6s var(--ease) 1.2s, transform .6s var(--ease) 1.2s; }
.ohne-bewegung .schlusslogo__flaeche { clip-path: none !important; }
.ohne-bewegung .schlusslogo__zeile { opacity: 1 !important; transform: none !important; }
.ohne-bewegung .schlusslogo__kante { display: none; }
.rundgang__knopf::after { inset: 17%; }
.rundgang__zahl { font-size: var(--t-zahl); }
.rundgang__unter { font-size: var(--t-label); letter-spacing: .12em; }
@media (max-width: 599px) {   /* Handy: Scheibe größer, damit „TOUR STARTEN“ nicht am inneren Kreis klebt (Milad 15.10.) */
  .rundgang__knopf { width: 196px; }
  .rundgang__unter { letter-spacing: .1em; }
}
@media (max-width: 599px) { .schlusslogo__zeile { font-size: 11.5px; letter-spacing: .14em; text-align: center; } }

/* ───────── Unterseiten: Seitenkopf mit Bild ───────── */
.seitenkopf--bild { padding-bottom: 0; }
.seitenkopf__raster { display: grid; gap: clamp(28px, 3vw, 40px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
@media (min-width: 900px) { .seitenkopf__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.seitenkopf__lead { margin-top: clamp(16px, 2vw, 24px); max-width: 32ch; color: var(--text-2); }
.ortwahl { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px;   /* gleiches Material wie die Kapseln (Kontaktwege, Antwortweg) */
  background: linear-gradient(180deg, #ecebe8, #f3f2f0);
  box-shadow: inset 0 1px 2px rgba(43, 40, 37, .09), inset 0 0 0 1px rgba(43, 40, 37, .045), 0 1px 0 rgba(255, 255, 255, .95); }
.ortwahl a { padding: 7px 16px; border-radius: 999px; font-size: var(--t-klein); line-height: 1.4; color: var(--text-2); transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease); }
.ortwahl a[aria-current="page"] { color: var(--text); font-weight: 500; background: linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%);
  box-shadow: 0 0 0 1px rgba(43, 40, 37, .05), 0 1px 1px rgba(43, 40, 37, .05), 0 10px 22px -8px rgba(43, 40, 37, .28), inset 0 1px 0 #fff; }
@media (hover: hover) { .ortwahl a:not([aria-current]):hover { background: rgba(255, 255, 255, .6); color: var(--text); } }
.fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linie-stark); }
@media (min-width: 900px) { .fakten { justify-self: end; width: min(100%, 460px); } }
.fakten li { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--linie); }
.fakten__wert { font-size: var(--t-zahl); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
.fakten__wert small { font-size: .45em; margin-left: .2em; letter-spacing: 0; color: var(--text-2); }
.fakten__was { font-size: var(--t-notiz); color: var(--text-2); }
.fakten__zeile { grid-column: 1 / -1; flex-direction: row !important; flex-wrap: wrap; gap: 6px 18px !important; font-size: var(--t-klein); }
.fakten__zeile span { display: inline-flex; align-items: center; gap: 8px; }
.fakten__zeile span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* Herzstück: Bestandstext Wort für Wort, zwei Detailbilder, Rest des Textes */
.herz__text { font-size: var(--t-h2); line-height: 1.18; letter-spacing: -.012em; max-width: 26ch; text-wrap: balance; }
@media (min-width: 900px) { .herz__text { max-width: none; width: calc(100% / 12 * 10); } }
.herz__text .w { transition: color .25s linear; }
.js-motion .herz__text .w { color: #d9d2c8; }
.js-motion .herz__text .w.an { color: var(--text); }
.ohne-bewegung .herz__text .w { color: var(--text) !important; }
.herz__mehr { color: var(--text-2); max-width: 36ch; }

/* Ausstattung: Kennzahl und Liste */
.ausstattung { display: grid; gap: clamp(28px, 4vw, 64px); }
.ausstattung__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalte); border-top: 1px solid var(--linie-stark); }
@media (min-width: 700px) { .ausstattung__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ausstattung__liste li { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--linie); line-height: 1.3; }
.ausstattung__liste .aus__sym { flex: none; width: 32px; height: 32px; margin: 0; vertical-align: 0; }
/* „frei wählbar“ erklärt (Designprüfung C8): Antons Bestandssatz als ruhige Fußnote unter Ausstattung und Vergleich */
.ausstattung__hinweis { margin-top: 18px; max-width: 60ch; font-size: var(--t-notiz); line-height: 1.6; color: var(--text-2); }

/* Grundriss (Bestand, Vektor): Ebene für Ebene, von links nach rechts */
.grundriss { margin: 0; color: var(--gold); }
.grundriss__blatt { padding: clamp(18px, 4vw, 64px); border-radius: var(--radius); background: var(--papier); }
.grundriss__blatt img, .grundriss__blatt svg { display: block; width: 100%; height: auto; overflow: hidden; }
.grundriss .g-t { font-family: var(--f); letter-spacing: .02em; }
.grundriss figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 16px; }
.grundriss figcaption .textlink svg { width: 16px; height: 16px; color: var(--gold); }
.js-motion .grundriss.ist-inline .g-l { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-motion .grundriss.ist-inline .g-f, .js-motion .grundriss.ist-inline .g-t { opacity: 0; }
.js-motion .grundriss.ist-gezeichnet .g-l { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.45, 0, .25, 1) calc(var(--x, 0) * .55s + (var(--e, 3) - 3) * .08s); }   /* zügig: nie lange halb gezeichnet */
.js-motion .grundriss.ist-gezeichnet .g-f { opacity: 1; transition: opacity .7s var(--ease) calc(var(--x, 0) * .55s + .3s); }
.js-motion .grundriss.ist-gezeichnet .g-t { opacity: 1; transition: opacity .6s var(--ease) 1.1s; }
.ohne-bewegung .grundriss .g-l { stroke-dashoffset: 0 !important; }
.ohne-bewegung .grundriss .g-f, .ohne-bewegung .grundriss .g-t { opacity: 1 !important; }

/* Bestuhlung: Gästezahl → passende Bestuhlungen, Übergabe ins Formular */
.plaetze { display: grid; gap: clamp(32px, 4vw, 64px); margin-top: clamp(56px, 7vw, 112px); }
@media (min-width: 900px) {
  .plaetze { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .plaetze__kopf { position: sticky; top: calc(var(--kopf-h) + 32px); }
}
.plaetze__feld { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; border-bottom: 1px solid var(--linie-stark); transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
.plaetze__feld:focus-within { border-color: var(--gold); box-shadow: 0 1px 0 var(--gold); }
.plaetze__feld input { flex: 0 1 auto; width: 3.2ch; min-width: 1.4ch; max-width: 100%; field-sizing: content; padding: 2px 0 10px; border: 0; background: none; font: inherit; font-size: var(--t-zahl); font-weight: 300; line-height: 1.05; letter-spacing: -.025em; color: var(--text); -moz-appearance: textfield; appearance: textfield; }
.plaetze__feld input::-webkit-outer-spin-button, .plaetze__feld input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.plaetze__feld input { min-width: 4.2ch; }
.plaetze__feld input::placeholder { color: #cfc7bb; opacity: 1; font-size: var(--t-lead); font-weight: 400; letter-spacing: 0; }
.plaetze__feld input:focus-visible { outline: none; }
.plaetze__feld > span { font-size: var(--t-klein); color: var(--text-2); }
.plaetze__status { min-height: 3.2em; margin-top: 14px; font-size: var(--t-klein); line-height: 1.5; color: var(--gold-text); }
.plaetze__kopf .knopf { margin-top: 6px; }
.plaetze__preis { margin-top: 14px; }
.plaetze__liste { border-top: 1px solid var(--linie-stark); }
.plaetze__liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 24px; padding: 18px 0; border-bottom: 1px solid var(--linie); transition: opacity .5s var(--ease); }
@media (min-width: 700px) { .plaetze__liste li { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(5.5rem, auto); } }
.plaetze__art { line-height: 1.35; }
.plaetze__zahl { font-size: var(--t-lead); font-weight: 300; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; transition: color .5s var(--ease); }
.plaetze__zahl small { font-size: .6em; margin-left: 3px; color: var(--text-2); }
.plaetze__spur { grid-column: 1 / -1; grid-row: 2; position: relative; height: 2px; border-radius: 2px; background: var(--linie); }
@media (min-width: 700px) { .plaetze__spur { grid-column: 2; grid-row: 1; } }
.plaetze__spur i { position: absolute; inset: 0 auto 0 0; width: calc(var(--anteil, 1) * 100%); border-radius: inherit; background: var(--linie-stark); transform-origin: left; transition: transform 1.3s var(--ease) calc(var(--i, 0) * .07s), background-color .5s var(--ease); }
.js-motion .plaetze__liste:not(.ist-sichtbar) .plaetze__spur i { transform: scaleX(0); }
.plaetze__spur::after { content: ""; position: absolute; top: -9px; bottom: -9px; left: calc(var(--marke, 0) * 100%); width: 1px; background: var(--gold); opacity: 0; transition: left .7s var(--ease), opacity .4s var(--ease); }
.plaetze.hat-zahl .plaetze__spur::after { opacity: 1; }
.plaetze.hat-zahl li.passt .plaetze__spur i { background: var(--gold); }
.plaetze.hat-zahl li.passt .plaetze__zahl { color: var(--gold-text); }
.plaetze.hat-zahl li.passt-nicht { opacity: .4; }

/* Unterlagen: Raumplan, Broschüre, 360° */
.unterlagen { display: grid; gap: var(--spalte); margin-top: clamp(56px, 7vw, 112px); }
@media (min-width: 760px) { .unterlagen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.unterlage { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 18px; row-gap: 2px; width: 100%; padding: 22px 24px; border-radius: var(--radius); background: var(--papier); text-align: left; transition: background-color .5s var(--ease); }
.unterlage .ico { grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--weiss); color: var(--gold); transition: transform .6s var(--ease); }
.unterlage .ico svg { width: 18px; height: 18px; }
.unterlage__titel { font-size: var(--t-lead); line-height: 1.2; }
.unterlage small { font-size: 12.5px; color: var(--text-2); }
@media (hover: hover) { .unterlage:hover { background: #f1ece4; } .unterlage:hover .ico { transform: translateY(-2px); } }

/* Rosengarten: Satz zwischen Grundriss und Personenliste */
.netzsatz { margin-top: clamp(56px, 7vw, 112px); max-width: 24ch; }

/* ───────── Impressionen: Kopf und Kapitel (Kapitel als Bildband, siehe unten) ───────── */
.anlaesse { margin-top: clamp(20px, 2.4vw, 32px); max-width: 40ch; font-size: var(--t-lead); line-height: 1.45; font-weight: 400; color: var(--text-2); }
.seitenkopf--impressionen .ortwahl { margin-top: clamp(28px, 3vw, 40px); }
.kapitel + .kapitel { padding-top: 0; }

/* ───────── Kontaktseite ───────── */
.kontaktkopf { display: grid; gap: clamp(32px, 4vw, 56px); align-items: end; }
@media (min-width: 900px) { .kontaktkopf { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: calc(var(--spalte) * 2); } }
.kontaktkopf__text h1 { max-width: 16ch; font-size: calc(var(--t-hero) * .85); }   /* ganzer Satz: eine Stufe kleiner, damit er von 360 bis 1440 px sauber zweizeilig steht (Nachprüfung 21.10.) */
.kontaktkopf__portrait { justify-self: start; width: min(100%, 360px); }
@media (min-width: 900px) { .kontaktkopf__portrait { justify-self: end; } }
@media (max-width: 899px) {
  .kontaktkopf { gap: 24px; }
  .kontaktkopf__portrait { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; column-gap: 14px; width: 100%; max-width: none; }
  .kontaktkopf__portrait .rahmenbild { aspect-ratio: 1; border-radius: 50%; }
  .kontaktkopf__portrait figcaption { margin-top: 0; flex-direction: column; justify-content: center; gap: 2px; }
}
.kontaktseite__raster { display: grid; gap: clamp(48px, 6vw, 80px); }
@media (min-width: 1000px) {
  .kontaktseite__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalte); align-items: start; }
  .kontaktseite__wege { grid-column: 1 / span 4; position: sticky; top: calc(var(--kopf-h) + 32px); }
  .anfrage-seite { grid-column: 6 / span 7; }
}
.kontaktseite__adresse { margin: 28px 0 22px; font-style: normal; line-height: 1.6; color: var(--text-2); }
.anfrage-seite .formular { margin-top: 0; }
[data-anfrage-huelle].ist-gesendet .formular { display: none; }
[data-anfrage-huelle].ist-gesendet .danke { display: block; }
.anfrage-seite .danke { padding: clamp(28px, 4vw, 48px); border-radius: var(--radius); background: var(--papier); }

/* Anfahrt (feste Kartenansicht, Fußweg als Faden) */
.anfahrt__raster { display: grid; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 900px) { .anfahrt__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } }
/* Anfahrt: links der Plan der Region, rechts die drei Wege der Karte – Zeigen hebt die Linie hervor (kh.js) */
.anfahrt__wege { margin-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--linie-stark); }
.anfahrt__weg { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linie); -webkit-tap-highlight-color: transparent; }
.anfahrt__ort { font-size: var(--t-lead); line-height: 1.2; transition: color .35s var(--ease); }
.anfahrt__weg.ist-an .anfahrt__ort { color: var(--gold-text); }
.anfahrt__strassen { display: flex; gap: 6px; }
.anfahrt__schild { padding: 2px 7px; border-radius: 6px; background: var(--weiss); box-shadow: 0 0 0 1px rgba(43, 40, 37, .35); font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: .02em; }
.anfahrt__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(24px, 3vw, 36px); }

/* ───────── Rechtliches ───────── */
.seitenkopf--recht { padding-bottom: clamp(32px, 4vw, 56px); }
.recht__stand { margin-top: 20px; }
.recht__inhalt .label { display: block; margin-bottom: 10px; }
.recht__inhalt ol { counter-reset: n; }
.recht__inhalt li { counter-increment: n; }
.recht__inhalt a { display: grid; grid-template-columns: 2.2em 1fr; padding: 8px 0; line-height: 1.35; }
.recht__inhalt a::before { content: counter(n, decimal-leading-zero); color: var(--gold-text); font-size: var(--t-label); letter-spacing: .06em; padding-top: .2em; }
.recht__inhalt a.ist-aktiv { color: var(--text); }
@media (min-width: 1000px) { .recht__inhalt { max-height: calc(100vh - var(--kopf-h) - 56px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 12px; } }
@media (max-width: 999px) { .recht__inhalt ol { columns: 2; column-gap: var(--spalte); } .recht__inhalt li { break-inside: avoid; } }
@media (max-width: 599px) { .recht__inhalt ol { columns: 1; } }
.recht__text { font-size: var(--t-klein); line-height: 1.7; }
.recht__text h2 { padding-top: 1.4em; border-top: 1px solid var(--linie); }
.recht__text h2:first-child { padding-top: 0; border-top: 0; }
.recht__text a { overflow-wrap: anywhere; }
.recht__text li + li { margin-top: .5em; }
.recht__text li::marker { color: var(--gold); }
.recht__text ul + p { margin-top: .8em; }   /* Absatz nach einer Liste mit gleichem Abstand (A7) */

/* Impressum als Datenblatt */
.datenblatt { border-top: 1px solid var(--linie-stark); }
.datenblatt__zeile { display: grid; gap: 6px 24px; padding: clamp(20px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 800px) { .datenblatt__zeile { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.datenblatt dt { font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--text-2); padding-top: .35em; }
.datenblatt dd { margin: 0; line-height: 1.65; }
.datenblatt dd p + p { margin-top: .4em; }
.datenblatt__gross { font-size: var(--t-lead); line-height: 1.3; }
.datenblatt dd a:not(.gf-siegel) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }

/* ───────── Glanzformat-Siegel (Baustein aus Cleanpoint _bausteine/siegel.css, Fassung 2, unverändert; Kesselhaus: nur im Impressum) ───────── */
/* Glanzformat-Siegel · Fuß-Baustein (_bausteine/siegel.html, Sprite aus tools/siegel.py)
   Fassung 2 (Milad, 30.09.2026): ohne Ringschrift. Scheibe in Aubergine ohne Kontur, darin das
   Strahlenrad in Signalorange; daneben die lesbare Zeile „Website von glanzformat.de“; das Ganze ist ein Link.
   Kleiner und dezenter als Fassung 1 (56 statt 84 px).
   Der eckige Archivo-Punkt in „glanzformat.de“ wird durch einen runden ersetzt (das Zeichen bleibt im Text).
   Hell ist die Grundform (Scheibe in Aubergine), „gf-siegel--dunkel“ nutzt dieselbe Scheibe und schaltet nur die Schrift auf Weiß.
   Bewegung: Beim Zeigen dreht das Rad ruhig um 30 Grad weiter (eine Speiche), keine Schleife;
   bei reduzierter Bewegung steht es still. Glanzformat-Farben gehören nur hierher. */

.gf-siegel {
  --gf-orange: #ff5a1f;
  --gf-aubergine: #301627;
  --gf-groesse: 56px;
  --gf-scheibe: var(--gf-aubergine);
  --gf-text: var(--gf-aubergine);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  color: var(--gf-text);
  font-family: var(--schrift, "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 14px;
  font-weight: 450;
  line-height: 1.3;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.gf-siegel--dunkel {
  --gf-text: #fff;
  --fokus: #fff; /* Fokusring auf dunklem Grund weiß (3:1 nach WCAG 1.4.11) */
}

/* ---------- Scheibe ---------- */

.gf-siegel__stempel {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--gf-groesse);
  height: var(--gf-groesse);
  border-radius: 50%;
  background: var(--gf-scheibe);
}
.gf-siegel__rad {
  display: block;
  width: 60%;
  height: 60%;
  fill: var(--gf-orange);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Zeile ---------- */

.gf-siegel__text {
  min-width: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.3s ease;
}
.gf-siegel__domain { font-weight: 650; white-space: nowrap; }
/* Runder Punkt statt des eckigen Archivo-Punkts: gleiche Fläche wie das Quadrat (Archivo 650: 0,136 em),
   Mitte auf der Mitte des Quadrats. Unterlänge der Schrift 0,21 em. */
.gf-siegel__punkt { position: relative; color: transparent; }
.gf-siegel__punkt::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.2em;
  width: 0.155em;
  height: 0.155em;
  margin-left: -0.0775em;
  border-radius: 50%;
  background: var(--gf-text);
}
.gf-siegel__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Zustände ---------- */

@media (hover: hover) {
  .gf-siegel:hover .gf-siegel__rad { transform: rotate(30deg); }
  .gf-siegel:hover .gf-siegel__text { text-decoration-color: currentColor; }
}
.gf-siegel:focus-visible {
  outline: 2px solid var(--fokus, var(--rot, currentColor));
  outline-offset: 4px;
  border-radius: 2px;
}
.gf-siegel:focus-visible .gf-siegel__text { text-decoration-color: currentColor; }

@media (max-width: 480px) {
  .gf-siegel { --gf-groesse: 50px; gap: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .gf-siegel__rad, .gf-siegel__text { transition: none; }
  .gf-siegel:hover .gf-siegel__rad { transform: none; }
}

/* Hoher Kontrast: Die Scheibe bekommt einen Systemrand, damit sie sichtbar bleibt; das Rad bleibt orange. */
@media (forced-colors: active) {
  .gf-siegel__stempel { background: Canvas; border: 1px solid CanvasText; }
  .gf-siegel__punkt { color: inherit; }
  .gf-siegel__punkt::after { display: none; }
}
/* Kesselhaus: Schrift des Kunden */
.gf-siegel { --schrift: var(--f); }

/* ───────── Korrekturen 3: gleichmäßige Abstände, Kontaktleiste, Ausstattung mobil zum Aufklappen ───────── */
/* Schluss-Logo: oben ohne Eigenabstand, den gibt der dunkle Fuß vor */
.fuss__marke { padding-top: 0; }
/* Seitenköpfe ohne Bild: einheitlicher Abstand zum ersten Inhalt */
.seitenkopf:not(.seitenkopf--bild), .seitenkopf--recht { padding-bottom: clamp(56px, 6vw, 96px); }
/* Ausstattung im Vergleich: mobil zum Aufklappen (ohne JavaScript immer offen) */
.vergleich__schalter { display: none; }
@media (max-width: 899px) {
  .js-motion .vergleich__schalter { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 0; border-top: 1px solid var(--linie-stark); border-bottom: 1px solid var(--linie-stark); text-align: left; transition: border-color .4s var(--ease); }
  .vergleich__schalter .label { display: block; margin-bottom: 4px; }
  .vergleich__frage { font-size: var(--t-text); line-height: 1.35; }
  .vergleich__plus { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linie-stark); }
  .vergleich__plus::before, .vergleich__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; border-radius: 1px; background: var(--gold); transform: translate(-50%, -50%); transition: transform .45s var(--ease); }
  .vergleich__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
  .vergleich.ist-offen .vergleich__plus::after { transform: translate(-50%, -50%) rotate(0deg); }
  .js-motion .vergleich__inhalt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
  .js-motion .vergleich__inhalt > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .6s; }
  .js-motion .vergleich.ist-offen .vergleich__inhalt { grid-template-rows: 1fr; }
  .js-motion .vergleich.ist-offen .vergleich__inhalt > div { visibility: visible; transition: none; }
  .js-motion .vergleich.ist-offen .vergleich__schalter { border-bottom-color: transparent; }
  .js-motion .vergleich thead th { padding-top: 6px; }
}
@media (max-width: 899px) {
  .vergleich thead .label { font-size: var(--t-notiz); letter-spacing: 0; text-transform: none; font-weight: 500; }
  .vergleich td { width: 26%; }
  .js-motion .vergleich thead th:first-child .label { visibility: hidden; }
}

/* ───────── Lage: Alpen-Silhouette über dem Plan der Region ───────── */
/* Alpen-Silhouette aus Höhendaten (Blick vom Kesselhaus nach Süden) */
.alpen { margin: clamp(40px, 5vw, 80px) 0 0; }
.alpen__bild { position: relative; aspect-ratio: var(--alpen-verhaeltnis, 10 / 1); }
@media (max-width: 699px) { .alpen__bild { aspect-ratio: auto; height: 96px; } }   /* Handy: Silhouette überhöht */
.alpen__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
/* Berge als Fläche im Dunst (Milad 15.10.: zu viele Striche über der Karte) – kein Strich, die Linien gehören der Karte */
.alpen__gipfel { position: absolute; transform: translate(-50%, calc(-100% - 10px)); font-size: var(--t-notiz); letter-spacing: .08em; color: var(--text-2); white-space: nowrap; }
.alpen__quelle { margin-top: 12px; font-size: var(--t-notiz); letter-spacing: .04em; color: var(--text-2); }
.js-motion .alpen .alpen__svg { opacity: 0; transform: translateY(14px); }
.js-motion .alpen .alpen__gipfel { opacity: 0; }
.js-motion .alpen.ist-sichtbar .alpen__svg { opacity: 1; transform: none; transition: opacity 1.6s var(--ease) .1s, transform 1.8s var(--ease) .1s; }
.js-motion .alpen.ist-sichtbar .alpen__gipfel { opacity: 1; transition: opacity .9s var(--ease) 1.1s; }
.ohne-bewegung .alpen__svg { opacity: 1 !important; transform: none !important; }
.ohne-bewegung .alpen__gipfel { opacity: 1 !important; }

/* ───────── Lage: Plan der Region (Milad 14.10.2026) ─────────
   Drei goldene Linien fahren von München, Salzburg und Innsbruck über die Autobahnen zum Kesselhaus.
   Striche und Punkte in Bildschirmpixeln: calc(var(--px) * N), --px misst kh.js – auf jedem Gerät gleich kräftig.
   Schriften wachsen mit der Kartenbreite (cqi). Baustein: tools/lageplan_seite.py → src/teile/lageplan.html. */
.lp-figur { margin: 0; container-type: inline-size; }
.lp { --px: 1.38; position: relative; aspect-ratio: var(--seite, 1000 / 945); }
.lp-quelle { margin-top: 12px; font-size: var(--t-notiz); color: var(--text-2); }
.lp-quelle a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.lp-grund, .lp-oben { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }
/* Grund: Ränder weich ausgeblendet; beim Auftritt öffnet sich die Region als weicher Kreis vom Kesselhaus aus (--r, --kante) */
.lp-grund { --r: 200vmax; --kante: 0px;
  -webkit-mask-image: radial-gradient(circle at var(--kx) var(--ky), #000 calc(var(--r) - var(--kante)), transparent var(--r)), linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 88%, transparent); -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle at var(--kx) var(--ky), #000 calc(var(--r) - var(--kante)), transparent var(--r)), linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 88%, transparent); mask-composite: intersect;
}
.lp-hoehe { fill: none; stroke: var(--gold); stroke-width: calc(var(--px) * .6px); stroke-linejoin: round; opacity: .22; }
.lp-hoehe--1 { opacity: .3; } .lp-hoehe--2 { opacity: .38; } .lp-hoehe--3 { opacity: .46; }
.lp-see { fill: #e9eef0; stroke: #a9bbc0; stroke-width: calc(var(--px) * .6px); }
.lp-fluss { fill: none; stroke: #a9bbc0; stroke-width: calc(var(--px) * .75px); stroke-linecap: round; stroke-linejoin: round; }
.lp-fluss--mangfall { stroke: #8aa2a8; stroke-width: calc(var(--px) * 1.3px); }
.lp-autobahn { fill: none; stroke: #2b2825; stroke-opacity: .34; stroke-width: calc(var(--px) * .75px); stroke-linecap: round; stroke-linejoin: round; }
.lp-saum { fill: none; stroke: var(--weiss); stroke-width: calc(var(--px) * 6px); stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.lp-linie { fill: none; stroke: var(--gold); stroke-width: calc(var(--px) * 2px); stroke-linecap: round; stroke-linejoin: round; transition: opacity .4s var(--ease), stroke .4s var(--ease); }
.lp-licht { fill: var(--gold); stroke: var(--weiss); stroke-width: calc(var(--px) * 1.5px); opacity: 0; }
.lp-punkt { fill: var(--weiss); stroke: #2b2825; stroke-width: calc(var(--px) * 1.5px); transition: transform .4s var(--ease); transform-box: fill-box; transform-origin: center; }
.lp-punkt--flug { stroke: var(--gold); stroke-width: calc(var(--px) * 1.6px); }
.lp-punkt--ort { stroke: #6b645c; stroke-width: calc(var(--px) * 1.2px); }
/* Standpunkt: ein runder Punkt; bei Ankunft pulst er einmal und eine Welle klingt aus */
.lp-stand__hof { fill: rgba(148, 122, 79, .16); transform-box: fill-box; transform-origin: center; }
.lp-stand__punkt { fill: var(--gold); stroke: var(--weiss); stroke-width: calc(var(--px) * 2px); transform-box: fill-box; transform-origin: center; }
.lp-welle { fill: none; stroke: var(--gold); stroke-width: calc(var(--px) * 1px); opacity: 0; }
/* Zeichen über dem Punkt: Kessel-Logo, Name, Ort – ein Absender, frei und ohne Kasten */
.lp-zeichen { position: absolute; z-index: 3; display: grid; justify-items: center; transform: translate(-50%, calc(-100% - 16px)); pointer-events: none;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px rgba(255, 255, 255, .95)); }
.lp-zeichen__logo { width: clamp(22px, 4.2cqi, 31px); margin-bottom: clamp(6px, 1.1cqi, 9px); color: var(--text); }
.lp-zeichen__logo svg { display: block; width: 100%; height: auto; }
.lp-zeichen__name { font-size: clamp(15px, 2.9cqi, 21px); font-weight: 500; letter-spacing: -.005em; line-height: 1; color: var(--text); white-space: nowrap; }
.lp-zeichen__ort { margin-top: clamp(5px, .8cqi, 6px); padding-left: .16em; font-size: clamp(10.5px, 1.55cqi, 11.5px); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1; color: var(--gold-text); white-space: nowrap; }
/* Namen: Städte führen, Flughäfen leise in Versalien, Rosenheim zurückhaltend; weißer Lichthof gegen die Linien */
.lp-name { position: absolute; z-index: 2; display: grid; white-space: nowrap; line-height: 1.15; color: var(--text); pointer-events: none;
  text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 8px #fff, 0 0 12px #fff; }
.lp-name > span { font-size: clamp(13px, 2.35cqi, 17px); font-weight: 500; letter-spacing: .005em; transition: color .35s var(--ease); }
.lp-name--flug > span { font-size: clamp(9px, 1.5cqi, 11px); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.lp-name--ort > span { font-size: clamp(11px, 1.8cqi, 13px); font-weight: 400; color: var(--text-2); }
.lp-name--r { transform: translate(12px, -50%); }
.lp-name--l { transform: translate(calc(-100% - 12px), -50%); text-align: right; }
.lp-name--o { transform: translate(-50%, calc(-100% - 10px)); text-align: center; }
.lp-name--ur { transform: translate(-4px, 9px); }
.lp-name--ort { transform: translate(10px, -80%); }
.lp-name[data-ziel="flughafen-salzburg"] > span { white-space: normal; width: min-content; line-height: 1.2; }
.lp-name[data-linie] { pointer-events: auto; cursor: default; -webkit-tap-highlight-color: transparent; }
.lp-name[data-linie]::after { content: ""; position: absolute; inset: -12px -8px; }
.lp-name.ist-an > span { color: var(--gold-text); }
.lp-wasser { position: absolute; transform: translate(-50%, -50%); font-size: clamp(10px, 1.7cqi, 12.5px); font-style: italic; color: #7f979d; text-shadow: 0 0 3px #fff, 0 0 8px #fff; pointer-events: none; }
.lp-schild { position: absolute; transform: translate(-50%, -50%); padding: 2px 6px; border-radius: 6px; background: var(--weiss); box-shadow: 0 0 0 1px rgba(43, 40, 37, .35); font-size: 10.5px; font-weight: 500; line-height: 1.25; letter-spacing: .02em; color: var(--text); pointer-events: none; }
/* Zeigen (Name einer Stadt): ihre Linie leuchtet, die anderen treten zurück */
.lp.zeigt .lp-linie { opacity: .22; }
.lp.zeigt .lp-linie.ist-an { opacity: 1; stroke-width: calc(var(--px) * 2.8px); stroke: var(--gold-text); }
.lp.zeigt .lp-punkt.ist-an { transform: scale(1.35); }
/* Auftritt: Startzustand schon vor dem Skript (kein Aufblitzen der fertigen Karte); danach setzt kh.js jeden Moment */
.js-motion .lp:not(.laeuft) :is(.lp-grund, .lp-oben, .lp-name, .lp-schild, .lp-wasser, .lp-zeichen) { opacity: 0; }
.lp.fertig .lp-saum, .lp.fertig .lp-linie { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
@container (max-width: 600px) {   /* Flughafen Salzburg mittig unter seinen Punkt, sonst ragt er rechts hinaus */
  .lp-name[data-ziel="flughafen-salzburg"] { transform: translate(calc(-50% - 6px), 9px); text-align: center; }
}
@container (max-width: 480px) {
  .lp-wasser, .lp-schild--zweit { display: none; }
  .lp-schild { font-size: 9.5px; padding: 1px 5px; }
  .lp-name--flug > span { white-space: normal; width: min-content; line-height: 1.2; letter-spacing: .1em; }
  .lp-name[data-ziel="muenchen"] { transform: translate(-50%, calc(-100% - 9px)); text-align: center; }
  .lp-name[data-ziel="innsbruck"] { transform: translate(-4px, 6px); }
}
@container (max-width: 340px) {
  .lp-name[data-ziel="salzburg"] { transform: translate(calc(-100% + 14px), calc(-100% - 9px)); text-align: right; }
  .lp-name[data-ziel="flughafen-salzburg"] { transform: translate(calc(-100% + 8px), 9px); text-align: right; }
}
@container (max-width: 300px) { .lp-schild--a99 { display: none; } }

/* ───────── Mobile Kontaktleiste: dunkle Kapsel mit dem Kesselhaus-Gebäude aus dem Logo, Gold-Faden zeichnet die Kontur einmal nach ───────── */
@property --leiste-faden { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.leiste {
  position: fixed; z-index: 70; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 4px; width: min(calc(100% - 24px), 440px); padding: 6px;
  border-radius: 999px; color: var(--weiss);
  /* Rauchglas (Milad 19.10.: „das Dunkle frosted, bisschen schöner“): dunkel und durchscheinend, Fotos schimmern weich durch,
     oben eine feine Lichtkante und ein Hauch Glanz */
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 55%), rgba(30, 27, 24, .7);
  backdrop-filter: blur(26px) saturate(1.8) brightness(.5); -webkit-backdrop-filter: blur(26px) saturate(1.8) brightness(.5);   /* abgedunkelt: auch auf Weiß tief dunkel */
  box-shadow: 0 22px 44px -18px rgba(20, 16, 12, .55), 0 4px 12px -4px rgba(20, 16, 12, .2), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transform: translate(-50%, calc(100% + 34px)); transition: transform .75s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .leiste { background: rgba(36, 33, 30, .94); } }   /* ohne Unschärfe: wieder deckend */
.leiste.ist-da { transform: translate(-50%, 0); }
.leiste::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid #b89a63; pointer-events: none;
  -webkit-mask: conic-gradient(from -90deg, #000 var(--leiste-faden), transparent 0); mask: conic-gradient(from -90deg, #000 var(--leiste-faden), transparent 0);
  transition: --leiste-faden 1.7s cubic-bezier(.45, 0, .25, 1) .35s, opacity 1s var(--ease) 2.1s;
}
.leiste.ist-da::before { --leiste-faden: 100%; opacity: .5; }
.leiste__anfrage { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 12px 0 6px; border-radius: 999px; color: var(--weiss); transition: background-color .3s var(--ease), transform .3s var(--ease); }
.leiste__marke { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px rgba(184, 154, 99, .7), inset 0 1px 0 rgba(255, 255, 255, .1); color: #cdb88f; }
.leiste__marke .logo-haus { display: block; height: 22px; width: auto; }
.leiste__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.leiste__was { font-size: 16px; white-space: nowrap; }   /* „Unverbindlich“ darüber ist raus (Milad 19.10.) */
.leiste__anfrage .pfeil { flex: none; margin-left: auto; width: 18px; height: 18px; color: #cdb88f; transition: transform .45s var(--ease); }
.leiste__trenner { flex: none; width: 1px; height: 28px; margin: 0 4px; background: rgba(255, 255, 255, .14); }
.leiste__rund { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--weiss); background: rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); transition: background-color .3s var(--ease), transform .3s var(--ease); }
.leiste__rund svg { width: 22px; height: 22px; stroke-width: 1.6; }
.leiste__rund:active { background: rgba(255, 255, 255, .18); transform: scale(.95); }
.leiste__anfrage:active { background: rgba(255, 255, 255, .06); transform: scale(.98); }
.leiste__anfrage:active .pfeil { transform: translateX(4px); }
.leiste a:focus-visible { outline: 2px solid #cdb88f; outline-offset: 2px; }
@media (min-width: 1100px) { .leiste { display: none; } }
@media (max-width: 359px) { .leiste__rund { width: 46px; height: 46px; } }

/* ───────── Flexible Raumaufteilung: Lageplan mit Kennzahlen ─────────
   Antons Lageplan (Bestand) zeichnet sich nach. Von der Hauptpagode und vom Kesselhaus fällt je ein
   Gold-Faden zu den Kennzahlen; die Ausstattung steht im Vergleich zum Aufklappen.
   Mobil liegt der Planinhalt (14,9–83 % der Planbreite) genau auf der Satzkante: Bäume links, Kesselhaus rechts bündig mit dem Text. */
.lageplan { --luft: clamp(36px, 3.6vw, 60px); position: relative; container-type: inline-size; }
.grundriss--start .grundriss__blatt { padding: 0; background: none; border-radius: 0; }
.lageplan__zahlen { display: grid; grid-template-columns: 42.55fr 29.45fr 28fr; margin-top: var(--luft); }
.lageplan__raum { position: relative; min-width: 0; padding-bottom: 4px; }
.lageplan__raum--rg { grid-column: 1; text-align: right; padding-right: clamp(22px, 2.2vw, 36px); }
.lageplan__raum--kh { grid-column: 3; padding-left: clamp(22px, 2.2vw, 36px); }
.lageplan__raum .label { display: block; margin: 0; }
.lageplan__zahl { margin: 14px 0 0; font-size: var(--t-zahl-gross); font-weight: 300; line-height: .9; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.lageplan__zahl small { font-size: .26em; font-weight: 400; letter-spacing: 0; margin-left: .25em; color: var(--text-2); }
.lageplan__was { margin: 14px 0 0; }
.lageplan__neben { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--linie); font-size: var(--t-klein); line-height: 1.45; color: var(--text-2); }
.lageplan__neben span { color: var(--text); font-weight: 500; margin-right: .3em; white-space: nowrap; }
.lageplan__neben { max-width: 340px; }
.lageplan__raum--rg .lageplan__neben { margin-left: auto; }
.label .m2 { text-transform: none; letter-spacing: .06em; }
/* Faden: vom Punkt im Plan bis an den Fuß der Kennzahl */
.lageplan__faden { position: absolute; width: 13px; top: calc(-1 * ((1 - var(--y)) * 100cqw / 2.645 + var(--luft))); bottom: 4px; pointer-events: none; }
.lageplan__raum--rg .lageplan__faden { right: -6.5px; }
.lageplan__raum--kh .lageplan__faden { left: -6.5px; }
.lageplan__faden::after { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--gold); transform-origin: top; }
.lageplan__faden::before { content: ""; position: absolute; z-index: 1; left: 0; top: -6.5px; width: 13px; height: 13px; border-radius: 50%; background: var(--weiss); box-shadow: 0 0 0 1.5px var(--gold) inset, 0 0 0 4px rgba(255, 255, 255, .7); transition: box-shadow .5s var(--ease); }
@media (hover: hover) { .lageplan__raum:hover .lageplan__faden::before { box-shadow: 0 0 0 4px var(--gold) inset, 0 0 0 8px rgba(148, 122, 79, .16); } }
/* Auftritt: Punkt setzt, Faden fällt, Zahl zählt hoch (Rosengarten zuerst, dann Kesselhaus) */
.lageplan__raum { --t0: .35s; }
.lageplan__raum--kh { --t0: .7s; }
.lageplan__raum > :nth-child(3) { --i: 1; } .lageplan__raum > :nth-child(4) { --i: 2; } .lageplan__raum > :nth-child(5) { --i: 3; }
.js-motion .lageplan__faden::before { opacity: 0; transform: scale(.3); transition: opacity .5s var(--ease) var(--t0), transform .8s var(--ease) var(--t0), box-shadow .5s var(--ease); }
.js-motion .lageplan__faden::after { transform: scaleY(0); transition: transform 1.2s cubic-bezier(.65, 0, .35, 1) calc(var(--t0) + .2s); }
.js-motion .lageplan__raum > :not(.lageplan__faden) { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease) calc(var(--t0) + .65s + var(--i, 0) * .09s), transform 1.1s var(--ease) calc(var(--t0) + .65s + var(--i, 0) * .09s); }
.js-motion .lageplan.ist-an .lageplan__faden::before { opacity: 1; transform: none; }
.js-motion .lageplan.ist-an .lageplan__faden::after { transform: none; }
.js-motion .lageplan.ist-an .lageplan__raum > * { opacity: 1; transform: none; }
.ohne-bewegung .lageplan__faden::before, .ohne-bewegung .lageplan__faden::after, .ohne-bewegung .lageplan__raum > * { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (max-width: 899px) {
  .grundriss--start .grundriss__blatt { margin-inline: calc(-1 * var(--rand)); overflow: hidden; }
  .grundriss--start .grundriss__blatt img, .grundriss--start .grundriss__blatt svg { width: calc((100% - 2 * var(--rand)) / .681); max-width: none; margin-left: calc(var(--rand) - (100% - 2 * var(--rand)) * .2188); }
  .grundriss--start .g-t { display: none; }
  .lageplan__zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .lageplan__raum--rg { grid-column: 1; text-align: left; padding-right: 0; }
  .lageplan__raum--kh { grid-column: 2; padding-left: 0; }
  .lageplan__raum--rg .lageplan__neben { margin-left: 0; }
  .lageplan__neben { max-width: none; }
  /* Faden mobil: Punkt im Plan (Hauptpagode 42,55 % / Kesselhaus 72 % der Planbreite) über dem Ausschnitt; Plan = Breite/.681, um 21,88 % nach links */
  .lageplan__faden { top: calc(-1 * ((1 - var(--y)) * 100cqw / .681 / 2.645 + var(--luft))); bottom: auto; height: calc((1 - var(--y)) * 100cqw / .681 / 2.645 + var(--luft) - 12px); }   /* endet über der Zeile, nie durch den Text */
  .lageplan__raum--rg .lageplan__faden { right: auto; left: calc(40.6cqw - 6.5px); }
  .lageplan__raum--kh .lageplan__faden { left: calc(33.85cqw - 9px - 6.5px); }
  .lageplan__raum .label { min-height: 2.9em; line-height: 1.45; }
  .lageplan__raum .trenner { display: none; }
  .lageplan__raum .m2 { display: block; color: var(--text-2); }
  .lageplan__zahl { margin-top: 10px; font-size: clamp(2.9rem, 1.5rem + 7vw, 4rem); }
  .lageplan__was { margin-top: 10px; font-size: var(--t-klein); line-height: 1.4; }
  .lageplan__neben { margin-top: 16px; padding-top: 12px; font-size: var(--t-notiz); }
}

/* Ausstattung im Vergleich: hier auf allen Breiten zum Aufklappen, mit Symbolen */
.vergleich--klappe { margin-top: clamp(56px, 6vw, 96px); }
.js-motion .vergleich--klappe .vergleich__schalter { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 0; border-top: 1px solid var(--linie-stark); border-bottom: 1px solid var(--linie-stark); text-align: left; cursor: pointer; transition: border-color .4s var(--ease); }
.vergleich--klappe .vergleich__schalter .label { display: block; margin-bottom: 4px; }
.vergleich--klappe .vergleich__frage { font-size: var(--t-text); line-height: 1.35; }
.vergleich--klappe .vergleich__plus { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linie-stark); transition: box-shadow .4s var(--ease), background-color .4s var(--ease); }
.vergleich--klappe .vergleich__plus::before, .vergleich--klappe .vergleich__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; border-radius: 1px; background: var(--gold); transform: translate(-50%, -50%); transition: transform .45s var(--ease); }
.vergleich--klappe .vergleich__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.vergleich--klappe.ist-offen .vergleich__plus::after { transform: translate(-50%, -50%) rotate(0deg); }
@media (hover: hover) { .vergleich--klappe .vergleich__schalter:hover .vergleich__plus { box-shadow: inset 0 0 0 1px var(--gold); background: rgba(148, 122, 79, .06); } }
.js-motion .vergleich--klappe .vergleich__inhalt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.js-motion .vergleich--klappe .vergleich__inhalt > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .7s; }
.js-motion .vergleich--klappe.ist-offen .vergleich__inhalt { grid-template-rows: 1fr; }
.js-motion .vergleich--klappe.ist-offen .vergleich__inhalt > div { visibility: visible; transition: none; }
.js-motion .vergleich--klappe.ist-offen .vergleich__schalter { border-bottom-color: transparent; }
.vergleich--klappe table { max-width: 880px; margin: 8px auto 0; }
.vergleich--klappe thead th { padding-top: 10px; }
.vergleich--klappe tbody th { white-space: nowrap; }
.vergleich .aus__sym { display: inline-block; width: 30px; height: 30px; margin-right: 14px; vertical-align: -9px; } /* Tabelle: Symbol vor dem Text (stärker als .sym) */
@media (max-width: 899px) {
  .vergleich--klappe tbody th { white-space: normal; padding-left: 44px; text-indent: -44px; }
}
/* Vergleich breit (20.10., Milad: Variante B): ab 1100 px zwei Hälften über die ganze Breite, größere Schrift und Symbole;
   darunter stehen beide Tabellen untereinander und lesen sich wie eine (zweiter Tabellenkopf ausgeblendet). */
.vergleich--breit .vergleich__tabellen { display: grid; align-items: start; gap: 0 clamp(36px, 4.5vw, 88px); margin-top: 8px; }
.vergleich--klappe.vergleich--breit table { max-width: none; margin: 0; }
@media (max-width: 1099px) { .vergleich--breit table + table thead { display: none; } }
@media (min-width: 1100px) {
  .vergleich--breit .vergleich__tabellen { grid-template-columns: 1fr 1fr; }
  .vergleich--klappe.vergleich--breit table { font-size: var(--t-text); }
  .vergleich--breit tbody th { padding-block: 19px; }
  .vergleich--breit .aus__sym { width: 36px; height: 36px; margin-right: 16px; vertical-align: -11px; }
  .vergleich--breit .ja { width: 10px; height: 10px; }
}

/* ───────── WhatsApp: eigener, direkter Weg – mit Zeichen statt zweiter Nummer, in den Farben der Seite (Gold) ───────── */
:root { --wa: var(--gold); }
.wa__logo { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--wa); color: var(--weiss); }
.wa__logo svg { width: 22px; height: 22px; stroke-width: 1.6; }
.weg-zeile .ico--wa { background: var(--wa); color: var(--weiss); box-shadow: none; }
.weg-zeile .ico--wa svg { width: 18px; height: 18px; stroke-width: 1.6; }
.leiste__rund--wa { color: #cdb88f; }
/* Symbole im Kreis der Kontaktzeilen: Farbe vom Kreis, kein Mitlaufen mit dem Pfeil */
.weg-zeile .ico .pfeil { color: inherit; }
@media (hover: hover) { a.weg-zeile:hover .ico .pfeil { transform: none; } }

/* ───────── Kapsel: eine Form für jede Wahl zwischen Anruf, WhatsApp und E-Mail (Fassung „Glas“) ─────────
   Eingelassene Rille in neutralem Hellgrau, darin ein Glas-Schieber mit Lichtkante. Beim Wechsel eilt die
   führende Kante voraus und die hintere zieht nach (Richtung setzt kh.js als data-richtung). Das gewählte
   Symbol reagiert kurz: Telefon klingelt, Blase ploppt, Umschlag hebt sich. Direktwege: Schieber folgt am
   Desktop dem Zeiger. Antwortweg: Position ohne Skript über :has(). */
.kapsel {
  --pos: 0; position: relative; isolation: isolate; display: flex; gap: 0; margin: 20px 0 8px; padding: 4px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #ecebe8, #f3f2f0);
  box-shadow: inset 0 1px 2px rgba(43, 40, 37, .09), inset 0 0 0 1px rgba(43, 40, 37, .045), 0 1px 0 rgba(255, 255, 255, .95);
}
.wahl.kapsel { --pos: 2; margin: 12px 0 0; }
.kapsel:has(.kapsel__teil:nth-child(1) input:checked) { --pos: 0; }
.kapsel:has(.kapsel__teil:nth-child(2) input:checked) { --pos: 1; }
.kapsel:has(.kapsel__teil:nth-child(3) input:checked) { --pos: 2; }
.kapsel__schieber {
  position: absolute; z-index: 1; top: 4px; bottom: 4px; border-radius: 999px; pointer-events: none;
  left: calc(4px + var(--pos) * (100% - 8px) / 3); right: calc(4px + (2 - var(--pos)) * (100% - 8px) / 3);
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%);
  box-shadow: 0 0 0 1px rgba(43, 40, 37, .05), 0 1px 1px rgba(43, 40, 37, .05), 0 10px 22px -8px rgba(43, 40, 37, .28), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(43, 40, 37, .03);
  transition: left .5s var(--ease), right .5s var(--ease), opacity .35s var(--ease);
}
.kapsel__schieber::after { content: ""; position: absolute; inset: 1px 12% auto; height: 46%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); }
.kapsel[data-richtung="r"] .kapsel__schieber { transition: right .34s cubic-bezier(.4, 0, .2, 1), left .6s cubic-bezier(.65, 0, .2, 1) .05s, opacity .35s var(--ease); }
.kapsel[data-richtung="l"] .kapsel__schieber { transition: left .34s cubic-bezier(.4, 0, .2, 1), right .6s cubic-bezier(.65, 0, .2, 1) .05s, opacity .35s var(--ease); }
.kapsel.springt .kapsel__schieber { transition: opacity .35s var(--ease) !important; }
.schnellwege.kapsel .kapsel__schieber { opacity: 0; }
@media (hover: hover) {
  .schnellwege.kapsel:has(.kapsel__teil:hover) .kapsel__schieber { opacity: 1; }
  .schnellwege.kapsel:has(.kapsel__teil:nth-child(1):hover) { --pos: 0; }
  .schnellwege.kapsel:has(.kapsel__teil:nth-child(2):hover) { --pos: 1; }
  .schnellwege.kapsel:has(.kapsel__teil:nth-child(3):hover) { --pos: 2; }
  .kapsel a.kapsel__teil:hover { color: var(--text); font-weight: 500; }
  .kapsel a.kapsel__teil:hover svg { color: var(--gold); }
}
.kapsel .kapsel__teil { position: relative; z-index: 2; flex: 1 1 0; min-width: 0; display: flex; margin: 0; }
.kapsel a.kapsel__teil, .kapsel .kapsel__teil > input + span {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 6px;
  border-radius: 999px; font-size: var(--t-klein); line-height: 1; white-space: nowrap; color: var(--text-2); transition: color .35s var(--ease);
}
.kapsel .kapsel__teil svg { flex: none; width: 18px; height: 18px; color: var(--text-2); transition: color .35s var(--ease); }
.kapsel .wa__logo { display: contents; }
.kapsel .wa__logo svg, .kapsel .kapsel__teil > input:checked + span svg { color: var(--gold); }
.kapsel .kapsel__teil > input { position: absolute; inset: 0; z-index: 3; opacity: 0; margin: 0; cursor: pointer; }
.kapsel .kapsel__teil > input:checked + span { color: var(--text); font-weight: 500; }
.kapsel a.kapsel__teil:active { color: var(--text); }
.kapsel a.kapsel__teil:focus-visible, .kapsel .kapsel__teil > input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: -2px; }
/* Symbole reagieren beim Wählen bzw. Zeigen */
@keyframes kapsel-klingeln { 0%, 100% { transform: rotate(0); } 18% { transform: rotate(-14deg); } 36% { transform: rotate(11deg); } 54% { transform: rotate(-7deg); } 72% { transform: rotate(3deg); } }
@keyframes kapsel-ploppen { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.2); } }
@keyframes kapsel-heben { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-3px); } }
.kapsel .kapsel__teil > input:checked + span svg { animation: .7s var(--ease) both; }
.kapsel input[value="Anruf"]:checked + span svg { animation-name: kapsel-klingeln; }
.kapsel input[value="WhatsApp"]:checked + span svg { animation-name: kapsel-ploppen; }
.kapsel input[value="E-Mail"]:checked + span svg { animation-name: kapsel-heben; }
@media (hover: hover) {
  .kapsel a.kapsel__teil:hover svg { animation: .7s var(--ease) both; }
  .kapsel a.kapsel__teil[href^="tel:"]:hover svg { animation-name: kapsel-klingeln; }
  .kapsel a.schnellweg--wa:hover svg { animation-name: kapsel-ploppen; }
  .kapsel a.kapsel__teil[href^="mailto:"]:hover svg { animation-name: kapsel-heben; }
}
@media (max-width: 359px) { .kapsel a.kapsel__teil, .kapsel .kapsel__teil > input + span { gap: 5px; padding: 0 3px; font-size: 14px; } .kapsel .kapsel__teil svg { width: 16px; height: 16px; } }
.ohne-bewegung .kapsel__schieber { transition: none !important; }
.ohne-bewegung .kapsel svg { animation: none !important; }
/* Zweitknopf WhatsApp: getönte Pille, beginnt mit dem Goldkreis (wie in Menü und Fuß) */
.knopf--wa { padding-left: 8px; }
.knopf--wa .wa__logo { width: 36px; height: 36px; }
.knopf--wa .wa__logo svg { width: 20px; height: 20px; }
/* Mobil: Haupt- und Zweitknopf untereinander in gleicher, voller Breite */
@media (max-width: 599px) { .formular__aktionen .knopf { flex: 1 1 100%; justify-content: center; } .formular__aktionen .knopf--wa { padding-right: 8px; } }

/* ───────── Seitenübergang ─────────
   Ruhige Überblendung zwischen den Seiten, Logo und Menü bleiben stehen; das Kopfbild steht beim Ankommen schon offen (kh-ankunft, unten).
   Nur beim Direktaufruf öffnet es sich einmal.
   Der Bildflug von der Raumkarte ins Kopfbild (14.10.) ist am 20.10. entfernt: Karte und Kopfbild zeigen verschiedene
   Ausschnitte bzw. Fotos, der Flug wirkte wie „Foto lädt, springt, lädt neu“. Ohne Unterstützung: normaler Seitenwechsel. */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
.kopf { view-transition-name: kh-kopf; }
.bb-weg__name, .seitenkopf--bild:has([data-kopfbild]) #seite-titel, .seitenkopf--impressionen #seite-titel { width: fit-content; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
/* Ankunft per Seitenwechsel (20.10., Video Milad: „Foto lädt, springt, lädt neu“): Kopfbild offen und Seitenkopf sichtbar,
   bevor die Überblendung beginnt – keine zweite Bewegung danach. */
.kh-ankunft [data-kopfbild] > picture, .kh-ankunft .bb[data-kopfbild] { clip-path: none !important; transition: none !important; }
.kh-ankunft [data-kopfbild] img { scale: 1 !important; transition: none !important; }
.kh-ankunft .hero__anim { opacity: 1 !important; transform: none !important; transition: none !important; }
/* Kontakt: Antons Porträt im Seitenkopf gilt als Kopfbild, steht beim Ankommen also auch schon offen (Abschlussprüfung #1) */
.kh-ankunft .seitenkopf [data-oeffnen] > picture { clip-path: none !important; transition: none !important; }
.kh-ankunft .seitenkopf [data-oeffnen] img { scale: 1 !important; transition: none !important; }

/* ───────── Der Faden: eine Haarlinie durch die ganze Seite (kh.js „Der Faden“) ───────── */
.garn { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; }
.garn line { stroke: var(--gold); stroke-width: 1.25; stroke-linecap: round; }
.garn__knoten { fill: var(--gold); }
@media print { .garn { display: none; } }

/* ───────── Bildband (Milad 15.10.2026: „jetzt haben wir es“) ─────────
   Fotos wie die Doppelseiten eines Bildbands: randlos über die volle Breite, Kante an Kante, ohne Rundung.
   Rhythmus: breit · Paar (Detail + Totale) · Komposition (ein hohes + zwei). Fotos mit Namen sind Wegweiser (Location, Weiter).
   Text, Infos, Faden und Kontakt stehen in den weißen Pausen dazwischen; am Desktop läuft der Faden hinter den Fotos.
   Bewegung (die eine Bildbewegung der Seite): ein Block öffnet sich einmal vom Inhaltsrand zur vollen Breite – wie das Video im Hero;
   die Fotos setzen sich dabei ([data-oeffnen] img, oben).
   Ecken (Milad 15.10.): was randlos wird, ist von Anfang an eckig – Hero, Bildband, Bildflug, Großansicht. Rund bleibt nur,
   was im Inhalt steht und nie randlos wird: Porträt, Grundriss-Blatt, Kontaktkarten, Knöpfe, Kapseln, Leiste, 360°-Scheibe. */
.bb { position: relative; z-index: 3; display: block; width: 100%; margin: 0; overflow: hidden; background: var(--papier); }
.bb-feld { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--papier); text-align: left; -webkit-tap-highlight-color: transparent; }
.bb-feld picture { position: absolute; inset: 0; }
.bb-feld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); }
button.bb-feld { cursor: zoom-in; }
button.bb-feld:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.bb-voll { aspect-ratio: 16 / 9; max-height: calc(100svh - var(--kopf-h)); }
.bb-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb-paar > .bb-feld { aspect-ratio: 1; max-height: calc(100svh - var(--kopf-h)); }
.bb-komp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); height: min(64vw, calc(100svh - var(--kopf-h))); }
.bb-komp > .bb-feld--hoch { grid-row: 1 / -1; }
@media (max-width: 699px) {
  .bb-voll { aspect-ratio: 4 / 3; }
  .bb-komp { height: auto; grid-template-rows: auto; }
  .bb-komp > .bb-feld--hoch { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 5; }
  .bb-komp > .bb-feld:not(.bb-feld--hoch) { aspect-ratio: 1; }
}
.js-motion .bb[data-oeffnen] { --bb-rand: max(var(--rand), calc((100% - var(--max)) / 2 + var(--rand)));
  clip-path: inset(0 var(--bb-rand)); }
.js-motion .bb[data-oeffnen].ist-offen { clip-path: inset(0 0); transition: clip-path 1.3s cubic-bezier(.6, 0, .2, 1) var(--verz, 0s); }
.ohne-bewegung .bb[data-oeffnen] { clip-path: none !important; }

/* Weiße Pausen; ein Abschnitt, der mit einem randlosen Foto endet, stößt direkt an den nächsten Bereich */
.bb-pause { padding-block: clamp(28px, 3.6vw, 52px) clamp(48px, 6vw, 96px); }
.abschnitt--kante { padding-bottom: 0; }
.bb-einleitung { display: grid; gap: 24px 32px; padding-top: 0; padding-bottom: clamp(36px, 4.4vw, 64px); }
.bb-einleitung__satz { font-size: var(--t-lead); line-height: 1.45; max-width: 46ch; }
.bb-einleitung .h2 { margin-bottom: 18px; }
.bb-einleitung .text { max-width: 60ch; }
@media (min-width: 1000px) { .bb-einleitung { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; } .bb-einleitung__seite { justify-self: end; } }

/* Wegweiser: ein Foto mit Namen darauf führt weiter (Location, Weiter-Karten) */
.bb-weg { position: relative; display: block; overflow: hidden; color: var(--weiss); }
.bb-weg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(20,18,16,0) 46%, rgba(20,18,16,.5) 100%); }
.bb-weg__auf { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  max-width: var(--max); margin-inline: auto; padding: 0 var(--rand) clamp(26px, 4vw, 60px); pointer-events: none; }
.bb-weg__titel { display: grid; gap: 12px; min-width: 0; text-shadow: 0 1px 14px rgba(20, 18, 16, .28); }
.bb-weg__titel .label { color: rgba(255, 255, 255, .9); }
.bb-weg__name { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -.02em; font-weight: 400; text-wrap: balance; }
.bb-weg__pfeil { flex: none; display: grid; place-items: center; width: clamp(48px, 4.4vw, 64px); aspect-ratio: 1; border-radius: 50%; color: var(--weiss);
  background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42); transition: transform .5s var(--ease), background .4s var(--ease); }
.bb-weg__pfeil .pfeil { width: 20px; height: 20px; }
.bb-weg img { transition: transform 1.1s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .bb-weg:hover img { transform: scale(1.03); }
  .bb-weg:hover .bb-weg__pfeil { transform: translateX(4px); background: rgba(255, 255, 255, .26); }
}
.bb-weg:focus-visible { outline: 2px solid var(--gold); outline-offset: -6px; }

/* Startseite · 02 Location: je Raum ein Wegweiser über die volle Breite, die Infos in der Pause darunter */
.bb-raum__bild { aspect-ratio: 16 / 9; max-height: calc(100svh - var(--kopf-h)); }
@media (max-width: 899px) { .bb-raum__bild { aspect-ratio: 4 / 5; } }
.bb-raum:last-child > .bb-pause { padding-bottom: 0; }
.bb-raum__text { display: grid; gap: 22px 32px; }
.bb-raum__beschreibung { font-size: var(--t-lead); line-height: 1.45; color: var(--text-2); max-width: 40ch; }
.bb-raum__seite { display: grid; gap: 22px; align-content: end; }
.bb-raum__seite .textlink { justify-self: start; }   /* Linie so breit wie der Text, wie überall (A7) */
.bb-raum__seite .raum__fakten { margin: 0; }
@media (min-width: 1000px) { .bb-raum__text { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }

/* Startseite · 05 360°: Foto randlos, der Knopf in der Mitte · 06 Lage: Schlussbild randlos vor dem Kontakt */
@media (max-width: 899px) { .bb.rundgang__buehne, .bb-schluss { aspect-ratio: 4 / 5; } }
.bb.rundgang__buehne .bb-feld::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(20,18,16,.28), rgba(20,18,16,0) 46%); pointer-events: none; }
.bb.rundgang__buehne .rundgang__start { z-index: 2; }
.bb.rundgang__buehne + .wrap .rundgang__hinweis { margin-top: 14px; }
.bb-schluss { margin-top: clamp(64px, 8vw, 140px); }

/* Unterseiten: Kopfbild randlos (Ziel des Seitenübergangs), Fotopaar im Herzstück, Weiter als zwei Wegweiser Kante an Kante */
.bb-kopf { aspect-ratio: 2 / 1; max-height: calc(100svh - var(--kopf-h)); }
@media (max-width: 899px) { .bb-kopf { aspect-ratio: 4 / 5; } }
.herz + .bb, .wrap:has(> .herz) + .bb { margin-top: clamp(40px, 5vw, 80px); }
.bb-herz { padding-bottom: 0; }
.bb-herz .herz__mehr { max-width: 46ch; }
.bb-weiter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb-weiter > .bb-weg { aspect-ratio: 4 / 3; max-height: calc(100svh - var(--kopf-h)); }
.bb-weiter .bb-weg__name { font-size: var(--t-h2); line-height: 1.1; }
.bb-weiter .bb-weg__auf { padding: 0 clamp(20px, 3vw, 44px) clamp(22px, 3vw, 40px); }
@media (max-width: 699px) { .bb-weiter { grid-template-columns: minmax(0, 1fr); } }

/* ───────── Tippflächen am Handy mindestens 44 px (Designprüfung 16.10., A8) ─────────
   Die Fläche wird unsichtbar größer; Schrift, Kapseln und Linien bleiben, wie sie sind. */
@media (pointer: coarse) {
  .ortwahl a { position: relative; }
  .ortwahl a::after { content: ""; position: absolute; inset: -6px 0; }
  .fuss__spalten li > a, .fuss__knopf { min-height: 44px; }
  .fuss__unten nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .textlink { min-height: 44px; }
  .zurueck { min-height: 44px; }
  .check { min-height: 44px; }
}

/* ───────── Impressionen · Fotos zuerst (Designprüfung 16.10., B1) ─────────
   Kopfbild im ersten Bildschirm; am Handy stehen die Fotos direkt unter der Kapitelüberschrift, Text und Knopf folgen danach */
.seitenkopf--impressionen .bb-kopf { margin-top: clamp(40px, 5vw, 72px); }
@media (max-width: 899px) {
  .seitenkopf--impressionen .anlaesse { font-size: var(--t-text); }
  .seitenkopf--impressionen .ortwahl { display: none; }
  .kapitel { display: flex; flex-direction: column; }
  .kapitel > .wrap, .kapitel .bb-einleitung, .kapitel .bb-einleitung > div { display: contents; }
  .kapitel .kopfzeile { order: 1; margin-inline: var(--rand); }
  .kapitel .h2 { order: 2; margin: 0 var(--rand) 24px; }
  .kapitel .bb-wand { order: 3; }
  .kapitel .bb-einleitung .text { order: 4; margin: 28px var(--rand) 0; }
  .kapitel .bb-einleitung__seite { order: 5; margin: 24px var(--rand) 0; }
  .kapitel.abschnitt--kante { padding-bottom: clamp(56px, 8vw, 96px); }   /* endet am Handy mit dem Knopf, nicht mit einem Foto */
}

/* ───────── Raumseiten · Fotos zuerst (Designprüfung 16.10., B2) ─────────
   Handy: das Kopfbild direkt unter dem Titel, die Fakten darunter (vorher lagen sie über dem Foto) */
@media (max-width: 899px) {
  .seitenkopf--bild:not(.seitenkopf--impressionen) { display: flex; flex-direction: column; }
  .seitenkopf--bild:not(.seitenkopf--impressionen) > .wrap, .seitenkopf--bild .seitenkopf__raster { display: contents; }
  .seitenkopf--bild .seitenkopf__raster > div { order: 1; padding-inline: var(--rand); margin-bottom: 28px; }
  .seitenkopf--bild:not(.seitenkopf--impressionen) .bb-kopf { order: 2; }
  .seitenkopf--bild .fakten { order: 3; margin: 28px var(--rand) 0; }
}

/* ═════════ Awwwards-Jury 18.10.2026: Umsetzung F (Fehler), S (Signatur), G (Details) ═════════ */

/* S1 Hero: Standbild ist das Foto am Kanal; das Video blendet erst ein, wenn es läuft; Verlauf gezielt hinter dem Titel */
.hero__bild img { background-color: #8e8b84; }
.hero__video { opacity: 0; transition: opacity .9s var(--ease); }
.hero__video.laeuft { opacity: 1; }
.hero__verlauf { background:
  radial-gradient(120% 70% at 18% 100%, rgba(20, 18, 16, .42), rgba(20, 18, 16, 0) 60%),
  linear-gradient(180deg, rgba(20, 18, 16, .18) 0%, rgba(20, 18, 16, 0) 30%, rgba(20, 18, 16, 0) 48%, rgba(20, 18, 16, .62) 100%); }

/* S2 Faden: Die Nummer der Abschnittszeile wird golden, sobald der Knoten sitzt (Knoten mit Überschwingen in kh.js) */
.garn-an .kopfzeile .nr { color: var(--text-2); transition: color .32s var(--ease); }
.garn-an .kopfzeile.ist-geknuepft .nr { color: var(--gold-text); }

/* S3 Großansicht: deckender Grund; am Handy randlos (randlos = eckig); zwei Finger zoomen; Grundriss auf weißem Blatt */
.gross { background: #141210; }
.gross__bild { touch-action: pinch-zoom; }
@media (max-width: 699px) { .gross__bild { padding: 0; } .gross__bild img { width: 100%; max-height: calc(100svh - 170px); object-fit: contain; } }
.gross__bild img[src$=".svg"], .gross-flug[src$=".svg"] { background: #fff; padding: clamp(10px, 2vw, 24px); }

/* S6 Türen nach Anlass: eigene Kopfzeile als Abschluss von „Momente“, kräftigerer Verlauf für lesbare Namen */
.tueren__kopf { padding-top: clamp(64px, 8vw, 128px); }
.tueren .bb-weg::after { background: linear-gradient(180deg, rgba(20, 18, 16, 0) 34%, rgba(20, 18, 16, .6) 100%); }

/* F4 Datenschutz/Impressum: das Inhaltsverzeichnis klebt nur am Desktop (am Handy lag es über dem Text) */
@media (max-width: 999px) { .recht__inhalt { position: static; } }
/* F8 Seiten ohne Kopfbild: Überschrift sofort sichtbar, fährt nur leicht ein (sonst zählt sie erst nach 1,6 s als geladen) */
.js-motion .seitenkopf:not(:has([data-kopfbild])) h1.hero__anim { opacity: 1; }
/* F9 320 px: lange Wörter in Überschriften der Rechtsseiten trennen */
.seitenkopf--recht h1 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
/* F10 Lagekarte: Gewässernamen mit 4,6:1 statt 3,1:1 */
.lp-wasser { color: #5c777e; }

/* G2 Grundriss antippbar: öffnet in der Großansicht mit Zoom (am Handy sonst unlesbar) */
.grundriss__blatt[data-gross] { cursor: zoom-in; }
.grundriss__blatt[data-gross]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* G3 Zeiger-Details: Pfeilkreis füllt sich, Textlink-Linie zieht nach rechts weg und kommt von links, aktive Seite im Menü mit Knoten */
@keyframes linie-zurueck { 0% { background-size: 100% 1px; background-position: 100% 100%; } 45% { background-size: 0% 1px; background-position: 100% 100%; } 46% { background-size: 0% 1px; background-position: 0 100%; } 100% { background-size: 100% 1px; background-position: 0 100%; } }
@media (hover: hover) {
  .bb-weg:hover .bb-weg__pfeil { background: var(--weiss); color: var(--text); }
  .textlink:hover { background-size: 100% 1px; background-position: 0 100%; animation: linie-zurueck .7s var(--ease); }
}
.menue__liste a[aria-current] .nr::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: var(--gold); vertical-align: .15em; }

/* G4 Alpen: goldene Kammlinie mit einem Hauch Fläche, zeichnet sich einmal von links; Knoten am Wendelstein */
.alpen__kamm { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
.js-motion .alpen .alpen__svg { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
.js-motion .alpen.ist-sichtbar .alpen__svg { clip-path: inset(0 0 0 0); transition: clip-path 1.6s var(--ease-io) .1s; }
.ohne-bewegung .alpen__svg { clip-path: none !important; }
.alpen__gipfel::after { content: ""; position: absolute; left: 50%; top: calc(100% + 5px); width: 5px; height: 5px; border-radius: 50%; background: var(--gold); transform: translateX(-50%); }

/* G5 Kennzahlen: schmales Leerzeichen zur Einheit, Nebenzeilen ohne Halbfett (die einzige fette Stelle der Seite) */
.lageplan__zahl small, .fakten__wert small { margin-left: .12em; }
.lageplan__neben span { font-weight: 400; }

/* G6 Kapazitätsliste: die Zeilenlinie ist die Spur, darauf der Anteil in Gold (statt grauem Balken plus Trennlinie) */
.plaetze__liste li { border-bottom: 0; padding-bottom: 0; }
.plaetze__spur { height: 1px; border-radius: 0; background: var(--linie); margin-top: 6px; }
.plaetze__spur i { top: -1px; bottom: auto; height: 2px; background: var(--gold); }

/* G8 Startseite 02 · Location: Kennzahlen wie im Seitenkopf der Raumseiten */
.bb-raum__seite .fakten { width: 100%; justify-self: stretch; }

/* G12 Fuß: am Handy ohne zweite Kontaktspalte, wo der Kontaktabschnitt schon steht; Logo kleiner; weniger Leerlauf davor */
.kontakt { padding-bottom: calc(var(--abschnitt) / 2); }
@media (max-width: 699px) {
  main:has(.kontakt) ~ .fuss .fuss__gruppe--kontakt { display: none; }
  main:has(.kontakt) ~ .fuss .fuss__spalten { grid-template-areas: "location folgen" "downloads downloads"; }
  .fuss__marke .schlusslogo { width: min(62%, 300px); }
}

/* ───────── Symbole (Ausstattung, 20.10.): gebaut wie das Logo – dunkle Flächen mit Fuge + genau ein goldenes Teil.
   Das goldene Teil bewegt sich einmal beim Auftritt der Zeile (auch am Handy) und beim Zeigen (nur mit Maus). ───────── */
.sym { display: block; flex: none; overflow: visible; }
.sym .s-f { fill: var(--text); }
.sym .s-g { fill: var(--gold); }
.sym .s-fs { fill: none; stroke: var(--text); stroke-linecap: round; stroke-linejoin: round; }
.sym .s-gs { fill: none; stroke: var(--gold); stroke-linecap: round; stroke-linejoin: round; }
.sym * { transition: transform .7s var(--ease), fill .35s ease, opacity .5s ease; }
.sym--licht .s-rollo { transform-origin: 16px 3px; transform: scaleY(.365); }
.sym--klima .s-merk { transform-origin: 11.5px 23.5px; }
.sym--garderobe .s-b { transform-origin: 16px 4px; }
.sym--garten .s-pl { transform-origin: 15.5px 25px; }
.sym--garten .s-pr { transform-origin: 16.5px 25px; }
.sym--wetter .s-b { transition: transform .7s var(--ease-io), opacity .5s ease .2s; }
@media (hover: hover) {
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--catering .s-b { transform: translateY(-2.6px); }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--technik .s-k1 { transform: translateY(-8px); }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--technik .s-k2 { transform: translateY(9px); }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--technik .s-k3 { transform: translateY(8px); }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--internet .s-w1 { fill: var(--gold); transition-delay: 0s; }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--internet .s-w2 { fill: var(--gold); transition-delay: .12s; }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--internet .s-w3 { fill: var(--gold); transition-delay: .24s; }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--barrierefrei .s-b { transform: translateX(1.6px); }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--wetter .s-t1 { transform: translate(-3px, 6px); opacity: 0; }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--wetter .s-t2 { transform: translate(3px, 6px); opacity: 0; }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--licht .s-rollo { transform: scaleY(.66); }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--klima .s-merk { transform: scaleY(1.55); }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--klima .s-b { transform: translateX(1.5px); }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--garderobe .s-b { transform: rotate(-6deg); }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--counter .s-b { transform: translateY(-2.4px); }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--bar .s-b { transform: translate(-1px, 2.6px); }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--aussenbar .s-b { transform: translateY(-2.6px); }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--garten .s-pl { transform: rotate(-10deg); }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--garten .s-pr { transform: rotate(10deg); }
  :is(.ausstattung__liste li, .vergleich tbody tr):hover .sym--garten .s-b { transform: translateY(-1.6px); }
}
.sym .s-w { fill: var(--weiss); }   /* Aussparung (Kamera-Objektiv) */
/* 360°-Siegel: Kamera über „360°“; beim Zeigen schließt und öffnet sich das Objektiv einmal wie eine Blende */
.rundgang__knopf .rundgang__kamera { position: relative; width: 32px; height: 32px; margin-bottom: 2px; }
/* Mit Kamera ist der Inhalt höher: Scheibe ab 600 px mindestens 212 px (vorher 168 px, „TOUR STARTEN“ berührte dort schon den Kreis),
   Inhalt etwas nach oben, weil die Textzeile unten am breitesten ist. Gemessen: überall ≥ 8 px Luft zum inneren Kreis. */
.rundgang__knopf { width: clamp(212px, 15vw, 228px); padding-bottom: 26px; }
@media (max-width: 599px) { .rundgang__knopf { width: 196px; padding-bottom: 22px; } .rundgang__knopf .rundgang__kamera { width: 30px; height: 30px; margin-bottom: 0; } }
.sym--kamera .s-b { transform-origin: 16px 18.5px; }
@media (hover: hover) { .rundgang__knopf:hover .sym--kamera .s-b { animation: s-blende .75s var(--ease); } }
@keyframes s-blende { 0% { transform: scale(1); } 35% { transform: scale(.45); } 100% { transform: scale(1); } }
@keyframes s-ein { from { transform: var(--s-von); opacity: var(--s-op, 1); } }
@keyframes s-ein-gold { from { fill: var(--gold); } }
.sym--catering .s-b { --s-von: translateY(-3px); }
.sym--technik .s-k1 { --s-von: translateY(-8px); }
.sym--technik .s-k2 { --s-von: translateY(9px); }
.sym--technik .s-k3 { --s-von: translateY(8px); }
.sym--barrierefrei .s-b { --s-von: translateX(-2.5px); }
.sym--wetter .s-b { --s-von: translateY(-5px); --s-op: 0; }
.sym--licht .s-rollo { --s-von: scaleY(.7); }
.sym--klima .s-merk { --s-von: scaleY(.55); }
.sym--klima .s-b { --s-von: translateX(-2px); --s-op: 0; }
.sym--garderobe .s-b { --s-von: rotate(-8deg); }
.sym--counter .s-b { --s-von: translateY(-3px); }
.sym--bar .s-b { --s-von: translate(-1px, 2.6px); }
.sym--aussenbar .s-b { --s-von: translateY(4px); }
.sym--garten .s-b { --s-von: translateY(4px); }
.js-motion .ausstattung__liste li.ist-sichtbar .sym :is(.s-b, .s-k1, .s-k2, .s-k3, .s-rollo, .s-merk) { animation: s-ein 1.1s var(--ease) calc(var(--i, 0) * .08s + .35s) backwards; }
.js-motion .ausstattung__liste li.ist-sichtbar .sym--internet :is(.s-w1, .s-w2, .s-w3) { animation: s-ein-gold .9s ease backwards; }
.js-motion .ausstattung__liste li.ist-sichtbar .sym--internet .s-w1 { animation-delay: calc(var(--i, 0) * .08s + .35s); }
.js-motion .ausstattung__liste li.ist-sichtbar .sym--internet .s-w2 { animation-delay: calc(var(--i, 0) * .08s + .47s); }
.js-motion .ausstattung__liste li.ist-sichtbar .sym--internet .s-w3 { animation-delay: calc(var(--i, 0) * .08s + .59s); }
.ohne-bewegung .sym * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .sym * { transition: none !important; animation: none !important; } }

/* ───────── Abschlussprüfung 21.10.2026: kleine Korrekturen ───────── */
/* #16 Bildunterschrift der Großansicht: kein einzelnes Wort in der letzten Zeile */
.gross [data-unterschrift] { text-wrap: balance; }
/* #17 Kontaktleiste unter 340 px: ohne Pfeil, damit „Jetzt anfragen“ ganz Platz hat */
@media (max-width: 339px) { .leiste__anfrage .pfeil { display: none; } }
/* #23 Tippflächen am Handy: Inhaltsverzeichnis Datenschutz 44 px, Logo mit Polster ohne Verschieben */
@media (pointer: coarse) { .recht__inhalt a { min-height: 44px; align-content: center; } }
.kopf .logo { padding-block: 2px; margin-block: -2px; }
/* #24 Einheit „P.“ nie unter 12,5 px */
.plaetze__zahl small { font-size: max(.6em, 12.5px); }
/* #25 Fuß bei 320 px: „Folgen & Teilen“ einzeilig, die Spalten fluchten */
@media (max-width: 359px) { .fuss__spalten .label { letter-spacing: .1em; } }
/* Fokusrahmen der Foto-Kacheln über dem Foto statt darunter (Nebenbefund zu #13) */
button.bb-feld:focus-visible { outline: none; }
button.bb-feld:focus-visible::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 3px rgba(255, 255, 255, .6); }
/* #18 Start-Hero unter 360 px: ohne Pfeil im Knopf, damit der Pause-Knopf daneben frei steht (gleiches Muster wie die Leiste) */
@media (max-width: 359px) { .hero__aktionen .knopf--glas > svg { display: none; } }
/* #6 Anfrage-Panel am Handy (vollflächig): die Kopfzeile mit dem Schließen-Knopf bleibt beim Scrollen stehen.
   Ungescrollt liegt alles genau wie vorher (Rand oben 22 px, keine Verschiebung darunter). */
@media (max-width: 780px) {
  .panel__oben { position: sticky; top: 0; z-index: 3; margin: -22px calc(-1 * var(--rand)) -10px; padding: 22px var(--rand) 10px; background: var(--weiss); }
}
/* Nachprüfung 21.10.: der feste Panel-Kopf verdeckt beim Rückwärts-Tabben kein Feld; Fehlerfeld zeigt den Fokus golden wie alle anderen */
@media (max-width: 780px) { .panel__blatt { scroll-padding-top: 96px; } }
.feld.ist-falsch input:focus { border-bottom-color: var(--gold); }
/* Nachprüfung 21.10.: kurze, per Skript gesetzte Sätze und Namen ohne einzelnes Wort in der letzten Zeile */
.plaetze [data-status], .plaetze__verweis span, .gaestecheck__opt > span:first-child, .gaestecheck__zeile span { text-wrap: balance; }
.gaestecheck__zeile--satz { grid-template-columns: 1fr; gap: 2px; }   /* Satz unter der Angabe, nicht in schmaler Spalte (Nachprüfung 21.10.) */
@media (max-width: 359px) { .kontaktkopf__text h1 { font-size: calc(var(--t-hero) * .78); } }   /* 320 px: ebenfalls zweizeilig */

/* ───────── Veranstaltungen (Entwurf 29.10.2026) ─────────
   Nur Schrift, nie ein Plakat (Milad 29.10.). Datum wie die Fakten-Kennzahlen, Name in Lead-Größe; Monate links, Termine rechts. */
.programm__monat + .programm__monat { margin-top: clamp(12px, 1.6vw, 24px); border-top: 1px solid var(--linie-stark); }
.programm__titel { padding-top: clamp(22px, 2.2vw, 30px); }
@media (min-width: 900px) {
  .programm__monat, .termine-kurz { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--spalte); align-items: start; }
  .programm__titel { padding-top: calc(clamp(20px, 2.2vw, 30px) + .9rem); }   /* auf Höhe der Tageszahl */
}
.termin { position: relative; display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: clamp(16px, 2vw, 28px); row-gap: 16px; padding-block: clamp(20px, 2.2vw, 30px); }
.termin + .termin { border-top: 1px solid var(--linie); }
@media (min-width: 700px) { .termin { grid-template-columns: 5.5rem minmax(0, 1fr) auto; } }
.termin__datum { display: flex; flex-direction: column; gap: 8px; }
.termin__tag { font-size: var(--t-zahl); font-weight: 300; line-height: 1; letter-spacing: -.02em; color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
.termin__wtag { font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.termin__text { align-self: center; }
.termin__hinweis { margin-bottom: 8px; }
.termin__name { font-size: var(--t-lead); line-height: 1.25; font-weight: 400; letter-spacing: -.005em; text-wrap: balance; }
.termin__name a { transition: color .35s var(--ease); }
.termin__name a::after { content: ""; position: absolute; inset: 0; }   /* die ganze Zeile führt zur Seite des Termins */
@media (hover: hover) { .termin:hover .termin__name a { color: var(--gold-text); } }
.termin__zusatz { margin-top: 6px; font-size: var(--t-klein); }
.termin__info { margin-top: 4px; font-size: var(--t-klein); color: var(--text-2); font-variant-numeric: tabular-nums; }
.termin__aktion { grid-column: 2; justify-self: start; position: relative; z-index: 1; }   /* Ticket-Knopf liegt über dem Zeilen-Link */
@media (min-width: 700px) { .termin__aktion { grid-column: 3; justify-self: end; align-self: center; } }
.termin__status { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--papier); font-size: var(--t-klein); color: var(--text-2); }
.termin--abgesagt .termin__name { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--text-2); }
.programm__leer { padding-block: clamp(24px, 3vw, 40px); color: var(--text-2); }
.termine-kurz__alle { margin-bottom: 4px; }
@media (min-width: 900px) { .termine-kurz > .termine { grid-column: 2; grid-row: 1; } .termine-kurz__alle { grid-column: 1; grid-row: 1; margin: calc(clamp(20px, 2.2vw, 30px) + .6rem) 0 0; justify-self: start; } }

/* Seite je Termin */
.zurueck { display: inline-flex; align-items: center; gap: 10px; margin-bottom: clamp(24px, 3vw, 40px); font-size: var(--t-klein); color: var(--text-2); transition: color .35s var(--ease); }
.zurueck .pfeil { width: 16px; height: 16px; transition: transform .45s var(--ease); }
@media (hover: hover) { .zurueck:hover { color: var(--text); } .zurueck:hover .pfeil { transform: translateX(-4px); } }
.termin-kopf .seitenkopf__raster { margin-bottom: 0; }
.termin-kopf--lang h1 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.012em; }   /* lange Namen (über 28 Zeichen) eine Stufe kleiner: nie gigantisch (Prüfrunde 29.10.) */
.termin-kopf__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(28px, 3vw, 44px); }
@media (max-width: 599px) { .termin-kopf__aktionen .knopf { flex: 1 1 100%; justify-content: center; } }   /* wie im Formular: untereinander, volle Breite */
.termin-kopf__aktionen .textlink .pfeil { width: 16px; height: 16px; }
.termin-kopf__text { margin-top: clamp(32px, 4vw, 56px); }
.fakten__breit { grid-column: 1 / -1; }
.fakten__breit > span:last-child { font-size: var(--t-klein); }
.termin-ort { display: grid; gap: 28px; }
@media (min-width: 900px) { .termin-ort { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.termin-ort__adresse { margin-top: 16px; font-style: normal; color: var(--text-2); }
.termin-ort__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
@media (min-width: 900px) { .termin-ort__wege { justify-content: flex-end; } }