/* ==========================================================================
   SEOTOLOGIE ENGINEERING – TYPOGRAFIE-MATRIX
   Geist Sans:      Headlines H1–H3   — Technisch, scharf, architektonisch
   Inter:           Body / UI / Nav / Trust / Buttons / FAQ / Footer
   JetBrains Mono:  Technical Data    — Tool-Ergebnisse, SSL, Metriken
   Alle Fonts: Variable Font, lokal gehostet (DSGVO-konform)
   ========================================================================== */

/* GEIST SANS – Variable Font (Latin, lokal) */
@font-face {
    font-family: 'Geist Sans';
    src: url('fonts/geist-sans-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: optional;  /* optional: kein Swap-Shift → CLS ↓ */
}

/* INTER – Variable Font (latin-ext) */
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-variable-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: optional;  /* optional: kein Swap-Shift → CLS ↓ */
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* INTER – Variable Font (latin) */
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: optional;  /* optional: kein Swap-Shift → CLS ↓ */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JETBRAINS MONO – Variable Font (latin-ext) */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/jetbrains-mono-variable-ext.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JETBRAINS MONO – Variable Font (latin) */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/jetbrains-mono-variable.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   TYPOGRAFIE – Seotologie Engineering Matrix
   ========================================================================== */

/* ==========================================================================
   TYPOGRAFIE-SYSTEM v2.0 – SAAS PRECISION
   H1: 48px / -0.03em | H2: 32px / -0.015em | H3: 24px / 0
   Body: 17px / 1.7 | Line-Height: 1.6–1.75
   ========================================================================== */

/* H1: Maximal scharf – Seitentitel, Hero, Page-Title */
body h1,
body .ast-page-title {
    font-family:    'Geist Sans', 'Inter', 'DM Sans', sans-serif;
    font-weight:    700;
    font-size:      clamp(1.375rem, 2.8vw, 1.875rem);  /* 22–30px – etwas kleiner */
    line-height:    1.25;
    letter-spacing: -0.03em;  /* Tech-Sharp: deutlich kompakter */
    margin-bottom:  0.75em;
    color:          #083A2E !important;  /* Brand-Farbe für alle H1 */
}

/* Hero-Titel: eigene Typografie für langen CTA-Satz */
body h1.seotologie-hero-title,
html body .seotologie-hero-title {
    font-size:      clamp(1.25rem, 2.5vw, 1.625rem) !important;  /* 20–26px – etwas kleiner als H1-Basis */
    line-height:    1.2 !important;
    letter-spacing: -0.04em !important;  /* Extra-scharf für Hero-CTA */
}

/* Artikel-Titel (Blog-Cards, Archive): deutlich kleiner als Page-H1 */
body .entry-title,
body .ast-blog-post-title,
body .ast-article-post .entry-title,
body .ast-archive .entry-title {
    font-family:    'Geist Sans', 'Inter', 'DM Sans', sans-serif;
    font-weight:    700;
    font-size:      1.25rem !important;  /* 20px – kompakt für Cards */
    line-height:    1.3 !important;
    letter-spacing: -0.01em !important;
    margin-bottom:  0.4em !important;
    color:          #083A2E !important;
}
/* Single-Post-Titel & Seiten-H1: Angemessenes Premium-Scaling */
body.single .entry-title,
body.page .entry-title {
    font-size:      clamp(1.5rem, 3.5vw, 2.1rem) !important;  /* 24–33px (vorher 40px) */
    line-height:    1.25 !important;
    letter-spacing: -0.025em !important;
}

/* H2: Maximal kontrastreich – Enterprise-Schock-Hierarchie */
body h2,
body .wp-block-heading:where(h2),
body .ast-blog-title {
    font-family:    'Geist Sans', 'Inter', 'DM Sans', sans-serif;
    font-weight:    800;
    font-size:      clamp(1.75rem, 3vw, 2rem);  /* 28–32px responsive */
    line-height:    1.15;
    letter-spacing: -0.04em;  /* SaaS-Premium: sehr kompakt */
    margin-bottom:  0.6em;
    color:          #083A2E !important;
}

/* H3: Leicht kompakt – gut lesbar, trotzdem Tech-Sharp */
body h3,
body .wp-block-heading:where(h3) {
    font-family:    'Geist Sans', 'Inter', 'DM Sans', sans-serif;
    font-weight:    600;
    font-size:      1.5rem;  /* 24px */
    line-height:    1.3;
    letter-spacing: -0.02em;  /* Subtil negativ: moderner als 0 */
    margin-bottom:  0.5em;
}

/* Body: 17px / 1.7 – leicht größer als Standard, deutlich lesbarer */
body,
body p,
body li,
body td,
body .entry-content,
body .ast-article-single {
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-weight: 400;
    font-size:   16px;
    line-height: 1.7;
    color:       #334155;
}

/* --- Navigation / Header: Inter 500, line-height 1.0 --- */
body .main-header-menu a,
body .ast-primary-menu > li > a,
body .menu-item a {
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-weight: 500;
    line-height: 1.0;
}

/* --- Trust Signals: Inter 500, line-height 1.4 --- */
body .seotologie-trust-signals,
body .seotologie-trust-signals span,
body .seotologie-trust-signals a {
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-weight: 500;
    line-height: 1.4;
}

/* Footer: Inter 400, line-height 1.6 – Footer-BG #083A2E (= Header-BG) */
footer#colophon,
footer#colophon p,
footer#colophon li,
footer#colophon .widget,
footer#colophon .site-footer-section {
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-weight: 400;
    line-height: 1.6;
}

/* Footer Background: etwas stärker als Header (#0C4A3A vs. Header #083A2E) */
html body .site-footer,
html body .site-above-footer-wrap[data-section="section-above-footer-builder"] {
    background-color: #0C4A3A !important;
    background-image: none !important;
}

/* --- FAQ Trigger: Inter 500, line-height 1.5 --- */
body .ast-faq-trigger,
body .ast-faq-item .ast-faq-trigger,
body .wp-block-astra-faq-item .ast-faq-trigger {
    font-family: 'Inter', 'DM Sans', sans-serif;
    font-weight: 500;
    line-height: 1.5;
}

/* --- Technical Data: JetBrains Mono 400, line-height 1.4 --- */
code, pre, kbd, samp,
body .seotologie-metric,
body .seotologie-result-value,
body .seotologie-data-value,
body .seotologie-tool-output,
body [class*="seotologie-score"],
body [class*="seotologie-ladezeit"],
body [class*="seotologie-ssl"],
body [class*="seotologie-error-log"] {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    line-height: 1.4;
    font-size: 1rem;
}

/* ==========================================================================
   SEOTOLOGIE PREMIUM BUTTONS & FORM LAYOUT
   ========================================================================== */

/* 1. Global Premium Styling (Tools, SSL-Check, Hero-CTA, FAQ-CTA, Borlabs) */
body .seotologie-btn-premium,
body .wp-block-button__link,
body .ast-button:not([class*="brlbs"]),
html body form#respond #submit {
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    box-sizing:       border-box !important;
    height:           44px !important;  /* Touch-Target: 44px Minimum */
    padding:          0 24px !important;
    background-color: #0DB9AF !important;
    background-image: linear-gradient(
        180deg,
        #19CCC1 0%,
        #0DB9AF 55%,
        #0AA59B 100%
    ) !important;
    color:            #2F4F4F !important;  /* Dark Slate: guter Kontrast auf Teal & Grün */
    border:           1px solid #0A9E95 !important;  /* Ton-in-Ton: 2–3 Nuancen dunkler als #0DB9AF */
    border-radius:    6px !important;
    font-family:      'Inter', 'DM Sans', sans-serif !important;
    font-weight:      600 !important;
    font-size:        16px !important;
    line-height:      1.0 !important;
    text-transform:   uppercase !important;
    letter-spacing:   0.05em !important;
    cursor:           pointer !important;
    position:         relative !important;
    overflow:         hidden !important;
    text-decoration:  none !important;
    /* Shadow-subtle aus Token */
    box-shadow:       var(--shadow-subtle), 0 4px 12px rgba(13,185,175,0.22) !important;
    /* Nur kompositionierbare Properties animieren → kein CLS / kein Jank */
    transition:       transform 0.15s cubic-bezier(0.4,0,0.2,1),
                      opacity   0.2s  cubic-bezier(0.4,0,0.2,1) !important;
    z-index: 1 !important;
    margin: 0 !important;
}


