/* Nina El Fontroussi — shared stylesheet.
 *
 * Single source of truth for the design tokens and the page chrome that used to
 * be copy-pasted into every page's inline <style>. Five copies had already
 * drifted apart by 2026-08-11:
 *   - --sage was plant green (#4C7A56) on the homepage and purple (#413B8F)
 *     everywhere else, i.e. the same variable name meant two different things;
 *   - impressum.php, datenschutz.php, fehler.php and the newsletter pages never
 *     loaded fonts.css at all, so they rendered in the OS system font while the
 *     homepage/Anmeldung/Beratung used Karla + Fraunces. Side by side they read
 *     as two different websites.
 *
 * Load order — BOTH links, on every page, before the page's own <style>:
 *   <link rel="stylesheet" href="/fonts/fonts.css">
 *   <link rel="stylesheet" href="/assets/site.css">
 *
 * Body class picks the layout:
 *   class="doc"          text pages — Impressum, Datenschutz, Fehler (720px column)
 *   class="doc narrow"   the same, 640px — the newsletter pages
 *   class="app"          booking pages — Anmeldung, Beratung (centered header + cards)
 *   (no class)           the homepage, which brings its own hero layout.
 *
 * Anything genuinely unique to one page (the hero grid, the course accordion,
 * the Beratung calendar) stays in that page's inline <style>.
 */

/* Das Menü (☰) steht seit 2026-08-20 in einer eigenen Datei, weil die
 * /admin/-Seiten es ebenfalls brauchen, site.css als Ganzes aber NICHT laden
 * dürfen (eigene Schrift/Grundgrößen).
 *
 * Seit 2026-08-22 holt jede Seite menu.css als eigenes <link> DIREKT VOR
 * site.css statt über ein @import von hier: eine @import-URL kann PHP nicht
 * mit ?v=<filemtime> versehen (asset_url() in lib/init.php), und damit wäre
 * ausgerechnet das Menü die eine Datei, die nach einem Upload bis zu 24 h alt
 * bleibt. Die Kaskadenreihenfolge ist dieselbe — @import lädt ebenfalls vor
 * allen Regeln dieser Datei. */

/* ---------------------------------------------------------------- tokens -- */

:root {
  /* Surfaces + text */
  --cream: #FBF7F1;
  --ink:   #33302B;
  --muted: #6F6A62;
  --card:  #FFFFFF;
  --line:  #EAE2D6;

  /* Accents, all sampled from the hero photo (Andy/Nina 2026-07-23) */
  --accent:      #413B8F;   /* Nina's sweater purple — buttons, links, headings */
  --accent-dark: #2A266A;   /* hover + body links */
  --accent-soft: #ECE4F4;   /* soft fills, badge backgrounds, rules */
  --green:       #4C7A56;   /* the plant — homepage role bullets */
  --red:         #D51D25;   /* the armchair — kicker + NEU banner */

  /* Feedback states */
  --rose-soft: #F9E2E4;
  --rose-dark: #B04A55;
  /* Amber = "act soon, still possible" (few spots left). Keeps rose reserved
     for "full/error" and purple for "open"; the admin calendar already uses
     the same Bernstein logic for booked days. (Andy 2026-08-11) */
  --amber-soft: #F9EED8;
  --amber-dark: #9C6B1D;

  --rainbow: linear-gradient(90deg,
    #FEA3AA, #F8B88B, #FAF884, #BAED91, #B2CEFE, #F2A2E8);

  /* Legacy aliases. The palette went purple on 2026-07-23 but the variable
     names stayed terracotta/sage/lavender. Keeping them as aliases means the
     existing rules keep working AND two pages can no longer disagree about
     what --sage means: it now resolves to the accent in exactly one place. */
  --terracotta:      var(--accent);
  --terracotta-dark: var(--accent-dark);
  --terracotta-soft: var(--accent-soft);
  --sage:            var(--accent);
  --sage-soft:       var(--accent-soft);
  --lavender:        var(--accent);
  --lavender-dark:   var(--accent-dark);
}

/* ------------------------------------------------------------------ base -- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Karla', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
}

a { color: var(--accent-dark); }

/* Several pages clear the default focus ring on inputs to recolor the border.
   This puts a visible ring back for keyboard users. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.rainbow-bar { height: 6px; background: var(--rainbow); }

footer {
  text-align: center;
  padding: 18px;
  color: var(--muted);
  font-size: 14px;
}
footer a { color: var(--muted); }

/* -------------------------------------------------- text pages (.doc) ----- */

body.doc main {
  max-width: 720px;
  margin: 0 auto;
  /* 76px top: the fixed menu button (bottom edge ~56px) floats over the page
     since 2026-08-11; the left-aligned h1 must start below it. */
  padding: 76px 20px 60px;
}
body.doc.narrow main { max-width: 640px; }

body.doc h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  margin: 0 0 24px;
  color: var(--accent);
}
body.doc.narrow h1 { font-size: 30px; margin: 0 0 20px; }

body.doc h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 20px;
  margin: 32px 0 8px;
  color: var(--ink);
}

body.doc p,
body.doc ul { margin: 0 0 14px; }
body.doc li { margin-bottom: 4px; }

body.doc a { font-weight: 600; text-decoration: none; }
body.doc a:hover { text-decoration: underline; }

/* Kein ".back" mehr auf den .doc-Seiten: den "← Zurück zur Startseite"-Link
   hat die Navileiste (lib/nav.php) ersetzt. beratung/cancel.php bringt seinen
   eigenen mit — die Seite hängt an einem Mail-Link und hat bewusst keine Navi. */

body.doc footer { border-top: 1px solid var(--line); }

/* Form primitives — used by the newsletter pages, available to any .doc page. */
body.doc label.field { display: block; margin: 0 0 14px; font-weight: 600; }

body.doc input[type=text],
body.doc input[type=email] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
body.doc input:focus { outline: none; border-color: var(--accent); }
/* …but keyboard users still get a ring: the rule above only recolors the
   border, which is easy to miss. Same specificity, declared later, so it wins
   for focus-visible and stays out of the way for mouse clicks. */
body.doc input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

body.doc button {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  padding: 12px 22px;
  cursor: pointer;
}
body.doc button:hover { background: var(--accent-dark); }

body.doc a.btn-link {
  display: inline-block;
  font-weight: 700;
  color: #fff !important;
  background: var(--accent);
  border-radius: 8px;
  padding: 11px 20px;
  text-decoration: none;
}
body.doc a.btn-link:hover { background: var(--accent-dark); text-decoration: none; }

body.doc .note { color: var(--muted); font-size: 14px; }

body.doc .box {
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 20px;
}
body.doc .box.ok  { background: var(--accent-soft); }
body.doc .box.err { background: var(--rose-soft); color: var(--rose-dark); }

/* Honeypot field — off-screen, must stay reachable for bots but never visible. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------ booking pages (.app) chrome --- */

body.app header.page {
  max-width: 720px;
  margin: 0 auto;
  /* 68px top clears the fixed menu button (bottom edge ~56px) on every
     viewport — the centered h1 can reach the column's left edge on tablets. */
  padding: 68px 20px 8px;
  text-align: center;
}

body.app .back {
  display: inline-block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 18px;
}
body.app .back:hover { color: var(--accent-dark); }

body.app h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 40px;
  margin: 0 0 6px;
  color: var(--accent);
}

body.app .address { color: var(--muted); margin: 0; }

body.app main { max-width: 720px; margin: 0 auto; padding: 12px 20px 70px; }

body.app section { margin-top: 36px; }

body.app h2.group {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--accent-soft);
  color: var(--ink);   /* sub-headings stay dark; only the page h1 is purple */
}

body.app .intro {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 24px;
  margin-top: 28px;
  font-size: 16px;
}
body.app .intro h3 { font-family: 'Fraunces', serif; font-size: 20px; margin-top: 0; }
/* War "word-break: break-all" (für lange URLs im Beratungs-Intro). Das zerlegte
   auf dem Handy aber auch ganz normale Linktexte mitten im Wort ("Kursanmeld/
   ung"). "anywhere" bricht nur, wenn es sonst wirklich nicht passt. */
body.app .intro a { overflow-wrap: anywhere; }

body.app footer { padding: 24px; }

@media (max-width: 560px) {
  body.app h1 { font-size: 32px; }
}