:root {
  --grund: #eceeea;
  --tinte: 30 35 32;
  --t1: rgb(var(--tinte) / .92);
  --t2: rgb(var(--tinte) / .68);
  --t3: rgb(var(--tinte) / .48);
  --linie: rgb(var(--tinte) / .14);
  --rot: #c8262b;
  --rot-dunkel: #a91e22;
  --russ: #1e2320;
  --hell: #eceeea;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px;
  --rand: 20px;
  --breite: 1200px;
  --radius: 4px;
  --expo: cubic-bezier(0.19, 1, 0.22, 1);

  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--t1);
  font: 400 17px/1.5 var(--sans);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: var(--s3);
  height: 64px; padding: 0 var(--rand);
  background: rgb(236 238 234 / .9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease-out;
}
.kopf.ist-gescrollt { border-color: var(--linie); }
.kopf-marke { display: flex; align-items: center; min-height: 44px; gap: var(--s1); text-decoration: none; font-weight: 560; letter-spacing: -0.02em; font-size: 18px; }
.kopf-marke img { width: 42px; height: 31px; object-fit: cover; object-position: top; }
.kopf-nav { display: none; gap: var(--s3); margin-left: auto; }
.kopf-nav a { text-decoration: none; color: var(--t2); transition: color 150ms ease-out; }
.kopf-nav a:hover { color: var(--t1); }
.kopf-knopf {
  margin-left: auto; padding: 8px 16px;
  border: 1px solid var(--t1); border-radius: 999px;
  text-decoration: none; font-size: 15px; font-weight: 520;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.kopf-knopf:hover { background: var(--russ); color: var(--hell); }

/* Knopf */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--s3);
  background: var(--rot); color: var(--hell);
  border: 0; border-radius: 999px;
  font: 540 17px/1 var(--sans); letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color 150ms ease-out;
}
.knopf:hover { background: var(--rot-dunkel); }

/* Abschnitte */
main > section { padding: var(--s5) var(--rand); }
main > section > * { max-width: var(--breite); margin-inline: auto; }
.abschnitt-kopf { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
h2 { font-size: 34px; font-weight: 520; letter-spacing: -0.03em; line-height: 1.05; color: var(--t1); }
.abschnitt-kopf p { max-width: 58ch; color: var(--t2); }

/* Einstieg */
.einstieg { padding-top: var(--s3) !important; padding-bottom: var(--s3) !important; display: grid; gap: var(--s3); }
.einstieg > * { width: 100%; }
h1 {
  font-size: 46px; font-weight: 520; letter-spacing: -0.035em; line-height: 1;
  color: var(--t1);
}
.zeile { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.zeile > span { display: inline-block; transform: translateY(105%); animation: steigen 1000ms var(--expo) forwards; }
.zeile:nth-child(2) > span { animation-delay: 90ms; }
@keyframes steigen { to { transform: none; } }
.einstieg-satz { margin-top: var(--s2); color: var(--t2); max-width: 46ch; }
.einstieg-tun { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s3); }
.vertrauen { font-size: 15px; color: var(--t2); }

/* Vorher / nachher */
.vn {
  position: relative; overflow: hidden;
  aspect-ratio: var(--ratio, 4 / 3);
  border-radius: var(--radius);
  background: var(--russ);
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  cursor: ew-resize;
}
.vn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vn-vorher { clip-path: inset(0 calc(100% - var(--p) * 1%) 0 0); }
.vn-strich {
  position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 1%);
  width: 6px; margin-left: -3px;
  background: var(--rot);
  cursor: ew-resize;
}
.vn-strich::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: var(--rot);
  box-shadow: 0 0 0 4px rgb(236 238 234 / .9);
}
.vn-strich::before {
  content: "‹ ›"; position: absolute; z-index: 1; top: 50%; left: 50%;
  transform: translate(-50%, -54%);
  color: var(--hell); font: 600 18px/1 var(--sans); letter-spacing: 0.04em; white-space: nowrap;
}
.vn-label {
  position: absolute; top: var(--s2); z-index: 1;
  padding: 4px 10px; border-radius: 999px;
  background: rgb(30 35 32 / .72); color: var(--hell);
  font-size: 13px; font-weight: 520; letter-spacing: 0;
  pointer-events: none;
}
.vn-label--l { left: var(--s2); }
.vn-label--r { right: var(--s2); }
.vn figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; justify-content: space-between; gap: var(--s2);
  padding: var(--s4) var(--s2) var(--s2);
  background: linear-gradient(to top, rgb(30 35 32 / .7), transparent);
  color: var(--hell); font-size: 15px; font-weight: 520;
  pointer-events: none;
}
.vn figcaption span { font-weight: 400; opacity: .8; }

.riesenname { display: block; width: 100%; height: auto; min-width: 0; margin-top: var(--s1); overflow: visible; }
.riesenname text { fill: var(--rot); font: 560 136px var(--sans); letter-spacing: -0.045em; }

/* Arbeiten */
.arbeiten-raster { display: grid; gap: var(--s3); }
.vn--wahl { transition: aspect-ratio 600ms var(--expo); }
.vn--wahl.ist-neu img { animation: aufdecken 900ms var(--expo); }
@keyframes aufdecken {
  from { clip-path: inset(100% 0 0 0); transform: scale(1.15); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}
.vn--wahl.ist-neu .vn-vorher { animation-name: aufdecken-vorher; }
@keyframes aufdecken-vorher {
  from { clip-path: inset(100% calc(100% - var(--p) * 1%) 0 0); transform: scale(1.15); }
  to { clip-path: inset(0 calc(100% - var(--p) * 1%) 0 0); transform: none; }
}
.arbeiten-liste { border-top: 1px solid var(--linie); }
.arbeiten-liste li { border-bottom: 1px solid var(--linie); }
.arbeiten-liste button {
  display: grid; gap: 2px; width: 100%;
  padding: var(--s2) 0; padding-left: var(--s3);
  background: none; border: 0; text-align: left; cursor: pointer;
  font: inherit; color: var(--t2);
  position: relative;
  transition: color 150ms ease-out;
}
.arbeiten-liste button::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  border: 1.5px solid var(--t3);
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.arbeiten-liste button:hover { color: var(--t1); }
.arbeiten-liste button[aria-pressed="true"] { color: var(--t1); }
.arbeiten-liste button[aria-pressed="true"]::before { background: var(--rot); border-color: var(--rot); }
.arbeiten-liste .titel { font-size: 19px; font-weight: 520; letter-spacing: -0.015em; line-height: 1.25; }
.arbeiten-liste .ort { font-size: 14px; color: var(--t3); }

/* Leistungen */
.leistungen-liste { border-top: 1px solid var(--linie); }
.leistungen-liste li {
  display: grid; grid-template-columns: 1fr 80px; grid-template-areas: "h b" "p b";
  column-gap: var(--s2); row-gap: 4px; align-items: start;
  padding: var(--s3) 0; border-bottom: 1px solid var(--linie);
}
.leistungen-liste h3 { grid-area: h; font-size: 24px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; }
.leistungen-liste p { grid-area: p; color: var(--t2); max-width: 52ch; }
.leistungen-liste img { grid-area: b; width: 80px; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.folgebild { display: none; }

/* Familie */
.familie-raster { display: grid; gap: var(--s4); }
.familie-lead { font-family: var(--serif); font-size: 26px; line-height: 1.3; letter-spacing: -0.01em; color: var(--t1); max-width: 30ch; }
.jahre { border-top: 1px solid var(--linie); }
.jahre div { display: grid; grid-template-columns: 64px 1fr; gap: var(--s2); padding: 12px 0; border-bottom: 1px solid var(--linie); }
.jahre dt { font-weight: 560; color: var(--rot); font-variant-numeric: tabular-nums; }
.jahre dd { color: var(--t1); }
.familie-satz { color: var(--t2); max-width: 58ch; }
.familie-bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); margin-top: var(--s4) !important; }
.familie-bilder img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }

/* Kontakt */
.kontakt { background: var(--russ); color: rgb(236 238 234 / .92); }
.kontakt > * { max-width: var(--breite); }
.kontakt h2 { color: rgb(236 238 234 / .92); }
.kontakt .abschnitt-kopf { margin-bottom: 0; }
.kontakt .abschnitt-kopf p { color: rgb(236 238 234 / .68); max-width: 46ch; }
.kontakt-mail {
  display: block; margin-top: var(--s4);
  font-size: 30px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1;
  text-decoration: none; color: var(--hell);
  overflow-wrap: anywhere;
}
.kontakt-mail:hover { text-decoration: underline; text-decoration-color: var(--rot); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.anfrage { display: grid; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid rgb(236 238 234 / .16); }
.anfrage fieldset { border: 0; margin: 0; padding: 0; }
.anfrage legend { padding: 0; margin-bottom: var(--s2); color: rgb(236 238 234 / .68); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span {
  display: inline-block; padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgb(236 238 234 / .3); cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.chips label:hover span { border-color: rgb(236 238 234 / .7); }
.chips input:checked + span { background: var(--hell); color: var(--russ); border-color: var(--hell); }
.chips input:focus-visible + span { outline: 2px solid var(--rot); outline-offset: 3px; }
.feld { display: grid; gap: var(--s1); max-width: 420px; }
.feld span { color: rgb(236 238 234 / .68); }
.feld input {
  height: 52px; padding: 0 var(--s2);
  background: transparent; color: var(--hell);
  border: 1px solid rgb(236 238 234 / .3); border-radius: var(--radius);
  font: inherit;
}
.feld input::placeholder { color: rgb(236 238 234 / .4); }
.anfrage .knopf { justify-self: start; }
.kontakt-infos { display: grid; gap: var(--s2); margin-top: var(--s5); color: rgb(236 238 234 / .68); }

/* Fuss */
.fuss {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3);
  padding: var(--s3) var(--rand) var(--s4);
  background: var(--russ); color: rgb(236 238 234 / .48);
  border-top: 1px solid rgb(236 238 234 / .1);
  font-size: 14px;
}
.fuss a { display: inline-block; padding: 8px 0; color: rgb(236 238 234 / .8); }

/* Computer */
@media (min-width: 900px) {
  :root { --rand: 40px; }
  body { font-size: 18px; }
  main > section { padding: var(--s6) var(--rand); }
  .kopf { height: 72px; padding-inline: max(var(--rand), calc((100% - var(--breite)) / 2)); }
  .kopf-nav { display: flex; }
  .kopf-knopf { margin-left: var(--s2); }
  h2 { font-size: 56px; }

  .einstieg {
    grid-template-columns: 5fr 7fr; column-gap: var(--s5); row-gap: var(--s3);
    align-items: end; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto;
    padding-top: var(--s4) !important;
  }
  .einstieg-text { padding-bottom: var(--s1); }
  h1 { font-size: clamp(64px, 6.4vw, 100px); }
  .vn--gross { max-height: 58vh; aspect-ratio: auto; height: min(58vh, 44vw); }
  .riesenname { grid-column: 1 / -1; }

  .arbeiten-raster { grid-template-columns: 7fr 5fr; gap: var(--s5); align-items: start; }
  .vn--wahl { max-height: 76vh; }
  .arbeiten-liste .titel { font-size: 22px; }

  .leistungen { position: relative; }
  .leistungen-liste li { grid-template-columns: 5fr 7fr; grid-template-areas: "h p"; padding: var(--s4) 0; column-gap: var(--s5); align-items: baseline; }
  .leistungen-liste h3 { font-size: 36px; }
  .leistungen-liste img { display: none; }
  .folgebild {
    display: block; position: fixed; left: 0; top: 0; z-index: 50;
    width: 280px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius);
    pointer-events: none; opacity: 0;
    transition: opacity 200ms ease-out;
  }
  .folgebild.ist-sichtbar { opacity: 1; }

  .familie-raster { grid-template-columns: 6fr 5fr; column-gap: var(--s5); row-gap: var(--s4); }
  .familie-lead { font-size: 34px; grid-row: span 2; }
  .familie-bilder { gap: var(--s3); }

  .kontakt-mail { font-size: clamp(40px, 5.4vw, 80px); }
  .anfrage { grid-template-columns: auto minmax(220px, 1fr) auto; align-items: end; column-gap: var(--s4); }
  .anfrage .feld { max-width: none; }
  .kontakt-infos { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zeile > span { animation: none; transform: none; }
  .vn--wahl.ist-neu img { animation: none; }
  .vn--wahl { transition: none; }
  .folgebild { transition: none; }
}