/* ==========================================================================
   harper — ModelHub-Vorlage, Entwurf 01.10.2026

   Leitidee: eine Kollektion, die man seitlich durchblaettert. Mausrad und
   Trackpad bewegen die Seite nach RECHTS (Richtung: Dribbble „Kove", von
   Mathias geschickt). Schwarz-weiss mit harten Kanten, eine weiche,
   geschwungene Serife fuer den Namen, eine Grotesk in Versalien fuer alles
   Laute, winzige Mikroschrift in den Ecken.

   ZWEI MODI, gesetzt im <head> bevor etwas gezeichnet wird:
     html.is-h   Desktop mit Maus: <main> ist so hoch wie die Spur breit ist,
                 eine sticky Buehne zeigt die Spur, script.js verschiebt sie.
     sonst       Kapitel untereinander, Arbeiten als Wisch-Streifen.
   ========================================================================== */

:root{
  /* Helles Terrakotta (Wahl Mathias 01.10., „T2"): warmer Erdton, hebt sich von
     den Creme-/Sand-Vorlagen ab. Zwischenstaende waren warmes Hellgrau #f2f1ee
     und Eisblau #edf2f6. */
  --paper:#f0d9cb;
  --paper-2:#e7ccbb;
  --ink:#111110;
  --ink-soft:rgba(17,17,16,.6);
  --line:rgba(17,17,16,.16);
  --accent:var(--ink);            /* stiller Haken fuer den Vorschau-Regler */

  --serif:"Instrument Serif","Times New Roman",serif;   /* nur noch kleine kursive Akzente */
  --name:"Marcellus","Trajan Pro",Georgia,serif;          /* der Name, immer in Versalien */
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;

  --gut:clamp(18px,2.4vw,36px);
  --fuge:10px;                     /* die schwarzen Fugen der Bildwand */
  --H:100svh;                      /* Buehnenhoehe im Seitwaerts-Modus */
  --ease:cubic-bezier(.2,.7,.1,1);
}
@supports not (height:100svh){ :root{--H:100vh} }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
figure{margin:0}
::selection{background:var(--ink);color:var(--paper)}

.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--ink);color:var(--paper);padding:10px 16px;font-size:13px;text-decoration:none}
.skip:focus{top:12px}

.micro{margin:0;font:500 10.5px/1.35 var(--sans);letter-spacing:.06em;text-transform:uppercase}

/* Laute Versalien in der Grotesk. Groesse an der HOEHE ausgerichtet — im
   Seitwaerts-Modus ist die Hoehe der knappe Rahmen, nicht die Breite. */
.big{margin:0;font:500 clamp(48px,min(12vh,9vw),150px)/.86 var(--sans);letter-spacing:-.045em;text-transform:uppercase}
.big--light{color:var(--paper)}

/* ------------------------------------------------------------------ Auftritt
   Nur der Name: Er steht zuerst mittig, die Buchstaben laufen auseinander,
   dann wandert er nach links an seinen Platz (script.js, Web Animations).
   Solange .auftritt am <html> steht, ist alles andere ausgeblendet. Die
   Klasse setzt NUR script.js und nimmt sie spaetestens nach 3,2 s wieder weg. */
.intro__name .ch{display:inline-block;will-change:transform}
.bar,.rail,.intro__sub,.intro__corner,.wall,.h-wrap > .h-sticky > .h-track > .panel:not(.intro){transition:opacity .9s var(--ease),translate 1.1s var(--ease)}
html.auftritt .bar,html.auftritt .rail,html.auftritt .intro__sub,html.auftritt .intro__corner{opacity:0}
html.auftritt .wall{opacity:0;translate:14vw 0}
/* Der Name selbst wartet, bis die Animation ihn uebernimmt (.laeuft) */
html.auftritt:not(.laeuft) .intro__name{opacity:0}
html.auftritt .h-track > .panel:not(.intro):not(.wall){opacity:0}

/* ------------------------------------------------------------------ Ecken */
/* Fester heller Rahmen (Wunsch Mathias 01.10.): oben, unten und die Leiste
   links haben Papiergrund, die Kapitel gleiten darunter durch wie durch einen
   Sucher. Vorher kehrte eine Mischmodus-Umkehr (difference) den Untergrund um —
   ueber mittelhellen Fotos hob sich die Schrift damit auf und war unlesbar. */
.bar,.rail{background:var(--paper);color:var(--ink)}
.bar{position:fixed;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:16px var(--gut);font:500 10.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.bar > *{pointer-events:auto}
.bar--top{top:0;padding-block:15px;border-bottom:1px solid var(--line)}
.bar--bottom{bottom:0;display:none;padding-block:13px;border-top:1px solid var(--line)}
.bar__name{text-decoration:none}
.bar__nav{display:flex;align-items:center;gap:24px}
.bar__nav a{text-decoration:none}
.bar__nav a i{font-style:normal;margin-left:2px;display:inline-block;transition:transform .4s var(--ease)}
.bar__nav a:hover i{transform:rotate(90deg)}
.lang{display:flex;gap:4px;margin-left:8px;color:var(--ink-soft)}
.lang button{font:inherit;letter-spacing:inherit;opacity:.6}
.lang button.is-active,.lang button:hover{opacity:1;color:var(--ink)}


.rail{position:fixed;left:0;top:0;bottom:0;z-index:55;width:58px;display:none;flex-direction:column;justify-content:space-between;
  align-items:center;padding:64px 0 52px;border-right:1px solid var(--line);
  transform:translateX(-100%);transition:transform .7s var(--ease),color .4s}
.rail__name{writing-mode:vertical-rl;transform:rotate(180deg);font:400 22px/1 var(--name);letter-spacing:.06em;text-transform:uppercase}
.rail__count{writing-mode:vertical-rl;transform:rotate(180deg);font:500 10.5px/1 var(--sans);letter-spacing:.06em}
.rail__count b{font-weight:500}
html.zeigt-leiste .rail{transform:none}

.progress{flex:1;max-width:320px;height:1px;background:var(--line);position:relative;overflow:hidden}
.progress i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0)}

/* ------------------------------------------------------------------ Kapitel (gestapelt, Grundfall) */
.panel{position:relative}
.intro{min-height:100svh;display:grid;align-content:center;padding:90px var(--gut) 60px;background:var(--paper)}
.intro__name{margin:0;display:grid;font:400 clamp(64px,19vw,420px)/.86 var(--name);letter-spacing:.015em;text-transform:uppercase}
.intro__last{padding-left:.6em}
.intro__sub{max-width:250px;margin-top:34px}
.intro__corner{position:absolute;right:var(--gut);bottom:24px}

.wall{display:grid;grid-template-columns:1fr 1fr;gap:var(--fuge);padding:var(--fuge);background:var(--ink)}
.wall__col{display:grid;gap:var(--fuge);align-content:start}
.t{overflow:hidden;background:#222}
.t img{width:100%;height:100%;object-fit:cover}
.t--34{aspect-ratio:3/4}.t--43{aspect-ratio:4/3}.t--45{aspect-ratio:4/5}.t--23{aspect-ratio:2/3}.t--11{aspect-ratio:1/1}

.about{display:grid;gap:28px;padding:110px var(--gut) 90px;background:var(--paper)}
.about__img{overflow:hidden;aspect-ratio:4/5}
.about__img img{width:100%;height:100%;object-fit:cover}
.about__lede{margin:0 0 20px;font:400 clamp(26px,3.2vw,38px)/1.1 var(--serif);letter-spacing:-.01em}
.about__lede em{font-style:italic}
.about__text > p:not(.about__lede){margin:0 0 24px;max-width:430px;color:var(--ink-soft)}
.about__small{width:42%;aspect-ratio:3/4;overflow:hidden}
.about__small img{width:100%;height:100%;object-fit:cover}
/* „DATEN 2026": die Jahreszahl klein, kursiv, in der Akzentschrift */
.big--sed em{font:italic 400 .34em/1 var(--serif);letter-spacing:0;text-transform:none;vertical-align:top;margin-left:.15em}
.sed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:24px 0;border-top:1px solid var(--ink)}
.sed div{padding:12px 0 10px;border-bottom:1px solid var(--line)}
.sed dt{font:500 10px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.sed dd{margin:0;font:400 30px/1 var(--serif)}
/* Woerter (Haare, Augen, Sprachen) kleiner als Zahlen, sonst stossen sie in der engen Spalte aneinander */
.sed dd[data-i18n]{font-size:.62em;line-height:1.15;padding-right:6px}

.areas{display:grid;gap:var(--fuge);background:var(--ink);padding:var(--fuge)}
.area{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;color:var(--paper);text-decoration:none;container-type:inline-size}
.area img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),filter .6s}
.area::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 45%)}
.area__num,.area__name,.area__desc{position:absolute;z-index:1;left:20px}
.area__num{top:18px}
.area__name{bottom:44px;font:500 13cqw/.9 var(--sans);letter-spacing:-.045em;text-transform:uppercase;white-space:nowrap}
.area__desc{bottom:20px}

.work{padding:110px 0 70px;background:var(--paper)}
/* Weicher Uebergang ins Schwarz (Wunsch Mathias 01.10.): --dunkel (0…1) setzt
   script.js, je nachdem wie weit der Kontakt hereingeschoben ist. Arbeiten,
   Kontakt und der Rahmen dunkeln im Gleichschritt ab — keine harte Kante
   mehr zwischen hellem und schwarzem Kapitel. */
.work,.contact{background:color-mix(in srgb,var(--paper),var(--ink) calc(var(--dunkel,0) * 100%))}
.bar,.rail{background:color-mix(in srgb,var(--paper),var(--ink) calc(var(--dunkel,0) * 100%));transition:color .35s,border-color .35s}
html.auf-dunkel .bar,html.auf-dunkel .rail{color:var(--paper);border-color:rgba(240,217,203,.18)}
html.auf-dunkel .lang{color:rgba(240,217,203,.6)}
html.auf-dunkel .lang button.is-active,html.auf-dunkel .lang button:hover{color:var(--paper)}
html.auf-dunkel .progress{background:rgba(240,217,203,.25)}
html.auf-dunkel .progress i{background:var(--paper)}
.work__head{padding:0 var(--gut) 34px}
.work__ticker{margin:18px 0 0;overflow:hidden;white-space:nowrap;font:400 22px/1 var(--serif);font-style:italic}
.strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 16px;scrollbar-width:thin}
.piece{flex:none;width:72vw;scroll-snap-align:start}
.piece--32{width:86vw}
.piece img{width:100%;object-fit:cover}
.piece--45 img{aspect-ratio:4/5}.piece--32 img{aspect-ratio:3/2}
.piece figcaption{display:flex;gap:12px;align-items:baseline;padding-top:10px;font:500 10.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.piece figcaption span{font:400 19px/1 var(--serif);letter-spacing:0;text-transform:none}
.piece figcaption i{font-style:normal;color:var(--ink-soft);margin-left:auto}

.contact{color:var(--paper);padding:0 0 24px}
.bands{display:grid}
.band{overflow:hidden;padding:6px 0}
.band--light{background:var(--paper);color:var(--ink)}
.band--dark{color:var(--paper)}
/* Laufband: EINE Zeile, Namen mit Abstand, endlos. (Diese Regeln standen
   bis 01.10. im Block des alten Vorspanns und gingen mit ihm verloren — die
   Baender brachen um, der Kontakt wurde 2,5 Bildschirme hoch.) */
.band p{margin:0;display:flex;white-space:nowrap;font:400 clamp(54px,11vh,130px)/1 var(--name);letter-spacing:.02em;text-transform:uppercase}
.band p span{padding-right:.45em}
@keyframes links{to{transform:translateX(-50%)}}
@keyframes rechts{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.band--light p{animation:links 26s linear infinite}
.band--dark p{animation:rechts 26s linear infinite}
.contact__grid{display:grid;gap:34px;padding:50px var(--gut) 40px}
.contact .micro{color:rgba(240,217,203,.6);margin-bottom:12px}
.contact__meta{margin:22px 0 0;display:grid;gap:10px}
.contact__meta div{display:grid;grid-template-columns:90px 1fr;gap:12px;padding-top:10px;border-top:1px solid rgba(240,217,203,.2)}
.contact__meta dt{font:500 10px/1.6 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:rgba(240,217,203,.6)}
.contact__meta dd{margin:0;font-size:14px}

.form{display:grid;gap:18px}
.field{position:relative}
.field input,.field textarea{width:100%;font:400 16px/1.4 var(--sans);color:var(--paper);background:transparent;border:0;
  border-bottom:1px solid rgba(240,217,203,.4);border-radius:0;padding:22px 0 8px;outline:0;resize:none}
.field label{position:absolute;left:0;top:22px;font:400 15px/1.4 var(--sans);color:rgba(240,217,203,.6);pointer-events:none;
  transform-origin:left top;transition:transform .35s var(--ease)}
.field input:focus,.field textarea:focus{border-color:var(--paper)}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{transform:translateY(-20px) scale(.72)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:rgba(240,217,203,.7)}
.consent input{margin-top:3px;accent-color:var(--paper)}
.btn{justify-self:start;display:inline-flex;gap:18px;align-items:center;padding:15px 24px;background:var(--paper);color:var(--ink);
  font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;transition:gap .4s var(--ease)}
.btn i{font-style:normal}
.btn:hover{gap:28px}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.demo-note{margin:0;font-size:13px;line-height:1.55;color:var(--paper)}

.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 22px;padding:16px var(--gut) 0;
  border-top:1px solid rgba(240,217,203,.2);font:400 11.5px/1.5 var(--sans);color:rgba(240,217,203,.6)}
.legal a{color:inherit}

/* ------------------------------------------------------------------ Verweise auf die Unterseiten */
.pfeil{display:inline-block;padding-bottom:6px;border-bottom:1px solid currentColor;text-decoration:none;
  font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.about__text .more{margin:0 0 26px}
.strip__more{flex:none;display:flex;flex-direction:column;justify-content:space-between;width:60vw;aspect-ratio:4/5;padding:22px;
  background:var(--ink);color:var(--paper);text-decoration:none;scroll-snap-align:start}
.strip__more b{font:400 clamp(40px,7vw,84px)/.9 var(--name);text-transform:uppercase;letter-spacing:.01em}
.strip__more i{font-style:normal;font-size:40px;transition:transform .5s var(--ease)}
.strip__more:hover i{transform:translateX(10px)}
html.is-h .strip__more{width:auto;aspect-ratio:auto;height:calc(var(--H) - 186px);width:calc((var(--H) - 186px) * .62);align-self:flex-start}

/* ------------------------------------------------------------------ Pro-Unterseiten (01.10.2026)
   Erzeugt von ops/bau-pro-harper.py. Senkrecht, ohne Buehne — die Kopfleiste
   ist dieselbe feste Papierleiste wie auf der Startseite. */
.pro{background:var(--paper)}
.pro-head{padding:120px var(--gut) 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.55fr);gap:30px;align-items:end}
.pro-head .micro{margin-bottom:16px}
.pro-head h1{margin:0;font:400 clamp(52px,8.6vw,150px)/.86 var(--name);letter-spacing:.01em;text-transform:uppercase}
.pro-lede{margin:0 0 10px;font:400 clamp(20px,1.8vw,26px)/1.3 var(--serif)}
.filter{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--gut) 34px}
.filter button{display:inline-flex;gap:8px;align-items:baseline;padding:11px 18px;border:1px solid rgba(17,17,16,.35);
  font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;transition:background .3s,color .3s}
.filter button i{font-style:normal;opacity:.55}
.filter button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.filter button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:0 var(--gut) 90px;align-items:start}
.pf-col{display:grid;gap:18px}
.pf-col:nth-child(2){margin-top:90px}
.pf{margin:0;cursor:pointer;overflow:hidden}
.pf img{width:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pf--45 img{aspect-ratio:4/5}.pf--23 img{aspect-ratio:2/3}
.pf:hover img{transform:scale(1.03)}
.pf:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.pf.is-hidden{display:none}
.pf figcaption{display:flex;gap:10px;align-items:baseline;padding-top:10px;font:600 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.pf figcaption span{font:400 19px/1 var(--serif);letter-spacing:0;text-transform:none}
.pf figcaption i{margin-left:auto;font-style:normal;color:var(--ink-soft)}
.pro-end{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin:0 var(--gut);padding:26px 0 90px;border-top:1px solid var(--line)}
.pro-end p{margin:0;font:400 20px/1.3 var(--serif)}

.lb{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;padding:70px clamp(14px,7vw,110px);background:color-mix(in srgb,var(--paper) 97%,transparent)}
.lb__fig{margin:0;display:grid;justify-items:center;gap:14px}
.lb__fig img{max-width:100%;max-height:calc(100svh - 190px);width:auto;height:auto}
.lb__fig figcaption{display:flex;gap:16px;align-items:baseline;font:600 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.lb__fig figcaption span{font:400 22px/1 var(--serif);letter-spacing:0;text-transform:none}
.lb__fig figcaption i{font-style:normal;color:var(--ink-soft)}
.lb__btn{position:absolute;top:50%;width:54px;height:54px;margin-top:-27px;border:1px solid rgba(17,17,16,.35);font-size:22px;transition:background .3s,color .3s}
.lb__btn:hover{background:var(--ink);color:var(--paper)}
.lb__prev{left:clamp(10px,2.5vw,36px)}.lb__next{right:clamp(10px,2.5vw,36px)}
.lb__close{position:absolute;top:22px;right:var(--gut);padding-bottom:5px;border-bottom:1px solid currentColor;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.lb__count{position:absolute;top:24px;left:var(--gut);margin:0;font:600 11px/1 var(--sans);letter-spacing:.08em}

.pro-bio{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);padding:20px var(--gut) 90px;align-items:start}
.pro-bio__fig{margin:0;position:sticky;top:80px;aspect-ratio:3/4;overflow:hidden}
.pro-bio__fig img{width:100%;height:100%;object-fit:cover}
.pro-bio__text .about__lede{margin-bottom:26px}
.pro-bio__text > p:not(.about__lede){max-width:540px;margin:0 0 18px;color:var(--ink-soft)}
.pro-sub{margin:50px 0 16px}
.cv{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.cv li{display:grid;grid-template-columns:80px 1fr;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.cv b{font:400 24px/1 var(--name)}
.cv span{font-size:15px}
.pro .sed{grid-template-columns:repeat(3,minmax(0,1fr))}
.pro-wide{margin:0;padding:0 var(--gut) 90px}
.pro-wide img{width:100%;aspect-ratio:3/2;object-fit:cover}
.pro-wide figcaption{display:flex;justify-content:space-between;padding-top:10px;font:600 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.pro-wide figcaption span{font:400 19px/1 var(--serif);letter-spacing:0;text-transform:none}
.pro-foot{background:var(--ink);padding:22px 0 26px}
.pro .contact{padding-top:0;background:var(--ink)}   /* auf Unterseiten von Anfang an schwarz */
/* Gestapelt (Handy, Tablet mit Touch): kein Abdunkeln ueber die Buehne — Kontakt einfach schwarz,
   Arbeiten bleibt hell. Das Abdunkeln gehoert zur Seitwaerts-Fahrt. */
html:not(.is-h) .contact{background:var(--ink)}
html:not(.is-h) .work{background:var(--paper)}

@media (max-width:900px){
  .pro-head,.pro-bio{grid-template-columns:1fr}
  .pro-bio__fig{position:static;max-width:520px}
  .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-col{display:contents}
  .pf-col:nth-child(2){margin-top:0}
}

/* ------------------------------------------------------------------ Einblenden */
html.js .rise{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
html.js .rise.is-in{opacity:1;transform:none}

/* ------------------------------------------------------------------ Gestapelt, ab Tablet */
@media (min-width:700px){
  .wall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .areas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .area{aspect-ratio:9/16}
  .about{grid-template-columns:1fr 1fr}
  .about__head{grid-column:1/-1}
  .piece{width:42vw}.piece--32{width:60vw}
  .contact__grid{grid-template-columns:1fr 1fr;gap:60px}
}

/* ==========================================================================
   SEITWAERTS-MODUS (html.is-h)
   ========================================================================== */
html.is-h .bar--bottom{display:flex}
html.is-h .rail{display:flex}
html.is-h .h-wrap{position:relative}               /* Hoehe setzt script.js */
html.is-h .h-sticky{position:sticky;top:0;height:var(--H);overflow:hidden}
html.is-h .h-track{display:flex;height:var(--H);width:max-content;will-change:transform}
html.is-h .panel{flex:none;height:var(--H);min-height:0}

/* 01 Start: eine Bildschirmbreite */
/* Nur 72 % breit: Die Bildwand ragt schon rechts ins erste Bild und zieht weiter */
html.is-h .intro{width:72vw;padding:0 var(--gut);align-content:center}
html.is-h .intro__name{font-size:min(27vh,13.5vw)}

/* 02 Bildwand: vier Spalten, jede genau so hoch wie die Buehne.
   Spaltenbreite = (Hoehe − 3 Fugen) / Summe der Hoehen je Breiteneinheit.
   Diese Faktoren MUESSEN zu den Seitenverhaeltnissen passen (harper-bilder.py). */
html.is-h .wall{display:flex;gap:var(--fuge);padding:var(--fuge);height:var(--H)}
html.is-h .wall__col{display:flex;flex-direction:column;gap:var(--fuge);width:calc((var(--H) - 3 * var(--fuge)) / var(--f))}
html.is-h .wall__col--a{--f:2.0833}   /* 3:4 + 4:3  = 1,3333 + 0,75 */
html.is-h .wall__col--b{--f:2.5}      /* 4:5 + 4:5  = 1,25 + 1,25  */
html.is-h .wall__col--c{--f:2.5}      /* 2:3 + 1:1  = 1,5 + 1      */
html.is-h .wall__col--d{--f:2.0833}   /* 4:3 + 3:4                  */
html.is-h .t{flex:none;width:100%}
/* Gegenlaeufige Spalten (Wunsch Mathias, wie in der Kove-Vorlage): jede Spalte
   hat eine dritte Kachel und ist damit hoeher als die Buehne. script.js schiebt
   sie je nach Fortschritt durch die Galerie — gerade Spalten hoch, ungerade runter.
   Die Spaltenbreite bleibt auf ZWEI Kacheln gerechnet, die dritte ist der Weg. */
html.is-h .wall{align-items:flex-start;overflow:hidden}
html.is-h .wall__col{will-change:transform}
/* Bilder etwas breiter als ihr Rahmen: script.js schiebt sie beim Vorbeiziehen (Tiefe) */
html.is-h .t img{width:118%;max-width:none;margin-left:-9%;transform:translateX(var(--px,0px))}

/* 03 Ueber mich: vier Spalten nebeneinander */
html.is-h .about{display:grid;grid-template-columns:auto auto 26vw auto;grid-template-rows:1fr;align-items:stretch;gap:clamp(30px,4vw,64px);
  padding:76px clamp(80px,7vw,120px) 64px clamp(90px,8vw,130px)}
html.is-h .about__head{grid-column:auto;align-self:start}
html.is-h .about__head .big{font-size:min(19vh,13vw)}
/* Abstand fuer die Umlautpunkte von „ÜBER" — bei Zeilenhoehe .86 ragen sie nach oben */
/* Kleine Zeile ueber einer Riesenzeile: immer genug Luft, auch fuer Umlautpunkte (ÜBER) */
.micro + .big,.micro + h2.big{margin-top:16px}
.about__head .big{padding-top:.06em}
html.is-h .about__img{height:100%;width:auto;aspect-ratio:4/5}
html.is-h .about__text{align-self:end;display:grid;gap:0}
html.is-h .about__small{width:46%;margin-top:6px}
html.is-h .about__end{display:flex;flex-direction:column;justify-content:space-between;width:min(30vw,460px)}
/* „DATEN" muss in die Spalte passen (≈ 4,9 em breit): Groesse aus der Spaltenbreite */
html.is-h .about__end .big{font-size:min(12vh,calc(min(30vw,460px) / 5.2))}   /* Spaltenbreite ÷ Wortbreite in em */

/* 04 Bereiche: drei hohe Saeulen, beim Darueberfahren wird eine breiter */
html.is-h .areas{display:flex;width:min(118vw,1700px);padding:var(--fuge);gap:var(--fuge);height:var(--H)}
html.is-h .area{flex:1;height:100%;aspect-ratio:auto;transition:flex 1s var(--ease)}
html.is-h .areas:hover .area{flex:.82}
html.is-h .areas .area:hover{flex:1.5}
html.is-h .area:hover img{transform:scale(1.04)}
/* Schriftgroesse folgt der Saeulenbreite (cqw), damit „Commercial" passt;
   ueber der Vorschau-Leiste, die unten mittig liegt */
html.is-h .area__name{font-size:min(13cqw,12vh);bottom:110px}
html.is-h .area__desc{bottom:84px}

/* 05 Arbeiten: Kopf links, dann der Filmstreifen in Buehnenhoehe */
html.is-h .work{display:flex;align-items:stretch;padding:76px 0 64px}
html.is-h .work__head{width:36vw;flex:none;padding:0 3vw 0 clamp(90px,8vw,130px);display:flex;flex-direction:column;justify-content:space-between}
html.is-h .work__head .big{font-size:min(9vh,3.7vw)}
html.is-h .work__ticker{font-size:min(4vh,30px)}
html.is-h .strip{overflow:visible;padding:0 8vw 0 0;gap:22px;align-items:flex-end}
/* Feste Bildhoehe, Breite aus dem Seitenverhaeltnis. (Mit flex:1/height:0
   rechnete Chrome die Breite aus Hoehe 0 — schmale Streifen.) */
html.is-h .piece{width:auto;flex:none;--bh:calc(var(--H) - 186px)}
html.is-h .piece img{height:var(--bh);width:auto}
html.is-h .piece:nth-child(even) img{height:calc(var(--bh) * .74)}

/* 06 Kontakt: Baender oben, darunter Formular, Fuss unten */
html.is-h .contact{width:100vw;display:grid;grid-template-rows:auto 1fr auto;padding:52px 0 46px}   /* oben Platz fuer die Ecken-Navigation, unten fuer die Fortschrittsleiste */
html.is-h .contact__grid{grid-template-columns:1fr 1fr;align-items:center;gap:6vw;padding:24px clamp(90px,8vw,130px) 18px}
html.is-h .contact .big{font-size:min(13vh,8vw)}
html.is-h .legal{padding-left:clamp(90px,8vw,130px)}
html.is-h .band p{font-size:min(12vh,150px)}

/* Kurze Fenster: Formular enger */
@media (max-height:760px){
  html.is-h .form{gap:10px}
  html.is-h .field input,html.is-h .field textarea{padding:18px 0 6px}
  html.is-h .band p{font-size:10vh}
}

/* Gestapelt: Spalten aufloesen, alle Kacheln gleich — sonst schwarze Luecken */
html:not(.is-h) .wall__col{display:contents}
html:not(.is-h) .wall .t{aspect-ratio:4/5}
.t--extra{display:none}
html.is-h .t--extra{display:block}

/* ------------------------------------------------------------------ Handy */
@media (max-width:699px){
  .bar__nav a{display:none}
  .intro__name{font-size:21vw}
  .sed{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sed dd{font-size:24px}
  .area{aspect-ratio:4/5}
}
@media (hover:none) and (pointer:coarse){
  .field input,.field textarea{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .rise{opacity:1;transform:none}
}