/* Huwiler + Söhne – Entwurf von Seetalwebsites
   Idee: aus dem «und» wird ein Plus. Es hält die Familie zusammen und verbindet,
   was sie bauen: Wasser + Mauer + Einfriedung + Pflanzen + Wege + Pläne. */

:root {
  --kies: #E8E4D8;
  --kies-dunkel: #DCD6C4;
  --linie: #CBC4AE;
  --moos: #2C5A41;
  --moos-dunkel: #234A35;
  --text: rgb(28 51 40 / .92);
  --text-2: rgb(28 51 40 / .68);
  --text-3: rgb(28 51 40 / .48);
  --sand: rgb(239 235 223 / .96);
  --sand-2: rgb(239 235 223 / .76);
  --sand-3: rgb(239 235 223 / .56);
  --mai: #C3DD62;
  --mai-hell: #D2E87C;

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

  --expo: cubic-bezier(0.19, 1, 0.22, 1);
  --serif: "Young Serif", Georgia, serif;
  --schrift: "Figtree", "Helvetica Neue", Arial, sans-serif;
}
@media (min-width: 900px) {
  :root { --rand: 40px; --abschnitt: 128px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--kies);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, p, dl, dd, dt, figure, ol, ul, blockquote, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
:focus-visible { outline: 2px solid var(--moos); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--s2); top: -64px; z-index: 100; padding: 12px var(--s2); background: var(--mai); color: #1C3328; border-radius: var(--radius); }
.skip:focus { top: var(--s2); }

.rahmen { width: 100%; max-width: calc(1200px + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.plus { color: var(--mai); font-family: var(--schrift); font-weight: 500; }
.zahlen { font-variant-numeric: tabular-nums; }
.platzhalter { display: inline-block; padding: 0 6px; border: 1px dashed currentColor; border-radius: 4px; font-size: .88em; color: var(--text-2); }
.platzhalter--hell { color: var(--sand-2); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--s3);
  background: var(--mai); color: #1C3328;
  border: 0; border-radius: var(--radius);
  font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease-out, transform .15s ease-out;
}
.knopf:hover { background: var(--mai-hell); }
.knopf:active { transform: scale(.98); }
.knopf--gross { min-height: 56px; }

/* ---------- Einstieg ---------- */
.hero { background: var(--moos); color: var(--sand); }
.hero__panel { display: flex; flex-direction: column; padding: 0 var(--rand) var(--s5); }
.hero__bar { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.marke { font-family: var(--serif); font-size: 20px; letter-spacing: -0.01em; text-decoration: none; min-height: 44px; display: flex; align-items: center; gap: .25em; }
.bar-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--sand-2); text-underline-offset: 6px; transition: color .15s ease-out; }
.bar-link:hover { color: var(--sand); }

.hero__text { padding-top: var(--s4); }
.hero__zeile { font-size: 15px; color: var(--sand-2); margin-bottom: var(--s3); }
.hero__titel {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(54px, 15vw, 120px);
  line-height: 0.98; letter-spacing: -0.03em;
  margin-left: -0.03em;
}
.hero__titel .plus { font-family: var(--serif); font-weight: 400; }
.maske { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.maske > span { display: block; }
.hero__titel-klein { font-size: .42em; letter-spacing: -0.015em; color: var(--sand-2); margin-top: .35em; line-height: 1.1; }
.hero__lead { margin-top: var(--s3); max-width: 30em; color: var(--sand-2); }
.hero__aktion { margin-top: var(--s4); }
.reveal-line { display: block; }
.reveal-line > span { display: block; }
.hero__nav { display: none; }

.hero__bild { position: relative; }
.hero__bild-innen { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.hero__bild-innen img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; object-position: 50% 60%; will-change: transform; }
.hero__bild figcaption { position: absolute; left: var(--rand); bottom: var(--s2); padding: 4px 10px; border-radius: 4px; background: rgb(28 51 40 / .78); font-size: 13px; color: var(--sand); }

@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: minmax(420px, 5fr) 7fr; min-height: 100svh; }
  .hero__panel { padding: 0 var(--s5) var(--s4) var(--rand); padding-left: max(var(--rand), calc((100vw - 1200px) / 2)); }
  .hero__text { margin: auto 0; padding: var(--s5) 0; }
  .hero__titel { font-size: clamp(72px, 7.4vw, 120px); }
  .hero__lead { font-size: 19px; line-height: 1.5; max-width: 24em; }
  .hero__nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); padding-top: var(--s3); border-top: 1px solid rgb(239 235 223 / .2); }
  .hero__nav a { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; color: var(--sand-2); text-decoration: none; transition: color .15s ease-out; }
  .hero__nav a:hover { color: var(--sand); }
  .hero__bild-innen { aspect-ratio: auto; height: 100%; min-height: 560px; }
  .hero__bild figcaption { left: var(--s4); bottom: var(--s4); }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding: var(--abschnitt) 0; }
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -0.025em; }
.kopf { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.kopf__text { color: var(--text-2); max-width: 30em; }
@media (min-width: 900px) {
  .kopf { grid-template-columns: 1fr 1fr; align-items: end; margin-bottom: var(--s5); }
  .kopf__text { justify-self: end; max-width: 26em; }
}

/* ---------- Leistungen ---------- */
.liste { list-style: none; border-bottom: 1px solid var(--linie); }
.posten { border-top: 1px solid var(--linie); padding: var(--s3) 0; }
.posten__knopf {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--s2);
  width: 100%; min-height: 48px; cursor: pointer;
}
.posten__knopf:focus-visible { outline: 2px solid var(--moos); outline-offset: 4px; }
.posten__plus {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--radius);
  background: var(--kies-dunkel); color: var(--moos);
  font-size: 24px; font-weight: 500; line-height: 1;
  transition: transform .6s var(--expo), background-color .15s ease-out, color .15s ease-out;
}
.posten__name { font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.02em; }
.posten__text { color: var(--text-2); max-width: 34em; margin-top: var(--s1); padding-left: 52px; }
.posten__bild { margin-top: var(--s2); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.posten__skizze { margin-top: var(--s2); max-width: 240px; padding: var(--s1); background: #F4F1E8; border-radius: var(--radius); }
.posten.ist-aktiv .posten__plus { background: var(--mai); color: #1C3328; transform: rotate(90deg); }
.leistungen__buehne { display: none; }

@media (min-width: 900px) {
  .leistungen__raster { display: grid; grid-template-columns: 6fr 5fr; gap: var(--s5); align-items: start; }
  .posten { padding: var(--s3) 0; }
  .posten__bild { display: none; }
  .posten__skizze { margin-left: 52px; }
  .posten__text { transition: color .15s ease-out; }
  .posten:not(.ist-aktiv) .posten__text { color: var(--text-3); }
  .posten:hover .posten__plus { background: var(--mai); color: #1C3328; }
  .leistungen__buehne { display: block; position: sticky; top: var(--s4); }
  .buehne { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--kies-dunkel); }
  .buehne__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .buehne__bild.ist-klein { object-fit: contain; padding: var(--s4); background: #F4F1E8; }
  .buehne__bild.kommt { clip-path: inset(100% 0 0 0); transform: scale(1.15); }
  .buehne__bild.ist-da { clip-path: inset(0); transform: none; transition: clip-path .9s var(--expo), transform 1.2s var(--expo); }
}

/* ---------- Gärten ---------- */
.gaerten { background: var(--kies-dunkel); }
.galerie {
  list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s2);
  width: 100%; max-width: calc(1200px + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand);
}
@media (min-width: 900px) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s3); } }
.kachel { text-align: center; }
.kachel__bild { overflow: hidden; border-radius: var(--radius); background: var(--kies); }
.kachel__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s var(--expo); }
.kachel:hover .kachel__bild img { transform: scale(1.04); }
.kachel__titel { margin-top: var(--s2); font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--text); }
.kachel__zeile { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--text-3); }

/* ---------- Familienbetrieb ---------- */
.familie__raster { display: grid; gap: var(--s5); }
.familie__text { display: grid; gap: var(--s3); align-content: start; }
.zitat p { font-family: var(--serif); font-size: clamp(26px, 3vw, 40px); line-height: 1.22; letter-spacing: -0.015em; color: var(--text); max-width: 20em; }
.familie__lauf { color: var(--text-2); max-width: 32em; }
.fakten { border-top: 1px solid var(--linie); align-self: end; }
.fakten > div { display: grid; gap: 2px; padding: var(--s2) 0; border-bottom: 1px solid var(--linie); }
.fakten dt { font-size: 14px; color: var(--text-3); }
.fakten dd { font-size: 16px; }
@media (min-width: 900px) {
  .familie__raster { grid-template-columns: 7fr 4fr; gap: var(--s6); }
  .fakten > div { grid-template-columns: 10em 1fr; gap: var(--s2); }
}

/* ---------- Kontakt ---------- */
.kontakt { background: var(--moos); color: var(--sand); }
.kontakt__raster { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .kontakt__raster { grid-template-columns: 7fr 5fr; gap: var(--s6); } }
.kontakt__intro { margin-top: var(--s2); color: var(--sand-2); max-width: 30em; }
.planer { display: grid; gap: var(--s3); margin-top: var(--s4); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 var(--s2);
  border: 1px solid rgb(239 235 223 / .35); border-radius: var(--radius);
  font-size: 15px; color: var(--sand);
  transition: background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out;
}
.chip b { color: var(--mai); font-weight: 600; transition: transform .4s var(--expo), color .15s ease-out; display: inline-block; }
.chip:hover span { border-color: var(--sand); }
.chip input:checked + span { background: var(--mai); color: #1C3328; border-color: transparent; }
.chip input:checked + span b { color: #1C3328; transform: rotate(90deg); }
.chip input:focus-visible + span { outline: 2px solid var(--mai); outline-offset: 2px; }

.formel { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; letter-spacing: -0.01em; }
.formel__teil { color: var(--sand); }
.formel__rest { color: var(--sand-3); }
.formel__rest.ist-voll { color: var(--mai); }

.felder { display: grid; gap: var(--s3); }
@media (min-width: 600px) { .felder { grid-template-columns: 1fr 1fr; } .feld--breit { grid-column: 1 / -1; } }
.feld { display: grid; gap: var(--s1); min-width: 0; }
.feld > span { font-size: 14px; color: var(--sand-2); }
.feld input, .feld textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: rgb(239 235 223 / .08); color: var(--sand);
  border: 1px solid rgb(239 235 223 / .3); border-radius: var(--radius);
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.feld textarea { resize: vertical; }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--mai); background: rgb(239 235 223 / .12); }
.feld ::placeholder { color: rgb(239 235 223 / .5); }
.planer .knopf { justify-self: start; }
.planer__hinweis { font-size: 14px; color: var(--sand-3); }

.kontakt__daten { display: grid; gap: var(--s4); align-content: start; }
.mail {
  font-family: var(--serif); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -0.02em;
  text-decoration: none; color: var(--sand); justify-self: start; padding-bottom: 4px;
  background: linear-gradient(var(--mai), var(--mai)) 0 100% / 0% 2px no-repeat;
  transition: background-size .6s var(--expo);
}
.mail:hover { background-size: 100% 2px; }
.mail .ganz { white-space: nowrap; }
.daten { border-top: 1px solid rgb(239 235 223 / .2); }
.daten > div { display: grid; gap: 2px; padding: var(--s2) 0; border-bottom: 1px solid rgb(239 235 223 / .2); }
.daten dt { font-size: 14px; color: var(--sand-3); }
.daten dd { color: var(--sand); }
@media (min-width: 900px) { .kontakt__daten { padding-top: 12px; } }

/* ---------- Fuss ---------- */
.fuss { background: var(--moos-dunkel); color: var(--sand-2); padding: var(--s5) 0; font-size: 14px; }
.fuss__raster { display: grid; gap: var(--s2); }
.fuss__marke { font-family: var(--serif); font-size: 28px; color: var(--sand); }
.fuss a { display: inline-block; padding: 10px 0; margin: -10px 0; color: var(--sand); text-underline-offset: 4px; }
.fuss__entwurf { color: var(--sand-3); }

/* ---------- Bewegung (nur mit JS und ohne reduzierte Bewegung) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .maske > span { transform: translateY(105%); }
  .js .reveal-line > span { opacity: 0; transform: translateY(12px); }
  .js .hero__bild-innen { clip-path: inset(100% 0 0 0); }
  .js .hero__bild-innen img { transform: scale(1.15); }

  .ist-bereit .maske > span { transform: none; transition: transform .9s var(--expo); }
  .ist-bereit .maske:nth-child(2) > span { transition-delay: .09s; }
  .ist-bereit .maske:nth-child(3) > span { transition-delay: .18s; }
  .ist-bereit .reveal-line > span { opacity: 1; transform: none; transition: opacity .6s ease-out .2s, transform .9s var(--expo) .2s; }
  .ist-bereit .hero__aktion > span { transition-delay: .32s; }
  .ist-bereit .hero__bild-innen { clip-path: inset(0); transition: clip-path 1.2s var(--expo) .25s; }
  .ist-bereit .hero__bild-innen img { transform: translate3d(0, var(--py, 0px), 0); transition: transform 1.6s var(--expo) .25s; }
  .ist-bereit.ist-ruhig .hero__bild-innen img { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .posten__plus, .chip b, .mail, .kachel__bild img { transition: none; }
}