/* ClearClean Berlin, Demo-Website von TEAM Gold LLC.
   Fassung 2 (Oktober 2026). Vorher eine kompakte React-Seite unter /demo/reinigung,
   Screenshots davon in docs/archiv/demo-v1/reinigung/.

   Gestaltungsidee: frisch abgezogenes Glas. Viel Weiß, Tintenblau für Schrift und
   Flächen, Zitronengelb als Farbe der Handschuhe und der Markierung. Syne für die
   Überschriften, weil sie breit und eigen ist, Inter für alles Lesbare. Klare Kanten,
   2 Pixel starke Linien, Häkchen statt Symbole.

   Bewegung: wie ein Abzieher. Überschriften und Bilder werden einmal von links
   freigezogen, Häkchen setzen sich nacheinander, die Scheibe im Kopf zieht der
   Besucher selbst ab. Jede Bewegung einmal, prefers-reduced-motion wird respektiert. */

:root {
  --white: #ffffff;
  --mist: #f3f5f9;
  --ink: #1b2a6b;
  --ink-deep: #131f52;
  --ink-soft: #4a5684;
  --ink-faint: #8a92b2;
  --yellow: #f5e663;
  --yellow-deep: #e2cf33;
  --line: rgba(27, 42, 107, 0.14);
  --line-strong: rgba(27, 42, 107, 0.32);

  --display: "Syne", "Arial Black", Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --pull: cubic-bezier(0.65, 0, 0.2, 1);
  --out: cubic-bezier(0.2, 0.7, 0.2, 1);

  --gutter: clamp(18px, 4vw, 56px);
  --max: 1280px;
  --hdr-h: 72px;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 200ms var(--pull) both vt-out; }
::view-transition-new(root) { animation: 340ms var(--pull) both vt-in; }
@keyframes vt-out { to { clip-path: inset(0 0 0 100%); } }
@keyframes vt-in { from { clip-path: inset(0 100% 0 0); } }
.hdr { view-transition-name: site-header; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sec-ink :focus-visible, .foot :focus-visible { outline-color: var(--yellow); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--yellow); color: var(--ink); padding: 10px 16px; }
.skip:focus { left: 8px; }

/* Schrift --------------------------------------------------------------- */
.t-xxl, .t-xl, .t-l, .t-m { font-family: var(--display); font-weight: 800; letter-spacing: -0.025em; line-height: 0.98; overflow-wrap: break-word; hyphens: auto; }
.t-xxl { font-size: clamp(3.2rem, 8.4vw, 7.6rem); line-height: 0.92; }
.t-xl { font-size: clamp(1.9rem, 6.5vw, 5.2rem); line-height: 0.98; }
.t-l { font-size: clamp(1.7rem, 4vw, 3.4rem); }
.t-m { font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.12; letter-spacing: -0.01em; font-weight: 700; overflow-wrap: anywhere; hyphens: auto; }
.t-s { font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.tag { font-family: var(--display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 10px; }
.tag::before { content: ""; width: 14px; height: 14px; background: var(--yellow); border: 2px solid var(--ink); }
.sec-yellow .tag::before { background: var(--white); }
.sec-ink .tag::before { border-color: var(--yellow); background: transparent; }
.lede { font-size: clamp(1.06rem, 1.35vw, 1.2rem); color: var(--ink-soft); max-width: 50ch; line-height: 1.6; }
.sec-ink .lede { color: #c9cee6; }
.sec-yellow .lede { color: var(--ink); }
.dim { color: var(--ink-soft); }
.small { font-size: 0.88rem; }
.num { font-variant-numeric: tabular-nums; }
mark { background: var(--yellow); color: inherit; padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Knöpfe ---------------------------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 15px 24px; overflow: hidden; isolation: isolate;
  background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); cursor: pointer; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: 0.01em;
  transition: color 200ms linear;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--pull); }
.btn:hover { color: var(--yellow); }
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }
.btn .arr { transition: transform 250ms var(--out); }
.btn:hover .arr { transform: translateX(4px); }
.btn-line { background: var(--white); }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink::before { background: var(--white); }
.btn-ink:hover { color: var(--ink); }
.btn-sm { padding: 9px 16px; font-size: 0.92rem; }
.link { color: var(--ink); text-decoration: none; font-weight: 600; background: linear-gradient(var(--yellow), var(--yellow)) 0 100% / 100% 0.4em no-repeat; transition: background-size 220ms var(--out); padding: 0 2px; }
.link:hover { background-size: 100% 100%; }
.sec-ink .link { color: var(--white); background-image: linear-gradient(rgba(245, 230, 99, 0.35), rgba(245, 230, 99, 0.35)); }
.sec-ink .link:hover { color: var(--ink); background-image: linear-gradient(var(--yellow), var(--yellow)); }
.sec-yellow .link { background-image: linear-gradient(var(--white), var(--white)); }

/* Kopfzeile ------------------------------------------------------------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr-h); display: flex; align-items: center; background: rgba(255, 255, 255, 0.94); border-bottom: 2px solid var(--ink); }
.hdr .wrap { width: 100%; display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 34px; height: 34px; background: var(--ink); position: relative; overflow: hidden; flex: none; }
.brand-mark::after { content: ""; position: absolute; left: -6px; right: -6px; top: 14px; height: 7px; background: var(--yellow); transform: rotate(-32deg); }
.brand b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1; }
.brand small { display: block; font-size: 0.74rem; color: var(--ink-soft); margin-top: 3px; letter-spacing: 0.02em; }
.nav { display: flex; gap: 22px; }
.nav a { text-decoration: none; font-weight: 500; font-size: 0.96rem; position: relative; padding: 4px 0; }
.nav a::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: 2px; height: 0.45em; background: var(--yellow); z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform 250ms var(--pull); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.status { font-size: 0.85rem; color: var(--ink-soft); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.status .lamp { width: 10px; height: 10px; border: 2px solid var(--ink-faint); }
.status.is-open .lamp { background: var(--yellow); border-color: var(--ink); }
.status strong { color: var(--ink); font-weight: 600; }
.lang { background: var(--white); border: 2px solid var(--ink); padding: 5px 9px; font-family: var(--display); font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.lang:hover { background: var(--yellow); }
.menu-btn { display: none; width: 44px; height: 44px; background: var(--yellow); border: 2px solid var(--ink); cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink); transition: transform 300ms var(--pull); }
.menu-btn span:first-child { top: 16px; } .menu-btn span:last-child { top: 24px; }
.menu-open .menu-btn span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .menu-btn span:last-child { transform: translateY(-4px) rotate(-45deg); }
.sheet { position: fixed; inset: 0; z-index: 45; background: var(--yellow); padding: calc(var(--hdr-h) + 24px) var(--gutter) 28px; display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 100% 0 0); visibility: hidden; transition: clip-path 480ms var(--pull), visibility 0s 480ms; }
.menu-open .sheet { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 480ms var(--pull); }
.sheet nav { display: grid; }
.sheet nav a { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 8.5vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.15; text-decoration: none; padding: 4px 0; border-bottom: 2px solid var(--ink); }
.sheet nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.sheet-foot { display: grid; gap: 4px; font-size: 0.92rem; }
.sheet .status { color: var(--ink); }
.menu-open { overflow: hidden; }
@media (max-width: 1140px) { .nav { display: none; } .menu-btn { display: block; } }
@media (max-width: 640px) { .hdr .status, .hdr .btn { display: none; } }
@media (max-width: 400px) { .hdr .wrap { gap: 10px; } .brand small { display: none; } .brand b { font-size: 1.1rem; } .brand-mark { width: 28px; height: 28px; } .brand-mark::after { top: 11px; height: 6px; } .lang { padding: 4px 7px; } }

/* Einblendungen: einmal abgezogen --------------------------------------- */
.js [data-rv] { opacity: 0; transform: translateY(18px); transition: opacity 260ms linear, transform 560ms var(--out); transition-delay: var(--d, 0ms); }
.js [data-rv].is-in { opacity: 1; transform: none; }
/* Der clip-path sitzt auf den Kindern: ein vollständig weggeschnittenes Element meldet der IntersectionObserver in Chrome nie */
.js [data-lift] > * { clip-path: inset(0 100% 0 0); transition: clip-path 760ms var(--pull); transition-delay: var(--d, 0ms); }
.js [data-lift].is-in > * { clip-path: inset(0 0 0 0); }
.js [data-wipe] { position: relative; }
.js [data-wipe] .w { display: block; clip-path: inset(-0.2em 100% -0.2em 0); transition: clip-path 700ms var(--pull); transition-delay: var(--d, 0ms); }
.js [data-wipe].is-in .w { clip-path: inset(-0.2em -0.1em -0.2em 0); }
.js [data-wipe]::after { content: ""; position: absolute; top: -0.05em; bottom: -0.05em; left: 0; width: 6px; background: var(--yellow); opacity: 0; pointer-events: none; }
.js [data-wipe].is-in::after { animation: blade 700ms var(--pull) both; animation-delay: var(--d, 0ms); }
.sec-yellow [data-wipe]::after { background: var(--ink); }
@keyframes blade { 0% { left: 0; opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.js .hero [data-hero] { opacity: 0; transform: translateY(16px); transition: opacity 300ms linear, transform 640ms var(--out); transition-delay: var(--d, 0ms); }
.js .hero.is-up [data-hero] { opacity: 1; transform: none; }

/* Abschnitte ------------------------------------------------------------ */
main { padding-top: var(--hdr-h); }
.sec { padding: clamp(72px, 9vw, 124px) 0; }
.sec-tight { padding: clamp(48px, 6vw, 76px) 0; }
.sec-yellow { background: var(--yellow); }
.sec-ink { background: var(--ink); color: var(--white); }
.sec-mist { background: var(--mist); }
.head { margin-bottom: clamp(36px, 5vw, 60px); max-width: 860px; }
.head .lede { margin-top: 18px; }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; max-width: none; flex-wrap: wrap; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.split .lede { margin-top: 18px; }
@media (max-width: 880px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* Seitenkopf ------------------------------------------------------------ */
.phead { padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px); border-bottom: 2px solid var(--ink); position: relative; }
.phead::after { content: ""; position: absolute; right: var(--gutter); bottom: -2px; width: min(32vw, 300px); height: 14px; background: var(--yellow); border: 2px solid var(--ink); border-bottom: 0; }
.crumbs { display: flex; gap: 10px; font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 26px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.phead h1 { max-width: 15ch; }
.phead .lede { margin-top: 24px; }

/* Hero mit Scheibe ------------------------------------------------------ */
.hero { padding: clamp(40px, 6vw, 84px) 0 clamp(64px, 8vw, 110px); border-bottom: 2px solid var(--ink); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { margin-bottom: 28px; font-size: clamp(2.2rem, 4.2vw, 4.2rem); }
.hero h1 mark { padding: 0 0.08em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note { margin-top: 26px; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

.pane { position: relative; aspect-ratio: 16 / 10; border: 2px solid var(--ink); background: var(--mist); overflow: hidden; user-select: none; -webkit-user-select: none; }
.pane::before, .pane::after { content: ""; position: absolute; z-index: 4; width: 22px; height: 22px; border: 0 solid var(--ink); pointer-events: none; }
.pane::before { top: 10px; left: 10px; border-top-width: 3px; border-left-width: 3px; }
.pane::after { bottom: 10px; right: 10px; border-bottom-width: 3px; border-right-width: 3px; }
.pane > img { width: 100%; height: 100%; object-fit: cover; }
.fog { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: none; transition: opacity 700ms linear; }
.pane.clear .fog { opacity: 0; pointer-events: none; }
.no-js .fog, .pane:not(.ready) .fog { display: none; }
.blade { position: absolute; left: 0; top: 0; z-index: 3; width: 140px; height: 40px; margin: -20px 0 0 -70px; pointer-events: none; opacity: 0; transition: opacity 150ms linear; }
.blade svg { width: 100%; height: 100%; fill: var(--ink); }
.blade svg rect:nth-child(2) { fill: var(--yellow); stroke: var(--ink); stroke-width: 2; }
.pane.hover .blade { opacity: 1; }
.pane.clear .blade { opacity: 0; }
.pane-hint, .pane-done { position: absolute; z-index: 3; margin: 0; font-family: var(--display); font-weight: 700; font-size: 0.92rem; background: var(--white); border: 2px solid var(--ink); padding: 8px 12px; pointer-events: none; }
.pane-hint { left: 14px; bottom: 14px; transition: opacity 200ms linear; }
.pane.touched .pane-hint, .pane.clear .pane-hint { opacity: 0; }
.pane-done { left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--yellow); opacity: 0; transition: opacity 300ms linear 400ms; white-space: nowrap; }
.pane.clear .pane-done { opacity: 1; }
.pane-auto { position: absolute; z-index: 3; right: 14px; bottom: 14px; background: var(--ink); color: var(--white); border: 2px solid var(--ink); padding: 8px 12px; font-family: var(--display); font-weight: 700; font-size: 0.88rem; cursor: pointer; transition: opacity 200ms linear; }
.pane-auto:hover { background: var(--yellow); color: var(--ink); }
.pane.clear .pane-auto { opacity: 0; pointer-events: none; }
.pane:not(.ready) .pane-hint, .pane:not(.ready) .pane-auto { display: none; }
@media (max-width: 520px) { .pane-hint { right: 14px; bottom: 58px; font-size: 0.84rem; } .pane-done { white-space: normal; text-align: center; width: 80%; } }

/* Leistungen auf der Startseite ----------------------------------------- */
.svc-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.svc-split > div:last-child { padding-top: clamp(0px, 8vw, 118px); }
@media (max-width: 960px) { .svc-split > div:last-child { padding-top: 0; } }
.feature { margin-top: 36px; border: 2px solid var(--ink); display: grid; grid-template-columns: minmax(0, 1fr); }
.feature-pic img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 16 / 9; }
.feature-body { padding: clamp(20px, 2.5vw, 30px); display: flex; flex-direction: column; gap: 12px; border-top: 2px solid var(--ink); }
.feature-body p { margin: 0; color: var(--ink-soft); }
.feature-price { margin-top: auto !important; font-family: var(--display); font-weight: 700; color: var(--ink) !important; }
.feature-price span { background: var(--yellow); padding: 2px 6px; }
.svc-rows { list-style: none; margin: 0 0 26px; padding: 0; border-top: 2px solid var(--ink); }
.svc-rows a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 18px 6px; border-bottom: 2px solid var(--ink); text-decoration: none; isolation: isolate; }
.svc-rows a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--pull); }
.svc-rows a:hover::before { transform: scaleX(1); }
.svc-name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.svc-price { font-size: 0.9rem; color: var(--ink-soft); text-align: right; }
@media (max-width: 960px) { .svc-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .svc-rows a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; } .svc-rows .svc-name { grid-column: 1; } .svc-rows .svc-price { grid-column: 1; grid-row: 2; text-align: left; } .svc-rows .arr { grid-column: 2; grid-row: 1 / span 2; } }

/* Reinigungs-Planer ----------------------------------------------------- */
.planner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.planner fieldset { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.planner legend { font-family: var(--display); font-weight: 700; font-size: 1rem; margin-bottom: 12px; padding: 0; }
.seg { display: grid; border: 2px solid var(--ink); background: var(--white); }
.seg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.seg label { position: relative; cursor: pointer; min-width: 0; }
.seg label + label { border-left: 2px solid var(--ink); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg span { display: block; text-align: center; padding: 13px 6px; font-weight: 600; font-size: 0.94rem; line-height: 1.25; transition: background-color 150ms linear, color 150ms linear; overflow-wrap: anywhere; hyphens: auto; }
.seg label:hover span { background: var(--mist); }
@media (max-width: 400px) { .seg span { font-size: 0.84rem; padding: 12px 3px; } }
.seg input:checked + span { background: var(--ink); color: var(--white); }
.seg input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; position: relative; z-index: 1; }
@media (max-width: 640px) { .seg-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .seg-5 label:nth-child(4) { border-left: 0; } .seg-5 label:nth-child(n+4) { border-top: 2px solid var(--ink); } .seg-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .seg-4 label:nth-child(3) { border-left: 0; } .seg-4 label:nth-child(n+3) { border-top: 2px solid var(--ink); } }
.area { display: flex; align-items: center; gap: 18px; background: var(--white); border: 2px solid var(--ink); padding: 14px 18px; }
.area input[type="range"] { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; height: 4px; background: var(--ink); margin: 0; cursor: pointer; }
.area input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; background: var(--yellow); border: 2px solid var(--ink); }
.area input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 0; }
.area-out { font-family: var(--display); font-weight: 800; font-size: 1.4rem; min-width: 5.2em; text-align: right; }
.plan-card { background: var(--white); border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); padding: clamp(22px, 3vw, 32px); }
.plan-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin-bottom: 14px; font-family: var(--display); font-size: 1.15rem; }
.pill { font-family: var(--body); font-size: 0.76rem; font-weight: 600; border: 2px solid var(--ink); padding: 2px 8px; white-space: nowrap; }
.plan-card dl { margin: 0 0 18px; }
.plan-card dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-strong); }
.plan-card dt { color: var(--ink-soft); }
.plan-card dd { margin: 0; font-weight: 600; }
.plan-card .total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 16px; align-items: baseline; }
.plan-card .total dt { color: var(--ink); font-weight: 600; }
.plan-card .total dd { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.4rem); background: var(--yellow); padding: 0 8px; line-height: 1.2; }
.fine { font-size: 0.84rem; color: var(--ink-soft); }
.plan-card .btn { width: 100%; justify-content: center; }
@media (max-width: 900px) { .planner { grid-template-columns: minmax(0, 1fr); } .plan-card { box-shadow: 6px 6px 0 var(--ink); } }

/* Raum-Checkliste ------------------------------------------------------- */
.check-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.check-split .lede { margin-top: 18px; }
.check-pic { margin-top: 28px; max-width: 340px; border: 2px solid var(--ink); }
@media (max-width: 900px) { .check-split { grid-template-columns: minmax(0, 1fr); } .check-pic { display: none; } }
.room-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.room-tabs button { background: var(--white); border: 2px solid var(--ink); padding: 8px 14px; font-weight: 600; font-size: 0.92rem; cursor: pointer; }
.room-tabs button:hover { background: var(--mist); }
.room-tabs button[aria-selected="true"] { background: var(--ink); color: var(--white); }
.sheet-paper { background: var(--white); border: 2px solid var(--ink); padding: 8px clamp(16px, 2.5vw, 28px); }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line-strong); }
.checks li:last-child { border-bottom: 0; }
.box { width: 24px; height: 24px; border: 2px solid var(--ink); display: grid; place-items: center; background: var(--white); transition: background-color 120ms linear; transition-delay: calc(var(--i, 0) * 150ms); }
.ck { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: square; }
.box .ck path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 260ms var(--out); transition-delay: calc(var(--i, 0) * 150ms + 60ms); }
.checks li.on .box { background: var(--yellow); }
.checks li.on .box .ck path { stroke-dashoffset: 0; }

/* Schritte -------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid currentColor; }
.steps li { padding: 26px clamp(14px, 2vw, 26px) 10px 0; }
.steps li + li { padding-left: clamp(14px, 2vw, 26px); border-left: 2px solid rgba(255, 255, 255, 0.18); }
.steps-light li + li { border-left-color: var(--line-strong); }
.step-no { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--yellow); color: var(--yellow); font-family: var(--display); font-weight: 800; font-size: 1.2rem; margin-bottom: 18px; }
.steps-light .step-no { border-color: var(--ink); color: var(--ink); background: var(--yellow); }
.steps h3 { margin-bottom: 10px; }
.steps p { color: #c9cee6; margin: 0; }
.steps-light p { color: var(--ink-soft); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps li:nth-child(3) { padding-left: 0; border-left: 0; } .steps li:nth-child(n+3) { border-top: 2px solid rgba(255, 255, 255, 0.18); margin-top: 10px; } .steps-light li:nth-child(n+3) { border-top-color: var(--line-strong); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } .steps li + li { padding-left: 0; border-left: 0; border-top: 2px solid rgba(255, 255, 255, 0.18); margin-top: 0; } .steps-light li + li { border-top-color: var(--line-strong); } }

/* Stimmen --------------------------------------------------------------- */
.rv-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.rv { margin: 0; border-top: 2px solid var(--ink); padding-top: 22px; }
.rv blockquote { margin: 0 0 16px; font-size: 1.08rem; line-height: 1.55; }
.rv-big blockquote { font-family: var(--display); font-weight: 700; font-size: clamp(1.45rem, 2.6vw, 2.1rem); line-height: 1.22; letter-spacing: -0.015em; }
.rv figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.9rem; color: var(--ink-soft); }
.rv figcaption b { color: var(--ink); background: var(--yellow); padding: 0 6px; }
.rv-stack { display: grid; gap: 36px; }
.rv-all { columns: 2 340px; column-gap: clamp(28px, 5vw, 64px); }
.rv-all .rv { break-inside: avoid; margin-bottom: 40px; }
.rv-all .rv:nth-child(3n + 1) blockquote { font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1.3; }
@media (max-width: 860px) { .rv-grid { grid-template-columns: minmax(0, 1fr); } }

/* Abschluss-Zeile ------------------------------------------------------- */
.cta-row { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.cta-row > div:first-child { max-width: 760px; }
.cta-row .lede { margin-top: 14px; margin-bottom: 0; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }

/* Leistungen-Seite ------------------------------------------------------ */
.svcs { display: grid; }
.svc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 18px clamp(24px, 4vw, 56px); padding: clamp(32px, 4vw, 48px) 0; border-top: 2px solid var(--ink); scroll-margin-top: calc(var(--hdr-h) + 20px); }
.svc:last-child { border-bottom: 2px solid var(--ink); }
.svc-head { display: grid; gap: 10px; align-content: start; }
.svc-no { font-family: var(--display); font-weight: 800; font-size: 0.95rem; width: 40px; height: 40px; display: grid; place-items: center; background: var(--yellow); border: 2px solid var(--ink); }
.svc-head .svc-price { text-align: left; font-family: var(--display); font-weight: 700; color: var(--ink); margin: 0; }
.svc-body .lede { margin-bottom: 16px; }
.svc:target .svc-head h2 { background: var(--yellow); display: inline; }
.ticks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.ticks .ck { margin-top: 3px; }
.ticks-big li { font-size: 1.1rem; padding: 14px 0; border-bottom: 1px solid var(--line-strong); }
.svc-pic { border: 2px solid var(--ink); align-self: start; }
.svc-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 960px) { .svc, .svc.has-pic { grid-template-columns: minmax(0, 1fr); } .svc-pic { max-width: 480px; } }

/* Preise ---------------------------------------------------------------- */
.price-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.price-table th { text-align: left; font-family: var(--display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 4px; border-bottom: 2px solid var(--ink); }
.price-table th:last-child, .price-table td:last-child { text-align: right; white-space: nowrap; }
.price-table td { padding: 16px 4px; border-bottom: 1px solid var(--line-strong); vertical-align: top; }
.price-table td b { display: block; font-family: var(--display); font-size: 1.1rem; }
.price-table td span { color: var(--ink-soft); font-size: 0.92rem; }
.price-table td:last-child span { color: var(--ink); font-weight: 600; font-size: 1rem; }
.price-table tr:last-child td { border-bottom: 0; }
@media (max-width: 520px) { .price-table td:last-child { white-space: normal; min-width: 7.5em; } }
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; border: 2px solid var(--ink); }
.note { padding: clamp(20px, 2.5vw, 28px); }
.note + .note { border-left: 2px solid var(--ink); }
.note .ck { width: 26px; height: 26px; background: var(--yellow); border: 2px solid var(--ink); padding: 2px; margin-bottom: 14px; }
.note h3 { margin-bottom: 8px; }
.note p { margin: 0; color: var(--ink-soft); }
@media (max-width: 820px) { .notes { grid-template-columns: minmax(0, 1fr); } .note + .note { border-left: 0; border-top: 2px solid var(--ink); } }

