/* =========================================================================
   Garten-Musterbetrieb — Redesign (Phase 3)
   Design-Grundlage: konzept-redesign.md (Farben, Typo, Formensprache, Skalen)
   Self-hosted Fonts (Fraunces, Karla) — keine externen CDN-Requests.
   ========================================================================= */

/* ---------- 1. Self-hosted Webfonts (WOFF2, latin subset) ---------- */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/fraunces-600-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces";
  font-style:italic;
  font-weight:600;
  font-display:swap;
  src:url("fonts/fraunces-600italic-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Karla";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/karla-400-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Karla";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("fonts/karla-500-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Karla";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/karla-700-latin.woff2") format("woff2");
}

/* ---------- 2. Design-Tokens ---------- */
:root{
  /* Farben (konzept-redesign.md Abschnitt 2) */
  --c-bg:        #faf7ef;
  --c-bg-alt:    #f1ead9;
  --c-tanne:     #33502f;
  --c-farn:      #6b8f5a;
  --c-erde:      #9c5f2c;
  --c-text:        #2b2a24;
  --c-text-leicht: #635f4f;
  --c-text-invers: #faf7ef;
  --c-linie:       #e2d9c2;
  --c-fehler:  #a4382a;
  --c-erfolg:  #3d6b3f;

  /* Typografie */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1:     clamp(2.4rem, 1.6rem + 4vw, 4.4rem);
  --fs-h2:     clamp(1.9rem, 1.5rem + 2vw, 2.8rem);
  --fs-h3:     clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --fs-lead:   clamp(1.15rem, 1.05rem + .5vw, 1.35rem);
  --fs-body:   clamp(1rem, .97rem + .15vw, 1.125rem);
  --fs-label:  0.8rem;
  --fs-button: 1rem;
  --fs-small:  0.9rem;

  /* Formensprache */
  --radius-card: 20px;
  --radius-pill: 999px;
  --radius-blob-1: 63% 37% 54% 46% / 46% 41% 59% 54%;
  --radius-blob-2: 38% 62% 51% 49% / 55% 44% 56% 45%;
  --radius-blob-3: 49% 51% 39% 61% / 44% 63% 37% 56%;

  /* Spacing */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;
  --s-7: 8rem;

  --schatten: 0 16px 40px rgba(51,80,47,.14);
}

/* ---------- 3. Reset & Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  color:var(--c-text);
  background:var(--c-bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--c-tanne);
}
h1{font-size:var(--fs-h1);line-height:1.08}
h2{font-size:var(--fs-h2);line-height:1.15;margin-bottom:var(--s-2)}
h3{font-size:var(--fs-h3);line-height:1.2}
p{color:var(--c-text-leicht)}
a{color:var(--c-tanne)}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:var(--s-5) 0}
@media(min-width:900px){
  section{padding:var(--s-6) 0}
}

.kicker{
  display:inline-flex;align-items:center;gap:var(--s-1);
  font-family:var(--font-body);font-size:var(--fs-label);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-erde);
  margin-bottom:var(--s-2);
}
.kicker svg{width:16px;height:16px;flex:none;color:var(--c-farn)}
.kicker.invers{color:#d9c9a8}
.kicker.invers svg{color:#b9cfa8}

.lead{font-size:var(--fs-lead);line-height:1.55;max-width:44rem}

.btn{
  display:inline-flex;align-items:center;gap:var(--s-1);
  background:var(--c-erde);color:var(--c-text-invers);
  padding:.9rem 1.9rem;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-button);
  border:2px solid var(--c-erde);
  transition:transform .15s ease, background .2s ease, color .2s ease;
  text-decoration:none;
}
.btn svg{width:18px;height:18px}
.btn:hover{background:#7f4c22;border-color:#7f4c22;transform:translateY(-2px)}
.btn.ghost{
  background:transparent;color:var(--c-text-invers);border:2px solid rgba(250,247,239,.6);
}
.btn.ghost:hover{background:rgba(250,247,239,.14);border-color:rgba(250,247,239,.9)}
.btn.tanne{background:var(--c-tanne);border-color:var(--c-tanne)}
.btn.tanne:hover{background:#264024;border-color:#264024}

/* ---------- 4. Demo-Balken (UNVERÄNDERT — Kennzeichnung Musterbetrieb) ---------- */
.demo-bar{
  background:var(--c-tanne);color:rgba(250,247,239,.94);font-size:.82rem;text-align:center;
  padding:8px 16px;line-height:1.4;
}
.demo-bar a{color:#fff;text-decoration:underline;font-weight:700}

/* ---------- 5. Header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,239,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-linie);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:var(--s-2)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:1.28rem;color:var(--c-tanne);text-decoration:none}
.brand .mark{width:38px;height:38px;color:var(--c-erde);flex:none}
.brand .mark svg{width:100%;height:100%}
.menu{display:flex;gap:2rem;list-style:none;padding:0}
.menu a{color:var(--c-text);font-weight:500;font-size:.98rem;text-decoration:none}
.menu a:hover{color:var(--c-erde)}
.nav-right{display:flex;align-items:center;gap:.9rem}
.nav .btn{padding:.7rem 1.4rem;font-size:.92rem}
.tel-immer{
  display:flex;align-items:center;gap:.4rem;color:var(--c-tanne);font-weight:700;
  text-decoration:none;font-size:.92rem;
}
.tel-immer svg{width:18px;height:18px;color:var(--c-erde)}
.burger{
  display:none;background:none;border:0;cursor:pointer;padding:6px;color:var(--c-tanne);
}
.burger svg{width:26px;height:26px;display:block}
.burger .icon-x{display:none}
.burger[aria-expanded="true"] .icon-menu{display:none}
.burger[aria-expanded="true"] .icon-x{display:block}

/* ---------- 6. Hero (typo-first) ---------- */
.hero{position:relative;overflow:hidden;background:var(--c-bg)}
.hero-inner{
  padding-top:var(--s-6);padding-bottom:0;position:relative;z-index:2;
  display:flex;flex-direction:column;
}
.hero-text{max-width:46rem}
.hero h1{margin-bottom:var(--s-3)}
.hero .lead{margin-bottom:var(--s-4);color:var(--c-text-leicht)}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:var(--s-5)}
.hero-cta .tel-link{
  display:inline-flex;align-items:center;gap:.5rem;color:var(--c-tanne);font-weight:700;
  text-decoration:none;padding:.9rem .4rem;
}
.hero-cta .tel-link svg{width:20px;height:20px;color:var(--c-erde)}

