/* ================================================================
   apvros — "Aufmass"
   Die Seite ist gesetzt wie ein Aufmassblatt: Navy ist die Tinte,
   Tuerkis der Mass- und Bestaetigungsstrich, Papier traegt alles.
   Beide Farben kommen exakt aus dem Logo.
   ================================================================ */

:root {
    /* === GRUND: Zeichenpapier === */
    --paper:        #F1F4F7;
    --paper-2:      #E7ECF2;   /* zurueckgesetztes Band */
    --sheet:        #FFFFFF;   /* Karte / Blatt */

    /* === TINTE: Logo-Navy #022956 === */
    --ink:          #022956;
    --ink-2:        #0B3F72;   /* Links, Hover */
    --ink-soft:     #4E6280;   /* Sekundaertext        5,6:1 auf Papier */
    --ink-mute:     #5A6F8F;   /* Label, Meta          4,6:1 auf Papier */
    --rule:         rgba(2, 41, 86, 0.12);
    --rule-2:       rgba(2, 41, 86, 0.22);
    --wash:         rgba(2, 41, 86, 0.05);
    --wash-2:       rgba(2, 41, 86, 0.09);

    /* === MARKE: Logo-Tuerkis #0BC0B5 ===
       Hell nur als Flaeche. Als Linie oder Text zu schwach auf Papier
       (2,1:1), deshalb --mark-deep fuer alles Lesbare. */
    --mark:         #0BC0B5;
    --mark-deep:    #06776F;   /* 4,9:1 auf Papier */
    --mark-wash:    #E2F6F4;
    --mark-rule:    rgba(6, 119, 111, 0.28);

    /* === Der alte, rostige Weg === */
    --rust:         #9E4A38;
    --rust-wash:    #F8ECE9;

    /* === Dunkles Band: Kontakt + Footer === */
    --deep:         #02203F;
    --deep-2:       #041B33;
    --deep-3:       #073055;
    --on-deep:      #E8EFF6;
    --on-deep-soft: #A7BCD2;
    --on-deep-rule: rgba(255, 255, 255, 0.12);

    /* === Signal === */
    --ok:           #06776F;
    --warn:         #A96A11;
    --bad:          #9E4A38;

    /* === Typografie ===
       Archivo: Grotesk mit Breitenachse — Headlines leicht expandiert,
       normblatthaft. IBM Plex Mono: alles Gemessene. */
    --font:         'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:    'IBM Plex Mono', 'Consolas', ui-monospace, monospace;

    /* === Radien: technisch, knapp === */
    --r-xs:   2px;
    --r-sm:   4px;
    --r-md:   6px;
    --r-lg:   10px;
    --r-full: 999px;

    /* === Schatten: kuehl getoent, sehr zurueckhaltend === */
    --sh-sm:   0 1px 2px rgba(2, 41, 86, 0.06);
    --sh-md:   0 1px 2px rgba(2, 41, 86, 0.05), 0 6px 16px rgba(2, 41, 86, 0.06);
    --sh-lg:   0 2px 4px rgba(2, 41, 86, 0.05), 0 16px 40px rgba(2, 41, 86, 0.10);
    --sh-xl:   0 4px 8px rgba(2, 41, 86, 0.06), 0 30px 70px rgba(2, 41, 86, 0.14);

    /* === Raster ===
       Kompakter als ein klassisches Marketing-Layout: die Seite soll auf
       einem Laptop-Bildschirm ohne Herauszoomen wirken, nicht wie ein
       Praesentations-Deck. */
    --sp-1:  0.5rem;
    --sp-2:  0.875rem;
    --sp-3:  1.25rem;
    --sp-4:  1.5rem;
    --sp-5:  2.25rem;
    --sp-6:  3rem;
    --sp-7:  4.25rem;
    --gutter: 1.5rem;
    --measure: 1180px;

    /* === Uebergaenge === */
    --t-fast: 130ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow: 620ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Rueckwaerts-Kompatibilitaet: Unterseiten und main.js greifen
       teils noch auf die alten Namen zu. */
    --bg-base:        var(--paper);
    --bg-surface:     var(--sheet);
    --bg-elevated:    var(--paper-2);
    --bg-card:        var(--sheet);
    --bg-card-hover:  var(--sheet);
    --bg-input:       var(--sheet);
    --accent:         var(--ink);
    --accent-light:   var(--ink-2);
    --accent-dim:     var(--wash);
    --accent2:        var(--mark);
    --accent3:        var(--mark-deep);
    --text-primary:   var(--ink);
    --text-secondary: var(--ink-soft);
    --text-muted:     var(--ink-mute);
    --text-accent:    var(--mark-deep);
    --border:         var(--rule);
    --border-card:    var(--rule);
    --border-hover:   var(--rule-2);
}


/* ================================================================
   RESET & BASIS
   ================================================================ */

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

* { margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.58;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-synthesis-weight: none;
}

img, svg, video { display: block; max-width: 100%; }

/* <picture> erzeugt keinen eigenen Kasten.

   Das <img> liegt jetzt in einem <picture>, damit der Browser das WebP
   nehmen kann. Ohne diese Regel waere das <picture> ein Inline-Kasten
   ohne feste Hoehe — und jede prozentuale Hoehe im Stylesheet wuerde sich
   auf dieses leere Zwischenelement beziehen statt auf den Rahmen darum.
   Beim Logo in der Navigation (.logo-icon ist 34 px hoch, .logo-img nimmt
   height: 100%) waere das Bild damit auf seine Eigengroesse von 891 Pixeln
   gesprungen.

   display: contents nimmt das <picture> aus dem Layout heraus: das <img>
   ist fuer die Anordnung wieder unmittelbares Kind seines Rahmens, und
   alle bestehenden Regeln greifen unveraendert weiter. */
picture { display: contents; }

a { color: var(--ink-2); text-decoration: none; }
a:hover { color: var(--ink); }

button, input, textarea, select { font: inherit; color: inherit; }

ul, ol { list-style: none; }

:focus-visible {
    outline: 2px solid var(--mark-deep);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

::selection { background: var(--mark); color: #04302C; }


/* ================================================================
   LAYOUT
   ================================================================ */

.container {
    width: 100%;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

section { position: relative; }

/* Sektionsrhythmus. Eine Regel, keine konkurrierenden Paddings. */
.benefits-compact-section,
.modules-compact-section,
.technology-section,
.feature-showcase-section,
.comparison-section,
.faq-section,
.internal-links-section,
.flow-section,
.contact-section {
    padding: var(--sp-7) 0;
}

/* Abwechselnder Grund gibt Rhythmus ohne Deko. */
.modules-compact-section,
.faq-section { background: var(--paper-2); }

.technology-section,
.feature-showcase-section { background: var(--sheet); }

.text-center { text-align: center; }


/* ================================================================
   TYPOGRAFIE
   ================================================================ */

h1, h2, h3, h4 {
    font-family: var(--font);
    color: var(--ink);
    text-wrap: balance;
}

/* Deutsche Komposita wie "Handwerkersoftware" sind laenger als eine halbe
   Spalte. Grosse Displaygroesse plus Silbentrennung, damit nichts ausbricht. */
h1 {
    font-size: clamp(1.75rem, 3vw, 2.6rem);
    font-weight: 700;
    font-stretch: 106%;
    line-height: 1.08;
    letter-spacing: -0.02em;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

h2, .section-title {
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    font-weight: 700;
    font-stretch: 105%;
    line-height: 1.1;
    letter-spacing: -0.018em;
}

h3 {
    font-size: 1.1875rem;
    font-weight: 650;
    line-height: 1.28;
    letter-spacing: -0.006em;
}

h4 {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.004em;
}

/* Fettdruck greift auf das Token zu, nicht auf einen festen Wert. Sonst
   stuende er auf den dunklen Baendern in Navy auf Navy – also unsichtbar. */
strong, b { font-weight: 650; color: var(--text-primary); }

/* Alles Gemessene laeuft im Mono-Schnitt: Stunden, Preise, Normen. */
.num,
.stats-bar-value,
.quick-stat-value,
.measure-value,
.flow-step-idx {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}


/* ================================================================
   ZEICHENGERAET — die Struktur-Devices des Blattes.
   Jedes traegt Information, keines ist Deko.
   ================================================================ */

/* Blattbezeichnung: Tuerkis-Marke, Mono-Label, Hilfslinie nach rechts. */
.section-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 1.25rem;
}

.section-label::before {
    content: '';
    width: 7px;
    height: 7px;
    flex: none;
    background: var(--mark);
    box-shadow: 0 0 0 1px var(--mark-deep);
}

.section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rule);
}

.section-header.text-center .section-label { justify-content: center; }
.section-header.text-center .section-label::after { display: none; }

/* Alter Name, neue Gestalt — die Unterseiten nutzen ihn noch. */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 1rem;
}

.section-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--mark);
    box-shadow: 0 0 0 1px var(--mark-deep);
}

.section-header {
    max-width: 46rem;
    margin-bottom: var(--sp-5);
}

.section-header.text-center { margin-left: auto; margin-right: auto; }

.section-description {
    margin-top: 1rem;
    font-size: 1.09375rem;
    color: var(--ink-soft);
    max-width: 40rem;
}

.section-header.text-center .section-description { margin-left: auto; margin-right: auto; }

/* Das Blatt: hairline, minimaler Radius, kein Glas. */
.sheet {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
}

/* Randleiste links — wie der Rand eines Zeichenblatts. */
.rail {
    position: relative;
    padding-left: 1.5rem;
}

.rail::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 2px;
    background: linear-gradient(180deg, var(--mark) 0%, var(--mark) 34%, var(--rule) 34%);
}


/* ================================================================
   NAVIGATION
   ================================================================ */

.navbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    background: rgba(241, 244, 247, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: background var(--t-base), border-color var(--t-base);
}

.navbar.scrolled {
    background: rgba(241, 244, 247, 0.94);
    border-bottom-color: var(--rule);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    height: 72px;
}

.logo { display: flex; align-items: center; flex: none; }

.logo-icon {
    display: flex;
    align-items: center;
    height: 34px;
}

.logo-img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-link {
    position: relative;
    padding: 0.5rem 0.85rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink-soft);
    border-radius: var(--r-sm);
    transition: color var(--t-fast);
}

.nav-link:hover { color: var(--ink); }

/* Aktiver Abschnitt bekommt die Tuerkis-Marke, kein Farbverlauf. Die
   Buttons verlinken beide auf #contact und werden daher ebenfalls als
   "aktiv" markiert — ohne diese Regel wuerde .active dem gefuellten
   Primaerbutton seine weisse Schrift stehlen (Navy auf Navy). */
.nav-link.active { color: var(--ink); }
.nav-link.active.nav-btn-primary { color: #fff; }

.nav-link.active:is(.nav-btn-outline, .nav-btn-primary)::after { display: none; }

.nav-link.active::after {
    content: '';
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.15rem;
    height: 2px;
    background: var(--mark);
}

.nav-btn-outline {
    margin-left: 0.5rem;
    padding: 0.55rem 1.05rem;
    border: 1px solid var(--rule-2);
    color: var(--ink);
    font-weight: 550;
}

.nav-btn-outline:hover {
    border-color: var(--ink);
    background: var(--wash);
}

.nav-btn-primary {
    padding: 0.6rem 1.15rem;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    border-radius: var(--r-sm);
}

.nav-btn-primary:hover { background: var(--ink-2); color: #fff; }

/* Der Shine-Layer der alten Seite wird still gelegt statt entfernt —
   die Unterseiten setzen ihn noch. */
.btn-shine, .btn-glow { display: none; }

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 9px;
    background: none;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-sm);
    cursor: pointer;
}

.mobile-menu-btn span {
    display: block;
    height: 2px;
    background: var(--ink);
    transition: transform var(--t-base), opacity var(--t-fast);
}

.mobile-menu-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    padding: var(--sp-2) var(--gutter) var(--sp-3);
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--sh-lg);
    transform: translateY(-120%);
    transition: transform var(--t-base);
}

.mobile-menu.active { transform: translateY(0); }

.mobile-menu-backdrop {
    position: fixed;
    inset: 72px 0 0 0;
    z-index: 998;
    background: rgba(2, 32, 63, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base);
}

.mobile-menu-backdrop.active { opacity: 1; pointer-events: auto; }

.mobile-menu-content { display: contents; }

.mobile-link {
    padding: 0.9rem 0.25rem;
    font-size: 1.0625rem;
    font-weight: 550;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
}

.mobile-link-primary {
    margin-top: var(--sp-2);
    padding: 0.9rem;
    background: var(--ink);
    color: #fff;
    text-align: center;
    border: none;
    border-radius: var(--r-sm);
}


/* ================================================================
   BUTTONS
   ================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-fast), border-color var(--t-fast),
                color var(--t-fast), transform var(--t-fast);
}

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

.btn-primary {
    background: var(--ink);
    color: #fff;
}

.btn-primary:hover {
    background: var(--ink-2);
    color: #fff;
}

.btn-secondary {
    background: transparent;
    border-color: var(--rule-2);
    color: var(--ink);
}

.btn-secondary:hover {
    border-color: var(--ink);
    background: var(--wash);
    color: var(--ink);
}

/* Der Pfeil ruckt beim Hover nach — eine Bewegung, nicht drei. */
.btn-arrow, .btn-icon { transition: transform var(--t-fast); }
.btn:hover .btn-arrow,
.btn:hover .btn-icon { transform: translateX(3px); }

.btn-hover-lift:hover { transform: translateY(-1px); }

.btn:disabled, .btn[aria-disabled='true'] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.spinner { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ================================================================
   HERO
   ================================================================ */

.hero {
    padding: calc(72px + var(--sp-7)) 0 var(--sp-7);
    background: var(--paper);
    overflow: hidden;
}

/* Millimeterpapier, sehr leise — nur damit der Grund nicht leer wirkt. */
.hero-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--rule) 1px, transparent 1px),
        linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
    background-size: 88px 88px;
    -webkit-mask-image: radial-gradient(115% 85% at 18% 0%, #000 0%, transparent 72%);
            mask-image: radial-gradient(115% 85% at 18% 0%, #000 0%, transparent 72%);
    opacity: 0.75;
}

.hero-content {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: var(--sp-6);
    align-items: start;
}

.hero-text { min-width: 0; }

.hero-badge-wrapper { margin-bottom: 1.1rem; }

/* Herkunftsmarke: Flagge, Ort, Hilfslinie. */
.hero-badge-new {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.7rem 0.4rem 0.55rem;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-left: 2px solid var(--mark);
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
}

.hero-title { margin-bottom: 1.25rem; }

.hero-title-key { color: var(--ink); }

/* Die Kernzahl bekommt den Mono-Schnitt und die Tuerkis-Unterstreichung —
   sie ist ein Messwert, kein Schmuck. */
/* Der Messwert wird tuerkis unterstrichen. Ein Strich, kein zweiter —
   die Angabe darf nicht umbrechen. */
.hero-title-num {
    white-space: nowrap;
    hyphens: none;
    background-image: linear-gradient(var(--mark), var(--mark));
    background-repeat: no-repeat;
    background-position: 0 94%;
    background-size: 100% 0.13em;
    padding-bottom: 0.03em;
}

/* Nur die Zahl laeuft im Mono-Schnitt. Das ganze Wort darin zu setzen
   liess "15  Stunden" auseinanderfallen und kaempfte mit der Displayschrift. */
.hero-title-digits {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: -0.05em;
}

.hero-description-secondary {
    font-size: 1.125rem;
    color: var(--ink-soft);
    max-width: 34rem;
    margin-bottom: var(--sp-4);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: var(--sp-4);
}

/* Vertrauenszeilen: Mono, Haekchen in Tuerkis, kein Icon-Zoo. */
.trust-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--rule);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
}

.trust-icon {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--mark-deep);
}

.trust-icon svg,
.trust-icon i { width: 14px; height: 14px; }


/* ---------------------------------------------------------------
   IMPACT-KARTE — das Signature-Element im Hero.
   Vorher/Nachher als Balkenvergleich, darunter die grosse animierte
   Kennzahl — die Sprache eines ERP-KPI-Kaertchens statt einer
   abstrakten Zeichnungsmetapher.
   --------------------------------------------------------------- */

.impact-card {
    margin-bottom: var(--sp-4);
    padding: 1.4rem 1.5rem 1.5rem;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-sm);
}

.impact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.impact-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.impact-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mark-deep);
    background: var(--mark-wash);
    border-radius: var(--r-full);
}

.impact-row {
    display: grid;
    grid-template-columns: 6rem 1fr 2.75rem;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.65rem;
}

.impact-row-lbl { white-space: nowrap; }

.impact-row-lbl {
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--ink-soft);
}

.impact-bar-track {
    position: relative;
    height: 18px;
    border-radius: var(--r-xs);
    background: var(--wash);
    overflow: hidden;
}

.impact-bar-fill {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: var(--r-xs);
    transform-origin: left center;
}

.impact-bar-before { background: var(--rule-2); }
.impact-bar-after  { background: var(--mark); }

.impact-row-val {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    text-align: right;
}

.impact-row-val.is-mark { color: var(--mark-deep); }

.impact-foot {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    margin-top: 1.05rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--rule);
}

.impact-foot-num {
    flex: none;
    font-family: var(--font-mono);
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mark-deep);
    white-space: nowrap;
}

.impact-foot-lbl {
    font-size: 0.8125rem;
    line-height: 1.42;
    color: var(--ink-mute);
}

/* Die Balken wachsen beim Laden einmal aus, die Kennzahl zaehlt hoch
   (siehe [data-count-to] in main.js). */
@media (prefers-reduced-motion: no-preference) {
    .impact-bar-fill   { animation: fv-grow 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
    .impact-bar-before { animation-delay: 120ms; }
    .impact-bar-after  { animation-delay: 420ms; }
}


/* ---------------------------------------------------------------
   HERO — Bildseite
   --------------------------------------------------------------- */

.hero-image {
    position: relative;
    min-width: 0;
}

/* Browserrahmen statt Glas-Mockup: der Screenshot ist der Beweis. */
.frame {
    background: var(--sheet);
    border: 1px solid var(--rule-2);
    border-radius: var(--r-md);
    box-shadow: var(--sh-xl);
    overflow: hidden;
}

.frame-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
}

.frame-dots { display: flex; gap: 5px; }

.frame-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--rule-2);
}

.frame-url {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-full);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--ink-mute);
}

.frame-viewport {
    aspect-ratio: 8 / 5;
    overflow: hidden;
}

/* ---------------------------------------------------------------
   HERO — Dashboard-Mock
   Kein Foto: ein nachgebautes, animiertes Mini-Dashboard aus den
   Marken-Tokens. Bleibt auf jeder Groesse gestochen scharf, statt
   als winziger, verschwommener Screenshot zu wirken.
   --------------------------------------------------------------- */

.dash-mock {
    display: flex;
    width: 100%;
    height: 100%;
    background: var(--sheet);
}

.dash-mock-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    flex: 0 0 20%;
    padding: 0.9rem 0.6rem;
    background: var(--paper-2);
    border-right: 1px solid var(--rule);
}

.dash-mock-logo {
    width: 18px;
    height: auto;
    margin-bottom: 0.35rem;
    opacity: 0.85;
}

.dash-mock-nav-item {
    display: block;
    height: 6px;
    width: 60%;
    border-radius: var(--r-full);
    background: var(--rule-2);
}

.dash-mock-nav-item.is-active {
    width: 100%;
    height: 9px;
    background: var(--mark-wash);
    border-left: 2px solid var(--mark-deep);
    border-radius: 1px var(--r-full) var(--r-full) 1px;
}

.dash-mock-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0.9rem 1rem 1rem;
    gap: 0.7rem;
}

.dash-mock-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dash-mock-title {
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--ink);
}

.dash-mock-live {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mark-deep);
}

.dash-mock-live-dot {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mark);
}

.dash-mock-live-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--mark);
}

.dash-mock-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.dash-mock-kpi {
    min-width: 0;
    padding: 0.5rem 0.55rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-xs);
}

.dash-mock-kpi-lbl {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-mock-kpi-val {
    display: block;
    margin-top: 0.2rem;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.dash-mock-kpi-trend {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: var(--mark-deep);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-mock-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 0.55rem;
    min-height: 0;
}

.dash-mock-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 0.5rem 0.6rem 0.6rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-xs);
}

.dash-mock-panel-lbl {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 0.5rem;
}

.dash-mock-bars {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    gap: 6%;
    min-height: 0;
}

.dash-mock-bar {
    flex: 1 1 auto;
    height: var(--h);
    background: var(--wash-2);
    border-radius: 1px 1px 0 0;
    transform-origin: bottom;
}

.dash-mock-bar.is-current { background: var(--mark); }

.dash-mock-rows {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.dash-mock-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.dash-mock-row-dot {
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mark-deep);
}

