/* ═══════════════════════════════════════════════════
   BOOTSSCHEINMEISTER — Grav-Marketing-Theme
   Modern Coastal Design System
   ═══════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   1. Design Tokens
   ────────────────────────────────────────────── */
:root {
    --bsm-ocean: #1d4ed8;
    --bsm-ocean-rgb: 29, 78, 216;
    --bsm-ocean-light: #eff6ff;
    --bsm-teal: #14b8a6;
    --bsm-teal-rgb: 20, 184, 166;
    --bsm-teal-light: #f0fdfa;
    --bsm-coral: #f97316;
    --bsm-coral-rgb: 249, 115, 22;
    --bsm-coral-hover: #e8650a;
    --bsm-coral-light: #fff7ed;
    --bsm-sand: #faf8f5;
    --bsm-white: #ffffff;
    --bsm-text-dark: #1e293b;
    --bsm-text-body: #475569;
    --bsm-text-muted: #94a3b8;
    --bsm-border: #e2e8f0;
    --bsm-danger: #ef4444;

    --bsm-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bsm-radius: 1rem;
    --bsm-radius-sm: 0.625rem;
    --bsm-radius-btn: 0.75rem;
    --bsm-radius-pill: 2rem;
    --bsm-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
    --bsm-shadow-hover: 0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
    --bsm-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ──────────────────────────────────────────────
   2. Reset & Base
   ────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--bsm-font);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--bsm-text-body);
    background: var(--bsm-sand);
    letter-spacing: -0.01em;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--bsm-ocean); text-decoration: none; }
a:hover { color: var(--bsm-ocean); }

ul { list-style: none; }

/* ──────────────────────────────────────────────
   3. Typography
   ────────────────────────────────────────────── */
h1, h2, h3, h4 {
    color: var(--bsm-text-dark);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.625rem, 3.5vw, 2.25rem); }
h3 { font-size: 1.25rem; font-weight: 700; }

p { margin-bottom: 0; }

/* ──────────────────────────────────────────────
   4. Layout
   ────────────────────────────────────────────── */
.bsm-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.bsm-container--narrow {
    max-width: 800px;
}

/* ──────────────────────────────────────────────
   5. Navbar
   ────────────────────────────────────────────── */
.bsm-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.bsm-navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
    padding: 0.75rem 0;
    transition: box-shadow 0.2s var(--bsm-ease);
}

/* Wird von theme.js ab 60px Scroll gesetzt. Bewusst als Klasse und nicht als
   Inline-Style: der Schatten gehört ins Stylesheet, nicht ins Skript. */
.bsm-navbar.is-scrolled {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
}

.bsm-navbar .bsm-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bsm-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: var(--bsm-ocean);
}

.bsm-brand-icon {
    flex-shrink: 0;
}

.bsm-brand-text {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--bsm-text-dark);
}

.bsm-nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--bsm-radius-sm);
    transition: background 0.2s var(--bsm-ease);
}

.bsm-nav-toggle:hover { background: var(--bsm-ocean-light); }

.bsm-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--bsm-text-dark);
    border-radius: 1px;
    transition: transform 0.25s var(--bsm-ease), opacity 0.25s;
}

.bsm-nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.bsm-nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.bsm-nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.bsm-nav-menu {
    display: none;
}

.bsm-nav-menu.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bsm-white);
    border-top: 1px solid var(--bsm-border);
    box-shadow: var(--bsm-shadow-hover);
    padding: 1rem 1.5rem;
}

.bsm-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bsm-nav-link {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bsm-text-body);
    border-radius: var(--bsm-radius-sm);
    transition: all 0.2s var(--bsm-ease);
    text-decoration: none;
}

.bsm-nav-link:hover {
    color: var(--bsm-ocean);
    background: var(--bsm-ocean-light);
}

.bsm-nav-divider {
    display: none;
}

/* ──────────────────────────────────────────────
   6. Buttons
   ────────────────────────────────────────────── */
