/*--------------------------------------------------------------
	Common
--------------------------------------------------------------*/
:root {
    --champagne-white: #FBF7F0; /* Der warme Ton */
    --pale-white: #FFFDF9;      /* Das blasse Weiß des Zitats */
    --deep-berry: #3D121A;      
    --brand-pink: #8E9294;      
    --charcoal-black: #1A0A0D;
    --muted-gray: #8A7E81;
    --brand-red: #FC97A5;
    --brand-vp: #A62E4E;}


/* Radikaler Reset: Löscht alle versteckten Browser-Ränder */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Verhindert horizontales Wackeln */
    background-color: var(--champagne-white);
}



* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    color: var(--charcoal-black);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
}

/* Der Inhalts-Begrenzer */
.wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

/* --- SEKTION 1: DAS ZITAT (100% Breite, absolut randlos) --- */
.quote-fullscreen-section {
    background-color: var(--champagne-white);
    width: 100vw;
    min-height: 60vh; /* Nimmt großzügig Platz ein */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 4rem 0 6rem 0;
}

.site-header {
    text-align: center;
    width: 100%;
}

.site-header .logo {
    font-family: 'Playfair Display', serif; /* Jetzt in Ihrer unverkennbaren Logo-Schrift */
    font-weight: 400; /* Normal */
    font-size: 1.8rem; /* Leicht erhöht für die perfekte Wirkung der Serifen */
    color: var(--charcoal-black);
    letter-spacing: 0.15em; /* Sanft austariert für Playfair Display */
    text-transform: none; /* Keine reinen Großbuchstaben mehr, sondern so edel geschrieben wie der Brandname: The Very Pink */    
    text-transform: uppercase;
    margin-bottom: 8rem;}

.quote-container {
    text-align: left;
    padding: 0 2rem;
    max-width: 750px;
    margin: auto;
}

.main-quote {
    font-family: 'Marcellus', serif;
    font-size: 2.2rem;
    color: var(--deep-berry);
    line-height: 1.5;
    margin-bottom: 2.5rem;
    letter-spacing: 0.1em;}

.quote-author {
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    color: var(--charcoal-black);
}

/* --- SEKTION 2: DAS MANIFEST (Eigene Sektion) --- */
.manifesto-fullscreen-section {
    background-color: var(--pale-white); /* Wenn Sie hier den Wechsel wollen, einfach zu var(--champagne-white) ändern */
    width: 100vw;
    text-align: center;
    padding-top: 6rem;
    display: flex;
    justify-content: center;
    gap: 40px; }

.welcome-heading {
    font-family: 'Marcellus', serif;
    font-size: 1.1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    color: var(--deep-berry);
    margin-bottom: 3rem;}

.manifesto-box {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 1rem;
    }

.manifesto-box p {
    font-size: 0.95rem;
    margin-bottom: 2rem;
    text-align: left;
    color: var(--charcoal-black);
    line-height: 1.8;
    letter-spacing: 0.1em;}

.manifesto-box p:last-child {
    margin-bottom: 0;
}

/* --- SEKTION 3: INHALT & SÄULEN (Champagner-Hintergrund) --- */
.content-fullscreen-section {
    background-color: var(--pale-white);
    width: 100vw;
    padding-top: 4rem;
    padding-bottom: 6rem;}
    
    .categories-container-centered {
    display: flex;
    justify-content: center; /* Zentriert horizontal auf dem Bildschirm */
    align-items: center;
    width: 100%;
    margin-bottom: 2rem; /* Abstand zum Bezahl-Button unten */
}

/* Die Box selbst richtet ihren Inhalt linksbündig aus – exakt wie auf Ihrem Vorlagebild */
.categories-vertical-stack {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Das Geheimnis: Text ist linksbündig */
    gap: 2.35rem; /* Der perfekte, luftige Abstand zwischen den Worten */
    max-width: 100%;
    justify-content: center;
}

.category-link-vertical {
    font-weight: 500;
    color: var(--deep-berry);
    text-decoration: none;
    letter-spacing: 0.1em; /* Reduziert für den vertikalen Block-Effekt */
    line-height: 1.1;
    text-transform: uppercase;
    transition: color 0.4s ease, transform 0.4s ease;
    white-space: nowrap;
}

/* Der magische Moment beim Hovern: Sanfter Wechsel zu Ihrem Brand Pink */
.category-link-vertical:hover {
    color: var(--brand-pink);
    transform: translateX(8px); /* Dezente, elegante Bewegung nach rechts statt nach oben */
}


.cta-section {
    text-align: center;
    padding: 2rem 0 0rem 0;
}

.cta-text {
    font-size: 0.95rem;
    margin-bottom: 1rem;
    text-align: left;
    color: var(--charcoal-black);
    line-height: 1.8;
    letter-spacing: 0.1em;
    max-width: 750px;
    margin: 0 auto;
    padding: 0 1rem;       }


.frame-button {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--deep-berry);
    text-decoration: none;
    border: 1px solid var(--deep-berry);
    padding: 1rem 2rem;
    display: inline-block;
    transition: all 0.3s ease;
    background-color: var(--pale-white);  
    margin-top: 3rem; 
}

.frame-button:hover {
    background-color: var(--pale-white);
    border-color: var(--brand-pink);
    color: var(--muted-gray);
}

/* --- FOOTER --- */
.site-footer {
    background-color: var(--champagne-white);
    width: 100vw;
    padding: 6rem 2rem 4rem 2rem;
    text-align: center;
}

.emblem-container {
    margin-bottom: 4rem;
}

.signature-emblem {
    max-width: 100%;
    height: auto;
    opacity: 0.85;
}

.footer-columns {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    text-align: left;
}

.footer-col {
    flex: 1;
    padding: 0 1.5rem;
}

.footer-col h3 {
    font-family: 'Marcellus', serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--deep-berry);
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.footer-col p, .footer-col a {
    font-size: 0.8rem;
    color: var(--charcoal-black);
    line-height: 1.8;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: var(--brand-pink);
}

.footer-col .copyright {
    color: var(--muted-gray);
    margin-top: 1rem;
}

/* Mobile Anpassung */
@media (max-width: 768px) {
    .categories-grid {
        flex-direction: column;
        gap: 3rem;
        padding: 4rem 0;
    }
    .footer-columns {
        flex-direction: column;
        gap: 3rem;
        text-align: center;
    }
    
     .signature-emblem img {
        width: 100%; /* Erhöhen Sie diesen Wert schrittweise (z.B. auf 65% oder 70%), bis es perfekt wirkt */
        max-width: 250px; /* Setzt eine noble Obergrenze, damit es auf großen Smartphones nicht klobig wird */
        height: auto;
    }    
     .welcome-heading { /* Fügen Sie hier die exakten Klassennamen Ihrer Headlines/Menüs ein */
        letter-spacing: 1.25px !important; /* Erzwingt den edlen weiten Abstand auf dem Smartphone */
        font-size: 0.95rem; /* Leicht verkleinert, damit die Zeile auf dem iPhone nicht umbricht */
        white-space: nowrap; /* Verhindert, dass Wörter wie D-I-R-E-C-T-O-R-Y mitten im Wort umbrechen */
    }}

/* --- Spezifische Veredelung für die rechtlichen Seiten --- */

/* Wenn der Browser das Siegel "legal-page" erkennt, färbt er ALLES in Champagner */
body.legal-page {
    background-color: var(--champagne-white);
}

.legal-header {
    padding: 4rem 2rem;
    text-align: center;
}

.back-to-home {
    font-family: 'Playfair Display', serif; /* Auch hier zieht sich die Marken-Identität durch */
    font-weight: 400;
    font-size: 1.8rem;
    text-transform: uppercase;
    color: var(--deep-berry);
    text-decoration: none;
    letter-spacing: 0.15em;
    transition: color 0.4s ease;
}

.back-to-home:hover {
    color: var(--brand-pink);
}

.legal-content {
    padding: 4rem 0 10rem 0;
    max-width: 700px; /* Etwas schmaler für die perfekte Lesbarkeit von Textwüsten */
    margin: 0 auto;
}

.legal-heading {
    font-family: 'Marcellus', serif;
    font-size: 2rem;
    font-weight: 400;
    color: var(--deep-berry);
    margin-bottom: 4rem;
    letter-spacing: 0.05em;
    text-align: left;
}

.legal-text-block h3 {
    font-family: 'Marcellus', serif;
    font-size: 1.15rem;
    color: var(--deep-berry);
    margin: 3rem 0 1rem 0;
    font-weight: 400;
    letter-spacing: 0.1em;
}

.legal-text-block p {
    font-size: 0.95rem;
    color: var(--charcoal-black);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-align: justify;
    text-justify: inter-word;
}

/* --- Spezifische Veredelung für die Rezept-Inseln --- */

body.recipe-page {
    background-color: var(--pale-white); /* Die gesamte Insel atmet im frischen, blassen Weiß */
}

.recipe-container {
    max-width: 750px; /* Perfekte Breite für literarischen Lesefluss */
    margin: 0 auto;
    padding-bottom: 8rem;
}

/* --- Der Audio-Bereich --- */
.audio-sanctuary {
    text-align: center;
    padding: 2rem 0 4rem 0;
}

.audio-instruction {
    font-size: 0.95rem;
    
    color: var(--charcoal-black);
    margin-bottom: 2rem;
}

.audio-player-container {
    margin-bottom: 2rem;
}

/* Verleiht dem Standard-Browser-Player ein minimalistisches Gewand */
.custom-audio-player {
    width: 100%;
    max-width: 400px;
    height: 40px;
    outline: none;
    border-radius: 0;
    opacity: 0.8;
}

.tracklist-minimal {
    list-style: none;
    padding: 0;
}

.tracklist-minimal li {
    font-size: 0.8rem;
    color: var(--muted-gray);
    margin-bottom: 0.4rem;
    letter-spacing: 0.05em;
}

.thin-divider {
    border: none;
    border-top: 1px solid rgba(61, 18, 26, 0.08);
    margin: 4rem 0;
}

/* --- Der Rezept-Textkörper (Exakt nach Ihrer Bildvorlage) --- */
.recipe-article {
    text-align: left; /* Text bleibt linksbündig wie auf dem Foto */
    padding: 2rem 0;
}

.recipe-main-title {
    font-family: 'Marcellus', serif;
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--deep-berry);
    line-height: 1.4;
    margin-bottom: 3rem;
    letter-spacing: 0.02em;
}

.recipe-description {
    font-size: 0.95rem;
    color: var(--charcoal-black);
    line-height: 1.8;
    margin-bottom: 4rem;
    text-align: justify;
    text-justify: inter-word;
}

.recipe-sub-title {
    font-family: 'Marcellus', serif;
    font-size: 1.4rem;
    color: var(--deep-berry);
    margin: 4rem 0 2rem 0;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.ingredients-list-lowercase {
    list-style: none;
    padding: 0;
    margin-bottom: 4rem;
}

.ingredients-list-lowercase li {
    font-size: 0.95rem;
    color: var(--charcoal-black);
    line-height: 2; /* Großzügiger Abstand für die Zutaten */
}

.preparation-text {
    font-size: 0.95rem;
    color: var(--charcoal-black);
    line-height: 1.8;
}

/* --- Die Einladungskarten-Sektion --- */
.invitation-download-section {
    text-align: center;
    padding: 4rem 0;
}

.invitation-text {
    font-size: 0.95rem;
    color: var(--charcoal-black);
    margin-bottom: 3rem;
}

.invitation-card-preview {
    max-width: 250px;
    margin: 0 auto 3rem auto;
    box-shadow: 0 20px 40px rgba(61, 18, 26, 0.04); /* Hauchzarter, eleganter Schatten */
    border: 1px solid rgba(61, 18, 26, 0.05);
}

.invitation-card-img {
    width: 100%;
    height: auto;
    display: block;
}

.audio-player-container {
    margin: 3rem auto;
    max-width: 450px; /* Hält den Player in einer wunderbar schlanken, edlen Form */
    border: 1px solid rgba(61, 18, 26, 0.08); /* Ein hauchzarter Rahmen in Beerenrot */
    padding: 0;
    background: transparent;
}


 /* Styling für die Galerie-Reihe */
 
 body.edition-page {
    background-color: #f3cb67;
}
 .print-room-container {
   width: 100vw; /* Nimmt die exakte Breite des gesamten Bildschirms ein */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 80px;
  margin-bottom: 80px;
  padding: 60px 16%;
   background-color: #f3cb67;
   box-sizing: border-box; }

 .print-room-grid {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 120px; /* Luft zum Atmen zwischen den Produkten */
   width: 100%; }
   
   

 .product-card {
   flex: 1;
   min-width: 200px; /* Sorgt dafür, dass es auf Smartphones untereinander springt */
   max-width: 220px;
   display: flex;
   flex-direction: column;
   background-color: #f3cb67;
   
 }

 .product-image-container {
   width: 100%;
   aspect-ratio: 5 / 7; /* Perfekt für das 50x70 Hochformat */
   background-color: var(--champagne-white); /* Minimal dunklerer Hintergrund für das Bild-Innere falls gewünscht */
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   border: 5px solid #FFFDF9;
     }

 .product-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .product-title {
   font-family: 'Marcellus', serif;
   font-size: 16px;
   color: var(--charcoal-black);
   margin: 0 0 8px 0;
   font-weight: normal;
 }

 .product-price {
   font-family: 'Marcellus', serif;
   font-size: 15px;
   color: var(--charcoal-black);
   margin-bottom: 16px;
 }

 /* Der feine Rahmen-Button im Apartamento-Stil */
 .acquire-button {
   font-family: 'Inter', sans-serif;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--pale-white);
   text-align: center;
   text-decoration: none;
   padding: 12px 0;
   border: 1px solid var(--charcoal-black);
   background: var(--charcoal-black);
   transition: all 0.3s ease;
   cursor: pointer;
   margin-bottom: 4rem;  }

 .acquire-button:hover {
   background-color: var(--charcoal-black);
   color: var(--pale-white);
 }
 
 .edition-footer {
    background-color: #f3cb67;
    width: 100vw;
    padding: 6rem 2rem 4rem 2rem;
    text-align: center;
}