/* deutscher-hof.de – Gestaltung. Nur Holger ändert diese Datei, der Web Agent nie. */

@font-face { font-family: Barlow; font-weight: 400; font-display: swap; src: url(/schrift/Barlow-Regular.woff) format("woff"); }
@font-face { font-family: Barlow; font-weight: 500; font-display: swap; src: url(/schrift/Barlow-Medium.woff) format("woff"); }
@font-face { font-family: Barlow; font-weight: 600; font-display: swap; src: url(/schrift/Barlow-SemiBold.woff) format("woff"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(/schrift/BarlowCondensed-SemiBold.woff) format("woff"); }

:root {
  --petrol-950: #04202c;
  --petrol-900: #06303f;
  --petrol-800: #0a4257;
  --petrol-700: #10566f;
  --tuerkis: #19a7b8;
  --tuerkis-hell: #7fd6df;
  /* Türkis als Schrift auf hellem Grund: 5,6:1 auf Weiß, 5,0:1 auf Sand. Das Markentürkis hat dort nur 2,9:1. */
  --tuerkis-text: #0c7280;
  --akzent: #f5b63f;
  --akzent-dunkel: #e29f1c;
  --sand: #f5f2ec;
  --weiss: #fff;
  --tinte: #14232b;
  --grau: #56666e;
  --linie: #dfe5e7;
  --breite: 76rem;
  --rand: clamp(1.25rem, 4vw, 3rem);
  --kopf-hoehe: 5.25rem;
  --radius: .9rem;
  --schatten: 0 1.25rem 3rem -1.5rem rgb(4 32 44 / .45);
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 1rem); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/1.6 Barlow, system-ui, sans-serif; color: var(--tinte); background: var(--weiss); hyphens: auto; hyphenate-limit-chars: 10 4 4; }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
/* Überschriften trennen nur an gesetzten Trennstellen. Passt ein Wort trotzdem nicht in die Zeile (schmales Telefon),
   bricht es um, statt die Seite breiter zu machen als den Bildschirm. */
h1, h2, h3 { font-weight: 600; line-height: 1.12; text-wrap: balance; hyphens: manual; overflow-wrap: break-word; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); letter-spacing: -.01em; }
h3 { font-size: 1.3rem; }
p + p { margin-top: .9em; }
/* Fokus: gelber Ring und dunkler Rahmen darum. Einer von beiden hebt sich von jedem Grund ab
   (Gelb auf Weiß hätte allein nur 1,8:1). */
:focus-visible { outline: 3px solid var(--petrol-950); outline-offset: 3px; box-shadow: 0 0 0 3px var(--akzent); border-radius: 4px; }

