/* HandwerkEasy — Base CSS
   Design Tokens, Reset, Typografie
   ─────────────────────────────── */

/* @font-face-Definitionen liegen in fonts.css (von jeder Seite separat geladen,
   damit auch Stub-Pages ohne base.css die Schriften bekommen). */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Farben */
  --gruen:        #005319;
  --gruen-dark:   #002E0E;
  --gruen-light:  #EDF7F1;
  --gruen-mid:    #22C55E;
  --text:         #0F1A14;
  --text-grau:    #64748B;
  --text-grau-mid:#94A3B8;
  --border:       #E2E8F0;
  --white:        #FFFFFF;
  --bg:           #F8FAF9;

  /* Shape */
  --radius:       12px;
  --radius-sm:    8px;
  --shadow:       0 2px 14px rgba(0,83,25,0.07);

  /* Animation */
  --ease:         0.22s cubic-bezier(.4,0,.2,1);

  /* Typografie */
  --font-body:    'Nunito', sans-serif;
  --font-display: 'Playfair Display', serif;
}

html, body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gruen); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

button {
  font-family: var(--font-body);
  cursor: pointer;
}

/* Skip-Link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--gruen);
  color: var(--white);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 8px; }

/* Focus */
:focus-visible {
  outline: 2px solid var(--gruen);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Overflow-Guard (S16) ────────────────────────────────────────────────────
   Verhindert horizontalen Overflow auf allen Service-Pages.
   `clip` statt `hidden` lässt position:sticky in Kindern funktional. */
html, body {
  max-width: 100%;
  overflow-x: clip;
}
body {
  overflow-wrap: break-word;
}