/* Schriften lokal (seit 11.10.2026, vorher von Google Fonts): Faustina und Barlow, SIL Open Font License, Zeichensatz latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/barlow-normal-400.woff2) format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/barlow-normal-500.woff2) format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-normal-600.woff2) format('woff2');
  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: 'Faustina';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/faustina-italic-400.woff2) format('woff2');
  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: 'Faustina';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/faustina-normal-400.woff2) format('woff2');
  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: 'Faustina';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/faustina-normal-400.woff2) format('woff2');
  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: 'Faustina';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/faustina-normal-400.woff2) format('woff2');
  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;
}

/* ra-th.de — Stylesheet
   Farben, Schriften und Abstände als Token; alles andere leitet sich daraus ab.
   Von der alten Website übernommen: kleingeschriebene Wortmarke mit Strich,
   Foto in voller Breite am Anfang jeder Seite, Überschrift weiß im Foto. */

:root {
  --paper:     #FCFBF9;
  --card:      #FFFFFF;
  --ink:       #1E2621;
  --muted:     #6B6862;
  --rule:      #E0DCD4;
  --rule-sf:   #EFEBE4;
  --forest:    #2C4438;
  --forest-dp: #1C2C24;
  --forest-sf: #EDF1EE;
  --on-forest: #FFFFFF;
  --copper:    #9C5A2E;

  --f-disp: "Faustina", Georgia, "Times New Roman", serif;
  --f-body: "Barlow", -apple-system, "Segoe UI", system-ui, sans-serif;

  --wrap: 1100px;
  --gutter: clamp(18px, 4vw, 40px);
  --head-h: 74px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141715; --card: #1B201D; --ink: #E9E7E1; --muted: #979490;
    --rule: #2E3531; --rule-sf: #242A26; --forest: #8FBBA4; --forest-dp: #A9CDB8;
    --forest-sf: #1A2420; --on-forest: #12160F; --copper: #D08E5C;
  }
}
:root[data-theme="dark"] {
  --paper: #141715; --card: #1B201D; --ink: #E9E7E1; --muted: #979490;
  --rule: #2E3531; --rule-sf: #242A26; --forest: #8FBBA4; --forest-dp: #A9CDB8;
  --forest-sf: #1A2420; --on-forest: #12160F; --copper: #D08E5C;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--forest); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--forest); color: var(--on-forest); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }

/* ── Kopf ─────────────────────────────────────────────── */
.site-head { background: var(--card); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 50; }
.site-head .wrap { max-width: 1280px; }
.head-row { display: flex; align-items: center; gap: 24px; min-height: var(--head-h); }
.brand { font-family: var(--f-body); font-size: clamp(17px, 4.6vw, 21px); font-weight: 400; letter-spacing: .015em; text-transform: lowercase; color: var(--ink); text-decoration: none; margin-right: auto; white-space: nowrap; }
.brand .bar { color: var(--copper); padding: 0 .3em; }
.nav { display: flex; align-items: center; gap: 20px; }
.nav a { font-size: 14.5px; color: var(--muted); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--forest); border-bottom-color: var(--forest); }
.nav-cta { font-weight: 600 !important; color: var(--on-forest) !important; background: var(--forest); padding: 9px 16px !important; border-bottom: none !important; }
.nav-cta:hover { background: var(--forest-dp); }
.nav-toggle { display: none; font: 600 14px var(--f-body); background: none; border: 1px solid var(--rule); color: var(--ink); padding: 8px 14px; cursor: pointer; }
@media (max-width: 1120px) {
  .nav-toggle { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: var(--head-h); background: var(--card); border-bottom: 1px solid var(--rule); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 16px; max-height: calc(100vh - var(--head-h)); overflow-y: auto; }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--rule-sf); font-size: 16px; }
  .nav-cta { margin-top: 10px; text-align: center; }
}

/* ── Fotokopf: jede Seite beginnt mit einem Foto in voller Breite ──
   Die Farben liegen hier bewusst fest (heller Text auf abgedunkeltem Foto),
   unabhängig vom hellen oder dunklen Farbschema der Seite.
   --fx / --fy: Bildschwerpunkt, je Seite im style-Attribut gesetzt. */
.photo-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(330px, 66vh, 680px); background: #18211C; color: #FFFFFF; overflow: hidden; }
.photo-hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.photo-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(14,20,16,.84) 0%, rgba(14,20,16,.42) 36%, rgba(14,20,16,.06) 70%, rgba(14,20,16,0) 100%); }
/* Breite Bildschirme: Die Überschrift steht unten links – nur diese Ecke wird abgedunkelt.
   Der Rest des Fotos (Gesicht, Schachfiguren) bleibt so hell, wie er ist. */
