/* Malermeisterbetrieb Ahne – Stylesheet
   Richtung A „Streiflicht“: design/brand-guidelines.md, Werte aus design/design-tokens.md,
   Bewegung nach design/motion-spec.md. Basis: Grundgerüst des Website-Systems (hell umgebaut). */

/* ---------- Schriften (SIL OFL, Lizenztexte in fonts/) ---------- */
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens (design/design-tokens.md) ---------- */
:root {
  --color-bg: #F6F3EE;
  --color-bg-rgb: 246 243 238;
  --color-surface: #ECE6DB;
  --color-text: #23201C;
  --color-text-rgb: 35 32 28;
  --color-text-muted: #5F5A53;
  --color-primary: #23201C;
  --color-primary-hover: #3A352F;
  --color-on-primary: #FFFFFF;
  --color-on-primary-muted: #BDB5A8;
  --color-secondary: #FFF151;
  --color-decor: #C9B98F;
  --color-border: rgb(35 32 28 / 0.12);
  --color-field-border: #8A8379;
  --color-field-bg: #FFFFFF;
  --color-error: #A3261C;
  --color-success: #1E6B32;
  --color-light-rgb: 255 246 220;
  --color-shade-rgb: 20 15 5;
  --color-note-bg: #FFF3CD;
  --color-note-text: #5C4400;
  --color-note-border: #B38600;

  /* Eine Schrift für alles (Wunsch Ilka Ahne, 14.10.2026: einheitlich wie „Kontakt“ und „Zeiten und Gebiet“ im Footer).
     Bis dahin waren Überschriften in Fraunces gesetzt, Stand davor in archiv/v3-2026-10-14-vor-ilkas-aenderungen/. */
  --font-heading: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-weight-heading: 600;

  --text-mega: clamp(2.75rem, 1.4296rem + 5.6338vw, 6.5rem);
  --text-display: clamp(2.5rem, 1.7958rem + 3.0047vw, 4.5rem);
  --text-h1: clamp(2.25rem, 1.7218rem + 2.2535vw, 3.75rem);
  --text-h2: clamp(1.875rem, 1.4789rem + 1.6901vw, 3rem);
  --text-h3: clamp(1.375rem, 1.2430rem + 0.5634vw, 1.75rem);
  --text-lead: clamp(1.1875rem, 1.1215rem + 0.2817vw, 1.375rem);
  --text-body: clamp(1.125rem, 1.1030rem + 0.0939vw, 1.1875rem);
  --text-small: clamp(0.9375rem, 0.9155rem + 0.0939vw, 1rem);
  --text-label: clamp(0.8125rem, 0.7905rem + 0.0939vw, 0.875rem);
  --tracking-display: -0.015em;
  --tracking-label: 0.14em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-section: clamp(4.5rem, 2.9155rem + 6.7606vw, 9rem);

  --container-max: 1240px;
  --container-text: 66ch;
  --gutter: clamp(1rem, 0.4718rem + 2.2535vw, 2.5rem);

  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(35 32 28 / 0.08);
  --shadow-md: 0 20px 50px -24px rgb(35 32 28 / 0.28);
  --border-width: 1px;
  --border-field: 1.5px;

  --duration-fast: 180ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;
  --duration-marker: 800ms;
  --duration-glint: 900ms;
  --duration-sheen: 4500ms;
  --stagger: 80ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-draw: cubic-bezier(0.6, 0.05, 0.25, 1);

  --header-h: 72px;
  --logo-h: 48px;
  --tap: 44px;
  --button-h: 52px;

  /* Rollstrich-Marker: Logo-Gelb mit leicht unregelmäßigen Kanten */
  --marker-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 7C30 3 70 6 100 4S170 2 198 5L197 15C160 18 120 14 90 17S30 15 3 17Z' fill='%23FFF151'/%3E%3C/svg%3E");
}
@media (min-width: 1024px) {
  :root { --header-h: 96px; --logo-h: 64px; }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  background: var(--color-bg);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
/* Nur sehr lange Wörter trennen, sonst bleiben Überschriften ungetrennt */
@supports (hyphenate-limit-chars: 17) {
  h1, h2, h3 { hyphens: auto; hyphenate-limit-chars: 17 6 6; }
}
h1 { font-size: var(--text-h1); line-height: 1.08; }
h2 { font-size: var(--text-h2); line-height: 1.12; }
h3 { font-size: var(--text-h3); line-height: 1.2; font-weight: 500; letter-spacing: 0; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
address { font-style: normal; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--color-secondary); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-md);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }

.container {
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}

/* ---------- Typo-Bausteine ---------- */
.label {
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.section__lead,
.lead {
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Rollstrich-Marker: zeichnet sich einmal von links nach rechts (nur mit JavaScript und Bewegung) */
.marker {
  background-image: var(--marker-image);
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.38em;
  padding-inline: 0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size var(--duration-marker) var(--ease-draw);
}
.marker--under {
  background-position: 0 100%;
  background-size: 100% 0.12em;
  padding-bottom: 0.08em;
}
.reveal-ready .marker[data-marker]:not(.is-drawn) { background-size: 0% 0.38em; }
.reveal-ready .marker--under[data-marker]:not(.is-drawn) { background-size: 0% 0.12em; }

/* Glanz auf dem Strich unter der Telefonnummer (Abschluss): ein Lichtreflex wie über frisch gestrichener Farbe.
   Läuft dreimal, sobald der Strich ins Bild kommt (.is-glaenzend per Skript), beim nächsten Hinscrollen von vorn.
   Ohne JavaScript und bei Reduced Motion bleibt der Strich ruhig (Wahl von Levin: Variante „Glanz“, 12.10.2026). */
.marker--glanz { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .marker--glanz::after {
    content: "";
    position: absolute;
    left: 0.04em;
    right: 0.04em;
    bottom: 0;
    height: 0.12em;
    background: linear-gradient(100deg, transparent 0 38%, rgb(255 255 255 / 0.95) 50%, transparent 62% 100%) -60% 0 / 40% 100% no-repeat;
    -webkit-mask: var(--marker-image) 0 0 / 100% 100% no-repeat;
    mask: var(--marker-image) 0 0 / 100% 100% no-repeat;
    opacity: 0;
    pointer-events: none;
  }
  .marker--glanz.is-drawn.is-glaenzend::after { opacity: 1; animation: sheen var(--duration-sheen) ease-in-out 3; }
}
@keyframes sheen {
  0%, 45% { background-position: -60% 0; }
  85%, 100% { background-position: 160% 0; }
}

/* Textlink: Unterstreichung, beim Hover zeichnet sich der gelbe Marker */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  background-image: var(--marker-image);
  background-repeat: no-repeat;
  background-position: 0 72%;
  background-size: 0% 0.5em;
  transition: background-size var(--duration-marker) var(--ease-draw);
}
.text-link:hover { background-size: 100% 0.5em; }
.text-link__icon { width: 1em; height: 1em; }
.text-link--light {
  color: var(--color-on-primary);
  background-image: none;
  text-decoration-color: rgb(255 255 255 / 0.5);
  transition: text-decoration-color var(--duration-fast) var(--ease-standard);
}
.text-link--light:hover { text-decoration-color: var(--color-secondary); text-decoration-thickness: 2px; }


/* ---------- Buttons ---------- */
.button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--button-h);
  padding: var(--space-4) 28px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.button:hover { background: var(--color-primary-hover); }
