/* generated by scripts/build-css.mjs, do not edit: edit public/assets/{base.css,scenes.css,desktop.css,mobile.css} and run npm run build */
/* ======== base.css (source: public/assets/base.css, bundled by scripts/build-css.mjs) ======== */
/* Bartolucci Digital – shared tokens, fonts, reset, header, shared sections, legal pages.
   Palette sampled from demo video v9 (see REPORT.md): film navy, accent sky-blue gradient of the
   "Machen wir." bubble, demo-site cream, end-card harbour sky. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400-normal.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-600-normal.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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/inter-latin-800-normal.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;
}

:root {
  /* from the film */
  --brand-ink: #141414;
  --brand-blue: #5a6592;
  --film-navy: #0f172a;
  --film-navy-deep: #0b1220;
  --film-accent: #38bdf8;
  --film-accent-deep: #1d78a6;
  --film-bubble: #fbfcfd;
  --demo-cream: #f1ece0;
  --demo-green: #234e3c;
  --demo-orange: #e0571b;
  --chat-green: #b9d39f;
  --end-sky: #96caeb;
  --end-water: #4c6c84;
  --end-glass: #2f3c4e;
  --end-crane: #3f678f;
  --end-brick: #8c422d;

  /* light theme (default) */
  --bg: #faf8f3;
  --bg-2: #f1ede4;
  --surface: #ffffff;
  --ink: #0f172a;
  --ink-2: #334155;
  --ink-3: #566274; /* 5.9:1 on --bg, 4.5:1 needed */
  --line: rgba(15, 23, 42, 0.12);
  --accent: #5a6592; /* logo blue */
  --accent-ink: #ffffff;
  --accent-soft: rgba(90, 101, 146, 0.14);
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.1);
  --panel-shadow: 0 2px 6px rgba(11, 18, 32, 0.25), 0 24px 60px rgba(11, 18, 32, 0.35), 0 60px 120px rgba(11, 18, 32, 0.2);
  --radius: 20px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* fluid width (v12): one container for every page. 1760 px is the cap up to ~2000 px viewports; above that
     the cap grows with the viewport (88 vw), so wide monitors keep ≤ 6 % margin per side instead of dead space */
  --content-max: max(1760px, 88vw);
  --gutter: clamp(20px, 4vw, 96px);
  /* readable line length for running text, wherever the column grows. 68ch would allow up to ~91 characters
     in Inter (its "0" is narrower than the ch-unit suggests for lower case), 58ch keeps lines ≤ 80 characters */
  --measure: 58ch;
  --header-h: 71px;
  /* scenes stand directly on the page background (no frame since v11), so they follow the theme */
  --sc-bubble: #ffffff;
  --sc-ink: #0b1324;
  --sc-edge: rgba(15, 23, 42, 0.08);
  --sc-shadow: 0 14px 34px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.06);
  /* the price card (v12): logo palette only – off-white one step darker than the page, black, logo blue */
  --price-bg: color-mix(in srgb, var(--bg) 92%, #141414);
  --price-hairline: rgba(20, 20, 20, 0.16);
  --price-line: rgba(20, 20, 20, 0.14);
  --price-ink: #141414;
  --price-text: #3a3a3a;
  --price-muted: #5f5f5f; /* 5.1:1 on --price-bg */
  --price-accent: #5a6592;
  --price-on-accent: #ffffff;
  color-scheme: light;
}
html[data-theme='dark'] {
  --bg: #0b1220;
  --bg-2: #0f172a;
  --surface: #141e33;
  --ink: #f8fafc;
  --ink-2: #cbd5e1;
  --ink-3: #94a3b8;
  --line: rgba(248, 250, 252, 0.14);
  --accent: #a3addb;
  --accent-ink: #0b1220;
  --accent-soft: rgba(163, 173, 219, 0.16);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  --panel-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --sc-bubble: #18233a;
  --sc-ink: #f1f5f9;
  --sc-edge: rgba(255, 255, 255, 0.09);
  --sc-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --price-bg: var(--surface);
  --price-hairline: #a3addb;
  --price-line: rgba(248, 250, 252, 0.14);
  --price-ink: #ffffff;
  --price-text: #cbd5e1;
  --price-muted: #94a3b8;
  --price-accent: #a3addb;
  --price-on-accent: #141414;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* v15: the paper is painted by html, body stays transparent, so the order is explicit: paper -> #bg -> content
   (before, body's background only stayed below #bg through propagation to the canvas) */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  position: relative;
  margin: 0;
  font-family: var(--font);
  font-size: clamp(17px, 0.5vw + 10px, 20px);
  line-height: 1.55;
  color: var(--ink);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }

/* ---------- background (v13, v15): paper grain + three soft colour fields, behind everything, on every page ----------
   v15: one layer over the whole document (not the viewport), so each field belongs to a place on the page: blue
   behind the hero, sand in between, blue at the price card. shared.js writes each field's vertical centre (--y,
   document px) from its anchor and drifts the fields a little with the scroll (off with reduced motion and in the
   mobile layout). The fields are plain radial gradients with a long soft falloff. Pure decoration: nothing clickable. */
/* v15.1 background: fog (variant 16). The layer is fixed to the viewport, so the fields stay put while scrolling.
   shared.js still writes --y and a drift transform; neither is used here any more (transform is pinned below). */
/* v15.1 fix (variant 16, rebuilt in v16 from REPORT_website_v15_1_nebel): no live filter: blur() (233 ms per scroll
   frame in the software renderer, a hard ellipse on wide screens). Each field is a radial gradient with a Gaussian
   edge profile instead: full colour up to --fw/2 - 2.5 sigma, then the normal CDF over +-2.5 sigma, sigma = --s.
   The boxes sit at 0/0 and are placed with translate (left/top in % gave a mobile CLS of ~1). shared.js still looks
   for #bg .bg-f and finds nothing, so the fields stay put. */
#bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#bg .f {
  --s: clamp(80px, 7vw, 160px);
  --c: 90 101 146;
  position: absolute; left: 0; top: 0;
  width: calc(var(--fw) + 5 * var(--s)); height: calc(var(--fh) + 5 * var(--s));
  transform: translate(calc(var(--fx) - 50%), calc(var(--fy) - 50%));
  background: radial-gradient(closest-side,
    rgb(var(--c) / 1) calc(var(--fw) / 2 - 2.5 * var(--s)), rgb(var(--c) / 0.977) calc(var(--fw) / 2 - 2 * var(--s)),
    rgb(var(--c) / 0.933) calc(var(--fw) / 2 - 1.5 * var(--s)), rgb(var(--c) / 0.841) calc(var(--fw) / 2 - var(--s)),
    rgb(var(--c) / 0.692) calc(var(--fw) / 2 - 0.5 * var(--s)), rgb(var(--c) / 0.5) calc(var(--fw) / 2),
    rgb(var(--c) / 0.309) calc(var(--fw) / 2 + 0.5 * var(--s)), rgb(var(--c) / 0.159) calc(var(--fw) / 2 + var(--s)),
    rgb(var(--c) / 0.067) calc(var(--fw) / 2 + 1.5 * var(--s)), rgb(var(--c) / 0.023) calc(var(--fw) / 2 + 2 * var(--s)),
    rgb(var(--c) / 0) calc(var(--fw) / 2 + 2.5 * var(--s)));
}
#bg .f1 { --fw: 58vw; --fh: 66vw; --fx: 14vw; --fy: 12vh; opacity: 0.16; }
/* v16: the one big sand field (56 × 62 vw @ 86/30 %, 0.22) is split into two smaller, quieter ones */
#bg .f2 { --c: 201 163 106; --fw: 40vw; --fh: 46vw; --fx: 88vw; --fy: 22vh; opacity: 0.08; }
#bg .f4 { --c: 201 163 106; --fw: 36vw; --fh: 40vw; --fx: 70vw; --fy: 68vh; opacity: 0.08; }
#bg .f3 { --fw: 74vw; --fh: 46vw; --fx: 48vw; --fy: 104vh; opacity: 0.1; }
/* paper grain: greyscale SVG noise as a data: URI (CSP img-src 'self' data:), static */
#bg .grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.27; mix-blend-mode: multiply; /* v16: 0.16 -> 0.27 (0.24 gave only 1.44x the grain std-dev, the gate asks 1.6x) */
}
/* dark: blue from the logo's dark palette, grain screens instead of multiplying */
html[data-theme='dark'] #bg .f1, html[data-theme='dark'] #bg .f3 { --c: 163 173 219; opacity: 0.22; }
html[data-theme='dark'] #bg .f2, html[data-theme='dark'] #bg .f4 { opacity: 0.05; }
html[data-theme='dark'] #bg .grain { opacity: 0.14; mix-blend-mode: screen; }
@media (max-width: 767px) {
  #bg .f { --s: clamp(60px, 14vw, 110px); }
}
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
html[data-mode='desktop'] .on-mobile, html[data-mode='mobile'] .on-desktop { display: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -200px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--bg); border-radius: 10px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- type ---------- */
.h-display { font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; font-size: clamp(44px, 4.6vw, 92px); text-wrap: balance; }
.h-chapter { font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; font-size: clamp(32px, 3.2vw, 66px); text-wrap: balance; }
.h-section { font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; font-size: clamp(30px, 2.9vw, 60px); text-wrap: balance; }
.lead { font-size: clamp(18px, 1.2vw, 25px); color: var(--ink-2); max-width: var(--measure); }
.small { font-size: 14px; color: var(--ink-3); }
.key { font-weight: 800; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.02em; line-height: 1.15; }
.key .mark { color: var(--accent); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  will-change: transform;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { border-color: var(--line); background: transparent; color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-lg { padding: 16px 26px; font-size: 17px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--header-h);
  /* aligned with the content container on every width */
  padding: 0 max(var(--gutter), (100% - var(--content-max)) / 2);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.brand { display: inline-flex; align-items: center; flex: none; border-radius: 6px; }
.brand img { display: block; height: 36px; width: auto; }
.logo-dark, html[data-theme='dark'] .logo-light { display: none !important; }
html[data-theme='dark'] .logo-dark { display: block !important; }
html[data-mode='mobile'] .brand img { height: 28px; }
.header-right { display: flex; align-items: center; gap: 10px; }
.theme-toggle {
  width: 42px; height: 42px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent;
  display: inline-grid; place-items: center; cursor: pointer; transition: border-color 0.2s, transform 0.2s;
}
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .ico-moon { display: none; }
html[data-theme='dark'] .theme-toggle .ico-sun { display: none; }
html[data-theme='dark'] .theme-toggle .ico-moon { display: block; }

/* ---------- v19 (C3): main navigation, jump links to the sections ----------
   Wide screens: a row of text links left of the theme toggle, header height unchanged. Below 900 px and in the mobile
   layout shared.js sets .nav-compact on the header: the links move into a panel under the header, opened by the round
   menu button (aria-expanded, closes on link click, Escape, click outside, focus leaving). Without JS the links stay a
   row that scrolls sideways. "Kontakt" is a link only where the header has no Kontakt button (mobile layout). */
.main-nav { margin-left: auto; min-width: 0; }
.main-nav ul { display: flex; align-items: center; gap: 2px; }
.main-nav a { display: block; padding: 9px 12px; border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: color 0.2s, background 0.2s; }
.main-nav a:hover { color: var(--ink); background: var(--accent-soft); }
.main-nav a:focus-visible { border-radius: 999px; }
html:not([data-mode='mobile']) .main-nav-contact { display: none; }
html:not(.js) .main-nav { overflow-x: auto; }
.nav-toggle {
  display: none; width: 42px; height: 42px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent;
  place-items: center; cursor: pointer; transition: border-color 0.2s;
}
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nav-toggle .nt-x, .nav-toggle[aria-expanded='true'] .nt-bars { display: none; }
.nav-toggle[aria-expanded='true'] .nt-x { display: inline; }
html[data-mode='mobile'] .nav-toggle { width: 38px; height: 38px; }
.nav-compact .nav-toggle { display: inline-grid; }
.nav-compact .main-nav {
  position: absolute; left: 0; right: 0; top: 100%; margin: 0;
  padding: 8px max(var(--gutter), (100% - var(--content-max)) / 2) 16px;
  background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
}
.nav-compact:not(.nav-open) .main-nav { display: none; }
.nav-compact .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
.nav-compact .main-nav li + li { border-top: 1px solid var(--line); }
.nav-compact .main-nav a { padding: 14px 4px; border-radius: 6px; font-size: 17px; color: var(--ink); }
.nav-compact .main-nav a:hover { background: transparent; color: var(--accent); }

/* ---------- feature lists: the only list style for features on the whole site ----------
   hairline-separated rows, lead clause (marked up as <strong>) semibold, no markers, no icons */
.facts { list-style: none; margin: 0; padding: 0; }
.facts > li { padding: 12px 0; border-top: 1px solid var(--line); text-align: left; color: var(--ink-2); }
.facts > li:last-child { border-bottom: 1px solid var(--line); }
.facts > li strong { font-weight: 600; color: var(--ink); }

/* ---------- shared sections ---------- */
/* one fluid container for all sections, pages and the scroll area (v12) */
.wrap { width: min(100% - 2 * var(--gutter), var(--content-max)); margin-inline: auto; }
/* v19: jump targets stop 8 px below the sticky header (71 px) */
.section { padding: clamp(72px, 7vw, 160px) 0; scroll-margin-top: calc(var(--header-h) + 8px); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { max-width: clamp(760px, 50vw, 1240px); margin-bottom: clamp(32px, 3vw, 72px); }
.section-head .lead { margin-top: 16px; }

/* ---------- "So läuft's": vertical timeline, a 1 px line in the left gutter, square time markers ----------
   the steps use the full container; the Du / Wir columns keep a readable measure */
.timeline { position: relative; list-style: none; margin: 0; padding: 0; }
.timeline::before { content: ''; position: absolute; left: 118px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.tl-step { position: relative; display: grid; grid-template-columns: 118px minmax(0, 1fr); }
.tl-step + .tl-step { margin-top: clamp(40px, 4vw, 80px); }
.tl-when { position: relative; padding-right: 26px; text-align: right; font-weight: 600; font-size: 15px; color: var(--ink-3); line-height: 1.6; font-variant-numeric: tabular-nums; }
.tl-mark { position: absolute; right: -5px; top: 7px; width: 10px; height: 10px; border-radius: 2px; background: var(--accent); }
.tl-body { padding-left: 34px; }
.tl-body h3 { font-size: clamp(24px, 1.5vw, 32px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.tl-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px clamp(40px, 4vw, 120px); margin: 14px 0 0; }
.tl-cols dd, .tl-result p { max-width: var(--measure); }
.tl-cols dt { font-weight: 600; color: var(--ink); }
.tl-cols dd { margin: 2px 0 0; color: var(--ink-2); }
.tl-result { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-2); }
.tl-result strong { font-weight: 600; color: var(--ink); }
.tl-draw { width: 64px; height: 50px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tl-draw .tl-fill { fill: var(--accent); stroke: none; }

/* ---------- prices: introductory price card ---------- */
.price-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.price-copy .lead { margin-top: 16px; }
/* v12: logo palette only (blue #5a6592 / dark #a3addb, black #141414, the warm off-white), hairline, no shadow;
   the card may grow with the column, its text stays on the readable measure */
.price {
  padding: clamp(28px, 2.8vw, 56px); border-radius: 24px;
  background: var(--price-bg); border: 1px solid var(--price-hairline); color: var(--price-ink);
}
.price-h { max-width: var(--measure); font-size: clamp(22px, 1.6vw, 34px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--price-ink); text-wrap: balance; }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px clamp(20px, 2vw, 40px); margin-top: clamp(16px, 1.6vw, 32px); }
.price-now { font-weight: 800; font-size: clamp(56px, 5vw, 96px); letter-spacing: -0.04em; line-height: 1; color: var(--price-accent); }
.price-reg { display: grid; gap: 2px; color: var(--price-muted); }
.price-reg s { font-size: clamp(22px, 1.6vw, 32px); font-weight: 600; text-decoration-thickness: 2px; }
.price-reg span { font-size: clamp(14px, 0.8vw, 17px); }
.price-avail { margin-top: clamp(14px, 1.2vw, 24px); color: var(--price-ink); }
.price .facts { margin-top: clamp(20px, 1.8vw, 36px); max-width: var(--measure); }
.price .facts > li { color: var(--price-text); border-color: var(--price-line); }
.price .facts > li strong { color: var(--price-ink); }
.price .btn { margin-top: clamp(24px, 2vw, 40px); }
/* v13: asterisk on the website prices (same colour as the number, 60 %), footnote below the card, outside it */
.price-star { font-size: 0.6em; color: inherit; vertical-align: super; line-height: 0; margin-left: 0.04em; }.price-note { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); text-align: left; max-width: var(--measure); }
/* v17: --ink-3 on the dark background measured 4.11:1 (qa-v15, below AA 4.5); the footnote uses --ink-2 there */
html[data-theme='dark'] .price-note { color: var(--ink-2); }
.price .btn-primary { background: var(--price-accent); color: var(--price-on-accent); }
.price .btn-primary:hover { background: var(--price-ink); color: var(--price-bg); }
/* v18.1: "opens elsewhere" icon in the mail button; the footnote runs the full width of the column (one line) */
.btn-ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.price-note { max-width: none; }
/* v19.2: FAQ links next to the price (the FAQ is a separate page, not a jump target of the header nav) */
.price-faq { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); max-width: 420px; grid-column: 1; grid-row: 2; }
.price-wrap { row-gap: 0; grid-template-rows: auto 1fr; }
.price-wrap > .price-col { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 900px) {
  .price-wrap { row-gap: clamp(32px, 5vw, 80px); grid-template-rows: none; }
  .price-wrap > .price-col, .price-faq { grid-column: auto; grid-row: auto; }
  .price-faq { margin-top: 0; }
}
.price-faq-h { margin: 0 0 8px; font-weight: 700; color: var(--ink); }
.price-faq ul { list-style: none; margin: 0; padding: 0; }
.price-faq li { margin: 0; }
.price-faq li a { display: block; padding: 7px 0; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.price-faq li a:hover { color: var(--ink); text-decoration-color: var(--accent); }
.price-faq-all { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--accent); text-underline-offset: 3px; }


/* ---------- about: two person cards, photos load from fixed file names, initials tile as fallback ---------- */
.team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 2vw, 48px); }
.person { display: grid; grid-template-columns: clamp(148px, 9vw, 240px) minmax(0, 1fr); gap: clamp(24px, 2vw, 40px); align-items: start; padding: clamp(24px, 2vw, 40px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.person-text p { max-width: var(--measure); }
/* v16: one image box for both people (4:5, same width, top flush with the name line). The photos are square
   (scripts/team-images.mjs, 960 × 960); the framing is a zoom about a transform origin: by default 1.25 from the
   bottom centre, which puts the eyes of a frontal head-and-neck photo (like luca.jpg) at ~37 % of the box.
   A new photo in that framing is a pure file swap. */
.card-photo-box {
  position: relative; width: clamp(148px, 9vw, 240px); aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--bg-2);
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent); mask-image: linear-gradient(to bottom, #000 88%, transparent);
}
/* v17.1: very light inner ring so the white photo background does not read as a pasted square on the card */
.card-photo-box::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(20 20 20 / 6%); pointer-events: none; }
/* v19.1: the photos are cut out (transparent WebP/AVIF), the box paints the backdrop. Light: white as before. Dark: no
   white square any more, a soft lift of the card colour with a faint accent glow behind the head. */
.card-photo-box { background: #fff; }
html[data-theme='dark'] .card-photo-box {
  background: radial-gradient(120% 70% at 50% 34%, rgba(163, 173, 219, 0.20), rgba(163, 173, 219, 0) 70%), linear-gradient(#1b2740, #141e33);
}
html[data-theme='dark'] .card-photo-box::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
/* v18 (audit M16): the <picture> (AVIF / WebP sources, JPEG fallback) is no box of its own, the img keeps the framing */
.card-photo-box picture { display: contents; }
.card-photo {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  transform: scale(var(--photo-zoom, 1)); transform-origin: var(--photo-origin, 50% 100%);
}
/* v17.1: full hair visible. The files are square (960 × 960) and the 4:5 box shows the full height, so zoom 1 shows
   everything. cederic.jpg: hair top 5.8 %, eyes 53.5 %, chin ~90.5 % of the height, zoom 1 (default). luca.jpg: hair top
   9.5 %, eyes 50.5 %, chin ~87.5 % (smaller head), so zoom 1.09 about 50% 16%: head height equal (~85 % of the box), eyes at
   ~53.6 % in both, hair top at 8.9 %; the box stays filled at the bottom and sides (origin above 0, zoom above 1). */
/* v19.1: luca.webp is re-cut from the original photo with room below the chin. At zoom 1 his face is ~15 % smaller
   than Cederic's (eyes 52 %, chin 81 %), so a zoom of 1.14 about the eye line: eyes stay at 52 %, chin at ~85 %, i.e.
   above the bottom fade that starts at 88 % (the old 1.09 about 16 % pushed the chin to ~94 %, into the fade). */
/* v19.2: both masters now carry their framing (assets-src/team, zoom 1, no per-person rule). luca.png: BiRefNet cut-out,
   eyes at 52 %, chin at ~86 %, above the bottom fade from 88 %; his shirt is faded out inside the file (88-97 %). */
.card-photo--fallback { transform: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 40px; letter-spacing: -0.03em; }
.person h3 { font-size: clamp(21px, 1.3vw, 28px); font-weight: 800; letter-spacing: -0.02em; }
.person-role { margin-top: 2px; font-weight: 600; color: var(--accent); }
.person-text p + p { margin-top: 10px; }
.person-text p:last-child { color: var(--ink-2); }

/* ---------- "morgens" (v13, replaces the /automatisierung teaser): two columns like the story, text left
   ~44 %, the small DOM scene right ~56 % (scenes.css); stacked on narrow screens, text first ---------- */
.morgens-wrap { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: clamp(32px, 4vw, 96px); align-items: center; }
.morgens-copy .lead { margin-top: 16px; }
.morgens-copy .lead + .lead { margin-top: 12px; }
.morgens-link { margin-top: 22px; font-weight: 600; }
.morgens-link a { color: var(--accent); text-underline-offset: 3px; }
.morgens-fig { position: relative; width: 100%; aspect-ratio: 920 / 540; }
.morgens-fig .stage { position: absolute; inset: 0; }

/* ---------- skyline behind the contact section: three parallax layers, the ship drifts right -> left ---------- */
.skyline { position: absolute; left: 0; right: 0; bottom: 0; height: min(38vw, 340px); z-index: 1; pointer-events: none; }
.sky-layer { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; color: var(--end-glass); fill: currentColor; opacity: 0.2; will-change: transform; }
.sky-layer.sky-cranes { color: var(--end-crane); opacity: 0.32; }
.sky-layer.sky-ship { color: var(--film-navy); opacity: 0.3; }
html[data-theme='dark'] .sky-layer { color: var(--end-sky); opacity: 0.12; }
html[data-theme='dark'] .sky-layer.sky-cranes { opacity: 0.22; }
html[data-theme='dark'] .sky-layer.sky-ship { color: var(--end-sky); opacity: 0.22; }
.ship-drift { animation: ship-drift 135s linear infinite; }
@keyframes ship-drift { from { transform: translateX(2100px); } to { transform: translateX(-800px); } }
@media (prefers-reduced-motion: reduce) { .ship-drift { animation-play-state: paused; } }
/* gulls + cars on the Koehlbrandbruecke (inline SVG in .skyline, same parallax depth as the city layer) */
.sky-layer { overflow: visible; }
.skyline { overflow-x: clip; }
.sky-car { animation: sky-drive 96s linear infinite; }
.sky-car.rev { animation-duration: 114s; animation-direction: reverse; }
@keyframes sky-drive { 0% { transform: translate(-446px, 300.4px) rotate(-5.05deg); } 4.17% { transform: translate(-342.17px, 291.62px) rotate(-4.63deg); } 8.33% { transform: translate(-238.33px, 283.59px) rotate(-4.21deg); } 12.5% { transform: translate(-134.5px, 276.34px) rotate(-3.79deg); } 16.67% { transform: translate(-30.67px, 269.84px) rotate(-3.37deg); } 20.83% { transform: translate(73.17px, 264.12px) rotate(-2.95deg); } 25% { transform: translate(177px, 259.15px) rotate(-2.53deg); } 29.17% { transform: translate(280.83px, 254.95px) rotate(-2.11deg); } 33.33% { transform: translate(384.67px, 251.51px) rotate(-1.69deg); } 37.5% { transform: translate(488.5px, 248.84px) rotate(-1.26deg); } 41.67% { transform: translate(592.33px, 246.93px) rotate(-0.84deg); } 45.83% { transform: translate(696.17px, 245.78px) rotate(-0.42deg); } 50% { transform: translate(800px, 245.4px) rotate(0deg); } 54.17% { transform: translate(903.83px, 245.78px) rotate(0.42deg); } 58.33% { transform: translate(1007.67px, 246.93px) rotate(0.84deg); } 62.5% { transform: translate(1111.5px, 248.84px) rotate(1.26deg); } 66.67% { transform: translate(1215.33px, 251.51px) rotate(1.69deg); } 70.83% { transform: translate(1319.17px, 254.95px) rotate(2.11deg); } 75% { transform: translate(1423px, 259.15px) rotate(2.53deg); } 79.17% { transform: translate(1526.83px, 264.12px) rotate(2.95deg); } 83.33% { transform: translate(1630.67px, 269.84px) rotate(3.37deg); } 87.5% { transform: translate(1734.5px, 276.34px) rotate(3.79deg); } 91.67% { transform: translate(1838.33px, 283.59px) rotate(4.21deg); } 95.83% { transform: translate(1942.17px, 291.62px) rotate(4.63deg); } 100% { transform: translate(2046px, 300.4px) rotate(5.05deg); } }
.sky-gull { animation: sky-bob 4s ease-in-out infinite alternate; }
@keyframes sky-bob { from { transform: translate(0, 0); } to { transform: translate(5px, -5px); } }
@media (prefers-reduced-motion: reduce) { .sky-car, .sky-gull { animation-play-state: paused; } }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.contact-lines { display: grid; gap: 14px; margin-top: 28px; }
.contact-line { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; font-weight: 600; font-size: 18px; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s; }
.contact-line:hover { border-color: var(--ink); }
/* v18.1: the box is a <div>; the link fills it (::after over the whole box), the copy icon sits inside, at the end */
.contact-line { position: relative; padding-right: 12px; }
.contact-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: inherit; color: inherit; text-decoration: none; }
.contact-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.contact-link:focus-visible { outline: none; }
.contact-line:has(.contact-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.copy-icon { position: relative; z-index: 1; flex: none; width: 36px; height: 36px; margin: -6px 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink-3); cursor: pointer; transition: background 0.2s, color 0.2s; }
.copy-icon:hover, .copy-icon:focus-visible { background: var(--line); color: var(--ink); }
.contact-line .copy-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.copy-icon .ci-done, .copy-icon.is-done .ci-copy { display: none; }
.copy-icon.is-done .ci-done { display: inline; }
.copy-icon.is-done { color: var(--accent); }
.contact-line svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.contact-line .small { font-weight: 400; margin-left: auto; flex: none; }
/* v15: the address never wraps; shared.js swaps in "Mail schreiben" when it does not fit */
.contact-val { min-width: 0; white-space: nowrap; overflow: hidden; }
html[data-mode='mobile'] .contact-val { font-size: 15px; }
.contact-copy .lead { margin-top: 16px; }
.contact-note { margin-top: 18px; color: var(--ink-3); font-size: 15px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 34px 0 48px; color: var(--ink-3); font-size: 14px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; gap: 22px; }
.site-footer .foot-brand { display: flex; align-items: center; gap: 10px; }
.site-footer .foot-brand img { width: 22px; height: 21px; flex: none; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- legal pages ---------- */
.legal { width: min(100% - 2 * var(--gutter), var(--content-max)); margin: 0 auto; padding: clamp(40px, 5vw, 120px) 0 clamp(56px, 7vw, 160px); }
.legal p, .legal ul { max-width: var(--measure); }
.legal h1 { font-weight: 800; letter-spacing: -0.035em; font-size: clamp(34px, 4.5vw, 56px); line-height: 1.04; margin-bottom: 28px; }
.legal h2 { font-weight: 800; letter-spacing: -0.02em; font-size: 20px; margin-top: 36px; margin-bottom: 8px; }
.legal p { color: var(--ink-2); margin-top: 8px; }
.legal ul { padding-left: 20px; list-style: disc; color: var(--ink-2); margin-top: 8px; }
.legal li { margin: 4px 0; }
.legal a { color: var(--accent); }
.legal .back { display: inline-block; margin-bottom: 20px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink-3); }
.legal .back:hover { color: var(--ink); }
.legal .foot { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }

@media (max-width: 1100px) {
  .team { grid-template-columns: 1fr; max-width: 640px; }
}
@media (max-width: 900px) {
  .contact, .price-wrap, .morgens-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .timeline::before { left: 5px; }
  .tl-step { grid-template-columns: 1fr; }
  .tl-when { padding: 0 0 0 30px; text-align: left; }
  .tl-mark { left: 0; right: auto; }
  .tl-body { padding-left: 30px; }
  .tl-cols { grid-template-columns: 1fr; }
  .tl-result { align-items: flex-start; }
  .person { grid-template-columns: 1fr; }
}

/* FAQ page (/faq): built on the .legal layout; questions are <details> so they open without JavaScript */
.faq .faq-lead { font-size: clamp(18px, 1.2vw, 22px); color: var(--ink-2); max-width: var(--measure); margin-top: 0; }
.faq-toc ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 28px 0 8px; max-width: none; }
.faq-toc li { margin: 0; }
.faq-toc a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink-2); }
.faq-toc a:hover { color: var(--ink); border-color: var(--accent); }
.faq-group { margin-top: 44px; max-width: 860px; scroll-margin-top: 96px; }
.faq-group h2 { margin: 0 0 12px; font-size: clamp(22px, 1.6vw, 28px); }
.faq-item { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin-top: 10px; scroll-margin-top: 96px; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; border-radius: 14px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-3px) rotate(45deg); transition: transform 0.2s; }
.faq-item[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq-item summary h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; color: var(--ink); }
.faq-a { padding: 0 20px 18px; }
.faq-a p { margin-top: 0; }
.faq-a p + p { margin-top: 10px; }
.faq-a p:first-child { color: var(--ink); font-weight: 600; }
.faq-cta { margin-top: 48px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-width: 860px; }
.faq-cta h2 { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } }

/* ======== scenes.css (source: public/assets/scenes.css, bundled by scripts/build-css.mjs) ======== */
/* The three DOM scenes (v11). No device frame, no panel: every scene has its own canvas (data-w × data-h in
   the markup: hook 640 × 760, website 1180 × 760, betreuung 1040 × 760) and is scaled into the stage by
   scenes.js, so all pixel values below are scene pixels. The CSS describes each scene's END state;
   scenes.js animates from the start states, so without JS or with reduced motion every scene is a static
   illustration. Generic UI only: no app names, no third-party logos, no status bars, no messenger colours.
   Device frames appear only as content (laptop + phone showing the demo site). */

.stage {
  position: relative; width: 100%; height: 100%;
  font-family: var(--font); color: var(--sc-ink); line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}
.stage * { box-sizing: border-box; }
.stage p { margin: 0; }
.stage svg { display: block; }
.scene { position: absolute; inset: 0; will-change: transform, opacity; }
.scene.is-hidden { visibility: hidden; }
.scene-fit { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.scene-in { position: absolute; inset: 0; }

/* start states from the first paint (v12, against the load flicker): the hook bubbles and the layers of the
   later scenes start hidden, gated on html.js (set in <head>); scenes.js / mobile.js animate from here.
   With reduced motion the scenes are static pictures: only the inactive ones stay hidden until desktop.js
   has picked the active scene (#stage.is-ready). */
@media (prefers-reduced-motion: no-preference) {
  html.js .stage .hk-b { opacity: 0; }
  html.js .stage .scene:not([data-scene='hook']) .scene-in { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.js #stage:not(.is-ready) .scene:not([data-scene='hook']) { visibility: hidden; }
}

/* ================================================================ chat bubbles (hook + betreuung) */
.hk-cam { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 0 22px; }
.hk-b {
  max-width: 500px; padding: 22px 28px;
  border-radius: 28px 28px 28px 8px;
  background: var(--sc-bubble); color: var(--sc-ink);
  box-shadow: var(--sc-shadow), inset 0 0 0 1px var(--sc-edge);
  font-weight: 600; font-size: 30px; line-height: 1.22; letter-spacing: -0.3px; text-wrap: balance;
  will-change: transform, opacity;
}
.hk-l { align-self: flex-start; transform-origin: 0% 100%; }
.hk-r { align-self: flex-end; border-radius: 28px 28px 8px 28px; transform-origin: 100% 100%; }
.hk-answer { background: #5a6592; color: #fff; box-shadow: var(--sc-shadow); }

/* ================================================================ website: laptop + phone with the demo site */
.ws-tag { position: absolute; left: 20px; top: 12px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 19px; font-weight: 600; color: var(--ink-3); }
.ws-laptop { position: absolute; left: 20px; top: 74px; width: 840px; }
.ws-lid { position: relative; padding: 14px; border-radius: 22px; background: #121418; box-shadow: 0 0 0 2px #5b626d, var(--sc-shadow); }
.ws-screen { position: relative; height: 507px; border-radius: 6px; overflow: hidden; background: #f1ece1; }
.ws-base { height: 22px; margin: 2px -26px 0; border-radius: 4px 4px 16px 16px; background: #9aa2ae; box-shadow: var(--sc-shadow); }
.ws-phone { position: absolute; left: 892px; top: 118px; width: 266px; height: 560px; padding: 8px; border-radius: 40px; background: #121418; box-shadow: 0 0 0 2px #5b626d, var(--sc-shadow); }
.ws-pscreen { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #f1ece1; }
/* v19.1: a phone that reads as a phone. Same outer size and screen (the demo stays 250 × 544), but: a thin metal
   band around the black glass edge (dark inner line, brushed light band, darker outer edge), a Dynamic Island on the
   screen, volume keys on the left and the side key on the right (outside the band, like the real thing). */
.ws-phone {
  border-radius: 42px; background: #07080a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 0 1px #2a2e35, 0 0 0 3.5px #a9afb8, 0 0 0 4.5px #646a73, var(--sc-shadow);
}
.ws-pscreen { border-radius: 34px; }
.ws-pscreen::before {
  content: ''; position: absolute; z-index: 5; top: 10px; left: 50%; width: 78px; height: 23px; margin-left: -39px;
  border-radius: 12px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
/* status bar: time left, signal and battery right; the demo page scrolls underneath it like on a real phone */
.ws-pscreen::after {
  content: '9:41'; position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 42px; padding: 15px 0 0 26px;
  font: 700 12px/1 var(--font); color: #1b1c1a; letter-spacing: -0.01em;
  background:
    linear-gradient(#1b1c1a, #1b1c1a) no-repeat right 25px top 17px / 18px 9px,
    linear-gradient(#1b1c1a, #1b1c1a) no-repeat right 22px top 20px / 2px 3px,
    linear-gradient(#1b1c1a, #1b1c1a) no-repeat right 50px top 23px / 3px 3px,
    linear-gradient(#1b1c1a, #1b1c1a) no-repeat right 54px top 21px / 3px 5px,
    linear-gradient(#1b1c1a, #1b1c1a) no-repeat right 58px top 19px / 3px 7px,
    linear-gradient(#1b1c1a, #1b1c1a) no-repeat right 62px top 17px / 3px 9px,
    #f1ece1;
}
.ws-pscreen > .demo-mob { top: 36px; } /* the page starts below the status bar; the last line still fits */
.ws-phone::before, .ws-phone::after {
  content: ''; position: absolute; width: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #7e848d, #c3c8cf 55%, #8a9099);
}
.ws-phone::after { left: -8px; top: 132px; height: 38px; box-shadow: 0 50px 0 0 #a3a9b2; } /* volume up, volume down */
.ws-phone::before { right: -8px; top: 158px; height: 62px; } /* side key */

/* the demo site keeps its v10 layout (408 × 255 desktop, 182 × 396 mobile) and is scaled into the bigger screens */
.demo { position: absolute; left: 0; top: 0; color: #1b1c1a; font-family: var(--font); transform-origin: 0 0; }
.demo i { font-style: normal; color: #e0561c; }
.demo .d-logo { display: block; font-weight: 800; letter-spacing: -0.02em; transform: scaleX(0.82); transform-origin: 0 50%; white-space: nowrap; }
.demo .d-logo i { color: #24503e; }
.demo .d-sub { color: #24503e; font-weight: 700; letter-spacing: 0.08em; }
.demo .d-h { font-weight: 800; letter-spacing: -0.03em; line-height: 0.92; transform: scaleX(0.8); transform-origin: 0 0; white-space: nowrap; }
.demo .d-btn { display: inline-block; padding: 6px 10px; border-radius: 3px; background: #24503e; color: #f1ece1; font-weight: 700; }
.demo-desk { width: 408px; height: 255px; padding: 14px 18px; transform: scale(1.99); }
.demo-desk .d-head { display: flex; align-items: baseline; justify-content: space-between; }
.demo-desk .d-logo { font-size: 15px; }
.demo-desk .d-nav { font-size: 8.5px; color: #3d3e3a; }
.demo-desk .d-sub { margin-top: 22px; font-size: 8.5px; }
/* v19 (C2): the demo's price line steps back (52 -> 38 px, softer ink), so a visitor reads it as part of a showcased
   design and not as our price; margin-bottom keeps the lines below where they were */
.demo .d-h { color: #5b5a54; }
.demo-desk .d-h { margin-top: 7px; margin-bottom: 13px; font-size: 38px; }
.demo-desk .d-copy { margin-top: 10px; width: 250px; font-size: 9.5px; line-height: 1.4; color: #3d3e3a; }
.demo-desk .d-row { margin-top: 14px; display: flex; align-items: center; gap: 14px; }
.demo-desk .d-btn { font-size: 9.5px; }
.demo .d-open { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; }
.demo .d-dot { width: 8px; height: 8px; border-radius: 50%; background: #2e8b57; }
.demo .d-flip { position: relative; display: inline-block; height: 13px; overflow: hidden; perspective: 200px; }
.demo .d-flip > span { display: block; line-height: 13px; backface-visibility: hidden; }
.demo .d-flip-a { position: absolute; left: 0; top: 0; transform: rotateX(90deg); opacity: 0; }
.demo-desk .d-sign { position: absolute; right: 20px; bottom: 26px; padding: 6px 9px; background: #e0561c; color: #000; font-weight: 800; font-size: 13px; line-height: 0.95; transform: rotate(-5deg); }

.demo-mob { width: 182px; height: 396px; overflow: hidden; transform: scale(1.3736); }
.demo-mob .d-scroll { position: absolute; left: 0; right: 0; top: 0; padding: 18px 14px; transform: translateY(-212px); }
.demo-mob .d-logo { font-size: 14.5px; }
.demo-mob .d-sub { margin-top: 26px; font-size: 7.5px; }
.demo-mob .d-h { margin-top: 8px; margin-bottom: 18px; font-size: 30px; }
.demo-mob .d-btn { margin-top: 16px; font-size: 10px; }
.demo-mob .d-hours { margin-top: 36px; }
.demo-mob .d-addr { margin-top: 16px; font-size: 11px; line-height: 1.45; }
.demo-mob .d-addr + .d-btn { margin-top: 12px; }
.d-hours { position: relative; }
.d-hours-h { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; transform: scaleX(0.82); transform-origin: 0 0; }
.d-hours ol { list-style: none; margin: 8px 0 0; padding: 0; }
.d-hours li { display: flex; justify-content: space-between; height: 30px; align-items: center; border-bottom: 1px solid rgba(27, 28, 26, 0.12); font-size: 11px; }
.d-today { position: absolute; left: -6px; right: -6px; top: 47px; height: 30px; border-radius: 4px; background: #1b1c1a; color: #f1ece1; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; display: flex; align-items: center; padding-left: 8px; }
.d-today::after { content: attr(data-day); position: absolute; right: 8px; font-size: 11px; letter-spacing: 0; font-weight: 700; }

.ws-inquiry {
  position: absolute; left: 50px; top: 566px; width: 580px; display: flex; align-items: center; gap: 18px;
  padding: 22px 26px; border-radius: 24px; background: #ffffff; color: #0f172a;
  box-shadow: var(--sc-shadow), inset 0 0 0 1px var(--sc-edge);
}
.wi-check { width: 44px; height: 44px; flex: none; fill: none; stroke: #2e8b57; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.wi-check path { stroke-dasharray: 34; stroke-dashoffset: 0; }
.wi-t { font-weight: 700; font-size: 25px; }
.wi-s { margin-top: 4px; font-size: 21px; color: #475569; }

/* ================================================================ betreuung: a change request, the hours update, quiet status */
.bt-ask { position: absolute; left: 0; top: 96px; width: 372px; font-size: 29px; padding: 22px 26px; }
.bt-done { position: absolute; right: 668px; top: 272px; font-size: 29px; padding: 18px 26px; }
.bt-card { position: absolute; left: 404px; top: 16px; width: 636px; height: 556px; padding: 30px 32px; border-radius: 26px; background: #f1ece1; box-shadow: var(--sc-shadow), inset 0 0 0 1px var(--sc-edge); }
.bt-demo { position: relative; width: 286px; transform: scale(2); }
.bt-mon > span:first-child { display: flex; align-items: center; gap: 6px; }
.bt-today { display: none; padding: 2px 5px; border-radius: 3px; background: #1b1c1a; color: #f1ece1; font-size: 7.5px; font-weight: 800; letter-spacing: 0.08em; }
.bt-mon.is-today { font-weight: 700; }
.bt-mon.is-today .bt-today { display: inline-block; }
.bt-flip { display: inline-grid; text-align: right; }
.bt-flip > span { grid-area: 1 / 1; }
.bt-old { opacity: 0; }
.bt-new { font-weight: 700; }
.bt-status {
  position: absolute; left: 0; right: 0; top: 628px; height: 92px;
  display: flex; align-items: center; justify-content: space-around;
  border-radius: 22px; background: var(--sc-bubble); box-shadow: inset 0 0 0 1px var(--sc-edge);
  font-size: 23px; font-weight: 600; color: var(--sc-ink);
}
.bt-item { display: flex; align-items: center; gap: 12px; }
.bt-item em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.bt-dot { position: relative; display: block; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--accent); }
.bt-dot b { position: absolute; inset: 0; border-radius: 50%; background: var(--accent); }
/* v19.3 (Variante C): map listing card. Stylised neutral map (no Google styling), own pin in the demo-shop look */
.bt-map {
  position: absolute; left: 14px; top: 372px; width: 358px; border-radius: 20px; overflow: hidden;
  background: #fff; color: #1b1c1a; box-shadow: var(--sc-shadow), inset 0 0 0 1px var(--sc-edge);
}
.bt-map-tile { position: relative; height: 104px; overflow: hidden; background: #e4dfd2; }
.bt-road { position: absolute; display: block; background: #fff; }
.bt-road-a { left: -20px; right: -20px; top: 42px; height: 13px; transform: rotate(-7deg); }
.bt-road-b { left: 168px; top: -30px; width: 13px; height: 170px; transform: rotate(14deg); }
.bt-block { position: absolute; display: block; border-radius: 6px; }
.bt-block-a { left: 32px; top: 70px; width: 118px; height: 26px; background: #cfd8c4; }
.bt-block-b { left: 214px; top: 14px; width: 86px; height: 22px; background: #d6cfbf; }
.bt-map-pin {
  position: absolute; left: 150px; top: 22px; width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: #5a6592; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.bt-map-pin svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.bt-map-body { padding: 14px 20px 16px; }
.bt-map-name { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.bt-map-hours { margin: 4px 0 0; font-size: 17px; color: #3d3e3a; }
.bt-map-ok { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #4a5584; }
.bt-map-ok svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ================================================================ morgens (v13): three small cards slide together into one
   morning message. Same bubble styling as the chat scenes. END state = the message alone (the cards have merged
   into it), so without JS or with reduced motion only the message shows. */
.mg-chip {
  position: absolute; margin: 0; padding: 20px 28px;
  border-radius: 26px 26px 26px 8px;
  background: var(--sc-bubble); color: var(--sc-ink);
  box-shadow: var(--sc-shadow), inset 0 0 0 1px var(--sc-edge);
  font-weight: 600; font-size: 30px; line-height: 1.2; letter-spacing: -0.3px; white-space: nowrap;
  opacity: 0; will-change: transform, opacity;
}
.mg-r { border-radius: 26px 26px 8px 26px; }
.mg-c1 { left: 24px; top: 26px; }
.mg-c2 { right: 24px; top: 232px; }
.mg-c3 { left: 84px; top: 440px; }
.mg-msg {
  position: absolute; left: 70px; right: 70px; top: 170px; padding: 34px 40px 38px;
  border-radius: 30px; background: var(--sc-bubble); color: var(--sc-ink);
  box-shadow: var(--sc-shadow), inset 0 0 0 1px var(--sc-edge);
  will-change: transform, opacity;
}
.mg-time { font-size: 21px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.mg-text { margin-top: 10px; font-size: 38px; font-weight: 700; line-height: 1.22; letter-spacing: -0.5px; text-wrap: balance; }


@media (prefers-reduced-motion: reduce) {
  .stage *, .stage { transition: none !important; }
}

/* ======== desktop.css (source: public/assets/desktop.css, bundled by scripts/build-css.mjs) ======== */
/* Desktop body: two-column scroll area (text left, sticky frameless stage right with the three DOM scenes),
   rail, chapter reveals, end hand-over, mouse effects. Only applied when <html data-mode="desktop">. */
html[data-mode='desktop'] body { overflow-x: clip; }
html[data-mode='mobile'] .story, html[data-mode='mobile'] .rail { display: none; }

/* ---------- scroll area ---------- */
.story {
  position: relative;
  display: grid;
  /* v12: fluid columns, the stage column is the wider one so the scenes (esp. the 1180 × 760 website) get big */
  grid-template-columns: minmax(360px, 44fr) 56px minmax(480px, 56fr);
  width: min(100% - 2 * var(--gutter), var(--content-max));
  margin-inline: auto;
}
.col-text { grid-column: 1; min-width: 0; }
.rail { grid-column: 2; }
.col-panel { grid-column: 3; min-width: 0; }

/* ---------- chapters (left) ----------
   v13: free flow. No pinned copy, no chapter heights: a chapter is as tall as its copy plus the padding. */
.chapter { position: relative; scroll-margin-top: calc(var(--header-h) + 8px); }
/* v16: every story chapter is one viewport tall, the copy centred in it, the extra height is empty paper
   (2-3 wheel notches per chapter). Below 1100 px the narrow layout resets this (min-height: 0 !important). */
@media (min-width: 1024px) {
  html[data-mode='desktop'] .chapter { min-height: 100vh; display: grid; align-content: center; }
}
/* v19: jump targets stop 8 px below the header, except the one-viewport chapters of the wide layout (the v16 settle
   range): they land at 0 like the rail and the settle, the header covers only their top padding */
@media (min-width: 1100px) {
  html[data-mode='desktop'] .chapter { scroll-margin-top: 0; }
}
.chapter-inner {
  position: relative;
  padding: clamp(96px, 12vh, 160px) clamp(16px, 4vw, 64px) clamp(96px, 12vh, 160px) 0;
}
.copy { width: 100%; max-width: clamp(560px, 36vw, 1100px); }
.copy .h-chapter { font-size: clamp(30px, 3.1vw, 64px); }
.copy .body { margin-top: clamp(20px, 1.4vw, 32px); color: var(--ink-2); font-size: clamp(16.5px, 0.6vw + 9px, 22px); }
.copy .body p { max-width: var(--measure); }
.copy .body p + p, .copy .body .clip + .clip { margin-top: 12px; }
.copy .facts { margin-top: 24px; max-width: var(--measure); }
.copy .demo-note { margin-top: 20px; font-size: clamp(14.5px, 0.75vw, 17px); color: var(--ink-3); max-width: var(--measure); }
.copy .more-link { margin-top: 14px; font-size: 15px; font-weight: 600; }
.copy .more-link a { color: var(--accent); text-underline-offset: 3px; }
.copy .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.chapter[data-chapter='hook'] .lead { margin-top: 22px; }

/* hero spotlight: faint grid revealed around the cursor */
.chapter[data-chapter='hook'] .chapter-inner::before {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(260px 260px at var(--mx, -400px) var(--my, -400px), rgba(0, 0, 0, 0.9), transparent 70%);
  mask-image: radial-gradient(260px 260px at var(--mx, -400px) var(--my, -400px), rgba(0, 0, 0, 0.9), transparent 70%);
  opacity: 0; transition: opacity 0.4s;
}
.chapter[data-chapter='hook'].has-spot .chapter-inner::before { opacity: 1; }

/* reveal start states (v12): every [data-beat] element starts hidden from the first paint, so nothing flashes
   before desktop.js has built its timelines. Gated on html.js (set synchronously in <head>): without JS the
   class is missing and everything stays visible; with reduced motion nothing is hidden. The tweens in
   desktop.js start from exactly these values. */
@media (prefers-reduced-motion: no-preference) {
  html.js[data-mode='desktop'] .chapter [data-beat]:not(ul),
  html.js[data-mode='desktop'] .chapter ul[data-beat] > li { opacity: 0; }
  html.js[data-mode='desktop'] .chapter li[data-beat],
  html.js[data-mode='desktop'] .chapter ul[data-beat] > li { transform: translateX(-14px); }
  html.js[data-mode='desktop'] #kontakt > .wrap { opacity: 0; transform: translateY(60px); }
  /* v13: the other sections after the story reveal once as well (desktop.js revealSection) */
  html.js[data-mode='desktop'] :is(#ablauf, #preise, #morgens, #ueber-uns) > .wrap > * { opacity: 0; transform: translateY(40px); }
}

/* word / line reveals (set up by JS, so without JS everything is simply visible) */
.copy .w { display: inline-block; will-change: transform, opacity; }
.copy .clip { overflow: hidden; }
.copy .clip > .line { display: block; will-change: transform; }

/* ---------- rail: fixed at the right edge, so it also reaches the sections after the scroll area ---------- */
.rail ol { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 30; display: grid; gap: 10px; justify-items: center; padding: 0; margin: 0; }
.rail a { position: relative; display: block; width: 28px; height: 28px; border-radius: 50%; text-decoration: none; }
.rail .dot { position: absolute; inset: 9px; border-radius: 50%; background: var(--ink-3); opacity: 0.45; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s, background 0.3s; }
.rail a:hover .dot, .rail a:focus-visible .dot { opacity: 1; transform: scale(1.25); }
.rail a[aria-current='true'] .dot { background: var(--accent); opacity: 1; transform: scale(1.4); }
.rail .rail-label {
  position: absolute; right: 100%; top: 50%; transform: translate(6px, -50%);
  padding: 5px 10px; border-radius: 8px; background: var(--ink); color: var(--bg);
  font-size: 12.5px; font-weight: 600; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.2s, transform 0.2s;
}
.rail a:hover .rail-label, .rail a:focus-visible .rail-label { opacity: 1; transform: translate(-2px, -50%); }
.rail a:focus-visible { outline-offset: 0; }

/* ---------- sticky stage (right): no frame, no panel, the scenes stand on the page background ---------- */
.col-panel { position: relative; }
.panel-sticky {
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h));
  padding: 24px 0 32px;
}
.panel-sticky .stage { will-change: transform, opacity; }
/* v17: light sweep during a scene change. One soft diagonal streak of paper white (18 % light, 10 % dark, no blur)
   crosses the stage left -> right in 0.5 s (power2.inOut); scrolling up runs it mirrored (.is-back). desktop.js
   restarts it by alternating data-sweep between two identical keyframe names. Transform + opacity only. */
#stage::after {
  content: ''; position: absolute; top: 0; left: 0; z-index: 3; width: 34%; height: 100%; pointer-events: none;
  /* the streak fades out on all four sides (gradient across, mask along), the slant comes from skewX */
  background: linear-gradient(90deg, transparent, rgb(250 248 243 / var(--sweep-a, 0.18)) 50%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  opacity: 0; transform: translateX(-110%) skewX(-16deg);
}
html[data-theme='dark'] #stage::after { --sweep-a: 0.10; }
#stage[data-sweep='a']::after { animation: stage-sweep-a 0.5s cubic-bezier(0.45, 0, 0.55, 1) 0.04s both; }
#stage[data-sweep='b']::after { animation: stage-sweep-b 0.5s cubic-bezier(0.45, 0, 0.55, 1) 0.04s both; }
#stage.is-back::after { animation-direction: reverse; }
@keyframes stage-sweep-a { 0% { opacity: 0; transform: translateX(-110%) skewX(-16deg); } 25%, 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(300%) skewX(-16deg); } }
@keyframes stage-sweep-b { 0% { opacity: 0; transform: translateX(-110%) skewX(-16deg); } 25%, 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(300%) skewX(-16deg); } }

/* v13: a little less air between the sections after the story (v12: clamp(72px, 7vw, 160px)), so the whole
   page stays within 6.5 viewport heights with the new "morgens" section */
html[data-mode='desktop'] .section:not(.section-contact) { padding: clamp(56px, 4.4vw, 128px) 0; }

/* ---------- contact section with the harbour skyline ---------- */
.section-contact { position: relative; overflow: hidden; padding-top: clamp(96px, 12vw, 180px); padding-bottom: clamp(200px, 22vw, 320px); }
/* v13: translucent, so the page background (#bg grain + fields) runs through this section too */
.section-contact::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg-2) 75%, transparent) 100%); z-index: 0; }
.section-contact .wrap { position: relative; z-index: 2; }

/* magnetic buttons (desktop + fine pointer only, set up by JS) */
.magnetic { will-change: transform; }

/* ---------- without JavaScript (v18): the copy is static HTML and reads top to bottom. The decorative stage (its scenes
   are sized by scenes.js) and the morning scene stay hidden, the text column takes the width, the rail still links. ---------- */
html:not(.js) .story { display: block; }
html:not(.js) .col-panel, html:not(.js) .morgens-fig { display: none; }

/* ---------- narrow desktop (< 1100 px): single column, stage on top ---------- */
@media (max-width: 1099px) {
  html[data-mode='desktop'] .story { grid-template-columns: 1fr; }
  html[data-mode='desktop'] .col-text, html[data-mode='desktop'] .col-panel { grid-column: 1; }
  html[data-mode='desktop'] .rail { display: none; }
  html[data-mode='desktop'] .col-panel { order: -1; position: sticky; top: var(--header-h); z-index: 5; background: var(--bg); }
  html[data-mode='desktop'] .panel-sticky { position: static; height: 46vh; padding: 16px 0; }
  html[data-mode='desktop'] .chapter { min-height: 0 !important; }
  html[data-mode='desktop'] .chapter-inner { position: static; min-height: 0; padding: 48px 0; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .copy .w, .copy .clip > .line { transform: none !important; opacity: 1 !important; }
  .rail .dot, .btn, .contact-line { transition: none; }
  #stage::after { display: none; }
}

/* ======== mobile.css (source: public/assets/mobile.css, bundled by scripts/build-css.mjs) ======== */
/* Mobile body (v11): chapter blocks, each with a small frameless stage (DOM scene, plays once on entry)
   above its text, sticky bottom CTA, then the normal sections. Only applied when <html data-mode="mobile">. */
html[data-mode='desktop'] .m-chapters, html[data-mode='desktop'] .m-cta { display: none; }

html[data-mode='mobile'] body { overflow-x: clip; }
html[data-mode='mobile'] .m-header { border-bottom-color: transparent; }
html[data-mode='mobile'] .m-header.is-past { border-bottom-color: var(--line); }
html[data-mode='mobile'] .m-header .theme-toggle { width: 38px; height: 38px; }

/* ---------- chapters ---------- */
.m-chapters { padding: 8px 0 24px; }
.m-card { padding: 28px 16px 20px; scroll-margin-top: calc(var(--header-h) + 8px); }
.m-card + .m-card { border-top: 1px solid var(--line); }
.m-stage { position: relative; width: 100%; max-height: 46svh; margin: 0 auto 22px; }
.m-stage .stage { position: absolute; inset: 0; }
.m-card .copy { width: 100%; }
.m-card .h-display { font-size: clamp(30px, 8.6vw, 38px); }
.m-card .h-chapter { font-size: clamp(26px, 7.2vw, 32px); }
.m-card .lead { margin-top: 12px; font-size: 16.5px; }
.m-card .body { margin-top: 12px; color: var(--ink-2); font-size: 16px; }
.m-card .body p + p { margin-top: 8px; }
.m-card .facts { margin-top: 16px; font-size: 15.5px; }
.m-card .demo-note { margin-top: 14px; font-size: 14px; color: var(--ink-3); }
.m-card .more-link { margin-top: 10px; font-size: 15px; font-weight: 600; }
.m-card .more-link a { color: var(--accent); }
.m-card .cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.m-card .cta-row .btn-lg { padding: 14px 20px; font-size: 16px; }

/* ---------- sections after the chapters ---------- */
html[data-mode='mobile'] .section { padding: 56px 0; }
html[data-mode='mobile'] .section-contact { position: relative; overflow: hidden; padding-top: 64px; padding-bottom: 170px; }
html[data-mode='mobile'] .section-contact .wrap { position: relative; z-index: 2; }
html[data-mode='mobile'] .skyline { height: 130px; }
html[data-mode='mobile'] .sky-layer { transform: none !important; }
html[data-mode='mobile'] .h-section { font-size: clamp(28px, 7.4vw, 34px); }
html[data-mode='mobile'] .lead { font-size: 16.5px; }
html[data-mode='mobile'] .contact-line { font-size: 15.5px; padding: 15px 16px; gap: 12px; }
html[data-mode='mobile'] .contact-line .small { display: none; }
html[data-mode='mobile'] .person { padding: 18px; gap: 16px; }
html[data-mode='mobile'] .card-photo-box { width: 120px; }
html[data-mode='mobile'] .site-footer { padding-bottom: 96px; }
html[data-mode='mobile'] .site-footer .wrap { flex-direction: column; align-items: flex-start; }

/* sticky bottom CTA */
.m-cta {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40;
  transform: translateX(-50%);
  padding: 14px 26px; font-size: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.3);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
}
.m-cta.is-hidden { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .m-cta { transition: none; }
}
html[data-mode='mobile'] .header-cta { display: none; }

/* v18 (audit M10): phone icon in the mobile header, a round button like the theme toggle (tel: link, 38 px); the
   desktop header keeps logo, toggle and "Kontakt" */
html[data-mode='desktop'] .header-tel { display: none; }
html[data-mode='mobile'] .header-tel { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1.5px solid var(--line); color: inherit; }
html[data-mode='mobile'] .header-tel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }