/* NH Gartenbau – Entwurf
   Tanne + Kalk, Akzent Bagger-Mint (Farbe der NH-Maschinen). Besley + Be Vietnam Pro. */

:root {
  --tanne: #1C332B;
  --tanne-hell: #2A453B;
  --kalk: #E9E6DC;
  --kalk-tief: #DDD9CD;
  --granit: #1F2522;
  --mint: #8FD9B6;
  --mint-tief: #6FC49D;

  --text-1: rgba(31, 37, 34, .92);
  --text-2: rgba(31, 37, 34, .68);
  --text-3: rgba(31, 37, 34, .48);
  --hell-1: rgba(233, 230, 220, .94);
  --hell-2: rgba(233, 230, 220, .72);
  --hell-3: rgba(233, 230, 220, .5);
  --linie: rgba(31, 37, 34, .16);
  --linie-hell: rgba(233, 230, 220, .18);

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px;
  --rand: 20px;
  --breite: 1200px;
  --radius: 6px;

  --serif: "Besley", Georgia, serif;
  --sans: "Be Vietnam Pro", system-ui, sans-serif;
  --expo: cubic-bezier(0.19, 1, 0.22, 1);
}

@media (min-width: 900px) { :root { --rand: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--kalk);
  color: var(--text-1);
  font: 400 17px/1.55 var(--sans);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
:focus-visible { outline: 2px solid var(--mint-tief); outline-offset: 3px; border-radius: 2px; }

.rahmen { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--s3);
  background: var(--mint); color: var(--granit);
  font: 500 17px/1 var(--sans); text-decoration: none;
  border: 0; border-radius: 999px; cursor: pointer;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.knopf:hover { background: #A6E3C7; }
.knopf:active { transform: scale(.98); }
.knopf--klein { min-height: 40px; padding: 0 var(--s2); font-size: 15px; }
.knopf--voll { width: 100%; }

.textlink {
  display: inline-block; padding: 8px 0;
  color: var(--hell-1); text-decoration: underline; text-decoration-color: var(--hell-3);
  text-underline-offset: 4px; transition: text-decoration-color 150ms ease-out;
}
.textlink:hover { text-decoration-color: var(--mint); }

/* ---------- Kopf: Wortmarke hängt als Tafel vom oberen Rand ---------- */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: var(--tanne);
  transition: box-shadow 200ms ease-out;
}
.kopf.ist-gescrollt { box-shadow: 0 1px 0 var(--linie-hell); }
.kopf__innen {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand);
  height: 64px;
}
.marke {
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--kalk); color: var(--tanne); text-decoration: none;
  padding: var(--s2) var(--s2) 10px; border-radius: 0 0 var(--radius) var(--radius);
  min-height: 72px;
}
.marke__name { font: 600 21px/1 var(--serif); letter-spacing: -0.02em; }
.marke__ort { font: 500 12px/1 var(--sans); color: rgba(28, 51, 43, .64); margin-top: 6px; letter-spacing: 0.01em; }
.kopf__nav { display: none; }
.kopf .knopf { align-self: center; }

@media (min-width: 900px) {
  .kopf__innen { height: 72px; }
  .marke { min-height: 84px; padding: var(--s3) var(--s3) 12px; }
  .marke__name { font-size: 24px; }
  .kopf__nav { display: flex; gap: var(--s4); align-self: center; margin-left: auto; }
  .kopf__nav a {
    color: var(--hell-2); text-decoration: none; font-size: 16px;
    transition: color 150ms ease-out;
  }
  .kopf__nav a:hover { color: var(--hell-1); }
}

/* ---------- Einstieg ---------- */
.einstieg {
  background: var(--tanne); color: var(--hell-1);
  padding: var(--s3) 0 var(--s5);
}
.einstieg__raster { display: grid; gap: var(--s3); }
.titel {
  font: 500 44px/1.02 var(--serif);
  letter-spacing: -0.03em;
  color: var(--hell-1);
  hyphens: manual;
  margin-top: var(--s1);
}
.zeile { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.zeile > span { display: block; }
.einstieg__satz { margin-top: var(--s3); max-width: 34em; color: var(--hell-2); font-size: 17px; }
.einstieg__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s3); }

.js .zeile > span { transform: translateY(105%); animation: steigen 1000ms var(--expo) forwards; }
.js .zeile:nth-child(2) > span { animation-delay: 90ms; }
.js .zeile:nth-child(3) > span { animation-delay: 180ms; }
@keyframes steigen { to { transform: none; } }

