:root {
  --grund: #F4F6F1;
  --hell: #E8EDE3;
  --text: #15211A;
  --tanne: #0E2117;
  --tanne-2: #183124;
  --tief: #091810;
  --akzent: #2A7F33;
  --akzent-hell: #8CD06F;
  --linie: rgba(21, 33, 26, 0.14);
  --linie-hell: rgba(244, 246, 241, 0.16);
  --rand: 20px;
  --luft: 80px;
  --radius: 8px;
  --leiste: 68px;
  --expo: cubic-bezier(0.19, 1, 0.22, 1);
  --display: "Red Hat Display", system-ui, sans-serif;
  --lauf: "Red Hat Text", system-ui, sans-serif;
  --mono: "Red Hat Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--leiste); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 17px/1.5 var(--lauf);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 3px; }

.breite { max-width: 1200px; margin: 0 auto; padding: 0 var(--rand); }

/* Balken */
.balken {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px var(--rand);
  background: var(--akzent); color: #F7FAF5;
  font-size: 14px; text-decoration: none;
}

/* Kopfleiste: liegt über dem Foto, wird beim Scrollen fest und dunkel */
.leiste {
  position: sticky; top: 0; z-index: 50;
  height: var(--leiste); margin-bottom: calc(var(--leiste) * -1);
  color: var(--grund);
  border-bottom: 1px solid transparent;
  transition: background-color 250ms ease-out, border-color 250ms ease-out;
}
.leiste.fest {
  background: rgba(14, 33, 23, 0.86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-color: var(--linie-hell);
}
.leiste__innen {
  display: flex; align-items: center; gap: 24px;
  max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 var(--rand);
}
.marke { display: flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; }
.marke img { width: 52px; height: auto; filter: drop-shadow(0 2px 8px rgba(9, 24, 16, 0.35)); }
.marke__text { display: grid; line-height: 1.1; }
.marke strong { font: 600 19px/1.1 var(--display); letter-spacing: -0.02em; }
.marke small { display: none; font-size: 12px; opacity: 0.76; }
.nav, .leiste__knopf { display: none; }
.leiste__tel {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 16px;
  border: 1px solid rgba(244, 246, 241, 0.5);
  border-radius: 999px;
  background: rgba(14, 33, 23, 0.4);
  font-size: 14px; text-decoration: none;
  transition: background-color 150ms ease-out;
}
.leiste__tel:hover { background: rgba(14, 33, 23, 0.7); }

/* Einstieg */
.einstieg {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: calc(100svh - 44px);
  background: var(--tanne); color: var(--grund);
  overflow: hidden;
}
.einstieg__bild { position: absolute; inset: 0 0 auto 0; height: 60%; z-index: -1; }
.einstieg__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.einstieg__bild::before, .einstieg__bild::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.einstieg__bild::before { top: 0; height: 132px; background: linear-gradient(rgba(9, 24, 16, 0.62), rgba(9, 24, 16, 0)); z-index: 1; }
.einstieg__bild::after { bottom: -1px; height: 30%; background: linear-gradient(rgba(14, 33, 23, 0), var(--tanne) 92%); }
.einstieg__inhalt { padding: 0 var(--rand) 40px; }
.einstieg__ort {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
  font-size: 15px; color: var(--akzent-hell);
}
.einstieg__ort::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.h1 { font: 500 42px/1.02 var(--display); letter-spacing: -0.035em; }
.zeile { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.zeile > span { display: block; }
.einstieg__satz { margin-top: 16px; max-width: 30em; color: rgba(244, 246, 241, 0.74); }
.einstieg__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  background: var(--akzent); color: #F7FAF5;
  border: 1px solid var(--akzent);
  border-radius: 999px;
  font: 500 17px/1 var(--lauf);
  text-decoration: none;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.knopf:hover { background: #23702B; border-color: #23702B; }
.knopf--linie { background: transparent; border-color: rgba(244, 246, 241, 0.4); color: var(--grund); }
.knopf--linie:hover { background: var(--grund); border-color: var(--grund); color: var(--tanne); }
.knopf--hell { background: var(--akzent-hell); border-color: var(--akzent-hell); color: var(--tief); }
.knopf--hell:hover { background: #A2DC88; border-color: #A2DC88; }
.textlink { display: inline-block; padding: 8px 0; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* Abschnitte */
.abschnitt { padding: var(--luft) 0; }
.abschnitt--dunkel { background: var(--tanne); color: var(--grund); }
.abschnitt--hell { background: var(--hell); }
.kopf { margin-bottom: 40px; }
.h2 { font: 500 34px/1.05 var(--display); letter-spacing: -0.03em; }
.kopf__text { margin-top: 16px; max-width: 32em; opacity: 0.72; }

/* Leistungen */
.spalten { display: grid; gap: 40px; }
.fuerwen { margin-top: 24px; max-width: 30em; font-size: 15px; }
.fuerwen span { display: block; margin-bottom: 4px; opacity: 0.56; }
.liste__zeile { padding: 24px 0; border-top: 1px solid var(--linie); }
.liste__zeile:last-child { border-bottom: 1px solid var(--linie); }
.liste dt { font: 500 26px/1.12 var(--display); letter-spacing: -0.025em; }
.liste dd { margin-top: 8px; max-width: 34em; opacity: 0.72; }

/* Ein Anruf */
.anruf {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 104px 0;
  background: var(--tief); color: var(--grund);
}
.anruf__bild { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0.5; }
.anruf::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(9, 24, 16, 0.2), rgba(9, 24, 16, 0.82)); }
.anruf__titel { font: 500 clamp(46px, 13.5vw, 132px)/0.96 var(--display); letter-spacing: -0.045em; }
.anruf__nummer {
  display: inline-block; margin-top: 40px; padding: 8px 0;
  font-size: clamp(30px, 8.6vw, 64px); font-weight: 500; line-height: 1;
  color: var(--akzent-hell);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
.anruf__text { margin-top: 24px; max-width: 26em; color: rgba(244, 246, 241, 0.8); }

/* Arbeiten */
.arbeiten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vergleich {
  position: relative; grid-column: 1 / -1;
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius);
  background: var(--tanne-2);
  touch-action: pan-y;
}
.vergleich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 88%; }
.vergleich__vorher { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.vergleich__marke {
  position: absolute; bottom: 16px;
  padding: 4px 12px;
  background: rgba(9, 24, 16, 0.78);
  border-radius: 999px;
  font-size: 14px;
}
.vergleich__marke--l { left: 16px; }
.vergleich__marke--r { right: 16px; }
.vergleich__griff { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #FDFEFC; }
.vergleich__griff::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  background: #FDFEFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2117' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 22px no-repeat;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(9, 24, 16, 0.35);
}
.vergleich__regler { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.vergleich:has(.vergleich__regler:focus-visible) { outline: 2px solid var(--akzent-hell); outline-offset: 3px; }
.streifen > div { border-radius: var(--radius); overflow: hidden; }
.streifen img, .platz { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.platz {
  display: grid; place-items: center; padding: 16px;
  border: 1px dashed var(--linie-hell);
  font-size: 14px; text-align: center; color: rgba(244, 246, 241, 0.56);
}
.streifen figcaption { margin-top: 8px; font-size: 14px; opacity: 0.68; }

/* Pakete */
.pakete { display: grid; gap: 16px; }
.paket {
  display: grid; gap: 16px; align-content: start;
  padding: 24px;
  background: #FCFDFB;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  transition: border-color 200ms ease-out, transform 500ms var(--expo);
}
.paket:hover { border-color: var(--akzent); transform: translateY(-4px); }
.paket__name { font: 500 21px/1.2 var(--display); letter-spacing: -0.015em; }
.paket__preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--linie); }
.paket__preis b { font: 500 56px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; color: var(--akzent); }
.paket__preis small { font-size: 15px; opacity: 0.6; }
.paket__text { opacity: 0.76; }
.hinweis { margin-top: 24px; max-width: 36em; font-size: 15px; opacity: 0.68; }

/* Betrieb */
.betrieb { display: grid; gap: 40px; }
.betrieb__bild { border-radius: var(--radius); overflow: hidden; }
.betrieb__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 70%; }
.betrieb__text p { max-width: 32em; margin-top: 16px; }
.betrieb__text .gross { margin-top: 24px; font: 500 26px/1.15 var(--display); letter-spacing: -0.025em; color: var(--akzent); }
.platzhalter { font-size: 15px; opacity: 0.56; }

/* Offerte */
.offerte { display: grid; gap: 40px; }
.kontakt { margin-top: 40px; }
.kontakt li { display: grid; gap: 0; padding: 16px 0; border-top: 1px solid var(--linie-hell); }
.kontakt li:last-child { border-bottom: 1px solid var(--linie-hell); }
.kontakt span { font-size: 14px; opacity: 0.6; }
.kontakt a { display: inline-block; padding: 6px 0; justify-self: start; }
.kontakt em { padding: 6px 0; }
.kontakt a, .kontakt em { font-style: normal; font-size: 18px; text-underline-offset: 5px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.anfrage {
  display: grid; gap: 24px;
  padding: 24px var(--rand);
  margin: 0 calc(var(--rand) * -1);
  background: var(--tanne-2);
}
.anfrage legend { padding: 0; margin-bottom: 16px; font: 500 19px/1.2 var(--display); letter-spacing: -0.01em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--linie-hell);
  border-radius: 999px;
  font-size: 16px;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.chips label:hover span { border-color: rgba(244, 246, 241, 0.5); }
.chips input:checked + span { background: var(--grund); border-color: var(--grund); color: var(--tanne); }
.chips input:focus-visible + span { outline: 2px solid var(--akzent-hell); outline-offset: 3px; }
.felder { display: grid; gap: 16px; }
.feld span { display: block; margin-bottom: 8px; font-size: 14px; opacity: 0.68; }
.feld input {
  width: 100%; min-height: 48px; padding: 0 16px;
  background: transparent;
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  color: inherit; font: inherit;
}
.feld input::placeholder { color: rgba(244, 246, 241, 0.4); }
.feld input:focus { outline: none; border-color: var(--akzent-hell); }
.zettel { padding: 16px; background: var(--grund); color: var(--text); border-radius: var(--radius) var(--radius) var(--radius) 0; }
.zettel__titel { display: block; margin-bottom: 8px; font-size: 13px; opacity: 0.56; }
.zettel p { white-space: pre-line; font-size: 16px; min-height: 4.5em; }
.anfrage__senden { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.anfrage__senden .knopf { flex: 1 1 220px; }

/* Fuss */
.fuss { padding: 64px 0 120px; background: var(--tief); color: var(--grund); font-size: 15px; }
.fuss__innen { display: grid; gap: 24px; }
.fuss img { width: 132px; height: auto; }
.fuss a { display: inline-block; padding: 8px 0; }
.fuss__entwurf { opacity: 0.6; }

/* Schnellkontakt am Handy */
.dock {
  position: fixed; z-index: 60;
  left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
  padding: 4px;
  background: rgba(9, 24, 16, 0.9);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--linie-hell);
  border-radius: 999px;
  color: var(--grund);
  transform: translateY(140%);
  transition: transform 500ms var(--expo);
}
.dock.da { transform: none; }
.dock a {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;
  border-radius: 999px;
  font-size: 15px; font-weight: 500; text-decoration: none;
}
.dock__haupt { background: var(--akzent-hell); color: var(--tief); }

/* Bewegung */
@media (prefers-reduced-motion: no-preference) {
  .einstieg .zeile > span { transform: translateY(108%); animation: steigen 1000ms var(--expo) forwards; }
  .einstieg .zeile:nth-child(2) > span { animation-delay: 90ms; }
  .einstieg .zeile:nth-child(3) > span { animation-delay: 180ms; }
  .einstieg .zeile:nth-child(4) > span { animation-delay: 270ms; }
  .einstieg__bild img { animation: naeher 1800ms var(--expo) both; }

  .js .anruf .zeile > span { transform: translateY(108%); transition: transform 1000ms var(--expo); }
  .js .anruf .zeile:nth-child(2) > span { transition-delay: 90ms; }
  .js .anruf.sichtbar .zeile > span { transform: none; }

  .js .oeffnen { clip-path: inset(100% 0 0 0); transition: clip-path 1000ms var(--expo); }
  .js .oeffnen > img:first-child { transform: scale(1.12); transition: transform 1400ms var(--expo); }
  .js .oeffnen.sichtbar { clip-path: inset(0); }
  .js .oeffnen.sichtbar > img:first-child { transform: none; }
}
@keyframes steigen { to { transform: none; } }
@keyframes naeher { from { transform: scale(1.1); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dock, .paket { transition: none; }
}

/* Computer */
@media (min-width: 900px) {
  :root { --rand: 40px; --luft: 128px; --leiste: 84px; }
  body { font-size: 18px; }
  .marke img { width: 64px; }
  .marke strong { font-size: 22px; }
  .marke small { display: block; }
  .nav { display: flex; gap: 32px; margin-right: 8px; font-size: 16px; }
  .nav a { text-decoration: none; opacity: 0.8; transition: opacity 150ms ease-out; }
  .nav a:hover { opacity: 1; }
  .leiste__tel { border: 0; background: none; padding: 0; font-size: 16px; }
  .leiste__tel:hover { background: none; text-decoration: underline; text-underline-offset: 5px; }
  .leiste__knopf {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 20px;
    background: var(--grund); color: var(--tanne);
    border-radius: 999px;
    font-size: 16px; font-weight: 500; text-decoration: none;
    transition: background-color 150ms ease-out;
  }
  .leiste__knopf:hover { background: var(--akzent-hell); }

  .einstieg { min-height: 0; height: calc(100svh - 44px); min-height: 640px; max-height: 960px; justify-content: center; }
  .einstieg__bild { inset: 0 0 0 auto; width: 52%; height: auto; }
  .einstieg__bild img { object-position: 50% 58%; }
  .einstieg__bild::before { height: 180px; }
  .einstieg__bild::after { top: 0; bottom: 0; right: auto; width: 34%; height: auto; background: linear-gradient(90deg, var(--tanne) 6%, rgba(14, 33, 23, 0)); }
  .einstieg__inhalt {
    width: 100%; max-width: 1200px; margin: 0 auto;
    padding: var(--leiste) var(--rand) 0;
  }
  .h1 { font-size: clamp(56px, min(6.2vw, 10.5svh), 96px); }
  .einstieg__ort { margin-bottom: 24px; font-size: 16px; }
  .einstieg__satz { margin-top: 24px; max-width: 26em; font-size: 19px; }
  .einstieg__knoepfe { margin-top: 40px; gap: 16px; }

  .kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 64px; }
  .kopf__text { margin-top: 0; }
  .h2 { font-size: 56px; }

  .spalten { grid-template-columns: 1fr 1.25fr; gap: 104px; align-items: start; }
  .spalten__kopf { position: sticky; top: calc(var(--leiste) + 40px); }
  .spalten__kopf .kopf__text { margin-top: 24px; }
  .fuerwen { margin-top: 40px; font-size: 16px; }
  .liste__zeile { padding: 40px 0; }
  .liste__zeile:first-child { border-top: 0; padding-top: 8px; }
  .liste dt { font-size: 40px; transition: color 200ms ease-out, transform 500ms var(--expo); }
  .liste__zeile:hover dt { color: var(--akzent); transform: translateX(8px); }
  .liste dd { margin-top: 16px; }

  .anruf { padding: 168px 0; }
  .anruf__innen { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 64px; }
  .anruf__titel { grid-column: 1 / -1; }
  .anruf__nummer { margin-top: 64px; justify-self: start; }
  .anruf__text { margin-top: 0; font-size: 19px; }

  .arbeiten { grid-template-columns: 1.5fr 1fr 1fr; gap: 24px; align-items: start; }
  .vergleich { grid-column: auto; }
  .streifen img, .platz { aspect-ratio: 4 / 7.6; }

  .pakete { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .paket { padding: 40px; gap: 24px; }
  .paket__name { font-size: 24px; }
  .paket__preis { padding-bottom: 24px; }
  .paket__preis b { font-size: 72px; }
  .hinweis { margin-top: 40px; }

  .betrieb { grid-template-columns: 1fr 1.1fr; gap: 104px; align-items: center; }
  .betrieb__text .gross { font-size: 36px; margin-top: 40px; }

  .offerte { grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
  .offerte .h2 + .kopf__text { margin-top: 24px; }
  .anfrage { margin: 0; padding: 40px; border-radius: var(--radius); }
  .felder { grid-template-columns: 1fr 1fr; }
  .anfrage__senden .knopf { flex: 0 0 auto; }

  .fuss { padding: 64px 0; }
  .fuss__innen { grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; }
  .dock { display: none; }
}