/* ==========================================================================
   Kaawar Innenausbau
   Materialgedanke: Estrichgrau als Grundfläche, Espresso und Sand aus dem
   Logo, ein einziges Warmorange für alles, was mit Heizung zu tun hat.
   ========================================================================== */

@font-face {
  font-family: 'Bricolage';
  src: url('fonts/bricolage.woff2') format('woff2-variations');
  font-weight: 200 800; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/figtree.woff2') format('woff2-variations');
  font-weight: 300 900; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'SpaceMono';
  src: url('fonts/spacemono-400.woff2') format('woff2');
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'SpaceMono';
  src: url('fonts/spacemono-700.woff2') format('woff2');
  font-weight: 700; font-display: swap; font-style: normal;
}

:root {
  --espresso: #241209;
  --espresso-2: #331D10;
  --espresso-3: #4A3021;
  --sand: #B79A6D;
  --sand-hell: #CDB58F;
  --waerme: #C6572A;
  --waerme-hell: #E07A45;

  --estrich: #D8D4CC;
  --zement: #E7E3DB;
  --papier: #F4F2ED;
  --weiss: #FBFAF7;

  --text: #241209;
  --text-2: #5B4736;
  --text-3: #857260;
  --linie: rgba(36, 18, 9, .14);
  --linie-2: rgba(36, 18, 9, .07);

  --display: 'Bricolage', 'Trebuchet MS', sans-serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'SpaceMono', ui-monospace, 'Courier New', monospace;

  --huelle: 1220px;
  --luft: clamp(56px, 9vw, 128px);
  --rund: 3px;
  --kopf-h: 100px;

  color-scheme: light;
}

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

/* Raster- und Flexkinder schrumpfen von sich aus nicht unter ihre
   Inhaltsbreite (min-width: auto). Auf schmalen Bildschirmen dehnen sie damit
   ihre Spalte und die Seite scrollt quer. Diese Regel nimmt ihnen das ab;
   wer eine Mindestbreite braucht, setzt sie ausdrücklich. */
.rechner__gitter > *, .anfrage__gitter > *, .fragen__gitter > *,
.text__gitter > *, .zahlen__gitter > *, .favo__gitter > *,
.weit__gitter > *, .warum__gitter > *, .karten__gitter > *,
.rechner__eingabe > *, .schnitt__buehne > * { min-width: 0; }

/* Muss vor allen display-Regeln stehen: sonst gewinnt jede Klasse mit
   eigenem display gegen das hidden-Attribut aus dem Browser-Stylesheet. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(16px, .4vw + 15px, 17.5px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.028em;
  margin: 0;
  font-variation-settings: 'wdth' 92, 'opsz' 40;
  text-wrap: balance;
  /* Deutsche Komposita werden länger als schmale Bildschirme. Ohne diese
     zwei Zeilen schiebt ein Wort wie „Datenschutzerklärung" die ganze Seite
     seitwärts, weil die Überschrift nicht unter ihre Wortbreite schrumpft. */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.3rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 1.5vw, 1.45rem); letter-spacing: -.018em; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--sand); color: var(--espresso); }

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Auf dunklen Flächen kehrt sich der Ring um, sonst verschwindet er darin. */
.held, .haupt, .zahlen, .rechner, .schluss, .fuss, .mobilnav {
  --fokus: var(--sand-hell);
}

.ueberspringen {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--espresso); color: var(--weiss);
  padding: 12px 18px; border-radius: var(--rund);
  font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: top .18s;
}
.ueberspringen:focus { top: 8px; }

.huelle { width: min(100% - 40px, var(--huelle)); margin-inline: auto; }
@media (max-width: 600px) { .huelle { width: min(100% - 32px, var(--huelle)); } }

/* ------------------------------------------------------------- Bausteine */

.auge {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 18px;
}
.auge span {
  width: 30px; height: 1px; background: var(--sand); flex: none;
  /* Bricht der Text um, soll der Strich auf Höhe der ersten Zeile bleiben. */
  align-self: flex-start; margin-top: .62em;
}
.auge--mitte { justify-content: center; }

.knopf {
  --k-bg: var(--espresso);
  --k-fg: var(--weiss);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px;
  background: var(--k-bg); color: var(--k-fg);
  border: 1px solid var(--k-bg);
  border-radius: var(--rund);
  font: 600 .95rem/1 var(--body);
  text-decoration: none;
  cursor: pointer;
  position: relative; overflow: hidden;
  /* Eigener Stapelkontext: dadurch liegt die einfahrende Füllung (::after mit
     z-index -1) über dem Knopfhintergrund, aber unter der Beschriftung. Ohne
     das verdeckt sie beim Überfahren den Text, denn der ist ein blanker
     Textknoten und lässt sich nicht per z-index nach vorn holen. */
  isolation: isolate;
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s, background .16s, color .16s;
}
.knopf::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--sand); transform: translateY(101%);
  transition: transform .3s cubic-bezier(.22,.9,.28,1);
}
.knopf:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(36,18,9,.18); }
.knopf:hover::after { transform: translateY(0); }
.knopf:hover { color: var(--espresso); }
.knopf:active { transform: translateY(0); }
.knopf--gross { padding: 17px 32px; font-size: 1rem; }
.knopf--klein { padding: 13px 18px; font-size: .87rem; }
.knopf--voll { width: 100%; }
.knopf--rand { --k-bg: transparent; --k-fg: var(--espresso); border-color: var(--linie); }
.knopf--rand:hover { color: var(--espresso); border-color: var(--sand); }
.knopf--geist {
  --k-bg: transparent; --k-fg: currentColor;
  border-color: currentColor;
  opacity: .92;
}
.knopf--geist::after { background: currentColor; }
.knopf--geist:hover { color: var(--espresso); opacity: 1; }

