/* =========================================================
   ASV Website – Standardseiten & Gutenberg-Bausteine
   ========================================================= */

:root {
    --asv-builder-navy: var(--asv-navy, #0b1f3a);
    --asv-builder-red: var(--asv-red, #e30613);
    --asv-builder-blue: var(--asv-blue, #004f9f);
    --asv-builder-text: var(--asv-text, #17191d);
    --asv-builder-gray: var(--asv-gray, #6b7280);
    --asv-builder-light: var(--asv-light, #f3f5f7);
    --asv-builder-surface: var(--asv-surface, #fafafb);
}

/* ---------- Standard page template ---------- */

body.asv-standard-page-template .site-content {
    padding: 0;
}

body.asv-standard-page-template .content-area {
    width: 100%;
}

body.asv-standard-page-template .site-main {
    margin: 0;
}

.asv-standard-page-main {
    /*
     * GeneratePress setzt .site-content auf display:flex.
     * Unsere eigene Seitenvorlage verwendet aber bewusst kein
     * GeneratePress-.content-area am <main>. Ohne eine eigene Flex-Basis
     * kann #primary deshalb anhand seines Inhalts schrumpfen.
     *
     * Das war der Grund, warum Seiten mit schmaleren Gutenberg-Blöcken
     * scheinbar nach links gerückt waren, während eine Seite mit einem
     * breiten Media/Text-Block zufällig korrekt aussah.
     */
    width: 100%;
    max-width: none;
    min-width: 0;
    flex: 1 1 100%;
    overflow: hidden;
    background: #fff;
}

/* Etwas höher spezifisch als mögliche GeneratePress-Regeln. */
body.asv-standard-page-template #primary.asv-standard-page-main {
    width: 100%;
    max-width: none;
    min-width: 0;
    flex: 1 1 100%;
}

.asv-standard-hero {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 22%, rgba(227,6,19,.26), transparent 27%),
        linear-gradient(130deg, #07182f 0%, #0b1f3a 55%, #14345c 100%);
    color: #fff;
}

.asv-standard-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--asv-standard-hero-image);
    background-size: cover;
    background-position: center;
    opacity: 0;
}

.asv-standard-hero.has-image::before {
    opacity: .34;
}

.asv-standard-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5,20,40,.94) 0%, rgba(5,20,40,.76) 48%, rgba(5,20,40,.38) 100%),
        linear-gradient(135deg, transparent 0 64%, rgba(227,6,19,.16) 64% 78%, transparent 78%);
}

.asv-standard-hero__inner {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 72px 0;
}

.asv-standard-hero__eyebrow,
.asv-builder-eyebrow {
    margin: 0 0 10px !important;
    color: var(--asv-builder-red) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
}

.asv-standard-hero h1 {
    max-width: 780px;
    margin: 0;
    color: #fff;
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.04em;
}

.asv-standard-hero__intro {
    max-width: 720px;
    margin: 24px 0 0;
    color: rgba(255,255,255,.82);
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.55;
}

.asv-standard-page-content {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 68px 0 86px;
}

.asv-standard-page-main--no-hero .asv-standard-page-content {
    padding-top: 52px;
}

/* ---------- Shared editorial pieces ---------- */

.asv-builder-section {
    margin-top: 0;
    margin-bottom: clamp(48px, 6vw, 78px);
}

.asv-builder-heading {
    margin-bottom: 34px;
    text-align: center;
}

.asv-builder-heading h2 {
    margin: 0;
    color: var(--asv-builder-navy);
}

.asv-builder-line {
    width: 52px !important;
    height: 3px !important;
    margin: 14px auto 0 !important;
    border: 0 !important;
    background: var(--asv-builder-red) !important;
    opacity: 1 !important;
}

.asv-builder-intro {
    max-width: 860px;
    padding: 6px 0 12px;
    text-align: center;
}

.asv-builder-intro h2 {
    margin-top: 0;
    color: var(--asv-builder-navy);
}

.asv-builder-intro p:last-child {
    color: var(--asv-builder-gray);
}

/* ---------- Media / text ---------- */

.asv-builder-media {
    overflow: hidden;
    gap: 0 !important;
    border: 1px solid rgba(11,31,58,.08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(11,31,58,.08);
}

.asv-builder-media .wp-block-media-text__content {
    padding: clamp(28px, 5vw, 58px);
}

.asv-builder-media .wp-block-media-text__content h2 {
    margin-top: 0;
    color: var(--asv-builder-navy);
}

.asv-builder-media .wp-block-media-text__media {
    min-height: 320px;
    background:
        radial-gradient(circle at 70% 20%, rgba(227,6,19,.18), transparent 24%),
        linear-gradient(135deg, #eef2f6, #dfe6ee);
}

.asv-builder-media .wp-block-media-text__media img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
}

/* ---------- Pure text box ---------- */

.asv-builder-textbox {
    position: relative;
    overflow: hidden;
    padding: clamp(34px, 5vw, 58px);
    border: 1px solid rgba(11,31,58,.08);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(227,6,19,.10), transparent 29%),
        linear-gradient(135deg, #ffffff 0%, #ffffff 58%, #f1f5f9 100%);
    box-shadow: 0 16px 42px rgba(11,31,58,.08);
}

.asv-builder-textbox::after {
    content: "";
    position: absolute;
    top: -48px;
    right: -76px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(227,6,19,.035);
    pointer-events: none;
}

.asv-builder-textbox > * {
    position: relative;
    z-index: 1;
    max-width: 880px;
}

.asv-builder-textbox h2 {
    margin-top: 0;
    color: var(--asv-builder-navy);
}

.asv-builder-textbox p:last-child {
    margin-bottom: 0;
}

/* ---------- Info box ---------- */

.asv-builder-info {
    position: relative;
    margin: clamp(42px, 5vw, 68px) 0;
    padding: clamp(28px, 4vw, 42px);
    overflow: hidden;
    border-left: 5px solid var(--asv-builder-red);
    border-radius: 12px;
    background:
        radial-gradient(circle at 96% 0%, rgba(227,6,19,.08), transparent 25%),
        var(--asv-builder-light);
}

.asv-builder-info h3 {
    margin-top: 0;
    color: var(--asv-builder-navy);
}

/* ---------- Three cards ---------- */

.asv-builder-cards {
    gap: 18px !important;
}

.asv-builder-card {
    height: 100%;
    min-height: 220px;
    padding: 28px;
    border: 1px solid rgba(11,31,58,.08);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0%, rgba(227,6,19,.07), transparent 30%),
        #fff;
    box-shadow: 0 12px 32px rgba(11,31,58,.07);
}

.asv-builder-card h3 {
    color: var(--asv-builder-navy);
}

.asv-builder-card .wp-block-buttons {
    margin-top: auto;
}

.asv-builder-card .wp-block-button__link {
    border-color: rgba(11,31,58,.18) !important;
    color: var(--asv-builder-navy) !important;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

/* ---------- CTA ---------- */

.asv-builder-cta {
    position: relative;
    margin-top: clamp(48px, 6vw, 82px);
    padding: clamp(38px, 6vw, 64px);
    overflow: hidden;
    border-radius: 18px;
    background:
        radial-gradient(circle at 90% 20%, rgba(227,6,19,.32), transparent 28%),
        linear-gradient(135deg, #07182f, #0b1f3a 65%, #163861);
    color: #fff;
}

.asv-builder-cta::after {
    content: "";
    position: absolute;
    inset: 0 -10% auto auto;
    width: 45%;
    height: 100%;
    background: linear-gradient(135deg, transparent 32%, rgba(255,255,255,.05) 32% 50%, transparent 50%);
    pointer-events: none;
}

.asv-builder-cta > * {
    position: relative;
    z-index: 1;
}

.asv-builder-cta h2,
.asv-builder-cta p {
    color: #fff;
}

.asv-builder-cta .wp-block-button__link {
    background: var(--asv-builder-red);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

/* ---------- Editor ---------- */

.editor-styles-wrapper .asv-builder-section,
.editor-styles-wrapper .asv-builder-info,
.editor-styles-wrapper .asv-builder-cta {
    max-width: 1180px;
}

.editor-styles-wrapper .asv-builder-media {
    min-height: 280px;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
    .asv-standard-hero {
        min-height: 300px;
    }

    .asv-standard-hero__inner,
    .asv-standard-page-content {
        width: min(100% - 30px, 1180px);
    }

    .asv-standard-hero__inner {
        padding: 54px 0;
    }

    .asv-standard-page-content {
        padding: 48px 0 64px;
    }

    .asv-builder-media .wp-block-media-text__media {
        min-height: 240px;
    }

    .asv-builder-media .wp-block-media-text__media img {
        min-height: 240px;
    }

    .asv-builder-cards {
        gap: 12px !important;
    }

    .asv-builder-textbox {
        padding: 28px 24px;
        border-radius: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .asv-builder-card,
    .asv-builder-media {
        scroll-behavior: auto;
    }
}


/* =========================================================
   v1.44 – konsistente Zentrierung der ASV-Seitenbausteine
   ========================================================= */

.asv-standard-page-content .asv-builder-section,
.asv-standard-page-content .asv-builder-heading,
.asv-standard-page-content .asv-builder-info,
.asv-standard-page-content .asv-builder-cta,
.asv-standard-page-content .asv-builder-textbox,
.asv-standard-page-content .asv-builder-media,
.asv-standard-page-content .asv-builder-cards {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Intro bleibt bewusst schmaler, sitzt aber wirklich mittig. */
.asv-standard-page-content .asv-builder-intro {
    width: 100%;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

/* Gleiche Zentrierung auch im Gutenberg-Editor. */
.editor-styles-wrapper .asv-builder-section,
.editor-styles-wrapper .asv-builder-heading,
.editor-styles-wrapper .asv-builder-info,
.editor-styles-wrapper .asv-builder-cta,
.editor-styles-wrapper .asv-builder-textbox,
.editor-styles-wrapper .asv-builder-media,
.editor-styles-wrapper .asv-builder-cards {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.editor-styles-wrapper .asv-builder-intro {
    width: 100%;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   v1.45 – ASV-Bausteine unabhängig von der Seitenvorlage
   ========================================================= */

/*
 * v1.44 war absichtlich auf `.asv-standard-page-content` begrenzt.
 * Werden die ASV-Patterns jedoch auf einer normalen GeneratePress-Seite
 * verwendet, greift diese Hülle nicht. Zusätzlich kann Gutenberg bei
 * "constrained"-Gruppen eine eigene content-size als max-width setzen.
 *
 * Deshalb bekommen die ASV-Bausteine ihre Breite und Zentrierung jetzt
 * direkt an der jeweiligen Block-Klasse.
 */
.asv-builder-heading,
.asv-builder-info,
.asv-builder-cta,
.asv-builder-textbox,
.asv-builder-media,
.asv-builder-cards,
.asv-builder-section:not(.asv-builder-intro) {
    width: min(1180px, 100%) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* Intro bewusst schmaler, aber ebenfalls immer exakt zentriert. */
.asv-builder-intro {
    width: min(860px, 100%) !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*
 * WordPress/Gutenberg kann für direkte Kinder einer constrained-Gruppe
 * nochmals die globale content-size setzen. Diese Regeln überschreiben das
 * gezielt nur für unsere ASV-Bausteine.
 */
.is-layout-constrained > .asv-builder-heading,
.is-layout-constrained > .asv-builder-info,
.is-layout-constrained > .asv-builder-cta,
.is-layout-constrained > .asv-builder-textbox,
.is-layout-constrained > .asv-builder-media,
.is-layout-constrained > .asv-builder-section:not(.asv-builder-intro),
.wp-block-group-is-layout-constrained > .asv-builder-heading,
.wp-block-group-is-layout-constrained > .asv-builder-info,
.wp-block-group-is-layout-constrained > .asv-builder-cta,
.wp-block-group-is-layout-constrained > .asv-builder-textbox,
.wp-block-group-is-layout-constrained > .asv-builder-media,
.wp-block-group-is-layout-constrained > .asv-builder-section:not(.asv-builder-intro) {
    width: min(1180px, 100%) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.is-layout-constrained > .asv-builder-intro,
.wp-block-group-is-layout-constrained > .asv-builder-intro {
    width: min(860px, 100%) !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Im Editor dieselben realen Breiten anzeigen. */
.editor-styles-wrapper .asv-builder-heading,
.editor-styles-wrapper .asv-builder-info,
.editor-styles-wrapper .asv-builder-cta,
.editor-styles-wrapper .asv-builder-textbox,
.editor-styles-wrapper .asv-builder-media,
.editor-styles-wrapper .asv-builder-cards,
.editor-styles-wrapper .asv-builder-section:not(.asv-builder-intro) {
    width: min(1180px, 100%) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.editor-styles-wrapper .asv-builder-intro {
    width: min(860px, 100%) !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   v1.46 – echte Block-Ausrichtung statt nur Breiten-CSS
   ========================================================= */

/*
 * Der gepostete Gutenberg-Code hat gezeigt:
 *
 *   wp:group ... "layout":{"type":"constrained"}
 *
 * Es existiert KEIN zusätzlicher Parent-Wrapper. Das Problem sitzt daher
 * direkt am Group-Block: constrained begrenzt zwar seine Kinder, macht den
 * äußeren Block aber nicht automatisch zu einem Wide-Block.
 *
 * v1.46 setzt deshalb align="wide" direkt am Block. Diese CSS-Regeln sind
 * nur noch die deterministische Größenbegrenzung dazu.
 */
body .entry-content > .alignwide.asv-builder-heading,
body .entry-content > .alignwide.asv-builder-info,
body .entry-content > .alignwide.asv-builder-cta,
body .entry-content > .alignwide.asv-builder-textbox,
body .entry-content > .alignwide.asv-builder-media,
body .entry-content > .alignwide.asv-builder-section:not(.asv-builder-intro),
body .entry-content .alignwide.asv-builder-heading,
body .entry-content .alignwide.asv-builder-info,
body .entry-content .alignwide.asv-builder-cta,
body .entry-content .alignwide.asv-builder-textbox,
body .entry-content .alignwide.asv-builder-media,
body .entry-content .alignwide.asv-builder-section:not(.asv-builder-intro) {
    width: min(1180px, 100%) !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
}

body .entry-content > .alignwide.asv-builder-intro,
body .entry-content .alignwide.asv-builder-intro {
    width: min(860px, 100%) !important;
    max-width: 860px !important;
    margin-inline: auto !important;
}

/* GeneratePress kann Wide-Blöcke mit eigenen Inline-Margins versehen.
   Für unsere Bausteine sollen keine negativen Wide-Margins verwendet werden. */
body .entry-content .alignwide[class*="asv-builder-"] {
    left: auto !important;
    right: auto !important;
    transform: none !important;
}


/* =========================================================
   v1.47 – Flex-Root der ASV Standardseite
   ========================================================= */

/*
 * #content.site-content ist bei GeneratePress ein Flex-Container.
 * Der ASV-main-Bereich muss daher selbst die volle Flex-Breite beanspruchen.
 * Erst INNERHALB dieses vollen Bereichs werden 1180px-/860px-Bausteine
 * zentriert. Damit ist die Position nicht mehr vom breitesten Block der
 * jeweiligen Seite abhängig.
 */
body.asv-standard-page-template #content.site-content > #primary.asv-standard-page-main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.asv-standard-page-template #primary.asv-standard-page-main > .asv-standard-page-content {
    width: min(1180px, calc(100% - 48px));
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    body.asv-standard-page-template #primary.asv-standard-page-main > .asv-standard-page-content {
        width: min(1180px, calc(100% - 30px));
    }
}