/* ==========================================================================
   Salinchen – Übergangsseite
   CD SOLEWELT: Petrol #15779b, Marineblau #133355, Hellblau #1488bf
   ========================================================================== */

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-latin-ext.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  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;
}

/* Zoomfaktor der Karte: registriert, damit er weich interpoliert –
   Pins und Salinchen rechnen ihn gegen und bleiben dadurch gleich groß. */
@property --k {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

:root {
  --tief: #071c33;
  --navy: #133355;
  --petrol: #15779b;
  --hell: #2fb3d9;
  --leuchte: #61d6f2;
  --sonne: #f7c948;
  --weiss: #fff;
  --text-hell: rgba(255, 255, 255, 0.82);
  --rand: rgba(255, 255, 255, 0.14);
  --schrift: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --breite: 1180px;
  --radius: 18px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  color: var(--text-hell);
  background: var(--tief);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Farbverlauf als eigene, fixierte Ebene – bleibt beim Scrollen ruhig,
   ohne den teuren background-attachment: fixed. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--tief);
  background-image:
    radial-gradient(120% 80% at 50% -10%, #1b4e7a 0%, rgba(27, 78, 122, 0) 60%),
    radial-gradient(90% 60% at 85% 15%, rgba(21, 119, 155, 0.5) 0%, rgba(21, 119, 155, 0) 65%),
    radial-gradient(70% 60% at 10% 45%, rgba(47, 179, 217, 0.2) 0%, rgba(47, 179, 217, 0) 60%),
    linear-gradient(180deg, #0a2440 0%, #071c33 60%, #061729 100%);
}

h1, h2, h3 {
  color: var(--weiss);
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
}

a { color: var(--leuchte); }
a:hover { color: var(--weiss); }

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

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

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--weiss);
  color: var(--navy);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  transition: top 0.2s;
}
.skip:focus { top: 1rem; }

/* --- Sole-Bläschen ------------------------------------------------------ */
.bubbles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bubble {
  position: absolute;
  bottom: -8vh;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0) 68%);
  box-shadow: inset 0 0 0 1px rgba(190, 235, 250, 0.22);
  mix-blend-mode: screen; /* Bläschen hellen auf, statt dunkle Flecken zu setzen */
  animation: steigen linear infinite;
  opacity: 0;
}
@keyframes steigen {
  0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  15%  { opacity: 0.4; }
  85%  { opacity: 0.28; }
  100% { transform: translate3d(var(--drift, 20px), -112vh, 0) scale(1.15); opacity: 0; }
}

/* --- Kopf --------------------------------------------------------------- */
.kopf {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 1.4rem clamp(1.1rem, 4vw, 2.5rem);
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.marke__icon {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  animation: wippen 5s ease-in-out infinite;
}
@keyframes wippen {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(3deg); }
}
.marke__text { display: flex; flex-direction: column; line-height: 1.25; }
.marke__text strong {
  color: var(--weiss);
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.marke__text span {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.6);
}
.kopf__link {
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.kopf__link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

/* --- Held --------------------------------------------------------------- */
main { position: relative; z-index: 2; }

.held {
  position: relative;
  max-width: 760px;
  margin: clamp(1.5rem, 5vw, 3.5rem) auto 0;
  padding: 0 clamp(1.1rem, 4vw, 2.5rem);
  text-align: center;
}
/* großes Salinchen als leises Wasserzeichen hinter der Überschrift */
.held::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(560px, 90vw);
  aspect-ratio: 900 / 636;
  transform: translate(-50%, -52%);
  background: url("../img/salinchen-silhouette.png") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
  z-index: -1;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.4rem;
  padding: 0.42rem 1rem 0.42rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sonne);
  background: rgba(247, 201, 72, 0.1);
  border: 1px solid rgba(247, 201, 72, 0.32);
  border-radius: 999px;
}
.chip__punkt {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--sonne);
  box-shadow: 0 0 0 0 rgba(247, 201, 72, 0.7);
  animation: pochen 2.2s ease-out infinite;
}
@keyframes pochen {
  0%   { box-shadow: 0 0 0 0 rgba(247, 201, 72, 0.65); }
  70%  { box-shadow: 0 0 0 12px rgba(247, 201, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(247, 201, 72, 0); }
}
.held h1 {
  font-size: clamp(2.1rem, 1.2rem + 4.2vw, 4rem);
  font-weight: 800;
  margin-bottom: 0.6em;
  text-wrap: balance;
}
.held h1::after {
  content: "";
  display: block;
  width: 84px;
  height: 4px;
  margin: 0.55em auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--hell), var(--sonne));
}
.held__text { margin: 0 auto; max-width: 58ch; text-wrap: pretty; }
.held__text strong { color: var(--weiss); font-weight: 700; }
.held__hinweis {
  margin: 1.5rem 0 0;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.5);
}

/* --- Bühne / Karte ------------------------------------------------------ */
.buehne-wrap {
  max-width: var(--breite);
  margin: clamp(1.5rem, 4vw, 2.75rem) auto 0;
  padding: 0 clamp(0.6rem, 3vw, 2.5rem);
}

.buehne {
  position: relative;
  border-radius: var(--radius);
  background:
    radial-gradient(85% 120% at 50% 0%, rgba(47, 179, 217, 0.16), rgba(47, 179, 217, 0) 62%),
    linear-gradient(160deg, rgba(19, 51, 85, 0.85), rgba(7, 28, 51, 0.9));
  border: 1px solid var(--rand);
  box-shadow: 0 30px 70px -35px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  padding: clamp(0.6rem, 2vw, 1.4rem);
}

.welt {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  --k: 1;
  transform-origin: 50% 50%;
  transition: transform 1.6s cubic-bezier(0.55, 0.05, 0.2, 1),
    --k 1.6s cubic-bezier(0.55, 0.05, 0.2, 1);
  will-change: transform;
}
.welt__karte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.5;
}
.welt__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.leg {
  fill: none;
  stroke: var(--sonne);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 8;
  opacity: 0.92;
  vector-effect: non-scaling-stroke;
}

/* Pins */
.pins { position: absolute; inset: 0; }
.pin {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  /* Gegenskalierung, damit die Punkte beim Zoom gleich groß bleiben */
  transform: scale(calc(1 / var(--k, 1)));
  transform-origin: 50% 50%;
}
.pin__punkt {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.32);
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.pin--besucht .pin__punkt {
  background: var(--sonne);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 10px 2px rgba(247, 201, 72, 0.55);
}
.pin--aktiv .pin__punkt { transform: scale(1.55); }
.pin--heimat .pin__punkt {
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  background: var(--leuchte);
  box-shadow: 0 0 14px 3px rgba(97, 214, 242, 0.6);
}
.pin__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--sonne);
  opacity: 0;
}
.pin--aktiv .pin__ring { animation: ping 1.6s ease-out infinite; }
@keyframes ping {
  0%   { transform: scale(0.35); opacity: 0.85; }
  80%  { transform: scale(1.25); opacity: 0; }
  100% { opacity: 0; }
}
.pin:hover .pin__punkt,
.pin:focus-visible .pin__punkt { transform: scale(1.7); }

/* Fliegendes Salinchen */
.flieger {
  position: absolute;
  top: 0; left: 0;
  width: clamp(46px, 6.2vw, 78px);
  height: auto;
  margin: 0;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
  will-change: transform;
  transition: opacity 0.4s;
  pointer-events: none;
}

/* Polaroid */
.karte-foto {
  position: absolute;
  z-index: 6;
  width: clamp(180px, 21vw, 250px);
  margin: 0;
  padding: 9px 9px 0;
  background: #fdfdfb;
  border-radius: 6px;
  box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.3);
  transform-origin: 50% 100%;
  animation: karte-rein 0.55s cubic-bezier(0.22, 1.2, 0.4, 1) both;
  pointer-events: none;
}
.karte-foto[hidden] { display: none; }
.karte-foto--weg { animation: karte-raus 0.4s ease-in forwards; }
@keyframes karte-rein {
  from { opacity: 0; transform: translateY(14px) scale(0.82) rotate(var(--kippen, -3deg)); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotate(var(--kippen, -3deg)); }
}
@keyframes karte-raus {
  to { opacity: 0; transform: translateY(-8px) scale(0.94) rotate(var(--kippen, -3deg)); }
}
.karte-foto__bild {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #dce6ea;
  border-radius: 2px;
}
.karte-foto__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: langsam-zoom 7s ease-out both;
}
@keyframes langsam-zoom {
  from { transform: scale(1.001); }
  to   { transform: scale(1.09); }
}
.karte-foto figcaption {
  display: block;
  padding: 0.55rem 0.2rem 0.7rem;
  text-align: center;
  line-height: 1.25;
}
.karte-foto__ort {
  display: block;
  color: #133355;
  font-weight: 800;
  font-size: 0.95rem;
}
.karte-foto__land {
  display: block;
  /* Kontrast auf dem hellen Polaroid: 5,2:1 – bei 12 px reicht #6d8290 (3,9:1) nicht */
  color: #5a6e7c;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.buehne__zaehler {
  position: absolute;
  left: clamp(0.9rem, 2.4vw, 1.9rem);
  bottom: clamp(0.6rem, 2vw, 1.2rem);
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* Stationsliste (auch ohne JS sinnvoll) */
.stationen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.5rem;
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}
.stationen li {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.42);
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.stationen li.ist-aktiv {
  color: var(--tief);
  background: var(--sonne);
  border-color: var(--sonne);
  font-weight: 700;
}

/* --- Fotostreifen ------------------------------------------------------- */
.streifen-wrap {
  margin: clamp(3rem, 8vw, 5.5rem) 0 0;
  overflow: hidden;
}
.streifen__text {
  max-width: 60ch;
  margin: 0 auto 1.8rem;
  padding: 0 clamp(1.1rem, 4vw, 2.5rem);
  text-align: center;
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.28rem);
}
.streifen__text strong { color: var(--weiss); }
.streifen {
  position: relative;
  /* Platz fuer die Polaroidreihe, bevor sie per JavaScript eingehaengt wird.
     Ohne die Reserve ist der leere Streifen null Pixel hoch: die Seite ist
     dadurch kuerzer, der Abschnitt scheint fast im Sichtfeld zu liegen und
     die Bilder werden schon am Seitenanfang geholt. Ausserdem ruckt beim
     Einhaengen alles darunter nach unten. */
  min-height: calc(clamp(150px, 17vw, 210px) * 0.75 + 7.6rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.streifen__spur {
  display: flex;
  width: max-content;
  padding: 1.2rem 0 1.6rem;
  animation: laufen 68s linear infinite;
}
/* Abstand als margin statt als gap: Die Spur enthaelt die Bilder zweimal und
   wird um 50 % verschoben. Mit gap fehlt in dieser Haelfte genau ein Abstand,
   der Streifen versetzt sich am Rundenende um knapp neun Pixel. Als margin
   gehoert der Abstand zur Karte und beide Haelften sind exakt gleich breit. */
.streifen__spur > .polaroid { margin-right: 1.1rem; }
.streifen:hover .streifen__spur { animation-play-state: paused; }
@keyframes laufen {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.polaroid {
  flex: 0 0 auto;
  width: clamp(150px, 17vw, 210px);
  padding: 8px 8px 0;
  background: #fdfdfb;
  border-radius: 5px;
  box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.75);
  transform: rotate(var(--dreh, 0deg));
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.polaroid:nth-child(odd) { --dreh: -2.2deg; }
.polaroid:nth-child(even) { --dreh: 2.4deg; }
.polaroid:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.03);
  box-shadow: 0 26px 44px -18px rgba(0, 0, 0, 0.85);
}
.polaroid img {
  width: 100%;
  height: auto; /* schlägt das height-Attribut, damit aspect-ratio greift */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  background: #dce6ea;
}
.polaroid span {
  display: block;
  padding: 0.5rem 0.15rem 0.65rem;
  text-align: center;
  color: #133355;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
}
a.polaroid { text-decoration: none; display: block; }
.polaroid strong { display: block; color: #133355; font-weight: 700; }
.polaroid em {
  display: block;
  margin-top: 0.15rem;
  color: #5a6e7c;
  font-style: normal;
  font-weight: 400;
  font-size: 0.72rem;
}
.polaroid__platzhalter { object-fit: contain; padding: 12%; background: #eef4f7; }

/* --- Was bald wartet ---------------------------------------------------- */
.bald {
  position: relative;
  max-width: var(--breite);
  margin: clamp(3rem, 8vw, 5.5rem) auto 0;
  padding: 0 clamp(1.1rem, 4vw, 2.5rem);
  text-align: center;
}
.bald__figur {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: 0;
  width: clamp(100px, 10vw, 140px);
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45));
  animation: wippen 6s ease-in-out infinite;
  pointer-events: none;
}
@media (min-width: 1100px) {
  /* Platz, damit das stehende Salinchen unter den Karten steht */
  .bald { padding-bottom: 5rem; }
  .bald__hinweis { margin-bottom: 1.5rem; }
}
@media (max-width: 1099px) {
  .bald__figur { display: none; }
}
.bald h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem);
  font-weight: 800;
  margin-bottom: 1.8rem;
}
.bald__karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
  text-align: left;
}
.bald__karte {
  padding: 1.5rem 1.4rem;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--rand);
  border-radius: 14px;
  transition: transform 0.3s, background 0.3s, border-color 0.3s;
}
.bald__karte:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(97, 214, 242, 0.4);
}
.bald__icon { font-size: 1.7rem; display: block; margin-bottom: 0.5rem; }
.bald__karte h3 { font-size: 1.12rem; font-weight: 700; }
.bald__karte p { margin: 0; font-size: 0.94rem; }
.bald__hinweis { margin: 2rem 0 0; font-size: 0.94rem; }

/* --- Fuß ---------------------------------------------------------------- */
.fuss {
  position: relative;
  z-index: 2;
  margin-top: clamp(3.5rem, 9vw, 6rem);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.1rem, 4vw, 2.5rem) 1.5rem;
  border-top: 1px solid var(--rand);
  background: rgba(4, 17, 32, 0.55);
  font-size: 0.92rem;
}
.fuss__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.6rem 2.5rem;
  max-width: var(--breite);
  margin: 0 auto;
}
.fuss__titel {
  margin: 0 0 0.5rem;
  color: var(--weiss);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.fuss p { margin: 0 0 0.5rem; }
.fuss__links { list-style: none; margin: 0; padding: 0; }
.fuss__links li { margin-bottom: 0.35rem; }
.fuss__zeile {
  max-width: var(--breite);
  margin: 2.5rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

/* --- Rechtstexte (Unterseiten) ------------------------------------------ */
.text-seite {
  max-width: 800px;
  margin: clamp(1.5rem, 5vw, 3rem) auto 0;
  padding: 0 clamp(1.1rem, 4vw, 2.5rem);
}
.text-seite h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); font-weight: 800; }
/* Lange deutsche Komposita wie „Datenschutzerklärung“ passen bei 400 %
   Vergrößerung nicht mehr in eine Zeile. Silbentrennung bricht sie sauber um;
   overflow-wrap fängt Browser ohne deutsche Trennmuster ab. */
.text-seite h1, .text-seite h2, .text-seite h3 {
  hyphens: auto;
  overflow-wrap: break-word;
}
.text-seite h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 2.2rem;
}
.text-seite h3 { font-size: 1.02rem; font-weight: 700; margin-top: 1.5rem; }
.text-seite p, .text-seite li { max-width: 72ch; }
/* Lange Adressen im Text müssen umbrechen dürfen – sonst schiebt eine einzige
   URL die Seite bei starker Vergrößerung in die Breite (WCAG 1.4.10). */
.text-seite a { overflow-wrap: anywhere; }
.text-seite ul, .text-seite ol { padding-left: 1.4rem; }
.text-seite li { margin-bottom: 0.35rem; }
/* Begriffsbestimmungen: etwas mehr Luft, damit die zehn Absätze lesbar bleiben */
.text-seite .begriffe > li { margin-bottom: 0.8rem; }
.zurueck {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

/* --- Responsiv ---------------------------------------------------------- */
@media (max-width: 899px) {
  .buehne {
    --polaroid: min(62vw, 260px);
    /* 9px Rand oben + Bild im Verhaeltnis 4:3 + feste Beschriftungshoehe */
    --polaroid-hoehe: calc((var(--polaroid) - 18px) * 0.75 + 9px + 4.6rem);
    padding-bottom: 0.8rem;
  }
  .welt { aspect-ratio: 1.85 / 1; }

  /* Auf schmalen Schirmen liegt das Polaroid unter der Karte statt darauf –
     es waere sonst breiter als die halbe Karte. Die Hoehe ist fest, damit
     unterschiedlich lange Ortsnamen die Buehne nicht veraendern. */
  .karte-foto {
    position: static;
    width: var(--polaroid);
    height: var(--polaroid-hoehe);
    margin: 0.9rem auto 0.4rem;
    --kippen: -2deg;
  }
  /* Zwei Zeilen Ort, eine Zeile Land. Lange Namen wie „Puerto del Rosario,
     Fuerteventura“ brauchen die zweite Zeile wirklich. */
  .karte-foto figcaption {
    height: 4.6rem;
    overflow: hidden;
  }
  .karte-foto__ort {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .buehne__zaehler {
    position: static;
    text-align: center;
    margin-top: 0.4rem;
  }
  /* Ortswahl im Formular: hier steht der gewaehlte Ort im Zaehler und ist mal
     einzeilig, mal zweizeilig. Zwei Zeilen werden fest reserviert, sonst
     wandert die Karte beim Waehlen eines langen Ortsnamens nach oben. */
  .ortwahl .buehne__zaehler { min-height: 2.6rem; }

  /* Startseite: dort wechseln die Fotos von allein. Der Platz dafuer wird
     dauerhaft freigehalten, statt beim Einblenden zu entstehen – sonst wuerde
     die Buehne alle paar Sekunden um gut 240 Pixel wachsen und schrumpfen und
     die halbe Seite mit ihr springen. Auf den uebrigen Karten erscheint das
     Polaroid nur auf Tippen, dort bliebe die Reserve die meiste Zeit leer. */
  .buehne--film {
    padding-bottom: calc(var(--polaroid-hoehe) + 5.5rem);
  }
  .buehne--film .karte-foto {
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 4.4rem;
    margin: 0 auto;
  }
  /* Der Zaehler traegt mal „62 Reisen“, mal „Wieder zu Hause. Wo geht es als
     Naechstes hin?“. Zwei Zeilen sind eingeplant, eine dritte wuerde unter das
     Polaroid stossen – deshalb die harte Begrenzung. */
  .buehne--film .buehne__zaehler {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.9rem;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .stationen li:nth-child(n + 9) { display: none; }
}

@media (max-width: 560px) {
  .kopf { padding-top: 1rem; }
  .marke__icon { width: 44px; height: 44px; }
  .marke__text strong { font-size: 1.1rem; }
  .marke__text span { font-size: 0.66rem; letter-spacing: 0.12em; }
  .kopf__link { font-size: 0.82rem; padding: 0.45rem 0.85rem; }
  .streifen__spur { animation-duration: 46s; }
}

/* --- Reduzierte Bewegung ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .bubbles { display: none; }
  .flieger { display: none; }
  .karte-foto__bild img { transform: none; }
}

/* ==========================================================================
   Ergänzungen der vollständigen Website
   ========================================================================== */

/* --- Hauptmenü ----------------------------------------------------------- */
.menu {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.6vw, 1.4rem);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.menu a {
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-hell);
  padding: 0.45rem 0.2rem;
  border-bottom: 2px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.menu a:hover { color: var(--weiss); border-bottom-color: rgba(255, 255, 255, 0.35); }
.menu a.ist-hier { color: var(--weiss); border-bottom-color: var(--sonne); }
.menu__aktion {
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(247, 201, 72, 0.45);
  border-radius: 999px;
  background: rgba(247, 201, 72, 0.12);
  color: var(--sonne) !important;
  white-space: nowrap;
}
.menu__aktion:hover {
  background: var(--sonne);
  color: var(--tief) !important;
  border-color: var(--sonne);
}

/* --- Knöpfe -------------------------------------------------------------- */
.knopf {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--sonne);
  color: var(--tief);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
  box-shadow: 0 12px 26px -14px rgba(247, 201, 72, 0.9);
}
.knopf:hover { transform: translateY(-2px); color: var(--tief); background: #ffd76a; }
.knopf--leise {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--rand);
  color: var(--weiss);
  box-shadow: none;
}
.knopf--leise:hover { background: rgba(255, 255, 255, 0.14); color: var(--weiss); }
.knopf[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

.buehne__aktion {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin: 1.6rem 0 0;
}

.held--klein { margin-bottom: 0; }
.held--klein h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); font-weight: 800; }
.held--klein h1::after { display: none; }

/* --- Galerie mit Filtern -------------------------------------------------- */
.galerie {
  max-width: var(--breite);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: 0 clamp(1.1rem, 4vw, 2.5rem);
}
.filter {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem clamp(1rem, 3vw, 1.6rem);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rand);
  border-radius: 14px;
}
.filter__suche { display: flex; flex-direction: column; gap: 0.35rem; }
.filter__suche label {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.filter__suche input {
  padding: 0.7rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--rand);
  background: rgba(7, 28, 51, 0.6);
  color: var(--weiss);
  font: inherit;
}
.filter__suche input::placeholder { color: rgba(255, 255, 255, 0.35); }
.filter__gruppe { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.filter__knopf {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: none;
  color: rgba(255, 255, 255, 0.65);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.filter__knopf:hover { color: var(--weiss); border-color: rgba(255, 255, 255, 0.4); }
.filter__knopf.ist-aktiv {
  background: var(--sonne);
  border-color: var(--sonne);
  color: var(--tief);
  font-weight: 700;
}
.filter__gruppe--jahre .filter__knopf { font-variant-numeric: tabular-nums; }

.galerie__anzahl {
  margin: 1.4rem 0 0.8rem;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.galerie__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
  align-items: start;
}
.galerie__raster .polaroid { width: 100%; }
.galerie__leer { margin: 2rem 0; text-align: center; }

/* Pins, die gerade nicht zur Filterauswahl gehören */
.pin--gedimmt .pin__punkt { opacity: 0.2; box-shadow: none; }

.karte-foto__platzhalter {
  object-fit: contain !important;
  padding: 10%;
  background: #eef4f7;
}

/* --- Sole-Abschnitt ------------------------------------------------------- */
.sole {
  max-width: 820px;
  margin: clamp(3rem, 8vw, 5rem) auto 0;
  padding: 0 clamp(1.1rem, 4vw, 2.5rem);
  text-align: center;
}
.sole h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 800; }
.sole p { margin: 0 auto 1.2rem; max-width: 62ch; }

/* --- Reise-Detailseite ---------------------------------------------------- */
.reise {
  max-width: 1000px;
  margin: clamp(1.5rem, 5vw, 3rem) auto 0;
  padding: 0 clamp(1.1rem, 4vw, 2.5rem);
}
.reise__kopf { text-align: center; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.reise__kopf h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); font-weight: 800; }
.reise__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  justify-content: center;
  margin: 0;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
/* Fotostrecke als Streifen gleich hoher Bilder.
   Jedes Foto bringt über --ar sein Seitenverhältnis mit; die Breite ergibt
   sich daraus. So sind Hoch- und Querformat nebeneinander gleich hoch, und
   ein einzelnes Hochformat macht die Seite nicht mehr endlos lang. */
.reise__fotos {
  /* Streifenhöhe: bei wenigen Fotos darf es größer sein, bei vielen passen
     dann mehr nebeneinander in eine Reihe. */
  --foto-zeile: 30rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1rem, 2.5vw, 1.6rem);
}
.reise__foto {
  --ar: 1.333;
  /* content-box: die Breite meint das Bild, nicht den Polaroid-Rand –
     nur so stimmen die Höhen über alle Formate hinweg überein. */
  box-sizing: content-box;
  flex: 0 1 calc(var(--ar) * var(--foto-zeile));
  /* --maxb ist die echte Bildbreite: kleine Altbilder werden nicht aufgeblasen */
  max-width: min(100%, var(--maxb, 100%));
  margin: 0;
  padding: 12px 12px 0;
  background: #fdfdfb;
  border-radius: 6px;
  box-shadow: 0 22px 40px -22px rgba(0, 0, 0, 0.8);
  transform: rotate(var(--dreh, 0deg));
}
.reise__fotos .reise__foto:nth-child(odd) { --dreh: -1.2deg; }
.reise__fotos .reise__foto:nth-child(even) { --dreh: 1.4deg; }
/* Kein aspect-ratio hier: das Seitenverhältnis kommt aus den width/height-
   Attributen des Bildes selbst. Dadurch kann nichts gestaucht werden, und
   die Höhe steht trotzdem schon vor dem Laden fest. object-fit ist nur ein
   Sicherheitsnetz, falls doch einmal Maße und Datei auseinanderlaufen. */
.reise__foto img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 2px;
  background: #dce6ea;
}
.reise__fotos:has(> .reise__foto:nth-child(2)) { --foto-zeile: 22rem; }
.reise__fotos:has(> .reise__foto:nth-child(4)) { --foto-zeile: 20rem; }

@media (max-width: 899px) {
  .reise__fotos,
  .reise__fotos:has(> .reise__foto:nth-child(2)),
  .reise__fotos:has(> .reise__foto:nth-child(4)) { --foto-zeile: 28rem; }
}
.reise__foto figcaption {
  padding: 0.6rem 0.2rem 0.8rem;
  text-align: center;
  color: #5a6e7c;
  font-size: 0.78rem;
}
/* Reisetagebuch: ein Blatt Papier zwischen den Polaroids.
   Statt eines Liniengitters nur der Rand eines Schulhefts – eine einzelne
   2-px-Linie. Feine 1-px-Raster überleben das Rastern des Browsers nicht
   zuverlässig: je nach Zoom zerfallen sie in Striche oder verschwinden. */
.tagebuch {
  --rand: clamp(1.5rem, 4vw, 2.1rem);
  max-width: 44rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: clamp(1.3rem, 3vw, 1.9rem) clamp(1.3rem, 3vw, 2.1rem)
           clamp(1.1rem, 2.5vw, 1.5rem) calc(var(--rand) + clamp(1rem, 2.5vw, 1.5rem));
  background:
    linear-gradient(to bottom, rgba(19, 51, 85, 0.16), rgba(19, 51, 85, 0.16)) no-repeat,
    #fdfdfb;
  background-size: 2px 100%;
  background-position: var(--rand) 0;
  color: #133355;
  border-radius: 6px;
  box-shadow: 0 22px 40px -22px rgba(0, 0, 0, 0.8);
  transform: rotate(-0.6deg);
}
.tagebuch__titel {
  margin: 0 0 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5a6e7c;
}
.tagebuch__text {
  font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.2rem);
  line-height: 1.75;
}
.tagebuch__text p { margin: 0 0 1.1rem; }
.tagebuch__text p:last-child { margin-bottom: 0; }
.tagebuch__wer {
  margin-top: 1.3rem;
  text-align: right;
  font-size: 0.95rem;
  font-style: italic;
  color: #5a6e7c;
}
.tagebuch__wer::before { content: "— "; }

/* Meldet sich Salinchen selbst zu Wort (kein Eintrag eingesendet), sieht das
   Blatt anders aus: kühler Ton, andersherum gekippt, Icon statt Heftrand –
   damit niemand den Spruch für den Beitrag der Einsender hält. */
.tagebuch--salinchen {
  background: #eef5fa;
  background-image: none;
  padding-left: clamp(1.3rem, 3vw, 2.1rem);
  transform: rotate(0.7deg);
  border: 1px solid rgba(19, 51, 85, 0.09);
}
.tagebuch--salinchen .tagebuch__titel {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #4e7186;
}
.tagebuch__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
}
.tagebuch--salinchen .tagebuch__text { font-style: italic; }
/* Fußzeile der Salinchen-Karte: links steht, wer das Foto geschickt hat,
   rechts, wer den Spruch zu verantworten hat. */
.tagebuch__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin-top: 1.3rem;
}
.tagebuch__von {
  font-size: 0.9rem;
  color: #5a6e7c;
}
.tagebuch__fuss .tagebuch__wer {
  margin-top: 0;
  margin-left: auto;
  font-style: normal;
  font-weight: 600;
}

@media (max-width: 599px) {
  /* Auf dem Handy ist jeder Millimeter Zeilenbreite wertvoll: Heftrand
     schmaler, Karte gerade – gekippt würde sie hier ohnehin nur anecken. */
  .tagebuch {
    --rand: 1rem;
    padding-left: 1.9rem;
    padding-right: 1.1rem;
    transform: none;
  }
  .tagebuch--salinchen { padding-left: 1.3rem; }
}

.reise__text {
  max-width: 68ch;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  font-size: 1.06rem;
}
.reise__text p { margin: 0 0 1.1rem; }
.reise__karte {
  position: relative;
  max-width: 760px;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: clamp(0.6rem, 2vw, 1rem);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(19, 51, 85, 0.85), rgba(7, 28, 51, 0.9));
}
.reise__nachbarn {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.reise__nachbarn a { text-decoration: none; font-weight: 600; }

/* --- Formular ------------------------------------------------------------- */
.formular {
  max-width: 780px;
  margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
  padding: 0 clamp(1.1rem, 4vw, 2.5rem);
}
.feld { margin-bottom: 1.5rem; }
.feld > label,
.feld > .feld__titel {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: var(--weiss);
}
.feld__hinweis {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.5);
}
.feld input[type="text"],
.feld input[type="email"],
.feld input[type="date"],
.feld input[type="file"],
.feld textarea,
.feld select {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--rand);
  background: rgba(7, 28, 51, 0.6);
  color: var(--weiss);
  font: inherit;
}
.feld textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.feld input:focus, .feld textarea:focus { border-color: var(--leuchte); outline: none; box-shadow: 0 0 0 3px rgba(97, 214, 242, 0.2); }
.feld--zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.feld--haken { display: flex; gap: 0.8rem; align-items: flex-start; }
.feld--haken input { margin-top: 0.3rem; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--sonne); }
.feld--haken label { font-weight: 400; font-size: 0.94rem; }
.feld__fehler { color: #ffb4a8; font-size: 0.88rem; margin-top: 0.35rem; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vorschau {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.8rem;
}
.vorschau figure {
  margin: 0;
  width: 96px;
  border-radius: 8px;
  overflow: hidden;
  background: #fdfdfb;
  padding: 5px 5px 0;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.8);
}
.vorschau img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 3px; }
.vorschau figcaption { font-size: 0.62rem; color: #5a6e7c; text-align: center; padding: 3px 0 5px; }
/* Kachel für HEIC-Bilder, die der Browser nicht darstellen kann */
.vorschau__zeichen {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 3px;
  background: #dce6ea;
  color: #4d6b7d;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.ortwahl { position: relative; }
.ortwahl .buehne { cursor: crosshair; }
.buehne--auswahl .pin { pointer-events: none; }
/* Die Marke sitzt in der Weltkarte und wandert beim Zoomen mit; sie soll
   dabei ihre Größe behalten, deshalb die Gegenrechnung über --k. */
.ortmarke {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -26px 0 0 -13px;
  pointer-events: none;
  transform: scale(calc(1 / var(--k, 1)));
  transform-origin: 50% 100%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}
/* Ortsnamen im herangezoomten Kartenausschnitt. Sie sitzen in der Weltkarte
   und wandern mit, behalten über --k aber ihre Schriftgröße. */
.ortnamen { position: absolute; inset: 0; pointer-events: none; }
.ortname {
  position: absolute;
  transform: translate(-50%, -140%) scale(calc(1 / var(--k, 1)));
  transform-origin: 50% 100%;
  white-space: nowrap;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(7, 28, 51, 0.72);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.ortname::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--leuchte);
}
.ortwahl__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
}
/* Erklärt, warum die Zoomknöpfe noch gesperrt sind */
.ortwahl__sperre {
  flex: 1 1 16rem;
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.5);
}
.ortwahl__sperre[hidden] { display: none; }
.knopf--klein { padding: 0.5rem 1rem; font-size: 0.86rem; }

/* Vorschlagsliste für Land und Ort */
.vorschlag-feld { position: relative; }
.vorschlaege {
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 15rem;
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid var(--rand);
  background: #0d2b4c;
  box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.9);
}
.vorschlaege li {
  padding: 0.5rem 0.7rem;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.94rem;
}
.vorschlaege li:hover,
.vorschlaege li.ist-aktiv { background: rgba(97, 214, 242, 0.18); }

/* Monat und Jahr statt des Browser-Datumsfeldes */
.datumwahl { display: flex; gap: 0.6rem; }
.datumwahl select { flex: 1 1 0; min-width: 0; }
.feld select {
  appearance: none;
  cursor: pointer;
  padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.6) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.6) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.75rem) 55%;
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  background-repeat: no-repeat;
}
.feld select:focus {
  border-color: var(--leuchte);
  outline: none;
  box-shadow: 0 0 0 3px rgba(97, 214, 242, 0.2);
}
.feld select option { background: #0d2b4c; color: var(--weiss); }
.meldung {
  padding: 1rem 1.2rem;
  border-radius: 12px;
  border: 1px solid rgba(247, 201, 72, 0.35);
  background: rgba(247, 201, 72, 0.1);
  margin-bottom: 1.5rem;
}
.meldung--fehler { border-color: rgba(255, 140, 120, 0.45); background: rgba(255, 120, 100, 0.12); }
.meldung ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }

@media (max-width: 640px) {
  .kopf { flex-wrap: wrap; }
  .menu { width: 100%; justify-content: space-between; gap: 0.5rem; }
  .menu a { font-size: 0.88rem; }
}

/* --- Steckbrief und Hintergrund ------------------------------------------- */
.steckbrief-wrap {
  max-width: var(--breite);
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: 0 clamp(1.1rem, 4vw, 2.5rem);
}
.steckbrief {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(1.4rem, 4vw, 2.5rem);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.steckbrief__figur {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
  animation: wippen 6s ease-in-out infinite;
}
.steckbrief h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); font-weight: 800; }
/* Der Steckbrief hat vierzehn Zeilen – ohne Trennung rutscht das Auge beim
   Lesen leicht in die falsche Zeile. Die Linie läuft durchgehend unter
   Bezeichnung und Angabe hindurch: Sie verbindet die beiden Spalten
   miteinander und trennt zugleich die Zeilen voneinander. Deshalb steht die
   Spaltenlücke als Innenabstand im dt und nicht als gap – sonst hätte die
   Linie in der Mitte ein Loch. */
.steckbrief__liste {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 0;
  margin: 0;
}
.steckbrief__liste dt,
.steckbrief__liste dd {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}
.steckbrief__liste dt {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-right: 1.2rem;
  padding-top: 0.62rem;
}
.steckbrief__liste dd { margin: 0; color: var(--weiss); }
.steckbrief__liste dt:last-of-type,
.steckbrief__liste dd:last-of-type { border-bottom: 0; }
.steckbrief__hinweis { margin: 1.5rem 0 0; font-size: 0.94rem; }

.hintergrund {
  max-width: 880px;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: 0 clamp(1.1rem, 4vw, 2.5rem);
}
.hintergrund h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); font-weight: 800; }
.zeitleiste { list-style: none; margin: 2rem 0 0; padding: 0 0 0 1.6rem; border-left: 2px solid rgba(247, 201, 72, 0.35); }
.zeitleiste li { position: relative; margin-bottom: 1.4rem; }
.zeitleiste li::before {
  content: "";
  position: absolute;
  left: calc(-1.6rem - 6px);
  top: 0.55rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--sonne);
  box-shadow: 0 0 10px 2px rgba(247, 201, 72, 0.45);
}
.zeitleiste span {
  display: block;
  color: var(--sonne);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.hintergrund__aktion { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.5rem; }

.reise__ohnefoto {
  padding: 1.2rem;
  border: 1px dashed var(--rand);
  border-radius: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 780px) {
  .steckbrief { grid-template-columns: 1fr; }
  .steckbrief__figur { max-width: 200px; margin: 0 auto; }
  /* Einspaltig steht die Angabe unter ihrer Bezeichnung. Die Linie darf dann
     nur unter das Paar, sonst würde sie die beiden voneinander trennen. */
  .steckbrief__liste { grid-template-columns: 1fr; }
  .steckbrief__liste dt {
    border-bottom: 0;
    padding: 0.7rem 0 0.1rem;
  }
  .steckbrief__liste dd { padding: 0 0 0.7rem; }
}

.pflicht { color: var(--sonne); }
.feld__titel + .feld__hinweis { margin-top: -0.2rem; margin-bottom: 0.6rem; }

/* --- Verwaltung ----------------------------------------------------------- */
.verwaltung .formular { max-width: 940px; }
.verwaltung h1 { font-size: 1.9rem; font-weight: 800; margin-top: 1rem; }
.zahl {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--sonne);
  color: var(--tief);
  font-size: 0.9rem;
  font-weight: 700;
  vertical-align: middle;
}
.pruefkarte {
  margin: 0 0 2rem;
  padding: clamp(1rem, 3vw, 1.6rem);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--rand);
  border-radius: 14px;
}
.pruefkarte h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.2rem; }
.pruefkarte__meta { margin: 0 0 1rem; font-size: 0.86rem; color: rgba(255, 255, 255, 0.55); }
.pruefkarte__bilder { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.pruefkarte__bilder img {
  width: 180px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: #dce6ea;
}
.pruefkarte__einwilligung { margin-bottom: 1.2rem; font-size: 0.9rem; }
.pruefkarte__einwilligung summary { cursor: pointer; color: var(--leuchte); }
.pruefkarte__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
}
.pruefkarte__ablehnen { display: flex; gap: 0.5rem; flex: 1 1 320px; }
.pruefkarte__ablehnen input {
  flex: 1;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--rand);
  background: rgba(7, 28, 51, 0.6);
  color: var(--weiss);
  font: inherit;
}
.verwaltung__trenner { margin-top: 3rem; font-size: 1.4rem; font-weight: 800; }
.verwaltung__bauen { margin-bottom: 1rem; }
.liste { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.liste th {
  text-align: left;
  padding: 0.5rem 0.6rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rand);
}
.liste td { padding: 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); vertical-align: top; }
.liste__land { display: block; color: rgba(255, 255, 255, 0.45); font-size: 0.82rem; }
.liste summary { cursor: pointer; color: var(--leuchte); }
.liste__form { margin-top: 0.8rem; padding: 1rem; background: rgba(7, 28, 51, 0.5); border-radius: 10px; }
.liste__form label { display: block; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); }
.liste__form input, .liste__form textarea { margin-top: 0.25rem; }