/* kazakov.io (D-652)
   Schwarz, weiß, eine Schräge. Die 22.9° sind die Schräge des Schriftzugs -- sie ist das einzige
   Gestaltungsmittel, das hier erfunden wird; alles andere ist Satz, Abstand und Haarlinie.
   Keine Schriftart von fremden Servern (Datenschutz und Tempo), keine Bibliothek. */

:root{
  --ink:#000;
  --paper:#fff;
  --mute:#6E6E73;
  --mute-on-black:#9A9A9F;
  --line:#E3E3E6;
  --line-on-black:#2A2A2E;
  --skew:-22.9deg;
  --pad:clamp(20px, 5vw, 80px);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 clamp(16px,1.05vw,18px)/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;color:#000;padding:10px 14px}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}

/* ---------------------------------------------------------------- Kopfleiste */
.bar{
  position:fixed;inset:0 0 auto;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px var(--pad);
  color:#fff;mix-blend-mode:difference;
  transition:padding .3s ease;
}
.bar.tight{padding:10px var(--pad)}
.bar-logo img{width:clamp(160px,17vw,250px);height:auto}
.bar-nav{display:flex;align-items:center;gap:clamp(14px,2vw,34px);
  font:600 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.bar-nav a{text-decoration:none;opacity:.75;transition:opacity .2s}
.bar-nav a:hover{opacity:1}
.bar-cta{border:1px solid currentColor;padding:10px 16px;opacity:1 !important}
/* Zwei Sprachen, ein Knopf: Er sagt, wohin er führt (DE steht auf der englischen Seite, EN auf der
   deutschen). Am Telefon bleibt er stehen -- die Sprache ist kein Luxus, den man wegklappt. */
.bar-nav .lang{font-weight:700;opacity:.55;padding:10px 2px}
.bar-nav .lang:hover{opacity:1}
@media (max-width:720px){.bar-nav a:not(.bar-cta):not(.lang){display:none}}

/* ---------------------------------------------------------------- Schrägen */
.rays{position:absolute;inset:-20% -30%;z-index:0;pointer-events:none;
  transform:skewX(var(--skew));opacity:.22}
.rays i{position:absolute;top:0;bottom:0;width:1px;background:#fff;
  animation:drift 14s linear infinite}
.rays i:nth-child(1){left:6%}
.rays i:nth-child(2){left:19%;width:3px;animation-duration:19s}
.rays i:nth-child(3){left:31%}
.rays i:nth-child(4){left:44%;width:2px;animation-duration:23s}
.rays i:nth-child(5){left:58%}
.rays i:nth-child(6){left:70%;width:4px;animation-duration:17s}
.rays i:nth-child(7){left:83%}
.rays i:nth-child(8){left:94%;width:2px;animation-duration:26s}
@keyframes drift{
  0%{transform:translateY(-12%);opacity:.25}
  50%{opacity:.9}
  100%{transform:translateY(12%);opacity:.25}
}
.rays.flip{transform:skewX(calc(var(--skew) * -1));opacity:.14}

/* ---------------------------------------------------------------- Satz */
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.035em;line-height:.95;text-transform:uppercase}
/* Die Ueberschrift traegt jetzt drei ganze Saetze (D-658) und nicht mehr drei Brocken --
   dafuer kleiner: 5.4vw statt 8.6, damit jede Zeile ganz bleibt. Gemessen an sechs Breiten. */
/* ---------------------------------------------------------------- Die Zeile (D-660)
   Ein Satz ist erst fertig, wenn er in genau dieser Darstellung richtig bricht: "Mit KI / entwickelt."
   war grammatisch richtig und unlesbar. Überschriften und Unterzeilen werden ausgewogen gebrochen
   (keine Zeile mit einem einzelnen Wort), Fließtext ohne Waise; Knöpfe, Menü und Nummern brechen nie.
   Feste Wendungen ("in Deutschland", "mit KI") hält ein geschütztes Leerzeichen im Text zusammen --
   nie ein ganzer Absatz, das schiebt am Telefon über den Rand. Gemessen von kazakov-break-check.py. */
h1,h2,h3,.lead,.urgency,.eyebrow{text-wrap:balance;hyphens:none}
p,li{text-wrap:pretty}
.btn,.bar-nav a,.foot-nav a,.big a,.chips span{white-space:nowrap}

h1{font-size:clamp(34px,5.4vw,86px);line-height:.95}
/* Am Telefon stehen 320 bis 373 Bildpunkte zur Verfügung; "Software, die sich anpasst." braucht bei
   34px deren 501. Gemessen: 6,9vw lässt die längste ganze Zeile ("In Tagen statt Monaten.") an
   360, 390 und 414 stehen; die erste Zeile bricht einmal, und zwar nach "Software," -- der Rest ist
   im Text zusammengehalten, damit nicht "die" am Zeilenende hängt (D-660). */
h1 em{font-style:normal;display:inline-block;transform:skewX(var(--skew))}
h2{font-size:clamp(32px,5.4vw,82px)}
/* Steht nach h1 UND h2: gleiche Spezifität, die spätere Regel gewinnt -- davor stehend war sie
   für h2 wirkungslos, und die Überschriften zerfielen am Telefon in Einwort-Zeilen (gemessen). */
/* Deckel 34, nicht 36: Bei 601 gibt die Rechnerregel 34 -- ein höherer Telefondeckel wäre an der
   Grenze ein Sprung nach oben, und bei 600 brach damit eine Leistungsseiten-Überschrift. */
@media (max-width:600px){h1{font-size:clamp(24px,6.9vw,34px)}h2{font-size:clamp(26px,7vw,36px)}}
h2 em{font-style:normal;display:inline-block;transform:skewX(var(--skew))}
/* Deckel 21px: Eine Karte im Dreierraster bietet ab 1280 rund 265px, und Versalien in Schwarz
   brauchen 0,7em je Zeichen -- bei 26px brach "Schnell entwickelt." in zwei Zeilen (gemessen 1600). */
h3{font-size:clamp(19px,1.7vw,21px);letter-spacing:-.02em}

.kicker,.eyebrow{margin:0;font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.eyebrow{color:var(--mute);margin-bottom:clamp(18px,3vw,34px)}
.lead{max-width:30em;margin:clamp(22px,3vw,34px) 0 0;font-size:clamp(16px,1.5vw,22px);color:var(--mute-on-black)}
.say{max-width:34em;margin:clamp(20px,3vw,30px) 0 0;color:var(--mute);font-size:clamp(16px,1.3vw,19px)}
.fine{margin:clamp(22px,3vw,34px) 0 0;font:400 13px/1.6 var(--sans);color:var(--mute)}

/* ---------------------------------------------------------------- Knöpfe */
.acts{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(30px,4vw,46px) 0 0}
.btn{display:inline-flex;align-items:center;min-height:54px;padding:0 30px;
  background:#fff;color:#000;text-decoration:none;
  font:700 14px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  transition:transform .2s ease, background .2s ease, color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff}
.btn.ghost:hover{background:#fff;color:#000}
/* dieselben Knöpfe auf weissem Grund */
.btn.solid{background:#000;color:#fff}
.btn.solid:hover{background:var(--ink)}
.btn.line{background:transparent;color:#000;box-shadow:inset 0 0 0 1px #000}
.btn.line:hover{background:#000;color:#fff}

/* ---------------------------------------------------------------- Hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  background:#000;color:#fff;padding:140px var(--pad) 90px;overflow:hidden}
/* Das Kopfbild ist ein Plakat, keine Textspalte: Es darf breiter stehen als der Lesesatz darunter,
   sonst bricht die Ueberschrift auf grossen Schirmen um (gemessen bei 1920 und 2560). */
.hero-in{position:relative;z-index:1;max-width:1440px;margin:0 auto;width:100%}
.ln{display:block;overflow:hidden}
.ln>span{display:block;transform:translateY(100%);animation:up .9s cubic-bezier(.16,1,.3,1) forwards}
.ln:nth-child(2)>span{animation-delay:.08s}
.ln:nth-child(3)>span{animation-delay:.16s}
@keyframes up{to{transform:translateY(0)}}

.scroll{position:absolute;left:var(--pad);bottom:28px;z-index:1;margin:0;
  font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute-on-black);
  display:flex;align-items:center;gap:10px}
.scroll span{display:block;width:34px;height:1px;background:currentColor;transform-origin:left;
  animation:stretch 2.2s ease-in-out infinite}
@keyframes stretch{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(1)}}

/* ---------------------------------------------------------------- Leistungsseiten (D-655)
   Kopf wie das Plakat der Startseite, nur ohne volle Bildschirmhöhe: Die Seite soll lesen lassen,
   nicht beeindrucken. Darunter ein echter Lesesatz -- hier darf erklärt werden. */
.shead{position:relative;background:#000;color:#fff;overflow:hidden;
  padding:clamp(120px,14vw,190px) var(--pad) clamp(50px,7vw,90px)}
.shead .wrap{position:relative;z-index:1;padding:0}
/* Deckel 72px: Die Spalte misst 1080, und "Softwareentwicklung mit KI" braucht bei 80px 1129 (gemessen
   1600). Und weil `.shead h1` spezifischer ist als `h1`, braucht es die Telefonregel von D-660 noch
   einmal -- sonst stehen die Leistungsseiten am Telefon bei 34px, wo die Startseite längst bei 25 ist. */
.shead h1{font-size:clamp(34px,5.6vw,72px);line-height:.95;margin-top:clamp(14px,2vw,22px)}
@media (max-width:600px){.shead h1{font-size:clamp(24px,6.9vw,34px)}}
.shead .kicker a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.shead .lead{max-width:34em}

.prose{max-width:38em;font-size:clamp(17px,1.4vw,20px);line-height:1.65}
.prose p{margin:0 0 1em}
.prose p:last-child{margin-bottom:0}

/* Die Fälle sind eine Liste, keine Kachelwand: Man liest sie von oben nach unten und erkennt sich wieder. */
.cases{list-style:none;margin:clamp(30px,4vw,46px) 0 0;padding:0;max-width:44em}
.cases li{padding:clamp(14px,1.6vw,20px) 0 clamp(14px,1.6vw,20px) 34px;border-top:1px solid var(--line);
  position:relative;font-size:clamp(16px,1.3vw,19px)}
.cases li:last-child{border-bottom:1px solid var(--line)}
/* Der Strich ist die Schräge des Schriftzugs, nicht ein Aufzählungspunkt. */
.cases li:before{content:"";position:absolute;left:4px;top:calc(50% - 7px);width:2px;height:14px;
  background:var(--ink);transform:skewX(var(--skew))}

/* ---------------------------------------------------------------- Abschnitte */
section{position:relative}
.proof,.adv,.work,.how,.cta,.own{padding:clamp(70px,10vw,150px) 0}
.proof{background:#fff;border-bottom:1px solid var(--line)}
.adv{background:#fff}
.work{background:#F5F5F7}
.how{background:#fff}
.cta,.own{background:#000;color:#fff;overflow:hidden}
.own .eyebrow,.own .say,.own .fine{color:var(--mute-on-black)}
.cta .wrap{position:relative;z-index:1}
.cta .eyebrow,.cta .say{color:var(--mute-on-black)}
.cta .fine{color:var(--mute-on-black)}

/* ---------------------------------------------------------------- Beweis: Schlagworte und die eine Zahl */
/* Vier Wörter sagen, was das System führt -- schneller gelesen als jeder Satz. */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(26px,3vw,38px) 0 0;padding:0}
.chips span{padding:9px 16px;border:1px solid var(--line);border-radius:999px;
  font:600 13px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase}
/* Eine Zahl, nicht sechs (D-653): Sie muss in einer Sekunde echten Betrieb beweisen. */
.figure{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:clamp(30px,4vw,46px) 0 0}
.figure b{font:900 clamp(52px,7vw,96px)/1 var(--sans);letter-spacing:-.045em;
  font-variant-numeric:tabular-nums}
.figure span{color:var(--mute);font-size:clamp(15px,1.3vw,18px)}

/* ---------------------------------------------------------------- Vorteile */
.grid{display:grid;gap:1px;margin:clamp(40px,6vw,70px) 0 0;background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid.three{grid-template-columns:minmax(0,1fr)}}
.card{background:#fff;padding:clamp(26px,3vw,40px);transition:background .25s ease, color .25s ease}
.card:hover{background:#000;color:#fff}
.card:hover p{color:#D5D5D8}
.card h3{margin-bottom:12px}
.card p{margin:0;color:var(--mute);font-size:16px}

/* ---------------------------------------------------------------- Werkstück */
.refs{list-style:none;margin:clamp(40px,6vw,70px) 0 0;padding:0;display:grid;gap:clamp(20px,2.4vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.refs li{background:#fff;padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:14px}
.refs p{margin:0;color:var(--mute);font-size:16px;flex:1}
.link{align-self:flex-start;text-decoration:none;font:700 14px/1 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;padding-bottom:4px;border-bottom:2px solid #000;
  transition:transform .2s ease}
.link:hover{transform:translateX(4px)}
.tag{display:inline-block;margin-left:8px;padding:3px 8px;border:1px solid var(--line);
  font:600 10px/1.4 var(--sans);letter-spacing:.14em;color:var(--mute);border-bottom-width:1px}

/* ---------------------------------------------------------------- Ablauf */
.steps{list-style:none;counter-reset:s;margin:clamp(40px,6vw,70px) 0 0;padding:0}
.steps li{display:grid;grid-template-columns:minmax(70px,10%) 1fr;gap:clamp(16px,3vw,50px);
  padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--line);align-items:start}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps b{font:900 clamp(26px,3vw,42px)/1 var(--sans);letter-spacing:-.04em;color:#BDBDC2;
  transform:skewX(var(--skew));display:block}
.steps h3{grid-column:2;margin-bottom:10px}
.steps p{grid-column:2;margin:0;color:var(--mute);max-width:40em}

/* ---------------------------------------------------------------- Kontakt */
.big{margin:clamp(30px,4vw,48px) 0 0;font:900 clamp(24px,4.4vw,62px)/1 var(--sans);letter-spacing:-.035em}
.big a{text-decoration:none;border-bottom:3px solid #fff;padding-bottom:6px;
  display:inline-block;transition:opacity .2s}
.big a:hover{opacity:.6}
.big.small{margin-top:clamp(18px,2vw,26px);font-size:clamp(18px,2.4vw,34px)}
.big.small a{border-bottom-width:2px}

/* ---------------------------------------------------------------- Fuß */
.foot{background:#fff;border-top:1px solid var(--line);padding:clamp(34px,5vw,60px) 0}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,40px)}
.foot-logo{width:clamp(170px,18vw,240px)}
.foot-serv{flex-basis:100%;order:9;padding-top:clamp(16px,2vw,24px);border-top:1px solid var(--line);flex-wrap:wrap;row-gap:10px}
.foot-nav{display:flex;gap:22px;flex-wrap:wrap;font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.foot-nav a{text-decoration:none;color:var(--mute)}
.foot-nav a:hover{color:#000}
.foot-c{margin:0 0 0 auto;font-size:13px;color:var(--mute)}
/* Ein Satz, der die Lage beschreibt, nicht das Angebot -- größer als Kleingedrucktes, kleiner als eine
   Überschrift, und er steht allein (D-654). */
.urgency{margin:clamp(34px,4vw,54px) 0 0;max-width:30em;
  font:700 clamp(17px,1.7vw,24px)/1.35 var(--sans);letter-spacing:-.015em}

/* Eine Zeile, die sagt wer, was und wo -- für Menschen klein, für Maschinen lesbar (D-654). */
.foot-what{flex:1 1 320px;margin:0;font-size:13px;line-height:1.5;color:var(--mute);max-width:46em}

/* ---------------------------------------------------------------- Rechtliches
   Impressum und Datenschutz lesen dasselbe Stylesheet, aber hier liest man, statt zu schauen:
   normale Groß- und Kleinschreibung, eine schmale Spalte, keine Bewegung. */
.legal{max-width:760px;padding-top:clamp(70px,10vw,120px);padding-bottom:clamp(50px,8vw,100px)}
.legal-back{display:inline-block;margin-bottom:clamp(30px,5vw,54px)}
.legal-back img{width:clamp(180px,20vw,240px)}
.legal h1{font-size:clamp(28px,4vw,46px);text-transform:none;letter-spacing:-.03em;margin-bottom:26px}
.legal h2{font-size:clamp(16px,1.5vw,19px);text-transform:none;letter-spacing:-.01em;font-weight:700;
  margin:34px 0 8px}
.legal p{margin:0 0 12px;color:#3A3A3C}
.legal a{color:#000;text-decoration:underline;text-underline-offset:3px}
.legal strong{font-weight:700;color:#000}
/* `.legal-note` ist weg (D-659): Der Kasten trug ausschließlich die interne Notiz „Grundgerüst, vor dem
   ersten bezahlten Auftrag anwaltlich prüfen lassen" -- öffentlich lesbar, bis ein fremder Prüfer sie
   fand. `kazakov-link-check.py` verbietet die Klasse jetzt auf jeder Seite; eine Gestalt dafür
   stehenzulassen lädt nur ein, sie wieder zu benutzen. */
.legal-nav{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:14px}

/* ---------------------------------------------------------------- Auftauchen */
.rise{animation:fade .9s cubic-bezier(.16,1,.3,1) both}
.rise.d1{animation-delay:.1s}
.rise.d2{animation-delay:.3s}
.rise.d3{animation-delay:.45s}
@keyframes fade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.rev{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1)}
.rev.in{opacity:1;transform:none}

/* Wer weniger Bewegung eingestellt hat, bekommt keine -- wie in MERA selbst. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ln>span,.rise,.rays i,.scroll span{animation:none !important;transform:none !important}
  .rev{opacity:1 !important;transform:none !important;transition:none !important}
}

/* Das MERA-Logo in der Referenz (D-665): die einzige Farbe auf der Seite -- das Produkt, nicht die Agentur. */
.ref-logo{margin:0 0 clamp(18px,3vw,30px)}
.ref-logo img{width:clamp(150px,16vw,220px);height:auto}