/* ═══════════════════════════════════════════════════════════════════
   Liquid Glass — angelehnt an Apples Material (WWDC25 „Meet Liquid Glass")
   Ebenen von hinten nach vorn:
     1 Schatten        äußerer, weicher Abstand zum Himmel
     2 Lichtbrechung   nur Chromium, nur schwebende Flächen (liquid-glass.js)
     3 Frost           backdrop-filter blur/saturate – nur schwebende Flächen
     4 Tönung          halbtransparentes Weiß mit Hauch Markengrün
     5 Tiefe           innere Lichtsammlung am unteren Rand
     6 Spiegelung      weicher Lichtfleck oben links
     7 Glanz/Randlicht Glanzkante oben, Verlaufsring (::before)
     8 Aufleuchten     Lichtschein unter der Maus (::after, liquid-glass.js)
   Apple: echtes Glas gehört in die Navigationsebene. Inhaltskarten (bis
   279 Sim-Karten) bekommen deshalb die Glas-Anmutung OHNE backdrop-filter –
   das sieht über dem ruhigen Himmel gleich aus und ruckelt nie.
   Globale Tokens (--tafel, --kante …) bleiben unverändert: der
   Chemie-Rechner hängt daran.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --glas-oben:rgba(255,255,255,.74);
  --glas-unten:rgba(255,255,255,.40);
  --glas-hauch:color-mix(in srgb, var(--plumb) 7%, transparent);
  --glas-rand:rgba(255,255,255,.72);
  --glas-schatten:0 10px 28px -14px rgba(30,70,110,.36),0 2px 6px -3px rgba(30,70,110,.16);
  --glas-schatten-hoch:0 18px 36px -16px rgba(30,70,110,.44),0 3px 8px -3px rgba(30,70,110,.18);
  --glas-glanz:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.38),
               inset 0 -18px 26px -24px rgba(255,255,255,.95);
  --glas-schatten-klein:0 6px 16px -10px rgba(30,70,110,.30),0 1px 3px -2px rgba(30,70,110,.14);
  --glas-ring:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.18) 34%,
               rgba(255,255,255,.04) 62%,rgba(255,255,255,.72));
}

/* ── Himmel mit mehr Tiefe: weiche Farbflächen, durch die das Glas lebt ── */
.sky-deco{background:
  radial-gradient(42vw 30vw at 10% 16%,rgba(255,214,120,.18),transparent 70%),
  radial-gradient(46vw 34vw at 90% 26%,rgba(79,195,247,.26),transparent 70%),
  radial-gradient(52vw 40vw at 28% 88%,rgba(25,211,107,.18),transparent 70%),
  radial-gradient(36vw 28vw at 82% 92%,rgba(255,165,60,.16),transparent 70%)}

/* Der Randring (::before) braucht eine positionierte Fläche. :where() hat keine
   Spezifität: wo styles.css schon eine Position setzt (Porträt im Steckbrief:
   sticky), bleibt die stehen. */
:where(.card,.cstat,.statblock,.mini,.kzeile,.sr,.simlist-row){position:relative}
/* Bis 760px schaltet styles.css das Porträt auf static (kein Mitlaufen). relative ohne
   Versatz sieht gleich aus, hält aber den Randring an der Tafel statt am Fenster. */
@media(max-width:760px){.portraettafel{position:relative}}

/* ── Inhaltsflächen: Tafeln, Karten, Volkszählungs-Kacheln ── */
.card,.cstat{
  background:
    radial-gradient(120% 60% at 12% -10%,rgba(255,255,255,.62),transparent 55%),   /* 6 Spiegelung */
    linear-gradient(180deg,var(--glas-oben),var(--glas-unten)),                     /* 4 Tönung */
    linear-gradient(var(--glas-hauch),var(--glas-hauch));
  border:1px solid var(--glas-rand);
  box-shadow:var(--glas-glanz),var(--glas-schatten);                                 /* 7 + 5 + 1 */
}
.pop:hover{border-color:rgba(255,255,255,.9);box-shadow:var(--glas-glanz),var(--glas-schatten-hoch)}
.cstat.clickable:hover,.cstat.clickable:focus-visible{border-color:rgba(255,255,255,.9);box-shadow:var(--glas-glanz),var(--glas-schatten-hoch)}
/* 7 Randlicht: Verlaufsring, per Maske auf 1.5px beschnitten */
.card::before,.cstat::before,.statblock::before,.mini::before,.kzeile::before,.sr::before,
.simlist-row:not(.paar-row)::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;
}
/* 8 Aufleuchten unter der Maus (Position setzt liquid-glass.js) */
.pop:not([data-tip])::after,.cstat.clickable:not([data-tip])::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(220px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.42),transparent 70%);
  opacity:0;transition:opacity .3s;
}
.pop:hover::after,.cstat.clickable:hover::after{opacity:1}

