/* ============================================================================
   KIDZ.ME — Design-Tokens und Schriften
   Von jeder Seite eingebunden. Farben oder Schriften bitte NUR hier ändern.
   ============================================================================ */

/* Überschriften in der Schrift des Logos (Young Serif, SIL OFL:
   fonts/OFL-young-serif.txt). Selbst gehostet wie alle Schriften hier. */
@font-face {
  font-family: 'Young Serif';
  src: url('fonts/young-serif.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Patrick Hand';
  src: url('fonts/patrick-hand.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Architects Daughter';
  src: url('fonts/architects-daughter.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gloria Hallelujah';
  src: url('fonts/gloria-hallelujah.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Sand */
  /* Seit 2026-10-09 Papierweiß statt Sand (motive.css legt Korn darüber).
     Der Name bleibt, damit jede Fläche, die var(--sand) nutzt, mitzieht. */
  /* Seit 2026-10-12 (Maurice): rgba(238,234,253,.3) über Weiß = #FAF9FD.
     Deckend gesetzt, damit übereinanderliegende Flächen nicht nachdunkeln. */
  --sand:        #FAF9FD;
  --sand-deep:   #F1EFF7;
  --paper-card:  #FFFFFF;

  /* Text */
  --ink:         #2B3A44;
  --ink-soft:    #5D6E78;
  --ink-faint:   #5C6870;

  /* Farben aus dem Logo (Variante C7, 2026-10-12): Rosé (K), Himmelblau (d),
     Salbei (z), Flieder (.me), Tinte (Feder). Für die Seite etwas weniger
     kräftig als im Logo, in drei Stärken:
       -tief   Text und Knöpfe: mindestens 4,8:1 auf Papier, Weiß darauf 5,1:1
       (ohne)  Linien, Symbole, Zeichnungen — nie für Text
       -hauch  Flächen; Tinte darauf mindestens 9,9:1
     Die alten Namen (--blue, --pink …) bleiben als Verweise, damit jede
     Seite mitzieht. */
  --rose-tief:    #BB435A;
  --rose:         #D196A1;
  --rose-hauch:   #F3E9EB;
  --himmel-tief:  #40719B;
  --himmel:       #7CA0BE;
  --himmel-hauch: #EAEFF3;
  --salbei-tief:  #4E7758;
  --salbei:       #7EA488;
  --salbei-hauch: #ECF1ED;
  --flieder-tief: #7560AF;
  --flieder:      #A296C3;
  --flieder-hauch:#EDEBF2;

  /* Aktion: Links in Himmelblau, der Hauptknopf in Flieder (.me — das Kind) */
  --blue:        var(--himmel-tief);
  --blue-deep:   #355F83;
  --blue-pastel: #B9CDE0;
  --blue-tint:   var(--himmel-hauch);
  --cta:         var(--flieder-tief);
  --cta-hover:   #634F9C;

  /* Akzent: Rosé */
  --pink:        var(--rose);
  --pink-deep:   var(--rose-tief);
  --pink-soft:   var(--rose-hauch);

  /* Buch (aus dem Design-Artefakt) */
  --bind:        #143b3c;
  --gold:        #d9b45c;

  --line:        #E4E0EC;
  --line-strong: #CEC8DC;

  --ok:          var(--salbei-tief);
  --warn:        #A9762B;

  --shadow-sm: 0 1px 2px rgba(43,58,68,.05), 0 3px 10px rgba(43,58,68,.05);
  --shadow-md: 0 8px 20px rgba(43,58,68,.09), 0 24px 50px rgba(43,58,68,.10);

  /* Fast rechte Winkel (Maurice, 2026-10-12): alle Ecken klein. */
  --radius:    4px;
  --radius-sm: 3px;
  --radius-xs: 2px;

  --display: "Young Serif", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --hand:    "Patrick Hand", "Segoe Print", "Bradley Hand", cursive;
  --sans:    ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* 29-10 USER: Slogan „Kidz.me – Von Eltern erdacht. Für Kidz gemacht.“ als erste Zeile jeder Fusszeile.
   Steht hier, weil alle Seiten mit Fusszeile tokens.css laden (styles, seite, buch, recht, so-funktionierts). */
.fuss .fuss-slogan {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--blue);
  margin-bottom: .35rem;
}

/* 29-10 USER „Fusszeile viel zu hoch“: auf kurzen Seiten (Betatest, Shop) endete die Fusszeile mitten im Fenster,
   darunter leerer Hintergrund in derselben Farbe — das sah aus wie eine riesige Fusszeile. Jetzt füllt die Seite
   mindestens das Fenster, main wächst, die Fusszeile sitzt unten. Auf langen Seiten ändert sich nichts.
   Nicht auf den Startseiten (index, start-b mit styles.css): dort verschiebt Flex das Telefon-Layout, und sie ist ohnehin lang. */
html:not(:has(link[href="styles.css"])) body:has(> footer.fuss) {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}
html:not(:has(link[href="styles.css"])) body:has(> footer.fuss) > main { flex: 1 0 auto; }

/* 29-10 USER: gemeinsame Fusszeile (bausteine.FUSS) — Linkspalten, Folgen-Zeile, Rechtszeile.
   Die alten Regeln je Stilblatt (.fuss p + p …) gelten weiter; hier nur, was die neuen Teile brauchen. */
.fuss .fuss-spalten {
  display: grid; grid-template-columns: repeat(4, minmax(0, max-content));
  justify-content: center; column-gap: clamp(1.5rem, 4vw, 3.5rem); row-gap: 1.2rem;
  margin: 1rem auto 1.1rem; text-align: left;
}
.fuss .fuss-titel { margin: 0 0 .35rem; font-weight: 650; color: var(--ink); font-size: .85rem; }
.fuss .fuss-spalte ul { list-style: none; margin: 0; padding: 0; }
.fuss .fuss-spalte li { margin: 0 0 .25rem; line-height: 1.35; }
.fuss .fuss-spalte a { text-decoration: none; }
.fuss .fuss-spalte a:hover, .fuss .fuss-spalte a:focus-visible { text-decoration: underline; }
.fuss .fuss-folgen {
  display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 0 0 .8rem;
}
.fuss .fuss-sozial {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--blue); color: #fff; text-decoration: none;
}
.fuss .fuss-sozial:hover, .fuss .fuss-sozial:focus-visible { background: var(--blue-deep); }
.fuss .fuss-recht { margin-top: 0; }
@media (max-width: 760px) {
  .fuss .fuss-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; max-width: 26rem; }
}