/* Briefpfleger Landing Page — Warm Cozy Paper Design System (identisch zur App) */

/* Lexend, selbst ausgeliefert statt von fonts.googleapis.com.
   Grund: Beim Einbinden ueber Google-Server wandert die IP-Adresse jedes
   Besuchers zu Google, bevor er zugestimmt hat - in Deutschland ein bekanntes
   Abmahnrisiko (LG Muenchen I, 20.01.2022, Az. 3 O 17493/20). Passt ausserdem
   nicht zu einer App, die mit Datensparsamkeit wirbt.
   Variable Schrift: eine Datei deckt alle Staerken von 300 bis 800 ab. */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/lexend-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/lexend-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --bg-primary: #f7f6f3;
    --bg-secondary: #efede7;
    --bg-card: #ffffff;
    --border-color: #e8e5de;
    --text-primary: #1c1b18;
    --text-secondary: #5f5c55;
    --text-muted: #69665e;      /* WCAG AA: min 4.9:1 auf allen hellen Flächen */

    --accent-color: #425946;   /* Salbeigrün */
    --accent-light: rgba(66, 89, 70, 0.10);
    --gold-accent: #856410;    /* Partner-Tarif-Hinweis, WCAG AA auf Weiß */

    --font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: var(--font-family); /* eine Schriftfamilie — ruhiges Bild */

    --shadow-sm: 0 1px 2px rgba(28, 27, 24, 0.05);
    --shadow-md: 0 2px 6px rgba(28, 27, 24, 0.05), 0 10px 24px rgba(28, 27, 24, 0.06);
    --shadow-lg: 0 6px 16px rgba(28, 27, 24, 0.07), 0 24px 48px rgba(28, 27, 24, 0.10);
    --site-max-width: 1040px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #171614;
        --bg-secondary: #201e1b;
        --bg-card: #232220;
        --border-color: #34322e;
        --text-primary: #f0eee9;
        --text-secondary: #a5a29a;
        --text-muted: #95928a;      /* WCAG AA: min 5.1:1 auf allen dunklen Flächen */
        --accent-color: #6b8f70;
        --accent-light: rgba(107, 143, 112, 0.14);
        --gold-accent: #cfa544;     /* helleres Gold für dunklen Karten-Hintergrund */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3), 0 10px 24px rgba(0, 0, 0, 0.25);
        --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.35), 0 24px 48px rgba(0, 0, 0, 0.4);
    }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    /* Hero-Animation zu einem ruhigen, aussagekräftigen Standbild einfrieren,
       statt sie – wie bisher – trotz reduzierter Bewegung endlos laufen zu lassen.
       Die mit data-rm="show" markierten Karten-Inhalte werden dabei sichtbar gehalten. */
    #bpha-scene, #bpha-scene * { animation: none !important; transition: none !important; }
    #bpha-scene [data-rm="show"] { opacity: 1 !important; }
}

body {
    font-family: var(--font-family);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Nur für Screenreader sichtbar (visuell versteckt) */
.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;
}

/* „Zum Inhalt springen" – wird beim Fokussieren mit Tastatur sichtbar */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 2000;
    background: var(--accent-color);
    color: #ffffff;
    padding: 0.7rem 1.1rem;
    border-radius: 0 0 10px 10px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid var(--text-primary);
    outline-offset: 2px;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; }

h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.1rem);
    font-weight: 700;
    margin-bottom: 1.25rem;
}

p { color: var(--text-secondary); font-weight: 300; }

em { font-style: normal; font-weight: 600; color: var(--text-primary); }

/* Bionic word wrapper (generated by main.js) */
.bionic-word strong { font-weight: 650; color: var(--text-primary); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-primary {
    background: var(--accent-color);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.06); }
.btn-primary:active { transform: scale(0.98); box-shadow: var(--shadow-sm); }

.btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary:active { transform: scale(0.98); box-shadow: var(--shadow-sm); }

