/* CLAUDE: Styles für alle Homepage-Sektionen (Block Patterns) */
/* CLAUDE: Verwendet theme.json Custom Properties für Farben und Spacing */
/* CLAUDE: Jede Sektion hat einen eigenen Abschnitt — bei > 200 Zeilen aufteilen */

/* ============================================
   CLAUDE: Layout-Override für Homepage-Sektionen
   CLAUDE: editor.css erzwingt max-width: 750px auf .wp-block-columns (!important)
   CLAUDE: und auf Kinder von .has-background.alignfull (750px)
   CLAUDE: Diese Overrides geben Homepage-Sektionen volle 1200px Breite
   ============================================ */

/* CLAUDE: Columns-Override — hebt 750px-Beschränkung in Homepage-Sektionen auf */
/* CLAUDE: !important nötig weil editor.css !important auf .wp-block-columns setzt */
/* CLAUDE: 1200px = --content-wide aus layout.css, zentriert mit auto-Margins */
.ddi-pain-points .wp-block-columns,
.ddi-trust-bar .wp-block-columns,
.ddi-afa-section .wp-block-columns,
.ddi-case-studies .wp-block-columns,
.ddi-locations .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 — hebt 750px auf Kinder von Full-Width-Background-Blöcken auf */
/* CLAUDE: Betrifft h2-Überschriften, .wp-block-buttons etc. innerhalb der Sektionen */
.entry-content > .has-background.alignfull.ddi-process-steps > *,
.entry-content > .has-background.alignfull.ddi-trust-bar > *,
.entry-content > .has-background.alignfull.ddi-case-studies > *,
.entry-content > .has-background.alignfull.ddi-afa-section > * {
    max-width: 1200px;
}

/* ============================================
   CLAUDE: Sektion 1 — Hero Landing
   ============================================ */

/* CLAUDE: Hero-Sektion — Vollbild mit Hintergrundbild und Overlay */
/* CLAUDE: Höhe anpassen: min-height ändern (z.B. 80vh, 100vh) */
.ddi-hero-landing {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CLAUDE: Hero-Inhalt zentriert über dem Hintergrundbild */
/* CLAUDE: max-width begrenzt die Textbreite für bessere Lesbarkeit */
.ddi-hero-landing .wp-block-cover__inner-container {
    max-width: 800px;
    text-align: center;
}

/* CLAUDE: Hero H1 — große weiße Schrift für maximale Wirkung */
/* CLAUDE: Schriftgröße anpassen: font-size ändern oder clamp() nutzen */
.ddi-hero-landing h1 {
    color: var(--wp--preset--color--white);
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.2;
    margin-bottom: var(--wp--preset--spacing--md);
    font-weight: 700;
}

/* CLAUDE: Hero Subheadline — etwas kleiner, helles Grau */
.ddi-hero-landing .ddi-hero-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1rem, 2.5vw, 1.375rem);
    line-height: 1.6;
    margin-bottom: var(--wp--preset--spacing--lg);
}

/* CLAUDE: Hero CTA-Button — Burgundy für maximalen Kontrast auf dunklem Bild */
.ddi-hero-landing .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 */
.ddi-hero-landing .wp-block-button__link:hover {
    background-color: #6d1a25;
}

/* CLAUDE: Trust-Badge unter dem CTA — dezent, weiß */
.ddi-hero-landing .ddi-trust-badge {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-top: var(--wp--preset--spacing--md);
}

/* ============================================
   CLAUDE: Sektion 2 — Pain Points (3 Karten)
   ============================================ */

/* CLAUDE: Pain-Points-Container — heller Hintergrund, vertikaler Abstand */
.ddi-pain-points {
    padding: var(--wp--preset--spacing--xxl) 0;
    background-color: var(--wp--preset--color--white);
}

/* CLAUDE: Einzelne Pain-Point-Karte — zentrierter Text mit Rahmen */
.ddi-pain-point-card {
    text-align: center;
    padding: var(--wp--preset--spacing--lg);
    border: 1px solid var(--wp--preset--color--porous-stone);
    border-radius: 8px;
    background-color: var(--wp--preset--color--white);
}

/* CLAUDE: Icon über der Karte — Heritage Gold Farbe */
.ddi-pain-point-card img {
    width: 64px;
    height: 64px;
    margin-bottom: var(--wp--preset--spacing--md);
}

