/* ==========================================================================
   Glas & Nebel - die ganze App aus Glas
   --------------------------------------------------------------------------
   So hat Evi es gewollt (Vorlage "Liquid Glass"): dunkle Berge am Meer im
   Nebel, darueber Karten, Leisten und Boegen aus Glas - durchscheinend,
   verwischt, mit Licht an den Kanten. Gilt nur im Design 'glas' und steht
   darum ganz zuletzt: es aendert kein Markup und keine Logik, nur das
   Aussehen, und ueberstimmt dort alles Vorherige.

   Die Farbtoene stehen in css/04-designs.css. Hier stehen nur die Werte,
   die Glas ausmachen - sie stellen Licht und Tiefe dar, keine Farbe des
   Designs (dieselbe Ausnahme wie beim Glas der Reiterleiste).
   ========================================================================== */
:root[data-theme="glas"]{
  /* Die Landschaft hinter dem Glas. */
  --glas-himmel:#6F8894;
  --glas-dunst:#3A505B;
  --glas-meer:#2C8397;
  --glas-tief:#081116;
  --glas-berg:#0A1419;
  /* Das Glas selbst. */
  --glas-blur:blur(16px) saturate(1.5);
  --glas-kante:rgba(255,255,255,.34);
  --glas-kante-leise:rgba(255,255,255,.10);
  --glas-schein:linear-gradient(155deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.035) 42%, rgba(255,255,255,.02) 100%);
  --glas-dicht:rgba(20,34,42,.62);
  --glanz:rgba(255,255,255,.34);
  --glanz-knopf:rgba(255,255,255,.45);
  --motiv-staerke:.92;
}

/* ---------- Der Grund: Himmel im Nebel, dunkler Strand, Meer rechts ---------- */
:root[data-theme="glas"] body{background:var(--glas-tief);}
:root[data-theme="glas"] body::before{
  /* Oben dunkler Himmel, ueber den Gipfeln der helle Dunst, unten der
     dunkle Strand und rechts das Meer - die Berge stehen so als Schatten
     gegen den Nebel, wie auf Evis Vorlage. */
  background:
    radial-gradient(75% 30% at 100% 88%, color-mix(in srgb, var(--glas-meer) 60%, transparent), transparent 72%),
    radial-gradient(90% 26% at 30% 56%, color-mix(in srgb, var(--glas-himmel) 70%, transparent), transparent 75%),
    linear-gradient(to bottom, var(--glas-dunst) 0%, var(--ground-2) 22%, var(--glas-dunst) 44%, var(--glas-himmel) 58%, var(--glas-dunst) 72%, var(--glas-tief) 100%);
}
/* Eigene Berge: schroffe Gipfel wie auf Evis Vorlage, zwei Ketten, dunkel
   gegen den hellen Dunst. Die sanften Ketten, die Sonne und die Wolken aus
   dem Atelier bleiben hier weg - dunkel gefuellt laesen sich Sonne und
   Wolken als Flecken. Die Wege sind gerechnet (Zacken mit fester
   Zufallszahl), nicht gezeichnet. */
:root[data-theme="glas"] body::after{
  background:var(--glas-berg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.1' stop-opacity='.62'/%3E%3Cstop offset='.75' stop-opacity='.9'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.5' stop-opacity='.95'/%3E%3Cstop offset='1' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-20,298 L-4,269 L12,258 L28,223 L44,212 L60,189 L74,165 L88,162 L102,136 L116,133 L130,116 L145,117 L160,134 L175,151 L190,146 L205,123 L220,111 L235,102 L250,71 L264,79 L278,99 L292,94 L306,122 L320,128 L335,112 L350,109 L365,99 L380,98 L394,102 L408,126 L422,144 L436,154 L450,170 L464,149 L478,145 L492,132 L506,132 L520,119 L536,131 L552,153 L568,167 L584,182 L600,203 L614,199 L629,186 L643,185 L657,177 L671,181 L686,168 L700,158 L716,186 L732,184 L748,200 L764,219 L780,226 L796,227 L812,219 L828,225 L844,221 L860,216 L874,234 L888,231 L902,247 L916,252 L930,261 L945,241 L960,229 L975,219 L990,190 L1005,219 L1020,235 L1040,275 L1060,302 L1076,319 L1092,315 L1108,312 L1124,323 L1140,332 L1156,320 L1172,334 L1188,327 L1204,334 L1220,340 L1220,600 L-20,600 Z' fill='url(%23a)'/%3E%3Cpath d='M-20,378 L0,374 L20,358 L40,346 L60,339 L80,332 L98,330 L116,342 L134,349 L152,356 L170,362 L188,353 L206,335 L224,323 L242,311 L260,302 L280,316 L300,318 L320,325 L340,338 L360,349 L378,356 L397,364 L415,367 L433,374 L452,382 L470,389 L489,395 L507,401 L526,406 L544,407 L563,413 L581,417 L600,418 L620,429 L640,428 L660,435 L680,434 L700,434 L720,438 L740,436 L760,446 L780,440 L800,445 L820,445 L840,449 L860,450 L880,451 L900,452 L919,451 L938,455 L956,456 L975,456 L994,465 L1013,461 L1032,456 L1051,461 L1069,461 L1088,463 L1107,459 L1126,468 L1145,473 L1164,467 L1182,468 L1201,467 L1220,470 L1220,600 L-20,600 Z' fill='url(%23b)'/%3E%3C/svg%3E") no-repeat center bottom / max(100%, 900px) auto;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.1' stop-opacity='.62'/%3E%3Cstop offset='.75' stop-opacity='.9'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.5' stop-opacity='.95'/%3E%3Cstop offset='1' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-20,298 L-4,269 L12,258 L28,223 L44,212 L60,189 L74,165 L88,162 L102,136 L116,133 L130,116 L145,117 L160,134 L175,151 L190,146 L205,123 L220,111 L235,102 L250,71 L264,79 L278,99 L292,94 L306,122 L320,128 L335,112 L350,109 L365,99 L380,98 L394,102 L408,126 L422,144 L436,154 L450,170 L464,149 L478,145 L492,132 L506,132 L520,119 L536,131 L552,153 L568,167 L584,182 L600,203 L614,199 L629,186 L643,185 L657,177 L671,181 L686,168 L700,158 L716,186 L732,184 L748,200 L764,219 L780,226 L796,227 L812,219 L828,225 L844,221 L860,216 L874,234 L888,231 L902,247 L916,252 L930,261 L945,241 L960,229 L975,219 L990,190 L1005,219 L1020,235 L1040,275 L1060,302 L1076,319 L1092,315 L1108,312 L1124,323 L1140,332 L1156,320 L1172,334 L1188,327 L1204,334 L1220,340 L1220,600 L-20,600 Z' fill='url(%23a)'/%3E%3Cpath d='M-20,378 L0,374 L20,358 L40,346 L60,339 L80,332 L98,330 L116,342 L134,349 L152,356 L170,362 L188,353 L206,335 L224,323 L242,311 L260,302 L280,316 L300,318 L320,325 L340,338 L360,349 L378,356 L397,364 L415,367 L433,374 L452,382 L470,389 L489,395 L507,401 L526,406 L544,407 L563,413 L581,417 L600,418 L620,429 L640,428 L660,435 L680,434 L700,434 L720,438 L740,436 L760,446 L780,440 L800,445 L820,445 L840,449 L860,450 L880,451 L900,452 L919,451 L938,455 L956,456 L975,456 L994,465 L1013,461 L1032,456 L1051,461 L1069,461 L1088,463 L1107,459 L1126,468 L1145,473 L1164,467 L1182,468 L1201,467 L1220,470 L1220,600 L-20,600 Z' fill='url(%23b)'/%3E%3C/svg%3E") no-repeat center bottom / max(100%, 900px) auto;
}

/* ---------- Das Glas ----------
   Drei Dinge machen aus einer Flaeche Glas: sie verwischt, was dahinter
   liegt; oben links faellt Licht darauf (--glas-schein); und die Kante
   bricht es - oben hell, ringsum leise. Nur Flaechen, die oben auf der
   Seite liegen, verwischen; was in einer Karte steckt, ist schon hinter
   Glas, doppelt verwischt kostet es nur Kraft. */
:root[data-theme="glas"] :is(
  .card, .cat, .view-head, .bak-mahnung, .empty,
  .set-block, .set-held, .vk, .pf-gruppe,
  .cal-blatt, .tagblatt, .th-karte, .ka-held, .pl-held, .af-karte,
  .wo-band, .cust-liste .ku-zeile, .pl-teile, .pl-ziel-karte, .aw-kachel, .aw-karte,
  .allergy-box, .pl-leer
):not(.set-block .cat){
  background-image:var(--glas-schein);
  -webkit-backdrop-filter:var(--glas-blur);
          backdrop-filter:var(--glas-blur);
  border-color:var(--line);
  box-shadow:
    inset 0 1px 0 var(--glas-kante),
    inset 0 0 0 1px var(--glas-kante-leise),
    var(--shadow);
}

/* Glas in Glas verwischt nicht noch einmal: die Karte darum hat den Grund
   schon verwischt, ein zweites Mal kostet nur Kraft und laesst die Seite
   beim Scrollen und Wechseln haengen. Durchscheinend bleibt es trotzdem. */
:root[data-theme="glas"] :is(
  .card, .cat, .view-head, .bak-mahnung, .empty,
  .set-block, .set-held, .vk, .pf-gruppe,
  .cal-blatt, .tagblatt, .th-karte, .ka-held, .pl-held, .af-karte,
  .wo-band, .pl-teile, .pl-ziel-karte, .aw-kachel, .aw-karte,
  .allergy-box, .pl-leer, .modal
) :is(
  .card, .cat, .view-head, .bak-mahnung, .empty,
  .set-block, .set-held, .vk, .pf-gruppe,
  .cal-blatt, .tagblatt, .th-karte, .ka-held, .pl-held, .af-karte,
  .wo-band, .cust-liste .ku-zeile, .pl-teile, .pl-ziel-karte, .aw-kachel, .aw-karte,
  .allergy-box, .pl-leer
){
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
}

/* Beim Wechseln der Reiter gleitet die Seite in Glas nicht herein. Solange
   sie sich bewegt (verschoben oder halb durchsichtig), kann das Glas darin
   nicht verwischen - die Karten zeigten fuer einen Augenblick die Berge
   scharf, wie ein anderes Design, und sprangen danach um. So hat Evi es
   gemeldet. Die Kugel der Reiterleiste gleitet weiter. */
:root[data-theme="glas"] main.view.enter{animation:none;}

/* ---------- Boegen und Dialoge: dichteres Glas ----------
   Ueber der Seite muss man lesen koennen, was im Bogen steht - darum
   dichter und staerker verwischt als eine Karte. */
:root[data-theme="glas"] .overlay{background:rgba(4,10,14,.42);}
:root[data-theme="glas"] .modal{
  background:
    var(--glas-schein),
    radial-gradient(90% 55% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--glas-dicht);
  -webkit-backdrop-filter:blur(34px) saturate(1.7);
          backdrop-filter:blur(34px) saturate(1.7);
  box-shadow:inset 0 1px 0 var(--glas-kante), inset 0 0 0 1px var(--glas-kante-leise), 0 -10px 40px rgba(0,0,0,.35);
}

/* Die Leiste zum Uebernehmen schwebt ueber dem Formular - dasselbe dichte
   Glas wie ein Bogen, sonst liefe die Schrift der Felder durch. */
:root[data-theme="glas"] .vs-innen{
  background:var(--glas-schein), var(--glas-dicht);
  -webkit-backdrop-filter:blur(28px) saturate(1.7);
          backdrop-filter:blur(28px) saturate(1.7);
  box-shadow:inset 0 1px 0 var(--glas-kante), var(--shadow-lift);
}

/* ---------- Reiterleiste ----------
   Schon aus Glas - hier nur dunkler getoent, damit die Woerter auf dem
   hellen Himmel lesbar bleiben. */
:root[data-theme="glas"] nav.tabbar::before{
  background:linear-gradient(to bottom, rgba(var(--ground-rgb),0) 0, rgba(var(--ground-rgb),.55) 46px);
}
:root[data-theme="glas"] nav.tabbar .tabbar-inner{
  background:
    linear-gradient(to bottom, rgba(255,255,255,.16), rgba(255,255,255,0) 46%),
    rgba(var(--ground-rgb),.5);
  border-color:var(--glas-kante);
  box-shadow:inset 0 1.5px 0 var(--glas-kante), 0 -8px 24px rgba(0,0,0,.25);
}
:root[data-theme="glas"] .tab-pille{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.34), rgba(255,255,255,0) 58%),
    rgba(255,255,255,.12);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 -7px 12px -7px rgba(0,0,0,.35),
    0 6px 14px rgba(0,0,0,.25);
}
:root[data-theme="glas"] .tab-pille::before{
  background:linear-gradient(to bottom, rgba(255,255,255,.45), rgba(255,255,255,0));
}

/* ---------- Was klebt, verwischt auch ----------
   Kleben Kopf oder Fuss ueber dem Inhalt, liefe sonst die Schrift darunter
   sichtbar durch. */
:root[data-theme="glas"] .cust-buchstabe{
  background:linear-gradient(to bottom, rgba(var(--ground-rgb),.55) 68%, rgba(var(--ground-rgb),0));
}

/* Kann ein Geraet nicht verwischen, wird aus dem Glas dunkles Rauchglas -
   halbdurchsichtig ohne Verwischen waere es nur unruhig. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-theme="glas"]{
    --surface:#23343D;
    --surface-2:#1C2B33;
    --glas-dicht:#172830;
  }
}