/*
 * Design der Website
 * Farben, Schriften, Abstände usw. kommen als Variablen aus den Einstellungen im Admin
 * (siehe inc/views/design.php). Hier steht, WIE sie verwendet werden.
 *
 * Inhalt:
 *  1. Grundlagen
 *  2. Breiten und Abstände
 *  3. Kopfzeile und Navigation
 *  4. Seiten- und Projektkopf
 *  5. Blöcke
 *  6. Projektraster und Filter
 *  7. Lightbox
 *  8. Footer
 *  9. Bewegung reduzieren
 */

/* 1. Grundlagen ------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--body-color);
  font-family: var(--body-font);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-lh);
  letter-spacing: var(--body-ls);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img,
video,
iframe {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.2s;
}

a:hover {
  color: var(--link);
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
}

/* Textstile aus dem Corporate Design Manual (Variablen siehe inc/views/design.php).
   Die Klassen t-… lassen sich auch auf andere Elemente setzen. */

h1,
.t-h1,
.heading--xl {
  font-family: var(--h1-font);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-ls);
  color: var(--h1-color);
}

h2,
.t-h2,
.heading--l {
  font-family: var(--h2-font);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-lh);
  letter-spacing: var(--h2-ls);
  color: var(--h2-color);
}

h3,
h4,
.t-h3,
.heading--m {
  font-family: var(--h3-font);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--h3-color);
}

.t-lead,
.entry-intro {
  font-family: var(--lead-font);
  font-size: var(--lead-size);
  font-weight: var(--lead-weight);
  line-height: var(--lead-lh);
  letter-spacing: var(--lead-ls);
  color: var(--lead-color);
}

.t-body {
  font-family: var(--body-font);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-lh);
  letter-spacing: var(--body-ls);
  color: var(--body-color);
}

small,
figcaption,
.t-caption {
  font-family: var(--caption-font);
  font-size: var(--caption-size);
  font-weight: var(--caption-weight);
  line-height: var(--caption-lh);
  letter-spacing: var(--caption-ls);
  color: var(--caption-color);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--text);
  color: var(--bg);
  padding: 0.5rem 1rem;
}

.skip:focus {
  top: 1rem;
}

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

/* 2. Breiten und Abstände -------------------------------------------- */

:root {
  --gutter: clamp(1.5rem, 5vw, 3rem); /* Seitenrand: auf dem Handy mind. 24 px, damit nichts am Rand klebt */
}

.site-main {
  flex: 1;
  padding-bottom: clamp(4rem, 9vw, 8rem); /* grosser Abstand vor dem Footer, damit er nicht halb ins Bild ragt */
}

@media (max-width: 800px) {
  .site-main {
    padding-bottom: 8rem; /* Handy: mehr Luft zwischen letztem Inhalt und Footer-Linie */
  }
}

.w-narrow,
.w-normal,
.w-wide,
.w-full {
  margin-inline: auto;
}

.w-narrow,
.w-normal {
  max-width: calc(var(--content-width) + 2 * var(--gutter));
  padding-inline: var(--gutter);
}

/* Text steht links bündig mit Titel und Bildern, aber in angenehmer Zeilenlänge */
.w-normal > * {
  max-width: var(--text-width);
}

.w-narrow > * {
  max-width: calc(var(--text-width) * 0.8);
}

.w-wide {
  max-width: calc(var(--content-width) + 2 * var(--gutter));
  padding-inline: var(--gutter);
}

.w-full {
  max-width: none;
}

.block {
  margin-top: calc(var(--space-l) * 1.25); /* etwas mehr Luft zwischen Titel und erstem Inhalt */
}

.block + .block {
  margin-top: calc(var(--space-m) * 1.25); /* und zwischen den Abschnitten */
}

/* Raster mit 3 Spalten (Einstellungen des Blocks → Spalten). Intern 6 Spalten, damit auch «Hälfte» geht:
   1 Spalte = 2, 2 Spalten = 4, Hälfte = 3.
   Auf dem Handy untereinander (siehe Mobile-Breite in inc/views/design.php). */
.block-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  /* Freie Plätze auffüllen: Ein Block mit «Position: Rechts» rückt neben den Block links daneben,
     auch wenn in der Liste noch ein anderer Block dazwischen steht */
  grid-auto-flow: row dense;
  gap: var(--space-m);
  align-items: start;
  max-width: calc(var(--content-width) + 2 * var(--gutter));
  margin: var(--space-m) auto 0;
  padding-inline: var(--gutter);
}

.blocks > .block-row:first-child {
  margin-top: var(--space-l);
}

.block-row + .block {
  margin-top: var(--space-m);
}

.block-row > .block {
  margin: 0;
  max-width: none;
  padding-inline: 0;
}

.block-row > .block > * {
  max-width: none;
}

.block-row > .span-half { grid-column: span 3; }
.block-row > .span-third { grid-column: span 2; }
.block-row > .span-twothirds { grid-column: span 4; }

/* «Beginnt in»: Spalte 1, 2 oder 3 (bei Hälfte: links oder rechts) */
.block-row > .span-third.start-1 { grid-column: 1 / span 2; }
.block-row > .span-third.start-2 { grid-column: 3 / span 2; }
.block-row > .span-third.start-3 { grid-column: 5 / span 2; }
.block-row > .span-twothirds.start-1 { grid-column: 1 / span 4; }
.block-row > .span-twothirds.start-2 { grid-column: 3 / span 4; }
.block-row > .span-half.start-1 { grid-column: 1 / span 3; }
.block-row > .span-half.start-2 { grid-column: 4 / span 3; }

/* Ausrichtung des Inhalts (Einstellungen des Blocks → Ausrichtung): mittig oder rechtsbündig.
   Texte mit Textbreite rücken dabei mit (statt links stehen zu bleiben). */
.block.ta-center { text-align: center; }
.block.ta-right { text-align: right; }

.block.ta-center > *,
.block.ta-center .prose,
.block.ta-center .slider,
.block.ta-center .media {
  margin-inline: auto;
}

.block.ta-right > *,
.block.ta-right .prose {
  margin-left: auto;
  margin-right: 0;
}

.block.ta-center .buttons,
.block.ta-center .link-list,
.block.ta-center .contact__actions { justify-content: center; }
.block.ta-right .buttons,
.block.ta-right .link-list,
.block.ta-right .contact__actions { justify-content: flex-end; }

/* Listen behalten ihre Punkte links, damit sie lesbar bleiben */
.block.ta-center .prose ul,
.block.ta-center .prose ol,
.block.ta-right .prose ul,
.block.ta-right .prose ol {
  text-align: left;
  display: inline-block;
}

/* Vertikale Ausrichtung in einer Zeile (Einstellungen des Blocks → Vertikal) */
.block-row > .valign-center { align-self: center; }
.block-row > .valign-end { align-self: end; }

/* Überlappen: Block ragt über seinen Nachbarn (z. B. farbige Box über ein Bild), liegt darüber */
.block-row > .overlap-left,
.block-row > .overlap-right {
  position: relative;
  z-index: 2;
}
.block-row > .overlap-left { margin-left: calc(-1 * var(--overlap, 25%)); }
.block-row > .overlap-right { margin-right: calc(-1 * var(--overlap, 25%)); }

/* Bild «bildschirmhoch»: füllt die Höhe des Fensters, wird dafür zugeschnitten */
.media--screen img {
  width: 100%;
  height: calc(100vh - 6rem);
  min-height: 22rem;
  object-fit: cover;
  border-radius: 0;
}

/* Bild mit Rahmen (Einstellung im Block «Bild» und «Bild + Text»): feine Linie in der Farbe «Linie» */
.media--frame img,
.media--frame .parallax {
  border: 1px solid var(--line);
}

.media--frame .parallax img {
  border: 0; /* Linie am Rahmen, damit sie beim Parallax stehen bleibt */
}

/* Farbige Box, die über einen Nachbarn ragt (z. B. Hero): feine Linie, Inhalt mittig, viel Luft */
.block-row > .has-bg.overlap-left,
.block-row > .has-bg.overlap-right {
  border: 1px solid var(--line);
  border-radius: 0;
  text-align: center;
  padding-block: var(--space-l);
}

/* Hintergrund in einer Zeile: immer als Fläche in Spaltenbreite (ein Band über die ganze Breite passt nicht) */
.block-row > .has-bg {
  background: var(--block-bg);
  box-shadow: none;
  clip-path: none;
  border-radius: var(--radius);
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.block-row > .has-bg::before {
  content: none;
}

/* Abstand oben/unten pro Block (im Editor unter «Gestaltung») */
.block.pt-0 { margin-top: 0; }
.block.pt-s { margin-top: var(--space-s); }
.block.pt-m { margin-top: var(--space-m); }
.block.pt-l { margin-top: var(--space-l); }
.block.pb-0 { margin-bottom: 0; }
.block.pb-s { margin-bottom: var(--space-s); }
.block.pb-m { margin-bottom: var(--space-m); }
.block.pb-l { margin-bottom: var(--space-l); }
/* Ist unten ein Abstand gewählt, gilt dieser (der nächste Block fügt keinen eigenen hinzu) */
.block[class*="pb-"] + .block:not([class*="pt-"]) { margin-top: 0; }

/* Hintergrundfarbe pro Block */
.bg-surface { --block-bg: var(--surface); }
.bg-accent { --block-bg: var(--accent); color: var(--bg); }
.bg-dark { --block-bg: var(--text); color: var(--bg); }

/* Auf farbigem Hintergrund steht jeder Textstil in der Hintergrundfarbe (z. B. Creme auf Rot) */
.bg-accent,
.bg-dark {
  --h1-color: var(--bg);
  --h2-color: var(--bg);
  --h3-color: var(--bg);
  --lead-color: var(--bg);
  --body-color: var(--bg);
  --caption-color: var(--bg);
}
.bg-accent a,
.bg-dark a { color: inherit; }
/* Links auf farbigem Hintergrund: beim Darüberfahren nicht in der Akzentfarbe (sonst unsichtbar) */
.bg-accent a:not(.button):hover,
.bg-dark a:not(.button):hover { color: inherit; opacity: 0.75; }

.has-bg {
  position: relative;
  padding-block: var(--space-m);
}

/* Band: Farbe von Bildschirmrand zu Bildschirmrand */
.has-bg.bg-band {
  background: var(--block-bg);
  box-shadow: 0 0 0 100vmax var(--block-bg);
  clip-path: inset(0 -100vmax);
}

/* Fläche: Farbe nur in Inhaltsbreite, mit Eckenradius */
.has-bg.bg-box {
  isolation: isolate;
  padding-inline: calc(var(--gutter) + clamp(1rem, 3vw, 2.5rem));
}
.has-bg.bg-box::before {
  content: "";
  position: absolute;
  inset: 0 var(--gutter);
  z-index: -1;
  background: var(--block-bg);
  border-radius: var(--radius);
}
.has-bg.bg-box.w-full::before { inset: 0; }

/* Schriftfarbe aus dem Corporate Design Manual (Formatierung «Farbe» im Editor) */
.c-bg { color: var(--bg); }
.c-surface { color: var(--surface); }
.c-text { color: var(--text); }
.c-muted { color: var(--muted); }
.c-accent { color: var(--accent); }
.c-link { color: var(--link); }
.c-line { color: var(--line); }

/* Buttons: rund, Grossbuchstaben. Hauptbutton in der Farbe der Rolle «Link» mit Schrift in der Hintergrundfarbe */
.button {
  display: inline-block;
  padding: 0.55em 1.6em;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: background 0.2s, color 0.2s;
}
/* Menüpunkt als Button im Header (Header → «Als Button zeigen») */
.site-nav a.button {
  text-decoration: none;
}

/* Button mitten im Text (im Editor: Text markieren → «Button») */
.prose a.button {
  text-decoration: none;
  margin-block: 0.25em;
}

.button--primary {
  background: var(--link);
  border-color: var(--link);
  color: var(--bg);
}

.button--primary:hover {
  background: var(--bg);
  color: var(--link);
}

/* Nebenbutton mit Umriss in der Textfarbe, füllt sich beim Darüberfahren */
.button--secondary {
  background: transparent;
  border-color: var(--link);
  color: var(--link);
}

.button--secondary:hover {
  background: var(--link);
  color: var(--bg);
}

/* Block «Trennlinie» – Grundgerüst, Gestaltung folgt */
.divider {
  margin: 0;
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.25;
}
.w-normal > .divider { max-width: none; }

/* Trennlinie mit Favicon (Herz) in der Mitte: rundes Symbol wie das Bild im Testimonial, die Linie läuft dahinter */
.divider-icon {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 3.5rem;
}

.divider-icon .divider {
  width: 100%;
  grid-area: 1 / 1;
}

.divider-icon__img {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.8rem;
  box-sizing: border-box;
  background: var(--bg); /* deckt die Linie hinter dem Herz ab */
  position: relative;
  z-index: 1; /* über der Linie (die Linie ist halb durchsichtig und läge sonst obendrauf) */
  border: 0;
  cursor: pointer; /* Klick: nächster Block in die Bildschirmmitte */
  transition: transform 0.3s ease;
}

.divider-icon__img:hover,
.divider-icon__img:focus-visible {
  transform: scale(1.12);
}

.divider-icon__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateY(-2px); /* optisch mittig: die Herzspitze unten lässt es sonst tiefer wirken */
}


/* 3. Kopfzeile und Navigation ---------------------------------------- */

.site-header {
  position: relative;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line); /* feine Linie unter dem Header */
}

.header-sticky .site-header {
  position: sticky;
  top: 0;
  transition: transform 0.35s ease;
}

.header-sticky .site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header__inner {
  max-width: calc(var(--content-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 1.25rem var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto; /* Logo links, Menü rechts */
  align-items: center;
  gap: 1.5rem;
}

.logo {
  font-family: var(--h2-font);
  font-weight: var(--h2-weight);
  text-decoration: none;
  font-size: var(--h3-size);
  color: var(--accent);
  justify-self: start;
}

.logo__img {
  /* feste Höhe, Breite aus dem Seitenverhältnis: SVG-Logos ohne eigene Grösse wären sonst 0 px breit */
  display: block;
  height: 2.4rem;
  width: auto;
  max-width: 60vw;
}

.site-nav {
  display: contents;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-self: end;
}

/* Menüpunkte in der Akzentfarbe, beim Darüberfahren und auf der aktuellen Seite unterstrichen */
.site-nav a:not(.button) {
  color: var(--link);
  text-decoration: none;
}

.site-nav a:not(.button):hover,
.site-nav a[aria-current] {
  text-decoration: underline;
}

.lang-switch {
  justify-self: end;
  display: flex;
  gap: 0.75rem;
  grid-column: 3;
}

.lang-switch a {
  text-decoration: none;
  color: var(--muted);
}

.lang-switch a[aria-current] {
  color: var(--text);
}

.menu-toggle {
  display: none;
}

@media (max-width: 760px) {
  .site-header__inner {
    grid-template-columns: 1fr auto;
  }

  .menu-toggle {
    display: block;
    justify-self: end;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    position: relative;
  }

  .menu-toggle__lines,
  .menu-toggle__lines::before,
  .menu-toggle__lines::after {
    position: absolute;
    left: 25%;
    width: 50%;
    height: 2px;
    background: currentColor;
    transition: transform 0.3s, opacity 0.3s;
  }

  .menu-toggle__lines {
    top: 50%;
  }

  .menu-toggle__lines::before,
  .menu-toggle__lines::after {
    content: "";
    left: 0;
    width: 100%;
  }

  .menu-toggle__lines::before { transform: translateY(-7px); }
  .menu-toggle__lines::after { transform: translateY(7px); }

  .menu-open .menu-toggle__lines { background: transparent; }
  .menu-open .menu-toggle__lines::before { transform: rotate(45deg); background: currentColor; }
  .menu-open .menu-toggle__lines::after { transform: rotate(-45deg); background: currentColor; }

  .site-nav {
    display: block;
    position: fixed;
    inset: 0;
    top: 0;
    z-index: -1;
    background: var(--bg);
    padding: 6rem var(--gutter) 2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }

  .menu-open .site-nav {
    opacity: 1;
    visibility: visible;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0.75rem;
  }

  .site-nav ul a {
    font-family: var(--h2-font);
    font-weight: var(--h2-weight);
    font-size: var(--h2-size);
  }

  .lang-switch {
    margin-top: 2rem;
  }

  body.menu-open {
    overflow: hidden;
  }
}

/* 4. Seiten- und Projektkopf ----------------------------------------- */

.entry-head {
  padding-top: clamp(1.25rem, 3vw, 2.25rem); /* näher an der Kopfzeile: schneller beim Inhalt */
}

.entry-title {
  max-width: 18ch;
}

/* Projektseite: Titel über die ganze Inhaltsbreite; sehr lange Wörter brechen um, statt über den Rand zu ragen */
.entry--project .entry-title {
  max-width: none;
  overflow-wrap: break-word;
  hyphens: auto;
}

.entry-intro {
  max-width: 38ch;
  margin: 1.5rem 0 0;
}

/* Projektinfos als Band unter dem Titel: Bezeichnung über dem Wert, nebeneinander, ohne Linien.
   Schrift aus dem gewählten Textstil (Standard Caption).
   Auf dem Handy untereinander (siehe Mobile-Breite in design.php). */
/* Nächstes Projekt am Ende jeder Projektseite: kleine Zeile, darunter der Titel gross mit Pfeil, Linie nur unten
   (eine Linie darüber setzt Sarina bei Bedarf selbst mit dem Block «Trennlinie»).
   Mit Animationen zeichnet sich die Linie von rechts, sobald der Bereich zu sehen ist (site.js setzt «is-drawn»).
   Beim Darüberfahren rückt der Pfeil nach rechts. */
.next-project {
  max-width: calc(var(--content-width) + 2 * var(--gutter)); /* gleich breit wie «breite» Blöcke */
  margin: calc(var(--space-l) * 1.25) auto 0;
  padding-inline: var(--gutter);
}

.next-project__link {
  display: block;
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}

.js .anim .next-project__link {
  border-color: transparent;
  background: linear-gradient(var(--line), var(--line)) right bottom / calc(var(--draw) * 100%) 1px no-repeat;
  background-origin: border-box;
}

.js .anim .next-project.is-drawn .next-project__link {
  animation: contact-draw 1.2s cubic-bezier(0.45, 0, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .js .anim .next-project__link { border-color: var(--line); background: none; }
}

.next-project__label {
  display: block;
  margin-bottom: 0.5rem;
}

.next-project__title {
  display: block;
  margin: 0;
}

.next-project__arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.next-project__link:hover .next-project__arrow,
.next-project__link:focus-visible .next-project__arrow {
  transform: translateX(0.4em);
}

.entry-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-s) var(--space-m);
  margin: var(--space-m) 0 0;
}

.entry-meta > div {
  display: grid;
  gap: 0.2rem;
}

.entry-meta dt {
  font-weight: 600;
}

.entry-meta dd {
  margin: 0;
}

.hero {
  margin-bottom: 0;
}

/* Layout «Grosses Titelbild oben»: bildschirmbreit, leicht zugeschnitten (etwa 2:1, höchstens 75 % der Fensterhöhe) */
.hero__img {
  width: 100%;
  height: min(75vh, 50vw);
  object-fit: cover;
  object-position: var(--focus, 50% 50%); /* Bildmittelpunkt aus dem Editor (Layout → Titelbild) */
}

.layout-hero .entry-head {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}


/* 5. Blöcke ---------------------------------------------------------- */

.heading--xl { max-width: 20ch; }

/* Text-Block mit Überschrift: kleiner Abstand zwischen Titel und Text */
.block--text .heading + .prose {
  margin-top: 0.6em;
}
.align-center { text-align: center; margin-inline: auto; }

.prose > * {
  margin: 0;
}

.prose > * + * {
  margin-top: 1em;
}

.prose h4 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.prose h3 + *,
.prose h4 + * {
  margin-top: 0.5em;
}

.prose ul,
.prose ol {
  padding-left: 1.2em;
}

.prose blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 1em;
  color: var(--muted);
}

.w-narrow .prose,
.w-normal .prose {
  font-size: 1.05rem;
}

.media {
  margin: 0;
}

/* Parallax: grosse Einzelbilder (Bild, Bild + Text, Titelbild, Hero) liegen in einem Rahmen und bewegen sich
   darin beim Scrollen langsamer als die Seite. Das Bild ist dafür leicht vergrössert, damit nie eine Lücke
   entsteht. site.js setzt --par. Nur mit der Einstellung «Animationen», ohne «Bewegung reduzieren». */
.parallax {
  overflow: hidden;
  --par-zoom: 1.15; /* Vergrösserung; site.js verschiebt höchstens so weit, wie sie Platz lässt */
}

.hero-block__media.parallax {
  --par-zoom: 1.06; /* Hero: kaum gezoomt, damit das Foto fast ganz sichtbar bleibt */
}

.parallax > img {
  display: block;
}

.media .parallax {
  border-radius: var(--radius);
}

.w-full .media .parallax,
.media--screen .parallax {
  border-radius: 0;
}

.anim .parallax > img {
  transform: translateY(var(--par, 0px)) scale(var(--par-zoom));
}

@media (prefers-reduced-motion: reduce) {
  .anim .parallax > img { transform: none; }
}

.media img,
.media video {
  width: 100%;
  border-radius: var(--radius);
  background: var(--surface);
}

.media figcaption {
  margin-top: 0.75rem;
}

.w-full .media figcaption {
  padding-inline: var(--gutter);
}

.w-full .media img,
.w-full .media video {
  border-radius: 0;
}

.embed {
  position: relative;
  aspect-ratio: var(--embed-ratio, 16 / 9);
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Video-Block (YouTube, Vimeo, eigenes Video): gleich wie der Galerie-Slider – mittig, drei Viertel der Textbreite,
   Bildunterschrift klein und mittig darunter. «Randlos» (w-full) bleibt bildschirmbreit. */
.block--video.w-wide .media {
  max-width: calc(var(--text-width) * 0.75);
  margin-inline: auto;
}

.block--video.w-wide .media figcaption {
  margin-top: var(--space-s);
  text-align: center;
}

/* Hochformat und Quadrat: höchstens 70 % der Fensterhöhe, mittig (sonst würde ein Hochformat-Video sehr lang) */
.embed--tall {
  height: 70vh;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

/* Eigene Videos (Upload, MP4-Link) behalten ihr Format, sind aber höchstens 70 % der Fensterhöhe */
.media video {
  max-height: 70vh;
}

/* Figma-Vorschau (Block «Links»): volle Inhaltsbreite, höchstens 80 % der Fensterhöhe, Link darunter */
.figma-embed + .figma-embed,
.link-list + .figma-embed {
  margin-top: var(--space-m);
}

.figma-embed .embed {
  max-height: 80vh;
}

.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.image-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.image-text--right .media {
  order: 2;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
  align-items: start;
}

.gallery--2 { --cols: 2; }
.gallery--3 { --cols: 3; }
.gallery--4 { --cols: 4; }
.gallery--5 { --cols: 5; }
.gallery--6 { --cols: 6; }


/* Auf mittleren Bildschirmen (Tablet) höchstens 3 Spalten, damit die Quadrate nicht zu klein werden */
@media (max-width: 1100px) {
  .gallery--4,
  .gallery--5,
  .gallery--6 {
    --cols: 3;
  }
}

.gallery__item {
  display: block;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}

.gallery__item img {
  width: 100%;
  max-height: 70vh; /* Raster ohne Zuschneiden: hohe Bilder werden kleiner statt sehr lang */
  object-fit: contain;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s;
}

.gallery--crop .gallery__item img {
  aspect-ratio: 1;
  object-fit: cover;
}

/* Karussell «Alle Projekte»: Hochformat 4:5 wie im Spaltenwechsel, damit alles einheitlich wirkt */
.slider--projects.gallery--crop .gallery__item img,
.slider--projects .gallery__noimg {
  aspect-ratio: 4 / 5;
}

.gallery__item:hover img {
  transform: scale(1.03);
}

/* Galerie-Bild mit Link (Bildraster): feine Linie wie im Hero, beim Darüberfahren
   erscheint die Bildunterschrift auf einer Fläche in der Akzentfarbe */
.gallery__item--link {
  position: relative;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 0;
}

.gallery__item--link:hover img {
  transform: none;
}

.gallery__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-s);
  text-align: center;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--h3-font);
  font-size: var(--lead-size); /* etwas kleiner als H3, damit auch lange Titel gut ins Bild passen */
  line-height: 1.25;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery__item--link:hover .gallery__label,
.gallery__item--link:focus-visible .gallery__label {
  opacity: 1;
}

/* Galerie als Slider: ohne Rahmen, unten ‹ 1 / 3 ›. Bilder gleiten seitlich.
   Immer in der Mitte der Website, drei Viertel der Textbreite aus dem Manual; in Spalten so breit wie die Spalte. */
.slider {
  margin-inline: auto;
}

.slider--images,
.slider--videos {
  max-width: calc(var(--text-width) * 0.75);
}

/* Videos im Slider: füllen die Folie (Grösse kommt vom Slider) */
.block--video .slider--videos .media {
  max-width: none;
  margin: 0;
}

/* Videos im Hochformat: mehrere nebeneinander (wie Reels) – Desktop 3, Tablet 2, Handy eins mit Blick aufs nächste.
   Eine Folie ist höchstens so breit, dass das Video 70 % der Fensterhöhe hoch ist (--slide-w aus blocks.php). */
.slider--multi {
  --gap: var(--space-s);
}

.slider--videos.slider--multi {
  max-width: none;
}

.slider--multi .slider__track {
  gap: var(--gap);
}

.slider--multi .slider__slide {
  flex: 0 0 min(calc((100% - 2 * var(--gap)) / 3), var(--slide-w, 40vh));
}

/* Laufendes Projekt-Karussell: kein Einrasten, sonst würde das Band immer wieder zurückspringen */
.slider.is-running .slider__track {
  scroll-snap-type: none !important;
}

/* Wenige Videos: mittig statt links */
.slider--multi .slider__slide:first-child { margin-left: auto; }
.slider--multi .slider__slide:last-child { margin-right: auto; }

.slider--multi .embed--tall {
  height: auto;
  width: 100%;
}

/* «Alle Projekte» als Karussell: genau «pro Zeile» nebeneinander (Tablet höchstens 3, Handy 2) */
.slider--projects {
  position: relative;
  max-width: none;
}

/* Pfeile links und rechts am Rand, mittig in der Höhe der Bilder; Nummer ausgeblendet */
.slider--projects .slider__nav {
  padding: 0;
}

.slider--projects .slider__count,
.slider--videos .slider__count {
  display: none; /* Karussells ohne Nummer, nur Pfeile */
}

/* Gleicher Pfeil wie bei der Galerie (zwei feine Linien, ohne Kreis), nur seitlich neben den Bildern */
.slider--projects .slider__btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.slider--projects .slider__btn--prev { left: calc(-2.5rem - var(--space-s) * 0.25); }
.slider--projects .slider__btn--next { right: calc(-2.5rem - var(--space-s) * 0.25); }

/* Randlos (bis an den Bildschirmrand): Pfeile liegen auf den Bildern, auf heller Fläche */
.w-full .slider--projects .slider__btn--prev { left: 0; }
.w-full .slider--projects .slider__btn--next { right: 0; }
.w-full .slider--projects .slider__btn { background: var(--bg); }

/* Wenig Platz neben dem Karussell (Tablet, Handy): Pfeile auf den Bildrand, auf heller Fläche */
@media (max-width: 1100px) {
  .slider--projects .slider__btn--prev { left: 0; }
  .slider--projects .slider__btn--next { right: 0; }

  .slider--projects .slider__btn {
    background: var(--bg);
  }
}

.slider--projects.gallery--titles-below .slider__btn {
  top: calc(50% - 1rem); /* Titel unter dem Bild: Pfeile auf Bildhöhe */
}

/* Projekt-Karussell (z. B. auf Home): Bilder ohne Rahmen
   (doppelte Klasse, damit es auch gegen die Linie bei «Titel unter dem Bild» weiter unten gewinnt) */
.slider.slider--projects .gallery__item--link,
.slider.slider--projects .gallery__item--link img,
.slider.slider--projects .gallery__noimg {
  border: 0;
}

.slider--multi.slider--projects .slider__slide {
  flex: 0 0 calc((100% - (var(--per-row, 4) - 1) * var(--gap)) / var(--per-row, 4));
  margin: 0;
}

@media (max-width: 1100px) {
  .slider--multi.slider--projects .slider__slide {
    flex-basis: calc((100% - (min(var(--per-row, 4), 3) - 1) * var(--gap)) / min(var(--per-row, 4), 3));
  }
}

@media (max-width: 760px) {
  .slider--multi.slider--projects .slider__slide {
    flex-basis: calc((100% - var(--gap)) / 2);
  }
}

@media (max-width: 1100px) {
  .slider--multi .slider__slide {
    flex-basis: min(calc((100% - var(--gap)) / 2), var(--slide-w, 40vh));
  }
}

@media (max-width: 760px) {
  .slider--multi .slider__slide {
    flex-basis: 80%;
  }
}

.block-row .slider {
  max-width: none;
}

.slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.slider__track::-webkit-scrollbar {
  display: none;
}

.slider__track:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: -2px;
}

.slider__slide {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
}

.slider--images .slider__slide {
  cursor: pointer;
}

/* Testimonials im Slider: 1px Rand innen, damit die Linie nicht abgeschnitten wird */
.slider__slide > .testimonial {
  margin-inline: 1px;
}

/* Bild immer ganz sichtbar (nicht zugeschnitten), in einer gleich grossen Fläche,
   höchstens 70 % der Fensterhöhe, damit auch Hochformate kompakt bleiben */
.slider__slide img {
  display: block;
  width: 100%;
  aspect-ratio: var(--slide-ratio, 1 / 1);
  max-height: 70vh;
  object-fit: contain;
}

.slider__caption {
  padding: var(--space-s) var(--space-s) 0;
  text-align: center;
}

.slider__nav[hidden] {
  display: none;
}

.slider__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-s);
}

.slider__count {
  font-family: var(--caption-font);
  font-size: var(--caption-size);
  color: var(--text);
  min-width: 4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Pfeile aus zwei feinen Linien, wie beim Auf- und Zuklappen */
.slider__btn {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
}

.slider__btn::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.slider__btn--prev::before { transform: translateX(15%) rotate(135deg); }
.slider__btn--next::before { transform: translateX(-15%) rotate(-45deg); }

.slider__btn:hover {
  color: var(--link);
}

@media (prefers-reduced-motion: reduce) {
  .slider__track { scroll-behavior: auto; }
}

/* Block «Alle Projekte»: Projekt ohne Bild bekommt eine leere quadratische Fläche */
.gallery__noimg {
  display: block;
  aspect-ratio: 1;
  background: var(--surface);
}

/* «Alle Projekte» mit Titel immer unter dem Bild: keine Linie ums Ganze, Linie nur ums Bild */
.gallery--titles-below .gallery__item--link {
  border: 0;
  background: none;
  text-decoration: none; /* Projekttitel unter dem Bild ohne Unterstreichung */
}

.gallery__item--link {
  text-decoration: none;
}

.gallery--titles-below .gallery__item--link img,
.gallery--titles-below .gallery__noimg {
  border: 1px solid var(--line);
}

.gallery--titles-below .gallery__label {
  position: static;
  display: block;
  padding: var(--space-s) 0 0;
  text-align: left;
  background: none;
  color: var(--text);
  opacity: 1;
}

.gallery--titles-below .gallery__item--link:hover .gallery__label {
  color: var(--link);
}




@media (max-width: 760px) {
  .image-text {
    grid-template-columns: 1fr;
  }

  .image-text--right .media {
    order: 0;
  }

  .gallery--3,
  .gallery--4,
  .gallery--5,
  .gallery--6 {
    --cols: 2;
  }

}

/* Block «Hero»: Bild über rund 60 % der Breite (bis an den Bildschirmrand), daneben eine farbige Box,
   die über den Bildrand ragt. Feine Linien und Farben aus dem Corporate Design Manual. */
.blocks > .block--hero:first-child {
  margin-top: 0; /* direkt unter dem Header */
}

.hero-block {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
}

.hero-block__media {
  margin: 0;
  border-right: 1px solid var(--line);
}

/* Bild etwa quadratisch, wächst und schrumpft mit der Breite (Handy bis Desktop),
   höchstens so hoch wie das Fenster */
.hero-block__img {
  display: block; /* kein kleiner Abstand unter dem Bild */
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: var(--hero-fit, calc(100vh - 6rem)); /* zuoberst: bis zum unteren Bildschirmrand (site.js) */
  object-fit: cover;
}

.hero-block__box {
  position: relative;
  z-index: 1;
  margin-left: -25%;           /* ragt über den Bildrand */
  margin-right: var(--gutter);
  /* grosszügiger Leerraum, wächst mit der Breite */
  padding: clamp(1.75rem, 7vw, calc(var(--space-l) * 1.25)) clamp(1.25rem, 4.5vw, var(--space-l));
  background: var(--block-bg);
  text-align: center;
}

/* Text wächst und schrumpft mit der Fensterbreite, im gleichen Verhältnis wie das Bild.
   Die Grössen aus dem Corporate Design Manual sind die Obergrenze. */
.hero-block__title {
  margin: 0;
  font-size: min(var(--h1-size), 4.2vw);
}

.hero-block__subtitle {
  margin: clamp(0.75rem, 2vw, var(--space-s)) 0 0;
  font-size: clamp(0.7rem, 1.3vw, var(--body-size));
}

.hero-block__button {
  margin-top: clamp(1.25rem, 3.5vw, var(--space-m));
  font-size: clamp(0.65rem, 1.2vw, var(--body-size));
}

/* Button im Hero: dunkel (Textfarbe) mit heller Schrift, beim Darüberfahren hell mit dunkler Schrift.
   Unabhängig von der Farbe «Link», damit er auf der farbigen Box immer gut sichtbar ist. */
.hero-block .hero-block__button {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.hero-block .hero-block__button:hover,
.hero-block .hero-block__button:focus-visible {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--text);
}

/* Startseite: Herz-Intro bei jedem Laden, dann Hero
   1. Leere Seite, das Herz erscheint in der Mitte und atmet einmal (reines CSS, läuft auch ohne Skript ab).
   2. Das Intro blendet aus. Mit dem Scrollen schieben sich Bild und Box versetzt von links und rechts herein
      (siehe «Bild und Box» unten). */
.home-intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--bg);
  cursor: pointer; /* Klick überspringt das Intro */
  animation: home-intro-out 0.35s ease 0.8s forwards;
}

.home-intro.is-leaving {
  animation: home-intro-out 0.3s ease forwards;
}

.home-intro__heart {
  width: 3.5rem;
  height: auto;
  animation: home-heart 1.1s cubic-bezier(0.45, 0, 0.55, 1) both;
}

/* Atmen: erscheint, wird einmal langsam etwas grösser und wieder kleiner (kein Schlag) */
@keyframes home-heart {
  0% { opacity: 0; transform: scale(0.97); }
  30% { opacity: 1; }
  55% { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes home-intro-out {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Hero mit «Animation» (Einstellung im Hero-Block):
   1. Beim Laden gleiten Bild und Box als Bänder herein wie beim Spaltenwechsel, aber seitlich:
      das Bild von links, die Box leicht danach von rechts (auf Home erst nach dem Herz-Intro).
      Dafür «translate», damit es sich nicht mit dem Parallax («transform») in die Quere kommt.
   2. Beim Scrollen: Parallax (siehe «Parallax»), die Box gleitet etwas schneller und schwebt so vor dem Bild.
      site.js setzt --par-box. */
.anim .block--hero {
  overflow-x: clip; /* Kante, hinter der die Bänder hervorkommen */
}

/* Start eine ganze Bildschirmbreite daneben: sicher ganz draussen, auch mit Seitenrand (Handy) */
@keyframes hero-band {
  from { translate: calc(100vw * var(--from, -1)) 0; }
  to { translate: none; }
}

.anim .hero-block--parallax .hero-block__media,
.anim .hero-block--parallax .hero-block__box {
  animation: hero-band 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) var(--hero-delay, 0s) both;
}

.anim .hero-block--parallax .hero-block__box {
  --from: 1;
  animation-delay: calc(var(--hero-delay, 0s) + 0.1s);
}

/* Bild rechts: Richtungen umgekehrt */
.anim .hero-block--parallax.hero-block--image-right .hero-block__media { --from: 1; }
.anim .hero-block--parallax.hero-block--image-right .hero-block__box { --from: -1; }

/* Startseite: erst nach dem Herz-Intro */
.home-intro ~ .site-main {
  --hero-delay: 0.9s;
}

.anim .hero-block--parallax .hero-block__box {
  transform: translateY(var(--par-box, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .anim .hero-block--parallax .hero-block__media,
  .anim .hero-block--parallax .hero-block__box { animation: none; transform: none; }
}

/* Bild rechts: Box links, ragt nach rechts über das Bild */
.hero-block--image-right {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.hero-block--image-right .hero-block__media {
  order: 2;
  border-right: 0;
  border-left: 1px solid var(--line);
}

.hero-block--image-right .hero-block__box {
  margin-left: var(--gutter);
  margin-right: -25%;
}

/* Handy: Bild in voller Breite (Hochformat 4:5), die Box darunter überlappt es leicht, mit Rand zum Bildschirm.
   Grössere Schrift, und die Box schwebt hier nicht (kein Parallax), damit alles kompakt beisammen bleibt. */
@media (max-width: 800px) {
  .hero-block,
  .hero-block--image-right {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-block__media,
  .hero-block--image-right .hero-block__media {
    order: 0;
    border: 0;
  }

  .hero-block__img {
    aspect-ratio: 4 / 5;
    max-height: 70svh;
  }

  .hero-block__box,
  .hero-block--image-right .hero-block__box {
    margin: -3rem var(--gutter) 0;
    padding: var(--space-m) var(--space-s);
  }

  .hero-block__title {
    font-size: min(var(--h1-size), 10vw);
  }

  .hero-block__subtitle {
    margin-top: var(--space-s);
    font-size: var(--body-size);
  }

  .hero-block__button {
    margin-top: var(--space-m);
    font-size: var(--body-size);
  }

  .anim .hero-block--parallax .hero-block__box {
    transform: none;
  }
}

/* Block «Testimonial»: Kasten mit feiner Linie in der Textfarbe, mittig auf der Seite.
   Das runde Foto sitzt mittig auf der oberen Linie, darunter Zitat und Name, alles zentriert. */
.testimonial {
  --photo: clamp(5.5rem, 12vw, 8.5rem);
  position: relative;
  max-width: var(--text-width);
  margin: 0 auto;
  padding: var(--space-m) clamp(var(--space-s), 5vw, var(--space-l));
  border: 1px solid var(--line);
  text-align: center;
}

/* Mehr Abstand zum Block davor, damit der Kreis nicht am vorherigen Inhalt klebt
   (gilt nicht, wenn im Block «Abstand oben» gewählt ist) */
.block + .block--testimonial:not([class*="pt-"]),
.block-row + .block--testimonial:not([class*="pt-"]) {
  margin-top: calc(var(--space-m) * 1.25 + var(--space-m)); /* deutlich Luft, damit das runde Bild nicht an die Linie davor stösst */
}

/* Platz oben für die halbe Fotohöhe */
.testimonial--photo {
  margin-top: calc(var(--photo) / 2);
  padding-top: calc(var(--photo) / 2 + var(--space-s));
}

.testimonial__img {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--photo);
  height: var(--photo);
  transform: translate(-50%, -50%);
  object-fit: cover;
  border-radius: 50%;
  background: var(--bg);
}

/* Logo im Kreis: ganz zeigen, mit etwas Luft zum Rand, auf der Hintergrundfarbe */
.testimonial__img--logo {
  object-fit: contain;
  padding: 14%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--line);
}

/* Testimonial beim ersten Erscheinen (site.js setzt «testimonial--draw», dann «is-drawn», und --split):
   Rahmen zeichnet sich wie im Kontaktformular, Foto und Zitat blenden nacheinander ein */
.anim .testimonial--draw {
  border-color: transparent;
  background:
    linear-gradient(var(--line), var(--line)) left top no-repeat,     /* oben: von links nach rechts */
    linear-gradient(var(--line), var(--line)) right top no-repeat,    /* rechts: von oben nach unten */
    linear-gradient(var(--line), var(--line)) left top no-repeat,     /* links: von oben nach unten */
    linear-gradient(var(--line), var(--line)) left bottom no-repeat;  /* unten: von links nach rechts */
  background-origin: border-box;
  background-size:
    calc(clamp(0, var(--draw) / var(--split, 0.6), 1) * 100%) 1px,
    1px calc(clamp(0, (var(--draw) - var(--split, 0.6)) / (1 - var(--split, 0.6)), 1) * 100%),
    1px calc(clamp(0, var(--draw) / (1 - var(--split, 0.6)), 1) * 100%),
    calc(clamp(0, (var(--draw) - (1 - var(--split, 0.6))) / var(--split, 0.6), 1) * 100%) 1px;
}

.anim .testimonial--draw.is-drawn {
  animation: contact-draw 1.8s cubic-bezier(0.45, 0, 0.2, 1) both;
}

.anim .testimonial--draw .testimonial__img {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.9s ease 0.2s, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
}

.anim .testimonial--draw.is-drawn .testimonial__img {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.anim .testimonial--draw .testimonial__quote,
.anim .testimonial--draw .testimonial__author {
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.anim .testimonial--draw.is-drawn .testimonial__quote {
  opacity: 1;
  transform: none;
  transition-delay: 0.7s;
}

.anim .testimonial--draw.is-drawn .testimonial__author {
  opacity: 1;
  transform: none;
  transition-delay: 0.95s;
}

.testimonial__quote {
  margin: 0;
  /* Grosse Anführungszeichen links und rechts vom Zitat, auf halber Höhe */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.5rem, 2vw, var(--space-s));
}

.testimonial__quote::before,
.testimonial__quote::after {
  font-family: var(--h1-font);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 0.6;
  color: var(--accent);
  align-self: center;
  transform: translateY(0.12em);
}

.testimonial__quote::before { content: "\201C"; } /* “ */
.testimonial__quote::after { content: "\201D"; }  /* ” */

.testimonial__quote p {
  margin: 0;
}

.testimonial__author {
  display: grid;
  gap: 0.2rem;
  margin-top: var(--space-s);
}

.testimonial__name {
  font-weight: 600;
}

.testimonial__project {
  margin-top: 0.3rem;
}

/* Collage («Alle Projekte» → Collage): ruhige Spalten nebeneinander, ohne Bewegung.
   Beim Darüberfahren wird ein Bild höher (4:5), die anderen in der Spalte rutschen nach. */
.collage {
  --gap: clamp(0.5rem, 1vw, 0.9rem); /* Abstand zwischen den Bildern: etwas Luft */
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: var(--gap);
}

/* Ganz leichter Rand: auch bei «ganze Breite» ein schmaler Abstand zum Bildschirmrand (so gross wie zwischen den Bildern) */
.w-full .collage {
  padding-inline: var(--gap);
}

/* Beim Laden: Die Spalten fliegen von selbst als Bänder ein, abwechselnd von unten und von oben, leicht nacheinander.
   Danach steht alles still. Reines CSS, damit nichts aufblitzt (--i = Spaltennummer aus blocks.php). */
.anim .collage {
  overflow: hidden;
}

@keyframes collage-band {
  from { transform: translateY(calc(105% * var(--dir, 1))); }
  to { transform: none; }
}

.anim .collage__col {
  animation: collage-band 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 0.1s);
}

.anim .collage__col:nth-child(even) {
  --dir: -1;
}

/* Desktop mit Spaltenwechsel: die ruhige Grundform aus blocks.php nicht kurz zeigen und einfliegen lassen,
   bevor site.js die Spur aufbaut (sonst startet das Einfliegen zweimal und ruckelt).
   Sicherheitsnetz: läuft kein Skript, erscheint die Grundform nach 2 Sekunden trotzdem. */
@keyframes collage-safety {
  to { visibility: visible; }
}

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .anim .collage:not(.collage--slalom) {
    visibility: hidden;
    animation: collage-safety 0s 2s forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anim .collage__col { animation: none; }
}

.collage__col {
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 4 / calc(3 * var(--n, 1));
}

/* Spur im Slalom (site.js): eine Spur mit allen Kacheln läuft durch die Spalten, abwechselnd nach unten und nach oben.
   site.js setzt Höhe der Spalten und Position jeder Kachel; die Box wird länger, wenn ein Bild beim Darüberfahren wächst. */
.collage--slalom .collage__col {
  position: relative;
  aspect-ratio: auto;
}

.collage--slalom .collage__item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: none;
  will-change: transform;
}

/* Filter wechseln: Spur kurz ausblenden */
.collage--slalom {
  transition: opacity 0.3s ease;
}

.collage.is-switching {
  opacity: 0;
}

/* Filter: kleiner Knopf «Filter» mit Burger-Symbol, rechtsbündig (site.js setzt ihn auf die Trennlinie, «has-filter»).
   Er öffnet eine Seitenleiste, die von rechts hereingleitet; die Seite dahinter wird leicht abgedunkelt.
   Darin Kategorie, Kunde und Jahr untereinander zum Ankreuzen; jedes Häkchen filtert sofort.
   site.js hängt die Leiste ans Ende der Seite und setzt «is-open». */
.project-filter {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-s);
  font-family: var(--body-font);
  font-size: var(--caption-size, 0.85rem);
}

.project-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text);
  cursor: pointer;
}

.project-filter__icon {
  width: 1em;
  height: 0.75em;
}

.project-filter__drawer {
  position: fixed;
  inset: 0;
  z-index: 400;
  font-family: var(--body-font);
}

.project-filter__drawer[hidden] {
  display: none;
}

.project-filter__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--text) 35%, transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.project-filter__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(100%, 26rem);
  background: var(--bg);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.project-filter__drawer.is-open .project-filter__backdrop { opacity: 1; }
.project-filter__drawer.is-open .project-filter__panel { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .project-filter__backdrop,
  .project-filter__panel { transition: none; }
}

.project-filter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--space-m) var(--gutter) var(--space-s);
}

.project-filter__title {
  margin: 0;
}

.project-filter__close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0.45rem;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
}

.project-filter__close svg {
  width: 100%;
  height: 100%;
}

/* Inhalt scrollt, Kopf und Knöpfe unten bleiben stehen */
.project-filter__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--gutter) var(--space-m);
}

.project-filter__group {
  margin: 0;
  padding: var(--space-s) 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.project-filter__group + .project-filter__group {
  margin-top: var(--space-s);
}

.project-filter__legend {
  float: left; /* damit die Linie der Gruppe oben über dem Namen bleibt */
  width: 100%;
  margin-bottom: 0.9rem;
  padding: 0;
  font-size: var(--caption-size, 0.85rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-filter__check {
  clear: left;
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.35rem 0;
  cursor: pointer;
}

/* Ankreuzen im Stil der Website: feines Quadrat in der Textfarbe, angekreuzt gefüllt in der Akzentfarbe */
.project-filter__check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1em;
  height: 1em;
  margin: 0;
  border: 1px solid var(--text);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.project-filter__check input:checked {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--bg); /* schmaler heller Rand innen */
}

.project-filter__check input:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.project-filter__check:hover span {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.project-filter__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--space-s) var(--gutter) var(--space-m);
  border-top: 1px solid var(--line);
}

.project-filter__reset {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  cursor: pointer;
}

/* Anzahl Projekte: klein, links (auf der Trennlinie gegenüber dem Filter) */
.project-count {
  margin: 0 0 var(--space-s);
  font-family: var(--body-font);
  font-size: var(--caption-size, 0.85rem);
  color: var(--text);
}

/* Infozeile auf der Trennlinie: links «Animation anhalten», rechts «11 Projekte · Filter» */
.divider-icon.has-filter .project-meta,
.divider-icon.has-filter .collage-pause {
  position: absolute;
  bottom: calc(50% + 0.6rem); /* knapp über der Linie */
  margin: 0;
}

.divider-icon.has-filter .project-meta { right: 0; }
.divider-icon.has-filter .collage-pause { left: 0; }

.project-meta {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
}

.project-meta .project-count,
.project-meta .project-filter { margin: 0; }

.project-meta .project-count + .project-filter::before {
  content: "·";
  margin-right: 0.6em;
}

/* Knopf «Animation anhalten / abspielen»: gleich klein und schlicht wie der Filter, Symbol vor dem Text */
.collage-pause {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--space-s);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--body-font);
  font-size: var(--caption-size, 0.85rem);
  color: var(--text);
  cursor: pointer;
}

.collage-pause svg {
  width: 0.8em;
  height: 0.8em;
}

