/* Stammtisch-Kasse — Gestaltung im Liquid-Glass-Stil von iOS 26/27.
   Ein weicher, farbiger Hintergrund; darüber Karten aus mattem, durchscheinendem
   Glas mit Lichtkante, Symbole auf klaren Glasplättchen. Leisten, Knöpfe und
   Blätter sind echtes Glas mit Unschärfe. Inhalte laufen an den Leisten weich
   aus (scroll edge effect). Hell und dunkel, iPhone und iPad.

   Die Karten bekommen bewusst keine Unschärfe: Viele verschwommene Flächen auf
   einmal kosten beim Scrollen und bei Seitenwechseln spürbar Rechenzeit.

   Hinweis zu Safari ab iOS 26: Die Statusleiste färbt sich nach fest
   positionierten Elementen am Bildschirmrand. Deren Glas liegt deshalb auf
   Pseudo-Elementen (::before), die Safari dabei nicht auswertet. Ohne solche
   Elemente nimmt sie die Hintergrundfarbe von html — die ist deshalb genau die
   Farbe, mit der der Seitenhintergrund oben beginnt (--kopf-grund), sonst
   stünde über dem Titel ein andersfarbiger Streifen.

   Seitenwechsel laufen ohne View Transitions (siehe app.js, „Übergänge"): Die
   echten Seiten werden per transform verschoben. */

/* ---------- Farben und Maße ---------- */

:root {
  color-scheme: light dark;

  --akzent: #1f6fd1;            /* Gartenzwerg-Blau */
  --akzent-text: #1560bd;
  --akzent-weich: rgb(31 111 209 / .12);

  --grund: #e6ecf2;
  --kopf-grund: #dfe7f0;        /* oberer Rand; = theme-color in index.html */
  --flaeche: #fff;
  --flaeche-2: #f2f2f7;
  --blatt-grund: rgb(242 242 247 / .88);
  --blatt-karte: #fff;
  --text: #0b0b0f;
  --text-2: rgb(60 60 67 / .8);
  --text-3: rgb(60 60 67 / .3);
  --trenner: rgb(60 60 67 / .17);
  --fuellung: rgb(118 118 128 / .12);
  --linse-grund: rgb(255 255 255 / .1);      /* Glaslinse der Tableiste */
  --linse-rand: rgb(0 0 0 / .13);
  --linse-kante: rgb(255 255 255 / .95);
  --fuellung-stark: rgb(118 118 128 / .22);
  --gedrueckt: rgb(0 0 0 / .05);
  --segment-aktiv: #fff;

  /* Textfarben so dunkel, dass sie auch auf Glas über dem dunkelsten Fleck des
     Hintergrunds ≥ 4,5:1 erreichen */
  --rot: #ff3b30;    --rot-text: #c4001a;
  --gruen: #34c759;  --gruen-text: #16782f;
  --orange: #ff9500; --orange-text: #a94700;
  --blau: #007aff;   --lila: #af52de; --grau: #8e8e93; --tuerkis: #30b0c7;
  --lila-text: #8a3fc0; --grau-text: #5b5b62; --tuerkis-text: #0b7285;

  /* Glaskarten für Inhalte */
  --karte: linear-gradient(165deg, rgb(255 255 255 / .8), rgb(255 255 255 / .66));
  --karte-rand: rgb(255 255 255 / .8);
  --karte-glanz: rgb(255 255 255 / .95);
  --karte-schatten: 0 14px 34px -22px rgb(24 48 84 / .5), 0 1px 2px rgb(24 48 84 / .06);
  --plaettchen: rgb(255 255 255 / .6);          /* kleine Glasflächen auf Karten */
  --plaettchen-rand: rgb(255 255 255 / .85);

  --glas: rgb(255 255 255 / .62);
  --glas-dicht: rgb(250 250 252 / .8);
  --glas-kante: rgb(0 0 0 / .07);
  /* Lichtkante wie bei klarem Glas: hell oben links, leicht dunkel unten rechts */
  --glas-glanz: inset 0 0 0 1px rgb(255 255 255 / .6), inset 1.5px 2px 1px rgb(255 255 255 / .9),
    inset -1px -1.5px 2px rgb(20 40 70 / .08);
  --glas-schatten: 0 8px 26px -8px rgb(0 0 0 / .18), 0 2px 6px -2px rgb(0 0 0 / .08);
  --glas-filter: blur(18px) saturate(190%) brightness(1.05);
  --glas-schein: linear-gradient(180deg, rgb(255 255 255 / .42), rgb(255 255 255 / 0) 55%);

  /* Tönung der Hinweisbalken (Offline) — auf der Kartenfläche, damit Text ≥ 4,5:1 bleibt */
  --toenung-grau: rgb(118 118 128 / .1);
  --toenung-blau: rgb(0 122 255 / .07);
  --toenung-rot: rgb(255 59 48 / .07);

  --schatten-karte: 0 1px 2px rgb(0 0 0 / .03);
  --r-karte: 26px;
  --r-kachel: 22px;
  --r-blatt: 38px;

  --nav-h: 56px;
  --tab-h: 62px;
  --rand-l: max(16px, env(safe-area-inset-left));
  --rand-r: max(16px, env(safe-area-inset-right));
  --unten: max(10px, calc(env(safe-area-inset-bottom) - 12px));
  --tab-platz: calc(var(--tab-h) + var(--unten) + 28px);

  --kurve: cubic-bezier(.32, .72, 0, 1);
  --feder: cubic-bezier(.34, 1.4, .64, 1);
}

/* Echte Federkurve, wo der Browser sie kann (Safari 17.2+). */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --feder: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 20.1%,
      1.051 23.7%, 1.047 28.3%, 1.015 37.2%, .998 46.7%, 1.001 64.7%, 1);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --akzent: #2672d4;
    --akzent-text: #86bcff;
    --akzent-weich: rgb(58 139 255 / .2);

    --grund: #0a0f15;
    --kopf-grund: #0c131b;
    --flaeche: #1c1c1e;
    --flaeche-2: #2c2c2e;
    --blatt-grund: rgb(28 28 30 / .9);
    --blatt-karte: #2c2c2e;
    --text: #fff;
    --text-2: rgb(235 235 245 / .68);
    --text-3: rgb(235 235 245 / .3);
    --trenner: rgb(84 84 88 / .55);
    --fuellung: rgb(118 118 128 / .24);
    --linse-grund: rgb(255 255 255 / .05);
    --linse-rand: rgb(255 255 255 / .2);
    --linse-kante: rgb(255 255 255 / .35);
    --fuellung-stark: rgb(118 118 128 / .38);
    --gedrueckt: rgb(255 255 255 / .07);
    --segment-aktiv: #5a5a5f;

    --rot: #ff453a;    --rot-text: #ff948c;
    --gruen: #30d158;  --gruen-text: #4fe06a;
    --orange: #ff9f0a; --orange-text: #ffbc55;
    --blau: #0a84ff;   --lila: #bf5af2; --grau: #8e8e93; --tuerkis: #40c8e0;
    --lila-text: #d9a6ff; --grau-text: #c7c7cc; --tuerkis-text: #7fdcec;

    --karte: linear-gradient(165deg, rgb(255 255 255 / .09), rgb(255 255 255 / .06));
    --karte-rand: rgb(255 255 255 / .12);
    --karte-glanz: rgb(255 255 255 / .16);
    --karte-schatten: 0 16px 36px -22px rgb(0 0 0 / .85);
    --plaettchen: rgb(255 255 255 / .08);
    --plaettchen-rand: rgb(255 255 255 / .14);

    --glas: rgb(40 44 52 / .55);
    --glas-dicht: rgb(34 34 38 / .82);
    --glas-kante: rgb(255 255 255 / .1);
    --glas-glanz: inset 0 0 0 1px rgb(255 255 255 / .12), inset 1.5px 2px 1px rgb(255 255 255 / .2),
      inset -1px -1.5px 2px rgb(0 0 0 / .25);
    --glas-schatten: 0 8px 26px -8px rgb(0 0 0 / .6), 0 2px 6px -2px rgb(0 0 0 / .3);
    --glas-filter: blur(18px) saturate(170%) brightness(.92);
    --glas-schein: linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / 0) 55%);

    --toenung-grau: rgb(118 118 128 / .14);
    --toenung-blau: rgb(58 139 255 / .14);
    --toenung-rot: rgb(255 69 58 / .14);

    --schatten-karte: none;
  }
}

/* ---------- Grundlagen ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--kopf-grund);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  font-synthesis: none;
}

/* iPhone und iPad: Schrift folgt der Einstellung „Textgröße" (Dynamic Type). */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; line-height: 1.3; }
}

body { margin: 0; min-height: 100dvh; }

/* Weicher, farbiger Hintergrund wie ein unscharfes Foto (Fensterlicht, Himmel,
   etwas Grün) — gibt dem Glas etwas, das durchscheint. */
body::before {
  /* Oben einfarbig in der Farbe der Statusleiste, darunter erst die Farbflecken. */
  --kopf-verlauf: linear-gradient(180deg, var(--kopf-grund) env(safe-area-inset-top),
    transparent calc(env(safe-area-inset-top) + 120px));
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--kopf-verlauf),
    radial-gradient(62% 38% at 10% 6%, rgb(118 165 222 / .42), transparent 70%),
    radial-gradient(52% 34% at 96% 16%, rgb(146 212 236 / .42), transparent 70%),
    radial-gradient(58% 36% at 90% 70%, rgb(146 198 160 / .34), transparent 72%),
    radial-gradient(62% 40% at 6% 88%, rgb(168 184 226 / .36), transparent 72%),
    linear-gradient(180deg, #dfe7f0, #e8edf2 55%, var(--grund));
}
@media (prefers-color-scheme: dark) {
  body::before {
    background:
      var(--kopf-verlauf),
      radial-gradient(62% 38% at 10% 6%, rgb(38 88 160 / .4), transparent 70%),
      radial-gradient(52% 34% at 96% 16%, rgb(24 112 130 / .34), transparent 70%),
      radial-gradient(58% 36% at 90% 70%, rgb(34 100 70 / .3), transparent 72%),
      radial-gradient(62% 40% at 6% 88%, rgb(72 70 140 / .3), transparent 72%),
      linear-gradient(180deg, #0c131b, #0a0f15 55%, var(--grund));
  }
}

html:has(dialog[open]) { overflow: hidden; }

h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; -webkit-user-select: none; user-select: none; }
:focus-visible { outline: 2.5px solid var(--akzent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

.sym {
  width: 1.35em;
  height: 1.35em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sym .voll { fill: currentColor; stroke: none; }

.unsichtbar {
  position: absolute !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(50%);
}

.haptik {
  position: fixed;
  left: -40px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.t-rot { color: var(--rot-text); }
.t-gruen { color: var(--gruen-text); }
.t-orange { color: var(--orange-text); }
.leise { color: var(--text-2); font-weight: 400 !important; }

/* ---------- Laden ---------- */

.laedt {
  min-height: 100dvh;
  display: grid;
  place-items: center;
}
.laedt::before {
  content: '';
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--fuellung-stark);
  border-top-color: var(--akzent);
  animation: drehen .8s linear infinite;
}
@keyframes drehen { to { transform: rotate(1turn); } }

/* ---------- Glas ---------- */

.glasknopf,
.glasgruppe {
  position: relative;
  background: var(--glas-schein), var(--glas);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  box-shadow: var(--glas-glanz), 0 0 0 .5px var(--glas-kante), var(--glas-schatten);
}

.glasknopf {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  color: var(--text);
  transition: transform .4s var(--feder), background-color .2s, opacity .2s;
}
.glasknopf .sym { width: 22px; height: 22px; stroke-width: 2.1; }
.glasknopf:active { transform: scale(1.12); }
.glasknopf:disabled { opacity: .55; }
.glasknopf.haupt {
  background: var(--akzent);
  color: #fff;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .38), 0 0 0 .5px rgb(0 0 0 / .08), 0 6px 18px -6px var(--akzent);
}
.glasknopf.laeuft .sym { animation: pulsieren .9s ease-in-out infinite; }
@keyframes pulsieren { 50% { opacity: .35; } }

.glasgruppe {
  display: flex;
  border-radius: 999px;
}
.glasgruppe:empty { display: none; }
.glasgruppe .glasknopf {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- Navigationsleiste ---------- */

.navleiste {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) 1fr;
  align-items: center;
  gap: 8px;
  height: calc(env(safe-area-inset-top) + var(--nav-h));
  padding: env(safe-area-inset-top) var(--rand-r) 0 var(--rand-l);
  pointer-events: none;
}
.navleiste button { pointer-events: auto; }

/* Weiche Unschärfe-Kante statt harter Leiste (scroll edge effect). Sie beginnt
   oben in der Farbe, in der iOS die Statusleiste malt — sonst entsteht beim
   Scrollen eine Kante unter der Statusleiste. */
.navleiste::before {
  content: '';
  position: absolute;
  inset: 0 0 -26px;
  z-index: -1;
  background: linear-gradient(to bottom, var(--kopf-grund) env(safe-area-inset-top),
    color-mix(in srgb, var(--kopf-grund) 75%, transparent) calc(env(safe-area-inset-top) + 22px),
    color-mix(in srgb, var(--grund) 40%, transparent) 70%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
  mask-image: linear-gradient(to bottom, #000 62%, transparent);
  opacity: 0;
  transition: opacity .25s;
}
.navleiste.gescrollt::before { opacity: 1; }

.nav-links { justify-self: start; display: flex; gap: 8px; }
.nav-rechts { justify-self: end; display: flex; gap: 8px; }
.nav-titel {
  min-width: 0;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s, transform .3s var(--kurve);
}
.navleiste.kompakt .nav-titel { opacity: 1; transform: none; }

/* ---------- Tableiste ---------- */

.tableiste {
  position: fixed;
  z-index: 30;
  left: var(--rand-l);
  right: var(--rand-r);
  bottom: var(--unten);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* Inhalte laufen unter der Tableiste weich aus, statt hart darunter weiterzulaufen
   (scroll edge effect wie in iOS). */
.tableiste::before {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: calc(var(--tab-h) + var(--unten) + 40px);
  pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--grund) 85%, transparent) 35%,
    color-mix(in srgb, var(--grund) 50%, transparent) 70%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent);
  mask-image: linear-gradient(to top, #000 55%, transparent);
}

.tableiste-innen {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  max-width: 460px;
  height: var(--tab-h);
  padding: 4px;
  border-radius: 999px;
  pointer-events: auto;
  /* Die Linse zieht man mit dem Finger — kein Scrollen, keine Linkvorschau. */
  touch-action: none;
  -webkit-touch-callout: none;
  /* Eigene Grafikebene auf Dauer: Die Leiste wächst mit der Linse (transform). */
  will-change: transform;
}
.tableiste-innen::before,
.tableiste-innen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.tableiste-innen::before {
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  box-shadow: var(--glas-glanz), 0 0 0 .5px var(--glas-kante), var(--glas-schatten);
}
.tableiste-innen::after { background: var(--glas-schein); }

.tab,
.tab-abbild {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 999px;
  color: var(--text);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: color .2s;
}
.tab .sym, .tab-abbild .sym { width: 27px; height: 27px; }
.tab .sym { stroke-width: 1.75; }
.tab-abbild { color: inherit; }
.tab.aktiv { color: var(--akzent-text); }
.tab.aktiv .sym { stroke-width: 2.2; }
.tab-titel { white-space: nowrap; }

/* Tab-Linse wie in iOS 26/27 (tablinse.js): in Ruhe eine graue Markierung hinter
   dem aktiven Tab, beim Antippen oder Ziehen eine abgehobene, klare Glaslinse
   über den Tabs — darin eine vergrößerte, eingefärbte Kopie der Tabs. Markierung
   und Linse sind feste Elemente; neu erzeugte, animierte Elemente blitzten auf
   dem iPhone kurz auf. */
.tab-linse {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--fuellung);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .35);
}
.tab-reihe { display: flex; flex: 1 1 auto; min-width: 0; }

/* Die abgehobene Linse ist klares Glas: kaum Füllung, eine feine Kante mit
   Lichtreflex oben, ein Hauch Schatten. Die Glaswirkung selbst kommt von der
   vergrößerten Kopie darin und der Brechung am Rand (tablinse.js). */
.tab-lupe {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  overflow: hidden;
  visibility: hidden;
  border-radius: 999px;
  pointer-events: none;
  background: var(--linse-grund);
  box-shadow: 0 0 0 .5px var(--linse-rand), 0 5px 14px -6px rgb(0 0 0 / .22);
}
.tab-lupe::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(80% 55% at 50% 0%, rgb(255 255 255 / .16), transparent 70%);
  box-shadow: inset 0 1.5px 1px -.5px var(--linse-kante), inset 0 -1px 1.5px -.5px var(--linse-kante),
    inset 0 0 0 .5px var(--linse-kante), inset 0 0 10px rgb(0 0 0 / .035);
}
/* Reicht rundum 32 px über die Linse hinaus, damit die Brechung am Rand auch
   zeigen kann, was neben der Linse liegt (tablinse.js, SAUM). */
.tab-lupe-glas { position: absolute; left: -32px; top: -32px; filter: url(#tab-brechung); }
.tableiste-innen a { -webkit-user-drag: none; }
.tab-lupe-kopie {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  padding: 4px;
  color: var(--akzent-text);
}
.tab-abbild .sym { stroke-width: 2.2; }

/* ---------- Inhalt ---------- */

#app.ohne-rahmen { min-height: 100dvh; display: flex; flex-direction: column; }

.inhalt {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + var(--nav-h)) var(--rand-r) var(--tab-platz) var(--rand-l);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.seiten-kopf { padding: 0 4px; margin-bottom: -6px; }
.seiten-kopf.mit-rechts { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.seiten-kopf-text { min-width: 0; }

/* iPhone: Die oberste Seite eines Tabs hat keinen Zurück-Knopf. Ihr großer Titel
   steht deshalb gleich unter der Statusleiste statt unter einer leeren Zeile;
   ein Knopf wie „+" steht rechts auf seiner Höhe (wie in iOS 26 bei „Health"). */
@media (max-width: 699px), (max-height: 559px) {
  #app.oberste { --nav-h: 50px; }
  .inhalt.oberste { padding-top: calc(env(safe-area-inset-top) + 6px); }
}

/* Profil neben dem großen Titel — ein klarer Glaskreis mit den Initialen,
   der mit dem Titel wegscrollt statt über dem Inhalt zu schweben. */
.profil-knopf {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(150deg, rgb(255 255 255 / .85), rgb(255 255 255 / .45));
  box-shadow: var(--glas-glanz), var(--karte-schatten);
  color: var(--akzent-text);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .02em;
  transition: transform .4s var(--feder);
}
.profil-knopf:active { transform: scale(.92); }
@media (prefers-color-scheme: dark) {
  .profil-knopf { background: linear-gradient(150deg, rgb(255 255 255 / .16), rgb(255 255 255 / .05)); }
}
.grosstitel {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.15;
}
.untertitel { margin-top: 4px; color: var(--text-2); font-size: .94rem; }

/* ---------- Gruppen und Listen ---------- */

.gruppe { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gruppe-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 6px;
}
.gruppe-titel { font-size: 1.06rem; font-weight: 650; }
.gruppe-aktionen { display: flex; gap: 16px; }
.text-knopf { color: var(--akzent-text); font-size: .9rem; font-weight: 500; padding: 2px 0; }

.fussnote { padding: 0 16px; font-size: .78rem; color: var(--text-2); }
.gruppe > .fussnote { margin-top: -2px; }
.fussnote.mitte { text-align: center; }

.liste {
  background: var(--flaeche);
  border-radius: var(--r-karte);
  box-shadow: var(--schatten-karte);
  overflow: hidden;
}
.liste > * { position: relative; }
/* Trennlinien, eingerückt bis zum Text wie bei iOS */
.liste > :not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--einzug, 16px);
  right: 0;
  height: .5px;
  background: var(--trenner);
  pointer-events: none;
}

.zeile { display: flex; align-items: center; --einzug: 16px; }
.zeile:has(> .avatar) { --einzug: 66px; }
.zeile:has(> .avatar.mittel) { --einzug: 76px; }
.zeile:has(> .haken-knopf) { --einzug: 64px; }
.zeile:has(> .datumsblatt) { --einzug: 72px; }
.zeile:has(> .symbol-kachel) { --einzug: 60px; }
.zeile > :not(.zeile-haupt) { margin-left: 16px; }
.zeile > .haken-knopf { margin-left: 8px; }

.zeile-haupt {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 11px 16px;
  text-align: left;
  transition: background-color .15s;
}
.zeile > :not(.zeile-haupt) + .zeile-haupt { padding-left: 12px; }
.zeile > .haken-knopf + .zeile-haupt { padding-left: 4px; }
button.zeile-haupt:active { background: var(--gedrueckt); }
.zeile.gewaehlt { background: var(--akzent-weich); }
.zeile.gewaehlt .zeile-titel { font-weight: 600; }

.zeile-text { flex: 1; min-width: 0; }
.zeile-titel { overflow-wrap: anywhere; }
.zeile-unter { margin-top: 2px; font-size: .8rem; color: var(--text-2); }
.zeile-wert {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gedimmt .zeile-titel { color: var(--text-2); }
.gedimmt .avatar { filter: grayscale(1); opacity: .6; }
.pfeil { width: 14px; height: 14px; margin-right: -4px; color: var(--text-3); stroke-width: 2.8; }
.wert-haken { width: 22px; height: 22px; color: var(--gruen); stroke-width: 2.6; }

.profil-zeile .zeile-titel { font-size: 1.12rem; font-weight: 600; }
.profil-zeile .zeile-haupt { min-height: 72px; }

.zeilen-knopf {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  color: var(--akzent-text);
  font-weight: 500;
  text-align: left;
  transition: background-color .15s;
}
.zeilen-knopf .sym { width: 21px; height: 21px; stroke-width: 2.2; }
.zeilen-knopf:active { background: var(--gedrueckt); }
.zeilen-knopf:disabled { opacity: .5; }
.zeilen-knopf.gefahr { color: var(--rot-text); }
.zeilen-knopf.haupt-zeile { font-weight: 600; }
.zeilen-knopf.gut { color: var(--gruen-text); }

.liste-hinweis {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  color: var(--text-2);
}
.liste-hinweis .sym { color: var(--gruen); stroke-width: 2.4; }

.notiz-karte {
  padding: 14px 16px;
  border-radius: var(--r-karte);
  background: var(--flaeche);
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Avatare und Symbole ---------- */

.avatar {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--a1), var(--a2));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3), inset 0 1px 1px rgb(255 255 255 / .5);
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .02em;
  line-height: 1;
}
.avatar.klein { width: 34px; height: 34px; font-size: 13px; }
.avatar.mittel { width: 48px; height: 48px; font-size: 18px; }
.avatar.gross { width: 56px; height: 56px; font-size: 21px; }
.avatar.riesig { width: 100px; height: 100px; font-size: 38px; box-shadow: inset 0 2px 2px rgb(255 255 255 / .4), 0 14px 30px -14px var(--a2); }
.farbe-0 { --a1: #6cb2ff; --a2: #2a78de; }
.farbe-1 { --a1: #6fdc86; --a2: #26a64d; }
.farbe-2 { --a1: #ffb760; --a2: #ee7b16; }
.farbe-3 { --a1: #ff8f86; --a2: #df3f38; }
.farbe-4 { --a1: #cc9dff; --a2: #8a4fdf; }
.farbe-5 { --a1: #6ddcd8; --a2: #1ba1ad; }
.farbe-6 { --a1: #ff9fcb; --a2: #dc4b8c; }
.farbe-7 { --a1: #aab4c6; --a2: #68748a; }

/* Klare Glasplättchen: leicht in der Farbe getönt, Lichtkante oben links,
   das Symbol in der kräftigen Farbe. */
.symbol-kachel {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background:
    radial-gradient(120% 90% at 28% 12%, rgb(255 255 255 / .9), rgb(255 255 255 / 0) 58%),
    color-mix(in srgb, var(--k, var(--grau)) 20%, rgb(255 255 255 / .5));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .85),
    inset 1px 1.5px 1px rgb(255 255 255 / .9),
    inset -1px -1.5px 2px color-mix(in srgb, var(--k, var(--grau)) 30%, transparent),
    0 4px 10px -5px color-mix(in srgb, var(--k, var(--grau)) 65%, transparent);
  color: var(--kt, var(--grau-text));
}
.symbol-kachel .sym { width: 18px; height: 18px; stroke-width: 2.1; }
.symbol-kachel.blau { --k: var(--blau); --kt: var(--akzent-text); }
.symbol-kachel.gruen { --k: var(--gruen); --kt: var(--gruen-text); }
.symbol-kachel.orange { --k: var(--orange); --kt: var(--orange-text); }
.symbol-kachel.rot { --k: var(--rot); --kt: var(--rot-text); }
.symbol-kachel.lila { --k: var(--lila); --kt: var(--lila-text); }
.symbol-kachel.grau { --k: var(--grau); --kt: var(--grau-text); }
.symbol-kachel.tuerkis { --k: var(--tuerkis); --kt: var(--tuerkis-text); }
@media (prefers-color-scheme: dark) {
  .symbol-kachel {
    background:
      radial-gradient(120% 90% at 28% 12%, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 58%),
      color-mix(in srgb, var(--k, var(--grau)) 28%, rgb(255 255 255 / .05));
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / .16),
      inset 1px 1.5px 1px rgb(255 255 255 / .26),
      inset -1px -1.5px 2px rgb(0 0 0 / .3),
      0 4px 10px -5px color-mix(in srgb, var(--k, var(--grau)) 55%, transparent);
  }
}

.datumsblatt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  background: var(--plaettchen);
  box-shadow: inset 0 0 0 1px var(--plaettchen-rand);
  line-height: 1;
}
.datumsblatt-monat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rot);
}
.datumsblatt-tag { margin-top: 3px; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.zeile.gewaehlt .datumsblatt { background: var(--flaeche); }

/* ---------- Abhaken ---------- */

.haken-knopf {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
}
.haken-knopf:disabled { opacity: 1; }
.haken-knopf.nur-anzeige { cursor: default; }
.haken-knopf.gemeldet .haken-kreis { border-color: var(--akzent); color: var(--akzent-text); }
.haken-knopf.gemeldet .haken-kreis .sym { stroke-width: 2.4; }
.haken-kreis {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--text-3);
  color: transparent;
  transition: background-color .2s, border-color .2s, transform .45s var(--feder);
}
.haken-kreis .sym { width: 16px; height: 16px; stroke-width: 3.2; }
.haken-knopf.an .haken-kreis { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.haken-knopf:active .haken-kreis { transform: scale(.82); }
.haken-knopf.frisch.an .haken-kreis { animation: plopp .45s var(--feder); }
@keyframes plopp { 0% { transform: scale(.6); } }

/* ---------- Kacheln ---------- */

.kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.kacheln.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.kachel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 14px;
  border-radius: var(--r-kachel);
  background: var(--flaeche);
  box-shadow: var(--schatten-karte);
  text-align: left;
  transition: transform .4s var(--feder);
}
button.kachel:active { transform: scale(.96); }
.kachel-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}
.kachel-pfeil { width: 14px; height: 14px; color: var(--text-3); stroke-width: 2.8; }
.kachel-wert {
  max-width: 100%;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kachel-titel { margin-top: 1px; font-size: .8rem; font-weight: 500; color: var(--text-2); }
.kachel-unter { font-size: .72rem; color: var(--text-2); }
.kacheln.drei .kachel { padding: 12px; }
.kacheln.drei .kachel-kopf { margin-bottom: 8px; }
.kacheln.drei .kachel-wert { font-size: 1.06rem; }
.kacheln.drei .symbol-kachel { width: 28px; height: 28px; }
.kacheln.drei .symbol-kachel .sym { width: 16px; height: 16px; }

/* ---------- Übersicht ---------- */

.uebersicht-kopf { display: flex; flex-direction: column; gap: 12px; }
.uebersicht-seite { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.uebersicht-seite:empty { display: none; }

/* Kassenstand unter „Mein Stand": eine Zeile, der Betrag etwas größer */
.kassen-zeile .zeile-titel { font-weight: 600; }
.kassen-zeile .zeile-wert { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }

.held {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 20px 22px 22px;
  border-radius: 30px;
  color: #fff;
  background: linear-gradient(150deg, #2874d8 0%, #1f6fd1 46%, #144a98 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), inset 1.5px 2px 1px rgb(255 255 255 / .45),
    0 22px 44px -24px rgb(31 111 209 / .95);
}
.held::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 80% at 104% -18%, rgb(255 255 255 / .38), transparent 60%),
    radial-gradient(70% 70% at 108% 118%, rgb(130 205 255 / .45), transparent 60%);
}
.held.negativ {
  background: linear-gradient(150deg, #d8382e 0%, #cf2c22 48%, #a3211a 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), inset 1.5px 2px 1px rgb(255 255 255 / .45),
    0 22px 44px -24px rgb(229 55 44 / .95);
}
.held.negativ::before {
  background:
    radial-gradient(70% 80% at 104% -18%, rgb(255 255 255 / .34), transparent 60%),
    radial-gradient(70% 70% at 108% 118%, rgb(255 190 140 / .45), transparent 60%);
}
.held-titel { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; }
.held-titel .sym { width: 21px; height: 21px; }
.held-wert {
  margin: 12px 0 8px;
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.held-unter { font-size: .8rem; }
.held-unter + .held-unter { margin-top: 4px; }

/* „Mein Stand": dieselbe Karte, Farbe nach Zustand — offen (blau), gemeldet
   (indigo, wartet auf Bestätigung), alles bezahlt (grün). */
.held-klick { display: block; width: 100%; text-align: left; color: inherit; }
.held.mein-stand.gemeldet {
  background: linear-gradient(150deg, #4b44c4 0%, #433bb8 48%, #2f2890 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), inset 1.5px 2px 1px rgb(255 255 255 / .45),
    0 22px 44px -24px rgb(75 68 196 / .95);
}
.held.mein-stand.gut {
  background: linear-gradient(150deg, #16804a 0%, #128043 48%, #0c5c30 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22), inset 1.5px 2px 1px rgb(255 255 255 / .45),
    0 22px 44px -24px rgb(22 128 74 / .95);
}
.held-hinweis {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgb(0 0 0 / .2);
  font-size: .8rem;
}
.held-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.held-knopf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgb(0 0 0 / .18);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3), inset 1px 1.5px 1px rgb(255 255 255 / .25);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  transition: transform .4s var(--feder);
}
.held-knopf .sym { width: 19px; height: 19px; stroke-width: 2.2; }
.held-knopf:active { transform: scale(.95); }
.held-knopf.haupt {
  background: #fff;
  box-shadow: 0 6px 16px -8px rgb(0 0 0 / .45);
  color: #1f6fd1;
}

.heute {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 18px;
  border-radius: var(--r-karte);
  background: var(--flaeche);
  box-shadow: var(--schatten-karte);
}
.heute-text { flex: 1; min-width: 0; text-align: left; padding: 4px 0; }
.heute-titel { font-weight: 600; }
.heute-unter { margin-top: 2px; font-size: .8rem; color: var(--text-2); }
.heute.laeuft .heute-titel::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 8px 1px 0;
  border-radius: 50%;
  background: var(--gruen);
  box-shadow: 0 0 0 3px rgb(52 199 89 / .25);
  vertical-align: middle;
}

.schnellaktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--fuellung);
  color: var(--akzent-text);
  font-weight: 600;
  text-align: center;
  transition: transform .4s var(--feder), filter .2s, background-color .2s, opacity .2s;
}
.knopf .sym { width: 20px; height: 20px; stroke-width: 2.1; }
.knopf:active { transform: scale(.95); }
.knopf:disabled { opacity: .5; }
.knopf.haupt {
  background: var(--akzent);
  color: #fff;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .32), 0 8px 20px -10px var(--akzent);
}
.knopf.gefahr-voll {
  background: var(--rot);
  color: #fff;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .3);
}
.knopf.gross { min-height: 54px; }
.knopf.breit { width: 100%; }
.knopf.schlicht { background: none; }
.schnellaktionen .knopf { background: var(--flaeche); box-shadow: var(--schatten-karte); }

/* ---------- Leerzustand ---------- */

.leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 44px 24px;
  text-align: center;
}
.leer-symbol {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--akzent-weich);
  color: var(--akzent);
}
.leer-symbol .sym { width: 38px; height: 38px; stroke-width: 1.7; }
.leer-titel { font-size: 1.2rem; font-weight: 700; }
.leer-text { max-width: 320px; margin-bottom: 14px; color: var(--text-2); }

/* ---------- Mitglied ---------- */

.profil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.profil-name { margin-top: 12px; font-size: 1.75rem; font-weight: 700; overflow-wrap: anywhere; }
.profil-unter { color: var(--text-2); font-size: .9rem; overflow-wrap: anywhere; }
.merker {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--fuellung);
  color: var(--text-2);
  font-size: .75rem;
  font-weight: 600;
}

.detail-raster, .detail-spalte { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* ---------- Statistik ---------- */

.segmente {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--fuellung);
}
.segment {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 6px 6px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .25s, box-shadow .25s;
}
.segment.aktiv {
  background: var(--segment-aktiv);
  font-weight: 600;
  box-shadow: 0 3px 8px rgb(0 0 0 / .12), 0 0 0 .5px rgb(0 0 0 / .04);
}

.diagramm { padding: 8px 0; }
.balken-zeile {
  display: grid;
  grid-template-columns: minmax(60px, 6.5em) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
}
.liste.diagramm > :not(:first-child)::before { display: none; }
.balken-name { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balken-spur { height: 10px; border-radius: 999px; background: var(--fuellung); overflow: hidden; }
.balken { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--akzent), #5ab2ff); }
.balken-wert { min-width: 4.8em; font-size: .8rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.rang-zeile { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; --einzug: 56px; }
.rang {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--fuellung);
  font-size: .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rang-1 { background: linear-gradient(180deg, #ffe07a, #f2b300); color: #5a3d00; }
.rang-2 { background: linear-gradient(180deg, #eef1f5, #b4bdc8); color: #2f3640; }
.rang-3 { background: linear-gradient(180deg, #f5c197, #c97a40); color: #4a2600; }
.rang-text { flex: 1; min-width: 0; }
.rang-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rang-name { font-weight: 600; overflow-wrap: anywhere; }
.rang-wert { font-weight: 700; color: var(--akzent-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rang-details { margin-top: 3px; font-size: .75rem; color: var(--text-2); }

/* ---------- Anmeldung ---------- */

.anmelde-seite {
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: calc(env(safe-area-inset-top) + 32px) var(--rand-r) calc(env(safe-area-inset-bottom) + 32px) var(--rand-l);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.anmelde-logo {
  width: 112px;
  height: 112px;
  border-radius: 26px;
  background: #fff;
  object-fit: cover;
  box-shadow: 0 20px 40px -18px rgb(31 111 209 / .6), 0 0 0 .5px rgb(0 0 0 / .06);
}
.anmelde-titel { margin: 22px 0 6px; font-size: 1.9rem; font-weight: 800; letter-spacing: -.01em; }
.anmelde-unter { margin-bottom: 26px; color: var(--text-2); }
.anmelde-karte { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.anmelde-feld {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 18px;
  border-radius: 20px;
  background: var(--flaeche);
  box-shadow: var(--schatten-karte), 0 0 0 .5px var(--trenner);
  color: var(--text-2);
  transition: box-shadow .2s;
}
.anmelde-feld:focus-within { box-shadow: 0 0 0 2px var(--akzent); }
.anmelde-feld input {
  flex: 1;
  min-width: 0;
  padding: 14px 0;
  border: 0;
  background: none;
  outline: none;
  color: var(--text);
  font-size: max(16px, 1rem);
}
.anmelde-feld input::placeholder { color: var(--text-3); }
.anmelde-fehler { min-height: 1.2em; color: var(--rot-text); font-size: .88rem; font-weight: 500; }
.anmelde-fehler:empty { min-height: 0; margin-top: -12px; }


/* ---------- Meldungen ---------- */

.meldungen {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: calc(var(--tab-platz) - 14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 var(--rand-r) 0 var(--rand-l);
  pointer-events: none;
}
.meldung {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 480px;
  min-height: 48px;
  padding: 8px 18px 8px 16px;
  border-radius: 999px;
  background: var(--glas-dicht);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  box-shadow: var(--glas-glanz), 0 0 0 .5px var(--glas-kante), var(--glas-schatten);
  font-size: .9rem;
  font-weight: 500;
  pointer-events: auto;
  animation: meldung-rein .55s var(--feder);
}
.meldung:has(.meldung-aktion) { padding-right: 8px; }
.meldung-symbol { width: 20px; height: 20px; stroke-width: 2.4; }
.meldung.gut .meldung-symbol { color: var(--gruen); }
.meldung.warn .meldung-symbol { color: var(--orange); }
.meldung.fehler .meldung-symbol { color: var(--rot); }
.meldung-aktion {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--akzent-weich);
  color: var(--akzent-text);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}
.meldung.weg { opacity: 0; transform: translateY(10px) scale(.95); transition: opacity .3s, transform .3s; }
@keyframes meldung-rein { from { opacity: 0; transform: translateY(18px) scale(.9); } }

/* ---------- Dialoge ---------- */

dialog {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
}
dialog:focus { outline: none; }
dialog::backdrop { background: rgb(0 0 0 / .28); }
dialog[open]::backdrop { animation: abdunkeln .3s ease both; }
dialog.geht::backdrop { animation: aufhellen .23s ease forwards; }
@keyframes abdunkeln { from { opacity: 0; } }
@keyframes aufhellen { to { opacity: 0; } }

/* Blatt (Sheet): auf dem iPhone von unten, auf dem iPad mittig */
dialog.blatt {
  position: fixed;
  inset: auto 8px calc(var(--tastatur, 0px) + 8px) 8px;
  margin: 0;
  width: auto;
  max-height: calc(var(--vv-hoehe, 100dvh) - env(safe-area-inset-top) - 20px);
  border-radius: var(--r-blatt);
  background: var(--blatt-grund);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--glas-glanz), 0 0 0 .5px var(--glas-kante), 0 -8px 50px -12px rgb(0 0 0 / .3);
  overflow: hidden;
  transition: translate .4s var(--kurve);
}
dialog.blatt[open] { display: flex; flex-direction: column; animation: blatt-rein .5s var(--kurve); }
dialog.blatt.zieht { transition: none; }
dialog.blatt.geht { animation: blatt-raus .23s ease-in forwards; }
@keyframes blatt-rein { from { transform: translateY(105%); } }
@keyframes blatt-raus { to { transform: translateY(105%); } }

.blatt-kopf {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  padding: 16px 14px 8px;
  touch-action: none;
}
.blatt-griff {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 36px;
  height: 5px;
  margin-left: -18px;
  border-radius: 3px;
  background: var(--text-3);
}
.blatt-titel {
  font-size: 1.06rem;
  font-weight: 650;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blatt-koerper {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Im Blatt liegen die Karten eine Ebene höher (im Dunkeln heller). */
dialog.blatt .liste { background: var(--blatt-karte); box-shadow: none; }

.blatt-fehler {
  padding: 11px 14px;
  border-radius: 16px;
  background: rgb(255 59 48 / .12);
  color: var(--rot-text);
  font-size: .9rem;
  font-weight: 500;
}
.blatt-fehler:empty { display: none; }

/* Formularzeilen */
.formzeile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 3px 16px;
}
.formzeile-label { flex: none; width: 7.4em; }
.formzeile.schalter { justify-content: space-between; padding-block: 9px; }
.formzeile.schalter .formzeile-label { flex: 1; width: auto; }
.formzeile.voll { padding: 0 16px; }

.feld-text {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-radius: 0;
  background: none;
  outline: none;
  color: var(--text);
  font-size: max(16px, 1rem);
  -webkit-appearance: none;
  appearance: none;
}
.feld-text::placeholder { color: var(--text-3); }

.geld-feld { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.geld-feld .feld-text { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.geld-einheit { color: var(--text-2); font-weight: 600; }

.formzeile.datum .feld-text { min-height: 2.6em; text-align: right; color: var(--akzent-text); }
.formzeile.datum ::-webkit-date-and-time-value { text-align: right; }

.formzeile.auswahl select.feld-text {
  flex: 0 1 auto;
  width: auto;
  margin-left: auto;
  text-align: right;
  text-overflow: ellipsis;
  color: var(--text-2);
  cursor: pointer;
}
.auswahl-pfeil { width: 16px; height: 16px; margin-left: -6px; color: var(--text-3); stroke-width: 2.4; }

.mehrzeilig {
  min-height: 5.4em;
  max-height: 14em;
  padding: 13px 0;
  resize: none;
  line-height: 1.35;
  field-sizing: content;
}

input.schalter { flex: none; margin: 0; accent-color: var(--gruen); }
/* Nachgebauter Schalter für Browser ohne <input switch> */
input.schalter.eigener {
  position: relative;
  width: 51px;
  height: 31px;
  border-radius: 999px;
  background: var(--fuellung-stark);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .25s;
}
input.schalter.eigener::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgb(0 0 0 / .15), 0 1px 1px rgb(0 0 0 / .16);
  transition: transform .35s var(--feder);
}
input.schalter.eigener:checked { background: var(--gruen); }
input.schalter.eigener:checked::before { transform: translateX(20px); }

/* Auswahl-Chips (Strafe, Verlierer, Mitspieler) */
.chips-karte { padding: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 40px;
  padding: 8px 15px;
  border-radius: 999px;
  background: var(--fuellung);
  color: var(--text);
  font-size: .94rem;
  font-weight: 500;
  transition: background-color .2s, color .2s, transform .35s var(--feder), box-shadow .2s;
}
.chip:active { transform: scale(.93); }
.chip[aria-pressed="true"] {
  background: var(--akzent);
  color: #fff;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .32), 0 4px 12px -6px var(--akzent);
}
.chips.verlierer .chip[aria-pressed="true"] {
  background: var(--rot);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .32), 0 4px 12px -6px var(--rot);
}
.chips-leer { padding: 6px 4px; color: var(--text-2); font-size: .9rem; }

.wackeln { animation: wackeln .42s ease; }
@keyframes wackeln {
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}

/* Warnung (Alert) */
dialog.alarm {
  width: min(320px, calc(100vw - 48px));
  margin: auto;
  padding: 22px 18px 16px;
  border-radius: 32px;
  background: var(--glas-dicht);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--glas-glanz), 0 0 0 .5px var(--glas-kante), 0 24px 60px -12px rgb(0 0 0 / .35);
  text-align: center;
}
dialog.alarm[open] { animation: alarm-rein .45s var(--feder); }
dialog.alarm.geht { animation: alarm-raus .18s ease-in forwards; }
@keyframes alarm-rein { from { opacity: 0; transform: scale(1.14); } }
@keyframes alarm-raus { to { opacity: 0; transform: scale(.94); } }
.alarm-titel { margin-bottom: 6px; font-size: 1.06rem; font-weight: 700; }
.alarm-text { margin-bottom: 18px; color: var(--text-2); font-size: .88rem; white-space: pre-line; }
.alarm-knoepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.alarm-knoepfe .knopf { min-height: 48px; padding: 10px 12px; color: var(--text); }
.alarm-knoepfe .knopf.haupt,
.alarm-knoepfe .knopf.gefahr-voll { color: #fff; }

/* Menü */
dialog.menue {
  position: fixed;
  inset: auto;
  margin: 0;
  min-width: 240px;
  max-width: calc(100vw - 24px);
  border-radius: 26px;
  background: var(--glas-dicht);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--glas-glanz), 0 0 0 .5px var(--glas-kante), 0 18px 50px -12px rgb(0 0 0 / .3);
}
dialog.menue::backdrop { background: transparent; }
dialog.menue[open] { animation: menue-rein .4s var(--feder); }
dialog.menue.geht { animation: menue-raus .16s ease-in forwards; }
@keyframes menue-rein { from { opacity: 0; transform: scale(.55); } }
@keyframes menue-raus { to { opacity: 0; transform: scale(.9); } }
.menue-inhalt { padding: 6px; }
.menue-eintrag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 18px;
  text-align: left;
  transition: background-color .15s;
}
.menue-eintrag:active { background: var(--gedrueckt); }
.menue-eintrag .sym { width: 20px; height: 20px; }
.menue-eintrag.gefahr { color: var(--rot-text); }

/* ---------- Konto, Testmodus und Adminbereich ---------- */

/* Anmeldung und Passwortwechsel: Felder als gruppierte Karte wie in den iOS-Einstellungen */
.anmelde-felder {
  width: 100%;
  border-radius: 20px;
  background: var(--flaeche);
  box-shadow: var(--schatten-karte), 0 0 0 .5px var(--trenner);
  overflow: hidden;
  transition: box-shadow .2s;
}
.anmelde-felder:focus-within { box-shadow: 0 0 0 2px var(--akzent); }
.anmelde-felder .anmelde-feld,
.anmelde-felder .anmelde-feld:focus-within { border-radius: 0; background: none; box-shadow: none; }
.anmelde-felder .anmelde-feld + .anmelde-feld { box-shadow: inset 0 .5px 0 var(--trenner); }
.anmelde-feld .sym { width: 21px; height: 21px; }
.anmelde-avatar { margin-bottom: 2px; }

.testbanner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: 20px;
  background: linear-gradient(rgb(255 149 0 / .13), rgb(255 149 0 / .13)), var(--flaeche);
  box-shadow: inset 0 0 0 1px rgb(255 149 0 / .38);
  color: var(--orange-text);
}
.testbanner > .sym { width: 24px; height: 24px; }
.testbanner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .82rem; }
.testbanner-text strong { font-size: .95rem; }
.testbanner-text span { color: var(--text-2); }
.testbanner-knopf {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgb(255 149 0 / .2);
  font-size: .85rem;
  font-weight: 600;
}

/* Offline-Betrieb: keine Verbindung, wartende und abgelehnte Einträge */
.statusbanner {
  --toenung: var(--toenung-grau);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: 20px;
  background: linear-gradient(var(--toenung), var(--toenung)), var(--flaeche);
  box-shadow: var(--schatten-karte);
  color: var(--text);
}
.statusbanner > .sym { flex: none; width: 24px; height: 24px; color: var(--text-2); }
.statusbanner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .82rem; }
.statusbanner-text strong { font-size: .95rem; }
.statusbanner-text span { color: var(--text-2); }
.statusbanner-knopf {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--flaeche);
  box-shadow: 0 0 0 .5px var(--trenner), 0 1px 3px rgb(0 0 0 / .08);
  color: var(--akzent-text);
  font-size: .85rem;
  font-weight: 600;
}
.statusbanner.wartet { --toenung: var(--toenung-blau); box-shadow: inset 0 0 0 1px rgb(0 122 255 / .28); }
.statusbanner.wartet > .sym, .statusbanner.wartet strong { color: var(--akzent-text); }
.statusbanner.abgelehnt { --toenung: var(--toenung-rot); box-shadow: inset 0 0 0 1px rgb(255 59 48 / .32); }
.statusbanner.abgelehnt > .sym, .statusbanner.abgelehnt strong { color: var(--rot-text); }

.anmelde-wartet { margin: -12px 0 20px; color: var(--akzent-text); font-size: .88rem; font-weight: 500; }

.meldung.offline .meldung-symbol { color: var(--akzent-text); }

/* Noch nicht übertragen: Punkt hinter dem Titel, wie ungelesene Mails */
.zeile.ausstehend .zeile-titel::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--akzent);
  vertical-align: .1em;
}

.laedt.klein { min-height: 240px; }

.modus-karte {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border-radius: var(--r-karte);
  background: var(--flaeche);
  box-shadow: var(--schatten-karte);
}
.modus-karte.test { box-shadow: inset 0 0 0 1.5px rgb(255 149 0 / .55); }
.modus-kopf { display: flex; align-items: center; gap: 12px; }
.modus-titel { font-weight: 650; }
.modus-unter { font-size: .8rem; color: var(--text-2); }

/* Speicher des App-Ordners: ein Balken, aufgeteilt nach Daten, Sicherungen, Programm, Git */
.app-speicher { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 14px; }
.app-speicher-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .92rem; }
.app-speicher-kopf strong { font-variant-numeric: tabular-nums; }
.speicher-balken { display: flex; gap: 2px; height: 10px; border-radius: 999px; overflow: hidden; background: var(--fuellung); }
.speicher-teil { flex-basis: 0; min-width: 5px; }
.speicher-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--text-2); }
.speicher-eintrag { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.speicher-teil.blau, .punkt.blau { background: var(--blau); }
.speicher-teil.gruen, .punkt.gruen { background: var(--gruen); }
.speicher-teil.grau, .punkt.grau { background: var(--grau); }
.speicher-teil.lila, .punkt.lila { background: var(--lila); }

.text-knopf.gefahr { color: var(--rot-text); }
.wert-uhr { width: 20px; height: 20px; color: var(--orange); stroke-width: 2.2; }

/* ---------- Zahlungen, Einladungen, Face ID ---------- */

.zeile-wert.zaehler {
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--rot);
  color: #fff;
  font-size: .8rem;
  text-align: center;
}
.zeilen-aktionen { display: flex; gap: 8px; }
.glasknopf.klein { width: 36px; height: 36px; }
.glasknopf.klein .sym { width: 18px; height: 18px; }

.blatt .fussnote { white-space: pre-line; }
.blatt-platz { width: 44px; }

.einladung-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 18px;
  border-radius: var(--r-karte);
  background: var(--blatt-karte);
  text-align: center;
}
/* QR-Code immer schwarz auf weiß — auch im Dunkelmodus, sonst liest ihn nicht jede Kamera. */
.qr {
  display: block;
  width: min(240px, 64vw);
  height: auto;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 10px 26px -14px rgb(0 0 0 / .45);
}
.einladung-text { color: var(--text-2); font-size: .9rem; }
.einladung-link {
  max-width: 100%;
  font-size: .75rem;
  color: var(--text-2);
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}
.einladung-knoepfe { display: flex; gap: 10px; }

