/* ==========================================================
   Glück & Ich – ZENTRALES DESIGN
   Hier wird das Aussehen der ganzen Website eingestellt.
   Eine Änderung hier wirkt überall.
   ========================================================== */

/* ---------- DEINE EIGENE SCHRIFT ----------
   Sobald deine Schrift fertig ist: Datei als
   vorschau/assets/fonts/glueck-hand.woff2 ablegen – fertig.
   (Eine .ttf oder .otf wandle ich dir gern in .woff2 um.)
   Bis dahin wird automatisch die nächste Schrift aus --font-hand verwendet. */
@font-face {
  font-family: "Glück Handschrift";
  src: url("../assets/fonts/glueck-hand.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* ---------- Farben ----------
     Schwarz und Grün: aus der Logo-Datei gemessen. Pink: aus deinem Herz gemessen. */
  --paper: #ffffff;          /* Hintergrund */
  --ink: #151515;            /* Schrift und Linien – Tinte aus dem Logo */
  --pencil: #8c8c8c;         /* feine Skizzenlinien – wie die grauen Striche im Logo */
  --pencil-light: #e4e4e0;   /* sehr helle Linien */
  --placeholder-bg: #f5f5f2; /* Platzhalterflächen */
  --clover: #7fbc7f;         /* Kleeblatt-Hellgrün aus dem Logo (Akzent) */
  --clover-dark: #396638;    /* Dunkelgrün aus dem Logo: Links, Fokus (gut lesbar) */
  --clover-tint: #eef6ee;    /* ganz zartes Grün */
  --heart: #dd2783;          /* Herz-Pink aus deinem Herz (sparsam!) */
  --heart-tint: #fce8f0;     /* ganz zartes Pink */

  /* ---------- BUTTONS ----------
     Farbe hinter dem gewählten Button (z. B. „Home“, „Deutsch“) und beim Darüberfahren.
     Deutsch: Kleegrün. Englisch: Herz-Pink (siehe weiter unten). */
  --button-tint: transparent;        /* kein Hintergrund (früher: #e2f2c0 helles Kleegrün) */
  --button-line: #5f9a2e;            /* Kleegrün für Rand und Unterstrich */
  --button-hover: var(--clover-dark); /* dunkle Füllung beim Darüberfahren über schwarze Buttons */

  /* ---------- Schriften ---------- */
  /* Handschrift für Überschriften und die Rechtecke: zuerst DEINE Schrift,
     solange sie fehlt die Windows-Handschrift "Ink Free". */
  --font-hand: "Glück Handschrift", "Ink Free", "Segoe Print", "Comic Sans MS", cursive;
  /* Fließtext: Verdana – klar und kräftig, auf fast allen Geräten vorhanden.
     Fehlt sie (z. B. auf manchen Android-Handys), wird eine ähnliche Schrift genommen. */
  --font-body: Verdana, Geneva, "DejaVu Sans", "Segoe UI", sans-serif;
  /* Überschriften im Stil des Logos: mehrfach nachgezogene Bleistift-Linien.
     "none" schaltet den Effekt aus (z. B. wenn deine eigene Schrift das schon kann). */
  --heading-sketch:
    0.7px 0.5px 0 rgba(29, 29, 27, 0.55),
    -0.8px 0.7px 0 rgba(140, 140, 140, 0.55),
    1.4px -0.6px 0 rgba(140, 140, 140, 0.35),
    -1.2px -0.9px 0 rgba(140, 140, 140, 0.25);
  --heading-weight: 700;
  --text-size: 1rem;         /* Verdana läuft breit – deshalb etwas kleiner als vorher */
  --line-height: 1.65;

  /* ---------- Abstände ---------- */
  --space-xs: 0.375rem;
  --space-s: 0.75rem;
  --space-m: 1.25rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --page-max: 1180px;        /* maximale Breite der Seite */
  --sidebar-width: 300px;    /* Breite der rechten Seitenleiste */
  --portrait-width: 90px;    /* Foto von dir rechts im Info-Kasten (Höhe ergibt sich: Hochformat 3:4) */
  --logo-width: 490px;       /* Breite des Logos im Kopfbereich (Bild ist 490 px breit – größer wird es unscharf) */

  /* ---------- Handgezeichnete Ecken ---------- */
  --wobbly: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --wobbly-soft: 18px 6px 20px 8px / 8px 20px 6px 18px;

  /* ---------- Die anklickbaren RECHTECKE (Tiles) ---------- */
  --tile-columns: 3;              /* wie viele nebeneinander (ab Tablet) */
  --tile-min-height: 170px;       /* Höhe */
  --tile-gap: 1.5rem;             /* Abstand zwischen den Rechtecken */
  --tile-bg: var(--paper);        /* Hintergrundfarbe */
  --tile-border: 2px solid var(--ink);
  --tile-radius: var(--wobbly);
  --tile-shadow: none;            /* z. B.: 4px 6px 0 var(--pencil-light) */
  --tile-hover-border-color: var(--clover-dark);
  --tile-hover-tilt: -0.8deg;     /* leichtes Kippen beim Darüberfahren */
  --tile-label-size: 2.6rem;      /* Schriftgröße in den Rechtecken */

  /* ---------- BILDRAHMEN ---------- */
  --frame-border: 2px solid var(--ink);
  --frame-radius: var(--wobbly-soft);
  --frame-padding: 8px;
  --frame-bg: var(--paper);
  --frame-shadow: 3px 4px 0 var(--pencil-light);
  --frame-tilt: 0.6deg;           /* Rahmen hängen leicht schief */

  /* ---------- SLIDESHOW ---------- */
  --slideshow-ratio: 3 / 2;       /* Seitenverhältnis der Bildfläche (Bilder werden ganz gezeigt) */
  --slideshow-speed: 0.5s;        /* Dauer des Bildwechsels */

  /* ---------- MENÜ-Liste ---------- */
  --bullet-size: 1.4rem;          /* Größe der Kleeblätter als Aufzählungszeichen */

  /* ---------- FEE und DEKO ---------- */
  --fee-size: 96px;               /* Höhe des Fee-Icons */
  --deco-scale: 1;                /* Herzen/Kleeblätter: 1 = Originalgröße aus der Platzierung */
  --basket-w: 100px;              /* Korb im Herzfang-Spiel */
  --basket-h: 102px;
}

/* Englische Seite: Buttons in Herz-Pink */
:root:lang(en) {
  --button-line: var(--heart);
  --button-hover: #b8206c;           /* etwas dunkleres Pink, damit weiße Schrift gut lesbar bleibt */
}

/* Auf dem Handy etwas kleiner */
@media (max-width: 639px) {
  :root {
    --fee-size: 72px;
    --deco-scale: 0.7;
    --tile-min-height: 110px;
  }
}