@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto-v30-latin-regular.woff2') format('woff2'); 
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat-v26-latin-700.woff2') format('woff2'); 
}


:root {
  --text-color: #333;
  --bg-color: white;
  --subtext-color: #5a5a5a;
  --recipe-h2-color: #2d2a54;
  --recipe-h3-color: #4b3b88; 
  --more-recipes-color: rgba(255,255,255,0.6);
}

body.dark {
  --text-color: white;
  --bg-color: #2a2a2a;
  --subtext-color: #bbb;
  background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('holz.jpg');
  --recipe-h2-color: #b8b5da;   
  --recipe-h3-color: #b4abdb;
  --more-recipes-color: rgba(0, 0, 0, 0.5);
}





header {
  display: flex; /* Aktiviert Flexbox für das Header-Layout */
  justify-content: space-between; /* Verteilt die Kinder horizontal: links & rechts mit maximalem Abstand */
  align-items: center; /* Zentriert die Kinder vertikal */
  
  background: linear-gradient(90deg, #2d2a54, #4b3b88); 
  /* Ein Farbverlauf von dunkelblau (#2d2a54) zu violett (#4b3b88) von links nach rechts */
  
  color: #f5f5f5; /* Standardfarbe für Text im Header (helle Schrift) */
  
  padding: 15px 40px; /* Innenabstand: 15px oben/unten, 40px links/rechts */
  
  font-size: 19px; /* Basis-Textgröße für Header-Inhalt */
  
  position: sticky; /* Header bleibt oben sichtbar, wenn die Seite scrollt */
  top: 0; /* Position an der Oberkante des Viewports */
  
  box-shadow: 0 3px 10px rgba(0,0,0,0.3); 
  /* Schatten unter dem Header für Tiefe: 0px horizontal, 3px vertikal, 10px Blur, leichte Transparenz */
  
  border-bottom-left-radius: 25px; 
  border-bottom-right-radius: 25px; 
  /* Rundungen an den unteren Ecken des Headers */
  
  z-index: 100; /* Sorgt dafür, dass der Header über anderen Elementen bleibt */
}





header h1 {
  margin: 0; /* Entfernt den Standardabstand über/unter der Überschrift */
  font-family: "Montserrat", sans-serif; /* Schrift für die Überschrift */
  font-weight: 600; /* Fettigkeit der Schrift */
  text-shadow: 1px 1px 4px rgba(0,0,0,0.3); 
  /* Leichter Schatten hinter der Schrift für bessere Lesbarkeit auf Farbverlauf */
}


.header-right {
  display: flex; /* Flexbox für den rechten Bereich (Datum + Button) */
  align-items: center; /* Zentriert Elemente vertikal */
  gap: 15px; /* Abstand zwischen den Kindern (Datum und Button) */
}


#datum {
  background: rgba(255,165,0,0.2); 
  /* leicht transparenter orangener Hintergrund */
  
  padding: 6px 14px; 
  /* Innenabstand: 6px oben/unten, 14px links/rechts */
  
  border-radius: 20px; 
  /* Rundungen für die kleine "Kapsel"-Optik */
  
  font-size: 15px; 
  /* ACHTUNG: hier fehlt wahrscheinlich die Einheit (px). Richtig: 15px */
  
  font-weight: 400; /* Normale Schriftstärke */
  
  color: #e0e0e0; /* Textfarbe (hellgrau) */
  
  box-shadow: inset 0 0 6px rgba(255,255,255,0.2); 
  /* Innerer Schatten, damit der Hintergrund plastischer wirkt */
}



body {
  background-image:  linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('holz.jpg'); /*linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)) erzeugt ein Overlay, das das Bild abdunkelt.*/
  background-size: cover;       /* Bild füllt die gesamte Fläche */
  background-position: center;  /* immer zentriert */
  background-attachment: fixed; /* bleibt beim Scrollen stehen (Parallax-Effekt) */
  margin: 0;                    /* keine weißen Ränder */
  font-family: 'Roboto', sans-serif;
}




.recipe-grid {
  display: grid; 
  /* Aktiviert CSS Grid Layout, damit die Kinder-Elemente (die Rezeptkarten) in einem Raster angeordnet werden */

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /*Erstelle so viele Spalten wie möglich, jede mindestens 250px breit, und lasse sie sich gleichmäßig dehnen, um den Container zu füllen.*/

  gap: 20px; 
  /* Abstand zwischen den Spalten und Zeilen im Grid */

  padding: 20px; 
  /* Innenabstand innerhalb des Containers */

  max-width: 1000px; 
  /* Begrenzung der Breite, damit das Layout auf großen Bildschirmen nicht zu breit wird */

  margin: 0 auto; 
  /* Zentriert den Container horizontal */
}

