/* ==========================================================================
   Redaktionelles Baukastensystem für die Unterseiten.

   Die Startseite hat eine eigene Bildsprache bekommen: weisser Grund,
   schwarze Serifenschrift in grossen Graden, genau ein Rot als Akzent,
   Haarlinien statt Kacheln und Bewegung, die vom Scrollen kommt statt von
   sich aus zu laufen. Diese Datei überträgt dieselbe Sprache auf die
   Unterseiten — ohne home.css dorthin zu schleppen: Jene Datei ist
   ausdrücklich auf `body.page-home:not(.page-subpage)` begrenzt und enthält
   viel, was nur die Startseite braucht.

   Alles hier ist auf `body.page-subpage` begrenzt und benutzt eigene
   `sub-`-Klassen. Bestehende Unterseiten (Produktwelten, Rechtstexte) sind
   davon nicht betroffen — sie tragen keine dieser Klassen.

   Bewegung: Die Textfreilegung läuft über setupReveal() in animations.js,
   der aufhellende Leitsatz über [data-scroll-reveal-text] in main.js, die
   überblendete Vorschau im Index über [data-index-root]. Alle drei
   Mechaniken stammen unverändert von der Startseite. Ohne JavaScript und
   bei prefers-reduced-motion steht jeder Inhalt sofort und vollständig da.
   ========================================================================== */

body.page-subpage {
  --sub-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --sub-rule: 1px solid rgba(0, 0, 0, 0.14);
  --sub-sticky-top: calc(var(--header-height) + var(--header-offset));
}

/* Gleichmässiger Rhythmus statt der globalen --section-pad-top-Regel: Die
   greift für die erste Sektion unter dem Menü, staucht aber alle folgenden
   ungleich. Dieselben Werte wie .home-section auf der Startseite. */
body.page-subpage .sub-section {
  padding-top: clamp(4rem, 7vw, 6.6rem);
  padding-bottom: clamp(4rem, 7vw, 6.6rem);
  scroll-margin-top: calc(var(--header-height) + var(--header-offset) + 1rem);
  background: #ffffff;
}

/* --------------------------------------------------------------------------
   Sektionskopf: Untertitel, Überschrift, Einleitung — linksbündig
   untereinander, wie .home-section-head auf der Startseite.
   -------------------------------------------------------------------------- */
body.page-subpage .sub-head {
  display: grid;
  gap: 0.6rem;
  max-width: 54ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

body.page-subpage .sub-head h2 {
  margin-top: 0.6rem;
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: 0.01em;
}

body.page-subpage .sub-head__lead {
  font-size: var(--fs-body-strong);
  max-width: 60ch;
}

/* ==========================================================================
   Leitsatz.

   Bewusst NICHT der aufhellende Satz der Startseite — der bleibt dort ihr
   Erkennungszeichen.

   Hier stand der Satz zuerst in einer schmalen Spalte neben einem breiten
   Bezeichnerfeld. Das Ergebnis war ein Block, der im Weissen haengt: links
   eine halbleere Spalte, rechts ein Drittel ungenutzte Seite, darueber und
   darunter je gut 130 px Luft.

   Jetzt ist es ein Kapitelaufschlag: eine rote Haarlinie ueber die volle
   Breite, direkt darunter der Bezeichner, darunter der Satz in einem Grad,
   der die Seite auch traegt. Der Urheber steht rechtsbuendig an der
   Textkante — nicht an der Seitenkante, sonst stuende er allein im Nichts.
   ========================================================================== */
body.page-subpage .sub-statement {
  padding-top: clamp(3.2rem, 6vw, 5.5rem);
  /* Nach unten weniger: Der folgende Abschnitt bringt seinen eigenen
     Innenabstand mit, sonst klaffen zusammen fast 200 px. */
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
  background: #ffffff;
}

body.page-subpage .sub-statement__inner {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.8rem);
  border-top: 1px solid var(--color-accent);
  padding-top: clamp(0.9rem, 1.8vw, 1.4rem);
}

body.page-subpage .sub-statement__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--color-accent);
}

/* <blockquote> traegt keine eigene Optik, es ist reine Auszeichnung. Die
   Breitenbegrenzung sitzt hier, damit der Urheber darunter an derselben
   Kante endet wie der Satz.

   Schriftart und Grad muessen mit: Ohne sie rechnet `ch` in der Textschrift
   auf 17,6 px — 30ch waren dadurch 306 px statt der gemeinten rund 950 px,
   und das Zitat stand als schmaler Turm aus sechs Zeilen da. */
body.page-subpage .sub-statement__quote {
  margin: 0;
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.4vw, 4.3rem);
  max-width: 30ch;
}

body.page-subpage .sub-statement__text {
  margin: 0;
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.4vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  text-wrap: balance;
}

body.page-subpage .sub-statement__quote .sub-statement__text {
  max-width: none;
  /* Anfuehrungszeichen haengen in den Rand, damit die erste Textzeile
     buendig unter dem Bezeichner beginnt statt eingerueckt zu wirken. */
  text-indent: -0.42em;
}

/* Zurueck auf die Textschrift — der Grad oben gilt nur der Breitenrechnung. */
body.page-subpage .sub-statement__quote footer {
  justify-self: end;
  font-family: var(--font-body);
  font-size: var(--fs-small);
}

body.page-subpage .sub-statement__author {
  font-style: normal;
  font-size: inherit;
  color: var(--color-ink-muted);
}

body.page-subpage .sub-statement__author::before {
  content: "\2013\00a0";
}

@media (max-width: 760px) {
  body.page-subpage .sub-statement__text {
    line-height: 1.06;
  }

  /* Am Handy waere der haengende Einzug ein angeschnittenes
     Anfuehrungszeichen — dort steht es normal im Satzspiegel. */
  body.page-subpage .sub-statement__quote .sub-statement__text {
    text-indent: 0;
  }
}

/* ==========================================================================
   Kapitelverzeichnis.

   Reine Typografie: Nummer, Name, Kurzbeschreibung, Pfeil — über die volle
   Breite, getrennt durch Haarlinien. Vorher stand rechts daneben eine
   mitlaufende Vorschau; die zeigte aber genau die vier Fotos, die unten in
   den Kapiteln noch einmal stehen. Der Ordner img/leistungen/ hat keine
   weiteren Motive, also fällt die Bildspalte weg statt jedes Foto zweimal
   zu zeigen.

   Ohne Bilder trägt die Liste die Sektion allein — deshalb grössere Namen
   und mehr Luft pro Zeile als in der Fassung mit Vorschau.
   ========================================================================== */
body.page-subpage .sub-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.page-subpage .sub-index__row {
  border-top: var(--sub-rule);
}

body.page-subpage .sub-index__row:last-child {
  border-bottom: var(--sub-rule);
}

body.page-subpage .sub-index__link {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 0.85fr) 2rem;
  align-items: baseline;
  gap: 0 clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(1.3rem, 2.8vw, 2.2rem) 0;
  text-decoration: none;
  color: var(--color-ink);
  transition: padding-left 0.5s var(--sub-ease);
}

body.page-subpage .sub-index__link:hover,
body.page-subpage .sub-index__link:focus-visible {
  padding-left: 0.7rem;
  text-decoration: none;
}

body.page-subpage .sub-index__no {
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

body.page-subpage .sub-index__name {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
}

body.page-subpage .sub-index__note {
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
  /* Auf die optische Mitte der grossen Zeile daneben gesetzt. */
  align-self: center;
}

body.page-subpage .sub-index__arrow {
  justify-self: end;
  align-self: center;
  font-size: 1.2rem;
  color: var(--color-accent);
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.45s var(--sub-ease),
    transform 0.45s var(--sub-ease);
}

body.page-subpage .sub-index__link:hover .sub-index__arrow,
body.page-subpage .sub-index__link:focus-visible .sub-index__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Schmaler: Name und Kurzbeschreibung untereinander statt nebeneinander.
   Der Pfeil steht dann dauerhaft — ohne Hover gäbe es sonst keinen Hinweis,
   dass die Zeile ein Verweis ist. */
@media (max-width: 860px) {
  body.page-subpage .sub-index__link {
    grid-template-columns: 3.2rem minmax(0, 1fr) 1.6rem;
    gap: 0 1rem;
    padding-block: clamp(1.1rem, 3vw, 1.5rem);
  }

  body.page-subpage .sub-index__note {
    grid-column: 2;
    align-self: start;
    margin-top: 0.3rem;
  }

  body.page-subpage .sub-index__arrow {
    grid-row: 1 / span 2;
    grid-column: 3;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Kapitel: redaktionelle Doppelseite.

   Ein hochformatiges Bild, das beim Scrollen stehen bleibt, daneben der
   Text. Die Seite wechselt von Kapitel zu Kapitel. Die grosse Ziffer im
   Hintergrund ist reine Dekoration und deshalb aria-hidden.
   ========================================================================== */
body.page-subpage .sub-chapter {
  padding-top: clamp(3.4rem, 6vw, 5.6rem);
  padding-bottom: clamp(3.4rem, 6vw, 5.6rem);
  scroll-margin-top: calc(var(--header-height) + var(--header-offset) + 1rem);
  background: #ffffff;
  border-top: var(--sub-rule);
}

body.page-subpage .sub-chapter__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* Kein festes Seitenverhaeltnis und keine Hoehenbegrenzung: Der Rahmen
   nimmt genau die Form der Aufnahme an. Vorher stand hier 4:5 — alle vier
   Kapitelfotos sind aber querformatig (1,33 bis 1,50), im Hochformat-Rahmen
   fielen rund 45 Prozent der Bildbreite weg. Auf "Entwurf & Planung" war
   dadurch der Mann am Schreibtisch angeschnitten.

   Weil der Kasten jetzt die Form des Bildes hat, schneidet object-fit: cover
   nichts mehr ab — es bleibt gesetzt, damit auch ein spaeter getauschtes
   Foto den Kasten randlos fuellt. */
body.page-subpage .sub-chapter__media {
  position: sticky;
  top: calc(var(--sub-sticky-top) + 1.5rem);
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--color-surface-muted);
}

body.page-subpage .sub-chapter__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* isolation: isolate ist hier Pflicht, nicht Geschmack: Die grosse Ziffer
   liegt auf z-index -1. Ohne eigenen Stapelkontext rutschte sie hinter den
   weissen Hintergrund der Sektion und wäre schlicht unsichtbar. */
body.page-subpage .sub-chapter__copy {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(0.9rem, 1.8vw, 1.3rem);
  align-content: center;
  min-height: min(60svh, 34rem);
  padding-top: clamp(1.5rem, 4vw, 3.5rem);
}

/* Bild rechts, Text links. Über explizite Spalten statt direction: rtl —
   letzteres kehrt auch Satzzeichen und Aufzählungen um. */
body.page-subpage .sub-chapter--reverse .sub-chapter__media {
  grid-column: 2;
}

body.page-subpage .sub-chapter--reverse .sub-chapter__copy {
  grid-column: 1;
}

body.page-subpage .sub-chapter__no {
  position: absolute;
  top: -0.35em;
  left: -0.06em;
  z-index: -1;
  font-family: var(--font-display);
  font-size: clamp(6rem, 13vw, 11rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(0, 0, 0, 0.055);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}

body.page-subpage .sub-chapter__copy h2 {
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: 0.01em;
  max-width: 16ch;
}

/* Vorspann unter der Überschrift statt Untertitel darüber: Der Untertitel
   hätte hier denselben Wortlaut wie die Überschrift gehabt — eine rote
   Zeile, die nichts hinzufügt. Der Vorspann sagt in einem Halbsatz, worum
   es im Kapitel geht. */
body.page-subpage .sub-chapter__deck {
  margin: 0;
  max-width: 40ch;
  font-size: var(--fs-body-strong);
  color: var(--color-ink-muted);
}

body.page-subpage .sub-chapter__quote {
  margin: clamp(0.4rem, 1vw, 0.8rem) 0;
  padding-inline-start: clamp(1rem, 2vw, 1.5rem);
  border-inline-start: 2px solid var(--color-accent);
  display: grid;
  gap: 0.5rem;
}

body.page-subpage .sub-chapter__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--color-ink);
}

body.page-subpage .sub-chapter__quote footer {
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
}

body.page-subpage .sub-chapter__text {
  margin: 0;
  max-width: 46ch;
}

/* Textlink mit Pfeil statt Schaltfläche — dieselbe Geste wie
   "Wohnkonzept planen" auf der Startseite. */
body.page-subpage .sub-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  justify-self: start;
  margin-top: 0.6rem;
  padding: 0.5rem 0 0.45rem;
  color: var(--color-accent);
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.4s var(--sub-ease);
}

body.page-subpage .sub-link::after {
  content: "\2192";
}

body.page-subpage .sub-link:hover,
body.page-subpage .sub-link:focus-visible {
  gap: 1.1rem;
  text-decoration: underline;
  text-decoration-thickness: 1.6px;
  text-underline-offset: 0.28em;
}

/* Kapitel gestapelt: Bild oben, Text darunter.

   Die Grenze lag bei 900 px und traf damit iPad mini (744) und iPad Air
   (820), aber nicht das iPad Pro: 1024 px hoch und 1366 px quer blieben
   zweispaltig. Dort teilte sich die Breite in zwei schmale Spalten, der
   Fliesstext lief auf gut 40 Zeichen Zeilenlaenge und die Kapitelfotos
   wurden klein. Betroffen ist leistungen.php — die einzige Seite mit
   Kapiteln.

   Jetzt reicht die Regel bis 1366 px, damit jedes iPad und Tablet dieselbe
   Darstellung bekommt wie iPad mini und Air. Bewusst ohne Touch-Erkennung:
   Auch ein Browserfenster dieser Breite bekommt das gestapelte Layout. */
@media (max-width: 1366px) {
  body.page-subpage .sub-chapter__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.4rem, 4vw, 2rem);
  }

  body.page-subpage .sub-chapter__media,
  body.page-subpage .sub-chapter--reverse .sub-chapter__media {
    position: static;
    grid-column: 1;
    grid-row: 1;
  }

  body.page-subpage .sub-chapter__copy,
  body.page-subpage .sub-chapter--reverse .sub-chapter__copy {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
  }

  /* Gestapelt steht das Bild direkt über dem Text. Ein negativer Versatz
     schöbe die Ziffer über die Unterkante des Fotos — sie muss hier ganz
     im Textbereich bleiben und wird dafür etwas kleiner. */
  body.page-subpage .sub-chapter__no {
    top: 0;
    font-size: clamp(5rem, 20vw, 8rem);
  }

  body.page-subpage .sub-chapter__copy h2 {
    max-width: none;
  }

  /* Gestapelt gibt es keine zweite Spalte mehr, gegen die der Text seine
     Zeilenlänge halten müsste. Die Kappungen aus dem zweispaltigen Layout
     (40ch am Vorspann, 46ch am Fließtext) ließen daneben eine leere Hälfte
     stehen — auf Tablet und iPad laufen Vorspann, Zitat und Absätze deshalb
     über die volle Satzbreite, genau wie das Foto darüber. Vorspann und
     Fließtext stehen damit bündig unter der Bildkante.

     Bewusst ohne Kappung, auch in den breiten Lagen: Bei iPad Pro quer
     ergibt das 153 Zeichen je Zeile (gemessen; iPad mini liegt bei 76,
     WCAG 1.4.8 nennt 80 als Richtwert). Eine Begrenzung auf 50rem stand
     hier kurz und wurde auf ausdrücklichen Wunsch wieder entfernt — die
     volle Breite ist die gewollte Gestaltung. Wer das später anfasst:
     Das ist kein Versehen. */
  body.page-subpage .sub-chapter__deck,
  body.page-subpage .sub-chapter__text {
    max-width: none;
  }
}

/* ==========================================================================
   Chronik.

   Eine Zeitleiste mit hochzählenden Jahreszahlen. Der Endwert steht bereits
   im HTML — fällt das Skript aus, steht trotzdem die richtige Zahl da.
   ========================================================================== */
body.page-subpage .sub-chronik__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

body.page-subpage .sub-chronik__item {
  display: grid;
  grid-template-columns: minmax(9rem, 0.42fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.6rem, 3.4vw, 2.8rem) 0;
  border-top: var(--sub-rule);
}

body.page-subpage .sub-chronik__item:last-child {
  border-bottom: var(--sub-rule);
}

body.page-subpage .sub-chronik__marker {
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

body.page-subpage .sub-chronik__year {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  /* Ziffern gleich breit — sonst zappelt die Zahl beim Hochzählen. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

body.page-subpage .sub-chronik__stage {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

body.page-subpage .sub-chronik__body {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

body.page-subpage .sub-chronik__title {
  font-size: var(--fs-h3);
  line-height: 1.1;
}

body.page-subpage .sub-chronik__text {
  margin: 0;
  max-width: 62ch;
}

@media (max-width: 700px) {
  body.page-subpage .sub-chronik__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
  }
}

/* ==========================================================================
   Bilderpaar als Doppelseite (statt Karten mit Rahmen und Schatten).
   ========================================================================== */
body.page-subpage .sub-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vw, 3.5rem);
}

body.page-subpage .sub-duo__item {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.3rem);
  align-content: start;
}

/* Auch hier kein fester Rahmen: Das Schwarz-Weiss-Portraet ist fast
   quadratisch, das Schauraum-Foto deutlich breiter — in einem gemeinsamen
   3:2-Kasten waere beides beschnitten gewesen. */
body.page-subpage .sub-duo__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--color-surface-muted);
}

body.page-subpage .sub-duo__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

body.page-subpage .sub-duo__body {
  display: grid;
  gap: 0.5rem;
}

body.page-subpage .sub-duo__body h3 {
  font-size: var(--fs-h3);
  line-height: 1.08;
}

body.page-subpage .sub-duo__body p {
  margin: 0;
  max-width: 44ch;
}

@media (max-width: 760px) {
  body.page-subpage .sub-duo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Bildmosaik.

   Alle zwölf Aufnahmen der Eröffnung messen 2048x1479 — mit genau diesem
   Seitenverhältnis füllt jede ihre Zelle randlos: kein Beschnitt, keine
   Streifen. Deshalb sind in ueber-uns.php nur Querformate gelistet.
   ========================================================================== */
body.page-subpage .sub-mosaic {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

body.page-subpage .sub-mosaic__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--color-surface-muted);
}

/* Der Kasten nimmt die Form der Aufnahme an, deshalb schneidet cover
   nichts ab. Alle zwoelf Eroeffnungsfotos messen 2048x1479 und stehen
   damit ohnehin gleich hoch nebeneinander; ein spaeter ergaenztes Foto mit
   anderem Format wird jetzt aber ebenfalls vollstaendig gezeigt statt
   beschnitten. */
body.page-subpage .sub-mosaic__item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ==========================================================================
   Weniger Bewegung: Alles bleibt sichtbar, nur die Übergänge entfallen.
   Die Sticky-Positionen bleiben — sie sind Layout, keine Animation.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.page-subpage .sub-index__link,
  body.page-subpage .sub-index__arrow,
  body.page-subpage .sub-link {
    transition: none;
  }

  /* Der Pfeil ist ohne Bewegung der einzige Hinweis, dass die Zeile ein
     Verweis ist — also steht er hier dauerhaft. */
  body.page-subpage .sub-index__arrow {
    opacity: 1;
    transform: none;
  }
}