/* inter-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/inter/inter-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter/inter-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter/inter-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* prata-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/prata/prata-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#182249;--navy-soft:#222d59;--accent:#d01406;--accent-dark:#800d05;
  --recruit:#d01406;--recruit-dk:#800d05;
  --light:#f4f5f8;--white:#ffffff;--text:#1c2533;--muted:#4e5d6e;--border:#d0d6e4;
  --font-head:'Prata',Georgia,serif;--font-body:'Inter',system-ui,sans-serif;
  --max-w:1380px;--pad:5rem;--nav-h:100px;
}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}
body{font-family:var(--font-body);color:var(--text);background:var(--white);line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;font-size:18px}
.skip-link{position:absolute;top:-100%;left:1rem;background:var(--white);color:var(--navy);padding:.75rem 1.25rem;font-weight:600;z-index:9999;text-decoration:none;border:2px solid var(--navy)}
.skip-link:focus{top:1rem}
:focus-visible{outline:3px solid #4a90d9;outline-offset:3px}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--white);box-shadow:0 1px 0 var(--border),0 4px 24px rgba(24,34,73,.07);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad);height:var(--nav-h);transition:box-shadow .3s}
.nav-logo{grid-column:1;justify-self:start}
.nav-logo img{height:82px;display:block}
.nav-links{grid-column:2;justify-self:center;display:flex;gap:2.5rem;list-style:none}
.nav-recruit{grid-column:3;justify-self:end}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--navy)}
.nav-recruit{background:var(--recruit);color:var(--light);text-decoration:none;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.7rem 1.5rem;transition:background .2s;white-space:nowrap}
.nav-recruit:hover{background:var(--recruit-dk)}

/* HERO — craftsman photo fills right, installer as full bg at low opacity */
.hero{margin-top:var(--nav-h);background:var(--navy);min-height:88vh;display:flex;align-items:center;padding:6rem var(--pad);position:relative;overflow:hidden}
.hero-inner{max-width:var(--max-w);margin:0 auto;width:100%;position:relative;z-index:1}
.hero-split{display:grid;grid-template-columns:1.1fr 0.9fr;gap:5rem;align-items:center}
.hero-eyebrow{display:block;font-size:.75rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--white);margin-bottom:1.6rem;line-height:1.9}
.hero-eyebrow-region{color:rgba(255,255,255,.55);font-weight:400}
.hero h1{font-family:var(--font-head);font-size:clamp(2.8rem,5.5vw,4rem);color:var(--white);line-height:1.1;margin-bottom:1.6rem;font-weight:400}
.hero h1 em{color:rgba(255,255,255,.35);font-style:normal}
.hero-sub{color:var(--white);font-size:1.1rem;line-height:1.85;margin-bottom:3rem;font-weight:400;max-width:540px}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap}
.btn-recruit{background:var(--recruit);color:var(--light);padding:1.15rem 2.4rem;font-weight:700;text-decoration:none;font-size:.95rem;letter-spacing:.07em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.6rem;transition:background .2s}
.btn-recruit:hover{background:var(--recruit-dk)}
.btn-primary{background:var(--light);color:var(--navy);border:1px solid var(--light);padding:1.15rem 2rem;font-weight:500;text-decoration:none;font-size:.9rem;letter-spacing:.07em;text-transform:uppercase;display:inline-flex;align-items:center;transition:border-color .2s,color .2s}
.btn-primary:hover{background:var(--navy);color:var(--light)}
.hero-img-wrap{position:relative;overflow:hidden;height:520px}
.hero-img-wrap img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
/*.hero-img-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,var(--navy) 0%,transparent 30%)}*/

/* TRUST BAR */
.trust-bar{background:var(--navy);border-top:1px solid rgba(255,255,255,.1);padding:1.1rem var(--pad)}
.trust-inner{max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.trust-item{font-size:.72rem;color:rgba(255,255,255,.6);font-weight:500;letter-spacing:.12em;text-transform:uppercase}

/* SECTIONS */
section{padding:8rem var(--pad)}
.section-inner{max-width:var(--max-w);margin:0 auto}
.section-label{display:block;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}
.section-title{font-family:var(--font-head);font-size:clamp(2.2rem,4vw,3.4rem);color:var(--navy);line-height:1.15;margin-bottom:1.3rem;font-weight:400}
.section-intro{font-size:1.1rem;color:var(--muted);max-width:680px;line-height:1.85;font-weight:400}

/* LEISTUNGEN */
.leistungen{background:var(--white)}
.leistungen-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:5rem;border-top:1px solid var(--border);border-left:1px solid var(--border)}
.leistung-card{border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .2s;overflow:hidden;display:flex;flex-direction:column}
.leistung-card:hover{background:var(--light)}
.card-img{width:100%;height:200px;object-fit:cover;display:block;filter:grayscale(15%)}
.card-body{padding:2.2rem 2.4rem 2.6rem;flex:1;display:flex;flex-direction:column}
.leistung-icon{font-size:1.5rem;margin-bottom:1.1rem;display:block}
.leistung-card h3{font-family:var(--font-head);font-size:1.25rem;font-weight:400;color:var(--navy);margin-bottom:.7rem;line-height:1.25}
.leistung-card p{font-size:.92rem;color:var(--muted);line-height:1.8;font-weight:400}
.leistung-card.cta-card{background:var(--navy);border-color:var(--navy)}
.leistung-card.cta-card:hover{background:var(--navy-soft)}
.leistung-card.cta-card h3{color:var(--white);font-size:1.4rem}
.leistung-card.cta-card p{color:var(--white)}
.cta-link{display:inline-block;margin-top:auto;padding-top:1.6rem;color:var(--white);text-decoration:none;font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;transition:color .2s,border-color .2s;align-self:flex-start}
.cta-link:hover{color:white;border-color:rgba(255,255,255,.7)}