.bsm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    font-family: var(--bsm-font);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.5;
    border: 2px solid transparent;
    border-radius: var(--bsm-radius-btn);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s var(--bsm-ease);
    white-space: nowrap;
}

.bsm-btn:active { transform: translateY(0); }

.bsm-btn-primary {
    background: var(--bsm-ocean);
    color: var(--bsm-white);
    box-shadow: 0 2px 8px rgba(var(--bsm-ocean-rgb), 0.25);
}
.bsm-btn-primary:hover {
    background: #1a44bf;
    color: var(--bsm-white);
    box-shadow: 0 4px 16px rgba(var(--bsm-ocean-rgb), 0.35);
    transform: translateY(-1px);
}

.bsm-btn-coral {
    background: var(--bsm-coral);
    color: var(--bsm-white);
    box-shadow: 0 2px 8px rgba(var(--bsm-coral-rgb), 0.3);
}
.bsm-btn-coral:hover {
    background: var(--bsm-coral-hover);
    color: var(--bsm-white);
    box-shadow: 0 4px 16px rgba(var(--bsm-coral-rgb), 0.4);
    transform: translateY(-1px);
}

.bsm-btn-outline {
    background: transparent;
    color: var(--bsm-ocean);
    border-color: var(--bsm-ocean);
}
.bsm-btn-outline:hover {
    background: var(--bsm-ocean-light);
    color: var(--bsm-ocean);
    transform: translateY(-1px);
}

.bsm-btn-sm {
    padding: 0.4375rem 1rem;
    font-size: 0.8125rem;
    border-radius: var(--bsm-radius-pill);
}

.bsm-btn-lg {
    padding: 0.875rem 2rem;
    font-size: 1.0625rem;
}

.bsm-btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* ──────────────────────────────────────────────
   7. Badge
   ────────────────────────────────────────────── */
.bsm-badge {
    display: inline-block;
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--bsm-ocean);
    background: var(--bsm-ocean-light);
    border-radius: var(--bsm-radius-pill);
}

/* ──────────────────────────────────────────────
   8. Sections
   ────────────────────────────────────────────── */
.bsm-section {
    padding: 5rem 0;
}

.bsm-section--alt {
    background: var(--bsm-white);
}

.bsm-section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.bsm-section-header p {
    margin-top: 0.75rem;
    font-size: 1.125rem;
    color: var(--bsm-text-muted);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* ──────────────────────────────────────────────
   9. Hero
   ────────────────────────────────────────────── */
.bsm-hero {
    position: relative;
    padding: 6rem 0 4rem;
    overflow: hidden;
}

.bsm-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--bsm-ocean-light) 0%, var(--bsm-teal-light) 50%, var(--bsm-sand) 100%);
    z-index: -2;
}

.bsm-hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 80px;
    background: var(--bsm-sand);
    clip-path: ellipse(60% 100% at 50% 100%);
    z-index: -1;
}

.bsm-hero-content {
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
}

.bsm-hero-content .bsm-badge {
    margin-bottom: 1.5rem;
}

.bsm-hero-content h1 {
    margin-bottom: 1.25rem;
    letter-spacing: -0.03em;
}

.bsm-hero-subtitle {
    font-size: 1.1875rem;
    color: var(--bsm-text-body);
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero-Banner. Randlos im Container, damit es nicht wie ein eingeklebtes
   Bild wirkt, sondern wie ein Ausblick. Der negative Rand unten zieht es in
   die Sektionsgrenze hinein. */
.bsm-hero-figure {
    margin: 3rem auto 0;
    max-width: 1000px;
    border-radius: var(--bsm-radius);
    overflow: hidden;
    box-shadow: var(--bsm-shadow);
    line-height: 0;
}

.bsm-hero-figure img {
    width: 100%;
    height: auto;
}

.bsm-hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ──────────────────────────────────────────────
   10. Social Proof Bar
   ────────────────────────────────────────────── */
.bsm-proof {
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--bsm-border);
}