/* Ablauf ---------------------------------------------------------------- */
.prep { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.prep li { border-top: 2px solid var(--ink); padding-top: 20px; }
.prep h3 { margin-bottom: 10px; }
.prep p { color: var(--ink-soft); margin: 0; }
@media (max-width: 820px) { .prep { grid-template-columns: minmax(0, 1fr); } }
.sec-ink .pane { border-color: var(--yellow); }

/* Team ------------------------------------------------------------------ */
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 5vw, 64px); }
.person { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 22px; padding: 30px 0; border-top: 2px solid var(--ink); }
.ini { width: 76px; height: 76px; display: grid; place-items: center; background: var(--yellow); border: 2px solid var(--ink); font-family: var(--display); font-weight: 800; font-size: 1.5rem; }
.person:nth-child(even) .ini { background: var(--ink); color: var(--yellow); }
.role { font-weight: 600; color: var(--ink-soft); margin: 6px 0 10px; }
.person p:last-child { margin: 0; }
@media (max-width: 820px) { .people { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .person { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; } .ini { width: 56px; height: 56px; font-size: 1.15rem; } }
.rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.rules li { padding: 26px clamp(14px, 2vw, 26px) 0 0; }
.rules li + li { padding-left: clamp(14px, 2vw, 26px); border-left: 2px solid var(--ink); }
.rules .ck { width: 30px; height: 30px; background: var(--white); border: 2px solid var(--ink); padding: 3px; margin-bottom: 14px; }
.rules h3 { margin-bottom: 8px; }
.rules p { margin: 0; }
@media (max-width: 820px) { .rules { grid-template-columns: minmax(0, 1fr); } .rules li + li { padding-left: 0; border-left: 0; border-top: 2px solid var(--ink); margin-top: 26px; } }

/* Über uns -------------------------------------------------------------- */
.about-pic { border: 2px solid var(--ink); }
.about-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.years { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--yellow); }
.years li { padding: 24px clamp(14px, 2vw, 26px) 0 0; }
.years li + li { padding-left: clamp(14px, 2vw, 26px); border-left: 2px solid rgba(255, 255, 255, 0.18); }
.yr { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--yellow); line-height: 1; margin-bottom: 14px; }
.years h3 { margin-bottom: 8px; }
.years p { color: #c9cee6; margin: 0; }
@media (max-width: 900px) { .years { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; } .years li:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 480px) { .years { grid-template-columns: minmax(0, 1fr); } .years li + li { padding-left: 0; border-left: 0; } }

/* Formular -------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 22px; }
.full { grid-column: 1 / -1; }
.field label, .field .lbl { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 8px; }
.field input, .field select, .field textarea { width: 100%; background: var(--white); border: 2px solid var(--ink); border-radius: 0; padding: 12px 14px; transition: background-color 150ms linear; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: #fffbd9; box-shadow: 4px 4px 0 var(--ink); }
.field textarea { min-height: 110px; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--white); border: 2px solid var(--ink); padding: 8px 12px; font-weight: 500; font-size: 0.9rem; cursor: pointer; }
.chip:hover { background: var(--mist); }
.chip[aria-pressed="true"] { background: var(--yellow); font-weight: 600; }
.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 0.9rem; color: var(--ink-soft); cursor: pointer; position: relative; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.check .box { transition-delay: 0ms; }
.check .box .ck path { transition-delay: 0ms; }
.check input:checked + .box { background: var(--yellow); }
.check input:checked + .box .ck path { stroke-dashoffset: 0; }
.check input:focus-visible + .box { outline: 3px solid var(--ink); outline-offset: 2px; }
.form-hint { color: #a3221c; margin: 0; font-weight: 600; }
.form-hint:empty { display: none; }
.demo-note { margin-top: 22px; font-size: 0.86rem; color: var(--ink-soft); border-left: 4px solid var(--yellow); padding-left: 14px; }
.sent { display: none; margin-top: 22px; background: var(--yellow); border: 2px solid var(--ink); padding: 18px 20px; }
.sent.on { display: block; }
.sent:focus { outline: 3px solid var(--ink); outline-offset: 3px; }
.side h2 + p { margin-top: 8px; }
.plan-recap { background: var(--yellow); border: 2px solid var(--ink); padding: 16px 18px; margin-bottom: 30px; }
.plan-recap .tag { margin-bottom: 8px; }
.plan-recap p { margin: 0; font-weight: 600; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.hours { border-collapse: collapse; width: 100%; max-width: 360px; font-size: 0.92rem; }
.hours td { padding: 6px 0; border-bottom: 1px solid var(--line-strong); }
.hours td:last-child { text-align: right; }
.hours tr.today td { font-weight: 700; }
.hours tr.today td:first-child::after { content: attr(data-today); margin-left: 8px; font-size: 0.7rem; font-weight: 700; background: var(--yellow); color: var(--ink); padding: 1px 6px; text-transform: uppercase; letter-spacing: 0.05em; }

/* Rechtliches ----------------------------------------------------------- */
.legal { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); }
.legal aside { position: sticky; top: calc(var(--hdr-h) + 24px); align-self: start; display: grid; gap: 8px; }
.legal aside a { text-decoration: none; font-family: var(--display); font-weight: 700; border-left: 4px solid var(--yellow); padding-left: 12px; }
.legal section { scroll-margin-top: calc(var(--hdr-h) + 24px); margin-bottom: 56px; }
.legal h3 { font-family: var(--display); font-size: 1.05rem; margin: 26px 0 8px; }
.legal p { color: var(--ink-soft); max-width: 68ch; }
@media (max-width: 860px) { .legal { grid-template-columns: minmax(0, 1fr); } .legal aside { position: static; display: flex; gap: 18px; } }

/* Fußzeile -------------------------------------------------------------- */
.foot { background: var(--ink); color: #dfe2f1; padding: clamp(56px, 7vw, 88px) 0 30px; }
.foot .brand-mark { background: var(--yellow); }
.foot .brand-mark::after { background: var(--ink); }
.foot .brand b { color: var(--white); }
.foot .brand small { color: #aab1d2; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 56px); }
.foot-grid > div > p { margin-top: 18px; font-size: 0.94rem; max-width: 36ch; }
.foot h4 { font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.94rem; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .hours td { border-color: rgba(255, 255, 255, 0.16); }
.foot .dim { color: #aab1d2; margin-top: 12px; }
.foot-demo { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.16); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 0.84rem; color: #aab1d2; }
.foot-demo strong { color: var(--white); }
@media (max-width: 960px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* Weniger Bewegung ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .js [data-rv], .js .hero [data-hero] { opacity: 1 !important; transform: none !important; }
  .js [data-lift] > *, .js [data-wipe] .w { clip-path: none !important; }
  .js [data-wipe]::after { display: none; }
  .box, .box .ck path, .btn::before, .sheet { transition: none !important; }
}