.pfeil {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: .92rem; color: var(--espresso);
  margin-top: 4px;
}
.pfeil svg { width: 20px; height: 12px; transition: transform .22s cubic-bezier(.2,.8,.3,1); }

.maeander { color: var(--sand); opacity: .4; padding: 0 0 6px; overflow: hidden; }
.maeander svg { width: 100%; height: 30px; display: block; }

.krume {
  font-family: var(--mono); font-size: .74rem;
  letter-spacing: .06em; color: var(--text-3);
  display: flex; gap: 9px; align-items: center; margin-bottom: 20px;
}
.krume a { text-decoration: none; opacity: .85; padding: 6px 0; }
.krume a:hover { opacity: 1; text-decoration: underline; }
.krume span[aria-hidden] { opacity: .45; }

.stern {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--espresso); background: var(--sand);
  padding: 6px 13px; border-radius: 100px; margin: 0 0 16px;
}

/* ------------------------------------------------------------------ Kopf */

.kopf {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--kopf-h);
  transition: background .3s, box-shadow .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.kopf__innen {
  height: 100%;
  width: min(100% - 40px, var(--huelle)); margin-inline: auto;
  display: flex; align-items: center; gap: 28px;
}
.kopf[data-fest] {
  background: rgba(244,242,237,.93);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--linie-2);
}
/* Über dem Heldenbild steht die Kopfzeile hell. Sie bringt ihren eigenen
   Verlauf mit, damit der Bildschleier darunter nicht zusätzlich für die
   Lesbarkeit der Navigation aufkommen muss und das Foto sichtbar bleibt. */
body:has(.held) .kopf:not([data-fest]),
body:has(.haupt) .kopf:not([data-fest]) { color: var(--weiss); }
body:has(.held) .kopf::before,
body:has(.haupt) .kopf::before {
  content: ''; position: absolute; inset: 0 0 -34px; z-index: -1;
  background: linear-gradient(180deg, rgba(36,18,9,.74), rgba(36,18,9,0));
  pointer-events: none; transition: opacity .3s;
}
.kopf[data-fest]::before { opacity: 0; }

/* Die Wortmarke liegt zweimal übereinander: hell für die Kopfzeile über einem
   Foto, dunkel sobald sie auf hellem Grund liegt. Umgeschaltet wird per
   Sichtbarkeit, damit beim Scrollen nichts nachgeladen werden muss. */
.logo {
  display: block; position: relative; flex: none;
  width: 300px; height: 77px; text-decoration: none;
}
.logo__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; object-position: left center;
  transition: opacity .3s;
}
.logo__bild--dunkel { opacity: 1; }
.logo__bild--hell   { opacity: 0; }
/* Über einem Foto und solange nicht gescrollt wurde: helle Fassung. */
body:has(.held) .kopf:not([data-fest]) .logo__bild--hell,
body:has(.haupt) .kopf:not([data-fest]) .logo__bild--hell { opacity: 1; }
body:has(.held) .kopf:not([data-fest]) .logo__bild--dunkel,
body:has(.haupt) .kopf:not([data-fest]) .logo__bild--dunkel { opacity: 0; }

