/* =========================================================================
   Eigene Gestaltung
   Auf dem Server liegt diese Datei als /mnt/verbatim1tb/podman_kochbuch/custom.css
   und wird bei Updates nie überschrieben. Änderungen wirken sofort:
   speichern, Seite neu laden. Kein Neustart, kein Build.

   Alles hier steht in der Ebene "custom". Sie gewinnt gegen alle Regeln aus
   app.css, auch ohne !important. Übersicht über Variablen und Klassen: DESIGN.md
   ========================================================================= */

@layer custom {

  /* ---------- 1. Stellschrauben: Variablen überschreiben ----------
     light-dark(hell, dunkel) setzt beide Farbmodi auf einmal. */
  :root {
    /* --accent:      light-dark(#d7261e, #f0544a);   Buttons, Links, Akzente */
    /* --accent-soft: light-dark(#fdeae7, #3d1a17);   Hintergrund für Akzent-Flächen */
    /* --paper:       light-dark(#ffffff, #141110);   Seitenhintergrund */
    /* --ink:         light-dark(#1c1714, #f5f0ec);   Haupttext */
    /* --muted:       light-dark(#857b74, #a3978f);   Nebentext */
    /* --line:        light-dark(#ece6e1, #332b26);   feine Linien */

    /* --font-display: "Fraunces", Georgia, serif;    Überschriften */
    /* --font-sans: "Figtree", system-ui, sans-serif; Fließtext */

    /* --radius: .875rem;  --radius-lg: 1.25rem;  --radius-xl: 1.75rem; */
    /* --wrap: 76rem;      maximale Inhaltsbreite */
  }

  /* ---------- 2. Gezielte Anpassungen ----------
     Beispiele, zum Ausprobieren die Kommentarzeichen entfernen. */

  /* Rezepttitel etwas kleiner */
  /* .recipe-title { font-size: clamp(2rem, 1.4rem + 3vw, 3.75rem); } */

  /* Bild im Rezeptkopf rund statt quadratisch */
  /* .head-media { border-radius: 50%; } */

  /* Rezeptkarten im Querformat */
  /* .card-media { aspect-ratio: 4 / 3; } */

}
/* Test */