/* ============================================================
   Daniel Schütz · Samtgemeindebürgermeister-Kandidat Elbtalaue
   ------------------------------------------------------------
   Designsystem v2 — abgeleitet aus den Druckmaterialien
   (Blau-Verlauf, kursive Bold-Typo, Gold-Badge) und den
   Referenz-Analysen in /Inspiration:
   · colinallred.com  → warmes Creme-Canvas (#F9F8F4), Foto-Hero,
     Pill-Buttons, Navy-Agenda-Karten, „Paid for by“-Box
   · gallegoforarizona.com → Serif-Fließtext (PT Serif),
     Versal-Index mit Hairlines, dokumentarische Split-Sektionen
   ============================================================ */

@import url("../fonts/fonts.css");

:root {
  --creme: #F8F6F0;          /* Seiten-Canvas (Allred: #F9F8F4) */
  --creme-tief: #EFEBDF;     /* abgesetzte Flächen */
  --nacht: #0C1B3E;          /* tiefes Navy: Text, Footer */
  --navy: #16255C;           /* Karten, Panels */
  --royal: #24346E;          /* Plakat-Verlauf oben */
  --blau: #2C4390;           /* Plakat-Verlauf Mitte */
  --azur: #3E6CB4;           /* Plakat-Verlauf unten */
  --gold: #FFD35E;           /* parteilos-Badge */
  --gold-tief: #8A6400;      /* Gold-Ton für Text auf hellem Grund */
  --linie: rgba(12, 27, 62, 0.16);
  --linie-hell: rgba(255, 255, 255, 0.25);
  --verlauf: linear-gradient(126deg, var(--royal) 0%, var(--blau) 46%, var(--azur) 100%);
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --grotesk: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --serif: "PT Serif", Georgia, serif;
  --radius: 16px;
  --radius-klein: 10px;
  --schatten: 0 18px 40px rgba(12, 27, 62, 0.16);
}

/* ---------- Grundlagen ---------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--nacht);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}

img, video, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--nacht); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--nacht);
  padding: 0.6rem 1rem;
  font-family: var(--grotesk);
  font-weight: 700;
  z-index: 100;
}
.skiplink:focus { left: 0.5rem; top: 0.5rem; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(1.1rem, 3vw, 2rem); }
.wrap-schmal { max-width: 860px; margin: 0 auto; padding: 0 clamp(1.1rem, 3vw, 2rem); }

/* ---------- Typografie ---------- */

h1, h2, h3, h4 { line-height: 1.05; margin: 0 0 0.5em; }

h1, h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.005em;
  color: var(--nacht);
  text-wrap: balance;
}
h2 { font-size: clamp(2.3rem, 4.5vw, 3.4rem); }

h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.65rem;
  color: var(--navy);
}

p { margin: 0 0 1.15em; }

.vorspann {
  font-size: 1.22rem;
  line-height: 1.7;
}

.klein {
  font-family: var(--grotesk);
  font-size: 0.88rem;
  color: rgba(12, 27, 62, 0.72);
}

/* Gold markiertes Wort in Überschriften (Allred: Pinsel-Highlight) */
.gz { font-style: inherit; color: var(--gold-tief); }
h1 .gz, .auf-dunkel .gz { color: var(--gold); }

/* Versal-Kicker (Allred „AGENDA“, Gallego Issue-Index) */
.kicker {
  font-family: var(--grotesk);
  font-style: normal;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-tief);
  margin: 0 0 1.1rem;
}
.auf-dunkel .kicker { color: var(--gold); }

/* Der eine Gold-Badge aus dem Plakat — nur im Hero */
.badge-parteilos {
  display: inline-block;
  background: var(--gold);
  color: var(--nacht);
  font-family: var(--grotesk);
  font-style: italic;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 0.3rem 1.2rem;
  transform: skewX(-12deg);
  margin-bottom: 1.4rem;
}
.badge-parteilos > span { display: inline-block; transform: skewX(12deg); }

/* ---------- Buttons: Pills wie bei Allred ---------- */

.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--nacht);
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95em 2.1em;
  border-radius: 999px;
  border: 2px solid var(--gold);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  background: #FFDF87;
  border-color: #FFDF87;
  color: var(--nacht);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(12, 27, 62, 0.18);
}

.btn-ghost { background: transparent; border-color: var(--linie-hell); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; transform: translateY(-2px); box-shadow: none; }

.btn-navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--nacht); border-color: var(--nacht); color: #fff; }

.btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }

.btn-reihe { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; }

