/* heads-strategie.de - gemeinsames Stylesheet fuer alle statischen Tool-Seiten.
   Clientseitig, kein Tracking. Dark-Theme, eine Quelle der Wahrheit.
   Optik an heads.biz angelehnt (deep-indigo Hintergrund, Signal-Gruen, Epilogue).
   Epilogue ist lokal eingebunden (kein Google-Fonts-CDN) -> keine externen Aufrufe. */

@font-face{
  font-family:'Epilogue';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('epilogue-latin.woff2') format('woff2');
}

:root{
  --bg:#0A0B1A; --panel:#12142b; --panel2:#181b34; --line:#262a45;
  --line-soft:rgba(255,255,255,.10);
  --text:#E7ECF3; --muted:#94A3B8; --accent:#0ED869; --accent-dk:#0DB85E; --accent2:#34E78A;
  --good:#0ED869; --bad:#FF4D4D; --warn:#F5B544;
  --radius:16px; --maxw:1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 540px at 78% -120px, rgba(14,216,105,.07), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:'Epilogue',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.muted{color:var(--muted)}

/* ---------- Header / Nav ---------- */
header.site{padding:16px 0; border-bottom:1px solid var(--line-soft);
  background:rgba(10,11,26,.7); backdrop-filter:blur(14px); position:sticky; top:0; z-index:50}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px}
.brand.logo,.brand .logo{display:inline-flex; align-items:center}
.brand.logo img{height:32px; width:auto; display:block}
.brand.logo:hover{text-decoration:none}
nav.tools{display:flex; gap:4px; flex-wrap:wrap}
nav.tools a{color:var(--muted); font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; padding:7px 12px; border-radius:9px; border:1px solid transparent; transition:color .15s, background .15s}
nav.tools a:hover{color:var(--text); background:rgba(255,255,255,.05); text-decoration:none}
nav.tools a.active{color:var(--accent); background:rgba(14,216,105,.10); border-color:rgba(14,216,105,.30)}

/* ---------- Hero ---------- */
.hero{padding:54px 0 26px}
.hero h1{font-size:40px; font-weight:900; line-height:1.04; margin:0 0 16px; letter-spacing:-.035em;
  color:#fff;
  background:linear-gradient(180deg,#ffffff 0%,#c9d4e3 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.hero p.lead{font-size:18px; color:var(--muted); max-width:680px; margin:0}
.badge{display:inline-block; background:rgba(14,216,105,.10); color:var(--accent);
  border:1px solid rgba(14,216,105,.30); padding:5px 13px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:20px}
@media(max-width:820px){ .hero{padding:38px 0 20px} .hero h1{font-size:29px} }

/* ---------- Cards / Grid ---------- */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:18px 0 8px}
@media(max-width:820px){ .grid{grid-template-columns:1fr} }
.card{background:rgba(255,255,255,.025); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:24px; box-shadow:0 20px 40px -28px rgba(0,0,0,.6)}
.card h2{font-size:13px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin:0 0 16px; font-weight:700}

/* Tool-Kacheln auf der Startseite */
.toolgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:26px 0 8px}
@media(max-width:820px){ .toolgrid{grid-template-columns:1fr} }
a.tool{display:block; background:rgba(255,255,255,.025); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:24px; color:var(--text);
  transition:border-color .18s, transform .18s, box-shadow .18s}
a.tool:hover{text-decoration:none; border-color:rgba(14,216,105,.45); transform:translateY(-4px);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.7), 0 0 28px rgba(14,216,105,.06)}
a.tool .ic{font-size:24px; margin-bottom:12px; display:block}
a.tool h3{margin:0 0 6px; font-size:19px; font-weight:800; letter-spacing:-.01em}
a.tool p{margin:0; color:var(--muted); font-size:14px}
a.tool .go{display:inline-block; margin-top:14px; color:var(--accent); font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em}

/* ---------- Formularfelder ---------- */
.field{margin-bottom:14px}
.field label{display:block; font-size:14px; margin-bottom:6px; color:var(--text)}
.field .hint{color:var(--muted); font-size:12px; font-weight:400}
.inrow{display:flex; align-items:center; gap:8px}
.inrow input{
  flex:1; background:rgba(0,0,0,.25); border:1px solid var(--line); color:var(--text);
  border-radius:10px; padding:11px 12px; font-size:16px; width:100%; font-family:inherit;
}
.inrow input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,216,105,.15)}
.inrow .unit{color:var(--muted); font-size:15px; min-width:22px; text-align:left}

/* ---------- Ergebnis-Block ---------- */
.result-head{display:flex; flex-direction:column; gap:4px; margin-bottom:18px}
.result-head .big{font-size:48px; font-weight:900; letter-spacing:-.03em; line-height:1}
.result-head .big.good{color:var(--good)} .result-head .big.bad{color:var(--bad)} .result-head .big.warn{color:var(--warn)}
.result-head .sub{color:var(--muted); font-size:14px}
.kpis{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px}
.kpi{background:rgba(255,255,255,.03); border:1px solid var(--line-soft); border-radius:12px; padding:12px 14px}
.kpi .v{font-size:22px; font-weight:800; letter-spacing:-.01em}
.kpi .v.good{color:var(--good)} .kpi .v.bad{color:var(--bad)} .kpi .v.warn{color:var(--warn)}
.kpi .l{color:var(--muted); font-size:12px; margin-top:2px}
.verdict{border-radius:12px; padding:13px 15px; font-size:14px; border:1px solid var(--line-soft); background:rgba(255,255,255,.03)}
.verdict.good{border-color:rgba(14,216,105,.35); background:rgba(14,216,105,.08)}
.verdict.bad{border-color:rgba(255,77,77,.35); background:rgba(255,77,77,.08)}
.verdict.warn{border-color:rgba(245,181,68,.35); background:rgba(245,181,68,.08)}