.btn-header {
    background: var(--accent-color);
    color: #fff;
    min-height: 44px;
    padding: 0.45rem 1.15rem;
    font-size: 0.85rem;
    border-radius: 22px;
    border: none;
    box-shadow: var(--shadow-sm);
}

.btn-large { font-size: 1.05rem; padding: 1rem 2.2rem; }

/* ── Header ──────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
}

.header-container {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.logo {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--accent-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.header-actions { display: flex; align-items: center; gap: 1rem; }

.lang-switch {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    transition: all 0.15s ease;
}
.lang-switch:hover { color: var(--accent-color); border-color: var(--accent-color); }

/* Bionic toggle switch */
.bionic-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    /* 44px Touch-Target: Label + Schalter bilden gemeinsam die Trefffläche */
    min-height: 44px;
    padding: 0 0.25rem;
}
.bionic-switch-text {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.switch-wrapper { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.switch-wrapper input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; position: absolute; z-index: 1; }
.switch-slider {
    position: absolute;
    inset: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    transition: background 0.2s ease;
}
.switch-slider::before {
    content: "";
    position: absolute;
    width: 16px; height: 16px;
    left: 3px; top: 3px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(28, 27, 24, 0.3);
    transition: transform 0.2s ease;
}
.switch-wrapper input:checked + .switch-slider { background: var(--accent-color); }
.switch-wrapper input:focus-visible + .switch-slider { outline: 3px solid var(--accent-color); outline-offset: 2px; }

.hero-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 3.5rem;
    align-items: flex-end;
}

