/**
 * Basis-Styles + wiederverwendbare Komponenten-Klassen.
 * Setzt css/tokens.css voraus (muss davor geladen werden).
 *
 * Mobile-first; ab größeren Viewports wird der Inhalt auf
 * --inhalt-max-breite zentriert.
 *
 * Materialkonzept: die Papier-Palette der nativen App bleibt die Basis,
 * Flächen liegen als dezente Glasscheiben darüber (Transluzenz + Blur +
 * Lichtkante oben + weicher Schatten). Wer Glas ergänzt, nutzt die
 * .glas-Klasse bzw. die --glas-*-Tokens, nie eigene rgba-Werte.
 */

/* ---------- Reset ---------- */

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

html,
body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* ---------- Icons (js/icons.js) ---------- */

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ---------- Grundlayout ---------- */

html {
  height: 100vh; /* Fallback für ältere Browser ohne dvh-Unterstützung */
  height: 100dvh;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  height: 100%;
  margin: 0;
  font-family: var(--font-stack);
  font-size: 16px;
  line-height: 1.45;
  color: var(--farbe-text-primaer);
  background: var(--farbe-hintergrund);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  overflow: hidden;
}

/*
 * Farbige Wäsche hinter dem Inhalt. Ohne sie hätte der Blur der Glasflächen
 * nichts aufzunehmen und das Material sähe aus wie flaches Grau.
 * Fixiert, damit die Scheiben beim Scrollen wandern statt mitzukleben.
 * Drei Ebenen (kühl/kühl/warm) statt zwei, und die Position koppelt sich
 * sanft an den aktiven Screen — siehe [data-screen] weiter unten.
 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90ch 60ch at var(--wasch-x1, 12%) -10%, var(--wasch-privat), transparent 60%),
    radial-gradient(80ch 55ch at var(--wasch-x2, 105%) 15%, var(--wasch-geschaeftlich), transparent 62%),
    radial-gradient(70ch 50ch at var(--wasch-x3, 50%) 105%, var(--wasch-warm), transparent 65%),
    var(--farbe-hintergrund);
  transition: background-position 0.6s ease;
}

/* Positionsvarianten der Wäsche je Screen — dezentes Mitwandern beim Tab-Wechsel. */
html[data-screen="liste"] body::before { --wasch-x1: 20%; --wasch-x2: 95%; --wasch-x3: 45%; }
html[data-screen="auswertung"] body::before { --wasch-x1: 6%; --wasch-x2: 88%; --wasch-x3: 55%; }
html[data-screen="export"] body::before { --wasch-x1: 16%; --wasch-x2: 108%; --wasch-x3: 40%; }

/* App-Gerüst: fester Kopf (Nav-Bar), scrollender Inhalt, fester Fuß (Tab-Bar). */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

/* Scrollbarer Screen-Bereich zwischen Nav-Bar und Tab-Bar. */
#app {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: var(--inhalt-max-breite);
  margin: 0 auto;
  padding: var(--abstand-l) var(--abstand-l) var(--abstand-xl);
}

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

/*
 * Eine Glasscheibe. Reihenfolge der Schatten ist bewusst:
 * inset-Lichtkante oben zuerst, dann Kontaktschatten, dann Streuschatten.
 */
.glas {
  background: var(--glas-fuellung);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  border: var(--rahmen-breite) solid var(--glas-rand);
  box-shadow:
    inset 0 var(--rahmen-breite) 0 var(--glas-lichtkante),
    var(--glas-schatten);
}

/* ---------- Nav-Bar ---------- */

/*
 * Fester Kopf der App-Shell. Glas-Material wie die Tab-Bar, damit beide
 * Enden des Gerüsts als ein Material lesbar werden.
 */
.nav-bar {
  flex: none;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  height: calc(44px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--abstand-m) 0;

  background: var(--glas-fuellung-stark);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  border-bottom: var(--rahmen-breite) solid transparent;
  box-shadow: inset 0 var(--rahmen-breite) 0 var(--glas-lichtkante);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Trennkante beim Scrollen des Inhalts (Phase 2: IntersectionObserver setzt
   diese Klasse, sobald #app vom Seitenanfang weggescrollt ist). */
.nav-bar--gescrollt {
  border-bottom-color: var(--glas-rand);
  box-shadow: inset 0 var(--rahmen-breite) 0 var(--glas-lichtkante), var(--glas-kante-unten) 0 1px 0;
}

.nav-zurueck {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: -6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--farbe-text-primaer);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-zurueck svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-zurueck:active {
  opacity: 0.6;
}

.nav-zurueck[hidden] {
  display: none;
}

.nav-titel {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.nav-aktion {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 36px;
  justify-content: flex-end;
}

.nav-aktion-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--farbe-text-primaer);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-aktion-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-aktion-btn:active {
  opacity: 0.6;
}

/* ---------- Tab-Bar ---------- */

/*
 * Schwebende Glaspille statt durchgehender Leiste — das ist die Anmutung,
 * die die native Tab-Bar unter iOS 26 hat. Statisches Flex-Kind der
 * App-Shell statt position:fixed — dadurch bleibt sie unabhängig von
 * ein-/ausfahrenden mobilen Adressleisten verlässlich unten.
 */
.tab-bar {
  flex: none;
  z-index: 10;
  display: flex;
  gap: 2px;
  justify-content: center;
  width: calc(100% - 2 * var(--abstand-l));
  max-width: var(--inhalt-max-breite);
  margin: 0 auto calc(var(--abstand-m) + env(safe-area-inset-bottom, 0px));
  padding: 6px;
  border-radius: 22px;

  background: var(--glas-fuellung-stark);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  border: var(--rahmen-breite) solid var(--glas-rand);
  box-shadow:
    inset 0 var(--rahmen-breite) 0 var(--glas-lichtkante),
    var(--glas-schatten-schwebend);
}

.tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--farbe-text-sekundaer);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.tab svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-width 0.18s ease, transform 0.15s cubic-bezier(0.32, 0.72, 0, 1);
}

.tab:active svg {
  transform: scale(0.9);
}

/* Aktiver Tab: hellere Glaspille + primäre Textfarbe + kräftigere Kontur.
   Entspricht dem Fill-vs-Outline-Wechsel der nativen SF-Symbols. */
.tab--aktiv {
  background: var(--glas-fuellung);
  box-shadow: inset 0 var(--rahmen-breite) 0 var(--glas-lichtkante);
  color: var(--farbe-text-primaer);
  font-weight: 600;
}

.tab--aktiv svg {
  stroke-width: 2.4;
}

/* Kurzer Skalier-Impuls beim Wechsel auf einen Tab. */
.tab--wechsel-impuls {
  animation: tab-impuls 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes tab-impuls {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ---------- Karte ---------- */

.karte {
  position: relative;
  background: var(--glas-fuellung);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  border: var(--rahmen-breite) solid var(--glas-rand);
  border-radius: var(--radius-karte);
  padding: var(--abstand-l);
  box-shadow:
    inset 0 var(--rahmen-breite) 0 var(--glas-lichtkante),
    var(--glas-schatten),
    0 1px 0 var(--glas-kante-unten);
  transition: transform 0.15s cubic-bezier(0.32, 0.72, 0, 1);
}

.karte + .karte {
  margin-top: var(--abstand-m);
}

/* Optionaler Kategorie-Tint auf einer Karte, analog zu .kategorie-chip. */
.karte[data-kategorie="privat"] {
  background: color-mix(in srgb, var(--farbe-privat-tint) 55%, var(--glas-fuellung));
}

.karte[data-kategorie="geschaeftlich"] {
  background: color-mix(in srgb, var(--farbe-geschaeftlich-tint) 55%, var(--glas-fuellung));
}

/* Tappbare Karten (z. B. Fahrt-/Ort-Zeilen) bekommen dasselbe Press-Feedback
   wie Buttons — Klasse wird von Screens dort gesetzt, wo eine Karte klickbar ist. */
.karte--tappbar {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.karte--tappbar:active {
  transform: scale(0.98);
}

/* ---------- Buttons ---------- */

.btn-primaer {
  display: block;
  width: 100%;
  padding: 16px var(--abstand-l);
  border: 0;
  border-radius: var(--radius-button);
  background: var(--farbe-button-grund);
  color: var(--farbe-button-text);
  font-weight: 600;
  font-size: 17px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--glas-schatten);
  transition: opacity 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-primaer:active {
  opacity: 0.85;
  transform: scale(0.98);
}

.btn-primaer:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-sekundaer {
  display: block;
  width: 100%;
  padding: 14px var(--abstand-l);
  border: var(--rahmen-breite) solid var(--glas-rand);
  border-radius: var(--radius-button);
  background: var(--glas-fuellung);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  color: var(--farbe-text-primaer);
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  box-shadow:
    inset 0 var(--rahmen-breite) 0 var(--glas-lichtkante),
    var(--glas-schatten);
  transition: opacity 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-sekundaer:active {
  opacity: 0.85;
  transform: scale(0.98);
}

/* ---------- Kategorie-Chips (Glas-Segmented-Control mit gleitendem Thumb) --- */

/*
 * Erwartete Nutzung (unverändert gegenüber vorher — kein JS betroffen):
 *   <div class="kategorie-chips">
 *     <button class="kategorie-chip" data-kategorie="privat">Privat</button>
 *     <button class="kategorie-chip kategorie-chip--selected"
 *             data-kategorie="geschaeftlich">Geschäftlich</button>
 *   </div>
 * Genau ein Chip trägt --selected. Der gleitende Thumb ist ein reines
 * CSS-Konstrukt (:has()) auf .kategorie-chips::after — er folgt der
 * Selektion einzig über transform: translateX(), wie das iOS-Segmented-
 * Control. Kein zusätzliches Markup, kein JS nötig.
 */
.kategorie-chips {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--glas-fuellung-vertieft);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  border: var(--rahmen-breite) solid var(--glas-rand);
}

/* Der gleitende Thumb: liegt hinter den Buttons, bewegt sich ausschließlich
   per transform — kein left/width-Layout-Thrashing. */
.kategorie-chips::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--radius-chip);
  background: var(--glas-fuellung);
  box-shadow:
    inset 0 var(--rahmen-breite) 0 var(--glas-lichtkante),
    var(--glas-schatten);
  transform: translateX(0%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
    background-color 0.2s ease;
  will-change: transform;
  pointer-events: none;
}

.kategorie-chips:has(.kategorie-chip--selected[data-kategorie="geschaeftlich"])::after {
  transform: translateX(100%);
  background: color-mix(in srgb, var(--farbe-geschaeftlich) 16%, var(--glas-fuellung));
}

.kategorie-chips:has(.kategorie-chip--selected[data-kategorie="privat"])::after {
  transform: translateX(0%);
  background: color-mix(in srgb, var(--farbe-privat) 16%, var(--glas-fuellung));
}

.kategorie-chip {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  padding: 10px var(--abstand-m);
  border: 0;
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--farbe-text-sekundaer);
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.kategorie-chip:active {
  transform: scale(0.98);
}

.kategorie-chip[data-kategorie="privat"] {
  --chip-farbe: var(--farbe-privat);
}

.kategorie-chip[data-kategorie="geschaeftlich"] {
  --chip-farbe: var(--farbe-geschaeftlich);
}

.kategorie-chip--selected {
  color: var(--chip-farbe);
  font-weight: 600;
}

/* Ohne :has()-Unterstützung (ältere Browser): Fallback auf die vorherige
   Fill/Border-Darstellung je Button, kein Thumb. */
@supports not selector(:has(*)) {
  .kategorie-chips::after {
    display: none;
  }
  .kategorie-chip {
    border: 1px solid var(--glas-rand);
    background: var(--glas-fuellung-vertieft);
  }
  .kategorie-chip--selected {
    border-width: 1.5px;
    border-color: var(--chip-farbe);
    background: color-mix(in srgb, var(--chip-farbe) 16%, transparent);
    box-shadow: inset 0 var(--rahmen-breite) 0 var(--glas-lichtkante);
  }
}

/* ---------- Kategorie-Textfarben (für Listen/Detail) ---------- */

.kategorie-text[data-kategorie="privat"] {
  color: var(--farbe-privat);
}

.kategorie-text[data-kategorie="geschaeftlich"] {
  color: var(--farbe-geschaeftlich);
}

/* ---------- Formular ---------- */

.feld {
  display: block;
  margin-bottom: var(--abstand-m);
}

.feld-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--farbe-text-sekundaer);
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 12px var(--abstand-m);
  border: var(--rahmen-breite) solid var(--glas-rand);
  border-radius: var(--radius-feld);
  background: var(--glas-fuellung-vertieft);
  color: var(--farbe-text-primaer);
  font-size: 16px; /* verhindert Auto-Zoom in iOS Safari */
  appearance: none;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--farbe-text-primaer) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe-text-primaer) 8%, transparent);
}

textarea {
  min-height: 88px;
  resize: vertical;
}

/*
 * Kilometerstände sind die Leitzahl der App — in der nativen App stehen sie
 * in 34pt SF Rounded Semibold. .feld-zahl bringt dieselbe Gewichtung ins Web.
 */
.feld-zahl {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 10px 14px;
  font-variant-numeric: tabular-nums;
}

/* Dezenter Verlauf für die großen, nur lesbaren Kilometer-/Distanz-Anzeigen
   statt flacher Textfarbe (nicht auf Inputs — dort muss die Caret- und
   Placeholder-Farbe verlässlich deckend bleiben). */
