:root{
  --bg: #f8f8f6;
  --fg: #101010;
  --muted: #efefe9;
  --brand: #1fb64d; /* Würz-Grün */
  --card: #ffffff;
  --shadow: 0 4px 20px rgba(0,0,0,.05);
  --radius: 18px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.55;
}

/* Layout */
.container{ width:min(1100px, 92vw); margin-inline:auto; }
.section{ padding: 4.5rem 0; }
.section-muted{ background: var(--muted); }
.mt{ margin-top: 2rem; }
.lead{ font-size:1.15rem; color:#333; }
.highlight{ margin-top:1.5rem; font-size:1.05rem; background:#fff8e5; padding:.8rem 1rem; border-left:4px solid var(--brand); }

/* Header */
.site-header{
  position: sticky; top:0; z-index:10;
  background: rgba(248,248,246,.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e9e9e3;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: .9rem 0; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; }
.brand-logo{ height:40px; width:auto; display:block; }
.brand-text{ font-weight:700; }

/* Nav */
.nav a{ color:#1c1c1c; text-decoration:none; padding:.5rem .7rem; border-radius:10px; }
.nav a:hover{ background:#eaeae4; }

/* Hero */
.hero{ padding: 5.5rem 0 3rem; }
.hero-inner h1{ font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); margin:0 0 .6rem; }

/* Cards */
.card-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
@media (max-width: 860px){ .card-grid{ grid-template-columns: 1fr; } }

.card{
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid #ecece6;
}
.card-media{ background:#fafafa; display:flex; justify-content:center; align-items:center; }
.card-media img{ display:block; width:100%; height: auto; object-fit: contain; }
.card-body{ padding: 1.1rem; }
.card-body h3{ margin:0 0 .35rem; font-size:1.25rem; }
.card-body p{ margin:0; color:#3d3d3d; }

/* Galerie */
.gallery{ display:grid; gap:.8rem; grid-template-columns: repeat(4, 1fr); }
.gallery img{ width:100%; height:auto; object-fit: contain; border-radius: 14px; background:#fafafa; box-shadow: var(--shadow); }
@media (max-width: 1024px){ .gallery{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .gallery{ grid-template-columns: 1fr; } }

/* Kontakt */
.contact address{ font-style: normal; margin-bottom: .8rem; }
.contact a{ color: var(--brand); text-decoration: none; }
.contact a:hover{ text-decoration: underline; }
.hint{ color:#4b4b4b; }

/* Footer */
.site-footer{ border-top: 1px solid #e9e9e3; background: #fff; }
.footer-inner{ padding: 1.1rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem; color:#4b4b4b; }
.footer-nav a{ color:#4b4b4b; text-decoration:none; margin-left:.8rem; }
.footer-nav a:hover{ color:#222; }

/* Focus states */
a:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
