/* ==========================================================================
   Webdesign Bartmann — Design "Nachtblau", Apple/HIG-Ausrichtung
   Alle Symbole (Pfeile, Haken, Schloss) sind reines CSS — kein SVG.
   1. Tokens
   2. Fonts
   3. Reset & Basis
   4. Typografie
   5. Hintergrund
   6. Buttons, Links, Karten, Symbole
   7. Header & Navigation
   8. Hero
   9. Röntgenblick (Signature)
  10. Leistungen & Sicherheit
  11. Segmentierte Umschalter
  12. Vorher / Nachher
  13. Listengruppen (Konditionen, Fragen)
  14. Kundenportal
  15. Demos & Overlay
  16. Ablauf
  17. Persönliches & Kontakt
  18. AppDesign-Streifen
  19. Footer & Sticky-CTA
  20. Legal-Seiten
  21. Ohne JavaScript
  22. Responsive
  ========================================================================== */

/* 1. Tokens ============================================================== */
:root {
    --bg:          #000000;
    --fill:        rgba(255,255,255,.06);
    --fill-2:      rgba(255,255,255,.035);
    --fill-hover:  rgba(255,255,255,.09);
    --separator:   rgba(255,255,255,.11);
    --hairline:    rgba(255,255,255,.07);

    --label:       #f5f5f7;
    --label-2:     rgba(235,235,245,.62);
    --label-3:     rgba(235,235,245,.38);

    --blue:        #0a84ff;
    --blue-hi:     #4aa8ff;
    --teal:        #64d2ff;
    --blue-soft:   rgba(10,132,255,.16);
    --red:         #ff453a;

    --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
            'Inter', 'Helvetica Neue', system-ui, 'Segoe UI', sans-serif;
    --mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

    --r-sm:  12px;
    --r:     16px;
    --r-lg:  20px;
    --r-xl:  28px;
    --pill:  980px;

    --sh:    0 4px 16px rgba(0,0,0,.4);
    --sh-lg: 0 20px 60px rgba(0,0,0,.55);
    --blur:  saturate(180%) blur(20px);

    --ease:   cubic-bezier(.32, .72, 0, 1);
    --ease-2: cubic-bezier(.25, .1, .25, 1);
    --t:      .28s var(--ease);
    --t-fast: .2s var(--ease-2);

    --nav-h: 72px;
    --lens:  120px;
    --bar-h: 40px;

    /* Vom Skript gesetzt: Zeiger am Desktop, Neigungssensor am Handy.
       Ohne Skript bleiben beide bei 0 und nichts bewegt sich. */
    --pointer-x: 0;
    --pointer-y: 0;

    /* Tatsaechliche Zeigerposition in vw/vh (0-100), fuer den Lichtschein,
       der dem Mauszeiger direkt folgt. Start: oberer Bildmittebereich. */
    --maus-x: 50;
    --maus-y: 30;

    /* Hauptschalter der Kachel-Neigung: 1 = an, 0 = aus. Damit laesst sich
       die Neigung an einer einzigen Stelle stilllegen, ohne die Kachelliste
       ein zweites Mal aufzuzaehlen (siehe Abschnitt Neigung weiter unten). */
    --tilt-on: 1;
}

/* 2. Fonts (Fallback ohne SF Pro) ======================================== */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:local(''), url('fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:local(''), url('fonts/Inter-Medium.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:local(''), url('fonts/Inter-SemiBold.ttf') format('truetype'); }

/* 3. Reset & Basis ======================================================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 20px);
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.55;
    letter-spacing: -.01em;
    color: var(--label-2);
    background: transparent;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { display:block; max-width:100%; height:auto; }
button { font: inherit; color: inherit; background:none; border:none; }
ul { list-style: none; }
::selection { background: rgba(10,132,255,.35); color:#fff; }

:focus-visible { outline: 3px solid rgba(10,132,255,.7); outline-offset: 3px; border-radius: 10px; }

.container { width:100%; max-width:1080px; margin:0 auto; padding:0 clamp(1.25rem, 5vw, 2.5rem); }
.container-narrow { max-width: 680px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* 4. Typografie ========================================================== */
h1, h2, h3, h4 { color: var(--label); font-weight:600; letter-spacing:-.03em; line-height:1.1; text-wrap:balance; }

h1 { font-size: clamp(2.4rem, 6.2vw, 4.25rem); letter-spacing:-.038em; line-height:1.06; }
h1 em { font-style:normal; color: var(--blue-hi); }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.85rem); letter-spacing:-.034em; }
h3 { font-size: 1.2rem; letter-spacing:-.024em; }

p { max-width: 62ch; }
strong, b { color: var(--label); font-weight:600; }

.label {
    display:block;
    font-size:.9rem; font-weight:600;
    color: var(--blue-hi);
    margin-bottom:.85rem;
}
.eyebrow { display:block; margin-bottom:.85rem; font-size:.9rem; font-weight:600; color: var(--blue-hi); }
.lead { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height:1.45; color: var(--label-2); }
.note { margin-top:2rem; font-size:.9rem; color: var(--label-3); max-width:70ch; }
.note a { color: var(--blue-hi); }
.note a:hover { text-decoration: underline; }

.sec-head { max-width: 42rem; margin: 0 auto clamp(2.5rem, 5vw, 3.75rem); text-align:center; }
.sec-head h2 { margin-bottom: .9rem; }
.sec-head p { margin: 0 auto; max-width: 46ch; font-size:1.08rem; }

section { padding: clamp(4.5rem, 10vw, 8.5rem) 0; position:relative; }

/* 5. Hintergrund ========================================================= */
.bg-canvas {
    position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
    background:
        radial-gradient(120% 75% at 50% -10%, #0e1c33 0%, #060a12 45%, var(--bg) 80%),
        var(--bg);
}
.orb {
    /* Keine eigene Transition: script.js glättet --pointer-x/-y bereits
       selbst Frame für Frame. Eine zusätzliche CSS-Transition würde bei
       jedem Frame neu retargeted und die Bewegung nur zäh machen. */
    position:absolute; display:block; border-radius:50%;
    will-change: transform;
}
.orb-a {
    /* Folgt dem Zeiger direkt: top/left bleiben bei 0, die eigentliche
       Position kommt komplett aus --maus-x/--maus-y (vw/vh), zentriert
       per -50% (= die Haelfte der eigenen, in vw definierten Groesse). */
    width:80vw; height:80vw; min-width:600px; min-height:600px; top:0; left:0;
    background: radial-gradient(circle, rgba(10,132,255,.2) 0%, rgba(10,132,255,0) 62%);
    transform: translate3d(calc(var(--maus-x) * 1vw - 50%), calc(var(--maus-y) * 1vh - 50%), 0);
}
.orb-b {
    width:64vw; height:64vw; min-width:480px; min-height:480px; top:58vh; right:-26vw;
    background: radial-gradient(circle, rgba(100,210,255,.1) 0%, rgba(100,210,255,0) 64%);
    transform: translate3d(calc(var(--pointer-x) * -145px), calc(var(--pointer-y) * -85px), 0);
}
.orb-c, .bg-grain { display:none; }

/* Deutlich staerker als im Kundenportal: die Homepage darf auffallen,
   das Portal soll ruhig bleiben. Am Handy ohne Maus zieht stattdessen
   der Neigungssensor (siehe script.js), deshalb hier kein Abschalten
   bei grobem Zeiger - nur bei ausdruecklich reduzierter Bewegung. */
@media (prefers-reduced-motion: reduce) {
    .orb-a, .orb-b { transform: none; transition: none; }
}

/* 6. Buttons, Links, Karten, Symbole ===================================== */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
    padding:.72rem 1.35rem;
    font-size:1rem; font-weight:500; letter-spacing:-.01em;
    color:#fff;
    background: var(--blue);
    border-radius: var(--pill);
    cursor:pointer;
    text-align:center;
    transition: background var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
.btn:hover { background:#1b8fff; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.btn-lg { padding:.95rem 1.9rem; font-size:1.05rem; }
.btn-sm { padding:.55rem 1.05rem; font-size:.92rem; }
.btn-block { width:100%; }

.btn-ghost {
    color: var(--label);
    background: var(--fill);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    box-shadow: inset 0 0 0 1px var(--separator);
}
.btn-ghost:hover { background: var(--fill-hover); }

/* Winkel-Symbole: reines CSS, damit nichts nachgeladen werden muss */
.chev, .chev-r {
    display:inline-block; flex:0 0 auto;
    width:8px; height:8px;
    border-right:1.8px solid currentColor;
    border-bottom:1.8px solid currentColor;
    transition: transform var(--t), border-color var(--t-fast);
}
.chev-r { transform: rotate(-45deg); margin-left:.45rem; position:relative; top:-1px; }
.chev { color: var(--label-3); transform: rotate(45deg); position:relative; top:-2px; }
details[open] > summary .chev { color: var(--blue-hi); transform: rotate(-135deg); top:2px; }

.link-arrow {
    display:inline-flex; align-items:center;
    font-size:1.05rem; font-weight:500; color: var(--blue-hi);
    transition: opacity var(--t-fast);
}
.link-arrow:hover { opacity:.75; }
.link-arrow:hover .chev-r { transform: rotate(-45deg) translate(2px,-2px); }

.card {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--r-lg);
    background: var(--fill-2);
    box-shadow: inset 0 0 0 1px var(--hairline);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.card:hover { background: var(--fill); }
.card h3 { margin-bottom:.5rem; }
.card p { font-size:1rem; }
.card.accent {
    background: linear-gradient(165deg, rgba(10,132,255,.24) 0%, rgba(10,132,255,.06) 60%, var(--fill-2) 100%);
    box-shadow: inset 0 0 0 1px rgba(10,132,255,.32);
}

.panel, .glass {
    border-radius: var(--r-lg);
    background: var(--fill-2);
    box-shadow: inset 0 0 0 1px var(--hairline);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}

.js .reveal { opacity:0; transform: translateY(18px); }
.js .reveal.in {
    opacity:1; transform:none;
    transition: opacity .5s var(--ease-2), transform .55s var(--ease);
    transition-delay: var(--d, 0ms);
}
.d1 { --d: 60ms; } .d2 { --d: 120ms; } .d3 { --d: 180ms; } .d4 { --d: 240ms; }

/* 7. Header ============================================================== */
header {
    position:fixed; top:0; left:0; width:100%; z-index:100;
    background: rgba(0,0,0,.55);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    transition: background var(--t), box-shadow var(--t);
}
header.scrolled { background: rgba(0,0,0,.78); box-shadow: 0 1px 0 var(--hairline); }
.nav-container { display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); gap:1.5rem; }

.logo {
    display:inline-block;
    font-size:1.2rem; font-weight:600; letter-spacing:-.035em; white-space:nowrap;
    color: var(--label);
    transition: opacity var(--t-fast);
}
.logo:hover { opacity:.7; }

/* --- Navigation mit gleitender Hervorhebung ---------------------------
   Die Pille liegt hinter den Verweisen und wandert unter den Punkt, auf
   dem der Zeiger steht. Ohne Zeiger ruht sie auf dem Abschnitt, in dem
   gerade gelesen wird (.active-link, gesetzt vom Scroll-Spy in script.js).

   Bewegt wird ausschliesslich ein einzelnes, absolut liegendes Element –
   die Verweise selbst bleiben unberuehrt, damit in der Leiste nichts
   springt oder umbricht. Breite und Hoehe setzt script.js je Ziel, damit
   die Pille auch nach einem Schriftwechsel exakt passt.
   -------------------------------------------------------------------- */
.nav-links { display:flex; align-items:center; gap:.3rem; position:relative; }
.nav-links a:not(.btn) {
    position:relative; z-index:1;
    padding:.45rem .6rem; border-radius: var(--pill);
    font-size:.92rem; color: var(--label-2);
    transition: color var(--t-fast);
}
.nav-links a:not(.btn):hover, .nav-links a.active-link:not(.btn) { color: var(--label); }
.nav-links .btn { margin-left:.9rem; }

.nav-pill {
    position:absolute; left:0; top:50%; z-index:0;
    width:0; height: var(--pill-h, 2rem); margin-top: calc(var(--pill-h, 2rem) / -2);
    border-radius: var(--pill);
    background: var(--fill-2);
    box-shadow: inset 0 0 0 1px var(--hairline);
    opacity:0; pointer-events:none;
    transition: transform .34s cubic-bezier(.22,.61,.36,1),
                width .34s cubic-bezier(.22,.61,.36,1),
                opacity var(--t-fast);
}
.nav-pill.is-on { opacity:1; }
/* Erste Positionierung soll nicht quer durch die Leiste fliegen. */
.nav-pill.no-anim { transition: opacity var(--t-fast); }
@media (prefers-reduced-motion: reduce) {
    .nav-pill { transition: opacity var(--t-fast); }
}

.menu-btn { display:none; width:32px; height:20px; position:relative; cursor:pointer; z-index:102; }
.menu-btn span {
    position:absolute; left:2px; right:2px; height:1.5px; border-radius:2px;
    background: var(--label);
    transition: transform var(--t), opacity var(--t-fast);
}
.menu-btn span:nth-child(1) { top:4px; }
.menu-btn span:nth-child(2) { bottom:4px; }
.menu-btn.active span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-btn.active span:nth-child(2) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-menu {
    position:fixed; top:var(--nav-h); left:0; width:100%;
    background: rgba(0,0,0,.88);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    box-shadow: 0 1px 0 var(--hairline);
    z-index:99;
    display:flex; flex-direction:column;
    padding: .5rem clamp(1.25rem,5vw,2.5rem) 1.75rem;
    max-height: calc(100vh - var(--nav-h));
    overflow-y:auto;
    opacity:0; visibility:hidden; transform: translateY(-8px);
    transition: opacity var(--t-fast), transform var(--t), visibility var(--t);
}
.mobile-menu.active { opacity:1; visibility:visible; transform:none; }
.mobile-menu a:not(.btn) {
    font-size:1.05rem; color: var(--label);
    padding:1rem 0; box-shadow: 0 1px 0 var(--hairline);
}
.mobile-menu .btn { margin-top:1.35rem; }

/* 8. Hero ================================================================ */
.hero {
    padding-top: calc(var(--nav-h) + clamp(3.5rem, 10vw, 7rem));
    padding-bottom: clamp(3rem, 7vw, 5rem);
}
.hero-inner { max-width: 50rem; margin:0 auto; text-align:center; }
.hero h1 { margin-bottom: 1.4rem; }
.hero .lead { margin: 0 auto; max-width: 44ch; }
.hero-actions {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.25rem;
    margin-top: 2.4rem;
}

.facts { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:2.75rem; }
.facts li {
    font-size:.92rem; color: var(--label-2);
    padding:.5rem 1.1rem;
    border-radius: var(--pill);
    background: var(--fill-2);
    box-shadow: inset 0 0 0 1px var(--hairline);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.facts b { color: var(--label); font-weight:600; }

/* 9. Browser-Rahmen: Schloss, Warndreieck, Seitenattrappe ==============
   Wird vom Vorher/Nachher-Vergleich genutzt. Alles reines CSS.
   ======================================================================== */
.lock {
    position:relative; display:inline-block; width:8px; height:7px; flex:0 0 auto;
    border-radius:1.5px; background: var(--teal);
}
.lock::before {
    content:''; position:absolute; left:1.5px; top:-4px; width:5px; height:5px;
    border:1.4px solid var(--teal); border-bottom:none;
    border-radius:3px 3px 0 0;
}
.warn {
    position:relative; display:inline-block; width:0; height:0; flex:0 0 auto;
    border-left:5px solid transparent; border-right:5px solid transparent;
    border-bottom:9px solid var(--red);
}
.mock { padding: clamp(1rem, 2.6vw, 2.2rem); color:#1d1d1f; height:100%; display:flex; flex-direction:column; }
.mock-nav { display:flex; align-items:center; gap:.6rem; padding-bottom:.85rem; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.mock-nav b { font-size: clamp(.72rem, 1.4vw, .98rem); font-weight:600; letter-spacing:-.03em; color:#1d1d1f; }
.mock-nav i { display:block; height:5px; width:34px; background: rgba(0,0,0,.1); border-radius:3px; }
.mock-hero { padding: clamp(.9rem, 2.6vw, 2rem) 0 0; }
.mock-hero small { font-size: clamp(.5rem,.95vw,.68rem); font-weight:600; color:#0a84ff; }
.mock-hero h4 {
    font-size: clamp(1.05rem, 3.2vw, 2.2rem); line-height:1.06; letter-spacing:-.035em;
    margin:.45rem 0 .9rem; color:#1d1d1f;
}
.mock-lines { display:grid; gap:7px; max-width:58%; }
.mock-lines i { display:block; height:5px; background: rgba(0,0,0,.1); border-radius:3px; }
.mock-btn {
    display:inline-block; margin-top: clamp(.8rem,1.8vw,1.3rem);
    font-size: clamp(.55rem,1.1vw,.8rem); font-weight:500;
    background:#0a84ff; color:#fff; padding:.55em 1.15em; border-radius:980px;
}
.mock-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-top:auto; }
.mock-cards span { display:block; height: clamp(28px, 6.5vw, 60px); background: rgba(0,0,0,.04); border-radius:12px; }

/* 11. Segmentierte Umschalter ============================================ */
.seg {
    display:inline-flex; gap:2px; margin:0 auto clamp(1.5rem, 3vw, 2.25rem);
    padding:3px; border-radius: var(--pill);
    background: rgba(255,255,255,.05);
    box-shadow: inset 0 0 0 1px var(--hairline);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.seg { display:flex; width:max-content; }
section > .container > .seg { margin-left:auto; margin-right:auto; }
.seg button {
    padding:.6rem 1.4rem;
    font-size:.95rem; font-weight:500; color: var(--label-2);
    border-radius: var(--pill);
    cursor:pointer; white-space:nowrap;
    transition: background var(--t-fast), color var(--t-fast);
}
.seg button:hover { color: var(--label); }
.seg button.is-on {
    color:#fff; background: var(--blue);
    box-shadow: 0 1px 6px rgba(10,132,255,.35);
}

/* 12. Vorher / Nachher =================================================== */
.sw-frame {
    position:relative;
    border-radius: var(--r-xl);
    overflow:hidden;
    background:#05070c;
    aspect-ratio:16/9;
    box-shadow: inset 0 0 0 1px var(--separator), var(--sh-lg);
}
.sw-bar {
    position:absolute; top:0; left:0; right:0; height:var(--bar-h); z-index:5;
    display:flex; align-items:center; gap:.45rem; padding:0 1.1rem;
    background: rgba(255,255,255,.05);
    box-shadow: 0 1px 0 var(--hairline);
    font-size:.78rem; color: var(--label-3);
}
.sw-bar i { width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,.16); display:block; flex:0 0 auto; }
.sw-url {
    display:inline-flex; align-items:center; gap:.4rem; margin-left:.6rem;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    transition: opacity var(--t-fast);
}
.sw-url-alt { color: rgba(255,180,175,.75); }

.sw-stage { position:absolute; inset:var(--bar-h) 0 0; }
.sw-page {
    position:absolute; inset:0; overflow:hidden;
    transition: opacity .35s var(--ease-2);
}
.sw-neu { background:#f5f5f7; }
.sw-alt { background:#ffffff; }

.switcher[data-mode="alt"] .sw-neu,
.switcher[data-mode="alt"] .sw-url-neu,
.switcher[data-mode="alt"] .sw-note-neu,
.switcher[data-mode="neu"] .sw-alt,
.switcher[data-mode="neu"] .sw-url-alt,
.switcher[data-mode="neu"] .sw-note-alt { opacity:0; visibility:hidden; }

/* Die Seite von 2011 — bewusst nicht karikiert, nur nicht gepflegt. */
.sw-alt {
    font-family: 'Times New Roman', Times, Georgia, serif;
    color:#000;
    display:flex; flex-direction:column;
    font-size: clamp(.5rem, 1.15vw, .8rem);
    line-height:1.45;
}
.old-head {
    padding: clamp(.5rem, 1.4vw, .95rem);
    text-align:center;
    font-size: clamp(.8rem, 2.1vw, 1.5rem); font-weight:700; color:#fff;
    background: linear-gradient(#4a6ea9, #24457c);
    border-bottom:2px solid #16294b;
    letter-spacing:0;
}
.old-body { display:flex; flex:1 1 auto; min-height:0; }
.old-nav {
    flex:0 0 clamp(78px, 17%, 150px);
    padding: clamp(.5rem, 1.3vw, .95rem);
    background:#eef1f6; border-right:1px solid #b9c2d0;
    display:flex; flex-direction:column; gap:.25em;
}
.old-nav b { display:block; margin-bottom:.35em; color:#24457c; font-weight:700; }
.old-nav a { color:#0000ee; text-decoration:underline; }
.old-main { flex:1 1 auto; padding: clamp(.5rem, 1.6vw, 1.15rem); min-width:0; }
.old-main h6 { font-size: clamp(.56rem, 1.3vw, .92rem); font-weight:700; color:#000; margin:.9em 0 .4em; letter-spacing:0; }
.old-main h5 { font-size: clamp(.62rem, 1.5vw, 1.05rem); font-weight:700; color:#000; margin-bottom:.6em; letter-spacing:0; }
.old-main p { margin-bottom:.55em; max-width:none; color:#000; }
.old-img {
    margin-top:.6em;
    height: clamp(26px, 7vw, 66px);
    border:1px dashed #9aa3b0; background:#f4f4f4;
    display:flex; align-items:center; justify-content:center;
    color:#8a8f97; font-size:.9em;
}
.old-foot {
    display:flex; justify-content:space-between; gap:1rem;
    padding: clamp(.35rem, 1vw, .7rem) clamp(.5rem, 1.4vw, .95rem);
    border-top:1px solid #b9c2d0; background:#eef1f6;
    color:#555; font-size:.9em;
}

.sw-notes { display:grid; margin-top:1.5rem; }
.sw-note {
    grid-area: 1 / 1;
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    gap:.65rem 1.5rem;
    transition: opacity .35s var(--ease-2);
}
.sw-note li {
    position:relative; padding-left:1.7rem;
    font-size:.98rem; color: var(--label-2);
}
.sw-note-alt li::before {
    content:''; position:absolute; left:.42rem; top:.62em;
    width:11px; height:11px;
    background:
        linear-gradient(var(--red), var(--red)) center/11px 2px no-repeat,
        linear-gradient(var(--red), var(--red)) center/2px 11px no-repeat;
    transform: rotate(45deg);
    opacity:.85;
}
.sw-note-neu li::before {
    content:''; position:absolute; left:.3rem; top:.42em;
    width:6px; height:11px;
    border-right:2px solid var(--blue);
    border-bottom:2px solid var(--blue);
    transform: rotate(45deg);
}


/* Nachher: identischer Inhalt, andere Bauweise */
.new {
    height:100%; display:flex; flex-direction:column;
    padding: clamp(.8rem, 2.4vw, 2rem);
    color:#1d1d1f;
    font-size: clamp(.5rem, 1.1vw, .78rem);
}
.new-nav {
    display:flex; align-items:center; gap:1rem;
    padding-bottom: clamp(.5rem, 1.4vw, .95rem);
    box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.new-nav b { font-size: clamp(.72rem, 1.5vw, 1.02rem); font-weight:600; letter-spacing:-.03em; color:#1d1d1f; }
.new-menu { display:flex; gap: clamp(.6rem, 1.6vw, 1.35rem); margin-left:auto; }
.new-menu i { font-style:normal; color:#6e6e73; white-space:nowrap; }

.new-hero { padding: clamp(.7rem, 2.4vw, 1.9rem) 0 clamp(.7rem, 1.8vw, 1.4rem); }
.new-hero small { font-size:.92em; font-weight:600; color:#0a84ff; }
.new-hero h4 {
    font-size: clamp(.98rem, 3.1vw, 2.15rem); line-height:1.08; letter-spacing:-.035em;
    color:#1d1d1f; margin:.4em 0 .35em; max-width:16ch;
}
.new-hero p { color:#6e6e73; max-width:none; }
.new-btn {
    display:inline-block; margin-top: clamp(.7rem, 1.8vw, 1.25rem);
    font-size:.98em; font-weight:500;
    background:#0a84ff; color:#fff; padding:.6em 1.3em; border-radius:980px;
}

.new-grid {
    display:grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
    gap: clamp(.5rem, 1.4vw, 1rem);
    margin-top:auto;
}
.new-img {
    display:flex; align-items:flex-end; padding: clamp(.5rem,1.2vw,.85rem);
    height: clamp(42px, 9.5vw, 94px);
    border-radius: clamp(6px, 1.2vw, 14px);
    background: linear-gradient(140deg, #e6e2dc 0%, #cfc7bd 100%);
    color:#6b6357; font-weight:500;
}
.new-note {
    padding: clamp(.5rem,1.2vw,.9rem);
    border-radius: clamp(6px, 1.2vw, 14px);
    background:#ffffff;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
}
.new-note b { display:block; color:#0a84ff; font-weight:600; margin-bottom:.35em; }
.new-note p { color:#6e6e73; max-width:none; line-height:1.4; }

.new-foot {
    margin-top: clamp(.6rem, 1.6vw, 1.15rem);
    padding-top: clamp(.45rem, 1.2vw, .8rem);
    box-shadow: inset 0 1px 0 rgba(0,0,0,.08);
    color:#8e8e93;
}

/* 13. Listengruppen ====================================================== */
.group {
    border-radius: var(--r-lg);
    background: var(--fill-2);
    box-shadow: inset 0 0 0 1px var(--hairline);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    overflow:hidden;
}
.group > details + details { box-shadow: inset 0 1px 0 var(--hairline); }

.group summary {
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap: 1.1rem;
    padding: 1.3rem clamp(1.15rem, 3vw, 1.75rem);
    cursor:pointer;
    list-style:none;
    transition: background var(--t-fast);
}
.group summary::-webkit-details-marker { display:none; }
.group summary::marker { content:''; }
.group summary:hover { background: rgba(255,255,255,.03); }

.row-text { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.row-text b { font-size:1.1rem; font-weight:600; letter-spacing:-.024em; color: var(--label); }
.row-text small { font-size:.94rem; color: var(--label-3); }
.group summary .chev { flex:0 0 8px; margin-left:.15rem; }

.row-body {
    padding: 0 clamp(1.15rem, 3vw, 1.75rem) 1.75rem;
    max-width: 68ch;
}
.row-body p + p { margin-top:.8rem; }
.js details[open] > .row-body { animation: row-open .3s var(--ease) both; }
@keyframes row-open { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform:none; } }

.ticks { display:grid; gap:.55rem; margin-top:1.1rem; }
.ticks li { position:relative; padding-left:1.7rem; font-size:1rem; color: var(--label-2); }
.ticks li::before {
    content:'';
    position:absolute; left:.3rem; top:.42em;
    width:6px; height:11px;
    border-right:2px solid var(--blue);
    border-bottom:2px solid var(--blue);
    transform: rotate(45deg);
}

.tier-body {
    display:grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-width:none;
}
.tier-intro {
    grid-column: 1 / -1;
    padding-bottom: clamp(1.1rem, 2vw, 1.5rem);
    box-shadow: inset 0 -1px 0 var(--hairline);
}
.tier-intro p { font-size:1.02rem; max-width:64ch; }
.tier-intro p + p { margin-top:.6rem; font-size:.96rem; color: var(--label-3); }
.tier-intro b { font-weight:600; }

.tier-body .ticks { margin-top:0; }
.tier-side { display:flex; flex-direction:column; gap:.75rem; align-self:start; min-width:0; }
.tier-side .btn { align-self:flex-start; }

.alt { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; align-items:stretch; }
.alt .card { display:flex; flex-direction:column; }
.alt .card .btn { margin-top:1.25rem; align-self:flex-start; }
.alt > .card:only-child { grid-column: 1 / -1; max-width:520px; margin:0 auto; }

/* 14. Kundenportal ======================================================= */
.plist {
    border-radius: var(--r-lg);
    background: var(--fill-2);
    box-shadow: inset 0 0 0 1px var(--hairline);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    overflow:hidden;
}
.prow {
    display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.55fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.35rem, 2.8vw, 1.9rem) clamp(1.15rem, 3vw, 1.75rem);
    align-items:start;
}
.prow + .prow { box-shadow: inset 0 1px 0 var(--hairline); }
.prow-head { display:flex; align-items:baseline; gap:.85rem; }
.prow-n {
    flex:0 0 auto;
    font-family: var(--mono); font-size:.8rem; font-weight:500;
    color: var(--blue-hi); letter-spacing:.02em;
}
.prow-tick {
    flex:0 0 auto; position:relative; top:-1px;
    width:6px; height:11px;
    border-right:2px solid var(--teal);
    border-bottom:2px solid var(--teal);
    transform: rotate(45deg);
    margin-right:.4rem;
}
.prow h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); letter-spacing:-.028em; }
.prow p { font-size:1rem; color: var(--label-3); max-width:56ch; }

.portal-foot {
    display:flex; align-items:center; justify-content:space-between;
    gap: clamp(1.25rem, 3vw, 2.5rem); flex-wrap:wrap;
    margin-top:1rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--r-lg);
    background: linear-gradient(120deg, rgba(10,132,255,.22) 0%, rgba(10,132,255,.05) 55%, var(--fill-2) 100%);
    box-shadow: inset 0 0 0 1px rgba(10,132,255,.3);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.portal-foot p { font-size:1rem; color: var(--label-2); max-width:46ch; }
.portal-actions { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }



/* 15. Demos ============================================================== */
.demos { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.demo {
    display:flex; flex-direction:column;
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--r-lg);
    background: var(--fill-2);
    box-shadow: inset 0 0 0 1px var(--hairline);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.demo:hover { background: var(--fill); --tilt-scale: 1.01; }
.demo:active { --tilt-scale: .995; }

/* --- Neigung der Kacheln: eine Regel für alle -------------------------
   Gleiche Bauart wie im Kundenportal (dort: .widget > .card, .tilt).
   Vorher trug jeder Kachel-Selektor seine eigene Fassung – .card hatte
   transform-style: preserve-3d, .demo und .facts li nicht, und nur .card
   kippte tatsächlich. Jetzt gibt es genau eine Quelle; eine neue Kachel
   wird hier eingetragen oder bekommt schlicht class="tilt".

   Aufgenommen ist jede Fläche mit Kachel-Optik (--fill + Haarlinien-
   Innenrand). Bewusst NICHT dabei:
   - .group – enthält die .tier-Zeilen der Preistabelle.
   - .tier – die Preis-Kacheln selbst; auf Wunsch ohne Bewegungseffekt.
   - .form – ein Formular, das sich beim Tippen neigt, ist Schikane.
   Der JS-Selektor TILT_AUSWAHL in script.js muss dieselbe Liste führen.
   -------------------------------------------------------------------- */
.card, .demo, .facts li, .panel, .glass, .plist, .sister,
.example-panel, .tilt {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --tilt-scale: 1;
    transform: perspective(1000px)
               rotateX(calc(var(--tilt-x) * var(--tilt-on)))
               rotateY(calc(var(--tilt-y) * var(--tilt-on)))
               scale(var(--tilt-scale));
    transform-style: preserve-3d;
    transition: background var(--t), transform .4s cubic-bezier(.22,.61,.36,1);
}

/* Klasse setzt script.js nur auf die Kachel unter Zeiger/Finger. Bewusst
   ohne Kachelliste davor: gleiche Spezifitaet wie oben, steht spaeter,
   gewinnt also – und muss beim Aufnehmen einer neuen Kachel nicht gepflegt
   werden. */
.is-tilting { transition: background var(--t), transform .08s linear; }

/* Muss hinter der Neigungsregel stehen: gleiche Spezifitaet, die
   Ladereihenfolge entscheidet. Am Handy steuert der Finger die Neigung
   (script.js, touchmove), deshalb hier kein Abschalten bei grobem Zeiger. */
@media (prefers-reduced-motion: reduce) {
    :root { --tilt-on: 0; }
    .demo:hover, .demo:active { --tilt-scale: 1; }
    .is-tilting { transition: background var(--t); }
}
.demo-key { font-size:.85rem; font-weight:600; color: var(--teal); margin-bottom:.85rem; }
.demo h3 { margin-bottom:.45rem; }
.demo p { font-size:1rem; color: var(--label-3); margin-bottom:1.5rem; }
.demo-go {
    margin-top:auto;
    display:inline-flex; align-items:center;
    font-size:.98rem; font-weight:500; color: var(--blue-hi);
}
.demo:hover .chev-r { transform: rotate(-45deg) translate(2px,-2px); }

.demo-overlay {
    position:fixed; inset:0; z-index:999; pointer-events:none;
    background:#000; opacity:0;
    transition: opacity .3s var(--ease-2);
}
.demo-overlay.active { pointer-events:all; opacity:1; }
.demo-overlay iframe { width:100%; height:100%; border:none; background:#fff; display:block; }
.demo-close {
    position:fixed; top:1rem; right:1rem; z-index:1001;
    display:none; align-items:center;
    font-size:.95rem; font-weight:500; color:#fff;
    background: rgba(30,30,32,.75);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
    padding:.6rem 1.25rem; border-radius: var(--pill); cursor:pointer;
    transition: background var(--t-fast), transform var(--t-fast);
}
.demo-close:hover { background: rgba(60,60,64,.85); }
.demo-close:active { transform: scale(.97); }
.demo-close.visible { display:flex; }

/* 16. Ablauf ============================================================= */
.steps { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1rem; }
.step-n {
    display:grid; place-content:center;
    width:34px; height:34px; margin-bottom:1.25rem;
    border-radius:50%;
    font-size:.95rem; font-weight:600; color: var(--blue-hi);
    background: var(--blue-soft);
}

/* 17. Persönliches & Kontakt ============================================= */

.form {
    padding: clamp(1.4rem, 4vw, 2.25rem);
    border-radius: var(--r-xl);
    background: var(--fill-2);
    box-shadow: inset 0 0 0 1px var(--hairline), var(--sh);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.field { margin-bottom:1.05rem; }
.field label { display:block; margin-bottom:.5rem; font-size:.92rem; font-weight:500; color: var(--label-2); }
.field .opt { color: var(--label-3); font-weight:400; }
.field input, .field textarea {
    display:block;
    width:100%; max-width:100%;
    padding:.9rem 1.05rem;
    font-family: var(--sans); font-size:1.02rem; letter-spacing:-.01em; line-height:1.4;
    color: var(--label);
    background: rgba(255,255,255,.05);
    border:none;
    border-radius: var(--r-sm);
    box-shadow: inset 0 0 0 1px var(--separator);
    outline:none;
    transition: box-shadow var(--t-fast), background var(--t-fast);
}
.field textarea { min-height:130px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--label-3); }
.field input:hover, .field textarea:hover { background: rgba(255,255,255,.07); }
.field input:focus, .field textarea:focus {
    background: rgba(255,255,255,.08);
    box-shadow: 0 0 0 3.5px rgba(10,132,255,.5);
}
.form-message { display:none; padding:.9rem 1.05rem; border-radius: var(--r-sm); margin-bottom:1.05rem; font-size:.98rem; }
.form-message.is-success { display:block; color:#d8ecff; background: rgba(10,132,255,.16); box-shadow: inset 0 0 0 1px rgba(10,132,255,.35); }
.form-message.is-error { display:block; color:#ffd9d2; background: rgba(255,69,58,.14); box-shadow: inset 0 0 0 1px rgba(255,69,58,.35); }
.form-hint { margin-top:1rem; font-size:.85rem; color: var(--label-3); text-align:center; }
.hp-field {
    position:absolute !important;
    left:-9999px !important; top:auto !important;
    width:1px !important; height:1px !important;
    overflow:hidden;
}

.contact-direct { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-top:1.5rem; }
.contact-direct a {
    font-size:.96rem; color: var(--label-2);
    padding:.55rem 1.15rem;
    border-radius: var(--pill);
    background: var(--fill-2);
    box-shadow: inset 0 0 0 1px var(--hairline);
    overflow-wrap:anywhere;
    transition: background var(--t-fast), color var(--t-fast);
}
.contact-direct a:hover { background: var(--fill); color: var(--label); }

/* 18. AppDesign-Streifen ================================================= */
.sister {
    text-align:center;
    padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--r-xl);
    background:
        radial-gradient(90% 140% at 50% 0%, rgba(10,132,255,.2) 0%, transparent 62%),
        var(--fill-2);
    box-shadow: inset 0 0 0 1px var(--hairline);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.sister .label { text-align:center; }
.sister h2 { font-size: clamp(1.45rem, 2.8vw, 2.1rem); margin-bottom:.9rem; }
.sister p { margin:0 auto 1.75rem; max-width:52ch; font-size:1.05rem; }

/* 19. Footer & Sticky-CTA ================================================ */
footer { padding: 3rem 0 3.5rem; box-shadow: 0 -1px 0 var(--hairline); }
.footer-wrapper { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
footer p, footer a { font-size:.88rem; color: var(--label-3); }
footer a:hover { color: var(--label); }
.footer-links { display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; }

.sticky-cta {
    display:none;
    position:fixed; left:0; bottom:0; width:100%; z-index:98;
    padding:.75rem 1.1rem calc(.75rem + env(safe-area-inset-bottom));
    background: rgba(0,0,0,.72);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    box-shadow: 0 -1px 0 var(--hairline);
    transition: transform var(--t);
}
.sticky-cta.hidden { transform: translateY(130%); }

/* 20. Legal-Seiten ======================================================= */
.legal-content { padding: calc(var(--nav-h) + 4rem) 0 5rem; }
.legal-content h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); margin-bottom:2rem; }
.legal-card { padding: clamp(1.4rem, 4vw, 2.75rem); }
.legal-card h2 { font-size:1.3rem; margin:2.5rem 0 .7rem; }
.legal-card h2:first-child { margin-top:0; }
.legal-card h3 { font-size:1.05rem; margin:1.6rem 0 .4rem; }
.legal-card p { font-size:1rem; margin-bottom:1rem; max-width:74ch; overflow-wrap:anywhere; }
.legal-card a[href^="http"], .legal-card a[href^="mailto"] { color: var(--blue-hi); }
.legal-card a[href^="http"]:hover { text-decoration:underline; }
.logo-mark { display:none; }

/* 21. Ohne JavaScript ====================================================
   Der Umschalter (Angebot/Bericht) ist eine reine Komfortfunktion. Fällt JS
   aus, wird alles untereinander gezeigt statt gar nichts.
   ======================================================================== */
html:not(.js) .seg { display:none; }
html:not(.js) .sw-frame { aspect-ratio:auto; }
html:not(.js) .sw-bar { position:static; }
html:not(.js) .sw-stage { position:static; }
html:not(.js) .sw-page { position:static; aspect-ratio:16/9; opacity:1 !important; visibility:visible !important; }
html:not(.js) .sw-url { opacity:1 !important; visibility:visible !important; }
html:not(.js) .sw-note { grid-area:auto; opacity:1 !important; visibility:visible !important; margin-bottom:1rem; }

/* 22. Responsive ========================================================= */
@media (max-width: 1000px) {
    .nav-links { display:none; }
    .menu-btn { display:block; }
    .tier-body { grid-template-columns:1fr; }
    .steps { grid-template-columns:1fr; }
    .demos { grid-template-columns:1fr; }
    .alt { grid-template-columns:1fr; }
    .prow { grid-template-columns:1fr; gap:.6rem; }
}

@media (max-width: 720px) {
    :root { --lens: 78px; --nav-h: 64px; --bar-h: 34px; }
    body { font-size:1rem; padding-bottom:78px; }


    .sw-frame { aspect-ratio:4/3; border-radius: var(--r); }
    .sw-note { grid-template-columns:1fr; }
    .new-menu { display:none; }
    .new-grid { grid-template-columns:1fr; }
    .portal-foot { flex-direction:column; align-items:flex-start; }
    .portal-actions .btn { }
    .sw-url { font-size:.66rem; }


    .hero-actions { flex-direction:column; align-items:stretch; gap:.9rem; }
    .hero-actions .btn { width:100%; }
    .hero-actions .link-arrow { justify-content:center; }
    .facts li { font-size:.86rem; padding:.45rem .95rem; }

    .seg { width:100%; }
    .seg button { flex:1 1 0; padding:.6rem .5rem; font-size:.9rem; }

    .group summary { gap:.85rem; padding:1.15rem; }
    .row-text b { font-size:1.02rem; }
    .row-text small { font-size:.88rem; }
    .row-body { padding:0 1.15rem 1.5rem; }

    .sticky-cta { display:block; }
    footer { padding: 2.5rem 0 2.25rem; }
    .footer-wrapper { flex-direction:column; justify-content:center; text-align:center; gap:1.1rem; }
    .footer-links {
        display:grid; grid-template-columns:1fr 1fr;
        gap:.7rem 1rem; justify-items:center; width:100%; max-width:19rem;
    }
    .footer-links a { padding:.15rem 0; }
    .contact-direct a { width:100%; text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
    .js .reveal { opacity:1 !important; transform:none !important; }
}

/* 23. AppDesign — Beispiele (Eingabe -> Ergebnis) =======================
   Gleiche Primitive (Karten, Blur, Blau-Akzent) wie der Rest der Seite,
   nur ein neues Layout für Zitat -> Ergebnis. Der Umschalter zwischen den
   Beispielen läuft über das bestehende .seg/[data-segment]-Muster.
   ========================================================================== */
.example + .example { margin-top:1.25rem; }
.example-set[data-mode="angebot"] [data-example="bericht"],
.example-set[data-mode="bericht"] [data-example="angebot"] { display:none; }

.example-flow { display:grid; grid-template-columns:1fr auto 1fr; gap:1.5rem; align-items:center; }
.example-panel {
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--r-lg);
    background: var(--fill-2);
    box-shadow: inset 0 0 0 1px var(--hairline);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.example-panel.is-output {
    background: linear-gradient(165deg, rgba(10,132,255,.18) 0%, rgba(10,132,255,.04) 60%, var(--fill-2) 100%);
    box-shadow: inset 0 0 0 1px rgba(10,132,255,.3);
}
.example-label {
    display:flex; align-items:center; gap:.5rem;
    font-family: var(--mono); font-size:.72rem; font-weight:500;
    letter-spacing:.08em; text-transform:uppercase;
    color: var(--blue-hi); margin-bottom:1rem;
}
.example-quote { font-size:1.04rem; line-height:1.5; color: var(--label); font-style:italic; max-width:none; }

.example-arrow {
    display:grid; place-content:center;
    width:38px; height:38px; border-radius:50%;
    background: var(--blue-soft);
}
.example-arrow .chev-r { color: var(--blue-hi); margin-left:0; }

.example-rows { display:grid; gap:.6rem; }
.example-rows > div {
    display:flex; justify-content:space-between; gap:1.25rem;
    font-size:.95rem; padding-bottom:.6rem;
    box-shadow: 0 1px 0 var(--hairline);
}
.example-rows > div:last-child { box-shadow:none; padding-bottom:0; }
.example-rows dt { color: var(--label-3); }
.example-rows dd { color: var(--label); font-weight:500; margin:0; text-align:right; }
.example-note {
    margin-top:1.1rem; padding-top:.9rem;
    box-shadow: inset 0 1px 0 var(--hairline);
    font-size:.88rem; color: var(--label-3);
}

html:not(.js) .example-set[data-mode] [data-example] { display:block; }

@media (max-width: 1000px) {
    .example-flow { grid-template-columns:1fr; }
    .example-arrow { transform: rotate(90deg); justify-self:center; }
}