@media (min-width: 900px) {
  .photo-hero::after { background: radial-gradient(ellipse 80% 115% at 0% 100%, rgba(14,20,16,.78) 0%, rgba(14,20,16,.56) 30%, rgba(14,20,16,.20) 58%, rgba(14,20,16,0) 80%); }
  /* Porträts: Das Gesicht füllt einen großen Teil des Fotos. Auf breiten Bildschirmen braucht der Kopf
     deshalb mehr Höhe (wie auf der alten Website), sonst wird das Gesicht unter den Augen abgeschnitten.
     47vw zeigt rund 70 % der Bildhöhe; 92vh hält das Foto auf einem Bildschirm. */
  .photo-hero.is-portrait { min-height: max(520px, min(47vw, 92vh)); }
}
/* Schachspiel-Fotos: einfarbig in Kanzleigrün getönt. Die Aufhellung lässt die helle Wand
   ins Weiße laufen, bevor die Tönung darüberliegt – so verschwindet die Tapete im Hintergrund,
   ohne dass die Bilddateien verändert werden; die Figuren behalten ihre Kanten.
   Helligkeit der Tönung: über die Farbe von ::before (heller = helleres Bild). */
.photo-hero.is-chess > img { filter: grayscale(1) contrast(1.0) brightness(1.55); }
.photo-hero.is-chess::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #86A595; mix-blend-mode: multiply; }
.photo-hero.is-slim { min-height: clamp(210px, 34vh, 320px); }
/* Hochformat: Querformat-Fotos werden seitlich stark beschnitten. --fx-m setzt dafür einen eigenen
   waagerechten Schwerpunkt (z. B. auf eines der beiden Heere statt auf die leere Mitte). */
@media (max-width: 640px) {
  .photo-hero > img { object-position: var(--fx-m, var(--fx, 50%)) var(--fy, 50%); }
  .photo-hero.is-chess:not(.is-slim) { min-height: clamp(300px, 56vh, 520px); }
}
.photo-hero-text { width: 100%; display: flex; flex-direction: column; gap: 12px; padding-top: 96px; padding-bottom: clamp(26px, 4.5vw, 54px); }
.photo-hero h1 { color: #FFFFFF; max-width: 21ch; text-shadow: 0 1px 28px rgba(0,0,0,.35); }
.photo-hero .eyebrow { color: #EBCBAA; }
.greeting { font-family: var(--f-disp); font-weight: 400; font-size: clamp(30px, 4.6vw, 54px); line-height: 1.1; letter-spacing: -.01em; margin: 0; max-width: none; text-shadow: 0 1px 28px rgba(0,0,0,.4); }
.greeting em { font-style: italic; font-weight: 400; color: #EBCBAA; }

/* ── Einstieg unter dem Foto ──────────────────────────── */
.intro { padding: clamp(30px, 5vw, 56px) 0 clamp(28px, 4.5vw, 50px); border-bottom: 1px solid var(--rule); }
.hero-text { display: flex; flex-direction: column; gap: 18px; }
.eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--copper); }
h1 { font-family: var(--f-disp); font-weight: 500; font-size: clamp(31px, 4.8vw, 50px); line-height: 1.08; letter-spacing: -.015em; margin: 0; text-wrap: balance; max-width: 22ch; }
.intro h1 { font-size: clamp(28px, 3.8vw, 40px); max-width: 26ch; }
.lead { font-size: 19px; line-height: 1.55; margin: 0; max-width: 58ch; }
.thesis { font-family: var(--f-disp); font-style: italic; font-size: 20px; line-height: 1.5; margin: 0; max-width: 48ch; color: var(--forest); border-left: 2px solid var(--forest); padding-left: 18px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 4px; }
.cta-note { font-size: 14px; color: var(--muted); }

.btn { font-family: var(--f-body); font-size: 15px; font-weight: 600; letter-spacing: .02em; padding: 13px 24px; background: var(--forest); color: var(--on-forest); border: 1px solid var(--forest); text-decoration: none; display: inline-block; cursor: pointer; }
.btn:hover { background: var(--forest-dp); border-color: var(--forest-dp); }
.btn-2 { background: transparent; color: var(--forest); }
.btn-2:hover { background: var(--forest-sf); color: var(--forest); }

/* ── Fakten ───────────────────────────────────────────── */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--rule); }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { padding: 24px var(--gutter); border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 4px; }
.fact:nth-child(2n) { border-right: none; }
.fact:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
@media (min-width: 720px) { .fact:nth-child(2n) { border-right: 1px solid var(--rule); } .fact:last-child { border-right: none; } .fact:nth-child(-n+2) { border-bottom: none; } }
.fact .n { font-family: var(--f-disp); font-size: 28px; font-weight: 600; line-height: 1; color: var(--forest); }
.fact .l { font-size: 13.5px; color: var(--muted); line-height: 1.4; }

