/* --------- Tokens --------- */
:root {
  /* Pflichtfarben */
  --primary-green: #2e4820;
  --accent-green: #c1dcaf;

  /* Neutrals & Paper */
  --ink: #1f2d1f;
  --muted: #5b695b;
  --paper: #ffffff;

  /* helle Sage-Töne (für Bänder) */
  --sage-50: #f6fbf5;
  --sage-100: #eef6ee;
  --sage-150: #e6f1e4;
  --sage-200: #dcead9;

  --border: #d9e6d3;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.14);

  --r: 18px;
  --container: min(1140px, 92vw);

  /* Alias */
  --brand-grad: linear-gradient(135deg, var(--accent-green), var(--primary-green));

  /* Typo-Helfer (progressive enhancement) */
  --text-balance: balance;
  --text-pretty: pretty;
}

/* --------- Base --------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.7;
  background: #fff;
}
img { max-width: 100%; height: auto; display: block; }

/* Layout */
.container { width: var(--container); margin-inline: auto; padding-inline: 16px; }
.section { position: relative; padding: clamp(60px, 7vw, 110px) 0; }

/* ---------- Mobile-Textbruch (global & dezent) ---------- */
:where(h1, h2, h3, h4, .title, .eyebrow){
  text-wrap: var(--text-balance);
  hyphens: auto;
}
:where(p, li, dd, blockquote, figcaption, .lead){
  overflow-wrap: anywhere;      /* bricht sehr lange Wörter/URLs */
  word-break: normal;
  hyphens: auto;
  text-wrap: var(--text-pretty);
}
/* Verhindert, dass Flex/Grid-Kinder Text aus dem Layout drücken */
:where(.nav-row, .hero-grid, .cards, .about, .contact-grid, .reviews-list, .reviews-summary, .footer-row) > *{
  min-width: 0;
}

/* Typo Utilities */
.eyebrow {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.82rem;
  color: #324632;
  opacity: 0.95;
  margin-bottom: 0.4rem;
}
.title {
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: var(--primary-green);
  margin-bottom: 1rem;
}

/* --------- Header (full width) --------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--brand-grad); color: #f0fdf4;
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 70px;
}
.brand { display: flex; align-items: center; gap: .7rem; color: #f0fdf4; text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: #f0fdf4; color: var(--primary-green); font-weight: 800; box-shadow: var(--shadow-sm);
}
.brand-name { font-weight: 800; letter-spacing: .2px; overflow-wrap:anywhere; }
.site-nav { display: flex; align-items: center; gap: 1.1rem; }
.site-nav a {
  color: #f0fdf4; text-decoration: none; font-weight: 600;
  padding: .45rem .5rem; border-radius: 10px; white-space: normal; /* darf umbrechen */
}
.site-nav a:hover { background: #ffffff2a; }

/* Burger */
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: none; position: relative; }
.nav-toggle .bar { position: absolute; left: 10px; right: 10px; height: 2px; background: #f0fdf4; border-radius: 2px; }
.nav-toggle .bar:nth-child(1){ top:14px; } .nav-toggle .bar:nth-child(2){ top:21px; } .nav-toggle .bar:nth-child(3){ top:28px; }

@media (max-width: 860px){
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; inset: 70px 0 auto 0; background: var(--brand-grad);
    display: none; flex-direction: column; gap: .7rem; padding: 1rem;
    border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { display:block; }
}

/* --------- Buttons --------- */
.btn {
  display: inline-block; border: 0; border-radius: 999px;
  padding: .95rem 1.25rem; font-weight: 700; cursor: pointer;
  transition: transform .12s, box-shadow .25s, filter .25s;
}
.btn-cta { background: #f0fdf4; color: #183318; box-shadow: var(--shadow-sm); }
.btn-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: saturate(1.05); }
.btn-ghost { color: #183318; background: #f0fdf4; border:1px solid #ffffff66; }
.btn-ghost:hover { background: #ffffff3d; }

/* --------- Footer (full width) --------- */
.site-footer { background: var(--brand-grad); color:#f0fdf4; padding:24px 0; margin-top:40px; }
.footer-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.footer-row a { color:#f0fdf4; text-decoration: underline dotted; overflow-wrap:anywhere; }
.legal { opacity:.9; }

/* =========================
   Content-Links in <main>
========================= */
main a:not(.btn){
  color: var(--primary-green); text-decoration: none;
  background-image: linear-gradient(to right, var(--accent-green), var(--accent-green));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
  transition: background-size .25s ease, filter .2s ease, color .15s ease;
  overflow-wrap:anywhere;
}
main a:not(.btn):hover, main a:not(.btn):active { background-size:100% 2px; filter: saturate(1.05); }
main a:not(.btn):visited { color: var(--primary-green); }
main a:not(.btn):focus-visible { outline:3px solid #c1dcaf; outline-offset:2px; border-radius:6px; }
main a[target="_blank"]:not(.btn)::after { content:"↗"; font-size:.85em; margin-left:.25em; opacity:.85; }

.link-muted{ color:var(--muted); background-image: linear-gradient(to right, var(--muted), var(--muted)); }
.link-muted:hover{ filter:none; }

/* =========================
   HEADER: CTA align
========================= */
.site-header .site-nav a.btn{
  padding: .55rem .9rem; border-radius: 12px; line-height:1; font-weight:700;
}
.site-header .site-nav .btn-cta{
  background:#ffffff1a; color:#f0fdf4; border:1px solid #ffffff66; box-shadow:none;
}
.site-header .site-nav .btn-cta:hover{ background:#ffffff30; color:#ffffff; }
.site-header .site-nav a:where(.btn, .btn-cta):focus-visible{ outline:3px solid #ffffffcc; outline-offset:2px; border-radius:12px; }

/* Foto-Komponenten */
.media-wrap{ margin:14px auto 0; max-width:980px; }
.photo{
  display:block; width:100%; height:auto; border-radius:18px; border:1px solid var(--border);
  box-shadow: var(--shadow-md); background:#f6fbf5;
}
.photo--accent{ outline:6px solid #c1dcaf33; outline-offset:-2px; }
.photo--tilt-r{ transform: rotate(.8deg); } .photo--tilt-l{ transform: rotate(-.8deg); }
.photo--shadow-lg{ box-shadow: 0 18px 40px rgba(0,0,0,.16); }

/* a11y */
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* Mobil: CTA vollbreit */
@media (max-width: 860px){
  .site-header .site-nav .btn-cta{
    width:100%; text-align:center; padding:.9rem 1rem; border-radius:14px; background:#f0fdf4; color:#183318; border:0;
  }
}

/* Offset für sticky Header beim Ankerscrollen */
:root { --header-height: 70px; }
#hero, #leistungen, #ueber, #faq, #kontakt { scroll-margin-top: calc(var(--header-height) + 12px); }