/* ============================================================
   TerraTiefBau · Recruiting-Funnel "Baumaschinenführer"
   Premium Design-System · Hybrid-Build (Custom-Code in GHL-Steps)
   Brand: Blau #174089 · Gelb #fabf08 · Libre Franklin
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700;800;900&display=swap');

/* ---------- Tokens ---------- */
:root {
  --terra-blue:       #174089;
  --terra-blue-deep:  #0f2d61;
  --terra-blue-soft:  #2050c8;
  --terra-yellow:     #fabf08;
  --terra-yellow-deep:#e0a800;

  --ink:              #14181f;
  --ink-2:            #3a414d;
  --ink-3:            #6b7280;
  --line:             #e6e9ef;
  --line-2:           #d3d8e2;
  --bg:               #ffffff;
  --bg-soft:          #f5f7fb;
  --bg-blue-wash:     #eef2fb;
  --white:            #ffffff;

  --radius:           18px;
  --radius-sm:        12px;
  --radius-lg:        26px;

  --shadow-sm:  0 2px 8px rgba(20,24,31,.06);
  --shadow:     0 14px 40px -12px rgba(23,64,137,.22);
  --shadow-lg:  0 30px 70px -20px rgba(23,64,137,.34);
  --shadow-yellow: 0 16px 34px -10px rgba(250,191,8,.5);

  --ring:       0 0 0 4px rgba(32,80,200,.18);

  --maxw: 1120px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

h1,h2,h3 { line-height: 1.08; text-wrap: balance; letter-spacing: -.02em; font-weight: 800; }
p { text-wrap: pretty; }

/* ---------- Layout ---------- */
.wrap { width: min(var(--maxw), 92vw); margin-inline: auto; }
.section { padding: clamp(56px, 9vw, 110px) 0; }
.section-sm { padding: clamp(40px, 6vw, 72px) 0; }

/* ---------- Buttons ---------- */
.btn {
  --bg-btn: var(--terra-yellow);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  background: var(--bg-btn);
  color: var(--ink);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  padding: 1.05rem 1.9rem;
  border-radius: 999px;
  min-height: 60px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-yellow);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .25s;
  isolation: isolate;
}
.btn::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  transform: translateX(-130%); transition: transform .7s var(--ease);
}
.btn:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 22px 44px -10px rgba(250,191,8,.62); }
.btn:hover::after { transform: translateX(130%); }
.btn:active { transform: translateY(-1px) scale(.99); }
.btn--blue { --bg-btn: var(--terra-blue); color: #fff; box-shadow: var(--shadow); }
.btn--blue:hover { box-shadow: var(--shadow-lg); }
.btn--ghost {
  background: transparent; color: var(--terra-blue); box-shadow: none;
  border: 2px solid var(--line-2); font-weight: 700;
}
.btn--ghost:hover { border-color: var(--terra-blue); background: var(--bg-blue-wash); box-shadow:none; transform: translateY(-2px); }
.btn--lg { font-size: 1.15rem; padding: 1.2rem 2.3rem; min-height: 66px; }
.btn--block { display: flex; width: 100%; }
.btn[disabled] { opacity: .4; pointer-events: none; filter: grayscale(.4); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s, background .3s;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 76px; }
.site-header .logo { height: 42px; width: auto; }
.header-cta { font-size: .95rem; padding: .7rem 1.3rem; min-height: 48px; }
.header-meta { display:flex; align-items:center; gap:.5rem; color: var(--ink-3); font-weight:600; font-size:.92rem; }
.header-meta svg { color: var(--terra-yellow-deep); }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: var(--terra-blue-deep);
  padding: clamp(110px, 16vw, 188px) 0 clamp(70px, 9vw, 120px);
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 35%;
  transform: scale(1.08);
  animation: kenburns 22s var(--ease) infinite alternate;
}
@keyframes kenburns { from { transform: scale(1.08) translateY(0); } to { transform: scale(1.18) translateY(-2%); } }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(102deg, rgba(15,45,97,.94) 0%, rgba(15,45,97,.78) 42%, rgba(15,45,97,.28) 78%, rgba(15,45,97,.12) 100%),
    linear-gradient(0deg, rgba(15,45,97,.7) 0%, transparent 38%);
}
.hero__grain { position:absolute; inset:0; z-index:2; opacity:.05; pointer-events:none;
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 4px 4px; }
.hero .wrap { position: relative; z-index: 3; }
.hero__inner { max-width: 760px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .82rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--terra-yellow);
  background: rgba(250,191,8,.12); border: 1px solid rgba(250,191,8,.35);
  padding: .5rem 1rem; border-radius: 999px; margin-bottom: 1.5rem;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--terra-yellow); box-shadow: 0 0 0 0 rgba(250,191,8,.7); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(250,191,8,.6);} 70%{box-shadow:0 0 0 10px rgba(250,191,8,0);} 100%{box-shadow:0 0 0 0 rgba(250,191,8,0);} }