@media (max-width: 900px) {
  :root { --kopf-h: 76px; }
  .logo { width: 210px; height: 54px; }
  /* Auf schmalen Bildschirmen darf die Wortmarke Platz abgeben, damit
     Telefon- und Menütaste ihre volle Fläche behalten. */
  .kopf__innen { gap: 12px; }
  .logo { max-width: calc(100% - 108px); }
}
@media (max-width: 420px) {
  .logo { width: 168px; height: 44px; }
}

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav > a, .nav__auf {
  font: 500 .92rem/1 var(--body); color: inherit;
  background: none; border: 0; cursor: pointer;
  padding: 10px 13px; border-radius: var(--rund);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: background .18s;
}
.nav > a:hover, .nav__auf:hover { background: rgba(128,110,90,.14); }
.nav > a[aria-current] { color: var(--waerme); font-weight: 600; }
.nav__auf svg { width: 10px; height: 7px; transition: transform .22s; }
.nav__auf[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__auf[data-aktiv] { color: var(--waerme); font-weight: 600; }

.nav__gruppe { position: relative; }
.nav__klapp {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
  min-width: 268px; padding: 8px;
  background: var(--weiss); color: var(--text);
  border: 1px solid var(--linie-2); border-radius: 5px;
  box-shadow: 0 20px 44px rgba(36,18,9,.16);
  display: flex; flex-direction: column;
  animation: klappAuf .2s cubic-bezier(.2,.85,.3,1);
}
@keyframes klappAuf { from { opacity: 0; translate: -50% -6px; } }
/* Alle Einträge tragen denselben Abstand: die Liste ist eine Reihe
   gleichrangiger Leistungen, ohne Gruppen und ohne Trennlinie. */
.nav__klapp a {
  padding: 10px 13px; border-radius: var(--rund);
  /* Feste Zeilenhöhe statt eines Faktors: sonst rundet der Browser je Eintrag
     unterschiedlich und eine Zeile steht einen Pixel weiter. */
  font-size: .92rem; line-height: 20px; text-decoration: none;
  transition: background .15s, color .15s;
}
.nav__klapp a:hover { background: var(--zement); }
.nav__klapp a[aria-current] { color: var(--waerme); font-weight: 600; }

.kopf__tat { display: flex; align-items: center; gap: 12px; flex: none; }
.tel {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 .92rem/1 var(--body); text-decoration: none;
  /* Bequem zu treffen, auch als reiner Textlink neben den Knöpfen. */
  padding: 14px 6px; min-height: 44px;
}
.tel svg { width: 15px; height: 15px; color: var(--sand); }
.tel:hover span { text-decoration: underline; text-underline-offset: 3px; }

.menue {
  display: none; width: 44px; height: 44px;
  /* Buttons erben color nicht von selbst: ohne inherit stünde der Rahmen über
     dem dunklen Heldenbild in der Standardfarbe des Browsers. */
  color: inherit;
  background: none; border: 1px solid currentColor; border-radius: var(--rund);
  cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.menue span {
  display: block; width: 17px; height: 1.5px; background: currentColor;
  transition: transform .25s cubic-bezier(.2,.85,.3,1), opacity .2s;
}
.menue[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menue[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobilnav {
  position: fixed; inset: var(--kopf-h) 0 0; z-index: 99;
  background: var(--espresso); color: var(--weiss);
  overflow-y: auto;
  animation: mobilAuf .26s cubic-bezier(.2,.85,.3,1);
}
@keyframes mobilAuf { from { opacity: 0; transform: translateY(-10px); } }
.mobilnav__innen {
  width: min(100% - 32px, var(--huelle)); margin-inline: auto;
  padding: 22px 0 44px; display: flex; flex-direction: column;
}
.mobilnav a {
  padding: 14px 2px; text-decoration: none;
  font-family: var(--display); font-size: 1.28rem; font-weight: 600;
  letter-spacing: -.02em;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mobilnav__titel {
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--sand); margin: 24px 0 4px;
}
.mobilnav__knopf { margin-top: 26px; border-bottom: 0; --k-bg: var(--sand); --k-fg: var(--espresso); }
.mobilnav__knopf::after { background: var(--weiss); }

@media (max-width: 1040px) {
  .nav { display: none; }
  .menue { display: flex; }
  .kopf__tat .knopf { display: none; }
}
@media (max-width: 520px) {
  .tel span { display: none; }
  .tel {
    /* Nur noch das Symbol, deshalb die Fläche ausdrücklich auf Fingergröße. */
    width: 44px; height: 44px; padding: 0; justify-content: center;
    border: 1px solid currentColor; border-radius: var(--rund);
  }
}

/* ------------------------------------------------------------------ Held */

.held {
  position: relative;
  min-height: min(94vh, 880px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--kopf-h) + 60px) 0 76px;
  color: var(--weiss);
  overflow: hidden;
}
.held__bild { position: absolute; inset: 0; z-index: 0; }
.held__bild img { width: 100%; height: 100%; object-fit: cover; }
.held__schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(36,18,9,.26) 0%, rgba(36,18,9,.05) 24%, rgba(36,18,9,.36) 66%, rgba(36,18,9,.84) 100%),
    linear-gradient(100deg, rgba(36,18,9,.86) 0%, rgba(36,18,9,.76) 32%, rgba(36,18,9,.42) 54%, rgba(36,18,9,.08) 74%, rgba(36,18,9,0) 86%);
}
/* Die Wärmelinie zeichnet nach, was die Fräse im Boden hinterlässt. Sie darf
   die Schlagzeile begleiten, nicht mit ihr konkurrieren. */
.held__linie {
  position: absolute; inset: 0; width: 100%; height: 100%;
  mix-blend-mode: screen; opacity: .42;
}
.held__linie path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 14px rgba(198,87,42,.5));
  animation: linieZieht 3.4s cubic-bezier(.5,0,.2,1) .3s forwards;
}
@keyframes linieZieht { to { stroke-dashoffset: 0; } }

.held__innen { position: relative; z-index: 2; }
/* Die Fotos reichen von dunklem Estrich bis zu weißem Gipskarton. Ein weicher
   Schatten trägt die Schrift über beides, ohne das Bild weiter abzudunkeln. */
.held__innen, .haupt__innen { text-shadow: 0 1px 14px rgba(36,18,9,.55); }
.held__innen .knopf, .haupt__innen .knopf,
.held__innen .stern, .haupt__innen .stern { text-shadow: none; }
.held .auge { color: var(--sand-hell); }
.held .auge span { background: var(--sand); }

.held__titel {
  font-size: clamp(2.5rem, 6.6vw, 5.1rem);
  font-variation-settings: 'wdth' 88, 'opsz' 48;
  letter-spacing: -.035em;
  margin-bottom: 26px;
  max-width: 15ch;
}
.held__titel span { display: block; }
.held__titel span:last-child { color: var(--sand-hell); }