.innen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.innen.schmal { --breite: 48rem; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; background: var(--akzent); color: var(--tinte); border-radius: .4rem; }
.sprung:focus { top: 1rem; }
.dachzeile { font: 600 .95rem/1.2 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tuerkis-text); margin-bottom: .8rem; }
.klein { font-size: .9rem; color: var(--grau); }
.luecke { background: #ffe680; color: #5a4300; padding: 0 .25em; border-radius: .2em; font-weight: 500; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .7rem 1.5rem; border: 2px solid transparent; border-radius: 99rem; font: 600 1rem/1.2 Barlow, sans-serif; letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.knopf:hover { transform: translateY(-2px); }
.knopf-haupt { background: var(--akzent); color: var(--petrol-950); }
.knopf-haupt:hover { background: var(--akzent-dunkel); }
.knopf-linie { border-color: currentColor; color: var(--weiss); background: transparent; }
.knopf-linie:hover { background: var(--weiss); color: var(--petrol-900); border-color: var(--weiss); }
.knopf-dunkel { background: var(--petrol-800); color: var(--weiss); }
.knopf-dunkel:hover { background: var(--petrol-700); }
.knopf-still { background: transparent; color: var(--petrol-800); border-color: var(--linie); }
.knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* Kopfzeile */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--petrol-900); color: var(--weiss); }
.kopf .innen { display: flex; align-items: center; gap: 1.5rem; min-height: var(--kopf-hoehe); --breite: 86rem; }
.marke { flex: none; }
.marke img { width: auto; max-width: none; height: 3.9rem; }
.kopf nav { margin-left: auto; }
.kopf nav ul { display: flex; gap: clamp(.9rem, 1.8vw, 1.9rem); }
.kopf nav a { display: block; padding: .5rem 0; font-weight: 500; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.kopf nav a:hover, .kopf nav a[aria-current] { border-color: var(--tuerkis); }
.kopf-rechts { display: flex; align-items: center; gap: 1.1rem; }
.kopf-rechts .knopf { min-height: 2.6rem; padding: .45rem 1.3rem; }
.telefon { font-weight: 500; text-decoration: none; white-space: nowrap; }
.menue-knopf { display: none; }
.sprache { display: grid; place-items: center; min-width: 2.6rem; min-height: 2.6rem; padding: 0 .5rem; border: 1px solid rgb(255 255 255 / .35); border-radius: 99rem; font: 600 .9rem/1 Barlow, sans-serif; letter-spacing: .06em; text-decoration: none; }
.sprache:hover { background: var(--weiss); color: var(--petrol-900); }

/* Bühne */
.buehne { position: relative; display: grid; align-items: end; min-height: min(46rem, calc(100svh - var(--kopf-hoehe))); color: var(--weiss); background: var(--petrol-950); isolation: isolate; }
.buehne-medien { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.buehne-medien img, .buehne-medien video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.buehne-medien video { opacity: 0; transition: opacity .8s; }
.buehne-medien video.laeuft { opacity: 1; }
/* Film anhalten: Was sich länger als fünf Sekunden von selbst bewegt, muss sich anhalten lassen. */
.film-knopf { position: absolute; right: var(--rand); bottom: 1.25rem; z-index: 2; width: 2.75rem; height: 2.75rem; border: 2px solid var(--weiss); border-radius: 50%; background: rgb(4 32 44 / .7); color: var(--weiss); cursor: pointer; }
.film-knopf::before { content: ""; position: absolute; inset: 0; margin: auto; width: .75rem; height: .9rem; border-inline: .28rem solid currentColor; }
.film-knopf[aria-pressed="true"]::before { width: 0; height: 0; border-block: .5rem solid transparent; border-inline: .8rem solid currentColor; border-right-width: 0; translate: .1rem 0; }
.film-knopf:hover { background: var(--petrol-800); }
.buehne-medien::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgb(4 32 44 / .88) 0%, rgb(4 32 44 / .6) 45%, rgb(4 32 44 / .15) 100%), linear-gradient(0deg, rgb(4 32 44 / .7), transparent 45%); }
.buehne .innen { display: grid; gap: 2.5rem; padding-block: clamp(3rem, 9vh, 6rem); }
.buehne-zweispaltig .innen { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: end; }
.buehne-text { max-width: 44rem; hyphens: manual; }
.buehne-text > p:not(.dachzeile):not(.knoepfe) { margin-top: 1.2rem; font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 36rem; color: rgb(255 255 255 / .9); }
.buehne .dachzeile { color: var(--tuerkis-hell); }
.buehne-merkmale { display: grid; gap: .2rem; padding: 1.2rem 1.4rem; background: rgb(6 48 63 / .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgb(255 255 255 / .16); border-radius: var(--radius); }
.buehne-merkmale li { display: flex; align-items: center; gap: .9rem; padding: .55rem 0; font-weight: 500; }
.buehne-merkmale li + li { border-top: 1px solid rgb(255 255 255 / .14); }
.buehne-merkmale .symbol { color: var(--tuerkis-hell); flex: none; }
.buehne:not(:has(.knopf)) { min-height: 22rem; }

/* Buchungsleiste */
.buchung { display: grid; gap: .8rem; }
.buchung-karte { padding: 1.5rem; background: var(--weiss); color: var(--tinte); border-radius: var(--radius); box-shadow: var(--schatten); }
.buchung-titel { font: 600 1.25rem/1.2 Barlow, sans-serif; color: var(--petrol-800); }
.buchung label, .felder label { display: grid; gap: .3rem; min-width: 0; }
.buchung label span, .felder label span, .feld-titel { font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
input, select, textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 3rem; padding: .6rem .8rem; font: 400 1rem/1.3 Barlow, system-ui, sans-serif; color: var(--tinte); background: var(--weiss); border: 1px solid #b9c4c8; border-radius: .5rem; }
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; min-height: 0; height: 1.25rem; padding: 0; flex: none; accent-color: var(--petrol-700); }
textarea { resize: vertical; }
.buchung .knopf { width: 100%; margin-top: .3rem; }

/* Zählerstreifen (Baustein „countdown“): Text links, Knopf rechts; am Telefon untereinander */
.zaehler { background: var(--petrol-800); color: var(--weiss); border-top: 3px solid var(--tuerkis); padding-block: 1rem; }
.zaehler .innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 2rem; }
.zaehler-text { font: 600 clamp(1.2rem, 2.4vw, 1.6rem)/1.25 Barlow, sans-serif; letter-spacing: .005em; text-wrap: balance; hyphens: manual; }
.zaehler .knopf { flex: none; }

