/* ============================================================================
   DRK Corporate Design – Override-Layer für Content Studio (DRK_THEME=1)
   Werte 1:1 aus dem DRK-Styleguide (styleguide.drk.de):
   - Web-Farben: Digital → Webseite
   - Web-Schrift: Digital → Webseite (Helvetica Neue; Ersatz: Open Sans → Arial → Helvetica)
   Wird NACH app.css geladen und ist bewusst UNGELAYERT, damit es Tailwinds
   @layer-Regeln (theme/input.css) überschreibt. Nur aktiv, wenn DRK_THEME an ist.

   Exakte Styleguide-Farben (Digital/Webseite):
     DRK-Rot     #E60005   Buttons, Icons, Primär-Akzent, rote Flächen
     Softrot     #E46450   Headlines, Icons
     Dunkelrot   #A51E0F   Hover/Mouseover (Rot)
     Dunkelblau  #002D55   Menü, Buttons, Sekundär-Akzent
     Mittelblau  #008CCD   Links, Hover
     Volltonblau #2275D0   Fließtext-Links
     Hellblau    #EBF5FF   Formular-Hintergrund, dezente Hervorhebung
     Dunkelgrau  #554F4A   Fließtext
     Mittelgrau  #B4B4B4   Trennlinien
     Hellgrau    #EFEEEA   alternativer Flächen-Hintergrund
   Tints/Shades ohne Styleguide-Definition sind aus #E60005 abgeleitet (derived).
   ============================================================================ */

/* Open Sans selbst gehostet (DSGVO-konform, CSP: font-src 'self'; kein Google-CDN).
   Offizielle Web-Ersatzschrift des DRK für Helvetica Neue. */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/opensans-300.963e5d0fdf9d.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/opensans-400.289ab8c3689e.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/opensans-500.a6f0123a9439.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/opensans-600.a6d99d784ef0.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/opensans-700.a957c7ebe6c1.woff2") format("woff2"); }

:root {
  /* Marken-Skala: 500 = Softrot (exakt), 600 = DRK-Rot (exakt), 700 = Dunkelrot/Hover (exakt) */
  --color-brand-50:  #fdecec; /* derived */
  --color-brand-100: #fbd6d7; /* derived */
  --color-brand-200: #f6adae; /* derived */
  --color-brand-300: #f08a84; /* derived */
  --color-brand-400: #ec5a52; /* derived */
  --color-brand-500: #e46450; /* Softrot */
  --color-brand-600: #e60005; /* DRK-Rot */
  --color-brand-700: #a51e0f; /* Dunkelrot */
  --color-brand-800: #85160b; /* derived */
  --color-brand-900: #6b110a; /* derived */
  --color-brand-950: #400a06; /* derived */

  /* Akzent-Skala: Blautöne des DRK (Sekundärfarben) */
  --color-accent-300: #b4c3d7; /* Blau 30% */
  --color-accent-400: #698caf; /* Blau 60% */
  --color-accent-500: #008ccd; /* Mittelblau */
  --color-accent-600: #002d55; /* Dunkelblau */

  /* Schrift: eine Schrift für alles (Helvetica Neue, Web-Ersatz Open Sans …) */
  --font-sans: "Helvetica Neue", "Open Sans", Arial, Helvetica, sans-serif;
  --font-display: "Helvetica Neue", "Open Sans", Arial, Helvetica, sans-serif;

  /* Schatten neutralisieren (kein Flieder-Ton) */
  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.05), 0 6px 20px -10px rgb(0 0 0 / 0.12);
  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.06), 0 10px 30px -14px rgb(0 0 0 / 0.14);
  --shadow-pop:  0 18px 50px -16px rgb(0 0 0 / 0.22);
  --shadow-btn:  0 6px 16px -8px rgb(230 0 5 / 0.40);
}

/* ── Basis ─────────────────────────────────────────────────────────────── */
body { font-family: var(--font-sans); color: #554f4a; }            /* Fließtext Dunkelgrau */
h1, h2, h3, h4, .font-display { font-family: var(--font-display); }
::selection { background: #fac3af; }                                /* DRK-Rot 30% */

/* App-Hintergrund zurückhaltend/klar: Weiß → sehr helles Hellgrau */
.app-bg {
  background: linear-gradient(180deg, #ffffff 0%, #f5f4f1 100%);
}

/* ── Verläufe flach als DRK-Rot (Styleguide: keine bunten Verläufe) ─────── */
.brand-gradient { background-image: none; background-color: #e60005; }
.brand-text-gradient {
  background-image: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  color: #e60005;
}

.btn-primary {
  background-image: none; background-color: #e60005;
  box-shadow: 0 6px 16px -8px rgb(230 0 5 / 0.40);
}
.btn-primary:hover {
  filter: none; background-color: #a51e0f;                          /* Dunkelrot */
  box-shadow: 0 8px 20px -8px rgb(230 0 5 / 0.50);
}

.nav-item:hover { background-color: #fdecec; color: #a51e0f; }
.nav-item.active {
  background-image: none; background-color: #e60005;
  box-shadow: 0 8px 18px -10px rgb(230 0 5 / 0.45);
}

.btn-soft { background: #fdecec; color: #a51e0f; }
.btn-soft:hover { background: #fbd6d7; }

/* Eingaben: DRK-roter Fokusring; Formular-Grundton optional Hellblau bei :focus */
.input:focus {
  border-color: #e60005;
  box-shadow: 0 0 0 4px rgb(230 0 5 / 0.15);
}

/* Select-Chevron in Dunkelgrau statt Flieder-Grau */
select.input, .select-sm {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23554f4a' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Toggle/Checkbox in DRK-Rot */
.switch:has(input:checked) { background: #e60005; }
.checkbox { accent-color: #e60005; }

/* Passwort-Regel-Punkte in DRK-Rot */
.pw-rules li::before { background: #e60005; }

/* Logo steht immer auf weißem Grund mit Schutzzone – kein farbiger Halo */
.logo-halo::before { display: none; }