.hero-bild{
  position:relative;width:100%;
  height:clamp(220px,45vh,480px);
  margin-top:-2rem;
}
.hero-bild .blob-1{
  position:absolute;inset:0;overflow:hidden;
  border-radius:var(--radius-blob-1);
  will-change:transform;
}
.hero-bild img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
}

/* ---------- 7. Leistungen (redaktionelle Liste) ---------- */
.leistungen{background:var(--c-bg)}
.leistungen-liste{margin-top:var(--s-5);list-style:none;padding:0}
.leistung{
  display:grid;grid-template-columns:6.5rem 1fr;gap:var(--s-3);align-items:start;
  padding:var(--s-4) 0;border-bottom:1px solid var(--c-linie);position:relative;
}
.leistung:first-child{padding-top:0}
.leistung::after{
  content:"";position:absolute;left:0;bottom:-1px;width:64px;height:2px;
  background:var(--c-farn);opacity:.5;
}
.leistung:last-child{border-bottom:0}
.leistung .kopf{display:flex;align-items:center;gap:.6rem}
.leistung-nr{
  font-family:var(--font-display);font-weight:600;font-size:1.6rem;color:var(--c-linie);
  line-height:1;
}
.leistung-ico{
  width:3.2rem;height:3.2rem;border-radius:var(--radius-card);
  background:var(--c-bg-alt);display:grid;place-items:center;color:var(--c-farn);flex:none;
}
.leistung-ico svg{width:26px;height:26px}
.leistung h3{margin-bottom:.4rem}
.leistung p{max-width:42rem}

@media(max-width:640px){
  .leistung{grid-template-columns:1fr;gap:.6rem}
  .leistung .kopf{margin-bottom:.2rem}
}