/* CLAUDE: Pain-Point Überschrift — Dark Umber */
.ddi-pain-point-card h3 {
    color: var(--wp--preset--color--dark-umber);
    font-size: 1.375rem;
    margin-bottom: var(--wp--preset--spacing--sm);
}

/* CLAUDE: Pain-Point Beschreibung — Chestnut für Sekundärtext */
.ddi-pain-point-card p {
    color: var(--wp--preset--color--chestnut);
    font-size: 1rem;
    line-height: 1.6;
}

/* ============================================
   CLAUDE: Sektion 3 — Prozess-Timeline mit Fotos
   CLAUDE: Desktop: Horizontal, Flexbox row, gestrichelte Linie
   CLAUDE: Mobile: Vertikal, Flexbox column, Linie links
   ============================================ */

/* CLAUDE: Überschrift der Prozess-Sektion — Abstand nach unten zu den Schritt-Bildern */
/* CLAUDE: Ändern: margin-bottom für mehr/weniger Abstand zur Timeline */
.ddi-process-steps h2,
.ddi-process-steps .wp-block-heading {
    margin-bottom: var(--wp--preset--spacing--xl, 4rem);
}

/* CLAUDE: Timeline-Container — Flexbox row auf Desktop */
/* CLAUDE: Ändern: gap für Abstand zwischen Steps */
.ddi-process-timeline {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
}

/* CLAUDE: Einzelner Step — flex:1 für gleichmäßige Verteilung */
/* CLAUDE: position:relative für ::after Verbindungslinie */
.ddi-process-timeline__step {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 0 1rem;
}

/* CLAUDE: Bild-Container — Kreis mit Heritage Gold Rahmen */
/* CLAUDE: Ändern: width/height für größere/kleinere Kreise */
.ddi-process-timeline__image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--wp--preset--color--heritage-gold, #C19A6B);
    margin: 0 auto var(--wp--preset--spacing--md, 1.5rem);
    position: relative;
    z-index: 2;
    background-color: var(--wp--preset--color--heritage-gold, #C19A6B);
}

/* CLAUDE: Bild innerhalb des Kreises — Cover-Modus */
.ddi-process-timeline__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* CLAUDE: Verbindungslinie — gestrichelt, Heritage Gold */
/* CLAUDE: ::after auf jedem Step außer dem letzten */
/* CLAUDE: Linie verläuft von Kreis-Mitte rechts zum nächsten Kreis-Mitte links */
.ddi-process-timeline__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50px;
    left: calc(50% + 50px + 3px);
    width: calc(100% - 100px - 6px);
    height: 0;
    border-top: 2px dashed var(--wp--preset--color--heritage-gold, #C19A6B);
    z-index: 1;
}

/* CLAUDE: Step-Titel — Dark Umber */
.ddi-process-timeline__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wp--preset--color--dark-umber, #3B2A1A);
    margin-bottom: var(--wp--preset--spacing--xs, 0.5rem);
    line-height: 1.3;
}

/* CLAUDE: Step-Beschreibung — Chestnut */
.ddi-process-timeline__desc {
    color: var(--wp--preset--color--chestnut, #6B4C3B);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ============================================
   CLAUDE: Sektion 4 — Trust-Zahlen-Bar
   ============================================ */

/* CLAUDE: Dunkler Hintergrund (Dark Umber) mit heller Schrift */
.ddi-trust-bar {
    padding: var(--wp--preset--spacing--xl) 0;
    background-color: var(--wp--preset--color--dark-umber);
    text-align: center;
}

/* CLAUDE: Einzelne Kennzahl — große Zahl + kleine Beschreibung */
.ddi-trust-number {
    color: var(--wp--preset--color--heritage-gold);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
}

/* CLAUDE: Beschreibung unter der Zahl */
.ddi-trust-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-top: var(--wp--preset--spacing--xs);
}

/* ============================================
   CLAUDE: Sektion 5 — AfA-Erklärung
   ============================================ */

/* CLAUDE: Weißer Hintergrund, Media & Text Layout */
.ddi-afa-section {
    padding: var(--wp--preset--spacing--xxl) 0;
    background-color: var(--wp--preset--color--white);
}

/* CLAUDE: Liste mit AfA-Vorteilen — Heritage Gold Häkchen */
.ddi-afa-section li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: var(--wp--preset--spacing--xs);
}

/* CLAUDE: Häkchen-Symbol vor jedem Listenpunkt */
.ddi-afa-section li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--wp--preset--color--heritage-gold);
    font-weight: 700;
}