/* BPHA Animation Styles & Keyframes */
@keyframes bphaMoveX {
  0% { transform: translateX(-300px); opacity: 1; animation-timing-function: linear; }
  16% { transform: translateX(0); animation-timing-function: ease-in-out; }
  56% { transform: translateX(0); }
  68% { transform: translateX(400px); }
  92% { transform: translateX(400px); opacity: 1; }
  96% { transform: translateX(400px); opacity: 0; }
  100% { transform: translateX(400px); opacity: 0; }
}
@keyframes bphaBob {
  0% { transform: translateY(0); } 2% { transform: translateY(-3px); } 4% { transform: translateY(0); }
  6% { transform: translateY(-3px); } 8% { transform: translateY(0); } 10% { transform: translateY(-3px); }
  12% { transform: translateY(0); } 14% { transform: translateY(-3px); } 16% { transform: translateY(0); }
  56% { transform: translateY(0); } 58% { transform: translateY(-3px); } 60% { transform: translateY(0); }
  62% { transform: translateY(-3px); } 64% { transform: translateY(0); } 66% { transform: translateY(-3px); }
  68% { transform: translateY(0); }
  74% { transform: translateY(0); } 76% { transform: translateY(-26px); } 78.5% { transform: translateY(0); }
  80.5% { transform: translateY(-12px); } 82.5% { transform: translateY(0); }
  100% { transform: translateY(0); }
}
@keyframes bphaLegF {
  0% { transform: rotate(16deg); } 2% { transform: rotate(-16deg); } 4% { transform: rotate(16deg); }
  6% { transform: rotate(-16deg); } 8% { transform: rotate(16deg); } 10% { transform: rotate(-16deg); }
  12% { transform: rotate(16deg); } 14% { transform: rotate(-16deg); } 16% { transform: rotate(0deg); }
  56% { transform: rotate(0deg); } 58% { transform: rotate(14deg); } 60% { transform: rotate(-14deg); }
  62% { transform: rotate(14deg); } 64% { transform: rotate(-14deg); } 66% { transform: rotate(14deg); }
  68% { transform: rotate(0deg); } 100% { transform: rotate(0deg); }
}
@keyframes bphaLegB {
  0% { transform: rotate(-16deg); } 2% { transform: rotate(16deg); } 4% { transform: rotate(-16deg); }
  6% { transform: rotate(16deg); } 8% { transform: rotate(-16deg); } 10% { transform: rotate(16deg); }
  12% { transform: rotate(-16deg); } 14% { transform: rotate(16deg); } 16% { transform: rotate(0deg); }
  56% { transform: rotate(0deg); } 58% { transform: rotate(-14deg); } 60% { transform: rotate(14deg); }
  62% { transform: rotate(-14deg); } 64% { transform: rotate(14deg); } 66% { transform: rotate(-14deg); }
  68% { transform: rotate(0deg); } 100% { transform: rotate(0deg); }
}
@keyframes bphaArmF {
  0% { transform: rotate(8deg); } 19% { transform: rotate(8deg); } 22% { transform: rotate(-100deg); }
  55% { transform: rotate(-100deg); } 57.5% { transform: rotate(8deg); } 74% { transform: rotate(8deg); }
  76.5% { transform: rotate(-150deg); } 79.5% { transform: rotate(-138deg); } 83% { transform: rotate(-148deg); }
  85.5% { transform: rotate(8deg); } 100% { transform: rotate(8deg); }
}
@keyframes bphaArmB {
  0% { transform: rotate(-8deg); } 16.5% { transform: rotate(-8deg); } 19% { transform: rotate(-55deg); }
  68% { transform: rotate(-55deg); } 70% { transform: rotate(-120deg); } 72.5% { transform: rotate(-25deg); }
  74.5% { transform: rotate(-8deg); } 76.5% { transform: rotate(-150deg); } 79.5% { transform: rotate(-140deg); }
  83% { transform: rotate(-150deg); } 85.5% { transform: rotate(-8deg); } 100% { transform: rotate(-8deg); }
}
@keyframes bphaLetter {
  0% { transform: translate(312px, 338px); opacity: 1; }
  17% { transform: translate(312px, 338px); }
  20% { transform: translate(236px, 372px); }
  56% { transform: translate(236px, 372px); }
  68% { transform: translate(636px, 372px); }
  70% { transform: translate(690px, 318px); }
  71.5% { transform: translate(748px, 346px); }
  72.5% { transform: translate(758px, 372px); opacity: 1; }
  74% { transform: translate(758px, 372px); opacity: 0; }
  98% { transform: translate(312px, 338px); opacity: 0; }
  100% { transform: translate(312px, 338px); opacity: 1; }
}
@keyframes bphaLetterRot {
  0% { transform: rotate(0deg); } 17% { transform: rotate(0deg); } 20% { transform: rotate(-8deg); }
  68% { transform: rotate(-8deg); } 70% { transform: rotate(30deg); } 71.5% { transform: rotate(75deg); }
  73% { transform: rotate(95deg); } 90% { transform: rotate(95deg); } 100% { transform: rotate(0deg); }
}
@keyframes bphaLetterFlash {
  0% { opacity: 0; } 25.5% { opacity: 0; } 26% { opacity: 0.85; } 27.5% { opacity: 0; }
  30.5% { opacity: 0; } 31% { opacity: 0.85; } 32.5% { opacity: 0; }
  35.5% { opacity: 0; } 36% { opacity: 0.85; } 37.5% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes bphaRing1 {
  0% { opacity: 0; transform: scale(0.25); } 25.8% { opacity: 0; transform: scale(0.25); }
  26.2% { opacity: 0.9; transform: scale(0.35); } 28.5% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes bphaRing2 {
  0% { opacity: 0; transform: scale(0.25); } 30.8% { opacity: 0; transform: scale(0.25); }
  31.2% { opacity: 0.9; transform: scale(0.35); } 33.5% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes bphaRing3 {
  0% { opacity: 0; transform: scale(0.25); } 35.8% { opacity: 0; transform: scale(0.25); }
  36.2% { opacity: 0.9; transform: scale(0.35); } 38.5% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes bphaDoc1 {
  0% { opacity: 0; transform: translate(236px, 372px) scale(0.85); }
  26.3% { opacity: 0; transform: translate(236px, 372px) scale(0.85); }
  27% { opacity: 1; transform: translate(262px, 350px) scale(0.8); }
  31.5% { opacity: 1; transform: translate(660px, 137px) scale(0.5); }
  32.3% { opacity: 0; transform: translate(660px, 137px) scale(0.5); }
  100% { opacity: 0; transform: translate(660px, 137px) scale(0.5); }
}
@keyframes bphaDoc2 {
  0% { opacity: 0; transform: translate(236px, 372px) scale(0.85); }
  31.3% { opacity: 0; transform: translate(236px, 372px) scale(0.85); }
  32% { opacity: 1; transform: translate(262px, 350px) scale(0.8); }
  36.5% { opacity: 1; transform: translate(660px, 137px) scale(0.5); }
  37.3% { opacity: 0; transform: translate(660px, 137px) scale(0.5); }
  100% { opacity: 0; transform: translate(660px, 137px) scale(0.5); }
}
@keyframes bphaDoc3 {
  0% { opacity: 0; transform: translate(236px, 372px) scale(0.85); }
  36.3% { opacity: 0; transform: translate(236px, 372px) scale(0.85); }
  37% { opacity: 1; transform: translate(262px, 350px) scale(0.8); }
  41.5% { opacity: 1; transform: translate(660px, 137px) scale(0.5); }
  42.3% { opacity: 0; transform: translate(660px, 137px) scale(0.5); }
  100% { opacity: 0; transform: translate(660px, 137px) scale(0.5); }
}
@keyframes bphaRow {
  0% { opacity: 0; transform: translateY(6px); } 41.5% { opacity: 0; transform: translateY(6px); }
  43.5% { opacity: 1; transform: translateY(0); } 92% { opacity: 1; transform: translateY(0); }
  96% { opacity: 0; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); }
}
@keyframes bphaCheck {
  0% { transform: scale(0); } 43.5% { transform: scale(0); } 45% { transform: scale(1.25); }
  46.2% { transform: scale(1); } 100% { transform: scale(1); }
}
@keyframes bphaChip {
  0% { opacity: 0; transform: translateY(6px); } 46.5% { opacity: 0; transform: translateY(6px); }
  48.5% { opacity: 1; transform: translateY(0); } 92% { opacity: 1; transform: translateY(0); }
  96% { opacity: 0; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); }
}
@keyframes bphaT1 {
  0% { opacity: 0; transform: translate(690px, 137px) scale(0.55); }
  46.5% { opacity: 0; transform: translate(690px, 137px) scale(0.55); }
  47.2% { opacity: 1; transform: translate(710px, 133px) scale(0.53); }
  51.5% { opacity: 1; transform: translate(884px, 122px) scale(0.4); }
  52.3% { opacity: 0; transform: translate(884px, 122px) scale(0.4); }
  100% { opacity: 0; transform: translate(884px, 122px) scale(0.4); }
}
@keyframes bphaFolderPulse {
  0% { transform: scale(1); } 51.5% { transform: scale(1); } 53% { transform: scale(1.09); }
  55% { transform: scale(1); } 100% { transform: scale(1); }
}
@keyframes bphaOcr {
  0% { opacity: 0; transform: translateY(5px); } 53.5% { opacity: 0; transform: translateY(5px); }
  55.5% { opacity: 1; transform: translateY(0); } 92% { opacity: 1; transform: translateY(0); }
  96% { opacity: 0; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); }
}
@keyframes bphaBinWobble {
  0% { transform: scale(1) rotate(0deg); } 71.3% { transform: scale(1) rotate(0deg); }
  72.8% { transform: scale(1.06) rotate(-2deg); } 74.3% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes bphaPuff {
  0% { opacity: 0; transform: scale(0.5); } 71.8% { opacity: 0; transform: scale(0.5); }
  72.4% { opacity: 0.9; transform: scale(0.9); } 74.2% { opacity: 0; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.2); }
}
@keyframes bphaCap1 {
  0% { opacity: 0; } 3% { opacity: 0; } 5% { opacity: 1; } 18% { opacity: 1; } 21% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes bphaCap2 {
  0% { opacity: 0; } 21% { opacity: 0; } 23.5% { opacity: 1; } 42% { opacity: 1; } 45% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes bphaCap3 {
  0% { opacity: 0; } 45% { opacity: 0; } 47.5% { opacity: 1; } 62% { opacity: 1; } 65% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes bphaCap4 {
  0% { opacity: 0; } 65% { opacity: 0; } 67.5% { opacity: 1; } 90% { opacity: 1; } 93% { opacity: 0; } 100% { opacity: 0; }
}solid var(--accent-color); box-shadow: 2px 2px 0px 0px var(--accent-color); }
.mock-doc.is-match .mock-doc-meta { color: var(--text-secondary); }

/* Fußnote unten auf der Karte */
.mock-hint {
    margin-top: auto;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    border-top: 1.5px dashed var(--border-color);
    padding-top: 0.5rem;
}

/* ── Trust ───────────────────────────────────────────────── */
.trust { padding: 4rem 0; background: var(--bg-secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }

.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
}

.trust-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
}
.trust-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}
.trust-card p { font-size: 0.92rem; }

/* ── Features ────────────────────────────────────────────── */
.features { padding: 4.5rem 0; }

.section-intro { font-size: 1.02rem; margin-bottom: 2.5rem; max-width: 620px; }

.feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.feature {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    padding: 1.75rem 0;
    border-bottom: 1.5px solid var(--border-color);
    align-items: start;
}
.feature:first-child { border-top: 1px solid var(--border-color); }
.feature:last-child { border-bottom: 1px solid var(--border-color); }

.feature-num {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    margin-top: 0.15rem;
}

.feature h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4rem; }
.feature p { font-size: 0.97rem; max-width: 640px; }

/* ── How it works ────────────────────────────────────────── */
.how { padding: 4rem 0; background: var(--bg-secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }

.how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
}

.how-step {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
}
.how-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent-color);
    color: #fff;
    font-weight: 800;
    border: 1px solid var(--border-color);
    margin-bottom: 0.75rem;
}
.how-step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; }
.how-step p { font-size: 0.9rem; }

/* ── ADHS ────────────────────────────────────────────────── */
.adhd { padding: 4.5rem 0; }

.adhd-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
}
.adhd-grid p { margin-bottom: 1rem; font-size: 1rem; }

.adhd-demo {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.adhd-demo-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.adhd-demo-text { font-size: 1rem; color: var(--text-secondary); }
.adhd-demo-text + .adhd-demo-label { margin-top: 1rem; border-top: 1.5px dashed var(--border-color); padding-top: 1rem; }
.adhd-demo-text strong { font-weight: 700; color: var(--text-primary); }

/* ── Pricing ─────────────────────────────────────────────── */
.pricing { padding: 4rem 0; background: var(--bg-secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 380px));
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.price-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: var(--shadow-md);
}
.price-card--highlight { border-color: var(--accent-color); box-shadow: 0 0 0 1px var(--accent-color), var(--shadow-md); }

.price-card h3 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.price {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.price span { font-size: 0.9rem; font-weight: 400; color: var(--text-muted); }

.price-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.price-card li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
    font-weight: 300;
}
.price-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--accent-color);
}

