/*
 * Linsen-Glas: klare, scharfe Glasoptik für die ganze Website
 * (nach dem Beispiel "liquid glass lens button in CSS/SVG").
 *
 * Ergänzung zu glas.css - die Datei glas.css bleibt unverändert (sie ist eine Kopie aus dem Design-Paket
 * des Maylang-Repos). Diese Datei muss NACH site.css (und konto.css) eingebunden werden.
 *
 * Der Kniff: weich gezeichnete Lichter und Schatten (Kantenglanz, dunkler Innenring, diagonale Eckreflexe)
 * plus  filter: contrast(3)  ergeben scharfe, helle Glaskanten.
 *
 * ZWEI STUFEN
 *
 *  A) Bedienelemente (Knöpfe, Reiter, Symbole, Filter ...): der Filter liegt direkt auf dem Element, also auch
 *     auf seinem Inhalt. contrast(3) macht Farben kräftiger; damit das Markenorange trotzdem das Markenorange
 *     bleibt, sind die Farben INNERHALB dieser Elemente vorgerechnet (Umkehrung der Filterformel,
 *     mit dem Browser nachgemessen). Das passiert zentral über die Variablen --glas-marke usw., die in den
 *     Elementen überschrieben werden - bestehende Regeln wie  rgb(var(--glas-marke))  stimmen dadurch weiter.
 *     Eigene Farben in solchen Elementen: --lx-* benutzen (siehe :root).
 *
 *  B) Flächen mit beliebigem Inhalt (Karten, Menüs, Cookie-Hinweis): nur die Kante bekommt den Effekt -
 *     eine eigene Schicht (::after) liegt über der Fläche. Bilder und Text darin bleiben unverändert.
 *
 * Bewusst ohne Effekt: die Kopfzeile als Leiste (eine große Glasfläche am Bildschirmrand liest sich als Ebene
 * über allem - siehe glas.css, "Das Menü ist keine Kachel"), und
 * Flächen IN Flächen (ein Rahmen im Rahmen liest sich als Ebene).
 *
 * Feinabstimmung pro Element:  --lx-s (Größenfaktor, 1 ≈ 44 px hohes Element)  und  --lx-ecke (Eckreflexe).
 */

:root {
  /* Farben, wie sie VOR dem Filter aussehen müssen, damit sie danach die Markenfarben ergeben */
  --lx-marke: 165, 127, 98;          /* ergibt 240, 126, 38  (Marke) */
  --lx-marke-dunkel: 132, 107, 85;   /* ergibt 140, 66, 0 */
  --lx-gruen: 92, 139, 110;          /* ergibt 22, 163, 74 */
  --lx-rot: 136, 94, 94;             /* ergibt 153, 27, 27 */
  --lx-rot-hell: 158, 98, 98;        /* ergibt 220, 38, 38 */
  --lx-tinte: #636160;               /* ergibt #2b2420 */
  --lx-tinte-mild: #797571;          /* ergibt #6b5f54 */

  --lx-schatten:
    inset 2px -2px 1px -1px rgba(255, 255, 255, 0.9),
    inset -2px 2px 1px -1px rgba(255, 255, 255, 0.9),
    inset 6px -6px 1px -6px rgba(255, 255, 255, 0.55),
    inset -6px 6px 1px -6px rgba(255, 255, 255, 0.55),
    inset 0 0 2px rgba(0, 0, 0, 0.8),
    0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   A) Bedienelemente
   ========================================================================== */
.knopf,
.icon-link,
.menu-knopf,
.zahnrad__knopf,
.konto-reiter,
.blog-filter button,
.einst-menue a.ist-aktiv,
.avatar-rahmen--init,
.farb-perle,
.hauptnav a:hover,
.hauptnav a[aria-current="page"] {
  /* Farben innerhalb des Elements vorrechnen (siehe oben) */
  --glas-marke: var(--lx-marke);
  --glas-marke-dunkel: var(--lx-marke-dunkel);
  --site-tinte: var(--lx-tinte);
  --site-tinte-mild: var(--lx-tinte-mild);

  position: relative;
  border: 1px double rgba(51, 51, 51, 0.08);
  box-shadow: var(--lx-schatten);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-image: none;
  filter: contrast(3);
}

/* gläserner Körper (alles außer Flächen, die eine eigene Füllung haben) */
.knopf:not(.knopf--primaer),
.icon-link,
.menu-knopf,
.zahnrad__knopf,
.konto-reiter,
.blog-filter button:not([aria-pressed="true"]),
.hauptnav a:hover,
.hauptnav a[aria-current="page"] {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Größen der Effekte */
.icon-link { --lx-s: 0.6; }
.menu-knopf { --lx-s: 0.7; }
.zahnrad__knopf { --lx-s: 0.8; }
.blog-filter button { --lx-s: 0.55; }
.hauptnav a { --lx-s: 0.7; }
.einst-menue a.ist-aktiv { --lx-s: 0.9; }
.cookie-leiste__knoepfe .knopf { --lx-s: 0.85; }

/* dunkler, weicher Innenring (nach unten versetzt) = Tiefe der Linse */
.knopf::before,
.icon-link::before,
.menu-knopf::before,
.zahnrad__knopf::before,
.konto-reiter::before,
.blog-filter button::before,
.einst-menue a.ist-aktiv::before,
.avatar-rahmen--init::before,
.farb-perle::before,
.hauptnav a:hover::before,
.hauptnav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 35%;
  left: calc(8px * var(--lx-s, 1));
  right: calc(8px * var(--lx-s, 1));
  bottom: calc(16px * var(--lx-s, 1) - 35%);
  border-radius: inherit;
  border: 1px solid rgba(0, 0, 0, 0.9);
  filter: blur(calc(8px * var(--lx-s, 1)));
  pointer-events: none;
}

/* diagonale Reflexe in den Ecken */
.knopf::after,
.icon-link::after,
.menu-knopf::after,
.zahnrad__knopf::after,
.konto-reiter::after,
.blog-filter button::after,
.einst-menue a.ist-aktiv::after,
.avatar-rahmen--init::after,
.farb-perle::after,
.hauptnav a:hover::after,
.hauptnav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  filter: blur(calc(7px * var(--lx-s, 1)));
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.8) 0,
    transparent var(--lx-ecke, calc(28px * var(--lx-s, 1))),
    transparent calc(100% - var(--lx-ecke, calc(28px * var(--lx-s, 1)))),
    rgba(255, 255, 255, 0.8) 100%
  );
  pointer-events: none;
}

/* --- Zustände (überstimmen die älteren Schatten aus site.css) --- */
.knopf--primaer:hover,
.knopf--glas:hover {
  box-shadow: var(--lx-schatten);
}
.knopf:active,
.icon-link:active,
.menu-knopf:active,
.blog-filter button:active {
  transform: scale(0.95);
}
.icon-link:hover,
.icon-link.ist-angemeldet:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

/* --- einzelne Farben innerhalb der Elemente --- */
.knopf--gefahr {
  color: rgb(var(--lx-rot));
  background: rgba(0, 0, 0, 0.02);
}
.icon-link.ist-angemeldet { color: rgb(var(--lx-gruen)); }
.icon-link.ist-angemeldet svg { fill: rgb(var(--lx-gruen)); }

/* der Reiter-Rahmen ist ein Behälter: Reiter darin liegen über den Reflexen */
.konto-reiter__tab { z-index: 4; }
.konto-reiter__tab.ist-aktiv { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18); }

/* Profilbild: Initialen (Stufe A, Farbe wird in PHP vorgerechnet) und Foto (nur Kante, Stufe B) */
.avatar-rahmen--init { border-radius: 50%; }
.team-karte__foto { position: relative; --lx-s: 1.2; }
.avatar-rahmen--foto::after,
.team-karte__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, 0.9),
    inset -2px 2px 1px -1px rgba(255, 255, 255, 0.9),
    inset 0 0 2px rgba(0, 0, 0, 0.8),
    0 3px 6px rgba(0, 0, 0, 0.18);
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.6) 0, transparent calc(14px * var(--lx-s, 1)), transparent calc(100% - 14px * var(--lx-s, 1)), rgba(255, 255, 255, 0.6) 100%);
  filter: contrast(3);
}

/* ==========================================================================
   B) Flächen mit beliebigem Inhalt: nur die Kante
   ========================================================================== */
/* (Karten, Teller, Cookie-Hinweis und Menü sind schon positioniert; die Seitenleiste der Einstellungen
   ist am Handy statisch und braucht einen Bezugspunkt für die Kante) */
@media (max-width: 720px) {
  .einst-menue { position: relative; }
}

/* Die Kante: heller Saum, scharfe dunkle Haarlinie, Schatten am unteren Innenrand (Dicke des Glases) und
   diagonale Eckreflexe. Liegt als Schicht über der Fläche und bleibt in den Randzonen - Text und Bilder
   in der Mitte werden nicht verändert. */
.karte::after,
.glas-flaeche::after,
.glas-teller:not(.glas-teller--eingebettet)::after,
.cookie-leiste::after,
.zahnrad__menue::after,
.einst-menue::after,
.spiel-karte::after,
.kennzahl--voll::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 3px -3px 2px -2px rgba(255, 255, 255, 1),
    inset -3px 3px 2px -2px rgba(255, 255, 255, 1),
    inset 9px -9px 3px -9px rgba(255, 255, 255, 0.7),
    inset -9px 9px 3px -9px rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    inset 0 -9px 7px -8px rgba(0, 0, 0, 0.3);
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.85) 0,
    transparent 70px,
    transparent calc(100% - 70px),
    rgba(255, 255, 255, 0.85) 100%
  );
  filter: contrast(3);
}

/* Kacheln: neutrale Haarlinie statt warmem Rand und ein klarer Schlagschatten - sie sollen als Glasplatte
   auf dem Untergrund liegen. (Der Rand der Fläche steckt sonst in --glas-kante, ein warmes Pfirsich.) */
.karte,
.glas-flaeche,
.glas-teller:not(.glas-teller--eingebettet) {
  border-color: rgba(51, 51, 51, 0.12);
  box-shadow: var(--glas-schattenwurf), 0 8px 20px rgba(40, 28, 16, 0.13);
}
/* Spiel-Kacheln im Profil und gefüllte Kennzahlen: eigene Klassen, gleiches Glas */
.spiel-karte,
.kennzahl--voll {
  position: relative;
  border-color: rgba(51, 51, 51, 0.12);
  box-shadow: 0 6px 14px rgba(40, 28, 16, 0.13);
}
@media (hover: hover) and (pointer: fine) {
  .spiel-karte:hover { box-shadow: 0 12px 24px rgba(40, 28, 16, 0.2); }
}
@media (hover: hover) and (pointer: fine) {
  .karte:hover,
  .glas-flaeche:hover {
    box-shadow: var(--glas-schattenwurf-schweben), 0 14px 28px rgba(40, 28, 16, 0.18);
  }
}

/* Handy-Menü der Kopfzeile: schwebende Platte, bekommt die Kante */
@media (max-width: 820px) {
  .hauptnav::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
      inset 2px -2px 1px -1px rgba(255, 255, 255, 0.9),
      inset -2px 2px 1px -1px rgba(255, 255, 255, 0.9),
      inset 0 0 2px rgba(0, 0, 0, 0.7);
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.55) 0, transparent 40px, transparent calc(100% - 40px), rgba(255, 255, 255, 0.55) 100%);
    filter: contrast(3);
  }
}

/* Symbol des Zahnrads dreht sich, nicht das ganze Glas (sonst wandern die Lichter mit) */
.zahnrad__knopf:hover,
.zahnrad__knopf[aria-expanded="true"] { transform: none; }
.zahnrad__knopf svg { transition: transform 0.25s ease; }
.zahnrad__knopf:hover svg,
.zahnrad__knopf[aria-expanded="true"] svg { transform: rotate(35deg); }