.bsm-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    text-align: center;
}

.bsm-proof-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--bsm-text-dark);
    letter-spacing: -0.03em;
}

.bsm-proof-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bsm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
}

/* ──────────────────────────────────────────────
   11. Feature Cards
   ────────────────────────────────────────────── */
.bsm-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.bsm-feature-card {
    background: var(--bsm-white);
    border-radius: var(--bsm-radius);
    padding: 2rem;
    box-shadow: var(--bsm-shadow);
    transition: all 0.25s var(--bsm-ease);
}

.bsm-feature-card:hover {
    box-shadow: var(--bsm-shadow-hover);
    transform: translateY(-4px);
}

.bsm-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 0.875rem;
    margin-bottom: 1.25rem;
}

.bsm-feature-icon--ocean {
    background: var(--bsm-ocean-light);
    color: var(--bsm-ocean);
}

.bsm-feature-icon--teal {
    background: var(--bsm-teal-light);
    color: var(--bsm-teal);
}

.bsm-feature-icon--coral {
    background: var(--bsm-coral-light);
    color: var(--bsm-coral);
}

.bsm-feature-card h3 {
    margin-bottom: 0.625rem;
}

.bsm-feature-card p {
    font-size: 0.9375rem;
    color: var(--bsm-text-body);
    line-height: 1.65;
}

/* ──────────────────────────────────────────────
   12. Pricing Cards
   ────────────────────────────────────────────── */
.bsm-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

.bsm-pricing-card {
    position: relative;
    background: var(--bsm-white);
    border-radius: var(--bsm-radius);
    padding: 2rem;
    box-shadow: var(--bsm-shadow);
    display: flex;
    flex-direction: column;
}

.bsm-pricing-card--featured {
    border: 2px solid var(--bsm-ocean);
    box-shadow: var(--bsm-shadow-hover);
    padding-top: 2.75rem;
}

.bsm-pricing-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bsm-white);
    background: linear-gradient(135deg, var(--bsm-ocean), var(--bsm-teal));
    border-radius: var(--bsm-radius-pill);
}

.bsm-pricing-header {
    margin-bottom: 1.5rem;
}

.bsm-pricing-header h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.bsm-price-amount {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--bsm-text-dark);
}

.bsm-price-amount small {
    font-size: 1.5rem;
}

.bsm-price-period {
    font-size: 0.875rem;
    color: var(--bsm-text-muted);
    margin-left: 0.25rem;
}

.bsm-pricing-features {
    flex: 1;
    margin-bottom: 1.5rem;
}

.bsm-pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0;
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--bsm-border);
}

.bsm-pricing-features li:last-child {
    border-bottom: none;
}

.bsm-check {
    flex-shrink: 0;
    color: var(--bsm-teal);
}

/* ──────────────────────────────────────────────
   13. FAQ Accordion
   ────────────────────────────────────────────── */
.bsm-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bsm-faq-item {
    background: var(--bsm-white);
    border-radius: var(--bsm-radius);
    box-shadow: var(--bsm-shadow);
    overflow: hidden;
    transition: box-shadow 0.25s var(--bsm-ease);
}

.bsm-faq-item:hover {
    box-shadow: var(--bsm-shadow-hover);
}

.bsm-faq-item summary {
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bsm-text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
    transition: color 0.2s var(--bsm-ease);
}

.bsm-faq-item summary::-webkit-details-marker { display: none; }

.bsm-faq-item summary::after {
    content: '';
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--bsm-text-muted);
    border-bottom: 2px solid var(--bsm-text-muted);
    transform: rotate(45deg);
    transition: transform 0.25s var(--bsm-ease);
    margin-top: -4px;
}

.bsm-faq-item[open] summary::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.bsm-faq-item[open] summary {
    color: var(--bsm-ocean);
}

.bsm-faq-answer {
    padding: 0 1.5rem 1.5rem;
    color: var(--bsm-text-body);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.bsm-faq-answer p { margin-bottom: 0.75rem; }
.bsm-faq-answer p:last-child { margin-bottom: 0; }

/* ──────────────────────────────────────────────
   14. CTA Section
   ────────────────────────────────────────────── */
.bsm-cta-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--bsm-ocean-light) 0%, var(--bsm-teal-light) 100%);
}

.bsm-cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.bsm-cta-content h2 {
    margin-bottom: 0.75rem;
}

.bsm-cta-content p {
    color: var(--bsm-text-body);
    font-size: 1.0625rem;
    margin-bottom: 2rem;
}

/* ──────────────────────────────────────────────
   14b. Partner / Cross-Marketing (SailTo)
   ────────────────────────────────────────────── */
.bsm-partner {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    max-width: 860px;
    margin: 0 auto;
    padding: 2.5rem 3rem;
    background: var(--bsm-white);
    border: 1px solid var(--bsm-border);
    border-radius: var(--bsm-radius);
    box-shadow: var(--bsm-shadow);
}

.bsm-partner-icon {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--bsm-coral);
    background: linear-gradient(135deg, var(--bsm-teal-light) 0%, var(--bsm-coral-light) 100%);
}

.bsm-partner-body .bsm-badge {
    color: var(--bsm-coral);
    background: var(--bsm-coral-light);
    margin-bottom: 0.875rem;
}

.bsm-partner-body h2 {
    margin-bottom: 0.625rem;
}

.bsm-partner-body p {
    color: var(--bsm-text-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
    .bsm-partner {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 2rem 1.5rem;
    }
}

/* ──────────────────────────────────────────────
   15. Footer
   ────────────────────────────────────────────── */
.bsm-footer {
    background: var(--bsm-white);
    padding: 0 0 2rem;
}

.bsm-footer-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--bsm-border) 20%, var(--bsm-border) 80%, transparent);
    margin-bottom: 2rem;
}

.bsm-footer-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    text-align: center;
}

.bsm-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bsm-footer-icon {
    color: var(--bsm-text-muted);
    flex-shrink: 0;
}

.bsm-footer-copyright {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bsm-text-body);
}

.bsm-footer-tagline {
    display: block;
    font-size: 0.75rem;
    color: var(--bsm-text-muted);
}

.bsm-footer-nav {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.bsm-footer-nav a {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bsm-text-muted);
    text-decoration: none;
    transition: color 0.2s var(--bsm-ease);
}

.bsm-footer-nav a:hover {
    color: var(--bsm-ocean);
}

/* ──────────────────────────────────────────────
   16. Prose (Markdown-Inhalt)
   ────────────────────────────────────────────── */
.bsm-page-content {
    background: var(--bsm-white);
    border-radius: var(--bsm-radius);
    padding: 2.5rem;
    box-shadow: var(--bsm-shadow);
}

.bsm-prose {
    font-size: 1rem;
    line-height: 1.75;
}

.bsm-prose h2 { font-size: 1.5rem; margin: 2rem 0 1rem; }
.bsm-prose h3 { font-size: 1.25rem; margin: 1.5rem 0 0.75rem; }
.bsm-prose p { margin-bottom: 1rem; }
.bsm-prose ul, .bsm-prose ol { margin: 1rem 0; padding-left: 1.5rem; }
.bsm-prose li { margin-bottom: 0.5rem; list-style: disc; }
.bsm-prose a { color: var(--bsm-ocean); text-decoration: underline; }

/* ──────────────────────────────────────────────
   17. Scroll Animations
   ────────────────────────────────────────────── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Der versteckte Ausgangszustand wird von theme.js gesetzt, NICHT hier.

   Vorher stand `opacity: 0` unbedingt auf `.bsm-animate`, und sichtbar
   wurde ein Block erst durch den IntersectionObserver. Ergebnis am
   2026-09-13: 29 von 30 Bloecken der Startseite unsichtbar, die FAQ wirkte
   kaputt. Ein Stylesheet, das Inhalt versteckt und sich darauf verlaesst,
   dass Javascript ihn wieder hervorholt, ist die falsche Richtung.

   Jetzt versteckt nur `.is-hidden`, und die Klasse vergibt das Skript
   ausschliesslich an Elemente, die ohnehin unterhalb des Sichtfensters
   liegen. Ohne JS, bei reduzierter Bewegung oder wenn der Beobachter
   ausfaellt, ist alles sichtbar. */
.bsm-animate.is-hidden {
    opacity: 0;
    transform: translateY(24px);
}

.bsm-animate.is-visible {
    animation: fadeInUp 0.6s var(--bsm-ease) forwards;
}

.bsm-features-grid .bsm-animate:nth-child(1).is-visible { animation-delay: 0s; }
.bsm-features-grid .bsm-animate:nth-child(2).is-visible { animation-delay: 0.08s; }
.bsm-features-grid .bsm-animate:nth-child(3).is-visible { animation-delay: 0.16s; }
.bsm-features-grid .bsm-animate:nth-child(4).is-visible { animation-delay: 0.24s; }
.bsm-features-grid .bsm-animate:nth-child(5).is-visible { animation-delay: 0.32s; }
.bsm-features-grid .bsm-animate:nth-child(6).is-visible { animation-delay: 0.4s; }

.bsm-pricing-grid .bsm-animate:nth-child(1).is-visible { animation-delay: 0s; }
.bsm-pricing-grid .bsm-animate:nth-child(2).is-visible { animation-delay: 0.1s; }
.bsm-pricing-grid .bsm-animate:nth-child(3).is-visible { animation-delay: 0.2s; }

.bsm-faq-list .bsm-animate:nth-child(1).is-visible { animation-delay: 0s; }
.bsm-faq-list .bsm-animate:nth-child(2).is-visible { animation-delay: 0.06s; }
.bsm-faq-list .bsm-animate:nth-child(3).is-visible { animation-delay: 0.12s; }
.bsm-faq-list .bsm-animate:nth-child(4).is-visible { animation-delay: 0.18s; }
.bsm-faq-list .bsm-animate:nth-child(5).is-visible { animation-delay: 0.24s; }
.bsm-faq-list .bsm-animate:nth-child(6).is-visible { animation-delay: 0.3s; }
.bsm-faq-list .bsm-animate:nth-child(7).is-visible { animation-delay: 0.36s; }
.bsm-faq-list .bsm-animate:nth-child(8).is-visible { animation-delay: 0.42s; }

/* --------------------------------------------------
   18. Zugaenglichkeit - Skip-Link & Fokus
   -------------------------------------------------- */
.bsm-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 0.75rem 1.25rem;
    background: var(--bsm-ocean);
    color: var(--bsm-white);
    font-weight: 600;
    border-radius: 0 0 var(--bsm-radius-sm) 0;
}

.bsm-skip-link:focus {
    left: 0;
    color: var(--bsm-white);
}

/* Sichtbarer Fokus ueberall - der Browser-Default verschwindet auf farbigen
   Flaechen, und Tastaturnutzer verlieren dann die Position. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--bsm-coral);
    outline-offset: 2px;
}

/* --------------------------------------------------
   19. Breadcrumb
   -------------------------------------------------- */
.bsm-breadcrumb {
    margin-bottom: 1.5rem;
    font-size: 0.8125rem;
    color: var(--bsm-text-muted);
}

.bsm-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
}

.bsm-breadcrumb a { color: var(--bsm-text-muted); }
.bsm-breadcrumb a:hover { color: var(--bsm-ocean); }
.bsm-breadcrumb li { display: flex; align-items: center; gap: 0.5rem; }
.bsm-breadcrumb li + li::before { content: "/"; opacity: 0.5; }

/* --------------------------------------------------
   20. Blog-Liste
   -------------------------------------------------- */