.pricing-note {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.92rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq { padding: 4.5rem 0; max-width: 760px; margin: 0 auto; }

.faq details {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.faq summary {
    padding: 1rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--accent-color);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 1.25rem 1.1rem; font-size: 0.95rem; }

/* ── Final CTA ───────────────────────────────────────────── */
.cta-final {
    padding: 4.5rem 0;
    text-align: center;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}
.cta-final h2 { margin-bottom: 1.75rem; }
.cta-final .hero-fineprint { margin-top: 1rem; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--border-color);
    padding: 1.5rem 0;
    background: var(--bg-primary);
}
.footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.footer-brand { font-weight: 800; color: var(--accent-color); }
.footer-links { display: flex; gap: 0.5rem; }
.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    /* Touch-Target */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.6rem;
}
.footer-links a:hover { color: var(--text-primary); text-decoration: underline; }

/* ── Use Cases (Momente) ─────────────────────────────────── */
.usecases { padding: 4.5rem 0; }

.usecase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
}

.usecase-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.4rem;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
}
/* Gezeichnete Linien-Icons statt Emoji. Emoji werden von jedem Betriebssystem
   anders gerendert - auf Windows bunt und flaechig, auf iOS ganz anders -, was
   sich nie in ein ruhiges Design einfuegt. Als SVG erben sie die Akzentfarbe,
   bleiben auf jedem Bildschirm scharf und wiegen ein paar hundert Byte. */