/* Vorteile */
.vorteile { background: var(--sand); padding-block: 2.2rem; }
.vorteile .innen { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 2rem; align-items: center; }
.vorteile h2 { font-size: 1.5rem; color: var(--petrol-800); }
.vorteile ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 1.4rem 2rem; }
.vorteile li, .lage-punkte li { display: flex; gap: .9rem; align-items: flex-start; }
.vorteile .symbol, .lage-punkte .symbol { flex: none; width: 2rem; height: 2rem; color: var(--tuerkis); margin-top: .1rem; }
.vorteile strong, .lage-punkte strong { display: block; line-height: 1.25; }
.vorteile li span, .lage-punkte li span { display: block; font-size: .95rem; color: var(--grau); line-height: 1.4; margin-top: .2rem; }
/* Fünf Vorteile: Überschrift darüber, damit kein einzelner Punkt in der zweiten Reihe steht */
.vorteile .innen:has(li:nth-child(5)) { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
@media (min-width: 40rem) { .vorteile ul:has(li:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .vorteile ul:has(li:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem 1.6rem; } }

/* Karten */
.karten-bereich, .text-bild, .lage, .fragen, .stimmen, .text, .ablauf { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.karten-bereich.hell, .stimmen, .fragen { background: var(--sand); }
.bereich-kopf { max-width: 44rem; margin-bottom: 2.4rem; }
.bereich-kopf p:not(.dachzeile) { margin-top: .9rem; font-size: 1.12rem; color: var(--grau); }
.karten { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr)); }
.karte { position: relative; display: flex; flex-direction: column; background: var(--weiss); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 0 var(--linie), 0 .8rem 2rem -1.4rem rgb(4 32 44 / .35); transition: transform .3s, box-shadow .3s; }
.karte:hover { transform: translateY(-6px); box-shadow: var(--schatten); }
.karte-bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--petrol-900); }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.karte:hover .karte-bild img { transform: scale(1.05); }
.karte-text { display: flex; flex-direction: column; flex: 1; gap: .5rem; padding: 1.3rem 1.4rem 1.4rem; }
.karte h3 a { text-decoration: none; }
/* Die Linkfläche liegt über der ganzen Karte, auch über dem Pfeil (der ist selbst positioniert und läge sonst darüber). */
.karte h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.merkmale { margin-top: .4rem; font-size: .98rem; }
.merkmale li { padding: .32rem 0 .32rem 1.5rem; border-top: 1px solid var(--linie); background: linear-gradient(var(--tuerkis), var(--tuerkis)) 0 50% / .6rem 2px no-repeat; }
.karte-fuss { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 1rem; }
.preis { font: 600 1.35rem/1 Barlow, sans-serif; color: var(--petrol-800); }
.pfeil { width: 2.6rem; height: 2.6rem; margin-left: auto; border-radius: 50%; background: var(--petrol-800) linear-gradient(var(--weiss), var(--weiss)) center / .9rem 2px no-repeat; position: relative; transition: background-color .2s; }
.pfeil::after { content: ""; position: absolute; top: 50%; left: 50%; width: .5rem; height: .5rem; border: solid var(--weiss); border-width: 2px 2px 0 0; translate: -15% -50%; rotate: 45deg; }
.karte:hover .pfeil { background-color: var(--tuerkis); }
.raum-daten { display: flex; flex-wrap: wrap; gap: .5rem; }
.raum-daten span { padding: .2rem .7rem; border-radius: 99rem; background: var(--sand); font-size: .92rem; font-weight: 500; }
.bestuhlung { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr)); gap: .5rem; margin-top: .6rem; padding-top: .9rem; border-top: 1px solid var(--linie); }
.bestuhlung dt { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.bestuhlung dd { font-weight: 600; font-size: 1.15rem; color: var(--petrol-800); }

/* Text mit Bild */
.text-bild .innen, .lage .innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.text-bild.bild-links .tb-bild { order: -1; }
.tb-bild, .lage-bild { position: relative; }
.tb-bild img, .lage-bild img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); box-shadow: var(--schatten); }
.tb-bild::before, .lage-bild::before { content: ""; position: absolute; z-index: -1; inset: 1.4rem -1.4rem -1.4rem 1.4rem; border-radius: var(--radius); background: var(--tuerkis); opacity: .16; }
.text-bild.bild-links .tb-bild::before { inset: 1.4rem 1.4rem -1.4rem -1.4rem; }
.tb-text > p:not(.dachzeile), .lage-text > p:not(.dachzeile) { margin-top: 1.1rem; font-size: 1.12rem; color: var(--grau); }
.tb-text .knopf, .lage-text .knopf { margin-top: 1.8rem; }
.haken { margin-top: 1.3rem; display: grid; gap: .55rem; }
.haken li { position: relative; padding-left: 2rem; }
.haken li::before { content: ""; position: absolute; left: .15rem; top: .42em; width: .95rem; height: .5rem; border: solid var(--tuerkis); border-width: 0 0 2.5px 2.5px; rotate: -45deg; }

