/* =====================================================================
   KKG Corporate Identity – Design Tokens & Basis-Komponenten
   Käthe-Kollwitz-Gymnasium Berlin · Schülerfirma Schließfach-Service
   ---------------------------------------------------------------------
   Quelle: kaethe-kollwitz-gymnasium.de (Logo + Website-CSS)
   Schrift: Quattrocento (Google Fonts) einbinden:
   <link href="https://fonts.googleapis.com/css2?family=Quattrocento:wght@400;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   ===================================================================== */

:root{
  /* --- Markenfarben (aus dem Logo abgeleitet) --- */
  --kkg-blue:        #265D8E;   /* Primär – Wortmarke */
  --kkg-blue-dark:   #1d4a72;   /* Hover / dunkle Flächen */
  --kkg-blue-soft:   #e8eff6;   /* Hintergrund / Badges */
  --kkg-gold:        #FCB11B;   /* Sekundär – Emblem/Flamme */
  --kkg-gold-soft:   #fdf2da;
  --kkg-gold-ink:    #8a5e08;   /* lesbarer Goldton auf Hell */

  /* --- Neutrale Palette (aus Website-CSS) --- */
  --kkg-ink:         #333333;   /* Überschriften / Links */
  --kkg-text:        #444444;   /* Fließtext */
  --kkg-muted:       #777777;   /* sekundärer Text */
  --kkg-grey:        #6C6B70;   /* Logo-Grau */
  --kkg-line:        #e7e7e7;   /* Trennlinien */
  --kkg-line-strong: #dcdcdc;
  --kkg-bg:          #ffffff;
  --kkg-bg-soft:     #f6f6f4;

  /* --- Status-Farben --- */
  --kkg-ok:    #2e7d57;  --kkg-ok-soft:   #e6f2ec;
  --kkg-warn:  #a8761b;  --kkg-warn-soft: #f6efdd;
  --kkg-busy:  #9a3b3b;  --kkg-busy-soft: #f3e4e4;

  /* --- Typografie --- */
  --kkg-serif: 'Quattrocento', Georgia, 'Times New Roman', serif;  /* Marke/Headlines */
  --kkg-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* UI/Fließtext */

  /* --- Form --- */
  --kkg-radius: 10px;
  --kkg-radius-sm: 8px;
  --kkg-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);

  /* --- Raster --- */
  --kkg-maxwidth: 1180px;
  --kkg-gap: 24px;
}

/* =====================================================================
   Basis
   ===================================================================== */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--kkg-sans);
  color:var(--kkg-text);
  background:var(--kkg-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--kkg-serif);color:var(--kkg-ink);font-weight:700;line-height:1.25;margin:0 0 .4em}
h1{font-size:42px} h2{font-size:28px} h3{font-size:18px}
p{margin:0 0 1em}
a{color:var(--kkg-blue);text-decoration:none}
a:hover{color:var(--kkg-blue-dark)}
.kkg-wrap{max-width:var(--kkg-maxwidth);margin:0 auto;padding:0 var(--kkg-gap)}

/* =====================================================================
   Logo / Wortmarke
   ===================================================================== */
.kkg-logo{height:48px;width:auto;display:block}        /* SVG-Logo (kkg-logo.svg) */
.kkg-logo--sm{height:32px}
.kkg-logo--lg{height:72px}

/* =====================================================================
   Buttons
   ===================================================================== */
.kkg-btn{
  font-family:var(--kkg-sans);font-size:15px;font-weight:600;cursor:pointer;
  padding:12px 22px;border-radius:var(--kkg-radius);border:1px solid transparent;transition:.15s;
}
.kkg-btn--primary{background:var(--kkg-blue);color:#fff}
.kkg-btn--primary:hover{background:var(--kkg-blue-dark)}
.kkg-btn--ghost{background:#fff;color:var(--kkg-ink);border-color:var(--kkg-line-strong)}
.kkg-btn--ghost:hover{border-color:var(--kkg-muted)}
.kkg-btn--gold{background:var(--kkg-gold);color:var(--kkg-ink)}
.kkg-btn--gold:hover{filter:brightness(.95)}

/* =====================================================================
   Badges / Pills
   ===================================================================== */
.kkg-pill{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
}
.kkg-pill--blue{color:var(--kkg-blue-dark);background:var(--kkg-blue-soft)}
.kkg-pill--gold{color:var(--kkg-gold-ink);background:var(--kkg-gold-soft)}

/* =====================================================================
   Karten & Panels
   ===================================================================== */
.kkg-card{background:#fff;border:1px solid var(--kkg-line);border-radius:var(--kkg-radius);box-shadow:var(--kkg-shadow)}
.kkg-card__head{padding:16px 20px;border-bottom:1px solid var(--kkg-line)}
.kkg-card__body{padding:20px}

/* =====================================================================
   Status-Indikatoren (z. B. Schließfach-Status)
   ===================================================================== */
.kkg-status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:999px}
.kkg-status::before{content:'';width:7px;height:7px;border-radius:50%}
.kkg-status--frei   {background:var(--kkg-ok-soft);   color:var(--kkg-ok)}   .kkg-status--frei::before   {background:var(--kkg-ok)}
.kkg-status--belegt {background:var(--kkg-blue-soft); color:var(--kkg-blue-dark)} .kkg-status--belegt::before {background:var(--kkg-blue)}
.kkg-status--offen  {background:var(--kkg-warn-soft); color:var(--kkg-warn)} .kkg-status--offen::before  {background:var(--kkg-warn)}
.kkg-status--wartung{background:var(--kkg-busy-soft); color:var(--kkg-busy)} .kkg-status--wartung::before{background:var(--kkg-busy)}

/* =====================================================================
   Header-Leiste
   ===================================================================== */
.kkg-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--kkg-line)}
.kkg-header__bar{max-width:var(--kkg-maxwidth);margin:0 auto;padding:14px var(--kkg-gap);display:flex;align-items:center;gap:14px}

/* =====================================================================
   Tabellen
   ===================================================================== */
.kkg-table{width:100%;border-collapse:collapse;font-size:14px}
.kkg-table th,.kkg-table td{text-align:left;padding:13px 20px;border-bottom:1px solid var(--kkg-line)}
.kkg-table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--kkg-muted);font-weight:600;background:var(--kkg-bg-soft)}
.kkg-table tbody tr:hover{background:var(--kkg-bg-soft)}

/* =====================================================================
   Responsive
   ===================================================================== */
@media(max-width:860px){
  h1{font-size:32px}
  .kkg-wrap{padding:0 16px}
}