/* JOBS */
.jobs{background:var(--light);position:relative;overflow:hidden}
.jobs-bg{display:none}
.jobs .section-inner{position:relative;z-index:1}
.jobs .section-label{color:var(--muted)}
.jobs .section-title{color:var(--navy)}
.jobs .section-intro{color:var(--muted);font-weight:400}
.recruit-cta-block{margin-top:3.5rem;margin-bottom:5rem;background:var(--recruit);padding:2.8rem 3.2rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.recruit-cta-block p{color:var(--light);font-size:1.1rem;font-weight:400;line-height:1.55;max-width:560px}
.recruit-cta-block p strong{font-weight:700;display:block;font-size:1.4rem;margin-bottom:.3rem}
.btn-recruit-large{background:var(--light);color:var(--navy);padding:1.15rem 2.6rem;font-weight:600;text-decoration:none;font-size:.92rem;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.55rem;transition:background .2s;white-space:nowrap;flex-shrink:0}
.btn-recruit-large:hover{background:var(--recruit-dk);color:var(--light)}
.jobs-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border);border-left:1px solid var(--border)}
.job-benefit{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:2.6rem 2.4rem;background:var(--white);transition:background .2s}
.job-benefit:hover{background:#eef0f6}
.job-benefit h3{font-family:var(--font-head);color:var(--navy);font-size:1.25rem;font-weight:400;margin-bottom:.7rem}
.job-benefit p{color:var(--muted);font-size:.98rem;line-height:1.8;font-weight:400}

/* QUIZ */
.quiz-wrapper{margin-top:4.5rem;border:1px solid var(--border);padding:3.5rem;background:var(--navy)}
.quiz-title{font-family:var(--font-head);color:var(--white);font-size:1.6rem;font-weight:400;margin-bottom:.5rem}
.quiz-sub{color:var(--white);font-size:.9rem;margin-bottom:2.5rem;font-weight:400}
.quiz-step{display:none}.quiz-step.active{display:block}
.quiz-q{color:var(--white);font-size:1rem;font-weight:500;margin-bottom:1.4rem}
.quiz-options{display:flex;flex-wrap:wrap;gap:.75rem}
.quiz-opt{background:transparent;border:1px solid rgba(255,255,255,.22);color:var(--white);padding:.7rem 1.3rem;cursor:pointer;font-size:.87rem;font-family:var(--font-body);font-weight:400;letter-spacing:.04em;transition:background .15s,border .15s,color .15s,box-shadow .15s,transform .15s}
.quiz-opt:not(.selected):hover{background:var(--white);border-color:var(--white);color:var(--navy)}
.quiz-opt.selected{background:var(--white) !important;border:2px solid var(--recruit) !important;color:var(--navy) !important;font-weight:700 !important;box-shadow:0 0 0 3px rgba(184,32,8,.35),0 4px 16px rgba(0,0,0,.3) !important;transform:translateY(-2px) !important}
.quiz-input{width:100%;padding:.85rem 0;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.22);color:var(--white);font-size:1rem;font-family:var(--font-body);margin-bottom:1rem;outline:none;font-weight:400}
.quiz-input::placeholder{color:rgba(255,255,255,.45)}
.quiz-input:focus{border-bottom-color:var(--recruit)}
.quiz-nav{display:flex;gap:.8rem;margin-top:2.2rem;align-items:center}
.quiz-btn{background:var(--white);color:var(--navy);border:none;padding:.85rem 2rem;font-family:var(--font-body);font-weight:700;cursor:pointer;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;transition:background .2s}
.quiz-btn:hover{background:var(--navy);color:var(--light);border:1px solid var(--light)}
.quiz-btn.secondary{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.4);padding:.8rem 1.6rem}
.quiz-btn.secondary:hover{color:var(--white);border-color:var(--white)}
.quiz-progress{color:var(--white);font-size:.82rem;margin-left:auto}
.quiz-success{text-align:center;padding:2.5rem 0;display:none}
.quiz-success h3{font-family:var(--font-head);color:var(--white);font-size:1.6rem;font-weight:400;margin-bottom:.6rem}
.quiz-success p{color:var(--white);font-size:1rem}

