/* ==========================================================================
   digitlz Komponenten
   Abhängig von tokens.css und base.css (Keyframes: holo-flow, focus-pulse,
   holo-border-flow).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Interaktions-Grundregel: Holo-Fokus
   Eingabefelder: wandernder Verlaufs-Rahmen + Puls-Halo.
   Buttons: Verlaufs-Ring (Masken-Technik) + Puls-Halo.
   Kleine Controls & Links: Puls-Halo.
   Bei prefers-reduced-motion (base.css) stehen alle Animationen still,
   der statische Halo bleibt sichtbar.
   -------------------------------------------------------------------------- */

a:focus-visible,
summary:focus-visible,
.tab:focus-visible,
.checkbox:focus-visible,
.radio:focus-visible,
.toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-halo);
  animation: focus-pulse var(--duration-pulse) var(--ease) infinite;
}

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

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 22px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-surface-strong);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease),
    opacity var(--duration-fast) var(--ease);
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--color-ink);
  color: var(--color-bg);
}

.btn--holo {
  background-image: var(--holo-gradient);
  background-size: 300% 300%;
  animation: holo-flow var(--duration-holo) var(--ease) infinite;
  color: var(--holo-ink);
}

.btn--ghost {
  background: transparent;
  border: 1.5px solid var(--color-ink);
  padding: calc(10px - 1.5px) calc(22px - 1.5px);
}

/* Nur sinnvoll auf Holo-Flächen: halbtransparentes Weiß */
.btn--glass {
  background: rgba(255, 255, 255, 0.65);
  color: #333333;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-halo);
  animation: focus-pulse var(--duration-pulse) var(--ease) infinite;
}

.btn--holo:focus-visible {
  animation: holo-flow var(--duration-holo) var(--ease) infinite,
    focus-pulse var(--duration-pulse) var(--ease) infinite;
}

.btn:focus-visible::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: var(--radius-pill);
  padding: 2px;
  background-image: var(--holo-gradient-focus);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: holo-flow 4s var(--ease) infinite;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Formulare
   -------------------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--color-line);
  border-radius: var(--radius-s);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: var(--text-small);
}

.textarea {
  min-height: 96px;
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-ink-soft);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: none;
  border-color: transparent;
  background-image: linear-gradient(var(--color-bg), var(--color-bg)),
    var(--holo-gradient-focus);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 300% 300%;
  box-shadow: 0 0 0 3px var(--focus-halo);
  animation: holo-border-flow 4s var(--ease) infinite,
    focus-pulse var(--duration-pulse) var(--ease) infinite;
}

.field-hint {
  font-size: 0.75rem;
  color: var(--color-ink-soft);
}

.field--error .input,
.field--error .select,
.field--error .textarea {
  border-color: var(--color-error);
}

.field--error .field-hint {
  color: var(--color-error);
}

/* Checkbox */
.checkbox {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-ink);
  border-radius: 3px;
  background: var(--color-bg);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease);
}

.checkbox::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease);
  background: var(--color-bg);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.checkbox:checked {
  background: var(--color-ink);
}

.checkbox:checked::before {
  transform: scale(1);
}

/* Radio */
.radio {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-bg);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}

.radio::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-ink);
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease);
}

.radio:checked::before {
  transform: scale(1);
}

/* Toggle */
.toggle {
  appearance: none;
  width: 38px;
  height: 22px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-surface-strong);
  position: relative;
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}

.toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: var(--shadow-s);
  transition: transform var(--duration) var(--ease);
}

.toggle:checked {
  background: var(--color-ink);
}

.toggle:checked::before {
  transform: translateX(16px);
}

.check-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
}

/* --------------------------------------------------------------------------
   Badges & Tags
   -------------------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-strong);
  color: var(--color-ink);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

.badge--holo {
  background-image: var(--holo-gradient);
  background-size: 300% 300%;
  animation: holo-flow var(--duration-holo) var(--ease) infinite;
  color: var(--holo-ink);
}

.badge--outline {
  background: transparent;
  border: 1.5px solid var(--color-ink);
  padding: calc(4px - 1.5px) calc(12px - 1.5px);
}

.badge--invert {
  background: var(--color-ink);
  color: var(--color-bg);
}

/* --------------------------------------------------------------------------
   Holo-Schrift — sechste Holo-Form: der Verlauf trägt die Buchstaben selbst.
   Für einzelne Schlüsselsätze, nicht für Absätze. Nutzt --holo-gradient-text
   (gleichluminante Stopps), damit der Kontrast nicht mit der Animation
   wandert; der Flächen-Verlauf wäre als Schrift auf hellem Grund unlesbar.
   -------------------------------------------------------------------------- */