.fd-kopf-distanz,
.fs-timer {
  background: linear-gradient(135deg, var(--farbe-text-primaer), color-mix(in srgb, var(--farbe-text-primaer) 72%, var(--farbe-privat-deep)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Typografie-Helfer ---------- */

/* Entspricht dem großen iOS-Navigationstitel. */
.titel {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--abstand-l);
}

.untertitel {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: var(--abstand-s);
}

.sekundaer {
  color: var(--farbe-text-sekundaer);
  font-size: 14px;
}

.leer-hinweis {
  padding: var(--abstand-xl) var(--abstand-l);
  text-align: center;
  color: var(--farbe-text-sekundaer);
}

.stapel > * + * {
  margin-top: var(--abstand-m);
}

/* Zahlen laufen überall auf gleicher Breite, damit Spalten nicht zappeln. */
.zahl,
.feld-zahl {
  font-variant-numeric: tabular-nums;
}

/* Tap-Feedback für tappbare Listenzeilen (liste.js, orte.js) — dieselbe
   Kurve wie Buttons/Karten, damit sich die App an jeder Stelle gleich anfühlt. */
.fahrt-zeile,
.ort-karte {
  transition: transform 0.15s cubic-bezier(0.32, 0.72, 0, 1);
}
.fahrt-zeile:active,
.ort-karte:active {
  transform: scale(0.97);
}

/* ---------- Bewegung ---------- */

/*
 * Screen-Wechsel-Transitions. document.startViewTransition() (router.js)
 * setzt vor dem Rendern html[data-richtung] = 'vor' | 'zurueck' | 'tab' und
 * kapselt den DOM-Tausch — die Browser-Engine erzeugt daraus automatisch
 * ::view-transition-old(root)/::view-transition-new(root)-Snapshots.
 * Easing durchgängig iOS-artig statt linear/ease.
 */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

html[data-richtung="tab"]::view-transition-old(root),
html[data-richtung="tab"]::view-transition-new(root) {
  animation-duration: 0.18s;
  animation-timing-function: ease;
}

html[data-richtung="vor"]::view-transition-old(root) {
  animation-name: schiebe-raus-links;
}
html[data-richtung="vor"]::view-transition-new(root) {
  animation-name: schiebe-rein-rechts;
}
html[data-richtung="zurueck"]::view-transition-old(root) {
  animation-name: schiebe-raus-rechts;
}
html[data-richtung="zurueck"]::view-transition-new(root) {
  animation-name: schiebe-rein-links;
}

@keyframes schiebe-rein-rechts {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes schiebe-raus-links {
  from { transform: translateX(0); }
  to { transform: translateX(-30%); }
}
@keyframes schiebe-rein-links {
  from { transform: translateX(-30%); }
  to { transform: translateX(0); }
}
@keyframes schiebe-raus-rechts {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

/* Fallback für Browser ohne View-Transitions-API: kurze Crossfade-Animation
   auf #app, vom Router per Klasse ausgelöst. */
.app-uebergang {
  animation: app-crossfade 0.22s ease;
}

@keyframes app-crossfade {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* Listenzeilen beim ersten Rendern gestaffelt einblenden. Screens setzen
   --i (Index, gedeckelt bei 12) und die Klasse .zeile-einblenden. */
.zeile-einblenden {
  animation: zeile-einblenden 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
  animation-delay: calc(min(var(--i, 0), 12) * 18ms);
}

@keyframes zeile-einblenden {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Skeleton-Platzhalter für asynchron ladende Listen (liste.js, auswertung.js). */
.skeleton-zeile {
  height: 64px;
  border-radius: var(--radius-karte);
  margin-bottom: var(--abstand-s);
  background: linear-gradient(
    100deg,
    var(--glas-fuellung-vertieft) 40%,
    var(--glas-fuellung) 50%,
    var(--glas-fuellung-vertieft) 60%
  );
  background-size: 200% 100%;
  border: var(--rahmen-breite) solid var(--glas-rand);
  animation: skeleton-schimmer 1.3s ease-in-out infinite;
}

@keyframes skeleton-schimmer {
  from { background-position: 120% 0; }
  to { background-position: -20% 0; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ---------- Druckansicht (Browser-Druck → "Als PDF sichern") ---------- */

@media print {
  .app-shell {
    height: auto;
    overflow: visible;
  }

  html,
  body {
    height: auto;
    overflow: visible;
  }

  .nav-bar,
  .tab-bar {
    display: none;
  }

  #app {
    max-width: none;
    padding: 0;
    overflow: visible;
  }

  body {
    background: #FFFFFF;
    color: #000000;
  }

  /* Glas hat auf Papier nichts verloren. */
  body::before {
    display: none;
  }

  .karte,
  .glas,
  .btn-sekundaer {
    background: #FFFFFF;
    border-color: #CCCCCC;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}