.button:active { transform: translateY(1px); }
/* Lichtglanz beim Hover */
.button::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 60%;
  z-index: -1;
  background: linear-gradient(100deg, transparent 0%, rgb(var(--color-light-rgb) / 0.28) 50%, transparent 100%);
  transform: translateX(-105%);
  pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button:hover::after { animation: glint var(--duration-glint) var(--ease-standard) both; }
}
@keyframes glint {
  from { transform: translateX(-105%); }
  to { transform: translateX(172%); }
}
.button--small { min-height: var(--tap); padding: 10px 20px; font-size: 0.9375rem; }
.button--light { background: var(--color-bg); color: var(--color-text); }
.button--light:hover { background: var(--color-surface); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgb(var(--color-bg-rgb) / 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: var(--border-width) solid transparent;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}
.site-header.is-solid { border-bottom-color: var(--color-border); }
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  width: min(100% - 2 * var(--gutter), var(--container-max));
  min-height: var(--header-h);
  margin-inline: auto;
  transition: min-height var(--duration-base) var(--ease-standard);
}
.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  padding-block: var(--space-2);
}
.brand__logo {
  width: auto;
  height: var(--logo-h);
  transition: height var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}

.site-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); list-style: none; }
.site-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 500;
  text-decoration: none;
  background-image: var(--marker-image);
  background-repeat: no-repeat;
  background-position: 0 78%;
  background-size: 0% 0.42em;
  transition: background-size var(--duration-marker) var(--ease-draw);
}
.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] { background-size: 100% 0.42em; }
.site-nav__extra { display: none; }

/* Ohne JavaScript: Navigation als umbrechende Zeile unter dem Logo */
.site-nav { order: 10; flex-basis: 100%; padding-bottom: var(--space-3); }

.site-header__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--tap);
  min-height: var(--tap);
  font-weight: 600;
  text-decoration: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
}
.site-header__phone-text,
.site-header__cta { display: none; }

.site-header__menu {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-4);
  background: transparent;
  font-weight: 600;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.site-header__menu[hidden] { display: none; }
.site-header__menu .icon--close,
.site-header__menu[aria-expanded="true"] .icon--open { display: none; }
.site-header__menu[aria-expanded="true"] .icon--close { display: block; }

/* Mit JavaScript: Menü als Panel unter dem Header */
.js .site-nav {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: var(--space-5) var(--gutter) var(--space-7);
  background: var(--color-bg);
  border-top: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-md);
}
.js .site-header.is-open .site-nav { display: block; }
.js .site-nav__list { flex-direction: column; gap: 0; }
.js .site-nav__list a {
  min-height: 56px;
  width: 100%;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 500;
  border-bottom: var(--border-width) solid var(--color-border);
}
.js .site-nav__extra { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.site-nav__contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  font-weight: 600;
  text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .site-header.is-open .site-nav { animation: menu-in var(--duration-base) var(--ease-out) both; }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 768px) {
  .site-header__cta { display: inline-flex; }
  .site-header__phone-text { display: inline; }
  .site-header__phone { padding-inline: var(--space-4); }
}
@media (min-width: 1280px) {
  .site-header__inner { flex-wrap: nowrap; gap: var(--space-5); }
  .site-header.is-solid { --logo-h: 48px; }
  .site-header.is-solid .site-header__inner { min-height: 72px; }
  .site-nav,
  .js .site-nav {
    display: block;
    position: static;
    order: 0;
    flex-basis: auto;
    max-height: none;
    overflow: visible;
    margin-inline: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    animation: none;
  }
  .js .site-nav__list { flex-direction: row; gap: var(--space-5); }
  .js .site-nav__list a {
    min-height: var(--tap);
    width: auto;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    border: 0;
  }
  .js .site-nav__extra { display: none; }
  .site-header__phone { border: 0; padding-inline: var(--space-2); }
  .site-header__menu { display: none; }
}

/* Seiten mit Foto-Hero (body.hat-fotohero): Die Kopfleiste liegt oben durchsichtig über dem Foto, mit heller
   Bildmarke und weißer Schrift. Ab dem ersten Scrollen (.is-solid) oder mit offenem Menü sieht sie aus wie überall.
   Nur mit JavaScript, weil erst das Skript .is-solid setzt. */
.js .hat-fotohero .site-header { position: fixed; inset: 0 0 auto 0; }
.js .hat-fotohero .site-header:not(.is-solid, .is-open) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--color-on-primary);
}
.js .hat-fotohero .brand::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: var(--logo-h);
  aspect-ratio: 374 / 192;
  background: url("/img/logo-ahne-bildmarke-hell-192.png") left center / contain no-repeat;
  opacity: 0;
  translate: 0 -50%;
  transition: opacity var(--duration-base) var(--ease-standard), height var(--duration-base) var(--ease-standard);
}
.js .hat-fotohero .site-header:not(.is-solid, .is-open) .brand::before { opacity: 1; }
.js .hat-fotohero .site-header:not(.is-solid, .is-open) .brand__logo { opacity: 0; }
.js .hat-fotohero .site-header:not(.is-solid, .is-open) .site-header__phone,
.js .hat-fotohero .site-header:not(.is-solid, .is-open) .site-header__menu { border-color: rgb(255 255 255 / 0.45); }
.js .hat-fotohero .site-header:not(.is-solid, .is-open) .site-header__cta { background: var(--color-bg); color: var(--color-text); }
.js .hat-fotohero .site-header:not(.is-solid, .is-open) .site-nav__list a { background-position: 0 100%; background-size: 0% 0.12em; }
.js .hat-fotohero .site-header:not(.is-solid, .is-open) .site-nav__list a:hover { background-size: 100% 0.12em; }
.js .hat-fotohero .site-header:not(.is-solid, .is-open) :focus-visible { outline-color: var(--color-secondary); }
.js .hat-fotohero .hero {
  min-height: min(100svh, calc(900px + var(--header-h)));
  padding-top: var(--header-h);
}

/* ---------- Abschnitte ---------- */
.section { padding-block: var(--space-section); }
.section--surface { background: var(--color-surface); }
.section--tight-top { padding-top: 0; } /* direkt an den Abschnitt davor anschließen (Über uns: Was uns wichtig ist) */
.section__head { max-width: 46rem; margin-bottom: var(--space-8); }
.section__head--nah { margin-bottom: var(--space-6); } /* direkt über einem Bildstreifen */
.section__head h2 + .section__lead { margin-top: var(--space-4); }

/* ---------- 1 Hero ----------
   Foto als Hintergrund, Text darüber. Ein warmer, dunkler Verlauf (--color-shade-rgb) sorgt für
   Kontrast nach WCAG AA (im Browser nachgerechnet, auch an der hellsten Stelle des Fotos):
   bis 1023 px liegt er hinter dem Textblock und passt sich dessen Höhe an, ab 1024 px läuft er von links.
   Wechselbilder: Jedes Bild (.hero__slide) trägt seinen eigenen Verlauf, beim Überblenden bleibt der Text
   deshalb immer gleich gut lesbar (für alle vier Fotos nachgerechnet). */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: min(calc(100svh - var(--header-h)), 900px);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__slide { position: absolute; inset: 0; margin: 0; isolation: isolate; }
.hero__slide[hidden] { display: none; }
.js .hero__slide:not(.is-current) { opacity: 0; }
.hero__slide picture,
.hero__slide img { width: 100%; height: 100%; }
.hero__slide img { object-fit: cover; object-position: 50% 30%; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero__slide { transition: opacity 1200ms var(--ease-standard); }
}
.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgb(var(--color-shade-rgb) / 0.72) 0,
      rgb(var(--color-shade-rgb) / 0.45) var(--header-h),
      rgb(var(--color-shade-rgb) / 0) calc(var(--header-h) * 2.1)),
    rgb(var(--color-shade-rgb) / 0.12);
}
.hero__copy {
  position: relative;
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
  padding-block: var(--space-8) var(--space-7);
}
/* Handy und Tablet: Verlauf hinter dem Textblock, oben 64 px weich auslaufend */
.hero__copy::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--space-8)) calc(-1 * var(--gutter)) 0;
  z-index: -1;
  background: linear-gradient(0deg,
    rgb(var(--color-shade-rgb) / 0.88) 0%,
    rgb(var(--color-shade-rgb) / 0.74) 55%,
    rgb(var(--color-shade-rgb) / 0.64) calc(100% - 2 * var(--space-8)),
    rgb(var(--color-shade-rgb) / 0) 100%);
}
.hero__label { margin-bottom: var(--space-5); color: rgb(255 255 255 / 0.85); }
.hero__title {
  max-width: 15ch;
  font-size: var(--text-display);
  line-height: 1.03;
}
.hero__title .marker--under { background-size: 100% 0.1em; }
.reveal-ready .hero__title .marker--under[data-marker]:not(.is-drawn) { background-size: 0% 0.1em; }
.hero__lead {
  max-width: 34em;
  margin-top: var(--space-5);
  font-size: var(--text-lead);
  line-height: 1.55;
  color: rgb(255 255 255 / 0.92);
}
.hero__cta { margin-top: var(--space-6); }
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
  list-style: none;
  font-size: var(--text-small);
  color: rgb(255 255 255 / 0.85);
}
.trust li { display: inline-flex; align-items: center; gap: var(--space-2); }
.trust li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-decor);
}
/* Sehr kleine Handys (320 px): etwas engere Abstände, damit der Button ohne Scrollen ganz zu sehen ist */
@media (max-width: 359px) {
  .hero__copy { padding-top: var(--space-6); }
  .hero__lead { margin-top: var(--space-4); }
  .hero__cta { margin-top: var(--space-5); }
}

@media (min-width: 1024px) {
  .hero { align-items: center; }
  .hero__copy::before { content: none; }
  .hero__slide img { object-position: 70% 50%; }
  .hero__slide--oben img { object-position: 50% 15%; } /* Motiv sitzt im oberen Bildteil (Fototapete im Bad) */
  .hero__slide::after {
    background:
      linear-gradient(180deg,
        rgb(var(--color-shade-rgb) / 0.72) 0,
        rgb(var(--color-shade-rgb) / 0.45) var(--header-h),
        rgb(var(--color-shade-rgb) / 0) calc(var(--header-h) * 2.1)),
      linear-gradient(90deg,
        rgb(var(--color-shade-rgb) / 0.82) 0%,
        rgb(var(--color-shade-rgb) / 0.74) 50%,
        rgb(var(--color-shade-rgb) / 0.25) 70%,
        rgb(var(--color-shade-rgb) / 0) 88%),
      linear-gradient(0deg, rgb(var(--color-shade-rgb) / 0.45) 0%, rgb(var(--color-shade-rgb) / 0) 22%);
  }
  .hero__copy { padding-block: var(--space-9); }
}
/* Pause-Knopf für die Wechselbilder (derzeit nicht aktiv): Handy und Tablet oben rechts unter der Kopfleiste, ab 1024 px unten links */
.hero__pause,
.filmstrip__pause {
  position: absolute;
  top: calc(var(--header-h) + var(--space-3));
  right: var(--gutter);
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background: rgb(var(--color-shade-rgb) / 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--color-on-primary);
  border: var(--border-width) solid rgb(255 255 255 / 0.35);
  border-radius: 50%;
  cursor: pointer;
}
:is(.hero__pause, .filmstrip__pause)[hidden] { display: none; }
:is(.hero__pause, .filmstrip__pause) .icon { width: 16px; height: 16px; }
:is(.hero__pause, .filmstrip__pause) .icon--play,
:is(.hero__pause, .filmstrip__pause).is-paused .icon--pause { display: none; }
:is(.hero__pause, .filmstrip__pause).is-paused .icon--play { display: block; }
@media (min-width: 1024px) {
  .hero__pause { top: auto; right: auto; bottom: calc(var(--space-5) - 5px); left: max(var(--gutter), calc((100vw - var(--container-max)) / 2)); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { animation: rise var(--duration-slow) var(--ease-out) both; }
  .hero__copy > :nth-child(2) { animation-delay: 80ms; }
  .hero__copy > :nth-child(3) { animation-delay: 160ms; }
  .hero__copy > :nth-child(4) { animation-delay: 240ms; }
  .hero__copy > :nth-child(5) { animation-delay: 320ms; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Einleitung unter dem Hero (Text von Ilka Ahne, 14.10.2026) ---------- */
.intro { padding-top: var(--space-section); }
.intro__text { display: grid; gap: var(--space-4); }
.intro__text::before { content: ""; width: 56px; height: 4px; margin-bottom: var(--space-2); background: var(--color-secondary); border-radius: 2px; }
.intro__text p { max-width: 40em; font-size: var(--text-lead); line-height: 1.55; color: var(--color-text-muted); }
.intro__text p:first-child { max-width: 30em; font-size: var(--text-h3); font-weight: 500; line-height: 1.4; color: var(--color-text); }
.intro + .levels { padding-top: var(--space-8); } /* Überleitung schließt direkt an die Einleitung an */

/* Leitsatz unter einer Überschrift, z. B. „Lackieren statt studieren!“ (Über uns) */
.claim { font-size: var(--text-h3); font-weight: 600; line-height: 1.3; color: var(--color-text); }

/* ---------- 2 Drei Ebenen ---------- */
.levels__lead { margin-top: var(--space-4); font-size: var(--text-lead); line-height: 1.55; color: var(--color-text-muted); }
.levels__intro .text-link { margin-top: var(--space-4); }
.levels__list { margin-top: var(--space-7); list-style: none; border-top: var(--border-width) solid var(--color-border); }
.level {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  padding-block: var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
}
.level__number {
  grid-row: 1 / span 2;
  padding-top: 0.35em;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.level p { max-width: var(--container-text); color: var(--color-text-muted); }
.level > :not(.level__number) { grid-column: 2; } /* auch ein zweiter Absatz bleibt rechts von der Nummer */
.level__number { grid-row: 1 / span 3; }
.level p strong { color: var(--color-text); }
@media (min-width: 1024px) {
  .levels__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-9);
    align-items: start;
  }
  .levels__intro { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  .levels__list { margin-top: 0; }
  .level { padding-block: var(--space-7); }
}

/* ---------- 3 Oberflächen-Band ----------
   Schmaler Streifen (Levin, 11.10.2026: schmaler und schärfer als zuvor). Bild im Format 9 : 1 in voller
   Auflösung des Originals, damit es auch auf Retina-Bildschirmen scharf ist. */
.surface-band { height: clamp(96px, 11vw, 168px); margin: 0; overflow: hidden; }
.surface-band img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 4 Schwerpunkte ---------- */
.focus__list { position: relative; list-style: none; border-top: var(--border-width) solid var(--color-border); }
.focus-item {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-7);
  border-bottom: var(--border-width) solid var(--color-border);
}
.focus-item__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.focus-item__frame img { width: 100%; height: 100%; object-fit: cover; }
.focus-item__title { font-size: var(--text-h2); line-height: 1.12; font-weight: var(--font-weight-heading); letter-spacing: var(--tracking-display); }
.focus-item__body p { max-width: 44ch; margin-top: var(--space-3); color: var(--color-text-muted); }
.focus-item__link { margin-top: var(--space-3); }
/* Handy und Tablet: erst Überschrift und Text, dann das Foto (Wunsch Levin, 15.10.2026) */
@media (max-width: 1023px) {
  .focus-item__media { order: 2; }
}

/* Desktop: Liste links, rechts ein stehendes Foto, das beim Scrollen mitläuft. Jede Bildspalte reicht
   über die ganze Liste, darin bleibt der Rahmen per sticky stehen. Mit JavaScript zeigt das Foto den aktiven
   Eintrag (.is-active: Bildschirmmitte, zuletzt mit der Maus berührt oder per Tastatur erreicht) und lässt
   sich anklicken. Ohne JavaScript zeigt es den ersten Eintrag bzw. den Eintrag unter der Maus. */
@media (min-width: 1024px) {
  .focus__list { min-height: calc(0.4 * var(--container-max) * 1.25); }
  .focus-item { width: 54%; padding-block: var(--space-6); }
  .focus-item__title { transition: transform var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-standard); }
  /* Die Bildspalte reicht bis in den unteren Abschnittsabstand, damit das Foto bei „Tapeten“ noch ganz zu sehen ist */
  .focus-item__media {
    position: absolute;
    inset: var(--space-6) 0 calc(var(--space-6) - var(--space-section)) auto;
    width: 38%;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-out);
  }
  .focus-item__img--quer { object-position: 10% 50%; } /* Querformat-Foto (Relief-Wand) im Hochformat-Rahmen: Engelsfiguren und Ornamente im Bild */
  .focus-item__frame {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    width: min(100%, calc((100svh - var(--header-h) - 2 * var(--space-6)) * 0.8));
    margin-left: auto;
    aspect-ratio: 4 / 5;
  }
  .focus-item:first-child .focus-item__media { opacity: 1; }
  html:not(.js) .focus__list:has(.focus-item:hover, .focus-item:focus-within) .focus-item__media { opacity: 0; }
  html:not(.js) .focus__list .focus-item:is(:hover, :focus-within) .focus-item__media { opacity: 1; }
  html:not(.js) .focus__list .focus-item:is(:hover, :focus-within) .focus-item__title { transform: translateX(var(--space-4)); }
  .js .focus-item .focus-item__media { opacity: 0; }
  .js .focus-item.is-active .focus-item__media { opacity: 1; z-index: 2; }
  .js .focus-item.is-active .focus-item__frame { pointer-events: auto; }
  .js .focus-item.is-active .focus-item__title { transform: translateX(var(--space-4)); }
  .js .focus__list:hover .focus-item:not(.is-active) .focus-item__title { color: rgb(var(--color-text-rgb) / 0.45); }
}

/* ---------- 5 Alle Leistungen ---------- */
.services__title { font-size: var(--text-h3); font-weight: 500; letter-spacing: 0; }
.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-6);
  list-style: none;
}
.service-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 100%;
  min-height: 72px;
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-4);
  background: var(--color-bg);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  border-radius: var(--radius-md);
}
.service-tile__icon { width: 28px; height: 28px; }
.service-tile__arrow {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  translate: 0 -50%;
  transition: translate var(--duration-base) var(--ease-out), color var(--duration-fast) var(--ease-standard);
}
.service-tile:hover .service-tile__arrow { color: var(--color-text); }
.services__lead { margin-top: var(--space-2); color: var(--color-text-muted); }
.services__more { margin-top: var(--space-6); }
/* Hover: Kachel hebt sich leicht an. Eigene Eigenschaft „scale“, damit sie nicht mit der Einblendung (transform) kollidiert. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .service-tile { transition: scale var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
  .service-tile:hover { scale: 1.04; box-shadow: var(--shadow-md); }
  .service-tile:hover .service-tile__arrow { translate: 4px -50%; }
}
@media (min-width: 360px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-tile { align-items: flex-start; flex-direction: column; gap: var(--space-2); padding-right: var(--space-4); font-size: 1rem; }
  .service-tile__arrow { top: var(--space-4); translate: none; }
  .service-tile:hover .service-tile__arrow { translate: 4px 0; }
}
@media (min-width: 768px) {
  .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .services__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
  .service-tile { flex-direction: column; align-items: flex-start; min-height: 132px; padding: var(--space-5); }
  .service-tile__arrow { top: var(--space-5); right: var(--space-5); }
}

/* ---------- 6 Vorher-Nachher ---------- */
.pair { display: grid; gap: var(--space-4); }
.pair__item { position: relative; overflow: hidden; border-radius: var(--radius-sm); }
.pair__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pair__label {
  pointer-events: none;
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 2;
  padding: var(--space-1) var(--space-3);
  background: rgb(var(--color-bg-rgb) / 0.92);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}
.before-after__text { max-width: var(--container-text); margin-top: var(--space-6); }
.before-after__text .text-link { margin-top: var(--space-3); }
.before-after__text p { color: var(--color-text-muted); }
@media (min-width: 768px) {
  .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}

/* ---------- 7 Ablauf ---------- */
.process__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: var(--space-7); border-radius: var(--radius-sm); }
.process__frame img { width: 100%; height: 100%; object-fit: cover; }
/* Handy, Tablet und ohne JavaScript: nur das Bild zu Schritt 1, das Frauenporträt (Wunsch Ilka, 15.10.2026) */
.process__frame [data-frame]:not([data-frame="0"]) { display: none; }
.process__img--portraet { object-position: 50% 25%; } /* 4 : 3 – Gesicht, Blumen und Buch im Bild */
.process__badge {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 2;
  display: none;
  padding: var(--space-1) var(--space-3);
  background: rgb(var(--color-bg-rgb) / 0.92);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}
