/* GPTGenie · Schalter im Liquid-Glass-Stil (iOS 26/27)
 *
 * Einzige Stelle für das Aussehen aller Schalter: „Nur fehlende“ (Fast Scan, Buchstaben-Raster),
 * die Optionen im PDF-Editor und die Schalter im Cookie-Hinweis. switch-glass.js gibt ihnen die Klasse .gg-sw.
 *   · In Ruhe: graue bzw. lila Spur, weißer Pillen-Knopf.
 *   · Gedrückt: der Knopf wird größer und zu klarem Glas (Rand wie eine Lippe gewölbt, nur Chromium),
 *     beim Ziehen folgt er dem Finger, die Spur zeigt schon die neue Farbe.
 *   · Loslassen: Knopf federt auf seine Seite und wird wieder weiß.
 * Maße des Knopfes müssen zu den Filtern in switch-glass.js passen (39×24, klein 26×18).
 * In Chromium baut switch-glass.js den Glas-Knopf wie bei kube.io/blog/liquid-glass-css-svg (siehe .sw-ready unten).
 */
.gg-sw {
  --sw-w: 64px;                         /* wie iOS 26 (iPad-Bild von Marflux: 64 × 28) */
  --sw-h: 28px;
  --sw-kw: 39px;
  --sw-kh: 24px;
  --sw-pad: 2px;
  --sw-g: 1.7;                          /* gedrückt so viel größer (WWDC25-Video), gleiche Zahl in switch-glass.js */
  --sw-travel: calc(var(--sw-w) - var(--sw-kw) - 2 * var(--sw-pad));
  --sw-lens: url(#sw-lens-f);
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: var(--sw-w) !important;
  height: var(--sw-h) !important;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 999px;
  vertical-align: middle;
  cursor: pointer;
  background: rgba(120,120,128,0.34);
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.07);
  transition: background .3s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;                  /* waagerecht wischen schaltet, senkrecht scrollt weiter die Seite */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;          /* langes Drücken: kein Menü */
}
/* an: lila Spur */
input.gg-sw:checked, .cb-on > .gg-sw, .gg-sw.sw-preview-on {
  background: linear-gradient(90deg, rgb(var(--a-8b3ff0,139,63,240)) 0%, rgb(var(--a-a855f7,168,85,247)) 55%, rgb(var(--a-c46cf6,196,108,246)) 100%);
}
.gg-sw.sw-preview-off, input.gg-sw.sw-preview-off:checked, .cb-on > .gg-sw.sw-preview-off { background: rgba(120,120,128,0.34); }

/* Knopf
   Weiß und Glas unterscheiden sich nur in der Deckkraft der Farbe und der Schatten (gleich viele Schatten, damit
   sie ineinander übergehen). Die Glas-Brechung liegt immer darunter und wird so weich sichtbar statt aufzuploppen. */
.gg-sw::before {
  content: "";
  position: absolute;
  left: var(--sw-pad);
  top: calc((var(--sw-h) - var(--sw-kh)) / 2);
  width: var(--sw-kw);
  height: var(--sw-kh);
  border-radius: 999px;
  background-color: #fff;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.08) 100%);
  box-shadow:
    inset 0 1px 0.5px rgba(255,255,255,0),
    inset 0 -1px 1px rgba(255,255,255,0),
    inset 0 0 0 0.5px rgba(255,255,255,0),
    0 3px 8px rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.14);
  translate: var(--sw-x, 0px) 0;
  scale: 1;
  transition:
    translate .38s cubic-bezier(.25,.8,.25,1),        /* schnell los, weich ankommen, kein Zurückfedern */
    scale .18s cubic-bezier(.3,0,.2,1),                 /* zurück zu klein und weiß: zügig */
    background-color .14s ease-out,
    box-shadow .14s ease-out;
}
html.sw-glass-on .gg-sw::before { -webkit-backdrop-filter: var(--sw-lens); backdrop-filter: var(--sw-lens); }
input.gg-sw:checked::before, .cb-on > .gg-sw::before { translate: var(--sw-x, var(--sw-travel)) 0; }
.gg-sw::after { content: none !important; }          /* alter Cookie-Knopf */

/* Gedrückt – und kurz beim Umschalten (.sw-flip), wie bei iOS: größer, klar wie Glas */
.gg-sw.sw-press:not(.sw-ready)::before, .gg-sw.sw-flip:not(.sw-ready)::before {
  scale: var(--sw-g);
  background-color: rgba(255,255,255,0.9);          /* ohne Glas-Brechung (Safari, Firefox): fast weiß */
  transition:                                       /* rein ins Glas: etwas weicher als zurück */
    translate .38s cubic-bezier(.25,.8,.25,1),
    scale .24s cubic-bezier(.25,.9,.35,1),
    background-color .18s ease,
    box-shadow .18s ease;
  box-shadow:
    inset 0 1px 0.5px rgba(255,255,255,0),
    inset 0 -1px 1px rgba(255,255,255,0),
    inset 0 0 0 0.5px rgba(255,255,255,0),
    0 8px 18px -6px rgba(0,0,0,0.45),
    0 1px 2px rgba(0,0,0,0.08);
}
html.sw-glass-on .gg-sw.sw-press:not(.sw-ready)::before, html.sw-glass-on .gg-sw.sw-flip:not(.sw-ready)::before {
  background-color: rgba(255,255,255,0.05);
  box-shadow:
    inset 0 1px 0.5px rgba(255,255,255,0.95),
    inset 0 -1px 1px rgba(255,255,255,0.45),
    inset 0 0 0 0.5px rgba(255,255,255,0.5),
    0 8px 18px -6px rgba(0,0,0,0.5),
    0 1px 2px rgba(0,0,0,0);
}

/* Glas-Knopf wie beim kube.io-Schalter (switch-glass.js setzt .sw-ready, sobald der Filter da ist):
   Der Knopf ist so groß wie gedrückt (--sw-g, wie im WWDC25-Video) und wird in Ruhe verkleinert, damit die Glaskarte gedrückt
   genau passt. Mitte und Ruhe-Aussehen sind dieselben wie oben. Gedrückt ragt er über die Spur hinaus (gewollt). */
html.sw-glass-on .gg-sw.sw-ready::before {
  width: calc(var(--sw-kw) * var(--sw-g));
  height: calc(var(--sw-kh) * var(--sw-g));
  left: calc(var(--sw-pad) + var(--sw-kw) / 2 - var(--sw-kw) * var(--sw-g) / 2);
  top: calc(var(--sw-h) / 2 - var(--sw-kh) * var(--sw-g) / 2);
  scale: calc(1 / var(--sw-g));
  box-shadow:
    0 4px 11px rgba(0,0,0,0.26),
    inset 0 0 0 0 rgba(0,0,0,0),
    inset 0 0 0 0.5px rgba(255,255,255,0),
    0 1.4px 2.8px rgba(0,0,0,0.14);
}
/* Während der Federn (Drücken, Ziehen, Umschalten) steuert switch-glass.js alles über Variablen */
html.sw-glass-on .gg-sw.sw-ready.sw-live::before {
  transition: none !important;
  translate: var(--sw-tx) 0 !important;
  scale: calc(var(--sw-sc) * var(--sw-sx, 1)) calc(var(--sw-sc) * var(--sw-sy, 1)) !important;
  background-color: rgba(255,255,255,var(--sw-bm, var(--sw-bo))) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,calc(0.22 * var(--sw-bo))) 0%, rgba(255,255,255,0) 55%) !important;
  box-shadow:
    0 calc(4px - 2.5px * var(--sw-p)) calc(11px + 4px * var(--sw-p)) rgba(0,0,0,calc(0.26 - 0.14 * var(--sw-p))),
    inset 0.7px 2.5px 8.5px rgba(0,0,0,calc(0.09 * var(--sw-p))),
    inset 0 0 0 0.5px rgba(255,255,255,calc(0.55 * var(--sw-p))),
    0 1.4px 2.8px rgba(0,0,0,calc(0.14 * (1 - var(--sw-p)))) !important;
}

/* ── Schatten des Glas-Knopfes auf eigener Ebene (::after) ──
   Ein äußerer Schatten am Glas (::before mit backdrop-filter) verschiebt in Chrome die Lichtbrechung, und zwar nicht
   berechenbar (gemessen 10 statt 23 px). Darum trägt ::before im Glas-Modus nur innere Schatten, und ::after liegt
   genau gleich groß darüber und malt nur den Schatten nach außen. Lage/Größe folgen denselben Variablen. */
html.sw-glass-on .gg-sw::before {
  box-shadow: inset 0 1px 0.5px rgba(255,255,255,0), inset 0 -1px 1px rgba(255,255,255,0), inset 0 0 0 0.5px rgba(255,255,255,0);
}
html.sw-glass-on .gg-sw.sw-press:not(.sw-ready)::before, html.sw-glass-on .gg-sw.sw-flip:not(.sw-ready)::before {
  box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.95), inset 0 -1px 1px rgba(255,255,255,0.45), inset 0 0 0 0.5px rgba(255,255,255,0.5);
}
html.sw-glass-on .gg-sw.sw-ready::before { box-shadow: inset 0 0 0 0 rgba(0,0,0,0), inset 0 0 0 0.5px rgba(255,255,255,0); }
html.sw-glass-on .gg-sw.sw-ready.sw-live::before {
  box-shadow:
    inset 0 0 calc(var(--sw-kh) * 0.37) calc(var(--sw-kh) * 0.2) rgba(255,255,255,var(--sw-br, var(--sw-bo))),
    inset 0.7px 2.5px 8.5px rgba(0,0,0,calc(0.09 * var(--sw-p))),
    /* Farbsäume am Rand wie im iOS-Video: links oben blau, rechts unten gelb, dazu etwas Rosa */
    inset 2px 1.6px 1.4px -0.6px rgba(70,150,255,calc(0.55 * var(--sw-p))),
    inset -2px -1.6px 1.4px -0.6px rgba(255,200,80,calc(0.5 * var(--sw-p))),
    inset -1.6px 0.8px 1.6px -0.6px rgba(255,110,190,calc(0.32 * var(--sw-p))),
    inset 0 0 0 0.5px rgba(255,255,255,calc(0.55 * var(--sw-p))) !important;
}
html.sw-glass-on .gg-sw::after {
  content: "" !important;
  position: absolute;
  pointer-events: none;
  left: var(--sw-pad);
  top: calc((var(--sw-h) - var(--sw-kh)) / 2);
  width: var(--sw-kw);
  height: var(--sw-kh);
  border-radius: 999px;
  background: none;
  box-shadow: 0 3px 8px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.14);
  translate: var(--sw-x, 0px) 0;
  scale: 1;
  transition: translate .38s cubic-bezier(.25,.8,.25,1), scale .18s cubic-bezier(.3,0,.2,1), box-shadow .14s ease-out;
}
html.sw-glass-on input.gg-sw:checked::after, html.sw-glass-on .cb-on > .gg-sw::after { translate: var(--sw-x, var(--sw-travel)) 0; }
html.sw-glass-on .gg-sw.sw-press:not(.sw-ready)::after, html.sw-glass-on .gg-sw.sw-flip:not(.sw-ready)::after {
  scale: var(--sw-g);
  box-shadow: 0 8px 18px -6px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0);
  transition: translate .38s cubic-bezier(.25,.8,.25,1), scale .24s cubic-bezier(.25,.9,.35,1), box-shadow .18s ease;
}
html.sw-glass-on .gg-sw.sw-ready::after {
  width: calc(var(--sw-kw) * var(--sw-g));
  height: calc(var(--sw-kh) * var(--sw-g));
  left: calc(var(--sw-pad) + var(--sw-kw) / 2 - var(--sw-kw) * var(--sw-g) / 2);
  top: calc(var(--sw-h) / 2 - var(--sw-kh) * var(--sw-g) / 2);
  scale: calc(1 / var(--sw-g));
  box-shadow: 0 4px 11px rgba(0,0,0,0.26), 0 1.4px 2.8px rgba(0,0,0,0.14);
}
html.sw-glass-on .gg-sw.sw-ready.sw-live::after {
  transition: none !important;
  translate: var(--sw-tx) 0 !important;
  scale: calc(var(--sw-sc) * var(--sw-sx, 1)) calc(var(--sw-sc) * var(--sw-sy, 1)) !important;
  box-shadow:
    0 calc(4px - 2.5px * var(--sw-p)) calc(11px + 4px * var(--sw-p)) rgba(0,0,0,calc(0.26 - 0.14 * var(--sw-p))),
    0 1.4px 2.8px rgba(0,0,0,calc(0.14 * (1 - var(--sw-p)))) !important;
}
html.sw-glass-on .gg-sw.sw-press.sw-drag::after { transition: scale .24s cubic-bezier(.25,.9,.35,1), box-shadow .18s ease; }
html.sw-glass-on .cb-switch.gg-sw::after { content: "" !important; }

/* Ziehen: Knopf folgt direkt dem Finger (Lage ohne Übergang) */
.gg-sw.sw-press.sw-drag::before { transition: scale .24s cubic-bezier(.25,.9,.35,1), background-color .18s ease, box-shadow .18s ease; }

.gg-sw:focus-visible { outline: 2px solid rgba(var(--a-d8b4fe,216,180,254),0.9); outline-offset: 2px; }
.gg-sw:disabled { opacity: .45; cursor: not-allowed; }

/* Kleine Schalter (Cookie-Hinweis) */
.cb-switch.gg-sw { --sw-w: 42px; --sw-h: 22px; --sw-kw: 26px; --sw-kh: 18px; --sw-lens: url(#sw-lens-s); }

/* Platz für den vergrößerten Knopf neben dem Text */
.fs-toggle, .lp-missing-toggle, .pme-check, .cb-toggle { gap: 16px !important; }
.fs-toggle, .lp-missing-toggle { display: inline-flex; align-items: center; }
.fs-toggle, .lp-missing-toggle, .pme-check, .cb-toggle { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

@media (prefers-reduced-motion: reduce) {
  .gg-sw, .gg-sw::before { transition: none; }
}

/* Farbe in der Spur während der Federn (switch-glass.js): beim Einschalten füllt sie sich hinter dem Knopf
   (bis unter seinen rechten Rand, --sw-fw), beim Ausschalten verblasst die ganze Spur (--sw-fa), wie im WWDC25-Video */
html.sw-glass-on .gg-sw.sw-ready.sw-live {
  transition: none !important;
  background:
    linear-gradient(90deg, rgba(var(--a-8b3ff0,139,63,240),var(--sw-fa)) 0%, rgba(var(--a-a855f7,168,85,247),var(--sw-fa)) 55%, rgba(var(--a-c46cf6,196,108,246),var(--sw-fa)) 100%) 0 0 / var(--sw-fw) 100% no-repeat,
    rgba(120,120,128,0.34) !important;
}

/* ── Safari (iPhone, iPad, Mac) und Firefox: Glas ohne Brechung (switch-glass.js setzt .sw-glass-soft) ──
   Diese Browser können keinen SVG-Filter als backdrop-filter. Der Knopf federt genauso, wird gedrückt aber zu klarem
   Glas aus Unschärfe, kräftigeren Farben und einem hellen Rand mit Licht von oben. --sw-mb = Milchglas beim Übergang. */
html.sw-glass-soft .gg-sw::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.sw-glass-soft .gg-sw.sw-ready.sw-live::before {
  /* klar wie im iOS-Video: kaum Unschärfe (nur beim Übergang zu Weiß, --sw-mb), keine Aufhellung */
  -webkit-backdrop-filter: blur(calc(0.35px + var(--sw-mb, 0px))) saturate(1.4);
  backdrop-filter: blur(calc(0.35px + var(--sw-mb, 0px))) saturate(1.4);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,calc(0.22 * var(--sw-bo) + 0.14 * var(--sw-p))) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,calc(0.08 * var(--sw-p))) 100%) !important;
  box-shadow:
    inset 0 0 calc(var(--sw-kh) * 0.37) calc(var(--sw-kh) * 0.2) rgba(255,255,255,var(--sw-br, var(--sw-bo))),
    inset 0 1.5px 1px rgba(255,255,255,calc(0.9 * var(--sw-p))),
    inset 0 -1.2px 1.2px rgba(255,255,255,calc(0.45 * var(--sw-p))),
    inset 2px 1.6px 1.4px -0.6px rgba(70,150,255,calc(0.6 * var(--sw-p))),
    inset -2px -1.6px 1.4px -0.6px rgba(255,200,80,calc(0.55 * var(--sw-p))),
    inset -1.6px 0.8px 1.6px -0.6px rgba(255,110,190,calc(0.36 * var(--sw-p))),
    inset 0 0 0 0.75px rgba(120,130,150,calc(0.35 * var(--sw-p))),
    inset 0 0 0 1.5px rgba(255,255,255,calc(0.32 * var(--sw-p))),
    inset 0 0 10px rgba(255,255,255,calc(0.08 * var(--sw-p))) !important;
}