/* Motivband */
.motiv { position: relative; isolation: isolate; display: grid; align-items: center; min-height: min(40rem, 80svh); padding-block: 5rem; color: var(--weiss); background: var(--petrol-950); overflow: hidden; }
.motiv-bild { position: absolute; inset: 0; z-index: -1; }
.motiv-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; filter: grayscale(1) contrast(1.1) brightness(1.15); }
.motiv-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(4 32 44 / .96) 0%, rgb(6 48 63 / .8) 45%, rgb(16 86 111 / .3) 100%); mix-blend-mode: multiply; }
.motiv-bild::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(4 32 44 / .8), transparent 60%); }
.motiv .dachzeile { color: var(--tuerkis-hell); }
.motiv h2 { font: 600 clamp(3rem, 9vw, 7.5rem)/.95 "Barlow Condensed", Barlow, sans-serif; text-transform: uppercase; letter-spacing: .01em; max-width: 12ch; }
.motiv .innen > p:not(.dachzeile) { margin-top: 1.5rem; max-width: 34rem; font-size: 1.15rem; color: rgb(255 255 255 / .9); }
.motiv .knopf { margin-top: 1.8rem; }

/* Kennzahlen */
.kennzahlen { background: var(--petrol-900); color: var(--weiss); padding-block: 2.4rem; }
.kennzahlen dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: 1.5rem 2rem; }
.kennzahlen dl > div { display: flex; flex-direction: column; padding-left: 1.2rem; border-left: 2px solid var(--tuerkis); }
.kennzahlen dd { order: -1; font: 600 clamp(2.4rem, 5vw, 3.6rem)/1 "Barlow Condensed", Barlow, sans-serif; }
.kennzahlen dt { margin-top: .4rem; color: rgb(255 255 255 / .8); }

/* Gästestimmen */
.stimmen-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1.4rem; margin-top: 2.2rem; }
.stimmen-note { display: grid; align-content: center; gap: .2rem; padding: 1.6rem; border-radius: var(--radius); background: var(--petrol-800); color: var(--weiss); }
.stimmen-note .note { font: 600 3.6rem/1 "Barlow Condensed", Barlow, sans-serif; }
.stimmen-note .klein { color: rgb(255 255 255 / .75); }
.stimmen figure, .stimme-thema { display: grid; gap: .8rem; align-content: start; padding: 1.6rem; border-radius: var(--radius); background: var(--weiss); }
.sterne { display: flex; gap: .2rem; }
.sterne i { width: 1.1rem; height: 1.1rem; background: var(--akzent); clip-path: polygon(50% 0, 62% 35%, 98% 36%, 69% 58%, 80% 93%, 50% 72%, 20% 93%, 31% 58%, 2% 36%, 38% 35%); }
.stimmen figcaption { font-weight: 600; font-size: .95rem; }
.stimme-thema h3 { padding-top: .9rem; border-top: 3px solid var(--tuerkis); }
.stimme-thema p { color: var(--grau); }

/* Ablauf */
.ablauf ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 2rem; margin-top: 2.4rem; counter-reset: schritt; }
.ablauf li { counter-increment: schritt; padding-top: 1.2rem; border-top: 2px solid var(--linie); }
.ablauf li::before { content: counter(schritt, decimal-leading-zero); display: block; font: 600 2.6rem/1 "Barlow Condensed", Barlow, sans-serif; color: var(--tuerkis-text); margin-bottom: .6rem; }
.ablauf strong { display: block; font-size: 1.15rem; }
.ablauf li span { display: block; margin-top: .3rem; color: var(--grau); }

