@font-face{font-family:Inter;src:url(fonts/inter-latin-400-normal.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-latin-500-normal.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-600-normal.woff2)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-700-normal.woff2)format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(fonts/ibm-plex-mono-latin-500-normal.woff2)format('woff2');font-weight:500;font-display:swap}

:root{
  --ink:#1F2226;
  --ink-2:#3B4046;
  --muted:#65685F;
  --accent:#D9480F;
  --accent-dk:#A8360B;
  --paper:#EFEFEC;
  --surface:#FFFFFF;
  --line:#D8D9D3;
  --line-2:#C2C4BC;
  --sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --disp:Archivo,Inter,system-ui,sans-serif;
  --mono:'Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --rail:104px;
  --maxw:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(20px,5vw,52px)}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}

h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0}
h1{font-size:clamp(2.3rem,5.6vw,4.05rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.65rem)}
h3{font-size:1.16rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
p{margin:0 0 1.05em}
.lead{font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.6;color:var(--ink-2);max-width:60ch}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(239,239,236,.93);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:20px;height:74px}
.hdr-logo img{height:34px;width:auto}
.hdr-nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.hdr-nav a{font-size:15px;text-decoration:none;color:var(--ink-2);padding:4px 0;border-bottom:1px solid transparent}
.hdr-nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.hdr-nav a.btn{color:#fff;border:1px solid var(--ink)}
.hdr-nav a.btn:hover{color:#fff;border-color:var(--accent)}
@media(max-width:860px){.hdr-nav .hide-sm{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:16px;font-weight:500;padding:14px 24px;border:1px solid var(--ink);text-decoration:none;background:var(--ink);color:#fff;transition:background .15s,color .15s,border-color .15s;cursor:pointer}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-sm{padding:10px 18px;font-size:15px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- layer rail ---------- */
.sec{border-top:1px solid var(--line);padding-block:clamp(64px,8vw,104px)}
.sec-grid{display:grid;grid-template-columns:var(--rail) 1fr;gap:0}
.rail{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;color:var(--line-2);padding-top:9px;position:relative;user-select:none}
.rail::after{content:"";position:absolute;left:0;top:26px;bottom:-30px;width:1px;background:linear-gradient(var(--line),transparent)}
.rail b{display:block;color:var(--accent);font-weight:500}
.rail span{display:block;color:var(--muted);margin-top:3px;font-size:10.5px}
@media(max-width:820px){
  .sec-grid{grid-template-columns:1fr;gap:0}
  .rail{padding:0 0 20px;display:flex;gap:10px;align-items:baseline}
  .rail::after{display:none}
  .rail span{margin-top:0}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(56px,8vw,104px) clamp(56px,7vw,88px);border-top:0}
/* Text links, Foto rechts. Das Foto steht neben dem gesamten Textblock und
   ist vertikal mittig ausgerichtet. Die Textelemente bleiben direkte Kinder
   des Grids, damit das Foto auf dem Handy zwischen Buttons und Stichpunkten
   einsortiert werden kann. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:clamp(32px,4.5vw,64px);align-items:start}
.hero-grid>*{grid-column:1}
/* Freigestellt (transparentes WebP), ohne Rahmen. Unten steht die Figur auf
   einer orangen Linie - wie ein Bauteil auf dem Druckbett. */
.hero-photo{grid-column:2;grid-row:1 / span 5;align-self:center;margin:0;position:relative}
.hero-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent)}
.hero-photo img{width:100%;height:auto}
.hero h1{font-size:clamp(2.3rem,4.4vw,3.6rem)}
@media(max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-photo{grid-column:1;grid-row:auto;order:1;margin-top:36px;max-width:440px}
  .hero-points{order:2}
}

.hero h1{max-width:16ch}
.hero .lead{margin-top:26px}
.hero-note{margin-top:30px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.hero-points{display:flex;flex-wrap:wrap;gap:10px 28px;margin:34px 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.hero-points li{position:relative;padding-left:16px}
.hero-points li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;background:var(--accent)}

/* ---------- Druckauftrag ---------- */
/*
  Der Druck begleitet die ganze Seite. Er beginnt im Hero und ist genau dann
  fertig, wenn das Kontaktformular ins Bild kommt.

  Zwei Darstellungen teilen sich denselben Fortschritt --p, der am :root haengt:
    ab 1200px    die Bildmarke gross am rechten Rand
    darunter     eine schmale Leiste am Bildschirmrand

  Beide gibt es doppelt: einmal normal, einmal weiss. Die weisse Fassung wird
  per clip-path genau auf die dunklen Abschnitte beschnitten. Dadurch wechselt
  die Marke exakt an der Abschnittskante die Farbe, statt auf halber Strecke
  unsichtbar zu werden - und entspricht dort lengtat-bildmarke-invers.svg.

  Geometrie unveraendert 1:1 aus logo/lengtat-bildmarke.svg:
  Raster 12, Schichthoehe 9, Steg 28, Fuss 72, gesamt 72 x 93.
*/
:root{
  --p:1;                 /* Druckfortschritt 0..1. Ohne JavaScript: fertig */
  --lay:9.677%;          /* Schichthoehe   9/93 */
  --step:12.903%;        /* Raster        12/93 */
  --stem:38.889%;        /* Stegbreite    28/72 */
  --nz-x:0%; --nz-y:0%; --nz-o:0;
}

.print,.strip{position:fixed;top:50%;transform:translateY(-50%);z-index:40;pointer-events:none}
.print-in--inv,.strip-in--inv{position:absolute;inset:0;clip-path:inset(100% 0 0 0)}

/* ---- gross: Bildmarke am rechten Rand ---- */
/* Abstand vom rechten Rand und Breite stehen als Variablen, weil der
   Inhalt weiter unten genau daraus seinen Freiraum berechnet. */
:root{--print-rand:clamp(16px,3.2vw,52px);--print-breite:clamp(186px,17vw,252px)}
.print{right:var(--print-rand);width:var(--print-breite);display:none}
@media(min-width:1200px){.print{display:block}}

.print-head{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--line)}
.print-stage{display:flex;gap:12px;padding-top:18px}
.print-plate{position:relative;flex:1 1 auto;aspect-ratio:72/93}
.print-plate i{
  position:absolute;left:0;
  bottom:calc(var(--i) * var(--step));
  height:var(--lay);
  width:var(--stem);
  background:var(--ink);
  transform-origin:left center;
  /* Jede Schicht bekommt ihr Achtel des Fortschritts und wird von links
     nach rechts extrudiert. */
  transform:scaleX(clamp(0,calc(var(--p) * 8 - var(--i)),1));
}
.print-plate i.f{width:100%;background:var(--accent)}   /* Fuss */

/* Duese: sitzt auf der Schicht, die gerade entsteht */
.print-nozzle{position:absolute;left:var(--nz-x);bottom:var(--nz-y);width:11px;height:15px;margin-left:-5.5px;background:var(--ink-2);opacity:var(--nz-o);clip-path:polygon(0 0,100% 0,66% 100%,34% 100%);transition:bottom .16s ease,opacity .3s ease}
.print-nozzle::before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:34px;margin-left:-.5px;background:var(--line-2)}
.print-nozzle::after{content:"";position:absolute;left:50%;bottom:-3px;width:6px;height:3px;margin-left:-3px;background:var(--accent)}

/* Z-Skala, eine Marke je Schicht */
.print-ticks{position:relative;width:20px;flex:none;margin:0;padding:0;list-style:none}
.print-ticks li{position:absolute;right:0;bottom:calc(var(--i) * var(--step));height:var(--lay);width:100%;display:flex;align-items:center;justify-content:flex-end}
.print-ticks li::before{content:"";width:7px;height:1px;background:var(--line-2);transition:width .16s ease,background .16s ease}
.print-ticks li.on::before{width:100%;background:var(--accent)}

.print-base{height:2px;background:var(--line-2);margin-top:16px;transition:background .45s ease}
.print-meta{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.print-done .print-base{background:var(--accent)}
.print-done .print-meta span:last-child{color:var(--accent)}

/* weisse Fassung fuer dunkle Abschnitte - Bildmarke invers ist komplett weiss */
.print-in--inv .print-plate i,.print-in--inv .print-plate i.f{background:#fff}
.print-in--inv .print-head,.print-in--inv .print-meta{color:#7C8188}
.print-in--inv .print-head{border-bottom-color:#3A3E43}
.print-in--inv .print-base{background:#3A3E43}
.print-in--inv .print-ticks li::before{background:#3A3E43}
.print-done .print-in--inv .print-base{background:var(--accent)}

/* ---- schmal: Leiste am Rand, fuer Handy und Tablet ---- */
.strip{right:7px;width:15px}
@media(min-width:1200px){.strip{display:none}}
.strip-in{display:flex;flex-direction:column;align-items:center;gap:9px}
.strip-n{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.1em;color:var(--muted);writing-mode:vertical-rl}
.strip-bar{display:flex;flex-direction:column-reverse;gap:5px;margin:0;padding:0;list-style:none}
.strip-bar li{
  width:6px;height:15px;background:var(--ink);
  transform-origin:bottom center;
  transform:scaleY(clamp(0,calc(var(--p) * 8 - var(--i)),1));
}
.strip-bar li:nth-child(-n+2){background:var(--accent)}   /* Fuss, unten */
.strip-in--inv .strip-bar li{background:#fff}
.strip-in--inv .strip-n{color:#7C8188}

/* ---- Platz schaffen ---- */
/* Ab 1200px rueckt der Inhalt so weit nach links, dass die Marke daneben
   passt und sie nur noch leicht ueberlappt. Auf breiten Monitoren steht sie
   ohnehin komplett im Seitenrand, dann greift die Regel nicht mehr. */
/* Ab 1200px rueckt der Inhalt so weit nach links, dass die Marke daneben
   frei steht. Der Wert leitet sich aus ihrer eigenen Groesse ab:
   Rand + Breite + 14px Luft, gemessen von der rechten Fensterkante.
   Der Inhaltsrand liegt bei 50vw - 570px von dort entfernt (halbe Fenster-
   breite minus halbe --maxw). Auf breiten Monitoren steht die Marke ohnehin
   komplett im Seitenrand, dann greift die Regel nicht mehr. */
@media(min-width:1200px){
  body.onepager main .wrap,
  body.onepager .ft-in{
    padding-right:max(
      clamp(20px,5vw,52px),
      calc(var(--print-rand) + var(--print-breite) + 14px + 570px - 50vw)
    );
  }
}
/* Darunter laeuft die schmale Leiste am Rand mit - sie braucht wenig Platz,
   darf den Text aber nicht beruehren. */
@media(max-width:1199px){
  body.onepager main .wrap,
  body.onepager .ft-in{padding-right:calc(clamp(20px,5vw,52px) + 20px)}
}

@media(prefers-reduced-motion:reduce){
  /* Kein Scroll-Effekt: die Marke steht sofort fertig da. */
  :root{--p:1 !important}
  .print-nozzle{display:none}
  .print-base,.print-ticks li::before{transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Zitate: O-Toene aus Erstgespraechen ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px;counter-reset:oton;margin-block:0;padding-left:0}
.quotes li{background:var(--paper);padding:28px 26px 30px;list-style:none;font-size:16.5px;line-height:1.55;color:var(--ink-2);position:relative;counter-increment:oton;transition:background .18s ease}
/* Anfuehrungszeichen als stehendes Element statt im Textfluss - dadurch
   bleibt die linke Textkante ueber alle Zitate hinweg buendig. */
.quotes li::before{content:"„";display:block;font-family:var(--disp);font-weight:700;font-size:40px;line-height:.5;height:20px;margin-bottom:16px;color:var(--accent)}
/* Mitlaufende Nummer - greift die Schichtzaehlung der Seite auf. */
.quotes li::after{content:"0" counter(oton);position:absolute;right:22px;top:26px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;color:var(--line-2)}
.quotes li:hover{background:var(--surface)}

/* ---------- Leistungen ---------- */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(370px,1fr));gap:26px;margin-top:48px;counter-reset:svc}
.svc article{background:var(--surface);border:1px solid var(--line);padding:34px 28px 32px;position:relative;counter-increment:svc;transition:border-color .18s ease}
.svc article::before{content:"";position:absolute;inset:-1px -1px auto -1px;height:3px;background:var(--accent)}
.svc article::after{content:"0" counter(svc);position:absolute;right:26px;top:30px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;color:var(--line-2)}
.svc article:hover{border-color:var(--line-2)}
.svc h3{margin-bottom:12px;padding-right:36px}
.svc p{font-size:15.5px;color:var(--ink-2);margin-bottom:16px}
.svc ul{margin:0;padding-left:0;list-style:none;font-size:15px;color:var(--muted)}
.svc li{padding:5px 0 5px 17px;position:relative;line-height:1.5}
.svc li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:2px;background:var(--accent)}

/* Paket Nullserie: die vier Schritte als durchlaufende Schichtfolge */
.pkg{margin-top:26px;border:1px solid var(--ink);background:var(--surface);display:grid;grid-template-columns:minmax(200px,.8fr) 2fr}
@media(max-width:900px){.pkg{grid-template-columns:minmax(0,1fr)}}
.pkg-head{background:var(--ink);color:#EDEDEA;padding:30px 28px}
.pkg-label{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.pkg-head h3{color:#fff;font-size:1.6rem;margin-bottom:10px}
.pkg-head p{margin:0;font-size:15.5px;color:#C3C5C1;line-height:1.5}
.pkg-steps{margin:0;padding:26px 28px;list-style:none;counter-reset:pk;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:18px 26px}
.pkg-steps li{counter-increment:pk;font-size:15px;color:var(--ink-2);line-height:1.5;border-top:1px solid var(--line-2);padding-top:12px}
.pkg-steps b{display:block;font-family:var(--disp);font-weight:600;color:var(--ink);margin-bottom:4px}
.pkg-steps b::before{content:"0" counter(pk) " ";font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;color:var(--accent)}

/* Haekchen-Liste, wiederverwendet in Ablauf und Kontakt */
.ticks{margin:0;padding:0;list-style:none}
.ticks li{position:relative;padding:6px 0 6px 20px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:2px;background:var(--accent)}

/* ---------- Anwendungen ---------- */
.apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px 26px;margin-top:44px;counter-reset:ap}
.apps>div{border-top:1px solid var(--line-2);padding-top:16px;counter-increment:ap}
.apps h3{font-size:1.05rem;margin-bottom:6px}
.apps h3::before{content:"0" counter(ap);display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;color:var(--accent);margin-bottom:8px}
.apps p{font-size:15px;color:var(--ink-2);margin:0;line-height:1.55}
.note{margin:40px 0 0;padding:18px 22px;border-left:3px solid var(--accent);background:var(--surface);font-size:15.5px;color:var(--ink-2);max-width:72ch}

/* ---------- Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:48px;border:1px solid var(--line);background:var(--line);gap:1px;counter-reset:st}
.steps article{background:var(--paper);padding:34px 26px 32px;position:relative;counter-increment:st}
/* Der Balken oben waechst von Schritt zu Schritt - dieselbe Logik wie beim
   Druckauftrag: man sieht, wie weit die Zusammenarbeit gediehen ist. */
.steps article::before{content:"";position:absolute;left:0;top:0;height:3px;background:var(--accent)}
.steps article:nth-child(1)::before{width:33.33%}
.steps article:nth-child(2)::before{width:66.66%}
.steps article:nth-child(3)::before{width:100%}
.steps .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--accent);text-transform:uppercase;margin-bottom:16px;display:flex;align-items:baseline;gap:9px}
.steps .n::before{content:"0" counter(st);font-size:26px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.steps h3{margin-bottom:9px}
.steps p{font-size:15.5px;color:var(--ink-2);margin:0}
.deliver{margin-top:44px;max-width:72ch}
.deliver h3{margin-bottom:12px}
.deliver .ticks{font-size:16px;color:var(--ink-2)}
.deliver>p{margin:16px 0 0;font-size:15.5px;color:var(--muted)}

/* ---------- Ueber mich ---------- */
.about{display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:clamp(28px,4vw,48px);align-items:start;margin-top:32px}
@media(max-width:820px){.about{grid-template-columns:1fr}}
.portrait{margin:0;max-width:320px}
.portrait img{width:100%;height:auto;aspect-ratio:8/9;object-fit:cover;border:1px solid var(--line);background:var(--surface)}
.portrait figcaption{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:10px;padding-top:10px;border-top:2px solid var(--accent)}
.about .lead{font-size:clamp(1.02rem,1.5vw,1.16rem)}
.about .lead:last-child{margin-bottom:0}

/* ---------- Zahlen zur Person ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:26px;margin-top:48px}
.facts>div{border-top:1px solid var(--line-2);padding-top:18px}
.facts .k{font-family:var(--disp);font-weight:700;font-size:2.7rem;line-height:1;letter-spacing:-.03em}
.facts .v{font-size:15px;color:var(--ink-2);margin-top:12px;line-height:1.5}

/* ---------- proof / dark band ---------- */
.band{background:var(--ink);color:#EDEDEA;border-top:0}
.band h2{color:#fff}
.band .rail{color:#4A4F55}
.band .rail b{color:var(--accent)}
.band .rail span{color:#7C8188}
.band .rail::after{background:linear-gradient(#3A3E43,transparent)}
.band .lead{color:#C3C5C1}
.band .todo{border-color:#3A3E43;background:#26292E;color:#C3C5C1}
.band .todo b{color:#fff}

.todo{border:1px dashed var(--line-2);background:var(--surface);padding:24px 26px;margin-top:34px;font-size:15.5px;color:var(--muted)}
.todo b{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:9px;font-weight:500}

/* ---------- Referenzen (auf dunklem Band) ---------- */
.refs{display:grid;gap:26px;margin-top:44px}
.ref{border:1px solid #3A3E43;background:#26292E;display:grid;grid-template-columns:minmax(220px,.85fr) 1.6fr;position:relative}
.ref::before{content:"";position:absolute;inset:-1px -1px auto -1px;height:3px;background:var(--accent)}
.ref-head{padding:30px 28px;border-right:1px solid #3A3E43;grid-row:span 2}   /* Trennlinie laeuft bis unter das Rechenbeispiel */
.ref-no{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.ref-meta{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#7C8188;line-height:1.7;margin:0 0 16px}
.ref h3{color:#fff;font-size:1.3rem;line-height:1.22}
.ref-kpi{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.ref-kpi li{font-size:14px;color:#C3C5C1;border-top:1px solid #3A3E43;padding-top:10px;line-height:1.35}
.ref-kpi b{display:block;font-family:var(--disp);font-weight:700;font-size:1.85rem;color:#fff;letter-spacing:-.02em;line-height:1.05;margin-bottom:3px}
.ref-body{margin:0;padding:30px 28px}
.ref-body dt{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#7C8188;margin-top:20px}
.ref-body dt:first-child{margin-top:0}
.ref-body dd{margin:6px 0 0;font-size:15.5px;line-height:1.6;color:#D6D8D4}
.ref-calc{grid-column:2;margin:0 28px 30px;border-left:3px solid var(--accent);background:var(--ink);padding:18px 20px}
.ref-calc-label{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.ref-calc p{margin:0;font-size:15px;color:#D6D8D4}
.ref-calc-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 22px;margin:14px 0 12px}
.ref-calc-row span{font-family:var(--disp);font-weight:700;font-size:1.75rem;color:#fff;letter-spacing:-.02em;line-height:1}
.ref-calc-row small{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#7C8188;margin-bottom:6px}
.ref-calc-row .ref-calc-arrow{color:var(--accent);font-size:1.4rem;padding-bottom:2px}
.ref-calc .ref-calc-note{font-size:13px;color:#9DA2A8;line-height:1.5}
@media(max-width:900px){
  .ref{grid-template-columns:minmax(0,1fr)}
  .ref-head{border-right:0;border-bottom:1px solid #3A3E43;grid-row:auto}
  .ref-kpi{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .ref-calc{grid-column:1;margin:0 20px 24px}
  .ref-head,.ref-body{padding:24px 20px}
}

/* ---------- faq ---------- */
.faq{margin-top:44px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:20px 40px 20px 0;font-family:var(--disp);font-weight:600;font-size:1.04rem;letter-spacing:-.01em;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:17px;font-family:var(--mono);font-size:21px;color:var(--accent);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 22px;font-size:16px;color:var(--ink-2);max-width:68ch}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- contact ---------- */
.ct{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);margin-top:44px}
@media(max-width:820px){.ct{grid-template-columns:1fr}}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;font-weight:500}
.field input,.field textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);padding:12px 14px;border-radius:0}
.field input:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.field textarea{min-height:132px;resize:vertical}
/* Honigtopf gegen Spam-Bots: fuer Menschen unsichtbar, siehe kontakt.php */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:22px}
.consent input{margin-top:4px;flex:0 0 auto;accent-color:var(--accent)}
.form-note{font-size:14px;color:var(--muted);margin:14px 0 0;line-height:1.5}
.ask{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin-top:36px}
.ask>div{border-top:3px solid var(--accent);background:var(--surface);padding:22px 24px 20px}
.ask h3{margin-bottom:8px}
.ask .ticks{font-size:15.5px;color:var(--ink-2)}
.ct-info dl{margin:0}
.ct-info dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:22px;font-weight:500}
.ct-info dd{margin:5px 0 0;font-size:17px}
.ct-info dd a{text-decoration:none;border-bottom:1px solid var(--line-2)}
.ct-info dd a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- footer ---------- */
.ft{background:var(--ink);color:#9DA2A8;font-size:14.5px;padding-block:44px}
.ft-in{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.ft img{height:30px;width:auto}
.ft nav{display:flex;gap:24px}
.ft a{color:#C3C5C1;text-decoration:none}
.ft a:hover{color:var(--accent)}
.ft-copy{margin:0;font-size:13.5px;color:#7C8188;flex-basis:100%}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:#fff;padding:10px 16px}

/* ---------- Rechtstexte ---------- */
.legal{padding-block:clamp(52px,7vw,88px)}
.legal .inner{max-width:75ch}
.legal h1{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:34px}
.legal h2{font-size:1.32rem;font-weight:600;margin:44px 0 14px}
.legal h3{font-size:1.04rem;margin:28px 0 10px}
.legal p,.legal li{font-size:16px;color:var(--ink-2)}
.legal ul{padding-left:20px}
.legal li{margin-bottom:7px}
.legal a{color:var(--accent)}
.legal dl{margin:0 0 18px}
.legal dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:18px;font-weight:500}
.legal dd{margin:5px 0 0;font-size:16.5px}
.legal .todo{margin:14px 0 24px}
.back{display:inline-block;margin-bottom:30px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.back:hover{color:var(--accent)}

/* ---------- Druckausgabe / PDF ---------- */
/*
  Gilt fuer "Drucken" im Browser und fuer den PDF-Export. Drei Dinge muessen
  hier geradegerueckt werden, sonst fehlt im PDF Inhalt:

  1. Zugeklappte FAQ-Antworten wuerden gar nicht erst ausgegeben.
  2. Hintergruende druckt der Browser standardmaessig nicht mit - der dunkle
     Referenzabschnitt haette dann weisse Schrift auf weissem Papier.
  3. Der Freiraum fuer den Druckauftrag am Rand wird nicht mehr gebraucht,
     weil der Effekt auf Papier ohnehin entfaellt.
*/
@page{size:A4;margin:14mm}

@media print{
  .print,.strip,.skip,.hdr-nav{display:none !important}
  .hdr{position:static;background:none;backdrop-filter:none}
  body{background:#fff}

  /* Freiraum fuer die Marke zuruecknehmen */
  body.onepager main .wrap,
  body.onepager .ft-in{padding-right:clamp(20px,5vw,52px) !important}

  /* Alle FAQ-Antworten ausgeben, auch die zugeklappten. Chrome versteckt
     den Inhalt ueber ::details-content - ein display auf dem Kind allein
     reicht dafuer nicht aus. */
  .faq details::details-content{content-visibility:visible !important;display:block !important;opacity:1 !important}
  .faq details>.ans{display:block !important}
  .faq summary::after{display:none}

  /* Dunkle Flaechen hell setzen, damit die Schrift sichtbar bleibt */
  .band,.ft{background:#fff !important;color:var(--ink-2) !important;border-top:1px solid var(--line)}
  .band h2{color:var(--ink) !important}
  .band .lead{color:var(--ink-2) !important}
  .band .rail,.band .rail span{color:var(--muted) !important}
  .band .rail::after{background:var(--line) !important}
  .band .todo{background:#fff !important;border-color:var(--line-2) !important;color:var(--muted) !important}
  .band .todo b{color:var(--accent) !important}
  .ft a{color:var(--ink-2) !important}

  /* Referenzen hell setzen */
  .ref,.ref-calc{background:#fff !important;border-color:var(--line-2) !important}
  .ref-head{border-color:var(--line) !important}
  .ref h3,.ref-kpi b,.ref-calc-row span{color:var(--ink) !important}
  .ref-body dd,.ref-kpi li,.ref-calc p{color:var(--ink-2) !important}
  .ref-kpi li{border-color:var(--line) !important}
  .ref{break-inside:avoid}

  /* Umbrueche: zusammengehoerige Bloecke nicht auseinanderreissen */
  .svc article,.steps article,.quotes li,.faq details,.facts>div,
  .apps>div,.pkg,.ask>div,.portrait,.deliver{break-inside:avoid}
  .pkg-head{background:#fff !important;color:var(--ink-2) !important;border-bottom:1px solid var(--line)}
  .pkg-head h3{color:var(--ink) !important}
  .pkg-head p{color:var(--ink-2) !important}
  h1,h2,h3{break-after:avoid}
  .sec{padding-block:20px}
}