/* =========================================================================
   projektsystem GmbH · Hildesheim — Entwurf E&R Web-Werkstatt
   Konzept: "Die Fuge" — die Linie, an der Neues an Bestehendes anschliesst.
   Farben aus 97 Projektfotos des Bueros gemessen (siehe README):
     Neutralgrau #888887 (13,8 % aller Pixel) · Ziegel/Corten #704b37 (5,0 %)
   Kein Blau. Hintergruende immer einfarbig. Keine Hover-Effekte auf Bildern.
   ========================================================================= */

@import url('fonts.css');

/* ---------- Tokens ---------------------------------------------------- */
:root {
  /* Flaechen: Weiss + graue Baender */
  --papier:      #ffffff;
  --band-hell:   #f4f4f3;
  --band:        #ececeb;
  --band-tief:   #e2e2e0;
  --linie:       #d8d8d5;
  --linie-fein:  #e8e8e6;

  /* Schrift */
  --tinte:       #1b1b19;
  --tinte-2:     #4a4a46;
  --tinte-3:     #6e6e69;   /* 4,6:1 auf Weiss */
  --grau:        #888887;   /* gemessen */

  /* Akzent: Ziegel/Cortenstahl aus seinen Bauten. 7,6:1 auf Weiss. */
  --fuge:        #704b37;
  --fuge-hell:   #8d6349;

  /* Raster */
  --rand:        clamp(1.25rem, 5vw, 4.5rem);
  --max:         76rem;
  --max-text:    38rem;

  /* Rhythmus */
  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2.5rem; --sp-5: 4rem;   --sp-6: 6rem;
  --sektion: clamp(4rem, 9vw, 7.5rem);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Faustina', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.0625rem, .35vw + 1rem, 1.1875rem);
  line-height: 1.74;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Sichtbarer Fokus – ueberall, nie wegoptimiert */
:focus-visible {
  outline: 2px solid var(--fuge);
  outline-offset: 3px;
}

/* ---------- Typografische Rollen -------------------------------------- */
/* Barlow Condensed = das Technische: Marke, Navigation, Labels, Masszahlen.
   Faustina        = das Gelesene: Fliesstext, Projekttitel, Zitate.         */

.tech, nav, .label, .kicker, .btn, .meta, th {
  font-family: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.12; }

.kicker {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin: 0 0 var(--sp-3);
}

/* Grosse Displayzeile: schmale Grotesk, leicht, viel Raum */
.display {
  font-family: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(2.75rem, 8vw, 6rem);
  line-height: 1.1;
  letter-spacing: .01em;
}

.h2 {
  font-family: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.2;
  letter-spacing: .012em;
}

.h3 {
  font-family: 'Faustina', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.4;
}

.lead {
  font-size: clamp(1.1875rem, .6vw + 1.05rem, 1.4375rem);
  line-height: 1.62;
  color: var(--tinte-2);
}

p { margin: 0 0 1.75rem; }
p:last-child { margin-bottom: 0; }

.text { max-width: var(--max-text); }
.text a { color: var(--fuge); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.text a:hover { color: var(--tinte); }

/* ---------- Layout ----------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.sektion { padding-block: var(--sektion); }

/* Die grauen Baender: Sektionsflaechen, immer einfarbig */
.band       { background: var(--band-hell); }
.band-tief  { background: var(--band); }

/* Die Fuge: die feine Linie, an der zwei Flaechen aneinanderstossen */
.fuge-linie {
  height: 1px;
  background: var(--linie);
  border: 0;
  margin: 0;
}

/* Massband – die feinen Teilstriche am Sektionskopf */
.massband {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.massband::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--linie);
}
.massband .nr {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--tinte-3);
}

/* ---------- Wasserzeichen ---------------------------------------------
   Bauzeichnungen des Bueros, sehr blass und klein am Seitenrand. Sie liegen
   hinter allem (z-index -1), reagieren auf nichts und verschwinden dort,
   wo der Platz knapp wird - auf dem Handy also ganz.
   ---------------------------------------------------------------------- */
body { position: relative; }

.wasserzeichen {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  display: none;
}
.wasserzeichen img {
  position: absolute;
  left: 0;
  right: 0;
  /* volle Bildschirmbreite – die Zeichnung liegt hinter der ganzen Seite
     und wird von den Inhalten darueber stellenweise verdeckt. */
  width: 100%;
  height: auto;
  opacity: .055;
}

.wasserzeichen { display: block; }
@media print { .wasserzeichen { display: none !important; } }

/* ---------- Kopf ------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papier);
  border-bottom: 1px solid var(--linie-fein);
}
.kopf-innen {
  max-width: var(--max);
  margin-inline: auto;
  padding: .875rem var(--rand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.75rem, 2vw, 1.5rem);
}
.marke {
  text-decoration: none;
  display: block;
  line-height: 1.05;
}
/* Wortmarke nach dem Logo: "projekt" Light, "system" Bold, Unterzeile Medium.
   Gesetzt in Jost (freier Futura-Nachbau, lokal gehostet). Die System-Futura
   auf dem Mac hat keinen Light-Schnitt und wuerde das Logo verfaelschen. */
/* Das Original-Logo aus dem PDF des Bueros – ohne den Zusatz
   "architekturbüro", der im Entwurf als eigene Zeile darunter steht. */
.marke .logo {
  display: block;
  /* komplettes Logo inkl. "architekturbüro" – deshalb keine Textzeile darunter */
  width: clamp(9.5rem, 19vw, 14rem);
  height: auto;
}
.fuss .marke-fuss .logo-fuss {
  display: inline-block;
  height: 1.15rem;
  width: auto;
  vertical-align: -.05em;
}
.hero .logo-hero {
  display: block;
  margin-inline: auto;
  width: clamp(13rem, 34vw, 22rem);
  height: auto;
}

.marke .wortmarke {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: .01em;
}
.marke .wortmarke b { font-weight: 700; }
.marke .unterzeile {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin-top: .2rem;
}

/* Navigation */
.nav-haupt { display: none; }
@media (min-width: 62rem) {
  .nav-haupt {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.4vw, 2.25rem);
  }
  .nav-haupt a {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.0625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tinte-2);
    padding-block: .35rem;
    border-bottom: 1px solid transparent;
  }
  .nav-haupt a:hover { color: var(--tinte); border-bottom-color: var(--linie); }
  .nav-haupt a[aria-current="page"] {
    color: var(--tinte);
    border-bottom-color: var(--fuge);
  }
}

/* Instagram im Kopf – dezenter Knopf, auf allen Seiten oben rechts */
.insta-knopf {
  display: none;
  align-items: center;
  gap: .45rem;
  padding: .4rem .8rem;
  border: 1px solid var(--linie);
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .9375rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-2);
  white-space: nowrap;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.insta-knopf svg { width: 17px; height: 17px; flex: none; }
.insta-knopf:hover { border-color: var(--fuge); color: var(--fuge); }
@media (min-width: 62rem) { .insta-knopf { display: inline-flex; } }

/* Im mobilen Menue als eigener Eintrag, dort mit vollem Satz */
.nav-mobil .insta-zeile a {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--tinte-2);
  font-size: 1.0625rem;
  letter-spacing: .1em;
}
.nav-mobil .insta-zeile svg { width: 18px; height: 18px; flex: none; }

/* Menue-Knopf mobil */
.menue-knopf {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 0;
  padding: .5rem;
  margin-right: -.5rem;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-2);
}
.menue-knopf .striche { display: block; width: 22px; }
.menue-knopf .striche i {
  display: block;
  height: 1px;
  background: var(--tinte);
  margin: 5px 0;
  transition: transform .3s var(--ease), opacity .2s linear;
}
.menue-knopf[aria-expanded="true"] .striche i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .striche i:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] .striche i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Ab Desktop-Breite uebernimmt die Hauptnavigation */
@media (min-width: 62rem) {
  .menue-knopf { display: none; }
}

/* Mobiles Menue */
.nav-mobil {
  display: none;
  border-top: 1px solid var(--linie-fein);
  background: var(--papier);
}
.nav-mobil.offen { display: block; }
.nav-mobil ul { list-style: none; margin: 0; padding: 0; }
.nav-mobil li + li { border-top: 1px solid var(--linie-fein); }
.nav-mobil a {
  display: block;
  padding: 1rem var(--rand);
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.25rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte);
}
.nav-mobil a[aria-current="page"] { color: var(--fuge); }
@media (min-width: 62rem) { .nav-mobil { display: none !important; } }

/* ---------- Hero: weiss, mittig, ohne Bild ----------------------------- */
.hero {
  padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.75rem);
  text-align: center;
  /* kein eigener Grund – sonst liegt er ueber dem Wasserzeichen */
}
.hero .zeile-klein {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(.6875rem, 1.1vw, .8125rem);
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin: 0 0 .5rem;
}
/* Zurueckhaltend und weit oben – das Bild traegt die Seite, nicht die Schrift. */
.hero .name {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: .05em;
  margin: 0;
}
/* Die Fuge im Wortbild: feine Linie unter der Marke, waechst beim Laden */
.hero .fuge-marke {
  width: min(100%, 22rem);
  height: 1px;
  background: var(--linie);
  margin: .8rem auto;
  transform-origin: center;
}
.hero .person {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(.75rem, 1.2vw, .875rem);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-2);
  margin: 0;
}
.hero .satz {
  max-width: 30rem;
  margin: clamp(1rem, 2.5vw, 1.5rem) auto 0;
  font-size: clamp(1rem, .3vw + .95rem, 1.125rem);
  line-height: 1.66;
  color: var(--tinte-2);
  text-wrap: balance;
}

/* Hero-Bild: steht auf weissem Grund, Hintergrund bleibt einfarbig */
.hero-bild {
  padding: 0 var(--rand) clamp(2rem, 5vw, 3.5rem);
}
.hero-bild img {
  display: block;
  /* Passepartout: innen ein schmaler weisser Rand, aussen die graue Kante */
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(27, 27, 25, .38);
  margin-inline: auto;
  max-height: min(74vh, 46rem);
  width: auto;
  max-width: 100%;
}
.hero-bild figcaption {
  max-width: var(--max);
  margin-inline: auto;
}
/* Platzhalter im Kopfbereich nicht breiter als ein Hero-Bild */
.hero-bild .platzhalter {
  max-width: 46rem;
  margin-inline: auto;
}
/* Auf dem Handy traegt die Breite, nicht die Hoehe */
@media (max-width: 46rem) {
  .hero-bild { padding-inline: 0; }
  .hero-bild img { max-height: none; width: 100%; }
  .hero-bild figcaption { padding-inline: var(--rand); }
}

/* ---------- Knoepfe ---------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.6rem;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--tinte);
  background: var(--tinte);
  color: var(--papier);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { background: var(--papier); color: var(--tinte); }
.btn-linie {
  background: none;
  color: var(--tinte);
  border-color: var(--linie);
}
.btn-linie:hover { border-color: var(--tinte); background: none; color: var(--tinte); }

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* Textlink mit Fuge darunter */
.link-fuge {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.0625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinte);
  border-bottom: 1px solid var(--fuge);
  padding-bottom: .2rem;
  display: inline-block;
}
.link-fuge:hover { color: var(--fuge); }

/* ---------- Bilder ------------------------------------------------------
   Ausdrueckliche Kundenvorgabe: Bilder veraendern sich bei Beruehrung NICHT.
   Keine Skalierung, kein Filter, keine Farbaenderung, kein Overlay.       */
figure { margin: 0; }

/* Bilder werden NIE beschnitten: volle Breite, Hoehe folgt dem Bild.
   Kein object-fit: cover, keine erzwungenen Seitenverhaeltnisse.       */
.bild {
  background: transparent;   /* kein Kasten hinter hoehenbegrenzten Bildern */
}
.bild img {
  display: block;
  width: 100%;
  height: auto;
  /* zarter Rahmen – gibt den Fotos eine Kante, ohne aufzutragen */
  /* Passepartout: innen ein schmaler weisser Rand, aussen die graue Kante */
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(27, 27, 25, .38);
}
/* Grosse Einzelbilder: hoehenbegrenzt statt beschnitten – sie skalieren
   proportional und bleiben vollstaendig sichtbar. */
figure.solo .bild img {
  max-height: 78vh;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
a.bild-link, a.bild-link:hover, a.bild-link:focus {
  display: block;
  text-decoration: none;
}
a.bild-link img,
a.bild-link:hover img,
a.bild-link:focus img,
.bild img:hover {
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}
figcaption {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .9375rem;
  letter-spacing: .07em;
  line-height: 1.5;
  color: var(--tinte-3);
  padding-top: .7rem;
  border-top: 1px solid var(--linie-fein);
  margin-top: .9rem;
}
figcaption b {
  display: block;
  font-family: 'Faustina', Georgia, serif;
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: .01em;
  line-height: 1.45;
  color: var(--tinte);
  margin-bottom: .1rem;
}

/* ---------- Justierte Reihe -------------------------------------------
   Alle Bilder einer Reihe stehen auf gleicher Hoehe. Die Breite ergibt
   sich aus dem Seitenverhaeltnis (--ar = Breite/Hoehe), das je Figur
   gesetzt wird. So entsteht eine ruhige Ordnung, ohne ein Bild zu
   beschneiden: gleiche Hoehe, unterschiedliche Breite.
   ---------------------------------------------------------------------- */
.reihe {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  align-items: flex-start;
}
.reihe > figure {
  /* 12px Basis = die beiden 6px-Rahmen. Nur der Rest wird nach dem
     Seitenverhaeltnis verteilt – so stehen alle Bilder einer Reihe
     exakt gleich hoch. */
  flex: var(--ar, 1.5) 1 6px;
  /* Untergrenze: faellt eine Figur darunter, bricht die Reihe lieber um,
     statt die Bilder zu klein werden zu lassen. */
  /* klein genug, damit schmale Hochformate die Reihenhoehe nicht sprengen */
  min-width: min(7rem, 100%);
}
/* Projektseite: die Bildreihen duerfen die Flaeche breiter nutzen */
.wrap--breit { --max: 88rem; }
.reihe > figure > .bild img { width: 100%; height: auto; }
.reihe + .reihe { margin-top: clamp(1rem, 1.8vw, 1.5rem); }

/* Auf schmalen Geraeten steht jedes Bild fuer sich */
@media (max-width: 40rem) {
  .reihe { display: grid; grid-template-columns: 1fr; }
  /* Instagram-Teaser: als kompakte Bildreihe belassen (nicht 1 Bild je Zeile),
     mit gleichmaessigen, engen Abstaenden - sonst stapeln sich 6 riesige Bilder. */
  #instagram .reihe { display: flex; gap: 8px; }
  #instagram .reihe > figure { min-width: 0; }
  #instagram .reihe + .reihe { margin-top: 8px; }
}

/* Bildraster */
.raster {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 40rem)  { .raster-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem)  { .raster-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40rem)  { .raster-3 { grid-template-columns: repeat(2, 1fr); } }

/* Frueher erzwungene Seitenverhaeltnisse – bewusst aufgehoben,
   damit kein Bild angeschnitten wird. Klassen bleiben als Haken bestehen. */
.ar-32, .ar-43, .ar-11, .ar-34, .ar-169 { aspect-ratio: auto; }

/* Platzhalter brauchen weiterhin eine Flaeche */
.platzhalter.ar-34 { aspect-ratio: 3 / 4; }
.platzhalter.ar-43 { aspect-ratio: 4 / 3; }
.platzhalter.ar-32 { aspect-ratio: 3 / 2; }
.platzhalter.ar-169 { aspect-ratio: 16 / 9; }

/* Versetztes Paar – die Fuge zwischen zwei Bildern */
.paar {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  /* Oben ausgerichtet – der gewollte Versatz kommt allein aus .versetzt.
     Mit "end" reisst neben hohen Hochkantbildern eine Lücke auf. */
  align-items: start;
}
@media (min-width: 46rem) {
  .paar { grid-template-columns: 1.25fr 1fr; }
  .paar .versetzt { transform: translateY(clamp(1.5rem, 4vw, 3.5rem)); }
}

/* ---------- Signature: der Fugen-Regler (Bestand -> Ergebnis) ---------- */
.fugenschieber {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: none;        /* Wischen bewegt die Naht, nicht die Seite */
  user-select: none;
  -webkit-user-select: none;
  background: var(--papier);
  /* gleiches Passepartout wie bei allen Fotos: weiss innen, grau aussen */
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(27, 27, 25, .38);
  --pos: 50%;
}
/* Das untere Bild steht im Fluss und gibt dem Rahmen seine Hoehe.
   Der Rahmen hat damit immer exakt das Format des Bildes – zwischen
   Bildkante, Naht und Rahmen kann kein heller Rand entstehen. */
.fugenschieber > img {
  display: block;
  width: 100%;
  height: auto;
}
/* Das obere Bild liegt deckungsgleich darueber und fuellt den Rahmen voll aus. */
.fugenschieber > img.oben {
  position: absolute;
  inset: 0;
  height: 100%;
  /* contain statt cover: weichen die Formate voneinander ab, bekommt das
     Bild einen schmalen weissen Rand – beschnitten wird es nie. */
  /* fuellt die Flaeche randlos aus – so wie die Bilder auf den anderen
     Seiten. Die Formate weichen leicht ab, deshalb faellt oben und unten
     je ein schmaler Streifen weg (rund 4 %). */
  object-fit: cover;
  /* oben buendig: der Giebel bleibt vollstaendig stehen, der schmale
     Ueberhang faellt unten weg (Terrasse und Rasen). */
  object-position: center top;
  background: var(--papier);
  clip-path: inset(0 0 0 var(--pos));
}
.fugenschieber { cursor: ew-resize; }

/* Griff auf der Naht – macht sichtbar, dass sich der Vergleich ziehen laesst */
.fugenschieber .griff {
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--papier);
  color: var(--tinte);
  box-shadow: 0 0 0 1px rgba(27, 27, 25, .28), 0 2px 10px rgba(27, 27, 25, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.fugenschieber .griff svg { width: 26px; height: 13px; }
.fugenschieber:focus-visible .griff { box-shadow: 0 0 0 2px var(--fuge), 0 2px 10px rgba(27,27,25,.18); }

.fugenschieber .naht {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 1px;
  background: var(--papier);
  box-shadow: 0 0 0 1px rgba(27,27,25,.18);
}
/* Die Etiketten liegen als eigene Marke AUF dem Bild - eingerueckt und in
   gedecktem Grau, damit sie nicht wie ein heller Rand zwischen Rahmen und
   Bild wirken und auch vor hellem Himmel oder Schnee lesbar bleiben. */
.fugenschieber .marke-jahr {
  position: absolute;
  top: .75rem;
  padding: .45rem .75rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: rgba(27, 27, 25, .68);
  color: rgba(255, 255, 255, .94);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.fugenschieber .links  { left: .75rem; }
.fugenschieber .rechts { right: .75rem; }

/* Ohne JS / bei reduzierter Bewegung: beide Bilder untereinander */
.fugen-fallback { display: none; }
.no-js .fugenschieber { display: none; }
.no-js .fugen-fallback { display: grid; gap: 1.25rem; }

/* ---------- Galerie: Klick vergroessert -------------------------------
   Der Knopf ersetzt den Bildrahmen. Beim Ueberfahren passiert bewusst
   NICHTS am Bild - nur der Zeiger zeigt an, dass sich etwas oeffnen laesst.
   ---------------------------------------------------------------------- */
button.bild-lupe {
  display: block;
  width: 100%;
  padding: 0;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(27, 27, 25, .38);
  background: none;
  cursor: zoom-in;
}
button.bild-lupe img { border: 0; box-shadow: none; }
button.bild-lupe:focus-visible { outline: 3px solid var(--fuge); outline-offset: 4px; }

/* Grossansicht */
.lupe {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(27, 27, 25, .93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 4rem);
}
.lupe[hidden] { display: none; }
.lupe-bild {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;          /* nie beschneiden – das Bild passt sich ein */
  border: 6px solid #fff;
  background: #fff;
}
.lupe button {
  position: absolute;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  line-height: 1;
  padding: .5rem 1rem;
}
.lupe button:hover, .lupe button:focus-visible { color: #fff; }
.lupe-zu       { top: .5rem; right: .75rem; font-size: 2.75rem; }
.lupe-vor      { left: .25rem;  top: 50%; transform: translateY(-50%); font-size: 3.5rem; }
.lupe-zurueck  { right: .25rem; top: 50%; transform: translateY(-50%); font-size: 3.5rem; }
.lupe-zaehler {
  position: absolute;
  bottom: 1rem;
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .875rem;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .7);
}
@media (max-width: 40rem) {
  .lupe { padding: 3.5rem .75rem; }
  .lupe-vor, .lupe-zurueck { font-size: 2.5rem; }
}

/* ---------- Kennzahlen / Fakten ---------------------------------------- */
.fakten {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--linie);
}
@media (min-width: 52rem) { .fakten { grid-template-columns: repeat(4, 1fr); } }
.fakten div {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--linie);
  padding-right: var(--sp-3);
}
@media (min-width: 52rem) {
  .fakten div + div { border-left: 1px solid var(--linie); padding-left: var(--sp-3); }
}
.fakten .zahl {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 300;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1;
  display: block;
}
.fakten .bezeichnung {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin-top: .5rem;
  display: block;
}

/* ---------- Instagram-Vorschau ---------------------------------------- */
.insta-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.25rem;
  margin-bottom: var(--sp-4);
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--linie);
}
.insta-name {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  letter-spacing: .08em;
  color: var(--tinte);
}
.insta-name svg { width: 22px; height: 22px; flex: none; }
.insta-name:hover { color: var(--fuge); }
.insta-kopf .hinweis-klein { margin: 0; }

/* ---------- Instagram-Vorschaufenster ---------------------------------- */
.insta-fenster {
  position: fixed;
  inset: 0;
  z-index: 300;   /* ueber der klebenden Kopfleiste (50) und der Grossansicht (100) */
  background: rgba(27, 27, 25, .55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  overflow-y: auto;
}
.insta-fenster[hidden] { display: none; }
.insta-tafel {
  position: relative;
  width: min(100%, 62rem);
  background: var(--papier);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  margin-block: auto;
}
.insta-tafel .reihe { gap: clamp(.6rem, 1.2vw, 1rem); }
.insta-tafel .reihe + .reihe { margin-top: clamp(.6rem, 1.2vw, 1rem); }
.insta-tafel .knopfreihe { margin-top: 1.5rem; }
.insta-zu {
  position: absolute;
  top: .35rem;
  right: .6rem;
  background: none;
  border: 0;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--tinte-2);
  cursor: pointer;
  padding: .25rem .5rem;
}
.insta-zu:hover, .insta-zu:focus-visible { color: var(--tinte); }
@media (max-width: 40rem) {
  /* Vorschau-Popup: gleichmaessiges quadratisches Raster wie bei echten
     Instagram-Beitraegen - unabhaengig vom --ar der grossen Ansicht, damit
     die Abstaende zwischen den Bildern ueberall gleich sind. */
  .insta-tafel .reihe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .insta-tafel .reihe + .reihe { margin-top: 6px; }
  .insta-tafel .reihe > figure { min-width: 0; }
  .insta-tafel .bild { aspect-ratio: 1; }
  .insta-tafel .bild img { width: 100%; height: 100%; object-fit: cover; }
}

/* Echte Beitraege sind quadratisch – dann als gleichmaessiges Raster */
.insta-fenster.echt .reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.insta-fenster.echt .reihe > figure { min-width: 0; }
.insta-fenster.echt .bild img { aspect-ratio: 1; object-fit: cover; }
.insta-stand { color: var(--tinte-3); }

/* ---------- Zaehler ---------------------------------------------------- */
.zaehler {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--linie);
}
@media (min-width: 46rem) { .zaehler { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 68rem) { .zaehler { grid-template-columns: repeat(5, 1fr); } }
.zaehler > div {
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-bottom: 1px solid var(--linie);
}
@media (min-width: 46rem) {
  .zaehler > div + div { border-left: 1px solid var(--linie); padding-left: var(--sp-3); }
}
.zaehler .zahl {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;   /* die Ziffern springen beim Zaehlen nicht */
}
.zaehler .bezeichnung {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin-top: .55rem;
}

/* ---------- Leistungs-Liste -------------------------------------------- */
.leistungen-liste { border-top: 1px solid var(--linie); }
.leistung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--linie);
  align-items: start;
}
@media (min-width: 52rem) {
  .leistung { grid-template-columns: 4rem 16rem 1fr; gap: var(--sp-4); align-items: baseline; }
}
.leistung .nr {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--fuge);
  padding-top: .35rem;
}
.leistung h3 { grid-column: 2 / -1; }
@media (min-width: 52rem) { .leistung h3 { grid-column: auto; } }
.leistung .beschreibung {
  grid-column: 1 / -1;
  color: var(--tinte-2);
  max-width: 34rem;
}
@media (min-width: 52rem) { .leistung .beschreibung { grid-column: auto; } }

/* Stichworte unter einer Leistungsueberschrift */
.bereiche {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.0625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-3);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

/* ---------- Zitate ------------------------------------------------------ */
.zitat {
  border-left: 1px solid var(--fuge);
  padding-left: var(--sp-3);
  max-width: 34rem;
}
.zitat p { font-size: 1.1875rem; line-height: 1.7; }
.zitat cite {
  font-family: 'Barlow Condensed', sans-serif;
  font-style: normal;
  font-size: .875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-3);
}

/* ---------- Team -------------------------------------------------------- */
.team-liste {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linie);
}
.team-liste .person-zeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: .2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--linie-fein);
}
@media (min-width: 46rem) {
  .team-liste .person-zeile { grid-template-columns: 14rem 1fr auto; gap: var(--sp-3); align-items: baseline; }
}
.team-liste .name { font-family: 'Faustina', Georgia, serif; font-weight: 500; }
.team-liste .rolle {
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: .07em;
  line-height: 1.5;
  color: var(--tinte-2);
}
.team-liste .mail {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .9375rem;
  color: var(--tinte-3);
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
}
.team-liste .mail:hover { color: var(--fuge); border-color: var(--fuge); }

/* ---------- Platzhalter (Closing-Trigger) ------------------------------- */
.platzhalter {
  border: 1px dashed var(--grau);
  background: var(--band-hell);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-3);
}
.platzhalter span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-3);
  max-width: 22ch;
}

/* ---------- Formular ---------------------------------------------------- */
.formular { display: grid; gap: var(--sp-3); max-width: 34rem; }
.feld { display: grid; gap: .4rem; }
.feld label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-2);
}
.feld input, .feld textarea {
  font-family: 'Faustina', Georgia, serif;
  font-size: 1.0625rem;
  padding: .75rem .85rem;
  border: 1px solid var(--linie);
  background: var(--papier);
  color: var(--tinte);
  border-radius: 0;
  width: 100%;
}
.feld input:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--fuge);
  box-shadow: inset 0 -2px 0 var(--fuge);
}
.feld textarea { min-height: 9rem; resize: vertical; }
.feld .fehler {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .875rem;
  letter-spacing: .06em;
  color: var(--fuge);
  display: none;
}
.feld.ungueltig .fehler { display: block; }
.feld.ungueltig input, .feld.ungueltig textarea { border-color: var(--fuge); }

.hinweis-klein {
  font-size: .9375rem;
  color: var(--tinte-3);
  line-height: 1.5;
}
.formular-antwort {
  display: none;
  border: 1px solid var(--fuge);
  padding: var(--sp-3);
  background: var(--band-hell);
}
.formular-antwort.sichtbar { display: block; }

/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Kontaktdaten ------------------------------------------------ */
.daten-liste { display: grid; gap: var(--sp-3); }
.daten-liste div { border-top: 1px solid var(--linie); padding-top: .8rem; }
.daten-liste dt {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin-bottom: .3rem;
}
.daten-liste dd { margin: 0; }
.daten-liste a { color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--linie); }
.daten-liste a:hover { color: var(--fuge); border-color: var(--fuge); }

/* ---------- Anschrift gross ------------------------------------------- */
.adresse-gross {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 300;
  font-size: clamp(1.75rem, 5vw, 3.25rem);
  line-height: 1.28;
  letter-spacing: .04em;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}
.adresse-gross span { display: block; }
.orts-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2rem);
}

/* E-Mail und Telefon gross neben der Anschrift */
.kontakt-gross {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 300;
  font-size: clamp(1.25rem, 2.6vw, 1.875rem);
  line-height: 1.5;
  letter-spacing: .03em;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}
.kontakt-gross a {
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
  padding-bottom: .1rem;
}
.kontakt-gross a:hover { color: var(--fuge); border-color: var(--fuge); }
.kontakt-gross span { display: block; }
.kontakt-gross .klein {
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-3);
  border: 0;
  margin-top: .2rem;
}

/* ---------- Fuss -------------------------------------------------------- */
.fuss {
  background: var(--band-hell);
  border-top: 1px solid var(--linie);
  padding-block: var(--sp-5) var(--sp-4);
  margin-top: 0;
}
.fuss-raster {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin: 0 0 var(--sp-2);
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.fuss a { color: var(--tinte-2); text-decoration: none; }
.fuss a:hover { color: var(--fuge); }
.fuss .marke-fuss {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: 1.375rem;
  color: var(--tinte);
  margin-bottom: .35rem;
}
.fuss .marke-fuss b { font-weight: 700; }
.fuss-unten {
  margin-top: var(--sp-4);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  justify-content: space-between;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .875rem;
  letter-spacing: .04em;
  color: var(--tinte-3);
}
.fuss-unten a { color: var(--tinte-3); }

/* Instagram */
.insta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .9375rem;
  color: var(--tinte-2);
}
.insta svg { width: 18px; height: 18px; }
.insta:hover { color: var(--fuge); }

/* ---------- Anrufleiste mobil (dezent) ---------------------------------- */
.anrufleiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--papier);
  border-top: 1px solid var(--linie);
  transform: translateY(101%);
  transition: transform .35s var(--ease);
}
.anrufleiste.sichtbar { transform: translateY(0); }
.anrufleiste a {
  padding: .95rem .5rem;
  text-align: center;
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte);
}
.anrufleiste a + a { border-left: 1px solid var(--linie); }
@media (min-width: 62rem) { .anrufleiste { display: none; } }
@media (max-width: 61.99rem) { body { padding-bottom: 0; } }

/* ---------- Demo-Leiste -------------------------------------------------- */
.demo-leiste {
  background: var(--tinte);
  color: var(--papier);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: .5rem var(--rand);
  line-height: 1.4;
}
.demo-leiste a { color: var(--papier); }

/* ---------- Motion ------------------------------------------------------ */
.auf { opacity: 0; }
.geladen .auf { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .auf { opacity: 1 !important; transform: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Ohne JS bleibt alles sichtbar */
.no-js .auf { opacity: 1 !important; transform: none !important; }

/* ---------- Druck --------------------------------------------------------
   Zwei Wege fuehren hierher: der Kunde drueckt Strg+P im Browser, oder die
   Seiten laufen ueber internal/werkzeug/seiten-als-pdf.mjs als PDF heraus.
   Beide Male gilt: breiter rechter Rand, damit auf Papier Notizen danebenpassen.
   ------------------------------------------------------------------------ */
@media print {
  @page {
    size: A4 landscape;
    margin: 16mm 60mm 14mm 12mm;
  }

  /* Der wichtigste Punkt. Die Reveals setzen .auf auf opacity 0 und heben das
     erst auf, wenn der IntersectionObserver feuert - im Druck also nur fuer
     das erste Fenster. Ohne diese Zeilen bleiben ganze Seiten leer.
     main.js schreibt seine Werte inline, deshalb hier !important. */
  .auf {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Bildschirm-Bedienelemente haben auf Papier nichts zu suchen. Die
     Demo-Leiste wandert im PDF in die Kopfzeile, siehe seiten-als-pdf.mjs. */
  .kopf, .anrufleiste, .demo-leiste, .nav-mobil, .menue-knopf {
    display: none !important;
  }

  /* Die grauen Baender tragen den Aufbau. Ohne sie zerfaellt die Seite in
     lose Textbloecke, und genau ueber den Aufbau soll ja geredet werden. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  html, body { background: var(--papier); }
  body { font-size: 10.5pt; line-height: 1.55; }

  /* Der Rhythmus ist fuer Scrollen gebaut. Auf Papier kostet jede Sektion
     sonst ein halbes Blatt Luft. Ueber die Variablen statt Regel fuer Regel. */
  :root {
    --sektion: 9mm;
    --rand:    0mm;
    --sp-4:    1.25rem;
    --sp-5:    1.75rem;
    --sp-6:    2.25rem;
  }
  .hero { padding-block: 4mm 6mm; }

  /* vh rechnet im Druck gegen die Blatthoehe: ein Bild mit max-height 74vh
     belegt fast ein ganzes Blatt und schiebt alles danach weiter. Im Druck
     deshalb feste Millimeter. */
  .hero-bild img         { max-height: 88mm; }
  figure.solo .bild img  { max-height: 92mm; }
  /* Hoehe begrenzen, aber NICHT beschneiden: das Bild skaliert proportional. */
  .paar .bild img,
  .bild img              { max-height: 76mm; width: auto; margin-inline: auto; }

  /* Der gewollte Versatz zwischen den Bildpaaren reisst auf Papier nur
     Luecken auf - dort gibt es kein Scrollen, das ihn aufloest. */
  .paar .versetzt { transform: none !important; }

  /* Sparsam einsetzen: was nicht umbrechen darf, wird bei knappem Platz
     komplett aufs naechste Blatt geschoben. Nur kleine Einheiten schuetzen. */
  .leistung, .zitat, .person, .marke-jahr { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  img { max-width: 100%; }

  /* Unterstrichene Links lesen sich auf Papier als Fehler */
  a { text-decoration: none; color: inherit; }
}