.holo-text {
  background-image: var(--holo-gradient-text);
  background-size: 300% 300%;
  animation: holo-flow var(--duration-holo) var(--ease) infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Ohne diesen Block bliebe im erzwungenen Kontrastmodus ein transparenter
   Text auf ersetztem Hintergrund stehen — der Satz wäre schlicht weg. */
@media (forced-colors: active) {
  .holo-text {
    background-image: none;
    animation: none;
    color: CanvasText;
    forced-color-adjust: none;
  }
}

/* --------------------------------------------------------------------------
   Blitz — die Bildmarke von Sparks (readme.md Regel 9)
   -------------------------------------------------------------------------- */

/* ⚠️ Das ist **keine achte Holo-Form**: Die Fläche ist der gewöhnliche
   Holo-Verlauf, nur durch eine Blitzform ausgestanzt. Neu ist allein die
   Glanzkante in --color-spark, und die trägt der Blitz, damit er als Blitz
   lesbar bleibt statt als bunter Fleck. Er zählt wie jede Holo-Fläche gegen
   das Budget seines Sichtbereichs (Regel 4).

   Die Form steht als CSS-Maske hier und nicht als <svg> im Markup, und zwar
   aus einem Grund: Sie erscheint an zwei Orten in zwei Technologien — im
   Teaser der Startseite (React, components/Blitz.tsx) und auf der
   Sparks-Übersicht (Handlebars, sparks/theme/partials/blitz.hbs). Beide
   schreiben denselben leeren <span class="spark">; die Form lebt an einer
   Stelle, sonst liefe sie auseinander.

   Zwei Ebenen: oben die Glanzkante (steht still), darunter der Verlauf (wandert).
   Genau dafür gibt es holo-border-flow in base.css — die Keyframes lassen die
   erste Position unberührt und bewegen nur die zweite. */
.spark {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;

  background-image: linear-gradient(
      150deg,
      var(--color-spark) 0%,
      rgba(255, 255, 255, 0) 45%
    ),
    var(--holo-gradient);
  background-size: 100% 100%, 300% 300%;
  background-position: 0 0, 0% 50%;
  animation: holo-border-flow var(--duration-holo) var(--ease) infinite;

  /* Die Maske trägt die Form. Der Pfad ist ein Zickzack in einem 24er-Raster;
     `contain` statt `cover`, damit er bei jeder Schriftgrösse vollständig
     bleibt statt an den Rändern abzureissen. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2 6 13h5l-3 9 10-12h-6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2 6 13h5l-3 9 10-12h-6z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Im erzwungenen Kontrastmodus ersetzt das System jeden Hintergrund — der
   Blitz wäre sonst eine ausgestanzte Fläche ohne Füllung, also unsichtbar.
   Dieselbe Rücknahme wie bei .holo-text darüber, nur bleibt hier die Maske
   stehen: Die Form ist die Aussage, die Farbe nicht. */
@media (forced-colors: active) {
  .spark {
    background-image: none;
    background-color: CanvasText;
    animation: none;
    forced-color-adjust: none;
  }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  padding: var(--space-5);
}

.card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.card p {
  font-size: var(--text-small);
  color: var(--color-ink-soft);
  line-height: 1.55;
}

.card--outline {
  border: 1.5px solid var(--color-ink);
}

.card--invert {
  background: var(--color-ink);
  border: none;
  color: var(--color-bg);
}

.card--invert .card-title {
  color: inherit;
}

.card--invert p {
  color: inherit;
  opacity: 0.75;
}

/* Durchscheinende Karte — lässt einen Blob dahinter sichtbar werden, statt
   ihn zu verdecken. Der Backdrop-Blur ist nicht Dekor: er zieht die harten
   Verlaufskanten des Blobs auseinander, die sonst quer durch die Schrift
   laufen und den Text stellenweise unter AA drücken würden.
   Ohne color-mix-Unterstützung greift schlicht der deckende .card-Grund. */
.card--sheer {
  background: color-mix(in srgb, var(--color-bg) 76%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
}

/* Ohne Backdrop-Blur bliebe der Blob scharf hinter der Schrift stehen —
   dann lieber deckender. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card--sheer {
    background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  }
}

/* Holo-Kante oben — sparsam für Hervorgehobenes */
.card--accent {
  padding-top: calc(var(--space-5) + 5px);
}

.card--accent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background-image: var(--holo-gradient);
  background-size: 300% 300%;
  animation: holo-flow var(--duration-holo) var(--ease) infinite;
}

/* --------------------------------------------------------------------------
   Blobs — immer dekorativ (aria-hidden), max. einer pro Sichtbereich
   Größe pro Einsatz über --blob-w/--blob-h, Position über inline style.
   Der Container braucht position: relative — aber KEIN overflow: hidden:
   Ein Blob wird nicht beschnitten, sondern begrenzt seinen Überhang selbst
   (readme.md Regel 7). Beschnitten wird nur dort, wo die Kante zur Form
   gehört, etwa am Footer, und am bildschirmbreiten .site-clip.
   -------------------------------------------------------------------------- */

.blob {
  position: absolute;
  width: var(--blob-w, 120px);
  height: var(--blob-h, 100px);
  background-image: var(--holo-gradient);
  background-size: 300% 300%;
  animation: holo-flow var(--duration-holo) var(--ease) infinite;
  filter: blur(2px);
  pointer-events: none;
}

/* Deko bleibt hinter dem Inhalt. Ein absolut positionierter Blob übermalt
   sonst jedes statische Geschwister — er wird ja nach ihnen gezeichnet.
   Diese Regel hebt alles, was nach dem Blob steht, in dieselbe Ebene;
   bei gleicher Ebene entscheidet die Dokumentreihenfolge, und der Inhalt
   kommt später. Der Blob gehört deshalb immer an den Anfang des Containers. */
.blob ~ * {
  position: relative;
}

.blob--a {
  border-radius: 62% 38% 55% 45% / 48% 60% 40% 52%;
}

.blob--b {
  border-radius: 45% 55% 62% 38% / 55% 45% 55% 45%;
}

/* ⚠️ Die Radien gegenüberliegender Ecken müssen sich je Kante auf 100%
   addieren, sonst bleibt an dieser Kante eine GERADE Strecke stehen — und ist
   eine Summe grösser als 100%, skaliert der Browser alle Radien der Box
   herunter und erzeugt gerade Strecken auch an den Kanten, die für sich
   stimmten. blob--c hatte senkrecht rechts 58+62 = 120%: Chrome skalierte
   deshalb auf 83,3%, und die Form stand bei 190×160 mit 53px gerader Kante
   links sowie 32px oben und unten da. Auf /audit/ las sich das als Beschnitt,
   obwohl dort nichts beschnitten wird (Christian, 2026-08-19). Jetzt 42+58
   auf beiden Achsen — asymmetrisch wie vorher, aber ohne Gerade. */
.blob--c {
  border-radius: 55% 45% 38% 62% / 42% 58% 42% 58%;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
}

.brand {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-decoration: none;
}

/* Brand-Lockup „DIGITLZ AI“ — das AI leicht verkleinert und weiß auf einem
   gefüllten Kreis. Die Füllung hat einen eigenen Token (--holo-gradient-brand):
   weicher als die Spektral-Varianten und im Dark Mode dunkler abgestimmt,
   Details am Token. */
.brand span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  font-size: 0.95em;
  letter-spacing: 0;
  vertical-align: middle;
  transform: translateY(-1px);
  color: #fff;
  border-radius: 50%;
  background-image: var(--holo-gradient-brand);
  background-size: 300% 300%;
  animation: holo-flow var(--duration-holo) var(--ease) infinite;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* :not(.btn) — ein CTA in der Nav darf ein <a> sein und behält dann seine
   Button-Farben. Ohne die Ausnahme gewinnt .site-nav a (0,1,1) gegen
   .btn--primary (0,1,0): der Text nimmt die Nav-Farbe an und wird beim
   Hover deckungsgleich mit dem Button-Hintergrund. */
.site-nav a:not(.btn) {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-ink-soft);
  text-decoration: none;
  border-radius: 2px;
}

.site-nav a:not(.btn):hover {
  color: var(--color-ink);
}

.site-nav a:not(.btn)[aria-current="page"] {
  color: var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
  padding-bottom: 2px;
}

/* Die Fläche kommt aus eigenen Token, nicht aus `--color-ink`/`--color-bg`:
   die blosse Umkehrung des Seitengrunds ergab im Dark einen fast weissen
   Riegel. Begründung und gemessene Kontraste stehen bei den Token
   (tokens.css, `--color-footer`). */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--color-footer);
  color: var(--color-footer-ink);
  border-radius: var(--radius-l);
  padding: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.site-footer .brand {
  color: inherit;
}

