/* ============================================================
   DIE FREISCHNEIDER — Grünpflege & mehr · Herdecke
   Naturnahes Editorial: Waldgrün + Creme · Oswald / Inter / Caveat
   ============================================================ */

@font-face { font-family:"Oswald"; src:url("assets/fonts/oswald.woff2") format("woff2"); font-weight:200 700; font-display:swap; }
@font-face { font-family:"InterV"; src:url("assets/fonts/inter.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Caveat"; src:url("assets/fonts/caveat.woff2") format("woff2"); font-weight:400 700; font-display:swap; }

:root {
  --green:    #3a6b35;
  --green-d:  #274d22;
  --green-dd: #1d3b1a;
  --green-2:  #5a8f43;
  --green-3:  #8bbd57;
  --cream:    #f6f3ea;
  --cream-2:  #ece7d7;
  --surface:  #ffffff;
  --ink:      #1b2a16;
  --text:     #36402d;
  --muted:    #737c69;
  --muted-d:  #c2cbb2;
  --line:     #e4dfcf;
  --line-dark:rgba(255,255,255,.13);
  --radius:   10px;
  --radius-lg:18px;
  --shadow:   0 22px 55px -26px rgba(27,42,22,.32);
  --shadow-sm:0 12px 30px -20px rgba(27,42,22,.30);
  --maxw:     1200px;
  --ease:     cubic-bezier(.2,.7,.2,1);
  --t:        .7s;
  --disp:     "Oswald","Arial Narrow",system-ui,sans-serif;
  --font:     "InterV","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --script:   "Caveat","Segoe Script",cursive;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:92px; }
body { font-family:var(--font); color:var(--text); line-height:1.7; background:var(--cream); -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:var(--green); text-decoration:none; transition:color .25s var(--ease); }
a:hover { color:var(--green-2); }
h1,h2,h3,h4 { font-family:var(--disp); color:var(--ink); font-weight:600; line-height:1.05; letter-spacing:.01em; text-transform:uppercase; }
section { padding:100px 0; position:relative; }
.container { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.script { font-family:var(--script); text-transform:none; color:var(--green-2); font-weight:600; }

.icon { width:1.25em; height:1.25em; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:-.18em; }

/* Eyebrow / Section heads */
.eyebrow { display:inline-flex; align-items:center; gap:9px; color:var(--green-2); font-family:var(--disp); font-weight:600; letter-spacing:.22em; text-transform:uppercase; font-size:.8rem; margin-bottom:16px; }
.eyebrow::before { content:""; width:26px; height:2px; background:var(--green-3); }
.section-head { max-width:720px; margin:0 auto 58px; text-align:center; }
.section-head .eyebrow { justify-content:center; }
.section-head h2 { font-size:clamp(2rem,4.6vw,3.1rem); }
.section-head h2 .g { color:var(--green-2); }
.section-head p { color:var(--muted); margin-top:16px; font-size:1.07rem; max-width:60ch; margin-inline:auto; }
.leaf-divider { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; color:var(--green-3); }
.leaf-divider::before, .leaf-divider::after { content:""; height:2px; width:44px; background:currentColor; opacity:.5; }

/* Buttons */
.btn { font-family:var(--disp); font-weight:600; letter-spacing:.04em; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:999px; font-size:.95rem; cursor:pointer; border:2px solid transparent; transition:all .3s var(--ease); white-space:nowrap; position:relative; overflow:hidden; }
.btn .icon { width:1.2em; height:1.2em; }
.btn-primary { background:var(--green); color:#fff; }
.btn-primary:hover { background:var(--green-d); transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(58,107,53,.7); }
.btn-primary::before { content:""; position:absolute; inset:0; transform:translateX(-130%); background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); }
.btn-primary:hover::before { transform:translateX(130%); transition:transform .6s var(--ease); }
.btn-light { background:#fff; color:var(--green-d); }
.btn-light:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn-ghost:hover { background:rgba(255,255,255,.12); border-color:#fff; }
.btn-outline { background:transparent; color:var(--green-d); border-color:var(--green); }
.btn-outline:hover { background:var(--green); color:#fff; transform:translateY(-2px); }

/* Reveal (progressive enhancement) */
.js .reveal { opacity:0; transform:translateY(26px); transition:opacity var(--t) var(--ease), transform var(--t) var(--ease); transition-delay:calc(var(--i,0)*80ms); }
.reveal.in { opacity:1; transform:none; }
.scroll-progress { position:fixed; top:0; left:0; height:3px; width:0; background:var(--green-3); z-index:90; transition:width .1s linear; }
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1!important;transform:none!important;transition:none!important} .hero::before{animation:none!important} }

/* ============================================================ Topbar */
.topbar { background:var(--green-dd); color:var(--muted-d); font-size:.85rem; }
.topbar .container { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:9px 24px; flex-wrap:wrap; }
.topbar a { color:var(--muted-d); display:inline-flex; align-items:center; gap:7px; }
.topbar a:hover { color:#fff; }
.topbar .tb-right { display:flex; gap:20px; flex-wrap:wrap; }

/* ============================================================ Header */
.header { position:sticky; top:0; z-index:60; background:rgba(246,243,234,.9); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:box-shadow .3s var(--ease),border-color .3s var(--ease); }
.header.scrolled { border-color:var(--line); box-shadow:0 8px 30px -20px rgba(27,42,22,.4); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:var(--maxw); margin:0 auto; transition:padding .3s var(--ease); }
.header.scrolled .nav { padding:9px 24px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand .emblem { width:54px; height:54px; color:var(--green); flex:0 0 54px; }
.footer .brand .emblem { filter:brightness(0) invert(1); opacity:.9; }  /* Logo weiß auf dunklem Footer – funktioniert auch mit echtem Original */
.brand b { font-family:var(--disp); font-weight:600; font-size:1.2rem; letter-spacing:.06em; color:var(--ink); line-height:1; text-transform:uppercase; }
.brand span { display:block; font-size:.62rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; margin-top:3px; font-family:var(--disp); }
.nav-links { display:flex; gap:26px; list-style:none; align-items:center; }
.nav-links a { font-family:var(--disp); font-weight:500; text-transform:uppercase; letter-spacing:.04em; font-size:.92rem; color:var(--text); position:relative; padding:4px 0; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--green-3); transition:width .3s var(--ease); }
.nav-links a:hover { color:var(--green-d); } .nav-links a:hover::after { width:100%; }
.nav-cta { display:flex; align-items:center; gap:12px; }
.nav-toggle { display:none; background:none; border:0; cursor:pointer; color:var(--green-d); padding:4px; }
.nav-toggle .icon { width:28px; height:28px; }

/* ============================================================ Hero */
.hero { position:relative; overflow:hidden; min-height:92vh; display:flex; align-items:center; color:#fff; }
.hero::before { content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, rgba(23,40,20,.93) 0%, rgba(23,40,20,.72) 38%, rgba(23,40,20,.30) 66%, rgba(23,40,20,.55) 100%), url("assets/hero.webp") center/cover no-repeat;
  animation:kbz 26s ease-in-out infinite alternate; }
@keyframes kbz { from{transform:scale(1)} to{transform:scale(1.07)} }
.hero .container { position:relative; z-index:2; width:100%; }
.hero-badge { position:absolute; top:0; right:24px; z-index:3; width:150px; height:150px; border-radius:50%; background:var(--green-2); color:#fff; display:grid; place-items:center; text-align:center; font-family:var(--disp); text-transform:uppercase; font-weight:600; letter-spacing:.05em; font-size:.82rem; line-height:1.25; padding:20px; transform:rotate(-6deg); box-shadow:var(--shadow); animation:bob 5s var(--ease) infinite alternate; }
.hero-badge b { color:#fff; font-size:1.05rem; display:block; }
@keyframes bob { from{transform:rotate(-6deg) translateY(0)} to{transform:rotate(-6deg) translateY(-10px)} }
.hero-inner { max-width:640px; padding:60px 0; }
.hero .est { display:inline-flex; align-items:center; gap:10px; font-family:var(--disp); letter-spacing:.2em; text-transform:uppercase; font-size:.78rem; color:var(--green-3); margin-bottom:18px; }
.hero h1 { color:#fff; font-size:clamp(2.6rem,6.5vw,4.6rem); line-height:.98; letter-spacing:.005em; }
.hero h1 .g { color:var(--green-3); }
.hero .lead { font-size:1.18rem; color:#e7ecdf; margin:22px 0 14px; max-width:520px; font-weight:300; }
.hero .sig { font-family:var(--script); font-size:1.7rem; color:var(--green-3); margin-bottom:26px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.hero .anim { opacity:0; transform:translateY(24px); animation:rise .9s var(--ease) forwards; }
.hero .d1{animation-delay:.05s}.hero .d2{animation-delay:.18s}.hero .d3{animation-delay:.31s}.hero .d4{animation-delay:.44s}.hero .d5{animation-delay:.57s}
@keyframes rise { to{opacity:1;transform:none} }

/* ============================================================ Werte-Streifen */
.values { background:var(--green-d); color:#fff; padding:54px 0; }

/* ============================================================ Das Gartenjahr */
.year-sec { background:var(--cream-2); }
.year-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.season { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px 24px 24px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
  transition-delay:calc(var(--i,0) * 90ms); }
.season-pic { margin:-26px -24px 18px; aspect-ratio:1024/687; overflow:hidden;
  background:#f1eedf; border-radius:var(--radius-lg) var(--radius-lg) 0 0; border-bottom:1px solid var(--line); }
.season-pic img { width:100%; height:100%; object-fit:cover; display:block; }
.season-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.season .ic { width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--green); color:#fff; flex:none; }
.season .ic .icon { width:22px; height:22px; }
.season .when { font-family:var(--disp); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color:var(--muted); text-align:right; }
.season h3 { font-size:1.35rem; margin-bottom:10px; }
.season ul { list-style:none; padding:0; margin:0 0 4px; }
.season li { position:relative; padding-left:20px; margin-bottom:9px; font-size:.97rem; line-height:1.5; color:var(--text); }
.season li::before { content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--green-3); }
.season .mark { margin-top:auto; padding-top:14px; font-size:.86rem; font-weight:600; color:var(--green-d); }
.season .mark::before { content:"\2192\00a0"; color:var(--green-2); }
.law { display:flex; gap:20px; align-items:flex-start; margin-top:28px; padding:28px 30px;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--green);
  border-radius:var(--radius-lg); }
.law .ic { flex:0 0 52px; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--green-2); color:var(--green-2); }
.law .ic .icon { width:26px; height:26px; }
.law b { display:block; font-family:var(--disp); text-transform:uppercase; letter-spacing:.04em; font-size:1.15rem; color:var(--ink); margin-bottom:8px; }
.law p { color:var(--text); font-size:1rem; line-height:1.65; max-width:78ch; }
.law .hand { font-family:var(--script); font-size:1.6rem; color:var(--green-2); margin-top:10px; line-height:1.2; }
.insta { text-align:center; margin-top:30px; color:var(--muted); font-size:1rem; }
.insta a { color:var(--green-d); font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.insta a:hover { color:var(--green); }
@media (max-width:1080px){ .year-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .year-grid{grid-template-columns:1fr} .law{flex-direction:column;gap:14px;padding:22px} }
.values .container { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.value { display:flex; gap:16px; align-items:flex-start; }
.value .ic { flex:0 0 52px; width:52px; height:52px; border-radius:50%; border:1.5px solid var(--green-3); display:grid; place-items:center; color:var(--green-3); }
.value .ic .icon { width:26px; height:26px; }
.value h3 { color:#fff; font-size:1.15rem; margin-bottom:4px; }
.value p { color:var(--muted-d); font-size:.94rem; line-height:1.55; }

/* ============================================================ Leistungen */
.services { background:var(--cream); }
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.svc { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 26px; transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease); position:relative; overflow:hidden; }
.svc::after { content:""; position:absolute; left:0; top:0; height:100%; width:4px; background:var(--green-3); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease); }
.svc:hover { transform:translateY(-6px); box-shadow:var(--shadow-sm); border-color:transparent; }
.svc:hover::after { transform:scaleY(1); }
.svc .ic { width:58px; height:58px; border-radius:14px; background:linear-gradient(150deg,#eaf1e2,#d9e8cb); display:grid; place-items:center; color:var(--green-d); margin-bottom:18px; transition:.35s var(--ease); }
.svc .ic .icon { width:30px; height:30px; }
.svc:hover .ic { background:var(--green); color:#fff; transform:rotate(-6deg); }
.svc h3 { font-size:1.28rem; margin-bottom:8px; letter-spacing:.02em; }
.svc p { color:var(--muted); font-size:.95rem; line-height:1.6; }
.svc .tag { position:absolute; top:20px; right:22px; font-family:var(--disp); font-size:.66rem; letter-spacing:.12em; color:var(--green-2); border:1px solid var(--green-3); border-radius:999px; padding:3px 10px; text-transform:uppercase; }

/* ============================================================ Galerie */

/* Lightbox */

/* ============================================================ Formularfelder */

.field { margin-bottom:16px; }
.field label { display:block; font-family:var(--disp); text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; color:var(--ink); margin-bottom:7px; }
.field input, .field select, .field textarea { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); font-family:var(--font); font-size:.98rem; background:#fff; color:var(--text); transition:border-color .2s var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--green-2); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline:2px solid var(--green-2); outline-offset:2px; }
.field .opt { text-transform:none; letter-spacing:0; color:var(--muted); font-weight:400; }
.slots { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.slot { padding:10px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; cursor:pointer; text-align:center; font-size:.9rem; font-weight:600; color:var(--text); transition:.18s var(--ease); }
.slot:hover { border-color:var(--green-3); }
.slot.sel { background:var(--green); color:#fff; border-color:var(--green); }

/* ============================================================ Split / Region */
.split { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.split .media { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3; }
.split .media img { width:100%; height:100%; object-fit:cover; }
.circle-badges { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; text-align:center; }
.cbadge { }
.cbadge .ring { width:96px; height:96px; margin:0 auto 12px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-sm); transition:.35s var(--ease); }
.cbadge:hover .ring { transform:translateY(-5px) scale(1.04); background:var(--green-d); }
.cbadge .ring .icon { width:38px; height:38px; }
.cbadge b { font-family:var(--disp); text-transform:uppercase; letter-spacing:.04em; color:var(--ink); font-size:.98rem; }

.feature-list { list-style:none; margin-top:22px; display:grid; gap:15px; }
.feature-list li { display:flex; gap:13px; align-items:flex-start; }
.feature-list .ck { flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; margin-top:2px; }
.feature-list .ck .icon { width:15px; height:15px; }
.feature-list b { color:var(--ink); font-family:var(--disp); text-transform:uppercase; letter-spacing:.03em; font-size:.95rem; }
.feature-list span { color:var(--muted); display:block; font-size:.93rem; }

/* ============================================================ Kontakt */
.contact { background:var(--green-dd); color:#fff; }
.contact .section-head h2 { color:#fff; } .contact .section-head p { color:var(--muted-d); } .contact .eyebrow{color:var(--green-3)}
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.contact-info .row { display:flex; gap:15px; align-items:flex-start; margin-bottom:24px; }
.contact-info .ic { flex:0 0 46px; width:46px; height:46px; border-radius:12px; border:1px solid var(--line-dark); display:grid; place-items:center; color:var(--green-3); }
.contact-info .ic .icon { width:22px; height:22px; }
.contact-info b { display:block; color:#fff; font-family:var(--disp); text-transform:uppercase; letter-spacing:.05em; font-size:.85rem; margin-bottom:2px; }
.contact-info a { color:var(--green-3); font-size:1.05rem; }
.contact-info a:hover { color:#fff; }
.contact-form { background:var(--surface); border-radius:var(--radius-lg); padding:34px; color:var(--text); box-shadow:var(--shadow); }
.contact-form h3 { margin-bottom:6px; font-size:1.4rem; }
.contact-form p.sub { color:var(--muted); font-size:.92rem; margin-bottom:20px; text-transform:none; }
.field-check { display:flex; gap:10px; align-items:flex-start; font-size:.84rem; color:var(--muted); }
.field-check input { width:auto; margin-top:4px; accent-color:var(--green); }
.contact-form .btn { width:100%; justify-content:center; margin-top:6px; }
.contact-form .send-row { display:grid; gap:10px; margin-top:6px; }
.contact-form .send-row .btn { margin-top:0; }

/* Die drei Direktwege: ganze Flaeche klickbar, nicht nur die Nummer. */
.way { display:flex; align-items:center; gap:16px; padding:18px 20px; margin-bottom:12px;
  border:1px solid var(--line-dark); border-radius:var(--radius-lg); color:#fff;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); }
.way:hover { border-color:var(--green-3); background:rgba(255,255,255,.04); transform:translateX(4px); }
.way:focus-visible { outline:2px solid var(--green-3); outline-offset:3px; }
.way .ic { flex:0 0 50px; width:50px; height:50px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); color:var(--green-3); }
.way .ic .icon { width:24px; height:24px; }
.way .tx { flex:1; min-width:0; }
.way .tx b { display:block; font-family:var(--disp); text-transform:uppercase; letter-spacing:.05em; font-size:1rem; margin-bottom:2px; }
.way .tx span { display:block; color:var(--muted-d); font-size:.95rem; overflow-wrap:anywhere; }
.way .go { flex:none; color:var(--green-3); opacity:.6; transition:opacity .25s var(--ease), transform .25s var(--ease); }
.way:hover .go { opacity:1; transform:translateX(3px); }
.ways-meta { margin-top:28px; padding-top:24px; border-top:1px solid var(--line-dark); }

/* ============================================================ Footer */
.footer { background:#141f11; color:#9aa88c; padding:60px 0 26px; font-size:.92rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:44px; margin-bottom:34px; }
.footer h4 { color:#fff; font-family:var(--disp); letter-spacing:.1em; font-size:.85rem; margin-bottom:15px; }
.footer a { color:#b6c4a8; display:block; padding:4px 0; } .footer a:hover{color:var(--green-3)}
.footer .brand b { color:#fff; } .footer .brand span{color:#9aa88c} .footer .brand .emblem{color:var(--green-3)}
.footer p { max-width:300px; line-height:1.7; margin-top:14px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.85rem; }

/* Mobile call bar + FAB */
.mobile-bar { display:none; position:fixed; bottom:0; left:0; right:0; z-index:70; background:var(--green-dd); padding:10px 12px; gap:10px; border-top:1px solid var(--line-dark); }
.mobile-bar a { flex:1; justify-content:center; padding:12px; font-size:.85rem; }

/* Toast */
.toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--green-d); color:#fff; padding:14px 26px; border-radius:999px; font-weight:600; z-index:120; opacity:0; transition:.4s var(--ease); box-shadow:var(--shadow); display:flex; align-items:center; gap:10px; }
.toast .icon{color:var(--green-3)} .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================================ Responsive */
@media (max-width:980px){
  .svc-grid{grid-template-columns:repeat(2,1fr)} .values{padding:40px 0} .values .container{grid-template-columns:1fr;gap:22px}
}
@media (max-width:860px){
  .hero .container,.split,.contact-grid{grid-template-columns:1fr}
  .split .media{order:-1}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero-badge{width:112px;height:112px;font-size:.68rem}
}
@media (max-width:680px){
  section{padding:66px 0} .hero{min-height:auto;padding:40px 0}
  .nav-links{position:absolute;top:66px;left:0;right:0;background:var(--cream);flex-direction:column;padding:16px 24px;gap:2px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);display:none}
  .nav-links.open{display:flex} .nav-links a{padding:12px 0;width:100%;border-bottom:1px solid var(--cream-2)}
  .nav-cta .btn-primary{display:none} .nav-toggle{display:block}
  .svc-grid,.gallery,.circle-badges,.slots,.footer-grid{grid-template-columns:1fr}
  .mobile-bar{display:flex} body{padding-bottom:64px} .topbar{display:none}
}

/* ============================================================ Rechtslinks im Footer */
/* Eigene Zeile statt Text-Punkten zwischen Block-Links: .footer a ist display:block,
   dadurch rutschte jedes "·" am Handy allein in eine eigene Zeile. */
.footer-legal { display:flex; justify-content:center; flex-wrap:wrap; gap:4px 28px; padding:12px 0 4px; font-size:.86rem; }
.footer .footer-legal a { display:inline-block; padding:10px 2px; color:#9aa88c; }
.footer .footer-legal a:hover { color:var(--green-3); }

/* ============================================================ Handy-Feinschliff (01.10.2026)
   BEWUSST AM DATEIENDE: Media Queries erhoehen die Spezifitaet nicht -- weiter oben
   platzierte Overrides verlieren gegen spaetere Basisregeln. Jeder Punkt hier ist ein
   gemessener Befund (Breiten 320-430 px). */
@media (max-width:680px){
  /* Untere Leiste ist 72 px hoch, freigehalten waren nur 64 px -> Seitenende lag darunter.
     Platz im FOOTER statt unter der Seite: sonst blitzt zwischen dunklem Footer und
     Leiste ein heller Streifen Seitenhintergrund auf. */
  body { padding-bottom:0; }
  .footer { padding-bottom:110px; }

  /* Hero-Badge lag auf der Zeile "Gruenpflege & mehr · Herdecke", stiess rechts an den
     Rand und wiederholte denselben Text. Am Handy weglassen. */
  .hero-badge { display:none; }

  /* "LEIDENSCHAFTLICH." wurde bei 320 px abgeschnitten: feste Mindestgroesse 41,6 px.
     Jetzt an die Breite gekoppelt (Wort ~7,9 x Schriftgroesse breit). hyphens als Netz
     fuer grosse System-Schriften. */
  .hero h1 { font-size:clamp(2rem,10.6vw,2.9rem); hyphens:auto; -webkit-hyphens:auto; }

  /* Die beiden Hero-Knoepfe waren unterschiedlich breit. */
  .hero .btn { width:100%; justify-content:center; }

  /* Leistungskarten: Icon neben die Ueberschrift statt darueber -- halbiert die Hoehe
     (vorher ~240 px je Karte, 7 Karten = fast 3 Bildschirme). */
  .svc { display:grid; grid-template-columns:48px 1fr; column-gap:16px; align-items:start; padding:22px 20px; }
  .svc .ic { width:48px; height:48px; margin:0; grid-row:span 2; }
  .svc .ic .icon { width:24px; height:24px; }
  .svc h3 { margin:2px 0 6px; font-size:1.15rem; }
  .svc p { grid-column:2; }

  /* Drei Abzeichen standen als riesige Kreise untereinander (1 Spalte). Wieder 3 nebeneinander, kleiner. */
  .circle-badges { grid-template-columns:repeat(3,1fr); gap:8px; margin-top:30px; }
  .cbadge .ring { width:64px; height:64px; margin-bottom:10px; }
  .cbadge .ring .icon { width:28px; height:28px; }
  .cbadge b { font-size:.8rem; letter-spacing:.02em; line-height:1.25; display:block; }

  /* Lesbarkeit + Tippflaechen (Ziel >= 44 px) */
  .field label { font-size:.8rem; }
  .nav-toggle { padding:8px; }
  .footer a { padding:10px 0; }
  .insta a { padding:10px 4px; }
}
@media (max-width:400px){
  /* Markenname brach bei 320 px auf vier Zeilen um. */
  .brand { gap:10px; }
  .brand .emblem { width:44px; height:44px; flex-basis:44px; }
  .brand b { font-size:1.05rem; white-space:nowrap; }
  .brand b + span { letter-spacing:.12em; }
  /* "PER WHATSAPP SENDEN" ragte bei 320 px aus dem Knopf. */
  .contact-form .btn { padding:14px 16px; letter-spacing:.02em; }
}
@media (max-width:340px){
  /* NUR den Untertitel -- der Markenname steckt selbst in einem span. */
  .brand b + span { display:none; }
}

/* Tippflaechen haengen am Finger, nicht an der Breite: gilt fuer jedes Touchgeraet,
   auch Handy quer (844 px, dort greift sonst das Tablet-Layout ohne Handy-Regeln). */
@media (pointer:coarse){
  .footer a { padding:10px 0; }
  .ways-meta .row a { display:inline-block; padding:10px 0; }
  .insta a { padding:10px 4px; }
  .nav-toggle { padding:8px; }
}
@media (pointer:coarse){ .topbar a { display:inline-block; padding:10px 0; } }
/* Formular-Beschriftungen waren 11,5 px -- zu klein, auch am Desktop. */
.field label { font-size:.8rem; }

/* ============================================================ Animationen (01.10.2026)
   Thema "gezeichnet und lebendig". Regeln:
   - ALLES nur bei prefers-reduced-motion:no-preference -- wer Bewegung reduziert, sieht
     die Seite fertig und still.
   - Versteckte Startzustaende NUR unter .js -- ohne JavaScript ist alles sichtbar.
   - Nur transform / opacity / mask / stroke-dashoffset: GPU-guenstig, kein Layout-Ruckeln. */
.hero .container { position:relative; z-index:2; }
.drift { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.drift i { position:absolute; top:-30px; width:var(--w,10px); height:calc(var(--w,10px)*1.8);
  border-radius:0 100% 0 100%; background:var(--c,#eef8cf); opacity:var(--o,.8);
  box-shadow:0 0 8px rgba(255,244,190,.45); will-change:transform; }
.now-pill { display:none; }

@media (prefers-reduced-motion:no-preference){

  /* 1 -- Hero: Grasschnitt weht durchs Bild (Elemente legt script.js an) */
  .drift i { animation:fall var(--t,12s) linear var(--d,0s) infinite; }
  @keyframes fall {
    0%   { transform:translate3d(0,0,0) rotate(0deg); }
    50%  { transform:translate3d(var(--dx,40px),calc(var(--fall,700px)*.5),0) rotate(200deg); }
    100% { transform:translate3d(calc(var(--dx,40px)*-.4),var(--fall,700px),0) rotate(400deg); }
  }

  /* 2 -- Ueberschrift schiebt sich zeilenweise aus einer Kante.
     padding-top/margin-top gleichen die Ae-Punkte aus, sonst schneidet overflow:hidden sie ab. */
  .hero h1 .ln { display:block; overflow:hidden; padding-top:.16em; margin-top:-.16em; }
  .hero h1 .ln > span { display:block; animation:lineUp 1s cubic-bezier(.2,.7,.2,1) both; }
  .hero h1 .ln:nth-child(1) > span { animation-delay:.15s; }
  .hero h1 .ln:nth-child(2) > span { animation-delay:.28s; }
  .hero h1 .ln:nth-child(3) > span { animation-delay:.41s; }
  @keyframes lineUp { from { transform:translateY(105%); } to { transform:none; } }

  /* 3 -- Icons zeichnen sich selbst, sobald ihr Abschnitt erscheint (.in vom Reveal-Beobachter) */
  .js .value .ic .icon, .js .svc .ic .icon, .js .season .ic .icon, .js .cbadge .ring .icon,
  .js .law .ic .icon, .js .way .ic .icon {
    stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.6s cubic-bezier(.4,.1,.2,1) .25s; }
  .value.in .ic .icon, .svc.in .ic .icon, .season.in .ic .icon, .cbadge.in .ring .icon,
  .law.in .ic .icon, .contact-info.in .way .ic .icon { stroke-dashoffset:0; }

  /* 4 -- Illustrationen werden "aufgemalt": weiche Aquarellkante von links nach rechts */
  .js .season-pic img { -webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 58%); mask-image:linear-gradient(90deg,#000 42%,transparent 58%);
    -webkit-mask-size:260% 100%; mask-size:260% 100%; -webkit-mask-position:100% 0; mask-position:100% 0;
    transform:scale(1.06); filter:blur(3px);
    transition:-webkit-mask-position 1.8s cubic-bezier(.3,.6,.2,1) .2s, mask-position 1.8s cubic-bezier(.3,.6,.2,1) .2s,
               transform 2.4s cubic-bezier(.2,.7,.2,1) .2s, filter 1.4s ease .3s; }
  .season.in .season-pic img { -webkit-mask-position:0 0; mask-position:0 0; transform:none; filter:none; }

  /* 5 -- "Im Zweifel fragen Sie einfach nach." schreibt sich */
  .js .law .hand { -webkit-mask-image:linear-gradient(90deg,#000 46%,transparent 54%); mask-image:linear-gradient(90deg,#000 46%,transparent 54%);
    -webkit-mask-size:260% 100%; mask-size:260% 100%; -webkit-mask-position:100% 0; mask-position:100% 0;
    transition:-webkit-mask-position 2.6s cubic-bezier(.45,.1,.35,1) .9s, mask-position 2.6s cubic-bezier(.45,.1,.35,1) .9s; }
  .law.in .hand { -webkit-mask-position:0 0; mask-position:0 0; }

  /* 6 -- Telefon klingelt kurz an, wenn der Kontaktbereich erscheint; Wege federn beim Antippen */
  .contact-info.in .way:first-child .ic .icon { animation:ring .9s ease-in-out 1.6s 2; transform-origin:50% 60%; }
  @keyframes ring { 0%,100%{transform:rotate(0)} 15%{transform:rotate(-16deg)} 30%{transform:rotate(14deg)} 45%{transform:rotate(-12deg)} 60%{transform:rotate(9deg)} 75%{transform:rotate(-4deg)} }
  .way:hover .ic, .way:active .ic { transform:scale(1.08) rotate(-4deg); }
  .way .ic { transition:transform .3s cubic-bezier(.3,1.6,.5,1); }

  /* 7 -- Blatt im Trenner wiegt sich leicht */
  .leaf-divider .icon { animation:sway 4.5s ease-in-out infinite; transform-origin:50% 100%; }
  @keyframes sway { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }

  /* 8 -- untere Handy-Leiste faehrt einmal herein */
  .mobile-bar { animation:barUp .6s cubic-bezier(.2,.8,.2,1) .9s both; }
  @keyframes barUp { from{transform:translateY(100%)} to{transform:none} }

  /* 9 -- aktuelle Jahreszeit: leuchtet und traegt "Jetzt dran" (Klasse setzt script.js) */
  .season.now { box-shadow:0 0 0 2px var(--green-3), var(--shadow-sm); }
  .season.now .ic { animation:pulse 2.6s ease-out 1.2s infinite; }
  @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(139,189,87,.55)} 70%,100%{box-shadow:0 0 0 14px rgba(139,189,87,0)} }
}
/* "Jetzt dran"-Hinweis ist Information, keine Deko -- auch ohne Animation sichtbar. */
.season { position:relative; }
.season.now .now-pill { display:inline-flex; align-items:center; gap:6px; position:absolute; top:12px; left:12px; z-index:2;
  background:var(--green); color:#fff; font-family:var(--disp); text-transform:uppercase; letter-spacing:.08em;
  font-size:.8rem; padding:6px 12px 6px 10px; border-radius:999px; box-shadow:var(--shadow-sm); }
.season.now .now-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:#d9f0b8; }
/* Leuchtrahmen ist keine Bewegung -> auch bei reduzierter Bewegung */
.season.now { box-shadow:0 0 0 2px var(--green-3), var(--shadow-sm); }
/* Schreib-Animation: Der Absatz muss so breit sein wie sein TEXT, sonst wischt die
   Maske die meiste Zeit ueber leeren Raum und der Satz "springt" statt sich zu schreiben. */
.law .hand { display:inline-block; }

/* ============================================================ Jahreszeiten-Modus (01.10.2026)
   Die Startseite passt sich der Jahreszeit an: Hintergrund, Akzentfarbe, Text, was durchs
   Bild weht, und welche Leistungen "Saison" haben. Ohne JavaScript bleibt das bisherige
   Heckenschnitt-Foto (.hero::before) -- die Ebenen legt script.js an. */
.hero { --sz:var(--green-3);
  --hero-shade:linear-gradient(100deg, rgba(23,40,20,.93) 0%, rgba(23,40,20,.72) 38%, rgba(23,40,20,.30) 66%, rgba(23,40,20,.55) 100%); }
.season-bg { position:absolute; inset:0; z-index:0; opacity:0; background-size:cover; background-position:center; transition:opacity 1.4s ease; }
.season-bg.on { opacity:1; }
.hero.seasons::before { visibility:hidden; }
.hero h1 .g, .hero .est, .hero .sig, .season-line b { color:var(--sz); transition:color .9s ease; }
.season-line { color:#e7ecdf; font-size:1.02rem; margin:-2px 0 20px; max-width:520px; }
.season-line b { font-weight:600; }
.season-switch { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:26px; }
.season-switch > span { font-family:var(--disp); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; color:#cfd8c6; margin-right:4px; }
.season-switch button { font-family:var(--disp); text-transform:uppercase; letter-spacing:.06em; font-size:.84rem; color:#e7ecdf;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:0 16px; min-height:44px; cursor:pointer;
  transition:background .25s, color .25s, border-color .25s; }
.season-switch button:hover { background:rgba(255,255,255,.16); }
.season-switch button[aria-pressed="true"] { background:var(--sz); border-color:var(--sz); color:#13210f; }
.svc .tag.saison { background:var(--green); color:#fff; border-color:var(--green); }
@media (max-width:680px){
  .season-switch { gap:6px; margin-top:22px; }
  .season-switch > span { width:100%; margin:0 0 2px; }
  .season-switch button { flex:1 1 0; padding:0 6px; font-size:.8rem; }
  .svc .tag.saison { top:12px; right:12px; }
}
@media (prefers-reduced-motion:reduce){ .season-bg { transition:none; } }
@media (prefers-reduced-motion:no-preference){
  .season-bg { animation:kbz 26s ease-in-out infinite alternate; }
  /* Je Jahreszeit eine eigene Form: Bluetenblatt / Grasschnitt / Laub / Schneeflocke */
  .drift[data-s="fruehling"] i { border-radius:65% 0 65% 65%; }
  .drift[data-s="herbst"] i { border-radius:0 85% 0 85%; box-shadow:none; }
  .drift[data-s="winter"] i { height:var(--w); border-radius:50%; box-shadow:0 0 6px rgba(255,255,255,.85); animation-name:snow; }
  @keyframes snow {
    0%   { transform:translate3d(0,0,0); }
    50%  { transform:translate3d(var(--dx,30px),calc(var(--fall,700px)*.5),0); }
    100% { transform:translate3d(calc(var(--dx,30px)*-.4),var(--fall,700px),0); }
  }
}
/* Am Handy laeuft der Hero-Text ueber die volle Breite -- der Desktop-Verlauf (links dunkel,
   rechts hell) legte ihn dort teils auf helle Bildstellen; im Schnee-Winter fiel der Kontrast
   auf 3,9:1. Darum am Handy eine gleichmaessige Abdunklung. */
@media (max-width:680px){
  /* Staerke per Messreihe gewaehlt (4 Stufen x 4 Jahreszeiten x 3 Textbloecke): hellste Stufe mit
     Sicherheitsabstand. Knappste Stelle ist der SOMMER (sonnige Hecke hinter dem Fliesstext): 5,8:1. */
  .hero { --hero-shade:linear-gradient(180deg, rgba(23,40,20,.68) 0%, rgba(23,40,20,.62) 45%, rgba(23,40,20,.82) 100%); }
}
/* "Saison"-Schild ist Information -> lesbar gross (erbte 10,6 px vom alten Regional-Schild) */
.svc .tag.saison { font-size:.78rem; letter-spacing:.08em; padding:4px 10px; }
/* Am Handy eigene Zeile ueber dem Titel statt Ecke -- bei 320 px stiess das Schild an "BAUMFAELLUNG". */
@media (max-width:680px){
  .svc .tag.saison { position:static; grid-column:2; grid-row:1; justify-self:start; margin:0 0 6px; }
  .svc:has(.tag.saison) h3 { grid-row:2; }
  .svc:has(.tag.saison) p { grid-row:3; }
  .svc:has(.tag.saison) .ic { grid-row:1 / span 3; }
}

/* =====================================================================
   Go-live 27.10.2026
   - h1 bekommt eine Suchbegriff-Zeile (.ln-sub); die Zeilen sind jetzt auch
     OHNE Animation Bloecke (vorher klebten sie bei "Bewegung reduzieren" zu
     "Zuverlaessig.Leidenschaftlich.Fair." zusammen).
   - "Ueber uns" zeigt die gezeichnete Schubkarre statt eines Fotos; der
     Rahmen bekommt die Papierfarbe der Zeichnung (#f3efe3).
   ===================================================================== */
.hero h1 .ln { display:block; }
.hero h1 .ln-sub { margin-top:.8em; font-size:clamp(.95rem,1.45vw,1.15rem); line-height:1.3; letter-spacing:.14em; color:rgba(255,255,255,.9); font-weight:500; }
.split .media-ill { background:#f3efe3; }
@media (max-width:680px){ .hero h1 .ln-sub { font-size:.86rem; letter-spacing:.1em; margin-top:.9em; } }
@media (prefers-reduced-motion:no-preference){
  .hero h1 .ln.ln-sub { margin-top:.8em; }
  .hero h1 .ln:nth-child(4) > span { animation-delay:.54s; }
}
.field-note { font-size:.84rem; color:var(--muted); margin:2px 0 0; }
.field-note a { color:var(--green); }

/* Hero-Bild schon im CSS passend zur Jahreszeit (02.11.2026): Das Kopf-Skript in index.html
   setzt html.sz-<jahreszeit> mit derselben Monatsregel wie script.js, das CSS laedt direkt
   das richtige WebP. Vorher lud das Handy immer zuerst das grosse Sommerbild (380 KB JPG)
   und danach das Saisonbild. Gleiche URLs wie die Ebenen in script.js -> nur ein Download.
   Ohne JavaScript: Sommer-/Markenmotiv. */
.hero::before { background:var(--hero-shade), url("assets/hero.webp") center/cover no-repeat; }
.sz-fruehling .hero::before { background-image:var(--hero-shade), url("assets/s_fruehling.webp"); }
.sz-herbst .hero::before { background-image:var(--hero-shade), url("assets/s_herbst.webp"); }
.sz-winter .hero::before { background-image:var(--hero-shade), url("assets/s_winter.webp"); }
@media (max-width:800px){
  .hero::before { background-image:var(--hero-shade), url("assets/hero-960.webp"); }
  .sz-fruehling .hero::before { background-image:var(--hero-shade), url("assets/s_fruehling-960.webp"); }
  .sz-herbst .hero::before { background-image:var(--hero-shade), url("assets/s_herbst-960.webp"); }
  .sz-winter .hero::before { background-image:var(--hero-shade), url("assets/s_winter-960.webp"); }
}