/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   NF-R55 — Gemeinsame Grundlage der fünf Branchen-Landingpages (/websites/<branche>/).
   Eine wartbare Basis für alle fünf Seiten: NorthFrame-Tokens, Reset, Fonts, Navigation, Footer,
   Buttons und die Landingpage-Bausteine. Branchenspezifisch ist nur der Akzent (--akz), gesetzt
   über <html data-branche="…">. Asset-/Font-Pfade sind ABSOLUT (/assets, /fonts), damit die Datei
   aus jeder Verschachtelungstiefe funktioniert. Keine neue Library, kein GSAP.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/inter.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/cormorant-garamond.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/cormorant-garamond.woff2') format('woff2')}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-size:16px;line-height:1.65;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.1;color:var(--text-strong)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:4px}

/* ── Tokens (identisch zur Startseite) ─────────────────────────────────────────────────────────── */
:root,[data-theme="dark"]{
  --bg:#06090f;--bg-card:#0c1018;--bg-elevated:#111828;--surface-2:#0a0e1a;
  --text-strong:#f5f7fa;--text:#eef0f4;--text-soft:#8a95a8;--text-muted:#6b7588;--text-dim:#59627a;--text-faint:#3a4258;
  --gold:#a07840;--gold-light:#c49a56;--success:#4de07a;--danger:#f06060;
  --border:rgba(255,255,255,.065);
  --w-04:rgba(255,255,255,.04);--w-05:rgba(255,255,255,.05);--w-06:rgba(255,255,255,.06);--w-07:rgba(255,255,255,.07);
  --w-10:rgba(255,255,255,.1);--w-12:rgba(255,255,255,.12);--w-15:rgba(255,255,255,.15);--w-20:rgba(255,255,255,.2);
  --w-25:rgba(255,255,255,.25);--w-30:rgba(255,255,255,.3);--w-50:rgba(255,255,255,.5);--w-025:rgba(255,255,255,.025);
  --border-gold:rgba(160,120,64,.28);--gold-glow:rgba(160,120,64,.15);
  --gold-06:rgba(160,120,64,.06);--gold-08:rgba(160,120,64,.08);--gold-10:rgba(160,120,64,.1);--gold-12:rgba(160,120,64,.12);
  --gold-20:rgba(160,120,64,.2);--gold-25:rgba(160,120,64,.25);--gold-30:rgba(160,120,64,.3);--gold-35:rgba(160,120,64,.35);--gold-40:rgba(160,120,64,.4);
  --shadow-30:rgba(0,0,0,.3);--shadow-35:rgba(0,0,0,.35);--shadow-40:rgba(0,0,0,.4);--shadow-45:rgba(0,0,0,.45);
  --glass:rgba(8,12,20,.78);--glass-strong:rgba(8,12,20,.9);--panel:rgba(10,14,24,.97);--overlay-menu:rgba(6,9,15,.97);
  --hero-ov-1:rgba(6,9,15,.25);--hero-ov-3:rgba(6,9,15,.55);
  --on-gold:#fff;--r-lg:24px;--r-xl:32px;--r-pill:50px;
  --nav-legal:#7c879b;
}

/* ── Branchen-Akzente (nur eine Nuance je Seite, kein Rebrand) ──────────────────────────────────── */
/* Standard zuerst, danach die branchenspezifischen Überschreibungen (gleiche Spezifität → Reihenfolge zählt). */
:root{--akz:var(--gold);--akz-text:var(--gold)}
[data-branche="handwerk"]     {--akz:#c98a4e}
[data-branche="dienstleister"]{--akz:#5f8cb5}
[data-branche="gastronomie"]  {--akz:#c9634c}
[data-branche="praxen"]       {--akz:#4f9e8c}
[data-branche="einzelhandel"] {--akz:#9b70ae}
[data-branche]{--akz-text:var(--akz)}

/* ── Layout-Grundlagen ─────────────────────────────────────────────────────────────────────────── */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:100px 0}
.section-label{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--akz-text);margin-bottom:14px;display:block}
.section-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3.1rem);margin-bottom:16px;letter-spacing:-.01em}
.section-desc{color:var(--text-muted);font-size:17px;line-height:1.85;max-width:600px}
.btn-primary{background:var(--gold);color:var(--on-gold);font-size:15px;font-weight:600;padding:14px 28px;border-radius:50px;transition:all .25s;border:1px solid transparent;display:inline-block}
.btn-primary:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 8px 24px var(--gold-30)}
.btn-secondary{background:transparent;color:var(--text);font-size:15px;font-weight:500;padding:14px 28px;border-radius:50px;border:1px solid var(--border);transition:all .25s;display:inline-block}
.btn-secondary:hover{border-color:var(--w-20);background:var(--w-04);transform:translateY(-2px)}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}

