@import url("fonts.css");

/* ==========================================================================
   Arbeitssicherheit Kopiec
   Designsystem v5

   Schrift   IBM Plex Sans, eine Familie, Gewichte 400/500/600/700
             Kraeftigere Striche und groessere x-Hoehe als eine Groteske im
             Franklin-Stil, dadurch spuerbar hoeherer Kontrast auf Weiss.

   Farbe     Logo-Blau  #00a3e8  Flaechen, Ziffern, Marker, Fokus, Label auf Dunkel
             Logo-Gruen #23b14c  Freigabe und Risikoumkehr (kostenlos, unverbindlich)
             Aktionsblau #0079ad  Buttons und Textlinks. Reines Logo-Blau erreicht
                                  auf Weiss nur 2,8:1 und kann keinen Text tragen.
             Petrol     #07202c  dunkle Flaechen, aus dem Logo-Blau abgeleitet

   Prinzip   Viel Weissraum, jede Karte traegt ein Bild, kurze Texte
   ========================================================================== */

:root{
  color-scheme:light;

  /* Logofarben */
  --logo-blau:#00a3e8;
  --logo-gruen:#23b14c;

  --ink:#08131a;
  --text:#2e4049;
  --text-2:#5d6f7a;
  --line:#d3e0e9;
  --line-2:#e7f1f8;
  --surface:#fff;
  --surface-2:#e8f3fb;

  /* Blau: Logoton fuer Flaechen, vertiefter Ton fuer Text und Buttons (AA) */
  --brand:#0079ad;
  --brand-hell:#00a3e8;
  --brand-tief:#005c86;
  --brand-soft:#e2f4fd;

  /* Gruen: Freigabe, Risikoumkehr, Bestaetigung */
  --green:#14803a;
  --green-hell:#23b14c;
  --green-soft:#e8f7ed;

  --alert:#a33227;
  --alert-100:#fbefed;

  --dark:#07202c;
  --on-dark:#dbe8f0;
  --on-dark-2:#a8bdc9;

  /* Typoskala, bewusst flacher als ueblich */
  --fs-display:clamp(2.1rem,1.5rem + 2.1vw,3.25rem);
  --fs-h2:clamp(1.55rem,1.25rem + 1.1vw,2.15rem);
  --fs-h3:clamp(1.14rem,1.08rem + .24vw,1.3rem);
  --fs-lg:clamp(1.05rem,1rem + .26vw,1.19rem);
  --fs-base:1.0625rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;
  --fs-label:.78rem;

  --font:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --gap:clamp(20px,2vw,28px);
  --pad:24px;
  --max:1180px;

  --r-sm:8px; --r:14px; --r-lg:20px; --r-pill:999px;
  --e1:0 1px 2px rgba(11,23,32,.04), 0 4px 14px rgba(11,23,32,.05);
  --e2:0 1px 2px rgba(11,23,32,.05), 0 14px 34px rgba(11,23,32,.08);
  --e3:0 2px 6px rgba(11,23,32,.06), 0 30px 64px rgba(11,23,32,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--surface);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-base);font-weight:400;line-height:1.68;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;display:block}
img,video{height:auto}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0;text-wrap:pretty}
a{color:var(--brand)}
b,strong{font-weight:600}

h1,h2,h3,h4{margin:0;font-weight:700;color:var(--ink);text-wrap:balance}
h1,.display{font-size:var(--fs-display);line-height:1.12;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);line-height:1.2;letter-spacing:-.016em}
h3{font-size:var(--fs-h3);line-height:1.35;letter-spacing:-.01em}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(64px,7.6vw,120px)}
.sec--tight{padding-block:clamp(44px,5vw,72px)}
.sec--2{background:var(--surface-2)}
.sec--dark{background:var(--dark);color:var(--on-dark)}
.sec--dark h2,.sec--dark h3{color:#fff}
/* Logo-Blau als Flaeche. Traegt nur dunkle Schrift, weiss waere 2,8:1. */
.sec--blau{background:var(--logo-blau);color:#fff}
.sec--blau h2,.sec--blau h3{color:#fff}
.sec--blau .label{color:#fff}
.sec--blau .label::before{background:#fff}
.sec--blau .lead{color:rgba(255,255,255,.88)}
[id]{scroll-margin-top:104px}

.label{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-label);
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand);margin-bottom:var(--s4)}
.label::before{content:"";flex:none;width:20px;height:3px;background:var(--logo-blau)}
.sec--dark .label{color:var(--logo-blau)}
.lead{font-size:var(--fs-lg);line-height:1.62;color:var(--text);max-width:54ch}
.sec--dark .lead{color:var(--on-dark-2)}
.prose{color:var(--text);max-width:60ch}
.prose p+p{margin-top:1em}
.sec--dark .prose{color:var(--on-dark-2)}
.head{max-width:640px;margin-bottom:clamp(36px,4.2vw,60px)}
.head .lead{margin-top:var(--s4)}

/* ---------- Icons ---------- */
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-size:1rem;font-weight:600;line-height:1.2;letter-spacing:-.004em;
  padding:15px 26px;border-radius:var(--r-sm);text-decoration:none;cursor:pointer;
  border:1.5px solid var(--logo-blau);background:var(--logo-blau);color:#fff;
  transition:background .18s,border-color .18s,color .18s;
}
.btn:hover{background:#0095d6;border-color:#0095d6;color:#fff}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--surface);color:var(--ink);border-color:var(--logo-blau)}
.btn--weiss{background:#fff;border-color:#fff;color:var(--dark)}
.btn--weiss:hover{background:#e6f4fd;border-color:#e6f4fd;color:var(--dark)}
.btn--glass{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.4)}
.btn--glass:hover{background:rgba(255,255,255,.18);border-color:#fff;color:#fff}
.btn--block{width:100%}

.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;
  font-size:var(--fs-sm);color:var(--brand);text-decoration:none}
.tlink .ico{width:16px;height:16px;transition:transform .18s}
.tlink:hover .ico{transform:translateX(3px)}

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:3px solid var(--logo-blau);outline-offset:3px;border-radius:6px}
/* Auf dem blauen Button waere ein blauer Ring unsichtbar */
.btn:focus-visible{outline-color:var(--dark);outline-offset:2px;
  box-shadow:0 0 0 5px rgba(255,255,255,.6)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--dark);color:#fff;
  padding:12px 20px;border-radius:var(--r-sm)}

/* ---------- Kopfzeile ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;
  border-bottom:1px solid transparent;transition:background .3s,box-shadow .3s,border-color .3s}
.hdr__in{max-width:var(--max);margin-inline:auto;padding:12px var(--pad);
  display:flex;align-items:center;gap:22px;min-height:80px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}
.brand__logo{position:relative;flex:none;display:block;height:46px}
.brand__logo img{height:46px;width:auto;display:block;transition:opacity .3s}
/* ueber dem Hero: helles Schild. Nach dem Scrollen: dunkles Schild. */
.brand__logo--auf-hell{position:absolute;inset:0;opacity:0}
.hdr[data-solid="true"] .brand__logo--auf-dunkel{opacity:0}
.hdr[data-solid="true"] .brand__logo--auf-hell{opacity:1}
.brand b{font-weight:700;font-size:1.02rem;letter-spacing:-.012em;color:#fff;
  line-height:1.25;transition:color .3s}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{font-size:var(--fs-sm);font-weight:500;color:rgba(255,255,255,.9);
  text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:color .3s}
.nav a:hover{color:#fff;border-bottom-color:currentColor}
.hdr__cta{flex:none}
.burger{display:none;margin-left:auto;flex:none;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.34);border-radius:var(--r-sm);padding:11px 15px;
  font-size:var(--fs-sm);font-weight:600;color:#fff;cursor:pointer}

.hdr[data-solid="true"]{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-bottom-color:var(--line)}
.hdr[data-solid="true"] .brand b{color:var(--ink)}
.hdr[data-solid="true"] .nav a{color:var(--ink)}
.hdr[data-solid="true"] .nav a:hover{color:var(--brand)}
.hdr[data-solid="true"] .burger{background:var(--surface);border-color:var(--line);color:var(--ink)}

@media (max-width:1060px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);
    border-bottom:1px solid var(--line);box-shadow:var(--e2);
    flex-direction:column;gap:0;padding:var(--s2) var(--pad) var(--s5)}
  .nav[data-open="true"]{display:flex}
  .nav a,.hdr[data-solid="true"] .nav a{color:var(--ink);padding:14px 0;
    border-bottom:1px solid var(--line-2)}
  .burger{display:block}
  .hdr__cta{display:none}
}
@media (max-width:620px){
  .hdr__in{gap:12px;min-height:68px;padding-block:10px}
  .brand__logo,.brand__logo img{height:38px}
  .brand b{font-size:.98rem}
  .burger{padding:10px 13px}
}

/* ---------- Hero ---------- */
.hero{position:relative;display:flex;align-items:center;
  min-height:min(82vh,780px);padding:140px 0 clamp(72px,9vh,110px);
  overflow:hidden;background:var(--dark)}
.hero__media{position:absolute;inset:0}
.hero__media picture,.hero__media img{width:100%;height:100%}
.hero__media img{object-fit:cover;object-position:center 42%}
.hero__veil{position:absolute;inset:0;background:rgba(9,19,27,.87)}
.hero__in{position:relative;z-index:2;width:100%;max-width:var(--max);
  margin-inline:auto;padding-inline:var(--pad)}
.hero__body{max-width:660px}
.hero .display{color:#fff;margin-bottom:var(--s5)}
.hero__sub{font-size:var(--fs-lg);line-height:1.62;color:rgba(255,255,255,.93);max-width:50ch}
.hero__act{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s7)}
@media (max-width:620px){
  .hero{min-height:auto;padding:120px 0 var(--s8)}
  .hero__veil{background:rgba(9,19,27,.9)}
}

/* ---------- Referenzen ---------- */
.refs{display:grid;gap:var(--s5) var(--s6)}
@media (min-width:520px){.refs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:840px){.refs{grid-template-columns:repeat(4,1fr)}}
.refs li{line-height:1.4}
.refs b{display:block;font-weight:700;font-size:1.04rem;letter-spacing:-.01em;color:var(--ink)}
.refs span{display:block;font-size:var(--fs-sm);color:var(--text-2);margin-top:1px}
.refs__foot{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);align-items:center;justify-content:space-between}
.refs__foot p{font-size:var(--fs-sm);color:var(--text);max-width:68ch}

/* ---------- Leistungen ---------- */
.svc{display:grid;gap:var(--gap)}
@media (min-width:640px){.svc{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.svc{grid-template-columns:repeat(3,1fr)}}
.svc__i{position:relative;background:var(--surface);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--e1);display:flex;flex-direction:column;
  transition:box-shadow .3s,transform .3s}
.svc__i::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:var(--logo-blau);opacity:0;transition:opacity .3s;z-index:1}
.svc__i:hover{box-shadow:var(--e2);transform:translateY(-3px)}
.svc__i:hover::after{opacity:1}
.svc__pic{aspect-ratio:3/2;overflow:hidden;background:var(--surface-2)}
.svc__pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.svc__i:hover .svc__pic img{transform:scale(1.035)}
.svc__b{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.svc__b h3{margin-bottom:10px}
.svc__b p{font-size:var(--fs-sm);color:var(--text);line-height:1.6}
.svc__b .tlink{margin-top:var(--s5);align-self:flex-start}

/* ---------- Kennzahlen ---------- */
.kpi{display:grid;gap:var(--gap)}
@media (min-width:560px){.kpi{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.kpi{grid-template-columns:repeat(4,1fr)}}
.kpi div{padding-top:var(--s5);border-top:2px solid rgba(255,255,255,.42)}
.kpi dt{font-weight:700;font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.1;
  letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.kpi dd{margin:var(--s3) 0 0;font-size:var(--fs-sm);color:rgba(255,255,255,.86);line-height:1.55}

/* ---------- Handlungsaufforderung im Kennzahlenband ---------- */
.band__cta{margin-top:var(--s7);padding-top:var(--s6);
  border-top:1px solid rgba(255,255,255,.38);
  display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center;justify-content:space-between}
.band__cta p{max-width:52ch;color:#fff;font-size:var(--fs-lg);line-height:1.55}
.band__cta .btn{white-space:nowrap}

/* ---------- Abschluss nach dem FAQ ---------- */
.faq__cta{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:6px 12px;
  align-items:baseline;font-size:var(--fs-sm);color:var(--text)}

/* ---------- Team ---------- */
.team{display:flex;gap:var(--s4);margin-bottom:clamp(32px,3.8vw,48px)}
.team img{width:96px;height:96px;border-radius:var(--r-pill);
  object-fit:cover;object-position:center 20%;filter:grayscale(1) contrast(1.05);
  border:2px solid rgba(255,255,255,.24)}
@media (max-width:520px){.team img{width:76px;height:76px}}

/* ---------- FAQ ---------- */
.faq{max-width:880px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-weight:600;font-size:1.06rem;letter-spacing:-.008em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--brand)}
.faq__a{padding:0 0 24px;color:var(--text);max-width:68ch;font-size:var(--fs-sm);line-height:1.68}
.faq__a p+p{margin-top:.8em}

/* ---------- Kontakt ---------- */
.cta{display:grid;gap:clamp(32px,4vw,60px);align-items:start}
@media (min-width:940px){.cta{grid-template-columns:minmax(0,.86fr) minmax(0,1fr)}}
.cta__tel{display:inline-flex;align-items:center;gap:12px;font-weight:700;
  font-size:clamp(1.6rem,2.8vw,2.15rem);letter-spacing:-.018em;color:#fff;
  text-decoration:none;margin:var(--s5) 0 2px}
.cta__tel:hover{color:var(--logo-blau)}
.cta__tel .ico{width:24px;height:24px}
.cta__meta{margin-top:var(--s6);display:grid;gap:var(--s4)}
.cta__meta div{padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.16)}
.cta__meta dt{font-size:var(--fs-label);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--on-dark-2);margin-bottom:4px}
.cta__meta dd{margin:0;color:#e6eff5;font-size:var(--fs-sm)}
.cta__meta a{color:#dbe6ee}

.form{background:var(--surface);color:var(--ink);border-radius:var(--r-lg);
  box-shadow:var(--e3);padding:clamp(28px,3.2vw,40px);display:grid;gap:var(--s4)}
.sec--dark .form h3{color:var(--ink);margin-bottom:2px}
.form__hint{font-size:var(--fs-sm);color:var(--text);margin-bottom:2px}
.f{display:grid;gap:7px}
.f label{font-size:var(--fs-xs);font-weight:600;color:var(--ink)}
.f label i{font-style:normal;font-weight:400;color:var(--text-2)}
.f input,.f textarea{font-family:inherit;font-size:1rem;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;width:100%;
  transition:border-color .15s,box-shadow .15s}
.f textarea{min-height:112px;resize:vertical}
.f input:focus,.f textarea:focus{border-color:var(--brand);outline:none;
  box-shadow:0 0 0 3px rgba(0,121,173,.14)}
@media (min-width:580px){.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-xs);
  color:var(--text);line-height:1.55}
.consent input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--brand)}
.form__note{font-size:var(--fs-xs);color:var(--text-2);text-align:center}

/* ---------- Fusszeile ---------- */
.ft{background:var(--dark);color:var(--on-dark-2);border-top:4px solid var(--logo-gruen);
  padding-block:clamp(56px,6vw,84px);font-size:var(--fs-sm)}
.ft a{color:#e6eff5;text-decoration:none}
.ft a:hover{color:#fff;text-decoration:underline}
.ft__grid{display:grid;gap:var(--s7)}
@media (min-width:800px){.ft__grid{grid-template-columns:1.4fr 1fr 1fr}}
.ft__mark{height:124px;width:auto;margin-bottom:var(--s5)}
.ft h4{font-size:var(--fs-label);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--on-dark-2);margin-bottom:var(--s4)}
.ft li{padding-block:5px}
.ft__legal{border-top:1px solid rgba(255,255,255,.13);margin-top:var(--s7);padding-top:var(--s5);
  display:flex;flex-wrap:wrap;gap:8px 26px;font-size:var(--fs-xs);color:var(--on-dark-2)}
.ft__legal a{color:var(--on-dark-2)}

/* ---------- Mobile Aktionsleiste ---------- */
.bar{position:fixed;left:10px;right:10px;bottom:10px;z-index:70;display:none;gap:10px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:var(--r);padding:10px;
  box-shadow:0 10px 32px rgba(11,23,32,.16)}
.bar .btn{flex:1;padding:14px 8px;font-size:var(--fs-sm)}
@media (max-width:760px){.bar{display:flex}body{padding-bottom:88px}}

/* ---------- Einblenden ---------- */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .8s cubic-bezier(.16,.8,.3,1),transform .8s cubic-bezier(.16,.8,.3,1)}
.rv[data-in="true"]{opacity:1;transform:none}
.rv-stagger>*{opacity:0;transform:translateY(16px);
  transition:opacity .8s cubic-bezier(.16,.8,.3,1),transform .8s cubic-bezier(.16,.8,.3,1)}
.rv-stagger[data-in="true"]>*{opacity:1;transform:none}
.rv-stagger[data-in="true"]>*:nth-child(2){transition-delay:.08s}
.rv-stagger[data-in="true"]>*:nth-child(3){transition-delay:.16s}
.rv-stagger[data-in="true"]>*:nth-child(4){transition-delay:.24s}
.rv-stagger[data-in="true"]>*:nth-child(5){transition-delay:.32s}
.rv-stagger[data-in="true"]>*:nth-child(6){transition-delay:.4s}

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

/* ---------- Rechtstexte ---------- */
.legal{max-width:72ch;margin-inline:auto;padding:calc(112px + 2vw) var(--pad) clamp(56px,6vw,88px)}
.legal h1{margin-bottom:var(--s6)}
.legal h2{font-size:1.22rem;margin:var(--s7) 0 var(--s3)}
.legal p,.legal ul{color:var(--text)}
.legal p+p{margin-top:.85em}
.legal ul{margin:.6em 0;padding-left:1.15em;list-style:disc}
.legal li{margin-bottom:.3em}
.legal .back{font-size:var(--fs-sm);font-weight:600;text-decoration:none;color:var(--text-2);
  display:inline-flex;align-items:center;gap:7px;margin-bottom:var(--s6)}
.legal .back:hover{color:var(--ink)}
.notice{border-left:3px solid var(--alert);background:var(--alert-100);
  border-radius:var(--r-sm);padding:18px 22px;margin:var(--s5) 0;
  font-size:var(--fs-sm);color:var(--ink)}