/* ============================================================
   Vitalja Berlin LLC (037-Web-01) — „Petrol & Sand"
   Schibsted Grotesk (Display) + Public Sans (Body), self-hosted
   Kontrast-Regeln (WCAG): Accent #6FB98F NIE als Text auf Hell (2.1:1)
   → auf Hell immer --accent-ink (= Primary #1E7A73, 4.64:1).
   Primary #1E7A73 NIE als Text auf Petrol (2.3:1) → dort Accent.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --bg:#F6F3EC;
  --surface:#FFFFFF;
  --surface-soft:#EFEBE1;
  --heading:#123E3C;
  --body:#243B39;
  --muted:#4A5F5C;
  --primary:#1E7A73;        /* Teal — Buttons, Links auf Hell */
  --primary-deep:#17615B;
  --accent:#6FB98F;         /* Frisches Grün — nur auf Dunkel / dekorativ */
  --accent-strong:#5AA87C;
  --accent-ink:#1E7A73;     /* Akzent-TEXT auf hell (AA-fest) */
  --line:#E4DFD3;
  --dark:#123E3C;           /* Petrol — dunkle Sektionen */
  --dark-soft:#17504D;
  --on-dark:#F6F3EC;
  --on-dark-muted:#B9CFC8;

  --font-display:'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body:'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ease:cubic-bezier(0.4, 0, 0.2, 1);
  --container:1140px;
  --radius:18px;
  --radius-sm:12px;

  /* Aliase, die die Legal-Seiten erwarten */
  --color-bg:var(--bg); --color-surface:var(--surface); --color-border:var(--line);
  --color-ink:var(--dark); --color-heading:var(--heading); --color-text:var(--body);
  --color-text-muted:var(--muted); --color-primary:var(--primary); --color-primary-dark:var(--primary-deep);
  --color-on-dark-muted:var(--on-dark-muted);
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:80px; }
body{
  font-family:var(--font-body);
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height:1.65;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3{ font-family:var(--font-display); color:var(--heading); font-weight:700; line-height:1.1; letter-spacing:-0.015em; }
h1{ font-size:clamp(2.5rem, 1.6rem + 3.9vw, 4.4rem); }
h2{ font-size:clamp(1.95rem, 1.4rem + 2.3vw, 3rem); margin-bottom:1.1rem; }
h3{ font-size:clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem); font-weight:500; letter-spacing:-0.005em; }
p{ max-width:65ch; }
a{ color:var(--primary); text-decoration:none; }
img,svg{ display:block; max-width:100%; height:auto; }
strong{ color:var(--heading); font-weight:600; }

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem, 5vw, 2.5rem); }
.section{ padding-block:clamp(4rem, 8vw, 7rem); }
.section--soft{ background:var(--surface-soft); }
/* Blattader — eigener Marken-Effekt (Mittelrippe aus dem Logo). Sitzt UNTER der
   Überschrift, nicht unter einem Eyebrow-Label (Anti-Slop §5.1: Eyebrow = Bann).
   Standard sichtbar; nur solange ein Reveal aussteht, ist sie eingefahren. */
.section__head h2::after,
.reveal > h2::after,
.hero h1::after{ content:""; display:block; width:56px; height:2px; margin-top:1rem; background:var(--accent-ink); border-radius:2px; transform-origin:left center; transform:scaleX(1); transition:transform .8s var(--ease) .15s; }
.js .reveal:not(.is-visible) h2::after,
.js h1.reveal:not(.is-visible)::after{ transform:scaleX(0); }
.section__head{ max-width:62ch; margin-bottom:clamp(2rem, 4vw, 3rem); }
.section__head p{ margin-top:1rem; color:var(--body); font-size:1.1rem; }
.section__foot{ margin-top:clamp(1.6rem,3vw,2.4rem); font-size:.9rem; color:var(--muted); max-width:70ch; }

/* ---------- Skip link ---------- */
.skip-link{ position:absolute; left:1rem; top:-3.5rem; z-index:200; background:var(--primary); color:#fff; padding:.7rem 1.1rem; border-radius:8px; transition:top .2s var(--ease); }
.skip-link:focus{ top:1rem; }

/* ---------- Focus ---------- */
:focus-visible{ outline:3px solid var(--primary); outline-offset:3px; border-radius:4px; }
.hero :focus-visible, .band :focus-visible, .contact :focus-visible, .site-footer :focus-visible{ outline-color:var(--accent); }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-body); font-weight:600; font-size:1rem; letter-spacing:.01em; line-height:1; padding:.98rem 1.75rem; border-radius:999px; border:1.5px solid transparent; cursor:pointer; transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.btn--primary{ background:var(--primary); color:#fff; }
.btn--primary:hover{ background:var(--primary-deep); transform:translateY(-2px); box-shadow:0 12px 26px rgba(18,62,60,.25); }
.btn--accent{ background:var(--accent); color:var(--dark); }
.btn--accent:hover{ background:var(--primary); color:#fff; transform:translateY(-2px); box-shadow:0 14px 30px rgba(30,122,115,.32); } /* AA: #fff auf #1E7A73 = 5.14:1 (vorher --accent-strong mit dunklem Text = 4.12:1) */
.btn--hero-ghost{ background:rgba(246,243,236,.08); color:#fff; border-color:rgba(246,243,236,.6); }
.btn--hero-ghost:hover{ background:#fff; color:var(--dark); border-color:#fff; transform:translateY(-2px); }

/* ---------- Header / Nav ---------- */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(246,243,236,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.site-header.is-scrolled{ border-bottom-color:var(--line); box-shadow:0 4px 20px rgba(18,62,60,.06); }
.site-header.site-header--hero:not(.is-scrolled){ background-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
.site-header--hero:not(.is-scrolled) .nav__links a{ color:#fff; }
.site-header--hero:not(.is-scrolled) .nav__toggle{ color:#fff; }
.nav__logo-light{ display:none; }
.site-header--hero:not(.is-scrolled) .nav__logo-dark{ display:none; }
.site-header--hero:not(.is-scrolled) .nav__logo-light{ display:block; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.85rem; }
.nav__logo{ display:flex; align-items:center; }
.nav__logo img{ height:42px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:2rem; list-style:none; }
.nav__links a{ color:var(--heading); font-family:var(--font-body); font-weight:500; font-size:.98rem; position:relative; padding-block:.25rem; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--accent); border-radius:2px; transition:width .3s var(--ease); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:inline-flex; }
.nav__toggle{ display:none; background:none; border:none; cursor:pointer; padding:.5rem; color:var(--heading); }
.nav__toggle svg{ width:26px; height:26px; }

@media (max-width:880px){
  .nav__toggle{ display:inline-flex; }
  .nav__links, .nav__cta--desktop{ display:none; }
  .nav__menu{ position:fixed; inset:0 0 0 auto; width:min(82vw,330px); background:var(--surface); box-shadow:-10px 0 40px rgba(18,62,60,.18); transform:translateX(100%); transition:transform .35s var(--ease); display:flex; flex-direction:column; gap:1.5rem; padding:5rem 2rem 2rem; z-index:120; }
  .nav__menu.is-open{ transform:translateX(0); }
  .nav__menu .nav__links{ display:flex; flex-direction:column; align-items:flex-start; gap:1.4rem; }
  .nav__menu .nav__links a{ color:var(--heading); font-size:1.15rem; }
  .nav__menu .nav__cta{ display:inline-flex; }
  .nav__backdrop{ position:fixed; inset:0; background:rgba(18,62,60,.5); opacity:0; visibility:hidden; transition:opacity .3s var(--ease); z-index:110; }
  .nav__backdrop.is-open{ opacity:1; visibility:visible; }
  .nav__close{ position:absolute; top:1.2rem; right:1.2rem; background:none; border:none; cursor:pointer; color:var(--heading); padding:.4rem; }
  .nav__close svg{ width:26px; height:26px; }
}

/* ---------- Hero (Full-Bleed) ---------- */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:var(--dark); }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 60%; }
.hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 15% 20%, rgba(111,185,143,.18) 0%, rgba(111,185,143,0) 55%),
    linear-gradient(115deg, rgba(14,48,46,.88) 0%, rgba(14,48,46,.66) 48%, rgba(14,48,46,.38) 100%); }
/* ruhig atmender Grün-Schein — ambient, nicht produktbezogen */
.hero__glow{ position:absolute; z-index:1; top:-12%; left:-8%; width:60vw; max-width:760px; aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(111,185,143,.32) 0%, rgba(111,185,143,0) 68%);
  filter:blur(10px); animation:breathe 12s var(--ease) infinite; }
@keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.6; } 50%{ transform:scale(1.1); opacity:.9; } }
.hero__inner{ position:relative; z-index:2; width:100%; }
.hero__content{ max-width:720px; color:#fff; padding-block:clamp(7rem, 15vh, 10rem); }
.hero h1::after{ background:var(--accent); }
.hero h1{ color:#fff; margin-bottom:1.4rem; }
.hero h1 .accent{ color:var(--accent); }
.hero__lead{ font-size:clamp(1.1rem,1rem+0.55vw,1.35rem); color:rgba(246,243,236,.9); margin:0 0 2.2rem; max-width:54ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }
.hero__note{ margin-top:1.9rem; font-size:.95rem; color:rgba(246,243,236,.82); display:flex; align-items:center; gap:.6rem; }
.hero__note svg{ width:22px; height:22px; flex-shrink:0; color:var(--accent); }
@media (max-width:600px){ .hero__content{ padding-block:clamp(6rem,18vh,8.5rem); } }

/* ---------- Ansatz (Vision) ---------- */
.vision__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.vision__points{ list-style:none; display:grid; gap:1.1rem; margin-top:1.6rem; }
.vision__points li{ display:flex; gap:.85rem; align-items:flex-start; }
.vision__points svg{ width:24px; height:24px; flex-shrink:0; margin-top:.15rem; color:var(--accent-ink); }
.vision__card{ position:relative; background:var(--dark); color:#fff; border-radius:var(--radius); padding:clamp(1.9rem,4vw,2.8rem); overflow:hidden; }
.vision__card::after{ content:""; position:absolute; right:-40px; top:-40px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, rgba(111,185,143,.42), transparent 70%); }
.vision__card p{ color:rgba(246,243,236,.85); position:relative; }
.vision__card .quote{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.35rem,1.1rem+1vw,1.75rem); line-height:1.3; color:#fff; letter-spacing:-0.01em; }
.vision__card-text{ margin-top:1.2rem; }
@media (max-width:780px){ .vision__grid{ grid-template-columns:1fr; } }

/* ---------- Beratungsfelder (cards) ---------- */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.6rem,3vw,2rem); overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.card::before{ content:""; position:absolute; left:0; top:0; height:3px; width:0; background:linear-gradient(90deg, var(--primary), var(--accent)); transition:width .45s var(--ease); }
.card:hover{ transform:translateY(-5px); box-shadow:0 24px 46px rgba(18,62,60,.13); border-color:transparent; }
.card:hover::before{ width:100%; }
/* Icon ohne eigene Kachel — frei im Fluss (Anti-Slop §5.1: keine Icon-Kachel über der Überschrift) */
.card__icon{ width:30px; height:30px; margin-bottom:1rem; color:var(--accent-ink); transition:color .3s var(--ease); }
.card:hover .card__icon{ color:var(--primary-deep); }
.card__icon svg{ width:100%; height:100%; }
.card h3{ margin-bottom:.6rem; font-size:1.2rem; }
.card p{ color:var(--body); font-size:.98rem; }
.card__tag{ display:inline-block; margin-top:1.1rem; font-size:.82rem; font-weight:600; letter-spacing:.03em; color:var(--accent-ink); }
@media (max-width:1024px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cards{ grid-template-columns:1fr; } }

/* ---------- Für wen (dunkle Bild-Sektion, Muster: Foto als Atmosphäre) ---------- */
.audience-section{ position:relative; isolation:isolate; color:var(--on-dark); background:var(--dark); overflow:hidden; min-height:clamp(520px, 70vh, 760px); display:flex; align-items:center; }
.audience-section__media{ position:absolute; inset:0; z-index:-2; }
.audience-section__media img{ width:100%; height:100%; object-fit:cover; object-position:72% center; }
/* links dunkel (Text/Karten), rechts bleibt das Bild sichtbar — wie im Hero */
.audience-section__scrim{ position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(14,48,46,.96) 0%, rgba(14,48,46,.92) 42%, rgba(14,48,46,.62) 68%, rgba(14,48,46,.28) 100%),
    linear-gradient(180deg, rgba(14,48,46,.35) 0%, rgba(14,48,46,0) 30% 70%, rgba(14,48,46,.35) 100%); }
.audience-section__content{ max-width:620px; }
.audience-section .section__head{ margin-bottom:1.8rem; }
.audience-section h2::after{ background:var(--accent); }
.audience-section h2{ color:#fff; }
.audience{ display:grid; grid-template-columns:1fr; gap:.9rem; }
.audience__item{ position:relative; display:block; padding:1.15rem 1.35rem; border-radius:var(--radius);
  background:rgba(18,62,60,.9); border:1px solid rgba(246,243,236,.1);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); }
.audience__item:hover{ border-color:rgba(111,185,143,.55); background:rgba(23,80,77,.94); transform:translateX(4px); }
.audience__item h3{ font-size:1.08rem; color:#fff; margin-bottom:.2rem; }
.audience__item p{ font-size:.95rem; color:var(--on-dark-muted); }
@media (max-width:780px){
  .audience-section{ min-height:0; }
  .audience-section__media img{ object-position:60% center; }
  .audience-section__scrim{ background:linear-gradient(180deg, rgba(14,48,46,.55) 0%, rgba(14,48,46,.9) 35%, rgba(14,48,46,.96) 100%); }
  .audience-section__content{ max-width:none; }
}

/* ---------- Zitat-Band ---------- */
.band{ position:relative; text-align:center; color:#fff; padding-block:clamp(5rem, 12vw, 9rem); overflow:hidden; background:var(--dark); }
.band::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 90% at 12% 110%, rgba(111,185,143,.28) 0%, rgba(111,185,143,0) 60%),
    radial-gradient(ellipse 60% 80% at 92% -10%, rgba(30,122,115,.55) 0%, rgba(30,122,115,0) 60%); }
.band .container{ position:relative; }
.band__quote{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.7rem, 1.2rem + 2.4vw, 3rem); line-height:1.22; letter-spacing:-0.015em; max-width:22ch; margin-inline:auto; }
.band__quote .accent{ color:var(--accent); }
.band__sub{ margin-top:1.2rem; color:var(--on-dark-muted); font-size:1.08rem; max-width:50ch; margin-inline:auto; }

/* ---------- Ablauf (steps) ---------- */
.steps{ --steps-gap:clamp(1.5rem,4vw,2.5rem); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--steps-gap); }
.step{ position:relative; }
.step:not(:last-child)::after{ content:""; position:absolute; top:24px; left:60px; width:calc(100% - 35px + var(--steps-gap)); height:2px; background:linear-gradient(90deg, rgba(30,122,115,.55), rgba(30,122,115,.15)); z-index:0; }
.step__num{ position:relative; z-index:1; width:50px; height:50px; border-radius:50%; background:var(--primary); color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.35rem; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; box-shadow:0 6px 18px rgba(30,122,115,.3); }
.step h3{ margin-bottom:.5rem; }
.step p{ font-size:1rem; }
@media (max-width:780px){ .steps{ grid-template-columns:1fr; } .step:not(:last-child)::after{ display:none; } }

/* ---------- Kontakt (dunkel, Glass-Formular) ---------- */
.contact{ position:relative; isolation:isolate; color:#fff; background:var(--dark); overflow:hidden; }
/* Foto nur als leise Tiefe (86–92 % Petrol), konkurriert nicht mit dem Formular */
.contact__media{ position:absolute; inset:0; z-index:-2; }
.contact__media img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.contact::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, rgba(111,185,143,.22) 0%, rgba(111,185,143,0) 60%),
    linear-gradient(180deg, rgba(14,48,46,.92) 0%, rgba(14,48,46,.88) 50%, rgba(14,48,46,.94) 100%); }
.contact .container{ position:relative; }
.contact h2::after{ background:var(--accent); }
.contact h2{ color:#fff; }
.contact__grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.contact__lead{ color:rgba(246,243,236,.85); font-size:1.1rem; margin-top:1rem; }
.contact__meta{ list-style:none; margin-top:2rem; display:grid; gap:1rem; }
.contact__meta li{ display:flex; gap:.8rem; align-items:flex-start; color:rgba(246,243,236,.9); }
.contact__meta svg{ width:22px; height:22px; color:var(--accent); flex-shrink:0; margin-top:.2rem; }
.contact__meta a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.form{ background:rgba(18,62,60,.9); border:1px solid rgba(246,243,236,.1); border-radius:var(--radius); padding:clamp(1.6rem,4vw,2.4rem); display:grid; gap:1.2rem; }
.field{ display:grid; gap:.45rem; }
.field label{ font-size:.92rem; font-weight:600; color:rgba(246,243,236,.9); }
.field input, .field textarea{ font-family:var(--font-body); font-size:1rem; color:#fff; background:rgba(246,243,236,.06); border:1.5px solid rgba(246,243,236,.18); border-radius:10px; padding:.8rem .9rem; transition:border-color .2s var(--ease), background .2s var(--ease); }
.field input::placeholder, .field textarea::placeholder{ color:rgba(246,243,236,.45); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); background:rgba(246,243,236,.1); }
.field textarea{ min-height:130px; resize:vertical; }
.form__submit{ justify-self:start; }
.form__note{ font-size:.82rem; color:rgba(246,243,236,.6); }
.form__note a{ color:rgba(246,243,236,.85); text-decoration:underline; }
.form__status{ font-size:.95rem; font-weight:500; padding:.5rem 0; min-height:1.4em; }
.form__status.is-ok{ color:var(--accent); }
.form__status.is-err{ color:#F4B9A5; }
@media (max-width:780px){ .contact__grid{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
.site-footer{ background:#0E302E; color:rgba(246,243,236,.7); padding-block:clamp(2.5rem,5vw,3.5rem); }
.site-footer__inner{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.5rem; }
.site-footer__logo img{ height:40px; }
.site-footer__links{ display:flex; flex-wrap:wrap; gap:1.5rem; list-style:none; }
.site-footer__links a{ color:rgba(246,243,236,.78); font-size:.95rem; }
.site-footer__links a:hover{ color:#fff; }
.site-footer__legal{ margin-top:1.8rem; padding-top:1.5rem; border-top:1px solid rgba(246,243,236,.12); font-size:.85rem; line-height:1.6; color:rgba(246,243,236,.62); max-width:70ch; }
.site-footer__copy{ margin-top:1.2rem; font-size:.85rem; color:rgba(246,243,236,.6); } /* .5 = 4.35:1, .6 = 5.6:1 (Lighthouse 07.10.) */

/* ---------- Reveal („Setzen": kurz, zuegig) ---------- */
/* Nur mit JS verstecken — bricht das Skript ab, bleibt der Inhalt sichtbar */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }

/* ---------- Reduced motion (Pflicht) ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .js .reveal{ opacity:1; transform:none; }
  h1::after, h2::after{ transform:scaleX(1); }
  .hero__glow{ display:none; }
}