/* ==========================================================================
   Grand Road Trip – Design 2026
   Farbwelt inspiriert vom Bus: mattes Schwarz, rot-oranger Racing-Stripe
   mit weißen Sternen, rotes Emblem. Keine externen Ressourcen, nur
   System-Fonts, hell + dunkel über prefers-color-scheme.
   ========================================================================== */

:root {
  /* Bus-Lackierung */
  --brand-red: #c9381a;
  --brand-orange: #ef7b17;
  --stripe: linear-gradient(90deg, var(--brand-red), var(--brand-orange));

  /* Helles Schema (warmes Offwhite statt Klinik-Weiß) */
  --bg: #f7f4f1;
  --card: #ffffff;
  --panel: #efeae5;
  --text: #29241f;
  --muted: #6d655e;
  --heading: #171310;
  --border: #e2dbd4;
  --accent: #b93413;          /* Streifen-Rot, abgedunkelt für Kontrast */
  --accent-hover: #96290e;
  --nav-bg: rgba(18, 16, 15, 0.88);
  --nav-text: #f2ede9;
  --shadow: 0 1px 2px rgba(23, 19, 16, 0.05);
  --shadow-lift: 0 4px 18px rgba(23, 19, 16, 0.12);
  --radius: 2px;
  --radius-sm: 2px;
  --container: 1160px;
  color-scheme: light dark;
  /* Consent-Knoepfe: EINE Farbe fuer beide, damit weder Zustimmung noch
     Ablehnung optisch bevorzugt wird. Rot ist unproblematisch, solange es
     beide tragen - kritisch war nur die fruehere Aufteilung "Zustimmen rot,
     Ablehnen graubraun". Der Hover ist je Modus eigens gesetzt: das
     Marken-Orange traegt weisse Schrift nur mit 2,8:1 und faellt damit
     durch. */
  --cc-btn: #c9381a;         /* 5,2:1 gegen den Banner, 5,2:1 fuer die Schrift */
  --cc-btn-hover: #a82f11;   /* abgedunkelt: 6,8:1 / 6,8:1 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131110;
    --card: #1d1a18;
    --panel: #242019;
    --text: #d9d3cd;
    --muted: #a39a91;
    --heading: #f5f1ed;
    --border: #322d29;
    --accent: #ff7440;
    --accent-hover: #ff9166;
    --nav-bg: rgba(15, 13, 12, 0.9);
    --nav-text: #f2ede9;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-lift: 0 4px 18px rgba(0, 0, 0, 0.5);
    /* Dasselbe Rot traegt auch hier: 3,4:1 gegen --card, 5,2:1 fuer die
       Schrift - beides ueber den WCAG-Schwellen (3:1 fuer Bedienelemente,
       4,5:1 fuer Text). Der Hover wird aufgehellt statt abgedunkelt, sonst
       verschwindet er im dunklen Banner. */
    --cc-btn: #c9381a;
    --cc-btn-hover: #d94020;   /* 3,9:1 gegen --card, 4,5:1 fuer die Schrift */
  }
}

* { box-sizing: border-box; }

/* Das hidden-Attribut setzt nur display:none aus dem Browser-Stylesheet und
   verliert damit gegen jede eigene display-Regel (z. B. .card { display:flex }).
   Ohne diese Zeile bleiben ausgefilterte Beiträge sichtbar. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  /* Racing-Stripe als Signatur ganz oben */
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, #c9381a, #ef7b17) 1;
}

img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand-red);
  color: #fff;
  padding: 12px 20px;
  z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------ Navigation */
