/* glass.css – „Liquid Glass“-Oberfläche nach iOS 26 (Standard seit 10/2026)
   ===========================================================================
   Wird immer geladen; aktiv über die Klasse html.glass, die ein Skript im <head> setzt (reiseroute/index.html,
   klima/index.html). ?glass=0 bzw. localStorage wk_glass=0 schaltet zurück auf die klassische Optik.
   Zusatzklasse html.glass-solid = „Transparenz reduzieren“ (Schalter unter Mehr → Erscheinungsbild), weil Safari die
   iOS-Einstellung nicht abfragen kann (prefers-reduced-transparency fehlt in WebKit; Chromium nutzt den Block unten).

   Grenzen im Web (Safari 26/27): keine Lichtbrechung (backdrop-filter: url() wird ignoriert), kein Systemmaterial.
   Ersatz: Milchglas (blur + leichte Sättigung) + Glanzkante als Verlaufsrand + Glanzlicht + Federanimationen.
   Regeln aus Apples HIG: Glas nur in der Bedienebene (schwebende Leisten, Knöpfe, Blätter), Inhalt bleibt opak
   (gruppierte Listen); wenige große Glasflächen; kein Glas in Glas (WebKit: innere Ebene sähe nur den Eltern-Inhalt). */

/* ======================================================================= Tokens */
html.glass{
  --accent:#007aff; --g-accent-text:#0062d6;      /* Fläche (Knöpfe) / kleine Akzent-Schrift (≥4,5:1) */
  --muted:#3f4a56;                                 /* Sekundärtext auf hellem Glas lesbar (style.css: #5d6b7a) */
  --g-tint:rgba(255,255,255,.44);                  /* Bedienglas über der Karte */
  --g-tint-text:rgba(250,251,253,.82);             /* textlastiges Glas (Blatt, Overlays, Dialoge) */
  --g-blur:18px; --g-sat:150%; --g-bright:1.03;
  --g-edge:rgba(255,255,255,.85); --g-ring:rgba(255,255,255,.45); --g-rim:rgba(16,24,40,.10);
  --g-spec:rgba(255,255,255,.55); --g-rimlight:1;
  --g-shadow:0 12px 34px rgba(16,30,52,.18), 0 2px 8px rgba(16,30,52,.10);
  --g-fill:rgba(120,120,128,.14); --g-fill2:rgba(120,120,128,.24);
  --g-lens:rgba(255,255,255,.74); --g-lens-ink:#0062d6;   /* gewählter Tab: helle Linse */
  --g-ink:#0f1720; --g-muted:#3f4a56;
  --g-page:#f2f2f7; --g-group:#ffffff; --g-sep:rgba(60,60,67,.20);
  --g-purple:#8944ab;
  --g-spring:linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  --g-ease:cubic-bezier(.2,.8,.2,1);
  --g-spring-smooth:linear(0, .025 2.9%, .087 5.9%, .173 8.8%, .270 11.8%, .370 14.7%, .468 17.6%, .560 20.6%, .643 23.5%, .717 26.5%, .781 29.4%, .834 32.4%, .879 35.3%, .915 38.2%, .944 41.2%, .966 44.1%, .983 47.1%, .995 50%, 1.004 52.9%, 1.009 55.9%, 1.013 58.8%, 1.015 61.8%, 1.015 67.6%, 1.013 73.5%, 1.010 79.4%, 1.007 85.3%, 1.004 91.2%, 1);   /* Feder ohne großes Überschwingen (Linse) */
  --g-lift-bg:rgba(255,255,255,.24); --g-lift-rim:rgba(255,255,255,.92);   /* angehobene Linse: klares Glas */
  --g-inset:12px; --g-gap:8px;                     /* Rand schwebender Flächen; Abstand Tab-Leiste ↔ Rand */
  --g-r-lg:33px; --g-r-md:22px; --g-r-sm:14px;     /* konzentrische Radien (33 = halbe Höhe der Tab-Leiste) */
}
html.glass[data-theme="dark"]{
  --accent:#0a84ff; --g-accent-text:#409cff; --muted:#a6b3c0;
  --g-tint:rgba(36,40,47,.42); --g-tint-text:rgba(30,33,39,.86); --g-sat:200%; --g-bright:.92;
  --g-edge:rgba(255,255,255,.30); --g-ring:rgba(255,255,255,.10); --g-rim:rgba(0,0,0,.40); --g-spec:rgba(255,255,255,.16); --g-rimlight:.38;
  --g-shadow:0 12px 34px rgba(0,0,0,.50), 0 2px 8px rgba(0,0,0,.35);
  --g-fill:rgba(120,120,128,.26); --g-fill2:rgba(120,120,128,.38);
  --g-lens:rgba(58,58,62,.90); --g-lens-ink:#4da3ff;
  --g-ink:#f2f4f7; --g-muted:#a6b3c0; --g-page:#000000; --g-group:#1c1c1e; --g-sep:rgba(84,84,88,.60);
  --g-purple:#da8fff; --g-lift-bg:rgba(255,255,255,.10); --g-lift-rim:rgba(255,255,255,.50);
}
@media (prefers-color-scheme:dark){ html.glass:not([data-theme="light"]){
  --accent:#0a84ff; --g-accent-text:#409cff; --muted:#a6b3c0;
  --g-tint:rgba(36,40,47,.42); --g-tint-text:rgba(30,33,39,.86); --g-sat:200%; --g-bright:.92;
  --g-edge:rgba(255,255,255,.30); --g-ring:rgba(255,255,255,.10); --g-rim:rgba(0,0,0,.40); --g-spec:rgba(255,255,255,.16); --g-rimlight:.38;
  --g-shadow:0 12px 34px rgba(0,0,0,.50), 0 2px 8px rgba(0,0,0,.35);
  --g-fill:rgba(120,120,128,.26); --g-fill2:rgba(120,120,128,.38);
  --g-lens:rgba(58,58,62,.90); --g-lens-ink:#4da3ff;
  --g-ink:#f2f4f7; --g-muted:#a6b3c0; --g-page:#000000; --g-group:#1c1c1e; --g-sep:rgba(84,84,88,.60);
  --g-purple:#da8fff; --g-lift-bg:rgba(255,255,255,.10); --g-lift-rim:rgba(255,255,255,.50);
} }
html.glass body{ font-family:-apple-system,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }

/* ======================================================================= Material
   Bedienglas (clear): Glanzlicht oben links + Lichtverlauf + Tönung; Glanzkante oben, Lichtsaum unten, feine Kontur, Schatten */
html.glass :is(.card-ov, .toolbar, #rwMapBtns, #rwViewBtn, #rwOpa, #rwNav, #rwBack.on, .toast){
  background:radial-gradient(140% 100% at 18% -20%, var(--g-spec), transparent 52%),
             linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%);
  background-color:var(--g-tint);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-bright));
  backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat)) brightness(var(--g-bright));
  border:.5px solid var(--g-rim);
  box-shadow:inset 0 1px 0 var(--g-edge), inset 0 -10px 18px -14px rgba(255,255,255,.55), var(--g-shadow);
  color:var(--g-ink);
}
/* Textglas (regular): Infokasten, Overlays, Legenden, Popups, Dialoge, Quellenangabe */
html.glass :is(#rwSheet, #rwOv, #rwLegend, .maplibregl-popup-content, .modal .box, .layerspanel, .maplibregl-ctrl-attrib.maplibregl-compact){
  background:radial-gradient(140% 90% at 15% -25%, var(--g-spec), transparent 50%) !important;
  background-color:var(--g-tint-text) !important;
  -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%);
  border:.5px solid var(--g-rim);
  box-shadow:inset 0 1px 0 var(--g-edge), inset 0 0 0 1px var(--g-ring), var(--g-shadow);
  color:var(--g-ink);
}
/* Glaskante: Verlaufsrand mit Licht oben links und unten rechts (Ersatz für die im Web fehlende Lichtbrechung) */
html.glass :is(.card-ov, .toolbar){ position:relative; }
html.glass :is(.card-ov, .toolbar, #rwMapBtns, #rwViewBtn, #rwOpa, #rwNav, #rwSheet, #rwLegend, #rwBack.on, .modal .box)::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.2px; pointer-events:none; z-index:2;
  background:linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.25) 22%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 62%, rgba(255,255,255,.35) 85%, rgba(255,255,255,.75) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity:var(--g-rimlight); }
/* in „Mehr“ ist die Kartenauswahl eine statische Listengruppe (routes.js: position:static !important) – kein Glas, keine Kante */
html.glass #rwMehr :is(.card-ov, .toolbar)::after{ content:none; }
/* Werkzeuggruppen INNERHALB der Werkzeug-Kapsel: kein eigenes Glas */
html.glass .toolbar .tb-group{ -webkit-backdrop-filter:none; backdrop-filter:none; background:transparent; border:0; border-radius:0; box-shadow:none; }
html.glass .maplibregl-popup-tip{ display:none; }

