/* CLAUDE: Erweiterte Styles für Homepage-Sektionen (Fallstudien, Standorte, Finaler CTA) */
/* CLAUDE: Ausgelagert aus homepage-sections.css um 200-Zeilen-Limit einzuhalten */

/* ============================================
   CLAUDE: Sektion 6 — Fallstudien / Case Studies
   ============================================ */

/* CLAUDE: Fallstudien-Container — Marble White Hintergrund */
.ddi-case-studies {
    padding: var(--wp--preset--spacing--xxl) 0;
    background-color: var(--wp--preset--color--marble-white);
}

/* CLAUDE: Einzelne Fallstudie als Karte */
.ddi-case-study-card {
    background-color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--porous-stone);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

/* CLAUDE: Hover-Effekt — dezenter Schatten */
.ddi-case-study-card:hover {
    box-shadow: 0 4px 20px rgba(59, 42, 26, 0.1);
}

/* CLAUDE: Foto-Bereich oben in der Karte */
.ddi-case-study-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* CLAUDE: Text-Bereich der Fallstudie */
.ddi-case-study-body {
    padding: var(--wp--preset--spacing--md);
}

/* CLAUDE: Name und Beruf */
.ddi-case-study-card .ddi-cs-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wp--preset--color--dark-umber);
    margin-bottom: 0.25rem;
}

/* CLAUDE: Berufsbezeichnung — Heritage Gold */
.ddi-case-study-card .ddi-cs-profession {
    color: var(--wp--preset--color--heritage-gold);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: var(--wp--preset--spacing--md);
}

/* CLAUDE: Kennzahlen-Bereich (Kaufpreis, Steuerersparnis, Zuzahlung) */
.ddi-case-study-card .ddi-cs-stats {
    border-top: 1px solid var(--wp--preset--color--porous-stone);
    padding-top: var(--wp--preset--spacing--sm);
    margin-bottom: var(--wp--preset--spacing--sm);
}

/* CLAUDE: Stat-Label — Chestnut */
.ddi-cs-stat-label {
    color: var(--wp--preset--color--chestnut);
}

/* CLAUDE: Stat-Wert — Dark Umber, fett */
.ddi-cs-stat-value {
    color: var(--wp--preset--color--dark-umber);
    font-weight: 700;
}

/* CLAUDE: Zitat des Kunden — kursiv */
.ddi-case-study-card .ddi-cs-quote {
    font-style: italic;
    color: var(--wp--preset--color--chestnut);
    font-size: 0.9rem;
    border-left: 3px solid var(--wp--preset--color--heritage-gold);
    padding-left: var(--wp--preset--spacing--sm);
    margin-top: var(--wp--preset--spacing--sm);
}

/* ============================================
   CLAUDE: Sektion 7 — Standorte
   ============================================ */

/* CLAUDE: Standorte-Container — weißer Hintergrund */
.ddi-locations {
    padding: var(--wp--preset--spacing--xxl) 0;
    background-color: var(--wp--preset--color--white);
}

/* CLAUDE: Standort-Karte mit Stadtbild als Cover */
.ddi-location-card {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

/* CLAUDE: Stadtname groß über dem Bild */
.ddi-location-card h3 {
    color: var(--wp--preset--color--white);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--wp--preset--spacing--xs);
}

/* CLAUDE: Wertsteigerung als auffälliges Badge */
.ddi-location-card .ddi-loc-growth {
    display: inline-block;
    background-color: var(--wp--preset--color--heritage-gold);
    color: var(--wp--preset--color--dark-umber);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.9rem;
}

/* CLAUDE: Beschreibungstext unter dem Badge */
.ddi-location-card .ddi-loc-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    margin-top: var(--wp--preset--spacing--xs);
}

/* ============================================
   CLAUDE: Sektion 9 — Finaler CTA
   ============================================ */

/* CLAUDE: Dunkler Vollbild-CTA am Seitenende */
.ddi-final-cta {
    padding: var(--wp--preset--spacing--xxl) 0;
    text-align: center;
}

/* CLAUDE: Überschrift — Heritage Gold auf dunklem Hintergrund */
.ddi-final-cta h2 {
    color: var(--wp--preset--color--heritage-gold);
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    margin-bottom: var(--wp--preset--spacing--md);
}

/* CLAUDE: Subtext — helles Grau */
.ddi-final-cta .ddi-final-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.125rem;
    margin-bottom: var(--wp--preset--spacing--lg);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* CLAUDE: CTA-Button — Burgundy, größer als normal */
.ddi-final-cta .wp-block-button__link {
    background-color: var(--wp--preset--color--burgundy);
    color: var(--wp--preset--color--white);
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 4px;
}

/* CLAUDE: Hover — dunkleres Burgundy */
.ddi-final-cta .wp-block-button__link:hover {
    background-color: #6d1a25;
}

/* CLAUDE: Telefonnummer unter dem Button */
.ddi-final-cta .ddi-phone-link {
    color: var(--wp--preset--color--heritage-gold);
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: var(--wp--preset--spacing--md);
}

/* CLAUDE: "Oder rufen Sie uns an" Text */
.ddi-final-cta .ddi-phone-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin-top: var(--wp--preset--spacing--xs);
}

/* ============================================
   CLAUDE: Globale Button-Styles für alle Homepage-Sektionen
   CLAUDE: Stellt sicher, dass alle CTA-Buttons einheitlich Burgundy sind
   ============================================ */

/* CLAUDE: Einheitlicher CTA-Button — Burgundy auf allen Sektionen */
/* CLAUDE: Hero und Final-CTA haben eigene Regeln, hier für alle anderen */
.ddi-process-steps .wp-block-button__link,
.ddi-afa-section .wp-block-button__link {
    background-color: var(--wp--preset--color--burgundy);
    color: var(--wp--preset--color--white);
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

/* CLAUDE: Hover-Effekt — dunkleres Burgundy, einheitlich */
.ddi-process-steps .wp-block-button__link:hover,
.ddi-afa-section .wp-block-button__link:hover {
    background-color: #6d1a25;
}

/* ============================================
   CLAUDE: Spacing-Fix — entfernt WordPress Block-Gap zwischen Sektionen
   CLAUDE: WordPress fügt 40px margin-bottom zwischen .alignfull-Blöcken hinzu
   CLAUDE: Unsere Sektionen haben bereits eigenes Padding (xxl = 96px)
   ============================================ */

/* CLAUDE: Entfernt doppelten Abstand zwischen aufeinanderfolgenden Sektionen */
.entry-content > .alignfull + .alignfull {
    margin-top: 0;
}

/* CLAUDE: Entfernt margin-bottom auf Sektions-Blöcken der Homepage */
.entry-content > .ddi-hero-landing,
.entry-content > .ddi-target-audience,
.entry-content > .ddi-pain-points,
.entry-content > .ddi-benefits-section,
.entry-content > .ddi-process-steps,
.entry-content > .ddi-trust-bar,
.entry-content > .ddi-afa-section,
.entry-content > .ddi-case-studies,
.entry-content > .ddi-object-types,
.entry-content > .ddi-locations,
.entry-content > .ddi-faq-section,
.entry-content > .ddi-final-cta {
    margin-bottom: 0;
}

/* ============================================
   CLAUDE: Responsive Anpassungen
   ============================================ */

/* CLAUDE: Tablet — Fallstudien 2-spaltig statt 3 */
@media (max-width: 1024px) {
    .ddi-case-studies .wp-block-columns {
        flex-wrap: wrap;
    }
    .ddi-case-studies .wp-block-column {
        flex-basis: 48% !important;
    }

    /* CLAUDE: Prozess-Timeline auf Tablet — kleinere Kreise */
    .ddi-process-timeline__image {
        width: 80px;
        height: 80px;
    }

    /* CLAUDE: Verbindungslinie auf Tablet — angepasste Position */
    .ddi-process-timeline__step:not(:last-child)::after {
        top: 40px;
        left: calc(50% + 40px + 3px);
        width: calc(100% - 80px - 6px);
    }

    /* CLAUDE: Kleinere Schrift auf Tablet */
    .ddi-process-timeline__desc {
        font-size: 0.85rem;
    }
}

/* CLAUDE: Mobil — alles einspaltig, kleinere Abstände */
@media (max-width: 600px) {
    .ddi-case-studies .wp-block-column,
    .ddi-pain-points .wp-block-column,
    .ddi-locations .wp-block-column {
        flex-basis: 100% !important;
    }

    .ddi-trust-bar .wp-block-columns {
        gap: var(--wp--preset--spacing--lg);
    }

    /* CLAUDE: Inline-Padding für Cover-Blöcke auf Mobil — verhindert Text am Bildschirmrand */
    .ddi-final-cta .wp-block-cover__inner-container,
    .ddi-hero-landing .wp-block-cover__inner-container {
        padding-inline: 1.25rem;
    }

    /* CLAUDE: Kompakteres Padding auf Mobil — 96px ist zu viel auf kleinen Bildschirmen */
    .ddi-pain-points,
    .ddi-process-steps,
    .ddi-afa-section,
    .ddi-case-studies,
    .ddi-locations,
    .ddi-faq-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* CLAUDE: Inline-Padding für alle Nicht-Cover-Sektionen auf Mobil */
    /* CLAUDE: Verhindert Überlagerung durch Floating Action Buttons (rechts unten) */
    .ddi-afa-section > h2,
    .ddi-afa-section > p,
    .ddi-afa-section > .wp-block-buttons,
    .ddi-case-studies > h2,
    .ddi-case-studies > p,
    .ddi-locations > h2,
    .ddi-locations > p,
    .ddi-pain-points > h2,
    .ddi-faq-section > h2 {
        padding-inline: 1rem;
    }

    /* CLAUDE: FAQ-Sektion — Details/Summary brauchen auch Inline-Padding */
    .ddi-faq-section details {
        padding-inline: 1rem;
    }

    /* CLAUDE: Prozess-Timeline — vertikal auf Mobile */
    /* CLAUDE: Flexbox column, Linie links statt horizontal */
    .ddi-process-timeline {
        flex-direction: column;
        align-items: stretch;
        padding-left: 0;
    }

    /* CLAUDE: Step auf Mobile — horizontal Layout (Bild links, Text rechts) */
    .ddi-process-timeline__step {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
        text-align: left;
        padding: 0 0 2rem 0;
    }

    /* CLAUDE: Bild auf Mobile — kleiner (70px) */
    .ddi-process-timeline__image {
        width: 70px;
        height: 70px;
        min-width: 70px;
        margin: 0;
    }

    /* CLAUDE: Content-Wrapper auf Mobile — nimmt restliche Breite ein */
    .ddi-process-timeline__content {
        flex: 1;
    }

    /* CLAUDE: Vertikale Verbindungslinie auf Mobile */
    /* CLAUDE: Ersetzt die horizontale ::after Linie */
    .ddi-process-timeline__step:not(:last-child)::after {
        top: 70px;
        left: 35px;
        width: 0;
        height: calc(100% - 70px);
        border-top: none;
        border-left: 2px dashed var(--wp--preset--color--heritage-gold, #C19A6B);
    }
}