/* 2. Premium Hover Effect – Gradient 180° gespiegelt (Licht wechselt Seite = Tiefe) */
body .seotologie-btn-premium:hover,
body .wp-block-button__link:hover,
body .ast-button:hover,
html body form#respond #submit:hover {
    background-color: #0AA59B !important;
    background-image: linear-gradient(
        180deg,
        #0AA59B 0%,
        #0DB9AF 55%,
        #19CCC1 100%
    ) !important;
    color:            #2F4F4F !important;
    box-shadow:       var(--shadow-medium), 0 8px 24px rgba(8,143,141,0.40) !important;
    transform:        translateY(-2px) !important;
}

/* 2b. Kommentar-Button Override (höhere Spezifität gegen Astra-Overrides) */
html body #respond .form-submit #submit,
html body .comment-form .form-submit #submit,
html body .comment-respond .form-submit input[type="submit"],
html body .comments-area #commentform .form-submit #submit {
    background-color: #0DB9AF !important;
    background-image: linear-gradient(180deg, #19CCC1 0%, #0DB9AF 55%, #0AA59B 100%) !important;
    color:            #2F4F4F !important;
    height:           44px !important;
    padding:          0 24px !important;
    border-radius:    6px !important;
    font-weight:      600 !important;
    font-size:        16px !important;
    text-transform:   uppercase !important;
    letter-spacing:   0.05em !important;
    border:           1px solid #0A9E95 !important;  /* Ton-in-Ton */
    cursor:           pointer !important;
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    position:         relative !important;
    overflow:         hidden !important;
    transition:       transform 0.15s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow:       0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(13,185,175,0.22) !important;
    width:            auto !important;
}
html body #respond .form-submit #submit:hover,
html body .comment-form .form-submit #submit:hover,
html body .comment-respond .form-submit input[type="submit"]:hover,
html body .comments-area #commentform .form-submit #submit:hover {
    background-color: #0AA59B !important;
    background-image: linear-gradient(180deg, #0AA59B 0%, #0DB9AF 55%, #19CCC1 100%) !important;
    color:            #2F4F4F !important;
    transform:        translateY(-2px) !important;
    box-shadow:       0 2px 6px rgba(0,0,0,0.10), 0 8px 24px rgba(8,143,141,0.40) !important;
}

/* 3. Lichtstrahl-Effekt – Transform-Methode (funktioniert auf button UND a-Elementen) */
body .seotologie-btn-premium::before,
body .wp-block-button__link::before,
body .ast-button::before,
html body form#respond #submit::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: -50% !important;
    left: 0 !important;
    width: 60% !important;
    height: 200% !important;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%) !important;
    transform: translateX(-200%) skewX(-20deg) !important;
    z-index: 2 !important;
    pointer-events: none !important;
    transition: transform 0.55s cubic-bezier(0.4,0,0.2,1) !important;
}

/* Lichtstrahl auf Hover: Animation aus performance.php steuert transform – hier kein transform mehr */
body .seotologie-btn-premium:hover::before,
body .wp-block-button__link:hover::before,
body .ast-button:hover::before,
html body form#respond #submit:hover::before {
    transform: translateX(280%) skewX(-20deg) !important;
}

/* OUTLINE / GHOST BUTTON FIX */
body .is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    color: #3dbdbd !important;
    border: 2px solid #3dbdbd !important;
    line-height: calc(40px - 4px) !important;
}
body .is-style-outline .wp-block-button__link:hover {
    background-color: #3dbdbd !important;
    color: #083A2E !important;
    border-color: #3dbdbd !important;
}

/* ── SECONDARY – Premium Glass-White ("Direkt Starten" / Ghost-Variante) ── */
body .seotologie-hero-cta-secondary {
    background-color: rgba(255,255,255,0.92) !important;
    background-image: linear-gradient(180deg, #ffffff 0%, #F0F4F3 100%) !important;
    color:            #083A2E !important;
    border:           1.5px solid rgba(8,58,46,0.22) !important;
    padding:          0 24px !important;
    height:           44px !important;
    font-weight:      600 !important;
    letter-spacing:   0.04em !important;
    box-shadow:       0 1px 2px rgba(0,0,0,0.06), 0 2px 8px rgba(8,58,46,0.08), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
body .seotologie-hero-cta-secondary:hover {
    background-color: #f8fafa !important;
    background-image: linear-gradient(180deg, #F0F4F3 0%, #ffffff 100%) !important;
    color:            #083A2E !important;
    border-color:     rgba(8,58,46,0.40) !important;
    box-shadow:       0 2px 6px rgba(0,0,0,0.10), 0 6px 20px rgba(8,58,46,0.12), inset 0 1px 0 rgba(255,255,255,0.9) !important;
    transform:        translateY(-2px) !important;
}
body .seotologie-hero-cta-secondary::before {
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%) !important;
}

/* --- ACCESSIBILITY & CONTRAST FIXES --- */
/* Hero Badge: Glass-Morphism auf hellem Hintergrund */
body .seotologie-hero-badge {
    background:    rgba(8, 58, 46, 0.07) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border:        1px solid rgba(8, 58, 46, 0.15) !important;
    color:         #08392D !important;
    font-weight:   700 !important;
    border-radius: var(--radius-sm) !important;
    box-shadow:    0 1px 3px rgba(0,0,0,0.06) !important;
}

body .seotologie-hero-actions span {
    color: #083A2E !important;
    font-weight: 600 !important;
}

/* Direkt einsteigen Section */
body .seotologie-direkt-einsteigen {
    background-color: #D3DBD8 !important;
}
body .seotologie-direkt-einsteigen h2,
body .seotologie-direkt-einsteigen p,
body .seotologie-direkt-einsteigen span,
body .seotologie-direkt-einsteigen strong {
    color: #083A2E !important;
}
body .seotologie-direkt-einsteigen a {
    color: #083A2E !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
body .seotologie-direkt-einsteigen a:hover {
    text-decoration: underline !important;
    color: #083A2E !important;
}

/* Blog Grid Text + "Kostenlose Profi-Tools"-Section + alle Section-H2 auf weißem BG */
body .ast-post-format- .entry-title a { color: #083A2E !important; }
body .entry-title a,
body .entry-title a:visited {
    color: #083A2E !important;
    text-decoration: none !important;
    transition: none !important; /* Blockiert Astra transition:all – verhindert letter-spacing/line-height als nicht-kompositionierbare Animation */
}
/* "Kostenlose Profi-Tools" und ähnliche Section-Headlines */
body .seotologie-tools-section h2,
body .seotologie-tools-section h3,
body .seotologie-direkt-einsteigen-title,
body .entry-content h2:not([class]),
body .entry-content > h2 {
    color: #083A2E !important;
}
body .ast-post-format- .entry-content p,
body .ast-post-format- p,
body .ast-article-inner p,
body section.ast-faq-section p {
    color: #1E293B !important;
    font-weight: 500 !important;
}
body p.ast-faq-subtitle { color: #1E293B !important; font-weight: 600 !important; }
body .ast-faq-header p { color: #1E293B !important; }







/* ==========================================================================
   8-POINT GRID SPACING SYSTEM – SEOTOLOGIE ENTERPRISE
   Basis: 8px | Skala: 8 · 16 · 24 · 32 · 48 · 64
   Scope: Sektionen, Hero-Stack, Tool-Cards, FAQ, Footer-Spalten
   Logik: CSS Custom Properties → alle Abstände zentral steuerbar.
   ========================================================================== */

/* ── Tokens (Root-Variablen) ──────────────────────────────────────────── */
:root {
    --sp-1:  8px;   /* micro  – Icon-Gap, inline-Elemente      */
    --sp-2:  16px;  /* small  – Label → Input, Button-Padding  */
    --sp-3:  24px;  /* base   – Subline → CTA, Card-intern     */
    --sp-4:  32px;  /* medium – H1 → Subline, Card-Gap         */
    --sp-6:  48px;  /* large  – Sektion-intern (H2 → Content)  */
    --sp-8:  64px;  /* xl     – Sektion-zu-Sektion vertikal    */

    /* ── Radius-Token: einheitlich klein = Enterprise-Precision ────────── */
    --radius-sm:  4px;   /* Tags, Badges, Inputs              */
    --radius-md:  6px;   /* Buttons, Tool-Cards               */
    --radius-lg:  10px;  /* CTA-Box, Modal, Hero-Image        */

    /* ── Shadow-System: 3 Stufen ───────────────────────────── */
    --shadow-subtle: 0 1px 2px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.08);
    --shadow-medium: 0 2px 6px rgba(0,0,0,0.10), 0 8px 20px rgba(0,0,0,0.10);
    --shadow-strong: 0 4px 12px rgba(0,0,0,0.12), 0 20px 40px rgba(0,0,0,0.14);

    /* ── Shadow-Teal für CTA-Box (Akzent-Glow) ────────────────── */
    --shadow-teal:   0 4px 12px rgba(61,189,189,0.12), 0 16px 36px rgba(61,189,189,0.08);
}

/* ── 1. Sektionen: vertikaler Rhythmus ────────────────────────────────── */
/* Alle Gutenberg-Blöcke auf oberster Ebene: xl-Abstand */
html body .wp-block-group,
html body .wp-block-cover,
html body .wp-block-columns,
html body section.wp-block-group {
    margin-top:    var(--sp-8) !important;
    margin-bottom: var(--sp-8) !important;
}
/* Erste Sektion direkt nach Hero / Header: kein zusätzlicher Top-Gap */
html body .entry-content > .wp-block-group:first-child,
html body .entry-content > .wp-block-cover:first-child {
    margin-top: 0 !important;
}
/* Letzte Sektion vor Footer: kein doppelter Puffer */
html body .entry-content > .wp-block-group:last-child {
    margin-bottom: var(--sp-4) !important;
}

/* ── 2. Hero-Stack: H1 → Subline → CTA ───────────────────────────────── */
/* H1 → Subline: 32px */
html body .seotologie-hero-content h1,
html body .seotologie-hero-content .entry-title {
    margin-bottom: var(--sp-4) !important;
}
/* Subline / Lead-Text → CTA-Gruppe: 24px */
html body .seotologie-hero-content p,
html body .seotologie-hero-content .seotologie-hero-subline,
html body .seotologie-hero-content .wp-block-paragraph {
    margin-bottom: var(--sp-3) !important;
}
/* CTA-Button-Gruppe → Input-Feld (z. B. URL-Input): 16px */
html body .seotologie-hero-actions {
    gap:           var(--sp-2) !important;
    margin-bottom: var(--sp-2) !important;
}
html body .seotologie-hero-input-wrap {
    margin-top: var(--sp-2) !important;
}

/* ── 3. Tool-Box-Bereich: Cards / Grid ────────────────────────────────── */
/* Grid-Container: 32px Gap zwischen Cards */
html body .seotologie-tools-grid,
html body .seotologie-direkt-einsteigen .wp-block-columns,
html body .seotologie-tools-section .wp-block-columns {
    gap: var(--sp-4) !important;
}
/* Einzelne Tool-Card: innen 24px Padding rundum */
html body .seotologie-tool-card,
html body .seotologie-direkt-einsteigen .wp-block-column,
html body .ast-blog-layout-4-grid .ast-article-inner {
    padding:    var(--sp-3) !important;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease !important;
    cursor:     default;
}
/* Card Hover: Lift + Schatten-Verstärkung */
html body .seotologie-tool-card:hover,
html body .seotologie-direkt-einsteigen .wp-block-column:hover,
html body .ast-blog-layout-4-grid .ast-article-inner:hover {
    transform:  translateY(-4px) !important;
    box-shadow: var(--shadow-medium), 0 12px 28px rgba(8,58,46,0.10) !important;
    will-change: transform;
}

/* ── Related Posts: echte HTML-Struktur (Astra Pro) ──────────────────── */
/* Wrapper: Flex-Row, 3 gleichbreite Spalten, passendes Gap               */
html body .ast-single-related-posts-container .ast-related-posts-wrapper {
    display:   flex !important;
    flex-wrap: wrap !important;
    gap:       var(--sp-4) !important;  /* 32px zwischen den Karten */
    align-items: stretch !important;
}
/* Jede Karte: 1/3 der Breite (Gap via calc abgezogen) */
@media (min-width: 640px) {
    html body .ast-single-related-posts-container article.ast-related-post {
        flex:      0 0 calc(33.333% - 22px) !important;
        width:     calc(33.333% - 22px) !important;
        max-width: calc(33.333% - 22px) !important;
    }
}
@media (max-width: 639px) {
    html body .ast-single-related-posts-container article.ast-related-post {
        flex:      0 0 100% !important;
        width:     100% !important;
    }
}
/* Karte: Border, Radius, Hintergrund – gleich wie Blog-Karten */
html body .ast-single-related-posts-container article.ast-related-post {
    border:        1px solid #e2e8f0 !important;
    border-radius: var(--radius-md) !important;   /* 6px */
    background:    #ffffff !important;
    overflow:      hidden !important;
    box-shadow:    var(--shadow-subtle) !important;
    transition:    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                   box-shadow 0.22s ease !important;
}
/* Hover: Lift + Schatten wie Homepage-Artikelkarten */
html body .ast-single-related-posts-container article.ast-related-post:hover {
    transform:  translateY(-4px) !important;
    box-shadow: var(--shadow-medium), 0 12px 28px rgba(8,58,46,0.10) !important;
}
/* Bild-Container: overflow hidden damit Zoom nicht überläuft */
html body .ast-single-related-posts-container .post-thumb-img-content {
    overflow:      hidden !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    display:       block !important;
}
/* Bild: base-Transition für Zoom-Effekt */
html body .ast-single-related-posts-container .post-thumb-img-content img {
    width:      100% !important;
    height:     auto !important;
    display:    block !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Bild-Zoom beim Karten-Hover */
html body .ast-single-related-posts-container article.ast-related-post:hover .post-thumb-img-content img {
    transform: scale(1.04) !important;
}
/* Karten-Innenbereich: Padding für Titel + Text */
html body .ast-single-related-posts-container .ast-related-posts-inner-section {
    padding: 0 !important;  /* Padding wird über entry-header gesteuert */
}
/* Titel unter dem Bild */
html body .ast-single-related-posts-container .entry-header,
html body .ast-single-related-posts-container .ast-related-post-title-section {
    padding: var(--sp-2) var(--sp-3) var(--sp-3) !important;
}
html body .ast-single-related-posts-container .entry-title,
html body .ast-single-related-posts-container .ast-related-post-title {
    font-family:   'Inter', 'DM Sans', sans-serif !important;
    font-size:     1rem !important;
    font-weight:   600 !important;
    line-height:   1.4 !important;
    margin:        0 !important;
    color:         #1a2236 !important;
}
html body .ast-single-related-posts-container .entry-title a,
html body .ast-single-related-posts-container .ast-related-post-title a {
    color:           #1a2236 !important;
    text-decoration: none !important;
}
html body .ast-single-related-posts-container .entry-title a:hover,
html body .ast-single-related-posts-container .ast-related-post-title a:hover {
    color: #0DB9AF !important;
}
/* Kategorie-Label über dem Titel */
html body .ast-single-related-posts-container .seotologie-related-category {
    display:        block !important;
    font-family:    'Inter', 'DM Sans', sans-serif !important;
    font-size:      0.95rem !important;
    font-weight:    700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color:          #0DB9AF !important;
    margin-bottom:  6px !important;
}
/* Astras Meta-Zeile (Datum, Kategorie unter Titel) ausblenden */
html body .ast-single-related-posts-container .entry-meta,
html body .ast-single-related-posts-container .ast-related-post-meta,
html body .ast-single-related-posts-container .ast-post-meta {
    display: none !important;
}
/* Icon: sanfte Vergrößerung beim Card-Hover */
html body .seotologie-tool-card:hover .seotologie-tool-icon {
    transform:  scale(1.12) !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
html body .seotologie-tool-card .seotologie-tool-icon {
    display:    inline-block !important;
    transition: transform 0.25s ease !important;
}
/* Abstand zwischen Tool-Cards und darüber liegender Section-Headline */
html body .seotologie-tools-section h2,
html body .seotologie-tools-grid-headline {
    margin-bottom: var(--sp-3) !important;
}
/* Card-interne Hierarchie: Icon → Titel → Text */
html body .seotologie-tool-card .seotologie-tool-icon {
    display:       inline-block !important;
    margin-bottom: var(--sp-1) !important;
    transition:    transform 0.25s ease !important;
}
html body .seotologie-tool-card h3,
html body .seotologie-tool-card .seotologie-tool-title {
    margin-bottom: var(--sp-1) !important;
}
html body .seotologie-tool-card p {
    margin-bottom: var(--sp-2) !important;
}

/* ── 4. FAQ-Bereich ───────────────────────────────────────────────────── */
/* Sektion: 48px Abstand nach oben */
html body .ast-faq-section,
html body .wp-block-astra-faq {
    margin-top:    var(--sp-6) !important;
    margin-bottom: var(--sp-6) !important;
}
/* FAQ-Header (H2 + Subline) → ersten FAQ-Item: 32px */
html body .ast-faq-header,
html body .ast-faq-section > .wp-block-heading {
    margin-bottom: var(--sp-4) !important;
}
/* FAQ-Items: 8px Gap zwischen Items (mit Trennlinie → Gap wirkt als Weißraum) */
html body .ast-faq-item,
html body .wp-block-astra-faq-item {
    margin-bottom: var(--sp-1) !important;
}
/* FAQ-Trigger (Klick-Fläche): min-height auf 2×sp-3 = 48px (Fingerfreundlich) */
html body .ast-faq-trigger {
    min-height:  var(--sp-6) !important;
    padding:     var(--sp-2) var(--sp-3) !important;
    line-height: 1.4 !important;
}
/* FAQ-Antwort-Body: links Padding 24px (Einrückung), unten 16px */
html body .ast-faq-content,
html body .ast-faq-item .ast-faq-body {
    padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-3) !important;
}

/* ── 5. Footer-Spalten ────────────────────────────────────────────────── */
/* footer-grid Gap: 32px horizontal, 48px wenn gestapelt */
html body .site-above-footer-wrap .ast-builder-grid-row,
html body .site-footer-section-inner {
    gap: var(--sp-4) !important;
}
/* Footer-Widget intern: Titel → Links: 16px */
html body .footer-widget-area .widget-title {
    margin-bottom: var(--sp-2) !important;
}
/* Footer-Links: 8px Zeilenabstand (touch-target minimal 44px via line-height) */
html body .footer-widget-area li {
    margin-bottom: var(--sp-1) !important;
}
/* Footer-Sektion gesamt: 48px oben / unten */
html body .site-above-footer-wrap[data-section="section-above-footer-builder"] {
    padding-top:    var(--sp-6) !important;
    padding-bottom: var(--sp-6) !important;
}

/* ── 6. Content-Headings Rhythmus (H2/H3 in Articles) ────────────────── */
html body .entry-content h2,
html body .entry-content .wp-block-heading[class*="is-style-h2"] {
    margin-top:    var(--sp-6) !important;
    margin-bottom: var(--sp-3) !important;
}
html body .entry-content h3,
html body .entry-content .wp-block-heading[class*="is-style-h3"] {
    margin-top:    var(--sp-4) !important;
    margin-bottom: var(--sp-2) !important;
}
/* Absatz-Abstand normiert: 16px statt em-Drift */
html body .entry-content p {
    margin-bottom: var(--sp-2) !important;
}

/* ── 7. Mobile Breakpoint: Skalierung ────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --sp-6: 40px;  /* large  → 40px mobile */
        --sp-8: 48px;  /* xl     → 48px mobile */
    }
    html body .wp-block-columns {
        gap: var(--sp-3) !important;
    }
    html body .seotologie-tools-grid,
    html body .seotologie-direkt-einsteigen .wp-block-columns {
        gap: var(--sp-3) !important;
    }
}

/* ==========================================================================
   FOOTER LINKS FIX
   ========================================================================== */

/* Footer Lesbarkeit erzwingen (Teal ~6.3:1 Kontrast auf #0C4A3A) */
html body .site-footer a:not(.borlabs-cookie-btn):not([class*="ast-custom"]):not([class*="btn"]):not([class*="button"]),
html body .footer-widget-area a:not(.borlabs-cookie-btn):not([class*="ast-custom"]):not([class*="btn"]):not([class*="button"]),
html body .ast-footer-html-inner a:not(.borlabs-cookie-btn):not([class*="ast-custom"]):not([class*="btn"]):not([class*="button"]) {
    color: #7FDBCC !important;
    text-decoration: none !important;
    line-height: 1.5 !important;  /* Reduziert: 1.8→1.5, kompakter */
    display: inline-block !important;
    padding: 3px 0 !important;    /* Reduziert: 6px→3px oben/unten */
    transition: none !important; /* Blockiert Astra transition:all – color ist nicht GPU-kompositionierbar */
}
html body .site-footer a:not(.borlabs-cookie-btn):not([class*="ast-custom"]):not([class*="btn"]):not([class*="button"]):hover,
html body .footer-widget-area a:not(.borlabs-cookie-btn):not([class*="ast-custom"]):not([class*="btn"]):not([class*="button"]):hover,
html body .ast-footer-html-inner a:not(.borlabs-cookie-btn):not([class*="ast-custom"]):not([class*="btn"]):not([class*="button"]):hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}


/* ==========================================================================
   MOBILE MENU TOGGLE FIX
   ========================================================================== */
button.menu-toggle,
.ast-button-wrap .menu-toggle,
.ast-mobile-menu-buttons .menu-toggle,
.main-header-bar .menu-toggle {
    color: #083A2E !important;
    transition: opacity 0.15s ease !important;  /* nur opacity = kompositionierbar */
}
/* Hover: weiße Schrift (Dunkelrot-BG kommt aus performance.php) */
button.menu-toggle:hover,
button.menu-toggle:active,
button.menu-toggle:focus,
.ast-button-wrap .menu-toggle:hover,
.ast-mobile-menu-buttons .menu-toggle:hover,
.main-header-bar .menu-toggle:hover {
    color: #ffffff !important;
}
/* Geöffnet (X-Icon): dunkle Schrift auf Teal */
button.menu-toggle.toggled,
button.menu-toggle[aria-expanded="true"],
.ast-mobile-menu-buttons .menu-toggle.active {
    color: #083A2E !important;
}
button.menu-toggle .mobile-menu-toggle-icon .ast-mobile-svg,
.ast-mobile-menu-buttons .menu-toggle .ast-mobile-svg,
.ast-button-wrap .menu-toggle .ast-mobile-svg {
    fill: currentColor !important;
    /* fill-Transition entfernt – fill ist nicht kompositionierbar, currentColor folgt instant */
}
button.menu-toggle:hover .mobile-menu-toggle-icon .ast-mobile-svg,
button.menu-toggle:active .mobile-menu-toggle-icon .ast-mobile-svg,
button.menu-toggle:focus .mobile-menu-toggle-icon .ast-mobile-svg,
.ast-mobile-menu-buttons .menu-toggle:hover .ast-mobile-svg,
.ast-mobile-menu-buttons .menu-toggle.active .ast-mobile-svg,
.ast-button-wrap .menu-toggle:hover .ast-mobile-svg {
    fill: currentColor !important;
}

/* ==========================================================================
   FOOTER HEADINGS + QUOTE
   ========================================================================== */
/* Footer-Überschriften: #CBD3D0 auf dunklem BG (#083A2E) */
html body .site-footer .footer-heading,
html body .site-footer h2,
html body .site-footer h3,
html body .site-footer h4,
html body .footer-widget-area h2,
html body .footer-widget-area h3,
html body .footer-widget-area h4,
html body .footer-widget-area .widget-title,
html body .ast-footer-html-inner h2,
html body .ast-footer-html-inner h3,
html body .ast-footer-html-inner h4 {
    color:       #CBD3D0 !important;
    font-weight: 400 !important;
    margin-bottom: 24px !important;
}

html body .footer-widget-area h2,
html body .site-footer h2,
html body .ast-footer-html-inner h2 {
    font-size: 1.5rem !important;
}
html body .footer-widget-area h3,
html body .site-footer h3,
html body .ast-footer-html-inner h3 {
    font-size: 1.25rem !important;
}
html body .footer-widget-area h4,
html body .site-footer h4,
html body .ast-footer-html-inner h4 {
    font-size: 1.1rem !important;
}
html body .footer-widget-area .widget-title {
    font-size: 1.25rem !important;
}

/* Footer-Quote: Mephistopheles-Zitat + Autor */
html body .site-footer .footer-quote,
html body .site-footer p.footer-quote {
    color: #CBD3D0 !important;
    font-style: italic !important;
    line-height: 1.6 !important;
}
html body .site-footer .footer-quote .quote-author {
    color: #CBD3D0 !important;
    font-style: normal !important;
    font-size: 0.875em !important;
    opacity: 0.8;
}

/* --- PREMIUM CTA BOX ("Fehlt dir ein spezieller Generator...") --- */
body .ast-faq-community-cta {
    background: rgba(249,249,249,0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(61,189,189,0.18) !important;
    border-radius: var(--radius-lg) !important;
    padding: 48px 32px !important;
    text-align: center !important;
    box-shadow: var(--shadow-teal) !important;
    margin: 60px auto 0 !important;
    max-width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.3s ease !important;
}

body .ast-faq-community-cta:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(47, 79, 79, 0.12), 0 6px 16px rgba(61, 189, 189, 0.08) !important;
}

body .ast-faq-community-cta .ast-faq-community-icon {
    margin-bottom: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    box-shadow: 0 8px 24px rgba(61, 189, 189, 0.15) !important;
}

body .ast-faq-community-cta p {
    font-size: 1.25rem !important;
    color: #083A2E !important;
    margin-bottom: 32px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Sicherstellung: Community-Button bleibt schmal/leicht (höhere Spezifität gegen etwaige Überschreibungen) */
html body .ast-faq-community-cta .ast-faq-community-btn {
    font-weight: 400 !important;
}

/* ==========================================================================
   MOBILE NAVIGATION DROPDOWN – UX v5.0
   Überschreibt Astra-Inline:
     .ast-mobile-header-wrap .ast-mobile-header-content { background-color:#ffffff }
     .ast-builder-menu-mobile .main-navigation .main-header-menu { background-color: var(--ast-global-color-5) }
   ========================================================================== */

/* Hintergrund Dropdown-Container */
html body #ast-mobile-header .ast-mobile-header-content,
html body #ast-mobile-header .ast-mobile-header-content.content-align-flex-start,
html body .ast-mobile-header-wrap .ast-mobile-header-content {
    background:       #083A2E !important;
    background-color: #083A2E !important;
    border-top: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.25) !important;
    padding: 12px 0 24px 0 !important;
}

/* Navigation-Container transparent */
html body #ast-mobile-header .ast-builder-menu-mobile,
html body #ast-mobile-header .main-header-bar-navigation,
html body #ast-mobile-header .main-navigation {
    background:       transparent !important;
    background-color: transparent !important;
}

/* UL-Menüliste – Hintergrund entfernen */
html body #ast-hf-mobile-menu,
html body #ast-mobile-header .ast-nav-menu,
html body #ast-mobile-header ul.main-header-menu,
html body .ast-builder-menu-mobile .main-navigation .main-header-menu,
html body .ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu {
    background:       transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 16px 12px 16px !important;
}

/* LI – dünne Trennlinie statt fester Blöcke */
html body #ast-hf-mobile-menu > li,
html body #ast-mobile-header .ast-nav-menu > li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 0 !important;
}
html body #ast-hf-mobile-menu > li:last-child,
html body #ast-mobile-header .ast-nav-menu > li:last-child {
    border-bottom: none !important;
}