.main-nav {
  /* Untere Spur fuer Fortschrittsstrasse und Bus. Knapp bemessen, damit die
     Leiste kompakt bleibt: gemessen bleiben so 13 px Luft zum Menuetext und
     3 px zum Logo (dem tiefsten Element). Beide Werte haengen zusammen -
     wird der Bus groesser, muss die Spur mitwachsen. */
  --nav-spur: 12px;
  --nav-bus-breite: 29px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.main-nav .container {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 60px;
  flex-wrap: wrap;
  /* Untere Spur fuer die Fortschrittsstrasse freihalten, sonst faehrt der
     Bus quer durch Logo und Menuepunkte (.nav-road/.nav-bus) */
  padding-bottom: var(--nav-spur);
}
.main-nav .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  color: var(--nav-text);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.2px;
  padding: 8px 0;
}
.main-nav .brand:hover { color: #fff; }
.main-nav .brand img {
  width: 40px;
  height: auto;
  border-radius: 8px;
  background: #fff;
  padding: 2px;
}
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.main-nav ul a {
  display: block;
  position: relative;
  padding: 17px 14px 15px;
  color: var(--nav-text);
  font-weight: 600;
  font-size: 14.5px;
  /* Kein transparenter Unterrahmen mehr: Die aktive Markierung sitzt jetzt
     unten auf der Fahrbahn. Ein Rahmen wuerde sie um seine Breite nach oben
     schieben, weil sich absolut positionierte Kinder an der Polsterbox
     ausrichten, nicht an der Rahmenbox. */
  transition: background 0.15s ease, color 0.15s ease;
}
/* Die Hover-Flaeche reicht bis auf die Fahrbahn hinunter. Der Link selbst
   bleibt so hoch wie er ist – die Verlaengerung uebernimmt ein Kind, das in
   die Spur hineinragt (--nav-spur), damit die Zeilenhoehe unveraendert bleibt. */
.main-nav ul a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(-1 * var(--nav-spur));
  background: transparent;
  transition: background 0.15s ease;
  z-index: -1;
}
.main-nav ul a:hover { color: #fff; }
.main-nav ul a:hover::before { background: rgba(255, 255, 255, 0.1); }
.main-nav ul a.active { color: #fff; }
/* Die Markierung des aktiven Punktes liegt nicht unter dem Text, sondern
   unten auf der Fortschrittsstrasse – dieselbe Hoehe, dieselbe Linie, damit
   der Bus buendig darueber faehrt. Der Versatz entspricht exakt dem unteren
   Innenabstand der Leiste (--nav-spur). */
.main-nav ul a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--nav-spur));
  height: 3px;
  background: linear-gradient(90deg, #c9381a, #ef7b17);
}
.main-nav .yt-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nav-text);
  font-weight: 600;
  font-size: 14.5px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.main-nav .yt-link:hover {
  background: #f00;
  border-color: #f00;
  color: #fff;
}

/* ------------------------------------------------------------------ Hero */
.hero {
  position: relative;
  height: min(72vw, 560px);
  overflow: hidden;
  background: #191512;
}
.hero .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: heroFade 18s infinite;
}
/* Taktung und @keyframes heroFade haengen von der Anzahl der Bilder ab
   (HERO_SLIDES in build.py) und werden deshalb beim Build unten an diese
   Datei angehaengt – siehe hero_slider_css(). */
@media (prefers-reduced-motion: reduce) {
  .hero .slide.s0 { opacity: 1; }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 12, 10, 0.25) 0%,
              rgba(15, 12, 10, 0.05) 35%, rgba(15, 12, 10, 0.78) 100%);
  z-index: 3;
}
.hero-inner {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  padding-bottom: clamp(24px, 5vw, 56px);
}
.hero-heading {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 30px);
  margin: 0 0 18px;
}
.hero-logo {
  flex: none;
  width: clamp(76px, 13vw, 138px);
  height: auto;
  border-radius: 16px;
  background: #fff;
  padding: 7px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38);
}
.hero-heading-text { min-width: 0; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffd9c4;
  font-weight: 700;
  font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.hero-heading h1 { margin: 0; }
.hero-kicker::before {
  content: "";
  width: 42px;
  height: 3px;
  background: var(--stripe);
}
.hero-inner h1 {
  margin: 0 0 8px;
  font-size: clamp(34px, 7vw, 64px);
  line-height: 1.03;
  font-weight: 900;
  letter-spacing: -1.5px;
  color: #fff;
  text-wrap: balance;
}
.hero-inner p {
  margin: 0 0 22px;
  font-size: clamp(15px, 2.4vw, 19px);
  color: rgba(255, 255, 255, 0.85);
  max-width: 56ch;
}
.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-links a {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 14.5px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background 0.15s ease, transform 0.15s ease;
}
.hero-links a:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }
.hero-links a.primary {
  background: var(--stripe);
  border: 0;
}
.hero-links a.primary:hover { filter: brightness(1.12); }

/* --------------------------------------------------------------- Promo */
.promo {
  background: #171310;
  color: #e8e2dc;
  border-bottom: 1px solid #2a231e;
}
.promo p {
  margin: 0;
  padding: 13px 0;
  font-size: clamp(13.5px, 2vw, 15.5px);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
  text-wrap: balance;
}