/* Tagungsanfrage */
.anfrage { background: var(--petrol-900); color: var(--weiss); padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.anfrage .innen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.anfrage-text > p:not(.dachzeile) { margin-top: 1.1rem; font-size: 1.12rem; color: rgb(255 255 255 / .85); }
.anfrage .haken li::before { border-color: var(--tuerkis-hell); }
.anfrage-formular { display: grid; gap: 1.6rem; padding: clamp(1.3rem, 3vw, 2.2rem); background: var(--weiss); color: var(--tinte); border-radius: var(--radius); box-shadow: var(--schatten); }
.anfrage-formular legend { font: 600 1.35rem/1.2 Barlow, sans-serif; margin-bottom: 1.1rem; padding: 0; }
.schritt-anzeige { display: none; }
.js .schritt-anzeige { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--grau); }
.schritt-anzeige li { padding-top: .5rem; border-top: 4px solid var(--linie); overflow: hidden; text-overflow: ellipsis; hyphens: none; }
.schritt-anzeige li.erledigt { border-color: var(--tuerkis); }
.schritt-anzeige li.aktiv { border-color: var(--petrol-800); color: var(--petrol-800); }
.wahl-liste { display: grid; gap: .6rem; }
.wahl-liste.zweier { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.wahl { display: flex; align-items: center; gap: .8rem; min-height: 3rem; padding: .6rem .9rem; border: 1px solid #b9c4c8; border-radius: .5rem; cursor: pointer; }
.wahl:has(input:checked) { border-color: var(--petrol-700); background: #eaf5f7; box-shadow: inset 0 0 0 1px var(--petrol-700); }
.wahl.einwilligung { align-items: flex-start; border: 0; padding: 0; font-size: .95rem; box-shadow: none; background: none; }
.feld-titel { margin: 1.2rem 0 .5rem; }
.feld-titel:first-of-type { margin-top: 0; }
.felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.felder .breit { grid-column: 1 / -1; }
.wahl-liste + .felder { margin-top: 1rem; }
.anfrage-knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-end; }
.anfrage-knoepfe [data-zurueck] { margin-right: auto; }
.honig { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.anfrage-erfolg { display: grid; gap: 1rem; justify-items: start; }
.anfrage-erfolg h3 { font-size: 1.6rem; color: var(--petrol-800); }
.anfrage-meldung { padding: .9rem 1.1rem; border-radius: .5rem; background: #fff4d6; color: #5a4300; }
.anfrage-meldung.gut { background: #e3f5ea; color: #14532d; }

/* Lage */
.lage-punkte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.8rem; margin-top: 1.8rem; }

/* Fragen */
.fragen details { background: var(--weiss); border-radius: .7rem; margin-top: .7rem; }
.fragen h2 { margin-bottom: 1.6rem; }
.fragen summary { position: relative; padding: 1.1rem 3.5rem 1.1rem 1.3rem; font-weight: 600; font-size: 1.1rem; cursor: pointer; list-style: none; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; position: absolute; right: 1.3rem; top: 50%; width: 1rem; height: 1rem; translate: 0 -50%; background: linear-gradient(var(--petrol-800), var(--petrol-800)) center / 100% 2px no-repeat, linear-gradient(var(--petrol-800), var(--petrol-800)) center / 2px 100% no-repeat; transition: rotate .25s; }
.fragen details[open] summary::after { rotate: 45deg; }
.fragen details > p { padding: 0 1.3rem 1.2rem; color: var(--grau); }

/* Text */
.text h1, .text h2 { margin-bottom: 1.2rem; }
.text p a { color: var(--petrol-700); }
.text h1 { font-size: clamp(2rem, 4vw, 3rem); color: var(--petrol-800); }
.rechtstext { overflow-wrap: break-word; }
.rechtstext h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 3rem 0 1rem; padding-top: 1.6rem; border-top: 1px solid var(--linie); color: var(--petrol-800); }
.rechtstext h3 { font-size: 1.2rem; margin: 2rem 0 .6rem; }
.rechtstext h4 { font-size: 1.05rem; font-weight: 600; margin: 1.4rem 0 .4rem; }
.rechtstext p { margin-top: .8em; }
.rechtstext ul { list-style: disc; padding-left: 1.3rem; margin-top: .8em; }
.rechtstext li { margin-top: .3em; }
.rechtstext a { color: var(--petrol-700); overflow-wrap: anywhere; }

/* Galerie */
.galerie { padding-block: clamp(3rem, 7vw, 5.5rem); }
.galerie h2 { margin-bottom: 2rem; }
/* YouTube-Video mit Vorschaubild: Der Rahmen hat das Format 16:9, das Bild füllt ihn. */
.video { padding-block: clamp(3rem, 7vw, 5.5rem); }
.video h2 { margin-bottom: 2rem; }
.video-rahmen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--petrol-900); box-shadow: var(--schatten); }
.video-rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-start { display: block; position: absolute; inset: 0; }
.video-start img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.video-start:hover img { transform: scale(1.03); }
.video-knopf { position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 4.5rem; translate: -50% -50%; border-radius: 50%; background: var(--akzent); box-shadow: 0 .4rem 1.4rem rgb(0 0 0 / .35); transition: background .2s, scale .2s; }
.video-knopf::after { content: ""; position: absolute; left: 54%; top: 50%; translate: -50% -50%; border-style: solid; border-width: .8rem 0 .8rem 1.35rem; border-color: transparent transparent transparent var(--petrol-950); }
.video-start:hover .video-knopf, .video-start:focus-visible .video-knopf { background: var(--akzent-dunkel); scale: 1.06; }
.video-hinweis { margin-top: .8rem; font-size: .9rem; color: var(--grau); }
.galerie-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); gap: 1rem; }
.galerie-raster a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--petrol-900); }
.galerie-raster img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.galerie-raster a:hover img { transform: scale(1.05); }