.dash-mock-row-line {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.56rem;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-mock-row-tag {
    flex: none;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: var(--ink-mute);
}

/* Balken wachsen, Kacheln und Zeilen blenden sich gestaffelt ein — wie
   ein Dashboard, das gerade seine Daten laedt. Ohne Bewegungspraeferenz
   stehen alle Endzustaende sofort fest (oben per --h/CSS gesetzt). */
@media (prefers-reduced-motion: no-preference) {
    .dash-mock-bar {
        animation: dash-bar-grow 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: calc(var(--i, 0) * 70ms + 420ms);
    }
    .dash-mock-kpi {
        animation: fade-in 420ms ease-out both;
        animation-delay: calc(var(--i, 0) * 90ms + 260ms);
    }
    .dash-mock-row {
        animation: fade-in 380ms ease-out both;
        animation-delay: calc(var(--i, 0) * 110ms + 680ms);
    }
    .dash-mock-live-dot::after {
        animation: dash-pulse 2200ms ease-out infinite;
    }
}

@keyframes dash-bar-grow {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@keyframes dash-pulse {
    0%   { transform: scale(0.7); opacity: 0.9; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* Eine einzige Notiz am Bild, mit Leader-Linie wie ein Zeichnungsvermerk. */
.hero-note {
    position: absolute;
    right: -1.25rem;
    bottom: -2.25rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1rem;
    background: var(--sheet);
    border: 1px solid var(--rule-2);
    border-left: 2px solid var(--mark);
    border-radius: var(--r-xs);
    box-shadow: var(--sh-lg);
}

.hero-note-val {
    font-family: var(--font-mono);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
}

.hero-note-lbl {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.hero-mobile-intro { display: none; }


/* ================================================================
   KENNZAHLENBAND
   ================================================================ */

.stats-bar {
    background: var(--sheet);
    border-block: 1px solid var(--rule);
}

.stats-bar-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.stats-bar-item {
    padding: var(--sp-4) var(--sp-2);
    text-align: center;
    border-left: 1px solid var(--rule);
}

.stats-bar-item:first-child { border-left: none; }

.stats-bar-value {
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
}

.stats-bar-label {
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-mute);
}


/* ================================================================
   ABLAUF — der einzige echte Ablauf der Seite, deshalb der einzige
   Ort mit Nummerierung.
   ================================================================ */

.flow-section { background: var(--paper); }

.flow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background: var(--sheet);
    overflow: hidden;
}

.flow-step {
    position: relative;
    padding: 1.75rem 1.5rem;
    border-left: 1px solid var(--rule);
}

.flow-step:first-child { border-left: none; }

/* Der Fortschrittsstrich laeuft ueber alle vier Schritte durch. */
.flow-step::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--mark);
}

.flow-step:nth-child(1)::before { opacity: 1; }
.flow-step:nth-child(2)::before { opacity: 0.72; }
.flow-step:nth-child(3)::before { opacity: 0.48; }
.flow-step:nth-child(4)::before { opacity: 0.26; }

/* Jede Stufe bekommt einen kleinen, nachgebauten Ausschnitt aus der
   echten Oberflaeche — dieselbe Zeichensprache wie das Dashboard im
   Hero, statt vier weiterer Textabsaetze. */
.flow-visual {
    margin-bottom: 1.1rem;
    padding: 0.7rem 0.75rem 0.6rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-xs);
}

.fv-lines { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.65rem; }

.fv-line { display: flex; align-items: center; gap: 0.4rem; }

.fv-line-dot {
    width: 4px;
    height: 4px;
    flex: none;
    border-radius: 50%;
    background: var(--rule-2);
}

.fv-line-bar {
    display: block;
    width: var(--w);
    height: 5px;
    border-radius: var(--r-full);
    background: var(--wash-2);
    transform-origin: left center;
}

.fv-meter { margin-bottom: 0.65rem; }

.fv-meter-track {
    position: relative;
    height: 13px;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-xs);
    background: var(--wash);
    overflow: hidden;
}

.fv-meter-fill {
    display: block;
    width: var(--w);
    height: 100%;
    background: var(--mark);
    transform-origin: left center;
}

.fv-meter-track.is-segmented {
    display: flex;
    gap: 2px;
    background: none;
    border-color: var(--rule);
    padding: 1px;
}

.fv-meter-seg { flex: 1 1 auto; height: 100%; background: var(--wash-2); border-radius: 1px; }
.fv-meter-seg.is-filled { background: var(--mark-deep); opacity: 0.55; }
.fv-meter-seg.is-current { background: var(--mark); }

.fv-result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--rule);
}

.fv-result-lbl {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.fv-result-val {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mark-deep);
}

.fv-result.is-done .fv-result-val {
    padding: 0.1rem 0.5rem;
    background: var(--mark-wash);
    border-radius: var(--r-full);
}

.fv-result.is-done .fv-result-val svg { flex: none; }

@media (prefers-reduced-motion: no-preference) {
    .fv-line-bar  { animation: fv-grow 560ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 260ms); }
    .fv-meter-fill { animation: fv-grow 620ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both; }
    .fv-meter-seg.is-filled,
    .fv-meter-seg.is-current { animation: fade-in 300ms ease-out both; animation-delay: calc(var(--i, 0) * 90ms + 260ms); }
}

@keyframes fv-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.flow-step-idx {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--mark-deep);
    margin-bottom: 0.85rem;
}

.flow-step h3 { margin-bottom: 0.5rem; }

.flow-step p {
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

.flow-foot {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: var(--sp-3);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--ink-mute);
}

.flow-foot::before {
    content: '';
    width: 28px;
    height: 2px;
    flex: none;
    background: var(--mark);
}


/* ================================================================
   KARTENRASTER — Leistungen, Module, Vorteile
   ================================================================ */

.benefits-compact-grid,
.modules-compact-grid {
    display: grid;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    overflow: hidden;
}

/* Ein Hairline-Gitter statt schwebender Karten: das Blatt bleibt ganz. */
.benefits-compact-grid { grid-template-columns: repeat(3, 1fr); }
.modules-compact-grid  { grid-template-columns: repeat(4, 1fr); }

.module-compact-card {
    position: relative;
    padding: 1.65rem 1.5rem;
    background: var(--sheet);
    transition: background var(--t-fast);
}

.module-compact-card:hover { background: #FBFCFD; }

/* Tuerkis-Marke erscheint an der Oberkante beim Hover. */
.module-compact-card::after {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 2px;
    background: var(--mark);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-base);
}

.module-compact-card:hover::after { transform: scaleX(1); }

.module-compact-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 1rem;
    color: var(--ink);
    background: var(--mark-wash);
    border: 1px solid var(--mark-rule);
    border-radius: var(--r-xs);
}

.module-compact-icon svg,
.module-compact-icon i { width: 17px; height: 17px; }

.module-compact-title {
    font-size: 1.0625rem;
    font-weight: 650;
    margin-bottom: 0.55rem;
}

.feature-compact-desc {
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

/* Folgt der Beschreibung eine Aufzaehlung, braucht sie Abstand davon. */
.feature-compact-desc + .module-compact-list { margin-top: 0.9rem; }

.module-compact-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.module-compact-list li {
    position: relative;
    padding-left: 0.95rem;
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.module-compact-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    background: var(--mark);
}

/* Auf Modulkarten gibt es keine Reihenfolge — die alte Nummerierung
   behauptete eine, die es nicht gibt. */
.module-compact-number { display: none; }

.modules-more-badge {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: var(--sp-3);
    padding: 1.25rem 1.4rem;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-left: 2px solid var(--mark);
    border-radius: var(--r-sm);
}

.more-badge-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    color: var(--mark-deep);
}

.more-badge-icon svg,
.more-badge-icon i { width: 18px; height: 18px; }

.more-badge-text strong {
    display: block;
    font-size: 0.9375rem;
    margin-bottom: 0.2rem;
}

.more-badge-text span {
    font-size: 0.875rem;
    color: var(--ink-soft);
}


/* ================================================================
   SCHNELLZAHLEN
   ================================================================ */

.benefits-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--sp-4);
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
}

.quick-stat {
    padding: 1.6rem 1.25rem;
    text-align: center;
    border-left: 1px solid var(--rule);
}

.quick-stat:first-child { border-left: none; }

.quick-stat-value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
}

.quick-stat-label {
    margin-top: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.quick-stat-divider { display: none; }


/* ================================================================
   TECHNOLOGIE
   ================================================================ */

.tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
}

.tech-card {
    padding: 1.6rem 1.4rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
}

.tech-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: 1rem;
    color: var(--mark-deep);
    border-bottom: 2px solid var(--mark);
}

.tech-icon svg,
.tech-icon i { width: 18px; height: 18px; }

.tech-card h3 { margin-bottom: 0.5rem; }

.tech-card p {
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

/* Technische Angaben laufen im Mono-Schnitt. */
.tech-spec {
    display: block;
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--rule);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--ink-mute);
}


/* ================================================================
   SCREENSHOT-SCHAU (Tabs)
   ================================================================ */

.scr-wrap {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
}

.scr-tabs {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.scr-tab {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0.95rem 1rem;
    background: none;
    border: none;
    border-top: 1px solid var(--rule);
    text-align: left;
    cursor: pointer;
    transition: background var(--t-fast);
}

.scr-tab:first-child { border-top: none; }
.scr-tab:hover { background: var(--wash); }

.scr-tab.is-active {
    background: var(--sheet);
    box-shadow: inset 2px 0 0 var(--mark);
}

.scr-tab-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    color: var(--ink);
    background: var(--mark-wash);
    border: 1px solid var(--mark-rule);
    border-radius: var(--r-xs);
}

.scr-tab-icon svg,
.scr-tab-icon i { width: 16px; height: 16px; }

.scr-tab-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
}

.scr-tab-sub {
    display: block;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--ink-mute);
}

.scr-preview { min-width: 0; }

.scr-glow { display: none; }

.scr-browser {
    background: var(--sheet);
    border: 1px solid var(--rule-2);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}

.scr-browser-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
}

.scr-dots { display: flex; gap: 5px; }

.scr-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--rule-2);
}

.scr-url {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-full);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--ink-mute);
}

.scr-bar-spacer { flex: 1; }

.scr-viewport {
    position: relative;
    aspect-ratio: 1966 / 1000;
    background: var(--paper);
}

.scr-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    transition: opacity var(--t-base);
}

.scr-img.is-visible { opacity: 1; }

.scr-desc-wrap {
    margin-top: var(--sp-3);
    padding: 1.5rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
}

.scr-desc { display: none; }
.scr-desc.is-visible { display: block; }

.scr-desc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mark-deep);
}

.scr-desc-badge svg,
.scr-desc-badge i { width: 13px; height: 13px; }

.scr-desc h3 {
    font-size: 1.3125rem;
    margin-bottom: 0.55rem;
}

.scr-desc p {
    font-size: 0.9375rem;
    color: var(--ink-soft);
    max-width: 46rem;
}

.scr-feat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--rule);
}

.scr-feat-list li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.scr-feat-list svg,
.scr-feat-list i {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--mark-deep);
}

.scr-gallery { margin-top: var(--sp-7); }

.additional-title {
    font-size: 1.5rem;
    font-weight: 700;
    font-stretch: 104%;
}

.additional-subtitle {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: var(--ink-soft);
}


/* ================================================================
   LIGHTBOX
   ================================================================ */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    place-items: center;
    padding: var(--sp-4);
    background: rgba(2, 27, 51, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.lightbox.active { display: grid; }

.lightbox-content {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: var(--r-sm);
    overflow: hidden;
    box-shadow: var(--sh-xl);
}

.lightbox-content img {
    max-width: 100%;
    max-height: 88vh;
    width: auto;
    height: auto;
}

.lightbox-close {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--on-deep-rule);
    border-radius: var(--r-sm);
    color: #fff;
    cursor: pointer;
}

.lightbox-close:hover { background: rgba(255, 255, 255, 0.18); }


/* ================================================================
   VORHER / NACHHER — als Gegenueberstellung zweier Blaetter,
   nicht als Duell mit VS-Kreis.
   ================================================================ */

.comparison-section { background: var(--paper); }

.comparison-modern-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.comparison-modern-card { padding: 1.9rem 1.75rem; }

.problem-modern-card  { background: var(--sheet); }
.solution-modern-card { background: var(--sheet); }

.card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.card-badge svg,
.card-badge i { width: 14px; height: 14px; }

.problem-badge  { color: var(--rust); }
.solution-badge { color: var(--mark-deep); }

.card-modern-title {
    font-size: 1.25rem;
    font-weight: 650;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rule);
}

.comparison-modern-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.modern-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

.item-dot {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 0.24rem;
    background: var(--rust-wash);
    border: 1px solid rgba(158, 74, 56, 0.35);
    border-radius: var(--r-xs);
    position: relative;
}

