/* ============================================================
   Brand: azerus — Skin (Komponenten-Aussehen)
   ------------------------------------------------------------
   Geladen NACH core.css → tokens.css → base/theme.css und
   überschreibt das neutrale base-Skin mit dem azerus-Look.
   Quelle der Wahrheit für das WIEDERVERWENDBARE Marken-Aussehen
   (gilt für azerus.de UND azerus-Tools, die diesen Brand erben).

   Aesthetik: ruhig, typografie- und whitespace-getrieben,
   zurückhaltend, langlebig. Display = New Hero (800),
   Fließtext = Inter. Primär #4c6071 (Slate), Schwarz #21212b.

   ⚠️ NUR Skin + brand-eigene Token-Refinements. Seiten-Layout
   und Sektionen liegen site-seitig in main/azerus/.
   ============================================================ */

/* ============================================================
   0. Brand-Token-Refinements
   ------------------------------------------------------------
   Semantische Tokens dürfen pro Brand verfeinert werden
   (core.css erlaubt das ausdrücklich). Plus azerus-eigene
   Zusatz-Tokens (--az-*) für wiederverwendbare Flächen/Werte.
   ============================================================ */
:root {
  /* Wärmeres, ruhigeres Schwarz/Grau-Set */
  --color-text:    #23272e;   /* Fließtext — nicht reines Schwarz */
  --color-muted:   #687583;   /* gedämpft, mit leichtem Blaustich (zur Marke) */
  --color-bg:      #ffffff;   /* sauberes Canvas */
  --color-surface: #ffffff;
  --border-subtle: #e7eaee;
  --border-field:  #cfd6de;

  /* azerus-Zusatzflächen (wiederverwendbar, brandgebunden) */
  --az-ink:        var(--color-black);          /* #21212b — dunkle Sektionen */
  --az-tint:       #f3f6f9;                      /* helle, kühle Tönung (Alt-Sektionen) */
  --az-tint-2:     #eaeff4;                      /* etwas kräftigere Tönung */
  --az-line:       var(--border-subtle);
  --az-primary-soft: rgba(var(--color-primary-rgb), .08);
  --az-primary-ring: rgba(var(--color-primary-rgb), .28);

  /* Typo-Feintuning für die Display-Schrift */
  --az-tracking-tight: -0.02em;

  /* Größere Radien-Option für großzügige Karten/Bilder */
  --radius-xl: 16px;

  /* Sanftere, mehrstufige Schatten */
  --shadow-card: 0 1px 2px rgba(33, 33, 43, .04);
  --shadow-soft: 0 10px 40px -12px rgba(33, 33, 43, .18);
  --az-shadow-hover: 0 18px 50px -18px rgba(33, 33, 43, .28);

  /* Signatur-Verlauf (Standard-Hook --gradient-brand → core.css-Utilities
     .u-gradient-text / .u-gradient-surface). Dezent, kühl: Secondary→Primary.
     Quelle der Wahrheit — die Site (site.css .boost-card) referenziert das Token. */
  --gradient-brand: linear-gradient(180deg, var(--color-secondary), var(--color-primary));
}

/* Display-Headlines: enger Satz, ausgewogene Umbrüche */
h1, h2, h3 {
  letter-spacing: var(--az-tracking-tight);
  line-height: var(--leading-tight);
  text-wrap: balance;
  color: var(--color-black);
}

/* Links: dezent, klare Hover-Unterstreichung mit Abstand */
a {
  color: var(--color-primary);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-hover); }

/* ============================================================
   1. Button — elegant, ruhig, klar
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  transition: background var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base),
              transform var(--transition-fast),
              box-shadow var(--transition-base);
}
.btn:hover { text-decoration: none; }

/* Primär: gefüllt, mit dezentem Lift */
.btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(var(--color-primary-rgb), .9);
}
.btn--primary:active { transform: translateY(0); }

/* Sekundär: klare Outline, füllt sich beim Hover */
.btn--secondary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--secondary:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Danger (selten auf einer öffentlichen Site, der Vollständigkeit halber) */
.btn--danger {
  background: transparent;
  border-color: #e2b8bf;
  color: var(--color-danger);
}
.btn--danger:hover { background: #fdf0f2; }

/* Icon-Button */
.btn--icon {
  padding: var(--space-2);
  border-radius: var(--radius-full);
  border-color: transparent;
  background: transparent;
  color: var(--color-muted);
}
.btn--icon:hover { background: var(--az-primary-soft); color: var(--color-primary); }

/* Klein */
.btn--sm { padding: 0.5rem 1rem; font-size: var(--text-xs); }

/* Auf dunklen Sektionen (Utility, vom Site-Layout gesetzt) */
.on-ink .btn--secondary { border-color: rgba(255,255,255,.5); color: #fff; }
.on-ink .btn--secondary:hover { background: #fff; color: var(--color-black); border-color: #fff; }

/* ============================================================
   2. Card — luftig, ruhige Linien, sanfter Hover
   ============================================================ */
.card {
  padding: var(--space-6);
  margin: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}
.card__title {
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
  font-size: var(--text-xl);
  color: var(--color-black);
}

/* Interaktive Karte (Link-Karten) — hebt sich beim Hover */
a.card,
.card--link { display: block; color: inherit; text-decoration: none; }
a.card:hover,
.card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--az-shadow-hover);
  border-color: rgba(var(--color-primary-rgb), .35);
}

/* ============================================================
   3. Formular — klar, freundlich, klare Fokus-Ringe
   ============================================================ */
.field {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field::placeholder { color: var(--color-muted); opacity: .8; }
.field:hover { border-color: var(--color-secondary); }
.field:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--az-primary-ring);
}
textarea.field { resize: vertical; min-height: 140px; line-height: var(--leading-normal); }

.form-field { margin-bottom: var(--space-5); }
.form-field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-black);
}
.form-field__hint  { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-muted); }
.form-field__error { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-danger); }

.field--error { border-color: var(--color-danger); }
.field--error:focus-visible { box-shadow: 0 0 0 3px rgba(176, 0, 32, .2); }
.field--valid { border-color: var(--color-success); }

/* Checkbox / Radio */
.choice { display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; line-height: var(--leading-normal); }
.choice input[type="checkbox"],
.choice input[type="radio"] {
  width: 1.15em; height: 1.15em;
  margin-top: 0.15em;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex: none;
}

/* ============================================================
   4. Tabs (falls genutzt) — ruhige Unterstreichung
   ============================================================ */
.tabs__list { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.tabs__tab {
  padding: var(--space-3) 0;
  border: 0; background: transparent;
  color: var(--color-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: var(--weight-medium);
}
.tabs__tab[aria-selected="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--weight-semibold);
}
.tabs__panel { padding: var(--space-5) 0; }