.held__lead {
  max-width: 54ch; font-size: clamp(1.02rem, 1.2vw, 1.16rem);
  color: rgba(251,250,247,.86); margin-bottom: 32px;
}
.held__tat { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.held__tat .knopf:first-child { --k-bg: var(--waerme); --k-fg: var(--weiss); }
.held__tat .knopf:first-child::after { background: var(--sand); }

.held__fein { display: flex; align-items: baseline; gap: 13px; flex-wrap: wrap; margin: 0; }
.held__fein strong {
  font-family: var(--mono); font-size: 1.08rem; font-weight: 700;
  letter-spacing: .01em; color: var(--sand-hell);
}
.held__fein span { font-size: .87rem; color: rgba(251,250,247,.6); }

.held__runter {
  position: absolute; bottom: 22px; left: 50%; translate: -50% 0; z-index: 3;
  width: 40px; height: 40px; display: grid; place-items: center;
  color: rgba(251,250,247,.5);
}
.held__runter svg { width: 15px; height: 22px; animation: tippen 2.2s ease-in-out infinite; }
@keyframes tippen { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.held__runter:hover { color: var(--sand); }
@media (max-width: 700px) { .held__runter { display: none; } }

/* Startanimation der Textzeilen */
.held__innen > * { animation: aufsteigen .8s cubic-bezier(.2,.85,.3,1) backwards; }
.held__innen > :nth-child(1) { animation-delay: .05s; }
.held__innen > :nth-child(2) { animation-delay: .14s; }
.held__innen > :nth-child(3) { animation-delay: .26s; }
.held__innen > :nth-child(4) { animation-delay: .36s; }
.held__innen > :nth-child(5) { animation-delay: .46s; }
@keyframes aufsteigen { from { opacity: 0; transform: translateY(20px); } }

/* ----------------------------------------------------------------- Zahlen */

.zahlen { background: var(--espresso); color: var(--weiss); padding: 46px 0; }
.zahlen__gitter {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.zahl { text-align: center; position: relative; }
.zahl + .zahl::before {
  content: ''; position: absolute; left: -10px; top: 12%; bottom: 12%;
  width: 1px; background: rgba(255,255,255,.14);
}
.zahl__wert {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1;
  letter-spacing: -.04em; color: var(--sand);
  font-variation-settings: 'wdth' 88;
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.zahl__label {
  font-size: .82rem; color: rgba(251,250,247,.62); margin: 0;
  line-height: 1.35;
}
@media (max-width: 680px) {
  .zahlen__gitter { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .zahl:nth-child(3)::before { display: none; }
}

/* ------------------------------------------------------------- Favoriten */

.favo { padding: var(--luft) 0; }
.favo__titel { max-width: 20ch; margin-bottom: 46px; }
.favo__gitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

.karte {
  background: var(--weiss);
  border: 1px solid var(--linie-2);
  border-radius: 5px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.2,.85,.3,1), box-shadow .3s, border-color .3s;
}
.karte:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(36,18,9,.13); border-color: var(--sand); }
.karte__bild { aspect-ratio: 16 / 10; overflow: hidden; background: var(--zement); }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.85,.3,1); }
.karte:hover .karte__bild img { transform: scale(1.05); }
.karte__wort { padding: 30px 30px 32px; position: relative; flex: 1; display: flex; flex-direction: column; }
.karte__nr {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
  color: var(--waerme); margin: 0 0 12px;
}
.karte__wort h3 { margin-bottom: 12px; font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
.karte__wort h3 a { text-decoration: none; }
.karte__wort h3 a::after { content: ''; position: absolute; inset: 0; }
.karte__wort > p { color: var(--text-2); font-size: .97rem; margin-bottom: 20px; }
.karte__wort .pfeil { margin-top: auto; }
.karte:hover .pfeil svg { transform: translateX(5px); }

@media (max-width: 860px) { .favo__gitter { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- Rechner */

.rechner { background: var(--espresso); color: var(--weiss); padding: var(--luft) 0; }
.rechner__gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.rechner .auge { color: var(--sand); }
.rechner__wort h2 { margin-bottom: 18px; max-width: 16ch; }
.rechner__wort p { color: rgba(251,250,247,.76); }
.rechner__hinweis { font-size: .88rem; color: rgba(251,250,247,.5); }

.rechner__feld {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(183,154,109,.24);
  border-radius: 6px; padding: 32px;
}
.rechner__label {
  display: block; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sand);
  margin-bottom: 14px;
}
.rechner__eingabe { display: flex; align-items: center; gap: 22px; margin-bottom: 30px; }
@media (max-width: 520px) {
  /* Nebeneinander bliebe für den Regler zu wenig übrig. */
  .rechner__eingabe { flex-direction: column; align-items: stretch; gap: 10px; }
  /* Untereinander läuft die Hauptachse senkrecht. Ohne diese Zeile ersetzt
     flex-basis: 0 die Höhe des Reglers und er schrumpft auf die 4 px seiner
     Schiene zusammen. */
  .rechner__eingabe input[type="range"] { flex: none; }
  .rechner__wert { text-align: left; min-width: 0; }
}

input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none;
  /* Hoch genug zum Treffen mit dem Daumen; die Schiene bleibt optisch dünn. */
  height: 44px; border-radius: 4px; background: transparent; cursor: pointer;
  margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--waerme) var(--fuell, 28%), rgba(255,255,255,.18) var(--fuell, 28%));
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--waerme); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -9px; border-radius: 50%;
  background: var(--sand); border: 3px solid var(--espresso);
  box-shadow: 0 0 0 1px var(--sand), 0 3px 9px rgba(0,0,0,.4);
  transition: transform .16s;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sand); border: 3px solid var(--espresso);
  box-shadow: 0 0 0 1px var(--sand); cursor: pointer;
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }

.rechner__wert {
  font-family: var(--display); font-weight: 700;
  font-size: 2.5rem; line-height: 1; letter-spacing: -.04em;
  color: var(--sand); min-width: 4.4ch; text-align: right;
  font-variant-numeric: tabular-nums;
}
.rechner__wert span { font-family: var(--mono); font-size: .95rem; margin-left: 4px; letter-spacing: 0; }

.rechner__werte { margin: 0 0 26px; padding: 0; display: grid; gap: 1px; background: rgba(255,255,255,.11); border-radius: 4px; overflow: hidden; }
.rechner__werte > div {
  background: var(--espresso-2);
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 15px 18px;
}
.rechner__werte dt { font-size: .9rem; color: rgba(251,250,247,.7); }
.rechner__werte dd {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: 1.32rem; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.rechner__werte dd span { font-family: var(--mono); font-size: .78rem; font-weight: 400; margin-left: 5px; opacity: .66; }
.rechner__stark { background: rgba(198,87,42,.16) !important; }
.rechner__stark dd { color: var(--waerme-hell); }
.rechner__stark dt { color: rgba(251,250,247,.9); }
.rechner__feld .knopf { --k-bg: var(--sand); --k-fg: var(--espresso); }
.rechner__feld .knopf::after { background: var(--waerme); }
.rechner__feld .knopf:hover { color: var(--weiss); }

@media (max-width: 900px) {
  .rechner__gitter { grid-template-columns: 1fr; gap: 36px; }
  .rechner__feld { padding: 26px 22px; }
}

/* ------------------------------------------------------ Weitere Gewerke */

.weit { padding: var(--luft) 0; }
.weit h2 { max-width: 18ch; }
.weit__lead { max-width: 52ch; color: var(--text-2); margin: 16px 0 44px; }
.weit__gitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.kachel {
  text-decoration: none;
  border: 1px solid var(--linie-2); border-radius: 5px;
  overflow: hidden; background: var(--weiss);
  display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.2,.85,.3,1), box-shadow .28s, border-color .28s;
}
.kachel:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(36,18,9,.12); border-color: var(--sand); }
.kachel__bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--zement); }
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.85,.3,1); }
.kachel:hover .kachel__bild img { transform: scale(1.06); }
.kachel h3 { margin: 18px 18px 7px; font-size: 1.08rem; }
.kachel p { margin: 0 18px 20px; font-size: .87rem; color: var(--text-3); line-height: 1.5; }

@media (max-width: 1000px) { .weit__gitter { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .weit__gitter { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 430px)  { .weit__gitter { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- Gründe */

.warum { padding: calc(var(--luft) * .8) 0 var(--luft); }
.warum h2 { max-width: 16ch; margin-bottom: 44px; }
.warum__gitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--linie); border-radius: 5px; overflow: hidden; }
.grund { background: var(--papier); padding: 30px 26px 34px; transition: background .3s; }
.grund:hover { background: var(--weiss); }
.grund__nr {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em;
  color: var(--sand); margin: 0 0 16px;
}
.grund h3 { margin-bottom: 11px; font-size: 1.14rem; }
.grund p { font-size: .93rem; color: var(--text-2); line-height: 1.58; }
@media (max-width: 1000px) { .warum__gitter { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .warum__gitter { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- Galerie */

.galerie { padding: var(--luft) 0; background: var(--zement); overflow: hidden; }
.galerie h2 { max-width: 20ch; margin-bottom: 38px; }
.galerie__band {
  display: flex; gap: 16px; padding: 0 max(20px, calc((100vw - var(--huelle)) / 2)) 8px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--sand) transparent;
}
.galerie__band figure {
  margin: 0; flex: none; width: 330px; scroll-snap-align: start;
  border-radius: 5px; overflow: hidden; background: var(--estrich);
}
.galerie__band img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s; }
.galerie__band figure:hover img { transform: scale(1.05); }
.galerie__mehr { margin-top: 34px; }
@media (max-width: 600px) { .galerie__band figure { width: 260px; } }

/* --------------------------------------------------------------- Fragen */

.fragen { padding: var(--luft) 0; }
.fragen__gitter { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.fragen__kopf { position: sticky; top: calc(var(--kopf-h) + 30px); }
.fragen__kopf h2 { margin-bottom: 16px; }
.fragen__kopf p { color: var(--text-2); margin-bottom: 22px; }

.fragen__liste details {
  border-bottom: 1px solid var(--linie);
}
.fragen__liste details:first-child { border-top: 1px solid var(--linie); }
.fragen__liste summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 20px 2px; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: 1.06rem;
  letter-spacing: -.018em; line-height: 1.32;
  transition: color .2s;
}
.fragen__liste summary::-webkit-details-marker { display: none; }
.fragen__liste summary:hover { color: var(--waerme); }
.fragen__liste summary i {
  flex: none; width: 18px; height: 18px; position: relative; margin-top: 3px;
}
.fragen__liste summary i::before,
.fragen__liste summary i::after {
  content: ''; position: absolute; background: var(--sand);
  left: 50%; top: 50%; translate: -50% -50%;
  transition: transform .25s cubic-bezier(.2,.85,.3,1), background .2s;
}
.fragen__liste summary i::before { width: 15px; height: 1.6px; }
.fragen__liste summary i::after  { width: 1.6px; height: 15px; }
.fragen__liste details[open] summary i::after { transform: scaleY(0); }
.fragen__liste details[open] summary { color: var(--espresso); }
.fragen__antwort {
  padding: 0 40px 22px 2px; color: var(--text-2); font-size: .97rem;
  animation: antwortRein .3s cubic-bezier(.2,.85,.3,1);
}
@keyframes antwortRein { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 900px) {
  .fragen__gitter { grid-template-columns: 1fr; gap: 34px; }
  .fragen__kopf { position: static; }
  .fragen__antwort { padding-right: 12px; }
}

/* -------------------------------------------------------------- Anfrage */

.anfrage { padding: var(--luft) 0; background: var(--estrich); }
.anfrage--nackt { background: var(--papier); }
.anfrage__gitter { display: grid; grid-template-columns: .82fr 1.18fr; gap: 52px; align-items: start; }
.anfrage__wort { position: sticky; top: calc(var(--kopf-h) + 30px); }
.anfrage__wort h2 { margin-bottom: 16px; max-width: 15ch; }
.anfrage__wort > p { color: var(--text-2); }

.anfrage__punkte { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 11px; }
.anfrage__punkte li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: .95rem; color: var(--text-2);
}
.anfrage__punkte li::before {
  content: ''; flex: none; width: 15px; height: 15px; margin-top: 4px;
  background: var(--sand);
  clip-path: polygon(14% 46%, 0 60%, 38% 100%, 100% 22%, 86% 8%, 38% 70%);
}

.anfrage__direkt { border-top: 1px solid var(--linie); padding-top: 22px; margin-top: 26px; }
.anfrage__tel { display: flex; flex-direction: column; gap: 4px; text-decoration: none; margin-bottom: 10px; }
.anfrage__tel span { font-size: .84rem; color: var(--text-3); }
.anfrage__tel strong {
  font-family: var(--display); font-size: 1.55rem; font-weight: 700;
  letter-spacing: -.03em; transition: color .2s;
}
.anfrage__tel:hover strong { color: var(--waerme); }
.anfrage__mail {
  display: inline-block; padding: 12px 0;
  font-size: .92rem; color: var(--text-2);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sand);
}

.anfrage__formular {
  background: var(--weiss);
  border: 1px solid var(--linie-2);
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(36,18,9,.09);
  overflow: hidden;
  /* Startwert, bis das Widget seine echte Höhe meldet. */
  min-height: 520px;
}
.anfrage__formular iframe { display: block; width: 100%; border: 0; }
.anfrage__ohnejs { padding: 32px; color: var(--text-2); }

@media (max-width: 900px) {
  .anfrage__gitter { grid-template-columns: 1fr; gap: 36px; }
  .anfrage__wort { position: static; }
}

/* --------------------------------------------------- Leistungsseitenkopf */

.haupt {
  position: relative; color: var(--weiss);
  padding: calc(var(--kopf-h) + 74px) 0 74px;
  display: flex; align-items: flex-end;
  min-height: min(72vh, 620px);
  overflow: hidden;
}
.haupt__bild { position: absolute; inset: 0; z-index: 0; }
.haupt__bild img { width: 100%; height: 100%; object-fit: cover; }
/* Der Schleier trägt den Text, er soll das Foto nicht ersetzen: oben nur so
   viel, dass die Kopfzeile lesbar bleibt, rechts oben fast nichts, und links
   unten so viel, wie die Schlagzeile braucht. */
.haupt__schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(36,18,9,.24) 0%, rgba(36,18,9,.04) 22%, rgba(36,18,9,.3) 72%, rgba(36,18,9,.8) 100%),
    linear-gradient(100deg, rgba(36,18,9,.88) 0%, rgba(36,18,9,.8) 32%, rgba(36,18,9,.46) 52%, rgba(36,18,9,.1) 72%, rgba(36,18,9,0) 84%);
}
.haupt__innen { position: relative; z-index: 2; }
.haupt__innen > * { animation: aufsteigen .7s cubic-bezier(.2,.85,.3,1) backwards; }
.haupt__innen > :nth-child(2) { animation-delay: .08s; }
.haupt__innen > :nth-child(3) { animation-delay: .16s; }
.haupt__innen > :nth-child(4) { animation-delay: .24s; }
.haupt .krume { color: rgba(251,250,247,.62); }
.haupt h1 { max-width: 17ch; margin-bottom: 20px; }
.haupt__lead { max-width: 56ch; color: rgba(251,250,247,.85); font-size: clamp(1rem, 1.1vw, 1.13rem); margin-bottom: 28px; }
.haupt__tat { display: flex; flex-wrap: wrap; gap: 12px; }
.haupt--favorit .haupt__tat .knopf:first-child { --k-bg: var(--waerme); --k-fg: var(--weiss); }
.haupt--favorit .haupt__tat .knopf:first-child::after { background: var(--sand); }

/* ---------------------------------------------------------------- Fließtext */

.text { padding: var(--luft) 0; }
.text__gitter { display: grid; grid-template-columns: 1fr 320px; gap: 62px; align-items: start; }
.text__lauf { max-width: 68ch; }
.text__lauf--breit { max-width: 76ch; }
.text__block + .text__block { margin-top: 46px; }
.text__block h2 {
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  margin-bottom: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--linie);
  position: relative;
}
.text__block:first-child h2 { border-top: 0; padding-top: 0; }
.text__block p { color: var(--text-2); }

.sorte { margin: 22px 0 0; display: grid; gap: 2px; background: var(--linie); border-radius: 5px; overflow: hidden; }
.sorte > div { background: var(--weiss); padding: 20px 22px; }
.sorte dt {
  font-family: var(--display); font-weight: 700; font-size: 1.04rem;
  letter-spacing: -.02em; margin-bottom: 5px;
}
.sorte dd { margin: 0; font-size: .93rem; color: var(--text-2); line-height: 1.55; }

.merk {
  margin-top: 40px; padding: 26px 28px;
  background: var(--espresso); color: var(--weiss);
  border-radius: 5px;
  border-left: 3px solid var(--waerme);
}
.merk__titel {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -.02em; margin-bottom: 9px; color: var(--sand);
}
.merk p:last-child { color: rgba(251,250,247,.8); font-size: .96rem; }

.text__weiter { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }

.rand { position: sticky; top: calc(var(--kopf-h) + 26px); display: grid; gap: 16px; }
.rand__block {
  background: var(--weiss); border: 1px solid var(--linie-2);
  border-radius: 5px; padding: 26px 24px;
}
.rand__titel {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 14px;
}
.rand__satz { font-size: .93rem; color: var(--text-2); margin-bottom: 18px; }
.rand__tel {
  display: block; text-align: center; margin-top: 12px;
  font-family: var(--mono); font-size: .95rem; font-weight: 700;
  text-decoration: none; color: var(--espresso);
}
.rand__tel:hover { color: var(--waerme); }
.rand__block--liste { display: flex; flex-direction: column; }
.rand__block--liste a {
  padding: 11px 0; border-top: 1px solid var(--linie-2);
  text-decoration: none; font-size: .95rem; font-weight: 500;
  display: flex; align-items: baseline; gap: 9px;
  transition: color .18s, padding-left .2s;
}
.rand__block--liste a:hover { color: var(--waerme); padding-left: 5px; }

@media (max-width: 940px) {
  .text__gitter { grid-template-columns: 1fr; gap: 46px; }
  .rand { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) { .rand { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ Kleinseiten */

.mini { padding: calc(var(--kopf-h) + 64px) 0 8px; }
.mini--mitte { text-align: center; padding-bottom: 80px; }
.mini--mitte .schluss__tat { justify-content: center; margin-top: 30px; }
.mini h1 { margin-bottom: 20px; }
.mini__lead { max-width: 58ch; color: var(--text-2); font-size: 1.06rem; }
.mini--mitte .mini__lead { margin-inline: auto; }

.raster { padding: 46px 0 var(--luft); }
.raster__gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.raster__stueck {
  margin: 0; border-radius: 5px; overflow: hidden; background: var(--zement);
  aspect-ratio: 4 / 3;
}
.raster__stueck img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.85,.3,1); }
.raster__stueck:hover img { transform: scale(1.06); }
@media (max-width: 860px) { .raster__gitter { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .raster__gitter { grid-template-columns: 1fr; } }

.karten { padding: 44px 0 12px; }
.karten__gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.visit {
  display: block; text-decoration: none;
  background: var(--weiss); border: 1px solid var(--linie-2);
  border-radius: 5px; padding: 28px 26px;
  transition: transform .26s cubic-bezier(.2,.85,.3,1), box-shadow .26s, border-color .26s;
}
a.visit:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(36,18,9,.12); border-color: var(--sand); }
.visit__label {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 12px;
}
.visit__wert {
  font-family: var(--display); font-weight: 700;
  font-size: 1.62rem; letter-spacing: -.03em; line-height: 1.15;
  margin: 0 0 10px;
}
.visit__wert--klein { font-size: 1.1rem; letter-spacing: -.02em; line-height: 1.4; word-break: break-word; }
.visit__satz { font-size: .89rem; color: var(--text-2); margin: 0; }
.visit--stark { background: var(--espresso); color: var(--weiss); border-color: var(--espresso); }
.visit--stark .visit__label { color: var(--sand); }
.visit--stark .visit__satz { color: rgba(251,250,247,.68); }
@media (max-width: 820px) { .karten__gitter { grid-template-columns: 1fr; } }

.recht h2 {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  margin: 40px 0 14px; padding-top: 22px;
  border-top: 1px solid var(--linie);
}
.recht h2:first-of-type { margin-top: 24px; }
.recht p { color: var(--text-2); font-size: .97rem; }
.recht a { color: var(--espresso); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sand); }
.recht__stand { font-family: var(--mono); font-size: .78rem; color: var(--text-3); }

/* --------------------------------------------------------------- Schluss */

.schluss { background: var(--espresso); color: var(--weiss); padding: var(--luft) 0; }
.schluss__innen { max-width: 44ch; }
.schluss h2 { margin-bottom: 16px; }
.schluss p { color: rgba(251,250,247,.74); margin-bottom: 30px; }
.schluss__tat { display: flex; flex-wrap: wrap; gap: 12px; }
.schluss__tat .knopf:first-child { --k-bg: var(--sand); --k-fg: var(--espresso); }
.schluss__tat .knopf:first-child::after { background: var(--waerme); }
.schluss__tat .knopf:first-child:hover { color: var(--weiss); }

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

.fuss { background: var(--espresso-2); color: rgba(251,250,247,.78); padding: 62px 0 0; }
.fuss__innen {
  width: min(100% - 40px, var(--huelle)); margin-inline: auto;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 46px;
  padding-bottom: 52px;
}
.fuss__logo { width: 260px; max-width: 100%; height: auto; margin-bottom: 18px; }
.fuss__satz { font-size: .92rem; max-width: 36ch; line-height: 1.6; }
.fuss__spalte { display: flex; flex-direction: column; align-items: flex-start; }
.fuss__titel {
  font-family: var(--mono); font-size: .67rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sand); margin: 0 0 14px;
}
.fuss__titel--zweit { margin-top: 24px; }
/* Die Linkliste der Fußzeile. Der Anfrageknopf steht im selben Kasten und ist
   ebenfalls ein a, darf sich diesen Innenabstand aber nicht einfangen: Er
   verlöre damit seine seitliche Luft, und der Rahmen klebte am Text. */
.fuss__spalte a:not(.knopf) {
  font-size: .93rem; text-decoration: none; padding: 11px 0;
  transition: color .18s, padding-left .18s;
}
.fuss__spalte a:not(.knopf):hover { color: var(--sand); padding-left: 4px; }
.fuss address { font-style: normal; font-size: .93rem; line-height: 1.7; margin-bottom: 14px; }
.fuss__gross {
  font-family: var(--display) !important; font-size: 1.3rem !important;
  font-weight: 700; letter-spacing: -.03em; color: var(--weiss);
  margin-bottom: 4px;
}
.fuss .knopf--rand { margin-top: 20px; --k-fg: var(--weiss); border-color: rgba(255,255,255,.28); }
.fuss .knopf--rand:hover { color: var(--espresso); }

.fuss__leiste {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 20px 0;
}
.fuss__leiste { display: flex; }
.fuss__leiste > * {
  width: min(100% - 40px, var(--huelle)); margin-inline: auto;
}
.fuss__leiste {
  flex-direction: column;
}
.fuss__leiste p { font-size: .84rem; color: rgba(251,250,247,.5); margin: 0 auto; }
.fuss__leiste nav { display: flex; gap: 20px; margin: 10px auto 0; }
.fuss__leiste nav a { font-size: .84rem; text-decoration: none; color: rgba(251,250,247,.6); padding: 8px 0; }
.fuss__leiste nav a:hover { color: var(--sand); }

@media (min-width: 700px) {
  .fuss__leiste { flex-direction: row; align-items: center; }
  .fuss__leiste > * { width: auto; margin: 0; }
  .fuss__leiste { justify-content: center; gap: 0; }
  .fuss__leiste p { margin: 0; }
  .fuss__leiste nav { margin: 0 0 0 auto; }
  .fuss__leiste { width: min(100% - 40px, var(--huelle)); margin-inline: auto; padding: 20px 0; }
}
@media (max-width: 860px) { .fuss__innen { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px) { .fuss__innen { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ Ruftaste (mobil) */

.ruf {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: none; align-items: center; gap: 9px;
  padding: 16px 20px;
  background: var(--waerme-text); color: var(--weiss);
  border-radius: 100px; text-decoration: none;
  font: 600 .93rem/1 var(--body);
  box-shadow: 0 8px 26px rgba(152,64,28,.42);
  animation: rufRein .5s cubic-bezier(.2,.85,.3,1) 1.4s backwards;
}
@keyframes rufRein { from { opacity: 0; transform: translateY(16px) scale(.9); } }
.ruf svg { width: 16px; height: 16px; }
@media (max-width: 1040px) { .ruf { display: inline-flex; } }

/* ----------------------------------------------------- Scroll-Einblenden */

[data-rein] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.85,.3,1), transform .7s cubic-bezier(.2,.85,.3,1);
  transition-delay: var(--verzug, 0ms);
}
[data-rein].da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-rein] { opacity: 1; transform: none; }
  .held__linie path { stroke-dashoffset: 0; }
}

@media print {
  .kopf, .mobilnav, .ruf, .held__linie, .rechner, .anfrage__formular { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Übernahme aus dem Rechner auf der Kontaktseite */
.anfrage__mit {
  margin-top: 14px; padding: 11px 15px;
  background: rgba(198,87,42,.1);
  border-left: 2px solid var(--waerme);
  border-radius: 0 var(--rund) var(--rund) 0;
  font-family: var(--mono); font-size: .82rem; color: var(--text-2);
}

/* --------------------------------- Werkgalerie in den Leistungsartikeln */

.werk { margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--linie); }
.werk h2 { font-size: clamp(1.45rem, 2.3vw, 2rem); margin-bottom: 10px; }
.werk__lead { color: var(--text-2); font-size: .96rem; margin-bottom: 24px; }
.werk__gitter {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.werk__stueck {
  margin: 0; border-radius: 5px; overflow: hidden;
  background: var(--zement); aspect-ratio: 4 / 3;
}
.werk__stueck img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.85,.3,1);
}
.werk__stueck:hover img { transform: scale(1.06); }
@media (max-width: 520px) {
  .werk__gitter { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* Themenbilder in den Leistungsartikeln. Bewusst ohne Überschrift und ohne
   Bildunterschrift: Sie zeigen die Leistung, nicht eine eigene Baustelle. Wer
   sie wie Referenzen beschriftet, wirbt irreführend. */
.illu {
  margin-top: 46px; padding-top: 28px; border-top: 1px solid var(--linie-2);
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.illu__stueck {
  margin: 0; border-radius: 5px; overflow: hidden;
  background: var(--zement); aspect-ratio: 4 / 3;
}
.illu__stueck img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 520px) {
  .illu { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ---------------------------------------------------------- Hinweisband */

/* Die Erfolgsmessung der Anzeigen lädt erst nach Zustimmung, deshalb muss
   gefragt werden. Das Band legt sich über den unteren Rand, nimmt die Seite
   aber nicht gefangen: Lesen und Weiterklicken bleibt möglich, und beide
   Knöpfe wiegen gleich schwer. */
.hinweis {
  position: fixed; inset: auto 0 0; z-index: 300;
  background: var(--weiss); border-top: 1px solid var(--linie);
  box-shadow: 0 -10px 40px rgba(36, 18, 9, .13);
  transform: translateY(101%);
  transition: transform .35s cubic-bezier(.2,.85,.3,1);
}
.hinweis.da { transform: none; }
.hinweis__innen {
  max-width: var(--huelle); margin: 0 auto; padding: 20px 24px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.hinweis__wort { flex: 1 1 400px; }
.hinweis__titel { font: 600 1.02rem/1.35 var(--display); margin: 0 0 5px; }
.hinweis__satz { color: var(--text-2); font-size: .89rem; line-height: 1.55; margin: 0; }
.hinweis__satz a { color: var(--text); text-underline-offset: 3px; }
.hinweis__tat { display: flex; gap: 10px; flex-wrap: wrap; }
/* Die Ruftaste sitzt sonst genau unter dem Band. */
body[data-hinweis] .ruf { bottom: 136px; }
@media (max-width: 700px) {
  .hinweis__innen { padding: 18px 20px; gap: 14px; }
  .hinweis__tat { width: 100%; }
  .hinweis__tat .knopf { flex: 1 1 auto; }
  body[data-hinweis] .ruf { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hinweis { transition: none; }
}