/*!
  BRK/DRK Web Core CSS (v1.0, 2025-11-11)
  Source: DRK Erscheinungsbild (Zusammenfassung) – Farben, Typografie, Gestaltungsprinzipien.
  Notes:
  - This file defines CSS variables and base styles aligned with the DRK style summary.
  - Helvetica Neue/Merriweather should be provided by your system or self-hosted webfonts.
  - Helvetica Neue is a licensed font; do not hotlink. Merriweather is open-source.
  - Logo handling remains subject to DRK rules; see internal styleguide for exact spacing/usage.
*/

/* ========== Root variables ========== */
:root {
  /* Core brand colors */
  --drk-red: #e60005;       /* Primärfarbe Rot */
  --drk-black: #000000;     /* Schwarz (Text) */
  --drk-white: #ffffff;     /* Weiß (Flächen) */

  /* Secondary palette (web support colors) */
  --drk-blue-900: #002d55;  /* Dunkelblau (Auszeichnung, Piktos) */
  --drk-blue-100: #ebf5ff;  /* Hellblau (Flächen) */
  --drk-red-300: #eb8264;   /* Rot 60% */
  --drk-red-100: #fac3af;   /* Rot 30% */
  --drk-blue-600: #698caf;  /* Blau 50% */
  --drk-blue-300: #b4c3d7;  /* Blau 25% */

  /* Derived utilities */
  --drk-text: var(--drk-black);
  --drk-bg: var(--drk-white);
  --drk-link: var(--drk-blue-900);
  --drk-link-hover: #001d37;
  --drk-focus: var(--drk-red);

  /* Typography */
  --font-sans: "Helvetica Neue", Arial, "Segoe UI", Roboto, "Noto Sans", system-ui, -apple-system, "Liberation Sans", sans-serif;
  --font-serif: "Merriweather", Georgia, "Times New Roman", Times, serif;

  /* Type scale (approximate web equivalents of pt sizes in guide) */
  --fs-xxl: clamp(2rem, 3.2vw, 2.4rem);   /* big headline */
  --fs-xl:  clamp(1.75rem, 2.6vw, 2rem);  /* headline */
  --fs-lg:  1.375rem;                     /* subheadline */
  --fs-md:  1rem;                         /* body */
  --fs-sm:  0.875rem;                     /* small / captions */
  --fs-xs:  0.8125rem;                    /* meta */

  /* Spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Radius & shadows */
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 6px 24px rgba(0,0,0,.09);
}

/* Optional: self-host or load Merriweather, then uncomment.
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;700&display=swap');
*/

/* ========== Base reset ========== */
*,
*::before,
*::after { box-sizing: border-box; }

html:focus-within { scroll-behavior: smooth; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  color: var(--drk-text);
  background: var(--drk-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; }

/* ========== Typography ========== */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  line-height: 1.25;
  font-family: var(--font-serif); /* Merriweather for headlines */
  font-weight: 700;
  color: var(--drk-red); /* Headlines on hellen Hintergründen in DRK-Rot */
}

h1 { font-size: var(--fs-xxl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--drk-text);
}

p { margin: 0 0 var(--space-4); font-size: var(--fs-md); }

small, .text-small { font-size: var(--fs-sm); }

.lead { font-size: 1.125rem; font-family: var(--font-serif); font-weight: 300; }

/* Quotes: Auszeichnung mit Dunkelblau auf hellen Flächen */
blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--drk-blue-100);
  border-left: 4px solid var(--drk-blue-900);
  color: var(--drk-blue-900);
  font-family: var(--font-serif);
  font-style: italic;
}

/* Bildunterschriften: kleine, leicht stärkere Auszeichnung */
figcaption, .caption {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--drk-text);
}
.caption--strong { font-weight: 700; }

/* Links */
a {
  color: var(--drk-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--drk-link-hover); }
a:focus-visible {
  outline: 3px solid var(--drk-focus);
  outline-offset: 2px;
}

/* ========== Layout helpers ========== */
.container {
  width: min(1160px, 100% - 2rem);
  margin-inline: auto;
}

