/* ═══════ UTILITY CLASSES — Wild Roots ═══════ */
/* Replaces top inline styles for maintainability */

/* --- Links --- */
.link-inherit { color: inherit; text-decoration: underline; }
.link-plain { text-decoration: none; }

/* --- Padding --- */
.pad-btn { padding: 0.4rem 0.75rem; }
.pad-card { padding: 1rem; background: rgba(255,255,255,0.04); border-radius: var(--radius-md); }
.pad-block { padding: 0.5rem 0.75rem; border-radius: 8px; }

/* --- Typography — Size --- */
.text-3xl { font-size: 1.5rem; }
.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.82rem; }
.text-xxs { font-size: 0.78rem; }

/* --- Typography — Combos --- */
.heading-section { font-size: 1.5rem; font-weight: 800; margin-bottom: 1.5rem; color: var(--dark); }
.heading-card { font-size: 1.5rem; margin-bottom: 0.5rem; }
.label-sand { color: var(--sand); font-size: 0.85rem; }
.label-fire { color: var(--fire); font-weight: 600; }
.label-muted { font-size: 0.82rem; color: var(--medium); }
.label-light { font-size: 0.78rem; color: var(--light); font-weight: 600; }
.label-light-sub { font-size: 0.78rem; color: var(--light); margin-top: 0.75rem; }
.subtitle-faded { color: rgba(254,250,224,0.6); font-size: 0.82rem; margin-top: 0.5rem; }
.subtitle-muted { color: rgba(254,250,224,0.7); font-size: 0.9rem; margin-top: 0.25rem; }
.detail-muted { margin-left: 1.5rem; color: var(--medium); font-size: 0.82rem; }
.cta-link { display: inline-block; margin-top: 1rem; color: var(--primary); font-weight: 600; font-size: 0.9rem; }

/* --- Color --- */
.text-sand { color: var(--sand); }

/* --- Margin --- */
.mb-1 { margin-bottom: 0.75rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mt-3 { margin-top: 2rem; }

/* --- Layout --- */
.text-left { text-align: left; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.bg-var { background: var(--bg); }

/* --- Flag icons --- */
.flag-icon { width: 18px; height: 12px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }

/* --- Card backgrounds --- */
.card-s2 { background: var(--s2); border-radius: 12px; padding: 1rem; border: 1px solid var(--brd); }
.code-block { display: block; background: rgba(0,0,0,0.04); padding: 0.5rem 0.75rem; border-radius: 8px; }

/* ═══════ FOCUS STATES — WCAG 2.1 AA Keyboard Navigation ═══════ */
/* Globale Tastatur-Fokus-Indikatoren. :focus-visible zeigt Outline NUR
   bei Tastatur-Navigation, nicht bei Maus-Klicks (kein nerviger Klick-Outline).
   Wichtig für Behörden-Sachbearbeiter, die mit Tab navigieren. */

/* Reset: Browser-Default-Outline entfernen (durch eigenen ersetzt) */
*:focus { outline: none; }

/* Standard Fokus-Style: gut sichtbar auf hell UND dunkel */
*:focus-visible {
  outline: 3px solid var(--color-mint, #52B788);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Links/Buttons im Header (dunkler Hintergrund): Cream-Outline */
.site-header a:focus-visible,
.site-header button:focus-visible,
.header-nav a:focus-visible,
.lang-switcher a:focus-visible,
.lang-switcher button:focus-visible {
  outline-color: var(--color-cream, #FEFAE0);
  outline-width: 2px;
  outline-offset: 3px;
}

/* Hamburger-Button: extra-deutlich (kritisch für Mobile-A11y) */
.hamburger:focus-visible {
  outline: 3px solid var(--color-mint, #52B788);
  outline-offset: 4px;
  background: rgba(82, 183, 136, 0.15);
}

/* Form-Inputs: deutlicherer Border statt nur Outline */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-mint, #52B788);
  outline-offset: 0;
  border-color: var(--color-mint, #52B788);
}

/* Skip-Link (Screen-Reader / Keyboard): bei Fokus sichtbar machen */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--color-forest, #1B4332);
  color: var(--color-cream, #FEFAE0);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  z-index: 10000;
  transition: top 0.2s;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  outline: 3px solid var(--color-mint, #52B788);
  outline-offset: 2px;
}