/* Bauverlauf */
.bau { margin: 0; }
.bau__bild {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius); background: var(--tanne-hell);
}
.bau__bild img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 140ms ease-out;
}
.bau__bild img.ist-aktiv { opacity: 1; }
.bau__leiste { margin-top: var(--s2); }
.bau__zeile { display: flex; align-items: center; gap: var(--s2); }
.bau__zahl { font: 500 15px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--mint); white-space: nowrap; }
.bau__titel { font: 500 17px/1.3 var(--serif); color: var(--hell-1); flex: 1; min-width: 0; }
.bau__abspielen {
  background: none; border: 0; padding: 0 2px; min-height: 36px; cursor: pointer;
  color: var(--hell-2); font: 500 14px/1 var(--sans);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hell-3);
  transition: color 150ms ease-out;
}
.bau__abspielen:hover { color: var(--hell-1); }
.bau__regler { position: relative; height: 28px; margin-top: var(--s1); }
.bau__striche { position: absolute; inset: 0; display: flex; gap: 4px; align-items: center; pointer-events: none; }
.bau__striche span { flex: 1; height: 4px; border-radius: 2px; background: var(--linie-hell); transition: background-color 150ms ease-out; }
.bau__striche span.ist-fertig { background: var(--mint); }
.bau__regler input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.bau__regler input:focus-visible + * , .bau__regler:focus-within { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 4px; }
.bau__info { margin-top: var(--s1); font-size: 14px; line-height: 1.5; color: var(--hell-3); max-width: 46em; }

@media (min-width: 900px) {
  .einstieg { padding: var(--s6) 0; }
  .einstieg__raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s5); align-items: center; }
  .titel { font-size: clamp(56px, 5.6vw, 76px); line-height: 1; margin-top: 0; }
  .einstieg__satz { font-size: 18px; margin-top: var(--s4); }
  .einstieg__aktionen { margin-top: var(--s4); }
  .bau { max-width: 620px; justify-self: end; width: 100%; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding: var(--s5) 0; }
.abschnitt--flaeche { background: var(--kalk-tief); }
@media (min-width: 900px) { .abschnitt { padding: var(--s6) 0 calc(var(--s6) + var(--s3)); } }

.h2 { font: 500 36px/1.05 var(--serif); letter-spacing: -0.025em; color: var(--text-1); }
.h3 { font: 500 24px/1.15 var(--serif); letter-spacing: -0.015em; color: var(--text-1); }
@media (min-width: 900px) { .h2 { font-size: 56px; } .h3 { font-size: 30px; } }

.kopfzeile { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.kopfzeile__text { color: var(--text-2); max-width: 34em; }
@media (min-width: 900px) {
  .kopfzeile { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s5); align-items: end; margin-bottom: var(--s5); }
  .kopfzeile__text { font-size: 18px; }
}

/* Leistungen: ruhige Liste, Bild folgt der Maus */
.liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.liste__punkt {
  display: grid; grid-template-columns: 1fr 96px; gap: var(--s1) var(--s2);
  padding: var(--s3) 0; border-bottom: 1px solid var(--linie);
}
.liste__name { font: 500 23px/1.15 var(--serif); letter-spacing: -0.015em; grid-column: 1; }
.liste__text { grid-column: 1; color: var(--text-2); font-size: 16px; }
.liste__bild {
  grid-column: 2; grid-row: 1 / span 2; width: 96px; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 4px; align-self: start;
}
@media (min-width: 900px) {
  .liste__punkt {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s5);
    padding: var(--s4) 0; align-items: baseline;
  }
  .liste__name { font-size: 36px; transition: transform 300ms var(--expo); }
  .liste__text { grid-column: 2; grid-row: 1; font-size: 17px; max-width: 30em; }
  .liste__bild { display: none; }
  .liste__punkt:hover .liste__name { transform: translateX(var(--s2)); }
}

.folge {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  width: 300px; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  opacity: 0; transform: translate3d(-999px, -999px, 0) scale(.9);
  transition: opacity 200ms ease-out;
  display: none;
}
.folge img { width: 100%; height: 100%; object-fit: cover; }
.folge.ist-sichtbar { opacity: 1; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .folge { display: block; } }

/* Steine */
.steine { margin-top: var(--s5); }
.steine__reihe {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--s2);
  margin: var(--s3) calc(-1 * var(--rand)) 0; padding: 0 var(--rand) var(--s1);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--rand);
  scrollbar-width: none;
}
.steine__reihe::-webkit-scrollbar { display: none; }
.stein { scroll-snap-align: start; }
.stein img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--radius); }
.stein figcaption { margin-top: var(--s2); color: var(--text-2); font-size: 16px; max-width: 26em; }
.stein strong { display: block; color: var(--text-1); font: 500 19px/1.25 var(--serif); margin-bottom: 4px; }
@media (min-width: 640px) {
  .steine__reihe { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: var(--s3) 0 0; padding: 0; overflow: visible; }
}
@media (min-width: 900px) { .steine { margin-top: var(--s6); } .steine__reihe { margin-top: var(--s4); } }

/* Arbeiten */
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s2); }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.galerie figcaption { margin-top: var(--s1); font-size: 15px; color: var(--text-2); }
@media (min-width: 900px) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s3); } .galerie figcaption { font-size: 16px; } }

