/* ============================================================
   david juker — portfolio
   ============================================================ */

:root{
  /* Schwarz bleibt die Basis, die Farben stammen von davidjuker.ch */
  --bg:#0a0a0a;
  --bg-soft:#111111;          /* wie --foreground dort */
  --fg:#f3f2f2;               /* wie --base dort */
  --muted:#8b8a90;            /* aufgehelltes --secondary #6B6A6A */
  --line:rgba(243,242,242,.14);
  --accent:#5857ff;           /* --primary von davidjuker.ch */
  --accent-2:#ff7f50;         /* Koralle, zweite Farbe der Seite */

  --pad: clamp(18px, 4vw, 56px);
  --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-weight:400;
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; cursor:pointer; }
button{ cursor:pointer; }
img{ display:block; max-width:100%; }
h1,h2,h3,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }

.mono{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.label{ display:block; color:var(--accent); margin-bottom:22px; }
.arrow{ display:inline-block; transition:transform .4s var(--ease); }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad) 30px;
  font-family:var(--mono); font-size:13px;
  letter-spacing:.06em; text-transform:uppercase;
  /* Verlauf statt Blend-Mode: bleibt auch über hellen Projektbildern lesbar */
  background:linear-gradient(to bottom,
    rgba(10,10,10,.92) 0%, rgba(10,10,10,.72) 55%, rgba(10,10,10,0) 100%);
}
.nav__menu{ display:flex; gap:28px; }
.nav__menu a{ position:relative; color:var(--muted); transition:color .3s; }
.nav__menu a::after{
  content:""; position:absolute; left:0; bottom:-5px;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.nav__menu a:hover::after,.nav__menu a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav__menu a:hover,.nav__menu a.is-active{ color:var(--fg); }
.nav__brand{ font-weight:600; color:var(--fg); letter-spacing:.04em; }
.nav__cta{ color:var(--fg); }

/* ============================ HERO ============================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:120px var(--pad) 26px;
  overflow:hidden;
}
.trail{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.trail img{
  --rot:0deg;
  position:absolute;
  width:clamp(120px, 13vw, 210px);
  height:auto;
  border-radius:3px;
  opacity:0;
  transform:translate3d(-50%,-50%,0) scale(.88) rotate(var(--rot));
  will-change:transform,opacity;
  transition:opacity .45s ease, transform .9s var(--ease);
}
.trail img.in{
  opacity:1;
  transform:translate3d(-50%,-50%,0) scale(1) rotate(var(--rot));
}
.trail img.out{
  opacity:0 !important;
  transform:translate3d(-50%,-54%,0) scale(.97) rotate(var(--rot));
  transition:opacity .6s ease, transform .7s var(--ease);
}

.hero__inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; gap:clamp(20px,3vw,40px);
  margin-top:auto;
  pointer-events:none;
}
.hero__title{
  font-size:clamp(64px, 17vw, 260px);
  line-height:.82;
  font-weight:500;
  letter-spacing:-.045em;
  text-transform:uppercase;
  /* hält die Type lesbar, wenn Trail-Bilder dahinter liegen */
  text-shadow:0 4px 40px rgba(0,0,0,.55);
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line span{
  display:block;
  transform:translateY(105%);
  animation:riseIn 1.1s var(--ease) forwards;
}
.hero__title .line:nth-child(2) span{ animation-delay:.1s; }
@keyframes riseIn{ to{ transform:translateY(0); } }

.hero__lede{
  max-width:46ch;
  align-self:flex-end;
  font-size:clamp(16px,1.3vw,20px);
  color:var(--muted);
  text-shadow:0 2px 24px rgba(0,0,0,.85);
  opacity:0;
  animation:fadeIn 1s var(--ease) .5s forwards;
}
@keyframes fadeIn{ to{ opacity:1; } }

.hero__foot{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-top:clamp(34px,6vw,70px);
  padding-top:16px;
  border-top:1px solid var(--line);
  opacity:0;
  animation:fadeIn 1s var(--ease) .7s forwards;
}
.hero__hint{ display:inline-flex; align-items:center; gap:9px; }
.hero__scroll:hover .arrow{ transform:translateY(5px); }
.hero__scroll{ color:var(--fg); }

/* ============================ SECTION HEAD ============================ */
.sec-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding:clamp(70px,10vw,140px) var(--pad) 26px;
}
.sec-head__title{
  font-size:clamp(28px,4.5vw,64px);
  font-weight:500; letter-spacing:-.03em; text-transform:lowercase;
}

