/* Das Studiozwei — Stylesheet
   Statisch, keine Frameworks, keine externen Abhängigkeiten.
   Schriften liegen lokal unter assets/fonts/. */

/* Schriften lokal gehostet — keine externen Requests */
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/inter-latin-ext-300-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/inter-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Questrial';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/questrial-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Questrial';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/questrial-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#0b0b0c;
  --bg2:#121214;
  --panel:#161618;
  --line:#26262a;
  --ink:#f4f3f1;
  --mut:#8e8e94;
  --mut2:#b9b9be;
  --acc:#c8a45c;
  --max:1480px;
  --pad:clamp(20px,5vw,80px);
  --serif:"Questrial",system-ui,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --f-hero:clamp(2.5rem,7.6vw,7rem);
  --f-h2:clamp(1.8rem,4vw,3.4rem);
  --f-h3:clamp(1.2rem,1.9vw,1.6rem);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:300;
  font-size:clamp(1rem,1.02vw,1.08rem);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--acc);color:#0b0b0c}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.disp{font-family:var(--serif);font-weight:400;letter-spacing:-.015em}
.eyebrow{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);font-weight:500}
.lead{font-size:clamp(1.04rem,1.35vw,1.26rem);color:var(--mut2);max-width:62ch}
.acc{color:var(--acc)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:999;background:var(--ink);color:var(--bg);padding:.7rem 1.2rem}

/* ---------- Kopfzeile ---------- */
header{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid transparent;
  background:linear-gradient(180deg,rgba(11,11,12,.72) 0,rgba(11,11,12,0) 100%);
  transition:background .35s,border-color .35s,backdrop-filter .35s}
header.solid{background:rgba(11,11,12,.9);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:76px;max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.brand{display:flex;flex-direction:column;gap:.28rem;line-height:1.1}
.brand b{
  font-family:"Montserrat",var(--sans);
  font-weight:400;
  font-size:clamp(1.05rem,1.55vw,1.42rem);
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--acc);-webkit-text-fill-color:var(--acc);
}
.brand .bar{-webkit-text-fill-color:rgba(255,255,255,.55);color:rgba(255,255,255,.55);padding-inline:.12em}
.brand span.sub{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.menu{display:flex;align-items:center;gap:2rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.menu a{transition:color .25s}
.menu a:hover,.menu a[aria-current=page]{color:var(--ink)}
.pill{border:1px solid var(--line);padding:.55rem 1.25rem;color:var(--ink)}
.pill:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:.5rem;cursor:pointer}
.burger span{display:block;width:24px;height:1px;background:var(--ink);transition:.3s}

@media(max-width:940px){
  .burger{display:flex}
  .menu{position:fixed;inset:76px 0 auto;flex-direction:column;align-items:stretch;gap:0;background:var(--bg2);border-bottom:1px solid var(--line);
        max-height:0;overflow:hidden;transition:max-height .4s ease;font-size:.9rem}
  .menu.open{max-height:80vh}
  .menu a{padding:1.1rem var(--pad);border-bottom:1px solid var(--line)}
  .pill{border:0;border-bottom:1px solid var(--line)}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-block:0}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.98) contrast(1.04)}
.hero .veil{position:absolute;inset:0;background:
  /* Kanten weich ausfaden, Bildmitte bleibt offen */
  linear-gradient(90deg,
    rgba(11,11,12,.9)  0%,
    rgba(11,11,12,.55) 14%,
    rgba(11,11,12,.12) 34%,
    rgba(11,11,12,0)   58%,
    rgba(11,11,12,.2)  88%,
    rgba(11,11,12,.62) 100%),
  /* Kopfzeile oben, Textzone unten — dazwischen nichts */
  linear-gradient(180deg,
    rgba(11,11,12,.7)  0%,
    rgba(11,11,12,.1)  16%,
    rgba(11,11,12,0)   42%,
    rgba(11,11,12,.62) 78%,
    rgba(11,11,12,.97) 100%)}
/* Schrift trägt über hellen Bildstellen ohne die ganze Fläche zu dämpfen */
.hero h1,.hero .lead,.toprow{text-shadow:0 2px 26px rgba(6,6,7,.72),0 1px 4px rgba(6,6,7,.5)}
/* Erster Satz bleibt auf einer Zeile, "Konzept" beginnt die zweite */
@media(min-width:760px){.hero .lead .zeile{display:block}}
.claim{letter-spacing:-.045em;max-width:none}
/* Gold wie im Schriftzug — eine Fläche, kein Verlauf */
.gold{
  color:var(--acc);-webkit-text-fill-color:var(--acc);
  text-shadow:0 2px 18px rgba(6,6,7,.6);
}
@media(max-width:899px){
  /* Querformat auf schmalem Schirm: Ausschnitt auf das Motiv rechts legen */
  .hero .bg img{object-position:64% center}
  .hero{min-height:92svh}
  .hero .veil{background:
    linear-gradient(180deg,rgba(11,11,12,.78) 0%,rgba(11,11,12,.22) 20%,rgba(11,11,12,.3) 44%,rgba(11,11,12,.9) 82%,rgba(11,11,12,1) 100%),
    linear-gradient(90deg,rgba(11,11,12,.6) 0%,rgba(11,11,12,.22) 55%,rgba(11,11,12,.5) 100%)}
}

.hero .inner{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad) clamp(48px,7vh,100px)}
.toprow{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);
        border-bottom:1px solid rgba(244,243,241,.16);padding-bottom:1rem;margin-bottom:clamp(1.8rem,4vh,3rem)}
h1{font-family:var(--serif);font-weight:400;font-size:var(--f-hero);line-height:.98;letter-spacing:-.03em;max-width:16ch}
.hero .lead{margin-top:1.6rem}
.btnrow{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.btn{display:inline-block;border:1px solid var(--line);padding:.9rem 1.9rem;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;transition:.3s}
.btn:hover{border-color:var(--ink)}
.btn.solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.solid:hover{background:var(--acc);border-color:var(--acc);color:#0b0b0c}

/* Auf dem Handy soll das Motiv sichtbar bleiben: Textblock schlanker */
@media(max-width:640px){
  .toprow{
    flex-direction:column;gap:.35rem;font-size:.62rem;letter-spacing:.16em;
    padding-bottom:.7rem;margin-bottom:1.1rem;
  }
  .toprow span:last-child{display:none}          /* Ortszeile steht ohnehin im Kontakt */
  .hero h1{font-size:clamp(2.2rem,11.5vw,3.4rem)}
  .hero .lead{font-size:.98rem;line-height:1.55;margin-top:1rem;max-width:34ch}
  .btnrow{flex-wrap:nowrap;gap:.5rem;margin-top:1.5rem}
  .btnrow .btn{flex:1 1 0;text-align:center;padding:.85rem .6rem;font-size:.66rem;letter-spacing:.1em}
  .hero .inner{padding-bottom:clamp(32px,5vh,60px)}
}

/* ---------- Abschnitte ---------- */
section{padding-block:clamp(52px,6.6vh,104px)}
section.tight{padding-block:clamp(34px,4.2vh,62px)}
/* Referenzband ohne Fließtext darunter — braucht weniger Luft */
section.band.tight{padding-block:clamp(26px,3.1vh,44px)}
h2{font-family:var(--serif);font-weight:400;font-size:var(--f-h2);line-height:1.05;letter-spacing:-.02em}
h3{font-family:var(--serif);font-weight:400;font-size:var(--f-h3);line-height:1.2}
.sec-head{display:grid;gap:1.1rem;margin-bottom:clamp(26px,3.4vh,50px)}
@media(min-width:900px){.sec-head{grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:3rem;align-items:end}}
.sec-head>*{min-width:0}
.sec-head h1,.sec-head h2{overflow-wrap:normal;hyphens:manual;text-wrap:balance}

/* Positionierung */
.stmt{border-top:1px solid var(--line);padding-top:clamp(28px,3.6vh,50px)}
.stmt .pull{font-family:var(--serif);font-size:clamp(1.4rem,2.7vw,2.3rem);line-height:1.3;max-width:26ch}
/* ab Tablet zwei saubere Zeilen: Umbruch am Komma, nicht mitten im Satzteil */
@media(min-width:900px){
  .stmt .pull{max-width:52ch}
  .stmt .pull .zeile{display:block}
}
.cols{display:grid;gap:2.2rem;margin-top:2.2rem}
@media(min-width:820px){.cols{grid-template-columns:repeat(3,1fr);gap:3rem}}
.cols h4{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;margin-bottom:.7rem;color:var(--acc)}
.cols p{font-size:.96rem;color:var(--mut)}

/* ---------- Hover-Akkordeon (Galerien) ---------- */
.accordion{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:2px;background:var(--line)}
.panel{position:relative;display:block;min-width:0;overflow:hidden;background:var(--panel);height:clamp(300px,34vw,460px);transition:transform .5s}
.panel img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform 1.2s cubic-bezier(.22,.72,.16,1),filter .6s}
.panel .veil{position:absolute;inset:0;transition:background .6s;
  background:linear-gradient(180deg,rgba(11,11,12,.18) 30%,rgba(9,9,10,.9) 100%)}

/* Ausdehnen: nur wo echtes Hovern möglich ist */
@media(hover:hover) and (min-width:900px){
  .accordion:hover .panel,.accordion:focus-within .panel{flex-grow:.62}
  .accordion .panel:hover,.accordion .panel:focus-visible{flex-grow:3.1}
  .accordion:hover .panel:not(:hover) img{filter:brightness(.5) saturate(.72)}
  .accordion .panel:hover img{transform:scale(1.03)}
  .accordion:hover .panel:not(:hover) .veil{background:linear-gradient(180deg,rgba(11,11,12,.4) 20%,rgba(9,9,10,.95) 100%)}
}

.panel .idx{position:absolute;top:clamp(16px,1.8vw,26px);left:clamp(16px,1.6vw,24px);z-index:3;
  font-size:.68rem;letter-spacing:.16em;color:rgba(244,243,241,.55)}
.panel .pin{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(18px,1.9vw,32px);min-width:0}
.panel .num{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:.5rem;white-space:nowrap}
.panel h3{margin-bottom:.4rem;white-space:normal;overflow-wrap:break-word;
  font-size:clamp(1.05rem,1.35vw,1.45rem);line-height:1.14;transition:font-size .5s cubic-bezier(.22,.72,.16,1)}
@media(hover:hover) and (min-width:900px){
  .accordion .panel:hover h3,.accordion .panel:focus-visible h3{font-size:clamp(1.5rem,2.1vw,2.1rem)}
  /* zusammengeschobene Flächen: lieber abschneiden als mitten im Wort trennen */
  .accordion:hover .panel:not(:hover) h3,.accordion:focus-within .panel:not(:focus-visible) h3{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(.95rem,1.15vw,1.2rem)}
  .accordion:hover .panel:not(:hover) .num,.accordion:focus-within .panel:not(:focus-visible) .num{
    overflow:hidden;text-overflow:ellipsis}
}
.panel .d,.panel .cnt{display:block;overflow:hidden}
.panel .d{font-size:.88rem;color:var(--mut2);line-height:1.5;max-width:42ch}
.panel .cnt{margin-top:.8rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}

/* Beschreibung erst im ausgedehnten Zustand */
@media(hover:hover) and (min-width:900px){
  .panel .d,.panel .cnt{opacity:0;max-height:0;margin-top:0;
    transition:opacity .45s ease .18s,max-height .6s cubic-bezier(.22,.72,.16,1),margin-top .45s}
  .accordion .panel:hover .d,.accordion .panel:focus-visible .d{opacity:1;max-height:6em}
  .accordion .panel:hover .cnt,.accordion .panel:focus-visible .cnt{opacity:1;max-height:3em;margin-top:.8rem}
}

/* Schmale Bildschirme: untereinander, alles sichtbar */
@media(max-width:899px){
  .accordion{grid-template-columns:1fr;gap:2px}
  .panel{height:min(72vw,420px)}
  .panel h3{white-space:normal;font-size:clamp(1.25rem,5.4vw,1.6rem)}
  .panel .veil{background:linear-gradient(180deg,rgba(11,11,12,.28) 0,rgba(11,11,12,.42) 34%,rgba(9,9,10,.93) 100%)}
  .panel .pin{padding:clamp(20px,5vw,28px)}
  .panel .d{font-size:.92rem;color:#cfcfd3}
}
@media(prefers-reduced-motion:reduce){
  .panel,.panel img,.panel .veil,.panel .d,.panel .cnt{transition:none}
}

/* ---------- Referenzband ---------- */
.band{border-block:1px solid var(--line);background:var(--bg2);overflow:hidden}
.marquee{overflow:hidden;white-space:nowrap;padding-block:.55rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:inline-flex;align-items:center;width:max-content;will-change:transform;animation:mv 44s linear infinite}
.track.r{animation-duration:56s;animation-direction:reverse}
.marquee:hover .track{animation-play-state:paused}
.track .n{font-family:var(--serif);font-size:clamp(1rem,1.6vw,1.35rem);color:#75757c}
.track .s{color:var(--acc);padding-inline:1rem}
@keyframes mv{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq-note{max-width:68ch;margin:1.8rem auto 0;text-align:center;font-size:.8rem;color:var(--mut);line-height:1.6}
@media(prefers-reduced-motion:reduce){
  .track{animation:none;white-space:normal;flex-wrap:wrap;justify-content:center}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---------- Ablauf ---------- */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:880px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--bg);padding:clamp(24px,3vw,40px);min-height:200px;display:flex;flex-direction:column;gap:1.2rem}
.step b{font-family:var(--serif);font-size:2.2rem;color:var(--acc);line-height:1}
.step h4{font-size:1.02rem;font-weight:400;margin-bottom:.4rem;font-family:var(--serif)}
.step p{font-size:.9rem;color:var(--mut)}

/* ---------- Zweispalter ---------- */
.split{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
@media(min-width:920px){.split{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
.split.rev>*:first-child{order:0}
.split .ph img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* Studio-Portrait: Ausschnitt etwas nach links geschoben */
#studio .ph img{object-position:58% 50%}
/* Kachel Apparel & Fashion: Ausschnitt nach unten, damit der Kopf im Bild ist */
/* Stakkato-Absatz: jeder Gedanke eine eigene Zeile, sauber umbrechend */
.takt{max-width:58ch;text-wrap:pretty}
.takt span{display:block}
.takt span+span{margin-top:.15rem}
/* Ab mittlerer Breite steht jeder Satz auf genau einer Zeile */
@media(min-width:900px){.takt span{white-space:nowrap}}
/* Anlauf: etwas größer, damit der Einstieg trägt */
.takt.intro{font-size:clamp(1.14rem,1.6vw,1.42rem);color:var(--ink);max-width:32ch;line-height:1.42}
@media(max-width:600px){.takt{max-width:none}}
/* Studio-Kopf: Überschrift und Stakkato-Zeilen bilden eine durchgehende Treppe.
   Vier Zeilen im gleichen Takt, die Pause kommt erst vor dem Fließtext. */
.disp.gross{font-size:clamp(1.7rem,3.9vw,3.2rem);line-height:1.12;margin-bottom:0}
.disp.gross .z{display:block}
/* Runde Buchstaben stehen von Haus aus etwas weiter links als gerade — hier
   ausgeglichen, damit "Mein", "Cristina" und "Das Studio" auf einer Kante stehen. */
.disp.gross .z+.z{text-indent:.014em}
/* Der Name bleibt zusammen — der Umbruch fällt hinter das Komma */
.disp.gross .gold{white-space:nowrap}
.disp.gross+.takt.intro{margin-top:.9rem}
.takt.intro+.lead.block{margin-top:1.9rem}
/* Blocksatz mit Silbentrennung — ohne Trennung reißt Deutsch zu große Lücken */
.lead.block{text-align:justify;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}
@media(max-width:600px){.lead.block{text-align:left}}

.klist{margin-top:1.8rem;display:grid;gap:.9rem}
.klist li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;font-size:.95rem;color:var(--mut2)}
.klist b{color:var(--acc);font-weight:400}

/* ---------- Galerie ---------- */
/* Vorschau 1: ein grosses Bild pro Reihe, einspaltig zentriert */
.gal{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:26px}
.gal figure{width:100%}
/* Hochformate paarweise nebeneinander: zwei ergeben ein Querformat */
.gal figure.hoch{width:calc(50% - 13px)}
@media(max-width:680px){.gal figure.hoch{width:100%}}
.gal figure{position:relative;background:var(--panel)}
.gal img{width:100%;height:auto}
.gal figcaption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

@media(hover:none){.gal figcaption{display:none}}

.gal-head{padding-top:calc(76px + clamp(34px,4.4vh,72px));padding-bottom:clamp(22px,3vh,42px)}
.gal-head h1{font-size:clamp(2rem,4.6vw,4rem)}
/* Portfolio-Überschrift steht allein — keine zweite Spalte, kein Nebentext */
#portfolio .sec-head{grid-template-columns:1fr}

/* Zitat als eigener Abschnitt — steht allein, mit Schwarz drumherum */
.zitat-block{padding-block:clamp(64px,9vh,132px)}
.zitat-block .zitat{text-align:center}
/* Breite am p, nicht am figure — dort gilt die große Schrift, sonst rechnet ch mit 16px */
.zitat-block .zitat blockquote p{
  font-size:clamp(1.35rem,2.6vw,2.2rem);line-height:1.26;
  max-width:32ch;margin-inline:auto;
}
.zitat-block .zitat figcaption{margin-top:1.6rem}

.zitat{margin:0}
.zitat blockquote{margin:0}
.zitat blockquote p{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.08rem,1.6vw,1.42rem);line-height:1.4;
  color:var(--ink);max-width:none;text-wrap:pretty;margin:0;
}
.zitat blockquote p::before{content:"\201E"}
.zitat blockquote p::after{content:"\201C"}
.zitat figcaption{
  margin-top:.72rem;line-height:1;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut);
}
.zitat figcaption::before{content:"— "}

.gal-head .sec-head{margin-bottom:0}
.crumb{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:1.4rem}
.crumb a:hover{color:var(--ink)}

/* ---------- Kontakt ---------- */
.contact{background:var(--bg2);border-top:1px solid var(--line)}
.cgrid{display:grid;gap:clamp(32px,5vw,72px)}
@media(min-width:920px){.cgrid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}
dl{margin-top:2rem;display:grid;gap:1.4rem}
dt{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:.3rem}
dd{font-size:1.02rem;color:var(--mut2)}
dd a:hover{color:var(--acc)}
form{display:grid;gap:1.1rem}
.row2{display:grid;gap:1.1rem}
@media(min-width:600px){.row2{grid-template-columns:1fr 1fr}}
label{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:.5rem}
input,textarea,select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);
  font:inherit;font-size:.98rem;padding:.75rem 0;transition:border-color .3s}
input:focus,textarea:focus,select:focus{outline:0;border-bottom-color:var(--acc)}
select{background:var(--bg2)}
textarea{resize:vertical;min-height:120px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button[type=submit]{justify-self:start;margin-top:.6rem;background:var(--ink);color:var(--bg);border:0;
  padding:1rem 2.4rem;font:inherit;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:.3s}
button[type=submit]:hover{background:var(--acc);color:#0b0b0c}
.consent{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;
  font-size:.82rem;color:var(--mut);line-height:1.55;text-transform:none;letter-spacing:0;margin-bottom:0}
.consent input{width:auto;margin:.3rem 0 0}
.consent span{display:block}
.consent a{text-decoration:underline}

/* ---------- Rechtsseiten ---------- */
.doc{padding-top:calc(76px + clamp(40px,6vh,90px));max-width:78ch}
.doc h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:2rem}
.doc h2{font-size:clamp(1.2rem,2vw,1.6rem);margin:2.6rem 0 .9rem}
.doc h3{font-size:1.05rem;margin:1.8rem 0 .6rem}
.doc p,.doc li{color:var(--mut2);font-size:.98rem;margin-bottom:.9rem}
.doc ul{list-style:disc;padding-left:1.3rem;margin-bottom:1rem}
.doc a{text-decoration:underline;text-underline-offset:3px}
.doc a:hover{color:var(--acc)}
.doc strong{color:var(--ink);font-weight:500}

/* ---------- Fußzeile ---------- */
footer{border-top:1px solid var(--line);padding-block:clamp(40px,6vh,72px);font-size:.85rem;color:var(--mut)}
.fgrid{display:grid;gap:2.4rem}
@media(min-width:760px){.fgrid{grid-template-columns:1.6fr 1fr 1fr}}
.fgrid h5{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:1rem;font-weight:500}
.fgrid a{display:block;padding:.22rem 0;transition:color .25s}
.fgrid a:hover{color:var(--acc)}
.fbrand b{
  font-family:"Montserrat",var(--sans);font-weight:400;
  font-size:1.16rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--acc);-webkit-text-fill-color:var(--acc);
}
.fbrand .bar{-webkit-text-fill-color:rgba(255,255,255,.55);color:rgba(255,255,255,.55);padding-inline:.12em}
.fbot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  margin-top:2.8rem;padding-top:1.6rem;border-top:1px solid var(--line);font-size:.8rem}
.fbot a:hover{color:var(--ink)}

/* ---------- Einblenden ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* Galerie-zu-Galerie Navigation */
.galnav{max-width:1080px;margin:6px auto 64px;padding:0 20px;display:flex;justify-content:space-between;gap:16px;align-items:stretch}
.galnav .gn{display:inline-flex;align-items:center;gap:.5rem;color:var(--acc);text-decoration:none;font-size:.9rem;letter-spacing:.02em;border:1px solid var(--line);border-radius:10px;padding:12px 18px;transition:border-color .2s,background .2s}
.galnav .gn:hover{border-color:var(--acc);background:rgba(200,162,74,.08)}
.galnav .next{margin-left:auto;text-align:right}
@media(max-width:600px){.galnav .gn{font-size:.8rem;padding:10px 12px}}


/* ---------- Untergalerien: Hub mit drei Kacheln ---------- */
.accordion.drei{grid-template-columns:repeat(3,1fr)}
@media(max-width:1099px) and (min-width:900px){.accordion.drei{grid-template-columns:1fr 1fr}}
@media(max-width:899px){.accordion.drei{grid-template-columns:1fr}}