#recipeDetail .detail-extra .nutrition { 
  grid-column: 1; 
  width: 100%;
  max-width: 420px;           /* Tabelle begrenzen */
  justify-self: start;
}
#recipeDetail .detail-extra .oven-illustration { 
  grid-column: 2; 
  align-self: start; 
  justify-self: stretch;      /* Diagramm soll Breite nutzen */
}
#recipeDetail .detail-card + .detail-card {
  margin-top: 24px; /* Abstand zwischen den beiden Boxen */
}
#recipeDetail .detail-extra {
  display: grid;
  grid-template-columns: 1fr 1.4fr; /* Tabelle schmaler, Diagramm breiter */
  gap: 24px;
  margin-top: 24px;
  padding-top: 8px; /* Überschrift näher an den oberen Rand */
}

#recipeDetail .extra-title {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  color: #281a39;
  margin: 0 0 10px; /* etwas weniger Abstand */
  font-weight: 800;
  grid-column: 1 / -1; /* Überschrift über beide Spalten */
}

#recipeDetail .detail-extra h3 {
  margin: 0 0 10px;
  color: #281a39;
}

#recipeDetail .nutrition-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 0;
}

#recipeDetail .nutrition-table th,
#recipeDetail .nutrition-table td {
  text-align: left;
  padding: 10px 12px;
  font-size: 0.95rem;
}

#recipeDetail .nutrition-table tr:nth-child(odd) {
  background: #fafafa;
}

#recipeDetail .nutrition-card {
  border: 4px solid #6b4b8d; /* lila Rahmen wie im Screenshot */
  border-radius: 6px;
  padding: 12px;
  background: #fff;
}

#recipeDetail .nutrition-table .sub-row th,
#recipeDetail .nutrition-table .sub-row td {
  color: #666;
  font-size: 0.9rem;
  padding-top: 0;
}

#recipeDetail .oven-illustration img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  background: #fff;
}

/* Gleiche Regeln für das Inline-SVG im Ofen-Bereich */
#recipeDetail .oven-illustration svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  background: #fff;
}

@media (max-width: 900px) {
  #recipeDetail .detail-extra {
    grid-template-columns: 1fr; /* untereinander auf Mobil */
  }
}
.site-footer .footer-brand {
  position: static;            /* kein Schweben am Rand */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;                 /* natürliche Größe */
  height: auto;
  border: none;                /* Ring entfernen */
  border-radius: 0;
  background: transparent;
  text-decoration: none;
}

.site-footer .brand-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  position: relative;   /* etwas tiefer setzen */
  top: 18px;            /* justierbar: 8–18px */
}
/* Unterer Abschluss (Footer) auf Detailseiten */
.site-footer {
  margin: 28px auto 40px;
  max-width: 1100px;
  padding: 0 20px;
}

.site-footer .footer-content {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  padding: 18px 24px;
  text-align: center;
  color: #3a3750;
  position: relative; /* für rechts positioniertes Brand-Logo */
}

.site-footer .footer-insta {
  display: inline-flex;          /* in der Zeile mitlaufen lassen */
  align-items: center;
}

.site-footer .footer-line {
  font-size: 0.95rem;
  margin-bottom: 6px;
  display: inline-flex;         /* Icon und Text in einer Zeile */
  align-items: center;          /* vertikal mittig ausrichten */
  gap: 12px;                    /* Abstand zwischen Icon und Text */
}

/* Logos unten: standardmäßig ausblenden (Desktop zeigt Inline-Variante) */
.site-footer .footer-logos-bottom { 
  display: none; 
  gap: 16px; 
  justify-content: center; 
  margin-top: 10px; 
}

.site-footer .footer-copy {
  font-weight: 600;
  font-size: 0.95rem;
}
/* Stile für das gesamte Dokument */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
    background: #f2f2f4; /* dezentes Grau wie im Screenshot außen */

}

header {
    position: relative; /* Ermöglicht die Overlay-Positionierung */
    text-align: center; /* Zentriert den Header-Inhalt */
}

header img {
    width: 100%; /* Bild füllt die gesamte Breite */
    height: 300px; /* Feste Höhe für das Bild */
    object-fit: cover; /* Bild wird zugeschnitten, um die Höhe auszufüllen */
}