/* Bilderschau der Galerien */
html:has(.schau[open]) { overflow: hidden; }
.schau { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(4 32 44 / .97); color: var(--weiss); overflow: hidden; }
.schau:not([open]) { display: none; }
.schau::backdrop { background: rgb(4 32 44 / .97); }
.schau figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 1rem; width: 100%; height: 100%; padding: 4.5rem clamp(1rem, 7vw, 6rem) 1.4rem; }
.schau img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: .5rem; }
.schau figcaption { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: center; text-align: center; color: rgb(255 255 255 / .9); }
.schau-zahl { font-weight: 600; color: var(--tuerkis-hell); white-space: nowrap; }
.schau-knopf { position: absolute; width: 3.4rem; height: 3.4rem; padding: 0; border: 1px solid rgb(255 255 255 / .35); border-radius: 50%; background: rgb(6 48 63 / .8); color: var(--weiss); cursor: pointer; transition: background .2s, border-color .2s; }
.schau-knopf:hover { background: var(--tuerkis); border-color: var(--tuerkis); }
.schau-knopf::before, .schau-knopf::after { content: ""; position: absolute; top: 50%; left: 50%; }
.schau-zurueck, .schau-vor { top: 50%; translate: 0 -50%; }
.schau-zurueck { left: clamp(.5rem, 2vw, 2rem); }
.schau-vor { right: clamp(.5rem, 2vw, 2rem); }
/* Pfeile und Kreuz sind gezeichnet, nicht als Schriftzeichen gesetzt. */
.schau-zurueck::before, .schau-vor::before { width: .85rem; height: .85rem; border: solid currentColor; border-width: 3px 3px 0 0; }
.schau-vor::before { translate: -70% -50%; rotate: 45deg; }
.schau-zurueck::before { translate: -30% -50%; rotate: -135deg; }
.schau-zu { top: 1rem; right: clamp(.5rem, 2vw, 2rem); }
.schau-zu::before, .schau-zu::after { width: 1.3rem; height: 3px; background: currentColor; translate: -50% -50%; }
.schau-zu::before { rotate: 45deg; }
.schau-zu::after { rotate: -45deg; }
.galerie-raster a, .bild-gross { cursor: zoom-in; }
.bild-gross { display: block; height: 100%; border-radius: var(--radius); }
@media (max-width: 40rem) {
  .schau figure { padding: 4.5rem .5rem 1.2rem; }
  .schau-knopf { width: 2.9rem; height: 2.9rem; }
}

