/* Subset to the characters this site uses and to the weight/width range the
   design system actually calls for: 90 kB down to 66 kB. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 90% 120%;
  font-display: swap;
  src: url('../fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-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;
}

/* ============================================================
   Tokens
   ============================================================ */
:root {
  --ink: oklch(0.205 0.02 340);
  --ink-2: oklch(0.275 0.022 340);
  --ink-3: oklch(0.345 0.02 340);
  --pink: oklch(0.665 0.215 3);
  --pink-lift: oklch(0.735 0.185 3);   /* hover, brighter so dark text keeps its contrast */
  --pink-text: oklch(0.48 0.18 3);     /* pink as ink on light surfaces, 5.3:1 on white */
  --pink-wash: oklch(0.665 0.215 3 / 0.12);
  --mineral: oklch(0.955 0.006 340);
  --mineral-2: oklch(0.905 0.009 340);
  --paper: #fff;

  --text: var(--ink);
  --text-muted: oklch(0.44 0.016 340);
  --text-on-dark: oklch(0.96 0.006 340);
  --text-on-dark-muted: oklch(0.815 0.012 340);
  --line: oklch(0.88 0.01 340);
  --line-dark: oklch(0.34 0.018 340);

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 68ch;
  --wrap: 1240px;

  --t-hero: clamp(2.05rem, 0.9rem + 3.05vw, 3.7rem);
  --t-h2: clamp(1.7rem, 1.05rem + 2.4vw, 2.75rem);
  --t-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  --t-lead: clamp(1.1rem, 1rem + 0.55vw, 1.36rem);
  --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --t-small: 0.925rem;
  --t-meta: 0.82rem;

  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;     --s-7: 2.75rem; --s-8: 3.5rem;
  --s-9: 4.5rem; --s-10: 6rem;
  --section: clamp(4rem, 9vw, 7.5rem);
  --section-tight: clamp(2.75rem, 6vw, 4.75rem);

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  --shadow-soft: 0 1px 2px oklch(0.205 0.02 340 / 0.05), 0 8px 24px oklch(0.205 0.02 340 / 0.07);
  --shadow-lift: 0 2px 4px oklch(0.205 0.02 340 / 0.06), 0 18px 44px oklch(0.205 0.02 340 / 0.13);

  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --z-parallax: 0; --z-content: 10; --z-sticky: 100; --z-header: 200;
  --z-overlay: 300; --z-cookie: 400;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}
body {
  margin: 0;
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
/* figure and dl carry a 40px UA margin that silently indents anything inside them */
figure, blockquote, dl, dd, figcaption { margin: 0; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
  hyphens: auto;
  /* keeps fragments like "Callcen-ter" from happening */
  hyphenate-limit-chars: 9 5 4;
  overflow-wrap: normal;
}
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.018em; font-stretch: 110%; }
p { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px;
  z-index: var(--z-cookie);
  background: var(--ink); color: var(--text-on-dark);
  padding: 0.75rem 1.25rem; border-radius: var(--r-sm);
  text-decoration: none; font-weight: 600;
  transition: top 0.2s var(--ease-quint);
}
.skip-link:focus-visible { top: 1rem; }

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

/* ============================================================
   Layout
   ============================================================ */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: calc(860px + var(--gutter) * 2); }

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: var(--section-tight); }
.section--dark { background: var(--ink); color: var(--text-on-dark); }
.section--mineral { background: var(--mineral); }

