/* ==========================================================================
   Rogalsky Arbeitssicherheit – zentrales Stylesheet (app.css)
   Ausgelagert aus dem identischen Inline-<style>-Block von index.php /
   unternehmen.php (2026-07-28). Design-Tokens kommen weiterhin aus
   modules/design-tokens.php und muessen VOR dieser Datei geladen werden.
   ========================================================================== */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 900;font-display:swap;src:url('/fonts/inter-var-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:'Inter';font-style:normal;font-weight:300 900;font-display:swap;src:url('/fonts/inter-var-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;}
/* ============================================================
   ROGALSKY ARBEITSSICHERHEIT, REDESIGN 2026
   Apple-like · Kein Gelb außer Logo · B2C/B2B
   ============================================================ */

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    color: #1d1d1f;
    background: #fff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ── FARBEN ────────────────────────────────────────────────── */
/* QUELLE DER WAHRHEIT für die Design-Tokens.
   Spiegel: css/premium.css (Prefix --p-*) für alle Unterseiten.
   Werte hier und dort MÜSSEN identisch bleiben. */
/* ── FARBEN ────────────────────────────────────────────────── */
/* Design-Tokens kommen zentral aus modules/design-tokens.php
   (oben im head eingebunden). Werte NUR dort ändern. */

/* ── LAYOUT ────────────────────────────────────────────────── */
.wrap {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
}
@media (min-width: 768px) { .wrap { padding: 0 48px; } }
@media (min-width: 1200px) { .wrap { padding: 0 var(--pad-h); } }

.section { padding: 100px 0; }
.section--light { background: var(--light); }
.section--light2 { background: var(--light2); }
.section--dark  { background: var(--dark); }

/* ── TYPOGRAFIE ────────────────────────────────────────────── */
.eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 16px;
    display: block;
}
.eyebrow--white { color: rgba(255,255,255,0.62); }

h1,h2,h3,h4 { line-height: 1.1; letter-spacing: -0.02em; color: var(--dark); }
h1 { font-size: clamp(3rem, 8vw, 6rem); font-weight: 800; letter-spacing: -0.04em; }
h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 700; letter-spacing: -0.03em; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }

.lead { font-size: clamp(1rem, 2.2vw, 1.2rem); color: var(--gray); line-height: 1.7; font-weight: 400; }
.body  { font-size: 0.95rem; color: var(--gray); line-height: 1.7; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.92rem;
    border-radius: 980px;
    padding: 13px 26px;
    min-height: 44px;          /* Touch-Target-Minimum (mobil 44x44) */
    justify-content: center;
    transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out),
                box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    text-decoration: none !important;
    line-height: 1;
}
.btn svg { flex-shrink: 0; }

/* PRIMÄRAKTION: die einzige farbige Fläche. Max. 1 pro Bildschirm. */
.btn-primary { background: var(--accent); color: #fff !important; }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 8px 28px rgba(0,113,227,0.34); }
/* Auf Fotogrund kann die Umgebungshelligkeit schwanken. Heller Ring +
   Schatten sichern die Kontur (>=3:1) unabhängig vom Bild darunter. */
.hero .btn-primary,
.section--dark .btn-primary,
.final-cta .btn-primary,
.b2c-risk-section .btn-primary {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.28), 0 6px 22px rgba(0,0,0,0.45);
}
.hero .btn-primary:hover,
.section--dark .btn-primary:hover,
.final-cta .btn-primary:hover,
.b2c-risk-section .btn-primary:hover {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4), 0 10px 30px rgba(0,0,0,0.5);
}

.btn-dark  { background: var(--dark); color: #fff !important; }
.btn-dark:hover  { background: #000; transform: translateY(-1px); box-shadow: 0 8px 28px rgba(0,0,0,0.28); }

.btn-white { background: #fff; color: var(--dark) !important; }
.btn-white:hover { background: var(--light); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.16); }

.btn-ghost-white {
    background: rgba(255,255,255,0.1);
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(8px);
}
.btn-ghost-white:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.6); }

.btn-ghost-dark {
    background: transparent;
    color: var(--dark) !important;
    border: 1.5px solid var(--border);
}
.btn-ghost-dark:hover { border-color: var(--dark); background: var(--light); }

.btn-lg { padding: 17px 34px; font-size: 1rem; }

/* ── NAVIGATION ─────────────────────────────────────────────── */
.site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transition: background 0.35s ease, box-shadow 0.35s ease;
    /* dark gradient so white nav text is readable over any hero image */
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 100%);
}
.site-nav.is-scrolled {
    background: rgba(255,255,255,0.88);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.nav-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
    height: 70px;
    display: flex;
    align-items: center;
    gap: 24px;
}
@media (min-width: 768px) { .nav-inner { padding: 0 48px; } }
@media (min-width: 1200px) { .nav-inner { padding: 0 var(--pad-h); } }

.nav-logo { flex-shrink: 0; overflow: hidden; }
.nav-logo img {
    height: 46px; width: auto;
    transition: filter 0.35s, max-width 0.35s;
    /* White + clip to "r" icon on dark hero */
    filter: brightness(0) invert(1);
    max-width: 50px;
}
.site-nav.is-scrolled .nav-logo img { filter: none; max-width: 220px; }

.nav-links {
    display: flex;
    gap: 4px;
    flex: 1;
    justify-content: center;
}
.nav-item { position: relative; }
.nav-item > a {
    font-size: 0.88rem;
    font-weight: 500;
    color: rgba(255,255,255,0.88);
    padding: 8px 14px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    display: block;
}
.site-nav.is-scrolled .nav-item > a { color: var(--dark); }
.nav-item > a:hover { background: rgba(255,255,255,0.12); }
.site-nav.is-scrolled .nav-item > a:hover { background: var(--light); }