.recipe-card {
  display: block; 
  /* Link (a) verhält sich wie ein Blockelement, füllt also den Bereich aus */

  background: white; 
  /* Hintergrundfarbe der Karte */

  border-radius: 12px; 
  /* Runde Ecken für weicheres Design */

  box-shadow: 0 2px 6px rgba(0,0,0,0.1); 
  /* Leichter Schatten für 3D-Effekt */

  text-align: center; 
  /* Inhalt (Text, Bild) wird zentriert */

  padding: 15px; 
  /* Innenabstand innerhalb der Karte */

  text-decoration: none; 
  /* Entfernt Unterstreichung von Links */

  transition: transform 0.2s, box-shadow 0.2s;  
  /* Animiert Veränderungen beim Hover sanft über 0.2 Sekunden */

  color: var(--text-color); 
  /* Textfarbe aus den CSS-Variablen */

  background-color: var(--bg-color); 
  /* Hintergrundfarbe aus CSS-Variablen */
}

.recipe-card:hover {
  transform: scale(1.03); 
  /* Vergrößert die Karte leicht beim Hover für einen "Pop-Effekt" */

  box-shadow: 0 4px 12px rgba(0,0,0,0.2); 
  /* Schatten wird beim Hover stärker für mehr Tiefe */
}

.recipe-card img {
  width: 100%; 
  /* Bild füllt die gesamte Breite der Karte */

  height: 200px; 
  /* Feste Höhe für ein einheitliches Layout */

  object-fit: cover; 
  /* Bild wird zugeschnitten, um den Container zu füllen, ohne verzerrt zu werden */

  border-radius: 12px; 
  /* Runde Ecken am Bild, passend zur Karte */
}

.recipe-card h2 {
  margin-top: 10px; 
  /* Abstand über der Überschrift */
}

.recipe-card p {
  color: var(--subtext-color); 
  /* Farbe für Untertitel/Textbeschreibung, etwas dezenter */
}




/* --- Slider-Container --- */
.slider {
  position: relative;                   /* Positionierung für absolute Elemente wie Pfeile und Punkte */
  max-width: 700px;                     /* Slider wird maximal 700px breit */
  margin: 30px auto;                    /* Zentriert den Slider horizontal und Abstand oben/unten */
  overflow: hidden;                     /* Versteckt alle Teile der Bilder, die außerhalb des Containers liegen */
  border-radius: 15px;                  /* Abgerundete Ecken des Sliders */
  box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Schatten unter dem Slider */
}


.slides {
  display: flex;                        /* Bilder nebeneinander in einer Reihe */
  transition: transform 0.5s ease;      /* Sanfte Bewegung, wenn sich die Position der Slides ändert */
}


.slides img {
  width: 100%;                          /* Bilder füllen die gesamte Breite ihres Containers */
  border-radius: 15px;                  /* Abgerundete Ecken passend zum Slider */
  flex-shrink: 0;                        /* Bild darf nicht schrumpfen, wenn der Container kleiner wird, sonst wären alle bilder nebeneinander*/
}


.slider button {
  position: absolute;                     /* Absolute Position innerhalb des Sliders */
  top: 50%;                               /* Vertikal zentriert */
  transform: translateY(-50%);            /* genaues vertikales Zentrieren */
  background-color: rgba(0,0,0,0.4);      /* halbtransparenter schwarzer Hintergrund */
  color: white;                           /* Pfeilfarbe */
  border: none;                            /* kein Rahmen */
  font-size: 18px;                         /* Schriftgröße des Pfeils */
  padding: 10px 14px;                      /* Innenabstand */
  cursor: pointer;                         /* Maus zeigt Hand beim Hover */
  border-radius: 50%;                      /* Runde Buttons */
  user-select: none;                        /* Text kann nicht markiert werden */
  transition: background-color 0.2s;      /* sanfter Farbwechsel beim Hover */
}


.prev { left: 10px; }                      /* Pfeil links außen */
.next { right: 10px; }                     /* Pfeil rechts außen */


.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.6);      /* dunkler beim Hover */
}


/* --- Punkte unter dem Slider --- */
.dots {
  position: absolute;                     /* Absolute Position zum Slider */
  bottom: 12px;                           /* Abstand vom unteren Rand */
  left: 50%;                              /* horizontal zentriert */
  transform: translateX(-50%);            /* genau zentrieren */
  text-align: center;                      /* alle Punkte nebeneinander */
}


.dot {
  height: 10px;                            /* Punkt-Höhe */
  width: 10px;                             /* Punkt-Breite */
  margin: 0 4px;                           /* Abstand zwischen den Punkten */
  background-color: rgba(255,255,255,0.6); /* halbtransparenter weißer Punkt */
  border-radius: 50%;                       /* rund */
  display: inline-block;                    /* nebeneinander anzeigen */
  transition: background-color 0.3s;       /* Farbwechsel sanft */
  cursor: pointer;                          /* Hand beim Hover */
}