.usecase-icon {
    display: block;
    width: 26px;
    height: 26px;
    margin-bottom: 0.6rem;
    color: var(--accent-color);
    flex: none;
}

.logo-emoji {
    width: 22px;
    height: 22px;
    margin-right: 0.45rem;
    color: var(--accent-color);
    flex: none;
}

/* Mitlaufendes Icon in einer Textzeile - erbt Farbe und Groesse vom Text */
.inline-icon {
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.15em;
    color: inherit;
}
.usecase-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.55rem;
}
.usecase-hook {
    font-size: 0.84rem;
    font-style: italic;
    color: var(--text-secondary);
    border-left: 3px solid var(--accent-color);
    padding-left: 0.6rem;
    margin-bottom: 0.6rem;
}
.usecase-card p:not(.usecase-hook) { font-size: 0.9rem; }

/* ── Spotlight: E-Mail-Trick (Arbeitgeber-Mails sichern) ──── */
.mailclaim {
    padding: 4.5rem 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.mailclaim-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3rem;
    align-items: center;
}

.mailclaim-kicker {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 0.6rem;
}

.mailclaim-copy h2 { margin-bottom: 1rem; }

.mailclaim-steps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 1.75rem 0;
}

.mailclaim-steps li {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}

.mailclaim-num {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--accent-color);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.mailclaim-steps h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; }
.mailclaim-steps p { font-size: 0.92rem; color: var(--text-secondary); }

.mailclaim-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    border-left: 3px solid var(--accent-color);
    padding-left: 0.7rem;
    max-width: 560px;
}

.mailclaim-visual {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: 1rem;
}

.mailclaim-visual svg { display: block; width: 100%; height: auto; }

/* ── Vergleich ("Warum nicht einfach …?") ────────────────── */
.compare {
    padding: 4rem 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* ── Focus (Accessibility) ───────────────────────────────── */
:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 2px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 860px) {
    .hero { padding: 3rem 0; }
    .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .trust-grid, .how-grid { grid-template-columns: 1fr; }
    .adhd-grid { grid-template-columns: 1fr; gap: 2rem; }
    .mailclaim-grid { grid-template-columns: 1fr; gap: 2rem; }
    .usecase-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    #bpha-scene { margin-top: 20px !important; }
    #bpha-scene text[data-cap] { font-size: 26px; letter-spacing: 1.2px; }
}

@media (max-width: 480px) {
    body { font-size: 16px; }
    .bionic-switch-text { display: none; }
    .hero-actions .btn { width: 100%; }
    .feature { grid-template-columns: 1fr; gap: 0.6rem; }
    .feature-num { justify-self: start; }
    .header-actions { gap: 0.4rem; }
    .lang-switch { padding: 0.22rem 0.5rem; font-size: 0.72rem; }
    .logo { font-size: 1rem; }
}

/* Sehr schmale Geraete (iPhone SE & Co., 320px).
   Logo + vier Bedienelemente brauchen sonst mehr Platz als der Bildschirm hat
   und die ganze Seite laesst sich seitlich wegschieben. Statt Navigation zu
   entfernen, werden Abstaende und Innenabstaende weiter zusammengezogen –
   die 44px Mindesthoehe der Touch-Ziele bleibt dabei erhalten. */
@media (max-width: 400px) {
    .header-container { gap: 0.5rem; padding-left: 14px; padding-right: 14px; }
    .header-actions { gap: 0.3rem; }
    .logo { font-size: 0.95rem; }
    .lang-switch { padding: 0.22rem 0.35rem; }
    .btn-header { padding: 0.45rem 0.7rem; font-size: 0.8rem; }
}

/* ── Vergleichstabelle ───────────────────────────────────────────────────── */

.comparison {
    padding: 5rem 0;
    background: var(--bg-primary);
}

.comparison-intro {
    color: var(--text-secondary);
    font-weight: 300;
    max-width: 640px;
    margin-bottom: 2.5rem;
    font-size: 1.02rem;
    line-height: 1.7;
}

.comparison-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
}

.comparison-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.93rem;
}

/* Header row */
.comparison-table thead tr {
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
}

.comparison-table thead th {
    padding: 1rem 1.1rem;
    text-align: center;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* First header cell (criteria label) */
.comparison-table thead th:first-child {
    text-align: left;
    width: 190px;
    min-width: 160px;
}

/* Briefpfleger column highlight */
.comparison-table thead th.col-bp,
.comparison-table tbody td.col-bp {
    background: var(--accent-light);
    border-left: 2px solid var(--accent-color);
    border-right: 2px solid var(--accent-color);
}

.comparison-table thead th.col-bp {
    color: var(--accent-color);
    font-weight: 700;
    font-size: 0.9rem;
    border-top: 2px solid var(--accent-color);
    border-radius: 0;
}

/* Body rows */
.comparison-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.comparison-table tbody tr:last-child {
    border-bottom: none;
}

.comparison-table tbody tr:hover {
    background: var(--bg-secondary);
}

.comparison-table tbody td {
    padding: 0.85rem 1.1rem;
    text-align: center;
    color: var(--text-secondary);
    font-weight: 300;
    vertical-align: middle;
    line-height: 1.4;
}

/* Criteria label (first column) */
.comparison-table tbody td:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.88rem;
}

/* Status icons */
.cmp-yes, .cmp-no, .cmp-warn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    border-radius: 20px;
    padding: 0.2rem 0.55rem;
    font-weight: 500;
    white-space: nowrap;
}

.cmp-yes {
    color: #2d6a4f;
    background: rgba(45, 106, 79, 0.1);
}

.cmp-no {
    color: #a53a2a;
    background: rgba(165, 58, 42, 0.1);
}

.cmp-warn {
    color: #7a5c1a;
    background: rgba(122, 92, 26, 0.1);
}

@media (prefers-color-scheme: dark) {
    .cmp-yes  { color: #74c69d; background: rgba(116,198,157,0.12); }
    .cmp-no   { color: #e07b6a; background: rgba(224,123,106,0.12); }
    .cmp-warn { color: #e9c46a; background: rgba(233,196,106,0.12); }
}

/* Briefpfleger app name badge in header */
.cmp-app-name {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 0.15rem;
}

.cmp-app-name-bp {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    margin-top: 0.15rem;
    color: var(--accent-color);
    opacity: 0.75;
}

/* Footnote below table */
.comparison-footnote {
    margin-top: 1.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 300;
    line-height: 1.6;
}

.comparison-footnote a {
    color: var(--accent-color);
    text-decoration: none;
}

.comparison-footnote a:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    .comparison { padding: 3.5rem 0; }
    .comparison-table thead th,
    .comparison-table tbody td { padding: 0.7rem 0.8rem; font-size: 0.82rem; }
    .comparison-table tbody td:first-child { font-size: 0.82rem; }
}

/* ── Blog: Übersicht ─────────────────────────────────────── */
.blog-hero { padding: 3.5rem 0 1rem; }
.blog-hero h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); font-weight: 800; margin-bottom: 0.9rem; }
.blog-hero p { max-width: 620px; font-size: 1.02rem; }

.blog-list { padding: 2rem 0 4.5rem; }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.blog-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-color);
    background: var(--accent-light);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
}

.blog-date {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 400;
}

.blog-card h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.blog-card p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.blog-card-more {
    margin-top: 1.1rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-color);
}

