/*
Theme Name: Forstbetrieb Dorneckberg
Theme URI: https://fb-dorneckberg.ch
Author: PowerMedia
Author URI: https://powermedia.ch
Description: Massgeschneidertes WordPress-/WooCommerce-Theme für den Forstbetrieb Dorneckberg. Aus dem Konzept-Mockup (Variante A) umgesetzt – bildstark, Logo-Grün + Amber.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fb-dorneckberg
Tags: custom, woocommerce, forst
*/

/* ============================================================
   Forstbetrieb Dorneckberg — Theme-Stylesheet
   Farbwelt am Logo-Grün ausgerichtet (Amber als CTA)
   Aus dem Mockup Variante A übernommen.
   ============================================================ */
:root{
  --forest-900:#1b2e20; --forest-800:#243d2a; --forest-700:#2f5037;
  --forest-600:#3b6745; --forest-500:#4d7d57;
  --moss:#4f9d3a;        /* Logo-Grün */
  --moss-300:#a9c587;
  --amber:#bf6a26;       /* CTA – wie orange Arbeitskleidung */
  --amber-dark:#a4571c;
  --paper:#f5f2ea; --cream:#fbfaf5; --ink:#22291f; --ink-soft:#4a5345; --line:#e3ddcf;
  --radius:14px; --maxw:1200px;
  --shadow:0 1px 2px rgba(27,46,32,.06),0 8px 24px rgba(27,46,32,.08);
  --shadow-lg:0 20px 50px rgba(27,46,32,.16);
}
*{box-sizing:border-box}
/* Der Kopfbereich klebt oben (76px). Ohne diesen Abstand verschwindet die
   angesprungene Überschrift beim Klick auf einen #-Link darunter. */
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;font-family:"Inter",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.08;letter-spacing:-.01em;color:var(--forest-900)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--moss)}

/* Mindesthöhe für Inhaltsseiten: Sonst ist eine noch dünn befüllte Seite kürzer
   als der Bildschirm, der Sprung zu einem #-Abschnitt läuft ins Leere und der
   klebende Kopfbereich steht mitten im Bild. */
/* Inhaltsseiten starten näher am Kopfbereich: Die 90px der Startseiten-Abschnitte
   wirken direkt unter der Navigation wie ein Loch. */
section.blk.page{min-height:calc(100vh - 190px);padding-top:48px}

/* ---------- Redaktionelle Inhalte (Block-Editor) ----------
   Das Theme brachte für Seiteninhalte bisher keine eigenen Abstände mit;
   die Blöcke standen dadurch zu dicht beieinander. */
.entry-content{max-width:74ch}
.entry-content>*:first-child{margin-top:0}
.entry-content p{margin:0 0 1.15em;line-height:1.7}
.entry-content h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin:2.8em 0 .75em}
.entry-content h3{font-size:1.22rem;margin:2em 0 .6em}
.entry-content ul,.entry-content ol{margin:0 0 1.3em;padding-left:1.3em;line-height:1.75}
.entry-content li{margin-bottom:.35em}
.entry-content li::marker{color:var(--moss)}
/* Bilder dürfen breiter sein als die Lesespalte – ein Gruppenfoto wirkt sonst zu klein. */
.entry-content .wp-block-image{max-width:none;margin:2em 0}
.entry-content figure{margin:1.8em 0}
.entry-content figcaption{margin-top:.7em;font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.entry-content img{border-radius:var(--radius)}

/* Tabellen: Zahlenspalte rechts und schmal, sonst zieht sich die erste Spalte
   über die ganze Breite. */
.entry-content table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:.98rem}
/* WordPress rahmt jede Zelle einzeln ein – hier auf eine ruhige Trennlinie reduziert. */
.entry-content th,.entry-content td,
.entry-content .wp-block-table th,.entry-content .wp-block-table td{
  padding:11px 4px;border:0;border-bottom:1px solid var(--line);text-align:left;
}
.entry-content thead th{color:var(--forest-700);font-weight:600}
.entry-content td:last-child{text-align:right;white-space:nowrap;width:1%;padding-left:24px}
.entry-content tr:last-child td{border-bottom:0}
.entry-content .wp-block-table{overflow-x:auto}

/* --- Karte (Zwei-Klick-Lösung) --- */
.kontakt-karte{margin-top:64px}
.kontakt-karte h2{font-size:1.45rem;margin:0 0 22px}

