@import url("https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;600;700&family=Karla:wght@400;500;700&display=swap");

/* ---------- 2. reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,svg{max-width:100%;display:block}
table{border-collapse:collapse;width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}

/* ---------- 3. :root ---------- */
:root{
  --bg-base:#F7EEDC;
  --bg-card:#FFFBF2;
  --accent:#A4371C;
  --highlight:#D99A1F;
  --text:#241A12;
  --muted:#6E5B4A;
  --border:#E0D2B8;

  /* surfaces that sit on the dark leather blocks — tokens, so no hex lives outside :root */
  --ink-1:#30200F;
  --ink-2:#50240F;
  --ink-3:#7A3312;
  --cta-1:#3A2411;
  --cta-2:#6B2F13;
  --on-dark:#FFF6E4;
  --on-dark-soft:#E8D6BA;
  --on-dark-mute:#C9B295;
  --on-dark-body:#E2CFB2;
  --on-dark-dim:#BFA98C;
  --on-dark-foot:#D9C9B4;
  --on-dark-link:#EBDCC4;
  --rule-dark:#4E3A27;
  --warn:#9C2B13;
  --warn-bg:#FBEBE4;
  --good:#2F6B46;
  --good-bg:#EAF3EC;

  --ff-display:"Zilla Slab",Georgia,serif;
  --ff-body:"Karla","Helvetica Neue",Arial,sans-serif;
  --rad:10px;
  --rad-sm:5px;
  --tr:180ms ease;
  --maxw:1180px;
}

/* ---------- 4. html / body / scrollbar ---------- */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg-base);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.68;
  padding-bottom:72px;
}
body::-webkit-scrollbar{width:11px}
body::-webkit-scrollbar-track{background:var(--bg-base)}
body::-webkit-scrollbar-thumb{background:var(--highlight);border-radius:6px}

/* ---------- 5. type scale ---------- */
p,li,dd,td,th{hyphens:auto}
h1,h2,h3,h4{font-family:var(--ff-display);line-height:1.17;overflow-wrap:anywhere;hyphens:auto;font-weight:700}
h1{font-size:2.05rem;letter-spacing:-.4px;margin-bottom:.5em}
h2{font-size:1.52rem;margin:2.1em 0 .62em}
h3{font-size:1.16rem;margin:1.5em 0 .42em}
p+p{margin-top:.9em}
p,ul,ol,figure,table,dl{margin-bottom:1.05em}
ul,ol{padding-left:1.25em}
li+li{margin-top:.3em}
strong{font-weight:700}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--highlight)}
small{font-size:.86rem;color:var(--muted)}

/* ---------- 6. container ---------- */
.q7v_wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 16px}
.q7v_col{max-width:800px}

/* ---------- 7. buttons ---------- */
.q7v_act{
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  min-height:48px;padding:12px 22px;
  font-family:var(--ff-display);font-weight:600;font-size:1rem;line-height:1.2;
  text-align:center;text-decoration:none;border-radius:var(--rad-sm);
  transition:transform var(--tr),box-shadow var(--tr),background var(--tr);
}
.q7v_act:hover{transform:translateY(-1px)}
.q7v_act--primary{background:var(--accent);color:var(--bg-card);box-shadow:0 2px 0 rgba(36,26,18,.28)}
.q7v_act--primary:hover{background:var(--text);color:var(--bg-card)}
.q7v_act--gold{background:var(--highlight);color:var(--text);box-shadow:0 2px 0 rgba(36,26,18,.28)}
.q7v_act--gold:hover{background:var(--accent);color:var(--bg-card)}
.q7v_act--outline{border:2px solid var(--accent);color:var(--accent);background:transparent}
.q7v_act--outline:hover{background:var(--accent);color:var(--bg-card)}
.q7v_act--ghost{color:var(--muted);text-decoration:underline;min-height:44px;padding:8px 2px}
.q7v_act--lg{min-height:54px;padding:15px 28px;font-size:1.08rem}
.q7v_act--full{display:flex;width:100%}

/* ---------- 8. nav + mobile nav ---------- */
.q7v_nav{border-bottom:2px solid var(--border);background:var(--bg-card);position:sticky;top:0;z-index:40}
.q7v_nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px}
.q7v_logo{display:flex;align-items:center;text-decoration:none}
.q7v_logo img{height:38px;width:auto}
.q7v_nav-links{display:none}
.q7v_nav-cta{display:none}
#lz-menu-knopf{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border:2px solid var(--border);border-radius:var(--rad-sm);
}
#lz-menu-knopf span{display:block;width:20px;height:2px;background:var(--text);position:relative}
#lz-menu-knopf span::before,#lz-menu-knopf span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--text)}
#lz-menu-knopf span::before{top:-6px}
#lz-menu-knopf span::after{top:6px}
#lz-menu{display:none;border-top:1px solid var(--border);padding:10px 0 16px}
#lz-menu.open{display:block}
#lz-menu a{
  display:block;padding:11px 2px;min-height:44px;
  font-family:var(--ff-display);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--border);
}
#lz-menu a:last-of-type{border-bottom:0}

/* ---------- 9. ticker / kicker strip ---------- */
.q7v_ribbon{background:var(--text);color:var(--bg-base);font-size:.82rem;letter-spacing:.4px}
.q7v_ribbon .q7v_wrap{display:flex;flex-wrap:wrap;gap:6px 18px;padding-top:7px;padding-bottom:7px;justify-content:center}
.q7v_ribbon b{color:var(--highlight);font-weight:700}

/* ---------- 10. hero — LAYOUT D (typographic giant H1) ---------- */
.q7v_top{padding:34px 0 10px;border-bottom:2px solid var(--border)}
.q7v_eyebrow{
  font-family:var(--ff-display);font-weight:600;letter-spacing:2.4px;text-transform:uppercase;
  font-size:.76rem;color:var(--accent);margin-bottom:.9em;
}
.q7v_giant{
  font-size:clamp(2.6rem,15vw,7.4rem);
  line-height:.94;letter-spacing:-2px;margin-bottom:.18em;
  text-transform:uppercase;
}
.q7v_giant em{font-style:normal;display:block;color:var(--accent)}
.q7v_intro{font-size:1.12rem;max-width:62ch}
.q7v_top-actions{display:flex;flex-direction:column;gap:11px;margin:20px 0 6px}

/* hero offer banner (CSS/SVG, no image) */
.q7v_deal{
  margin:22px 0 14px;padding:20px 18px;border-radius:var(--rad);
  background:
    repeating-linear-gradient(135deg,rgba(217,154,31,.1) 0 11px,transparent 11px 22px),
    linear-gradient(160deg,var(--ink-1) 0%,var(--ink-2) 58%,var(--ink-3) 100%);
  border:2px solid var(--highlight);color:var(--bg-base);position:relative;overflow:hidden;
}
.q7v_deal-tag{
  font-family:var(--ff-display);font-size:.74rem;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--highlight);margin-bottom:.5em;
}
.q7v_deal-fig{
  font-family:var(--ff-display);font-weight:700;line-height:1.02;
  font-size:clamp(1.85rem,8.4vw,2.9rem);color:var(--on-dark);margin-bottom:.22em;
}
.q7v_deal-fig b{color:var(--highlight);font-weight:700}
.q7v_deal-sub{font-size:1rem;color:var(--on-dark-soft);margin-bottom:14px}
.q7v_deal-fine{font-size:.8rem;color:var(--on-dark-mute);margin-top:12px;line-height:1.5}
.q7v_deal .q7v_act{margin-top:2px}

/* ---------- 11. trust bar ---------- */
.q7v_proof{display:grid;grid-template-columns:1fr;gap:9px;padding:18px 0}
.q7v_proof-item{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rad-sm);padding:11px 13px;
  font-size:.92rem;
}
.q7v_proof-item b{font-family:var(--ff-display);display:block;font-size:.98rem}
.q7v_proof-item svg{flex:0 0 auto;width:21px;height:21px;fill:var(--accent);margin-top:2px}

/* ---------- 12. content sections ---------- */
.q7v_sec{padding:8px 0 14px}
.q7v_sec--alt{background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:26px 0;padding:10px 0 22px}
.q7v_grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:1.1em}
.q7v_card{background:var(--bg-card);border:1px solid var(--border);border-left:4px solid var(--highlight);border-radius:var(--rad-sm);padding:16px 15px}
.q7v_card h3{margin-top:0}
.q7v_card p:last-child,.q7v_card ul:last-child{margin-bottom:0}

.q7v_box{border-left:4px solid var(--accent);background:var(--bg-card);border-radius:var(--rad-sm);padding:14px 15px;margin:1.2em 0;font-size:.96rem}
.q7v_box--warn{border-left-color:var(--warn);background:var(--warn-bg)}
.q7v_box--ok{border-left-color:var(--good);background:var(--good-bg)}
.q7v_box p:last-child{margin-bottom:0}
.q7v_box b{font-family:var(--ff-display)}

.q7v_toc{background:var(--bg-card);border:1px dashed var(--border);border-radius:var(--rad-sm);padding:14px 16px;margin-bottom:1.4em}
.q7v_toc ul{margin-bottom:0;list-style:none;padding-left:0}
.q7v_toc li{border-bottom:1px dotted var(--border);padding:5px 0}
.q7v_toc li:last-child{border-bottom:0}