.bild-groesse {
    width: 30px;
    height: auto;
}

.bild-groesse2 {
    width: 60px;
    height: auto;
}

/* Container oben  für Insta suche und favos*/
/* Gesamter Bereich: Links Suche, Rechts Insta+Favoriten */
.top-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 10px 20px;
    flex-wrap: wrap; /* Zeilenumbruch für kleine Breiten */
}

/* Linke Seite: Suche */
.search-container {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap; /* Erlaubt Umbruch, damit der Zufallsbutton in die nächste Zeile kann */
}

#search-input {
    width: 220px;          /* feste Breite */
    height: 40px;          /* gleiche Höhe wie Button */
    padding: 0 12px;       /* nur seitlicher Innenabstand */
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px;
    font-size: 1em;
}

#search-button {
    height: 40px;
    width: 40px;           /* quadratisch */
    background-color: #281a39;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#search-button img {
    width: 18px;
    height: 18px;
    filter: invert(1); /* Lupe sichtbar auf dunklem Hintergrund */
}

/* Rechte Seite: Insta + Favoriten */
.right-tools {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap; /* Erlaubt Umbruch, damit der Zufallsbutton darunter stehen kann */
    justify-content: flex-end; /* Erste Zeile rechtsbündig (Favoriten-Button am Rand) */
}

/* Flex-Umbruch-Element für rechte Leiste */
.right-break {
    flex-basis: 100%; /* Erzwingt neue Zeile */
    height: 0;
}

.insta-logo {
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: transform 0.2s;
}

.insta-logo:hover {
    transform: scale(1.1);
}

/* Footer-spezifische Größe: quadratisch, nicht gestaucht */
.site-footer .insta-logo {
    width: 36px;  /* deutlich größer */
    height: 36px; /* deutlich größer */
    object-fit: contain;
    vertical-align: middle;
    position: relative;
    top: 18px; /* etwas tiefer setzen wie im Screenshot gewünscht */
}

#toggle-favorites {
    height: 40px;
    padding: 0 15px;
    background-color: #281a39;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Zufallsrezept-Button: generisches Aussehen */
#randomRecipeBtn {
    padding: 10px 16px;        /* Klickfläche */
    background-color: #281a39; /* Primärfarbe */
    color: #fff;               /* Kontrast */
    border: none;              /* Clean */
    border-radius: 6px;        /* Ecken */
    cursor: pointer;           /* Hand-Cursor */
}

/* Positionierung, wenn der Button unter der Suche links stehen soll */
.search-container #randomRecipeBtn {
    flex-basis: 100%;
    align-self: flex-start;
    margin: 8px 0 0 0;
    width: 100%;
    max-width: calc(220px + 5px + 40px);
}

/* Positionierung, wenn der Button rechts darunter stehen soll */
.right-tools #randomRecipeBtn {
    /* Neue Zeile durch .right-break, kompakte Breite rechts */
    margin-top: 8px;
    margin-left: auto;     /* Rechtsbündig innerhalb der Zeile */
    width: auto;
    max-width: none;       /* Keine harte Kappung, damit eine Zeile möglich ist */
    white-space: nowrap;   /* Text in einer Zeile halten */
    text-align: right;     /* Textausrichtung passend zum rechten Rand */
}

/* Hover-Effekt für Zufallsrezept-Button */
#randomRecipeBtn:hover {
    /* Button etwas heller bei Hover */
    filter: brightness(1.1);   
}

/* Auf mobilen Geräten soll der Button die volle Breite der Suchleiste annehmen */

/* Das halbtransparente Overlay, das das Modal über die ganze Seite legt */
.modal-overlay {
  position: fixed;           /* Bleibt immer an derselben Stelle im Viewport */
  top: 0; left: 0;           /* Startet oben links */
  width: 100vw; height: 100vh; /* Überdeckt die gesamte Bildschirmfläche */
  background: rgba(40, 26, 57, 0.7); /* Lila mit 70% Transparenz */
  display: flex;             /* Zentriert den Inhalt mit Flexbox */
  align-items: center;       /* Vertikal zentriert */
  justify-content: center;   /* Horizontal zentriert */
  z-index: 9999;             /* Ganz oben anzeigen */
}