.anmelde-oder { margin: 14px 0; color: var(--text-2); font-size: .85rem; text-align: center; }
.knopf.face-id { background: var(--karte); box-shadow: inset 0 0 0 1px var(--karte-rand), var(--karte-schatten); }
.knopf.face-id.haupt { background: var(--akzent); color: #fff; }
.knopf.face-id .sym { width: 24px; height: 24px; }
.anmelde-seite > .knopf + .knopf { margin-top: 12px; }

/* ---------- Glaskarten ---------- */

.liste, .kachel, .heute, .notiz-karte, .schnellaktionen .knopf, .anmelde-felder, .modus-karte {
  background: var(--karte);
  box-shadow: inset 0 0 0 1px var(--karte-rand), inset 0 1px 0 var(--karte-glanz), var(--karte-schatten);
}
/* In Blättern bleiben Formulare auf festen Flächen (dialog.blatt .liste, siehe oben). */

/* ---------- Mauszeiger (iPad mit Trackpad, Mac) ---------- */

@media (hover: hover) and (pointer: fine) {
  button.zeile-haupt:hover,
  .zeilen-knopf:hover,
  .menue-eintrag:hover { background: var(--gedrueckt); }
  button.kachel:hover { filter: brightness(.98); }
  .glasknopf:hover { filter: brightness(1.05); }
  .chip:hover:not([aria-pressed="true"]) { background: var(--fuellung-stark); }
}

/* ---------- iPad (und breite Fenster) ---------- */

@media (min-width: 700px) and (min-height: 560px) {
  :root { --nav-h: 64px; }

  /* Tableiste wandert wie in iPadOS nach oben in die Mitte. */
  .tableiste {
    top: calc(env(safe-area-inset-top) + 8px);
    bottom: auto;
  }
  .tableiste-innen { width: auto; max-width: none; height: 48px; }
  .tableiste::before { display: none; }
  .tab, .tab-abbild { flex: none; flex-direction: row; gap: 7px; padding: 0 14px; font-size: 14px; }
  .tab .sym, .tab-abbild .sym { width: 21px; height: 21px; }

  .nav-titel { visibility: hidden; }

  .inhalt {
    max-width: 1080px;
    padding-top: calc(env(safe-area-inset-top) + var(--nav-h) + 14px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 40px);
    gap: 26px;
  }
  .grosstitel { font-size: 2.2rem; }

  .uebersicht-kopf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
  }
  .held { display: flex; flex-direction: column; justify-content: center; padding: 26px 28px; }
  .held-wert { font-size: 3.4rem; }
  .schnellaktionen { max-width: 520px; }

  .kacheln.drei { gap: 14px; }
  .kacheln.drei .kachel { padding: 14px 16px; }
  .kacheln.drei .kachel-wert { font-size: 1.3rem; }
  .inhalt > .kacheln:not(.drei), .spalte-detail > .kacheln:not(.drei) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .uebersicht-kopf .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .detail-raster {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
  }

  .meldungen { bottom: calc(env(safe-area-inset-bottom) + 24px); }

  dialog.blatt {
    inset: 0 0 var(--tastatur, 0px) 0;
    margin: auto;
    width: min(580px, calc(100vw - 48px));
    height: fit-content;
    max-height: min(860px, calc(var(--vv-hoehe, 100dvh) - 48px));
    box-shadow: var(--glas-glanz), 0 0 0 .5px var(--glas-kante), 0 30px 80px -20px rgb(0 0 0 / .4);
  }
  dialog.blatt[open] { animation: blatt-auf .45s var(--kurve); }
  dialog.blatt.geht { animation: blatt-zu .2s ease-in forwards; }
  .blatt-griff { display: none; }
  .blatt-kopf { padding-top: 14px; }
  .blatt-koerper { padding-bottom: 22px; }
  @keyframes blatt-auf { from { opacity: 0; transform: translateY(36px) scale(.97); } }
  @keyframes blatt-zu { to { opacity: 0; transform: scale(.97); } }
}

