/* =========================================================
   Stone Faker — Design-System
   Handgefertigte Kunststein- und Felswände, Frankfurt am Main
   ========================================================= */

/* ---------- Schriften (selbst gehostet) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/jost-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Dancing Script";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dancing-script-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alex Brush";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/alex-brush.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ---------- Grundwerte ----------
   Zwei Gruppen von Farb-Tokens:
   - "fliessende" Tokens wechseln unter prefers-color-scheme: dark den Wert
     (--bg, --bg-soft, --bg-dark, --bg-deepest, --text, --text-soft,
     --text-muted, --accent-text, --line)
   - "feste" Tokens bleiben in beiden Farbschemata gleich, weil sie auf
     Flaechen sitzen, die ohnehin immer dunkel sind oder immer auf einem
     Foto liegen (--pale, --noir, --accent, --accent-on-dark, --line-invert)
------------------------------------------------------------ */
:root {
  color-scheme: light dark;

  --bg: #f5f4ef;
  --bg-rgb: 245, 244, 239;
  --bg-soft: #f1e9d8;
  --bg-dark: #221d19;
  --bg-deepest: #141210;
  --bg-hover: #ffffff;

  --text: #141210;
  --text-soft: #2a2724;
  --text-muted: #6b665f;

  /* Akzent Haferbeige: dunkler Ton auf hellem Grund, heller Ton auf dunklem Grund */
  --accent: #76684f;
  --accent-text: #76684f;
  --accent-on-dark: #d9cdb2;

  --pale: #f5f0e6;
  --noir: #141210;

  --line: rgba(20, 18, 16, 0.16);
  --line-invert: rgba(245, 240, 230, 0.2);
  --schatten: 0 24px 60px -24px rgba(20, 18, 16, 0.28);

  --schrift-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", serif;
  --schrift-text: "Jost", "Segoe UI", system-ui, sans-serif;
  --schrift-akzent: "Dancing Script", "Segoe Script", cursive;

  --raum: clamp(1.25rem, 4vw, 3.5rem);
  /* schmalerer Rand fuer Kopfbereich und Buehne, damit beide buendig weiter links stehen */
  --raum-buehne: clamp(1.85rem, 7.85vw, 8.7rem);
  --radius: 2px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dunkle Darstellung. Zwei Wege fuehren dorthin:
   1. die Systemeinstellung, solange im Kopfbereich nichts gewaehlt wurde
   2. die manuelle Wahl ueber den Schalter (data-thema am html-Element)
   Beide Bloecke tragen dieselben Werte und muessen gleich bleiben. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="light"]) {
    --bg: #161616;
    --bg-rgb: 22, 22, 22;
    --bg-soft: #1a1a1a;
    --bg-dark: #0f0f0f;
    --bg-deepest: #0a0a0a;
    --bg-hover: #222222;

    --text: #ececec;
    --text-soft: #cecece;
    --text-muted: #9d9d9d;

    --accent-text: #d9cdb2;

    --line: rgba(236, 236, 236, 0.14);
  }
}
:root[data-thema="dark"] {
  --bg: #161616;
  --bg-rgb: 22, 22, 22;
  --bg-soft: #1a1a1a;
  --bg-dark: #0f0f0f;
  --bg-deepest: #0a0a0a;
  --bg-hover: #222222;

  --text: #ececec;
  --text-soft: #cecece;
  --text-muted: #9d9d9d;

  --accent-text: #d9cdb2;

  --line: rgba(236, 236, 236, 0.14);
}

/* Damit Formularfelder und Bildlaufleisten der Wahl folgen */
:root[data-thema="light"] { color-scheme: light; }
:root[data-thema="dark"] { color-scheme: dark; }

* {
  box-sizing: border-box;
}
/* Android/Chrome blendet sonst bei jedem Antippen eine blaue Markierung ueber
   dem ganzen anklickbaren Element ein; eigene :hover/:focus-visible reichen */
a, button, [role="button"], input, textarea, select {
  -webkit-tap-highlight-color: transparent;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift-text);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
  /* verhindert einzelne Restwoerter in der letzten Zeile */
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); font-weight: 400; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }

p {
  margin: 0 0 1.1em;
  color: var(--text-soft);
}

.script {
  font-family: var(--schrift-akzent);
  font-weight: 400;
  font-style: normal;
}
.buehne h1 .script {
  font-family: "Alex Brush", var(--schrift-akzent);
  font-size: 1.35em;
  color: var(--accent-on-dark);
}

.lead {
  font-size: 1.1rem;
  color: var(--text-soft);
  max-width: 42em;
}

/* ---------- Layout-Bausteine ---------- */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--raum);
}
.wrap--eng {
  max-width: 860px;
}

section {
  position: relative;
}

.abschnitt {
  padding: clamp(4rem, 9vw, 7.5rem) 0;
}
.abschnitt--klein {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

/* Dunkle Baender in neutralem Dunkelgrau statt Braun, einen Hauch heller als der Fussbereich */
.dunkel {
  position: relative;
  isolation: isolate;
  background: #1c1c1c;
  color: var(--pale);
}
/* Die Felsoptik der Buehne zieht sich gedaempft durch die dunklen Baender */
.dunkel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/img/fels-textur-960.webp") center / cover no-repeat;
  opacity: 0.18;
  /* Textur ohne Farbstich, damit das Grau neutral bleibt */
  filter: grayscale(1) saturate(0.9);
}
.dunkel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(28,28,28,0.86) 0%, rgba(28,28,28,0.94) 100%);
}
.dunkel p { color: rgba(245, 240, 230, 0.9); }
.dunkel h1, .dunkel h2, .dunkel h3 { color: var(--pale); }

.creme-flaeche {
  background: var(--bg-soft);
}

/* Dezente Trennlinie oben, wenn zwei gleich helle Abschnitte aufeinanderfolgen;
   die Linie ist so breit wie der Inhalt und sitzt genau an der Abschnittsgrenze */
.abschnitt--trennlinie { padding-top: 0; }
.abschnitt--trennlinie > .wrap::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--line);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.kopfzeile {
  max-width: 640px;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.kopfzeile--mitte {
  margin-inline: auto;
  text-align: center;
}

/* ---------- Buttons & Links ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--schrift-text);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.95em 1.9em;
  border: 1px solid var(--accent);
  color: var(--text);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s var(--ease);
}
.knopf::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform 0.25s var(--ease);
  z-index: -1;
}
.knopf:hover::before,
.knopf:focus-visible::before {
  transform: translateX(0);
}
/* Kreideweiss auf der Haferbeige-Fuellung (4,8:1); dunkle Schrift waere zu schwach */
.knopf:hover,
.knopf:focus-visible {
  color: var(--pale);
}
.dunkel .knopf {
  color: var(--pale);
  border-color: var(--accent-on-dark);
}
.dunkel .knopf:hover {
  color: var(--pale);
}

.textlink {
  position: relative;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  padding-bottom: 0.15em;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.25s var(--ease);
}
.textlink:hover,
.textlink:focus-visible {
  background-size: 100% 1px;
}

/* ---------- Kopfbereich ---------- */
.kopf {
  position: fixed;
  isolation: isolate;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.6rem 0;
  transition: padding 0.4s var(--ease), background-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.kopf.ist-fest {
  padding: 0.85rem 0;
  border-bottom-color: var(--line);
}
/* Hintergrund und Weichzeichner liegen auf einer eigenen Ebene hinter der
   Leiste. Laege backdrop-filter auf .kopf selbst, wuerde sich das feste
   Handy-Menue (.hauptnav, position: fixed) an der Kopfleiste statt am
   Bildschirm ausrichten und beim Scrollen in die Leiste rutschen. */
.kopf.ist-fest::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(var(--bg-rgb), 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
  animation: kopf-grund-ein 0.4s var(--ease);
}
@keyframes kopf-grund-ein { from { opacity: 0; } }
.kopf .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: none;
  padding-left: var(--raum-buehne);
  padding-right: var(--raum-buehne);
}
.kopf-logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}
.kopf-logo img {
  height: 34px;
  width: auto;
  transition: filter 0.4s var(--ease);
}
.kopf.ist-fest .kopf-logo img.logo-hell {
  display: none;
}
.kopf:not(.ist-fest) .kopf-logo img.logo-dunkel {
  display: none;
}
body:not(.hat-buehne) .kopf .kopf-logo img.logo-hell {
  display: none;
}
body:not(.hat-buehne) .kopf .kopf-logo img.logo-dunkel {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="light"]) .kopf.ist-fest .kopf-logo img.logo-hell { display: block; }
  :root:not([data-thema="light"]) .kopf.ist-fest .kopf-logo img.logo-dunkel { display: none; }
  :root:not([data-thema="light"]) body:not(.hat-buehne) .kopf .kopf-logo img.logo-hell { display: block; }
  :root:not([data-thema="light"]) body:not(.hat-buehne) .kopf .kopf-logo img.logo-dunkel { display: none; }
}
[data-thema="dark"] .kopf.ist-fest .kopf-logo img.logo-hell { display: block; }
[data-thema="dark"] .kopf.ist-fest .kopf-logo img.logo-dunkel { display: none; }
[data-thema="dark"] body:not(.hat-buehne) .kopf .kopf-logo img.logo-hell { display: block; }
[data-thema="dark"] body:not(.hat-buehne) .kopf .kopf-logo img.logo-dunkel { display: none; }

.hauptnav {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 2.4vw, 2.6rem);
}
.hauptnav a {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 0.3em;
}
.hauptnav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
  opacity: 0.55;
}
.hauptnav a:hover::after,
.hauptnav a[aria-current="page"]::after {
  transform: scaleX(1);
}
.kopf-aktionen {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
/* Knopf beginnt auf derselben Senkrechten wie die vierte Merkmalspalte; reicht
   der Platz nicht, wird der Bereich breiter, statt dass der Knopf umbricht */
@media (min-width: 861px) {
  .kopf-aktionen {
    width: auto;
    min-width: calc(25% - 1.7rem);
    justify-content: flex-start;
  }
}
.kopf-aktionen .knopf {
  padding: 0.75em 1.5em;
}
/* Beratungsknopf waechst und schrumpft mit der Fensterbreite und bleibt einzeilig */
@media (min-width: 861px) {
  .kopf-aktionen .knopf {
    white-space: nowrap;
    font-size: clamp(0.7rem, 0.3rem + 0.7vw, 0.82rem);
    letter-spacing: clamp(0.06em, 0.15vw, 0.14em);
    padding: 0.75em clamp(0.9em, 1.3vw, 1.5em);
  }
}
/* Zusaetzlicher Beratungsknopf im aufgeklappten Handy-Menue; erscheint nur dort */
.knopf-mobil { display: none; }
/* "Home" im Hauptmenue nur in der Handyansicht, auf dem Desktop reicht das Logo */
@media (min-width: 861px) {
  .nav-home { display: none; }
}

/* Schalter zwischen heller und dunkler Darstellung. Bleibt bewusst
   ohne Rahmen, damit er den Beratungsknopf nicht ueberstimmt. */
.thema-schalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.82;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.thema-schalter svg { width: 19px; height: 19px; }
.thema-schalter:hover { opacity: 1; transform: rotate(-12deg); }
.thema-schalter:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  opacity: 1;
}
.thema-schalter .ico-sonne { display: none; }
[data-thema="dark"] .thema-schalter .ico-mond { display: none; }
[data-thema="dark"] .thema-schalter .ico-sonne { display: block; }

/* Sprung zum Seitenanfang, laeuft unten rechts mit */
.hoch-knopf {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(var(--bg-rgb), 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hoch-knopf.ist-da {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.hoch-knopf svg { width: 18px; height: 18px; }
.hoch-knopf.ist-da:hover {
  transform: translateY(-3px);
  color: var(--accent-text);
  border-color: var(--accent-text);
}
.hoch-knopf:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .thema-schalter,
  .hoch-knopf { transition: none; }
  .kopf.ist-fest::before { animation: none; }
  .wandbild { transition: none; }
  .thema-schalter:hover,
  .hoch-knopf.ist-da:hover { transform: none; }
  .hoch-knopf.ist-da { transform: none; }
}

body:not(.hat-buehne) .kopf,
.kopf.ist-fest {
  color: var(--text);
}
body.hat-buehne .kopf:not(.ist-fest) {
  color: #fff;
  text-shadow: 0 1px 12px rgba(20, 18, 16, 0.55);
}
body.hat-buehne .kopf:not(.ist-fest)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 18, 16, 0.55) 0%, rgba(20, 18, 16, 0) 100%);
  pointer-events: none;
}
body.hat-buehne .kopf:not(.ist-fest) .knopf {
  border-color: var(--accent-on-dark);
  color: var(--pale);
}

.burger {
  display: none;
  width: 30px;
  height: 22px;
  position: relative;
  border: 0;
  background: none;
  /* Farbe der Kopfleiste uebernehmen (ueber dem Titelbild weiss) statt der Browser-Knopffarbe */
  color: inherit;
  cursor: pointer;
  padding: 0;
}
/* Antippflaeche auf 44px, ohne die Balken zu verschieben: das Feld liegt
   mittig ueber dem Knopf und laesst den Schalter daneben frei */
.burger::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.burger span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 50%; margin-top: -0.5px; }
.burger span:nth-child(3) { bottom: 0; }
body.nav-offen .burger span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
body.nav-offen .burger span:nth-child(2) { opacity: 0; }
body.nav-offen .burger span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }

/* ---------- Bühne ---------- */
.buehne {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-start;
  color: var(--pale);
  overflow: hidden;
}
.buehne-bild {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.buehne-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.buehne-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(20, 18, 16, 0.97) 0%,
      rgba(20, 18, 16, 0.97) 26%,
      rgba(20, 18, 16, 0.62) 48%,
      rgba(20, 18, 16, 0.22) 66%,
      rgba(20, 18, 16, 0) 82%
    ),
    linear-gradient(
      180deg,
      rgba(20, 18, 16, 0.1) 0%,
      rgba(20, 18, 16, 0.04) 28%,
      rgba(20, 18, 16, 0.6) 80%,
      rgba(20, 18, 16, 0.88) 100%
    );
}
.buehne-inhalt {
  position: relative;
  width: 100%;
  max-width: none;
  padding-top: clamp(9.35rem, 35.2vh, 16.5rem);
  padding-left: var(--raum-buehne);
  padding-right: var(--raum-buehne);
}
.buehne h1 {
  color: var(--pale);
  max-width: 15em;
  margin-bottom: 0.4em;
}
.buehne .lead {
  color: rgba(253, 251, 247, 0.94);
  max-width: 34em;
  margin-bottom: 0;
  text-shadow: 0 1px 16px rgba(20, 18, 16, 0.5);
}
.buehne h1 { text-shadow: 0 2px 28px rgba(20, 18, 16, 0.45); }
.buehne .knopf {
  color: var(--pale);
  border-color: var(--accent-on-dark);
}
.buehne .knopf:hover,
.buehne .knopf:focus-visible {
  color: var(--noir);
}
.merkmalsleiste {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(20, 18, 16, 0) 0%,
    rgba(20, 18, 16, 0.5) 42%,
    rgba(20, 18, 16, 0.86) 100%
  );
}
.merkmalsleiste ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
.merkmalsleiste li {
  padding: 1.4rem 1.7rem 1.7rem;
  border-left: 1px solid var(--line-invert);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: rgba(245, 240, 230, 0.72);
}
.merkmalsleiste li:first-child { border-left: none; padding-left: var(--raum-buehne); }
.merkmalsleiste li:last-child { padding-right: var(--raum-buehne); }
.merkmalsleiste p { margin: 0; color: inherit; }
.merkmal-kopf { margin-bottom: 0.35rem; }
.merkmalsleiste strong {
  min-width: 0;
  font-family: var(--schrift-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--pale);
}

/* Seitenkopf (Unterseiten) */
.seitenkopf {
  padding-top: 10.5rem;
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.seitenkopf h1 {
  max-width: 16em;
}

/* ---------- Reveal-Animation ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
[data-reveal].ist-sichtbar {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Grundgedanken-Grid ---------- */
.gedanken-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3.2rem);
}
.gedanken {
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.gedanken h3 { margin-bottom: 0.5em; }
.gedanken p { font-size: 0.96rem; margin-bottom: 0; }

/* ---------- Einführung mit Bild ---------- */
.einfuehrung {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.einfuehrung-bild {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.einfuehrung-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s var(--ease);
}
.einfuehrung-bild:hover img {
  transform: scale(1.045);
}
/* ---------- Über uns: Fläche mit Fels, Bühne und Kartenstapel ---------- */
.ueber-flaeche {
  position: relative;
  isolation: isolate;
}
.ueber-fels {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(18rem, 50%, 62rem);
  z-index: -1;
}
.ueber-fels picture,
.ueber-fels img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ueber-fels::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(var(--bg-rgb), 0.92) 0%,
      rgba(var(--bg-rgb), 0.5) 4%,
      rgba(var(--bg-rgb), 0) 11%
    ),
    linear-gradient(
      90deg,
      var(--bg) 0%,
      rgba(var(--bg-rgb), 0.88) 16%,
      rgba(var(--bg-rgb), 0.45) 34%,
      rgba(var(--bg-rgb), 0) 58%
    );
}

.ueber-buehne {
  padding-top: 10.5rem;
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.ueber-buehne-kopf {
  position: relative;
  z-index: 1;
  max-width: 30rem;
}
.ueber-buehne-kopf h1 {
  max-width: 16em;
}
.ueber-karten {
  position: relative;
  z-index: 1;
  /* so hoch, dass die Karten wie am Handy in gleichen Stufen versetzt
     liegen und von jeder hinteren Karte gleich viel zu sehen ist */
  aspect-ratio: 1.72 / 1;
  margin-top: clamp(2rem, 5vw, 4rem);
}
.ueber-karte {
  position: absolute;
  width: 43%;
  aspect-ratio: 16 / 9;
  display: flex;
  padding: clamp(1.1rem, 2.4vw, 2.1rem);
  font-family: var(--schrift-display);
  font-size: clamp(1.25rem, 2.1vw, 1.95rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--noir);
  background-color: #cfc4b4;
  background-size: cover;
  background-position: center;
  box-shadow: 0 22px 45px -22px rgba(20, 18, 16, 0.5);
  cursor: pointer;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.ueber-karte span { max-width: 8em; }
.ueber-karte:hover,
.ueber-karte:focus-visible {
  transform: translateY(-7px);
  z-index: 4;
  box-shadow: 0 34px 60px -22px rgba(20, 18, 16, 0.55);
}
.ueber-karte:focus-visible {
  outline: 2px solid var(--noir);
  outline-offset: 3px;
}
/* Stapel von oben links nach unten rechts: vorne Geschichte, dahinter Anders,
   ganz hinten Arbeiten. Jeder Text steht im sichtbaren, bruchfreien Teil. */
/* vorne: Unsere Geschichte. Der Bruch liegt rechts unten im Bild. */
.ueber-karte--geschichte {
  left: 22%;
  top: 0;
  z-index: 3;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  background-image: url("/assets/img/karte-geschichte-1200.jpg");
}
/* Mitte: Was uns anders macht. Die vordere Karte deckt das obere Stueck ab,
   der Bruch laeuft diagonal von oben links: Text rechts, knapp unter der
   Kante (Prozent der Stapelbreite, skaliert also mit) */
.ueber-karte--anders {
  left: 33%;
  top: 29%;
  z-index: 2;
  padding-top: 9%;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: right;
  background-image: url("/assets/img/karte-anders-1200.jpg");
}
/* hinten: Womit wir arbeiten. Oben links liegt Anders davor, rechts unten
   der grosse Bruch: Text links unten */
.ueber-karte--arbeiten {
  left: 44%;
  top: 58%;
  z-index: 1;
  justify-content: flex-start;
  align-items: flex-end;
  text-align: left;
  background-image: url("/assets/img/karte-arbeiten-1200.jpg");
}

/* Steckbrief auf der hellen Felsflaeche statt auf dunklem Band */
.steckbrief-hell .steckbrief-daten dt { color: var(--accent-text); }
.steckbrief-hell .steckbrief-daten dd { color: var(--text-soft); }

@media (prefers-reduced-motion: reduce) {
  .ueber-karte { transition: none; }
  .ueber-karte:hover, .ueber-karte:focus-visible { transform: none; }
}
@media (max-width: 860px) {
  .ueber-buehne {
    padding-top: 8rem;
    padding-bottom: clamp(2.5rem, 8vw, 4rem);
  }
  .ueber-fels {
    width: 72%;
  }
  .ueber-fels::after {
    background:
      linear-gradient(
        180deg,
        rgba(var(--bg-rgb), 0.95) 0%,
        rgba(var(--bg-rgb), 0.6) 5%,
        rgba(var(--bg-rgb), 0.25) 12%
      ),
      linear-gradient(
        90deg,
        var(--bg) 0%,
        rgba(var(--bg-rgb), 0.9) 22%,
        rgba(var(--bg-rgb), 0.62) 50%,
        rgba(var(--bg-rgb), 0.5) 100%
      );
  }
  /* Gleiche Kaskade wie am Desktop, nur kleiner: die Karten sind breiter
     im Verhaeltnis zur Flaeche, damit die Beschriftung lesbar bleibt. */
  .ueber-karten {
    aspect-ratio: 1.13 / 1;
    margin-top: 2rem;
    container-type: inline-size;
  }
  .ueber-karte {
    width: 66%;
    padding: 1rem;
    /* auf allen drei Karten gleich und mit dem Stapel skaliert, damit der
       Text bei jeder Breite gleich weit von den Bruechen entfernt bleibt */
    font-size: 0.95rem;
    font-size: 4.3cqi;
  }
  .ueber-karte--geschichte { left: 0; top: 0; }
  .ueber-karte--anders { left: 17%; top: 30%; }
  .ueber-karte--arbeiten { left: 34%; top: 58%; }
  .ueber-karte span { max-width: 6em; }
  /* knapp unter der Kante der vorderen Karte, Handy-Masse */
  .ueber-karte--anders { padding-top: 12.5%; }
}
/* ---------- Vorher / Nachher ---------- */
.vn {
  max-width: 980px;
  margin: 0 auto;
}
.vn-rahmen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  cursor: ew-resize;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.vn-rahmen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.vn-nachher-lage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: polygon(0 0, var(--vn-top, 50%) 0, var(--vn-bot, 50%) 100%, 0 100%);
}
/* Trennlinie folgt exakt derselben Linie wie der Schnitt */
.vn-kante {
  position: absolute;
  inset: 0;
  background: var(--pale);
  pointer-events: none;
  clip-path: polygon(
    var(--vn-top, 50%) 0,
    calc(var(--vn-top, 50%) + 2px) 0,
    calc(var(--vn-bot, 50%) + 2px) 100%,
    var(--vn-bot, 50%) 100%
  );
}
.vn-nachher-lage img { position: absolute; inset: 0; }
.vn-griff {
  position: absolute;
  top: 50%;
  left: var(--vn-mid, 50%);
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.vn-knauf {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--pale);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(20, 18, 16, 0.3);
}
.vn-knauf::before {
  content: "";
  width: 14px;
  height: 14px;
  border-left: 2px solid var(--noir);
  border-bottom: 2px solid var(--noir);
  transform: rotate(45deg);
  margin-right: 6px;
}
.vn-knauf::after {
  content: "";
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--noir);
  border-top: 2px solid var(--noir);
  transform: rotate(45deg);
  margin-left: -12px;
}


/* ---------- Einsatzbereiche (dunkles Bildband) ---------- */
.bereiche-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-invert);
}
.bereich {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.bereich img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s var(--ease);
  filter: saturate(0.94);
}
.bereich:hover img {
  transform: scale(1.06);
}
.bereich-schild {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem;
  background: linear-gradient(180deg, transparent, rgba(20, 18, 16, 0.82) 78%);
}
.bereich-schild h3 { color: var(--pale); margin: 0; }

/* ---------- Imagefilm (Startseite) ---------- */
/* Eigenes dunkles Band direkt nach "Wo unsere Waende zu Hause sind": oben nur eine feine
   Linie statt vollem Abstand; der Verlauf beginnt so dunkel, wie das vorige Band endet */
.filmband {
  padding-top: 0;
  /* der Lichtschein ragt seitlich ueber den Film hinaus, darf aber nicht seitlich scrollen lassen */
  overflow: hidden;
}
.filmband > .wrap::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--line-invert);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.filmband::after {
  background: linear-gradient(180deg, rgba(28,28,28,0.94) 0%, rgba(28,28,28,0.9) 100%);
}
.filmband .kopfzeile { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.film {
  position: relative;
  isolation: isolate;
  max-width: 1120px;
  margin: 0 auto;
}
/* Lichtschein hinter dem Film, wie indirektes Licht hinter einer TV-Wand */
.film::before {
  content: "";
  position: absolute;
  inset: -4% -3% -8%;
  z-index: -1;
  background: url("/assets/img/imagefilm-felswand-480.jpg") center / cover;
  filter: blur(70px) saturate(1.3);
  opacity: 0.5;
}
.film-rahmen {
  position: relative;
  aspect-ratio: 1920 / 1068;
  overflow: hidden;
  background: #0e0d0b;
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.9);
}
.film-poster img,
.film-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Video erst zeigen, wenn es wirklich laeuft: weicher Wechsel vom Standbild */
.film-video {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.film.ist-bewegt .film-video,
.film.ist-film .film-video { opacity: 1; }
.film-start {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: var(--pale);
  font: inherit;
  background:
    linear-gradient(0deg, rgba(20,18,16,0.62) 0%, rgba(20,18,16,0.16) 28%, rgba(20,18,16,0) 50%),
    radial-gradient(34% 44% at 50% 50%, rgba(20,18,16,0.3), rgba(20,18,16,0) 70%);
}
.film-start-kreis {
  width: clamp(62px, 6.4vw, 86px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 240, 230, 0.9);
  background: rgba(20, 18, 16, 0.38);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease);
}
.film-start-kreis svg { width: 34%; height: 34%; margin-left: 7%; }
.film-start-text {
  position: absolute;
  left: clamp(1rem, 2.6vw, 2rem);
  bottom: clamp(0.85rem, 2.2vw, 1.6rem);
  font-family: var(--schrift-text);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.film-dauer { margin-left: 0.9em; opacity: 0.75; }
.film-start:hover .film-start-kreis,
.film-start:focus-visible .film-start-kreis {
  transform: scale(1.06);
  background: rgba(245, 240, 230, 0.18);
}
.film-start:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: -8px; }
/* Film mit Ton: Knopf weg, damit die Bedienleiste des Videos frei ist */
.film.ist-film .film-start { display: none; }

/* Knopf, um die von selbst laufende, stumme Vorschau jederzeit anzuhalten */
.film-vorschau-pause {
  position: absolute;
  top: clamp(0.7rem, 2vw, 1.2rem);
  left: clamp(0.7rem, 2vw, 1.2rem);
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 240, 230, 0.5);
  border-radius: 50%;
  background: rgba(20, 18, 16, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--pale);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.25s var(--ease), background-color 0.25s var(--ease);
}
.film-vorschau-pause svg { width: 15px; height: 15px; }
.film-vorschau-pause[hidden] { display: none; }
.film-vorschau-pause:hover,
.film-vorschau-pause:focus-visible { opacity: 1; background: rgba(20, 18, 16, 0.65); }
.film-vorschau-pause:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 2px; }
@media (max-width: 560px) {
  /* Handy: Film ueber die volle Breite */
  .film { margin-inline: calc(-1 * var(--raum)); }
  .film-start-text { font-size: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .film-video,
  .film-start-kreis { transition: none; }
}

/* ---------- Prozessschritte ---------- */
.schritte {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.2rem, 2vw, 2rem);
  counter-reset: schritt;
}
.schritt {
  counter-increment: schritt;
  position: relative;
}
.schritt::before {
  content: counter(schritt, decimal-leading-zero);
  display: block;
  font-family: var(--schrift-display);
  font-size: 1.6rem;
  color: var(--accent-text);
  margin-bottom: 0.6em;
}
.schritt h3 { font-size: 1.08rem; margin-bottom: 0.4em; }
.schritt p { font-size: 0.9rem; margin: 0; color: var(--text-muted); }

/* ---------- Strukturen + Vorher/Nachher nebeneinander ---------- */
.struktur-vn-reihe {
  display: flex;
  gap: 6rem;
}
.struktur-vn-links {
  flex: 0 0 48%;
  min-width: 0;
}
.struktur-vn-rechts {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.struktur-vn-rechts .vn {
  max-width: none;
  margin: 0;
  margin-top: auto;
}
.struktur-vn-links .farbreihe {
  grid-auto-rows: 110px;
  column-gap: 1.2rem;
  row-gap: 1.2rem;
}
.struktur-vn-links .farbkachel {
  aspect-ratio: unset;
}
.struktur-vn-rechts .vn-rahmen {
  aspect-ratio: unset;
  height: calc(3 * 110px + 2 * 1.2rem);
}
/* Desktop: 3 x 2 Kacheln; zwei Reihen plus Luecke ergeben genau die Hoehe von Vorher/Nachher */
@media (min-width: 861px) {
  .struktur-vn-links .farbreihe {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: calc((3 * 110px + 2 * 1.2rem - 1.2rem) / 2);
  }
}

/* ---------- Farben & Strukturen ---------- */
.farbreihe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
}
.farbkachel {
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
}
.farbkachel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s var(--ease);
}
.farbkachel:hover img { transform: scale(1.08); }

/* ---------- Bilderwand (An der Wand oder im Rahmen) ---------- */
.rahmen-layout {
  position: relative;
  aspect-ratio: 1445 / 1028;
}
.rahmen-links {
  position: absolute;
  left: 3.9%;
  top: 4.4%;
  width: 34%;
  z-index: 4;
}
.rahmen-titel {
  font-size: clamp(1.1rem, 3vw, 2.5rem);
  line-height: 1.18;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 1.5em;
}
.rahmen-links .lead {
  margin: 0;
  font-size: clamp(0.72rem, 1.15vw, 1rem);
}
/* Erzwungener Umbruch nur, wo der Text sonst am ersten Bild vorbeilaeuft */
.br-breit { display: none; }
@media (min-width: 861px) {
  .br-breit { display: inline; }
}
.bw-fig {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: clamp(3px, 0.5vw, 7px) solid #000;
  background: #000;
  cursor: zoom-in;
}
.bw-fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.bw-fig:hover img { transform: scale(1.05); }
.bw-a { left: 37.2%; top: 14.0%; width: 13.7%; height: 18.7%; z-index: 2; }
.bw-b { left: 44.0%; top: 16.0%; width: 45.9%; height: 48.2%; z-index: 1; }
.bw-c { left: 70.1%; top: -0.6%; width: 16.8%; height: 24.3%; z-index: 3; }
.bw-e { left: 56.6%; top: 57.4%; width: 17.1%; height: 23.6%; z-index: 3; }
.bw-f { left:  3.9%; top: 47%; width: 36.9%; height: 43.2%; z-index: 1; }
.bw-f img { object-position: 50% 21%; }
.bw-g { left:  6.7%; top: 77.8%; width: 13.8%; height: 19.5%; z-index: 2; }

/* Icons in der Merkmalsleiste */
.merkmal-ico {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 0.5rem;
  vertical-align: -0.15em;
  color: var(--accent-on-dark);
  opacity: 0.95;
}

/* ---------- Kundenstimmen ---------- */
.stimmen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
.stimme {
  padding: 2rem 1.9rem;
  background: var(--bg-soft);
  border-top: 2px solid var(--accent);
}
.stimme blockquote {
  margin: 0 0 1.1em;
  font-family: var(--schrift-display);
  font-size: 1.14rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text);
}
.stimme cite {
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ---------- Abschluss-Aufruf (nur Startseite) ---------- */
.abschluss {
  text-align: center;
  padding: clamp(4.5rem, 10vw, 8rem) 0;
}
.abschluss h2 { max-width: 14em; margin-inline: auto; }
.abschluss .lead { margin-inline: auto; text-align: center; margin-bottom: 2em; }

/* ---------- Schlusszeile (übrige Seiten) ---------- */
.schlusszeile {
  border-top: 1px solid var(--line);
  padding: clamp(2.2rem, 4vw, 3rem) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.schlusszeile p {
  margin: 0;
  font-family: var(--schrift-display);
  font-size: 1.3rem;
  color: var(--text);
}
.dunkel .schlusszeile { border-top-color: var(--line-invert); }
.dunkel .schlusszeile p { color: var(--pale); }
/* FAQ: die Linie unter der letzten Frage reicht, daher hier keine zweite */
.schlusszeile--ohne-linie { border-top: 0; }

/* ---------- Galerie ---------- */
/* ---------- Galerie: Bilderwand ---------- */
.galeriewand {
  /* unten kein Innenabstand: der Galerieboden reicht bis an die Unterkante */
  padding: clamp(7rem, 12vw, 10rem) 0 0;
  /* einheitliche Vorschaugroesse aller Bilder */
  --bild-g: clamp(200px, 20vw, 320px);
  /* Breite der Galeriebank (Holz ohne Schatten); ihre Hoehe von der Sitzflaeche
     bis zu den Beinenden ergibt sich aus der Vorlage Bank.png: 2014 x 330 px */
  --bank-b: clamp(250px, 42vw, 660px);
  --bank-h: calc(var(--bank-b) * 330 / 2014);
  /* Bodenton aus dem Holz der Bank abgeleitet (beleuchtete Sitzflaeche,
     aufgehellt); am Elternbereich statt an .galerie-boden, damit die
     Sammelkachel "Weitere Arbeiten" in der Bilderwand denselben Ton lesen kann */
  --boden-ton: #b79c86;
  --boden-a: 30%;
  --boden-b: 22%;
  --boden-c: 26%;
}
/* Dunkle Darstellung: Boden etwas heller, damit sich die dunkle Holzbank abhebt */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="light"]) .galeriewand { --boden-a: 41%; --boden-b: 35%; --boden-c: 38%; }
}
[data-thema="dark"] .galeriewand { --boden-a: 41%; --boden-b: 35%; --boden-c: 38%; }
.galerie-kopf { max-width: 42rem; }
.galerie-kopf h1 { margin-bottom: 0.35em; }

.wandschiene {
  margin-top: clamp(3rem, 6vw, 5rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Wandflaeche unter den Bildern bis zur Bodenkante */
  padding-bottom: clamp(88px, 15.07vw, 239px);
  border-bottom: 1px solid var(--line);
}
.wandschiene::-webkit-scrollbar { display: none; }
.wandschiene:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.wandreihe {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3.4vw, 3.4rem);
  /* Seitlicher Rand von einer halben Wandbreite: so kann auch das erste und
     das letzte Bild in die Mitte ruecken und hervorgehoben werden.
     Oben Luft fuer Vergroesserung und Anheben beim Darueberfahren. */
  padding: 2rem calc(50% - var(--bild-g) / 2) 0;
  width: max-content;
}

.wandbild {
  position: relative;
  flex: 0 0 auto;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  scroll-snap-align: center;
  transition: transform 0.25s var(--ease);
  width: var(--bild-g);
  height: var(--bild-g);
}
.wandbild picture { display: block; height: 100%; }
.wandbild img {
  display: block;
  height: 100%;
  width: 100%;
  max-width: none;
  object-fit: cover;
  box-shadow: 0 22px 50px -30px rgba(20, 18, 16, 0.5);
}
.wandbild:hover { transform: translateY(-6px); }
/* Aktuelles Bild (am naechsten zur Mitte, gesetzt in site.js) leicht vergroessert */
.wandbild.ist-aktiv { transform: scale(1.14); z-index: 1; }
.wandbild.ist-aktiv:hover { transform: scale(1.14) translateY(-6px); }

.wandbild.ist-projekt { cursor: pointer; }
.wandbild-marke {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.42em 0.9em;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--pale);
  background: rgba(20, 18, 16, 0.72);
}

/* Sammelkachel "Weitere Arbeiten": keine Fotos in der Kachel, nur ein
   deckender Verlauf von unserem Anthrazit (--bg-dark, in beiden Darstellungen
   dunkel) in die tatsaechliche Farbe des Galeriebodens rechts daneben (nicht
   der reine --boden-ton, sondern genau die Mischung von .galerie-boden oben,
   --boden-a) und mittig der Titel in Kreideweiss statt der sonstigen Marke
   unten links. --bg-dark statt --bg, damit die Schrift auch in der dunklen
   Darstellung lesbar bleibt */
.wandbild-verlauf {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--bg-dark) 0%,
    color-mix(in srgb, var(--bg), var(--boden-ton) var(--boden-a)) 100%);
}
.wandbild-marke--sammlung {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.4em;
  text-align: center;
  background: none;
  font-family: var(--schrift-display);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--pale);
}

/* Galerieboden: volle Breite unter der Bilderwand. flow-root verhindert,
   dass der negative Rand der Bank den ganzen Boden nach oben zieht.
   Bodenton (--boden-ton/-a/-b/-c) kommt von .galeriewand, dezent in den
   Hintergrund gemischt: oben, Mitte, unten */
.galerie-boden {
  display: flow-root;
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg), var(--boden-ton) var(--boden-a)) 0%,
    color-mix(in srgb, var(--bg), var(--boden-ton) var(--boden-b)) 30%,
    color-mix(in srgb, var(--bg), var(--boden-ton) var(--boden-c)) 100%);
}
/* Galeriebank: steht mittig im Boden, scrollt nicht mit den Bildern.
   Sie ragt ein Viertel ihrer Hoehe ueber die Bodenkante, wie im Beispiel */
.galerie-bank {
  position: relative;
  z-index: 1;
  width: var(--bank-b);
  margin: calc(var(--bank-h) * -0.24) auto 0;
  pointer-events: none;
}
/* Das Bild enthaelt Bank und Schatten. Es ist breiter als das Holz (2111 statt
   2014 px) und beginnt 17 px links davon; oben schliesst es buendig mit der
   Sitzflaeche ab. So steht das Holz genau dort, wo die Bank bisher stand. */
.galerie-bank img {
  display: block;
  width: calc(100% * 2111 / 2014);
  max-width: none;
  height: auto;
  margin-left: calc(-100% * 17 / 2014);
}
/* Der Schatten ist Teil des Bankbildes (Vorlage Bank.png) und wird
   unveraendert uebernommen; hier kommt kein eigener Schatten dazu. */

.wandsteuerung {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 2rem;
}
.wandlinie { flex: 1; height: 1px; background: var(--line); }
.wandpfeil {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.wandpfeil svg { width: 20px; height: 20px; }
.wandpfeil:hover { border-color: var(--accent); color: var(--accent-text); }

/* ---------- Projektfenster ---------- */
.projektfenster {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.26s var(--ease);
}
.projektfenster.ist-offen { opacity: 1; }
.projektfenster[data-ton="dunkel"] { background: var(--bg); color: var(--text); }
.projektfenster[data-ton="hell"] { background: var(--bg-dark); color: var(--pale); }
.projektfenster[data-ton="hell"] h2 { color: var(--pale); }
.projektfenster[data-ton="hell"] .projekt-text { color: rgba(245, 240, 230, 0.9); }

.projekt-buehne {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: clamp(5rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  -webkit-overflow-scrolling: touch;
}
.projekt-inhalt h2 { margin-bottom: 0.4em; }
.projekt-text { max-width: 40rem; font-size: 1.05rem; }

.projekt-schliessen {
  position: absolute;
  top: clamp(1.2rem, 3vw, 2.2rem);
  right: clamp(1.2rem, 3vw, 2.2rem);
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.projekt-schliessen svg { width: 18px; height: 18px; }
.projekt-schliessen:hover { opacity: 1; transform: rotate(90deg); }

/* Galerie: Projektansicht als Kartenwand (Vorlage: Praesentationsseiten).
   Grund-, Flaechen- und Schriftfarbe kommen je Projekt aus dem style-Attribut
   der Quelle (--p-grund, --p-ton, --p-schrift); site.js uebertraegt sie aufs Fenster. */
/* Das Fenster ist eine abgerundete Karte ueber der abgedunkelten Galerie,
   kein ganzer Bildschirm; die Projektkarten scrollen innerhalb dieser Karte */
.projektfenster--karten {
  --karte-rand: clamp(0.6rem, 3vw, 2.4rem);
  --karte-max: 1240px;
  --karte-innen: clamp(0.8rem, 2vw, 1.6rem);
}
.projektfenster--karten[data-ton] {
  background: rgba(20, 18, 16, 0.6);
  color: var(--p-schrift, var(--pale));
}
.projektfenster--karten .projekt-buehne {
  inset: var(--karte-rand) 0;
  width: min(100% - 2 * var(--karte-rand), var(--karte-max));
  margin-inline: auto;
  padding: clamp(4.2rem, 7vw, 5.4rem) 0 clamp(0.9rem, 2.6vw, 2.4rem);
  border-radius: clamp(14px, 1.8vw, 24px);
  background: var(--p-grund, var(--bg-dark));
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6);
  overscroll-behavior: contain;
}
.projektfenster--karten .projekt-inhalt { padding: 0 clamp(0.75rem, 2.6vw, 2.4rem); }
.projektfenster--karten .projekt-schliessen {
  top: calc(var(--karte-rand) + var(--karte-innen));
  right: calc(max(var(--karte-rand), (100% - var(--karte-max)) / 2) + var(--karte-innen));
  background: var(--p-grund, var(--bg-dark));
}
.karten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Beide ausdruecklich stretch: Karten mit Seitenverhaeltnis wuerden sonst
     ihre Breite aus der (durch Text gewachsenen) Zeilenhoehe berechnen und
     ueber die Spalte hinausragen */
  align-items: stretch;
  justify-items: stretch;
  gap: clamp(0.75rem, 1.4vw, 1.2rem);
}
.karte {
  display: grid;
  gap: 4px;
  min-width: 0;
  aspect-ratio: 16 / 10;
  /* Bildnaehte in der Projektfarbe statt einem festen Kreideweiss: beim
     Oeffnen kopiert site.js nur quelle.innerHTML in #projektfenster, die
     ID der Quelle geht dabei verloren - --p-grund haengt darum am
     Projektfenster selbst und muss hier als Variable durchgereicht werden */
  background: var(--p-grund, var(--pale));
  border-radius: var(--radius);
  box-shadow: 0 34px 60px -40px rgba(0, 0, 0, 0.6);
}
.karte figure {
  position: relative;
  margin: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.karte figure img {
  position: absolute;
  inset: 0;
  /* --beschnitt-links am figure blendet bei Bedarf einen Streifen am linken
     Bildrand aus: das Bild ragt um diesen Anteil nach links aus der Flaeche */
  left: calc(-1 * var(--beschnitt-links, 0%));
  width: calc(100% + var(--beschnitt-links, 0%));
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--fokus, 50% 50%);
  cursor: zoom-in;
  transition: transform 0.3s var(--ease);
}
.karte figure:hover img { transform: scale(1.03); }
/* Kleine Beschriftung unten rechts auf einem Kartenfoto (z. B. "Vorher");
   Klicks gehen durch aufs Bild, damit die Grossansicht weiter aufgeht */
.karte figure .bild-marke {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0.42em 0.9em;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--pale);
  background: rgba(20, 18, 16, 0.72);
  pointer-events: none;
}

.karte-text {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.1rem, 2.4vw, 2rem);
  color: var(--noir);
  /* Woerter bleiben ganz; in schmalen Spalten bricht die Zeile stattdessen um */
  overflow-wrap: break-word;
}
.karte-text--ton { background: var(--p-ton); color: var(--pale); }
/* Heller Projektton (z. B. Pizzeria): dunkle Schrift im Textfeld, auch gegen die
   helle Projekttext-Farbe bei data-ton="hell" */
.projektfenster--karten .karte-text--hell,
.projektfenster--karten .karte-text--hell .projekt-text { color: var(--noir); }
/* Dunkler Projektton ohne --p-ton-Flaeche (z. B. Ornamentrelief): helle Schrift
   statt der Standard-Textfarbe var(--noir), die von einem hellen Kartengrund ausgeht */
.projektfenster--karten .karte-text--dunkel,
.projektfenster--karten .karte-text--dunkel p { color: var(--pale); }
.projektfenster--karten .karte-text :is(h2, h3, p) { margin: 0; color: inherit; }
.projektfenster--karten .karte-text h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.08; }
.projektfenster--karten .karte-text h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); }
.projektfenster--karten .karte-text p { max-width: 34rem; font-size: 0.92rem; line-height: 1.6; }

/* Titelkarte: Foto und Projekttext auf dem Projektton */
.karte--titel {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 0;
  background: var(--p-ton);
}
.karte--titel .karte-text { justify-content: center; }
/* Einzelnes Titelbild zusaetzlich gerahmt, wie die Bilder in einer Mosaik-Karte
   ("Weitere Arbeiten"-Sammelkarte) */
.bild-gerahmt {
  border: 7px solid #141210;
  box-shadow: 0 20px 38px -20px rgba(20, 18, 16, 0.6);
}
/* Einzelne Titelkarte auf Wunsch: Text oben statt mittig (Bild bleibt links) */
.karte--titel.karte--text-oben .karte-text { justify-content: flex-start; }
/* Titelkarte mit Hochformat-Foto (3:4): die Bildspalte hat genau das Seitenverhaeltnis
   des Fotos, damit nichts beschnitten wird. Karte 16:10 -> 15 zu 17 Teile */
.karte--titel.karte--bild-hoch { grid-template-columns: minmax(0, 15fr) minmax(0, 17fr); }
/* Ein Foto ueber die ganze Karte */
.karte--vollbild { grid-template-columns: minmax(0, 1fr); }
/* Zwei Fotos nebeneinander */
.karte--paar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Drei Fotos nebeneinander, kein Text */
.karte--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Textflaeche im Projektton neben schmalen Bildstreifen */
.karte--streifen {
  grid-auto-flow: column;
  grid-template-columns: minmax(0, 1.45fr);
  grid-auto-columns: minmax(0, 1fr);
}
.karte--streifen .karte-text { padding: clamp(0.9rem, 1.6vw, 1.6rem); }
/* Vorher/Nachher-Regler in der Streifenkarte: nimmt den Platz von zwei Bildern ein */
.karte--streifen .vn-rahmen { grid-column: span 2; aspect-ratio: auto; }
/* Helle Karte: eingeruecktes Foto neben dem Text */
.karte--text-bild {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.8rem);
  padding: clamp(0.8rem, 1.6vw, 1.2rem);
}
.karte--text-bild .karte-text { justify-content: center; padding: 0.5rem 0.5rem 0.5rem 0; }
/* Gespiegelt: Text links, Bild rechts (Reihenfolge im Markup vertauscht) */
.karte--text-bild.karte--text-links .karte-text { padding: 0.5rem 0 0.5rem 0.5rem; }
/* Mosaik: gerahmte Fotos wie an einer Bilderwand aufgehaengt statt eines
   durchgehenden Bildfelds ("Weitere Arbeiten"-Sammelkarte). Luecken zwischen
   den Rahmen zeigen den Kartenton (--p-grund) wie eine Wand dahinter, jedes
   Bild bekommt seinen Platz ueber die Groesse (mosaik-gross/-hoch) statt durch
   ueberlappende negative Raender gequetscht zu werden - in der Lightbox sieht
   man jedes Bild ohnehin in voller Groesse. aspect-ratio bleibt auto, die Hoehe
   ergibt sich aus der Anzahl Zeilen. */
.karte--mosaik {
  aspect-ratio: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(120px, 20vw);
  grid-auto-flow: dense;
  gap: clamp(1.2rem, 3vw, 2rem);
  padding: clamp(1.2rem, 3vw, 2rem);
}
.karte--mosaik figure {
  border: 7px solid #141210;
  box-shadow: 0 20px 38px -20px rgba(20, 18, 16, 0.6);
}
.karte--mosaik .mosaik-gross { grid-column: span 2; grid-row: span 2; }
.karte--mosaik .mosaik-hoch { grid-row: span 2; }
@media (min-width: 700px) {
  .karte--mosaik { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(100px, 11vw); }
}
/* Helle Karte: Text oben, Fotos als Leiste unten */
.karte--leiste {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr);
}
.karte--leiste .karte-text {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  align-items: start;
  column-gap: 1.5rem;
}

/* Zwei Spalten erst ab 1100 px, darunter waeren die Textspalten zu schmal */
@media (min-width: 1100px) {
  .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Titelkarte und eine allein uebrig bleibende letzte Karte ueber beide Spalten */
  .karte--breit { grid-column: 1 / -1; aspect-ratio: 12 / 5; }
  /* breite Bild-Text-Karte: Foto und Text je halb, damit Querformate kaum beschnitten werden */
  .karte--text-bild.karte--breit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* breite Titelkarte 12:5 -> Hochformat-Foto 3:4 braucht 5 zu 11 Teile */
  .karte--titel.karte--bild-hoch.karte--breit { grid-template-columns: minmax(0, 5fr) minmax(0, 11fr); }
  /* Breite Karte ohne mehr Hoehe als eine einzelne Kartenreihe: fuer eine sonst
     allein uebrig bleibende Karte, die nur die Bildbreite braucht, nicht mehr Platz */
  .karte--breit-flach { aspect-ratio: 13 / 4; }
  /* Mosaik behaelt seine eigene Zeilenhoehe statt der festen 12:5-Breitkarte */
  .karte--mosaik.karte--breit { aspect-ratio: auto; }
}

/* Handy: Karten untereinander, Foto und Text innerhalb der Karte gestapelt */
@media (max-width: 560px) {
  .karte { aspect-ratio: auto; }
  .karte--titel,
  .karte--text-bild { grid-template-columns: minmax(0, 1fr); }
  .karte--titel figure,
  .karte--text-bild figure,
  .karte--vollbild figure { aspect-ratio: 4 / 3; }
  .karte--text-bild .karte-text { padding: 0.4rem 0.2rem 0.6rem; }
  .karte--titel.karte--bild-hoch { grid-template-columns: minmax(0, 1fr); }
  .karte--titel.karte--bild-hoch figure { aspect-ratio: 3 / 4; }
  .karte--paar, .karte--trio { aspect-ratio: 3 / 2; }
  .karte--streifen { display: flex; flex-wrap: wrap; }
  .karte--streifen .karte-text { flex: 0 0 100%; }
  .karte--streifen figure { flex: 1 1 0; aspect-ratio: 3 / 4; }
  .karte--streifen .vn-rahmen { flex: 1 1 100%; aspect-ratio: 4 / 3; }
  .karte--leiste { grid-template-rows: auto auto; }
  .karte--leiste .karte-text { grid-template-columns: minmax(0, 1fr); }
  .karte--leiste figure { aspect-ratio: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .karte figure img { transition: none; }
}

/* Projektfenster als einzelne, große Karte statt Vollseite (z.B. Über uns) */
.projektfenster--karte[data-ton] {
  background: rgba(20, 18, 16, 0.6);
  color: var(--noir);
}
.projektfenster--karte .projekt-buehne {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.4rem, 4vw, 3rem);
}
.projektfenster--karte .projekt-inhalt {
  width: min(34rem, 100%);
  max-height: 82vh;
  overflow-y: auto;
  padding: clamp(2.4rem, 5vw, 3.6rem);
  background:
    linear-gradient(rgba(245, 240, 230, 0.9), rgba(245, 240, 230, 0.9)),
    url("/assets/img/struktur-fels-sandstein-hell-480.jpg") center / cover;
  color: var(--noir);
  box-shadow: 0 45px 90px -30px rgba(20, 18, 16, 0.55);
}
.projektfenster--karte .projekt-inhalt h2 { color: var(--noir); }
.projektfenster--karte .projekt-text,
.projektfenster--karte .leistungsliste { color: var(--noir); }
/* .leistungsliste li hat sonst --text-soft (hell im Darkmode), auf dem
   immer hellen Kartengrund hier aber dunkel halten */
.projektfenster--karte .leistungsliste li { color: var(--noir); }
.projektfenster--karte .projekt-schliessen {
  color: var(--pale);
  border-color: var(--pale);
}
/* Handy: Die Karte ist fast so breit wie der Bildschirm und reichte oben
   in den Schliessen-Knopf (46 px, Abstand wie .projekt-schliessen top).
   Darum oben Platz fuer den Knopf lassen; die Karte scrollt in sich. */
@media (max-width: 860px) {
  .projektfenster--karte .projekt-buehne {
    padding-top: calc(clamp(1.2rem, 3vw, 2.2rem) + 46px + 0.8rem);
  }
  .projektfenster--karte .projekt-inhalt { max-height: 100%; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 18, 16, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  /* Browser soll Wischen nicht selbst als Scroll/Zoom deuten, das macht site.js */
  touch-action: none;
  transition: opacity 0.35s ease;
  padding: 4vh 4vw;
}
.lightbox.ist-offen {
  opacity: 1;
  visibility: visible;
}
.lightbox img {
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  object-fit: contain;
  box-shadow: var(--schatten);
}
/* Strukturbilder alle gleich gross: 20 % ueber den bisherigen 480 px */
.lightbox--struktur img { width: min(576px, 92vw, 84vh); }
.lightbox-schliessen,
.lightbox-vor,
.lightbox-zurueck {
  position: absolute;
  z-index: 2;
  background: none;
  border: 1px solid var(--line-invert);
  color: var(--pale);
  cursor: pointer;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lightbox-schliessen:hover,
.lightbox-vor:hover,
.lightbox-zurueck:hover {
  background: rgba(245, 240, 230, 0.1);
  border-color: var(--accent-on-dark);
}
.lightbox-schliessen { top: 4vh; right: 4vw; }
.lightbox-zurueck { left: 3vw; top: 50%; transform: translateY(-50%); }
.lightbox-vor { right: 3vw; top: 50%; transform: translateY(-50%); }
/* Bei nur einem Bild im Abschnitt macht Blaettern keinen Sinn: Pfeile weg */
.lightbox-vor[hidden],
.lightbox-zurueck[hidden] { display: none; }

/* ---------- Über Uns: Übersicht ---------- */
/* Ruhiges Datenraster. Die Ordnung entsteht allein aus Weissraum,
   Farbe und Schriftgroesse, ohne Linien oder Kaesten. Oben die drei
   kurzen Eckdaten, darunter die drei beschreibenden Felder. */
.steckbrief h2 { margin: 0 0 clamp(2.2rem, 4.5vw, 3.4rem); }
.steckbrief-daten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(2rem, 4.5vw, 4.5rem);
  row-gap: clamp(2.4rem, 4.5vw, 3.6rem);
  margin: 0;
}
.steckbrief-daten dt {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin-bottom: 0.8rem;
}
.steckbrief-daten dd {
  margin: 0;
  color: var(--pale);
  font-size: 1rem;
  line-height: 1.75;
}

/* Ruhige Schlusszeile mit Pfeil davor */
.schluss-link {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--text);
  font-size: 1.05rem;
}
.schluss-link svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--accent-text);
  transition: transform 0.25s var(--ease);
}
.schluss-link span {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.25s var(--ease);
  padding-bottom: 0.1em;
}
.schluss-link:hover svg,
.schluss-link:focus-visible svg { transform: translateX(6px); }
.schluss-link:hover span,
.schluss-link:focus-visible span { background-size: 100% 1px; }

.leistungsliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.leistungsliste li {
  padding-left: 1.6rem;
  position: relative;
  color: var(--text-soft);
}
.leistungsliste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

.vollbild {
  aspect-ratio: 16 / 8;
  overflow: hidden;
}
.vollbild img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Kontakt ---------- */
.kontakt-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
}
.formular-feld {
  margin-bottom: 1.5rem;
}
.formular-feld label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.55em;
}
.formular-feld input,
.formular-feld textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: var(--schrift-text);
  font-size: 1rem;
  color: var(--text);
  padding: 0.6em 0;
  transition: border-color 0.25s var(--ease);
}
.formular-feld input:focus,
.formular-feld textarea:focus {
  border-color: var(--accent);
}
.formular-feld input:focus-visible,
.formular-feld textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Chrome faerbt automatisch ausgefuellte Felder sonst gelb/blau statt
   transparent; Trick mit riesigem inset-Schatten in der Seitenfarbe ueberdeckt das,
   die lange transition verzoegert den Farbwechsel, den Chrome sofort erzwingt */
.formular-feld input:-webkit-autofill,
.formular-feld input:-webkit-autofill:hover,
.formular-feld input:-webkit-autofill:focus,
.formular-feld textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  box-shadow: 0 0 0 1000px var(--bg) inset;
  transition: background-color 9999s ease-in-out 0s;
}
.formular-feld textarea { resize: vertical; min-height: 120px; }
.formular-hinweis { font-size: 0.78rem; color: var(--text-muted); margin-top: -0.6rem; }

.checkbox-feld {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  margin-bottom: 1.8rem;
}
.checkbox-feld input {
  margin-top: 0.25em;
  accent-color: var(--accent);
}
.checkbox-feld label { font-size: 0.86rem; color: var(--text-soft); text-transform: none; }

.honeypot-feld {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.direktkontakt {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.5rem, 3vw, 2.6rem);
}
.direktkontakt dl { margin: 0; }
.direktkontakt dt {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 1.6rem 0 0.35em;
}
.direktkontakt dt:first-child { margin-top: 0; }
.direktkontakt dd {
  margin: 0 0 0.2em;
  font-family: var(--schrift-display);
  font-size: 1.2rem;
}
.formular-status {
  padding: 1rem 1.2rem;
  border-left: 2px solid var(--accent);
  background: var(--bg-soft);
  font-size: 0.92rem;
  margin-bottom: 1.6rem;
}
.formular-status.fehler { border-left-color: #9a4b3f; }

/* ---------- FAQ ---------- */
.faq-eintrag {
  border-bottom: 1px solid var(--line);
}
.faq-frage {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  font-family: var(--schrift-display);
  font-size: 1.15rem;
  color: var(--text);
}
.faq-frage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
.faq-frage .plus {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
}
.faq-frage .plus::before,
.faq-frage .plus::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform 0.25s var(--ease);
}
.faq-frage .plus::before { left: 0; top: 50%; width: 100%; height: 1px; margin-top: -0.5px; }
.faq-frage .plus::after { top: 0; left: 50%; height: 100%; width: 1px; margin-left: -0.5px; }
.faq-eintrag[data-offen="true"] .plus::after { transform: rotate(90deg); opacity: 0; }
.faq-antwort {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.faq-antwort-inner {
  padding: 0 0 1.6rem;
  max-width: 42em;
}
.faq-antwort-inner p { color: var(--text-soft); }

/* ---------- Rechtstexte ---------- */
.rechtstext {
  max-width: 720px;
}
.rechtstext h2 { margin-top: 2.2em; font-size: 1.5rem; }
.rechtstext h3 { font-size: 1.15rem; margin-top: 1.6em; }
.rechtstext ul { padding-left: 1.2em; }
.rechtstext a { color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--line); }

/* ---------- Danke-Seite ---------- */
.danke {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 8rem;
}

/* ---------- Fußbereich ---------- */
.fuss {
  background: var(--bg-deepest);
  color: rgba(245, 240, 230, 0.78);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
}
.fuss-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-invert);
}
.fuss-marke img { height: 30px; width: auto; margin-bottom: 1.1rem; }
.fuss-marke p { font-size: 0.9rem; max-width: 26em; color: rgba(245, 240, 230, 0.6); }
.fuss h4 {
  font-family: var(--schrift-text);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin-bottom: 1.1em;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7em; }
.fuss ul a { font-size: 0.92rem; transition: color 0.2s var(--ease); }
.fuss ul a:hover { color: var(--pale); }
/* Menuespalte im selben Zeilenabstand wie der Text links daneben */
.fuss-marke + .fuss-spalte ul { gap: 0; font-size: 0.92rem; line-height: calc(0.9rem * 1.65); }
.nowrap { white-space: nowrap; }
.fuss-unten {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.8rem;
  font-size: 0.8rem;
  color: rgba(245, 240, 230, 0.45);
  flex-wrap: wrap;
}
.fuss-unten ul { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; }
.fuss-unten a { transition: color 0.2s var(--ease); }
.fuss-unten a:hover { color: var(--pale); }