.bsm-post-list {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

.bsm-post-card {
    display: flex;
    flex-direction: column;
    background: var(--bsm-white);
    border: 1px solid var(--bsm-border);
    border-radius: var(--bsm-radius);
    padding: 1.75rem;
    box-shadow: var(--bsm-shadow);
    transition: all 0.3s var(--bsm-ease);
}

.bsm-post-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--bsm-shadow-hover);
    border-color: transparent;
}

/* Aufmacher der Teaser-Kachel. Negative Raender, damit das Bild bis an die
   Kartenkante laeuft, obwohl der Text die Innenpolsterung der Karte behaelt.
   aspect-ratio + object-fit halten die Kachelhoehe konstant, auch wenn ein
   hochgeladenes Bild vom 16:9-Format abweicht. */
.bsm-post-card-media {
    display: block;
    line-height: 0;
    margin: -1.75rem -1.75rem 1.25rem;
    border-radius: var(--bsm-radius) var(--bsm-radius) 0 0;
    overflow: hidden;
}

.bsm-post-card-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.4s var(--bsm-ease);
}

.bsm-post-card:hover .bsm-post-card-media img { transform: scale(1.03); }

.bsm-post-card h2,
.bsm-post-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.bsm-post-card h2 a,
.bsm-post-card h3 a { color: var(--bsm-text-dark); }
.bsm-post-card h2 a:hover,
.bsm-post-card h3 a:hover { color: var(--bsm-ocean); }

.bsm-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--bsm-text-muted);
    margin-bottom: 0.75rem;
}

.bsm-post-summary { margin-bottom: 1.25rem; }

.bsm-post-more {
    margin-top: auto;
    font-weight: 600;
    font-size: 0.9375rem;
}

.bsm-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.bsm-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--bsm-ocean-light);
    color: var(--bsm-ocean);
    border-radius: var(--bsm-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
}

.bsm-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.bsm-pagination a,
.bsm-pagination span {
    padding: 0.5rem 0.875rem;
    border-radius: var(--bsm-radius-sm);
    border: 1px solid var(--bsm-border);
    background: var(--bsm-white);
    font-size: 0.875rem;
    font-weight: 600;
}

.bsm-pagination .active {
    background: var(--bsm-ocean);
    border-color: var(--bsm-ocean);
    color: var(--bsm-white);
}

.bsm-empty {
    text-align: center;
    color: var(--bsm-text-muted);
    padding: 3rem 0;
}

/* --------------------------------------------------
   21. Artikel
   -------------------------------------------------- */
.bsm-article-header { margin-bottom: 2rem; }
.bsm-article-header h1 { margin-bottom: 0.75rem; }

.bsm-article-lead {
    font-size: 1.125rem;
    color: var(--bsm-text-body);
}

.bsm-article-figure {
    margin: 0 0 2rem;
    border-radius: var(--bsm-radius);
    overflow: hidden;
}

.bsm-prose blockquote {
    margin: 1.5rem 0;
    padding: 0.75rem 1.25rem;
    border-left: 3px solid var(--bsm-teal);
    background: var(--bsm-teal-light);
    border-radius: 0 var(--bsm-radius-sm) var(--bsm-radius-sm) 0;
}

.bsm-prose code {
    font-size: 0.875em;
    padding: 0.125rem 0.375rem;
    background: var(--bsm-ocean-light);
    border-radius: 0.25rem;
}

.bsm-prose pre {
    margin: 1.5rem 0;
    padding: 1.25rem;
    overflow-x: auto;
    background: var(--bsm-text-dark);
    color: var(--bsm-white);
    border-radius: var(--bsm-radius-sm);
}

.bsm-prose pre code { background: none; padding: 0; color: inherit; }

/* Breite Tabellen scrollen in sich selbst, statt die Seite breit zu machen.
   `display: block` macht die Tabelle scrollbar, `width: max-content` laesst
   ihr die natuerliche Spaltenbreite. Mit `width: 100%` (so stand es bis zum
   2026-09-13) passiert das Gegenteil: Die Tabelle quetscht sich in die
   Containerbreite, scrollt nie, und eine vierspaltige Pruefungstabelle wird
   auf dem Telefon zu einer Spalte aus Einzelwoertern. */
