/* Pension Schlossgasse, Lieberose. Design-Set: DESIGN.md */
@font-face { font-family: "Source Sans 3"; src: url(/assets/fonts/source-sans-3-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(/assets/fonts/source-sans-3-latin-600-normal.woff2) format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(/assets/fonts/source-sans-3-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url(/assets/fonts/bricolage-grotesque-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url(/assets/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2"); font-weight: 600 800; font-display: swap; }

:root {
  --anthrazit: #2b2d31; --anthrazit-2: #3a3d43; --ziegel: #b0452f; --ziegel-d: #8f3523; --flieder: #8a9be0; --himmel: #e8ebf8; --hell: #f1f2f4; --grau: #e3e5e9; --linie: #d3d6dc; --weiss: #fff; --text: #23252a; --text-2: #4f535c;
  --kopf: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif; --fliess: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rand: 16px; --max: 1240px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
}
@media (min-width: 760px) { :root { --rand: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--weiss); color: var(--text); font: 400 1.1875rem/1.62 var(--fliess); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ziegel-d); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--anthrazit); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--flieder); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--kopf); font-weight: 700; color: var(--anthrazit); line-height: 1.1; margin: 0 0 var(--s4); letter-spacing: -0.015em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); font-weight: 600; }
p { margin: 0 0 var(--s4); }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.2em; }
li { margin-bottom: var(--s1); }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--rand); }
.klein { font-size: .98rem; color: var(--text-2); }
.lead { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); line-height: 1.5; max-width: 44em; }
.spalte-text { max-width: 42em; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--anthrazit); color: #fff; padding: 12px 16px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
section { margin-block: var(--s8); }
main > section:first-child, main > article:first-child { margin-top: var(--s6); }
.pfeil { font-weight: 600; text-decoration: none; border-bottom: 2px solid currentColor; }
.pfeil::after { content: " \2192"; }
.pfeil:hover { color: var(--anthrazit); }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 24px; border: 2px solid var(--ziegel); background: var(--ziegel); color: #fff; font: 700 1.02rem/1.2 var(--kopf); text-decoration: none; border-radius: 3px; white-space: normal; text-align: center; transition: background .15s, color .15s; }
.knopf:hover { background: var(--ziegel-d); border-color: var(--ziegel-d); color: #fff; }
.knopf-linie { background: transparent; color: var(--ziegel-d); }
.knopf-linie:hover { background: var(--ziegel); color: #fff; }
.knopf-hell { background: #fff; border-color: #fff; color: var(--anthrazit); }
.knopf-hell:hover { background: var(--flieder); border-color: var(--flieder); color: var(--anthrazit); }
.knopf-linie-hell { background: transparent; border-color: #fff; color: #fff; }
.knopf-linie-hell:hover { background: #fff; color: var(--anthrazit); }
.knopf-klein { min-height: 42px; padding: 8px 18px; font-size: .98rem; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0; }

/* Kopf */
.hinweisleiste { background: var(--flieder); color: var(--anthrazit); padding: 8px 0; font-weight: 600; font-size: .98rem; }
.hinweisleiste p { margin: 0; } .hinweisleiste a { color: var(--anthrazit); }
.kopf { background: var(--anthrazit); color: #fff; position: sticky; top: 0; z-index: 50; }
.kopf-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 68px; }
.marke { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; min-width: 0; }
.marke .dachlinie { width: 54px; height: 20px; flex: none; fill: none; stroke: var(--flieder); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.marke-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marke-1 { font: 700 1.12rem/1.15 var(--kopf); letter-spacing: -0.005em; }
.marke-2 { font-size: .84rem; color: #c7cbd3; }
.menu-knopf { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; background: transparent; border: 1px solid #6a6e78; color: #fff; font: 600 1rem var(--fliess); border-radius: 3px; cursor: pointer; }
.menu-strich { width: 20px; height: 2px; background: #fff; position: relative; }
.menu-strich::before, .menu-strich::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #fff; }
.menu-strich::before { top: -6px; } .menu-strich::after { top: 6px; }
.hauptnav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--anthrazit); padding: var(--s3) var(--rand) var(--s5); border-top: 1px solid #44474e; max-height: calc(100vh - 68px); overflow: auto; }
.hauptnav.offen { display: block; }
.hauptnav ul { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.hauptnav li { margin: 0; }
.hauptnav a:not(.knopf) { display: block; padding: 13px 2px; color: #fff; text-decoration: none; font-weight: 600; border-bottom: 1px solid #44474e; }
.hauptnav a[aria-current] { color: var(--flieder); }
.hauptnav .knopf { width: 100%; }
@media (min-width: 1000px) {
  .menu-knopf { display: none; }
  .hauptnav { display: flex; position: static; align-items: center; gap: var(--s5); padding: 0; border: 0; background: transparent; max-height: none; overflow: visible; }
  .hauptnav ul { display: flex; gap: var(--s4); margin: 0; }
  .hauptnav a:not(.knopf) { border: 0; padding: 8px 2px; font-size: .98rem; box-shadow: inset 0 -3px 0 transparent; }
  .hauptnav a:not(.knopf):hover, .hauptnav a[aria-current] { color: #fff; box-shadow: inset 0 -3px 0 var(--flieder); }
  .hauptnav .knopf { width: auto; }
}
.krumen { margin-top: var(--s4); font-size: .95rem; }
.krumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 0; margin: 0; color: var(--text-2); }
.krumen li { margin: 0; } .krumen li + li::before { content: "/"; margin-right: 8px; color: #9a9ea8; }

/* Startseite: Held */
.held { margin: 0 !important; background: var(--anthrazit); color: #fff; display: grid; overflow: hidden; }
.held-bild { order: -1; position: relative; }
.held-bild img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.held-text { padding: var(--s6) var(--rand) var(--s7); max-width: 40rem; }
.held h1 { color: #fff; font-size: clamp(2.2rem, 1.2rem + 4vw, 4.2rem); }
.held p { color: #e0e3ea; font-size: 1.2rem; max-width: 34em; }
.held-adresse { font-size: .98rem !important; color: #b8bdc8 !important; margin-top: var(--s5); }
@media (min-width: 900px) {
  .held { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 600px; }
  .held-bild { order: 0; }
  .held-bild img { aspect-ratio: auto; position: absolute; inset: 0; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
  .held-text { align-self: center; padding: var(--s8) var(--s6) var(--s8) max(var(--rand), calc((100vw - var(--max)) / 2 + var(--rand))); max-width: none; }
}
.zahlen { margin-block: var(--s7); }
.zahlen dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); margin: 0; }
@media (min-width: 760px) { .zahlen dl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zahlen div { display: flex; flex-direction: column-reverse; }
.zahlen dt { color: var(--text-2); font-size: .98rem; }
.zahlen dd { margin: 0; font: 700 clamp(1.9rem, 1.3rem + 2.4vw, 3rem)/1.05 var(--kopf); color: var(--ziegel); letter-spacing: -.02em; }
.willkommen { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) { .willkommen { grid-template-columns: 1.25fr 1fr; gap: var(--s8); } }
.willkommen-bild { margin: 0; } .willkommen-bild figcaption { font-size: .95rem; color: var(--text-2); margin-top: var(--s2); }

/* Das Haus, Etage für Etage */
.haus { background: transparent; }
.etagen { list-style: none; padding: 0; margin: var(--s5) auto 0; display: grid; gap: 0; max-width: none; padding-inline: 0; }
.etage { margin: 0; display: grid; gap: var(--s4); padding: var(--s6) var(--rand); align-items: center; }
.etage:nth-child(1) { background: var(--himmel); } .etage:nth-child(2) { background: var(--hell); } .etage:nth-child(3) { background: var(--grau); }
.etage:nth-child(4) { background: var(--anthrazit); color: #e6e8ee; } .etage:nth-child(4) h3 { color: #fff; } .etage:nth-child(4) a { color: #fff; } .etage:nth-child(4) .e-nr { color: var(--flieder); }
.e-nr { font: 800 clamp(2.4rem, 1.6rem + 3vw, 3.8rem)/.95 var(--kopf); color: var(--ziegel); letter-spacing: -.03em; }
.e-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.e-text p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .etage { grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 28rem); gap: var(--s6); padding-block: var(--s6); padding-inline: max(var(--rand), calc((100vw - var(--max)) / 2 + var(--rand))); }
}

.zimmer-teaser { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 900px) { .zimmer-teaser { grid-template-columns: 1fr 1.1fr; gap: var(--s8); } }
.zt-bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.zt-bilder img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.zt-bilder figure { margin: 0; } .zb-0 { grid-column: 1 / -1; } .zb-0 img { aspect-ratio: 3 / 2; }
.morgen { display: grid; background: var(--anthrazit); color: #e6e8ee; margin-inline: 0; }
.morgen h2 { color: #fff; } .morgen a { color: #fff; }
.morgen-bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.morgen-bilder figure { margin: 0; } .morgen-bilder img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.mb-0 { grid-column: 1 / -1; } .mb-0 img { aspect-ratio: 3 / 2; }
.morgen-text { padding: var(--s7) var(--rand); max-width: 40rem; }
@media (min-width: 900px) {
  .morgen { grid-template-columns: 1.15fr 1fr; }
  .morgen-text { align-self: center; padding: var(--s8) max(var(--rand), calc((100vw - var(--max)) / 2 + var(--rand))) var(--s8) var(--s7); }
}
.umkreis .entf { list-style: none; padding: 0; margin: var(--s5) 0 var(--s6); display: grid; gap: var(--s4); }
@media (min-width: 760px) { .umkreis .entf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
.entf li { display: flex; flex-direction: column; margin: 0; padding: var(--s4); background: var(--hell); }
.entf-km { font: 800 clamp(2rem, 1.4rem + 2.4vw, 3.2rem)/1 var(--kopf); color: var(--ziegel); letter-spacing: -.02em; }
.entf-ziel { font-weight: 700; font-size: 1.15rem; } .entf-text { color: var(--text-2); font-size: .98rem; }
.umkreis-karten { display: grid; gap: var(--s3); }
@media (min-width: 760px) { .umkreis-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .umkreis-karten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.umkreis-karten a { display: flex; flex-direction: column; gap: 6px; padding: var(--s5); background: var(--anthrazit); color: #fff; text-decoration: none; min-height: 150px; transition: background .15s; }
.umkreis-karten a:hover { background: var(--ziegel-d); color: #fff; }
.umkreis-karten strong { font: 700 1.25rem/1.15 var(--kopf); } .umkreis-karten span { color: #dfe2e9; font-size: 1rem; }
.bewertung { margin: 0; padding: var(--s4) var(--s5); background: var(--himmel); }
.bewertungsband { margin-block: var(--s6); }
.fragen-liste details { border-bottom: 1px solid var(--linie); padding: var(--s3) 0; }
.fragen-liste summary { font-weight: 700; cursor: pointer; font-size: 1.1rem; padding: 6px 0; }
.fragen-liste details[open] summary { color: var(--ziegel-d); }
.fragen-liste p { margin: var(--s2) 0 0; max-width: 46em; }
.abschluss { background: var(--ziegel); color: #fff; margin-bottom: 0; overflow: hidden; position: relative; }
.abschluss-in { padding-block: var(--s8); position: relative; }
.abschluss h2 { color: #fff; max-width: 14em; } .abschluss p { max-width: 36em; }
.abschluss a:not(.knopf) { color: #fff; }
.abschluss-nr { position: absolute; right: var(--rand); top: 8px; margin: 0 !important; font: 800 clamp(4.5rem, 3rem + 9vw, 11rem)/1 var(--kopf); color: rgba(255,255,255,.12); letter-spacing: -.04em; pointer-events: none; white-space: nowrap; }
.kontaktzeile { margin-top: var(--s5); }

/* Formfelder */
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s4); min-width: 0; }
label { font-weight: 700; font-size: 1rem; }
.frei { font-weight: 400; color: var(--text-2); }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], select, textarea { width: 100%; min-height: 50px; padding: 10px 12px; border: 1px solid #8b909b; border-radius: 3px; background: #fff; color: var(--text); font: 400 1.08rem/1.3 var(--fliess); }
input[type=date] { -webkit-appearance: none; appearance: none; min-width: 0; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(138,155,224,.7); outline-offset: 0; border-color: var(--anthrazit); }
.feldreihe { display: grid; gap: 0 var(--s4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .feldreihe { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .feldreihe-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.haken { display: flex; gap: 10px; align-items: center; font-weight: 400; margin-bottom: var(--s4); }
.haken input { width: 22px; height: 22px; accent-color: var(--ziegel); flex: none; }
fieldset { border: 0; margin: 0 0 var(--s6); padding: 0; min-width: 0; }
legend { font: 700 1.35rem var(--kopf); color: var(--anthrazit); padding: 0 0 var(--s3); }
.richtwert { background: var(--himmel); padding: var(--s4); margin-bottom: var(--s4); }
.richtwert table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.richtwert td { padding: 4px 0; vertical-align: top; }
.richtwert td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
.richtwert tr.summe td { border-top: 2px solid var(--anthrazit); font-weight: 700; padding-top: 8px; font-size: 1.2rem; }
.richtwert tr.summe td:last-child { color: var(--ziegel-d); }
.richtwert .warnung { color: #8a3b12; font-weight: 700; margin: 8px 0 0; }
.richtwert p { margin: 8px 0 0; font-size: .98rem; color: var(--text-2); }
.form-status { margin: var(--s3) 0 0; font-weight: 700; }
.form-status.fehler { color: #a3261a; }
.feld.ungueltig input, .feld.ungueltig textarea { border-color: #a3261a; }
.formular-erfolg { background: var(--himmel); padding: var(--s5); }
.anfrage-raster { display: grid; gap: var(--s7); }
@media (min-width: 1000px) { .anfrage-raster { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s8); } .anfrage-seite { position: sticky; top: 96px; align-self: start; } }
.anfrage-seite { background: var(--hell); padding: var(--s5); }
.anfrage-seite h2 { font-size: 1.4rem; }

/* Seiten allgemein */
.seitenkopf h1 { max-width: 16em; }
.seitenbild img { width: 100%; max-height: 460px; object-fit: cover; }
.seitenbild { margin-top: 0 !important; }
.zweier { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .zweier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); } }
.zweier > *, .u-preis > *, .u-text > *, .willkommen > *, .artikel-raster > *, .anfrage-raster > * { min-width: 0; }
.tabelle { width: 100%; border-collapse: collapse; margin: 0 0 var(--s4); }
.tabelle th, .tabelle td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-weight: 600; } .tabelle td { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
@media (max-width: 559.98px) { .tabelle td { white-space: normal; } }
.werte { margin: 0 0 var(--s4); } .werte div { display: grid; grid-template-columns: 9rem 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linie); } .werte dt { font-weight: 600; } .werte dd { margin: 0; }
@media (max-width: 400px) { .werte div { grid-template-columns: 1fr; gap: 2px; } }
.linkliste { list-style: none; padding: 0; } .linkliste li { padding: 10px 0; border-bottom: 1px solid var(--linie); margin: 0; }
.liste { padding-left: 1.2em; }
.karten { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.karte { background: var(--hell); padding: var(--s5); } .karte p:last-child { margin: 0; }

/* Zimmer */
.u-kopf h1 { max-width: 14em; }
.u-unter { display: block; font: 500 clamp(1.1rem, 1rem + .6vw, 1.5rem)/1.3 var(--fliess); color: var(--text-2); letter-spacing: 0; margin-top: var(--s2); }
.kennzahlen { list-style: none; padding: 0; margin: var(--s5) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (min-width: 760px) { .kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kennzahlen li { display: flex; flex-direction: column; margin: 0; color: var(--text-2); font-size: .98rem; }
.kennzahlen strong { font: 700 clamp(1.4rem, 1.1rem + 1.2vw, 2rem)/1.1 var(--kopf); color: var(--anthrazit); }
.kz-preis strong { color: var(--ziegel); }
.fotostreifen { margin-inline: 0; }
.streifen { list-style: none; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--rand) 8px; margin: 0; -webkit-overflow-scrolling: touch; }
.streifen li { flex: 0 0 min(88vw, 620px); scroll-snap-align: start; margin: 0; }
.streifen img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.streifen a { display: block; cursor: zoom-in; }
.streifen-hinweis { font-size: .95rem; color: var(--text-2); margin-top: var(--s2); }
.u-text { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .u-text { grid-template-columns: 1.4fr 1fr; gap: var(--s8); } }
.blick { background: var(--hell); padding: var(--s5); } .blick h2 { font-size: 1.4rem; } .blick ul { margin: 0; }
.aus-raster { display: grid; gap: var(--s5) var(--s6); }
@media (min-width: 760px) { .aus-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .aus-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aus-raster ul { padding-left: 1.1em; }
.u-preis { display: grid; gap: var(--s7); }
@media (min-width: 900px) { .u-preis { grid-template-columns: 1.2fr 1fr; gap: var(--s8); } }

/* Galerie */
.galerie { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (min-width: 760px) { .galerie { grid-template-columns: repeat(4, 1fr); } }
.galerie li { margin: 0; } .galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; } .galerie a { display: block; cursor: zoom-in; }
.galerie-gruppe { margin-top: var(--s7) !important; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(15,16,19,.94); display: flex; align-items: center; justify-content: center; padding: 56px 8px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; min-width: 48px; min-height: 48px; font: 700 1.6rem var(--kopf); cursor: pointer; border-radius: 3px; }
.lightbox button:hover { background: rgba(255,255,255,.25); }
.lb-zu { top: 8px; right: 8px; } .lb-vor { right: 8px; top: 50%; transform: translateY(-50%); } .lb-zurueck { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-text { position: absolute; bottom: 12px; left: 16px; right: 16px; color: #fff; text-align: center; font-size: .95rem; margin: 0; }

/* Artikel */
.artikel-kopf { padding-top: var(--s4); } .artikel-meta { color: var(--ziegel-d); font-weight: 700; font-size: .98rem; margin-bottom: var(--s2); }
.artikel-bild { margin-block: var(--s5); } .artikel-bild img { width: 100%; max-height: 520px; object-fit: cover; }
.artikel-raster { display: grid; gap: var(--s7); margin-block: var(--s6) var(--s8); }
@media (min-width: 1000px) { .artikel-raster { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s8); } .artikel-seite { position: sticky; top: 96px; align-self: start; } }
.artikel-text { max-width: 44em; }
.artikel-text section { margin: 0 0 var(--s6); }
.artikel-text h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.95rem); margin-top: var(--s6); }
.artikel-text table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s4); font-size: 1rem; display: block; overflow-x: auto; }
.artikel-text th, .artikel-text td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.artikel-text a { overflow-wrap: anywhere; }
.artikel-box { background: var(--anthrazit); color: #e6e8ee; padding: var(--s5); margin-bottom: var(--s5); }
.artikel-box .ab-titel { color: #fff; } .artikel-box a:not(.knopf) { color: #fff; } .ab-zeile { margin: var(--s3) 0 0; font-size: .98rem; }
.ab-titel { font: 700 1.2rem/1.2 var(--kopf); margin-bottom: var(--s2); }
.verwandt ul { list-style: none; padding: 0; } .verwandt li { padding: 8px 0; border-bottom: 1px solid var(--linie); }
.quellen { font-size: .98rem; } .quellen ul { padding-left: 1.1em; } .quellen a, .verwandt a { overflow-wrap: anywhere; }
.artikel-stand { color: var(--text-2); font-size: .95rem; }
.rundum { background: var(--hell); padding: var(--s5); } .rundum h2 { font-size: 1.4rem; }
.rg-liste { list-style: none; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 760px) { .rg-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .rg-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rg-liste li { margin: 0; } .rg-liste a { display: flex; flex-direction: column; height: 100%; background: var(--hell); color: var(--text); text-decoration: none; padding: var(--s5); gap: 6px; transition: background .15s; }
.rg-liste a:hover { background: var(--himmel); } .rg-liste strong { font: 700 1.25rem/1.2 var(--kopf); color: var(--anthrazit); } .rg-liste span { display: flex; flex-direction: column; gap: 6px; } .rg-liste img { margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s3); width: calc(100% + 2 * var(--s5)); max-width: none; aspect-ratio: 3 / 2; object-fit: cover; }
.stimmen-raster { display: grid; gap: var(--s4); } @media (min-width: 900px) { .stimmen-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stimme { margin: 0; background: var(--hell); padding: var(--s5); } .stimme blockquote { margin: 0 0 var(--s3); font-style: italic; } .stimme figcaption { font-size: .95rem; color: var(--text-2); }
.rechtstext { max-width: 820px; margin-bottom: var(--s8); } .rechtstext h2 { font-size: 1.45rem; margin-top: var(--s6); } .rechtstext a { overflow-wrap: anywhere; }
.sitemap-raster { display: grid; gap: var(--s6); margin-bottom: var(--s8); } @media (min-width: 900px) { .sitemap-raster { grid-template-columns: repeat(3, 1fr); } }

/* Fuß */
.fuss { background: var(--anthrazit); color: #d4d7de; margin-top: 0; padding-bottom: 76px; }
.fuss-dach { line-height: 0; background: var(--weiss); } .start .fuss-dach { background: var(--ziegel); } .fuss-dach svg { display: block; width: 100%; height: 44px; fill: var(--anthrazit); }
.fuss a { color: #fff; } .fuss a:hover { color: var(--flieder); }
.fuss-raster { display: grid; gap: var(--s6); padding-block: var(--s7) var(--s5); }
@media (min-width: 900px) { .fuss-raster { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s7); } .fuss { padding-bottom: 0; } }
.fuss-name { font: 700 1.4rem/1.2 var(--kopf); color: #fff; margin-bottom: var(--s3); } .fuss-klein { font-size: .95rem; color: #aab0bb; }
.fuss-h { font: 700 1.05rem var(--kopf); color: #fff; margin-bottom: var(--s3); letter-spacing: 0; }
.fuss ul { list-style: none; padding: 0; margin: 0; } .fuss li { margin-bottom: 6px; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); padding-block: var(--s4) var(--s5); border-top: 1px solid #44474e; font-size: .95rem; }
.fuss-unten ul { display: flex; gap: var(--s5); flex-wrap: wrap; } .fuss-unten p { margin: 0; }

/* Handyleiste */
.handyleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1.4fr; background: var(--anthrazit); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid #44474e; }
.handyleiste a { display: flex; align-items: center; justify-content: center; min-height: 56px; font: 700 1.05rem var(--kopf); text-decoration: none; color: #fff; }
.handyleiste-haupt { background: var(--ziegel); }
@media (min-width: 900px) { .handyleiste { display: none; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media print { .kopf, .handyleiste, .fuss { display: none; } }