/* =========================================================
   Felswand Deluxe — styles.css
   Aufbau:
   01 Tokens · 02 Reset · 03 Utilities · 04 Typografie/Buttons
   05 Kopf/Navigation · 06 Hero · 07 Manifest · 08 Inspiration
   09 Interlude · 10 Einsatzbereiche · 11 Ablauf · 12 Anfrage
   13 Fußzeile · 14 Rechtsseiten · 15 Blog · 16 Beitrag
   17 Cookie-Einwilligung · 18 Motion · 19 Druck
   ========================================================= */

/* ---------- 01 Tokens ---------- */
:root {
  --bg:            #0E0D0B;
  --bg-warm:       #1A1208;

  --ink:           #EFE8DA;
  --ink-2:         #D8CFBE;
  --ink-muted:     #BDB3A1;
  --ink-faint:     #958C7B;
  --ink-dim:       #8F8676;

  --accent:        #C9A464;
  --accent-light:  #E8C98A;
  --accent-deep:   #8A6A2E;
  --error:         #E79A74;

  --line:          #3A3222;
  --line-soft:     #2A2418;
  --line-field:    #5A4A2C;
  --rule:          #5A5F66;

  --font:          'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-brand:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pad-x:         clamp(24px, 4vw, 64px);
  --section-y:     clamp(120px, 16vh, 200px);
  --wrap:          1600px;

  --ease:          cubic-bezier(.2, .7, .2, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Sprungziele nicht unter den fixierten Kopf schieben */
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* Muss vor allen display-Regeln stehen und !important tragen: eine Klasse wie
   .danke { display:flex } schlägt sonst die eingebaute Regel [hidden]{display:none}
   des Browsers, und ausgeblendete Bereiche wären trotzdem sichtbar. */
[hidden] { display: none !important; }

/* blockquote gehört mit in den Reset: Browser geben ihm von Haus aus
   margin: 1em 40px, was das Manifest-Zitat gegenüber allen anderen
   Abschnitten eingerückt und vertikal versetzt darstellen würde. */
h1, h2, h3, h4, p, figure, blockquote, dl, dd, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
ul, ol { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }

a { color: var(--accent); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--accent-light); }

button { font: inherit; color: inherit; }
input, textarea, select { font: inherit; }
::placeholder { color: #7D7566; opacity: 1; }
::selection { background: var(--accent-deep); color: var(--bg); }

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

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

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 300;
  background: var(--accent);
  color: var(--bg);
  padding: 12px 22px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--bg); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; }
.section-pad { padding: var(--section-y) var(--pad-x); }

/* ---------- 04 Typografie & Schaltflächen ---------- */
/* Archivo ist eine Variable Font mit Breitenachse. font-stretch trägt hier
   die Markenwirkung — ohne sie wirken die Überschriften beliebig. */
.eyebrow {
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Die Marke setzt alle Schauüberschriften in Versalien. Das steht hier und
   nicht im Markup, damit der Quelltext lesbar bleibt und Vorlesesoftware die
   Wörter nicht buchstabiert. */
.display {
  font-stretch: 125%;
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 72px);
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-wrap: balance;
  /* In Versalien werden lange Komposita wie DATENSCHUTZERKLÄRUNG breiter als
     die Spalte. Ohne diese Zeile schiebt ein einzelnes Wort die Seite auf. */
  overflow-wrap: break-word;
  /* Bricht deutsche Komposita an der Silbe statt irgendwo — greift, weil das
     html-Element lang="de" trägt. Ohne das würde aus WANDGESTALTUNG etwa
     WANDGESTALTU/NG. */
  hyphens: auto;
}
.display--xl {
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 96px);
  line-height: .95;
  letter-spacing: .04em;
}
.display__soft { font-weight: 300; color: var(--accent-light); }

.lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 22px 30px;
  background: var(--accent);
  color: var(--bg);
  border: 0;
  font-stretch: 125%;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background .3s ease, color .3s ease;
}
.btn:hover { background: var(--accent-light); color: var(--bg); }
.btn__arrow { font-size: 18px; line-height: 1; }
.btn--small { padding: 12px 18px; font-size: 11px; letter-spacing: .18em; gap: 10px; }
.btn--wide { justify-content: space-between; width: 100%; }

/* Auf schmalen Schirmen passt "Beratungstermin anfragen" mit Sperrsatz nicht
   in eine Zeile — ohne Umbruch schiebt die Schaltfläche die ganze Seite auf. */
@media (max-width: 560px) {
  .btn {
    white-space: normal;
    justify-content: center;
    text-align: center;
    padding: 18px 20px;
    letter-spacing: .16em;
    gap: 12px;
  }
  .hero__actions .btn,
  .insp-foot .btn,
  .blog-cta__inner .btn { width: 100%; }
}

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--accent-light);
  font-stretch: 125%;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--accent-deep);
  padding-bottom: 10px;
}
.link-underline:hover { color: var(--ink); border-bottom-color: var(--accent-light); }

/* ---------- 05 Kopf & Navigation ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 24px var(--pad-x);
  background: transparent;
  transition: background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
/* Ab dem ersten Scrollen deckend, damit die Navigation über hellen
   Bildstellen lesbar bleibt. */
.site-header.is-scrolled {
  background: rgba(14, 13, 11, .94);
  border-bottom-color: var(--line-soft);
  padding-block: 16px;
}

.brand { display: flex; align-items: center; gap: 14px; color: var(--ink); flex: 0 0 auto; }
.brand:hover { color: var(--ink); }
.brand__text { display: flex; flex-direction: column; align-items: center; gap: 5px; line-height: 1; }
.brand__name {
  font-family: var(--font-brand);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: .42em;
  margin-right: -.42em;
}
.brand__sub { display: flex; align-items: center; gap: 8px; }
.brand__rule { width: 14px; height: 1px; background: var(--rule); }
.brand__suffix {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .78em;
  margin-right: -.78em;
  color: var(--accent);
}

.site-nav { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 40px); min-width: 0; }
/* Nur im aufgeklappten Menü. In der waagerechten Leiste gibt es dafür keinen
   Platz, dort steht die Nummer im Fußbereich und im Kontaktabschnitt. */
.site-nav__tel { display: none; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 40px);
  list-style: none;
}
.site-nav__list a {
  font-size: clamp(10px, .85vw, 11px);
  letter-spacing: clamp(.12em, .2vw, .22em);
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.site-nav__list a:hover,
.site-nav__list a.is-current { color: var(--accent-light); }
.site-nav__list a.is-current { border-bottom: 1px solid var(--accent); padding-bottom: 4px; }

/* ---------- Untermenü in der waagerechten Leiste ----------
   Öffnet über :hover und :focus-within, braucht also kein JavaScript und ist
   per Tabulator erreichbar. Unterhalb von 1040px wird all das zurückgesetzt
   (siehe Mobilblock weiter unten), weil die Navigation dort ein Overlay ist
   und Hover auf Berührungsgeräten nicht funktioniert. */
.site-nav__item--unter { position: relative; }
.site-nav__pfeil {
  display: inline-block; margin-left: 6px;
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s var(--ease);
}
.site-nav__item--unter:hover .site-nav__pfeil,
.site-nav__item--unter:focus-within .site-nav__pfeil { transform: translateY(0) rotate(-135deg); }

.site-nav__unter {
  position: absolute; top: 100%; left: -16px;
  z-index: 60;
  min-width: 190px;
  margin: 0; padding: 14px 16px;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--line);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
/* Unsichtbare Brücke: Ohne sie reißt der Hover auf dem Weg vom Elternlink
   zum Panel ab, weil dazwischen die Kopfzeilen-Polsterung liegt. */
.site-nav__unter::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: -18px; height: 18px;
}
.site-nav__item--unter:hover > .site-nav__unter,
.site-nav__item--unter:focus-within > .site-nav__unter {
  opacity: 1; visibility: visible; transform: none;
}
.site-nav__unter a { display: block; padding: 8px 0; color: var(--ink-muted); }
.site-nav__unter a:hover,
.site-nav__unter a.is-current { color: var(--accent-light); }
.site-nav__unter a.is-current { border-bottom: 0; padding-bottom: 8px; }
@media (prefers-reduced-motion: reduce) {
  .site-nav__unter, .site-nav__pfeil { transition: none; }
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-toggle__bars { display: block; width: 18px; height: 10px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .3s ease;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after  { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 1040px) {
  .nav-toggle { display: inline-flex; }

  /* Die Menüfläche ist ein Kind des Kopfes und deckt beim Öffnen alles ab.
     Ein höherer z-index am Kopf hilft deshalb nicht — Logo und Umschalter
     brauchen ihren eigenen, höheren Stapelwert innerhalb des Kopfes.
     Sonst liegt das X unter der Fläche und lässt sich nicht anklicken. */
  .site-header.nav-offen {
    background: transparent;
    border-bottom-color: transparent;
  }
  /* Ab sechs Einträgen wird die Menüfläche auf niedrigen Geräten scrollbar
     (375×812: 1140px Inhalt gegen 812px Fläche). Beim Scrollen wandern die
     Einträge dann sichtbar hinter das Logo, weil der Kopf selbst UNTER der
     Fläche liegt — z-index 100 gegen 110 — und sein eigener Hintergrund damit
     verdeckt wird. Dieser Streifen liegt zwischen beiden und fängt ab, was
     nach oben herausläuft. Die 112px Polsterung der Fläche halten ihn frei,
     er verdeckt also nichts, was im Ruhezustand sichtbar wäre. */
  .site-header.nav-offen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 120;
    background: var(--bg);
    pointer-events: none;
  }
  .site-header.nav-offen .brand,
  .site-header.nav-offen .nav-toggle { position: relative; z-index: 130; }
  .site-header.nav-offen .nav-toggle { border-color: var(--accent-deep); }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 110;
    flex-direction: column;
    align-items: stretch;
    /* Zentriert, solange der Inhalt in den Bildschirm passt. Läuft er über —
       etwa durch das Untermenü auf niedrigen Geräten —, steht reines `center`
       oben wie unten über, der erste Eintrag gerät unter das Logo und ist
       weder lesbar noch wegscrollbar. `safe center` kippt in diesem Fall auf
       Oberkante; Browser ohne `safe` nehmen die Zeile davor und stehen dann
       immer oben, was ebenfalls korrekt aussieht. */
    justify-content: flex-start;
    justify-content: safe center;
    gap: 0;
    /* Muss den fixierten Kopf freihalten: 24px Polsterung + 46px Umschalter
       + 24px Polsterung = 94px. 112px lässt etwas Luft. */
    padding: 112px var(--pad-x) 48px;
    background: var(--bg);
    transform: translateY(-100%);
    transition: transform .5s var(--ease);
    overflow-y: auto;
  }
  .site-nav.is-open { transform: none; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list a {
    display: block;
    padding: 22px 0;
    border-bottom: 1px solid var(--line-soft);
    font-stretch: 125%;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: .14em;
  }
  .site-nav__list a.is-current { border-bottom: 1px solid var(--line-soft); padding-bottom: 22px; }

  /* Im Overlay gibt es kein Hover. Das Untermenü steht deshalb dauerhaft
     offen und wird nur eingerückt und kleiner gesetzt, damit die Hierarchie
     erkennbar bleibt. Der Pfeil entfällt, er würde ein Aufklappen andeuten,
     das es hier nicht gibt. */
  .site-nav__pfeil { display: none; }
  .site-nav__unter {
    position: static;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    opacity: 1; visibility: visible; transform: none;
  }
  .site-nav__unter::before { content: none; }
  .site-nav__unter a {
    padding: 16px 0 16px 20px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 15px;
    letter-spacing: .14em;
    color: var(--ink-muted);
  }
  .site-nav__unter a::before {
    content: "—";
    margin-right: 10px;
    color: var(--accent-deep);
  }
  .site-nav__unter a.is-current { padding-bottom: 16px; }

  .site-nav .btn { margin-top: 32px; justify-content: center; }
  /* Rückt dicht unter „Beratung anfragen", damit beide als ein Block lesen. */
  .site-nav__tel {
    display: inline-flex;
    margin-top: 12px;
    font-size: 13px;
    letter-spacing: .12em;
  }
}

/* ---------- 06 Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  background: var(--bg-warm);
}
.hero__media { position: absolute; inset: 0; animation: fdKen 24s ease-in-out infinite alternate; }
.hero__media img,
.hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__media video { opacity: 0; transition: opacity 1.2s ease; }
.hero__media video.is-active { opacity: 1; }

.hero__veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(14,13,11,.55) 0%, rgba(14,13,11,0) 25%,
    rgba(14,13,11,.55) 50%, rgba(14,13,11,.9) 100%);
}

.hero__inner {
  position: absolute;
  left: var(--pad-x); right: var(--pad-x);
  bottom: clamp(48px, 9vh, 96px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.hero__copy { display: flex; flex-direction: column; gap: 28px; max-width: 1100px; }
.hero__kicker {
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent-light);
  text-shadow: 0 1px 12px rgba(14, 13, 11, .8);
}
.hero__title {
  font-stretch: 125%;
  font-weight: 700;
  /* Der untere Wert greift bis etwa 690 px Fensterbreite, die Verkleinerung
     wirkt sich also nur auf Tablet und Desktop aus. */
  font-size: clamp(40px, 5.8vw, 96px);
  line-height: .95;
  letter-spacing: .04em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(14, 13, 11, .5);
  text-transform: uppercase;
}
/* flex-basis: 100% zwingt den Block immer in eine eigene Zeile.
   Ohne das teilt er sich bei sehr breiten Fenstern (ab ca. 1698 px: 1100 px
   Text + 48 px gap + 434 px Button) die Zeile mit .hero__copy, und das
   justify-content: space-between von .hero__inner schiebt ihn an den rechten
   Rand — der Button stand dann 1343 px neben der Überschrift statt darunter.
   Darunter brach er ohnehin um; die Darstellung ist also unverändert. */
.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; flex-basis: 100%; }
.hero__note {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.hero__scroll {
  position: absolute;
  left: 50%; bottom: 22px;
  width: 1px; height: 28px;
  background: var(--accent);
  animation: fdDrop 2.4s ease-in-out infinite;
}

@keyframes fdKen { from { transform: scale(1.02) } to { transform: scale(1.14) } }
@keyframes fdDrop { 0%, 100% { transform: translateY(0); opacity: .3 } 50% { transform: translateY(10px); opacity: 1 } }

/* ---------- 07 Manifest ---------- */
/* Hatte als einzige Sektion der Startseite `max-width: var(--wrap)` und
   `margin-inline: auto`. Ab 1600 px Fensterbreite stand sie damit eingerückt,
   während alle anderen über die volle Breite laufen: bei 1920 px begann ihre
   Eyebrow bei x 217 statt bei 64. Der Deckel ist am 23.10.2026 entfallen —
   begrenzt wird jetzt nur noch der Zitatblock selbst (siehe unten), nicht die
   Sektion. Wer hier wieder einen Deckel setzt, rückt sie erneut aus der Flucht. */
.manifest {
  padding: clamp(120px, 18vh, 220px) var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 48px;
}
.manifest .eyebrow { padding-top: 14px; }
/* Hält den Umbruch des Zitats auf zwei Zeilen, wie vor dem Entfallen des
   Sektions-Deckels. Ohne die Begrenzung stünde es ab 1900 px in einer
   einzigen, sehr langen Zeile. */
.manifest__body { display: flex; flex-direction: column; gap: 56px; max-width: 1100px; }
.manifest__quote {
  font-stretch: 112%;
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 52px);
  line-height: 1.22;
  letter-spacing: .005em;
  text-wrap: pretty;
}
/* Der Text füllt sich beim Scrollen von links. Ohne JavaScript bleibt er
   vollständig sichtbar — die Startwerte stehen deshalb auf 100%. */
.manifest__fill {
  color: transparent;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(#3A3428, #3A3428);
  background-size: var(--fa, 100%) 100%, 100% 100%;
}
.manifest__fill--accent {
  background-image: linear-gradient(var(--accent-light), var(--accent-light)), linear-gradient(#3A3428, #3A3428);
  background-size: var(--fb, 100%) 100%, 100% 100%;
}
.manifest__source {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--accent-light);
  font-stretch: 125%;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.manifest__source::before { content: ""; width: 40px; height: 1px; background: var(--accent-deep); }
/* <cite> ist im Browser kursiv voreingestellt. Die Quellenangabe soll aussehen
   wie zuvor als reiner Text — die Auszeichnung dient der Semantik, nicht der Optik. */
.manifest__source cite { font-style: normal; }

@media (max-width: 860px) {
  .manifest { grid-template-columns: 1fr; gap: 28px; }
  .manifest .eyebrow { padding-top: 0; }
}

/* ---------- 07b Verfahren ---------- */
/* Der einzige längere Fließtext der Startseite, in zwei Spalten gesetzt:
   links die Definition mit den beiden Kennzahlen, rechts die drei
   Abgrenzungen. Als durchlaufender Block wäre der Text auf breiten Schirmen
   entweder zu lang in der Zeile oder eine halbleere Spalte — so bleibt die
   Zeilenlänge lesbar und die Fläche trotzdem gefüllt. */
.verfahren {
  position: relative;
  /* Eigener Stapelkontext: hält das z-index: -1 der Textur unter dem Text
     dieser Sektion, aber über dem Seitenhintergrund. */
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vh, 88px);
  padding: var(--section-y) var(--pad-x) 0;
}
/* Der Abstand kommt hier aus dem gap der Sektion, nicht aus dem Kopf. */
.verfahren .section-head { margin-bottom: 0; }

/* Schiefer oben rechts, an beiden Achsen weich ausgeblendet, damit keine
   sichtbare Bildkante entsteht. Zwei Masken, die sich überschneiden —
   wo mask-composite fehlt, addieren sie sich und die Textur bleibt
   sichtbar; das ist der harmlose Ausfall. */
.verfahren__tex {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: clamp(320px, 42vw, 760px);
  height: min(100%, 900px);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 25%, transparent 100%),
                      linear-gradient(180deg, transparent 0%, #000 25%, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(270deg, #000 0%, #000 25%, transparent 100%),
                      linear-gradient(180deg, transparent 0%, #000 25%, #000 60%, transparent 100%);
          mask-composite: intersect;
}
/* Deckkraft .32 statt .45: Bei 1100–1300 px laufen die hellen
   Schieferkanten genau unter dem Fließtext der rechten Spalte durch; mit .45
   fiel der Kontrast dort auf 3,9:1 und damit unter die Grenze von 4,5:1.
   Gemessen über 320–1920 px, schlechtester Wert jetzt 5,6:1. */
.verfahren__tex img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }

/* minmax(min(100%, 420px), 1fr): unter 420px Spaltenbreite klappt das Raster
   von selbst auf eine Spalte um — das min(100%) verhindert, dass die 420px
   auf schmalen Geräten die Seite aufschieben. */
.verfahren__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}

.verfahren__intro {
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* Deckelt die Zeilenlänge der Definition auf rund 48 Zeichen. Ohne das
     liefe sie einspaltig über die volle Seitenbreite — derselbe Grund, aus
     dem dieser Abschnitt vorher schon auf 68ch begrenzt war. */
  max-width: 620px;
}
.verfahren__lead {
  margin: 0;
  font-stretch: 112%;
  font-weight: 300;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.5;
  text-wrap: pretty;
}
.verfahren__mark { color: var(--accent-light); }

.verfahren__zahlen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line);
}
.verfahren__zahl { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 0 0; }
.verfahren__zahl + .verfahren__zahl { padding: 28px 0 0 24px; border-left: 1px solid var(--line); }
.verfahren__zahl dt {
  font-stretch: 125%;
  font-weight: 200;
  font-size: clamp(40px, 4vw, 64px);
  line-height: .9;
  color: var(--accent);
}
/* Nur konturiert, wo der Browser das kann — sonst bliebe die Zahl bei
   color: transparent unsichtbar statt bloß gefüllt. */
@supports (-webkit-text-stroke: 1px currentColor) {
  .verfahren__zahl dt { color: transparent; -webkit-text-stroke: 1px var(--accent); }
}
/* Die Beschriftung ist das, was die Zahl überhaupt lesbar macht — „25–300“
   allein sagt nichts. Sie steht deshalb heller und fetter als die Zahl
   darüber, die nur konturiert ist, und bekommt einen kurzen Goldstrich
   davor. Ton in Ton mit den Eyebrows der Sektionen. */
.verfahren__zahl dd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-stretch: 112%;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
}
.verfahren__zahl dd::before {
  content: "";
  flex: 0 0 16px;
  height: 1px;
  background: var(--accent);
}

.verfahren__punkte {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.verfahren__punkt {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}
.verfahren__nr { padding-top: 4px; font-size: 12px; letter-spacing: .2em; color: var(--accent); }
.verfahren__punkt h3 {
  margin: 0 0 14px;
  font-stretch: 125%;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink);
}
.verfahren__punkt p {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.7;
  text-wrap: pretty;
}
.verfahren__punkt a { border-bottom: 1px solid var(--accent-deep); }
.verfahren__punkt a:hover { border-bottom-color: var(--accent-light); }

.verfahren__cta { align-self: flex-start; }

/* Seit die Beschriftung Strich, Fettung und 12 px trägt, misst „MM
   RELIEFTIEFE“ rund 175 px. Nebeneinander bleiben in einer Spalte unter
   520 px Fensterbreite weniger als das übrig — statt die Schrift dort
   kleiner zu machen (dann wäre die Hervorhebung wieder weg), stehen die
   beiden Kennzahlen untereinander. Die Zahl behält dadurch ihre volle
   Größe, der Strich bleibt in einer Zeile mit dem Wort. */
@media (max-width: 520px) {
  .verfahren__zahlen { grid-template-columns: minmax(0, 1fr); }
  .verfahren__zahl { padding: 24px 0 0; }
  .verfahren__zahl + .verfahren__zahl {
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .verfahren__nr { font-size: 11px; }
  .verfahren__punkt { grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
}

/* ---------- 08 Inspiration ---------- */

.inspiration { padding: var(--section-y) var(--pad-x) 0; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
/* min-width: 0 ist hier Pflicht, nicht Kosmetik: Als Flex-Kind bekommt dieser
   Block sonst min-width: auto und wird so breit wie sein längstes Wort — bei
   „Wandgestaltung" in Versalien sind das 450px in einem 411px breiten Eltern-
   element, und die Überschrift ragt rechts aus dem Raster. Derselbe Fehler war
   zuvor schon bei .blog-hero__titles aufgetreten. */
.section-head__titles { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.section-head .lead { max-width: 380px; }

.insp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .insp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .insp-grid { grid-template-columns: 1fr; } }

.insp-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4.4;
  overflow: hidden;
  color: var(--ink);
  background: var(--bg-warm);
}
/* <picture> ist von Haus aus inline. Ohne diese Regel bezieht sich die
   Höhe des Bildes auf das picture-Element statt auf die Karte. */
.insp-card picture { display: block; width: 100%; height: 100%; }
.insp-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
/* Die Karten sind keine Verweise mehr, deshalb ohne :focus-visible — ein
   <div> nimmt keinen Fokus an, der Selektor wäre nie erfüllt. */
.insp-card:hover img { transform: scale(1.07); }
.insp-card__veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14,13,11,0) 45%, rgba(14,13,11,.9) 100%);
}
.insp-card__body {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.insp-card__no { font-size: 11px; letter-spacing: .26em; color: var(--accent-light); }
.insp-card__name {
  font-stretch: 125%;
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 26px);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.insp-card__desc { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.insp-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.insp-foot p {
  max-width: 620px;
  font-stretch: 112%;
  font-weight: 300;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.3;
  text-wrap: pretty;
}

/* Die beiden Wege aus der Inspirations-Sektion. Als eigene Flex-Gruppe, damit
   `space-between` des Elternteils weiterhin Text links und Aktionen rechts
   auseinanderzieht — mit drei direkten Kindern stünde stattdessen der
   Galerieverweis einsam in der Mitte. */
.insp-foot__aktionen {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* ---------- 09 Interlude ---------- */
.interlude {
  position: relative;
  height: clamp(1100px, 150vh, 1500px);
  margin-top: var(--section-y);
  overflow: hidden;
}
.interlude figure { position: absolute; margin: 0; will-change: transform; }
.interlude figure > div { overflow: hidden; background: var(--bg-warm); }
.interlude img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.interlude figure:hover img { transform: scale(1.06); }
.interlude figcaption {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 12px;
  font-size: 10px; letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.interlude figcaption span:last-child { color: var(--accent); }

.interlude__a { left: 4%;  top: 4%;  width: 30%; z-index: 1; }
.interlude__b { right: 4%; top: 10%; width: 44%; z-index: 1; }
.interlude__c { left: 26%; top: 50%; width: 26%; z-index: 0; }
/* Tiefer gesetzt als im Entwurf: Bei 62 % stieß die Oberkante direkt an die
   Unterkante von „GEMACHT FÜR SIE." — beide liegen waagerecht übereinander. */
.interlude__d { right: 6%; top: 70%; width: 40%; z-index: 1; }
.interlude__a > div { aspect-ratio: 4 / 5; }
.interlude__b > div { aspect-ratio: 16 / 10; }
.interlude__c > div { aspect-ratio: 3 / 4; }
.interlude__d > div { aspect-ratio: 21 / 10; }

.interlude__words {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--pad-x);
}
.interlude__w1 {
  font-stretch: 125%; font-weight: 300;
  font-size: clamp(24px, 3.4vw, 56px);
  letter-spacing: .06em; line-height: 1;
  margin-left: 38%;
  text-transform: uppercase;
}
.interlude__w2 {
  font-stretch: 112%; font-weight: 800;
  font-size: clamp(40px, 8.4vw, 160px);
  letter-spacing: .01em; line-height: .95;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent-light);
  white-space: nowrap;
  margin: 32px 0;
  text-transform: uppercase;
}
.interlude__w3 {
  align-self: flex-end;
  font-stretch: 125%; font-weight: 700;
  font-size: clamp(24px, 3.4vw, 56px);
  letter-spacing: .06em; line-height: 1;
  color: var(--accent-light);
  padding: 14px 20px;
  text-transform: uppercase;
}
.interlude__cta { position: absolute; left: var(--pad-x); bottom: 6%; z-index: 4; }

@media (max-width: 860px) {
  .interlude { height: auto; padding: 0 var(--pad-x) 64px; }
  /* Ohne transform-Sperre: In diesem Bereich stehen die Bilder gestapelt im
     Textfluss, dort schaltet das Skript die Verschiebung selbst ab. */
  .interlude figure { position: static; width: 100%; margin-bottom: 28px; }
  .interlude__words { position: static; padding: 24px 0 40px; }
  .interlude__w1 { margin-left: 0; }
  .interlude__w2 { white-space: normal; -webkit-text-stroke-width: 1px; margin: 16px 0; }
  .interlude__w3 { align-self: flex-start; padding-inline: 0; }
  .interlude__cta { position: static; }
}

/* Telefon: zurück zur überlappenden Collage statt der gestapelten Vollbreiten
   aus dem Block darüber — dieselbe Bildsprache wie am Desktop, nur mit eigenen
   Maßen. Alle Werte hängen an vw bzw. an der daraus abgeleiteten Höhe, deshalb
   bleibt die Komposition über jede Telefonbreite hinweg identisch. */
@media (max-width: 640px) {
  .interlude {
    height: 222vw;
    padding: 0;
    margin-top: calc(var(--section-y) * .7);
  }
  .interlude figure {
    position: absolute;
    margin-bottom: 0;
  }
  .interlude figcaption { margin-top: 10px; font-size: 9px; letter-spacing: .24em; }

  /* Doppelte Klasse, weil .interlude figure (ein Typ mehr) sonst schwerer wiegt
     als .interlude__a und seine Vollbreite aus dem Block darüber behielte. */
  .interlude .interlude__a { left: 2%;  right: auto; top: 1.4%;  width: 48%; }
  /* Schiebt sich wie im Entwurf über die rechte Kante von „Wingsuit" und läuft
     zugleich über den rechten Rand hinaus; .interlude schneidet ab. */
  .interlude .interlude__b { left: 46%; right: auto; top: 18%;   width: 60%; }
  .interlude .interlude__c { left: 6%;  right: auto; top: 57.5%; width: 42%; }
  /* Nur hier 160:100 statt 21:10 — das Bild wird dadurch gut 25 px höher,
     deshalb auch höher angesetzt: Sonst stünde „GRAT" auf einer Höhe mit
     der „III" von „Klettern".

     Linke Kante bei 49.6 % statt 46.4 %: „Klettern" läuft beim Scrollen viel
     schneller als „Grat" (TEMPO_MOBIL in main.js) und schiebt seine
     Unterschrift dabei an der von „Grat" vorbei. Bei 46.4 % überlappten sich
     „III" und „GRAT" waagerecht um 6 px und berührten sich im Moment des
     Vorbeilaufens. Jetzt endet „Klettern" bei 48 %, „Grat" beginnt dahinter —
     die Spalten sind frei, die Unterschriften können einander passieren.
     Die rechte Kante bleibt dank der kleineren Breite, wo sie war. */
  .interlude .interlude__d { left: 49.6%; right: auto; top: 67.5%; width: 43.4%; }
  .interlude .interlude__d > div { aspect-ratio: 160 / 100; }

  /* Schmalere Ränder als --pad-x, damit JAHRMILLIONEN wie im Entwurf fast von
     Kante zu Kante läuft. */
  .interlude__words {
    position: absolute;
    inset: 43% 5% auto 2%;
    display: block;
    padding: 0;
    text-align: right;
  }
  .interlude__w1 { display: block; margin-left: 0; font-size: 6.4vw; white-space: nowrap; }
  /* In vw bemessen und ohne Umbruch: Die Zeile füllt damit auf jeder
     Telefonbreite dieselbe Spalte, statt irgendwo umzubrechen. */
  .interlude__w2 {
    display: block;
    margin: 2.6vw 0;
    font-size: 8.8vw;
    white-space: nowrap;
    -webkit-text-stroke-width: 1.2px;
  }
  /* Kleiner als Zeile 1, obwohl sie fetter wirkt: „Gemacht für Sie." ist das
     längere Wort und bräuchte bei gleicher Größe 359 px in einer 349-px-Spalte. */
  .interlude__w3 { display: block; padding: 0; font-size: 5.7vw; white-space: nowrap; }

  .interlude__cta { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 3%; }
}

/* ---------- 10 Einsatzbereiche ---------- */
.einsatz {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--section-y) var(--pad-x);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.einsatz__bg {
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  width: clamp(320px, 36vw, 640px);
  aspect-ratio: 736 / 1308;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 45%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, #000 0%, #000 45%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
  mask-composite: intersect;
}
.einsatz__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .6;
  filter: grayscale(1) sepia(.85) saturate(1.3) brightness(.62) contrast(1.15);
}
.einsatz__head { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 32px; }
.einsatz__list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.einsatz__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 24px;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.einsatz__item:hover, .einsatz__item:focus-visible { color: var(--accent-light); }
.einsatz__no { font-size: 12px; letter-spacing: .2em; color: var(--accent); }
.einsatz__text { display: flex; flex-direction: column; gap: 10px; }
.einsatz__name {
  font-stretch: 125%; font-weight: 600;
  font-size: clamp(22px, 2.4vw, 38px);
  letter-spacing: .08em; line-height: 1.05;
  text-transform: uppercase;
}
.einsatz__desc { font-size: 15px; line-height: 1.55; color: var(--ink-muted); max-width: 520px; }
.einsatz__arrow { font-size: 22px; color: var(--accent); }

@media (max-width: 960px) {
  /* Einspaltig lag das Bild hinter der Liste: Die Zeilen standen mitten auf
     dem Fels und waren kaum zu lesen. Stattdessen wird daraus ein randloses
     Band am Kopf der Sektion, Überschrift darüber, Liste darunter auf Dunkel.
     Bild und Kopf teilen sich dieselbe Rasterzelle — damit sitzt die
     Überschrift ohne feste Pixelwerte immer an der Unterkante des Bildes. */
  .einsatz {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 36px;
    padding: clamp(64px, 8vh, 96px) 0 var(--section-y);
  }

  .einsatz__bg {
    grid-area: 1 / 1;
    position: relative;
    top: auto; left: auto;
    transform: none;
    z-index: auto;
    width: 100%;
    aspect-ratio: 9 / 8;
    /* Ohne Deckel würde das Band auf einem Tablet über 650 px hoch. Das Bild
       beschneidet dann über object-fit, statt die Sektion aufzublähen. */
    max-height: 60vh;
    /* Der untere Verlauf setzt früh an: Die Überschrift steht auf diesem
       Drittel und wäre auf dem hellen Fels sonst kaum zu lesen. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 42%, transparent 94%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 42%, transparent 94%);
  }
  .einsatz__bg img { opacity: .8; }

  .einsatz__head {
    grid-area: 1 / 1;
    align-self: end;
    position: relative;
    /* Muss mit zurückgesetzt werden: Das top der Sticky-Regel verschöbe den
       Kopf sonst als relativ positioniertes Element um 104 px nach unten. */
    top: auto;
    gap: 16px;
    padding: 0 var(--pad-x);
  }

  .einsatz__list { grid-area: 2 / 1; margin: 0 var(--pad-x); }
  .einsatz__item { grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 16px; padding: 28px 0; }
}

/* ---------- 11 Ablauf ---------- */
.ablauf { position: relative; overflow: hidden; background: var(--bg); }
.ablauf__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  opacity: .55;
}
.ablauf__veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(14,13,11,.55) 35%, rgba(14,13,11,.7) 70%, var(--bg) 100%);
}
.ablauf__route {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.ablauf__inner {
  position: relative;
  z-index: 2;
  padding: clamp(180px, 26vh, 320px) var(--pad-x) clamp(80px, 10vh, 140px);
  display: flex; flex-direction: column;
  gap: clamp(64px, 10vh, 120px);
}
.ablauf__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 56px);
  align-items: end;
}
.ablauf__step {
  display: flex; flex-direction: column; gap: 18px;
  transition: opacity .8s ease, transform .8s var(--ease);
}
.ablauf__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--accent-light);
  background: var(--bg);
  flex-shrink: 0;
  box-shadow: 0 0 0 6px rgba(232, 201, 138, .08);
}
.ablauf__camp { font-size: 11px; letter-spacing: .28em; color: var(--accent-light); margin-top: 4px;  text-transform: uppercase;}
.ablauf__no {
  font-stretch: 125%; font-weight: 200;
  font-size: clamp(56px, 7vw, 128px);
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
}
.ablauf__name {
  font-stretch: 125%; font-weight: 600;
  font-size: clamp(14px, 1.3vw, 19px);
  letter-spacing: .18em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}
.ablauf__desc { font-size: 15px; line-height: 1.6; color: var(--ink-muted); text-wrap: pretty; max-width: 300px; }

@media (max-width: 960px) {
  .ablauf__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .ablauf__step { margin-bottom: 0 !important; }
}
/* Zweispaltig läuft die Route als langer Zickzack mitten durch die
   Beschreibungstexte. Nur einspaltig (darunter) ergibt sie eine saubere
   senkrechte Linie, deshalb genau dieser Bereich ohne. */
@media (min-width: 521px) and (max-width: 960px) {
  .ablauf__route { display: none; }
}
@media (max-width: 520px) {
  .ablauf__steps { grid-template-columns: 1fr; }
  /* Die Route läuft hier senkrecht durch die Punkte. Der Text rückt daneben,
     sonst liegt die Linie quer über den Zeilen. Der Punkt wird um denselben
     Betrag zurückgezogen und bleibt damit auf der Linie. */
  .ablauf__step { padding-left: 40px; }
  .ablauf__dot { margin-left: -40px; }
}

/* ---------- 12 Anfrage ---------- */
.anfrage { position: relative; overflow: hidden; }
.anfrage__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.anfrage__veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(14,13,11,.25) 0%, rgba(14,13,11,.6) 50%, rgba(14,13,11,.94) 70%);
}
.anfrage__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 64px;
  padding: clamp(100px, 14vh, 180px) var(--pad-x);
  /* start statt end: Überschrift und Formular sitzen oben im Bild. Mit end
     stand die Überschrift am unteren Rand und lief bei kurzen Fenstern aus
     der Sektion heraus. */
  align-items: start;
}
.anfrage__intro { display: flex; flex-direction: column; gap: 24px; }
.anfrage__intro .eyebrow { color: var(--accent-light); }

.form {
  display: flex; flex-direction: column; gap: 28px;
  background: rgba(14, 13, 11, .86);
  border: 1px solid var(--line);
  padding: clamp(28px, 3vw, 44px);
}
.form__title { font-stretch: 125%; font-weight: 600; font-size: 15px; letter-spacing: .24em; text-transform: uppercase; }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.form__row--full { grid-template-columns: 1fr; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: span 2; }
.field__label { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-muted); }
.field__input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-field);
  color: var(--ink);
  font-size: 16px;
  padding: 10px 0;
  outline: none;
  letter-spacing: 0;
  transition: border-color .3s ease;
}
.field__input:focus { border-bottom-color: var(--accent-light); }
.field__input[aria-invalid="true"] { border-bottom-color: var(--error); }
textarea.field__input { resize: vertical; min-height: 84px; }
.field__error { font-size: 12px; line-height: 1.5; color: var(--error); }
.field__error:empty { display: none; }

.arten { display: flex; flex-wrap: wrap; gap: 8px; }
.art {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--accent-deep);
  padding: 10px 14px;
  font-size: 13px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.art:hover { border-color: var(--accent-light); }
.art[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.consent { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.consent input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: 0 0 auto; }

.form__note { font-size: 12px; line-height: 1.5; color: var(--ink-faint); }
.form__status { font-size: 13px; line-height: 1.5; color: var(--accent-light); }
.form__status.is-error { color: var(--error); }
.form__status:empty { display: none; }

.danke {
  display: flex; flex-direction: column; gap: 20px;
  background: rgba(14, 13, 11, .86);
  border: 1px solid var(--accent);
  padding: clamp(28px, 3vw, 44px);
}
.danke__title { font-stretch: 125%; font-weight: 600; font-size: 22px; letter-spacing: .18em; color: var(--accent-light);   text-transform: uppercase;
}
.danke p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }

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

@media (max-width: 960px) {
  /* minmax(0, 1fr) statt 1fr: Ein blosses 1fr hat als Mindestbreite die
     min-content-Breite des Inhalts. Die lange Überschrift zog die Spalte damit
     auf 355 px und aus dem 320-px-Viewport heraus — sichtbar abgeschnitten,
     weil .anfrage overflow: hidden hat. Die Desktop-Regel oben macht es
     bereits so. */
  .anfrage__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .anfrage__veil { background: linear-gradient(180deg, rgba(14,13,11,.5) 0%, rgba(14,13,11,.92) 55%); }
}
@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
  .field--full { grid-column: span 1; }
}
@media (max-width: 360px) {
  /* „ANFRAGEN“ ist bei den 40 px aus .display--xl rund 290 px breit, die Spalte
     hat bei 320 px Viewport aber nur 272 px — ohne das bricht das Wort und ein
     einzelnes „N“ bleibt auf der letzten Zeile stehen. Nur hier verkleinert,
     nicht global: .display--xl tragen zehn Überschriften der Website. */
  .anfrage__intro .display--xl { font-size: 34px; }
}

/* ---------- 13 Fußzeile ---------- */
.site-footer {
  padding: 64px var(--pad-x) 40px;
  display: flex; flex-direction: column; gap: 56px;
  border-top: 1px solid var(--line-soft);
}
.site-footer__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 40px; flex-wrap: wrap;
}
.site-footer__contact {
  display: flex; gap: clamp(24px, 4vw, 72px); flex-wrap: wrap;
  font-stretch: 112%; font-size: clamp(15px, 1.4vw, 18px); letter-spacing: .04em;
}
.site-footer__contact a { color: var(--ink); }
.site-footer__contact a:hover { color: var(--accent-light); }
.site-footer__bottom {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
}
.site-footer__legal { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.site-footer__legal a { color: var(--ink-faint); }
.site-footer__legal a:hover { color: var(--accent-light); }
.site-footer__consent {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
  transition: color .3s ease;
}
.site-footer__consent:hover { color: var(--accent-light); }

/* ---------- 14 Rechtsseiten ---------- */
.legal { padding: clamp(140px, 18vh, 200px) var(--pad-x) var(--section-y); }
.legal__inner { max-width: 820px; margin-inline: auto; }
/* Fließtextseiten: kleiner als die Schauüberschriften der Startseite, damit
   lange Wörter in die schmale Lesespalte passen. */
.legal h1 {
  margin-bottom: 40px;
  font-size: clamp(24px, 3.2vw, 44px);
  hyphens: auto;
}
.legal h2 {
  margin: 48px 0 16px;
  font-stretch: 125%; font-weight: 600;
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: .1em;
  color: var(--ink);
}
.legal p, .legal li { font-size: 15px; line-height: 1.8; color: var(--ink-muted); text-wrap: pretty; }
.legal p { margin-bottom: 16px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal li::marker { color: var(--accent-deep); }
.legal strong { color: var(--ink); font-weight: 500; }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; color: var(--accent-light);
}
.legal__meta { margin-top: 48px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- 15 Blog ---------- */
.blog-hero {
  position: relative;
  min-height: clamp(520px, 68vh, 760px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.blog-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.blog-hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,13,11,.7) 0%, rgba(14,13,11,.35) 40%, var(--bg) 100%);
}
.blog-hero__inner {
  position: relative; width: 100%;
  padding: 0 var(--pad-x) clamp(56px, 8vh, 96px);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap;
}
/* min-width: 0 ist hier die eigentliche Arbeit. Als Flex-Element hat der Block
   von Haus aus min-width: auto und darf damit nicht schmaler werden als sein
   längstes Wort. Eine Überschrift wie WANDGESTALTUNG erzwingt so über 540px,
   die Sektion schneidet den Rest ab, und das overflow-wrap der .display-Regel
   kommt nie zum Zug, weil gar nicht erst umgebrochen werden muss. */
.blog-hero__titles { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.blog-hero .eyebrow { color: var(--accent-light); }
.blog-hero__lead { max-width: 400px; font-size: 17px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

.blog-list {
  padding: clamp(56px, 8vh, 96px) var(--pad-x) clamp(100px, 14vh, 180px);
  display: flex; flex-direction: column; gap: 48px;
}
.blog-list__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.blog-list__count { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); }
.postgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 3vw, 48px) clamp(16px, 2vw, 28px);
  list-style: none;
}
.post-card { display: flex; flex-direction: column; gap: 18px; color: var(--ink); height: 100%; }
.post-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-warm); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.post-card:hover .post-card__media img, .post-card:focus-visible .post-card__media img { transform: scale(1.06); }
.post-card__meta {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
}
.post-card__cat { color: var(--accent); }
.post-card__time { color: var(--ink-faint); }
.post-card__title {
  font-stretch: 125%; font-weight: 600;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.2; letter-spacing: .06em;
  text-transform: uppercase;
}
.post-card:hover .post-card__title { color: var(--accent-light); }
.post-card__text { font-size: 15px; line-height: 1.6; color: var(--ink-muted); flex: 1; }
.post-card__date { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }

.blog-cta { position: relative; overflow: hidden; }
.blog-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.blog-cta__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(14,13,11,.5) 35%, rgba(14,13,11,.75) 100%);
}
.blog-cta__inner {
  position: relative;
  padding: clamp(140px, 20vh, 240px) var(--pad-x) clamp(100px, 14vh, 160px);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap;
}

/* ---------- 16 Einzelner Beitrag ---------- */
.beitrag { padding: clamp(140px, 18vh, 200px) var(--pad-x) var(--section-y); }
.beitrag__inner { max-width: 820px; margin-inline: auto; }

.breadcrumb { margin-bottom: 32px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.breadcrumb li + li::before { content: "·"; margin-right: 10px; color: var(--accent-deep); }
.breadcrumb a { color: var(--ink-faint); }
.breadcrumb a:hover { color: var(--accent-light); }

.beitrag h1 {
  margin-bottom: 20px;
  font-size: clamp(26px, 3.6vw, 52px);
  hyphens: auto;
}
.beitrag__meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
}
.beitrag__bild { margin: 44px 0; }
.beitrag__bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.beitrag__text { margin-top: 8px; }
.beitrag__text p { margin-bottom: 20px; font-size: 16px; line-height: 1.8; color: var(--ink-muted); text-wrap: pretty; }
.beitrag__text .beitrag__lead { font-size: 19px; line-height: 1.7; color: var(--ink-2); margin-bottom: 32px; }
.beitrag__text h2 {
  margin: 52px 0 16px;
  font-stretch: 125%; font-weight: 600;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15; letter-spacing: .06em;
  color: var(--ink);
  text-wrap: balance;
}
.beitrag__text h3 {
  margin: 36px 0 12px;
  font-stretch: 125%; font-weight: 600;
  font-size: clamp(17px, 1.7vw, 21px);
  letter-spacing: .1em; color: var(--ink);
}
.beitrag__text ul, .beitrag__text ol {
  margin: 0 0 22px; padding-left: 22px;
  font-size: 16px; line-height: 1.8; color: var(--ink-muted);
}
.beitrag__text li { margin-bottom: 8px; }
.beitrag__text li::marker { color: var(--accent-deep); }
.beitrag__text strong { color: var(--ink); font-weight: 500; }
.beitrag__text a { text-decoration: underline; text-underline-offset: 3px; }