/* ---------- 8. Saison-Hinweis ---------- */
.saison{
  background:var(--c-erde);color:var(--c-text-invers);
  padding:var(--s-4) 0;
}
.saison .wrap{
  display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  justify-content:space-between;
}
.saison-text{display:flex;align-items:flex-start;gap:var(--s-2);max-width:52rem}
.saison-text svg{width:28px;height:28px;flex:none;margin-top:.15rem}
.saison-text p{color:var(--c-text-invers);margin:0}
.saison-text strong{color:#fff}
.saison .btn{background:var(--c-tanne);border-color:var(--c-tanne);flex:none}
.saison .btn:hover{background:#264024;border-color:#264024}

/* ---------- 9. Galerie (lebendiges Raster) ---------- */
.galerie{background:var(--c-bg-alt)}
.galerie-grid{
  display:grid;gap:var(--s-3);margin-top:var(--s-5);
  grid-template-columns:1fr;
}
.galerie-kachel{position:relative}
.galerie-grid figure{margin:0;position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.galerie-grid img{width:100%;height:100%;object-fit:cover;display:block}
.galerie-grid figcaption{
  position:absolute;left:14px;bottom:14px;
  background:rgba(43,42,36,.72);color:#fff;font-size:.78rem;
  padding:.35rem .8rem;border-radius:var(--radius-pill);
  opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;
}
.galerie-grid figure:hover figcaption,
.galerie-grid figure:focus-within figcaption{opacity:1;transform:translateY(0)}

.g-1{aspect-ratio:4/3;border-radius:var(--radius-blob-2)}
.g-2{aspect-ratio:3/4;border-radius:var(--radius-blob-3)}
.g-3{aspect-ratio:1/1;border-radius:var(--radius-blob-3)}
.g-4{aspect-ratio:16/9;border-radius:var(--radius-blob-2)}

@media(min-width:640px){
  .galerie-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:980px){
  .galerie-grid{
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:130px;
  }
  .g-1{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .g-2{grid-column:span 1;grid-row:span 2;aspect-ratio:auto}
  .g-3{grid-column:span 1;grid-row:span 2;aspect-ratio:auto}
  .g-4{grid-column:span 4;grid-row:span 2;aspect-ratio:auto}
}

/* ---------- 10. Ablauf ---------- */
.ablauf{background:var(--c-bg)}
.ablauf-liste{
  margin-top:var(--s-6);display:grid;gap:var(--s-5);
  grid-template-columns:1fr;position:relative;
}
.ablauf-schritt{position:relative;padding-left:0}
.ablauf-schritt .nr{
  font-family:var(--font-display);font-weight:600;color:var(--c-erde);
  font-size:1.1rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem;
}
.ablauf-schritt .nr svg{width:20px;height:20px;color:var(--c-farn)}
.ablauf-schritt h3{margin-bottom:.4rem}
.ablauf-ranke{
  display:block;width:100%;height:auto;margin:0 auto var(--s-5);max-width:900px;color:var(--c-farn);
}
.ablauf-ranke path{
  stroke-dasharray:1000;stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.4s ease;
}
.ablauf-ranke.is-visible path{stroke-dashoffset:0}

@media(min-width:820px){
  .ablauf-liste{grid-template-columns:repeat(4,1fr);gap:var(--s-3)}
}

/* ---------- 11. Über uns ---------- */
.about{background:var(--c-bg-alt)}
.about .split{
  display:grid;grid-template-columns:1fr;gap:var(--s-5);align-items:center;
}
.about-bild{
  position:relative;aspect-ratio:4/5;border-radius:var(--radius-blob-1);overflow:hidden;
}
.about-bild img{width:100%;height:100%;object-fit:cover;object-position:center 25%}

/* KI-Kennzeichnung (EU AI Act Art. 50 Abs. 4) — sichtbarer Hinweis auf KI-generierten
   Personenbildern. Einheitlicher Baustein, identisch in allen Demo-Websites mit
   KI-generierten Personen-/Portraitbildern verwendet (siehe @image-artist). */
.ki-kennzeichnung{
  position:absolute;right:.6em;bottom:.6em;z-index:3;
  padding:.3em .7em;background:rgba(15,15,15,.7);color:#fff;
  font-family:system-ui,sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.03em;border-radius:999px;line-height:1.2;pointer-events:none
}
.footer-ki{font-size:.8rem;opacity:.82;max-width:78ch;margin-top:.8em}
.galerie-ki-hinweis{font-size:.85rem;color:var(--c-text-leicht);margin-top:1rem;text-align:center}
/* Galerie-Sonderfall: die figcaption liegt bereits unten links und wird
   nur bei Hover eingeblendet (siehe .galerie-grid figcaption) — der
   AI-Act-Badge muss aber dauerhaft sichtbar sein. Statt die figcaption in
   ein Dauerhaft-sichtbar-Element umzubauen (haette die Hover-Optik aller
   vier Bildunterschriften veraendert), wandert nur der Badge nach oben
   rechts. Kein Konflikt, keine Aenderung an der bestehenden Caption. */
.galerie-grid .ki-kennzeichnung{bottom:auto;top:.6em}
/* Zweiter Sonderfall (Hero + Galerie): .blob-1 / figure schneiden mit
   overflow:hidden + organischer border-radius die Bild-Ecken ab — dabei
   wurde auch der dort platzierte Badge weggeschnitten (siehe Screenshot-
   Test 17.08.). Loesung nach demselben Muster wie beim Hero-Bild: Badge
   liegt als Geschwister der geclippten Bildbox in einem aeusseren,
   nicht geclippten Wrapper (.hero-bild bzw. .galerie-kachel) und bleibt
   so immer vollstaendig sichtbar. */
.about ul{list-style:none;margin-top:var(--s-3);padding:0;display:grid;gap:.7rem}
.about li{display:flex;align-items:flex-start;gap:.6rem;color:var(--c-text-leicht)}
.about li svg{width:20px;height:20px;color:var(--c-farn);flex:none;margin-top:.15rem}
.about .btn{margin-top:var(--s-3)}

@media(min-width:900px){
  .about .split{grid-template-columns:1fr 1.15fr}
}

/* ---------- 12. Kontakt (ohne Fake-Karte) ---------- */
.kontakt{background:var(--c-tanne);color:var(--c-text-invers)}
.kontakt h2{color:#fff}
.kontakt .split{display:grid;grid-template-columns:1fr;gap:var(--s-5)}
.kontakt p{color:rgba(250,247,239,.86)}
.kontakt-info{margin-top:var(--s-3);display:grid;gap:1rem}
.kontakt-info .row{display:flex;gap:.8rem;align-items:flex-start}
.kontakt-info svg{width:22px;height:22px;color:#bcd1a4;flex:none;margin-top:.1rem}
.kontakt-info a{color:#fff;font-weight:700;text-decoration:none}
.kontakt-info a:hover{text-decoration:underline}
.adress-block{
  margin-top:var(--s-4);font-family:var(--font-display);font-size:1.5rem;color:#fff;
  line-height:1.35;
}
.orientierung{color:rgba(250,247,239,.7);font-size:var(--fs-small);margin-top:.4rem}
.kontakt-ranke{width:90px;height:auto;margin-top:var(--s-4);color:#7fa066}

form{display:grid;gap:1rem;background:rgba(250,247,239,.08);padding:var(--s-4);border-radius:var(--radius-card)}
form label{font-size:.85rem;color:rgba(250,247,239,.85)}
form .feld{display:grid;gap:.35rem}
form input,form textarea{
  width:100%;padding:.85rem 1rem;border-radius:12px;border:1px solid rgba(250,247,239,.3);
  background:rgba(250,247,239,.97);font-size:1rem;font-family:inherit;color:var(--c-text);
}
form input:focus,form textarea:focus{outline:2px solid var(--c-farn);outline-offset:1px}
form button{border:0;cursor:pointer;width:100%;justify-content:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formhint{font-size:.8rem;color:rgba(250,247,239,.65);margin-top:-.2rem}

@media(min-width:900px){
  .kontakt .split{grid-template-columns:1fr 1fr}
}

/* ---------- 13. Footer (UNVERÄNDERT — Fiktiv-Hinweis) ---------- */
footer{background:#233a20;color:rgba(250,247,239,.62);font-size:.85rem;text-align:center;padding:2.4rem 1.5rem}
footer a{color:rgba(250,247,239,.85)}
footer .fik{display:block;margin-top:.6rem;font-size:.8rem;color:rgba(250,247,239,.6)}

/* ---------- 14. Scroll-Reveal-Animationen ---------- */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-stagger > *{transition-delay:calc(var(--i,0) * 90ms)}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.is-visible{opacity:1;transform:none;transition:none}
  .ablauf-ranke path{stroke-dashoffset:0;transition:none}
  .hero-bild .blob-1{transform:none !important}
}

/* ---------- 15. Mobile Navigation ---------- */
@media(max-width:860px){
  .menu,.nav .btn{display:none}
  .tel-immer .tel-text{display:none}
  .burger{display:block}
  .menu.open{
    display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--c-bg);border-bottom:1px solid var(--c-linie);padding:.5rem 24px 1rem;
  }
  .menu.open li{padding:.8rem 0;border-bottom:1px solid var(--c-bg-alt)}
  .menu.open .mobile-cta{padding-top:1rem}
  .menu.open .mobile-cta a{display:inline-flex}
}
@media(min-width:861px){
  .menu .mobile-cta{display:none}
}