/* Windows-Kontrastmodus & Co.: Effekt weglassen, Inhalt bleibt voll lesbar */
@media (forced-colors: active) {
  .knopf, .icon-link, .menu-knopf, .zahnrad__knopf, .konto-reiter, .blog-filter button,
  .einst-menue a.ist-aktiv, .avatar-rahmen--init, .farb-perle, .hauptnav a:hover, .hauptnav a[aria-current="page"] { filter: none; }
  .knopf::before, .knopf::after, .icon-link::before, .icon-link::after, .menu-knopf::before, .menu-knopf::after,
  .zahnrad__knopf::before, .zahnrad__knopf::after, .konto-reiter::before, .konto-reiter::after,
  .blog-filter button::before, .blog-filter button::after, .einst-menue a.ist-aktiv::before, .einst-menue a.ist-aktiv::after,
  .avatar-rahmen--init::before, .avatar-rahmen--init::after, .farb-perle::before, .farb-perle::after, .hauptnav a::before, .hauptnav a::after,
  .karte::after, .glas-flaeche::after, .glas-teller::after, .cookie-leiste::after, .zahnrad__menue::after,
  .einst-menue::after, .spiel-karte::after, .kennzahl--voll::after, .hauptnav::after, .avatar-rahmen--foto::after, .team-karte__foto::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .knopf:active, .icon-link:active, .menu-knopf:active, .blog-filter button:active { transform: none; }
}

/* ==========================================================================
   Hauptmenü der Kopfzeile (Bildschirme ab 821 px): gleiches Glas wie die Reiterleiste im Profil (.konto-reiter).
   Die Links darin sind flach wie die Profil-Reiter (Berührung hell, aktuelle Seite orange gefüllt); am Handy bleibt das
   Menü die aufklappbare Platte (siehe site.css).
   ========================================================================== */
@media (min-width: 821px) {
  .hauptnav {
    --glas-marke: var(--lx-marke);
    --glas-marke-dunkel: var(--lx-marke-dunkel);
    --site-tinte: var(--lx-tinte);
    --site-tinte-mild: var(--lx-tinte-mild);
    --lx-s: 1;
    position: relative;
    gap: 0.35rem;
    padding: 0.4rem;
    border-radius: 999px;
    border: 1px double rgba(51, 51, 51, 0.08);
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: var(--lx-schatten);
    filter: contrast(3);
  }
  .hauptnav::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 35%;
    left: 8px;
    right: 8px;
    bottom: calc(16px - 35%);
    border-radius: inherit;
    border: 1px solid rgba(0, 0, 0, 0.9);
    filter: blur(8px);
    pointer-events: none;
  }
  .hauptnav::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    border-radius: inherit;
    filter: blur(7px);
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.8) 0, transparent 28px, transparent calc(100% - 28px), rgba(255, 255, 255, 0.8) 100%);
    pointer-events: none;
  }
  /* Links: flach, über den Reflexen */
  .hauptnav a,
  .hauptnav a:hover,
  .hauptnav a[aria-current="page"] {
    position: relative;
    z-index: 4;
    padding: 0.55rem 1.05rem;
    border: 0;
    box-shadow: none;
    filter: none;
    background-image: none;
    background-color: transparent;
    color: var(--site-tinte-mild);
  }
  .hauptnav a:hover::before,
  .hauptnav a:hover::after,
  .hauptnav a[aria-current="page"]::before,
  .hauptnav a[aria-current="page"]::after { display: none; }
  .hauptnav a:hover { background-color: rgba(255, 255, 255, 0.7); color: rgb(var(--glas-marke-dunkel)); }
  .hauptnav a[aria-current="page"] {
    background-color: rgb(var(--glas-marke));
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  }
}
@media (min-width: 821px) and (forced-colors: active) {
  .hauptnav { filter: none; }
  .hauptnav::before, .hauptnav::after { display: none; }
}
@media (min-width: 821px) {
  .hauptnav a { white-space: nowrap; }
}
/* knapp über dem Handy-Umbruch: enger setzen, damit Logo, Menü und Symbole nebeneinander passen */
@media (min-width: 821px) and (max-width: 1060px) {
  .hauptnav { gap: 0.1rem; padding: 0.3rem; }
  .hauptnav a, .hauptnav a:hover, .hauptnav a[aria-current="page"] { padding: 0.5rem 0.7rem; font-size: 0.9rem; }
  .kopfzeile__inner { gap: 0.8rem; }
}