/* =========================================================================
   ReiseHub – Unterseiten-Identität (NICHT die Homepage; der Würfel hat eigene
   Inline-Styles und bleibt puristisch schwarz-weiß).
   Richtung (Niklas 19.07.): komplett neue Fonts, kräftig & magazinig, Fotos sparsam.
   Fonts:  Fraunces (Magazin-Serif, Titel)  +  Manrope (warme Sans, Text/Labels).
   Farbe:  cremiges Papier + Würfel-Länderfarben als kräftige Blöcke.
           Jede Seite hat ein eigenes --accent (unten via body[data-page]).
   ========================================================================= */

/* Selbst gehostete Schriften (DSGVO: kein Request an Google/gstatic).
   Variable Fonts, nur latin + latin-ext. Quelle: Google Fonts, OFL 1.1. */

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/fraunces-italic-latin.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: 'Fraunces';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/fraunces-normal-latin.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: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/manrope-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/manrope-normal-latin.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: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/playfair-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/playfair-italic-latin.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: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/playfair-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/playfair-normal-latin.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/jbmono-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/jbmono-normal-latin.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;
}

:root {
  --cream:#fbf7ef; --cream-deep:#f3ecdf; --paper:#ffffff;
  --ink:#241f1a; --ink-soft:#5b5149; --ink-faint:#8a7d70;
  --line:#e7ddcb;
  /* Würfel-Länderfarben */
  --ziegel:#a8472f; --ofen:#c67a33; --sonne:#d29e33;
  --gras:#4d6b33;  --ozean:#34558b; --indigo:#3f3d70; --beere:#7b4a72;
  --disp:'Fraunces',Georgia,serif;
  --sans:'Manrope',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.8,.28,1);
  --wrap:1180px; --read:720px;
  /* Marken-Duo aus dem RH-Logo: sage-grün + warmes gold-gelb, etwas heller als das Logo. */
  --brand-green:#6ea15c; --brand-green-deep:#3f5e2f;   /* deep = für Text auf Creme (Kontrast) */
  --brand-yellow:#eec13f; --brand-yellow-deep:#7c5c12;
  /* Aktive Rollen; pro Seite unten umgeschaltet (grün-geführt / gelb-geführt). */
  --accent:var(--brand-green);        /* helle Fläche: Buttons, Bänder, Unterstrich */
  --accent-deep:var(--brand-green-deep); /* Text auf Creme: Kicker, H3, Links */
  --pop:var(--brand-yellow);          /* zweiter Marken-Ton: Schatten, Deko */
  --accent-ink:#241f1a;               /* Text AUF dem hellen Akzent (dunkel) */
  /* Rückwärts-Aliase für noch nicht umgebaute Seiten */
  --mono:var(--sans); --paper-warm:var(--cream); --paper-deep:var(--cream-deep); --ozean:#34558b;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:var(--accent-deep); text-underline-offset:3px; }

/* --- Marken-Duo überall; pro Seite nur, welcher Ton führt (grün oder gelb) --- */
/* Grün-geführt (Standard): grüne Flächen, gelbe Pops. */
/* Gelb-geführt: gelbe Flächen, grüne Pops — für die warmen/einladenden Seiten. */
body[data-page="tagebuch"], body[data-page="guide"] {
  --accent:var(--brand-yellow); --accent-deep:var(--brand-yellow-deep); --pop:var(--brand-green);
}

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 34px; }
.read { max-width:var(--read); }

/* =========================== Kopf / Navigation =========================== */
.site-head {
  position:sticky; top:0; z-index:50; background:color-mix(in oklab, var(--cream) 88%, transparent);
  backdrop-filter:saturate(1.15) blur(9px); border-bottom:2px solid var(--ink);
}
.site-head__inner { max-width:var(--wrap); margin:0 auto; padding:14px 34px;
  display:flex; align-items:center; gap:22px; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); }
.brand img { width:40px; height:40px; }
.brand b { font-family:var(--disp); font-weight:600; font-size:25px; letter-spacing:-.02em; }
.site-nav { margin-left:auto; display:flex; align-items:center; gap:22px; }
.site-nav a {
  font-family:var(--sans); font-weight:600; font-size:13.5px; color:var(--ink-soft);
  text-decoration:none; padding:4px 0; border-bottom:2.5px solid transparent; transition:color .2s, border-color .2s; }
.site-nav a:hover { color:var(--ink); }
.site-nav a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--accent); }
.site-nav .cta {
  font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.01em; text-transform:none;
  color:var(--ink); background:var(--brand-yellow); border:2px solid var(--ink);
  padding:9px 17px; border-radius:999px; box-shadow:3px 3px 0 var(--ink); }
.site-nav .cta:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); color:var(--ink); }
.nav-toggle { display:none; }
.nav-bubbles, .nav-scrim { display:none; } /* nur mobil sichtbar, s. Media-Block unten */

/* Dropdown im Header (Weltreise) */
.nav-item { position:relative; display:flex; align-items:center; gap:4px; }
.nav-caret { display:inline-grid; place-items:center; padding:2px; background:none; border:0; cursor:pointer;
  color:var(--ink-soft); border-radius:5px; transition:color .2s, transform .2s; }
.nav-caret:hover { color:var(--ink); }
.has-drop:hover .nav-caret, .nav-drop.open ~ .nav-caret { transform:rotate(180deg); }
.nav-drop { position:absolute; top:calc(100% + 10px); left:0; min-width:236px; z-index:60;
  background:var(--paper); border:2px solid var(--ink); border-radius:12px; box-shadow:5px 5px 0 var(--ink);
  padding:8px; display:none; flex-direction:column; gap:1px; }
.has-drop:hover .nav-drop, .has-drop:focus-within .nav-drop, .nav-drop.open { display:flex; }
.nav-drop a { display:block; width:100%; padding:9px 12px; border-radius:8px; border-bottom:0;
  font-size:13.5px; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
.nav-drop a:hover { background:var(--cream); color:var(--ink); }
/* kleine Brücke, damit der Hover zwischen Label und Dropdown nicht abreißt */
.has-drop::after { content:""; position:absolute; top:100%; left:0; width:100%; height:12px; }

/* Breadcrumb-Leiste (unter Header, über der Überschrift) */
.crumbs-wrap { padding-top:16px; padding-bottom:2px; }
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--ink-faint); }
.crumbs a { color:var(--ink-soft); text-decoration:none; border-bottom:0; transition:color .2s; }
.crumbs a:hover { color:var(--ink); }
.crumbs__sep { color:var(--ink-faint); opacity:.55; }
.crumbs [aria-current="page"] { color:var(--ink); }
/* Weniger Luft über der Überschrift, wenn eine Breadcrumb davorsteht */
body.has-crumbs .page-head { padding-top:28px; }

/* =============================== Seitenkopf =============================== */
.page-head { padding:70px 0 30px; }
.kicker {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:13px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-deep); margin:0 0 20px; }
.kicker::before { content:""; width:26px; height:3px; background:var(--accent); border-radius:2px; }
.page-head h1 {
  font-family:var(--disp); font-optical-sizing:auto; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(42px,7vw,76px); line-height:1.0; margin:0 0 22px; color:var(--ink);
  overflow-wrap:break-word; hyphens:auto; }  /* lange dt. Komposita brechen mobil (z.B. Kreditkartenvergleich) */
.lead {
  font-family:var(--disp); font-style:italic; font-weight:400;
  font-size:clamp(20px,2.6vw,26px); line-height:1.45; color:var(--ink-soft); margin:0; max-width:40ch;
  overflow-wrap:break-word; hyphens:auto; }  /* lange Komposita (z.B. Auslandskrankenversicherung) bei 320px */

/* Hero-Bild (sparsam: eins pro Seite) */
.page-hero { margin:6px 0 0; }
.page-hero img { width:100%; height:clamp(240px,42vw,460px); object-fit:cover;
  border:2px solid var(--ink); box-shadow:8px 8px 0 var(--pop); }
.page-hero figcaption { font-family:var(--sans); font-size:12.5px; color:var(--ink-faint);
  margin-top:12px; font-weight:600; }

/* ============================= Fließtext-Block ============================ */
.prose { padding:8px 0 20px; font-size:17px; }
.prose p { margin:0 0 20px; color:var(--ink-soft); }
.prose h2 { font-family:var(--disp); font-weight:600; font-size:clamp(28px,4vw,40px);
  line-height:1.05; letter-spacing:-.015em; color:var(--ink); margin:48px 0 16px;
  overflow-wrap:break-word; hyphens:auto; }
.prose h3 { font-family:var(--sans); font-weight:800; font-size:15px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--accent-deep); margin:34px 0 10px; }
.prose strong { color:var(--ink); font-weight:700; }
.prose a { overflow-wrap:anywhere; }  /* lange URLs (z.B. Datenschutz-Links) duerfen 320px nicht sprengen */
.prose ul { padding-left:0; margin:0 0 20px; color:var(--ink-soft); list-style:none; }
.prose li { margin:0 0 12px; padding-left:26px; position:relative; }
.prose li::before { content:""; position:absolute; left:0; top:11px; width:9px; height:9px;
  background:var(--accent); border-radius:50%; }
.prose blockquote {
  margin:32px 0; padding:22px 26px; background:var(--accent); color:var(--accent-ink);
  border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink);
  font-family:var(--disp); font-style:italic; font-weight:500; font-size:23px; line-height:1.3; }
.hr { height:2px; background:var(--ink); border:0; margin:44px 0; opacity:.12; }

/* ============================ Karten / Raster ============================ */
.grid { display:grid; gap:22px; }
.grid--2 { grid-template-columns:repeat(2,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.card {
  border:2px solid var(--ink); background:var(--paper); padding:26px 24px;
  text-decoration:none; color:var(--ink); display:block; border-radius:4px;
  box-shadow:5px 5px 0 color-mix(in oklab, var(--accent) 55%, var(--ink));
  transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
a.card:hover { transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--accent); }
.card__num { font-family:var(--disp); font-weight:600; font-size:28px; color:var(--accent-deep); line-height:1; display:block; }
.card h3 { font-family:var(--disp); font-weight:600; font-size:24px; margin:8px 0 8px; line-height:1.1; color:var(--ink); }
.card p { font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin:0; }

/* Schritt-Liste (Vorbereitungen) — kräftige, farbige Nummern */
.steps { counter-reset:step; display:grid; gap:0; margin:24px 0; }
.step { display:grid; grid-template-columns:74px 1fr; gap:22px; padding:28px 0; border-top:2px solid var(--line); }
.step:last-child { border-bottom:2px solid var(--line); }
/* Nummer als gelbes Badge mit grünem Schatten = Grün-Gelb-Kombi je Schritt */
.step__no { counter-increment:step; display:grid; place-items:center; width:60px; height:60px;
  border-radius:16px; background:var(--brand-yellow); border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--brand-green-deep);
  font-family:var(--disp); font-weight:900; font-size:27px; color:var(--ink); line-height:1; }
.step__no::before { content:counter(step,decimal-leading-zero); }
.step h3 { font-family:var(--disp); font-weight:600; font-size:25px; margin:0 0 8px; color:var(--ink); }
.step p { margin:0; color:var(--ink-soft); font-size:15.5px; line-height:1.6; }
a.step { text-decoration:none; color:inherit; cursor:pointer; transition:background .18s; }
a.step:hover { background:color-mix(in oklab, var(--accent) 9%, transparent); }
a.step:hover h3 { color:var(--accent-deep); }

/* Fakten-Zeile „Auf einen Blick" — bunt wie auf der Portfolio-Seite, ohne Nummerierung */
.facts { display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  padding:28px 0; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); margin:16px 0; }
.fact { display:grid; gap:5px; text-align:center; }
.fact strong { font-family:var(--disp); font-weight:600; font-size:clamp(30px,3.6vw,46px); line-height:1; white-space:nowrap; }
.fact span { font-size:13.5px; color:var(--ink-soft); font-weight:500; line-height:1.35; }
.fact:nth-child(1) strong { color:#b0472e; }  /* ziegel */
.fact:nth-child(2) strong { color:#34558b; }  /* ozean */
.fact:nth-child(3) strong { color:#4d6b33; }  /* gras */
.fact:nth-child(4) strong { color:#b5831f; }  /* gold */
@media (max-width:640px){ .facts { grid-template-columns:repeat(2,1fr); gap:22px 20px; } }

/* ============================= Buttons / CTA ============================= */
.btn {
  display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:700;
  font-size:14px; letter-spacing:.01em; text-decoration:none; cursor:pointer; border-radius:999px;
  padding:14px 26px; border:2px solid var(--ink); background:var(--accent); color:var(--accent-ink);
  box-shadow:4px 4px 0 var(--ink); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); color:var(--accent-ink); }
.btn .pf { transition:transform .2s var(--ease); }
.btn:hover .pf { transform:translateX(4px); }
.btn--ghost { background:var(--cream); color:var(--ink); }
.btn--ghost:hover { background:var(--paper); color:var(--ink); }
.btn--yellow { background:var(--brand-yellow); color:var(--ink); }
.btn--yellow:hover { background:var(--brand-yellow); color:var(--ink); filter:brightness(1.05); }

/* ============================= Farbblöcke ================================ */
/* Getöntes Band (Akzent hell hinterlegt) */
.band { background:color-mix(in oklab, var(--accent) 12%, var(--cream));
  border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); }
/* Voll-Akzent-Band (Akzent satt, heller Text) — für Zäsuren/CTAs */
.band--solid { background:var(--accent); border-color:var(--ink); }
.band--solid, .band--solid .kicker, .band--solid h2, .band--solid p, .band--solid .lead,
.band--solid .prose h3, .band--solid a { color:var(--accent-ink); }
.band--solid .kicker::before { background:var(--accent-ink); }
.band--solid .btn { background:var(--cream); color:var(--ink); }
.note {
  border:2px solid var(--ink); background:var(--paper); border-left:8px solid var(--accent);
  padding:18px 22px; margin:26px 0; font-size:14.5px; line-height:1.6; color:var(--ink-soft); border-radius:4px; }
.note b { color:var(--accent); }

/* ====================== Vergleichstabelle (Reisetipps) =================== */
.rt-table-wrap { overflow-x:auto; margin:26px 0; border:2px solid var(--ink); border-radius:6px;
  box-shadow:5px 5px 0 var(--pop); background:#fff; -webkit-overflow-scrolling:touch; }
.rt-table { width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px; }
.rt-table th, .rt-table td { text-align:left; padding:12px 15px; vertical-align:top;
  border-bottom:1px solid rgba(34,29,24,.12); color:var(--ink-soft); line-height:1.45; }
.rt-table thead th { position:sticky; top:0; background:var(--accent); color:var(--accent-ink);
  font-family:var(--sans); font-weight:800; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  border-bottom:2px solid var(--ink); }
.rt-table tbody th { font-family:var(--disp); font-style:italic; font-weight:600; color:var(--ink); white-space:nowrap; }
.rt-table tbody tr:last-child td, .rt-table tbody tr:last-child th { border-bottom:0; }
.rt-table tbody tr:nth-child(even) td, .rt-table tbody tr:nth-child(even) th {
  background:color-mix(in oklab, var(--accent) 6%, #fff); }
.rt-table strong { color:var(--ink); }

/* ================================ Fußzeile =============================== */
/* Skip-Link: unsichtbar bis Tastatur-Fokus (WCAG Bypass Blocks) */
.skip-link { position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff;
  padding:10px 18px; font-family:var(--sans); font-weight:600; font-size:14px; text-decoration:none; }
.skip-link:focus { left:12px; top:12px; }

/* No-JS-Fallback: Header/Footer kommen aus site.js, diese Leiste haelt die Routen ohne JS erreichbar */
.noscript-nav { padding:14px 34px; border-bottom:2px solid var(--line); font-family:var(--sans); font-size:14px; }
.noscript-nav a { color:var(--accent-deep); }

.site-foot { border-top:3px solid var(--ink); margin-top:76px; background:var(--ink); color:#efe7d9; }
.site-foot__inner { max-width:var(--wrap); margin:0 auto; padding:48px 34px;
  display:flex; flex-wrap:wrap; gap:30px 52px; align-items:flex-start; }
.foot-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }
.foot-brand img { width:36px; height:36px; }
.foot-brand b { font-family:var(--disp); font-weight:600; font-size:22px; }
.foot-col { display:flex; flex-direction:column; gap:10px; }
.foot-col h4 { font-family:var(--sans); font-size:11.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand-yellow); margin:0 0 4px; }
.foot-col a, .foot-col span { font-size:14px; color:#d9cfbe; text-decoration:none; }
.foot-col a:hover { color:#fff; }
/* Desktop: die drei Link-Spalten als Gruppe nach rechts, groesserer Abstand zum Logo-Block. */
@media (min-width:861px) { .site-foot__inner > .foot-col:nth-child(2) { margin-left:auto; } }
/* Untere Leiste (Desktop): eine Zeile, links Domain, Mitte Copyright, rechts Impressum/Datenschutz.
   Mobil (<=640px): Domain ueber Copyright links, Rechtslinks rechts (Niklas 25.07.). */
.foot-bottom { max-width:var(--wrap); margin:0 auto; padding:13px 34px; border-top:1px solid rgba(255,255,255,.14);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px 22px; font-size:12px; color:#b6ab9a; }
.foot-bottom .fb-domain { justify-self:start; }
.foot-bottom .fb-copy { justify-self:center; text-align:center; }
.foot-bottom .fb-legal { justify-self:end; display:flex; gap:16px; }
.foot-bottom a { color:#b6ab9a; text-decoration:none; }
.foot-bottom a:hover { color:#fff; }
@media (max-width:640px) {
  .foot-bottom { grid-template-columns:1fr auto; grid-template-areas:"domain legal" "copy legal"; align-items:start; row-gap:5px; }
  .foot-bottom .fb-domain { grid-area:domain; }
  .foot-bottom .fb-copy { grid-area:copy; justify-self:start; text-align:left; }
  .foot-bottom .fb-legal { grid-area:legal; align-self:end; flex-direction:column; align-items:flex-end; gap:8px; }
}

/* ================================ Mobil ================================= */
@media (max-width:860px) {
  /* Mobiles Menü = Bubble-Dropdown wie auf der Startseite (vereinheitlicht 25.07.).
     Die Desktop-Leiste .site-nav samt Untermenüs ist mobil komplett aus; die
     Unterpunkte erreicht man über die Bereichsseiten selbst. */
  .site-nav { display:none !important; }
  .site-head { z-index:80; }
  .nav-toggle { display:grid; gap:6px; margin-left:auto; background:none; border:0; padding:9px; cursor:pointer; }
  .nav-toggle .bar { width:32px; height:3px; background:var(--ink); border-radius:2px; transition:transform .2s, opacity .2s; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform:translateY(9px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity:0; }
  .nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform:translateY(-9px) rotate(-45deg); }
  .nav-bubbles { display:flex; position:fixed; top:80px; right:16px; z-index:75; list-style:none; margin:0; padding:0 0 14px;
    visibility:hidden; transition:visibility 0s .4s;  /* geschlossen: raus aus Fokus- und A11y-Baum */
    flex-direction:column; align-items:flex-end; gap:10px; pointer-events:none;
    max-height:calc(100vh - 96px); max-height:calc(100svh - 96px); overflow-y:auto; }
  .nav-bubbles li { opacity:0; transform:translateY(-16px) scale(.85);
    transition:opacity .24s ease, transform .34s cubic-bezier(.34,1.56,.64,1); }
  body.nav-bubbles-open .nav-bubbles { pointer-events:auto; visibility:visible; transition:visibility 0s; }
  body.nav-bubbles-open .nav-bubbles li { opacity:1; transform:none; transition-delay:calc(var(--i)*40ms); }
  .nav-bubble { display:inline-block; min-width:210px; text-align:center; background:var(--bc); color:#fff;
    border:2.5px solid var(--ink); border-radius:999px; padding:13px 27px; font-family:var(--sans);
    font-weight:800; font-size:16px; text-decoration:none; box-shadow:0 4px 0 var(--ink); cursor:pointer; }
  /* Subkategorien: zweites Dropdown im selben Stil, weisse Pillen mit Farb-Rand. */
  .nav-bubble .bcaret { font-size:12px; margin-left:6px; display:inline-block; transition:transform .2s; }
  .has-sub.sub-open > .nav-bubble .bcaret { transform:rotate(180deg); }
  .nav-sub { list-style:none; margin:8px 0 0; padding:0; display:none; flex-direction:column; gap:7px; align-items:flex-end; }
  .has-sub.sub-open .nav-sub { display:flex; }
  .nav-sub a { display:inline-block; min-width:186px; text-align:center; background:#fff; color:var(--ink);
    border:2px solid var(--bc); border-radius:999px; padding:9px 18px; font-family:var(--sans); font-weight:700;
    font-size:14px; text-decoration:none; box-shadow:0 3px 0 var(--ink); }
  .nav-scrim { display:block; position:fixed; inset:0; z-index:70; background:transparent; pointer-events:none; transition:background .25s; }
  body.nav-bubbles-open .nav-scrim { background:rgba(34,29,24,.32); pointer-events:auto; }
  .grid--2, .grid--3 { grid-template-columns:1fr; }
  .step { grid-template-columns:54px 1fr; gap:16px; }
  .page-head { padding:46px 0 22px; }
}
@media (prefers-reduced-motion:reduce) { .nav-bubbles li { transition:none; } }

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