/* ============================================================
   THEME OVERRIDE TEMPLATE
   
   Einbindung NACH der glasskit.css:
   <link rel="stylesheet" href="glasskit.css">
   <link rel="stylesheet" href="theme-override.css">
   
   Hier nur die Werte überschreiben, die abweichen.
   Alles andere wird von der Basis-Library geerbt.
   ============================================================ */


/* ============================================================
   MARKENFARBE — seit 1.11.0 genügen zwei Zeilen

   Gradient-Mitte, warmer Rand, Fokusring, das Leuchten unter dem
   Primärknopf und der Reglerknopf werden daraus gemischt. Vor 1.11.0
   standen dort feste Bernsteinwerte; ein umgefärbter Knopf bekam
   deshalb einen orangen Halo und einen bernsteinfarbenen Fokusring.

   Wichtig: auf :root deklarieren. Eine Custom Property wird dort
   ersetzt, wo sie deklariert ist — auf einem Teilbaum gesetzt, erreicht
   die Marke die von :root geerbten Tokens nicht.
   ============================================================ */

/* Ocean Blue */
/*
:root {
  --gl-color-primary:        #007AFF;
  --gl-color-primary-dark:   #0055CC;
}
*/

/* Emerald Green */
/*
:root {
  --gl-color-primary:        #34c759;
  --gl-color-primary-dark:   #248a3d;
}
*/

/* Rose */
/*
:root {
  --gl-color-primary:        #FF2D55;
  --gl-color-primary-dark:   #CC1A40;
}
*/


/* ============================================================
   BEISPIEL: Einzelne abgeleitete Werte biegen

   Die Ableitungen sind gewöhnliche Vorgaben und verlieren gegen eine
   spätere Deklaration. Nur setzen, was wirklich abweichen soll.
   ============================================================ */

/*
:root {
  --gl-color-primary-mid:    #0066E0;
  --gl-shadow-focus:         0 0 0 3px rgba(0, 122, 255, 0.4);
}
*/


/* ============================================================
   BEISPIEL: Primärfarbe als Text (seit 1.26.0)

   Links in .glass-prose, der aktive Tab, die primäre Modal-Aktion,
   Akzent-Listenzeilen, der Wert eines Reglers und das Akkordeon
   schreiben in --gl-color-primary-text, ohne eigenen Wert in der
   Primärfarbe. Eine Marke, die ihre Primärfarbe für weiße
   Button-Schrift abdunkelt, hellt hier die Schrift im dunklen Theme
   auf; die Buttons behalten ihre Farbe. Die helle Regel steht nach
   der dunklen, weil :root auch eine Seite im hellen Theme trifft.
   --gl-tab-bar-active-color färbt Icon und Label des aktiven Tabs
   allein, wo das Spotlight einen noch helleren Ton braucht.
   ============================================================ */

/*
:root, [data-theme="dark"] {
  --gl-color-primary-text:   color-mix(in srgb, var(--gl-color-primary) 18%, #ffffff);
}
[data-theme="light"] {
  --gl-color-primary-text:   var(--gl-color-primary);
}
*/


/* ============================================================
   BEISPIEL: Dunklerer Hintergrund
   ============================================================ */

/*
:root {
  --gl-color-bg-dark:        #060e14;
  --gl-color-bg-mid:         #0c1e2a;
  --gl-color-bg-light:       #102838;
}
*/


/* ============================================================
   BEISPIEL: Hellerer / stärkerer Glaseffekt
   ============================================================ */

/*
:root {
  --gl-surface-1:            rgba(255, 255, 255, 0.12);
  --gl-surface-2:            rgba(255, 255, 255, 0.15);
  --gl-surface-3:            rgba(255, 255, 255, 0.20);
  --gl-surface-4:            rgba(255, 255, 255, 0.24);
  --gl-surface-5:            rgba(255, 255, 255, 0.30);
  --gl-blur:                 32px;
  --gl-blur-light:           20px;
}
*/


/* ============================================================
   BEISPIEL: Andere Typografie
   ============================================================ */

/*
:root {
  --gl-font-family:          'Inter', -apple-system, sans-serif;
  --gl-font-size-title:      28px;
  --gl-radius-card:          28px;
  --gl-radius-btn:           20px;
  --gl-radius-input:         16px;
}
*/


/* ============================================================
   BEISPIEL: Komponenten-Haken (seit 1.20.0)

   Breitere Dialoge für Formulare und Tabellen, und ein eigener
   Chevron für das Select. Der Chevron ist pro Theme gesetzt — wer
   ihn ersetzt, setzt ihn für beide.
   ============================================================ */

/*
:root {
  --gl-modal-max-width:      560px;
}
[data-theme="light"] {
  --gl-select-chevron:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230055CC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
*/


/* ============================================================
   BEISPIEL: Dichtere Bedienelemente (seit 1.21.0)

   Für die ganze Seite genügt <html data-density="compact">.
   Einzelne Größen lassen sich setzen wie jedes Token: auf :root
   für beide Dichten, auf [data-density="compact"] nur für die
   kompakte. Knopf und Zeilenausrichtung von Toggle, Checkbox
   und Radio folgen der gesetzten Größe.
   ============================================================ */

/*
:root {
  --gl-btn-height:           48px;
}
[data-density="compact"] {
  --gl-btn-height:           36px;
}
*/


/* ============================================================
   BEISPIEL: Tab-Bar und Segmentwahl (seit 1.28.0)

   Kräftigere inaktive Tabs, größere Labels, eine Leiste unter
   einer Seitenschublade (z-index 101), und eine gewählte
   Segmentwahl-Option in der Markenfarbe — ihr Tropfen nimmt
   dieselbe Fläche. Wer die inaktive Farbe heller setzt als
   --gl-icon-default, setzt die Hover-Farbe mit.
   ============================================================ */

/*
:root {
  --gl-tab-bar-color:            var(--gl-icon-strong);
  --gl-tab-bar-hover-color:      var(--gl-color-text);
  --gl-tab-bar-label-size:       12px;
  --gl-tab-bar-z-index:          100;
  --gl-segmented-active-bg:      var(--gl-color-primary);
  --gl-segmented-active-color:   var(--gl-color-on-primary);
}
*/


/* ============================================================
   BEISPIEL: Buttons und Zähler (seit 1.31.0)

   Buttons in Pillenform, ohne Listen, Toasts und Segmentwahl
   mitzurunden, ein knapperer Innenabstand für kleine Buttons,
   und Zähler der Segmentwahl in der Größe eines Badges.
   ============================================================ */

/*
:root {
  --gl-btn-radius:                 9999px;
  --gl-btn-padding-x-sm:           16px;
  --gl-segmented-badge-height:     20px;
  --gl-segmented-badge-font-size:  12px;
}
*/


/* ============================================================
   BEISPIEL: Weiße Schrift auf Akzentflächen mit AA (seit 1.32.0)

   Primärknopf, gewählter Tag in Datumsleiste und Kalender und die
   Nummer des aktuellen Schritts liegen auf der Primärfarbe; Weiß
   erreicht auf GlassKits Orange dort nur 2 bis 3,8:1. Statt
   --gl-color-primary abzudunkeln — sie zeichnet auch Fokusringe,
   Ränder und Akzenttext — dunkeln diese beiden Haken nur die
   Flächen ab. 75 % der Primärfarbe mit Schwarz im hellen Theme,
   65 % im dunklen geben 4,53:1, der Verlauf bleibt überall darüber;
   der Wochentag des gewählten Tags ist seit 1.32.0 so kräftig wie
   die Zahl. Die helle Regel steht nach der dunklen.

   Der andere Weg ist eine dunkle Schrift: --gl-color-on-primary
   (siehe glasskit.css). Der Punkt des Radios folgt ihr seit 1.32.0
   wie das Häkchen der Checkbox.
   ============================================================ */

/*
:root, [data-theme="dark"] {
  --gl-color-primary-fill:   color-mix(in srgb, var(--gl-color-primary) 65%, #000);
}
[data-theme="light"] {
  --gl-color-primary-fill:   color-mix(in srgb, var(--gl-color-primary) 75%, #000);
}
:root, [data-theme="dark"], [data-theme="light"] {
  --gl-btn-primary-bg:       linear-gradient(135deg, var(--gl-color-primary-fill), color-mix(in srgb, var(--gl-color-primary-dark) 80%, #000));
}
*/


/* ============================================================
   BEISPIEL: Ein kurzer Tropfen (seit 1.32.0)

   Die Bewegung des Tropfens in Tab-Bar und Segmentwahl ist aus
   Tokens; ungesetzt gelten die bisherigen Werte. Für ein Produkt,
   dessen Bewegungen höchstens etwa 240 ms dauern: beide Kanten
   zugleich, ohne Stauchen und ohne Nachfedern. Die Zeile
   --gl-droplet-lift-duration: 0ms gehört dazu — ohne sie klingt der
   tiefere Schatten des Anhebens noch bis etwa 600 ms nach; mit ihr
   steht jede Kante nach rund 250 ms still. Unter
   prefers-reduced-motion springt der Tropfen weiterhin.
   ============================================================ */

/*
:root {
  --gl-droplet-duration:         240ms;
  --gl-droplet-easing:           ease-out;
  --gl-droplet-trail-duration:   240ms;
  --gl-droplet-trail-delay:      0ms;
  --gl-droplet-trail-easing:     ease-out;
  --gl-droplet-lift:             1;
  --gl-droplet-lift-duration:    0ms;
  --gl-droplet-settle-duration:  0ms;
  --gl-droplet-lens-duration:    240ms;
  --gl-droplet-lens-easing:      ease-out;
}
*/


/* ============================================================
   BEISPIEL: Seitenleiste, Tooltip, Baum und Tabelle (seit 1.32.0)

   Eine breitere Icon-Leiste (--rail), mehr Platz für breite Zähler
   in der Seitenleiste, Tooltips in beiden Themes dunkel, ein
   tieferer Einzug im Baum, ein grünes Aufleuchten geänderter
   Einträge, längere Breadcrumbs und eine dichtere Tabelle, deren
   Kopf unter einer 64px hohen Kopfleiste im sichtbaren Teil der
   Seite bleibt.
   ============================================================ */

/*
:root {
  --gl-tab-bar-rail-width:       80px;
  --gl-tab-bar-badge-room:       44px;
  --gl-tooltip-bg:               rgba(10, 20, 28, 0.94);
  --gl-tooltip-color:            #ffffff;
  --gl-tree-indent:              24px;
  --gl-flash-color:              color-mix(in srgb, var(--gl-color-success) 30%, transparent);
  --gl-breadcrumbs-crumb-width:  260px;
  --gl-table-cell-padding:       6px 8px;
  --gl-table-header-padding:     6px 8px;
  --gl-table-max-height:         calc(100dvh - 64px - 96px);
}
*/


/* ============================================================
   BEISPIEL: Rail mit Labels und eine kompakte obere Leiste
   (seit 1.33.0)

   Eine schwebende Rail (.glass-tab-bar--floating --vertical
   --start --rail --labels) von 96px Breite mit 12px-Labels und
   abgerundeten Quadraten statt Kapseln, 12px vom Rand und von den
   Enden entfernt. Die obere Leiste (.glass-tab-bar--top) wird zur
   kompakten Spur wie ein Segmented Control: 18px-Icons, 12px-Ecken
   für den Tropfen und ein halbfettes aktives Label. Dazu höhere
   Auswahl-Chips (.glass-badge--md). Nur die Leisten-Tokens ändern
   sich, --gl-radius-full und die Schrift-Tokens bleiben.
   ============================================================ */

/*
.glass-tab-bar--rail.glass-tab-bar--labels {
  --gl-tab-bar-rail-width:       96px;
  --gl-tab-bar-label-size:       12px;
  --gl-tab-bar-item-radius:      18px;
  --gl-tab-bar-floating-inset:   12px;
}
.glass-tab-bar--top {
  --gl-tab-bar-icon-size:        18px;
  --gl-tab-bar-item-radius:      12px;
  --gl-tab-bar-active-weight:    var(--gl-font-weight-semibold);
}
:root {
  --gl-badge-md-height:          40px;
}
*/


/* ============================================================
   BEISPIEL: Bausteinliste mit Griff vorn, gewählte Zeile und
   Baum mit Chips (seit 1.34.0)

   Eine sortierbare Liste der Seite, deren Griff (18px) vor dem
   Icon (28px) steht: die Trennlinien beginnen unter dem Text statt
   am Innenabstand. Die gewählte Zeile einer Liste neben ihrem
   Editor bekommt eine kräftigere Fläche, und der Baum zeigt
   getönte 28px-Chips statt 18px-Icons.
   ============================================================ */

/*
.component-list {
  --gl-list-item-divider-inset:  90px;
}
:root {
  --gl-list-item-selected-bg:    var(--gl-surface-5);
  --gl-tree-icon-size:           28px;
}
*/


/* ============================================================
   BEISPIEL: Markenakzent auf Glas, Sheet an der Seite
   (seit 1.35.0)

   Ein dunkler Markenakzent als Text: auf der Seite und auf dem Glas
   von Karten, Modals und Sheets hell genug, mit eigenem Ton auf dem
   Glas statt der 60-%-Mischung. Die helle Regel steht nach der
   dunklen, weil :root auch eine Seite im hellen Theme trifft (bis
   1.35.0 fehlte sie hier). Ein Seitenpanel 480px breit, 12px vom
   Rand, und Listenzeilen mit kleinerem Untertitel.
   ============================================================ */

/*
:root, [data-theme="dark"] {
  --gl-color-primary-text:       color-mix(in srgb, var(--gl-color-primary) 35%, #ffffff);
  --gl-color-primary-on-glass:   color-mix(in srgb, var(--gl-color-primary) 18%, #ffffff);
}
[data-theme="light"] {
  --gl-color-primary-text:       var(--gl-color-primary);
  --gl-color-primary-on-glass:   var(--gl-color-primary-text);
}
:root {
  --gl-sheet-side-width:         480px;
  --gl-sheet-side-inset:         12px;
  --gl-list-subtitle-size:       13px;
}
*/


/* ============================================================
   DEIN CUSTOM THEME
   Entkommentiere und passe an:
   ============================================================ */

/*
:root {

}
*/