/* ======================================================================= Karte: schwebende Bedienelemente */
/* Titel-Kapsel: Symbole ohne eigene Füllung (iOS 26: Knöpfe in gemeinsamer Glaskapsel), Trefferfläche 44 */
html.glass .titlechip{ border-radius:999px; padding:0 6px 0 4px; height:44px; gap:2px; }   /* gleiche Höhe wie die eingeklappte Legende rechts */
html.glass .titlechip button{ border:0; background:transparent; color:var(--g-ink); width:36px; height:36px; font-size:17px; position:relative; border-radius:50%; }
html.glass .titlechip button:active{ background:var(--g-fill); }
html.glass .titlechip button::before{ content:''; position:absolute; inset:-4px; border-radius:50%; }
html.glass .titleicon{ border-radius:50%; width:34px; height:34px; margin-right:4px; }
html.glass #rwViewBtn{ border-radius:999px; min-height:44px; padding:0 12px 0 14px; gap:7px; font-size:15px; font-weight:600; }
html.glass #rwViewBtn .ic{ width:19px; height:19px; } html.glass #rwViewBtn .chev{ width:16px; height:16px; fill:var(--g-accent-text); }
html.glass #rwViewBtn.on{ color:var(--g-accent-text); }
html.glass #rwOpa{ border-radius:999px; padding:10px 18px; top:calc(72px + var(--wk-legh,44px) + var(--sat,0px) + var(--rwtopbar,0px)); transform-origin:100% 0; }
/* Klimalegende: eingeklappt eine 44-px-Kapsel (wie die Titel-Kapsel links), aufgeklappt eine Karte – Wechsel als Morph (glassfx.js) */
html.glass .legendcard{ border-radius:22px; }
html.glass .legendcard:not(.collapsed){ padding:12px 14px 14px; }
html.glass .legendcard.collapsed{ padding:0 9px 0 6px; }
html.glass .leg-sw-mtx{ border-radius:8px; grid-template-columns:repeat(4,8px); grid-auto-rows:8px; box-shadow:0 0 0 .5px rgba(0,0,0,.18), inset 0 0 0 .5px rgba(255,255,255,.4); }
html.glass .leg-sw{ border:0; border-radius:999px; height:9px; box-shadow:0 0 0 .5px rgba(0,0,0,.2); }
html.glass .leg-mini-ticks{ color:var(--g-muted); }
html.glass .leg-chev{ fill:var(--g-accent-text); width:20px; height:20px; }
html.glass .leg-title{ font-size:15px; color:var(--g-ink); }
html.glass .legendcard:not(.collapsed) .leg-head{ min-height:24px; }
/* Werkzeug-Kapseln */
html.glass :is(.toolbar, #rwMapBtns){ border-radius:999px; overflow:hidden; gap:0; }
html.glass .toolbar .tb-group+.tb-group{ border-top:.5px solid var(--g-sep); }
html.glass :is(.toolbar .tb-group button, #rwMapBtns button){ width:48px; height:48px; border-bottom:.5px solid var(--g-sep); color:var(--g-ink); background:transparent; }
html.glass :is(.toolbar .tb-group button, #rwMapBtns button):last-child{ border-bottom:0; }
html.glass :is(.toolbar .tb-group button, #rwMapBtns button) svg{ width:22px; height:22px; }
html.glass :is(.tb-group button.on, #rwMapBtns button.on){ color:var(--g-accent-text); background:var(--g-lens); }
@media (min-width:761px){
  html.glass{ --g-tb:clamp(30px, calc((100dvh - 188px - var(--sat,0px) - var(--rwtopbar,0px) - var(--sab,0px)) / 7), 40px); }
  html.glass :is(.toolbar .tb-group button, #rwMapBtns button){ width:var(--g-tb); height:var(--g-tb); }
  html.glass :is(.toolbar .tb-group button, #rwMapBtns button) svg{ width:20px; height:20px; }
}
@media (min-width:761px) and (max-height:520px){ html.glass :is(.toolbar .tb-group button, #rwMapBtns button) svg{ width:18px; height:18px; } }
/* Zeitleiste */
html.glass .timebar{ border-radius:var(--g-r-lg); padding:7px 16px 5px 9px; gap:12px; }
html.glass .timebar #play{ background:var(--accent); width:46px; height:46px; box-shadow:0 4px 12px rgba(0,122,255,.35), inset 0 1px 0 rgba(255,255,255,.35); position:relative; }
html.glass .timebar #play svg{ width:22px; height:22px; }
html.glass #timelabel{ color:var(--g-ink); } html.glass #timepos{ color:var(--g-muted); }
html.glass .tlrow{ font-size:13.5px; line-height:15px; min-height:15px; }
@media (max-width:420px){ html.glass .timebar{ padding-right:12px; gap:11px; } html.glass .tlrow{ font-size:12.5px; gap:5px; letter-spacing:-.005em; } }
/* Quellenangabe der Karte als kleine Glaskapsel */
html.glass .maplibregl-ctrl-attrib.maplibregl-compact{ border-radius:var(--g-r-sm); color:var(--g-muted) !important; }
html.glass .maplibregl-ctrl-attrib a{ color:var(--g-muted); }
html.glass .maplibregl-ctrl-attrib-button{ background-color:transparent !important; }
html.glass[data-theme="dark"] .maplibregl-ctrl-attrib-button{ filter:invert(1); }
@media (prefers-color-scheme:dark){ html.glass:not([data-theme="light"]) .maplibregl-ctrl-attrib-button{ filter:invert(1); } }
html.glass .maplibregl-ctrl-scale{ border-radius:3px; }
html.glass .maplibregl-popup-content{ border-radius:var(--g-r-md); padding:12px 14px; }

/* ======================================================================= Infokasten (Blatt) */
html.glass #rwSheet{ border-radius:var(--g-r-lg); padding:20px 16px 14px; }
html.glass #rwSheet::before{ content:''; position:absolute; top:7px; left:50%; width:36px; height:5px; margin-left:-18px; border-radius:3px; background:var(--g-fill2); }   /* Griff: nach unten wischen schließt */
html.glass #rwSheet .sh-dt{ color:var(--g-accent-text); }
html.glass #rwSheet .sh-lead{ color:var(--muted); }
html.glass #rwSheet.full .sh-lead{ color:var(--g-ink); }
html.glass #rwSheet .sh-btn{ align-items:center; }
html.glass #rwSheet .sh-btn button{ min-height:50px; padding:0 18px; border-radius:999px; background:var(--accent); font-size:calc(15px * var(--rwfs,1)); }
html.glass #rwSheet .sh-btn button.x{ flex:none; width:50px; height:50px; min-height:0; padding:0; border-radius:50%; display:grid; place-items:center; background:var(--g-fill); border:0; color:var(--g-ink); font-size:17px; }
html.glass #rwSheet.dragging{ transition:none !important; }
@media (hover:hover) and (pointer:fine){ html.glass #rwSheet::before{ display:none; } html.glass #rwSheet{ padding-top:16px; } }   /* Maus: kein Wischen, kein Griff */

/* ======================================================================= Overlays und Routen-Legende */
html.glass :is(#rwOv, #rwLegend){ border-radius:var(--g-r-lg); padding:16px 18px; }
html.glass #rwOv{ overflow-y:auto; overscroll-behavior:contain;
  box-shadow:inset 1px 1px 0 var(--g-edge), inset -1px -1px 0 var(--g-ring), inset 0 0 0 .5px var(--g-ring), var(--g-shadow); }
html.glass :is(#rwOvX, #rwLegX){ width:32px; height:32px; border-radius:50%; background:var(--g-fill) !important; position:relative; }
html.glass :is(#rwOvX, #rwLegX, .timebar #play)::before{ content:''; position:absolute; left:50%; top:50%; width:max(100%,44px); height:max(100%,44px); transform:translate(-50%,-50%); border-radius:22px; }
html.glass #rwOv .ovrow{ border-bottom-color:var(--g-sep); }
html.glass #rwOv h4{ color:var(--g-muted); }

/* ======================================================================= Handy: schwebende Tab-Leiste, Karte läuft darunter */
@media (max-width:760px){
  html.glass{ --g-navb:max(var(--g-gap), calc(var(--sab,0px) - 12px));   /* iOS 26: schwebt in der Home-Indicator-Zone */
              --g-navtop:calc(var(--rwpadb,64px) + var(--g-navb)); }
  html.glass #rwNav{ left:var(--g-inset); right:var(--g-inset); bottom:var(--g-navb); top:auto; padding:5px; gap:2px; border-radius:999px;
    transition:left .5s var(--g-spring), right .5s var(--g-spring), padding .3s var(--g-ease); }
  html.glass #rwNav button{ height:56px; border-radius:999px; color:var(--g-ink); font-size:10px; font-weight:600; gap:2px; letter-spacing:.01em;
    transition:height .35s var(--g-ease), font-size .25s var(--g-ease), transform .45s var(--g-spring), background-color .2s, color .2s; }
  html.glass #rwNav button svg{ width:26px; height:26px; }
  /* beim Scrollen nach unten schrumpft die Leiste auf eine Symbol-Kapsel (iOS 26 „minimize on scroll“) */
  html.glass body.rwnav-mini #rwNav{ left:calc(var(--g-inset) + 48px); right:calc(var(--g-inset) + 48px); padding:4px; --np:4px; }
  html.glass body.rwnav-mini #rwNav button{ height:42px; font-size:0; gap:0; }
  html.glass body.rwnav-mini #rwNav button svg{ width:23px; height:23px; }
  html.glass body.rwmap-shrink #map{ bottom:0; }
  html.glass body.rwmap-shrink .ov-bc{ left:var(--g-inset); right:var(--g-inset); bottom:calc(var(--g-navtop) + 10px); }
  html.glass body.rwmap-shrink :is(.ov-br, .ov-bl){ bottom:calc(var(--g-navtop) + 94px); }
  html.glass #rwMapBtns{ bottom:calc(var(--g-navtop) + 94px); }
  html.glass #rwOv{ right:calc(var(--g-inset) + 58px); bottom:calc(var(--g-navtop) + 94px); width:min(320px, calc(100vw - 2 * var(--g-inset) - 58px));
    max-height:calc(100dvh - var(--g-navtop) - 94px - 140px - var(--sat,0px) - var(--rwtopbar,0px)); }
  html.glass #rwSheet{ left:var(--g-inset); right:var(--g-inset); bottom:calc(var(--g-navtop) + 10px); }
  html.glass body.rwmap-shrink .maplibregl-ctrl-bottom-left{ right:calc(72px + var(--sar,0px)); margin-bottom:calc(var(--g-navtop) + 98px); }
  html.glass body.rwmap-shrink .maplibregl-ctrl-bottom-right{ margin-bottom:calc(var(--g-navtop) + 250px); }   /* über der Kapsel aus Overlays, Standort, Messen */
  html.glass body.rwmap-shrink:has(#btnNorth:not([hidden])) .maplibregl-ctrl-bottom-right{ margin-bottom:calc(var(--g-navtop) + 298px); }
  html.glass body.rwmap-shrink .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib{ margin:0 24px 0 12px; }
  html.glass body:has(#rwSheet.on, #rwOv:not([hidden])) .maplibregl-ctrl-bottom-right>.maplibregl-ctrl-attrib{ visibility:hidden; }
  html.glass #rwPanel{ height:100%; }
  html.glass #rwInfo, html.glass .rwpage{ padding-bottom:calc(var(--g-navtop) + 28px) !important; }
  /* Großtitel 34 pt */
  html.glass #rwHead:not(.sub) b{ font-size:calc(34px * var(--rwfs-user,1)); }
}
@media (min-width:761px){
  html.glass #rwOv{ right:calc(22px + var(--g-tb,40px) + var(--rwpad,0px)); width:min(320px, calc(100vw - 34px - var(--g-tb,40px) - var(--rwpad,0px) - var(--sal,0px))); max-height:calc(100dvh - 120px - var(--sab,0px) - var(--sat,0px) - var(--rwtopbar,0px)); }
}
/* gewählter Tab: helle bzw. dunkle Linse mit dunklerem Blau (Kontrast ≥4,5:1 auch über bunter Karte) – Handy und Desktop */
html.glass #rwNav button.on{ background:var(--g-lens); color:var(--g-lens-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 .5px rgba(60,60,67,.12), 0 1px 4px rgba(16,30,52,.10); }
html.glass #rwNav button:hover:not(.on){ background:var(--g-fill); color:var(--g-ink); }

/* ======================================================================= Auswahl-Linse (glassfx.js lens())
   Ein eigenes Element unter den Knöpfen; Lage aus --i/--n (Skript) und --np/--ng (Innenabstand/Lücke der Leiste).
   Gleitet per Feder zum gewählten Knopf, dehnt sich unterwegs und hebt sich als klares Glas an; beim Ziehen folgt sie dem Finger. */
.g-lens, .g-glow{ display:none; }
html.glass .g-lens{ display:block; position:absolute; z-index:0; left:var(--np,0px); top:var(--np,0px); pointer-events:none; border-radius:999px;
  width:calc((100% - 2 * var(--np,0px) - (var(--n,1) - 1) * var(--ng,0px)) / var(--n,1)); height:calc(100% - 2 * var(--np,0px));
  translate:calc(var(--i,0) * (100% + var(--ng,0px))) 0;
  background:var(--g-lens); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 .5px rgba(60,60,67,.12), 0 1px 4px rgba(16,30,52,.10);
  transition:translate .6s var(--g-spring-smooth), scale .45s var(--g-spring), background-color .25s, box-shadow .25s, opacity .2s; }
html.glass .g-lens.off{ opacity:0; }
html.glass .has-lens > button{ position:relative; z-index:1; }
html.glass .has-lens > button svg{ transition:scale .45s var(--g-spring); }
html.glass #rwNav.has-lens > button.on, html.glass :is(#rwSeg, .rwseg).has-lens > button.on{ background:transparent; box-shadow:none; }
html.glass .g-lens.lift, html.glass .scrub > .g-lens{ background:var(--g-lift-bg);
  box-shadow:inset 0 0 0 1px var(--g-lift-rim), inset 0 1px 3px rgba(255,255,255,.75), inset 0 -3px 8px rgba(16,30,52,.08), 0 8px 22px rgba(16,30,52,.20); }
html.glass .scrub > .g-lens{ scale:1.16; transition:scale .45s var(--g-spring), background-color .2s, box-shadow .2s; }
html.glass .has-lens{ -webkit-user-select:none; user-select:none; }
html.glass #rwNav.scrub > button[data-hot]{ color:var(--g-lens-ink); }
html.glass #rwNav.scrub > button.on:not([data-hot]){ color:var(--g-ink); }
html.glass :is(#rwSeg, .rwseg).scrub > button[data-hot]{ color:var(--g-ink); }
html.glass :is(#rwSeg, .rwseg).scrub > button.on:not([data-hot]){ color:var(--muted); }
html.glass .scrub > button[data-hot] svg{ scale:1.14; }
html.glass #rwNav{ --np:5px; --ng:2px; touch-action:none; }
@media (min-width:761px){
  html.glass #rwNav{ --np:6px; }
  html.glass #rwNav > .g-lens{ width:calc(100% - 2 * var(--np)); height:calc((100% - 2 * var(--np) - (var(--n,1) - 1) * var(--ng)) / var(--n,1));
    translate:0 calc(var(--i,0) * (100% + var(--ng))); border-radius:24px; }
}
/* Segmente: gleich breite Felder (wie UISegmentedControl), Linse = weißer bzw. grauer Schieber */
html.glass #rwSeg{ --np:3px; --ng:0px; touch-action:pan-y; }
html.glass .rwseg{ --np:3px; --ng:2px; touch-action:pan-y; }
html.glass :is(#rwSeg, .rwseg).has-lens{ position:relative; }
html.glass body[data-rwarea="etappen"] #rwSeg.has-lens{ display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; }
html.glass :where(#rwSeg, .rwseg) > .g-lens{ background:var(--g-group); box-shadow:0 2px 8px rgba(0,0,0,.12), inset 0 .5px 0 rgba(255,255,255,.6); }

/* Glas leuchtet am Berührungspunkt auf (eine gemeinsame Ebene, glassfx.js) */
html.glass .g-glow{ display:block; position:fixed; z-index:5000; pointer-events:none; opacity:0; mix-blend-mode:plus-lighter;
  background:radial-gradient(circle var(--gr,30px) at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.5), rgba(255,255,255,.14) 55%, rgba(255,255,255,0));
  transition:opacity .5s ease-out; }
html.glass .g-glow.on{ opacity:1; transition-duration:.06s; }

/* ======================================================================= Desktop: Seitenleiste und schwebende Spalte */
@media (min-width:761px){
  /* Ansichts-Knopf und Deckkraft-Regler wandern wie die Legende links neben die Seitenspalte (lagen bisher dahinter) */
  html.glass body.rwmap-shrink :is(#rwViewBtn, #rwOpa){ right:calc(12px + var(--rwpad,0px)); }
  /* Quellenangabe über die Werkzeug-Kapsel statt neben die Glas-Zeitleiste */
  html.glass .maplibregl-ctrl-bottom-right{ margin-bottom:calc(7 * var(--g-tb,40px) + 34px + var(--sab,0px)); }   /* beide Apps: über der Werkzeug-Kapsel */
  html.glass body.rw-v3:has(#btnNorth:not([hidden])) .maplibregl-ctrl-bottom-right{ margin-bottom:calc(8 * var(--g-tb,40px) + 34px + var(--sab,0px)); }
  html.glass body:not(.rw-v3) .maplibregl-ctrl-bottom-right{ right:calc(12px + var(--sar,0px)); }
  html.glass #rwNav{ border-radius:30px; padding:6px; gap:2px; }
  html.glass #rwNav button{ border-radius:24px; color:var(--g-ink); }
  html.glass #rwPanel{ top:12px; height:calc(100% - 24px); right:94px; border-radius:28px; border:.5px solid var(--g-rim); overflow:hidden;
    box-shadow:0 18px 50px rgba(16,30,52,.22), 0 2px 8px rgba(16,30,52,.10); }
}

/* ======================================================================= Seiten: Etappen, Wissen, Mehr (iOS-Listen, opak) */
html.glass #rwPanel{ background:var(--g-page); color:var(--g-ink); }
html.glass :is(#rwInfo, #rwInfo .rwsearch, .rwpage){ background:var(--g-page); }
/* Kopf deckend; weiche Scroll-Kante unter dem letzten feststehenden Element (iOS 26 scroll edge effect) */
html.glass{ --g-fade:14px; }
html.glass #rwHead{ border-bottom:0; background:var(--g-page); position:relative; z-index:6; }
html.glass #rwVar.on{ position:relative; z-index:7; background:var(--g-page); border-bottom:0; }
html.glass :is(#rwHead, #rwVar.on, #rwInfo .rwsearch)::after{ content:''; position:absolute; left:0; right:0; top:100%; height:var(--g-fade); pointer-events:none;
  background:linear-gradient(var(--g-page), color-mix(in srgb, var(--g-page) 0%, transparent)); }
html.glass body[data-rwarea="wissen"] #rwHead::after{ content:none; }
html.glass .rwpage.sub > .rwset:first-child{ margin-top:var(--g-fade); }
html.glass #rwHead:not(.sub) b{ font-weight:700; letter-spacing:normal; }
/* Zurück-Knopf als runder Glasknopf mit Chevron (iOS 26) */
html.glass #rwBack.on{ width:44px; height:44px; border-radius:50%; padding:0; margin:0; justify-content:center; color:var(--g-ink); position:absolute; }
html.glass #rwBack #rwBackT{ display:none; }
html.glass #rwBack .chev{ font-size:30px; line-height:1; margin:-4px 2px 0 0; font-weight:300; }
/* Segmente */
html.glass :is(#rwSeg, .rwseg){ border-radius:999px; background:var(--g-fill); padding:3px; }
html.glass :is(#rwSeg button, .rwseg button){ border-radius:999px; min-height:32px; position:relative; color:var(--muted); }
html.glass :is(#rwSeg button, .rwseg button)::before{ content:''; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); }
html.glass :is(#rwSeg button.on, .rwseg button.on){ background:var(--g-group); color:var(--g-ink); box-shadow:0 2px 8px rgba(0,0,0,.12), inset 0 .5px 0 rgba(255,255,255,.6); }
/* Varianten-Chips */
html.glass #rwVar .rwtab{ border:0; background:var(--g-fill); border-radius:999px; padding:7px 13px; font-weight:600; }
html.glass #rwVar .rwtab:not(.on){ background:var(--g-fill) !important; }   /* routes.js setzt inaktive Chips inline auf transparent */
/* gruppierte Karten: weiß auf Grau, ohne Rahmen */
html.glass #rwInfo :is(.rwk, .rwsec, .rwplan .pl-list), html.glass .rwset{ background:var(--g-group); border:0; border-radius:var(--g-r-md); box-shadow:none; }
html.glass #rwInfo .rwsec{ border-left:0; position:relative; overflow:hidden; margin:10px 0; }
html.glass #rwInfo .rwsec::before{ content:''; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:0 3px 3px 0; background:var(--accent); }
html.glass #rwInfo .rwsec.alt-off::before{ background:#8a949e; }
html.glass #rwInfo .rwsec-dt{ color:var(--g-accent-text); }
html.glass #rwInfo .rwsec-map{ border-radius:999px; }
html.glass #rwInfo .rwplan{ background:var(--g-group); border-radius:var(--g-r-md); border-color:transparent; }
/* Wissen: Karten als gruppierte Liste mit eingerückten Haarlinien */
html.glass #rwInfo .rwk.rwk{ margin:0; border-radius:0; position:relative; }
html.glass #rwInfo .rwk + .rwk::before{ content:''; position:absolute; z-index:1; top:0; right:0; left:49px; height:.5px; background:var(--g-sep); pointer-events:none; }
html.glass #rwInfo :not(.rwk) + .rwk.rwk{ margin-top:8px; border-top-left-radius:var(--g-r-md); border-top-right-radius:var(--g-r-md); }
html.glass #rwInfo .rwk.rwk:not(:has(+ .rwk)){ margin-bottom:8px; border-bottom-left-radius:var(--g-r-md); border-bottom-right-radius:var(--g-r-md); }
html.glass #rwInfo:has(#rwSearch:not(:placeholder-shown)) .rwk.rwk{ margin:8px 0; border-radius:var(--g-r-md); }
html.glass #rwInfo:has(#rwSearch:not(:placeholder-shown)) .rwk::before{ display:none; }
html.glass #rwInfo .rwk.lage-stop, html.glass #rwInfo .rwk.lage-warn, html.glass #rwInfo .rwk.lage-info{ border-left:0; }
/* Suchfeld: graue Kapsel mit Lupe */
html.glass #rwInfo #rwSearch{ height:38px; padding:0 14px 0 36px; border:0; border-radius:999px; box-shadow:none;
  background:var(--g-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238e8e93' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='6.8' cy='6.8' r='5.1'/%3E%3Cpath d='m10.6 10.6 3.8 3.8'/%3E%3C/svg%3E") no-repeat 13px 50% / 16px 16px; }
html.glass #rwInfo #rwSearch::placeholder{ color:var(--g-muted); }
html.glass #rwInfo #rwSearch:focus-visible{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
/* Listenzeilen (Mehr und Unterseiten): Haarlinie ab Textkante */
html.glass .rwset .rwrow{ border-bottom:0; padding-left:16px; padding-right:16px;
  background-image:linear-gradient(var(--g-sep),var(--g-sep)); background-repeat:no-repeat; background-size:calc(100% - 16px) 1px; background-position:right bottom; }
@media (min-resolution:2dppx){ html.glass .rwset .rwrow{ background-size:calc(100% - 16px) .5px; } }
html.glass .rwset .rwrow:last-child{ background-image:none; }
html.glass #rwMehr h3, html.glass #rwInfo .rwkh{ color:var(--g-muted); }
/* Eingaben: Datum, Auswahl als graue Kapseln (Auswahl mit iOS-Doppelchevron) */
html.glass :is(.rwrow input[type=date], #rwInfo .rwplan input[type=date]){ border:0; background:var(--g-fill); border-radius:10px; padding:5px 10px; color:var(--g-ink); }
html.glass .rwrow select{ -webkit-appearance:none; appearance:none; border:0; border-radius:10px; padding:6px 30px 6px 12px; color:var(--g-ink);
  background:var(--g-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007aff'%3E%3Cpath d='M12 5.5 7.8 9.7l1.4 1.4L12 8.3l2.8 2.8 1.4-1.4L12 5.5Zm0 13 4.2-4.2-1.4-1.4-2.8 2.8-2.8-2.8-1.4 1.4L12 18.5Z'/%3E%3C/svg%3E") no-repeat right 8px center / 16px 16px; }
/* Planbox: Stufenliste mit eingerückter, gerundeter Auswahl */
html.glass #rwInfo .rwplan .pl-list{ padding:4px; }
html.glass #rwInfo .rwplan .pl-row{ position:relative; border-bottom:0; border-radius:18px; padding-left:6px; padding-right:6px; }
html.glass #rwInfo .rwplan .pl-row + .pl-row::before{ content:''; position:absolute; top:0; left:42px; right:6px; border-top:.5px solid var(--g-sep); pointer-events:none; }
html.glass #rwInfo .rwplan :is(.pl-row.on, .pl-row.on + .pl-row)::before{ display:none; }
html.glass #rwInfo .rwplan .pl-r b{ color:var(--g-accent-text); }
html.glass #rwInfo .rwplan :is(.pl-k, .pl-kv){ border-color:var(--g-sep); }
/* Violett der Bus/Bahn-Stufen im Dunkelmodus (sonst 1,9:1) */
html.glass[data-theme="dark"] #rwInfo .rwplan h3,
html.glass[data-theme="dark"] #rwInfo .rwplan .pl-out > .pl-list .pl-row:not(.on) .pl-n{ color:var(--g-purple); }
html.glass[data-theme="dark"] #rwInfo .rwplan .pl-out > .pl-list .pl-row:not(.on) .pl-n{ background:rgba(191,90,242,.22); }
@media (prefers-color-scheme:dark){
  html.glass:not([data-theme="light"]) #rwInfo .rwplan h3,
  html.glass:not([data-theme="light"]) #rwInfo .rwplan .pl-out > .pl-list .pl-row:not(.on) .pl-n{ color:var(--g-purple); }
  html.glass:not([data-theme="light"]) #rwInfo .rwplan .pl-out > .pl-list .pl-row:not(.on) .pl-n{ background:rgba(191,90,242,.22); }
}
/* Knöpfe als Kapseln, Links wie in iOS (eingefärbt, nicht unterstrichen) */
html.glass :is(.rwtext .rwbtn, #rwInfo .lg-act, #rwInfo .gpxdl a){ border-radius:999px; }
html.glass .rwtext .rwbtn{ min-height:50px; }
html.glass :is(#rwOv, #rwInfo, .rwpage, #rwSheet, .modal) a{ color:var(--g-accent-text); text-decoration:none; border-bottom:0; }
html.glass :is(#rwOv, #rwInfo, .rwpage, #rwSheet, .modal) a:active{ opacity:.4; }
@media (hover:hover){ html.glass :is(#rwOv, #rwInfo, .rwpage, #rwSheet, .modal) a:hover{ text-decoration:underline; } }
/* iOS-Schalter (auch für den Glas-Schalter unter Erscheinungsbild) */
html .rwsw{ -webkit-appearance:none; appearance:none; width:51px; height:31px; border-radius:16px; background:var(--g-fill2,rgba(120,120,128,.32)); position:relative; flex:none; margin:0; cursor:pointer; transition:background .25s; }
html .rwsw::before{ content:''; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.25); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
html .rwsw:checked{ background:#34c759; } html .rwsw:checked::before{ transform:translateX(20px); }

/* ======================================================================= Regler (iOS): weiße Kapsel, dünne Spur */
html.glass .wkrange{ --trk:rgba(120,120,128,.26); }
html.glass[data-theme="dark"] .wkrange{ --trk:rgba(120,120,128,.42); }
@media (prefers-color-scheme:dark){ html.glass:not([data-theme="light"]) .wkrange{ --trk:rgba(120,120,128,.42); } }
html.glass .wkrange::-webkit-slider-runnable-track{ height:4px; border-radius:2px; background:linear-gradient(90deg,var(--c) 0 var(--pct),var(--trk) var(--pct) 100%); }
html.glass .wkrange::-webkit-slider-thumb{ width:34px; height:22px; margin-top:-9px; border-radius:999px; background:#fff; border:0;
  box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.16); transition:transform .45s var(--g-spring), background-color .2s, box-shadow .2s; }
html.glass .wkrange::-moz-range-track{ height:4px; border-radius:2px; background:linear-gradient(90deg,var(--c) 0 var(--pct),var(--trk) var(--pct) 100%); }
html.glass .wkrange::-moz-range-thumb{ width:34px; height:22px; border-radius:999px; background:#fff; border:0; box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.16); }
/* Anfassen: der Knopf wird zur vergrößerten, klaren Glaslinse, durch die die Spur scheint (iOS 26) */
html.glass :is(.wkrange:active, .sliderwrap.drag .wkrange)::-webkit-slider-thumb{ transform:scale(1.4,1.5); background:var(--g-lift-bg);
  box-shadow:inset 0 0 0 1px var(--g-lift-rim), inset 0 1px 2px rgba(255,255,255,.8), inset 0 -2px 4px rgba(16,30,52,.10), 0 6px 16px rgba(0,0,0,.22); transition-duration:.25s, .15s, .15s; }
html.glass :is(.wkrange:active, .sliderwrap.drag .wkrange)::-moz-range-thumb{ transform:scale(1.4,1.5); background:var(--g-lift-bg);
  box-shadow:inset 0 0 0 1px var(--g-lift-rim), 0 6px 16px rgba(0,0,0,.22); }

/* ======================================================================= Weltklimakarte und Dialoge */
/* Weltklimakarte (ohne Reiseroute): Quellen-ⓘ links neben die Werkzeug-Kapsel, über Maßstab und Ansichtsknopf – nicht hinter die Glas-Zeitleiste */
@media (max-width:760px){ html.glass body:not(.rw-v3) .maplibregl-ctrl-bottom-right{ right:calc(72px + var(--sar,0px)); margin-bottom:calc(152px + var(--sab,0px)); } }
@media (min-width:761px) and (max-width:1100px) and (min-height:600px){
  html.glass .maplibregl-ctrl-bottom-right{ margin-bottom:calc(96px + 7 * var(--g-tb,40px) + 22px + var(--sab,0px)) !important; }
  html.glass body.rw-v3:has(#btnNorth:not([hidden])) .maplibregl-ctrl-bottom-right{ margin-bottom:calc(96px + 8 * var(--g-tb,40px) + 22px + var(--sab,0px)) !important; } }
/* niedrige Fenster (iPhone quer): Quellenangabe links neben die Werkzeug-Kapsel, direkt über die Zeitleiste */
@media (min-width:761px) and (max-height:599px){
  html.glass .maplibregl-ctrl-bottom-right{ margin-bottom:calc(98px + var(--sab,0px)) !important; right:calc(22px + var(--g-tb,40px)); }
  html.glass body.rwmap-shrink[data-rwarea="karte"] .maplibregl-ctrl-bottom-right{ right:calc(22px + var(--g-tb,40px) + var(--rwpad,0px)); }
  html.glass body:not(.rw-v3) .maplibregl-ctrl-bottom-right{ right:calc(22px + var(--g-tb,40px) + var(--sar,0px)); }
}
/* niedrige Fenster: Ansichtswechsler und Deckkraft-Regler links neben die Werkzeug-Kapsel (die reicht dort bis oben) */
@media (min-width:761px) and (max-height:580px){ html.glass body.rwmap-shrink :is(#rwViewBtn, #rwOpa){ right:calc(22px + var(--g-tb,40px) + var(--rwpad,0px)); } }
@media (max-width:1100px){ html.glass .layerspanel{ max-height:calc(100dvh - 170px - var(--sat,0px) - var(--sab,0px)); } }
@media (max-width:720px){ html.glass body:not(.rw-v3) .maplibregl-ctrl-bottom-left{ right:calc(72px + var(--sar,0px)); } }
html.glass .layersbtn{ border-radius:999px; padding:6px 14px 6px 6px; }
html.glass .layersbtn .thumb{ border-radius:50%; overflow:hidden; width:36px; height:36px; }
html.glass .layerspanel{ border-radius:var(--g-r-lg); padding:14px; }
html.glass .layeritem{ border-radius:16px; }
html.glass .modal{ background:rgba(0,0,0,.28); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
html.glass .modal .box{ border-radius:34px; padding:22px 22px 18px; position:relative; }
html.glass .modal .close{ border:0; background:var(--g-fill) !important; color:var(--g-ink); border-radius:999px; min-height:34px; padding:0 14px; }
html.glass .modal-foot{ border-top-color:var(--g-sep); }
html.glass .langitem{ border-radius:14px; }
html.glass .toast{ border-radius:999px; padding:10px 18px; font-weight:600; }
html.glass[data-theme="dark"] .toast, html.glass .toast{ color:var(--g-ink); }

/* ======================================================================= Bewegung: Glas wächst beim Drücken, leuchtet am Finger und federt zurück
   (iOS 26 „interactive glass“; .g-pressed setzt glassfx.js, weil iOS Safari :active nur unzuverlässig meldet) */
html.glass :is(#rwViewBtn, .titlechip button, #rwSheet .sh-btn button, .timebar #play, #rwBack.on, .rwtext .rwbtn, .layersbtn, #rwOvX, #rwLegX){
  transition:transform .5s var(--g-spring), background-color .2s, color .2s; }
html.glass :is(#rwViewBtn, #rwSheet .sh-btn button, .timebar #play, #rwBack.on, .rwtext .rwbtn, .layersbtn, #rwOvX, #rwLegX):is(:active, .g-pressed){
  transform:scale(1.07); transition-duration:.2s; }
html.glass .titlechip button:is(:active, .g-pressed){ transform:scale(1.14); transition-duration:.2s; }
/* in gemeinsamen Kapseln (Werkzeuge, Tab-Leiste) wächst das Symbol, nicht der Knopf */
html.glass :is(.toolbar .tb-group button, #rwMapBtns button, #rwNav button) svg{ transition:scale .45s var(--g-spring); }
html.glass :is(.toolbar .tb-group button, #rwMapBtns button, #rwNav button):is(:active, .g-pressed) svg{ scale:1.16; transition-duration:.18s; }
/* iOS-Schalter: Knopf dehnt sich beim Drücken */
html .rwsw::before, html.glass #rwOv .ovrow input::before{ transition:transform .3s cubic-bezier(.2,.8,.2,1), width .3s cubic-bezier(.2,.8,.2,1); }
html.glass :is(.rwsw, #rwOv .ovrow input):active::before{ width:33px; }
html.glass :is(.rwsw, #rwOv .ovrow input):checked:active::before{ transform:translateX(14px); }
html.glass #rwSheet.on, html.glass #rwOv:not([hidden]), html.glass #rwOpa:not([hidden]), html.glass .modal:not([hidden]) .box, html.glass .layerspanel:not([hidden]){
  transition:transform .5s var(--g-spring), opacity .2s; }
html.glass #rwOv{ transform-origin:100% 100%; }   /* wächst aus der Werkzeug-Kapsel */
@starting-style{
  html.glass #rwSheet.on{ transform:translateY(24px) scale(.96); opacity:0; }
  html.glass #rwOv:not([hidden]){ transform:scale(.82); opacity:0; }
  html.glass #rwOpa:not([hidden]){ transform:scale(.9); opacity:0; }
  html.glass .modal:not([hidden]) .box{ transform:scale(.92); opacity:0; }
  html.glass .layerspanel:not([hidden]){ transform:translateY(10px) scale(.95); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  html.glass *, html.glass *::before, html.glass *::after{ transition:none !important; animation:none !important; }
  html.glass .wkrange::-webkit-slider-thumb{ transition:none !important; }
  html.glass .g-glow{ display:none; } }

/* ======================================================================= Barrierefreiheit */
/* „Transparenz reduzieren“: eigener Schalter (html.glass-solid) und – wo unterstützt – die Systemabfrage */
html.glass.glass-solid :is(.card-ov, .toolbar, #rwMapBtns, #rwViewBtn, #rwOpa, #rwNav, #rwBack.on, .toast, #rwSheet, #rwOv, #rwLegend, .maplibregl-popup-content, .modal .box, .layerspanel, .maplibregl-ctrl-attrib.maplibregl-compact){
  background:var(--g-group) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
@media (prefers-reduced-transparency:reduce){
  html.glass :is(.card-ov, .toolbar, #rwMapBtns, #rwViewBtn, #rwOpa, #rwNav, #rwBack.on, .toast, #rwSheet, #rwOv, #rwLegend, .maplibregl-popup-content, .modal .box, .layerspanel, .maplibregl-ctrl-attrib.maplibregl-compact){
    background:var(--g-group) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
}
/* „Kontrast erhöhen“: opak, kräftige Kontur, iOS-Farben für erhöhten Kontrast, Auswahl als Ring */
@media (prefers-contrast:more){
  html.glass :is(.card-ov, .toolbar, #rwMapBtns, #rwViewBtn, #rwOpa, #rwNav, #rwBack.on, .toast, #rwSheet, #rwOv, #rwLegend, .maplibregl-popup-content, .modal .box, .layerspanel, .maplibregl-ctrl-attrib.maplibregl-compact){
    background:var(--g-group) !important; -webkit-backdrop-filter:none; backdrop-filter:none; border:1px solid var(--g-ink); }
  html.glass{ --accent:#0040dd; --g-accent-text:#0040dd; --muted:#2f3843; }
  html.glass[data-theme="dark"]{ --accent:#409cff; --g-accent-text:#409cff; --muted:#c3cfdb; }
  html.glass #rwNav button.on, html.glass #rwNav.has-lens > button.on, html.glass :is(#rwSeg, .rwseg).has-lens > button.on{ background:transparent; box-shadow:inset 0 0 0 2px currentColor; }
  html.glass .g-lens{ display:none; }
  html.glass :is(.card-ov, .toolbar, #rwMapBtns, #rwViewBtn, #rwOpa, #rwNav, #rwSheet, #rwLegend, #rwBack.on, .modal .box)::after{ display:none; }
  html.glass .timebar #play{ box-shadow:none; }
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){ html.glass:not([data-theme="light"]){ --accent:#409cff; --g-accent-text:#409cff; --muted:#c3cfdb; } }