/* Links: großzügiges Padding, klare Farbe, gute Linienhöhe */
html body #ast-hf-mobile-menu a.menu-link,
html body #ast-mobile-header .ast-nav-menu a.menu-link,
html body #ast-mobile-header .main-navigation .menu-item .menu-link,
html body .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link,
html body #ast-mobile-site-navigation a.menu-link {
    display:          flex !important;
    align-items:      center !important;
    min-height:       56px !important;
    padding:          16px 20px !important;
    line-height:      1.4 !important;
    color:            #ffffff !important;
    font-family:      'Inter', 'DM Sans', sans-serif !important;
    font-size:        1.0625rem !important;
    font-weight:      500 !important;
    letter-spacing:   0.02em !important;
    text-decoration:  none !important;
    border-left:      3px solid transparent !important;
    background:       transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    /* transform statt padding-left animieren → composited, kein Layout-Trigger */
    transform:        translateX(0) !important;
    transition:       transform 0.18s ease !important;
}

/* Hover / Focus */
html body #ast-hf-mobile-menu a.menu-link:hover,
html body #ast-hf-mobile-menu a.menu-link:focus,
html body .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link:hover,
html body #ast-mobile-header .main-navigation .menu-item .menu-link:hover {
    background:        rgba(255,255,255,0.10) !important;
    background-color:  rgba(255,255,255,0.10) !important;
    color:             #3DBDBD !important;
    border-left-color: #3DBDBD !important;
    /* transform statt padding-left: gleiche 8px-Einrückung, aber GPU-beschleunigt */
    transform:         translateX(8px) !important;
    padding-left:      20px !important;
}

/* Aktive Seite */
html body #ast-hf-mobile-menu .current-menu-item > a.menu-link,
html body .ast-builder-menu-mobile .main-navigation .main-header-menu .current-menu-item > .menu-link,
html body .ast-builder-menu-mobile .main-navigation .main-header-menu .current-menu-ancestor > .menu-link {
    background:        rgba(255,255,255,0.12) !important;
    background-color:  rgba(255,255,255,0.12) !important;
    color:             #3DBDBD !important;
    border-left-color: #3DBDBD !important;
    font-weight:       600 !important;
    padding-left:      24px !important;
}

/* END MOBILE NAVIGATION DROPDOWN v5.0 */

/* ==========================================================================
   FOOTER BUTTON – MEHR LUFT OBEN/UNTEN (Desktop + Mobile)
   ========================================================================== */
html body .site-footer .ast-custom-button,
html body .site-above-footer-wrap .ast-custom-button,
html body .ast-footer-html-inner .ast-custom-button,
html body .footer-widget-area .ast-button,
html body .footer-widget-area .wp-block-button__link,
html body .site-footer .wp-block-button__link {
    height:         auto !important;      /* Kein festes height – Padding bestimmt */
    padding:        14px 28px !important; /* Luft oben/unten 14px, seitlich 28px */
    min-height:     48px !important;      /* Touch-Target gewährleistet */
    display:        inline-flex !important;
    align-items:    center !important;
    justify-content: center !important;
}
@media (max-width: 768px) {
    html body .site-footer .ast-custom-button,
    html body .site-above-footer-wrap .ast-custom-button,
    html body .site-footer .wp-block-button__link,
    html body .footer-widget-area .wp-block-button__link {
        padding:   16px 24px !important;  /* Mobile: noch mehr vertikale Luft */
        width:     100% !important;
        max-width: 320px !important;
    }
}

/* ==========================================================================
   HERO MOCKUP – SAAS PREMIUM v2.0
   Ziel: 20–30% größer, weicher Shadow, Rundung, Abstand zum Text.
   ========================================================================== */

/* Mockup-Container: Abstand + Raumreservierung vor Bildladung (CLS-Fix) */
html body .seotologie-hero-mockup,
html body .seotologie-hero-image,
html body .seotologie-hero-screenshot,
html body .seotologie-hero-dashboard {
    position:     relative !important;
    margin-top:   var(--sp-6) !important;  /* 48px Abstand nach Hero-Text */
    margin-left:  auto !important;
    margin-right: auto !important;
    /* Raumreservierung: Browser kennt Höhe bevor Bild geladen → CLS ↓ */
    aspect-ratio: 680/430 !important;   /* Dashboard-Mockup ca. 16:10 – ggf. an echte Bildmaße anpassen */
    max-width:    680px !important;
    overflow:     hidden !important;  /* verhindert Inhalt außerhalb Reservierung */
    contain:      layout !important;  /* Isoliert Layout-Einfluss auf übrige Seite */
}
/* Hero-Visual: eigener Block damit Caption (::after) sichtbar darunter erscheint */
html body .seotologie-hero-visual {
    position:        relative !important;
    display:         flex !important;
    flex-direction:  column !important;
    max-width:       680px !important;
    margin-top:      var(--sp-6) !important;
    margin-left:     auto !important;
    margin-right:    auto !important;
}

/* Das Bild selbst: größer, Rundung, Soft-Shadow */
html body .seotologie-hero-mockup img,
html body .seotologie-hero-image img,
html body .seotologie-hero-visual img,
html body .seotologie-hero-screenshot img,
html body .seotologie-hero-dashboard img,
html body .seotologie-hero-content img.wp-post-image,
html body .seotologie-hero-content .wp-block-image img,
html body figure.seotologie-mockup img {
    width:         100% !important;
    max-width:     680px !important;   /* 30% größer als typische 520px */
    height:        auto !important;
    border-radius: var(--radius-lg) !important;  /* Token: 10px */
    /* Shadow-strong: 3-Layer für Tiefe ohne Schwere */
    box-shadow: var(--shadow-strong) !important;
    display:       block !important;
    transform:     translateZ(0) !important;  /* GPU-Layer für scharfe Darstellung */
}

/* Hover: leichter Lift-Effekt */
html body .seotologie-hero-mockup:hover img,
html body .seotologie-hero-image:hover img,
html body .seotologie-hero-visual:hover img {
    box-shadow: var(--shadow-strong), 0 32px 64px rgba(0,0,0,0.16) !important;
    transform: translateY(-4px) translateZ(0) !important;
    transition: transform 0.3s ease !important;
}

/* ==========================================================================
   SINGLE POST / PAGE: Grauer Container entfernen, Desktop kein Padding
   Astra „Separate Container": body=#eaeaea, article=weiß → schwebende Karte.
   Fix: Body + article-Hintergrund auf gleich, Padding-Override.
   ========================================================================== */

/* 1. Body-Hintergrund auf Weiß */
body.single.ast-separate-container,
body.page.ast-separate-container {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* 2. Artikel-Element: kein eigener Hintergrund, kein Box-Effekt */
body.single .ast-article-single:not(.ast-related-post),
body.page  .ast-article-single:not(.ast-related-post) {
    background:    transparent !important;
    box-shadow:    none !important;
    border:        none !important;
}

/* 3. Desktop: kein seitliches Padding (Text beginnt direkt am Container-Rand) */
@media (min-width: 922px) {
    body.single .ast-article-single:not(.ast-related-post),
    body.page  .ast-article-single:not(.ast-related-post) {
        padding-top:    2em !important;
        padding-bottom: 2em !important;
        padding-left:   0 !important;
        padding-right:  0 !important;
    }
}

/* 4. Mobile: kompaktes Padding, volle Breite */
@media (max-width: 921px) {
    body.single .ast-article-single:not(.ast-related-post),
    body.page  .ast-article-single:not(.ast-related-post) {
        padding: 1.5em 1em !important;
    }
}

/* ==========================================================================
   FARBPALETTE v2.0 – UNIFIED SEOTOLOGIE BRAND
   Header:      #083A2E (Deep Forest – Autorität)
   Footer:      #083A2E (= Header-Farbe – einheitliche Dunkelheit)
   Primary CTA: #0DB9AF (Teal – Basis) → Hover: #1AA36F (Grün – sichtbarer Wechsel)
   Accent:      #3DBDBD (Teal – Highlights, Links, Badges)
   ========================================================================== */

/* Header Bar: Mesh-Gradient – CSS-only, GPU-kompositionierbar, kein Bild */
html body .ast-primary-header-bar,
html body #masthead .ast-primary-header-bar,
html body .site-header {
    background-color: #083A2E !important;
    background-image:
        radial-gradient(ellipse 55% 40% at 88% 15%, rgba(61,189,189,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 45% 60% at 8% 85%, rgba(13,185,175,0.13) 0%, transparent 65%),
        linear-gradient(160deg, #0A4535 0%, #083A2E 55%, #062E24 100%) !important;
}

/* Header: Nav-Links Farbe auf Kontrast optimiert */
html body #masthead .ast-primary-header-bar .menu-item > .menu-link,
html body #masthead .ast-builder-menu-1 .menu-item > .menu-link,
html body.ast-theme-transparent-header #masthead .main-header-menu .menu-item > .menu-link {
    color: rgba(255,255,255,0.85) !important;
}
html body #masthead .ast-primary-header-bar .menu-item:hover > .menu-link,
html body #masthead .ast-primary-header-bar .menu-item.current-menu-item > .menu-link,
html body.ast-theme-transparent-header #masthead .main-header-menu .menu-item:hover > .menu-link {
    color: #3DBDBD !important;
}

/* Primary CTA global: #0DB9AF (Basis-Teal) – Hover: #1AA36F (Grün) */
html body .seotologie-hero-cta-primary,
html body .ast-header-button-1 .ast-custom-button,
html body .wp-block-button.is-style-fill .wp-block-button__link,
html body body.home .wp-block-button__link:first-child {
    background-color: #0DB9AF !important;
    color:            #2F4F4F !important;
    border-color:     #0DB9AF !important;
}

/* Accent bleibt Teal: Icons, aktive Zustände (Badge separat geregelt) */
html body .seotologie-trust-signals::before,
html body .ast-icon,
html body .ast-faq-trigger::after {
    color: #3DBDBD !important;
}

/* ── Nach-oben-Button: identisch zu anderen Buttons ────────────────────── */
html body #ast-scroll-top {
    position:         fixed !important;
    bottom:           24px !important;
    right:            24px !important;
    left:             auto !important;
    z-index:          9990 !important;
    overflow:         hidden !important;
    background-color: #0DB9AF !important;
    background-image: linear-gradient(180deg, #19CCC1 0%, #0DB9AF 55%, #0AA59B 100%) !important;
    color:            #2F4F4F !important;
    border-radius:    var(--radius-md) !important;
    width:            44px !important;
    height:           44px !important;
    padding:          0 !important;
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    box-shadow:       var(--shadow-subtle), 0 4px 12px rgba(13,185,175,0.25) !important;
    border:           1px solid #0A9E95 !important;
    transition:       background-color 0.18s ease,
                      transform        0.18s cubic-bezier(0.4,0,0.2,1),
                      box-shadow       0.18s ease !important;
}
/* Pfeil-Icon: Astra setzt ::before mit eigenem color – direkt überschreiben */
html body #ast-scroll-top::before,
html body #ast-scroll-top i,
html body #ast-scroll-top svg {
    color:    #2F4F4F !important;
    fill:     #2F4F4F !important;
    position: relative !important;
    z-index:  10 !important;
}
/* Lichtstrahl via ::after (::before = Astra Pfeil-Icon) */
html body #ast-scroll-top::after {
    content:        '' !important;
    position:       absolute !important;
    top:            -50% !important;
    left:           0 !important;
    width:          60% !important;
    height:         200% !important;
    z-index:        5 !important;
    background:     linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 100%) !important;
    transform:      translateX(-200%) skewX(-20deg) !important;
    pointer-events: none !important;
    transition:     transform 0.55s cubic-bezier(0.4,0,0.2,1) !important;
}
html body #ast-scroll-top:hover {
    background-color: #0AA59B !important;
    background-image: linear-gradient(180deg, #0AA59B 0%, #0DB9AF 55%, #19CCC1 100%) !important;
    color:            #2F4F4F !important;
    box-shadow:       var(--shadow-medium), 0 8px 24px rgba(8,143,141,0.40) !important;
    transform:        translateY(-2px) !important;
}
html body #ast-scroll-top:hover::before,
html body #ast-scroll-top:hover i,
html body #ast-scroll-top:hover svg {
    color: #2F4F4F !important;
    fill:  #2F4F4F !important;
}
html body #ast-scroll-top:hover::after {
    transform: translateX(280%) skewX(-20deg) !important;
}