.hero h1 { font-size: clamp(2.3rem, 6.4vw, 4.4rem); font-weight: 900; margin-bottom: 1.2rem; }
.hero h1 .accent { color: var(--terra-yellow); }
.hero__sub { font-size: clamp(1.1rem, 2.4vw, 1.45rem); color: rgba(255,255,255,.9); max-width: 620px; margin-bottom: 2.2rem; font-weight: 500; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero__note { display:flex; align-items:center; gap:.5rem; color: rgba(255,255,255,.78); font-size:.95rem; font-weight:600; }
.hero__note svg { color: var(--terra-yellow); flex:none; }

/* trust strip under hero */
.trust {
  background: var(--terra-blue); color: #fff;
  border-top: 1px solid rgba(255,255,255,.12);
}
.trust .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.6rem 0; }
.trust__item { text-align: center; }
.trust__num { font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 900; color: var(--terra-yellow); line-height:1; }
.trust__lbl { font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.82); margin-top: .35rem; }

/* ---------- Section heads ---------- */
.s-head { max-width: 680px; margin-bottom: clamp(2rem, 5vw, 3.4rem); }
.s-head.center { margin-inline: auto; text-align: center; }
.s-kicker { font-size:.82rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color: var(--terra-blue-soft); margin-bottom:.8rem; display:block; }
.s-head h2 { font-size: clamp(1.8rem, 4.4vw, 2.9rem); margin-bottom: 1rem; color: var(--ink); }
.s-head p { font-size: 1.12rem; color: var(--ink-2); }

/* ---------- Value cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.7rem; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
  position: relative; overflow: hidden;
}
.card::before { content:""; position:absolute; left:0; top:0; height:4px; width:100%; background: linear-gradient(90deg, var(--terra-blue), var(--terra-yellow)); transform: scaleX(0); transform-origin:left; transition: transform .45s var(--ease-out); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card__ico {
  width: 56px; height: 56px; border-radius: 14px; display:grid; place-items:center;
  background: var(--bg-blue-wash); color: var(--terra-blue); margin-bottom: 1.2rem;
}
.card__ico svg { width: 28px; height: 28px; }
.card h3 { font-size: 1.22rem; margin-bottom: .5rem; }
.card p { color: var(--ink-2); font-size: .99rem; }

/* ---------- Split / "Was wir suchen" ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.split__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3.4; }
.split__media img { width:100%; height:100%; object-fit: cover; }
.split__badge {
  position:absolute; left: 1.2rem; bottom: 1.2rem; z-index:2;
  background: var(--terra-yellow); color: var(--ink); font-weight:800; font-size:.9rem;
  padding:.7rem 1.1rem; border-radius: 999px; box-shadow: var(--shadow);
}
.checklist { list-style:none; display:grid; gap: 1rem; margin-top: 1.4rem; }
.checklist li { display:flex; gap: .9rem; align-items:flex-start; font-size: 1.06rem; font-weight: 500; color: var(--ink); }
.checklist .ck {
  flex:none; width: 30px; height: 30px; border-radius: 9px; display:grid; place-items:center;
  background: var(--terra-blue); color: #fff; margin-top: 1px;
}
.checklist .ck svg { width:17px; height:17px; }

/* ---------- Steps "So läufts" ---------- */
.flow { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; counter-reset: step; }
.flow__item { position:relative; padding: 2rem 1.6rem; background: var(--bg-soft); border-radius: var(--radius); border:1px solid var(--line); }
.flow__num { font-size: 3rem; font-weight: 900; color: var(--terra-blue); opacity:.16; line-height:1; }
.flow__item h3 { font-size: 1.15rem; margin: .5rem 0 .4rem; }
.flow__item p { color: var(--ink-2); font-size: .98rem; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(120deg, var(--terra-blue-deep), var(--terra-blue) 60%, var(--terra-blue-soft)); color:#fff; border-radius: var(--radius-lg); padding: clamp(2.4rem,5vw,3.6rem); text-align:center; position:relative; overflow:hidden; }
.cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 20%, rgba(250,191,8,.22), transparent 45%); }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { font-size: clamp(1.7rem,4vw,2.6rem); margin-bottom: .8rem; }
.cta-band p { color: rgba(255,255,255,.88); max-width: 540px; margin: 0 auto 1.8rem; font-size:1.1rem; }

/* ============================================================
   FUNNEL STEPS (schritt-2/3/4)
   ============================================================ */
.funnel-bg { background: var(--bg-soft); min-height: 100vh; }
.progress-wrap { position: sticky; top: 76px; z-index: 40; background: var(--bg-soft); padding-top: 1.4rem; }
.progress {
  display:flex; align-items:center; gap:.6rem; width: min(640px, 92vw); margin: 0 auto 0;
}
.progress__step { flex:1; display:flex; flex-direction:column; align-items:center; gap:.5rem; position:relative; }
.progress__bar { width:100%; height:7px; border-radius:999px; background: var(--line-2); overflow:hidden; }
.progress__bar span { display:block; height:100%; width:0; background: linear-gradient(90deg,var(--terra-blue),var(--terra-blue-soft)); border-radius:999px; transition: width .6s var(--ease-out); }
.progress__step.done .progress__bar span,
.progress__step.active .progress__bar span { width:100%; }
.progress__step.active .progress__bar span { background: linear-gradient(90deg,var(--terra-blue),var(--terra-yellow)); }
.progress__lbl { font-size:.74rem; font-weight:700; color: var(--ink-3); letter-spacing:.02em; }
.progress__step.active .progress__lbl, .progress__step.done .progress__lbl { color: var(--terra-blue); }

.step-main { width: min(680px, 92vw); margin-inline:auto; padding: clamp(2rem,5vw,3.2rem) 0 5rem; }
.step-card {
  background: #fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: clamp(1.6rem,4vw,2.8rem);
}
.step-eyebrow { font-size:.8rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color: var(--terra-blue-soft); }
.step-card h1 { font-size: clamp(1.5rem,4vw,2.2rem); margin:.6rem 0 .5rem; }
.step-card .step-lead { color: var(--ink-2); font-size:1.05rem; margin-bottom: 1.8rem; }

.field { margin-bottom: 2.1rem; }
.field > label.q, .field > .q { display:block; font-weight:800; font-size:1.12rem; margin-bottom:.3rem; color:var(--ink); }
.field .hint { color: var(--ink-3); font-size:.92rem; margin-bottom:1rem; }
.field .hint.req::after { content:" · Pflichtfeld"; color: var(--terra-blue-soft); font-weight:600; }

/* choice cards */
.choices { display:grid; gap:.7rem; }
.choices.cols-2 { grid-template-columns: repeat(2,1fr); }
.choice {
  display:flex; align-items:center; gap:1rem; width:100%; text-align:left;
  background:#fff; border:2px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem; min-height: 64px;
  transition: border-color .2s, background .2s, transform .12s, box-shadow .25s;
}
.choice:hover { border-color: var(--terra-blue-soft); background: var(--bg-blue-wash); }
.choice:active { transform: scale(.99); }
.choice .tick {
  flex:none; width:26px; height:26px; border-radius:8px; border:2px solid var(--line-2);
  display:grid; place-items:center; color:#fff; transition: all .2s;
}
.choice .tick svg { width:15px;height:15px; opacity:0; transform:scale(.5); transition: all .2s; }
.choice .c-txt { font-weight:600; font-size:1.04rem; }
.choice .c-sub { display:block; font-weight:500; font-size:.86rem; color:var(--ink-3); margin-top:1px; }
.choice.is-selected { border-color: var(--terra-blue); background: var(--bg-blue-wash); box-shadow: var(--ring); }
.choice.is-selected .tick { background: var(--terra-blue); border-color: var(--terra-blue); }
.choice.is-selected .tick svg { opacity:1; transform:scale(1); }
.choice.radio .tick { border-radius: 50%; }