/* ------------------------------------------------------------- Weltkarte */
.worldmap-section {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: clamp(28px, 5vw, 52px) 0 clamp(24px, 4vw, 40px);
}
.worldmap-section h2 {
  margin: 0 0 6px;
  font-size: clamp(20px, 3vw, 26px);
  color: var(--heading);
  text-align: center;
}
.worldmap-note {
  margin: 0 auto 20px;
  max-width: 560px;
  color: var(--muted);
  font-size: 14.5px;
  text-align: center;
}
.worldmap {
  display: block;
  width: 100%;         /* volle Content-Breite; Höhe folgt aus der viewBox */
  height: auto;
}
/* Kontur-Design: alle Länder nur als Umrisslinie */
.worldmap path {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 55%, transparent);
  stroke-width: 0.5;
  stroke-linejoin: round;
}
/* Heimat dezent gefüllt */
.worldmap .home path {
  fill: color-mix(in srgb, var(--muted) 22%, transparent);
}
/* Bereiste Länder: gefüllt, klickbar, Tooltip über <title> */
.worldmap a.visited path {
  fill: color-mix(in srgb, var(--accent) 80%, transparent);
  stroke: var(--accent);
  stroke-width: 0.6;
  transition: fill 0.15s ease;
}
.worldmap a.visited circle {
  fill: var(--accent);
  stroke: var(--card);
  stroke-width: 0.8;
  transition: fill 0.15s ease;
}
.worldmap a.visited:hover path,
.worldmap a.visited:focus-visible path,
.worldmap a.visited:hover circle,
.worldmap a.visited:focus-visible circle {
  fill: var(--brand-orange);
}
.worldmap-legend {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
/* Die Legende ist der verlaessliche Weg zu den Laendern: Auf der Karte sind
   Andorra, Monaco und Gibraltar nur wenige Pixel gross und mit dem Finger
   kaum zu treffen. Deshalb hier grosszuegig gepolstert - das ist die
   barrierefreie Alternative zum Kartenklick, nicht blosse Deko. */
.worldmap-legend a {
  display: inline-block;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  text-decoration: none;
}
.worldmap-legend a:hover {
  border-color: color-mix(in srgb, var(--brand-orange) 45%, var(--border));
  color: var(--accent);
}
.worldmap-credit {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
/* Die Lizenzangabe der Karte ist rechtlich verlangt (CC BY-SA 3.0) - die
   Links dahin muessen auch am Telefon treffbar sein. */
.worldmap-credit a {
  color: inherit;
  text-decoration: underline;
  display: inline-block;
  padding: 5px 2px;
}
.worldmap-credit a:hover { color: var(--accent); }

/* --------------------------------------------------------------- Layout */
.content-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: clamp(24px, 4vw, 48px);
  padding-top: clamp(28px, 5vw, 52px);
  padding-bottom: 64px;
}
@media (max-width: 900px) {
  .content-area { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- Cards */
.year-sep {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--heading);
  margin: 44px 0 20px;
}
.year-sep:first-child { margin-top: 0; }
.year-sep::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--stripe);
  opacity: 0.7;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
  border-color: color-mix(in srgb, var(--brand-orange) 45%, var(--border));
  box-shadow: var(--shadow-lift);
}
.card.has-thumb {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
}
@media (max-width: 680px) {
  .card.has-thumb { grid-template-columns: 1fr; }
  .card-thumb img, .card-video { width: 100%; height: 210px; }
}
.card-thumb { display: block; background: #171310; }
.card-thumb img {
  width: 250px;
  height: 100%;
  min-height: 186px;
  object-fit: cover;
  display: block;
}
@media (max-width: 680px) { .card-thumb img { width: 100%; } }
.card-video {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  min-height: 186px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(239, 123, 23, 0.35), transparent 55%),
    linear-gradient(150deg, #211c18, #38302a);
}
.card-body { padding: 20px 24px 22px; }
.card-body h2 {
  margin: 0 0 8px;
  font-size: clamp(18px, 2.4vw, 21px);
  line-height: 1.3;
  letter-spacing: -0.3px;
}
.card-body h2 a { color: var(--heading); }
.card-body h2 a:hover { color: var(--accent); }
.card-body p { margin: 0.5em 0 0; font-size: 15px; }
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.meta a {
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  /* Kurze Kategorienamen wie "UK" waren nur 18 px breit und damit am Telefon
     schwer zu treffen - die Mindestmasse halten den Rahmen gross genug,
     ohne lange Namen aufzublaehen. */
  padding: 5px 10px;
  min-width: 44px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  text-decoration: none;
  font-weight: 600;
}
.meta a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* Senkrechtes Polster an einem Inline-Element vergroessert die Trefferflaeche,
   ohne die Zeilenhoehe zu veraendern - der Textfluss bleibt also unberuehrt. */
.more { white-space: nowrap; font-weight: 700; padding: 9px 0; }

/* ----------------------------------------------------------- Einzelseite */
.single {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 44px);
  box-shadow: var(--shadow);
}
.single h1 {
  margin: 0 0 12px;
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--heading);
  text-wrap: balance;
}
.archive-title {
  font-size: clamp(24px, 3.6vw, 32px);
  font-weight: 900;
  letter-spacing: -0.8px;
  margin: 0 0 10px;
  color: var(--heading);
}
.archive-intro {
  margin: 0 0 26px;
  max-width: 68ch;
  color: var(--muted, #555);
  font-size: 1.02rem;
  line-height: 1.6;
}
.entry { margin-top: 22px; }
.entry p { margin: 0 0 1.15em; }
/* Die E-Mail-Adresse im Impressum ist der einzige Kontaktweg der Seite und
   muss am Telefon zuverlaessig zu treffen sein. Senkrechtes Polster an einem
   Inline-Element vergroessert nur die Trefferflaeche, nicht die Zeilenhoehe. */
.entry a[href^="mailto:"] { padding: 6px 0; }
.entry img {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.entry .aligncenter { display: block; margin: 1.2em auto; }
.entry hr {
  border: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--stripe);
  opacity: 0.5;
  margin: 32px 0;
}
.entry figure { margin: 1.4em 0; }
.entry figcaption { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.entry h2 {
  margin-top: 1.8em;
  font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--heading);
}
.entry h3 { color: var(--heading); font-weight: 700; }
.entry > p > em:only-child { color: var(--muted); font-size: 14px; } /* Bildunterschriften */
.note { color: var(--muted); font-style: italic; }

/* Faktenbox der Reiseberichte */
.entry blockquote {
  margin: 1.4em 0;
  padding: 16px 22px;
  background: var(--panel);
  border-left: 5px solid transparent;
  border-image: linear-gradient(180deg, #c9381a, #ef7b17) 1;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.entry blockquote p { margin: 0.35em 0; }

/* Länderflaggen: vom Build als Inline-SVG erzeugt (FLAGGEN in build.py).
   Flaggen-Emoji scheiden aus – Windows liefert dafür keine Glyphen. Der
   Hauchrand hält helle Flaggen (Monaco, Gibraltar) auf hellem Grund sichtbar. */
.flagge {
  height: 0.78em;
  width: auto;
  vertical-align: -0.05em;
  margin-right: 0.18em;
  border-radius: 1px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.35);
}

/* Routentabelle */
.entry table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14.5px;
  margin: 1.4em 0;
  display: block;
  overflow-x: auto;
  border-radius: var(--radius-sm);
}
.entry th, .entry td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
}
.entry th {
  background: var(--panel);
  color: var(--heading);
}

