/* =========================================================================
   LANDING V3 (index.php, vorher index3.php) - 2026-10-01
   Laedt NACH landing.css + landing-flow.css und gilt nur fuer body.v3.
   Hero und durchgehender Himmel kommen unveraendert aus landing.css /
   landing-flow.css. Hier nur die neuen Sektionen (.v3-sec):
     Fragen-Ticker, Netzwerk nach Rolle, Weg eines Banners, Module (Bento),
     Aufwand-Rechner, Schluss-CTA.
   Farben laufen ueber --v3-* Tokens; der Tagmodus tauscht nur die Tokens.
   ========================================================================= */

body.v3 {
    --v3-text:        #e8f1ec;
    --v3-text-2:      #b8c8c0;
    --v3-text-3:      #7f908a;
    --v3-accent:      #8de0a8;
    --v3-accent-rgb:  141, 224, 168;
    --v3-warm:        #9fb4c2;   /* kuehles Blaugrau: Fragen, Kosten, Hinweise */
    --v3-warm-rgb:    159, 180, 194;
    --v3-card:        linear-gradient(180deg, rgba(20, 42, 58, 0.62), rgba(11, 26, 37, 0.62));
    --v3-card-solid:  #0e1f2b;
    --v3-card-border: rgba(141, 224, 168, 0.14);
    --v3-line:        rgba(255, 255, 255, 0.08);
    --v3-chip:        rgba(255, 255, 255, 0.045);
    --v3-shadow:      0 18px 50px rgba(0, 0, 0, 0.32);
    --v3-on-accent:   #0a1a26;
    --v3-grad:        var(--bt-grad-mint);
}
html[data-theme="light"] body.v3 .v3-sec {
    --v3-text:        #0c1922;
    --v3-text-2:      #3a4a52;
    --v3-text-3:      #6e7a7e;
    --v3-accent:      #2d8458;
    --v3-accent-rgb:  45, 132, 88;
    --v3-warm:        #4f6b7d;
    --v3-warm-rgb:    79, 107, 125;
    --v3-card:        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.76));
    --v3-card-solid:  #ffffff;
    --v3-card-border: rgba(12, 25, 34, 0.1);
    --v3-line:        rgba(12, 25, 34, 0.1);
    --v3-chip:        rgba(12, 25, 34, 0.04);
    --v3-shadow:      0 12px 34px rgba(12, 25, 34, 0.08);
    --v3-on-accent:   #ffffff;
    --v3-grad:        var(--bt-grad-mint-dark);
}

/* Anker nicht unter der fixen Navi verstecken */
body.v3 section[id] {
    scroll-margin-top: var(--bt-nav-h);
}

/* ---------- Hero: nur die Vertrauenszeile ist neu ---------- */
.v3-trust {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    font-family: var(--bt-font-mono);
    font-size: 11px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--bt-text-2);
    opacity: 0;
    animation: heroLineIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s forwards;
}
.v3-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.v3-trust svg {
    width: 16px;
    height: 16px;
    color: var(--bt-mint);
    flex-shrink: 0;
}

/* ---------- Grundgeruest der neuen Sektionen ---------- */
.v3-sec {
    position: relative;
    padding: var(--bt-section-y) var(--bt-pad-x);
    color: var(--v3-text);
}
.v3-wrap {
    max-width: 1440px;
    margin: 0 auto;
}
.v3-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: end;
    margin-bottom: 56px;
}
.v3-head--center {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    margin-bottom: 80px;
}
/* Titel ueber die volle Breite (Netzwerk: 'Verwaltung ist der Anfang.' in einer Zeile) */
.v3-head--wide {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}
.v3-head--wide .v3-lead {
    max-width: 760px;
}
.v3-head h2,
.v3-final h2 {
    font-family: var(--bt-font-display);
    font-size: clamp(34px, 3.8vw, 58px);
    font-weight: 500;
    letter-spacing: -1.5px;
    line-height: 1.15;
    margin: 0;
    text-transform: uppercase;
}
/* base.css faerbt h1-h6 hell (App) - auf Hell sonst unsichtbar */
.v3-sec h3 {
    color: var(--v3-text);
}
.v3-eyebrow {
    color: var(--v3-accent);
    margin-bottom: 16px;
}
.v3-lead {
    font-size: 17px;
    line-height: 1.65;
    color: var(--v3-text-2);
    margin: 0;
    max-width: 520px;
}

/* Tagmodus: Verlaufsschrift dunkler, Laufschrift-Glow weicher */
html[data-theme="light"] .v3-sec :is(.gradient-text:not(:has(.rg-word)), .rg-dark .rg-word) {
    background: var(--bt-grad-mint-dark);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
}
html[data-theme="light"] .v3-sec .rg-dark .rg-word {
    animation-name: btRunGlowSoft;
}

/* Tagmodus: bisher schwarze Ueberschriften dunkelgruen (2026-10-04).
   Farben = 50/50 aus dem dunklen Mint-Verlauf (#2d8458/#1f6b46) und
   --bt-ink (#0c1922). */
