/* Kinderspiel Web-App — nach dem Entwurf aus Claude Design
   (`entwurf/Kinderspiel Web.dc.html`, 17.09.2026), Gestaltungssprache „Kuppel".

   Farben aus BRIEF-WEB-DESIGN.md §3. ⚠ Weiß auf #78AAFF erreicht nur 1,9:1 —
   das helle Blau bleibt Dekoration, Schrift auf Blau steht auf #4088FF bzw.
   dem dunkleren Knopfblau.

   Trefferflächen 44 pt (README „Apple-Vorgaben"), Safe Areas wie auf den
   statischen Seiten. Keine Webfont. */

:root {
  color-scheme: light dark;
  --grund: #F2F2F7; --karte: #FFFFFF; --fuell: #F2F2F7;
  --glas: rgba(255,255,255,.92); --kopf-grund: rgba(242,242,247,.86);
  --text: #1C1C1E; --text-kraeftig: #3A3A3C; --text-leise: #5C5C61;
  --marke: #4088FF; --marke-knopf: #2F6FD8; --marke-knopf-tief: #2459B3; --marke-text: #2F6FD8;
  --marke-tint: rgba(64,136,255,.12); --marke-tint-stark: rgba(64,136,255,.42);
  --linie: rgba(60,60,67,.12); --linie-stark: rgba(60,60,67,.2); --linie-weich: rgba(60,60,67,.08);
  /* Blaue Flächen mit KLEINER Schrift: Weiß auf #4088FF hat nur 3,3:1 und
     reicht laut Brief erst ab 17 pt halbfett. #2F6FD8 hat 4,6:1. */
  --marke-flaeche: #2F6FD8;
  --warn-grund: #FFF4E5; --gelb: #B98900; --gelb-stern: #FFCC00;
  --raster-a: #EEF1F6; --raster-b: #E7EBF2; --weg: #FFFFFF;
  --schatten: rgba(0,0,0,.14);
  --breite: 1240px;
  --rand: max(clamp(14px, 4vw, 24px), env(safe-area-inset-left, 0px));
  --rand-r: max(clamp(14px, 4vw, 24px), env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #000000; --karte: #1C1C1E; --fuell: #2C2C2E;
    --glas: rgba(28,28,30,.92); --kopf-grund: rgba(0,0,0,.8);
    --text: #F2F2F7; --text-kraeftig: #D1D1D6; --text-leise: #9E9EA3;
    --marke-knopf: #4088FF; --marke-knopf-tief: #2F6FD8; --marke-text: #7FB0FF;
    --marke-tint: rgba(64,136,255,.22); --marke-tint-stark: rgba(64,136,255,.34);
    --linie: rgba(255,255,255,.14); --linie-stark: rgba(255,255,255,.22); --linie-weich: rgba(255,255,255,.1);
    --warn-grund: #3A2E1A; --gelb: #FFD900; --gelb-stern: #FFD900;
    --raster-a: #2A2A2E; --raster-b: #232327; --weg: #3E3E44;
    --schatten: rgba(0,0,0,.6);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: var(--marke-text); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; }
:focus-visible { outline: 3px solid var(--marke); outline-offset: 2px; }
::selection { background: #78AAFF; color: #fff; }
[hidden] { display: none !important; }

.springen { position: absolute; left: -9999px; }
.springen:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--karte); padding: .75rem 1rem; border-radius: 12px; }

.leise { color: var(--text-leise); }
.klein { font-size: 14px; }
.mitte { text-align: center; }
/* ⚠ `margin-inline: auto` reicht hier nicht: `.kasten > p { margin: 0 0 12px }`
   ist spezifischer und setzte die Seitenränder auf 0 — der Text klebte links
   im Kasten (gesehen am 18.09.2026 auf Entdecken). */
.gross-text { font-size: 17px; line-height: 1.45; max-width: 44ch; text-wrap: pretty; }
.kasten > .gross-text, .leer-mitte .gross-text { margin-inline: auto; }
.schmal-text { max-width: 56ch; text-wrap: pretty; }
.fliess { white-space: pre-line; text-wrap: pretty; }
.luecke { flex: 1; }
.nur-schmal { display: none; }
@media (max-width: 760px) { .nur-schmal { display: block; } .nur-breit { display: none; } }

/* ── Knöpfe ─────────────────────────────────────────────────────────── */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 0;
  background: var(--marke-knopf); color: #fff; font: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.knopf:hover { background: var(--marke-knopf-tief); text-decoration: none; }
.knopf.umriss { background: var(--karte); color: var(--marke-text); border: 1px solid var(--marke-tint-stark); }
.knopf.umriss:hover { background: var(--marke-tint); }
.knopf.zart { background: var(--fuell); color: var(--text-leise); font-size: 14px; font-weight: 500; }
.knopf.text { background: transparent; color: var(--marke-text); padding-inline: 8px; }
.knopf.weiss { background: #fff; color: #2F6FD8; }
.knopf:disabled { opacity: .5; cursor: default; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; }
/* Französisch und Niederländisch brauchen bis zu 30 % mehr Platz (Brief §6):
   Knöpfe dürfen umbrechen, statt zu zerbrechen. */
.knopfreihe .knopf { white-space: normal; text-align: center; }

/* ── Kopf ───────────────────────────────────────────────────────────── */

.app-kopf {
  position: sticky; top: 0; z-index: 30;
  background: var(--kopf-grund); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linie);
  padding-top: env(safe-area-inset-top, 0px);
}
.app-kopf .innen {
  max-width: var(--breite); margin: 0 auto; padding: 6px var(--rand-r) 6px var(--rand);
  display: flex; align-items: center; gap: 8px clamp(8px, 2vw, 20px); flex-wrap: wrap;
}
.marke { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); font-weight: 650; font-size: 17px; }
.marke:hover { text-decoration: none; }
.marke img { width: 30px; height: 30px; border-radius: 8px; }
.reiter { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.reiter a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  color: var(--text); font-size: 15px; font-weight: 520; white-space: nowrap;
}
.reiter a:hover { background: var(--linie-weich); text-decoration: none; }
.reiter a[aria-current="page"] { background: var(--marke-tint); }
/* Schmal: eine Zeile statt drei. Der Weg in die App steht dort ohnehin im
   Inhalt (die blaue Karte), der Knopf im Kopf wäre die dritte Zeile. */
/* Burger-Menü: erst auf schmalen Fenstern (Yannick, 18.09.2026 — auf dem
   iPhone überlappten sich Marke und Reiter). */
