/* ════════ DSGVO-konforme lokale Webfonts ════════ */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/space-grotesk-v15-latin-300.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/space-grotesk-v15-latin-regular.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/space-grotesk-v15-latin-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/space-grotesk-v15-latin-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/inter-v13-latin-300.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/inter-v13-latin-regular.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/inter-v13-latin-500.woff2') format('woff2'); }

/* ════════ TOKENS ════════ */
:root {
  --bg:        #111730;
  --bg-alt:    #0d1226;
  --card:      #1a2342;
  --card2:     #212c55;
  --ink:       #f2f6fc;
  --steel:     #a7b8d2;
  --muted:     #7e94b4;
  --acc:       #38d9f0;
  --acc-dim:   #0e93b5;
  --acc2:      #8b7bff;
  --ok:        #4ade80;
  --warn:      #ffc107;
  --line:        rgba(122,168,255,0.12);
  --line-strong: rgba(56,217,240,0.4);
  --font-d: 'Space Grotesk', sans-serif;
  --font-b: 'Inter', sans-serif;
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:92px; }

/* ════════ A11y: Fokus & Skip-Link ════════ */
:focus { outline:none; }
:focus-visible { outline:2px solid var(--acc); outline-offset:3px; border-radius:4px; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline:2px solid var(--acc); outline-offset:3px; box-shadow:0 0 0 4px rgba(56,217,240,0.22);
}
.skip-link { position:absolute; left:-9999px; top:10px; z-index:4000; background:var(--acc); color:var(--bg); font-family:var(--font-d); font-size:13px; font-weight:600; padding:10px 20px; border-radius:8px; text-decoration:none; }
.skip-link:focus { left:12px; }

body { background:var(--bg); color:var(--ink); font-family:var(--font-b); font-size:16px; line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
::selection { background:rgba(56,217,240,0.35); color:#fff; }
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--bg-alt); }
::-webkit-scrollbar-thumb { background:#2c3a66; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--acc-dim); }

/* ════════ UTILS ════════ */
.container { max-width:1200px; margin:0 auto; padding:0 32px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.tag { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-d); font-size:10px; font-weight:400; letter-spacing:3.5px; text-transform:uppercase; color:var(--acc); border:1px solid var(--line-strong); padding:6px 15px; border-radius:100px; }
.tag::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--acc); animation:pulse 2.2s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.grad { background:linear-gradient(100deg, var(--acc), var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-d); font-size:14px; font-weight:600; letter-spacing:.2px; color:var(--bg); background:var(--acc); padding:15px 32px; border-radius:100px; text-decoration:none; border:none; cursor:pointer; transition:transform .2s, box-shadow .2s, background .2s; }
.btn:hover { background:#5ce8f5; transform:translateY(-2px); box-shadow:0 10px 34px rgba(56,217,240,0.32); }
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-d); font-size:14px; font-weight:400; color:var(--ink); padding:15px 32px; border-radius:100px; border:1px solid var(--line-strong); background:none; text-decoration:none; cursor:pointer; transition:all .2s; }
.btn-ghost:hover { border-color:var(--acc); color:var(--acc); transform:translateY(-2px); }

.section { padding:130px 0; position:relative; }
.sec-head { margin-bottom:64px; display:flex; flex-direction:column; gap:18px; max-width:720px; }
.sec-head.center { align-items:center; text-align:center; margin-left:auto; margin-right:auto; }
.sec-title { font-family:var(--font-d); font-size:clamp(34px,4.4vw,58px); font-weight:700; letter-spacing:-2.2px; line-height:1.04; color:var(--ink); }
.sec-sub { font-size:15.5px; color:var(--steel); line-height:1.8; max-width:560px; }
.divider { width:100%; height:1px; background:linear-gradient(90deg, transparent, var(--line-strong), transparent); }

/* ════════ NAV ════════ */
#nav { position:fixed; top:0; left:0; right:0; z-index:1000; padding:20px 0; transition:background .35s, padding .35s, border-color .35s; border-bottom:1px solid transparent; }
#nav.scrolled { background:rgba(13,18,38,0.9); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); padding:13px 0; border-bottom-color:var(--line); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; padding:0 32px; gap:24px; }
.nav-logo { display:flex; align-items:center; gap:13px; text-decoration:none; }
.logo-tile { position:relative; width:40px; height:40px; background:linear-gradient(145deg,#1e2a52,#131a36); border:1px solid var(--line-strong); border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.logo-tile::before { content:''; position:absolute; left:0; top:0; width:100%; height:9px; background:linear-gradient(to bottom, rgba(56,217,240,0.12), transparent); animation:scan 4s ease-in-out infinite; }
@keyframes scan { 0%{top:0;opacity:.8} 50%{top:28px;opacity:.2} 100%{top:0;opacity:.8} }
.pgrid { display:grid; grid-template-columns:repeat(3,5px); grid-template-rows:repeat(4,5px); gap:1.5px; }
.px { border-radius:1px; background:linear-gradient(135deg,var(--acc),var(--acc-dim)); box-shadow:0 0 3px rgba(56,217,240,.6); }
.px.off { background:transparent; box-shadow:none; }
.wordmark { font-family:var(--font-d); font-size:20px; font-weight:700; letter-spacing:-.5px; color:var(--ink); line-height:1; }
.wordmark .c { color:var(--acc); }
.nav-links { display:flex; align-items:center; gap:30px; list-style:none; }
.nav-links a { font-family:var(--font-d); font-size:13.5px; color:var(--steel); text-decoration:none; letter-spacing:.3px; transition:color .2s; }
.nav-links a:hover { color:var(--ink); }
.nav-cta { font-family:var(--font-d); font-size:13px; font-weight:600; color:var(--bg); background:var(--acc); padding:11px 24px; border-radius:100px; text-decoration:none; white-space:nowrap; transition:background .2s, transform .15s; }
.nav-cta:hover { background:#5ce8f5; transform:translateY(-1px); }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.hamburger span { display:block; width:23px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .3s; }
body.menu-open .hamburger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
body.menu-open .hamburger span:nth-child(2) { opacity:0; }
body.menu-open .hamburger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-panel { display:none; }
body.menu-open .mobile-panel { display:flex; flex-direction:column; gap:4px; position:fixed; top:64px; left:0; right:0; z-index:999; background:rgba(13,18,38,0.98); backdrop-filter:blur(18px); padding:20px 28px 28px; border-bottom:1px solid var(--line); }
.mobile-panel a { font-family:var(--font-d); font-size:17px; color:var(--ink); text-decoration:none; padding:13px 6px; border-bottom:1px solid var(--line); }
.mobile-panel a:last-child { border-bottom:none; margin-top:10px; text-align:center; background:var(--acc); color:var(--bg); border-radius:100px; font-weight:600; padding:14px; }

/* ════════ HERO ════════ */
#hero { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding:130px 0 90px; }
.aurora { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.aurora::before { content:''; position:absolute; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle, rgba(56,217,240,0.14), transparent 65%); top:-140px; right:-80px; filter:blur(60px); animation:drift1 16s ease-in-out infinite alternate; }
.aurora::after { content:''; position:absolute; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, rgba(139,123,255,0.12), transparent 65%); bottom:-160px; left:-100px; filter:blur(60px); animation:drift2 20s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform:translate(-70px, 60px) scale(1.12); } }
@keyframes drift2 { to { transform:translate(80px, -50px) scale(1.08); } }
.hero-grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(122,168,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(122,168,255,0.045) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 75% 75% at 50% 42%, black, transparent); -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 42%, black, transparent); pointer-events:none; }
.hero-wrap { position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:1.08fr 1fr; align-items:center; gap:64px; width:100%; }

.hero-badges { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:30px; }
.avail { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-d); font-size:11px; font-weight:500; letter-spacing:.5px; color:var(--ok); background:rgba(74,222,128,0.09); border:1px solid rgba(74,222,128,0.35); padding:6px 13px 6px 11px; border-radius:100px; }
.avail-dot { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); animation:pulse 2s ease-in-out infinite; }
.hero-h1 { font-family:var(--font-d); font-size:clamp(42px,5.6vw,76px); font-weight:700; line-height:1.02; letter-spacing:-2.8px; margin-bottom:26px; color:var(--ink); }
.hero-sub { font-size:16.5px; color:var(--steel); max-width:470px; margin-bottom:38px; line-height:1.8; }
.hero-ctas { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero-proof { display:flex; flex-direction:column; gap:11px; margin-top:40px; padding-top:30px; border-top:1px solid var(--line); max-width:460px; }
.proof-item { display:inline-flex; align-items:center; gap:11px; font-size:13.5px; color:var(--steel); line-height:1.4; }
.proof-item svg { color:var(--acc); flex-shrink:0; }

/* Hero rechte Seite: schwebendes Browser-Mockup */
.hero-visual { position:relative; display:flex; align-items:center; justify-content:center; }
.mockB { position:relative; width:100%; max-width:520px; border:1px solid var(--line-strong); border-radius:18px; background:var(--card); overflow:hidden; box-shadow:0 44px 110px rgba(0,0,0,0.5), 0 0 0 1px rgba(56,217,240,0.06); animation:floaty 7s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.mockB-bar { height:36px; display:flex; align-items:center; gap:7px; padding:0 14px; background:#151d3b; border-bottom:1px solid var(--line); }
.mdot { width:9px; height:9px; border-radius:50%; }
.mdot.r{background:#ff5f57} .mdot.y{background:#febc2e} .mdot.g{background:#28c840}
.mockB-url { flex:1; margin-left:10px; height:18px; display:flex; align-items:center; justify-content:center; border-radius:5px; background:rgba(122,168,255,0.07); font-family:var(--font-d); font-size:9.5px; letter-spacing:1px; color:var(--muted); }
.mockB-body { padding:22px; display:flex; flex-direction:column; gap:14px; background:linear-gradient(160deg,#19224200,#141c38), var(--card); }
.mrow { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mlogo { width:76px; height:11px; border-radius:4px; background:linear-gradient(90deg,var(--acc),var(--acc2)); opacity:.9; }
.mnav { display:flex; gap:7px; }
.mnav i { width:30px; height:7px; border-radius:3px; background:rgba(167,184,210,0.28); }
.mhero { display:grid; grid-template-columns:1.2fr 1fr; gap:14px; align-items:center; padding:8px 0 4px; }
.mh-line { height:15px; border-radius:5px; background:rgba(242,246,252,0.85); margin-bottom:8px; }
.mh-line.w70 { width:70%; }
.mh-line.thin { height:7px; background:rgba(167,184,210,0.3); margin-bottom:5px; }
.mh-line.thin.w80 { width:80%; }
.mh-btn { width:104px; height:26px; border-radius:100px; background:var(--acc); margin-top:10px; }
.mh-img { aspect-ratio:4/3; border-radius:10px; background:linear-gradient(135deg, rgba(56,217,240,0.35), rgba(139,123,255,0.3)); border:1px solid var(--line); }
.mcards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mcard { height:52px; border-radius:9px; background:rgba(122,168,255,0.06); border:1px solid var(--line); display:flex; flex-direction:column; gap:6px; padding:9px 10px; }
.mcard i { display:block; height:6px; border-radius:3px; background:rgba(167,184,210,0.3); }
.mcard i:first-child { width:55%; background:rgba(56,217,240,0.5); }
.chip { position:absolute; z-index:3; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-d); font-size:11px; font-weight:600; letter-spacing:.4px; padding:9px 15px; border-radius:100px; background:rgba(20,28,56,0.92); border:1px solid var(--line-strong); color:var(--ink); box-shadow:0 14px 40px rgba(0,0,0,0.4); backdrop-filter:blur(8px); }
.chip svg { flex-shrink:0; }
.chip.c1 { top:-16px; left:-14px; color:var(--ok); border-color:rgba(74,222,128,0.4); animation:floaty 6s ease-in-out .6s infinite; }
.chip.c2 { top:38%; right:-22px; color:var(--acc); animation:floaty 8s ease-in-out 1.2s infinite; }
.chip.c3 { bottom:-14px; left:12%; color:var(--acc2); border-color:rgba(139,123,255,0.4); animation:floaty 7s ease-in-out .3s infinite; }
.hero-scroll { position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); font-family:var(--font-d); font-size:10px; letter-spacing:3px; text-transform:uppercase; z-index:2; }
.hero-scroll i { width:1px; height:38px; background:linear-gradient(to bottom, var(--acc), transparent); animation:scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { 0%,100%{opacity:.5;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.15)} }

/* ════════ MARQUEE ════════ */
#marquee { overflow:hidden; border-block:1px solid var(--line); background:var(--bg-alt); padding:20px 0; }
.mq-track { display:flex; gap:56px; width:max-content; animation:mq 34s linear infinite; }
.mq-track span { display:inline-flex; align-items:center; gap:56px; font-family:var(--font-d); font-size:13px; letter-spacing:4px; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.mq-track b { color:var(--acc); font-weight:400; }
@keyframes mq { to { transform:translateX(-50%); } }

/* ════════ SERVICES (Bento) ════════ */
#services { background:var(--bg); }
.bento { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.svc { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 30px; position:relative; overflow:hidden; transition:border-color .3s, transform .3s, box-shadow .3s; }
.svc:hover { border-color:var(--line-strong); transform:translateY(-4px); box-shadow:0 24px 60px rgba(0,0,0,0.35); }
.svc::before { content:''; position:absolute; inset:0; background:radial-gradient(420px circle at 20% 0%, rgba(56,217,240,0.07), transparent 55%); opacity:0; transition:opacity .3s; pointer-events:none; }
.svc:hover::before { opacity:1; }
.svc:nth-child(1), .svc:nth-child(6) { grid-column:span 2; }
.svc-icon { width:46px; height:46px; border-radius:12px; background:rgba(56,217,240,0.08); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; margin-bottom:22px; color:var(--acc); }
.svc-name { font-family:var(--font-d); font-size:18px; font-weight:700; letter-spacing:-.3px; margin-bottom:10px; color:var(--ink); }
.svc-desc { font-size:14px; color:var(--steel); line-height:1.75; }
.svc-pills { margin-top:20px; display:flex; flex-wrap:wrap; gap:7px; }
.pill { font-family:var(--font-d); font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--acc); background:rgba(56,217,240,0.07); padding:4px 11px; border-radius:100px; border:1px solid rgba(56,217,240,0.16); }

/* ════════ SHOWCASE (Design-Beispiele) ════════ */
#showcase { background:var(--bg-alt); }
.demo-note { display:flex; align-items:flex-start; gap:13px; padding:16px 20px; background:rgba(255,193,7,0.06); border:1px dashed rgba(255,193,7,0.35); border-radius:var(--r-md); margin-bottom:56px; font-size:13.5px; color:var(--steel); line-height:1.65; max-width:860px; }
.demo-note svg { color:var(--warn); flex-shrink:0; margin-top:2px; }
.demo-note strong { color:var(--warn); font-weight:600; }
.cases { display:flex; flex-direction:column; gap:72px; }
.case { display:grid; grid-template-columns:1.15fr 1fr; gap:52px; align-items:center; }
.case:nth-child(even) .case-visual { order:2; }
.case-visual { position:relative; }
.case-frame { border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:0 34px 90px rgba(0,0,0,0.45); transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s; }
.case:hover .case-frame { transform:translateY(-8px) scale(1.012); box-shadow:0 48px 110px rgba(0,0,0,0.55), 0 0 0 1px var(--line-strong); }
.cf-bar { height:32px; display:flex; align-items:center; gap:6px; padding:0 13px; background:rgba(0,0,0,0.22); border-bottom:1px solid var(--pline); }
.p-light .cf-bar { background:rgba(255,255,255,0.55); }
.cf-bar .mdot { width:8px; height:8px; }
.cf-url { flex:1; margin-left:9px; height:16px; display:flex; align-items:center; justify-content:center; border-radius:4px; background:rgba(127,127,127,0.14); font-family:var(--font-d); font-size:8.5px; letter-spacing:1px; color:var(--pmut); }
.cf-body { background:var(--pbg); color:var(--pink); min-height:340px; display:flex; flex-direction:column; font-family:var(--font-b); }
.case-fictive { position:absolute; top:-13px; right:18px; z-index:3; font-family:var(--font-d); font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--warn); background:#1d1a10; border:1px dashed rgba(255,193,7,0.5); padding:6px 13px; border-radius:100px; }
.case-info .case-cat { font-family:var(--font-d); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--acc); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.case-info .case-cat::before { content:''; width:26px; height:1px; background:var(--acc); }
.case-title { font-family:var(--font-d); font-size:clamp(22px,2.4vw,30px); font-weight:700; letter-spacing:-1px; line-height:1.15; margin-bottom:16px; color:var(--ink); }
.case-desc { font-size:14.5px; color:var(--steel); line-height:1.8; margin-bottom:22px; }
.case-tags { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:20px; }
.ctag { font-family:var(--font-d); font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--steel); border:1px solid var(--line); padding:4px 10px; border-radius:5px; }
.case-meta { font-size:12.5px; color:var(--muted); font-family:var(--font-d); letter-spacing:.4px; }
.case-meta b { color:var(--steel); font-weight:500; }

/* Case-Paletten */
.p-holz   { --pbg:#f6efe4; --pink:#2c2115; --pacc:#b0793c; --pmut:rgba(44,33,21,0.55); --pline:rgba(44,33,21,0.12); }
.p-beauty { --pbg:#f7f2fb; --pink:#33254a; --pacc:#9d5ce8; --pmut:rgba(51,37,74,0.55); --pline:rgba(157,92,232,0.18); }
.p-gastro { --pbg:#1d0f06; --pink:#ffefdd; --pacc:#ff9633; --pmut:rgba(255,239,221,0.55); --pline:rgba(255,150,51,0.2); }
.p-tech   { --pbg:#0c1a24; --pink:#e8fbf7; --pacc:#2dd4bf; --pmut:rgba(232,251,247,0.5); --pline:rgba(45,212,191,0.18); }
.p-med    { --pbg:#f2f7fd; --pink:#122a4d; --pacc:#3b82f6; --pmut:rgba(18,42,77,0.55); --pline:rgba(59,130,246,0.16); }
.p-fit    { --pbg:#0d0d0d; --pink:#ffffff; --pacc:#b5e315; --pmut:rgba(255,255,255,0.5); --pline:rgba(181,227,21,0.22); }

/* Case-Innenleben (geteilte Bausteine) */
.cfn { height:38px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid var(--pline); }
.cfn-logo { font-family:var(--font-d); font-size:12.5px; font-weight:700; letter-spacing:-.2px; color:var(--pink); }
.cfn-logo b { color:var(--pacc); font-weight:700; }
.cfn-links { display:flex; gap:13px; font-family:var(--font-d); font-size:8px; letter-spacing:1.2px; text-transform:uppercase; color:var(--pmut); }
.cfh { padding:22px 20px 16px; display:flex; flex-direction:column; }
.cfh-eyebrow { font-family:var(--font-d); font-size:7.5px; font-weight:500; letter-spacing:2.6px; text-transform:uppercase; color:var(--pacc); margin-bottom:7px; }
.cfh-title { font-family:var(--font-d); font-size:24px; font-weight:700; line-height:1.05; letter-spacing:-.8px; color:var(--pink); margin-bottom:7px; }
.cfh-title i { font-style:normal; color:var(--pacc); }
.cfh-sub { font-size:10px; color:var(--pmut); line-height:1.5; margin-bottom:12px; max-width:270px; }
.cfh-cta { display:inline-flex; align-self:flex-start; font-family:var(--font-d); font-size:8.5px; font-weight:600; letter-spacing:.5px; background:var(--pacc); color:var(--pbg); padding:6px 14px; border-radius:100px; }
.cf-split { display:grid; grid-template-columns:1.15fr .85fr; gap:16px; align-items:center; padding:20px 20px 14px; flex:1; }
.cf-img { border-radius:9px; border:1px solid var(--pline); min-height:110px; }
.cf-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:0 20px 16px; }
.cf-tile { aspect-ratio:1.35/1; border-radius:6px; border:1px solid var(--pline); }
.cf-list { padding:4px 20px 16px; display:flex; flex-direction:column; }
.cf-li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; border-bottom:1px dashed var(--pline); font-size:10px; color:var(--pink); }
.cf-li:last-child { border-bottom:none; }
.cf-li small { display:block; font-size:7.5px; color:var(--pmut); margin-top:1px; }
.cf-price { font-family:var(--font-d); font-weight:700; color:var(--pacc); font-size:10.5px; flex-shrink:0; }
.cf-strip { display:flex; align-items:center; gap:12px; padding:9px 20px; border-top:1px solid var(--pline); font-family:var(--font-d); font-size:7.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--pmut); margin-top:auto; }
.cf-strip b { color:var(--pacc); font-weight:700; }
.cf-strip .sep { width:3px; height:3px; border-radius:50%; background:var(--pmut); opacity:.5; }
.cf-slots { padding:2px 20px 14px; }
.cf-slots-label { font-family:var(--font-d); font-size:7px; letter-spacing:1.6px; text-transform:uppercase; color:var(--pmut); margin-bottom:6px; }
.cf-slots-row { display:flex; gap:5px; }
.slot { flex:1; font-family:var(--font-d); font-size:9px; font-weight:600; color:var(--pink); background:rgba(59,130,246,0.07); border:1px solid var(--pline); border-radius:6px; padding:6px 4px; text-align:center; }
.slot.taken { opacity:.32; text-decoration:line-through; }
.slot.free { background:rgba(59,130,246,0.14); border-color:var(--pacc); color:var(--pacc); }
.cf-sched { padding:2px 20px 16px; display:flex; flex-direction:column; gap:5px; }
.sched-row { display:flex; justify-content:space-between; align-items:center; font-family:var(--font-d); font-size:9px; color:var(--pink); padding:6px 10px; background:rgba(181,227,21,0.05); border-left:2px solid var(--pacc); border-radius:4px; }
.sched-row b { font-weight:700; color:var(--pacc); width:38px; letter-spacing:.4px; }
.sched-row span { flex:1; padding:0 10px; font-weight:500; text-transform:uppercase; letter-spacing:.9px; font-size:8px; }
.sched-row small { font-size:7px; color:var(--pmut); letter-spacing:.5px; }
.cf-dash { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 20px 14px; }
.dash-card { border:1px solid var(--pline); border-radius:8px; padding:9px 11px; background:rgba(45,212,191,0.05); }
.dash-num { font-family:var(--font-d); font-size:15px; font-weight:700; color:var(--pacc); letter-spacing:-.5px; line-height:1.1; }
.dash-lab { font-family:var(--font-d); font-size:6.5px; letter-spacing:1.3px; text-transform:uppercase; color:var(--pmut); margin-top:3px; }
.cf-chart { display:flex; align-items:flex-end; gap:5px; height:52px; padding:0 20px 18px; }
.bar { flex:1; border-radius:3px 3px 0 0; background:linear-gradient(to top, rgba(45,212,191,0.25), rgba(45,212,191,0.75)); }

/* ════════ VERGLEICH ════════ */
#vergleich { background:var(--bg); }
.cmp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.cmp-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:36px 32px; display:flex; flex-direction:column; }
.cmp-card.featured { background:linear-gradient(170deg, var(--card2), var(--card)); border-color:var(--line-strong); box-shadow:0 26px 70px rgba(0,0,0,0.4), 0 0 0 1px rgba(56,217,240,0.08); position:relative; }
.cmp-card.featured::before { content:'Mein Ansatz'; position:absolute; top:-13px; left:28px; font-family:var(--font-d); font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--bg); background:var(--acc); padding:6px 14px; border-radius:100px; }
.cmp-name { font-family:var(--font-d); font-size:19px; font-weight:700; letter-spacing:-.4px; color:var(--ink); margin-bottom:6px; }
.cmp-note { font-size:12.5px; color:var(--muted); margin-bottom:22px; line-height:1.6; }
.cmp-list { list-style:none; display:flex; flex-direction:column; gap:12px; }
.cmp-list li { display:flex; align-items:flex-start; gap:11px; font-size:13.5px; color:var(--steel); line-height:1.55; }
.cmp-list li svg { flex-shrink:0; margin-top:3px; }
.cmp-list li.y svg { color:var(--ok); }
.cmp-list li.n svg { color:var(--muted); opacity:.7; }
.cmp-list li.n { color:var(--muted); }

/* ════════ PROZESS ════════ */
#process { background:var(--bg-alt); }
.proc-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.proc-grid::before { content:''; position:absolute; top:27px; left:6%; right:6%; height:1px; background:linear-gradient(90deg, transparent, var(--line-strong), var(--line-strong), transparent); }
.step { padding:0 14px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; }
.step-num { width:54px; height:54px; border-radius:50%; background:var(--bg); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:21px; font-weight:700; color:var(--ink); margin-bottom:22px; transition:all .3s; position:relative; z-index:1; }
.step:hover .step-num { background:var(--acc); color:var(--bg); border-color:var(--acc); box-shadow:0 0 26px rgba(56,217,240,0.4); }
.step-title { font-family:var(--font-d); font-size:14.5px; font-weight:700; margin-bottom:8px; color:var(--ink); }
.step-text { font-size:13px; color:var(--steel); line-height:1.65; }

/* ════════ ABOUT + STUDIO CARD ════════ */
#about { background:var(--bg); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.about-title { font-family:var(--font-d); font-size:clamp(30px,3.6vw,46px); font-weight:700; letter-spacing:-2px; line-height:1.08; margin-bottom:24px; color:var(--ink); }
.about-body { font-size:15px; color:var(--steel); line-height:1.85; margin-bottom:24px; }
.about-list { list-style:none; display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.about-list li { display:flex; align-items:flex-start; gap:12px; font-size:14px; color:var(--steel); line-height:1.6; }
.about-list li::before { content:''; flex-shrink:0; width:6px; height:6px; border-radius:50%; background:var(--acc); margin-top:8px; }
.studio { background:linear-gradient(168deg, var(--card2) 0%, var(--card) 60%); border:1px solid var(--line-strong); border-radius:var(--r-xl); padding:30px; position:relative; overflow:hidden; }
.studio::before { content:''; position:absolute; top:-45%; right:-45%; width:100%; height:100%; background:radial-gradient(circle, rgba(56,217,240,0.09), transparent 60%); pointer-events:none; }
.st-status { display:flex; align-items:center; gap:10px; margin-bottom:24px; position:relative; z-index:1; }
.st-status i { width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 12px var(--ok); animation:pulse 2s ease-in-out infinite; }
.st-status span { font-family:var(--font-d); font-size:11px; letter-spacing:2.4px; text-transform:uppercase; color:var(--ok); }
.st-id { display:flex; align-items:center; gap:15px; padding-bottom:22px; border-bottom:1px solid var(--line); position:relative; z-index:1; }
.st-name { font-family:var(--font-d); font-size:20px; font-weight:700; letter-spacing:-.5px; color:var(--ink); }
.st-name .c { color:var(--acc); }
.st-slogan { font-family:'Courier New',monospace; font-size:11px; color:var(--muted); margin-top:3px; }
.st-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:22px 0; border-bottom:1px solid var(--line); position:relative; z-index:1; }
.st-stat-num { font-family:var(--font-d); font-size:23px; font-weight:700; letter-spacing:-1px; color:var(--ink); line-height:1; margin-bottom:5px; }
.st-stat-num span { color:var(--acc); }
.st-stat-lab { font-family:var(--font-d); font-size:8.5px; letter-spacing:1.8px; text-transform:uppercase; color:var(--muted); }
.st-sec { font-family:var(--font-d); font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin:22px 0 13px; display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.st-sec::after { content:''; flex:1; height:1px; background:var(--line); }
.st-stack { display:flex; flex-wrap:wrap; gap:6px; position:relative; z-index:1; }
.st-pill { font-family:var(--font-d); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--acc); background:rgba(56,217,240,0.08); border:1px solid rgba(56,217,240,0.18); padding:5px 11px; border-radius:6px; }

/* DACH-Karte */
.map-wrap { margin:20px 0 4px; padding:20px 18px 16px; background:rgba(13,18,38,0.55); border:1px solid var(--line); border-radius:var(--r-md); position:relative; overflow:hidden; z-index:1; }
.map-wrap::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(56,217,240,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(56,217,240,0.04) 1px, transparent 1px); background-size:16px 16px; pointer-events:none; opacity:.55; }
.map-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; position:relative; z-index:2; }
.map-label { font-family:var(--font-d); font-size:10px; letter-spacing:2.4px; text-transform:uppercase; color:var(--muted); }
.map-count { font-family:var(--font-d); font-size:11px; font-weight:700; color:var(--acc); letter-spacing:.5px; }
.sc-map-svg { width:100%; height:auto; aspect-ratio:400/509; position:relative; z-index:1; display:block; overflow:visible; }
.sc-map-region { fill:rgba(56,217,240,0.06); stroke:rgba(56,217,240,0.42); stroke-width:.7; stroke-linejoin:round; stroke-linecap:round; transition:fill .3s; }
.sc-map-region:hover { fill:rgba(56,217,240,0.13); }
.sc-map-region.home { fill:rgba(56,217,240,0.09); stroke:rgba(56,217,240,0.55); }
.sc-map-region-label { font-family:var(--font-d); font-size:8px; font-weight:600; letter-spacing:2px; fill:rgba(255,255,255,0.32); text-transform:uppercase; pointer-events:none; }
.sc-map-connection { stroke:rgba(56,217,240,0.18); stroke-width:.4; stroke-dasharray:1.5 2.5; fill:none; pointer-events:none; }
.sc-map-pin-dot { fill:var(--acc); filter:drop-shadow(0 0 5px rgba(56,217,240,0.9)); }
.sc-map-pin-ring { fill:none; stroke:var(--acc); stroke-width:1; opacity:.5; transform-origin:center; transform-box:fill-box; animation:pinPulse 2.8s ease-out infinite; }
.sc-map-pin.home .sc-map-pin-dot { fill:#fff; filter:drop-shadow(0 0 6px rgba(56,217,240,1)); }
.sc-map-pin.home .sc-map-pin-ring { stroke:#fff; opacity:.7; }
@keyframes pinPulse { 0%{r:2.5;opacity:.65} 100%{r:11;opacity:0} }
.sc-map-city-label { font-family:var(--font-d); font-size:7.5px; font-weight:600; fill:#fff; letter-spacing:.3px; pointer-events:none; }
.sc-map-city-label.home { font-weight:700; font-size:8px; }

/* ════════ FAQ ════════ */
#faq { background:var(--bg-alt); }
.faq-list { max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:border-color .25s; }
.faq-item[open] { border-color:var(--line-strong); }
.faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; font-family:var(--font-d); font-size:15.5px; font-weight:500; color:var(--ink); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; font-size:22px; font-weight:300; color:var(--acc); flex-shrink:0; transition:transform .25s; line-height:1; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-body { padding:0 24px 22px; font-size:14px; color:var(--steel); line-height:1.8; }

/* ════════ KONTAKT ════════ */
#contact { background:var(--bg); position:relative; overflow:hidden; }
#contact::before { content:''; position:absolute; bottom:-220px; left:50%; transform:translateX(-50%); width:640px; height:640px; border-radius:50%; background:radial-gradient(circle, rgba(56,217,240,0.06), transparent 65%); pointer-events:none; }
.contact-grid { display:grid; grid-template-columns:1fr 1.35fr; gap:72px; align-items:start; }
.c-title { font-family:var(--font-d); font-size:clamp(30px,3.6vw,46px); font-weight:700; letter-spacing:-2px; line-height:1.1; margin-bottom:20px; color:var(--ink); }
.c-text { font-size:15px; color:var(--steel); line-height:1.8; margin-bottom:38px; }
.c-facts { display:flex; flex-direction:column; gap:22px; }
.c-fact { display:flex; align-items:flex-start; gap:16px; }
.c-fact-icon { width:42px; height:42px; border-radius:11px; background:rgba(56,217,240,0.08); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--acc); flex-shrink:0; }
.c-fact-label { font-family:var(--font-d); font-size:10px; letter-spacing:2.4px; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.c-fact-value { font-size:14.5px; color:var(--ink); font-weight:500; }
.c-socials { margin-top:34px; padding-top:26px; border-top:1px solid var(--line); }
.c-socials-label { font-family:var(--font-d); font-size:10px; letter-spacing:2.4px; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.c-social { display:inline-flex; align-items:center; gap:11px; padding:10px 17px; border-radius:100px; background:rgba(56,217,240,0.06); border:1px solid rgba(56,217,240,0.2); color:var(--acc); text-decoration:none; font-size:14px; font-weight:500; transition:all .25s; margin:0 8px 8px 0; }
.c-social:hover { background:rgba(56,217,240,0.16); border-color:rgba(56,217,240,0.55); color:var(--ink); transform:translateX(3px); }
.form { background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); padding:40px; display:flex; flex-direction:column; gap:20px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fgroup { display:flex; flex-direction:column; gap:8px; }
.flabel { font-family:var(--font-d); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.finput, .ftextarea, .fselect { background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink); font-family:var(--font-b); font-size:14px; padding:13px 16px; outline:none; transition:border-color .2s, box-shadow .2s; width:100%; }
.finput:focus, .ftextarea:focus, .fselect:focus { border-color:var(--acc); box-shadow:0 0 0 3px rgba(56,217,240,0.1); }
.finput::placeholder, .ftextarea::placeholder { color:var(--muted); opacity:.7; }
.ftextarea { resize:vertical; min-height:110px; }
.fselect { appearance:none; cursor:pointer; }
.fselect option { background:var(--card); }
.consent { display:flex; align-items:flex-start; gap:11px; cursor:pointer; padding:4px 0; }
.consent input[type="checkbox"] { flex-shrink:0; width:17px; height:17px; margin-top:2px; accent-color:var(--acc); cursor:pointer; }
.consent-text { font-size:12.5px; color:var(--steel); line-height:1.6; }
.consent-text a { color:var(--acc); text-decoration:none; }
.consent-text a:hover { text-decoration:underline; }
.fsubmit { font-family:var(--font-d); font-size:14.5px; font-weight:600; letter-spacing:.3px; color:var(--bg); background:var(--acc); border:none; cursor:pointer; padding:16px 32px; border-radius:100px; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; }
.fsubmit:hover { background:#5ce8f5; transform:translateY(-2px); box-shadow:0 10px 32px rgba(56,217,240,0.3); }
.fsubmit:disabled { opacity:.6; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
.fsuccess { display:none; text-align:center; padding:48px 32px; background:var(--card); border:1px solid var(--line-strong); border-radius:var(--r-xl); }
.fsuccess.show { display:flex; flex-direction:column; align-items:center; gap:16px; }
.fsuccess-icon { width:64px; height:64px; border-radius:50%; background:rgba(74,222,128,0.1); border:2px solid var(--ok); display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--ok); }
.fsuccess-title { font-family:var(--font-d); font-size:22px; font-weight:700; color:var(--ink); }
.fsuccess-text { font-size:14px; color:var(--steel); max-width:380px; }

/* ════════ FOOTER ════════ */
footer { background:var(--bg-alt); border-top:1px solid var(--line); padding:64px 0 40px; }
.f-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.f-tagline { font-size:13px; color:var(--steel); line-height:1.7; max-width:280px; margin:16px 0 20px; }
.f-social { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:rgba(56,217,240,0.06); border:1px solid rgba(56,217,240,0.18); color:var(--acc); text-decoration:none; transition:all .25s; margin-right:9px; }
.f-social:hover { background:rgba(56,217,240,0.16); color:var(--ink); transform:translateY(-2px); }
.f-col-title { font-family:var(--font-d); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.f-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.f-links a { font-size:14px; color:var(--steel); text-decoration:none; transition:color .2s; }
.f-links a:hover { color:var(--acc); }
.f-bottom { border-top:1px solid var(--line); padding-top:26px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.f-copy { font-size:12.5px; color:var(--muted); }
.f-legal { display:flex; gap:20px; }
.f-legal a { font-size:12.5px; color:var(--muted); text-decoration:none; transition:color .2s; }
.f-legal a:hover { color:var(--steel); }
.f-built { font-family:var(--font-d); font-size:10px; letter-spacing:2.4px; text-transform:uppercase; color:var(--muted); margin-top:14px; }

/* ════════ COOKIE BANNER ════════ */
#cookie-banner { position:fixed; bottom:20px; right:20px; width:min(370px, calc(100% - 40px)); background:var(--card); border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:19px 20px; z-index:1500; display:flex; flex-direction:column; gap:14px; animation:cookieIn .5s cubic-bezier(.22,1,.36,1) 1.4s both; box-shadow:0 22px 64px rgba(0,0,0,0.55); }
@keyframes cookieIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
#cookie-banner.hidden { display:none; }
.cookie-text { font-size:12.5px; color:var(--steel); line-height:1.6; }
.cookie-text a { color:var(--acc); text-decoration:none; }
.cookie-text a:hover { text-decoration:underline; }
.cookie-btns { display:flex; gap:8px; }
.cookie-accept { font-family:var(--font-d); font-size:12px; font-weight:600; letter-spacing:.5px; color:var(--bg); background:var(--acc); border:none; cursor:pointer; padding:10px 18px; border-radius:100px; transition:background .2s; flex:1; }
.cookie-accept:hover { background:#5ce8f5; }
.cookie-decline { font-family:var(--font-d); font-size:12px; color:var(--steel); background:none; border:1px solid var(--line); cursor:pointer; padding:10px 18px; border-radius:100px; transition:all .2s; flex:1; }
.cookie-decline:hover { border-color:var(--steel); color:var(--ink); }

/* ════════ LEGAL MODALS ════════ */
.modal-overlay { position:fixed; inset:0; z-index:2000; background:rgba(13,18,38,0.92); backdrop-filter:blur(12px); display:none; align-items:center; justify-content:center; padding:24px; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--card); border:1px solid var(--line-strong); border-radius:var(--r-xl); max-width:820px; width:100%; max-height:88vh; overflow-y:auto; position:relative; animation:modalIn .35s cubic-bezier(.22,1,.36,1); }
@keyframes modalIn { from{opacity:0;transform:scale(.94) translateY(18px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal-close { position:sticky; top:16px; margin-left:auto; margin-right:16px; width:38px; height:38px; border-radius:50%; background:rgba(56,217,240,0.1); border:1px solid var(--line-strong); color:var(--acc); cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; z-index:2; transition:background .2s; }
.modal-close:hover { background:rgba(56,217,240,0.22); }
.modal-body { padding:8px 48px 44px; }
.modal-body h2 { font-family:var(--font-d); font-size:30px; font-weight:700; letter-spacing:-1.4px; line-height:1.12; color:var(--ink); margin-bottom:8px; }
.modal-body h2 .c { color:var(--acc); }
.legal-meta { font-family:var(--font-d); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:28px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.modal-body h3 { font-family:var(--font-d); font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--acc); margin:28px 0 12px; }
.modal-body h3:first-of-type { margin-top:0; }
.modal-body p { font-size:14px; color:var(--steel); line-height:1.75; margin-bottom:12px; }
.modal-body p strong { color:var(--ink); font-weight:500; }
.modal-body a { color:var(--acc); text-decoration:none; }
.modal-body a:hover { text-decoration:underline; }
.modal-body ul { list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:6px; }
.modal-body ul li { font-size:14px; color:var(--steel); line-height:1.7; padding-left:16px; position:relative; }
.modal-body ul li::before { content:''; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background:var(--acc); }
.legal-placeholder { display:block; background:rgba(255,193,7,0.08); border:1px dashed rgba(255,193,7,0.35); border-radius:var(--r-sm); padding:12px 14px; font-size:13px; color:var(--warn); margin:8px 0 14px; font-family:var(--font-d); }
.legal-placeholder::before { content:'⚠ Platzhalter — '; font-weight:700; }
.legal-stand { margin-top:32px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); font-family:var(--font-d); letter-spacing:.5px; }
.cookie-reset-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.cookie-reset-btn { font-family:var(--font-d); font-size:12px; font-weight:600; letter-spacing:.5px; padding:10px 18px; border-radius:100px; cursor:pointer; border:1px solid var(--line-strong); background:rgba(56,217,240,0.07); color:var(--acc); transition:all .2s; }
.cookie-reset-btn:hover { background:rgba(56,217,240,0.16); }
.cookie-reset-btn.plain { background:none; color:var(--steel); border-color:var(--line); }
.cookie-reset-btn.plain:hover { color:var(--ink); border-color:var(--steel); }

/* ════════ SCROLL REVEAL (ohne JS: alles sichtbar) ════════ */
.js .reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.visible { opacity:1; transform:translateY(0); }

/* ════════ RESPONSIVE ════════ */
@media (max-width:1024px) {
  .hero-wrap { grid-template-columns:1fr; gap:46px; }
  /* Mockup mobil kompakt zeigen statt verstecken — der Desktop-Blickfang bleibt */
  .hero-visual { order:2; }
  .mockB { max-width:420px; }
  .chip.c1 { left:-4px; }
  .chip.c2 { right:-6px; }
  .chip.c3 { left:8%; }
  .bento { grid-template-columns:repeat(2,1fr); }
  .case, .case:nth-child(even) { grid-template-columns:1fr; gap:28px; }
  .case:nth-child(even) .case-visual { order:0; }
  .cmp-grid { grid-template-columns:1fr; max-width:560px; margin:0 auto; }
  .proc-grid { grid-template-columns:repeat(3,1fr); row-gap:40px; }
  .proc-grid::before { display:none; }
  .about-grid { grid-template-columns:1fr; gap:52px; }
  .contact-grid { grid-template-columns:1fr; gap:52px; }
  .f-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .nav-links, .nav-cta { display:none; }
  .hamburger { display:flex; }
  /* Mobil kompakter: Desktop-Abstaende machen die Seite am Handy zaeh */
  .section { padding:68px 0; }
  #hero { padding:104px 0 60px; }
  .sec-head { margin-bottom:40px; gap:14px; }
  .sec-title { font-size:clamp(36px,9.2vw,44px); }
  .hero-h1 { letter-spacing:-1.8px; }
  .hero-sub { margin-bottom:30px; }
  .hero-ctas { flex-direction:column; align-items:stretch; }
  .hero-ctas .btn, .hero-ctas .btn-ghost { width:100%; }
  .hero-proof { margin-top:30px; padding-top:22px; }
  .hero-scroll { display:none; }
  .chip { font-size:10px; padding:7px 12px; }
  .bento { grid-template-columns:1fr; gap:14px; }
  .svc { padding:26px 22px; }
  .svc:nth-child(1), .svc:nth-child(6) { grid-column:span 1; }
  .proc-grid { grid-template-columns:repeat(2,1fr); }
  .form { padding:28px 20px; }
  .form-row { grid-template-columns:1fr; }
  .f-grid { grid-template-columns:1fr; gap:28px; margin-bottom:36px; }
  footer { padding:48px 0 32px; }
  .modal-body { padding:8px 24px 36px; }
  #cookie-banner { right:12px; left:12px; bottom:12px; width:auto; }
  .demo-note { margin-bottom:36px; }
  .cases { gap:44px; }
  .case, .case:nth-child(even) { gap:20px; }
  .case-title { font-size:22px; }
  .case-desc { font-size:13.5px; margin-bottom:16px; }
  .cmp-card { padding:28px 24px; }
  .studio { padding:24px 20px; }
  .cf-body { min-height:290px; }
}
@media (max-width:480px) {
  .container { padding:0 20px; }
  .nav-inner { padding:0 20px; }
  .hero-wrap { padding:0 20px; }
  .cfn-links { display:none; }
  .proc-grid { grid-template-columns:1fr; }
  .step { flex-direction:row; text-align:left; gap:18px; align-items:flex-start; }
  .step-num { margin-bottom:0; flex-shrink:0; width:46px; height:46px; font-size:18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .js .reveal { opacity:1; transform:none; }
  .mq-track { animation:none !important; }
}

/* ════════ UTILITY- & KOMPONENTEN-KLASSEN (ersetzen frühere Inline-Styles) ════════ */
.mh-line.mh-gap { margin-top:10px; }
.italic { font-style:italic; }
.mt4 { margin-top:4px; }
.cfh-center { text-align:center; align-items:center; }
.logo-bold { font-weight:900; letter-spacing:1px; }
.title-upper { text-transform:uppercase; letter-spacing:-1.2px; }
.tag.tag-mb { margin-bottom:24px; display:inline-flex; }
.reveal.d15 { transition-delay:.15s; }
.logo-tile.logo-lg { width:54px; height:54px; border-radius:13px; }
.logo-tile.logo-sm { width:36px; height:36px; }
.pgrid.pgrid-lg { grid-template-columns:repeat(3,7px); grid-template-rows:repeat(4,7px); gap:2px; }
.wordmark.wm-18 { font-size:18px; }
.hp { display:none; }
/* Showcase-Demo — dekorative Flächen */
.cf-img.wood { background:linear-gradient(135deg,#8a5a2e,#4a2d14 65%), repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 9px); background-blend-mode:overlay; }
.cf-tile.wood-1 { background:linear-gradient(135deg,#a06c38,#5c3a1c); }
.cf-tile.wood-2 { background:linear-gradient(135deg,#7a4a26,#3a2412); }
.cf-tile.wood-3 { background:linear-gradient(135deg,#b0793c,#6b4523); }
.cf-tile.beauty-1 { background:linear-gradient(135deg,#e9d5ff,#c4a3ed); aspect-ratio:1/1; }
.cf-tile.beauty-2 { background:linear-gradient(135deg,#f3e8ff,#d8b4fe); aspect-ratio:1/1; }
.cf-tile.beauty-3 { background:linear-gradient(135deg,#fce7f3,#f0abfc); aspect-ratio:1/1; }
/* Balkendiagramm-Höhen (IT-Demo) */
.cf-chart .bar:nth-child(1){height:38%} .cf-chart .bar:nth-child(2){height:55%}
.cf-chart .bar:nth-child(3){height:44%} .cf-chart .bar:nth-child(4){height:70%}
.cf-chart .bar:nth-child(5){height:62%} .cf-chart .bar:nth-child(6){height:88%}
.cf-chart .bar:nth-child(7){height:76%} .cf-chart .bar:nth-child(8){height:100%}
/* Link-artige Aktions-Buttons (Legal-Modals) */
.linklike { background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.linklike:hover { color:var(--ink); }
.f-logo-img { width:36px; height:36px; border-radius:9px; display:block; }

/* ════════════════════════════════════════════════════════════
   UNTERSEITEN — Breadcrumb, Seiten-Hero, Fließtext, Karten, CTA
   Wird von build.js an das Basis-CSS angehängt.
   ════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ── */
.breadcrumb { padding:104px 0 0; font-family:var(--font-d); font-size:12.5px; color:var(--muted); }
.breadcrumb .container { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.breadcrumb a { color:var(--steel); text-decoration:none; transition:color .2s; }
.breadcrumb a:hover { color:var(--acc); }
.breadcrumb .bc-sep { color:var(--muted); opacity:.55; }
.breadcrumb [aria-current="page"] { color:var(--acc); }

/* ── Seiten-Hero ── */
.pg-hero { position:relative; padding:52px 0 60px; overflow:hidden; }
.pg-hero .aurora { opacity:.8; }
.pg-hero-inner { position:relative; z-index:2; max-width:820px; display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.pg-h1 { font-family:var(--font-d); font-size:clamp(34px,4.8vw,60px); font-weight:700; line-height:1.04; letter-spacing:-2.2px; color:var(--ink); }
.pg-h1 .grad { background:linear-gradient(100deg, var(--acc), var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pg-lead { font-size:17px; color:var(--steel); line-height:1.8; max-width:680px; }
.pg-hero .hero-ctas { margin-top:8px; }

/* ── Abschnitte auf Unterseiten etwas kompakter als auf der Startseite ── */
.sec-tight { padding:76px 0; }
.sec-alt { background:var(--bg-alt); border-block:1px solid var(--line); }
.sec-title-sm { font-size:clamp(26px,3vw,38px); letter-spacing:-1.4px; }

/* ── Fließtext / Ratgeber-Inhalte ── */
/* min-width:0 ist nötig, damit ein breites Kind (z. B. eine Tabelle) die
   Rasterspalte nicht auseinanderdrückt — sonst läuft die Seite seitlich über. */
.prose { max-width:760px; min-width:0; }
.split > * { min-width:0; }
.pg-h1, .sec-title, .prose h2, .prose h3, .cta-title, .lcard-t { overflow-wrap:break-word; }
.prose.wide { max-width:920px; }
.prose h2 { font-family:var(--font-d); font-size:clamp(24px,2.8vw,34px); font-weight:700; letter-spacing:-1.2px; line-height:1.15; color:var(--ink); margin:52px 0 16px; }
.prose h2:first-child { margin-top:0; }
.prose h3 { font-family:var(--font-d); font-size:19px; font-weight:700; letter-spacing:-.4px; color:var(--ink); margin:34px 0 12px; }
.prose h4 { font-family:var(--font-d); font-size:15px; font-weight:700; letter-spacing:.2px; color:var(--acc); margin:26px 0 10px; }
.prose p { font-size:15.5px; color:var(--steel); line-height:1.85; margin-bottom:18px; }
.prose p strong, .prose li strong { color:var(--ink); font-weight:600; }
.prose a { color:var(--acc); text-decoration:none; border-bottom:1px solid rgba(56,217,240,0.35); transition:border-color .2s, color .2s; }
.prose a:hover { color:#5ce8f5; border-bottom-color:var(--acc); }
.prose ul, .prose ol { margin:0 0 22px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.prose ul li { position:relative; padding-left:26px; font-size:15px; color:var(--steel); line-height:1.75; }
.prose ul li::before { content:''; position:absolute; left:6px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--acc); }
.prose ol { counter-reset:pnum; }
.prose ol li { position:relative; padding-left:38px; font-size:15px; color:var(--steel); line-height:1.75; counter-increment:pnum; }
.prose ol li::before { content:counter(pnum); position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:50%; background:rgba(56,217,240,0.1); border:1px solid var(--line-strong); color:var(--acc); font-family:var(--font-d); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.prose blockquote { margin:26px 0; padding:20px 24px; border-left:2px solid var(--acc); background:rgba(56,217,240,0.05); border-radius:0 var(--r-md) var(--r-md) 0; font-size:15px; color:var(--ink); line-height:1.8; }
.prose .lead { font-size:17px; color:var(--ink); line-height:1.8; margin-bottom:26px; }

/* Info-/Warn-Kasten im Text */
.note { display:flex; gap:14px; padding:18px 22px; border-radius:var(--r-md); font-size:14.5px; line-height:1.75; margin:26px 0; }
.note-info { background:rgba(56,217,240,0.06); border:1px solid rgba(56,217,240,0.22); color:var(--steel); }
.note-warn { background:rgba(255,193,7,0.06); border:1px dashed rgba(255,193,7,0.35); color:var(--steel); }
.note strong { color:var(--ink); }
.note-warn strong { color:var(--warn); }

/* ── Zwei-Spalten-Layout Text + Seitenspalte ── */
.split { display:grid; grid-template-columns:1.6fr 1fr; gap:56px; align-items:start; }
.aside-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px; position:sticky; top:104px; }
.aside-card h3 { font-family:var(--font-d); font-size:15px; font-weight:700; color:var(--ink); margin-bottom:14px; }
.aside-card ul { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.aside-card li { font-size:13.5px; color:var(--steel); line-height:1.6; padding-left:20px; position:relative; }
.aside-card li::before { content:''; position:absolute; left:2px; top:8px; width:5px; height:5px; border-radius:50%; background:var(--acc); }
.aside-card .btn { width:100%; }

/* ── Vorteils-/Feature-Grid ── */
.fgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.fgrid.two { grid-template-columns:repeat(2,1fr); }
.fcard { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px; transition:border-color .3s, transform .3s; }
.fcard:hover { border-color:var(--line-strong); transform:translateY(-3px); }
.fcard-n { font-family:var(--font-d); font-size:11px; letter-spacing:2.4px; text-transform:uppercase; color:var(--acc); margin-bottom:12px; display:block; }
.fcard h3 { font-family:var(--font-d); font-size:17px; font-weight:700; letter-spacing:-.3px; color:var(--ink); margin-bottom:10px; }
.fcard p { font-size:14px; color:var(--steel); line-height:1.75; }

/* ── Preis-Tabelle / Pakete ── */
.ptiers { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.ptier { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 28px; display:flex; flex-direction:column; }
.ptier.hot { background:linear-gradient(170deg, var(--card2), var(--card)); border-color:var(--line-strong); box-shadow:0 26px 70px rgba(0,0,0,0.4); position:relative; }
.ptier.hot::before { content:'Der übliche Umfang'; position:absolute; top:-13px; left:24px; font-family:var(--font-d); font-size:10px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:var(--bg); background:var(--acc); padding:6px 14px; border-radius:100px; }
.ptier-name { font-family:var(--font-d); font-size:19px; font-weight:700; letter-spacing:-.4px; color:var(--ink); margin-bottom:6px; }
.ptier-for { font-size:12.5px; color:var(--muted); line-height:1.6; margin-bottom:20px; }
.ptier-price { font-family:var(--font-d); font-size:34px; font-weight:700; letter-spacing:-1.6px; color:var(--ink); line-height:1; }
.ptier-price small { display:block; font-size:11.5px; font-weight:400; letter-spacing:.4px; color:var(--muted); margin-top:7px; font-family:var(--font-b); }
.ptier-list { list-style:none; display:flex; flex-direction:column; gap:11px; margin:24px 0; flex:1; }
.ptier-list li { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--steel); line-height:1.6; }
.ptier-list li::before { content:'✓'; color:var(--ok); font-weight:700; flex-shrink:0; }
.ptier .btn, .ptier .btn-ghost { width:100%; }

/* Vergleichstabelle */
.tbl-wrap { overflow-x:auto; margin:28px 0; border:1px solid var(--line); border-radius:var(--r-md); }
table.tbl { width:100%; border-collapse:collapse; font-size:14px; min-width:520px; }
table.tbl th, table.tbl td { padding:14px 18px; text-align:left; border-bottom:1px solid var(--line); color:var(--steel); line-height:1.6; }
table.tbl th { font-family:var(--font-d); font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--acc); background:rgba(56,217,240,0.04); }
table.tbl tr:last-child td { border-bottom:none; }
table.tbl td strong { color:var(--ink); font-weight:600; }

/* ── Link-Karten (interne Verlinkung) ── */
.lcards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.lcard { display:flex; flex-direction:column; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:22px 24px; text-decoration:none; transition:border-color .25s, transform .25s, background .25s; }
.lcard:hover { border-color:var(--line-strong); transform:translateY(-3px); background:var(--card2); }
.lcard-t { font-family:var(--font-d); font-size:15.5px; font-weight:700; color:var(--ink); letter-spacing:-.3px; }
.lcard-d { font-size:13px; color:var(--steel); line-height:1.65; }
.lcard-go { font-family:var(--font-d); font-size:11.5px; letter-spacing:.6px; color:var(--acc); margin-top:4px; }

/* Ortsliste (viele Links kompakt) */
.chips-links { display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 8px; }
.chips-links a { font-family:var(--font-d); font-size:12.5px; color:var(--steel); background:rgba(122,168,255,0.05); border:1px solid var(--line); padding:8px 15px; border-radius:100px; text-decoration:none; transition:all .2s; }
.chips-links a:hover { color:var(--acc); border-color:var(--line-strong); background:rgba(56,217,240,0.07); }
.chip-static { font-family:var(--font-d); font-size:12.5px; color:var(--steel); background:rgba(122,168,255,0.05); border:1px solid var(--line); padding:8px 15px; border-radius:100px; }

/* ── CTA-Band ── */
.cta-band { background:var(--bg-alt); border-top:1px solid var(--line); padding:72px 0; }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.cta-title { font-family:var(--font-d); font-size:clamp(24px,2.8vw,34px); font-weight:700; letter-spacing:-1.2px; line-height:1.15; color:var(--ink); margin-bottom:10px; max-width:560px; }
.cta-text { font-size:14.5px; color:var(--steel); line-height:1.75; max-width:520px; }
.cta-actions { display:flex; gap:14px; flex-wrap:wrap; }

/* NAP im Footer */
.f-nap { font-style:normal; font-size:13px; color:var(--steel); line-height:1.8; margin:0 0 18px; }
.f-nap a { color:var(--acc); text-decoration:none; }

/* ── Responsiv ── */
@media (max-width:900px) {
  .split { grid-template-columns:1fr; gap:36px; }
  .aside-card { position:static; }
  .fgrid, .fgrid.two, .ptiers, .lcards, .dcards { grid-template-columns:1fr; }
  .sec-tight { padding:56px 0; }
  .breadcrumb { padding-top:88px; font-size:11.5px; }
  .pg-hero { padding:36px 0 44px; }
  .cta-inner { flex-direction:column; align-items:flex-start; }
}
@media (min-width:901px) and (max-width:1100px) {
  .fgrid, .lcards { grid-template-columns:repeat(2,1fr); }
}
.fcard-orte { font-size:12px; color:var(--muted); line-height:1.6; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }

/* Nur Textlinks in der Seitenspalte einfärben — Knöpfe behalten ihre eigene
   Farbe, sonst steht cyaner Text auf cyanem Grund und ist unsichtbar. */
.aside-card a:not(.btn):not(.btn-ghost) { color:var(--acc); text-decoration:none; }
.aside-card a:not(.btn):not(.btn-ghost):hover { text-decoration:underline; }

/* Footer-Rechtslinks müssen auf schmalen Handys umbrechen dürfen */
.f-legal { flex-wrap:wrap; }

/* ════════════════════════════════════════════════════════════
   DSGVO-CHECK — kostenloses Prüfwerkzeug (/dsgvo-check/)
   ════════════════════════════════════════════════════════════ */
.dc-wrap { max-width:820px; }
kbd { font-family:var(--font-d); font-size:12px; background:rgba(122,168,255,0.09); border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:2px 7px; color:var(--ink); white-space:nowrap; }

.dc-input { width:100%; margin:10px 0 16px; background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-md); color:var(--ink); font-family:'Courier New',monospace; font-size:13px; line-height:1.6; padding:16px 18px; resize:vertical; min-height:200px; }
.dc-input:focus { border-color:var(--line-strong); outline:none; box-shadow:0 0 0 3px rgba(56,217,240,0.15); }
.dc-input::placeholder { color:var(--muted); }

.dc-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.dc-filelabel { cursor:pointer; position:relative; }
.dc-filelabel:focus-within { outline:2px solid var(--acc); outline-offset:3px; }

.dc-output { margin-top:38px; }
.dc-output:focus { outline:none; }

/* Gesamtnote */
.dc-score { display:flex; align-items:center; gap:22px; padding:26px 28px; border-radius:var(--r-lg); border:1px solid var(--line-strong); background:linear-gradient(150deg, var(--card2), var(--card)); margin-bottom:30px; }
.dc-note { font-family:var(--font-d); font-size:44px; font-weight:700; letter-spacing:-2px; line-height:1; width:88px; height:88px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:var(--r-md); background:rgba(56,217,240,0.1); border:1px solid var(--line-strong); color:var(--acc); }
.dc-note-a .dc-note { color:var(--ok); background:rgba(74,222,128,0.1); border-color:rgba(74,222,128,0.4); }
.dc-note-b .dc-note, .dc-note-c .dc-note { color:var(--warn); background:rgba(255,193,7,0.09); border-color:rgba(255,193,7,0.4); }
.dc-note-d .dc-note, .dc-note-e .dc-note, .dc-note-f .dc-note { color:#ff6b6b; background:rgba(255,107,107,0.09); border-color:rgba(255,107,107,0.4); }
.dc-score-zahl { font-family:var(--font-d); font-size:22px; font-weight:700; color:var(--ink); letter-spacing:-.6px; }
.dc-score-text { font-size:14px; color:var(--steel); margin-top:6px; line-height:1.6; }

/* Kategorien */
.dc-cat { margin-bottom:26px; }
.dc-cat h3 { font-family:var(--font-d); font-size:14px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.dc-cat-note { font-size:11px; letter-spacing:1px; color:var(--acc); border:1px solid var(--line-strong); border-radius:100px; padding:2px 10px; }
.dc-list { list-style:none; display:flex; flex-direction:column; gap:9px; }
.dc-item { display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-left-width:3px; border-radius:var(--r-md); padding:15px 18px; }
.dc-item.dc-pass { border-left-color:var(--ok); }
.dc-item.dc-warn { border-left-color:var(--warn); }
.dc-item.dc-fail { border-left-color:#ff6b6b; }
.dc-item.dc-info { border-left-color:var(--muted); }
.dc-icon { flex-shrink:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:12px; font-weight:700; margin-top:1px; }
.dc-pass .dc-icon { background:rgba(74,222,128,0.14); color:var(--ok); }
.dc-warn .dc-icon { background:rgba(255,193,7,0.14); color:var(--warn); }
.dc-fail .dc-icon { background:rgba(255,107,107,0.14); color:#ff6b6b; }
.dc-info .dc-icon { background:rgba(167,184,210,0.12); color:var(--muted); }
.dc-label { display:block; font-family:var(--font-d); font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.dc-detail { display:block; font-size:13.5px; color:var(--steel); line-height:1.65; word-break:break-word; }
.dc-fix { display:block; font-size:13px; color:var(--acc); line-height:1.65; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
.dc-fix strong { color:var(--acc); font-weight:600; }

@media (max-width:600px) {
  .dc-score { flex-direction:column; align-items:flex-start; gap:16px; }
  .dc-note { width:66px; height:66px; font-size:32px; }
  .dc-actions .btn, .dc-actions .btn-ghost { width:100%; }
}

/* Werkzeug-Block auf der Startseite */
.tool-title { max-width:620px; }
.cta-text code { font-family:var(--font-d); font-size:13px; background:rgba(122,168,255,0.09); border:1px solid var(--line); border-radius:5px; padding:1px 7px; color:var(--acc); }

/* ── Preiskatalog: die fünf Demo-Karten ───────────────────────────────── */
.dcards { display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:18px; }
.dcard { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px; transition:border-color .3s, transform .3s; }
.dcard:hover { border-color:var(--line-strong); transform:translateY(-3px); }
.dcard.hi { background:linear-gradient(170deg, var(--card2), var(--card)); border-color:var(--line-strong); }
.dcard-top { display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.dcard-name { font-family:var(--font-d); font-size:19px; font-weight:700; letter-spacing:-.4px; color:var(--ink); margin:0; }
.dcard-price { font-family:var(--font-d); font-size:14px; font-weight:700; color:var(--acc); white-space:nowrap; }
.dcard-firma { font-family:var(--font-d); font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin:8px 0 15px; }
.dcard-desc { font-size:14px; color:var(--steel); line-height:1.75; margin-bottom:16px; }
.dcard-list { list-style:none; display:flex; flex-direction:column; gap:8px; margin:0 0 22px; padding:0; flex:1; }
.dcard-list li { font-size:13.5px; color:var(--steel); line-height:1.55; padding-left:19px; position:relative; }
.dcard-list li::before { content:'\203A'; position:absolute; left:0; color:var(--acc); font-weight:700; }
.dcard-price .dcard-ust { display:block; font-family:var(--font-b); font-size:10.5px; font-weight:400; letter-spacing:.2px; color:var(--muted); margin-top:4px; text-align:right; }

/* ══ Designstudien: Branchenfoto statt Farbblock ══════════════════════════
   Vorher lag im Studienbild nur der Browser-Entwurf auf farbigen Verläufen.
   Das las sich als „Block". Jetzt trägt jede Studie ein echtes Branchenfoto,
   der Entwurf sitzt darauf. Die Fotos stammen von Pexels (kommerzielle
   Nutzung erlaubt, keine Namensnennung nötig) — Herkunft je Datei in
   pixlane-site\herkunft.json. Bewusst nur Objekt- und Raumaufnahmen ohne
   erkennbare Gesichter, siehe § 78 UrhG. */
.case-visual { position: relative; padding: 5.5% 7%; }
.case-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 16px; border: 1px solid var(--line);
  filter: saturate(.9) brightness(.62);
}
.case-visual .case-frame { position: relative; z-index: 1; }

/* Unter 900 px stapeln: Foto als Band oben, Entwurf darunter in voller Breite.
   Ein überlagerter Entwurf wird auf schmalen Geräten sonst unleserlich. */
@media (max-width: 900px) {
  .case-visual { padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .case-photo { position: static; height: auto; aspect-ratio: 16/7; filter: saturate(.9) brightness(.78); }
}

/* ── Die verbliebenen Farbflächen im Entwurf durch echte Ausschnitte ersetzen.
   Ein Bild je Studie genügt: die drei Kacheln zeigen denselben Ausschnitt an
   drei Positionen, das wirkt wie eine kleine Galerie. ── */
.cf-img.wood {
  background: url(/studie-tischlerei.jpg) center/cover no-repeat;
  background-blend-mode: normal;
}
.cf-tile.wood-1 { background: url(/studie-tischlerei.jpg) 0% 50%/300% auto no-repeat; }
.cf-tile.wood-2 { background: url(/studie-tischlerei.jpg) 50% 50%/300% auto no-repeat; }
.cf-tile.wood-3 { background: url(/studie-tischlerei.jpg) 100% 50%/300% auto no-repeat; }
.cf-tile.beauty-1 { background: url(/studie-kosmetik.jpg) 0% 50%/300% auto no-repeat; }
.cf-tile.beauty-2 { background: url(/studie-kosmetik.jpg) 50% 50%/300% auto no-repeat; }
.cf-tile.beauty-3 { background: url(/studie-kosmetik.jpg) 100% 50%/300% auto no-repeat; }

/* ══ Preis-Abschnitt auf der Startseite ═══════════════════════════════════
   Anlass: Testleser brauchten rund zwei Minuten, bis sie die Preise gefunden
   hatten. Jetzt stehen alle fünf Klassen mit Preis auf der Startseite — ohne
   einen Klick. Die Bilder sind Screenshots der eigenen Demo-Seiten, also
   eigene Arbeit ohne Lizenzfrage. */
.pk-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 18px; margin-top: 34px;
}
.pk-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--card, rgba(255,255,255,.02));
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s;
}
.pk-card:hover, .pk-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--line-strong, var(--acc));
  box-shadow: 0 22px 50px rgba(0,0,0,.42);
}
.pk-card img {
  /* height:auto ist Pflicht: die Attribute width/height im HTML wirken als
     Darstellungshinweis und würden das aspect-ratio sonst überstimmen. */
  display: block; width: 100%; height: auto; aspect-ratio: 12/7; object-fit: cover;
  object-position: top center; border-bottom: 1px solid var(--line);
}
.pk-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; flex: 1; }
.pk-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pk-name { font-family: var(--font-d); font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -.2px; }
.pk-preis { font-family: var(--font-d); font-weight: 700; font-size: 15px; color: var(--acc); white-space: nowrap; }
.pk-text { font-size: 13px; line-height: 1.65; color: var(--steel); flex: 1; }
.pk-go { font-family: var(--font-d); font-size: 12px; letter-spacing: .4px; color: var(--acc); margin-top: 4px; }
.pk-hinweis { margin-top: 16px; font-size: 12.5px; color: var(--muted); text-align: center; }
.pk-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

@media (max-width: 620px) {
  .pk-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pk-body { padding: 13px 13px 15px; }
  .pk-text { font-size: 12.5px; }
}

/* ══ Themenbild unter dem Seitenkopf ══════════════════════════════════════
   Lizenzfreie Branchenaufnahmen (Pexels). Bewusst ohne erkennbare Gesichter:
   die Pexels-Lizenz deckt das Urheberrecht des Fotografen ab, nicht das Recht
   am eigenen Bild abgebildeter Personen (§ 78 UrhG). */
.pg-bild-sec { padding: 0 0 8px; margin-top: -18px; }
.pg-bild { margin: 0; }
.pg-bild img {
  /* height:auto ist Pflicht — sonst überstimmt das height-Attribut im HTML
     das aspect-ratio und das Bild wird verzerrt hoch. */
  display: block; width: 100%; height: auto; aspect-ratio: 24/9; object-fit: cover;
  border-radius: 18px; border: 1px solid var(--line);
  filter: saturate(.92) brightness(.82);
}
.pg-bild figcaption {
  margin-top: 10px; font-size: 12.5px; color: var(--muted); text-align: center;
}
@media (max-width: 700px) {
  .pg-bild img { aspect-ratio: 16/9; border-radius: 12px; }
}

/* ── Vorschaubild im Preiskatalog ──────────────────────────────────────────
   Screenshot der jeweiligen Demo. Eigene Arbeit, deshalb ohne Lizenzfrage.
   Der Link ist aria-hidden und aus der Tab-Reihenfolge genommen: darunter
   steht bereits derselbe Link als beschrifteter Knopf, und zwei gleiche Ziele
   hintereinander sind für Screenreader und Tastaturbedienung nur Ballast. */
.dcard-bild { display: block; margin: -4px -4px 16px; border-radius: 12px; overflow: hidden; }
.dcard-bild img {
  /* height:auto — sonst überstimmt das height-Attribut das aspect-ratio. */
  display: block; width: 100%; height: auto; aspect-ratio: 12/7; object-fit: cover;
  object-position: top center; border: 1px solid var(--line); border-radius: 12px;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.dcard:hover .dcard-bild img { transform: scale(1.03); }