/* ==========================================================================
   Website-Briefing — Smart Marketers / Victoria Thaller
   Tokens grounded in vitha-88/Smart-Marketers-Hostinger public/styles.css
   (via the exported Smart Marketers Design System bundle).
   ========================================================================== */

@font-face{font-family:"Space Grotesk";src:url("../assets/fonts/space-grotesk.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:block}
@font-face{font-family:"Montserrat";src:url("../assets/fonts/montserrat.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:block}

:root{
  /* Tinte / Text */
  --ink:#222222;--ink-soft:#3c3c3c;--ink-muted:#6d6d6d;
  /* Flächen */
  --paper:#ffffff;--white:#ffffff;--highlight:#edefe9;--line:#e9e7de;--dark:#1b1b1b;
  /* Primärakzent (CTA) */
  --bronze:#fcbb58;--bronze-hover:#f4ad3d;--bronze-dark:#8d5da0;--bronze-soft:#f8f7ee;
  /* Sekundärakzent — AI / Angebote */
  --lilac:#d8b4e2;--lilac-dark:#8d5da0;--lilac-soft:#f6eef9;
  /* Negativ */
  --negativ:#b0533f;

  --font-display:"Space Grotesk","Segoe UI",Arial,sans-serif;
  --font-body:"Montserrat",-apple-system,"Segoe UI",Roboto,sans-serif;

  --fs-eyebrow:0.78rem;--fs-small:0.9rem;--fs-body:1rem;
  --lh-body:1.75;--lh-heading:1.15;
  --ls-heading:-0.015em;--ls-eyebrow:0.16em;

  --maxw-text:720px;
  --radius:8px;--radius-pill:999px;

  --shadow-card-hover:0 6px 20px rgba(34,34,34,0.06);
  --dur-fast:0.12s;--dur-base:0.15s;--ease:ease;
  --transition-btn:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);
  --transition-chip:all var(--dur-fast) var(--ease);
}

*,*::before,*::after{box-sizing:border-box}

/* [hidden] muss immer greifen - auch bei Elementen mit eigenem display
   (Krumel-Leiste, Footer-Navigation, Buttons). */
[hidden]{display:none!important}

html{scroll-behavior:smooth;scrollbar-gutter:stable}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink-soft);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--ink);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
  margin:0 0 12px;
}
h2{font-size:clamp(1.55rem,3vw,2.2rem)}
h3{font-size:1.22rem}

img{max-width:100%;display:block}

button{font:inherit}

/* ---------- Page shell ---------- */

.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.wrap{
  width:min(92vw,720px);
}

/* ---------- Top bar ---------- */

.topbar{
  width:100%;
  display:flex;
  justify-content:center;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.brand-row{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;transition:opacity var(--dur-base) var(--ease)}
a.brand-row:hover{opacity:0.7}
.brand-logo{height:38px;width:38px;object-fit:contain}
.brand-name-col{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--ink)}
.brand-sub{font-size:0.6rem;font-weight:500;color:var(--ink-muted);letter-spacing:0.14em;margin-top:2px}

/* ---------- Step icon breadcrumb ---------- */

.crumb-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  background:var(--highlight);
}
.crumb-inner{
  width:min(92vw,720px);
  display:flex;
  flex-wrap:wrap;
  gap:18px 14px;
  align-items:flex-start;
  justify-content:flex-start;
}
.step-icon{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  width:68px;
  padding:0;
  cursor:default;
}
.step-icon.is-clickable{cursor:pointer}
.step-icon-circle{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:0.9rem;
  background:#fff;color:var(--ink-muted);
  border:1.5px solid var(--line);
}
.step-icon.is-current .step-icon-circle,
.step-icon.is-done .step-icon-circle{
  background:var(--bronze);
  color:var(--ink);
  border:none;
}
.step-icon.is-current .step-icon-circle{border:2px solid var(--ink)}
.step-icon-label{font-size:0.68rem;color:var(--ink-muted);font-weight:500;text-align:center;line-height:1.2}
.step-icon.is-current .step-icon-label{color:var(--ink);font-weight:600}

/* ---------- Main ---------- */

.main{width:min(92vw,720px);padding:48px 0 110px}
.step{display:none}
.step.is-active{display:block}

.intro{font-size:1.02rem;margin:0 0 32px;max-width:58ch}

.field{margin-bottom:30px}
.field-sm{margin-bottom:20px}
.field-sm-last{margin-bottom:4px}

label.field-label{
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.95rem;
  color:var(--ink);
  margin-bottom:6px;
  display:block;
}
.field-helper{font-size:0.86rem;color:var(--ink-muted);margin:0 0 10px;line-height:1.5}
.req{color:var(--negativ);font-weight:700}
.field-error{font-size:0.86rem;color:var(--negativ);margin:8px 0 0;line-height:1.5}
.tf.is-invalid{border-color:var(--negativ);outline-color:var(--negativ)}
.indent{margin-top:14px}