.karte-box{
  position:relative;width:100%;aspect-ratio:16/7;min-height:320px;
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:#e8f0e0;
}
@media(max-width:640px){.karte-box{aspect-ratio:4/3}}

.karte-platzhalter{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;padding:28px;
  /* Andeutung einer Karte, ohne externe Daten zu laden */
  background:
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(47,80,55,.07) 38px 39px),
    repeating-linear-gradient(90deg,transparent 0 38px,rgba(47,80,55,.07) 38px 39px),
    var(--cream);
}
.karte-platzhalter .ico{width:38px;height:38px;color:var(--moss);stroke-width:1.6}
.karte-adresse{margin:0;font-weight:600;color:var(--forest-900);font-size:1.05rem}
.karte-hinweis{margin:0;max-width:44ch;font-size:.87rem;color:var(--ink-soft);line-height:1.5}
.karte-platzhalter .btn{margin-top:6px}
.karte-alt{margin:4px 0 0;font-size:.87rem}
.karte-alt a{color:var(--ink-soft);border-bottom:1px solid var(--line)}
.karte-alt a:hover{color:var(--forest-700);border-bottom-color:var(--moss)}

.karte-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

.karte-anfahrt{margin-top:18px;color:var(--ink-soft);font-size:.95rem;line-height:1.6;max-width:70ch}
.karte-anfahrt p{margin:0}

