@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Signature under "Über mich": Hurricane (OFL, fonts/OFL-Hurricane.txt), cut to the
   letters of "Max Ehrlich", 3 KB. */
@font-face {
  font-family: "ME Signatur";
  src: url("../fonts/Signatur.woff2") format("woff2");
  font-display: swap;
}
/* Handwriting for the sketch notes in the concept project only. Static 560 instance,
   cut to Latin with umlauts (19 KB, OFL, fonts/OFL-Caveat.txt). */
@font-face {
  font-family: "Caveat";
  src: url("../fonts/Caveat-560.woff2") format("woff2");
  font-weight: 560;
  font-style: normal;
  font-display: swap;
}

:root {
  --sc-canvas:      #0B0B0C;
  --sc-surface:     #151517;
  --sc-ink:         #EDEAE4;
  --sc-ink-soft:    #A39E96;
  --sc-accent:      #E0A25E;
  --sc-accent-ink:  #0B0B0C;
  --sc-font-display: "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist", system-ui, sans-serif;
  --sc-t-base: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --sc-shadow-color: 240 6% 2%;
  --concept: linear-gradient(160deg, #3A7C72 0%, #1F4A45 55%, #12302D 100%);
  --online:         #4CC97A;
  --nav-h: 64px;
  /* Height of the ME. logo in the nav; width follows. Phones here, 900px and up below. */
  --logo-h: 24px;
}
@media (min-width: 900px) { :root { --nav-h: 72px; --logo-h: 36px; } }

/* Anchor targets land below the nav. Lenis reads scroll-margin too. */
#leistungen, #preise, #ueber-mich { scroll-margin-top: var(--nav-h); }
/* The showcase is pinned: land a little way in, where the search hit is already up. */
#konzepte { scroll-margin-top: -50vh; }

html { background: var(--sc-canvas); }

/* Lenis owns wheel smoothing; native smooth-behavior would fight it. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body { line-height: 1.66; letter-spacing: 0.002em; }
h1, h2, h3 { font-family: var(--sc-font-display); }
p { margin: 0; }

.ph {
  border: 1px dashed color-mix(in oklab, var(--sc-ink) 38%, transparent);
  border-radius: 4px;
  padding: 0.04em 0.4em;
  color: var(--sc-ink-soft);
  font-size: 0.9em;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.nobr { white-space: nowrap; }
/* Line break that only exists from 900 px up. */
.br-desk { display: none; }
@media (min-width: 900px) { .br-desk { display: inline; } }

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

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.4em;
  border-radius: 999px;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  font-weight: 560;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline-offset: 4px; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in oklab, var(--sc-accent) 86%, #fff); }
}

/* ------------------------------------------------------------------- nav -- */
/* Solid by default, so it reads without JS. site.js clears it over the top of the
   hero and, on phones, slides it away while the showcase is pinned. */
.nav {
  position: fixed;
  z-index: var(--sc-z-chrome);
  top: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--sc-gutter) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-4);
  background: rgb(11 11 12 / 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sc-hairline);
  transition: background-color 240ms var(--sc-ease-out), border-color 240ms var(--sc-ease-out), transform 320ms var(--sc-ease-out);
}
.nav.is-top { background: rgb(11 11 12 / 0); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.is-away { transform: translate3d(0, -100%, 0); }
.nav__name {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--sc-ink);
}
/* The ME. monogram (assets/me-r3-marke-hell.svg), inline so it inherits ink and accent.
   Its M starts at the very edge of the drawing, so it sits on the gutter line; the hero
   headline is pulled onto the same line (see .hero__what). Size: --logo-h in :root. */
.nav__logo { flex: none; height: var(--logo-h); width: calc(var(--logo-h) * 1322 / 710); fill: currentColor; }
.nav__logo-dot { fill: var(--sc-accent); }
.nav__links { display: none; }
.nav__end { display: flex; align-items: center; gap: var(--sc-2); margin-right: -10px; }
/* Desktop only: on phones the hero, the menu, the packages and the close already
   carry the booking, so the bar keeps just the logo and the burger. */
.nav__cta {
  display: none;
  transition: background-color 160ms var(--sc-ease-out), opacity 220ms var(--sc-ease-out), transform 220ms var(--sc-ease-out), visibility 0s;
}
/* Two lines, not three: quieter, and it turns into a clean cross. */
.nav__burger {
  position: relative;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--sc-ink);
  cursor: pointer;
}
.nav__burger span {
  position: absolute;
  left: 12px; right: 12px; top: 50%;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transform: translate3d(0, -4px, 0);
  transition: transform 220ms var(--sc-ease-out);
}
.nav__burger span + span { transform: translate3d(0, 4px, 0); }
.nav__burger[aria-expanded="true"] span { transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span + span { transform: rotate(-45deg); }
.nav__burger:active { transform: scale(0.94); }
.nav__burger:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
/* While the hero's own button is on screen, the nav does not repeat it. */
.nav.is-hero .nav__cta {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -4px, 0);
  transition: opacity 220ms var(--sc-ease-out), transform 220ms var(--sc-ease-out), visibility 0s linear 220ms;
}
/* First frame: settle into the starting state without animating there. */
.nav.is-init, .nav.is-init .nav__cta { transition: none; }
@media (min-width: 900px) {
  .nav { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav__name { justify-self: start; }
  .nav__end { justify-self: end; margin-right: 0; }
  .nav__cta { display: inline-flex; }
  .nav__burger { display: none; }
  .nav__links { display: flex; gap: clamp(1.5rem, 2.6vw, 2.75rem); }
  .nav__links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--sc-ink-soft);
    font-size: var(--sc-t-sm);
    text-decoration: none;
    transition: color 200ms var(--sc-ease-out);
  }
  .nav__links a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 7px;
    height: 2px;
    border-radius: 1px;
    background: var(--sc-accent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 280ms var(--sc-ease-out);
  }
  .nav__links a[aria-current] { color: var(--sc-ink); }
  .nav__links a[aria-current]::after { transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--sc-ink); }
}

/* ------------------------------------------------------------------ menu -- */
/* Phones only: the burger opens the sections as one quiet list, big type on black,
   with the one action at the bottom. site.js makes the page behind it inert. */
.menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--sc-z-chrome) - 1);
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top) + var(--nav-h) + var(--sc-6)) var(--sc-gutter) calc(env(safe-area-inset-bottom) + var(--sc-6));
  background: var(--sc-canvas);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--sc-ease-out), visibility 0s linear 220ms;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity 220ms var(--sc-ease-out), visibility 0s; }
.menu__links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.menu__links a {
  display: flex;
  align-items: center;
  min-height: 4.25rem;
  border-bottom: 1px solid var(--sc-hairline);
  color: var(--sc-ink);
  font-size: clamp(1.75rem, 8vw, 2.25rem);
  font-weight: 540;
  letter-spacing: -0.03em;
  text-decoration: none;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links li:nth-child(2) a { transition-delay: 40ms; }
.menu.is-open .menu__links li:nth-child(3) a { transition-delay: 80ms; }
.menu.is-open .menu__links li:nth-child(4) a { transition-delay: 120ms; }
.menu__links a[aria-current] { color: var(--sc-accent); }
.menu__links a:active { color: var(--sc-accent); }
.menu__cta { justify-content: center; margin-top: auto; }
@media (min-width: 900px) { .menu { display: none; } }
html.is-menu { overflow: hidden; }

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: clip;
  isolation: isolate;
}
/* Black Forest ridgelines and firs behind the copy, bottom-aligned so the valley stays
   in frame on any aspect ratio. Layers lag behind on scroll (heroFrame). */
.hero__land {
  --land-x: 50%;
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 0;
  height: 100%;
  width: auto;
  min-width: 100%;
  max-width: none;
  aspect-ratio: 8 / 5;
  transform: translateX(calc(-1 * var(--land-x)));
  pointer-events: none;
}
/* Phones see a narrow slice: shift it so the sun and the tall firs sit at the right
   edge, clear of the copy (contrast). */
