/* 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 (36×24, klein 26×18).
 */
.gg-sw {
  --sw-w: 58px;
  --sw-h: 28px;
  --sw-kw: 36px;
  --sw-kh: 24px;
  --sw-pad: 2px;
  --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, #8b3ff0 0%, #a855f7 55%, #c46cf6 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::before, .gg-sw.sw-flip::before {
  scale: 1.38;
  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::before, html.sw-glass-on .gg-sw.sw-flip::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);
}

/* 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(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: 12px !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; }
}