/* ============================ WORKS ============================ */
.works{ position:relative; }
.works__list{ border-top:1px solid var(--line); }

.work{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 30px;
  align-items:center;
  gap:18px;
  padding:clamp(20px,2.4vw,30px) var(--pad);
  border-bottom:1px solid var(--line);
  transition:color .4s var(--ease);
  overflow:hidden;
}
.work::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--accent);
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.work:hover::before{ transform:translateY(0); }
.work > *{ position:relative; z-index:1; }
.work:hover{ color:var(--fg); }
.work:hover .mono{ color:rgba(243,242,242,.75); }
.work:hover .work__title{ transform:translateX(8px); }
.work:hover .work__arrow{ transform:translateX(4px); opacity:1; }

.work__title{
  font-size:clamp(22px,3.6vw,50px);
  font-weight:400; letter-spacing:-.03em; text-transform:lowercase;
  transition:transform .55s var(--ease);
}
.work__tag{ justify-self:end; text-align:right; }
.work__arrow{ justify-self:end; font-size:20px; opacity:.45; transition:transform .4s var(--ease), opacity .4s; }


/* ============================ ABOUT ============================ */
.about{ padding:clamp(80px,12vw,170px) var(--pad); }
.about__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(30px,6vw,90px);
}
.about__title{
  font-size:clamp(30px,4.6vw,68px);
  font-weight:500; line-height:1.02; letter-spacing:-.035em; text-transform:lowercase;
}
.about__title em{ font-style:italic; color:var(--accent); font-weight:300; }
.about__text{
  max-width:52ch;
  font-size:clamp(17px,1.35vw,21px);
  color:var(--muted);
  margin-bottom:20px;
}
.about__text:first-of-type{ color:var(--fg); }


/* ============================ LAB ============================ */
.lab{
  padding:clamp(70px,9vw,130px) 0 clamp(70px,9vw,130px);
  border-top:1px solid var(--line);
  overflow:hidden;
}
.lab__inner{ padding:0 var(--pad); max-width:760px; }
.lab__title{
  font-size:clamp(46px,9vw,140px);
  font-weight:500; letter-spacing:-.05em; line-height:.9; text-transform:lowercase;
}
.lab__text{
  margin:20px 0 30px; max-width:44ch;
  color:var(--muted); font-size:clamp(17px,1.35vw,21px);
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border:1px solid var(--line); border-radius:999px;
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s;
}
.btn:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.btn:hover .arrow{ transform:translate(3px,-3px); }

.lab__strip{
  display:grid; align-items:start;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,20px);
  margin:clamp(40px,6vw,80px) var(--pad) 0;
}
.lab__strip img{
  width:100%; height:auto; border-radius:2px;
  filter:grayscale(1); opacity:.6;
  transition:filter .5s, opacity .5s;
}
.lab__strip img:hover{ filter:grayscale(0); opacity:1; }

/* ============================ CONTACT ============================ */
.contact{
  padding:clamp(70px,10vw,140px) var(--pad) 26px;
  border-top:1px solid var(--line);
  background:var(--bg-soft);
}
.contact__mail{
  display:block;
  font-size:clamp(48px,13vw,190px);
  font-weight:500; line-height:.9; letter-spacing:-.05em; text-transform:lowercase;
  transition:color .4s;
}
.contact__mail .arrow{ font-size:.42em; vertical-align:super; }
.contact__mail:hover{ color:var(--accent); }
.contact__mail:hover .arrow{ transform:translate(8px,-8px); }

.contact__rows{
  margin:clamp(40px,6vw,80px) 0 clamp(40px,6vw,70px);
  border-top:1px solid var(--line);
  max-width:620px;
}
.contact__row{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.contact__row a{
  font-size:clamp(16px,1.6vw,21px);
  transition:color .3s, transform .45s var(--ease);
  display:inline-block;
}
.contact__row a:hover{ color:var(--accent); transform:translateX(-6px); }

.contact__foot{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-top:16px; border-top:1px solid var(--line);
}
.contact__foot a:hover{ color:var(--fg); }

/* ============================ REVEAL ============================ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:900px){
  .about__grid{ grid-template-columns:1fr; }
  .nav{ flex-wrap:wrap; gap:10px 16px; padding:16px var(--pad); }
  .nav__menu{ order:3; width:100%; gap:18px; font-size:12px; }
  .work{
    grid-template-columns:1fr auto;
    gap:14px;
  }
  .work__tag{ align-self:center; }
  .work__arrow{ display:none; }
  .lab__strip{ grid-template-columns:1fr 1fr; }
  .work:hover .work__title{ transform:none; }
  .hero__lede{ align-self:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .hero__title .line span{ transform:none; }
  .reveal{ opacity:1; transform:none; }
  body::after{ display:none; }
}

/* ============================ LANGUAGE SWITCH ============================ */
.nav__right{ display:flex; align-items:center; gap:22px; }
.lang{ display:inline-flex; align-items:center; gap:6px; }
.lang button{
  background:none; border:0; padding:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
  transition:color .3s;
}
.lang button:hover{ color:var(--fg); }
.lang button.is-active{ color:var(--fg); text-decoration:underline; text-underline-offset:4px; }
.lang__sep{ color:var(--muted); opacity:.5; }

/* ============================ SERVICES (Startseite) ============================ */
.services-sec{ border-top:1px solid var(--line); }
.services-sec__list{ border-top:1px solid var(--line); }
.service-row{
  position:relative; display:grid;
  grid-template-columns:minmax(0,1fr) 40px;
  align-items:center; gap:18px;
  padding:clamp(18px,2.2vw,28px) var(--pad);
  border-bottom:1px solid var(--line);
  transition:color .4s var(--ease);
  overflow:hidden;
}
.service-row::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--fg); transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.service-row:hover::before{ transform:translateY(0); }
.service-row > *{ position:relative; z-index:1; }
.service-row:hover{ color:var(--bg); }
.service-row:hover .mono{ color:rgba(10,10,10,.7); }
.service-row:hover .service-row__title{ transform:translateX(14px); }
.service-row:hover .service-row__arrow{ transform:translate(4px,-4px); }
.service-row__title{
  font-size:clamp(20px,2.6vw,36px);
  letter-spacing:-.03em; text-transform:lowercase;
  transition:transform .55s var(--ease);
}
.service-row__arrow{ justify-self:end; font-size:18px; }

/* ============================ UNTERSEITEN ============================ */
.is-sub{ background:var(--bg); }
.detail{ padding:clamp(100px,11vw,150px) var(--pad) 0; }
.back{ display:inline-flex; align-items:center; gap:9px; margin-bottom:clamp(34px,5vw,60px); }
.back:hover{ color:var(--fg); }
.back:hover .arrow{ transform:translateX(-5px); }

.detail__head{ max-width:1100px; margin-bottom:clamp(34px,5vw,60px); }
.detail__num{ display:block; margin-bottom:18px; color:var(--accent); }
.detail__title{
  font-size:clamp(38px,8vw,110px);
  font-weight:500; line-height:.95; letter-spacing:-.045em; text-transform:lowercase;
}
.detail__lead{
  margin-top:22px; max-width:46ch;
  font-size:clamp(17px,1.8vw,26px); color:var(--muted); letter-spacing:-.01em;
}

.detail__hero{ margin:0 0 clamp(34px,5vw,64px); }
.detail__hero img{ width:100%; height:auto; border-radius:3px; }
.detail__video{
  position:relative; width:100%; padding-top:56.25%;
  margin-bottom:clamp(34px,5vw,64px); border-radius:3px; overflow:hidden;
  background:var(--bg-soft);
}
.detail__video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.detail__grid{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,5vw,80px);
  padding-bottom:clamp(40px,6vw,80px);
  border-bottom:1px solid var(--line);
}
.meta__row{
  display:flex; justify-content:space-between; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.meta__row span:last-child{ text-align:right; font-size:16.5px; }
.meta__row a{ border-bottom:1px solid var(--line); }
.meta__row a:hover{ color:var(--accent); }
.meta__list{ padding-top:14px; }
.meta__list li{
  padding:11px 0; border-bottom:1px solid var(--line);
  font-size:clamp(15px,1.3vw,18px); text-transform:lowercase;
}
.detail__body p{
  font-size:clamp(16px,1.5vw,21px); color:var(--fg); margin-bottom:20px; max-width:56ch;
}
.detail__body p + p{ color:var(--muted); }
.btn--light{ margin-top:22px; }


.detail__next{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding:clamp(28px,4vw,56px) 0;
  border-top:1px solid var(--line);
}
.detail__next-title{
  font-size:clamp(28px,5vw,64px); letter-spacing:-.04em; text-transform:lowercase;
  transition:transform .55s var(--ease);
}
.detail__next:hover .detail__next-title{ transform:translateX(14px); color:var(--accent); }
.detail__next:hover .arrow{ transform:translateX(8px); }
.detail__next img{
  width:clamp(90px,10vw,150px); height:auto; border-radius:3px;
  opacity:.55; transition:opacity .45s;
}
.detail__next:hover img{ opacity:1; }

/* ---------- Leistungsseite ---------- */
.sub-head{
  font-size:clamp(22px,3vw,40px); font-weight:500;
  letter-spacing:-.03em; text-transform:lowercase;
  margin-bottom:clamp(22px,3vw,40px);
}


.related{ border-bottom:0; }
.related__grid{ display:grid; align-items:start; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); }
.card{ display:block; }
.card img{
  width:100%; height:auto; border-radius:3px;
  transition:opacity .45s, transform .7s var(--ease);
  opacity:.8;
}
.card:hover img{ opacity:1; transform:scale(1.02); }
.card__title{
  display:block; margin:14px 0 4px;
  font-size:clamp(17px,1.6vw,22px); text-transform:lowercase; letter-spacing:-.02em;
}
.card:hover .card__title{ color:var(--accent); }

.contact--slim{ margin-top:clamp(50px,7vw,90px); }

@media (max-width:900px){
  .service-row{ grid-template-columns:1fr 26px; gap:12px; }
  .service-row:hover .service-row__title{ transform:none; }

  .detail__grid{ grid-template-columns:1fr; }
  .related__grid{ grid-template-columns:1fr; }
  .nav__right{ gap:14px; }
  .nav__cta{ display:none; }
}

/* ============================ PORTFOLIO-HERVORHEBUNG ============================ */
.nav__key{
  color:var(--fg) !important;
  border:1px solid rgba(242,242,240,.45);
  border-radius:999px;
  padding:5px 13px;
  margin:-5px 0;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s;
}
.nav__key::after{ display:none; }
.nav__key:hover,.nav__key.is-active{
  background:var(--fg); color:var(--bg) !important; border-color:var(--fg);
}

.btn--key{
  border-color:var(--fg);
  color:var(--fg);
  padding:15px 26px;
}
.btn--key:hover .arrow{ transform:translateY(4px); }
.hero__scroll{ align-self:center; }

.sec-head--major{ padding-bottom:14px; }
.sec-head--major .sec-head__title{
  font-size:clamp(46px,9vw,140px);
  letter-spacing:-.05em; line-height:.9;
}

/* Detailbilder kleiner halten — nicht bildschirmfüllend */
.detail__hero{ max-width:820px; }
.detail__hero img{
  /* Seitenverhältnis bleibt erhalten — 9:16 wird nicht beschnitten */
  width:auto; max-width:100%;
  height:auto; max-height:min(72vh,620px);
  margin-inline:auto;   /* Hochformate sitzen mittig statt im leeren Raum */
}
.detail__video{ max-width:1000px; }

@media (max-width:900px){
  .hero__scroll{ align-self:flex-start; }
  .nav__key{ padding:4px 10px; }
  .detail__hero img{ max-height:58vh; }
}

/* ============================ ÜBER MICH: BILD, CHIPS, STATUS ============================ */
.about__figure{ margin:clamp(30px,4vw,52px) 0 0; }
.about__figure img{
  width:auto; max-width:min(100%,440px);
  height:auto; max-height:min(58vh,520px);
  border-radius:3px;
}


.about__foot{
  display:flex; align-items:center; gap:clamp(16px,2.5vw,32px); flex-wrap:wrap;
  margin-top:clamp(30px,4vw,44px);
  padding-top:24px; border-top:1px solid var(--line);
}

@media (max-width:900px){
  .about__figure img{ max-width:100%; max-height:52vh; }
  .about__foot{ align-items:flex-start; flex-direction:column; }
}

.steps{ padding-bottom:clamp(60px,8vw,110px); border-bottom:1px solid var(--line); }
.sub-head--major{
  font-size:clamp(34px,6vw,84px);
  letter-spacing:-.04em; line-height:.95;
  margin-bottom:clamp(34px,5vw,60px);
}


.steps__cta{ margin-top:clamp(40px,5vw,64px); }



/* ---------- Bilderstrecke auf einer Leistungsseite ---------- */
.shots{
  columns:3;
  column-gap:clamp(12px,1.6vw,20px);
  max-width:1200px;
  margin:0 0 clamp(60px,8vw,110px);
}
.shots img{
  width:100%; height:auto;
  border-radius:3px;
  margin-bottom:clamp(12px,1.6vw,20px);
  break-inside:avoid;
}
@media (max-width:1100px){ .shots{ columns:2; } }
@media (max-width:640px){ .shots{ columns:1; } }

/* ============================================================
   TABLET / IPAD  (≈768–1180 px)
   ============================================================ */
@media (max-width:1180px){
  .work{ grid-template-columns:minmax(0,1fr) auto 26px; gap:14px; }
  .related__grid{ grid-template-columns:1fr 1fr; }
  .about__grid{ gap:clamp(24px,4vw,48px); }
  .nav__menu{ gap:20px; }
  .nav__right{ gap:16px; }
}

@media (max-width:1024px){
  .detail__grid{ grid-template-columns:1fr; gap:34px; }
  .lab__strip{ grid-template-columns:1fr 1fr; }
  .lab__strip img:last-child{ display:none; }
  .hero{ min-height:88svh; }
}

/* Tablet im Hochformat: About einspaltig, Bild neben dem Titel */
@media (max-width:900px) and (min-width:641px){
  .about__col:first-child{
    display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end;
  }
  .about__figure{ margin:0; }
  .about__figure img{ max-height:44vh; }
}

/* ============================================================
   HANDY  (≤640 px)
   ============================================================ */
@media (max-width:640px){
  :root{ --pad:20px; }
  .nav{ padding:14px var(--pad) 26px; font-size:12px; }
  .nav__menu{ gap:16px; font-size:12px; }
  .nav__key{ padding:3px 9px; }
  .hero{ min-height:86svh; padding-top:104px; }
  .hero__foot{ margin-top:34px; }
  .btn{ padding:12px 18px; font-size:12px; }
  .work{ padding:18px var(--pad); }
  .work__title{ font-size:26px; }
  .service-row{ padding:18px var(--pad); }
  .service-row__title{ font-size:24px; }
  .sec-head{ padding-top:clamp(56px,14vw,90px); }
  .sec-head--major .sec-head__title{ font-size:clamp(40px,13vw,68px); }
  .detail{ padding-top:104px; }
  .detail__title{ font-size:clamp(32px,10vw,48px); }
  .sub-head--major{ font-size:clamp(30px,10vw,44px); }
  .contact__mail{ font-size:clamp(42px,15vw,68px); }
  .contact__row a{ font-size:16px; }
  .lab__strip{ grid-template-columns:1fr; }
  .lab__strip img:last-child{ display:block; }
  .detail__next-title{ font-size:clamp(26px,9vw,40px); }
}

/* ---------- Ablauf: kompakte Stationen ---------- */
.flow{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(16px,2vw,26px);
  max-width:1200px;
  padding:0; margin:0; list-style:none;
}
.flow__item{ position:relative; }
.flow__l1,
.flow__l2{
  position:absolute; inset:0;
  border:1px solid var(--line); border-radius:6px;
  pointer-events:none;
}
.flow__l1{ transform:translate(6px,6px); opacity:.5; }
.flow__l2{ transform:translate(12px,12px); opacity:.22; }

.flow__card{
  position:relative; z-index:1; height:100%;
  padding:clamp(22px,2.2vw,30px);
  border:1px solid var(--line); border-radius:6px;
  background:var(--bg-soft);
  overflow:hidden;
}
.flow__icon{
  display:flex; align-items:center; justify-content:center;
  width:50px; height:50px; margin-bottom:24px;
  border:1px solid var(--line); border-radius:50%;
  color:var(--accent);
}
.flow__icon svg{ width:24px; height:24px; }
.flow__card h3{
  font-size:clamp(19px,1.8vw,24px); font-weight:500;
  letter-spacing:-.02em; text-transform:lowercase;
}

@media (max-width:640px){
  .flow{ grid-template-columns:1fr 1fr; gap:12px; }
  .flow__card{ padding:18px; }
  .flow__icon{ width:42px; height:42px; margin-bottom:16px; }
  .flow__icon svg{ width:20px; height:20px; }
  .flow__card h3{ font-size:17px; }
    .flow__l1{ transform:translate(4px,4px); }
  .flow__l2{ transform:translate(8px,8px); }
}

/* ---------- Projektgalerie zum Wischen ---------- */
.swipe{ margin:0 0 clamp(40px,6vw,80px); }
.swipe__track{
  display:flex; align-items:center;
  min-height:clamp(300px,52vh,520px);   /* reserviert Platz, bis die Bilder da sind */
  gap:clamp(12px,1.6vw,20px);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}
.swipe__track::-webkit-scrollbar{ display:none; }
.swipe__item{
  flex:0 0 auto; margin:0;
  scroll-snap-align:start;
}
.swipe__item img{
  /* nie über die Originalgrösse hinaus und nie bildschirmfüllend */
  width:auto; height:auto;
  max-height:clamp(300px,52vh,520px);
  max-width:min(100%,900px);
  border-radius:3px;
}
.swipe__nav{ display:flex; gap:10px; margin-top:18px; }
.swipe__btn{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%;
  background:none; color:var(--muted); font-size:16px;
  transition:border-color .3s, color .3s, background .3s;
}
.swipe__btn:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
@media (hover:none){ .swipe__nav{ display:none; } }
@media (max-width:640px){
  .swipe__track{ min-height:46vh; }
  .swipe__item img{ max-height:46vh; max-width:86vw; }
}

/* ---------- hervorgehobene Portfolio-Zeile (Showreel) ---------- */
.work--featured{
  padding-top:clamp(28px,3.4vw,44px);
  padding-bottom:clamp(28px,3.4vw,44px);
  border-bottom:1px solid rgba(243,242,242,.35);
}
.work--featured .work__title{ font-size:clamp(28px,4.6vw,64px); }
.work--featured .work__tag{ color:var(--fg); }
.work--featured .work__arrow{ opacity:.9; }
.work--featured:hover .work__arrow{ color:inherit; }

/* ---------- eigenständige Unterseiten (leistungen, über mich) ---------- */
.page{ padding-top:clamp(70px,9vw,110px); }
.sec-head--page{ padding-top:clamp(40px,6vw,90px); }
.about--page{ padding-top:clamp(20px,3vw,40px); }

/* ---------- Leistungsseite: Angebot in Stichpunkten ---------- */
.offer{
  margin:clamp(24px,3vw,36px) 0 0;
  max-width:52ch;
  border-top:1px solid var(--line);
}
.offer li{
  padding:12px 0 12px 22px;
  border-bottom:1px solid var(--line);
  font-size:clamp(16px,1.3vw,18px);
  position:relative;
}
.offer li::before{
  content:""; position:absolute; left:0; top:21px;
  width:8px; height:1px; background:var(--accent);
}

/* ---------- Über mich: Text auf Höhe des Porträts ---------- */
@media (min-width:901px){
  .about__grid{ align-items:end; }
  .about__col:last-child{ padding-bottom:clamp(10px,2vw,30px); }
}

/* ---------- 404 ---------- */
.notfound{ padding:0 var(--pad) clamp(80px,12vw,160px); }
.notfound p{
  max-width:46ch; margin-bottom:clamp(26px,3vw,40px);
  color:var(--muted); font-size:clamp(17px,1.35vw,21px);
}