/* ============================================================
   ROOT.CSS
   Zentrale Variablen: Farben, Schriften, Radien, Border, Timings.
   Alles was sich wiederholt, kommt von hier - nicht in den
   einzelnen Section-CSS-Dateien neu definieren.
============================================================ */

:root {

  /* --- Farben: Grün --- */
  --green:         #B0CB1F; /* Apfelgrün - Navbar, helle Sections */
  --green-light:   #D8E896; /* aufgehelltes Grün - Boxen "Über uns", Glanzstreifen */
  --green-lighter: #EAF2C8; /* für sanftere Verläufe */
  --green-dark:    #7C8F16; /* Hover/Aktiv-Text Burgermenü, dunklere Akzente */

  /* --- Farben: Grau --- */
  --gray-dark:     #4D4D4D; /* Überschriften/Rahmen helle Sections */
  --gray-darker:   #2E2E2E; /* Hintergrund even-Sections */
  --gray-light:    #D8D8D8; /* Rahmen/Hintergrund Leistungen-Boxen */
  --gray-light-hover: #C7C7C7; /* Hover-Zustand Leistungen-Boxen */

  /* --- Text --- */
  --text-on-light: #333333;
  --text-on-dark:  #FFFFFF;

  /* --- Typografie --- */
  --font-display: 'Michroma', sans-serif;      /* Slogan, Teaser, Überschriften */
  --font-body:    'Open Sans', sans-serif;     /* Fließtext */

  /* --- Radien & Border --- */
  --radius-box:   10px;
  --border-thin:  1px;

  /* --- Timings --- */
  --trans:        200ms ease;
  --trans-slow:   600ms ease;
  --reveal-dur:   600ms;

  /* --- Layout --- */
  --navbar-height: 72px;
}

* { box-sizing: border-box; }

html {
  /* scroll-behavior:smooth entfernt - Anchor-Scrolling läuft jetzt komplett
     über navbar.js (eigene, langsamere Geschwindigkeit + korrekter Offset
     wegen der fixen Navbar). Sonst würden sich beide Mechanismen überlagern. */
}

body {
  font-family: var(--font-body);
  color: var(--text-on-light);
  margin: 0;
  padding-top: var(--navbar-height);
}

h1, h2, h3, h4,
.display-heading {
  font-family: var(--font-display);
  color: var(--gray-dark);
}

section {
  position: relative;
  padding: 5rem 0;
}

/* odd/even Grundfarben */
section.section-odd {
  background-color: #FFFFFF;
}
section.section-even {
  background-color: var(--gray-darker);
  color: var(--text-on-dark);
}
section.section-even h1,
section.section-even h2,
section.section-even h3,
section.section-even h4 {
  color: var(--green);
}

/* odd/even Trennlinie: dunkelgrün -> apfelgrün -> dunkelgrün */
section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(to right, var(--green-dark), var(--green), var(--green-dark));
  z-index: 2;
}

section:last-of-type::after {
  /*display: none;*/
}

/* sichtbarer Keyboard-Fokus überall */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

/* reduced motion global respektieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Scroll-Reveal Basisklasse (wird von observer-*.js gesteuert) */
.reveal {
  opacity: 0;
  transition: opacity var(--reveal-dur) ease, transform var(--reveal-dur) ease;
}
.reveal.reveal-up {
  transform: translateY(var(--reveal-up-distance, 40px));
}
.reveal.reveal-left {
  transform: translateX(var(--reveal-left-distance, -40px));
}
.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}