/*!
 * Dortmund-Kalender 2027, Version 3: schenken und freiwillig spenden.
 * Eigenständiges Stylesheet für /landingpage/aktion/, mobile first.
 * Gestaltung aus zwei Quellen: Calendar Companion (Navy, Blau, viel Weißraum)
 * und Innovation Companion (Tinte, gelber Marker, Montserrat).
 */

/* ---------------------------------------------------------------- Schrift */
@font-face {
  font-family: 'Montserrat';
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  src: url(/landingpage/assets/fonts/Montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  src: url(/landingpage/assets/fonts/Montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 'Source Sans 3';
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url(/landingpage/assets/fonts/SourceSans3-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ---------------------------------------------------------------- Tokens */
:root {
  --navy: #1c244b;            /* Calendar Companion, Überschriften und Flächen */
  --navy-tief: #141a36;
  --navy-hell: #eef1f8;
  --blau: #0c4da2;            /* Calendar Companion, Links und zweite Aktion */
  --blau-dunkel: #09397a;
  --blau-weich: #dcf4ff;
  --gelb: #ffdf48;            /* Innovation Companion, Hauptaktion und Marker */
  --gelb-weich: #fff6cf;
  --gelb-tief: #e8c200;
  --tinte: #212331;
  --grau: #596072;
  --linie: #e1e4ec;
  --flaeche: #f4f6f8;
  --weiss: #ffffff;
  --rot: #b3261e;
  --gruen: #1d6b35;

  --radius: 14px;
  --radius-s: 8px;
  --schatten: 0 12px 30px rgba(28, 36, 75, .10);
  --breite: 1180px;
  --text: 66ch;
  --abstand: clamp(56px, 7vw, 100px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--tinte);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}
/* height:auto ist nötig, weil die width/height-Attribute am Bild sonst als
   feste Höhe wirken und aspect-ratio überstimmen. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau); }
a:hover { color: var(--blau-dunkel); }

h1, h2, h3, h4 {
  font-family: 'Montserrat', system-ui, sans-serif;
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy);
}
h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; max-width: var(--text); }
ul, ol { max-width: var(--text); }

/* Gelber Marker hinter einzelnen Wörtern, wie auf innovation-companion.de */
.marker { background: linear-gradient(to top, var(--gelb) 42%, transparent 42%); padding: 0 .08em; }

.container { width: min(var(--breite), 100% - 40px); margin-inline: auto; }
@media (max-width: 480px) { .container { width: calc(100% - 32px); } }
section { padding: var(--abstand) 0; }
.flaeche { background: var(--flaeche); }
.dunkel { background: var(--navy); color: #fff; }
.dunkel h2, .dunkel h3 { color: #fff; }
.dunkel p { color: rgba(255, 255, 255, .88); }
.dunkel a:not(.btn) { color: var(--gelb); }

.eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blau); margin: 0 0 .7rem; }
.dunkel .eyebrow { color: var(--gelb); }
.lead { font-size: 1.15rem; }
.klein { font-size: .95rem; color: var(--grau); }
.dunkel .klein { color: rgba(255, 255, 255, .78); }
.kopf { margin-bottom: clamp(28px, 4vw, 48px); }
.kopf h2::after { content: ""; display: block; width: 64px; height: 4px; background: var(--gelb); margin-top: .5em; border-radius: 2px; }
.mitte { text-align: center; }
.mitte h2::after { margin-inline: auto; }
.mitte p { margin-inline: auto; }

/* ---------------------------------------------------------------- Fokus */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 2px;
  border-radius: 4px;
}
.dunkel :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--gelb); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--gelb); color: var(--navy); padding: 12px 18px; border-radius: var(--radius-s); font-weight: 700; transition: top .15s ease; }
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px;
  border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.btn-primaer { background: var(--gelb); color: var(--navy); }
.btn-primaer:hover { background: var(--gelb-tief); color: var(--navy); }
.btn-blau { background: var(--blau); color: #fff; }
.btn-blau:hover { background: var(--blau-dunkel); color: #fff; }
.btn-rand { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-rand:hover { background: var(--navy); color: #fff; }
.dunkel .btn-rand, .btn-rand.light { color: #fff; border-color: rgba(255, 255, 255, .7); }
.dunkel .btn-rand:hover, .btn-rand.light:hover { background: #fff; color: var(--navy); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-klein { min-height: 46px; padding: 11px 20px; font-size: .95rem; }
.btn-reihe { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4em 0 0; }
.btn .spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dreh .8s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Header */
.kopfzeile { position: sticky; top: 0; z-index: 90; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linie); }
.kopfzeile .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.marke { display: flex; align-items: center; gap: 12px; color: var(--navy); text-decoration: none; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 800; letter-spacing: -.01em; }
.marke .jahr { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--navy); color: var(--gelb); font-size: 1rem; }
.marke span small { display: block; font-weight: 500; font-size: .72rem; letter-spacing: .12em; color: var(--grau); text-transform: uppercase; font-family: 'Source Sans 3', sans-serif; }
.hauptnav ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.hauptnav a { color: var(--navy); text-decoration: none; font-size: .96rem; font-weight: 600; padding: 10px 2px; display: inline-block; white-space: nowrap; }
.hauptnav a:hover { color: var(--blau); }
.hauptnav a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--gelb); }
.nav-knopf { display: none; min-width: 48px; min-height: 48px; align-items: center; justify-content: center; gap: 8px; background: transparent; border: 2px solid var(--linie); border-radius: var(--radius-s); color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; }
.nav-knopf svg { width: 22px; height: 22px; }
@media (max-width: 1179px) {
  .nav-knopf { display: inline-flex; }
  .hauptnav { position: absolute; left: 0; right: 0; top: 100%; background: var(--weiss); border-bottom: 1px solid var(--linie); box-shadow: var(--schatten); display: none; }
  .hauptnav[data-offen="true"] { display: block; }
  .hauptnav ul { flex-direction: column; gap: 0; padding: 8px 20px 18px; }
  .hauptnav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--linie); }
}
@media (max-width: 760px) { .kopfzeile .btn { display: none; } }

/* ---------------------------------------------------------------- Hero */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; padding: clamp(40px, 6vw, 86px) 0 clamp(48px, 7vw, 92px); }
.hero .bild { position: absolute; inset: 0; background-size: cover; background-position: center 40%; }
.hero .bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20, 26, 54, .96) 0%, rgba(20, 26, 54, .92) 48%, rgba(20, 26, 54, .6) 100%); }
.hero .container { position: relative; display: grid; gap: clamp(30px, 5vw, 56px); }
@media (min-width: 900px) { .hero .container { grid-template-columns: 1.05fr .95fr; align-items: center; } }
.hero h1 { color: #fff; }
.hero p { color: rgba(255, 255, 255, .92); }
.hero .lead { font-size: clamp(1.08rem, 2.2vw, 1.28rem); }
.hero .hinweis { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); border-left: 4px solid var(--gelb); border-radius: var(--radius-s); padding: 14px 18px; font-size: 1rem; max-width: var(--text); }
.hero .klein { color: rgba(255, 255, 255, .78); }
.merkmale { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 20px 0 0; padding: 0; }
.merkmale li { display: flex; align-items: center; gap: 0; font-size: .97rem; color: rgba(255, 255, 255, .92); }
.merkmale svg { width: 19px; height: 19px; color: var(--gelb); flex: 0 0 auto; margin-right: 8px; }
.traeger-zeile { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .25); font-size: .93rem; color: rgba(255, 255, 255, .84); max-width: var(--text); }
.traeger-zeile b { color: #fff; }
/* ---------------------------------------------------------------- Karten */
.karten { display: grid; gap: 22px; }
@media (min-width: 760px) { .karten.zwei { grid-template-columns: 1fr 1fr; } .karten.drei { grid-template-columns: repeat(3, 1fr); } }
.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 4px; }
.karte h3 { margin-bottom: .3em; }
.karte p { flex: 1; }
.karte .symbol { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: var(--blau-hell); color: var(--blau); margin-bottom: 12px; }
.karte .symbol svg { width: 24px; height: 24px; }
.karte.akzent { border-top: 4px solid var(--tuerkis-hell); }

/* ---------------------------------------------------------------- Ablauf */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: schritt; max-width: none; }
@media (min-width: 860px) { .ablauf { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.ablauf li { position: relative; padding-top: 44px; counter-increment: schritt; }
.ablauf li::before { content: counter(schritt); position: absolute; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 700; display: grid; place-items: center; }
.ablauf li::after { content: ""; position: absolute; top: 17px; left: 42px; right: 0; height: 2px; background: var(--linie); }
@media (max-width: 859px) { .ablauf li::after { display: none; } }
.ablauf li:last-child::after { display: none; }
.ablauf b { display: block; color: var(--blau); }
.ablauf span { color: var(--grau); font-size: .95rem; }

/* ---------------------------------------------------------------- Galerie */
.galerie-kopf { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; }
.filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0; }
.filter .gruppe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter label { font-size: .9rem; color: var(--grau); font-weight: 600; }
.chip { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--linie); background: var(--weiss); color: var(--tinte); font: inherit; font-size: .92rem; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 700; }
.galerie { display: grid; gap: 18px; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; max-width: none; }
@media (min-width: 640px) { .galerie { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.foto { border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; background: var(--weiss); display: flex; flex-direction: column; }
.foto figure { margin: 0; position: relative; }
.foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--flaeche); }
.foto .marker-bild { position: absolute; top: 10px; left: 10px; background: rgba(1, 37, 106, .88); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .04em; padding: 6px 10px; border-radius: 999px; }
.foto .text { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.foto .titel { font-weight: 700; color: var(--blau); }
.foto .ort { font-size: .9rem; color: var(--grau); display: flex; align-items: center; gap: 6px; }
.foto .ort svg { width: 15px; height: 15px; }
.foto .reihe { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.foto .stimmen { font-size: .9rem; color: var(--grau); }
.stimm-status { font-size: .88rem; margin: 0; }
.stimm-status.ok { color: var(--gruen); }
.stimm-status.fehler { color: var(--rot); }

/* ---------------------------------------------------------------- Upload */
.schritte { display: grid; gap: 22px; }
@media (min-width: 900px) { .schritte { grid-template-columns: 1fr 1fr; align-items: start; } }
.schritt-kopf { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--blau); margin-bottom: 10px; }
.schritt-kopf .nr { width: 28px; height: 28px; border-radius: 50%; background: var(--blau); color: #fff; display: grid; place-items: center; font-size: .9rem; }
.dropzone { border: 2px dashed var(--linie); border-radius: var(--radius); background: var(--flaeche); padding: 26px 20px; text-align: center; }
.dropzone.hover { border-color: var(--orange); background: var(--orange-weich); }
.dropzone svg { width: 34px; height: 34px; color: var(--blau); margin-bottom: 8px; }
.dropzone p { margin: 0 auto .8em; }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vorschau { display: none; gap: 16px; align-items: center; margin-top: 16px; }
.vorschau.an { display: flex; }
.vorschau img { width: 110px; height: 82px; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--linie); }
.vorschau .daten { font-size: .92rem; color: var(--grau); }
.fortschritt { height: 8px; border-radius: 999px; background: var(--linie); overflow: hidden; margin-top: 12px; display: none; }
.fortschritt.an { display: block; }
.fortschritt i { display: block; height: 100%; width: 10%; background: var(--orange); transition: width .3s ease; }
.pruefung { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-s); font-size: .95rem; display: none; }
.pruefung.an { display: block; }
.pruefung.laeuft { background: var(--flaeche); border: 1px solid var(--linie); color: var(--grau); }
.pruefung.ok { background: #eaf7ee; border: 1px solid #b7e3c4; color: var(--gruen); }
.pruefung.fehler { background: #fdecec; border: 1px solid #f3c2c2; color: var(--rot); }
.pruefung strong { display: block; }
.checkliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checkliste li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.checkliste svg { width: 18px; height: 18px; color: var(--tuerkis); flex: 0 0 auto; margin-top: 3px; }

/* ---------------------------------------------------------------- Formular */
.formular { display: grid; gap: 16px; }
@media (min-width: 620px) { .formular .halb { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } }
.feld { display: grid; gap: 6px; }
.feld label { font-weight: 600; font-size: .95rem; }
.feld .hilfe { font-size: .85rem; color: var(--grau); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--linie); border-radius: var(--radius-s);
  font: inherit; color: var(--tinte); background: var(--weiss);
}
.feld textarea { min-height: 110px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--blau); }
.feld[data-fehler="true"] input, .feld[data-fehler="true"] select, .feld[data-fehler="true"] textarea { border-color: var(--rot); background: #fff8f8; }
.feld .fehler { color: var(--rot); font-size: .88rem; }
.kasten { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.kasten input { width: 22px; height: 22px; min-height: 22px; margin-top: 2px; flex: 0 0 auto; }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fehlerliste { display: none; border: 2px solid var(--rot); background: #fdecec; border-radius: var(--radius-s); padding: 14px 18px; }
.fehlerliste.an { display: block; }
.fehlerliste h3 { color: var(--rot); font-size: 1rem; margin: 0 0 .4em; }
.fehlerliste ul { margin: 0; padding-left: 18px; }
.ergebnis { display: none; border-radius: var(--radius); padding: 20px 22px; }
.ergebnis.an { display: block; }
.ergebnis.ok { background: #eaf7ee; border: 1px solid #b7e3c4; }
.ergebnis.fehler { background: #fdecec; border: 1px solid #f3c2c2; }

/* ---------------------------------------------------------------- Wirkung */
.fluss { display: grid; gap: 10px; list-style: none; margin: 0 0 26px; padding: 0; max-width: none; }
@media (min-width: 820px) { .fluss { grid-template-columns: repeat(4, 1fr); align-items: stretch; } }
.fluss li { position: relative; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--radius-s); padding: 14px 16px; font-weight: 600; }
.fluss li > span { display: block; font-weight: 400; font-size: .9rem; color: rgba(255, 255, 255, .78); }
@media (min-width: 820px) { .fluss li:not(:last-child)::after { content: "›"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--tuerkis-hell); font-size: 1.5rem; } }
.wirkung { display: grid; gap: 20px; }
@media (min-width: 760px) { .wirkung { grid-template-columns: 1fr 1fr; } }
.wirkung .karte { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; }
.wirkung .karte h3 { color: var(--tuerkis-hell); font-size: 1.45rem; }
.wirkung .karte p { color: rgba(255, 255, 255, .86); }

/* ---------------------------------------------------------------- Kalender-Mockups */
.mockup { background: #fff; color: #111; border-radius: 4px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); overflow: hidden; aspect-ratio: 210 / 297; display: flex; flex-direction: column; max-width: 420px; margin-inline: auto; width: 100%; }
.mockup .foto-teil { position: relative; flex: 0 0 56%; overflow: hidden; }
.mockup .foto-teil img { width: 100%; height: 100%; object-fit: cover; }
.mockup .titel-text { position: absolute; top: 5%; left: 6%; right: 6%; color: #fff; }
.mockup .titel-text b { display: block; font-weight: 200; font-size: clamp(1.4rem, 7cqw, 2.6rem); letter-spacing: .18em; line-height: 1; }
.mockup .titel-text i { display: block; font-style: normal; font-weight: 200; font-size: clamp(1.2rem, 6cqw, 2.2rem); letter-spacing: .18em; color: var(--orange-hell); line-height: 1.1; }
.mockup .unten { flex: 1; padding: 5% 6%; display: flex; flex-direction: column; gap: 4%; }
.mockup .wort { font-weight: 200; letter-spacing: .14em; font-size: clamp(.8rem, 4cqw, 1.3rem); color: var(--blau-dunkel); border-bottom: 1px solid var(--linie); padding-bottom: 3%; }
.mockup .spenden { display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: clamp(.5rem, 2.1cqw, .72rem); }
.mockup .spenden b { display: block; color: var(--blau-dunkel); }
.mockup .spenden img { width: 42px; height: 42px; }
.mockup .logos { border-top: 1px solid var(--linie); padding-top: 3%; }
.mockup .logos .stufe { font-size: clamp(.42rem, 1.8cqw, .62rem); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-bottom: 4px; }
.mockup .logos .platz { display: flex; gap: 8px; }
.mockup .logos .platz i { display: block; flex: 1; height: 22px; background: #d9d9d9; border-radius: 3px; }
.mockup .logos .klein i { height: 12px; }
.mockup--monat .foto-teil { flex: 0 0 42%; }
.mockup--monat .unten { padding: 4% 6% 5%; gap: 3%; }
.mockup--monat .bildzeile { font-size: clamp(.42rem, 1.8cqw, .62rem); color: var(--grau); }
.mockup--monat .monat { font-weight: 300; letter-spacing: .1em; font-size: clamp(.9rem, 4.4cqw, 1.5rem); color: #111; }
.mockup--monat .monat span { color: var(--blau); }
.mockup--monat table { width: 100%; border-collapse: collapse; font-size: clamp(.34rem, 1.6cqw, .58rem); }
.mockup--monat th { font-weight: 500; letter-spacing: .06em; text-transform: uppercase; border: 1px solid #e6e6e6; padding: .4em .2em; color: #333; }
.mockup--monat td { border: 1px solid #e6e6e6; height: 2.3em; text-align: right; vertical-align: top; padding: .25em .4em; }
.mockup--monat .we { color: #d12b2b; }
.mockup--monat tfoot td { border: 0; }
.mockup-hinweis { text-align: center; font-size: .85rem; color: var(--grau); margin-top: 12px; }
.hero .mockup-hinweis { color: rgba(255, 255, 255, .78); }

/* ---------------------------------------------------------------- Sponsoren */
.pakete { display: grid; gap: 22px; }
@media (min-width: 900px) { .pakete { grid-template-columns: repeat(3, 1fr); } }
.paket { position: relative; display: flex; flex-direction: column; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 26px; }
.paket.hervor { border-color: var(--orange); box-shadow: 0 14px 34px rgba(196, 90, 0, .18); }
.paket .marke-oben { position: absolute; top: -13px; left: 24px; background: var(--orange); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }
.paket .preis { font-size: 2rem; font-weight: 700; color: var(--blau); margin: 4px 0 2px; }
.paket .preis small { display: block; font-size: .9rem; font-weight: 400; color: var(--grau); }
.paket ul { list-style: none; margin: 16px 0 22px; padding: 0; flex: 1; display: grid; gap: 10px; }
.paket li { display: flex; gap: 10px; align-items: flex-start; font-size: .97rem; }
.paket li svg { width: 18px; height: 18px; color: var(--tuerkis); flex: 0 0 auto; margin-top: 3px; }
.fakten { display: grid; gap: 10px; list-style: none; margin: 20px 0 0; padding: 0; }
@media (min-width: 620px) { .fakten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fakten { grid-template-columns: repeat(4, 1fr); } }
.fakten li { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--radius-s); padding: 12px 14px; font-size: .95rem; font-weight: 600; }
.spender { display: flex; flex-wrap: wrap; gap: 10px 12px; list-style: none; margin: 0; padding: 0; max-width: none; }
.spender li { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px; padding: 8px 16px; font-size: .95rem; }
.spender li.leer { background: none; border-style: dashed; color: var(--grau); }

/* ---------------------------------------------------------------- Vertrauen */
.belege { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; max-width: none; }
@media (min-width: 760px) { .belege { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .belege { grid-template-columns: repeat(4, 1fr); } }
.belege li { display: flex; gap: 12px; align-items: flex-start; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-s); padding: 14px 16px; font-size: .95rem; }
.belege svg { width: 20px; height: 20px; color: var(--tuerkis); flex: 0 0 auto; margin-top: 2px; }
.belege b { display: block; color: var(--blau); }
.geschichte { display: grid; gap: clamp(26px, 4vw, 48px); align-items: start; }
@media (min-width: 940px) { .geschichte { grid-template-columns: 1fr 330px; } }
.jahre { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 20px; max-width: var(--text); }
.jahre li { display: grid; grid-template-columns: 74px 1fr; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--linie); }
.jahre li:last-child { border-bottom: 0; padding-bottom: 0; }
.jahre b { color: var(--orange); font-size: 1.05rem; letter-spacing: .03em; }
.jahre p { margin: 0; }
@media (max-width: 520px) { .jahre li { grid-template-columns: 1fr; gap: 2px; } }
@media (max-width: 939px) { .ausriss-karte { max-width: 360px; } }
.ausriss-karte { margin: 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px; box-shadow: var(--schatten); }
/* Der Ausriss ist sehr hoch. Zusammengeklappt zeigt er quadratisch den Kopf des
   Artikels mit Foto und Schlagzeile, der Knopf darunter klappt ihn ganz auf. */
.ausriss-karte .rahmen { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-s); border: 1px solid var(--linie); }
.ausriss-karte .rahmen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0)); pointer-events: none; }
.ausriss-karte[data-offen="true"] .rahmen { aspect-ratio: auto; }
.ausriss-karte[data-offen="true"] .rahmen::after { display: none; }
.ausriss-karte img { width: 100%; border-radius: 0; object-fit: cover; object-position: top center; }
.ausriss-karte .rahmen img { height: 100%; }
.ausriss-karte[data-offen="true"] .rahmen img { height: auto; }
.ausriss-karte figcaption { display: grid; justify-items: start; gap: 12px; margin-top: 14px; font-size: .88rem; color: var(--grau); }
.blaetter { display: grid; gap: 16px; margin-top: 18px; }
/* Auf dem Handy liegen die drei Blätter in einer Wischreihe, sonst wäre
   der Abschnitt dreimal so hoch. */
@media (max-width: 619px) {
  .blaetter { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .blaetter figure { flex: 0 0 62%; scroll-snap-align: start; }
}
@media (min-width: 620px) { .blaetter { grid-template-columns: repeat(3, 1fr); } }
.blaetter figure { margin: 0; }
.blaetter img { width: 100%; aspect-ratio: 900 / 1262; object-fit: cover; border: 1px solid var(--linie); border-radius: var(--radius-s); background: var(--weiss); }
.blaetter figcaption { font-size: .85rem; color: var(--grau); text-align: center; margin-top: 8px; }

/* ---------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 10px; max-width: var(--text); }
.faq details { border: 1px solid var(--linie); border-radius: var(--radius-s); background: var(--weiss); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; font-weight: 700; color: var(--blau); position: relative; min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--orange); }
.faq details[open] summary::after { content: "\2212"; }
.faq .inhalt { padding: 0 18px 18px; }
.faq .inhalt p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Bedingungen */
.bedingungen { display: grid; gap: 0; max-width: none; }
.bedingungen > div { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--linie); }
.bedingungen > div:first-child { border-top: 0; padding-top: 0; }
.bedingungen b.nr { color: var(--orange); }
.bedingungen h3 { font-size: 1.05rem; margin-bottom: .3em; }
.bedingungen p { color: var(--grau); font-size: .96rem; margin: 0; }

/* ---------------------------------------------------------------- Footer */
.fuss { background: var(--blau); color: rgba(255, 255, 255, .84); border-top: 4px solid var(--tuerkis-hell); padding: clamp(40px, 5vw, 64px) 0 28px; }
.fuss h2 { font-size: 1rem; color: #fff; text-transform: uppercase; letter-spacing: .08em; }
.fuss a { color: #fff; }
.fuss .spalten { display: grid; gap: 28px; }
@media (min-width: 820px) { .fuss .spalten { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fuss .rechtlich { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .85rem; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }
.fuss .traeger { font-size: .9rem; max-width: var(--text); }

/* ---------------------------------------------------------------- Sticky CTA */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--linie); box-shadow: 0 -6px 20px rgba(1, 52, 147, .1); }
.sticky-cta .btn { flex: 1; min-width: 0; padding: 12px 10px; }
@media (max-width: 760px) { .sticky-cta { display: flex; } body { padding-bottom: 84px; } .kopfzeile .btn { display: none; } }

/* ---------------------------------------------------------------- Dialog */
.dialog { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(1, 20, 55, .72); }
.dialog[data-offen="true"] { display: flex; }
.dialog .inhalt { background: #fff; border-radius: var(--radius); max-width: 540px; width: 100%; max-height: 90vh; overflow: auto; padding: clamp(20px, 4vw, 32px); }
.dialog .schliessen { float: right; min-width: 44px; min-height: 44px; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--grau); cursor: pointer; }
.qr-block { display: grid; gap: 18px; align-items: center; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-s); padding: 16px; margin: 16px 0; }
@media (min-width: 520px) { .qr-block { grid-template-columns: 150px 1fr; } }
.qr-block img { width: 150px; height: 150px; }
.qr-block code { font-size: .85rem; color: var(--grau); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Hilfsklassen */
[hidden] { display: none !important; }
.abstand-oben { margin-top: clamp(28px, 4vw, 44px); }
.trenner { border: 0; border-top: 1px solid var(--linie); margin: clamp(28px, 4vw, 44px) 0; }
.zwei-spalten { display: grid; gap: clamp(26px, 4vw, 48px); }
@media (min-width: 900px) { .zwei-spalten { grid-template-columns: 1fr 1fr; align-items: center; } }
.zwei-spalten.schmal-rechts { grid-template-columns: 1fr; }
@media (min-width: 900px) { .zwei-spalten.schmal-rechts { grid-template-columns: 1.15fr .85fr; } }

/* ---------------------------------------------------- Hero-Hintergrundbild */
.hero .bild { background-image: url(/landingpage/assets/wettbewerb/web/phoenixsee-regenbogen-2-1600.jpg); }
@media (max-width: 820px) { .hero .bild { background-image: url(/landingpage/assets/wettbewerb/web/phoenixsee-regenbogen-2-800.jpg); } }
@supports (background-image: image-set(url(x.webp) type("image/webp"))) {
  .hero .bild { background-image: image-set(url(/landingpage/assets/wettbewerb/web/phoenixsee-regenbogen-2-1600.webp) type("image/webp"), url(/landingpage/assets/wettbewerb/web/phoenixsee-regenbogen-2-1600.jpg) type("image/jpeg")); }
  @media (max-width: 820px) { .hero .bild { background-image: image-set(url(/landingpage/assets/wettbewerb/web/phoenixsee-regenbogen-2-800.webp) type("image/webp"), url(/landingpage/assets/wettbewerb/web/phoenixsee-regenbogen-2-800.jpg) type("image/jpeg")); } }
}

/* ---------------------------------------------------- Logoband */
/* Alle Unterstützer gleich groß, ohne Rangfolge. Das Band läuft endlos,
   dafür liegt die Liste zweimal in der Spur. Ohne JavaScript steht sie
   einmal da und läuft nicht, lesbar ist sie trotzdem. */
.logoband { position: relative; overflow: hidden; padding: 4px 0; }
.logoband::before, .logoband::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(24px, 6vw, 70px); z-index: 1; pointer-events: none; }
.logoband::before { left: 0; background: linear-gradient(90deg, var(--band-grund, var(--weiss)), transparent); }
.logoband::after { right: 0; background: linear-gradient(270deg, var(--band-grund, var(--weiss)), transparent); }
.logoband .spur {
  display: flex; align-items: center; list-style: none;
  margin: 0; padding: 0; max-width: none; width: max-content;
}
.logoband .spur li { margin-right: clamp(30px, 5vw, 68px); }
.logoband.laeuft .spur { animation: logoband-lauf var(--band-dauer, 40s) linear infinite; }
.logoband.laeuft:hover .spur, .logoband.laeuft:focus-within .spur { animation-play-state: paused; }
@keyframes logoband-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logoband .marke {
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1rem, 1.9vw, 1.16rem); letter-spacing: -.01em;
  color: var(--navy); opacity: .72; text-decoration: none;
}
.logoband a.marke:hover, .logoband a.marke:focus-visible { opacity: 1; color: var(--blau); }
.logoband .marke img { height: 38px; width: auto; max-width: 190px; object-fit: contain; }
/* Die Verlaufskanten muessen den Untergrund treffen, sonst stehen graue
   Streifen an den Raendern. */
.flaeche .logoband { --band-grund: var(--flaeche); }
.logoband-kopf { margin: 0 0 14px; font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
/* Ruhiges Band: dieselben Namen, umbrochen statt laufend. */
.logoband.ruhig { overflow: visible; }
.logoband.ruhig::before, .logoband.ruhig::after { display: none; }
.logoband.ruhig .spur { flex-wrap: wrap; justify-content: center; width: auto; row-gap: 12px; }
@media (prefers-reduced-motion: reduce) {
  .logoband { overflow: visible; }
  .logoband::before, .logoband::after { display: none; }
  .logoband .spur { flex-wrap: wrap; width: auto; gap: 14px 0; animation: none; }
  .logoband .spur li.kopie { display: none; }
}

.unterstuetzer-band { background: var(--flaeche); border-bottom: 1px solid var(--linie); padding: clamp(16px, 2.2vw, 24px) 0; --band-grund: var(--flaeche); }

/* Das gemeinsame Band unter dem Hero der Startseite: Spendenstand und
   Unterstützer in einer Zeile. Fehlt der Spendenstand, nimmt das Logoband
   die ganze Breite ein, damit keine halbleere Fläche stehen bleibt. */
.hero-band { background: var(--flaeche); border-bottom: 1px solid var(--linie); padding: clamp(16px, 2.2vw, 24px) 0; --band-grund: var(--flaeche); }
.hero-band-raster { display: grid; gap: clamp(16px, 2.4vw, 30px); align-items: center; }
@media (min-width: 1000px) {
  .hero-band-raster { grid-template-columns: auto minmax(0, 1fr); }
  .hero-band .band-spalte { padding-left: clamp(16px, 2.4vw, 30px); border-left: 1px solid var(--linie); }
}
.hero-band .band-spalte { min-width: 0; }
.hero-band .spendenstand[hidden] + .band-spalte { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
.hero-band .logoband-kopf { margin-bottom: 8px; }
.hero-band .spendenstand { box-shadow: none; }

/* ---------------------------------------------------- Spendenstand */
/* Versteckt heißt versteckt. Ohne diese Zeile gewönne das display der
   Pille gegen die Vorgabe des Browsers für [hidden]. */
.spendenstand[hidden] { display: none; }
.spendenstand {
  display: inline-flex; align-items: center; gap: 16px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 999px;
  padding: 12px 26px 12px 14px; box-shadow: var(--schatten);
}
.spendenstand .herz {
  width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 50%; background: #fdecea; color: var(--rot);
  border-right: 0;
}
.spendenstand .herz svg { width: 24px; height: 24px; }
.spendenstand .zahl {
  margin: 0; padding-left: 16px; border-left: 1px solid var(--linie);
  font-size: 1rem; color: var(--grau); line-height: 1.35;
}
.spendenstand .zahl b { display: inline-block; font-size: clamp(1.5rem, 3.6vw, 1.9rem); font-weight: 800; color: var(--navy); margin-right: 6px; font-variant-numeric: tabular-nums; }
.spendenstand .zahl small { display: block; font-size: .88rem; color: var(--grau); }
@media (max-width: 520px) {
  .spendenstand { gap: 12px; padding: 12px 18px 12px 12px; }
  .spendenstand .zahl { padding-left: 12px; }
}

/* ---------------------------------------------------- Belegband und Hinweise */
.belege-band { background: var(--flaeche); padding: clamp(24px, 3vw, 36px) 0; }
.hinweis-band { background: var(--orange-weich); border: 1px solid #efd3ab; border-left: 4px solid var(--orange); border-radius: var(--radius-s); padding: 14px 18px; font-size: .96rem; }
.hinweis-band strong { display: block; color: var(--blau); }

/* ---------------------------------------------------- Ergänzungen Galerie */
.galerie-status { margin: 0; }
@media (min-width: 900px) { .galerie-status { margin-left: auto; } }
.foto .stimme-geben { margin-top: auto; align-self: flex-start; }

/* ---------------------------------------------------- Ergänzungen Ablauf */
.ablauf time { display: block; margin-top: 6px; font-size: .86rem; font-weight: 700; color: var(--orange); }

/* ---------------------------------------------------- Ergänzungen Mockup */
.dropzone { position: relative; }
.mockup .logos .stufe { display: block; }
.mockup .logos .platz + .stufe { margin-top: 4%; }
.mockup .spenden span { display: block; }
.wirkung .karte h3 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin-bottom: .2em; }
.wirkung .karte p b { color: #fff; }

/* ---------------------------------------------------- Ergänzungen Sponsoren */
blockquote { margin: 1.2em 0; padding-left: 18px; border-left: 4px solid var(--tuerkis-hell); color: var(--blau); font-weight: 500; max-width: var(--text); }
blockquote::before { content: "\201E"; }
blockquote::after { content: "\201C"; }

/* ---------------------------------------------------- Sponsorenseite */
.hero--hafen .bild { background-image: url(/landingpage/assets/wettbewerb/web/dortmunder-hafen-1600.jpg); }
@media (max-width: 820px) { .hero--hafen .bild { background-image: url(/landingpage/assets/wettbewerb/web/dortmunder-hafen-800.jpg); } }
@supports (background-image: image-set(url(x.webp) type("image/webp"))) {
  .hero--hafen .bild { background-image: image-set(url(/landingpage/assets/wettbewerb/web/dortmunder-hafen-1600.webp) type("image/webp"), url(/landingpage/assets/wettbewerb/web/dortmunder-hafen-1600.jpg) type("image/jpeg")); }
  @media (max-width: 820px) { .hero--hafen .bild { background-image: image-set(url(/landingpage/assets/wettbewerb/web/dortmunder-hafen-800.webp) type("image/webp"), url(/landingpage/assets/wettbewerb/web/dortmunder-hafen-800.jpg) type("image/jpeg")); } }
}
.hero .klein { color: rgba(255, 255, 255, .78); }
.fakten li .klein { display: block; font-weight: 400; }
.fluss--hell li { background: var(--weiss); border-color: var(--linie); color: var(--tinte); }
.fluss--hell li span { color: var(--grau); }
@media (min-width: 820px) { .fluss--hell li:not(:last-child)::after { color: var(--orange); } }
.ablauf--kompakt { gap: 14px; }
@media (min-width: 860px) { .ablauf.ablauf--kompakt { grid-template-columns: 1fr; gap: 14px; } }
.ablauf--kompakt li { padding: 0 0 0 44px; }
.ablauf--kompakt li::before { width: 28px; height: 28px; font-size: .9rem; }
.ablauf--kompakt li::after { display: none; }
#anfrage aside .karte { position: sticky; top: 92px; }
@media (max-width: 899px) { #anfrage aside .karte { position: static; } }
#anfrage .zwei-spalten { align-items: start; }

/* ---------------------------------------------------- Korrekturen Runde 15 */
/* In Flexlisten werden freie Textknoten zu eigenen Flexelementen. Der
   Abstand kommt deshalb vom Symbol, nicht vom gap, sonst reißen Zahlen
   mitten im Satz auseinander. */
.merkmale li { gap: 0; }
.merkmale svg { margin-right: 8px; }
.checkliste li { gap: 0; }
.checkliste svg { margin-right: 10px; }
/* Heller Rahmenbutton auf dunklem Hintergrund */
.hero .btn-rand, .btn-rand.light { color: #fff; border-color: rgba(255, 255, 255, .8); }
.hero .btn-rand:hover, .btn-rand.light:hover { background: #fff; color: var(--blau); }

/* Veranstalterzeile im Hero */
.traeger-zeile { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .28); font-size: .93rem; color: rgba(255, 255, 255, .86); max-width: var(--text); }
.traeger-zeile b { color: #fff; }

/* Auf dem Handy bleibt der QR-Code klein, damit der Spendenknopf im Dialog
   ohne langes Scrollen sichtbar wird. */
@media (max-width: 519px) {
  .qr-block { grid-template-columns: 104px 1fr; gap: 12px; align-items: start; }
  .qr-block img { width: 104px; height: 104px; }
}
.dialog .pitch { margin: 18px 0 0; }

/* ------------------------------------------- Brücke zu den alten Klassen */
/* Die Bausteine aus Version 2 (Galerie, Upload, Formulare, Mockups) werden
   weiter genutzt. Ihre alten Farbnamen zeigen hier auf die neue Palette. */
:root {
  --orange: var(--blau);
  --orange-hell: var(--gelb);
  --orange-weich: var(--gelb-weich);
  --tuerkis: var(--blau);
  --tuerkis-hell: var(--gelb);
  --blau-hell: var(--navy-hell);
}
.ablauf li::before { background: var(--gelb); color: var(--navy); font-family: 'Montserrat', sans-serif; }
.ablauf time { color: var(--blau); }
.jahre b { color: var(--blau); font-family: 'Montserrat', sans-serif; }
.karte.akzent { border-top-color: var(--gelb); }
.karte .symbol { background: var(--navy-hell); color: var(--navy); }
.foto .marker-bild { background: rgba(28, 36, 75, .9); }
.foto .titel { color: var(--navy); font-family: 'Montserrat', sans-serif; }
.dropzone.hover { border-color: var(--blau); background: var(--blau-weich); }
.hinweis-band { background: var(--gelb-weich); border-color: #f0e3a8; border-left-color: var(--gelb-tief); }
.hinweis-band strong { color: var(--navy); }
.wirkung .karte h3 { color: var(--gelb); }
.paket .marke-oben { background: var(--navy); color: #fff; }
.paket.hervor { border-color: var(--gelb); box-shadow: 0 16px 36px rgba(28, 36, 75, .16); }
.paket .preis { font-family: 'Montserrat', sans-serif; color: var(--navy); }
.fuss { background: var(--navy); border-top-color: var(--gelb); }
.fuss h2 { font-size: .95rem; }
.mockup .logos .stufe { color: var(--navy); }
.mockup .titel-text i { color: var(--gelb); }
blockquote { border-left-color: var(--gelb); color: var(--navy); font-family: 'Montserrat', sans-serif; font-size: 1.1rem; }
.faq summary { font-family: 'Montserrat', sans-serif; }
.faq summary::after { color: var(--blau); }
.bedingungen b.nr { color: var(--blau); font-family: 'Montserrat', sans-serif; }
.chip { font-family: 'Source Sans 3', sans-serif; }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); }
.sticky-cta { box-shadow: 0 -6px 20px rgba(28, 36, 75, .12); }
.schritt-kopf { font-family: 'Montserrat', sans-serif; color: var(--navy); }
.schritt-kopf .nr { background: var(--navy); }
/* Nur die dunkle Fassung, sonst wird heller Text auf hellem Grund unsichtbar. */
.fluss:not(.fluss--hell) li span { color: rgba(255, 255, 255, .8); }
.spender li { font-size: .97rem; }

/* ---------------------------------------------------- Spendenbox */
.spendenbox { display: grid; gap: 24px; align-items: center; background: var(--navy); color: #fff; border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 760px) { .spendenbox { grid-template-columns: 1fr 190px; } }
.spendenbox h3 { color: #fff; font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.spendenbox p { color: rgba(255, 255, 255, .88); margin-bottom: 0; }
.spendenbox img { width: 170px; height: 170px; border-radius: var(--radius-s); background: #fff; padding: 10px; justify-self: center; }
.spendenbox .btn-rand { color: #fff; border-color: rgba(255, 255, 255, .7); }
.spendenbox .btn-rand:hover { background: #fff; color: var(--navy); }

/* Auf hellem Grund ist der Marker ein Textmarkerstrich, auf dunklem Grund muss
   er die ganze Zeile füllen, sonst verschwindet die dunkle Schrift. */
.hero .marker, .dunkel .marker, .spendenbox .marker, .haelfte.spende .marker {
  color: var(--navy);
  background: var(--gelb);
  box-shadow: .12em 0 0 var(--gelb), -.12em 0 0 var(--gelb);
  padding: 0;
}

/* Hero-Bilder je Seite */
.hero--kirsch .bild { background-image: url(/landingpage/assets/wettbewerb/web/kirschblueten-2-1600.jpg); }
.hero--hafen .bild { background-image: url(/landingpage/assets/wettbewerb/web/dortmunder-hafen-1600.jpg); }
@media (max-width: 820px) {
  .hero--kirsch .bild { background-image: url(/landingpage/assets/wettbewerb/web/kirschblueten-2-800.jpg); }
  .hero--hafen .bild { background-image: url(/landingpage/assets/wettbewerb/web/dortmunder-hafen-800.jpg); }
}

/* ---------------------------------------------------- Aufteilung Sponsoring */
.teilung { display: grid; gap: 16px; }
@media (min-width: 760px) { .teilung { grid-template-columns: 1fr 1fr; } }
.haelfte { border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); }
.haelfte .anteil { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 3.6vw, 2.2rem); letter-spacing: -.02em; margin: 0 0 .15em; }
.haelfte h3 { font-size: 1.35rem; }
.haelfte p:last-child { margin-bottom: 0; }
.haelfte.spende { background: var(--navy); border-color: var(--navy); color: #fff; }
.haelfte.spende h3 { color: #fff; }
.haelfte.spende .anteil { color: var(--gelb); }
.haelfte.spende p { color: rgba(255, 255, 255, .88); }
.haelfte.druck { background: var(--gelb-weich); border-color: #f0e3a8; }
.haelfte.druck .anteil { color: var(--navy); }
.rechenbeispiel { margin-top: clamp(26px, 4vw, 44px); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); }
.rechenbeispiel h3 { margin-bottom: .8em; }
.rechenbeispiel .fluss { margin-bottom: 16px; }

/* ---------------------------------------------------- Bankverbindung */
.bankdaten { margin-top: 18px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(18px, 2.5vw, 28px); }
.bankdaten h3 { font-size: 1.15rem; margin-bottom: .3em; }
.bankdaten dl { margin: 14px 0 0; display: grid; gap: 10px; max-width: var(--text); }
.bankdaten dl > div { display: grid; gap: 2px; }
@media (min-width: 620px) { .bankdaten dl > div { grid-template-columns: 180px 1fr; gap: 14px; align-items: baseline; } }
.bankdaten dt { font-weight: 700; font-size: .9rem; color: var(--grau); }
.bankdaten dd { margin: 0; overflow-wrap: anywhere; }
.iban { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.02rem; letter-spacing: .02em; }
.bank-klein { margin-top: 16px; border-top: 1px solid var(--linie); padding-top: 12px; }
.bank-klein summary { cursor: pointer; font-weight: 700; color: var(--blau); min-height: 44px; display: flex; align-items: center; }
.bank-klein p { margin: 6px 0 0; }

/* Dritte Wirkungsstufe */
@media (min-width: 900px) { .wirkung.drei { grid-template-columns: repeat(3, 1fr); } }
.wirkung.drei .karte h3 { font-size: clamp(1.7rem, 4vw, 2.1rem); }

/* ---------------------------------------------------- Sprungmarken je Seite */
.seiten-nav { background: var(--weiss); border-bottom: 1px solid var(--linie); padding: 12px 0; position: relative; z-index: 2; }
.seiten-nav .container { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.seiten-nav .titel { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.seiten-nav ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; max-width: none; }
.seiten-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 15px; border-radius: 999px; background: var(--flaeche); color: var(--navy); text-decoration: none; font-size: .93rem; font-weight: 600; }
.seiten-nav a:hover { background: var(--navy); color: #fff; }
@media (max-width: 760px) {
  .seiten-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .seiten-nav .container { flex-wrap: nowrap; width: max-content; min-width: 100%; padding-inline: 16px; }
  .seiten-nav .titel { display: none; }
  .seiten-nav ul { flex-wrap: nowrap; }
  .seiten-nav a { white-space: nowrap; }
}

/* ---------------------------------------------------- Band für den Fotowettbewerb */
.mitmach-band { background: var(--gelb-weich); border-bottom: 1px solid #f0e3a8; padding: clamp(26px, 4vw, 40px) 0; }
.mitmach-band .container { display: grid; gap: clamp(18px, 3vw, 32px); align-items: center; }
@media (min-width: 820px) { .mitmach-band .container { grid-template-columns: 230px 1fr; } }
.mitmach-band picture { display: block; }
.mitmach-band img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--schatten); }
.mitmach-band h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin-bottom: .3em; }
.mitmach-band p { margin-bottom: 0; }
.mitmach-band .eyebrow { color: var(--blau); }
.mitmach-band .btn-reihe { margin-top: 1.1em; }
@media (max-width: 819px) { .mitmach-band img { max-height: 180px; } }

/* Knopf oder Label, das noch nicht benutzt werden kann */
.btn.aus { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ---------------------------------------------------- Galerie aus Daten */
.galerie-leer { grid-column: 1 / -1; background: var(--flaeche); border: 1px dashed var(--linie); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); text-align: center; color: var(--grau); }
.mehr-knopf { display: block; margin: 24px auto 0; }
.foto.hervor { outline: 3px solid var(--gelb); outline-offset: 3px; }
.filter select { min-height: 44px; border: 1px solid var(--linie); border-radius: 999px; padding: 8px 16px; background: var(--weiss); font: inherit; font-size: .93rem; color: var(--tinte); }
#stimme-dialog .feld { margin-bottom: 4px; }
#stimme-dialog .meldung { margin: 12px 0 0; font-size: .95rem; }
#stimme-dialog .meldung.fehler { color: var(--rot); }

/* --- Galerie: Raster, Vergrößern, Lichtkasten ------------------------- */
@media (min-width: 560px) { .galerie { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1400px) { .galerie { grid-template-columns: repeat(4, 1fr); } }

/* Das Bild ist ein Knopf, Klick oder Tastendruck öffnet es groß. */
.foto .bild-knopf { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; }
.foto .bild-knopf img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--flaeche); transition: transform .25s ease; }
.foto .bild-knopf:hover img, .foto .bild-knopf:focus-visible img { transform: scale(1.03); }
.foto .bild-knopf::after {
  content: ""; position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(13, 20, 48, .72) no-repeat center;
  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' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
  background-size: 19px 19px;
}
.foto .bild-knopf:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .foto .bild-knopf img { transition: none; } }

/* Marken für Stadtbezirk und Jahreszeit unter dem Bild. */
.marken { display: flex; flex-wrap: wrap; gap: 6px; }
.marken span { font-size: .78rem; font-weight: 600; color: var(--blau); background: var(--flaeche); border-radius: 999px; padding: 4px 10px; }

/* Filterzeilen mit eigener Überschrift je Gruppe. */
.filter + .filter { margin-top: -10px; }
.filter .gruppe .chip .zahl { font-weight: 400; opacity: .75; margin-left: 5px; }

/* Lichtkasten */
.dialog.bild { padding: 0; background: rgba(6, 12, 32, .92); }
.dialog.bild .inhalt { background: transparent; border-radius: 0; max-width: 1180px; width: 100%; max-height: 100vh; padding: 0; display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.dialog.bild .rahmen { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 56px 8px 0; }
.dialog.bild img { max-width: 100%; max-height: calc(100vh - 210px); width: auto; height: auto; object-fit: contain; border-radius: var(--radius-s); background: #0d1430; }
.dialog.bild .schliessen { position: absolute; top: 10px; right: 12px; float: none; z-index: 2; color: #fff; font-size: 2rem; }
.dialog.bild .bildtext { color: #fff; padding: 16px 18px 22px; display: grid; gap: 10px; }
.dialog.bild .bildtext h3 { color: #fff; margin: 0; font-size: clamp(1.1rem, 3vw, 1.45rem); }
.dialog.bild .bildtext .wer { color: rgba(255, 255, 255, .78); font-size: .95rem; margin: 0; }
.dialog.bild .bildtext .marken span { background: rgba(255, 255, 255, .14); color: #fff; }
.dialog.bild .bildtext .reihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.dialog.bild .zaehler { color: rgba(255, 255, 255, .7); font-size: .9rem; }
.dialog.bild .blaettern { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.dialog.bild .blaettern:hover { background: rgba(255, 255, 255, .3); }
.dialog.bild .blaettern[hidden] { display: none; }
.dialog.bild .zurueck { left: 6px; }
.dialog.bild .weiter { right: 6px; }
.dialog.bild .stimm-status { color: var(--gelb); margin: 0; }
@media (max-width: 560px) {
  .dialog.bild .rahmen { padding-top: 48px; }
  .dialog.bild img { max-height: calc(100vh - 250px); }
  .dialog.bild .blaettern { width: 42px; height: 42px; }
}
html { scroll-padding-top: 92px; }  /* Sprungziele nicht unter die Kopfzeile schieben */
.chip.leer { opacity: .45; cursor: not-allowed; }
.filter select { max-width: 100%; }

/* --- Kinderhospiz Dienste: Vorstellung des Vereins -------------------- */
@media (min-width: 940px) { #kinderhospiz .geschichte { grid-template-columns: 1fr 330px; } }
.dkd-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px; display: grid; gap: 14px; }
.dkd-karte img { width: 100%; max-width: 280px; height: auto; margin: 0 auto; }
.dkd-daten { display: grid; gap: 8px; margin: 0; font-size: .92rem; }
.dkd-daten div { display: grid; gap: 1px; }
.dkd-daten dt { color: var(--grau); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.dkd-daten dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
#kinderhospiz .belege { grid-template-columns: 1fr; }
@media (min-width: 620px) { #kinderhospiz .belege { grid-template-columns: 1fr 1fr; } }
.dkd-marke { width: 92px; height: auto; margin: 12px 0 4px; }

/* --- Teilen nach dem Bestätigen --------------------------------------- */
.teilen-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-s); padding: 16px 18px; margin: 0 0 20px; display: grid; gap: 10px; }
.teilen-karte .link-zeile { margin: 0; overflow-wrap: anywhere; font-size: .95rem; }
.teilen-karte .btn-reihe { margin: 4px 0 0; }

/* --- Jury ------------------------------------------------------------- */
.jury { margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--linie); padding-top: clamp(22px, 3vw, 32px); }
.jury h3 { margin: 0 0 8px; }
.jury > p { margin: 0 0 16px; }
.jury .belege { grid-template-columns: 1fr; }
@media (min-width: 680px) { .jury .belege { grid-template-columns: 1fr 1fr; } }
.jury .klein { margin: 14px 0 0; color: var(--grau); }
.foto-fehlt { background: var(--gelb-blass, #fff8d6); border: 1px solid var(--gelb-tief); border-radius: var(--radius-s); padding: 14px 16px; margin: 0 0 18px; }

/* --- Stand der Abstimmung: Top 20 und Fotos ohne Stimme --------------- */
.foto.top { border-color: var(--gelb-tief); box-shadow: 0 0 0 2px var(--gelb) inset; }
.foto .top-marke { background: var(--gelb); color: var(--navy); }
.foto .ohne-stimme { margin: 0; font-size: .88rem; color: var(--grau); }
@media (min-width: 680px) { .karten.vier { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .karten.vier { grid-template-columns: repeat(4, 1fr); } }