/* Zimmer- und Raumdetail */
.detail { padding-block: clamp(3.5rem, 8vw, 6rem); }
.detail .innen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 23rem); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.detail-text > p { margin-top: 1.1rem; font-size: 1.12rem; color: var(--grau); }
.detail-text h3 { margin-top: 2.4rem; }
.eckdaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr)); gap: 1rem; margin-top: 2rem; }
.eckdaten > div { padding: 1rem 1.1rem; border-radius: .7rem; background: var(--sand); }
.eckdaten dt { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.eckdaten dd { margin-top: .2rem; font-weight: 600; font-size: 1.15rem; color: var(--petrol-800); }
.haken.zweispaltig { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: .55rem 2rem; }
.detail-kasten { position: sticky; top: calc(var(--kopf-hoehe) + 1.5rem); display: grid; gap: 1.2rem; padding: 1.6rem; border-radius: var(--radius); background: var(--weiss); box-shadow: 0 0 0 1px var(--linie), var(--schatten); }
.detail-kasten h3 { font-size: 1.1rem; }
.detail-kasten .bestuhlung { margin-top: 0; padding-top: 0; border-top: 0; }
.detail-kasten .haken { margin-top: 0; }
.detail-preis { font: 600 2.2rem/1 Barlow, sans-serif; color: var(--petrol-800); }
.detail-preis span { display: block; margin-top: .4rem; font-size: .9rem; font-weight: 400; color: var(--grau); }

/* Freie Karten */
.karten-frei .karte-text { gap: .6rem; }
.karten-frei .symbol { width: 2.2rem; height: 2.2rem; color: var(--tuerkis); }
.karten-frei .karte-text > p:not(.karte-fuss) { color: var(--grau); }
.karte-ruhig:hover { transform: none; box-shadow: 0 1px 0 var(--linie), 0 .8rem 2rem -1.4rem rgb(4 32 44 / .35); }
.karte-ruhig:hover .karte-bild img { transform: none; }
.karte-link { font-weight: 600; color: var(--petrol-800); }

/* Kontakt */
.kontakt { padding-block: clamp(3.5rem, 8vw, 6rem); background: var(--sand); }
.kontakt .innen { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
.kontakt-kasten { display: grid; gap: 1.1rem; align-content: center; justify-items: start; padding: clamp(1.5rem, 3vw, 2.4rem); border-radius: var(--radius); background: var(--weiss); }
.kontakt-kasten p { color: var(--grau); margin: 0; }
.kontakt address { font-style: normal; font-weight: 500; }
.kontakt-wege { display: grid; gap: .3rem; }
.kontakt-wege a { font-weight: 600; color: var(--petrol-800); }
.kontakt-bild img { width: 100%; height: 100%; min-height: 18rem; object-fit: cover; border-radius: var(--radius); }

/* Raumpläne: Etagenplan und Bestuhlungsvarianten */
.raumplan { padding-block: clamp(3.5rem, 8vw, 6rem); }
.raumplan.hell { background: var(--sand); }
.rp-etage { display: block; width: 100%; height: auto; max-width: 62rem; font-family: Barlow, system-ui, sans-serif; }
.rp-etage text { text-anchor: middle; }
.rp-saal { fill: var(--petrol-800); transition: fill .2s; }
.rp-saal-klein { fill: var(--petrol-700); }
.rp-link:hover .rp-saal, .rp-link:focus-visible .rp-saal { fill: var(--tuerkis); }
.rp-link:focus-visible { outline: none; box-shadow: none; }
.rp-link:focus-visible .rp-saal { stroke: var(--petrol-950); stroke-width: 5; }
.rp-name { fill: var(--weiss); font-size: 19px; font-weight: 600; }
.rp-zahl { fill: var(--tuerkis-hell); font-weight: 600; }
.rp-link:hover .rp-zahl, .rp-link:focus-visible .rp-zahl { fill: var(--weiss); }
.rp-klein { fill: var(--weiss); font-size: 14px; opacity: .88; }
.rp-saal-klein ~ .rp-name { font-size: 15px; }
.rp-saal-klein ~ .rp-klein { font-size: 12px; }
.rp-trennwand { stroke: var(--tuerkis-hell); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }
.rp-zone { fill: var(--sand); stroke: var(--linie); stroke-width: 2; }
.raumplan.hell .rp-zone, .raumplan.hell .rp-raum { fill: var(--weiss); }
.rp-zname { fill: var(--petrol-800); font-size: 18px; font-weight: 600; }
.rp-zklein { fill: var(--grau); font-size: 15px; }
.rp-hinweis, .rp-legende { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin-top: 1.4rem; font-size: .95rem; color: var(--grau); }
.rp-l-wand { width: 2.4rem; height: 0; border-top: 3px dotted var(--petrol-800); }
.rp-varianten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 20rem)); gap: 1.5rem; }
.rp-variante { display: grid; gap: .8rem; align-content: start; padding: 1.1rem; border-radius: var(--radius); background: var(--weiss); box-shadow: 0 0 0 1px var(--linie); }
.rp-variante svg { display: block; width: 100%; height: auto; }
.rp-raum { fill: var(--sand); stroke: var(--petrol-800); stroke-width: 1.5; }
.rp-vorn { fill: var(--tuerkis); }
.rp-tisch { fill: var(--weiss); stroke: var(--petrol-700); stroke-width: 1; }
.rp-stuhl { fill: var(--petrol-800); }
.rp-variante figcaption { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.rp-variante figcaption span { font-weight: 600; color: var(--tuerkis-text); white-space: nowrap; }
.rp-legende span { display: inline-block; margin-left: .8rem; }
.rp-legende span:first-child { margin-left: 0; }
.rp-l-vorn { width: .35rem; height: 1.1rem; border-radius: 2px; background: var(--tuerkis); }
.rp-l-stuhl { width: .6rem; height: .6rem; border-radius: 50%; background: var(--petrol-800); }
.rp-l-tisch { width: .7rem; height: 1.1rem; border-radius: 2px; border: 1px solid var(--petrol-700); background: var(--weiss); }
@media (max-width: 40rem) {
  .rp-klein, .rp-zklein { display: none; }
  .rp-name { font-size: 26px; }
  .rp-zahl { font-size: 34px; }
  .rp-saal-klein ~ .rp-name { font-size: 18px; }
  .rp-zname { font-size: 24px; }
}

/* Aufruf */
.aufruf { background: linear-gradient(120deg, var(--petrol-900), var(--petrol-700)); color: var(--weiss); padding-block: clamp(3rem, 6vw, 4.5rem); }
.aufruf .innen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: 2.5rem clamp(2rem, 6vw, 5rem); }
.aufruf .innen > div { display: grid; gap: .8rem; justify-items: start; align-content: start; }
.aufruf .innen > div + div { padding-left: clamp(0rem, 5vw, 4rem); border-left: 1px solid rgb(255 255 255 / .2); }
.aufruf h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.aufruf p { color: rgb(255 255 255 / .85); }
.aufruf .symbol { width: 2.6rem; height: 2.6rem; color: var(--tuerkis-hell); }
.aufruf .knopf { margin-top: .6rem; }

/* Fuß */
.fuss { background: var(--petrol-950); color: rgb(255 255 255 / .82); padding-top: 3.5rem; font-size: .98rem; }
.fuss .innen { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.fuss img { width: 12rem; margin-bottom: 1rem; }
.fuss h2 { font: 600 .9rem/1.2 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tuerkis-hell); margin-bottom: .9rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--weiss); text-decoration: underline; }
.fuss li { padding: .2rem 0; }
.fuss-zeile { width: min(100% - 2 * var(--rand), var(--breite)); margin: 2.5rem auto 0; padding: 1.2rem 0 1.6rem; border-top: 1px solid rgb(255 255 255 / .14); font-size: .88rem; }

/* Feste Buchungsleiste am Telefon */
.buchen-leiste { display: none; }