/* ── Navigation (aus /websites/ übernommen) ────────────────────────────────────────────────────── */
.navbar{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:1000;width:calc(100% - 48px);max-width:1120px;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.navbar.hidden{transform:translateX(-50%) translateY(-120px)}
.nav-inner{background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:var(--r-pill);padding:10px 12px 10px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo img{height:30px;width:auto}
.nav-links{display:flex;gap:2px;align-items:center}
.nav-links a{color:var(--text-soft);font-size:14px;font-weight:500;padding:8px 14px;border-radius:24px;transition:all .2s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--text-strong);background:var(--w-07)}
.nav-links a.nav-zeile{position:relative;padding-left:18px;padding-right:18px}
.nav-zeile-sub{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:-5px;font-size:10.5px;font-weight:500;line-height:1.2;color:var(--nav-legal);white-space:nowrap;pointer-events:none}
@media(min-width:961px){.nav-inner{padding-bottom:16px}}
.nav-links .nav-sep{width:1px;height:15px;background:var(--w-10);margin:0 6px;align-self:center;flex:0 0 auto}
.nav-links a.nav-legal{font-size:12px;color:var(--nav-legal);padding:8px 9px}
.nav-links a.nav-legal:hover{color:var(--gold-light);background:transparent}
@media(max-width:1199px){.nav-links .nav-sep,.nav-links a.nav-legal{display:none}}
.nav-cta{background:var(--gold);color:var(--on-gold);font-size:13.5px;font-weight:600;padding:9px 20px;border-radius:24px;transition:all .2s;white-space:nowrap;border:1px solid transparent;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.nav-cta:hover{background:var(--gold-light);transform:translateY(-1px);box-shadow:0 4px 16px var(--gold-35)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:0;width:44px;height:44px;align-items:center;justify-content:center;border:none;background:transparent;border-radius:8px;transition:background .2s;flex-shrink:0}
.nav-hamburger:hover{background:var(--w-06)}
.nav-hamburger span{display:block;width:20px;height:1.5px;background:var(--text);border-radius:2px;transition:all .25s}
.nav-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:960px){.nav-links{display:none}.nav-cta{display:none}.nav-hamburger{display:flex}}
/* Mobile-Menü */
.mobile-menu{display:none;position:fixed;inset:0;background:var(--overlay-menu);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:80px 24px}
.mobile-menu.open{display:flex}
.mobile-menu a{color:var(--text-soft);font-size:1.25rem;font-weight:500;padding:14px 32px;border-radius:12px;transition:all .2s;text-align:center;width:100%;max-width:280px}
.mobile-menu a:hover{color:var(--text-strong);background:var(--w-07)}
.mobile-menu a .nav-zeile-sub{position:static;transform:none;display:block;margin:2px 0 0;font-size:12.5px}
.mobile-menu-cta{background:var(--gold) !important;color:var(--on-gold) !important;font-weight:600 !important;margin-top:12px}
.mobile-menu-cta:hover{background:var(--gold-light) !important}
.mobile-menu-legal{font-size:.95rem;color:var(--text-dim)}
.mobile-menu-legal:hover{color:var(--gold-light)}
.mobile-menu-close{position:absolute;top:24px;right:24px;background:var(--w-06);border:1px solid var(--border);cursor:pointer;color:var(--text);font-size:1rem;padding:10px 14px;border-radius:10px;transition:all .2s;font-family:'Inter',sans-serif}
.mobile-menu-close:hover{background:var(--w-10)}

/* ── Hero der Branchenseite ────────────────────────────────────────────────────────────────────── */
.lp-hero{position:relative;padding:150px 0 84px;overflow:hidden;border-bottom:1px solid var(--border)}
.lp-hero::before{content:'';position:absolute;top:-20%;right:-8%;width:60%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--akz) 22%, transparent), transparent 72%);opacity:.7;filter:blur(6px)}
.lp-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:56px;align-items:center}
.lp-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--akz-text);
  background:color-mix(in srgb,var(--akz) 12%, transparent);border:1px solid color-mix(in srgb,var(--akz) 34%, transparent);padding:7px 14px;border-radius:20px;margin-bottom:22px}