/* --------------------------------------------------------------- Galerie */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 1.4em 0;
}
.gallery a {
  /* position: relative ist Pflicht, nicht Kosmetik: Die Lupe (::after weiter
     unten) liegt absolut. Ohne einen Bezugspunkt hier haengt sie sich an den
     naechsten positionierten Vorfahren und landet irgendwo auf der Seite
     statt in der Ecke des Bildes. .zoom-wrap macht es genauso. */
  position: relative;
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: opacity 0.15s ease;
}
.gallery a:hover img { opacity: 0.85; }

/* -------------------------------------------------------- YouTube-Embed */
.yt {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(239, 123, 23, 0.3), transparent 55%),
    linear-gradient(150deg, #1c1815, #342c26);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 1.4em 0;
}
.yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.yt-play {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: transparent;
  border: 0;
  color: #e8e2dc;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.yt-play small {
  max-width: 32em;
  padding: 0 16px;
  color: #cbc3bc;
  font-weight: 400;
  font-size: 12.5px;
  margin-top: -6px;
}
.yt-play svg { transition: transform 0.15s ease; }
.yt-play:hover svg { transform: scale(1.12); }
.yt-play:hover svg path:first-child { fill: #f00; fill-opacity: 1; }
/* Nach Einwilligung geladen – die Vorschaufläche bleibt im DOM, damit sie
   beim Widerruf sofort wieder erscheinen kann. */
.yt.loaded .yt-play { display: none; }

/* --------------------------------------------------------------- Sidebar */
.sidebar { min-width: 0; }
.sidebar .widget {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 20px;
  font-size: 14.5px;
  box-shadow: var(--shadow);
}
.sidebar h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--heading);
}
.sidebar h2::before {
  content: "";
  width: 22px;
  height: 3px;
  background: var(--stripe);
  flex: none;
}
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.cat-list li:last-child { border-bottom: 0; }
.cat-list span { color: var(--muted); font-variant-numeric: tabular-nums; }
/* Kurze Kategorienamen ("UK", "Italien") ergaben nur 18 px breite Ziele.
   Der Link fuellt jetzt die Zeilenbreite, sodass die ganze Zeile trifft -
   die Zahl rechts bleibt davon unberuehrt. */