/* ── Abschnitte ───────────────────────────────────────── */
.sec { padding: clamp(36px, 6vw, 60px) 0; border-bottom: 1px solid var(--rule); }
.sec:last-of-type { border-bottom: none; }
.sec-inner { display: flex; flex-direction: column; gap: 22px; }
.sub { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--copper); }
h2 { font-family: var(--f-disp); font-weight: 500; font-size: clamp(26px, 3.4vw, 32px); line-height: 1.2; margin: 0; letter-spacing: -.01em; max-width: 28ch; text-wrap: balance; }
h3 { font-family: var(--f-disp); font-weight: 600; font-size: 21px; line-height: 1.3; margin: 0; }
p { margin: 0; max-width: 66ch; }
.prose { display: flex; flex-direction: column; gap: 16px; max-width: 70ch; }
.prose h2 { margin-top: 18px; }
.prose h3 { margin-top: 10px; }
.prose ul { margin: 0; padding-left: 22px; max-width: 66ch; }
.prose li { margin-bottom: 6px; }
.prose blockquote { margin: 0; padding-left: 18px; border-left: 2px solid var(--forest); font-family: var(--f-disp); font-style: italic; font-size: 19px; color: var(--forest); max-width: 50ch; }
.prose cite { display: block; font: 13px var(--f-body); font-style: normal; color: var(--muted); margin-top: 6px; }

.areas { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 720px) { .areas { grid-template-columns: repeat(3, 1fr); } }
.area { background: var(--card); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.area p { font-size: 15px; color: var(--muted); line-height: 1.55; }
.area a.more { font-size: 14px; font-weight: 600; text-decoration: none; margin-top: auto; padding-top: 8px; }
.tag { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--forest); background: var(--forest-sf); padding: 4px 9px; }

.split { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 720px) { .split { grid-template-columns: 1fr 1fr; } }
.half { background: var(--card); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.half p { font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.half ul { margin: 0; padding-left: 20px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.half li { margin-bottom: 5px; }
.half a.more { font-size: 14px; font-weight: 600; text-decoration: none; margin-top: auto; padding-top: 6px; }

.pull { background: var(--forest-sf); border-left: 3px solid var(--forest); padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.pull .flag { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--forest); }
.pull h3 { font-weight: 500; font-size: 22px; }
.pull p { font-size: 15.5px; line-height: 1.6; }

.notice { border: 1px solid var(--rule); border-left: 3px solid var(--copper); background: var(--card); padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.notice .flag { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--copper); }
.notice p { font-size: 14.5px; color: var(--muted); }

/* ── Kontakt ──────────────────────────────────────────── */
/* Wortmarke als Überschrift (Startseite, Abschnitt Kontakt) – gesetzt wie im Kopf der Seite */
h2.wortmarke { font-family: var(--f-body); font-weight: 400; font-size: clamp(20px, 5.6vw, 30px); letter-spacing: .015em; text-transform: lowercase; white-space: nowrap; max-width: none; }
.wortmarke .bar { color: var(--copper); padding: 0 .3em; }
.kontakt { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 760px) { .kontakt { grid-template-columns: 1fr 1.3fr; gap: 48px; } }
.kontakt dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; align-items: baseline; font-size: 16px; }
.kontakt dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kontakt dd { margin: 0; }
.kontakt dd a { text-decoration: none; font-weight: 500; }
.form { display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--rule); padding: 26px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.form input, .form select, .form textarea { font: 16px var(--f-body); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); padding: 11px 12px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--forest); outline-offset: -1px; border-color: var(--forest); }
.form textarea { min-height: 140px; resize: vertical; }
.form .row { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .form .row { grid-template-columns: 1fr 1fr; } }
.form .consent { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; letter-spacing: 0; font-size: 13.5px; line-height: 1.5; }
.form .consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.form .hint { font-size: 13px; color: var(--muted); }
.form .ok { display: none; padding: 12px 14px; background: var(--forest-sf); border-left: 3px solid var(--forest); font-size: 14.5px; }
.form.is-sent .ok { display: block; }

/* ── Videos ───────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { font: 500 13.5px var(--f-body); letter-spacing: .03em; padding: 8px 14px; background: var(--card); color: var(--muted); border: 1px solid var(--rule); cursor: pointer; }
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--forest); color: var(--on-forest); border-color: var(--forest); }
.vgrid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 640px) { .vgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .vgrid { grid-template-columns: 1fr 1fr 1fr; } }
.vcard { background: var(--card); border: 1px solid var(--rule); display: flex; flex-direction: column; }
.vcard.is-hidden { display: none; }
.video { position: relative; aspect-ratio: 16 / 9; background: #1C2C24; overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-ph { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer; background: linear-gradient(160deg, #2C4438 0%, #1C2C24 100%); color: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px; text-align: center; font-family: var(--f-body); }
/* Mit eigenem Standbild (nicht von YouTube): Bild füllt die Fläche, darüber eine Abdunklung für die Schrift */
.video-ph .poster { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.video-ph.has-poster::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(14,20,16,.16); }
.video-ph > span { position: relative; z-index: 2; }
/* Die Standbilder tragen ihren Titel schon im Bild: in der Mitte nur der Abspielknopf,
   der Datenschutzhinweis als schmales Schild oben links – sichtbar vor dem Klick, ohne den Bildtitel zu verdecken. */
