/* Alpenchalet Arosa — Gestaltung aus Logo (Nussbaum + Gold) und Speisekarte (Papier, Antiqua).
   Bewusst eine einzige, helle Markenfarbwelt mit dunklen Holzbändern; kein Dunkelmodus.
   Die Schrift-Platzhalter in den url()-Angaben ersetzt bauen.py durch den Pfad bzw. die eingebettete Schrift. */
@font-face { font-family: "Cinzel"; src: url("/schriften/cinzel-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/schriften/cormorant-garamond-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/schriften/cormorant-garamond-italic-latin.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/schriften/hanken-grotesk-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --walnuss: #4B2716;
  --walnuss-mitte: #3A1E10;
  --walnuss-tief: #26140A;
  --gold: #C9A050;
  --gold-hell: #E2C27E;
  --gold-text: #8A6526;
  --papier: #FAF6F0;
  --papier-2: #F2EADD;
  --weiss: #FFFDF9;
  --tinte: #2E211A;
  --leise: #66574C;
  --linie: #E3D2B8;
  --linie-dunkel: rgba(226, 194, 126, .22);
  --hell-text: #F3E7D3;
  --hell-leise: rgba(243, 231, 211, .72);
  --offen: #86C88A;
  --f-label: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-titel: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --f-text: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --rand-l: max(20px, env(safe-area-inset-left, 0px));
  --rand-r: max(20px, env(safe-area-inset-right, 0px));
  --breite: 1180px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 17px/1.65 var(--f-text); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-titel); font-weight: 500; text-wrap: balance; }
p { margin: 0 0 1em; }
.innen { max-width: var(--breite); margin: 0 auto; padding-left: var(--rand-l); padding-right: var(--rand-r); }
.eng { max-width: 820px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.springen { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--walnuss-tief); padding: 10px 14px; font-weight: 600; }
.springen:focus { top: 12px; }
[data-saison="sommer"] .nur-winter, [data-saison="winter"] .nur-sommer { display: none !important; }

/* Rubriken wie «AROSA» im Logo */
.eyebrow { font: 600 13px/1.3 var(--f-label); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-text); margin: 0; }
.dunkel .eyebrow, .held .eyebrow, .seitenkopf .eyebrow { color: var(--gold-hell); }
h2.gross { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.04; margin: 12px 0 22px; }
.lead { font-size: clamp(17px, 1.5vw, 19px); }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 2px; font: 600 14px/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.knopf-gold { background: var(--gold); color: var(--walnuss-tief); }
.knopf-gold:hover { background: var(--gold-hell); }
.knopf-hell { border-color: rgba(255, 255, 255, .75); color: #fff; }
.knopf-hell:hover { background: rgba(255, 255, 255, .14); }
.knopf-linie { border-color: var(--gold-text); color: var(--walnuss); background: transparent; }
.knopf-linie:hover { background: var(--walnuss); border-color: var(--walnuss); color: var(--hell-text); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }

/* Banner und Kopfzeile */
.banner { margin: 0; background: var(--gold); color: var(--walnuss-tief); text-align: center; font: 600 12.5px/1.3 var(--f-label); letter-spacing: .2em; text-transform: uppercase; padding: 10px var(--rand-r) 10px var(--rand-l); }
.ist-offen .banner { display: none; }
.kopf { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--walnuss-tief); color: var(--hell-text); border-bottom: 1px solid var(--linie-dunkel); }
.kopf-innen { display: flex; align-items: center; gap: 22px; min-height: 76px; }
.kopf .logo { display: block; flex: none; }
.kopf .logo img { display: block; height: 60px; width: auto; }
.hauptnav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.hauptnav a { color: var(--hell-text); text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: .02em; padding: 6px 0; border-bottom: 1px solid transparent; }
.hauptnav a:hover { color: var(--gold-hell); border-bottom-color: var(--gold); }
.sprachen { display: flex; align-items: center; gap: 2px; font: 600 12px/1 var(--f-label); letter-spacing: .1em; }
.sprachen a { color: var(--hell-leise); text-decoration: none; padding: 8px 6px; }
.sprachen a[aria-current] { color: var(--gold-hell); }
.sprachen a:hover { color: #fff; }
.kopf .knopf { min-height: 42px; padding: 0 18px; font-size: 13px; }
.menue-knopf { display: none; margin-left: auto; background: none; border: 1px solid var(--linie-dunkel); color: var(--hell-text); font: 600 13px/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; min-height: 42px; padding: 0 14px; border-radius: 2px; cursor: pointer; }
@media (max-width: 1080px) {
  .hauptnav { display: none; }
  .menue-knopf { display: inline-flex; align-items: center; margin-left: 0; }
  .sprachen { margin-left: auto; }
  .kopf.offen .hauptnav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; left: 0; right: 0; top: 100%; background: var(--walnuss-tief); padding: 8px var(--rand-r) 22px var(--rand-l); border-bottom: 1px solid var(--linie-dunkel); box-shadow: 0 18px 30px rgba(0, 0, 0, .25); }
  .kopf.offen .hauptnav a { font-size: 19px; padding: 15px 0; border-bottom: 1px solid var(--linie-dunkel); }
}
@media (max-width: 640px) {
  .kopf-innen { gap: 10px; min-height: 64px; }
  .kopf .logo img { height: 48px; }
  .kopf .knopf-gold { display: none; }
  .sprachen a { padding: 8px 4px; }
}

/* Startbild */
.held { position: relative; display: grid; align-items: end; min-height: clamp(520px, 80svh, 860px); background: var(--walnuss-tief); color: #fff; overflow: hidden; isolation: isolate; }
.held-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.held::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(24, 12, 5, .70) 0%, rgba(24, 12, 5, .42) 38%, rgba(24, 12, 5, 0) 68%),
    linear-gradient(180deg, rgba(24, 12, 5, .22) 0%, rgba(24, 12, 5, 0) 25%, rgba(24, 12, 5, 0) 62%, rgba(24, 12, 5, .45) 100%); }
@media (max-width: 700px) {
  .held::after { background: linear-gradient(180deg, rgba(24, 12, 5, .25) 0%, rgba(24, 12, 5, .10) 30%, rgba(24, 12, 5, .62) 70%, rgba(24, 12, 5, .78) 100%); }
}
.held-inhalt { width: 100%; padding-top: 120px; padding-bottom: clamp(44px, 8vh, 92px); }
.held h1 { font-size: clamp(42px, 6.4vw, 80px); line-height: 1.0; max-width: 13ch; margin: 16px 0 18px; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.held .lead { max-width: 44ch; color: rgba(255, 255, 255, .92); margin-bottom: 30px; }

/* Infoleiste */
.info { background: var(--walnuss); color: var(--hell-text); }
.info dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 32px; padding-block: 28px; }
.info dl > div { min-width: 0; }
.info dt { font: 600 11px/1.3 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hell); }
.info dd { margin: 8px 0 0; font-size: 16px; line-height: 1.5; }
.info a { color: var(--hell-text); }
.info a:hover { color: var(--gold-hell); }
.zeilen { display: grid; gap: 2px; }
.zeilen span { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 12px; }
.zeilen b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zeilen .saisonname { display: block; font-size: 13px; opacity: .75; margin-bottom: 2px; }
.status { display: inline-flex; align-items: baseline; gap: 10px; }
.status::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-hell); transform: translateY(-1px); }
.status[data-zustand="offen"]::before { background: var(--offen); box-shadow: 0 0 0 4px rgba(134, 200, 138, .22); }
@media (max-width: 920px) { .info dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .info dl { grid-template-columns: 1fr; gap: 18px; } }

/* Abschnitte */
.abschnitt { padding-block: clamp(68px, 9vw, 124px); }
.abschnitt.dunkel { background: var(--walnuss-tief); color: var(--hell-text); }
.abschnitt.sand { background: var(--papier-2); }
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 5.5vw, 80px); align-items: center; }
.zwei.umgekehrt > :first-child { order: 2; }
.zwei > * { min-width: 0; }
@media (max-width: 880px) { .zwei { grid-template-columns: 1fr; } .zwei.umgekehrt > :first-child { order: 0; } }
.foto { position: relative; isolation: isolate; margin: 0 14px 14px 0; }
.foto::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--gold); z-index: -1; }
.foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.foto figcaption { font-size: 14px; color: var(--leise); padding-top: 10px; }

/* Festtage */
.festtage { background: var(--walnuss-mitte); color: var(--hell-text); position: relative; isolation: isolate; overflow: hidden; }
.festtage-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .42; }
.festtage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(38, 20, 10, .78), rgba(38, 20, 10, .93)); }
.festtage-kopf { max-width: 640px; margin-bottom: 40px; }
.festtage-kopf p { color: var(--hell-leise); }
.anlass-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.anlass { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 28px 26px 26px; background: rgba(250, 246, 240, .06); border: 1px solid var(--linie-dunkel); border-top: 2px solid var(--gold); min-width: 0; }
.anlass time { font: 600 12px/1.3 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hell); }
.anlass h3 { font-size: 30px; line-height: 1.1; }
.anlass .tag { display: block; font-style: italic; font-size: 20px; color: var(--hell-leise); }
.anlass .details { color: var(--hell-leise); font-size: 15.5px; margin: 0; }
.anlass .knopf { justify-self: start; margin-top: 8px; }
@media (max-width: 900px) { .anlass-liste { grid-template-columns: 1fr; } }

/* Gerichte (Startseite und Speisekarte) */
.gerichte { list-style: none; margin: 0; padding: 0; }
.gericht { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 3px; padding: 17px 0; border-bottom: 1px solid var(--linie); }
.gericht:first-child { border-top: 1px solid var(--linie); }
.gericht .name { font-size: 25px; line-height: 1.2; }
.gericht .preis { font: 500 23px/1.2 var(--f-titel); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.gericht p { grid-column: 1 / -1; margin: 0; color: var(--leise); font-size: 15.5px; line-height: 1.5; }
.varianten { grid-column: 1 / -1; list-style: none; margin: 8px 0 0; padding: 0 0 0 18px; display: grid; gap: 4px; }
.varianten li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 15.5px; }
.varianten span:last-child { font: 500 20px/1.2 var(--f-titel); font-variant-numeric: lining-nums tabular-nums; }
.waehrung { text-align: right; font: 600 11px/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 10px; }

/* Raclette & Fondue */
.fondue { position: relative; display: grid; min-height: 640px; align-items: center; background: var(--walnuss-tief); isolation: isolate; }
.fondue-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.fondue-karte { background: var(--papier); padding: clamp(28px, 4vw, 52px); max-width: 540px; margin-left: auto; box-shadow: 0 30px 60px rgba(0, 0, 0, .28); }
.fondue-karte > .knopf { margin-top: 24px; }
@media (max-width: 760px) {
  .fondue { min-height: 0; display: block; padding: 0 0 56px; }
  .fondue-bild { position: static; aspect-ratio: 4 / 3; height: auto; display: block; }
  .fondue .innen { margin-top: -56px; position: relative; }
}
.hinweisbox { margin-top: 22px; background: var(--papier-2); border: 1px solid var(--linie); padding: 16px 18px; text-align: center; }
.hinweisbox h4 { font-size: 22px; margin-bottom: 2px; }
.hinweisbox p { margin: 0; color: var(--leise); font-size: 15px; }

/* Bar & Lounge */
.collage { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: end; }
.collage img { display: block; width: 100%; height: auto; object-fit: cover; }
.collage img:first-child { aspect-ratio: 4 / 3; }
.collage img:last-child { aspect-ratio: 3 / 4; }
.lounge { margin-top: 28px; padding: 20px 22px; border: 1px solid var(--linie-dunkel); display: grid; gap: 6px; }
.lounge h3 { font-size: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lounge p { margin: 0; color: var(--hell-leise); }
.bald { font: 600 11px/1 var(--f-label); letter-spacing: .18em; text-transform: uppercase; background: var(--gold); color: var(--walnuss-tief); padding: 7px 10px 6px; border-radius: 99px; }
.dunkel p { color: var(--hell-leise); }

/* Anlässe */
.listen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 28px 0 32px; }
.listen h3 { font-size: 22px; margin-bottom: 10px; }
.listen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.listen li { padding-left: 22px; position: relative; }
.listen li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--gold-text); }
@media (max-width: 560px) { .listen { grid-template-columns: 1fr; } }

/* Livestream: lädt erst nach Klick */
.live-rahmen { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--walnuss-tief); display: grid; place-items: center; overflow: hidden; isolation: isolate; color: #fff; text-align: center; }
.live-rahmen .live-vorschau { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; z-index: -1; }
.live-rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-mitte { display: grid; justify-items: center; gap: 14px; padding: 20px; font: 500 22px/1.3 var(--f-titel); }
.live-marke { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--f-label); letter-spacing: .2em; text-transform: uppercase; background: rgba(0, 0, 0, .45); padding: 8px 12px; border-radius: 99px; }
.live-marke::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E0483A; }
.live-hinweis { margin: 12px 0 0; font-size: 14px; color: var(--leise); }

/* Anfrage */
.anfrage-raster { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .anfrage-raster { grid-template-columns: 1fr; } }
.felder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 16px; }
.feld { grid-column: span 6; min-width: 0; }
.feld.s2 { grid-column: span 2; }
.feld.s3 { grid-column: span 3; }
@media (max-width: 600px) { .feld.s2, .feld.s3 { grid-column: span 6; } .feld.s2.halb { grid-column: span 3; } }
.feld label { display: block; font: 600 12.5px/1.3 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin-bottom: 7px; }
.feld input, .feld select, .feld textarea { width: 100%; font: 400 16px/1.4 var(--f-text); color: var(--tinte); background: var(--weiss); border: 1px solid #CDB894; border-radius: 2px; padding: 12px 14px; min-height: 48px; }
.feld textarea { min-height: 120px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold-text); }
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formfuss { grid-column: span 6; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.formfuss p { margin: 0; font-size: 14px; color: var(--leise); flex: 1 1 260px; }
.fondue-hinweis { grid-column: span 6; margin: 0; font-size: 15px; background: var(--weiss); border-left: 3px solid var(--gold); padding: 10px 14px; }
.meldung { grid-column: span 6; margin: 0; padding: 14px 16px; border-left: 3px solid var(--gold); background: var(--weiss); }
.meldung[data-art="ok"] { border-color: #4E8A55; }
.meldung[data-art="fehler"] { border-color: #A8463A; }
.direkt { background: var(--weiss); border: 1px solid var(--linie); padding: 26px; display: grid; gap: 14px; }
.direkt h3 { font-size: 26px; }
.direkt p { margin: 0; }
.direkt .gross-link { font: 500 26px/1.2 var(--f-titel); text-decoration: none; color: var(--walnuss); font-variant-numeric: lining-nums; }
.direkt .gross-link:hover { color: var(--gold-text); }

/* Anfahrt */
.wege { display: grid; gap: 18px; margin: 0 0 28px; }
.wege div { min-width: 0; }
.wege dt { font: 500 23px/1.2 var(--f-titel); }
.wege dd { margin: 4px 0 0; color: var(--leise); }
.golfhuus { margin-top: 28px; padding: 16px 18px; border: 1px solid var(--linie); background: var(--weiss); }
.golfhuus strong { display: block; font: 500 21px/1.2 var(--f-titel); margin-bottom: 4px; }
.golfhuus p { margin: 0; color: var(--leise); font-size: 15.5px; }

/* Unterseiten */
.seitenkopf { background: var(--walnuss); color: var(--hell-text); text-align: center; padding-block: clamp(48px, 7vw, 84px) clamp(40px, 6vw, 64px); }
.seitenkopf h1 { font-size: clamp(44px, 6vw, 68px); line-height: 1.02; margin: 12px 0 10px; }
.seitenkopf .lead { color: var(--hell-leise); font-style: italic; font-family: var(--f-titel); font-size: clamp(20px, 2vw, 24px); margin: 0; }
.tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; margin-top: 26px; border: 1px solid var(--linie-dunkel); }
.tabs a { font: 600 12px/1 var(--f-label); letter-spacing: .14em; color: var(--hell-text); text-decoration: none; padding: 12px 16px; }
.tabs a[aria-current] { background: var(--gold); color: var(--walnuss-tief); }
.sprung { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.sprung a { font-size: 14px; color: var(--hell-text); text-decoration: none; padding: 8px 14px; border: 1px solid var(--linie-dunkel); border-radius: 99px; }
.sprung a:hover { border-color: var(--gold); color: var(--gold-hell); }
.kartenteil { padding-block: clamp(52px, 7vw, 80px) 0; }
.kartenteil h2 { font-size: clamp(36px, 4.4vw, 50px); margin: 10px 0 26px; padding-bottom: 18px; border-bottom: 1px solid var(--linie); }
.beilagen { margin-top: 18px; }
.beilagen h4 { font: 600 11.5px/1.3 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 4px; }
.beilagen p { color: var(--leise); margin: 0; }
.fussnoten { padding-block: 48px 8px; color: var(--leise); font-size: 14.5px; display: grid; gap: 4px; }
.fussnoten p { margin: 0; }
.kartenende { padding-block: 28px clamp(64px, 8vw, 100px); }
.rechtstext { padding-block: clamp(48px, 6vw, 72px) clamp(64px, 8vw, 100px); }
.rechtstext h2 { font-size: 28px; margin: 34px 0 10px; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p, .rechtstext li { color: var(--tinte); }
.leerstelle { padding-block: clamp(56px, 8vw, 96px); text-align: center; }
.leerstelle p { font: italic 500 26px/1.3 var(--f-titel); color: var(--leise); }

/* Fusszeile */
.fuss { background: var(--walnuss-tief); color: var(--hell-text); padding-block: 64px 32px; font-size: 15.5px; }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.fuss-raster > div { min-width: 0; }
.fuss img.fuss-logo { width: 220px; height: auto; display: block; margin-bottom: 18px; }
.fuss h2 { font: 600 11px/1.3 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hell); margin: 0 0 14px; }
.fuss p { margin: 0 0 6px; color: var(--hell-leise); }
.fuss a { color: var(--hell-text); text-decoration: none; }
.fuss a:hover { color: var(--gold-hell); text-decoration: underline; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fuss .zeilen { color: var(--hell-leise); }
.fuss-unten { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--linie-dunkel); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: var(--hell-leise); }
.fuss-unten .ehemals { margin-right: auto; }
@media (max-width: 920px) { .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .fuss-raster { grid-template-columns: 1fr; } }

/* Platzhalter: nur in der Vorschau sichtbar; der Live-Bau lässt keine zu */
mark.ph { background: #FFE38A; color: #3B2A00; outline: 1px dashed #A07C00; padding: 0 4px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }