/* ═══════════════════════════════════════════════════════════
BAVARIA AI — Corporate Identity Stylesheet (bavai-ci.css)
Version: 1.0
Updated: April 2026

Zentrales Design-System für alle Bavaria AI Seiten.
Wird über WordPress Custom CSS oder als enqueued Stylesheet
eingebunden. Referenziert von allen HTML-Pillar-Pages.
═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
1. DESIGN TOKENS — Farben, Typo, Spacing, Radien
─────────────────────────────────────────────────────────── */

:root {
/* ── Brand Colors (Navy Monochrome) ── */
--bavai-navy: #242a56;
--bavai-navy-dark: #0C1425;
--bavai-navy-mid: #343d5c;
--bavai-slate: #393a56;
--bavai-slate-light: #585b75;
--bavai-periwinkle: #98a7cb;

/* ── Surfaces ── */
--bavai-bg: #ffffff;
--bavai-bg-alt: #ebedf2;
--bavai-bg-dark: #080E1A;
--bavai-bg-card: #ffffff;
--bavai-bg-card-alt: #f5f6fa;

/* ── Text ── */
--bavai-text: #343d5c;
--bavai-text-secondary: #585b75;
--bavai-text-muted: #7a7d94;
--bavai-text-inverse: #ffffff;
--bavai-text-accent: #242a56;

/* ── Accent (für Links, CTAs, Highlights) ── */
--bavai-accent: #1863DC;
--bavai-accent-hover: #1352b8;
--bavai-accent-light: #e8f0fd;

/* ── Borders ── */
--bavai-border: #d4d7e3;
--bavai-border-light: #ebedf2;

/* ── Shadows ── */
--bavai-shadow-sm: 0 1px 3px rgba(36, 42, 86, 0.06);
--bavai-shadow-md: 0 4px 16px rgba(36, 42, 86, 0.08);
--bavai-shadow-lg: 0 10px 30px rgba(208, 216, 234, 0.3);
--bavai-shadow-hover: 0 12px 32px rgba(36, 42, 86, 0.12);

/* ── Typography ── */
--bavai-font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
--bavai-font-body: 'Open Sans', system-ui, -apple-system, sans-serif;
--bavai-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

/* ── Fluid Type Scale ── */
--bavai-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
--bavai-text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
--bavai-text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
--bavai-text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
--bavai-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
--bavai-text-2xl: clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem);
--bavai-text-3xl: clamp(2rem, 1.4rem + 2.5vw, 3rem);
--bavai-text-hero: clamp(2.25rem, 1.2rem + 4.5vw, 3.75rem);

/* ── Spacing (4px Basis) ── */
--bavai-space-1: 0.25rem;
--bavai-space-2: 0.5rem;
--bavai-space-3: 0.75rem;
--bavai-space-4: 1rem;
--bavai-space-5: 1.25rem;
--bavai-space-6: 1.5rem;
--bavai-space-8: 2rem;
--bavai-space-10: 2.5rem;
--bavai-space-12: 3rem;
--bavai-space-16: 4rem;
--bavai-space-20: 5rem;
--bavai-space-24: 6rem;

/* ── Layout ── */

--bavai-gutter: clamp(1rem, 3vw, 2rem);
--bavai-section-py: clamp(3rem, 6vw, 6rem);

/* ── Radien ── */
--bavai-radius-sm: 4px;
--bavai-radius-md: 8px;
--bavai-radius-lg: 12px;
--bavai-radius-xl: 16px;
--bavai-radius-pill: 9999px;

/* ── Transitions ── */
--bavai-ease: cubic-bezier(0.4, 0, 0.2, 1);
--bavai-duration: 200ms;
}

/* ───────────────────────────────────────────────────────────
2. RESET & BASE — Globale Grundregeln
─────────────────────────────────────────────────────────── */

.bavai-page {
font-family: var(--bavai-font-body);
font-size: var(--bavai-text-base);
line-height: 1.7;
color: var(--bavai-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.bavai-page *,
.bavai-page *::before,
.bavai-page *::after {
box-sizing: border-box;
}

.bavai-page img {
max-width: 100%;
height: auto;
display: block;
}

/* ───────────────────────────────────────────────────────────
3. TYPOGRAPHY — Headings, Body, Links
─────────────────────────────────────────────────────────── */

.bavai-page h1,
.bavai-page h2,
.bavai-page h3,
.bavai-page h4 {
font-family: var(--bavai-font-heading);
font-weight: 700;
line-height: 1.2;
color: var(--bavai-text-accent);
margin-top: 0;
}

.bavai-page h1 {
font-size: var(--bavai-text-hero);
margin-bottom: var(--bavai-space-6);
letter-spacing: -0.02em;
}

.bavai-page h2 {
font-size: var(--bavai-text-2xl);
margin-bottom: var(--bavai-space-4);
padding-bottom: var(--bavai-space-3);
border-bottom: 2px solid var(--bavai-bg-alt);
}

.bavai-page h3 {
font-size: var(--bavai-text-xl);
margin-bottom: var(--bavai-space-3);
font-weight: 600;
}

.bavai-page h4 {
font-size: var(--bavai-text-lg);
margin-bottom: var(--bavai-space-2);
font-weight: 600;
}

.bavai-page p {
margin-top: 0;
margin-bottom: var(--bavai-space-4);
max-width: 72ch;
}

.bavai-page a {
color: var(--bavai-accent);
text-decoration: none;
transition: color var(--bavai-duration) var(--bavai-ease);
}

.bavai-page a:hover {
color: var(--bavai-accent-hover);
text-decoration: underline;
}

.bavai-page strong {
font-weight: 600;
color: var(--bavai-text-accent);
}

.bavai-page ul,
.bavai-page ol {
padding-left: var(--bavai-space-6);
margin-bottom: var(--bavai-space-4);
}

.bavai-page li {
margin-bottom: var(--bavai-space-2);
line-height: 1.6;
}

.bavai-page blockquote {
border-left: 3px solid var(--bavai-accent);
padding-left: var(--bavai-space-5);
margin: var(--bavai-space-6) 0;
color: var(--bavai-text-secondary);
font-style: italic;
}

/* ───────────────────────────────────────────────────────────
4. LAYOUT — Container, Sections, Grid
─────────────────────────────────────────────────────────── */

.bavai-container {
max-width: var(--bavai-container);
margin-inline: auto;
padding-inline: var(--bavai-gutter);
}

.bavai-narrow {
max-width: var(--bavai-narrow);
margin-inline: auto;
padding-inline: var(--bavai-gutter);
}

.bavai-section {
padding-block: var(--bavai-section-py);
}

.bavai-section--alt {
background-color: var(--bavai-bg-alt);
}

.bavai-section--dark {
background-color: var(--bavai-bg-dark);
color: var(--bavai-text-inverse);
}

.bavai-section--dark h1,
.bavai-section--dark h2,
.bavai-section--dark h3,
.bavai-section--dark h4 {
color: var(--bavai-text-inverse);
}

.bavai-section--dark h2 {
border-bottom-color: rgba(255, 255, 255, 0.15);
}

.bavai-section--dark p {
color: rgba(255, 255, 255, 0.85);
}

.bavai-section--dark a {
color: var(--bavai-periwinkle);
}

.bavai-grid {
display: grid;
gap: var(--bavai-space-6);
}

.bavai-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.bavai-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.bavai-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* ───────────────────────────────────────────────────────────
5. COMPONENTS — Cards, Capsules, Buttons, Badges
─────────────────────────────────────────────────────────── */

/* ── Answer Capsule (GEO-optimiert) ── */
.bavai-capsule {
background: linear-gradient(135deg, #f0f3ff 0%, #ebedf8 100%);
border-left: 4px solid var(--bavai-navy);
padding: var(--bavai-space-5) var(--bavai-space-6);
border-radius: 0 var(--bavai-radius-md) var(--bavai-radius-md) 0;
margin-bottom: var(--bavai-space-6);
font-size: var(--bavai-text-lg);
line-height: 1.65;
}

.bavai-capsule p {
margin-bottom: 0;
max-width: none;
}

/* ── Card ── */
.bavai-card {
background: var(--bavai-bg-card);
border: 1px solid var(--bavai-border-light);
border-radius: var(--bavai-radius-lg);
padding: var(--bavai-space-8);
transition: box-shadow var(--bavai-duration) var(--bavai-ease),
transform var(--bavai-duration) var(--bavai-ease);
}

.bavai-card:hover {
box-shadow: var(--bavai-shadow-hover);
transform: translateY(-2px);
}

.bavai-card--alt {
background: var(--bavai-bg-card-alt);
}

.bavai-card h3 {
border-bottom: none;
padding-bottom: 0;
}

/* ── Card Accent Top Border ── */
.bavai-card--accent {
border-top: 3px solid var(--bavai-navy);
}

/* ── Button ── */
.bavai-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--bavai-space-2);
font-family: var(--bavai-font-body);
font-size: var(--bavai-text-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: var(--bavai-space-3) var(--bavai-space-8);
border-radius: var(--bavai-radius-md);
border: 2px solid transparent;
cursor: pointer;
transition: all var(--bavai-duration) var(--bavai-ease);
text-decoration: none;
white-space: nowrap;
}

.bavai-btn:hover {
text-decoration: none;
transform: translateY(-1px);
}

.bavai-btn--primary {
background-color: var(--bavai-navy);
color: var(--bavai-text-inverse);
border-color: var(--bavai-navy);
}

.bavai-btn--primary:hover {
background-color: var(--bavai-navy-dark);
border-color: var(--bavai-navy-dark);
color: var(--bavai-text-inverse);
}

.bavai-btn--outline {
background-color: transparent;
color: var(--bavai-navy);
border-color: var(--bavai-navy);
}

.bavai-btn--outline:hover {
background-color: var(--bavai-navy);
color: var(--bavai-text-inverse);
}

.bavai-btn--inverse {
background-color: var(--bavai-text-inverse);
color: var(--bavai-navy);
border-color: var(--bavai-text-inverse);
}

.bavai-btn--inverse:hover {
background-color: var(--bavai-periwinkle);
color: var(--bavai-navy-dark);
border-color: var(--bavai-periwinkle);
}

.bavai-btn--lg {
font-size: var(--bavai-text-base);
padding: var(--bavai-space-4) var(--bavai-space-10);
}

/* ── Badge / Tag ── */
.bavai-badge {
display: inline-block;
font-family: var(--bavai-font-heading);
font-size: var(--bavai-text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--bavai-slate-light);
background: var(--bavai-bg-alt);
padding: var(--bavai-space-1) var(--bavai-space-3);
border-radius: var(--bavai-radius-pill);
}

/* ───────────────────────────────────────────────────────────
6. HERO — Vollbild Hero-Sections
─────────────────────────────────────────────────────────── */

.bavai-hero {
position: relative;
min-height: 85vh;
display: flex;
align-items: center;
overflow: hidden;
color: var(--bavai-text-inverse);
}

.bavai-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(12, 20, 37, 0.88) 0%,
rgba(36, 42, 86, 0.72) 50%,
rgba(52, 61, 92, 0.55) 100%);
z-index: 1;
}

.bavai-hero__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}

.bavai-hero__content {
position: relative;
z-index: 2;
max-width: var(--bavai-container);
margin-inline: auto;
padding: var(--bavai-space-24) var(--bavai-gutter);
}

.bavai-hero h1 {
color: var(--bavai-text-inverse);
max-width: 14ch;
}

.bavai-hero p {
color: rgba(255, 255, 255, 0.88);
font-size: var(--bavai-text-lg);
max-width: 50ch;
}

.bavai-hero .bavai-badge {
background: rgba(255, 255, 255, 0.15);
color: var(--bavai-periwinkle);
backdrop-filter: blur(4px);
}

/* ───────────────────────────────────────────────────────────
7. ARTICLE — Langform Content (Pillar Pages)
─────────────────────────────────────────────────────────── */

.bavai-article {
max-width: var(--bavai-narrow);
margin-inline: auto;
padding-inline: var(--bavai-gutter);
padding-block: var(--bavai-space-12);
}

.bavai-article h2 {
margin-top: var(--bavai-space-12);
}

.bavai-article h3 {
margin-top: var(--bavai-space-8);
}

/* ── Author Block ── */
.bavai-author {
display: flex;
align-items: center;
gap: var(--bavai-space-3);
padding: var(--bavai-space-3) var(--bavai-space-4);
background: var(--bavai-bg-card-alt);
border-left: 3px solid var(--bavai-navy);
border-radius: 0 var(--bavai-radius-sm) var(--bavai-radius-sm) 0;
margin-bottom: var(--bavai-space-8);
font-size: var(--bavai-text-sm);
line-height: 1.5;
}

.bavai-author a {
font-weight: 600;
}

/* ── Table of Contents ── */
.bavai-toc {
background: var(--bavai-bg-card-alt);
border: 1px solid var(--bavai-border-light);
border-radius: var(--bavai-radius-lg);
padding: var(--bavai-space-6);
margin-bottom: var(--bavai-space-10);
}

.bavai-toc h2 {
font-size: var(--bavai-text-lg);
margin-top: 0;
margin-bottom: var(--bavai-space-3);
border-bottom: none;
padding-bottom: 0;
}

.bavai-toc ol {
margin-bottom: 0;
counter-reset: toc;
list-style: none;
padding-left: 0;
}

.bavai-toc li {
counter-increment: toc;
margin-bottom: var(--bavai-space-1);
}

.bavai-toc li::before {
content: counter(toc) ". ";
font-weight: 600;
color: var(--bavai-navy);
}

.bavai-toc a {
color: var(--bavai-text);
transition: color var(--bavai-duration) var(--bavai-ease);
}

.bavai-toc a:hover {
color: var(--bavai-accent);
}

/* ───────────────────────────────────────────────────────────
8. TABLES — Vergleichstabellen, Datentabellen
─────────────────────────────────────────────────────────── */

.bavai-table {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--bavai-space-6);
font-size: var(--bavai-text-sm);
}

.bavai-table thead {
background: var(--bavai-navy);
color: var(--bavai-text-inverse);
}

.bavai-table th {
padding: var(--bavai-space-3) var(--bavai-space-4);
text-align: left;
font-weight: 600;
font-size: var(--bavai-text-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
}

.bavai-table td {
padding: var(--bavai-space-3) var(--bavai-space-4);
border-bottom: 1px solid var(--bavai-border-light);
vertical-align: top;
}

.bavai-table tbody tr:hover {
background: var(--bavai-bg-card-alt);
}

.bavai-table--striped tbody tr:nth-child(even) {
background: var(--bavai-bg-card-alt);
}

/* ───────────────────────────────────────────────────────────
9. FAQ — Fragen & Antworten Section
─────────────────────────────────────────────────────────── */

.bavai-faq h3 {
font-size: var(--bavai-text-lg);
font-weight: 600;
margin-top: var(--bavai-space-6);
padding-top: var(--bavai-space-6);
border-top: 1px solid var(--bavai-border-light);
}

.bavai-faq h3:first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}

/* ───────────────────────────────────────────────────────────
10. DEFINITION LIST — Entity Grounding, Specs
─────────────────────────────────────────────────────────── */

.bavai-dl {
background: var(--bavai-bg-card);
border: 1px solid var(--bavai-border-light);
border-radius: var(--bavai-radius-lg);
padding: var(--bavai-space-6);
line-height: 1.8;
}

.bavai-dl dt {
font-weight: 700;
color: var(--bavai-text-accent);
margin-top: var(--bavai-space-3);
}

.bavai-dl dt:first-child {
margin-top: 0;
}

.bavai-dl dd {
margin-left: var(--bavai-space-4);
margin-bottom: var(--bavai-space-3);
}

/* ───────────────────────────────────────────────────────────
11. TEAM — Teamkarten mit Person-Schema
─────────────────────────────────────────────────────────── */

.bavai-team-card {
text-align: center;
}

.bavai-team-card figure {
margin: 0 0 var(--bavai-space-4);
}

.bavai-team-card img {
width: 160px;
height: 160px;
border-radius: 50%;
object-fit: cover;
margin-inline: auto;
border: 3px solid var(--bavai-bg-alt);
}

.bavai-team-card h3 {
margin-bottom: var(--bavai-space-1);
}

.bavai-team-card .bavai-badge {
margin-bottom: var(--bavai-space-3);
}

/* ───────────────────────────────────────────────────────────
12. PRICING — Preistabellen / Tier-Karten
─────────────────────────────────────────────────────────── */

.bavai-pricing-card {
text-align: center;
padding: var(--bavai-space-10) var(--bavai-space-6);
}

.bavai-pricing-card h3 {
margin-bottom: var(--bavai-space-2);
}

.bavai-pricing__price {
font-family: var(--bavai-font-heading);
font-size: var(--bavai-text-2xl);
font-weight: 700;
color: var(--bavai-navy);
margin-bottom: var(--bavai-space-1);
}

.bavai-pricing__period {
font-size: var(--bavai-text-sm);
color: var(--bavai-text-muted);
margin-bottom: var(--bavai-space-6);
}

.bavai-pricing-card ul {
list-style: none;
padding: 0;
text-align: left;
}

.bavai-pricing-card li {
padding-left: var(--bavai-space-6);
position: relative;
}

.bavai-pricing-card li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--bavai-accent);
font-weight: 700;
}

/* ── Highlighted / Empfohlenes Pricing ── */
.bavai-pricing-card--featured {
background: var(--bavai-navy);
color: var(--bavai-text-inverse);
border-color: var(--bavai-navy);
}

.bavai-pricing-card--featured h3,
.bavai-pricing-card--featured .bavai-pricing__price {
color: var(--bavai-text-inverse);
}

.bavai-pricing-card--featured .bavai-pricing__period {
color: var(--bavai-periwinkle);
}

.bavai-pricing-card--featured li::before {
color: var(--bavai-periwinkle);
}

/* ───────────────────────────────────────────────────────────
13. CTA — Call-to-Action Blocks
─────────────────────────────────────────────────────────── */

.bavai-cta {
text-align: center;
padding: var(--bavai-space-12) var(--bavai-gutter);
background: linear-gradient(135deg, var(--bavai-navy) 0%, var(--bavai-navy-mid) 100%);
color: var(--bavai-text-inverse);
border-radius: var(--bavai-radius-xl);
}

.bavai-cta h2 {
color: var(--bavai-text-inverse);
border-bottom: none;
margin-bottom: var(--bavai-space-4);
}

.bavai-cta p {
color: rgba(255, 255, 255, 0.85);
margin-inline: auto;
margin-bottom: var(--bavai-space-6);
}

/* ───────────────────────────────────────────────────────────
14. SERVICE FEATURES — Icon-Listen, Feature-Grids
─────────────────────────────────────────────────────────── */

.bavai-feature {
display: flex;
gap: var(--bavai-space-4);
align-items: flex-start;
}

.bavai-feature__icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bavai-bg-alt);
border-radius: var(--bavai-radius-md);
color: var(--bavai-navy);
font-size: 1.25rem;
}

.bavai-feature__body h3 {
margin-bottom: var(--bavai-space-1);
}

/* ───────────────────────────────────────────────────────────
15. UTILITIES
─────────────────────────────────────────────────────────── */

.bavai-text-center { text-align: center; }
.bavai-text-muted { color: var(--bavai-text-muted); }
.bavai-text-sm { font-size: var(--bavai-text-sm); }
.bavai-mt-0 { margin-top: 0; }
.bavai-mb-0 { margin-bottom: 0; }
.bavai-mb-4 { margin-bottom: var(--bavai-space-4); }
.bavai-mb-8 { margin-bottom: var(--bavai-space-8); }
.bavai-mb-12 { margin-bottom: var(--bavai-space-12); }
.bavai-gap-4 { gap: var(--bavai-space-4); }
.bavai-gap-8 { gap: var(--bavai-space-8); }

.bavai-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/* ── Responsive Overrides ── */
@media (max-width: 768px) {
.bavai-hero {
min-height: 70vh;
}

.bavai-hero h1 {
font-size: var(--bavai-text-2xl);
}

.bavai-card {
padding: var(--bavai-space-5);
}

.bavai-pricing-card {
padding: var(--bavai-space-6) var(--bavai-space-4);
}

.bavai-table {
font-size: var(--bavai-text-xs);
}

.bavai-table th,
.bavai-table td {
padding: var(--bavai-space-2) var(--bavai-space-3);
}
}

@media (max-width: 480px) {
.bavai-hero__content {
padding: var(--bavai-space-16) var(--bavai-space-4);
}

.bavai-btn--lg {
width: 100%;
justify-content: center;
}
}