.section-head { max-width: min(100%, 46rem); margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head h2 { max-width: 19ch; }
.section-head p {
  margin-top: var(--s-4);
  font-size: var(--t-lead);
  color: var(--text-muted);
  max-width: 48ch;
  line-height: 1.55;
}
.section--dark .section-head p { color: var(--text-on-dark-muted); }

.lede {
  font-size: var(--t-lead);
  line-height: 1.55;
  max-width: 56ch;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.95em 1.6em;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: 600;
  font-stretch: 96%;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.22s var(--ease-quint), color 0.22s var(--ease-quint),
    border-color 0.22s var(--ease-quint), transform 0.22s var(--ease-quint);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Dark ink on the pink, not white: white would only reach 3.4:1. */
.btn--primary { background: var(--pink); color: var(--ink); }
.btn--primary:hover { background: var(--pink-lift); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--text-on-dark); }

.btn--on-dark { background: transparent; color: var(--text-on-dark); border-color: var(--line-dark); }
.btn--on-dark:hover { background: var(--text-on-dark); color: var(--ink); border-color: transparent; }

.btn__arrow { transition: transform 0.28s var(--ease-quint); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ============================================================
   Header
   ============================================================ */
.header {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: var(--z-header);
  padding-block: 0.9rem;
}
.header__inner {
  display: flex; align-items: center; gap: var(--s-5);
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 0.55rem var(--gutter);
  border-radius: 0;
  background: transparent;
  border: 1px solid transparent;
  transition: background-color 0.3s var(--ease-quint), border-color 0.3s var(--ease-quint),
    box-shadow 0.3s var(--ease-quint), padding 0.3s var(--ease-quint);
}
.header.is-pill { padding-block: 0.6rem; padding-inline: clamp(0.75rem, 2.5vw, 1.5rem); }
.header.is-pill .header__inner {
  max-width: calc(var(--wrap) + var(--gutter) * 2 - 2rem);
  padding-inline: clamp(0.9rem, 2.5vw, 1.4rem);
  /* Opaque on purpose: this element is transformed on every scroll frame,
     and a backdrop-filter would repaint the whole area underneath it. */
  background: var(--paper);
  border-color: var(--line);
  box-shadow: var(--shadow-lift);
}

.brand {
  display: inline-flex; align-items: center; gap: 0.7rem;
  text-decoration: none; color: inherit;
  flex-shrink: 0;
}
.brand__mark { width: 38px; height: 38px; flex-shrink: 0; }
.brand__mark .rsr-wipe { transition: transform 0.55s var(--ease-quint), opacity 0.55s var(--ease-quint); }
/* Beim Hover zieht der Abzieher nach: die Wischspur wandert weiter nach unten. */
.brand:hover .rsr-wipe { transform: translateY(3px); opacity: 0.85; }
.brand__name {
  display: flex; flex-direction: column; line-height: 1.05;
  font-stretch: 112%; letter-spacing: -0.02em;
}
.brand__name b { font-weight: 800; font-size: 1.02rem; }
.brand__name span {
  font-weight: 500; font-size: 0.76rem; font-stretch: 96%;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.header--on-dark .brand__name span { color: var(--text-on-dark-muted); }
.header.is-pill .brand__name span { color: var(--text-muted); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); margin-inline-start: auto; }
.nav__link {
  text-decoration: none;
  font-size: var(--t-small); font-weight: 500;
  padding: 0.4rem 0;
  position: relative;
  transition: color 0.2s var(--ease-quint);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--pink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease-quint);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header--on-dark .nav__link, .header--on-dark .brand { color: var(--text-on-dark); }
.header.is-pill .nav__link, .header.is-pill .brand { color: var(--text); }

.header__cta { margin-inline-start: 0.4rem; padding: 0.7em 1.25em; }

.nav-toggle {
  display: none;
  margin-inline-start: auto;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill);
  cursor: pointer;
}
.nav-toggle { color: var(--text); }
.header--on-dark .nav-toggle { border-color: var(--line-dark); color: var(--text-on-dark); }
.header.is-pill .nav-toggle { border-color: var(--line); color: var(--text); }
.nav-toggle__bars { display: block; width: 17px; height: 11px; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.32s var(--ease-quint), opacity 0.2s;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  /* The pill carries a transform, which would make a fixed child position
     against the pill instead of the viewport. The transform is dropped while
     the menu is open, see .is-menu-open below. */
  .nav {
    position: fixed; inset: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0.2rem;
    padding: 5.75rem var(--gutter) calc(2.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--ink);
    margin: 0;
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.32s var(--ease-quint), transform 0.32s var(--ease-quint), visibility 0.32s;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .header.is-menu-open { z-index: 450; }
  .header.is-menu-open .header__inner {
    transform: none !important;
    background: transparent; border-color: transparent; box-shadow: none;
  }
  /* Brand and close button have to sit above the full-screen overlay. */
  .header.is-menu-open .brand,
  .header.is-menu-open .nav-toggle { position: relative; z-index: 1; }
  .header.is-menu-open .brand,
  .header.is-menu-open .brand__name span,
  .header.is-menu-open .nav-toggle { color: var(--text-on-dark); }
  .header.is-menu-open .nav-toggle { border-color: var(--line-dark); }
  .nav .nav__link {
    color: var(--text-on-dark);
    font-size: clamp(1.3rem, 5.6vw, 1.85rem);
    font-weight: 800; font-stretch: 114%; letter-spacing: -0.02em;
    padding: 0.62rem 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .nav .nav__link::after { display: none; }
  .header.is-pill .nav .nav__link { color: var(--text-on-dark); }
  .nav .header__cta {
    margin: 1.6rem 0 0; justify-content: center;
    font-size: 1rem; padding: 1em 1.6em;
  }
  .header.is-pill .header__inner { padding-inline: 1rem; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  --hero-seam: 50vw;
  --hero-cut: clamp(90px, 9vw, 170px);
  --hero-edge: 3px;
  position: relative;
  background: var(--ink);
  color: var(--text-on-dark);
  padding-block: clamp(7rem, 15vw, 11rem) 0;
  overflow: clip;
  isolation: isolate;
}
.hero .wrap { position: relative; z-index: var(--z-content); }
@media (min-width: 940px) {
  .hero {
    display: grid;
    align-items: center;
    min-height: min(86vh, 820px);
    padding-block: clamp(7.5rem, 12vw, 9.5rem) clamp(3.5rem, 6vw, 5rem);
  }
  /* Text bleibt links der Naht; die Panelkante wandert mit dem Viewport. */
  .hero__text { max-width: min(37rem, calc(var(--hero-seam) - var(--gutter) - 3rem)); }
}
@media (min-width: 940px) and (max-width: 1099.98px) {
  .hero { --hero-seam: 55vw; --hero-cut: clamp(80px, 7vw, 110px); }
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: var(--t-meta); font-weight: 600; font-stretch: 94%;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-on-dark-muted);
  margin-bottom: var(--s-5);
}
.hero__eyebrow::before {
  content: ''; width: 26px; height: 2px; background: var(--pink); flex-shrink: 0;
}
/* Manual so the break lands on Gebäude|reinigung, not Gebäuderei|nigung. */
.hero h1 { max-width: 21ch; hyphens: manual; font-size: clamp(2.2rem, 1rem + 3.1vw, 4.1rem); }
.hero h1 em { font-style: normal; color: var(--pink); }
.hero__lede {
  margin-top: var(--s-5);
  font-size: var(--t-lead);
  color: var(--text-on-dark-muted);
  max-width: 46ch;
  line-height: 1.55;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.hero__facts {
  display: flex; flex-wrap: wrap;
  gap: var(--s-3) clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-dark);
  font-size: var(--t-small);
  color: var(--text-on-dark-muted);
}
.hero__fact { display: flex; align-items: center; gap: 0.5rem; }
.hero__fact svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--pink); }
/* Breit genug für eine Zeile: drei Fakten gleichmäßig statt 2+1 umbrechend. */
@media (min-width: 1360px) {
  .hero__facts { justify-content: space-between; gap: var(--s-3) 1rem; font-size: 0.875rem; }
}

/* Signature: the squeegee reveal.
   Mobil: full-bleed Block am Sektionsende, diagonale Oberkante.
   Desktop: absolutes Panel von Naht bis Viewportkante, diagonale linke Kante.
   Foto, Frost, Wischkante und Caption sind inset:0-Kinder — der Clip auf dem
   Panel hält alles automatisch deckungsgleich. */
.reveal-pane {
  --cy: clamp(30px, 9vw, 60px);
  position: relative;
  overflow: hidden;
  margin-top: clamp(2.75rem, 8vw, 4.5rem);
  height: clamp(260px, 70vw, 500px);
  clip-path: polygon(0 var(--cy), 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 940px) {
  .reveal-pane {
    position: absolute;
    inset: 0 0 0 var(--hero-seam);
    margin-top: 0;
    height: auto;
    z-index: var(--z-content);
    clip-path: polygon(var(--hero-cut) 0, 100% 0, 100% 100%, 0 100%);
  }
}
.reveal-pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Bildanker. Das Panel wird mit dem Viewport breiter, seine Höhe bleibt bei
   min(86vh, 820px) stehen. Cover schneidet deshalb oben und unten weg, bei
   2560 px bleiben nur noch 48 Prozent der Bildhöhe übrig. Mit der Mittelstellung
   wandern die Köpfe aus dem Ausschnitt. Die Werte sind die Kopfhöhe im jeweiligen
   tall-Bild, gemessen und mit Luft nach oben gesetzt. Haushalt und Bauend zeigen
   keinen Kopf und bleiben mittig. Auf Mobil greift der Anker nicht, dort schneidet
   das Panel seitlich statt oben und unten. */
.hero-slide--glas img { object-position: 50% 20%; }
.hero-slide--buero img { object-position: 50% 12%; }
.hero-slide--hausmeister img { object-position: 50% 10%; }

/* Diashow: die Dienstleistungen wechseln mit derselben Wischgeste durchs Panel. */
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; z-index: 0; }
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide.is-entering {
  z-index: 2;
  animation: hero-slide-wipe 0.9s var(--ease-io) both;
}
@keyframes hero-slide-wipe {
  from { clip-path: polygon(0 0, 0% 0, -60% 100%, -60% 100%); }
  to   { clip-path: polygon(0 0, 160% 0, 100% 100%, -60% 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-entering { animation: none; }
}

/* Die nasse Kante: schmales Parallelogramm exakt entlang der Diagonale. */
.reveal-pane::after {
  content: '';
  position: absolute; inset: 0; z-index: 5;
  background: var(--pink);
  clip-path: polygon(0 var(--cy), 100% 0, 100% var(--hero-edge), 0 calc(var(--cy) + var(--hero-edge)));
  pointer-events: none;
}
@media (min-width: 940px) {
  .reveal-pane::after {
    clip-path: polygon(var(--hero-cut) 0, calc(var(--hero-cut) + var(--hero-edge)) 0, var(--hero-edge) 100%, 0 100%);
  }
  /* Kontrast für den fixierten Header, solange der Frost hell ist. */
  .reveal-pane::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 130px; z-index: 4;
    background: linear-gradient(to bottom, oklch(0.205 0.02 340 / 0.55), transparent);
    pointer-events: none;
  }
}
@property --wipe-a { syntax: '<percentage>'; initial-value: 100%; inherits: true; }
@property --wipe-b { syntax: '<percentage>'; initial-value: 106%; inherits: true; }

/* The frost sits behind the travelling edge; ahead of it the glass is clear. */
.reveal-pane__frost {
  position: absolute; inset: 0; z-index: 1;
  backdrop-filter: blur(13px) saturate(62%) brightness(1.12);
  -webkit-backdrop-filter: blur(13px) saturate(62%) brightness(1.12);
  background: oklch(0.92 0.008 340 / 0.4);
  -webkit-mask-image: linear-gradient(135deg, transparent var(--wipe-a), #000 var(--wipe-b));
  mask-image: linear-gradient(135deg, transparent var(--wipe-a), #000 var(--wipe-b));
  pointer-events: none;
}
.reveal-pane__edge {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(135deg,
    transparent calc(var(--wipe-a) - 2%),
    oklch(1 0 0 / 0.7) var(--wipe-a),
    oklch(1 0 0 / 0.12) calc(var(--wipe-a) + 1.8%),
    transparent calc(var(--wipe-a) + 3.2%));
  pointer-events: none;
  opacity: 0;
}
.reveal-pane.is-wiping .reveal-pane__edge { opacity: 1; }
.js-ready .reveal-pane { --wipe-a: -6%; --wipe-b: 0%; }
.js-ready .reveal-pane.is-wiped { --wipe-a: 100%; --wipe-b: 106%; }
.js-ready .reveal-pane__frost,
.js-ready .reveal-pane__edge {
  transition: --wipe-a 1.5s var(--ease-io), --wipe-b 1.5s var(--ease-io), opacity 0.4s;
}

.reveal-pane__label {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 3;
  display: flex; align-items: center; gap: 0.55rem;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 3.5vw, 1.9rem) clamp(1rem, 2.6vw, 1.4rem);
  background: linear-gradient(to top,
    oklch(0.205 0.02 340 / 0.88) 0%,
    oklch(0.205 0.02 340 / 0.5) 55%,
    transparent 100%);
  font-size: var(--t-meta); font-weight: 600; font-stretch: 94%;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-on-dark);
  transition: opacity 0.3s;
}
.reveal-pane__label::before {
  content: ''; width: 26px; height: 2px; background: var(--pink); flex-shrink: 0;
}
.reveal-pane__label.is-swapping { opacity: 0; }

/* Floating parallax objects */
.floaters {
  position: absolute; inset: 0;
  z-index: var(--z-parallax);
  pointer-events: none;
  overflow: clip;
}
.floater {
  position: absolute;
  width: var(--fw, 120px);
  opacity: 0.9;
  filter: drop-shadow(0 24px 34px oklch(0 0 0 / 0.45));
  will-change: transform;
}
.floater img { width: 100%; height: auto; }
/* Kept clear of the text column: they hang off the edges and behind the photo. */
.floater--a { --fw: clamp(78px, 10vw, 148px); top: 15%; left: -4.5%; }
.floater--b { --fw: clamp(90px, 12vw, 178px); bottom: -3%; left: -6%; }
.floater--c { --fw: clamp(64px, 7vw, 106px); top: 11%; right: 0.5%; }
.floater--d { --fw: clamp(70px, 8.5vw, 124px); bottom: 4%; right: -3.5%; }
@media (max-width: 939px) {
  .floater { opacity: 0.42; }
  .floater--a { top: 14%; left: -9%; }
  .floater--b { bottom: -2%; left: -11%; }
  .floater--c { top: 9%; right: -8%; }
  .floater--d { display: none; }
}
@media (max-width: 420px) {
  .floater--a { top: 17%; }
  .floater--c { top: 12%; }
}

/* Hero: das Full-Bleed-Panel besetzt die rechte Hälfte — die Werkzeuge
   halten sich links davon, die Sprühflasche ragt bewusst über die Naht. */
@media (min-width: 940px) {
  .hero .floater--a { top: 16%; left: -4.5%; }
  .hero .floater--b { bottom: 5%; left: -6%; }
  .hero .floater--c { top: 13%; right: auto; left: calc(var(--hero-seam) - 4.5vw); z-index: 15; }
  .hero .floater--d { display: none; }
}
@media (max-width: 939px) {
  .hero .floater--b { display: none; }
}
@media (min-width: 940px) and (max-width: 1099.98px) {
  /* Nah an der Naht, aber tiefer — sonst hängt die Flasche verloren neben der Navigation. */
  .hero .floater--c { top: 19%; }
}

/* ============================================================
   Sub page head
   ============================================================ */
.page-head {
  position: relative;
  background: var(--ink);
  color: var(--text-on-dark);
  padding-block: clamp(7.5rem, 14vw, 10.5rem) clamp(3.25rem, 7vw, 5rem);
  overflow: clip;
  isolation: isolate;
}
.page-head--short { padding-block-end: clamp(2.75rem, 5vw, 4rem); }
.page-head__body { position: relative; z-index: var(--z-content); max-width: 40rem; }

.page-head__grid {
  position: relative; z-index: var(--z-content);
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) {
  .page-head__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; }
  .page-head__grid--form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
}

.page-head__phone {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-dark);
}
.page-head__phone a {
  display: inline-block;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 800; font-stretch: 114%; letter-spacing: -0.022em;
  text-decoration: none;
  border-bottom: 2px solid var(--pink);
  padding-bottom: 0.1em;
}
.page-head__phone a:hover { color: var(--pink); }
.page-head__phone span {
  display: block; margin-top: var(--s-3);
  font-size: var(--t-small); color: var(--text-on-dark-muted);
}

/* Jump list in the services page head */
.jump { padding-top: var(--s-5); border-top: 2px solid var(--pink); }
.jump__title {
  font-size: var(--t-meta); font-weight: 600; font-stretch: 94%;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-on-dark-muted);
  margin-bottom: var(--s-4);
}
.jump ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.1rem;
  grid-template-columns: minmax(0, 1fr);
}

.jump a {
  display: block;
  padding: 0.42rem 0;
  font-size: var(--t-small); font-weight: 500;
  color: var(--text-on-dark-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark);
  transition: color 0.22s var(--ease-quint), padding-inline-start 0.22s var(--ease-quint);
}
.jump a:hover { color: var(--text-on-dark); padding-inline-start: 0.4rem; }
.page-head h1 { max-width: 17ch; hyphens: manual; }
.page-head .lede { margin-top: var(--s-5); color: var(--text-on-dark-muted); }
.page-head .hero__actions { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.page-head .floater--a { --fw: clamp(72px, 9vw, 130px); top: 24%; left: -5%; }
/* right-hand column is occupied on sub pages, so this one hangs off the edge */
.page-head .floater--c { --fw: clamp(60px, 7vw, 104px); top: 62%; right: -4.5%; }
@media (max-width: 939px) {
  .page-head .floater { opacity: 0.38; }
  .page-head .floater--c { right: -8%; }
}

/* ============================================================
   Detail columns (secondary services, legal-ish reading blocks)
   ============================================================ */
.detail-cols {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 780px) { .detail-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.detail { padding-top: var(--s-5); border-top: 2px solid var(--pink); }
.detail h3 { margin-bottom: var(--s-3); }
.detail p { color: var(--text-on-dark-muted); font-size: 1rem; line-height: 1.65; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-5) clamp(2rem, 4vw, 3.5rem);
  justify-content: space-between;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--mineral);
  border-radius: var(--r-lg);
}
.cta-band__text { flex: 1 1 22rem; min-width: 0; }
.cta-band__text h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.cta-band__text p { margin-top: var(--s-3); color: var(--text-muted); max-width: 46ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ============================================================
   Promise strip
   ============================================================ */
.promise {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 780px) { .promise { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the 2px top rule is the shared marker of this block family, always pink */
.promise__item { padding-top: var(--s-5); border-top: 2px solid var(--pink); }
.promise__item h3 { margin-bottom: var(--s-3); }
.promise__item p { color: var(--text-muted); font-size: 1rem; line-height: 1.62; max-width: 40ch; }
/* the bare variant carries the three words alone, so they get more presence */
.promise--bare .promise__item h3 {
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem);
  letter-spacing: -0.02em;
}

/* ============================================================
   Intro with image
   ============================================================ */
.split {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.split__media { order: 2; }
.split__body { order: 1; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--wide-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .split__media, .split__body { order: 0; }
  .split--flip .split__media { order: -1; }
}
.split__media { position: relative; }
.split__media img { width: 100%; border-radius: var(--r-lg); }
/* caps the portrait next to short text so the column ratio stays balanced */
.split__media .img--capped {
  aspect-ratio: 5 / 5.4;
  object-fit: cover;
  object-position: 50% 18%;
}
.split__body > * + * { margin-top: var(--s-5); }
.split__body p { color: var(--text-muted); max-width: 58ch; }
.section--dark .split__body p { color: var(--text-on-dark-muted); }

/* Bleed: das Bild läuft bis an seine Viewportkante statt in einer Karte zu
   sitzen; die innere Ecke ist im Winkel der Wischgeste angeschnitten. */
.split__media--bleed {
  --bevel: 36px;
  --edge-gap: calc(max((100vw - (var(--wrap) + 2 * var(--gutter))) / 2, 0px) + var(--gutter));
}
.split__media--bleed img { border-radius: 0; display: block; }
.split:not(.split--flip) .split__media--bleed img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)));
}
.split--flip .split__media--bleed img {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, 0 100%);
}
@media (max-width: 899.98px) {
  .split__media--bleed { margin-inline: calc(-1 * var(--gutter)); }
}
@media (min-width: 900px) {
  .split__media--bleed { --bevel: 56px; }
  .split:not(.split--flip) .split__media--bleed { margin-inline-end: calc(-1 * var(--edge-gap)); }
  .split--flip .split__media--bleed { margin-inline-start: calc(-1 * var(--edge-gap)); }
  .split__media--bleed img:not(.img--capped) { aspect-ratio: 3 / 2; object-fit: cover; }
}

/* Sparsamer Akzent: die rosa Kante liegt nur auf je einem Bild pro Seite. */
.split__media--edge::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--pink);
  pointer-events: none;
}
.split:not(.split--flip) .split__media--edge::after {
  clip-path: polygon(0 calc(100% - var(--bevel) - 4px), 0 calc(100% - var(--bevel)),
                     var(--bevel) 100%, calc(var(--bevel) + 4px) 100%);
}
.split--flip .split__media--edge::after {
  clip-path: polygon(calc(100% - var(--bevel) - 4px) 100%, calc(100% - var(--bevel)) 100%,
                     100% calc(100% - var(--bevel)), 100% calc(100% - var(--bevel) - 4px));
}

.motto {
  padding-top: var(--s-5);
  border-top: 2px solid var(--pink);
  max-width: 26ch;
}
.motto b {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 800; font-stretch: 114%; letter-spacing: -0.02em;
  line-height: 1.2; color: var(--ink); display: block;
}
.motto span {
  display: block; margin-top: 0.45rem;
  font-size: var(--t-meta); color: var(--text-muted);
}

/* ============================================================
   Services index list
   ============================================================ */
.svc-list { border-top: 1px solid var(--line); }
.section--dark .svc-list { border-color: var(--line-dark); }
.svc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem var(--s-5);
  padding-block: clamp(1.35rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: padding-inline 0.4s var(--ease-quint);
}
.svc__name { grid-column: 1; grid-row: 1; }
.svc__desc { grid-column: 1; grid-row: 2; }
.svc__go { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.section--dark .svc { border-color: var(--line-dark); }
@media (min-width: 960px) {
  .svc {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) auto;
    gap: var(--s-4) var(--s-6);
  }
  .svc__name { grid-column: 1; grid-row: 1; }
  .svc__desc { grid-column: 2; grid-row: 1; }
  .svc__go { grid-column: 3; grid-row: 1; }
  .svc:hover { padding-inline: 1.1rem; }
}
.svc::before {
  content: ''; position: absolute; inset: 0;
  background: var(--mineral);
  border-radius: var(--r-md);
  opacity: 0; z-index: -1;
  transition: opacity 0.3s var(--ease-quint);
}
.section--dark .svc::before { background: var(--ink-2); }
.svc:hover::before, .svc:focus-visible::before { opacity: 1; }
.svc__name {
  font-size: clamp(1.15rem, 0.95rem + 0.85vw, 1.7rem);
  font-weight: 800; font-stretch: 114%; letter-spacing: -0.022em;
  line-height: 1.1;
  hyphens: auto;
  overflow-wrap: break-word;
}
.svc__desc { color: var(--text-muted); font-size: 1rem; line-height: 1.55; max-width: 64ch; }
.section--dark .svc__desc { color: var(--text-on-dark-muted); }
.svc__go {
  display: inline-flex;
  width: 40px; height: 40px; flex-shrink: 0;
  align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r-pill);
  color: var(--text-muted);
  transition: background-color 0.28s var(--ease-quint), color 0.28s var(--ease-quint),
    border-color 0.28s var(--ease-quint), transform 0.28s var(--ease-quint);
}
@media (min-width: 560px) { .svc__go { border-color: var(--line); } }
.section--dark .svc__go { color: var(--pink); }
@media (min-width: 560px) { .section--dark .svc__go { border-color: var(--line-dark); } }
.svc:hover .svc__go {
  background: var(--pink); border-color: var(--pink); color: #fff; transform: translateX(3px);
}

/* ============================================================
   Steps (real sequence)
   ============================================================ */
.steps {
  display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem);
  grid-template-columns: minmax(0, 1fr);
  counter-reset: step;
}
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { counter-increment: step; position: relative; padding-top: var(--s-6); }
.step::before {
  content: counter(step);
  position: absolute; top: 0; left: 0;
  font-size: 1rem; font-weight: 800; font-stretch: 100%;
  letter-spacing: 0.02em;
  color: var(--pink-text);
}
.step::after {
  content: ''; position: absolute; top: 0.72rem; left: 1.6rem; right: 0;
  height: 1px; background: var(--line);
}
.section--dark .step::after { background: var(--line-dark); }
.step h3 { margin-bottom: var(--s-3); }
.step p { color: var(--text-muted); font-size: 1rem; line-height: 1.6; max-width: 38ch; }
.section--dark .step p { color: var(--text-on-dark-muted); }

/* ============================================================
   Reviews
   ============================================================ */
.rating-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.rating-score {
  display: flex; align-items: baseline; gap: 0.45rem;
  font-stretch: 116%; letter-spacing: -0.03em;
}
.rating-score b { font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 800; line-height: 1; }
.rating-score span { font-size: var(--t-small); color: var(--text-muted); font-stretch: 100%; letter-spacing: 0; }
.stars { display: inline-flex; gap: 3px; color: var(--pink-text); }
.stars svg { width: 19px; height: 19px; }
.rating-meta { font-size: var(--t-small); color: var(--text-muted); }

.reviews {
  display: grid; gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 720px) { .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 2px solid var(--pink);
}
.review__stars { color: var(--pink-text); display: inline-flex; gap: 3px; }
.review__stars svg { width: 16px; height: 16px; }
.review blockquote {
  margin: 0;
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.45; font-weight: 600; font-stretch: 104%;
  letter-spacing: -0.012em;
  overflow-wrap: break-word;
}
.review__by {
  margin-top: auto;
  font-size: var(--t-meta); color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.55rem;
}
.review__by b { font-weight: 600; color: var(--text); }

/* ============================================================
   Contact
   ============================================================ */
.contact-grid {
  display: grid; gap: clamp(2.25rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); } }

.contact-lines { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.contact-line { display: flex; gap: var(--s-4); align-items: flex-start; }
.contact-line svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--pink); margin-top: 3px; }
.contact-line__body { min-width: 0; }
.contact-line dt {
  font-size: var(--t-meta); color: var(--text-on-dark-muted);
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; font-stretch: 94%;
  margin-bottom: 3px;
}
.contact-line dd { margin: 0; font-size: 1.05rem; font-weight: 500; overflow-wrap: break-word; }
.contact-line dd a {
  text-decoration: none; border-bottom: 1px solid var(--line-dark);
  display: inline-block; padding-block: 0.15rem 0.1rem;
}
.contact-line dd a:hover { border-color: var(--pink); }
.contact-line dd small { display: block; font-size: var(--t-small); font-weight: 400; color: var(--text-on-dark-muted); }

/* same block on a light section */
.contact-grid--light .contact-line dt,
.contact-grid--light .contact-line dd small { color: var(--text-muted); }
.contact-grid--light .contact-line svg { color: var(--pink-text); }
.contact-grid--light .contact-line dd a { border-bottom-color: var(--line); }
.contact-grid--light .contact-lines { margin-top: var(--s-6); }

.area-note {
  padding-top: var(--s-5);
  border-top: 2px solid var(--pink);
}
.area-note p { max-width: 46ch; }
.area-note + .area-note { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.area-note h3 { margin-bottom: var(--s-3); }
.area-note p { color: var(--text-muted); font-size: var(--t-small); line-height: 1.6; }

.form--framed { border: 1px solid var(--line); box-shadow: var(--shadow-soft); }

.form {
  display: grid; gap: var(--s-4);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--paper);
  border-radius: var(--r-lg);
  color: var(--text);
}
.form__row { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 0.4rem; min-width: 0; }
.field label { font-size: var(--t-small); font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: var(--t-small);
  transition: border-color 0.2s var(--ease-quint), box-shadow 0.2s var(--ease-quint);
}
.field textarea { resize: vertical; min-height: 118px; }
.field input::placeholder, .field textarea::placeholder { color: oklch(0.55 0.012 340); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px var(--pink-wash);
}
.form__consent {
  display: flex; gap: 0.7rem; align-items: flex-start;
  font-size: var(--t-meta); color: var(--text-muted); line-height: 1.5;
}
.form__consent input { margin-top: 2px; width: 21px; height: 21px; flex-shrink: 0; accent-color: var(--pink); }
.form__consent a { color: var(--text); }
.form__note {
  font-size: var(--t-meta); color: var(--text-muted);
  padding: 0.75rem 0.95rem;
  background: var(--mineral); border-radius: var(--r-sm);
  line-height: 1.5;
}

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--ink); color: var(--text-on-dark); padding-block: var(--section-tight) var(--s-6); }
.footer__grid {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) { .footer__grid { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); } }
.footer h4 {
  font-size: var(--t-small); font-weight: 700; font-stretch: 104%;
  letter-spacing: 0.02em; margin-bottom: var(--s-4);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.footer li { color: var(--text-on-dark-muted); font-size: var(--t-small); }
.footer .brand__name span { color: var(--text-on-dark-muted); }
.footer a { color: var(--text-on-dark-muted); text-decoration: none; font-size: var(--t-small); }
/* only the list links get the larger hit area; .brand is an <a> too and must keep its flex row */
.footer ul a, .footer__bottom nav a { display: inline-block; padding-block: 0.28rem; }
.footer a:hover { color: var(--text-on-dark); }
.footer p { color: var(--text-on-dark-muted); font-size: var(--t-small); line-height: 1.6; }
.footer__brand .brand { margin-bottom: var(--s-4); color: var(--text-on-dark); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  justify-content: space-between; align-items: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-dark);
  font-size: var(--t-meta); color: var(--text-on-dark-muted);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ============================================================
   Legal pages
   ============================================================ */
.legal { padding-block: clamp(7.5rem, 14vw, 10rem) var(--section); }
.legal h1 { margin-bottom: var(--s-6); }
.legal h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: var(--s-4);
}
.legal h3 {
  font-size: 1.08rem; font-stretch: 104%;
  margin-top: var(--s-6); margin-bottom: var(--s-3);
}
.legal p, .legal li {
  color: var(--text-muted); max-width: var(--measure); line-height: 1.7;
  overflow-wrap: anywhere;
}
.legal__intro {
  font-size: var(--t-lead); line-height: 1.55; color: var(--text) !important;
  max-width: 56ch; margin-bottom: var(--s-6);
}
.legal address { margin-bottom: var(--s-4); }
.legal p + p { margin-top: var(--s-4); }
.legal ul, .legal ol { padding-left: 1.25rem; display: grid; gap: 0.5rem; margin: var(--s-4) 0; }
.legal a { color: var(--text); }
.legal address { font-style: normal; color: var(--text-muted); line-height: 1.8; }

/* Preview QA correction: keep long German legal headings inside the 340px viewport
   without hard mid-word wrapping. Canonical source remains unchanged. */
@media (max-width: 400px) {
  .legal h1 { font-size: 1.45rem; text-wrap: wrap; }
  .legal h2 { font-size: 1.25rem; text-wrap: wrap; }
}

/* ============================================================
   Reveal animation
   ============================================================ */
.rv { opacity: 1; }
@media print {
  .js-ready .rv { opacity: 1 !important; transform: none !important; }
}
.js-ready .rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease-quint), transform 0.75s var(--ease-quint);
  transition-delay: var(--rv-delay, 0ms);
}
.js-ready .rv.is-in { opacity: 1; transform: none; }

/* ============================================================
   Cookie banner
   ============================================================ */
.cookie {
  position: fixed;
  inset-inline: 0; inset-block-end: 0;
  z-index: var(--z-cookie);
  padding: var(--s-4) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform 0.6s var(--ease-quint);
}
.cookie.is-open { transform: translateY(0); }
.cookie__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-4) var(--s-5);
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.2rem, 3vw, 1.75rem);
  background: var(--ink); color: var(--text-on-dark);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 50px oklch(0 0 0 / 0.35);
}
.cookie__text { flex: 1 1 320px; min-width: 0; font-size: var(--t-small); line-height: 1.55; color: var(--text-on-dark-muted); }
.cookie__text b { display: block; color: var(--text-on-dark); font-weight: 700; font-stretch: 106%; margin-bottom: 0.3rem; font-size: 1rem; }
.cookie__text a { color: var(--text-on-dark); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 560px) {
  .cookie__actions { width: 100%; }
  .cookie__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@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;
  }
  .js-ready .rv { opacity: 1; transform: none; }
  .floater { display: none; }
  .js-ready .reveal-pane { --wipe-a: 104%; --wipe-b: 110%; }
  .btn:hover { transform: none; }
}