/* ═══════════════════════════════════════════════════════════════════════
   tw-styles.css — das gemeinsame Stylesheet.

   Wird von index.html sowie den beiden Hero-Fassungen index-v1.html und
   index-v2.html geladen. Was nur einen Hero betrifft, steht im jeweiligen
   <style>-Block der Datei, nicht hier.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   Design-System — Tinte auf Papier, eine warme Fläche, keine Akzentfarbe.
   Farbe kommt ausschliesslich aus den gezeigten Arbeiten.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#0A0A0A;
  --paper:#FFFFFF;
  --warm:#ECEAE5;
  --placeholder:#F2F2F2;
  --rule:rgba(10,10,10,.16);
  --rule-warm:rgba(10,10,10,.14);
  --pad-x:40px;
  /* Hoehe der Kopfzeile — gemessen, wird an mehreren
     Stellen gebraucht (Sprungziele, Menue, Schlusssektion). */
  --kopf-h:64px;
  --sec-y:clamp(56px,8vw,120px);
  /* Der grosse Satz. Gilt im Hero, im Projektfinder und in der
     Schlusssektion — eine Quelle, damit die drei nicht auseinanderlaufen. */
  /* Breite der schwebenden Vorschau. Steht hier, weil die Liste eine
     Spalte in genau dieser Breite freihaelt. */
  /* Gemessen bei 1440px: Luecke 470px, Vorschau 461px — 9px Spiel fuer
     beide Seiten zusammen, das Bild lag 1px auf der Ortsspalte. Schmaler
     plus etwas weiter links ergibt rund 35px Luft auf jeder Seite. */
  --vorschau-breite:min(28vw,460px);
  --reihen-gap:clamp(14px,2vw,32px);
  /* Der Projektfinder und die Werkliste bilden einen Block. Beide Abstaende
     um den Finder herum sind aus denselben zwei Groessen gebaut, damit sie
     bei jeder Fensterbreite exakt gleich hoch bleiben. */
  --finder-y:clamp(40px,5.5vw,80px);
  --work-y:clamp(30px,3.6vw,56px);
  --satz-gross:clamp(24px,3.6vw,48px);
  --satz-gross-sperrung:-.022em;
  --satz-gross-zeile:1.14;
  --ease:cubic-bezier(.2,.6,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
/* Alle Sprungziele halten die Kopfzeile plus einen echten Abstand frei.
   Ohne das laege der Anfang eines Abschnitts direkt unter der Linie. */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 28px);}
/* Unsichtbares Sprungziel — nimmt keinen Platz ein. */
.anker{display:block;height:0;}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  font-feature-settings:'tnum' 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
img{display:block;width:100%;height:auto;background:var(--placeholder);}
::selection{background:var(--ink);color:var(--paper);}

/* ── Typografische Bausteine ─────────────────────────────────────────── */
.label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;}
.caption{font-size:11px;letter-spacing:.16em;text-transform:uppercase;}
.kicker{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;}
/* Der grosse Satz — eine Groesse fuer alles: Hero, Werk-Ueberschrift,
   Projektfinder und Schlusssektion. */
.display{
  font-size:var(--satz-gross);font-weight:500;
  letter-spacing:var(--satz-gross-sperrung);
  line-height:var(--satz-gross-zeile);
}
.body{font-size:15px;line-height:1.75;}
.rule{border-top:1px solid var(--rule);}

/* ── Reveal ──────────────────────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(17px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
[data-reveal].is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1;transform:none;transition:none;}
}

/* ── Header ──────────────────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:60;background:var(--paper);
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:18px var(--pad-x);border-bottom:1px solid var(--rule);
  transition:box-shadow .25s var(--ease);
}
/* Bewusst kein Schatten beim Scrollen: die Kopfzeile soll die ganze Zeit
   dieselbe duenne Linie tragen wie im Ruhezustand. */
/* Wortmarke: das originale TW-Monogramm neben dem Namen in der Hausschrift.
   Die volle Logo-Sperrung mit „creative direction" waere bei Headergroesse
   nicht mehr lesbar — die steht deshalb unten als Abbinder. */
/* Im Kopf steht die vollstaendige Wortmarke — Monogramm und Schriftzug
   gehoeren zusammen und sind eine Zeichnung, kein gesetzter Text. */
.wordmark{display:flex;align-items:center;}
/* 28px, damit die zweite Zeile „creative direction" noch lesbar ist —
   bei 22px war sie nur noch eine Andeutung. */
.wordmark svg{width:auto;height:28px;flex:0 0 auto;display:block;}
@media (max-width:760px){
  .wordmark svg{height:24px;}
}

/* Abbinder: die vollstaendige Wortmarke, gross genug fuer die Subline. */
.signature{margin-top:clamp(40px,5.5vw,72px);}

.signature svg{width:min(268px,62vw);height:auto;display:block;}
nav.main{display:flex;gap:26px;font-size:13.5px;}
nav.main #announce-menu{display:none;}
nav.main a:hover{text-decoration:underline;text-underline-offset:4px;}
.burger{display:none;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;}

/* ── Intro ───────────────────────────────────────────────────────────── */
#intro{padding:var(--sec-y) var(--pad-x) clamp(30px,4vw,56px);}
#intro .display{max-width:20em;}
.intro-meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:clamp(28px,4vw,48px);padding-top:14px;border-top:1px solid var(--rule);
}

/* ── Kundenlauf im Hero ──────────────────────────────────────────────── */
/* Zurueckhaltend statt marktschreierisch: kleine Logos, viel Luft, langsam.
   Die Maske laesst sie an den Raendern aus- statt abschneiden. */
.marquee{
  position:relative;overflow:hidden;
  padding:clamp(20px,2.6vw,30px) 0;
  border-top:1px solid var(--rule);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee-track{
  display:flex;width:max-content;
  animation:marquee 78s linear infinite;
  overflow-anchor:none;
}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track figure{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  /* Grundhoehe mal Faktor aus den Daten — siehe buildMarquee(). */
  height:calc(clamp(28px,2.9vw,38px) * var(--f,1));
  margin:0 clamp(30px,4.4vw,62px);
}
.marquee-track img{
  width:auto;height:100%;max-width:none;background:transparent;opacity:.55;
  transition:opacity .4s var(--ease);
}
.marquee:hover .marquee-track img{opacity:.8;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* Was nicht im Bild ist, muss auch nicht laufen. Ein Telefon rechnet sonst
   vier Endlosanimationen gleichzeitig — daher das Stottern und das
   scheinbar zufaellige Stehenbleiben. Angehalten, nicht abgeschaltet: die
   Bewegung setzt an derselben Stelle wieder an. */
.clients.ruht .clients-grid,
.marquee.ruht .marquee-track{animation-play-state:paused;}

@media (prefers-reduced-motion:reduce){
  .marquee-track,.clients-grid{animation:none;}
}

/* ── Selected Work · Fullscreen-Slider ───────────────────────────────── */
#selected{border-top:1px solid var(--rule);}
.slider{position:relative;width:100vw;margin-left:calc(50% - 50vw);}
.slider-stage{
  position:relative;overflow:hidden;
  height:calc(100svh - 190px);min-height:380px;max-height:900px;
  background:var(--placeholder);
}
.slider-track{display:flex;height:100%;overflow-anchor:none;transition:transform .82s var(--ease);will-change:transform;}
.slide{flex:0 0 100%;height:100%;position:relative;cursor:zoom-in;}
.slide img{width:100%;height:100%;object-fit:cover;}
.slider-bar{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;
  margin:0 var(--pad-x);padding:12px 0 0;border-top:1px solid var(--rule);
}
.slider-meta{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;}
.slider-meta .name{font-size:clamp(14px,1.6vw,17px);font-weight:500;letter-spacing:-.01em;text-transform:none;}
.slider-nav{display:flex;align-items:baseline;gap:16px;}
.slider-nav button{font-size:19px;line-height:1;padding:0 2px;transition:opacity .2s var(--ease);}
.slider-nav button:hover{opacity:.45;}
.slider-count{font-variant-numeric:tabular-nums;}
.slider-dots{display:flex;gap:5px;margin:0 var(--pad-x);padding-top:12px;}
.slider-dots i{flex:1;height:1px;background:var(--rule);transition:background .4s var(--ease);}
.slider-dots i.on{background:var(--ink);}

/* ── Werk-Index ──────────────────────────────────────────────────────── */
/* Bewusst ohne Trennlinie nach oben: der Slider endet mit seiner eigenen
   Haarlinie, eine zweite direkt darunter waere eine Doppelung. */
/* Weniger Vorlauf als bei den uebrigen Sektionen: die Liste ist die Antwort
   auf den Projektfinder darueber, die beiden gehoeren zusammen. Mit dem
   vollen --sec-y stuenden hier fast 175 px Leere. */
#work{padding:var(--work-y) var(--pad-x) 0;}
.work-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;}
.filters{
  display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;
  margin-top:clamp(24px,3.5vw,40px);padding-bottom:14px;
}
.filters button{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:3px;border-bottom:1px solid transparent;opacity:.45;
  transition:opacity .2s var(--ease),border-color .2s var(--ease);
}
.filters button:hover{opacity:1;}
.filters button.on{opacity:1;border-bottom-color:var(--ink);}
.filter-count{margin-left:auto;opacity:.45;font-variant-numeric:tabular-nums;}

.cat-block{margin-bottom:clamp(56px,8vw,110px);}

/* Kategorie-Auftakt: Ueberschrift eine Hierarchiestufe hoeher als die Zeilen,
   darunter ein bildhafter Streifen, dann erst die Liste. */
.cat-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:16px 0 0;border-top:1px solid var(--ink);
}
.cat-head h3{
  font-size:clamp(24px,3vw,38px);font-weight:500;letter-spacing:-.025em;line-height:1.05;
}
.cat-head .count{font-variant-numeric:tabular-nums;opacity:.45;}

/* Bildhafter Auftakt einer Kategorie: fuenf Projekte laufen als
   Endlosschleife nach links. Im Gleis stehen mehrere identische Saetze,
   die Animation schiebt um genau die Haelfte — der Ruecksprung faellt
   dadurch mit dem Anfang zusammen und ist nicht zu sehen. */
.cat-band{
  /* Kachelbreite und Abstand als Variablen: das Laufwerk misst die
     fertige Kachel und rechnet daraus, wie viele es braucht. */
  --kachel-w:clamp(230px,24vw,400px);
  --kachel-abstand:clamp(10px,1.4vw,20px);
  position:relative;
  /* Bewusst nur hidden, KEIN clip: Safari schneidet mit clip verschobene
     Kinder falsch zu — auf dem Telefon verschwanden die Kacheln bei etwa
     halber Bildschirmbreite. */
  overflow:hidden;
  /* Ohne das versucht die Scrollverankerung, eine laufende Kachel
     festzuhalten, und korrigiert die Seitenposition dauernd nach. */
  overflow-anchor:none;
  margin:clamp(20px,3vw,34px) 0 clamp(26px,4vw,46px);
}
/* Alle Kacheln liegen in derselben Rasterzelle uebereinander; bewegt und
   verteilt werden sie einzeln per Web Animations (baenderStarten() in
   tw-site.js). Die Zelle ist so hoch wie die hoechste Kachel — die Hoehe
   braucht kein Skript. Es gibt kein ueberbreites Gleis mehr, das als eine
   Grafikebene die Obergrenze sprengen koennte.

   align-items:start ist noetig, nicht Feinschliff: .band-item ist ein
   <button>, und Buttons zentrieren ihren Inhalt senkrecht. Gestreckt
   verteilte eine Kachel mit einzeiliger Unterschrift ihren Rest oben und
   unten, und die Linien unter den Bildern lagen versetzt. */
.cat-band-track{
  display:grid;grid-template-columns:max-content;align-items:start;
  overflow-anchor:none;
}
.band-item{
  grid-area:1 / 1;
  box-sizing:border-box;
  width:calc(var(--kachel-w) + var(--kachel-abstand));
  /* Der Abstand steckt in der Kachel, damit ihre Breite der Takt ist */
  padding:0 var(--kachel-abstand) 0 0;
  display:block;text-align:left;cursor:pointer;
}
/* Ruhige Fassung ohne Bewegung (Systemeinstellung „Bewegung reduzieren"
   oder ein Browser ohne Web Animations): eine Reihe zum Wischen. */
.cat-band.steht{overflow-x:auto;overscroll-behavior-x:contain;}
.cat-band.steht .cat-band-track{display:flex;width:max-content;}
.cat-band.steht .band-item{grid-area:auto;}
.band-item figure{overflow:hidden;background:var(--placeholder);aspect-ratio:4/3;}
.band-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
@media (hover:hover){.band-item:hover img{transform:scale(1.035);}}
.band-cap{
  display:flex;justify-content:space-between;gap:10px;
  border-top:1px solid var(--rule);margin-top:9px;padding-top:8px;
}
.band-cap span:last-child{text-align:right;}

/* Liste: filigran und kompakt — sie traegt 71 Zeilen, nicht 5. */
.rows{border-bottom:1px solid var(--rule);}
/* Nr · Titel · Kunde · Ort · Rolle — der Kunde ist eine Angabe wie jede
   andere, kein hervorgehobenes Element. */
.row{
  display:grid;
  /* Sechs Spalten, von denen eine leer bleibt: Nr, Titel und Kunde stehen
     links, Ort und Rolle rechts, dazwischen liegt eine Luecke in der Breite
     der Vorschau. So verdeckt das Hoverbild keine einzige Spalte. Die
     Luecke rechnet die beiden angrenzenden Spaltenabstaende heraus, die
     ohnehin schon Freiraum sind.

     Gemessen bei 1440px spannte die Luecke 521px, das Hoverbild ist aber
     nur 460px breit — 61px lagen brach. Der Zuschlag steht deshalb auf
     10px statt 60px, und die gewonnene Breite geht an die Rollenspalte
     (0.75fr -> 1.05fr), in der die meisten Abschnitte auftraten. Weiter
     laesst sich nicht gehen, ohne dass die Vorschau wieder eine Spalte
     verdeckt. */
  grid-template-columns:
    26px
    minmax(0,1.6fr)
    minmax(0,1fr)
    calc(var(--vorschau-breite) + 70px - 2 * var(--reihen-gap))
    minmax(0,.92fr)
    minmax(0,1.05fr);
  gap:var(--reihen-gap);align-items:baseline;
  /* Jede Zeile gleich hoch, unabhaengig von der Schriftgroesse ihrer
     Zellen: eine feste Zeilenhoehe plus gleicher Innenabstand. Vorher
     bestimmte der laengste Umbruch die Hoehe, und die Liste wirkte
     unruhig. */
  --zeile-h:22px;
  padding:8px 0;border-top:1px solid var(--rule);
  cursor:pointer;text-align:left;width:100%;
}
/* Alles einzeilig — was nicht passt, endet in Auslassungspunkten. Der
   volle Text steht in der Galerie. */
.row-title,.row-client,.row-loc,.row-role{
  min-width:0;height:var(--zeile-h);line-height:var(--zeile-h);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.row-num{line-height:var(--zeile-h);}
/* Eine leere Zelle hat keine Grundlinie — align-items:baseline weicht dann
   auf die Unterkante aus und macht die Zeile hoeher. Ein geschuetztes
   Leerzeichen gibt ihr eine. */
.row-title:empty::before,.row-client:empty::before,
.row-loc:empty::before,.row-role:empty::before{content:"\00a0";}
.row-num{font-size:10px;letter-spacing:.06em;opacity:.32;font-variant-numeric:tabular-nums;}
.row-title{display:block;}
.row-name{
  font-size:clamp(13.5px,1.25vw,16px);font-weight:500;letter-spacing:-.008em;
  transition:transform .22s var(--ease);
  display:inline-block;vertical-align:baseline;
}
/* Der Zusatz steht in derselben Zeile hinter dem Titel, nicht darunter */
.row-note{font-size:11px;opacity:.55;margin-left:9px;}
.row-client,.row-loc{font-size:11.5px;}
.row-role{font-size:11.5px;text-align:right;}
/* Ausdrueckliche Platzierung — sonst rutscht der Ort in die leere Spalte. */
.row-num{grid-column:1;}
.row-title{grid-column:2;}
.row-client{grid-column:3;}
.row-loc{grid-column:5;}
.row-role{grid-column:6;}
.row-thumb{display:none;}
/* Der Knopf gehoert nur in schmale Fenster — am Schreibtisch steht die
   ganze Liste. */
.mehr-zeigen{display:none;}
.row-count{font-size:10px;letter-spacing:.06em;opacity:.3;margin-left:7px;font-variant-numeric:tabular-nums;}
.row{transition:opacity .25s var(--ease);}
@media (hover:hover){
  .row:hover .row-name{transform:translateX(8px);}
  /* Die angesteuerte Zeile nimmt sich zurueck, waehrend die Linse und die
     Vorschau die Aufmerksamkeit uebernehmen. */
  .row:hover{opacity:.45;}
}
.row.is-hidden{display:none;}

/* Schwebende Vorschau — der einzige Farbmoment der Seite */
/* Nach links gerueckt, damit die Vorschau die letzte Spalte der Liste
   (die Rolle) nicht mehr verdeckt. */
#preview{
  /* Der Prozentwert ist nur der Startwert, bevor vorschauSetzen() das
     Bild an der Ortsspalte ausrichtet. */
  position:fixed;right:30.3%;top:50%;transform:translateY(-50%);
  z-index:40;pointer-events:none;opacity:0;transition:opacity .22s var(--ease);
}
#preview img{
  width:auto;height:auto;max-width:var(--vorschau-breite);max-height:60vh;
  background:transparent;
}
/* Am Stempel deutlich kleiner — sie steht direkt daneben und soll den Kreis
   nicht erschlagen. */
#preview.klein img{max-width:min(17vw,240px);max-height:30vh;}

/* ── Ankuendigung ────────────────────────────────────────────────────
   Ein Stempel, kein Banner: aufgedrueckt statt eingefuegt. Er benutzt
   dieselbe Sprache wie die Lupe am Zeiger — Kreis, eine Haarlinie, Text
   in Versalien — und bleibt dadurch im System, obwohl er sich bewusst
   schief ins Raster stellt. Der leichte Winkel ist der ganze Trick: er
   liest sich als von Hand gesetzt und faellt genau deshalb auf, ohne dass
   eine Farbe oder Bewegung noetig waere. */
.announce{
  position:relative;
  width:clamp(148px,15.5vw,200px);aspect-ratio:1;
  flex:0 0 auto;
  border:1px solid var(--ink);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:16px;
  text-align:center;
  transform:rotate(-4deg);
  transition:transform .4s var(--ease);
}
/* Ist ein Ziel hinterlegt, ist der ganze Stempel der Knopf. */
a.announce:hover,button.announce:hover{transform:rotate(0deg);}
button.announce{cursor:zoom-in;}

.announce .kicker{
  font-size:10px;letter-spacing:.19em;opacity:.5;
}
.announce .wort{
  font-size:11.5px;line-height:1.42;font-weight:500;
  letter-spacing:.03em;text-transform:uppercase;
}
.announce .mehr{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;
}

/* Platz im Hero: rechts neben dem Einleitungssatz, oben buendig mit ihm. */
.intro-top{
  display:flex;align-items:flex-start;
  gap:clamp(24px,4vw,64px);
}
.intro-top .display{flex:1 1 auto;}
.intro-top #announce-hero{margin-left:auto;}

/* V1 und V2 setzen ihren Hero selbst zusammen — dort in die rechte Spalte,
   unter den Logo-Switcher. */
.hero-words #announce-hero{grid-column:2;justify-self:end;margin-top:clamp(20px,3vw,36px);}
#hero .hero-text #announce-hero,
#hero > #announce-hero{margin-left:auto;width:max-content;}

/* Zitate links, Stempel rechts — dieselben Spalten wie die Zeile darueber,
   damit der Stempel unter den Kontaktangaben steht. Er sitzt mittig zu den
   Zitaten daneben. */
.contact-mid{
  /* Weniger Luft als frueher: diese Zeile trug den 200px hohen Stempel,
     der jetzt oben steht. Die Zitate allein brauchen den Abstand nicht,
     und die Sektion soll auf einen Schirm passen. */
  margin-top:clamp(24px,3vw,42px);
}
#announce-contact{display:flex;justify-content:flex-end;}

/* Zweiter Stimmenschalter: laengere Zitate, linksbuendig. */
.voices-long{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:12px;max-width:44em;
}
.voices-long .kicker{font-size:11px;letter-spacing:.2em;opacity:.55;}
.voice-window.long{
  grid-column:auto;grid-row:auto;
  height:clamp(118px,11.5vw,152px);
}
.voice-window.long .voice-track blockquote{
  height:clamp(118px,11.5vw,152px);flex-basis:clamp(118px,11.5vw,152px);
  text-align:left;
}
.voice-window.long q{font-size:clamp(13.5px,1.45vw,17px);line-height:1.56;}

@media (max-width:760px){

  .intro-top{flex-direction:column;gap:26px;}
  .intro-top #announce-hero{margin-left:0;}
  .announce{transform:rotate(-3deg);}
}

/* ── About ───────────────────────────────────────────────────────────
   Zwei Bloecke auf warmem Grund. Oben Aussage und Stimmen nebeneinander,
   darunter Portraet links und rechts davon zwei Textspalten, unter denen
   die Tabelle steht — ihre Unterkante trifft die Unterkante des Bildes. */
#about{
  position:relative;overflow:hidden;
  background:var(--warm);border-top:1px solid var(--rule);
  padding:var(--sec-y) var(--pad-x);
}

/* Block 1 — zweispaltiges Raster mit zwei Zeilen: oben die beiden kleinen
   Marken "About" und "What clients say" auf einer Hoehe, darunter Aussage
   und Stimmen. .voices loest sich per display:contents auf, damit beide
   Zeilen exakt fluchten. */
.about-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) min(44%,500px);
  column-gap:clamp(24px,4vw,72px);
  row-gap:clamp(10px,1.2vw,14px);
  align-items:start;
}
.about-head > .label{grid-column:1;grid-row:1;}
.about-lead{
  grid-column:1;grid-row:2;
  font-size:clamp(20px,2.8vw,34px);font-weight:500;
  letter-spacing:-.02em;line-height:1.18;max-width:19em;
}

/* Block 2 — Portraet links, rechts zwei Spalten und darunter die Tabelle */
.about-grid{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(24px,4vw,64px);
  /* stretch, damit die rechte Spalte exakt so hoch wird wie das Bild */
  align-items:stretch;
  margin-top:clamp(34px,4.5vw,64px);padding-top:clamp(30px,4vw,52px);
  border-top:1px solid var(--rule-warm);
}
.about-grid figure{display:block;}
.about-grid figure img{width:100%;height:100%;object-fit:cover;}

/* Der Koerper ist selbst das Raster. .about-cols loest sich per
   display:contents auf, damit Motto, Fliesstext UND Tabelle dieselben
   zwei Spalten benutzen — nur so kann die Tabelle exakt auf den Fluchten
   von "From objects…" stehen. */
.about-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  /* Die erste Zeile ist ein Platzhalter und schluckt die ueberschuessige
     Hoehe. Dadurch sitzt der ganze Strang unten am Bild statt oben, und
     zwischen Fliesstext und Tabelle entsteht keine Luecke mehr. */
  grid-template-rows:minmax(0,1fr) auto auto auto;
  column-gap:clamp(20px,3vw,52px);
  align-items:start;height:100%;
}
.about-cols{display:contents;}
/* Motto, Fliesstext und Tabelle stehen uebereinander in der rechten Spalte */
.about-motto-block{grid-column:2;grid-row:2;margin-bottom:clamp(18px,2.2vw,30px);}
.about-text{grid-column:2;grid-row:3;}
.motto{
  font-size:clamp(17px,2vw,24px);font-weight:500;
  letter-spacing:-.02em;line-height:1.28;
}
.motto-credit{margin-top:9px;}
#about .body{font-size:14px;line-height:1.72;}
#about .body + .body{margin-top:1.1em;}

/* Die Tabelle schliesst den Block nach unten ab — buendig mit dem Bild,
   in der Breite auf die rechte Textspalte begrenzt */
.about-facts{
  grid-column:2;grid-row:4;align-self:end;
  padding-top:clamp(26px,3.4vw,48px);
}
.about-facts .fact{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.8fr);
  gap:clamp(14px,2vw,32px);align-items:baseline;
  padding:clamp(8px,1.1vw,13px) 0;
  border-top:1px solid var(--rule-warm);
}
.about-facts .fact:last-child{border-bottom:1px solid var(--rule-warm);}
.about-facts .kicker{opacity:.55;}
.about-facts p{font-size:12.5px;line-height:1.58;}
.about-facts b{font-weight:600;}

/* Testimonials — dieselbe Mechanik wie der Logo-Switcher im Hero:
   ein Fenster, eine Stimme. */
.voices{display:contents;}
/* Auf dieselbe Groesse und Sperrung wie das Label „About" daneben — die
   beiden bilden die Kopfzeile der Sektion und sind gleichrangig. */
.voices .kicker{
  grid-column:2;grid-row:1;justify-self:end;
  font-size:11px;letter-spacing:.2em;
  opacity:.55;
}
.voice-window{
  grid-column:2;grid-row:2;
  height:clamp(84px,9vw,104px);width:100%;overflow:hidden;position:relative;
}
.voice-track{display:flex;flex-direction:column;overflow-anchor:none;transition:transform .8s cubic-bezier(.72,0,.22,1);}
.voice-track blockquote{
  height:clamp(84px,9vw,104px);flex:0 0 clamp(84px,9vw,104px);
  display:flex;flex-direction:column;justify-content:flex-start;text-align:right;
}
.voice-track q{
  font-size:clamp(13px,1.5vw,17px);line-height:1.5;letter-spacing:-.01em;
  quotes:'\201E' '\201C';
}
/* Steuerung unter dem Fenster. In About rechtsbuendig in derselben Spalte
   wie das Zitat, in der Schlusssektion links unter den Zitaten. */
.voice-nav{
  display:flex;gap:16px;align-items:baseline;
  margin-top:10px;
}
.voice-nav button{
  font-size:15px;line-height:1;padding:0 2px;
  opacity:.45;transition:opacity .2s var(--ease);
}
.voice-nav button:hover{opacity:1;}
.voices .voice-nav{grid-column:2;grid-row:3;justify-self:end;}

.voice-track cite{
  font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.5;margin-top:9px;
}

/* Wortmarke und Kontaktangaben auf einer Zeile, unten an derselben
   Kante — deshalb align-items:end. Das margin-top:auto sass frueher an
   .signature; es schiebt den Fuss ans untere Ende der Sektion und muss
   deshalb an der aeusseren Huelle haengen. */
.contact-fuss{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:clamp(24px,4vw,60px);
  align-items:end;
  margin-top:auto;
  padding:clamp(30px,4vw,56px) 0 clamp(22px,2.6vw,34px);
}
.signature{margin-top:0;padding:0;}
.clients{
  padding:14px 0 16px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.clients .label{opacity:.45;margin-bottom:clamp(14px,1.8vw,22px);}
/* Die Wand am Seitenende: kompakt, damit sie mit der Kontaktsektion
   zusammen ins Bild passt. Den grossen Auftritt hat der Lauf im Hero. */
/* Feste Spaltenzahl statt auto-fill: 22 Logos gehen so in zwei volle Reihen
   auf, statt eine dritte mit zwei Nachzueglern zu oeffnen. */
.clients-grid{
  display:grid;grid-template-columns:repeat(11,minmax(0,1fr));
  gap:clamp(18px,2.2vw,28px) clamp(10px,1.3vw,18px);
}
.clients-grid figure{
  display:flex;align-items:center;justify-content:center;
  min-height:calc(clamp(26px,2.8vw,34px) * var(--f,1));
}
/* Der zweite Satz Logos gehoert dem Lauf auf schmalen Fenstern. */
.clients-grid .kopie{display:none;}
/* Die Logos kommen als schwarze Zeichnung auf Weiss aus dem PDF —
   multiply verhindert weisse Kaesten auf farbigem Grund. */
/* Wie im Lauf unter dem Hero: die Hoehe richtet sich am
   Seitenverhaeltnis aus, sonst wird ein flaches Logo dreimal so breit wie
   ein quadratisches und nur die flachen sind lesbar. Der Faktor kommt aus
   logoFaktor() in tw-site.js. */
.clients-grid img{
  width:auto;max-width:100%;
  max-height:calc(clamp(24px,2.6vw,32px) * var(--f,1));
  background:transparent;opacity:.7;
}

/* ── Kontakt ─────────────────────────────────────────────────────────── */
/* Die Schlusssektion nimmt eine ganze Schirmhoehe ein und setzt ihre Teile
   von oben nach unten ab — unten bleiben 20px Rand wie ringsum. */
#contact{
  min-height:100svh;
  display:flex;flex-direction:column;
  padding:var(--sec-y) var(--pad-x) 20px;
  border-top:1px solid var(--rule);
}
/* .contact-intro traegt die Klasse .display nicht, braucht die Werte also
   ausdruecklich. */
.contact-intro{
  font-size:var(--satz-gross);font-weight:500;
  letter-spacing:var(--satz-gross-sperrung);
  line-height:var(--satz-gross-zeile);
  margin-bottom:.12em;
}

.contact-grid{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:clamp(24px,4vw,60px);
  /* Oberkante an Oberkante: hier steht jetzt der Stempel, und der soll in
     einer Flucht mit dem Anfang der Ueberschrift stehen. Die frueher hier
     ausgerichtete Kontaktzeile ist nach unten zur Wortmarke gewandert. */
  align-items:start;
}
/* Nebeneinander statt untereinander, im rechten Drittel. */
.contact-list{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;
  gap:6px clamp(16px,2vw,30px);
  font-size:13.5px;line-height:1.4;
}
.contact-list a:hover{text-decoration:underline;text-underline-offset:4px;}
footer{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:14px;opacity:.5;
}
footer button:hover{text-decoration:underline;text-underline-offset:4px;}

/* ── Galerie-Overlay ─────────────────────────────────────────────────── */
#gallery{
  position:fixed;inset:0;z-index:200;display:none;flex-direction:column;
  background:rgba(18,18,18,.62);
  -webkit-backdrop-filter:blur(26px) saturate(1.25);backdrop-filter:blur(26px) saturate(1.25);
  opacity:0;transition:opacity .24s var(--ease);
}
#gallery.is-open{display:flex;}
#gallery.is-visible{opacity:1;}
.g-stage{
  flex:1;min-height:0;position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(56px,7vw,88px) clamp(16px,5vw,72px) clamp(12px,2vw,24px);
}
.g-stage img,.g-stage video{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;background:transparent;
}
.g-arrow{
  position:absolute;top:0;bottom:0;width:clamp(56px,12vw,140px);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:24px;opacity:.55;transition:opacity .2s var(--ease);
}
.g-arrow:hover{opacity:1;}
.g-arrow.prev{left:0;}
.g-arrow.next{right:0;}
.g-bar{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;
  color:#fff;padding:12px clamp(16px,5vw,72px) clamp(18px,3vw,28px);
}
.g-bar .name{font-size:clamp(15px,1.8vw,19px);font-weight:500;letter-spacing:-.01em;}
.g-bar .meta{opacity:.8;margin-top:5px;display:flex;flex-wrap:wrap;gap:4px 20px;}
.g-close{
  position:absolute;top:16px;right:clamp(16px,3vw,28px);z-index:2;
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:34px;line-height:1;
  transition:background .18s var(--ease);
}
.g-close:hover{background:rgba(255,255,255,.28);}
.g-count{color:#fff;font-variant-numeric:tabular-nums;}

/* Auf dem Telefon taugen Pfeile ueber dem Bild nicht: sie verdecken das
   Motiv und liegen dort, wo der Daumen ohnehin nicht hinkommt. Sie wandern
   deshalb nach unten rechts, unter das Bild — mit rundem Grund wie das
   Schliesskreuz, damit sie auf jedem Motiv sichtbar bleiben. */
@media (max-width:760px){
  /* Die Pfeile haengen an der Unterkante des BILDBEREICHS, nicht an der des
     Fensters. Am Fenster geheftet verschwinden sie auf dem Telefon hinter
     der Adressleiste — dort ist unten nie so viel Platz, wie die Rechnung
     verspricht. Der zusaetzliche Innenabstand haelt ihnen den Platz frei. */
  .g-stage{padding:60px 16px 70px;}
  .g-arrow{
    top:auto;bottom:8px;
    width:46px;height:46px;
    border-radius:50%;background:rgba(255,255,255,.14);
    font-size:21px;opacity:1;
    transition:background .18s var(--ease);
  }
  .g-arrow:active{background:rgba(255,255,255,.3);}
  .g-arrow.prev{left:auto;right:72px;}
  .g-arrow.next{right:16px;}
  /* Untereinander statt nebeneinander, und unten Platz fuer die Pfeile. */
  .g-bar{
    grid-template-columns:minmax(0,1fr);gap:6px;
    padding:10px 16px 22px;
  }
  .g-close{width:46px;height:46px;font-size:30px;}
}

/* ── Modal für Impressum / Datenschutz ───────────────────────────────── */
#modal{
  position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;
  padding:clamp(20px,5vw,72px);background:rgba(18,18,18,.55);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
}
#modal.is-open{display:flex;}
.modal-sheet{
  background:var(--paper);max-width:640px;width:100%;max-height:80vh;overflow:auto;
  padding:clamp(28px,4vw,48px);
}
.modal-sheet h3{font-size:clamp(20px,2.6vw,28px);font-weight:600;letter-spacing:-.02em;margin-bottom:18px;}
.modal-sheet p{font-size:14px;line-height:1.8;margin-bottom:1em;}

/* ══ Mobil ════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .clients-grid{grid-template-columns:repeat(8,minmax(0,1fr));}
}
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:clamp(20px,4vw,32px);align-items:start;}
  .about-grid figure img{height:auto;}
  .about-body{grid-template-columns:1fr;grid-template-rows:auto;row-gap:22px;}
  .about-motto-block,.about-text{grid-column:1;grid-row:auto;margin-bottom:0;}
  .about-facts{grid-row:auto;}
  .about-facts{grid-column:1;grid-row:auto;align-self:start;
               margin-top:clamp(24px,4vw,36px);padding-top:0;}
  .about-head{grid-template-columns:1fr;row-gap:10px;}
  .about-head > .label,.about-lead,.voices .kicker,.voice-window,
  .voices .voice-nav{
    grid-column:1;grid-row:auto;justify-self:start;
  }
  .voices .kicker{margin-top:12px;}
  .voices{width:100%;align-items:flex-start;}
  .voice-track blockquote{text-align:left;}
  /* Der zweispaltige Umbau der Schlusssektion gilt nur am Schreibtisch.
     Schmaler bleibt die Reihenfolge, die vorher galt: Ueberschrift,
     Kontaktangaben, Zitate, Stempel, Wortmarke.

     display:contents loest die drei Huellen auf — ihre Kinder werden
     damit unmittelbare Flex-Elemente von #contact und lassen sich per
     order frei sortieren. Ohne das liessen sie sich nicht ueber
     Huellengrenzen hinweg umstellen. Die Huellen verlieren dabei auch
     ihre Abstaende, die deshalb unten einzeln zurueckkommen. */
  .contact-grid,
  .contact-mid,
  .contact-fuss{display:contents;}

  .contact-grid > div:first-child{order:1;}
  .contact-list  {order:2;}
  .voices-long   {order:3;}
  #announce-contact{order:4;}
  .signature     {order:5;}
  .clients       {order:6;}
  #contact > footer{order:7;}

  /* Der Stempel steht schmal rechts unten — er ist das einzige Element
     der Sektion, das nicht an der linken Flucht haengt, und bekommt so
     die freie rechte Haelfte ueber der Wortmarke. */
  #announce-contact{justify-content:flex-end;}
  .contact-list{justify-content:flex-start;}

  .contact-list{margin-top:32px;}
  .voices-long{margin-top:26px;}
  #announce-contact{margin-top:26px;}
  /* Schiebt Wortmarke, Logowand und Fusszeile ans untere Ende — sass
     vorher an .contact-fuss, die es hier nicht mehr gibt. */
  .signature{margin-top:auto;padding:clamp(20px,4vw,40px) 0 clamp(16px,2.6vw,24px);}
  /* Ab hier waere die freie Spalte breiter als der Text daneben. Statt die
     Liste zu erdruecken, entfaellt die Vorschau — dann gibt es auch nichts
     mehr zu verdecken. */
  #preview{display:none;}
  .row{grid-template-columns:24px minmax(0,2.2fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.5fr);gap:10px;}
  .row-num,.row-title,.row-client,.row-loc,.row-role{grid-column:auto;}
  /* Gestapelt statt nebeneinander — hier gilt die feste Zeilenhoehe nicht */
  .row-title,.row-client,.row-loc,.row-role{height:auto;line-height:1.35;}
}
@media (max-width:760px){
  :root{--pad-x:20px;}
  /* Vollflaechiges Menue. Es liegt UNTER der Kopfzeile (z 60), damit
     Wortmarke und der Knopf, der jetzt „Close" heisst, sichtbar und
     bedienbar bleiben — ein eigenes Schliesskreuz braucht es dann nicht. */
  nav.main{
    display:none;position:fixed;inset:0;background:var(--paper);
    flex-direction:column;gap:0;
    padding:calc(var(--kopf-h) + clamp(20px,5vh,48px)) var(--pad-x) 24px;
    z-index:55;overflow-y:auto;
  }
  nav.main.is-open{display:flex;}
  /* Das Menue ist ein Kind der Kopfzeile. Sein z-index gilt deshalb nur
     INNERHALB deren Stapelkontext — ohne diese beiden Zeilen legt es sich
     ueber Wortmarke und Knopf, und man kaeme nicht mehr heraus. */
  header .wordmark,header .burger{position:relative;z-index:56;}
  /* Gross gesetzt, durch Haarlinien getrennt — dieselbe Sprache wie die
     Werkliste, nur im Massstab der Ueberschriften. */
  nav.main a{
    padding:clamp(13px,2.2vh,20px) 0;
    border-top:1px solid var(--rule);
    font-size:clamp(28px,8.5vw,42px);font-weight:500;
    letter-spacing:-.025em;line-height:1.1;
  }
  nav.main a:last-of-type{border-bottom:1px solid var(--rule);}
  nav.main a:hover{text-decoration:none;}
  nav.main a:active{opacity:.45;}
  /* Der Marker schliesst das Menue unten ab, rechts wie ueberall sonst. */
  nav.main #announce-menu{
    display:flex;justify-content:flex-end;
    margin-top:auto;padding-top:clamp(24px,5vh,48px);
  }
  nav.main #announce-menu .announce{width:clamp(140px,42vw,170px);padding:16px;}
  body.menu-offen{overflow:hidden;}
  .burger{display:block;}
  .slider-stage{height:62svh;min-height:300px;}
  /* Aus der Wand wird ein Lauf. Sechs Reihen Gitter kosteten 256 px — mehr,
     als die Schlusssektion sich leisten kann, wenn die Ueberschrift beim
     Herunterscrollen noch im Bild stehen soll. Eine Reihe kostet 30. */
  .clients{overflow:hidden;overflow-anchor:none;}
  .clients-grid{
    display:flex;width:max-content;gap:0;
    animation:marquee 54s linear infinite;
    /* Aus demselben Grund wie beim Kategorieband ohne will-change */
    overflow-anchor:none;
  }
  .clients-grid .kopie{display:flex;}
  .clients-grid figure{
    flex:0 0 auto;min-height:30px;
    margin:0 clamp(20px,6vw,30px);
  }
  .clients-grid img{max-height:calc(26px * var(--f,1));opacity:.75;}
  .cat-band{--kachel-w:min(62vw,260px);--kachel-abstand:8px;}
  /* Ohne Spaltenbreite wird gestapelt: Titel, darunter Kunde und Ort
     nebeneinander, darunter die Rolle. Das Bild steht links daneben. */
  .row{
    grid-template-columns:52px minmax(0,1.5fr) minmax(0,1fr);
    gap:3px 12px;padding:10px 0;align-items:start;
  }
  /* Gekuerzte Liste: fuenf Zeilen, der Rest haengt hinter dem Knopf.
     Die Zahl muss zu MOBIL_ZEIGT in tw-site.js passen. */
  .cat-block.gekuerzt .rows .row:nth-child(n+6){display:none;}
  .mehr-zeigen{
    display:block;width:100%;text-align:left;
    padding:13px 0 0;margin-top:2px;
    border-top:1px solid var(--rule);
    transition:opacity .2s var(--ease);
  }
  .mehr-zeigen:active{opacity:.5;}
  .cat-block:not(.gekuerzt) .mehr-zeigen{display:none;}

  .row-num{display:none;}
  .row-thumb{display:block;grid-column:1;grid-row:1 / 4;}
  .row-thumb img{aspect-ratio:1;object-fit:cover;}
  .row-title{grid-column:2 / 4;grid-row:1;}
  .row-client{grid-column:2;grid-row:2;}
  .row-loc{grid-column:3;grid-row:2;text-align:right;}
  .row-role{grid-column:2 / 4;grid-row:3;}
  .row-client,.row-loc{font-size:11.5px;}
.row-role{font-size:11.5px;text-align:right;}
  .intro-meta{flex-direction:column;gap:5px;}
  #preview{display:none;}
  .filters{gap:8px 18px;}
  .filter-count{width:100%;margin-left:0;}
}

/* ══ Projektfinder ═════════════════════════════════════════════════════
   Freitextfeld statt Auswahlliste: Man beschreibt sein Vorhaben in eigenen
   Worten, die Treffer erscheinen sofort. Die Vorschlaege darunter sind
   Einstiegshilfe fuer alle, die nicht wissen, wonach sie suchen sollen. */
/* Kompakt gehalten: Frage links, Eingabe rechts. So kostet der Finder
   zwischen Slider und Werk-Index nur eine knappe Bildschirmhoehe. */
/* Ohne Trennlinien: der Abschnitt haengt zwischen Slider und Werk-Index,
   der Abstand traegt die Trennung. */
#discover{
  /* Oben so viel, wie unten insgesamt zusammenkommt: der eigene Auslauf
     plus der Vorlauf der Liste. */
  padding:calc(var(--finder-y) + var(--work-y)) var(--pad-x) var(--finder-y);
}
.discover-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(20px,3.5vw,64px);align-items:start;
}
.discover-head h2{
  font-size:var(--satz-gross);font-weight:500;
  letter-spacing:var(--satz-gross-sperrung);
  line-height:var(--satz-gross-zeile);max-width:13em;
}
.discover-head p{
  font-size:13.5px;line-height:1.65;
  margin-top:10px;max-width:30em;
}

.finder{
  position:relative;display:flex;align-items:center;gap:14px;
  border-bottom:1px solid var(--ink);
}
.finder input{
  flex:1;min-width:0;
  font-family:inherit;font-size:clamp(16px,1.7vw,22px);font-weight:400;
  letter-spacing:-.012em;line-height:1.3;
  color:var(--ink);background:none;border:none;outline:none;
  padding:0 0 clamp(9px,1.1vw,13px);
}
.finder input::placeholder{color:var(--ink);opacity:.28;}
.finder .clear{
  font-size:20px;line-height:1;opacity:0;pointer-events:none;
  padding:0 2px clamp(9px,1.1vw,13px);
  transition:opacity .2s var(--ease);
}
.finder.has-text .clear{opacity:.4;pointer-events:auto;}
.finder .clear:hover{opacity:1;}

.chips{
  display:flex;flex-wrap:wrap;gap:7px 8px;
  margin-top:clamp(12px,1.5vw,16px);
}
.chips .kicker{opacity:.4;align-self:center;margin-right:6px;}
.chips button{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px 4px;border:1px solid var(--rule);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.chips button:hover{border-color:var(--ink);}
.chips button.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}

.result-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:clamp(24px,3.2vw,40px);padding-bottom:10px;
}
.result-head:empty{margin:0;padding:0;}
.result-head .hint{max-width:34em;}

/* Kein Abschluss unten — die Zeilen trennen sich schon selbst,
   und bei leerem Ergebnis stand hier sonst eine Linie im Nichts. */
.matches{}
.match{
  display:grid;
  grid-template-columns:46px repeat(3,minmax(0,1fr)) 18px;
  gap:clamp(14px,2vw,32px);align-items:center;
  padding:8px 0;border-top:1px solid var(--rule);
  cursor:pointer;text-align:left;width:100%;
}
.match img{width:46px;aspect-ratio:1;object-fit:cover;background:var(--placeholder);}
.match .nm{font-size:clamp(14px,1.3vw,16.5px);font-weight:500;letter-spacing:-.008em;
  transition:transform .22s var(--ease);}
.match .cl,.match .lo{font-size:11.5px;}
.match .go{font-size:14px;text-align:right;opacity:.3;transition:opacity .22s var(--ease),transform .22s var(--ease);}
.match{transition:opacity .25s var(--ease);}
@media (hover:hover){
  .match:hover .nm{transform:translateX(6px);}
  .match:hover .go{opacity:1;transform:translateX(4px);}
  .match:hover{opacity:.45;}
}
.match .why{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  opacity:.55;margin-top:3px;display:block;
}

@media (max-width:760px){
  .discover-grid{grid-template-columns:1fr;gap:22px;}
  .match{
    grid-template-columns:46px minmax(0,1fr);
    gap:12px;align-items:start;padding:10px 0;
  }
  .match img{width:46px;}
  .match .go{display:none;}
  .match .cl,.match .lo{font-size:11px;margin-top:2px;}
  .chips .kicker{flex:1 0 100%;margin-bottom:2px;}
}


/* ══ Zeiger über anklickbaren Bildern und Zeilen ═══════════════════════
   Ein Kreisumriss mit zweizeiliger Beschriftung, der dem Zeiger folgt.
   mix-blend-mode: multiply laesst ihn den Untergrund abdunkeln — er steht
   deshalb in Tinte, nicht in Weiss. */
#lens{
  position:fixed;top:0;left:0;z-index:120;
  width:104px;height:104px;margin:-52px 0 0 -52px;
  border:1px solid #FFFFFF;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
  /* Invertierung: mix-blend-mode kennt kein "invert". Weiss im Modus
     difference rechnet 1 - Untergrund und ist damit exakt die Umkehrung —
     auf Schwarz weiss, auf Weiss schwarz, nie unsichtbar. */
  color:#FFFFFF;mix-blend-mode:difference;
  pointer-events:none;
  opacity:0;transform:scale(.72);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
  /* Kein will-change: die Linse blendet mit mix-blend-mode:difference gegen
     ihren Untergrund. Zusammen mit der dauerhaften Ebenenbefoerderung durch
     will-change zeichnet Safari waagerechte Streifen an Ober- und Unterkante
     des Kreises doppelt — Zeilen, die dort liegen, erscheinen als
     ueberlagerter Text, auch weit links neben dem Kreis und ohne dass sie
     ueberfahren waeren. Dieselbe Ursache hatte schon das Stottern der
     Laufbaender; auch dort musste will-change weg. */
}
#lens.on{opacity:1;transform:scale(1);}
#lens span{
  font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;line-height:1.5;
}

/* Der eigene Zeiger verschwindet, solange die Linse zu sehen ist */
body.lens-on .pp-frame,
body.lens-on .row,
body.lens-on .match,
body.lens-on .band-item,
body.lens-on .slide,
body.lens-on .peek-frame{cursor:none;}

@media (hover:none),(prefers-reduced-motion:reduce){
  #lens{display:none;}
}

/* ── Schlusssektion auf dem Telefon ──────────────────────────────────
   Steht bewusst am Dateiende: die Regeln muessen nach den Grundregeln
   von #contact, .signature und .clients kommen, sonst gewinnen die.

   Die Sektion ist genau einen Schirm hoch. Beim Scrollen ans Seitenende
   liegt ihre Oberkante damit hinter der Kopfzeile — ihr Vorlauf war also
   unsichtbar, die Ueberschrift klebte am Header. Oben kommt deshalb Platz
   fuer die Kopfzeile plus echter Abstand dazu; die Hoehe wird an mehreren
   kleinen Stellen wieder hereingeholt, damit unten Impressum und
   Datenschutz im Bild bleiben. */
@media (max-width:760px){
  #contact{padding-top:calc(var(--kopf-h) + 26px);}
  .contact-list{margin-top:16px;}
  .voices-long{margin-top:18px;}
  #announce-contact{margin-top:18px;}
  .voices-long{gap:8px;}
  .voice-window.long,
  .voice-window.long .voice-track blockquote{height:92px;flex-basis:92px;}
  .voice-nav{margin-top:6px;}
  /* Der Stempel darf hier kleiner ausfallen — er steht allein in seiner
     Zeile und muss neben nichts bestehen. */
  /* Hier haengt die Groesse an der Fensterhoehe, nicht an der Breite: die
     Schlusssektion muss auf einen Schirm passen, und auf einem kurzen
     Geraet ist genau das der knappe Posten. */
  #announce-contact .announce{width:clamp(132px,21svh,180px);padding:15px;gap:5px;}
  #announce-contact .announce .wort{font-size:12px;line-height:1.36;}
  #announce-contact .announce .kicker{font-size:10px;}
  #announce-contact .announce .mehr{font-size:9.5px;}
}

/* Kurze Telefone: dort ist die Hoehe der knappe Posten, nicht die Breite.
   Der groessere Stempel liesse die Schlusssektion sonst um rund 50px
   ueber den Schirm hinauslaufen — auf einem iPhone SE etwa. Hier gilt
   deshalb weiter das kleinere Mass. */
@media (max-width:760px) and (max-height:740px){
  #announce-contact .announce{width:clamp(100px,15svh,124px);padding:12px;gap:4px;}
  #announce-contact .announce .wort{font-size:10px;line-height:1.36;}
  #announce-contact .announce .kicker{font-size:9px;}
  #announce-contact .announce .mehr{font-size:8.5px;}
  .signature{padding:10px 0 8px;}
  .clients{padding:10px 0;}
  .clients .label{margin-bottom:6px;}
}

/* ══ Eigenes Label ═══════════════════════════════════════════════════
   HOLYPROP ueber der Produktliste. Kein Werbebanner: zwei Haarlinien,
   keine Flaeche, keine zweite Farbe.

   Das Raster folgt der Grammatik, die die Seite ohnehin benutzt — bei
   .cat-head steht die Ueberschrift links und die Anzahl rechts, in der
   Hero-Meta die Disziplinen links und „Based in Berlin" rechts. Ebenso
   hier: Wortmarke links, Spruch rechts auf derselben Zeile; darunter der
   Satz links, der Verweis rechts. So traegt der Streifen auf ganzer
   Breite, statt links vollzulaufen und rechts leer zu bleiben. */
.label-band{
  /* Randlos ueber die volle Fensterbreite, wie die About-Sektion: der
     warme Ton hebt den Streifen vom Papier ab, ohne dass daraus ein
     Kasten wird — Kaesten kennt die Seite nicht. Die negativen Raender
     heben das Seitenpolster von #work auf, das Polster stellt es fuer
     den Inhalt wieder her. */
  background:var(--warm);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin:clamp(20px,2.6vw,36px) calc(-1 * var(--pad-x)) 0;
  padding:0 var(--pad-x);
}
.label-band-link{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:clamp(22px,3.2vw,52px);
  row-gap:clamp(12px,1.4vw,18px);
  align-items:baseline;
  padding:clamp(26px,3.4vw,46px) 0;
}
/* Nur die Wortmarke, kein Signet daneben: das Zeichen ist ein
   Strahlenkranz in einer Bogenform — klein gesetzt liest man es als
   Muster, nicht als Marke, und allein neben dem Text stand es isoliert.
   Dafuer darf die Wortmarke deutlich groesser werden; sie traegt den
   Namen ohnehin allein. */
.label-band-wort{
  grid-column:1;grid-row:1;justify-self:start;
  height:clamp(26px,3.2vw,44px);width:auto;max-width:100%;display:block;
  /* Alle Bilder tragen einen Platzhaltergrund, solange sie laden. Die
     Marke ist freigestellt — auf dem warmen Band stuende sonst ein
     hellgrauer Kasten dahinter. */
  background:transparent;
}

/* Keine eigene Strichstaerke fuer die Wortmarke. Die Buchstaben sind
   Flaechen; Linien hat nur die Bildmarke — ein Bogen mit 38 Strahlen, alle
   mit 2,5 Einheiten auf 1521 Breite. Dieses Verhaeltnis ist die Zeichnung:
   holyprop.com zeigt die Marke 1080px breit mit 1,78px starken Linien.
   Eine feste Staerke (frueher 1,4–2,2px) machte sie hier fuenfmal zu
   schwer, und die Strahlen liefen zu einer dunklen Flaeche zusammen. Die
   Linien skalieren deshalb mit der Marke. Wirkt sie zu zart, ist das Mittel
   eine groessere Marke, nicht dickere Linien. */

.label-band-spruch{
  grid-column:2;grid-row:1;
  justify-self:end;text-align:right;white-space:nowrap;opacity:.55;
}
.label-band-satz{
  grid-column:1;grid-row:2;
  max-width:46ch;
  font-size:clamp(14px,1.15vw,16px);line-height:1.5;
}
.label-band-mehr{
  grid-column:2;grid-row:2;
  justify-self:end;align-self:end;
  font-size:13px;white-space:nowrap;
  color:inherit;text-decoration:none;
  border-bottom:1px solid var(--ink);padding-bottom:2px;
  transition:opacity .3s var(--ease);
}
.label-band-mehr:hover{opacity:.6;}

/* Schmal reicht die Breite fuer zwei Spalten nicht — dann untereinander,
   alles linksbuendig, in der Reihenfolge des Markups. */
@media (max-width:760px){
  /* Auf dem Telefon folgt das Band direkt auf den Aufklapp-Knopf. Mit
     den 20px der Grundregel klebte es an der Liste; etwas mehr Luft laesst
     es als eigene Schlussnote lesen statt als 26. Zeile. */
  .label-band{margin-top:32px;}
  .label-band-link{
    grid-template-columns:1fr;
    row-gap:10px;
    padding:26px 0;
  }
  .label-band-wort,
  .label-band-spruch,
  .label-band-satz,
  .label-band-mehr{
    grid-column:1;grid-row:auto;
    justify-self:start;text-align:left;
  }
  .label-band-mehr{margin-top:6px;position:relative;}

  /* Seit nur noch die Adresse verweist statt des ganzen Streifens, ist
     ihre Trefferflaeche 19px hoch — zu wenig fuer einen Finger. Das
     Pseudoelement vergroessert sie auf rund 45px, ohne dass sich optisch
     etwas verschiebt: die Unterlinie bleibt am Text. */
  .label-band-mehr::after{
    content:"";position:absolute;
    left:0;right:0;top:-13px;bottom:-13px;
  }
}