/* tables */
.q7v_scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1.3em;border:1px solid var(--border);border-radius:var(--rad-sm);background:var(--bg-card)}
.q7v_grid-t{min-width:520px;font-size:.93rem}
.q7v_grid-t th,.q7v_grid-t td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.q7v_grid-t thead th{background:var(--text);color:var(--bg-base);font-family:var(--ff-display);font-weight:600;border-bottom:0}
.q7v_grid-t tbody tr:last-child td{border-bottom:0}
.q7v_grid-t tbody tr:nth-child(even){background:rgba(224,210,184,.26)}
.q7v_grid-t caption{caption-side:bottom;padding:9px 12px;font-size:.82rem;color:var(--muted);text-align:left}

/* steps */
.q7v_walk{counter-reset:q7v;list-style:none;padding-left:0}
.q7v_walk li{counter-increment:q7v;position:relative;padding:3px 0 14px 48px;border-left:2px solid var(--border);margin-left:15px}
.q7v_walk li::before{
  content:counter(q7v);position:absolute;left:-16px;top:0;
  width:31px;height:31px;border-radius:50%;background:var(--accent);color:var(--bg-card);
  font-family:var(--ff-display);font-weight:700;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
}
.q7v_walk li:last-child{border-left-color:transparent}

/* screenshots */
.q7v_snap{margin:1.3em 0;border:1px solid var(--border);border-radius:var(--rad-sm);overflow:hidden;background:var(--bg-card)}
.q7v_snap img{width:100%;height:auto}
.q7v_snap figcaption{padding:9px 13px;font-size:.84rem;color:var(--muted);border-top:1px solid var(--border)}

/* slots grid */
.q7v_slots{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:1.2em}
.q7v_slot{border:1px solid var(--border);border-radius:var(--rad-sm);overflow:hidden;background:var(--bg-card)}
.q7v_slot img{width:100%;height:auto;aspect-ratio:882/678;object-fit:cover}
.q7v_slot span{display:block;padding:8px 10px;font-family:var(--ff-display);font-weight:600;font-size:.88rem;line-height:1.3}
.q7v_slot small{display:block;padding:0 10px 9px;color:var(--muted);font-size:.78rem}
.q7v_slot--text{
  display:flex;flex-direction:column;justify-content:center;min-height:118px;padding:13px 12px;
  background:
    repeating-linear-gradient(135deg,rgba(217,154,31,.12) 0 9px,transparent 9px 18px),
    var(--bg-card);
  border-left:4px solid var(--highlight);
}
.q7v_slot--text b{font-family:var(--ff-display);font-size:.95rem;line-height:1.25}
.q7v_slot--text small{padding:4px 0 0}

/* payment + provider chips */
.q7v_pays{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.2em;padding-left:0;list-style:none}
.q7v_pay{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--border);background:var(--bg-card);border-radius:var(--rad-sm);
  padding:8px 12px;font-size:.88rem;font-weight:500;
}
.q7v_pay svg{width:17px;height:17px;fill:var(--accent);flex:0 0 auto}
.q7v_pay--off{opacity:.55;text-decoration:line-through}
.q7v_studio{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--border);border-bottom:3px solid var(--highlight);
  background:var(--bg-card);border-radius:var(--rad-sm);padding:9px 13px;
  font-family:var(--ff-display);font-weight:600;font-size:.9rem;
}
.q7v_studio svg{width:16px;height:16px;fill:var(--highlight)}

/* key-facts list */
.q7v_steckbrief{list-style:none;padding-left:0;border:1px solid var(--border);border-radius:var(--rad-sm);background:var(--bg-card)}
.q7v_steckbrief li{display:flex;flex-wrap:wrap;gap:4px 10px;padding:10px 14px;border-bottom:1px solid var(--border);margin:0}
.q7v_steckbrief li:last-child{border-bottom:0}
.q7v_steckbrief b{font-family:var(--ff-display);min-width:160px;flex:0 0 auto}

/* ---------- 13. FAQ accordion ---------- */
.q7v_qa{border-top:2px solid var(--border);margin-bottom:1.3em}
.q7v_q{border-bottom:1px solid var(--border)}
.q7v_q-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  width:100%;text-align:left;padding:15px 2px;min-height:48px;
  font-family:var(--ff-display);font-weight:600;font-size:1.02rem;line-height:1.35;
}
.q7v_q-head::after{content:"+";font-size:1.5rem;line-height:1;color:var(--accent);flex:0 0 auto;transition:transform var(--tr)}
.q7v_q.open .q7v_q-head::after{content:"–";transform:rotate(180deg)}
.q7v_q-body{display:none;padding:0 2px 16px;font-size:.97rem}
.q7v_q.open .q7v_q-body{display:block}
.q7v_q-body p:last-child,.q7v_q-body ul:last-child{margin-bottom:0}