/* Vergleichstabellen im Beitrag. Auf schmalen Schirmen kippt die Tabelle in
   Kartenform: jede Zeile wird ein Block, die Spaltenüberschrift steht per
   data-spalte vor dem Wert. Seitliches Scrollen in einer Tabelle ist auf dem
   Telefon die schlechtere Lösung. */
.beitrag__text table {
  width: 100%;
  margin: 0 0 28px;
  border-collapse: collapse;
  font-size: 15px; line-height: 1.7;
  color: var(--ink-muted);
}
.beitrag__text thead th {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-stretch: 125%; font-weight: 600;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
}
.beitrag__text tbody td {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
/* Die Einrückung ab der zweiten Spalte muss für Kopf- UND Inhaltszellen
   gelten, sonst stehen die Spaltenüberschriften 24px links neben dem Text,
   zu dem sie gehören. */
.beitrag__text thead th + th,
.beitrag__text tbody td + td { padding-left: 24px; }
.beitrag__text tbody td strong { display: block; margin-bottom: 4px; }

@media (max-width: 640px) {
  .beitrag__text table, .beitrag__text tbody, .beitrag__text tr, .beitrag__text td { display: block; width: 100%; }
  .beitrag__text thead { display: none; }
  .beitrag__text tbody tr {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }
  .beitrag__text tbody td { padding: 4px 0; border: 0; }
  .beitrag__text tbody td + td { padding-left: 0; }
  .beitrag__text tbody td[data-spalte]::before {
    content: attr(data-spalte);
    display: block; margin-bottom: 4px;
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--accent-deep);
  }
}

/* Bildstrecke für Leistungsseiten (/tv-wand-steinwand/, /steinwand-badezimmer/).
   Fünf Bilder gehen in einem Zweierraster
   nicht auf — das erste läuft deshalb über beide Spalten, die übrigen vier
   stehen paarweise darunter. Auf schmalen Geräten untereinander. */
.bild-galerie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0 36px;
}
.bild-galerie__bild { margin: 0; }
.bild-galerie__bild:first-child { grid-column: 1 / -1; }
.bild-galerie__bild picture { display: block; }
.bild-galerie__bild img { width: 100%; height: auto; }
@media (max-width: 640px) {
  .bild-galerie { grid-template-columns: 1fr; }
}

.beitrag__figur { margin: 36px 0; }
.beitrag__figur picture { display: block; }
.beitrag__figur img { width: 100%; height: auto; }
.beitrag__figur--hoch img { max-width: 440px; }
.beitrag__figur figcaption {
  margin-top: 12px; max-width: 60ch;
  font-size: 13px; line-height: 1.7; color: var(--ink-faint); text-wrap: pretty;
}

/* Autorenbox unter dem Beitragstext. Sichtbare Autorschaft ist ein
   E-E-A-T-Signal — sie gehört vor den CTA, nicht hinter die Weiterlesen-Liste. */
.autor {
  margin-top: 56px; padding-top: 32px;
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 24px;
  align-items: start;
}
@media (min-width: 620px) { .autor { grid-template-columns: 96px minmax(0, 1fr); gap: 28px; } }
.autor__bild {
  width: 96px; height: 96px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: rgba(201, 164, 100, .05);
  overflow: hidden;
}
.autor__bild img { width: 100%; height: 100%; object-fit: cover; }
.autor__bild img[src$=".svg"] { width: 52%; height: auto; object-fit: contain; opacity: .8; }
.autor__text { display: flex; flex-direction: column; gap: 6px; }
.autor__label {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
}
.autor__name {
  font-stretch: 125%; font-weight: 600;
  font-size: 20px; letter-spacing: .08em;
  color: var(--ink);
}
.autor__rolle { font-size: 14px; letter-spacing: .04em; color: var(--ink-muted); }
.autor__erfahrung { font-size: 14px; color: var(--ink-muted); }
.autor__bio {
  margin-top: 8px; max-width: 62ch;
  font-size: 15px; line-height: 1.7; color: var(--ink-muted); text-wrap: pretty;
}
.autor__kontakt {
  margin-top: 10px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  font-size: 14px; color: var(--ink-faint);
}

/* ---------- 16b Projektgalerie (/referenzen/) ---------- */
.galerie-seite { padding: clamp(140px, 18vh, 200px) var(--pad-x) var(--section-y); }
.galerie-kopf { margin-bottom: clamp(48px, 6vh, 80px); }
.galerie-kopf .lead { max-width: 52ch; }

/* Die Galerie ist seit dem 03.11.2026 in drei Gruppen mit eigener Überschrift
   geteilt. Für die Bildersuche ist der Text unmittelbar über einem Bild das
   stärkste Signal nach dem Alt-Text; vorher hatte die Seite außer der H1 gar
   keine Überschrift. Jede Gruppe behält ihren eigenen mehrspaltigen Satz. */
.galerie-gruppe + .galerie-gruppe { margin-top: clamp(56px, 7vh, 96px); }
.galerie-gruppe__kopf { margin-bottom: clamp(24px, 3vh, 40px); max-width: 62ch; }
.galerie-gruppe__titel {
  font-stretch: 125%;
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--ink);
  text-wrap: pretty;
}
.galerie-gruppe__text {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* Mehrspaltiger Satz statt Raster, bewusst.
   Projektfotos haben unterschiedliche Seitenverhältnisse. Ein Raster müsste
   sie entweder auf ein gemeinsames Format zuschneiden — bei echten Arbeiten
   die schlechtere Lösung, weil dabei genau die Kanten wegfallen, die die
   Modellierung zeigen — oder es ließe unter den kürzeren Kacheln Lücken, weil
   Rasterzeilen auf die höchste Kachel ausgerichtet werden. `column-count`
   setzt die Kacheln dicht und in voller Höhe.
   Preis dafür: Die Lesereihenfolge läuft spaltenweise von oben nach unten,
   nicht zeilenweise. Für eine Galerie ohne Rangfolge ist das in Ordnung.
   Wer das ändert, passt auch `sizes` in fd_galerie_bild() an — dort stehen
   dieselben Umbruchpunkte noch einmal. */
.galerie {
  column-count: 3;
  column-gap: 24px;
}
@media (max-width: 1399px) { .galerie { column-count: 2; } }
@media (max-width:  599px) { .galerie { column-count: 1; column-gap: 0; } }

.galerie__kachel {
  /* `break-inside: avoid` hält Bild und Unterschrift zusammen; ohne das
     reißt der Spaltenumbruch die Kachel mitten durch. Das `display`
     daneben ist kein Zierrat — ohne block-Kontext greift break-inside in
     Firefox nicht zuverlässig. */
  break-inside: avoid;
  display: block;
  margin: 0 0 24px;
  background: var(--bg-warm);
}
.galerie__kachel picture { display: block; }
.galerie__kachel img {
  width: 100%;
  height: auto;
  /* Hält das Bild in seinem eigenen Verhältnis — kein Zuschnitt. */
  object-fit: contain;
}

.galerie__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 20px;
}
.galerie__kategorie {
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
}
.galerie__titel {
  font-stretch: 112%;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--ink);
  text-wrap: pretty;
}

.galerie-leer { color: var(--ink-muted); }

