/* ==========================================================================
   EndraOne – Global Styles
   Inter wird lokal gehostet (kein Google-CDN → DSGVO-konform, keine Fremd-Requests)
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;           /* Variable Font, deckt alle genutzten Gewichte ab */
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  /* latin – enthaelt alle deutschen Umlaute (ä ö ü ß) */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FFFFFF;
  color: #0B3D2E;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a.txt { color: #1F5C45; }
a.txt:hover { color: #0B3D2E; }
h1, h2, h3 { margin: 0; letter-spacing: -0.025em; text-wrap: balance; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; }

input, textarea { font-family: inherit; }
input::placeholder, textarea::placeholder { color: #9DB2A7; }
input:focus, textarea:focus { outline: none; border-color: #0B3D2E; }

summary::-webkit-details-marker { display: none; }
details[open] .faqp { transform: rotate(45deg); }

/* Sichtbarer Fokus-Rahmen für Tastatur-Navigation (Barrierefreiheit) */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #0B3D2E;
  outline-offset: 2px;
}

/* Responsiv: unter 820px einspaltig */
@media (max-width: 820px) {
  .grid2 { grid-template-columns: 1fr !important; }
  .grid2b { grid-template-columns: 1fr !important; }
  nav .nav-links { display: none !important; }   /* Menü-Links auf sehr kleinen Screens ausblenden */
}

/* ---- „Weg mit uns" – Straßen-Sektion ------------------------------------ */
/* Endlos laufende gestrichelte Mittellinie (Fahrt-Illusion) */
@keyframes road-dash-move { to { stroke-dashoffset: -48; } }
.road-dash { animation: road-dash-move 1.6s linear infinite; }

/* Stationskarten: Reveal beim Scrollen (JS setzt .is-visible) */
[data-station] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
[data-station].is-visible { opacity: 1; transform: none; }

/* Auf schmalen Screens: Karten volle Breite, Straße dezent ausblenden */
@media (max-width: 720px) {
  .road-svg { display: none !important; }
  .road-wrap [data-station] { justify-content: center !important; }
  .road-card {
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }
  .road-card > div:first-child { justify-content: flex-start !important; }
}

/* ---- Anzeigen: Creatives-Laufband (Marquee) ----------------------------- */
.marquee {
  overflow: hidden;
  width: 100%;
  /* Weicher Ein-/Austritt links & rechts */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: clamp(16px, 2.5vw, 28px);
  /* -50% -> 0% ergibt rechtsläufige, nahtlose Bewegung (Wiedereintritt links) */
  animation: marquee-rtl 40s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-rtl {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.creative-card {
  flex: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11,61,46,0.05), 0 18px 40px -24px rgba(11,61,46,0.35);
  background: #F5F9F6;
}
.creative-card img {
  display: block;
  height: clamp(300px, 42vw, 380px);
  width: auto;
}

/* Reveal-on-Scroll Grundzustand (JS setzt .is-visible) */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Nutzer, die reduzierte Bewegung wünschen: keine Animationen */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-station] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .road-dash { animation: none !important; }
  .marquee-track { animation: none !important; transform: none !important; }
  .marquee { overflow-x: auto; }   /* stattdessen manuell scrollbar */
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Budget-Chips im Kontaktformular */
.chip {
  padding: 11px 18px; border-radius: 999px; border: 1px solid #D6E4DC;
  font-size: 14.5px; font-family: inherit; cursor: pointer;
  transition: all .15s ease; background: #fff; color: #123D30;
}
.chip:hover { border-color: #0B3D2E; }
.chip.is-active { background: #0B3D2E; color: #fff; border-color: #0B3D2E; }

/* Honeypot – für Menschen unsichtbar, fängt Bots */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* Formular-Fehlermeldung */
.form-error {
  display: none; color: #B00020; font-size: 14px; margin-top: 14px; text-align: center;
}
.form-error.is-visible { display: block; }

/* ==========================================================================
   Rechtstext-Seiten (Impressum / AGB / Datenschutz)
   ========================================================================== */
.legal-wrap { max-width: 860px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 56px); }
.legal-article { max-width: 720px; margin: 0 auto; padding: 40px 0 96px; }
.legal-article h1 {
  font-size: clamp(30px, 4.5vw, 44px); font-weight: 800; color: #0B3D2E;
  letter-spacing: -0.025em; margin: 0;
}
.legal-article h2 {
  font-size: 22px; font-weight: 700; color: #0B3D2E;
  letter-spacing: -0.02em; margin: 38px 0 4px;
}
.legal-article h3 { font-size: 16px; font-weight: 700; color: #123D30; margin: 26px 0 2px; }
.legal-article p {
  font-size: 15.5px; line-height: 1.7; color: #3B5B4E; margin: 10px 0 0; white-space: pre-line;
}
.legal-article a { color: #1F5C45; text-decoration: underline; }
.legal-article hr { border: 0; border-top: 1px solid #E7EFEA; margin: 40px 0 8px; }
.legal-note {
  background: #F5F9F6; border: 1px solid #E7EFEA; border-left: 3px solid #7FD3A8;
  border-radius: 10px; padding: 14px 18px; margin: 18px 0 4px;
  font-size: 14px; line-height: 1.6; color: #3B5B4E; white-space: pre-line;
}
.legal-header {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 20px clamp(24px, 5vw, 56px);
  background: rgba(255,255,255,0.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid #E7EFEA;
}
.legal-back {
  display: inline-flex; align-items: center; gap: 8px; background: #F5F9F6;
  border: 1px solid #E7EFEA; color: #0B3D2E; font-family: inherit; font-size: 14px;
  font-weight: 600; padding: 9px 16px; border-radius: 999px; cursor: pointer;
}
.legal-back:hover { background: #EAF3EE; }