/* ==========================================================================
   Bollik & Smollik Entrümpelung, München
   Design system + page styles

   Aesthetik: warme Papier-Basis, tiefes Petrol als Marken-Anker,
   ein einziger Akzent (Flame). Glas nur dort, wo etwas wirklich schwebt.
   "Liquid Glass" hier ist eine Web-Annäherung mit backdrop-filter und
   geschichteten Rändern, kein offizielles Apple-Material.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font (self-hosted, kein externer Request)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   3. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marke */
  --ink: #0f2a38;
  --ink-900: #081922;
  --ink-800: #0b2230;
  --ink-700: #16394b;
  --ink-500: #2f6079;
  --flame: #f26522;
  --flame-600: #d64f0d;
  --flame-700: #b23f07;
  --flame-200: #ffb489;
  --sand: #f7f4ef;
  --sand-elev: #fffdf9;
  --sand-sunk: #efe9e0;

  /* Semantisch, Light */
  --bg: var(--sand);
  --surface: var(--sand-elev);
  --surface-sunk: var(--sand-sunk);
  --text: var(--ink);
  --text-mute: rgba(15, 42, 56, 0.64);
  --text-faint: rgba(15, 42, 56, 0.44);
  --line: rgba(15, 42, 56, 0.1);
  --line-strong: rgba(15, 42, 56, 0.18);
  --shell: rgba(15, 42, 56, 0.05);

  /* Schatten, immer in Hintergrund-Ton getönt, nie reines Schwarz */
  --shadow-sm: 0 1px 2px rgba(15, 42, 56, 0.05),
    0 4px 14px -6px rgba(15, 42, 56, 0.1);
  --shadow-md: 0 2px 6px rgba(15, 42, 56, 0.05),
    0 18px 44px -20px rgba(15, 42, 56, 0.24);
  --shadow-lg: 0 4px 10px rgba(15, 42, 56, 0.06),
    0 40px 90px -36px rgba(15, 42, 56, 0.34);
  /* Karten: weich und mehrstufig statt einem harten schwarzen Schlagschatten */
  --shadow-card: 0 1px 2px rgba(15, 42, 56, 0.04),
    0 10px 24px -12px rgba(15, 42, 56, 0.16),
    0 28px 60px -34px rgba(15, 42, 56, 0.22);
  --shadow-card-hover: 0 2px 4px rgba(15, 42, 56, 0.05),
    0 18px 38px -14px rgba(15, 42, 56, 0.22),
    0 46px 92px -40px rgba(15, 42, 56, 0.3);

  /* Radien: ein System.
     interaktiv = Pille, Container = 28, verschachtelter Kern = 20, Feld = 14 */
  --r-pill: 999px;
  --r-card: 28px;
  --r-inner: 20px;
  --r-field: 14px;
  --r-chip: 14px;

  /* Raum.
     --container-inner ist die eigentliche Fluchtlinie: die Breite, die
     .u-container nach Abzug der Seitenabstaende innen freilaesst. Header und
     alle Sektionen richten sich danach, damit nichts geraten werden muss. */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --container-inner: calc(var(--container) - 2 * var(--gutter));
  --pad-section: clamp(6rem, 11vw, 10.5rem);
  --stack-gap: clamp(1rem, 2vw, 1.75rem);
  /* gemeinsame Breite von Preisrechner und Argumentkarten */
  --pricing-width: 44rem;

  /* Typo */
  --fs-display: clamp(2.75rem, 5.6vw, 4.9rem);
  --fs-h2: clamp(2rem, 4.2vw, 3.4rem);
  --fs-h3: clamp(1.2rem, 1.7vw, 1.5rem);
  --fs-lead: clamp(1.0625rem, 1.25vw, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* Motion */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-liquid: cubic-bezier(0.32, 0.72, 0, 1);
  --e-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast: 0.28s;
  --t-mid: 0.55s;
  --t-slow: 0.9s;

  /* Das Foto der geräumten Wohnung wird an drei Stellen gebraucht:
     Hero-Grundebene, Reveal-Linsen und Hintergrund der Leistungssektion. */
  --hero-clean: url("../img/hero-nachher.jpg");

  /* Layer */
  --z-sticky: 40;
  --z-nav: 60;
  --z-overlay: 70;
  --z-modal: 80;

  color-scheme: light;
}

/* Die Seite ist bewusst immer hell. color-scheme: light oben verhindert,
   dass der Browser Formularelemente dunkel rendert oder die Seite
   automatisch abdunkelt. */

/* --------------------------------------------------------------------------
   4. Reset / Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}
body {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums lining-nums;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}
:focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection {
  background: var(--flame);
  color: #fff;
}

.u-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.u-skip {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: var(--z-modal);
  padding: 0.7rem 1.1rem;
  background: var(--flame);
  color: #fff;
  border-radius: var(--r-pill);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--e-out);
}
.u-skip:focus-visible {
  transform: translateY(0);
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-pad: 0.85rem 1.35rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: var(--btn-pad);
  border: 0;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--t-fast) var(--e-spring),
    box-shadow var(--t-fast) var(--e-out), color var(--t-mid) var(--e-liquid);
}
.btn:active {
  transform: scale(0.975);
}

/* Der Kreis um das Pfeil-Icon, buendig mit dem Innenrand */
.btn__dot {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: -0.5rem;
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.18);
  transition: transform var(--t-mid) var(--e-spring),
    background var(--t-fast) var(--e-out);
}
.btn:hover .btn__dot {
  transform: translate(2px, -1px) scale(1.06);
}

/* Primaer: die Farbe fliesst von links herueber */
.btn--flame {
  background: var(--flame);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 10px 26px -12px rgba(242, 101, 34, 0.85);
}
.btn--flame::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: linear-gradient(96deg, var(--flame-700), var(--flame-600) 62%, var(--flame));
  border-radius: 46% 0 0 46% / 100% 0 0 100%;
  transform: translateX(-102%);
  transition: transform 0.66s var(--e-liquid), border-radius 0.66s var(--e-liquid);
}
.btn--flame:hover::before,
.btn--flame:focus-visible::before {
  transform: translateX(0);
  border-radius: 0;
}
.btn--flame:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 16px 34px -12px rgba(242, 101, 34, 0.7);
}

/* Sekundaer auf Foto: eigenes Glas, damit der Text immer traegt */
.btn--glass {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) inset;
}
.btn--glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 46% 0 0 46% / 100% 0 0 100%;
  transform: translateX(-102%);
  transition: transform 0.66s var(--e-liquid), border-radius 0.66s var(--e-liquid);
}
.btn--glass:hover::before {
  transform: translateX(0);
  border-radius: 0;
}
.btn--glass .btn__dot {
  background: rgba(255, 255, 255, 0.2);
}

/* Sekundaer auf hellem Grund */
.btn--outline {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-strong);
}
.btn--outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--shell);
  border-radius: 46% 0 0 46% / 100% 0 0 100%;
  transform: translateX(-102%);
  transition: transform 0.66s var(--e-liquid), border-radius 0.66s var(--e-liquid);
}
.btn--outline:hover::before {
  transform: translateX(0);
  border-radius: 0;
}
.btn--outline .btn__dot {
  background: var(--shell);
}

.btn--lg {
  --btn-pad: 1.05rem 1.6rem;
  font-size: 1rem;
}
.btn--block {
  width: 100%;
  justify-content: center;
}

/* Textlink mit Pfeil, fuer Karten */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--flame-600);
}
.link-arrow .icon {
  transition: transform var(--t-mid) var(--e-spring);
}
.link-arrow:hover .icon,
a:hover .link-arrow .icon {
  transform: translate(3px, -3px);
}

/* --------------------------------------------------------------------------
   6. Header, Glas-Kapsel
   -------------------------------------------------------------------------- */
#nav-sentinel {
  position: absolute;
  top: 0;
  height: 1px;
  width: 100%;
  pointer-events: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  padding-block: clamp(0.85rem, 1.6vw, 1.4rem);
  padding-inline: var(--gutter);
}

.header-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  /* exakt dieselbe Fluchtlinie wie der Inhalt von .u-container */
  max-width: var(--container-inner);
  margin-inline: auto;
  padding: 0.5rem 0.5rem 0.5rem 0.6rem;
  border-radius: var(--r-pill);
  transition: transform var(--t-mid) var(--e-liquid);
}

/* Das Glas selbst liegt auf einer eigenen Ebene, so animiert nichts das Layout */
.header-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(
      140deg,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.08)
    ),
    rgba(247, 244, 239, 0.5);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12), 0 18px 48px -22px rgba(15, 42, 56, 0.4);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity var(--t-mid) var(--e-liquid),
    transform var(--t-mid) var(--e-liquid);
}
/* Zweiter, innerer Rand: die Kante bekommt Tiefe */
.header-shell::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.16);
  opacity: 0;
  transition: opacity var(--t-mid) var(--e-liquid);
  pointer-events: none;
}
.site-header.is-stuck .header-shell::before {
  opacity: 1;
  transform: scale(1);
}
.site-header.is-stuck .header-shell::after {
  opacity: 1;
}
.site-header.is-stuck .header-shell {
  transform: translateY(-2px);
}

@media (prefers-reduced-transparency: reduce) {
  .header-shell::before {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Marke */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding-right: 0.4rem;
}
/* Gilt fuer beide Formen: das einzelne <img> im Footer und den <span> im
   Header, der zwei Ebenen enthaelt. Masse, Radius, Hintergrund und Schatten
   sind unveraendert, damit die Kopfzeile exakt gleich hoch bleibt. */
.brand__mark {
  position: relative;
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  overflow: hidden;
  border-radius: var(--r-chip);
  object-fit: cover;
  background: #0a0a0a;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 6px 16px -8px rgba(15, 42, 56, 0.5);
  transition: transform var(--t-mid) var(--e-spring);
}
/* Die beiden Ebenen liegen exakt uebereinander und werden identisch
   beschnitten, weil sie dieselben Abmessungen haben. */
.brand__figuren,
.brand__arm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Drehpunkt ist das Schultergelenk der grossen Figur.
   Bildpunkt 331,8 | 228,9 von 600x462, umgerechnet auf die quadratische
   Kachel mit object-fit: cover ergibt 56,88 % | 49,55 %.
   Ohne diese Umrechnung wuerde der Arm um die Bildmitte kippen. */
.brand__arm {
  transform-origin: 56.88% 49.55%;
  will-change: transform;
}

/* Kurz lockerlassen, wieder anspannen, minimal nachfedern.
   Wird ausschliesslich bei einem echten Wechsel des Header-Zustands
   gestartet, siehe initHeader in main.js. */
@keyframes arm-lockern {
  0% {
    transform: rotate(0deg);
  }
  38% {
    transform: rotate(7deg);
  }
  78% {
    transform: rotate(-1.6deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* Rueckweg beim Hochscrollen: dieselbe Geste, gespiegelt und schwaecher */
@keyframes arm-lockern-zurueck {
  0% {
    transform: rotate(0deg);
  }
  38% {
    transform: rotate(-5deg);
  }
  78% {
    transform: rotate(1.2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.brand__arm.is-flex {
  animation: arm-lockern 0.68s ease-in-out both;
}
.brand__arm.is-flex-zurueck {
  animation: arm-lockern-zurueck 0.6s ease-in-out both;
}
.brand:hover .brand__mark {
  transform: rotate(-3deg) scale(1.04);
}
.brand__type {
  display: grid;
  line-height: 1.05;
}
.brand__name {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand__sub {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.site-header:not(.is-stuck) .brand__sub {
  color: rgba(255, 255, 255, 0.62);
}
.site-header:not(.is-stuck) .brand,
.site-header:not(.is-stuck) .nav-link {
  color: #fff;
}
.site-header.is-stuck .brand,
.site-header.is-stuck .nav-link {
  color: var(--text);
}
.site-header.is-stuck .brand__sub {
  color: var(--text-faint);
}
.brand,
.nav-link {
  transition: color var(--t-mid) var(--e-out);
}

/* Mittige Navigation */
.nav-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 2rem);
}
.nav-link {
  position: relative;
  padding: 0.45rem 0.25rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* Linie faehrt von links nach rechts ein */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--e-liquid);
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="true"]::after {
  transform: scaleX(1);
}

.nav-cta {
  justify-self: end;
}

/* Burger */
.burger {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  transition: background var(--t-fast) var(--e-out),
    border-color var(--t-fast) var(--e-out);
}
.site-header.is-stuck .burger {
  border-color: var(--line-strong);
  background: var(--shell);
}
.burger__bar {
  position: absolute;
  left: 50%;
  width: 1.05rem;
  height: 1.5px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.5s var(--e-liquid), opacity 0.24s var(--e-out),
    background var(--t-fast) var(--e-out);
}
.site-header.is-stuck .burger__bar {
  background: var(--text);
}
.burger__bar:nth-child(1) {
  transform: translate(-50%, calc(-50% - 5px));
  top: 50%;
}
.burger__bar:nth-child(2) {
  transform: translate(-50%, -50%);
  top: 50%;
}
.burger__bar:nth-child(3) {
  transform: translate(-50%, calc(-50% + 5px));
  top: 50%;
}
.burger[aria-expanded="true"] .burger__bar:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__bar:nth-child(2) {
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(0.3);
}
.burger[aria-expanded="true"] .burger__bar:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.burger[aria-expanded="true"] .burger__bar {
  background: var(--text);
}

/* Mobile Menue */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  align-content: center;
  padding: 6rem var(--gutter) 3rem;
  background: rgba(247, 244, 239, 0.82);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--e-liquid), visibility 0.45s;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-transparency: reduce) {
  .mobile-menu {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.mobile-menu__list {
  display: grid;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
.mobile-menu__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 0.5s var(--e-out), transform 0.65s var(--e-liquid),
    color var(--t-fast) var(--e-out);
}
.mobile-menu__link:hover {
  color: var(--flame-600);
}
.mobile-menu.is-open .mobile-menu__link {
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu.is-open li:nth-child(1) .mobile-menu__link {
  transition-delay: 0.08s;
}
.mobile-menu.is-open li:nth-child(2) .mobile-menu__link {
  transition-delay: 0.14s;
}
.mobile-menu.is-open li:nth-child(3) .mobile-menu__link {
  transition-delay: 0.2s;
}
.mobile-menu__num {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-faint);
}
.mobile-menu__foot {
  display: grid;
  gap: 0.75rem;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.5s var(--e-out) 0.26s, transform 0.65s var(--e-liquid) 0.26s;
}
.mobile-menu.is-open .mobile-menu__foot {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: clamp(7rem, 12vh, 9rem) clamp(3rem, 6vh, 4.5rem);
  overflow: hidden;
  background: var(--ink-900);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--ink-900);
}
.hero-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Grundebene: die geräumte Wohnung */
.hero-layer--after {
  filter: saturate(1.02);
}
/* Darüber: dieselbe Wohnung vollgestellt. Leicht abgedunkelt, damit der
   Unterschied zwischen Chaos und Ordnung ohne Beschriftung ankommt. */
.hero-layer--before {
  filter: brightness(0.86) saturate(0.9);
}

/* --- Reveal: drei nachlaufende Linsen ---------------------------------
   Jede Linse ist eine feste, weich maskierte Fläche, die ausschliesslich
   per transform bewegt wird. Das darin liegende Bild wird exakt gegen-
   verschoben, steht damit optisch still und bleibt deckungsgleich mit der
   Ebene darunter. Es wird also nie eine Maske neu gerastert, sondern nur
   zwei Transforms pro Linse gesetzt. Das laeuft auf dem Compositor. */
.hero-reveal {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.75s var(--e-out);
}
.hero-reveal.is-active {
  opacity: 1;
}
.hero-lens {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--lens-size);
  height: var(--lens-size);
  overflow: hidden;
  transform: translate3d(-9999px, -9999px, 0);
  -webkit-mask-image: radial-gradient(
    closest-side,
    #000 0%,
    rgba(0, 0, 0, 0.95) 20%,
    rgba(0, 0, 0, 0.68) 42%,
    rgba(0, 0, 0, 0.32) 62%,
    rgba(0, 0, 0, 0.1) 79%,
    transparent 93%
  );
  mask-image: radial-gradient(
    closest-side,
    #000 0%,
    rgba(0, 0, 0, 0.95) 20%,
    rgba(0, 0, 0, 0.68) 42%,
    rgba(0, 0, 0, 0.32) 62%,
    rgba(0, 0, 0, 0.1) 79%,
    transparent 93%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hero-lens:nth-child(1) {
  --lens-size: 620px;
  opacity: 0.8;
}
.hero-lens:nth-child(2) {
  --lens-size: 500px;
  opacity: 0.5;
}
.hero-lens:nth-child(3) {
  --lens-size: 380px;
  opacity: 0.4;
}
.hero-lens__img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--hero-w, 100vw);
  height: var(--hero-h, 100vh);
  background-image: var(--hero-clean);
  background-size: cover;
  background-position: center;
  filter: saturate(1.02);
}

/* Scrim in drei Lagen: unten weicher Auslauf in den Seitenhintergrund,
   oben eine Abdunklung fuer die Navigation, links fuer den Text. */
.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
      to bottom,
      transparent 70%,
      rgba(247, 244, 239, 0.16) 82%,
      rgba(247, 244, 239, 0.62) 93%,
      var(--sand) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(4, 14, 20, 0.8) 0%,
      rgba(4, 14, 20, 0.48) 9%,
      rgba(4, 14, 20, 0.19) 18%,
      transparent 27%
    ),
    linear-gradient(
      100deg,
      rgba(4, 14, 20, 0.88) 0%,
      rgba(4, 14, 20, 0.66) 26%,
      rgba(4, 14, 20, 0.32) 50%,
      rgba(4, 14, 20, 0.08) 70%,
      transparent 84%
    );
}

/* Scroll-Verwandlung fuer Geraete ohne Zeiger, siehe Responsive-Abschnitt */
@keyframes hero-raeumen {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes hero-klaeren {
  from {
    transform: scale(1.07);
  }
  to {
    transform: scale(1);
  }
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  width: 100%;
  color: #fff;
}

.hero-copy {
  max-width: 40rem;
}
.hero-title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
  padding-top: 0.08em;
}
.hero-title span {
  display: block;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.86);
}
/* Einzugsgebiet als dritte Hierarchiestufe: gleiche Schrift, kleiner,
   im Akzentton der Hero-Argumente. Bewusst kein eigener Zeilenumbruch. */
.hero-title small {
  display: inline-block;
  margin-left: 0.55em;
  font-size: 0.36em;
  font-weight: 500;
  letter-spacing: -0.01em;
  vertical-align: 0.3em;
  white-space: nowrap;
  color: var(--flame-200);
}

.hero-args {
  display: grid;
  gap: 0.7rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  list-style: none;
}
.hero-args li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-lead);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}
.hero-args .icon {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--flame-200);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* Bewertungs-Laufband. Beide Enden tauchen weich ab. */
.marquee {
  position: relative;
  overflow: hidden; /* das Laufband ist breiter als der Container */
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 7%,
    #000 84%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 7%,
    #000 84%,
    transparent 100%
  );
}
.marquee__track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  animation: drift-right 58s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
@keyframes drift-right {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.review {
  flex: none;
  width: min(19rem, 72vw);
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-inner);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.review__stars {
  display: flex;
  gap: 0.1rem;
  color: var(--flame-200);
  margin-bottom: 0.35rem;
}
.review__stars .icon {
  width: 0.8rem;
  height: 0.8rem;
}
.review__text {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.94);
}
.review__who {
  margin-top: 0.4rem;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.6);
}

/* Rechte Hero-Spalte: der Rechner sitzt bewusst etwas tiefer als der Text
   links. Der Versatz haengt an der Viewporthoehe, damit auf flachen
   Bildschirmen kein Scrollzwang entsteht. Die Ueberschrift steckt im
   Rechner selbst, siehe .calc__title--lg. */
.hero-calc {
  margin-top: clamp(0.5rem, 4vh, 2.75rem);
}

/* --------------------------------------------------------------------------
   8. Preisrechner (Doppelrand: Schale aussen, Kern innen)
   -------------------------------------------------------------------------- */
.calc {
  position: relative;
  padding: 0.5rem;
  border-radius: var(--r-card);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), var(--shadow-lg);
}
/* Hochwertigere Variante: Glasflaeche plus oranger Schein, der nur an
   einzelnen Kanten sitzt. Bewusst kein durchgehender farbiger Rahmen.
   Der Bloom kommt aus zwei versetzten Schatten, die Kante aus einem
   maskierten Kegelverlauf, der nur an drei Stellen Farbe traegt. */
.calc--glow {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42),
    -18px -16px 58px -26px rgba(242, 101, 34, 0.55),
    22px 26px 72px -30px rgba(242, 101, 34, 0.42), var(--shadow-lg);
}
.calc--glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 128deg,
    rgba(242, 101, 34, 0.9) 0deg,
    rgba(242, 101, 34, 0) 54deg,
    rgba(242, 101, 34, 0) 168deg,
    rgba(242, 101, 34, 0.62) 210deg,
    rgba(242, 101, 34, 0) 262deg,
    rgba(242, 101, 34, 0) 324deg,
    rgba(242, 101, 34, 0.9) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.calc__core {
  padding: clamp(1.15rem, 2vw, 1.6rem);
  border-radius: var(--r-inner);
  background: var(--surface);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
  color: var(--text);
}
.calc__head {
  margin-bottom: 1.1rem;
}
.calc__title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
/* Ueberschrift im Rechner selbst, in der Hauptfarbe auf heller Kartenflaeche */
.calc__title--lg {
  margin: 0 0 0.15rem;
  font-size: clamp(1.5rem, 2.3vw, 2.05rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.calc__hint {
  margin-top: 0.2rem;
  font-size: var(--fs-xs);
  color: var(--text-mute);
}
.calc__group {
  border: 0;
  padding: 0;
  margin: 0 0 0.8rem;
}
.calc__legend {
  padding: 0;
  margin-bottom: 0.45rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-mute);
}
.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.seg__item {
  position: relative;
  flex: 1 1 auto;
}
.seg__item input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.seg__item span {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--r-chip);
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-align: center;
  color: var(--text-mute);
  transition: background var(--t-fast) var(--e-out),
    color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out),
    transform var(--t-fast) var(--e-spring);
}
.seg__item input:hover + span {
  border-color: var(--line-strong);
  color: var(--text);
}
.seg__item input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-weight: 600;
}
.seg__item input:focus-visible + span {
  outline: 2px solid var(--flame);
  outline-offset: 2px;
}
.seg__item input:active + span {
  transform: scale(0.97);
}

/* Zusatzleistungen als Toggle-Chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.chip {
  position: relative;
}
.chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-mute);
  transition: all var(--t-fast) var(--e-out);
}
.chip span::before {
  content: "+";
  font-weight: 700;
  color: var(--text-faint);
  transition: transform var(--t-fast) var(--e-spring), color var(--t-fast);
}
.chip input:checked + span {
  border-color: var(--flame);
  background: rgba(242, 101, 34, 0.1);
  color: var(--flame-700);
  font-weight: 600;
}
.chip input:checked + span::before {
  transform: rotate(45deg);
  color: var(--flame-600);
}
.chip input:focus-visible + span {
  outline: 2px solid var(--flame);
  outline-offset: 2px;
}

.calc__result {
  display: block;
  margin-top: 1.15rem;
  padding: 0.95rem 1.05rem;
  border-radius: var(--r-inner);
  background: var(--ink);
  color: #fff;
}
.calc__result-label {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.68);
}
.calc__amount {
  display: block;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.calc__amount small {
  font-size: 0.44em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.66);
  letter-spacing: -0.02em;
}
.calc__range {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.62);
}
.calc__cta {
  margin-top: 0.85rem;
}
.calc__note {
  margin-top: 0.6rem;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-mute);
  text-align: center;
}

/* --------------------------------------------------------------------------
   9. Sektionen allgemein
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--pad-section);
}
.section--dark {
  background: var(--ink-900);
  color: #fff;
}
/* Kontakt und Ueber uns ruecken naeher zusammen. Bleibt luftig, ist aber
   sichtbar kompakter als zweimal die volle Sektionshoehe. */
#kontakt {
  padding-bottom: clamp(3.25rem, 6vw, 5.5rem);
}
#ueber-uns {
  padding-top: clamp(3.25rem, 6vw, 5.5rem);
}
.section__head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.04em;
}
.section__lead {
  margin-top: 1rem;
  max-width: 40rem;
  font-size: var(--fs-lead);
  color: var(--text-mute);
}
.section--dark .section__lead {
  color: rgba(255, 255, 255, 0.7);
}

/* Sanfter Auftritt beim Scrollen */
.reveal {
  opacity: 0;
  transform: translateY(2.2rem);
  filter: blur(6px);
  transition: opacity 0.75s var(--e-out), transform 0.95s var(--e-liquid),
    filter 0.75s var(--e-out);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* --------------------------------------------------------------------------
   10. Leistungen: gestapelt, dann 2x2
   -------------------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--stack-gap);
}
.service {
  --sx: 0px;
  --sy: 0px;
  --sr: 0deg;
  position: relative;
  padding: 0.5rem;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--shell);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translate3d(var(--sx), var(--sy), 0) rotate(var(--sr)) scale(0.9);
  transition: transform 1.1s var(--e-liquid), opacity 0.6s var(--e-out),
    box-shadow var(--t-mid) var(--e-out);
  will-change: transform;
}
.services-grid .service:nth-child(1) {
  --sx: calc(50% + var(--stack-gap) / 2);
  --sy: calc(50% + var(--stack-gap) / 2);
  --sr: -5deg;
  z-index: 4;
}
.services-grid .service:nth-child(2) {
  --sx: calc(-50% - var(--stack-gap) / 2);
  --sy: calc(50% + var(--stack-gap) / 2);
  --sr: 3.5deg;
  z-index: 3;
}
.services-grid .service:nth-child(3) {
  --sx: calc(50% + var(--stack-gap) / 2);
  --sy: calc(-50% - var(--stack-gap) / 2);
  --sr: 4.5deg;
  z-index: 2;
}
.services-grid .service:nth-child(4) {
  --sx: calc(-50% - var(--stack-gap) / 2);
  --sy: calc(-50% - var(--stack-gap) / 2);
  --sr: -3deg;
  z-index: 1;
}
.services-grid.is-dealt .service {
  opacity: 1;
  transform: none;
  z-index: auto;
}
.services-grid.is-dealt .service:nth-child(1) {
  transition-delay: 0.05s;
}
.services-grid.is-dealt .service:nth-child(2) {
  transition-delay: 0.15s;
}
.services-grid.is-dealt .service:nth-child(3) {
  transition-delay: 0.25s;
}
.services-grid.is-dealt .service:nth-child(4) {
  transition-delay: 0.35s;
}
.services-grid.is-dealt .service:hover {
  box-shadow: var(--shadow-card-hover);
}

.service__core {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-inner);
  background: var(--surface);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55);
  transition: transform var(--t-mid) var(--e-liquid);
}
.services-grid.is-dealt .service:hover .service__core {
  transform: translateY(-5px);
}
.service__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-sunk);
}
.service__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(0.78) contrast(1.02);
  transition: transform 1.1s var(--e-liquid), filter 0.7s var(--e-out);
}
.service:hover .service__media img {
  transform: scale(1.08);
  filter: saturate(1) contrast(1.04);
}
.service__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 25, 34, 0.5), transparent 55%);
  opacity: 0.85;
  transition: opacity var(--t-mid) var(--e-out);
}
.service:hover .service__media::after {
  opacity: 0.6;
}
.service__glyph {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: var(--r-chip);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 1.4rem;
  transition: transform var(--t-mid) var(--e-spring),
    background var(--t-mid) var(--e-out);
}
.service:hover .service__glyph {
  transform: translateY(-3px);
  background: rgba(242, 101, 34, 0.9);
  border-color: rgba(242, 101, 34, 0.5);
}
.service__body {
  padding: clamp(1.1rem, 2vw, 1.5rem);
}
.service__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.service__text {
  margin: 0.5rem 0 1.1rem;
  font-size: var(--fs-sm);
  color: var(--text-mute);
}

/* Fuenfte Leistung ueber die volle Rasterbreite. Bild links, Text rechts,
   damit die Karte nicht doppelt so hoch wird wie die anderen. */
.service--breit {
  grid-column: 1 / -1;
}
.service--breit .service__core {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  align-items: stretch;
}
.service--breit .service__media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 13rem;
}
.service--breit .service__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.25rem, 2.6vw, 2.25rem);
}
/* Die breite Karte faechert nicht aus dem Stapel auf, sie steigt ruhig auf */
.services-grid .service:nth-child(5) {
  --sx: 0px;
  --sy: 3rem;
  --sr: 0deg;
  z-index: 0;
}
.services-grid.is-dealt .service:nth-child(5) {
  transition-delay: 0.45s;
}

/* Das Foto der geraeumten Wohnung faehrt beim Eintritt weich von unten auf
   und zoomt dabei minimal aus. Nur die Medienflaeche bewegt sich, damit der
   Hover-Zoom des Bildes unberuehrt bleibt. */
.service--reveal .service__media {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.05);
  transition: clip-path 1.15s var(--e-liquid) 0.25s,
    transform 1.5s var(--e-liquid) 0.25s;
}
.services-grid.is-dealt .service--reveal .service__media {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   11. Preise (dunkles Band, zentriertes Panel)
   -------------------------------------------------------------------------- */
.pricing__head {
  margin: 0 auto clamp(2.25rem, 4vw, 3.25rem);
  text-align: center;
}
/* Ueberschrift bleibt ab Tablet in einer Zeile. Die Schriftgroesse ist an die
   Viewportbreite gekoppelt, damit sie mitschrumpft statt umzubrechen. */
.pricing__title {
  font-size: clamp(1.6rem, 5.6vw, 3.4rem);
}
@media (min-width: 768px) {
  .pricing__title {
    white-space: nowrap;
  }
}
.pricing__head .section__lead {
  margin-inline: auto;
}

/* Rechner und Argumente teilen sich exakt dieselbe Breite */
.pricing__panel,
.pricing__trust {
  max-width: var(--pricing-width);
  margin-inline: auto;
}
.pricing__trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: 0;
  list-style: none;
}
/* Helle Glasflaeche wie der Header, mit dunkelorangem Schein an einzelnen
   Kanten statt einem durchgehenden farbigen Rahmen. */
.pricing__trust li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-chip);
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: linear-gradient(
      140deg,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.08)
    ),
    rgba(247, 244, 239, 0.94);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
    -12px -10px 34px -20px rgba(178, 63, 7, 0.8),
    14px 16px 40px -22px rgba(178, 63, 7, 0.6),
    0 18px 44px -24px rgba(8, 25, 34, 0.6);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.pricing__trust li::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 140deg,
    rgba(178, 63, 7, 0.9) 0deg,
    rgba(178, 63, 7, 0) 58deg,
    rgba(178, 63, 7, 0) 176deg,
    rgba(214, 79, 13, 0.75) 214deg,
    rgba(178, 63, 7, 0) 266deg,
    rgba(178, 63, 7, 0) 326deg,
    rgba(178, 63, 7, 0.9) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.pricing__trust .icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  color: var(--flame-600);
}

/* --------------------------------------------------------------------------
   12. Kontakt
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.form-shell {
  padding: 0.5rem;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--shell);
  box-shadow: var(--shadow-md);
}
.form-core {
  padding: clamp(1.25rem, 2.6vw, 2.1rem);
  border-radius: var(--r-inner);
  background: var(--surface);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55);
}
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
.field {
  display: grid;
  gap: 0.4rem;
}
.field--wide {
  grid-column: 1 / -1;
}
.field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-field);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast) var(--e-out),
    box-shadow var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);
}
.field textarea {
  min-height: 7rem;
  resize: vertical;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%230f2a38'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem;
  padding-right: 2.4rem;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-faint);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--flame);
  box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.18);
}
.field__help {
  font-size: var(--fs-xs);
  color: var(--text-mute);
}
.field__error {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--flame-700);
  min-height: 0;
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea {
  border-color: var(--flame-700);
  background: rgba(242, 101, 34, 0.05);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-mute);
  line-height: 1.5;
}
.consent input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  accent-color: var(--flame);
}
.consent a {
  color: var(--flame-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-status {
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-field);
  font-size: var(--fs-sm);
  font-weight: 500;
  display: none;
}
.form-status[data-state="success"] {
  display: block;
  background: rgba(15, 42, 56, 0.06);
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.form-status[data-state="error"] {
  display: block;
  background: rgba(242, 101, 34, 0.1);
  border: 1px solid rgba(242, 101, 34, 0.4);
  color: var(--flame-700);
}
.btn.is-busy {
  pointer-events: none;
  opacity: 0.75;
}
.btn.is-busy .btn__dot {
  animation: pulse-dot 1.1s var(--e-out) infinite;
}
@keyframes pulse-dot {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.7);
    opacity: 0.5;
  }
}

/* Rechte Spalte: Direktwege */
.contact-rail {
  display: grid;
  gap: 0.6rem;
}
.rail-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.05rem 1.15rem;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform var(--t-mid) var(--e-liquid),
    border-color var(--t-fast) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.rail-card:hover {
  transform: translateY(-3px);
  border-color: var(--flame);
  box-shadow: var(--shadow-md);
}
.rail-card__glyph {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--r-chip);
  background: var(--shell);
  color: var(--flame-600);
  font-size: 1.3rem;
  transition: background var(--t-fast) var(--e-out), color var(--t-fast);
}
.rail-card:hover .rail-card__glyph {
  background: var(--flame);
  color: #fff;
}
.rail-card__label {
  font-size: var(--fs-xs);
  color: var(--text-mute);
}
.rail-card__value {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.rail-note {
  margin-top: 0.5rem;
  padding: 1.05rem 1.15rem;
  border-radius: var(--r-card);
  background: var(--surface-sunk);
  font-size: var(--fs-sm);
  color: var(--text-mute);
}
.rail-note strong {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------------
   13. Ueber uns (Bild und Textkarte ueberlappen)
   -------------------------------------------------------------------------- */
.about {
  position: relative;
}
.about-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.about-media {
  position: relative;
  grid-column: 1 / 2;
  padding: 0.5rem;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--shell);
}
.about-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-inner);
}
/* Logo-Variante: EINE durchgehend schwarze Flaeche. Kein zweites Rechteck und
   kein eigener Bildhintergrund mehr. Das Logo liegt als freigestelltes PNG
   darauf, deshalb scheint der Puls dahinter durch statt dagegen zu stossen. */
.about-media--mark {
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #0a0a0a;
}
.about-media--mark img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  border-radius: 0;
  background: none;
  padding: clamp(1.5rem, 4vw, 3.25rem);
}
.about-media__puls {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 46%,
    rgba(242, 101, 34, 0.5) 0%,
    rgba(242, 101, 34, 0.16) 38%,
    rgba(242, 101, 34, 0) 68%
  );
  animation: logo-puls 4.5s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes logo-puls {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.08);
  }
}
.about-card {
  position: relative;
  z-index: 2;
  grid-column: 2 / 3;
  margin-left: clamp(-5rem, -4vw, -2rem);
  padding: clamp(1.75rem, 3.4vw, 3rem);
  border-radius: var(--r-card);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.about-card h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}
.about-card p {
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.76);
}
.about-card p + p {
  margin-top: 0.85rem;
}
.about-sign {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.about-sign img {
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-chip);
  object-fit: cover;
  background: #0a0a0a;
}
.about-sign span {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.4;
}
.about-sign strong {
  display: block;
  color: #fff;
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}
.footer-brand .brand__name,
.site-footer h3 {
  color: #fff;
}
.footer-brand p {
  margin-top: 1rem;
  max-width: 24rem;
  font-size: var(--fs-sm);
}
.site-footer h3 {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.footer-list {
  display: grid;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-sm);
}
.footer-list a,
.footer-list button {
  position: relative;
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: color var(--t-fast) var(--e-out);
}
.footer-list a:hover,
.footer-list button:hover {
  color: var(--flame-200);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
}

/* Aktive Seite im Footer. Gesetzt wird aria-current per JS aus dem
   Dateinamen der aktuellen Seite, die Linie haengt allein daran. */
.footer-list a[aria-current="page"] {
  color: #fff;
}
.footer-list a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--flame);
}

/* --- Signatur ---------------------------------------------------------
   Der Schriftzug ist ein Pfad aus der Schrift Caveat. Eine Maske faehrt
   als dicker Strich die Schreibrichtung entlang und gibt die Buchstaben
   dadurch in Schreibfolge frei. Danach erscheint die Adresse. */
.footer-signatur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}
.signatur {
  display: block;
  width: clamp(7rem, 13vw, 9.5rem);
  height: auto;
}
.signatur__linie {
  stroke-dasharray: 590;
  stroke-dashoffset: 590;
}
.footer-signatur.is-in .signatur__linie {
  animation: signatur-schreiben 1.75s cubic-bezier(0.62, 0.03, 0.32, 1) forwards;
}
@keyframes signatur-schreiben {
  to {
    stroke-dashoffset: 0;
  }
}
.footer-signatur__url {
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--e-out) 1.8s,
    transform 0.85s var(--e-liquid) 1.8s, color var(--t-fast) var(--e-out);
}
.footer-signatur.is-in .footer-signatur__url {
  opacity: 1;
  transform: none;
}
.footer-signatur__url:hover,
.footer-signatur__url:focus-visible {
  color: var(--flame-200);
}
.site-footer .brand__sub {
  color: rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------------------
   15. Cookies
   -------------------------------------------------------------------------- */
.cookie-bar {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 1rem;
  z-index: var(--z-modal);
  max-width: 34rem;
  margin-inline: auto;
  padding: 0.5rem;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--shell);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: var(--shadow-lg);
  transform: translateY(140%);
  transition: transform 0.7s var(--e-liquid);
}
.cookie-bar.is-visible {
  transform: none;
}
.cookie-bar__core {
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-inner);
  background: var(--surface);
}
.cookie-bar p {
  font-size: var(--fs-sm);
  color: var(--text-mute);
  margin-bottom: 0.9rem;
}
.cookie-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

dialog.modal {
  width: min(32rem, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
dialog.modal::backdrop {
  background: rgba(8, 25, 34, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal__core {
  padding: clamp(1.5rem, 3vw, 2rem);
}
.modal__core h2 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}
.modal__core > p {
  font-size: var(--fs-sm);
  color: var(--text-mute);
  margin-bottom: 1.25rem;
}
.cookie-opt {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}
.cookie-opt input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--flame);
}
.cookie-opt strong {
  display: block;
  font-size: var(--fs-sm);
}
.cookie-opt span {
  font-size: var(--fs-xs);
  color: var(--text-mute);
}
.modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   16. Rechtstexte (Unterseiten)
   -------------------------------------------------------------------------- */
.legal {
  padding-block: clamp(8rem, 14vh, 11rem) var(--pad-section);
}
.legal__inner {
  max-width: 46rem;
}
.legal h1 {
  font-size: var(--fs-h2);
  margin-bottom: 1.5rem;
}
.legal h2 {
  font-size: 1.3rem;
  margin: 2.5rem 0 0.75rem;
}
.legal p,
.legal li {
  color: var(--text-mute);
  font-size: var(--fs-sm);
}
.legal p + p {
  margin-top: 0.75rem;
}
.legal ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
}
.legal .todo {
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
  border-radius: var(--r-inner);
  border: 1px dashed var(--flame);
  background: rgba(242, 101, 34, 0.07);
  color: var(--text);
  font-size: var(--fs-sm);
}

/* Kleines Schild ueber der Ueberschrift, gleiche Sprache wie die
   Eyebrow-Tags auf der Startseite. */
.legal__eyebrow {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(242, 101, 34, 0.08);
  color: var(--flame-700);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Visitenkarte. Aussen Schale, innen Kern, wie beim Kontaktformular. */
.imprint-card {
  margin: 1.75rem 0 0.5rem;
  padding: 0.5rem;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--shell);
  box-shadow: var(--shadow-md);
}
.imprint-card__core {
  padding: clamp(1.35rem, 3vw, 2.1rem);
  border-radius: var(--r-inner);
  background: var(--surface);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55);
}
.imprint-card__name {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.imprint-card__role {
  margin: 0.3rem 0 0;
  font-size: var(--fs-sm);
  color: var(--text-mute);
}
.imprint-card__rule {
  height: 1px;
  margin: 1.35rem 0;
  border: 0;
  background: var(--line);
}

/* Kontaktzeilen. Icon in eigener Kachel, Text daneben. */
.imprint-rows {
  display: grid;
  gap: 0.9rem;
}
.imprint-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  color: var(--text);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.imprint-row__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  color: var(--flame);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
    background-color 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.imprint-row__icon .icon {
  width: 1.15rem;
  height: 1.15rem;
}
.imprint-row__label {
  display: block;
  margin-bottom: 0.1rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.imprint-row__value {
  font-variant-numeric: tabular-nums;
}
/* Nur die anklickbaren Zeilen reagieren. */
a.imprint-row:hover .imprint-row__icon,
a.imprint-row:focus-visible .imprint-row__icon {
  transform: translateY(-2px);
  background: rgba(242, 101, 34, 0.12);
}
a.imprint-row:hover .imprint-row__value {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .imprint-row__icon {
    transition: none;
  }
  a.imprint-row:hover .imprint-row__icon,
  a.imprint-row:focus-visible .imprint-row__icon {
    transform: none;
  }
}

/* Standzeile unter der Ueberschrift. */
.legal__stand {
  margin: -0.5rem 0 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-mute);
}

/* Sprungnavigation. Bei sechzehn Abschnitten ist das die halbe Miete. */
.legal-toc {
  margin: 2rem 0 0.5rem;
  padding: 0.5rem;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--shell);
}
.legal-toc__core {
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border-radius: var(--r-inner);
  background: var(--surface);
}
.legal-toc__title {
  margin: 0 0 0.85rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.legal-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 1.5rem;
}
.legal-toc__list a {
  display: flex;
  gap: 0.6rem;
  padding: 0.3rem 0;
  color: var(--text);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.legal-toc__list a:hover {
  color: var(--flame-700);
}
.legal-toc__list a span {
  flex: 0 0 1.35rem;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.legal-toc__list a:hover span {
  color: var(--flame);
}

/* Zweistellige Nummer vor jeder Abschnittsueberschrift. */
.legal h2 .legal__num {
  display: inline-block;
  margin-right: 0.55rem;
  color: var(--flame);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
/* Sprungziele nicht unter den Header schieben. */
.legal h2[id] {
  scroll-margin-top: 6.5rem;
}

/* Die sieben Betroffenenrechte als ruhiges Raster. */
.rights-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.right-card {
  padding: 1.1rem 1.2rem;
  border-radius: var(--r-inner);
  border: 1px solid var(--line);
  background: var(--surface);
}
.right-card__art {
  margin: 0 0 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--flame-700);
}
.right-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.legal .right-card p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Merksatz. Bewusst anders als .todo, das signalisiert Unfertiges. */
.legal-note {
  margin: 1.35rem 0;
  padding: 1.05rem 1.25rem;
  border-radius: var(--r-inner);
  border: 1px solid var(--line);
  border-left: 3px solid var(--flame);
  background: var(--surface);
}
.legal .legal-note p {
  margin: 0;
  color: var(--text);
}
.legal .legal-note p + p {
  margin-top: 0.6rem;
}

/* Formularblatt zum Ausdrucken. Aussen Schale, innen Kern, wie ueberall. */
.form-sheet {
  margin: 1.75rem 0 0.5rem;
  padding: 0.5rem;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--shell);
  box-shadow: var(--shadow-md);
}
.form-sheet__core {
  padding: clamp(1.35rem, 3vw, 2.1rem);
  border-radius: var(--r-inner);
  background: var(--surface);
}
.form-sheet__to {
  margin: 0 0 1.35rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--line);
}
.legal .form-sheet__to p {
  margin: 0;
  color: var(--text);
}
.form-sheet__to strong {
  display: block;
  margin-bottom: 0.25rem;
}

/* Eine Zeile zum Ausfuellen: Beschriftung, darunter die Linie. */
.form-blank {
  margin-top: 1.15rem;
}
.form-blank__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.form-blank__line {
  height: 2.1rem;
  border-bottom: 1px solid var(--line-strong);
}
.form-blank--tall .form-blank__line {
  height: 3.6rem;
}
.form-sheet__hint {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--text-mute);
}

/* Merksatz. Bewusst anders als .todo, das signalisiert Unfertiges. */
.legal-note {
  margin: 1.35rem 0;
  padding: 1.05rem 1.25rem;
  border-radius: var(--r-inner);
  border: 1px solid var(--line);
  border-left: 3px solid var(--flame);
  background: var(--surface);
}
.legal .legal-note p {
  margin: 0;
  color: var(--text);
}
.legal .legal-note p + p {
  margin-top: 0.6rem;
}

@media (max-width: 640px) {
  .legal-toc__list,
  .rights-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Druckansicht. Die Formulare sollen zum Ausfuellen aufs Papier,
   ohne Navigation, Cookie-Leiste und Signatur. */
@media print {
  .site-header,
  .site-footer,
  .cookie-bar,
  .legal-toc,
  .legal__eyebrow,
  .link-arrow {
    display: none !important;
  }
  .legal {
    padding-block: 0;
  }
  .legal__inner {
    max-width: none;
  }
  .form-sheet,
  .imprint-card {
    box-shadow: none;
    break-inside: avoid;
  }
  .form-sheet {
    break-before: page;
  }
  .legal h2 {
    break-after: avoid;
  }
  body {
    background: #fff;
  }
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */

/* Flache Desktopbildschirme: Hero enger schnueren, damit der Rechner
   vollstaendig sichtbar bleibt und kein Scrollzwang entsteht. */
@media (min-width: 1025px) and (max-height: 900px) {
  .hero {
    padding-block: 6.75rem 2.25rem;
  }
  .hero-calc {
    margin-top: 0.25rem;
  }
  .calc__title--lg {
    font-size: 1.55rem;
  }
  .hero-args {
    gap: 0.5rem;
  }
  .hero-actions,
  .marquee {
    margin-top: 1.25rem;
  }
  .calc__core {
    padding: 1.05rem 1.15rem;
  }
  .calc__group {
    margin-bottom: 0.6rem;
  }
  .calc__result {
    margin-top: 0.85rem;
    padding: 0.8rem 0.95rem;
  }
}

@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .hero-copy {
    max-width: 34rem;
  }
  /* einspaltig: der Versatz der rechten Spalte entfaellt */
  .hero-calc {
    margin-top: 0;
    max-width: 34rem;
  }
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-stage {
    grid-template-columns: minmax(0, 1fr);
  }
  .about-media,
  .about-card {
    grid-column: 1 / -1;
  }
  .about-card {
    margin-left: 0;
    margin-top: -3rem;
    width: calc(100% - 2rem);
    margin-inline: auto;
  }
}

@media (max-width: 860px) {
  .nav-center,
  .nav-cta {
    display: none;
  }
  .burger {
    display: block;
    justify-self: end;
    grid-column: 3;
  }
  .header-shell {
    grid-template-columns: auto 1fr auto;
  }

  .hero {
    min-height: auto;
    padding-block: 7.5rem 3.5rem;
  }
  /* Ohne Zeiger gibt es keinen Hover, also auch keine Linsen */
  .hero-reveal {
    display: none;
  }

  /* Beim ersten Scrollen raeumt sich die Wohnung selbst auf. Die beiden
     Fotos sind deckungsgleich, deshalb wirkt die Ueberblendung wie eine
     Verwandlung desselben Raums und nicht wie ein Bildwechsel.
     Gesteuert von der Scrollposition, ohne scroll-Listener. */
  @supports (animation-timeline: scroll()) {
    .hero-layer--before {
      animation: hero-raeumen linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 72vh;
    }
    .hero-layer--after {
      animation: hero-klaeren linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 72vh;
    }
  }
  /* Fallback ohne Scroll-Timeline: ruhiger diagonaler Vorher-Nachher-Split */
  @supports not (animation-timeline: scroll()) {
    .hero-layer--before {
      -webkit-mask-image: linear-gradient(
        104deg,
        #000 0%,
        #000 46%,
        transparent 74%
      );
      mask-image: linear-gradient(104deg, #000 0%, #000 46%, transparent 74%);
    }
  }

  .hero-scrim {
    background: linear-gradient(
        to bottom,
        transparent 74%,
        rgba(247, 244, 239, 0.2) 86%,
        rgba(247, 244, 239, 0.7) 95%,
        var(--sand) 100%
      ),
      linear-gradient(
        170deg,
        rgba(4, 14, 20, 0.88) 0%,
        rgba(4, 14, 20, 0.62) 40%,
        rgba(4, 14, 20, 0.8) 100%
      );
  }

  .services-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Auf Mobil kein Stapel, nur ein ruhiger Auftritt von unten */
  .services-grid .service {
    --sx: 0px;
    --sy: 2.5rem;
    --sr: 0deg;
  }
  /* Argumente sauber untereinander, weiterhin buendig mit dem Rechner */
  .pricing__trust {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Breite Karte stapelt wie alle anderen: Bild oben, Text darunter */
  .service--breit .service__core {
    grid-template-columns: minmax(0, 1fr);
  }
  .service--breit .service__media {
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
  }
  .services-grid .service:nth-child(5) {
    --sy: 2.5rem;
  }
  .field-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .hero-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .seg__item {
    flex: 1 1 calc(50% - 0.2rem);
  }
  .about-card {
    width: 100%;
    margin-top: -2rem;
  }
}

/* --------------------------------------------------------------------------
   18. Reduzierte Bewegung
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee__track {
    animation: none;
    transform: none;
  }
  .marquee {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .service {
    opacity: 1;
    transform: none;
  }
  /* Logo-Puls steht still, bleibt aber als ruhiger Schein sichtbar */
  .about-media__puls {
    animation: none;
    opacity: 0.5;
    transform: none;
  }
  /* Kein folgender Reveal, keine Scroll-Verwandlung. Das Vorher-Bild
     bleibt stehen, der Unterschied wird ueber die Sektionen erzaehlt. */
  .hero-reveal {
    display: none;
  }
  .hero-layer--before,
  .hero-layer--after {
    animation: none !important;
    transform: none;
  }
  .hero-layer--before {
    opacity: 1;
  }
  /* Foto der Leistungskarte ohne Maskenfahrt, sofort vollstaendig sichtbar */
  .service--reveal .service__media {
    clip-path: none;
    transform: none;
  }
  /* Schriftzug wird nicht geschrieben, sondern steht direkt da */
  .signatur__linie {
    stroke-dashoffset: 0;
    animation: none !important;
  }
  .footer-signatur__url {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* Kein Bizeps-Zucken. Das Logo bleibt statisch sichtbar, der Farbwechsel
     des Headers laeuft unveraendert weiter. */
  .brand__arm {
    animation: none !important;
    transform: none !important;
  }
}

/* Ohne Transparenz: Glas wird zu deckenden Flaechen, Kontrast bleibt erhalten */
@media (prefers-reduced-transparency: reduce) {
  .calc {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .pricing__trust li {
    background: var(--sand);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}