@media (max-width: 899px) { .hero__land { --land-x: 53%; } }
.hero__rim { fill: none; stroke: url(#hl-rim); stroke-width: 1.4; }
.hero__firs { fill: #08080A; }
@media (min-width: 900px) { .hero__firs--phone { display: none; } }
/* On load the ridges rise into place, far ones first. */
.hero__ridge > path, .hero__ridge > .hero__haze { animation: hero-ridge 1.6s var(--sc-ease-out) both; animation-delay: calc(120ms + var(--i) * 110ms); }
@keyframes hero-ridge { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
.hero__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2.5rem, 9svh, 6rem);
  padding: calc(env(safe-area-inset-top) + var(--nav-h) + var(--sc-5)) var(--sc-gutter) calc(env(safe-area-inset-bottom) + var(--sc-7));
}
.hero__title { margin: 0; color: var(--sc-ink); }
/* The typed headline. M and F carry about 0.078em of air on their left in Geist 560;
   pulling the block back by that much puts the ink on the gutter line, flush with the
   logo above. Sizer and typed text share one grid cell, so the block always holds two
   lines and the copy below never moves while a phrase is typed or deleted. */
.hero__what {
  display: grid;
  margin-left: -0.078em;
  font-weight: 560;
  line-height: 0.92;
  letter-spacing: -0.045em;
  white-space: pre-line;
}
.hero__sizer, .hero__typed { grid-area: 1 / 1; }
.hero__sizer { visibility: hidden; }
/* The caret takes no room in the line (negative right margin = its own width), so it can
   never push "Handwerk." into a third line. */
.hero__caret {
  display: inline-block;
  width: 0.06em;
  height: 0.74em;
  margin-left: 0.05em;
  margin-right: -0.11em;
  background: var(--sc-accent);
  vertical-align: -0.02em;
  animation: hero-caret 1.05s steps(1) infinite;
}
.hero__sizer .hero__caret, .hero__what.is-typing .hero__caret { animation: none; }
@keyframes hero-caret { 50% { opacity: 0; } }

/* Portrait module after Matthias' sketch: round photo with a green "online" ring,
   name large, role, then a short personal quote in italics. The photo is centred on the
   line of the name: its negative block margins shrink its box to that line's height, so
   it hangs evenly above and below the name without pushing the role down. */
.hero__me {
  --face: 4rem;
  --name-fs: var(--sc-t-lg);
  display: grid;
  grid-template-columns: var(--face) 1fr;
  column-gap: var(--sc-4);
  max-width: 36rem;
}
.hero__face {
  grid-row: 1;
  align-self: center;
  width: var(--face);
  height: var(--face);
  margin-block: calc((1.15 * var(--name-fs) - var(--face)) / 2);
  border-radius: 50%;
  object-fit: cover;
  outline: 2px solid var(--online);
  outline-offset: 3px;
}
.hero__name { grid-column: 2; font-size: var(--name-fs); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
/* Phones: the role sits on the glowing far ridge, so it keeps full ink there (contrast);
   the larger, bolder name carries the hierarchy. */
.hero__role { grid-column: 2; margin-top: 0.2em; color: var(--sc-ink); font-size: var(--sc-t-sm); line-height: 1.4; }
.hero__quote {
  grid-column: 1 / -1;
  max-width: 34rem;
  margin-top: var(--sc-5);
  font-style: italic;
  line-height: 1.5;
  text-wrap: pretty;
}
/* Who it is for, right above the button. Rottweil first, as the centre. */
/* The region, marked with a pin; "für Handwerksbetriebe" already stands in the headline and
   the role, so only screen readers hear it here. */
.hero__pin {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.4em;
  vertical-align: -0.17em;
  fill: none;
  stroke: var(--sc-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero__for {
  max-width: 44ch;
  margin-top: var(--sc-6);
  color: var(--sc-ink-soft);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.hero__cta { display: inline-flex; flex-direction: column; align-items: center; margin-top: var(--sc-5); }
/* Lowers the threshold right where the decision falls; quiet, it is a footnote. */
.hero__note { margin-top: var(--sc-2); color: #C29462; font-size: var(--sc-t-xs); letter-spacing: 0.01em; }

/* Phones: the photo centres on the whole name block (name and role), so it sits level
   with "Website-Freelancer" (Max, round 33). From 900 px it stays on the name line. */
@media (max-width: 899px) {
  .hero__face { grid-row: 1 / span 2; margin-block: 0; }
  .hero__name { align-self: end; }
  .hero__role { align-self: start; }
}
/* Phones: the copy sits low, in thumb reach, with air between its parts. The two auto
   margins split the free height evenly above the headline and between headline and copy.
   On a screen too short for all of it the hero grows instead of clipping the button. */
@media (max-width: 899px) {
  .hero { height: auto; min-height: max(560px, 100svh); }
  .hero__inner { height: auto; min-height: inherit; justify-content: flex-start; }
  .hero__title, .hero__copy { margin-top: auto; }
}
@media (min-width: 900px) {
  .hero__me { --face: 5.25rem; --name-fs: var(--sc-t-xl); }
  .hero__role { color: var(--sc-ink-soft); font-size: var(--sc-t-base); }
  .hero__me { max-width: 46rem; }
  .hero__quote { max-width: 44rem; margin-top: var(--sc-4); }
  .hero__for { margin-top: var(--sc-5); font-size: var(--sc-t-sm); }
  .hero__cta { margin-top: var(--sc-4); }
}

/* ---------------------------------------------------------------- teaser -- */
/* Pinned. Two pairs take turns in one place (Anfragen, then Bewerber), then the lead-in to
   the steps holds. In each pair the set-up line steps back once the second line lands, and
   the key words get an amber stroke drawn under them, the same hand as the sketch notes in
   the concept project (--u from teaserFrame in site.js). */
.teaser__stage {
  display: grid;
  place-items: center;
  padding-inline: var(--sc-gutter);
}
.teaser__frame { grid-area: 1 / 1; display: grid; justify-items: center; gap: clamp(1rem, 3vh, 2.2rem); }
.teaser__line {
  max-width: 16ch;
  margin: 0;
  text-align: center;
  font-family: var(--sc-font-display);
  font-size: clamp(2rem, 8.6vw, 2.8rem);
  font-weight: 520;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
/* Paint-roller highlight in amber behind key words (teaser, about): a band with rough edges
   rolled across the letters from left to right. --u (0..1) comes from the section's frame
   in site.js; without JS it is simply there. The marked words turn dark as the paint
   arrives (rgb from --u, the harness misreads oklab), about 8 : 1 on the amber. */
.mark {
  --paint: clamp(0, (var(--u, 1) - 0.35) / 0.55, 1);
  position: relative;
  z-index: 0;
  white-space: nowrap;
  color: rgb(calc(237 - 226 * var(--paint)) calc(234 - 223 * var(--paint)) calc(228 - 216 * var(--paint)));
}
.mark svg {
  position: absolute;
  z-index: -1;
  left: -0.1em;
  top: 0.06em;
  width: calc(100% + 0.2em);
  height: calc(100% - 0.06em);
  max-width: none;
  fill: var(--sc-accent);
  fill-opacity: 0.94;
  clip-path: inset(0 calc((1 - var(--u, 1)) * 100%) 0 0);
}
@media (min-width: 900px) {
  .teaser__line { max-width: 22ch; font-size: clamp(2.8rem, 0.8rem + 3vw, 4.4rem); }
}

/* ------------------------------------------------------------- scheitern -- */
/* The two bottlenecks side by side. Each box: an icon that names the loss, three plain
   causes, and the figure that proves it as the box's footing. Red marks the problem here;
   the offer below answers in the same shape with green ticks. The red is semantic, it
   never touches a heading or a button. */
.scheitern { --pain: #EB6F5F; --pain-rgb: 235 111 95; }
.section-title.scheitern__title {
  max-width: none;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
  hyphens: manual;
}
.scheitern__grid { display: grid; gap: var(--sc-5); max-width: 64rem; margin-inline: auto; }
.pain {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sc-6) var(--sc-5) var(--sc-5);
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-md);
  background:
    radial-gradient(120% 70% at 0% 0%, rgb(var(--pain-rgb) / 0.07), transparent 60%),
    linear-gradient(180deg, #19191B, #121214);
  box-shadow: var(--sc-edge), 0 28px 56px -28px rgb(4 4 6 / 0.85);
}
.pain__top { display: flex; align-items: center; gap: var(--sc-4); margin-bottom: var(--sc-6); }
.pain__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgb(var(--pain-rgb) / 0.12);
  box-shadow: inset 0 0 0 1px rgb(var(--pain-rgb) / 0.28);
  color: var(--pain);
}
.pain__icon svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pain__head { margin: 0; font-size: var(--sc-t-xl); font-weight: 560; line-height: 1.15; letter-spacing: -0.02em; }
/* Marker and text share a grid row; the marker is exactly one line tall (1.5em at
   line-height 1.5) and centred in it, so it sits on the first line at any size. */
.pain__list { list-style: none; margin: 0 0 var(--sc-6); padding: 0; display: grid; gap: var(--sc-4); }
.pain__list li { display: grid; grid-template-columns: 1.25em 1fr; column-gap: 0.75em; line-height: 1.5; text-wrap: pretty; }
.pain__list li::before {
  content: "";
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.125em;
  border-radius: 50%;
  background: rgb(var(--pain-rgb) / 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EB6F5F' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M17 7 7 17M7 7l10 10'/%3E%3C/svg%3E") center / 62% no-repeat;
  transition: transform 560ms var(--sc-ease-out), opacity 320ms var(--sc-ease-out);
  transition-delay: inherit;
}
/* Each cross settles in with its line. Only once the engine runs: without JS they show. */
.sc-ready .pain__list li:not(.sc-in)::before { opacity: 0; transform: scale(0.6); }
/* The figure, set large, as the footing of the box. */
.pain__fact { margin-top: auto; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); }
.pain__num {
  font-size: var(--sc-t-2xl);
  font-style: italic;
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.03em;
}
.pain__txt { margin-top: var(--sc-3); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; text-wrap: pretty; }
.pain__src {
  display: block;
  margin-top: var(--sc-2);
  width: fit-content;
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-xs);
  text-decoration: underline;
  text-decoration-color: var(--sc-hairline-strong);
  text-underline-offset: 0.2em;
}
@media (hover: hover) and (pointer: fine) {
  .pain__src { transition: color 160ms var(--sc-ease-out), text-decoration-color 160ms var(--sc-ease-out); }
  .pain__src:hover { color: var(--sc-ink); text-decoration-color: currentColor; }
}
@media (min-width: 900px) {
  /* Head, list and figure line up across both boxes (subgrid), so the rules above the
     figures sit at one height even when one source note runs a line longer. */
  .scheitern__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); column-gap: var(--sc-6); row-gap: 0; }
  .pain { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding: var(--sc-7) var(--sc-7) var(--sc-6); }
  .pain__fact { margin-top: 0; }
  .pain__icon { width: 3rem; height: 3rem; }
}

/* ----------------------------------------------------------------- offer -- */
/* What matters when we build your website, as a checklist the visitor ticks off while
   reading: white boxes, and a green tick drawn over each one as its line crosses the
   reading line (checksFrame in site.js sets --t 0..1). The tick overshoots its box like a
   pen stroke. Desktop: the heading holds on the left while the points pass on the right. */
.offer { --tick: var(--online); }
.offer__grid { display: grid; gap: var(--sc-6); }
.section-title.offer__title { max-width: 16ch; margin: 0; text-wrap: balance; }
.checks { list-style: none; margin: 0; padding: 0; }
.check {
  display: grid;
  grid-template-columns: 1.1em 1fr;
  padding-right: 0.4em;
  align-items: start;
  column-gap: 1.2em;
  padding-block: var(--sc-5);
  border-top: 1px solid var(--sc-hairline);
  font-size: var(--sc-t-lg);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
.check:last-child { border-bottom: 1px solid var(--sc-hairline); }
.check__box {
  position: relative;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.1em;
  border: 2px solid var(--sc-ink);
  border-radius: 0.22em;
}
.check__box svg {
  position: absolute;
  left: -0.08em;
  top: -0.72em;
  width: 1.95em;
  height: 1.95em;
  max-width: none;
  overflow: visible;
  fill: none;
  stroke: var(--tick);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Without JS (or before the engine runs) every tick is drawn. */
.check__box path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--t, 1)); }
.check__text { color: var(--sc-ink); text-wrap: pretty; transition: color 320ms var(--sc-ease-out); }
.sc-ready .check:not(.is-done) .check__text { color: var(--sc-ink-soft); }

/* Partners for everything around the website. Secondary to the checklist: one quiet
   panel, the question, the answer, and the two ways it goes. */
.netz {
  margin-top: var(--sc-9);
  padding: var(--sc-6) var(--sc-5);
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-md);
  background: linear-gradient(180deg, #19191B, #121214);
  box-shadow: var(--sc-edge), 0 28px 56px -28px rgb(4 4 6 / 0.85);
}
.netz__q { margin: 0; max-width: 40ch; font-size: var(--sc-t-lg); font-weight: 540; line-height: 1.3; letter-spacing: -0.012em; text-wrap: balance; }
.netz__a { margin-top: var(--sc-3); max-width: 52ch; color: var(--sc-ink-soft); }
/* Phones: the two follow-up questions fold (Max, round 24), so the panel does not read
   as a wall of text. A chevron shows they open. From 900 px both stand open, side by side. */
.netz__ways { margin-top: var(--sc-5); }
.netz__way { border-top: 1px solid var(--sc-hairline); }
.netz__way summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-4);
  min-height: 48px;
  padding-block: var(--sc-3);
  color: var(--sc-ink);
  font-weight: 560;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.netz__way summary::-webkit-details-marker { display: none; }
.netz__way summary::after {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.2em;
  border: solid var(--sc-ink-soft);
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 200ms var(--sc-ease-out);
}
.netz__way[open] summary::after { transform: translateY(0.1em) rotate(-135deg); }
.netz__way summary:focus-visible { outline-offset: 2px; border-radius: 4px; }
.netz__way p { max-width: 40ch; padding-bottom: var(--sc-4); color: var(--sc-ink-soft); line-height: 1.55; text-wrap: pretty; }
.netz__way[open] p { animation: netz-way 320ms var(--sc-ease-out); }
@keyframes netz-way { from { opacity: 0; transform: translate3d(0, -6px, 0); } }
@media (min-width: 900px) {
  .offer__grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); column-gap: var(--sc-8); align-items: start; }
  .section-title.offer__title { position: sticky; top: calc(var(--nav-h) + 14vh); }
  .check { font-size: clamp(1.4rem, 0.9rem + 1.1vw, 1.9rem); padding-block: var(--sc-6); }
  .netz { padding: var(--sc-7); }
  .netz__ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sc-7); margin-top: var(--sc-6); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); }
  .netz__way { border-top: 0; }
  .netz__way summary { min-height: 0; padding-block: 0 var(--sc-1); cursor: default; }
  .netz__way summary::after { content: none; }
  .netz__way p { padding-bottom: 0; }
  .netz__way[open] p { animation: none; }
}

/* ------------------------------------------------------------------ peak -- */
.peak__stage {
  --enter: 1; --morph: 0; --scroll: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: calc(var(--sc-6) + env(safe-area-inset-top)) var(--sc-gutter) var(--sc-5);
}
.peak__title {
  margin: 0;
  font-size: var(--sc-t-xl);
  font-weight: 540;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.peak__sub { max-width: 62ch; margin-top: var(--sc-1); color: var(--sc-ink-soft); }
.peak__grid {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--sc-4);
  min-height: 0;
}
.device { position: relative; margin: 0; display: grid; justify-items: center; gap: var(--sc-3); }
/* Phones: the phone moves to the right edge so the notes have room on its left. */
@media (max-width: 899px) {
  .device { justify-self: end; }
  /* Caption on the same left edge as the heading and the notes. */
  .peak .funnel { justify-self: start; text-align: left; }
  .peak .funnel__step .funnel__text { margin-inline: 0; }
}
/* Sketch notes: handwriting and a drawn arrow beside the phone, each pointing at its button
   and following it while the page scrolls (notesFrame in site.js moves them and sets
   is-on). --note-room is the free width left of the phone, measured in site.js. */
.notes { position: absolute; inset: 0; pointer-events: none; }
.note {
  position: absolute;
  top: 0;
  right: calc(100% - 0.6rem);
  display: flex;
  align-items: center;
  gap: 0.1em;
  width: max-content;
  max-width: calc(var(--note-room, 9rem) + 0.6rem);
  margin: 0;
  color: var(--sc-accent);
  font-family: "Caveat", var(--sc-font-text);
  font-size: 1.1rem;
  font-weight: 560;
  line-height: 1;
  opacity: 0;
  transition: opacity 280ms var(--sc-ease-out);
}
.note.is-on { opacity: 1; }
.note__text { min-width: 0; text-align: right; text-wrap: balance; transform: rotate(-3deg); }
/* The arrow carries a canvas-coloured halo under its stroke: invisible on the dark ground,
   an outline where the tip lands on the white page (Max: the tip got lost in the white). */
