/* ==========================================================================
   GSD Travel — Frontend
   Tonalität aus docs/moodboard.png: Himmelblau, frisches Grün, Sandbeige,
   warmes Orange als Akzent, viel Weißraum. Freundlich, nicht klinisch.
   Layout nach den Screenshots: Karte liegt fest im Hintergrund, der Inhalt
   schiebt sich als „Sheet" darüber.
   ========================================================================== */

/*
 * Noto Sans für Fließtext und Oberfläche. Sehr weite Zeichenabdeckung, ruhige
 * Formen, gut lesbar in kleinen Größen — genau das, was Formulare und
 * Hinweistexte brauchen.
 *
 * Der latin-ext-Schnitt ist mit 164 KB deutlich schwerer als latin (35 KB),
 * wird über unicode-range aber nur geholt, wenn auf der Seite wirklich ein
 * Zeichen daraus vorkommt. Deutsche Umlaute und ß liegen in latin.
 *
 * Kursive Schnitte sind nicht geladen; die seltene Hervorhebung im
 * Redaktionstext schrägt der Browser selbst. Wer echte Kursive will, holt
 * Noto Sans mit ital,wght@1,400..600 dazu.
 */
@font-face {
  font-family: 'NotoSansVar';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/noto-sans/noto-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'NotoSansVar';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/noto-sans/noto-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * Caveat Brush ausschließlich für den Schriftzug neben dem Logo. Eine
 * Pinselhandschrift — sie greift die Konturen des Vereinslogos auf. Nur ein
 * Schnitt (400) und nur Latein: 51 KB.
 */
@font-face {
  font-family: 'CaveatBrush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/caveat-brush/caveat-brush-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Fraunces für die Überschriften — eine Serife mit weichen, leicht schrägen
 * Formen. Sie bringt die Handschriftlichkeit von Logo und Illustrationen in
 * die Typografie, ohne verspielt zu werden.
 *
 * Variable Schrift mit Größenachse: der Browser stimmt die Strichstärke
 * automatisch auf die Schriftgröße ab, große Zeilen wirken dadurch ruhiger.
 * Nur die Gewichte 600–700 geladen, mehr braucht eine Überschrift nicht.
 */
@font-face {
  font-family: 'FrauncesVar';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonts/fraunces/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'FrauncesVar';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonts/fraunces/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /*
   * Farbkonzept — alle Farben stammen aus dem Vereinslogo (docs/logo.png).
   * Welche Rolle eine Farbe übernehmen darf, entscheidet ihr Kontrast:
   * Blau, Rot und Violett tragen weiße Schrift, Gelb und Salbei nicht.
   * Ausführlich in docs/DESIGN.md.
   */

  /* Neutrale Töne, aus dem Logo-Blau abgeleitet */
  --ink:        #1b2450;   /* Fließtext, Fußzeile, Marker          14,84:1 */
  --ink-soft:   #4a5578;   /* Einleitungen, Beschreibungen          7,34:1 */
  /*
   * Gedämpfter Text steht nicht nur auf Weiß, sondern auch auf den hellen
   * Farbflächen. Gemessen wird deshalb gegen die dunkelste davon
   * (Violett-hell): dort trägt dieser Ton 4,66:1, auf Weiß 5,62:1.
   */
  --ink-faint:  #5e6782;

  --paper:      #ffffff;
  --shell:      #f6f7fb;   /* ruhiger Abschnittsgrund */
  --line:       rgba(27, 36, 80, .14);
  --line-soft:  rgba(27, 36, 80, .08);

  /* Blau — Primäraktion, Links, Kennzahlen. Weiß darauf: 7,75:1 */
  --blue:       #304da2;
  --blue-deep:  #27407f;
  --blue-pale:  #eaedf6;

  /* Rot — ausschließlich Fehler und Ablehnung. Weiß darauf: 5,90:1 */
  --red:        #c61824;
  --red-deep:   #a4121c;
  --red-pale:   #f9e8e9;

  /* Gelb — Aufmerksamkeit ohne Alarm. Trägt nur dunkle Schrift (1,70:1) */
  --yellow:      #e9c423;
  --yellow-deep: #756212;  /* Textvariante, 5,98:1 auf Weiß */
  --yellow-pale: #fdf9e9;

  /* Salbei — Bestätigung und ruhige Flächen. Trägt nur dunkle Schrift (2,60:1) */
  --sage:       #7daa97;
  --sage-deep:  #57776a;   /* Textvariante, 4,94:1 auf Weiß */
  --sage-pale:  #f2f7f5;

  /* Violett — sekundäre Betonung, Fokusring. Weiß darauf: 12,45:1 */
  --violet:      #421488;
  --violet-deep: #33106a;
  --violet-pale: #ece8f3;

  /* Maße */
  --pill-radius: 999px;
  --radius:      18px;
  --radius-sm:   12px;
  --shadow-pill: 0 2px 14px rgba(27, 36, 80, .14);
  --shadow-card: 0 1px 3px rgba(27, 36, 80, .06), 0 12px 32px -12px rgba(27, 36, 80, .18);
  --shadow-lift: 0 8px 40px -8px rgba(27, 36, 80, .28);

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* Anteil des Viewports, den die Karte beim Laden freigibt */
  --map-reveal: 80vh;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: 'NotoSansVar', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--shell);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'FrauncesVar', Georgia, 'Times New Roman', serif;
  /* Serifen brauchen weniger Enge als der Grotesk im Fließtext. */
  line-height: 1.18;
  letter-spacing: -0.006em;
  font-weight: 600;
  font-optical-sizing: auto;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -0.012em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.15rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1.15em; text-wrap: pretty; }
a  { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--violet); }
img, svg { max-width: 100%; height: auto; }