.galerie-fuss {
  margin-top: clamp(48px, 7vh, 88px);
  max-width: 820px;
  padding: 32px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: rgba(201, 164, 100, .05);
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.7;
}
.galerie-fuss p { margin: 0 0 16px; }
.galerie-fuss__text {
  font-stretch: 112%;
  font-weight: 300;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.35;
  color: var(--ink);
}
.galerie-fuss__knopf { margin: 24px 0 0; }

/* ---------- FAQ-Akkordeon auf der Startseite ----------
   Baut auf <details>/<summary>. Der Marker wird entfernt und durch ein
   eigenes Plus-Zeichen ersetzt, das sich beim Öffnen zum Minus dreht. */
.faq {
  padding: var(--section-y) var(--pad-x);
  display: grid;
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
@media (min-width: 1000px) { .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.faq__head { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1000px) { .faq__head { position: sticky; top: 104px; } }
.faq__head .lead { max-width: 42ch; }

.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__frage {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 26px 0;
  cursor: pointer;
  list-style: none;
  font-stretch: 112%; font-weight: 500;
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: .03em; line-height: 1.35;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.faq__frage::-webkit-details-marker { display: none; }
.faq__frage:hover, .faq__item[open] > .faq__frage { color: var(--accent-light); }
.faq__frage:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* Plus, das beim Öffnen zum Minus wird: zwei Striche, einer dreht sich weg. */
.faq__zeichen {
  position: relative; flex: 0 0 14px;
  width: 14px; height: 14px; margin-top: 4px;
}
.faq__zeichen::before, .faq__zeichen::after {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 14px; height: 1px; background: var(--accent);
  transition: transform .35s var(--ease);
}
.faq__zeichen::after { transform: rotate(90deg); }
.faq__item[open] .faq__zeichen::after { transform: rotate(0deg); }

.faq__antwort { padding: 0 0 28px; max-width: 68ch; }
.faq__antwort p {
  font-size: 15px; line-height: 1.8; color: var(--ink-muted); text-wrap: pretty;
}
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__antwort { animation: fdFaq .4s var(--ease); }
  @keyframes fdFaq { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

.faq__fuss {
  grid-column: 1 / -1;
  margin-top: 8px; padding-top: 28px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px; line-height: 1.8; color: var(--ink-faint);
}
.faq__fuss a { margin-left: 8px; color: var(--accent-light); }

.beitrag__cta {
  margin-top: 56px; padding: 32px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: rgba(201, 164, 100, .05);
}
.beitrag__cta-title { font-stretch: 125%; font-weight: 600; font-size: 18px; letter-spacing: .1em; margin-bottom: 10px; }
.beitrag__cta p { font-size: 15px; line-height: 1.7; color: var(--ink-muted); }

.beitrag__weitere { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line-soft); }
.beitrag__weitere h2 { margin-bottom: 20px; font-stretch: 125%; font-weight: 600; font-size: 20px; letter-spacing: .1em;  text-transform: uppercase;}
.weiterlesen { list-style: none; display: grid; gap: 14px; }
@media (min-width: 760px) { .weiterlesen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.weiterlesen__karte {
  position: relative; height: 100%;
  display: grid; grid-template-columns: 104px 1fr; gap: 18px; align-items: center;
  padding: 10px 18px 10px 10px;
  border: 1px solid var(--line-soft);
  transition: border-color .4s ease, background .4s ease;
}
.weiterlesen__karte--ohne-bild { grid-template-columns: 1fr; padding: 18px; }
.weiterlesen__karte:hover, .weiterlesen__karte:focus-within {
  border-color: var(--accent-deep);
  background: rgba(201, 164, 100, .05);
}
.weiterlesen__bild { display: block; overflow: hidden; background: var(--bg-warm); }
.weiterlesen__bild img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 1.2s var(--ease); }
.weiterlesen__karte:hover .weiterlesen__bild img { transform: scale(1.06); }
.weiterlesen__meta { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); }
.weiterlesen__titel {
  margin-top: 9px;
  font-stretch: 125%; font-weight: 600; font-size: 16px; line-height: 1.3;
  letter-spacing: .04em; color: var(--ink); text-wrap: balance;
  text-transform: uppercase;
}
.weiterlesen__titel a { color: inherit; }
.weiterlesen__titel a::after { content: ""; position: absolute; inset: 0; }
.weiterlesen__karte:hover .weiterlesen__titel a { color: var(--accent-light); }

/* ---------- 17 Cookie-Einwilligung ---------- */
.einwilligung {
  position: fixed;
  z-index: 200;
  left: 14px; right: 14px; bottom: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  background: rgba(14, 13, 11, .97);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
@media (min-width: 900px) {
  .einwilligung { left: auto; right: 24px; bottom: 24px; max-width: 520px; padding: 26px 28px; }
}
.einwilligung__inner { display: grid; gap: 20px; }
.einwilligung__titel { font-stretch: 125%; font-weight: 600; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 8px; }
.einwilligung__text { font-size: 13px; line-height: 1.75; color: var(--ink-muted); text-wrap: pretty; }
.einwilligung__text a { text-decoration: underline; text-underline-offset: 3px; }
/* Beide Schaltflächen bewusst gleich groß und gleich gewichtet: Ablehnen darf
   nicht schwerer zu finden sein als Zustimmen. */
.einwilligung__aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.einwilligung__aktionen .btn {
  justify-content: center;
  padding: 14px 12px;
  font-size: 11px;
  letter-spacing: .16em;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--accent-deep);
}
.einwilligung__aktionen .btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* ---------- 18 Motion ---------- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__media { animation: none; }
  .interlude figure { transform: none !important; }
}

/* ---------- 19 Druck ---------- */
@media print {
  .site-header, .site-nav, .einwilligung, .hero__media, .anfrage__bg, .ablauf__bg, .verfahren__tex, .interlude { display: none !important; }
  /* Die Kennzahlen sind am Schirm nur konturiert. Im Druck bliebe davon
     auf Weiß nichts übrig, deshalb hier wieder gefüllt. */
  .verfahren__zahl dt { color: #000 !important; -webkit-text-stroke: 0 !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}

/* ---------- 20 Internes Postfach ----------
   Nur unter /intern/ sichtbar und niemals für Besucher. Die Seiten dort tragen
   noch die Klassennamen aus der Zeit vor dem Rebranding; statt sie umzubauen,
   bekommen sie hier ihre eigene, knappe Gestaltung in der neuen Farbwelt. */
.kicker {
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.h2 {
  font-stretch: 125%;
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: .05em;
  color: var(--ink);
}

.btn--solid   { background: var(--accent); color: var(--bg); }
.btn--outline { background: transparent; color: var(--ink); border: 1px solid var(--accent-deep); }
.btn--outline:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn--ghost   { background: transparent; color: var(--ink-muted); padding-inline: 6px; }
.btn--ghost:hover { background: transparent; color: var(--accent-light); }
.btn--block   { width: 100%; justify-content: center; }

.legal__todo {
  margin: 28px 0;
  padding: 20px 24px;
  border: 1px solid var(--accent-deep);
  border-left: 2px solid var(--accent);
  background: rgba(201, 164, 100, .06);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
}

.inbox { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; }
.inbox__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.inbox__count { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); }
.inbox__item {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px;
  border: 1px solid var(--line-soft);
  background: rgba(26, 18, 8, .35);
}
.inbox__meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
}
.inbox__name { font-stretch: 125%; font-weight: 600; font-size: 18px; letter-spacing: .08em; color: var(--ink); text-transform: none; }
.inbox__room { color: var(--accent); }
.inbox__date, .inbox__id { color: var(--ink-faint); }
.inbox__contact { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.inbox__text {
  margin-top: 4px;
  font-size: 15px; line-height: 1.75; color: var(--ink-muted);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.inbox__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }