/* ==========================================================================
   klarchitektur ZT GmbH — Stylesheet
   Keine externen Ressourcen. Nur Systemschriften.
   ========================================================================== */

/* --- Design Tokens ------------------------------------------------------ */

:root {
  --bg:        #ffffff;
  --bg-alt:    #f4f2ef;
  --fg:        #14130f;
  --fg-muted:  #56534c;
  --line:      #d8d3cb;
  --accent:    #7a6a52;
  --accent-fg: #ffffff;
  --shadow:    0 1px 2px rgba(20, 19, 15, .06);

  /* Dasselbe feste Orange wie .hero--cover .hero__claim em / .hero__title
     ("Klarheit"/"Architektin"), bewusst themenunabhängig. */
  --accent-warm: #ffd180;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --wrap: 74rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --section: clamp(4rem, 10vw, 8rem);

  color-scheme: light;
}

/* Dunkle Tokens — einmal für Systemeinstellung, einmal für manuelle Wahl. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #121110;
    --bg-alt:    #1b1a18;
    --fg:        #ece9e4;
    --fg-muted:  #a8a29a;
    --line:      #33302c;
    --accent:    #c9b48f;
    --accent-fg: #121110;
    --shadow:    0 1px 2px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:        #121110;
  --bg-alt:    #1b1a18;
  --fg:        #ece9e4;
  --fg-muted:  #a8a29a;
  --line:      #33302c;
  --accent:    #c9b48f;
  --accent-fg: #121110;
  --shadow:    0 1px 2px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* --- Reset / Basis ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 6vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 500; letter-spacing: 0; }
h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

address { font-style: normal; }
dd { margin-inline-start: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
       font-size: .92em; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--line);
  transition: text-decoration-color .18s ease, color .18s ease;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--section) 0;
}

::selection { background: var(--accent); color: var(--accent-fg); }

/* --- Hilfsklassen ------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow { max-width: 46rem; }

.section { padding-block: var(--section); }
.section--alt { background: var(--bg-alt); }
.section--compact { padding-block: clamp(2rem, 5vw, 4rem); }
.section + .section--alt { padding-top: clamp(1.5rem, 4vw, 3rem); }

.kicker {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 1.4em;
  font-weight: 500;
}

.lead {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.55;
  font-weight: 300;
  color: var(--fg);
}

.muted { color: var(--fg-muted); }

.measure { max-width: 52ch; }
.mt-l { margin-top: clamp(2rem, 5vw, 3rem); }
.mb-l { margin-bottom: clamp(2.5rem, 6vw, 4rem); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--fg);
  color: var(--bg);
  padding: .75rem 1.25rem;
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-block;
  padding: .8rem 1.7rem;
  border: 1px solid var(--fg);
  text-decoration: none;
  font-size: .95rem;
  letter-spacing: .04em;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: transparent; color: var(--accent-warm); border-color: var(--accent-warm); }

.btn--ghost { border-color: var(--line); }
.btn--ghost:hover { background: transparent; border-color: var(--accent-warm); color: var(--accent-warm); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.2rem;
}

/* --- Kopfzeile ---------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--bg); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.5rem;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto;
  flex-shrink: 0;
}
.brand__text {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--fg);
  line-height: 1;
}
.brand__thin {
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0;
}
@media (max-width: 30rem) {
  .brand__text { font-size: 1.2rem; }
}

.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  text-decoration: none;
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--fg-muted);
  padding-block: .4rem;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav a:hover { color: var(--fg); }
.nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }

.header-tools {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--fg-muted);
}
.lang-switch a { text-decoration: none; padding: .2rem; }
.lang-switch a:hover { color: var(--fg); }
.lang-switch [aria-current="true"] { color: var(--fg); font-weight: 600; }
.lang-switch__sep { opacity: .5; }

.social-link {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  border-radius: 50%;
  transition: border-color .18s ease, background .18s ease;
}
.social-link:hover { border-color: var(--fg); }
.social-link svg { width: 1.05rem; height: 1.05rem; fill: none;
                    stroke: currentColor; stroke-width: 1.5;
                    stroke-linecap: round; stroke-linejoin: round; }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  border-radius: 50%;
  transition: border-color .18s ease, background .18s ease;
}
.theme-toggle:hover { border-color: var(--fg); }
.theme-toggle svg { width: 1.05rem; height: 1.05rem; fill: none;
                    stroke: currentColor; stroke-width: 1.5;
                    stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

.nav-toggle {
  display: none;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  border-radius: 50%;
}
.nav-toggle svg { width: 1.1rem; height: 1.1rem; margin-inline: auto;
                  stroke: currentColor; stroke-width: 1.5; fill: none;
                  stroke-linecap: round; }

/* Ohne JavaScript sind die Schalter wirkungslos und bleiben ausgeblendet. */
.theme-toggle[hidden], .nav-toggle[hidden] { display: none; }

@media (max-width: 56rem) {
  .nav-toggle { display: inline-grid; place-items: center; }

  .nav {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gutter) 1.5rem;
  }
  .nav li + li { border-top: 1px solid var(--line); }
  .nav a { display: block; padding: .95rem 0; font-size: 1.05rem; border-bottom: 0; }
  .nav a[aria-current="page"] { border-bottom: 0; color: var(--accent); }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}

/* Eigene Anfasser für den Titel-Versatz (siehe weiter unten), auf .hero
   definiert statt direkt auf .hero__title-wrap: .hero--slogan braucht den
   Wert ebenfalls für sein padding-bottom, und Custom Properties vererben
   sich nur nach unten, nicht zum Geschwisterelement. */
.hero { --title-size: clamp(2.1rem, 6.5vw, 4.25rem); }

/* Eigene Box nur um das Foto, damit .hero__title-wrap unten unabhängig
   von einem eventuellen padding-bottom auf .hero (siehe .hero--slogan)
   exakt an der Fotokante verankert bleibt. */
.hero__frame { position: relative; }

.hero__photo { margin: 0; }
.hero__photo img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center 22%;
  background: var(--bg-alt);
  display: block;
}

.hero__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(2.5rem, 8vw, 4.5rem) var(--gutter);
}

.hero__claim {
  max-width: 22ch;
  font-size: clamp(2.1rem, 6.2vw, 4.25rem);
  font-weight: 200;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0;
}
.hero__claim em { font-style: normal; color: var(--accent); }

.hero__sub {
  max-width: 44ch;
  margin-top: 1.8rem;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 300;
  color: var(--fg-muted);
}

/* Grosser, oranger Titel, der die Unterkante des Fotos zur Hälfte
   überlagert und zur Hälfte in den Weissraum darunter ragt (Architektin
   auf Über mich, Leistungen-Slogan zeilenweise). Keine Trennlinie unter
   dem Foto, da der Titel die Kante überlagert; der folgende Abschnitt
   braucht dadurch weniger Abstand als sonst nach einem Hero.
   Der Versatz sitzt als transform auf .hero__title-wrap statt auf
   .hero__title selbst: so überlagert bei mehrzeiligen Titeln (Leistungen)
   nur die erste Zeile die Fotokante, während weitere Zeilen normal darunter
   weiterfliessen — bei einem einzeiligen Titel (Architektin) ist das
   Ergebnis identisch zu einem transform auf dem Titel selbst. */
.hero__title-wrap {
  position: absolute;
  inset: 100% 0 auto 0;
  font-size: var(--title-size);
  transform: translateY(-0.5em);
}
.hero__title {
  margin: 0;
  font-size: var(--title-size);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  /* Bewusst dasselbe feste Orange wie .hero--cover .hero__claim em
     ("Klarheit" auf der Startseite), nicht var(--accent). Unterschreitet
     auf der unteren Bildhälfte (Seitenhintergrund statt Foto) die
     WCAG-AA-Kontrastgrenze — von der Auftraggeberin bewusst in Kauf
     genommen. */
  color: var(--accent-warm);
  text-transform: uppercase;
}

.hero:has(.hero__title-wrap) { border-bottom: 0; }
.hero:has(.hero__title-wrap) + .section { padding-top: clamp(1.5rem, 4vw, 3rem); }

/* Leistungen-Slogan: drei Zeilen statt eines Worts. Nur die erste
   überlagert die Fotokante (siehe oben), die zweite und dritte brauchen
   darunter eigenen Platz im Fluss — daher dieses padding-bottom, exakt
   auf die zwei zusätzlichen Zeilen samt des halbzeiligen Versatzes
   bemessen (2.5 × Zeilenhöhe, Zeilenhöhe = --title-size dank line-height: 1).
   Weisser statt des sonst üblichen beigen Hero-Hintergrunds, da die
   zweite und dritte Zeile — anders als bei .hero--about — auf diesem
   Hintergrund stehen statt nur knapp hineinzuragen. */
.hero--slogan { padding-bottom: calc(2.5 * var(--title-size)); background: var(--bg); }

/* Startseite: Foto füllt den Bildschirm, Text liegt im Foto. Nur dort
   verwendet (.hero--cover zusätzlich zu .hero), damit Leistungen &Co.
   ihre ruhigere Standard-Heroleiste behalten. */
.hero--cover {
  border-bottom: 0;
  background: none;
  overflow: hidden;
}

.hero--cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 9, 7, .8) 0%, rgba(10, 9, 7, .38) 42%, rgba(10, 9, 7, 0) 70%);
  pointer-events: none;
}

.hero--cover .hero__photo img {
  height: max(30rem, calc(100vh - 4.5rem));
  animation: hero-kenburns 3s cubic-bezier(.1, .2, .7, 1) both;
}

@keyframes hero-kenburns {
  from { transform: scale(1.18); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero--cover .hero__photo img { animation: none; }
}

.hero--cover .hero__inner {
  position: absolute;
  inset: auto 0 0 0;
  max-width: none;
  padding-bottom: clamp(2.5rem, 7vw, 3.5rem);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.hero--cover .hero__claim { color: #fff; text-wrap: balance; }
.hero--cover .hero__claim em { color: var(--accent-warm); }
.hero--cover .hero__sub { color: rgba(255, 255, 255, .88); }

.hero--cover .btn {
  border-color: rgba(255, 255, 255, .75);
  color: #fff;
}
.hero--cover .btn:hover { background: transparent; color: var(--accent-warm); border-color: var(--accent-warm); }

/* Mobil: Überschrift/Text oben rechts statt unten (dort ist das Foto
   heller), der Button bleibt unten, wo das Foto dunkler ist. Verlauf
   deshalb an beiden Enden abgedunkelt statt nur unten. */
@media (max-width: 39.9375rem) {
  .hero--cover::after {
    background: linear-gradient(to bottom,
      rgba(10, 9, 7, .38) 0%, rgba(10, 9, 7, .06) 28%,
      rgba(10, 9, 7, .06) 62%, rgba(10, 9, 7, .38) 100%);
  }
  .hero--cover .hero__inner {
    inset: 0;
    padding-bottom: clamp(1rem, 4vw, 1.5rem);
  }
  .hero--cover .btn-row { margin-top: auto; }
}

.page-head {
  padding-block: clamp(3rem, 8vw, 5.5rem) clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.page-head p.lead { max-width: 52ch; margin-top: .5rem; }

/* Ohne Fliesstext trennt die Linie nichts, sie stünde nur knapp über der
   ersten Trennlinie des Inhalts. */
.page-head:not(:has(.lead)) {
  border-bottom: 0;
  padding-bottom: 0;
}
.page-head:not(:has(.lead)) + .section { padding-top: clamp(1.5rem, 4vw, 3rem); }

/* Seiten ohne page-head (z. B. Projekte): Galerie rückt näher an den Strich
   unter dem Header heran. */
h1.visually-hidden + .section { padding-top: clamp(1.5rem, 4vw, 3rem); }

/* --- Raster ------------------------------------------------------------- */

.grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 52rem) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
}

/* --- Prinzipien / Karten ------------------------------------------------ */

.principle { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.principle h3 { margin-bottom: .5rem; }
.principle p { color: var(--fg-muted); font-size: .98rem; margin: 0; }

.service {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}
.service p { color: var(--fg-muted); margin: 0; }

.service-block { border-top: 1px solid var(--line); padding-block: clamp(2rem, 5vw, 3.25rem); }
.service-block:last-child { border-bottom: 1px solid var(--line); }
.service-block__grid {
  display: grid;
  gap: clamp(1rem, 3vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .service-block__grid { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}
.service-block h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0; }
.service-block__body { max-width: 58ch; color: var(--fg-muted); }

/* --- Projekte ----------------------------------------------------------- */

/* Anriss auf der Startseite: vierspaltige Galerie mit einheitlich
   hochformatigen Kacheln, ohne Unterschrift. Mobil zwei Spalten zu je
   zwei Bildern, ab 60rem alle vier Bilder in einer Reihe. */
.projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(0.5rem, 1.3vw, 1rem);
  row-gap: clamp(0.5rem, 1.3vw, 1rem);
}
@media (min-width: 60rem) { .projects { grid-template-columns: repeat(4, 1fr); } }

.project { margin: 0; }

.project img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--bg-alt);
}

/* Treppenfoto und Bürogebäude-Foto auf der Startseite: bei Hover blenden
   weitere Fotos desselben Projekts durch, in Dauerschleife solange
   gehovert wird. Jedes Foto steht 1 Sekunde, dann Überblendung zum
   nächsten. Reines CSS, damit der Effekt ohne JavaScript auskommt. Die
   Animation wird erst bei :hover/:focus-within angehängt (statt nur
   pausiert) — beim Verlassen fällt sie dadurch sofort auf den
   unanimierten Grundzustand zurück, also auf das erste (Start-)Foto.
   .project--cycle hat 3 Fotos (Treppe), .project--cycle-4 hat 4
   (Bürogebäude) — je eigener Zeitplan, da die Sekunden pro Foto sich
   nicht ohne Weiteres auf eine gemeinsame Prozent-Skala bringen lassen. */
.project--cycle .project__frame,
.project--cycle-4 .project__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;
}
.project--cycle .project__frame img,
.project--cycle-4 .project__frame img {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
  opacity: 0;
}
.project--cycle .project__frame img:first-child,
.project--cycle-4 .project__frame img:first-child {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .project--cycle:hover .project__frame img:first-child,
  .project--cycle:focus-within .project__frame img:first-child {
    animation: project-cycle-1 6s infinite;
  }
  .project--cycle:hover .project__frame img:nth-child(2),
  .project--cycle:focus-within .project__frame img:nth-child(2) {
    animation: project-cycle-2 6s infinite;
  }
  .project--cycle:hover .project__frame img:nth-child(3),
  .project--cycle:focus-within .project__frame img:nth-child(3) {
    animation: project-cycle-3 6s infinite;
  }
  .project--cycle-4:hover .project__frame img:first-child,
  .project--cycle-4:focus-within .project__frame img:first-child {
    animation: project-cycle4-1 8s infinite;
  }
  .project--cycle-4:hover .project__frame img:nth-child(2),
  .project--cycle-4:focus-within .project__frame img:nth-child(2) {
    animation: project-cycle4-2 8s infinite;
  }
  .project--cycle-4:hover .project__frame img:nth-child(3),
  .project--cycle-4:focus-within .project__frame img:nth-child(3) {
    animation: project-cycle4-3 8s infinite;
  }
  .project--cycle-4:hover .project__frame img:nth-child(4),
  .project--cycle-4:focus-within .project__frame img:nth-child(4) {
    animation: project-cycle4-4 8s infinite;
  }
}

/* Zeitplan auf 6s-Zyklus (Prozent = Sekunden/6): Foto 1 0-1s,
   Überblendung 1-2s, Foto 2 2-3s, Überblendung 3-4s, Foto 3 4-5s,
   Überblendung zurück zu Foto 1 5-6s. */
@keyframes project-cycle-1 {
  0%, 16.667% { opacity: 1; }
  33.333%, 83.333% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes project-cycle-2 {
  0%, 16.667% { opacity: 0; }
  33.333%, 50% { opacity: 1; }
  66.667%, 100% { opacity: 0; }
}
@keyframes project-cycle-3 {
  0%, 50% { opacity: 0; }
  66.667%, 83.333% { opacity: 1; }
  100% { opacity: 0; }
}

/* Zeitplan auf 8s-Zyklus (Prozent = Sekunden/8): Foto 1 0-1s,
   Überblendung 1-2s, Foto 2 2-3s, Überblendung 3-4s, Foto 3 4-5s,
   Überblendung 5-6s, Foto 4 6-7s, Überblendung zurück zu Foto 1 7-8s. */
@keyframes project-cycle4-1 {
  0%, 12.5% { opacity: 1; }
  25%, 87.5% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes project-cycle4-2 {
  0%, 12.5% { opacity: 0; }
  25%, 37.5% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes project-cycle4-3 {
  0%, 37.5% { opacity: 0; }
  50%, 62.5% { opacity: 1; }
  75%, 100% { opacity: 0; }
}
@keyframes project-cycle4-4 {
  0%, 62.5% { opacity: 0; }
  75%, 87.5% { opacity: 1; }
  100% { opacity: 0; }
}

/* Projektseite: Projekte ohne Namensnennung, in vier mosaikartigen
   Blöcken (je Projekt) ohne Überschriften. Auf Mobilgeräten fällt jeder
   Block in eine Spalte, die Fotos bleiben unbeschnitten. Ab 40rem greift
   je Block ein festes CSS-Grid, das die Anordnung der Auftraggeberin
   nachbildet; einzelne Fotos werden dafür per object-fit: cover auf ihre
   Zelle zugeschnitten. Die Reihenfolge der figure-Elemente in jedem Block
   entspricht genau dieser Zellzuweisung — bei Bildwechseln daher die
   nth-child-Regeln unten mitpflegen. */
.mosaic {
  display: grid;
  gap: clamp(.75rem, 2.5vw, 1.25rem);
}
.mosaic + .mosaic { margin-top: clamp(1.5rem, 3.5vw, 2rem); }

.mosaic figure {
  margin: 0;
  background: var(--bg-alt);
}

.mosaic img {
  width: 100%;
  height: auto;
  display: block;
}

/* Treppenfoto Haus U: beim Hover Graustufen + zentrierter Projektname,
   dient als Wiedererkennung, da die Fotos sonst ohne Beschriftung
   auskommen (siehe init.md, "ohne Namensnennung"). */
.mosaic__figure--labeled {
  position: relative;
}
.mosaic__figure--labeled img {
  transition: filter .3s ease;
}
.mosaic__figure--labeled figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1em;
  margin: 0;
  background: rgba(0, 0, 0, .35);
  color: var(--accent-warm);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  line-height: 1.1;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.mosaic__figure--labeled figcaption span:first-child {
  text-transform: uppercase;
}
.mosaic__figure--labeled:hover img,
.mosaic__figure--labeled:focus-within img {
  filter: grayscale(1);
}
.mosaic__figure--labeled:hover figcaption,
.mosaic__figure--labeled:focus-within figcaption {
  opacity: 1;
}

@media (min-width: 40rem) {
  .mosaic figure { overflow: hidden; }
  .mosaic img { height: 100%; object-fit: cover; }

  .mosaic--haus-u { grid-template-columns: 2fr 1fr 1fr; grid-template-areas: "a b c" "a d d"; }
  .mosaic--haus-u figure:nth-child(1) { grid-area: a; }
  .mosaic--haus-u figure:nth-child(2) { grid-area: b; aspect-ratio: 2 / 3; }
  .mosaic--haus-u figure:nth-child(3) { grid-area: c; aspect-ratio: 2 / 3; }
  .mosaic--haus-u figure:nth-child(4) { grid-area: d; aspect-ratio: 29 / 20; }

  .mosaic--buero-a { grid-template-columns: 10fr 7fr 13fr; grid-template-areas: "a b c" "d d c" "d d e"; }
  .mosaic--buero-a figure:nth-child(1) { grid-area: a; aspect-ratio: 2 / 3; }
  .mosaic--buero-a figure:nth-child(2) { grid-area: b; aspect-ratio: 7 / 15; }
  .mosaic--buero-a figure:nth-child(2) img { object-position: 65% 38%; }
  .mosaic--buero-a figure:nth-child(3) { grid-area: c; aspect-ratio: 2 / 3; }
  .mosaic--buero-a figure:nth-child(4) { grid-area: d; aspect-ratio: 3 / 2; }
  .mosaic--buero-a figure:nth-child(5) { grid-area: e; aspect-ratio: 9 / 5; }

  .mosaic--whg-k { grid-template-columns: 1fr 1fr 2fr; grid-template-areas: "a a c" "d e c" "zeile zeile zeile"; }
  .mosaic--whg-k > figure:nth-child(1) { grid-area: a; aspect-ratio: 3 / 2; }
  .mosaic--whg-k > figure:nth-child(2) { grid-area: c; }
  .mosaic--whg-k > figure:nth-child(3) { grid-area: d; aspect-ratio: 13 / 20; }
  .mosaic--whg-k > figure:nth-child(4) { grid-area: e; aspect-ratio: 13 / 20; }

  /* Eigenes Sub-Grid für Wohnzimmer- (breit, 3:2) und Deko-Foto (schmal,
     2:3): nur so lassen sich beide Fotos bei jeder Breite exakt gleich
     hoch anordnen, weil eine über mehrere Spuren des äusseren Grids
     spannende Zelle den `gap` mit in ihre Breite einrechnet und damit das
     9:4-Verhältnis verschieben würde (siehe Memory
     projektgalerie-mosaik-layout). Im eigenen 2-Spalten-Grid mit genau
     einem Gap dazwischen bleibt 9fr:4fr exakt proportional zur Breite. */
  .mosaic--whg-k-zeile { grid-area: zeile; grid-template-columns: 9fr 4fr; }
  .mosaic--whg-k-zeile figure:nth-child(1) { aspect-ratio: 3 / 2; }
  .mosaic--whg-k-zeile figure:nth-child(2) { aspect-ratio: 2 / 3; }

  .mosaic--moebel { grid-template-columns: 1fr 1fr; }
  .mosaic--moebel figure { aspect-ratio: 2 / 3; }
}

/* --- Über mich: Foto, Name und Lead -------------------------------------- */

.about-hero { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.about-hero + .section { padding-top: clamp(1.5rem, 4vw, 3rem); }
.about-hero .wrap { text-align: center; }
.about-hero__lead { margin-inline: auto; }

/* Anderer Bildausschnitt als beim Leistungen-Hero, da Hochformat-Motiv
   (Person von hinten) statt liegender Detailaufnahme. */
.hero--about .hero__photo img { object-position: center 25%; }

/* Name rückt näher an "Architektin" heran statt mit dem grossen
   Standardabstand des page-head, und steht etwas kleiner als ein
   gewöhnliches h1. */
.hero--about + .page-head { padding-top: clamp(1rem, 3vw, 2rem); }
.hero--about + .page-head h1 { font-size: clamp(1.7rem, 4.2vw, 2.75rem); }

.note {
  border-left: 2px solid var(--accent);
  padding: .3rem 0 .3rem 1.25rem;
  color: var(--fg-muted);
  font-size: .98rem;
  max-width: 52ch;
}

/* --- Über mich ---------------------------------------------------------- */

.prose h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.prose h2:first-child { margin-top: 0; }
.prose p { max-width: 62ch; color: var(--fg-muted); }
.prose p.lead { color: var(--fg); }

/* --- Kontakt ------------------------------------------------------------ */

/* Die Trio-Fotos blenden hier in einer Fotofolge durch (Start: linkes
   Foto, dann Mitte, dann rechts), in Dauerschleife, wie die
   Projektkacheln auf der Startseite. Anders als dort läuft die
   Animation aber durchgehend statt nur bei Hover, weil es hier das
   einzige Bild ist und nichts zum Hovern einlädt. Reines CSS, dieselben
   Keyframes wie project-cycle-1..3 (siehe oben). */
.contact-trio {
  position: relative;
  overflow: hidden;
  margin: 0;
  width: min(100%, 26rem);
  aspect-ratio: 4 / 5;
}
.contact-trio img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-alt);
  opacity: 0;
}
.contact-trio img:first-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .contact-trio img:first-child { animation: project-cycle-1 6s infinite; }
  .contact-trio img:nth-child(2) { animation: project-cycle-2 6s infinite; }
  .contact-trio img:nth-child(3) { animation: project-cycle-3 6s infinite; }
}
@media (min-width: 52rem) {
  .contact-grid { grid-template-columns: max-content auto; align-items: start; }
  /* Ab hier deutlich grösser und über den Strich unter dem Seitenkopf
     hinausgezogen (negativer margin-top), damit das Foto ihn optisch
     durchbricht. Nur auf breiten Bildschirmen: mobil bliebe dafür kein
     Platz zwischen Header und Text. */
  .contact-trio { width: 32rem; margin-top: calc(-1 * var(--section) - 1.5rem); margin-left: 3rem; }
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.6rem;
}
.contact-list dt, .contact-list__label {
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: .3rem;
}
.contact-list a { font-size: 1.15rem; }

.cta-band {
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
}
.cta-band .wrap { padding-block: clamp(3rem, 7vw, 5rem); }
.cta-band h2 { max-width: 20ch; }

/* --- Rechtstexte -------------------------------------------------------- */

.legal { max-width: 48rem; }
.legal h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: 0;
            margin-top: 2.75rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--fg-muted); }
.legal address { font-style: normal; color: var(--fg-muted); }
.legal dl { display: grid; grid-template-columns: max-content 1fr;
            gap: .35rem 1.5rem; margin: 0 0 1.5rem; }
.legal dt { color: var(--fg-muted); }
.legal dd { margin: 0; }
.legal ul { padding-left: 1.1rem; }
.legal .todo {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  padding: .05em .4em;
  border-radius: 2px;
  color: var(--fg);
}

@media (max-width: 34rem) {
  .legal dl { grid-template-columns: 1fr; gap: 0 0; }
  .legal dd { margin-bottom: .75rem; }
}

/* --- Fußzeile ----------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  font-size: .92rem;
  color: var(--fg-muted);
}
.site-footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
  .site-footer__grid { grid-template-columns: repeat(4, 1fr); }
}
.site-footer h2 {
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 1rem;
  color: var(--fg);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--fg); text-decoration: underline; }
.site-footer address { font-style: normal; }
.site-footer__bottom {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .85rem;
}

.site-footer__badge {
  margin-top: 2.75rem;
}
.site-footer__badge--mobile { margin-top: 2rem; }
.site-footer__badge--tablet,
.site-footer__badge--desktop { display: none; }
@media (min-width: 40rem) {
  .site-footer__badge--mobile { display: none; }
  .site-footer__badge--tablet { display: block; }
}
@media (min-width: 60rem) {
  .site-footer__badge--tablet { display: none; }
  .site-footer__badge--desktop { display: block; }
}
.site-footer__badge img {
  width: 14rem;
  max-width: 100%;
  height: auto;
  filter: grayscale(1);
  opacity: .7;
  transition: opacity .18s ease;
}
.site-footer__badge img:hover { opacity: .95; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-footer__badge img { filter: grayscale(1) invert(1); }
}
:root[data-theme="dark"] .site-footer__badge img { filter: grayscale(1) invert(1); }

/* --- Bewegung reduzieren ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --- Druck -------------------------------------------------------------- */

@media print {
  .site-header, .cta-band, .btn-row { display: none; }
  body { color: #000; background: #fff; }
}