:root{
  --bg1:#0f172a; --bg2:#1e293b; 
  --card:rgba(255,255,255,.06);
  --card:rgba(255,255,255,.3);
  --cardd:rgba(0,0,0,.15);
  --line:rgba(255,255,255,.12); 
  --fg:#f1f5f9; 
  --muted:#94a3b8;
  --muted:#000000bd;
  --accent:#f472b6; 
  --accent2:#60a5fa; 
  --good:#34d399;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--fg);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(244,114,182,.18), transparent 60%),
    radial-gradient(1000px 600px at -10% 110%, rgba(96,165,250,.18), transparent 55%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  min-height:100%;
  padding:max(18px,env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:18px;max-width:520px;margin:0 auto;
}
.hi{font-size:14px;color:var(--muted);letter-spacing:.02em}
.hi b{color:var(--fg)}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:22px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
/* Countdown */
.count{text-align:center;position:relative}
/* Kalender-Zeichen rechts unten: sichtbar nur das 16-px-Zeichen, gleiche
   Optik wie das Karten-Zeichen auf den Kacheln. Getippt wird aber auf das
   unsichtbare Datumsfeld darueber (.calin), 40 px gross (Finger). */
.calbtn{position:absolute;right:6px;bottom:6px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;color:#fff;opacity:.75;pointer-events:none}
.calbtn svg{width:16px;height:16px;display:block}
.count:has(.calin:active) .calbtn{opacity:1;background:rgba(255,255,255,.08)}
.count:has(.calin:focus-visible) .calbtn{outline:2px solid var(--accent2);outline-offset:-2px}
/* appearance:none + min-width:0, sonst haelt iOS das Feld breit;
   font-size 16px, sonst zoomt iOS beim Antippen in die Seite. */
.calin{position:absolute;right:6px;bottom:6px;z-index:1;
  width:40px;height:40px;min-width:0;margin:0;padding:0;border:0;
  -webkit-appearance:none;appearance:none;background:transparent;
  font-size:16px;color:transparent;opacity:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.count .pre{font-size:16px;color:var(--muted);margin-bottom:2px}
.count .num{font-size:64px;font-weight:800;line-height:1;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.count .lbl{margin-top:8px;font-size:15px;color:var(--muted)}
.count .date{margin-top:2px;font-size:12px;color:var(--muted);opacity:.8}
/* Distanz */
.dist{text-align:center;position:relative}
/* Die Distanz-Karte laeuft nach oben aus. Ein Farbverlauf im `background`
   allein reicht dafuer nicht — der Rahmen bliebe stehen. Deshalb liegen
   Hintergrund, Rahmen und Blur auf einer eigenen Ebene (::before), die per
   Maske verblasst; der Inhalt darueber bleibt voll deckend.
   `border-color:transparent` statt `border:0`, damit die Kachel ihre
   Abmessungen behaelt; `inset:-1px` legt die Ebene deckungsgleich darueber. */
.card.dist{
  padding-top: 0;
  background:none;border-color:transparent;backdrop-filter:none;
  -webkit-backdrop-filter:none;
  /* Wo der Verlauf voll deckend ist: Unterkante der Entfernungsangabe.
     1px Rahmen + 22px Innenabstand + 56px Zeilenhoehe (= .dist .val) = 79px.
     Bewusst aus dem Layout gerechnet und nicht aus den Schriftmetriken (die
     Glyphen-Unterkante liegt je nach Systemschrift bei ~84px). */
  --fade:79px;
}
/* Der Inhalt wird mit-positioniert, damit er NACH dem ::before gezeichnet wird.
   Kein z-index:-1 und kein isolation: beides waere hier fatal — `isolation`
   macht die Karte zur backdrop root, dann verwischt backdrop-filter nur noch
   den (leeren) Karteninhalt statt des Seitenhintergrunds, und der Milchglas-
   Effekt ist weg. */
.card.dist > *{position:relative}
.card.dist::before{
  content:"";position:absolute;inset:-1px;pointer-events:none;
  border:1px solid var(--line);border-radius:inherit;background:var(--card);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade));
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fade));
}
.dist .val{font-size:56px;font-weight:800;line-height:1;letter-spacing:-.02em}
.dist .unit{font-size:22px;font-weight:600;color:var(--muted);margin-left:4px}
.dist .sub{margin-top:8px;font-size:14px;color:var(--muted)}
.logo{width: clamp(120px,42vw,220px);margin: 2px auto 1rem;display:block}
.logo svg{width:100%;height:auto;display:block;overflow:visible}
.logo svg path{fill:url(#logograd)}
/* Nur die Kompassnadel dreht sich, um ihre eigene Mitte im Herzen */
#needle{transform-box:fill-box;transform-origin:center;transition:transform .7s ease}
.people{display:flex;/* gap:10px; */margin-top:22px}
/* min-width:0 ist der eigentliche Fix: ohne das wird ein Flex-Element nie
   schmaler als sein laengstes Wort — ein Ortsname wie „Stadtgebiet Bremen"
   schob die Kacheln sonst ueber den rechten Bildschirmrand hinaus. */
.p{
  flex:1;
  min-width:0;
  /* background:rgba(255,255,255,.04);
  border:1px solid var(--line); 
  border-radius:14px;*/
  padding:12px;
  text-align:center;
  position:relative
  }

.p#pMe {
  border-right: 1px solid #ffffff40;
  padding-right:22px;
}
.p#pOther {
  border-left: 1px solid #000000;
}

/* Kachel mit bekanntem Standort laesst sich antippen -> Karten-Popup */
.p.tap{cursor:pointer;-webkit-tap-highlight-color:transparent}
.p.tap:active{background:rgba(255,255,255,.08);transform:translateY(1px)}
.p.tap:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
/* Kleines Karten-Zeichen als Hinweis; nur sichtbar, wenn es etwas zu zeigen gibt.
   Das SVG zeichnet mit currentColor, faerbt sich also ueber `color` mit. */

.p .mapicon {
  position:absolute;
  top:12px;
  right:10px;
  width:14px;
  height:14px;
  color: #fff;
  opacity:.75;
  display:none
}

.p#pMe .mapicon {
  right:20px;
}

.p .mapicon svg{width:100%;height:100%;display:block}
.p.tap .mapicon{display:block}
.p .nm{font-weight:700;font-size:14px}
.p .co{font-size:11px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere}
.p .pl{font-size:12px;color:var(--fg);opacity:.85;margin-top:1px;overflow-wrap:anywhere;
  hyphens:auto}
.p .st{font-size:12px;color:var(--muted);margin-top:2px}
.p .dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#64748b;margin-right:5px;vertical-align:1px}
.p.on .dot{background:var(--good);box-shadow:0 0 0 3px rgba(52,211,153,.18)}
/* Button — „Liquid Glass".
   Das Material ist nicht einfach Milchglas, sondern eine Scheibe mit Dicke.
   Vier Zutaten machen das aus:
   1. der Hintergrund wird verwischt UND gesaettigt (`saturate` ist der halbe
      Effekt — ohne das wirkt die Scheibe grau statt lebendig),
   2. der Markenverlauf liegt nur noch getoent darunter, nicht mehr deckend,
   3. Glanz oben und Lichtkanten rundum geben die Kante (als Verlaufsebenen im
      `background`, NICHT als ::after — eine Ebene ueber dem Inhalt wuerde die
      Schrift ausbleichen; Hintergruende malt der Browser immer unter den Text),
   4. ein Schatten nach aussen, damit die Scheibe ueber der Seite schwebt. */
.btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  border:0;
  border-radius: 100em;
  padding:16px;
  font-size:16px;
  font-weight:700;
  color:var(--fg);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  background:
    linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 52%),
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03)),
    linear-gradient(100deg,rgba(244,114,182,.62),rgba(96,165,250,.62)),
    /* Abdunkelnde Ebene ganz unten (die HIG nennt ~35 % fuer helle
       Hintergruende): sie liegt UNTER der Toenung, daempft also nur das, was
       durchscheint. Auf dunklem Grund faellt sie nicht auf, auf einem hellen
       Foto rettet sie den Kontrast der Schrift. */
    linear-gradient(rgba(2,6,23,.46),rgba(2,6,23,.46));
  /* Werte aus der HIG-Vorlage fuer die Variante „Regular": Unschaerfe 20-40 px,
     Saettigung 1,2-1,5x, Deckkraft der Toenung 0,6-0,8. Mehr Saettigung sieht
     zuerst schicker aus, faerbt aber den Hintergrund sichtbar um. */
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.20),
    0 8px 22px rgba(2,6,23,.34);
  text-shadow:0 1px 2px rgba(2,6,23,.35);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),
             box-shadow .18s ease, filter .18s ease;
  }
/* Glas reagiert auf Beruehrung: es gibt leicht nach und wird heller. */
.btn:active{
  transform:scale(.975);
  filter:brightness(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 0 0 1px rgba(255,255,255,.26),
    0 3px 10px rgba(2,6,23,.3);
}
.btn:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.btn[disabled]{opacity:.6}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:active{transform:none}
}
/* „Transparenz reduzieren" (Bedienungshilfe in iOS/macOS): dann kein Glas,
   sondern deckende Flaechen — in genau den Farben, die das Glas ueber dunklem
   Grund ergibt, damit sich die Seite nicht verstellt. */
@media (prefers-reduced-transparency:reduce){
  .btn{
    background:linear-gradient(100deg,#a3689a,#5f7db0);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .btn2{background:#243146}
}
/* Zeichen im Knopf (map-pin, heart) — inline-SVG statt Emoji, damit es die
   Textfarbe annimmt. Groesse in em, also mit der clamp()-Schrift der
   Zweierzeile mitwachsend; flex:none, damit es beim Umbruch nicht schrumpft. */
.btn .ico{flex:none;width:1.15em;height:1.15em}
.btn .ico svg{width:100%;height:100%;display:block}
/* Zweitrangiger Knopf ("Home-Bildschirm") — dieselbe Scheibe, nur ungetoent
   und flacher: der Markenverlauf bleibt den beiden Hauptknoepfen vorbehalten. */
.btn2{
  margin-top:10px;font-weight:600;
  background:
    linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0) 52%),
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 6px 16px rgba(2,6,23,.28);
}
.btn2[hidden]{display:none}
/* Zusatz-Schalter ganz unten. margin-top:auto schiebt den Block ans Seitenende,
   solange Platz da ist (body ist ein Flex-Spalten-Layout). */
.tools{
  margin-top:auto;
  padding: 1rem 0 2rem 0;
}
.row2{display:flex;gap:8px}
/* In der Zweierzeile teilen sich die Knöpfe die Breite; min-width:0 lässt sie
   auch auf 320-px-Geräten schmaler werden als ihre Beschriftung. */
.row2 .btn{flex:1;min-width:0;margin-top:0;padding:14px 6px;line-height:1.3;
  /* mit der Breite mitwachsen: bei 320 px bliebe „Home-Bildschirm" sonst
     zweizeilig, ab ~360 px passt es einzeilig. Umbruch bleibt als Notnagel
     erlaubt, damit nie etwas herausragt. */
  font-size:clamp(12px,3.9vw,14px)}
/* „Push mich" ist ein Schalter im iOS-Look statt eines Knopfes: er nimmt nur
   seine eigene Breite ein (flex:0 0 auto) und steht links in der Zeile, der
   Home-Bildschirm-Knopf fuellt als einziger .btn den Rest. Fehlt einer von
   beiden, sieht die Zeile trotzdem richtig aus. */
.tools .row2{align-items:center}
.sw{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:8px 2px;border:0;background:none;color:var(--fg);cursor:pointer;
  font:inherit;font-weight:600;font-size:clamp(12px,3.9vw,14px);line-height:1.3;
  -webkit-tap-highlight-color:transparent}
.sw[hidden]{display:none}
.sw:disabled{opacity:.6}
.sw:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;border-radius:12px}
/* Masse wie bei iOS, nur eine Spur kleiner. Der Knopf sitzt 2 px innerhalb der
   Bahn; sein Weg ist deshalb 44 (Innenbreite) - 22 (Knopf) - 2 = 20 px. */
.swtrack{position:relative;flex:none;width:46px;height:28px;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid var(--line);
  /* dasselbe Milchglas wie die Karten (.card) — nur so passt der eingeschaltete
     Zustand zum Rest der Seite, statt als einzige Farbe herauszustechen. */
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .22s ease,border-color .22s ease}
.swknob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(2,6,23,.55),0 0 0 .5px rgba(2,6,23,.18);
  transition:transform .22s cubic-bezier(.3,.9,.3,1)}
/* Eingeschaltet: milchig weiss statt gruen. Den Zustand traegt damit allein die
   Stellung des Knopfes (und aria-checked) — kein Verlass auf Farbe, was der
   Bedienungshilfen-Leitlinie sogar entgegenkommt. Der Knopf bleibt durch
   Deckkraft und Schatten vom Gleis unterscheidbar. */
.sw.on .swtrack{background:rgba(255,255,255,.38);border-color:rgba(255,255,255,.45)}
.sw.on .swknob{transform:translateX(20px)}
.sw:active .swknob{transform:scale(1.04)}
.sw.on:active .swknob{transform:translateX(20px) scale(1.04)}
@media (prefers-reduced-motion:reduce){
  .swtrack,.swknob{transition:none}
}
.hint{font-size:12px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.45}
.hint[hidden]{display:none}
.live{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:12px;
  font-size:13px;
  color:var(--muted);
  display: none;
  }
.live input{width:18px;height:18px;accent-color:var(--accent)}
.msg{font-size:13px;color:var(--muted);text-align:center;min-height:18px;padding-top: 1rem;}
.foot{text-align:center;font-size:11px;color:var(--muted);opacity:.7}
.brand{margin:auto;text-align:center;font-size:34px;font-weight:800;letter-spacing:-.01em;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
a{color:var(--accent2)}
.setup .btn{max-width:none}
.setup input{width:100%;padding:14px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--fg);font-size:16px;margin-bottom:12px}

/* ---- Karten-Popup (Leaflet + OpenStreetMap-Kacheln) ---- */
body.noscroll{overflow:hidden}
.mapwrap{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  background:rgba(2,6,23,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.mapwrap[hidden]{display:none}
.mapbox{
  width:100%;max-width:520px;background:var(--bg2);border:1px solid var(--line);
  border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.maphead{display:flex;align-items:flex-start;gap:10px;padding:14px 14px 12px 18px}
.mapttl{flex:1;min-width:0}
.mapname{font-weight:700;font-size:16px}
.mapsub{font-size:12px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere;line-height:1.4}
.mapx{
  flex:0 0 auto;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.08);color:var(--fg);font-size:22px;line-height:1;
}
.mapx:active{transform:translateY(1px)}
/* Feste Hoehe statt Seitenverhaeltnis: so bleibt das Popup auf flachen und
   hohen Geraeten gleich gut bedienbar und passt immer auf den Schirm. */
.mapfr{position:relative;width:100%;height:min(58vh,420px);background:var(--bg1)}
/* Ladehinweis liegt ueber der Karte, aber unter Leaflets Bedienelementen (800) */
.mapload{position:absolute;inset:0;z-index:700;display:flex;align-items:center;
  justify-content:center;font-size:13px;color:var(--muted)}
.mapload[hidden]{display:none}
.mapfoot{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 16px}
.mapboth{border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--fg);
  border-radius:12px;padding:8px 12px;font-size:13px;font-weight:600;cursor:pointer}
.mapboth:active{transform:translateY(1px)}
.mapboth[hidden]{display:none}
.maplink{font-size:13px;text-decoration:none}
/* Leaflet an den dunklen Look anpassen (Standard ist hell) */
.leaflet-container{background:var(--bg1);font:inherit}
.leaflet-bar a,.leaflet-bar a:hover{background:var(--bg2);color:var(--fg);
  border-bottom-color:var(--line)}
.leaflet-bar a:hover{background:#26344a}
.leaflet-bar{border:1px solid var(--line);box-shadow:none}
.leaflet-control-attribution{background:rgba(15,23,42,.78);color:var(--muted);font-size:10px}
.leaflet-control-attribution a{color:var(--accent2)}
/* Namensschild ueber der Nadel */
.maptip{background:rgba(15,23,42,.9);border:1px solid var(--line);color:var(--fg);
  font-size:12px;font-weight:600;padding:3px 8px;border-radius:9px;box-shadow:none}
.maptip::before{border-top-color:var(--line)}

/* ---- Hintergrundbilder (links die eigene Person, rechts die andere) ---- */
/* z-index:-1 zeichnet ueber dem Seitenverlauf (der liegt als Canvas-Hintergrund
   ganz unten), aber unter allem Inhalt. */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none}
/* Die Haelften sind mit Absicht breiter als 50 % und blenden zur Mitte hin aus:
   sie ueberlappen dort und gehen ineinander ueber. Stumpf nebeneinander gesetzt
   entstuende mitten im Bild eine harte Kante — bei dieser Weichzeichnung sieht
   das wie ein Fehler aus. Wer die klare Trennung lieber mag: Breite auf 50 %
   und die beiden mask-image-Zeilen entfernen. */
.bgh{position:absolute;top:0;bottom:0;width:54%;overflow:hidden}
.bgh:first-child{left:0;
  -webkit-mask-image:linear-gradient(to right,#000 78%,transparent 100%);
  mask-image:linear-gradient(to right,#000 78%,transparent 100%)}
.bgh:last-child{right:0;
  -webkit-mask-image:linear-gradient(to left,#000 78%,transparent 100%);
  mask-image:linear-gradient(to left,#000 78%,transparent 100%)}
/* Das Bild sitzt auf einer eigenen Ebene, die ueber den Rand hinausragt
   (inset:-14%): sonst franst die Weichzeichnung an der Mittelnaht und an den
   Raendern sichtbar aus, weil dort nichts mehr zum Verwischen da ist. */
.bgh i{position:absolute;inset:-14%;display:block;background-size:cover;
  background-position:center;filter:blur(48px) saturate(1.15);
  opacity:0;transition:opacity .6s ease}
.bgh i.on{opacity:.85}
/* Schleier darueber, damit die Schrift auf jedem Foto lesbar bleibt — nur wenn
   ueberhaupt ein Foto da ist (.has), sonst wuerde er den Seitenverlauf
   unnoetig abdunkeln. */
.bg.has::after{
  content:"";
  position:absolute;
  inset:0;
  /* background:linear-gradient(180deg,rgba(15,23,42,.4),rgba(15,23,42,.68)); */
  }
/* Runder Knopf oben rechts */
.bgbtn{position:fixed;z-index:40;top:max(12px,env(safe-area-inset-top));right:14px;
  width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--fg);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center}
.bgbtn svg{width:20px;height:20px;display:block}
.bgbtn:active{transform:translateY(1px)}
.bgbtn[disabled]{opacity:.5}

/* Menue am runden Knopf — nachgebaut nach dem Menue von iOS: milchige,
   uebersaettigte Scheibe, Eintraege von Rand zu Rand mit Haarlinie dazwischen,
   Zeichen links, loeschender Eintrag rot.
   Es folgt der Systemeinstellung hell/dunkel, genau wie ein echtes iOS-Menue —
   die App selbst bleibt dunkel, das Menue liegt ja nur kurz darueber. */
.bgmenu{
  --mfg:#000; --mbg:rgba(250,250,250,.72); --msep:rgba(0,0,0,.11);
  --mpress:rgba(0,0,0,.07); --mred:#d70015;
  position:fixed;z-index:41;right:14px;
  top:calc(max(12px,env(safe-area-inset-top)) + 52px);
  min-width:224px;max-width:calc(100vw - 28px);
  padding:0;border-radius:14px;overflow:hidden;
  background:var(--mbg);
  /* Die Saettigung ist der halbe Effekt — ohne sie wirkt die Scheibe grau. */
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 12px 40px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.16);
  /* Waechst aus dem Knopf heraus, an dem es haengt. */
  transform-origin:top right;animation:menuIn .17s cubic-bezier(.2,.9,.3,1.06)}
@media (prefers-color-scheme:dark){
  .bgmenu{--mfg:#fff; --mbg:rgba(40,40,42,.72); --msep:rgba(255,255,255,.13);
          --mpress:rgba(255,255,255,.11); --mred:#ff453a}
}
@keyframes menuIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bgmenu{animation:none}}
.bgmenu[hidden]{display:none}
/* Kein Innenabstand am Menue, kein Radius an den Eintraegen: der Druck-Schimmer
   laeuft wie bei iOS von Kante zu Kante. */
.bgmenu button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:0;background:none;color:var(--mfg);font:inherit;font-size:17px;
  letter-spacing:-.01em;padding:12px 16px;min-height:48px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.bgmenu button+button{border-top:.5px solid var(--msep)}
.bgmenu button span{flex:1}
/* 1,8 statt der 2 aus den Feather-Dateien: SF Symbols zeichnen duenner. */
.bgmenu button svg{width:21px;height:21px;flex:none;display:block;stroke-width:1.8}
.bgmenu button.destr{color:var(--mred)}
.bgmenu button:active:not(:disabled){background:var(--mpress)}
@media (hover:hover){.bgmenu button:hover:not(:disabled){background:var(--mpress)}}
.bgmenu button:disabled{opacity:.3;cursor:default;background:none}
/* Der Loesch-Eintrag traegt beide Zeichen; sichtbar ist immer nur eines. */
.bgmenu .swap svg:last-of-type{display:none}
.bgmenu .swap.zurueck svg:first-of-type{display:none}
.bgmenu .swap.zurueck svg:last-of-type{display:block}
/* ---- Lightbox: die aktuellen Hintergrundbilder ---- */
.lbwrap{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  background:rgba(2,6,23,.8);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.lbwrap[hidden]{display:none}
.lbbox{position:relative;width:100%;max-width:420px;background:var(--bg2);
  border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
/* Wischen macht scroll-snap; die Leiste selbst bleibt unsichtbar. */
.lbtrack{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.lbtrack::-webkit-scrollbar{display:none}
.lbslide{flex:0 0 100%;scroll-snap-align:center;position:relative}
.lbslide img{display:block;width:100%;height:min(52vh,380px);object-fit:cover;
  background:var(--bg1)}
.lbcap{position:absolute;left:0;right:0;bottom:0;padding:22px 16px 12px;font-size:14px;
  font-weight:600;background:linear-gradient(to top,rgba(2,6,23,.8),transparent)}
.lbdots{display:flex;gap:7px;justify-content:center;padding:12px}
.lbdots[hidden]{display:none}
.lbdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);
  transition:background .2s}
.lbdots i.on{background:var(--fg)}
.lbx{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;
  border:0;border-radius:50%;cursor:pointer;background:rgba(2,6,23,.6);color:var(--fg);
  font-size:22px;line-height:1;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lbx:active{transform:translateY(1px)}
/* Album-Foto nach einem Knutschanfall: ganzes Bild statt Ausschnitt. Die Fotos
   sind Hochformat (1440x1920) — mit dem cover-Zuschnitt der Hintergrundbilder
   waere davon nur ein Streifen aus der Mitte zu sehen. */
.lbwrap.foto .lbslide img{height:min(70vh,560px);object-fit:contain}

/* Herzchen-Flug — die Quittung fuer einen abgeschickten Knutschanfall.
   Der Behaelter liegt fest ueber der Seite, faengt aber keine Tipps ab.
   Jedes Herz bekommt Groesse, Startpunkt, Drift (--dx), Neigung (--rot),
   Dauer und Verzoegerung per JS; ohne Streuung saehe es aus wie ein Raster. */
.hearts{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.hearts .heart{position:absolute;display:block;opacity:0;
  animation-name:heartUp;animation-timing-function:cubic-bezier(.25,.6,.3,1);
  animation-fill-mode:forwards}
.hearts .heart svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 2px 6px rgba(244,114,182,.45))}
@keyframes heartUp{
  0%   {opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(0deg)}
  12%  {opacity:1;transform:translate(-50%,-60%) scale(1) rotate(calc(var(--rot,0deg)/4))}
  100% {opacity:0;
        transform:translate(calc(-50% + var(--dx,0px)),calc(-50% - 62vh)) scale(.85) rotate(var(--rot,0deg))}
}
/* Wer weniger Bewegung eingestellt hat, bekommt statt des Flugs ein Aufblenden
   an Ort und Stelle — ganz ohne Rueckmeldung bliebe der Knopf sonst stumm. */
@media (prefers-reduced-motion:reduce){
  .hearts .heart{animation-name:heartFade}
  @keyframes heartFade{
    0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}
    30%,60%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  }
}

/* Fehler-Modal. Erfolge zeigen sich in Bewegung; Fehler brauchen Worte —
   und die sollen nicht in der grauen Zeile unter den Knoepfen untergehen. */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
  background:rgba(2,6,23,.8);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal[hidden]{display:none}
.modalbox{width:100%;max-width:360px;background:var(--bg2);border:1px solid var(--line);
  border-radius:22px;padding:24px 22px;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.modaltitle{font-size:17px;font-weight:700}
.modaltext{margin-top:8px;font-size:14px;line-height:1.5;color:var(--muted);
  overflow-wrap:anywhere}
.modalbox .btn{margin-top:20px}

/* ---- Startseite ohne Namen: Logo + Marke, mittig ----
   Die Klammer traegt das vertikale Zentrieren (margin:auto im Flex-Body); das
   margin:auto an .brand allein wuerde darin nur noch waagerecht wirken. */
.start{margin:auto;text-align:center}
.start .logo{margin-bottom:18px}