.process__steps { list-style: none; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--tap) minmax(0, 1fr);
  column-gap: var(--space-4);
  padding-bottom: var(--space-6);
}
.step:last-child { padding-bottom: 0; }
.step::before {
  content: "";
  position: absolute;
  left: calc(var(--tap) / 2 - 0.75px);
  top: var(--tap);
  bottom: 0;
  width: 1.5px;
  background: rgb(var(--color-text-rgb) / 0.2);
}
.step:last-child::before { display: none; }
.step__marker {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  background: var(--color-surface);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--color-text);
  border-radius: 50%;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.step__text { padding-top: 0.45em; }
.step__text h3 { margin-bottom: var(--space-2); }
.step__text p { max-width: 48ch; color: var(--color-text-muted); }
.process__cta { margin-top: var(--space-7); }

/* Desktop mit JavaScript: Schritte links, rechts ein stehendes Bild, das mit dem Schritt wechselt.
   Das Bild reicht über Schritte und Button (zwei Zeilen), und auch der letzte Schritt ist 40vh hoch:
   So bleibt es beim letzten Schritt („Fertig und übergeben“) noch ganz unter der Kopfleiste stehen. */
@media (min-width: 1024px) {
  .js .process {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: var(--space-9);
    align-items: start;
  }
  .js .process__frame {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    width: min(100%, calc((100svh - var(--header-h) - 2 * var(--space-6)) * 0.8));
    justify-self: end;
    aspect-ratio: 4 / 5;
    margin-bottom: 0;
  }
  .js .process__frame [data-frame] {
    display: block;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-standard);
  }
  .js .process__frame [data-frame].is-shown { opacity: 1; }
  .js .process__img--portraet { object-position: 50% 100%; } /* 4 : 5 – oben die Deckenkante abschneiden */
  .js .process__badge:empty { display: none; } /* Frauenporträt hat keine Beschriftung */
  .js .process__badge { display: block; }
  .js .process__steps { grid-column: 1; grid-row: 1; }
  .js .process__cta { grid-column: 1; grid-row: 2; }
  .js .step { min-height: 40vh; align-content: start; padding-bottom: var(--space-6); }
  .js .step__text h3 { transition: opacity var(--duration-base) var(--ease-out); }
  .js .step:not(.is-active) .step__text h3 { opacity: 0.75; }
  .js .step.is-active .step__marker { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
}

/* ---------- 8 Stimmen ---------- */
.voices__number { font-family: var(--font-heading); font-size: var(--text-mega); line-height: 1; font-weight: var(--font-weight-heading); letter-spacing: var(--tracking-display); }
.voices__score { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); }
.voices__stars { font-size: var(--text-h3); letter-spacing: 0.1em; }
.voices__count { margin-top: var(--space-3); color: var(--color-text-muted); }
.voices__rating .text-link { margin-top: var(--space-4); }
.voices__list { display: grid; gap: var(--space-4); margin-top: var(--space-7); list-style: none; }
.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.quote__text { margin: 0; font-family: var(--font-heading); font-size: var(--text-lead); line-height: 1.45; font-weight: 400; }
.quote__source {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.quote__stars { margin-right: var(--space-2); letter-spacing: 0.1em; color: var(--color-text); }
@media (min-width: 768px) {
  .voices__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote:first-child { grid-column: 1 / -1; }
  .quote:first-child .quote__text { font-size: var(--text-h3); line-height: 1.35; }
}
@media (min-width: 1024px) {
  .voices__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-9); align-items: start; }
  .voices__list { margin-top: 0; }
}

/* ---------- 9 Über uns (Teaser) ---------- */
.about-teaser__inner { display: grid; gap: var(--space-7); }
.about-teaser__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; max-width: 30rem; border-radius: var(--radius-sm); }
.about-teaser__media img { width: 100%; height: 100%; object-fit: cover; }
.about-teaser__text h2 { max-width: 16ch; }
.about-teaser__text p:not(.label) { max-width: 52ch; margin-top: var(--space-5); color: var(--color-text-muted); }
.about-teaser__text .text-link { margin-top: var(--space-4); }
@media (min-width: 1024px) {
  .about-teaser__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-9); align-items: center; }
  .about-teaser__media { max-width: none; }
}

/* ---------- 10 Für Gewerbe ---------- */
.trade-band { padding-block: var(--space-8); border-top: var(--border-width) solid var(--color-border); }
.trade-band__inner { display: grid; gap: var(--space-4); }
.trade-band__title { max-width: 28ch; font-size: var(--text-h3); font-weight: 500; letter-spacing: 0; }
.trade-band__inner p { margin-top: var(--space-3); color: var(--color-text-muted); }
@media (min-width: 1024px) {
  .trade-band__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-8); }
}

/* =====================================================================
   Unterseiten: Leistungen, Service, Referenzen, Gewerbe, Über uns, Kontakt, Rechtliches
   Aufbau nach docs/sitemap.md (4.2–4.8). Die Abschnitte wechseln bewusst zwischen Liste,
   Bildgruppe, Band und Paar, damit nicht alles „Text links, Bild rechts“ ist.
   ===================================================================== */

/* Textblöcke mit gleichmäßigem Abstand */
.stack > * + * { margin-top: var(--space-4); }
.stack > .label + * { margin-top: 0; }
.stack > p:not(.label) { max-width: var(--container-text); color: var(--color-text-muted); }

/* Seitenkopf */
.page-head { padding-block: var(--space-8) var(--space-7); border-bottom: var(--border-width) solid var(--color-border); }
.page-head__title { max-width: 20ch; font-size: var(--text-h1); line-height: 1.05; }
.page-head__lead { max-width: 40em; margin-top: var(--space-5); font-size: var(--text-lead); line-height: 1.55; color: var(--color-text-muted); }
.jump-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin-top: var(--space-5); }
@media (min-width: 1024px) {
  .page-head { padding-block: var(--space-9) var(--space-8); }
}

/* Hero mit Foto auf Unterseiten (Für Gewerbe): wie die Startseite, nur niedriger */
.hero--page { min-height: min(calc(72svh - var(--header-h)), 640px); }
.js .hat-fotohero .hero--page { min-height: min(72svh, calc(640px + var(--header-h))); }
.hero--page .hero__lead { max-width: 30em; } /* bleibt im dunkleren Teil des Verlaufs (Kontrast nachgerechnet) */

/* Text und Bild nebeneinander */
.split { display: grid; gap: var(--space-7); }
.split__media { position: relative; overflow: hidden; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-9); align-items: center; }
  .split--wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); }
}

/* Liste mit Häkchen */
.ticks { display: grid; gap: var(--space-3); list-style: none; }
.ticks li { display: grid; grid-template-columns: 1.25em minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.ticks .icon { margin-top: 0.2em; stroke-width: 2; }
@media (min-width: 768px) {
  .ticks--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); }
}

/* Filmstreifen (Leistungen › Kreative Wandgestaltung, Referenzen › Ausgewählte Arbeiten): Fotos in gleicher Höhe nebeneinander. Mit JavaScript laufen sie endlos
   seitlich durch (.is-running, Kopie der Reihe per Skript); ohne JavaScript oder bei Reduced Motion wischt man selbst. */
.filmstrip { --filmstrip-h: 240px; --filmstrip-gap: var(--space-3); position: relative; }
.filmstrip__window { overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin; }
.filmstrip__track { display: flex; gap: var(--filmstrip-gap); width: max-content; margin: 0; padding: var(--space-3) var(--gutter); list-style: none; }
.filmstrip__item { flex: none; height: var(--filmstrip-h); overflow: hidden; border-radius: var(--radius-sm); scroll-snap-align: center; }
.filmstrip__item img { width: auto; height: 100%; }
.filmstrip.is-running .filmstrip__window {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.filmstrip.is-running .filmstrip__track { padding-inline: 0; animation: filmstrip var(--filmstrip-dauer, 90s) linear infinite; }
/* Halt: per Knopf, außerhalb des Bildschirms, bei Tastaturfokus und solange ein Foto groß geöffnet ist (nicht beim Drüberfahren, Wunsch Levin) */
.filmstrip.is-paused .filmstrip__track,
.filmstrip.is-offscreen .filmstrip__track,
.filmstrip.is-tabbing .filmstrip__track,
body:has(> .lightbox[open]) .filmstrip__track { animation-play-state: paused; }
/* Die Reihe ist doppelt vorhanden: Nach genau einer Reihe plus Abstand beginnt sie nahtlos von vorn */
@keyframes filmstrip { to { transform: translateX(calc(-50% - var(--filmstrip-gap) / 2)); } }
.filmstrip__pause { top: auto; bottom: var(--space-5); right: max(var(--gutter), calc((100vw - var(--container-max)) / 2)); }
.offer-below { display: grid; gap: var(--space-5); margin-top: var(--space-7); }
@media (min-width: 768px) {
  .filmstrip { --filmstrip-h: 320px; --filmstrip-gap: var(--space-4); }
}
@media (min-width: 1024px) {
  .filmstrip { --filmstrip-h: 420px; }
  .offer-below { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); }
}
/* Zwei Reihen (Referenzen › Ausgewählte Arbeiten): niedriger, die zweite läuft gegen die erste.
   Laufen sie, ist der Abstand zwischen den Reihen so groß wie zwischen den Fotos (Polster der Reihen überlappen). */
.filmstrip--doppelt { --filmstrip-h: 200px; }
.filmstrip.is-running .filmstrip__track--gegenlauf { animation-direction: reverse; }
.filmstrip--doppelt.is-running .filmstrip__window + .filmstrip__window { margin-top: calc(var(--filmstrip-gap) - 2 * var(--space-3)); }
@media (min-width: 768px) {
  .filmstrip--doppelt { --filmstrip-h: 260px; }
}
@media (min-width: 1024px) {
  .filmstrip--doppelt { --filmstrip-h: 320px; }
}

/* Band mit Textfläche (Edelputze): ab 1024 px liegt der Text auf einer hellen Fläche über dem Foto */
.band-panel { position: relative; isolation: isolate; }
.band-panel__media { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.band-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.band-panel__inner { padding-block: var(--space-7) var(--space-section); }
/* Handy und Tablet: erst Überschrift und Text, dann das Foto (Wunsch Levin, 15.10.2026) */
@media (max-width: 1023px) {
  .band-panel { display: flex; flex-direction: column; }
  .band-panel__media { order: 2; }
  .band-panel__inner { padding-block: var(--space-section) var(--space-7); }
}
.glossary { display: grid; gap: var(--space-3); }
.glossary dt { font-weight: 600; }
.glossary dd { margin: 0; color: var(--color-text-muted); }
@media (min-width: 1024px) {
  .band-panel { padding-block: var(--space-9); }
  .band-panel__media { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
  .band-panel__inner { padding-block: 0; }
  .band-panel__panel {
    max-width: 38rem;
    padding: var(--space-7);
    background: rgb(var(--color-bg-rgb) / 0.92);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }
  /* Textfläche rechts, damit links die Wand im Foto zu sehen ist (Edelputze, seit 14.10.2026) */
  .band-panel--rechts .band-panel__panel { margin-left: auto; }
}

/* Zwei Hochformat-Fotos versetzt (Tapeten) */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.duo figure { position: relative; overflow: hidden; margin: 0; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); }
.duo figure:nth-child(2) { margin-top: var(--space-8); }
.duo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .duo { gap: var(--space-5); }
  .duo figure:nth-child(2) { margin-top: var(--space-9); }
}

/* Vorher-Nachher mit Bildunterschrift (Sicher entscheiden) */
.decide { margin: 0; }
.decide__caption { margin-top: var(--space-3); font-size: var(--text-small); color: var(--color-text-muted); }

/* Leistungen als Liste mit einem Satz je Leistung; jede führt zur Anfrage */
.offer-list { display: grid; gap: var(--space-3); list-style: none; }
.offer-tile {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-content: start;
  height: 100%;
  padding: var(--space-5) var(--space-8) var(--space-5) var(--space-5);
  background: var(--color-surface);
  text-decoration: none;
  border-radius: var(--radius-md);
}
.offer-tile .service-tile__icon { grid-row: 1 / span 2; }
.offer-tile .service-tile__arrow { top: var(--space-5); right: var(--space-5); translate: none; }
.offer-tile__name { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.offer-tile__text { font-size: var(--text-small); line-height: 1.5; color: var(--color-text-muted); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .offer-tile { transition: scale var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
  .offer-tile:hover { scale: 1.03; box-shadow: var(--shadow-md); }
  .offer-tile:hover .service-tile__arrow { translate: 4px 0; color: var(--color-text); }
}
@media (min-width: 768px) {
  .offer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .offer-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}

/* Zeilen mit Titel links und Details rechts (Besondere Services) – keine vier gleichen Karten */
.rows { list-style: none; border-top: var(--border-width) solid var(--color-border); }
.row { display: grid; gap: var(--space-4); padding-block: var(--space-6); border-bottom: var(--border-width) solid var(--color-border); }
.row__title { font-size: var(--text-h2); line-height: 1.1; font-weight: var(--font-weight-heading); letter-spacing: var(--tracking-display); }
.row__for { margin: var(--space-3) 0 0; }
.row__extra { margin-top: var(--space-4); font-size: var(--text-small); color: var(--color-text-muted); }
.rows-note { max-width: var(--container-text); margin-top: var(--space-5); color: var(--color-text-muted); }
@media (min-width: 1024px) {
  .row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); padding-block: var(--space-7); }
}

/* Häufige Fragen: <details> funktioniert auch ohne JavaScript */
.faq { max-width: 48rem; border-top: var(--border-width) solid var(--color-border); }
.faq__item { border-bottom: var(--border-width) solid var(--color-border); }
.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--tap);
  padding-block: var(--space-4);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { transition: transform var(--duration-base) var(--ease-standard); }
.faq__item[open] summary .icon { transform: rotate(180deg); }
.faq__answer { max-width: var(--container-text); padding-bottom: var(--space-5); color: var(--color-text-muted); }

/* Referenzen: Projekte mit Vorher-Nachher-Paar, Text abwechselnd links und rechts */
.projects { display: grid; gap: var(--space-8); }
.project { display: grid; gap: var(--space-5); }
.project__title { font-size: var(--text-h3); }
.project__text p { max-width: 52ch; margin-top: var(--space-3); color: var(--color-text-muted); }
@media (min-width: 1024px) {
  .projects { gap: var(--space-9); }
  .project { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-8); align-items: center; }
  .project--reverse { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .project--reverse .project__text { order: 2; }
}

/* Branchen-Liste (Für Gewerbe) */
.columns-list { display: grid; column-gap: var(--space-6); list-style: none; border-top: var(--border-width) solid var(--color-border); }
.columns-list li { padding-block: var(--space-3); font-weight: 500; border-bottom: var(--border-width) solid var(--color-border); }
.columns-list__more { margin-top: var(--space-5); color: var(--color-text-muted); }
@media (min-width: 768px) { .columns-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .columns-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Über uns: Foto bleibt ab 1024 px beim Scrollen stehen */
/* Über uns, „Wer wir sind“ und „Was uns wichtig ist“ (gleicher Aufbau, Levin 15.10.2026): rechts Überschrift, Leitsatz
   und Text, links ein Blickfang (Foto bzw. Zitat), der ab 1024 px beim Scrollen mitläuft. Handy: erst Text, dann Blickfang. */
.about-block { display: grid; gap: var(--space-6); }
.about-block__sub { font-size: var(--text-lead); line-height: 1.5; }
.stack > p.claim { color: var(--color-text); } /* Leitsatz dunkel, nicht grau wie der übrige Text in .stack */
.about__media { position: relative; overflow: hidden; margin: 0; aspect-ratio: 4 / 5; width: min(100%, 22rem); border-radius: var(--radius-sm); }
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__img--portraet { object-position: 50% 100%; } /* Frauenporträt im 4:5-Rahmen: oben die Deckenkante abschneiden */
@media (max-width: 1023px) {
  .about-block__aside { order: 2; }
}
@media (min-width: 1024px) {
  .about-block { grid-template-columns: 22rem minmax(0, 1fr); gap: var(--space-9); align-items: start; }
  .about-block__aside .about__media { width: 100%; }
  .about-block__aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
.facts { padding-block: var(--space-8); }
.facts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); list-style: none; }
.facts__value { display: block; font-family: var(--font-heading); font-size: var(--text-h3); hyphens: auto; font-weight: var(--font-weight-heading); line-height: 1.1; letter-spacing: var(--tracking-display); }
.facts__label { display: block; margin-top: var(--space-2); font-size: var(--text-small); color: var(--color-text-muted); }
.two-cols { display: grid; gap: var(--space-8); }
@media (min-width: 1024px) {
  .facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts__value { font-size: var(--text-h2); }
  .two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-9); }
}

/* Kontakt: links die direkten Wege, rechts das Formular */
.contact__inner { display: grid; gap: var(--space-8); }
.contact__ways { display: grid; gap: var(--space-6); align-content: start; }
.way__phone {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--font-weight-heading);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
  text-decoration: none;
}
.way__meta { margin-top: var(--space-2); color: var(--color-text-muted); }
.way__meta a { font-weight: 600; color: var(--color-text); }
.way .button { margin-top: var(--space-1); }
.contact__form h2 { font-size: var(--text-h3); }
@media (min-width: 1024px) {
  .contact__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-9); }
}
.contact-info__grid { display: grid; gap: var(--space-6); }
.contact-info__title { margin-bottom: var(--space-3); font-size: var(--text-h3); }
.contact-info__grid p { color: var(--color-text-muted); }
.contact-info__grid .text-link { margin-top: var(--space-2); }
@media (min-width: 768px) { .contact-info__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Formular */
.form { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-small); font-weight: 600; }
.field__hint { margin-top: calc(-1 * var(--space-1)); font-size: var(--text-small); color: var(--color-text-muted); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  background: var(--color-field-bg);
  color: var(--color-text);
  font: inherit;
  line-height: 1.3;
  border: var(--border-field) solid var(--color-field-border);
  border-radius: var(--radius-md);
}
.field textarea { min-height: 6.5rem; line-height: 1.5; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
/* Ist das Formular breit genug, stehen die kurzen Felder paarweise nebeneinander */
.closing__form,
.contact__form { container-type: inline-size; }
@container (min-width: 30rem) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form > * { grid-column: 1 / -1; }
  .form > .field--half { grid-column: auto; }
}
.field [aria-invalid="true"] { border-color: var(--color-error); }
.field__error { font-size: var(--text-small); font-weight: 600; color: var(--color-error); }
.field__error[hidden] { display: none; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__privacy { font-size: var(--text-small); color: var(--color-text-muted); }
.form__privacy a { color: var(--color-text); }
.form__submit { justify-self: start; }
.form__status { padding: var(--space-4) var(--space-5); font-weight: 600; border-left: 4px solid currentColor; border-radius: var(--radius-sm); }
.form__status[hidden] { display: none; }
.form__status--success { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, var(--color-bg)); }
.form__status--error { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 8%, var(--color-bg)); }

/* Zurück-Link auf /kontakt/ (nur mit JavaScript und wenn man von einer anderen Seite der Website kommt) */
.back-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); margin-bottom: var(--space-3); font-weight: 600; color: var(--color-text-muted); text-decoration: none; }
.back-link[hidden] { display: none; }
.back-link .icon { width: 1em; height: 1em; rotate: 180deg; }
.back-link:hover { color: var(--color-text); text-decoration: underline; }

/* Rechtstexte */
.legal__inner { max-width: 66ch; }
.legal__inner h1 { font-size: var(--text-h1); }
.legal__inner > * + * { margin-top: var(--space-5); }
.legal__inner h2 { margin-top: var(--space-8); font-size: var(--text-h3); }
.legal__inner a { overflow-wrap: anywhere; } /* lange Webadressen brechen auf dem Handy um */
.legal__inner h3 { margin-top: var(--space-7); font-size: var(--text-lead); font-weight: 700; } /* Datenschutzerklärung: Unterabschnitte */
.legal__inner h4 { margin-top: var(--space-6); font-size: var(--text-body); font-weight: 600; }
.legal__inner h2 + h3, .legal__inner h3 + h4 { margin-top: var(--space-5); }
.legal__inner ul { padding-left: 1.25em; }
.legal__inner li + li { margin-top: var(--space-3); }

/* ---------- Fotos vergrößern ----------
   .zoomable: Bildrahmen hebt sich beim Hover leicht an (Desktop). .zoom: Link auf die große Fassung;
   mit JavaScript öffnet sie sich in der Lightbox, ohne JavaScript direkt im Browser. */
.zoom { position: relative; display: block; height: 100%; color: inherit; cursor: zoom-in; }
.zoom__hint {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: rgb(var(--color-bg-rgb) / 0.9);
  color: var(--color-text);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.zoom__hint .icon { width: 18px; height: 18px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .zoomable { transition: scale var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
  .zoomable:hover { scale: 1.02; box-shadow: var(--shadow-md); }
}

.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--space-9) var(--gutter) var(--space-6);
  background: transparent;
  color: var(--color-on-primary);
  border: 0;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgb(var(--color-shade-rgb) / 0.9); }
.lightbox__figure { display: grid; justify-items: center; gap: var(--space-3); max-height: 100%; }
.lightbox__image {
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - var(--space-9) - var(--space-6) - 4rem);
  object-fit: contain;
  border-radius: var(--radius-sm);
  cursor: default;
}
.lightbox__close {
  position: fixed;
  top: var(--space-4);
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-4);
  background: rgb(255 255 255 / 0.12);
  color: var(--color-on-primary);
  font-weight: 600;
  border: var(--border-width) solid rgb(255 255 255 / 0.3);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.lightbox__close:hover { background: rgb(255 255 255 / 0.2); }
.lightbox__nav {
  position: fixed;
  top: 50%;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background: rgb(255 255 255 / 0.12);
  color: var(--color-on-primary);
  border: var(--border-width) solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
  translate: 0 -50%;
  cursor: pointer;
}
.lightbox__nav[hidden] { display: none; }
.lightbox__nav:hover { background: rgb(255 255 255 / 0.2); }
.lightbox__nav--prev { left: var(--gutter); }
.lightbox__nav--prev .icon { rotate: 180deg; }
.lightbox__nav--next { right: var(--gutter); }
@media (max-width: 767px) {
  .lightbox { padding-bottom: calc(var(--tap) + var(--space-6)); }
  .lightbox__nav { top: auto; bottom: var(--space-4); translate: none; }
}
.lightbox :focus-visible { outline-color: var(--color-secondary); }
html:has(.lightbox[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] .lightbox__figure { animation: lightbox-in var(--duration-base) var(--ease-out) both; }
}
@keyframes lightbox-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* ---------- Abschluss-CTA (Graphit) ----------
   Auf jeder Seite: links Anruf und WhatsApp, rechts das Anfrage-Formular auf einer hellen Karte
   (#anfrage, Ziel aller „Besichtigung anfragen“-Knöpfe). Die helle Karte hält Felder und Fehlermeldungen
   in den normalen, geprüften Farben. */
.on-dark { background: var(--color-primary); color: var(--color-on-primary); }
.closing { padding-block: var(--space-section) var(--space-8); }
.closing__inner { display: grid; gap: var(--space-7); }
.closing__form {
  padding: var(--space-6) var(--space-5);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.closing__form-title { font-size: var(--text-h3); }
.closing__form .form { margin-top: var(--space-4); }
.closing__form :focus-visible { outline-color: var(--color-text); }
.closing__form:focus,
.contact__form:focus { outline: none; }
@media (min-width: 1024px) {
  .closing__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-9); align-items: start; }
  .closing__text { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  .closing__form { padding: var(--space-6); }
}
.closing__title { max-width: 18ch; font-size: var(--text-h1); line-height: 1.05; }
.closing__lead { max-width: 40em; margin-top: var(--space-4); font-size: var(--text-lead); line-height: 1.55; color: var(--color-on-primary-muted); }
.closing__phone {
  display: inline-block;
  font-family: var(--font-heading);
  margin-top: var(--space-6);
  font-size: min(clamp(2.75rem, 1.6rem + 3.4vw, 4.5rem), 13.5vw);
  font-weight: var(--font-weight-heading);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
  text-decoration: none;
}
.closing__hours { margin-top: var(--space-3); color: var(--color-on-primary-muted); }
.closing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-4); }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--space-8) var(--space-6); border-top: var(--border-width) solid rgb(255 255 255 / 0.12); font-size: var(--text-small); color: var(--color-on-primary-muted); }
.site-footer__grid { display: grid; gap: var(--space-6); }
.site-footer__name { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--font-weight-heading); color: var(--color-on-primary); }
.site-footer__claim { margin-top: var(--space-2); }
.site-footer__heading {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-on-primary);
}
.site-footer__address { margin-bottom: var(--space-3); }
.site-footer__list { display: grid; gap: var(--space-1); margin-top: var(--space-2); list-style: none; }
.site-footer a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-on-primary); text-underline-offset: 0.2em; }
.site-footer__list li { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid rgb(255 255 255 / 0.12);
}
.site-footer__legal { display: flex; gap: var(--space-5); list-style: none; }
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .site-footer { padding-top: var(--space-6); }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-7); }
  .site-footer__heading { margin-bottom: var(--space-2); }
  .site-footer__bottom { margin-top: var(--space-5); }
}
@media (min-width: 1024px) and (pointer: fine) {
  .site-footer a { min-height: 0; }
  .site-footer__list { gap: var(--space-2); }
}

/* ---------- Mobile-CTA-Leiste ---------- */
.callbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--gutter) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: rgb(var(--color-bg-rgb) / 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: var(--border-width) solid var(--color-border);
  transition: transform var(--duration-base) var(--ease-out), visibility 0s;
}
.callbar__cta { flex: 1; padding-inline: var(--space-4); font-size: 1rem; }
.callbar__phone {
  display: grid;
  place-items: center;
  width: var(--button-h);
  height: var(--button-h);
  border: 1.5px solid var(--color-text);
  border-radius: 50%;
}
.js .callbar:not(.is-visible) {
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
}
.site-footer { padding-bottom: calc(var(--space-6) + 76px); }
@media (min-width: 768px) {
  .callbar { display: none; }
  .site-footer { padding-bottom: var(--space-6); }
}

/* ---------- Entwurfs-Hinweis (vor dem Livegang entfernen) ----------
   Handy: „● Entwurf“ über der Anruf-Leiste, ab 768 px unten rechts mit Datum. Den Notizen-Schalter gibt es nicht mehr,
   weil auf der Seite keine [ZU KLÄREN]-Markierungen mehr stehen (Wunsch Levin, 13.10.2026). */
.draft-pill {
  position: fixed;
  left: var(--space-3);
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 25;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgb(var(--color-text-rgb) / 0.92);
  color: var(--color-on-primary);
  font-size: var(--text-small);
  font-weight: 500;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
}
.draft-pill__dot { width: var(--space-2); height: var(--space-2); background: var(--color-note-border); border-radius: 50%; }
.draft-pill__date { display: none; }
/* Platz unter dem Footer, damit der Hinweis Impressum und Datenschutz nicht verdeckt */
body:has(.draft-pill) .site-footer { padding-bottom: calc(84px + 44px + var(--space-4)); }
@media (min-width: 768px) {
  body:has(.draft-pill) .site-footer { padding-bottom: calc(var(--space-5) + 44px + var(--space-4)); }
  .draft-pill { left: auto; right: var(--space-5); bottom: var(--space-5); }
  .draft-pill__date { display: inline; }
}

/* ---------- Scroll-Einblendungen (nur mit JavaScript und ohne Reduced Motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* scale und box-shadow ohne Verzögerung, damit Hover-Effekte (z. B. Leistungs-Kacheln) sofort reagieren */
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--duration-slow) var(--ease-out) var(--reveal-delay, 0ms),
      transform var(--duration-slow) var(--ease-out) var(--reveal-delay, 0ms),
      scale var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out);
  }
  .reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}