),
damit die geteilten Klassennamen (.hero-h1, .hero-meta, .trust-bar,
.faq, .cta-hard-*) nicht mit den globalen Section-Patterns kollidieren.
SVG-interne Styles (.tier-pyramid/.cliff-chart/.score-bar) bleiben
inline in methodologie.html (DECISIONS #019 Regel 3). */
.mthd .eyebrow{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--periwinkle); display: inline-flex; align-items: center; gap: 14px; }
.mthd a.inline-link{ color: var(--periwinkle-deep); text-decoration: underline; text-decoration-color: rgba(91, 106, 191, 0.35); text-underline-offset: 3px; }
.mthd a.inline-link:hover{ text-decoration-color: var(--periwinkle); }
.mthd .hero-grid{ display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 80px; align-items: center; }
.mthd .hero-eyebrow{ margin-bottom: 28px; }
.mthd .hero-h1{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(48px, 6vw, 88px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 28px 0; color: var(--ink); }
.mthd .hero-h1 em{ font-style: italic; color: var(--periwinkle); font-weight: 400; }
.mthd .hero-h1 .strike::after{ content: ""; position: absolute; top: 50%; left: -2%; right: -2%; height: 2px; background: var(--periwinkle); transform: rotate(-3deg); }
.mthd .hero-lead{ font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 32px 0; max-width: 540px; }
.mthd .hero-meta{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-mute); display: flex; gap: 18px; flex-wrap: wrap; }
.mthd .hero-meta span{ color: var(--ink); }
.mthd .hero-meta em{ font-family: var(--font-serif); font-style: italic; color: var(--periwinkle-deep); text-transform: none; letter-spacing: 0.02em; }
.mthd .citation-demo{ background: var(--bg-soft); border: 1px solid var(--rule-strong); border-radius: 4px; padding: 28px; font-family: var(--font-mono); font-size: 13px; line-height: 1.65; color: var(--ink-soft); position: relative; }
.mthd .citation-demo::before{ content: "ChatGPT · 18. Mai 2026"; position: absolute; top: -10px; left: 20px; background: var(--bg); padding: 0 10px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--periwinkle-deep); }
.mthd .citation-prompt{ color: var(--ink-mute); margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--rule); }
.mthd .citation-prompt::before{ content: "❯ "; color: var(--periwinkle); }
.mthd .citation-answer{ font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: var(--ink); }
.mthd .citation-answer .src{ color: var(--periwinkle-deep); font-family: var(--font-mono); font-size: 11px; vertical-align: super; text-decoration: none; padding-left: 2px; }
.mthd .citation-answer em{ font-style: italic; color: var(--periwinkle-deep); }
.mthd .citation-sources{ margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--rule); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.mthd .citation-sources b{ color: var(--periwinkle-deep); font-weight: 500; }
.mthd .trust-bar{ padding: 72px 56px; max-width: 1320px; margin: 0 auto; border-bottom: 1px solid var(--ink); }
.mthd .trust-bar-eyebrow{ margin-bottom: 40px; }
.mthd .trust-bar-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.mthd .trust-stat{ padding: 0 36px; border-right: 1px solid var(--rule); }
.mthd .trust-stat:first-child{ padding-left: 0; }
.mthd .trust-stat:last-child{ border-right: none; padding-right: 0; }
.mthd .trust-stat-value{ font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 64px; line-height: 0.95; letter-spacing: -0.03em; color: var(--periwinkle); margin-bottom: 14px; }
.mthd .trust-stat-value sup{ font-size: 0.4em; vertical-align: top; color: var(--periwinkle-deep); margin-left: 2px; }
.mthd .trust-stat-value .arrow{ font-size: 0.5em; color: var(--periwinkle-deep); margin: 0 4px; }
.mthd .trust-stat-label{ font-family: var(--font-serif); font-size: 15px; line-height: 1.45; color: var(--ink); margin: 0 0 10px 0; }
.mthd .trust-stat-label em{ font-style: italic; color: var(--periwinkle-deep); }
.mthd .intro-left,
.mthd .section-left,
.mthd .faq-left{ position: sticky; top: 40px; }
.mthd .intro-h2{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -0.025em; margin: 16px 0 0 0; }
.mthd .intro-h2 em{ font-style: italic; color: var(--periwinkle); }
.mthd .intro-body p{ margin: 0 0 26px 0; }
.mthd .intro-body p:last-child{ margin-bottom: 0; }
.mthd .intro-body em{ font-style: italic; color: var(--periwinkle-deep); }
.mthd .intro-body strong{ color: var(--ink); font-weight: 600; }
.mthd .intro-body p:first-child::first-letter{ font-family: var(--font-serif); font-style: italic; font-size: 88px; line-height: 0.85; color: var(--periwinkle); float: left; padding: 4px 14px 0 0; font-weight: 400; }
.mthd .dimensions-section{ border-top: 1px solid var(--ink); background: var(--bg-soft); }
.mthd .dimensions-head{ max-width: 1320px; margin: 0 auto; padding: 96px 56px 32px; }
.mthd .dimensions-head-eyebrow{ margin-bottom: 24px; }
.mthd .dimensions-h2{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 24px 0; max-width: 820px; }
.mthd .dimensions-h2 em{ font-style: italic; color: var(--periwinkle); }
.mthd .dimensions-lead em{ color: var(--periwinkle-deep); }
.mthd .dim{ max-width: 1320px; margin: 0 auto; padding: 64px 56px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 320px 1fr; gap: 80px; align-items: start; }
.mthd .dim:last-of-type{ border-bottom: 1px solid var(--ink); }
.mthd .dim-anchor{ position: sticky; top: 40px; padding-top: 8px; }
.mthd .dim-roman{ font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(120px, 14vw, 168px); line-height: 0.88; color: var(--periwinkle); letter-spacing: -0.04em; margin: 0 0 28px -8px; }
.mthd .dim-meta-block{ padding-top: 20px; border-top: 1px solid var(--periwinkle); max-width: 240px; }
.mthd .dim-meta{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px; }
.mthd .dim-tag{ font-family: var(--font-serif); font-style: italic; font-size: 18px; line-height: 1.3; color: var(--ink); }
.mthd .dim-body{ max-width: 760px; }
.mthd .dim-statement{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 28px 0; }
.mthd .dim-statement em{ font-style: italic; color: var(--periwinkle); }
.mthd .dim-body p{ font-family: var(--font-serif); font-size: 19px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 22px 0; }
.mthd .dim-body p:last-child{ margin-bottom: 0; }
.mthd .dim-body strong{ color: var(--ink); font-weight: 600; }
.mthd .dim-body em{ font-style: italic; color: var(--periwinkle-deep); }
.mthd .callout-wrap{ max-width: 1320px; margin: 0 auto; padding: 0 56px 96px; }
.mthd .callout{ background: var(--periwinkle-soft); border-left: 3px solid var(--periwinkle); padding: 32px 40px; border-radius: 0 4px 4px 0; max-width: 880px; }
.mthd .callout p{ font-family: var(--font-serif); font-size: 20px; line-height: 1.5; color: var(--ink); margin: 0; }
.mthd .callout em{ font-style: italic; color: var(--periwinkle-deep); }
.mthd .section{ padding: 96px 56px; max-width: 1320px; margin: 0 auto; border-top: 1px solid var(--rule); }
.mthd .section.no-border{ border-top: none; }
.mthd .section-eyebrow{ margin-bottom: 24px; }
.mthd .section-h2,
.mthd .anecdote-h2,
.mthd .faq-h2{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 4.5vw, 52px); line-height: 1.05; letter-spacing: -0.025em; margin: 0; }
.mthd .section-h2 em{ font-style: italic; color: var(--periwinkle); }
.mthd .section-body p{ margin: 0 0 22px 0; }
.mthd .section-body p:last-child{ margin-bottom: 0; }
.mthd .section-body em{ font-style: italic; color: var(--periwinkle-deep); }
.mthd .section-body strong{ color: var(--ink); font-weight: 600; }
.mthd .tiers{ display: grid; grid-template-columns: 1fr; gap: 20px; margin: 32px 0 0; }
.mthd .tier{ padding: 28px 32px; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg); }
.mthd .tier.t1,
.fit-col.yes,
.bai-cta-inline.soft{ border-color: var(--periwinkle); background: var(--periwinkle-softer); }
.mthd .tier-head{ display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.mthd .tier-label{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--periwinkle-deep); font-weight: 600; }
.mthd .tier-weight{ font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--ink-mute); }
.mthd .tier-weight strong{ color: var(--periwinkle); font-style: normal; font-weight: 600; font-family: var(--font-mono); font-size: 13px; }
.mthd .tier p{ margin: 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
.mthd .tier em{ font-style: italic; color: var(--periwinkle-deep); }
.mthd .tier strong{ color: var(--ink); font-weight: 600; }
.mthd .anecdote-eyebrow{ color: var(--periwinkle-deep); margin-bottom: 24px; }
.mthd .anecdote-eyebrow::before{ background: var(--periwinkle-deep) !important; }
.mthd .anecdote-h2 em{ font-style: italic; color: var(--periwinkle); }
.mthd .anecdote-body p{ margin: 0 0 22px 0; }
.mthd .anecdote-body p:last-child{ margin-bottom: 0; }
.mthd .anecdote-body em{ font-style: italic; color: var(--periwinkle-deep); }
.mthd .anecdote-body strong{ color: var(--ink); font-weight: 600; }
.mthd .compare{ background: var(--bg-soft); padding: 120px 56px; border-bottom: 1px solid var(--rule); }
.mthd .compare-eyebrow{ margin-bottom: 32px; }
.mthd .compare-h2{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 32px 0; max-width: 800px; }
.mthd .compare-h2 em{ font-style: italic; color: var(--periwinkle); }
.mthd .compare-intro{ font-family: var(--font-serif); font-size: 19px; line-height: 1.65; color: var(--ink-soft); max-width: 820px; margin: 0 0 56px 0; }
.mthd .compare-intro strong{ color: var(--ink); font-weight: 600; }
.mthd .compare-intro em{ font-style: italic; color: var(--periwinkle-deep); }
.mthd .compare-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule-strong); border-radius: 4px; overflow: hidden; max-width: 1000px; }
.mthd .compare-side{ padding: 48px 40px; text-align: center; }
.mthd .compare-side.before{ background: var(--bg); border-right: 1px solid var(--rule); }
.mthd .compare-side.after{ background: var(--periwinkle-softer); }
.mthd .compare-side-label{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 24px; }
.mthd .compare-side.after .compare-side-label{ color: var(--periwinkle-deep); }
.mthd .compare-side-value{ font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 96px; line-height: 0.95; letter-spacing: -0.03em; color: var(--ink-faint); margin-bottom: 20px; }
.mthd .compare-side.after .compare-side-value{ color: var(--periwinkle); }
.mthd .compare-side-claim{ font-family: var(--font-serif); font-size: 17px; line-height: 1.45; color: var(--ink); margin: 0 0 14px 0; }
.mthd .compare-side-claim em{ font-style: italic; color: var(--periwinkle-deep); }
.mthd .compare-note{ font-family: var(--font-serif); font-size: 19px; line-height: 1.65; color: var(--ink-soft); max-width: 820px; margin: 48px 0 0; }
.mthd .compare-note em{ font-style: italic; color: var(--periwinkle-deep); }
.mthd .compare-note strong{ color: var(--ink); font-weight: 600; }
.mthd .limits-list{ counter-reset: limit; margin: 32px 0 0; }
.mthd .limits-list .limit{ counter-increment: limit; padding: 28px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 80px 1fr; gap: 32px; align-items: start; }
.mthd .limits-list .limit:last-child{ border-bottom: none; }
.mthd .limits-list .limit::before{ content: counter(limit, upper-roman) "."; font-family: var(--font-serif); font-style: italic; font-size: 48px; color: var(--periwinkle); line-height: 1; }
.mthd .limits-list .limit p{ margin: 0; font-family: var(--font-serif); font-size: 19px; line-height: 1.6; color: var(--ink-soft); }
.mthd .limits-list .limit strong{ color: var(--ink); font-weight: 600; }
.mthd .limits-list .limit em{ font-style: italic; color: var(--periwinkle-deep); }
.mthd .limits-outro{ font-family: var(--font-serif); font-size: 19px; line-height: 1.65; color: var(--ink-soft); margin: 32px 0 0; }
.mthd .limits-outro em{ font-style: italic; color: var(--periwinkle-deep); }
.mthd .promise-block{ margin: 32px 0 0; }
.mthd .promise-label{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--periwinkle-deep); font-weight: 600; margin-bottom: 20px; }
.mthd .anti-list li, .mthd .promise-list li{ padding: 14px 0 14px 36px; position: relative; font-family: var(--font-serif); font-size: 19px; line-height: 1.5; color: var(--ink-soft); border-bottom: 1px solid var(--rule); }
.mthd .anti-list li:last-child, .mthd .promise-list li:last-child{ border-bottom: none; }
.mthd .anti-list li::before{ content: "×"; position: absolute; left: 0; top: 12px; color: var(--ink-faint); font-size: 22px; font-weight: 400; font-family: var(--font-serif); }
.mthd .promise-list li::before{ content: "✓"; position: absolute; left: 0; top: 12px; color: var(--periwinkle); font-style: italic; font-family: var(--font-serif); font-size: 22px; }
.mthd .anti-list em, .mthd .promise-list em{ font-style: italic; color: var(--periwinkle-deep); }
.mthd .promise-list-heading{ font-family: var(--font-serif); font-size: 22px; color: var(--ink); margin: 48px 0 16px; font-weight: 500; }
.mthd .promise-list-heading em{ font-style: italic; color: var(--periwinkle); }
.mthd .promise-tail{ font-family: var(--font-serif); font-size: 19px; line-height: 1.65; color: var(--ink-soft); margin: 24px 0 0; max-width: 720px; }
.mthd .faq{ background: var(--bg-soft); padding: 120px 56px; border-top: 1px solid var(--rule); }
.mthd .faq-inner{ max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.8fr; gap: 96px; align-items: start; }
.mthd .faq-eyebrow{ margin-bottom: 24px; }
.mthd .faq-h2 em{ font-style: italic; color: var(--periwinkle); }
.mthd .faq-list{ border-top: 1px solid var(--ink); }
.mthd .faq-item:last-child{ border-bottom: 1px solid var(--ink); }
.mthd .faq-q{ display: flex; justify-content: space-between; align-items: baseline; cursor: pointer; gap: 24px; list-style: none; }
.mthd .faq-q::-webkit-details-marker{ display: none; }
.mthd .faq-q-text{ font-family: var(--font-serif); font-size: 22px; line-height: 1.35; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.mthd .faq-q-text em{ font-style: italic; color: var(--periwinkle-deep); }
.mthd .faq-toggle{ font-family: var(--font-serif); font-style: italic; font-size: 28px; line-height: 1; color: var(--periwinkle); transition: transform 0.2s, color 0.2s; flex-shrink: 0; min-width: 28px; text-align: right; }
.mthd .faq-item[open] .faq-toggle{ transform: rotate(45deg); color: var(--periwinkle-deep); }
.mthd .faq-a{ font-family: var(--font-serif); font-size: 18px; line-height: 1.65; color: var(--ink-soft); margin: 18px 0 0 0; max-width: 720px; }
.mthd .faq-a em{ font-style: italic; color: var(--periwinkle-deep); }
.mthd .faq-a strong{ color: var(--ink); font-weight: 600; }
.mthd .cta-hard{ background-color: var(--ink); background-image: linear-gradient(180deg, rgba(11, 20, 38, 0.82) 0%, rgba(11, 20, 38, 0.92) 100%), url('https://www.bavaria-ai.com/wp-content/uploads/2026/06/Bavaria-AI-GEO-Agentur-Berge-Hintergrund.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; color: var(--cream-on-dark); padding: 140px 56px; text-align: center; position: relative; overflow: hidden; }
.mthd .cta-hard-eyebrow{ color: var(--periwinkle-bright); margin-bottom: 32px; display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.mthd .cta-hard-h2{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(40px, 6vw, 80px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 auto 32px; max-width: 980px; }
.mthd .cta-hard-lead{ font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.5; color: rgba(245, 241, 232, 0.8); max-width: 640px; margin: 0 auto 48px; }
.mthd .cta-hard-lead a{ color: var(--periwinkle-bright); text-decoration: underline; text-decoration-color: rgba(123, 136, 212, 0.5); text-underline-offset: 3px; }
.mthd .cta-hard-row{ display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.mthd .btn-cream{ display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: var(--cream-on-dark); color: var(--ink); text-decoration: none; font-family: var(--font-sans); font-size: 15px; font-weight: 500; border-radius: 4px; transition: background 0.15s, color 0.15s, transform 0.15s; }
.mthd .btn-cream:hover{ background: var(--periwinkle-bright); color: var(--cream-on-dark); transform: translateY(-2px); }
.mthd .btn-cream em{ font-style: italic; }
.mthd .btn-ghost{ display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: transparent; color: var(--cream-on-dark); border: 1px solid rgba(245, 241, 232, 0.45); text-decoration: none; font-family: var(--font-sans); font-size: 15px; font-weight: 500; border-radius: 4px; transition: border-color 0.15s, background 0.15s; }
.mthd .btn-ghost:hover{ border-color: var(--cream-on-dark); background: rgba(245, 241, 232, 0.08); }
.mthd .cta-hard-meta{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 241, 232, 0.55); margin-top: 32px; }
.mthd .cta-hard-meta em{ font-family: var(--font-serif); font-style: italic; color: var(--periwinkle-bright); text-transform: none; letter-spacing: 0.02em; font-size: 14px; }
@media (max-width: 1100px){
.mthd .hero, .mthd .trust-bar, .mthd .intro, .mthd .compare, .mthd .section, .mthd .faq, .mthd .cta-hard, .mthd .anecdote, .mthd .dimensions-head, .mthd .dim, .mthd .callout-wrap{ padding-left: 32px; padding-right: 32px; }
.mthd .hero-grid, .mthd .intro-grid, .mthd .compare-grid, .mthd .dim, .mthd .faq-inner, .mthd .section-grid, .mthd .anecdote-grid{ grid-template-columns: 1fr; gap: 48px; }
.mthd .intro-left, .mthd .dim-anchor, .mthd .faq-left, .mthd .section-left{ position: static; }
.mthd .trust-bar-grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
.mthd .trust-stat{ padding: 24px 0; border-right: none; border-bottom: 1px solid var(--rule); }
.mthd .trust-stat:last-child{ border-bottom: none; }
.mthd .dim-roman{ font-size: 96px; }
}
@media (max-width: 720px){
.mthd .hero, .mthd .trust-bar, .mthd .intro, .mthd .compare, .mthd .section, .mthd .faq, .mthd .cta-hard, .mthd .anecdote, .mthd .dimensions-head, .mthd .dim, .mthd .callout-wrap{ padding-left: 24px; padding-right: 24px; }
.mthd .hero{ padding-top: 64px; padding-bottom: 48px; }
.mthd .trust-bar{ padding-top: 56px; padding-bottom: 56px; }
.mthd .trust-bar-grid{ grid-template-columns: 1fr; }
.mthd .compare-side-value{ font-size: 72px; }
.mthd .limits-list .limit{ grid-template-columns: 56px 1fr; gap: 20px; }
.mthd .limits-list .limit::before{ font-size: 36px; }
}
/* ====== 19 · SERVICE-DETAIL-TEMPLATE ======
Geteilt von audit / starter / professional / enterprise / implementation-sprint.
Hero-Grid (2-Spalten mit Snapshot-Card), Deliverables, Process, Pricing-Card,
Fit-Filter, Tier-Compare, Sparkline. Unscoped — echte Shared-Komponenten. */
.hero-grid{ display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: end; margin-bottom: 0; }
.hero-text{ min-width: 0; }
.hero-visual{ min-width: 0; display: flex; justify-content: flex-end; }
.snapshot-card{ background: var(--bg); border: 1px solid var(--ink); padding: 32px; max-width: 420px; width: 100%; display: flex; flex-direction: column; gap: 24px; }
.snapshot-header{ padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.snapshot-eyebrow{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--periwinkle-deep); font-weight: 500; margin-bottom: 6px; }
.snapshot-subline{ font-family: var(--font-serif); font-style: italic; font-size: 13px; line-height: 1.4; color: var(--ink-mute); }
.snapshot-score-value{ font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(72px, 9vw, 104px); line-height: 0.9; color: var(--periwinkle); letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 14px; }
.snapshot-score-of{ font-family: var(--font-mono); font-style: normal; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; }
.snapshot-sparkline{ padding-top: 4px; }
.sparkline-svg{ width: 100%; height: 80px; display: block; overflow: visible; }
.sparkline-line{ fill: none; stroke: var(--periwinkle-deep); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sparkline-dot-start{ fill: var(--ink-mute); }
.sparkline-dot-end{ fill: var(--periwinkle); }
.sparkline-label-start{ font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; fill: var(--ink-mute); font-weight: 500; }
.sparkline-label-end{ font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; fill: var(--periwinkle-deep); font-weight: 600; }
.snapshot-sparkline-meta{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-top: 10px; }
.snapshot-dimensions{ padding-top: 16px; border-top: 1px solid var(--rule); }
.snapshot-dimensions-label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--periwinkle-deep); margin-bottom: 8px; }
.snapshot-dimensions-names{ font-family: var(--font-serif); font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.snapshot-footer{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); padding-top: 14px; border-top: 1px solid var(--rule); }
.intro-eyebrow{ margin-bottom: 24px; }
.intro-h2 em{ font-style: italic; color: var(--periwinkle); }
.intro-body p{ margin: 0 0 22px 0; }
.intro-body p:last-child{ margin: 0; }
.intro-body em{ font-style: italic; color: var(--periwinkle-deep); }
.intro-body strong{ color: var(--ink); font-weight: 600; }
.drop-cap::first-letter{ font-family: var(--font-serif); font-style: italic; font-size: 88px; line-height: 0.85; color: var(--periwinkle); float: left; padding: 8px 12px 0 0; }
.deliv-eyebrow{ margin-bottom: 24px; }
.deliv-h2 em{ font-style: italic; color: var(--periwinkle); }
.deliv-card{ background: var(--bg); border: 1px solid var(--rule); padding: 36px 32px; display: flex; flex-direction: column; gap: 16px; min-height: 280px; }
.deliv-card-h3{ font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
.deliv-card-h3 em{ font-style: italic; color: var(--periwinkle); }
.deliv-card-list{ list-style: none; padding: 0; margin: 0; font-family: var(--font-serif); font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.deliv-card-list li{ padding: 6px 0 6px 20px; position: relative; }
.deliv-card-list li::before{ content: "›"; position: absolute; left: 0; top: 6px; color: var(--periwinkle); font-style: italic; font-size: 14px; }
.deliv-card-list li em{ font-style: italic; color: var(--periwinkle-deep); }
.deliv-card-list li strong{ color: var(--ink); font-weight: 600; }
.deliv-card-meta{ margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.process-eyebrow{ margin-bottom: 24px; }
.process-h2 em{ font-style: italic; color: var(--periwinkle); }
.process-list li{ padding: 32px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 80px 220px 1fr; gap: 40px; align-items: start; }
.process-list li:first-child{ border-top: 1px solid var(--rule); }
.process-num{ font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 48px; line-height: 0.9; color: var(--periwinkle); }
.process-phase{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--periwinkle-deep); padding-top: 14px; }
.process-phase em{ font-family: var(--font-serif); font-style: italic; color: var(--ink-soft); text-transform: none; letter-spacing: normal; font-size: 14px; display: block; margin-top: 4px; }
.process-content h3{ font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: 24px; line-height: 1.25; color: var(--ink); margin: 0 0 12px 0; }
.process-content p strong{ color: var(--ink); font-weight: 600; }
.process-content p em{ font-style: italic; color: var(--periwinkle-deep); }
.pricing-inner{ max-width: 1100px; margin: 0 auto; }
.pricing-eyebrow{ margin-bottom: 24px; color: var(--periwinkle-deep); }
.pricing-eyebrow::before{ background: var(--periwinkle-deep) !important; }
.pricing-h2{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 4.5vw, 52px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 48px 0; }
.pricing-h2 em{ font-style: italic; color: var(--periwinkle); }
.pricing-card{ background: var(--bg); border: 1px solid var(--ink); padding: 56px 48px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: center; }
.pricing-amount{ font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(80px, 11vw, 132px); line-height: 0.9; color: var(--periwinkle); letter-spacing: -0.03em; margin: 0 0 8px 0; }
.pricing-amount-cap{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.pricing-h3{ font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: 28px; line-height: 1.2; color: var(--ink); margin: 0 0 16px 0; }
.pricing-body{ font-family: var(--font-serif); font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 24px 0; }
.pricing-body strong{ color: var(--ink); font-weight: 600; }
.pricing-body em{ font-style: italic; color: var(--periwinkle-deep); }
.pricing-context{ font-family: var(--font-serif); font-style: italic; font-size: 15px; line-height: 1.6; color: var(--ink-mute); margin: 0; padding-top: 20px; border-top: 1px solid var(--rule); }
.pricing-cta-btn{ display: inline-block; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--ink); color: var(--cream-on-dark); padding: 16px 28px; text-decoration: none; border: 1px solid var(--ink); margin: 0 0 28px 0; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.pricing-cta-meta{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin: -16px 0 28px 0; display: block; }
.pricing-cta-meta em{ font-family: var(--font-serif); font-style: italic; color: var(--ink-soft); text-transform: none; letter-spacing: normal; font-size: 12px; }
.tier-compare-eyebrow{ margin-bottom: 24px; }
.tier-compare-h2 em{ font-style: italic; color: var(--periwinkle); }
.tier-compare-table{ width: 100%; border-collapse: collapse; font-family: var(--font-serif); font-size: 15px; line-height: 1.5; }
.tier-compare-table th, .tier-compare-table td{ text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tier-compare-table thead th{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; border-bottom: 1px solid var(--ink); }
.tier-compare-table tbody th{ font-family: var(--font-serif); font-style: italic; color: var(--ink-soft); font-weight: 400; }
.tier-compare-table .col-current{ background: var(--periwinkle-softer); }
.tier-compare-table .col-current-head em{ font-style: italic; color: var(--periwinkle); }
.tier-compare-table em{ font-style: italic; color: var(--periwinkle-deep); }
.tier-compare-table strong{ color: var(--ink); font-weight: 600; }
.tier-compare-foot{ margin-top: 24px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.fit{ background: var(--bg-soft); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 120px 56px; }
.fit-eyebrow{ margin-bottom: 24px; }
.fit-h2 em{ font-style: italic; color: var(--periwinkle); }
.fit-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.fit-col{ padding: 36px 32px; border: 1px solid var(--rule); background: var(--bg); }
.fit-col-label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--periwinkle-deep); margin-bottom: 20px; display: inline-flex; align-items: center; gap: 12px; }
.fit-col.no .fit-col-label{ color: var(--ink-mute); }
.fit-col.no .fit-col-label::before{ background: var(--ink-faint); }
.fit-col h3{ font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.2; margin: 0 0 20px 0; }
.fit-col h3 em{ font-style: italic; color: var(--periwinkle); }
.fit-list{ list-style: none; padding: 0; margin: 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
.fit-list li{ padding: 10px 0; border-bottom: 1px solid var(--rule); }
.fit-list li:last-child{ border-bottom: none; }
.fit-col.no .fit-list li{ color: var(--ink-mute); }
.fit-list em{ font-style: italic; color: var(--periwinkle-deep); }
.fit-list strong{ color: var(--ink); font-weight: 600; }
@media (max-width: 1100px){
.hero-grid{ grid-template-columns: 1fr; gap: 40px; align-items: start; }
.hero-visual{ justify-content: flex-start; }
.snapshot-card{ max-width: 440px; }
.intro-grid, .faq-grid{ grid-template-columns: 1fr; gap: 48px; }
.deliv-grid{ grid-template-columns: 1fr; gap: 16px; }
.deliv-card{ min-height: 0; }
.pricing-card{ grid-template-columns: 1fr; gap: 32px; padding: 40px 32px; }
.fit-grid{ grid-template-columns: 1fr; }
.process-list li{ grid-template-columns: 60px 1fr; gap: 24px; }
.process-phase{ grid-column: 1 / -1; padding-top: 0; padding-left: 84px; margin-top: -8px; }
.tier-compare-table{ font-size: 14px; }
.tier-compare-table th, .tier-compare-table td{ padding: 12px 12px; }
}
@media (max-width: 720px){
.snapshot-card{ padding: 24px; gap: 20px; }
.snapshot-score-value{ font-size: clamp(56px, 14vw, 80px); }
.process-list li{ grid-template-columns: 1fr; gap: 8px; }
.process-phase{ padding-left: 0; }
.tier-compare{ overflow-x: auto; }
.tier-compare-table{ min-width: 640px; }
}
/* Service-Detail Dark-Hero: hero-pricetag auf Cream wenn hero-bg (DECISIONS #022) */
.hero.hero-bg .hero-pricetag em{ color: var(--cream-on-dark); }
.hero.hero-bg .hero-pricetag strong{ color: var(--periwinkle-bright); }
/* hero-grid innerhalb hero-bg auf 1320 konstrainen (hero-inner-Wrapper) */
/* Service-Detail Hero-H1 kleiner als globale .hero-h1 — schmälere Text-Spalte
neben der Snapshot-Card; vermeidet den „zu groß"-Effekt nach Konsolidierung
(Feedback 17.06.2026). Greift nur in .hero-text, nicht auf München/Homepage. */
.hero-text .hero-h1{ font-size: clamp(34px, 4.2vw, 58px); line-height: 1.1; }
/* ============================================================================
bai-blocks.css — Sektion 20 · PREMIUM-BLOCKS (Bavaria AI)
============================================================================
Wiederverwendbare Content-Blocks für neue Pages (Landingpages, Pillars,
Leistungen, Editorial). Präfix `bai-` gegen Theme-Kollisionen.
Benötigt die Design-Tokens aus bavaria-ai.css (Sektion 01).
DEPLOYMENT: Inhalt dieser Datei ans bestehende WP-Custom-CSS ANHÄNGEN
(WP-Admin → Design → Customizer → Zusätzliches CSS, ans Ende).
BLOCKS
------
20.01 · .bai-flow Prozess-Diagramm (Schritte mit Verbindern)
20.02 · .bai-scoreband Score-Verlauf 0–100 mit Markern
20.03 · .bai-versus Vergleich zweispaltig (SEO vs. GEO)
20.04 · .bai-shift Vorher/Nachher-Split mit Big-Values
20.05 · .bai-pullquote Editorial Pull-Quote
20.06 · .bai-testimonials Testimonial-Karten-Reihe
20.07 · .bai-timeline Vertikale Timeline
20.08 · .bai-milestones Horizontale Meilenstein-Leiste
20.09 · .bai-kpi-band Dunkle KPI-Leiste (mit Counter-JS-Hook)
20.10 · .bai-statgrid Helles Stat-Raster mit Hairline-Gittern
20.11 · .bai-deliverables Deliverable-Grid mit typografischem ✓
20.12 · .bai-matrix Vergleichs-/Pricing-Matrix (Mobile → Cards)
20.13 · .bai-cta-inline Schlanker Inline-CTA-Banner
20.14 · .bai-cta-split 50/50-CTA (dunkles Panel + Deliverables)
20.15 · .bai-trustline Typografische Trust-/Referenz-Leiste
20.16 · .bai-accordion Accordion/FAQ (details-basiert, ohne JS)
20.17 · .bai-tabs Tab-Umschalter (benötigt bai-blocks.js)
20.18 · Responsive
============================================================================ */
/* ---------------------------------------------------------------------------
20.00 · Layout-Tokens fuer diese Sektion
--container und --gutter werden von den Blocks vorausgesetzt, waren im
zentralen Stylesheet aber nicht definiert. Ohne sie fallen die betroffenen
Regeln (padding, max-width) auf ihren Initialwert zurueck. Werte folgen der
Bestandskonvention: 1320px Containerbreite, 56px Gutter am Desktop, 24px
mobil (identisch zum clamp, das die Bestandsseiten inline verwenden).
--------------------------------------------------------------------------- */
:root{
--container: 1320px;
--gutter: clamp(24px, 5vw, 56px);
}
/* ====== 20.01 · PROZESS-FLOW ====== */
.bai-flow{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.bai-flow-step{ padding: 36px 32px 40px 0; position: relative;
display: flex; flex-direction: column; gap: 12px; }
.bai-flow-step + .bai-flow-step{ padding-left: 32px; border-left: 1px solid var(--rule); }
.bai-flow-num{ font-family: var(--font-serif); font-style: italic; font-size: 44px;
line-height: 1; color: var(--periwinkle); letter-spacing: -0.02em; }
.bai-flow-tag,
.bai-definition-type{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-mute); }
.bai-flow-h3 em{ font-style: italic; color: var(--periwinkle-deep); }
.bai-flow-step::after{ content: "→"; position: absolute; right: -9px; top: 42px;
font-family: var(--font-serif); font-style: italic; font-size: 18px;
color: var(--periwinkle); background: var(--bg); padding: 2px 0; z-index: 1; }
.bai-flow-step:last-child::after{ content: none; }
.bai-flow-step.resultat{ background: var(--periwinkle-softer); padding-right: 28px;
padding-left: 32px; border-left: 1px solid var(--periwinkle-deep); }
/* ====== 20.02 · SCOREBAND ====== */
.bai-scoreband{ border: 1px solid var(--rule-strong); background: var(--bg);
padding: 48px 48px 40px; }
.bai-scoreband-head{ display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 104px; gap: 24px; flex-wrap: wrap; }
.bai-scoreband-claim,
.bai-chart-claim{ font-family: var(--font-serif); font-style: italic; font-size: 17px;
color: var(--ink-soft); margin: 0; }
.bai-scoreband-claim em{ color: var(--periwinkle-deep); }
.bai-scoreband-track{ position: relative; height: 2px; background: var(--rule);
margin: 0 8px; }
.bai-scoreband-fill{ position: absolute; top: 0; bottom: 0;
background: var(--periwinkle); }
/* Marker = 16px-Tick, der die Linie kreuzt; Wert absolut darüber, Caption absolut darunter */
.bai-scoreband-marker{ position: absolute; top: -7px; transform: translateX(-50%);
width: 1px; height: 16px; background: var(--rule-strong); }
.bai-scoreband-marker.is-to{ background: var(--periwinkle); }
.bai-scoreband-marker-value{ position: absolute; bottom: calc(100% + 12px); left: 50%;
transform: translateX(-50%); white-space: nowrap;
font-family: var(--font-serif); font-style: italic; font-size: 48px; line-height: 1;
color: var(--ink-faint); letter-spacing: -0.02em; }
.bai-scoreband-marker.is-to .bai-scoreband-marker-value{ color: var(--periwinkle); }
.bai-scoreband-marker-cap{ position: absolute; top: calc(100% + 12px); left: 50%;
transform: translateX(-50%); white-space: nowrap;
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--ink-mute); }
.bai-scoreband-foot{ margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--rule);
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-mute); }
/* ====== 20.03 · VERSUS (zweispaltiger Vergleich) ====== */
.bai-versus{ display: grid; grid-template-columns: 1fr 1fr; gap: 0;
border: 1px solid var(--rule-strong); background: var(--bg); }
.bai-versus-col{ padding: 44px 44px 40px; }
.bai-versus-col + .bai-versus-col{ border-left: 1px solid var(--rule-strong); }
.bai-versus-col.is-geo{ background: var(--periwinkle-softer); }
.bai-versus-col-label{ font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute);
margin-bottom: 8px; }
.bai-versus-col-h3{ font-family: var(--font-serif); font-weight: 400; font-size: 30px;
line-height: 1.1; color: var(--ink); margin: 0 0 28px 0; }
.bai-versus-col-h3 em{ font-style: italic; color: var(--periwinkle); }
.bai-versus-list li{ padding: 16px 0; border-bottom: 1px solid var(--rule);
font-family: var(--font-serif); font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.bai-versus-col.is-geo .bai-versus-list li{ border-bottom-color: var(--periwinkle-soft); }
.bai-versus-list li:last-child{ border-bottom: none; }
.bai-versus-list li strong{ display: block; font-family: var(--font-mono); font-size: 9.5px;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
font-weight: 600; margin-bottom: 4px; }
.bai-versus-list li em{ font-style: italic; color: var(--periwinkle-deep); }
/* ====== 20.04 · SHIFT (Vorher/Nachher) ====== */
.bai-shift{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
border: 1px solid var(--rule-strong); background: var(--bg); }
.bai-shift-side{ padding: 56px 48px; text-align: center; }
.bai-shift-side.is-after{ background: var(--periwinkle-softer); }
.bai-shift-arrow{ display: flex; align-items: center; padding: 0 8px;
font-family: var(--font-serif); font-style: italic; font-size: 32px;
color: var(--ink-faint); border-left: 1px solid var(--rule);
border-right: 1px solid var(--rule); }
.bai-shift-label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-mute); margin-bottom: 24px; }
.bai-shift-value{ font-family: var(--font-serif); font-style: italic; font-weight: 400;
font-size: clamp(64px, 9vw, 112px); line-height: 0.95; letter-spacing: -0.03em;
color: var(--ink-faint); margin: 0 0 20px 0; }
.bai-shift-side.is-after .bai-shift-value{ color: var(--periwinkle); }
.bai-shift-claim{ font-family: var(--font-serif); font-size: 17px; line-height: 1.5;
color: var(--ink); margin: 0 0 12px 0; }
.bai-shift-claim em{ font-style: italic; color: var(--periwinkle-deep); }
/* ====== 20.05 · PULL-QUOTE ====== */
.bai-pullquote{ max-width: 980px; margin-inline: auto; text-align: center;
padding: 72px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.bai-pullquote blockquote{ margin: 0; font-family: var(--font-serif); font-style: italic;
font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.3;
letter-spacing: -0.02em; color: var(--ink); }
.bai-pullquote blockquote em{ color: var(--periwinkle); }
.bai-pullquote figcaption{ margin-top: 32px; font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
display: inline-flex; align-items: center; gap: 14px; }
.bai-pullquote figcaption em,
.bai-cta-split-price em{ font-family: var(--font-serif); font-style: italic;
color: var(--periwinkle-deep); text-transform: none; letter-spacing: normal; font-size: 14px; }
/* Variante: linksbündig mit Seitenlinie */
.bai-pullquote.is-aside{ text-align: left; border-top: none; border-bottom: none;
border-left: 3px solid var(--periwinkle); padding: 12px 0 12px 40px; max-width: 820px;
margin-inline: 0; }
.bai-pullquote.is-aside blockquote{ font-size: clamp(24px, 2.8vw, 32px); }
.bai-pullquote.is-aside figcaption{ margin-top: 24px; }
/* ====== 20.06 · TESTIMONIALS ====== */
.bai-testimonial{ background: var(--bg); border: 1px solid var(--rule);
padding: 36px 32px; display: flex; flex-direction: column; gap: 20px;
transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.bai-testimonial:hover{ border-color: var(--periwinkle); transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(11, 20, 38, 0.08); }
.bai-testimonial.featured{ border-color: var(--ink); background: var(--periwinkle-softer); }
.bai-testimonial-mark{ font-family: var(--font-serif); font-style: italic; font-size: 44px;
line-height: 0.5; color: var(--periwinkle); }
.bai-testimonial blockquote{ margin: 0; font-family: var(--font-serif); font-style: italic;
font-size: 18px; line-height: 1.55; color: var(--ink); }
.bai-testimonial blockquote em{ color: var(--periwinkle-deep); }
.bai-testimonial-foot{ margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule);
display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bai-testimonial-name{ font-family: var(--font-serif); font-size: 16px; color: var(--ink); }
.bai-testimonial-role{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-mute); text-align: right; }
/* ====== 20.07 · TIMELINE (vertikal) ====== */
.bai-timeline{ list-style: none; padding: 0; margin: 0; max-width: 820px; }
.bai-timeline li{ position: relative; padding: 0 0 48px 56px; }
.bai-timeline li::before{ content: ""; position: absolute; left: 8px; top: 10px; bottom: -10px;
width: 1px; background: var(--rule-strong); }
.bai-timeline li:last-child::before{ content: none; }
.bai-timeline li::after{ content: ""; position: absolute; left: 4px; top: 6px;
width: 9px; height: 9px; border-radius: 50%; background: var(--bg);
border: 1px solid var(--periwinkle); }
.bai-timeline li.is-now::after{ background: var(--periwinkle); }
.bai-timeline-date{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--periwinkle-deep); font-weight: 600;
margin-bottom: 10px; }
.bai-timeline-h3{ font-family: var(--font-serif); font-weight: 400; font-size: 24px;
line-height: 1.2; color: var(--ink); margin: 0 0 10px 0; }
.bai-timeline-h3 em{ font-style: italic; color: var(--periwinkle); }
.bai-timeline-body{ font-family: var(--font-serif); font-size: 16px; line-height: 1.6;
color: var(--ink-soft); margin: 0; max-width: 640px; }
.bai-timeline-body em{ font-style: italic; color: var(--periwinkle-deep); }
/* ====== 20.08 · MILESTONES (horizontal) ====== */
.bai-milestones{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
position: relative; padding-top: 28px; }
.bai-milestones::before{ content: ""; position: absolute; top: 4px; left: 4px; right: 25%;
height: 1px; background: var(--rule-strong); }
.bai-milestone{ position: relative; }
.bai-milestone::before{ content: ""; position: absolute; top: -28px; left: 0;
width: 9px; height: 9px; border-radius: 50%; background: var(--bg);
border: 1px solid var(--periwinkle); }
.bai-milestone.is-done::before{ background: var(--periwinkle); }
.bai-milestone-phase{ font-family: var(--font-serif); font-style: italic; font-size: 24px;
color: var(--periwinkle); margin-bottom: 8px; }
.bai-milestone-h4{ font-family: var(--font-serif); font-weight: 400; font-size: 19px;
line-height: 1.25; color: var(--ink); margin: 0 0 8px 0; }
.bai-milestone-meta{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--ink-mute); }
/* ====== 20.09 · KPI-BAND (dunkel) ====== */
.bai-kpi-band{ background-color: var(--ink); color: var(--cream-on-dark);
padding: 88px var(--gutter); position: relative; overflow: hidden; }
.bai-kpi-band-inner{ max-width: var(--container); margin: 0 auto; position: relative;
z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.bai-kpi,
.bai-hero-peak-stat{ padding: 0 40px; border-left: 1px solid rgba(245, 241, 232, 0.16); }
.bai-kpi:first-child,
.bai-image-stats-cell:first-child,
.bai-hero-peak-stat:first-child{ border-left: none; padding-left: 0; }
.bai-kpi-value{ font-family: var(--font-serif); font-style: italic; font-weight: 400;
font-size: clamp(56px, 6vw, 80px); line-height: 0.95; letter-spacing: -0.03em;
color: var(--periwinkle-bright); margin-bottom: 16px; }
.bai-kpi-value sup{ font-size: 0.4em; vertical-align: 0.7em; letter-spacing: 0; }
.bai-kpi-value .arrow{ font-size: 0.5em; color: rgba(245, 241, 232, 0.4); margin: 0 4px;
font-style: normal; vertical-align: 0.2em; }
.bai-kpi-label{ font-family: var(--font-serif); font-size: 15px; line-height: 1.45;
color: rgba(245, 241, 232, 0.82); margin: 0 0 12px 0; }
.bai-kpi-source{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
text-transform: uppercase; color: rgba(245, 241, 232, 0.5); }
/* ====== 20.10 · STATGRID (hell, Hairline-Gitter) ====== */
.bai-statgrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
background: var(--rule-strong); border: 1px solid var(--rule-strong); }
.bai-statgrid-cell{ background: var(--bg); padding: 44px 44px 40px; }
.bai-statgrid-cell.accent{ background: var(--periwinkle-softer); }
.bai-statgrid-value{ font-family: var(--font-serif); font-style: italic; font-weight: 400;
font-size: clamp(48px, 5.5vw, 72px); line-height: 0.95; letter-spacing: -0.03em;
color: var(--periwinkle); margin-bottom: 14px; }
.bai-statgrid-value sup{ font-size: 0.4em; vertical-align: 0.7em; color: var(--ink-mute); }
.bai-statgrid-label{ font-family: var(--font-serif); font-size: 16px; line-height: 1.5;
color: var(--ink); margin: 0 0 10px 0; max-width: 340px; }
.bai-statgrid-label em{ font-style: italic; color: var(--periwinkle-deep); }
/* ====== 20.11 · DELIVERABLES-GRID ====== */
.bai-deliverables{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px;
border-top: 1px solid var(--ink); }
.bai-deliverable{ display: grid; grid-template-columns: auto 1fr; gap: 20px;
padding: 28px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.bai-deliverable-check{ font-family: var(--font-serif); font-style: italic; font-size: 24px;
line-height: 1; color: var(--periwinkle); }
.bai-deliverable-h4{ font-family: var(--font-serif); font-weight: 400; font-size: 20px;
line-height: 1.3; color: var(--ink); margin: 0 0 6px 0; }
.bai-deliverable-h4 em{ font-style: italic; color: var(--periwinkle-deep); }
/* ====== 20.12 · MATRIX (Vergleichs-/Pricing-Tabelle) ====== */
.bai-matrix{ width: 100%; border-collapse: collapse; font-family: var(--font-serif);
font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
.bai-matrix th{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--ink-mute); font-weight: 600; text-align: left;
padding: 18px 24px; border-bottom: 1px solid var(--rule-strong); background: var(--bg-soft); }
.bai-matrix th.featured{ color: var(--periwinkle-deep); background: var(--periwinkle-soft);
border-top: 2px solid var(--periwinkle-deep); }
.bai-matrix th .bai-matrix-tier{ display: block; font-family: var(--font-serif);
font-style: italic; font-size: 20px; color: var(--ink); text-transform: none;
letter-spacing: -0.01em; margin-top: 6px; font-weight: 400; }
.bai-matrix th.featured .bai-matrix-tier{ color: var(--periwinkle-deep); }
.bai-matrix tr:last-child td{ border-bottom: none; }
.bai-matrix td:first-child{ font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); padding-top: 22px; }
.bai-matrix td.featured{ background: var(--periwinkle-softer); color: var(--ink); }
.bai-matrix td em{ font-style: italic; color: var(--periwinkle-deep); }
.bai-matrix .bai-matrix-price{ font-family: var(--font-serif); font-style: italic;
font-size: 21px; color: var(--ink); }
.bai-matrix .bai-matrix-price small{ font-family: var(--font-mono); font-style: normal;
font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute);
display: block; margin-top: 4px; }
.bai-matrix .na{ color: var(--ink-faint); }
/* ====== 20.13 · CTA-INLINE (schlanker Banner) ====== */
.bai-cta-inline{ display: flex; justify-content: space-between; align-items: center;
gap: 40px; border: 1px solid var(--ink); background: var(--bg); padding: 36px 44px; }
.bai-cta-inline-h3{ font-family: var(--font-serif); font-weight: 400; font-size: 26px;
line-height: 1.25; color: var(--ink); margin: 0 0 6px 0; }
.bai-cta-inline-h3 em{ font-style: italic; color: var(--periwinkle); }
.bai-cta-inline .btn-primary{ white-space: nowrap; flex-shrink: 0; }
/* ====== 20.14 · CTA-SPLIT (50/50) ====== */
.bai-cta-split{ display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
border: 1px solid var(--ink); overflow: hidden; }
.bai-cta-split-dark{ background-color: var(--ink); color: var(--cream-on-dark);
padding: 64px 56px; position: relative; overflow: hidden; }
.bai-cta-split-dark::before{ content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse at 20% 20%, rgba(91, 106, 191, 0.22) 0%, rgba(11, 20, 38, 0) 65%);
pointer-events: none; }
.bai-cta-split-dark > *,
.bai-answer > *,
.bai-image-card-content{ position: relative; z-index: 1; }
.bai-cta-split-eyebrow{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--periwinkle-bright); margin-bottom: 24px;
display: inline-flex; align-items: center; gap: 12px; }
.bai-cta-split-h2{ font-family: var(--font-serif); font-weight: 400;
font-size: clamp(32px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.02em;
color: var(--cream-on-dark); margin: 0 0 20px 0; }
.bai-cta-split-lead{ font-family: var(--font-serif); font-style: italic; font-size: 18px;
line-height: 1.55; color: rgba(245, 241, 232, 0.78); margin: 0; }
.bai-cta-split-light{ background: var(--periwinkle-softer); padding: 64px 56px;
display: flex; flex-direction: column; gap: 0; }
.bai-cta-split-label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--periwinkle-deep); font-weight: 600;
margin-bottom: 20px; }
.bai-cta-split-list{ list-style: none; padding: 0; margin: 0 0 32px 0; }
.bai-cta-split-list li{ padding: 12px 0 12px 32px; position: relative;
font-family: var(--font-serif); font-size: 16.5px; line-height: 1.5; color: var(--ink);
border-bottom: 1px solid var(--periwinkle-soft); }
.bai-cta-split-list li:last-child{ border-bottom: none; }
.bai-cta-split-list li::before{ content: "✓"; position: absolute; left: 0; top: 10px;
font-family: var(--font-serif); font-style: italic; font-size: 19px;
color: var(--periwinkle); }
.bai-cta-split-list li em{ font-style: italic; color: var(--periwinkle-deep); }
.bai-cta-split-actions{ margin-top: auto; display: flex; align-items: center; gap: 24px;
flex-wrap: wrap; }
/* ====== 20.15 · TRUSTLINE ====== */
.bai-trustline{ border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
padding: 28px 0; display: flex; align-items: baseline; gap: 20px 40px; flex-wrap: wrap;
justify-content: center; }
.bai-trustline-label,
.bai-ring-cap{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-mute); }
.bai-trustline-item{ font-family: var(--font-serif); font-style: italic; font-size: 19px;
color: var(--ink-soft); transition: color 160ms ease; }
.bai-trustline-item:hover{ color: var(--periwinkle-deep); }
.bai-trustline-sep{ color: var(--rule-strong); font-family: var(--font-serif); }
/* Variante: dunkel (für Platzierung nach Hero-BG) */
.bai-trustline.on-dark{ background: var(--ink); border-color: rgba(245, 241, 232, 0.14);
padding-inline: var(--gutter); }
.bai-trustline.on-dark .bai-trustline-label{ color: rgba(245, 241, 232, 0.5); }
.bai-trustline.on-dark .bai-trustline-item{ color: rgba(245, 241, 232, 0.75); }
.bai-trustline.on-dark .bai-trustline-item:hover{ color: var(--periwinkle-bright); }
.bai-trustline.on-dark .bai-trustline-sep{ color: rgba(245, 241, 232, 0.25); }
/* ====== 20.16 · ACCORDION (details-basiert, kein JS) ====== */
.bai-accordion{ border-top: 1px solid var(--ink); max-width: 880px; }
.bai-accordion details{ border-bottom: 1px solid var(--rule); }
.bai-accordion details:last-child{ border-bottom: 1px solid var(--ink); }
.bai-accordion summary{ display: flex; justify-content: space-between;
align-items: baseline; gap: 24px; padding: 26px 0; cursor: pointer; list-style: none; }
.bai-accordion summary::-webkit-details-marker{ display: none; }
.bai-accordion-q{ font-family: var(--font-serif); font-size: 21px; line-height: 1.35;
color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.bai-accordion-q em{ font-style: italic; color: var(--periwinkle-deep); }
.bai-accordion-toggle{ font-family: var(--font-serif); font-style: italic; font-size: 26px;
line-height: 1; color: var(--periwinkle); transition: transform 320ms ease, color 320ms ease;
flex-shrink: 0; min-width: 26px; text-align: right; }
.bai-accordion details[open] .bai-accordion-toggle{ transform: rotate(135deg);
color: var(--periwinkle-deep); }
.bai-accordion-a{ font-family: var(--font-serif); font-size: 17px; line-height: 1.65;
color: var(--ink-soft); margin: 0; padding: 0 48px 28px 0; max-width: 720px; }
.bai-accordion-a em{ font-style: italic; color: var(--periwinkle-deep); }
.bai-accordion-a strong{ color: var(--ink); font-weight: 600; }
/* ====== 20.17 · TABS (benötigt bai-blocks.js) ====== */
.bai-tabs-nav{ display: flex; gap: 36px; border-bottom: 1px solid var(--rule-strong);
flex-wrap: wrap; }
.bai-tab-btn{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--ink-mute); background: none; border: none;
padding: 0 0 16px 0; cursor: pointer; position: relative;
transition: color 160ms ease; }
.bai-tab-btn:hover{ color: var(--ink); }
.bai-tab-btn.active::after{ content: ""; position: absolute; left: 0; right: 0;
bottom: -1px; height: 2px; background: var(--periwinkle); }
.bai-tab-panel{ display: none; padding-top: 40px; }
.bai-tab-panel.active{ display: block; }
.bai-tab-panel-grid{ display: grid; grid-template-columns: 1fr 1.6fr; gap: 72px;
align-items: start; }
.bai-tab-panel-h3{ font-family: var(--font-serif); font-weight: 400;
font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.02em;
color: var(--ink); margin: 0; }
.bai-tab-panel-h3 em{ font-style: italic; color: var(--periwinkle); }
.bai-tab-panel-body{ font-family: var(--font-serif); font-size: 17px; line-height: 1.65;
color: var(--ink-soft); }
.bai-tab-panel-body p{ margin: 0 0 20px 0; }
.bai-tab-panel-body p:last-child{ margin: 0; }
.bai-tab-panel-body em{ font-style: italic; color: var(--periwinkle-deep); }
.bai-tab-panel-body strong{ color: var(--ink); font-weight: 600; }
/* ====== 20.18 · RESPONSIVE ====== */
@media (max-width: 1100px){
.bai-flow{ grid-template-columns: 1fr 1fr; border-bottom: none; }
.bai-flow-step{ border-bottom: 1px solid var(--rule); }
.bai-flow-step:nth-child(odd),
.bai-kpi:nth-child(odd){ padding-left: 0; border-left: none; }
.bai-flow-step:nth-child(even){ padding-left: 32px; }
.bai-flow-step::after{ content: none; }
.bai-kpi-band-inner{ grid-template-columns: 1fr 1fr; gap: 40px 0; }
.bai-milestones{ grid-template-columns: 1fr 1fr; gap: 48px 32px; }
.bai-milestones::before{ content: none; }
.bai-milestone::before{ position: static; display: block; margin-bottom: 14px; }
.bai-deliverables{ grid-template-columns: 1fr; gap: 0; }
.bai-cta-split{ grid-template-columns: 1fr; }
.bai-testimonials{ grid-template-columns: 1fr; }
.bai-versus{ grid-template-columns: 1fr; }
.bai-versus-col + .bai-versus-col{ border-left: none; border-top: 1px solid var(--rule-strong); }
}
@media (max-width: 720px){
.bai-flow{ grid-template-columns: 1fr; }
.bai-flow-step{ padding-left: 0 !important; border-left: none !important; }
.bai-scoreband{ padding: 32px 24px 28px; }
.bai-scoreband-head{ margin-bottom: 80px; }
.bai-scoreband-foot{ margin-top: 56px; }
.bai-scoreband-marker-value{ font-size: 32px; }
.bai-scoreband-marker-cap{ font-size: 8.5px; }
.bai-shift{ grid-template-columns: 1fr; }
.bai-shift-arrow{ border: none; border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule); justify-content: center; padding: 12px 0;
transform: rotate(90deg); max-width: 60px; margin: 0 auto; border: none; }
.bai-shift-side{ padding: 40px 24px; }
.bai-pullquote{ padding: 48px 0; }
.bai-pullquote.is-aside{ padding: 8px 0 8px 24px; }
.bai-kpi-band{ padding-top: 64px; padding-bottom: 64px; }
.bai-kpi-band-inner{ grid-template-columns: 1fr; gap: 36px; }
.bai-kpi{ border-left: none; padding: 0; }
.bai-statgrid{ grid-template-columns: 1fr; }
.bai-statgrid-cell{ padding: 32px 28px; }
.bai-milestones{ grid-template-columns: 1fr; }
.bai-cta-inline{ flex-direction: column; align-items: flex-start; gap: 24px;
padding: 28px 24px; }
.bai-cta-split-dark, .bai-cta-split-light{ padding: 44px 28px; }
.bai-trustline{ gap: 12px 24px; }
.bai-trustline-item{ font-size: 17px; }
.bai-tabs-nav{ gap: 24px; }
/* Matrix: Cards auf Mobile (data-label-driven, analog Synonyms-Table) */
.bai-matrix-wrap{ border: none; background: transparent; }
.bai-matrix{ display: block; }
.bai-matrix thead{ display: none; }
.bai-matrix tbody{ display: block; }
.bai-matrix tr:last-child{ margin-bottom: 0; }
.bai-matrix td{ display: block; padding: 0; border: none; margin-bottom: 14px;
font-size: 14.5px; }
.bai-matrix td:last-child{ margin-bottom: 0; }
.bai-matrix td.featured{ background: transparent; }
.bai-matrix td:first-child{ font-size: 15px; padding-bottom: 14px;
border-bottom: 1px solid var(--rule); margin-bottom: 14px; color: var(--ink); }
}
/* ============================================================================
20.19 – 20.24 · VISUAL-BLOCKS (Charts + dekorative Elemente)
Bespoke inline SVG in Mono/Serif, ein Akzent, Hairlines. Scroll-Reveal über
[data-animate] + .in-view (bai-blocks.js); ohne JS stehen alle Endzustände.
============================================================================ */
/* ====== 20.19 · LINE-CHART (.bai-chart) ====== */
.bai-chart{ border: 1px solid var(--rule-strong); background: var(--bg);
padding: 44px 44px 36px; }
.bai-chart-head{ display: flex; justify-content: space-between; align-items: baseline;
gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.bai-chart-claim em{ color: var(--periwinkle-deep); }
.bai-chart svg{ display: block; width: 100%; height: auto; }
.bai-chart svg text{ font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.1em; fill: var(--ink-mute); }
.bai-chart svg text.serif{ font-family: var(--font-serif); font-style: italic;
letter-spacing: -0.02em; fill: var(--periwinkle); }
.bai-chart svg .grid{ stroke: var(--rule); stroke-width: 1; }
.bai-chart svg .area{ fill: var(--periwinkle-soft); opacity: 0;
transition: opacity 900ms ease 500ms; }
.bai-chart svg .line{ fill: none; stroke: var(--periwinkle); stroke-width: 2;
stroke-dasharray: 1400; stroke-dashoffset: 1400;
transition: stroke-dashoffset 1400ms ease; }
.bai-chart svg .dot{ fill: var(--bg); stroke: var(--periwinkle); stroke-width: 1.5;
opacity: 0; transition: opacity 400ms ease 900ms; }
.bai-chart svg .dot.end{ fill: var(--periwinkle); }
.bai-chart svg .endlabel{ opacity: 0; transition: opacity 400ms ease 1100ms; }
.bai-chart.in-view svg .line{ stroke-dashoffset: 0; }
.bai-chart.in-view svg .area,
.bai-chart.in-view svg .dot,
.bai-chart.in-view svg .endlabel{ opacity: 1; }
.bai-chart.in-view svg .area{ opacity: 0.7; }
.bai-chart-foot{ margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule);
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-mute); }
/* ====== 20.20 · BAR-CHART (.bai-bars) ====== */
.bai-bars{ border-top: 1px solid var(--ink); padding-top: 8px; }
.bai-bars-row{ display: grid; grid-template-columns: 200px 1fr 90px; gap: 28px;
align-items: center; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.bai-bars-name{ font-family: var(--font-serif); font-size: 18px; color: var(--ink); }
.bai-bars-name .roman{ font-style: italic; color: var(--periwinkle); margin-right: 10px; }
.bai-bars-name small{ display: block; font-family: var(--font-mono); font-size: 9px;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-top: 3px; }
.bai-bars-track{ height: 8px; background: var(--periwinkle-softer);
border: 1px solid var(--periwinkle-soft); position: relative; }
.bai-bars-fill{ position: absolute; inset: 0; right: auto; background: var(--periwinkle);
width: 0; transition: width 1100ms cubic-bezier(0.22, 1, 0.36, 1); }
.bai-bars.in-view .bai-bars-fill{ width: var(--w, 50%); }
.bai-bars-value{ font-family: var(--font-serif); font-style: italic; font-size: 24px;
color: var(--periwinkle); text-align: right; letter-spacing: -0.02em; }
.bai-bars-foot{ padding-top: 18px; font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
/* ====== 20.21 · SCORE-RING (.bai-ring) ====== */
.bai-ring{ display: grid; grid-template-columns: auto 1fr; gap: 72px; align-items: center;
border: 1px solid var(--rule-strong); background: var(--bg); padding: 56px 64px; }
.bai-ring-figure{ position: relative; width: 240px; height: 240px; flex-shrink: 0; }
.bai-ring-figure svg{ display: block; width: 100%; height: 100%;
transform: rotate(-90deg); }
.bai-ring-figure .track{ fill: none; stroke: var(--periwinkle-soft); stroke-width: 6; }
.bai-ring-figure .value{ fill: none; stroke: var(--periwinkle); stroke-width: 6;
stroke-linecap: butt; stroke-dasharray: 628.3; stroke-dashoffset: 628.3;
transition: stroke-dashoffset 1400ms cubic-bezier(0.22, 1, 0.36, 1); }
.bai-ring.in-view .value{ stroke-dashoffset: var(--offset, 50.3); }
.bai-ring-center{ position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 6px; }
.bai-ring-score{ font-family: var(--font-serif); font-style: italic; font-size: 72px;
line-height: 1; color: var(--periwinkle); letter-spacing: -0.03em; }
.bai-ring-body .bai-ring-label{ font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--periwinkle-deep);
font-weight: 600; margin-bottom: 16px; }
.bai-ring-h3{ font-family: var(--font-serif); font-weight: 400;
font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.02em;
color: var(--ink); margin: 0 0 16px 0; }
.bai-ring-h3 em{ font-style: italic; color: var(--periwinkle); }
.bai-ring-text{ font-family: var(--font-serif); font-size: 17px; line-height: 1.65;
color: var(--ink-soft); margin: 0 0 20px 0; max-width: 560px; }
.bai-ring-text em{ font-style: italic; color: var(--periwinkle-deep); }
/* ====== 20.22 · ENGINE-ORBIT (.bai-orbit) ====== */
.bai-orbit{ border: 1px solid var(--rule-strong); background: var(--bg-soft);
padding: 48px 48px 40px; }
.bai-orbit-head{ text-align: center; margin-bottom: 8px; }
.bai-orbit svg{ display: block; width: 100%; max-width: 760px; height: auto;
margin: 0 auto; }
.bai-orbit svg .ring{ fill: none; stroke: var(--rule-strong); stroke-width: 1;
stroke-dasharray: 2 7; }
.bai-orbit svg .link{ stroke: var(--periwinkle); stroke-width: 1; opacity: 0.55; }
.bai-orbit svg .node{ fill: var(--periwinkle); }
.bai-orbit svg .node-halo{ fill: none; stroke: var(--periwinkle); stroke-width: 1;
opacity: 0.35; }
.bai-orbit svg .center-box{ fill: var(--bg); stroke: var(--ink); stroke-width: 1; }
.bai-orbit svg text{ font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.12em; fill: var(--ink-mute); }
.bai-orbit svg text.engine{ font-family: var(--font-serif); font-style: italic;
font-size: 17px; letter-spacing: -0.01em; fill: var(--ink); }
.bai-orbit svg text.center{ fill: var(--ink); font-size: 12px; font-weight: 600;
letter-spacing: 0.06em; }
.bai-orbit-foot{ text-align: center; margin-top: 8px; font-family: var(--font-mono);
font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-mute); }
/* ====== 20.23 · DISPLAY-STATEMENT (.bai-display) ====== */
.bai-display{ text-align: center; padding: 96px 0;
border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.bai-display-eyebrow{ font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute);
margin-bottom: 40px; }
.bai-display-line{ font-family: var(--font-serif); font-weight: 400;
font-size: clamp(64px, 11vw, 168px); line-height: 1.02; letter-spacing: -0.03em;
color: var(--ink); margin: 0; }
.bai-display-line.ghost{ color: transparent;
-webkit-text-stroke: 1px var(--rule-strong); }
.bai-display-line.accent{ font-style: italic; color: var(--periwinkle); }
.bai-display-source{ margin-top: 44px; font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
display: inline-flex; align-items: center; gap: 14px; }
/* ====== 20.24 · ANSWER-VISUAL (.bai-answer) ====== */
.bai-answer{ background-color: var(--ink); color: var(--cream-on-dark);
border: 1px solid var(--ink); padding: 56px; position: relative; overflow: hidden;
max-width: 880px; }
.bai-answer::before{ content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse at 80% 0%, rgba(91, 106, 191, 0.25) 0%, rgba(11, 20, 38, 0) 60%);
pointer-events: none; }
.bai-answer-meta{ display: flex; justify-content: space-between; align-items: baseline;
gap: 24px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
text-transform: uppercase; color: rgba(245, 241, 232, 0.5); margin-bottom: 28px;
padding-bottom: 20px; border-bottom: 1px dashed rgba(245, 241, 232, 0.2); }
.bai-answer-meta b,
.bai-answer-sources b,
.bai-hero-ledger-card-meta b{ color: var(--periwinkle-bright); font-weight: 500; }
.bai-answer-prompt{ font-family: var(--font-mono); font-size: 14px; line-height: 1.6;
color: rgba(245, 241, 232, 0.7); margin: 0 0 28px 0; }
.bai-answer-prompt::before,
.bai-hero-ledger-card-prompt::before{ content: "❯ "; color: var(--periwinkle-bright); }
.bai-answer-text{ font-family: var(--font-serif); font-size: 20px; line-height: 1.65;
color: var(--cream-on-dark); margin: 0; }
.bai-answer-text .cite,
.bai-hero-ledger-card-text .cite{ background: rgba(91, 106, 191, 0.28);
border-bottom: 1px solid var(--periwinkle-bright); padding: 1px 4px;
font-style: italic; color: #FFFFFF; }
.bai-answer-text .src{ color: var(--periwinkle-bright); font-family: var(--font-mono);
font-size: 11px; vertical-align: super; padding-left: 2px; font-style: normal; }
.bai-answer-sources{ margin-top: 28px; padding-top: 20px;
border-top: 1px dashed rgba(245, 241, 232, 0.2); font-family: var(--font-mono);
font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(245, 241, 232, 0.5); }
/* ====== 20.25 · IMAGE-PANELS (.bai-image-panel / .bai-image-band) ======
Full-Bleed-Hintergrundbilder mit Navy-Gradient-Overlay, analog .hero.hero-bg.
Bild pro Instanz über Inline-Custom-Property setzen:
style="--bai-image: url('https://…')"
Quellen: royalty-free + attribution-free (Unsplash-/Pixabay-Lizenz).
Alle Bilder laufen durch denselben CI-Tint (Navy-Periwinkle-Layer, analog 2g),
damit beliebige Motive einheitlich im Markenklang liegen.
Für Live-Deploy: Bild in die WP-Media-Library laden und die URL ersetzen. */
.bai-image-panel{ position: relative; background-color: #0A1020;
background-image:
linear-gradient(to bottom, rgba(10, 16, 32, 0.5) 0%, rgba(10, 16, 32, 0.72) 55%, rgba(10, 16, 32, 0.92) 100%),
linear-gradient(rgba(46, 58, 120, 0.35), rgba(46, 58, 120, 0.35)),
var(--bai-image);
background-size: cover; background-position: center; background-repeat: no-repeat;
color: var(--cream-on-dark); text-align: center;
padding: 160px var(--gutter); overflow: hidden; }
.bai-image-panel-eyebrow,
.bai-hero-peak-eyebrow{ font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.2em; text-transform: uppercase; color: var(--periwinkle-bright);
margin-bottom: 36px; display: inline-flex; align-items: center; gap: 14px; }
.bai-image-panel-statement{ font-family: var(--font-serif); font-weight: 400;
font-size: clamp(40px, 5.5vw, 76px); line-height: 1.08; letter-spacing: -0.025em;
color: var(--cream-on-dark); margin: 0 auto; max-width: 1000px; }
.bai-image-panel-source{ margin-top: 40px; font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245, 241, 232, 0.55); }
.bai-image-panel.align-left{ text-align: left; }
.bai-image-panel.align-left .bai-image-panel-statement{ margin: 0; max-width: 820px; }
.bai-image-band{ position: relative; background-color: #0A1020;
background-image:
linear-gradient(to right, rgba(10, 16, 32, 0.92) 0%, rgba(10, 16, 32, 0.7) 55%, rgba(10, 16, 32, 0.45) 100%),
linear-gradient(rgba(46, 58, 120, 0.4), rgba(46, 58, 120, 0.4)),
var(--bai-image);
background-size: cover; background-position: center 40%; background-repeat: no-repeat;
color: var(--cream-on-dark); padding: 88px var(--gutter); }
.bai-image-band-inner{ max-width: var(--container); margin: 0 auto;
display: flex; justify-content: space-between; align-items: center; gap: 48px;
flex-wrap: wrap; }
.bai-image-band-h3{ font-family: var(--font-serif); font-weight: 400;
font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; letter-spacing: -0.02em;
color: var(--cream-on-dark); margin: 0 0 10px 0; max-width: 640px; }
.bai-image-band-meta,
.bai-hero-peak-note{ font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 241, 232, 0.55); }
.bai-image-band .btn-primary{ background: var(--cream-on-dark); color: var(--ink);
border-color: var(--cream-on-dark); flex-shrink: 0; }
/* ====== 20.26 · IMAGE-CARDS (.bai-image-cards) ======
Bild-Kacheln mit Navy-Overlay. Bild pro Karte: style="--bai-image: url('…')" */
.bai-image-card{ position: relative; aspect-ratio: 4 / 5; display: flex;
align-items: flex-end; padding: 32px 30px; text-decoration: none; overflow: hidden;
background-color: #0A1020; transition: transform 160ms ease, box-shadow 160ms ease; }
.bai-image-card:hover{ transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(11, 20, 38, 0.14); }
.bai-image-card-bg{ position: absolute; inset: 0;
background-image:
linear-gradient(rgba(46, 58, 120, 0.42), rgba(46, 58, 120, 0.42)),
var(--bai-image);
background-size: cover; background-position: center;
transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.bai-image-card:hover .bai-image-card-bg{ transform: scale(1.04); }
.bai-image-card::after{ content: ""; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10, 16, 32, 0.88) 0%, rgba(10, 16, 32, 0.35) 45%, rgba(10, 16, 32, 0.05) 75%); }
.bai-image-card-meta{ font-family: var(--font-mono); font-size: 9.5px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--periwinkle-bright);
margin-bottom: 12px; }
.bai-image-card-h3{ font-family: var(--font-serif); font-weight: 400; font-size: 26px;
line-height: 1.15; letter-spacing: -0.01em; color: var(--cream-on-dark); margin: 0 0 10px 0; }
.bai-image-card-link{ font-family: var(--font-serif); font-style: italic; font-size: 14px;
color: rgba(245, 241, 232, 0.75); }
/* ====== 20.27 · SPLIT-IMAGE (.bai-split-image) ====== */
.bai-split-image{ display: grid; grid-template-columns: 1fr 1fr;
border: 1px solid var(--ink); background: var(--bg); overflow: hidden; }
.bai-split-image-figure{ background-image:
linear-gradient(to bottom, rgba(10, 16, 32, 0.22), rgba(10, 16, 32, 0.38)),
linear-gradient(rgba(46, 58, 120, 0.4), rgba(46, 58, 120, 0.4)),
var(--bai-image);
background-size: cover; background-position: center; min-height: 420px; }
.bai-split-image-body{ padding: 72px 64px; display: flex; flex-direction: column;
justify-content: center; gap: 20px; }
.bai-split-image-body .eyebrow{ margin-bottom: 4px; }
.bai-split-image-h3{ font-family: var(--font-serif); font-weight: 400;
font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.02em;
color: var(--ink); margin: 0; }
.bai-split-image-h3 em{ font-style: italic; color: var(--periwinkle); }
.bai-split-image-text{ font-family: var(--font-serif); font-size: 17.5px;
line-height: 1.65; color: var(--ink-soft); margin: 0; max-width: 480px; }
.bai-split-image-text em{ font-style: italic; color: var(--periwinkle-deep); }
.bai-split-image-link{ font-family: var(--font-serif); font-style: italic; font-size: 17px;
color: var(--periwinkle-deep); text-decoration: none;
border-bottom: 1px solid var(--periwinkle); padding-bottom: 2px; align-self: flex-start; }
.bai-split-image-link:hover{ color: var(--periwinkle); }
.bai-split-image.flip .bai-split-image-figure{ order: 2; }
.bai-split-image.flip .bai-split-image-body{ order: 1; }
/* ====== 20.28 · FEATURE-RAIL (.bai-rail) — Scroll-Snap, CSS-only ====== */
.bai-rail-head{ display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 24px; gap: 24px; }
.bai-rail-hint{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--ink-faint); }
.bai-rail{ display: flex; gap: 22px; overflow-x: auto;
scroll-snap-type: x mandatory; padding: 2px 2px 24px;
scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
.bai-rail::-webkit-scrollbar{ height: 4px; }
.bai-rail::-webkit-scrollbar-thumb{ background: var(--rule-strong); }
.bai-rail::-webkit-scrollbar-track{ background: transparent; }
.bai-rail-card{ flex: 0 0 380px; scroll-snap-align: start; background: var(--bg);
border: 1px solid var(--rule); padding: 36px 32px;
display: flex; flex-direction: column; gap: 14px;
transition: border-color 160ms ease; }
.bai-rail-card:hover{ border-color: var(--periwinkle); }
.bai-rail-roman{ font-family: var(--font-serif); font-style: italic; font-size: 40px;
line-height: 1; color: var(--periwinkle); }
.bai-rail-h4{ font-family: var(--font-serif); font-weight: 400; font-size: 23px;
line-height: 1.2; color: var(--ink); margin: 0; }
.bai-rail-h4 em{ font-style: italic; color: var(--periwinkle-deep); }
.bai-rail-foot{ margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule);
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--ink-mute); }
/* ====== 20.29 · REVEAL-LIST (.bai-reveal-list) — Stagger via [data-animate] ====== */
.bai-reveal-list{ list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.bai-reveal-list li{ display: grid; grid-template-columns: 96px 1fr; gap: 32px;
align-items: baseline; padding: 32px 0; border-bottom: 1px solid var(--rule);
opacity: 0; transform: translateY(14px);
transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.bai-reveal-list.in-view li{ opacity: 1; transform: none; }
.bai-reveal-list li:nth-child(2){ transition-delay: 120ms; }
.bai-reveal-list li:nth-child(3){ transition-delay: 240ms; }
.bai-reveal-list li:nth-child(4){ transition-delay: 360ms; }
.bai-reveal-list li:nth-child(5){ transition-delay: 480ms; }
.bai-reveal-roman{ font-family: var(--font-serif); font-style: italic; font-size: 44px;
line-height: 1; color: var(--periwinkle); }
.bai-reveal-text{ font-family: var(--font-serif); font-size: clamp(21px, 2.4vw, 28px);
line-height: 1.35; color: var(--ink); margin: 0; }
.bai-reveal-text em{ font-style: italic; color: var(--periwinkle-deep); }
.bai-reveal-text small{ display: block; font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
margin-top: 8px; }
/* ====== 20.30 · DIVIDER (.bai-divider) — dekorativer Abschnittstrenner ====== */
.bai-divider{ display: flex; align-items: center; gap: 28px; padding: 40px 0; }
.bai-divider::before, .bai-divider::after{ content: ""; flex: 1; height: 1px;
background: var(--rule); }
.bai-divider-glyph{ font-family: var(--font-serif); font-style: italic; font-size: 22px;
line-height: 1; color: var(--periwinkle); }
.bai-divider-label{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--ink-mute); }
/* ====== 20.31 · EDITORIAL (.bai-editorial) — Dropcap + Spaltensatz ====== */
.bai-editorial{ max-width: 980px; }
.bai-editorial-lead{ font-family: var(--font-serif); font-style: italic;
font-size: clamp(21px, 2.4vw, 26px); line-height: 1.5; color: var(--ink);
margin: 0 0 36px 0; padding-bottom: 32px; border-bottom: 1px solid var(--periwinkle-soft); }
.bai-editorial-lead em{ color: var(--periwinkle-deep); }
.bai-editorial-body{ columns: 2; column-gap: 64px; column-rule: 1px solid var(--rule);
font-family: var(--font-serif); font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.bai-editorial-body p{ margin: 0 0 20px 0; }
.bai-editorial-body p:last-child{ margin-bottom: 0; }
.bai-editorial-body em{ font-style: italic; color: var(--periwinkle-deep); }
.bai-editorial-body strong{ color: var(--ink); font-weight: 600; }
.bai-editorial-body > p:first-child::first-letter{ font-family: var(--font-serif);
font-style: italic; font-size: 74px; line-height: 0.8; color: var(--periwinkle);
float: left; padding: 6px 12px 0 0; }
/* ====== 20.32 · NUMBER-WALL (.bai-numberwall) — Zahlen-Wand ====== */
.bai-numberwall{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: var(--rule-strong); border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink); }
.bai-numberwall-cell{ background: var(--bg); padding: 56px 44px 48px;
text-align: center; }
.bai-numberwall-cell.accent{ background: var(--periwinkle-softer); }
.bai-numberwall-value{ font-family: var(--font-serif); font-style: italic;
font-weight: 400; font-size: clamp(72px, 8vw, 128px); line-height: 0.95;
letter-spacing: -0.03em; color: var(--periwinkle); }
.bai-numberwall-value sup{ font-size: 0.35em; vertical-align: 0.9em;
color: var(--ink-mute); }
.bai-numberwall-label{ margin-top: 20px; font-family: var(--font-mono);
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-mute); }
.bai-numberwall-label em{ display: block; font-family: var(--font-serif);
font-style: italic; font-size: 15px; color: var(--ink); text-transform: none;
letter-spacing: normal; margin-bottom: 6px; }
/* ====== 20.33 · STICKY-CHAPTER (.bai-sticky) ====== */
.bai-sticky{ display: grid; grid-template-columns: 1fr 1.4fr; gap: 96px;
align-items: start; }
.bai-sticky-aside{ position: sticky; top: 96px; }
.bai-sticky-h2{ font-family: var(--font-serif); font-weight: 400;
font-size: clamp(34px, 4vw, 52px); line-height: 1.08; letter-spacing: -0.02em;
color: var(--ink); margin: 16px 0 20px; }
.bai-sticky-h2 em{ font-style: italic; color: var(--periwinkle); }
.bai-sticky-lead{ font-family: var(--font-serif); font-style: italic; font-size: 18px;
line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 420px; }
.bai-sticky-chapters{ border-top: 1px solid var(--ink); }
.bai-sticky-chapter{ display: grid; grid-template-columns: 88px 1fr; gap: 28px;
padding: 44px 0; border-bottom: 1px solid var(--rule); }
.bai-sticky-roman{ font-family: var(--font-serif); font-style: italic; font-size: 52px;
line-height: 1; color: var(--periwinkle); }
.bai-sticky-chapter-h3{ font-family: var(--font-serif); font-weight: 400; font-size: 25px;
line-height: 1.2; color: var(--ink); margin: 0 0 12px; }
.bai-sticky-chapter-h3 em{ font-style: italic; color: var(--periwinkle-deep); }
.bai-sticky-chapter-body{ font-family: var(--font-serif); font-size: 16px;
line-height: 1.65; color: var(--ink-soft); margin: 0; }
.bai-sticky-chapter-body em{ font-style: italic; color: var(--periwinkle-deep); }
/* ====== 20.34 · TICKER (.bai-ticker) — CSS-Marquee, pausiert on hover ====== */
@keyframes bai-ticker-scroll{ from{ transform: translateX(0); }
to{ transform: translateX(-50%); } }
.bai-ticker{ overflow: hidden; border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule); padding: 22px 0; }
.bai-ticker-track{ display: flex; gap: 0; width: max-content;
animation: bai-ticker-scroll 36s linear infinite; }
.bai-ticker:hover .bai-ticker-track{ animation-play-state: paused; }
.bai-ticker-item{ display: inline-flex; align-items: baseline; gap: 40px;
padding-right: 40px; white-space: nowrap; font-family: var(--font-serif);
font-style: italic; font-size: 21px; color: var(--ink-soft); }
.bai-ticker-item::after{ content: "·"; color: var(--periwinkle); }
.bai-ticker-item b{ font-family: var(--font-mono); font-style: normal; font-weight: 400;
font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink-mute); }
@media (prefers-reduced-motion: reduce){ .bai-ticker-track{ animation: none; } }
/* ====== 20.35 · DEFINITION (.bai-definition) — Wörterbuch-Stil ====== */
.bai-definition{ border-left: 3px solid var(--periwinkle); background: var(--bg-soft);
padding: 44px 52px; max-width: 880px; }
.bai-definition-term{ display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
margin-bottom: 20px; }
.bai-definition-word{ font-family: var(--font-serif); font-style: italic;
font-weight: 400; font-size: clamp(36px, 4vw, 52px); letter-spacing: -0.02em;
color: var(--ink); }
.bai-definition-word em{ color: var(--periwinkle); }
.bai-definition-body{ font-family: var(--font-serif); font-size: 18px; line-height: 1.65;
color: var(--ink-soft); margin: 0 0 20px; }
.bai-definition-body em{ font-style: italic; color: var(--periwinkle-deep); }
.bai-definition-body strong{ color: var(--ink); font-weight: 600; }
.bai-definition-etym{ font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
padding-top: 16px; border-top: 1px solid var(--rule); }
/* ====== 20.36 · DO/DON'T (.bai-dodont) ====== */
.bai-dodont{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.bai-dodont-col{ border: 1px solid var(--rule-strong); background: var(--bg);
padding: 40px 40px 32px; }
.bai-dodont-col.is-do{ border-color: var(--periwinkle-deep);
background: var(--periwinkle-softer); }
.bai-dodont-label{ font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute);
margin-bottom: 24px; display: flex; align-items: baseline; gap: 12px; }
.bai-dodont-glyph{ font-family: var(--font-serif); font-style: italic; font-size: 22px;
color: var(--periwinkle); }
.bai-dodont-col:not(.is-do) .bai-dodont-glyph{ color: var(--ink-faint); }
.bai-dodont-list li{ padding: 16px 0 16px 34px; position: relative;
border-bottom: 1px solid var(--rule);
font-family: var(--font-serif); font-size: 18.5px; line-height: 1.5;
color: var(--ink-soft); }
.bai-dodont-list li::before{ content: "✓"; position: absolute; left: 0; top: 14px;
font-family: var(--font-serif); font-style: italic; font-size: 20px;
color: var(--periwinkle); }
.bai-dodont-col.is-do .bai-dodont-list li{ border-bottom-color: var(--periwinkle-soft);
color: var(--ink); }
.bai-dodont-list li:last-child{ border-bottom: none; }
.bai-dodont-list li em{ font-style: italic; color: var(--periwinkle-deep); }
.bai-dodont-col:not(.is-do) .bai-dodont-list li{ text-decoration: line-through;
text-decoration-color: var(--ink-mute); text-decoration-thickness: 1.5px; }
.bai-dodont-col:not(.is-do) .bai-dodont-list li::before{ content: "✗";
color: var(--ink-faint); text-decoration: none; }
/* ====== 20.37 · IMAGE-STATS (.bai-image-stats) — Berg-Panorama + KPI-Zeile ====== */
.bai-image-stats{ position: relative; background-color: #0A1020;
background-image:
linear-gradient(to bottom, rgba(10, 16, 32, 0.55) 0%, rgba(10, 16, 32, 0.78) 60%, rgba(10, 16, 32, 0.94) 100%),
linear-gradient(rgba(46, 58, 120, 0.38), rgba(46, 58, 120, 0.38)),
var(--bai-image);
background-size: cover; background-position: center 30%; background-repeat: no-repeat;
color: var(--cream-on-dark); padding: 120px var(--gutter) 88px; }
.bai-image-stats-inner{ max-width: var(--container); margin: 0 auto; }
.bai-image-stats-h2{ font-family: var(--font-serif); font-weight: 400;
font-size: clamp(36px, 4.6vw, 64px); line-height: 1.08; letter-spacing: -0.025em;
color: var(--cream-on-dark); margin: 0 0 72px; max-width: 760px; }
.bai-image-stats-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
border-top: 1px solid rgba(245, 241, 232, 0.22); }
.bai-image-stats-cell{ padding: 32px 40px 0; border-left: 1px solid rgba(245, 241, 232, 0.16); }
.bai-image-stats-value{ font-family: var(--font-serif); font-style: italic;
font-weight: 400; font-size: clamp(44px, 5vw, 64px); line-height: 1;
letter-spacing: -0.03em; color: var(--periwinkle-bright); margin-bottom: 12px; }
.bai-image-stats-label{ font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 241, 232, 0.6); }
/* ============================================================================
20.38 – 20.40 · HERO-VARIANTEN
Drei Einstiege mit maximalem Auftritt. Alle Full-Bleed (ohne .container).
Signatur-Regel beachten: .bai-strike / Strike-Hook max. einmal pro Seite.
============================================================================ */
/* ====== 20.38 · HERO-PEAK (.bai-hero-peak) — Berg-Panorama + Stat-Leiste ====== */
.bai-hero-peak{ position: relative; background-color: #0A1020;
background-image:
linear-gradient(to bottom, rgba(10, 16, 32, 0.42) 0%, rgba(10, 16, 32, 0.62) 55%, rgba(10, 16, 32, 0.95) 100%),
linear-gradient(rgba(46, 58, 120, 0.35), rgba(46, 58, 120, 0.35)),
var(--bai-image);
background-size: cover; background-position: center 35%; background-repeat: no-repeat;
color: var(--cream-on-dark); padding: 0 var(--gutter); }
.bai-hero-peak-inner{ max-width: var(--container); margin: 0 auto;
min-height: min(88vh, 900px); display: flex; flex-direction: column;
justify-content: flex-end; padding: 160px 0 0; }
.bai-hero-peak-h1{ font-family: var(--font-serif); font-weight: 400;
font-size: clamp(56px, 8vw, 132px); line-height: 1.0; letter-spacing: -0.03em;
color: var(--cream-on-dark); margin: 0 0 32px; max-width: 1080px; }
.bai-hero-peak-lead{ font-family: var(--font-serif); font-style: italic;
font-size: clamp(18px, 2vw, 22px); line-height: 1.55;
color: rgba(245, 241, 232, 0.8); margin: 0 0 44px; max-width: 640px; }
.bai-hero-peak-actions{ display: flex; align-items: center; gap: 28px;
flex-wrap: wrap; margin-bottom: 88px; }
.bai-hero-peak-actions .btn-primary:hover,
.bai-hero-ledger-actions .btn-primary:hover{ background: var(--periwinkle-bright);
border-color: var(--periwinkle-bright); }
.bai-hero-peak-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
border-top: 1px solid rgba(245, 241, 232, 0.22); padding: 28px 0 44px; }
.bai-hero-peak-stat b{ display: block; font-family: var(--font-serif);
font-style: italic; font-weight: 400; font-size: 34px; line-height: 1;
letter-spacing: -0.02em; color: var(--periwinkle-bright); margin-bottom: 10px; }
.bai-hero-peak-stat span{ font-family: var(--font-mono); font-size: 9.5px;
letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 241, 232, 0.6); }
/* ====== 20.39 · HERO-MANIFEST (.bai-hero-manifest) — hell, editorial ======
Signatur-Elemente statt Deko: Strike-Hook (max. 1× pro Seite), Hairline-Grid,
Mono-Meta. Wirkung kommt aus Typo-Skala und Struktur, nicht aus Effekten. */
.bai-hero-manifest{ background: var(--bg); padding: 0 var(--gutter);
border-bottom: 1px solid var(--ink); }
.bai-hero-manifest-inner{ max-width: var(--container); margin: 0 auto;
padding: 64px 0 0; }
.bai-hero-manifest-masthead{ display: flex; justify-content: space-between;
align-items: baseline; gap: 24px; flex-wrap: wrap; padding-bottom: 20px;
border-bottom: 1px solid var(--ink); font-family: var(--font-mono);
font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink-mute); }
.bai-hero-manifest-masthead b{ color: var(--ink); font-weight: 600; }
.bai-hero-manifest-masthead b em{ font-family: var(--font-serif);
font-style: italic; color: var(--periwinkle); text-transform: none;
letter-spacing: normal; font-size: 13px; }
.bai-hero-manifest-h1{ font-family: var(--font-serif); font-weight: 400;
font-size: clamp(56px, 9.5vw, 156px); line-height: 1.04; letter-spacing: -0.035em;
color: var(--ink); margin: 0; padding: 72px 0 80px; max-width: 1200px;
text-wrap: balance; }
.bai-hero-manifest-h1 em{ font-style: italic; color: var(--periwinkle); }
.bai-hero-manifest-strike{ position: relative; font-style: italic;
color: var(--ink-faint); white-space: nowrap; }
.bai-hero-manifest-strike::after{ content: ""; position: absolute; left: -2%;
right: -2%; top: 52%; height: 2px; background: var(--periwinkle);
transform: rotate(-3deg); }
.bai-hero-manifest-cols{ display: grid; grid-template-columns: 1.3fr 1fr auto;
gap: 64px; align-items: start; border-top: 1px solid var(--rule-strong);
padding: 36px 0 56px; }
.bai-hero-manifest-lead{ font-family: var(--font-serif); font-style: italic;
font-size: 19px; line-height: 1.6; color: var(--ink-soft); margin: 0;
max-width: 520px; }
.bai-hero-manifest-lead em{ color: var(--periwinkle-deep); }
.bai-hero-manifest-proof{ font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
display: flex; flex-direction: column; gap: 12px; }
.bai-hero-manifest-proof span b{ font-family: var(--font-serif);
font-style: italic; font-weight: 400; font-size: 21px; color: var(--periwinkle);
letter-spacing: -0.01em; margin-right: 10px; }
.bai-hero-manifest-actions{ display: flex; flex-direction: column;
align-items: flex-start; gap: 14px; }
.bai-hero-manifest-actions .bai-hero-peak-note{ color: var(--ink-mute); }
.bai-hero-manifest-actions .bai-hero-peak-note em{ color: var(--periwinkle-deep); }
/* ====== 20.40 · HERO-LEDGER (.bai-hero-ledger) — dunkel, Antwort-Karte rechts ====== */
.bai-hero-ledger{ position: relative; background-color: var(--ink);
color: var(--cream-on-dark); padding: 0 var(--gutter); overflow: hidden; }
.bai-hero-ledger::before{ content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse at 75% 25%, rgba(91, 106, 191, 0.28) 0%, rgba(11, 20, 38, 0) 60%);
pointer-events: none; }
.bai-hero-ledger-inner{ position: relative; z-index: 1; max-width: var(--container);
margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 96px;
align-items: center; padding: 136px 0 120px; }
.bai-hero-ledger-eyebrow{ font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.2em; text-transform: uppercase; color: var(--periwinkle-bright);
margin-bottom: 32px; display: inline-flex; align-items: center; gap: 14px; }
.bai-hero-ledger-h1{ font-family: var(--font-serif); font-weight: 400;
font-size: clamp(48px, 6vw, 96px); line-height: 1.02; letter-spacing: -0.03em;
color: var(--cream-on-dark); margin: 0 0 28px; }
.bai-hero-ledger-lead{ font-family: var(--font-serif); font-style: italic;
font-size: 19px; line-height: 1.6; color: rgba(245, 241, 232, 0.78);
margin: 0 0 40px; max-width: 520px; }
.bai-hero-ledger-actions{ display: flex; align-items: center; gap: 28px;
flex-wrap: wrap; }
.bai-hero-ledger-card{ border: 1px solid rgba(245, 241, 232, 0.18);
background: rgba(11, 20, 38, 0.55); backdrop-filter: blur(4px);
padding: 40px 40px 32px; }
.bai-hero-ledger-card-meta{ display: flex; justify-content: space-between;
align-items: baseline; gap: 20px; font-family: var(--font-mono); font-size: 9.5px;
letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245, 241, 232, 0.5);
margin-bottom: 24px; padding-bottom: 16px;
border-bottom: 1px dashed rgba(245, 241, 232, 0.2); }
.bai-hero-ledger-card-prompt{ font-family: var(--font-mono); font-size: 13px;
line-height: 1.6; color: rgba(245, 241, 232, 0.7); margin: 0 0 22px; }
.bai-hero-ledger-card-text{ font-family: var(--font-serif); font-size: 17.5px;
line-height: 1.65; color: var(--cream-on-dark); margin: 0; }
/* ====== Responsive · Visual-Blocks ====== */
@media (max-width: 1100px){
.bai-hero-ledger-inner{ grid-template-columns: 1fr; gap: 56px; padding: 96px 0 80px; }
.bai-hero-peak-stats{ grid-template-columns: 1fr; gap: 24px; }
.bai-hero-peak-stat{ border-left: none; padding: 0; }
.bai-numberwall{ grid-template-columns: 1fr; }
.bai-sticky{ grid-template-columns: 1fr; gap: 40px; }
.bai-sticky-aside{ position: static; }
.bai-dodont{ grid-template-columns: 1fr; }
.bai-image-stats-row{ grid-template-columns: 1fr; border-top: none; }
.bai-image-stats-cell{ border-left: none; padding: 24px 0 0;
border-top: 1px solid rgba(245, 241, 232, 0.16); margin-top: 24px; }
.bai-image-cards{ grid-template-columns: 1fr 1fr; }
.bai-split-image{ grid-template-columns: 1fr; }
.bai-split-image.flip .bai-split-image-figure{ order: 0; }
.bai-split-image.flip .bai-split-image-body{ order: 0; }
.bai-split-image-body{ padding: 48px 40px; }
.bai-ring{ grid-template-columns: 1fr; gap: 40px; padding: 44px 40px;
justify-items: start; }
.bai-bars-row{ grid-template-columns: 150px 1fr 70px; gap: 18px; }
}
@media (max-width: 720px){
.bai-chart{ padding: 28px 20px 24px; }
.bai-ring{ padding: 36px 24px; }
.bai-ring-figure{ width: 190px; height: 190px; }
.bai-ring-score{ font-size: 56px; }
.bai-bars-row{ grid-template-columns: 1fr; gap: 12px; padding: 18px 0; }
.bai-bars-value{ text-align: left; font-size: 20px; }
.bai-orbit{ padding: 28px 16px 24px; }
.bai-display{ padding: 64px 0; }
.bai-answer{ padding: 36px 24px; }
.bai-answer-text{ font-size: 17px; }
.bai-image-panel{ padding: 96px var(--gutter); }
.bai-image-band{ padding: 64px var(--gutter); }
.bai-image-cards{ grid-template-columns: 1fr; }
.bai-image-card{ aspect-ratio: 4 / 3; }
.bai-rail-card{ flex-basis: 300px; }
.bai-reveal-list li{ grid-template-columns: 64px 1fr; gap: 20px; padding: 24px 0; }
.bai-reveal-roman{ font-size: 32px; }
.bai-editorial-body{ columns: 1; }
.bai-split-image-figure{ min-height: 280px; }
.bai-numberwall-cell{ padding: 40px 24px 36px; }
.bai-sticky-chapter{ grid-template-columns: 56px 1fr; gap: 18px; padding: 32px 0; }
.bai-sticky-roman{ font-size: 36px; }
.bai-definition{ padding: 32px 24px; }
.bai-dodont-col{ padding: 28px 24px 22px; }
.bai-image-stats{ padding: 80px var(--gutter) 56px; }
.bai-ticker-item{ font-size: 18px; gap: 28px; padding-right: 28px; }
.bai-hero-peak-inner{ min-height: 0; padding-top: 112px; }
.bai-hero-peak-actions{ margin-bottom: 56px; }
.bai-hero-manifest-h1{ padding: 48px 0 56px; }
.bai-hero-manifest-cols{ grid-template-columns: 1fr; gap: 32px; padding: 28px 0 44px; }
.bai-hero-ledger-card{ padding: 28px 24px 22px; }
}
footer a {
color: white;
}
/* ============================================================================
Bavaria AI · Nachtrag zum Customizer-CSS
============================================================================
ANHAENGEN, nichts ersetzen. Enthaelt ausschliesslich Layout-Regeln, die im
Stylesheet fehlen. Saemtliche Typografie kommt aus Bestandsklassen
(.hero-meta, .founder-name, .founder-role, .founder-bio, .founder-card-full,
.bai-divider-label, .synonyms-footnote, .intro-body), es wird nichts
dupliziert und keine Bestandsklasse ueberschrieben.
========================================================================= */
/* Textbreite: .intro-body hat keine max-width, deshalb standen die Seiten
bisher mit inline max-width:820px voll. */
.bai-note{ max-width: 820px; }
/* Brotkrumen: Typografie kommt von .hero-meta, hier nur die Bahn */
.bai-crumbs{ max-width: 1320px; margin: 0 auto; padding: 18px clamp(24px, 5vw, 56px) 0; }
.bai-crumbs a{ color: var(--periwinkle-deep); text-decoration: none; }
.bai-crumbs a:hover{ color: var(--periwinkle); }
/* Sprungmarken: Kasten und Flex-Liste, Label ist .bai-divider-label */
.bai-toc{ margin-top: 22px; padding: 18px 22px; background: var(--bg-soft); border: 1px solid var(--rule); }
.bai-toc-list{ list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap;
gap: 8px 22px; font-family: var(--font-serif); font-size: 15px; }
.bai-toc-list a{ color: var(--periwinkle-deep); text-decoration: none; }
.bai-toc-list a:hover{ text-decoration: underline; }
/* Autorenbox: Karte ist .founder-card-full, hier nur Zeilen-Layout und Portrait */
.bai-author{ flex-direction: row; gap: 22px; align-items: flex-start; max-width: 820px; }
.bai-author-portrait{ flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%;
object-fit: cover; object-position: center 18%; border: 1px solid var(--rule-strong); }
/* Gruender-Chips */
.bai-founders-strip{ margin-top: 20px; max-width: 820px; border: 1px solid var(--rule); padding: 22px 24px; }
.bai-founders-strip-row{ display: flex; flex-wrap: wrap; gap: 24px; margin-top: 16px; }
.bai-founder-chip{ display: flex; align-items: center; gap: 12px;
font-family: var(--font-serif); font-size: 14px; color: var(--ink); }
.bai-founder-chip img{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
border: 1px solid var(--rule-strong); }
.bai-founder-chip small{ display: block; font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
/* Quellenliste: Typografie von .intro-body, hier nur Breite und Einzug */
.bai-sources{ max-width: 820px; padding-left: 20px; margin: 0; font-size: 15px; line-height: 1.6; }
.bai-sources li{ margin-bottom: 6px; }
/* Seitenfuss: Text ist .synonyms-footnote, hier nur die Bahn */
.bai-pagefoot{ max-width: 1320px; margin: 0 auto; padding: 40px clamp(24px, 5vw, 56px);
border-top: 1px solid var(--rule); }
.bai-pagefoot p{ margin: 0 0 12px 0; max-width: 940px; }
.bai-pagefoot p:last-child{ margin-bottom: 0; }
/* Sekundaerer Button im dunklen Ledger-Hero, sonst dunkler Text auf Navy */
.bai-hero-ledger-actions .btn-secondary{ color: var(--cream-on-dark);
border-color: rgba(245, 241, 232, 0.35); background: transparent; }
.bai-hero-ledger-actions .btn-secondary:hover{ color: var(--periwinkle-bright);
border-color: var(--periwinkle-bright); }
@media (max-width: 720px){
.bai-author{ flex-direction: column; gap: 16px; }
.bai-toc-list{ gap: 6px 16px; }
}
/* ============================================================================
Bavaria AI · Nachtrag zum Customizer-CSS
============================================================================
ANHAENGEN, nichts ersetzen. Enthaelt ausschliesslich Layout-Regeln, die im
Stylesheet fehlen. Saemtliche Typografie kommt aus Bestandsklassen
(.hero-meta, .founder-name, .founder-role, .founder-bio, .founder-card-full,
.bai-divider-label, .synonyms-footnote, .intro-body), es wird nichts
dupliziert und keine Bestandsklasse ueberschrieben.
========================================================================= */
/* Textbreite: .intro-body hat keine max-width, deshalb standen die Seiten
bisher mit inline max-width:820px voll. */
.bai-note{ max-width: 820px; }
/* Brotkrumen: Typografie kommt von .hero-meta, hier nur die Bahn */
.bai-crumbs{ max-width: 1320px; margin: 0 auto; padding: 18px clamp(24px, 5vw, 56px) 0; }
.bai-crumbs a{ color: var(--periwinkle-deep); text-decoration: none; }
.bai-crumbs a:hover{ color: var(--periwinkle); }
/* Sprungmarken: Kasten und Flex-Liste, Label ist .bai-divider-label */
.bai-toc{ margin-top: 22px; padding: 18px 22px; background: var(--bg-soft); border: 1px solid var(--rule); }
.bai-toc-list{ list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap;
gap: 8px 22px; font-family: var(--font-serif); font-size: 15px; }
.bai-toc-list a{ color: var(--periwinkle-deep); text-decoration: none; }
.bai-toc-list a:hover{ text-decoration: underline; }
/* Autorenbox: Karte ist .founder-card-full, hier nur Zeilen-Layout und Portrait */
.bai-author{ flex-direction: row; gap: 22px; align-items: flex-start; max-width: 820px; }
.bai-author-portrait{ flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%;
object-fit: cover; object-position: center 18%; border: 1px solid var(--rule-strong); }
/* Gruender-Chips */
.bai-founders-strip{ margin-top: 20px; max-width: 820px; border: 1px solid var(--rule); padding: 22px 24px; }
.bai-founders-strip-row{ display: flex; flex-wrap: wrap; gap: 24px; margin-top: 16px; }
.bai-founder-chip{ display: flex; align-items: center; gap: 12px;
font-family: var(--font-serif); font-size: 14px; color: var(--ink); }
.bai-founder-chip img{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
border: 1px solid var(--rule-strong); }
.bai-founder-chip small{ display: block; font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
/* Quellenliste: Typografie von .intro-body, hier nur Breite und Einzug */
.bai-sources{ max-width: 820px; padding-left: 20px; margin: 0; font-size: 15px; line-height: 1.6; }
.bai-sources li{ margin-bottom: 6px; }
/* Seitenfuss: Text ist .synonyms-footnote, hier nur die Bahn */
.bai-pagefoot{ max-width: 1320px; margin: 0 auto; padding: 40px clamp(24px, 5vw, 56px);
border-top: 1px solid var(--rule); }
.bai-pagefoot p{ margin: 0 0 12px 0; max-width: 940px; }
.bai-pagefoot p:last-child{ margin-bottom: 0; }
/* Verhindert den Umbruch von KI-Antworten am Bindestrich in der Hero-H1.
Ein geschuetzter Bindestrich waere die Alternative, ist aber per Dash-Gate
(DECISIONS #024) verboten. */
.bai-hero-ledger-h1 em{ white-space: nowrap; }
/* Byline unter den Hero-Buttons: .bai-hero-peak-note sitzt im Block-Original
inline in der Button-Zeile, hier steht sie darunter und braucht Luft. */
.bai-byline{ margin-top: 28px; }
/* Sekundaerer Button im dunklen Ledger-Hero, sonst dunkler Text auf Navy */
.bai-hero-ledger-actions .btn-secondary{ color: var(--cream-on-dark);
border-color: rgba(245, 241, 232, 0.35); background: transparent; }
.bai-hero-ledger-actions .btn-secondary:hover{ color: var(--periwinkle-bright);
border-color: var(--periwinkle-bright); }
@media (max-width: 720px){
.bai-author{ flex-direction: column; gap: 16px; }
.bai-toc-list{ gap: 6px 16px; }
}
/* ====== 20 · LEAD-FORM + CHECK-PAGE (geo-score-check) ======
Neu mit /geo-score-check/ (10.08.2026).
Diesen Block ans Ende von "Zusätzliches CSS" im WP-Customizer anhängen.
Die Feld-Selektoren greifen bewusst per Descendant auf generische
Formularelemente innerhalb von .leadform-slot. Dadurch erscheint das
Formular des WP-Plugins (Fluent Forms, WPForms, CF7) automatisch im
Bavaria-CI, ohne dass Plugin-Klassen bekannt sein müssen. */
/* Hero-Grid-Variante mit Formular statt Snapshot-Card */
.hero-grid.form-grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
/* Die Karte */
.leadform-card { background: var(--bg); border: 1px solid var(--ink);
padding: 34px 32px; max-width: 460px; width: 100%; scroll-margin-top: 100px; }
.leadform-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--periwinkle-deep); font-weight: 600; margin-bottom: 12px; }
.leadform-title { font-family: var(--font-serif); font-weight: 400; font-size: 26px;
line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 8px 0; }
.leadform-title em { font-style: italic; color: var(--periwinkle); }
.leadform-sub { font-family: var(--font-serif); font-style: italic; font-size: 14px;
line-height: 1.5; color: var(--ink-mute); margin: 0 0 22px 0;
padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.leadform-foot { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--ink-mute); margin: 18px 0 0 0;
padding-top: 16px; border-top: 1px solid var(--rule); line-height: 1.7; }
/* Feld-Layout */
.leadform-field { margin-bottom: 16px; }
.leadform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.leadform-optional { font-family: var(--font-serif); font-style: italic; font-size: 11px;
letter-spacing: normal; text-transform: none; color: var(--ink-faint); margin-left: 6px; }
/* Labels und Felder, greifen auch auf Plugin-Markup */
.leadform-slot label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-mute); font-weight: 600;
display: block; margin-bottom: 6px; }
.leadform-slot input[type="text"],
.leadform-slot input[type="email"],
.leadform-slot input[type="url"],
.leadform-slot input[type="tel"],
.leadform-slot select,
.leadform-slot textarea {
width: 100%; box-sizing: border-box;
font-family: var(--font-sans); font-size: 15px; line-height: 1.4; color: var(--ink);
background: var(--bg-soft); border: 1px solid var(--rule-strong); border-radius: 0;
padding: 13px 14px; margin: 0;
transition: border-color 140ms ease, background 140ms ease; }
.leadform-slot input::placeholder, .leadform-slot textarea::placeholder { color: var(--ink-faint); }
.leadform-slot input:focus, .leadform-slot select:focus, .leadform-slot textarea:focus {
outline: none; border-color: var(--periwinkle); background: var(--bg); }
.leadform-slot select { appearance: none; -webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--periwinkle-deep) 50%),
linear-gradient(135deg, var(--periwinkle-deep) 50%, transparent 50%);
background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
/* Consent */
.leadform-consent { display: grid; grid-template-columns: auto 1fr; gap: 10px;
align-items: start; margin: 20px 0 20px 0; }
.leadform-slot .leadform-consent input[type="checkbox"] { width: 16px; height: 16px;
margin: 2px 0 0 0; accent-color: var(--periwinkle-deep); }
.leadform-slot .leadform-consent label { font-family: var(--font-sans); font-size: 12px;
line-height: 1.55; letter-spacing: normal; text-transform: none; color: var(--ink-soft);
font-weight: 400; margin: 0; }
.leadform-consent a { color: var(--periwinkle-deep); text-decoration: none;
border-bottom: 1px solid var(--periwinkle); }
/* Submit, greift auch auf Plugin-Button */
.leadform-slot button,
.leadform-slot input[type="submit"],
.leadform-submit {
width: 100%; display: block; cursor: pointer;
font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.04em;
background: var(--ink); color: var(--cream-on-dark);
border: 1px solid var(--ink); border-radius: 0; padding: 17px 24px;
transition: background 160ms ease, border-color 160ms ease; }
.leadform-slot button:hover,
.leadform-slot input[type="submit"]:hover,
.leadform-submit:hover { background: var(--periwinkle-deep); border-color: var(--periwinkle-deep); }
/* Deliverables-Grid mit vier statt drei Karten */
.deliv-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Responsive
Unterhalb 1100px rutscht das Formular per order() direkt unter die H1,
vor den Hero-Lead. Sonst steht die Aktion erst nach rund zehn Zeilen
Fliesstext, was auf dem Telefon die Conversion kostet. Die DOM-Reihenfolge
bleibt unveraendert, es wird nur visuell umsortiert. */
@media (max-width: 1100px) {
.hero-grid.form-grid { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.hero-grid.form-grid .hero-text { display: contents; }
.hero-grid.form-grid .hero-eyebrow { order: 1; }
.hero-grid.form-grid .hero-h1 { order: 2; }
.hero-grid.form-grid .hero-visual { order: 3; margin: 4px 0 36px 0; justify-content: flex-start; }
.hero-grid.form-grid .hero-lead { order: 4; }
.hero-grid.form-grid .hero-meta { order: 5; }
.leadform-card { max-width: 520px; }
.deliv-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.leadform-card { max-width: 100%; padding: 26px 22px; }
.leadform-title { font-size: 23px; }
.leadform-row { grid-template-columns: 1fr; gap: 0; }
.deliv-grid.cols-4 { grid-template-columns: 1fr; }
}
/* ============================================================================
Bavaria AI · OFFENES Delta — noch NICHT im Customizer
============================================================================
Grund: Die FAQ-Fragen standen als
im Markup und
waren damit sichtbar, aber fuer eine Maschine keine Ueberschrift. BOS-3
verlangt jede Frage als echtes H-Tag, und Anhang A.1 des BEFUND weist den
Frageform-Anteil in Headings als hebelstaerksten Einzelfix aus.
Das Markup wurde auf umgestellt. Fuer den
.mthd-Scope existiert bereits eine passende Regel (Sektion 18). Ausserhalb
dieses Scopes, etwa im Glossar, war .faq-q-text ungestylt, dort wuerde der
Browser jetzt seine H3-Defaults zeigen (fett, eigene Margins).
Diese Regel stellt die vorherige Optik wieder her. Sie definiert keine neue
Typografie, sondern spiegelt die Werte aus .mthd .faq-q-text.
ANHAENGEN, nichts ersetzen.
STATUS: offen. Muss VOR dem Seiten-HTML in den Customizer, sonst rendern
die Glossar-Fragen kurzzeitig zu gross und fett.
========================================================================= */
.faq-q-text{
font-family: var(--font-serif);
font-size: 22px;
font-weight: 400;
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0;
}
.faq-q-text em{ font-style: italic; color: var(--periwinkle-deep); }
/* Im Accordion sitzt die Frage in einem flex-summary neben dem Toggle.
Ohne min-width:0 sprengt eine lange Frage die Zeile. */
summary > .faq-q-text{ min-width: 0; }
/* ============================================================================
Bavaria AI · OFFENES Delta · Bahnbreite gegen das Theme behaupten
============================================================================
DAS PROBLEM
Wiederkehrende Ausrichtungsfehler, zuletzt sichtbar auf /leistungen/ am
Eyebrow "Add-ons zum laufenden Paket". Der Eyebrow saß bei 56 Pixel, alle
anderen Elemente derselben Sektion bei 315.
DIE URSACHE, gemessen im Browser gegen die volle Live-Kaskade
Unsere Regel .section{ max-width:1320px; margin:0 auto } wird zwar geparst,
aber im Zusammenspiel mit dem Astra-Theme und den WordPress-Layoutstilen
nicht wirksam. Gemessen wurden am Live-Stand:
section.section max-width: none (soll 1320px)
.section-head max-width: 1200px (soll 760px)
Die Sektion läuft dadurch über die volle Breite. Elemente, die eine eigene
Bahn mitbringen, zentrieren sich trotzdem korrekt: .section-head bekommt
1200 Pixel vom Theme, .service-overview-secondary hat eine eigene
max-width. Genau deshalb fällt der Fehler nur punktuell auf.
Ein direktes Kind ohne eigene Bahn, etwa ein blanker
,
landet dagegen bündig am Sektions-Padding und tanzt aus der Reihe. Das ist
der Grund, warum das Problem "immer wieder" auftritt: Es hängt daran, ob der
jeweilige Baustein zufällig eine eigene Breite mitbringt.
DIE LÖSUNG
Wir behaupten die Bahn mit einer Stufe mehr Spezifität innerhalb von
.entry-content, ohne !important. .entry-content > .section hat 0,2,0 und
schlägt damit sowohl .section (0,1,0) als auch die Layoutregeln des Themes
auf direkte Kinder (0,1,0). Damit gilt die Bahn wieder für die Sektion
selbst, und jedes Kind erbt die richtige Ausrichtung, unabhängig davon, ob
es eine eigene max-width mitbringt.
ANHAENGEN, nichts ersetzen. Diese Regeln definieren keine neue Optik, sie
stellen die im Stylesheet bereits festgelegten Werte wieder her.
STATUS: offen.
========================================================================= */
/* Bahn der Top-Level-Bausteine gegen die Theme-Layoutstile behaupten. */
.entry-content > .section,
.entry-content > .hero,
.entry-content > .intro,
.entry-content > .definition,
.entry-content > .faq,
.entry-content > .manifesto,
.entry-content > .geo-score,
.entry-content > .process,
.entry-content > .tier-compare{
max-width: var(--container, 1320px);
margin-left: auto;
margin-right: auto;
}
/* Full-Bleed-Bausteine bleiben bewusst voll breit. */
.entry-content > .cta-hard,
.entry-content > .honesty,
.entry-content > .mandate,
.entry-content > .section.bg-soft-full,
.entry-content > .bai-hero-ledger,
.entry-content > .bai-hero-peak{
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* Textbreiten der Kopfbereiche wiederherstellen, das Theme setzt sie auf
seine Inhaltsbreite hoch. */
.entry-content .section-head,
.entry-content .mandate-head,
.entry-content .methodology-head,
.entry-content .deliv-head,
.entry-content .process-head,
.entry-content .tier-compare-head,
.entry-content .fit-head{ max-width: 760px; }
.entry-content .section-head.centered{ max-width: 880px; }
.entry-content .section-lead,
.entry-content .methodology-lead{ max-width: 720px; }
/* Ein Eyebrow ist ein Inline-Element in einem Blockcontainer. Steht er als
direktes Kind einer Sektion, soll er dieselbe Kante halten wie der
Sektionskopf darüber. */
.entry-content > .section > .eyebrow{ display: flex; max-width: 760px; }
/* ============================================================================
Bavaria AI · OFFENES Delta · Prosa-Headings, Quellzeile, Seitentitel
============================================================================
DREI LUECKEN IM DESIGN-SYSTEM, die immer wieder dieselben Fehler erzeugen.
1 · PROSA-H3 HAT KEINE DEFINITION
Das Stylesheet kennt zwoelf H3-Klassen, aber alle gehoeren einem Block:
.bai-flow-h3, .case-card-h3, .deliv-card-h3 und so weiter. Fuer eine
Zwischenueberschrift im Fliesstext existiert keine Regel. Ein blankes
faellt deshalb auf die Astra-Defaults zurueck und rendert fett in der
Theme-Schrift statt in Charter. Genau das war auf der Floradesk-Seite zu
sehen. Die Regel unten schliesst die Luecke, sowohl ueber die Klasse
.prose-h3 als auch als Auffangnetz fuer H3 und H4 in unseren Textcontainern.
2 · DIE QUELLZEILE HAT KEINE KLASSE
Die Hausregel verlangt unter jeder Zahl eine Quellzeile. Im Stylesheet gibt
es dafuer nur .trust-stat-source und .bai-scoreband-foot, beide an einen
Block gebunden. .bai-source wird gebraucht, sobald eine Zahl ausserhalb
dieser Bloecke steht.
3 · ASTRA ZEIGT DEN SEITENTITEL
Unsere Seiten bringen ihre eigene H1 im Custom-HTML mit. Astra setzt
zusaetzlich den Beitragstitel als H1 darueber. Das ergibt zwei H1 auf einer
Seite, was BOS-1 verletzt und die Gliederung fuer Maschinen zerstoert.
Sauber loesen laesst sich das pro Seite im Astra-Seitenmenue unter
"Titel deaktivieren". Die Regel unten ist die Absicherung, falls die
Einstellung bei einer neuen Seite vergessen wird.
ANHAENGEN, nichts ersetzen.
STATUS: offen.
========================================================================= */
/* 1 · Zwischenueberschriften im Fliesstext.
Auffangnetz zuerst: JEDE klassenlose Ueberschrift in unseren Containern
bekommt die Hausschrift, damit nie wieder Theme-Defaults durchschlagen. */
.entry-content .section > h2:not([class]),
.entry-content .section h2:not([class]){
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(30px, 3.4vw, 44px);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 24px;
max-width: 900px;
}
.entry-content .section h2:not([class]) em{
font-style: italic; color: var(--periwinkle);
}
.prose-h3,
.intro-body > h3,
.section-body > h3{
font-family: var(--font-serif);
font-weight: 400;
font-size: 25px;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--ink);
margin: 44px 0 14px;
}
.prose-h3 em,
.intro-body > h3 em,
.section-body > h3 em{ font-style: italic; color: var(--periwinkle-deep); }
.prose-h4,
.intro-body > h4,
.section-body > h4{
font-family: var(--font-serif);
font-weight: 600;
font-size: 19px;
line-height: 1.4;
color: var(--ink);
margin: 32px 0 10px;
}
/* Erster Absatz nach einer Zwischenueberschrift ruecke nicht doppelt ab. */
.intro-body > h3 + p,
.section-body > h3 + p,
.prose-h3 + p{ margin-top: 0; }
/* 2 · Quellzeile, blockunabhaengig */
.bai-source{
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 14px 0 0;
}
/* 3 · Doppelte H1 verhindern, wenn die Astra-Einstellung vergessen wurde.
Greift nur auf Seiten, deren Inhalt eine eigene Hero-H1 mitbringt. */
.ast-page-builder-template .entry-header:not(.ast-no-title) .entry-title{
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* ============================================================================
ANHANG · Blog-Archiv im CI · body.blog
============================================================================
Visuelles Update des Astra-Loops auf /blog/ (Posts-Page, blog-layout-5,
ast-grid-3, ast-no-thumb). Kein Markup-Eingriff, reine Kaskade.
Werte gespiegelt aus bavaria-v2.src.css (karte, kmeta, Token-Stand 20.08.).
Eigener Prefix --bvb-* , damit nichts mit Astra-Variablen kollidiert.
========================================================================== */
body.blog{
--bvb-serif:Charter,"Iowan Old Style","Palatino Linotype",Georgia,serif;
--bvb-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
--bvb-ink:#0B1426; --bvb-ink-soft:#3A4157; --bvb-mute:#666F82;
--bvb-line:#E4E7F0; --bvb-peri:#5B6ABF; --bvb-peri-tief:#47549E;
--bvb-peri-line:#D6DAF2; --bvb-navy:#0B1426; --bvb-cream:#F5F1E8;
background-color:#F6F7FB;
}
body.blog .site-content,body.blog.ast-separate-container,body.blog.ast-separate-container .site-content{background-color:#F6F7FB;background-image:none}
/* Loop als Karten-Raster wie raster--3 im Substrat */
body.blog #primary .ast-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px;margin:0}
@media (max-width:1024px){body.blog #primary .ast-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){body.blog #primary .ast-row{grid-template-columns:1fr}}
/* leere Thumb-Spalte und leeren entry-content-Rest weg */
body.blog .ast-article-post .entry-content{display:none}
body.blog .ast-article-post .ast-blog-featured-section.post-thumb{display:none}
body.blog .ast-article-post .post-content{width:100%;max-width:100%;
display:flex;flex-direction:column;flex:1 1 auto}
/* Karte: Haarlinie statt Schatten, wie .karte im Substrat */
body.blog .ast-article-post{margin:0;height:100%}
body.blog.ast-separate-container .ast-article-post{
background:#FFFFFF;border:1px solid var(--bvb-line);border-radius:8px;
box-shadow:none;padding:clamp(22px,2.2vw,32px);
transition:border-color .18s ease;display:flex}
body.blog.ast-separate-container .ast-article-post:hover{
border-color:var(--bvb-peri-line)}
body.blog.ast-separate-container .ast-article-post .ast-article-inner,
body.blog .ast-article-post .ast-article-inner{
display:flex;flex-direction:column;width:100%;padding:0;margin:0;
background:transparent;border:0;border-radius:0;box-shadow:none}
/* Titel: Serif, ruhig, Peri erst bei Hover */
body.blog h2.entry-title{
font-family:var(--bvb-serif);font-weight:400;
font-size:clamp(21px,1.2vw + 16px,26px);line-height:1.25;
letter-spacing:-.012em;margin:0 0 10px;text-transform:none}
body.blog h2.entry-title a{color:var(--bvb-ink);text-decoration:none;
transition:color .18s ease}
body.blog h2.entry-title a:hover{color:var(--bvb-peri-tief)}
/* Meta-Zeile: Mono-Mikro, gesperrt, Versalien */
body.blog .entry-meta{
font-family:var(--bvb-mono);font-size:11px;line-height:1.6;
letter-spacing:.09em;text-transform:uppercase;color:var(--bvb-mute)}
body.blog .entry-meta a{color:var(--bvb-peri-tief);text-decoration:none}
body.blog .entry-meta a:hover{color:var(--bvb-peri)}
body.blog .entry-meta .published{color:var(--bvb-mute)}
/* Auszug: Serif-Lesetext */
body.blog .ast-excerpt-container{margin-top:12px}
body.blog .ast-excerpt-container p{
font-family:var(--bvb-serif);font-size:16px;line-height:1.6;
color:var(--bvb-ink-soft);margin:0;
display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
overflow:hidden}
/* Weiterlesen: Mono-Zeile mit Haarlinie, unten buendig (gleiche Kartenhoehe) */
body.blog .ast-read-more-container{margin:auto 0 0;padding-top:18px}
body.blog .ast-read-more-container a{
font-family:var(--bvb-mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--bvb-peri-tief);text-decoration:none;
border-bottom:1px solid var(--bvb-line);padding-bottom:4px;
transition:border-color .18s ease}
body.blog .ast-read-more-container a:hover{border-color:var(--bvb-peri-tief)}
/* Pagination im CI: eine zentrierte Reihe, kein Astra-Float */
body.blog .ast-pagination{padding:28px 0 8px}
body.blog .ast-pagination .nav-links{
display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px}
body.blog .ast-pagination .page-numbers{
float:none;display:inline-flex;align-items:center;justify-content:center;
min-width:40px;height:40px;box-sizing:border-box;
font-family:var(--bvb-mono);font-size:12px;letter-spacing:.12em;
color:var(--bvb-ink-soft);background:transparent;
border:1px solid var(--bvb-line);border-radius:6px;
padding:0 12px;margin:0;text-decoration:none;line-height:1;
transition:border-color .18s ease,color .18s ease}
body.blog .ast-pagination .page-numbers.next,
body.blog .ast-pagination .page-numbers.prev{padding:0 16px}
body.blog .ast-pagination a.page-numbers:hover{
border-color:var(--bvb-peri-tief);color:var(--bvb-peri-tief)}
body.blog .ast-pagination .page-numbers.current{
background:var(--bvb-navy);border-color:var(--bvb-navy);color:var(--bvb-cream)}
body.blog .ast-pagination .page-numbers.dots{border:0;min-width:auto;padding:0 2px}
@media (max-width:544px){
body.blog.ast-separate-container .ast-article-post{padding:20px 18px}
}