.cat-list li a {
  flex: 1;
  padding: 5px 0;
  min-height: 24px;
  display: flex;
  align-items: center;
}
.button {
  display: inline-block;
  background: var(--brand-red);
  color: #fff;
  padding: 10px 20px;
  border-radius: 2px;
  font-weight: 700;
  transition: background 0.15s ease;
}
.button:hover { background: var(--brand-orange); color: #fff; }

/* ------------------------------------------------------- Post-Navigation */
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  font-size: 14.5px;
  font-weight: 600;
}
.post-nav a {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  max-width: 48%;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.post-nav a:hover { border-color: color-mix(in srgb, var(--brand-orange) 45%, var(--border)); }
.post-nav .next { margin-left: auto; text-align: right; }

/* -------------------------------------------------------- Kontaktformular */
.contact-form label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--heading);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  max-width: 580px;
  padding: 12px 14px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-orange) 30%, transparent);
}
.contact-form .consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 580px;
}
.contact-form .consent input { margin-top: 5px; accent-color: var(--brand-red); }
.contact-form .consent label { font-weight: 400; color: var(--text); }
.contact-form .button { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.contact-form .hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------- Lupe auf antippbaren Bildern */
/* Gilt fuer alles, was die Lightbox oeffnet: Galeriebilder und Einzelbilder im
   Text (die umhuellt assets/js/embeds.js beim Laden mit .zoom-wrap). Ohne
   JavaScript erscheint keine Lupe – dann oeffnet sich auch keine Lightbox. */
.zoom-wrap {
  position: relative;
  display: block;
  line-height: 0;
}
.zoom-wrap img { width: 100%; height: auto; }
.gallery a,
.zoom-wrap { cursor: zoom-in; }
.gallery a::after,
.zoom-wrap::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(23, 19, 16, 0.62) no-repeat center;
  /* Lupe als eingebettetes SVG – keine zusaetzliche Datei, keine Fremdanfrage */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4 21 21M10.5 7.8v5.4M7.8 10.5h5.4'/%3E%3C/svg%3E");
  background-size: 19px 19px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.gallery a:hover::after,
.gallery a:focus-visible::after,
.zoom-wrap:hover::after {
  opacity: 1;
  transform: none;
}
/* Auf Touch-Geraeten gibt es kein Hover – dort dauerhaft dezent anzeigen */
@media (hover: none) {
  .gallery a::after,
  .zoom-wrap::after { opacity: 0.75; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery a::after,
  .zoom-wrap::after { transition: none; }
}

/* ------------------------------- Lesefortschritt: der Bus in der Navigation */
/* Der Bus faehrt auf der Unterkante der (klebenden) Navigationsleiste mit dem
   Lesefortschritt nach rechts. --fortschritt (0…1) setzt assets/js/embeds.js.
   Die Leiste ist in beiden Farbschemata dunkel, deshalb eine helle Silhouette. */
.nav-road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
}
.nav-road::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: calc(var(--fortschritt, 0) * 100%);
  background: linear-gradient(90deg, var(--brand-red), var(--brand-orange));
}
.nav-bus {
  position: absolute;
  bottom: 2px;
  left: calc(var(--fortschritt, 0) * (100% - var(--nav-bus-breite)));
  width: var(--nav-bus-breite);
  height: calc(var(--nav-bus-breite) / 2.06);   /* Seitenverhaeltnis der Grafik */
  background: url("../img/bus-nav.png") no-repeat center / contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
/* Solange nichts gescrollt wurde, waere der Bus nur Deko im Weg */
.nav-road[data-aktiv="nein"] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .nav-bus { display: none; }
}
/* ------------------------------------------- Titelbild auf schmalen Schirmen */
/* Die feste Hoehe min(72vw, 560px) ergibt am Telefon nur rund 270 px, der
   Inhalt (Logo, Titel, Beschreibung, vier Knoepfe) braucht dort aber knapp
   390 px. Weil .hero-inner absolut am unteren Rand haengt und .hero
   overflow:hidden hat, wurden Logo und Ueberschrift oben abgeschnitten -
   ausgerechnet der Seitentitel war am Telefon unsichtbar. Unterhalb von
   720 px laeuft der Inhalt deshalb im normalen Fluss und das Titelbild
   waechst mit ihm; die Mindesthoehe haelt die Bildwirkung. */
@media (max-width: 720px) {
  .hero {
    height: auto;
    min-height: min(72vw, 560px);
    display: flex;
    align-items: flex-end;
  }
  .hero-inner {
    position: static;
    width: 100%;
    padding-top: clamp(28px, 9vw, 48px);
  }
  /* Logo und Titel nebeneinander wird bei dieser Breite zu eng - der Titel
     bekaeme nur noch gut die Haelfte. Deshalb untereinander. */
  .hero-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
  }
  .hero-logo { width: 84px; }
}

/* ------------------------------------------------- Mobilmenue (Burger) */
/* Auf dem Desktop unsichtbar: Schalter und Knopf existieren zwar im HTML,
   spielen dort aber keine Rolle. Der Schalter wird NICHT per display:none
   versteckt, sondern nur optisch - sonst faellt er aus der Tabreihenfolge
   und das Menue waere per Tastatur nicht mehr bedienbar. */