.menue-knopf, .menue-liste { display: none; }
@media (max-width: 640px) {
  .app-kopf .innen { flex-wrap: nowrap; gap: 6px; }
  .app-kopf .knopf, .reiter { display: none; }
  .app-kopf .luecke { display: block; }
  .menue-knopf {
    display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px;
    background: transparent; color: var(--text); cursor: pointer; padding: 0; flex: none;
  }
  .menue-knopf:hover { background: var(--linie-weich); }
  /* Drei Striche, die zu einem ✕ werden. */
  .menue-knopf span, .menue-knopf span::before, .menue-knopf span::after {
    display: block; width: 20px; height: 2px; border-radius: 1px; background: currentColor; position: relative; transition: transform .2s, background .2s;
  }
  .menue-knopf span::before, .menue-knopf span::after { content: ""; position: absolute; left: 0; }
  .menue-knopf span::before { top: -6px; }
  .menue-knopf span::after { top: 6px; }
  .menue-knopf[aria-expanded="true"] span { background: transparent; }
  .menue-knopf[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .menue-knopf[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
  .menue-liste:not([hidden]) {
    display: flex; flex-direction: column; padding: 6px var(--rand-r) 12px var(--rand);
    border-top: 1px solid var(--linie);
  }
  .menue-liste a {
    display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 12px;
    color: var(--text); font-size: 17px; font-weight: 520;
  }
  .menue-liste a:hover { background: var(--linie-weich); text-decoration: none; }
  .menue-liste a[aria-current="page"] { background: var(--marke-tint); color: var(--marke-text); }
}
/* Seit dem Burger-Menü ist neben dem Logo Platz für den Namen — nur ganz
   schmal (iPhone SE im Hochformat: 320) fällt er weg. */
@media (max-width: 340px) {
  .marke { font-size: 0; gap: 0; } /* Der Name bleibt für Screenreader im Link */
  .marke img { width: 32px; height: 32px; }
}

/* ── Seiten ─────────────────────────────────────────────────────────── */

main { min-height: 60vh; padding-bottom: 48px; }
.seite { max-width: var(--breite); margin: 0 auto; padding: 20px var(--rand-r) 0 var(--rand); }
.seite.schmal { max-width: 840px; }
.kasten { background: var(--karte); border-radius: 22px; padding: 20px clamp(16px, 3.5vw, 24px); }
.kasten h2 { margin: 0 0 16px; font-size: 20px; font-weight: 650; }
.kasten h3 { margin: 0 0 6px; font-size: 18px; font-weight: 650; }
.kasten > p { margin: 0 0 12px; }
.quellen { margin: 16px 4px 0; font-size: 12px; line-height: 1.6; color: var(--text-leise); }
.lade-hinweis { color: var(--text-leise); font-size: 15px; }

/* Leerzustände: mittig, mit konzentrischen Ringen — Einladungen, keine Fehler. */
.leer-mitte { text-align: center; padding: 24px 12px 12px; }
.leer-mitte h1 { font-size: clamp(24px, 5vw, 32px); margin: 0 0 10px; }
.leer-mitte .knopf { margin-top: 4px; }
.ringe { position: relative; width: var(--g); height: var(--g); margin: 0 auto 16px; display: grid; place-items: center; }
.ringe span { position: absolute; border-radius: 50%; }
.ringe span:nth-child(1) { inset: 0; border: 1px solid var(--marke-tint); }
.ringe span:nth-child(2) { inset: 15%; border: 1px solid var(--marke-tint-stark); }
.ringe span:nth-child(3) { inset: 28%; background: var(--marke-tint); }
.ringe b { position: relative; font-size: calc(var(--g) * .21); font-weight: 400; }

.skelett { background: linear-gradient(90deg, var(--linie-weich), var(--linie), var(--linie-weich)); background-size: 200% 100%; animation: schimmer 1.4s infinite; border-radius: 16px; margin-bottom: 14px; }
.skelett.kopf { height: clamp(200px, 40vw, 360px); border-radius: 24px 24px 50% 50% / 24px 24px 68px 68px; }
.skelett.zeile { height: 28px; width: 40%; margin-inline: auto; }
.skelett.zeile.breit { width: 60%; height: 40px; }
.skelett.block { height: 240px; }
@keyframes schimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skelett { animation: none; } }

/* ── Die Kuppel ─────────────────────────────────────────────────────── */

.kuppel-held { position: relative; margin-bottom: 44px; }
.kuppel-held .held-innen {
  background: var(--marke); color: #fff; text-align: center;
  border-radius: 0 0 50% 50% / 0 0 56px 56px;
  padding: clamp(28px, 6vw, 44px) var(--rand-r) clamp(48px, 8vw, 68px) var(--rand);
}
.kuppel-held.flach { margin-bottom: 8px; }
.kuppel-held.flach .held-innen { padding-bottom: clamp(36px, 6vw, 52px); }
.kuppel-held h1 { margin: 0 auto 16px; max-width: 720px; font-size: clamp(24px, 5.2vw, 34px); font-weight: 700; }
.kuppel-held p { margin: 0 auto; max-width: 720px; font-size: 17px; font-weight: 600; }
.kuppel-kachel {
  position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
  width: 72px; height: 72px; border-radius: 24px; background: var(--karte);
  box-shadow: 0 8px 24px var(--schatten); display: grid; place-items: center; font-size: 34px;
}
.kuppel-kachel.gross { width: 96px; height: 96px; border-radius: 30px; font-size: 44px; bottom: -46px; }

.suchfeld {
  display: flex; gap: 8px; align-items: center; max-width: 560px; margin: 0 auto;
  background: var(--karte); border-radius: 999px; padding: 6px 6px 6px 18px;
}
.suchfeld input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 17px; padding: 10px 0; min-height: 44px;
}
.suchfeld input::-webkit-search-cancel-button { display: none; }

/* ── Ortsdetail ─────────────────────────────────────────────────────── */

.warnung { display: flex; gap: 12px; align-items: flex-start; background: var(--warn-grund); border-radius: 18px; padding: 14px 18px; margin-bottom: 16px; font-size: 15px; line-height: 1.45; }
.warnung > span { font-size: 18px; line-height: 1.2; }

.ort-kopf { position: relative; margin-bottom: 64px; }
.kuppel {
  position: relative; overflow: hidden; background: #78AAFF;
  height: clamp(200px, 40vw, 360px);
  border-radius: 24px 24px 50% 50% / 24px 24px 68px 68px;
}
.anfahrt-karte.mit-karte, .karte-flaeche.mit-karte { background: var(--raster-a); }
/* Die Karte füllt die ganze Kuppel; der Bogen beschneidet sie unten. Apples
   Logo und „Rechtliches" bleiben trotzdem sichtbar, weil die Karte unten eine
   Polsterung bekommt (`polsterUnten` in mapkit.js) — MapKit rückt seine
   Angaben dann nach oben. Die Kuppelform hält das äußere Element, weil MapKit
   eigene Stile auf seinen Container setzt. */
.kuppel-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Nennung am Bild, nicht im Impressum (Brief §6). Oberhalb des Bogens. */
.foto-nennung {
  position: absolute; left: 16px; bottom: 78px; max-width: calc(100% - 32px);
  background: rgba(0,0,0,.55); color: #fff; padding: 5px 12px; border-radius: 999px; font-size: 12px;
}
.kuppel-karte { position: absolute; inset: 0; }
.kuppel-karte:not(.mit-karte) { display: none; }

.raster-platzhalter {
  position: absolute; inset: 0; overflow: hidden;
  background:
    linear-gradient(0deg, rgba(120,170,255,.18), rgba(120,170,255,.18)),
    repeating-linear-gradient(0deg, var(--raster-a) 0 38px, var(--raster-b) 38px 39px),
    repeating-linear-gradient(90deg, var(--raster-a) 0 38px, var(--raster-b) 38px 39px);
}
.raster-platzhalter i { position: absolute; display: block; }
.raster-platzhalter .weg.quer { left: -10%; right: -10%; top: 50%; height: 14px; background: var(--weg); transform: rotate(-4deg); }
.raster-platzhalter .weg.laengs { top: -10%; bottom: -10%; left: 32%; width: 10px; background: var(--weg); transform: rotate(3deg); }
.raster-platzhalter .gruen { left: 0; right: 0; bottom: 0; height: 36%; background: linear-gradient(0deg, rgba(76,217,100,.22), transparent); }
.raster-platzhalter .nadel { left: 50%; top: 42%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50% 50% 50% 0; background: var(--marke); rotate: -45deg; box-shadow: 0 4px 12px rgba(0,0,0,.2); }

.ort-titel { text-align: center; max-width: 760px; margin: 0 auto; }
.ort-titel h1 { font-size: clamp(27px, 6.4vw, 40px); font-weight: 700; margin: 0 0 10px; overflow-wrap: anywhere; }
.adresse { margin: 0 0 14px; color: var(--text-leise); }
.pillen { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pille { background: var(--linie-weich); color: var(--text-kraeftig); font-size: 14px; padding: 6px 14px; border-radius: 999px; }
.pille.marke { background: var(--marke-tint); color: var(--marke-text); font-weight: 600; min-height: 0; }

.rund-tasten { display: flex; gap: clamp(14px, 4.5vw, 28px); justify-content: center; flex-wrap: wrap; padding: clamp(20px, 5vw, 28px) 0 clamp(24px, 5vw, 36px); }
.rund {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 64px;
  border: 0; background: transparent; font: inherit; padding: 0; cursor: pointer;
  color: var(--marke-text); font-size: 13px; font-weight: 560;
}
.rund:hover { text-decoration: none; }
.rund b { font-weight: inherit; }
.rund[aria-pressed="true"] span { background: rgba(255,59,48,.14); }
.rund span { width: 60px; height: 60px; border-radius: 50%; background: var(--marke-tint); display: grid; place-items: center; font-size: 24px; }
.rund:hover span { background: var(--marke-tint-stark); }
@media (max-width: 400px) { .rund-tasten { gap: 10px; } .rund span { width: 54px; height: 54px; } }

.ort-raster { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 28px); align-items: flex-start; }
.ort-raster .haupt { flex: 3 1 420px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.seite-leiste { flex: 1 1 300px; display: flex; flex-direction: column; gap: 16px; min-width: 0; position: sticky; top: 78px; }
@media (max-width: 760px) { .seite-leiste { position: static; } }

.drei-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px; }
.drei-wege button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  border: 1px solid var(--linie); background: var(--fuell); border-radius: 18px; padding: 16px;
  font: inherit; color: var(--text); cursor: pointer;
}
.drei-wege button:hover { border-color: var(--marke-tint-stark); }
.drei-wege span { font-size: 24px; margin-bottom: 6px; }
.drei-wege b { font-size: 16px; font-weight: 620; }
.drei-wege small { font-size: 14px; color: var(--text-leise); }
@media (max-width: 520px) {
  .drei-wege button { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center; padding: 12px 14px; }
  .drei-wege span { grid-row: span 2; margin: 0; }
}

.merkmale { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.merkmale li { display: inline-flex; align-items: center; gap: 8px; background: var(--fuell); border-radius: 14px; padding: 9px 14px; font-size: 15px; }

.bilder-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.bild { margin: 0; }
.bild img, .bild-platzhalter { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; display: block; }
.bild-platzhalter { background: repeating-linear-gradient(135deg, var(--raster-a) 0 12px, var(--raster-b) 12px 24px); display: grid; place-items: center; font-size: 12px; color: var(--text-leise); }
.bild figcaption { font-size: 12px; color: var(--text-leise); margin-top: 4px; }
.bild-dazu { aspect-ratio: 4/3; border: 1px dashed var(--marke-tint-stark); border-radius: 14px; background: var(--marke-tint); color: var(--marke-text); font: inherit; font-size: 14px; font-weight: 560; cursor: pointer; padding: 8px; }

.schnitt { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: -4px 0 16px; }
.sterne { color: var(--gelb); letter-spacing: .06em; }
.stimmen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.stimmen li { display: flex; gap: 14px; }
.stimmen p { margin: 4px 0 0; }
.stimme-kopf { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0 !important; }
.kuerzel { width: 40px; height: 40px; border-radius: 14px; background: var(--marke-tint); color: var(--marke-text); display: grid; place-items: center; font-weight: 640; flex: none; text-transform: lowercase; }

.zeilen { margin: 0; }
.zeilen div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--linie); }
.zeilen div:last-child { border-bottom: 0; }
.zeilen dt { color: var(--text-leise); }
.zeilen dd { margin: 0; text-align: right; }

.anfahrt-karte { position: relative; height: 260px; border-radius: 16px; overflow: hidden; }
.anfahrt-fuss { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.anfahrt-fuss p { margin: 0; font-size: 15px; }
.anfahrt-fuss a { display: inline-flex; align-items: center; min-height: 44px; }

.app-karte { background: var(--marke-flaeche); border-radius: 22px; padding: 20px 22px; color: #fff; }
.app-karte h3 { margin: 0 0 6px; font-size: 18px; font-weight: 650; }
.app-karte p { margin: 0 0 14px; font-size: 15px; line-height: 1.45; }

.zeile { display: flex; align-items: center; gap: 12px; min-height: 56px; color: inherit; }
.zeile:hover { text-decoration: none; }
.zeile b { display: block; font-size: 15px; font-weight: 560; }
.zeile small { display: block; font-size: 13px; color: var(--text-leise); }
.zeile .symbol { width: 44px; height: 44px; border-radius: 15px; background: var(--fuell); display: grid; place-items: center; font-size: 20px; flex: none; }
.zeile .symbol.marke { background: var(--marke-tint); }
.naehe-liste { display: flex; flex-direction: column; gap: 4px; }

dialog.bald {
  width: min(420px, calc(100vw - 32px)); border: 0; border-radius: 26px; padding: 28px 26px;
  background: var(--karte); color: var(--text); text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.24);
}
dialog.bald::backdrop { background: rgba(0,0,0,.35); backdrop-filter: blur(3px); }
dialog.bald img { border-radius: 18px; display: block; margin: 0 auto 16px; }
dialog.bald h2 { margin: 0 0 8px; font-size: 22px; }
dialog.bald p { margin: 0 0 20px; color: var(--text-leise); font-size: 15px; }
dialog.bald .knopf { width: 100%; margin-top: 6px; }

/* ── Entdecken ──────────────────────────────────────────────────────── */

.held-zahl { margin-bottom: 22px !important; }
.abschnitte-feed { display: flex; flex-direction: column; gap: 36px; padding-top: 24px; }
.feed-titel { margin: 0 0 14px; font-size: 22px; font-weight: 650; }
.feed-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.feed-kopf a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 560; }
.feed-untertitel { margin: 22px 0 10px; font-size: 17px; font-weight: 620; color: var(--text-leise); }
.einladung { padding-block: 28px; }
.zwei-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: start; }
.skelett-kachel { min-height: 220px; background: linear-gradient(90deg, var(--linie-weich), var(--linie), var(--linie-weich)); background-size: 200% 100%; animation: schimmer 1.4s infinite; }
@media (prefers-reduced-motion: reduce) { .skelett-kachel { animation: none; } }