/* Über uns */
.ueber { display: grid; gap: var(--s4); }
.ueber__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.ueber__bild figcaption { margin-top: var(--s1); font-size: 14px; color: var(--text-3); }
.ueber__text > p { margin-top: var(--s3); color: var(--text-2); max-width: 34em; }
.zitat { margin: var(--s4) 0 0; padding-left: var(--s3); border-left: 3px solid var(--mint-tief); }
.zitat p { font: 500 24px/1.25 var(--serif); letter-spacing: -0.015em; color: var(--text-1); }
.zitat cite { display: block; margin-top: var(--s1); font-style: normal; font-size: 14px; color: var(--text-3); }
.fakten { margin-top: var(--s4); border-top: 1px solid var(--linie); }
.fakten div { display: grid; grid-template-columns: 7.5em 1fr; gap: var(--s2); padding: 12px 0; border-bottom: 1px solid var(--linie); font-size: 16px; }
.fakten dt { color: var(--text-3); }
@media (min-width: 900px) {
  .ueber { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s5); align-items: start; }
  .ueber__bild { max-width: 560px; position: sticky; top: 104px; }
  .zitat p { font-size: 30px; }
}

/* ---------- Kontakt ---------- */
.kontakt { background: var(--tanne); color: var(--hell-1); padding: var(--s5) 0; }
.kontakt .h2 { color: var(--hell-1); }
.kontakt__raster { display: grid; gap: var(--s5); }
.kontakt__satz { margin-top: var(--s2); color: var(--hell-2); max-width: 30em; }
.kontakt__mail {
  display: inline-block; margin-top: var(--s4);
  font: 500 30px/1.1 var(--serif); letter-spacing: -0.02em; color: var(--mint);
  text-decoration: none; overflow-wrap: anywhere;
  border-bottom: 2px solid rgba(143, 217, 182, .4); padding-bottom: 4px;
  transition: border-color 150ms ease-out;
}
.kontakt__mail:hover { border-color: var(--mint); }
.kontakt__liste { margin-top: var(--s4); border-top: 1px solid var(--linie-hell); }
.kontakt__liste div { display: grid; grid-template-columns: 6.5em 1fr; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--linie-hell); }
.kontakt__liste dt { color: var(--hell-3); }
.kontakt__liste a { display: inline-block; padding: 6px 0; margin: -6px 0; color: var(--hell-1); text-underline-offset: 4px; text-decoration-color: var(--hell-3); }
@media (min-width: 900px) {
  .kontakt { padding: var(--s6) 0; }
  .kontakt__raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
  .kontakt__mail { font-size: 48px; }
}

/* Anfrage-Zettel */
.zettel {
  background: var(--kalk); color: var(--text-1);
  border-radius: var(--radius); padding: var(--s3);
  display: grid; gap: var(--s3);
}
.zettel__titel { font: 500 24px/1.1 var(--serif); letter-spacing: -0.015em; }
.zettel__wahl { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.zettel__wahl legend { font-size: 15px; color: var(--text-2); margin-bottom: var(--s1); padding: 0; }
.zettel__wahl label { position: relative; cursor: pointer; }
.zettel__wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zettel__wahl span {
  display: inline-block; padding: 9px 14px; border-radius: 999px; font-size: 15px;
  border: 1px solid var(--linie); background: #F2F0E9;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.zettel__wahl input:checked + span { background: var(--tanne); color: var(--hell-1); border-color: var(--tanne); }
.zettel__wahl input:focus-visible + span { outline: 2px solid var(--mint-tief); outline-offset: 2px; }
.feld { display: grid; gap: 6px; font-size: 15px; color: var(--text-2); }
.feld input, .feld textarea {
  font: 400 17px/1.4 var(--sans); color: var(--text-1);
  background: #F2F0E9; border: 1px solid var(--linie); border-radius: 4px;
  padding: 12px 14px; width: 100%; resize: vertical;
  transition: border-color 150ms ease-out;
}
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--tanne); }
.zettel .knopf { background: var(--tanne); color: var(--hell-1); }
.zettel .knopf:hover { background: var(--tanne-hell); }
.zettel__hinweis { font-size: 14px; color: var(--text-3); margin-top: calc(-1 * var(--s1)); }
@media (min-width: 900px) { .zettel { padding: var(--s4); } }

/* ---------- Fuss ---------- */
.fuss { background: #16291F; color: var(--hell-3); padding: var(--s4) 0; font-size: 14px; }
.fuss__innen { display: grid; gap: var(--s1); }
.fuss strong { color: var(--hell-2); font-weight: 500; }
.fuss a { display: inline-block; padding: 6px 0; margin: -6px 0; color: var(--hell-2); text-underline-offset: 3px; }
.fuss__entwurf { margin-top: var(--s2); color: var(--hell-2); }

/* ---------- Ohne Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .zeile > span { animation: none; transform: none; }
  .bau__bild img { transition: none; }
  .liste__name { transition: none !important; }
  .folge { display: none !important; }
}