/* Knöpfe – zeitlos statt Glas (Stand v6, Markenmetall der Webseite, matt).
   Dunkel: Platin rgb(226,232,241), Hell: Graphit #3E4148. Eine gefüllte Hauptaktion, Nebenknöpfe mit Haarlinie.
   Kein Glas, kein Glanz, kein Schatten, kein Anheben. Große Knöpfe in Versalien mit Laufweite, ohne Pfeil.
   Eigene Datei, damit sie sich einzeln zurücknehmen lässt. */

.btn { -webkit-backdrop-filter: none; backdrop-filter: none; text-shadow: none; filter: none; box-shadow: none;
  background-image: none; -webkit-font-smoothing: antialiased; border: 1px solid var(--bw-line, transparent);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .16s cubic-bezier(.23, 1, .32, 1); }
.btn::before, .btn::after { display: none; }
.btn:hover { transform: none; box-shadow: none; filter: none; }
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn:focus-visible { outline: 2px solid var(--btn-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
@media (pointer: coarse) { .btn::after { display: block; content: ''; position: absolute; inset: -6px 0; background: none; z-index: 0; } }

/* Die Glas-Regeln setzen Schatten mit höherer Spezifität; matt heißt hier ausnahmslos ohne Schatten */
.btn, .btn:hover, .btn:active { box-shadow: none !important; }

/* Große Knöpfe: Versalien mit Laufweite, ohne Pfeil */
.btn-lg, .nav-cta { text-transform: uppercase; letter-spacing: .14em; font-size: 13px; }
.btn-lg .ic, .nav-cta .ic { display: none; }

/* ---------- Dunkel: Platin ---------- */
[data-theme="dark"] .btn, [data-theme="dark"] .btn:hover { --bw-line: rgba(226,232,241,.18); --btn-focus: rgba(226,232,241,.7);
  color: #E6EAF0; font-weight: 500; background: rgba(226,232,241,.045); }
[data-theme="dark"] .btn-p, [data-theme="dark"] .btn-p:hover { --bw-line: #E2E8F1; color: #070B12; font-weight: 560; background: #E2E8F1; }
@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .btn:hover { color: #FFFFFF; background: rgba(226,232,241,.075); --bw-line: rgba(226,232,241,.34); }
  [data-theme="dark"] .btn-p:hover { color: #070B12; background: #F2F5FA; --bw-line: #F2F5FA; }
}
[data-theme="dark"] .btn:active { background: rgba(226,232,241,.12); }
[data-theme="dark"] .btn-p:active { background: #C9D1DD; --bw-line: #C9D1DD; }

/* ---------- Hell: Graphit ---------- */
[data-theme="light"] .btn, [data-theme="light"] .btn:hover { --bw-line: rgba(36,39,45,.18); --btn-focus: rgba(36,39,45,.55);
  color: #121418; font-weight: 500; background: #FBFAF7; }
[data-theme="light"] .btn-p, [data-theme="light"] .btn-p:hover { --bw-line: #3E4148; color: #F7F6F3; font-weight: 560; background: #3E4148; }
@media (hover: hover) and (pointer: fine) {
  [data-theme="light"] .btn:hover { background: #FFFFFF; --bw-line: rgba(36,39,45,.38); }
  [data-theme="light"] .btn-p:hover { color: #FFFFFF; background: #4A4D54; --bw-line: #4A4D54; }
}
[data-theme="light"] .btn:active { background: #F1EFEA; }
[data-theme="light"] .btn-p:active { background: #2E3136; --bw-line: #2E3136; }

/* ---------- Monat/Jahr- und Modus-Umschalter: ruhige Fläche ---------- */
[data-theme="dark"] .seg-ind { background: rgba(226,232,241,.08); box-shadow: inset 0 0 0 1px rgba(226,232,241,.28); }
[data-theme="light"] .seg-ind { background: rgba(36,39,45,.06); box-shadow: inset 0 0 0 1px rgba(36,39,45,.30); }