/* ConnectEngine Web Studio - Home D "Nachtschicht" - ported verbatim from design/home-d.html.
   Loaded ONLY on the build page via functions.php (scoped enqueue). Tokens = single source of truth here;
   optionally mirror the dark color names into Core Framework for the Bricks editor pickers. */

/* ===================== FONTS ===================== */
@font-face { font-family:"Inter"; src:url("../fonts/Inter-Var.ttf") format("truetype"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/Inter-Italic-Var.ttf") format("truetype"); font-weight:100 900; font-style:italic; font-display:swap; }
@font-face { font-family:"Fraunces"; src:url("../fonts/Fraunces-Var.ttf") format("truetype"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Fraunces"; src:url("../fonts/Fraunces-Italic-Var.ttf") format("truetype"); font-weight:100 900; font-style:italic; font-display:swap; }

/* ===================== TOKENS (custom, non-color; colors come from Core Framework) ===================== */
:root {
  --f-grot:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-serif:"Fraunces","Iowan Old Style",Palatino,Georgia,serif;
  --f-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --container:var(--max-screen-width,1400px); --gutter:clamp(20px,5vw,72px); --head-h:74px; --corner:72px;
  --ease:cubic-bezier(.22,.61,.24,1); --ease-io:cubic-bezier(.76,0,.24,1);
  --shadow:0 30px 60px -34px var(--shadow-primary);
  --grain-opacity:.05; --fx-mesh:.85;
  --display-hero:clamp(3rem,2rem + 8.5vw,8.4rem);
  --display-name:clamp(1.8rem,1.2rem + 3.4vw,4rem);
  --display-num:clamp(3.2rem,2rem + 6vw,6rem);
  --display-step:clamp(3rem,2.2rem + 3.5vw,5rem);
}
:root.cf-theme-light { --grain-opacity:.04; --fx-mesh:.7; }

/* ===================== BASE ===================== */
* { box-sizing:border-box; }
/* Bricks integration: Core Framework sets the root font-size to 62.5% (10px). This design was authored
   at a 16px base, and this stylesheet only loads on the build page, so restore a 16px root here. */
:root { font-size:100%; }
html:not(.lenis) { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html:not(.lenis) { scroll-behavior:auto; } }
html.lenis, html.lenis body { height:auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow:clip; }
.lenis [data-lenis-prevent] { overscroll-behavior:contain; }
.lenis.lenis-smooth iframe { pointer-events:none; }
body.ce-nacht {
  margin:0; background:var(--bg-body); color:var(--text-title); font-family:var(--f-grot);
  font-size:var(--text-m); line-height:1.6; font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;
}
body.ce-nacht::before {
  content:""; position:fixed; inset:0; z-index:120; pointer-events:none;
  opacity:var(--grain-opacity); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.ce-nacht h1,.ce-nacht h2,.ce-nacht h3,.ce-nacht h4 { font-family:var(--f-grot); font-weight:800; line-height:.98; letter-spacing:-.035em; margin:0; text-wrap:balance; }
.ce-nacht p { margin:0; } .ce-nacht a { color:inherit; text-decoration:none; } .ce-nacht img { max-width:100%; display:block; }
.ce-nacht em, .ce-nacht .serif { font-family:var(--f-serif); font-style:italic; font-weight:500; letter-spacing:-.01em; }
.ce-nacht :focus-visible { outline:2px solid var(--primary); outline-offset:3px; border-radius:4px; }

.ce-nacht .container { width:100%; max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }
.ce-nacht .section { padding-block:var(--space-4xl); position:relative; }
.ce-nacht .band-1 { background:var(--band-1); }
.ce-nacht .label { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text-faint); display:inline-flex; align-items:center; gap:.7em; margin:0; }
.ce-nacht .label::before { content:""; width:24px; height:1px; background:var(--primary); }
.ce-nacht .lede { color:var(--text-body); font-size:var(--text-l); max-width:54ch; line-height:1.5; }
.ce-nacht section[id]{ scroll-margin-top:var(--head-h); }

.ce-nacht .card { background:var(--bg-surface); border:1px solid var(--border-primary); padding:clamp(1.6rem,3vw,2.2rem); }
.ce-nacht .corner-bl { border-radius:var(--radius-l) var(--radius-l) var(--radius-l) var(--corner); }
.ce-nacht .corner-br { border-radius:var(--radius-l) var(--radius-l) var(--corner) var(--radius-l); }

/* ===================== LOADER ===================== */
.ce-nacht .loader { position:fixed; inset:0; z-index:200; overflow:hidden; background:linear-gradient(115deg, #6f2916 0%, #A8432A 32%, var(--primary) 66%, #f4cd8e 100%); display:grid; place-items:center; }
.ce-nacht .loader-words { position:relative; width:min(70vw,520px); height:1.2em; text-align:center; }
.ce-nacht .loader-words span { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--f-grot); font-weight:700; font-size:clamp(2rem,7vw,4rem); letter-spacing:-.03em; color:#faf4ea; text-shadow:0 2px 24px rgba(58,20,8,.4); }
.ce-nacht .loader-words span:last-child { color:#ffffff; }
.js .ce-nacht .loader-words span { opacity:0; }
.rm .ce-nacht .loader { display:none !important; }
html:not(.js) .ce-nacht .loader { display:none !important; }

/* ===================== HEADER ===================== */
.ce-nacht .head { position:fixed; inset:0 0 auto 0; z-index:90; height:var(--head-h); display:flex; align-items:center;
  background:color-mix(in srgb, var(--bg-body) 92%, transparent); backdrop-filter:blur(12px) saturate(1.3);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s; }
.ce-nacht .head.stuck { box-shadow:0 6px 18px -14px rgba(0,0,0,.28); }
.ce-nacht .head .container { display:flex; align-items:center; justify-content:space-between; width:100%; }
.ce-nacht .brand { font-family:var(--f-mono); font-size:.92rem; letter-spacing:.02em; display:inline-flex; gap:.55em; align-items:center; }
.ce-nacht .brand .sq { width:9px; height:9px; border-radius:2px; background:var(--primary); display:inline-block; }
.ce-nacht .nav { display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.4rem); }
.ce-nacht .nav a { font-size:.95rem; color:var(--text-body); position:relative; transition:color .3s var(--ease); } .ce-nacht .nav a::after { content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px; border-radius:2px; background:var(--secondary); transform:scaleX(0); transform-origin:center; transition:transform .32s var(--ease); } .ce-nacht .nav a:hover::after { transform:scaleX(1); }
.ce-nacht .nav a:hover { color:var(--secondary); }
.ce-nacht .head-actions { display:flex; align-items:center; gap:.8rem; }
.ce-nacht .toggle { width:40px; height:40px; border:1px solid var(--border-primary); border-radius:50%; background:transparent; color:var(--text-title); cursor:pointer; display:grid; place-items:center; transition:border-color .25s; }
.ce-nacht .toggle:hover { border-color:var(--primary); }
.ce-nacht .toggle svg { width:17px; height:17px; } .ce-nacht .toggle .moon { display:none; }
:root.cf-theme-dark .ce-nacht .toggle .sun { display:none; } :root.cf-theme-dark .ce-nacht .toggle .moon { display:block; }
@media (prefers-color-scheme: dark) { html:not(.cf-theme-light):not(.cf-theme-dark) .ce-nacht .toggle .sun { display:none; } html:not(.cf-theme-light):not(.cf-theme-dark) .ce-nacht .toggle .moon { display:block; } }

.ce-nacht .burger { display:none; width:44px; height:44px; border:1px solid var(--border-primary); border-radius:50%; background:transparent; cursor:pointer; position:relative; }
.ce-nacht .burger span { position:absolute; left:12px; right:12px; height:2px; background:var(--text-title); border-radius:2px; transition:transform .4s var(--ease), opacity .25s; }
.ce-nacht .burger span:nth-child(1){ top:16px; } .ce-nacht .burger span:nth-child(2){ top:21px; } .ce-nacht .burger span:nth-child(3){ top:26px; }
.ce-nacht .burger.open span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.ce-nacht .burger.open span:nth-child(2){ opacity:0; }
.ce-nacht .burger.open span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

.ce-nacht .overlay { position:fixed; top:var(--head-h,72px); left:0; right:0; bottom:0; z-index:80; background:var(--band-1); display:flex; flex-direction:column; justify-content:center; padding:var(--gutter); visibility:hidden; opacity:0; }
.ce-nacht .overlay .foot { display:none; }
.ce-nacht .overlay.open { visibility:visible; opacity:1; }
.ce-nacht .overlay ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(.9rem,3.4vh,1.7rem); }
.ce-nacht .overlay li { overflow:visible; }
.ce-nacht .overlay a { font-family:var(--f-grot); font-weight:800; letter-spacing:-.03em; font-size:clamp(1.9rem,9vw,3rem); line-height:1.1; display:inline-flex; align-items:center; gap:.55em; transition:color .25s var(--ease); }
.ce-nacht .overlay a:hover, .ce-nacht .overlay a:focus-visible { color:var(--accent-ink); }
.ce-nacht .overlay a .n { font-family:var(--f-mono); font-size:.72rem; color:var(--accent-ink); font-weight:400; }
.ce-nacht .overlay .foot { margin-top:2.4rem; font-family:var(--f-mono); font-size:.76rem; color:var(--text-faint); }
/* overlay links rest fully visible; the fade-down reveal is JS-driven (ce-engine.js) and always clears to the visible state, so a stalled tween can never blank the menu. */

/* ===================== BUTTONS ===================== */
.ce-nacht .btn { display:inline-flex; align-items:center; gap:.55em; font-family:var(--f-grot); font-weight:600; font-size:.98rem; padding:.9em 1.5em; border-radius:var(--radius-full); border:1px solid transparent; background:transparent; cursor:pointer; min-height:44px; transition:transform .28s var(--ease), background .3s, color .3s, border-color .3s, filter .3s, box-shadow .28s var(--ease); }
.ce-nacht .btn svg { width:1.05em; height:1.05em; }
.ce-nacht .btn-solid { background:var(--primary); color:var(--on-accent); }
.ce-nacht .btn-solid:hover { background:var(--primary); color:var(--on-accent); filter:brightness(1.06); }
.ce-nacht .btn-ghost { border-color:var(--border-primary); color:var(--text-title); }
.ce-nacht .btn-ghost:hover { background:transparent; border-color:var(--primary); color:var(--accent-ink); } .ce-nacht .btn:hover { transform:translateY(-3px); box-shadow:0 14px 26px -12px var(--shadow-primary); }
.ce-nacht .btn-sm { padding:.55em 1.15em; font-size:.9rem; }
.ce-nacht .round-cta { width:132px; height:132px; border-radius:50%; background:var(--primary); color:var(--on-accent); display:grid; place-items:center; text-align:center; font-family:var(--f-grot); font-weight:800; letter-spacing:-.035em; font-size:1.12rem; line-height:.98; cursor:pointer; will-change:transform; flex-shrink:0; }
.ce-nacht .round-cta .in { display:flex; flex-direction:column; align-items:center; gap:.2em; }
.ce-nacht .round-cta svg { width:1.1em; height:1.1em; }
@media (max-width:480px){ .ce-nacht .round-cta{ width:112px; height:112px; font-size:.92rem; } }

/* ===================== HERO ===================== */
.ce-nacht .hero { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-top:calc(var(--head-h) + clamp(24px,4vw,48px)); padding-bottom:clamp(40px,8vw,88px); position:relative; overflow:hidden; }
.hero > .container { width:100%; }
.ce-nacht .hero::after { content:""; position:absolute; top:-30%; right:-8%; width:52vw; height:52vw; max-width:680px; max-height:680px; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--primary) 24%, transparent), transparent 70%); opacity:.45; pointer-events:none; }
.ce-nacht .hero .container { position:relative; z-index:1; }
.ce-nacht .hero-fx { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ce-nacht .hero-mesh {
  position:absolute; inset:-25% -10% -12%; opacity:var(--fx-mesh); will-change:transform;
  background:
    radial-gradient(44% 48% at 14% 20%, color-mix(in srgb, var(--secondary) 34%, transparent), transparent 70%),
    radial-gradient(54% 58% at 86% 74%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 72%),
    radial-gradient(72% 62% at 50% 112%, color-mix(in srgb, var(--band-2) 96%, transparent), transparent 64%);
}
.ce-nacht .hero-title { font-size:var(--display-hero); letter-spacing:-.045em; margin:.6rem 0 0; line-height:.92; }
.ce-nacht .hero-title .ln { display:block; overflow:hidden; padding-bottom:.05em; }
.ce-nacht .hero-title .ln-i { display:block; }
.ce-nacht .hero-title em { color:var(--accent-ink); }
/* Mobile: shrink the hero so "Bricks-Team," fits one line (at the desktop size the word is wider than
   the screen, forcing the ugly mid-word hyphen break). Desktop unchanged. */
@media (max-width:600px){ .ce-nacht .hero-title { font-size:clamp(2.4rem, 1.5rem + 6vw, 3.4rem); line-height:.98; } }
.ce-nacht .hero-row { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-top:2.4rem; }
.ce-nacht .hero-sub { max-width:46ch; color:var(--text-body); font-size:var(--text-l); line-height:1.5; }
.ce-nacht .hero-actions { display:flex; align-items:center; gap:1.2rem; }
@media (max-width:480px){ .ce-nacht .hero-actions { flex-direction:column; align-items:stretch; gap:.8rem; width:100%; } .ce-nacht .hero-actions .btn { width:100%; justify-content:center; } }
.ce-nacht .spec { margin-top:clamp(2.6rem,6vw,4rem); border-top:1px solid var(--border-primary); border-bottom:1px solid var(--border-primary); display:grid; grid-template-columns:repeat(4,1fr); }
.ce-nacht .spec > div { padding:1.05rem 1.2rem; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.04em; color:var(--text-body); border-left:1px solid var(--border-primary); display:flex; gap:.65em; align-items:center; }
.ce-nacht .spec > div:first-child { border-left:0; padding-left:0; }
.ce-nacht .spec > div::before { content:""; width:7px; height:7px; border-radius:2px; background:var(--primary); flex-shrink:0; }
.ce-nacht .spec b { color:var(--text-title); font-weight:600; }
@media (max-width:760px){
  .ce-nacht .spec { grid-template-columns:1fr 1fr; }
  .ce-nacht .spec > div:nth-child(2n+1) { border-left:0; padding-left:0; }
  .ce-nacht .spec > div:nth-child(n+3) { border-top:1px solid var(--border-primary); }
}

/* ===================== SECTION HEAD ===================== */
.ce-nacht .s-head { max-width:64ch; margin-bottom:clamp(2.6rem,5vw,4.4rem); }
.ce-nacht .s-head h2 { font-size:var(--text-3xl); margin-top:1rem; }
.ce-nacht .s-head h2 em { color:var(--accent-ink); }
.ce-nacht .s-head p { margin-top:1.1rem; }

/* ===================== WARUM ===================== */
.ce-nacht .warum { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.6rem,4vw,4.5rem); align-items:end; }
@media (max-width:860px){ .ce-nacht .warum{ grid-template-columns:1fr; align-items:start; } }
.ce-nacht .warum h2 { font-size:var(--text-3xl); }
.ce-nacht .warum h2 em { color:var(--accent-ink); }
.ce-nacht .warum-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.ce-nacht .warum-list li { padding:1.2rem 0; border-top:1px solid var(--border-primary); display:flex; gap:1rem; align-items:baseline; }
.ce-nacht .warum-list li:last-child { border-bottom:1px solid var(--border-primary); }
.ce-nacht .warum-list .n { font-family:var(--f-mono); font-size:.78rem; color:var(--accent-ink); }
.ce-nacht .warum-list b { font-weight:600; }
.ce-nacht .warum-list .d { color:var(--text-body); font-size:.95rem; display:block; margin-top:.2rem; }

/* ===================== LEISTUNGEN ===================== */
.ce-nacht .svc-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--border-primary); }
.ce-nacht .svc { border-bottom:1px solid var(--border-primary); }
.ce-nacht .svc a { position:relative; display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"n t x" "n d x"; column-gap:clamp(1.2rem,3vw,2.4rem); row-gap:.45rem; align-items:center; padding:clamp(1.5rem,3vw,2.4rem) 0; transition:padding-left .45s var(--ease); }
.ce-nacht .svc a::before, .ce-nacht .ref a::before { content:""; position:absolute; left:0; top:50%; translate:0 -50%; width:clamp(.6rem,2vw,1.6rem); height:2px; background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.ce-nacht .ref a::before { background:var(--accent-ink); }
.ce-nacht .svc:hover a::before, .ce-nacht .ref:hover a::before { transform:scaleX(1); }
.ce-nacht .svc:hover a { padding-left:clamp(1rem,2.6vw,2.2rem); }
.ce-nacht .svc-n { grid-area:n; font-family:var(--f-mono); font-size:.82rem; color:var(--accent-ink); }
.ce-nacht .svc-t { grid-area:t; font-size:var(--text-2xl); font-weight:800; letter-spacing:-.03em; line-height:1.05; transition:color .3s; }
.ce-nacht .svc-desc { grid-area:d; color:var(--text-body); font-size:.98rem; max-width:52ch; }
.ce-nacht .svc-x { grid-area:x; color:var(--text-faint); transition:color .3s, transform .3s var(--ease); }
.ce-nacht .svc:hover .svc-x { color:var(--accent-ink); transform:translate(4px,-4px); }
.ce-nacht .svc:hover .svc-t { color:var(--accent-ink); }
@media (max-width:720px){ .ce-nacht .svc a { grid-template-columns:1fr auto; grid-template-areas:"n x" "t t" "d d"; } }

/* ===================== PROZESS ===================== */
/* Bricks sections are display:flex; pinning a flex child breaks ScrollTrigger pinSpacing
   (the pin-spacer reserves no scroll distance and the next section overlaps). Force block. */
.ce-nacht #prozess { padding:0; display:block; }
.ce-nacht .prozess-stage { min-height:100vh; display:flex; align-items:center; padding-block:clamp(72px,11vw,140px); }
.ce-nacht .steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,3vw,2.6rem); margin-top:clamp(2.4rem,5vw,4rem); }
@media (max-width:760px){
  .ce-nacht .steps{ grid-template-columns:1fr; gap:1.6rem; }
  /* no pin on mobile (see gsap.matchMedia in ce-engine.js): the stage is a normal block, not a
     100vh-centered pinned stage, and every step reads as active so nothing looks dimmed/broken. */
  .ce-nacht .prozess-stage{ min-height:0; display:block; padding-block:clamp(56px,12vw,90px); }
  .ce-nacht .steps .step{ opacity:1; border-top-color:var(--primary); }
  .ce-nacht .steps .step .n-big{ color:var(--accent-ink); opacity:1; }
}
.ce-nacht .step { border-top:2px solid var(--border-primary); padding-top:1.4rem; opacity:.38; transition:opacity .4s, border-color .4s; }
.ce-nacht .step.on { opacity:1; border-top-color:var(--primary); }
.rm .ce-nacht .step { opacity:1; }
.ce-nacht .step .n-big { font-family:var(--f-serif); font-weight:600; font-size:var(--display-step); line-height:.9; letter-spacing:-.02em; font-variant-numeric:tabular-nums; display:block; color:var(--text-faint); opacity:.4; transition:color .4s, opacity .4s; }
.ce-nacht .step.on .n-big { color:var(--accent-ink); opacity:1; }
.ce-nacht .step .k { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); display:block; margin-top:.9rem; }
.ce-nacht .step h3 { font-size:var(--text-xl); margin:.6rem 0 .5rem; }
.ce-nacht .step p { color:var(--text-body); font-size:.96rem; }

/* ===================== REFERENZEN ===================== */
.ce-nacht .ref-list { list-style:none; margin:1rem 0 0; padding:0; border-top:1px solid var(--border-primary); }
.ce-nacht .ref { border-bottom:1px solid var(--border-primary); }
.ce-nacht .ref a { display:grid; grid-template-columns:1fr auto; gap:.6rem 2rem; align-items:baseline; padding:clamp(1.5rem,3.4vw,2.8rem) 0; transition:padding-left .45s var(--ease); position:relative; }
.ce-nacht .ref:hover a { padding-left:clamp(1rem,2.6vw,2.2rem); }
.ce-nacht .ref-name { font-size:var(--display-name); font-weight:800; letter-spacing:-.035em; line-height:1; transition:color .5s var(--ease), opacity .35s var(--ease); }
.ce-nacht .ref-name em { color:var(--accent-ink); }
.ce-nacht .ref-role { font-family:var(--f-mono); font-size:.76rem; color:var(--text-body); letter-spacing:.06em; text-align:right; }
.ce-nacht .ref-metric { grid-column:1 / -1; color:var(--text-body); font-family:var(--f-mono); font-size:.82rem; letter-spacing:.02em; margin-top:.2rem; }
.ce-nacht .ref-metric b { color:var(--accent-ink); font-weight:600; }
.ce-nacht .ref-list.hovering .ref-name { opacity:.4; }
.ce-nacht .ref:hover .ref-name { opacity:1; color:var(--accent-ink); }
.ce-nacht .ref-preview { position:fixed; top:0; left:0; width:0; height:0; overflow:hidden;border-radius:16px 16px 16px 40px; z-index:70; pointer-events:none; will-change:transform,width,height; transition:width .42s cubic-bezier(.36,0,.66,0), height .42s cubic-bezier(.36,0,.66,0); }
.ce-nacht .ref-preview.is-open { width:480px; height:300px; transition:width .5s cubic-bezier(.34,1,.64,1), height .5s cubic-bezier(.34,1,.64,1); }
.ce-nacht .ref-pv-inner { position:absolute; top:50%; left:50%; width:480px; height:300px; box-sizing:border-box; transform:translate(-50%,-50%) scale(.95); transform-origin:center; border-radius:16px 16px 16px 40px; overflow:hidden; box-shadow:0 16px 40px -26px var(--shadow-primary), inset 0 0 0 10px var(--primary); background:var(--band-2); transition:transform .55s cubic-bezier(.34,1.15,.64,1); }
.ce-nacht .ref-preview.is-open .ref-pv-inner { transform:translate(-50%,-50%) scale(1); }
.ce-nacht .ref-pv-img { position:absolute; inset:0; background-size:cover; background-position:left center; }
.ce-nacht .ref-pv-badge { position:absolute; top:50%; left:50%; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%; background:var(--primary); color:var(--on-accent); display:grid; place-items:center; opacity:0; transform:scale(.7); transition:opacity .3s ease, transform .4s cubic-bezier(.34,1.4,.64,1); }
.ce-nacht .ref-preview.is-open .ref-pv-badge { opacity:1; transform:scale(1); transition-delay:.18s; }
.ce-nacht .ref-pv-badge .in { display:flex; flex-direction:column; align-items:center; gap:.18em; font-family:var(--f-grot); font-weight:800; letter-spacing:-.03em; font-size:1rem; line-height:1; }
.ce-nacht .ref-pv-badge svg { width:20px; height:20px; }
@media (hover:none){
  .ce-nacht .ref-preview{ display:none; }
  .ce-nacht .ref a::before{ display:none; }
  .ce-nacht .ref:hover a{ padding-left:0; }
  .ce-nacht .ref:hover .ref-name{ color:var(--text-title); }
  .ce-nacht .svc a::before{ display:none; }
  .ce-nacht .svc:hover a{ padding-left:0; }
  /* touch: no cursor preview. Cards link to live sites (tap navigates); show each screenshot
     inline as an always-visible thumbnail. ce-engine.js injects .ref-touch-img per .ref a. */
  .ce-nacht .ref-touch-img{ grid-column:1 / -1; display:block; height:52vw; max-height:220px; margin-top:1.1rem; border-radius:var(--radius-l); background-size:cover; background-position:center top; box-shadow:var(--shadow); }
}
@media (prefers-reduced-motion:reduce){ .ce-nacht .ref-preview,.ce-nacht .ref-pv-inner,.ce-nacht .ref-pv-badge{ transition-duration:.12s !important; } }
/* Referenzen on mobile: stack name / role / metric / thumbnail vertically instead of cramming the
   role into a right-aligned second column (which wrapped ugly). */
@media (max-width:640px){
  .ce-nacht .ref a{ grid-template-columns:1fr; gap:.4rem 0; align-items:start; padding:1.6rem 0; }
  .ce-nacht .ref-name{ line-height:1.05; }
  .ce-nacht .ref-role{ text-align:left; letter-spacing:.04em; }
  .ce-nacht .ref-metric{ margin-top:.1rem; line-height:1.55; }
  .ce-nacht .ref-touch-img{ height:56vw; max-height:240px; margin-top:1.1rem; }
}
.ce-nacht .vault { margin-top:clamp(2.2rem,5vw,3.6rem); color:var(--text-body); font-size:.96rem; max-width:64ch; padding:1.3rem 1.5rem; border:1px dashed var(--border-primary); border-radius:var(--radius-l); }
.ce-nacht .vault b { color:var(--text-title); }

/* ===================== BEWEIS ===================== */
.ce-nacht .band-invert { background:var(--bg-body); color:var(--text-title); }
.ce-nacht .band-invert .label { color:var(--text-body); }
.ce-nacht .band-invert .lede { color:var(--text-body); }
.ce-nacht .band-invert .s-head h2 em { color:var(--accent-ink); }
.ce-nacht .dials { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,3vw,2.2rem); margin-top:1rem; }
@media (max-width:720px){ .ce-nacht .dials{ grid-template-columns:repeat(2,1fr); } }
.ce-nacht .dial { border-top:2px solid var(--primary); padding-top:1.1rem; }
.ce-nacht .dial .num { font-family:var(--f-serif); font-weight:600; font-size:var(--display-num); line-height:.9; letter-spacing:-.02em; font-variant-numeric:tabular-nums; display:inline-block; }
.ce-nacht .dial .cap { font-family:var(--f-mono); font-size:.76rem; color:var(--text-body); letter-spacing:.05em; margin-top:.6rem; }
.ce-nacht .qa { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:clamp(2.2rem,5vw,3.4rem); }
.ce-nacht .qa span { font-family:var(--f-mono); font-size:.74rem; color:var(--text-title); border:1px solid var(--border-primary); border-radius:var(--radius-full); padding:.5em 1em; }
.ce-nacht .qa b { color:var(--accent-ink); font-weight:600; }

/* ===================== PREISE ===================== */
.ce-nacht .plans { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.4rem); margin-top:1rem; }
@media (max-width:760px){ .ce-nacht .plans{ grid-template-columns:1fr; } }
.ce-nacht .plan { background:var(--bg-surface); border:1px solid var(--border-primary); border-radius:var(--radius-l); padding:clamp(1.5rem,2.6vw,2.1rem); display:flex; flex-direction:column; transition:transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.ce-nacht .plan:hover { transform:translateY(-4px); border-color:var(--primary); box-shadow:var(--shadow); }
.ce-nacht .plan h3 { font-size:var(--text-xl); margin-bottom:.5rem; }
.ce-nacht .plan .for { color:var(--text-body); font-size:.96rem; flex:1; }
.ce-nacht .plan .terms { font-family:var(--f-mono); font-size:.74rem; color:var(--accent-ink); margin-top:1.4rem; letter-spacing:.04em; }
.ce-nacht .plan--feat { background:var(--bg-body); color:var(--text-title); border-color:transparent; border-radius:var(--radius-l) var(--radius-l) var(--corner) var(--radius-l); }
.ce-nacht .plan--feat .for { color:var(--text-body); }
.ce-nacht .plan--feat .terms { color:var(--accent-ink); }
.ce-nacht .plan--feat:hover { border-color:transparent; }
.ce-nacht .price-cta { margin-top:clamp(2rem,5vw,3rem); display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:center; }
.ce-nacht .price-cta p { color:var(--text-body); max-width:44ch; }

/* ===================== KONTAKT ===================== */
.ce-nacht .kontakt { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.6rem); align-items:start; }
@media (max-width:860px){ .ce-nacht .kontakt{ grid-template-columns:1fr; } }
.ce-nacht .form { display:grid; gap:1rem; }
.ce-nacht .field { display:grid; gap:.4rem; }
.ce-nacht .field label { font-family:var(--f-mono); font-size:.74rem; letter-spacing:.06em; color:var(--text-body); }
.ce-nacht .field input, .ce-nacht .field textarea { font-family:var(--f-grot); font-size:1rem; color:var(--text-title); background:var(--bg-body); border:1px solid var(--border-primary); border-radius:var(--radius-m); padding:.9em 1em; width:100%; resize:vertical; }
.ce-nacht .field input:focus, .ce-nacht .field textarea:focus { outline:none; border-color:var(--primary); }
.ce-nacht .form-note { font-family:var(--f-mono); font-size:.72rem; color:var(--text-faint); }
.ce-nacht .kontakt-aside .big { font-family:var(--f-serif); font-style:italic; font-size:clamp(1.6rem,1.2rem + 1.8vw,2.4rem); margin-bottom:1rem; line-height:1.1; }
.ce-nacht .kontakt-aside a.mail { color:var(--accent-ink); border-bottom:1px solid var(--primary); display:block; width:fit-content; }
.ce-nacht .kontakt-aside .copy-mail { margin-top:var(--space-s); }
.ce-nacht .kontakt-aside ul { list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.7rem; }
.ce-nacht .kontakt-aside li { color:var(--text-body); font-size:.95rem; padding-left:1.2rem; position:relative; }
.ce-nacht .kontakt-aside li::before { content:""; position:absolute; left:0; top:.58em; width:8px; height:8px; border-radius:2px; background:var(--primary); }

/* ===================== FOOTER ===================== */
.ce-nacht .foot { border-top:1px solid var(--border-primary); padding-block:clamp(2.4rem,5vw,3.6rem); background:var(--band-1); }
.ce-nacht .foot .container { display:block; }
.ce-nacht .foot-top { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2rem 3rem; align-items:start; }
.ce-nacht .foot-brand .line { font-family:var(--f-mono); font-size:.78rem; color:var(--text-body); margin:.9rem 0 0; }
.ce-nacht .foot-col { display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; }
.ce-nacht .foot-h { font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.18em; font-size:.68rem; color:var(--text-faint); margin-bottom:.3rem; }
.ce-nacht .foot-col a { font-size:.9rem; color:var(--text-body); transition:color .25s var(--ease), transform .25s var(--ease); }
.ce-nacht .foot-col a:hover, .ce-nacht .foot-col a:focus-visible { color:var(--accent-ink); transform:translateX(3px); }
.ce-nacht .foot-base { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem 2rem; margin-top:clamp(2rem,4vw,3rem); padding-top:1.4rem; border-top:1px solid var(--border-primary); }
.ce-nacht .foot-copy { font-family:var(--f-mono); font-size:.72rem; color:var(--text-faint); margin:0; }
.ce-nacht .foot-social { display:flex; gap:.6rem; }
.ce-nacht .foot-social a { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--radius-full,999px); border:1px solid var(--border-primary); color:var(--text-body); transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.ce-nacht .foot-social a:hover, .ce-nacht .foot-social a:focus-visible { color:var(--primary); border-color:var(--primary); transform:translateY(-3px); box-shadow:0 10px 22px -10px var(--shadow-primary); }
.ce-nacht .foot-social svg { width:18px; height:18px; transition:transform .4s var(--ease); }
.ce-nacht .foot-social a:hover svg, .ce-nacht .foot-social a:focus-visible svg { transform:scale(1.18); }
@media (max-width:720px){ .ce-nacht .foot-top { grid-template-columns:1fr 1fr; } .ce-nacht .foot-brand { grid-column:1 / -1; } }
@media (max-width:460px){ .ce-nacht .foot-base { flex-direction:column-reverse; align-items:flex-start; } }

.js:not(.rm) .ce-nacht .reveal { opacity:0; }
.ce-nacht .ce-logo { display:block; height:22px; width:auto; aspect-ratio:323.4 / 60; color:var(--text-title); }
.ce-nacht .ce-logo--foot { height:26px; margin-bottom:1.05rem; }

@media (max-width:940px) { .ce-nacht .nav, .ce-nacht .nav-cta { display:none; } .ce-nacht .burger { display:inline-block; } }

/* ===================== NATIVE BRICKS FORM (Nachtschicht skin) ===================== */
.ce-nacht .brxe-form { display:grid; gap:1rem; }
.ce-nacht .brxe-form .form-group { position:relative; margin:0; }
.ce-nacht .brxe-form input, .ce-nacht .brxe-form textarea, .ce-nacht .brxe-form select { font-family:var(--f-grot); font-size:1rem; color:var(--text-title); background:var(--bg-body); border:1px solid var(--border-primary); border-radius:var(--radius-m); padding:1.5em 1em .6em; width:100%; }
.ce-nacht .brxe-form textarea { resize:vertical; min-height:8rem; padding-top:1.7em; }
.ce-nacht .brxe-form input:focus, .ce-nacht .brxe-form textarea:focus { outline:none; border-color:var(--primary); }
/* Floating labels: field name rests inside like a placeholder, floats up on focus or once filled. Bricks renders <label> BEFORE <input>, so we drive it with :focus-within + :has(:not(:placeholder-shown)). */
.ce-nacht .brxe-form label { position:absolute; left:1em; top:1.15em; font-family:var(--f-grot); font-size:1rem; letter-spacing:0; color:var(--text-faint); pointer-events:none; transform-origin:left top; transition:transform .18s var(--ease), color .18s var(--ease); }
.ce-nacht .brxe-form .form-group:focus-within label, .ce-nacht .brxe-form .form-group:has(input:not(:placeholder-shown)) label, .ce-nacht .brxe-form .form-group:has(textarea:not(:placeholder-shown)) label { transform:translateY(-.72em) scale(.68); color:var(--accent-ink); font-family:var(--f-mono); letter-spacing:.08em; }
.ce-nacht .brxe-form input::placeholder, .ce-nacht .brxe-form textarea::placeholder { color:transparent; }
.ce-nacht .brxe-form .form-group:focus-within input::placeholder, .ce-nacht .brxe-form .form-group:focus-within textarea::placeholder { color:var(--text-faint); transition:color .18s var(--ease); }
.ce-nacht .brxe-form button[type="submit"], .ce-nacht .brxe-form .bricks-button { display:inline-flex; align-items:center; gap:.55em; font-family:var(--f-grot); font-weight:600; font-size:.98rem; padding:.9em 1.5em; border-radius:var(--radius-full); border:1px solid transparent; cursor:pointer; min-height:44px; background:var(--primary); color:var(--on-accent); transition:transform .28s var(--ease), filter .3s, box-shadow .28s var(--ease); width:auto; }
.ce-nacht .brxe-form button[type="submit"]:hover, .ce-nacht .brxe-form .bricks-button:hover { background:var(--primary); transform:translateY(-3px); box-shadow:0 14px 26px -12px var(--shadow-primary); filter:brightness(1.06); }
.ce-nacht .brxe-form .brx-form-messages, .ce-nacht .brxe-form .message { font-family:var(--f-mono); font-size:.8rem; margin-top:.6rem; color:var(--text-body); }

/* ===================== LEGAL / PROSE PAGES ===================== */
.ce-nacht .legal { padding-top:calc(var(--head-h) + clamp(40px,8vw,90px)); padding-bottom:clamp(60px,10vw,120px); }
.ce-nacht .legal .container { max-width:820px; }
.ce-nacht .legal h1 { font-size:clamp(2.4rem,1.8rem + 3vw,3.8rem); margin-bottom:1.4rem; }
.ce-nacht .legal .legal-updated { font-family:var(--f-mono); font-size:.78rem; letter-spacing:.06em; color:var(--text-faint); margin-bottom:2.4rem; }
.ce-nacht .legal h2 { font-size:clamp(1.25rem,1.05rem + 1vw,1.7rem); margin:2.4rem 0 .7rem; }
.ce-nacht .legal p { color:var(--text-body); margin-bottom:1rem; max-width:72ch; line-height:1.65; }
.ce-nacht .legal a { color:var(--accent-ink); border-bottom:1px solid var(--border-primary); transition:border-color .25s var(--ease); }
.ce-nacht .legal a:hover { border-bottom-color:var(--primary); }
.ce-nacht .legal ul { color:var(--text-body); margin:0 0 1rem 1.2rem; display:grid; gap:.4rem; }
/* Mobile overflow fix: long German compound titles + URLs must wrap, never run past the viewport edge. */
.ce-nacht .legal h1, .ce-nacht .legal h2, .ce-nacht .legal h3 { overflow-wrap:break-word; word-break:break-word; hyphens:auto; }
.ce-nacht .legal p, .ce-nacht .legal li, .ce-nacht .legal a { overflow-wrap:anywhere; }

/* ===================== BLOG / JOURNAL ===================== */
.ce-nacht .blog-single .container { max-width:var(--container); }
.ce-nacht .blog-single .container > *:not(.blog-hero) { max-width:820px; margin-inline:0; }
.ce-nacht .blog-single .blog-hero { max-width:none; }
.ce-nacht .blog-index .container { max-width:var(--container); }
.ce-nacht .blog-back, .ce-nacht .blog-back-b a { font-family:var(--f-mono); font-size:.82rem; color:var(--text-faint); display:inline-block; transition:color .25s var(--ease); }
.ce-nacht .blog-back { margin-bottom:1.6rem; }
.ce-nacht .blog-back:hover, .ce-nacht .blog-back-b a:hover { color:var(--primary); }
.ce-nacht .blog-back-b { margin-top:2.6rem; }
.ce-nacht .blog-meta { margin-bottom:1.1rem; }
.ce-nacht .blog-hero { margin:1.8rem 0 2.4rem; border-radius:var(--radius-l,16px); overflow:hidden; }
.ce-nacht .blog-hero img { width:100%; height:auto; display:block; }
.ce-nacht .blog-body { color:var(--text-body); line-height:1.7; }
.ce-nacht .blog-body > h2 { font-family:var(--f-grot); font-weight:800; letter-spacing:-.02em; font-size:clamp(1.4rem,1.1rem + 1.4vw,1.9rem); color:var(--text-title); margin:2.4rem 0 .8rem; }
.ce-nacht .blog-body > h3 { font-family:var(--f-grot); font-weight:700; font-size:1.2rem; color:var(--text-title); margin:1.8rem 0 .6rem; }
.ce-nacht .blog-body p { margin:0 0 1.1rem; max-width:68ch; }
.ce-nacht .blog-body ul, .ce-nacht .blog-body ol { margin:0 0 1.2rem 1.3rem; display:grid; gap:.45rem; color:var(--text-body); }
.ce-nacht .blog-body a { color:var(--accent-ink); border-bottom:1px solid var(--border-primary); transition:border-color .25s var(--ease); overflow-wrap:anywhere; }
.ce-nacht .blog-body a:hover { border-bottom-color:var(--primary); }
.ce-nacht .blog-body img { max-width:100%; height:auto; border-radius:var(--radius-l,16px); margin:1.4rem 0; }
.ce-nacht .blog-body blockquote { margin:1.6rem 0; padding:.3rem 0 .3rem 1.2rem; border-left:3px solid var(--primary); color:var(--text-title); font-size:1.1rem; }
.ce-nacht .blog-body code { font-family:var(--f-mono); font-size:.9em; background:var(--band-2,rgba(128,128,128,.14)); padding:.12em .38em; border-radius:6px; }
.ce-nacht .blog-body pre { background:var(--band-2,rgba(128,128,128,.14)); padding:1rem 1.1rem; border-radius:var(--radius-l,14px); overflow-x:auto; margin:1.4rem 0; }
.ce-nacht .blog-body pre code { background:none; padding:0; }
.ce-nacht .blog-cta { margin:3rem 0 1rem; padding:1.6rem 1.8rem; border:1px solid var(--border-primary); border-radius:var(--radius-l,16px); display:flex; flex-wrap:wrap; gap:1rem 1.4rem; align-items:center; justify-content:space-between; }
.ce-nacht .blog-cta p { font-family:var(--f-grot); font-weight:600; color:var(--text-title); margin:0; max-width:34ch; }
.ce-nacht .blog-cta .btn-solid { color:var(--on-accent); } /* beat .ce-nacht .legal a (0,2,1) so the CTA text stays dark-on-amber, not rust */
.ce-nacht .blog-head { max-width:640px; margin-bottom:2.6rem; }
.ce-nacht .blog-head h1 { font-family:var(--f-grot); font-weight:800; letter-spacing:-.03em; font-size:clamp(2.4rem,1.8rem + 3vw,3.8rem); color:var(--text-title); margin-bottom:.8rem; }
.ce-nacht .blog-lede { color:var(--text-body); font-size:1.05rem; line-height:1.6; }
.ce-nacht .blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.6rem; }
.ce-nacht .blog-card { display:flex; flex-direction:column; height:100%; border:1px solid var(--border-primary); border-radius:var(--radius-l,16px); overflow:hidden; background:var(--band-1); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.ce-nacht .blog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow,0 18px 40px -24px rgba(0,0,0,.45)); }
.ce-nacht .blog-card-img { display:block; aspect-ratio:16/10; width:100%; object-fit:cover; }
.ce-nacht .blog-card-img--none { background:linear-gradient(135deg,var(--primary),var(--accent-ink)); }
.ce-nacht .blog-card-body { display:flex; flex-direction:column; gap:.5rem; padding:1.2rem 1.3rem 1.4rem; flex:1; }
.ce-nacht .blog-card-meta { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.05em; color:var(--text-faint); }
.ce-nacht .blog-card-title { font-family:var(--f-grot); font-weight:700; font-size:1.2rem; line-height:1.25; color:var(--text-title); }
.ce-nacht .blog-card-ex { color:var(--text-body); font-size:.92rem; line-height:1.55; flex:1; }
.ce-nacht .blog-card-more { font-family:var(--f-mono); font-size:.78rem; color:var(--accent-ink); margin-top:.3rem; }
.ce-nacht .blog-pagination { margin-top:2.6rem; }
.ce-nacht .blog-pagination .page-numbers { font-family:var(--f-mono); font-size:.85rem; padding:.4rem .7rem; border:1px solid var(--border-primary); border-radius:8px; margin-right:.35rem; color:var(--text-body); display:inline-block; }
.ce-nacht .blog-pagination .page-numbers.current { background:var(--primary); color:#fff; border-color:var(--primary); }
.ce-nacht .blog-empty { color:var(--text-faint); font-family:var(--f-mono); }
@media (max-width:600px){ .ce-nacht .blog-grid { grid-template-columns:1fr; } .ce-nacht .blog-cta { flex-direction:column; align-items:flex-start; } }

/* ===================== PAGE TRANSITION (Barba cover-wipe) ===================== */
.ce-wipe { position:fixed; inset:0; z-index:200; overflow:hidden; transform:translateX(-100%); will-change:transform; pointer-events:none; --w1:#6f2916; --w2:#A8432A; --w3:var(--primary); --w4:#f4cd8e; background:linear-gradient(115deg, var(--w1) 0%, var(--w2) 32%, var(--w3) 66%, var(--w4) 100%); }
.ce-wipe-sheen { position:absolute; top:-25%; left:0; width:45%; height:150%; pointer-events:none; will-change:transform,opacity; background:linear-gradient(100deg, transparent 0%, rgba(255,241,224,.45) 50%, transparent 100%); filter:blur(14px); transform:translateX(-60%); opacity:0; }

/* ===================== 404 ===================== */
.ce-nacht .err-404 { min-height:100svh; display:flex; align-items:center; padding-block:calc(var(--head-h) + clamp(2rem,6vw,4rem)) clamp(3rem,8vw,5rem); position:relative; overflow:hidden; }
.ce-nacht .err-404::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 62% 48% at 50% 42%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 70%); pointer-events:none; }
.ce-nacht .err-404 .container { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; }
.ce-nacht .err-num { font-family:var(--f-serif); font-weight:600; font-size:clamp(6.5rem,24vw,15rem); line-height:.95; letter-spacing:-.02em; color:var(--text-title); display:flex; user-select:none; }
.ce-nacht .err-num span { display:inline-block; }
.ce-nacht .err-num .hollow { color:transparent; -webkit-text-stroke:2px var(--primary); paint-order:stroke; }
@supports not (-webkit-text-stroke:1px black){ .ce-nacht .err-num .hollow { color:var(--primary); } }
.ce-nacht .err-404 .hero-title { font-family:var(--f-serif); font-weight:500; font-size:clamp(1.6rem,1.1rem + 3.2vw,2.9rem); line-height:1.15; letter-spacing:-.01em; color:var(--text-title); max-width:18ch; margin-top:clamp(1.2rem,3vw,2rem); text-wrap:balance; }
.ce-nacht .err-404 .lede { font-size:var(--text-m); line-height:1.65; max-width:46ch; margin-top:1.1rem; color:var(--text-body); text-wrap:pretty; }
.ce-nacht .err-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin-top:clamp(1.8rem,4vw,2.6rem); }
.ce-nacht .err-links { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-top:clamp(2.2rem,5vw,3.2rem); display:flex; align-items:center; gap:.9em; flex-wrap:wrap; justify-content:center; }
.ce-nacht .err-links a { color:var(--text-faint); text-decoration:none; transition:color .25s var(--ease); }
.ce-nacht .err-links a:hover { color:var(--primary); }
.ce-nacht .err-links .dot { color:var(--border-primary); }
@keyframes err-breathe { 0%,100%{ -webkit-text-stroke-color:var(--primary); } 50%{ -webkit-text-stroke-color:color-mix(in srgb, var(--primary) 55%, transparent); } }
.ce-nacht .err-num .hollow { animation:err-breathe 5s ease-in-out 1.2s infinite; }
@media (prefers-reduced-motion:reduce){ .ce-nacht .err-num .hollow { animation:none; } }
@media (max-width:420px){ .ce-nacht .err-actions { flex-direction:column; align-items:stretch; width:100%; max-width:300px; margin-inline:auto; } .ce-nacht .err-actions .btn { justify-content:center; } }

/* ============ KUNDENSTIMMEN / TRUSTPILOT (moved from inline code element 2026-07-17) ============ */
#stimmen .tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch;margin-top:3rem;}
#stimmen .tp-card{display:flex;flex-direction:column;background:var(--band-2);border:1px solid var(--border-primary);border-radius:var(--radius-l);box-shadow:var(--shadow);padding:2rem;position:relative;}
#stimmen .tp-card::before{content:'“';font-family:var(--f-serif);font-size:4.5rem;line-height:.6;color:var(--secondary);display:block;margin-bottom:1.1rem;}
#stimmen .tp-stars{font-size:.85rem;letter-spacing:.35em;color:var(--secondary);margin-bottom:1.1rem;}
#stimmen .tp-quote{font-family:var(--f-serif);font-size:1.18rem;line-height:1.55;color:var(--text);font-weight:400;margin:0;border:0;padding:0;}
#stimmen .tp-meta{margin-top:auto;padding-top:1.5rem;display:flex;flex-direction:column;gap:.3rem;}
#stimmen .tp-name{font-family:var(--f-grot);font-weight:600;color:var(--secondary);font-size:1rem;}
#stimmen .tp-src{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);}
#stimmen .tp-verify{margin-top:2.25rem;text-align:center;}
#stimmen .tp-verify a{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-body);text-decoration:none;border-bottom:1px solid var(--secondary);padding-bottom:.2em;transition:color .3s var(--ease);}
#stimmen .tp-verify a:hover{color:var(--accent-ink);}
@media (max-width:760px){#stimmen .tp-grid{grid-template-columns:1fr;gap:1.25rem;}#stimmen .tp-card{padding:1.75rem 1.5rem 1.5rem;}}
/* Touch hardening + tactile press (added 2026-07-19) */
@media (hover: none) {
  .ce-nacht .btn:hover { transform: none; box-shadow: none; }
  .ce-nacht .plan:hover { transform: none; }
  .ce-nacht .nav a:hover::after { transform: scaleX(0); }
}
.ce-nacht .btn:active { transform: translateY(-1px); filter: brightness(1.04); }

/* ce-builder-hover-smoothness: restore GPU promotion on hover-capable (desktop) devices only, so the button lift is smooth again without paying will-change GPU cost on touch. 2026-07-19 */
@media (hover: hover) and (pointer: fine) {
  .ce-nacht .btn,
  .ce-nacht .brxe-form button[type="submit"] { will-change: transform; }
}