.lp-eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--akz)}
.lp-hero h1{font-size:clamp(2.2rem,3.9vw,3.5rem);letter-spacing:-.02em;line-height:1.06;margin-bottom:20px;max-width:16ch}
.lp-hero h1 em{font-style:italic;color:var(--akz-text);font-weight:600}
.lp-lead{font-size:18px;line-height:1.75;color:var(--text-soft);max-width:52ch;margin-bottom:30px}
.lp-hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.lp-hero-note{font-size:13px;color:var(--text-dim);margin-top:16px}

/* ── Website-Mockup (Hero + als kleine Vorschau in Section 6) ───────────────────────────────────── */
.nf-mock{border-radius:16px;overflow:hidden;border:1px solid var(--w-10);background:var(--bg-card);
  box-shadow:0 30px 70px -30px var(--shadow-45),0 0 0 1px color-mix(in srgb,var(--akz) 16%, transparent);}
.nf-mock-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.nf-dots{display:flex;gap:6px}
.nf-dots i{width:9px;height:9px;border-radius:50%;background:var(--w-15);display:block}
.nf-mock-url{margin-left:6px;flex:1;font-size:11.5px;color:var(--text-dim);background:var(--w-05);border-radius:20px;padding:5px 12px;letter-spacing:.02em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nf-mock-url b{color:var(--akz-text);font-weight:600}
.nf-mock-screen{position:relative;padding:20px 20px 24px;min-height:250px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--akz) 13%, var(--bg-card)),var(--bg-card) 78%)}
.nf-mock-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.nf-mock-brand{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--text-soft)}
.nf-mock-brand i{width:16px;height:16px;border-radius:5px;background:var(--akz);display:block;flex:0 0 auto}
.nf-mock-menu{display:flex;gap:12px}
.nf-mock-menu span{width:26px;height:5px;border-radius:3px;background:var(--w-10);display:block}
.nf-mock-h{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.55rem;line-height:1.12;color:var(--text-strong);margin-bottom:8px;max-width:15ch}
.nf-mock-sub{font-size:12px;color:var(--text-muted);line-height:1.5;max-width:34ch;margin-bottom:16px}
.nf-cta{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:#fff;background:var(--akz);padding:7px 14px;border-radius:20px;letter-spacing:.01em}
.nf-cta::after{content:'→';font-size:12px}
.nf-ghost{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;color:var(--akz-text);border:1px solid color-mix(in srgb,var(--akz) 40%, transparent);padding:6px 13px;border-radius:20px;margin-left:8px}
/* NF-R56 B: echtes Branchenbild als Hero-Bild der dargestellten Website. Es sitzt als
   prägender Bildbereich oben im Mockup (unter der Browserzeile); die Mock-Überschrift liegt
   mit dunklem Verlauf lesbar darauf. Das Bild ist dekorativer Teil des aria-hidden Mockups
   (alt="" an den <img>). */
.nf-shot{position:relative;border-radius:11px;overflow:hidden;margin:0 0 16px;aspect-ratio:16/9;
  background:var(--surface-2);border:1px solid var(--w-08);box-shadow:0 10px 26px -16px var(--shadow-45)}
.nf-shot img{width:100%;height:100%;object-fit:cover;display:block}
.nf-shot::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 30%,rgba(5,7,12,.16) 55%,rgba(5,7,12,.72) 100%)}
.nf-shot .nf-shot-h{position:absolute;left:14px;right:14px;bottom:11px;z-index:1;margin:0;
  font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.5rem;line-height:1.1;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.55);max-width:16ch}
.nf-shot .nf-shot-tag{position:absolute;left:14px;top:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:color-mix(in srgb,var(--akz) 82%, #05070c);padding:4px 9px;border-radius:20px;text-shadow:none}
/* Mockup-Primitive */
.nf-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.nf-tile{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--akz) 40%, var(--surface-2)),var(--surface-2));border:1px solid var(--border)}
.nf-tile--wide{grid-column:span 2;aspect-ratio:auto;min-height:64px}
/* NF-R57 B: echte Fotos in den Projekt-/Sortiment-Kacheln des Mockups (dekorativ, alt="") */
.nf-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nf-list{display:flex;flex-direction:column;gap:9px;margin-top:2px}
.nf-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nf-row .nf-rl{height:8px;border-radius:4px;background:var(--w-12);flex:1}
.nf-row .nf-rp{width:34px;height:8px;border-radius:4px;background:color-mix(in srgb,var(--akz) 55%, var(--w-12))}
.nf-steps{display:flex;gap:8px;margin-top:2px}
.nf-step{flex:1;display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:10px;border-radius:9px;background:var(--w-04);border:1px solid var(--border)}
.nf-step b{width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--akz) 24%, transparent);color:var(--akz-text);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif}
.nf-step span{height:6px;border-radius:3px;background:var(--w-10);width:100%}
.nf-step span+span{width:70%}
.nf-info{display:flex;gap:8px;margin-top:12px}
.nf-info div{flex:1;padding:9px 10px;border-radius:9px;background:var(--w-04);border:1px solid var(--border);font-size:10.5px;color:var(--text-muted);line-height:1.35}
.nf-info b{display:block;color:var(--text-soft);font-family:'Inter',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.nf-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:6px}
.nf-cal i{aspect-ratio:1;border-radius:4px;background:var(--w-06);display:block}
.nf-cal i.on{background:var(--akz);opacity:.85}

/* ── Inhaltsbausteine der Seite ────────────────────────────────────────────────────────────────── */
.lp-band{border-top:1px solid var(--border)}
.lp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.lp-problem{padding:24px 26px;border-radius:var(--r-lg);background:var(--bg-card);border:1px solid var(--border)}
.lp-problem h3{font-size:1.3rem;margin-bottom:10px}
.lp-problem p{color:var(--text-muted);font-size:15px;line-height:1.75}
.lp-problem .lp-tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;color:var(--danger)}
.lp-loesung .lp-tag{color:var(--akz-text)}
.lp-check{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:6px}
.lp-check li{position:relative;padding-left:32px;font-size:15px;line-height:1.55;color:var(--text)}
.lp-check li::before{content:'';position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;
  background:color-mix(in srgb,var(--akz) 18%, transparent);border:1px solid color-mix(in srgb,var(--akz) 42%, transparent)}
.lp-check li::after{content:'';position:absolute;left:7px;top:4px;width:5px;height:9px;
  border:solid var(--akz-text);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Funktions-Raster */
.lp-funktionen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.lp-fkarte{padding:26px 24px;border-radius:var(--r-lg);background:var(--bg-card);border:1px solid var(--border);transition:border-color .25s ease,transform .25s ease}
.lp-fkarte:hover{border-color:color-mix(in srgb,var(--akz) 40%, transparent);transform:translateY(-3px)}
.lp-fikon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  background:color-mix(in srgb,var(--akz) 14%, transparent);border:1px solid color-mix(in srgb,var(--akz) 30%, transparent)}
.lp-fikon svg{width:21px;height:21px;stroke:var(--akz-text);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lp-fkarte h3{font-size:1.24rem;margin-bottom:8px}
.lp-fkarte p{color:var(--text-muted);font-size:14.5px;line-height:1.7}

/* Prozess */
.lp-prozess{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;counter-reset:st}
.lp-schritt{position:relative;padding:26px 22px;border-radius:var(--r-lg);background:var(--surface-2);border:1px solid var(--border)}
.lp-schritt::before{counter-increment:st;content:'0' counter(st);font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--akz-text);display:block;margin-bottom:10px;line-height:1}
.lp-schritt h3{font-size:1.16rem;margin-bottom:8px}
.lp-schritt p{color:var(--text-muted);font-size:14px;line-height:1.65}

/* Demo-Verweis */
.lp-demo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;
  padding:34px;border-radius:var(--r-xl);background:var(--bg-card);border:1px solid var(--border);margin-top:8px}
.lp-demo-badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--akz-text);margin-bottom:14px}
.lp-demo-badge::before{content:'';width:8px;height:8px;border-radius:2px;background:var(--akz)}
.lp-demo h3{font-size:1.5rem;margin-bottom:10px}
.lp-demo p{color:var(--text-muted);font-size:15px;line-height:1.7;margin-bottom:18px}
.lp-demo-shot{border-radius:14px;overflow:hidden;border:1px solid var(--w-10);box-shadow:0 20px 44px -22px var(--shadow-45)}
.lp-demo-shot img{width:100%;height:auto;display:block}
.lp-demo--text{grid-template-columns:1fr;gap:18px}
.lp-demo-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}

/* FAQ (native <details>, keine JS-Abhängigkeit) */
.lp-faq{max-width:820px;margin-top:40px;border-top:1px solid var(--border)}
.lp-faq details{border-bottom:1px solid var(--border)}
.lp-faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-family:'Cormorant Garamond',serif;font-size:1.32rem;color:var(--text-strong);font-weight:600}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--akz-text);font-family:'Inter',sans-serif;transition:transform .25s ease}
.lp-faq details[open] summary::after{content:'–'}
.lp-faq details p{color:var(--text-muted);font-size:15.5px;line-height:1.8;padding:0 44px 24px 0;max-width:70ch}

/* Abschluss-CTA */
.lp-cta{position:relative;overflow:hidden;text-align:center;padding:70px 40px;border-radius:var(--r-xl);
  background:var(--bg-card);border:1px solid var(--border-gold)}
.lp-cta::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 140% at 50% -20%, color-mix(in srgb,var(--akz) 20%, transparent), transparent 60%)}
.lp-cta>*{position:relative}
.lp-cta h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:14px}
.lp-cta p{color:var(--text-soft);font-size:17px;line-height:1.7;max-width:56ch;margin:0 auto 28px}

/* Verwandte Branchen */
.lp-mehr{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.lp-mehr a{font-size:13.5px;color:var(--text-soft);border:1px solid var(--border);border-radius:20px;padding:8px 16px;transition:all .2s}
.lp-mehr a:hover{color:var(--akz-text);border-color:color-mix(in srgb,var(--akz) 40%, transparent);background:color-mix(in srgb,var(--akz) 8%, transparent)}

/* NF-R84 E: Footer-Stil steht in assets/css/footer.css (Stand der Startseite). */

/* ── Sanfte Einblendung (nur mit JS + erlaubter Bewegung; ohne beides voll sichtbar) ───────────── */
.js-anim .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.js-anim .reveal.in{opacity:1;transform:none}
/* NF-R105: beim Laden bereits ueberscrollte Elemente (Ankersprung, Zurueck) stehen ohne Uebergang da. */
.js-anim .reveal.ohne-uebergang,.js-anim .ohne-uebergang{transition:none!important}
@media (prefers-reduced-motion: reduce){.js-anim .reveal{opacity:1 !important;transform:none !important;transition:none}
  .nf-mock,.lp-fkarte,.btn-primary,.btn-secondary{transition:none}}

/* ── Responsive (Desktop-Fokus; darunter sauber gestapelt) ─────────────────────────────────────── */
@media(max-width:980px){
  .lp-hero-grid{grid-template-columns:1fr;gap:40px}
  .lp-split{grid-template-columns:1fr;gap:28px}
  .lp-funktionen{grid-template-columns:repeat(2,1fr)}
  .lp-prozess{grid-template-columns:repeat(2,1fr)}
  .lp-demo{grid-template-columns:1fr;gap:26px}
}
@media(max-width:768px){
  .section{padding:66px 0}
  .lp-hero{padding:120px 0 56px}
  .navbar{width:calc(100% - 32px);top:12px}.nav-inner{padding:8px 8px 8px 16px}.nav-logo img{height:26px}
}
@media(max-width:560px){
  .lp-funktionen,.lp-prozess{grid-template-columns:1fr}
  .container{padding:0 16px}
  .lp-cta{padding:52px 22px}
}