/* ---------- Tabellen ---------- */
table.data{width:100%; border-collapse:collapse; margin-top:6px; font-size:14px}
table.data th,table.data td{padding:9px 8px; text-align:right; border-bottom:1px solid var(--line-soft)}
table.data th:first-child,table.data td:first-child{text-align:left}
table.data th{color:var(--muted); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em}
table.data tr.be td{background:rgba(255,255,255,.04); font-weight:700}
td.pos{color:var(--good)} td.neg{color:var(--bad)} td.warnc{color:var(--warn)}

/* Editierbare Kampagnen-Tabelle (PPC-Check) */
table.edit{width:100%; border-collapse:collapse; font-size:14px}
table.edit th,table.edit td{padding:6px 6px; border-bottom:1px solid var(--line-soft); text-align:right}
table.edit th:first-child,table.edit td:first-child{text-align:left}
table.edit th{color:var(--muted); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em}
table.edit input{background:rgba(0,0,0,.25); border:1px solid var(--line); color:var(--text);
  border-radius:8px; padding:8px 9px; font-size:14px; width:100%; text-align:right; font-family:inherit}
table.edit input.name{text-align:left}
table.edit input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,216,105,.15)}
table.edit td.calc{font-variant-numeric:tabular-nums; white-space:nowrap}
.rowbtn{background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; line-height:1; padding:0 4px}
.rowbtn:hover{color:var(--bad)}
.btn-ghost{display:inline-block; margin-top:12px; background:rgba(255,255,255,.04); color:var(--text);
  border:1px solid var(--line-soft); border-radius:10px; padding:9px 16px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit}
.btn-ghost:hover{border-color:rgba(14,216,105,.45)}

/* ---------- Hebel-Liste ---------- */
.levers{margin-top:30px}
.levers h2{font-size:24px; font-weight:800; letter-spacing:-.02em; margin:0 0 6px}
.levers p.sub{color:var(--muted); margin:0 0 18px}
.lever{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-soft)}
.lever .n{flex:0 0 36px; height:36px; width:36px; border-radius:10px; background:rgba(14,216,105,.10);
  border:1px solid rgba(14,216,105,.25); color:var(--accent); font-weight:800; display:flex;
  align-items:center; justify-content:center; font-size:15px}
.lever h3{margin:2px 0 4px; font-size:16px; font-weight:700}
.lever p{margin:0; color:var(--muted); font-size:14px}

/* ---------- CTA ---------- */
.cta{margin:36px 0 10px; background:
    radial-gradient(600px 220px at 0% 0%, rgba(14,216,105,.10), transparent 70%),
    rgba(255,255,255,.025);
  border:1px solid rgba(14,216,105,.30); border-radius:var(--radius); padding:28px}
.cta h2{margin:0 0 8px; font-size:23px; font-weight:800; letter-spacing:-.02em}
.cta p{margin:0 0 18px; color:var(--muted); max-width:640px}
.btn{display:inline-block; background:linear-gradient(135deg,var(--accent),var(--accent-dk)); color:#06210f; font-weight:800;
  padding:13px 22px; border-radius:11px; font-size:15px; letter-spacing:.01em;
  box-shadow:0 6px 22px rgba(14,216,105,.22), inset 0 1px 1px rgba(255,255,255,.3)}
.btn:hover{text-decoration:none; transform:translateY(-2px); box-shadow:0 10px 30px rgba(14,216,105,.4)}

/* ---------- Footer ---------- */
footer.site{margin-top:46px; border-top:1px solid var(--line-soft); padding:24px 0 54px; color:var(--muted); font-size:13px}
footer.site a{color:var(--muted)}
footer.site a:hover{color:var(--text)}
footer.site .row{display:flex; gap:18px; flex-wrap:wrap; align-items:center; justify-content:space-between}
.priv{font-size:12px; margin-top:10px}

/* ---------- Rechtstexte (Impressum/Datenschutz) ---------- */
.legal{max-width:760px}
.legal h1{font-size:30px; font-weight:900; letter-spacing:-.02em; margin:0 0 22px}
.legal h2{font-size:14px; margin:26px 0 6px; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; font-weight:700}
.legal p{margin:0 0 10px}
.legal .ph{color:var(--warn)}

/* ---------- Buchung / Kalender (Strategiegespraech) ---------- */
.cal-box{max-width:820px}
.cal-consent{text-align:center; padding:26px 20px}
.cal-consent .ic{font-size:34px; display:block; margin-bottom:10px}
.cal-consent p{color:var(--muted); max-width:580px; margin:0 auto 16px; font-size:14px}
.cal-consent .btn{cursor:pointer}
.cal-alt{font-size:13px}
.cal-mount{min-height:680px}
.tidycal-embed{min-height:680px; width:100%}