/* ── Innenflächen: Steckbrief (Fenster und Sim-Seite), Listen, Kommentare,
   Suchtreffer. Nur Tönung, Glanz und Randlicht, kein Frost: im Fenster wäre
   das Glas auf Glas (Apple), und es bleibt bei 279 Sims flüssig. ── */
.statblock,.mini,.kzeile,.sr,.simlist-row:not(.paar-row){
  background:
    radial-gradient(120% 70% at 12% -20%,rgba(255,255,255,.55),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.34));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--glas-glanz),var(--glas-schatten-klein);
}
/* Im Fenster liegt dahinter der abgedunkelte Grund: etwas mehr Weiß, sonst wirkt es grau */
.modal .card,.modal .statblock,.modal .mini,.modal .simlist-row:not(.paar-row){
  background:
    radial-gradient(120% 70% at 12% -20%,rgba(255,255,255,.6),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.58))}
.simlist-row:not(.paar-row):hover,.modal .simlist-row:not(.paar-row):hover{
  background:linear-gradient(180deg,rgba(244,250,241,.92),rgba(226,246,219,.66));border-color:#bfe8a9}
/* Der News-Artikel im Fenster ist bewusst ohne eigene Tafel (styles.css) */
.news-modal .news-card{background:none;border:0;box-shadow:none}
.news-modal .news-card::before{display:none}
/* Textkästen in einer Glastafel: nur ein Hauch, sonst Glas auf Glas. Die grünen Kopfzeilen (.subhead) bleiben. */
.note-box{background:rgba(255,255,255,.44);border-color:rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.95)}
/* Chemie-Rechner: nur die Oberfläche der beiden Sim-Tafeln, Aufbau und Logik bleiben */
.chem-sim{background:
    radial-gradient(120% 50% at 12% -10%,rgba(255,255,255,.55),transparent 55%),
    linear-gradient(180deg,var(--glas-oben),var(--glas-unten)),linear-gradient(var(--glas-hauch),var(--glas-hauch));
  border-color:var(--glas-rand);box-shadow:var(--glas-glanz),var(--glas-schatten)}

/* Mitte des Rechners ist schon echtes Glas (styles.css): nur Glanzkante und Schatten angleichen */
.chem-verdict{border-color:var(--glas-rand);box-shadow:var(--glas-glanz),var(--glas-schatten)}

/* ── Perfekte Liebe: Treffer als rosa getöntes Glas, der Knopf als glänzende Perle ── */
.liebe-treffer{
  background:radial-gradient(120% 80% at 10% -20%,rgba(255,255,255,.6),transparent 55%),
    linear-gradient(90deg,rgba(255,228,240,.85),rgba(255,255,255,.5));
  border-color:rgba(249,194,220,.9);box-shadow:var(--glas-glanz),var(--glas-schatten-klein)}
.liebe-keiner,.liebe-slot{background:rgba(255,255,255,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
:where(.liebe-knopf){position:relative}
/* Fenster „Weitere Kandidaten“: schwebende Ebene, echtes Glas mit rosa Hauch. Gefrostet wird nur,
   was direkt hinter dem Fenster liegt; die Seite selbst bleibt klar (keine Abdunklung). */
.liebe-panel{
  background:radial-gradient(120% 50% at 12% -10%,rgba(255,255,255,.6),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.62)),linear-gradient(rgba(255,228,240,.34),rgba(255,228,240,.34));
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.82);box-shadow:var(--glas-glanz),0 24px 54px -18px rgba(120,20,70,.42)}
.liebe-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  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}
.liebe-panel-kopf{border-bottom-color:rgba(249,194,220,.55)}

/* ── Eingaben und Pillen: Suche, Weltwahl, Beziehungssuche, Sim-Wahl ── */
.subtab,.sims-suche,.rel-search{
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.44));
  border-color:rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.4),var(--schatten-klein);
}

/* Auswahllisten: nur die Farbe tönen, der eigene Pfeil ist ein background-image.
   Die Sim-Wahl bei Perfekte Liebe bleibt wie die Felder im Rechner. */
.sims-world{background-color:rgba(255,255,255,.62);border-color:rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.4),var(--schatten-klein)}

/* ── Schwebende Ebene: App-Hinweis, Emoji-Fenster, Mini-Karte, Zoom ── echtes Glas */
.pwa-pop,.emoji-fenster,.mini-karte{
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.68)),linear-gradient(var(--glas-hauch),var(--glas-hauch));
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:var(--glas-glanz),0 24px 54px -18px rgba(30,70,110,.5);
}
.zoom-ctrl button{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.5));
  -webkit-backdrop-filter:blur(10px) saturate(170%);backdrop-filter:blur(10px) saturate(170%);
  border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,var(--schatten-klein)}
/* Annies Sprechblase bleibt deckend (die Spitze überlappt den Rand), bekommt aber Glanz */
.gruss-blase{box-shadow:var(--glas-glanz),var(--glas-schatten-hoch)}

/* ── Handy: die Reiterleiste unten ist die Navigationsebene, also echtes Glas ── */
@media(max-width:700px){
  .tabs{background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,.62));
    -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
    border-top:1px solid rgba(255,255,255,.9);
    box-shadow:inset 0 1px 0 #fff,0 -10px 28px -14px rgba(30,70,110,.35)}
}

/* backdrop-filter macht jeden Glasknopf zu einer eigenen Ebene. Ohne das hier
   läge die Kurzinfo (data-tip) unter dem Nachbarknopf und die Lupe unter dem Suchfeld. */
[data-tip]:hover,[data-tip]:focus-visible{z-index:95}
.search-box .mag{z-index:1}

/* ── Navigationsebene: Reiter und Pillen oben (Desktop) – echtes Glas ── */
@media(min-width:701px){
  .tab,.subtab,.search-box input,.live-badge:not(.ist-live),.beta-badge{
    background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.30));
    -webkit-backdrop-filter:blur(10px) saturate(170%);backdrop-filter:blur(10px) saturate(170%);
    border-color:rgba(255,255,255,.78);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),var(--schatten-klein);
  }
  .live-badge:not(.ist-live):hover{border-color:#9146FF}
  /* aktiver Reiter bleibt grün getönt (Apple: Tönung nur für die Hauptaktion), mit Glanz */
  .tab.active{background:linear-gradient(180deg,color-mix(in srgb,var(--plumb) 82%,#fff),var(--plumb));
    border-color:rgba(255,255,255,.55);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -8px 14px -10px rgba(0,60,30,.35),var(--schatten-klein)}
}

/* ── Schwebende Fenster (Steckbrief, Listen): Glanz, Randlicht, Tiefe ── */
.modal{
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.4),
             inset 0 -30px 40px -36px rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.28);
}
/* nur Desktop: am Handy ist das Fenster eine scrollende Unterleiste, der Ring liefe mit */
@media(min-width:701px){
  .modal::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
    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;
  }
}
/* 2 Lichtbrechung: nur wenn liquid-glass.js die Karte gebaut hat (Chromium, Maus) */
.lg-refract .modal[data-lg]{
  backdrop-filter:blur(26px) var(--lg-url) saturate(150%);
}

/* ── Barrierefreiheit: deckend statt Glas ── */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .card,.cstat,.statblock,.mini,.kzeile,.sr,.simlist-row:not(.paar-row),.chem-sim,
  .modal .card,.modal .statblock,.modal .mini,.modal .simlist-row:not(.paar-row){background:linear-gradient(180deg,var(--tafel),var(--tafel-2));border:1.5px solid var(--kante-d);box-shadow:var(--schatten)}
  .news-modal .news-card{background:none;border:0;box-shadow:none}
  .card::before,.cstat::before,.statblock::before,.mini::before,.kzeile::before,.sr::before,.simlist-row::before,
  .modal::before,.pop::after,.cstat::after,.liebe-knopf::before{display:none}
  .note-box{background:var(--tafel);border-color:var(--kante-d)}
  .liebe-treffer{background:linear-gradient(90deg,#fff0f6,#fff)}
  .liebe-keiner,.liebe-slot{background:none}
  .liebe-panel{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--tafel);border:1.5px solid var(--kante-d)}
  .liebe-panel::before{display:none}
  .tab,.subtab,.search-box input,.live-badge,.live-badge:not(.ist-live),.beta-badge,.sims-suche,.rel-search,
  .pwa-pop,.emoji-fenster,.mini-karte,.zoom-ctrl button,.nach-oben{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--tafel);border-color:var(--kante-d)}
  /* nur die Farbe: der Pfeil der Auswahl ist ein background-image */
  .sims-world{background-color:var(--tafel);border-color:var(--kante-d)}
  /* Handy-Umbau (styles.css): Leiste, Suche, Sheet-Kopf, Chip-Reihe, ⋯-Menü */
  .mnav-kapsel,.msuche,.sheet-kopf,.mmenue{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--tafel)}
  @media(max-width:700px){.sims-filter{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--tafel)}}
  /* die Reiterleiste ist nur am Handy eine Fläche */
  @media(max-width:700px){.tabs{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--tafel)}}
}
@media (forced-colors:active){ .card,.cstat,.statblock,.mini,.kzeile,.sr,.simlist-row{border:1px solid CanvasText} }