.nav-schalter {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.nav-burger { display: none; }

@media (max-width: 720px) {
  .main-nav { --nav-bus-breite: 24px; }

  /* Der Burger-Knopf: drei Striche, die sich im geoeffneten Zustand zum
     Kreuz drehen. 44x44 px - die von Apple und Google empfohlene
     Mindestgroesse fuer Beruehrungsziele. */
  .nav-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    cursor: pointer;
    border-radius: 4px;
    flex: none;
  }
  .nav-burger span,
  .nav-burger span::before,
  .nav-burger span::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: var(--nav-text);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-burger span { position: relative; }
  .nav-burger span::before { position: absolute; top: -7px; }
  .nav-burger span::after { position: absolute; top: 7px; }

  .nav-schalter:checked ~ .nav-burger span { background: transparent; }
  .nav-schalter:checked ~ .nav-burger span::before { transform: translateY(7px) rotate(45deg); }
  .nav-schalter:checked ~ .nav-burger span::after { transform: translateY(-7px) rotate(-45deg); }

  /* Tastaturfokus sichtbar machen - der Schalter selbst ist unsichtbar,
     also muss der Knopf daneben den Fokus anzeigen. */
  .nav-schalter:focus-visible ~ .nav-burger {
    outline: 3px solid var(--brand-orange);
    outline-offset: 2px;
  }

  /* Zugeklappt: Menue und YouTube-Knopf sind weg, die Leiste ist nur noch
     so hoch wie Logo und Burger - statt wie zuvor ueber 400 px, weil alle
     Punkte umbrachen. */
  .main-nav ul,
  .main-nav .yt-link { display: none; }

  .nav-schalter:checked ~ ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    margin-top: 8px;
  }
  .nav-schalter:checked ~ .yt-link {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
  }
  /* Volle Zeilenbreite als Beruehrungsziel, nicht nur der Text. */
  .nav-schalter:checked ~ ul > li > a,
  .nav-schalter:checked ~ ul .dropdown summary {
    padding: 13px 4px;
    font-size: 16px;
  }
  /* Der aktive Punkt wird im Klappmenue links markiert - die Fahrbahn-
     Markierung unten ergaebe hier keinen Sinn, sie laege quer im Menue. */
  .nav-schalter:checked ~ ul > li > a.active::after {
    left: -8px;
    right: auto;
    top: 8px;
    bottom: 8px;
    width: 3px;
    height: auto;
  }
  /* Laenderliste im Klappmenue: zweispaltig, sonst wird das Menue endlos. */
  .nav-schalter:checked ~ ul .dropdown-panel {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: none;
    border: 0;
    background: rgba(0, 0, 0, 0.22);
    min-width: 0;
    padding: 4px;
  }
  .nav-schalter:checked ~ ul .dropdown-panel a { padding: 11px 8px; }
}

/* --------------------------------------------- Datenkarte im Quartett-Stil */
/* .entry figure setzt margin: 1.4em 0 und hat die hoehere Spezifitaet
   (0-1-1 gegen 0-1-0) – deshalb hier ebenfalls zweiklassig, sonst laesst
   sich die Karte nicht zentrieren. */