/* Die eigentliche Rezeptkarte im Modal */
.modal-card {
  background: #fff;          /* Weißer Hintergrund */
  border-radius: 16px;       /* Abgerundete Ecken */
  padding: 40px 40px;        /* Innenabstand */
  box-shadow: 0 8px 32px rgba(0,0,0,0.2); /* Schatten für 3D-Effekt */
  min-width: 300px;          /* Mindestbreite */
  max-width: 90vw;           /* Maximal 90% der Bildschirmbreite */
  text-align: center;        /* Inhalt zentriert */
  position: relative;        /* Für die Positionierung von Button und Close */
}

/* Rezeptkarte im Modal zentrieren und auf sinnvolle Breite bringen */
.modal-card .recipe-card {
  width: 100%;
  max-width: 720px;      /* angenehme maximale Breite */
  margin: 0 auto;        /* zentriert */
  background: transparent; /* neutral im Modal */
  box-shadow: none;        /* Schatten im Modal entfernen */
}

.modal-card .recipe-card img {
  display: block;
  width: 100%;            /* skaliert innerhalb der Maximalbreite */
  max-width: 520px;       /* Bildgröße im Modal steuern (anpassen) */
  height: auto;
  margin: 0 auto;         /* mittig ausrichten */
}

.modal-card .recipe-card h3,
.modal-card .recipe-card p {
  margin-left: auto;
  margin-right: auto;
}

/* Aktionen unter der Zufallsrezeptkarte */
.random-actions {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  position: relative; /* erlaubt absolute Positionierung des Zurück-Pfeils */
}

.random-next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;              /* doppelt so groß */
  height: 80px;             /* doppelt so groß */
  font-size: 32px;          /* Icons größer */
  padding: 0;               /* keine Seiten-Padding für Icon-only */
  background-color: #281a39;
  color: #fff;
  border: none;
  border-radius: 50%;       /* runde Form */
  cursor: pointer;
}

/* Zurück-Pfeil links vom runden Button, ohne Kreis, gleiche Farbe, kräftiger */
.random-prev-btn {
  position: absolute;
  top: 50%;
  left: calc(50% - 80px - 24px); /* 80px Breite des Kreis-Buttons + 24px Abstand */
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #281a39; /* gleiche Farbe wie Shuffle-Button */
  font-size: 36px; /* etwas größer/kräftiger */
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.random-prev-btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

.random-next-btn:hover {
  filter: brightness(1.1);
}

/* Schließen-Button (X) oben rechts im Modal */
.close-btn {
  position: absolute;        /* Absolut innerhalb der Karte */
  top: 12px; left: 16px;     /* Abstand von oben und links */
  font-size: 2em;            /* Großes X */
  cursor: pointer;           /* Zeigt Hand beim Überfahren */
}

/* Favoriten-Stern im Modal oben rechts */
.modal-fav-btn {
  position: absolute;
  top: 12px;
  right: 16px;               /* Rechts oben im Modal */
  width: 36px;
  height: 36px;
  background: #f2f2f2;       /* leichtes Grau */
  color: #000;               /* dunkler Stern wie Standardtextfarbe */
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 1;
}

.modal-fav-btn:hover {
  filter: brightness(1.1);
}

/* Aktiver Zustand: wie auf der Hauptseite (Stern mit orangem Hintergrund) */
.modal-fav-btn.active {
  background-color: rgba(255, 140, 0, 1);
  color: #fff;
}

/* Toggle-Button für Favorit oben links im Modal */
#toggleFavBtn {
  position: absolute;        /* Absolut innerhalb der Karte */
  top: 12px; left: 16px;     /* Abstand von oben und links */
  background: #281a39;       /* Lila Hintergrund */
  color: #fff;               /* Weiße Schrift */
  border: none;              /* Kein Rahmen */
  border-radius: 8px;        /* Abgerundete Ecken */
  padding: 8px 16px;         /* Innenabstand */
  cursor: pointer;           /* Zeigt Hand beim Überfahren */
}

/* ÜBERSCHRIFT */
.main-title {
    text-align: center;
    margin-top: 20px;
    font-size: 4em; /* Die Schriftgröße wurde von 2.5em auf 4em erhöht */
    color: #333;
	font-family: 'Poppins', sans-serif; /* Verwende Poppins */
}

.subtitle {
    text-align: center;
    font-size: 2em;
    color: #666;
    margin-bottom: 40px;
	font-family: 'Poppins', sans-serif; /* Verwende Poppins */
}

header .overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: rgba(0, 0, 0, 0); /* Halbtransparenter Hintergrund */
    padding: 10px;
}
.entry-title a:link,.entry-title a:visited {
    color: #202020;
    color: var(--title-color);
    text-decoration: underline
}

h1 {
    text-align: center;
    color: #333;
    margin: 20px 0;
}

/* Anpassungen für mobile Geräte */


@media (max-width: 768px) {

    .top-tools {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap; /* wichtig: umbrüche erlauben */
    }

    .social-container {
        order: 1; /* Insta-Logo bleibt links */
    }

    .search-container {
        order: 1; /* Suchfeld zuerst */
        flex: 1 1 100%;
        position: relative;
        z-index: 2; /* überlappend vor rechten Tools */
        display: flex;
        flex-wrap: nowrap; /* Input und Button in einer Zeile halten */
        width: 100%;
    }

    #search-input {
        flex: 1 1 auto; /* nimmt den restlichen Platz */
        width: auto;     /* keine feste Breite erzwingen */
        min-width: 0;    /* verhindert Überlaufen */
    }

    #search-button {
        flex: 0 0 40px;  /* feste Button-Breite */
    }


    .right-tools {
        order: 2; /* nach der Suche */
        flex-basis: 100%;
        justify-content: center; /* mittig ausrichten */
        flex-wrap: wrap; /* erlaubt zwei Buttons in einer Zeile */
        align-items: center; /* vertikal auf gleiche Höhe ausrichten */
        position: relative;
        z-index: 1;
        gap: 12px;
        margin-top: 10px;
    }

    /* Bruch in mobiler Ansicht aufheben, damit Fav + Zufallsbutton in einer Zeile stehen */
    .right-break {
        flex-basis: auto;
        width: auto;
        height: 0;
    }

    /* Zufallsrezept-Button mobil mittig, nicht volle Breite */
    .right-tools #randomRecipeBtn {
        width: auto;
        max-width: none;
        margin: 0; /* keine Verschiebung nach unten */
        white-space: nowrap;
        height: 40px; /* gleiche Höhe wie Favoriten-Button */
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
    }

    #toggle-favorites {
        height: 40px; /* sicherstellen, gleiche Höhe */
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
    }

    .story-left, 
    .story-text {
        width: 100%; /* Nimmt volle Breite auf Mobilgeräten */
    }

    .story-image img {
        max-width: 200px; /* Bild etwas größer als im Desktop, optional */
        margin-bottom: 20px; /* Abstand zum Text */
    }

}

/* FAVORITEN */
/* "Merken"-Button als Overlay */
.fav-btn {
    position: absolute;
    top: 10px; /* Abstand von oben */
    right: 10px; /* Abstand von rechts */
    background-color: white; /* Goldene Farbe mit Transparenz */
    border: none;
    padding: 8px 12px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 50%;
    transition: 0.3s;
    z-index: 10;
}

/* Hover-Effekt für den Button */
/*.fav-btn:hover {
    background-color: rgba(255, 165, 0, 0.9); /* Etwas dunklere Farbe */
/*}

/* Falls Favorit markiert ist */
.fav-btn.active {
    background-color: rgba(255, 140, 0, 1); /* Orange */
    color: white;
}
/* Ende FAVORITEN */


/* Container für Hauptinhalt */
.content {
    max-width: 1000px; /* Maximale Breite für den Inhalt */
    margin: 0 auto; /* Zentriert den Inhalt */
    padding: 20px;
}

/* Layout für Rezeptkarten */
.recipe-section {
    display: flex;
    flex-wrap: wrap; /* Zeilenumbruch für Karten */
    gap: 20px; /* Abstand zwischen Karten */
    justify-content: space-around; /* Karten gleichmäßig verteilen */
    margin-bottom: 40px; /* Abstand unterhalb der letzten Karte */

}

/* Top-Rezepte als Positionierungs-Container für den Overlay-Button */
#top-recipes { position: relative; }

/* Top-Rezepte: Steuerung über Klassen (robust gegen andere Elemente) */
#top-recipes .recipe-card.is-faded {
    opacity: 0.35;
    filter: grayscale(70%);
    pointer-events: none;
}

/* Schrift in ausgegrauten Karten zusätzlich verblassen */
#top-recipes .recipe-card.is-faded .entry-title,
#top-recipes .recipe-card.is-faded .entry-title a,
#top-recipes .recipe-card.is-faded p {
    color: rgba(0,0,0,0.25) !important;
    text-decoration: none;
}

/* Overlay-Button auf Karten 9 und 10 */
#top-recipes .recipe-card.is-faded .card-showmore-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Overlay selbst blockiert nichts, Button erlaubt Klick */
}

#top-recipes .recipe-card.is-faded .card-showmore-overlay .card-showmore-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 16px;
    background-color: #281a39;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

#top-recipes .recipe-card.is-faded .card-showmore-overlay .card-showmore-btn:hover {
    filter: brightness(1.08);
}

#top-recipes .recipe-card.is-hidden {
    display: none !important;
}

/* Sanfte Aufklapp-Animation */
#top-recipes .recipe-card {
    transition: opacity 0.45s ease, transform 0.45s ease, max-height 0.45s ease;
    overflow: hidden;
}

#top-recipes .recipe-card.reveal {
    display: block !important; /* sichtbar für Animation */
    max-height: 0;
    opacity: 0;
    transform: translateY(12px);
}

#top-recipes .recipe-card.reveal.reveal-in {
    max-height: 1000px; /* ausreichend für Karteninhalt */
    opacity: 1;
    transform: translateY(0);
}

/* nth-child Fallback entfernt: Steuerung erfolgt ausschließlich über Klassen */

/* Wenn erweitert, alles normal anzeigen */
#top-recipes.expanded .recipe-card {
    display: block;
    opacity: 1;
    filter: none;
    pointer-events: auto;
}

/* Fade-Bereich unter den ersten Karten */
.fade-cover {
    position: relative;
    height: 160px; /* noch höherer Verlauf */
    margin-top: -80px; /* stärker überlappend */
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.70) 30%,
      rgba(255,255,255,0.95) 60%,
      rgba(255,255,255,1) 80%
    );
    z-index: 1;
    transition: opacity 0.55s ease; /* sanft ausblenden */
}

/* Container und Button für "Mehr Rezepte anzeigen" */
.show-more-container {
    position: absolute;      /* über den Karten positioniert */
    left: 50%;
    bottom: 250px;           /* höhe Position Button von unten */
    transform: translateX(-50%);
    display: flex;
    justify-content: center; /* Button mittig platzieren */
    z-index: 10; /* sicher über dem Fade und Karten */
}

.show-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    background-color: #281a39;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* Weniger anzeigen Button unterhalb, sichtbar wenn expanded */
.show-less-container {
    display: none; /* default hidden; JS zeigt bei expanded */
    margin: 20px 0 40px;
    display: flex;
    justify-content: center;
}

.show-less-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    background-color: #281a39;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* Beim Erweitern: Fade und Button ausblenden */
#top-recipes.expanded + #top-recipes-fade,
#top-recipes.expanded + #top-recipes-fade + .show-more-container {
    display: none;
}

.recipe-card {
    position: relative;   
    background-color: #ffffff; /* Weißer Kachel-Hintergrund */
    border-radius: 10px; /* Abgerundete Ecken */
    width: calc(50% - 20px); /* Jede Karte nimmt 50% der Breite */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Schatten für 3D-Effekt */
    text-align: center;
    overflow: hidden; /* Überschüssiger Inhalt wird abgeschnitten */
}

/* Höhere Spezifität für die beiden Index-Sektionen, falls eine ältere Regel grau setzt */
#top-recipes .recipe-card,
#recipe-section .recipe-card {
    background-color: #ffffff; /* erzwinge Weiß auf der Startseite */
}

.recipe-card img {
    width: 80%; /* Bild füllt die Breite der Karte */
    height: auto;
    object-fit: cover;
    margin-top: 20px; /* Abstand oberhalb des Bildes */

}

.recipe-details {
    padding: 20px; /* Innenabstand für den Textbereich */
}

.recipe-details h3 {
    margin: 0;
    color: #333; /* Dunkle Schriftfarbe */
    font-weight: bold;
}

.recipe-details p {
    color: #666; /* Leicht dunklere Schriftfarbe */
    margin-top: 10px;
}

/* Container für das Rezeptbild */
.recipe-image-container {
    position: relative; /* Ermöglicht Positionierung von Overlay-Elementen */
    display: inline-block;
    width: 100%; /* Bild füllt den Container */
}


/* Lila Hintergrundbereich */
.story-section {
    background-color: #281a39; /* Lila Hintergrundfarbe */
    color: white; /* Weiße Schriftfarbe */
    padding: 60px 20px; /* Abstand oben und unten */
    text-align: center; /* Zentrierter Text */
    width: 100vw; /* Volle Bildschirmbreite */
    position: relative; /* Sicherstellen, dass es nicht übersteht */
    left: 50%; /* Zentriert den Bereich */
    transform: translateX(-50%); /* Behebt weiße Ränder */
    box-sizing: border-box; /* Padding in die Gesamtbreite einrechnen */
    margin: 0; /* Kein Außenabstand */
}

/* Inhalt innerhalb des lila Bereichs */
.story-content {
    display: flex; /* Flexbox für nebeneinanderliegende Anordnung */
    justify-content: space-between;
    max-width: 800px; /* Breite des Inhaltsbereichs */
    margin: 0 auto; /* Zentriert den Inhalt */
    gap: 20px;
}

.story-left {
    flex: 1; /* Nimmt die Hälfte der Breite ein */
    text-align: center;

}

.story-text h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.story-text h3 {
    font-size: 1.8em;
    font-weight: normal;
    margin-bottom: 20px;
    font-style: italic;
}

.story-text p {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 20px;
}

.story-text {
    flex: 2; /* Nimmt mehr Platz ein, um den Text darzustellen */
    color: #626262; /* Dunkelgraue Schriftfarbe für den Text */
    text-align: justify;
    font-size: 1em;
    line-height: 1.6;
}

/* Bildbereich */
.story-image img {
    width: 100%;
    max-width: 150px; /* Größe des Bildes */
    height: auto;
    border-radius: 10px;
    margin-top: 20px;
}

/* Fußzeile */
.footer {
    background-color: white; /* Heller Hintergrund */
    color: #666; /* Dunklere Schriftfarbe */
    text-align: center;
    padding: 20px 0;
    font-size: 0.9em;
	
}
.footer-content p {
    margin: 5px 0; /* Abstände zwischen den Zeilen */
}

/* ===================== */
/* Recipe Detail (Unterseiten) */
/* ===================== */
/* Container und Typografie für Detailseiten
   - der margin-top-Wert steuert den Abstand zum Header-Bereich oben */
#recipeDetail {
  max-width: 1100px;
  margin: 16px auto 40px;  /* oben deutlich weniger Abstand, unten unverändert */
  padding: 0 20px;
}

/* Weiße Karte für Detailinhalt (wie im Screenshot) */
.detail-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  padding: 28px 28px 36px;
}

/* ===================== */
/* Alphabetische Rezepteliste (rezepte-liste.html) */
/* ===================== */

.all-recipes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.all-recipes-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f0eef8;
}

.all-recipes-thumb-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.all-recipes-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.all-recipes-text {
  display: flex;
  flex-direction: column;
}

.all-recipes-title {
  font-weight: 800;              /* extra fett für Titel */
  font-size: 1.05rem;            /* leicht größer als normal */
  color: #281a39;
  text-decoration: none;
  margin-bottom: 2px;
}

.all-recipes-title:hover {
  text-decoration: underline;
}

.all-recipes-subtitle {
  font-size: 0.9rem;             /* etwas kleiner als Standardtext */
  color: #4a3b5f;
}

#recipeDetail .main-title {
  text-align: left;
  color: #281a39;
  font-weight: 800;                 /* kräftiger */
  letter-spacing: -0.5px;
  line-height: 1.08;               /* kompakter, wie im Screenshot */
  font-size: clamp(2.2rem, 4.2vw, 3.4rem); /* groß, aber responsiv */
  margin-bottom: 6px;              /* wenig Abstand zur Unterzeile */
}