/* ---------- 14. CTA band ---------- */
.q7v_closer{
  margin:30px 0;padding:24px 18px;border-radius:var(--rad);
  background:linear-gradient(155deg,var(--cta-1) 0%,var(--cta-2) 100%);
  border:2px solid var(--highlight);color:var(--bg-base);text-align:center;
}
.q7v_closer h2{color:var(--on-dark);margin-top:0;font-size:1.42rem}
.q7v_closer p{color:var(--on-dark-body);max-width:56ch;margin-left:auto;margin-right:auto}
.q7v_closer .q7v_act{margin-top:6px}
.q7v_closer small{color:var(--on-dark-dim);display:block;margin-top:12px}

/* ---------- 15. footer ---------- */
.q7v_foot{background:var(--text);color:var(--on-dark-foot);margin-top:34px;padding:28px 0 26px;font-size:.9rem}
.q7v_foot a{color:var(--on-dark-link)}
.q7v_foot a:hover{color:var(--highlight)}
.q7v_foot h2,.q7v_foot h3{color:var(--on-dark);font-size:1rem;margin:0 0 .6em}
.q7v_foot-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-bottom:22px}
.q7v_foot-grid ul{list-style:none;padding-left:0;margin-bottom:0}
.q7v_foot-grid li{margin-top:.34em}
.q7v_marks{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding-left:0;margin:0 0 18px}
.q7v_mark{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--rule-dark);border-radius:var(--rad-sm);padding:7px 11px;
  font-size:.82rem;text-decoration:none;min-height:38px;
}
.q7v_mark:hover{border-color:var(--highlight)}
.q7v_mark svg{width:15px;height:15px;fill:var(--highlight);flex:0 0 auto}
.q7v_mark--age{background:var(--highlight);color:var(--text);font-weight:700;border-color:var(--highlight)}
.q7v_updated{color:var(--on-dark-dim);font-size:.86rem;margin-bottom:.6em}
.q7v_disc{border-top:1px solid var(--rule-dark);padding-top:16px;color:var(--on-dark-dim);font-size:.84rem;line-height:1.6}
.q7v_disc p+p{margin-top:.6em}

/* ---------- 16. sticky mobile CTA ---------- */
.q7v_dock{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--bg-card);border-top:2px solid var(--highlight);
  padding:9px 14px calc(9px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:12px;
  box-shadow:0 -3px 14px rgba(36,26,18,.14);
}
.q7v_dock-txt{font-size:.83rem;line-height:1.32;flex:1 1 auto}
.q7v_dock-txt b{font-family:var(--ff-display);display:block;font-size:.95rem}
.q7v_dock .q7v_act{flex:0 0 auto;min-height:44px;padding:10px 18px}

/* ---------- 17. animations ---------- */
@keyframes q7v-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.q7v_top,.q7v_deal{animation:q7v-rise 420ms ease both}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- 18. responsive ---------- */
@media (min-width:480px){
  .q7v_slots{grid-template-columns:repeat(2,1fr)}
  .q7v_top-actions{flex-direction:row;flex-wrap:wrap}
  .q7v_top-actions .q7v_act{flex:1 1 auto}
  .q7v_deal{padding:26px 24px}
}
@media (min-width:768px){
  body{font-size:18px;padding-bottom:0}
  h1{font-size:2.5rem}
  h2{font-size:1.78rem}
  .q7v_wrap{padding:0 26px}
  .q7v_nav-links{display:flex;align-items:center;gap:19px}
  .q7v_nav-links a{font-family:var(--ff-display);font-weight:600;font-size:.94rem;text-decoration:none}
  .q7v_nav-links a:hover{color:var(--accent)}
  #lz-menu-knopf,#lz-menu{display:none!important}
  .q7v_dock{display:none}
  .q7v_proof{grid-template-columns:repeat(2,1fr)}
  .q7v_grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .q7v_slots{grid-template-columns:repeat(4,1fr)}
  .q7v_foot-grid{grid-template-columns:repeat(3,1fr);gap:30px}
  .q7v_top{padding:50px 0 18px}
  .q7v_closer{padding:34px 30px}
}
@media (min-width:1024px){
  .q7v_nav-cta{display:inline-flex}
  .q7v_top{display:grid;grid-template-columns:1fr 400px;gap:42px;align-items:start;padding:62px 0 26px}
  .q7v_top-main{min-width:0}
  .q7v_deal{margin-top:6px}
  .q7v_giant{font-size:clamp(4rem,7.6vw,7.4rem)}
  .q7v_proof{grid-template-columns:repeat(4,1fr)}
  .q7v_sec{padding:10px 0 20px}
  .q7v_grid-t{min-width:0}
}