/*
 Theme Name: Divi Grundschule Babensham Child
 Theme URI: https://ska-pixels.com
 Description: Ein Divi Child-Theme für die Grundschule Babensham
 Author: SKA Pixels - Sebastian Kaiser
 Author URI: https://ska-pixels.com
 Template: Divi
 Version: 1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */

/* Claude Design handoff */
/* =========================================================
   Grundschule Babensham — Design Tokens
   Einfügen unter: Divi → Theme Options → Custom CSS
   (besser: Child-Theme style.css)
   ========================================================= */
:root {
  /* --- Marken-Farben (aus den 5 Logo-Puzzleteilen) --- */
  --brand-pink: #E8577A;
  --brand-pink-dark: #C93F60;
  --brand-orange: #F2A23C;
  --brand-orange-dark: #D6821E;
  --brand-green: #7BC46B;
  --brand-green-dark: #58A046;
  --brand-yellow: #F5D033;
  --brand-yellow-dark: #D8AE0E;
  --brand-blue: #5D93C9;
  --brand-blue-dark: #3E71A8;

  /* --- Ink + Neutrale --- */
  --ink: #201E1B;          /* nie pures #000 */
  --ink-soft: #4A4640;
  --neutral-900: #2B2A27;
  --neutral-700: #55524C;
  --neutral-500: #8A8680;
  --neutral-300: #D8D4CC;
  --neutral-200: #EAE7E0;
  --neutral-100: #F5F3EE;
  --paper: #FFFDF8;        /* warmes Off-White = Seitenhintergrund */
  --white: #FFFFFF;

  /* --- Semantisch --- */
  --color-bg: var(--paper);
  --color-surface: var(--white);
  --color-surface-sunken: var(--neutral-100);
  --color-border: var(--neutral-300);
  --color-text: var(--ink);
  --color-text-muted: var(--neutral-700);
  --color-primary: var(--brand-blue);
  --color-primary-hover: var(--brand-blue-dark);
  --color-cta: var(--brand-green-dark);   /* Krankmeldung = grün */
  --color-focus-ring: #2A6FDB;

  /* --- Tints (Karten-Hintergründe / Kategorie-Chips) --- */
  --tint-pink: #FCE9EE;
  --tint-orange: #FCEDD9;
  --tint-green: #E9F6E4;
  --tint-yellow: #FDF6DC;
  --tint-blue: #E9F1FA;

  /* --- Typografie --- */
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.9375rem;   /* 15px */
  --text-base: 1.0625rem; /* 17px — BITV-freundlich */
  --text-md: 1.25rem;     /* 20px */
  --text-lg: 1.5rem;      /* 24px */
  --text-xl: 1.875rem;    /* 30px */
  --text-2xl: 2.375rem;   /* 38px */
  --text-3xl: 3rem;       /* 48px */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* --- Abstände (4px-Raster) --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --container-max: 1200px;
  --container-narrow: 760px;

  /* --- Radien --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* --- Schatten (weich, nie hart) --- */
  --shadow-sm: 0 1px 3px rgba(32,30,27,.08);
  --shadow-md: 0 4px 16px rgba(32,30,27,.10);
  --shadow-lg: 0 12px 32px rgba(32,30,27,.12);
  --border-ink: 2.5px solid var(--ink);

  /* --- Motion --- */
  --ease-standard: cubic-bezier(.25,.1,.25,1);
  --ease-bouncy: cubic-bezier(.34,1.56,.64,1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
}

/* --- Basis-Typografie (überschreibt Divi-Defaults) --- */
body, .et_pb_module, .et_pb_text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
body { background: var(--paper); }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text);
  line-height: var(--leading-tight);
}
h1 { font-size: clamp(1.75rem, 5vw, var(--text-2xl)); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }

/* Links: nie nur über Farbe erkennbar (WCAG 1.4.1) */
a { color: var(--brand-blue-dark); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
a.gsb-btnlink, a.gsb-btnlink:hover { text-decoration: none; }