.site-footer p {
  position: relative;
  font-size: var(--text-small);
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Content-Module
   -------------------------------------------------------------------------- */

/* Hero — trägt die Klasse .holo im Markup */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
  padding: clamp(32px, 6vw, 64px) clamp(24px, 5vw, 48px);
}

.hero .caption {
  color: var(--holo-ink-soft);
}

.hero h1 {
  max-width: 16ch;
  margin: var(--space-3) 0 var(--space-4);
}

.hero p {
  max-width: 46ch;
  font-size: 1.125rem;
  color: var(--holo-ink-soft);
  margin-bottom: var(--space-5);
}

.hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Liquid-Hero — fünfte Holo-Form, die einzige in 3D.
   Markup behält .holo als Fallback-Grund; js/liquid-hero.js legt das Canvas
   über den Gradient und unter den Inhalt und setzt .is-liquid, solange
   WebGL aktiv ist. Ohne JS/WebGL bleibt schlicht die Gradient-Fläche. */

.hero--liquid > .liquid-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.hero--liquid > :not(.liquid-hero-canvas) {
  position: relative;
  z-index: 1;
}

/* Das Canvas rendert transparent: der animierte .holo-Verlauf bleibt als
   Szenenhintergrund sichtbar — die Animation läuft deshalb bewusst weiter. */

/* Textfarben-Ausnahme: auf Liquid folgt der Text dem Theme (Light --holo-ink,
   Dark Weiß) — mit dezentem Text-Shadow, wo das Band hinter den Text läuft.
   Im Fallback (ohne .is-liquid) gelten die normalen Holo-Textfarben. */
.hero--liquid.is-liquid {
  --liquid-ink: var(--holo-ink);
  --liquid-ink-soft: var(--holo-ink-soft);
  --liquid-shadow-strong: 0 2px 24px rgba(255, 255, 255, 0.5);
  --liquid-shadow-soft: 0 1px 12px rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] .hero--liquid.is-liquid {
  --liquid-ink: #ffffff;
  --liquid-ink-soft: #cfcfd6;
  --liquid-shadow-strong: 0 2px 24px rgba(0, 0, 0, 0.45);
  --liquid-shadow-soft: 0 1px 12px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero--liquid.is-liquid {
    --liquid-ink: #ffffff;
    --liquid-ink-soft: #cfcfd6;
    --liquid-shadow-strong: 0 2px 24px rgba(0, 0, 0, 0.45);
    --liquid-shadow-soft: 0 1px 12px rgba(0, 0, 0, 0.5);
  }
}

.hero--liquid.is-liquid h1 {
  color: var(--liquid-ink);
  text-shadow: var(--liquid-shadow-strong);
}

.hero--liquid.is-liquid p,
.hero--liquid.is-liquid .caption {
  color: var(--liquid-ink-soft);
  text-shadow: var(--liquid-shadow-soft);
}

/* Feature-Grid — min() verhindert, dass die Spalten-Mindestbreite auf
   schmalen Geräten breiter wird als der Bildschirm */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-4);
}

.feature {
  background: var(--color-surface);
  border-radius: var(--radius-m);
  padding: var(--space-5);
}

.feature .card-title {
  margin-bottom: var(--space-2);
}

.feature p {
  font-size: var(--text-small);
  color: var(--color-ink-soft);
}

/* Zitat / Testimonial */
.quote {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-m);
  padding: var(--space-6);
}

.quote blockquote {
  position: relative;
}

.quote blockquote p {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--space-2);
}

.quote cite {
  position: relative;
  font-style: normal;
  font-size: var(--text-small);
  color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   Tabelle
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.table th {
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  padding: var(--space-3);
  border-bottom: 2px solid var(--color-ink);
}

.table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}

.table tbody tr:nth-child(even) {
  background: var(--color-zebra);
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1.5px solid var(--color-line);
}

.tab {
  position: relative;
  top: 1.5px;
  padding: var(--space-2) var(--space-4);
  background: none;
  border: 1.5px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-ink-soft);
  cursor: pointer;
}

.tab[aria-selected="true"] {
  color: var(--color-ink);
  background: var(--color-bg);
  border-color: var(--color-line);
}

.tab-panel {
  padding: var(--space-4) 0;
  font-size: var(--text-small);
  color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   Akkordeon — natives <details>/<summary>
   -------------------------------------------------------------------------- */

.accordion {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.accordion details {
  border-bottom: 1px solid var(--color-line);
}

.accordion details:last-child {
  border-bottom: none;
}

.accordion summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-small);
  font-weight: 700;
  cursor: pointer;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::after {
  content: "+";
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--color-ink-soft);
}

.accordion details[open] summary::after {
  content: "−";
}

.accordion .accordion-body {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--text-small);
  color: var(--color-ink-soft);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Modal — natives <dialog>
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  margin: auto;
  max-width: 400px;
  width: calc(100% - var(--space-8));
  border: none;
  border-radius: var(--radius-l);
  padding: calc(var(--space-6) + 5px) var(--space-6) var(--space-6);
  background: var(--color-bg);
  color: var(--color-ink);
  box-shadow: var(--shadow-l);
  overflow: hidden;
}

.modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background-image: var(--holo-gradient);
  background-size: 300% 300%;
  animation: holo-flow var(--duration-holo) var(--ease) infinite;
}

.modal::backdrop {
  background: rgba(20, 20, 20, 0.5);
}

.modal h4 {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 1.125rem;
  margin-bottom: var(--space-3);
}

.modal p {
  font-size: var(--text-small);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-5);
}

.modal-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}