.entry .quartett,
.quartett {
  max-width: 380px;
  margin: 1.8em auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.q-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-orange));
  color: #fff;
}
.q-nr {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
}
.q-titel {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.2;
}
.q-titel small {
  font-weight: 500;
  font-size: 12.5px;
  opacity: 0.9;
  letter-spacing: 0.2px;
}
.q-bild {
  display: block;
  width: 100%;
  height: auto;
  padding: 14px 16px 6px;
  background: var(--panel);
}
.q-werte { margin: 0; padding: 6px 0; }
.q-werte > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
}
.q-werte > div:first-child { border-top: 0; }
.q-werte dt {
  font-size: 13.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.q-werte dd {
  margin: 0;
  font-weight: 800;
  font-size: 16px;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.q-fuss {
  margin: 0;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  font-size: 12.5px;
  color: var(--muted);
  text-align: right;
}

/* ------------------------------------------- Bild mit Unterschrift (Seiten) */
.page-figure { margin: 1.6em 0; }
.page-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
.page-figure figcaption {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* --------------------------------------------------------- Jahresfilter */
.year-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.yf-label {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--muted);
  margin-right: 4px;
}
.yf-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-size: 14.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.yf-btn span { font-size: 13px; font-weight: 600; color: var(--muted); }
.yf-btn:hover { border-color: var(--accent); color: var(--accent); }
.yf-btn:hover span { color: var(--accent); }
.yf-btn.is-active {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}
.yf-btn.is-active span { color: rgba(255, 255, 255, 0.75); }
.yf-status {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}
.yf-status:empty { display: none; }

/* Lizenzangabe unter zitierten Wikipedia-Absätzen */
.wiki-quelle {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ------------------------------------ Hinweis über den „The Moment"-Texten */
.retro-note {
  border-left: 4px solid transparent;
  border-image: linear-gradient(180deg, #c9381a, #ef7b17) 1;
  background: var(--panel);
  padding: 14px 18px;
  margin: 0 0 1.6em;
  font-size: 14.5px;
  line-height: 1.6;
}
.retro-note p { margin: 0 0 6px; }
.retro-note p:last-child { margin: 0; color: var(--muted); font-size: 13.5px; }

/* --------------------------------------------------------- Instagram-Link */
/* --------------------------------------------------- Instagram (2-Klick) */
.ig {
  border: 1px solid var(--border);
  background: var(--panel);
  max-width: 540px;
  margin: 1.4em 0;
  text-align: center;
}
.ig-load {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 20px 22px;
  background: transparent;
  border: 0;
  color: var(--heading);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.ig-load small { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.ig-load:hover { color: var(--accent); }
.ig-fallback {
  display: block;
  padding: 0 20px 18px;
  font-size: 13.5px;
  font-weight: 600;
}
.ig.loaded { border: 0; background: none; }
.ig.loaded .ig-load,
.ig.loaded .ig-fallback { display: none; }
.ig iframe {
  width: 100%;
  height: 800px; /* Startwert – wird per Instagram-Resize-Message exakt gesetzt */
  border: 1px solid var(--border);
  display: block;
  background: #fff;
}

/* ---------------------------------------------------------------- Footer */
.site-footer {
  background: #171310;
  color: #a89f96;
  font-size: 14px;
  margin-top: 32px;
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, #c9381a, #ef7b17) 1;
}
.site-footer .container {
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
}
.site-footer p { margin: 6px 0; }
.footer-nav { margin-bottom: 12px; font-weight: 600; }
.footer-nav a { color: #e8e2dc; }
.footer-nav a:hover { color: var(--brand-orange); }
/* Impressum und Datenschutz muessen am Telefon sicher zu treffen sein - als
   reine Textzeile waren sie nur 19 px hoch. Das Polster vergroessert die
   Trefferflaeche, ohne die Zeile optisch auseinanderzuziehen. */
.footer-nav a,
.footer-nav .cc-textlink {
  display: inline-block;
  padding: 8px 4px;
}


/* ------------------------------------------------ Reisen-Aufklappmenue */
.main-nav .dropdown { position: relative; }
.main-nav details summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 14px 15px;
  color: var(--nav-text);
  font-weight: 600;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 7px;
  user-select: none;
}
.main-nav details summary::-webkit-details-marker { display: none; }
.main-nav details summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}
.main-nav details[open] summary::after { transform: rotate(225deg) translateY(-1px); }
/* Gleiche verlaengerte Hover-Flaeche wie bei den Links */
.main-nav details summary { position: relative; }
.main-nav details summary::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(-1 * var(--nav-spur));
  background: transparent;
  transition: background 0.15s ease;
  z-index: -1;
}
.main-nav details summary:hover,
.main-nav details[open] summary { color: #fff; }
.main-nav details summary:hover::before,
.main-nav details[open] summary::before { background: rgba(255, 255, 255, 0.1); }
/* hohe Spezifität nötig, damit die Nav-Link-Styles das Panel nicht
   überschreiben (weiße Schrift auf weißem Grund) */
.main-nav ul.dropdown-panel {
  position: absolute;
  /* Unter die ganze Leiste, nicht nur unter den Menuepunkt: sonst schneidet
     das Panel in die Busspur (--nav-spur) hinein. */
  top: calc(100% + var(--nav-spur));
  left: 0;
  z-index: 150;
  display: block;
  min-width: 230px;
  max-width: calc(100vw - 32px);
  max-height: min(68vh, 580px);
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, #c9381a, #ef7b17) 1;
  box-shadow: var(--shadow-lift);
}
.main-nav ul.dropdown-panel li { display: block; width: 100%; }
.main-nav ul.dropdown-panel a {
  display: block;
  padding: 10px 14px;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  border: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.main-nav ul.dropdown-panel a:hover {
  background: var(--panel);
  color: var(--accent);
}
.main-nav ul.dropdown-panel .dropdown-all {
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  padding-bottom: 4px;
}
.main-nav ul.dropdown-panel .dropdown-all a { color: var(--accent); }

/* --------------------------------------------------------------- Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(12, 10, 9, 0.94);
}
.lightbox.open { display: flex; }
.lightbox figure {
  margin: 0;
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  display: block;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6);
}
.lightbox figcaption {
  color: #cfc8c1;
  font-size: 14px;
  text-align: center;
  min-height: 1em;
}
.lightbox button {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  width: 46px;
  height: 46px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.lightbox button:hover { background: rgba(255, 255, 255, 0.22); }
.lb-close { top: 18px; right: 18px; font-size: 20px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lb-count {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: #cfc8c1;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
  .lightbox button { width: 40px; height: 40px; }
}

/* ------------------------------------------------- Einwilligung (Consent) */
/* Das Banner liegt unten und überdeckt die Seite bewusst NICHT: Inhalte,
   Impressum und Datenschutz bleiben ohne Einwilligung erreichbar
   (keine „Cookie-Wall"). */
.cc-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  background: var(--card);
  color: var(--text);
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, #c9381a, #ef7b17) 1;
  box-shadow: 0 -6px 30px rgba(23, 19, 16, 0.22);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.cc-banner.cc-in { transform: none; }
.cc-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px 16px 18px;
  max-height: 74vh;
  overflow-y: auto;
}
.cc-inner h2 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--heading);
}
.cc-inner p { margin: 0 0 10px; max-width: 80ch; font-size: 14px; line-height: 1.6; }
.cc-inner .cc-small { font-size: 13px; color: var(--muted); }
.cc-banner:focus { outline: none; }

/* Gleichwertige Buttons: identische Größe, Schrift und Gewichtung für
   Annahme und Ablehnung (Vorgabe der Aufsichtsbehörden, kein Dark Pattern). */
.cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0 12px;
}
.cc-btn {
  flex: 1 1 220px;
  min-height: 46px;
  padding: 12px 18px;
  border: 2px solid transparent;
  border-radius: 2px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
/* „Alle akzeptieren" und „Alle ablehnen": gleiche Groesse, Position, Schrift,
   Klickzahl UND Farbe. Die DSK verlangt Gleichwertigkeit in Groesse, Farbe und
   Platzierung, die EDPB-Taskforce beurteilt Farbe/Kontrast im Einzelfall -
   ihre Negativbeispiele sind "Ablehnen kaum lesbar" oder "geht im Hintergrund
   unter", nicht "andere Farbe". Frueher trug nur "Akzeptieren" das Signalrot;
   im dunklen Modus stand "Ablehnen" damit bei 1,8:1 fast unsichtbar vor dem
   Banner, waehrend das Rot mit 3,4:1 heraussprang. Wer die Farbe aendert:
   beide Regeln zusammen aendern und die Kontraste in BEIDEN Modi pruefen. */
.cc-btn[data-cc="accept"],
.cc-btn[data-cc="reject"] { background: var(--cc-btn); }
.cc-btn[data-cc="accept"]:hover,
.cc-btn[data-cc="reject"]:hover { background: var(--cc-btn-hover); }
.cc-btn[data-cc="save"] {
  background: transparent;
  border-color: var(--border);
  color: var(--heading);
}
.cc-btn[data-cc="save"]:hover { border-color: var(--accent); color: var(--accent); }

.cc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  font-size: 13.5px;
}
.cc-textlink {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: inherit;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.cc-textlink:hover { color: var(--accent-hover); }

/* Zweite Ebene: Einstellungen je Dienst */
.cc-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: 86vh;
  padding: 0;
  border: 1px solid var(--border);
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, #c9381a, #ef7b17) 1;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-lift);
}
.cc-dialog::backdrop { background: rgba(12, 10, 9, 0.62); }
.cc-dialog-inner { padding: 24px; }
.cc-dialog h2 { margin: 0 0 10px; font-size: 20px; color: var(--heading); }
.cc-dialog > .cc-dialog-inner > p { font-size: 14px; line-height: 1.6; }
.cc-opt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.cc-opt input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--brand-red);
}
.cc-opt label { font-weight: 700; color: var(--heading); font-size: 15px; }
.cc-opt p {
  grid-column: 2;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}