/* Kreuz im Kaestchen — abgehakt heisst hier: nicht erledigt. */
.item-dot::before,
.item-dot::after {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 50%;
    height: 1.5px;
    background: var(--rust);
}

.item-dot::before { transform: rotate(45deg); }
.item-dot::after  { transform: rotate(-45deg); }

.item-check {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 0.24rem;
    background: var(--mark);
    border: 1px solid var(--mark-deep);
    border-radius: var(--r-xs);
    color: #04302C;
}

.item-check svg,
.item-check i { width: 11px; height: 11px; }

.solution-item { color: var(--ink); }

.vs-badge-modern,
.vs-circle-modern { display: none; }


/* ================================================================
   PREIS
   ================================================================ */

.price-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-4);
}

.price-card {
    width: 100%;
    max-width: 30rem;
    padding: 2.25rem 2rem;
    background: var(--sheet);
    border: 1px solid var(--rule-2);
    border-top: 3px solid var(--mark);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-lg);
}

.price-kicker {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.price-name {
    margin: 0.45rem 0 1.35rem;
    font-size: 1.375rem;
    font-weight: 700;
}

.price-figure {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    padding-bottom: 1.35rem;
    border-bottom: 1px solid var(--rule);
}

/* "ab" gehoert zur Schriftfamilie des Textes, nicht in den Mono-Schnitt —
   dort standen die Buchstaben unnatuerlich weit auseinander. */
.price-prefix {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.price-amount {
    font-family: var(--font-mono);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--ink);
}

.price-unit {
    font-size: 1rem;
    color: var(--ink-soft);
}

.price-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 1.35rem 0 1.75rem;
}

.price-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

.price-list li::before {
    content: '';
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: 0.26rem;
    background: var(--mark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2304302C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 6.3 4.7 8.6 9.6 3.7'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
    border: 1px solid var(--mark-deep);
    border-radius: var(--r-xs);
}

.price-note {
    margin-top: 1.15rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--ink-mute);
}


/* ================================================================
   FAQ
   ================================================================ */

.faq-list {
    max-width: 52rem;
    margin: 0 auto;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.faq-item { border-top: 1px solid var(--rule); }
.faq-item:first-child { border-top: none; }

.faq-question {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 1.25rem 1.4rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background var(--t-fast);
}

.faq-question:hover { background: var(--wash); }

.faq-q-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--mark-deep);
}

.faq-q-icon svg { width: 17px; height: 17px; }

.faq-question-text {
    flex: 1;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
}

.faq-chevron {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--ink-mute);
    transition: transform var(--t-base);
}

.faq-question[aria-expanded='true'] .faq-chevron { transform: rotate(180deg); }

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--t-base);
}

.faq-answer-inner {
    overflow: hidden;
    padding: 0 1.4rem;
    font-size: 0.9375rem;
    color: var(--ink-soft);
}

.faq-item.open .faq-answer { grid-template-rows: 1fr; }

.faq-item.open .faq-answer-inner {
    padding-bottom: 1.35rem;
    padding-left: 3.7rem;
}

/* Fallback fuer Browser ohne animierbares grid-template-rows. */
@supports not (grid-template-rows: 0fr) {
    .faq-answer { display: block; max-height: 0; overflow: hidden; transition: max-height var(--t-base); }
    .faq-item.open .faq-answer { max-height: 40rem; }
}


/* ================================================================
   INTERNE VERWEISE
   ================================================================ */

.internal-links-section { background: var(--sheet); }

.internal-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.internal-link-card {
    display: block;
    padding: 1.5rem 1.4rem;
    background: var(--sheet);
    transition: background var(--t-fast);
}

.internal-link-card:hover { background: var(--wash); }

.internal-link-card h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 1rem;
    color: var(--ink);
}

.internal-link-card h4::after {
    content: '\2192';
    color: var(--mark-deep);
    transition: transform var(--t-fast);
}

.internal-link-card:hover h4::after { transform: translateX(3px); }

.internal-link-card p {
    font-size: 0.875rem;
    color: var(--ink-soft);
}


/* ================================================================
   KONTAKT — das dunkle Band. Ein Anker, sonst Papier.
   ================================================================ */

/* Das dunkle Band fuehrt eine eigene Textskala: die gemeinsamen Tokens
   werden lokal umdefiniert, damit alles darin automatisch hell aufloest. */
.contact-section {
    --text-primary:   var(--on-deep);
    --text-secondary: var(--on-deep-soft);
    --text-muted:     var(--on-deep-soft);
    --border:         var(--on-deep-rule);
    --border-card:    var(--on-deep-rule);

    background: var(--deep);
    color: var(--on-deep);
    overflow: hidden;
}

/* Millimeterpapier auch hier, nur invertiert. */
.contact-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--on-deep-rule) 1px, transparent 1px),
        linear-gradient(to bottom, var(--on-deep-rule) 1px, transparent 1px);
    background-size: 88px 88px;
    -webkit-mask-image: radial-gradient(100% 70% at 50% 0%, #000 0%, transparent 70%);
            mask-image: radial-gradient(100% 70% at 50% 0%, #000 0%, transparent 70%);
    opacity: 0.5;
}

.contact-section .container { position: relative; }

.contact-section .section-title { color: var(--on-deep); }
.contact-section .section-description { color: var(--on-deep-soft); }
.contact-section .section-description strong { color: var(--on-deep); }

.contact-section .section-label,
.contact-section .section-badge { color: var(--on-deep-soft); }

.contact-section .section-label::after { background: var(--on-deep-rule); }

/* Auf dunklem Grund traegt das helle Tuerkis auch als Text (7,2:1). */
.contact-mark { color: var(--mark); }

.contact-proof {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: var(--sp-5);
}

.contact-proof-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--on-deep-rule);
    border-radius: var(--r-xs);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--on-deep);
}

.contact-proof-item::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: none;
    background: var(--mark);
}

.contact-content {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--sp-6);
    align-items: start;
}

.contact-info h2 {
    font-size: 1.625rem;
    color: var(--on-deep);
    margin-bottom: 0.85rem;
}

.contact-info > p {
    color: var(--on-deep-soft);
    font-size: 1rem;
    margin-bottom: var(--sp-4);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--on-deep-rule);
    border: 1px solid var(--on-deep-rule);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.05rem 1.15rem;
    background: rgba(255, 255, 255, 0.03);
}

.contact-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    color: var(--mark);
    background: rgba(11, 192, 181, 0.1);
    border: 1px solid rgba(11, 192, 181, 0.3);
    border-radius: var(--r-xs);
    font-size: 0.9rem;
}

.contact-icon svg,
.contact-icon i { width: 16px; height: 16px; }

.contact-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--on-deep-soft);
    margin-bottom: 0.15rem;
}

.contact-value {
    display: block;
    font-size: 0.9375rem;
    font-weight: 550;
    color: var(--on-deep);
}

a.contact-value:hover { color: var(--mark); }


/* ---- Formular ---- */

.contact-form {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--on-deep-rule);
    border-radius: var(--r-sm);
}

.form-head {
    margin-bottom: var(--sp-3);
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--on-deep-rule);
}

.form-head h3 {
    font-size: 1.125rem;
    color: var(--on-deep);
    margin-bottom: 0.25rem;
}

.form-head p {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--on-deep-soft);
}

.contact-form form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.form-group { display: flex; flex-direction: column; gap: 0.4rem; }

.form-group.full-width { grid-column: 1 / -1; }

.form-group label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-deep-soft);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 0.85rem;
    font-size: 0.9375rem;
    color: var(--on-deep);
    background: rgba(2, 27, 51, 0.55);
    border: 1px solid var(--on-deep-rule);
    border-radius: var(--r-xs);
    transition: border-color var(--t-fast), background var(--t-fast);
}

.form-group textarea { resize: vertical; min-height: 7rem; }

.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(167, 188, 210, 0.55); }

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--mark);
    background: rgba(2, 27, 51, 0.8);
}

.form-status {
    grid-column: 1 / -1;
    font-size: 0.875rem;
}

.form-status.success { color: var(--mark); }
.form-status.error   { color: #F09A8A; }

/* Auf dem dunklen Band muss der Hauptbutton hell sein. */
.contact-form .btn-primary {
    grid-column: 1 / -1;
    background: var(--mark);
    color: #04302C;
    border-color: var(--mark);
}

.contact-form .btn-primary:hover {
    background: #22D3C7;
    color: #04302C;
}


/* ================================================================
   FOOTER
   ================================================================ */

.footer {
    --text-primary:   var(--on-deep);
    --text-secondary: var(--on-deep-soft);
    --text-muted:     var(--on-deep-soft);
    --border:         var(--on-deep-rule);

    padding: var(--sp-6) 0 var(--sp-3);
    background: var(--deep-2);
    color: var(--on-deep-soft);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-content {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--on-deep-rule);
}

.footer-logo { margin-bottom: 1rem; }

.footer-logo-img { height: 28px; width: auto; }

.footer-description {
    font-size: 0.9375rem;
    max-width: 24rem;
}

.footer-col h4 {
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--on-deep);
}

.footer-links { display: flex; flex-direction: column; gap: 0.6rem; }

.footer-links a {
    font-size: 0.9375rem;
    color: var(--on-deep-soft);
    transition: color var(--t-fast);
}

.footer-links a:hover { color: var(--mark); }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    flex-wrap: wrap;
    padding-top: var(--sp-3);
}

.footer-bottom p {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.footer-social { display: flex; gap: 0.5rem; }

.social-link {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--on-deep-soft);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--on-deep-rule);
    border-radius: var(--r-xs);
    transition: color var(--t-fast), border-color var(--t-fast);
}

.social-link:hover {
    color: var(--mark);
    border-color: rgba(11, 192, 181, 0.4);
}


/* ================================================================
   COOKIE-BANNER
   ================================================================ */

.cookie-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(2, 27, 51, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base);
}

.cookie-overlay.show { opacity: 1; pointer-events: auto; }

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3001;
    padding: var(--sp-3) 0;
    background: var(--sheet);
    border-top: 2px solid var(--mark);
    box-shadow: 0 -8px 40px rgba(2, 41, 86, 0.14);
    transform: translateY(110%);
    transition: transform var(--t-base);
}

.cookie-banner.show { transform: translateY(0); }

.cookie-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    width: 100%;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.cookie-banner-text { flex: 1 1 22rem; }

.cookie-banner-text h3 {
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

.cookie-banner-text p {
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.cookie-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cookie-btn {
    padding: 0.65rem 1.15rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}

.cookie-btn-primary { background: var(--ink); color: #fff; }
.cookie-btn-primary:hover { background: var(--ink-2); }

.cookie-btn-secondary {
    background: transparent;
    border-color: var(--rule-2);
    color: var(--ink);
}

.cookie-btn-secondary:hover { background: var(--wash); }

.cookie-btn-text {
    background: none;
    color: var(--ink-mute);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-btn-text:hover { color: var(--ink); }

.cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 3002;
    display: none;
    place-items: center;
    padding: var(--sp-3);
    background: rgba(2, 27, 51, 0.6);
}

.cookie-modal.show { display: grid; }

.cookie-modal-content {
    width: 100%;
    max-width: 34rem;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--sheet);
    border-radius: var(--r-md);
    box-shadow: var(--sh-xl);
}

.cookie-modal-header,
.cookie-modal-footer {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 1.25rem 1.5rem;
}

.cookie-modal-header {
    justify-content: space-between;
    border-bottom: 1px solid var(--rule);
}

.cookie-modal-header h2 { font-size: 1.25rem; }

.cookie-modal-close {
    width: 34px;
    height: 34px;
    font-size: 1.5rem;
    line-height: 1;
    background: none;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    color: var(--ink-mute);
    cursor: pointer;
}

.cookie-modal-close:hover { color: var(--ink); border-color: var(--rule-2); }

.cookie-modal-body { padding: 1.5rem; }

.cookie-modal-footer {
    justify-content: flex-end;
    flex-wrap: wrap;
    border-top: 1px solid var(--rule);
}

.cookie-category {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--rule);
}

.cookie-category:last-child { border-bottom: none; }

.cookie-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: 0.4rem;
}

