/* =========================================================
   Kundenvorlage — Fundament
   Design-System. Wird pro Kunde nur über die Variablen unten
   angepasst, nicht durch Umbauten weiter unten im Code.
   ========================================================= */

:root{
  /* ►►► DIE SECHS STELLSCHRAUBEN PRO KUNDE ►►►
     Nur hier drehen. Der Rest der Datei bleibt, wie er ist. */
  --brand:      #789C3A;   /* Grün aus dem Kundenlogo        */
  --brand-deep: #1C4A55;   /* dunkle Variante, Text & Buttons */
  --accent:     #D3E0DE;   /* zweiter Ton, Flächen & Linien   */
  --ink:        #13222B;   /* Textfarbe                       */
  --paper:      #FAFBFA;   /* Hintergrund                     */
  --display:    "Manrope", "Inter", sans-serif;  /* hat Griechisch */
  /* ◄◄◄ ab hier nichts mehr ändern ◄◄◄ */

  --white:     #FFFFFF;
  --ink-mid:   color-mix(in srgb, var(--ink) 72%, var(--paper));
  --ink-soft:  color-mix(in srgb, var(--ink) 52%, var(--paper));
  --ink-faint: color-mix(in srgb, var(--ink) 34%, var(--paper));
  --tint:      color-mix(in srgb, var(--accent) 34%, var(--paper));
  --brand-tint:color-mix(in srgb, var(--brand) 18%, var(--paper));
  --line:      color-mix(in srgb, var(--ink) 12%, transparent);
  --line-soft: color-mix(in srgb, var(--ink) 7%, transparent);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --shell: 1180px;
  --gut: 24px;
  --sect: clamp(72px, 10vw, 140px);
  --r: 18px;
  --r-lg: 28px;
  --shadow: 0 2px 6px rgba(0,0,0,.04), 0 24px 60px -30px rgba(0,0,0,.28);
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }   /* muss bleiben, sonst schluckt das
                                          Menü unsichtbar alle Klicks */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  letter-spacing:-.005em; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--brand-deep); outline-offset:3px; border-radius:4px; }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; border-radius:999px; font-size:14px;
  transition:top .3s var(--ease);
}
.skip-link:focus{ top:16px; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sect); }
.section-tint{ background:var(--tint); }

.eyebrow{
  font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-deep); margin-bottom:18px;
}
.h1{
  font-size:clamp(2.2rem,5.2vw,4rem); line-height:1.03;
  letter-spacing:-.04em; font-weight:400; text-wrap:balance;
}
.h2{
  font-size:clamp(1.7rem,3.6vw,2.9rem); line-height:1.08;
  letter-spacing:-.035em; font-weight:400; text-wrap:balance;
}
.lead{
  margin-top:18px; color:var(--ink-mid);
  font-size:clamp(1rem,1.3vw,1.13rem); line-height:1.68;
  max-width:58ch; text-wrap:pretty;
}
.head{ max-width:720px; margin-bottom:clamp(38px,5vw,64px); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 28px; border-radius:999px; border:1px solid transparent;
  font-size:15px; font-weight:500; cursor:pointer; white-space:nowrap;
  transition:transform .35s var(--ease), background-color .3s var(--ease),
             color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ background:var(--brand-deep); }
.btn-ghost{ border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ background:var(--white); }
.btn-glass{
  background:color-mix(in srgb, var(--white) 22%, transparent);
  color:var(--white); border-color:color-mix(in srgb, var(--white) 45%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.btn-glass:hover{ background:color-mix(in srgb, var(--white) 34%, transparent); }
.btn-sm{ padding:11px 20px; font-size:14px; }

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-reveal-delay="1"]{ transition-delay:.08s }
.reveal[data-reveal-delay="2"]{ transition-delay:.16s }
.reveal[data-reveal-delay="3"]{ transition-delay:.24s }
.reveal[data-reveal-delay="4"]{ transition-delay:.32s }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}