/* ════════════════════════════════════════════════════════════════
   EINSTELLUNGEN
   Hier stellst du den Look der ganzen Website ein.
   Alle anderen CSS-Dateien lesen nur diese Werte aus.
   ════════════════════════════════════════════════════════════════ */

/* Schriften liegen im Ordner fonts/ (nicht bei Google), damit keine
   Besucherdaten an Google gehen. "latin" reicht für Deutsch, "latin-ext"
   lädt der Browser nur, wenn Sonderzeichen wie ł oder ő vorkommen.
   Andere Schrift? Auf fonts.google.com aussuchen, die .woff2-Dateien
   nach fonts/ legen, die Regeln unten anpassen und bei "Schriften"
   den neuen Namen eintragen. */
@font-face {
  font-family: "Cutive Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cutive-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cutive Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cutive-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/quicksand-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/quicksand-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── Farben ── */
  --farbe-schrift: #923031;        /* Alfie-Weinrot: Text, Linien, Logo */
  --farbe-hintergrund: #FAF6EE;    /* warmes Cremeweiß: Hintergrund auf allen Seiten */
  --farbe-papier: #FFFFFF;         /* Menükarten und Formularfelder */
  --farbe-akzent: #D992A3;         /* Logo-Pink: Kringel, Markierungen */

  /* ── Schriften ── */
  --schrift-text: "Cutive Mono", "Courier New", monospace;
  --schrift-titel: "Quicksand", sans-serif;

  /* ── Schriftgrößen ── */
  --groesse-text: 18px;
  --groesse-klein: 14px;
  --groesse-titel: clamp(30px, 3.4vw, 48px);    /* wächst mit der Fensterbreite */
  --groesse-handschrift: clamp(48px, 5.2vw, 76px);  /* Höhe der gemalten Überschriften */

  /* ── Abstände ── */
  --rand: 24px;          /* links und rechts am Bildschirmrand */
  --abstand: 96px;       /* oben und unten in jedem Abschnitt */

  /* ── Startbild ──
     Foto hinter dem Logo auf der Startseite. Anderes Foto? Dateinamen
     unten austauschen. Der Schleier legt die Hintergrundfarbe
     halbdurchsichtig über das Foto, damit Logo und Menü lesbar bleiben:
     0% = Foto pur (Logo schlecht lesbar), 100% = Foto unsichtbar. */
  --hero-bild: url("../img/cafe-raum.jpg");
  --hero-schleier: 62%;

  /* ── Logo ──
     Die PNG ist schwarz und wird automatisch in --farbe-schrift eingefärbt. */
  --logo: url("../img/logo-alfie.png");
  --logo-format: 720 / 378;        /* Breite / Höhe der Logo-Datei in Pixeln */
  --logo-breite: 92px;             /* Größe oben links in der Kopfzeile */
}

/* Auf dem Handy etwas kompakter.
   Die Seite hat zwei Umbrüche wie Restaurant Elm:
   bis 1100px (Tablet: alles untereinander) und bis 575px (Handy). */
@media (max-width: 575px) {
  :root {
    --groesse-text: 16px;
    --rand: 20px;
    --abstand: 60px;
  }
}