.blog-empty-note {
    grid-column: 1 / -1;
    font-size: 0.9rem;
    color: var(--text-muted);
    border: 1.5px dashed var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

@media (max-width: 720px) {
    .blog-grid { grid-template-columns: 1fr; }
}

/* ── Blog: einzelner Artikel ─────────────────────────────── */
.article-header {
    padding: 3rem 0 2rem;
    border-bottom: 1px solid var(--border-color);
}

.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 1.5rem;
}
.breadcrumb:hover { color: var(--accent-color); }

.article-header h1 {
    font-size: clamp(1.8rem, 4.2vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    margin-bottom: 1rem;
    max-width: 780px;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.article-dek {
    font-size: 1.08rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin-top: 1.1rem;
}

.article-body {
    max-width: 700px;
    margin: 0 auto;
    padding: 3rem 0 2rem;
}

.article-body h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 2.4rem;
    margin-bottom: 1rem;
}
.article-body h2:first-child { margin-top: 0; }

.article-body h3 {
    font-size: 1.12rem;
    font-weight: 700;
    margin-top: 1.8rem;
    margin-bottom: 0.75rem;
}

.article-body p {
    font-size: 1.02rem;
    color: var(--text-secondary);
    margin-bottom: 1.2rem;
}

.article-body ul, .article-body ol {
    margin: 0 0 1.2rem 0;
    padding-left: 1.3rem;
    color: var(--text-secondary);
}
.article-body li { font-size: 1.02rem; margin-bottom: 0.5rem; padding-left: 0.2rem; }

.article-body strong { color: var(--text-primary); font-weight: 700; }

.article-body a:not(.btn) { color: var(--accent-color); text-decoration-thickness: 1.5px; }

.article-body blockquote {
    border-left: 3px solid var(--accent-color);
    padding-left: 1.1rem;
    margin: 1.6rem 0;
    font-size: 1.02rem;
    color: var(--text-primary);
    font-style: normal;
}

.article-callout {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
}
.article-callout h3 { margin-top: 0; font-size: 1.05rem; }
.article-callout p { font-size: 0.95rem; margin-bottom: 1rem; }
.article-callout p:last-child { margin-bottom: 0; }

.article-cta {
    text-align: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2.5rem 1.5rem;
    margin-top: 3rem;
}
.article-cta h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 0.6rem; }
.article-cta p { max-width: 480px; margin: 0 auto 1.5rem; font-size: 0.95rem; }

.article-footer {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem 0 4rem;
    border-top: 1px solid var(--border-color);
}
.article-footer a { color: var(--accent-color); font-weight: 600; text-decoration: none; font-size: 0.92rem; }
.article-footer a:hover { text-decoration: underline; }

@media (max-width: 480px) {
    .article-header { padding: 2rem 0 1.5rem; }
    .article-body { padding: 2rem 0 1.5rem; }
}



/* Statushinweis fuer noch nicht freigeschaltete Funktionen (E-Mail-Eingang).
   Bewusst zurueckhaltend: die Funktion kommt, sie fehlt nicht. */
.mailclaim-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    vertical-align: middle;
}

/* ── Rechtstexte: Ueberschriften auf schmalen Geraeten ───────────────────── */

/* Die Rechtsseiten definieren .legal-page in einem eigenen <style>-Block, der
   nach dieser Datei geladen wird. Deshalb hier bewusst mit section davor –
   sonst gewinnt die Regel im Dokument und die Anpassung greift nicht.

   Ohne das laufen "Datenschutzerklaerung" und "Geschaeftsbedingungen" als ein
   einziges langes Wort ueber den Bildschirmrand hinaus und machen die ganze
   Seite seitlich verschiebbar. */
section.legal-page h1,
section.legal-page h2,
section.legal-page h3 {
    overflow-wrap: break-word;
    hyphens: auto;
}

@media (max-width: 480px) {
    section.legal-page h1 { font-size: 1.5rem; }
    section.legal-page h2 { font-size: 1.15rem; }
}