.dot.active {
  background-color: #ffb347;               /* aktive Farbe (angepasst zum Header) */
}

.dot:hover {
  transform: scale(1.2);                   /* Punkt wird beim Hover größer */
}







.recipe-content {
  max-width: 900px;                       /* Inhalt wird maximal 900px breit, wird aber kleiner auf kleinen Screens */
  margin: 40px auto;                      /* 40px Abstand oben/unten, auto zentriert horizontal */
  background: var(--bg-color);            /* Hintergrundfarbe über CSS-Variable */
  border-radius: 16px;                    /* Abgerundete Ecken */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* weicher Schatten für "Card-"Look */
  padding: 30px;                          /* Innenabstand zu allen Seiten */
}

.recipe-content h2 {
  border-bottom: 2px solid var(--recipe-h3-color); /* Linie unter h2 als optische Trennung */
  padding-bottom: 5px;                              /* Abstand zw. Text & Unterstrich */
  margin-top: 20px;                                 /* extra Abstand nach oben */
  color: var(--recipe-h2-color);                    /* Farbe aus Variable */
}

.recipe-content h3 {
  color: var(--recipe-h3-color);         /* Farbe für h3 */
  margin-bottom: 5px;                    /* kleiner Abstand darunter */
}

.recipe-content p {
  line-height: 1.6;                      /* bessere Lesbarkeit durch größeren Zeilenabstand */
  color: var(--text-color);              /* Textfarbe */
}



.logo-link {
  display: flex;               /* Flexlayout aktivieren, dadurch ist der header etwas weniger dick */
}

.logo {
  height: 55px;                /* feste Höhe des Logos */
  width: auto;                 /* Breite passt proportional zur Höhe */
  border-radius: 10px;         /* Ecken abrunden */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* sanfte Animation beim Hover */
}

.logo:hover {
  transform: scale(1.08);      /* Logo wird leicht größer beim Hover */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);  /* Leichter Glow-Effekt */
}




.mengenrechner {
  text-align: center;                  /* Zentriert den Text und alle Inline-Elemente innerhalb des Divs */
  margin: 20px 0;                      /* Abstand nach oben und unten */
  font-weight: 500;                    /* mittlere Schriftstärke */
  color: #f5f5f5;                      /* Schriftfarbe hell */
  background: linear-gradient(90deg, #2d2a54, #4b3b88);  
                                       /* Hintergrund als Farbverlauf → optisch passend zum Header */
  padding: 10px 20px;                  /* Innenabstand: vertikal 10px, horizontal 20px */
  border-radius: 10px;                 /* Abrundung der Ecken */
  display: inline-block;               /* Box passt sich dem Inhalt an statt volle Breite einzunehmen */
}

.mengenrechner input {
  width: 60px;                         /* feste Breite für die Eingabefelder */
  margin: 0 8px;                       /* horizontaler Abstand zwischen den Inputs */
  padding: 4px 6px;                    /* innerer Abstand für klickbare Fläche */
  border-radius: 6px;                  /* abgerundete Kanten */
  border: none;                        /* kein Rahmen (modern, clean) */
  text-align: right;                   /* Zahlen rechtsbündig ausrichten */
}


.zutaten {
  padding-left: 20px;      /* Abstand zum linken Rand, damit die Punkte sichtbar sind und der Text nicht zu nah am Rand steht */
  color: var(--text-color);/* Farbwert für den Text → dynamisch je nach Theme */
}

.zutaten li {
  margin-bottom: 6px;      /* Abstand zwischen den einzelnen Zutaten für bessere Lesbarkeit */
}





/* ---------- kleine Recipe-Cards für "Weitere Rezepte" ---------- */
.more-recipes {
  max-width: 900px;                  /* Breite begrenzt → wirkt kompakt zentriert */
  margin: 30px auto;                 /* oben/unten 30px Abstand, links/rechts automatisch → zentriert */
  text-align: left;                  /* Text links ausrichten */
  background: var(--more-recipes-color);  /* leicht transparentes Hintergrundfeld */
  padding: 18px;                      /* Innenabstand → Luft um Inhalt */
  border-radius: 12px;                /* abgerundete Ecken */
  color: var(--recipe-h2-color);      /* Textfarbe für Überschrift */
}

/* Container für die kleinen Karten – Layout */
.more-recipes .card-grid {
  display: grid;                     /* Grid-Layout für gleichmäßige Spalten */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
                                      /* Dynamische Spalten:
                                         → Jede Spalte min. 140px breit
                                         → max. so breit wie möglich (1fr)
                                         → Anzahl passt sich Bildschirmbreite an */
  gap: 12px;                         /* Abstand zwischen Karten */
  align-items: stretch;              /* Karten gleich hoch, falls Inhalte variieren */
  margin-top: 12px;                  /* Abstand zur Überschrift */
}

/* Die kleinen Card-Links */
.small-card {
  display: flex;                     /* Flexlayout */
  flex-direction: column;            /* Bild oben, Text unten */
  align-items: stretch;              /* Kinder füllen volle Breite */
  text-decoration: none;             /* entfernt Unterstreichungen vom Link */
  background: var(--bg-color);       /* Kartenhintergrund folgt Theme */
  color: var(--text-color);          /* Textfarbe folgt Theme */
  border-radius: 10px;               /* abgerundete Ecken */
  overflow: hidden;                  /* Bild bleibt innerhalb der Karte */
  box-shadow: 0 1px 6px rgba(0,0,0,0.08); /* leichter Schatten */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
                                      /* sanfte Animation beim Hover */
  height: 100%;                      /* Karte soll gesamte Spaltenhöhe einnehmen */
}

/* Hover-Effekt für Interaktivität */
.small-card:hover {
  transform: translateY(-4px);       /* Karte hebt sich leicht nach oben */
}

/* Vorschaubild oben in der Karte */
.small-card img {
  width: 100%;                       /* Bild füllt Kartenbreite */
  height: 96px;                      /* feste Höhe → gleiche Kartenhöhe */
  object-fit: cover;                 /* Bild wird zugeschnitten (nicht verzerrt) */
}

/* Bereich mit Titel + Untertitel */
.small-card .meta {
  padding: 8px 10px;                 /* Innenabstand */
  display: flex;                     /* vertikale Struktur */
  flex-direction: column;            /* Text untereinander */
  gap: 4px;                          /* kleiner Abstand zwischen h4 und p */
  flex-grow: 1;                      /* "nutzt verfügbaren Platz" → stabilisiert Höhe */
}

/* Titel */
.small-card h4 {
  margin: 0;                         /* kein Standardabstand */
  font-size: 15.2px;                /* leicht kleiner als normal */
  line-height: 1.1;                  /* kompakter Text */
  color: var(--text-color);          /* folgt Theme */
}

/* Untertitel */
.small-card p {
  margin: 0;                         /* kein Standardabstand */
  font-size: 13px;                /* deutlich kleiner als Titel */
  color: var(--subtext-color);       /* abgeschwächte Farbe */
}






footer {
  text-align: center;                /* Text zentrieren (Links werden mittig angezeigt) */
  margin: 40px auto 20px;            /* oben 40px Abstand, unten 20px, links/rechts automatisch zentriert */
  padding: 15px 20px;                /* Innenabstand für bessere Lesbarkeit */
  max-width: 600px;                  /* begrenzt den Footer auf 600px Breite */
  background-color: rgba(0, 0, 0, 0.7); /* halbtransparenter dunkler Hintergrund */
  border-radius: 12px;               /* abgerundete Ecken */
  color: #e0e0e0;                    /* Schriftfarbe */
  font-size: 15.2px;                 /* Schriftgröße — deine 0.95rem Umrechnung */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Sanfter Schatten für Tiefe */
}


footer a {
  color: #ffb347;          /* warmes Orange*/
  text-decoration: none;   /* Entfernt Unterstreichung */
  transition: color 0.2s;  /* Farbwechsel animiert beim Hover */
}

footer a:hover {
  color: #ffffff;          /* leuchtet weiß beim drübergehen */
}




#theme-toggle {
  position: relative;          /* notwendig, damit ::before absolut darin positioniert werden kann */
  width: 60px;                 /* Breite des Toggle-Schalters */
  height: 30px;                /* Höhe */
  background: linear-gradient(90deg, #b1b1b1, #f0f0f0); /* helles Gradient im Lightmode */
  border-radius: 30px;         /* pillenförmiger Schalter */
  border: none;
  cursor: pointer;             /* zeigt interaktives Element */
  transition: background 0.3s ease; /* weicher Übergang */

}


#theme-toggle::before {
  content: "🌞";                /* Icon für den Lightmode */
  position: absolute;          /* positioniert sich relativ zum Button */
  left: 3px;                   /* Startposition links */
  top: 3px;
  width: 24px;                 /* Größe des Knopfes */
  height: 24px;
  background: white;
  border-radius: 50%;          /* macht ihn rund */
  display: flex;               /* damit Icon im Kreis zentriert wird */
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s ease;   /* sanftes Rutschen/Wechseln */
  box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* leichter Schatten */
}


body.dark #theme-toggle {
  background: linear-gradient(90deg, #3a3a3a, #1e1e1e);
}



body.dark #theme-toggle::before {
  transform: translateX(30px);  /* Knopf rutscht 30px nach rechts */
  content: "🌜";                /* Mond statt Sonne */
  background: #1e1e1e;          /* Knopf dunkler */
}