/* ================================================================
   SCHADSTOFFTEST STUTTGART — STYLESHEET
   Organised by section. Search for the bracketed [TAGS] to jump
   straight to the piece you want to change.
   ================================================================ */

/* ============================================================
   [FONTS] — self-hosted, latin subset only (no third-party requests)
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-v20-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-v20-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-v20-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-v20-latin-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-v14-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-v14-latin-700.woff2') format('woff2');
}

/* ============================================================
   [COLORS] — design tokens, change every color here in one place
   ============================================================ */
:root {
  /* — Brand turquoise (unchanged core) — */
  --color-primary:      #1ACFE1; /* turquoise — interactive accents, second-line headline */
  --color-primary-dark: #059FB0; /* hover */

  /* — Petrol (flyer hero & footer bands) — */
  --color-petrol:       #06323A; /* dark hero/footer background */
  --color-petrol-2:     #124D56; /* slightly lighter petrol, gradients */
  --color-deep:         #08707D;
  --color-deepest:      #054248;

  /* — Warm accent (flyer CTA button) — */
  --color-gold:         #CF9F51; /* primary call-to-action buttons */
  --color-gold-dark:    #B98A3E; /* gold hover */

  /* — Neutrals — */
  --color-bg:           #FCFDFD; /* near-white page background */
  --color-white:        #FFFFFF;
  --color-cyan-light:   #84E4EF;
  --color-wash:         #C8F3F7;
  --color-text:         #06323A; /* body text = deep petrol, not pure black */
  --color-text-invert:  #FCFDFD; /* text on dark bands */
  --color-muted:        #578F95; /* secondary text, labels */
  --color-border:       #CBD8D8; /* thin dividers, input borders */
  --color-photo-border: #CBD8D8; /* same as the booking borders to stay consisten */

  /* Barometer scale (unchanged — keep the risk scale as-is) */
  --baro-green:  #2BA84A;
  --baro-yellow: #F2C200;
  --baro-red:    #D8392B;

  /* Feedback colors */
  --color-error: #C0392B;

  /* ============================================================
     [FONTS] — typefaces used across the whole site
     ============================================================ */
  --font-heading: 'Source Serif 4', Georgia, serif;  /* section headings */
  --font-display: 'Inter', system-ui, sans-serif;    /* hero headline, weight 800 */
  --font-base:    'Inter', system-ui, sans-serif;    /* body & UI */

  /* ============================================================
     [SPACING] — shared spacing/radius scale
     ============================================================ */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 10px 30px rgba(5, 66, 72, 0.12);

  /* ============================================================
     [LAYOUT] — the ONE shared container primitive. Every area that
     must share a left edge (top banner, hero, body sections) uses
     .container and nothing else for its horizontal box — no extra
     max-width, margin, or padding gets layered on top of it.
     --page-max matches the site's existing content width (880px);
     this token unifies it, it does not widen the layout.
     ============================================================ */
  --page-max: 880px;
  --page-gutter: clamp(1rem, 5vw, 3rem);
}

/* ============================================================
   [RESET] — base reset & document defaults
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 1rem;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-deepest);
  line-height: 1.25;
  margin: 0 0 var(--space-sm);
}

h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 var(--space-sm); }

a { color: var(--color-primary-dark); }

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

.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.section {
  padding: var(--space-xl) 0;
}

.section--wash {
  background: var(--color-wash);
}

.section--divider {
  border-top: 1px solid var(--color-border);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   [EYEBROW] — small rule + uppercase label, used above the hero
   headline, the quiz progress text, and any intro section heading
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 var(--space-sm);
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}

/* ============================================================
   [HEADER] — site header, logo, nav
   ============================================================ */
.site-header {
  background: var(--color-petrol);
  color: var(--color-text-invert);
  padding: var(--space-sm) 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.site-header__brand {
  color: var(--color-text-invert);
  font-family: var(--font-display); /* matches .hero__headline */
  font-weight: 800;                 /* matches .hero__headline */
  font-size: 1.15rem;
  text-decoration: none;
}

/* ============================================================
   [HERO] — full-bleed photo band with dark overlay + two-tone headline
   Hero photo (img/hero-waterfall.jpg / .webp): rights held by the site
   owner — do not replace with stock/third-party imagery without checking.
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 620px;
  display: flex;
  align-items: center;
  color: var(--color-text-invert);
  overflow: hidden;
}

.hero__media {
  display: contents;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  z-index: -2;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(6, 50, 58, .55) 0%, rgba(6, 50, 58, .85) 100%);
}

.hero__body {
  position: relative;
  /* padding-block only — this element is combined with .container on the
     same <div>, so a plain `padding` shorthand here would zero out the
     horizontal slot and cancel .container's padding-inline gutter. */
  padding-block: var(--space-xl);
}

/* Shrink-wraps to the headline's natural (longest-line) width, so the
   subhead below it wraps to match — responsive with no fixed pixel value,
   since fit-content clamps itself to the viewport on narrow screens. */
.hero__text {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  margin: 0 0 var(--space-sm);
}

.hero__headline-line {
  display: block;
}

.hero__headline-line--invert { color: var(--color-text-invert); }
.hero__headline-line--accent { color: var(--color-primary); }

.hero__subhead {
  font-size: 1.1rem;
  color: var(--color-cyan-light);
  margin-bottom: var(--space-md);
}

/* Last subhead paragraph gets the bigger gap before the CTA button */
.hero__subhead:last-of-type {
  margin-bottom: var(--space-lg);
}

/* ============================================================
   [INTRO TEXT] — explanatory copy below the hero photo band
   ============================================================ */
/* .intro-copy is nested INSIDE its own .container (not combined on the
   same element) — that .container already lines up with the header/hero
   by construction (same class, same math). .intro-copy then just caps the
   reading width at 720px, flush-left within that already-positioned box,
   instead of re-centering itself narrower (which would shift its left
   edge inward, out of alignment with the header/hero). */
.intro-copy {
  max-width: 720px;
  margin: 0;
}

.intro-copy p {
  font-size: 1.05rem;
}

.intro-copy__lead {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-deepest);
}

.intro-copy__cta {
  text-align: left;
  margin-top: var(--space-lg);
}

/* ============================================================
   [BUTTONS] — CTA (gold) + quiz Ja/Nein (turquoise) + states
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 1rem;
  min-height: 52px;
  padding: 0.9rem 2rem;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.btn:active { transform: translateY(1px); }

.btn:focus-visible {
  outline: 3px solid var(--color-gold-dark);
  outline-offset: 2px;
}

.btn--gold {
  background: var(--color-gold);
  color: var(--color-petrol);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 20px rgba(207, 159, 81, 0.35);
}
.btn--gold:hover { background: var(--color-gold-dark); }

.btn--block {
  display: block;
  width: 100%;
}

/* ============================================================
   [QUIZ] — questionnaire card, progress text, Ja/Nein buttons
   ============================================================ */
.quiz {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  max-width: 640px;
  margin: 0 auto;
}

.quiz__progress {
  margin-bottom: var(--space-sm);
}

.quiz__question {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--color-deepest);
  margin-bottom: var(--space-lg);
}

.quiz__answers {
  display: flex;
  gap: var(--space-sm);
}

/* [BUTTONS] Ja/Nein specific sizing — override here without touching .btn */
.quiz__answers .btn {
  flex: 1;
  padding: 1.1rem 1rem;
  font-size: 1.05rem;
}

.btn--ja {
  background: var(--color-primary);
  color: var(--color-white);
}
.btn--ja:hover { background: var(--color-primary-dark); }

.btn--nein {
  background: var(--color-white);
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
}
.btn--nein:hover { background: var(--color-wash); }

/* ============================================================
   [BAROMETER] — result gradient bar, marker, labels
   Keep the green→yellow→red gradient and marker positioning logic
   (js/quiz.js) unchanged — this block is presentation only.
   ============================================================ */
.result {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.barometer {
  position: relative;
  height: 28px;
  border-radius: var(--radius-pill);
  margin: var(--space-lg) 0 var(--space-sm);
  background: linear-gradient(90deg, var(--baro-green) 0%, var(--baro-yellow) 50%, var(--baro-red) 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15), 0 6px 16px rgba(5, 66, 72, 0.15);
}

.barometer__marker {
  position: absolute;
  top: 50%;
  left: 0%; /* set via inline style / JS: (yesCount / 10) * 100% */
  width: 22px;
  height: 22px;
  margin-left: -11px;
  transform: translateY(-50%);
  background: var(--color-white);
  border: 4px solid var(--color-deepest);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  transition: left 0.6s ease;
}

.barometer__labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--color-deepest);
  font-weight: 600;
  gap: var(--space-sm);
}

.barometer__labels span:first-child { text-align: left; }
.barometer__labels span:last-child { text-align: right; max-width: 45%; }

.result__cta {
  margin-top: var(--space-lg);
}

/* ============================================================
   [CONSULTANT] photo + intro text — same max-width (640px) and
   centering as .booking below, so their left edges line up by
   construction rather than by eyeballed offsets.
   ============================================================ */
.consultant {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-md);
  max-width: 640px;
  margin: var(--space-md) auto 0;
  text-align: left;
}

.consultant__media {
  display: contents;
}

.consultant__photo {
  width: 220px;
  height: 275px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-photo-border);
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
}

.consultant__text {
  flex: 1 1 240px;
  margin: 0;
}

/* ============================================================
   [BOOKING FORM] — layout, form fields, positions
   ============================================================ */
.booking {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  max-width: 640px;
  margin: var(--space-lg) auto 0;
  text-align: left;
}

.form-field {
  margin-bottom: var(--space-md);
}

.form-field label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--color-deepest);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-base);
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 207, 225, 0.35);
}

.form-field--checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.form-field--checkbox input {
  margin-top: 0.3rem;
}

.form-field--checkbox label {
  font-weight: 400;
}

.form-field--checkbox a {
  color: var(--color-primary-dark);
}

.form-error {
  color: var(--color-error);
  font-size: 0.9rem;
  margin-top: 0.35rem;
  display: none;
}

.form-error.is-visible { display: block; }

.form-field.has-error input,
.form-field.has-error select {
  border-color: var(--color-error);
}

.booking__confirmation {
  text-align: center;
  font-size: 1.15rem;
  color: var(--color-deepest);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  max-width: 640px;
  margin: var(--space-lg) auto 0;
  padding: var(--space-lg);
}

.booking__submit-error {
  color: var(--color-error);
  margin-top: var(--space-sm);
  display: none;
}
.booking__submit-error.is-visible { display: block; }

/* ============================================================
   [FOOTER] — footer links, legal, colors
   ============================================================ */
.site-footer {
  background: var(--color-petrol);
  color: var(--color-text-invert);
  padding: var(--space-lg) 0;
  text-align: center;
  font-size: 0.9rem;
}

.site-footer a {
  color: var(--color-primary);
  margin: 0 0.5rem;
}

.site-footer__copyright {
  color: var(--color-muted);
  font-size: 0.8rem;
  margin-top: var(--space-sm);
}

/* ============================================================
   [LISTS] — round turquoise bullet markers wherever <ul> appears
   (the legal pages' bullet lists, the intro-copy explainer lists)
   ============================================================ */
.legal-page ul,
.intro-copy ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-md);
}

.legal-page li,
.intro-copy li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.5em;
}

.legal-page li::before,
.intro-copy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* ============================================================
   [LEGAL PAGES] — datenschutz.html / impressum.html content
   ============================================================ */
/* .legal-page is nested INSIDE its own .container (same pattern as
   .intro-copy) — that .container already lines up with the header by
   construction. .legal-page just caps the reading width, flush-left
   within it, with only vertical padding of its own; horizontal spacing
   comes solely from .container's padding-inline gutter. */
.legal-page {
  max-width: 800px;
  margin: 0;
  padding-block: var(--space-xl);
}

.legal-page h2, .legal-page h3 { margin-top: var(--space-lg); }

.legal-page table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-sm) 0 var(--space-lg);
}

.legal-page table td, .legal-page table th {
  border: 1px solid var(--color-border);
  padding: 0.6rem;
  text-align: left;
  vertical-align: top;
}

/* ============================================================
   [RESPONSIVE] — small-screen adjustments
   ============================================================ */
@media (max-width: 600px) {
  .hero { min-height: 520px; }
  .quiz, .booking { padding: var(--space-md); }
  .quiz__answers { flex-direction: column; }
  .site-header .container { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}