.cc-opt-fixed input { opacity: 0.6; }
.cc-dialog .cc-actions { margin-top: 18px; }
.cc-dialog .cc-links { margin-top: 4px; }

@media (max-width: 560px) {
  .cc-btn { flex: 1 1 100%; }
  .cc-inner { padding: 16px 16px 14px; max-height: 68vh; }
  .cc-inner h2 { font-size: 16px; }
  .cc-inner p { font-size: 13.5px; line-height: 1.55; }
  .cc-inner .cc-small { font-size: 12.5px; }
  .cc-actions { gap: 10px; margin: 12px 0 10px; }
  .cc-dialog-inner { padding: 20px 18px; }
}

/* Widerrufslink im Footer */
.site-footer .cc-textlink { color: #e8e2dc; }
.site-footer .cc-textlink:hover { color: var(--brand-orange); }

/* --- vom Build erzeugt (hero_slider_css in build.py) – nicht hier ändern ---
   8 Bilder, je 5s, Gesamtlauf 40s */
.hero .slide { animation-duration: 40s; }
.hero .slide.s0 { animation-delay: 0s; }
.hero .slide.s1 { animation-delay: 5s; }
.hero .slide.s2 { animation-delay: 10s; }
.hero .slide.s3 { animation-delay: 15s; }
.hero .slide.s4 { animation-delay: 20s; }
.hero .slide.s5 { animation-delay: 25s; }
.hero .slide.s6 { animation-delay: 30s; }
.hero .slide.s7 { animation-delay: 35s; }
@keyframes heroFade {
  0%          { opacity: 0; z-index: 2; transform: scale(1); }
  1.800%      { opacity: 1; }
  12.500%    { opacity: 1; transform: scale(1.045); }
  15.500%     { opacity: 0; z-index: 1; }
  100%        { opacity: 0; }
}