html[data-theme="light"] :is(.pricing-header, .blog-teaser) h2.rg-light:not(:has(.rg-word)),
html[data-theme="light"] :is(.pricing-header, .blog-teaser) h2.rg-light .rg-word {
    background: linear-gradient(135deg, #1d4f3d 0%, #164234 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
html[data-theme="light"] .v3-sec h3,
html[data-theme="light"] .pricing-name,
html[data-theme="light"] .blog-teaser .bt-card__title {
    color: #164234;
}

/* Weiches Auftauchen (landing-v3.js setzt .v3-rv nur unterhalb des Bildschirms) */
.v3-rv {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--rv-d, 0s);
}
.v3-rv.is-in {
    opacity: 1;
    transform: none;
}
/* Die drei Schritte: langsamer, Versatz 0.7 s je Schritt setzt landing-v3.js.
   Verstecken ohne Uebergang - sonst blenden sie beim schnellen Hinspringen
   (Navi) erst aus und danach wieder ein. */
.v3-steps3 > li.v3-rv {
    transition-duration: 1.3s;
}
.v3-steps3 > li.v3-rv:not(.is-in) {
    transition: none;
}

/* =========================================================================
   FRAGEN-TICKER
   ========================================================================= */
.v3-questions {
    overflow: hidden;
    padding-bottom: calc(var(--bt-section-y) * 0.75);
}
.v3-marquee {
    display: grid;
    gap: 14px;
    margin: 0 calc(var(--bt-pad-x) * -1) 104px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.v3-mq-row {
    overflow: hidden;
}
.v3-mq-track {
    display: flex;
    width: max-content;
    animation: v3Marquee 150s linear infinite;
}
.v3-mq-row.is-rev .v3-mq-track {
    animation-direction: reverse;
    animation-duration: 170s;
}
.v3-marquee:hover .v3-mq-track,
.v3-marquee.is-paused .v3-mq-track {
    animation-play-state: paused;
}
.v3-mq-list {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0 14px 0 0;
    list-style: none;
}
.v3-q {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    padding: 12px 22px 12px 12px;
    border-radius: 999px;
    background: var(--v3-chip);
    border: 1px solid var(--v3-line);
    font-size: 16px;
    color: var(--v3-text);
    /* langsam aus, schnell an (.is-lit) */
    transition: border-color 1.2s ease, background-color 1.2s ease, box-shadow 1.2s ease, text-shadow 1.2s ease;
}
/* Einzelne Fragen leuchten kurz auf - wie der Glow der Ueberschriften.
   landing-v3.js setzt .is-lit auf zufaellige sichtbare Fragen. */
.v3-q.is-lit {
    border-color: rgba(var(--v3-accent-rgb), 0.55);
    background-color: rgba(var(--v3-accent-rgb), 0.08);
    box-shadow: 0 0 18px rgba(var(--v3-accent-rgb), 0.22), inset 0 0 12px rgba(var(--v3-accent-rgb), 0.06);
    text-shadow: 0 0 10px rgba(var(--v3-accent-rgb), 0.35);
    transition-duration: 0.45s;
}
.v3-q.is-lit .v3-q-mark {
    color: var(--v3-accent);
    border-color: rgba(var(--v3-accent-rgb), 0.6);
    background: rgba(var(--v3-accent-rgb), 0.12);
    transition-duration: 0.45s;
}
.v3-q-mark {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--bt-font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--v3-warm);
    border: 1px solid rgba(var(--v3-warm-rgb), 0.45);
    background: rgba(var(--v3-warm-rgb), 0.08);
    transition: color 1.2s ease, border-color 1.2s ease, background 1.2s ease;
}
@keyframes v3Marquee {
    to { transform: translateX(-50%); }
}
.v3-answer {
    text-align: center;
}
.v3-answer-big {
    font-family: var(--bt-font-display);
    font-size: clamp(24px, 2.8vw, 40px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    max-width: 980px;
    margin: 0 auto 18px;
}
.v3-answer-big .gradient-text {
    display: block;
    margin-top: 4px;
    font-size: 1.45em;
    line-height: 1.05;
}
.v3-answer-sub {
    font-size: 17px;
    line-height: 1.6;
    color: var(--v3-text-2);
    max-width: 620px;
    margin: 0 auto;
}

/* =========================================================================
   NETZWERK NACH ROLLE
   ========================================================================= */
.v3-net-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.v3-net-grid > *,
.v3-calc-grid > * {
    min-width: 0;
}
.v3-net-stage {
    width: 100%;
    max-width: 620px;
    justify-self: center;
}
.v3-net-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.v3-net-ring {
    fill: none;
    stroke: var(--v3-line);
    stroke-dasharray: 2 8;
}
.v3-spoke {
    stroke: rgba(var(--v3-accent-rgb), 0.16);
    stroke-width: 1.2;
    stroke-dasharray: 3 6;
}
.v3-hub-glow {
    fill: url(#v3HubGlow);
}
.v3-hub.is-hit .v3-hub-glow {
    animation: v3HubPulse 0.9s ease-out;
}
@keyframes v3HubPulse {
    0%   { opacity: 1; transform: scale(1); }
    40%  { opacity: 1; transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}
.v3-hub-glow {
    transform-box: fill-box;
    transform-origin: center;
}
.v3-hub-label rect {
    fill: var(--v3-card-solid);
    stroke: var(--v3-card-border);
}
.v3-hub-label text {
    font-family: var(--bt-font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    fill: var(--v3-accent);
    text-anchor: middle;
    dominant-baseline: central;
}

.v3-node-halo {
    fill: rgba(var(--v3-accent-rgb), 0.12);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.5s ease;
}
.v3-node.is-me .v3-node-halo {
    opacity: 1;
    animation: v3Halo 2.6s ease-in-out infinite;
}
@keyframes v3Halo {
    0%, 100% { transform: scale(0.94); }
    50%      { transform: scale(1.06); }
}
.v3-node-bg {
    fill: var(--v3-card-solid);
    stroke: var(--v3-card-border);
    stroke-width: 1.5;
    transition: stroke 0.4s ease, stroke-width 0.4s ease;
}
.v3-node-ico {
    color: var(--v3-text-3);
    transition: color 0.4s ease;
}
.v3-node-label {
    font-family: var(--bt-font-display);
    font-size: 14px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-anchor: middle;
    fill: var(--v3-text-2);
    /* Linie hinter der Beschriftung ausblenden */
    paint-order: stroke;
    stroke: #0a1720;
    stroke-width: 6px;
    stroke-linejoin: round;
    transition: fill 0.4s ease;
}
html[data-theme="light"] .v3-sec .v3-node-label {
    stroke: #f2f7f4;
}
.v3-node.is-on .v3-node-bg {
    stroke: rgba(var(--v3-accent-rgb), 0.55);
}
.v3-node.is-on .v3-node-ico {
    color: var(--v3-accent);
}
.v3-node.is-me .v3-node-bg {
    stroke: var(--v3-accent);
    stroke-width: 2.5;
}
.v3-node.is-me .v3-node-ico {
    color: var(--v3-accent);
}
.v3-node.is-me .v3-node-label,
.v3-node.is-on .v3-node-label {
    fill: var(--v3-text);
}
.v3-node.is-hit .v3-node-bg {
    animation: v3Hit 0.8s ease-out;
}
@keyframes v3Hit {
    0%   { stroke-width: 9; stroke: rgba(var(--v3-accent-rgb), 0.9); }
    100% { stroke-width: 1.5; }
}
.v3-node-me {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.v3-node.is-me .v3-node-me {
    opacity: 1;
}
.v3-node-me rect {
    fill: var(--v3-accent);
}
.v3-node-me text {
    font-family: var(--bt-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    fill: var(--v3-on-accent);
    text-anchor: middle;
    dominant-baseline: central;
}

.v3-flow {
    fill: none;
    stroke: rgba(var(--v3-accent-rgb), 0.55);
    stroke-width: 1.6;
    stroke-dasharray: 4 7;
    opacity: 0;
    transition: opacity 0.6s ease;
    animation: v3Dash 1.1s linear infinite;
}
.v3-flow.is-in {
    opacity: 1;
}
@keyframes v3Dash {
    to { stroke-dashoffset: -22; }
}
.v3-pk {
    pointer-events: none;
}
.v3-pk rect {
    fill: var(--v3-card-solid);
    stroke: var(--v3-accent);
    stroke-width: 1.2;
}
.v3-pk text {
    font-family: var(--bt-font-mono);
    font-size: 12px;
    fill: var(--v3-text);
    text-anchor: middle;
    dominant-baseline: central;
}

/* Rollen rechts */
.v3-roles-label {
    color: var(--v3-text-3);
    margin-bottom: 12px;
}
.v3-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 34px;
}
.v3-role {
    font-family: var(--bt-font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid var(--v3-line);
    background-color: var(--v3-chip);
    color: var(--v3-text-2);
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.v3-role:hover {
    color: var(--v3-text);
    border-color: rgba(var(--v3-accent-rgb), 0.4);
}
.v3-role:focus-visible {
    outline: 2px solid var(--v3-accent);
    outline-offset: 2px;
}
.v3-role.is-active {
    color: var(--v3-on-accent);
    background: var(--v3-grad);
    border-color: transparent;
}
.v3-role-panel {
    display: none;
}
.v3-role-panel.is-active {
    display: block;
    animation: v3PanelIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes v3PanelIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.v3-role-panel h3 {
    font-family: var(--bt-font-display);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin: 0 0 16px;
    color: var(--v3-text);
}
.v3-role-panel p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--v3-text-2);
    margin: 0;
    max-width: 520px;
}
.v3-checks {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.v3-checks li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--v3-text);
}
.v3-ck {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--v3-accent);
    background: rgba(var(--v3-accent-rgb), 0.14);
}
.v3-ck svg {
    width: 14px;
    height: 14px;
}
.v3-role-progress {
    max-width: 360px;
    height: 2px;
    margin-top: 34px;
    border-radius: 2px;
    background: var(--v3-line);
    overflow: hidden;
}
.v3-role-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--v3-grad);
    transform: scaleX(0);
    transform-origin: left center;
}
.v3-role-progress.is-running span {
    animation: v3Prog var(--v3-cycle, 8s) linear forwards;
}
@keyframes v3Prog {
    to { transform: scaleX(1); }
}
.v3-net.is-manual .v3-role-progress {
    visibility: hidden;
}

/* =========================================================================
   WEG EINES BANNERS
   ========================================================================= */
.v3-trail-card {
    background: var(--v3-card);
    border: 1px solid var(--v3-card-border);
    border-radius: 18px;
    padding: 28px 32px 30px;
    box-shadow: var(--v3-shadow);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}
.v3-trail-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 22px;
    margin-bottom: 34px;
    border-bottom: 1px solid var(--v3-line);
}
.v3-trail-item img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    background: #fff;
    flex-shrink: 0;
}
.v3-trail-name {
    font-family: var(--bt-font-display);
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.v3-trail-meta {
    margin-top: 5px;
    font-family: var(--bt-font-mono);
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--v3-text-3);
}
.v3-trail-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(var(--v3-accent-rgb), 0.4);
    background: rgba(var(--v3-accent-rgb), 0.08);
    color: var(--v3-accent);
    font-family: var(--bt-font-mono);
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
}
.v3-trail-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.v3-trail-track {
    position: relative;
    --v3-step: 0;
}
.v3-trail-track::before,
.v3-trail-fill {
    content: "";
    position: absolute;
    top: 26px;
    left: 10%;
    height: 2px;
    border-radius: 2px;
}
.v3-trail-track::before {
    right: 10%;
    background: var(--v3-line);
}
.v3-trail-fill {
    width: calc(var(--v3-step) * 20%);
    background: var(--v3-grad);
    transition: width 1.1s cubic-bezier(0.6, 0, 0.2, 1);
}
.v3-trail-fill::after {
    content: "";
    position: absolute;
    right: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 12px 3px rgba(var(--v3-accent-rgb), 0.8);
}
.v3-trail-card.is-rewind .v3-trail-fill {
    transition-duration: 0.6s;
}
.v3-trail-steps {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.v3-ts {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 6px;
}
.v3-ts-ico {
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--v3-card-solid);
    border: 1.5px solid var(--v3-line);
    color: var(--v3-text-3);
    transition: color 0.5s ease, background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.v3-ts-ico svg {
    width: 24px;
    height: 24px;
}
.v3-ts-txt {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.v3-ts-t {
    font-family: var(--bt-font-display);
    font-size: 12.5px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--v3-text-2);
    transition: color 0.4s ease;
}
.v3-ts-d {
    font-size: 13px;
    line-height: 1.4;
    color: var(--v3-text-3);
}
.v3-ts.is-done .v3-ts-ico {
    border-color: rgba(var(--v3-accent-rgb), 0.5);
    color: var(--v3-accent);
}
.v3-ts.is-now .v3-ts-ico {
    border-color: transparent;
    background: var(--v3-grad);
    color: var(--v3-on-accent);
    box-shadow: 0 0 0 7px rgba(var(--v3-accent-rgb), 0.14), 0 0 34px rgba(var(--v3-accent-rgb), 0.45);
}
.v3-ts.is-now .v3-ts-t {
    color: var(--v3-text);
}
.v3-trail-log {
    list-style: none;
    margin: 30px 0 0;
    padding: 18px 0 0;
    min-height: 152px;
    border-top: 1px dashed var(--v3-line);
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-family: var(--bt-font-mono);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--v3-text-2);
    transition: opacity 0.4s ease;
}
.v3-trail-card.is-rewind .v3-trail-log {
    opacity: 0;
}
.v3-trail-log li {
    display: flex;
    gap: 16px;
    animation: v3LogIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.v3-log-time {
    flex-shrink: 0;
    min-width: 76px;
    color: var(--v3-accent);
}
@keyframes v3LogIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}

.v3-steps3-head {
    margin: 64px 0 0;
}
.v3-steps3 {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--v3-line);
}
.v3-steps3 li {
    padding: 28px 32px 0 0;
}
.v3-steps3 li + li {
    padding-left: 32px;
    border-left: 1px solid var(--v3-line);
}
.v3-s3-n {
    display: inline-block;
    font-family: var(--bt-font-display);
    font-size: 40px;
    line-height: 1;
    margin-bottom: 16px;
}
.v3-steps3 h3 {
    font-family: var(--bt-font-display);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.v3-steps3 p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--v3-text-2);
    margin: 0;
    max-width: 360px;
}

/* =========================================================================
   MODULE (BENTO)
   ========================================================================= */
.v3-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}
.v3-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border-radius: 18px;
    background: var(--v3-card);
    border: 1px solid var(--v3-card-border);
    overflow: hidden;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.v3-tile:hover {
    border-color: rgba(var(--v3-accent-rgb), 0.4);
    transform: translateY(-2px);
}
/* Desktop: Material und Kalender je halb. Darunter Asset-Safe und Notifications
   ueber zwei Reihen, dazwischen 04 + 05 in halber Hoehe und darunter das Lager
   in halber Breite. Tablet/Handy siehe unten. */
@media (min-width: 1101px) {
    .v3-bento {
        grid-template-areas:
            "mat  mat  mat  mat  mat  mat  cal  cal  cal  cal  cal  cal"
            "safe safe safe trk  trk  trk  prt  prt  prt  ntf  ntf  ntf"
            "safe safe safe sto  sto  sto  sto  sto  sto  ntf  ntf  ntf";
    }
    .v3-tile--material { grid-area: mat; }
    .v3-tile--cal      { grid-area: cal; }
    .v3-tile--safe     { grid-area: safe; }
    .v3-tile--track    { grid-area: trk; }
    .v3-tile--partner  { grid-area: prt; }
    .v3-tile--notif    { grid-area: ntf; }
    .v3-tile--store    { grid-area: sto; }
}

.v3-tile-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.v3-tile-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--v3-accent);
    background: rgba(var(--v3-accent-rgb), 0.1);
    border: 1px solid rgba(var(--v3-accent-rgb), 0.2);
}
.v3-tile-ico svg {
    width: 24px;
    height: 24px;
}
.v3-tile-n {
    font-family: var(--bt-font-mono);
    font-size: 11px;
    letter-spacing: 1.4px;
    color: var(--v3-text-3);
}
.v3-tile h3 {
    font-family: var(--bt-font-display);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.v3-tile p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--v3-text-2);
    margin: 0;
}
.v3-thumbs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: auto;
    padding-top: 26px;
}
.v3-thumbs img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    background: #fff;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.v3-thumbs figure {
    margin: 0;
    min-width: 0;
}
.v3-thumbs figcaption {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-top: 8px;
    font-family: var(--bt-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    color: var(--v3-text-3);
}
.v3-thumbs figcaption b {
    font-weight: 500;
    color: var(--v3-accent);
}
.v3-tile:hover .v3-thumbs figure:nth-child(odd) img {
    transform: translateY(-4px);
}
.v3-files {
    list-style: none;
    margin: auto 0 0;
    padding: 26px 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* nie breiter als die Kachel */
    gap: 8px;
}
/* Vorschau links ueber zwei Zeilen, rechts der Name und darunter die Version -
   so bleibt der Name auch in der schmalen Kachel vollstaendig */
.v3-file {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--v3-chip);
    border: 1px solid var(--v3-line);
    font-size: 13.5px;
}
.v3-file > :first-child {
    grid-row: span 2;
}
.v3-file-ext {
    flex-shrink: 0;
    min-width: 34px;
    text-align: center;
    padding: 4px 6px;
    border-radius: 5px;
    font-family: var(--bt-font-mono);
    font-size: 10px;
    color: var(--v3-accent);
    background: rgba(var(--v3-accent-rgb), 0.12);
}
/* Logo-Vorschau statt Typ-Kuerzel: immer dunkler Grund, die Wortmarke ist hell */
.v3-file-thumb {
    flex-shrink: 0;
    width: 62px;
    height: 26px;
    padding: 3px 6px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    background: #0c1922;
}
.v3-file-thumb img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.v3-file-name {
    align-self: end;
    min-width: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;   /* Notbremse - normal bricht <wbr> nach dem _ */
}
.v3-file-v {
    align-self: start;
    font-family: var(--bt-font-mono);
    font-size: 10.5px;
    color: var(--v3-text-3);
}
.v3-file.is-current {
    border-color: rgba(var(--v3-accent-rgb), 0.35);
}
.v3-file.is-current .v3-file-v {
    color: var(--v3-accent);
}
.v3-file.is-old {
    opacity: 0.5;
}
.v3-file.is-old .v3-file-name {
    text-decoration: line-through;
}
.v3-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-family: var(--bt-font-mono);
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--v3-text-3);
}
.v3-share > span:first-child {
    margin-right: 4px;
}
.v3-chip {
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--v3-line);
    color: var(--v3-text-2);
}
.v3-mini-pill {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--v3-chip);
    border: 1px solid var(--v3-line);
    font-family: var(--bt-font-mono);
    font-size: 11px;
    letter-spacing: 0.6px;
    color: var(--v3-text-2);
}
.v3-tile--track p,
.v3-tile--partner p {
    margin-bottom: 22px;
}
.v3-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--v3-accent);
    box-shadow: 0 0 0 4px rgba(var(--v3-accent-rgb), 0.18);
}
.v3-avatars {
    margin-top: auto;
    display: flex;
}
.v3-avatars span {
    width: 38px;
    height: 38px;
    margin-left: -8px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--bt-font-mono);
    font-size: 11px;
    color: var(--v3-text);
    background: var(--v3-card-solid);
    border: 1.5px solid rgba(var(--v3-accent-rgb), 0.35);
}
.v3-avatars span:first-child {
    margin-left: 0;
}
.v3-avatars .is-more {
    color: var(--v3-on-accent);
    background: var(--v3-grad);
    border-color: transparent;
}
.v3-notes {
    margin-top: auto;
    padding-top: 22px;
    display: grid;
    gap: 10px;
}
.v3-note {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--v3-chip);
    border: 1px solid var(--v3-line);
    border-left: 3px solid rgba(var(--v3-accent-rgb), 0.6);
    font-size: 13.5px;
}
.v3-note.is-warn {
    border-left-color: var(--v3-warm);
}
.v3-note strong {
    font-weight: 600;
}
.v3-note span {
    font-size: 12.5px;
    color: var(--v3-text-3);
}
/* Lager: Text oben, Lagerauswahl darunter - Optik wie in der App (warehouse.css) */
.v3-whs {
    margin-top: auto;
    padding-top: 22px;
    display: flex;
    gap: 10px;
}
.v3-wh {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 10px;
    border-radius: 14px;
    background: var(--v3-chip);
    border: 1px solid var(--v3-line);
    overflow: hidden;
}
/* Mint-Leiste links: beim gewaehlten Lager und bei Hover */
.v3-wh::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--v3-grad);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.v3-wh.is-sel::before,
.v3-wh:hover::before {
    transform: scaleY(1);
}
.v3-wh.is-sel {
    border-color: rgba(var(--v3-accent-rgb), 0.5);
    background: rgba(var(--v3-accent-rgb), 0.08);
}
/* Nummer als grosses Wasserzeichen rechts */
.v3-wh-num {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--bt-font-display);
    font-size: 64px;
    line-height: 1;
    color: var(--v3-line);
    pointer-events: none;
}
.v3-wh.is-sel .v3-wh-num {
    color: rgba(var(--v3-accent-rgb), 0.22);
}
.v3-wh-name,
.v3-wh-row {
    position: relative;
}
.v3-wh-name {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--v3-text);
}
.v3-wh.is-sel .v3-wh-name {
    color: var(--v3-accent);
}
.v3-wh-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.v3-wh-row b {
    font-family: var(--bt-font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--v3-accent);
}
.v3-wh-row i {
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    color: var(--v3-text-3);
}

/* Kalender: Tage, Events und Fusszeile baut landing.js in #calGrid/#calFooter.
   Grundoptik aus landing.css, hier nur auf die v3-Tokens umgefaerbt. */
.v3-tile--cal .cal-month-label {
    margin-left: 8px;
    font-size: 11px;
    color: var(--v3-text-3);
}
.v3-cal {
    margin-top: auto;
    padding-top: 22px;
}
.v3-tile--cal .cal-head {
    margin: 0 0 8px;
    color: var(--v3-text-3);
}
.v3-sec .v3-tile--cal .cal-day {
    aspect-ratio: 1;
    font-size: 11px;
}
.v3-sec .v3-tile--cal .cal-day:not(.is-empty) {
    border-color: var(--v3-line);
    color: var(--v3-text-2);
}
.v3-sec .v3-tile--cal .cal-day:not(.is-empty):not(.evt-1):not(.evt-2):not(.evt-3) {
    background-color: var(--v3-chip);
}
.v3-sec .v3-tile--cal .cal-day:is(.evt-2, .evt-3) {
    color: #fff;
}
.v3-sec .v3-tile--cal .cal-day.is-today {
    border-color: var(--v3-accent);
    box-shadow: inset 0 0 0 1px var(--v3-accent);
    color: var(--v3-text);
}
.v3-sec .v3-tile--cal .cal-day:not(.is-empty):hover {
    border-color: var(--v3-accent);
}
.v3-sec .v3-tile--cal :is(.evt-1, .evt-2) .cal-day-badge {
    color: var(--v3-accent);
}
.v3-tile--cal .plan-footer {
    border-top-color: var(--v3-line);
    color: var(--v3-text-2);
}
.v3-tile--cal .plan-footer strong {
    color: var(--v3-text);
}
/* Kalender (Desktop): etwas mehr Luft und Schrift in den Tagen */
@media (min-width: 1101px) {
    .v3-sec .v3-tile--cal .cal-day {
        padding: 6px 8px;
        font-size: 13px;
    }
    .v3-sec .v3-tile--cal .cal-day-badge {
        bottom: 5px;
        right: 7px;
        font-size: 10px;
    }
    .v3-tile--cal :is(.cal-head, .cal-grid) {
        gap: 6px;
    }
}

/* =========================================================================
   AUFWAND-RECHNER
   ========================================================================= */
.v3-calc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 22px;
}
.v3-calc-in,
.v3-calc-out {
    padding: 36px;
    border-radius: 18px;
    background: var(--v3-card);
    border: 1px solid var(--v3-card-border);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}
.v3-calc-out {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* Inhalt unten, freier Platz oben */
    background:
        radial-gradient(ellipse at 85% 0%, rgba(var(--v3-accent-rgb), 0.16), transparent 60%),
        var(--v3-card);
}
.v3-calc-intro {
    margin: 0 0 30px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--v3-text-2);
}
/* Hinweis unter den Reglern */
.v3-calc-note {
    margin: 32px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--v3-line);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--v3-text-3);
}
.v3-range {
    display: block;
    cursor: pointer;
}
.v3-range + .v3-range {
    margin-top: 32px;
}
.v3-range-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 14px;
}
.v3-range-l {
    display: block;
    font-size: 15.5px;
    color: var(--v3-text);
}
.v3-range-hint {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--v3-text-3);
}
.v3-range output {
    flex-shrink: 0;
    font-family: var(--bt-font-display);
    font-size: 24px;
    line-height: 1;
    color: var(--v3-accent);
}
.v3-slider {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 6px;
    margin: 0;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--v3-accent) 0 var(--p, 50%), var(--v3-line) var(--p, 50%) 100%);
    outline: none;
    cursor: pointer;
    --v3-fill-a: #8de0a8;   /* Anfang der Spur: hell */
    --v3-fill-b: #1a5235;   /* Ende der Spur: dunkel */
}
.v3-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--v3-accent);
    box-shadow: 0 0 0 6px rgba(var(--v3-accent-rgb), 0.15);
    transition: box-shadow 0.2s ease;
}
.v3-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--v3-accent);
    box-shadow: 0 0 0 6px rgba(var(--v3-accent-rgb), 0.15);
}
.v3-slider::-moz-range-track {
    background: transparent;
}
.v3-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 8px rgba(var(--v3-accent-rgb), 0.35);
}
.v3-slider:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 8px rgba(var(--v3-accent-rgb), 0.35);
}
/* Fester Verlauf ueber die ganze Spur, sichtbar bis zum Regler: je weiter,
   desto dunkler. Der Regler-Rand nimmt die Farbe an seiner Stelle an. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .v3-slider {
        background: linear-gradient(90deg,
            var(--v3-fill-a) 0,
            color-mix(in srgb, var(--v3-fill-b) var(--p, 50%), var(--v3-fill-a)) var(--p, 50%),
            var(--v3-line) var(--p, 50%) 100%);
    }
    .v3-slider::-webkit-slider-thumb {
        border-color: color-mix(in srgb, var(--v3-fill-b) var(--p, 50%), var(--v3-fill-a));
    }
    .v3-slider::-moz-range-thumb {
        border-color: color-mix(in srgb, var(--v3-fill-b) var(--p, 50%), var(--v3-fill-a));
    }
}
/* Ergebnis: Zahl links, Text rechts daneben (mehrzeilig). Feste Zahlenspalte
   (em = Zahlengroesse, passt fuer "9.999 €"), damit die Texte nicht mit den
   Werten wandern; laengere Zahlen verkleinert landing-v3.js. */
.v3-res-grid {
    display: grid;
    grid-template-columns: 3.9em minmax(0, 1fr);
    column-gap: 32px;
    font-size: clamp(46px, 5vw, 74px);   /* wie .v3-res-num */
}
.v3-res .v3-res-num {
    min-width: 0;
    white-space: nowrap;
    text-align: right;   /* Std. und € buendig untereinander */
}
.v3-res {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
}
.v3-res .v3-res-cap {
    margin: 0;
}
/* Desktop: beide Rechnungen 3rem ueber dem BannerTracker-Kasten */
@media (min-width: 1101px) {
    .v3-res-grid {
        margin-bottom: 3rem;
    }
}
.v3-res + .v3-res {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--v3-line);
}
.v3-res-num {
    font-family: var(--bt-font-display);
    font-size: clamp(46px, 5vw, 74px);
    line-height: 1;
    letter-spacing: -2px;
}
.v3-res-num small {
    margin-left: 10px;
    font-size: 0.34em;
    letter-spacing: 1px;
    color: var(--v3-text-2);
}
.v3-res-num .is-cur {
    font-size: 0.42em;   /* € eine Spur groesser als "Std." */
}
.v3-res-cap {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--v3-text-2);
}
.v3-res-cap strong {
    color: var(--v3-text);
}
/* Kosten warm, BannerTracker mint - damit der Vergleich auf einen Blick sitzt */
.v3-res-num .is-cost {
    color: var(--v3-warm);
}
.v3-res-num .v3-pre {
    margin: 0 12px 0 0;
}
.v3-calc-bt {
    margin-top: 26px;
    padding: 24px 26px 26px;
    border-radius: 14px;
    border: 1px solid rgba(var(--v3-accent-rgb), 0.45);
    background: rgba(var(--v3-accent-rgb), 0.08);
    box-shadow: 0 0 40px rgba(var(--v3-accent-rgb), 0.1);
}
.v3-calc-bt-k {
    color: var(--v3-accent);
    margin-bottom: 14px;
}
.v3-calc-bt .v3-res-cap {
    margin-bottom: 20px;
}

/* Tablet/Laptop quer (iPad, 1366x768 ...): Rechner kompakter, damit er
   ohne Scrollen in die Bildschirmhoehe passt */
@media (min-width: 901px) and (max-width: 1380px) and (max-height: 1050px) and (orientation: landscape) {
    .v3-calc-in,
    .v3-calc-out {
        padding: 24px 26px;
    }
    .v3-calc-out {
        justify-content: space-between;   /* Werte oben, Kasten unten */
    }
    .v3-calc-intro {
        margin-bottom: 18px;
        font-size: 13.5px;
        line-height: 1.5;
    }
    .v3-range + .v3-range {
        margin-top: 16px;
    }
    .v3-range-head {
        margin-bottom: 8px;
    }
    .v3-range-l {
        font-size: 14.5px;
    }
    .v3-range-hint {
        font-size: 12px;
    }
    .v3-range output {
        font-size: 21px;
    }
    .v3-calc-note {
        margin-top: 18px;
        padding-top: 14px;
        font-size: 12.5px;
        line-height: 1.5;
    }
    .v3-res-grid,
    .v3-res-num {
        font-size: clamp(38px, 4vw, 56px);
    }
    .v3-res-grid {
        column-gap: 24px;
        margin-bottom: 0;
    }
    .v3-res-cap {
        font-size: 14px;
        line-height: 1.5;
    }
    .v3-res + .v3-res {
        margin-top: 14px;
        padding-top: 14px;
    }
    .v3-calc-bt {
        margin-top: 18px;
        padding: 16px 20px 18px;
    }
    .v3-calc-bt-k {
        margin-bottom: 8px;
    }
    .v3-calc-bt .v3-res-cap {
        margin-bottom: 14px;
    }
}
/* =========================================================================
   SCHLUSS-CTA
   ========================================================================= */
.v3-final-card {
    position: relative;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 64px;
    align-items: center;
    padding: 56px 64px;
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 50% 90% at 12% 55%, rgba(var(--v3-accent-rgb), 0.18), transparent 70%),
        var(--v3-card);
    border: 1px solid var(--v3-card-border);
    box-shadow: var(--v3-shadow);
}
/* Tagmodus: dunkler Grund hinter dem Tresor - auf Hell faellt die
   Freistellung im Schatten (safe2.webp) auf. Voll dunkel bis --fin-a,
   dann weich (smoothstep) bis --fin-b = Textanfang ausgelaufen. */
html[data-theme="light"] .v3-final-card {
    --fin-a: 60px;
    --fin-b: 463px;
    background:
        radial-gradient(var(--fin-glow, ellipse 50% 90% at 12% 55%), rgba(141, 224, 168, 0.16), transparent 70%),
        linear-gradient(var(--fin-dir, 90deg),
            rgba(14, 31, 43, 1)     var(--fin-a),
            rgba(14, 31, 43, 0.957) calc(var(--fin-a) + (var(--fin-b) - var(--fin-a)) * 0.125),
            rgba(14, 31, 43, 0.844) calc(var(--fin-a) + (var(--fin-b) - var(--fin-a)) * 0.25),
            rgba(14, 31, 43, 0.684) calc(var(--fin-a) + (var(--fin-b) - var(--fin-a)) * 0.375),
            rgba(14, 31, 43, 0.5)   calc(var(--fin-a) + (var(--fin-b) - var(--fin-a)) * 0.5),
            rgba(14, 31, 43, 0.316) calc(var(--fin-a) + (var(--fin-b) - var(--fin-a)) * 0.625),
            rgba(14, 31, 43, 0.156) calc(var(--fin-a) + (var(--fin-b) - var(--fin-a)) * 0.75),
            rgba(14, 31, 43, 0.043) calc(var(--fin-a) + (var(--fin-b) - var(--fin-a)) * 0.875),
            rgba(14, 31, 43, 0)     var(--fin-b)),
        var(--v3-card);
}
@media (max-width: 1100px) {
    html[data-theme="light"] .v3-final-card {
        --fin-a: 40px;
        --fin-b: 313px;
    }
}
@media (max-width: 760px) {
    /* Bild steht ueber dem Text: Verlauf von oben nach unten */
    html[data-theme="light"] .v3-final-card {
        --fin-dir: 180deg;
        --fin-a: 80px;
        --fin-b: 243px;
        --fin-glow: ellipse 60% 30% at 25% 15%;
    }
}
.v3-final-art img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.45));
    animation: v3Float 7s ease-in-out infinite;
}
@keyframes v3Float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.v3-final-text p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--v3-text-2);
    max-width: 560px;
    margin: 22px 0 0;
}
.v3-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}
/* Tagmodus: Sekundaer-Button auf hellem Grund */
html[data-theme="light"] body.landing .v3-sec .btn-secondary {
    color: var(--v3-accent);
    border-color: var(--v3-accent);
}

/* =========================================================================
   UEBERNOMMENE SEKTIONEN (Preise, Blog, FAQ) - nur Anpassungen fuer die Startseite
   ========================================================================= */

/* Eyebrows ("— Preise", "— Kennen Sie das?" ...) eine Spur groesser */
body.v3 .bt-mono,
body.v3 .hero-eyebrow {
    font-size: 13px;
}

/* ---------- Preise ---------- */
body.v3 .pricing-header {
    justify-content: center;
    text-align: center;
}
/* Der Pfeil tauscht Essential gegen Enterprise (landing-v3.js setzt .is-ent-open).
   Handy/Tablet: einfach getauscht. Desktop: die Karten schieben sanft eine
   Spalte weiter (Desktop-Block unten). */
body.v3 .pricing-grid:not(.is-ent-open) > .is-enterprise,
body.v3 .pricing-grid.is-ent-open > [data-plan="essential"] {
    display: none;
}
/* Grosses ">" ohne Kreis, so gross wie die Ueberschrift. Zu steht es rechts
   neben den Karten, offen links davon und zeigt nach links (zurueck) */
.v3-ent-toggle {
    order: 1;
    align-self: center;
    justify-self: center;
    width: 44px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--bt-ink-3);
    font-family: var(--bt-font-display);
    font-size: clamp(38px, 4.2vw, 56px);   /* wie .pricing-header h2 */
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.7s ease 0.56s, color 0.25s ease;
}
.pricing-grid.is-in .v3-ent-toggle {
    opacity: 1;
}
.v3-ent-toggle:hover,
.v3-ent-toggle:focus-visible {
    color: var(--bt-mint-ink);
}
.v3-ent-toggle:focus-visible {
    outline: 2px solid var(--bt-mint-ink);
    outline-offset: 4px;
}
.v3-ent-toggle span {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.v3-ent-toggle:hover span {
    transform: translateX(6px);
}
.pricing-grid.is-ent-open .v3-ent-toggle span {
    transform: rotate(180deg);
}
.pricing-grid.is-ent-open .v3-ent-toggle:hover span {
    transform: rotate(180deg) translateX(6px);
}
/* Mint-Linie oben ueber den drei sichtbaren Karten - nicht ueber den Pfeil.
   Lage und Breite setzt der Desktop-Block unten, sonst volle Breite. */
body.v3 .pricing-grid {
    position: relative;
    border-top-color: transparent;
}
body.v3 .pricing-grid::before {
    content: "";
    position: absolute;
    top: -2px;
    left: var(--v3-plans-x, 0px);
    width: var(--v3-plans-w, 100%);
    height: 2px;
    background: var(--bt-mint-ink);
    pointer-events: none;
}
/* Leerzeichen zwischen Euro-Zeichen und Betrag, Leistungen leicht eingerueckt */
body.v3 .price-currency {
    margin-right: 0.28em;
}
body.v3 .pricing-features {
    padding-left: 12px;
}
/* Enterprise: kein Testplan, gedaempft, fuehrt zum Kontakt */
.pricing-card.is-enterprise {
    background: transparent;
    border: 1.5px dashed var(--bt-line-paper);
    border-radius: 4px;
}
.pricing-card.is-enterprise :is(.pricing-name, .pricing-idx, .pricing-desc) {
    color: var(--bt-ink-3);
}
.pricing-card.is-enterprise:hover {
    background: rgba(45, 132, 88, 0.06);
    border-color: var(--bt-mint-ink);
}
.pricing-card.is-enterprise:hover :is(.pricing-name, .pricing-idx) {
    color: var(--bt-mint-ink);
}
.v3-ent-price {
    font-family: var(--bt-font-display);
    font-size: 26px;
    line-height: 1.2;
    color: var(--bt-ink-2);
}
.v3-ent-text {
    grid-area: features;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--bt-ink-2);
}
.pricing-card.is-enterprise .pricing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    border-style: dashed;
}
.pricing-card.is-enterprise:hover .pricing-btn {
    border-style: solid;
}
.v3-ent-arrow {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pricing-card.is-enterprise:hover .v3-ent-arrow {
    transform: translateX(6px);
}
/* Desktop: Pfeil-Spalte links und rechts, dazwischen drei Karten. Enterprise
   wartet unsichtbar rechts neben Professional. Offen schieben alle Karten
   sanft eine Spalte nach links, Essential verschwindet dabei links. */
@media (min-width: 901px) and (orientation: landscape) {
    body.v3 .pricing-grid {
        grid-template-columns: 44px repeat(3, minmax(0, 1fr)) 44px;
        max-width: 1320px;
        --v3-plans-x: 60px;                  /* Pfeil 44px + Abstand 16px */
        --v3-plans-w: calc(100% - 120px);
    }
    body.v3 .pricing-grid > .pricing-card           { grid-row: 1; }
    body.v3 .pricing-grid > [data-plan="essential"] { grid-column: 2; }
    body.v3 .pricing-grid > [data-plan="business"]  { grid-column: 3; }
    body.v3 .pricing-grid > [data-plan="professional"],
    body.v3 .pricing-grid > .is-enterprise          { grid-column: 4; }
    .v3-ent-toggle {
        grid-row: 1;
        grid-column: 5;
    }
    .pricing-grid.is-ent-open .v3-ent-toggle {
        grid-column: 1;
    }
    /* Die jeweils verborgene Karte bleibt im Raster, nur unsichtbar */
    body.v3 .pricing-grid:not(.is-ent-open) > .is-enterprise,
    body.v3 .pricing-grid.is-ent-open > [data-plan="essential"] {
        display: grid;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    body.v3 .pricing-grid:not(.is-ent-open) > .is-enterprise {
        transform: translateX(calc(100% + 16px));
    }
    body.v3 .pricing-grid.is-ent-open > .pricing-card {
        transform: translateX(calc(-100% - 16px));
    }
    body.v3 .pricing-grid.is-ent-open > .is-enterprise {
        transform: none;
    }
    /* Ab dem ersten Klick ohne die gestaffelte Einblend-Verzoegerung */
    body.v3 .pricing-grid.is-ent-moved > .pricing-card {
        transition: background 0.25s ease, opacity 0.6s ease, visibility 0.6s,
                    transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    }
    .pricing-card.is-enterprise .pricing-price {
        min-height: 48px;
        align-items: center;
    }
}
/* Schmaler Desktop (unter iPad-quer-Breite): drei Spalten, der Pfeil in einer
   eigenen Zeile darunter - zu rechts, offen links. iPad quer (ab 1024px) bleibt
   beim Desktop-Layout mit dem Pfeil seitlich. */
@media (min-width: 901px) and (max-width: 1023px) and (orientation: landscape) {
    body.v3 .pricing-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        --v3-plans-x: 0px;
        --v3-plans-w: 100%;
    }
    body.v3 .pricing-grid > [data-plan="essential"] { grid-column: 1; }
    body.v3 .pricing-grid > [data-plan="business"]  { grid-column: 2; }
    body.v3 .pricing-grid > [data-plan="professional"],
    body.v3 .pricing-grid > .is-enterprise          { grid-column: 3; }
    .v3-ent-toggle,
    .pricing-grid.is-ent-open .v3-ent-toggle {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-self: end;
    }
    .pricing-grid.is-ent-open .v3-ent-toggle {
        justify-self: start;
    }
}

/* Handy/Tablet hochkant: Karte einspaltig. Das zweispaltige Layout aus
   landing.css ist bei 390px zu breit (Preis und Button ragen ueber den Rand). */
@media (max-width: 900px) {
    body.v3 .pricing-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "price"
            "sub"
            "features"
            "button";
        row-gap: 16px;
    }
    body.v3 .pricing-card .pricing-price {
        justify-content: flex-start;
        text-align: left;
    }
    body.v3 .pricing-card .price-sub {
        text-align: left;
    }
    body.v3 .price-sub-row {
        display: inline;
    }
    body.v3 .pricing-card .pricing-btn {
        justify-self: stretch;
        max-width: none;
        margin-top: 6px;
    }
    body.v3 .pricing-card-head {
        gap: 16px;
    }
    body.v3 .v3-ent-toggle {
        grid-column: 1 / -1;
        justify-self: end;
        align-self: flex-end;
        margin: 18px 4px 0 0;
    }
    body.v3 .pricing-grid.is-ent-open .v3-ent-toggle {
        justify-self: start;
        align-self: flex-start;
        margin: 18px 0 0 4px;
    }
}

/* ---------- Nach oben (unten rechts, erst nach einer Bildschirmhoehe) ---------- */
.v3-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 90;   /* unter Navi (100) und Modals (200) */
    width: 46px;
    height: 46px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(141, 224, 168, 0.25);
    background: rgba(11, 26, 37, 0.72);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    color: #8de0a8;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, border-color 0.25s ease, background-color 0.25s ease;
}
.v3-top.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.v3-top:hover,
.v3-top:focus-visible {
    border-color: #8de0a8;
    background-color: rgba(141, 224, 168, 0.14);
}
html[data-theme="light"] .v3-top {
    border-color: rgba(12, 25, 34, 0.12);
    background: rgba(255, 255, 255, 0.85);
    color: #2d8458;
}
html[data-theme="light"] .v3-top:hover,
html[data-theme="light"] .v3-top:focus-visible {
    border-color: #2d8458;
}
@media (max-width: 600px) {
    .v3-top {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }
}

/* ---------- Blog-Teaser: Kopf + Karten zentriert ---------- */body.v3 .blog-teaser .features-header {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
}
/* auto-fit statt auto-fill: keine leere vierte Spalte auf breiten Schirmen */
body.v3 .blog-teaser .bt-blog__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- FAQ: Fragen in der Ueberschriftsschrift ---------- */
body.v3 .faq-item summary {
    font-family: var(--bt-font-display);
    font-weight: 500;
    font-size: 16.5px;
    letter-spacing: 0.3px;
}
@media (max-width: 600px) {
    body.v3 .faq-item summary {
        font-size: 14.5px;
    }
}

/* =========================================================================
   TABLET / MOBIL
   ========================================================================= */
@media (max-width: 1100px) {
    .v3-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        margin-bottom: 44px;
    }
    .v3-head--center {
        margin-bottom: 56px;
    }
    .v3-marquee {
        margin-bottom: 72px;
    }
    .v3-net-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .v3-net-stage {
        max-width: 540px;
    }
    .v3-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .v3-tile--material,
    .v3-tile--safe,
    .v3-tile--cal,
    .v3-tile--track,
    .v3-tile--partner,
    .v3-tile--notif {
        grid-column: span 1;
    }
    .v3-tile--store {
        grid-column: span 2;
    }
    .v3-calc-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .v3-final-card {
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 40px;
        padding: 44px;
    }
}

@media (max-width: 760px) {
    .v3-q {
        font-size: 14.5px;
        padding: 10px 18px 10px 10px;
    }
    .v3-q-mark {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }
    .v3-trail-card {
        padding: 22px 20px 24px;
    }
    .v3-trail-item {
        flex-wrap: wrap;
    }
    .v3-trail-status {
        margin-left: 0;
    }
    /* Stationen untereinander, Linie senkrecht */
    .v3-trail-track::before {
        top: 27px;
        bottom: 27px;
        left: 26px;
        right: auto;
        width: 2px;
        height: auto;
    }
    .v3-trail-fill {
        display: none;
    }
    .v3-trail-steps {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .v3-ts {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 16px;
        padding: 0;
    }
    .v3-ts-ico {
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .v3-trail-log {
        font-size: 11.5px;
        min-height: 0;
    }
    .v3-trail-log li {
        flex-direction: column;
        gap: 2px;
    }
    .v3-steps3 {
        grid-template-columns: 1fr;
    }
    .v3-steps3 li,
    .v3-steps3 li + li {
        padding: 24px 0;
        border-left: 0;
    }
    .v3-steps3 li + li {
        border-top: 1px solid var(--v3-line);
    }
    .v3-bento {
        grid-template-columns: 1fr;
    }
    .v3-tile--material,
    .v3-tile--safe,
    .v3-tile--cal,
    .v3-tile--track,
    .v3-tile--partner,
    .v3-tile--notif,
    .v3-tile--store {
        grid-column: auto;
    }
    .v3-whs {
        flex-wrap: wrap;
    }
    .v3-wh {
        flex: 1 1 140px;
    }
    .v3-calc-in,
    .v3-calc-out {
        padding: 26px 22px;
    }
    .v3-final-card {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 36px 24px;
        text-align: left;
    }
    .v3-final-art {
        width: 120px;
    }
}

@media (max-width: 600px) {
    .v3-roles {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-right: calc(var(--bt-pad-x) * -1);
        padding-right: var(--bt-pad-x);
        scrollbar-width: none;
    }
    .v3-roles::-webkit-scrollbar {
        display: none;
    }
    .v3-role {
        flex-shrink: 0;
    }
    /* Rechner: Text wieder unter der Zahl */
    .v3-res-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .v3-res .v3-res-num {
        text-align: left;
    }
    .v3-res .v3-res-cap {
        margin-top: 10px;
    }
    .v3-trust {
        gap: 8px 16px;
    }
    /* Netzwerk-Grafik wird klein skaliert -> Beschriftung im SVG groesser */
    .v3-node-label { font-size: 20px; }
    .v3-pk text { font-size: 16px; }
    .v3-hub-label text { font-size: 13px; letter-spacing: 1px; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
    .v3-trust {
        opacity: 1;
        animation: none;
    }
    .v3-rv {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .v3-marquee {
        -webkit-mask-image: none;
                mask-image: none;
        margin-left: 0;
        margin-right: 0;
    }
    .v3-mq-track {
        width: auto;
        animation: none;
        justify-content: center;
    }
    .v3-mq-list {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
    }
    .v3-mq-list[aria-hidden="true"] {
        display: none;
    }
    .v3-q {
        white-space: normal;
    }
    .v3-flow,
    .v3-node.is-me .v3-node-halo,
    .v3-final-art img,
    .v3-role-panel.is-active,
    .v3-trail-log li {
        animation: none;
    }
    .v3-role-progress {
        display: none;
    }
    body.v3 .pricing-grid.is-ent-moved > .pricing-card,
    .v3-trail-fill,
    .v3-tile,
    .v3-thumbs img,
    .v3-top {
        transition: none;
    }
}

/* =========================================================================
   RECHNER TABLET HOCHKANT (2026-10-19)
   Regler auf ca. 60 % Breite, Einleitungstext rechts daneben.
   ========================================================================= */
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
    .v3-calc-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .v3-calc-in {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        column-gap: 36px;
        align-items: start;
    }
    .v3-calc-in > * {
        grid-column: 1;
    }
    .v3-calc-intro {
        grid-column: 2;
        grid-row: 1 / span 4;
        margin: 0;
        padding-left: 24px;
        border-left: 1px solid var(--v3-line);
    }
    .v3-calc-note {
        grid-column: 1 / -1;
    }
    /* Ueberschrift naeher an den Kasten */
    .v3-calc .v3-head {
        margin-bottom: 24px;
    }
    /* BannerTracker-Kasten: Zahl links, Text rechts. Textspalte buendig mit
       den Ergebnis-Texten darueber (Zahlenspalte 3.9em minus Rand + Padding 27px) */
    .v3-calc-bt {
        display: grid;
        grid-template-columns: calc(3.9 * clamp(46px, 5vw, 74px) - 27px) minmax(0, 1fr);
        column-gap: 32px;
        align-items: center;
    }
    .v3-calc-bt-k {
        grid-column: 1 / -1;
    }
    .v3-calc-bt .v3-res-num {
        white-space: nowrap;
    }
    .v3-calc-bt .v3-res-cap {
        margin: 0;
    }
    .v3-calc-bt .btn {
        grid-column: 2;
        justify-self: start;
        margin-top: 20px;
    }
}

/* =========================================================================
   PREISE TABLET HOCHKANT (2026-10-19)
   Pfeil wie im Querformat seitlich neben den Karten (vertikal mittig) statt
   in eigener Zeile darunter. Die Karten behalten ihre Breite, der Pfeil
   steht im Seitenrand (--bt-pad-x): zu rechts, offen links. Ohne den
   Hover-Versatz, sonst klebt er nach dem Tippen am Bildschirmrand.
   ========================================================================= */
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
    body.v3 .pricing-grid .v3-ent-toggle {
        position: absolute;
        top: 50%;
        right: calc(-1 * var(--bt-pad-x));
        left: auto;
        grid-area: auto;
        width: var(--bt-pad-x);
        height: 88px;
        margin: 0;
        transform: translateY(-50%);
    }
    body.v3 .pricing-grid.is-ent-open .v3-ent-toggle {
        right: auto;
        left: calc(-1 * var(--bt-pad-x));
        margin: 0;
    }
    body.v3 .pricing-grid .v3-ent-toggle:hover span {
        transform: none;
    }
    body.v3 .pricing-grid.is-ent-open .v3-ent-toggle:hover span {
        transform: rotate(180deg);
    }
}

/* =========================================================================
   ROLLEN TABLET HOCHKANT (2026-10-19)
   "Ich bin ..." und die drei Rollen-Buttons mittig, Ueberschrift so breit
   wie der Text darunter und gleichmaessig umbrochen.
   ========================================================================= */
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
    .v3-roles-label {
        text-align: center;
    }
    .v3-roles {
        justify-content: center;
    }
    .v3-role-panel h3 {
        max-width: 520px;
        text-wrap: balance;
    }
}