.video-ph.has-poster .t { display: none; }
.video-ph.has-poster .h { position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px); padding: 4px 9px; background: rgba(14,20,16,.74); font-size: 11px; line-height: 1.35; opacity: 1; text-align: left; }
.video-ph.has-poster .play { width: 62px; height: 62px; background: rgba(14,20,16,.55); border-color: #FFFFFF; }
.video-ph.has-poster:hover .play { background: #2C4438; }
.video-ph .play { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.6); display: grid; place-items: center; }
.video-ph .play::after { content: ""; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #FFFFFF; margin-left: 4px; }
.video-ph .t { font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.video-ph .h { font-size: 11.5px; opacity: .75; line-height: 1.4; max-width: 30ch; }
.vmeta { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.vmeta .cat { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--copper); }
.vmeta h3 { font-size: 18px; line-height: 1.3; font-weight: 600; }
.vmeta .d { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vmeta a { font-size: 13.5px; font-weight: 600; text-decoration: none; margin-top: 6px; }

/* ── Terminbuchung ────────────────────────────────────── */
.booking { background: var(--card); border: 1px solid var(--rule); }
.booking iframe { display: block; width: 100%; min-height: 760px; border: 0; }
.booking-ph { padding: 30px 28px; display: flex; flex-direction: column; gap: 16px; }
.booking-ph p { color: var(--muted); font-size: 15.5px; }
.angebote { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 720px) { .angebote { grid-template-columns: repeat(3, 1fr); } .angebote.is-2 { grid-template-columns: repeat(2, 1fr); } }
.angebot { background: var(--card); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.angebot .preis { font-family: var(--f-disp); font-size: 26px; font-weight: 600; color: var(--forest); line-height: 1; }
.angebot .preis small { font: 13px var(--f-body); color: var(--muted); font-weight: 400; }
.angebot p { font-size: 14.5px; color: var(--muted); }
.angebot .btn { margin-top: auto; align-self: flex-start; }
.angebot .cta-row { margin-top: auto; }
.angebot .cta-row .btn { margin-top: 0; }

/* ── Fuß ──────────────────────────────────────────────── */
.site-foot { background: var(--card); border-top: 1px solid var(--rule); padding: 44px 0 36px; font-size: 14.5px; }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } }
.foot-brand { font-family: var(--f-body); font-size: 18px; font-weight: 400; letter-spacing: .015em; text-transform: lowercase; margin-bottom: 10px; }
.foot-brand .bar { color: var(--copper); padding: 0 .3em; }
.site-foot address { font-style: normal; color: var(--muted); line-height: 1.6; margin-bottom: 8px; }
.foot-h { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.foot-grid a { color: var(--ink); text-decoration: none; }
.foot-grid a:hover { color: var(--forest); }
.foot-legal { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--muted); }
.foot-legal a { color: var(--muted); }

/* ── Sonstiges ────────────────────────────────────────── */
.tablebox { overflow-x: auto; border: 1px solid var(--rule); background: var(--card); }
table { border-collapse: collapse; width: 100%; min-width: 480px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule-sf); vertical-align: top; font-size: 15px; }
thead th { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--rule-sf); }
tbody tr:last-child td { border-bottom: none; }
.proto-bar { background: #9C5A2E; color: #FFFFFF; font-size: 13px; text-align: center; padding: 7px var(--gutter); letter-spacing: .02em; }
.proto-bar a { color: #FFFFFF; font-weight: 600; margin-left: 12px; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
@media print {
  .site-head, .site-foot, .proto-bar, .nav-toggle { display: none; }
  .photo-hero { min-height: 0; color: #000000; background: none; }
  .photo-hero > img, .photo-hero::before, .photo-hero::after { display: none; }
  .photo-hero h1 { color: #000000; text-shadow: none; }
  .photo-hero-text { padding-top: 0; }
}

/* Blogbeiträge (11.10.2026) */
.beitrag .video { margin: 4px 0 8px; }
.beitrag figure { margin: 6px 0; }
.beitrag figure img { width: 100%; height: auto; display: block; }
.beitrag-datum { font-size: 14.5px; color: var(--muted); }
.beitrag-datum a { color: var(--forest); }
.beitrag sup { font-size: .72em; line-height: 0; }
.vcard a.video { display: block; }
.vcard a.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }