/* Schriften liegen auf dem eigenen Server — kein Aufruf zu Google beim
   Seitenaufruf, damit keine IP-Adresse der Besucher dorthin abfliesst. */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/assets/fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/assets/fonts/bricolage-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Atkinson Hyperlegible wurde für Menschen mit eingeschränkter Sehkraft
   entworfen: eindeutige Formen für I, l, 1 und O, 0. Für eine Zielgruppe,
   die abends ohne Brille liest, ist das ein Grund und kein Geschmack. */
@font-face{
  font-family:'Atkinson Hyperlegible Next';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/assets/fonts/atkinson-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Atkinson Hyperlegible Next';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/assets/fonts/atkinson-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════
   EServix — Nachtwerk, geerdet

   Ein Schreibtisch nach Feierabend. Fast schwarzer Grund mit
   warmem Stich, flache Tafeln, Haarlinien. Das einzige Licht
   ist Messing — auf Schaltflächen, Hervorhebungen und dem Logo.
   Kein Leuchten, kein Farbschleier, keine Neigung: die Wirkung
   kommt aus Schrift und echten Bildschirmfotos.
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#0E0D0B;
  --pane:#181614;
  --pane-hi:#1E1C19;
  --pane-brd:rgba(255,236,210,.085);
  --well:#090807;
  --well-brd:rgba(255,236,210,.06);
  --line:rgba(255,236,210,.11);

  --ink:#F2EDE4;
  --ink-2:#BDB5A8;
  --ink-3:#9A9285;

  --acc:#E0B272;          /* Messing — das einzige Licht */
  --acc-ink:#EBC690;      /* Messing als Schrift auf dunklem Grund */
  --acc-deep:#A8793A;
  --acc-wash:rgba(224,178,114,.10);
  --on-acc:#1B1308;
  --ok:#8FCBA6;

  --f-display:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-ui:"Atkinson Hyperlegible Next","Helvetica Neue",Helvetica,Arial,sans-serif;
  --page:1240px;
  --gut:clamp(18px,4vw,56px);
  --r-lg:22px; --r-md:16px; --r-sm:12px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* Ebenen: Inhalt < Anrufleiste < Kopfzeile < Menü */
  --z-callbar:60; --z-nav:80; --z-sheet:70;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-ui);font-size:18px;line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
::selection{background:var(--acc);color:var(--on-acc)}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2.5px solid var(--acc);outline-offset:4px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:12px 18px;border-radius:var(--r-sm);
  background:var(--acc);color:var(--on-acc);font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* Lange Adressen in den Rechtstexten sprengten die Seite auf 561 px. */
p,li,dd,figcaption,.lede,.prose{overflow-wrap:break-word}
a[href^="http"],a[href^="mailto"],a[href^="tel"]{overflow-wrap:anywhere}

/* ── Materialbausteine ────────────────────────────────────────
   .pane trägt Inhalt, .well nimmt ihn auf. Flach und opak —
   eine haarfeine Kante oben ist das einzige Relief. */
.pane{
  position:relative;background:var(--pane);
  border:1px solid var(--pane-brd);
  box-shadow:inset 0 1px 0 rgba(255,236,210,.05);
}
.well{position:relative;background:var(--well);border:1px solid var(--well-brd)}

/* ── Raster ───────────────────────────────────────────────── */
.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(64px,9vw,128px);position:relative}
.sec-tight{padding-block:clamp(44px,6vw,84px)}
.sec + .sec-rule{border-top:1px solid var(--line)}

h1,h2,h3,h4{overflow-wrap:break-word;hyphens:auto}
h1,h2,h3{font-family:var(--f-display);font-weight:800;letter-spacing:-.032em;line-height:1.02;margin:0;text-wrap:balance}
h2{font-size:clamp(32px,4.6vw,58px)}
h3{font-size:clamp(23px,2.5vw,32px);letter-spacing:-.026em;line-height:1.08}
h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;margin:0;font-size:20px;line-height:1.2}
p{margin:0}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--ink-2);max-width:60ch;text-wrap:pretty}
.col{display:flex;flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g18{gap:18px}.g28{gap:28px}

/* Beschriftungen: klein, aber nicht winzig, und in normaler Schreibung.
   Gesperrte Versalien über jedem Feld waren die Grammatik einer Vorlage. */
.lbl,.fact dt,.meta-row dt,.line .k,.ql-item em,.pface-out em,.note em,.foot .foot-h,.ref time,.ref-state{
  font-family:var(--f-ui);font-style:normal;font-size:14px;font-weight:700;letter-spacing:0;
  text-transform:none;color:var(--ink-3)}

/* ── Schaltflächen ────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;position:relative;min-height:50px;
  font-family:var(--f-ui);font-size:16.5px;font-weight:700;letter-spacing:0;
  padding:13px 22px;border-radius:var(--r-sm);text-decoration:none;cursor:pointer;
  color:var(--ink);background:var(--pane);border:1px solid var(--pane-brd);
  transition:background .25s,border-color .25s,color .25s;
}
.btn:hover{background:var(--pane-hi);border-color:rgba(255,236,210,.18)}
.btn:active{transform:translateY(1px)}
.btn-go{color:var(--on-acc);background:var(--acc);border-color:var(--acc)}
.btn-go:hover{background:var(--acc-ink);border-color:var(--acc-ink)}
.btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.btn .ar{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

/* Auf dem Handy gehen alle Schaltflächen im Inhalt über die volle
   Breite: gleichmäßig, gut zu treffen, nichts hängt halb links. */
@media(max-width:600px){
  main .btn{display:flex;width:100%;justify-content:center}
  .hero-cta,.page-cta{flex-direction:column}
}

/* ── Kopfzeile ────────────────────────────────────────────────
   Eine ruhige Leiste über die volle Breite statt einer schwebenden
   Pille. Rechts steht die Telefonnummer — die wichtigste Handlung
   der ganzen Seite ist von überall einen Klick entfernt. */
.navwrap{position:sticky;top:0;z-index:var(--z-nav);background:var(--bg);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:clamp(10px,2vw,28px);min-height:72px}
.nav-brand{display:flex;align-items:center;text-decoration:none;flex:none;padding-block:10px}
.nav-brand svg{height:30px;width:auto;display:block}
.nav-links{display:flex;gap:2px;align-items:center;margin-left:auto}
.nav-links a{
  font-size:16px;font-weight:700;color:var(--ink-2);text-decoration:none;
  padding:10px 14px;border-radius:var(--r-sm);white-space:nowrap;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--acc-ink)}
.nav-call{margin-left:clamp(4px,1vw,12px)}
.nav-call .short{display:none}
@media(max-width:1020px){
  .nav-links{display:none}
  .nav-call{margin-left:auto}
}
@media(max-width:520px){
  .nav-call .long{display:none}
  .nav-call .short{display:inline}
  .nav-call{padding-inline:16px}
  .nav-brand svg{height:26px}
}

/* Menütaste — nur dort, wo die Linkleiste nicht mehr passt */
.burger{display:none;width:48px;height:48px;border-radius:var(--r-sm);flex:none;padding:0;
  cursor:pointer;background:var(--pane);border:1px solid var(--pane-brd);color:var(--ink);
  flex-direction:column;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .3s var(--ease),opacity .2s}
.burger span + span{margin-top:4px}
@media(max-width:1020px){.burger{display:flex}}
body[data-menu="1"] .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body[data-menu="1"] .burger span:nth-child(2){opacity:0}
body[data-menu="1"] .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.sheet{
  position:fixed;inset:73px 0 0;z-index:var(--z-sheet);display:flex;flex-direction:column;
  padding:20px var(--gut) calc(var(--gut) + env(safe-area-inset-bottom));background:var(--bg);overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;
}
body[data-menu="1"] .sheet{opacity:1;visibility:visible}
.sheet a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 4px;text-decoration:none;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;font-size:clamp(23px,5vw,30px);
}
.sheet a[aria-current="page"]{color:var(--acc-ink)}
.sheet-contact{display:grid;gap:10px;margin-top:26px}
.sheet-contact a{border:0;padding:0;font-family:var(--f-ui);letter-spacing:0;font-size:17px}
.sheet-contact .btn{justify-content:center}
@media(min-width:1021px){.sheet{display:none}}

/* ── Bühne: der Schreibtisch nach Feierabend ──────────────────
   Auf dem Tisch liegen echte Arbeiten: Screens, Handys, eine Notiz
   vom Erstgespräch, eine Skizze. Es ist dunkel. Eine Lampe oben rechts
   wirft einen Kegel aus Messinglicht, der dem Zeiger folgt und sonst
   langsam über den Tisch wandert. Was im Licht liegt, wird lesbar.
   --x/--y setzt das Skript in Pixeln, relativ zum Abschnitt. */
.desk{position:relative;overflow:hidden;isolation:isolate;
  --x:72%;--y:42%;--r:clamp(230px,27vw,420px);
  min-height:min(calc(100svh - 73px),920px);display:flex;align-items:center;
  padding-block:clamp(56px,7vw,96px);
  background:
    radial-gradient(120% 90% at 70% 30%,#1A1714,transparent 70%),
    repeating-linear-gradient(90deg,rgba(255,236,210,.012) 0 2px,transparent 2px 9px),
    #12100E}
.desk-copy{position:relative;z-index:5;width:100%}
.desk-copy > div{max-width:min(660px,50%)}
/* Die Zeile über der Überschrift gehört zur H1: Leistung und Ort stehen
   so dort, wo Suchmaschinen sie gewichten, ohne den Satz zu verbiegen. */
.where{display:flex;align-items:center;gap:12px;font-family:var(--f-ui);font-size:16px;font-weight:700;
  letter-spacing:0;line-height:1.4;color:var(--acc-ink);margin-bottom:clamp(16px,2vw,24px)}
.where::before{content:"";width:28px;height:2px;background:var(--acc);flex:none}
.desk h1{font-size:clamp(46px,6vw,88px);line-height:.95;letter-spacing:-.038em;margin-top:0;
  text-shadow:0 2px 30px rgba(0,0,0,.6)}
.desk h1 u,.page-hero h1 u{text-decoration:none;color:var(--acc)}
.desk .lede{margin-top:26px;max-width:46ch;color:var(--ink-2);text-shadow:0 1px 18px rgba(0,0,0,.8)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.proof{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
  font-size:16px;line-height:1.55;color:var(--ink-3);max-width:46ch}
.proof b{color:var(--ink);font-weight:700}

/* Der Tisch: Gegenstände absolut im rechten Teil verteilt */
.desk-stage{position:absolute;inset:0;z-index:1;pointer-events:none}
.obj{position:absolute;margin:0;transform:rotate(var(--rot,0deg))}
.obj img{width:100%;display:block}
.obj-screen{padding:7px;border-radius:12px;background:#1C1A17;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 2px 0 rgba(255,236,210,.05) inset}
.obj-screen img{border-radius:6px}
.obj-phone{padding:5px;border-radius:22px;background:#0B0A09;border:1px solid rgba(255,236,210,.08);
  box-shadow:0 26px 50px -16px rgba(0,0,0,.95)}
.obj-phone img{border-radius:17px}
.o-mb{width:clamp(300px,36vw,560px);right:2%;top:9%;--rot:-2.5deg}
.o-mk{width:clamp(250px,28vw,440px);right:27%;bottom:7%;--rot:3.5deg}
.o-ph1{width:clamp(96px,9.5vw,148px);right:5%;bottom:6%;--rot:9deg}
/* Papier liegt hell auf dem dunklen Tisch und fängt das Licht am stärksten */
.o-note{width:clamp(190px,16vw,250px);right:34%;top:12%;--rot:-5deg;
  background:#E8DFCF;color:#2A2218;border-radius:3px;padding:18px 18px 20px;
  box-shadow:0 20px 40px -14px rgba(0,0,0,.85);font-family:var(--f-display)}
.o-note b{display:block;font-weight:800;font-size:15px;letter-spacing:-.01em;margin-bottom:8px;
  border-bottom:2px solid #B9864A;padding-bottom:6px}
.o-note p{font-size:14px;line-height:1.4;font-weight:600;margin-top:6px}
.o-note s{text-decoration-color:#B9864A;text-decoration-thickness:2px}
.o-sketch{width:clamp(140px,12vw,190px);right:8%;bottom:34%;--rot:6deg;opacity:.9}
.o-sketch path,.o-sketch rect,.o-sketch circle,.o-sketch line{fill:none;stroke:#C9BBA4;stroke-width:1.6;stroke-linecap:round}
.o-ring{width:120px;right:21%;top:2%;--rot:0deg;opacity:.5}
.o-ring circle{fill:none;stroke:#5A3E1E;stroke-width:5;stroke-dasharray:220 30 60 40}

/* Randnotizen: erscheinen nur, wenn das Licht auf sie fällt */
.ann{position:absolute;font-family:var(--f-display);font-weight:700;font-size:15.5px;
  letter-spacing:-.01em;color:var(--acc-ink);white-space:nowrap;opacity:var(--o,0);
  display:flex;align-items:center;gap:8px;pointer-events:none}
.ann::before{content:"";width:22px;height:1.5px;background:currentColor}
.ann-1{left:6px;bottom:-34px}
.ann-2{left:6px;bottom:-34px}
.ann-3{left:2px;bottom:-32px;color:var(--acc-ink)}

/* Die Dunkelheit: überall fast schwarz, nur im Kegel klar */
.desk-dark{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle var(--r) at var(--x) var(--y),
    rgba(10,9,8,0) 0%,rgba(10,9,8,.08) 28%,rgba(10,9,8,.62) 58%,rgba(10,9,8,.9) 80%,rgba(10,9,8,.95) 100%)}
/* Das warme Licht selbst */
.desk-glow{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(circle calc(var(--r) * .9) at var(--x) var(--y),
    rgba(255,196,120,.85) 0%,rgba(255,196,120,.25) 50%,rgba(255,196,120,0) 100%)}
/* Lampe und sichtbarer Kegel */
.desk-lamp{position:absolute;inset:0;z-index:3;pointer-events:none;width:100%;height:100%}
.desk-lamp .beam{fill:url(#beamgrad);mix-blend-mode:screen}
.desk-lamp .shade{fill:#2A2622;stroke:rgba(255,236,210,.14);stroke-width:1}
.desk-lamp .bulb{fill:#FFE2B0}
.desk-lamp .cord{stroke:rgba(255,236,210,.18);stroke-width:1.5}

@media(max-width:1020px){
  /* Auf dem Handy liegt der Tisch direkt unter der Überschrift: der
     Blickfang gehört in den ersten Bildschirm, nicht hinter den Text.
     Dafür lösen sich die Textbausteine aus ihrem Rahmen und werden
     einzeln angeordnet. */
  .desk{flex-direction:column;align-items:stretch;min-height:0;padding-top:28px;padding-bottom:36px}
  .desk-copy,.desk-copy > div{display:contents}
  .desk-copy > div > *{position:relative;z-index:5;margin-inline:var(--gut);order:6}
  .desk-copy > div > .where,.desk-copy > div > nav{order:1}
  .desk-copy > div > h1{order:2}
  .desk-copy > div > .lede{order:3}
  .desk-copy > div > .hero-cta,.desk-copy > div > .page-cta{order:4}
  .desk-stage{order:5;margin-top:22px !important}
  .desk-copy > div > .proof,.desk-copy > div > .meta-row{order:6}
  .desk .lede{margin-top:16px}
  .desk-copy > div{max-width:640px}
  .desk-stage{position:relative;inset:auto;height:clamp(380px,92vw,620px);margin-top:36px}
  .o-mb{width:72%;right:3%;top:8%}
  .o-mk{width:58%;right:auto;left:4%;bottom:10%}
  .o-ph1{width:20%;right:6%;bottom:6%}
  .o-note{width:42%;right:auto;left:5%;top:4%;padding:12px 12px 14px}
  .o-note b{font-size:13.5px}.o-note p{font-size:12.5px}
  .o-sketch{display:none}
  .o-ring{right:auto;left:40%;top:46%}
  .ann{font-size:13.5px;white-space:normal;width:max-content;max-width:100%}
  .ann-1,.ann-3{display:none}
}
@media(max-width:560px){.o-note p:last-child{display:none}}

/* ── Leistungen: eine gesetzte Liste statt vier Icon-Kacheln ─── */
.svc{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) auto;
  gap:clamp(14px,3vw,48px);align-items:baseline;padding:clamp(24px,3vw,36px) 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.svc-row h3{transition:color .25s}
.svc-row p{color:var(--ink-2);font-size:17.5px;line-height:1.6;max-width:56ch}
.svc-row .more{font-size:16px;font-weight:700;color:var(--acc-ink);white-space:nowrap;
  display:inline-flex;gap:8px;align-items:center}
.svc-row .more .ar{transition:transform .3s var(--ease)}
.svc-row:hover h3{color:var(--acc-ink)}
.svc-row:hover .more .ar{transform:translateX(4px)}
.svc-row.lead h3{font-size:clamp(28px,3.4vw,44px)}
@media(max-width:820px){
  .svc-row{grid-template-columns:minmax(0,1fr);gap:10px}
}

/* Vorschau unter der Lampe: beim Überfahren einer Zeile schwebt
   ein passendes Bild neben dem Zeiger, von unten warm beleuchtet. */
.svc{position:relative}
.peek{position:absolute;left:0;top:0;z-index:4;width:clamp(240px,23vw,330px);pointer-events:none;
  opacity:0;transform:translate3d(var(--px,0),var(--py,0),0) rotate(-3deg) scale(.94);
  transition:opacity .3s ease,transform .08s linear}
.peek.is-on{opacity:1}
.peek::before{content:"";position:absolute;inset:-40% -30%;z-index:-1;
  background:radial-gradient(closest-side,rgba(224,178,114,.22),transparent)}
.peek-card{display:none;padding:6px;border-radius:12px;background:#1C1A17;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.95)}
.peek-card.is-on{display:block}
.peek-card img{border-radius:7px;width:100%}
.peek-status{padding:18px 18px 16px;font-size:15px;line-height:1.4}
.peek-status b{display:block;font-family:var(--f-display);font-size:16px;margin-bottom:10px;color:var(--ink)}
.peek-status span{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line);color:var(--ink-2)}
.peek-status span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
@media (hover:none),(max-width:1020px){.peek{display:none}}

/* ── Fallstudien: das Licht zeigt, worauf es ankommt ───────────
   Der Screen bleibt stehen, der Text läuft daneben. Zu jedem
   Absatz wandert ein Lichtkegel auf genau die Stelle im Bild,
   von der er erzählt. --sx/--sy/--sr setzt das Skript in Pixeln. */
@property --sx{syntax:"<length>";inherits:true;initial-value:50%}
@property --sy{syntax:"<length>";inherits:true;initial-value:50%}
@property --sr{syntax:"<length>";inherits:true;initial-value:200px}
.case{padding-block:clamp(36px,5vw,72px);border-top:1px solid var(--line)}
.case-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px clamp(24px,4vw,64px);align-items:end}
@media(max-width:820px){.case-head{grid-template-columns:minmax(0,1fr)}}
.case-kind{font-size:16px;font-weight:700;color:var(--acc-ink);grid-column:1/-1}
.case-mark{font-family:var(--f-display);font-weight:800;letter-spacing:-.045em;
  font-size:clamp(56px,9vw,96px);line-height:.88}
.case-sub{font-family:var(--f-display);font-weight:700;letter-spacing:-.022em;
  font-size:clamp(21px,2.2vw,30px);line-height:1.2;max-width:22ch;color:var(--ink-2)}

.story{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:clamp(28px,4.5vw,72px);margin-top:clamp(24px,3vw,40px)}
.story-frame{grid-column:2;grid-row:1;position:sticky;top:clamp(96px,16vh,150px);align-self:start;z-index:2}
.frame-in{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:var(--ar,16/10);
  background:var(--fbg,#111);border:8px solid #1C1A17;box-shadow:0 40px 80px -30px rgba(0,0,0,.95)}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s ease}
.shot.is-on{opacity:1}
.spot{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle var(--sr) at var(--sx) var(--sy),transparent 68%,rgba(224,178,114,.55) 69.5%,transparent 71%),
    radial-gradient(circle var(--sr) at var(--sx) var(--sy),rgba(10,9,8,0) 66%,rgba(10,9,8,.82) 82%);
  transition:--sx .9s var(--ease),--sy .9s var(--ease),--sr .9s var(--ease)}
.spot::after{content:"";position:absolute;inset:0;mix-blend-mode:soft-light;
  background:radial-gradient(circle var(--sr) at var(--sx) var(--sy),rgba(255,196,120,var(--glow,.6)),transparent 70%)}
.frame-count{position:absolute;right:12px;bottom:10px;z-index:3;font-size:14px;font-weight:700;
  color:var(--ink);background:rgba(14,13,11,.8);padding:4px 10px;border-radius:8px;font-variant-numeric:tabular-nums}
.story-steps{grid-column:1;grid-row:1}
/* Inaktive Absätze bleiben lesbar (6:1); hervorgehoben wird der aktive
   über Farbe und einen Messingpunkt, nicht über Ausblenden. */
.step{min-height:min(68vh,560px);display:flex;flex-direction:column;justify-content:center;cursor:pointer}
.step:first-child{min-height:min(52vh,440px);justify-content:flex-start;padding-top:clamp(8px,2vw,24px)}
.step:last-child{min-height:min(56vh,460px)}
.step em{font-style:normal;font-size:15px;font-weight:700;color:var(--ink-3);
  display:flex;align-items:center;gap:10px;transition:color .4s}
.step em::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--line);flex:none;transition:background .4s}
.step p{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--ink-3);margin-top:8px;max-width:40ch;transition:color .4s}
.step.is-on em{color:var(--acc-ink)}
.step.is-on em::before{background:var(--acc)}
.step.is-on p{color:var(--ink)}
.case-foot{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:18px clamp(24px,4vw,56px);
  align-items:start;margin-top:clamp(20px,3vw,36px)}
.case-foot .facts{margin-top:0}
.case-foot .actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.case-foot .tech{margin-top:0;width:100%}
@media(max-width:1020px){
  .story{grid-template-columns:minmax(0,1fr);gap:0}
  .story-frame{grid-column:1;grid-row:auto;top:72px;background:var(--bg);padding-block:12px 14px;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .frame-in{border-width:5px}
  .story-steps{grid-column:1;grid-row:auto}
  .step,.step:first-child,.step:last-child{min-height:38vh;justify-content:flex-start;padding-block:22px 18px}
  .step p{color:var(--ink)}
  .case-foot{grid-template-columns:minmax(0,1fr)}
}

/* Aufgabe und Lösung auf den Projektseiten */
.ql{display:grid;gap:18px;margin-top:24px}
.ql-item{padding:0;background:none;border:0}
.ql-item em{display:block;color:var(--acc-ink);margin-bottom:4px}
.ql-item p{font-size:17px;line-height:1.65;color:var(--ink-2);max-width:58ch}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:26px 0 0;
  border-top:1px solid var(--line)}
.fact{padding:14px 16px 0 0}
.fact dt{margin-bottom:2px}
.fact dd{margin:0;font-family:var(--f-display);font-weight:700;font-size:17px;
  letter-spacing:-.015em;line-height:1.3}

/* Technik auf Nachfrage: wer es wissen will, klappt es auf */
.tech{margin-top:22px;border-top:1px solid var(--line)}
.tech summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:14px 0 4px;font-size:15.5px;font-weight:700;color:var(--ink-2)}
.tech summary::-webkit-details-marker{display:none}
.tech summary::after{content:"+";font-family:var(--f-display);font-size:20px;line-height:1;color:var(--acc)}
.tech[open] summary::after{content:"–"}
.tech summary:hover{color:var(--ink)}
.tech .disc-tags{padding-top:10px}
.disc-tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:14px;font-weight:700;color:var(--ink-2);
  padding:5px 11px;border-radius:8px;background:var(--well);border:1px solid var(--well-brd)}
.tag-strong{color:var(--acc-ink);background:var(--acc-wash);border-color:rgba(224,178,114,.28)}

/* ── Ablauf: Notizzettel auf dem Tisch ─────────────────────────
   Dasselbe Papier wie die Notiz auf der Bühne. Fünf Zettel, leicht
   schräg, mit Klebestreifen. Beim Hereinscrollen fallen sie an
   ihren Platz. */
.notes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);
  margin-top:clamp(34px,4.5vw,60px);align-items:start;list-style:none;padding:0}
.pnote{position:relative;background:#E8DFCF;color:#2A2218;border-radius:3px;
  padding:26px 20px 22px;box-shadow:0 24px 44px -18px rgba(0,0,0,.92);
  --rot:-1.6deg;--dy:0px;transform:rotate(var(--rot)) translateY(var(--dy));
  transition:transform .9s var(--ease)}
.pnote:nth-child(2){--rot:1.3deg;--dy:34px}
.pnote:nth-child(3){--rot:-.8deg;--dy:8px}
.pnote:nth-child(4){--rot:1.8deg;--dy:42px}
.pnote:nth-child(5){--rot:-1.2deg;--dy:14px}
.pnote::before{content:"";position:absolute;top:-11px;left:50%;width:74px;height:22px;
  transform:translateX(-50%) rotate(-3deg);background:rgba(236,226,206,.5);
  border-left:1px dashed rgba(42,34,24,.12);border-right:1px dashed rgba(42,34,24,.12)}
.pnote .n{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(48px,4.4vw,64px);
  line-height:.85;letter-spacing:-.04em;color:#A8793A}
.pnote h3{font-size:21px;line-height:1.15;color:#1E1810;margin-top:12px;letter-spacing:-.02em}
.pnote p{font-size:15.5px;line-height:1.5;color:#463B2E;margin-top:8px}
.pnote .out{margin-top:16px;padding-top:12px;border-top:1.5px dashed rgba(42,34,24,.28);
  font-size:14.5px;line-height:1.4;font-weight:700;color:#2A2218}
.js .notes:not(.on) .pnote{transform:rotate(calc(var(--rot) * 4)) translateY(calc(var(--dy) + 60px))}
.notes .pnote:nth-child(2){transition-delay:.08s}
.notes .pnote:nth-child(3){transition-delay:.16s}
.notes .pnote:nth-child(4){transition-delay:.24s}
.notes .pnote:nth-child(5){transition-delay:.32s}
/* Schräge Zettel dürfen am Rand nicht über die Seite ragen */
#ablauf{overflow-x:clip}
@media(max-width:1100px){
  .notes{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));row-gap:34px;padding-inline:4px}
  .pnote,.pnote:nth-child(n){--dy:0px}
}

/* ── Projekte ─────────────────────────────────────────────── */
.refs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:clamp(14px,1.8vw,22px)}
.refs-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.refs-2{grid-template-columns:minmax(0,1fr)}}
.ref{border-radius:var(--r-lg);padding:12px;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:border-color .25s,background .25s}
.ref:hover{border-color:rgba(224,178,114,.32);background:var(--pane-hi)}
.ref-shot{display:block;flex:none;border-radius:var(--r-md);padding:18px 16px 0;overflow:hidden}
.ref-shot img{width:100%;display:block}
.ref-art{padding:14px 16px;display:grid;place-items:center}
/* Projekte ohne Bildschirmfoto bekommen eine gesetzte Tafel statt
   eines Platzhalters — das sieht gewollt aus, nicht nach Lücke. */
.ref-plate{position:relative;flex:1;min-height:clamp(140px,13vw,180px);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  border-radius:var(--r-md);padding:20px 18px}
.ref-plate em{font-style:normal;font-family:var(--f-display);font-weight:700;font-size:16px;
  letter-spacing:-.015em;color:var(--ink-3);line-height:1.2}
.ref-plate span{font-family:var(--f-display);font-weight:800;letter-spacing:-.035em;line-height:1;
  font-size:clamp(24px,2.4vw,31px);color:var(--acc)}
.ref-body{display:flex;flex-direction:column;gap:8px;padding:18px 10px 8px;margin-top:auto}
.ref-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.ref h3,.ref h4{font-size:20px;letter-spacing:-.02em;line-height:1.2}
.ref p{font-size:16.5px;line-height:1.55;color:var(--ink-2)}
.ref time{white-space:nowrap}
.ref-state{white-space:nowrap;color:var(--acc-ink)}
.soon{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:clamp(22px,3vw,32px);
  padding-top:18px;border-top:1px solid var(--line);font-size:16.5px;color:var(--ink-2)}
.soon b{color:var(--ink);font-weight:700}
.soon a{color:var(--acc-ink);text-underline-offset:3px}
.refs-more{margin-top:clamp(26px,3.5vw,40px)}
.refs-group{margin-top:clamp(36px,5vw,60px)}
.refs-group h2{font-size:clamp(26px,3vw,38px);margin-bottom:clamp(18px,2.4vw,28px)}

/* Projekte: ungleich groß. Über jeder Karte folgt ein kleiner
   Lichtkegel dem Zeiger, der Screen darunter wird hell. */
.refs-feature{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.refs-feature .ref:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  align-items:center;gap:clamp(12px,2vw,28px)}
.refs-feature .ref:first-child .ref-body{margin-top:0;padding:clamp(14px,2vw,28px)}
.refs-feature .ref:first-child h3{font-size:clamp(26px,2.8vw,38px)}
.refs-feature .ref:first-child p{font-size:18px}
@media(max-width:1020px){.refs-feature{grid-template-columns:repeat(2,minmax(0,1fr))}
  .refs-feature .ref:first-child{grid-template-columns:minmax(0,1fr)}}
@media(max-width:680px){.refs-feature{grid-template-columns:minmax(0,1fr)}}
.ref{--mx:50%;--my:30%;isolation:isolate}
.ref::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:radial-gradient(280px circle at var(--mx) var(--my),rgba(255,206,140,.13),transparent 70%);
  opacity:0;transition:opacity .35s ease}
@media (hover:hover){
  .ref .ref-shot img{filter:brightness(.74) saturate(.9);transition:filter .5s ease}
  .ref:hover .ref-shot img,.ref:focus-visible .ref-shot img{filter:none}
  .ref:hover::after{opacity:1}
}

/* ── Unterseiten ──────────────────────────────────────────── */
.page-hero{padding-top:clamp(44px,6vw,84px);padding-bottom:clamp(30px,4vw,52px);
  position:relative;overflow:hidden}
/* Je Disziplin ein eigenes, ruhig gezeichnetes Motiv hinter der Überschrift. */
.motiv{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.55;
  -webkit-mask-image:radial-gradient(110% 100% at 80% 40%,#000 20%,transparent 75%);
  mask-image:radial-gradient(110% 100% at 80% 40%,#000 20%,transparent 75%)}
.page-hero .wrap{position:relative;z-index:1}
.crumbs{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin:0;padding:0;list-style:none;
  font-size:15px;font-weight:700;color:var(--ink-3)}
.crumbs li + li::before{content:"/";margin-right:10px;color:var(--line)}
.crumbs a{text-decoration:none;display:inline-block;padding-block:8px}
.crumbs a:hover{color:var(--acc-ink)}
.page-hero h1{font-size:clamp(40px,6vw,76px);line-height:1;letter-spacing:-.036em;
  margin-top:18px;max-width:16ch}
.page-hero .lede{margin-top:22px;max-width:58ch}
.page-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.meta-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:clamp(32px,4.5vw,54px);
  border-top:1px solid var(--line)}
.meta-row div{padding:16px 18px 0 0}
.meta-row dt{margin-bottom:2px}
.meta-row dd{margin:0;font-family:var(--f-display);font-weight:700;font-size:18px;
  letter-spacing:-.015em;line-height:1.3}

.plate{border-radius:var(--r-lg);padding:clamp(14px,2vw,26px);overflow:hidden}
.plate img{width:100%;border-radius:var(--r-sm);display:block}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:clamp(14px,1.8vw,20px)}
.shots figure{margin:0;border-radius:var(--r-md);padding:10px;overflow:hidden}
.shots img{width:100%;border-radius:10px;display:block}
.shots .shot-tall{display:flex;flex-direction:column}
.shots .shot-tall img{width:auto;height:420px;max-width:100%;object-fit:contain;margin-inline:auto}
.shots figcaption{font-size:15px;color:var(--ink-3);padding:10px 6px 2px}

.split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(26px,3.4vw,52px) clamp(30px,4.5vw,72px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr);gap:28px}}
.prose p + p{margin-top:14px}
.prose{font-size:17.5px;line-height:1.7;color:var(--ink-2);max-width:62ch}
.prose a{color:var(--acc-ink)}

.bullets{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.bullets ul{margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bullets li{list-style:none;display:grid;grid-template-columns:22px 1fr;gap:12px;
  align-items:start;font-size:17px;line-height:1.55;color:var(--ink-2)}
.bullets i{width:22px;height:22px;display:grid;place-items:center;flex:none;color:var(--acc);margin-top:2px}
.bullets i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.bullets a{color:var(--acc-ink)}

/* ── Häufige Fragen ───────────────────────────────────────────
   Natives <details>: klappt ohne Skript auf, ist mit der Tastatur
   bedienbar und wird von Vorlesesoftware richtig angesagt. */
.fragen{display:flex;flex-direction:column;max-width:82ch}
.frage{border-top:1px solid var(--line)}
.frage:last-child{border-bottom:1px solid var(--line)}
.frage summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:18px;
  padding:22px 0;font-family:var(--f-display);font-weight:700;font-size:clamp(19px,1.8vw,22px);
  letter-spacing:-.018em;line-height:1.3;color:var(--ink);transition:color .2s}
.frage summary::-webkit-details-marker{display:none}
.frage summary:hover,.frage[open] summary{color:var(--acc-ink)}
.frage summary i{margin-left:auto;flex:none;width:22px;height:22px;position:relative;margin-top:3px}
.frage summary i::before,.frage summary i::after{content:"";position:absolute;inset:0;margin:auto;
  background:var(--acc);border-radius:2px;transition:transform .3s var(--ease)}
.frage summary i::before{width:14px;height:2px}
.frage summary i::after{width:2px;height:14px}
.frage[open] summary i::after{transform:rotate(90deg) scaleX(0)}
.frage p{padding:0 40px 24px 0;margin-top:-4px;font-size:17.5px;line-height:1.68;
  color:var(--ink-2);max-width:70ch}

/* ── Kundenstimmen ────────────────────────────────────────── */
.voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(16px,2vw,24px)}
.voice{margin:0;border-radius:var(--r-lg);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column}
.voice p{font-size:18px;line-height:1.6;color:var(--ink)}
.voice cite{display:block;margin-top:auto;padding-top:18px;font-style:normal;font-size:16px;font-weight:700;color:var(--acc-ink)}
.voice cite a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:inherit;padding-block:6px}
.voice cite a:hover{color:var(--ink)}
.voice cite span{font-weight:400;color:var(--ink-3)}

/* ── Hosting ──────────────────────────────────────────────── */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,4vw,64px);align-items:start}
@media(max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(26px,4vw,56px)}
@media(max-width:680px){.feats{grid-template-columns:minmax(0,1fr)}}
.feat{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-top:1px solid var(--line)}
.feat b{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.018em}
.feat b a{text-decoration:none;display:inline-block;padding-block:6px}
.feat b a:hover{color:var(--acc-ink)}
.feat span{font-size:16.5px;line-height:1.6;color:var(--ink-2)}

/* ── Hosting: wenn hier das Licht aus ist ───────────────────────
   Der dunkelste Abschnitt der Seite. Statt einer Lampe leuchten
   nur kleine Statuslichter, langsam und gegeneinander versetzt. */
.night{background:#080706;border-block:1px solid var(--line)}
.night h2{max-width:13ch}
.clock{margin-top:22px;font-size:16.5px;color:var(--ink-3)}
.clock b{color:var(--ink);font-variant-numeric:tabular-nums}
.status{display:grid}
.st{display:grid;grid-template-columns:14px minmax(0,1fr);gap:4px 16px;padding:18px 0;border-top:1px solid var(--line)}
.st:last-child{border-bottom:1px solid var(--line)}
.st i{width:10px;height:10px;border-radius:50%;background:var(--ok);margin-top:8px;grid-row:span 2;
  animation:glimm 3.4s ease-in-out infinite}
.st:nth-child(2) i{animation-delay:-.6s}.st:nth-child(3) i{animation-delay:-1.3s}
.st:nth-child(4) i{animation-delay:-2s}.st:nth-child(5) i{animation-delay:-2.6s}.st:nth-child(6) i{animation-delay:-.3s}
@keyframes glimm{0%,100%{opacity:.35}50%{opacity:1}}
.st b{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.018em}
.st span{font-size:16.5px;line-height:1.6;color:var(--ink-2)}

/* ── Kontakt ──────────────────────────────────────────────────
   Am Ende jeder Seite derselbe Block: ein Mensch mit Namen,
   seine Nummer zuerst, eine Stimme eines Kunden daneben. */
.cta{border-radius:clamp(22px,3vw,34px);padding:clamp(26px,4.4vw,60px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,60px);align-items:start}
@media(max-width:900px){.cta{grid-template-columns:minmax(0,1fr)}}
.cta h2{max-width:12ch}
.cta .lede{margin-top:18px}
.who{display:flex;gap:18px;align-items:center;margin-top:28px}
.who-pic{width:84px;height:84px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--well);border:1px solid var(--pane-brd);display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:28px;letter-spacing:-.03em;color:var(--acc)}
.who-pic img{width:100%;height:100%;object-fit:cover}
.who-txt b{display:block;font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.who-txt span{display:block;font-size:16px;line-height:1.5;color:var(--ink-3)}
.who-txt{min-width:0;hyphens:auto;overflow-wrap:break-word}
@media(max-width:400px){.who-pic{width:64px;height:64px;font-size:22px}}
.cta-quote{margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--line)}
.cta-quote p{font-size:17px;line-height:1.6;color:var(--ink-2)}
.cta-quote cite{display:block;margin-top:8px;font-style:normal;font-size:15.5px;font-weight:700;color:var(--ink-3)}
.lines{display:flex;flex-direction:column;gap:10px}
.line{border-radius:var(--r-md);padding:16px 20px;text-decoration:none;
  display:flex;flex-direction:column;gap:2px;transition:border-color .25s,background .25s}
a.line:hover{border-color:rgba(224,178,114,.35);background:var(--pane-hi)}
.line .v{font-family:var(--f-display);font-weight:700;font-size:clamp(19px,1.8vw,23px);letter-spacing:-.02em}
.line.first{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.line.first .k{color:var(--on-acc);opacity:.8}
a.line.first:hover{background:var(--acc-ink);border-color:var(--acc-ink)}
.umkreis{font-size:16px;line-height:1.6;color:var(--ink-3);margin-top:14px}
.umkreis b{color:var(--ink-2);font-weight:700}

/* Über dem Kontakt hängt dieselbe Lampe und leuchtet auf die Nummer */
#kontakt{padding-top:clamp(140px,13vw,180px)}
.cta{position:relative;isolation:isolate;overflow-x:clip}
.cta-lamp{position:absolute;right:calc(23% - 40px);top:-128px;width:80px;height:140px;pointer-events:none}
.cta-lamp .cord{stroke:rgba(255,236,210,.2);stroke-width:1.5}
.cta-lamp .shade{fill:#2A2622;stroke:rgba(255,236,210,.14)}
.cta-lamp .bulb{fill:#FFE2B0}
.cta-beam{position:absolute;top:0;bottom:0;right:calc(23% - 220px);width:440px;z-index:-1;pointer-events:none;
  clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);
  background:linear-gradient(rgba(255,210,150,.12),rgba(255,210,150,0) 85%)}
.cta.lit::after{background:radial-gradient(55% 65% at 77% 0%,rgba(255,200,130,.15),transparent 72%)}
@media(max-width:900px){
  .cta-lamp{right:calc(50% - 40px)}
  .cta-beam{right:calc(50% - 220px)}
  .cta.lit::after{background:radial-gradient(80% 50% at 50% 0%,rgba(255,200,130,.13),transparent 72%)}
}

/* ── Unterseiten: dieselbe Szene ───────────────────────────────
   Leistungs- und Projektseiten bekommen einen eigenen Tisch mit
   Lampe. Die Lage der Gegenstände kommt als Variablen aus build.py:
   --w Breite, --l/--r/--t/--b Abstände, --rot Neigung, dazu die
   Werte mit m- für schmale Bildschirme. */
.desk-sub{min-height:min(calc(100svh - 73px),780px)}
.desk-sub h1{font-size:clamp(42px,5.4vw,78px);margin-top:16px}
.desk-sub .crumbs{position:relative;z-index:1}
.desk-sub .meta-row{margin-top:clamp(24px,3vw,36px)}
.desk-sub .meta-row div{padding-right:14px}
.obj.pos{width:var(--w);left:var(--l,auto);right:var(--r,auto);top:var(--t,auto);bottom:var(--b,auto)}
.obj-plain{filter:drop-shadow(0 30px 40px rgba(0,0,0,.85))}
.obj-card{padding:18px 18px 16px;border-radius:12px;background:#1C1A17;font-size:15px;line-height:1.4;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.95)}
.obj-card b{display:block;font-family:var(--f-display);font-size:17px;margin-bottom:10px;color:var(--ink)}
.obj-card span{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);color:var(--ink-2)}
.obj-card span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.obj.pos .ann{left:6px;bottom:-34px}
.obj.o-note.pos .ann{bottom:-30px;left:2px}
@media(max-width:1020px){
  .obj.pos{width:var(--mw,var(--w));left:var(--ml,var(--l,auto));right:var(--mr,var(--r,auto));
    top:var(--mt,var(--t,auto));bottom:var(--mb,var(--b,auto))}
  .obj.pos.m-hide{display:none}
  .desk-sub .desk-stage{height:clamp(320px,80vw,560px)}
}

/* Hängelampe über der Überschrift: Übersichten, Über uns, Rechtliches */
.page-hero.lamped{padding-top:clamp(150px,15vw,210px)}
.hanging{position:absolute;top:0;left:clamp(150px,30vw,460px);width:0;height:100%;z-index:0;
  transform-origin:0 0;animation:pendel 7s ease-in-out infinite alternate;pointer-events:none}
.hanging svg{position:absolute;left:-45px;top:0;width:90px;height:150px}
.hanging .cord{stroke:rgba(255,236,210,.2);stroke-width:1.5}
.hanging .shade{fill:#2A2622;stroke:rgba(255,236,210,.14)}
.hanging .bulb{fill:#FFE2B0}
.hanging i{position:absolute;top:146px;left:-340px;width:680px;height:min(560px,90%);
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);
  background:linear-gradient(rgba(255,210,150,.13),rgba(255,210,150,0) 88%)}
@keyframes pendel{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
@media(max-width:700px){.hanging{left:62%}}

/* Papier: Notizen, Auftragszettel, Briefe von Kunden */
.paper{position:relative;background:#E8DFCF;color:#2A2218;border-radius:3px;
  box-shadow:0 24px 44px -18px rgba(0,0,0,.92)}
.paper em{display:block;font-style:normal;font-size:14px;font-weight:700;color:#7E5626;margin-bottom:6px}
.paper p{color:#3A3024}
.paper::before{content:"";position:absolute;top:-11px;left:50%;width:74px;height:22px;
  transform:translateX(-50%) rotate(-3deg);background:rgba(236,226,206,.5);
  border-left:1px dashed rgba(42,34,24,.12);border-right:1px dashed rgba(42,34,24,.12)}
.slip{padding:clamp(24px,3vw,36px);transform:rotate(-1deg);max-width:560px}
.slip h2,.slip h3{color:#1E1810;font-size:clamp(22px,2.2vw,28px);margin-bottom:14px}
.slip ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.slip li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:16.5px;line-height:1.5;color:#3A3024;
  padding-bottom:10px;border-bottom:1.5px dashed rgba(42,34,24,.2)}
.slip li:last-child{border-bottom:0;padding-bottom:0}
.slip li i{color:#A8793A;margin-top:2px}
.slip li i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.slip a{color:#7A5320}
.slips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:clamp(30px,4vw,56px);align-items:start}
.slips .slip:nth-child(2){transform:rotate(1.2deg);margin-top:28px}

/* Aufgabe auf Papier, Lösung als Antwort daneben */
.brief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:0}
.brief-task{padding:clamp(26px,3.2vw,40px);transform:rotate(-1.6deg);z-index:1;margin-top:10px}
.brief-task p{font-size:clamp(17px,1.5vw,19px);line-height:1.6}
.brief-answer{padding:clamp(26px,3.2vw,40px);border-radius:var(--r-lg);margin:56px 0 0 -28px;z-index:2}
.brief-answer em{display:block;font-style:normal;font-size:14px;font-weight:700;color:var(--acc-ink);margin-bottom:6px}
.brief-answer p{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--ink)}
@media(max-width:820px){
  .brief{grid-template-columns:minmax(0,1fr)}
  .brief-answer{margin:-12px 6px 0 18px}
}

/* Leichter Lichtschein, der dem Zeiger über Listen folgt */
.torch{--mx:50%;--my:-30%;isolation:isolate}
.torch::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(460px circle at var(--mx) var(--my),rgba(224,178,114,.075),transparent 70%);
  opacity:0;transition:opacity .4s ease}
@media (hover:hover){.torch:hover::before{opacity:1}}
.frage[open]{background:radial-gradient(70% 140% at 0% 0%,rgba(224,178,114,.06),transparent 70%)}

/* Galerie: Screens werden unter dem Zeiger hell */
.lightable{--mx:50%;--my:30%;isolation:isolate;position:relative}
.lightable::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,206,140,.12),transparent 70%);
  opacity:0;transition:opacity .35s ease}
@media (hover:hover){
  .lightable img{filter:brightness(.72) saturate(.9);transition:filter .5s ease}
  .lightable:hover img{filter:none}
  .lightable:hover::after{opacity:1}
}

/* Kundenstimmen als Briefe */
.letters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(28px,3.4vw,48px);align-items:start}
.letter{margin:0;padding:clamp(26px,3vw,36px);transform:rotate(var(--rot,-1.2deg))}
.letter:nth-child(2){--rot:1.4deg;margin-top:34px}
.letter:nth-child(3){--rot:-.6deg;margin-top:12px}
.letter p{font-size:17.5px;line-height:1.6}
.letter cite{display:block;margin-top:18px;font-style:normal;font-family:var(--f-display);font-weight:800;
  font-size:18px;color:#1E1810}
.letter cite span{display:block;font-family:var(--f-ui);font-weight:400;font-size:15px;color:#6A5A44}
.letter cite a{text-decoration:none;color:inherit;display:inline-block;padding-block:4px}
.letter cite a:hover{color:#7A5320}
@media(max-width:700px){.letter:nth-child(n){margin-top:0}}

/* Person unter der Lampe */
.person{position:relative;max-width:860px;padding:clamp(26px,3.4vw,44px);border-radius:var(--r-lg);margin-top:130px}
.person .cta-lamp,.person .cta-lamp{right:auto;left:calc(clamp(26px,3.4vw,44px) + 16px)}
.person .cta-beam{right:auto;left:calc(clamp(26px,3.4vw,44px) + 56px - 220px)}
.person.lit::after{background:radial-gradient(50% 70% at 12% 0%,rgba(255,200,130,.15),transparent 72%)}
@media(max-width:900px){.person .cta-lamp{right:auto;left:calc(clamp(26px,3.4vw,44px) + 16px)}
  .person .cta-beam{right:auto;left:calc(clamp(26px,3.4vw,44px) + 56px - 220px)}
  .person.lit::after{background:radial-gradient(70% 60% at 15% 0%,rgba(255,200,130,.14),transparent 72%)}}
.person .who-pic{width:132px;height:132px;font-size:42px}

/* Breite Karte als erste ihrer Gruppe */
.ref.ref-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;gap:clamp(12px,2vw,28px)}
.ref.ref-wide .ref-body{margin-top:0;padding:clamp(14px,2vw,28px)}
.ref.ref-wide h3{font-size:clamp(24px,2.6vw,34px)}
@media(max-width:820px){.ref.ref-wide{grid-template-columns:minmax(0,1fr)}}

/* ── Oberflächen: so trennen sich die Abschnitte ───────────────
   Raum (Grund), Tischplatte, Papierbahn und Nacht wechseln sich ab.
   Jede Oberfläche kommt aus derselben Szene. */
.band-desk{background:
    repeating-linear-gradient(178.6deg,rgba(255,236,210,.026) 0 2px,transparent 2px 11px),
    repeating-linear-gradient(181deg,rgba(0,0,0,.18) 0 1px,transparent 1px 37px),
    linear-gradient(#18140F,#120F0C);
  box-shadow:inset 0 1px 0 rgba(255,236,210,.10),inset 0 28px 40px -30px rgba(0,0,0,.9),
             inset 0 -28px 40px -30px rgba(0,0,0,.9)}
/* Schräge Zettel und Fotos dürfen nicht über den Seitenrand ragen */
.band-desk{overflow-x:clip}
/* Kante der Tischplatte: eine helle Linie und ein Schattenwurf darunter */
.band-desk::after{content:"";position:absolute;left:0;right:0;top:0;height:10px;pointer-events:none;
  background:linear-gradient(rgba(255,236,210,.05),transparent)}

/* Papierbahn mit gerissenen Kanten. Innen gelten dunkle Schriftfarben. */
.band-paper{
  --ink:#1E1810;--ink-2:#3A3024;--ink-3:#5F503C;--line:rgba(42,34,24,.18);
  --acc:#A8793A;--acc-ink:#7E5626;--pane:#DED3C0;--pane-hi:#D6CAB5;--pane-brd:rgba(42,34,24,.14);
  --well:rgba(42,34,24,.06);--well-brd:rgba(42,34,24,.14);
  background:#E8DFCF;color:var(--ink);margin-block:18px}
.band-paper::before,.band-paper::after{content:"";position:absolute;left:0;right:0;height:16px;background:#E8DFCF;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16V9l7-3 8 4 9-6 9 5 8-5 11 4 8-3 10 6 9-4 9 3 9-5 11 4 9-3 9 6 9-4 9 3 10-4 9 4 9-5 9 4 9-2 9 3v8z'/%3E%3C/svg%3E") 0 0/220px 16px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16V9l7-3 8 4 9-6 9 5 8-5 11 4 8-3 10 6 9-4 9 3 9-5 11 4 9-3 9 6 9-4 9 3 10-4 9 4 9-5 9 4 9-2 9 3v8z'/%3E%3C/svg%3E") 0 0/220px 16px repeat-x}
.band-paper::before{top:-15px}
.band-paper::after{bottom:-15px;transform:scaleY(-1)}
.band-paper h2,.band-paper h3{color:var(--ink)}
.band-paper .frage summary i::before,.band-paper .frage summary i::after{background:var(--acc)}
.band-paper .frage[open]{background:radial-gradient(70% 140% at 0% 0%,rgba(168,121,58,.10),transparent 70%)}
.band-paper .bullets i{color:#8A6230}
.band-paper a{color:var(--acc-ink)}
.band-paper .btn{color:var(--ink);background:rgba(42,34,24,.06);border-color:rgba(42,34,24,.2)}
.band-paper ::selection{background:#1E1810;color:#E8DFCF}
.band-paper :focus-visible{outline-color:#1E1810}

.band-night{background:#080706;border-block:1px solid var(--line)}

/* Kapitelanfang: eine kleine Hängelampe scheint auf die Überschrift */
.sec.chap{padding-top:clamp(132px,12vw,172px);overflow-x:clip}
.chap-lamp{position:absolute;top:0;z-index:0;pointer-events:none;width:60px;height:100px;
  left:max(calc(var(--gut) + 28px),calc((100% - var(--page)) / 2 + var(--gut) + 28px));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'%3E%3Cline x1='30' y1='0' x2='30' y2='70' stroke='%23F0DCC0' stroke-opacity='.22' stroke-width='1.5'/%3E%3Cpath d='M20 70h20l13 26H7z' fill='%232A2622' stroke='%23F0DCC0' stroke-opacity='.15'/%3E%3Cellipse cx='30' cy='95.5' rx='19' ry='3.5' fill='%23FFE2B0'/%3E%3C/svg%3E") no-repeat top/60px 100px}
.chap-lamp::after{content:"";position:absolute;top:98px;left:-230px;width:520px;height:clamp(200px,24vw,300px);
  clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);
  background:linear-gradient(rgba(255,210,150,.12),rgba(255,210,150,0) 90%)}
.chap .wrap{position:relative;z-index:1}
.band-paper .chap-lamp{display:none}

/* ── Was dazugehört: offene Liste, Stichwort links, Erklärung rechts ── */
.tools{border-top:1px solid var(--line)}
.tool{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:6px clamp(20px,4vw,56px);
  padding:clamp(18px,2vw,24px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.tool h3{font-size:clamp(20px,1.9vw,25px);letter-spacing:-.02em}
.tool p{font-size:17.5px;line-height:1.6;color:var(--ink-2);max-width:60ch}
.tool p a{color:var(--acc-ink)}
@media(max-width:760px){.tool{grid-template-columns:minmax(0,1fr)}}

/* ── Fotos auf dem Tisch: verstreut, richten sich auf ─────────── */
.strewn{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:clamp(22px,3vw,40px);padding-block:10px;align-items:start}
.strewn figure{margin:0;padding:10px 10px 0;background:#ECE4D6;border-radius:4px;cursor:zoom-in;
  box-shadow:0 26px 46px -20px rgba(0,0,0,.95);transform:rotate(var(--rot,-2deg));
  transition:transform .45s var(--ease),box-shadow .45s}
.strewn figure:nth-child(3n+2){--rot:1.8deg;margin-top:22px}
.strewn figure:nth-child(3n+3){--rot:-1deg;margin-top:8px}
.strewn figure:hover,.strewn figure:focus-visible{transform:rotate(0) translateY(-8px) scale(1.02);
  box-shadow:0 40px 70px -24px rgba(0,0,0,1),0 0 0 1px rgba(224,178,114,.35)}
.strewn img{width:100%;border-radius:2px;display:block}
.strewn .shot-tall img{width:auto;max-height:380px;margin-inline:auto}
.strewn figcaption{font-family:var(--f-display);font-weight:700;font-size:15.5px;color:#2A2218;padding:10px 4px 12px}
.lightbox{border:0;padding:0;background:transparent;max-width:min(1200px,94vw);max-height:92vh;overflow:visible}
.lightbox::backdrop{background:rgba(6,5,4,.88)}
.lightbox img{max-width:100%;max-height:82vh;width:auto;border-radius:8px;display:block;margin-inline:auto;
  box-shadow:0 40px 90px -30px #000}
.lightbox p{color:var(--ink-2);text-align:center;margin-top:12px;font-size:16px}
.lightbox button{position:absolute;top:-52px;right:0;width:44px;height:44px;border-radius:var(--r-sm);
  background:var(--pane);border:1px solid var(--pane-brd);color:var(--ink);font-size:24px;cursor:pointer}

/* ── Nächstes Projekt ──────────────────────────────────────────── */
.next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center;
  text-decoration:none;color:inherit;position:relative}
.next .lbl{color:var(--acc-ink)}
.next h2{font-size:clamp(48px,7.5vw,96px);letter-spacing:-.045em;line-height:.92;margin-top:10px;transition:color .3s}
.next p{color:var(--ink-2);font-size:clamp(18px,1.6vw,21px);margin-top:16px;max-width:36ch}
.next .go{display:inline-flex;gap:10px;margin-top:24px;font-weight:700;color:var(--acc-ink)}
.next .go .ar{transition:transform .3s var(--ease)}
.next:hover h2{color:var(--acc-ink)}
.next:hover .go .ar{transform:translateX(6px)}
.next-img{position:relative}
.next-img::before{content:"";position:absolute;inset:-12% -6%;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,200,130,.16),transparent)}
.next-img img{filter:drop-shadow(0 30px 40px rgba(0,0,0,.85)) brightness(.85);transition:filter .5s}
.next:hover .next-img img{filter:drop-shadow(0 30px 40px rgba(0,0,0,.85))}
@media(max-width:820px){.next{grid-template-columns:minmax(0,1fr)}}

/* ── Leitmotiv: die Lampe geht an ─────────────────────────────
   Fallstudien und Kontakt bekommen beim Hereinscrollen einen warmen
   Lichtschein von oben, als hinge über ihnen dieselbe Lampe. */
.lit{isolation:isolate}
.lit::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(70% 55% at 50% 0%,rgba(224,178,114,.11),transparent 72%);
  opacity:0;transition:opacity 1.8s ease .15s}
.lit.on::after{opacity:1}

/* ── Fuß ──────────────────────────────────────────────────── */
.foot{padding-block:clamp(44px,5vw,64px) 32px;border-top:1px solid var(--line);margin-top:clamp(20px,3vw,40px)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
.foot .foot-h{margin:0 0 12px;line-height:1.4}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.foot a{text-decoration:none;color:var(--ink-2);font-size:16.5px;display:inline-block;padding-block:5px;transition:color .2s}
.foot a:hover{color:var(--acc-ink)}
.foot p{font-size:16.5px;color:var(--ink-2);max-width:34ch;margin-top:14px}
.legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:6px 24px;font-size:14.5px;color:var(--ink-3)}

/* ── Anrufleiste auf dem Handy ────────────────────────────────
   Unten im Daumenbereich, erscheint nach dem ersten Bildschirm und
   tritt zurück, sobald der Kontaktblock selbst zu sehen ist. */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-callbar);display:none;
  grid-template-columns:1.4fr 1fr;gap:8px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:var(--bg);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .35s var(--ease)}
/* Liegt im Fuß, darf aber dessen Linkstil nicht erben */
.callbar .btn{display:flex;justify-content:center;min-height:52px;padding-block:13px;font-size:16.5px;color:var(--ink)}
.callbar .btn-go{color:var(--on-acc)}
body[data-callbar="1"] .callbar{transform:none}
@media(max-width:760px){
  .callbar{display:grid}
  .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* ── Enthüllung ───────────────────────────────────────────────
   Inhalt ist immer sichtbar. Die Klasse schiebt ihn nur ein kurzes
   Stück nach — wer nichts davon sieht, verpasst nichts. */
.js .rv{transform:translateY(18px);transition:transform .8s var(--ease)}
.js .rv.on{transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0ms !important;
    animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .rv{transform:none}
  .motiv{opacity:.35}
  .hanging{animation:none}
}