/* Dropdown */
.nav-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.05);
    padding: 8px;
    min-width: 210px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}
.nav-item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
    display: block;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--dark) !important;
    padding: 9px 14px;
    border-radius: 8px;
    transition: background 0.15s;
}
.nav-dropdown a:hover { background: var(--light); }

.nav-cta { flex-shrink: 0; }

/* Mobile toggle */
.nav-hamburger {
    display: none;
    background: none;
    border: none;
    color: #fff;
    padding: 8px;
    width: 44px;               /* Touch-Target-Minimum, war 38x38 */
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
}
.nav-hamburger:hover { background: rgba(255,255,255,0.1); }
.site-nav.is-scrolled .nav-hamburger { color: var(--dark); }
.site-nav.is-scrolled .nav-hamburger:hover { background: var(--light); }

@media (max-width: 860px) {
    .nav-links { display: none; }
    .nav-cta   { display: none; }
    .nav-hamburger { display: flex; }
}

/* Mobile menu overlay — vollständig deckend, kein Durchscheinen */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: #0a0a0b;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow-y: auto;
    padding: 72px 0 32px;
}
.mobile-overlay.is-open { display: flex; }
.mobile-close {
    position: absolute;
    top: 24px; right: 24px;
    font-size: 1.8rem;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    font-family: inherit;
}
.mobile-overlay a {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    padding: 12px 28px;
    border-radius: 12px;
    transition: background 0.15s;
    text-align: center;
}
.mobile-overlay a:hover { background: rgba(255,255,255,0.08); }
.mobile-overlay .mobile-cta { margin-top: 20px; }

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background: url('/images/slides/slide-1-stapler.jpg') center 40%/cover no-repeat;
    opacity: 0.34;              /* war 0.22, Bild war praktisch unsichtbar */
    filter: grayscale(30%);
    transform: scale(1.04);
    transition: transform 8s ease;
}
.hero-bg.loaded { transform: scale(1); }
.hero-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 60%, rgba(10,10,10,0.42) 0%, rgba(10,10,10,0.82) 72%);
}
.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 140px 24px 100px;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.75);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 9px 20px;
    border-radius: 999px;
    margin-bottom: 36px;
    backdrop-filter: blur(12px);
}
.hero-badge-dot {
    width: 7px; height: 7px;
    background: #4ade80;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(74,222,128,0.6);
    animation: pulse-dot 2.4s infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(0.85); }
}
.hero h1,
.hero .hero-title {
    color: #fff;
    margin-bottom: 28px;
    font-size: clamp(3.2rem, 9vw, 7rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.04em;
}
.hero-h1-sub {
    display: block;
    font-weight: 300;
    font-size: 0.58em;
    color: rgba(255,255,255,0.72);
    letter-spacing: -0.01em;
    margin-top: 6px;
}
.hero-lead {
    font-size: clamp(1rem, 2.5vw, 1.22rem);
    color: rgba(255,255,255,0.72);
    max-width: 620px;
    margin: 0 auto 48px;
    line-height: 1.72;
    font-weight: 300;
}
.hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.hero-scroll-hint {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.72);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.hero-scroll-hint svg { animation: bounce-y 2.2s infinite; }
@keyframes bounce-y {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(7px); }
}

/* ── STATS BAR ─────────────────────────────────────────────── */
.stats-bar {
    background: #fff;
    border-bottom: 1px solid var(--border-lt);
    padding: 36px 0;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}
.stat-num {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1;
    letter-spacing: -0.04em;
}
.stat-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray);
    margin-top: 7px;
}
@media (max-width: 580px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── PROBLEM SECTION ────────────────────────────────────────── */
.pain-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: center;
}
.pain-items {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 36px;
}
.pain-row {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.pain-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pain-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--dark);
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pain-text {
    font-size: 0.93rem;
    color: var(--gray);
    line-height: 1.65;
}
/* Die Zusage steht fett am Anfang des Absatzes, der Beleg leise darunter.
   Bewusst diese Reihenfolge: Erst was wir tun, dann warum das reicht.
   Umgekehrt waere es Angstverkauf, und Angst ist ein schlechter Berater
   fuer eine Entscheidung, die den Betrieb jahrelang begleitet. */
.pain-text strong { color: var(--dark); font-weight: 700; }

/* Person am Angebot: ein Gesicht schlaegt im Handwerk jedes Versprechen */
.konf-person {
    display: inline-flex; align-items: center; gap: 14px;
    margin-top: 22px; padding: 10px 20px 10px 10px;
    background: var(--light); border-radius: 980px;
    text-align: left;
}
.konf-person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.konf-person-name { font-size: .9rem; font-weight: 700; color: var(--dark); letter-spacing: -0.01em; }
.konf-person-rolle { font-size: .78rem; color: var(--gray); margin-top: 2px; }
@media (max-width: 520px) {
    .konf-person { border-radius: 18px; padding: 12px 16px; }
    .konf-person-rolle { line-height: 1.4; }
}
.pain-fix {
    display: block;
    margin-top: 8px;
    padding-left: 14px;
    border-left: 2px solid var(--border-lt);
    color: var(--gray);        /* NICHT --gray-lt: das ist mit 3,62:1
                                  laut design-tokens.php nur Dekor. */
    font-weight: 400;
    font-size: 0.84rem;
    line-height: 1.55;
}
.pain-visual-wrap {
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--dark);
    position: relative;
    aspect-ratio: 4/3;
    box-shadow: var(--shadow-xl);
}
.pain-visual-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    filter: grayscale(20%);
    transition: opacity 0.4s;
}
.pain-visual-wrap:hover img { opacity: 0.75; }
.pain-visual-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 24px 28px;
    background: linear-gradient(to top, rgba(10,10,10,0.85) 0%, transparent 100%);
}
.pain-visual-caption p {
    color: rgba(255,255,255,0.65);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.5;
}
@media (max-width: 860px) {
    .pain-grid { grid-template-columns: 1fr; gap: 48px; }
    .pain-visual-wrap { display: none; }
}

/* ── PILLARS ────────────────────────────────────────────────── */
.pillars-intro { text-align: center; max-width: 680px; margin: 0 auto; }
.pillars-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 60px;
}
.pillar {
    background: #fff;
    border: 1px solid var(--border-lt);
    border-radius: var(--radius-xl);
    padding: 44px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.25s, transform 0.25s;
}
.pillar:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.pillar-number {
    font-size: 5rem;
    font-weight: 900;
    color: var(--border-lt);
    line-height: 1;
    letter-spacing: -0.06em;
    margin-bottom: 20px;
    user-select: none;
}
.pillar h3 { font-size: 1.35rem; margin-bottom: 14px; }
.pillar > p { color: var(--gray); line-height: 1.7; margin-bottom: 24px; }
.pillar-check-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 32px;
}
.pillar-check-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.88rem;
    color: var(--gray);
}
.pillar-check-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: var(--dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.pillar-check-icon svg { width: 10px; height: 10px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 768px) {
    .pillars-grid { grid-template-columns: 1fr; }
    .pillar { padding: 32px; }
}

/* ── TRAININGS GRID ─────────────────────────────────────────── */
.trainings-intro { max-width: 640px; }
.trainings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 52px;
}
.training-tile {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--dark);
    position: relative;
    aspect-ratio: 3/4;
    display: block;
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.training-tile:hover { transform: scale(1.025); box-shadow: var(--shadow-xl); }
.training-tile:active { transform: scale(0.99); transition-duration: 0.12s; }
.training-tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(15%);
    transition: transform 0.5s var(--ease-out), filter 0.3s var(--ease-out);
}
.training-tile:hover img { transform: scale(1.06); filter: grayscale(0%); }
.training-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.5) 55%, rgba(10,10,10,0.08) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
}
.training-tile-tag {
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 8px;
}
.training-tile h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.25;
}
.training-tile p {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.82);
    margin-bottom: 18px;
    line-height: 1.55;
}
.training-tile-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    padding: 7px 16px;
    width: fit-content;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.training-tile:hover .training-tile-link {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}
@media (max-width: 860px) {
    .trainings-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .trainings-grid { grid-template-columns: 1fr; }
    .training-tile { aspect-ratio: unset; min-height: 340px; }
}

/* ── SOFTWARE SECTION ───────────────────────────────────────── */
.software-intro { text-align: center; max-width: 740px; margin: 0 auto 72px; }
.software-intro h2 { color: #fff; }
.software-intro .lead { color: rgba(255,255,255,0.72); }

/* UI Mockup */
.ui-mockup {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-xl);
    padding: 28px;
    margin-bottom: 64px;
}
.ui-mockup-titlebar {
    display: flex;
    gap: 7px;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ui-dot { width: 11px; height: 11px; border-radius: 50%; }
.ui-dot-r { background: rgba(255,80,80,0.5); }
.ui-dot-y { background: rgba(255,180,50,0.5); }
.ui-dot-g { background: rgba(50,220,100,0.5); }
.ui-mockup-app {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 0;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    overflow: hidden;
    min-height: 260px;
}
.ui-sidebar {
    border-right: 1px solid rgba(255,255,255,0.06);
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ui-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255,255,255,0.72);
    transition: background 0.15s;
    cursor: default;
}
.ui-nav-item.active {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.82);
}
.ui-nav-icon { width: 14px; height: 14px; opacity: 0.6; }
.ui-main { padding: 22px 24px; }
.ui-panel-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(255,255,255,0.65);
    margin-bottom: 16px;
}
.cert-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 9px;
    padding: 11px 14px;
    margin-bottom: 7px;
    transition: background 0.15s;
}
.cert-row:hover { background: rgba(255,255,255,0.07); }
.cert-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cert-dot.ok     { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.5); }
.cert-dot.warn   { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,0.5); }
.cert-name {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.72);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cert-date {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.72);
    white-space: nowrap;
}
.cert-badge {
    font-size: 0.69rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
}
.cert-badge.ok   { background: rgba(74,222,128,0.15); color: #4ade80; }
.cert-badge.warn { background: rgba(251,191,36,0.15); color: #fbbf24; }
@media (max-width: 640px) {
    .ui-mockup-app { grid-template-columns: 1fr; }
    .ui-sidebar { display: none; }
}

/* Feature cards */
.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.feature-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-lg);
    padding: 36px;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.feature-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.14);
    transform: translateY(-2px);
}
.feature-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}
.feature-icon svg {
    width: 22px; height: 22px;
    stroke: rgba(255,255,255,0.68);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.feature-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.feature-card p {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.7;
}
@media (max-width: 680px) {
    .features-grid { grid-template-columns: 1fr; }
}

/* ── SOCIAL PROOF ───────────────────────────────────────────── */
.proof-header { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 64px;
}
@media (max-width: 1100px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .reviews-grid { grid-template-columns: 1fr; } }
.review-card {
    background: #fff;
    border: 1px solid var(--border-lt);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}
.review-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.review-stars { color: #f59e0b; font-size: 0.82rem; letter-spacing: 2px; margin-bottom: 12px; }
.review-text {
    font-size: 0.88rem;
    color: var(--dark);
    line-height: 1.72;
    font-style: italic;
    margin-bottom: 16px;
    flex: 1;
}
.review-author {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--gray);
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-lt);
}

.logos-section {
    border-top: 1px solid var(--border-lt);
    padding-top: 52px;
    text-align: center;
    overflow: hidden;
}
.logos-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 32px;
}
/* Marquee ticker — infinite, no pause */
.logos-ticker {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.logos-track {
    display: flex;
    gap: 64px;
    align-items: center;
    width: max-content;
    animation: logoScroll 18s linear infinite;
}
@keyframes logoScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.logo-wrap {
    flex-shrink: 0;
    opacity: 0.65;
    transition: opacity 0.25s;
}
.logo-wrap:hover { opacity: 1; }
.logo-wrap img {
    height: 120px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}

/* ── KONFIGURATOR ───────────────────────────────────────────── */
.configurator-wrap { max-width: 820px; margin: 0 auto; }
.configurator-header { text-align: center; margin-bottom: 48px; }

/* ── 2-step form ─── */
.h-form-progress { display:flex;align-items:center;margin-bottom:32px; }
.h-form-progress-step { display:flex;align-items:center;gap:9px;font-size:.8rem;font-weight:600;color:var(--gray);transition:color .2s; }
.h-form-progress-step.is-active,.h-form-progress-step.is-done { color:var(--dark); }
.h-form-progress-dot { width:26px;height:26px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--gray);transition:background .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out);flex-shrink:0; }
.h-form-progress-step.is-active .h-form-progress-dot,.h-form-progress-step.is-done .h-form-progress-dot { background:var(--dark);border-color:var(--dark);color:#fff; }
.h-form-progress-line { height:2px;flex:1;background:var(--border-lt);margin:0 12px;transition:background .3s; }
.h-form-progress-line.is-done { background:var(--dark); }

.h-step { display:none; }
.h-step.is-active { display:block;animation:hStepIn .28s ease; }
@keyframes hStepIn { from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)} }

/* Service cards */
.h-service-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px; }
@media(max-width:640px){ .h-service-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:400px){ .h-service-grid { grid-template-columns:1fr; } }
.h-sc { border:1.5px solid var(--border-lt);border-radius:13px;padding:16px 14px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:8px;transition:border-color .18s,background .18s,transform .15s;background:#fff;user-select:none;-webkit-tap-highlight-color:transparent; }
.h-sc:hover { border-color:var(--dark);background:var(--light);transform:translateY(-1px); }
.h-sc.is-selected { border-color:var(--dark);background:var(--dark); }
.h-sc.is-selected .h-sc-label { color:#fff; }
.h-sc.is-selected .h-sc-sub { color:rgba(255,255,255,.5); }
.h-sc.is-selected .h-sc-icon { background:rgba(255,255,255,.1); }
.h-sc.is-selected .h-sc-icon svg { stroke:#fff; }
.h-sc-icon { width:36px;height:36px;border-radius:9px;background:var(--light);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .18s; }
.h-sc-icon svg { width:18px;height:18px;stroke:var(--dark);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s; }
.h-sc-label { font-size:.85rem;font-weight:700;color:var(--dark);line-height:1.25;transition:color .18s; }
.h-sc-sub { font-size:.73rem;color:var(--gray);line-height:1.3;transition:color .18s; }
.h-sc-wide { grid-column:span 3; }
@media(max-width:640px){ .h-sc-wide { grid-column:span 2; } }
@media(max-width:400px){ .h-sc-wide { grid-column:span 1; } }

.h-next-btn { opacity:.35;pointer-events:none;transition:opacity .2s; }
.h-next-btn.is-ready { opacity:1;pointer-events:all; }

/* Step 2 fields */
.h-back-btn { display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:var(--gray);background:none;border:none;cursor:pointer;padding:0;margin-bottom:20px;font-family:inherit;transition:color .15s; }
.h-back-btn:hover { color:var(--dark); }
.h-back-btn svg { width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round; }
.h-selected-badge { display:inline-flex;align-items:center;gap:7px;background:var(--dark);color:#fff;font-size:.78rem;font-weight:600;padding:5px 13px 5px 9px;border-radius:980px;margin-bottom:22px;cursor:pointer; }
.h-selected-badge:hover { background:#000; }
.h-selected-badge svg { width:11px;height:11px;stroke:rgba(255,255,255,.6);fill:none;stroke-width:2.5; }

.h-form-row { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px; }
@media(max-width:520px){ .h-form-row { grid-template-columns:1fr; } }
.h-field { display:flex;flex-direction:column;gap:6px;margin-bottom:14px; }
.h-label { font-size:.74rem;font-weight:700;color:var(--gray);letter-spacing:.06em;text-transform:uppercase; }
.h-input,.h-textarea { width:100%;padding:12px 15px;min-height:44px;border:1.5px solid var(--border);border-radius:11px;font-size:1rem;font-family:inherit;color:var(--dark);background:#fff;transition:border-color .15s;appearance:none;-webkit-appearance:none; }
/* Fehlerzustand: Farbe UND Rahmenstärke UND Klartext, nie Farbe allein */
.h-input.has-error,.h-textarea.has-error { border-color:#b3001b; border-width:2px; }
.h-field-error { display:none; margin-top:6px; font-size:0.82rem; line-height:1.45; font-weight:600; color:#b3001b; }
.h-field-error::before { content:'▲ '; font-size:0.72rem; }
/* In der Checkbox-Zeile (flex) gehört die Meldung in eine eigene Zeile */
.h-check { flex-wrap: wrap; }
.h-check .h-field-error { flex: 0 0 100%; margin-top: 8px; }
.h-input:focus,.h-textarea:focus { border-color:var(--dark); }
.h-textarea { resize:vertical;min-height:90px; }
.h-check { display:flex;gap:11px;align-items:flex-start;margin-bottom:18px; }
.h-check input { margin-top:3px;width:15px;height:15px;flex-shrink:0;accent-color:var(--dark);cursor:pointer; }
.h-check label { font-size:.82rem;color:var(--gray);line-height:1.5;cursor:pointer; }
.h-submit { width:100%;justify-content:center; }
.h-disclaimer { font-size:.74rem;color:var(--gray);text-align:center;margin-top:12px;line-height:1.6; }

/* ── keep old conf-step-label block structure but hide old stuff */
.conf-step-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 14px;
}
.conf-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.conf-btn {
    padding: 11px 22px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--dark);
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out), color 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.conf-btn:hover { border-color: var(--dark); }
.conf-btn:active { transform: scale(0.98); }
.conf-btn.is-selected { background: var(--dark); color: #fff; border-color: var(--dark); }

.conf-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 8px;
}
.conf-input {
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: inherit;
    color: var(--dark);
    background: #fff;
    min-height: 44px;
    transition: border-color 0.15s;
}
.conf-input:focus { border-color: var(--dark); }
.conf-input::placeholder { color: var(--gray); }
.conf-submit {
    width: 100%;
    margin-top: 20px;
    justify-content: center;
    padding: 18px 32px;
    font-size: 1rem;
    border-radius: var(--radius);
}
.conf-disclaimer {
    text-align: center;
    font-size: 0.78rem;
    color: var(--gray);
    margin-top: 14px;
}
@media (max-width: 520px) {
    .conf-fields { grid-template-columns: 1fr; }
}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-wrap { max-width: 740px; margin: 52px auto 0; }
.faq-item { border-bottom: 1px solid var(--border-lt); }
.faq-item:first-child { border-top: 1px solid var(--border-lt); }
.faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark);
    gap: 20px;
    user-select: none;
    transition: color 0.15s;
}
.faq-q:hover { color: var(--gray); }
.faq-icon {
    width: 22px; height: 22px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    transition: transform 0.25s;
}
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-a {
    display: none;
    font-size: 0.93rem;
    color: var(--gray);
    line-height: 1.75;
    padding-bottom: 22px;
}
.faq-item.is-open .faq-a { display: block; }
.faq-item.is-open .faq-q { color: var(--gray); }

/* ── FINAL CTA ──────────────────────────────────────────────── */
.final-cta {
    background: var(--dark);
    padding: 120px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.final-cta-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% -20%, rgba(255,255,255,0.06) 0%, transparent 65%);
}
.final-cta-inner { position: relative; z-index: 1; }
.final-cta h2 { color: #fff; margin-bottom: 20px; }
.final-cta .lead {
    color: rgba(255,255,255,0.72);
    max-width: 540px;
    margin: 0 auto 44px;
}
.final-cta-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.final-trust {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 36px;
}
.final-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.72);
    font-weight: 500;
}
.final-trust-item svg {
    width: 14px; height: 14px;
    stroke: rgba(255,255,255,0.35);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
    background: #111;
    color: rgba(255,255,255,0.72);
    padding: 72px 0 36px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 56px;
}
.footer-brand img {
    height: 32px;
    width: auto;
    margin-bottom: 18px;
    filter: brightness(0) invert(1);
    opacity: 0.55;
}
.footer-brand p { font-size: 0.87rem; line-height: 1.72; max-width: 270px; }
.footer-brand .footer-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    min-height: 44px;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255,255,255,0.78);
    transition: color 0.15s;
}
.footer-brand .footer-phone:hover { color: #fff; }
.footer-col h3 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
    margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 2px; }
.footer-col ul li a {
    font-size: 0.87rem;
    color: rgba(255,255,255,0.72);   /* war 0.52 */
    transition: color 0.15s;
    display: flex;
    align-items: center;
    min-height: 44px;                /* Touch-Target statt 17px Textzeile */
}
.footer-col ul li a:hover { color: #fff; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.8rem;
}
.footer-bottom a { color: rgba(255,255,255,0.72); transition: color 0.15s; display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom a:hover { color: #fff; }
.footer-legal { display: flex; gap: 20px; align-items: center; }
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: span 2; }
}
@media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-brand { grid-column: span 1; }
}

/* ── MOBILE PHONE FLOATER ───────────────────────────────────── */
.phone-fab {
    position: fixed;
    bottom: 22px; right: 22px;
    background: var(--dark);
    color: #fff;
    width: 54px; height: 54px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35);
    z-index: 900;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.phone-fab:hover { transform: scale(1.08); box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
@media (max-width: 768px) { .phone-fab { display: flex; } }

/* ── COOKIE BANNER ──────────────────────────────────────────── */
/* Cookie-Banner-Styles: zentral in modules/consent.php */

/* ── SCROLL ANIMATIONS ──────────────────────────────────────── */
[data-fade] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
[data-fade].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── EMIL-POLISH: Press-Feedback, Stagger, Hero-Entrance ──────── */

/* Press-Feedback: jedes Element, das man drückt, reagiert sofort */
.btn:active            { transform: scale(0.97); transition-duration: 0.1s; }
.btn-dark:active,
.btn-primary:active,
.btn-white:active      { transform: scale(0.97) translateY(0); }

/* Textlinks im Fließtext tragen den Akzent (nicht Überschriften, nicht Icons) */
.body a:not(.btn), .lead a:not(.btn), .faq-a a:not(.btn) {
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.section--dark .body a:not(.btn), .section--dark .lead a:not(.btn),
.b2c-risk-section a:not(.btn), .final-cta .lead a:not(.btn) {
    color: var(--accent-on-dark);
}
.mode-toggle-btn       { transition: color 0.22s var(--ease-out), transform 0.18s var(--ease-out); }
.mode-toggle-btn:active{ transform: scale(0.95); }
.review-card:active    { transform: scale(0.99); transition-duration: 0.12s; }

/* Sichtbarer Fokusring (Tastatur) für ALLE fokussierbaren Elemente.
   Akzentfarbe + weißer Zwischenring, damit er auf hellem UND dunklem
   Grund sichtbar bleibt. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}
.section--dark a:focus-visible,
.section--dark button:focus-visible,
.hero a:focus-visible,
.hero button:focus-visible,
.final-cta a:focus-visible,
.final-cta button:focus-visible,
.b2c-risk-section a:focus-visible,
.b2c-risk-section button:focus-visible {
    outline-color: var(--accent-on-dark);
    box-shadow: 0 0 0 5px rgba(0,0,0,0.55);
}
/* Formularfelder: Fokus zusätzlich über den Rahmen, nicht nur über Farbe */
.h-input:focus-visible,
.h-textarea:focus-visible,
.conf-input:focus-visible {
    outline-offset: 1px;
    border-color: var(--accent) !important;
}

/* Stagger: Gruppen erscheinen kaskadierend statt alle auf einmal */
.b2c-bento     > [data-fade]:nth-child(2) { transition-delay: 0.07s; }
.b2c-bento     > [data-fade]:nth-child(3) { transition-delay: 0.14s; }
.stats-grid    > [data-fade]:nth-child(2) { transition-delay: 0.06s; }
.stats-grid    > [data-fade]:nth-child(3) { transition-delay: 0.12s; }
.stats-grid    > [data-fade]:nth-child(4) { transition-delay: 0.18s; }
.trainings-grid > [data-fade]:nth-child(2) { transition-delay: 0.07s; }
.trainings-grid > [data-fade]:nth-child(3) { transition-delay: 0.14s; }
.trainings-grid > [data-fade]:nth-child(4) { transition-delay: 0.21s; }

/* Hero: zarte gestaffelte Einblendung beim Laden (Apple-Gefühl) */
@keyframes heroIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-content .mode-toggle-wrap,
.hero-content .hero-badge,
.hero-content .hero-lead,
.hero-content .hero-actions,
.hero-content .hero-trustline { opacity: 0; animation: heroIn 0.75s var(--ease-out) forwards; }
.hero-content .mode-toggle-wrap { animation-delay: 0.05s; }
.hero-content .hero-badge       { animation-delay: 0.14s; }
.hero-content .hero-lead        { animation-delay: 0.42s; }
.hero-content .hero-actions     { animation-delay: 0.52s; }
.hero-content .hero-trustline   { animation-delay: 0.59s; }

/* Split-Line: jede Titel-Zeile gleitet maskiert von unten herein (Apple-/LP-Stil) */
.split-line  { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.split-inner { display: block; transform: translateY(115%); animation: splitUp 0.85s var(--ease-out) var(--d, 0s) both; }
@keyframes splitUp { from { transform: translateY(115%); } to { transform: translateY(0); } }

/* FAQ-Antwort sanft einblenden statt hart aufpoppen */
.faq-item.is-open .faq-a { animation: faqIn 0.3s var(--ease-out); }
@keyframes faqIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Karten-Stack im Wallet-Highlight: lebt leicht auf Hover */
.b2c-cards-scene { transition: transform 0.5s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .b2c-cards-scene:hover { transform: scale(1.03); }
}

/* Nutzer mit reduzierter Bewegung: Inhalte sofort zeigen, keine Bewegung */
@media (prefers-reduced-motion: reduce) {
    [data-fade] { opacity: 1; transform: none; transition: none; }
    .hero-content > * { opacity: 1; animation: none; }
    .split-inner { transform: none; animation: none; }
    .faq-item.is-open .faq-a { animation: none; }
    .btn:active, .mode-toggle-btn:active,
    .training-tile:active, .review-card:active { transform: none; }
    .b2c-cards-scene:hover { transform: none; }
}

/* ── MOBILE IMPROVEMENTS ────────────────────────────────────── */
@media (max-width: 480px) {
    /* Hero */
    .hero { min-height: 100svh; }
    .hero h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); margin-bottom: 18px; }
    .hero-lead { font-size: 1rem; margin-bottom: 32px; }
    .hero-actions { flex-direction: column; align-items: center; }
    .hero-actions .btn { width: 100%; max-width: 320px; justify-content: center; }
    /* Stats */
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .stat-num { font-size: 1.75rem; }
    /* Sections */
    .section { padding: 64px 0; }
    .wrap { padding: 0 20px; }
    /* Pain / problem */
    .pain-grid { gap: 32px; }
    /* Reviews */
    .reviews-grid { grid-template-columns: 1fr; }
    /* Form */
    .h-form-row { grid-template-columns: 1fr; }
    .h-service-grid { grid-template-columns: 1fr 1fr; }
    /* Final CTA */
    .final-cta { padding: 72px 0; }
    .final-cta-actions { flex-direction: column; align-items: center; }
    .final-cta-actions .btn { width: 100%; max-width: 320px; justify-content: center; }
    /* Footer */
    .footer { padding: 56px 0 40px; }
    /* WhatsApp FAB + Phone FAB spacing, inkl. iOS-Safe-Area */
    .wa-fab-index { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right: 18px; }
    .phone-fab   { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); right: 18px; }
    /* Freiraum, damit die fixierten Buttons keine Inhalte verdecken */
    .hero { padding-bottom: 132px; }
    .final-cta { padding-bottom: 128px; }
}
@media (max-width: 360px) {
    .hero h1 { font-size: 2.2rem; }
    .h-service-grid { grid-template-columns: 1fr; }
}

/* ── UTILS ──────────────────────────────────────────────────── */
.text-center { text-align: center; }
.mt-6  { margin-top: 24px; }
.mt-10 { margin-top: 40px; }
.mt-14 { margin-top: 56px; }
.gap-3 { gap: 12px; }

/* ── MODE TOGGLE ─────────────────────────────────────────────── */
.mode-toggle-wrap { margin-bottom: 36px; }
.mode-toggle-hint {
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);   /* war 0.28 = 2,5:1, jetzt AA-konform */
    display: block;
    margin-bottom: 10px;
}
.mode-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    padding: 5px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    box-shadow: 0 2px 16px rgba(0,0,0,0.2);
}
.mode-toggle-indicator {
    position: absolute;
    top: 5px; left: 5px;
    border-radius: 999px;
    background: #fff;
    transition: transform 0.32s cubic-bezier(.34,1.56,.64,1), width 0.32s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
    z-index: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.mode-toggle-btn {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    min-height: 44px;                /* Touch-Target-Minimum */
    justify-content: center;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 600;
    color: rgba(255,255,255,0.72);   /* war 0.48, jetzt deutlich lesbar */
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.22s;
    font-family: inherit;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: -0.01em;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mode-toggle-btn.is-active { color: #1d1d1f; }
.mode-toggle-btn svg {
    width: 13px; height: 13px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
}

/* ── B2B / B2C VISIBILITY ────────────────────────────────────── */
html[data-mode="b2c"] .b2b-only { display: none !important; }
html[data-mode="b2b"] .b2c-only { display: none !important; }

/* ── B2C BOOKING SECTION ─────────────────────────────────────── */
.b2c-booking-wrap {
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.35);
}
.b2c-booking-wrap iframe {
    width: 100%; min-height: 620px; border: none; display: block;
}

/* ── TRUST / ANERKENNUNG STRIP ───────────────────────────────── */
.trust-strip { background:#fff; border-bottom:1px solid var(--border-lt); padding:24px 0; }
.trust-inner { display:flex; align-items:center; justify-content:center; gap:14px 42px; flex-wrap:wrap; text-align:center; }
.trust-label { font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); }
.trust-logos { display:flex; align-items:center; gap:36px; flex-wrap:wrap; justify-content:center; }
.trust-logos img { height:34px; width:auto; filter:grayscale(100%); opacity:.6; transition:opacity .2s; }
.trust-logos img:hover { opacity:.9; }
.trust-chip { display:inline-flex; align-items:center; gap:7px; font-size:.8rem; font-weight:600; color:var(--gray); white-space:nowrap; }
.trust-chip svg { width:15px; height:15px; stroke:var(--dark); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.trust-logos--light img { filter:grayscale(100%) brightness(0) invert(1); opacity:.5; }
@media(max-width:560px){ .trust-logos img { height:27px; } .trust-inner { gap:12px 22px; } }

/* ── B2B-DRAMATURGIE: Sektionsreihenfolge je Zielgruppe ──────────
   Eine Privatperson und ein Geschaeftsfuehrer suchen nicht dasselbe.
   Die Privatperson will wissen, was sie bekommt und was es kostet.

   Der Geschaeftsfuehrer bekommt bewusst KEINE Angst-Dramaturgie
   ("erst das Problem, dann die Rettung"), sondern zuerst die eine
   Sache, die uns von jedem anderen Schulungsanbieter unterscheidet:
   das Cockpit. Schulungen kann jeder, die luckenlose Uebersicht nicht.

     1. Das koennen nur wir            (Cockpit, das eigentliche Produkt)
     2. Das nehmen wir Ihnen ab        (vier Dinge, souveraen formuliert)
     3. Reden wir darueber             (Waldemar, das Angebot)
     4. Was alles dazugehoert          (2-in-1: Akademie, SIFA, Pruefung)
     5. Welche Schulungen es gibt      (Schulungsangebot)
     6. Was Ihre Leute davon haben     (Lernwelt)
     7. Wer das bestaetigt             (Kundenstimmen)
     8. Und was ist mit ...            (FAQ)

   Umgesetzt per `order`, damit das bestehende Markup unveraendert
   bleibt und der Privatkunden-Modus exakt so aussieht wie bisher:
   ohne data-mode="b2b" ist .idx-flow kein Flex-Container, und dann
   sind alle order-Werte wirkungslos.

   Bekannter Nachteil: Die Tab-Reihenfolge folgt dem DOM, nicht der
   sichtbaren Reihenfolge. Entschaerft dadurch, dass der wichtigste
   Block (Konfigurator) im B2B ueber den Navigations-CTA
   "Schulung anfragen" direkt per Tastatur erreichbar ist. */
html[data-mode="b2b"] .idx-flow { display: flex; flex-direction: column; }
/* Neuer, gestraffter B2B-Fluss (2026-07-28): Cockpit zuerst (das, was nur
   wir bieten), dann Entlastung, Leistungen, Beweis, das Gespraech, FAQ.
   2-in-1 und der Lernwelt-Magnet sind aus der B2B-Strecke entfernt. */
html[data-mode="b2b"] .idx-o-50  { order: 10; }   /* Cockpit, die eine Sache   */
html[data-mode="b2b"] .idx-o-10  { order: 20; }   /* Das nehmen wir ab         */
html[data-mode="b2b"] .idx-o-40  { order: 30; }   /* Leistungen / Schulung     */
html[data-mode="b2b"] .idx-o-60  { order: 40; }   /* Kundenstimmen / Beweis    */
html[data-mode="b2b"] .idx-o-30  { order: 50; }   /* Waldemar / Anfrage        */
html[data-mode="b2b"] .idx-o-80  { order: 60; }   /* FAQ                       */

/* ── B2C: NÄCHSTE TERMINE (SEO + Knappheit) ─────────────────── */
.termine-head { font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,0.72); margin-bottom:14px; text-align:left; }
.termine-list { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:28px; }
@media(max-width:760px){ .termine-list { grid-template-columns:1fr; } }
.termin-card { display:flex; flex-direction:column; gap:5px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:18px 20px; transition:border-color .2s, background .2s; }
.termin-card:hover { border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.08); }
.termin-date { font-size:1.02rem; font-weight:700; color:#fff; }
.termin-title { font-size:.83rem; color:rgba(255,255,255,0.62); line-height:1.35; }
.termin-meta { font-size:.77rem; color:rgba(255,255,255,0.72); display:flex; gap:10px; flex-wrap:wrap; margin-top:3px; align-items:center; }
.termin-free { display:inline-flex; align-items:center; gap:5px; font-weight:600; color:rgba(255,255,255,0.72); }
.termin-free.few { color:#fff; }
.termin-soldout { display:inline-flex; align-items:center; gap:5px; font-weight:600; color:rgba(255,255,255,0.72); }
.termin-card.is-soldout { opacity:.62; }

/* ── B2C: WERTBLOCK + BESTEHENSGARANTIE ─────────────────────── */
.b2c-value { display:grid; grid-template-columns:1.25fr 1fr; gap:16px; margin-bottom:30px; }
@media(max-width:760px){ .b2c-value { grid-template-columns:1fr; } }
.b2c-value-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); border-radius:20px; padding:26px 28px; }
.b2c-value-card h3 { color:#fff; font-size:1.02rem; margin-bottom:18px; }
.b2c-value-card h3 span { color:#fff; }
.b2c-incl { display:grid; grid-template-columns:1fr 1fr; gap:11px 18px; }
@media(max-width:480px){ .b2c-incl { grid-template-columns:1fr; } }
.b2c-incl-row { display:flex; align-items:flex-start; gap:9px; font-size:.84rem; color:rgba(255,255,255,0.74); line-height:1.4; }
.b2c-incl-row svg { width:16px; height:16px; flex-shrink:0; margin-top:1px; stroke:#fff; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.b2c-guarantee { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.14); border-radius:20px; padding:26px 28px; display:flex; flex-direction:column; justify-content:center; }
.b2c-guarantee-badge { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; background:rgba(255,255,255,0.1); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:6px 13px; border-radius:980px; margin-bottom:14px; }
.b2c-guarantee-badge svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.b2c-guarantee h3 { color:#fff; font-size:1.12rem; margin-bottom:8px; line-height:1.25; }
.b2c-guarantee p { font-size:.86rem; color:rgba(255,255,255,0.72); line-height:1.6; }

/* ── B2C HERO: Subheadline + Bullets + Trustline ─────────────── */
.hero-sub-bold {
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    font-weight: 800; color: #fff; letter-spacing: -0.02em;
    margin: 0 auto 26px; max-width: 640px; line-height: 1.3;
}
.hero-bullets { display:flex; flex-direction:column; gap:12px; max-width:560px; margin:0 auto 40px; text-align:left; }
.hero-bullet { display:flex; align-items:flex-start; gap:12px; font-size:0.97rem; font-weight:500; color:rgba(255,255,255,0.85); line-height:1.4; }
.hero-bullet svg { width:20px; height:20px; flex-shrink:0; margin-top:1px; stroke:#fff; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.hero-trustline { display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:26px; font-size:0.82rem; font-weight:600; color:rgba(255,255,255,0.78); }
.hero-trustline .tl-item { white-space:nowrap; }
.hero-trustline .dot { width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,0.45); flex-shrink:0; }
.hero-trustline .stars { letter-spacing:1px; color:#fff; }
/* Schmale Viewports: sauber untereinander statt hängender Trennpunkte */
@media (max-width: 640px) {
    .hero-trustline { flex-direction:column; gap:8px; }
    .hero-trustline .dot { display:none; }
}

/* ── B2C: striktes Schwarz-Weiß (Apple-Look, strikt monochrom) ─────────────── */
html[data-mode="b2c"] .hero-badge-dot { background:#fff; box-shadow:0 0 8px rgba(255,255,255,0.45); }
html[data-mode="b2c"] .review-stars { color:#1d1d1f; }

/* ── B2C: Risiko-Umkehr-Sektion (dunkel, direkt nach Pain) ──── */
.b2c-risk-section { background:#0a0a0a; padding:72px 0; }