/* ── Bildbetrachter ─────────────────────────────────────────────────── */

.kuppel-foto-knopf { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: zoom-in; }
.bild button { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: zoom-in; }
.bild figcaption a { color: var(--marke-text); }

/* ⚠ Zwei Fallen, beide am 18.09.2026 im Betrieb aufgefallen:
   1. `display: grid` OHNE `[open]` hebelt die Regel des Browsers aus, die einen
      geschlossenen Dialog verbirgt — die Pfeile blieben nach dem Schließen
      stehen, weil sie `position: fixed` sind.
   2. `100vw` ist BREITER als das Fenster, sobald ein Rollbalken da ist. Das
      Bild saß dadurch um die halbe Rollbalkenbreite zu weit rechts. `inset: 0`
      misst das Fenster, nicht die Bildschirmbreite. */
dialog.betrachter {
  position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: rgba(0,0,0,.92); color: #fff;
}
dialog.betrachter[open] { display: grid; place-items: center; }
dialog.betrachter:not([open]) { display: none; }
dialog.betrachter::backdrop { background: rgba(0,0,0,.6); }
.betrachter-buehne { margin: 0; display: grid; place-items: center; width: min(1200px, 96%); }
.betrachter-buehne img {
  max-width: min(96%, 1200px); max-height: calc(100dvh - 150px); object-fit: contain;
  border-radius: 12px; display: block; margin-inline: auto;
}
.betrachter-buehne figcaption {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  width: 100%; margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.85);
}
.betrachter-name { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.betrachter-buehne .leise { color: rgba(255,255,255,.7); }
.betrachter-zaehler { font-variant-numeric: tabular-nums; }
.betrachter-zu, .betrachter-pfeil {
  position: fixed; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
  width: 48px; height: 48px; font-size: 26px; line-height: 1; cursor: pointer;
}
.betrachter-zu { top: max(12px, env(safe-area-inset-top, 0px)); right: 12px; font-size: 20px; }
.betrachter-pfeil { top: 50%; transform: translateY(-50%); }
.betrachter-pfeil.links { left: 12px; }
.betrachter-pfeil.rechts { right: 12px; }
.betrachter-zu:hover, .betrachter-pfeil:hover { background: rgba(255,255,255,.26); }

/* ── Suche ──────────────────────────────────────────────────────────── */

.gruppe { margin: 28px 4px 12px; font-size: 17px; font-weight: 620; color: var(--text-leise); }
.gruppe-kopf { display: flex; justify-content: space-between; align-items: center; }
.gruppe-kopf .gruppe { margin-bottom: 12px; }
.zeilen-liste { padding: 0; overflow: hidden; }
.zeilen-liste > .zeile { padding: 8px 18px; border-bottom: 1px solid var(--linie-weich); }
.zeilen-liste > .zeile:last-child { border-bottom: 0; }
.zeilen-liste > .zeile > span:nth-child(2), .zeile-haupt { flex: 1; min-width: 0; color: inherit; }
.weg-knopf { width: 44px; height: 44px; border: 0; background: transparent; color: var(--text-leise); font: inherit; font-size: 15px; cursor: pointer; border-radius: 50%; flex: none; }
.weg-knopf:hover { background: var(--fuell); }

/* ── Umkreis ────────────────────────────────────────────────────────── */

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 20px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 15px; border-radius: 999px;
  background: var(--karte); color: var(--text); font-size: 14px; font-weight: 560; box-shadow: 0 1px 2px rgba(0,0,0,.05);
  /* Auch als <button>: ohne diese Zeile zeichnet Safari seinen eigenen
     Rahmen mit dunkler Kante darum („Meine Region zeigen", 18.09.2026). */
  border: 0; font-family: inherit; line-height: 1.2; cursor: pointer;
}
.chip:hover { text-decoration: none; background: var(--marke-tint); }
.chip[aria-pressed="true"] { background: var(--marke-knopf); color: #fff; }
.chip[aria-pressed="true"] .leise { color: rgba(255,255,255,.85); }
.chip.text { background: transparent; color: var(--marke-text); box-shadow: none; border: 1px solid var(--marke-tint-stark); }
.chip.text:hover { background: var(--marke-tint); }

.karten-teaser { display: flex; gap: 16px; align-items: center; padding: 12px; margin-bottom: 20px; color: inherit; }
.karten-teaser:hover { text-decoration: none; }
.karten-teaser b { display: block; font-size: 17px; font-weight: 620; }
.karten-teaser small { display: block; font-size: 15px; color: var(--text-leise); }
.teaser-karte { position: relative; width: clamp(110px, 26vw, 200px); height: 96px; border-radius: 16px; overflow: hidden; flex: none; }
.teaser-karte .nadel { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.pfeil { margin-left: auto; font-size: 22px; color: var(--text-leise); padding-right: 8px; }
.zaehler { font-size: 15px; margin: 0 4px 14px; }

.kachel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.ort-kachel { background: var(--karte); border-radius: 20px; overflow: hidden; color: inherit; display: flex; flex-direction: column; }
.ort-kachel:hover { text-decoration: none; box-shadow: 0 8px 24px var(--schatten); }
/* ⚠ Festes Querformat, sonst bestimmt das Foto die Höhe. Gemessen am
   18.09.2026 auf kinderspiel.app: Hochformate (300×400) machten die Kachel
   420 px hoch, Querformate 236 px — in einer Reihe sah das zerrissen aus.
   `aspect-ratio` allein genügt nicht: Es ist eine Wunschgröße, und ein Bild
   im Fluss wächst darüber hinaus. Deshalb liegt das Bild absolut im Rahmen. */
.kachel-bild { position: relative; aspect-ratio: 16/10; background: var(--fuell); display: grid; place-items: center; overflow: hidden; }
.kachel-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kachel-bild.ohne {
  background:
    repeating-linear-gradient(0deg, var(--raster-a) 0 22px, var(--raster-b) 22px 23px),
    repeating-linear-gradient(90deg, var(--raster-a) 0 22px, var(--raster-b) 22px 23px);
}
.kachel-karte { position: absolute; inset: 0; pointer-events: none; }
.kachel-bild.mit-karte .kachel-symbol { display: none; }
.kachel-symbol { width: 52px; height: 52px; border-radius: 17px; background: var(--karte); box-shadow: 0 4px 12px var(--schatten); display: grid; place-items: center; font-size: 26px; }
.kachel-text { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; }
/* Zwei Zeilen für den Namen, immer — sonst sind die Kacheln einer Reihe
   unterschiedlich hoch, je nachdem, wie lang ein Ortsname ist. */
.kachel-text b {
  font-size: 16px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere;
  min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kachel-text small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.kachel-text small { font-size: 14px; color: var(--text-leise); }
.kachel-text small:empty { display: none; }

/* ── Karte ──────────────────────────────────────────────────────────── */

/* Die Karte ist der Inhalt dieser Seite: volle Breite, kein Kasten, und so
   hoch, wie das Fenster hergibt (Yannick, 18.09.2026). Der Kopf über ihr ist
   dieselbe Kuppel wie auf Entdecken und Suche und läuft deshalb von Rand zu
   Rand. */
.karte-seite { max-width: none; padding: 0; }
.karten-buehne { position: relative; overflow: hidden; background: var(--karte); }
.karte-flaeche { position: relative; height: calc(100dvh - 64px); min-height: 420px; }

/* ⚠ Vollbild: die Karte bekommt genau das, was das Fenster hergibt, und die
   Seite hat nichts zu rollen. Dadurch zoomt das Mausrad über der Karte, statt
   die Seite zu schieben (Yannick, 18.09.2026). Gerechnet wird nicht mit einer
   geschätzten Kopfhöhe, sondern mit einer Spalte über das ganze Fenster — so
   passt es auch, wenn der Kopf umbricht oder eine Sicherheitszone dazukommt. */
body.voll-seite { overflow: hidden; }
body.voll-seite #app { display: flex; flex-direction: column; height: 100dvh; }
body.voll-seite .app-kopf { flex: none; position: static; }
body.voll-seite main { flex: 1; min-height: 0; padding-bottom: 0; }
body.voll-seite main > .karte-seite { height: 100%; }
body.voll-seite .karten-buehne { height: 100%; }
body.voll-seite .karte-flaeche { position: absolute; inset: 0; height: auto; min-height: 0; }

.karten-leiste {
  position: absolute; right: 8px; bottom: 6px; z-index: 2;
  display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 2px 10px;
  max-width: min(100% - 16px, 780px); padding: 3px 10px; border-radius: 999px;
  background: var(--kopf-grund); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  font-size: 11px; line-height: 1.5; color: var(--text-leise);
}
.karten-leiste a, .karten-leiste button {
  color: var(--text-leise); font: inherit; border: 0; background: transparent; padding: 0; cursor: pointer;
}
.karten-leiste a:hover, .karten-leiste button:hover { color: var(--text); text-decoration: underline; }
/* Schmal ist unten links Apples Logo im Weg — dann eine Zeile darüber. */
@media (max-width: 700px) {
  .karten-leiste { left: 8px; justify-content: center; bottom: 30px; }
  .karten-auswahl { bottom: 72px; }
}
.karten-kuppel {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: none;
  background: var(--marke-flaeche); color: #fff; text-align: center;
  border-radius: 0 0 50% 50% / 0 0 40px 40px; padding: 16px 24px 30px;
}
.karten-kuppel b { display: block; font-size: 19px; font-weight: 650; }
.karten-kuppel small { display: block; font-size: 14px; }
.karten-auswahl { position: absolute; left: 12px; right: 12px; bottom: 44px; z-index: 2; display: flex; justify-content: center; }
.auswahl-karte { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; box-shadow: 0 8px 24px var(--schatten); max-width: 520px; width: 100%; }
.auswahl-karte b { flex: 1; min-width: 0; }
.auswahl-karte .symbol { font-size: 22px; }
/* Kein eigener Vermerk ÜBER der Karte: unten links stehen Apples Logo und
   Rechtshinweis, und die müssen sichtbar bleiben. Unser Vermerk steht darunter. */
.haufen {
  border-radius: 50%; background: var(--marke); color: #fff; display: grid; place-items: center;
  font: 640 15px -apple-system, BlinkMacSystemFont, sans-serif; box-shadow: 0 6px 18px rgba(0,0,0,.25);
  border: 3px solid rgba(255,255,255,.9);
}

/* ── Werbung ────────────────────────────────────────────────────────── */

/* Immer beschriftet, klar vom Inhalt getrennt (Entwurf: „Anzeige" in Mono). */
.anzeige { background: var(--karte); border: 1px solid var(--linie); border-radius: 22px; padding: 12px 16px 16px; }
.anzeige-label { display: block; margin-bottom: 8px; font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise); }

/* ── Bestenliste ────────────────────────────────────────────────────── */

.rangliste { list-style: none; margin: 8px 0 0; padding: 0; }
.rang-zeile, .rang-luecke { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--linie-weich); }
.rang-zeile:last-child, .rang-luecke:last-child { border-bottom: 0; }
.rang { width: 28px; text-align: right; color: var(--text-leise); font-size: 15px; flex: none; }
.rang-name { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--text); min-height: 44px; }
.rang-name b { font-weight: 560; overflow-wrap: anywhere; }
.rang-name:hover { text-decoration: none; }
.rang-name:hover b { text-decoration: underline; }
.rang-wert { color: var(--text-leise); font-variant-numeric: tabular-nums; }
.rang-luecke { color: var(--text-leise); font-size: 14px; }
.rang-luecke > span:last-child { flex: 1; border: 1px dashed var(--linie-stark); border-radius: 12px; padding: 6px 12px; }
.rangliste .kuerzel { width: 34px; height: 34px; border-radius: 12px; font-size: 14px; }
.rangliste.gross .rang-zeile:nth-child(-n+3) .rang { font-weight: 700; color: var(--marke-text); }
.bild-avatar { object-fit: cover; display: block; }
.abzeichen-klein { font-size: 13px; }

/* ── Profil ─────────────────────────────────────────────────────────── */

.profil-kopf { position: relative; margin-bottom: 60px; }
.profil-kuppel { height: clamp(120px, 20vw, 170px); border-radius: 24px 24px 50% 50% / 24px 24px 60px 60px; background: var(--marke); }
.profil-bild { position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%); width: 104px; height: 104px; border-radius: 30px; background: var(--karte); box-shadow: 0 8px 24px var(--schatten); padding: 4px; }
.profil-avatar { width: 96px; height: 96px; border-radius: 26px; display: grid; place-items: center; font-size: 40px; font-weight: 650; background: var(--marke-tint); color: var(--marke-text); text-transform: lowercase; }
.profil-text { max-width: 46ch; margin: 10px auto 0; }
.streifen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0 8px; }
.streifen div { background: var(--karte); border-radius: 20px; padding: 16px 8px; text-align: center; display: flex; flex-direction: column-reverse; }
.streifen dd { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.streifen dt { font-size: 15px; color: var(--text-leise); }
.profil-gruppe .gruppe-kopf { align-items: baseline; }
/* Zwei Spalten wie auf der Ortsseite: Beiträge links, was man mit dem Profil
   tun kann rechts. Schmal steht die Leiste VOR den Beiträgen — sonst läge
   „Teilen" hinter hundert Fotos. */
.profil-raster { margin-top: 20px; }
.profil-raster .haupt > .kasten, .profil-raster .haupt > p { margin: 0; }
.knopf-stapel { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.knopf-stapel .knopf { width: 100%; white-space: normal; text-align: center; }
@media (max-width: 760px) { .profil-raster .seite-leiste { order: -1; } }
.zeile-bild { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; flex: none; }
.beitrag-zeile { align-items: flex-start; padding-block: 12px !important; }
.beitrag-zeile .symbol.gelb { background: rgba(255,204,0,.2); color: var(--gelb); }
.beitrag-text { color: var(--text) !important; font-size: 15px !important; margin-top: 4px; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Fuß ────────────────────────────────────────────────────────────── */

.app-fuss {
  max-width: var(--breite); margin: 48px auto 0;
  padding: 28px var(--rand-r) calc(28px + env(safe-area-inset-bottom, 0px)) var(--rand);
  border-top: 1px solid var(--linie); font-size: 14px; color: var(--text-leise);
}
.app-fuss .spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; margin-bottom: 24px; }
.app-fuss h2 { font-size: 14px; font-weight: 650; color: var(--text); margin: 0 0 6px; letter-spacing: 0; }
.app-fuss p { margin: 0; line-height: 1.55; max-width: 32ch; }
.app-fuss ul { list-style: none; margin: 0; padding: 0; }
.app-fuss li a, .fuss-knopf { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.fuss-knopf { border: 0; background: transparent; color: var(--marke-text); font-family: inherit; padding: 0; cursor: pointer; text-align: left; }
.fuss-knopf:hover { text-decoration: underline; }
.fuss-marke { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 650; color: var(--text); margin-bottom: 10px !important; }
.fuss-marke img { border-radius: 8px; }
.app-fuss .unten { display: flex; gap: 12px 18px; flex-wrap: wrap; align-items: center; padding-top: 18px; border-top: 1px solid var(--linie); }
.sprachwahl { display: inline-flex; align-items: center; gap: 8px; }
.sprachwahl select {
  min-height: 44px; border: 1px solid var(--linie-stark); background: var(--karte); color: var(--text);
  font: inherit; font-size: 15px; padding: 0 14px; border-radius: 999px;
}

/* ── Konto: Knopf im Kopf, Menü, Anmeldeblatt ───────────────────────── */

.nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.konto-platz { display: inline-flex; align-items: center; }
.konto-knopf { padding-inline: 18px; }
.nur-schmal-inline { display: none; }
.konto-rund {
  width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; overflow: hidden;
  background: var(--marke-tint); color: var(--marke-text); font-weight: 650; font-size: 17px; cursor: pointer;
  list-style: none; text-transform: lowercase;
}
.konto-rund::-webkit-details-marker { display: none; }
.konto-rund.laedt { background: var(--linie-weich); }
.konto-rund .konto-avatar { width: 100%; height: 100%; display: grid; place-items: center; }
.konto-menue { position: relative; }
.konto-menue[open] .konto-rund { outline: 3px solid var(--marke-tint-stark); }
.konto-karte {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(300px, calc(100vw - 24px));
  background: var(--karte); border-radius: 18px; padding: 14px; box-shadow: 0 16px 40px var(--schatten);
  display: flex; flex-direction: column; gap: 6px;
}
.konto-karte p { margin: 0; }
.konto-name { font-size: 17px; overflow-wrap: anywhere; }
.konto-hinweis { background: var(--warn-grund); border-radius: 12px; padding: 8px 10px; }
.konto-zeile {
  display: flex; align-items: center; min-height: 44px; padding: 0 10px; margin: 0 -4px; border-radius: 12px;
  border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.konto-zeile:hover { background: var(--linie-weich); text-decoration: none; }
@media (max-width: 640px) {
  /* Schmal fehlt der App-Knopf im Kopf — der Kontoknopf bleibt, als Symbol. */
  .app-kopf .konto-knopf { display: inline-flex; width: 44px; padding: 0; font-size: 18px; }
  .nur-breit-inline { display: none; }
  .nur-schmal-inline { display: inline; }
}

dialog.blatt {
  width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  border: 0; border-radius: 26px; padding: 26px 24px 20px;
  background: var(--karte); color: var(--text); box-shadow: 0 24px 60px rgba(0,0,0,.24);
}
dialog.blatt::backdrop { background: rgba(0,0,0,.35); backdrop-filter: blur(3px); }
dialog.blatt h2 { margin: 0 0 8px; font-size: 23px; text-align: center; padding-inline: 28px; }
.blatt-zu {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--fuell); color: var(--text-leise); font-size: 15px; cursor: pointer;
}
.blatt-text { margin: 0 0 18px; text-align: center; color: var(--text-leise); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.blatt-leise { margin: 12px 0 4px; text-align: center; color: var(--text-leise); font-size: 13px; line-height: 1.45; text-wrap: pretty; }
.blatt-fehler { margin: 0 0 12px; color: #D70015; font-size: 14px; text-align: center; }
@media (prefers-color-scheme: dark) { .blatt-fehler { color: #FF6961; } }
dialog.blatt .knopf.text { display: flex; width: 100%; margin-top: 4px; }
.knopf.breit { width: 100%; }
.anmelde-wege { display: flex; flex-direction: column; gap: 10px; }
.knopf.anbieter { width: 100%; border-radius: 14px; min-height: 50px; }
.knopf.anbieter.apple { background: #000; color: #fff; }
@media (prefers-color-scheme: dark) { .knopf.anbieter.apple { background: #fff; color: #000; } }
.knopf.anbieter.google { background: var(--karte); color: var(--text); border: 1px solid var(--linie-stark); }
.knopf.anbieter.google:hover { background: var(--fuell); }
.google-zeichen {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: conic-gradient(#EA4335 0 25%, #FBBC05 25% 50%, #34A853 50% 75%, #4285F4 75% 100%);
}
.anmelde-form { display: flex; flex-direction: column; gap: 10px; }
.anmelde-form .feld input {
  width: 100%; min-height: 48px; border: 1px solid var(--linie-stark); border-radius: 14px; padding: 0 14px;
  background: var(--karte); color: var(--text); font: inherit; font-size: 16px;
}
.anmelde-form .feld input:focus { outline: 3px solid var(--marke-tint-stark); border-color: var(--marke); }
.anmelde-form .knopf.breit { border-radius: 14px; min-height: 50px; margin-top: 4px; }
.blatt-oder { display: flex; align-items: center; gap: 12px; margin: 10px 0; color: var(--text-leise); font-size: 13px; }
.blatt-oder::before, .blatt-oder::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
dialog.blatt .knopf.umriss.breit { border-radius: 14px; min-height: 48px; }

/* ── Profilbild: Abzeichen, Stift, Ausschnitt ───────────────────────── */

/* Wie in der App: oben rechts das Unterstützer-Abzeichen, unten links der
   Stift zum Wechseln (Profilbildwechsel.swift — unten links ist die einzige
   freie Ecke). */
.abzeichen, .stift {
  position: absolute; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 3px solid var(--karte); box-shadow: 0 4px 12px var(--schatten);
}
.abzeichen { top: -10px; right: -10px; background: var(--gelb-stern); color: #6B4E00; font-size: 17px; line-height: 1; }
.stift {
  bottom: -10px; left: -10px; background: var(--marke-knopf); color: #fff; font: 600 17px/1 -apple-system, system-ui, sans-serif;
  cursor: pointer; padding: 0;
}
.stift:hover { background: var(--marke-knopf-tief); }

.ausschnitt {
  position: relative; width: min(260px, 70vw); aspect-ratio: 1; margin: 6px auto 12px; overflow: hidden;
  border-radius: 30%; background: var(--fuell); touch-action: none; cursor: grab; user-select: none;
  box-shadow: 0 0 0 4px var(--marke-tint);
}
.ausschnitt:active { cursor: grabbing; }
.ausschnitt img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.zoom-regler { display: flex; align-items: center; gap: 10px; max-width: 260px; margin: 0 auto; color: var(--text-leise); font-size: 20px; }
.zoom-regler input { flex: 1; accent-color: var(--marke-knopf); }
.apple-zeichen { width: 17px; height: 20px; flex: none; margin-top: -3px; }

/* ── Gastweg, Warnblatt, Bilanz ─────────────────────────────────────── */

.gast-weg { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); }
.gast-weg .knopf { border-radius: 14px; }
.bilanz-karte { background: var(--fuell); border-radius: 16px; padding: 12px 16px; margin: 0 0 10px; }
.bilanz-karte b { display: block; font-size: 14px; color: var(--text-leise); font-weight: 600; margin-bottom: 4px; }
.bilanz-karte ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 16px; font-weight: 600; }
.knopf.text.rot { color: #D70015; }
@media (prefers-color-scheme: dark) { .knopf.text.rot { color: #FF6961; } }
.warn-text { color: var(--gelb) !important; }
dialog.blatt .knopf.breit + .knopf.text { margin-top: 6px; }

/* ── Bewerten ───────────────────────────────────────────────────────── */

.klein-knopf { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.eigene-bewertung { background: var(--marke-tint); border-radius: 14px; padding: 10px 14px; margin: 0 0 14px; font-size: 14px; }
.eigene-bewertung p { margin: 0; }
.eigene-bewertung p + p { margin-top: 4px; color: var(--text-leise); }
.tippsterne { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.tippsterne button, .sternwahl button {
  border: 0; background: none; cursor: pointer; font-size: 34px; line-height: 1; padding: 4px; color: var(--linie-stark);
  min-width: 44px; min-height: 44px;
}
.tippsterne:hover button { color: var(--gelb-stern); }
.tippsterne button:hover ~ button { color: var(--linie-stark); }
.sternwahl { display: flex; justify-content: center; gap: 4px; margin: 4px 0 0; }
.sternwahl button { font-size: 40px; }
.sternwahl button.an { color: var(--gelb-stern); }
.sternwort { text-align: center; min-height: 1.5em; margin: 2px 0 14px; font-weight: 600; color: var(--text-leise); }
.bewerten-ort { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 0 10px; }
.bewerten-ort small { color: var(--text-leise); font-size: 13px; }
.pruef-hinweis { background: var(--marke-tint); border-radius: 14px; padding: 10px 14px; margin: 0 0 12px; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
.pruef-hinweis span { color: var(--text-leise); }
.bewerten-blatt .feld { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.bewerten-blatt .feld input, .bewerten-blatt .feld textarea {
  width: 100%; border: 1px solid var(--linie-stark); border-radius: 14px; padding: 12px 14px;
  background: var(--karte); color: var(--text); font: inherit; font-size: 16px; font-weight: 400; resize: vertical;
}
.bewerten-blatt .feld input:focus, .bewerten-blatt .feld textarea:focus { outline: 3px solid var(--marke-tint-stark); border-color: var(--marke); }
.zaehler { text-align: right; margin: -6px 0 6px; font-size: 12px; color: var(--text-leise); }
.zaehler.zu-viel { color: #D70015; }
.abschnitt-marke { margin: 6px 0 6px; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise); }
.zeile-knopf {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  border: 0; border-radius: 14px; background: var(--fuell); color: var(--text); padding: 12px 14px; font: inherit; cursor: pointer;
}
.zeile-knopf small { color: var(--text-leise); font-size: 13px; }
.blatt-fuss { margin-top: 14px; }
.danke-liste { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.danke-liste li { display: flex; gap: 12px; align-items: flex-start; background: var(--fuell); border-radius: 14px; padding: 10px 14px; }
.danke-liste li > span { font-size: 18px; width: 22px; text-align: center; }
.danke-liste b { display: block; }
.danke-liste small { color: var(--text-leise); font-size: 13px; }

/* Lade-Kreisel im Kartenkopf: nur sichtbar, solange geladen wird. */
.karten-kuppel b { display: flex; align-items: center; justify-content: center; gap: 10px; }
.kreisel {
  width: 0; height: 18px; border-radius: 50%; border: 0 solid rgba(255,255,255,.35); border-top-color: #fff;
  opacity: 0; transition: width .15s, opacity .15s, border-width .15s; flex: none;
}
.karten-kuppel.laedt .kreisel { width: 18px; border-width: 2.5px; opacity: 1; animation: kreiseln .8s linear infinite; }
@keyframes kreiseln { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .karten-kuppel.laedt .kreisel { animation: none; border-color: #fff; opacity: .7; }
}

/* ── Fotos ──────────────────────────────────────────────────────────── */

.foto-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 14px; }
.foto-weg {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; border-radius: 18px;
  border: 1px solid var(--linie-stark); background: var(--karte); color: var(--text); font: inherit; cursor: pointer;
}
.foto-weg:hover { background: var(--marke-tint); }
.foto-weg span { font-size: 28px; }
.foto-weg small { color: var(--text-leise); font-size: 13px; }
.zusagen { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zusagen li { background: var(--fuell); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.zusagen small { color: var(--text-leise); font-size: 13px; }
.foto-raster { display: grid; gap: 8px; margin: 0 0 8px; }
.foto-raster.mehrere { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.foto-raster figure { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--fuell); }
.foto-raster img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.foto-raster.mehrere img { aspect-ratio: 1; }
.foto-raster figcaption { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.foto-weg-x {
  position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 13px;
}
.fortschritt { height: 6px; border-radius: 3px; background: var(--fuell); overflow: hidden; margin: 0 0 10px; }
.fortschritt i { display: block; height: 100%; background: var(--marke-knopf); transition: width .2s; }
.dein-bild-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 0 0 8px; }
.dein-bild { margin: 0; border-radius: 16px; overflow: hidden; background: var(--fuell); }
.dein-bild img, .dein-bild .bild-platzhalter { display: grid; place-items: center; width: 100%; height: 180px; object-fit: cover; font-size: 34px; }
.dein-bild figcaption { padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.dein-bild .knopf.text { padding: 0; min-height: 32px; }

/* ── Ergänzen ───────────────────────────────────────────────────────── */

.eigene-einreichung { display: flex; gap: 12px; align-items: flex-start; background: var(--marke-tint); border-radius: 16px; padding: 12px 16px; }
.eigene-einreichung b { display: block; }
.eigene-einreichung small { color: var(--text-leise); font-size: 14px; }
.wahl-chips { margin: 6px 0 10px; }
.chip.wahl { border: 1px solid var(--linie-stark); box-shadow: none; }
.chip.wahl[aria-pressed="true"] { border-color: transparent; }
.geraete-gruppe { background: var(--fuell); border-radius: 14px; margin: 0 0 8px; padding: 0 14px; }
.geraete-gruppe summary { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; cursor: pointer; list-style: none; }
.geraete-gruppe summary::-webkit-details-marker { display: none; }
.geraete-gruppe summary small { color: var(--text-leise); font-size: 13px; }
.geraete-gruppe summary small.gewaehlt { color: #1F8A3B; }
.rest-wahl { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; }
.rest-wahl button {
  display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--linie); background: var(--karte); color: var(--text); font: inherit;
}
.rest-wahl button[aria-checked="true"] { border-color: var(--marke); background: var(--marke-tint); }
.rest-wahl small { color: var(--text-leise); font-size: 13px; }
.rest-wahl .pille { font-size: 11px; margin-left: 6px; }

/* ── Melden ─────────────────────────────────────────────────────────── */

.melde-fuss { margin: 4px 4px 0; font-size: 14px; color: var(--text-leise); }
.melde-fuss .knopf.text { display: inline-flex; min-height: 36px; padding: 0 6px; font-size: 14px; }
.melde-griff { min-height: 32px; padding: 0; font-size: 13px; font-weight: 500; color: var(--text-leise); }
.melde-griff:hover { color: #D70015; background: transparent; }
.profil-leiste .melde-griff { margin-top: 8px; }
.melde-gruende { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.melde-grund {
  display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--linie); background: var(--karte); color: var(--text); font: inherit;
}
.melde-grund[aria-checked="true"] { border-color: var(--marke); background: var(--marke-tint); }
.melde-grund.fest { cursor: default; border-color: var(--marke); background: var(--marke-tint); }
.melde-grund small { color: var(--text-leise); font-size: 13px; }
.melde-bild { margin: 0 0 12px; }
.melde-bild img { width: 100%; height: 180px; object-fit: cover; border-radius: 14px; display: block; }
.melde-bild figcaption { margin-top: 4px; }
.melden-blatt .melde-notiz { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.melden-blatt .melde-notiz textarea {
  width: 100%; border: 1px solid var(--linie-stark); border-radius: 14px; padding: 10px 14px;
  background: var(--karte); color: var(--text); font: inherit; font-size: 16px; font-weight: 400; resize: vertical;
}
.betrachter-melden { border: 0; background: transparent; color: rgba(255,255,255,.75); font: inherit; font-size: 13px; cursor: pointer; padding: 4px 0; }
.betrachter-melden:hover { color: #fff; text-decoration: underline; }

/* ── Einstellungen ──────────────────────────────────────────────────── */

.einstellungen h1 { font-size: clamp(26px, 5vw, 34px); margin: 8px 0 16px; }
.einstellungen-kasten { margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.einstellungen-kasten .feld { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; margin-top: 8px; }
.einstellungen-kasten input:not([type=checkbox]), .einstellungen-kasten textarea, .einstellungen-kasten select {
  width: 100%; min-height: 46px; border: 1px solid var(--linie-stark); border-radius: 14px; padding: 10px 14px;
  background: var(--karte); color: var(--text); font: inherit; font-size: 16px; font-weight: 400;
}
.einstellungen-kasten textarea { resize: vertical; }
.einstellungen-kasten .zaehler { margin: 0; font-weight: 400; }
.befund { margin: 0; font-size: 14px; }
.befund.gut { color: #1F8A3B; }
.befund.schlecht { color: #D70015; }
@media (prefers-color-scheme: dark) { .befund.gut { color: #4CD964; } .befund.schlecht { color: #FF6961; } }
.vorschlag-karte { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--marke-tint); border-radius: 14px; padding: 10px 14px; }
.vorschlag-karte small { display: block; color: var(--text-leise); font-size: 13px; }
.vorschau-karte { background: var(--warn-grund); border-radius: 14px; padding: 12px 14px; }
.sichern-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.schalter-zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; cursor: pointer; }
.schalter-zeile + .schalter-zeile { border-top: 1px solid var(--linie); }
.schalter-zeile b { display: block; }
.schalter-zeile small { color: var(--text-leise); font-size: 13px; }
.schalter-zeile input { width: 46px; height: 28px; accent-color: var(--marke-knopf); flex: none; }
.loeschen { border: 1px solid rgba(215,0,21,.35); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.loeschen h3 { margin: 0; color: #D70015; }
.loeschen p { margin: 0; }
.knopf.rot-knopf { background: #D70015; }
.knopf.rot-knopf:hover { background: #A50010; }

/* ── Freunde ────────────────────────────────────────────────────────── */

.freund-platz { display: flex; flex-direction: column; gap: 6px; }
.freund-platz[hidden] { display: none; }
.freund-stand { margin: 0; text-align: center; padding: 10px; border-radius: 999px; background: var(--fuell); color: var(--text-leise); font-weight: 600; }
.freund-stand.gut { background: rgba(52,199,89,.14); color: #1F8A3B; }
.klein-link { min-height: 32px; font-size: 13px; color: var(--text-leise); }
.knopf.rot-umriss { color: #D70015; border-color: rgba(215,0,21,.35); white-space: normal; }
.streifen .klickbar { cursor: pointer; position: relative; }
.streifen .klickbar:hover { background: var(--marke-tint); }
.mit-punkt { position: relative; }
.mit-punkt::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: #FF3B30; border: 2px solid var(--karte);
}
.zahl-punkt { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #FF3B30; color: #fff; font-size: 12px; font-weight: 700; margin-left: 6px; }
/* ⚠ nicht `.rund` — so heißen schon die runden Knöpfe, mit `min-width: 64px`. */
.kuerzel.kreisrund { border-radius: 50%; }
.freund-zeile { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.zeilen-liste > .freund-zeile { padding: 8px 18px; }
.freund-zeile + .freund-zeile { border-top: 1px solid var(--linie); }
.freund-zeile .knopfreihe { padding-left: 52px; }
.freunde-seite section { margin-bottom: 18px; }
.freund-ereignis { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.freund-ereignis + .freund-ereignis { border-top: 1px solid var(--linie); }
.freund-ereignis .zeile { flex: 1; min-width: 0; }
.freund-ereignis .zitat { font-style: normal; border-left: 3px solid var(--linie-stark); padding-left: 8px; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.freund-ereignis .zeile-bild { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; flex: none; }
.zugang-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.zugang-zeile b { display: block; }
.zugang-zeile small { color: var(--text-leise); font-size: 13px; overflow-wrap: anywhere; }
.zugang-form { display: flex; flex-direction: column; gap: 6px; background: var(--fuell); border-radius: 14px; padding: 12px 14px; margin: 0 0 8px; }
/* Konto-Karte und Profil-Leiste aufgeräumt (18.09.2026). */
.zugang-zeile { border-top: 1px solid var(--linie); }
.einstellungen-kasten h2 + .zugang-zeile { border-top: 0; }
.knopf-stapel .knopf.umriss.rot-umriss { width: 100%; }
.knopf.rot-umriss:hover { background: rgba(215,0,21,.08); }
.freund-platz:empty { display: none; }
.profil-leiste + .profil-leiste { margin-top: 0; }