/* Violett ist mit keiner Interaktionsfarbe zu verwechseln und steht mit
   12,45:1 auf hellem Grund; auf dunklen Flächen übernimmt Gelb. */
:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
  border-radius: 4px;
}
.footer :focus-visible,
.map-layer :focus-visible { outline-color: var(--yellow); }

.skip-link {
  position: absolute; left: .5rem; top: -4rem; z-index: 999;
  background: var(--paper); color: var(--ink);
  padding: .7rem 1.1rem; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pill); transition: top .15s;
}
.skip-link:focus { top: .5rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------- Karte -- */

.map-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--blue-pale);
}
.map-layer .leaflet-container {
  height: 100%;
  width: 100%;
  background: var(--blue-pale);
  font: inherit;
}
/* Die Karte ist im oberen Bereich sichtbar; darunter liegt das Sheet. */
.map-layer .leaflet-control-attribution {
  background: rgba(255, 255, 255, .82);
  font-size: .68rem;
  border-radius: var(--pill-radius) 0 0 0;
  padding: .2rem .6rem;
}
/*
 * Die Karte reicht über den ganzen Viewport, sichtbar ist aber nur der obere
 * Streifen — darunter liegt das Inhalts-Sheet. Alle Leaflet-Bedienelemente am
 * unteren Rand werden deshalb bis an die Unterkante dieses Streifens angehoben;
 * im Kartenmodus dürfen sie wieder ganz nach unten.
 */
.map-layer .leaflet-bottom {
  bottom: calc(100vh - var(--map-reveal));
  transition: bottom .15s ease;
}
body.map-only .map-layer .leaflet-bottom { bottom: 0; }
.leaflet-control-zoom {
  border: 0 !important;
  box-shadow: var(--shadow-pill);
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
}
.leaflet-control-zoom a {
  color: var(--ink) !important;
  border-color: var(--line-soft) !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  line-height: 2.65rem !important;
  font-size: 1.3rem !important;
  background: var(--paper) !important;
}
.leaflet-control-zoom a:hover { background: var(--shell) !important; }

/* ---------------------------------------------------------- Kartenfilter */

/* Rechte Spalte, von oben: Navigation, Filter, „ganze Karte"-Schalter. */
.map-tools {
  position: fixed;
  z-index: 45;
  right: var(--gutter);
  top: calc(clamp(.85rem, 2.4vw, 1.5rem) + 3.6rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: min(23rem, calc(100vw - 2 * var(--gutter)));
}
/* Muss die Klassenregel schlagen, sonst bleibt das leere Badge sichtbar. */
.map-tools__count[hidden] { display: none; }
.map-tools__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 700;
}

.filter-panel {
  width: min(23rem, calc(100vw - 2 * var(--gutter)));
  margin-top: .6rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 1.1rem 1.2rem;
  /* bleibt im sichtbaren Kartenstreifen — der Rest wird gescrollt */
  max-height: calc(var(--map-reveal) - 10rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.map-only .filter-panel { max-height: calc(100vh - 11rem); }

.filter-group { border: 0; padding: 0; margin: 0 0 1.1rem; }
.filter-group legend {
  padding: 0;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .5rem;
}
.filter-group__options { display: flex; flex-wrap: wrap; gap: .4rem; }

.filter-chip { position: relative; cursor: pointer; }
.filter-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.filter-chip span {
  display: block;
  padding: .32rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--pill-radius);
  font-size: .84rem;
  line-height: 1.35;
  color: var(--ink-soft);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.filter-chip:hover span { border-color: var(--blue); color: var(--blue); }
.filter-chip input:checked + span {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.filter-chip input:focus-visible + span {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.filter-actions {
  /* klebt unten, damit Trefferzahl und Zurücksetzen immer erreichbar bleiben */
  position: sticky;
  bottom: -1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: -1.1rem;
  padding: .9rem 0 1.1rem;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
}
.filter-actions .btn { padding: .45rem 1rem; font-size: .85rem; }
.filter-result { font-size: .85rem; color: var(--ink-faint); }

/* ------------------------------------------------- Reise-Illustrationen -- */

/*
 * Das Dekor liegt in einer eigenen Leaflet-Pane (siehe public/js/map.js) und
 * verschiebt sich mit der Karte. Für Maus und Tastatur ist es nicht vorhanden.
 *
 * Vier Transformationen greifen unabhängig voneinander ineinander:
 *   translate  zentriert das Bild auf seinem Ankerpunkt
 *   rotate     die leichte Schräglage aus der Konfiguration
 *   scale      der Zoomfaktor, gesetzt von map.js
 *   transform  die ruhige Schwebebewegung
 */
.map-decor__item { pointer-events: none; }

.map-decor__item img {
  position: absolute;
  left: 0;
  top: 0;
  height: auto;
  /* Der Leaflet-Container ist 0x0 groß, damit das Bild frei um seinen
     Ankerpunkt zentriert werden kann. Die globale Regel img { max-width: 100% }
     würde daraus eine Breite von 0 machen. */
  max-width: none;
  translate: -50% -50%;
  scale: var(--decor-scale, 1);
  opacity: .92;
  filter: drop-shadow(0 6px 14px rgba(27, 36, 80, .22));
  /* Ausweichen vor einem Pin soll man sehen, nicht bemerken. */
  transition: scale .25s ease, translate .3s ease, opacity .3s ease;
  animation: illu-schweben 9s ease-in-out infinite;
}

@keyframes illu-schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
  .map-decor__item img { animation: none; transition: none; }
}

.gsd-pin { display: block; filter: drop-shadow(0 2px 3px rgba(27, 36, 80, .35)); }
.gsd-pin path { transition: fill .15s ease; }
.leaflet-marker-icon:hover .gsd-pin path,
.leaflet-marker-icon:focus .gsd-pin path { fill: var(--violet); }


/* ------------------------------------------------------------- Kopfbar -- */

.topbar {
  position: fixed;
  inset: 0 0 auto;
  /* über dem Karten-Umschalter, damit das offene Menü ihn verdeckt */
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(.85rem, 2.4vw, 1.5rem) var(--gutter);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-soft);
  border-radius: var(--pill-radius);
  box-shadow: var(--shadow-pill);
  padding: .7rem 1.35rem;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); color: var(--ink); }
.pill--brand { font-size: clamp(1.05rem, 2.4vw, 1.35rem); letter-spacing: -.02em; padding-inline: 1.5rem; }

.brand-mark {
  height: 2.5em;
  width: auto;
  flex: none;
  display: block;
}
/*
 * Die Marke hat zwei Zustände: kompakt nur das Zeichen, aufgeklappt mit
 * Schriftzug. Aufgeklappt wird beim Überfahren, beim Tastaturfokus und die
 * ersten Sekunden nach dem Laden (Klasse brand-intro am body).
 *
 * Die Breite läuft über grid-template-columns von 0fr auf 1fr — das ist der
 * einzige Weg, eine unbekannte Textbreite sauber zu animieren; auf `auto`
 * lässt sich nicht überblenden.
 */
.pill--brand {
  gap: 0;
  padding: .5rem .95rem;
  transition: padding .35s ease, transform .15s ease, box-shadow .15s ease;
}

/*
 * Der Schriftzug steht in der Handschrift. Sie hat nur einen Schnitt, deshalb
 * ausdrücklich font-weight 400 — die Pille setzt sonst 600 und der Browser
 * rechnet einen Kunstfettdruck darüber, der die Striche verklumpt. Die enge
 * Laufweite der Überschriften passt hier ebenfalls nicht.
 */
.pill--brand .pill__label {
  font-family: 'CaveatBrush', 'Segoe Script', cursive;
  font-weight: 400;
  letter-spacing: .01em;
  /* Pinselschriften wirken auf gleicher Kegelgröße kleiner als ein Grotesk. */
  font-size: 1.8em;
  /* Ohne enge Zeilenhöhe würde der Schriftzug die Pille auseinanderziehen. */
  line-height: 1;
}

.pill--brand .pill__label {
  display: grid;
  grid-template-columns: 0fr;
  margin-left: 0;
  opacity: 0;
  transition:
    grid-template-columns .35s cubic-bezier(.4, 0, .2, 1),
    margin-left .35s cubic-bezier(.4, 0, .2, 1),
    opacity .25s ease;
}
.pill--brand .pill__label > span {
  overflow: hidden;
  white-space: nowrap;
}

.pill--brand:hover,
.pill--brand:focus-visible,
body.brand-intro .pill--brand { padding-right: 1.4rem; }

.pill--brand:hover .pill__label,
.pill--brand:focus-visible .pill__label,
body.brand-intro .pill--brand .pill__label {
  grid-template-columns: 1fr;
  margin-left: .7rem;
  opacity: 1;
}

.nav { position: relative; }
.nav__panel {
  position: absolute;
  right: 0;
  top: calc(100% + .6rem);
  min-width: 17rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: .5rem;
  display: grid;
  gap: .1rem;
}
.nav__panel a {
  display: block;
  padding: .6rem .85rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.nav__panel a:hover { background: var(--blue-pale); color: var(--blue); }
.nav__sep { height: 1px; background: var(--line-soft); margin: .4rem .5rem; }
.nav__meta { padding: .45rem .85rem; font-size: .8rem; color: var(--ink-faint); }

/* Drei Striche, die beim Öffnen zum Kreuz kippen. */
.burger {
  display: grid;
  gap: 4px;
  width: 20px;
}
.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .18s ease, opacity .12s ease;
}
.burger--open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger--open span:nth-child(2) { opacity: 0; }
.burger--open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .burger span { transition: none; }
}

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

.sheet {
  position: relative;
  z-index: 20;
  margin-top: var(--map-reveal);
  background: var(--paper);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -18px 50px -24px rgba(27, 36, 80, .45);
}
.sheet--flat { margin-top: 0; border-radius: 0; }

.sheet__handle {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: .75rem 0 .25rem;
  background: linear-gradient(var(--paper) 60%, transparent);
  border-radius: var(--radius) var(--radius) 0 0;
}
.sheet__handle::before {
  content: '';
  width: 3rem; height: 4px;
  border-radius: 999px;
  background: var(--line);
}

/* „X" oben rechts blendet den Inhalt aus und gibt die ganze Karte frei */
.map-toggle {
  position: fixed;
  z-index: 41;
  right: var(--gutter);
  /*
   * Unten rechts im sichtbaren Kartenstreifen, auf einer Höhe mit dem Zoom
   * links. Der Zuschlag von 1.9rem hält die Attribution frei, die darunter
   * in der Ecke sitzt und sichtbar bleiben muss.
   */
  bottom: calc(100vh - var(--map-reveal) + 1.9rem);
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-pill);
  cursor: pointer;
}
.map-toggle:hover { background: var(--ink); color: #fff; }

/* Weggeblendet, sobald der Inhalt darüberliegt (siehe public/js/app.js). */
.map-toggle {
  transition: opacity .18s ease, transform .18s ease, background .15s ease, color .15s ease;
}
.map-toggle.is-away {
  opacity: 0;
  transform: translateY(.6rem) scale(.9);
  pointer-events: none;
  visibility: hidden;
}

/*
 * Kartenmodus: Sheet UND Fußzeile verschwinden. Nur das Sheet auszublenden
 * reicht nicht — die Fußzeile steht im normalen Fluss und würde sonst als
 * dunkler Block an den Seitenanfang und damit über die Karte rutschen.
 */
body.map-only .map-toggle { bottom: 1.9rem; }

body.map-only .sheet,
body.map-only .footer { display: none; }
body.map-only { overflow: hidden; }

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

/*
 * 64rem statt 72rem: auf breiten Bildschirmen bleibt dadurch links genug Raum,
 * dass die fest stehende Markenpille neben dem Inhalt liegt statt darüber.
 */
.wrap { max-width: 64rem; margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--measure); }
.prose > :last-child { margin-bottom: 0; }
/* Einleitung und Fließtext einer Infoseite sind zwei Blöcke — sie brauchen Luft. */
.prose + .prose { margin-top: 1.6rem; }

/*
 * Vor einem Formular endet der erklärende Teil. Der Abstand muss deshalb
 * deutlich größer sein als der zwischen zwei Absätzen — sonst liest sich das
 * erste Feld wie eine Fortsetzung des Textes.
 */
.prose + form { margin-top: clamp(2.5rem, 5vw, 3.75rem); }

/* Redaktionell gepflegte Seiten kommen als Markdown — die erzeugten Elemente
   bekommen hier ihre Form, damit sie zur restlichen Seite passen. */
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.35rem; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--blue); }
.prose strong { color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--line-soft); margin: 2.5rem 0; }

/* Hinweise und Vorbehalte stehen im Markdown als Zitat. */
.prose blockquote {
  margin: 1.6rem 0;
  padding: 1rem 1.2rem;
  background: var(--yellow-pale);
  border-left: 3px solid var(--yellow);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-soft);
  font-size: .97rem;
}
.prose blockquote > :last-child { margin-bottom: 0; }

.prose code {
  background: var(--shell);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: .1em .35em;
  font-size: .92em;
}

/*
 * Abschnitte tragen ihre Farbe in --tint, damit die Übergangskurve dieselbe
 * Farbe aufnehmen kann, ohne sie doppelt zu pflegen.
 */
.section {
  position: relative;
  padding-block: clamp(3rem, 8vw, 6rem);
  --tint: var(--paper);
  background: var(--tint);
}
/*
 * Der erste Abschnitt schließt direkt an die Kartenkante an — dort wirkt der
 * übliche Innenabstand wie ein Loch.
 */
.section--first { padding-top: 2rem; }

.section--tint   { --tint: var(--shell); }
.section--blue   { --tint: var(--blue-pale); }
.section--sage   { --tint: var(--sage-pale); }
.section--violet { --tint: var(--violet-pale); }

/*
 * Übergang zwischen zwei Abschnitten: kein Strich, sondern eine Schwingung.
 * Das SVG liegt außerhalb des Abschnitts und ist in dessen Farbe gefüllt —
 * es schiebt die Fläche also in den Nachbarn hinein. Sichtbar bleibt nur die
 * Kurve. Die Höhe bleibt unter dem Innenabstand der Abschnitte, damit nie
 * Text verdeckt wird.
 */
.section-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(1.25rem, 3vw, 2.75rem);
  display: block;
  color: var(--tint);
  pointer-events: none;
}
.section-wave--top    { bottom: 100%; }
.section-wave--bottom { top: 100%; transform: scaleY(-1); }

.section__lead {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--ink-soft);
  max-width: 42rem;
}

.eyebrow {
  /* Das Label über der Überschrift bleibt beim Grotesk — als ruhiger Auftakt. */
  font-family: 'NotoSansVar', system-ui, sans-serif;
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: .9rem;
}

/* Zähler „wir sind viele" */
.counter {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 4rem);
  /* Steht zwischen zwei Absätzen und braucht deshalb Luft nach beiden Seiten. */
  padding-block: 1.6rem;
}
.counter__item { min-width: 8rem; }
.counter__value {
  display: block;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.counter__label { color: var(--ink-soft); font-size: .95rem; }

.cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: 2.5rem;
}
.card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-card);
}
.card h3 { margin-bottom: .45rem; }
.card p:last-child { margin-bottom: 0; }
.card__icon {
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue-pale);
  color: var(--blue);
  margin-bottom: 1rem;
}
.card__icon--violet { background: var(--violet-pale); color: var(--violet); }
.card__icon--sage   { background: var(--sage-pale);   color: var(--sage-deep); }
.card__icon--yellow { background: var(--yellow-pale); color: var(--yellow-deep); }

/* Zwischen den Schritten deutlich mehr Luft als innerhalb eines Schritts —
   sonst liest sich die Beschreibung wie die Überschrift des nächsten. */
.steps {
  counter-reset: step;
  display: grid;
  gap: 1.9rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  column-gap: 1rem;
  row-gap: .2rem;
  align-items: start;
}
.steps li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  /* Gelb trägt keine weiße Schrift (1,70:1) — die Ziffer steht in Tinte. */
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  font-size: .95rem;
}
/* ::before belegt Spalte 1; Titel und Beschreibung stapeln sich in Spalte 2. */
.steps li strong { grid-column: 2; display: block; }
.steps li span { grid-column: 2; color: var(--ink-soft); }

.quotes {
  display: grid;
  column-gap: 1.5rem;
  row-gap: 2.75rem;          /* Platz für die Sprechblasen-Spitze */
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  margin-top: 2.5rem;
}

/* Sprechblase: weiße Fläche mit Spitze unten links. Der Schatten liegt als
   drop-shadow auf dem ganzen Element, damit er die Spitze mitnimmt und an der
   Nahtstelle keine Kante entsteht. */
.quote {
  position: relative;
  background: var(--paper);
  border: 0;
  border-radius: 22px;
  padding: 1.85rem 1.9rem 1.6rem;
  box-shadow: none;
  filter:
    drop-shadow(0 1px 2px rgba(27, 36, 80, .07))
    drop-shadow(0 14px 26px rgba(27, 36, 80, .10));
}
.quote::after {
  content: '';
  position: absolute;
  left: 2.4rem;
  bottom: -1.05rem;
  width: 2.3rem;
  height: 1.1rem;
  background: var(--paper);
  clip-path: polygon(100% 0, 0 0, 12% 100%);
}
.quote blockquote { margin: 0 0 .6rem; font-size: 1rem; color: var(--ink-soft); }
.quote footer { margin-top: .2rem; }
/* Erfahrungsberichte sind lang — eingeklappt bleibt der Abschnitt überschaubar. */
.quote__text--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.quote__more {
  border: 0;
  background: none;
  padding: 0 0 1rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.quote__more:hover { color: var(--yellow-deep); }
[x-cloak] { display: none !important; }
.quote footer { font-weight: 600; font-size: .92rem; }
.quote footer span { display: block; font-weight: 400; color: var(--ink-faint); font-size: .85rem; }

/* -------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid transparent;
  border-radius: var(--pill-radius);
  padding: .8rem 1.6rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-deep); color: #fff; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #0c2b34; color: #fff; }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { background: var(--shell); color: var(--ink); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

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

.field { margin-bottom: 1.1rem; }
.field > label, .field__legend {
  display: block;
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: .35rem;
}
.field__hint { font-size: .84rem; color: var(--ink-faint); margin-top: .3rem; }
.field__error { font-size: .84rem; color: var(--red-deep); margin-top: .3rem; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .68rem .85rem;
}
textarea { min-height: 9rem; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-pale);
}
.field--invalid input, .field--invalid textarea, .field--invalid select { border-color: var(--red-deep); }

.check { display: grid; grid-template-columns: 1.15rem 1fr; gap: .65rem; align-items: start; font-size: .93rem; }
.check input { margin-top: .28rem; }

.grid-2 { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

/* Über dreißig Sprachen — in Spalten, sonst wird das Formular zur Liste. */
.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .45rem 1rem;
}
.lang-grid .check { grid-template-columns: 1.1rem auto; }

/* Honeypot — für Menschen unsichtbar, für Bots verlockend */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* --------------------------------------------------------------- Dialog */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(27, 36, 80, .45);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.modal {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  width: min(38rem, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  position: relative;
}
.modal__close {
  position: absolute; top: .9rem; right: .9rem;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--shell); color: var(--ink);
  cursor: pointer;
}
.modal__close:hover { background: var(--ink); color: #fff; }

/* Popup auf der Karte */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 0;
}
.leaflet-popup-content { margin: 0; width: 17rem !important; font: inherit; line-height: 1.5; }
.leaflet-popup-tip { box-shadow: var(--shadow-pill); }

/*
 * Leaflet setzt `.leaflet-container a { color: #0078A8 }` — Spezifität 0,1,1 und
 * damit stärker als `.btn--primary` (0,1,0). Ohne diese Regel steht der
 * Button-Text im Karten-Popup in Leaflet-Blau auf Orange, Kontrast rund 1,5:1.
 */
.leaflet-container a.btn--primary,
.leaflet-container a.btn--primary:hover { color: #fff; }
.leaflet-container a.btn--ink,
.leaflet-container a.btn--ink:hover { color: #fff; }
.leaflet-container a.btn--ghost,
.leaflet-container a.btn--ghost:hover { color: var(--ink); }

.pin-card { padding: 1.1rem 1.2rem; }
/* Der GSD-Typ trägt die Karte — danach sucht, wer einen Reisekontakt braucht. */
.pin-card__type {
  font-family: 'FrauncesVar', Georgia, serif;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-bottom: .15rem;
}
.pin-card__place { color: var(--ink-faint); font-size: .85rem; margin-bottom: .8rem; }

.pin-card__languages { margin-bottom: .9rem; }
.pin-card__label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .35rem;
}
.pin-card__meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem; }
.tag {
  display: inline-block;
  font-size: .76rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: var(--pill-radius);
  background: var(--blue-pale);
  color: var(--blue);
}
.tag--sage   { background: var(--sage-pale);   color: var(--sage-deep); }
.tag--yellow { background: var(--yellow-pale); color: var(--yellow-deep); }
.pin-card__note { font-size: .9rem; color: var(--ink-soft); margin-bottom: .9rem; }
.pin-card__locked {
  font-size: .88rem;
  color: var(--ink-soft);
  background: var(--shell);
  border-radius: var(--radius-sm);
  padding: .8rem .9rem;
  margin-bottom: .9rem;
}