/* Hero Badge: eigene Farbe – nicht durch Teal-Sammelregel überschrieben */
html body .seotologie-hero-badge {
    color: #08392D !important;
}

/* Body Hintergrund: sauber weiß */
html body,
html body.home,
html body .site-content,
html body .entry-content {
    background-color: #ffffff !important;
}

/* ==========================================================================
   CATEGORY / ARCHIVE: Grauer Container entfernen, Text links, kein Bildrahmen
   ========================================================================== */

/* 1. html UND body weiß – deckt alle Astra-BG-Ebenen ab */
html:has(body.category),
html:has(body.archive),
html:has(body.tag) {
    background-color: #ffffff !important;
}
html body.category,
html body.archive,
html body.tag,
html body.category.ast-separate-container,
html body.archive.ast-separate-container,
html body.tag.ast-separate-container {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* 2. Alle Content-Wrapper transparent – breite Selektor-Abdeckung */
html body.category .site-content,
html body.category #content,
html body.category #primary,
html body.category .ast-container,
html body.category .content-area,
html body.category .ast-primary-content-area,
html body.archive  .site-content,
html body.archive  #content,
html body.archive  #primary,
html body.archive  .ast-container,
html body.archive  .content-area,
html body.archive  .ast-primary-content-area,
html body.tag      .site-content,
html body.tag      #content,
html body.tag      #primary,
html body.tag      .ast-container,
html body.tag      .content-area {
    background:    transparent !important;
    box-shadow:    none !important;
    border:        none !important;
}

/* 3. Kategorie-Header-Bereich: transparent + linksbündig */
html body.category .page-header,
html body.category .ast-archive-cover,
html body.category .ast-page-header,
html body.category .ast-archive-description,
html body.category .taxonomy-description,
html body.category .cat-description,
html body.archive  .page-header,
html body.archive  .ast-archive-cover,
html body.archive  .ast-archive-description,
html body.archive  .taxonomy-description,
html body.page     .page-header,
html body.page     .ast-archive-cover,
html body.page     .ast-archive-description,
html body.page     .taxonomy-description {
    background:       transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    text-align:       left !important;
}
/* Alle Textelemente darin ebenfalls links */
html body.category .page-header *,
html body.category .ast-archive-description *,
html body.category .taxonomy-description *,
html body.page     .ast-archive-description *,
html body.page     .page-header * {
    text-align: left !important;
}

/* 4. Artikel-Karten: kein Hintergrund, KEIN Rahmen
      Höchste Spezifität: targeting der exakten Klassen-Kombination aus dem HTML */
html body.category .ast-article-post,
html body.category.ast-separate-container .ast-article-post,
html body.archive  .ast-article-post,
html body.archive.ast-separate-container  .ast-article-post,
html body.tag      .ast-article-post,
html body.page     .ast-article-post {
    background: transparent !important;
    border:     none !important;
    box-shadow: none !important;
}
/* blog-layout-4 + ast-article-inner – exakte Klassen aus dem Quelltext */
html body.category .blog-layout-4,
html body.category .ast-article-inner,
html body.category .blog-layout-4.ast-article-inner,
html body.category.ast-separate-container .blog-layout-4,
html body.category.ast-separate-container .ast-article-inner,
html body.category.ast-separate-container .blog-layout-4.ast-article-inner,
html body.archive  .blog-layout-4,
html body.archive  .ast-article-inner,
html body.archive  .blog-layout-4.ast-article-inner,
html body.archive.ast-separate-container  .blog-layout-4.ast-article-inner,
html body.tag      .blog-layout-4,
html body.tag      .ast-article-inner,
html body.tag      .blog-layout-4.ast-article-inner,
html body.page     .blog-layout-4,
html body.page     .ast-article-inner,
html body.page     .blog-layout-4.ast-article-inner {
    border:     none !important;
    box-shadow: none !important;
    background: transparent !important;
    outline:    none !important;
}

/* 5. Bilder innerhalb aller Archiv-Artikel: kein Rahmen */
html body.category article img,
html body.category .post-thumb-img-content img,
html body.category .ast-blog-featured-section img,
html body.category .wp-post-image,
html body.archive  article img,
html body.archive  .post-thumb-img-content img,
html body.archive  .ast-blog-featured-section img,
html body.archive  .wp-post-image,
html body.tag      article img,
html body.tag      .post-thumb-img-content img,
html body.page     article img,
html body.page     .post-thumb-img-content img,
html body.page     .ast-blog-featured-section img,
html body.page     .wp-post-image {
    border:     none !important;
    box-shadow: none !important;
    outline:    none !important;
}

/* 6. Desktop: kein seitliches Padding */
@media (min-width: 922px) {
    html body.category .site-primary,
    html body.archive  .site-primary {
        padding-left:  0 !important;
        padding-right: 0 !important;
    }
}

/* 7. Mobile: kompaktes Padding */
@media (max-width: 921px) {
    html body.category .site-primary,
    html body.archive  .site-primary {
        padding: 1.5em 1em !important;
    }
}

/* 8. Karten-Tiefe: Subtle Depth Shadow auf den inneren Card-Container
      Überschreibt bewusst box-shadow:none von Sektion 4 – Rahmen bleibt weg,
      nur eine weiche Elevation kommt hinzu (SaaS-Card-Standard) */
html body.category .ast-article-inner,
html body.archive  .ast-article-inner,
html body.tag      .ast-article-inner,
html body.page     .ast-article-inner {
    background:    #ffffff !important;
    box-shadow:    0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.07) !important;
    border-radius: 10px !important;
    overflow:      hidden !important;
}

/* ==========================================================================
   BORLABS COOKIE WIDGET: Button-Abstand
   ========================================================================== */
/* Container-Reihen (Tab-Buttons oben, Aktions-Buttons unten) */
#borlabs-cookie-widget .borlabs-cookie-btns,
#borlabs-cookie-widget .brlbs-btn-group,
.brlbs-footer .brlbs-btn-wrapper,
.brlbs-cmpnt-consent-modal .brlbs-footer {
    display:   flex !important;
    flex-wrap: wrap !important;
    gap:       6px !important;
}
/* Jeder Button: etwas Luft zwischen den Reihen */
#borlabs-cookie-widget .borlabs-cookie-btn,
#borlabs-cookie-widget .brlbs-btn,
#borlabs-cookie-widget .brlbs-cmpnt-btn {
    margin: 3px !important;
}

/* ==========================================================================
   KI-CAPTION: Illustration-Hinweis unter Artikel- und Hero-Bildern
   ========================================================================== */
/* Archiv-Karten: Thumbnail-Wrapper */
html body .ast-blog-featured-section::after,
/* Single Post: Featured Image */
html body .ast-single-post-featured-image::after {
    content:     "Illustration: Erstellt mit Hilfe von KI (Gemini)";
    display:     block;
    font-size:   0.72rem;
    color:       #94a3b8;
    font-style:  italic;
    text-align:  left;
    margin-top:  4px;
    line-height: 1.4;
}

/* Homepage: Hero-Bild – Caption erscheint als Flex-Item UNTERHALB des Bildes */
html body .seotologie-hero-visual::after {
    content:     "Illustration: Erstellt mit Hilfe von KI (Gemini)";
    display:     block;
    font-size:   0.72rem;
    color:       #94a3b8;
    font-style:  italic;
    text-align:  left;
    margin-top:  6px;
    line-height: 1.4;
    width:       100%;
}

/* ==========================================================================
   STARTSEITE: Hero-Layout 50/50
   ========================================================================== */
html body .seotologie-hero-container {
    overflow:   visible !important;  /* kein Abschneiden */
    margin-top: 0 !important;
}
html body .seotologie-hero-section {
    padding-top:    32px !important;  /* Luft nach oben */
    padding-bottom: 32px !important;
    align-items:    center !important;
}

@media (min-width: 768px) {
    /* 50/50 – Gap zwischen den Spalten via padding */
    html body .seotologie-hero-content {
        flex:      0 0 48% !important;
        max-width: 48% !important;
        padding-right: 24px !important;
    }
    html body .seotologie-hero-visual {
        flex:      0 0 48% !important;
        max-width: 48% !important;
        overflow:  visible !important;  /* Bild nicht abschneiden */
    }
    /* relative-scanner-box: visible damit Mockup-Schatten nicht gecroppt wird */
    /* ABER: .seotologie-image-container ist Laser-Clip-Boundary → bleibt hidden */
    html body .seotologie-hero-visual .relative-scanner-box {
        overflow: visible !important;
    }
    html body .seotologie-hero-visual .seotologie-image-container {
        overflow: hidden !important; /* Übersteuert .relative-scanner-box → Laser wird geclippt */
    }
    /* Bild füllt die volle Spaltenbreite */
    html body .seotologie-hero-visual img,
    html body .seotologie-hero-visual .scanner-hero-mockup {
        width:     100% !important;
        max-width: 100% !important;
        height:    auto !important;
    }
}

/* ==========================================================================
   MOBILE: Button-Größe anpassen (Touch-Optimiert)
   ========================================================================== */
@media (max-width: 768px) {
    body .seotologie-hero-cta-primary,
    body .ast-custom-button,
    body .wp-block-button__link,
    body .ast-button {
        height:  48px !important;  /* Größer auf Mobile */
        padding: 0 20px !important;
        font-size: 16px !important;
        width: 100% !important;    /* Full-Width auf Mobile */
        max-width: 340px !important;
    }
    html body .seotologie-hero-mockup img,
    html body .seotologie-hero-image img,
    html body figure.seotologie-mockup img {
        max-width: 100% !important;
        border-radius: var(--radius-md) !important;  /* Token: 6px */
    }
}

/* ==========================================================================
   BREADCRUMBS – WCAG AA konform (min. 4.5:1 auch auf grauem BG)
   ========================================================================== */

/* ── Äußere Breadcrumb-Leiste: KONSISTENTE Höhe auf ALLEN Seiten ────────── */
/* Problem: Startseite = 1 Zeile (32px), Artikelseiten = 2 Zeilen (60px)     */
/* Fix: min-height + padding erzwingt einheitliche Leistenhöhe               */
html body .main-header-bar.ast-header-breadcrumb {
    min-height: 52px !important;
    padding-top:    8px !important;
    padding-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
}

/* Innere Wrapper: vertikale Zentrierung */
html body .ast-breadcrumbs-wrapper,
html body .ast-breadcrumbs-inner {
    display:     flex !important;
    align-items: center !important;
    width:       100% !important;
    min-height:  32px !important;
}

/* Breadcrumb selbst: Zeilenumbruch kontrollieren */
html body .ast-breadcrumbs {
    display:    flex !important;
    flex-wrap:  wrap !important;        /* Umbrechen erlaubt, aber... */
    align-items: center !important;
    line-height: 1.5 !important;
    font-size:  1.05rem !important;
    color:      #111827 !important;
}

/* Desktop: Kein Umbrechen – Breadcrumb bleibt einzeilig (kürzt via text-overflow) */
@media (min-width: 769px) {
    html body .ast-breadcrumbs {
        flex-wrap:   nowrap !important;
        overflow:    hidden !important;
        white-space: nowrap !important;
    }
    html body .ast-breadcrumbs .trail-items {
        overflow:      hidden !important;
        white-space:   nowrap !important;
        text-overflow: ellipsis !important;
        flex-wrap:     nowrap !important;
    }
    /* Letzte Breadcrumb (aktueller Seitenname) kürzen wenn zu lang */
    html body .ast-breadcrumbs .trail-items .trail-end {
        overflow:      hidden !important;
        text-overflow: ellipsis !important;
        white-space:   nowrap !important;
        max-width:     320px !important;
    }
}

/* Mobile: Umbrechen erlaubt, aber kontrolliert */
@media (max-width: 768px) {
    html body .main-header-bar.ast-header-breadcrumb {
        min-height:     auto !important;  /* Flexibel auf Mobile */
        padding-top:    8px !important;
        padding-bottom: 8px !important;
    }
    html body .ast-breadcrumbs,
    html body .ast-breadcrumbs .trail-items li,
    html body .ast-breadcrumbs .trail-items li a {
        font-size: clamp(0.875rem, 2vw, 1rem) !important;
        white-space: normal !important;
    }
}

/* ── Link-Farben (WCAG AA) ──────────────────────────────────────────────── */
html body .ast-breadcrumbs .trail-browse,
html body .ast-breadcrumbs .trail-items,
html body .ast-breadcrumbs .trail-items li {
    color: #4a5a54 !important;
}
html body .ast-breadcrumbs .trail-items li a {
    font-size:       1.05rem !important;
    color:           #0057b8 !important;
    text-decoration: underline !important;
    font-weight:     600 !important;
}
html body .ast-breadcrumbs .trail-items li a:hover {
    color:           #003366 !important;
    text-decoration: none !important;
}
/* Trennzeichen */
html body .ast-breadcrumbs .trail-items li.sep,
html body .ast-breadcrumbs .trail-items li.trail-sep {
    color: #64748b !important;
}
/* Aktuelle Seite (nicht verlinkt) */
html body .ast-breadcrumbs .trail-items .trail-end {
    color: #4a5a54 !important;
}