/* * 1. Definition der Schriftgrößen als CSS-Variablen
 * Diese basieren auf dem "typography.fontSizes"-Abschnitt
 * in deiner theme.json mit responsive clamp() */
:root {
    --wp--preset--font-size--tiny: clamp(0.688rem, 0.65rem + 0.19vw, 0.75rem);
    --wp--preset--font-size--small: clamp(0.813rem, 0.77rem + 0.22vw, 0.875rem);
    --wp--preset--font-size--medium: clamp(0.938rem, 0.89rem + 0.24vw, 1rem);
    --wp--preset--font-size--large: clamp(1.063rem, 0.96rem + 0.52vw, 1.25rem);
    --wp--preset--font-size--extra-large: clamp(1.25rem, 1.08rem + 0.87vw, 1.5rem);
    --wp--preset--font-size--double-large: clamp(1.5rem, 1.24rem + 1.3vw, 1.875rem);
    --wp--preset--font-size--triple-large: clamp(1.625rem, 1.28rem + 1.74vw, 2rem);
    --wp--preset--font-size--huge: clamp(1.875rem, 1.45rem + 2.17vw, 2.25rem);
    --wp--preset--font-size--massive: clamp(2.25rem, 1.63rem + 3.13vw, 3rem);
    --wp--preset--font-size--gigantic: clamp(2.5rem, 1.72rem + 3.91vw, 3.75rem);
}

/* * 2. Anwendung der Stile auf die Überschriften-Elemente
 * Diese basieren auf dem "styles.elements"-Abschnitt
 * in deiner theme.json. */
h1 {
    font-size: var(--wp--preset--font-size--gigantic);
    line-height: 1;
    font-weight: 600;
}

h2 {
    font-size: var(--wp--preset--font-size--huge);
    font-weight: 600;
    line-height: 1.2;
}

h3 {
    font-size: var(--wp--preset--font-size--extra-large);
    font-weight: 600;
    line-height: 1.3;
}

h4 {
    font-size: var(--wp--preset--font-size--large);
    font-weight: 600;
    line-height: 1.4;
}

h5 {
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 600;
    line-height: 1.5;
}

h6 {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    line-height: 1.6;
}

/* Grid-Block mobil auf 1 Spalte */
@media (max-width: 781px) {
    .wp-block-group.is-layout-grid {
        grid-template-columns: 1fr !important;
    }
}

/* * 1. IMAGE SIZE KLASSEN RESET
 * WordPress fügt automatisch Größenklassen zu Bildern hinzu */
.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
}

.service-list {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.service-list li {
    padding: 8px 0 8px 24px;
    position: relative;
    color: var(--text-secondary);
}

.service-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231e40af"><path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Minimales Struktur-CSS für Core Blöcke */
/* -- GRUNDLAGEN FÜR BLOCK-LAYOUTS -- */
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block-buttons,
.wp-block-button__link {
    box-sizing: border-box;
}

/* -- SPALTEN (inkl. Responsive Verhalten) -- */
.wp-block-columns {
    display: flex;
    flex-wrap: wrap !important;
    align-items: normal !important;
    gap: 2em;

    /* Standard-Spaltenabstand */
}

/* Spalten auf Mobilgeräten untereinander anordnen */
@media (max-width: 781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* Spalten auf Desktops nebeneinander */
@media (min-width: 782px) {
    .wp-block-columns {
        flex-wrap: nowrap !important;
    }

    .wp-block-columns > .wp-block-column {
        flex-basis: 0;
        flex-grow: 1;
    }
}

.wp-block-column {
    flex-grow: 1;
    min-width: 0;
    word-break: break-word;
}