.bsm-prose table {
    margin: 1.5rem 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
}

.bsm-prose th,
.bsm-prose td {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--bsm-border);
    text-align: left;
}

.bsm-prose th { color: var(--bsm-text-dark); font-weight: 700; }

.bsm-prose img {
    border-radius: var(--bsm-radius-sm);
    margin: 1.5rem 0;
}

/* --------------------------------------------------
   22. Kursseiten (template: course / courses)
   -------------------------------------------------- */
.bsm-course-head { padding-bottom: 2rem; }

.bsm-course-intro {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    grid-template-columns: 1fr;
}

.bsm-course-intro h1 { margin: 0.75rem 0 1rem; }

.bsm-course-lead {
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

.bsm-course-figure {
    margin: 0;
    border-radius: var(--bsm-radius);
    overflow: hidden;
    box-shadow: var(--bsm-shadow);
}

/* Faktenblock. Bewusst eine <dl>: "Merkmal -> Wert" ist genau das, wofuer
   die Definitionsliste da ist, und es ist die Form, die Antwortmaschinen
   verlaesslich als Wertepaar lesen. Eine <table> waere Layout, das hier
   Semantik vortaeuscht. */
.bsm-facts {
    background: var(--bsm-white);
    border: 1px solid var(--bsm-border);
    border-radius: var(--bsm-radius);
    box-shadow: var(--bsm-shadow);
    overflow: hidden;
}

.bsm-facts-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bsm-border);
}

.bsm-facts-row:last-child { border-bottom: none; }

.bsm-facts dt {
    font-weight: 700;
    color: var(--bsm-text-dark);
    font-size: 0.875rem;
}

.bsm-facts dd {
    margin: 0;
    color: var(--bsm-text-body);
}

.bsm-facts-source {
    margin-top: 1rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--bsm-text-muted);
}

.bsm-facts-source a { color: var(--bsm-text-muted); text-decoration: underline; }

/* Kurskacheln */
.bsm-course-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

.bsm-course-card {
    display: flex;
    flex-direction: column;
    background: var(--bsm-white);
    border: 1px solid var(--bsm-border);
    border-radius: var(--bsm-radius);
    overflow: hidden;
    box-shadow: var(--bsm-shadow);
    transition: all 0.3s var(--bsm-ease);
}

.bsm-course-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--bsm-shadow-hover);
    border-color: transparent;
}

.bsm-course-card-media { display: block; line-height: 0; }
.bsm-course-card-media img { width: 100%; height: auto; }

.bsm-course-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem;
    gap: 0.5rem;
}

.bsm-course-card h3 { font-size: 1.125rem; }
.bsm-course-card h3 a { color: var(--bsm-text-dark); }
.bsm-course-card h3 a:hover { color: var(--bsm-ocean); }
.bsm-course-card .bsm-tag { align-self: flex-start; }
.bsm-course-card .bsm-post-more { margin-top: auto; padding-top: 0.75rem; }

/* --------------------------------------------------
   23. Formulare (Grav form-Plugin)
   -------------------------------------------------- */
.bsm-form .form-field {
    margin-bottom: 1.25rem;
    text-align: left;
}

.bsm-form .form-label,
.bsm-form label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bsm-text-dark);
}

.bsm-form input[type="text"],
.bsm-form input[type="email"],
.bsm-form textarea,
.bsm-form select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--bsm-font);
    font-size: 0.9375rem;
    border: 1.5px solid var(--bsm-border);
    border-radius: var(--bsm-radius-btn);
    background: var(--bsm-white);
    color: var(--bsm-text-dark);
    transition: all 0.2s var(--bsm-ease);
    outline: none;
}

.bsm-form input:focus,
.bsm-form textarea:focus,
.bsm-form select:focus {
    border-color: var(--bsm-ocean);
    box-shadow: 0 0 0 4px rgba(var(--bsm-ocean-rgb), 0.1);
}

.bsm-form textarea { min-height: 160px; resize: vertical; }

.bsm-form .form-field-checkbox label,
.bsm-form .checkboxes label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--bsm-text-body);
}

.bsm-form .form-field-checkbox input,
.bsm-form .checkboxes input { width: auto; margin-top: 0.2rem; }

.bsm-form .buttons { margin-top: 1.5rem; }

/* Das Honeypot-Feld des form-Plugins muss aus dem Layout verschwinden, darf
   aber KEIN display:none bekommen - Bots werten das aus und lassen es leer. */
.bsm-form .form-field-honeypot,
.bsm-form input[name$="[honeypot]"] {
    position: absolute !important;
    left: -9999px !important;
}

.bsm-form-note {
    margin-top: 0.875rem;
    font-size: 0.8125rem;
    color: var(--bsm-text-muted);
}

.bsm-form-note a { text-decoration: underline; }

.bsm-message {
    padding: 1rem 1.25rem;
    border-radius: var(--bsm-radius-btn);
    margin-bottom: 1.5rem;
    font-weight: 600;
    text-align: left;
}

.bsm-message--success {
    background: var(--bsm-teal-light);
    color: var(--bsm-teal);
}

.bsm-message--error {
    background: #fef2f2;
    color: var(--bsm-danger);
}

.form-messages .alert,
.bsm-form .form-errors { margin-bottom: 1.5rem; }
.bsm-form .form-errors { color: var(--bsm-danger); font-size: 0.875rem; }

/* ──────────────────────────────────────────────
   24. Responsive
   ────────────────────────────────────────────── */

/* Tablet */
@media (min-width: 768px) {
    .bsm-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bsm-pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .bsm-proof-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .bsm-proof-number {
        font-size: 2rem;
    }

    .bsm-footer-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .bsm-hero {
        padding: 8rem 0 5rem;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .bsm-nav-toggle {
        display: none;
    }

    .bsm-nav-menu {
        display: block;
        position: static;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .bsm-nav-list {
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
    }

    .bsm-nav-divider {
        display: block;
        width: 1px;
        height: 24px;
        background: var(--bsm-border);
        margin: 0 0.5rem;
    }

    .bsm-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .bsm-hero {
        padding: 10rem 0 6rem;
    }

    .bsm-section {
        padding: 6rem 0;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .bsm-hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .bsm-hero-actions .bsm-btn {
        width: 100%;
        max-width: 300px;
    }
}

/* Blog-Liste. Mit Aufmacherbild ist eine einspaltige Liste auf dem Desktop
   zu breit: Die Kacheln werden zu Bannern und die Uebersicht geht verloren. */
@media (min-width: 768px) {
    .bsm-post-list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
    .bsm-post-list { grid-template-columns: repeat(3, 1fr); }
}

/* Kursseiten */
@media (min-width: 768px) {
    .bsm-course-grid { grid-template-columns: repeat(2, 1fr); }
    .bsm-facts-row {
        grid-template-columns: 15rem 1fr;
        gap: 1.5rem;
        align-items: baseline;
    }
}

@media (min-width: 1024px) {
    .bsm-course-grid { grid-template-columns: repeat(3, 1fr); }
    .bsm-course-intro { grid-template-columns: 1.05fr 0.95fr; }
}

/* --------------------------------------------------
   25. Reduzierte Bewegung
   --------------------------------------------------
   Das README des abgeloesten WordPress-Themes behauptete, diese Einstellung
   werde respektiert - im CSS stand dazu nie etwas. Hier steht sie.
   Wichtig ist die erste Regel: Bewegung abschalten heisst Inhalt SOFORT
   zeigen, nicht ihn bei opacity 0 stehen lassen. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .bsm-animate,
    .bsm-animate.is-hidden,
    .bsm-animate.is-visible {
        opacity: 1;
        transform: none;
        animation: none;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}