/* =========================================================
   Jonas Niemann — Webseiten & Online-Marketing, Esslingen
   Plain CSS. Keine Frameworks.
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --black:      #0a0a0a;
  --page-bg:    #0d0d0d;
  --white:      #ffffff;
  --grey-100:   #f4f4f4;
  --grey-200:   #e9e9e9;
  --grey-300:   #dcdcdc;
  --grey-line:  #e2e2e2;
  --grey-text:  #6d6d6d;
  --grey-soft:  #9a9a9a;

  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Innenabstand der weißen Karte — links/rechts */
  --gutter: clamp(20px, 7.5vw, 145px);
  /* Außenabstand der Karte zum Fensterrand */
  --frame: 24px;
  --radius-card: 44px;
  --radius-img: 6px;

  --fs-nav: 15px;
  --fs-body: 16px;
  --fs-small: 13px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--page-bg);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  color:var(--black);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,ul{ margin:0; }
ul{ list-style:none; padding:0; }
::selection{ background:var(--black); color:var(--white); }

/* ---------- 3. PAGE CARD ---------- */
.page{
  background:var(--white);
  border-radius:var(--radius-card);
  margin:var(--frame);
  position:relative;
  /* "clip" statt "hidden": beschneidet die runden Ecken, erzeugt aber keinen
     Scroll-Container — sonst funktioniert die sticky Navigation nicht. */
  overflow:clip;
}

/* ---------- 4. TYPO HELPERS ---------- */
.section{ padding: clamp(80px, 11vw, 170px) var(--gutter); }

.section__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.6rem, 8.2vw, 7.2rem);
  line-height:0.92;
  letter-spacing:-0.01em;
  text-transform:uppercase;
  margin-bottom:clamp(48px, 6vw, 90px);
}
.section__title--center{ text-align:center; }

.eyebrow{
  display:inline-block;
  font-size:var(--fs-small);
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--grey-text);
  margin-bottom:20px;
}
.eyebrow--light{ color:rgba(255,255,255,.5); }

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  font-weight:600;
  line-height:1;
  padding:14px 22px;
  border-radius:100px;
  white-space:nowrap;
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.btn .arrow{ display:inline-block; transition:transform .25s ease; }
.btn:hover .arrow{ transform:translateX(4px); }
.btn--dark{ background:var(--black); color:var(--white); }
.btn--dark:hover{ background:#262626; }
.btn--light{ background:var(--white); color:var(--black); }
.btn--light:hover{ background:var(--grey-200); }

/* ---------- 6. NAV ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--white);
  transition:box-shadow .3s ease;
}
.nav.is-stuck{ box-shadow:0 1px 0 rgba(0,0,0,.07); }
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:26px var(--gutter);
}
.nav__logo{
  font-size:19px;
  font-weight:700;
  letter-spacing:-0.02em;
  flex-shrink:0;
}
.nav__links{
  display:flex;
  align-items:center;
  gap:34px;
  font-size:var(--fs-nav);
  font-weight:400;
}
.nav__links a{
  position:relative;
  padding-bottom:3px;
  transition:opacity .2s ease;
}
.nav__links a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.nav__links a:hover::after,
.nav__links a.is-active::after{ transform:scaleX(1); }
.nav__cta{ flex-shrink:0; }

.nav__burger{
  display:none;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--black);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.nav__burger span{
  display:block;
  width:18px; height:2px;
  background:var(--white);
  border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
.nav__burger.is-open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* ---------- 7. HERO ---------- */
.hero{
  padding:clamp(30px, 4vw, 55px) var(--gutter) clamp(50px, 6vw, 90px);
  --hero-img-w: clamp(150px, 15vw, 240px);
  --fs-hero-note: 12px;
}
/* Die Headline füllt die volle Breite; Bild und Notiz liegen in den
   Ecken, die die Treppe frei lässt. cqi misst diesen Block, nicht das Fenster. */
.hero__grid{
  position:relative;
  container-type:inline-size;
  --h1: clamp(2.2rem, 8.2vw, 12rem);      /* Fallback ohne Container-Queries */
  --h1: clamp(2.2rem, 12cqi, 12rem);
  --step: 1.3em;                          /* Stufentiefe der Treppe */
}
.hero__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--h1);
  /* Zeilenabstand: unter ca. 1.10 stoßen die Umlautpunkte von Ü/Ä
     in die schwarze Zeile darüber und wirken abgeschnitten. */
  line-height:1.18;
  letter-spacing:-0.015em;
  text-transform:uppercase;
  margin:0;
}
.hero__title .line{ display:block; white-space:nowrap; }

/* Treppe: jede Zeile rückt um --step weiter nach rechts */
.hero__title .line--1{ padding-left:0; }
.hero__title .line--2{ padding-left:var(--step); }
.hero__title .line--3{ padding-left:calc(var(--step) * 2); }

/* Unten links, in der Lücke die die Treppe frei lässt */
.hero__note{
  position:absolute;
  left:0;
  bottom:calc(var(--h1) * 0.26);
  width:min(calc(var(--h1) * 2 - 40px), 280px);
  font-size:var(--fs-hero-note);
  line-height:1.5;
  color:var(--black);
  margin:0;
}

/* Sitzt rechts in der Treppenlücke und überbrückt Zeile 1 und 2:
   top = eine Zeilenhöhe (= Kante zwischen den Reihen), dann auf die
   eigene Mitte zurückgezogen. Die Breite ergibt sich aus dem Rest,
   den die längste der beiden Zeilen (4.89em) übrig lässt. */
.hero__meta{
  position:absolute;
  right:0;
  top:calc(var(--h1) * 1.18);
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  margin:0;
  width:min(calc(100% - var(--h1) * 5.3), 380px);
}
.hero__meta-img{
  border-radius:3px;
  overflow:hidden;
  background:var(--grey-200);
}
.hero__meta-img img{
  width:100%;
  aspect-ratio: 1400 / 823;
  object-fit:cover;
}
/* Beschriftung als Leiste unter dem Bild */
.hero__meta-text{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--grey-line);
  font-size:var(--fs-hero-note);   /* exakt so groß wie die Notiz unten links */
  line-height:1.5;
}
.hero__meta-place{ font-weight:400; }
.hero__meta-sub{ color:var(--grey-text); }

/* ---------- 8. FULL BLEED IMAGE ---------- */
.bleed{
  background:var(--grey-200);
  overflow:hidden;
}
.bleed img{
  width:100%;
  height:clamp(320px, 56vw, 720px);
  object-fit:cover;
  /* 80 % statt 35 %: schiebt den Ausschnitt nach unten, sodass der untere
     Teil des Fotos im Band sichtbar ist. */
  object-position:center 50%;
}

/* ---------- 9. STATEMENT ---------- */
.statement{
  padding:clamp(80px, 11vw, 170px) var(--gutter);
  display:flex;
  flex-direction:column;
  gap:34px;
}
.statement__text{
  font-size:clamp(1.35rem, 2.75vw, 2.45rem);
  line-height:1.32;
  letter-spacing:-0.015em;
  font-weight:400;
}

/* ---------- 10. TICKER ---------- */
.ticker{
  border-top:1px solid var(--grey-line);
  border-bottom:1px solid var(--grey-line);
  padding:22px 0;
  overflow:hidden;
  white-space:nowrap;
}
.ticker__track{
  display:inline-flex;
  align-items:center;
  gap:0;                     /* Abstände liegen IN der Gruppe, sonst stimmt der Umlauf nicht */
  font-family:var(--font-display);
  font-size:clamp(1.2rem, 2.4vw, 2rem);
  text-transform:uppercase;
  letter-spacing:0.01em;
  animation:marquee 46s linear infinite;
  will-change:transform;
}
.ticker__group{
  display:inline-flex;
  align-items:center;
  gap:26px;
  padding-right:26px;        /* damit jede Gruppe exakt gleich breit ist */
  flex-shrink:0;
}
.ticker__track .dot{ color:var(--grey-soft); }

/* Genau eine von drei Gruppen — danach steht Gruppe 2 dort, wo Gruppe 1 war */
@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-33.3333%); }
}

/* ---------- 11. PROJEKTE ---------- */
.projects .section__title{ margin-bottom:clamp(40px, 5vw, 70px); }

.project{
  display:grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap:clamp(30px, 5vw, 80px);
  align-items:start;
  padding:clamp(40px, 5vw, 70px) 0;
}
.project + .project{ border-top:1px solid var(--grey-line); }

.project__info{ padding-top:clamp(0px, 3vw, 60px); }
.project__name{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.6rem, 2.6vw, 2.3rem);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:-0.005em;
  margin-bottom:18px;
}
.project__desc{
  font-size:var(--fs-small);
  line-height:1.6;
  color:var(--black);
  max-width:38ch;
  margin-bottom:34px;
}
.project__tags{ margin-bottom:34px; }
.project__tag-main{
  display:block;
  font-size:var(--fs-small);
  font-weight:600;
  margin-bottom:6px;
}
.project__tag-list{
  display:block;
  font-size:var(--fs-small);
  color:var(--grey-text);
}
.project__img{
  border-radius:var(--radius-img);
  overflow:hidden;
  background:var(--grey-200);
}
.project__img img{
  width:100%;
  aspect-ratio: 16 / 11;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.project:hover .project__img img{ transform:scale(1.035); }

/* Einzelprojekt mit Geräte-Mockups */
.project--solo{
  grid-template-columns: 0.8fr 1.2fr;
  gap:clamp(28px, 3vw, 48px);   /* enger als sonst — der Platz geht an beide Spalten */
  align-items:center;      /* Textspalte mittig zu beiden Geräten */
  padding-top:0;
  padding-bottom:0;        /* Abstand zu "Meine Leistungen" = normaler Section-Abstand */
}
.project__desc + .project__desc{ margin-top:-18px; }

/* Text größer und über die Spaltenbreite gezogen statt schmaler Block */
.project--solo .project__name{
  font-size:clamp(1.8rem, 3.2vw, 3rem);
  margin-bottom:24px;
}
.project--solo .project__desc{
  font-size:15px;
  line-height:1.65;
  max-width:68ch;
  margin-bottom:26px;
}
.project--solo .project__desc + .project__desc{ margin-top:0; margin-bottom:36px; }
.project--solo .project__tag-main,
.project--solo .project__tag-list{ font-size:14px; }
.project--solo .project__tags{ margin-bottom:38px; }

/* Alle Maße in cqw = Prozent der Mockup-Spalte. Dadurch bleiben Rahmen,
   Eckenradien und Position bei jeder Bildschirmgröße im Verhältnis. */
.project__mockups{
  position:relative;
  container-type:inline-size;
  /* Kein padding-bottom: die Containerunterkante IST die Laptop-Unterkante,
     dadurch sitzt das Handy mit bottom:0 exakt bündig. */
  padding-bottom:0;
}
.mockup{ display:block; height:auto; }
.mockup--desktop{
  width:100%;            /* volle Spaltenbreite — reicht damit weiter nach links */
  margin-left:auto;
  margin-top:3cqw;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}

/* ---- Handyrahmen (iPhone 14 Pro) ----
   Sitzt rechts unten bündig am Laptop. Am Mockup ausgemessen:
   das Gerät berührt die Bildunterkante (100 % der Höhe, kein transparenter
   Rand) und reicht seitlich bis 90.86 % der Bildbreite. Der Laptop ist
   90 % breit und rechtsbündig → seine rechte Kante liegt bei 91.8cqw. */
.mockup--phone{
  position:absolute;
  right:0;        /* so weit rechts wie die Spalte hergibt */
  bottom:0;       /* Unterkante exakt auf der Laptop-Unterkante */
  width:24cqw;
  padding:0.65cqw;
  border-radius:3.4cqw;
  background:linear-gradient(150deg,#4a4a52 0%,#17171a 18%,#141417 82%,#54545d 100%);
  box-shadow:0 12px 30px rgba(0,0,0,.32);
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.phone__screen{
  position:relative;
  aspect-ratio: 390 / 844;
  border-radius:2.75cqw;
  overflow:hidden;
  background:#000;
}
.phone__shot{
  display:block;
  width:100%;
  height:auto;
  will-change:transform;
  /* Startet erst, wenn das Projekt im Bild ist (siehe main.js) */
  animation:phone-scroll 32s cubic-bezier(.5,0,.5,1) infinite alternate;
  animation-play-state:paused;
}
.project__mockups.is-playing .phone__shot{ animation-play-state:running; }

/* Screenshot 730 x 16383, Ausschnitt 390 x 844 → 90.36 % Laufweg */
@keyframes phone-scroll{
  from{ transform:translate3d(0, 0, 0); }
  to  { transform:translate3d(0, -90.36%, 0); }
}

.phone__island{
  position:absolute;
  top:1.4%;
  left:50%;
  transform:translateX(-50%);
  width:31%;
  aspect-ratio: 125 / 36;
  background:#000;
  border-radius:999px;
  z-index:2;
}

/* Beide gleich weit, sonst verschiebt sich die bündige Unterkante */
.project--solo:hover .mockup--desktop,
.project--solo:hover .mockup--phone{ transform:translateY(-6px); }

/* ---------- 12. LEISTUNGEN ---------- */
.services{ background:var(--white); }
.services__list{ border-top:1px solid var(--grey-line); }

.service{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap:clamp(24px, 5vw, 80px);
  align-items:center;
  padding:clamp(26px, 3vw, 40px) 0;
  border-bottom:1px solid var(--grey-line);
}
.service__num{
  display:block;
  font-size:var(--fs-small);
  color:var(--grey-text);
  margin-bottom:26px;
}
.service__name{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.5rem, 2.5vw, 2.15rem);
  line-height:1;
  text-transform:uppercase;
}
.service__tags{
  font-size:var(--fs-small);
  font-weight:600;
  margin-bottom:12px;
}
.service__text{
  font-size:var(--fs-small);
  line-height:1.6;
  color:var(--grey-text);
  max-width:44ch;
}

/* ---------- 13. ÜBER MICH ---------- */
.about{ background:var(--grey-100); }
.about__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:clamp(36px, 6vw, 100px);
  align-items:center;
  max-width:860px;
}
.about__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2rem, 4.4vw, 3.6rem);
  line-height:0.98;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  margin-bottom:26px;
}
.about__text{
  font-size:15px;
  line-height:1.65;
  color:var(--black);
  max-width:52ch;
  margin-bottom:18px;
}
.about__facts{
  margin:34px 0 38px;
  border-top:1px solid var(--grey-300);
}
.about__facts li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 18px;
  padding:15px 0;
  border-bottom:1px solid var(--grey-300);
  font-size:var(--fs-small);
}
.about__facts strong{ font-weight:600; min-width:190px; }
.about__facts span{ color:var(--grey-text); }

/* ---------- 14. ABLAUF ---------- */
.process__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--grey-line);
  border-top:1px solid var(--grey-line);
  border-bottom:1px solid var(--grey-line);
}
.process__item{
  background:var(--white);
  padding:clamp(26px, 3vw, 44px) clamp(20px, 2vw, 32px);
}
.process__num{
  display:block;
  font-size:var(--fs-small);
  color:var(--grey-text);
  margin-bottom:34px;
}
.process__item h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.25rem, 1.9vw, 1.65rem);
  text-transform:uppercase;
  line-height:1;
  margin-bottom:14px;
}
.process__item p{
  font-size:var(--fs-small);
  line-height:1.6;
  color:var(--grey-text);
}

/* ---------- 15. KONTAKT ---------- */
.cta{
  background:var(--black);
  color:var(--white);
  padding:clamp(80px, 11vw, 160px) var(--gutter);
}
.cta__inner{ max-width:820px; }
.cta__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(3rem, 10vw, 8.5rem);
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:-0.015em;
  margin-bottom:28px;
}
.cta__text{
  font-size:clamp(1rem, 1.5vw, 1.25rem);
  line-height:1.55;
  color:rgba(255,255,255,.65);
  max-width:46ch;
  margin-bottom:50px;
}

.form{ display:flex; flex-direction:column; gap:22px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field label{
  font-size:var(--fs-small);
  font-weight:500;
  color:rgba(255,255,255,.55);
}
.field input,
.field select,
.field textarea{
  font-family:inherit;
  font-size:15px;
  color:var(--white);
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.22);
  padding:12px 0;
  border-radius:0;
  transition:border-color .25s ease;
  appearance:none;
  -webkit-appearance:none;
}
.field textarea{ resize:vertical; min-height:90px; }
.field select option{ color:var(--black); }
.field input::placeholder,
.field textarea::placeholder{ color:rgba(255,255,255,.3); }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:none; border-bottom-color:var(--white); }
.field.has-error input,
.field.has-error textarea{ border-bottom-color:#ff6b6b; }

.form__submit{ align-self:flex-start; margin-top:8px; padding:16px 26px; }
.form__status{
  font-size:var(--fs-small);
  color:rgba(255,255,255,.6);
  min-height:20px;
}
.form__status.is-ok{ color:#7ee0a3; }
.form__status.is-error{ color:#ff8f8f; }

/* ---------- 16. FOOTER ---------- */
.footer{
  background:var(--black);
  color:var(--white);
  padding:clamp(50px, 6vw, 90px) var(--gutter) 34px;
  border-top:1px solid rgba(255,255,255,.1);
}
.footer__top{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:clamp(40px, 5vw, 70px);
}
.footer__logo{
  display:block;
  font-size:19px;
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:14px;
}
.footer__brand p{
  font-size:var(--fs-small);
  line-height:1.6;
  color:rgba(255,255,255,.55);
  max-width:34ch;
}
.footer__col{ display:flex; flex-direction:column; gap:11px; font-size:var(--fs-small); }
.footer__label{
  font-weight:600;
  color:var(--white);
  margin-bottom:5px;
}
.footer__col a,
.footer__col span:not(.footer__label){ color:rgba(255,255,255,.55); transition:color .2s ease; }
.footer__col a:hover{ color:var(--white); }

.footer__bottom{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:space-between;
  align-items:center;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12px;
  color:rgba(255,255,255,.45);
}
.footer__legal{ display:flex; gap:22px; }
.footer__legal a:hover{ color:var(--white); }

/* ---------- 17. TO TOP ---------- */
.to-top{
  position:fixed;
  right:calc(var(--frame) + 14px);
  bottom:calc(var(--frame) + 14px);
  z-index:70;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:#2b2b2b;
  color:var(--white);
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease, background .2s ease;
}
.to-top svg{ width:18px; height:18px; }
.to-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.to-top:hover{ background:#3d3d3d; }

/* ---------- 18. REVEAL ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* Bild-Fallback, falls eine externe Grafik nicht lädt */
img.is-broken{
  background:linear-gradient(135deg,#e6e6e6,#d3d3d3);
  min-height:120px;
}

/* =========================================================
   19. RESPONSIVE
   ========================================================= */

/* Laptop */
@media (max-width: 1180px){
  .footer__top{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; }
}

/* Tablet quer */
@media (max-width: 1000px){
  :root{ --frame:16px; --radius-card:32px; }

  .nav__links,
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }

  .nav__links.is-open{
    display:flex;
    position:absolute;
    left:0; right:0; top:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--white);
    padding:8px var(--gutter) 26px;
    border-bottom:1px solid var(--grey-line);
    font-size:22px;
  }
  .nav__links.is-open a{
    width:100%;
    padding:14px 0;
    border-bottom:1px solid var(--grey-line);
  }
  .nav__links.is-open a::after{ display:none; }

  /* Untereinander: Bild und Notiz zurück in den normalen Fluss, Treppe flacher */
  .hero{ --hero-img-w: clamp(240px, 40vw, 400px); }
  .hero__grid{
    --h1: clamp(2.2rem, 11.5vw, 9rem);
    --h1: clamp(2.2rem, 16cqi, 9rem);
    --step: 1em;
  }
  .hero__note{
    position:static;
    width:auto;
    max-width:280px;
    margin-top:32px;
  }
  .hero__meta{
    position:static;
    transform:none;
    width:var(--hero-img-w);
    margin-top:38px;
  }

  .project{ grid-template-columns:1fr; }
  .project--solo{ grid-template-columns:1fr; }
  .project__info{ padding-top:0; }
  .project__desc{ max-width:none; }

  /* Einspaltig wird der Block mittig ausgerichtet. Sichtbare linke Kante ist
     nicht der Bildrand, sondern das Gerät im Mockup (bei 9.29 % der Bildbreite):
     4cqw + 0.0929 × 88 = 12.18cqw. Rechts steht das Handy über, also muss sein
     Abstand denselben Wert haben. */
  .mockup--desktop{ width:88%; margin-left:4cqw; margin-right:0; margin-top:4cqw; }
  .mockup--phone{ right:12.2cqw; width:21cqw; padding:.58cqw; border-radius:2.98cqw; }
  .phone__screen{ border-radius:2.4cqw; }

  .process__grid{ grid-template-columns:repeat(2, 1fr); }

  .about__grid{ grid-template-columns:1fr; }

  .footer__top{ grid-template-columns:1fr 1fr; gap:36px; }
}

/* Handy */
@media (max-width: 640px){
  :root{
    --frame:10px;
    --radius-card:26px;
    --gutter:22px;
    --fs-small:13px;
  }

  .nav__inner{ padding:18px var(--gutter); }
  .nav__logo{ font-size:17px; }

  .hero{ padding-top:22px; padding-bottom:44px; }
  .hero__grid{
    --h1: clamp(2rem, 15vw, 6rem);
    --h1: clamp(2rem, 19.5cqi, 6rem);
    --step: .55em;
  }

  .hero{ --hero-img-w: 100%; }
  .hero__meta{ margin-top:32px; }
  .hero__meta-text{ flex-direction:column; gap:2px; }

  /* Auf dem Handy komplett weg — spart auch den Download (467 KB) */
  .bleed{ display:none; }

  .statement{ gap:26px; }
  .statement__text{ font-size:1.28rem; line-height:1.38; }

  .ticker{ padding:16px 0; }

  .section__title{ margin-bottom:36px; }

  .project{ padding:34px 0; gap:26px; }
  .project--solo{ padding-top:0; padding-bottom:0; }
  .project__desc{ margin-bottom:26px; }
  .project__tags{ margin-bottom:26px; }
  .project__desc + .project__desc{ margin-top:-14px; }
  .project__mockups{ padding-bottom:0; }
  /* Breite und Ausrichtung kommen aus dem 1000px-Block, hier nur die Größen */
  .mockup--desktop{ margin-top:5cqw; }
  .mockup--phone{ width:23cqw; padding:.64cqw; border-radius:3.27cqw; }
  .phone__screen{ border-radius:2.63cqw; }

  .service{
    grid-template-columns:1fr;
    gap:16px;
    padding:30px 0;
  }
  .service__num{ margin-bottom:10px; }
  .service__text{ max-width:none; }

  .process__grid{ grid-template-columns:1fr; }
  .process__num{ margin-bottom:18px; }

  .about__facts strong{ min-width:0; width:100%; }

  .form__row{ grid-template-columns:1fr; }
  .form__submit{ align-self:stretch; justify-content:center; }

  .footer__top{ grid-template-columns:1fr; gap:30px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:12px; }

  .to-top{ right:calc(var(--frame) + 8px); bottom:calc(var(--frame) + 8px); }
}

/* Sehr kleine Geräte */
@media (max-width: 360px){
  :root{ --gutter:18px; }
}

/* ---------- 20. RECHTSSEITEN ---------- */
.legal{ padding:clamp(50px, 7vw, 110px) var(--gutter) clamp(70px, 9vw, 130px); }
.legal__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.4rem, 7vw, 5.5rem);
  line-height:0.94;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  margin-bottom:clamp(36px, 5vw, 64px);
}
.legal__body{ max-width:70ch; }
.legal__body h2{
  font-size:18px;
  font-weight:600;
  margin:44px 0 12px;
}
.legal__body h3{
  font-size:15px;
  font-weight:600;
  margin:28px 0 8px;
}
.legal__body p,
.legal__body li{
  font-size:15px;
  line-height:1.7;
  color:#3a3a3a;
  margin-bottom:12px;
}
.legal__body ul{ list-style:disc; padding-left:20px; margin-bottom:12px; }
.legal__body a{ text-decoration:underline; text-underline-offset:3px; }
.legal__note{
  background:var(--grey-100);
  border-left:3px solid var(--black);
  padding:16px 20px;
  font-size:var(--fs-small);
  line-height:1.6;
  margin-bottom:40px;
}
.legal__back{ margin-top:50px; }

/* ---------- 21. A11Y ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  /* Sonst würde die Regel oben den Screenshot sofort ans Ende springen lassen */
  .phone__shot{ animation:none !important; transform:none !important; }
}

:focus-visible{
  outline:2px solid var(--black);
  outline-offset:3px;
  border-radius:2px;
}
.cta :focus-visible,
.footer :focus-visible{ outline-color:var(--white); }