/* =====================================================
   FREI ENTDEKA — MAIN.CSS
   Letzte Änderung: Mai 2026
   
   STRUKTUR:
   1.  Schriftarten
   2.  Farben & Hintergrund
   3.  Typografie
   4.  Layout & Container
   5.  Buttons
   6.  Logo
   7.  Hero (Cover Block)
   8.  Über-mich Teaser (Startseite)
   9.  Angebots-Vorschau (Startseite)
   10. Blog — Einzelbeitrag
   
   ZUM ANPASSEN: Suche nach "← hier anpassen"
   ===================================================== */

html {
    scroll-behavior: smooth;
}

/* verhindert, dass das Menü das Ziel eines Ankers verdeckt */
[id] {
    scroll-margin-top: 500px /* hier anpassen: Hähe des Menüs */;
}

/* =====================================================
   1. SCHRIFTARTEN (lokal gehostet, kein Google Fonts)
   
   font-display: swap = Seite lädt sofort mit Fallback-
   Schrift, eigene Schrift wird nachgeladen.
   ===================================================== */

@font-face {
    font-family: 'Give You Glory';
    src: url('../fonts/GiveYouGlory.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Josefin Slab';
    src: url('../fonts/JosefinSlab-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ABeeZee';
    src: url('../fonts/ABeeZee-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* =====================================================
   2. FARBEN & HINTERGRUND
   
   Farbpalette:
   #f5f3ee → Creme        (Seitenhintergrund)
   #cfc6b4 → Warmes Beige (Über-mich, Kacheln, CTA)
   #cfae5d → Gold          (Buttons, Akzente)
   #a8873a → Dunkles Gold  (Button-Hover)
   #1e1e1e → Fast-Schwarz  (Text)
   ===================================================== */

body {
    background-color: #f5f3ee;
    color: #1e1e1e;
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
}


/* =====================================================
   3. TYPOGRAFIE
   
   Drei-Schrift-System:
   Give You Glory → H1, H2, H5, H6 (handschriftlich)
   Josefin Slab   → H3, H4 (warm, strukturiert)
   ABeeZee        → Fließtext (freundlich, gut lesbar)
   
   clamp(min, bevorzugt, max) = Schrift skaliert
   automatisch mit der Bildschirmbreite.
   ===================================================== */

h1, h2, h5, h6 {
    font-family: 'Give You Glory', cursive;
    color: #1e1e1e;
}

h3, h4 {
    font-family: 'Josefin Slab', serif;
    color: #1e1e1e;
}

body, p, li, a, input, textarea, button {
    font-family: 'ABeeZee', sans-serif;
    color: #1e1e1e;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
p  { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.7; }


/* =====================================================
   4. LAYOUT & CONTAINER
   
   Blockbase begrenzt Inhalte auf ~620px.
   Diese Regeln heben das global auf.
   ===================================================== */

/* Header-Inhalt: Abstand zum Rand */
.wp-block-group.site-header .wp-block-group.site-brand,
.wp-block-group.site-header nav {
    margin-left: 2rem !important;
    margin-right: 2rem !important;
}

/* Äußerster Seiten-Container: kein Padding */
.wp-site-blocks {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Inhalts-Container: kein Padding */
.entry-content,
.wp-block-post-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Seitentitel auf statischen Seiten ausblenden
   (im Full Site Editor global eingestellt) */
.page .entry-title,
.page .wp-block-post-title {
    display: none;
}

/* Website-Titel und Slogan im Header ausblenden
   (bereits im Logo-Bild enthalten) */
.wp-block-site-title,
.wp-block-site-tagline {
    display: none !important;
}

/* Textauszug-Block: volle Anzeige */
.wp-block-post-excerpt {
    max-height: none !important;
    overflow: visible !important;
}

.wp-block-post-excerpt__content {
    display: block !important;
}

/* Gruppen-Container mit Hintergrundfarbe volle Breite */
body.page:not(.home) .wp-block-group.has-background:not([id^="angebot"]) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 3rem 4rem !important;
    box-sizing: border-box !important;
}


/* =====================================================
   5. BUTTONS
   
   :visited → gleiche Farbe für bereits besuchte Links
   :hover   → dunkleres Gold beim Drüberfahren
   ===================================================== */

.wp-block-button__link,
.wp-block-button__link:visited {
    background-color: #cfae5d !important;
    color: #ffffff !important;
    border-radius: 6px;
    padding: 14px 28px;
    font-family: 'ABeeZee', sans-serif;
    font-size: 1rem;
    border: none;
    text-decoration: none;
}

.wp-block-button__link:hover {
    background-color: #a8873a !important;
    color: #ffffff !important;
}

/* Alle Button-Gruppen rechtsbündig */
.wp-block-buttons {
    justify-content: flex-end !important;
    width: 100% !important;
    max-width: 100% !important;
}


/* =====================================================
   6. LOGO
   
   ZUM ANPASSEN: width ← hier anpassen
   height: auto = Seitenverhältnis bleibt erhalten
   ===================================================== */

.custom-logo {
    width: 180px !important; /* ← hier anpassen */
    height: auto !important;
}


/* =====================================================
   7. HERO — COVER BLOCK (Startseite)
   
   ZUM ANPASSEN:
   - margin-top     → Abstand zum Header (negativer = kleiner)
   - min-height     → Höhe des Hero-Bereichs
   - ::after height → Länge des Fade-Effekts unten
   
   und  COVER BLOCK — andere Seiten (Angebote, Über mich etc.)
   
   Kleinerer, kompakterer Header ohne Fade-Effekt.
   ZUM ANPASSEN: min-height → Höhe des Bereichs
   ===================================================== */

.home .wp-block-cover {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: -6rem !important; /* ← hier anpassen */
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    position: relative !important;
}

/* Sanfter Fade-out nach unten in Beige */
.home .wp-block-cover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px; /* ← hier anpassen */
    background: linear-gradient(to bottom, transparent, #cfc6b4);
    pointer-events: none;
    z-index: 1;
}

/* Innerer Container: Text nach unten ausrichten */
.home .wp-block-cover__inner-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 2rem 4rem 2rem;
    min-height: 500px; /* ← hier anpassen */
    max-width: 90% !important;
    width: 90% !important;
    margin: 0 auto;
    z-index: 2 !important;
    position: relative !important;
}

body.page:not(.home) .wp-block-cover {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: -2rem !important; /* ← hier anpassen */
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
}

body.page:not(.home) .wp-block-cover__inner-container {
    display: flex;
    flex-direction: column;
    justify-content: center !important; /* zentriert statt unten */
    align-items: center !important;
    padding: 2rem !important;
    min-height: 100px !important; /* ← hier anpassen */
    max-width: 90% !important;
    width: 90% !important;
    margin: 0 auto;
}

.index .wp-block-cover {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: -5rem !important; /* ← hier anpassen */
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
}

.index .wp-block-cover__inner-container {
    display: flex;
    flex-direction: column;
    justify-content: center !important; /* zentriert statt unten */
    align-items: center !important;
    padding: 2rem !important;
    min-height: 100px !important; /* ← hier anpassen */
    max-width: 90% !important;
    width: 90% !important;
    margin: 0 auto;
}

/* Hero H1 → Gold */
.wp-block-cover h1 {
    font-size: clamp(3.6rem, 6vw, 4.5rem) !important;
    color: #cfae5d !important;
    max-width: 100% !important;
    margin-bottom: 0.5rem !important;
}

/* Hero Fließtext → Creme */
.wp-block-cover p {
    color: #f5f3ee !important;
    font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
    max-width: 100% !important;
    margin-top: 0 !important;
}


/* =====================================================
   8. ÜBER-MICH TEASER (nur Startseite)
   
   .home = CSS-Klasse die WordPress nur auf der
   Startseite setzt — Regeln gelten nirgendwo sonst.
   
   ZUM ANPASSEN:
   - padding → Innenabstand (oben rechts unten links)
   - margin auf .wp-block-media-text → Bild hochziehen
   ===================================================== */

/* Gruppe: volle Breite + Beige-Hintergrund */
.home .wp-block-group:has(.wp-block-media-text) {
    background-color: #cfc6b4 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    padding: 3rem 4rem 2rem 4rem !important;
    box-sizing: border-box !important;
}

/* Medien-&-Text-Block */
.home .wp-block-media-text {
    background-color: transparent !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: -3rem 0 1.5rem 0 !important;
    /* -3rem oben = Bild etwas hochziehen
       1.5rem unten = Abstand zum Fließtext */
}

/* Bildspalte: zentriert */
.home .wp-block-media-text .wp-block-media-text__media {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Foto: kreisrund, feste Größe */
.home .wp-block-media-text .wp-block-media-text__media img {
    width: 180px !important; /* ← hier anpassen */
    height: 180px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Textspalte */
.home .wp-block-media-text .wp-block-media-text__content {
    padding: 0 !important;
    max-width: 100% !important;
}

/* Fließtext + Button: volle Breite */
.home .wp-block-group:has(.wp-block-media-text) > p,
.home .wp-block-group:has(.wp-block-media-text) > .wp-block-buttons,
.home .wp-block-group:has(.wp-block-media-text).is-layout-constrained > p,
.home .wp-block-group:has(.wp-block-media-text).is-layout-constrained > .wp-block-buttons {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}


/* =====================================================
   9. ANGEBOTS-VORSCHAU (Startseite)
   
   Drei Kacheln nebeneinander.
   ZUM ANPASSEN:
   - padding in .wp-block-group → Außenabstand
   - padding in .wp-block-column → Innenabstand Kachel
   ===================================================== */

/* Gruppe: volle Breite + Creme-Hintergrund */
.home .wp-block-group:has(.wp-block-columns) {
    background-color: #f5f3ee !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 4rem !important;
    box-sizing: border-box !important;
}

/* Überschrift: linksbündig, volle Breite */
.home .wp-block-group:has(.wp-block-columns) > h2,
.home .wp-block-group:has(.wp-block-columns).is-layout-constrained > h2 {
    max-width: 100% !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 0.5rem !important;
}

/* Spalten-Container */
.home .wp-block-columns {
    margin-top: -2rem !important;
    align-items: stretch !important;
    background-color: transparent !important;
    padding: 3rem 4rem !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
    gap: 1.5rem !important;
}

/* Einzelne Kachel */
.home .wp-block-column {
    background-color: #cfc6b4 !important;
    border: 1px solid #cfc6b4 !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Kachel-Überschrift */
.home .wp-block-column h3 {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

/* Kachel-Button: rechtsbündig, Mindestabstand zum Text */
.home .wp-block-column .wp-block-buttons {
    justify-content: flex-end !important;
    margin-top: auto !important;
    padding-top: 1.5rem !important;
}


/* =====================================================
   10. BLOG — EINZELBEITRAG
   ===================================================== */

/* Versuche, eventuell versteckten Text im Auszug anzuzeigen. */
.wp-block-post-excerpt__content {
    display: inline !important;
}

/* Fließtext im Artikel */
.single .entry-content p {
    font-size: 1.05rem !important;
    line-height: 1.85 !important;
    margin-bottom: 1rem !important;
}

/* Zitat-Block */
.single .entry-content .wp-block-quote {
    border-left: 3px solid #cfae5d !important;
    padding-left: 1.5rem !important;
    margin: 2rem 0 !important;
    font-style: italic !important;
}

.single .entry-content .wp-block-quote p {
    color: #555 !important;
}

/* Listen */
.single .entry-content ol,
.single .entry-content ul {
    padding-left: 1.5rem !important;
    margin-bottom: 1rem !important;
}

.single .entry-content li {
    line-height: 1.85 !important;
    margin-bottom: 0.5rem !important;
}

/* Zwischenüberschriften: Salbeigrün-Hintergrund */
.single .entry-content h2,
.single .entry-content h3 {
    background-color: #d4dccf !important;
    padding: 1rem 1rem !important;
    border-radius: 6px !important;
    margin-top: 2.5rem !important;
}

/* Take-Home-Message: goldener Rahmen */
.single .entry-content h2:last-of-type {
    background-color: #fdfcf9 !important;
    border: 1.5px solid #cfae5d !important;
    border-radius: 6px !important;
    padding: 1.2rem 1.5rem !important;
    box-shadow: 4px 4px 0px #cfae5d !important;
}

/* CTA-Bereich: Spalten ohne eigenen Hintergrund */
.single .wp-block-columns .wp-block-column {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 1rem !important;
}

/* =====================================================
   11. BLOG — ÜBERSICHTSSEITE
   ===================================================== */
   
/* 1. Das Raster-System fixieren */
.wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    /* Wir erzwingen, dass jede Reihe exakt gleich hoch startet */
    grid-auto-rows: min-content !important; 
    gap: 50px 25px !important;
    align-items: start !important; 
}

/* Auf Tablets (2 Spalten) und Handys (1 Spalte) anpassen */
@media (max-width: 900px) {
    .wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .wp-block-post-template { grid-template-columns: 1fr !important; }
}

/* 2. Die Karte stabilisieren */
.wp-block-post {
    display: flex !important;
    flex-direction: column !important;
    height: 100%; /* Die Karte nutzt immer die volle verfügbare Höhe */
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Der Bild-Container (Quadrat-Fix) */
.wp-block-post-featured-image {
    order: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 100% !important; /* Absolutes Quadrat */
    margin: -45px 0 0 0 !important;
    overflow: hidden !important;
}

/* 3. Die "Aufzeichnen"-Animation des Rahmens */
.wp-block-post-featured-image::after {
    content: '';
    position: absolute;
    top: 5%;
    left: 5%;
    right: 5%;
    bottom: 5%;
    border: 1.2px solid #cfae5d; /* Etwas feiner */
    z-index: 2;
    opacity: 0;
    /* Der Trick: Wir verstecken den Rahmen hinter einem Schlitz in der Mitte */
    clip-path: inset(0 50% 0 50%); 
    transition: clip-path 0.6s ease-in-out, opacity 0.2s;
}

.wp-block-post:hover .wp-block-post-featured-image::after {
    opacity: 1;
    /* Der Schlitz öffnet sich nach außen -> Rahmen wird "gezeichnet" */
    clip-path: inset(0 0 0 0); 
}


/* 4. Der Titel-Fix (Z-Index und Überlappung) */
.blog .wp-block-post-title {
    order: 2 !important;
    height: 170px; /* hier anpassen: feste Höhe, damit alle Boxen gleich groß sind */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative !important;
    z-index: 10 !important;
    /* Negative margin zieht den Titel hoch, ohne das Layout darüber zu stören */
    margin-top: -35px !important; 
    margin-left: 2% !important;
    margin-right: 2% !important;
    margin-bottom: 15px !important;
    padding: 15px !important;
    background-color: #fdfcf9 !important;
    border: 1.5px solid #cfae5d !important;
    border-radius: 6px !important;
    box-shadow: 4px 4px 0px #cfae5d !important;
}

/* 5. Textauszug */
.wp-block-post-excerpt {
    order: 3 !important;
    margin-top: auto; /* schiebt den Textauszug nach unten, falls gewünscht */
    min-height: 190px; /* reserviert Platz für die 4 Zeilen */
}

.wp-block-post-excerpt__content {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.5;
    margin-top: 10px !important;
}


/* =====================================================
   ABSCHLUSS-CTA (Startseite)
   ===================================================== */

.home .wp-block-group:has(.wp-block-buttons):not(:has(.wp-block-columns)) {
    background-color: #cfc6b4 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 3rem 4rem !important;
    box-sizing: border-box !important;
}


/* =====================================================
   ANGEBOTSSEITE — Vollbreite-Blöcke
   .page-id-1608 greift nur auf der Angebotsseite
   ===================================================== */

/* Angebotsseite: Einleitung + CTA volle Breite
   Angebotskästen haben eigene IDs und werden NICHT erfasst */