/* ------------------------------------------------------------- Meldungen */

.note {
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: .95rem;
  border: 1px solid transparent;
}
.note--ok   { background: var(--sage-pale);   border-color: rgba(87, 119, 106, .35); color: var(--sage-deep); }
.note--info { background: var(--blue-pale);   border-color: rgba(48, 77, 162, .28);  color: var(--blue); }
.note--warn { background: var(--yellow-pale); border-color: rgba(117, 98, 18, .3);   color: var(--yellow-deep); }
.note--err  { background: var(--red-pale);    border-color: rgba(164, 18, 28, .3);   color: var(--red-deep); }

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

.footer {
  position: relative;
  z-index: 20;
  --tint: var(--ink);
  background: var(--tint);
  color: rgba(255, 255, 255, .78);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  font-size: .95rem;
}
/*
 * Die Fußzeilenspalten sind schmal, deutsche Komposita wie
 * „Vernetzungsplattform" passen dort nicht in eine Zeile. Automatische
 * Silbentrennung greift, weil das <html>-Element seine Sprache mitführt.
 */
.footer p {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}

.footer a { color: #fff; text-decoration-color: rgba(255, 255, 255, .4); }
.footer a:hover { color: var(--yellow); }
.footer__funding {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  align-items: flex-start;
}
.footer__funding span {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.footer__funding img {
  width: 7.5rem;
  height: auto;
  display: block;
}

.footer__cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
/* Kleine Versalien-Labels stehen im Grotesk — die Serife braucht Größe. */
.footer h4 {
  font-family: 'NotoSansVar', system-ui, sans-serif;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .85rem; color: rgba(255, 255, 255, .55); }

/* ------------------------------------------------------------ Auth-Seiten */

.auth-page {
  position: relative;
  z-index: 20;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 6rem var(--gutter) 3rem;
}
.auth-card {
  width: min(27rem, 100%);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: clamp(1.6rem, 4vw, 2.4rem);
}
.auth-card h1 { font-size: 1.6rem; }

/* --------------------------------------------------------------- Tabellen */

.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { text-align: left; padding: .75rem .6rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.table-scroll { overflow-x: auto; }

@media (max-width: 40rem) {
  :root { --map-reveal: 80vh; }
  .pill { padding: .55rem 1rem; font-size: .95rem; }
  .pill--brand { font-size: 1rem; padding: .4rem .8rem; gap: 0; }
  .pill--brand:hover,
  .pill--brand:focus-visible,
  body.brand-intro .pill--brand { padding-right: 1.1rem; }
  .pill--brand:hover .pill__label,
  .pill--brand:focus-visible .pill__label,
  body.brand-intro .pill--brand .pill__label { margin-left: .5rem; }
  .brand-mark { height: 2.1em; }
  .quote { padding: 1.4rem 1.4rem 1.25rem; }
  .quote::after { left: 1.8rem; }
  /* Der Navigationsknopf zeigt mobil nur das Icon; die Marke behält ihr Wort. */
  .nav__button .pill__label { display: none; }
  .nav__button { padding: .6rem .75rem; }

  .map-tools { top: calc(clamp(.85rem, 2.4vw, 1.5rem) + 3.2rem); }
  .filter-panel { max-height: calc(var(--map-reveal) - 9rem); }
}

/* Ganz schmale Geräte: nur noch Logo und Burger. */
@media (max-width: 22rem) {
  /* Die Marke regelt ihre Sichtbarkeit selbst — hier geht es nur um den
     Navigationsknopf. */
  .nav__button .pill__label { display: none; }
  .pill { padding: .55rem .8rem; }
}