.cookie-category-header h3 { font-size: 0.9375rem; }

.cookie-category p {
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.cookie-toggle {
    position: relative;
    flex: none;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.cookie-toggle input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.cookie-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--wash-2);
    border: 1px solid var(--rule-2);
    border-radius: var(--r-full);
    transition: background var(--t-fast);
    pointer-events: none;
}

.cookie-toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--sheet);
    border-radius: 50%;
    box-shadow: var(--sh-sm);
    transition: transform var(--t-fast);
}

.cookie-toggle input:checked + .cookie-toggle-slider {
    background: var(--mark);
    border-color: var(--mark-deep);
}

.cookie-toggle input:checked + .cookie-toggle-slider::before { transform: translateX(20px); }

.cookie-toggle input:disabled + .cookie-toggle-slider { opacity: 0.6; }

.cookie-toggle input:focus-visible + .cookie-toggle-slider {
    outline: 2px solid var(--mark-deep);
    outline-offset: 2px;
}


/* ================================================================
   HILFSKLASSEN & ANIMATION
   ================================================================ */

.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;
}

.gradient-text { color: var(--ink); }
.animate-gradient { animation: none; }

/* Entfernte Deko der alten Seite — falls Markup irgendwo bleibt. */
.particle-canvas,
.gradient-orb,
.grid-pattern,
.marquee-section,
.scroll-indicator,
.hero-float-badge,
.hero-compare,
.hero-stats-row { display: none; }

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* Der versteckte Ausgangszustand gilt nur, wenn JavaScript ihn auch wieder
   aufheben kann (html.js wird inline im <head> gesetzt). Ohne diese Kopplung
   bliebe bei ausgefallenem main.js der halbe Seiteninhalt unsichtbar. */
@media (prefers-reduced-motion: no-preference) {
    .animate-slide-up { animation: slide-up 620ms cubic-bezier(0.16, 1, 0.3, 1) both; }

    .js .fade-in,
    .js .fade-in-up {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity var(--t-slow), transform var(--t-slow);
        /* Sicherheitsnetz: greift die IntersectionObserver-Klasse aus
           main.js aus irgendeinem Grund nicht, macht dieser Fallback den
           Inhalt trotzdem sichtbar, statt ihn dauerhaft zu verstecken. */
        animation: fade-in-fallback 1ms 2.6s forwards;
    }

    .js .fade-in.visible,
    .js .fade-in-up.visible,
    .js .fade-in.revealed,
    .js .fade-in-up.revealed {
        opacity: 1;
        transform: none;
    }

    .delay-1 { transition-delay: 110ms; }
}

@keyframes fade-in-fallback {
    to { opacity: 1; transform: none; }
}

/* Ohne Bewegung: alles sofort da, nichts versteckt. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .fade-in,
    .fade-in-up,
    .animate-slide-up {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* Scroll-Fortschritt: eine Haarlinie in Tuerkis. */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    height: 2px;
    background: var(--mark);
    transition: width 90ms linear;
}

/* Zurueck nach oben (per JS eingefuegt). */
.scroll-to-top {
    position: fixed;
    right: var(--sp-3);
    bottom: var(--sp-3);
    z-index: 900;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    box-shadow: var(--sh-lg);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base), background var(--t-fast);
}

.scroll-to-top.visible { opacity: 1; pointer-events: auto; }
.scroll-to-top:hover { background: var(--ink-2); }


/* ================================================================
   STICKY CTA — eine Leiste am Fuss, dunkel wie das Kontaktband,
   damit sie zum Ziel gehoert und nicht zum Inhalt.
   ================================================================ */

.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 990;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding: 0.85rem var(--gutter);
    background: var(--deep);
    border-top: 2px solid var(--mark);
    box-shadow: 0 -6px 30px rgba(2, 27, 51, 0.28);
    transform: translateY(110%);
    transition: transform var(--t-base);
}

.sticky-cta.is-visible { transform: translateY(0); }

.sticky-cta-text {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    color: var(--on-deep);
}

.sticky-cta-text::before {
    content: '';
    width: 7px;
    height: 7px;
    flex: none;
    background: var(--mark);
}

.sticky-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.35rem;
    background: var(--mark);
    color: #04302C;
    font-size: 0.9rem;
    font-weight: 650;
    border-radius: var(--r-sm);
    white-space: nowrap;
    transition: background var(--t-fast);
}

.sticky-cta-btn:hover { background: #22D3C7; color: #04302C; }

.sticky-cta-close {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    font-size: 1.35rem;
    line-height: 1;
    background: none;
    border: none;
    color: var(--on-deep-soft);
    cursor: pointer;
    transition: color var(--t-fast);
}

.sticky-cta-close:hover { color: var(--on-deep); }

/* Die Leiste darf den Cookie-Banner nicht verdecken. */
.cookie-banner.show ~ .sticky-cta.is-visible { transform: translateY(110%); }

/* Und der Nach-oben-Knopf nicht auf der Leiste sitzen. */
.sticky-cta.is-visible ~ .scroll-to-top { bottom: 5.25rem; }


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 1080px) {
    .modules-compact-grid { grid-template-columns: repeat(3, 1fr); }
    .tech-grid            { grid-template-columns: repeat(2, 1fr); }
    .flow-grid            { grid-template-columns: repeat(2, 1fr); }
    .flow-step:nth-child(3) { border-left: none; }
    .flow-step:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

@media (max-width: 960px) {
    :root { --sp-7: 3.25rem; --sp-6: 2.25rem; }

    .nav-links { display: none; }
    .mobile-menu-btn { display: flex; }

    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }

    .hero-description-secondary { max-width: none; }

    .hero-note {
        position: static;
        margin-top: var(--sp-3);
        display: inline-flex;
    }

    .scr-wrap { grid-template-columns: 1fr; }

    .scr-tabs {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .scr-tab {
        flex: 0 0 auto;
        min-width: 13rem;
        border-top: none;
        border-left: 1px solid var(--rule);
        scroll-snap-align: start;
    }

    .scr-tab:first-child { border-left: none; }
    .scr-tab.is-active { box-shadow: inset 0 2px 0 var(--mark); }

    .contact-content { grid-template-columns: 1fr; gap: var(--sp-5); }

    .footer-content { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    body { font-size: 1rem; }

    .benefits-compact-grid,
    .modules-compact-grid { grid-template-columns: repeat(2, 1fr); }

    .stats-bar-inner { grid-template-columns: repeat(2, 1fr); }
    .stats-bar-item:nth-child(3) { border-left: none; }
    .stats-bar-item:nth-child(n+3) { border-top: 1px solid var(--rule); }

    .comparison-modern-wrapper { grid-template-columns: 1fr; }

    .benefits-stats-row { grid-template-columns: 1fr; }
    .quick-stat { border-left: none; border-top: 1px solid var(--rule); }
    .quick-stat:first-child { border-top: none; }

    .contact-form { padding: 1.4rem; }
    .contact-form form { grid-template-columns: 1fr; }

    .measure { padding: 1.15rem 1.15rem 1.25rem; }
    .measure-value { font-size: 0.875rem; padding: 0.1rem 0.45rem; }

    .cookie-banner-actions { width: 100%; }
    .cookie-btn { flex: 1 1 auto; }
}

@media (max-width: 560px) {
    :root { --gutter: 1.15rem; --sp-7: 2.5rem; }

    .nav-container { height: 64px; }
    .mobile-menu { top: 64px; }
    .mobile-menu-backdrop { inset: 64px 0 0 0; }
    .hero { padding-top: calc(64px + var(--sp-5)); }

    .benefits-compact-grid,
    .modules-compact-grid,
    .tech-grid,
    .flow-grid,
    .internal-links-grid { grid-template-columns: 1fr; }

    .module-compact-card,
    .internal-link-card { padding: 1.35rem 1.2rem; }

    .flow-step { border-left: none; border-top: 1px solid var(--rule); }
    .flow-step:first-child { border-top: none; }

    .tech-card { padding: 1.35rem 1.2rem; }

    .measure-seg { flex-basis: 26%; }
    .measure-caption { flex-direction: column; gap: 0.25rem; }

    .btn { width: 100%; }
    .hero-buttons { flex-direction: column; align-items: stretch; }

    /* Die Leiste wird auf kleinen Schirmen zweizeilig, das Kreuz
       rutscht nach oben rechts statt in den Text. */
    .sticky-cta {
        justify-content: flex-start;
        padding-right: 2.5rem;
        gap: 0.5rem 1rem;
    }

    .sticky-cta-text { font-size: 0.7rem; }
    .sticky-cta-btn { flex: 1 1 auto; justify-content: center; }

    .sticky-cta-close {
        top: 0.35rem;
        right: 0.35rem;
        transform: none;
    }

    .footer-content { grid-template-columns: 1fr; }
    .footer-bottom { justify-content: center; text-align: center; }
}


/* ================================================================
   HERO-STORY — die gepinnte Buehne
   Grundzustand (ohne JS, mit prefers-reduced-motion): alles fertig
   montiert, gestapelt — Intro, Cockpit. Erst html.hs-on schaltet
   die Buehne scharf; die Choreografie liegt in js/hero-scroll.js.
   Die Karten sprechen bewusst die Sprache der Software (Inter,
   weisse Karten, Haarlinien), nicht die der Marketing-Seite.
   ================================================================ */

.hero-story .hero-stage {
    position: relative;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.hero-story .hero-background {
    inset: -100vh 0 0 0;   /* Papier auch hinter dem Pin-Auslauf */
}

/* --- Intro (Szene 1) --- */

.hs-intro { position: relative; z-index: 5; }

.hs-intro-inner {
    max-width: 50rem;
    margin: 0 auto;
    text-align: center;
}

.hs-intro .hero-description-secondary { margin-left: auto; margin-right: auto; }
.hs-intro .hero-buttons { justify-content: center; }
.hs-intro .trust-indicators { justify-content: center; }

.hs-scroll-hint {
    display: none;   /* nur im Story-Modus sinnvoll */
    align-items: center;
    gap: 0.45rem;
    margin: var(--sp-3) auto 0;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.hs-scroll-hint svg { animation: hs-hint-bob 1.6s ease-in-out infinite; }

@keyframes hs-hint-bob {
    0%, 100% { transform: translateY(-2px); }
    50%      { transform: translateY(2px); }
}

/* --- Cockpit: der App-Rahmen --- */

.hs-cockpit {
    position: relative;
    z-index: 2;
    width: min(1020px, 100%);
    margin: var(--sp-6) auto 0;
}

.hs-frame {
    position: relative;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: #111827;
}

.hs-chrome {
    position: absolute;
    inset: 0;
    background: #F7F9FB;
    border: 1px solid var(--rule);
    border-radius: 14px;
    box-shadow: var(--sh-xl);
}

.hs-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.95rem;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
    border-radius: 14px 14px 0 0;
}

.hs-bar-dots { display: flex; gap: 5px; }

.hs-bar-dots span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--rule-2);
}

.hs-bar-url {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.6rem;
    background: #F3F4F6;
    border-radius: var(--r-full);
    font-size: 0.66rem;
    font-weight: 500;
    color: #6B7280;
}

.hs-body { position: relative; display: flex; }

/* Seitenleiste — die echte Navigation der Software, verkleinert. */
.hs-side {
    flex: 0 0 168px;
    padding: 0.8rem 0.6rem;
    background: #FFFFFF;
    border-right: 1px solid #E5E7EB;
    border-radius: 0 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hs-side-brand {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.15rem 0.5rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #042C54;
}

.hs-side-brand img { width: 20px; height: 20px; object-fit: contain; }

.hs-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.42rem 0.55rem;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 500;
    color: #4B5563;
    white-space: nowrap;
}

.hs-nav svg { width: 13px; height: 13px; flex: none; }

.hs-nav.is-active {
    background: linear-gradient(90deg, rgba(40, 113, 191, 0.10), rgba(40, 113, 191, 0.04), transparent);
    color: #145BA2;
    font-weight: 600;
}

.hs-nav-dot {
    position: absolute;
    right: 0.55rem;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #2871BF;
    animation: hs-pulse 2s ease-in-out infinite;
}

@keyframes hs-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

.hs-main { flex: 1; min-width: 0; }

.hs-top {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.85rem 1rem 0.15rem;
}

.hs-top-title { font-size: 0.95rem; font-weight: 700; }

.hs-top-date { font-size: 0.68rem; color: #6B7280; }

.hs-top-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.14rem 0.55rem;
    background: #F0FDF4;
    border-radius: var(--r-full);
    font-size: 0.64rem;
    font-weight: 600;
    color: #15803D;
}

.hs-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #16A34A;
    animation: hs-pulse 2s ease-in-out infinite;
}

/* --- Das Karten-Raster --- */

.hs-grid {
    display: grid;
    grid-template-columns: 1.02fr 1.02fr 1.12fr;
    grid-template-areas:
        "umsatz   buero    zeit"
        "rechnung angebot  termin";
    gap: 12px;
    padding: 14px;
}

.hs-fly[data-hs="umsatz"]   { grid-area: umsatz; }
.hs-fly[data-hs="buero"]    { grid-area: buero; }
.hs-fly[data-hs="zeit"]     { grid-area: zeit; }
.hs-fly[data-hs="rechnung"] { grid-area: rechnung; }
.hs-fly[data-hs="angebot"]  { grid-area: angebot; }
.hs-fly[data-hs="termin"]   { grid-area: termin; }

.hs-fly { min-width: 0; }

.hs-card {
    height: 100%;
    min-height: 7.2rem;
    padding: 0.85rem 0.95rem;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.hs-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.hs-lbl {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #6B7280;
    white-space: nowrap;
}

.hs-delta {
    font-size: 0.66rem;
    font-weight: 700;
    color: #15803D;
    white-space: nowrap;
}

.hs-delta.is-mark { color: var(--mark-deep); }

.hs-kpi-val {
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: #111827;
}

.hs-kpi-foot { font-size: 0.68rem; color: #6B7280; }

.hs-bar-track {
    height: 4px;
    border-radius: var(--r-full);
    background: #F3F4F6;
    overflow: hidden;
}

.hs-bar-fill {
    display: block;
    height: 100%;
    width: 29%;   /* Endzustand: 6 von 21 Stunden */
    border-radius: var(--r-full);
    background: var(--mark);
}

/* Zeiterfassung */

.hs-time-status {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    font-size: 0.64rem;
    font-weight: 600;
    color: #15803D;
}

.hs-time-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.hs-time-clock {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex: none;
    border-radius: 50%;
    background: #16A34A;
    color: #fff;
    box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.12);
}

.hs-time-val {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #111827;
}

/* Rechnung */

.hs-inv-nr {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    color: #6B7280;
}

.hs-badges { display: grid; }

.hs-badge {
    grid-area: 1 / 1;
    justify-self: end;
    padding: 0.14rem 0.5rem;
    border-radius: var(--r-sm);
    font-size: 0.64rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Endzustand ohne Choreografie: nur "Bezahlt" sichtbar. */
.hs-badge.is-draft { background: #F3F4F6; color: #4B5563; opacity: 0; }
.hs-badge.is-sent  { background: #DBECFF; color: #145BA2; opacity: 0; }
.hs-badge.is-paid  { background: #DCFCE7; color: #15803D; }

.hs-inv-title { font-size: 0.82rem; font-weight: 600; color: #111827; }

.hs-inv-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.68rem;
    color: #6B7280;
}

.hs-inv-amt {
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #111827;
}

/* Angebots-Pipeline */

.hs-pipe {
    display: flex;
    align-items: stretch;
    gap: 0.3rem;
}

.hs-step {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    background: #F3F4F6;
}

.hs-step-lbl {
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6B7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hs-step-num {
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #111827;
}

.hs-step.is-sent { background: #FEF3C7; }
.hs-step.is-sent .hs-step-lbl { color: #B45309; }

/* Endzustand: unterschrieben, gruen. */
.hs-step.is-signed { background: #DCFCE7; }
.hs-step.is-signed .hs-step-lbl { color: #15803D; }

.hs-pipe-sep {
    align-self: center;
    color: #D1D5DB;
    font-size: 0.8rem;
}

/* Termin */

.hs-termin-tag {
    padding: 0.14rem 0.5rem;
    border-radius: var(--r-sm);
    background: #FEF2F2;
    font-size: 0.64rem;
    font-weight: 600;
    color: #B91C1C;
    white-space: nowrap;
}

.hs-termin-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.hs-termin-mark {
    flex: none;
    width: 3px;
    align-self: stretch;
    border-radius: var(--r-full);
    background: #DC2626;
}

.hs-termin-txt { min-width: 0; }

.hs-termin-name {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hs-termin-sub { display: block; font-size: 0.66rem; color: #6B7280; }

/* --- Finale (Szene 4) — existiert nur im Story-Modus --- */

.hs-finale { display: none; }

.hs-finale-claim {
    font-family: var(--font);
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 700;
    font-stretch: 105%;
    color: var(--ink);
    text-align: center;
}

.hs-finale-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* ----------------------------------------------------------------
   Story-Modus: html.hs-on — die Buehne wird 100svh hoch, Intro und
   Finale liegen als Ebenen ueber dem Cockpit, GSAP pinnt und scrubbt.
   ---------------------------------------------------------------- */

html.hs-on .hero-story { padding: 0; }

html.hs-on .hero-story .hero-stage {
    height: 100vh;    /* Fallback: ohne svh-Support kollabierte die Buehne auf 0 */
    height: 100svh;
    max-width: none;
    padding: 0;
    overflow: hidden; /* Fallback fuer Browser ohne overflow: clip */
    overflow: clip;
}

html.hs-on .hero-story .hero-background {
    inset: 0;
    background-size: 88px 88px;
    -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 78%);
            mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 78%);
}

html.hs-on .hs-intro {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    place-items: safe center; /* bei Uebergroesse oben buendig statt beidseitig geclippt */
    padding: calc(72px + 1vh) var(--gutter) 0;
    pointer-events: none;
}

html.hs-on .hs-intro-inner { pointer-events: auto; }

html.hs-on .hs-scroll-hint { display: inline-flex; }

html.hs-on .hs-cockpit {
    position: absolute;
    left: 50%;
    top: calc(50% + 30px);
    transform: translate(-50%, -50%);
    width: min(1020px, 93vw);
    margin: 0;
}

html.hs-on .hs-finale {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 3vh;
    z-index: 6;
    visibility: hidden;   /* GSAP blendet ein */
}

/* Kompakte Hoehen: Finale rueckt sonst ins Cockpit. */
@media (max-height: 760px) {
    html.hs-on .hs-cockpit { top: calc(47% + 24px); width: min(920px, 90vw); }
}

/* Sehr kompakte Hoehen (kleine Laptops, grosse Handys quer knapp ueber
   der 560px-Schwelle): alles etwas enger, damit Cockpit und Finale
   nebeneinander Platz finden. Unter 560px Hoehe laeuft die Story gar
   nicht (Gate in js/hero-scroll.js). */
@media (max-height: 700px) {
    html.hs-on .hs-card { min-height: 5.6rem; padding: 0.6rem 0.75rem; }
    html.hs-on .hs-grid { gap: 8px; padding: 10px; }
    html.hs-on .hs-kpi-val { font-size: 1.1rem; }
    html.hs-on .hs-cockpit { top: calc(45% + 22px); }
    html.hs-on .hs-finale { bottom: 1.5vh; }
    html.hs-on .hs-finale-claim { font-size: 1.05rem; }
}

/* --- Responsive --- */

@media (max-width: 900px) {
    .hs-side { display: none; }
    .hs-bar { border-radius: 14px 14px 0 0; }
}

@media (max-width: 640px) {
    .hs-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "umsatz   buero"
            "rechnung rechnung"
            "zeit     termin";
        gap: 8px;
        padding: 10px;
    }

    .hs-fly[data-hs="angebot"] { display: none; }

    .hs-kpi-val { font-size: 1.05rem; }
    .hs-time-val { font-size: 0.95rem; }
    .hs-time-clock { width: 28px; height: 28px; }

    html.hs-on .hs-cockpit { width: 94vw; }
    html.hs-on .hs-finale { bottom: 2vh; }
    html.hs-on .hs-finale .btn-large { padding: 0.7rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hs-nav-dot,
    .hs-live-dot,
    .hs-scroll-hint svg { animation: none; }
}

/* Im Story-Modus gehoert der Auftritt GSAP — die CSS-Einstiegsanimation
   (fill: both) wuerde sonst per Animations-Kaskade jede Inline-Opacity
   des Scrubs ueberstimmen. */
html.hs-on .hs-intro .animate-slide-up { animation: none; }

/* Refresh-Sicherheitsnetz: Zustaende, die von fertigen Tweens stammen
   und vom CSS-Grundzustand abweichen, haengen zusaetzlich an Klassen
   (gesetzt in js/hero-scroll.js aus der Timeline-Zeit). */
html.hs-on .hero-stage.hs-past-intro .hs-intro {
    opacity: 0 !important;
    visibility: hidden !important;
}

html.hs-on .hero-stage.hs-finale-locked .hs-finale {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* CSS-Smooth-Scrolling verfaelscht die Mess-Scrolls von
   ScrollTrigger.refresh() (gepinnte Buehne wandert um scrollY).
   Anker-Links scrollen weiterhin weich — per JS in main.js. */
html.hs-on { scroll-behavior: auto; }

/* Boot-Zustand (Inline-Skript im <head>): Der erste Paint zeigt nur das
   Papier — kein vormontiertes Cockpit, kein Text, der gleich darauf vom
   Auftritt ersetzt wuerde. js/hero-scroll.js hebt das auf; ein Timeout
   im Inline-Skript ist das Sicherheitsnetz. */
html.hs-boot .hs-cockpit,
html.hs-boot .hs-finale { visibility: hidden; }
html.hs-boot .hs-intro-inner > * { opacity: 0; }

/* Notausstieg des Boot-Skripts: Choreografie-Skripte kamen nie an.
   Alles sofort zeigen — keine nachgeholten Einstiegsanimationen. */
html.hs-static .animate-slide-up,
html.hs-static .fade-in,
html.hs-static .fade-in-up {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    visibility: visible !important;
}

/* Der Haken steht auf eigener Zeile und eine Spur groesser: erst der
   Schmerzpunkt, dann die Erklaerung. Sonst liest sich die H1 als Wand. */
.hero-title-hook {
    display: block;
    font-size: 1.12em;
    margin-bottom: 0.3em;
}

@media (max-width: 640px) {
    .hero-title-hook { font-size: 1.06em; margin-bottom: 0.24em; }
}

/* Kompakte Buehne: auf kleinen Schirmen muss der ganze Intro-Block in
   eine Bildschirmhoehe passen — er ist gepinnt, was unten heraussteht,
   ist unerreichbar. Deshalb hier engere Groessen und Abstaende. */
@media (max-width: 640px) {
    html.hs-on .hs-intro { padding-top: calc(60px + 0.5vh); }
    html.hs-on .hs-intro .hero-badge-wrapper { margin-bottom: 0.7rem; }
    html.hs-on .hs-intro .hero-badge-new { font-size: 0.62rem; padding: 0.3rem 0.55rem 0.3rem 0.45rem; }
    html.hs-on .hs-intro .hero-title { font-size: 1.55rem; margin-bottom: 0.85rem; }
    html.hs-on .hs-intro .hero-description-secondary {
        font-size: 0.95rem;
        margin-bottom: 1.1rem;
    }
    html.hs-on .hs-intro .hero-buttons { gap: 0.55rem; margin-bottom: 1.1rem; }
    html.hs-on .hs-intro .btn-large { padding: 0.75rem 1.1rem; font-size: 0.92rem; }
    html.hs-on .hs-intro .trust-indicators {
        gap: 0.3rem 1rem;
        padding-top: 0.8rem;
    }
    html.hs-on .hs-intro .trust-item { font-size: 0.66rem; }
    html.hs-on .hs-scroll-hint { margin-top: 0.8rem; font-size: 0.62rem; }
}

/* Sehr kurze Schirme (iPhone SE und aehnlich): die Vertrauenszeile
   weicht, damit Titel und beide Schaltflaechen sicher im Bild bleiben.
   Sie steht ohnehin noch einmal im Kennzahlenband darunter. */
@media (max-width: 640px) and (max-height: 700px) {
    html.hs-on .hs-intro .trust-indicators { display: none; }
    html.hs-on .hs-intro .hero-title { font-size: 1.4rem; }
    html.hs-on .hs-intro .hero-description-secondary { font-size: 0.88rem; }
}


/* ================================================================
   LANDINGPAGES  (.lp-*)
   Vier Themenseiten teilen sich Navigation, Footer und Farbwelt der
   Startseite. Eigen ist ihnen nur der Auftakt: Wo die Startseite die
   Software zusammenbaut, legen diese Seiten ihre Kennzahlen offen wie
   Messwerte auf einem Aufmassblatt — Mono-Ziffern ueber einem
   Tuerkisstrich, getrennt durch Haarlinien. Ruhig genug, um der
   Startseite nicht die Schau zu stehlen.
   ================================================================ */

/* --- Pfad: die Messlinie oben ------------------------------------ */
.lp-crumbs {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--ink-mute);
    margin-bottom: var(--sp-4);
}

.lp-crumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
}

.lp-crumbs a {
    color: var(--ink-mute);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.lp-crumbs a:hover {
    color: var(--ink-2);
    border-bottom-color: var(--mark-rule);
}

.lp-crumbs li:not(:last-child)::after {
    content: "/";
    margin-left: 0.4rem;
    color: var(--rule-2);
}

.lp-crumbs [aria-current="page"] { color: var(--ink); }

/* --- Kennzahlen: die abgelesenen Werte --------------------------- */
.lp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 1px;
    margin-top: var(--sp-4);
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.lp-stat {
    background: var(--sheet);
    padding: var(--sp-3) var(--sp-2);
}

/* Der Tuerkisstrich sitzt ueber dem Wert — wie der Anriss ueber dem Mass. */
.lp-stat::before {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: var(--mark);
    margin-bottom: 0.55rem;
}

.lp-stat-val {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.lp-stat-lbl {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--ink-mute);
}

/* --- Haken-Liste im Auftakt -------------------------------------- */
.lp-checks {
    list-style: none;
    margin: var(--sp-3) 0 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.lp-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--ink-soft);
}

.lp-check::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 0.2rem;
    border-radius: var(--r-xs);
    background: var(--mark-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2306776F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 6.3 4.7 8.6 9.6 3.7'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}

/* --- Chip-Raster: Bundeslaender und Gewerke ---------------------- */
.lp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--sp-4);
}

.lp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.8rem;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    font-size: 0.85rem;
    color: var(--ink);
}

/* Das kleine Mass-Haekchen ersetzt das Emoji der alten Seiten: gleiche
   Aufzaehlungsfunktion, aber im Zeichensatz des Blattes. */
.lp-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--mark);
}

.lp-chip-mono {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-mute);
}

/* --- Merksatz-Block ---------------------------------------------- */
.lp-note {
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--mark-wash);
    border-left: 2px solid var(--mark);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink);
}

.lp-note strong { color: var(--ink); }

/* --- Gegenueberstellung: Einzeltools vs. ein System -------------- */
.lp-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

.lp-col {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    padding: var(--sp-4);
}

.lp-col-old { background: var(--rust-wash); border-color: rgba(158, 74, 56, 0.2); }
.lp-col-new { border-color: var(--mark-rule); }

.lp-col h3 {
    font-size: 1rem;
    margin: 0 0 var(--sp-2);
    color: var(--ink);
}

.lp-col-tag {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.lp-col-old .lp-col-tag { color: var(--rust); }
.lp-col-new .lp-col-tag { color: var(--mark-deep); }

.lp-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.lp-col li {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-soft);
    padding-left: 1.1rem;
    position: relative;
}

.lp-col-old li::before {
    content: "×";
    position: absolute;
    left: 0;
    color: var(--rust);
    font-weight: 700;
}

.lp-col-new li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--mark-deep);
    font-weight: 700;
}

/* --- Bildstreifen: ein Blick in die Software --------------------- */
.lp-shot {
    margin-top: var(--sp-5);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--sheet);
    box-shadow: var(--sh-md);
}

.lp-shot img {
    width: 100%;
    height: auto;
    display: block;
}

.lp-shot figcaption {
    padding: var(--sp-2) var(--sp-3);
    border-top: 1px solid var(--rule);
    font-size: 0.8rem;
    color: var(--ink-mute);
}

@media (max-width: 640px) {
    .lp-stat-val { font-size: 1.2rem; }
    .lp-note { padding: var(--sp-2) var(--sp-3); }
}

/* --- Auftakt der Landingpages: Text links, Messwerte rechts -------
   Nutzt das zweispaltige .hero-content der Startseite weiter. Statt
   eines Screenshots steht rechts das Messblatt mit den Eckwerten —
   ruhiger als ein Bild und trotzdem eine zweite Blickmarke. */
.lp-aside {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    box-shadow: var(--sh-sm);
    position: sticky;
    top: calc(72px + var(--sp-3));
}

.lp-aside-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--rule);
    display: block;
}

/* Feste zwei Spalten: vier Werte lesen sich als 2x2-Block, nicht als
   Dreierreihe mit Waise darunter. */
.lp-aside .lp-stats {
    margin-top: var(--sp-3);
    border: 0;
    background: transparent;
    gap: var(--sp-4) var(--sp-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lp-aside .lp-stat { padding: 0; }

.lp-aside-foot {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--rule);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* Bei 960 px kippt .hero-content ohnehin auf eine Spalte — dann darf das
   Messblatt nicht mehr kleben. */
@media (max-width: 960px) {
    .lp-aside { position: static; }
}

/* --- Vierer-Raster fuer die Landingpages -------------------------
   Das Hairline-Gitter der Startseite steht auf drei Spalten. Vier
   Karten liessen dort zwei leere Zellen als graue Flaechen stehen —
   mit zwei Spalten schliesst das Blatt wieder. Die vorhandenen
   Umbrueche bei 900 px und darunter greifen unveraendert weiter. */
.benefits-compact-grid.lp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --- Footer mit Themenspalte ------------------------------------
   Seiten, die zusaetzlich die vier Themenseiten auffuehren, brauchen
   eine Spalte mehr. Die Rechtsseiten behalten das Viererraster.

   Achtung: Diese Regel ist spezifischer als die Umbrueche weiter oben
   (.footer-content allein). Ohne die beiden Wiederholungen unten wuerde
   sie die Mobilansicht aushebeln — die Breakpoints entsprechen exakt
   denen des Basis-Footers. */
.footer-content.footer-content-wide {
    grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
}

@media (max-width: 960px) {
    .footer-content.footer-content-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .footer-content.footer-content-wide { grid-template-columns: 1fr; }
}

/* --- Nachgebauter Software-Ausschnitt auf den Themenseiten -------
   Statt eines Screenshots dieselben HTML-Bausteine wie im Hero der
   Startseite (.hs-frame, .hs-card und Verwandte). Vorteile: gestochen
   scharf auf jedem Bildschirm, ein Bruchteil des Ladegewichts, und die
   einzelnen Karten lassen sich beim Scrollen unterschiedlich schnell
   bewegen — daher die Tiefenwirkung.

   Die Karten sind Kulisse: der Rahmen traegt ein role="img" mit
   Beschreibung, alles darin ist aria-hidden. */
.lp-mock {
    margin: var(--sp-5) 0 0;
}

.lp-mock .hs-frame {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--sh-lg);
}

/* Eigenes Raster: der Hero der Startseite hat feste grid-areas fuer
   seine sechs Karten — hier sind es drei, in einer Reihe. */
.lp-mock-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
}

/* Bewegungsspielraum nach oben und unten, damit die versetzt laufenden
   Karten nicht am Rahmen anschlagen. */
.lp-mock-card { will-change: transform; }

.lp-mock-cap {
    margin-top: var(--sp-2);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ink-mute);
}

/* Ein zusaetzlicher Kartentyp, den der Hero nicht kennt: die
   Steuerzeile einer Rechnung. */
.hs-tax {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: auto;
    padding-top: 0.45rem;
    border-top: 1px solid #E5E7EB;
}

.hs-tax-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.66rem;
    color: #6B7280;
    font-variant-numeric: tabular-nums;
}

.hs-tax-row.is-sum {
    font-weight: 700;
    color: #111827;
    font-size: 0.74rem;
}

/* Kleiner Formatnachweis, z. B. "ebInterface 6.1". */
.hs-fmt {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    background: #E2F6F4;
    color: #06776F;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Materialzeile aus dem Katalog. */
.hs-mat { display: flex; flex-direction: column; gap: 0.3rem; }

.hs-mat-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.68rem;
    color: #374151;
}

.hs-mat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-mat-price { font-variant-numeric: tabular-nums; font-weight: 600; color: #111827; flex: none; }

@media (max-width: 860px) {
    /* Drei Karten nebeneinander werden zu schmal — dann untereinander,
       und das Parallax entfaellt (siehe page-scroll.js). */
    .lp-mock-grid { grid-template-columns: 1fr; }
    .lp-mock .hs-side { display: none; }
}

/* --- Buehnen-Raster der Themenseiten ----------------------------
   Die Startseite verteilt ihre sechs Karten ueber benannte Bereiche
   (grid-template-areas). Die Themenseiten haben andere Kartenzahlen
   und andere Inhalte, deshalb hier ein freies Raster — sonst landeten
   Karten ohne passenden Bereichsnamen in impliziten Zeilen unter dem
   Gitter. */
.hs-grid.is-free {
    grid-template-areas: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Die Startseite weist ihren Karten ueber data-hs benannte Bereiche zu
   (.hs-fly[data-hs="rechnung"] { grid-area: rechnung } und so fort).
   Traegt eine Karte hier denselben Namen, zeigte die Zuweisung ins Leere
   und zwei Karten landeten uebereinander in derselben Zelle. Deshalb im
   freien Raster ausdruecklich zuruecksetzen. */
.hs-grid.is-free > .hs-fly { grid-area: auto; }

.hs-grid.is-free[data-cards="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hs-grid.is-free[data-cards="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Fuenf Karten: obere Reihe drei, untere zwei — je zwei bzw. drei
   Spalten des Sechserrasters. */
.hs-grid.is-free[data-cards="5"] > .hs-fly:nth-child(-n+3) { grid-column: span 2; }
.hs-grid.is-free[data-cards="5"] > .hs-fly:nth-child(n+4)  { grid-column: span 3; }

@media (max-width: 1024.98px) {
    .hs-grid.is-free,
    .hs-grid.is-free[data-cards="4"],
    .hs-grid.is-free[data-cards="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hs-grid.is-free[data-cards="5"] > .hs-fly:nth-child(-n+3),
    .hs-grid.is-free[data-cards="5"] > .hs-fly:nth-child(n+4) { grid-column: auto; }
}

/* ================================================================
   SZENEN — scroll-gesteuerte Software-Ausschnitte mitten auf der Seite

   Wie .lp-mock ein nachgebauter Software-Rahmen, aber mit Handlung:
   page-scroll.js koppelt eine Timeline an die Fahrt der Szene durchs
   Fenster (Zaehler, Badge-Ketten, Balken — dieselbe data-Grammatik
   wie die Buehne im Auftakt).

   Grundzustand = Endzustand: Ohne JavaScript, ohne GSAP oder mit
   prefers-reduced-motion steht jede Szene fertig da. Das Markup
   traegt darum immer die ENDwerte; die Choreografie rechnet sich
   die Anfaenge selbst zurueck.
   ================================================================ */

.lp-scene {
    margin: var(--sp-5) auto 0;
    max-width: 940px;
}

.lp-scene .hs-frame {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--sh-lg);
}

/* Der Chat des KI-Assistenten wirkt nur schmal glaubwuerdig. */
.lp-scene--schmal { max-width: 660px; }

/* Drei Karten in einer Reihe, wie im lp-mock — aber ohne dessen
   Parallax-Karten, die Bewegung kommt hier aus der Timeline.
   position:relative ist Pflicht: .hs-chrome liegt als absolute Flaeche
   ueber dem ganzen Rahmen, unpositionierte Inhalte verschwaenden
   darunter. */
.sc-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
}

/* Pruefzeile mit Haekchen (Compliance-Bericht). */
.sc-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.68rem;
    color: #374151;
}

.sc-check svg { flex: none; color: #15803D; }

/* Lagerzeile: Artikel + Bestandsbalken. Kippt der Bestand unter die
   Warnschwelle, setzt page-scroll.js die Klasse is-warn (data-mark).
   Sie steht als Endzustand schon im Markup. */
.sc-stock {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sc-stock .hs-bar-track { height: 3px; }

.sc-stock.is-warn .hs-mat-price { color: #B91C1C; }
.sc-stock.is-warn .hs-bar-fill  { background: #DC2626; }

/* Bezahlte Zeile in den offenen Posten. */
.hs-mat-row.is-paid .hs-mat-name  { color: #9CA3AF; text-decoration: line-through; }
.hs-mat-row.is-paid .hs-mat-price { color: #15803D; }

/* Betraege brechen nie um — "€ 1.980" gehoert auf eine Zeile. */
.lp-scene .hs-inv-amt { white-space: nowrap; }

/* Meldungs-Karte (Warnschwelle erreicht). */
.hs-card.sc-alert { border-left: 3px solid #F59E0B; }

/* Amber-Zwischenschritt einer Badge-Kette ("Ueberfaellig",
   "unter Schwelle"). Wie is-draft/is-sent im Grundzustand unsichtbar —
   ohne Choreografie zaehlt nur das letzte Badge. */
.hs-badge.is-warn { background: #FEF3C7; color: #B45309; opacity: 0; }

/* Gruener Erledigt-Chip ("Text eingefuegt"). */
.sc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: flex-start;
    padding: 0.14rem 0.5rem;
    border-radius: var(--r-sm);
    background: #DCFCE7;
    color: #15803D;
    font-size: 0.64rem;
    font-weight: 600;
}

/* --- KI-Chat ---------------------------------------------------- */

.sc-chat {
    position: relative;   /* siehe .sc-grid — sonst deckt .hs-chrome alles zu */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.sc-msg {
    max-width: 84%;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    font-size: 0.78rem;
    line-height: 1.55;
}

.sc-msg.is-user {
    align-self: flex-end;
    background: var(--ink);
    color: #EAF1F8;
    border-bottom-right-radius: 4px;
}

.sc-msg.is-ki {
    align-self: flex-start;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    color: #374151;
    border-bottom-left-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.sc-msg.is-ki strong { color: #111827; font-variant-numeric: tabular-nums; }

/* @-Erwaehnung wie im MentionInput der Software. */
.sc-mention { font-weight: 700; color: var(--mark); }
.sc-msg.is-ki .sc-mention { color: var(--mark-deep); }

.sc-msg .hs-bar-track { height: 4px; }

/* Absenderzeile ueber der ersten KI-Antwort. */
.sc-msg-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mark-deep);
}

/* Attrappe der Eingabezeile am unteren Rand. */
.sc-chat-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 4px;
    padding: 0.55rem 0.8rem;
    border: 1px solid #E5E7EB;
    border-radius: var(--r-full);
    background: #FFFFFF;
    font-size: 0.72rem;
    color: #9CA3AF;
}

.sc-chat-input svg { flex: none; color: var(--mark-deep); }

@media (max-width: 860px) {
    .sc-grid { grid-template-columns: 1fr; }
    .lp-scene .hs-side { display: none; }
    .sc-msg { max-width: 94%; }
}

/* ================================================================
   KUNDENBAND — Betriebe, die taeglich mit apvros arbeiten.
   Dunkles Band wie Kontakt und Footer: die Logos der Betriebe
   sind fuer dunklen Grund gezeichnet. Jede Karte fuehrt zur
   Website des Betriebs.
   ================================================================ */

.partner-band {
    background: var(--deep);
    padding: var(--sp-5) 0;
}

.partner-band-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    color: var(--on-deep-soft);
    margin-bottom: var(--sp-4);
}

.partner-band-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
}

.partner-card {
    flex: 1 1 230px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: var(--sp-3) var(--sp-2);
    border: 1px solid var(--on-deep-rule);
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.partner-card:hover {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.partner-card:focus-visible {
    outline: 2px solid var(--mark);
    outline-offset: 3px;
}

/* Logos auf gemeinsamer Hoehe — die Dateien sind ~2,5x der
   Darstellungsgroesse, damit sie auf Retina-Displays scharf sind. */
.partner-card-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 52px;
}

.partner-card-logo img {
    max-height: 100%;
    width: auto;
}

/* Wind's Fahrstatt: Bildmarke plus Wortmarke als Text. */
.partner-card-logo-composite img { max-height: 44px; }

.partner-card-word {
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    color: var(--on-deep);
    white-space: nowrap;
}

.partner-card-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-align: center;
    color: var(--on-deep-soft);
}

/* Die Kundenzahl unter den Logos. Gegen 30.000 gewinnt 10 nicht,
   deshalb dreht der zweite Halbsatz die Groesse der Mitbewerber um.
   Kleiner als das Label und mit weniger Kontrast: der Beweis sind die
   Logos, der Satz ordnet sie ein. */
.partner-band-claim {
    max-width: 34rem;
    margin: var(--sp-3) auto 0;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
    color: var(--on-deep-soft);
}

/* Die Google-Pille sitzt im Kundenband auf dunklem Grund. Sie bleibt
   hell: als Google-Element ist sie so wiedererkennbar, und auf dem
   dunklen Band tritt sie dadurch hervor. Geaendert wird nur der
   Abstand — im Band folgt darunter noch der Satz zur Kundenzahl. */
.partner-band .reviews-badge { margin: var(--sp-4) auto 0; }

@media (max-width: 640px) {
    .partner-band .reviews-badge {
        margin-top: var(--sp-3);
        padding: 0.5rem 0.85rem;
        gap: 0.45rem;
    }
    .partner-band .reviews-badge-text { font-size: 0.8rem; }
}

/* HANDY: EIN STREIFEN, KEIN ABSCHNITT

   Vorher stand jede Karte auf eigener Zeile — gemessen am 03.09.2026
   bei 390x844 waren das 629 px, fast ein ganzer Bildschirm nur fuer
   drei Logos. Der soziale Beweis soll aber eine Bestaetigung im
   Vorbeigehen sein und nicht der Abschnitt, der das Angebot nach
   unten schiebt. plancraft, HERO und ToolTime zeigen ihren an dieser
   Stelle ebenfalls als schmalen Streifen.

   Weggelassen wird deshalb, was am Handy nichts erklaert: Rahmen,
   Innenabstand und die Gewerkzeile. Letztere steht auf der
   verlinkten Website des Betriebs. */
@media (max-width: 640px) {
    .partner-band { padding: var(--sp-4) 0; }

    .partner-band-label {
        font-size: 0.66rem;
        margin-bottom: var(--sp-3);
    }

    .partner-band-row {
        gap: var(--sp-2);
        flex-wrap: nowrap;
        align-items: center;
    }

    .partner-card {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        gap: 0;
        padding: 0;
        border: 0;
    }

    /* Ohne Rahmen gibt es auch nichts zu betonen. */
    .partner-card:hover {
        border: 0;
        background: none;
        transform: none;
    }

    .partner-card-logo {
        height: 32px;
        justify-content: center;
        gap: 0.3rem;
    }

    /* Wind's Fahrstatt: Bildmarke und Wortmarke nebeneinander passen
       in ein Drittel von 375 px nicht — sie stehen deshalb
       uebereinander, und die Reihe richtet sich an der Mitte aus. */
    .partner-card-logo-composite {
        flex-direction: column;
        height: auto;
        gap: 0.12rem;
    }
    .partner-card-logo-composite img { max-height: 22px; }
    .partner-card-word { font-size: 0.68rem; }

    .partner-card-meta { display: none; }

    .partner-band-claim { font-size: 0.9rem; }
}