.grid {
  display: grid;
  gap: var(--space-4);
}
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Spacing utilities */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-1{margin-top:var(--space-1)}.mb-1{margin-bottom:var(--space-1)}
.mt-2{margin-top:var(--space-2)}.mb-2{margin-bottom:var(--space-2)}
.mt-3{margin-top:var(--space-3)}.mb-3{margin-bottom:var(--space-3)}
.mt-4{margin-top:var(--space-4)}.mb-4{margin-bottom:var(--space-4)}
.mt-5{margin-top:var(--space-5)}.mb-5{margin-bottom:var(--space-5)}
.p-1{padding:var(--space-1)}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-5{padding:var(--space-5)}

/* Color utilities (Text) */
.text-red    { color: var(--drk-red) !important; }
.text-blue   { color: var(--drk-blue-900) !important; }
.text-dark   { color: var(--drk-black) !important; }
.text-light  { color: var(--drk-white) !important; }

/* Color utilities (Background) */
.bg-red      { background-color: var(--drk-red) !important; color: var(--drk-white) !important; }
.bg-blue     { background-color: var(--drk-blue-900) !important; color: var(--drk-white) !important; }
.bg-blue-100 { background-color: var(--drk-blue-100) !important; color: var(--drk-blue-900) !important; }
.bg-white    { background-color: var(--drk-white) !important; color: var(--drk-black) !important; }
.bg-light    { background-color: #f7f7f7 !important; }

/* Border utilities */
.border { border: 1px solid #e5e7eb; }
.rounded { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }

/* ========== Buttons ========== */
.btn {
  --btn-bg: var(--drk-red);
  --btn-fg: var(--drk-white);
  --btn-hover: #b80004;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  padding: .625rem .9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--btn-hover); }
.btn:focus-visible { outline: 3px solid var(--drk-focus); outline-offset: 2px; }

.btn--blue { --btn-bg: var(--drk-blue-900); --btn-hover: #001d37; }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--drk-red);
  --btn-hover: rgba(230,0,5,0.08);
  border: 1px solid var(--drk-red);
  background: var(--btn-bg);
  color: var(--btn-fg);
}
.btn--ghost:hover { background: var(--btn-hover); }

/* ========== Cards & Banderole ========== */
.card {
  background: var(--drk-white);
  border: 1px solid #eee;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}
/* "Banderole" – rote Fläche vor Bild oder als Flag */
.banderole {
  display: inline-block;
  background: var(--drk-red);
  color: var(--drk-white);
  padding: .25rem .5rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ========== Tables ========== */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th,
.table td {
  padding: .6rem .75rem;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}
.table thead th {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--drk-blue-900);
  background: var(--drk-blue-100);
}

/* ========== Forms ========== */
.label { display:block; margin-bottom:.25rem; font-weight:700; }
.input, .select, .textarea {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm);
  background: var(--drk-white);
  color: var(--drk-text);
}
.input:focus, .select:focus, .textarea:focus {
  outline: 3px solid var(--drk-focus);
  outline-offset: 2px;
  border-color: var(--drk-focus);
}

/* ========== Alerts ========== */
.alert {
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.alert--info    { background: var(--drk-blue-100); color: var(--drk-blue-900); border-color: #cfe3fa; }
.alert--danger  { background: #fff5f5; color: var(--drk-red); border-color: #ffd5d7; }

/* ========== Logo helpers (opt-in) ========== */
/* Use a white background behind the logo to respect the "red cross on white" rule.
   This class does NOT replace spacing/proportion rules from the official guide. */
.drk-logo-on-white {
  background: var(--drk-white);
  padding: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px #e5e7eb inset;
}

/* Reserve clear space around the logo (customize via --logo-safezone) */
.drk-logo-safezone {
  --logo-safezone: 12px;
  padding: var(--logo-safezone);
}

/* Dark context: place logo variant approved for dark usage only */
.on-dark { background: var(--drk-blue-900); color: var(--drk-white); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--drk-white); }

/* ========== Utilities for quick prototyping ========== */
.hide { display: none !important; }
.center { text-align: center; }
.right { text-align: right; }

/* ========== Print tweaks (optional) ========== */
@media print {
  a { text-decoration: none; color: var(--drk-text); }
  .btn { box-shadow: none; border: 1px solid #aaa; color: var(--drk-text); background: transparent; }
  .alert { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}