/* text inputs */
.input, .textarea, .selectbox {
  width:100%; background:#fff; border:2px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 1rem 1.1rem; min-height:58px; color:var(--ink); transition: border-color .2s, box-shadow .2s;
}
.textarea { min-height: 120px; resize: vertical; line-height:1.5; }
.input:focus, .textarea:focus, .selectbox:focus { outline:none; border-color: var(--terra-blue); box-shadow: var(--ring); }
.input::placeholder, .textarea::placeholder { color: #9aa1ad; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.charcount { text-align:right; font-size:.82rem; color:var(--ink-3); margin-top:.3rem; }

/* file upload */
.upload {
  border:2px dashed var(--line-2); border-radius: var(--radius-sm); padding:1.5rem; text-align:center;
  color:var(--ink-3); transition: border-color .2s, background .2s; cursor:pointer; display:block;
}
.upload:hover { border-color: var(--terra-blue-soft); background: var(--bg-blue-wash); }
.upload strong { color: var(--terra-blue); }
.upload input { display:none; }

/* dsgvo */
.consent { display:flex; gap:.85rem; align-items:flex-start; padding:1rem 0; }
.consent input { width:24px; height:24px; flex:none; margin-top:2px; accent-color: var(--terra-blue); }
.consent label { font-size:.95rem; color: var(--ink-2); }
.consent a { color: var(--terra-blue); text-decoration: underline; font-weight:600; }

/* honeypot */
.hp { position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

/* step nav */
.step-nav { display:flex; gap:1rem; align-items:center; margin-top: 2.2rem; }
.step-nav .btn--ghost { min-height:60px; }
.step-back { color: var(--ink-3); font-weight:700; display:inline-flex; align-items:center; gap:.4rem; padding:.6rem; }
.step-back:hover { color: var(--terra-blue); }
.err-msg { color:#c0392b; font-size:.9rem; font-weight:600; margin-top:.6rem; display:none; }
.err-msg.show { display:block; }

/* trust mini under step */
.step-trust { text-align:center; margin-top:1.6rem; color: var(--ink-3); font-size:.9rem; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.step-trust svg { color: var(--terra-blue); }

/* ---------- Danke ---------- */
.thanks { min-height: calc(100vh - 76px); display:grid; place-items:center; background: linear-gradient(160deg,var(--bg-soft),var(--bg-blue-wash)); padding: 3rem 0; }
.thanks__card { background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(2rem,5vw,3.4rem); width:min(620px,92vw); text-align:center; }
.thanks__check { width:88px;height:88px; border-radius:50%; background: var(--terra-blue); display:grid; place-items:center; margin:0 auto 1.6rem; animation: pop .6s var(--ease-out) both; box-shadow: var(--shadow); }
.thanks__check svg { width:46px;height:46px;color:#fff; }
@keyframes pop { 0%{transform:scale(0) rotate(-20deg);opacity:0;} 60%{transform:scale(1.12);} 100%{transform:scale(1);opacity:1;} }
.thanks h1 { font-size: clamp(1.8rem,5vw,2.6rem); margin-bottom:.8rem; }
.thanks p { color: var(--ink-2); font-size:1.1rem; margin-bottom:1.4rem; }
.thanks__steps { text-align:left; background:var(--bg-soft); border-radius:var(--radius); padding:1.4rem 1.6rem; margin:1.6rem 0; display:grid; gap:.9rem; }
.thanks__steps li { display:flex; gap:.8rem; align-items:flex-start; list-style:none; font-weight:500; }
.thanks__steps .n { flex:none; width:26px;height:26px;border-radius:50%;background:var(--terra-yellow);color:var(--ink);font-weight:800;font-size:.85rem;display:grid;place-items:center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.7); padding: 2.6rem 0; font-size:.92rem; }
.site-footer .wrap { display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; }
.site-footer a { color: rgba(255,255,255,.85); }
.site-footer a:hover { color: var(--terra-yellow); }
.site-footer .foot-links { display:flex; gap:1.4rem; flex-wrap:wrap; }
.site-footer .logo-f { height:30px; opacity:.9; filter: brightness(0) invert(1); }

/* ---------- Scroll reveal (Progressive Enhancement: nur verstecken, wenn JS aktiv) ---------- */
.js [data-reveal] { opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js [data-reveal].in { opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s;}
[data-reveal][data-delay="2"]{ transition-delay:.16s;}
[data-reveal][data-delay="3"]{ transition-delay:.24s;}

/* ---------- Placeholder marker (nur Prototyp – sichtbar machen) ---------- */
.ph { background: #fff4cc; color:#7a5b00; border-bottom:2px dotted #e0a800; padding:0 .2em; border-radius:3px; font-weight:700; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .cards, .flow { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split__media { aspect-ratio: 16/11; order:-1; }
  .trust .wrap { grid-template-columns: repeat(2,1fr); gap:1.4rem 1rem; }
  .header-meta { display:none; }
  .grid-2 { grid-template-columns: 1fr; }
  .choices.cols-2 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .header-cta span { display:none; }
  .step-nav { flex-direction: column-reverse; align-items: stretch; }
  .step-nav .btn { width:100%; }
}

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