/* hnvr.me · gemeinsame App-Stilvorlage "Liquid Glass", Farbfassung (26.10.2026). Eigenstaendig: braucht weder k-neu.css noch k-liquid.css,
   damit jede App (Ordner ausserhalb der Konsole, Store, Suite-Huellen) sie laden kann.
   FARBE: Jede App setzt EINEN Wert, ihren Farbton:  :root { --hg-farbton: 255; }  (Grad auf dem Farbkreis, 0-360, OKLCH).
   Daraus rechnet diese Datei Akzent, Text, Glas, Kanten, Schatten und den bewegten Farbverlauf, in Hell und Dunkel.
   Ohne Wert gilt 255 (Blau). Die Konsole nutzt diese Datei nicht und bleibt neutral. Das hnvr-Logo bleibt unverfaerbt orange (--hg-logo).
   HELL/DUNKEL: folgt dem System; html[data-hg-modus="hell"|"dunkel"] erzwingt eine Seite. Dafuer light-dark() auf color-scheme.
   APPLE-GEFUEHL: Systemschrift (SF-Stack), grosse Titel mit enger Laufweite, mehrlagiges Glas (Farbtoenung, Unschaerfe 28 px mit Saettigung,
   feine Lichtkante oben, weicher Doppelschatten), Federbewegung, Kapselknoepfe in der App-Farbe, Segmentschalter, grosse Radien.
   Namen: --hg-* (Token), .hg-* (Bausteine). Ohne Skript voll nutzbar. */
:root {
  color-scheme: light dark;
  --hg-farbton: 255;
  --hg-h: var(--hg-farbton);
  --hg-grund: light-dark(oklch(.95 .025 var(--hg-h)), oklch(.13 .035 var(--hg-h)));
  --hg-text: light-dark(oklch(.22 .035 var(--hg-h)), oklch(.97 .008 var(--hg-h)));
  --hg-leise: light-dark(oklch(.35 .04 var(--hg-h)), oklch(.88 .02 var(--hg-h)));
  --hg-leiser: light-dark(oklch(.40 .04 var(--hg-h)), oklch(.85 .025 var(--hg-h)));
  --hg-glas: light-dark(oklch(.995 .008 var(--hg-h) / .56), oklch(.82 .05 var(--hg-h) / .10));
  --hg-glas-dicht: light-dark(oklch(.99 .01 var(--hg-h) / .90), oklch(.2 .03 var(--hg-h) / .92));
  --hg-fuell: light-dark(oklch(.3 .05 var(--hg-h) / .07), oklch(1 0 0 / .08));
  --hg-fuell-2: light-dark(oklch(.3 .05 var(--hg-h) / .13), oklch(1 0 0 / .14));
  --hg-linie: light-dark(oklch(.3 .05 var(--hg-h) / .16), oklch(1 0 0 / .16));
  --hg-akzent: light-dark(oklch(.44 .16 var(--hg-h)), oklch(.80 .13 var(--hg-h)));
  --hg-akzent-hover: light-dark(oklch(.49 .17 var(--hg-h)), oklch(.85 .13 var(--hg-h)));
  --hg-akzent-gedrueckt: light-dark(oklch(.38 .14 var(--hg-h)), oklch(.72 .12 var(--hg-h)));
  --hg-akzent-text: light-dark(oklch(.38 .14 var(--hg-h)), oklch(.87 .10 var(--hg-h)));
  --hg-auf-akzent: light-dark(oklch(.99 .01 var(--hg-h)), oklch(.18 .03 var(--hg-h)));
  --hg-kuehl: light-dark(oklch(.6 .17 var(--hg-h)), oklch(.68 .16 var(--hg-h)));
  --hg-logo: #FF7120;
  --hg-gut: light-dark(#17703A, #6EE7A0); --hg-warn: light-dark(#7A5000, #FFD36B); --hg-fehler: light-dark(#9E1F19, #FF9A90); --hg-info: light-dark(#1D5FB8, #9CCBFF);
  /* Lichtkante oben + feine Linie rundum */
  --hg-kante: inset 0 1px 0 light-dark(rgba(255, 255, 255, .85), rgba(255, 255, 255, .24)), inset 0 0 0 .5px var(--hg-linie);
  --hg-schatten: 0 1px 2px light-dark(oklch(.3 .06 var(--hg-h) / .10), rgba(0, 0, 0, .45)), 0 18px 44px light-dark(oklch(.4 .1 var(--hg-h) / .16), rgba(0, 0, 0, .55));
  /* Farbverlauf: vier weiche Farbflaechen aus dem Farbton der App (+/- Nachbartoene) auf einem getoenten Grund */
  --hg-verlauf:
    radial-gradient(70% 60% at 12% 18%, light-dark(oklch(.88 .10 var(--hg-h)), oklch(.32 .11 var(--hg-h))), transparent 70%),
    radial-gradient(60% 60% at 88% 12%, light-dark(oklch(.87 .10 calc(var(--hg-h) + 38)), oklch(.27 .09 calc(var(--hg-h) + 38))), transparent 70%),
    radial-gradient(70% 70% at 78% 92%, light-dark(oklch(.85 .11 calc(var(--hg-h) - 32)), oklch(.29 .10 calc(var(--hg-h) - 32))), transparent 72%),
    radial-gradient(60% 55% at 20% 90%, light-dark(oklch(.91 .07 calc(var(--hg-h) + 70)), oklch(.26 .08 calc(var(--hg-h) + 70))), transparent 70%),
    linear-gradient(160deg, light-dark(oklch(.97 .02 var(--hg-h)), oklch(.15 .04 var(--hg-h))), light-dark(oklch(.93 .04 var(--hg-h)), oklch(.11 .03 var(--hg-h))));
  --hg-unschaerfe: blur(28px) saturate(1.8);
  --hg-r-fenster: 28px; --hg-r-karte: 22px;
  --hg-feder: linear(0, .009, .035 2.1%, .141 4.4%, .281 6.7%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.058 22.3%, 1.064 24.7%, 1.055 27.6%, 1.014 34.6%, .998 40%, .993 45%, 1.001 60%, 1);
  --hg-schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}
:root[data-hg-modus="hell"] { color-scheme: light; }
:root[data-hg-modus="dunkel"] { color-scheme: dark; }
/* Ohne light-dark() (alte Browser): helle Festwerte, damit nichts unlesbar wird */
@supports not (color: light-dark(white, black)) {
  :root { --hg-grund: #E9EEF9; --hg-text: #1C2140; --hg-leise: #3F4668; --hg-leiser: #4D5578; --hg-glas: rgba(246, 249, 255, .62); --hg-glas-dicht: rgba(246, 249, 255, .92);
    --hg-fuell: rgba(28, 33, 64, .07); --hg-fuell-2: rgba(28, 33, 64, .13); --hg-linie: rgba(28, 33, 64, .16); --hg-akzent: #2F4FA8; --hg-akzent-hover: #3B5DBB; --hg-akzent-gedrueckt: #243F8C;
    --hg-akzent-text: #2F4FA8; --hg-auf-akzent: #FFFFFF; --hg-kuehl: #5C7BD6; --hg-gut: #17703A; --hg-warn: #7A5000; --hg-fehler: #9E1F19; --hg-info: #1D5FB8;
    --hg-kante: inset 0 0 0 .5px var(--hg-linie); --hg-schatten: 0 14px 36px rgba(50, 70, 160, .14); --hg-verlauf: linear-gradient(125deg, #CFE3FF, #EAF1FF 40%, #D9CEFF); }
}

/* Hintergrund: ein Farbverlauf aus der App-Farbe, der ruhig wandert; in Hell und Dunkel gleich bewegt. Auf <body class="hg-grund"> mit <div class="hg-tapete"> */
.hg-grund { background: var(--hg-grund); color: var(--hg-text); font-family: var(--hg-schrift); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.hg-tapete { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--hg-verlauf); background-size: 320% 320%; animation: hg-band 36s ease-in-out infinite alternate; }
@keyframes hg-band { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }

/* Glas, mehrlagig: Farbtoenung, Unschaerfe mit Saettigung (Vibrancy), Lichtkante oben, Doppelschatten */
.hg-glas, .hg-karte { background: linear-gradient(180deg, light-dark(rgba(255, 255, 255, .34), rgba(255, 255, 255, .06)), transparent 48%), var(--hg-glas); -webkit-backdrop-filter: var(--hg-unschaerfe); backdrop-filter: var(--hg-unschaerfe); box-shadow: var(--hg-kante), var(--hg-schatten); border: 0; color: var(--hg-text); }
.hg-karte { border-radius: var(--hg-r-karte); padding: 20px 22px; }
.hg-glas.fenster { border-radius: var(--hg-r-fenster); }

/* Schrift: grosse Titel mit enger Laufweite, klare Stufen */
.hg-titel { margin: 0; font: 700 clamp(2rem, 4.2vw, 3.25rem)/1.05 var(--hg-schrift); letter-spacing: -.035em; color: var(--hg-text); }
.hg-unter { margin: 0; font: 400 1.0625rem/1.45 var(--hg-schrift); letter-spacing: -.01em; color: var(--hg-leise); }
.hg-kicker { font: 600 .75rem/1 var(--hg-schrift); letter-spacing: .08em; text-transform: uppercase; color: var(--hg-akzent-text); }

/* Logo bleibt Original-Orange, wird von keinem Modus und keinem Akzent verfaerbt */
.hg-logo, .hg-logo svg, .hg-logo path { color: var(--hg-logo); fill: var(--hg-logo); }

/* Symbole im Stil der Systemsymbole: gleichmaessige Linie, runde Enden, folgen der Textfarbe */
.hg-symbol { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }

/* Knoepfe: Kapseln; der Hauptknopf traegt die App-Farbe mit sanftem Glanz */
.hg-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--hg-glas-dicht); color: var(--hg-text);
  font: 600 0.9375rem/1 var(--hg-schrift); letter-spacing: -.01em; text-decoration: none; cursor: pointer; box-shadow: var(--hg-kante), 0 2px 8px light-dark(oklch(.3 .06 var(--hg-h) / .10), rgba(0, 0, 0, .35)); transition: transform .55s var(--hg-feder), box-shadow .2s, background .2s; }
.hg-knopf:active { transform: scale(.96); }
.hg-knopf.primaer { background: linear-gradient(180deg, color-mix(in oklch, white 20%, var(--hg-akzent)), var(--hg-akzent)); color: var(--hg-auf-akzent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px color-mix(in srgb, var(--hg-akzent) 34%, transparent); }
.hg-knopf.primaer:hover { background: linear-gradient(180deg, color-mix(in oklch, white 20%, var(--hg-akzent-hover)), var(--hg-akzent-hover)); }
.hg-knopf.primaer:active { background: var(--hg-akzent-gedrueckt); }
.hg-knopf:focus-visible, .hg-feld:focus-visible { outline: 3px solid color-mix(in srgb, var(--hg-akzent) 70%, transparent); outline-offset: 2px; }

/* Eingabe, Segment, Schalter */
.hg-feld { height: 52px; width: 100%; padding: 0 22px; border: 0; border-radius: 999px; background: var(--hg-fuell); color: var(--hg-text); font: 1rem var(--hg-schrift); box-shadow: inset 0 0 0 .5px var(--hg-linie), inset 0 2px 6px rgba(0, 0, 0, .1); }
.hg-feld::placeholder { color: var(--hg-leiser); }
.hg-segment { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--hg-fuell); box-shadow: inset 0 0 0 .5px var(--hg-linie); }
.hg-segment > :is(a, button) { padding: 8px 16px; border: 0; border-radius: 999px; background: none; color: var(--hg-leise); font: 600 0.875rem var(--hg-schrift); text-decoration: none; cursor: pointer; transition: background .3s, color .3s; }
.hg-segment > [aria-current], .hg-segment > [aria-pressed="true"] { background: var(--hg-glas-dicht); color: var(--hg-text); box-shadow: inset 0 1px 0 light-dark(rgba(255, 255, 255, .8), rgba(255, 255, 255, .2)), 0 3px 10px light-dark(oklch(.3 .06 var(--hg-h) / .16), rgba(0, 0, 0, .4)); }
.hg-schalter { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--hg-leise); }
.hg-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hg-schalter i { position: relative; width: 54px; height: 32px; border-radius: 16px; background: var(--hg-fuell-2); box-shadow: inset 0 0 0 .5px var(--hg-linie); transition: background .3s; }
.hg-schalter i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 38px; height: 26px; border-radius: 13px; background: #FFFFFF; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); transition: transform .55s var(--hg-feder), width .4s var(--hg-feder); }
.hg-schalter input:checked + i { background: var(--hg-kuehl); }
.hg-schalter input:checked + i::after { transform: translateX(10px); }
.hg-schalter:active i::after { width: 46px; }
.hg-schalter:active input:checked + i::after { transform: translateX(2px); }
.hg-schalter input:focus-visible + i { outline: 3px solid color-mix(in srgb, var(--hg-akzent) 70%, transparent); outline-offset: 2px; }

/* Anmelde-Fenster (Modal): <div class="hg-anmeldung"><form class="hg-glas fenster hg-modal"> ... </form></div> */
.hg-anmeldung { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; overflow: auto; }
.hg-modal { width: min(440px, 100%); padding: 42px 34px 30px; border-radius: var(--hg-r-fenster); display: grid; gap: 14px; }
.hg-modal h1 { margin: 0; font: 700 2.125rem/1.1 var(--hg-schrift); letter-spacing: -.035em; }

/* Gelaender */
@media (prefers-reduced-motion: reduce) { .hg-tapete { animation: none; background-position: 35% 50%; } .hg-knopf, .hg-schalter i::after, .hg-segment > :is(a, button) { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .hg-glas, .hg-karte, .hg-modal { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--hg-glas-dicht); } }
@media (prefers-contrast: more) { .hg-glas, .hg-karte, .hg-modal { background: var(--hg-glas-dicht); box-shadow: inset 0 0 0 1px var(--hg-text); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hg-glas, .hg-karte, .hg-modal { background: var(--hg-glas-dicht); } }

/* Beruehrungsziele (mindestens 44 x 44): bei Fingerbedienung gross, mit der Maus bleibt es dicht */
@media (pointer: coarse) {
  .hg-knopf, .hg-segment > :is(a, button), .hg-schalter { min-height: 44px; }
  .hg-feld { min-height: 48px; }
}
/* Weniger Bewegung: grosse Bewegung wird zu einer Einblendung (Deckkraft), nicht zum Stillstand der ganzen Seite */
@media (prefers-reduced-motion: reduce) { .hg-modal, .hg-glas.fenster { animation: hg-ein .3s ease both; } @keyframes hg-ein { from { opacity: 0; } } }