/* ============================================================
   Sims Nachbarschafts-Archiv — Frontend (verspielter Look)
   Vanilla CSS, kein Framework. Akzentfarbe via --plumb (aus Settings).
   ============================================================ */
:root{
  --grass-1:#7ed957; --grass-2:#74d04d; --grass-d:#57b73a; --grass-edge:#86c98f;
  --plumb:#19d36b; --plumb-d:#0fb85c; --plumb-l:#5cf0a0;
  --sky-1:#bdeaff; --sky-2:#8fd6ff; --sky-3:#e8f8ff;
  --ink:#26303a; --ink-soft:#5a6b78;
  --card:#fff; --cream:#fff8ec;
  /* Tafel-Flaechen statt Weiss: eine Tafel hat eine Kante und eine Lichtkante,
     dadurch sitzt sie auf der Seite, statt ueber ihr zu schweben.
     Die Toene werden aus der Akzentfarbe gemischt, damit sie mitziehen, wenn
     im Admin-Bereich eine andere Akzentfarbe eingestellt wird. Die festen
     Werte darueber sind der Rueckfall fuer Browser ohne color-mix. */
  --tafel:#f4faf6; --tafel-2:#eaf5ee; --tafel-3:#dfeee5;
  --kante:#c8e2d2; --kante-d:#a4cdb5; --licht:rgba(255,255,255,.92);
  --tafel:color-mix(in srgb, var(--plumb) 5%, #fff);
  --tafel-2:color-mix(in srgb, var(--plumb) 9%, #fff);
  --tafel-3:color-mix(in srgb, var(--plumb) 15%, #fff);
  --kante:color-mix(in srgb, var(--plumb) 26%, #fff);
  --kante-d:color-mix(in srgb, var(--plumb) 42%, #fff);
  --pink:#ff6fae; --orange:#ffa53c; --berry:#c0245f; --blue:#4fc3f7;
  --shadow:0 14px 30px -12px rgba(40,70,50,.45);
  --shadow-sm:0 6px 14px -6px rgba(40,70,50,.35);
  /* Dezente Schlagschatten für Flächen auf dem Himmel (Lesbarkeit): Tafeln/Kacheln, Reiter/Knöpfe */
  --schatten:0 6px 16px -9px rgba(40,70,50,.32);
  --schatten-klein:0 3px 8px -5px rgba(40,70,50,.28);
  --schatten-hoch:0 12px 24px -12px rgba(40,70,50,.40);
  --r:22px;
  /* Der Radius sagt, was ein Bauteil ist: Tafel, Kachel, Knopf, Pille. */
  --r-tafel:14px; --r-kachel:10px; --r-knopf:10px; --r-pille:999px;
  --display:'Fredoka',system-ui,sans-serif; --body:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* ── Rollbalken ────────────────────────────────────────────────
   Kein einzelner Weg reicht für alle Browser, deshalb zwei — und zwar
   getrennt, nicht übereinander:

   • scrollbar-width / scrollbar-color ist der Standard. Firefox kann nur
     das, und auch nur Farbe und „dünn oder normal" — keine Rundung.
   • ::-webkit-scrollbar ist die ältere Schreibweise und erlaubt mehr
     (Rundung, Rand, eigener Hover).

   Setzt man beides gleichzeitig, gewinnt in neueren Chromium-Fassungen der
   Standard und die feinere Gestaltung fällt weg. Die Abfragen unten sorgen
   dafür, dass jeder Browser genau einen Weg bekommt. Wo keiner greift,
   bleibt der Rollbalken des Systems — die Seite bleibt also überall
   bedienbar.

   Absichtlich NICHT ausgeblendet: ein unsichtbarer Balken lässt sich mit
   der Maus nicht mehr greifen. Er ist nur schmal und ruhig. */
:root{
  --roll-daumen:color-mix(in srgb, var(--plumb) 42%, #c2d9cb);
  --roll-daumen-hover:var(--plumb-d);
  --roll-spur:color-mix(in srgb, var(--plumb) 6%, #fff);
}

/* Am FENSTER faellt der Balken des Browsers weg - app.js baut dort einen
   eigenen. In allen anderen Bereichen (Fenster, Listen, Stammbaum) bleibt der
   des Systems, nur schmal und in den Farben der Seite: dort einen eigenen zu
   bauen waere viel Arbeit fuer wenig Gewinn. */
html{scrollbar-width:none}
html::-webkit-scrollbar{width:0;height:0}
@supports (scrollbar-color: red blue) and (not selector(::-webkit-scrollbar)){
  body,.backdrop,.modal,.simlist,.tree-scroll,.feed,.timeline,
  .emoji-fenster,.langtext,.note-box{
    scrollbar-width:thin;scrollbar-color:var(--roll-daumen) var(--roll-spur)}
}

/* Safari, Chrome, Edge, Opera */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{width:11px;height:11px;background:transparent}
  ::-webkit-scrollbar-track{background:var(--roll-spur);border-radius:999px}
  ::-webkit-scrollbar-thumb{
    background:var(--roll-daumen);border-radius:999px;
    /* Der Rand in Spurfarbe lässt den Daumen schmaler wirken, ohne dass die
       Greiffläche kleiner wird. */
    border:3px solid var(--roll-spur);background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background:var(--roll-daumen-hover);background-clip:padding-box}
  ::-webkit-scrollbar-thumb:active{background:var(--plumb-d);background-clip:padding-box}
  ::-webkit-scrollbar-corner{background:var(--roll-spur)}
}

/* Der eigene Balken am rechten Rand. Er schwebt ueber dem Inhalt, nimmt also
   keine Breite weg, und zeigt sich nur beim Rollen oder wenn die Maus in die
   Naehe kommt. app.js legt ihn an und blendet ihn wieder aus. */
.sroll{position:fixed;top:8px;right:4px;bottom:8px;width:12px;z-index:75;
  display:none;opacity:0;transition:opacity .25s;
  border-radius:999px}
.sroll.an{display:block}
.sroll.sichtbar{opacity:1}
.sroll.zieht{opacity:1}
.sroll::before{content:'';position:absolute;inset:0;border-radius:999px;
  background:color-mix(in srgb, var(--plumb) 8%, #fff);opacity:.55}
.sroll-d{position:absolute;left:2px;right:2px;top:0;border-radius:999px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--plumb) 70%, #fff),
    color-mix(in srgb, var(--plumb) 95%, #7fc9a2));
  border:1px solid color-mix(in srgb, var(--plumb-d) 45%, #fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 4px -1px rgba(30,70,50,.4);
  cursor:var(--c-greifen)}
.sroll:hover .sroll-d{background:linear-gradient(180deg,
    color-mix(in srgb, var(--plumb) 85%, #fff),var(--plumb-d))}
.sroll.zieht .sroll-d{cursor:var(--c-greifen-zu);background:var(--plumb-d)}
/* Kein Zeiger im Spiel: dann baut app.js ihn gar nicht erst, und der Balken
   des Systems bleibt sichtbar. */
@media(pointer:coarse){
  html{scrollbar-width:auto}
  html::-webkit-scrollbar{width:auto}
  .sroll{display:none!important}
}

body{font-family:var(--body);color:var(--ink);min-height:100vh;overflow-x:hidden;
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-3) 38%,#eafbe4 100%);}
button{font-family:inherit;cursor:var(--c-hand);border:none;background:none;color:inherit}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--plumb-l)}

/* Sichtbarer Fokus. Ohne den ist die Seite mit der Tastatur nicht bedienbar,
   und die Balkenzeilen der Volkszaehlung sind ausdruecklich Knoepfe. */
:focus-visible{outline:3px solid var(--plumb-d);outline-offset:2px;border-radius:6px}

/* Icons: der Satz aus icons.js. Sie nehmen die Farbe des Textes an, in dem sie
   stehen, damit sie sich nicht gegen die Umgebung stellen. */
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em}
.section-h .ic{width:1.1em;height:1.1em;color:var(--plumb-d)}
.tab .ic{width:1.2em;height:1.2em}
.chip .ic,.tag .ic{width:1em;height:1em;margin-right:.1rem}
.avatar .ic.platzhalter{width:44%;height:44%;color:#8fb3a0}
.modal .av .ic.platzhalter{width:46%;height:46%;color:#8fb3a0}
.modal .x .ic,.lb-x .ic,.pwa-x .ic{width:1.05em;height:1.05em}
.rel-line .badge .ic{width:.95em;height:.95em}

/* Kurzinfo beim Ueberfahren. Der Browser haette dafuer seinen eigenen grauen
   Kasten; app.js schreibt title auf data-tip um, und hier steht, wie er
   aussieht. */
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{
  content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + .4rem);
  transform:translateX(-50%);z-index:90;pointer-events:none;
  width:max-content;max-width:min(250px,60vw);white-space:normal;text-align:left;
  background:rgba(24,48,38,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;font-family:var(--body);font-size:.76rem;font-weight:800;line-height:1.35;
  padding:.42rem .65rem;border-radius:var(--r-knopf);
  border:1px solid rgba(255,255,255,.22);box-shadow:var(--shadow-sm);
  animation:tipauf .12s ease-out}
@keyframes tipauf{from{opacity:0;transform:translate(-50%,3px)}
                  to{opacity:1;transform:translateX(-50%)}}
/* Ganz oben ist ueber dem Element kein Platz - dort klappt die Kurzinfo nach
   unten auf, sonst schnitte der Fensterrand sie ab. */
.topbar [data-tip]:hover::after,.topbar [data-tip]:focus-visible::after,
.modal .x[data-tip]:hover::after{top:calc(100% + .4rem);bottom:auto;
  animation-name:tipab}
@keyframes tipab{from{opacity:0;transform:translate(-50%,-3px)}
                 to{opacity:1;transform:translateX(-50%)}}
/* Der Beta-Knopf sitzt ganz rechts aussen: die Kurzinfo richtet sich dort an
   seiner rechten Kante aus, sonst laeuft sie aus dem Fenster. */
.beta-badge[data-tip]:hover::after,.beta-badge[data-tip]:focus-visible::after{
  left:auto;right:0;transform:none;animation-name:tipab-rechts}
@keyframes tipab-rechts{from{opacity:0;transform:translateY(-3px)}
                        to{opacity:1;transform:none}}

/* Auf dem Handy gibt es kein Ueberfahren; dort waere der Kasten nur im Weg. */
@media(hover:none){[data-tip]:hover::after{content:none}}
@media (prefers-reduced-motion:reduce){[data-tip]:hover::after{animation:none}}

/* clouds */
.sky-deco{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cloud{position:absolute;background:#fff;border-radius:50%;opacity:.7;
  box-shadow:40px 10px 0 -4px #fff,80px 0 0 -10px #fff,-30px 8px 0 -6px #fff}
.cloud.c1{width:90px;height:34px;top:9%;left:-160px;animation:drift 50s linear infinite}
.cloud.c2{width:64px;height:26px;top:22%;left:-160px;animation:drift 70s linear infinite 8s}
.cloud.c3{width:120px;height:40px;top:5%;left:-220px;animation:drift 88s linear infinite 20s}
@keyframes drift{to{transform:translateX(120vw)}}

.app{position:relative;z-index:1;max-width:1320px;margin:0 auto;
  padding:0 clamp(1rem,2.5vw,2rem) 5rem;
  padding-left:max(clamp(1rem,2.5vw,2rem),env(safe-area-inset-left,0px));
  padding-right:max(clamp(1rem,2.5vw,2rem),env(safe-area-inset-right,0px))}

/* topbar */
.topbar{display:flex;align-items:center;gap:1rem;padding:1.1rem .4rem 1rem;flex-wrap:wrap}
/* Erster Besuch: Vorgabetexte verdecken, bis die Texte aus der DB da sind (app.js, Init) */
.laedt #brandName,.laedt #tabs,.laedt #footer{visibility:hidden}
.laedt #search::placeholder{color:transparent}
.brand{display:flex;align-items:center;gap:.6rem;cursor:var(--c-hand)}
.plumbob{width:26px;height:26px;background:linear-gradient(135deg,var(--plumb-l),var(--plumb-d));
  clip-path:polygon(50% 0,100% 38%,50% 100%,0 38%);filter:drop-shadow(0 0 8px rgba(25,211,107,.7));
  animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(8deg)}}
.brand .nm{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.01em}
.brand .nm b{color:var(--plumb-d)}
.search-box{margin-left:auto;position:relative;display:flex;align-items:center}
.search-box input{font-family:inherit;font-weight:700;border:1.5px solid var(--kante);background:var(--tafel);
  border-radius:999px;padding:.6rem 1.1rem .6rem 2.3rem;width:230px;transition:.2s;color:var(--ink);outline:none;
  box-shadow:var(--schatten-klein)}
.search-box input:focus{width:290px;background:#fff;border-color:var(--plumb)}
.search-box .mag{position:absolute;left:.8rem;opacity:.5;pointer-events:none}

/* Live-Anzeige neben der Suche. Drei Zustaende: live, offline, und "wissen wir
   nicht" (keine Zugangsdaten hinterlegt oder Twitch nicht erreichbar) — dann
   steht dort nur der Link, ohne Aussage. */
.live-badge{display:inline-flex;align-items:center;gap:.4rem;flex:none;
  padding:.44rem .85rem;border-radius:var(--r-pille);font-weight:800;font-size:.84rem;
  background:var(--tafel);border:1.5px solid var(--kante);color:var(--ink-soft);
  box-shadow:inset 0 1px 0 var(--licht),var(--schatten-klein);transition:.18s;text-decoration:none}
.live-badge:hover{border-color:#9146FF;color:#9146FF}
.beta-badge{display:inline-flex;align-items:center;flex:none;text-decoration:none;
  padding:.44rem .85rem;border-radius:var(--r-pille);font-weight:800;font-size:.84rem;
  background:var(--tafel);border:1.5px solid var(--kante);color:var(--ink-soft);
  box-shadow:inset 0 1px 0 var(--licht),var(--schatten-klein);transition:.18s}
.beta-badge:hover{border-color:var(--plumb);color:var(--plumb-d)}
/* „Interesse?" neben dem Beta-Knopf: Karte beim Überfahren oder Fokus, am Handy führt der Tipp direkt zur Seite */
.interesse-wrap{position:relative;display:inline-flex;flex:none}
/* Nur mit offener Karte ganz nach oben, sonst läge der Knopf über verschobenen Fenstern (Weitere Kandidaten) */
.interesse-wrap:hover,.interesse-wrap:focus-within{z-index:80}
.interesse-karte{position:absolute;top:calc(100% + .5rem);right:0;width:min(19rem,80vw);
  padding:.75rem .9rem;border-radius:var(--r-knopf);text-align:left;
  background:rgba(24,48,38,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);   /* wie die Kurzinfos ([data-tip]) */
  border:1px solid rgba(255,255,255,.22);box-shadow:var(--shadow-sm);
  color:#fff;font-family:var(--body);font-size:.8rem;font-weight:700;line-height:1.45;
  display:none}   /* unsichtbar gar nicht gezeichnet, sonst verbreitert sie schmale Seiten */
.interesse-karte.links{right:auto;left:0}   /* gruss.js: Knopf steht links in der Kopfzeile */
.interesse-karte b{display:block;font-family:var(--display);font-size:1rem;margin-bottom:.25rem}
.interesse-mehr{display:block;margin-top:.45rem;font-weight:800;color:var(--plumb-l);text-decoration:none}
.interesse-mehr:hover,.interesse-mehr:focus-visible{text-decoration:underline}
.interesse-karte::before{content:"";position:absolute;left:0;right:0;top:-.6rem;height:.6rem}   /* Brücke über die Lücke, sonst verschwindet die Karte auf dem Weg dorthin */
.interesse-wrap:hover .interesse-karte,.interesse-wrap:focus-within .interesse-karte{display:block;animation:tipab-rechts .15s ease-out}
@media(hover:none){.interesse-karte{display:none}}
.live-badge .ic{width:1.1em;height:1.1em}
.live-badge.unbekannt .lbl{color:var(--ink-soft)}
.live-badge.ist-live{background:#9146FF;border-color:#7a33e0;color:#fff;
  box-shadow:0 2px 10px -2px rgba(145,70,255,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.live-badge.ist-live:hover{background:#7f33e8;border-color:#6a24d0;color:#fff}
.live-badge .punkt{width:.5rem;height:.5rem;border-radius:50%;background:#ff4d6d;flex:none;
  box-shadow:0 0 0 0 rgba(255,77,109,.7);animation:sendepause 2s ease-out infinite}
@keyframes sendepause{
  0%{box-shadow:0 0 0 0 rgba(255,77,109,.7)}
  70%{box-shadow:0 0 0 .5rem rgba(255,77,109,0)}
  100%{box-shadow:0 0 0 0 rgba(255,77,109,0)}}
@media (prefers-reduced-motion:reduce){.live-badge .punkt{animation:none}}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap}
.tab{display:flex;align-items:center;gap:.45rem;padding:.55rem 1rem;border-radius:var(--r-pille);font-weight:800;
  font-size:.92rem;color:var(--ink-soft);background:var(--tafel);transition:.18s;border:1.5px solid var(--kante);
  box-shadow:inset 0 1px 0 var(--licht),var(--schatten-klein)}
.tab:hover{border-color:var(--plumb);color:var(--plumb-d)}
.tab.active{background:var(--plumb);color:#053d22;border-color:var(--plumb-d)}
.tab .em{font-size:1.05rem}

/* crumbs */
.crumbs{display:flex;align-items:center;gap:.5rem;padding:.2rem .5rem 1rem;font-weight:800;color:var(--ink-soft);flex-wrap:wrap}
.crumbs button:hover{color:var(--plumb-d)}
.crumbs .sep{opacity:.5}
.crumbs .cur{color:var(--ink)}

/* card */
.card{background:linear-gradient(180deg,var(--tafel) 0%,var(--tafel-2) 100%);
  border-radius:var(--r-tafel);border:1.5px solid var(--kante);
  box-shadow:inset 0 1px 0 var(--licht),var(--schatten);position:relative;transition:border-color .2s,transform .2s}
.pop{transition:transform .38s cubic-bezier(.22,.61,.36,1),box-shadow .38s cubic-bezier(.22,.61,.36,1);will-change:transform}
.pop:hover{transform:translateY(-2px);border-color:var(--plumb);box-shadow:inset 0 1px 0 var(--licht),var(--schatten-hoch)}
.pop:active{transform:scale(1.005);transition-duration:.15s}
@media (prefers-reduced-motion:reduce){.pop{transition:none}}
.section-h{font-family:var(--display);font-weight:700;font-size:1.7rem;margin:.4rem .2rem 1rem;display:flex;align-items:center;gap:.5rem}
.muted{color:var(--ink-soft);font-weight:700;margin:0 .2rem 1.2rem}
.empty{padding:3rem;text-align:center;color:var(--ink-soft);font-weight:700}
/* Leere Meldung in einem Raster (Friedhof, Sims, Haustiere, News …): über die ganze
   Breite, sonst bekommt sie nur eine Kartenbreite und der Text läuft schief über */
.grid > .empty{grid-column:1/-1}

/* map */
.map-hero{text-align:center;margin:.4rem 0 1.4rem}
.map-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,5vw,3.1rem);line-height:1.04}
.map-hero p{color:var(--ink-soft);font-weight:700;max-width:560px;margin:.5rem auto 0}
/* Die Nachbarschaft als Raute: ein Raster, um 45 Grad gedreht, die Kacheln
   tragen das Foto der Welt. Die Beschriftung dreht zurueck und bleibt gerade. */
.karte{position:relative;border-radius:var(--r-tafel);overflow:hidden;border:1.5px solid var(--kante);
  background:radial-gradient(120% 95% at 50% 0%,#eafaff 0%,#cfefff 42%,#bde9c6 100%);
  height:min(76vh,640px)}
.karte .sonne{position:absolute;left:9%;top:11%;width:78px;height:78px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff7cd,#ffdf74);opacity:.9}
/* Leuchten: kleiner und großer Schein liegen fertig gezeichnet übereinander und
   werden nur überblendet (opacity, macht die Grafikkarte). Ein animierter
   drop-shadow würde in jedem Bild neu berechnet – bei 144 Hz 144-mal pro Sekunde. */
.karte .sonne::before,.karte .sonne::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:7s ease-in-out infinite}
.karte .sonne::before{filter:drop-shadow(0 0 10px rgba(255,214,90,.5));animation-name:sonne-klein}
.karte .sonne::after{filter:drop-shadow(0 0 26px rgba(255,214,90,.85));opacity:0;animation-name:sonne-gross}
@keyframes sonne-klein{50%{opacity:0}}
@keyframes sonne-gross{50%{opacity:1}}
/* Gedreht wird das Quadrat um den Faktor 1,415 hoeher als breit. Die Breite
   muss also unter Kartenhoehe/1,415 bleiben, sonst wird die oberste Kachel
   abgeschnitten. 430 x 1,415 = 608 und passt in die 640 der Karte. */
.raster{position:absolute;inset:0;margin:auto;width:min(64%,430px);height:fit-content;
  display:grid;grid-template-columns:repeat(var(--spalten,4),1fr);gap:7px;transform:rotate(45deg)}
.ort{position:relative;aspect-ratio:1;overflow:hidden;padding:0;border:1.5px solid var(--kante-d);
  border-radius:var(--r-kachel);background:linear-gradient(180deg,var(--tafel),var(--tafel-2));
  box-shadow:inset 0 1px 0 var(--licht);transition:transform .18s ease,box-shadow .18s ease;
  animation:auftauchen .5s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes auftauchen{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.ort:hover,.ort:focus-visible{transform:scale(1.07);box-shadow:0 10px 22px -8px rgba(20,60,40,.55);z-index:2}
.ort img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;--basis:rotate(-45deg) scale(1.45);transform:var(--basis)}
/* Das Schild ist gegen die Raute zurueckgedreht und war deshalb nur so breit
   wie die Kachelseite - die Raute misst an ihrer Mittellinie aber das
   1,41-fache. Der Text hatte also nur 93 statt 140 Punkten Platz und stiess
   bei langen Namen an die Kante. Seitlich ueberstehen macht daraus 134
   Punkte, ohne dass das Schild ueber die Raute hinausragt. */
.ort .schild{position:absolute;top:0;bottom:0;left:-20%;right:-20%;
  transform:rotate(-45deg);display:grid;place-items:center;
  padding:.3rem;text-align:center;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.04) 18%,rgba(18,50,34,.72) 52%)}
.ort b{display:block;font-family:var(--display);font-weight:600;font-size:.86rem;line-height:1.08;
  text-shadow:0 1px 3px rgba(0,0,0,.65)}
.ort span{font-size:.7rem;font-weight:800;opacity:.92;text-shadow:0 1px 3px rgba(0,0,0,.65)}
/* Auch die Kacheln ohne Foto tragen jetzt den Farbverlauf ihrer Welt aus dem
   Admin-Bereich. Deshalb bleibt die Beschriftung ueberall hell auf dem
   Abdunkler: das ist auf hellen wie auf dunklen Verlaeufen lesbar. */
.ort.leer{visibility:hidden}
/* Unten in die linke Ecke statt mittig: in der Mitte lag der Hinweis unter
   der Raute und schob sich bei hohen Baeumen darueber. Links ist Platz, weil
   die Raute nur 64 Prozent der Breite einnimmt. */
.map-tip{position:absolute;left:14px;bottom:14px;
  display:flex;align-items:center;gap:.4rem;background:rgba(24,48,38,.86);color:#fff;font-weight:800;
  font-size:.82rem;padding:.5rem 1rem;border-radius:999px;backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);max-width:calc(50% - 20px)}

/* Die Friedhofskachel schliesst die Raute. Sie bleibt bewusst gedaempft:
   eine Welt ist sie nicht, ein leeres Feld aber auch nicht mehr. */
.ort.friedhof{background:linear-gradient(150deg,#5b6f83,#3f5545)}
/* Das gezeichnete Bild braucht weniger Vergroesserung als ein Foto: es ist
   quadratisch angelegt und wuerde sonst zu stark beschnitten. */
.ort.friedhof img{--basis:rotate(-45deg) scale(1.42)}
.ort.friedhof .schild{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(18,34,46,.72) 60%)}

/* grids */
.grid{display:grid;gap:1rem}
.grid.worlds{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.grid.fams{grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:.75rem}
.grid.sims{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}

.world-card{overflow:hidden;cursor:var(--c-hand)}
.world-card .cap{height:120px;display:flex;align-items:flex-end;padding:1rem;position:relative;overflow:hidden}
/* Die Welt hat ein Foto im Archiv, also traegt die Karte das Foto statt einer
   Flaeche. Der Verlauf bleibt als Grund darunter, falls kein Bild da ist. */
.world-card .cap .capbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.world-card .cap .ttl,.world-card .cap .big{position:relative;z-index:1}
.world-card .cap::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(12,40,26,.62))}
.world-card .cap .big{position:absolute;top:10px;right:14px;font-size:2.4rem;z-index:2;color:#eafff3;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.world-card .cap .big .ic{width:34px;height:34px}
.world-card .cap .big img{width:48px;height:48px;object-fit:contain}
.world-card .ttl{color:#fff;font-family:var(--display);font-weight:700;font-size:1.4rem;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.world-card .body{padding:1rem 1.2rem 1.3rem}
.world-card .sub{color:var(--ink-soft);font-weight:700;font-size:.9rem;margin-bottom:.7rem}
/* Mehrere Chips: auf schmalen Karten brechen sie als Ganzes um, nie mitten im Chip. */
.world-card .wchips{display:flex;flex-wrap:wrap;gap:.4rem}
.world-card .wchips .chip{white-space:nowrap}
/* Bildbewegung beim Überfahren (Karte und Welten): Das Bild zoomt leicht heran und
   schwebt ruhig hin und her. Die Kachel selbst (Vergrößerung auf der Karte, Lichtschein
   bei den Welten) bleibt, wie sie ist. Beim Verlassen gleitet es über die Übergänge weich
   zurück. Die Welten-Bilder sind breite, flache Streifen: dort dreht es weniger und zoomt
   mehr, sonst blitzen an den Enden die Ecken auf. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .ort img,.world-card .capbild{transition:transform .8s cubic-bezier(.22,.61,.36,1),
    translate .8s cubic-bezier(.22,.61,.36,1),rotate .8s cubic-bezier(.22,.61,.36,1)}
  .ort:hover img,.ort:focus-visible img{transform:var(--basis) scale(1.07)}
  .world-card:hover .capbild{transform:scale(1.1)}
  /* Das Schweben selbst schaltet app.js über .schwebt: nur so gleitet es beim
     Verlassen zurück, eine entfernte CSS-Animation springt sonst auf null */
  .ort img.schwebt{animation:bild-schweben 5.5s ease-in-out .15s infinite alternate}
  .world-card .capbild.schwebt{animation:bild-schweben-flach 5.5s ease-in-out .15s infinite alternate}
}
@keyframes bild-schweben{0%{translate:0 0;rotate:0deg}35%{translate:-4px 2px;rotate:-.7deg}
  70%{translate:3px -3px;rotate:.6deg}100%{translate:-1px -2px;rotate:.2deg}}
@keyframes bild-schweben-flach{0%{translate:0 0;rotate:0deg}35%{translate:-4px 1.5px;rotate:-.35deg}
  70%{translate:3px -2px;rotate:.3deg}100%{translate:-1px -1px;rotate:.1deg}}
.chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--cream);border:2px solid #ffe9c2;color:#a8742a;font-weight:800;font-size:.78rem;padding:.25rem .65rem;border-radius:999px}

/* Familienkachel quer: das Haus links, Name und Zahlen rechts. So passen
   doppelt so viele auf den Schirm wie mit dem Farbblock obendrueber. */
.fam-card{cursor:var(--c-hand);overflow:hidden;display:flex;align-items:center;gap:.75rem;padding:.6rem}
.fam-card .top{width:64px;height:64px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:2rem;position:relative;border-radius:var(--r-kachel);overflow:hidden;
  border:1.5px solid var(--kante-d)}
.fam-card .top img{width:100%;height:100%;object-fit:cover;border-radius:0;border:0}
.fam-card .body{padding:0;min-width:0;flex:1}
.fam-card h3{font-family:var(--display);font-weight:600;font-size:1.08rem;line-height:1.15}
.fam-card .sub{color:var(--ink-soft);font-weight:700;font-size:.8rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fam-card .meta{display:flex;gap:.35rem;margin-top:.35rem;flex-wrap:wrap}
.fam-card .tag{font-size:.7rem;padding:.14rem .5rem;display:inline-flex;align-items:center;gap:.22rem}
.tag{font-weight:800;font-size:.74rem;padding:.2rem .6rem;border-radius:999px;background:#eef4f0;color:#5a6b78}
.tag.green{background:#e3fbe9;color:#1c9e54}
.tag.gold{background:#fff5d6;color:#b58711}
.tag.blue{background:#e0f3ff;color:#2b8fc7}

/* hero */
.hero{border-radius:28px;padding:2.1rem 2.3rem;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow);border:4px solid #fff;margin-bottom:1.4rem}
.hero .em{font-size:3rem;filter:drop-shadow(0 3px 8px rgba(0,0,0,.3))}
.hero .em .ic{width:46px;height:46px;color:#eafff3}
.fam-card .top .ic{width:44px;height:44px;color:#eafff3}
.stagebar .ic{width:.95em;height:.95em;vertical-align:-.14em}
.mini .k .ic{color:var(--plumb-d)}
.sr .ico .ic{width:26px;height:26px;color:var(--plumb-d)}
.map-tip .ic{width:1em;height:1em}
.hero .em img{width:56px;height:56px;object-fit:contain}

/* ── Kopfzeile mit Bild ────────────────────────────────────────
   Die Bilddateien sind im Mittel nur 211×230 groß, viele sogar unter 200
   Punkte breit. Hochskaliert werden sie matschig. Deshalb zwei Ebenen:
   das Bild rechts in seiner natürlichen Größe, und dieselbe Datei stark
   weichgezeichnet als Grund dahinter. Die Farben füllen damit die ganze
   Fläche, ohne dass irgendwo Unschärfe auffällt. */
.hero.mit-bild{display:flex;align-items:center;gap:1.6rem}
.hero .hero-text{position:relative;z-index:2;flex:1 1 auto;min-width:0}

/* Der weichgezeichnete Grund. Er ragt über die Kanten hinaus, sonst würden
   die Ränder der Weichzeichnung hell auslaufen. */
.hero .hero-grund{position:absolute;inset:-12%;z-index:0;
  background-size:cover;background-position:center;
  filter:blur(38px) saturate(150%);opacity:.6;transform:scale(1.15)}
/* Darüber der Farbverlauf der Welt, damit die Schrift lesbar bleibt und die
   Kopfzeile nicht bei jeder Familie eine andere Helligkeit hat. */
.hero.mit-bild::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(10,30,22,.62) 0%,rgba(10,30,22,.32) 52%,rgba(10,30,22,.12) 100%)}

/* Feine Körnung über allem — nimmt der Weichzeichnung das Wächserne.
   Als SVG-Rauschen eingebettet, damit keine Bilddatei nötig ist. */
.hero.mit-bild::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}

.hero .hero-bild{position:relative;z-index:2;flex:0 0 auto;
  display:grid;place-items:center;
  width:clamp(120px,22vw,210px);aspect-ratio:1;
  border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.14);
  border:3px solid rgba(255,255,255,.55);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.55)}
.hero .hero-bild img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:700px){
  /* Auf dem Handy untereinander: nebeneinander bliebe für keines von beiden
     genug Platz. */
  .hero.mit-bild{flex-direction:column;align-items:stretch;gap:1rem}
  .hero .hero-bild{width:100%;aspect-ratio:16/10;order:-1}
  .hero.mit-bild::before{background:linear-gradient(180deg,rgba(10,30,22,.28) 0%,rgba(10,30,22,.55) 100%)}
}
@media (prefers-reduced-transparency:reduce){
  .hero .hero-grund{display:none}
}

.hero h1{font-family:var(--display);font-weight:700;font-size:2.2rem;line-height:1.05;margin:.3rem 0 .2rem;text-shadow:0 2px 10px rgba(0,0,0,.18)}
.hero p{font-weight:700;opacity:.95;max-width:620px}
.hero .stats{display:flex;gap:1.4rem;margin-top:1rem;flex-wrap:wrap}
.hero .stat b{font-family:var(--display);font-size:1.5rem;display:block;line-height:1}
.hero .stat span{font-weight:800;font-size:.78rem;opacity:.9;text-transform:uppercase;letter-spacing:.05em}

/* subtabs */
.subtabs{display:flex;gap:.4rem;margin-bottom:1.2rem;flex-wrap:wrap}
.subtab{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:var(--r-pille);
  font-weight:800;font-size:.9rem;background:var(--tafel);color:var(--ink-soft);transition:.16s;
  border:1.5px solid var(--kante);box-shadow:inset 0 1px 0 var(--licht)}
.subtab:hover{border-color:var(--plumb);color:var(--plumb-d)}
.subtab.active{background:var(--plumb);color:#053d22;border-color:var(--plumb-d)}

/* sim card */
/* 269 der 275 Sims haben ein Foto. Es ist das Beste, was das Archiv zeigen
   kann, also fuellt es die Kachel, statt als Kreis darauf zu sitzen. */
.sim-card{cursor:var(--c-hand);padding:0;text-align:left;overflow:hidden}
.sim-card.dead{filter:grayscale(.85) contrast(.95)}
.avatar{width:100%;height:auto;aspect-ratio:1/1.06;border-radius:0;margin:0;display:flex;
  align-items:center;justify-content:center;font-size:2.4rem;border:0;
  border-bottom:1.5px solid var(--kante);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.sim-card h4{font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.15;padding:.45rem .6rem 0}
.sim-card .role{color:var(--ink-soft);font-weight:800;font-size:.74rem;padding:0 .6rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-card .stagebar{display:inline-block;margin:.25rem .6rem .5rem;font-weight:800;font-size:.68rem;
  padding:.1rem .5rem;border-radius:var(--r-pille);background:var(--tafel-3);color:var(--ink-soft)}
.grid.sims{grid-template-columns:repeat(auto-fill,minmax(144px,1fr));gap:.7rem}
.ghost-em{position:absolute;top:6px;right:8px;font-size:1rem;z-index:2;line-height:1;
  background:rgba(38,48,58,.72);color:#fff;border-radius:50%;padding:.2rem .3rem}

/* canvas card (tree/graph) */
.canvas-card{padding:0;overflow:hidden;position:relative}
.canvas-card svg{display:block;width:100%}
.zoom-ctrl{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:.4rem;z-index:5}
.zoom-ctrl button{width:38px;height:38px;border-radius:12px;background:#fff;box-shadow:var(--shadow-sm);font-weight:900;font-size:1.1rem;color:var(--ink-soft);display:flex;align-items:center;justify-content:center}
.zoom-ctrl button:hover{color:var(--plumb-d)}
#treeSvg{background:radial-gradient(circle at 50% 0,#f3fbf6,#ffffff)}
#graphSvg{cursor:var(--c-greifen);touch-action:none}
.tree-node{cursor:var(--c-hand)}
.tree-node rect{fill:#fff;stroke:var(--kante);stroke-width:2}
.tree-node:hover rect{stroke:var(--plumb)}
.tree-node .nm{font-family:var(--display);font-weight:700;font-size:14px;fill:var(--ink)}
.tree-node .rl{font-weight:800;font-size:10px;fill:var(--ink-soft)}
.tree-node .grab{font-size:12px;opacity:.75}
.edge{fill:none;stroke:#bcd9c6;stroke-width:3;stroke-linecap:round;transition:opacity .15s,stroke-width .15s}
.edge.partner{stroke:var(--pink);stroke-dasharray:2 6}
/* Paare ohne Trauschein blasser als Ehepaare. */
.edge.partner.lose{opacity:.55}
/* Geschwister ohne gemeinsamen Elternteil im Bild: ein flacher Buegel. */
.edge.geschwister{stroke-width:2;stroke-dasharray:6 4}

/* Alle-Sims-Ansicht: Welten-Filter */
/* Suchfeld in der Filterzeile der Sims-Uebersicht, in derselben Sprache wie
   die Pillen daneben. */
.sims-suche{display:inline-flex;align-items:center;gap:.45rem;margin-left:auto;
  padding:.45rem 1rem;border-radius:var(--r-pille);background:var(--tafel);
  border:1.5px solid var(--kante);box-shadow:inset 0 1px 0 var(--licht);color:var(--ink-soft)}
.sims-suche:focus-within{border-color:var(--plumb);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--plumb) 18%, transparent)}
.sims-suche input{border:0;background:none;outline:none;font:inherit;font-weight:700;
  color:var(--ink);width:11rem}
.sims-suche + .sims-world{margin-left:.35rem}

.sims-world{margin-left:auto;padding:.5rem 1rem;border-radius:var(--r-pille);font-weight:800;font-size:.9rem;background:var(--tafel);color:var(--ink-soft);box-shadow:inset 0 1px 0 var(--licht);border:1.5px solid var(--kante);font-family:inherit;cursor:var(--c-hand);max-width:100%}
.sims-world:focus{outline:none;border-color:var(--plumb)}

/* graph */
.legend{display:flex;gap:1rem;flex-wrap:wrap;margin:.2rem .2rem 1rem;font-weight:800;font-size:.82rem;color:var(--ink-soft)}
.legend i{display:inline-block;width:16px;height:4px;border-radius:2px;margin-right:.4rem;vertical-align:middle}
.legend span{display:inline-flex;align-items:center;gap:.28rem}
.legend .ic{width:1em;height:1em}
.zoom-ctrl .ic{width:1.05em;height:1.05em}
.gnode{cursor:var(--c-hand)}
.gnode circle{stroke:#fff;stroke-width:3;transition:.15s}
.gnode:hover circle{stroke:var(--ink)}
.gnode text{font-family:var(--display);font-weight:700;font-size:12px;fill:var(--ink);text-anchor:middle}
.gedge{fill:none;stroke-width:3;opacity:.55;transition:.15s}

/* Kopfzeile ueber dem Netz: Legende links, der Filterknopf rechts daneben. */
.netz-kopf{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.2rem}
.netz-kopf .legend{margin:.2rem 0;flex:1 1 auto}
.netz-filter{flex:none}
.netz-hinweis{margin-top:.8rem;max-width:62ch}

/* Feste Hoehe: der Ausschnitt passt sich der Netzgroesse an, also waere das
   SVG sonst bei grossen Familien bildschirmfuellend hoch. preserveAspectRatio
   skaliert alles hinein, statt am Rand abzuschneiden. */
.netz-karte svg{height:min(64vh,560px);background:radial-gradient(circle at 50% 42%,#f3fbf6,#fff 72%)}

/* Kontakte sind kleiner und blasser als die Familie selbst - die Familie ist
   das Thema der Seite, die Kontakte sind der Rand. */
.gnode.aussen circle{stroke-width:2.5}
.gnode text.gname{paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round}
.gnode text.gname.klein{font-size:11px;fill:var(--ink-soft)}
.gnode.aussen:hover text.gname.klein{fill:var(--ink)}
.gnode .gem{font-family:inherit;stroke:none}

/* Die Zahl der ausgeblendeten Bekannten am Sim. */
.gmehr circle{fill:var(--plumb);stroke:#fff;stroke-width:2.5}
.gmehr text{font-size:11px;font-weight:900;fill:#053d22;stroke:none}

/* Ueberfahren: was nicht am Sim haengt, tritt zurueck. */
#graphSvg.fokus .gedge{opacity:.08}
#graphSvg.fokus .gedge.an{opacity:1;stroke-width:4.5}
#graphSvg.fokus .gnode{opacity:.25}
#graphSvg.fokus .gnode.an{opacity:1}
#graphSvg.fokus .eheart{opacity:.15}

/* timeline */
.feed{display:flex;gap:1rem;overflow-x:auto;padding:.4rem .2rem 1rem;scroll-snap-type:x proximity;margin-bottom:1.6rem}
.feed .wish{min-width:230px;scroll-snap-align:start;background:linear-gradient(135deg,#fff6da,#ffe9a8);border:3px solid #fff;border-radius:18px;padding:1rem 1.1rem;box-shadow:var(--shadow-sm)}
.feed .wish .star{font-size:1.4rem}
.feed .wish .t{font-weight:800;margin-top:.3rem}
.feed .wish .w{font-weight:800;font-size:.75rem;color:#b58711;margin-top:.3rem}
.timeline{display:flex;gap:1rem;overflow-x:auto;padding:.4rem .2rem 1.2rem;scroll-snap-type:x proximity}
.round{min-width:270px;scroll-snap-align:start;padding:1rem}
.round .head{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.round .num{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--plumb),var(--plumb-d));color:#04150f;font-family:var(--display);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.round .ttl{font-family:var(--display);font-weight:700;font-size:1.1rem}
.event{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem .75rem;border-radius:14px;background:#f8fbf9;margin-bottom:.55rem}
.event .ico{font-size:1.2rem}
.event .tx{font-weight:700;font-size:.86rem}
.event .who{font-weight:800;font-size:.74rem;color:var(--plumb-d)}

/* census */
.census-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.6rem}
.cstat{background:linear-gradient(180deg,var(--tafel),var(--tafel-2));border:1.5px solid var(--kante);
  border-radius:var(--r-kachel);box-shadow:inset 0 1px 0 var(--licht),var(--schatten);padding:.8rem .9rem;transition:border-color .15s,box-shadow .15s}
.cstat.clickable:hover{border-color:var(--plumb)}
.cstat .v{font-family:var(--display);font-weight:600;font-size:1.7rem;line-height:1}
.cstat .l{display:flex;align-items:center;gap:.3rem;font-weight:800;font-size:.74rem;color:var(--ink-soft);margin-top:.28rem}
.cstat .l .ic{color:var(--plumb-d)}
.bars{margin-top:.4rem}
/* Lange Balkenlisten zeigen erst fuenf Zeilen, den Rest holt der Knopf darunter. */
.bars.gekuerzt .bar-row:nth-child(n+6){display:none}
.bars + .rel-more{margin-top:.6rem}
.bar-row{display:flex;align-items:center;gap:.7rem;margin-bottom:.55rem}
.bar-row .lab{width:34%;font-weight:800;font-size:.82rem;color:var(--ink-soft);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .track{flex:1;height:1.3rem;background:#eef4f0;border-radius:999px;overflow:hidden}
.bar-row .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--plumb),var(--plumb-l));min-width:3px}
.bar-row .val{width:2.2rem;font-weight:800;font-size:.82rem}

/* skill bars (dossier) */
.skills{text-align:left;margin:.4rem 0 .2rem}
.skill{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.skill .sl{width:80px;font-weight:800;font-size:.78rem;color:var(--ink-soft)}
.skill .st{flex:1;height:.72rem;background:var(--tafel-3);border:1px solid var(--kante);border-radius:2px;
  overflow:hidden;position:relative}
.skill .sf{display:block;height:100%;border-radius:0;
  background:linear-gradient(180deg,var(--plumb-l),var(--plumb))}
/* Ein Gitter aus zehn Luecken liegt ueber Rinne und Fuellung: daraus liest man
   den Wert ab, ohne die Zahl daneben lesen zu muessen. */
.skill .st::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 2px),
    var(--tafel) calc(10% - 2px),var(--tafel) 10%)}
.skill .sv{width:1.6rem;font-weight:800;font-size:.78rem;text-align:right}

/* Persönlichkeit: zweipolige Achsen (Tier-Dossier) */
.paxis-grid{display:flex;flex-direction:column;gap:.5rem;margin:.4rem 0 .2rem}
.paxis{display:grid;grid-template-columns:minmax(4.5rem,auto) 1fr minmax(4.5rem,auto);align-items:center;gap:.55rem}
.paxis .ppole{font-weight:800;font-size:.74rem;color:var(--ink-soft);line-height:1.1}
.paxis .ppole.left{text-align:right}
.paxis .ppole.right{text-align:left}
.paxis .ptrack{position:relative;height:.7rem;background:#eef4f0;border-radius:999px}
.paxis .pdot{position:absolute;top:50%;width:1.05rem;height:1.05rem;border-radius:50%;background:linear-gradient(135deg,var(--plumb),var(--plumb-l));border:2px solid #fff;box-shadow:var(--shadow-sm);transform:translate(-50%,-50%)}

/* Kommandos als Häkchen-Chips (Tier-Dossier) */
.cmd-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 .2rem;text-align:left}
.cmd-chip{display:inline-flex;align-items:center;gap:.25rem;font-weight:800;font-size:.8rem;color:#8a5a00;background:#fff3d6;border:2px solid #ffdf9e;border-radius:999px;padding:.28rem .7rem}

/* modal */
.backdrop{position:fixed;inset:0;background:rgba(30,45,40,.44);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);z-index:60;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fade .2s;overflow-y:auto}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:linear-gradient(180deg,
    color-mix(in srgb, var(--tafel) 86%, transparent),
    color-mix(in srgb, var(--tafel-2) 79%, transparent));
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
  border-radius:var(--r-tafel);
  max-width:min(720px,94vw);width:100%;overflow:hidden;position:relative;
  box-shadow:var(--shadow),inset 0 1px 0 var(--licht),inset 0 0 0 1px rgba(255,255,255,.28);
  border:1.5px solid color-mix(in srgb, #fff 45%, var(--kante-d));
  animation:popm .24s cubic-bezier(.2,.8,.2,1);margin:auto}
/* Ohne backdrop-filter bliebe nur eine milchige Flaeche und der Text waere
   schlecht lesbar. Dort bleibt die Scheibe deckend. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .modal{background:linear-gradient(180deg,var(--tafel),var(--tafel-2))}
}
@keyframes popm{from{transform:translateY(8px) scale(.985);opacity:0}to{transform:none;opacity:1}}
/* Fenster löst Fenster ab (Liste -> Steckbrief -> zurück, app.js): der
   unscharfe Hintergrund bleibt stehen, sonst blitzt die Seite dahinter auf.
   Nur der Inhalt blendet kurz über. */
#modalRoot.tausch .backdrop{animation:none}
#modalRoot.tausch .modal{animation:fade .16s ease-out}
/* Schließen ohne Nachfolger: ausblenden statt verschwinden (app.js, closeSim) */
.zu .backdrop{animation:ausblenden .18s ease-in forwards}
.zu .modal{animation:ausblendenFenster .18s ease-in forwards}
@keyframes ausblenden{to{opacity:0}}
@keyframes ausblendenFenster{to{opacity:0;transform:translateY(6px) scale(.985)}}
.modal .av{width:124px;height:132px;border-radius:var(--r-kachel);margin:1.1rem auto 0;display:flex;align-items:center;justify-content:center;font-size:3.1rem;border:3px solid var(--tafel);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.modal .av img{object-position:center 18%}
.modal .av img{width:100%;height:100%;object-fit:cover}
.modal .bd{padding:.4rem 1.6rem 1.7rem;text-align:left}
.modal .bd > h2,.modal .bd > .role{text-align:center}
.modal h2{font-family:var(--display);font-weight:700;font-size:1.85rem;margin-top:.6rem}
.modal .role{color:var(--ink-soft);font-weight:800}

/* Der Steckbrief im Modal: derselbe zweispaltige Aufbau wie auf der ganzen
   Seite. Kein Farbbalken mit schwebendem Portraet mehr — nur eine schmale
   Familienkante oben, darunter dieselbe Tafel wie ueberall sonst. */
.modal-breit{max-width:min(1180px,94vw);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--tafel) 70%, transparent),
    color-mix(in srgb, var(--tafel-2) 60%, transparent))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .modal-breit{background:linear-gradient(180deg,var(--tafel),var(--tafel-2))}
}
.modal-breit .bd{padding:.85rem}
.modal .x.schwebend{position:absolute;top:.55rem;right:.55rem;z-index:2;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.62);backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  border:1.5px solid rgba(255,255,255,.7);color:var(--ink-soft);
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.9);cursor:var(--c-hand);transition:.15s}
.modal .x.schwebend:hover{background:rgba(255,255,255,.88);color:var(--plumb-d);border-color:#fff}
.modal .x.schwebend .ic{width:1.05em;height:1.05em}
/* Jeder Block steht auf seiner eigenen festen Flaeche: das ist die Machart
   der Karten und Reiter, und es haelt kleinen Text lesbar. Bewusst ohne
   overflow:hidden, sonst wuerden die Kurzinfos an der Blockkante abgeschnitten. */
.statblock{background:linear-gradient(180deg,var(--tafel),var(--tafel-2));
  border:1.5px solid var(--kante);border-radius:var(--r-tafel);
  box-shadow:inset 0 1px 0 var(--licht);padding:1rem 1.15rem .95rem;margin:.55rem 0}
/* Rundum derselbe Abstand: oben traegt ihn das Padding, nicht die Kopfzeile
   (die verliert im Dossier ohnehin ihren Rand, siehe .dossier .subhead:first-child). */
.statblock > .subhead{margin:0 0 .65rem}
.statblock .skill:last-child{margin-bottom:0}
/* Der Geschichtskasten braucht im Block keinen zweiten Rahmen. */
.statblock > .note-box{background:none;border:0;padding:.1rem .1rem .2rem}
.statblock > .gal{margin-bottom:.1rem}

/* Im Modal ist weniger Platz als auf der Seite: eine Spalte frueher umbrechen. */
@media(max-width:900px){ .modal-breit .dossier{grid-template-columns:1fr} }
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.45rem;margin:1rem 0;text-align:left}
.mini{display:flex;align-items:baseline;gap:.5rem;background:var(--tafel);border:1.5px solid var(--kante);
  border-radius:var(--r-kachel);padding:.45rem .7rem;box-shadow:inset 0 1px 0 var(--licht)}
.mini .k{font-weight:800;font-size:.76rem;color:var(--ink-soft);white-space:nowrap}
.mini .v{font-weight:800;font-size:.84rem;margin-left:auto;text-align:right}
.traits{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin-bottom:.4rem}
.subhead{display:flex;align-items:center;gap:.5rem;text-align:left;font-family:var(--display);
  font-weight:600;color:var(--ink);font-size:1rem;margin:1.1rem 0 .4rem;
  padding:.5rem .9rem;background:linear-gradient(180deg,var(--tafel-3),var(--tafel-2));
  border:1.5px solid var(--kante);border-radius:var(--r-tafel)}
.subhead .ic{color:var(--plumb-d)}
/* Absaetze und Zeilenumbrueche aus dem Admin-Bereich sollen ankommen.
   pre-line behaelt die Umbrueche, faltet aber mehrfache Leerzeichen zusammen,
   und der Text bleibt maskiert, es kommt also kein HTML aus dem Feld durch. */
.note-box,.langtext{white-space:pre-line}
.note-box{background:var(--tafel);border:1.5px solid var(--kante);border-radius:var(--r-tafel);
  padding:.8rem 1rem;font-weight:700;font-size:.88rem;line-height:1.6;color:var(--ink);text-align:left;
  box-shadow:inset 0 1px 0 var(--licht)}
.langtext{line-height:1.65}
.rel-line{display:flex;align-items:center;gap:.5rem;text-align:left;padding:.45rem .2rem;border-top:1px dashed #e6efe9;font-weight:700;font-size:.88rem}
.rel-line .badge{font-weight:800;font-size:.72rem;padding:.15rem .55rem;border-radius:999px}
.rel-line .go{font-weight:800;margin-left:auto;color:var(--plumb-d)}
/* Kinderstand eines Paares: ruhig gehalten, es steht neben Blitzen und Herz. */
.rel-line .kinder{display:inline-flex;align-items:center;gap:.25rem;flex:none;
  font-size:.74rem;font-weight:800;padding:.14rem .5rem;border-radius:var(--r-pille);
  background:var(--tafel-3);border:1.5px solid var(--kante);color:var(--ink-soft)}
.rel-line .kinder .ic{width:.95em;height:.95em}
.rel-line .kinder.voll{background:#eefae9;border-color:#b7e3a6;color:var(--grass-d)}
/* Techtelmechtel: gefuelltes Herz auf Beerengrund, damit es zwischen den
   Blitzen nicht untergeht. */
.rel-line .woohoo{display:inline-flex;align-items:center;justify-content:center;flex:none;
  color:#fff;background:linear-gradient(180deg,#ff8fc0,var(--pink));
  border-radius:var(--r-pille);padding:.16rem .34rem;
  box-shadow:0 1px 0 rgba(192,36,95,.4),inset 0 1px 0 rgba(255,255,255,.45)}
.rel-line .woohoo .ic{width:1.05em;height:1.05em}
/* Volle Chemie, also drei Blitze: leichter Goldgrund hinter der ganzen Zeile. */
.rel-line.chemie-voll{border-radius:8px;padding-left:.5rem;padding-right:.5rem;
  background:linear-gradient(90deg,rgba(255,206,84,.30),rgba(255,206,84,.08))}
.rel-search{width:100%;margin:.15rem 0 .45rem;padding:.5rem .95rem;border:1.5px solid var(--kante);border-radius:var(--r-pille);
  font:inherit;font-weight:700;background:var(--tafel);color:var(--ink);text-align:left;
  box-shadow:inset 0 1px 0 var(--licht)}
.rel-search:focus{outline:none;border-color:var(--plumb);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--plumb) 18%, transparent)}
/* Die Beziehungen sind mit Abstand der laengste Block im Steckbrief. Sobald
   Platz da ist, laufen sie in mehreren Spalten, sonst scrollt man ewig. */
#relList{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));column-gap:1.6rem}
/* Im Raster hat jede Spalte eine erste Zeile — die Trennlinie gehoert dann an
   alle, sonst sieht die erste Spalte anders aus als die uebrigen. */
#relList .rel-line:first-child{border-top:1px dashed #e6efe9}
#relList.collapsed .rel-line:nth-child(n+6){display:none}
.rel-more{display:block;width:100%;margin:.5rem 0 .1rem;padding:.5rem;border:2px dashed var(--kante-d);border-radius:var(--r-pille);
  background:var(--tafel);font:inherit;font-weight:800;font-size:.85rem;color:var(--plumb-d);cursor:var(--c-hand);transition:.15s}
.rel-more:hover{border-color:var(--plumb);background:var(--tafel-2)}

/* ── Steckbrief als ganze Seite (Reiter "Sims") ─────────────
   Dieselben Bausteine wie im Modal, nur nebeneinander statt untereinander:
   das Portraet traegt links die Identitaet, rechts stehen Werte und
   Verbindungen. */
.dossier{display:grid;grid-template-columns:272px minmax(0,1fr);gap:1rem;align-items:start}
.portraettafel{overflow:hidden;position:sticky;top:1rem;padding:0}
.portraettafel .portraet{position:relative;width:100%;aspect-ratio:1/1.12;display:flex;
  align-items:center;justify-content:center;overflow:hidden;font-size:3rem;
  border-bottom:1.5px solid var(--kante)}
.portraettafel .portraet img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.portraettafel .portraet .ic.platzhalter{width:40%;height:40%;color:#8fb3a0}
.portraettafel .namensfeld{padding:.75rem .9rem .25rem}
.portraettafel h2{font-family:var(--display);font-weight:600;font-size:1.5rem;line-height:1.12}
.portraettafel .role{color:var(--ink-soft);font-weight:800;font-size:.85rem}
.portraettafel .info-grid{margin:.55rem 0 0;padding:0 .9rem 1rem}
.info-grid.spalte{grid-template-columns:1fr}
.dossier-rechts{display:grid;gap:.1rem}
.dossier .subhead:first-child{margin-top:0}
.totzeichen{position:absolute;right:.5rem;top:.5rem;display:grid;place-items:center;
  background:rgba(38,48,58,.75);color:#fff;border-radius:50%;padding:.28rem}
.modal .av .totzeichen{right:-2px;bottom:-2px;top:auto;padding:.22rem}
@media(max-width:760px){
  .dossier{grid-template-columns:1fr}
  .portraettafel{position:static}
  .portraettafel .portraet{aspect-ratio:1/.72}
}


/* ── Reaktionen und Kommentare unter den News ──────────────────
   Beides hängt unter der Karte und soll sie nicht überstimmen: dieselben
   Tafel-Flächen und Pillen wie überall, nur kleiner. */
.reaktionen{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  margin:.9rem 0 0;padding-top:.8rem;border-top:1.5px dashed var(--kante);position:relative}
.rchip{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;
  border-radius:var(--r-pille);background:var(--tafel);border:1.5px solid var(--kante);
  box-shadow:inset 0 1px 0 var(--licht);font:inherit;font-weight:800;font-size:.84rem;
  color:var(--ink-soft);cursor:var(--c-hand);transition:.15s}
.rchip:hover{border-color:var(--plumb);color:var(--plumb-d);transform:translateY(-1px)}
.rchip .rem{font-size:1rem;line-height:1}
/* Worauf man selbst reagiert hat, bleibt sichtbar markiert. */
.rchip.mein{background:color-mix(in srgb, var(--plumb) 16%, #fff);
  border-color:var(--plumb);color:var(--plumb-d)}
.rchip.radd{padding:.3rem .5rem;color:var(--plumb-d)}
.rchip.radd .ic{width:1.05em;height:1.05em}
.rchip[disabled]{opacity:.5;cursor:var(--c-pfeil)}

/* Das Emoji-Fenster wird am Seitenkörper aufgehängt und in app.js an den
   Knopf gerechnet. Es sitzt bewusst NICHT in der News-Karte: die hat
   overflow:hidden und schnitt das Fenster seitlich und nach oben ab. */
.emoji-fenster{position:fixed;z-index:70;
  width:min(378px,calc(100vw - 16px));
  max-height:calc(100vh - 16px);overflow-y:auto;
  background:linear-gradient(180deg,var(--tafel),var(--tafel-2));
  border:1.5px solid var(--kante-d);border-radius:var(--r-tafel);
  box-shadow:var(--shadow),inset 0 1px 0 var(--licht);padding:.7rem .8rem;
  animation:emojiauf .14s ease-out}
@keyframes emojiauf{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.egruppe+.egruppe{margin-top:.55rem}
.etitel{font-weight:800;font-size:.72rem;color:var(--ink-soft);margin-bottom:.25rem}
.ezeile{display:flex;flex-wrap:wrap;gap:.2rem}
.ebtn{flex:none;width:2rem;height:2rem;display:grid;place-items:center;
  font-size:1.2rem;line-height:1;padding:0;border-radius:.5rem;
  background:none;border:0;cursor:var(--c-hand);transition:.12s}
.ebtn:hover{background:var(--tafel-3);transform:scale(1.15)}
@media (prefers-reduced-motion:reduce){
  .emoji-fenster{animation:none}
  .ebtn:hover,.rchip:hover{transform:none}
}

.komm{margin-top:.9rem;padding-top:.8rem;border-top:1.5px dashed var(--kante)}
.kkopfzeile{display:flex;align-items:center;gap:.4rem;font-weight:800;
  font-size:.86rem;color:var(--ink-soft)}
.kkopfzeile .ic{width:1.05em;height:1.05em;color:var(--plumb-d)}
.kschreiben{margin-left:auto;font:inherit;font-weight:800;font-size:.82rem;
  padding:.3rem .8rem;border-radius:var(--r-pille);background:var(--tafel);
  border:1.5px solid var(--kante);box-shadow:inset 0 1px 0 var(--licht);
  color:var(--plumb-d);cursor:var(--c-hand);transition:.15s}
.kschreiben:hover{border-color:var(--plumb);background:var(--tafel-2)}

.kliste{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.5rem}
/* Ab dem vierten zugeklappt. Die Zeilen bleiben im HTML, damit die Suche im
   Browser sie trotzdem findet. */
.kliste.zu .kzeile:nth-child(n+4){display:none}
.kzeile{background:var(--tafel);border:1.5px solid var(--kante);
  border-radius:var(--r-kachel);box-shadow:inset 0 1px 0 var(--licht);
  padding:.55rem .8rem;text-align:left}
.kkopf{display:flex;align-items:baseline;gap:.5rem}
.kkopf b{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--ink)}
.kdatum{font-weight:800;font-size:.72rem;color:var(--ink-soft)}
.ktext{margin:.2rem 0 0;font-weight:700;font-size:.87rem;line-height:1.5;
  color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.kmehr{display:block;width:100%;margin:.5rem 0 0;padding:.45rem;
  border:2px dashed var(--kante-d);border-radius:var(--r-pille);background:var(--tafel);
  font:inherit;font-weight:800;font-size:.82rem;color:var(--plumb-d);cursor:var(--c-hand);transition:.15s}
.kmehr:hover{border-color:var(--plumb);background:var(--tafel-2)}

.kform{margin-top:.7rem;display:grid;gap:.5rem}
/* display:grid schlägt sonst das hidden-Attribut — das Formular stand dann
   immer offen, obwohl es erst nach „Kommentieren" erscheinen soll. */
.kform[hidden]{display:none}
.kfelder input[name=name]{width:100%}
/* Die Honigfalle für Bots: nicht display:none, das erkennen manche. */
.kform input[name=website]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.kform input,.kform textarea{font:inherit;font-weight:700;font-size:.87rem;
  padding:.5rem .7rem;border-radius:var(--r-knopf);border:1.5px solid var(--kante);
  background:var(--tafel);color:var(--ink);width:100%}
.kform input:focus,.kform textarea:focus{outline:none;border-color:var(--plumb);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--plumb) 18%, transparent)}
.kform textarea{resize:vertical;min-height:4.5rem;line-height:1.5}
.kzeile-unten{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.khinweis{font-weight:700;font-size:.76rem;color:var(--ink-soft);flex:1 1 12rem}
.ksenden{font:inherit;font-weight:800;font-size:.85rem;padding:.45rem 1.1rem;
  border-radius:var(--r-pille);background:var(--plumb);color:#053d22;
  border:1.5px solid var(--plumb-d);cursor:var(--c-hand);transition:.15s}
.ksenden:hover{background:var(--plumb-l)}
.ksenden[disabled]{opacity:.55;cursor:var(--c-pfeil)}
.kmeldung{margin:0;font-weight:800;font-size:.82rem;padding:.45rem .7rem;
  border-radius:var(--r-knopf)}
.kmeldung.gut{background:#eefae9;color:var(--grass-d);border:1.5px solid #b7e3a6}
.kmeldung.schlecht{background:#fef2f2;color:#b3261e;border:1.5px solid #fecaca}
@media(max-width:560px){
  .kform input,.kform textarea{font-size:16px} /* verhindert den iOS-Auto-Zoom */
}


/* ── Mini-Übersicht im Netz und im Stammbaum ───────────────
   Erscheint erst nach fünf Sekunden Verweilen, deshalb darf sie ruhig etwas
   mehr zeigen als eine Kurzinfo. */
.mini-karte{position:fixed;z-index:95;pointer-events:none;width:max-content;
  max-width:min(270px,80vw);
  background:linear-gradient(180deg,var(--tafel),var(--tafel-2));
  border:1.5px solid var(--kante-d);border-radius:var(--r-tafel);
  box-shadow:var(--shadow),inset 0 1px 0 var(--licht);
  padding:.6rem .7rem;animation:miniauf .14s ease-out}
@keyframes miniauf{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.mk-kopf{display:flex;align-items:center;gap:.55rem}
.mk-bild{width:38px;height:38px;flex:none;border-radius:var(--r-kachel);overflow:hidden;
  display:grid;place-items:center;border:2px solid #fff;box-shadow:var(--shadow-sm)}
.mk-bild img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.mk-bild .ic{width:60%;height:60%;color:#8fb3a0}
.mk-name{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.mk-name b{font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--ink)}
.mk-name span{font-weight:800;font-size:.74rem;color:var(--ink-soft)}
.mk-zeilen{display:grid;gap:.18rem;margin-top:.5rem;padding-top:.45rem;
  border-top:1.5px dashed var(--kante)}
.mk-zeilen span{display:flex;align-items:center;gap:.35rem;
  font-weight:800;font-size:.78rem;color:var(--ink-soft)}
.mk-zeilen .ic{width:.95em;height:.95em;flex:none;color:var(--plumb-d)}
@media (prefers-reduced-motion:reduce){.mini-karte{animation:none}}
/* Auf Geraeten ohne Mauszeiger gibt es kein Verweilen - dort bleibt sie weg. */
@media(hover:none){.mini-karte{display:none}}


/* ── Sortierleiste ───────────────────────────────────
   Dieselbe Pillenform wie die uebrigen Unterreiter, nur mit einer
   Beschriftung davor — sonst haelt man sie fuer weitere Kategorien. */
.sortleiste{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  margin:0 .2rem 1.1rem}
.sortleiste .sortlabel{display:inline-flex;align-items:center;gap:.3rem;
  font-weight:800;font-size:.78rem;color:var(--ink-soft);margin-right:.2rem}
.sortleiste .sortlabel .ic{width:1em;height:1em;color:var(--plumb-d)}
.sortleiste .subtab{font-size:.82rem;padding:.35rem .8rem}
@media(max-width:560px){
  .sortleiste{gap:.3rem}
  .sortleiste .sortlabel{flex:1 0 100%;margin:0 0 .15rem}
  .sortleiste .subtab{font-size:.78rem;padding:.3rem .65rem}
}


/* Haustier-Zahlen in der Volkszaehlung. Bei genau zwei Arten waere ein
   Balkendiagramm Ueberbau - zwei Zeilen mit der Zahl reichen. */
.tierzahlen{display:grid;gap:.5rem}
.tierzeile{display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;padding:.55rem .8rem;border-radius:var(--r-kachel);
  background:var(--tafel);border:1.5px solid var(--kante);
  box-shadow:inset 0 1px 0 var(--licht)}
.tierzeile .tl{display:inline-flex;align-items:center;gap:.45rem;
  font-weight:800;font-size:.9rem;color:var(--ink-soft)}
.tierzeile .tl .ic{width:1.25em;height:1.25em;color:var(--plumb-d)}
.tierzeile b{font-family:var(--display);font-weight:600;font-size:1.35rem;
  color:var(--ink);line-height:1}
/* Zeilen mit Tieren lassen sich anklicken und zeigen sie — wie die
   uebrigen Kacheln der Volkszaehlung auch. */
.tierzeile.clickable{width:100%;font:inherit;text-align:left;cursor:var(--c-hand);transition:.15s}
.tierzeile.clickable:hover{border-color:var(--plumb);transform:translateY(-1px)}
.tierzeile.clickable:focus-visible{outline:none;border-color:var(--plumb);
  box-shadow:inset 0 1px 0 var(--licht),0 0 0 4px color-mix(in srgb, var(--plumb) 18%, transparent)}

/* search results */
.search-results{display:grid;gap:.6rem}
.sr{display:flex;align-items:center;gap:.8rem;background:linear-gradient(180deg,var(--tafel),var(--tafel-2));border:1.5px solid var(--kante);border-radius:var(--r-kachel);box-shadow:inset 0 1px 0 var(--licht);padding:.7rem .9rem;cursor:var(--c-hand);transition:.15s}
.sr:hover{transform:translateX(4px)}
.sr .ico{width:42px;height:42px;border-radius:12px;background:#eef4f0;display:flex;align-items:center;justify-content:center;font-size:1.4rem;overflow:hidden;flex-shrink:0}
.sr .ico img{width:100%;height:100%;object-fit:cover}
.sr .nm{font-family:var(--display);font-weight:700}
.sr .meta{font-weight:700;font-size:.8rem;color:var(--ink-soft)}
.sr .kind{margin-left:auto;font-weight:800;font-size:.72rem;color:var(--plumb-d)}

.footer{position:relative;text-align:center;padding:2.5rem 1rem 1.4rem;color:var(--ink-soft);font-weight:700;font-size:.85rem}
.footer a{color:var(--plumb-d);font-weight:800}
.footer .divider{margin:0 .5rem;opacity:.4}
.foot-line{opacity:.85}
.foot-credits{margin-top:.5rem;font-size:.82rem}
.foot-credits .heart{color:#ff5e7a;display:inline-block;animation:heartbeat 2.6s ease-in-out infinite}
@keyframes heartbeat{0%,100%{transform:scale(1)}12%{transform:scale(1.25)}24%{transform:scale(1)}}
.foot-imprint{background:none;border:none;padding:0;font:inherit;font-weight:800;color:var(--plumb-d);cursor:var(--c-hand);text-decoration:underline;text-underline-offset:3px}
.foot-imprint:hover{color:var(--ink)}
.foot-social{display:flex;justify-content:center;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:.8rem}
.fs-sep{opacity:.35}
.fs-group{display:inline-flex;align-items:center;gap:.4rem}
@media(max-width:540px){.foot-social .fs-sep{display:none}}   /* zwei Zeilen: kein Punkt am Zeilenende */
.fs-name{font-weight:800;color:var(--ink-soft);margin-right:.15rem}
.fs-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#fff;border:1.5px solid #dfe9e2;color:#5a6b78;transition:transform .3s cubic-bezier(.22,.61,.36,1),background .3s,color .3s,border-color .3s,box-shadow .3s}
.fs-ico svg{width:15px;height:15px;display:block}
.fs-ico:hover{transform:translateY(-3px) scale(1.08);color:#fff;box-shadow:0 8px 16px -8px rgba(40,70,50,.45)}
.ic-insta:hover{background:linear-gradient(45deg,#f58529,#dd2a7b 55%,#8134af);border-color:#dd2a7b}
.ic-twitch:hover{background:#9146FF;border-color:#9146FF}
.ic-kofi:hover{background:#FF5E5B;border-color:#FF5E5B}
@media (prefers-reduced-motion:reduce){.foot-credits .heart{animation:none}.fs-ico{transition:none}}

.fade-in{animation:rise .4s cubic-bezier(.2,.7,.3,1) both}
/* Beim Umstellen eines Filters bleibt die Einblendung aus: sonst faehrt der
   ganze Block samt Kopfzeile noch einmal von unten hoch, und die Karten
   ploppen gestaffelt nach. Gemessen waren das zehn laufende Animationen je
   Klick. Die Klasse sitzt auf #view, damit Fenster und Steckbriefe weiter
   einblenden; app.js nimmt sie beim naechsten echten Seitenwechsel weg. */
#view.kein-einblenden .fade-in,
#view.kein-einblenden .fade-in *:not(.liebe-knopf,.liebe-funken i){animation:none!important}   /* Herz und Funken sind keine Einblendung */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ── Dossier: Fähigkeiten & Persönlichkeit nebeneinander (breites Modal) ── */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.2rem 1.8rem;text-align:left}
@media(min-width:760px){.info-grid{grid-template-columns:repeat(3,1fr)}}

/* ── Web-App: Install-Hinweis ── */
.pwa-pop{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));z-index:55;
  width:min(440px,calc(100vw - 1.4rem));background:#fff;border-radius:22px;border:3px solid #fff;
  box-shadow:0 24px 54px -18px rgba(30,60,45,.55);padding:1.05rem 1.15rem;display:flex;gap:.95rem;align-items:flex-start;
  animation:popRise .4s cubic-bezier(.2,.8,.2,1)}
@keyframes popRise{from{transform:translate(-50%,14px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.pwa-pop img{width:56px;height:56px;flex-shrink:0;border-radius:16px;background:linear-gradient(180deg,#cdeffd,#eafbe4);padding:5px;border:2px solid #e2efe6}
.pwa-pop h3{font-family:var(--display);font-weight:700;font-size:1.12rem;margin:0 1.5rem .15rem 0}
.pwa-pop p{font-weight:700;font-size:.84rem;color:var(--ink-soft);line-height:1.45;margin:0}
.pwa-hint{margin-top:.55rem;font-weight:800;font-size:.84rem;background:#eef7ff;border:2px solid #cfe8ff;color:#2b6ea6;border-radius:12px;padding:.5rem .65rem;line-height:1.55}
.pwa-hint .ios-share{width:18px;height:18px;display:inline-block;vertical-align:-4px;color:#2b8fc7;margin:0 .15rem}
.pwa-btns{display:flex;gap:.5rem;margin-top:.7rem;flex-wrap:wrap}
.pwa-btn{border-radius:999px;font-weight:900;font-size:.88rem;padding:.55rem 1.15rem;transition:transform .18s}
.pwa-btn:hover{transform:translateY(-1px)}
.pwa-btn.main{background:linear-gradient(135deg,var(--plumb),var(--plumb-d));color:#fff;box-shadow:0 10px 20px -10px rgba(16,150,100,.7)}
.pwa-btn.ghost{color:var(--ink-soft);background:#f0f5f2}
.pwa-x{position:absolute;top:.55rem;right:.65rem;width:30px;height:30px;border-radius:50%;background:#f0f5f2;color:#5a6b78;font-weight:900;font-size:.85rem;display:flex;align-items:center;justify-content:center}
@media(prefers-reduced-motion:reduce){.pwa-pop{animation:none}}
html:has(#liebePanel) .pwa-pop{display:none}   /* läge sonst über dem Fenster „Weitere Kandidaten“ */

/* ── Installierte Web-App (Standalone): Inhalt unter die iOS-Statusleiste ziehen ── */
html.standalone .app{padding-top:env(safe-area-inset-top,0px)}

/* ── Touch-Geräte: schwebende Hover-Effekte deaktivieren ── */
@media(hover:none){
  .pop:hover{transform:none;box-shadow:var(--shadow)}
  .tab:hover,.subtab:hover{transform:none}
  .sr:hover{transform:none}
  .pwa-btn:hover{transform:none}
}

/* ════════════════════════════════════════════════════════════
   MOBIL (≤ 700px) — App-Gefühl: Bottom-Navigation, Bottom-Sheet,
   wischbare Karte & Stammbaum, große Touch-Ziele
   ════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  .app{padding-left:max(.9rem,env(safe-area-inset-left,0px));
    padding-right:max(.9rem,env(safe-area-inset-right,0px));
    padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

  /* Kopf: Marke + Suche in voller Breite */
  .topbar{padding:.9rem .1rem .5rem;gap:.7rem}
  .brand .nm{font-size:1.3rem}
  .live-badge{order:2;padding:.4rem .7rem;font-size:.78rem}
  .search-box{order:3;width:100%;margin-left:0}
  .search-box input{width:100%;font-size:16px} /* 16px verhindert den iOS-Auto-Zoom */
  .search-box input:focus{width:100%}
  .rel-search{font-size:16px} /* 16px verhindert den iOS-Auto-Zoom */

  /* Reiter → feste Bottom-Navigation (App-Look) */
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:50;gap:0;flex-wrap:nowrap;
    justify-content:space-around;align-items:stretch;
    background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:2px solid #e2efe6;box-shadow:0 -10px 28px -14px rgba(40,70,50,.35);
    padding:.35rem max(.3rem,env(safe-area-inset-left,0px)) calc(.35rem + env(safe-area-inset-bottom,0px)) max(.3rem,env(safe-area-inset-right,0px))}
  /* Acht Reiter: ohne den (unsichtbaren) Rand und das seitliche Polster hat
     jede Beschriftung vier Punkte mehr. Sie darf zweizeilig werden - an
     Leerzeichen und, wo das Geraet deutsch trennen kann, mit Trennstrich.
     Erst was dann noch nicht passt, endet mit "…". */
  .tab{flex:1 1 0;min-width:0;flex-direction:column;gap:.18rem;padding:.4rem 0;
    border-radius:14px;font-size:.6rem;border:0;background:none}
  .tab .em{font-size:1.35rem}
  .tab .lbl{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
    text-overflow:ellipsis;max-width:100%;text-align:center;line-height:1.15;
    -webkit-hyphens:auto;hyphens:auto}
  .tab:hover{transform:none;background:none}
  .tab.active{background:#e7faee;color:var(--plumb-d);border-color:transparent;box-shadow:none}

  /* Raster: eine Spalte für große Karten, zwei für Sims */
  .grid{gap:1rem}
  .grid.worlds,.grid.fams{grid-template-columns:1fr}
  .grid.sims{grid-template-columns:repeat(2,1fr)}
  .sim-card h4{font-size:.94rem}
  .section-h{font-size:1.45rem}
  .world-card .cap{height:104px}

  /* Hero kompakter */
  .hero{padding:1.35rem 1.25rem;border-radius:22px}
  .hero h1{font-size:1.65rem}
  .hero .stats{gap:.9rem 1.4rem;margin-top:.8rem}
  .hero .stat b{font-size:1.3rem}

  /* Karte & Stammbaum: in lesbarer Größe horizontal wischbar */
  /* Auf dem Handy wird die Raute zum normalen Raster: gedreht waeren die
     Kacheln 62 Pixel breit und die Weltnamen nicht mehr lesbar. */
  .karte{height:auto;padding:1rem .8rem 3.6rem}
  .raster{position:static;transform:none;width:auto;aspect-ratio:auto;
    grid-template-columns:repeat(2,1fr);gap:.6rem}
  .ort{aspect-ratio:4/3}
  .ort img{--basis:rotate(0deg)}
  /* Auf dem Handy ist die Karte ein schlichtes Raster ohne Drehung - dort
     braucht das Schild den Ueberstand nicht. */
  .ort .schild{transform:none;left:0;right:0}
  .ort.leer{display:none}
  .karte .sonne{width:56px;height:56px;left:auto;right:6%;top:6%}
  /* Auf dem Handy ist die Karte ein Raster ueber die volle Breite - dort
     bleibt der Hinweis mittig, sonst klebt er am Rand. */
  .map-tip{left:50%;transform:translateX(-50%);bottom:10px;
    font-size:.76rem;padding:.42rem .8rem;max-width:calc(100% - 24px)}
  .tree-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  #treeSvg{min-width:var(--tw,100%)}
  .netz-karte svg{height:min(58vh,420px)}
  .netz-kopf{gap:.5rem}
  .zoom-ctrl button{width:44px;height:44px}

  /* Untertabs & Filter mit vollen Touch-Zielen */
  .subtab{padding:.55rem .9rem;font-size:.84rem}
  .sims-world{margin-left:0;width:100%;font-size:16px;padding:.65rem 1rem}
  .sims-suche{width:100%;margin-left:0;padding:.55rem 1rem}
  .sims-suche input{width:100%;font-size:16px}
  .sims-suche + .sims-world{margin-left:0}

  /* Dossier & Impressum als Bottom-Sheet */
  .backdrop{padding:0;align-items:flex-end}
  /* margin-top:auto: das globale margin:auto zentrierte kurze Fenster
     (Impressum, News) sonst mitten im Bild statt unten als Sheet. */
  .modal{max-width:none;border-radius:26px 26px 0 0;margin:auto 0 0;
    max-height:calc(100vh - 2.5rem);max-height:calc(100dvh - 2.5rem);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    animation:sheet .32s cubic-bezier(.22,.9,.3,1)}
  .modal .x.schwebend{width:40px;height:40px}
  .modal .av{width:104px;height:104px;margin-top:.9rem}
  .modal .bd{padding:.4rem 1.15rem calc(1.5rem + env(safe-area-inset-bottom,0px))}
  .modal h2{font-size:1.55rem}
  .info-grid{grid-template-columns:1fr 1fr;gap:.5rem}
  .mini .v{font-size:.84rem;word-break:break-word}

  /* Zeitleisten & Wartung */
  .round{min-width:236px}
  .mtn-form input{font-size:16px}

  /* Install-Hinweis über der Bottom-Navigation */
  .pwa-pop{bottom:calc(82px + env(safe-area-inset-bottom,0px))}

  .footer{padding:1.8rem .6rem .6rem}
}
@keyframes sheet{from{transform:translateY(44px);opacity:0}to{transform:none;opacity:1}}

/* Sehr schmale Geräte */
@media(max-width:380px){
  .brand .nm{font-size:1.15rem}
  .tab{font-size:.56rem}
  .grid.sims{gap:.7rem}
  .info-grid{grid-template-columns:1fr}
}

/* ── Wartungsmodus ── */
.mtn{min-height:78vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1.2rem;gap:.4rem}
.mtn-scene{position:relative;height:130px;width:130px;margin-bottom:1.2rem}
.mtn-plumbob{position:absolute;left:50%;top:6px;width:56px;height:56px;transform:translateX(-50%) rotate(45deg);background:linear-gradient(135deg,var(--plumb-l,#34d399),var(--plumb,#10b981) 55%,var(--plumb-d,#059669));border-radius:12px;box-shadow:0 0 26px rgba(16,185,129,.55),inset 0 0 14px rgba(255,255,255,.35);animation:mtnFloat 2.6s ease-in-out infinite}
.mtn-shadow{position:absolute;left:50%;bottom:6px;width:64px;height:14px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(30,60,45,.28),transparent 70%);border-radius:50%;animation:mtnShadow 2.6s ease-in-out infinite}
@keyframes mtnFloat{0%,100%{transform:translateX(-50%) translateY(0) rotate(45deg)}50%{transform:translateX(-50%) translateY(-16px) rotate(45deg)}}
@keyframes mtnShadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.9}50%{transform:translateX(-50%) scale(.72);opacity:.55}}
.mtn-title{font-family:var(--display);font-size:clamp(1.7rem,4.5vw,2.6rem);color:var(--ink);margin:0}
.mtn-text{max-width:34rem;color:var(--ink-soft);font-weight:700;line-height:1.65;margin:.4rem 0 1.4rem}
.mtn-form{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.mtn-form input{padding:.85rem 1.2rem;border:2.5px solid #dfe9e2;border-radius:999px;font:inherit;font-weight:700;min-width:15rem;text-align:center;background:#fff}
.mtn-form input:focus{outline:none;border-color:var(--plumb);box-shadow:0 0 0 4px rgba(16,185,129,.15)}
.mtn-form button{padding:.85rem 1.6rem;border:none;border-radius:999px;background:linear-gradient(135deg,var(--plumb),var(--plumb-d,#059669));color:#fff;font:inherit;font-weight:900;cursor:var(--c-hand);box-shadow:0 10px 22px -10px rgba(16,150,100,.7);transition:transform .2s,box-shadow .2s}
.mtn-form button:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(16,150,100,.8)}
.mtn-form button:disabled{opacity:.6;cursor:var(--c-warten);transform:none}
.mtn-err{color:#e11d48;font-weight:800;font-size:.9rem;margin-top:.9rem}
.shake{animation:mtnShake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes mtnShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.mtn-badge{position:fixed;right:1rem;bottom:1rem;z-index:60;background:#fff7ed;border:2px solid #fdba74;color:#9a3412;font-weight:800;font-size:.78rem;padding:.55rem .95rem;border-radius:999px;box-shadow:0 10px 24px -12px rgba(120,60,10,.45)}
@media (prefers-reduced-motion:reduce){.mtn-plumbob,.mtn-shadow{animation:none}.shake{animation:none}}

/* ═══════ NEWS-FEED (ehemals Rotation) ═══════ */
.news-topics{margin-top:.4rem}
.news-feed{display:grid;grid-template-columns:1fr;gap:1.2rem;max-width:820px;margin:0 auto}
.news-card{padding:0;overflow:hidden;text-align:left}
.news-card .ncov{display:block;width:100%;max-height:340px;object-fit:cover;border-bottom:3px solid var(--line,#eef2f0)}
.news-card .nin{padding:1.15rem 1.4rem 1.25rem}
.news-card h3{font-family:var(--display);font-size:1.35rem;margin:.35rem 0 .5rem;line-height:1.25}
.nmeta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ntopic{display:inline-block;background:#e6fbf3;border:2px solid #bdeedd;color:#0c7d5a;font-weight:800;font-size:.72rem;padding:.15rem .6rem;border-radius:999px}
.ndate{color:var(--ink-soft);font-weight:700;font-size:.78rem}
.nbody{line-height:1.65;color:var(--ink);font-size:.97rem;overflow-wrap:anywhere}
.nbody p{margin:.55rem 0}
.nbody h2{font-family:var(--display);font-size:1.15rem;margin:1rem 0 .35rem}
.nbody h3,.nbody h4{font-family:var(--display);font-size:1.02rem;margin:.9rem 0 .3rem}
.nbody ul,.nbody ol{margin:.5rem 0 .5rem 1.35rem;padding:0}
.nbody li{margin:.25rem 0}
.nbody blockquote{margin:.7rem 0;padding:.5rem .9rem;border-left:4px solid var(--plumb,#7ed957);background:#f4fbf3;border-radius:.5rem;font-style:italic}
.nbody a{color:#0c7d5a;font-weight:800;text-decoration:underline}
.nbody img{max-width:100%;height:auto;border-radius:.8rem;margin:.5rem 0;display:block}
.nfoot{margin-top:.85rem}
.nfam{cursor:var(--c-hand);font-family:inherit}
.nfam:hover{filter:brightness(.96)}
/* News als Kacheln: Anreißer im Raster, der ganze Beitrag im Fenster.
   Die Kacheln einer Reihe sind gleich hoch, der Fuß sitzt immer unten. */
.grid.news{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.news-tile{display:flex;flex-direction:column}
.news-tile .ncov{aspect-ratio:16/9}
.news-tile .nin{flex:1;display:flex;flex-direction:column}
.news-tile h3{font-size:1.15rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.nteaser{margin:0 0 1rem;color:var(--ink-soft);font-size:.92rem;line-height:1.55;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.news-tile .nfoot{margin-top:auto;display:flex;align-items:center;flex-wrap:wrap;gap:.6rem}
/* --plumb-d erreicht auf der Tafel nur rund 3,5:1 — für die einzige
   Handlungsaufforderung der Kachel zu wenig, daher dunkler gemischt. */
.nmehr{margin-left:auto;font:inherit;font-weight:800;font-size:.9rem;padding:.3rem 0;
  color:color-mix(in srgb,var(--plumb) 60%,#000);background:none;border:0;cursor:var(--c-hand)}
/* Die ganze Kachel ist klickbar; der Familien-Knopf liegt darüber. */
.nmehr::after{content:"";position:absolute;inset:0}
.news-tile .nfam{position:relative;z-index:1}
/* Reaktionen auch auf der Kachel anklickbar; die leere Fläche der Leiste
   öffnet weiter den Beitrag. */
.news-tile .reaktionen{z-index:1;pointer-events:none}
/* Gleich hoch mit und ohne Emoji — sonst stünde „Weiterlesen" in einer
   Reihe mit gemischten Reaktionen um ein paar Punkte versetzt. */
.news-tile .rchip{pointer-events:auto;min-height:2.1rem}
.news-tile:hover .nmehr{text-decoration:underline}
/* Im Fenster ist der Beitrag keine eigene Tafel, sondern das Fenster selbst. */
.news-modal .news-card{background:none;border:0;box-shadow:none}
.news-modal .nmeta{padding-right:2.8rem}
/* Auf dem iPhone liegt das Sheet unten an — Platz für die Home-Leiste. */
.news-modal .news-card .nin{padding-bottom:calc(1.2rem + env(safe-area-inset-bottom,0px))}

/* Legende: Feindschaft gestrichelt */
.legend i.dashline{background:repeating-linear-gradient(90deg,#b3261e 0 6px,transparent 6px 10px);height:4px}
.legend i.dashline.past{background:repeating-linear-gradient(90deg,#8a94a6 0 4px,transparent 4px 9px)}
/* ── Volkszählung: klickbare Kategorien + Detail-Liste ── */
.bar-row.clickable,.cstat.clickable{cursor:var(--c-hand);transition:background .15s ease,transform .15s ease}
.bar-row.clickable{border-radius:.55rem;padding:.15rem .35rem;margin:0 -.35rem}
.bar-row.clickable:hover,.bar-row.clickable:focus-visible{background:var(--tafel-3)}
.bar-row.clickable:hover .lab{color:var(--plumb-d)}
/* Vermögen je Familie (Volkszählung): Balken als echte Knöpfe, Betrag braucht Platz */
button.bar-row{width:calc(100% + .7rem);border:0;background:none;font:inherit;color:inherit;text-align:left}
.bars.geld .lab{width:38%}
.bars.geld .track,.bars.geld .fill{display:block}   /* im Knopf stehen spans statt divs */
.bars.geld .val{width:4.8rem;text-align:right;white-space:nowrap}
.cstat.clickable:hover,.cstat.clickable:focus-visible{border-color:var(--plumb)}
.simlist{display:flex;flex-direction:column;gap:.45rem;max-height:56vh;overflow:auto;padding-right:.2rem}
.simlist-row{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;border:1px solid var(--line,#e6e3da);background:#fff;border-radius:.8rem;padding:.5rem .7rem;cursor:var(--c-hand);font:inherit;transition:background .15s ease,border-color .15s ease}
.simlist-row:hover{background:#f4faf1;border-color:#bfe8a9}
/* Ohne das Zuruecksetzen erbt das Bild hier margin:-70px auto 0 von
   .modal .av (dem Portraet im Steckbrief) und rutscht aus seiner Zeile. */
.simlist-row .av{width:38px;height:38px;margin:0;border:0;box-shadow:none;border-radius:8px;
  overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.simlist-row .av img{object-position:center 20%}
.simlist-row .av .ic.platzhalter{width:55%;height:55%}
.simlist-row .av img{width:100%;height:100%;object-fit:cover}
.simlist-row .nm{font-weight:800;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.simlist-row .meta{font-size:.78rem;color:var(--ink-soft,#8a8577);font-weight:600;white-space:nowrap}
/* Perfect Matches: eine Zeile je Paar, jeder Sim ein eigener Knopf. Goldgrund
   wie .rel-line.chemie-voll im Steckbrief. */
.paar-row,.paar-row:hover{cursor:var(--c-pfeil);flex-wrap:wrap;gap:.35rem .5rem;border-color:#f3dc9a;
  background:linear-gradient(90deg,rgba(255,206,84,.26),rgba(255,206,84,.07))}
.paar-sim{display:flex;align-items:center;gap:.6rem;flex:1 1 10rem;min-width:0;padding:.2rem;border:0;border-radius:.6rem;
  background:none;font:inherit;color:inherit;text-align:left;cursor:var(--c-hand)}
.paar-sim:hover,.paar-sim:focus-visible{background:rgba(255,255,255,.75)}
.paar-blitze{flex:none;color:#ff6fae;letter-spacing:-1px}
.gedge.foe{opacity:.9}
.eheart{pointer-events:none}

/* ═══════ DOSSIER-GALERIE + LIGHTBOX ═══════ */
.gal{display:flex;gap:.55rem;flex-wrap:wrap;justify-content:center;margin:.4rem 0 .2rem}
.gal-th{width:74px;height:74px;border-radius:.75rem;border:3px solid #fff;box-shadow:var(--shadow-sm);padding:0;cursor:var(--c-hand);background:#f1f5f9;transition:.15s}
.gal-th:hover{transform:scale(1.06)}
/* Das aktuelle Portraet ist im Streifen markiert, damit klar ist, wo man steht. */
.gal-th.aktuell{border-color:var(--plumb)}
/* Portraet und Avatar oeffnen die Grossansicht. */
.zoombar{cursor:var(--c-lupe)}
.gal-th img{width:100%;height:100%;object-fit:cover;display:block;border-radius:.5rem}
.lightbox{position:fixed;inset:0;background:rgba(10,20,16,.92);z-index:80;display:flex;align-items:center;justify-content:center;padding:2.2rem;backdrop-filter:blur(4px)}
.lightbox img{max-width:min(94vw,1100px);max-height:86vh;border-radius:1rem;box-shadow:0 30px 70px -20px rgba(0,0,0,.7);background:#fff}
.lb-x{position:absolute;top:.9rem;right:.9rem;width:2.6rem;height:2.6rem;border-radius:50%;background:#fff;color:#0f172a;font-weight:900;font-size:1.1rem;cursor:var(--c-hand);box-shadow:var(--shadow-sm)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:2.8rem;height:2.8rem;border-radius:50%;background:#fff;color:#0f172a;font-weight:900;font-size:1.5rem;line-height:1;cursor:var(--c-hand);box-shadow:var(--shadow-sm)}
.lb-prev{left:.9rem}.lb-next{right:.9rem}
.lb-count{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);color:#fff;font-weight:800;font-size:.85rem;background:rgba(0,0,0,.4);padding:.25rem .8rem;border-radius:999px}
@media (max-width:700px){
  .news-card .nin{padding:1rem 1.05rem 1.1rem}
  .news-card h3{font-size:1.18rem}
  .lightbox{padding:1rem}
  .lb-nav{width:2.4rem;height:2.4rem}
}

/* ═══════ CHEMIE-RECHNER (chemie-rechner.js) ═══════
   Zwei Sim-Tafeln links und rechts, das Ergebnis als Glasscheibe in der
   Mitte. Gebaut aus denselben Teilen wie der Rest: Tafeln, Pillen, die
   Kopfzeilen der Steckbrief-Bloecke, die Persoenlichkeitsbalken und die
   rosa Blitze aus der Beziehungsliste. Alle Klassen beginnen mit chem-,
   damit nichts mit .card, .chip, .tag oder .legend zusammenstoesst. */
.chem-wurzel{
  /* --plumb-d und das Wiki-Rot sind als Schrift auf der Tafel zu hell (unter 4,5:1),
     daher fuer Zahlen und Text dunkler gemischt. */
  --chem-gruen:color-mix(in srgb,var(--plumb) 55%,#000);--chem-rot:#b3261e;
  animation:fade .3s ease-out}
#view.kein-einblenden .chem-wurzel{animation:none}
.chem-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.chem-duel{display:grid;gap:1rem;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(320px,390px) minmax(0,1fr);
  reading-flow:grid-rows} /* Tab-Reihenfolge folgt der sichtbaren Anordnung (Chromium ab 137) */
.chem-sim{min-width:0;padding:.9rem 1rem 1rem;
  background:linear-gradient(180deg,var(--tafel),var(--tafel-2));border:1.5px solid var(--kante);
  border-radius:var(--r-tafel);box-shadow:inset 0 1px 0 var(--licht)}

/* Kopf: Kachel wie das Bild einer Sim-Karte (Farbe der Lebensphase, Zeichen
   des Geschlechts), daneben der Name als grosse Ueberschrift zum Anklicken. */
.chem-sim-head{display:flex;align-items:center;gap:.55rem}
.chem-avatar{width:44px;height:44px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-kachel);border:2px solid #fff;box-shadow:var(--shadow-sm);
  background:#d6f0e6;color:var(--ink-soft)}
.chem-avatar .ic{width:58%;height:58%}
.chem-avatar[data-stage=teen]{background:#cfeaff}
.chem-avatar[data-stage=ya]{background:#e3d6ff}
.chem-avatar[data-stage=elder]{background:#e8e8e8}
.chem-name{flex:1;min-width:0;font:600 1.45rem/1.2 var(--display);color:var(--ink);
  padding:.25rem .5rem;border:1.5px solid transparent;border-radius:var(--r-knopf);background:transparent;transition:.15s}
.chem-name::placeholder{color:var(--ink-soft)}
.chem-name:hover{border-color:var(--kante)}
.chem-leeren{flex:none;padding:.4rem .85rem;border-radius:var(--r-pille);font-weight:800;font-size:.82rem;
  background:var(--tafel);color:var(--ink-soft);border:1.5px solid var(--kante);box-shadow:inset 0 1px 0 var(--licht);transition:.15s}
.chem-leeren:hover{border-color:var(--plumb);color:var(--chem-gruen)}

/* Abschnitte: Kopfzeile wie .subhead im Steckbrief */
.chem-grp{border:0;margin:.85rem 0 0;padding:0;min-width:0}
.chem-grp legend,.chem-grp summary{display:flex;align-items:center;gap:.5rem;width:100%;
  font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink);
  padding:.45rem .85rem;margin-bottom:.7rem;border-radius:var(--r-tafel);
  background:linear-gradient(180deg,var(--tafel-3),var(--tafel-2));border:1.5px solid var(--kante)}
.chem-grp legend .ic,.chem-grp summary .ic{color:var(--plumb-d)}
fieldset.chem-grp legend{float:left}
fieldset.chem-grp legend + *{clear:both}
.chem-grp summary{cursor:var(--c-hand);list-style:none;transition:border-color .15s}
.chem-grp summary::-webkit-details-marker{display:none}
.chem-grp summary:hover{border-color:var(--plumb)}
details.chem-grp:not([open]) summary{margin-bottom:0}
.chem-auf{margin-left:auto;display:grid;transition:transform .2s}
details[open] .chem-auf{transform:rotate(180deg)}
.chem-pers-sum{margin-left:auto;font:800 .76rem var(--body);color:var(--ink-soft)}

/* Felder: Pillen wie die Welten-Auswahl und das Suchfeld der Beziehungen */
.chem-wurzel label{display:grid;gap:.3rem;font-weight:800;font-size:.76rem;color:var(--ink-soft)}
.chem-wurzel select,.chem-wurzel input[type=number]{width:100%;min-height:2.5rem;padding:.4rem .9rem;
  font:inherit;font-weight:700;font-size:.9rem;color:var(--ink);cursor:var(--c-hand);
  background:var(--tafel);border:1.5px solid var(--kante);border-radius:var(--r-pille);
  box-shadow:inset 0 1px 0 var(--licht);transition:border-color .15s}
/* Eigener Pfeil statt Browser-Pfeil (Farbe = --ink-soft, im data-URI geht keine Variable) */
.chem-wurzel select{-webkit-appearance:none;appearance:none;padding-right:2.3rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235a6b78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:.75rem}
/* Zahlenfelder ohne Browser-Pfeilchen; Tippen und Pfeiltasten gehen weiter */
.chem-wurzel input[type=number]{cursor:var(--c-text);padding-right:.4rem;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.chem-wurzel input[type=number]::-webkit-inner-spin-button,
.chem-wurzel input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* Eigene Pfeile hoch/runter rechts im Zahlenfeld (chemie-rechner.js, data-schritt) */
.chem-zahl{position:relative;display:block}
.chem-wurzel .chem-zahl input{padding-right:2rem}
.chem-stufen{position:absolute;top:3px;bottom:3px;right:.5rem;display:flex;flex-direction:column;justify-content:center;gap:2px}
.chem-stufen button{display:grid;place-items:center;width:1.35rem;height:calc(50% - 1px);max-height:1rem;padding:0;
  border:0;border-radius:6px;background:none;color:var(--ink-soft);cursor:var(--c-hand);transition:background .15s,color .15s}
.chem-stufen button:hover{background:var(--tafel-3);color:var(--plumb-d)}
.chem-stufen button:active{background:var(--kante)}
.chem-stufen .ic{width:.7rem;height:.7rem}
.chem-stufen button:first-child .ic{transform:rotate(180deg)}
.chem-wurzel select:hover,.chem-wurzel input[type=number]:hover{border-color:var(--kante-d)}
.chem-wurzel select:focus,.chem-wurzel input[type=number]:focus,.chem-name:focus{outline:none;background-color:#fff;
  border-color:var(--plumb);box-shadow:0 0 0 4px color-mix(in srgb, var(--plumb) 18%, transparent)}
/* Aufgeklappte Liste im Tracker-Look, wo der Browser das kann (Chrome ab 135).
   Sonst bleibt die Liste vom System, das Feld selbst sieht trotzdem gleich aus. */
@supports (appearance: base-select){
  .chem-wurzel select,.chem-wurzel ::picker(select){appearance:base-select}
  .chem-wurzel select::picker-icon{display:none}
  /* Die Liste ist ein eigenes Browser-Element: die ::-webkit-scrollbar-Regeln
     greifen dort nicht, und Windows setzt sonst Pfeil-Knöpfe in die runden
     Ecken. Darum ohne Rollbalken wie die Hauptseite (html); Mausrad, Touch und
     Tastatur rollen weiter. Hoch genug für alle zwölf Sternzeichen. */
  .chem-wurzel ::picker(select){margin-block:.3rem;padding:.35rem;max-height:min(27rem,70vh);
    background:var(--tafel);border:1.5px solid var(--kante);border-radius:var(--r-tafel);box-shadow:var(--shadow);
    scrollbar-width:none}
  .chem-wurzel option{padding:.45rem .7rem;border-radius:var(--r-kachel);font-weight:700;font-size:.88rem;color:var(--ink);cursor:var(--c-hand)}
  .chem-wurzel option::checkmark{color:var(--plumb-d)}
  .chem-wurzel option:hover,.chem-wurzel option:focus-visible{background:var(--tafel-3);outline:none}
  .chem-wurzel option:checked{background:color-mix(in srgb, var(--plumb) 16%, #fff);color:var(--chem-gruen)}
  .chem-wurzel option:disabled{opacity:.45;cursor:var(--c-verboten);background:none}
  .chem-wurzel optgroup{padding-top:.3rem;font-weight:900;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
  .chem-wurzel optgroup option{letter-spacing:0;text-transform:none}
}
/* Dieselbe Liste für Browser ohne base-select (Firefox), gebaut in chemie-rechner.js */
.chem-liste{position:fixed;z-index:65;max-height:min(27rem,70vh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  padding:.35rem;background:var(--tafel);border:1.5px solid var(--kante);border-radius:var(--r-tafel);box-shadow:var(--shadow);
  outline:none;font-weight:700;font-size:.88rem;color:var(--ink)}
.chem-liste::-webkit-scrollbar{display:none}
.chem-liste [role=option]{display:flex;align-items:center;gap:.45rem;padding:.45rem .7rem;border-radius:var(--r-kachel);cursor:var(--c-hand);white-space:nowrap}
.chem-liste [role=option]::before{content:"✓";width:.9em;color:var(--plumb-d);visibility:hidden}
.chem-liste [role=option]:hover,.chem-liste .chem-aktiv{background:var(--tafel-3)}
.chem-liste [aria-selected=true]{background:color-mix(in srgb, var(--plumb) 16%, #fff);color:var(--chem-gruen)}
.chem-liste [aria-selected=true]::before{visibility:visible}
.chem-liste [aria-disabled=true]{opacity:.45;cursor:var(--c-verboten);background:none}
.chem-liste.chem-tasten .chem-aktiv{box-shadow:inset 0 0 0 2px var(--plumb-d)}
.chem-gruppe{padding:.5rem .7rem .2rem;font-weight:900;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.chem-grp > label,.chem-grp > .chem-cols2,.chem-grp > .chem-chips{margin-bottom:.6rem}
.chem-cols2{display:grid;gap:.6rem .7rem;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr))}
.chem-hint{margin:.35rem .15rem 0;font-weight:700;font-size:.78rem;color:var(--ink-soft)}
.chem-skills{display:grid;gap:.55rem .6rem;grid-template-columns:repeat(auto-fill,minmax(7.2rem,1fr));margin-bottom:.6rem}

/* Persoenlichkeit: zehn Kaestchen wie die Balken im Steckbrief. Fuellung ueber
   --v, die Luecken schneidet die Maske. Der Regler ist hoeher als die
   Kaestchen, damit er sich auch mit dem Finger gut treffen laesst. */
.chem-axis{display:grid;grid-template-columns:1fr 2.2ch;column-gap:.7rem;margin-bottom:.35rem}
.chem-ends{display:flex;justify-content:space-between;gap:.5rem;font-weight:800;font-size:.74rem;color:var(--ink-soft)}
.chem-bar{display:block;margin:2px 0;border-radius:6px}
.chem-bar:has(:focus-visible){outline:3px solid var(--plumb-d);outline-offset:1px}
.chem-axis output{grid-row:1/3;grid-column:2;align-self:end;text-align:right;
  font:600 1.15rem/1.45 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.chem-pips{-webkit-appearance:none;appearance:none;display:block;width:100%;height:26px;margin:0;
  cursor:var(--c-hand);touch-action:pan-y;border:0;
  background:linear-gradient(90deg,#a855f7,#d8b4fe) 0 50%/calc(var(--v) * 10%) 14px no-repeat,
    linear-gradient(var(--kante),var(--kante)) 0 50%/100% 14px no-repeat;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 3px),transparent 0 10%);
  mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 3px),transparent 0 10%)}
.chem-pips:focus-visible{outline:none}
.chem-pips::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:26px;background:transparent;border:0}
.chem-pips::-moz-range-thumb{width:16px;height:26px;background:transparent;border:0}
.chem-pips::-moz-range-track{background:transparent}

/* Kaestchen zum Ankreuzen: Pillen wie die Reaktionen unter den News */
.chem-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chem-wurzel .chem-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .75rem .35rem .55rem;cursor:var(--c-hand);
  border-radius:var(--r-pille);background:var(--tafel);border:1.5px solid var(--kante);box-shadow:inset 0 1px 0 var(--licht);
  font-weight:800;font-size:.82rem;color:var(--ink-soft);transition:.15s}
.chem-chip:hover{border-color:var(--plumb)}
/* Eigenes Kästchen statt Browser-Checkbox: gefüllt mit weißem Haken, wenn an */
.chem-chip input{-webkit-appearance:none;appearance:none;margin:0;width:16px;height:16px;flex:none;cursor:var(--c-hand);
  display:grid;place-content:center;border:1.5px solid var(--kante-d);border-radius:5px;background:#fff;transition:.15s}
.chem-chip input::before{content:"";width:9px;height:9px;background:#fff;transform:scale(0);transition:transform .12s;
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
.chem-chip input:checked{background:var(--plumb-d);border-color:var(--plumb-d)}
.chem-chip input:checked::before{transform:scale(1)}
.chem-chip input:focus-visible{outline:none}
.chem-wurzel .chem-chip:has(input:checked){background:color-mix(in srgb, var(--plumb) 16%, #fff);border-color:var(--plumb);color:var(--chem-gruen)}
.chem-chip:has(input:focus-visible){outline:3px solid var(--plumb-d);outline-offset:2px}

.chem-seen{margin-top:.1rem;padding:.6rem .75rem;border-radius:var(--r-kachel);
  background:var(--tafel);border:1.5px dashed var(--kante-d)}
.chem-seen p{margin:0 0 .4rem;font-weight:800;font-size:.76rem;color:var(--ink-soft)}
.chem-tags{display:flex;flex-wrap:wrap;gap:.3rem}
.chem-tag{font-weight:800;font-size:.74rem;padding:.2rem .6rem;border-radius:var(--r-pille);background:var(--tafel-3);color:var(--ink)}
.chem-tag.chem-via{background:#fff5d6;color:#7a5600}
.chem-via-list{margin:.5rem 0 0;padding:0;list-style:none;font-weight:700;font-size:.74rem;color:var(--ink-soft)}

/* Ergebnis: dieselbe Milchglas-Scheibe wie die Fenster, oben ein rosa Schimmer
   hinter den Blitzen. */
.chem-verdict{position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow:auto;overscroll-behavior:contain;
  padding:1rem 1.1rem 1.1rem;border-radius:var(--r-tafel);
  background:radial-gradient(120% 50% at 50% 0,color-mix(in srgb, var(--pink) 14%, transparent),transparent 70%),
    linear-gradient(180deg,color-mix(in srgb, var(--tafel) 88%, transparent),color-mix(in srgb, var(--tafel-2) 80%, transparent));
  background-attachment:local,scroll; /* der Schimmer rollt mit dem Inhalt weg */
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1.5px solid color-mix(in srgb, #fff 45%, var(--kante-d));
  box-shadow:var(--shadow),inset 0 1px 0 var(--licht),inset 0 0 0 1px rgba(255,255,255,.28)}
@supports (scrollbar-color: red blue) and (not selector(::-webkit-scrollbar)){
  .chem-verdict{scrollbar-width:thin;scrollbar-color:var(--roll-daumen) var(--roll-spur)}
}
/* Rollbalken der Scheibe: schmal, ohne Spur und oben/unten um die Rundung
   eingerückt, sonst ragt er über die abgerundeten Ecken. */
@supports selector(::-webkit-scrollbar){
  .chem-verdict::-webkit-scrollbar{width:10px}
  .chem-verdict::-webkit-scrollbar-track{background:transparent;margin-block:calc(var(--r-tafel) + 4px)}
  .chem-verdict::-webkit-scrollbar-thumb,
  .chem-verdict::-webkit-scrollbar-thumb:hover,
  .chem-verdict::-webkit-scrollbar-thumb:active{border:3px solid transparent;background-clip:padding-box}
}
.chem-meter{display:flex;justify-content:center;align-items:center;gap:.55rem;height:96px}
.chem-bolt{position:relative;display:block}
.chem-bolt svg{display:block;height:84px;width:auto;fill:var(--tafel-3);stroke:var(--kante-d);stroke-width:1.2;stroke-linejoin:round}
.chem-bolt.chem-an svg{fill:var(--pink);stroke:#fff;stroke-width:1.6;
  filter:drop-shadow(0 4px 10px color-mix(in srgb, var(--pink) 55%, transparent))}
.chem-bolt.chem-x svg{fill:#e11d48;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 4px 10px rgba(225,29,72,.4))}
.chem-bolt.chem-x::after{content:'';position:absolute;left:-30%;right:-30%;top:46%;height:9px;border-radius:5px;
  background:#fff;box-shadow:0 0 0 3px #e11d48;transform:rotate(-38deg)}
.chem-meter.chem-off .chem-bolt svg{opacity:.4}
.chem-meter.chem-zap .chem-bolt svg{animation:chem-zap .55s cubic-bezier(.2,1.4,.4,1)}
.chem-meter.chem-zap .chem-bolt:nth-child(2) svg{animation-delay:.07s}
.chem-meter.chem-zap .chem-bolt:nth-child(3) svg{animation-delay:.14s}
@keyframes chem-zap{
  0%{transform:scale(.72) rotate(-10deg);filter:brightness(1.35) drop-shadow(0 0 22px color-mix(in srgb, var(--pink) 80%, #fff))}
  100%{transform:none}}

.chem-score{text-align:center;margin:.35rem 0 0;font-weight:800;font-size:.74rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft)}
.chem-score strong{display:block;font:700 3rem/1 var(--display);letter-spacing:0;text-transform:none;
  color:var(--ink);font-variant-numeric:tabular-nums}
.chem-verdict-text{text-align:center;margin:.35rem 0 .8rem;font:600 1.08rem/1.3 var(--display);color:var(--ink)}
.chem-blocked{margin:0 0 .6rem;padding:.5rem .75rem;border-radius:var(--r-knopf);
  background:#fef2f2;border:1.5px solid #fecaca;color:var(--chem-rot);font-weight:800;font-size:.82rem}
.chem-dirs{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.8rem}
.chem-dirs div{display:grid;align-content:space-between;gap:.2rem;padding:.55rem .7rem;border-radius:var(--r-kachel);
  background:linear-gradient(180deg,var(--tafel),var(--tafel-2));border:1.5px solid var(--kante);box-shadow:inset 0 1px 0 var(--licht)}
.chem-dirs span{font-weight:800;font-size:.74rem;color:var(--ink-soft);overflow-wrap:anywhere}
.chem-dirs b{font:600 1.4rem/1.1 var(--display);font-variant-numeric:tabular-nums}
.chem-rel{margin-bottom:1rem}

.chem-calc{width:100%;border-collapse:collapse;font-size:.84rem;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-bottom:.9rem}
.chem-calc caption{text-align:left;font:600 1rem var(--display);color:var(--ink);padding:0 .1rem .3rem}
.chem-calc th,.chem-calc td{padding:.42rem .25rem;border-bottom:1px dashed var(--kante-d);vertical-align:top}
.chem-calc th{text-align:left;font-weight:800}
.chem-calc thead th{font-size:.74rem;color:var(--ink-soft);text-align:right;overflow-wrap:anywhere}
.chem-calc td{text-align:right;white-space:nowrap}
.chem-calc small{display:block;font-size:.72rem;font-weight:700;color:var(--ink-soft);white-space:normal}
.chem-calc tfoot th,.chem-calc tfoot td{font-weight:900;border-bottom:0;border-top:2px solid var(--kante-d)}
.chem-final tfoot td{font:600 1.2rem var(--display)}
.chem-pos{color:var(--chem-gruen)} .chem-neg{color:var(--chem-rot)} .chem-zero{color:var(--ink-soft)}
.chem-notes{margin:0 0 .8rem;padding:.6rem .8rem .6rem 1.7rem;border-radius:var(--r-kachel);
  background:#fffbeb;border:1.5px solid #fde68a;font-weight:700;font-size:.8rem;line-height:1.45;color:var(--ink)}
.chem-notes li+li{margin-top:.35rem}
.chem-legend{margin:0 .1rem;font-weight:700;font-size:.76rem;line-height:1.45;color:var(--ink-soft)}

/* Kurzanzeige unten, sobald das Ergebnis nicht mehr neben den Sims steht:
   dieselbe dunkle Plakette wie der Hinweis auf der Karte. */
.chem-minibar{display:none}
.chem-meter.chem-mini{height:auto;gap:2px}
.chem-mini .chem-bolt svg{height:18px;fill:rgba(255,255,255,.22);stroke:rgba(255,255,255,.55);filter:none}
.chem-mini .chem-bolt.chem-an svg{fill:var(--pink);stroke:#fff}
.chem-mini .chem-bolt.chem-x svg{fill:#ff6b85;stroke:#fff}
.chem-mini .chem-bolt.chem-x::after{height:3px;box-shadow:0 0 0 1px #e11d48}

@media(max-width:1180px){
  .chem-duel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .chem-verdict{grid-column:1/-1;grid-row:1;position:static;max-height:none;overflow:visible;
    display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:.5rem 1.6rem;align-items:start}
  .chem-minibar{display:flex;align-items:center;gap:.7rem;position:fixed;z-index:45;left:50%;bottom:14px;
    transform:translateX(-50%);max-width:calc(100vw - 2rem);padding:.5rem 1.1rem;border-radius:var(--r-pille);
    background:rgba(24,48,38,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    color:#fff;font-weight:800;font-size:.86rem;box-shadow:var(--shadow)}
  .chem-minibar span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chem-minibar strong{font:600 1.1rem var(--display);font-variant-numeric:tabular-nums}
  html:has(.chem-duel){scroll-padding-bottom:80px}
}
@media(max-width:760px){
  .chem-duel{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .chem-verdict{display:block;grid-row:auto;order:3;padding:1rem .85rem}
  .chem-sim{padding:.8rem .8rem .9rem}
}
@media(max-width:700px){
  /* Ueber der festen Reiterleiste, nicht dahinter */
  .chem-minibar{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  /* Platz fuer die Kurzanzeige, sonst deckt sie am Seitenende die Fusszeile ab */
  html:has(.chem-duel) .app{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  html:has(.chem-duel){scroll-padding-bottom:150px}
  .chem-wurzel select,.chem-wurzel input[type=number]{font-size:16px} /* 16px verhindert den iOS-Auto-Zoom */
  .chem-name{font-size:1.3rem}
}

/* ═══ Perfekte Liebe (Reiter neben dem Chemie-Rechner) ═══ */
.liebe{display:grid;grid-template-columns:minmax(0,1fr) minmax(11rem,14rem) minmax(0,1.25fr);gap:1.2rem;align-items:start;margin-top:.4rem}
.liebe-links{padding:1.1rem;display:flex;flex-direction:column;gap:.7rem}
.liebe-label{font-weight:800;font-size:.78rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.liebe-wahl{width:100%;min-height:2.5rem;padding:.4rem .9rem;border:1.5px solid var(--kante);border-radius:var(--r-pille);font:inherit;font-weight:700;font-size:.9rem;
  background:var(--tafel);color:var(--ink);box-shadow:inset 0 1px 0 var(--licht);transition:border-color .15s}
.liebe-wahl:hover{border-color:var(--kante-d)}
.liebe-wahl:focus{outline:none;background-color:#fff;border-color:var(--plumb);box-shadow:0 0 0 4px color-mix(in srgb, var(--plumb) 18%, transparent)}
.liebe-suche{display:flex;margin-left:0}
.liebe-suche input{flex:1;min-width:0;width:auto}
/* Vorschlagsliste unter der Suche (app.js, ab 3 Zeichen): wie die aufgeklappte Liste im Rechner */
.liebe-suche-feld{position:relative}
.liebe-vorschlaege{position:absolute;left:0;right:0;top:calc(100% + .3rem);z-index:20;
  max-height:min(20rem,50vh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  padding:.35rem;background:var(--tafel);border:1.5px solid var(--kante);border-radius:var(--r-tafel);box-shadow:var(--shadow)}
.liebe-vorschlaege::-webkit-scrollbar{display:none}
.liebe-vorschlaege[hidden]{display:none}
.liebe-vorschlag{display:flex;align-items:center;gap:.6rem;padding:.35rem .55rem;border-radius:var(--r-kachel);cursor:var(--c-hand);color:var(--ink)}
.liebe-vorschlag:hover,.liebe-vorschlag.aktiv{background:var(--tafel-3)}
.liebe-vorschlag.aktiv{box-shadow:inset 0 0 0 2px var(--plumb-d)}
.liebe-vorschlag .av{flex:none;width:2.3rem;height:2.3rem;margin:0;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.liebe-vorschlag .av img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.liebe-vorschlag .av .ic{width:55%;height:55%}
.liebe-vorschlag b{font-weight:800;font-size:.88rem}
.liebe-vorschlag small{display:block;font-size:.74rem;font-weight:700;color:var(--ink-soft)}
.liebe-vorschlag mark{background:color-mix(in srgb,var(--plumb) 24%,transparent);color:inherit;border-radius:3px}
.liebe-vorschlag-leer{padding:.5rem .7rem;font-weight:700;font-size:.85rem;color:var(--ink-soft)}
@media(max-width:700px){.liebe-wahl,.sims-world{font-size:16px}} /* 16px verhindert den iOS-Auto-Zoom */
/* Auswahllisten außerhalb des Rechners (Perfekte Liebe, Welten-Filter bei Sims):
   derselbe Pfeil und dieselbe aufgeklappte Liste wie in .chem-wurzel */
.liebe-wahl,.sims-world{-webkit-appearance:none;appearance:none;padding-right:2.3rem;cursor:var(--c-hand);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235a6b78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:.75rem}
@supports (appearance: base-select){
  .liebe-wahl,.sims-world,.liebe-wahl::picker(select),.sims-world::picker(select){appearance:base-select}
  .liebe-wahl::picker-icon,.sims-world::picker-icon{display:none}
  .liebe-wahl::picker(select),.sims-world::picker(select){margin-block:.3rem;padding:.35rem;max-height:min(27rem,70vh);
    background:var(--tafel);border:1.5px solid var(--kante);border-radius:var(--r-tafel);box-shadow:var(--shadow);
    scrollbar-width:none}
  .liebe-wahl option,.sims-world option{padding:.45rem .7rem;border-radius:var(--r-kachel);font-weight:700;font-size:.88rem;color:var(--ink);cursor:var(--c-hand)}
  .liebe-wahl option::checkmark,.sims-world option::checkmark{color:var(--plumb-d)}
  .liebe-wahl option:hover,.liebe-wahl option:focus-visible,.sims-world option:hover,.sims-world option:focus-visible{background:var(--tafel-3);outline:none}
  .liebe-wahl option:checked,.sims-world option:checked{background:color-mix(in srgb, var(--plumb) 16%, #fff);color:color-mix(in srgb,var(--plumb) 55%,#000)}
  .liebe-wahl optgroup{padding-top:.3rem;font-weight:900;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
  .liebe-wahl optgroup option{letter-spacing:0;text-transform:none}
}
.liebe-sim{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;padding:.9rem .6rem;border:0;background:none;font:inherit;color:inherit;cursor:var(--c-hand);border-radius:var(--r-tafel)}
.liebe-sim:hover,.liebe-sim:focus-visible{background:var(--tafel-2)}
.liebe-sim.leer{cursor:var(--c-pfeil);color:var(--ink-soft)}
.liebe-sim .av,.liebe-sim.leer > .ic{width:7.5rem;height:7.5rem;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);margin:0;background:var(--tafel-2)}
.liebe-sim .av img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.liebe-sim b{font-family:var(--display);font-size:1.25rem}
.liebe-sim small{color:var(--ink-soft);font-weight:700}
.liebe-fehlt{margin:0;font-size:.78rem;font-weight:700;color:#9a3412;background:#fff7ed;border:1px dashed #fdba74;border-radius:.6rem;padding:.5rem .7rem}
/* Schalter „Vergebene zeigen“ (app.js): klein und leise unter der Auswahl. Eigener Schieber statt
   Browser-Checkbox; aus = grauer Knopf links, an = weißer Knopf rechts auf dunklem Akzentgrün */
/* „Weitere Einstellungen“: zuklappbar, Pfeil .chem-auf wie im Chemie-Rechner */
.liebe-einst{padding-top:.65rem;border-top:1px solid var(--kante)}
.liebe-einst summary{display:flex;align-items:center;gap:.5rem;min-height:1.75rem;list-style:none;cursor:var(--c-hand);border-radius:var(--r-kachel);
  font-weight:800;font-size:.82rem;color:var(--ink-soft);transition:color .15s}
.liebe-einst summary::-webkit-details-marker{display:none}
.liebe-einst summary:hover{color:var(--ink)}
.liebe-einst summary:focus-visible{outline:3px solid var(--plumb-d);outline-offset:2px}
.liebe-einst summary small{padding:.05rem .5rem;border-radius:var(--r-pille);font-size:.72rem;font-weight:800;color:#fff;background:color-mix(in srgb,var(--plumb-d) 80%,#000)}
.liebe-schalter{padding-top:.6rem}
.liebe-schalter label{display:flex;align-items:center;gap:.55rem;width:fit-content;min-height:1.75rem;cursor:var(--c-hand);font-weight:800;font-size:.82rem;color:var(--ink-soft)}
.liebe-schalter input{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:2.3rem;height:1.35rem;margin:0;cursor:inherit;
  border:1.5px solid var(--kante-d);border-radius:var(--r-pille);background:#fff;transition:background-color .15s,border-color .15s}
.liebe-schalter input::before{content:"";position:absolute;top:2px;left:2px;width:calc(1.35rem - 7px);height:calc(1.35rem - 7px);border-radius:50%;
  background:var(--ink-soft);transition:transform .15s,background-color .15s}
.liebe-schalter label:hover input{border-color:var(--plumb)}
.liebe-schalter input:checked{background:color-mix(in srgb,var(--plumb-d) 80%,#000);border-color:transparent}
.liebe-schalter input:checked::before{background:#fff;transform:translateX(.95rem)}
.liebe-schalter input:focus-visible{outline:3px solid var(--plumb-d);outline-offset:2px}
.liebe-schalter small{display:block;margin:.1rem 0 0 2.85rem;font-size:.72rem;font-weight:700;line-height:1.35;color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){.liebe-schalter input,.liebe-schalter input::before{transition:none}}
@media (forced-colors:active){.liebe-schalter input{border-color:CanvasText}.liebe-schalter input::before{background:CanvasText}
  .liebe-schalter input:checked{background:Highlight}.liebe-schalter input:checked::before{background:HighlightText}}
.liebe-mitte{display:flex;flex-direction:column;align-items:center;gap:1rem;padding-top:2.5rem}
/* Perfekte Liebe: der Knopf ist ein glänzendes Herz (Form und Glanz als SVG in app.js), das sanft schlägt */
.liebe-knopf{--w:12rem;position:relative;display:grid;place-items:center;width:var(--w);aspect-ratio:100/92;border:0;padding:0;background:none;
  cursor:var(--c-hand);color:#fff;font:700 1.12rem/1.15 var(--display);text-align:center;
  filter:drop-shadow(0 14px 18px rgba(157,23,77,.45));transition:transform .18s ease}
.liebe-knopf .form{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.liebe-knopf span{position:relative;top:-6%;max-width:62%;text-shadow:0 1px 2px rgba(120,10,60,.35)}
.liebe-knopf:not(:disabled){animation:liebe-schlag 2.2s ease-in-out infinite}
.liebe-knopf:hover:not(:disabled){animation-duration:1.1s}
.liebe-knopf:focus-visible{outline:2px solid transparent;outline-offset:4px}
.liebe-knopf:focus-visible .herz-pfad{stroke:#fff;stroke-width:3}
.liebe-knopf:focus-visible .form{filter:drop-shadow(0 0 1px var(--berry)) drop-shadow(0 0 3px var(--berry))}
.liebe-knopf:disabled{filter:grayscale(.7) drop-shadow(0 10px 14px rgba(157,23,77,.25));opacity:.55;cursor:var(--c-verboten)}
@keyframes liebe-schlag{0%,60%,100%{transform:scale(1)}10%{transform:scale(1.06)}20%{transform:scale(.99)}30%{transform:scale(1.04)}}
/* Suche läuft: das Herz klopft schnell statt blass zu werden (gesperrt bleibt es trotzdem) */
.liebe-knopf.sucht,.liebe-knopf.sucht:hover{cursor:progress;animation:liebe-klopfen .5s ease-in-out infinite}
@keyframes liebe-klopfen{0%,100%{transform:scale(1)}30%{transform:scale(1.09)}55%{transform:scale(.98)}75%{transform:scale(1.04)}}
/* Ergebnis da: ein kleiner Hüpfer, danach wieder der ruhige Herzschlag */
.liebe-knopf.hopp:not(:disabled){animation:liebe-hopp .6s cubic-bezier(.3,1.6,.5,1),liebe-schlag 2.2s ease-in-out .6s infinite}
.liebe-knopf.hopp:hover:not(:disabled){animation-duration:.6s,1.1s}
@keyframes liebe-hopp{40%{transform:translateY(-8px) scale(1.12)}70%{transform:translateY(0) scale(.96)}}
/* Kleine Herzen, die beim Ergebnis aus dem großen Herz aufsteigen (Position setzt app.js) */
.liebe-mitte{position:relative}
.liebe-funken{position:absolute;width:0;height:0;pointer-events:none;z-index:3}
.liebe-funken i{position:absolute;left:0;top:0;width:1.15rem;height:1.06rem;margin:-.53rem 0 0 -.58rem;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cdefs%3E%3CradialGradient id='g' cx='35%25' cy='28%25' r='80%25'%3E%3Cstop offset='0' stop-color='%23f9a8d4'/%3E%3Cstop offset='.55' stop-color='%23ec4899'/%3E%3Cstop offset='1' stop-color='%23be185d'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M50 90C24 70 3 54 3 30 3 13 15 3 29 3c10 0 17 6 21 14 4-8 11-14 21-14 14 0 26 10 26 27 0 24-21 40-47 60Z'/%3E%3C/svg%3E") center/contain no-repeat;animation:liebe-funke 1.6s ease-out var(--d) forwards}
.liebe-funken i:nth-child(3n){filter:hue-rotate(-12deg) saturate(1.3)}
.liebe-funken i:nth-child(3n+1){filter:brightness(1.15)}
@keyframes liebe-funke{0%{opacity:0;transform:translate(0,0) scale(calc(var(--s) * .3)) rotate(0)}
  15%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(var(--s)) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){.liebe-knopf:not(:disabled),.liebe-knopf.sucht,.liebe-knopf.sucht:hover,.liebe-knopf.hopp:not(:disabled){animation:none}
  .liebe-knopf:hover:not(:disabled){transform:scale(1.04)}.liebe-funken{display:none}}
@media (forced-colors:active){
  .liebe-knopf{aspect-ratio:auto;padding:1rem 1.4rem;border:2px solid ButtonText;border-radius:1rem;filter:none}
  .liebe-knopf .form{display:none}
  .liebe-knopf span{top:0;max-width:none}
}
.liebe-lauf{width:100%;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.liebe-lauf[hidden],.liebe-bild[hidden]{display:none}
.liebe-bild{width:6.5rem;height:6.5rem;border-radius:50%;overflow:hidden;background:var(--tafel-2);box-shadow:0 0 0 4px #fff,0 0 0 6px #f472b6}
.liebe-bild img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.liebe-balken{width:100%;height:.7rem;background:#fde7f1;border-radius:var(--r-pille);overflow:hidden}
.liebe-balken i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f472b6,var(--berry));border-radius:inherit}
.liebe-status{font-size:.8rem;font-weight:700;color:var(--ink-soft);text-align:center}
.liebe-rechts{display:flex;flex-direction:column;gap:.7rem}
.liebe-slot{display:flex;align-items:center;gap:.8rem;height:5.2rem;border:2px dashed #f9c2dc;border-radius:var(--r-tafel);padding:0 1rem;color:#f9a8cf}
.liebe-platz{flex:none;width:2.2rem;height:2.02rem;display:flex;align-items:center;justify-content:center;padding-bottom:.22rem;
  font:700 .9rem var(--display);color:#fff;text-shadow:0 1px 1px rgba(120,10,60,.45);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cdefs%3E%3CradialGradient id='g' cx='35%25' cy='28%25' r='80%25'%3E%3Cstop offset='0' stop-color='%23f472b6'/%3E%3Cstop offset='.55' stop-color='%23db2777'/%3E%3Cstop offset='1' stop-color='%239d174d'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M50 90C24 70 3 54 3 30 3 13 15 3 29 3c10 0 17 6 21 14 4-8 11-14 21-14 14 0 26 10 26 27 0 24-21 40-47 60Z'/%3E%3Cellipse cx='26' cy='16' rx='13' ry='7' fill='%23fff' opacity='.55' transform='rotate(-24 26 16)'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 3px 4px rgba(157,23,77,.3))}
/* Platz 1 mit einem Hauch Gold, wie die Perfect Matches der Volkszählung */
.liebe-platz.gold,.liebe-treffer.erster .liebe-platz{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cdefs%3E%3CradialGradient id='g' cx='35%25' cy='28%25' r='80%25'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='.55' stop-color='%23f59e0b'/%3E%3Cstop offset='1' stop-color='%23b45309'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M50 90C24 70 3 54 3 30 3 13 15 3 29 3c10 0 17 6 21 14 4-8 11-14 21-14 14 0 26 10 26 27 0 24-21 40-47 60Z'/%3E%3Cellipse cx='26' cy='16' rx='13' ry='7' fill='%23fff' opacity='.55' transform='rotate(-24 26 16)'/%3E%3C/svg%3E");text-shadow:0 1px 1px rgba(120,60,0,.5);filter:drop-shadow(0 3px 5px rgba(180,110,10,.35))}
@media (forced-colors:active){.liebe-platz,.liebe-platz.gold,.liebe-treffer.erster .liebe-platz{background:none;border:1.5px solid CanvasText;border-radius:50%;filter:none}}
.liebe-treffer.erster{border-color:rgba(234,179,8,.75);box-shadow:var(--glas-glanz),0 0 0 1.5px rgba(252,211,77,.4),0 10px 24px -14px rgba(180,120,10,.5)}
.liebe-treffer{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;font:inherit;color:inherit;cursor:var(--c-hand);border:1.5px solid #f9c2dc;border-radius:var(--r-tafel);padding:.7rem .9rem;
  background:linear-gradient(90deg,#fff0f6,#fff);box-shadow:var(--shadow-sm);animation:liebe-auf .55s cubic-bezier(.2,.9,.3,1.3) both}
.liebe-treffer:hover,.liebe-treffer:focus-visible{border-color:#f472b6}
@keyframes liebe-auf{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
.liebe-treffer .av{flex:none;width:3.4rem;height:3.4rem;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin:0}
.liebe-treffer .av img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.liebe-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.liebe-info b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.liebe-info small{font-size:.76rem;color:var(--ink-soft);font-weight:700}
/* Kennzeichen bei Treffern, die mit jemand anderem verlobt oder verheiratet sind (Schalter an) */
.liebe-vergeben{align-self:flex-start;max-width:100%;font-size:.68rem;font-weight:800;color:#9a3412;background:#fff7ed;border:1px solid #fdba74;
  border-radius:var(--r-pille);padding:0 .45rem}
.liebe-gruende{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.2rem}
.liebe-gruende span{font-size:.68rem;font-weight:800;color:var(--berry);background:#ffe4ef;border-radius:var(--r-pille);padding:.1rem .45rem}
.liebe-punkte{flex:none;display:flex;flex-direction:column;align-items:center;line-height:1}
.liebe-punkte b{font:700 1.5rem var(--display);color:var(--berry)}
.liebe-punkte small{font-size:.66rem;font-weight:800;color:var(--ink-soft);margin:.1rem 0 .25rem}
.liebe-blitze{display:flex;color:#e8458f}
.liebe-blitze .ic{width:.9rem;height:.9rem}
.liebe-keiner{border:2px dashed #f9c2dc;border-radius:var(--r-tafel);padding:1rem;font-weight:700;color:var(--ink-soft);text-align:center}
.liebe-zahl{margin:.2rem 0 0;font-size:.8rem}
/* Weitere Treffer (mehr als drei): Knopf unter den Top 3 und Fenster rechts,
   ohne Abdunklung und Blur, am Kopf verschiebbar (app.js liebePanelAuf) */
.liebe-mehr{display:flex;align-items:center;gap:.55rem;width:100%;min-height:2.9rem;padding:.5rem 1.1rem;border:1px solid rgba(244,114,182,.6);border-radius:var(--r-pille);
  background:radial-gradient(120% 140% at 15% -40%,rgba(255,255,255,.95),transparent 55%),linear-gradient(180deg,#fff0f7,#fbcfe8);
  box-shadow:inset 0 1px 0 #fff,0 8px 18px -12px rgba(157,23,77,.55);font:inherit;font-weight:800;color:#9d174d;text-align:left;
  cursor:var(--c-hand);transition:transform .15s,box-shadow .15s,border-color .15s}
.liebe-mehr:hover{transform:translateY(-1px);border-color:#f472b6;box-shadow:inset 0 1px 0 #fff,0 12px 22px -12px rgba(157,23,77,.65)}
.liebe-mehr[aria-expanded="true"]{border-color:#ec4899;background:radial-gradient(120% 140% at 15% -40%,rgba(255,255,255,.9),transparent 55%),linear-gradient(180deg,#fde2ef,#f9a8d4)}
.liebe-mehr > .ic:first-child{color:#db2777}
.liebe-mehr span{flex:1}
.liebe-mehr .ic{flex:none;width:1.2rem;height:1.2rem}
.liebe-panel{position:fixed;z-index:56;top:8rem;right:1.4rem;width:min(25rem,calc(100vw - 2.8rem));max-height:calc(100vh - 9rem);display:flex;flex-direction:column;
  background:var(--tafel);border:1.5px solid #f9c2dc;border-radius:var(--r-tafel);box-shadow:0 24px 60px -18px rgba(120,20,70,.45),0 2px 8px rgba(0,0,0,.08)}
.liebe-panel.neu{animation:popm .24s cubic-bezier(.2,.8,.2,1)}   /* wie die anderen Fenster: kurz hochgleiten */
.liebe-panel.geht{animation:ausblendenFenster .18s ease-in forwards;pointer-events:none}   /* und sanft ausblenden */
@media (prefers-reduced-motion:reduce){.liebe-panel.neu,.liebe-panel.geht{animation:none}}
.liebe-panel:focus{outline:none}
.liebe-panel-kopf{flex:none;display:flex;align-items:center;gap:.55rem;padding:.45rem .45rem .45rem 1rem;border-bottom:1.5px solid #fde2ee;
  color:var(--berry);cursor:var(--c-greifen);touch-action:none;-webkit-user-select:none;user-select:none}
.liebe-panel-kopf:active{cursor:var(--c-greifen-zu)}
.liebe-panel-kopf > .ic{flex:none;width:1.2rem;height:1.2rem;color:#db2777}
/* Kopf im Glanz-Look des Herz-Knopfs */
.liebe-panel-kopf{border-radius:calc(var(--r-tafel) - 1.5px) calc(var(--r-tafel) - 1.5px) 0 0;
  background:radial-gradient(90% 180% at 10% -60%,rgba(255,255,255,.95),transparent 60%),linear-gradient(180deg,#fff0f7,#fcdaea)}
.liebe-panel-kopf b{flex:1;min-width:0;font-weight:800;line-height:1.25;color:var(--ink)}
.liebe-panel-x{flex:none;width:2.6rem;height:2.6rem;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-soft);cursor:var(--c-hand)}
.liebe-panel-x:hover{background:var(--tafel-2);color:var(--ink)}
.liebe-panel-x .ic{width:1.2rem;height:1.2rem}
.liebe-panel-liste{display:flex;flex-direction:column;gap:.7rem;padding:.8rem;overflow-y:auto;overscroll-behavior:contain}
.liebe-panel .liebe-treffer{flex:none;animation:none}
html:has(#liebePanel) .gruss-badge{display:none}   /* läge sonst über Griff und Rollbalken */
/* Fuß: dort sitzt nur der Griff, Liste und Rollbalken enden darüber */
.liebe-panel{padding-bottom:16px}
/* Kanten und Ecken zum Größerziehen (wie unter Windows), ragen 5px über den Rand */
.liebe-panel-rand{position:absolute;z-index:3;touch-action:none}
.liebe-panel-rand[data-rand="n"],.liebe-panel-rand[data-rand="s"]{left:14px;right:14px;height:10px;cursor:var(--c-pfeil-ns)}
.liebe-panel-rand[data-rand="e"],.liebe-panel-rand[data-rand="w"]{top:14px;bottom:14px;width:8px;cursor:var(--c-pfeil-ew)}
.liebe-panel-rand[data-rand="n"]{top:-5px}.liebe-panel-rand[data-rand="s"]{bottom:-5px}
.liebe-panel-rand[data-rand="e"]{right:-6px}.liebe-panel-rand[data-rand="w"]{left:-6px}   /* nur 2px hinein: der Rollbalken bleibt frei */
.liebe-panel-rand[data-rand="ne"],.liebe-panel-rand[data-rand="nw"],.liebe-panel-rand[data-rand="se"],.liebe-panel-rand[data-rand="sw"]{width:19px;height:19px}
.liebe-panel-rand[data-rand="ne"]{top:-5px;right:-5px;cursor:var(--c-pfeil-nesw)}
.liebe-panel-rand[data-rand="nw"]{top:-5px;left:-5px;cursor:var(--c-pfeil-nwse)}
.liebe-panel-rand[data-rand="se"]{bottom:-5px;right:-5px;cursor:var(--c-pfeil-nwse)}
.liebe-panel-rand[data-rand="sw"]{bottom:-5px;left:-5px;cursor:var(--c-pfeil-nesw)}
/* Griff unten rechts: runder Bogen entlang der Fensterecke (wie bei iPadOS-Fenstern), im Beerenton */
.liebe-panel-rand[data-rand="se"]::after{content:"";position:absolute;right:7px;bottom:7px;width:15px;height:15px;pointer-events:none;
  border:solid rgba(192,36,95,.38);border-width:0 3.5px 3.5px 0;border-bottom-right-radius:12px;transition:border-color .15s}
.liebe-panel-rand[data-rand="se"]:hover::after{border-color:rgba(192,36,95,.78)}
/* Rollbalken der Liste wie überall auf der Seite, nur rosa statt grün */
.liebe-panel-liste{--roll-daumen:#f2a9ca;--roll-daumen-hover:#e8458f;--roll-spur:rgba(255,255,255,.45)}
@supports (scrollbar-color: red blue) and (not selector(::-webkit-scrollbar)){
  .liebe-panel-liste{scrollbar-width:thin;scrollbar-color:var(--roll-daumen) var(--roll-spur)}}
@supports selector(::-webkit-scrollbar){
  .liebe-panel-liste::-webkit-scrollbar-track{margin-block:6px}   /* Luft zu Kopf und Fuß */
  .liebe-panel-liste::-webkit-scrollbar-thumb:active{background:var(--berry);background-clip:padding-box}}
@media(prefers-reduced-motion:reduce){.liebe-panel.neu{animation:none}}
@media(max-width:700px){   /* Handy: fest über der Leiste, weder verschieb- noch ziehbar */
  .liebe-panel{left:.5rem!important;right:.5rem!important;top:auto!important;bottom:calc(var(--nav-oben) + .5rem);
    width:auto!important;height:auto!important;max-height:60svh!important}
  .liebe-panel-kopf{cursor:var(--c-pfeil)}
  .liebe-panel-rand{display:none}
  .liebe-panel{padding-bottom:0}
  html:has(#liebePanel) .app{padding-bottom:calc(var(--nav-oben) + 60svh + 1.5rem)}   /* Top 3 lassen sich über das Fenster rollen */
  html:has(#liebePanel){scroll-padding-bottom:calc(var(--nav-oben) + 60svh + 1rem)}   /* Tab-Fokus rollt über das Fenster */
  html:has(.mtn-badge) .liebe-panel{bottom:calc(var(--nav-oben) + 14px + 3rem)}   /* Wartungs-Plakette (nur Team) */
  .liebe-gruende span,.liebe-vergeben{overflow-wrap:anywhere}   /* sehr schmale Handys: lieber umbrechen als über die Punkte */
}
@media (max-width:860px){
  .liebe{grid-template-columns:minmax(0,1fr)}
  .liebe-mitte{padding-top:0}
  .liebe-knopf{--w:9.5rem;font-size:.95rem}   /* Handy: kleineres Herz, mittig */
  .liebe-wahl{font-size:16px} /* verhindert den iOS-Auto-Zoom */
}

/* ═══ Gruß von Annie (gruss.js): nach 30 s gleitet sie von rechts herein ═══ */
/* Äußerer Rahmen schneidet ab: so kann die hereingleitende Figur die Seite nie verbreitern */
.gruss{position:fixed;right:0;bottom:0;z-index:55;overflow:hidden;padding:3rem 1rem 0 1.5rem;pointer-events:none}
.gruss-innen{display:flex;align-items:flex-start;gap:.2rem;animation:gruss-rein 1.2s cubic-bezier(.22,.8,.3,1) both}
.gruss-innen > *{pointer-events:auto}
@keyframes gruss-rein{from{transform:translateX(115%);opacity:0}to{transform:none;opacity:1}}
.gruss-geht .gruss-innen{animation:gruss-raus .6s ease-in forwards}
@keyframes gruss-raus{to{transform:translateX(115%);opacity:0}}
.gruss-figur{position:relative;width:170px;flex:none}
.gruss-figur img{display:block;width:100%;height:auto;transform-origin:50% 100%;
  filter:drop-shadow(0 12px 18px rgba(40,70,50,.35));animation:gruss-atmen 3.2s ease-in-out 1.2s infinite}
@keyframes gruss-atmen{50%{transform:translateY(-4px) scale(1.012)}}
/* Plumbob über dem Kopf: ploppt auf, schwebt und dreht sich wie im Spiel */
.gruss-plumbob{position:absolute;top:-2.4rem;left:50%;width:22px;height:36px;margin-left:-11px;
  clip-path:polygon(50% 0,100% 45%,50% 100%,0 45%);
  background:linear-gradient(135deg,var(--plumb-l) 0%,var(--plumb) 45%,var(--plumb-d) 100%);
  filter:drop-shadow(0 0 6px rgba(25,211,107,.65));
  animation:gruss-plopp .5s cubic-bezier(.3,1.6,.5,1) 1s both,gruss-schweben 2.6s ease-in-out 1.5s infinite}
@keyframes gruss-plopp{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes gruss-schweben{0%,100%{transform:translateY(0) rotateY(0)}50%{transform:translateY(-6px) rotateY(180deg)}}
/* Sprechblase: ploppt nach dem Hereingleiten auf, Spitze zeigt auf Annie */
.gruss-blase{position:relative;width:15.5rem;margin-top:1.4rem;padding:.9rem 1rem .95rem;border-radius:18px;
  background:#fff;border:2px solid var(--kante);box-shadow:var(--shadow);color:var(--ink);
  transform-origin:100% 30%;animation:gruss-blase .45s cubic-bezier(.3,1.5,.5,1) 1.2s both}
.gruss-blase::after{content:"";position:absolute;right:-11px;top:2.1rem;width:18px;height:18px;background:#fff;
  border-right:2px solid var(--kante);border-top:2px solid var(--kante);transform:rotate(45deg);border-radius:0 4px 0 0}
@keyframes gruss-blase{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.gruss-text{margin:0 1.7rem .75rem 0;min-height:4.6em;font-weight:700;font-size:.9rem;line-height:1.45}
.gruss-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.gruss-knoepfe{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.gruss-kofi{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .95rem;border-radius:var(--r-pille);text-decoration:none;
  font:700 .9rem var(--display);color:#04150f;background:linear-gradient(135deg,var(--plumb-l),var(--plumb));
  box-shadow:0 6px 14px -6px rgba(15,184,92,.7);transition:transform .15s}
.gruss-kofi:hover,.gruss-kofi:focus-visible{transform:translateY(-2px) scale(1.03)}
.gruss-kofi img{width:24px;height:auto;flex:none}   /* offizielles Ko-fi-Logo (storage.ko-fi.com/cdn/cup-border.png) */
.gruss-spaeter{border:0;background:none;font:inherit;font-size:.8rem;font-weight:700;color:var(--ink-soft);cursor:var(--c-hand);padding:.3rem}
.gruss-spaeter:hover{color:var(--ink)}
.gruss-zu{position:absolute;top:.35rem;right:.4rem;width:1.7rem;height:1.7rem;border:0;border-radius:50%;background:var(--tafel-2);
  color:var(--ink-soft);font-size:1.1rem;line-height:1;cursor:var(--c-hand)}
.gruss-zu:hover{background:var(--tafel-3);color:var(--ink)}
.gruss a:focus-visible,.gruss button:focus-visible{outline:3px solid var(--plumb-d);outline-offset:2px}
/* Nach dem Wegklicken: rundes Badge unten rechts mit Annies Gesicht (gruss.js).
   22px vom Rand, damit die eigene Scrollleiste (.sroll, 4–16px) es nicht verdeckt. */
.gruss-badge{position:fixed;right:1.4rem;bottom:1.2rem;z-index:54;width:3.4rem;height:3.4rem;padding:0;cursor:var(--c-hand);
  border-radius:50%;border:2.5px solid #fff;
  background:var(--tafel-2) url(assets/annie-winkt.webp) no-repeat 59% 21%/265% auto;
  box-shadow:0 0 0 2px var(--kante),var(--shadow-sm);opacity:.9;
  transition:transform .2s,opacity .2s;animation:gruss-badge-rein .5s cubic-bezier(.3,1.5,.5,1)}
.gruss-badge:hover,.gruss-badge:focus-visible{opacity:1;transform:translateY(-3px) scale(1.06)}
.gruss-badge:focus-visible{outline:3px solid var(--plumb-d);outline-offset:3px}
@keyframes gruss-badge-rein{from{transform:scale(0);opacity:0}}
.gruss-badge-plumbob{position:absolute;top:-1.25rem;left:50%;width:12px;height:19px;margin-left:-6px;
  clip-path:polygon(50% 0,100% 45%,50% 100%,0 45%);
  background:linear-gradient(135deg,var(--plumb-l) 0%,var(--plumb) 45%,var(--plumb-d) 100%);
  filter:drop-shadow(0 0 4px rgba(25,211,107,.6));animation:gruss-schweben 2.6s ease-in-out infinite}
/* Nach oben (Reiter Sims, app.js): runde Glasblase unten rechts, auf einer Linie
   mit Annies Badge. Ist das Badge da, sitzt die Blase darüber (Plumbob mitgerechnet). */
.nach-oben{position:fixed;right:1.55rem;bottom:1.2rem;z-index:53;width:3.1rem;height:3.1rem;padding:0;border-radius:50%;
  display:grid;place-items:center;color:var(--plumb-d);cursor:var(--c-hand);
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.98),rgba(255,255,255,.6) 62%),color-mix(in srgb,var(--plumb) 12%,transparent);
  -webkit-backdrop-filter:blur(12px) saturate(170%);backdrop-filter:blur(12px) saturate(170%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,inset 0 -7px 12px -8px rgba(20,120,70,.35),var(--schatten-hoch);
  transition:transform .2s;animation:nach-oben-rein .4s cubic-bezier(.3,1.5,.5,1)}
.nach-oben[hidden]{display:none}
.nach-oben .ic{width:1.35rem;height:1.35rem;animation:nach-oben-hopsen 1.8s ease-in-out infinite}
.nach-oben:hover{transform:translateY(-3px) scale(1.06)}
.nach-oben:focus-visible{outline:3px solid var(--plumb-d);outline-offset:3px}
@keyframes nach-oben-rein{from{transform:scale(0);opacity:0}}
/* Weg beim Hochscrollen: schrumpft nach unten weg (app.js setzt .raus, danach hidden) */
.nach-oben.raus{animation:nach-oben-raus .28s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}
@keyframes nach-oben-raus{from{transform:scale(1);opacity:1}to{transform:translateY(14px) scale(.2);opacity:0}}
@keyframes nach-oben-hopsen{50%{transform:translateY(-3px)}}
html:has(.gruss-badge) .nach-oben{bottom:6.45rem}
@media (prefers-reduced-motion:reduce){.nach-oben,.nach-oben .ic{animation:none}}
/* Platz machen: Wartungs-Hinweis unten rechts, Mini-Leiste des Chemie-Rechners unten mittig */
@media(min-width:701px){
  html:has(.mtn-badge) .gruss-badge{bottom:4.2rem}
  html:has(.mtn-badge) .gruss{bottom:3.4rem}
  html:has(.mtn-badge) .nach-oben{bottom:4.2rem}
  html:has(.mtn-badge):has(.gruss-badge) .nach-oben{bottom:9.45rem}
}
@media(max-width:1180px){
  html:has(.chem-duel) .gruss-badge{bottom:4.6rem}
  html:has(.chem-duel) .gruss{bottom:3.9rem}
}
/* Am Handy kleiner und über der unteren Reiterleiste */
@media(max-width:700px){
  .gruss{padding:2.4rem .3rem 0 .6rem;bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .gruss-figur{width:112px}
  .gruss-blase{width:min(13.5rem,calc(100vw - 130px));margin-top:.6rem;padding:.75rem .8rem .8rem}
  .gruss-text{font-size:.82rem}
  .gruss-plumbob{top:-1.9rem;width:16px;height:26px;margin-left:-8px}
  .gruss-badge{width:2.9rem;height:2.9rem;right:1.1rem;bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .nach-oben{width:2.8rem;height:2.8rem;right:1.15rem;bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  html:has(.gruss-badge) .nach-oben{bottom:calc(74px + 5.05rem + env(safe-area-inset-bottom,0px))}
  html:has(.chem-duel) .gruss-badge{bottom:calc(132px + env(safe-area-inset-bottom,0px))}
  html:has(.chem-duel) .gruss{bottom:calc(122px + env(safe-area-inset-bottom,0px))}
}

/* ═══════════════════════════════════════════════════════════════════
   HANDY-UMBAU nach Konzept A („Daumen-App“). Nur ≤700px, der Desktop
   bleibt unverändert.
   #mnav        schwebende Glas-Kapsel mit 4 Bereichen + runde Suche (app.js renderTabs)
   #mseg        Segmente eines Bereichs, z. B. Sims | Haustiere | Friedhof (app.js syncActiveTab)
   .mmenue      ⋯-Menü im Kopf: Interesse?, Beta, Twitch (Popover, index.html)
   .sheet-kopf  Steckbrief als Sheet: Griff, Blättern, Segmente (app.js openSim)
   .sims-filter angeheftete Chip-Reihe, darunter 3 Spalten
   Alles, was über der Leiste schwebt, rechnet mit --nav-oben.
   ═══════════════════════════════════════════════════════════════════ */
#mnav,#mseg,.mmenue-knopf,.mkopf-suche,.sheet-kopf,.sb-streifen{display:none}
@media (display-mode:standalone){
  .sb-streifen{display:block;position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);
    background-color:var(--sky-1);z-index:59;pointer-events:none}
}
html.standalone .sb-streifen{display:block;position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);
  background-color:var(--sky-1);z-index:59;pointer-events:none}
.laedt #mnav,.laedt #mseg{visibility:hidden}
@keyframes sheetRaus{to{transform:translateY(100%)}}

/* ⋯-Menü: Popover liegt in der obersten Ebene, deshalb fest oben rechts */
.mmenue{position:fixed;inset:auto;top:calc(env(safe-area-inset-top,0px) + 4.1rem);right:max(.9rem,env(safe-area-inset-right,0px));margin:0;
  min-width:13rem;padding:.4rem;border-radius:18px;border:1px solid rgba(255,255,255,.9);color:var(--ink);
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  box-shadow:var(--shadow)}
.mmenue a{display:flex;align-items:center;min-height:48px;padding:0 .9rem;border-radius:12px;font-weight:800}
.mmenue{display:none}
.mmenue:popover-open{display:block}
@supports not selector(:popover-open){.mmenue-knopf{display:none!important}}   /* Interesse?, Beta, Twitch stehen auch im Menü */
.mmenue a:hover,.mmenue a:focus-visible{background:var(--tafel-3)}

/* Such-Seite und Archiv (nur über die Handy-Leiste erreichbar) */
.suche-h{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:1.1rem 0 .5rem}
.suchstart .suche-feld{display:flex;width:100%;margin:0 0 .7rem;min-height:48px}
.suchstart .suche-feld input{flex:1;min-width:0;width:auto;font-size:16px}
.suche-zuletzt{flex-wrap:wrap}
.suche-kacheln,.archiv-zahlen,.archiv-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.suche-kachel,.archiv-kachel,.archiv-zahl{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;padding:1rem;
  text-align:left;color:var(--ink);font-weight:800}
.suche-kachel{min-height:92px}
.suche-kachel .ic,.archiv-kachel .ic{width:24px;height:24px;color:var(--plumb-d)}
.suchstart .sr{width:100%;text-align:left;font:inherit;color:inherit;min-height:56px}
.suchstart .sr-text{flex:1;min-width:0;display:flex;flex-direction:column}
.suchstart .sr .meta{font-size:.78rem;color:var(--ink-soft)}
.archiv-mehr{margin-top:.6rem}
.archiv-zahl{gap:.15rem;padding:.9rem 1rem}
.archiv-zahl b{font-family:var(--display);font-size:1.7rem;line-height:1}
.archiv-zahl span,.archiv-kachel span{font-size:.8rem;color:var(--ink-soft)}
.archiv-kacheln{margin-top:.6rem}
.archiv-links{margin-top:1rem;border-radius:var(--r-tafel);overflow:hidden;background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--schatten-klein)}
.archiv-link{display:flex;align-items:center;gap:.8rem;min-height:52px;padding:0 1rem;font-weight:800;color:var(--ink);border-top:1px solid var(--tafel-3)}
.archiv-link:first-child{border-top:0}
.archiv-link span{flex:1}
.archiv-link .ic{width:20px;height:20px;color:var(--ink-soft)}

/* Menü-Seite: alle 9 Bereiche in drei Spalten */
.menue-kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
.menue-kachel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;min-height:92px;padding:.7rem .4rem;
  text-align:center;color:var(--ink);font-weight:800;font-size:.82rem;line-height:1.15}
.menue-kachel .ic{width:26px;height:26px;color:var(--plumb-d)}
.menue .archiv-links{margin-top:1.2rem}

/* Langes Drücken auf eine Sim-Kachel: Vorschau auch ohne Maus (app.js) */
@media(hover:none) and (max-width:700px){.mini-karte.peek{display:block}}

@media(max-width:700px){
  :root{--nav-h:62px;--nav-rand:14px;
    --nav-unten:max(var(--nav-rand),calc(env(safe-area-inset-bottom,0px) + 6px));   /* nicht direkt auf der Gesten-Leiste */
    --nav-oben:calc(var(--nav-h) + var(--nav-unten))}
  html{scroll-padding-bottom:calc(var(--nav-oben) + 12px)}
  body{background-color:var(--sky-3)}   /* Safari 26 färbt seine Leisten danach (theme-color zählt nicht mehr) */
  .sky-deco{z-index:-1}                  /* feste Vollflächen-Deko sonst als Leistenfarbe gemessen */
  .app{padding-bottom:calc(var(--nav-oben) + 36px)}
  /* Keine Scrollleisten am Handy: weder die des Systems noch die eigene (.sroll),
     auch nicht im Steckbrief, in Listen oder im Rechner. Gewischt wird ohnehin. */
  html,body,*{scrollbar-width:none}
  ::-webkit-scrollbar{display:none;width:0;height:0}
  .sroll{display:none!important}

  /* Kopf: nur Marke und ⋯ (die Suche hat unten ihren eigenen Knopf) */
  .tabs,.topbar > .beta-badge,.topbar .interesse-wrap,.topbar .live-badge,.topbar .search-box{display:none}
  .topbar{flex-wrap:nowrap;gap:.5rem;padding:.6rem .1rem .3rem}
  .mkopf-suche{margin-left:auto}
  .mkopf-suche,.mmenue-knopf{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;color:var(--ink);
    background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,var(--schatten-klein)}
  .mmenue-knopf .ic{width:22px;height:22px;fill:currentColor;stroke:none}
  .mkopf-suche .ic{width:22px;height:22px}
  .mkopf-suche.active{background:color-mix(in srgb,var(--plumb) 22%,#fff);color:#0a6b37}

  /* Schwebende Kapsel und runde Suche */
  #mnav{display:flex;gap:10px;position:fixed;z-index:50;bottom:var(--nav-unten);
    left:max(var(--nav-rand),env(safe-area-inset-left,0px));right:max(var(--nav-rand),env(safe-area-inset-right,0px));pointer-events:none}
  .mnav-kapsel,.msuche{pointer-events:auto;height:var(--nav-h);
    background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.68));
    -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
    border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 12px 30px -12px rgba(30,70,110,.45);
    transition:height .22s ease,width .22s ease}
  .mnav-kapsel{flex:1;min-width:0;display:flex;gap:2px;padding:5px;border-radius:999px}
  .mtab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:999px;
    font-weight:800;font-size:.72rem;line-height:1.1;color:var(--ink)}
  .mtab .ic{width:22px;height:22px;flex:none}
  .mtab .lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mtab.active,.msuche.active{background:color-mix(in srgb,var(--plumb) 22%,#fff);color:#0a6b37}
  .msuche{width:var(--nav-h);flex:none;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
  .msuche .ic{width:24px;height:24px}
  /* Beim Runterscrollen kleiner (app.js), beim Hochscrollen wieder groß */
  #mnav.klein{--nav-h:50px}
  #mnav.klein .mtab .lbl{display:none}
  /* Tastatur offen: Leiste weg, sonst springt sie über der Tastatur herum */
  html:has(:is(input:is(:not([type]),[type=text],[type=search],[type=email],[type=number],[type=tel],[type=url],[type=password]),textarea):focus) #mnav{display:none}

  /* Segmente über der Ansicht */
  #mseg{display:block}
  .mseg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;margin:.2rem 0 1rem;border-radius:999px;
    background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff}
  .mseg-b{min-height:40px;padding:0 .4rem;border-radius:999px;font-weight:800;font-size:.86rem;color:var(--ink-soft);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mseg-b[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 4px 10px -6px rgba(40,70,50,.45)}

  /* Sims und Haustiere: angeheftete Chip-Reihe, darunter 3 Spalten */
  .sims-filter{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
    margin:0 calc(-1*max(.9rem,env(safe-area-inset-left,0px))) 1rem;padding:.5rem max(.9rem,env(safe-area-inset-left,0px));
    background:rgba(234,245,238,.8);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%)}
  .sims-filter::-webkit-scrollbar{display:none}
  .sims-filter > *{flex:none}
  .sims-filter .subtab{min-height:40px}
  .sims-filter .sims-suche{display:none}   /* gesucht wird am Handy über die Lupe oben */
  .sims-filter .sims-world{width:auto;margin:0}
  /* Am Handy die Auswahl des Systems (Drehrad bzw. Auswahlfenster): die gestaltete
     Liste klappte am Rand der verschiebbaren Chip-Reihe aus dem Bildschirm. */
  .sims-filter .sims-world{-webkit-appearance:none;appearance:none}
  /* Damit die Reihe ohne Schieben passt: „Verstorben" zeigt am Handy das Segment Friedhof,
     der Welten-Filter wird schmaler und kürzt lange Namen mit … */
  .sims-filter [data-simslife="dead"]{display:none}
  .sims-filter .sims-world{max-width:10rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
  .sims-filter + .grid.sims{grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
  .sims-filter + .grid.sims .sim-card h4{font-size:.8rem;padding:.35rem .45rem 0;overflow-wrap:anywhere}
  .sims-filter + .grid.sims .sim-card .role{font-size:.66rem;padding:0 .45rem}
  .sims-filter + .grid.sims .stagebar{margin:.2rem .45rem .45rem;font-size:.62rem;max-width:calc(100% - .9rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sim-card{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

  /* Steckbrief als Sheet: öffnet halbhoch, wird groß beim Hochziehen oder Scrollen */
  .backdrop{overflow:hidden}
  .modal-breit{max-height:66vh;max-height:66svh;overscroll-behavior:contain;
    transition:max-height .28s cubic-bezier(.22,.9,.3,1),transform .28s cubic-bezier(.22,.9,.3,1)}
  .modal-breit.gross{max-height:calc(100vh - 2.5rem);max-height:calc(100svh - max(2.5rem,env(safe-area-inset-top,0px) + .75rem))}
  .modal-breit > .x.schwebend{display:none}
  .sheet-kopf{display:block;position:sticky;top:0;z-index:3;touch-action:none;padding:.1rem .6rem .6rem;
    background:color-mix(in srgb,var(--tafel) 93%,transparent);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
    border-bottom:1px solid var(--kante)}
  .sheet-griff{display:block;width:72px;height:24px;margin:0 auto;position:relative;border-radius:12px}
  .sheet-griff::before{content:"";position:absolute;left:50%;top:9px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:color-mix(in srgb,var(--ink) 45%,#fff)}
  .sheet-zeile{display:flex;align-items:center;gap:.1rem}
  .sheet-titel{flex:1;min-width:0;padding-left:.35rem}
  .sheet-titel b{display:block;font-family:var(--display);font-size:1.3rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sheet-titel span{display:block;font-size:.8rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sheet-knopf{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
  .sheet-knopf .ic{width:22px;height:22px}
  .sheet-knopf:disabled{opacity:.3}
  .sheet-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin-top:.45rem;padding:4px;border-radius:999px;background:var(--tafel-3)}
  .sheet-seg button{min-height:38px;border-radius:999px;font-weight:800;font-size:.85rem;color:var(--ink-soft)}
  .sheet-seg [aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 4px 10px -6px rgba(40,70,50,.45)}
  .modal-breit[data-teil-aktiv="infos"] [data-teil]:not([data-teil="infos"]),
  .modal-breit[data-teil-aktiv="faehig"] [data-teil]:not([data-teil="faehig"]),
  .modal-breit[data-teil-aktiv="bez"] [data-teil]:not([data-teil="bez"]){display:none}
  .zu .modal-breit{animation:sheetRaus .18s ease-in forwards}
  /* Im Sheet steht der Name schon in der Kopfzeile: Porträt kompakt, Eckdaten zweispaltig */
  .modal-breit .namensfeld{display:none}
  .modal-breit .portraettafel{padding:.8rem}
  .modal-breit .portraettafel .portraet{width:140px;height:160px;aspect-ratio:auto;margin:0 auto .8rem;border-radius:var(--r-kachel);border-bottom:0}
  .modal-breit .info-grid.spalte{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
  .modal-breit .mini{flex-direction:column;align-items:flex-start;gap:.1rem;min-width:0}
  .modal-breit .mini .k{white-space:normal}
  .modal-breit .mini .v{margin-left:0;text-align:left;overflow-wrap:anywhere;hyphens:auto}

  /* Schwebende Ebenen über der Kapsel (ersetzt die festen 62–150px weiter oben) */
  .pwa-pop{bottom:calc(var(--nav-oben) + 14px)}
  .chem-minibar{bottom:calc(var(--nav-oben) + 12px)}
  html:has(.chem-duel) .app{padding-bottom:calc(var(--nav-oben) + 110px)}
  html:has(.chem-duel){scroll-padding-bottom:calc(var(--nav-oben) + 90px)}
  .gruss{bottom:calc(var(--nav-oben) + 2px)}
  .gruss-badge{right:calc(max(var(--nav-rand),env(safe-area-inset-right,0px)) + (var(--nav-h) - 2.9rem) / 2);bottom:calc(var(--nav-oben) + 14px)}
  .nach-oben{right:calc(max(var(--nav-rand),env(safe-area-inset-right,0px)) + (var(--nav-h) - 2.8rem) / 2);bottom:calc(var(--nav-oben) + 14px)}
  html:has(.gruss-badge) .nach-oben{bottom:calc(var(--nav-oben) + 14px + 5.05rem)}
  html:has(.chem-duel) .gruss-badge{bottom:calc(var(--nav-oben) + 72px)}
  html:has(.chem-duel) .gruss{bottom:calc(var(--nav-oben) + 62px)}
  .mtn-badge{top:auto;right:auto;bottom:calc(var(--nav-oben) + 14px);left:max(.9rem,env(safe-area-inset-left,0px));
    max-width:calc(100% - 7rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Statusleiste und Dynamic Island: In der Home-Bildschirm-App (black-translucent)
     zeichnet iOS die Seite darunter, dort ist nichts antippbar. Fenster und die
     Bildergalerie halten deshalb oben mindestens den sicheren Abstand ein. */
  .modal:not(.modal-breit){max-height:calc(100vh - 2.5rem);max-height:calc(100svh - max(2.5rem,env(safe-area-inset-top,0px) + .75rem))}
  .lb-x{top:calc(.9rem + env(safe-area-inset-top,0px));right:calc(.9rem + env(safe-area-inset-right,0px));width:44px;height:44px}
  .lb-nav{width:44px;height:44px}
  .lb-prev{left:calc(.9rem + env(safe-area-inset-left,0px))}
  .lb-next{right:calc(.9rem + env(safe-area-inset-right,0px))}
  .lb-count{bottom:calc(1rem + env(safe-area-inset-bottom,0px))}
}
/* Kleine Handys im Querformat: Sheet gleich groß, Kopf scrollt mit, sonst bleiben ~80px Inhalt */
@media(max-width:700px) and (max-height:500px){
  .modal-breit{max-height:calc(100svh - 2.5rem)}
  .sheet-kopf{position:static}
}
/* Windows-Kontrastdesigns: gewählte Segmente, Leiste und Griff sichtbar halten */
@media (forced-colors:active){
  .mseg-b[aria-pressed="true"],.sheet-seg [aria-pressed="true"],.mtab.active,.msuche.active,.mkopf-suche.active{outline:2px solid CanvasText;outline-offset:-2px}
  .sheet-griff::before{background:CanvasText}
  .mnav-kapsel,.msuche,.sheet-kopf{border:1px solid CanvasText}
}

/* ═══ Eigene Mauszeiger: Satz „C · Liquid Glass“ (kleine grüne Glasstücke) ═══
   Jeder cursor-Wert der Seite läuft über diese Variablen (auch app.js beim Ziehen der
   Karte). Ohne Maus (Handy, Tablet) und bei Kontrast-Einstellungen bleiben die
   System-Cursor. Die Bilder stecken direkt hier: kein Nachladen, kein Flackern.
   Zahlen nach der Grafik = Klickpunkt (Hotspot) im 32×32-Bild. */
:root{
  --c-pfeil:default;
  --c-hand:pointer;
  --c-text:text;
  --c-greifen:grab;
  --c-greifen-zu:grabbing;
  --c-verboten:not-allowed;
  --c-warten:wait;
  --c-lupe:zoom-in;
  --c-pfeil-ns:ns-resize;
  --c-pfeil-ew:ew-resize;
  --c-pfeil-nwse:nwse-resize;
  --c-pfeil-nesw:nesw-resize;
}
@media (hover:hover) and (pointer:fine){
  :root{
  --c-pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='4' x2='0' y2='28'%3E%3Cstop offset='0' stop-color='%235cf0a0'/%3E%3Cstop offset='1' stop-color='%230fb85c'/%3E%3C/linearGradient%3E%3ClinearGradient id='glanz' gradientUnits='userSpaceOnUse' x1='5' y1='4' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='tief' gradientUnits='userSpaceOnUse' x1='28' y1='28' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23067a3a' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23067a3a' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='u'%3E%3Cpath d='M6 4V23L10.6 18.8L13.7 26L17.2 24.5L14.2 17.8H20Z'/%3E%3C/g%3E%3Cg id='k'%3E%3Cpath d='M6 4V23L10.6 18.8L13.7 26L17.2 24.5L14.2 17.8H20Z'/%3E%3C/g%3E%3Cmask id='ol'%3E%3Cuse href='%23k' fill='%23fff' transform='translate(.9 .9)'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(1.9 1.9)'/%3E%3C/mask%3E%3Cmask id='ur'%3E%3Cuse href='%23k' fill='%23fff'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(-1.2 -1.2)'/%3E%3C/mask%3E%3C/defs%3E%3Cg transform='translate(0 1)'%3E%3Cuse href='%23u' transform='translate(.5 1)' fill='%230a3d22' stroke='%230a3d22' stroke-width='6' stroke-linejoin='round' opacity='.2'/%3E%3Cuse href='%23u' fill='%230b6536' stroke='%230b6536' stroke-width='6' stroke-linejoin='round'/%3E%3Cuse href='%23u' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3Cuse href='%23k' fill='url(%23g)'/%3E%3Cuse href='%23k' fill='url(%23tief)' mask='url(%23ur)'/%3E%3Cuse href='%23k' fill='url(%23glanz)' mask='url(%23ol)'/%3E%3C/g%3E%3C/svg%3E") 5 4,default;
    --c-hand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='4' x2='0' y2='28'%3E%3Cstop offset='0' stop-color='%235cf0a0'/%3E%3Cstop offset='1' stop-color='%230fb85c'/%3E%3C/linearGradient%3E%3ClinearGradient id='glanz' gradientUnits='userSpaceOnUse' x1='5' y1='4' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='tief' gradientUnits='userSpaceOnUse' x1='28' y1='28' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23067a3a' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23067a3a' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='u'%3E%3Cpath d='M10 6.5A2.5 2.5 0 0 1 15 6.5V13.5A2 2 0 0 1 19 13.5V14.5A2 2 0 0 1 23 14.5V15.5A1.5 1.5 0 0 1 26 15.5V21C26 25 23.8 27 20.5 27H14.8C12.9 27 11.8 26.4 10.8 25.1L6.2 19.6A1.6 1.6 0 0 1 8.6 17.6L10 19Z'/%3E%3C/g%3E%3Cg id='k'%3E%3Cpath d='M10 6.5A2.5 2.5 0 0 1 15 6.5V13.5A2 2 0 0 1 19 13.5V14.5A2 2 0 0 1 23 14.5V15.5A1.5 1.5 0 0 1 26 15.5V21C26 25 23.8 27 20.5 27H14.8C12.9 27 11.8 26.4 10.8 25.1L6.2 19.6A1.6 1.6 0 0 1 8.6 17.6L10 19Z'/%3E%3C/g%3E%3Cmask id='ol'%3E%3Cuse href='%23k' fill='%23fff' transform='translate(.9 .9)'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(1.9 1.9)'/%3E%3C/mask%3E%3Cmask id='ur'%3E%3Cuse href='%23k' fill='%23fff'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(-1.2 -1.2)'/%3E%3C/mask%3E%3C/defs%3E%3Cg%3E%3Cuse href='%23u' transform='translate(.5 1)' fill='%230a3d22' stroke='%230a3d22' stroke-width='6' stroke-linejoin='round' opacity='.2'/%3E%3Cuse href='%23u' fill='%230b6536' stroke='%230b6536' stroke-width='6' stroke-linejoin='round'/%3E%3Cuse href='%23u' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3Cuse href='%23k' fill='url(%23g)'/%3E%3Cuse href='%23k' fill='url(%23tief)' mask='url(%23ur)'/%3E%3Cuse href='%23k' fill='url(%23glanz)' mask='url(%23ol)'/%3E%3Cpath d='M15 13V17M19 14V18M23 16V19' stroke='%230b6536' stroke-opacity='.3' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") 12 3,pointer;
    --c-text:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='4' x2='0' y2='28'%3E%3Cstop offset='0' stop-color='%235cf0a0'/%3E%3Cstop offset='1' stop-color='%230fb85c'/%3E%3C/linearGradient%3E%3ClinearGradient id='glanz' gradientUnits='userSpaceOnUse' x1='5' y1='4' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='tief' gradientUnits='userSpaceOnUse' x1='28' y1='28' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23067a3a' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23067a3a' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='u'%3E%3Crect x='12' y='7' width='9' height='2' rx='1'/%3E%3Crect x='15' y='7' width='3' height='19' rx='1'/%3E%3Crect x='12' y='24' width='9' height='2' rx='1'/%3E%3C/g%3E%3Cg id='k'%3E%3Crect x='12' y='7' width='9' height='2' rx='1'/%3E%3Crect x='15' y='7' width='3' height='19' rx='1'/%3E%3Crect x='12' y='24' width='9' height='2' rx='1'/%3E%3C/g%3E%3Cmask id='ol'%3E%3Cuse href='%23k' fill='%23fff' transform='translate(.9 .9)'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(1.9 1.9)'/%3E%3C/mask%3E%3Cmask id='ur'%3E%3Cuse href='%23k' fill='%23fff'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(-1.2 -1.2)'/%3E%3C/mask%3E%3C/defs%3E%3Cg%3E%3Cuse href='%23u' transform='translate(.5 1)' fill='%230a3d22' stroke='%230a3d22' stroke-width='6' stroke-linejoin='round' opacity='.2'/%3E%3Cuse href='%23u' fill='%230b6536' stroke='%230b6536' stroke-width='6' stroke-linejoin='round'/%3E%3Cuse href='%23u' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3Cuse href='%23k' fill='url(%23g)'/%3E%3Cuse href='%23k' fill='url(%23tief)' mask='url(%23ur)'/%3E%3Cuse href='%23k' fill='url(%23glanz)' mask='url(%23ol)'/%3E%3C/g%3E%3C/svg%3E") 16 16,text;
    --c-greifen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='4' x2='0' y2='28'%3E%3Cstop offset='0' stop-color='%235cf0a0'/%3E%3Cstop offset='1' stop-color='%230fb85c'/%3E%3C/linearGradient%3E%3ClinearGradient id='glanz' gradientUnits='userSpaceOnUse' x1='5' y1='4' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='tief' gradientUnits='userSpaceOnUse' x1='28' y1='28' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23067a3a' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23067a3a' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='u'%3E%3Crect x='8' y='7' width='3' height='12' rx='1.5'/%3E%3Crect x='12' y='4' width='3' height='15' rx='1.5'/%3E%3Crect x='16' y='5' width='3' height='14' rx='1.5'/%3E%3Crect x='20' y='8' width='3' height='12' rx='1.5'/%3E%3Crect x='-1.5' y='-4' width='3' height='9' rx='1.5' transform='translate(7 19.5) rotate(-40)'/%3E%3Cpath d='M8 14H23V21.5C23 25 21 27 18 27H13.5C10.3 27 8 24.5 8 21.5Z'/%3E%3C/g%3E%3Cg id='k'%3E%3Crect x='8' y='7' width='3' height='12' rx='1.5'/%3E%3Crect x='12' y='4' width='3' height='15' rx='1.5'/%3E%3Crect x='16' y='5' width='3' height='14' rx='1.5'/%3E%3Crect x='20' y='8' width='3' height='12' rx='1.5'/%3E%3Crect x='-1.5' y='-4' width='3' height='9' rx='1.5' transform='translate(7 19.5) rotate(-40)'/%3E%3Cpath d='M8 14H23V21.5C23 25 21 27 18 27H13.5C10.3 27 8 24.5 8 21.5Z'/%3E%3C/g%3E%3Cmask id='ol'%3E%3Cuse href='%23k' fill='%23fff' transform='translate(.9 .9)'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(1.9 1.9)'/%3E%3C/mask%3E%3Cmask id='ur'%3E%3Cuse href='%23k' fill='%23fff'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(-1.2 -1.2)'/%3E%3C/mask%3E%3C/defs%3E%3Cg transform='translate(1 0)'%3E%3Cuse href='%23u' transform='translate(.5 1)' fill='%230a3d22' stroke='%230a3d22' stroke-width='6' stroke-linejoin='round' opacity='.2'/%3E%3Cuse href='%23u' fill='%230b6536' stroke='%230b6536' stroke-width='6' stroke-linejoin='round'/%3E%3Cuse href='%23u' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3Cuse href='%23k' fill='url(%23g)'/%3E%3Cuse href='%23k' fill='url(%23tief)' mask='url(%23ur)'/%3E%3Cuse href='%23k' fill='url(%23glanz)' mask='url(%23ol)'/%3E%3C/g%3E%3C/svg%3E") 16 16,grab;
    --c-greifen-zu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='4' x2='0' y2='28'%3E%3Cstop offset='0' stop-color='%235cf0a0'/%3E%3Cstop offset='1' stop-color='%230fb85c'/%3E%3C/linearGradient%3E%3ClinearGradient id='glanz' gradientUnits='userSpaceOnUse' x1='5' y1='4' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='tief' gradientUnits='userSpaceOnUse' x1='28' y1='28' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23067a3a' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23067a3a' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='u'%3E%3Crect x='8' y='10' width='3' height='8' rx='1.5'/%3E%3Crect x='12' y='9' width='3' height='9' rx='1.5'/%3E%3Crect x='16' y='9' width='3' height='9' rx='1.5'/%3E%3Crect x='20' y='11' width='3' height='8' rx='1.5'/%3E%3Cpath d='M8 15H23V21.5C23 25 21 27 18 27H13.5C10.3 27 8 24.5 8 21.5Z'/%3E%3Crect x='5' y='17' width='9' height='3' rx='1.5'/%3E%3C/g%3E%3Cg id='k'%3E%3Crect x='8' y='10' width='3' height='8' rx='1.5'/%3E%3Crect x='12' y='9' width='3' height='9' rx='1.5'/%3E%3Crect x='16' y='9' width='3' height='9' rx='1.5'/%3E%3Crect x='20' y='11' width='3' height='8' rx='1.5'/%3E%3Cpath d='M8 15H23V21.5C23 25 21 27 18 27H13.5C10.3 27 8 24.5 8 21.5Z'/%3E%3Crect x='5' y='17' width='9' height='3' rx='1.5'/%3E%3C/g%3E%3Cmask id='ol'%3E%3Cuse href='%23k' fill='%23fff' transform='translate(.9 .9)'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(1.9 1.9)'/%3E%3C/mask%3E%3Cmask id='ur'%3E%3Cuse href='%23k' fill='%23fff'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(-1.2 -1.2)'/%3E%3C/mask%3E%3C/defs%3E%3Cg transform='translate(1 0)'%3E%3Cuse href='%23u' transform='translate(.5 1)' fill='%230a3d22' stroke='%230a3d22' stroke-width='6' stroke-linejoin='round' opacity='.2'/%3E%3Cuse href='%23u' fill='%230b6536' stroke='%230b6536' stroke-width='6' stroke-linejoin='round'/%3E%3Cuse href='%23u' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3Cuse href='%23k' fill='url(%23g)'/%3E%3Cuse href='%23k' fill='url(%23tief)' mask='url(%23ur)'/%3E%3Cuse href='%23k' fill='url(%23glanz)' mask='url(%23ol)'/%3E%3Cpath d='M9 16.5H14' stroke='%230b6536' stroke-opacity='.4' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") 16 16,grabbing;
    --c-verboten:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='4' x2='0' y2='28'%3E%3Cstop offset='0' stop-color='%235cf0a0'/%3E%3Cstop offset='1' stop-color='%230fb85c'/%3E%3C/linearGradient%3E%3ClinearGradient id='glanz' gradientUnits='userSpaceOnUse' x1='5' y1='4' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='tief' gradientUnits='userSpaceOnUse' x1='28' y1='28' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23067a3a' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23067a3a' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='u'%3E%3Ccircle cx='16.5' cy='16.5' r='10'/%3E%3C/g%3E%3Cg id='k'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.5 6.5a10 10 0 1 0 0.001 0ZM16.5 9.5a7 7 0 1 0 0.001 0Z'/%3E%3Crect x='-1.5' y='-7.5' width='3' height='15' transform='translate(16.5 16.5) rotate(-45)'/%3E%3C/g%3E%3Cmask id='ol'%3E%3Cuse href='%23k' fill='%23fff' transform='translate(.9 .9)'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(1.9 1.9)'/%3E%3C/mask%3E%3Cmask id='ur'%3E%3Cuse href='%23k' fill='%23fff'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(-1.2 -1.2)'/%3E%3C/mask%3E%3C/defs%3E%3Cg%3E%3Cuse href='%23u' transform='translate(.5 1)' fill='%230a3d22' stroke='%230a3d22' stroke-width='6' stroke-linejoin='round' opacity='.2'/%3E%3Cuse href='%23u' fill='%230b6536' stroke='%230b6536' stroke-width='6' stroke-linejoin='round'/%3E%3Cuse href='%23u' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3Cuse href='%23k' fill='%230fb85c'/%3E%3C/g%3E%3C/svg%3E") 16 16,not-allowed;
    --c-warten:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='4' x2='0' y2='28'%3E%3Cstop offset='0' stop-color='%235cf0a0'/%3E%3Cstop offset='1' stop-color='%230fb85c'/%3E%3C/linearGradient%3E%3ClinearGradient id='glanz' gradientUnits='userSpaceOnUse' x1='5' y1='4' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='tief' gradientUnits='userSpaceOnUse' x1='28' y1='28' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23067a3a' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23067a3a' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='u'%3E%3Ccircle cx='16.5' cy='16.5' r='10'/%3E%3C/g%3E%3Cg id='k'%3E%3Cpath d='M19.92 7.1A10 10 0 0 1 25.9 13.08A1.5 1.5 0 0 1 23.08 14.11A7 7 0 0 0 18.89 9.92A1.5 1.5 0 0 1 19.92 7.1Z'/%3E%3Cpath opacity='0.75' d='M7.1 13.08A10 10 0 0 1 13.08 7.1A1.5 1.5 0 0 1 14.11 9.92A7 7 0 0 0 9.92 14.11A1.5 1.5 0 0 1 7.1 13.08Z'/%3E%3Cpath opacity='0.5' d='M13.08 25.9A10 10 0 0 1 7.1 19.92A1.5 1.5 0 0 1 9.92 18.89A7 7 0 0 0 14.11 23.08A1.5 1.5 0 0 1 13.08 25.9Z'/%3E%3Cpath opacity='0.3' d='M25.9 19.92A10 10 0 0 1 19.92 25.9A1.5 1.5 0 0 1 18.89 23.08A7 7 0 0 0 23.08 18.89A1.5 1.5 0 0 1 25.9 19.92Z'/%3E%3Cpath d='M16.5 10.5L20 16.5L16.5 22.5L13 16.5Z'/%3E%3C/g%3E%3Cmask id='ol'%3E%3Cuse href='%23k' fill='%23fff' transform='translate(.9 .9)'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(1.9 1.9)'/%3E%3C/mask%3E%3Cmask id='ur'%3E%3Cuse href='%23k' fill='%23fff'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(-1.2 -1.2)'/%3E%3C/mask%3E%3C/defs%3E%3Cg%3E%3Cuse href='%23u' transform='translate(.5 1)' fill='%230a3d22' stroke='%230a3d22' stroke-width='6' stroke-linejoin='round' opacity='.2'/%3E%3Cuse href='%23u' fill='%230b6536' stroke='%230b6536' stroke-width='6' stroke-linejoin='round'/%3E%3Cuse href='%23u' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3Cuse href='%23k' fill='url(%23g)'/%3E%3Cuse href='%23k' fill='url(%23tief)' mask='url(%23ur)'/%3E%3Cuse href='%23k' fill='url(%23glanz)' mask='url(%23ol)'/%3E%3Cpath d='M16.5 10.5V22.5L13 16.5Z' fill='%23fff' fill-opacity='.45'/%3E%3C/g%3E%3C/svg%3E") 16 16,wait;
    --c-lupe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='4' x2='0' y2='28'%3E%3Cstop offset='0' stop-color='%235cf0a0'/%3E%3Cstop offset='1' stop-color='%230fb85c'/%3E%3C/linearGradient%3E%3ClinearGradient id='glanz' gradientUnits='userSpaceOnUse' x1='5' y1='4' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='tief' gradientUnits='userSpaceOnUse' x1='28' y1='28' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23067a3a' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23067a3a' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='u'%3E%3Ccircle cx='13.5' cy='13.5' r='9'/%3E%3Crect x='-5.5' y='-2.5' width='11' height='5' rx='2.5' transform='translate(22.3 22.3) rotate(45)'/%3E%3C/g%3E%3Cg id='k'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 4.5a9 9 0 1 0 0.001 0ZM13.5 7.5a6 6 0 1 0 0.001 0Z'/%3E%3Crect x='-5.5' y='-2.5' width='11' height='5' rx='2.5' transform='translate(22.3 22.3) rotate(45)'/%3E%3C/g%3E%3Cmask id='ol'%3E%3Cuse href='%23k' fill='%23fff' transform='translate(.9 .9)'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(1.9 1.9)'/%3E%3C/mask%3E%3Cmask id='ur'%3E%3Cuse href='%23k' fill='%23fff'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(-1.2 -1.2)'/%3E%3C/mask%3E%3C/defs%3E%3Cg%3E%3Cuse href='%23u' transform='translate(.5 1)' fill='%230a3d22' stroke='%230a3d22' stroke-width='6' stroke-linejoin='round' opacity='.2'/%3E%3Cuse href='%23u' fill='%230b6536' stroke='%230b6536' stroke-width='6' stroke-linejoin='round'/%3E%3Cuse href='%23u' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3Ccircle cx='13.5' cy='13.5' r='7' fill='%23e8f8ff'/%3E%3Cpath d='M9.17 11A5 5 0 0 1 11 9.17' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3Cuse href='%23k' fill='url(%23g)'/%3E%3Cuse href='%23k' fill='url(%23tief)' mask='url(%23ur)'/%3E%3Cuse href='%23k' fill='url(%23glanz)' mask='url(%23ol)'/%3E%3Cpath d='M10 13.5H17M13.5 10V17' stroke='%230b8a45' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/g%3E%3C/svg%3E") 13 13,zoom-in;
    --c-pfeil-ns:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='4' x2='0' y2='28'%3E%3Cstop offset='0' stop-color='%235cf0a0'/%3E%3Cstop offset='1' stop-color='%230fb85c'/%3E%3C/linearGradient%3E%3ClinearGradient id='glanz' gradientUnits='userSpaceOnUse' x1='5' y1='4' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='tief' gradientUnits='userSpaceOnUse' x1='28' y1='28' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23067a3a' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23067a3a' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='u'%3E%3Cpath d='M16.5 27L11 22L15 22L15 11L11 11L16.5 6L22 11L18 11L18 22L22 22Z'/%3E%3C/g%3E%3Cg id='k'%3E%3Cpath d='M16.5 27L11 22L15 22L15 11L11 11L16.5 6L22 11L18 11L18 22L22 22Z'/%3E%3C/g%3E%3Cmask id='ol'%3E%3Cuse href='%23k' fill='%23fff' transform='translate(.9 .9)'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(1.9 1.9)'/%3E%3C/mask%3E%3Cmask id='ur'%3E%3Cuse href='%23k' fill='%23fff'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(-1.2 -1.2)'/%3E%3C/mask%3E%3C/defs%3E%3Cg%3E%3Cuse href='%23u' transform='translate(.5 1)' fill='%230a3d22' stroke='%230a3d22' stroke-width='6' stroke-linejoin='round' opacity='.2'/%3E%3Cuse href='%23u' fill='%230b6536' stroke='%230b6536' stroke-width='6' stroke-linejoin='round'/%3E%3Cuse href='%23u' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3Cuse href='%23k' fill='url(%23g)'/%3E%3Cuse href='%23k' fill='url(%23tief)' mask='url(%23ur)'/%3E%3Cuse href='%23k' fill='url(%23glanz)' mask='url(%23ol)'/%3E%3C/g%3E%3C/svg%3E") 16 16,ns-resize;
    --c-pfeil-ew:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='4' x2='0' y2='28'%3E%3Cstop offset='0' stop-color='%235cf0a0'/%3E%3Cstop offset='1' stop-color='%230fb85c'/%3E%3C/linearGradient%3E%3ClinearGradient id='glanz' gradientUnits='userSpaceOnUse' x1='5' y1='4' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='tief' gradientUnits='userSpaceOnUse' x1='28' y1='28' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23067a3a' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23067a3a' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='u'%3E%3Cpath d='M6 16.5L11 11L11 15L22 15L22 11L27 16.5L22 22L22 18L11 18L11 22Z'/%3E%3C/g%3E%3Cg id='k'%3E%3Cpath d='M6 16.5L11 11L11 15L22 15L22 11L27 16.5L22 22L22 18L11 18L11 22Z'/%3E%3C/g%3E%3Cmask id='ol'%3E%3Cuse href='%23k' fill='%23fff' transform='translate(.9 .9)'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(1.9 1.9)'/%3E%3C/mask%3E%3Cmask id='ur'%3E%3Cuse href='%23k' fill='%23fff'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(-1.2 -1.2)'/%3E%3C/mask%3E%3C/defs%3E%3Cg%3E%3Cuse href='%23u' transform='translate(.5 1)' fill='%230a3d22' stroke='%230a3d22' stroke-width='6' stroke-linejoin='round' opacity='.2'/%3E%3Cuse href='%23u' fill='%230b6536' stroke='%230b6536' stroke-width='6' stroke-linejoin='round'/%3E%3Cuse href='%23u' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3Cuse href='%23k' fill='url(%23g)'/%3E%3Cuse href='%23k' fill='url(%23tief)' mask='url(%23ur)'/%3E%3Cuse href='%23k' fill='url(%23glanz)' mask='url(%23ol)'/%3E%3C/g%3E%3C/svg%3E") 16 16,ew-resize;
    --c-pfeil-nwse:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='4' x2='0' y2='28'%3E%3Cstop offset='0' stop-color='%235cf0a0'/%3E%3Cstop offset='1' stop-color='%230fb85c'/%3E%3C/linearGradient%3E%3ClinearGradient id='glanz' gradientUnits='userSpaceOnUse' x1='5' y1='4' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='tief' gradientUnits='userSpaceOnUse' x1='28' y1='28' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23067a3a' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23067a3a' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='u'%3E%3Cpath d='M8.37 8.37L15.79 8.01L12.96 10.84L22.16 20.04L24.99 17.21L24.63 24.63L17.21 24.99L20.04 22.16L10.84 12.96L8.01 15.79Z'/%3E%3C/g%3E%3Cg id='k'%3E%3Cpath d='M8.37 8.37L15.79 8.01L12.96 10.84L22.16 20.04L24.99 17.21L24.63 24.63L17.21 24.99L20.04 22.16L10.84 12.96L8.01 15.79Z'/%3E%3C/g%3E%3Cmask id='ol'%3E%3Cuse href='%23k' fill='%23fff' transform='translate(.9 .9)'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(1.9 1.9)'/%3E%3C/mask%3E%3Cmask id='ur'%3E%3Cuse href='%23k' fill='%23fff'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(-1.2 -1.2)'/%3E%3C/mask%3E%3C/defs%3E%3Cg%3E%3Cuse href='%23u' transform='translate(.5 1)' fill='%230a3d22' stroke='%230a3d22' stroke-width='6' stroke-linejoin='round' opacity='.2'/%3E%3Cuse href='%23u' fill='%230b6536' stroke='%230b6536' stroke-width='6' stroke-linejoin='round'/%3E%3Cuse href='%23u' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3Cuse href='%23k' fill='url(%23g)'/%3E%3Cuse href='%23k' fill='url(%23tief)' mask='url(%23ur)'/%3E%3Cuse href='%23k' fill='url(%23glanz)' mask='url(%23ol)'/%3E%3C/g%3E%3C/svg%3E") 16 16,nwse-resize;
    --c-pfeil-nesw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='4' x2='0' y2='28'%3E%3Cstop offset='0' stop-color='%235cf0a0'/%3E%3Cstop offset='1' stop-color='%230fb85c'/%3E%3C/linearGradient%3E%3ClinearGradient id='glanz' gradientUnits='userSpaceOnUse' x1='5' y1='4' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='tief' gradientUnits='userSpaceOnUse' x1='28' y1='28' x2='17' y2='17'%3E%3Cstop offset='0' stop-color='%23067a3a' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23067a3a' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cg id='u'%3E%3Cpath d='M8.37 24.63L8.01 17.21L10.84 20.04L20.04 10.84L17.21 8.01L24.63 8.37L24.99 15.79L22.16 12.96L12.96 22.16L15.79 24.99Z'/%3E%3C/g%3E%3Cg id='k'%3E%3Cpath d='M8.37 24.63L8.01 17.21L10.84 20.04L20.04 10.84L17.21 8.01L24.63 8.37L24.99 15.79L22.16 12.96L12.96 22.16L15.79 24.99Z'/%3E%3C/g%3E%3Cmask id='ol'%3E%3Cuse href='%23k' fill='%23fff' transform='translate(.9 .9)'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(1.9 1.9)'/%3E%3C/mask%3E%3Cmask id='ur'%3E%3Cuse href='%23k' fill='%23fff'/%3E%3Cuse href='%23k' fill='%23000' transform='translate(-1.2 -1.2)'/%3E%3C/mask%3E%3C/defs%3E%3Cg%3E%3Cuse href='%23u' transform='translate(.5 1)' fill='%230a3d22' stroke='%230a3d22' stroke-width='6' stroke-linejoin='round' opacity='.2'/%3E%3Cuse href='%23u' fill='%230b6536' stroke='%230b6536' stroke-width='6' stroke-linejoin='round'/%3E%3Cuse href='%23u' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3Cuse href='%23k' fill='url(%23g)'/%3E%3Cuse href='%23k' fill='url(%23tief)' mask='url(%23ur)'/%3E%3Cuse href='%23k' fill='url(%23glanz)' mask='url(%23ol)'/%3E%3C/g%3E%3C/svg%3E") 16 16,nesw-resize;
  }
  html{cursor:var(--c-pfeil)}
  label{cursor:var(--c-pfeil)}   /* der Browser gibt Beschriftungen sonst den System-Pfeil */
  a[href]{cursor:var(--c-hand)}
  input:not([type=button],[type=submit],[type=reset],[type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=image]),
  textarea,[contenteditable]:not([contenteditable=false]){cursor:var(--c-text)}
}
@media (forced-colors:active),(prefers-contrast:more){
  :root{
  --c-pfeil:default;
    --c-hand:pointer;
    --c-text:text;
    --c-greifen:grab;
    --c-greifen-zu:grabbing;
    --c-verboten:not-allowed;
    --c-warten:wait;
    --c-lupe:zoom-in;
    --c-pfeil-ns:ns-resize;
    --c-pfeil-ew:ew-resize;
    --c-pfeil-nwse:nwse-resize;
    --c-pfeil-nesw:nesw-resize;
  }
  html{cursor:auto}
}

/* ═══ „Was ist neu?“ (Changelog-Fenster aus dem Footer) ═══ */
.changelog .cl-sub{text-align:center;margin:-.3rem 0 1rem}
.cl-version{padding:1rem 0 .9rem;border-top:1px solid var(--kante)}
.cl-version:first-child{border-top:0;padding-top:.2rem}
.cl-version h3{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.15rem .8rem;margin:0 0 .6rem;
  font-family:var(--display);font-weight:600;font-size:1.08rem;color:var(--ink)}
.cl-version h3 small{font-family:var(--body);font-size:.76rem;font-weight:800;color:var(--ink-soft)}
.cl-version ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.cl-version li{display:flex;align-items:flex-start;gap:.6rem;font-size:.92rem;line-height:1.45}
.cl-art{flex:none;width:7.4rem;padding:.14rem .4rem;border-radius:var(--r-pille);text-align:center;white-space:nowrap;
  font-size:.68rem;font-weight:900;letter-spacing:.02em;margin-top:.12rem}
.cl-neu{background:#dcfce7;color:#166534}
.cl-besser{background:#e0f2fe;color:#075985}
.cl-behoben{background:#ffedd5;color:#9a3412}
.cl-kulissen{background:#f1f5f9;color:#475569}
@media(max-width:700px){.cl-version li{flex-direction:column;gap:.2rem}.cl-art{width:auto}}
/* Versionsnummer ganz dezent unten links im Footer (Klick öffnet „Was ist neu?“) */
/* Unten links: Version und „Geprüft“ (Lighthouse, Sicherheit), dezent wie die Version */
.footer .foot-meta{position:absolute;left:1rem;bottom:.55rem;display:flex;align-items:center;gap:.7rem}
.footer .foot-version,.footer .foot-pruef{font-size:.7rem;font-weight:800;letter-spacing:.02em;
  color:var(--ink-soft);opacity:.55;text-decoration:none;transition:opacity .15s}
.footer .foot-pruef{display:inline-flex;align-items:center;gap:.25rem;background:none;border:0;padding:0;font-family:inherit;cursor:var(--c-hand)}
.footer .foot-pruef .ic{width:.95rem;height:.95rem;margin-left:.35rem}
.footer .foot-pruef .ic:first-child{margin-left:0}
.footer .foot-version:hover,.footer .foot-version:focus-visible,.footer .foot-pruef:hover,.footer .foot-pruef:focus-visible{opacity:1;color:var(--plumb-d)}
@media(max-width:700px){.footer .foot-meta{position:static;flex-wrap:wrap;margin-top:.9rem;padding-left:.3rem}}
/* Fenster „Geprüft“ */
.pruefung .pr-kopf{text-align:center;margin:-.3rem 0 1.1rem}
.pr-teil{padding:1rem 0 .9rem;border-top:1px solid var(--kante)}
.pr-teil h3{display:flex;align-items:center;gap:.5rem;margin:0 0 .8rem;font-size:1.02rem}
.pr-teil h3 .ic{width:1.25rem;height:1.25rem;color:var(--plumb-d)}
.pr-noten{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.2rem,1fr));gap:.8rem .5rem;margin:0 0 1rem;padding:0;list-style:none}
.pr-noten li{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;font-size:.78rem;font-weight:800;line-height:1.25;color:var(--ink-soft)}
.pr-ring{display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;border:4px solid #0cce6b;background:#e6f9ee;
  color:#008a3e;font-size:1.12rem;font-weight:900;font-variant-numeric:tabular-nums}
.pr-werte{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.5rem;margin:0 0 .9rem;padding:0;list-style:none}
.pr-werte li{padding:.55rem .75rem;border:1px solid var(--kante);border-radius:var(--r-kachel);background:var(--licht);font-size:.78rem;font-weight:700;color:var(--ink-soft)}
.pr-werte b{display:block;font-size:1.05rem;color:var(--ink);font-variant-numeric:tabular-nums}
.pr-liste{list-style:none;margin:0 0 .9rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.pr-liste li{display:flex;align-items:flex-start;gap:.55rem;font-size:.92rem;line-height:1.45}
.pr-liste .ic{flex:none;width:1.15rem;height:1.15rem;margin-top:.12rem;color:#0cce6b}
.pr-quelle{margin:0;font-size:.78rem;color:var(--ink-soft)}
.pr-quelle a{font-weight:800;color:var(--plumb-d)}
/* „Was ist neu?“: Seitenzahlen unten, dieselben Pillen wie die Unterreiter */
.cl-seiten{justify-content:center;margin:.4rem 0 0;padding-top:1.1rem;border-top:1px solid var(--kante)}
.cl-seiten .subtab{min-width:2.5rem;justify-content:center;text-align:center;font-variant-numeric:tabular-nums}
/* Beim ersten Laden eine Bildschirmhöhe freihalten: sonst steht die Fußzeile kurz unter
   „Lade Archiv…“ und springt nach unten, sobald der Inhalt da ist (Lighthouse: Layout-Verschiebung) */
#view:empty,.lade-platz{min-height:100vh;min-height:100svh}
/* Außenabstände der ersten Überschrift nicht durch #view nach oben durchreichen: sonst rutscht der
   ganze Bereich beim Erscheinen der Inhalte um 7 px (Lighthouse: Layout-Verschiebung) */
#view{display:flow-root}
/* Handy: Kacheln nur einblenden, nicht wachsen lassen. Wächst das Bild, wertet Chrome das
   größte Bild erst am Ende der Animation (Lighthouse: LCP +0,5 s). Am PC bleibt das Wachsen. */
@keyframes auftauchen-leise{from{opacity:0}to{opacity:1}}
@media(max-width:700px){.ort{animation-name:auftauchen-leise}}

/* ── News-Mitteilung (meldungen.js, ab 1.1.0) ──────────────────────────────────
   PC: Mitteilung wie in macOS oben rechts unter den Reitern. Handy: „Dynamic Island“
   unter der Kopfzeile, danach ein Symbol in der Kopfzeile neben der Lupe.
   Helles Liquid Glass wie die Seite; das aufgeklappte Handy-Panel wird dunkler (lesbar
   über den bunten Karten). Über Annies Gruß (55), unter geöffneten Fenstern (60). */
.meldung{position:fixed;top:var(--meldung-oben,124px);right:24px;z-index:56;display:flex;flex-direction:column;align-items:flex-end;gap:10px;max-width:calc(100vw - 32px);color:var(--ink)}
.meldung,.meldung *,.meldung *::before,.meldung *::after,.meldung-kopfsymbol{box-sizing:border-box}
.meldung-handy{right:12px;max-width:calc(100vw - 24px)}
.meldung-ansage{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.meldung [hidden]{display:none!important}
.meldung-glas{position:relative;
  background:radial-gradient(120% 60% at 12% -10%,rgba(255,255,255,.62),transparent 55%),linear-gradient(180deg,var(--glas-oben),var(--glas-unten)),linear-gradient(var(--glas-hauch),var(--glas-hauch));
  border:1px solid var(--glas-rand);box-shadow:var(--glas-glanz),var(--glas-schatten-hoch);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
.meldung-glas::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;background:var(--glas-ring);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.meldung-x{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:15px;line-height:1;background:rgba(15,23,42,.08);color:#475569}
.meldung-x:hover{background:rgba(15,23,42,.16)}
.meldung-zahl{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#047857;color:#fff;font-weight:800;font-size:.75rem;line-height:1}
.meldung-item{display:flex;gap:11px;align-items:center;width:100%;text-align:left;padding:8px;border-radius:14px;color:inherit;font:inherit}
.meldung-item:hover,.meldung-item:focus-visible{background:rgba(255,255,255,.55)}
.meldung-bild{flex:none;width:46px;height:46px;border-radius:11px;object-fit:cover;background:linear-gradient(135deg,#bbf7d0,#7dd3fc);display:grid;place-items:center;font-size:20px}
.meldung-text{min-width:0;flex:1}
.meldung-text b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.88rem;line-height:1.25}
.meldung-text small{display:block;margin-top:3px;color:#475569;font-weight:700;font-size:.74rem}
.meldung-alle{display:block;width:100%;margin-top:4px;padding:9px;border-radius:14px;background:rgba(16,185,129,.12);color:#047857;font:inherit;font-weight:800;font-size:.85rem}
.meldung-kopf{display:flex;align-items:center;gap:8px;padding:6px 8px 8px;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:#64748b}
.meldung-kopf .meldung-x{margin-left:auto}
@keyframes meldung-rein{from{transform:translateX(calc(100% + 48px));opacity:0}to{transform:none;opacity:1}}
@keyframes meldung-auf{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes meldung-plopp{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes meldung-puls{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}50%{box-shadow:0 0 0 7px rgba(16,185,129,0)}}

/* PC: macOS-Mitteilung */
.meldung-karte{position:relative;width:350px;max-width:100%;animation:meldung-auf .35s ease-out both}
.meldung-karte.rein{animation:meldung-rein .7s cubic-bezier(.2,.9,.25,1.12) both}   /* Hereingleiten nur beim ersten Erscheinen */
.meldung-karte .meldung-auf{display:flex;gap:11px;align-items:center;width:100%;padding:12px 14px;border-radius:20px;text-align:left;color:inherit;font:inherit}
.meldung-app{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(160deg,#fff,#dcfce7);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.meldung-app i{display:block;width:16px;height:22px;background:linear-gradient(135deg,#34d399,#059669);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.meldung-inhalt{min-width:0;flex:1}
.meldung-oben{display:flex;justify-content:space-between;font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#475569}
.meldung-inhalt b{display:block;font-size:.95rem;margin-top:1px}
.meldung-zeile{display:block;font-size:.83rem;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meldung-daumen{flex:none;width:40px;height:40px;border-radius:9px;object-fit:cover}
.meldung-stapel{position:absolute;left:10px;right:10px;height:40px;bottom:-8px;z-index:-1;border-radius:18px;transform:scale(.96);opacity:.85;-webkit-backdrop-filter:none;backdrop-filter:none}
.meldung-stapel.zwei{left:20px;right:20px;bottom:-15px;transform:scale(.92);opacity:.6}
.meldung-karte .meldung-x{position:absolute;top:-9px;left:-9px;z-index:2;opacity:0;transition:opacity .2s;background:rgba(255,255,255,.95);box-shadow:0 2px 6px rgba(0,0,0,.2)}
.meldung-karte:hover .meldung-x,.meldung-karte:focus-within .meldung-x{opacity:1}
@media(hover:none){.meldung-karte .meldung-x{opacity:1}}
.meldung-pc .meldung-liste{width:350px;max-width:100%;display:flex;flex-direction:column;gap:8px}
/* Niedrige Fenster (Handy quer, kleine Laptops): Liste scrollt statt unten aus dem Bild zu laufen */
@media(min-width:701px) and (max-height:700px){.meldung-pc .meldung-liste{max-height:calc(100dvh - var(--meldung-oben,124px) - 12px);overflow-y:auto;overscroll-behavior:contain;padding:6px 6px 12px;margin:-6px -6px 0}}   /* Platz für den Fokusring */
html:has(#liebePanel) .meldung-pc{visibility:hidden}   /* läge sonst über Kopf und „ד von „Weitere Kandidaten“ (wie .pwa-pop, .gruss-badge) */
.meldung-leiste{display:flex;justify-content:space-between;align-items:center;padding:0 6px;font-weight:800;font-size:.8rem;color:#334155}
.meldung-leiste>span:last-child{display:flex;gap:6px;align-items:center}
.meldung-leiste>span:first-child{padding:4px 10px;border-radius:12px;background:rgba(255,255,255,.75)}   /* lesbar auch über Bildern */
.meldung-leiste .meldung-x{background:rgba(255,255,255,.75)}
.meldung-weniger{border-radius:12px;padding:4px 10px;font:inherit;font-weight:800;background:rgba(255,255,255,.75);color:#334155}
.meldung-pc .meldung-item{border-radius:18px;padding:10px 12px;animation:meldung-auf .35s ease-out both;animation-delay:calc(var(--i) * 60ms);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.8));border:1px solid var(--glas-rand);box-shadow:var(--glas-glanz),var(--glas-schatten-hoch);
}
.meldung-pc .meldung-item:hover,.meldung-pc .meldung-item:focus-visible{background:rgba(255,255,255,.97)}
.meldung-pc .meldung-alle{animation:meldung-auf .35s .25s ease-out both;
  background:rgba(209,250,229,.95);color:#065f46}
.meldung-symbol{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;padding:0;animation:meldung-plopp .45s cubic-bezier(.2,.9,.25,1.2) both}
.meldung-symbol svg,.meldung-kopfsymbol svg,.meldung-insel-symbol svg{width:22px;height:22px;color:#047857}
.meldung-symbol .meldung-zahl{position:absolute;top:-3px;right:-3px;box-shadow:0 0 0 2px rgba(255,255,255,.95);animation:meldung-puls 2s 3}

/* Handy: Dynamic Island – eine Fläche verwandelt sich Punkt → Kapsel → Panel → Kreis */
.meldung-insel{position:relative;overflow:hidden;border:0;opacity:0;transform:translateY(-34px) scale(.5);
  transition:width .6s cubic-bezier(.3,1.32,.45,1),height .6s cubic-bezier(.3,1.2,.45,1),border-radius .5s ease,transform .55s cubic-bezier(.3,1.5,.5,1),opacity .25s ease}
.meldung-insel.meldung-glas::before{inset:0}
.meldung-insel.da{opacity:1;transform:none}
.meldung-pille{position:absolute;top:0;right:0;z-index:1;height:40px;width:max-content;display:flex;align-items:center;gap:4px;padding:0 6px 0 4px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.meldung-pille .meldung-auf{display:flex;align-items:center;gap:10px;height:40px;padding:0 6px 0 11px;color:inherit;font:inherit;font-weight:800;font-size:.9rem}
.meldung-punkt{position:relative;width:9px;height:9px;border-radius:50%;background:#10b981}
.meldung-punkt::after{content:"";position:absolute;inset:0;border-radius:50%;background:#10b981;animation:meldung-welle 1.8s ease-out 4}
@keyframes meldung-welle{from{transform:scale(1);opacity:.6}to{transform:scale(2.6);opacity:0}}
.meldung-zaehler{display:inline-block;min-width:.7em;text-align:right;font-variant-numeric:tabular-nums}
.meldung-handy .meldung-liste{position:absolute;top:0;right:0;z-index:1;width:360px;padding:8px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s .2s}
.meldung-insel-symbol{position:absolute;inset:0;z-index:1;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .25s}
.meldung-insel[data-z=pille] .meldung-pille{opacity:1;visibility:visible;transition-delay:.2s}
.meldung-insel[data-z=offen] .meldung-liste{opacity:1;visibility:visible;pointer-events:auto;transition-delay:.18s}
.meldung-insel :focus-visible{outline-offset:-3px}   /* Ring sonst vom Inselrand abgeschnitten */
.meldung-insel[data-z=symbol] .meldung-insel-symbol{opacity:1;transition-delay:.22s}
.meldung-insel:not([data-z=pille]) .meldung-pille{pointer-events:none}
.meldung-insel[data-z=offen] .meldung-item{animation:meldung-auf .45s cubic-bezier(.2,.9,.25,1.15) both;animation-delay:calc(var(--i) * 75ms + 200ms)}
.meldung-insel[data-z=offen] .meldung-alle{animation:meldung-auf .45s .5s both}
/* Aufgeklappt: weich in mitteldunkles Rauchglas mit heller Schrift (lesbar über den bunten Karten) */
.meldung-insel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:linear-gradient(180deg,rgba(33,43,54,.76),rgba(20,28,38,.82))}
.meldung-insel[data-z=offen]::after{opacity:1}
.meldung-insel[data-z=offen]{color:#f8fafc}
.meldung-insel[data-z=offen] .meldung-kopf,.meldung-insel[data-z=offen] .meldung-text small{color:#cbd5e1}
.meldung-insel[data-z=offen] .meldung-item:hover,.meldung-insel[data-z=offen] .meldung-item:focus-visible{background:rgba(255,255,255,.1)}
.meldung-insel[data-z=offen] .meldung-x{background:rgba(255,255,255,.14);color:#e2e8f0}
.meldung-insel[data-z=offen] .meldung-alle{background:rgba(52,211,153,.18);color:#86efac}
/* Glanzstreifen läuft einmal über die neue Kapsel, danach glimmt sie sanft grün */
.meldung-pille::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:20px;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);transform:translateX(-130%)}
.meldung-insel[data-z=pille] .meldung-pille::after{animation:meldung-glanz 1.3s .75s ease-out 1 both}
@keyframes meldung-glanz{to{transform:translateX(130%)}}
@keyframes meldung-glimmen{0%,100%{box-shadow:var(--glas-glanz),var(--glas-schatten-hoch),0 0 0 0 rgba(16,185,129,0)}
  50%{box-shadow:var(--glas-glanz),var(--glas-schatten-hoch),0 0 20px 3px rgba(16,185,129,.42)}}
.meldung-insel[data-z=pille]{animation:meldung-glimmen 2.6s 1.6s ease-in-out 2}
/* Zumachen ohne Nachfedern, Inhalt blendet schneller aus */
.meldung-insel.schliesst{transition:width .42s cubic-bezier(.4,0,.2,1),height .42s cubic-bezier(.4,0,.2,1),border-radius .42s cubic-bezier(.4,0,.2,1),transform .48s cubic-bezier(.45,0,.2,1),opacity .25s}
.meldung-insel.schliesst .meldung-liste,.meldung-insel.schliesst .meldung-pille{transition:opacity .12s,visibility 0s .12s}

/* Symbol in der Kopfzeile (nur Handy): gleich groß wie Lupe und ⋯, erscheint erst, wenn die Insel ankommt */
.meldung-kopfsymbol{display:none}
@media(max-width:700px){
  .topbar .meldung-kopfsymbol{display:grid;place-items:center;position:relative;flex:none;width:44px;height:44px;border-radius:50%;padding:0;margin-left:auto;
    visibility:hidden;opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s cubic-bezier(.2,.9,.25,1.3),visibility 0s .3s}
  .topbar .meldung-kopfsymbol + .mkopf-suche{margin-left:0}
  .topbar .meldung-kopfsymbol.an{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .3s cubic-bezier(.2,.9,.25,1.3),visibility 0s}
  .topbar .meldung-kopfsymbol.sofort{transition:none}
  .meldung-kopfsymbol .meldung-zahl{position:absolute;top:-5px;right:-5px;box-shadow:0 0 0 2px rgba(255,255,255,.95)}
  .meldung-kopfsymbol.federt{animation:meldung-federn .45s cubic-bezier(.2,.9,.25,1.4)}
}
@keyframes meldung-federn{0%{transform:scale(1)}35%{transform:scale(1.18)}70%{transform:scale(.94)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .meldung *,.meldung *::after,.meldung-insel,.meldung-kopfsymbol{transition:none!important;animation:none!important}
}
/* Wiederöffnen vom Symbol: nur die Höhe rollt von oben auf, keine Kugel */
.meldung-insel.rollt{transition:height .55s cubic-bezier(.2,.85,.25,1),opacity .15s}

/* Nach dem Aufrollen: beim Zumachen wieder nach oben einrollen (kein Kreis-Flug) */
.meldung-insel.rollt-zu .meldung-liste{opacity:0;transition:opacity .3s .2s}

/* Einrollen: beschleunigt hinaus (kein dunkler Reststrich) */
.meldung-insel.rollt.rollt-zu{transition:height .4s cubic-bezier(.4,0,1,1),opacity .15s}
/* 320 px: Platz für Marke + Symbol + Lupe + ⋯ ohne Umbruch des Namens */
@media(max-width:340px){.topbar{gap:.25rem}}
/* „Transparenz reduzieren“ / „Mehr Kontrast“: deckend wie die übrigen Glasflächen (liquid-glass.css) */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .meldung-glas,.meldung-pc .meldung-item,.meldung-pc .meldung-alle{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--tafel);border-color:var(--kante-d)}
  .meldung-glas::before{display:none}
}