/* Archivo, lokal gehostet (DSGVO: keine Google-Fonts-Einbindung im Livebetrieb).
   Variable Font mit zwei Achsen: Gewicht 400-900, Breite 62-125 Prozent.
   Die unicode-range stammt unveraendert aus der Google-Fonts-Auslieferung - sie sorgt dafuer,
   dass der Browser latin-ext nur holt, wenn ein Zeichen daraus wirklich vorkommt.
   Vietnamesisch wurde weggelassen, die Seite braucht es nicht. Lizenz: fonts/OFL.txt */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(../fonts/archivo-latin.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:'Archivo';
  font-style:normal;
  font-weight:400 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(../fonts/archivo-latin-ext.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --pink:#FFD1FF;
  --ink:#000;
  /* Off-White statt reinem Weiß – gilt für jede helle Fläche, auch Buttons und Filter,
     sonst leuchten die als Flecken aus der Seite heraus. Weiß AUF Schwarz bleibt #fff. */
  --weiss:#FAF9F7;
  --paper:var(--weiss);
  --muted:#5c5c5c;
  --line:#000;
  --on-pink:#000;
  /* Bildkante: Bilder haben keinen Rahmen. Im dunklen Modus können dunkle Motive aber
     an den Rändern ins Schwarz auslaufen. Hier auf z.B. 2px stellen (2px = Linienstärke
     der ganzen Seite), dann bekommen Erzählstrecke und Projektübersicht eine weiße Kante.
     Slider, Zitat-Block und Leistungen bleiben in jedem Fall ohne. */
  --bildkante-dunkel:0;
  --bildkante:0;          /* im hellen Modus immer aus, nicht ändern */
  --gap:clamp(1rem,3vw,2rem);
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  color-scheme:light;
}
/* Hell ist die Vorgabe, unabhaengig von der Systemeinstellung (entschieden mit
   Noël, 28.10.2026). Vorher richtete sich die Seite nach dem Betriebssystem und
   startete auf einem dunkel gestellten Rechner dunkel. Dunkel gibt es weiter,
   aber nur noch ueber den Schalter in der Kopfzeile. */
:root[data-theme="dark"]{--ink:#fff;--paper:#000;--muted:#b0b0b0;--line:#fff;--bildkante:var(--bildkante-dunkel);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

/* Android-Chrome legt bei jeder Beruehrung eine graue Flaeche ueber das angetippte
   Element und bietet dessen Text zur Markierung an. Auf den Pillen sieht das aus wie
   ein Fehler; auf iOS tritt es nicht auf. Rueckmeldung beim Antippen geben weiterhin
   die :hover-Zustaende, die Android beim Tippen kurz mitsetzt - es geht nichts verloren.
   user-select steht NUR auf Bedienelementen. Fliesstext, Projekttexte und vor allem die
   E-Mail-Adresse unter den Kontaktknoepfen (.contact .direkt) muessen markierbar
   bleiben - die steht genau dafuer dort. */
html{-webkit-tap-highlight-color:transparent}
.skip,.mark,nav a,.cta,.btn,.theme-btn,.lang-btn,.menu-btn,.filters button,.sl-ctrl{
  -webkit-user-select:none;user-select:none
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.5;font-variation-settings:"wdth" 100}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.pink :focus-visible{outline-color:#000}
.skip{position:absolute;left:-999px;top:0;background:var(--pink);color:#000;padding:.75rem 1rem;z-index:100}
.skip:focus{left:1rem}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gap)}
section[id]{scroll-margin-top:5.5rem}

/* Header */
header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.75rem}
.mark{text-decoration:none;font-weight:900;font-stretch:112%;font-variation-settings:"wdth" 112;font-size:1.35rem;line-height:.95;letter-spacing:-.01em}
.mark span{display:block;white-space:nowrap}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.5rem}
nav a{text-decoration:none;font-weight:600;font-size:1.05rem}
nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.cta{display:inline-block;background:var(--pink);color:#000;font-weight:800;text-decoration:none;padding:.6rem 1.1rem;border:2px solid #000;border-radius:999px;white-space:nowrap}
.cta:hover{background:#000;color:var(--pink)}
/* Feste Breite, damit die Pille beim Umschalten nicht springt: "Hell" misst 89,4px,
   "Dunkel" 114,2px - 24,8px Unterschied, und der Sprung zog Sprach-Pille und Menue-Knopf
   mit. 7.25rem (116px) deckt den groessten Fall ab, mit knapp 2px Reserve fuer Geraete
   mit abweichender Schriftdarstellung. Bewusst EIN Wert fuer beide Sprachen: Dann bleibt
   die Pille auch beim Sprachwechsel stehen (englisch braucht nur 98,6px, bekommt also
   etwas mehr Luft - das ist der Preis fuer eine Pille, die sich nie bewegt).
   justify-content zentriert den Inhalt in der nun breiteren Flaeche. */
.theme-btn{font:inherit;font-weight:700;background:none;color:inherit;border:2px solid var(--line);border-radius:999px;padding:.45rem 1rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-width:7.25rem}
.theme-btn::before{content:"";width:.9rem;height:.9rem;border-radius:50%;border:2px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.lang-btn{font:inherit;font-weight:800;font-variation-settings:"wdth" 112;letter-spacing:.03em;background:none;color:inherit;border:2px solid var(--line);border-radius:999px;padding:.45rem .85rem;cursor:pointer}
.tools{display:flex;gap:.5rem;align-items:center}
/* Farbmodus- und Sprach-Pille sind die einzigen Bedienelemente, die nach dem Antippen
   SICHTBAR auf der Seite bleiben - alle anderen Hover-Zustaende sitzen auf Links, die
   wegnavigieren. Auf Android bleibt :hover nach dem Tippen haengen, die Pille blieb also
   pink stehen und sah aus wie ein eingeschalteter Zustand. Seit dem Menue-Knopf bedeutet
   eine pinke Pille aber "Menue offen" - zwei pinke Pillen nebeneinander hiessen dann
   Verschiedenes. Deshalb: Hover nur, wo es einen echten Zeiger gibt.
   :active ersetzt die Rueckmeldung beim Antippen und bleibt nicht haengen, weil es mit
   dem Loslassen endet. Hart umgeschaltet wie alles auf dieser Seite. */
@media (hover:hover){
  .theme-btn:hover,.lang-btn:hover{background:var(--pink);color:#000;border-color:#000}
}
.theme-btn:active,.lang-btn:active{background:var(--pink);color:#000;border-color:#000}
.menu-btn{display:none;font:inherit;font-weight:700;background:none;color:inherit;border:2px solid var(--line);border-radius:999px;padding:.45rem 1rem;cursor:pointer}
/* Offen: die Pille fuellt sich pink. Den Zustand traegt die Flaeche, nicht das Wort -
   eine laengere Beschriftung wuerde die Kopfzeile ueber den Bildschirmrand schieben. */
.menu-btn[aria-expanded="true"]{background:var(--pink);color:#000;border-color:#000}
/* Drei Pills in der Kopfzeile: auf dem Handy wird der Farbmodus zum reinen Symbol */
@media (max-width:480px){
  /* Nur noch Symbol - die Mindestbreite von oben wuerde eine leere Flaeche erzeugen. */
  .theme-btn{font-size:0;padding:.45rem .7rem;min-width:auto}
  .theme-btn::before{width:1rem;height:1rem}
}
/* Unter 383px passt die Kopfzeile nicht mehr: Wortmarke (128) + Abstand (16) + Pillen (207)
   + beide Polsterungen (32) brauchen genau 383px. Darunter wuerde die Zeile nach rechts
   ueberlaufen, weil die Wortmarke links verankert ist - die Seite liesse sich schieben.
   Hier wird deshalb die Wortmarke kleiner und die Abstaende enger. Die Grenze liegt bewusst
   bei 382px und nicht runder: Ab 383px bleibt alles so gestaltet, wie es abgenommen wurde,
   das iPhone 12 Pro (390px) ist also nicht betroffen. Betroffen sind 360px-Androids und
   die 375px-iPhones (SE 2/3, 13 mini), die sonst nur 8 statt 16px Polsterung behalten. */
@media (max-width:382px){
  .mark{font-size:1.1rem}
  .bar{gap:.75rem}
  .tools{gap:.4rem}
}
/* "Projekt besprechen" ist mit 206px der groesste Einzelposten der Kopfzeile. Die ganze
   Zeile braucht auf Deutsch 1020px, der Umbruch zum Burger-Menue liegt aber erst bei
   860px - dazwischen lief sie ueber und schob die Pillen aus dem Fenster. Gemessen bei
   950px: 65px Ueberlauf, die Sprach-Pille sass bei 955-1015, also komplett ausserhalb
   des Fensters. Ohne den Knopf braucht die Zeile 814px und passt im ganzen Band.
   Englisch war nie so schlimm (898px); Deutsch ist der unguenstige Fall, weil
   "/zusammenarbeit" und "Projekt besprechen" laenger sind als ihre Entsprechungen.
   Grenze bei 1079px und nicht bei 1023px: Bei genau 1024px (iPad quer) passt die Zeile
   zwar rechnerisch, aber nur mit 4px Luft - zu knapp fuer fremde Geraete.
   Verloren geht nur die farbige Betonung; /kontakt steht in der Navigation. */
@media (max-width:1079px){
  .bar .cta{display:none}
}
@media (max-width:860px){
  .menu-btn{display:inline-block}
  nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--pink);color:#000;border-bottom:2px solid #000}
  nav.open{display:block}
  nav ul{flex-direction:column;gap:0;padding:.5rem var(--gap) 1.25rem}
  nav a{display:block;padding:.6rem 0;font-size:1.6rem;font-weight:800}
}

/* Hero */
.hero{position:relative;border-bottom:2px solid var(--line)}
.hero img{width:100%;height:min(78vh,760px);object-fit:cover}
/* Der Kasten sitzt in derselben .wrap wie der übrige Seiteninhalt und kann deshalb nicht mehr
   aus der Flucht laufen, sobald das Fenster breiter als 1440px wird (vorher bis 240px Versatz).
   Breite: 8 von 12 Spalten der Inhaltsspalte – damit läuft die Überschrift dreizeilig statt fünfzeilig. */
.hero .wrap{position:absolute;left:0;right:0;bottom:var(--gap)}
.teaser{max-width:66.67%;background:var(--pink);color:#000;padding:clamp(1.1rem,2.5vw,1.75rem);border:2px solid #000}
.teaser h1{margin:0 0 .75rem;font-weight:900;font-variation-settings:"wdth" 110;font-size:clamp(1.6rem,3.6vw,2.75rem);line-height:1.02;letter-spacing:-.015em}
.teaser p{margin:0 0 1.1rem;font-weight:500}
.teaser .row{display:flex;flex-wrap:wrap;gap:.6rem}
.btn{display:inline-block;font-weight:800;text-decoration:none;padding:.55rem 1.1rem;border:2px solid #000;border-radius:999px;background:var(--weiss);color:#000}
.btn.dark{background:#000;color:#fff}
.btn:hover{background:#000;color:var(--pink)}
.btn.dark:hover{background:var(--weiss);color:#000}
@media (max-width:640px){
  .hero img{height:56vh}
  .hero .wrap{position:static;max-width:none;padding:0}
  .teaser{max-width:none;border-width:0 0 2px}
}

/* Big link strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:2px solid var(--line)}
.strip a{display:block;text-decoration:none;font-weight:900;font-variation-settings:"wdth" 118;font-size:clamp(1.4rem,3.4vw,2.6rem);padding:1.2rem var(--gap);border-right:2px solid var(--line);line-height:1}
.strip a:last-child{border-right:0}
.strip a:hover{background:var(--pink);color:#000}
@media (max-width:640px){.strip{grid-template-columns:1fr}.strip a{border-right:0;border-bottom:2px solid var(--line)}.strip a:last-child{border-bottom:0}}

/* Ticker */
.ticker{overflow:hidden;border-bottom:2px solid var(--line);padding:.9rem 0}
/* vier identische Gruppen; die Animation schiebt um genau eine Gruppenbreite (25% von 4) */
.ticker .track{display:flex;width:max-content;animation:run 40s linear infinite}
.ticker .gruppe{display:flex;gap:2.5rem;padding-left:2.5rem;white-space:nowrap}
.ticker span{font-weight:600}
@keyframes run{to{transform:translateX(-25%)}}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none;width:auto}.ticker .gruppe{flex-wrap:wrap;gap:.5rem 2rem;padding:0 var(--gap);white-space:normal}.ticker .gruppe+.gruppe{display:none}}

/* Sections */
.sec{padding:clamp(2.5rem,6vw,5rem) 0;border-bottom:2px solid var(--line)}
.sec h2{margin:0 0 1.75rem;font-weight:900;font-variation-settings:"wdth" 115;font-size:clamp(2rem,5vw,3.75rem);line-height:1;letter-spacing:-.02em}
.lede{max-width:38rem;margin:-.75rem 0 2rem;font-size:1.15rem}

/* Audience */
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.two article{border:2px solid #000;background:var(--pink);color:#000;display:flex}
.two article>a{flex:1;display:flex;flex-direction:column;gap:1rem;padding:clamp(1.25rem,3vw,2rem);text-decoration:none;color:inherit}
/* Beide Kacheln pink; beim Überfahren weicht das Pink dem Seitengrund und zieht in den Knopf */
.two article:has(>a:hover){background:var(--paper);color:var(--ink);border-color:var(--line)}
.two article:has(>a:hover) .btn{background:var(--pink);color:#000;border-color:#000}
.two article>a:focus-visible{outline:3px solid #000;outline-offset:-3px}
.two article:has(>a:hover)>a:focus-visible{outline-color:var(--ink)}
.two h3{margin:0;font-weight:900;font-variation-settings:"wdth" 110;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.05}
.two p{margin:0;max-width:34rem}
.two .btn{align-self:flex-start;margin-top:auto;background:#000;color:#fff;border-color:#000}
@media (max-width:760px){.two{grid-template-columns:1fr}}

/* List rows (wie die Ausstellungsliste) */
.rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--line)}
.rows li{border-bottom:2px solid var(--line)}
.rows a,.rows .r{display:grid;grid-template-columns:minmax(8rem,13rem) 1fr auto;gap:.5rem 2rem;align-items:start;padding:1.4rem 0;text-decoration:none}
.rows .shot{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--pink)}
.rows .shot img{width:100%;height:100%;object-fit:cover}
.rows a:hover{background:var(--pink);color:#000;margin:0 calc(-1*var(--gap));padding-left:var(--gap);padding-right:var(--gap)}
.rows .place{display:block;font-weight:600;font-size:.98rem;margin:0 0 .6rem}
.rows h3{margin:0 0 .35rem;font-weight:900;font-variation-settings:"wdth" 108;font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.05}
.rows p{margin:0;max-width:44rem}
.tag{justify-self:end;font-size:.88rem;font-weight:700;border:2px solid currentColor;border-radius:999px;padding:.2rem .7rem;white-space:nowrap}
@media (max-width:760px){.rows a,.rows .r{grid-template-columns:1fr}.tag{justify-self:start}.rows .shot{max-width:20rem;margin-bottom:.4rem}}

/* Projekte-Slider */
.sec-slider{padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.sl-head{display:flex;justify-content:space-between;align-items:end;gap:1rem}
.sl-head h2{margin-bottom:1.5rem}
.sl-ctrl{display:flex;gap:.5rem;margin-bottom:1.75rem}
.sl-btn{font:inherit;font-size:1.6rem;line-height:1;width:3rem;height:3rem;border:2px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer}
.sl-btn:hover{background:var(--pink);color:#000;border-color:#000}
.slider{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.slider.drag{cursor:grabbing}
.slider a{cursor:inherit;touch-action:pan-y}
.slider:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.sl-track{list-style:none;margin:0;padding:0 0 0 var(--gap);display:flex;gap:var(--gap);width:max-content}
/* Eigene Compositor-Ebene nur, solange der Slider im Bild ist – der Track ist über 11000px breit */
.slider.laeuft .sl-track{will-change:transform}
.slide{flex:0 0 auto;width:clamp(16rem,34vw,30rem)}
.slide a{display:flex;flex-direction:column;gap:.85rem;text-decoration:none;color:inherit}
.sl-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--pink)}
.sl-img img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.sl-cap{display:flex;flex-direction:column;gap:.25rem}
.sl-cap strong{font-weight:900;font-variation-settings:"wdth" 108;font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.05}
.sl-cap em{font-style:italic;font-weight:500;color:var(--muted)}
.slide a:hover strong{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.slide-typo{width:clamp(18rem,44vw,40rem)}
.slide-typo a{height:100%;min-height:clamp(14rem,26vw,24rem);background:var(--pink);color:#000;border:2px solid #000;padding:clamp(1.1rem,2.2vw,1.75rem);justify-content:space-between;gap:1rem}
.slide-typo .big{font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(3rem,7.5vw,6.5rem);line-height:.88;letter-spacing:-.03em}
.slide-typo .sub{font-weight:800;font-size:clamp(1.2rem,1.9vw,1.6rem);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.slide-typo .count{font-weight:500;max-width:22rem}
.slide-typo a:hover{background:#000;color:var(--pink)}
.slide-typo a:hover{border-color:#000}
.hero-media{display:block;width:100%;height:min(78vh,760px);object-fit:cover;background:#000}
@media (max-width:640px){.hero-media{height:56vh}.slide{width:78vw}.slide-typo{width:86vw}.sl-ctrl{display:none}}
/* Projekte */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.proj{text-decoration:none;display:flex;flex-direction:column;gap:.75rem}
.proj .pic{aspect-ratio:4/3;background:var(--pink);border:2px solid #000;overflow:hidden;display:flex;align-items:flex-end;padding:1rem;color:#000;font-weight:900;font-variation-settings:"wdth" 120;font-size:1.5rem;line-height:1}
.proj .pic img{width:100%;height:100%;object-fit:cover;margin:-1rem;max-width:none;width:calc(100% + 2rem);height:calc(100% + 2rem)}
.proj .place{font-weight:600;font-size:.95rem}
.proj h3{margin:0;font-weight:900;font-variation-settings:"wdth" 108;font-size:1.5rem;line-height:1.05}
.proj p{margin:0;color:var(--muted)}
.proj:hover h3{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.more{margin-top:2rem}
@media (max-width:900px){.projects{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.projects{grid-template-columns:1fr}}

/* Steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border:2px solid var(--line)}
.steps li{padding:1.25rem;border-right:2px solid var(--line)}
.steps li:last-child{border-right:0}
.steps .n{display:block;font-weight:900;font-variation-settings:"wdth" 125;font-size:3rem;line-height:1;margin-bottom:.75rem}
.steps h3{margin:0 0 .5rem;font-weight:800;font-size:1.25rem}
.steps p{margin:0;font-size:.98rem}
@media (max-width:1000px){.steps{grid-template-columns:1fr}.steps li{border-right:0;border-bottom:2px solid var(--line);display:grid;grid-template-columns:4.5rem 1fr;gap:0 1rem}.steps li:last-child{border-bottom:0}.steps .n{grid-row:span 2;font-size:2.4rem}}

/* Quote */
/* Zitat: pinke Fläche nur so breit wie der Inhalt, die Trennlinien laufen durch (.sec) */
.quote-box{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--pink);color:#000;border:2px solid #000}
.quote-box img{width:100%;height:100%;object-fit:cover;min-height:22rem}
.quote-box > div{padding:clamp(1.5rem,5vw,4rem);display:flex;flex-direction:column;justify-content:center}
.quote-box blockquote{margin:0 0 1.25rem;font-weight:800;font-variation-settings:"wdth" 104;font-size:clamp(1.4rem,2.8vw,2.2rem);line-height:1.15;letter-spacing:-.01em}
.quote-box cite{font-style:normal;font-weight:600}
@media (max-width:760px){.quote-box{grid-template-columns:1fr}.quote-box img{max-height:60vh}}

/* Kontakt */
.contact{background:#000;color:#fff;padding:clamp(3rem,8vw,6rem) 0}
.contact h2{margin:0 0 1.25rem;font-weight:900;font-variation-settings:"wdth" 118;font-size:clamp(2.2rem,6vw,4.5rem);line-height:.98;letter-spacing:-.02em;max-width:16ch}
.contact p{max-width:36rem;margin:0 0 2rem;font-size:1.15rem}
.contact .row{display:flex;flex-wrap:wrap;gap:.75rem}
.contact .btn{background:var(--pink)}
.contact .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.contact .btn:hover{background:#fff;color:#000}
.contact .direkt{margin:1.75rem 0 0;font-size:1.0625rem;color:#b0b0b0}
.contact .direkt a{color:#fff;text-decoration:none}
.contact .direkt a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.contact :focus-visible{outline-color:#fff}
:root[data-theme="dark"] .contact{border-top:2px solid #fff}

/* Footer */
footer{padding:2.5rem 0 3rem}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;align-items:end}
.foot .mark{font-size:1.6rem}
.foot small{display:block;margin-top:.5rem;font-size:.95rem;font-weight:500;color:var(--muted)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.foot a{font-weight:600;text-decoration:none}
.foot a:hover{text-decoration:underline}

/* ---------- Projektseite ---------- */
.pagehead{background:var(--pink);color:#000;border-bottom:2px solid #000;padding:clamp(2.5rem,7vw,5.5rem) 0 clamp(1.5rem,4vw,2.5rem)}
.pagehead h1{margin:0 0 1rem;font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(3rem,11vw,8.5rem);line-height:.9;letter-spacing:-.03em}
.pagehead p{margin:0;max-width:38rem;font-size:1.15rem;font-weight:500}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.filters button{font:inherit;font-weight:700;background:var(--weiss);color:#000;border:2px solid #000;border-radius:999px;padding:.45rem 1rem;cursor:pointer}
.filters button[aria-pressed="true"]{background:#000;color:var(--pink)}
.group{padding:clamp(2rem,5vw,3.5rem) 0 0}
.group h2{margin:0 0 1rem;font-weight:900;font-variation-settings:"wdth" 115;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1}
.plist{list-style:none;margin:0;padding:0;border-top:2px solid var(--line)}
.p{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);padding:clamp(1.5rem,3vw,2.25rem) 0;border-bottom:2px solid var(--line);scroll-margin-top:5.5rem}
/* Zeilen mit Detailseite: der Anker traegt das Raster, damit die ganze Flaeche klickbar ist */
.p:has(>a){display:block;padding:0}
.p>a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);padding:clamp(1.5rem,3vw,2.25rem) 0;text-decoration:none;color:inherit}
.p>a:hover{background:var(--pink);color:#000;margin:0 calc(-1*var(--gap));padding-left:var(--gap);padding-right:var(--gap)}
.p>a:hover h3{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.p>a:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.p[hidden]{display:none}
.p .pic{aspect-ratio:3/2;background:var(--pink);overflow:hidden;display:flex;align-items:flex-end;padding:1rem;color:#000;font-weight:900;font-variation-settings:"wdth" 122;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1}
.p .pic.has-img{padding:0;border:var(--bildkante) solid var(--line)}
.p>a:hover .pic.has-img{border-color:#000}  /* falls die Kante an ist: auf Pink wird sie schwarz */
.p .pic img{width:100%;height:100%;object-fit:cover}
.p .meta{font-weight:600;font-size:.98rem;margin:0 0 .5rem}
.p h3{margin:0 0 .75rem;font-weight:900;font-variation-settings:"wdth" 108;font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.02;letter-spacing:-.01em}
.p .role{margin:0 0 .9rem;font-weight:700}
.p .txt{margin:0 0 1rem;max-width:40rem}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.tags li{font-size:.88rem;font-weight:700;border:2px solid currentColor;border-radius:999px;padding:.15rem .65rem}
.p:target .pic{outline:4px solid var(--ink);outline-offset:4px}
@media (max-width:760px){.p,.p>a{grid-template-columns:1fr}}
/* Kontaktzeile am Ende von /projekte: Form einer Projektzeile, Kachel wie die Typo-Kachel im Slider */
/* Folgt die Kontaktzeile auf eine Section, bringt sie ihre eigene Oberkante mit –
   die Linie der Section darüber entfällt, sonst stehen zwei Linien unterschiedlicher Breite dicht übereinander */
.sec:has(+ .wrap > .kontaktzeile){border-bottom:0}
.kontaktzeile{padding:clamp(2rem,5vw,3.5rem) 0 clamp(2.5rem,6vw,4rem)}
.p .pic.typo{border:2px solid #000;flex-direction:column;justify-content:space-between;align-items:stretch;gap:1rem;padding:clamp(1rem,2vw,1.6rem);font-size:inherit;font-weight:inherit;font-variation-settings:normal;line-height:1.4}
.p .pic.typo .big{font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(2.2rem,5vw,4rem);line-height:.88;letter-spacing:-.03em}
.p .pic.typo .sub{font-weight:800;font-size:clamp(1.05rem,1.7vw,1.4rem);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.p .pic.typo .count{font-weight:500;font-size:1rem;line-height:1.3;max-width:22rem}
.p>a:hover .pic.typo{background:#000;color:var(--pink)}

/* ---------- Projekt-Detailseite ---------- */
.pagehead.projekt h1{font-size:clamp(1.9rem,3.9vw,3.5rem);line-height:1.02;letter-spacing:-.02em;margin-bottom:0}
.zurueck{display:inline-block;font-weight:800;text-decoration:none;margin-bottom:1.25rem}
.zurueck:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* Seitenbreites Leitbild */
.leitbild{border-bottom:2px solid var(--line);background:var(--pink)}
.leitbild img{display:block;width:100%;height:min(76vh,720px);object-fit:cover}
/* Ein Kopfvideo behaelt sein eigenes Seitenverhaeltnis: Bei 32:9 wuerde der feste
   Bildausschnitt oben links und rechts beschneiden - bei einem Zweikanal-Split
   fehlte dann von beiden Panels der Rand. */
.leitbild video{display:block;width:100%;height:auto}

/* Auftakt: grosser Anreisser links, schmale Faktenspalte rechts */
.auftakt{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);padding:clamp(2.5rem,6vw,4.5rem) 0 0}
.anreisser{grid-column:1/span 8;margin:0;font-size:clamp(1.5rem,2.8vw,2.5rem);font-weight:500;line-height:1.22;letter-spacing:-.01em}
.fakten{grid-column:10/span 3;font-size:1.0625rem}
.fakten dl{margin:0}
.fakten dt{font-weight:800;margin-top:1.1rem}
.fakten dt:first-of-type{margin-top:0}
.fakten dd{margin:.15rem 0 0}
@media (max-width:860px){
  .auftakt{grid-template-columns:1fr}
  .anreisser,.fakten{grid-column:1}
  .fakten{margin-top:2rem;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
  .fakten dl{display:contents}
}
@media (max-width:520px){.fakten,.fakten dl{display:block}}

/* Erzaehlung: breite Bloecke stossen an den Rand und ueberschreiten die Mitte */
.erzaehlung{padding:clamp(1.75rem,3.5vw,3rem) 0 clamp(2.5rem,6vw,5rem);font-size:clamp(1.25rem,2.1vw,1.875rem);line-height:1.26}
.einheit{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.einheit+.einheit{margin-top:clamp(3rem,8vw,7rem)}
.einheit .text p{margin:0}
.einheit figure{margin:0}
.einheit img,.einheit video{display:block;width:100%;height:auto;border:var(--bildkante) solid var(--line)}
.einheit video{background:#000}
.einheit figcaption{margin-top:.7rem;font-size:1rem;line-height:1.4;color:var(--muted);max-width:32rem}
/* breites Bild links, schmaler Text rechts */
.einheit.links figure{grid-column:1/span 7}
.einheit.links .text{grid-column:9/span 4;padding-top:clamp(1.5rem,5vw,4rem)}
/* schmaler Text links, breites Bild rechts */
.einheit.rechts .text{grid-column:1/span 4;padding-top:clamp(1.5rem,5vw,4rem)}
.einheit.rechts figure{grid-column:6/span 7}
/* Bild ohne Text */
.einheit.solo figure{grid-column:3/span 8}
@media (max-width:760px){
  .einheit{grid-template-columns:1fr}
  .einheit .text,.einheit figure,
  .einheit.links .text,.einheit.links figure,
  .einheit.rechts .text,.einheit.rechts figure,
  .einheit.solo figure{grid-column:1;padding-top:0}
  .einheit .text+figure,.einheit figure+.text{margin-top:1.5rem}
}

/* Abspann: Tags und Fotocredit */
.abspann{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);padding:clamp(2rem,5vw,3rem) 0;border-bottom:2px solid var(--line);align-items:end}
.abspann .tags{grid-column:1/span 6}
.abspann .fotocredit{grid-column:8/span 5;margin:0;font-size:.95rem;color:var(--muted)}
@media (max-width:760px){
  .abspann{grid-template-columns:1fr}
  .abspann .tags,.abspann .fotocredit{grid-column:1}
  .abspann .fotocredit{margin-top:1.25rem}
}

/* ---------- Rechtstexte und Fehlerseite ---------- */
.rechtstext{padding:clamp(2.5rem,6vw,4rem) 0}
.rechtstext h2{margin:2.75rem 0 .75rem;font-weight:900;font-variation-settings:"wdth" 110;font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.1}
.rechtstext h2:first-of-type{margin-top:0}
.rechtstext h3{margin:1.75rem 0 .35rem;font-weight:800;font-size:1.05rem}
.rechtstext p,.rechtstext ul{margin:0 0 1rem;max-width:42rem}
.rechtstext ul{padding-left:1.2rem}
.rechtstext li{margin:0 0 .35rem}
.rechtstext a{font-weight:600}
.rechtstext .anschrift{font-weight:600;line-height:1.7}
.fehler{padding:clamp(3rem,8vw,6rem) var(--gap)}  /* seitliche Polsterung von .wrap wiederherstellen, die 0 hatte sie geschluckt */
.fehler .zahl{display:block;font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(5rem,18vw,14rem);line-height:.85;letter-spacing:-.04em;margin:0 0 1rem}
.fehler p{max-width:38rem;font-size:1.15rem;margin:0 0 2rem}
.fehler .row{display:flex;flex-wrap:wrap;gap:.75rem}