#recipeDetail .subtitle {
  text-align: left;
  color: #4a3b5f;
  margin-top: 8px;
}

/* Zweispaltiges Layout: Bild links, Inhalt rechts */
.detail-hero {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Bild 1/3, Inhalt 2/3 */
  gap: 32px;
  align-items: stretch; /* Bild soll von Titel bis letzte Zutat reichen */
}

#detailImage {
  width: 100%;
  height: 100%;        /* füllt die gesamte Zeilenhöhe */
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 12px;
}

.ingredients, .ingredients * { font-weight: 400; }
.ingredients h2 { font-weight: 700; margin: 0 0 8px 0; color: #281a39; }

.ingredients ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

#recipeDetail .ingredients li {
  margin: 6px 0;
  color: #333;
  font-weight: 400; /* normale Dicke */
  font-size: 0.95rem; /* kleiner: Zutaten */
  line-height: 1.5;   /* kompakter */
}

.detail-meta-small {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  color: #626262;
  font-size: 0.95em;
}

/* Schrittebereich */
.detail-steps, .detail-steps * { font-weight: 400; }
.detail-steps h2 { color: #281a39; font-weight: 700; }

/* Graue Abtrennung zwischen oberem Teil und Zubereitung */
#recipeDetail .detail-steps {
  border-top: 1px solid #e6e6ea;
  margin-top: 24px;
  padding-top: 24px;
}

/* Schritttexte normal gewichten */
#recipeDetail .detail-steps li { 
  font-weight: 400; 
  font-size: 0.95rem; /* kleiner: Zubereitung (Liste) */
  line-height: 1.5;
}
#recipeDetail .steps-raw p { 
  font-weight: 400; 
  margin: 0 0 10px; 
  font-size: 0.95rem; /* kleiner: Zubereitung (Fließtext) */
  line-height: 1.5;
}

/* Responsiv: untereinander anordnen */
@media (max-width: 900px) {
  .detail-hero {
    grid-template-columns: 1fr;
  }
  #detailImage {
    height: auto;        /* mobil wieder flexibel */
    aspect-ratio: 4 / 3; /* angenehme Proportion beibehalten */
  }
}

/* Mobile Footer-Variante: Logos unten anzeigen, Inline-Zeile ohne Logos lassen */
@media (max-width: 600px) {
  .site-footer .footer-line {
    display: block;           /* Textzeile allein */
  }
  .site-footer .footer-line .footer-insta,
  .site-footer .footer-line .footer-brand {
    display: none;            /* Inline-Logos verstecken */
  }
  .site-footer .footer-logos-bottom { 
    display: flex;            /* Logos unten zeigen */
  }
  /* Mobile Logos etwas kleiner und gleich hoch ausrichten */
  .site-footer .footer-logos-bottom .insta-logo,
  .site-footer .footer-logos-bottom .brand-logo {
    width: 30px;
    height: 30px;
    top: 0;                   /* evtl. gesetzte Versätze neutralisieren */
    position: relative;
  }
}

/* Anpassungen für mobile Geräte */
@media (max-width: 768px) {
    .recipe-section {
        flex-direction: column; /* Karten werden untereinander angeordnet */
        align-items: center;
    }

    .recipe-card {
        width: 100%; /* Karten nehmen volle Breite ein */
    }
	
	.recipe-card img {
    width: 100%; /* Bild füllt die Breite der Karte */
    height: auto;
    object-fit: cover;
  }
}
/* Responsive Anpassung für die Story-Sektion auf kleinen Bildschirmen */
@media (max-width: 600px) {
  /* Die beiden Bereiche (links und rechts) werden untereinander statt nebeneinander angezeigt */
  .story-content {
    flex-direction: column; /* Stapelt die Elemente vertikal */
    align-items: center;    /* Zentriert die Elemente horizontal */
    gap: 32px;              /* Mehr Abstand zwischen Bild und Text */
  }
  /* Der Textbereich bekommt volle Breite und Abstand nach oben */
  .story-text {
    width: 100%;            /* Text nimmt die volle Breite ein */
    margin-top: 16px;       /* Abstand zum Bild */
    text-align: left;       /* Text linksbündig statt Blocksatz */
  }
}

/* Seitliche Icon-Navigation für Rezeptdetailseiten */
.side-nav {
  position: fixed;
  top: 80px;
  left: 0;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 8px 4px;
  z-index: 1000;
}

.side-nav-item {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #5b3dd9;
  background: #fff;
  color: #5b3dd9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.side-nav-item:hover {
  background: #5b3dd9;
  color: #fff;
  transform: translateY(-1px);
}

.side-nav-icon {
  font-size: 1.2rem;
}

/* Seitenschrift rechts vom Icon, nur auf größeren Screens */
.side-nav-label {
  position: absolute;
  left: 52px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: #281a39;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 1px;
}

/* Auf kleineren Bildschirmen nur Icons zeigen */
@media (max-width: 768px) {
  .side-nav {
    top: 70px;
  }
  .side-nav-label {
    display: none;
  }
}

/* Damit der Inhalt nicht unter die seitliche Leiste läuft (nur Desktop)
   (aktuell nicht aktiv genutzt, #recipeDetail bleibt mittig) */
@media (min-width: 769px) {
  /* #recipeDetail { margin-left: 60px; } */
}

/* Brand-Zeile wie auf der Startseite über den Buttons */
.top-nav-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 24px auto 4px;
  color: #281a39; /* wie Hauptüberschrift */
  font-size: 1.4rem;
  font-weight: 800;
}

.top-nav-brand-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.top-nav-brand-text {
  letter-spacing: 0.03em;
}

/* ==========================================
   Header-Bild im Rezept-Detail (oberer Abschnitt)
   - gleiche Breite wie der Inhaltsbereich (#recipeDetail)
   - nur unten abgerundete Ecken
   - eher flach (geringere Höhe)
   ========================================== */
.top-nav-hero {
  max-width: 1100px;           /* gleiche Max-Breite wie #recipeDetail */
  margin: 0 auto 12px;         /* kein Abstand oben, unten etwas kleiner (12px) */
  border-radius: 0 0 24px 24px;/* oben gerade, unten abgerundet */
  overflow: hidden;            /* Bild + Overlay werden an die Form angepasst */
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  position: relative;          /* für das Overlay mit Titel + Buttons */
}

.top-nav-hero-image {
  width: 100%;
  max-height: 160px;           /* flacher: nur etwa so hoch wie Titel+Buttons */
  object-fit: cover;           /* schneidet das Bild passend zu */
  display: block;
}

.top-nav-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Elemente eher oben im Bild platzieren */
  align-items: center;
  gap: 0px;
  padding: 10px 16px 16px;     /* oben etwas Abstand, unten weniger */
}

.top-nav-brand {
  color: #281a39; /* bleibt wie vorher, wirkt wie auf hellem Overlay */
}

/* Horizontale Navigation oberhalb des Rezepts */
.top-nav-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 16px auto 8px;
}

/* Mobile-Variante: Bild ausblenden, nur Überschrift + Buttons zeigen */
@media (max-width: 600px) {
  .top-nav-hero {
    max-width: 100%;          /* volle Breite auf Mobile */
    margin: 0 auto 12px;      /* etwas Abstand nach unten */
    border-radius: 0;         /* keine Rundung auf kleinen Screens */
    box-shadow: none;         /* Schatten weg für ruhigeres Layout */
  }

  .top-nav-hero-image {
    display: none;            /* Bild ausblenden, damit nur Text+Buttons bleiben */
  }

  .top-nav-hero-overlay {
    position: static;         /* wieder normal im Dokumentfluss */
    padding: 12px 16px 8px;   /* kompakter Abstand */
  }
}

.top-nav-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  min-height: 44px;              /* einheitliche Button-Höhe (inkl. Rahmen) */
  box-sizing: border-box;        /* Padding in die Gesamthöhe einrechnen */
  border-radius: 999px;
  border: 1px solid #4a3b5f;
  background: #ffffff;
  color: #4a3b5f; /* wie Unterüberschrift */
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.top-nav-button:hover {
  background: #e9e6f3;
  color: #281a39; /* dunkler wie Hauptüberschrift */
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.top-nav-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.top-nav-icon {
  width: 18px;
  height: 18px;
  fill: #4a3b5f;
}

.top-nav-button:hover .top-nav-icon {
  fill: #281a39;
}

@media (max-width: 600px) {
  .top-nav-buttons {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}