/* Marketing Lama NL — Designsystem
   Dunkler Kopf und Fuß wie auf marketinglama.de, heller Lesebereich dazwischen. */

@font-face{
  font-family:"Inter Tight";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/assets/inter-tight-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter Tight";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/assets/inter-tight-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Die Seite bringt ihr eigenes helles Schema mit. Ohne diese Angabe rechnet Chrome
     sie im Auto-Dunkelmodus um und die Farben kippen. */
  color-scheme:light;

  --night:#16160F;
  --night-2:#20201A;
  --night-3:#2C2C23;
  --paper:#FAF9F2;
  --paper-2:#F1EFE2;
  --ink:#17170F;
  --ink-2:#43433A;
  --muted:#6C6C5D;
  --rule:#E2DFCE;
  --rule-dark:#33332A;
  --lama:#FBFB9A;
  --lama-deep:#63630F;
  --live:#FE2C55;

  --font:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --read:min(720px,100%);
  --wide:min(1120px,92vw);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* nur die seitlichen Abstaende setzen — sonst ueberschreibt .shell als Klasse
   das padding-top von main und der Abstand unter dem Kurzantwort-Kasten faellt weg */
.shell{width:var(--read);margin:0 auto;padding-inline:22px}

a{color:var(--lama-deep);text-decoration:underline;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--lama-deep);outline-offset:3px;border-radius:2px}

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

/* ---------- Kopfzeile ---------- */

.topbar{background:var(--night);color:#EDEDE2}
.topbar-in{
  width:var(--wide);margin:0 auto;padding:14px 22px;
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;
}
.nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-right:auto}
.nav a{
  color:#B4B4A2;text-decoration:none;font-size:.93rem;font-weight:500;
  padding:4px 0;border-bottom:2px solid transparent;
}
.nav a:hover{color:#EDEDE2}
.nav a[aria-current="page"]{color:var(--lama);border-bottom-color:var(--lama)}
@media (max-width:720px){
  .topbar-in{gap:10px 14px}
  .nav{width:100%;order:3;gap:2px 14px}
  .nav a{font-size:.86rem}
}
.wordmark{
  font-weight:700;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lama);text-decoration:none;white-space:nowrap;
}
.wordmark span{display:block;font-size:.5rem;letter-spacing:.22em;color:#8C8C78;font-weight:400}

.btn{
  display:inline-block;padding:11px 20px;border-radius:999px;
  font-weight:600;font-size:.92rem;text-decoration:none;white-space:nowrap;
  background:var(--lama);color:#16160F;border:1px solid var(--lama);
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px -8px rgba(0,0,0,.6);text-decoration:none}
.btn-ghost{background:transparent;color:var(--lama)}
.btn-ghost:hover{background:rgba(251,251,154,.1)}
.btn-lg{padding:15px 28px;font-size:1rem}

/* ---------- Held ---------- */

.hero{background:var(--night);color:#EDEDE2;padding:52px 0 60px}
.eyebrow{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lama);margin:0 0 18px;font-weight:600;
}
.hero h1{
  margin:0 0 20px;font-size:clamp(2.15rem,5.6vw,3.35rem);line-height:1.08;
  font-weight:700;letter-spacing:-.018em;text-wrap:balance;color:#FFFEF0;
}
.hero .lead{margin:0 0 30px;font-size:1.14rem;color:#C6C6B4;max-width:56ch;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-note{font-size:.84rem;color:#7E7E6C;margin:18px 0 0}

/* ---------- Kurzantwort (zitierbarer Block) ---------- */

.answer{
  background:var(--paper-2);
  border-left:3px solid var(--lama-deep);
  border-radius:0 12px 12px 0;
  padding:24px 26px;
  margin:-30px 0 0;
  position:relative;
  box-shadow:0 14px 34px -22px rgba(0,0,0,.45);
}
.answer h2{
  margin:0 0 10px;font-size:.74rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.answer p{margin:0;font-size:1.04rem;color:var(--ink);text-wrap:pretty}

/* ---------- Fließtext ---------- */

main{padding-top:56px}

section{padding:0 0 12px}
section + section{padding-top:44px}

h2{
  margin:0 0 14px;font-size:1.68rem;line-height:1.2;font-weight:700;
  letter-spacing:-.012em;text-wrap:balance;
}
h3{margin:26px 0 8px;font-size:1.08rem;font-weight:650;line-height:1.35}
p{margin:0 0 16px;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{font-weight:650}

.lede-2{font-size:1.06rem;color:var(--ink-2)}

ul.check,ul.plain{margin:0 0 18px;padding:0;list-style:none}
ul.check li,ul.plain li{position:relative;padding-left:26px;margin-bottom:9px}
ul.check li::before{
  content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;
  border-radius:2px;background:var(--lama);border:1px solid var(--lama-deep);
}
ul.plain li::before{
  content:"";position:absolute;left:6px;top:.72em;width:5px;height:5px;
  border-radius:50%;background:var(--muted);
}

/* ---------- Karten ---------- */

.cards{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 8px}
@media (min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.card{
  border:1px solid var(--rule);border-radius:12px;background:#fff;
  padding:20px 20px 18px;
}
.card .tag{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lama-deep);font-weight:600;margin:0 0 6px;
}
.card h3{margin:0 0 6px;font-size:1.06rem}
.card p{margin:0;font-size:.96rem;color:var(--ink-2)}

/* ---------- Zahlenblock ---------- */

.figures{
  display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:12px;overflow:hidden;margin:0 0 18px;
}
@media (min-width:560px){.figures{grid-template-columns:repeat(3,1fr)}}
.fig{background:#fff;padding:18px 18px 16px}
.fig .n{font-size:1.72rem;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.fig .l{font-size:.86rem;color:var(--muted);margin-top:2px}

/* ---------- Hinweisblock ---------- */

.note{
  border:1px solid var(--rule);border-left:3px solid var(--live);
  border-radius:0 12px 12px 0;background:#fff;padding:20px 22px;margin:0 0 18px;
}
.note h3{margin:0 0 8px;font-size:1.02rem}
.note p{font-size:.97rem;color:var(--ink-2)}

/* ---------- LIVE-Band ---------- */

.band-wrap{margin:36px 0 8px}
.band-intro{font-size:.9rem;color:var(--muted);margin:0 0 4px}
.ml-band{
  position:relative;margin:14px 0 0;width:var(--wide);
  margin-left:calc(50% - min(560px,46vw));overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.ml-band-track{
  display:flex;align-items:center;gap:20px;width:max-content;
  padding:22px 0 26px;animation:ml-slide 44s linear infinite;
}
.ml-phone{
  flex:none;width:168px;height:365px;margin:0;padding:4px;border-radius:23px;
  background:linear-gradient(157deg,#4a4a3e,#17170f 42%,#0b0b08 70%,#39392e);
  box-shadow:0 22px 40px -20px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4);
  animation:ml-turn 11s ease-in-out infinite;
  transform:perspective(900px) rotateY(-10deg);
}
.ml-phone img{width:100%;height:100%;border-radius:19px;object-fit:cover;background:#000}
@keyframes ml-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes ml-turn{
  0%,100%{transform:perspective(900px) rotateY(-10deg)}
  50%{transform:perspective(900px) rotateY(10deg)}
}
@media (max-width:767px){
  .ml-band-track{gap:14px}
  .ml-phone{width:128px;height:278px;border-radius:18px}
  .ml-phone img{border-radius:15px}
}
@media (prefers-reduced-motion:reduce){.ml-band-track,.ml-phone{animation:none}}

/* ---------- Marken ---------- */

.brands{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.brands li{
  border:1px solid var(--rule);border-radius:999px;padding:7px 14px;
  font-size:.88rem;color:var(--ink-2);background:#fff;
}

/* ---------- FAQ ---------- */

.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:16px 30px 16px 0;position:relative;
  font-weight:600;font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq .a{padding:0 0 18px;color:var(--ink-2)}
.faq .a p{margin:0 0 10px;font-size:.98rem}

/* ---------- Abschluss ---------- */

.cta{background:var(--night);color:#EDEDE2;margin-top:64px;padding:56px 0}
.cta h2{color:#FFFEF0;margin-bottom:12px;font-size:1.9rem}
.cta p{color:#C6C6B4;max-width:52ch;margin-bottom:26px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-mail{color:var(--lama);font-size:.95rem}

footer{background:var(--night-2);color:#8C8C78;padding:38px 0 46px;font-size:.88rem}
footer .cols{display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:640px){footer .cols{grid-template-columns:1.4fr 1fr}}
footer strong{color:#C6C6B4;font-weight:600;display:block;margin-bottom:4px}
footer a{color:#A8A894}
footer .legal{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule-dark);font-size:.8rem;color:#5E5E50}
footer p{margin:0 0 4px}

/* Zahlenstreifen als Beleg — direkt unter der Kurzantwort bzw. im Leistungsteil */
.proof{padding-bottom:0}
.proof .figures{margin-bottom:0}
.proof .fig .n{color:var(--lama-deep)}