/* ---------- Inputs ---------- */

.tf{width:100%;box-sizing:border-box;font-family:var(--font-body);border:1px solid var(--line);background:var(--highlight);color:var(--ink);border-radius:var(--radius);padding:12px 14px;font-size:0.95rem}
.tf:focus{outline:2px solid var(--bronze);outline-offset:1px}
textarea.tf{min-height:90px;resize:vertical;line-height:1.55}
.tf-labeled label{display:block;font-weight:600;color:var(--ink);font-size:var(--fs-small);margin:0 0 6px}

/* ---------- Buttons ---------- */

.btn{
  display:inline-block;
  padding:13px 28px;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.96rem;
  line-height:1.3;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:var(--transition-btn);
  border:none;
  background:none;
}
.btn-primary{background:var(--bronze);color:var(--ink)}
.btn-primary:hover{background:var(--bronze-hover)}
.btn-outline{border:1.5px solid var(--ink);background:transparent;color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn:disabled{opacity:0.5;cursor:not-allowed}

/* Pill choice (radio-style) */
.pill-row{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  padding:10px 20px;border-radius:var(--radius-pill);
  border:1.5px solid var(--line);background:#fff;color:var(--ink);
  font-weight:600;cursor:pointer;font-size:0.9rem;font-family:var(--font-body);
  transition:var(--transition-btn);white-space:nowrap;flex-shrink:0;
}
.pill.is-selected{border-color:var(--ink);background:var(--ink);color:#fff}

/* Chip multi-select */
.chip-row{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  padding:10px 20px;border-radius:var(--radius-pill);
  border:1.5px solid var(--line);background:#fff;color:var(--ink);
  font-weight:600;cursor:pointer;font-size:0.9rem;font-family:var(--font-body);
  transition:var(--transition-chip);white-space:nowrap;flex-shrink:0;
}
.chip.is-checked{border-color:var(--ink);background:var(--ink);color:#fff}

/* Eyebrow */
.eyebrow{
  font-family:var(--font-display);font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--bronze-dark);
  margin:0 0 18px;
}

/* ---------- Cards (team members / offers) ---------- */

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 6px;margin-bottom:18px}
.card-head-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.card-kicker{font-family:var(--font-display);font-size:0.72rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--bronze-dark)}
.card-kicker--offer{color:var(--lilac-dark)}
.remove-btn{border:none;background:none;color:var(--ink-muted);font-size:0.82rem;cursor:pointer;text-decoration:underline;flex-shrink:0;font-family:var(--font-body);padding:0}
.add-btn{border:none;background:none;color:var(--bronze-dark);font-weight:600;font-size:0.92rem;cursor:pointer;padding:4px 0;font-family:var(--font-body);display:inline-block;margin-bottom:24px}

/* ---------- Lists / grids ---------- */

.list-row{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.list-row .tf{flex:1}

.two-col{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 16px;margin-bottom:18px}
.social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:18px 16px;margin-bottom:30px}
.section-divider{font-size:0.8rem;color:var(--ink-muted);margin:10px 0 18px;padding-top:18px;border-top:1px solid var(--line)}

.big-divider-wrap{margin-top:8px;margin-bottom:22px;padding-top:28px;border-top:2px solid var(--line)}
.big-divider{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--ink);margin:0}

/* ---------- File upload ---------- */

.file-label{display:inline-flex;align-items:center;gap:10px;border:1.5px dashed var(--line);border-radius:var(--radius);padding:12px 16px;cursor:pointer;font-size:0.88rem;color:var(--ink-muted);margin-top:10px}
.file-label input[type="file"]{display:none}
.file-warning{font-size:0.86rem;color:var(--negativ);margin:8px 0 0;line-height:1.5}

/* ---------- Footer nav ---------- */

.footer-nav{
  position:fixed;bottom:0;left:0;right:0;background:#fff;
  border-top:1px solid var(--line);display:flex;justify-content:center;padding:16px 0;
  z-index:10;
}
.footer-nav-inner{width:min(92vw,720px);display:flex;justify-content:space-between;align-items:center}

/* ---------- Final step ---------- */

.final-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}
.status-note{font-size:0.86rem;color:var(--ink-muted);margin-top:16px}
.status-note.is-error{color:var(--negativ)}

/* ---------- Responsive ---------- */

@media (max-width:640px){
  .two-col{grid-template-columns:1fr}
  .main{padding:32px 0 130px}
  .card{padding:20px 18px 4px}
}