/* =====================================================================
   b:work – Dedizierte META Landingpages  ·  Shared Stylesheet
   MOBILE-FIRST. Look: trybwork.com. Marke: #190023 + Acid-Gelb #f0f55f.
   Ziel: 1 Scroll, 1 Conversion. CTA above the fold auf jedem Gerät.
   ===================================================================== */

@font-face{ font-family:"Acid Grotesk OneQrew"; src:url("fonts/AcidGrotesk-OneQrew-Book.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Acid Grotesk OneQrew"; src:url("fonts/AcidGrotesk-OneQrew-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Acid Grotesk OneQrew"; src:url("fonts/AcidGrotesk-OneQrew-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --c-primary:#190023;
  --c-accent:#f0f55f;
  --c-secondary:#f4f3ee;
  --c-base:#ffffff;
  --c-text:#1a1a1a;
  --c-muted:rgba(255,255,255,.72);
  --c-muted-dark:rgba(25,0,35,.62);
  --r-sm:8px; --r-md:14px; --r-full:9999px;
  --wrap:1080px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:"Acid Grotesk OneQrew", Inter, Arial, sans-serif;
  background:var(--c-primary); color:var(--c-base);
  min-height:100dvh; display:flex; flex-direction:column;
  overflow-x:hidden; line-height:1.5;
}
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 1.15rem; }

/* dezentes Marken-Sign */
.bg-sign{
  position:fixed; inset:auto auto -10vh -18vw;
  width:80vw; max-width:560px; opacity:.05; pointer-events:none;
  filter:brightness(4) grayscale(1); z-index:0;
}

/* ---------- Header ---------- */
header{ padding:1rem 0; position:relative; z-index:2; }
header .logo{ height:34px; width:auto; }

/* ---------- HERO (mobile-first: 1 Spalte) ---------- */
main{ flex:1; position:relative; z-index:1; padding:1rem 0 3rem; }
.hero{ display:flex; flex-direction:column; gap:2rem; }
/* Innen-Abstände der Hero-Elemente – gilt auch mobil (vorher nur Desktop -> gequetscht) */
.hero-copy{ display:flex; flex-direction:column; gap:1.15rem; }

.badge{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(240,245,95,.12); border:1px solid rgba(240,245,95,.4);
  color:var(--c-accent); padding:.35rem .85rem; border-radius:var(--r-full);
  font-size:.78rem; font-weight:500;
}

h1{
  font-size:clamp(1.85rem, 7vw, 3.3rem);
  font-weight:700; line-height:1.1; letter-spacing:-.01em;
}
h1 .u{ text-decoration:underline; text-decoration-color:var(--c-accent); text-decoration-thickness:.09em; text-underline-offset:.14em; }
.sub{ font-size:clamp(1rem, 4vw, 1.2rem); color:var(--c-muted); max-width:40ch; }

/* Hero-CTA: auf Mobile als Sticky-Bar am unteren Rand fixiert –
   Hero gewinnt Luft, CTA bleibt beim Scrollen dauerhaft erreichbar */
.hero-cta{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  position:fixed; left:.75rem; right:.75rem;
  bottom:calc(.6rem + env(safe-area-inset-bottom)); z-index:900;
  background:var(--c-accent); color:var(--c-primary);
  font-weight:700; font-size:1rem; text-decoration:none;
  padding:.9rem 1.5rem; border-radius:var(--r-full);
  box-shadow:0 8px 28px rgba(0,0,0,.45), 0 2px 10px rgba(240,245,95,.25);
}
.hero-cta:active{ transform:translateY(1px); }
/* Konflikt mit Consent-Banner (beide fixed bottom): solange Consent offen ist, CTA-Bar weg */
body:has(.consent.show) .hero-cta{ display:none; }
/* Platz am Seitenende, damit die Bar Footer/FAQ nicht verdeckt */
@media (max-width:899px){ body{ padding-bottom:4.5rem; } }

/* Trust-Punkte als kompakte Chips */
.trust{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 1rem; }
.trust li{ display:flex; gap:.45rem; align-items:center; font-size:.9rem; color:var(--c-muted); }
.trust li::before{
  content:""; flex:0 0 auto; width:1.1rem; height:1.1rem; border-radius:50%;
  background:var(--c-accent) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%23190023" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M3.5 8.5l3 3 6-7"/></svg>') center/60% no-repeat;
}

/* USP-Kacheln – Mobile 1 Spalte (Benefit-Titel brauchen Breite), ab 520px 2 Spalten */
.usps{ list-style:none; display:grid; grid-template-columns:1fr; gap:.7rem; }
.usps li{ border:1px solid rgba(255,255,255,.16); border-radius:var(--r-md); padding:.65rem .85rem; }
.usps b{ display:block; font-weight:700; font-size:.92rem; line-height:1.25; }
.usps span{ color:var(--c-muted); font-size:.82rem; line-height:1.35; display:block; margin-top:.1rem; }
@media (min-width:520px){
  .usps{ grid-template-columns:1fr 1fr; gap:.6rem; }
  .usps li{ padding:.75rem .85rem; }
}

/* ---------- Formular-Karte ---------- */
.hero-form{ display:flex; flex-direction:column; }
.form-card{
  background:var(--c-base); color:var(--c-text);
  border-radius:var(--r-md); padding:1.4rem 1.25rem;
  box-shadow:0 18px 44px rgba(0,0,0,.3);
}
.form-ribbon{ background:var(--c-secondary); color:var(--c-text); text-align:center; font-size:.8rem; font-weight:500; padding:.45rem; border-radius:var(--r-sm); margin-bottom:.85rem; }
.form-ribbon strong{ color:var(--c-primary); }
.form-card h2{ font-size:1.3rem; font-weight:700; text-align:center; margin-bottom:.15rem; }
.form-card .form-sub{ color:#666; font-size:.88rem; text-align:center; margin-bottom:.85rem; }

.fg{ margin-bottom:.6rem; }
.fg label{ display:block; font-weight:500; font-size:.8rem; margin-bottom:.2rem; }
.fg input{
  width:100%; padding:.7rem .75rem; font-family:inherit; font-size:16px; /* 16px = kein iOS-Zoom */
  border:1.5px solid #dcdce0; border-radius:var(--r-sm); transition:border-color .15s, box-shadow .15s;
}
.fg input:focus{ outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(197,52,255,.14); }
.fg select{
  width:100%; padding:.7rem .75rem; font-family:inherit; font-size:16px; /* 16px = kein iOS-Zoom */
  border:1.5px solid #dcdce0; border-radius:var(--r-sm); background:#fff; color:var(--c-text);
  appearance:none; -webkit-appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4 6.5l4 4 4-4"/></svg>');
  background-repeat:no-repeat; background-position:right .8rem center; background-size:1rem;
  transition:border-color .15s, box-shadow .15s;
}
.fg select:focus{ outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(197,52,255,.14); }
.fg select:invalid{ color:#888; } /* Platzhalter "Bitte wählen …" grau */
.fg.row{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }

.submit{
  width:100%; padding:1rem; margin-top:.3rem;
  background:var(--c-accent); color:var(--c-primary);
  border:none; border-radius:var(--r-full);
  font-family:inherit; font-weight:700; font-size:1.03rem; cursor:pointer;
  transition:transform .12s, filter .12s;
}
.submit:hover{ transform:translateY(-1px); filter:brightness(.96); }
.submit:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.disclaimer{ font-size:.72rem; color:#666; text-align:center; margin-top:.8rem; line-height:1.4; }
.disclaimer a{ color:var(--c-primary); }

.form-success{ display:none; text-align:center; padding:1.2rem 0; margin-top:1rem; }
.form-success.show{ display:block; }
.form-success .seal{ font-size:2.2rem; margin-bottom:.5rem; }
.form-success h3{ font-size:1.2rem; font-weight:700; margin-bottom:.35rem; }
.form-success p{ color:#666; font-size:.9rem; }

/* ---------- Proof-Band ---------- */
.proof{ background:var(--c-secondary); color:var(--c-text); padding:2.4rem 0; position:relative; z-index:1; }
.proof .grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem 1rem; max-width:980px; margin:0 auto; text-align:center; }
.proof b{ display:block; font-size:1.35rem; font-weight:700; color:var(--c-primary); line-height:1.2; }
.proof span{ font-size:.82rem; color:var(--c-muted-dark); }

/* ---------- Feature-Tiefe: Kostenlos vs. Pro ---------- */
.features{ background:var(--c-primary); padding:3rem 0 3.2rem; position:relative; z-index:1; }
.features h2{ text-align:center; font-size:clamp(1.35rem,5vw,2rem); font-weight:700; margin-bottom:.6rem; }
.features-sub{ text-align:center; color:var(--c-muted); font-size:.95rem; max-width:52ch; margin:0 auto 1.9rem; }
.plans{ display:grid; gap:1.2rem; max-width:860px; margin:0 auto; }
.plan{ border:1px solid rgba(255,255,255,.16); border-radius:var(--r-md); padding:1.2rem 1.15rem; }
.plan-pro{ border-color:rgba(240,245,95,.55); background:rgba(240,245,95,.06); }
.plan-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.3rem .6rem; margin-bottom:.85rem; }
.plan-head b{ font-size:1.15rem; font-weight:700; }
.plan-pro .plan-head b{ color:var(--c-accent); }
.plan-head span{ color:var(--c-muted); font-size:.82rem; }
.plan ul{ list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.plan li{ display:flex; gap:.55rem; align-items:flex-start; font-size:.92rem; color:rgba(255,255,255,.88); line-height:1.4; }
.plan li::before{
  content:""; flex:0 0 auto; margin-top:.22rem; width:1rem; height:1rem; border-radius:50%;
  background:var(--c-accent) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%23190023" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M3.5 8.5l3 3 6-7"/></svg>') center/60% no-repeat;
}
.plan li strong{ color:#fff; }
.mid-cta{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  max-width:420px; margin:1.7rem auto 0;
  background:var(--c-accent); color:var(--c-primary);
  font-weight:700; font-size:1.05rem; text-decoration:none;
  padding:1rem 1.5rem; border-radius:var(--r-full);
  box-shadow:0 10px 26px rgba(240,245,95,.22);
}
.mid-cta:active{ transform:translateY(1px); }
.features-note{ text-align:center; color:var(--c-muted); font-size:.82rem; margin-top:.85rem; }

/* ---------- FAQ ---------- */
.faq{ background:var(--c-secondary); color:var(--c-text); padding:2.8rem 0 3.2rem; position:relative; z-index:1; }
.faq h2{ text-align:center; font-size:clamp(1.35rem,5vw,2rem); font-weight:700; margin-bottom:1.6rem; }
.faq-wrap{ max-width:720px; margin:0 auto; }
.faq-item{ border-bottom:1px solid #dcdcd6; }
.faq-q{ width:100%; background:none; border:none; cursor:pointer; font-family:inherit; font-size:.98rem; font-weight:700; color:var(--c-primary); padding:1rem 0; display:flex; justify-content:space-between; gap:1rem; text-align:left; }
.faq-q .chev{ transition:transform .2s; flex:0 0 auto; }
.faq-item.open .faq-q .chev{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; color:var(--c-muted-dark); font-size:.92rem; }
.faq-item.open .faq-a{ max-height:360px; padding:0 0 1rem; }

/* ---------- Footer ---------- */
footer{ background:var(--c-primary); padding:1.3rem 0 1.6rem; font-size:.82rem; color:var(--c-muted); position:relative; z-index:1; }
footer .wrap{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; justify-content:space-between; align-items:center; }
footer a{ color:var(--c-muted); text-decoration:none; }
footer a:hover{ color:#fff; }
footer nav{ display:flex; gap:1.1rem; }

/* ---------- Consent-Banner ---------- */
.consent{
  position:fixed; left:.75rem; right:.75rem; bottom:.75rem; z-index:9999;
  max-width:var(--wrap); margin:0 auto;
  background:#fff; color:var(--c-text);
  border-radius:var(--r-md); box-shadow:0 12px 40px rgba(0,0,0,.28);
  padding:1rem 1.1rem; display:none; flex-direction:column; gap:.8rem;
}
.consent.show{ display:flex; }
.consent p{ font-size:.84rem; line-height:1.45; }
.consent a{ color:var(--c-primary); font-weight:500; }
.consent .btns{ display:flex; gap:.6rem; }
.consent .btns button{ flex:1; font-family:inherit; font-weight:700; font-size:.9rem; cursor:pointer; border-radius:var(--r-full); padding:.7rem 1rem; border:1.5px solid var(--c-primary); }
.consent .accept{ background:var(--c-primary); color:#fff; }
.consent .decline{ background:#fff; color:var(--c-primary); }

/* =====================================================================
   DESKTOP (≥ 900px): 2 Spalten, Formular sichtbar → Hero-CTA verstecken
   ===================================================================== */
@media (min-width:900px){
  header{ padding:1.4rem 0; }
  header .logo{ height:40px; }
  main{ padding:1rem 0 3.5rem; }

  .hero{
    display:grid; grid-template-columns:1.05fr .95fr;
    gap:3rem; align-items:start;
  }
  .hero-copy{ display:flex; flex-direction:column; gap:1.1rem; }
  .hero-cta{ display:none; }                 /* Formular steht rechts → kein Sprung-CTA nötig */
  .hero-form{ position:sticky; top:1.5rem; }
  .form-card{ padding:1.8rem 1.6rem; }
  .trust{ flex-direction:column; gap:.55rem; }
  .trust li{ font-size:.98rem; color:var(--c-base); }
  .proof{ padding:2.4rem 0; }
  .proof .grid{ grid-template-columns:repeat(auto-fit,minmax(0,1fr)); }
  .proof b{ font-size:1.8rem; }
  .features{ padding:3.2rem 0 3.6rem; }
  .features-sub{ margin-bottom:2rem; }
  .plans{ grid-template-columns:1fr 1.12fr; align-items:start; }
  .plan{ padding:1.5rem 1.4rem; }
  .faq{ padding:3rem 0 3.5rem; }
  .consent{ flex-direction:row; align-items:center; left:1rem; right:1rem; bottom:1rem; padding:1.1rem 1.2rem; }
  .consent p{ flex:1; }
  .consent .btns{ flex:0 0 auto; }
  .consent .btns button{ flex:0 0 auto; padding:.7rem 1.3rem; }
}