/* Pfeil-Textlink (Allred „Colin's Story →“) */
.pfeil-link {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  border-bottom: 3px solid var(--gold);
  padding-bottom: 0.3em;
}
.pfeil-link::after { content: " →"; }
.pfeil-link:hover { color: var(--gold-tief); }
.auf-dunkel .pfeil-link { color: #fff; }
.auf-dunkel .pfeil-link:hover { color: var(--gold); }

/* ---------- Kopfleiste ---------- */

.termin-leiste {
  background: var(--nacht);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--grotesk);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.55rem 1rem;
}
.termin-leiste strong { color: var(--gold); font-weight: 700; }

/* ---------- Navigation ---------- */

.kopf {
  background: var(--creme);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 50;
}

.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem clamp(1.1rem, 3vw, 2rem);
  max-width: 1240px;
  margin: 0 auto;
}

.marke {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.marke small {
  display: block;
  font-family: var(--grotesk);
  font-style: normal;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-tief);
  margin-top: 0.3rem;
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 1.6rem;
}
.nav a {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--nacht);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 3px solid transparent;
}
.nav a:hover { border-bottom-color: var(--linie); }
.nav a[aria-current="page"] { border-bottom-color: var(--gold); color: var(--navy); }

@media (max-width: 900px) {
  .kopf-innen { justify-content: center; text-align: center; }
  .nav { justify-content: center; }
}

/* ---------- Hero: Navy-Panel auf Creme (Allred-Rahmen) ---------- */

.hero-panel {
  margin: clamp(0.9rem, 2vw, 1.6rem);
  border-radius: var(--radius);
  background: var(--verlauf);
  color: #fff;
  overflow: visible;
}

.hero-innen {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.4rem, 4vw, 3.5rem);
}
@media (max-width: 900px) {
  .hero-innen { grid-template-columns: 1fr; }
}

.hero-panel .kicker { color: var(--gold); }

.hero-panel h1 {
  font-size: clamp(3.6rem, 8.5vw, 6.4rem);
  color: #fff;
  margin-bottom: 0.1em;
}
.hero-panel h1::after {
  content: "";
  display: block;
  width: 82%;
  height: 7px;
  margin-top: 0.13em;
  background: #fff;
}

/* Slogan wie der Film-Abbinder: weiß + gold */
.hero-slogan {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  margin: 0.5em 0 0.6em;
  color: #fff;
}
.hero-slogan .gz { color: var(--gold); }

.hero-text {
  font-size: 1.14rem;
  max-width: 33em;
  color: rgba(255, 255, 255, 0.94);
}

.hero-termin {
  font-family: var(--grotesk);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 1.6rem;
}
.hero-termin strong { color: var(--gold); }

/* Portrait mit versetztem Goldblock (Allred-Collage) */
.hero-foto {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
}
.hero-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(20px, 20px);
  background: var(--gold);
  border-radius: var(--radius);
}
.hero-foto img {
  position: relative;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  width: 100%;
}

/* Rotierendes Kreis-Badge mit Stimmkreuz */
.kreis-badge {
  position: absolute;
  left: -34px;
  bottom: -30px;
  width: 138px;
  height: 138px;
  z-index: 2;
  filter: drop-shadow(0 8px 18px rgba(12, 27, 62, 0.3));
}
.kreis-badge .dreht {
  transform-origin: 50% 50%;
  animation: drehen 26s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .kreis-badge { left: -10px; width: 112px; height: 112px; }
}

/* ---------- Seitenköpfe der Unterseiten: Typo auf Creme ---------- */

.seiten-kopf {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.6rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--linie);
  margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
}
.seiten-kopf h1 {
  font-size: clamp(2.9rem, 6.5vw, 4.8rem);
  color: var(--navy);
}
.seiten-kopf .vorspann { max-width: 42em; margin-bottom: 0.4em; }

/* ---------- Abschnitte ---------- */

.abschnitt { padding: clamp(3rem, 6.5vw, 5.5rem) 0; }
.abschnitt-tief { background: var(--creme-tief); }

.navy-panel {
  margin: 0 clamp(0.9rem, 2vw, 1.6rem);
  border-radius: var(--radius);
  background: var(--verlauf);
  color: #fff;
}
.navy-panel h2 { color: #fff; }
.navy-panel-innen {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.4rem, 4vw, 3.5rem);
}

/* ---------- Split-Sektionen (Gallego) ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}

/* Versal-Index mit Hairlines (Gallego Issue-Liste) */
.index-liste {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}
.index-liste li { border-top: 1px solid var(--linie); }
.index-liste li:last-child { border-bottom: 1px solid var(--linie); }
.index-liste a, .index-liste span {
  display: block;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  padding: 0.95rem 0.2rem;
}
.index-liste a::after { content: " →"; color: var(--gold-tief); }
.index-liste a:hover { color: var(--gold-tief); }
.auf-dunkel .index-liste li { border-color: var(--linie-hell); }
.auf-dunkel .index-liste a, .auf-dunkel .index-liste span { color: #fff; }
.auf-dunkel .index-liste a::after { color: var(--gold); }
.auf-dunkel .index-liste a:hover { color: var(--gold); }

/* ---------- Agenda-Karten (Allred) ---------- */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
  margin-top: 2.4rem;
}

.karte {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-klein);
  padding: 2rem 1.8rem 1.8rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.karte:hover { transform: translateY(-4px); box-shadow: var(--schatten); }
.karte .kicker { color: var(--gold); margin-bottom: 0.7rem; }
.karte h3 {
  color: #fff;
  font-size: 1.75rem;
  margin-bottom: 0.9rem;
}
.karte .btn { align-self: flex-start; margin-top: auto; }

/* Kreuz-Liste (Stimmkreuz als Marker) */
.kreuzliste {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  font-family: var(--grotesk);
  font-size: 0.98rem;
}
.kreuzliste li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.55rem;
}
.kreuzliste li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--gold-tief);
}
.karte .kreuzliste li::before, .auf-dunkel .kreuzliste li::before { color: var(--gold); }
.karte .kreuzliste a { color: rgba(255, 255, 255, 0.92); text-decoration: none; }
.karte .kreuzliste a:hover { color: var(--gold); text-decoration: underline; }

/* ---------- Schwarzes Band (Film-Abbinder) ---------- */

.band {
  background: #0A0C12;
  color: #fff;
  text-align: center;
  padding: clamp(3.4rem, 7vw, 5.5rem) 1.25rem;
}
.band .band-slogan {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);
  line-height: 1.08;
  margin: 0 0 0.35em;
}
.band .band-slogan .gz { color: var(--gold); }
.band p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 40em;
  margin: 0 auto 1.2em;
}

/* ---------- Collage (Über-Teaser) ---------- */

.collage {
  position: relative;
  max-width: 430px;
  margin: 0 auto 1rem;
}
.collage::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(-18px, 18px);
  background: var(--azur);
  border-radius: var(--radius);
  opacity: 0.35;
}
.collage .foto-haupt {
  position: relative;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.collage .foto-klein {
  position: absolute;
  right: -26px;
  bottom: -34px;
  width: 38%;
  border-radius: var(--radius-klein);
  box-shadow: 0 12px 28px rgba(12, 27, 62, 0.3);
  transform: rotate(2.5deg);
  border: 5px solid #fff;
}
@media (max-width: 900px) {
  .collage { margin-bottom: 3rem; }
  .collage .foto-klein { right: 0; }
}

/* ---------- Zeitleiste ---------- */

.zeitleiste {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}
.zeitleiste li {
  position: relative;
  padding: 0 0 1.3rem 1.7rem;
  border-left: 2px solid var(--linie);
  margin-left: 6px;
}
.zeitleiste li:last-child { padding-bottom: 0.2rem; }
.zeitleiste li::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0.4em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--navy);
}
.zeitleiste .jahr {
  display: block;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-tief);
  margin-bottom: 0.15rem;
}

/* ---------- Themen-Seite: nummerierte Vorhaben ---------- */

.thema {
  position: relative;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 1.9rem 2rem 1.4rem 2rem;
  margin-bottom: 1.3rem;
  scroll-margin-top: 130px;
}
.thema .nummer {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gold);
  -webkit-text-stroke: 1.5px var(--gold-tief);
  float: right;
  margin: -0.2rem 0 0.4rem 1rem;
}
.thema h3 { font-size: 1.6rem; margin-bottom: 0.4rem; }
.thema .status {
  display: inline-block;
  font-family: var(--grotesk);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy);
  background: rgba(62, 108, 180, 0.13);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  margin-bottom: 1rem;
}
.thema p:last-child { margin-bottom: 0.5rem; }

.saeule-kopf { margin: 3.6rem 0 1.6rem; }
.saeule-kopf:first-of-type { margin-top: 0; }
.saeule-kopf h2 { color: var(--navy); }
.saeule-kopf p { max-width: 46em; }

/* ---------- Tour-Tabelle ---------- */

.tour-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.tour-tabelle th, .tour-tabelle td {
  text-align: left;
  padding: 0.85rem 0.9rem 0.85rem 0.2rem;
  border-bottom: 1px solid var(--linie);
}
.tour-tabelle th {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-tief);
  border-bottom: 2px solid var(--navy);
}
.tour-tabelle td { font-size: 1rem; }
.tabelle-scroll { overflow-x: auto; }

/* ---------- Wiki-Infobox (Über-Seite) ---------- */

.mit-seitenleiste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .mit-seitenleiste { grid-template-columns: 1fr; }
  .infobox { order: -1; }
}

.infobox {
  background: #fff;
  border: 1px solid var(--linie);
  border-top: 6px solid var(--gold);
  border-radius: var(--radius-klein);
  padding: 1.5rem 1.5rem 1.1rem;
  font-size: 0.92rem;
  position: sticky;
  top: 130px;
}
.infobox h2 {
  font-size: 1.5rem;
  color: var(--navy);
  margin-bottom: 0.9rem;
}
.infobox img { border-radius: 6px; margin-bottom: 1rem; }
.infobox table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.infobox td { overflow-wrap: break-word; }
.infobox th, .infobox td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--linie);
}
.infobox tr:last-child th, .infobox tr:last-child td { border-bottom: none; }
.infobox th {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-tief);
  padding-right: 0.8rem;
  width: 40%;
}

.artikel h2 { margin-top: 2em; font-size: clamp(1.9rem, 3.4vw, 2.4rem); color: var(--navy); }
.artikel h2:first-of-type { margin-top: 0.6em; }
.artikel h1 { color: var(--navy); }

/* ---------- FAQ: Hairline-Accordion ---------- */

.faq details {
  border-top: 1px solid var(--linie);
}
.faq details:last-of-type { border-bottom: 1px solid var(--linie); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 3rem 1.15rem 0.1rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.14rem;
  color: var(--navy);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--gold-tief);
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0.1rem 1.2rem; }
.faq summary:hover { color: var(--blau); }
.faq h2 { margin-top: 1.8em; }
.faq h2:first-of-type { margin-top: 0; }

/* ---------- Mitmachen: Spalten mit Hairlines ---------- */

.mitmachen-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0;
  margin-top: 2.2rem;
  border-top: 1px solid var(--linie);
}
.mitmachen-spalte {
  padding: 1.8rem 1.8rem 1.8rem 0;
  border-bottom: 1px solid var(--linie);
}
@media (min-width: 820px) {
  .mitmachen-spalte { border-right: 1px solid var(--linie); padding-left: 1.8rem; }
  .mitmachen-spalte:first-child { padding-left: 0; }
  .mitmachen-spalte:last-child { border-right: none; }
}
.mitmachen-spalte h3 { font-size: 1.5rem; }
.mitmachen-spalte .gross {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--navy);
  text-decoration: none;
}
.mitmachen-spalte .gross:hover { color: var(--azur); }

/* Umrandete Box (Allred „Paid for by“) */
.rahmen-box {
  border: 1.5px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 1.1rem 1.6rem;
  margin: 2.2rem 0 0;
  font-size: 0.98rem;
}
.rahmen-box strong { font-family: var(--grotesk); }

.hinweis {
  background: rgba(255, 211, 94, 0.18);
  border: 1px solid rgba(138, 100, 0, 0.25);
  border-radius: var(--radius-klein);
  padding: 1rem 1.4rem;
  margin: 1.6rem 0;
  font-size: 0.99rem;
}

/* ---------- Kontakt-Karten ---------- */

.kontakt-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.4rem;
  margin-top: 2rem;
}
.kontakt-karte {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 1.7rem 1.6rem;
}
.kontakt-karte h3 { font-size: 1.45rem; }
.kontakt-karte .gross {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--navy);
  text-decoration: none;
}
.kontakt-karte .gross:hover { color: var(--azur); }

/* ---------- Fakten-Listen ---------- */

dl.fakten { margin: 1rem 0; }
dl.fakten dt {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gold-tief);
  margin-top: 1rem;
}
dl.fakten dd { margin: 0.1rem 0 0; }

.zuletzt {
  font-family: var(--grotesk);
  font-size: 0.85rem;
  color: rgba(12, 27, 62, 0.6);
  margin-top: 2.6rem;
}

/* ---------- Fußbereich ---------- */

.fuss {
  background: var(--nacht);
  color: rgba(255, 255, 255, 0.85);
  padding: 3.4rem 0 2.2rem;
  font-size: 0.98rem;
  margin-top: clamp(2rem, 5vw, 4rem);
}
.fuss a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.35); }
.fuss a:hover { color: var(--gold); }
.fuss h3 {
  font-family: var(--grotesk);
  font-style: normal;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.fuss-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2.2rem;
  margin-bottom: 2.4rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; font-family: var(--grotesk); }
.fuss li { margin-bottom: 0.45rem; }
.fuss p { font-size: 0.95rem; }

.fuss-visdp {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-klein);
  padding: 0.8rem 1.4rem;
  text-align: center;
  font-family: var(--grotesk);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 560px;
  margin: 0 auto 1.6rem;
}

.fuss-ende {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  font-family: var(--grotesk);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

@media print {
  .kopf, .termin-leiste, .fuss, .btn, .btn-reihe { display: none; }
}