/* Einblenden: nur mit JavaScript und nur, wenn Bewegung erwünscht ist */
@media (prefers-reduced-motion: no-preference) {
  .js [data-ein] { opacity: 0; translate: 0 1.6rem; transition: opacity .7s, translate .7s; }
  .js [data-ein].da { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knopf, .karte, .karte-bild img { transition: none; }
}

/* Mittlere Breiten: Menü einklappen. Der Umschaltpunkt richtet sich nach der Menüleiste: Mit sechs
   Punkten passt sie auf Deutsch (die längere Fassung) ab 1185 px neben Logo, Telefon und Knöpfe, gemessen
   am 11.10.2026. Kommt ein Menüpunkt dazu, muss der Wert mitwachsen (mit sieben waren es 84rem). */
@media (max-width: 75rem) {
  .sprache { order: 3; margin-left: auto; }
  .menue-knopf { order: 4; display: grid; place-items: center; width: 3rem; height: 3rem; background: none; border: 0; color: inherit; cursor: pointer; }
  .menue-knopf i, .menue-knopf i::before, .menue-knopf i::after { display: block; width: 1.6rem; height: 2px; background: currentColor; transition: rotate .2s, translate .2s, background-color .2s; }
  .menue-knopf i { position: relative; }
  .menue-knopf i::before, .menue-knopf i::after { content: ""; position: absolute; left: 0; }
  .menue-knopf i::before { translate: 0 -.5rem; }
  .menue-knopf i::after { translate: 0 .5rem; }
  .menue-knopf[aria-expanded="true"] i { background-color: transparent; }
  .menue-knopf[aria-expanded="true"] i::before { translate: 0 0; rotate: 45deg; }
  .menue-knopf[aria-expanded="true"] i::after { translate: 0 0; rotate: -45deg; }
  .kopf .innen { flex-wrap: wrap; gap: .5rem 1rem; }
  .kopf nav { order: 5; flex: 1 1 100%; margin: 0; }
  .js .kopf nav { display: none; }
  .js .kopf nav.offen { display: block; }
  .kopf nav ul { flex-direction: column; gap: 0; padding-bottom: 1rem; }
  .kopf nav a { padding: .85rem 0; font-size: 1.15rem; border-bottom: 1px solid rgb(255 255 255 / .14); }
  .kopf-rechts { order: 2; margin-left: auto; }
  .kopf-rechts + .sprache { margin-left: 0; }
}

@media (max-width: 56rem) {
  .buehne-zweispaltig .innen, .text-bild .innen, .lage .innen, .anfrage .innen, .vorteile .innen, .detail .innen, .kontakt .innen { grid-template-columns: minmax(0, 1fr); }
  .detail-kasten { position: static; }
  .text-bild.bild-links .tb-bild { order: 0; }
  .tb-bild::before, .lage-bild::before { display: none; }
  .fuss .innen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aufruf .innen > div + div { padding-left: 0; border-left: 0; padding-top: 2.5rem; border-top: 1px solid rgb(255 255 255 / .2); }
}

@media (max-width: 40rem) {
  :root { --kopf-hoehe: 4rem; }
  .marke img { height: 2.5rem; }
  .kopf-rechts { display: none; }
  .kopf-rechts + .sprache { margin-left: auto; }
  .buehne { min-height: 0; }
  .lage-punkte, .felder { grid-template-columns: minmax(0, 1fr); }
  .fuss .innen { grid-template-columns: minmax(0, 1fr); }
  .buchen-leiste { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto 1fr; gap: .6rem; padding: .6rem var(--rand) calc(.6rem + env(safe-area-inset-bottom)); background: var(--petrol-900); box-shadow: 0 -.5rem 1.5rem rgb(4 32 44 / .3); }
  .buchen-leiste .knopf { min-height: 2.9rem; }
  body { padding-bottom: 4.6rem; }
  .schritt-anzeige li { font-size: 0; }
}

/* Telefon im Hochformat: Der Kopffilm steht als eigener Streifen im vollen Bildformat über dem Text.
   Hinter dem hohen Textblock bliebe von einem 16:9-Film nur ein schmaler senkrechter Ausschnitt. */
@media (max-width: 40rem) and (orientation: portrait) {
  .buehne:has(video) { display: block; }
  .buehne:has(video) .buehne-medien { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 9; }
  .buehne:has(video) .buehne-medien::after { background: linear-gradient(0deg, var(--petrol-950) 0%, rgb(4 32 44 / 0) 14%); }
  .buehne:has(video) .innen { padding-block: 1.5rem 3rem; }
  /* Der Knopf gehört zum Film, nicht unter den Text: oben rechts im Filmbild. */
  .film-knopf { bottom: auto; top: .75rem; right: .75rem; }
}

@media print {
  body { background: #fff; color: #000; }
  .kopf, .buchen-leiste, .buehne-medien video, .film-knopf { display: none; }
}