/* Newsletter-Band oben im Fussbereich, darunter die Social-Icons mittig */
.fuss-newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--accent-on-dark);
}
.fuss-newsletter h2 {
  font-size: clamp(2.1rem, 3.2vw, 2.75rem);
  color: var(--pale);
  margin: 0 0 0.75em;
}
.fuss-newsletter-text p {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 32em;
  margin: 0;
  color: rgba(245, 240, 230, 0.85);
}
.newsletter-formular {
  width: 100%;
  max-width: 360px;
  margin-top: 0.4rem;
}
.newsletter-formular input[type="email"],
.newsletter-formular button {
  display: block;
  width: 100%;
  border-radius: 3px;
  font-family: var(--schrift-text);
  color: var(--noir);
  background: var(--pale);
}
.newsletter-formular input[type="email"] {
  height: 42px;
  padding: 0 0.75rem;
  border: 1px solid rgba(245, 240, 230, 0.35);
  font-size: 0.9rem;
}
.newsletter-formular input[type="email"]::placeholder { color: #8a857c; opacity: 1; }
/* Autofill soll das helle Feld nicht blau/dunkel faerben */
.newsletter-formular input[type="email"]:-webkit-autofill,
.newsletter-formular input[type="email"]:-webkit-autofill:hover,
.newsletter-formular input[type="email"]:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--noir);
  -webkit-box-shadow: 0 0 0 1000px var(--pale) inset;
  box-shadow: 0 0 0 1000px var(--pale) inset;
  transition: background-color 9999s ease-in-out 0s;
}
.newsletter-formular button {
  height: 40px;
  margin-top: 1.25rem;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s var(--ease);
}
.newsletter-formular button:hover { background: var(--accent-on-dark); }
.newsletter-formular input[type="email"]:focus-visible,
.newsletter-formular button:focus-visible {
  outline: 2px solid var(--accent-on-dark);
  outline-offset: 2px;
}
.newsletter-hinweis {
  margin: 0.9rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(245, 240, 230, 0.5);
}
.newsletter-hinweis a { text-decoration: underline; text-underline-offset: 2px; }
.newsletter-hinweis a:hover { color: var(--pale); }
.fuss ul.fuss-social.fuss-social--mitte {
  justify-content: center;
  gap: 1.5rem;
  padding: 2.2rem 0 clamp(3.5rem, 7vw, 6rem);
}
.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 860px) {
  .fuss-newsletter { grid-template-columns: 1fr; gap: 1.8rem; }
  .newsletter-formular { max-width: none; margin-top: 0; }
  .newsletter-formular input[type="email"] { height: 46px; font-size: 1rem; }
  .newsletter-formular button { height: 46px; }
}

/* ---------- Skip-Link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  z-index: 2000;
  background: var(--pale);
  color: var(--noir);
  padding: 0.7em 1.2em;
  font-size: 0.9rem;
  box-shadow: 0 4px 16px rgba(20, 18, 16, 0.3);
}
.skip-link:focus { left: 1rem; }

/* =========================================================
   Responsive — eigener Durchgang für schmale Bildschirme
   ========================================================= */
@media (max-width: 1080px) {
  .stimmen { grid-template-columns: repeat(2, 1fr); }
  .schritte { grid-template-columns: repeat(3, 1fr); row-gap: 2.2rem; }
  .fuss-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .struktur-vn-reihe { gap: 2rem; }
  .struktur-vn-links { flex: 0 0 54%; }
}
@media (max-width: 860px) {
  .struktur-vn-reihe { flex-direction: column; }
  .struktur-vn-links { flex: none; width: 100%; }
  /* Feste Hoehe galt nur fuer die Ausrichtung neben der Farbreihe im Desktop-Layout;
     im gestapelten Handy-Layout sonst abgeschnitten, deshalb hier zurueck auf Seitenverhaeltnis */
  .struktur-vn-rechts .vn-rahmen { height: auto; aspect-ratio: 16 / 10; }
}

@media (max-width: 860px) {
  .burger { display: block; }
  .hauptnav {
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--bg-deepest);
    flex-direction: column;
    justify-content: center;
    gap: 2.2rem;
    transform: translateY(-100%);
    transition: transform 0.45s var(--ease);
    z-index: 90;
  }
  body.nav-offen .hauptnav { transform: translateY(0); }
  .hauptnav a { color: var(--pale); font-size: 1.1rem; }
  /* Menue-Knopf liegt ueber dem geoeffneten Menue (z-index 90) und wird dort
     hell, damit das Schliessen-Kreuz auf der dunklen Flaeche sichtbar bleibt */
  .burger { z-index: 91; }
  body.nav-offen .burger { color: var(--pale); }
  .kopf-aktionen { gap: 0.6rem; }
  .kopf-aktionen .knopf { display: none; }
  /* Ersetzt den normalen Knopf: bleibt zwischen Logo und Menue-Knopf
     sichtbar, auch wenn das Menue eingeklappt ist, nur kleiner */
  .kopf-aktionen .knopf-mobil {
    display: inline-flex;
    padding: 0.55em 0.85em;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .buehne-inhalt { padding-bottom: 25rem; }
  .merkmalsleiste ul { grid-template-columns: repeat(2, 1fr); }
  .merkmalsleiste li { padding: 1.1rem 1.4rem 1.3rem; }
  .merkmalsleiste li:nth-child(3) { border-left: none; }
  .merkmalsleiste li:nth-child(odd) { border-left: none; padding-left: 1rem; }
  .merkmalsleiste li:nth-child(even) { padding-right: 1rem; }
  /* "Mietwohnungstauglich" ist ein langes Wort ohne Leerzeichen: passt bei
     zwei Spalten sonst gerade noch allein in die Zeile, das Icon rutscht
     dann eine Zeile tiefer statt daneben zu stehen */
  .merkmalsleiste strong { font-size: 0.76rem; }
  .merkmal-ico { margin-left: 0.35rem; }

  .einfuehrung { grid-template-columns: 1fr; }
  .einfuehrung-bild { order: -1; aspect-ratio: 16/11; }
  .gedanken-grid { grid-template-columns: 1fr; gap: 1.6rem; }

  .bereiche-grid { grid-template-columns: 1fr; }
  .bereich { aspect-ratio: 16/10; }

  .schritte { grid-template-columns: repeat(2, 1fr); }

  .farbreihe { grid-template-columns: repeat(3, 1fr); }

  .rahmen-layout {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
  }
  /* display:contents loest den Rahmen auf: Titel und Text werden zu eigenen
     Feldern im Raster, der Text rueckt dadurch neben das erste Bild statt
     darueber leeren Platz zu lassen (Bild B braucht die volle Zeile fuer sich) */
  .rahmen-links {
    display: contents;
  }
  .rahmen-titel { grid-column: span 2; font-size: clamp(1.9rem, 6vw, 2.8rem); }
  .rahmen-links .lead { font-size: 0.92rem; }
  .bw-fig {
    position: static;
    width: auto;
    height: auto;
    aspect-ratio: 3 / 4;
  }
  .bw-b { grid-column: span 2; aspect-ratio: 3 / 2; }

  .stimmen { grid-template-columns: 1fr; }

  .steckbrief-daten { grid-template-columns: 1fr; }
  .kontakt-grid { grid-template-columns: 1fr; }
  .direktkontakt { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 2rem; }

  .fuss-grid { grid-template-columns: 1fr 1fr; gap: 2.2rem; }
  .fuss-grid .fuss-marke { grid-column: span 2; }
  .fuss-unten { flex-direction: column; align-items: flex-start; }
  /* Adress-Spalte im selben Zeilenabstand wie die Menuespalte daneben */
  .fuss-marke + .fuss-spalte + .fuss-spalte ul { gap: 0; font-size: 0.92rem; line-height: calc(0.9rem * 1.65); }

  .lightbox-vor, .lightbox-zurueck { width: 40px; height: 40px; }
}

@media (max-width: 560px) {
  .buehne { min-height: 100vh; }
  .schritte { grid-template-columns: 1fr; }
  .farbreihe { grid-template-columns: repeat(2, 1fr); }
  .schlusszeile { flex-direction: column; align-items: flex-start; }
  .stimme { padding: 1.6rem 1.4rem; }
}

/* Social-Icons im Fussbereich */
.fuss ul.fuss-social {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  align-items: center;
}
.fuss-social li { margin: 0; }
.fuss-social a {
  display: block;
  color: var(--accent-on-dark);
  opacity: 0.9;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.fuss-social svg { width: 22px; height: 22px; display: block; }
.fuss-social a:hover,
.fuss-social a:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}

/* Auffaelliger PDF-Download (AGB) */
.pdf-kasten {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: 46rem;
  margin: 0 0 clamp(2.4rem, 4vw, 3.4rem);
  padding: 1.15rem 1.4rem;
  border: 1px solid var(--accent);
  background: var(--bg-soft);
  color: var(--text);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.pdf-kasten svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--accent-text); }
.pdf-kasten strong {
  display: block;
  font-family: var(--schrift-display);
  font-size: 1.08rem;
  font-weight: 500;
  margin-bottom: 0.15em;
}
.pdf-kasten span { font-size: 0.88rem; color: var(--text-muted); }
.pdf-kasten:hover,
.pdf-kasten:focus-visible {
  background: var(--bg-hover);
  border-color: var(--accent-text);
}

/* Bilder haben feste Masse im Markup, die Darstellung regelt das CSS */
.wandbild img { width: 100%; height: 100%; }
.farbkachel img,
.ueberblick-bild img,
.bereich img,
.einfuehrung-bild img,
.vollbild img,
.buehne-bild img { width: 100%; height: 100%; }