/* Dunkle Variante im grünen Kontaktbereich der Startseite */
.karte-dunkel{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
.karte-dunkel .karte-platzhalter{
  background:
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.06) 38px 39px),
    repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.06) 38px 39px),
    rgba(255,255,255,.04);
}
.karte-dunkel .karte-platzhalter .ico{color:var(--moss-300)}
.karte-dunkel .karte-adresse{color:#fff}
.karte-dunkel .karte-hinweis{color:rgba(255,255,255,.72)}

/* Auf der Startseite füllt die Karte die Höhe der Kontaktangaben aus. */
.kontakt .grid .karte-box{height:100%;aspect-ratio:auto;min-height:340px}

/* --- Einzelne Meldung (single.php) --- */
.meldung-bild{margin:36px 0 40px;max-width:860px}
/* Höhe begrenzen: Hochformat-Fotos aus der Kamera würden die Seite sonst sprengen,
   Querformat bleibt unverändert breit. */
.meldung-bild img{width:auto;max-width:100%;max-height:min(74vh,720px);height:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
.meldung-bild figcaption{margin-top:10px;font-size:.86rem;color:var(--ink-soft)}
.meldung-text{max-width:68ch;font-size:1.06rem;line-height:1.75}
.meldung-text p{margin:0 0 1.15em}
.meldung .crumb{font-size:.88rem;color:var(--ink-soft)}
.meldung .crumb a:hover{color:var(--moss)}
.meldung .crumb .sep{margin:0 .5em;color:var(--line)}
.btn{display:inline-flex;align-items:center;gap:.55em;font-weight:600;font-size:.95rem;padding:.85em 1.4em;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .2s,background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--amber);color:#fff;box-shadow:0 6px 18px rgba(191,106,38,.35)}
.btn-primary:hover{background:var(--amber-dark)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5);backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgba(255,255,255,.22)}
.btn-outline{background:transparent;color:var(--forest-700);border-color:var(--forest-500)}
.btn-outline:hover{background:var(--forest-700);color:#fff}
.ico{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.photo{position:relative;background-color:var(--forest-700);background-size:cover;background-position:center;overflow:hidden}
.photo[data-caption]::after{content:attr(data-caption);position:absolute;left:10px;bottom:10px;font-size:.68rem;letter-spacing:.04em;color:rgba(255,255,255,.85);background:rgba(27,46,32,.5);backdrop-filter:blur(3px);padding:3px 8px;border-radius:6px;font-weight:500}

/* ---- Topbar ---- */
.topbar{background:var(--forest-900);color:#d9e4d0;font-size:.83rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:38px}
.topbar a{display:inline-flex;align-items:center;gap:.4em}.topbar a:hover{color:#fff}
.topbar .right{display:flex;gap:20px}

/* ---- Header ---- */
header.site{position:sticky;top:0;z-index:50;background:rgba(245,242,234,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.brand{display:flex;align-items:center;gap:11px}
/* Das Logo ist ein freigestelltes PNG – kein mix-blend-mode nötig (der war
   für die alte JPG-Fassung mit weissem Hintergrund gedacht). */
/* flex-shrink:0 ist hier kein Feinschliff, sondern die eigentliche Regel:
   .brand und das Bild sind Flex-Elemente und dürfen sonst schmaler werden,
   während die Höhe fix bleibt — das Logo wird dann zusammengequetscht.
   Auf dem Handy war es bei 390px um ein Drittel verzerrt. Damit die Kopfzeile
   trotzdem passt, wird stattdessen die HÖHE kleiner (siehe Medienabfragen). */
.brand{flex-shrink:0}
/* object-fit:contain als zweite Sicherung: Selbst wenn das Feld doch einmal
   schmaler wird, bleibt das Bild im Seitenverhältnis, statt zu quetschen. */
.brand .logo-img{height:46px;width:auto;display:block;flex-shrink:0;object-fit:contain}
nav.main{display:flex;align-items:center;gap:22px}
nav.main ul{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
nav.main a{font-weight:500;font-size:.93rem;color:var(--ink-soft);position:relative;padding:4px 0}
nav.main a:hover{color:var(--forest-700)}
nav.main a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--moss);transition:width .25s}
nav.main a:hover::after,nav.main .current-menu-item>a::after{width:100%}
.header-actions{display:flex;align-items:center;gap:14px}
.cart{position:relative;display:inline-flex;color:var(--forest-700)}
.cart .badge{position:absolute;top:-6px;right:-8px;background:var(--amber);color:#fff;font-size:.62rem;font-weight:700;min-width:16px;height:16px;border-radius:999px;display:grid;place-items:center;padding:0 3px}
.burger{display:none;background:none;border:0;color:var(--forest-800);cursor:pointer}

/* ---------- Untermenüs (Desktop: Aufklappmenü) ---------- */
nav.main li{position:relative}
/* Nicht umbrechen und nicht schrumpfen: Sonst zerfallen lange Punkte wie
   „Wald & Natur“ auf engen Bildschirmen in mehrere Zeilen. */
nav.main>ul>li{flex-shrink:0}
nav.main>ul>li>a{white-space:nowrap}
nav.main .has-sub>a{padding-right:19px}
nav.main .sub-toggle{
  position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  background:none;border:0;padding:2px;cursor:pointer;color:var(--ink-soft);
  display:inline-flex;transition:transform .2s;
}
nav.main .sub-toggle .ico{width:14px;height:14px}
nav.main .sub{
  position:absolute;top:calc(100% + 12px);left:-16px;min-width:236px;
  flex-direction:column;align-items:stretch;gap:0;
  background:var(--cream);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:8px;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
/* Unsichtbare Brücke, damit der Zeiger die Lücke überqueren kann */
nav.main .has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
nav.main .has-sub:hover>.sub,
nav.main .has-sub:focus-within>.sub,
nav.main .has-sub.open>.sub{opacity:1;visibility:visible;transform:translateY(0)}
nav.main .has-sub:hover>.sub-toggle,
nav.main .has-sub.open>.sub-toggle{transform:translateY(-50%) rotate(180deg)}
nav.main .sub li{width:100%}
nav.main .sub a{
  display:block;padding:9px 12px;border-radius:8px;font-size:.9rem;
  color:var(--ink-soft);white-space:nowrap;
}
nav.main .sub a::after{display:none}
nav.main .sub a:hover{background:#e8f0e0;color:var(--forest-800)}

/* ---------- Kachel-Untermenü („Mega“) ----------
   Breites Panel mit Bildkacheln, mittig unter dem Menüpunkt. Die Verschiebung
   --mega-nudge setzt theme.js, damit das Panel bei schmalen Fenstern nicht aus
   dem Bild läuft; ohne JS bleibt es schlicht zentriert. */
nav.main .sub.mega{
  left:50%;right:auto;min-width:0;
  width:min(1040px,calc(100vw - 32px));
  transform:translate(calc(-50% + var(--mega-nudge,0px)),-6px);
  padding:16px;border-radius:16px;
}
nav.main .has-sub:hover>.sub.mega,
nav.main .has-sub:focus-within>.sub.mega,
nav.main .has-sub.open>.sub.mega{transform:translate(calc(-50% + var(--mega-nudge,0px)),0)}
nav.main .mega-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:2px 6px 11px;margin-bottom:13px;border-bottom:1px solid var(--line);
}
nav.main .mega-kicker{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--moss);font-weight:600;
}
nav.main .mega .mega-all{
  display:inline-flex;align-items:center;gap:5px;padding:0;
  font-size:.82rem;color:var(--ink-soft);white-space:nowrap;
}
nav.main .mega .mega-all:hover{background:none;color:var(--forest-800)}
nav.main .mega .mega-all .ico{width:15px;height:15px}
nav.main .mega-grid{
  /* minmax(0,1fr) statt 1fr: Sonst wird die Spalte so breit wie das längste
     Wort („Strassenunterhalt“) und das Raster läuft aus dem Panel. */
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;
  /* stretch muss ausdrücklich stehen: nav.main ul zentriert die Elemente. */
  align-items:stretch;
  margin:0;padding:0;list-style:none;
}
nav.main .mega-grid li{width:auto;display:flex}
/* Gleiche Höhe in der Zeile, auch wenn ein Titel zweizeilig wird. */
nav.main .mega .mtile{width:100%}
/* „.mega“ muss im Selektor stehen: „nav.main .sub a“ hat zwei Klassen und zwei
   Elemente und würde sonst padding, white-space und Farbe zurücksetzen. */
nav.main .mega .mtile{
  display:block;padding:0;overflow:hidden;white-space:normal;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
nav.main .mega .mtile:hover{
  background:var(--paper);transform:translateY(-2px);
  box-shadow:var(--shadow);border-color:var(--moss-300);
}
nav.main .mega .mtile .photo{
  display:block;aspect-ratio:16/10;
  background-color:var(--forest-700);background-size:cover;background-position:center;
}
nav.main .mega .mtile .mtitle{
  display:block;padding:9px 10px 11px;
  font-size:.79rem;line-height:1.3;font-weight:600;color:var(--forest-800);
  /* Keine Silbentrennung: „Ver-bauungen“ liest sich schlecht. Umgebrochen wird
     an den Wortzwischenräumen; das „&“ hängt per geschütztem Leerzeichen am
     Wort davor (siehe fbd_mega_panel), damit die Zeile danach umbricht.
     break-word bleibt als Notnagel für den Fall eines übermässig langen Worts. */
  overflow-wrap:break-word;hyphens:none;
}
@media(max-width:1240px){nav.main .mega-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- Hero ---- */
.hero{position:relative;min-height:90vh;display:flex;align-items:flex-end;background-color:var(--forest-800);background-size:cover;background-position:center 35%;color:#fff}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,46,32,.15),rgba(27,46,32,.25) 45%,rgba(27,46,32,.85))}
.hero .wrap{position:relative;padding-top:80px;padding-bottom:66px;width:100%}
.hero-tag{display:inline-flex;align-items:center;gap:.5em;font-size:.8rem;font-weight:600;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:.45em 1em;border-radius:999px;backdrop-filter:blur(4px)}
.hero h1{color:#fff;font-size:clamp(2.6rem,6vw,5rem);max-width:16ch;margin:.5em 0 .35em}
.hero p.lead{font-size:clamp(1.05rem,2vw,1.3rem);max-width:48ch;color:rgba(255,255,255,.92);margin:0 0 1.8em}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-cap{position:absolute;right:16px;bottom:14px;font-size:.66rem;color:rgba(255,255,255,.7);background:rgba(27,46,32,.4);padding:3px 8px;border-radius:6px}

/* ---- Quick-Cards ---- */
.quick{margin-top:-46px;position:relative;z-index:5}
.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.qcard{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;cursor:pointer}
.qcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.qcard .qico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:#e8f0e0;color:var(--forest-700);margin-bottom:14px}
.qcard h3{font-size:1.08rem;margin:0 0 4px}.qcard p{margin:0;font-size:.88rem;color:var(--ink-soft)}

/* ---- Sektionen ---- */
section.blk{padding:90px 0}
.sec-head{max-width:62ch;margin-bottom:42px}
.sec-head h2{font-size:clamp(1.9rem,3.5vw,2.8rem);margin:.3em 0 .35em}
.sec-head p{color:var(--ink-soft);margin:0;font-size:1.05rem}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

.intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.intro .photo{border-radius:var(--radius);aspect-ratio:4/3;box-shadow:var(--shadow-lg)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}
.stat .num{font-family:"Fraunces";font-size:2.2rem;color:var(--forest-700);line-height:1}
.stat .lbl{font-size:.82rem;color:var(--ink-soft);margin-top:2px}

.shop{background:var(--forest-900);color:#e9efe2}
.shop .sec-head h2{color:#fff}.shop .sec-head p{color:#b9c8ad}
.shop-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.prod-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.prod{background:#23382a;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s}
.prod:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.prod .photo{aspect-ratio:1/1}
.prod .badge-season{position:absolute;top:12px;left:12px;background:var(--amber);color:#fff;font-size:.68rem;font-weight:700;padding:4px 10px;border-radius:999px;z-index:2}
.prod .body{padding:18px}
.prod h3{color:#fff;font-size:1.15rem;margin:0 0 4px}
.prod .meta{font-size:.82rem;color:#a9bda0;margin:0 0 14px}
.prod .buy{display:flex;align-items:center;justify-content:space-between}
.prod .price{font-family:"Fraunces";font-size:1.3rem;color:#fff}.prod .price small{font-size:.72rem;color:#a9bda0;font-family:"Inter"}
.prod .add{width:40px;height:40px;border-radius:10px;background:var(--amber);color:#fff;border:0;display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s}
.prod .add:hover{background:var(--amber-dark);transform:scale(1.06)}

.serv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.serv{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:pointer;display:block}
.serv:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.serv .photo{aspect-ratio:16/10}
.serv .scont{padding:20px 22px 24px}
.serv .stitle{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.serv .stitle .si{width:30px;height:30px;border-radius:8px;background:#e8f0e0;color:var(--forest-700);display:grid;place-items:center;flex:none}
.serv h3{font-size:1.18rem;margin:0}
.serv p{margin:0;font-size:.9rem;color:var(--ink-soft)}

.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.news{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:pointer;display:block}
.news:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.news .photo{aspect-ratio:16/10}
.news .body{padding:20px}
.news .tags{display:flex;gap:8px;margin-bottom:10px;align-items:center}
.tag{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:6px}
.tag.warn{background:#fbe6d6;color:var(--amber-dark)}.tag.info{background:#e7efdd;color:var(--forest-700)}
.news .date{font-size:.78rem;color:var(--ink-soft)}
.news h3{font-size:1.16rem;margin:6px 0}.news p{font-size:.9rem;color:var(--ink-soft);margin:0}

.nature{background:#e8f0e0}
.nature .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg)}
.nature .photo{min-height:430px}
.nature .txt{background:var(--forest-700);color:#eaf1e2;padding:56px 48px;display:flex;flex-direction:column;justify-content:center}
.nature .txt h2{color:#fff;font-size:clamp(1.8rem,3vw,2.5rem)}.nature .txt p{color:#cdddc1}
.nature ul{list-style:none;padding:0;margin:18px 0 28px;display:grid;gap:10px}
.nature li{display:flex;align-items:center;gap:10px;color:#eaf1e2}

.twocol{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:start}
.termine{display:grid;gap:14px}
.termin{display:flex;gap:18px;align-items:center;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.termin .d{flex:none;width:58px;text-align:center;background:var(--forest-700);color:#fff;border-radius:10px;padding:8px 0}
.termin .d .day{font-family:"Fraunces";font-size:1.5rem;line-height:1}.termin .d .mon{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.termin h3{font-size:1.02rem;margin:0 0 2px}.termin p{margin:0;font-size:.84rem;color:var(--ink-soft)}
.gemeinden{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.gem{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:14px 18px;font-weight:600;color:var(--forest-700);font-size:.95rem}

.kontakt{background:var(--forest-900);color:#e9efe2}
.kontakt .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.kontakt h2{color:#fff;font-size:clamp(1.9rem,3.5vw,2.8rem)}.kontakt .lead{color:#bccfb1;margin-bottom:26px}
.kinfo{display:grid;gap:16px;margin-bottom:28px}
.kinfo .row{display:flex;gap:14px;align-items:flex-start}
.kinfo .kic{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.08);color:var(--moss-300);display:grid;place-items:center;flex:none}
.kinfo .row b{color:#fff;font-weight:600;display:block;font-size:.95rem}.kinfo .row span{color:#b9c8ad;font-size:.9rem}
.mapph{border-radius:var(--radius);min-height:380px}

/* ---- Footer ---- */
footer.site{background:var(--forest-900);color:#9fb293;padding:64px 0 28px;border-top:4px solid var(--moss)}
/* minmax(0,…) statt blossem fr: Sonst wird jede Spalte mindestens so breit wie
   ihr längstes Wort, und der Footer schob auf dem Handy die ganze Seite quer. */
.fgrid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
footer.site h4{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}footer.site a:hover{color:#fff}
.fwordmark{font-family:"Inter";font-weight:700;font-size:1.4rem;letter-spacing:-.01em}
.fwordmark .g{color:var(--moss)}.fwordmark .w{color:#fff}
footer.site .fbrand p{max-width:34ch;font-size:.9rem;margin:10px 0 0}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:.82rem}
.fbot .legal{display:flex;gap:20px;flex-wrap:wrap}

/* ---- Responsive ---- */
@media(max-width:1000px){
  .quick-grid,.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .serv-grid,.news-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .intro,.nature .grid,.kontakt .grid,.twocol{grid-template-columns:minmax(0,1fr);gap:32px}
  .nature .photo{min-height:300px}
}
/* Navigation früher aufs Klappmenü umstellen: Mit sieben Punkten und drei
   Untermenüs wird die Zeile schon deutlich vor 760px zu eng. */
@media(max-width:1080px){
  nav.main{position:fixed;inset:76px 0 auto 0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;border-bottom:1px solid var(--line);transform:translateY(-140%);transition:transform .3s;box-shadow:var(--shadow-lg)}
  nav.main.open{transform:translateY(0)}
  nav.main ul{flex-direction:column;align-items:stretch;gap:0}
  nav.main a{padding:13px 0;border-bottom:1px solid var(--line);display:block}
  .burger{display:inline-flex}.topbar .right span{display:none}
  /* Untermenüs mobil: eingerückte Liste, die per Tippen aufklappt.
     Hover gibt es hier nicht, deshalb steuert allein die Klasse .open. */
  nav.main .sub{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-radius:0;background:transparent;
    padding:0 0 0 16px;min-width:0;display:none;
  }
  nav.main .has-sub.open>.sub{display:block}
  nav.main .has-sub:hover>.sub{opacity:1;visibility:visible}
  nav.main .has-sub:not(.open):hover>.sub{display:none}
  nav.main .has-sub::after{display:none}
  nav.main .sub a{padding:11px 0;font-size:.9rem;border-bottom:1px solid var(--line)}
  nav.main .sub a:hover{background:none}
  nav.main .sub-toggle{
    right:0;top:14px;transform:none;padding:8px;
    /* grössere Trefferfläche für den Finger */
    margin:-8px;
  }
  nav.main .has-sub.open>.sub-toggle{transform:rotate(180deg)}
  /* Kacheln gibt es mobil nicht: Zehn Bilder im Klappmenü sind unbedienbar.
     Übrig bleibt dieselbe eingerückte Liste wie bei den anderen Untermenüs. */
  nav.main .sub.mega{width:auto;left:auto;transform:none;padding:0 0 0 16px;border-radius:0}
  nav.main .has-sub.open>.sub.mega{transform:none}
  nav.main .mega-head{display:none}
  nav.main .mega-grid{display:block;gap:0}
  nav.main .mega .mtile{border:0;border-radius:0;background:none}
  nav.main .mega .mtile:hover{transform:none;box-shadow:none}
  nav.main .mega .mtile .photo{display:none}
  nav.main .mega .mtile .mtitle{
    padding:11px 0;font-size:.9rem;font-weight:400;
    color:var(--ink-soft);border-bottom:1px solid var(--line);
  }
  nav.main .has-sub:hover>.sub-toggle{transform:none}
  nav.main .has-sub.open:hover>.sub-toggle{transform:rotate(180deg)}
  .quick-grid,.prod-grid,.serv-grid,.news-grid{grid-template-columns:minmax(0,1fr)}
  section.blk{padding:60px 0}.hero{min-height:82vh}
  section.blk.page{padding-top:34px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- Kopfzeile auf schmalen Bildschirmen ----------
   Rechnung bei 390px: Innenabstand 2x16, Knöpfe 24+76+40 plus Lücken.
   Was übrig bleibt, gibt die Logohöhe vor — das Seitenverhältnis ist 5,04:1. */
@media(max-width:640px){
  header.site .wrap{padding:0 16px;gap:12px}
  .header-actions{gap:10px}
  .brand .logo-img{height:34px}
}
@media(max-width:400px){
  .brand .logo-img{height:30px}
  .header-actions .btn-primary{padding:8px 14px;font-size:.85rem}
}
@media(max-width:360px){
  header.site .wrap{padding:0 12px;gap:8px}
  .header-actions{gap:8px}
  .brand .logo-img{height:26px}
}

/* ---------- Footer auf schmalen Bildschirmen ---------- */
@media(max-width:900px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
}
@media(max-width:480px){
  .fgrid{grid-template-columns:minmax(0,1fr);gap:24px}
}

/* Drei Kennzahlen nebeneinander sind unter 400px zu schmal. */
@media(max-width:400px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}