.note__arrow {
  flex: none;
  width: 1.8em;
  height: 0.9em;
  max-width: none;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.note__arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 420ms var(--sc-ease-out); }
.note__halo { stroke: var(--sc-canvas); stroke-width: 6.5; }
.note.is-on .note__shaft { stroke-dashoffset: 0; transition-delay: 120ms; }
.note.is-on .note__head { stroke-dashoffset: 0; transition-delay: 480ms; transition-duration: 220ms; }
@media (min-width: 900px) {
  .note { font-size: 1.6rem; }
  .note__arrow { width: 2.4em; height: 1.2em; }
}
/* Phones: as tall as the screen allows once heading and caption are placed (--peak-reserve,
   measured in site.js), but never so wide that the sketch notes lose their room (8rem). */
.device__frame {
  position: relative;
  height: clamp(17rem, min(100svh - var(--peak-reserve, 16rem), (100vw - 2 * var(--sc-gutter) - 8rem) * 2.1667), 40rem);
  aspect-ratio: 9 / 19.5;
  container-type: size;
}
.device__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(calc((1 - var(--morph)) * 21.15%) 0 round calc(8px + var(--morph) * 20px));
  opacity: var(--enter);
  transform: scale(calc(0.965 + 0.035 * var(--enter)));
}
.device__page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #EEEAE3;
  opacity: calc(var(--morph) * 2.2);
}
/* --scroll-max is the page's overflow in px, measured by site.js. */
.device__scroll {
  position: relative;
  transform: translate3d(0, calc(var(--scroll) * var(--scroll-max, 0px) * -1), 0);
}
.device__ad {
  position: absolute;
  left: 0; right: 0;
  top: 21.15%;
  height: 57.7%;
  background: var(--concept);
  opacity: calc(1 - var(--morph) * 1.7);
}

/* Landing page of the fictional business, drawn in container units of the frame
   (100cqw = phone width, so 1cqw is about 3.9 px on a 390 px phone). */
.lp { --lp-ink: #1E1D1B; --lp-soft: #67625B; --lp-brand: #1F4A45; --lp-line: #DDD7CD; color: var(--lp-ink); font-size: 3.6cqw; line-height: 1.45; letter-spacing: -0.005em; }
.lp img { display: block; width: 100%; height: 100%; object-fit: cover; background: #D9D3C8; }
.lp ul { list-style: none; margin: 0; padding: 0; }
.lp-bar {
  position: absolute; z-index: 1; top: 0; left: 0; right: 0;
  height: 15cqw; padding: 0 5cqw;
  display: flex; align-items: center; justify-content: space-between;
  background: rgb(250 248 244 / 0.94);
  border-bottom: 1px solid var(--lp-line);
}
.lp-logo { display: flex; align-items: center; gap: 2.4cqw; }
.lp-logo svg, .srch__fav svg { display: block; width: 6.4cqw; height: 6.4cqw; fill: var(--lp-brand, #1F4A45); }
.lp-logo__name { display: grid; font-size: 4.6cqw; font-weight: 640; line-height: 1; letter-spacing: -0.02em; }
.lp-logo__name small { margin-top: 0.8cqw; color: var(--lp-soft); font-size: 2.5cqw; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.lp-call { padding: 1.6cqw 3.4cqw; border: 1px solid var(--lp-brand); border-radius: 999px; color: var(--lp-brand); font-size: 3.1cqw; font-weight: 560; }
.lp .device__scroll { padding-top: 15cqw; background: #F5F2EC; }
.lp-hero { height: 96cqw; }
.lp-intro { display: grid; justify-items: start; gap: 2.6cqw; padding: 6cqw 5cqw 7cqw; }
.lp-kicker { color: var(--lp-brand); font-size: 3cqw; font-weight: 600; letter-spacing: 0.02em; }
.lp-h1 { font-size: 7.6cqw; font-weight: 640; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.lp-h2 { display: block; font-size: 5.6cqw; font-weight: 640; line-height: 1.15; letter-spacing: -0.025em; }
.lp-rating { color: var(--lp-soft); font-size: 3.1cqw; }
.lp-rating b { margin-right: 1cqw; color: #C4842F; font-weight: 400; letter-spacing: 0.06em; }
.lp-btn {
  display: flex; align-items: center; justify-content: center; justify-self: stretch;
  height: 12.4cqw; margin-top: 1.6cqw; border-radius: 2.2cqw;
  background: var(--lp-brand); color: #fff;
  font-size: 3.8cqw; font-weight: 600; letter-spacing: -0.01em;
}
.lp-btn--light { background: #fff; color: var(--lp-brand); }
.lp-more { justify-self: center; color: var(--lp-brand); font-size: 3.3cqw; text-decoration: underline; text-underline-offset: 0.6cqw; }
.lp .lp-trust {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw;
  margin: 0 5cqw; padding: 4.4cqw 0;
  border-block: 1px solid var(--lp-line);
}
.lp-trust li { position: relative; padding-top: 5cqw; text-align: center; color: var(--lp-ink); font-size: 2.9cqw; font-weight: 560; line-height: 1.25; }
.lp-trust li::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 1.8cqw; height: 3.2cqw; margin-left: -0.9cqw;
  border: solid var(--lp-brand); border-width: 0 0.7cqw 0.7cqw 0;
  transform: rotate(45deg);
}
.lp-sec { padding: 8cqw 5cqw 6cqw; }
.lp .lp-services { margin-top: 4cqw; }
.lp-services li { display: grid; grid-template-columns: 20cqw 1fr; align-items: center; gap: 4cqw; padding-block: 3cqw; border-bottom: 1px solid var(--lp-line); }
.lp-services img { height: 20cqw; border-radius: 2cqw; }
.lp-services span { display: grid; gap: 0.6cqw; color: var(--lp-soft); font-size: 3.2cqw; line-height: 1.35; }
.lp-services b { color: var(--lp-ink); font-size: 4cqw; font-weight: 620; letter-spacing: -0.015em; }
.lp-jobs { margin: 2cqw 0 0; background: #1C3835; color: #fff; }
.lp-jobs img { height: 54cqw; }
.lp-jobs__body { display: grid; justify-items: start; gap: 2.4cqw; padding: 6cqw 5cqw 8cqw; }
.lp-jobs .lp-kicker { color: #9FD0C6; }
.lp-p { color: rgb(255 255 255 / 0.78); font-size: 3.4cqw; }
.lp-form { display: grid; gap: 3cqw; margin: 8cqw 5cqw 0; padding: 6cqw 5cqw; border-radius: 3cqw; background: #fff; box-shadow: 0 1cqw 4cqw rgb(40 30 20 / 0.08); }
.lp-form .lp-h2 { margin-bottom: 1cqw; }
.lp-chips { display: flex; gap: 2cqw; }
.lp-chips i { padding: 1.6cqw 3.6cqw; border: 1px solid var(--lp-line); border-radius: 999px; color: var(--lp-ink); font-size: 3.2cqw; font-style: normal; }
.lp-chips i.is-on { border-color: var(--lp-brand); background: var(--lp-brand); color: #fff; }
.lp-field { display: flex; align-items: center; height: 11.4cqw; padding-inline: 3.4cqw; border: 1px solid #D2CCC1; border-radius: 2cqw; color: #8E887F; font-size: 3.3cqw; }
.lp-field--area { align-items: flex-start; height: 20cqw; padding-top: 3cqw; }
.lp-note { color: var(--lp-soft); font-size: 2.9cqw; text-align: center; }
.lp-foot { margin-top: 8cqw; padding: 6cqw 5cqw 8cqw; background: #1A1A19; color: #B8B2A8; font-size: 2.9cqw; line-height: 1.6; }
.lp-foot b { color: #fff; font-weight: 600; }

.funnel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  width: 100%;
  max-width: 30rem;
  text-align: center;
  opacity: var(--enter);
}
.funnel__step { grid-area: 1 / 1; opacity: 0; transition: opacity 420ms var(--sc-ease-out); }
.funnel__step .funnel__text { margin-inline: auto; }
.funnel__term {
  display: block;
  font-size: var(--sc-t-lg);
  font-weight: 540;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.funnel__text { display: block; max-width: 34ch; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; }
.peak__stage[data-step="0"] .funnel__step:nth-child(1),
.peak__stage[data-step="1"] .funnel__step:nth-child(2),
.peak__stage[data-step="2"] .funnel__step:nth-child(3),
.peak__stage[data-step="3"] .funnel__step:nth-child(4) { opacity: 1; }

@media (min-width: 900px) {
  .peak__grid {
    grid-template-columns: auto minmax(0, 26rem);
    justify-content: center;
    align-items: center;
    column-gap: clamp(3rem, 8vw, 9rem);
  }
  .peak__stage { padding-top: calc(var(--sc-6) + var(--nav-h) + env(safe-area-inset-top)); }
  .device__frame { height: clamp(20rem, calc(100svh - 15rem - var(--nav-h)), 44rem); }
  .funnel { gap: var(--sc-6); justify-self: start; text-align: left; }
  .funnel__step .funnel__text { margin-inline: 0; }
  .funnel__step { grid-area: auto; opacity: 1; color: var(--sc-ink-soft); transition: color 420ms var(--sc-ease-out); }
  .funnel__text { transition: color 420ms var(--sc-ease-out); }
  .funnel__term { font-size: var(--sc-t-xl); }
  .funnel__text { font-size: var(--sc-t-base); }
  .peak__stage[data-step="0"] .funnel__step:nth-child(1),
  .peak__stage[data-step="1"] .funnel__step:nth-child(2),
  .peak__stage[data-step="2"] .funnel__step:nth-child(3),
  .peak__stage[data-step="3"] .funnel__step:nth-child(4) { color: var(--sc-ink); }
  .peak__stage[data-step="0"] .funnel__step:nth-child(1) .funnel__text,
  .peak__stage[data-step="1"] .funnel__step:nth-child(2) .funnel__text,
  .peak__stage[data-step="2"] .funnel__step:nth-child(3) .funnel__text,
  .peak__stage[data-step="3"] .funnel__step:nth-child(4) .funnel__text { color: var(--sc-ink); }
}

/* ---------------------------------------------------------------- ablauf -- */
.section-title {
  max-width: 18ch;
  margin: 0 0 var(--sc-7);
  font-size: var(--sc-t-2xl);
  font-weight: 540;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
/* A path on the left draws from step to step while the scene acts out the step
   under the reading line (ablaufFrame in site.js). It mirrors the showcase: there
   the picture led on the left, here it follows on the right. Phones stack the
   scene above the path and keep it stuck under the nav. */
.ablauf { padding-top: var(--sc-8); }
.ablauf__grid { display: grid; grid-template-areas: "title" "scene" "path"; column-gap: clamp(3rem, 7vw, 8rem); }
.ablauf__title { grid-area: title; }
.path { grid-area: path; list-style: none; margin: 0; padding: var(--sc-6) 0 0; }
.path__step {
  --t: 0;
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: var(--sc-4);
  align-content: start;
  min-height: 72svh;
}
.path__step:last-child { min-height: 62svh; }
/* Track and accent fill from this dot down to the next one. */
.path__step:not(:last-child)::before,
.path__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.25rem; bottom: 0;
  left: calc(1.125rem - 0.5px);
  width: 1px;
  background: var(--sc-hairline-strong);
}
.path__step:not(:last-child)::after {
  left: calc(1.125rem - 1px);
  width: 2px;
  background: var(--sc-accent);
  transform: scaleY(var(--t));
  transform-origin: 50% 0;
}
.path__dot {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--sc-hairline-strong);
  border-radius: 50%;
  background: var(--sc-canvas);
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-sm);
  font-variant-numeric: tabular-nums;
  transition: background-color 300ms var(--sc-ease-out), border-color 300ms var(--sc-ease-out), color 300ms var(--sc-ease-out);
}
.path__step.is-on .path__dot { border-color: var(--sc-accent); background: var(--sc-accent); color: var(--sc-accent-ink); }
.path__step h3 { margin: 0.2rem 0 var(--sc-2); font-size: var(--sc-t-xl); font-weight: 540; line-height: 1.15; letter-spacing: -0.02em; }
/* The step's name sits small above the line that says what happens in it. */
.path__label { display: block; margin-bottom: 0.3em; font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: 0; }
.path__step p { max-width: 34ch; }
.path__step h3, .path__step p, .path__plan { color: var(--sc-ink-soft); transition: color 420ms var(--sc-ease-out); }
.path__step.is-current h3, .path__step.is-current p, .path__step.is-current .path__plan { color: var(--sc-ink); }
.path__step.is-current .path__label { color: var(--sc-accent); }
/* Umsetzung: the fixed sequence that keeps the project from going in circles. */
.path__plan { grid-column: 2; list-style: none; margin: var(--sc-3) 0 0; padding: 0; display: grid; gap: var(--sc-2); max-width: 34ch; }
.path__plan li { position: relative; padding-left: 1.3em; line-height: 1.45; }
.path__plan li::before { content: ""; position: absolute; left: 0.15em; top: 0.62em; width: 0.45em; height: 1.5px; background: currentColor; }

.ablauf__scene {
  grid-area: scene;
  position: sticky;
  z-index: 2;
  top: var(--nav-h);
  height: min(40svh, 22rem);
  margin-inline: calc(-1 * var(--sc-gutter));
  padding: var(--sc-3) var(--sc-gutter) 0;
  background: var(--sc-canvas);
}
/* Steps scrolling up under the stuck scene fade out instead of being cut. */
.ablauf__scene::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 2.5rem;
  background: linear-gradient(var(--sc-canvas), rgb(11 11 12 / 0));
  pointer-events: none;
}
@media (min-width: 900px) {
  .ablauf__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "title scene" "path scene";
  }
  .path { padding: 0 0 32svh; }
  .path__step { min-height: 80svh; }
  .ablauf__scene {
    --scene-h: min(40rem, calc(100svh - var(--nav-h) - 4rem));
    align-self: start;
    top: calc((100svh + var(--nav-h) - var(--scene-h)) / 2);
    height: var(--scene-h);
    margin: 0;
    padding: 0;
    background: none;
  }
  .ablauf__scene::after { content: none; }
}

/* Scene: line drawing in ink, the accent for what matters, colour only for the work. */
.scn { width: 100%; height: 100%; overflow: visible; font-family: var(--sc-font-text); }
.scn-ground { stroke: var(--sc-hairline-strong); stroke-width: 1.5; }
.scn-fig :is(line, path, circle) { fill: none; stroke: var(--sc-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.scn-fig .scn-phone { fill: var(--sc-surface); stroke: var(--sc-ink); stroke-width: 2; }
.scn-label { fill: var(--sc-ink-soft); font-size: 16px; text-anchor: middle; }
.scn-desk :is(line, path) { fill: none; stroke: var(--sc-ink-soft); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.scn-screen { fill: var(--sc-surface); stroke: var(--sc-ink); stroke-width: 2.5; }
.scn-base { fill: var(--sc-ink-soft); }
.scn-k { fill: var(--sc-accent); }
.scn-s { fill: var(--sc-ink-soft); opacity: 0.7; }
.scn-i { fill: var(--sc-ink); opacity: 0.85; }
.scn-cursor { fill: var(--sc-accent); animation: scn-blink 1s steps(1) infinite; }
.scn-gear circle { fill: none; stroke: var(--sc-ink-soft); }
.scn-gear circle:first-child { stroke-width: 4; stroke-dasharray: 3.2 2.45; }
.scn-gear circle:last-child { stroke-width: 2; }
.scn-bubble > rect:first-child, .scn-bubble > path:first-of-type { fill: #222226; }
.scn-tiles rect { fill: var(--sc-ink-soft); }
.scn-tiles rect:nth-child(2), .scn-tiles rect:nth-child(3) { opacity: 0.55; }
.scn-sketch { fill: none; stroke: var(--sc-ink-soft); stroke-width: 2; }
.scn-check { fill: none; stroke: var(--sc-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.scn-think rect { fill: #222226; }
.scn-think text { fill: var(--sc-accent); font-size: 13px; font-weight: 560; text-anchor: middle; }
.scn-say { fill: var(--sc-ink); font-size: 15px; font-weight: 520; }
.scn-trail { fill: none; stroke: var(--sc-accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; }
.scn-chrome { fill: #2A2A2E; }
.scn-dot { fill: var(--sc-ink-soft); }
.scn-url-field { fill: var(--sc-surface); }
.scn-url { fill: var(--sc-ink-soft); font-size: 5.2px; }
.scn-upload { fill: var(--sc-accent); }
.scn-live { fill: var(--sc-accent); animation: scn-pulse 1.8s ease-in-out infinite; }
.scn-ping { fill: var(--sc-ink); font-size: 14px; font-weight: 560; }
.scn-ping-sub { fill: var(--sc-ink-soft); font-size: 11px; }
@keyframes scn-blink { 50% { opacity: 0; } }
@keyframes scn-pulse { 50% { opacity: 0.35; } }

/* ------------------------------------------------------------- enthalten -- */
/* What comes with working together, as a delivery note drawn on the dark page: a shaky
   hand-drawn frame with a torn top edge (paths built at the sheet's real size by drawNote in
   site.js, drawn in as the sheet appears), form labels in print and the entries in
   handwriting, amber icons, and a stamp that lands once the rows are in (Max, round 35:
   no white sheet, no "inklusive" per row, "ein bisschen gemalt"). */
.section-title.incl__title { margin-bottom: var(--sc-3); }
.incl__intro { max-width: 40ch; margin-bottom: var(--sc-7); color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.4; }
.ls { max-width: 54rem; margin-inline: auto; }
.ls__paper { position: relative; padding: var(--sc-7) var(--sc-5) var(--sc-6); }
.ls__frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.ls__frame path { fill: none; stroke: var(--sc-ink); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ls__frame .ls__line { stroke-width: 1.7; stroke-opacity: 0.85; }
.ls__frame .ls__line--2 { stroke-width: 1; stroke-opacity: 0.3; }
.sc-ready .ls__paper:not(.sc-in) .ls__frame path { stroke-dashoffset: 1; }
.ls__paper.sc-in .ls__frame path { transition: stroke-dashoffset 1300ms var(--sc-ease-out); }
.ls__paper.sc-in .ls__frame .ls__line--2 { transition-delay: 250ms; }
.ls__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sc-4) var(--sc-6);
  padding-bottom: var(--sc-5);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='8'%3E%3Cpath d='M0 4.2C30 3 60 5.2 95 4.1S160 2.9 200 4.4 265 4.9 300 3.9' fill='none' stroke='%23EDEAE4' stroke-opacity='0.85' stroke-width='2' stroke-dasharray='none' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 300px 8px repeat-x;
}
.ls__kind { color: var(--sc-accent); font-family: "Caveat", var(--sc-font-text); font-size: 1.7rem; font-weight: 560; line-height: 1; transform: rotate(-2deg); transform-origin: 0 100%; }
.ls__title { margin-top: var(--sc-2); font-size: var(--sc-t-2xl); font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.ls__meta { display: flex; gap: var(--sc-6); margin: 0; }
.ls__meta dt { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; }
/* Entries as if filled in by hand, on a drawn line. */
.ls__meta dd {
  margin: 0.1em 0 0;
  padding: 0 0.3em 0.1em 0;
  font-family: "Caveat", var(--sc-font-text);
  font-size: 1.55rem;
  font-weight: 560;
  line-height: 1.1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='8'%3E%3Cpath d='M0 4.2C30 3 60 5.2 95 4.1S160 2.9 200 4.4 265 4.9 300 3.9' fill='none' stroke='%23EDEAE4' stroke-opacity='0.4' stroke-width='1.2' stroke-dasharray='none' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 300px 8px repeat-x;
}
.ls__rows { list-style: none; margin: 0; padding: 0; }
.ls__row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  column-gap: var(--sc-4);
  align-items: start;
  padding-block: var(--sc-4);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='8'%3E%3Cpath d='M0 4.2C30 3 60 5.2 95 4.1S160 2.9 200 4.4 265 4.9 300 3.9' fill='none' stroke='%23EDEAE4' stroke-opacity='0.28' stroke-width='1.2' stroke-dasharray='7 6' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 300px 8px repeat-x;
}
.ls__row:last-child { background: none; }
.ls__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  box-shadow: 0 6px 16px -6px rgb(224 162 94 / 0.55);
}
.ls__icon svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ls__what h3 { margin: 0.3rem 0 0.15rem; font-size: var(--sc-t-lg); font-weight: 560; line-height: 1.25; letter-spacing: -0.012em; }
.ls__what p { max-width: 50ch; color: var(--sc-ink-soft); line-height: 1.5; text-wrap: pretty; }
.ls__foot {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 6rem;
  padding-top: var(--sc-5);
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-sm);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='8'%3E%3Cpath d='M0 4.2C30 3 60 5.2 95 4.1S160 2.9 200 4.4 265 4.9 300 3.9' fill='none' stroke='%23EDEAE4' stroke-opacity='0.85' stroke-width='2' stroke-dasharray='none' stroke-linecap='round'/%3E%3C/svg%3E") left top / 300px 8px repeat-x;
}
/* The rubber stamp, in amber on the dark: lands with a thud after the rows. */
.ls__stamp {
  position: absolute;
  right: var(--sc-2);
  bottom: var(--sc-1);
  padding: 0.45em 0.8em 0.4em;
  border: 3px solid currentColor;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--sc-canvas), inset 0 0 0 4px currentColor;
  color: var(--sc-accent);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0.92;
  transform: rotate(-9deg);
}
.sc-ready .ls__paper:not(.sc-in) .ls__stamp { opacity: 0; }
.ls__paper.sc-in .ls__stamp { animation: ls-stamp 460ms cubic-bezier(0.3, 1.5, 0.5, 1) 1300ms both; }
@keyframes ls-stamp {
  from { opacity: 0; transform: rotate(-14deg) scale(1.9); }
  60% { opacity: 1; }
  to { opacity: 0.92; transform: rotate(-9deg) scale(1); }
}
@media (min-width: 900px) {
  .ls { transform: rotate(-0.4deg); }
  .ls__paper { padding: var(--sc-7) var(--sc-8) var(--sc-6); }
  .ls__head { padding-bottom: var(--sc-4); }
  .ls__stamp { right: var(--sc-4); font-size: 1.4rem; }
}

/* ---------------------------------------------------------------- preise -- */
/* Vertical columns against the horizontal rows of the steps above. Hairlines,
   no cards; the pick is marked by an accent rule and its filled button. */
.preise { padding-top: var(--sc-9); }
.pakete { list-style: none; margin: 0; padding: 0; display: grid; }
.paket {
  display: flex;
  flex-direction: column;
  padding-block: var(--sc-6) var(--sc-7);
  border-top: 1px solid var(--sc-hairline);
}
.paket--pick { border-top: 2px solid var(--sc-accent); }
.paket__name { margin: 0; font-size: var(--sc-t-lg); font-weight: 540; line-height: 1.3; letter-spacing: -0.01em; }
.paket__price {
  margin: var(--sc-3) 0 var(--sc-5);
  font-size: var(--sc-t-2xl);
  font-weight: 540;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
/* What the package is for, right under the price. */
.paket__for { margin: calc(-1 * var(--sc-2)) 0 var(--sc-5); color: var(--sc-ink); font-weight: 540; line-height: 1.35; }
.paket__list { list-style: none; margin: 0 0 var(--sc-6); padding: 0; display: grid; align-content: start; gap: var(--sc-2); }
.paket__list li { position: relative; padding-left: 1.6em; max-width: 34ch; color: var(--sc-ink-soft); line-height: 1.5; }
.paket__list li::before {
  content: "";
  position: absolute;
  left: 0.2em; top: 0.32em;
  width: 0.34em; height: 0.62em;
  border: solid var(--sc-ink-soft); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.paket__list li.paket__base { padding-left: 0; color: var(--sc-ink); }
.paket__list li.paket__base::before { content: none; }
.paket--pick .paket__list li::before { border-color: var(--sc-accent); }
.paket__cta { align-self: flex-start; margin-top: auto; }
@media (min-width: 900px) {
  /* Name, price, purpose line, list and button share rows across the three columns
     (subgrid), so a purpose line that runs to two lines does not push one list down. */
  .pakete { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); }
  .paket { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .paket__cta { align-self: end; justify-self: start; }
  .paket { padding: var(--sc-6) var(--sc-6) var(--sc-2); }
  .paket:first-child { padding-left: 0; }
  .paket:last-child { padding-right: 0; }
  .paket + .paket { box-shadow: inset 1px 0 0 var(--sc-hairline); }
  .paket__price { margin: var(--sc-4) 0 var(--sc-6); font-size: clamp(2.6rem, 1.4rem + 2.4vw, 4rem); }

}

/* Shared by all three packages: what is always included and the frame around it. One
   panel under the columns, so the columns only show what sets them apart. */
.inklusive {
  margin-top: var(--sc-7);
  padding: var(--sc-6) var(--sc-5);
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-md);
  background: linear-gradient(180deg, #19191B, #121214);
  box-shadow: var(--sc-edge), 0 28px 56px -28px rgb(4 4 6 / 0.85);
}
.inklusive__title { margin: 0 0 var(--sc-4); font-size: var(--sc-t-lg); font-weight: 540; letter-spacing: -0.01em; }
.inklusive__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-2) var(--sc-6); }
.inklusive__list li { position: relative; padding-left: 1.6em; line-height: 1.5; }
.inklusive__list li::before {
  content: "";
  position: absolute;
  left: 0.2em; top: 0.32em;
  width: 0.34em; height: 0.62em;
  border: solid var(--sc-accent); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
@media (min-width: 640px) { .inklusive__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .inklusive { padding: var(--sc-7); }
  .inklusive__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------------- about -- */
.about { overflow-x: clip; }
/* Same look as the portrait in the hero: round, green "online" ring, a little larger here. */
.about__grid { display: grid; gap: var(--sc-7); justify-items: start; }
.about__photo {
  --face: 10rem;
  margin: 0;
  width: var(--face);
  height: var(--face);
  border-radius: 50%;
  overflow: hidden;
  outline: 3px solid var(--online);
  outline-offset: 5px;
  background: var(--sc-surface);
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__text { max-width: 36rem; }
/* Scroll-linked entrance: photo from the left, text from the right. --in values come
   from site.js; without JS they default to 1, the resting state. */
.about__photo {
  opacity: var(--photo-in, 1);
  transform: translate3d(calc((1 - var(--photo-in, 1)) * -14vw), 0, 0) scale(calc(0.94 + 0.06 * var(--photo-in, 1)));
  transform-origin: 0% 50%;
}
.about__text > * {
  opacity: var(--in, 1);
  transform: translate3d(calc((1 - var(--in, 1)) * 10vw), 0, 0);
}
@media (min-width: 900px) {
  .about__photo { transform: translate3d(calc((1 - var(--photo-in, 1)) * -10vw), 0, 0) scale(calc(0.94 + 0.06 * var(--photo-in, 1))); }
  .about__text > * { transform: translate3d(calc((1 - var(--in, 1)) * 7vw), 0, 0); }
}
.about__text p { color: var(--sc-ink-soft); }
.about__text p.about__lead { color: var(--sc-ink); font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: -0.01em; }
/* The analogy is the line to remember: larger, in full ink. */
.about__text p.about__analogy { color: var(--sc-ink); font-size: var(--sc-t-xl); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; text-wrap: pretty; }
/* Signature: a real signature face, written on from left to right as the line lands. */
/* Like a quick pen signature: tall, sweeping capitals, small fast lowercase. */
.about__text p.about__sign { margin-top: var(--sc-6); color: var(--sc-accent); font-family: "ME Signatur", "Caveat", cursive; font-size: 3rem; font-weight: 400; line-height: 1.2; }
.about__sign b { font-weight: inherit; font-size: 1.5em; line-height: 0; }
.about__sign span[aria-hidden] {
  display: inline-block;
  padding: 0.2em 0.3em 0.15em 0;
  transform: rotate(-6deg);
  transform-origin: 0 100%;
  clip-path: inset(-0.4em calc((1 - var(--in, 1)) * 100%) -0.4em -0.2em);
}
@media (min-width: 900px) { .about__text p.about__sign { font-size: 3.6rem; } }
.about__text .section-title { margin-bottom: 0; }
@media (min-width: 900px) {
  .about__grid { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(3rem, 8vw, 8rem); align-items: center; max-width: 74rem; }
  .about__photo { --face: 15rem; justify-self: center; }
  .about__text { max-width: 40rem; }
}

/* ----------------------------------------------------------------- close -- */
/* The quietest screen of the page: one warm sentence, the same button as in the hero,
   the mail as the second way in, and the colophon under a hairline at the foot. A low warm glow on the bottom edge
   echoes the sunset of the hero, so the page ends where it began. */
.close {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--sc-8);
  padding: var(--sc-9) var(--sc-gutter) calc(var(--sc-3) + env(safe-area-inset-bottom));
  overflow: hidden;
}
.close::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 70% 42% at 50% 100%, rgb(224 162 94 / 0.16), rgb(224 162 94 / 0.045) 55%, transparent 80%);
  pointer-events: none;
}
.close__inner { align-self: center; display: grid; justify-items: center; gap: var(--sc-3); text-align: center; }
.close__title { max-width: 22ch; margin: 0 0 clamp(2rem, 6svh, 3.5rem); font-size: var(--sc-t-2xl); font-weight: 520; letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; }
/* Same as the hero: the one button, the note under it. */
.close__cta { display: grid; justify-items: center; gap: var(--sc-3); }
.close__note { max-width: 36ch; color: #C29462; font-size: var(--sc-t-sm); line-height: 1.5; text-wrap: balance; }
.close__mail { display: grid; justify-items: center; margin-top: var(--sc-7); }
.close__mail span { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.close__mail a {
  display: inline-block;
  padding: 0.3em 0.1em;
  color: var(--sc-ink);
  font-size: var(--sc-t-lg);
  letter-spacing: -0.01em;
  text-decoration-color: var(--sc-hairline-strong);
  text-underline-offset: 0.28em;
  transition: color 160ms var(--sc-ease-out), text-decoration-color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .close__mail a:hover { color: var(--sc-accent); text-decoration-color: currentColor; }
}
.close__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sc-1);
  width: 100%;
  max-width: calc(var(--sc-maxw) - 2 * var(--sc-gutter));
  margin-inline: auto;
  padding-top: var(--sc-4);
  border-top: 1px solid var(--sc-hairline);
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
  text-align: center;
}
.close__sign { display: grid; line-height: 1.5; text-wrap: balance; }
.close__name { color: var(--sc-ink); font-weight: 560; letter-spacing: -0.01em; }
.close__legal { display: flex; justify-content: center; gap: var(--sc-5); }
.close__legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sc-ink-soft); text-decoration: none; transition: color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .close__legal a:hover { color: var(--sc-ink); } }
@media (min-width: 900px) {
  .close__foot { flex-direction: row; justify-content: space-between; align-items: flex-end; text-align: left; }
}

/* --------------------------------------------------------------- booking -- */
/* Every "Erstgespräch buchen" opens the Google appointment page in this panel (site.js).
   The calendar is white, so the panel frames it like a sheet laid on the dark page.
   Phones get the whole screen; from 900px it floats over the dimmed page. */
.booking {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: var(--sc-surface);
  color: var(--sc-ink);
  overflow: hidden;
}
.booking[open] { display: flex; flex-direction: column; animation: booking-in 360ms var(--sc-ease-out); }
/* ::backdrop does not inherit custom properties in every browser, so plain values here. */
.booking::backdrop {
  background: rgb(6 6 7 / 0.74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: booking-fade 360ms cubic-bezier(0.23, 1, 0.32, 1);
}
.booking__head {
  display: flex;
  align-items: center;
  gap: var(--sc-3);
  padding: calc(env(safe-area-inset-top) + var(--sc-3)) var(--sc-3) var(--sc-3) var(--sc-gutter);
  border-bottom: 1px solid var(--sc-hairline);
}
.booking__titles { flex: 1; min-width: 0; }
.booking__title { margin: 0; font-size: var(--sc-t-base); font-weight: 560; letter-spacing: -0.01em; line-height: 1.3; }
.booking__note { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.4; }
.booking__out {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-width: 44px; min-height: 44px;
  justify-content: center;
  padding: 0 0.5em;
  border-radius: 999px;
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-sm);
  text-decoration: none;
  transition: color 160ms var(--sc-ease-out);
}
.booking__out svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.booking__out-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.booking__close {
  position: relative;
  flex: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--sc-ink);
  cursor: pointer;
  transition: background-color 160ms var(--sc-ease-out);
}
.booking__close span {
  position: absolute;
  left: 13px; right: 13px; top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 1px;
  background: currentColor;
  transform: rotate(45deg);
}
.booking__close span + span { transform: rotate(-45deg); }
.booking__close:active { transform: scale(0.94); }
.booking__close:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) {
  .booking__out:hover { color: var(--sc-ink); }
  .booking__close:hover { background: color-mix(in oklab, var(--sc-ink) 9%, transparent); }
}
.booking__body { position: relative; flex: 1; background: #fff; }
.booking__wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #6B665F;
  font-size: var(--sc-t-sm);
  animation: booking-wait 1.6s ease-in-out infinite alternate;
}
.booking__frame {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 320ms var(--sc-ease-out);
}
.booking.is-loaded .booking__frame { opacity: 1; }
.booking.is-loaded .booking__wait { visibility: hidden; }
@media (min-width: 600px) {
  .booking__out-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
@media (min-width: 900px) {
  .booking {
    width: min(68rem, 100% - 2 * var(--sc-gutter));
    height: min(54rem, 100% - 2 * var(--sc-6));
    margin: auto;
    border: 1px solid var(--sc-hairline);
    border-radius: var(--sc-r-md);
    box-shadow: var(--sc-e3), var(--sc-edge);
  }
  .booking__head { padding: var(--sc-3) var(--sc-3) var(--sc-3) var(--sc-6); }
}
@keyframes booking-in { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.985); } }
@keyframes booking-fade { from { opacity: 0; } }
@keyframes booking-wait { from { opacity: 0.45; } }
html.is-booking { overflow: hidden; }

/* ----------------------------------------------------------------- legal -- */
.legal { max-width: 46rem; margin-inline: auto; padding: var(--sc-8) var(--sc-gutter) var(--sc-9); }
.legal__back { display: inline-flex; align-items: center; min-height: 44px; color: var(--sc-ink-soft); }
.legal h1 { margin: var(--sc-6) 0 var(--sc-7); font-size: var(--sc-t-2xl); font-weight: 540; letter-spacing: -0.03em; line-height: 1.05; }
.legal h2 { margin: var(--sc-7) 0 var(--sc-3); font-size: var(--sc-t-lg); font-weight: 540; letter-spacing: -0.01em; line-height: 1.3; }
/* The generated privacy text nests two levels deeper: h3 per topic, h4 per question. */
.legal h3 { margin: var(--sc-6) 0 var(--sc-2); font-size: var(--sc-t-base); font-weight: 540; line-height: 1.35; }
.legal h4 { margin: var(--sc-4) 0 var(--sc-1); font-size: var(--sc-t-base); font-weight: 460; line-height: 1.35; }
.legal h2 + h3 { margin-top: var(--sc-3); }
.legal p, .legal li { color: var(--sc-ink-soft); max-width: 62ch; overflow-wrap: break-word; }
.legal p + p { margin-top: var(--sc-3); }
.legal ul { margin: var(--sc-3) 0; padding-left: 1.2em; }
.legal li + li { margin-top: var(--sc-2); }
.legal strong { color: var(--sc-ink); font-weight: 540; }
.legal .legal__source { margin-top: var(--sc-7); font-size: var(--sc-t-sm); }
.legal__foot { display: flex; gap: var(--sc-5); margin-top: var(--sc-9); font-size: var(--sc-t-sm); }
.legal__foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sc-ink-soft); }

/* ------------------------------------------------- Runde 9: Suchtreffer -- */
/* Suchtreffer statt Anzeige: steht im 4:5-Feld und öffnet sich zur Seite.
   Generische Suchoberfläche, kein Logo einer Suchmaschine. */
.srch { display: flex; flex-direction: column; justify-content: center; gap: 4cqw; padding: 6cqw; }
.srch__bar {
  display: flex; align-items: center; gap: 3cqw;
  height: 11cqw; padding-inline: 4.4cqw;
  border-radius: 999px; background: #fff;
  box-shadow: 0 1.2cqw 3cqw rgb(0 0 0 / 0.18);
}
.srch__icon {
  flex: none; width: 3.6cqw; height: 3.6cqw;
  border: 0.8cqw solid #7A766F; border-radius: 50%;
  position: relative;
}
.srch__icon::after {
  content: ""; position: absolute; right: -1.7cqw; bottom: -1.5cqw;
  width: 1.9cqw; height: 0.8cqw; border-radius: 1px; background: #7A766F;
  transform: rotate(45deg);
}
.srch__q { color: #1C1C1C; font-size: 4.3cqw; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.srch__hit {
  display: grid; gap: 1.4cqw;
  padding: 5cqw; border-radius: 3cqw; background: #fff;
  box-shadow: 0 1.2cqw 3cqw rgb(0 0 0 / 0.18);
}
.srch__site { display: flex; align-items: center; gap: 2.2cqw; margin-bottom: 0.8cqw; }
.srch__fav { display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; background: #EEF3F1; }
.srch__fav svg { width: 3.8cqw; height: 3.8cqw; }
.srch__site > span:last-child { display: grid; }
.srch__name { color: #1C1C1C; font-size: 3.2cqw; font-weight: 540; line-height: 1.2; }
.srch__url { color: #5E5A54; font-size: 2.8cqw; line-height: 1.2; }
.srch__title { color: #1F4A45; font-size: 5.2cqw; font-weight: 560; line-height: 1.18; letter-spacing: -0.015em; }
.srch__stars { color: #B97A2E; font-size: 3.6cqw; line-height: 1; letter-spacing: 0.08em; }
.srch__text { color: #4A4640; font-size: 3.4cqw; line-height: 1.4; }
.srch__links { display: flex; flex-wrap: wrap; gap: 1.6cqw; margin-top: 1.2cqw; }
.srch__links i { padding: 1cqw 2.6cqw; border: 1px solid #DCD7CF; border-radius: 999px; color: #1F4A45; font-size: 2.9cqw; font-style: normal; }
.srch__job {
  display: grid; gap: 0.8cqw;
  padding: 3.6cqw 5cqw; border-radius: 3cqw;
  background: rgb(255 255 255 / 0.9);
  box-shadow: 0 1.2cqw 3cqw rgb(0 0 0 / 0.14);
}
.srch__label { color: #5E5A54; font-size: 2.7cqw; font-weight: 560; letter-spacing: 0.04em; text-transform: uppercase; }
.srch__jtitle { color: #1F4A45; font-size: 4cqw; font-weight: 560; line-height: 1.2; letter-spacing: -0.01em; }
.srch__jmeta { color: #4A4640; font-size: 3cqw; line-height: 1.3; }

/* Empfohlenes Paket: ein Etikett in der Akzentfarbe, keine Karte. */
.paket__tag {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.12em 0.6em;
  border: 1px solid var(--sc-accent);
  border-radius: 999px;
  color: var(--sc-accent);
  font-size: var(--sc-t-sm);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  vertical-align: 0.15em;
  white-space: nowrap;
}

/* Lange Zeilen ohne Überlauf: Größe aus der verfügbaren Breite.
   „Handwerk.“ ist ca. 4,65 em breit (längste Zeile der Hero-Headline, Runde 33; vorher
   „Handwerksbetriebe.“ mit 8,7 em, das hielt die Headline am Handy bei 39 px).
   Die Hero-Headline misst an .hero__inner (cqi = Breite ohne
   Scrollbalken und Ränder), nicht am Fenster: 100vw zählt einen Desktop-Scrollbalken mit,
   dann war die Zeile zu breit und der Cursor rutschte in eine dritte Zeile.
   Ab 900 px zusätzlich über die Höhe begrenzt, damit flache Laptops (1280 × 720) Luft
   behalten; ab 900 px Höhe greift das nicht. Die vw-Zeilen sind nur Rückfall. */
.hero__inner { container-type: inline-size; }
.hero__what { font-size: min(4.4rem, calc((100vw - 2 * var(--sc-gutter)) / 5.1)); font-size: min(4.4rem, 100cqi / 4.9); }
@media (min-width: 900px) {
  .hero__what { font-size: min(clamp(5rem, 9.6vw, 10.5rem), calc((100vw - 2 * var(--sc-gutter)) / 5.1), 15.5svh); font-size: min(clamp(5rem, 9.6vw, 10.5rem), 100cqi / 4.9, 15.5svh); }
}
/* Flache Laptops (bis 800 px Höhe): Headline und Abstand darunter etwas knapper, damit
   die Headline nicht an der Navbar klebt und der Button Luft zum unteren Rand behält. */
@media (min-width: 900px) and (max-height: 800px) {
  .hero__inner { gap: var(--sc-7); }
  .hero__what { font-size: min(clamp(5rem, 9.6vw, 10.5rem), calc((100vw - 2 * var(--sc-gutter)) / 5.1), 13svh); font-size: min(clamp(5rem, 9.6vw, 10.5rem), 100cqi / 4.9, 13svh); }
}