/* ==========================================================================
   Liesel auf Reisen – Gestaltung
   Farben und Schriften stehen als Variablen ganz oben und werden sonst
   nirgends fest eingetragen. Ändere sie hier, ändert sich die ganze Seite.
   ========================================================================== */

:root {
  /* Farben (aus dem Flyer) */
  --navy:        #131c33;
  --navy-weich:  #1c2745;
  --pink:        #d5236f;
  --pink-hover:  #b91a5e;
  --pink-dunkel: #a81456;
  --pink-hell:   #f4a1c6;
  --pink-zart:   #fdf6f9;
  --creme:       #ece8e1;
  --weiss:       #ffffff;
  --grau-text:   #6b7085;
  --text-soft:   #454b60;
  --auf-navy:    #dfe2ec;
  --fuss-muted:  #aab0c4;
  --linie:       #c6c0b4;

  /* Schriften */
  --f-display: 'Bebas Neue', 'Arial Narrow', 'Helvetica Neue Condensed', Impact, sans-serif;
  --f-text:    'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-hand:    'Caveat', 'Segoe Script', cursive;

  /* Form */
  --r-card:  16px;
  --r-karte: 14px;
  --r-input: 10px;
  --r-pille: 999px;

  --schatten-karte:  0 8px 24px rgba(19, 28, 51, .18);
  --schatten-fab:    0 8px 22px rgba(213, 35, 111, .45);
  --schatten-submit: 0 6px 16px rgba(213, 35, 111, .35);

  --breite:      1100px;
  --breite-lese: 680px;

  /* Seitlicher Abstand aller Inhalte. Wächst mit der Fensterbreite: 16 px sind
     auf dem Telefon richtig, wirken auf dem Bildschirm aber gedrängt – gerade
     neben einer 78 px großen Überschrift. Überschrieben weiter unten. */
  --rand: 16px;

  --platzhalter: repeating-linear-gradient(45deg, #e6e1d8, #e6e1d8 10px, #ede9e2 10px, #ede9e2 20px);
}

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

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--navy);
  font-family: var(--f-text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Muss NACH allen display-Regeln stehen und sie überstimmen: sonst zeigt
   z. B. .karte-fehler { display:grid } ein Element trotz hidden-Attribut. */
[hidden] { display: none !important; }

a { color: var(--pink); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--pink-dunkel); }

h1, h2, h3 {
  font-family: var(--f-display);
  text-transform: uppercase;
  line-height: 1.0;
  letter-spacing: 1px;
  margin: 0 0 .4em;
  font-weight: 400;
}

p { margin: 0 0 1em; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Sichtbarer Fokus – Pflicht für Tastaturbedienung */
:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 2px;
  border-radius: 4px;
}
.pink-flaeche :focus-visible,
.pille:focus-visible,
.btn-pink:focus-visible { outline-color: var(--creme); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--pink); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--r-input) 0; font-weight: 600;
}
.skip:focus { left: 0; }

.nur-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Honeypot – für Menschen unsichtbar, für Bots verlockend */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
/* Die Maximalbreite enthält den Rand. Sonst bekäme die Lesespalte ihn doppelt:
   einmal durch das Zentrieren, einmal durch den Innenabstand – und stünde
   weiter innen als der Rest der Seite. Der Textbereich selbst bleibt so breit
   wie im Design vorgesehen. */
.huelle-lese {
  max-width: calc(var(--breite-lese) + 2 * var(--rand));
  margin: 0 auto; padding: 0 var(--rand);
}

.pink { color: var(--pink); }

/* --- Kopf --------------------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 900;
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.kopf-innen {
  max-width: var(--breite); margin: 0 auto;
  padding: 10px var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

.marke {
  display: flex; align-items: center; gap: 9px;
  color: #fff; text-decoration: none; min-height: 44px;
}
.marke-herz {
  width: 30px; height: 30px; flex: none;
  background: var(--pink); border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 15px; line-height: 1;
}
.marke-text {
  font-family: var(--f-display); font-size: 21px;
  letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap;
}

.haupt-nav { display: flex; align-items: center; gap: 4px; }
.haupt-nav a {
  color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 500;
  padding: 10px 9px; min-height: 44px;
  display: inline-flex; align-items: center; border-radius: var(--r-pille);
}
.haupt-nav a:hover { color: var(--pink-hell); }
.haupt-nav a[aria-current="page"] { color: var(--pink-hell); }
.haupt-nav .pille {
  background: var(--pink); color: #fff; padding: 10px 16px; font-weight: 600;
}
.haupt-nav .pille:hover { background: var(--pink-hover); color: #fff; }
.haupt-nav .sprache {
  font-size: 13px; letter-spacing: .5px; color: var(--fuss-muted);
  padding: 10px 6px; text-transform: uppercase;
}
.haupt-nav .sprache:hover { color: #fff; }

/* --- Hero --------------------------------------------------------------- */

.hero {
  background: var(--navy); color: #fff;
  overflow: hidden; position: relative;
}
.hero-innen {
  max-width: var(--breite); margin: 0 auto;
  padding: 22px var(--rand) 24px;
  display: flex; align-items: center; gap: 14px;
}
.hero-text { flex: 1 1 auto; min-width: 0; }
.hero h1 {
  font-size: clamp(40px, 11vw, 78px);
  line-height: .94; letter-spacing: 1.5px;
  margin: 0 0 10px;
}
.hero h1 .zeile { display: block; }
.hero-intro {
  color: var(--auf-navy); font-size: clamp(15px, 4vw, 18px);
  margin: 0; max-width: 30em;
}
.hero-figur {
  flex: none; width: clamp(72px, 20vw, 150px);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45));
}

/* --- Kartenblock -------------------------------------------------------- */

/* Ebenfalls nur vertikal – .huelle liefert das seitliche Padding. */
.karten-block { padding-top: 18px; padding-bottom: 4px; }

.karten-kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.hand {
  font-family: var(--f-hand); font-weight: 700;
  color: var(--pink); font-size: clamp(26px, 7vw, 34px);
  line-height: 1.1; transform: rotate(-1.5deg); margin: 0;
}
.stat-kurz {
  font-size: 15px; font-weight: 600; color: var(--text-soft);
  margin: 0; text-align: right;
}

.karte-rahmen {
  position: relative;
  height: min(62vh, 560px); min-height: 340px;
  border: 3px solid var(--navy); border-radius: var(--r-karte);
  box-shadow: var(--schatten-karte);
  overflow: hidden; background: #e3ded4;
}
#karte { position: absolute; inset: 0; }

.stat-satz {
  font-size: 16px; color: var(--text-soft);
  margin: 12px 2px 0; text-align: center;
}
.stat-satz strong { color: var(--navy); font-weight: 600; }

/* Hinweisschild auf leerer Karte */
.karte-hinweis {
  position: absolute; z-index: 500; top: 16px; left: 50%;
  transform: translateX(-50%);
  width: min(92%, 420px);
  background: #fff; border: 2px solid var(--pink);
  border-radius: var(--r-card); padding: 14px 16px;
  text-align: center; box-shadow: var(--schatten-karte);
}
.karte-hinweis .hand { font-size: 26px; margin: 0 0 4px; transform: none; }
.karte-hinweis p { margin: 0; font-size: 15px; color: var(--text-soft); }

/* Kartenfehler */
.karte-fehler {
  position: absolute; inset: 0; z-index: 600;
  background: var(--creme);
  display: grid; place-content: center; text-align: center;
  padding: 20px; gap: 6px;
}
.karte-fehler .herz { font-size: 34px; color: var(--pink); }
.karte-fehler h2 { font-size: 26px; margin: 0; }
.karte-fehler p { color: var(--text-soft); max-width: 30em; margin: 0 auto; }
/* Nur im Störungsfall sichtbar: verrät, welcher Baustein gefehlt hat. */
.karte-fehler-technik {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--grau-text) !important; margin-top: 10px !important;
  word-break: break-word;
}
/* Auf dem Telefon sitzt der Mitmachen-Knopf unten fest und schob sich genau
   über die technische Zeile – also über das, was im Störfall als Bildschirm-
   foto weitergereicht werden soll. Deshalb unten Platz freihalten. */
@media (max-width: 699px) {
  .karte-fehler { padding-bottom: 88px; }
}

.karte-nojs {
  position: absolute; inset: 0; z-index: 400;
  background: var(--creme); display: grid; place-content: center;
  text-align: center; padding: 20px; gap: 10px;
}

/* --- Karten (Cards) ----------------------------------------------------- */

.strip-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin: 26px 0 12px;
}
.strip-kopf h2 { font-size: clamp(23px, 6vw, 30px); margin: 0; letter-spacing: 1.5px; }
.strip-kopf a { font-size: 15px; font-weight: 600; }

.strip {
  display: flex; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px var(--rand) 18px;
  margin: 0 calc(var(--rand) * -1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.strip > * { scroll-snap-align: start; flex: 0 0 min(72vw, 240px); }

.gitter {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  padding-bottom: 24px;
}

.station-karte {
  display: block; background: #fff; color: inherit; text-decoration: none;
  border: 2px solid var(--navy); border-radius: var(--r-card);
  overflow: hidden; transition: transform .15s ease, border-color .15s ease;
}
.station-karte:hover,
.station-karte:focus-visible { border-color: var(--pink); transform: translateY(-2px); color: inherit; }
.station-karte img,
.station-karte .platzhalter { width: 100%; height: 140px; object-fit: cover; display: block; }
.gitter .station-karte img,
.gitter .station-karte .platzhalter { height: 130px; }
.platzhalter { background: var(--platzhalter); }
.station-karte-text { padding: 10px 12px 12px; }
.station-karte-ort { font-size: 17px; font-weight: 600; line-height: 1.25; }
.station-karte-meta { font-size: 13.5px; color: var(--grau-text); margin-top: 2px; }

.leer-hinweis {
  border: 2px dashed var(--linie); border-radius: var(--r-card);
  padding: 28px 18px; text-align: center; color: var(--text-soft);
}

/* --- FAB ---------------------------------------------------------------- */

.fab {
  position: fixed; right: 16px; bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 950;
  background: var(--pink); color: #fff; text-decoration: none;
  border-radius: var(--r-pille); padding: 13px 20px;
  font-weight: 600; font-size: 15.5px; min-height: 48px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: var(--schatten-fab);
}
.fab:hover { background: var(--pink-hover); color: #fff; }
body.sheet-offen .fab { display: none; }

/* Der Mitmachen-Knopf schwebt über dem Fuß – dort Platz schaffen,
   damit er nichts verdeckt. */
.mit-fab .fuss-innen { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* --- Bottom-Sheet ------------------------------------------------------- */

.sheet-huelle { position: fixed; inset: 0; z-index: 1000; display: none; }
.sheet-huelle[data-offen="1"] { display: block; }

.sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(19, 28, 51, .55);
  animation: fadeIn .22s ease;
  border: 0; width: 100%; padding: 0; cursor: pointer;
}

.sheet {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 520px);
  max-height: 82vh; overflow-y: auto;
  background: var(--creme);
  border: 3px solid var(--navy); border-bottom: 0;
  border-radius: 20px 20px 0 0;
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
  animation: sheetHoch .28s ease;
}
@keyframes sheetHoch { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.sheet-griff {
  width: 44px; height: 5px; border-radius: 999px;
  background: var(--linie); margin: 2px auto 10px;
}
.sheet-zu {
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy); color: #fff; border: 0;
  font-size: 19px; line-height: 1; cursor: pointer;
}
.sheet-zu:hover { background: var(--pink); }

.etikett-oese {
  width: 16px; height: 16px; border-radius: 50%;
  border: 3px solid var(--pink); background: var(--creme);
  margin: 0 auto 10px;
}

.sheet-foto, .detail-foto {
  width: 100%; object-fit: cover;
  border: 2px solid var(--navy); border-radius: 12px;
  background: var(--platzhalter);
}
.sheet-foto { height: 190px; }

.badge {
  display: inline-block; background: var(--navy); color: #fff;
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 600; padding: 5px 12px; border-radius: var(--r-pille);
  margin: 12px 0 8px;
}
.sheet h2, .detail h1 { letter-spacing: 1px; }
.sheet h2 { font-size: 28px; margin: 0 0 4px; }
.meta { color: var(--grau-text); font-size: 15px; margin: 0 0 10px; }
.geschichte { font-size: 16.5px; line-height: 1.6; }
.unterschrift {
  font-family: var(--f-hand); font-weight: 700;
  color: var(--pink); font-size: 25px; margin: 6px 0 0;
}

.knopf-reihe { display: flex; gap: 10px; margin: 16px 0 4px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 20px;
  border-radius: var(--r-pille); border: 2px solid var(--navy);
  background: transparent; color: var(--navy);
  font-weight: 600; font-size: 15.5px; text-decoration: none; cursor: pointer;
}
.btn:hover { border-color: var(--pink); color: var(--pink); }
.btn-pink {
  background: var(--pink); border-color: var(--pink); color: #fff;
  box-shadow: var(--schatten-submit);
}
.btn-pink:hover { background: var(--pink-hover); border-color: var(--pink-hover); color: #fff; }
.btn-breit { flex: 1 1 auto; }
.btn-navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--pink); border-color: var(--pink); color: #fff; }

.hinweis-kopiert {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  z-index: 1100; background: var(--navy); color: #fff;
  padding: 11px 18px; border-radius: var(--r-pille); font-size: 15px;
  box-shadow: var(--schatten-karte);
}

/* --- Detailseite -------------------------------------------------------- */

.zurueck { display: inline-block; margin: 18px 0 12px; font-weight: 600; text-decoration: none; }

.detail {
  background: #fff; border: 3px solid var(--navy);
  border-radius: 18px; overflow: hidden; margin-bottom: 22px;
}
.detail-leiste { height: 6px; background: var(--pink); }
.detail-innen { padding: 16px 18px 20px; }
.detail .etikett-oese { width: 18px; height: 18px; border-color: var(--navy); }
.detail-foto { height: clamp(220px, 45vw, 360px); }
.detail h1 { font-size: clamp(30px, 7vw, 44px); margin: 8px 0 4px; }
.detail .geschichte { font-size: 18px; }

.nachbarn {
  display: flex; justify-content: space-between; gap: 10px;
  margin: 0 0 30px; font-size: 15px; flex-wrap: wrap;
}
.nachbarn a { font-weight: 600; text-decoration: none; }

.sharepic-kasten {
  background: var(--pink-zart); border: 2px solid var(--pink);
  border-radius: var(--r-card); padding: 14px 16px; margin: 0 0 26px;
}
.sharepic-kasten h2 { font-size: 20px; margin: 0 0 4px; }
.sharepic-kasten p { font-size: 14.5px; color: var(--text-soft); margin: 0 0 12px; }

/* --- Seitenkopf für Unterseiten ---------------------------------------- */

.seiten-kopf { padding: 22px 0 6px; }
.seiten-kopf h1 { font-size: clamp(30px, 8vw, 50px); margin: 0 0 6px; }
.seiten-kopf p { color: var(--text-soft); margin: 0; max-width: 40em; }

/* --- Formular ----------------------------------------------------------- */

.form-abschnitt {
  background: #fff; border: 2px solid var(--navy);
  border-radius: var(--r-card); padding: 18px; margin-bottom: 16px;
}
.abschnitt-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.nummer {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--pink); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  font-family: var(--f-text);
}
.abschnitt-kopf h2 { font-size: 22px; margin: 0; letter-spacing: 1px; }

.feld { margin-bottom: 14px; }
.feld:last-child { margin-bottom: 0; }
.feld > label, .feld-legende {
  display: block; font-weight: 600; font-size: 15px; margin-bottom: 5px;
}
.feld-hinweis { font-size: 13.5px; color: var(--grau-text); margin: 4px 0 0; }

input[type="text"], input[type="email"], input[type="date"],
input[type="search"], input[type="password"], select, textarea {
  width: 100%;
  border: 2px solid var(--navy); border-radius: var(--r-input);
  padding: 12px 14px; background: var(--creme);
  font-size: 16px; min-height: 48px;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }

/* iOS stellt das Datum in einem breiten Feld mittig dar, was aussieht, als
   sei das Feld viel zu groß. Links ausrichten wie bei allen anderen Feldern. */
input[type="date"] { text-align: left; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--pink); outline-offset: 1px; }

/* Zwei Felder nebeneinander. Die Beschriftungen sind unterschiedlich lang –
   „Vorname oder Spitzname (freiwillig)" bricht um, „Reisedatum" nicht. Mit
   align-items:end stehen die Eingabefelder trotzdem auf einer Linie. Unter
   620 px ist für zwei Spalten ohnehin kein Platz mehr. */
.zeile-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
/* Den Abstand regelt hier allein der Gitterabstand. Ohne diese Zeile bekäme
   nur das zweite Feld über .feld:last-child einen anderen Außenabstand – und
   die Eingaben stünden 14 px versetzt. */
.zeile-2 > .feld { margin-bottom: 0; }
@media (max-width: 620px) { .zeile-2 { grid-template-columns: 1fr; } }

.such-zeile { display: flex; gap: 8px; align-items: stretch; }
.such-zeile input { flex: 1 1 auto; }
.such-zeile .btn { flex: none; white-space: nowrap; }

.treffer { list-style: none; margin: 10px 0 0; padding: 0; }
.treffer li { margin-bottom: 6px; }
.treffer button {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--creme); border: 2px solid var(--linie);
  border-radius: var(--r-input); padding: 10px 12px; min-height: 48px;
  font-size: 15px; line-height: 1.35;
}
.treffer button:hover { border-color: var(--pink); }
.treffer .t-name { font-weight: 600; display: block; }
.treffer .t-adresse { color: var(--grau-text); font-size: 13.5px; }

.mini-karte {
  height: 240px; border: 2px solid var(--navy); border-radius: var(--r-karte);
  overflow: hidden; margin: 10px 0 8px; background: #e3ded4;
}
.marker-status {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--grau-text); margin: 0 0 10px;
}
.quelle { font-size: 12px; color: var(--grau-text); margin: 6px 0 0; }
.quelle a { color: var(--grau-text); }

.dropzone {
  display: block; cursor: pointer; text-align: center;
  border: 2px dashed var(--pink); border-radius: var(--r-card);
  background: var(--pink-zart); padding: 26px 16px; min-height: 140px;
}
.dropzone:hover { background: #fbeaf1; }
.dropzone .herz { font-size: 30px; color: var(--pink); line-height: 1; }
.dropzone .zeile-1 { font-weight: 600; margin: 8px 0 2px; }
.dropzone .zeile-2t { font-size: 13.5px; color: var(--grau-text); }
.dropzone input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
}
.foto-vorschau {
  width: 100%; height: 240px; object-fit: cover;
  border: 2px solid var(--navy); border-radius: 12px; margin-bottom: 10px;
}

.zustimmung { display: flex; gap: 12px; align-items: flex-start; }
.zustimmung input[type="checkbox"] {
  width: 22px; height: 22px; min-height: 22px; flex: none;
  accent-color: var(--pink); margin-top: 2px;
}
.zustimmung label { font-size: 15px; line-height: 1.45; font-weight: 400; }

.absenden {
  width: 100%; min-height: 54px;
  font-family: var(--f-display); font-size: 24px; letter-spacing: 1.5px;
  text-transform: uppercase;
}

.zaehler { font-size: 13px; color: var(--grau-text); text-align: right; margin: 4px 0 0; }
.zaehler.knapp { color: var(--pink-dunkel); font-weight: 600; }

/* Meldungen */
.meldung {
  border: 2px solid var(--pink); border-radius: var(--r-card);
  background: #fff; padding: 14px 16px; margin: 0 0 16px;
}
.meldung h2 { font-size: 20px; margin: 0 0 6px; color: var(--pink-dunkel); }
.meldung ul { margin: 0; padding-left: 20px; }
.meldung li { margin-bottom: 3px; }
.meldung p { margin: 0; }
.meldung-navy {
  border-color: var(--navy); background: var(--navy); color: #fff;
}
.meldung-navy h2 { color: #fff; }

/* --- Dankeseite --------------------------------------------------------- */

.danke {
  max-width: calc(560px + 2 * var(--rand));   /* Rand eingerechnet, siehe .huelle-lese */
  margin: 0 auto; text-align: center; padding: 30px var(--rand) 40px;
}
.danke img.figur { width: 110px; margin: 0 auto 14px; }
.danke h1 { font-size: clamp(28px, 7.5vw, 44px); }
.danke .claim {
  font-family: var(--f-hand); font-weight: 700; color: var(--pink);
  font-size: clamp(22px, 6vw, 30px); transform: rotate(-1.5deg);
  margin: 18px 0 22px; line-height: 1.2;
}

/* --- Textseiten --------------------------------------------------------- */

/* Nur oben und unten setzen: das seitliche Padding kommt von .huelle-lese
   und darf nicht überschrieben werden, sonst klebt der Text am Rand. */
.text-seite { padding-top: 24px; padding-bottom: 40px; }
.text-seite h1 { font-size: clamp(30px, 8vw, 46px); }
.text-seite h2 { font-size: 24px; margin-top: 1.6em; }
.text-seite p, .text-seite li { color: var(--text-soft); }
.text-seite .platzhalter-text {
  background: #fff; border: 2px dashed var(--linie);
  border-radius: var(--r-input); padding: 12px 14px; color: var(--grau-text);
}

/* Wohin-Kacheln von der Postkarten-Rückseite */
.wohin {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin: 18px 0 26px;
}
.wohin div {
  background: var(--navy); color: #fff; border-radius: var(--r-card);
  padding: 16px 14px; text-align: center;
}
.wohin .icon { font-size: 26px; color: var(--pink-hell); line-height: 1; }
.wohin p { margin: 8px 0 0; font-size: 14.5px; color: var(--auf-navy); }

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

.fuss { margin-top: 34px; background: var(--creme); }
.fuss-skyline {
  /* Wächst mit der Seitenbreite und behält dabei das Verhältnis des Originals –
     die Kirchtürme werden also nie angeschnitten. */
  width: 100%; height: auto; display: block; margin-bottom: -1px;
}
.fuss-balken {
  background: var(--pink); color: #fff; margin: 0;
  font-family: var(--f-display); font-size: 21px; letter-spacing: 2px;
  text-transform: uppercase;
  /* Wie auf dem Flyer: Göttingen links, die Welt rechts, dazwischen das Herz.
     Die Fläche geht über die volle Breite – sonst stünde die Silhouette
     darüber seitlich über. Nur der TEXT wird auf die Inhaltsbreite geführt,
     indem das Polster mitwächst. */
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  /* Der Rand der Inhaltsspalte wird mitgerechnet, damit „Göttingen“ genau
     unter der Überschrift der Seite steht und nicht 44 px weiter links. */
  padding: 12px max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand)));
}
.fuss-herz { letter-spacing: 4px; }
.fuss-innen {
  background: var(--navy); color: var(--auf-navy);
  padding: 20px var(--rand) calc(26px + env(safe-area-inset-bottom));
  text-align: center;
}
.fuss-hashtags { color: var(--fuss-muted); font-size: 14px; margin: 0 0 10px; }
.fuss-hashtags a { color: var(--fuss-muted); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; }
.fuss-links a {
  color: var(--auf-navy); text-decoration: none; font-size: 14.5px;
  padding: 8px 2px; min-height: 40px; display: inline-flex; align-items: center;
}
.fuss-links a:hover { color: var(--pink-hell); }
.fuss-links .leise { color: var(--grau-text); }
.fuss-claim {
  font-family: var(--f-hand); font-weight: 700; color: var(--pink-hell);
  font-size: 21px; margin: 14px 0 0; line-height: 1.25;
}

/* --- Leaflet-Anpassungen ------------------------------------------------ */

.leaflet-container { background: #e3ded4; font-family: var(--f-text); }
.leaflet-tile { filter: grayscale(.25) sepia(.12) saturate(.85); }

.leaflet-control-attribution {
  background: rgba(236, 232, 225, .85) !important;
  color: var(--grau-text); font-size: 10px;
}
.leaflet-control-attribution a { color: var(--grau-text); }

.leaflet-bar a, .leaflet-bar a:hover {
  width: 40px; height: 40px; line-height: 40px; font-size: 20px;
  color: var(--navy);
}
.leaflet-touch .leaflet-bar a:first-child { border-radius: 8px 8px 0 0; }
.leaflet-touch .leaflet-bar a:last-child { border-radius: 0 0 8px 8px; }

.liesel-pin {
  width: 34px; height: 34px;
  background: var(--pink); border: 2.5px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 8px rgba(19, 28, 51, .4);
  display: grid; place-items: center;
}
.liesel-pin span {
  transform: rotate(45deg); color: #fff; font-size: 14px; line-height: 1;
}
.liesel-pin-gross { width: 40px; height: 40px; }
.liesel-pin-gross span { font-size: 17px; }

.liesel-cluster {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy); border: 3px solid var(--pink);
  color: #fff; font-weight: 700; font-size: 16px;
  display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(19, 28, 51, .35);
}
.marker-cluster { background: none; }

/* --- Verwaltung --------------------------------------------------------- */

.admin-kopf {
  background: var(--navy); color: #fff; padding: 14px 0;
  margin-bottom: 18px;
}
.admin-kopf .huelle { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-kopf h1 { font-size: 26px; margin: 0; }
.admin-kopf a { color: var(--auf-navy); }

.reiter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.reiter a {
  border: 2px solid var(--navy); border-radius: var(--r-pille);
  padding: 9px 16px; min-height: 44px; display: inline-flex; align-items: center;
  text-decoration: none; color: var(--navy); font-weight: 600; font-size: 15px;
  background: #fff;
}
.reiter a[aria-current="page"] { background: var(--pink); border-color: var(--pink); color: #fff; }
.reiter a:hover { border-color: var(--pink); }

.admin-karte {
  background: #fff; border: 2px solid var(--navy); border-radius: var(--r-card);
  padding: 14px; margin-bottom: 14px;
  display: grid; grid-template-columns: 110px 1fr; gap: 14px;
}
.admin-karte img, .admin-karte .platzhalter {
  width: 110px; height: 90px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--linie);
}
.admin-karte h2 { font-size: 19px; margin: 0 0 4px; }
.admin-karte .privat { font-size: 13.5px; color: var(--grau-text); margin: 6px 0 0; }
.admin-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.admin-aktionen .btn { min-height: 44px; padding: 9px 16px; font-size: 15px; }

.admin-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 20px; }
.admin-zahlen div { background: #fff; border: 2px solid var(--navy); border-radius: var(--r-card); padding: 12px 14px; }
.admin-zahlen b { font-family: var(--f-display); font-size: 34px; color: var(--pink); display: block; line-height: 1; }
.admin-zahlen span { font-size: 13.5px; color: var(--text-soft); }

.login-kasten {
  max-width: 380px; margin: 12vh auto; background: #fff;
  border: 3px solid var(--navy); border-radius: 18px; padding: 22px;
}

/* --- Größere Bildschirme ------------------------------------------------ */

/* Ab hier bekommt der Inhalt spürbar mehr Luft zum Rand. */
@media (min-width: 560px)  { :root { --rand: 26px; } }
@media (min-width: 900px)  { :root { --rand: 36px; } }
@media (min-width: 1200px) { :root { --rand: 44px; } }

@media (min-width: 700px) {
  .hero-innen { padding: 34px var(--rand) 36px; gap: 26px; }
  .karten-block { padding-top: 26px; padding-bottom: 6px; }
  .strip > * { flex-basis: 240px; }
  .admin-karte { grid-template-columns: 160px 1fr; }
  .admin-karte img, .admin-karte .platzhalter { width: 160px; height: 120px; }
}

@media (max-width: 600px) {
  /* Auf dem Telefon wäre die Silhouette maßstabsgetreu nur gut 35 px hoch.
     Deshalb hier lieber einen Ausschnitt in lesbarer Höhe zeigen. */
  .fuss-skyline { height: 54px; object-fit: cover; object-position: center bottom; }
}

@media (max-width: 560px) {
  .marke-text { font-size: 18px; letter-spacing: 1px; }
  .marke { gap: 7px; }
  .marke-herz { width: 26px; height: 26px; font-size: 13px; }
  /* Die Karte ist die Startseite – dafür genügt das Logo. */
  .haupt-nav .nur-gross { display: none; }
  .haupt-nav a { padding: 10px 5px; font-size: 14.5px; }
  .haupt-nav .pille { padding: 10px 14px; }
  .haupt-nav .sprache { padding: 10px 4px; font-size: 12.5px; }
}

@media (max-width: 420px) {
  .marke-text { font-size: 16px; }
  .such-zeile { flex-wrap: wrap; }
  .such-zeile .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .kopf, .fab, .sheet-huelle, .fuss-links, .haupt-nav { display: none !important; }
  body { background: #fff; }
}

/* Meldung direkt unter der Foto-Auswahl (vom Skript eingefügt). */
.feld-fehler {
  margin: 10px 0 0; padding: 10px 14px; font-size: 15px; font-weight: 600;
  color: var(--pink-dunkel); background: var(--pink-zart);
  border: 2px solid var(--pink); border-radius: var(--r-input);
}