/* ==========================================================================
   ANN — Model Portfolio Template
   Kalt, grafisch, monochrom. Bewusster Gegenentwurf zu den warmen
   Serifen-Vorlagen (novaelle, vivienne, emma-noah, aurelia, seraphina).

   Farbregel: echte Neutraltoene, a* ~ 0 und b* leicht NEGATIV (kuehl).
   Die Hausregel "warme Neutraltoene auf Buntton 70 Grad" gilt hier
   ausdruecklich nicht — die Kaelte ist der Zweck dieser Vorlage.
   ========================================================================== */

:root{
  --paper:#ecedee;
  --paper-2:#e3e5e7;
  --card:#f5f6f7;
  --ink:#0c0d0f;
  --ink-2:#17191c;
  --ink-soft:#5f646a;
  --ink-mute:#8b9096;
  --line:#c9cccf;
  --line-dark:#2b2e32;

  /* Lauftext, Formulare, Bildunterschriften */
  --f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  /* ANZEIGE — Schriftzug, Navigation, Ueberschriften, Leitsaetze.
     HIER wird die Schrift der Vorlage umgestellt, sonst nirgends:
       Outfit         = Auslieferungsfassung (OFL, 300-900)
       'Product Sans' = Googles Markenschrift, nur Regular; siehe fonts.css */
  --f-display:'Outfit','Inter',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;

  /* Product Sans hat keinen Fettschnitt. Damit der Browser keinen falschen
     rechnet, wird die Kunstfettung abgeschaltet und die Staerke des
     Schriftzugs ueber --wm-weight gesteuert. */
  --wm-weight:900;

  --pad:clamp(18px,4vw,64px);
  --maxw:1560px;
  --gap:clamp(16px,2.2vw,34px);

  --micro:clamp(9.5px,.72vw,11px);
  --body:clamp(13px,.92vw,14.5px);

  --ease:cubic-bezier(.22,.61,.36,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  /* Faellt der Sprung mal ohne JS an (Seite direkt mit #kontakt geoeffnet),
     soll der Abschnitt nicht unter der festen Leiste beginnen.
     scroll-behavior bleibt bewusst auf auto — das weiche Springen macht
     script.js mit steuerbarer Dauer und Abbruch. */
  scroll-padding-top:76px;
}

/* Abschnitte bekommen beim Springen den Fokus, damit Tastaturnutzer dort
   weiterlesen. Der Rahmen darum waere aber ein Fremdkoerper. */
[tabindex="-1"]:focus{outline:none}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f);
  font-size:var(--body);
  font-weight:400;
  line-height:1.7;
  letter-spacing:.01em;
  overflow-x:hidden;          /* Waagerechter Ueberlauf hat hier schon einmal
                                 einen fixierten Dialog verschoben. */
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

::selection{background:var(--ink);color:var(--paper)}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dark :focus-visible,.foot :focus-visible{outline-color:var(--paper)}

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

/* Kleines Kapitaelchen-Label mit Quadrat-Bullet ------------------------- */
.micro{
  font-size:var(--micro);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 22px;
}
.micro::before{
  content:"";
  width:6px;height:6px;
  background:var(--ink);
  flex:none;
}
.dark .micro,.foot .micro{color:var(--ink-mute)}
.dark .micro::before,.foot .micro::before{background:var(--paper)}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav{
  position:fixed;inset:0 0 auto;z-index:60;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:20px var(--pad);
  color:var(--paper);
  transition:background .4s var(--ease),color .4s var(--ease),padding .4s var(--ease);
}
.nav.is-solid{
  background:var(--paper);
  color:var(--ink);
  padding-block:14px;
  border-bottom:1px solid var(--line);
}

.nav__mark{
  font-family:var(--f-display);
  font-weight:800;font-size:15px;letter-spacing:.26em;
  text-transform:lowercase;text-indent:.26em;
  justify-self:center;
}

.nav__right{display:flex;align-items:center;gap:14px;justify-self:end}

.lang{display:flex;align-items:center;gap:2px;font-size:var(--micro);letter-spacing:.12em;font-weight:500}
.lang button{
  background:none;border:0;cursor:pointer;padding:4px 5px;
  opacity:.5;transition:opacity .3s var(--ease);
  text-transform:uppercase;letter-spacing:inherit;font-size:inherit;font-weight:inherit;
}
.lang button.is-active{opacity:1}
.lang button:hover{opacity:1}
.lang span{opacity:.35}

/* --- Burger: auf ALLEN Breiten die einzige Navigation ---------------------
   Beschriftet, weil ein nacktes Symbol auf dem Desktop ein Raetsel ist. */

.burger{
  justify-self:start;
  display:flex;align-items:center;gap:11px;
  background:none;border:0;cursor:pointer;padding:4px 0;
  font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;font-weight:500;
}
.burger__bars{position:relative;display:block;width:24px;height:11px;flex:none}
.burger__bars i{
  position:absolute;left:0;right:0;height:1.4px;background:currentColor;
  transition:transform .45s var(--ease),opacity .25s var(--ease);
}
.burger__bars i:nth-child(1){top:0}
.burger__bars i:nth-child(2){top:4.8px}
.burger__bars i:nth-child(3){bottom:0}
.burger__label{transition:opacity .3s var(--ease)}
.burger:hover .burger__label{opacity:.6}

body.menu-open .burger__bars i:nth-child(1){transform:translateY(4.8px) rotate(45deg)}
body.menu-open .burger__bars i:nth-child(2){opacity:0}
body.menu-open .burger__bars i:nth-child(3){transform:translateY(-4.8px) rotate(-45deg)}

/* Ueber der offenen Ebene muss die Leiste hell bleiben */
body.menu-open .nav{color:var(--paper);background:transparent;border-bottom-color:transparent}

/* --- Vollbild-Ebene ----------------------------------------------------- */

.mmenu{
  position:fixed;inset:0;z-index:55;
  background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(90px,14vh,150px) var(--pad) clamp(28px,5vh,54px);
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease),visibility 0s .5s;
}
body.menu-open .mmenu{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}

.mmenu__inner{width:100%;max-width:var(--maxw);margin:0 auto}

.mmenu__nav{list-style:none;margin:0 0 clamp(30px,6vh,64px);padding:0;border-top:1px solid var(--line-dark)}
.mmenu__nav li{border-bottom:1px solid var(--line-dark);overflow:hidden}
.mmenu__nav a{
  display:flex;align-items:baseline;gap:clamp(14px,2.5vw,40px);
  padding:clamp(8px,1.4vh,18px) 0;
  font-family:var(--f-display);
  font-size:clamp(34px,7vw,88px);font-weight:400;letter-spacing:-.035em;line-height:1.32;
  text-transform:uppercase;
  transform:translateY(105%);
  transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .4s var(--ease);
  transition-delay:calc(var(--i,0) * 65ms);
  opacity:0;
}
body.menu-open .mmenu__nav a{transform:translateY(0);opacity:1}
.mmenu__nav a > i{
  font-style:normal;font-family:var(--f);
  font-size:var(--micro);letter-spacing:.18em;color:var(--ink-mute);
  flex:none;
}
.mmenu__nav a:hover{opacity:.55}

.mmenu__foot{
  display:flex;flex-wrap:wrap;gap:18px clamp(24px,5vw,70px);
  justify-content:space-between;align-items:flex-end;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease) .34s,transform .6s var(--ease) .34s;
}
body.menu-open .mmenu__foot{opacity:1;transform:none}
.mmenu .micro{margin-bottom:7px}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative;
  height:100svh;min-height:540px;
  overflow:hidden;           /* haelt den Zoom-Aufbau der Bildanimation drin */
  background:var(--ink);
}
/* --- Bildstrecke -----------------------------------------------------------
   Das eingehende Bild schiebt sich als Blende von unten ueber das alte —
   dieselbe Richtung wie die Wortmasken im uebrigen Entwurf. Das alte Bild
   bleibt darunter stehen und zieht langsam weiter auf, dadurch wirkt der
   Wechsel wie zwei Ebenen, die aneinander vorbeigehen. */

.hero__slides{position:absolute;inset:0;will-change:transform}

.hero__slide{
  position:absolute;inset:0;z-index:0;
  opacity:0;
  clip-path:inset(0 0 100% 0);
}
.hero__slide picture{display:block;position:absolute;inset:0}
.hero__slide img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  transform:scale(1.11);
  transition:transform 2.1s cubic-bezier(.16,1,.3,1);
}

/* Das abloesende Bild bleibt sichtbar, bis die Blende durch ist */
.hero__slide.is-prev{z-index:1;opacity:1;clip-path:inset(0 0 0 0)}
.hero__slide.is-prev img{transform:scale(1.05)}

.hero__slide.is-active{
  z-index:2;opacity:1;clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s cubic-bezier(.76,0,.24,1);
}
.hero__slide.is-active img{transform:scale(1)}

.hero__media{position:absolute;inset:0;display:block}

/* Erster Aufbau: nur das erste Bild bekommt den Auftritt, die Blende macht
   den Rest. Ohne JS steht das erste Bild einfach da. */
html.js .hero__slide.is-active img{animation:none}
html.js.ready .hero__slide[data-i="0"].is-active img{animation:imgIn 1.7s var(--ease) both}
@keyframes imgIn{from{transform:scale(1.09);opacity:0}to{transform:scale(1);opacity:1}}

.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,13,15,.55) 0%,rgba(12,13,15,0) 34%,rgba(12,13,15,0) 62%,rgba(12,13,15,.35) 100%);
}

/* Tafel unten links: Karte plus Nummerierung der Bildstrecke */
.hero__panel{
  position:absolute;z-index:6;
  left:var(--pad);bottom:clamp(78px,15vh,170px);
  width:min(330px,72vw);
}
.hero__cards{position:relative;min-height:158px}

.hero__cards .hero__card{
  position:absolute;inset:0;left:0;bottom:auto;width:100%;
  animation:none;
  opacity:0;visibility:hidden;
  clip-path:inset(0 100% 0 0);
  transition:opacity .3s var(--ease),visibility 0s .3s,clip-path .75s cubic-bezier(.76,0,.24,1);
}
.hero__cards .hero__card.is-active{
  opacity:1;visibility:visible;
  clip-path:inset(0 0 0 0);
  transition:opacity .2s var(--ease) .18s,visibility 0s,clip-path .8s cubic-bezier(.76,0,.24,1) .18s;
}
.hero__cards .hero__card > *{
  transform:translateY(9px);opacity:0;
  transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s var(--ease);
}
.hero__cards .hero__card.is-active > *{transform:none;opacity:1}
.hero__cards .hero__card.is-active .card-note__meta{transition-delay:.34s}
.hero__cards .hero__card.is-active h2{transition-delay:.42s}
.hero__cards .hero__card.is-active > p:last-child{transition-delay:.50s}

/* --- Nummerierung mit Fortschrittsbalken -------------------------------- */

.hero__pager{display:flex;gap:clamp(10px,1.4vw,20px);margin-top:16px}
.hero__dot{
  background:none;border:0;padding:0;cursor:pointer;
  display:flex;flex-direction:column;gap:6px;
  color:var(--paper);
  font-size:var(--micro);letter-spacing:.18em;font-variant-numeric:tabular-nums;
  opacity:.45;transition:opacity .35s var(--ease);
  flex:1;
}
.hero__dot:hover,.hero__dot.is-active{opacity:1}
.hero__dot i{font-style:normal}
.hero__dot s{
  display:block;height:1px;background:currentColor;opacity:.35;
  text-decoration:none;position:relative;overflow:hidden;
}
.hero__dot s::after{
  content:"";position:absolute;inset:0;background:currentColor;
  transform:scaleX(0);transform-origin:left;
}
/* Der Balken laeuft nur beim aktiven Punkt und nur, wenn die Strecke spielt */
.hero__dot.is-active.is-running s::after{
  transform:scaleX(1);
  transition:transform var(--hero-dur,6s) linear;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Die Karte im dunklen Block bleibt wie sie war */
.card-note{
  position:absolute;left:var(--pad);bottom:clamp(90px,17vh,190px);
  background:var(--card);color:var(--ink);
  width:min(330px,72vw);
  padding:16px 20px 20px;
  animation:noteIn 1s var(--ease) .5s both;
}
@keyframes noteIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card-note__meta{
  font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;align-items:center;gap:9px;margin-bottom:14px;
}
.card-note__meta::before{content:"";width:6px;height:6px;background:var(--ink);flex:none}
.card-note h2,.card-note h3{
  font-family:var(--f-display);
  margin:0 0 7px;font-size:clamp(17px,1.5vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.2;
}
.card-note p{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-soft)}

/* Angeschnittener Schriftzug ------------------------------------------------
   Der Name ragt aus dem Bild heraus und wird von der Sektionskante
   abgeschnitten. Funktioniert nur mit kurzen Namen — genau deshalb "ann". */
.wordmark{
  position:absolute;left:0;right:0;bottom:0;
  overflow:hidden;
  pointer-events:none;
  height:calc(var(--wm-size) * .40);
}
.wordmark span{
  display:block;
  font-family:var(--f-display);
  font-size:var(--wm-size);
  font-weight:var(--wm-weight);
  font-synthesis-weight:none;
  letter-spacing:-.045em;
  line-height:.72;
  text-transform:lowercase;
  color:var(--paper);
  text-align:center;
  transform:translateY(-.185em);
  white-space:nowrap;
}
.hero .wordmark{--wm-size:clamp(150px,30vw,460px)}

.scroll-hint{
  position:absolute;right:var(--pad);bottom:26px;
  color:var(--paper);font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;opacity:.75;
}
.scroll-hint i{display:block;width:34px;height:1px;background:currentColor;transform-origin:left;animation:hint 2.4s var(--ease) infinite}
@keyframes hint{0%,100%{transform:scaleX(.35)}50%{transform:scaleX(1)}}

/* ==========================================================================
   Intro — asymmetrische Bildcollage
   ========================================================================== */

.intro{padding:clamp(64px,9vw,140px) 0 clamp(70px,10vw,140px)}
.intro__grid{
  display:grid;
  grid-template-columns:1.05fr .85fr 1fr;
  gap:var(--gap);
  align-items:start;
}
.intro__col--a{padding-top:clamp(30px,5vw,70px)}
.intro__col--b{padding-top:clamp(60px,10vw,150px)}
.intro__col--c{padding-top:clamp(110px,17vw,250px)}

/* Anschnitt-Ecken wie Passermarken */
.framed{position:relative}
.framed::before,.framed::after{
  content:"";position:absolute;width:11px;height:11px;
  border:1px solid var(--ink);opacity:.55;
}
.framed::before{top:-5px;left:-5px;border-right:0;border-bottom:0}
.framed::after{bottom:-5px;right:-5px;border-left:0;border-top:0}

.stack{display:grid;gap:var(--gap)}
.stack--offset{margin-top:clamp(24px,4vw,56px)}

/* Blocksatz mit weiten Wortabstaenden — die Typo-Geste der Vorlage */
.lede{
  font-family:var(--f-display);
  text-align:justify;
  font-size:clamp(15px,1.35vw,20px);
  font-weight:400;
  line-height:1.55;
  letter-spacing:-.01em;
  margin:0 0 clamp(22px,3vw,38px);
}

.note-box{
  border:1px solid var(--line);
  padding:16px 18px;
  font-size:12.5px;line-height:1.65;color:var(--ink-soft);
  margin:0 0 14px;
}
.note-box:last-child{margin-bottom:0}

/* ==========================================================================
   Index — nummerierte Liste mit Hover-Vorschau
   ========================================================================== */

.index{padding:clamp(60px,9vw,120px) 0 clamp(80px,12vw,160px);position:relative}
.index__head{margin-bottom:clamp(26px,4vw,48px)}
.index h2{
  font-family:var(--f-display);
  margin:0;font-size:clamp(19px,1.9vw,27px);font-weight:400;letter-spacing:-.02em;line-height:1.25;
}

.index__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.index__row{border-bottom:1px solid var(--line)}
.index__row a{
  display:grid;
  grid-template-columns:clamp(52px,7vw,110px) 1fr auto;
  align-items:center;
  gap:12px;
  padding:clamp(14px,1.6vw,22px) clamp(10px,1.4vw,22px);
  transition:background .35s var(--ease),color .35s var(--ease),padding-left .35s var(--ease);
}
.index__num{font-size:var(--micro);letter-spacing:.16em;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.index__label{font-family:var(--f-display);font-size:clamp(14px,1.15vw,16.5px);font-weight:400;letter-spacing:-.005em}
.index__arrow{
  width:13px;height:13px;flex:none;
  transition:transform .35s var(--ease);
}
.index__row a:hover{background:var(--ink);color:var(--paper);padding-left:clamp(16px,2.2vw,34px)}
.index__row a:hover .index__num{color:var(--ink-mute)}
.index__row a:hover .index__arrow{transform:translate(3px,-3px)}

/* Vorschaubild, das dem Zeiger folgt */
.index__peek{
  position:absolute;z-index:5;left:64%;
  width:clamp(140px,13vw,200px);aspect-ratio:13/16;
  pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.94);
  transition:opacity .3s var(--ease),transform .45s var(--ease);
  overflow:hidden;
}
.index__peek.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.index__peek img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   Dunkles Vollbild-Band
   ========================================================================== */

.dark{background:var(--ink);color:var(--paper);padding:clamp(70px,10vw,130px) 0}
.dark__lede{
  font-family:var(--f-display);
  max-width:44ch;margin:0 0 clamp(38px,6vw,70px);
  font-size:clamp(15px,1.35vw,20px);line-height:1.55;letter-spacing:-.01em;
  color:var(--paper);
}
.dark__grid{
  display:grid;grid-template-columns:1.35fr 1fr;gap:var(--gap);align-items:stretch;
}
.dark__figure{position:relative;min-height:100%}
.dark__figure img{width:100%;height:100%;min-height:340px;object-fit:cover}
.dark__figure .card-note{
  position:absolute;left:clamp(14px,2vw,34px);bottom:clamp(-26px,-2vw,-14px);
  animation:none;
}

.mini{display:grid;gap:14px}
.mini__item{display:grid;grid-template-columns:1fr;gap:8px}
.mini__item img{width:100%;aspect-ratio:16/10;object-fit:cover}
.mini__cap{
  display:flex;justify-content:space-between;gap:12px;
  font-size:11.5px;letter-spacing:.06em;color:var(--ink-mute);
}
.mini__cap b{font-weight:400;color:var(--paper)}

/* ==========================================================================
   Arbeiten
   ========================================================================== */

.work{padding:clamp(80px,12vw,170px) 0}
.work__head{
  display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;
  margin-bottom:clamp(26px,4vw,46px);
}
.work h2{font-family:var(--f-display);margin:0;font-size:clamp(19px,1.9vw,27px);font-weight:400;letter-spacing:-.02em}
.work__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.work__item img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .8s var(--ease)}
.work__item{overflow:hidden}
.work__item figure{margin:0;overflow:hidden}
.work__item:hover img{transform:scale(1.035)}
.work__cap{
  display:flex;justify-content:space-between;gap:14px;
  padding-top:11px;font-size:11.5px;letter-spacing:.06em;color:var(--ink-soft);
}
.work__cap b{font-weight:400;color:var(--ink)}

/* ==========================================================================
   Kontakt
   ========================================================================== */

.contact{padding:clamp(70px,10vw,140px) 0 clamp(80px,12vw,150px);border-top:1px solid var(--line)}
.contact__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,6vw,90px);align-items:start}
.contact h2{font-family:var(--f-display);margin:0 0 18px;font-size:clamp(22px,2.6vw,38px);font-weight:400;letter-spacing:-.03em;line-height:1.15}
.contact__text{max-width:38ch;color:var(--ink-soft);margin:0 0 26px}

.meta-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.meta-list li{
  display:flex;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line);
  font-size:12.5px;letter-spacing:.04em;
}
.meta-list span:first-child{color:var(--ink-mute);text-transform:uppercase;letter-spacing:.16em;font-size:var(--micro)}

.field{margin-bottom:16px}
.field label{
  display:block;margin-bottom:7px;
  font-size:var(--micro);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}
.field input,.field select,.field textarea{
  width:100%;
  background:transparent;
  border:1px solid var(--line);
  border-radius:0;
  padding:12px 13px;
  font-family:inherit;font-size:14px;color:var(--ink);
  transition:border-color .3s var(--ease),background .3s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.field textarea{resize:vertical;min-height:120px}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235f646a' fill='none' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ink);background:var(--card);
}

.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{display:flex;gap:11px;align-items:flex-start;margin:20px 0 24px;font-size:12px;line-height:1.6;color:var(--ink-soft)}
.consent input{margin-top:3px;flex:none;accent-color:var(--ink);width:15px;height:15px}
.consent a{text-decoration:underline;text-underline-offset:2px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);border-radius:0;
  padding:15px 26px;cursor:pointer;
  font-size:var(--micro);letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  transition:background .35s var(--ease),color .35s var(--ease);
  width:100%;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn svg{transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn[disabled]{opacity:.5;cursor:default}

.form-msg{margin:14px 0 0;font-size:12.5px;line-height:1.6;min-height:1px}
.form-msg.ok{color:#2f6b3f}     /* absichtlich gruen — Erfolgsmeldung */
.form-msg.err{color:#9d2f2f}
.demo-note{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-soft)}

/* ==========================================================================
   Fuss
   ========================================================================== */

.foot{background:var(--ink);color:var(--paper);padding-top:clamp(60px,9vw,110px);position:relative;overflow:hidden}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(30px,5vw,60px);align-items:start}
.foot__nav{list-style:none;margin:0;padding:0}
.foot__nav li{border-bottom:1px solid var(--line-dark)}
.foot__nav a{
  font-family:var(--f-display);
  display:block;padding:clamp(8px,1vw,14px) 0;
  font-size:clamp(24px,4.2vw,52px);font-weight:400;letter-spacing:-.035em;line-height:1.22;
  text-transform:uppercase;
  transition:opacity .3s var(--ease),transform .45s var(--ease);
}
.foot__nav a:hover{opacity:.55;transform:translateX(9px)}
.foot__nav sup{font-size:.3em;font-weight:500;letter-spacing:.06em;vertical-align:super;opacity:.6;margin-left:5px}

.foot__side{display:grid;gap:22px;justify-items:start}
.foot__side .micro{margin-bottom:8px}
.foot__mail{font-size:clamp(14px,1.2vw,17px);border-bottom:1px solid var(--line-dark);padding-bottom:3px}
.foot__mail:hover{border-color:var(--paper)}

.foot__social{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;letter-spacing:.08em}
.foot__social a{opacity:.65;transition:opacity .3s var(--ease)}
.foot__social a:hover{opacity:1}

.foot__legal{
  display:flex;flex-wrap:wrap;               /* ohne wrap wird die Seite waagerecht scrollbar */
  gap:10px 22px;justify-content:space-between;align-items:center;
  padding:clamp(28px,4vw,50px) 0 clamp(20px,3vw,34px);
  margin-top:clamp(30px,5vw,60px);
  border-top:1px solid var(--line-dark);
  font-size:11.5px;letter-spacing:.06em;color:var(--ink-mute);
}
.foot__legal a:hover{color:var(--paper)}

.foot .wordmark{--wm-size:clamp(120px,26vw,400px);position:relative}
.foot .wordmark span{color:var(--paper)}

/* ==========================================================================
   Einblenden beim Scrollen
   ========================================================================== */

.rise{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.is-in{opacity:1;transform:none}

/* ==========================================================================
   Schmale Viewports
   ========================================================================== */

@media (max-width:1080px){
  .intro__grid{grid-template-columns:1fr 1fr}
  .intro__col--b{grid-column:1/-1;padding-top:clamp(20px,4vw,40px);order:-1}
  .intro__col--a,.intro__col--c{padding-top:0}
  .dark__grid{grid-template-columns:1fr}
  .dark__figure{min-height:0}
  .dark__figure img{height:auto;aspect-ratio:4/5}
  .dark__figure .card-note{position:static;width:auto;margin-top:14px}
  .work__grid{grid-template-columns:repeat(2,1fr)}
  .contact__grid{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
}

@media (max-width:920px){
  .index__peek{display:none}       /* kein Hover auf Touch */
  .scroll-hint{display:none}
  .badge{display:none}             /* zu wenig Platz neben der Info-Karte */
}

@media (max-width:560px){
  .burger__label{display:none}     /* hier ist das Symbol allgemein verstanden */
}

@media (max-width:640px){
  .work__grid{grid-template-columns:1fr}
  .hero__panel{bottom:clamp(66px,13vh,120px)}
  .hero__cards{min-height:150px}
  .foot__legal{justify-content:flex-start}
}

/* ==========================================================================
   Touch: iOS zoomt jedes Feld unter 16px beim Fokus.
   Auf die Touch-Bedingung zielen, nicht auf die Breite — ein iPad im
   Querformat ist 1024px breit und zoomt trotzdem.
   ========================================================================== */

@media (hover:none) and (pointer:coarse){
  .field input,.field select,.field textarea{font-size:16px;padding:12px 13px}
}



/* ==========================================================================
   BEWEGUNG
   Alles handgemacht — keine Fremdbibliothek, damit die Seite weiterhin
   null externe Aufrufe macht. Animiert wird ausschliesslich transform,
   opacity und clip-path; das laeuft auf der Compositor-Ebene.
   Ganz unten schaltet prefers-reduced-motion alles wieder ab.
   ========================================================================== */

/* --- Intro-Blende ------------------------------------------------------- */

.veil{
  position:fixed;inset:0;z-index:200;
  background:var(--ink);
  display:none;
  align-items:center;justify-content:center;
  transform:translateY(0);
  transition:transform 1s cubic-bezier(.76,0,.24,1);
}
html.js .veil{display:flex}
html.js .veil.is-out{transform:translateY(-101%)}
html.js .veil.is-done{display:none}

.veil__word{
  display:flex;
  font-family:var(--f-display);
  font-weight:var(--wm-weight);
  font-size:clamp(64px,15vw,190px);
  letter-spacing:-.045em;
  line-height:1;
  color:var(--paper);
  overflow:hidden;
  padding-bottom:.06em;
}
.veil__word span{
  display:block;
  transform:translateY(110%);
  transition:transform .85s cubic-bezier(.16,1,.3,1);
}
/* Die drei Buchstaben laufen nacheinander ein — der mittlere zuletzt,
   dadurch schliesst sich das Wort zur Mitte hin. */
.veil__word span:nth-child(1){transition-delay:.05s}
.veil__word span:nth-child(3){transition-delay:.13s}
.veil__word span:nth-child(2){transition-delay:.21s}
.veil.is-in .veil__word span{transform:translateY(0)}

body.veil-on{overflow:hidden}

/* --- Text, der sich wortweise einsortiert -------------------------------
   Jedes Wort sitzt in einer Maske und steigt aus ihr auf. Das Polster unten
   faengt Unterlaengen (g, j, p) ab, die sonst abgeschnitten wuerden. */

.split .w{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  padding-bottom:.14em;
  margin-bottom:-.14em;
}
.split .w > i{
  display:inline-block;
  font-style:inherit;
  transform:translateY(105%);
  opacity:0;
  transition:transform .85s cubic-bezier(.16,1,.3,1),opacity .6s linear;
  transition-delay:calc(var(--i,0) * 38ms);
}
.split.is-in .w > i{transform:translateY(0);opacity:1}

/* --- Bilder: Wischblende statt Ueberblendung ---------------------------- */

.reveal{overflow:hidden}
.reveal img{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.08);
  transition:clip-path 1.1s cubic-bezier(.76,0,.24,1),transform 1.4s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 90ms);
}
.reveal.is-in img{clip-path:inset(0 0 0 0);transform:scale(1)}

/* Zwei Faelle duerfen NICHT beschnitten werden: die Passermarken der Collage
   sitzen 5px ausserhalb ihres Rahmens, und die Karte im dunklen Block ragt
   unten heraus. Dort macht die clip-path-Blende die Arbeit allein — der
   Aufzoom entfaellt, sonst liefe das Bild ueber seine Nachbarn. */
.reveal--open{overflow:visible}
.reveal--open img{transform:none}
.reveal--open.is-in img{transform:none}

/* --- Rotierendes Rundlabel im Hero -------------------------------------- */

.badge{
  position:absolute;z-index:6;
  right:clamp(18px,4vw,64px);
  bottom:clamp(96px,18vh,210px);
  width:clamp(84px,7.5vw,110px);height:clamp(84px,7.5vw,110px);
  color:var(--paper);
  pointer-events:none;
  opacity:0;
  transition:opacity .8s var(--ease) .9s;
}
html.js.ready .badge{opacity:.85}
.badge svg{width:100%;height:100%;animation:spin 22s linear infinite}
.badge text{
  font-family:var(--f);
  font-size:9.6px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  fill:currentColor;
}
.badge__dot{
  position:absolute;top:50%;left:50%;
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  background:currentColor;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- Riesenwort, das beim Scrollen quer zieht --------------------------- */

.drift{
  position:absolute;left:0;right:0;
  top:clamp(-46px,-2.2vw,-16px);
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.drift span{
  display:block;white-space:nowrap;
  font-family:var(--f-display);
  font-size:clamp(70px,13vw,190px);
  font-weight:var(--wm-weight);
  letter-spacing:-.04em;
  line-height:1;
  color:var(--paper);
  opacity:.045;
  will-change:transform;
}
.dark{position:relative;overflow:hidden}
.dark .wrap{position:relative;z-index:1}

/* --- Index-Zeilen: Fuellung laeuft von links ein ------------------------ */

.index__row a{position:relative;isolation:isolate}
.index__row a::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.76,0,.24,1);
}
.index__row a:hover::before{transform:scaleX(1)}
.index__row a:hover{background:transparent}   /* die Fuellung macht jetzt der Balken */

/* --- Kleinigkeiten ------------------------------------------------------ */

.work__item figure{position:relative}
.foot__nav a{will-change:transform}

/* ==========================================================================
   Wer weniger Bewegung eingestellt hat, bekommt die Seite in Ruhe.
   Nichts wird dabei unsichtbar — alle Endzustaende gelten sofort.
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html.js .veil{display:none}
  .split .w > i{transform:none;opacity:1;transition:none}
  .reveal img{clip-path:none;transform:none;transition:none}
  .badge svg{animation:none}
  .drift span{transform:none!important}
  .hero__media{transform:none!important}
  html.js .hero__slide img,html.js .card-note{animation:none!important}
  .index__row a::before{transition:none}
}


/* ==========================================================================
   AKZENTFARBE — stiller Haken, aktuell ohne Bedienelement
   --accent zeigt auf die Tinte, --accent-ink auf das Papier. Die Vorlage
   bleibt damit unbunt, genau wie entworfen: diese Zeilen aendern nichts.
   Sie stehen hier, weil der Vorschau-Regler bis zum 02.09.2026 einen
   Farbregler hatte und ihn wieder bekommen kann — dann genuegt es, --accent
   am <html> zu setzen. Ohne diesen Haken muessten alle Stellen unten erneut
   gesucht werden.
   ========================================================================== */

:root{
  --accent:var(--ink);
  --accent-ink:var(--paper);
}

.micro::before,
.card-note__meta::before{background:var(--accent)}

.btn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:hover{background:transparent;color:var(--accent)}

.index__row a::before{background:var(--accent)}
.index__row a:hover{color:var(--accent-ink)}
.index__row a:hover .index__num{color:var(--accent-ink);opacity:.55}

.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.consent input{accent-color:var(--accent)}

.hero__dot s::after{background:var(--accent)}
.foot__mail:hover{border-color:var(--accent)}
.badge{color:var(--paper)}

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