/* base.css – Reset + Design Tokens */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }


:root {
  /* ==============================================
     JUHelp Corporate Design – Farbvariablen
     ============================================== */

  /* Primärfarben (JUH-CD) */
  --brand: #16255E;             /* JUH-Blau */
  --brand-dark: #0F1C47;        /* Dunkleres Blau für Header-Linie */
  --brand-light: #6084BF;       /* Hellblau für Akzente */
  --brand-red: #EB003C;         /* JUH-Rot */
  --brand-red-light: #FF606E;   /* helleres, kräftiges Rot */
  --brand-red-soft: #FF9EA7;    /* noch helleres Rot */
  --brand-yellow: #DEFF00;      /* Störer-Gelb */

  /* Sekundär- und Hintergrundfarben */
  --bg-blue: #eef4fb;           /* sanftes Hellblau für Flächen */
  --bg-red: #ffecec;            /* helles Rosa für Warn-/Alarmbereiche */
  --bg-yellow: #fffbea;         /* dezentes Gelb für Hinweise */
  --bg-light: #f0f0f0;          /* neutrales Seiten-Hintergrundgrau */
  --page-bg: #f0f0f0;           /* Standard-Seitenhintergrund */

  /* Graustufen (neutral und barrierearm) */
  --gray-100: #f7f7f7;
  --gray-200: #eee;
  --gray-300: #ddd;
  --gray-400: #ccc;
  --gray-600: #666;
  --gray-800: #333;
  --white: #ffffff;

  /* ==============================================
     Typografie
     ============================================== */
  --font-sans: "Maven Johanniter", "Maven Pro", ui-sans-serif,
               system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* ==============================================
     Abstände, Ecken, Schatten
     ============================================== */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-2: 0 4px 10px rgba(0, 0, 0, .08);

  /* Containerbreite */
  --container: 1100px;
}


/* === JUHelp: Legacy-Aliasse für ältere CSS (deichgui.css/notfall.css) === */
:root{
  /* alte Farbnamen → neue Corporate-Farben */
  --blue-900: var(--brand);           /* z.B. Header, framed-blue, Buttons */
  --red-700: var(--brand-red);        /* z.B. framed-red, Warnflächen */
  --yellow-500: var(--brand-yellow);  /* Akzent-Gelb (Störer) */

  /* optionale Ergänzungen für Hovers/Abstufungen */
  --brand-red-dark: #7a0000;
  --brand-dark-2: #003b5c;            /* falls du sehr dunkles Blau brauchst */
}


body{ font-family:var(--font-sans); color:var(--gray-800); line-height:1.45; }

/* Seitenhintergrund wie Vorlage */
body { background: var(--page-bg); }

/* Sticky Footer: Footer bleibt unten, egal wie kurz der Inhalt ist */
html, body { height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }



.no-scroll { overflow: hidden; }