@media (min-width: 700px) and (max-width: 860px) and (min-height: 560px) {
  .tab, .tab-abbild { padding: 0 11px; font-size: 13px; gap: 6px; }
}

/* iPad quer: Liste und Detail nebeneinander */
@media (min-width: 1000px) and (min-height: 560px) {
  .inhalt.geteilt {
    max-width: 1320px;
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
  }
  .spalte-liste {
    position: sticky;
    top: calc(env(safe-area-inset-top) + var(--nav-h) + 14px);
    max-height: calc(100dvh - env(safe-area-inset-top) - var(--nav-h) - 28px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 2px 2px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .spalte-liste::-webkit-scrollbar { display: none; }
  .spalte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
  .spalte-titel { font-size: 1.7rem; font-weight: 700; }
  .spalte-liste .fussnote { padding-bottom: 8px; }
  .spalte-detail { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
}

/* ---------- Seitenwechsel und Wischgeste ---------- */

/* Beim Wechsel liegt die flachere Seite als feste Ebene unter der tieferen und
   ist nur links von deren Kante zu sehen (app.js, ebenenAufbauen). Bewegt wird
   nur per transform — das übernimmt der Grafikchip. */
.seiten-ebene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}
/* Nur bewegte Seiten bekommen eine eigene Grafikebene — und behalten sie, bis sie
   ersetzt werden (war-bewegt): Eine Ebene wieder aufzulösen, kann auf dem iPhone
   aufblitzen, ebenso jede Seite als neue Ebene anzulegen (3.2.0). */
.seiten-ebene > .inhalt,
.inhalt.bewegt,
.inhalt.war-bewegt { will-change: transform; }
.inhalt.bewegt { position: relative; z-index: 1; }
/* Schatten der oberen Seite auf die untere */
.inhalt.bewegt::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 18px;
  pointer-events: none;
  background: linear-gradient(to left, rgb(0 0 0 / .08), transparent);
}
@media (prefers-color-scheme: dark) {
  .inhalt.bewegt::before { background: linear-gradient(to left, rgb(0 0 0 / .35), transparent); }
}

/* Schmaler Streifen am linken Rand der Unterseiten: Hier beginnt die
   Wischgeste zurück; er hält die eingebaute Geste von iOS auf. */
.rand-zone {
  position: fixed;
  z-index: 25;
  top: 0;
  bottom: 0;
  left: 0;
  width: 16px;
  touch-action: none;
}

/* ---------- Bedienungshilfen ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* „Transparenz reduzieren": Glas wird zu festen Flächen. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glas: var(--flaeche);
    --glas-dicht: var(--flaeche);
    --blatt-grund: var(--grund);
    --karte: var(--flaeche);
    --plaettchen: var(--flaeche-2);
  }
  body::before { display: none; }
  .tab-lupe { background: var(--flaeche); }
  .tab-lupe-glas { filter: none; }
}

@media (prefers-contrast: more) {
  :root {
    --trenner: rgb(60 60 67 / .45);
    --text-2: rgb(60 60 67 / .88);
    --glas-kante: rgb(0 0 0 / .35);
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --trenner: rgb(84 84 88 / .9);
    --text-2: rgb(235 235 245 / .85);
    --glas-kante: rgb(255 255 255 / .4);
  }
}