/* Entwürfe für kreov.de/neu. Gemeinsame Grundlage der drei Hero-Varianten.
   Schrift: das Systemschriftbild. Auf iPhone und Mac ist das SF Pro,
   dieselbe Schrift wie auf apple.com, ohne einen einzigen Download. */
:root{
  --tinte:#1d1d1f; --grau:#6e6e73; --grau-hell:#86868b;
  --papier:#fbfbfd; --flaeche:#f5f5f7; --linie:#d2d2d7;
  --marker:#F7D046;
  --schrift:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;
  --weich:cubic-bezier(.16,1,.3,1);
  /* Raster in 8 px: jeder Abstand ist ein Vielfaches davon. */
  --r1:8px; --r2:16px; --r3:24px; --r4:32px; --r6:48px; --r8:64px; --r12:96px;
  --rand:clamp(20px,5vw,48px);
  --breite:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--papier)}
body{background:var(--papier);color:var(--tinte);font-family:var(--schrift);
  font-size:17px;line-height:1.47;letter-spacing:-.022em}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}

/* Kopf: durchscheinend wie bei Apple, 52 px hoch. */
.kopf{position:fixed;inset:0 0 auto 0;z-index:20;height:52px;
  background:rgba(251,251,253,.72);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06)}
.kopf-innen{max-width:var(--breite);height:100%;margin:0 auto;padding:0 var(--rand);
  display:flex;align-items:center;justify-content:space-between}
.kopf img{height:18px;width:auto}
.kopf nav{display:flex;gap:var(--r3);font-size:14px;letter-spacing:-.01em;color:var(--tinte)}
.kopf nav a{min-height:44px;display:inline-flex;align-items:center;opacity:.8;transition:opacity .2s}
.kopf nav a:hover{opacity:1}

/* Apple-Staffel: Eyebrow 21 · Titel 80/48 · Unterzeile 28/21. */
.eyebrow{font-size:clamp(17px,1.6vw,21px);font-weight:600;letter-spacing:-.01em;color:var(--grau-hell);margin-bottom:var(--r2)}
.titel{font-size:clamp(44px,7.4vw,88px);line-height:1.05;font-weight:700;letter-spacing:-.035em}
.unter{font-size:clamp(19px,2.2vw,28px);line-height:1.21;font-weight:500;letter-spacing:-.02em;color:var(--grau);
  margin-top:var(--r3);max-width:34ch}
.stark{position:relative;white-space:nowrap;z-index:0}
.stark::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.08em;height:.34em;z-index:-1;
  background:var(--marker);border-radius:.08em;transform:scaleX(0);transform-origin:left;
  animation:markieren .9s var(--weich) 1.1s forwards}
@keyframes markieren{to{transform:scaleX(1)}}

.knoepfe{display:flex;gap:var(--r3);align-items:center;flex-wrap:wrap;margin-top:var(--r4)}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--r3);
  border-radius:980px;background:var(--tinte);color:#fff;font-size:17px;font-weight:500;letter-spacing:-.01em;
  transition:transform .3s var(--weich),background .2s}
.knopf:hover{background:#000}
.knopf:active{transform:scale(.97)}
.link{font-size:17px;font-weight:500;color:var(--tinte);min-height:48px;display:inline-flex;align-items:center;gap:4px}
.link span{transition:transform .3s var(--weich)}
.link:hover span{transform:translateX(3px)}

/* Einblenden Zeile für Zeile: hoch, unscharf zu scharf. */
.zeile{display:block;opacity:0;transform:translateY(24px);filter:blur(8px);
  animation:rein 1.1s var(--weich) forwards}
@keyframes rein{to{opacity:1;transform:none;filter:none}}

/* Leistungen als ruhige Zeile unter dem Hero. */
.leistungen{max-width:var(--breite);margin:0 auto;padding:var(--r8) var(--rand) var(--r12);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--r3);border-top:1px solid var(--linie)}
.leistungen div{font-size:17px;font-weight:600}
.leistungen small{display:block;font-size:15px;font-weight:400;color:var(--grau);margin-top:4px;letter-spacing:-.01em}

.hinweis{font-size:12px;color:var(--grau-hell);letter-spacing:0}

/* Fuß: hell, kein schwarzes Band mehr. */
.fuss{background:var(--flaeche);color:var(--grau);font-size:12px;letter-spacing:-.01em}
.fuss-innen{max-width:var(--breite);margin:0 auto;padding:var(--r3) var(--rand) calc(var(--r3) + env(safe-area-inset-bottom));
  display:flex;justify-content:space-between;gap:var(--r2);flex-wrap:wrap;align-items:center}
.fuss a{min-height:44px;display:inline-flex;align-items:center}
.fuss nav{display:flex;gap:var(--r3)}

@media (max-width:640px){
  .leistungen{grid-template-columns:1fr;gap:var(--r3)}
  .kopf nav a:not(:last-child){display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .zeile{opacity:1;transform:none;filter:none}
  .stark::after{transform:none}
}

/* Die Knopfzeile blendet mit ein, bleibt aber eine Zeile mit Abstand. */
.knoepfe.zeile{display:flex}