/* CLAUDE: Styles für neue Homepage-Sektionen (Zielgruppe, Vorteile, Objekttypen, FAQ) */
/* CLAUDE: Ergänzt homepage-sections.css und homepage-sections-ext.css */

/* ============================================
   CLAUDE: Sektion 2 — Zielgruppe / Target Audience
   ============================================ */

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

/* CLAUDE: Karten-Grid für Zielgruppen */
.ddi-audience-cards {
    gap: var(--wp--preset--spacing--lg);
}

/* CLAUDE: Einzelne Zielgruppen-Karte mit Rahmen */
.ddi-audience-card {
    padding: var(--wp--preset--spacing--lg);
    border: 1px solid var(--wp--preset--color--porous-stone);
    border-radius: 8px;
    background-color: var(--wp--preset--color--marble-white);
    transition: box-shadow 0.3s ease;
}

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

/* CLAUDE: Zielgruppen-Titel — Burgundy */
.ddi-audience-card h3 {
    margin-bottom: var(--wp--preset--spacing--sm);
}

/* CLAUDE: Beschreibung — Fließtext */
.ddi-audience-card p {
    line-height: 1.6;
}

/* ============================================
   CLAUDE: Sektion 4 — Vorteile / Benefits
   ============================================ */

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

/* CLAUDE: Einzelne Vorteil-Karte mit Rahmen */
.ddi-benefit-card {
    padding: var(--wp--preset--spacing--lg);
    border: 1px solid var(--wp--preset--color--porous-stone);
    border-radius: 8px;
    background-color: var(--wp--preset--color--marble-white);
    transition: box-shadow 0.3s ease;
}

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

/* CLAUDE: Vorteil-Titel — Heritage Gold */
.ddi-benefit-card h3 {
    margin-bottom: var(--wp--preset--spacing--sm);
}

/* CLAUDE: Beschreibungstext */
.ddi-benefit-card p {
    line-height: 1.6;
}

/* ============================================
   CLAUDE: Sektion 9 — Objekttypen / Object Types
   ============================================ */

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

/* CLAUDE: Einzelne Objekttyp-Karte als Cover-Block */
.ddi-object-type-card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* CLAUDE: Hover-Effekt — leichtes Vergrößern */
.ddi-object-type-card:hover {
    transform: scale(1.02);
}

/* CLAUDE: Titel auf dem Cover-Bild */
.ddi-object-type-card h3 {
    font-size: 1.375rem;
    margin-bottom: var(--wp--preset--spacing--sm);
}

/* CLAUDE: Beschreibung auf dem Cover */
.ddi-object-type-card p {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ============================================
   CLAUDE: FAQ — Verbesserte Details/Summary Styles
   ============================================ */

/* CLAUDE: FAQ-Einzelitem als Akkordeon */
.ddi-faq-item {
    border-bottom: 1px solid var(--wp--preset--color--porous-stone);
    padding: var(--wp--preset--spacing--md) 0;
}

/* CLAUDE: Erstes Item — Rand oben */
.ddi-faq-item:first-of-type {
    border-top: 1px solid var(--wp--preset--color--porous-stone);
}

/* CLAUDE: Summary (Frage) — klickbarer Header */
.ddi-faq-item summary {
    cursor: pointer;
    font-size: 1.125rem;
    color: var(--wp--preset--color--dark-umber);
    padding: var(--wp--preset--spacing--sm) 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* CLAUDE: Pfeil-Indikator für geöffnet/geschlossen */
.ddi-faq-item summary::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--wp--preset--color--heritage-gold);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: var(--wp--preset--spacing--sm);
}

/* CLAUDE: Geöffneter Zustand — Plus wird Minus */
.ddi-faq-item[open] summary::after {
    content: "\2212";
}

/* CLAUDE: Standard-Marker entfernen (Safari/Chrome) */
.ddi-faq-item summary::-webkit-details-marker {
    display: none;
}

/* CLAUDE: Antwort-Bereich — etwas eingerückt */
.ddi-faq-item > p {
    padding: 0 0 var(--wp--preset--spacing--sm) 0;
    line-height: 1.7;
}

/* ============================================
   CLAUDE: Layout-Override für neue Sektionen
   CLAUDE: Gleicher Fix wie in homepage-sections.css
   ============================================ */

/* CLAUDE: Columns-Override für neue Sektionen */
.ddi-target-audience .wp-block-columns,
.ddi-benefits-section .wp-block-columns,
.ddi-object-types .wp-block-columns {
    max-width: var(--content-wide, 1200px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-inline: clamp(1rem, 3vw, 2rem) !important;
}

/* CLAUDE: Content-Override für neue Full-Width-Sektionen */
.entry-content > .has-background.alignfull.ddi-target-audience > *,
.entry-content > .has-background.alignfull.ddi-benefits-section > *,
.entry-content > .has-background.alignfull.ddi-object-types > * {
    max-width: 1200px;
}

/* ============================================
   CLAUDE: Responsive — Mobil
   ============================================ */

@media (max-width: 600px) {
    /* CLAUDE: Alle Karten einspaltig auf Mobil */
    .ddi-target-audience .wp-block-column,
    .ddi-benefits-section .wp-block-column,
    .ddi-object-types .wp-block-column {
        flex-basis: 100% !important;
    }

    /* CLAUDE: Kompakteres Padding auf Mobil */
    .ddi-target-audience,
    .ddi-benefits-section,
    .ddi-object-types {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* CLAUDE: Inline-Padding für Texte */
    .ddi-target-audience > h2,
    .ddi-target-audience > p,
    .ddi-benefits-section > h2,
    .ddi-benefits-section > p,
    .ddi-object-types > h2,
    .ddi-object-types > p {
        padding-inline: 1rem;
    }
}