/* KONTAKT */
.kontakt{background:var(--light)}
.kontakt-split{display:grid;grid-template-columns:1fr 1.5fr;gap:8rem;margin-top:5rem;align-items:start}
.kontakt-detail{margin-bottom:2.2rem}
.kontakt-detail h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:.4rem;font-weight:500}
.kontakt-detail a,.kontakt-detail p{color:var(--navy);text-decoration:none;font-size:1.05rem;font-weight:400;line-height:1.65}
.kontakt-detail a:hover{color:var(--accent);text-decoration:underline}
.form-group{margin-bottom:1.8rem}
.form-group label{display:block;font-size:.7rem;font-weight:500;color:var(--muted);margin-bottom:.45rem;text-transform:uppercase;letter-spacing:.12em}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:.85rem 0;border:none;border-bottom:1px solid var(--border);font-size:1rem;color:var(--text);background:transparent;outline:none;transition:border-color .2s;font-family:var(--font-body);font-weight:400}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-bottom-color:var(--navy)}
.form-group textarea{resize:vertical;min-height:120px}
.form-submit{background:var(--navy);color:white;border:none;padding:1.1rem 2.6rem;font-family:var(--font-body);font-weight:600;font-size:.88rem;cursor:pointer;letter-spacing:.1em;text-transform:uppercase;transition:opacity .2s;margin-top:.5rem}
.form-submit:hover{opacity:.82}
.form-note{font-size:.82rem;color:var(--muted);margin-top:1rem;font-weight:400}

/* FOOTER */
footer{background:var(--white);color:var(--muted);padding:2.2rem var(--pad);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:.82rem;letter-spacing:.03em;border-top:1px solid var(--border)}
footer span{color:var(--muted)}
footer a{color:var(--navy);text-decoration:none;font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:color .2s}
footer a:hover{color:var(--accent);text-decoration:none}
.footer-links{display:flex;gap:0;align-items:center}
.footer-links a{padding:0 1.3rem;border-left:1px solid var(--border)}
.footer-links a:first-child{padding-left:0;border-left:none}

@media(max-width:1100px){
  :root{--pad:2.5rem}
  .leistungen-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  :root{--pad:1.5rem;--nav-h:76px}
  .nav-logo img{height:52px}
  .nav-recruit{padding:.6rem 1.1rem;font-size:.68rem}
  .nav-links{display:none}
  section{padding:5rem var(--pad)}
  .hero{padding:4rem var(--pad);min-height:auto}
  .hero-split{grid-template-columns:1fr;gap:2.5rem}
  .kontakt-split{grid-template-columns:1fr;gap:2.5rem}
  .form-row{grid-template-columns:1fr}
  .hero-img-wrap{height:320px}
  .leistungen-grid{grid-template-columns:1fr}
  .jobs-grid{grid-template-columns:1fr}
  .trust-inner{gap:1rem;justify-content:flex-start}
  footer{flex-direction:column;align-items:flex-start}
  .recruit-cta-block{flex-direction:column;align-items:flex-start}
  .hero-btns{flex-direction:column;align-items:flex-start}
}
@media(max-width:400px){
  :root{--pad:1rem}
  .nav-logo img{height:44px}
  .nav-recruit{padding:.5rem .85rem;font-size:.62rem;letter-spacing:.06em}
}

/* ── MICRO-ANIMATIONS ─────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}

/* Observe-triggered reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Hero entrance */
.hero-inner{animation:fadeUp .8s .1s cubic-bezier(.22,1,.36,1) both}

/* Card hover lift */
.leistung-card{transition:background .2s,transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.leistung-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(24,34,73,.10)}

/* Job benefit hover */
.job-benefit{transition:background .2s,transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s}
.job-benefit:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(24,34,73,.08)}

/* Trust bar items */
.trust-item{transition:color .2s,opacity .2s}
.trust-item:hover{opacity:.8}

/* Button pulse on hover */
.btn-recruit,.btn-recruit-large{transition:background .2s,transform .18s,box-shadow .18s}
.btn-recruit:hover,.btn-recruit-large:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(208,20,6,.35)}

/* Nav logo hover */
.nav-logo img{transition:opacity .2s,transform .2s}
.nav-logo:hover img{opacity:.85;transform:scale(.97)}

/* Nav recruit button in white nav */
.nav-recruit{transition:background .2s,transform .18s,box-shadow .18s}
.nav-recruit:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(208,20,6,.3)}

/* Image zoom on card hover */
.leistung-card:hover .card-img{transform:scale(1.04)}
.card-img{transition:transform .4s cubic-bezier(.22,1,.36,1)}

/* Quiz option selected pulse */
.quiz-opt.selected{animation:fadeIn .2s}
.quiz-opt:not(.selected):hover{transform:translateY(-1px)}

/* Section label underline slide */
.section-label{position:relative;display:inline-block}
.section-label::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:1px;background:var(--navy);transition:width .4s .2s}
.section-label.visible::after{width:100%}