/* ==========================================================
   stobbe.cc  –  Dennis Stobbe, Art & Creative Direction

   Leitidee: Schärfentiefe. Das Porträt ist scharf beim Auftritt,
   tritt beim Lesen in die Unschärfe zurück und kehrt beim Kontakt
   in den Fokus zurück. Scroll-Zustände kommen als Variablen aus
   site.js: --blur, --lift, --dim, --alt (Seite) und --p, --f (Szenen).

   Aufbau
    1  Grundlagen: Schriften, Farben, Maße, Basis
    2  Bühne: Porträt, Schärfentiefe, Blickwechsel
    3  Kopfzeile
    4  Typo-Bausteine, Szenen, Einblenden
    5  Abschnitte: Hero · Prolog · Haltung · Weg · Agenturen ·
       Raster · Disziplinen · Arbeitsweise · Kontakt · Fuß
    6  Kontaktformular
    7  Unterseiten: Rechtstexte, 404
    8  Satzregeln (Typografie)
    9  Bewegung: reduziert, Seitenwechsel, Drucken
   10  Druck & PDF
   ========================================================== */


/* ==========================================================
   1 · Grundlagen
   ========================================================== */
/* Signifier und Söhne (Klim Type Foundry), Weblizenz für stobbe.cc – Dateien unverändert, wie von Klim geliefert */
@font-face{font-family:"Signifier";src:url("../fonts/signifier-extralight.woff2") format("woff2");font-weight:200 300;font-style:normal;font-display:swap}
@font-face{font-family:"Signifier";src:url("../fonts/signifier-regular.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Signifier";src:url("../fonts/signifier-light-italic.woff2") format("woff2");font-weight:200 600;font-style:italic;font-display:swap}
@font-face{font-family:"Söhne";src:url("../fonts/soehne-buch.woff2") format("woff2");font-weight:200 400;font-style:normal;font-display:swap}
@font-face{font-family:"Söhne";src:url("../fonts/soehne-kraftig.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap}

:root{
  --schwarz: #000;
  --nacht:   #0a0b0b;
  --papier:  #ece6da;
  --asche:   #a39e95;
  --messing: #c2a574;
  --linie:   rgba(236,230,218,.12);

  --serif: "Signifier", Georgia, "Times New Roman", serif;
  --sans:  "Söhne", "Helvetica Neue", Arial, sans-serif;
  --ease:  cubic-bezier(.16,1,.3,1);

  /* Fließtext wächst auf großen Monitoren sanft mit (17 px bis 20 px ab ca. 2560 px) */
  --t-0: clamp(1.0625rem, .7rem + .34vw, 1.25rem);
  --t-1: 1.375rem;
  --t-2: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  --t-3: clamp(2.1rem, 1.1rem + 3.4vw, 4.4rem);
  --t-h2: clamp(2.6rem, 1rem + 5.2vw, 6.6rem);
  --t-hero: clamp(4.2rem, min(1rem + 11vw, 19vh), 13.5rem);

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 34rem;

  --blur: 0;
  --lift: 0;
  --shift: 0px;
}
/* Querformat: Porträt steht rechts, Text bekommt die linke Bildhälfte */
@media (min-width:900px) and (min-aspect-ratio:5/4){ :root{--shift:19vw} }

*,*::before,*::after{box-sizing:border-box}
html{background:var(--schwarz); scroll-padding-top:4.5rem; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--schwarz); color:var(--papier);
  font-family:var(--sans); font-size:var(--t-0); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; font-kerning:normal; font-synthesis:none;
}
::selection{background:var(--papier); color:var(--schwarz)}
/* Unterstreichungen: fein, mit Abstand, Unterlängen werden ausgespart */
a{color:inherit; text-decoration-thickness:1px; text-underline-offset:.22em; text-decoration-skip-ink:auto}
:focus-visible{outline:1px solid var(--messing); outline-offset:6px}
.muted{color:var(--asche)}
.skip{position:absolute; left:-999px; top:1rem; padding:.5rem 1rem; background:var(--papier); color:var(--schwarz); z-index:100}
.skip:focus{left:1rem}
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
main, .foot{position:relative; z-index:10}


/* ==========================================================
   2 · Bühne: Porträt mit Schärfentiefe
   ========================================================== */
/* Fixiert auf die große Viewport-Höhe: das Ein- und Ausblenden der
   Safari-Leisten auf iPhone/iPad skaliert das Porträt nicht mit */
.stage{
  position:fixed; top:0; left:0; right:0; height:100vh; height:100lvh; z-index:0;
  overflow:hidden; background:var(--schwarz); transform-origin:62% 40%;
  view-transition-name:stage;
}
.stage__img{
  position:absolute; inset:-6%;
  background-color:var(--schwarz);
  background-image:url("../img/bg-1280.jpg?v=fb986020");
  background-image:image-set(url("../img/bg-1280.avif?v=fb986020") type("image/avif"), url("../img/bg-1280.webp?v=fb986020") type("image/webp"), url("../img/bg-1280.jpg?v=fb986020") type("image/jpeg"));
  background-size:cover; background-position:center; background-repeat:no-repeat;
  will-change:transform, opacity;
  transform:translate3d(var(--shift), calc(var(--lift) * -3.5vh), 0) scale(calc(1.02 + var(--blur) * .035));
}
/* Auflösung nach Bildschirm: 1280 für kleine Standard-Displays, 2560 für große,
   Originalauflösung 5504 px für alle Retina-Displays bis zum Pro Display XDR */
@media (min-width:700px), (min-resolution:1.5dppx){
  .stage__img{
    background-image:url("../img/bg-2560.jpg?v=fb986020");
    background-image:image-set(url("../img/bg-2560.avif?v=fb986020") type("image/avif"), url("../img/bg-2560.webp?v=fb986020") type("image/webp"), url("../img/bg-2560.jpg?v=fb986020") type("image/jpeg"));
  }
}
@media (min-width:700px) and (min-resolution:1.5dppx), (min-resolution:2.5dppx), (min-width:2200px){
  .stage__img{
    background-image:url("../img/bg-5504.jpg?v=fb986020");
    background-image:image-set(url("../img/bg-5504.avif?v=fb986020") type("image/avif"), url("../img/bg-5504.webp?v=fb986020") type("image/webp"), url("../img/bg-5504.jpg?v=fb986020") type("image/jpeg"));
  }
}
/* Tablet hochkant: Porträt etwas nach rechts, damit das Monogramm das Gesicht nicht anschneidet */
@media (min-width:641px) and (max-aspect-ratio:5/4){ .stage__img{background-position:38% center} }
/* Handy hochkant: Gesicht optisch exakt mittig (die Augenachse liegt leicht links der Bildmitte) */
@media (max-width:640px) and (max-aspect-ratio:5/4){ .stage__img{background-position:42% center} }
/* Touch-Geräte: kein Mitskalieren beim Scrollen – nur Unschärfe und sanftes Anheben */
@media (pointer:coarse){
  .stage__img{transform:translate3d(var(--shift), calc(var(--lift) * -3.5vh), 0) scale(1.02)}
}

/* Unschärfe ohne WebGL: weiche Kopie des Bildes; mit WebGL übernimmt der Shader */
.stage__img--soft{filter:blur(30px) saturate(.75) brightness(.75); opacity:var(--blur)}
.stage__gl{display:block; width:112%; height:112%; opacity:0; pointer-events:none}
.gl-on .stage__img--soft{display:none}
/* Handys: Das Porträt steht still, die Unschärfe ist ein fertig weichgezeichnetes Bild, das nur eingeblendet wird.
   Das übernimmt der Grafikchip selbst – kein Neuzeichnen beim Scrollen, kein Ruckeln. Tablet und Desktop bleiben unverändert. */
@media (pointer:coarse) and (max-width:767px), (pointer:coarse) and (max-height:500px){
  .stage__img{transform:translate3d(var(--shift),0,0) scale(1.02)}
  .stage__img--soft{filter:none; background-image:url(../img/bg-soft.jpg?v=8245d568); will-change:opacity}
}

/* Blickwechsel zum Kontakt (Desktop & iPad quer): gleiche Ebene wie das scharfe Porträt,
   Bild wird per Script nachgeladen; ohne Bild bleibt die Ebene durchsichtig */
.stage__img--alt{display:none; background-image:none; background-color:transparent; opacity:var(--alt, 0)}
@media (min-width:900px) and (min-aspect-ratio:5/4){ .stage__img--alt{display:block} }
@media (prefers-reduced-motion: reduce){ .stage__img--alt{display:none} }

.stage__shade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,.55) 100%),
    radial-gradient(120% 90% at 55% 40%, transparent 40%, rgba(0,0,0,.72) 100%);
}
/* Abdunkeln beim Lesen; beim Kontakt bekommt der Text eigenen Schatten-Raum (--dim) */
.stage__shade::after{content:""; position:absolute; inset:0; background:var(--schwarz); opacity:max(calc(var(--blur) * .55), var(--dim, 0))}

/* Auftritt: aus dem Schwarz aufblenden, ganz leicht setzen */
.is-loading .stage{opacity:0; transform:scale(1.035)}
.is-loaded  .stage{transition:opacity 2.4s cubic-bezier(.4,0,.2,1), transform 4.5s var(--ease)}


/* ==========================================================
   3 · Kopfzeile: transparent über dem Bild, Glas beim Lesen
   ========================================================== */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; justify-content:space-between; align-items:center;
  height:calc(4rem + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) var(--gutter) 0;
  border-bottom:1px solid transparent;
  transition:background-color .6s var(--ease), border-color .6s var(--ease), opacity 1s ease 1.4s;
  view-transition-name:bar;
}
.scrolled .bar{
  background:rgba(8,8,8,.62);
  -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px);
  border-bottom-color:rgba(236,230,218,.08);
}
.is-loading .bar{opacity:0}

/* Monogramm: die einzige Stelle, an der das Zeichen steht – klein in der Kopfzeile */
.bar__mark{display:inline-flex; align-items:center; line-height:0; text-decoration:none}
.bar__logo{display:block; height:2rem; width:auto; fill:var(--papier); transition:opacity .3s}
.bar__mark:hover .bar__logo{opacity:.7}
@media (max-width:640px){ .bar__logo{height:1.75rem} }

.bar__nav{display:flex; align-items:center; gap:clamp(1.1rem,2.6vw,2.6rem)}
.bar__nav a{font-size:.85rem; text-decoration:none; letter-spacing:.01em; color:rgba(236,230,218,.78); transition:color .3s}
.bar__nav > a:hover, .bar__nav > a[aria-current]{color:var(--papier)}
@media (max-width:640px){ .bar__nav > a:not([href$="#kontakt"]){display:none} }

/* Sprachumschalter */
.lang{display:inline-flex; gap:.15rem; margin-left:clamp(.4rem,1.2vw,1rem); padding:.2rem; border:1px solid rgba(236,230,218,.16); border-radius:999px; font-size:.72rem; letter-spacing:.08em}
.bar__nav .lang a{padding:.28rem .55rem; border-radius:999px; color:rgba(236,230,218,.62); text-decoration:none; line-height:1}
.bar__nav .lang a[aria-current="true"]{background:var(--papier); color:#0b0b0b}
.bar__nav .lang a:hover{color:var(--papier)}
.bar__nav .lang a[aria-current="true"]:hover{color:#0b0b0b}
@media (max-width:640px){ .bar__nav .lang a{display:inline-block} }


/* ==========================================================
   4 · Typo-Bausteine, Szenen, Einblenden
   ========================================================== */
.eyebrow{
  margin:0 0 clamp(1.4rem,3.5vh,2.4rem); font-family:var(--sans); line-height:inherit;
  font-size:.78rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--messing);
}
.h2{margin:0; font-family:var(--serif); font-weight:300; font-size:var(--t-h2); line-height:1.2; letter-spacing:-.012em; text-wrap:balance}
.h3{margin:0; font-family:var(--serif); font-weight:500; font-size:var(--t-2); line-height:1.22; letter-spacing:-.01em}

/* Szenen: gepinnte Abschnitte, Fortschritt kommt als --p aus site.js */
.scene{position:relative}
.js .scene{height:var(--len,300vh)}
.pin{
  position:relative; min-height:100svh;
  padding:clamp(6rem,14vh,9rem) var(--gutter) clamp(3rem,8vh,5rem);
}
.js .pin{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden}
.flow{position:relative; min-height:100vh; min-height:100svh; padding:clamp(6rem,14vh,9rem) var(--gutter) clamp(3rem,8vh,5rem)}

/* Einblenden beim Eintritt – versetzt über --i */
.js [data-reveal]{opacity:0; transform:translate3d(0,28px,0); transition:opacity 1.1s var(--ease), transform 1.3s var(--ease); transition-delay:calc(var(--i,0) * 55ms)}
.js [data-reveal].in{opacity:1; transform:none}


/* ==========================================================
   5 · Abschnitte
   ========================================================== */

/* ---------- 0 · Hero ---------- */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:grid; grid-template-columns:1fr auto; align-content:end;
  padding:0 var(--gutter) clamp(2rem,6vh,5rem);
}
.hero__name{
  grid-column:1 / -1; margin:0;
  font-family:var(--serif); font-weight:300; font-size:calc(var(--t-hero) * .8); line-height:.88;
  /* Name komplett in echten Kapitälchen (auch die Anfangsbuchstaben), leicht gesperrt – wie eine Inschrift */
  font-feature-settings:"kern","liga","smcp","c2sc"; letter-spacing:.015em;
}
/* Optischer Ausgleich von Hand (gemessen an den Tuschekanten): rund an gerade etwas enger,
   offene Formen (T, Arme des E) deutlich enger, gerade an gerade bleibt die Referenz */
.hero__line > span:nth-child(1){margin-right:-.04em}
.hero__line:first-child > span:nth-child(2){margin-right:-.023em}
.hero__line:first-child > span:nth-child(3){margin-right:.01em}
.hero__line:first-child > span:nth-child(5){margin-right:-.04em}
.hero__line--indent > span:nth-child(1){margin-right:-.065em}
.hero__line--indent > span:nth-child(2){margin-right:-.048em}
.hero__line--indent > span:nth-child(3){margin-right:-.043em}
.hero__line--indent > span:nth-child(4), .hero__line--indent > span:nth-child(5){margin-right:-.033em}
.hero__line{display:block; transition:transform 1.6s var(--ease) .5s, opacity 1.2s ease .5s, letter-spacing 1.8s var(--ease) .5s}
.hero__line--indent{padding-left:.62em}
.hero__role{grid-column:2; justify-self:end; text-align:right; margin:clamp(1.5rem,4vh,3rem) 0 0; font-weight:300; line-height:1.5}
.hero__role, .hero__cue{transition:opacity .9s ease .8s}
/* Name und Rolle treten beim Scrollen mit der Unschärfe zurück */
.hero__name, .hero__role{transform:translate3d(0, calc(var(--blur) * -6vh), 0); opacity:calc(1 - var(--blur) * .9)}
.is-loading .hero__line{opacity:0; transform:translateY(.12em); letter-spacing:.08em}
.is-loading .hero__role, .is-loading .hero__cue{opacity:0}

/* Scroll-Hinweis */
.hero__cue{grid-column:1; grid-row:2; align-self:end; justify-self:start; display:flex; align-items:flex-end; gap:.95rem}
.hero__cue-line{display:block; width:1px; height:4.5rem; background:linear-gradient(var(--papier), transparent); animation:cue 2.8s var(--ease) infinite}
.hero__cue-label{
  font-size:.72rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; line-height:1;
  color:rgba(236,230,218,.72); padding-bottom:.15rem;
  opacity:clamp(0, 1 - var(--blur) * 3, 1); transform:translate3d(0, calc(var(--blur) * -1.5rem), 0);
}
@keyframes cue{0%{transform:scaleY(0); transform-origin:top} 45%{transform:scaleY(1); transform-origin:top} 55%{transform:scaleY(1); transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}

@media (max-width:560px){
  .hero{grid-template-columns:1fr}
  .hero__role{grid-column:1; justify-self:start; text-align:left}
  .hero__cue{display:none}
  .hero__line--indent{padding-left:.3em}
}

/* ---------- 1 · Prolog: Jahreszähler ---------- */
.prolog .flow{display:grid; align-content:center; justify-items:start; min-height:88svh}
.count{
  margin:0 0 -.06em; padding:.04em .08em .3em 0;
  font-family:var(--serif); font-weight:300; font-size:clamp(6.8rem, 2rem + 22vw, 24rem); line-height:1; letter-spacing:-.015em;
  /* Mediävalziffern: 6 mit Oberlänge, 9 mit Unterlänge – Raum unten, damit die Unterlängen frei stehen */
  font-variant-numeric:oldstyle-nums; color:var(--papier);
  transform-origin:left bottom; transition:transform 2.2s var(--ease);
}
.js .prolog:not(.in) .count{transform:translate3d(0,3vh,0) scale(.95)}
.prolog__line{
  margin:clamp(1.5rem,4vh,3rem) 0 0; max-width:30rem; font-weight:300; font-size:var(--t-1); line-height:1.4;
  transition:opacity 1.2s var(--ease) 1.2s, transform 1.4s var(--ease) 1.2s;
}
.js .prolog:not(.in) .prolog__line{opacity:0; transform:translate3d(0,20px,0)}
.prolog__line .muted{font-size:var(--t-0); font-weight:400}

/* ---------- 2 · Haltung: Wort für Wort, dann der Leitsatz ---------- */
.manifest .flow{display:grid; align-content:center; min-height:90svh}
.manifest__text{
  margin:0; max-width:24ch;
  font-family:var(--serif); font-weight:300; font-size:clamp(2.4rem, 1rem + 5.4vw, 7.2rem); line-height:1.2; letter-spacing:-.012em; text-wrap:balance;
}
/* Jeder Satz ist ein eigener, ausgeglichen umbrochener Block */
.manifest__text .s{display:block; text-wrap:balance}
/* Sobald der Satz ins Bild kommt, leuchtet er Wort für Wort auf – läuft von selbst durch */
.js .manifest__text .w{opacity:.14; transition:opacity .9s var(--ease); transition-delay:calc(var(--wi,0) * 110ms)}
.js .manifest.in .manifest__text .w{opacity:1}

.statement{padding:0 var(--gutter) clamp(8rem,22vh,14rem); display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gutter)}
.statement__body{grid-column:7 / span 5; max-width:var(--measure); font-weight:300; font-size:var(--t-1); line-height:1.45}
.statement__body p{margin:0 0 1em}
.statement__quote{
  grid-column:2 / span 10; justify-self:start; margin:clamp(4rem,12vh,8rem) 0 0; padding-top:clamp(1.6rem,4vh,2.4rem);
  border-top:1px solid rgba(194,165,116,.45);
}
.statement__quote p{
  position:relative; margin:0; max-width:13ch; padding-bottom:.08em;
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(2.6rem, 1rem + 5.2vw, 7rem); line-height:1.18; letter-spacing:-.012em; text-wrap:balance;
  font-feature-settings:"kern","liga","calt";
}
/* Echte Anführungszeichen – das öffnende hängt vor der Satzkante, damit der erste Buchstabe auf der Linie steht */
:lang(de) .statement__quote p{quotes:"„" "“"}
:lang(en) .statement__quote p{quotes:"“" "”"}
.statement__quote p::before{content:open-quote; position:absolute; right:100%; margin-right:.04em}
.statement__quote p::after{content:close-quote}
@media (max-width:900px){
  .statement__body{grid-column:1 / -1}
  .statement__quote{grid-column:1 / -1}
}

/* ---------- 3 · Der Weg: sieben Kapitel, horizontal ---------- */
.chapters .pin{display:grid; grid-template-rows:auto 1fr auto; row-gap:clamp(1.5rem,4vh,3rem); padding-left:0; padding-right:0}
.chapters__head{padding:0 var(--gutter)}
/* Alle Karten gleich hoch, Inhalt oben bündig; die Reihe sitzt vertikal mittig */
.track{
  list-style:none; margin:0; padding:0 var(--gutter); display:flex; align-items:stretch; align-self:center;
  gap:clamp(2.5rem,5vw,6rem); width:max-content;
}
.js .track{transform:translate3d(calc(var(--p,0) * var(--dist,0) * -1px), 0, 0); will-change:transform}
.chap{
  --f:1; width:clamp(17rem, 30vw, 29rem); flex:none; display:flex; flex-direction:column; justify-content:flex-start;
  padding-top:1.4rem; border-top:1px solid rgba(236,230,218,calc(.2 + var(--f) * .42));
  opacity:calc(.5 + var(--f) * .5);
}
@media (max-width:560px){ .chap{width:78vw} }
/* Kapitel: der Titel ist die Aussage, das Jahr nur die Randnotiz darüber */
.chap__year{
  display:block; margin:0 0 1.1rem;
  font-family:var(--serif); font-size:1.2rem; font-weight:400; line-height:1; letter-spacing:.01em; color:var(--messing);
  font-variant-numeric:oldstyle-nums proportional-nums;
  opacity:calc(.6 + var(--f,1) * .4);
}
.chap__title{margin:0 0 1.1rem; font-family:var(--serif); font-weight:300; font-size:clamp(2.1rem, 1.1rem + 2.2vw, 3.3rem); line-height:1.18; letter-spacing:-.012em; text-wrap:balance}
.chap__role{margin:0 0 .9rem; font-size:.82rem; letter-spacing:.04em; color:var(--messing)}
.chap__text{margin:0; color:var(--asche); max-width:24.5em}
/* Logo als Markierung auf der Route: schwebt mit etwas Abstand über der Linie am Anfang der aktiven Karte */
.track{position:relative}
.route-pin{
  position:absolute; top:0; left:0; width:22px; height:25px; pointer-events:none; z-index:2;
  fill:var(--messing); opacity:0; will-change:transform;
  transform:translate3d(calc(var(--px, 0px) - 54%), calc(-100% - .75rem), 0);
  transition:opacity .6s var(--ease);
}
.route-pin.is-on{opacity:1}
.route-pin.is-jump{transition:opacity .6s var(--ease), transform .4s var(--ease)}
.chapters__foot{display:flex; justify-content:space-between; align-items:center; gap:2rem; padding:0 var(--gutter); font-size:.85rem; color:var(--asche)}
.bar-progress{flex:0 1 16rem; height:1px; background:var(--linie); overflow:hidden}
.bar-progress i{display:block; height:100%; background:var(--papier); transform-origin:left; transform:scaleX(var(--p,1))}
/* Nativ scrollgetrieben, wo verfügbar: läuft im Compositor – auf ProMotion-Displays mit bis zu 120 Hz */
@supports (animation-timeline: view()) {
  .js .chapters{view-timeline:--chapters block}
  .js .track{animation:chapTrack linear both; animation-timeline:--chapters; animation-range:contain 0% contain 100%}
  @keyframes chapTrack{from{transform:translate3d(0,0,0)} to{transform:translate3d(calc(var(--dist,0) * -1px),0,0)}}
  .js .bar-progress i{animation:chapBar linear both; animation-timeline:--chapters; animation-range:contain 0% contain 100%}
  @keyframes chapBar{from{transform:scaleX(0)} to{transform:scaleX(1)}}
}

/* ---------- 4 · Agenturen: Fokus-Wechsel ---------- */
.agencies .flow{display:grid; grid-template-rows:auto 1fr auto; min-height:80svh}
.agencies__lead{margin:0; font-weight:300; font-size:var(--t-1); line-height:1.35; color:var(--asche)}
.cycle{
  position:relative; align-self:center; height:calc(1.2em + 3.2rem);
  font-family:var(--serif); font-weight:300; font-size:clamp(3.2rem, 1rem + 9vw, 12rem); line-height:1.2; letter-spacing:-.015em;
}
/* Schriftgröße so begrenzt, dass auch der längste Name („Zum Goldenen Hirschen“) in eine Zeile passt */
@media (min-width:641px){ .cycle{font-size:min(clamp(3.2rem, 1rem + 9vw, 12rem), calc((100vw - 2 * var(--gutter)) / 10))} }
.cycle span{
  position:absolute; left:0; top:0; white-space:nowrap;
  opacity:0; filter:blur(18px); transform:translate3d(0,.12em,0) scale(1.04);
  transition:opacity .7s var(--ease), filter .9s var(--ease), transform 1s var(--ease);
}
.cycle span.on{opacity:1; filter:blur(0); transform:none}
.cycle span.was{opacity:0; filter:blur(14px); transform:translate3d(0,-.1em,0) scale(.98)}
.cycle__loc{display:block; text-indent:0; margin-top:1.4rem; font-family:var(--sans); font-style:normal; font-weight:500; font-size:.78rem; line-height:1; letter-spacing:.2em; text-transform:uppercase; color:var(--messing)}
.cycle__more{font-style:italic; color:var(--asche)}
.cycle__count{margin:0; font-size:.85rem; color:var(--asche)}
.cycle__count{transition:opacity .5s var(--ease)}
.cycle__count.is-off{opacity:0}
/* Die Agenturtabelle bleibt für Google, Screenreader und den Druck im Code – auf dem Bildschirm übernimmt die Animation */
@media screen{ .roster{position:absolute !important; width:1px; height:1px; padding:0 !important; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0} }
.cycle__count .cycle__i{color:var(--papier)}
@media (max-width:640px){ .cycle{font-size:clamp(2.4rem, 11vw, 4rem)} .cycle span{white-space:normal; width:100%} }

/* ---------- Raster: Agenturen & Marken ---------- */
.roster, .brands{padding:clamp(6rem,14vh,10rem) var(--gutter)}
.roster{padding-top:clamp(3rem,8vh,6rem)}
.roster__head{display:flex; justify-content:space-between; align-items:baseline; gap:2rem; margin-bottom:clamp(2rem,5vh,3.5rem)}
.roster__note{margin:0; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--asche)}
.brands__head{display:grid; gap:0; margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.brands__head .roster__note{margin-top:2rem}
@media (max-width:900px){ .roster__head{flex-direction:column; gap:.6rem} }

.grid{list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--linie)}
.grid li{border-bottom:1px solid var(--linie); transition:color .35s, opacity 1.1s var(--ease), transform 1.3s var(--ease)}
.grid--agencies{grid-template-columns:repeat(auto-fill, minmax(min(100%,17rem),1fr))}
.grid--agencies li{display:flex; flex-direction:column; justify-content:space-between; gap:.6rem; min-height:8.5rem; padding:1.3rem 1.5rem 1.2rem 0}
.grid--agencies b{font-family:var(--serif); font-weight:500; font-size:var(--t-2); line-height:1.22; letter-spacing:0}
.grid--agencies small{font-size:.82rem; color:var(--asche)}
/* Markennamen: nie abschneiden – lieber sauber umbrechen */
.grid--brands{grid-template-columns:repeat(auto-fill, minmax(min(50%,13rem),1fr))}
.grid--brands li{
  padding:1.15rem 1rem 1.15rem 0; text-wrap:balance;
  font-family:var(--sans); font-weight:400; font-size:clamp(1rem, .8rem + .4vw, 1.25rem); line-height:1.3; letter-spacing:.005em;
}
.grid__more, .grid__more b{color:var(--asche); font-style:italic}
@media (hover:hover){
  .grid:hover li{color:rgba(236,230,218,.4)}
  .grid li:hover{color:var(--papier)}
}
/* Handy: Agenturen zweispaltig, kompakter */
@media (max-width:640px){
  .grid--agencies{grid-template-columns:1fr 1fr}
  .grid--agencies li{min-height:6.2rem; padding:1rem .75rem 1rem 0}
  .grid--agencies b{font-size:1.2rem}
  .grid--brands li{padding:.9rem .75rem .9rem 0}
}

/* ---------- 6 · Disziplinen: das große Ganze, das Detail, der Dialog ---------- */
.disciplines, .approach{padding:clamp(6rem,14vh,10rem) var(--gutter)}
.disciplines__lead{margin:0 0 clamp(2.5rem,6vh,4rem); max-width:34rem; font-size:var(--t-1); font-weight:300; line-height:1.45; text-wrap:pretty}
.dgroup + .dgroup{margin-top:clamp(3rem,8vh,5rem)}
.dgroup__label{display:flex; align-items:center; gap:1rem; margin:0 0 .4rem; font-size:.72rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--asche)}
.dgroup__label::after{content:""; flex:0 0 3rem; height:1px; background:rgba(236,230,218,.25)}
.disciplines__list{margin:0}
.discipline{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gutter); align-items:baseline; padding:clamp(1.2rem,3vh,2rem) 0; border-top:1px solid var(--linie)}
.discipline__t{grid-column:1 / span 6; margin:0; font-family:var(--serif); font-weight:300; font-size:clamp(2.4rem, 1rem + 5.4vw, 6.4rem); line-height:1.18; letter-spacing:-.015em; transition:transform .6s var(--ease), color .4s}
.discipline__d{grid-column:7 / span 5; margin:0; max-width:24.5em; color:var(--asche); transition:color .4s}
@media (hover:hover){
  .disciplines__list:hover .discipline__t{color:var(--asche)}
  .disciplines__list .discipline:hover .discipline__t{color:var(--papier); transform:translateX(.2em)}
  .disciplines__list .discipline:hover .discipline__d{color:var(--papier)}
}
@media (max-width:900px){ .discipline{grid-template-columns:1fr; row-gap:.8rem} .discipline__t, .discipline__d{grid-column:auto} }

/* ---------- 7 · Arbeitsweise: Glas-Kacheln ---------- */
.bento{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2.5rem,7vh,5.5rem) clamp(2rem,4vw,4.5rem)}
/* Offen statt Karten: feine Linie oben wie bei den Kapiteln im Weg, Weißraum gliedert */
.tile{
  position:relative; display:flex; flex-direction:column;
  padding:1.5rem 2.5rem 0 0; border-top:1px solid rgba(236,230,218,.32);
}
.tile--wide{grid-column:span 2}
.tile__kicker{margin:0 0 auto; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--messing)}
.tile__big{
  margin:0 0 .5rem; padding-bottom:.16em;
  font-family:var(--serif); font-weight:300; font-size:clamp(2.1rem, .8rem + 2.5vw, 3.8rem); line-height:1.2; letter-spacing:-.012em;
  font-variant-numeric:lining-nums; text-wrap:balance; color:var(--papier);
}
.tile__big em{font-style:italic}
.tile__text{margin:0; max-width:28em; color:var(--asche)}
@media (max-width:900px){ .bento{grid-template-columns:1fr} .tile--wide{grid-column:auto} }
/* Spiegelung: unten rechts ebenfalls breit, damit kein Loch im Raster bleibt */
@media screen and (min-width:901px){ .bento > .tile:last-child{grid-column:span 2} }

/* ---------- 8 · Kontakt ---------- */
.contact{min-height:100vh; min-height:100svh; display:grid; align-content:center; padding:clamp(6rem,14vh,10rem) var(--gutter)}
.contact__h{
  margin:0 0 clamp(1.5rem,4vh,2.5rem); max-width:14ch; padding-bottom:.06em;
  font-family:var(--serif); font-weight:300; font-size:clamp(2.8rem, 1rem + 4.4vw, 6rem); line-height:1.16; letter-spacing:-.012em;
  color:var(--papier); text-wrap:balance;
}
.contact__meta{display:flex; flex-wrap:wrap; gap:1rem 2.5rem; margin-top:clamp(2.5rem,6vh,4rem); font-size:.95rem}
.contact__meta a{text-decoration:none; color:var(--asche); transition:color .3s}
.contact__meta a:hover{color:var(--papier)}
.contact__vcf{display:inline-flex; align-items:center; gap:.5em}
.contact__vcf::before{content:""; width:.9em; height:.9em; border:1px solid currentColor; border-radius:3px; opacity:.7}


/* ---------- Fuß ---------- */
.foot{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding:2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom,0px));
  font-size:.85rem; color:var(--asche); border-top:1px solid rgba(236,230,218,.06);
}
.foot nav{display:flex; gap:2rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--papier)}


/* ==========================================================
   6 · Kontaktformular: eine Frage nach der anderen
   ========================================================== */
.ask{max-width:min(46rem, 100%); margin-top:clamp(1.5rem,4vh,2.5rem); border:0; padding:0}
@media (min-width:900px) and (min-aspect-ratio:5/4){ .ask{max-width:min(44rem, 46vw)} }
.ask__head{display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.ask__intro{margin:0; font-size:.78rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--messing)}
.ask__count{margin:0; font-size:.85rem; color:var(--asche); white-space:nowrap}
.ask__count .ask__i{color:var(--papier)}
.ask__bar{display:block; height:1px; margin:1rem 0 clamp(2rem,5vh,3rem); background:rgba(236,230,218,.14); overflow:hidden}
.ask__bar i{display:block; height:100%; background:var(--papier); transform-origin:left; transform:scaleX(var(--prog,.25)); transition:transform .9s var(--ease)}

.step{border:0; margin:0 0 3rem; padding:0; min-width:0}
.step__q{padding:0; margin:0 0 1.6rem; font-family:var(--serif); font-weight:300; font-size:clamp(1.8rem, 1rem + 2vw, 3rem); line-height:1.2; letter-spacing:-.01em; text-wrap:balance}
.step__opt{font-size:.45em; font-style:italic; color:var(--asche); letter-spacing:0; vertical-align:.35em}
.step__fields{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.step__recap{margin:-.6rem 0 1.4rem; font-size:.9rem; color:var(--asche)}
.step__recap:empty{display:none}

/* Eingabefeld: eindeutig als Feld erkennbar, ruhig im Glas-Look */
.box{
  position:relative; display:block; border:1px solid rgba(236,230,218,.2); border-radius:16px; background:rgba(236,230,218,.045);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); transition:border-color .35s var(--ease), background-color .35s var(--ease); cursor:text;
}
.box--wide{grid-column:1 / -1}
.box:hover{border-color:rgba(236,230,218,.36)}
.box:focus-within{border-color:var(--messing); background:rgba(236,230,218,.07)}
.box__label{position:absolute; left:1.1rem; top:.8rem; font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--asche); pointer-events:none}
.box__label em{font-style:normal; letter-spacing:.04em; text-transform:none; font-weight:400; opacity:.85}
.box input, .box textarea{
  display:block; width:100%; border:0; outline:none; background:transparent; color:var(--papier);
  font-family:var(--sans); font-weight:300; font-size:1.25rem; line-height:1.4; padding:2.1rem 1.1rem .85rem; border-radius:16px; -webkit-appearance:none; appearance:none;
}
.box textarea{padding-top:1rem; resize:vertical; min-height:8.5rem}
.box input::placeholder, .box textarea::placeholder{color:rgba(236,230,218,.3)}
.box input:-webkit-autofill{-webkit-text-fill-color:var(--papier); transition:background-color 9999s}
.box.is-invalid{border-color:#d88f74; animation:nudge .5s var(--ease)}
@keyframes nudge{20%{transform:translateX(-4px)} 45%{transform:translateX(3px)} 70%{transform:translateX(-2px)}}

/* Anhang fürs Sparring: erscheint nur, wenn „Sparring“ gewählt ist. Klicken oder Datei hineinziehen. */
.file{display:flex; align-items:center; gap:1rem; margin-top:.9rem}
.file[hidden]{display:none}
.file__pick{
  position:relative; flex:1; display:flex; align-items:center; gap:1rem; min-width:0;
  padding:1rem 1.1rem; border:1px dashed rgba(236,230,218,.26); border-radius:16px; background:rgba(236,230,218,.03);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); cursor:pointer;
  transition:border-color .35s var(--ease), background-color .35s var(--ease);
}
.file__input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
.file__pick:hover, .file.is-drag .file__pick{border-color:rgba(236,230,218,.5); background:rgba(236,230,218,.06)}
.file__pick:focus-within{border-color:var(--messing); outline:none}
.file__icon{flex:none; display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid rgba(236,230,218,.2); color:var(--papier)}
.file__text{min-width:0; line-height:1.35}
.file__name{font-size:1rem; color:var(--papier); overflow-wrap:anywhere}
.file__opt{font-family:var(--serif); font-size:.9rem; font-style:italic; color:var(--asche)}
.file__hint{display:block; margin-top:.2rem; font-size:.82rem; color:var(--asche)}
.file.has-file .file__pick{border-style:solid; border-color:rgba(194,165,116,.6)}
.file.has-file .file__icon{background:var(--papier); color:#0b0b0b; border-color:var(--papier)}
.file.has-file .file__opt, .file.has-file .file__hint{display:none}
.file__clear{flex:none; border:0; background:none; padding:.5rem 0; font:inherit; font-size:.9rem; color:var(--asche); cursor:pointer; transition:color .3s}
.file__clear:hover{color:var(--papier)}
.file.is-invalid .file__pick{border-color:#d88f74; animation:nudge .5s var(--ease)}

/* Themen als Glas-Pillen */
.chips{display:flex; flex-wrap:wrap; gap:.6rem; margin:0; font-family:var(--sans); line-height:1; font-size:1.05rem}
.chip{position:relative; display:inline-flex; cursor:pointer}
.chip input{position:absolute; opacity:0; pointer-events:none}
.chip span{
  display:inline-block; padding:.85em 1.3em; border-radius:999px;
  font-size:1rem; line-height:1; letter-spacing:.01em; color:rgba(236,230,218,.72);
  border:1px solid rgba(236,230,218,.16); background:rgba(236,230,218,.04);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:background-color .35s var(--ease), color .35s, border-color .35s, transform .35s var(--ease);
}
.chip:hover span{border-color:rgba(236,230,218,.4); color:var(--papier)}
.chip input:checked + span{background:var(--papier); color:#0b0b0b; border-color:var(--papier)}
.chip input:focus-visible + span{outline:1px solid var(--messing); outline-offset:3px}
.chip:active span{transform:scale(.97)}

.brief__legal{margin:1.1rem 0 0; max-width:26rem; font-size:.82rem; line-height:1.5; color:var(--asche)}
.brief__legal a{color:var(--papier); text-underline-offset:.2em; text-decoration-thickness:1px}
.brief__status{min-height:1.4em; margin:1.2rem 0 0; font-size:.9rem; color:#e3a58c}

.step__nav{display:flex; align-items:center; gap:1.4rem; margin-top:2rem; flex-wrap:wrap}
.step__back{border:0; background:none; padding:.5rem 0; font:inherit; font-size:.95rem; color:var(--asche); cursor:pointer; transition:color .3s}
.step__back:hover{color:var(--papier)}
.step__hint{font-size:.8rem; color:rgba(236,230,218,.62)}
@media (hover:none){ .step__hint{display:none} }

/* Senden: helle Pille, der Pfeil läuft vor */
.send{
  position:relative; display:inline-flex; align-items:center; gap:1rem; height:3.6rem; padding:0 .45rem 0 1.7rem;
  border:0; border-radius:999px; cursor:pointer; overflow:hidden;
  font-family:var(--sans); font-size:1rem; font-weight:500; letter-spacing:.01em;
  color:#0b0b0b; background:var(--papier);
  box-shadow:0 0 0 0 rgba(236,230,218,0);
  transition:box-shadow .6s var(--ease), transform .5s var(--ease), background-color .4s;
}
.send__arrow{position:relative; display:grid; place-items:center; width:2.7rem; height:2.7rem; border-radius:50%; background:#0b0b0b; color:var(--papier); transition:transform .6s var(--ease)}
.send:hover{box-shadow:0 0 0 8px rgba(236,230,218,.08), 0 20px 50px -20px rgba(236,230,218,.35)}
.send:hover .send__arrow{transform:translateX(3px) rotate(-45deg)}
.send:active{transform:scale(.98)}
.send:focus-visible{outline:1px solid var(--messing); outline-offset:5px}
.send[disabled]{cursor:progress}
.send.is-busy .send__arrow svg{opacity:0}
.send.is-busy .send__arrow::after{content:""; position:absolute; width:1.05rem; height:1.05rem; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:640px){
  .step__fields{grid-template-columns:1fr}
  .step__nav{gap:1rem}
  .step__hint{display:none}
  .ask__intro{letter-spacing:.14em}
  .send{justify-content:space-between}
}

/* Mit JavaScript: immer nur eine Frage sichtbar, Wechsel über Schärfe */
.js .ask__steps{display:grid}
.js .step{grid-area:1 / 1; margin:0; transition:opacity .6s var(--ease), filter .7s var(--ease), transform .8s var(--ease), visibility 0s linear .8s}
.js .step:not(.on){opacity:0; visibility:hidden; filter:blur(10px); transform:translate3d(0,18px,0); pointer-events:none}
.js .step.was{transform:translate3d(0,-14px,0)}
.js .step.on{transition:opacity .7s var(--ease) .12s, filter .8s var(--ease) .12s, transform .9s var(--ease) .12s, visibility 0s}
html:not(.js) .ask__head, html:not(.js) .ask__bar, html:not(.js) [data-next], html:not(.js) [data-prev], html:not(.js) .step__hint{display:none}
html:not(.js) .step:not(:last-child) .step__nav{display:none}

/* Danke-Zustand */
.ask.is-sent{opacity:0; transform:translate3d(0,-12px,0); filter:blur(8px); transition:opacity .6s var(--ease), transform .8s var(--ease), filter .8s var(--ease)}
.thanks{max-width:min(44rem, 100%); outline:none}
.thanks__big{
  margin:0; padding-bottom:.1em;
  font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(3rem, 1rem + 7vw, 8.5rem); line-height:1.16; letter-spacing:-.012em;
}
.thanks__text{margin:1rem 0 0; font-size:var(--t-1); font-weight:300; color:rgba(236,230,218,.8)}
.thanks.is-in .thanks__big, .thanks.is-in .thanks__text{animation:focusIn 1.4s var(--ease) both}
.thanks.is-in .thanks__text{animation-delay:.25s}
@keyframes focusIn{from{opacity:0; filter:blur(14px); transform:translate3d(0,14px,0)} to{opacity:1; filter:none; transform:none}}


/* ==========================================================
   7 · Unterseiten
   ========================================================== */
/* ---------- Rechtstexte ---------- */
.legal{position:relative; z-index:10; max-width:44rem; padding:clamp(8rem,18vh,12rem) var(--gutter) 6rem}
.legal h1{margin:0 0 3rem; font-family:var(--serif); font-weight:300; font-size:var(--t-3); line-height:1.18; letter-spacing:-.02em}
.legal h2{margin:2.5rem 0 .6rem; font-family:var(--serif); font-weight:500; font-size:var(--t-1); text-wrap:balance}
.legal p{margin:0 0 1em; text-wrap:pretty}
.legal a{text-underline-offset:.25em; text-decoration-color:rgba(236,230,218,.35); transition:text-decoration-color .3s, color .3s}
.legal a:hover{text-decoration-color:currentColor}

/* Rückweg zur Startseite */
.back{display:inline-flex; align-items:center; gap:.6em; margin:0 0 2.6rem; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:rgba(236,230,218,.62); transition:color .3s}
.back span{display:inline-block; transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.back:hover, .back:focus-visible{color:var(--papier)}
.back:hover span, .back:focus-visible span{transform:translateX(-.35em)}
.legal .back + h1{margin-top:0}

/* Desktop und iPad quer: konsequenter Übergang vom Kontakt – scharfes Porträt mit Blick zum Text */
@media (min-width:900px) and (min-aspect-ratio:5/4){
  body[data-wide="alt"] .stage__img--sharp{
    background-image:url("../img/bg-kontakt-2560.jpg?v=cd8b091e");
    background-image:image-set(url("../img/bg-kontakt-2560.avif?v=cd8b091e") type("image/avif"), url("../img/bg-kontakt-2560.webp?v=cd8b091e") type("image/webp"), url("../img/bg-kontakt-2560.jpg?v=cd8b091e") type("image/jpeg"));
  }
  body[data-wide="alt"] .stage__img{transform:translate3d(var(--shift), -3.5vh, 0) scale(1.02)}
  body[data-wide="alt"] .stage__img--soft{opacity:0}
  body[data-wide="alt"] .stage__shade::after{opacity:.12}
  body[data-wide="alt"] .legal{max-width:min(44rem, 48vw)}
}
@media (min-width:900px) and (min-aspect-ratio:5/4) and (min-resolution:1.5dppx), (min-width:2200px) and (min-aspect-ratio:5/4){
  body[data-wide="alt"] .stage__img--sharp{
    background-image:url("../img/bg-kontakt-5504.jpg?v=cd8b091e");
    background-image:image-set(url("../img/bg-kontakt-5504.avif?v=cd8b091e") type("image/avif"), url("../img/bg-kontakt-5504.webp?v=cd8b091e") type("image/webp"), url("../img/bg-kontakt-5504.jpg?v=cd8b091e") type("image/jpeg"));
  }
}

/* ---------- 404: Porträt scharf wie auf der Startseite, Text links daneben ---------- */
.nf{position:relative; z-index:10; min-height:100svh; display:grid; align-content:center; padding:8rem var(--gutter) 4rem}
.nf__code{
  margin:0; padding-bottom:.08em;
  font-family:var(--serif); font-weight:300; font-size:clamp(6rem, 2rem + 18vw, 18rem); line-height:1; letter-spacing:-.015em; font-variant-numeric:lining-nums; color:var(--papier);
}
.nf__text{margin:1rem 0 2.5rem; font-size:var(--t-1); font-weight:300; max-width:32rem}
.nf .send{text-decoration:none; width:max-content}
.nf--sharp{max-width:min(40rem, 50vw)}
/* Schmale Bildschirme: Text liegt über dem Gesicht – dort leicht abdunkeln */
@media (max-width:899px), (max-aspect-ratio:5/4){
  .nf--sharp{max-width:none}
  body:has(.nf--sharp) .stage__shade::after{opacity:.55}
}


/* ==========================================================
   8 · Satzregeln
   Headlines in Signifier, Text in Söhne (beide Klim).
   Verlaufstext bekommt unten Innenraum,
   damit Unterlängen nicht vom Hintergrund-Clip abgeschnitten werden.
   ========================================================== */
h1, h2, h3, .count, .manifest__text, .cycle, .tile__big, .discipline__t, .grid--agencies b{
  font-feature-settings:"kern","liga","calt"; font-kerning:normal; hanging-punctuation:first;
}
/* Keine einzelnen Wörter am Absatzende (Hurenkinder/Witwen), Satzzeichen hängen am Rand (Safari) */
p, dd, li, blockquote{text-wrap:pretty; orphans:3; widows:3; hanging-punctuation:first allow-end last}
h1, h2, h3, .h3, .agencies__lead{text-wrap:balance}
/* Keine automatische Silbentrennung: Safari kennt die Feinsteuerung nicht und trennt sonst
   Wörter wie „wer-den“. Flattersatz mit text-wrap:pretty braucht sie nicht; lange
   Komposita bekommen bei Bedarf ein weiches Trennzeichen (­) direkt im Text. */
html{hyphens:manual; -webkit-hyphens:manual}

/* Zähler springen nicht */
.ask__count, .cycle__count{font-variant-numeric:tabular-nums lining-nums}


/* ==========================================================
   9 · Bewegung
   ========================================================== */
/* Reduzierte Bewegung (per Script als .rm gesetzt): alles statisch, nichts gepinnt */
.rm .scene{height:auto !important}
.rm .pin{position:relative !important; height:auto !important; min-height:0; overflow:visible !important; padding-top:clamp(5rem,12vh,8rem); padding-bottom:clamp(5rem,12vh,8rem)}
.rm .track{transform:none !important; flex-direction:column; width:auto}
.rm .chap{width:auto; --f:1}
.rm .manifest__text .w{opacity:1}
.rm .prolog__line, .rm .count{opacity:1 !important; transform:none !important}
.rm .cycle{height:auto; display:flex; flex-wrap:wrap; gap:0 .5em; font-size:var(--t-3)}
.rm .cycle span{position:static; opacity:1; filter:none; transform:none}
.rm .cycle__loc, .rm .route-pin{display:none}
.rm .cycle__count, .rm .bar-progress{display:none}
.rm [data-reveal]{opacity:1 !important; transform:none !important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
  .is-loading .stage{opacity:1; transform:none}
  .is-loading .hero__line, .is-loading .hero__role, .is-loading .hero__cue, .is-loading .bar{opacity:1; transform:none; letter-spacing:.015em}
}

/* Seitenwechsel (DE/EN, Impressum, Datenschutz) als weiche Überblendung – Porträt und Kopfzeile bleiben stehen */
@view-transition{navigation:auto}
::view-transition-old(root), ::view-transition-new(root){animation-duration:.55s; animation-timing-function:cubic-bezier(.4,0,.2,1)}
::view-transition-group(stage), ::view-transition-group(bar){animation-duration:.55s}
.vt body.is-loading .stage, .vt body.is-loading .bar, .vt body.is-loading .hero__line, .vt body.is-loading .hero__role,
.vt body.is-loading .hero__cue{opacity:1 !important; transform:none !important; filter:none !important; letter-spacing:.015em; transition:none !important}

/* Vor dem Drucken: alle Übergänge sofort beenden. Laufende Transitions haben in der
   Kaskade Vorrang vor !important – Safari würde sonst halb eingeblendete Zustände drucken. */
.printing *, .printing *::before, .printing *::after{transition:none !important; animation:none !important}


/* ==========================================================
   10 · Druck & PDF: ein ruhiges, helles Profil auf zwei A4-Seiten.
   Keine Bühne, keine Bewegung, kein Formular – nur Inhalt und Typografie.
   Blockweise gebaut (kaum Grid), damit Safari genauso umbricht wie Chrome.
   ========================================================== */

/* ==========================================================
   Magnetische Screens: Die Seite rastet beim Scrollen auf festen Bildschirm-Layouts ein.
   Natives Scroll-Snap des Browsers (läuft mit dem Schwung weiter, auch auf iOS).
   Aktiv nur mit JS (Klasse .snap am <html>), nie bei „Bewegung reduzieren“ und nie im Druck.
   ========================================================== */
@media screen{
  .snap{scroll-snap-type:y mandatory}
  /* Touch-Geräte: weiches Einrasten per Skript (natürlicher Schwung, dann magnetisches Gleiten) */
  .snap.snap-touch{scroll-snap-type:none}
  .snap.snap-off{scroll-snap-type:none}
  .snap .hero, .snap .prolog, .snap .manifest, .snap .statement, .snap .film, .snap .snap-mark,
  .snap .agencies, .snap .brands, .snap .dscreen, .snap .approach, .snap .contact{scroll-snap-align:start}
  .snap .foot{scroll-snap-align:end}
  /* jeder Screen füllt genau einen Bildschirm, Inhalt mittig unter der Kopfzeile */
  .snap .prolog .flow, .snap .manifest .flow{min-height:100svh; box-sizing:border-box; padding-top:calc(4rem + env(safe-area-inset-top,0px))}
  .snap .statement{min-height:100svh; box-sizing:border-box; align-content:center; padding-top:calc(5rem + env(safe-area-inset-top,0px)); padding-bottom:clamp(2rem,6vh,4rem)}
  .snap .statement__quote{margin-top:clamp(2.5rem,8vh,6rem)}
  .snap .film{min-height:100svh; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; padding-top:calc(4.5rem + env(safe-area-inset-top,0px)); padding-bottom:clamp(1.5rem,4vh,3rem)}
  .snap .agencies .flow{min-height:100svh; box-sizing:border-box; padding-top:calc(4rem + clamp(2.5rem,7vh,4.5rem) + env(safe-area-inset-top,0px)); padding-bottom:clamp(1.5rem,4vh,3rem)}
  .snap .brands{min-height:100svh; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center;
    padding-top:calc(5rem + env(safe-area-inset-top,0px)); padding-bottom:clamp(1.5rem,4vh,3rem)}
  .snap .brands__head{margin-bottom:clamp(1.5rem,4vh,3rem)}
  .snap .brands__head .roster__note{margin-top:1.2rem}
  .snap .grid--brands li{padding-top:clamp(.55rem,1.6vh,1.15rem); padding-bottom:clamp(.55rem,1.6vh,1.15rem)}
  .snap .disciplines{padding-top:0; padding-bottom:0}
  .snap .dscreen{min-height:100svh; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center;
    padding:calc(5rem + env(safe-area-inset-top,0px)) 0 clamp(1.5rem,4vh,3rem)}
  .snap .dscreen .dgroup:first-child{margin-top:0}
  .snap .approach, .snap .contact{min-height:100svh; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center;
    padding-top:calc(5rem + env(safe-area-inset-top,0px)); padding-bottom:clamp(1.5rem,4vh,3rem)}
  .snap-mark{position:absolute; left:0; width:1px; pointer-events:none; visibility:hidden}
}
@media screen{
  .snap{scroll-padding-top:0}
  .snap .snap-mark{scroll-margin-top:0}
  .snap .snap-mark--hold{scroll-snap-stop:always}
  /* Arbeitsweise und Kontakt kompakter, damit sie auf einen Screen passen */
  .snap .tile__big{margin-top:1.2rem}
  .snap .approach, .snap .contact{padding-top:calc(4.75rem + env(safe-area-inset-top,0px)); padding-bottom:1rem}
  .snap .contact__h{margin-bottom:clamp(1rem,2.5vh,2rem)}
  .snap .ask{margin-top:clamp(1rem,2.5vh,2rem)}
  .snap .contact__meta{margin-top:clamp(1.5rem,3.5vh,3rem)}
  .snap .dscreen{padding-top:calc(4.75rem + env(safe-area-inset-top,0px)); padding-bottom:1rem}
  .snap .dgroup + .dgroup{margin-top:clamp(1.5rem,4vh,4rem)}
  .snap .discipline{padding:clamp(.7rem,2vh,1.6rem) 0}
  .snap .disciplines__lead{margin-bottom:clamp(1.2rem,3vh,3rem)}
}
/* Touch-Geräte: Kontakt und Fußzeile (Impressum, Datenschutz) bilden gemeinsam den letzten Screen */
@media screen and (pointer:coarse){
  .snap .contact{min-height:calc(100svh - var(--foot-h, 4.5rem)); padding-bottom:.5rem; justify-content:center}
  .snap .foot{padding:1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom,0px)); gap:.6rem 1.5rem; font-size:.8rem}
  .snap .step{margin-bottom:1rem}
  .snap .step__nav{margin-top:1.2rem}
  .snap .ask__bar{margin:.8rem 0 clamp(1rem,3vh,2rem)}
  .snap .contact__meta{margin-top:clamp(1rem,3vh,2.5rem)}
}
@media screen and (pointer:coarse){
  .snap .box textarea{min-height:5.2rem}
  .snap .box input, .snap .box textarea{padding-top:1.8rem; padding-bottom:.7rem}
  .snap .box textarea{padding-top:.9rem}
  .snap .file__pick{padding:.75rem 1rem}
}
@media screen and (pointer:coarse) and (max-height:900px){
  .snap .contact__h{font-size:clamp(2.1rem, 1rem + 3.4vw, 3.6rem)}
  .snap .step__q{font-size:clamp(1.5rem, 1rem + 1.4vw, 2.2rem); margin-bottom:.9rem}
  .snap .file__hint{display:none}
}
@media screen and (pointer:coarse) and (max-width:640px){
  .snap .ask__intro{font-size:.6rem; letter-spacing:.02em; white-space:nowrap}
  .snap .ask__head{align-items:center}
}
@media screen and (pointer:coarse) and (max-width:640px) and (max-height:780px){
  /* kleine iPhones: kompakter, damit Formular und Fußzeile gemeinsam auf einen Screen passen */
  :root.snap .contact{padding-top:calc(4.25rem + env(safe-area-inset-top,0px))}
  :root.snap .contact .eyebrow{display:none}
  :root.snap .contact__h{font-size:1.95rem}
  :root.snap .box textarea{min-height:4.2rem}
  :root.snap .step__q{font-size:1.4rem; margin-bottom:.7rem}
  :root.snap .ask__bar{margin:.6rem 0 .9rem}
  :root.snap .box input{padding-top:1.6rem; padding-bottom:.55rem; font-size:1.1rem}
  :root.snap .step__nav{margin-top:.9rem}
  :root.snap .contact__meta{margin-top:.6rem; font-size:.8rem; gap:.3rem 1.1rem}
  :root.snap .foot{padding-top:.7rem; padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px))}
}
@media screen and (pointer:coarse) and (max-width:640px){
  .snap .contact .eyebrow{margin-bottom:.8rem}
  .snap .contact__h{font-size:2.25rem; margin-bottom:.6rem}
  .snap .ask{margin-top:.6rem}
  .snap .ask__intro{font-size:.62rem; letter-spacing:.05em; white-space:nowrap}
  .snap .step__q{font-size:1.6rem; margin-bottom:.9rem}
  .snap .step__fields{gap:.6rem}
  .snap .contact__meta{gap:.4rem 1.3rem; font-size:.84rem}
}
@media screen and (min-width:641px) and (max-width:900px){
  /* iPad hoch: Arbeitsweise zweispaltig, damit sie auf einen Screen passt */
  .snap .bento{grid-template-columns:1fr 1fr}
  .snap .bento .tile--wide{grid-column:auto}
}
@media screen and (max-height:900px){
  .snap .discipline__t{font-size:clamp(2.2rem, 1rem + 4.2vw, 5rem)}
}
@media screen and (max-width:640px){
  /* Handy: zusätzliche Haltepunkte innerhalb langer Abschnitte */
  /* Handy: Disziplinen in drei Screens – jede weitere Gruppe füllt einen eigenen Bildschirm */
  .snap .bento .tile:nth-child(3){scroll-snap-align:start; scroll-margin-top:calc(5.5rem + env(safe-area-inset-top,0px))}
  .snap .chapters .track{animation:none !important}
  .snap .discipline__t{font-size:2.1rem}
  .snap .discipline__d{font-size:.95rem}
}
@media screen and (max-width:640px){
  /* Marken auf dem Handy dreispaltig und kompakter, damit alle auf einen Screen passen */
  .snap .grid--brands{grid-template-columns:repeat(3, minmax(0,1fr))}
  .snap .grid--brands li{font-size:.9rem; padding:.55rem .5rem .55rem 0}
  .snap .brands__head .h2{font-size:clamp(2rem, 9vw, 2.6rem)}
}
@media print{
  @page{size:A4; margin:15mm 17mm 14mm}
  :root{--gutter:0; color-scheme:light}
  *, *::before, *::after{animation:none !important; transition:none !important}
  html, body{background:#fff !important; color:#141414 !important; font-size:9.2pt; line-height:1.45}
  body *{
    color:#141414 !important; -webkit-text-fill-color:currentColor !important; background:none !important;
    text-shadow:none !important; box-shadow:none !important; filter:none !important; mask:none !important; -webkit-mask:none !important;
    opacity:1 !important; transform:none !important; translate:none !important; scale:none !important; min-height:0 !important;
  }
  [data-reveal], .w, .hero__line, .track, .chap, .pin, section, .flow{visibility:visible !important}
  .muted, .muted *, .chap__role, .roster__note, .grid small, .grid__more, .tile__kicker, .dgroup__label, .eyebrow, .chapters__edu{color:#6e6a63 !important}
  a{text-decoration:none !important}

  .stage, .bar, .skip, .hero__cue, .route-pin, .cycle, .cycle__count, .agencies, .ask, .thanks, .contact__vcf,
  .bar-progress, .foot nav, main ~ .foot, .back, .disciplines__lead, .prolog .eyebrow, .prolog__pre,
  .manifest .eyebrow, .disciplines .eyebrow, .approach > .eyebrow, .contact > .eyebrow, .chapters__head .eyebrow{display:none !important}
  main, section, .pin, .flow, .scene{position:static !important; height:auto !important; margin:0 !important; padding:0 !important; overflow:visible !important; border:0 !important}
  section{display:block !important}

  /* Kopf: Name und Rolle (Chrome richtet auch Blöcke per justify-self aus – daher explizit) */
  .hero{display:block !important; position:relative !important; padding-bottom:4.5mm !important; margin-bottom:5mm !important; border-bottom:.3pt solid #141414 !important}
  .hero__name, .hero__role{display:block !important; visibility:visible !important; position:static !important}
  .hero__name{font-size:30pt !important; line-height:.95 !important; margin:0 !important}
  .hero__line{display:inline !important; padding:0 !important; margin:0 !important}
  .hero__line + .hero__line::before{content:" "}
  .hero__role{justify-self:start !important; text-align:left !important; margin:1.5mm 0 0 !important; font-size:9pt !important; letter-spacing:.02em}

  /* Prolog, Haltung, Leitsatz */
  .prolog .flow{display:flex !important; align-items:baseline; gap:2.5mm; flex-wrap:wrap}
  .count{font-size:22pt !important; margin:0 !important; padding:0 !important; line-height:1 !important}
  .count::before{content:"Seit "; font-weight:300}
  :lang(en) .count::before{content:"Since "}
  .count__num{font-size:0 !important}
  .count__num::after{content:"1996"; font-size:22pt; font-variant-numeric:oldstyle-nums}
  .prolog__line{display:block !important; font-size:11pt !important; margin:0 !important}
  .prolog__line br{display:none}
  .prolog__line .muted::before{content:" "}
  .manifest{margin-top:3.5mm !important}
  .manifest__text{font-size:13.5pt !important; line-height:1.2 !important; max-width:none !important; margin:0 !important}
  .statement{display:grid !important; grid-template-columns:1fr 1fr; column-gap:10mm; margin-top:3.5mm !important}
  .statement__body{grid-column:1 !important; font-size:9.2pt !important; max-width:none !important}
  .statement__body p{margin:0 0 .5em !important}
  .statement__quote{grid-column:2 !important; grid-row:1; margin:0 !important; padding:0 0 0 6mm !important; border-left:.3pt solid #b8a27a !important; border-top:0 !important; align-self:center}
  .statement__quote p{font-size:17pt !important; max-width:none !important}

  /* Kapitel als Zeitleiste in zwei Spalten */
  .chapters{margin-top:5mm !important; padding-top:4mm !important; border-top:.3pt solid #d6d0c4 !important}
  .chapters__head{position:static !important; margin:0 0 2.5mm !important; padding:0 !important}
  .chapters__head .h2{font-size:14pt !important; line-height:1.15 !important; margin:0 !important}
  .chapters__head .h2 br{display:none}
  .chapters__head .h2 .muted::before{content:" "}
  .track{display:grid !important; grid-template-columns:1fr 1fr; gap:2mm 10mm !important; width:auto !important; padding:0 !important; margin:0 !important; list-style:none}
  .chap{display:block !important; position:relative !important; width:auto !important; height:auto !important; padding:0 0 0 14mm !important; margin:0 !important; border:0 !important; break-inside:avoid}
  .chap > *{display:block}
  .chap__year{position:absolute !important; left:0; top:0; font-family:var(--serif); font-weight:300; letter-spacing:0; font-size:11pt !important; line-height:1.25 !important; margin:0 !important; padding:0 !important}
  .chap__title{font-size:10.5pt !important; font-weight:500; margin:0 !important; line-height:1.25 !important}
  .chap__role{font-size:8pt !important; margin:.2mm 0 .6mm !important}
  .chap__text{font-size:8.3pt !important; margin:0 !important; line-height:1.36 !important}
  .chapters__foot{display:block !important; position:static !important; margin:2mm 0 0 !important; padding:0 !important; border:0 !important; font-size:8pt}

  /* Seite 2: Disziplinen, Agenturen, Marken, Arbeitsweise, Kontakt */
  .disciplines{break-before:page}
  .roster__head, .brands__head{display:flex !important; align-items:baseline; gap:4mm; margin:0 0 2.5mm !important; padding:0 !important}
  .roster__head .h3, .brands__head .h2{font-size:14pt !important; line-height:1.15 !important; margin:0 !important}
  .brands__head .h2 br, .brands__head .h2 .muted{display:none}
  .roster__note{font-size:7pt !important; margin:0 !important}
  /* Spalten per Grid statt CSS-Columns (werden von Safari im Druck ignoriert) */
  .grid{display:grid !important; columns:auto !important; grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:6mm !important; row-gap:.8mm; margin:0 !important; padding:0 !important; list-style:none; border:0 !important}
  .grid--brands{grid-template-columns:repeat(5, minmax(0,1fr))}
  .grid li{display:block !important; padding:0 !important; margin:0 !important; border:0 !important; break-inside:avoid; font-size:9pt !important}
  .grid li b{font-weight:500}
  .grid small{display:inline !important; font-size:7.8pt !important; margin-left:1.5mm}
  .grid--agencies b{font-size:10pt !important; line-height:1.3 !important; font-family:var(--serif)}
  .grid--brands li{font-size:8.4pt !important; line-height:1.35 !important}
  .brands, .disciplines{margin-top:4mm !important}
  .dgroup{display:block !important; margin:0 0 2.5mm !important; padding:0 !important; border:0 !important; break-inside:avoid}
  .dgroup__label{font-size:7pt !important; margin:0 0 1mm !important}
  .dgroup__label::before, .dgroup__label::after{display:none !important}
  .disciplines__list{display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:2mm 6mm !important; margin:0 !important}
  .discipline{display:block !important; padding:0 !important; margin:0 !important; border:0 !important}
  .discipline__t{font-size:10.5pt !important; margin:0 !important}
  .discipline__d{font-size:7.6pt !important; line-height:1.3 !important; margin:.3mm 0 0 !important}
  .approach{margin-top:4mm !important}
  .bento{display:grid !important; grid-template-columns:1.45fr 1fr 1fr 1fr !important; gap:3mm 6mm !important}
  .tile{padding:2.5mm 0 0 !important; border:0 !important; border-top:.3pt solid #d6d0c4 !important; border-radius:0 !important; overflow:visible !important; break-inside:avoid; grid-column:auto !important}
  .tile__kicker{font-size:7pt !important; margin:0 0 1mm !important}
  .tile__big{font-size:11pt !important; line-height:1.15 !important; margin:0 0 1mm !important}
  .tile__text{font-size:8pt !important; line-height:1.38 !important; margin:0 !important}
  .contact{margin-top:4mm !important; padding-top:3mm !important; border-top:.3pt solid #141414 !important; break-inside:auto !important; break-before:avoid}
  .contact__h, .contact__meta{visibility:visible !important}
  .contact__h{font-size:16pt !important; margin:0 0 2mm !important; max-width:none !important}
  .contact__meta{display:flex !important; gap:2mm 7mm; margin:0 !important; font-size:9pt}
  .contact__meta a[href*="linkedin"]::after{content:" · linkedin.com/in/dstobbe"}
  .contact__meta a[href*="xing"]::after{content:" · xing.com/profile/Dennis_Stobbe"}
  .contact__meta::after{content:"www.stobbe.cc"}
  .foot{position:static !important; display:block !important; margin:3mm 0 0 !important; padding:0 !important; border:0 !important; font-size:7.5pt}
  .foot > span::after{content:" · www.stobbe.cc"}

  /* Unterseiten */
  .legal{padding:0 !important; max-width:none !important}
}

/* Marken: volle Liste */
@media screen and (min-width:641px){
  .snap .grid--brands{grid-template-columns:repeat(auto-fill,minmax(min(50%,11rem),1fr))}
  .snap .grid--brands li{font-size:clamp(1rem,.8rem + .36vw,1.3rem);padding-top:clamp(.45rem,1.25vh,1rem);padding-bottom:clamp(.45rem,1.25vh,1rem)}
}
@media screen and (max-width:640px){
  .snap .grid--brands{grid-template-columns:repeat(3,minmax(0,1fr))}
  .snap .grid--brands li{font-size:.86rem;line-height:1.15;white-space:nowrap;padding:clamp(.28rem,.95svh,.5rem) .3rem clamp(.28rem,.95svh,.5rem) 0}
}

/* Prolog: nur an den Kommas umbrechen */
.prolog__line .nw{white-space:nowrap}
@media screen and (min-width:641px){.prolog__line{max-width:none}.prolog__line .muted{white-space:nowrap}}
@media screen and (max-width:640px){.prolog__line .nw{display:block}}

/* Der Weg: Das helle Kapitel bekommt minimal mehr Gewicht (variable Schrift, keine Ladezeit) */
.chap__title{font-weight:300}

/* E-Mail kopiert */
.contact__meta a[href^="mailto:"]{position:relative}
.copied{position:absolute; left:0; bottom:calc(100% + .45em); transform:translate3d(0,.3em,0); white-space:nowrap;
  font-size:.78em; letter-spacing:.06em; color:var(--messing); opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease, ease), transform .35s var(--ease, ease)}
.is-copied .copied{opacity:1; transform:translate3d(0,0,0)}
@media print{.copied{display:none}}

/* Überschriften der Abschnitte: Teil der eigenen Schrift statt gesperrter Versalien-Etiketten */
@media screen{
  .eyebrow{font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(1.2rem, .9rem + .7vw, 1.7rem); line-height:1.2; letter-spacing:0; text-transform:none}
  .dgroup__label, .roster__note{font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(1.05rem, .9rem + .35vw, 1.3rem); letter-spacing:0; text-transform:none}
  .tile__kicker{display:none}
  .chap__role{letter-spacing:0; line-height:1.45}
}

/* Arbeitsweise ohne Karten: kaum sichtbare Abdunklung hinter den Texten, damit sie auf dem Porträt lesbar bleiben */
@media screen{.tile__text{text-shadow:0 0 18px rgba(0,0,0,.7), 0 0 4px rgba(0,0,0,.5)} .tile__big{filter:drop-shadow(0 0 16px rgba(0,0,0,.55))}}

/* Touch: Trefferflächen mindestens 44 px hoch, ohne dass sich die Optik ändert */
@media screen and (pointer:coarse){
  .bar__nav a, .foot nav a, .contact__meta a{position:relative}
  .bar__nav a::after, .foot nav a::after, .contact__meta a:not(.contact__vcf)::after{content:""; position:absolute; inset:-12px -4px}
  .bar__nav .lang a::after{inset:-11px 0}
  .contact__vcf::after{content:""; position:absolute; inset:-12px -4px}
}

/* Druck: Zeilenabstände der Headlines kompakt halten, damit das Kurzprofil auf zwei Seiten bleibt */
@media print{.grid--agencies b{line-height:1.12 !important} .discipline__t{line-height:1.1 !important} .contact__h{line-height:1.08 !important} .h3, .step__q{line-height:1.12 !important}}

/* kleine iPhones: erster Disziplinen-Screen kompakter (Signifier hat längere Ober- und Unterlängen) */
@media screen and (pointer:coarse) and (max-width:640px) and (max-height:780px){
  :root.snap .disciplines__lead{font-size:1.05rem; line-height:1.4; margin-bottom:.9rem}
  :root.snap .discipline{padding:.55rem 0}
  :root.snap .discipline__d{font-size:.88rem}
  :root.snap .dscreen .eyebrow{margin-bottom:.9rem}
}

/* ==========================================================
   Endstufe · Signifier-Extras
   ========================================================== */
/* Getestet: historische Mediäval-1 (ss02) liest sich groß wie ein „I“ – Standard-1 bleibt */
/* Historische Ligaturen (st, ch) – bewusst nur an ein, zwei Stellen */
.dl, .manifest__text .w.dl{font-feature-settings:"kern","liga","calt","dlig"}
/* Kapitälchen für Versal-Abkürzungen: BBDO, PUMA, SONY schreien nicht mehr */
.sc{font-feature-settings:"kern","liga","calt","c2sc","smcp"; letter-spacing:.03em; text-decoration:none}
.sc .cycle__loc{font-feature-settings:"kern","liga","calt"; letter-spacing:normal}
/* Kursive Kapitälchen für Eyebrows und Gruppenlabels: ultratraditionell trifft modern */
@media screen{
  .eyebrow, .dgroup__label, .roster__note{font-feature-settings:"kern","liga","calt","smcp","c2sc"; letter-spacing:.06em}
}
/* Agentur-Animation: Name + Standort optisch mittig im Bereich unter der Kopfzeile (wie Prolog und Manifest) */
@media screen and (min-width:641px){
  .snap .agencies .cycle{position:absolute; left:var(--gutter); right:var(--gutter); top:calc(50% + 2.8rem - .14em); transform:translateY(-50%)}
  .snap .agencies .cycle__count{grid-row:3}
}
/* Markenliste in Söhne: Signifier bleibt die Stimme, die Liste ist Information.
   Versal-Marken bekommen statt Kapitälchen (gibt es in Söhne nicht) etwas Laufweite. */
.grid--brands .sc{font-feature-settings:normal; letter-spacing:.015em}
.grid--brands .grid__more{font-family:var(--serif); font-style:italic; font-size:1.08em; letter-spacing:0}
/* Handy: feinere Hierarchie in Statement und Disziplinen */
@media screen and (max-width:640px){
  .statement__body{font-size:1.125rem; line-height:1.5}
  .statement__body p + p{font-size:1rem; line-height:1.55}
  /* kurze Messinglinie statt langer Trennlinie, Zitat hängt nicht an den Bildschirmrand */
  /* wie am Desktop: das „ hängt vor der Textkante, Linie und Text beginnen auf einer Kante –
     der ganze Block rückt dafür um die Breite des Zeichens ein, damit es nicht am Bildschirmrand klebt */
  .statement__quote{margin-left:1.4rem}
  /* Safari hängt das „ sonst per hanging-punctuation trotzdem an den Bildschirmrand */
  .statement__quote p{hanging-punctuation:none}
  .disciplines__lead, :root.snap .disciplines__lead{font-size:1.125rem; line-height:1.5}
  .dgroup__label::after{display:none}
}
/* Umbrüche, die nur auf dem Handy gelten (Sinneinheiten statt Zufall) */
.br-m{display:none}
@media screen and (max-width:640px){ .br-m{display:inline} }
/* Optischer Randausgleich: die Fleischkante des D steht auf derselben Linie wie der Text darunter */
.hero__name{margin-left:calc(-.049em + .02rem)}
@media screen and (max-width:640px){ .sl-d{display:none} }
/* Handy: Rollenzeile nutzt die volle Breite (Safari rechnete sie nach dem ausgeblendeten Schrägstrich zu schmal) */
@media screen and (max-width:640px){ .hero__role{justify-self:stretch} }
/* Ort und Verfügbarkeit eine Stufe leiser als die Rolle */
.hero__loc{opacity:.68}
/* Zweispaltige Disziplinen (Tablet quer, kleine Laptops): Begriff passt immer in seine sechs Spalten,
   „Creative Direction“ bricht nie um */
@media screen and (min-width:901px){
  .discipline__t{font-size:min(clamp(2.4rem, 1rem + 5.4vw, 6.4rem), calc((100vw - 3 * var(--gutter)) / 16.4))}
}
@media screen and (min-width:901px) and (max-height:900px){
  .snap .discipline__t{font-size:min(clamp(2.2rem, 1rem + 4.2vw, 5rem), calc((100vw - 3 * var(--gutter)) / 16.4))}
}

/* ==========================================================
   Feinschliff
   ========================================================== */
/* Prolog: „Seit … ist Gestaltung meine Profession.“ in einer Stimme, die Zahl steht mitten im Satz */
.prolog__pre{margin:0 0 .1em; font-family:var(--serif); font-style:italic; font-weight:300; font-size:var(--t-2); line-height:1.2; color:var(--papier)}
.prolog__line{font-family:var(--serif); font-style:italic; font-size:var(--t-2); line-height:1.3}
.prolog__line .muted{display:inline-block; margin-top:.9em; font-family:var(--sans); font-style:normal; font-size:var(--t-0); line-height:1.5}
/* Hero (Desktop): Rolle endet auf derselben Grundlinie wie „STOBBE“ */
@media screen and (min-width:641px){
  .hero__name{grid-row:1}
  .hero__role{grid-row:1; align-self:last baseline; margin-top:0}
  .hero__name{align-self:last baseline}
}
/* Weg (Handy): nach dem ersten Kapitel tritt der Kopf zurück, die Kapitel bekommen den Platz */
@media screen and (max-width:640px){
  .js .chapters__head .h2{font-size:calc(var(--t-h2) * (1 - .4 * min(1, var(--p, 0) * 7)))}
  .js .chapters__foot{opacity:calc(1 - min(1, var(--p, 0) * 7)); transition:none}
}
/* Kleine iPhones: dreispaltige Markenliste kompakter, damit sie auf einen Screen passt */
@media screen and (max-width:640px) and (max-height:780px){
  :root.snap .grid--brands li{font-size:.8rem; padding-top:.26rem; padding-bottom:.26rem}
  :root.snap .brands__head{margin-bottom:.9rem}
}
/* Laptops (niedrige Fenster, Maus/Trackpad): Kontakt passt mit Kontaktzeile auf einen Screen */
@media screen and (min-width:641px) and (max-height:900px) and (pointer:fine){
  .snap .contact{padding-top:calc(4.5rem + env(safe-area-inset-top,0px)); padding-bottom:1rem}
  .snap .contact .eyebrow{margin-bottom:.6rem}
  .snap .contact__h{font-size:clamp(2.2rem, 1rem + 3vw, 3.6rem); margin-bottom:.4rem}
  .snap .ask{margin-top:1rem}
  .snap .ask__bar{margin:.8rem 0 1.4rem}
  .snap .step{margin-bottom:1rem}
  .snap .step__nav{margin-top:1.2rem}
  .snap .step__q{font-size:clamp(1.5rem, 1rem + 1.2vw, 2.2rem); margin-bottom:.9rem}
  .snap .box textarea{min-height:5.2rem}
  .snap .contact__meta{margin-top:1.4rem}
}
/* Prolog: Jahreszahl auch an der Höhe begrenzen – „Seit“ behält Abstand zur Navigation */
@media screen and (min-width:641px) and (max-height:900px){
  .count{font-size:min(clamp(6.8rem, 2rem + 22vw, 24rem), 35svh)}
}
/* iPad mini hochkant: Markenliste fünfspaltig, damit sie auf einen Screen passt */
@media screen and (min-width:641px) and (max-width:900px){
  .snap .grid--brands{grid-template-columns:repeat(auto-fill, minmax(min(50%,8.4rem), 1fr))}
}
@media screen and (min-width:641px) and (max-height:740px) and (pointer:fine){
  .snap .contact__h{font-size:clamp(2rem, 1rem + 2.4vw, 3rem)}
  .snap .step__q{font-size:clamp(1.4rem, 1rem + 1vw, 1.9rem)}
}
@media screen and (min-width:641px) and (max-height:740px){
  .snap .discipline{padding-top:.5rem; padding-bottom:.5rem}
  .snap .dgroup + .dgroup{margin-top:1.2rem}
}

/* ==========================================================
   Film: Standbild mit Messing-Play, auf Klick läuft der Film mit Ton.
   Der Abschnitt legt sich schwarz über das Porträt – wie ein Kinosaal, der dunkel wird.
   ========================================================== */
.film{position:relative; isolation:isolate; padding:clamp(5rem,12vh,8rem) var(--gutter)}
.film::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.94) 24%, rgba(0,0,0,.94) 76%, rgba(0,0,0,0))}
.film__in{width:100%; max-width:min(84rem, calc((100svh - 18rem) * 16 / 9)); margin:0 auto}
.film__frame{position:relative; aspect-ratio:16 / 9; background:#000; overflow:hidden; box-shadow:0 0 0 1px var(--linie), 0 2rem 6rem rgba(0,0,0,.6)}
.film__video, .film__poster, .film__poster img{position:absolute; inset:0; width:100%; height:100%; display:block}
.film__video{object-fit:contain; background:#000}
.film__poster img{object-fit:cover; transform:scale(1.001); transition:transform 1.6s var(--ease), filter 1.2s var(--ease)}
.film__start{position:absolute; inset:0; z-index:1; margin:0; padding:0; border:0; background:#000; color:var(--papier); font:inherit; cursor:pointer;
  transition:opacity .7s var(--ease), visibility 0s linear .7s}
.film__start::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top right, rgba(0,0,0,.62), rgba(0,0,0,0) 52%)}
.film__cue{position:absolute; z-index:1; left:clamp(1rem,3.2vw,2.5rem); bottom:clamp(1rem,3.2vw,2.5rem); display:flex; align-items:center; gap:clamp(.85rem,1.6vw,1.25rem); text-align:left}
.film__icon{flex:none; display:grid; place-items:center; width:clamp(3rem,4.6vw,4.25rem); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(194,165,116,.75); background:rgba(0,0,0,.25); transition:background-color .5s var(--ease), border-color .5s var(--ease), transform .6s var(--ease)}
.film__icon svg{width:38%; height:auto; fill:var(--messing); transition:fill .5s var(--ease)}
.film__label{display:block; font-family:var(--serif); font-weight:300; font-size:clamp(1.15rem, .9rem + .6vw, 1.5rem); line-height:1.2; letter-spacing:-.005em}
.film__meta{display:block; margin-top:.4rem; font-family:var(--sans); font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--asche)}
.film__start:hover .film__poster img, .film__start:focus-visible .film__poster img{transform:scale(1.025)}
.film__start:hover .film__icon, .film__start:focus-visible .film__icon{background:var(--messing); border-color:var(--messing); transform:scale(1.04)}
.film__start:hover .film__icon svg, .film__start:focus-visible .film__icon svg{fill:#000}
.film__start:focus-visible{outline:1px solid var(--messing); outline-offset:4px}
.film.is-playing .film__start{opacity:0; visibility:hidden; pointer-events:none}
.film__bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; column-gap:2rem; row-gap:.25rem; margin-top:clamp(.9rem,2vh,1.4rem)}
.film__note{flex:1 1 18rem; margin:0; font-family:var(--sans); font-size:.78rem; line-height:1.45; letter-spacing:.01em; color:var(--asche)}

.film__share{display:inline-flex; align-items:center; gap:.6rem; margin:0; padding:.5rem 0; border:0; background:none; cursor:pointer;
  font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--asche); transition:color .4s var(--ease)}
.film__share svg{width:1.05rem; height:1.05rem; margin-left:-.22rem; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; color:var(--messing)}
.film__share:hover, .film__share:focus-visible, .film__share.is-done{color:var(--papier)}
.film__share:focus-visible{outline:1px solid var(--messing); outline-offset:3px}
.film__more{display:none; align-items:center; gap:.7rem; margin:0 0 0 auto; padding:.5rem 0; border:0; background:none; cursor:pointer;
  font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--papier); transition:color .4s var(--ease)}
.film__more svg{width:1.15rem; height:1.15rem; fill:none; stroke:var(--messing); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .5s var(--ease)}
.film.has-played .film__more{display:inline-flex; animation:more-in .9s var(--ease) both}
.film__more:hover svg, .film__more:focus-visible svg{transform:translateX(.3rem)}
.film__more:hover, .film__more:focus-visible{color:var(--messing)}
.film__more:focus-visible{outline:1px solid var(--messing); outline-offset:3px}
@keyframes more-in{from{opacity:0; transform:translateX(-.6rem)} to{opacity:1; transform:none}}
@media (max-width:640px){
  .film__in{max-width:none}
  .film__frame{margin-inline:calc(var(--gutter) * -1); box-shadow:none}
  .film__bar{padding-inline:0}
  .film .eyebrow{margin-bottom:1.2rem}
  .film__note{flex-basis:100%; font-size:.74rem}
  .film__more{margin-left:0; order:3; flex-basis:100%; padding:.9rem 0 .2rem}
}
/* ----------------------------------------------------------
   Easter Egg: Nach dem Showreel erscheint ein Pfeil zum Content Piece (Hochformat-Film).
   ---------------------------------------------------------- */
.film__next, .piece__back{display:flex; align-items:center; gap:.8rem; margin:0; padding:0; border:0; background:none; color:var(--papier); font:inherit; cursor:pointer}
.film__next{position:absolute; z-index:2; right:clamp(.9rem,2.6vw,2.25rem); top:50%; transform:translate(.6rem,-50%);
  opacity:0; visibility:hidden; transition:opacity .9s var(--ease), transform .9s var(--ease), visibility 0s linear .9s}
.film.has-played .film__next{opacity:1; visibility:visible; transform:translate(0,-50%); transition:opacity .9s var(--ease) 1.2s, transform .9s var(--ease) 1.2s, visibility 0s}
.film__next-label{font-family:var(--sans); font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--papier); text-shadow:0 1px 12px rgba(0,0,0,.8)}
.film__arrow{flex:none; display:grid; place-items:center; width:clamp(2.6rem,3.6vw,3.25rem); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(194,165,116,.75); background:rgba(0,0,0,.35); transition:background-color .5s var(--ease), border-color .5s var(--ease), transform .6s var(--ease)}
.film__arrow svg{width:42%; height:auto; fill:none; stroke:var(--messing); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:stroke .5s var(--ease)}
.film__next:hover .film__arrow, .film__next:focus-visible .film__arrow, .piece__back:hover .film__arrow, .piece__back:focus-visible .film__arrow{background:var(--messing); border-color:var(--messing); transform:scale(1.05)}
.film__next:hover .film__arrow svg, .film__next:focus-visible .film__arrow svg, .piece__back:hover .film__arrow svg, .piece__back:focus-visible .film__arrow svg{stroke:#000}
.film__next:focus-visible, .piece__back:focus-visible{outline:1px solid var(--messing); outline-offset:4px}

.film.show-piece .film__in > .eyebrow, .film.show-piece .film__frame, .film.show-piece .film__bar{display:none}
.piece:not([hidden]){animation:piece-in 1s var(--ease) both}
.film.is-back .film__frame, .film.is-back .film__in > .eyebrow{animation:piece-back 1s var(--ease) both}
@keyframes piece-in{from{opacity:0; transform:translateX(2.5rem)} to{opacity:1; transform:none}}
@keyframes piece-back{from{opacity:0; transform:translateX(-2.5rem)} to{opacity:1; transform:none}}
.piece__body{position:relative; height:max(min(calc(100svh - 12rem), 1280px), 30rem); display:grid; grid-template-columns:minmax(max-content,1fr) auto minmax(0,1fr); align-items:center; column-gap:clamp(2rem,5vw,5rem)}
.piece__back{justify-self:start; flex-direction:row}
.piece__frame{position:relative; height:100%; aspect-ratio:9 / 16; background:#000; overflow:hidden; box-shadow:0 0 0 1px var(--linie), 0 2rem 6rem rgba(0,0,0,.6)}
.piece__video{position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; background:#000}
.piece__start{position:absolute; inset:0; z-index:1; margin:0; padding:0; border:0; background:#000; color:var(--papier); font:inherit; cursor:pointer;
  transition:opacity .7s var(--ease), visibility 0s linear .7s}
.piece__start::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0) 45%)}
.piece__start .film__poster, .piece__start .film__poster img{position:absolute; inset:0; width:100%; height:100%; display:block}
.piece__start:hover .film__poster img, .piece__start:focus-visible .film__poster img{transform:scale(1.025)}
.piece__start:hover .film__icon, .piece__start:focus-visible .film__icon{background:var(--messing); border-color:var(--messing); transform:scale(1.04)}
.piece__start:hover .film__icon svg, .piece__start:focus-visible .film__icon svg{fill:#000}
.piece__start:focus-visible{outline:1px solid var(--messing); outline-offset:4px}
.piece.is-playing .piece__start{opacity:0; visibility:hidden; pointer-events:none}
.piece__info{max-width:17rem}
.piece__title{margin:0 0 1rem; font-family:var(--serif); font-weight:300; font-size:clamp(1.5rem, 1.1rem + 1vw, 2.2rem); line-height:1.15; letter-spacing:-.01em}
.piece__credits, .piece__note{margin:0; font-family:var(--sans); font-size:.82rem; line-height:1.55; color:var(--asche)}
.piece__note{margin-top:.6rem; font-size:.74rem; letter-spacing:.01em}
.piece__insta{display:inline-flex; align-items:center; gap:.8rem; margin-top:1.8rem; color:var(--papier); text-decoration:none}
.piece__insta .film__arrow svg{width:46%}
.piece__insta .film__arrow .dot{fill:var(--messing); stroke-width:1.2; transition:fill .5s var(--ease)}
.piece__insta-label{font-family:var(--sans); font-size:.7rem; font-weight:500; letter-spacing:.16em; transition:color .4s var(--ease)}
.piece__insta:hover .film__arrow, .piece__insta:focus-visible .film__arrow{background:var(--messing); border-color:var(--messing); transform:scale(1.05)}
.piece__insta:hover .film__arrow svg, .piece__insta:focus-visible .film__arrow svg{stroke:#000}
.piece__insta:hover .film__arrow .dot, .piece__insta:focus-visible .film__arrow .dot{fill:#000}
.piece__insta:hover .piece__insta-label, .piece__insta:focus-visible .piece__insta-label{color:var(--messing)}
.piece__insta:focus-visible{outline:1px solid var(--messing); outline-offset:4px}
@media (max-width:900px){
  .piece__body{position:static; height:auto; display:flex; flex-direction:column; align-items:center; gap:1.4rem}
  .piece__frame{height:auto; width:min(100%, calc(70svh * 9 / 16))}
  .piece__info{flex:none; max-width:none; width:min(100%, calc(70svh * 9 / 16)); text-align:left}
  .piece{position:relative}
  .piece__frame{width:min(100%, calc((100svh - 12rem) * 9 / 16))}
  .piece__info{width:min(100%, calc((100svh - 12rem) * 9 / 16))}
  /* Zurück steht oben rechts neben der Überschrift – sofort erreichbar, ohne zu scrollen */
  .piece__back{position:absolute; top:-.2rem; right:0; left:auto; transform:none; z-index:2; gap:.6rem}
  .piece__back .film__arrow{width:2.5rem}
  .piece__back .film__next-label{position:static; width:auto; height:auto; overflow:visible; clip:auto}
}
@media (max-width:600px){ .film__next-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} .film__next{top:.9rem; right:.9rem; transform:translate(.6rem,0)} .film.has-played .film__next{transform:none} }
@media (prefers-reduced-motion:reduce){ .piece:not([hidden]), .film.is-back .film__frame, .film.is-back .film__in > .eyebrow{animation:none} .film__next, .film__arrow, .piece__start{transition:none} }
/* Handy quer gedreht, während der Film läuft: Film füllt den ganzen Bildschirm.
   Wo der Browser echtes Vollbild erlaubt, kommt das obendrauf (site.js). */
html.film-full, html.film-full body{overflow:hidden !important}
html.film-full main{z-index:40}
html.film-full .film__in{transform:none !important}
html.film-full .film__frame{position:fixed; inset:0; z-index:1000; margin:0; width:100vw; height:100vh; height:100dvh; aspect-ratio:auto; box-shadow:none; background:#000}
@media (prefers-reduced-motion:reduce){ .film__poster img, .film__icon, .film__start{transition:none} }
@media print{ .film{display:none !important} }