.collage-pause:hover span {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Eigener Text auf der Linie: links ein kurzer Text, rechts ein Link (gleich klein wie Anzahl und Filter) */
.divider-text {
  position: absolute;
  bottom: calc(50% + 0.6rem);
  font-family: var(--body-font);
  font-size: var(--caption-size, 0.85rem);
  color: var(--text);
}

.divider-icon--plain .divider-text {
  bottom: 0.6rem;
}

.divider-text--left { left: 0; }
.divider-text--right { right: 0; }

.divider-link {
  text-decoration: none;
}

.divider-link:hover,
.divider-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

@media (max-width: 760px) {
  .divider-text {
    bottom: auto;
    top: calc(50% + 0.6rem); /* Handy: unter der Linie */
  }
}

.divider-icon--plain {
  display: block;
  min-height: 0;
}

.divider-icon--plain.has-filter .project-meta,
.divider-icon--plain.has-filter .collage-pause {
  bottom: 0.6rem;
}

/* Handy: Infozeile unter der Linie, damit sie nicht mit dem Herz zusammenstösst (rechts Anzahl und Filter) */
@media (max-width: 760px) {
  .divider-icon.has-filter .project-meta,
  .divider-icon.has-filter .collage-pause {
    bottom: auto;
    top: calc(50% + 0.6rem);
  }
}

/* Liste der Projektlinks für Screenreader und Tastatur (die Bilder wandern); sichtbar, sobald man mit Tab hineinkommt */
.collage__a11y:focus-within {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  white-space: normal;
  grid-column: 1 / -1;
  margin: var(--space-s) 0 0;
}

.collage__track {
  /* Feste Höhe: im Schnitt n Kacheln im Querformat 4:3 (durch das Versetzen sind einzelne höher, andere flacher).
     Wird eine Kachel grösser, werden die anderen derselben Spalte kleiner – die Collage bleibt ein sauberes Rechteck. */
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  aspect-ratio: 4 / calc(3 * var(--n, 1));
}

.collage__item {
  position: relative;
  display: block;
  flex: var(--g, 1) 1 0;
  min-height: 0;
  overflow: hidden;
  color: var(--bg);
  text-decoration: none;
  transition: flex-grow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Versetzt wie eine Collage: In jeder Spalte sind die Bilder unterschiedlich hoch (Gewicht --g),
   jede Spalte mit eigenem Muster. Die Spalte selbst bleibt gleich hoch. */
.collage__col:nth-child(4n+1) .collage__item:nth-child(3n+1) { --g: 0.8; }
.collage__col:nth-child(4n+1) .collage__item:nth-child(3n+2) { --g: 1.3; }
.collage__col:nth-child(4n+1) .collage__item:nth-child(3n+3) { --g: 0.9; }
.collage__col:nth-child(4n+2) .collage__item:nth-child(3n+1) { --g: 1.25; }
.collage__col:nth-child(4n+2) .collage__item:nth-child(3n+2) { --g: 0.8; }
.collage__col:nth-child(4n+2) .collage__item:nth-child(3n+3) { --g: 0.95; }
.collage__col:nth-child(4n+3) .collage__item:nth-child(3n+1) { --g: 0.95; }
.collage__col:nth-child(4n+3) .collage__item:nth-child(3n+2) { --g: 1.15; }
.collage__col:nth-child(4n+3) .collage__item:nth-child(3n+3) { --g: 0.8; }
.collage__col:nth-child(4n+4) .collage__item:nth-child(3n+1) { --g: 1.1; }
.collage__col:nth-child(4n+4) .collage__item:nth-child(3n+2) { --g: 0.85; }
.collage__col:nth-child(4n+4) .collage__item:nth-child(3n+3) { --g: 1.15; }

/* Beim Darüberfahren rund 1.25-mal so hoch (dezent, bleibt leicht quer), die anderen derselben Spalte geben den Platz ab */
.collage__item:hover,
.collage__item:focus-visible {
  flex-grow: calc(var(--g, 1) * 1.25);
}

.collage__media {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--surface);
}

.collage__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kachel «Dein Projekt? Schreib mir» in der Akzentfarbe (danach geht es mit den ersten Projekten weiter) */
.collage__item--cta {
  /* Fläche in der Akzentfarbe (Terracotta), Text in der Hintergrundfarbe */
  background: var(--accent);
  color: var(--bg);
}

.collage__cta {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.3rem;
  padding: var(--space-s);
  text-align: center;
  font-family: var(--h3-font);
  font-size: var(--lead-size);
  font-weight: var(--h3-weight);
  line-height: 1.2;
}

.collage__cta span {
  font-family: var(--body-font);
  font-size: var(--caption-size, 0.9rem);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.collage__item--cta:hover,
.collage__item--cta:focus-visible {
  color: var(--bg);
}

/* Beim Darüberfahren: ganze Fläche in der Akzentfarbe (deckend), darauf der Projektname */
.collage__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.collage__label {
  position: absolute;
  inset: 0; /* über die ganze Kachel, Name mittig */
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.2rem;
  padding: var(--space-s);
  font-family: var(--caption-font);
  font-size: var(--caption-size);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.collage__label strong {
  font-family: var(--h3-font);
  font-size: var(--lead-size);
  font-weight: var(--h3-weight);
  line-height: 1.2;
}

/* Unter dem Titel klein: Kategorie · Jahr */
.collage__meta {
  font-family: var(--body-font);
  font-size: var(--caption-size, 0.85rem);
  opacity: 0.85;
}


.collage__item:hover .collage__media::after,
.collage__item:focus-visible .collage__media::after {
  opacity: 1;
}

.collage__item:hover .collage__label,
.collage__item:focus-visible .collage__label {
  color: var(--bg); /* sonst nimmt der Link beim Darüberfahren die Farbe «Link» an – gleich wie die Fläche */
  opacity: 1;
  transform: none;
}

@media (max-width: 760px) {
  .collage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/* Block «Tools»: Logo einfarbig in der Textfarbe (Logo-Form als Maske), Name darunter, alle Logos gleich hoch */
.tool {
  display: grid;
  justify-items: center;
  gap: var(--space-s);
  padding: var(--space-s) 0;
  color: var(--text);
  text-decoration: none;
}

.tool__logo {
  display: block;
  width: 100%;
  height: clamp(2.5rem, 5vw, 3.5rem);
  background-color: var(--text);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  transition: background-color 0.2s;
}

.tool__name {
  font-family: var(--caption-font);
  font-size: var(--caption-size);
  text-align: center;
}

a.tool:hover .tool__logo,
a.tool:hover .tool__name {
  background-color: var(--link);
  color: var(--link);
}

a.tool:hover .tool__name {
  background-color: transparent;
}

/* Tools als Raster: so viele pro Zeile wie gewählt, 2 bis 10 (Tablet höchstens 4, Handy höchstens 3) */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(var(--per-row, 6), minmax(0, 1fr));
  gap: var(--space-s);
}

@media (max-width: 1100px) {
  .tools-grid { grid-template-columns: repeat(min(var(--per-row, 6), 4), minmax(0, 1fr)); }
  .slider--multi.slider--tools .slider__slide { flex-basis: calc((100% - 3 * var(--gap)) / 4); }

  /* Wenig Platz: Pfeile unter den Logos, damit sie Logos und Namen nicht überdecken */
  .slider--projects.slider--tools .slider__nav { padding-top: var(--space-s); }

  .slider--projects.slider--tools .slider__btn {
    position: static;
    transform: none;
    background: none;
  }
}

@media (max-width: 760px) {
  .tools-grid { grid-template-columns: repeat(min(var(--per-row, 6), 3), minmax(0, 1fr)); }
  .slider--multi.slider--tools .slider__slide { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
}

/* Kontaktformular: Felder mit feiner Linie in der Farbe «Linie», Schrift wie Fliesstext */
.contact {
  display: grid;
  gap: calc(var(--space-s) * 0.75); /* kompakt, damit das ganze Formular auf den Desktop-Bildschirm passt */
  margin-top: calc(var(--space-s) * 0.75);
}

.contact__intro {
  margin: var(--space-s) 0 0;
}

.contact__field {
  display: grid;
  gap: 0.35rem;
  font-family: var(--caption-font);
  font-size: var(--caption-size);
  color: var(--text);
}

.contact__field input,
.contact__field textarea {
  width: 100%;
  font-family: var(--body-font);
  font-size: var(--body-size);
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.55em 0.8em;
}

.contact__field textarea {
  resize: vertical;
  min-height: 6rem;
}

/* Beispieltext in den Feldern: Textfarbe, aber deutlich heller, damit er nicht wie ausgefüllt wirkt */
.contact__field input::placeholder,
.contact__field textarea::placeholder {
  color: var(--text);
  opacity: 0.45;
}

.contact__field input:focus,
.contact__field textarea:focus {
  outline: 2px solid var(--link);
  outline-offset: 1px;
}

/* Spam-Falle: für Menschen unsichtbar */
.contact__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}

.contact__actions .button[disabled] {
  opacity: 0.6;
  cursor: wait;
}

.contact__status {
  margin: 0;
  font-family: var(--caption-font);
  font-size: var(--caption-size);
}

.contact__status.is-error {
  color: var(--link);
}

/* Text aufklappbar: Überschrift mit Pfeil (zu: nach unten, offen: nach oben), nur eine feine Linie darunter (ruhiger).
   Stehen mehrere untereinander, rücken sie ohne Abstand zusammen, auch in Spalten und auf dem Handy. */
.text-toggle {
  /* Linie als Hintergrund gezeichnet: so kann sie beim Scrollen von links nach rechts wachsen (Animationen)
     und beim Aufklappen zum kurzen Strich werden */
  --line-w: 100%;
  padding-bottom: 1px;
  background: linear-gradient(var(--line), var(--line)) left bottom / var(--line-w) 1px no-repeat;
  transition: background-size 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Zugeklappt: ganze Linie. Aufgeklappt: statt der ganzen Linie ein kurzer Strich (ein Neuntel lang) unter dem Text. */
.text-toggle[open] {
  --line-w: 11.111%; /* ein Neuntel (ein Drittel von einem Drittel) */
}

.block:has(> .text-toggle) + .block:has(> .text-toggle),
.block-row:has(> .block:last-child > .text-toggle) + .block:has(> .text-toggle),
.block:has(> .text-toggle) + .block-row:has(> .block:first-child > .text-toggle),
.block-row:has(> .block:last-child > .text-toggle) + .block-row:has(> .block:first-child > .text-toggle) {
  margin-top: 0;
}

/* Linien so breit wie der Inhalt (gleiche rechte Kante wie Blöcke in Spalten),
   der geöffnete Text bleibt in der gut lesbaren Textbreite */
.w-normal > .text-toggle {
  max-width: none;
}

.text-toggle .prose {
  max-width: var(--text-width);
}

/* In Spalten: kein Abstand zwischen den Zeilen, sonst entstehen doppelte Linien mit Lücke */
.block-row:has(> .block > .text-toggle) {
  row-gap: 0;
}

.text-toggle summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) 0;
  cursor: pointer;
  list-style: none;
}

.text-toggle summary::-webkit-details-marker {
  display: none;
}

.text-toggle summary .heading,
.text-toggle__head .heading {
  margin: 0;
}

/* Aufklappbarer Text ohne Inhalt (noch nicht ausgefüllt): gleiche Höhe und Linie, kein Pfeil */
.text-toggle__head {
  padding: var(--space-s) 0;
}

/* Pfeil aus zwei feinen Linien, Grösse wie H3 */
.text-toggle summary::after {
  content: "";
  flex: none;
  width: calc(var(--h3-size) * 0.45);
  height: calc(var(--h3-size) * 0.45);
  margin-right: 0.3em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.2s ease;
}

.text-toggle[open] summary::after {
  transform: translateY(25%) rotate(-135deg);
}

.text-toggle summary:hover .heading,
.text-toggle summary:hover::after {
  color: var(--link);
}

.text-toggle .prose {
  padding-bottom: var(--space-m);
}

/* Animationen beim Scrollen (Einstellungen → Animationen). site.js gibt Blöcken die Klasse «reveal»
   und beim Erscheinen «is-in». Ohne JavaScript bleibt alles normal sichtbar. */
.anim .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.anim .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Bevor site.js die Blöcke vorbereitet hat, sind sie schon unsichtbar, damit nichts kurz aufblitzt und wieder
   verschwindet. early.js setzt «js» im <head>, site.js danach «reveal-ready». Hero und Collage haben eigene
   Animationen. Sicherheitsnetz: Klappt etwas nicht, ist nach 3 Sekunden alles sichtbar. */
.js:not(.reveal-ready) .anim :is(.entry-head, .blocks > .block, .block-row > .block, .entry-meta, .site-footer):not(.no-anim):not(:has(.hero-block--parallax, [data-collage])) {
  opacity: 0;
  animation: reveal-safety 0s 3s forwards;
}

@keyframes reveal-safety {
  to { opacity: 1; }
}

/* Bild + Text: statt einzublenden gleiten Bild und Text als Bänder herein, sobald der Block erscheint
   (wie der Hero): das Bild von seiner Seite, der Text leicht danach von der anderen. «translate», damit
   es sich nicht mit dem Parallax des Bildes in die Quere kommt. */
.anim {
  overflow-x: clip; /* nichts ragt beim Hereingleiten seitlich aus der Seite */
}

.anim .block--image_text.reveal {
  opacity: 1;
  transform: none;
}

.anim .block--image_text.reveal .image-text > * {
  --from: -1;
  translate: calc(100vw * var(--from)) 0; /* wartet ganz draussen, bis der Block erscheint */
}

.anim .block--image_text.reveal .image-text > .prose { --from: 1; }
.anim .block--image_text.reveal .image-text--right > .media { --from: 1; }
.anim .block--image_text.reveal .image-text--right > .prose { --from: -1; }

/* Gleiche Bewegung wie beim Hero (hero-band) */
.anim .block--image_text.reveal.is-in .image-text > * {
  animation: hero-band 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.anim .block--image_text.reveal.is-in .image-text > .prose {
  animation-delay: 0.1s;
}

/* Linien zeichnen sich beim Scrollen: so lang, wie weit man gescrollt hat (site.js setzt --line-p von 0 bis 1).
   Aufgeklappte Texte behalten ihren kurzen Strich. */
.anim.lines-scroll .text-toggle:not([open]) {
  --line-w: calc(var(--line-p, 1) * 100%);
  transition: background-size 0.15s linear;
}

.anim.lines-scroll .site-footer {
  border-top-color: transparent;
  background: linear-gradient(var(--accent), var(--accent)) left top / calc(var(--line-p, 1) * 100%) 1px no-repeat;
}

/* Kontaktformular: Der Rahmen jedes Feldes zeichnet sich von selbst, sobald das Formular zu sehen ist.
   Zwei Striche starten oben links: einer oben entlang und dann rechts hinunter, der andere links hinunter und dann
   unten entlang. Sie treffen sich unten rechts, weich abgebremst. Die Felder starten leicht versetzt.
   site.js setzt «contact--draw», beim Erscheinen «is-drawn», pro Feld --draw-delay und --split
   (Anteil der Breite am halben Umfang, damit beide Striche gleichmässig schnell laufen). --draw läuft von 0 bis 1. */
@property --draw {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@keyframes contact-draw {
  from { --draw: 0; }
  to { --draw: 1; }
}

.anim .contact--draw .contact__field input,
.anim .contact--draw .contact__field textarea {
  border-color: transparent;
  background:
    linear-gradient(var(--line), var(--line)) left top no-repeat,     /* oben: von links nach rechts */
    linear-gradient(var(--line), var(--line)) right top no-repeat,    /* rechts: von oben nach unten */
    linear-gradient(var(--line), var(--line)) left top no-repeat,     /* links: von oben nach unten */
    linear-gradient(var(--line), var(--line)) left bottom no-repeat;  /* unten: von links nach rechts */
  background-origin: border-box;
  background-size:
    calc(clamp(0, var(--draw) / var(--split, 0.9), 1) * 100%) 1px,
    1px calc(clamp(0, (var(--draw) - var(--split, 0.9)) / (1 - var(--split, 0.9)), 1) * 100%),
    1px calc(clamp(0, var(--draw) / (1 - var(--split, 0.9)), 1) * 100%),
    calc(clamp(0, (var(--draw) - (1 - var(--split, 0.9))) / var(--split, 0.9), 1) * 100%) 1px;
}

.anim .contact--draw.is-drawn .contact__field input,
.anim .contact--draw.is-drawn .contact__field textarea {
  animation: contact-draw 1.8s cubic-bezier(0.45, 0, 0.2, 1) both;
  animation-delay: var(--draw-delay, 0s);
}

.anim .site-footer.reveal {
  opacity: 1;
  transform: none;
}

/* 6. Sonstiges ------------------------------------------------------- */

.link-arrow {
  text-decoration: none;
  font-weight: 600;
}

/* 7. Lightbox -------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  display: grid;
  grid-template-columns: 4rem 1fr 4rem;
  align-items: center;
  opacity: 0;
  transition: opacity 0.25s;
}

.lightbox[hidden] {
  display: none;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox__figure {
  margin: 0;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  padding: 4rem 0;
}

.lightbox__figure img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox__figure figcaption {
  margin-top: 0.75rem;
  text-align: center;
}

.lightbox button {
  font: inherit;
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
}

.lightbox__close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 2.25rem !important;
  line-height: 1;
  padding: 0.25rem 0.5rem;
}

.lightbox__nav {
  font-size: 3rem !important;
  height: 100%;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.lightbox__nav:hover {
  opacity: 1;
}

.lightbox__nav--prev { grid-column: 1; grid-row: 1; }
.lightbox__nav--next { grid-column: 3; grid-row: 1; }

.lightbox__count {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 760px) {
  .lightbox {
    grid-template-columns: 0 1fr 0;
  }

  .lightbox__figure {
    padding: 4rem 0.75rem;
  }

  .lightbox__nav {
    position: absolute;
    bottom: 0.5rem;
    height: auto;
    padding: 0.5rem 1.25rem;
  }

  .lightbox__nav--prev { left: 0; }
  .lightbox__nav--next { right: 0; }
}

/* 8. Footer ---------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--accent); /* Trennlinie zum Footer in der Akzentfarbe (mit Animationen: zeichnet sich) */
  padding-block: var(--space-m);
}

/* Erster Block (oder erste Zeile mit Blöcken nebeneinander) im Footer ohne Abstand nach oben */
.site-footer > .block:first-child,
.site-footer > .block-row:first-child {
  margin-top: 0;
}

/* Block «Links»: nebeneinander, bei wenig Platz umbrechen */
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.link-list a {
  text-decoration: none;
}

/* Links untereinander (Block «Links» → «Untereinander»); Ausrichtung rechts/mittig kommt aus den Einstellungen */
.link-list--stack {
  flex-direction: column;
  gap: 0.4rem;
}

.block.ta-right .link-list--stack { align-items: flex-end; }
.block.ta-center .link-list--stack { align-items: center; }

.copyright {
  margin: 0;
}

/* Leiste nur für dich, wenn du eingeloggt bist */
/* Kontakt-Knopf unten rechts: dunkel wie der Hero-Button, erscheint beim Scrollen (site.js) */
.float-contact {
  position: fixed;
  right: var(--space-s);
  bottom: var(--space-s);
  z-index: 40;
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s, color 0.2s;
}

.float-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.float-contact__heart {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.float-contact.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.float-contact:hover,
.float-contact:focus-visible {
  background: var(--bg);
  color: var(--text);
}

/* Angemeldet: über der Admin-Leiste */
.float-contact--admin {
  bottom: calc(var(--space-s) + 3.5rem);
}

.admin-bar {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 150;
  display: flex;
  gap: 0.25rem;
  align-items: center;
  background: #111;
  color: #fff;
  font: 13px/1 system-ui, sans-serif;
  border-radius: 999px;
  padding: 0.3rem;
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.2);
}

.admin-bar a {
  color: #fff;
  text-decoration: none;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
}

.admin-bar a:hover {
  background: #333;
  color: #fff;
}

.admin-bar__draft {
  padding: 0.55rem 0.9rem;
  color: #f5c86b;
}

/* 9. Bewegung reduzieren -------------------------------------------- */
/* Animationen beim Scrollen kommen später mit dem Figma-Design dazu. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}