/* ============================================================================
   Q4 Track — Marketing-Site (site.css)
   Q4 media AG · Stand 2026-09 · Aufsatz auf /assets/ds.css
   Gleiche Tokens wie die App, nur groesserer Massstab und mehr Weissraum.
   Praefix: .mk-  ·  ds.css wird nie veraendert.
   ========================================================================== */

/* --- 1. Marketing-Massstab -------------------------------------------------- */
:root{
  --mk-fs:15px;          /* Basis Marketing (App: 13) */
  --mk-fs-lead:17px;
  --mk-fs-h3:17px;
  --mk-fs-h2:28px;
  --mk-fs-h1:44px;       /* Hero-Obergrenze laut Design-Brief */
  --mk-wrap:1120px;
  --mk-gutter:24px;
  --mk-top-h:56px;
}
@media (max-width:760px){ :root{ --mk-gutter:16px } }

body.mk{
  font-size:var(--mk-fs);
  background:var(--ds-bg);
  overflow-x:hidden;
}
.mk *,.mk *::before,.mk *::after{box-sizing:border-box}

.mk-wrap{width:100%;max-width:var(--mk-wrap);margin:0 auto;padding:0 var(--mk-gutter)}
.mk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mk-skip{position:absolute;left:-9999px;top:0;z-index:100}
.mk-skip:focus{left:var(--mk-gutter);top:8px;background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-sm);padding:6px 10px}

/* --- 2. Topbar -------------------------------------------------------------- */
.mk-top{
  position:sticky;top:0;z-index:var(--ds-z-topbar);
  background:var(--ds-bg);border-bottom:1px solid var(--ds-line);
}
.mk-top-in{display:flex;align-items:center;gap:var(--ds-4);height:var(--mk-top-h)}
.mk-brand{display:flex;align-items:center;gap:var(--ds-2);color:var(--ds-text);font-weight:600;font-size:var(--ds-fs-lg);letter-spacing:-.01em}
.mk-brand:hover{text-decoration:none}
.mk-brand img{width:24px;height:24px;border-radius:var(--ds-r-sm)}
.mk-nav{display:flex;align-items:center;gap:var(--ds-5);margin-left:auto}
.mk-nav a{color:var(--ds-text-2);font-size:var(--ds-fs-md);font-weight:400}
.mk-nav a:hover{color:var(--ds-text);text-decoration:none}
.mk-nav a.is-on{color:var(--ds-text);font-weight:500}
.mk-nav .ds-btn{font-size:var(--ds-fs-md)}
@media (max-width:820px){
  .mk-nav{gap:var(--ds-3);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mk-nav::-webkit-scrollbar{display:none}
  .mk-nav a{font-size:var(--ds-fs-base);white-space:nowrap}
}
/* Auf schmalen Geraeten nur die Seiten, keine Abschnitts-Anker */
@media (max-width:620px){ .mk-nav-sec{display:none} }

/* --- 3. Abschnitte ---------------------------------------------------------- */
.mk-sec{padding:var(--ds-16) 0}
.mk-sec--tight{padding:var(--ds-12) 0}
.mk-sec--sub{background:var(--ds-bg-sub);border-top:1px solid var(--ds-line);border-bottom:1px solid var(--ds-line)}
@media (max-width:760px){ .mk-sec{padding:var(--ds-10) 0} .mk-sec--tight{padding:var(--ds-8) 0} }

.mk-eyebrow{
  display:block;margin-bottom:var(--ds-3);
  font-size:var(--ds-fs-label);letter-spacing:var(--ds-track-label);
  text-transform:uppercase;color:var(--ds-accent);font-weight:500;
}
.mk-h1{font-size:clamp(30px,5.4vw,var(--mk-fs-h1));font-weight:600;line-height:1.1;letter-spacing:-.022em;color:var(--ds-text)}
.mk-h2{font-size:clamp(22px,3.4vw,var(--mk-fs-h2));font-weight:600;line-height:1.2;letter-spacing:-.018em;color:var(--ds-text)}
.mk-h3{font-size:var(--mk-fs-h3);font-weight:600;line-height:1.3;letter-spacing:-.008em;color:var(--ds-text)}
.mk-h4{font-size:var(--ds-fs-md);font-weight:500;color:var(--ds-text)}
.mk-lead{font-size:var(--mk-fs-lead);line-height:1.55;color:var(--ds-text-2);max-width:62ch}
.mk-p{color:var(--ds-text-2);line-height:1.6;max-width:68ch}
.mk-p + .mk-p{margin-top:var(--ds-3)}
.mk-sec-head{max-width:72ch;margin-bottom:var(--ds-8)}
.mk-sec-head .mk-p,.mk-sec-head .mk-lead{margin-top:var(--ds-3)}
@media (max-width:760px){ .mk-sec-head{margin-bottom:var(--ds-6)} }

/* --- 4. Hero ---------------------------------------------------------------- */
.mk-hero{padding:var(--ds-16) 0 var(--ds-12);border-bottom:1px solid var(--ds-line)}
.mk-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--ds-12);align-items:center}
.mk-hero .mk-lead{margin-top:var(--ds-4)}
.mk-hero-art{color:var(--ds-text-3)}
.mk-hero-art img,.mk-hero-art svg{display:block;width:100%;height:auto;max-width:360px;margin-left:auto}
@media (max-width:900px){
  .mk-hero{padding:var(--ds-10) 0 var(--ds-8)}
  .mk-hero-grid{grid-template-columns:1fr;gap:var(--ds-8)}
  .mk-hero-art img,.mk-hero-art svg{margin:0 auto;max-width:300px}
}
.mk-actions{display:flex;flex-wrap:wrap;gap:var(--ds-2);margin-top:var(--ds-6)}
.mk-actions .ds-btn{height:36px;padding:0 var(--ds-4);font-size:var(--ds-fs-md)}
.mk-note{margin-top:var(--ds-3);font-size:var(--ds-fs-sm);color:var(--ds-text-3)}

/* Kennzahlen-Leiste unter dem Hero */
.mk-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border-top:1px solid var(--ds-line)}
.mk-fact{padding:var(--ds-4) var(--ds-4) var(--ds-4) 0}
.mk-fact + .mk-fact{border-left:1px solid var(--ds-line);padding-left:var(--ds-4)}
.mk-fact b{display:block;font-family:var(--ds-font-mono);font-size:var(--ds-fs-xl);font-weight:500;letter-spacing:-.02em;color:var(--ds-text)}
.mk-fact span{display:block;margin-top:2px;font-size:var(--ds-fs-sm);color:var(--ds-text-3)}
@media (max-width:640px){
  .mk-facts{grid-template-columns:1fr 1fr}
  .mk-fact{padding:var(--ds-3) var(--ds-3) var(--ds-3) 0}
  .mk-fact:nth-child(odd){border-left:0;padding-left:0}
  .mk-fact:nth-child(n+3){border-top:1px solid var(--ds-line)}
}

/* --- 5. Raster + Karten ------------------------------------------------------ */
.mk-cols{display:grid;gap:var(--ds-6)}
.mk-cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mk-cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mk-cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){ .mk-cols--4{grid-template-columns:repeat(2,minmax(0,1fr))} .mk-cols--3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:720px){ .mk-cols--2,.mk-cols--3,.mk-cols--4{grid-template-columns:1fr} .mk-cols{gap:var(--ds-4)} }

.mk-card{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-md);padding:var(--ds-6)}
.mk-card .mk-h3{margin-bottom:var(--ds-2)}
.mk-card p{color:var(--ds-text-2);line-height:1.6}
.mk-card--plain{background:none;border:0;padding:0}

/* Wertversprechen mit Akzentlinie statt Icon-Kreisen */
.mk-value{border-top:2px solid var(--ds-accent);padding-top:var(--ds-4)}
.mk-value .mk-h3{margin-bottom:var(--ds-2)}
.mk-value p{color:var(--ds-text-2);line-height:1.6}

/* Nummerierte Schritte */
.mk-steps{counter-reset:mkstep;display:grid;gap:var(--ds-6);grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){ .mk-steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .mk-steps{grid-template-columns:1fr;gap:var(--ds-4)} }
.mk-step{border-top:1px solid var(--ds-line);padding-top:var(--ds-4)}
.mk-step::before{
  counter-increment:mkstep;content:counter(mkstep,decimal-leading-zero);
  display:block;margin-bottom:var(--ds-2);
  font-family:var(--ds-font-mono);font-size:var(--ds-fs-sm);color:var(--ds-accent);
}
.mk-step .mk-h3{margin-bottom:var(--ds-2)}
.mk-step p{color:var(--ds-text-2);line-height:1.6;font-size:var(--ds-fs-md)}

/* --- 6. Listen -------------------------------------------------------------- */
.mk-list{display:flex;flex-direction:column;gap:var(--ds-3)}
.mk-list li{position:relative;padding-left:var(--ds-5);color:var(--ds-text-2);line-height:1.55}
.mk-list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:1px;background:var(--ds-accent)}
.mk-list b{color:var(--ds-text);font-weight:500}
.mk-offset{margin-top:44px}
@media (max-width:720px){ .mk-offset{margin-top:0} }

/* Ehrliche Grenzen: ruhig, sachlich, kein Warnton */
.mk-limits{display:grid;gap:0;border:1px solid var(--ds-line);border-radius:var(--ds-r-md);background:var(--ds-surface);overflow:hidden}
.mk-limit{display:grid;grid-template-columns:200px 1fr;gap:var(--ds-4);padding:var(--ds-4) var(--ds-5)}
.mk-limit + .mk-limit{border-top:1px solid var(--ds-line)}
.mk-limit dt{font-weight:500;color:var(--ds-text)}
.mk-limit dd{margin:0;color:var(--ds-text-2);line-height:1.55}
@media (max-width:720px){ .mk-limit{grid-template-columns:1fr;gap:var(--ds-1);padding:var(--ds-4)} }

/* --- 7. Tabellen (Marketing-Massstab) --------------------------------------- */
.mk-tablewrap{
  width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-md);
}
.mk-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--ds-fs-md);font-variant-numeric:tabular-nums}
.mk-table th{
  padding:var(--ds-3) var(--ds-4);text-align:left;white-space:nowrap;
  background:var(--ds-surface-2);border-bottom:1px solid var(--ds-line);
  font-size:var(--ds-fs-label);letter-spacing:var(--ds-track-label);text-transform:uppercase;
  font-weight:500;color:var(--ds-text-3);
}
.mk-table td{padding:var(--ds-3) var(--ds-4);border-bottom:1px solid var(--ds-line);vertical-align:top;color:var(--ds-text-2)}
.mk-table tbody tr:last-child td{border-bottom:0}
.mk-table tbody tr:hover > td{background:var(--ds-surface-2)}
.mk-table td:first-child{color:var(--ds-text);font-weight:500}
.mk-table .num{text-align:right;font-family:var(--ds-font-mono);white-space:nowrap;color:var(--ds-text)}
.mk-table th.num{text-align:right;font-family:var(--ds-font)}
.mk-table .mk-td-wide{min-width:220px}
/* Spec-/Preistabellen: kurze Schlagworte in Spalte 1, nie umbrechen */
.mk-table--spec td:first-child{white-space:nowrap}
/* Zuordnungstabelle Anforderung -> Umsetzung: zwei gleichrangige Textspalten */
.mk-table--map{min-width:560px;table-layout:fixed}
.mk-table--map th:first-child,.mk-table--map td:first-child{width:40%}
.mk-table--map td:first-child{font-weight:400;color:var(--ds-text)}
.mk-table caption{caption-side:bottom;padding:var(--ds-3) var(--ds-4);text-align:left;font-size:var(--ds-fs-sm);color:var(--ds-text-3);border-top:1px solid var(--ds-line)}

/* --- 8. Geraetefamilie ------------------------------------------------------ */
.mk-devices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ds-4);margin-bottom:var(--ds-6)}
@media (max-width:980px){ .mk-devices{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .mk-devices{grid-template-columns:1fr} }
.mk-device{
  display:flex;flex-direction:column;gap:var(--ds-2);
  background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-md);
  padding:var(--ds-4) var(--ds-5) var(--ds-5);
}
.mk-device-art{
  display:block;width:100%;max-width:176px;height:auto;margin:var(--ds-2) auto var(--ds-3);
}
.mk-device h3{font-size:var(--ds-fs-md);font-weight:600;color:var(--ds-text)}
.mk-device p{font-size:var(--ds-fs-base);color:var(--ds-text-2);line-height:1.55}
.mk-device-meta{display:flex;flex-wrap:wrap;gap:var(--ds-1);margin-top:auto;padding-top:var(--ds-3)}

/* --- 9. UI-Ausschnitt (CSS-Nachbau, kein Screenshot) ------------------------ */
.mk-ui{
  background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-md);
  overflow:hidden;font-size:var(--ds-fs-base);
}
.mk-ui-bar{
  display:flex;align-items:center;gap:var(--ds-2);flex-wrap:wrap;
  padding:var(--ds-2) var(--ds-3);border-bottom:1px solid var(--ds-line);background:var(--ds-surface-2);
}
.mk-ui-title{font-weight:500;color:var(--ds-text);font-size:var(--ds-fs-base)}
.mk-ui-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mk-ui table{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;font-size:var(--ds-fs-table);font-variant-numeric:tabular-nums}
.mk-ui td,.mk-ui th{white-space:nowrap}
.mk-ui th{
  padding:var(--ds-2) var(--ds-3);text-align:left;white-space:nowrap;
  background:var(--ds-surface-2);border-bottom:1px solid var(--ds-line);
  font-size:var(--ds-fs-label);letter-spacing:var(--ds-track-label);text-transform:uppercase;font-weight:500;color:var(--ds-text-3);
}
.mk-ui td{padding:7px var(--ds-3);border-bottom:1px solid var(--ds-line);color:var(--ds-text);vertical-align:middle}
.mk-ui tbody tr:last-child td{border-bottom:0}
.mk-ui .num{text-align:right;font-family:var(--ds-font-mono);white-space:nowrap}
.mk-ui-foot{
  display:flex;flex-wrap:wrap;gap:var(--ds-4);align-items:center;
  padding:var(--ds-2) var(--ds-3);border-top:1px solid var(--ds-line);
  background:var(--ds-surface-2);font-size:var(--ds-fs-table);color:var(--ds-text-2);
}
.mk-ui-foot b{font-family:var(--ds-font-mono);font-weight:500;color:var(--ds-text)}
.mk-ui-cap{margin-top:var(--ds-3);font-size:var(--ds-fs-sm);color:var(--ds-text-3)}

/* --- 10. Fluss-Darstellung Q-Bau -------------------------------------------- */
.mk-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ds-4)}
@media (max-width:820px){ .mk-flow{grid-template-columns:1fr} }
.mk-flow-item{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-md);padding:var(--ds-5)}
.mk-flow-path{
  display:flex;align-items:center;gap:var(--ds-2);flex-wrap:wrap;
  margin-bottom:var(--ds-3);font-family:var(--ds-font-mono);font-size:var(--ds-fs-sm);color:var(--ds-text-3);
}
.mk-flow-path b{color:var(--ds-text);font-weight:500}
.mk-flow-item p{color:var(--ds-text-2);line-height:1.6;font-size:var(--ds-fs-md)}

/* --- 11. Preise ------------------------------------------------------------- */
.mk-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ds-4)}
@media (max-width:900px){ .mk-plans{grid-template-columns:1fr} }
.mk-plan{
  display:flex;flex-direction:column;gap:var(--ds-3);
  background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-md);padding:var(--ds-6);
}
.mk-plan.is-featured{border-color:var(--ds-accent-line);box-shadow:inset 0 0 0 1px var(--ds-accent-line)}
.mk-plan-head{display:flex;align-items:baseline;gap:var(--ds-2)}
.mk-plan-name{font-size:var(--ds-fs-lg);font-weight:600;color:var(--ds-text)}
.mk-price{display:flex;align-items:baseline;gap:6px}
.mk-price b{font-family:var(--ds-font-mono);font-size:32px;font-weight:500;letter-spacing:-.02em;color:var(--ds-text);line-height:1.1}
.mk-price span{font-size:var(--ds-fs-md);color:var(--ds-text-3)}
.mk-plan ul{display:flex;flex-direction:column;gap:var(--ds-2);margin-top:var(--ds-1)}
.mk-plan li{position:relative;padding-left:var(--ds-4);color:var(--ds-text-2);font-size:var(--ds-fs-md);line-height:1.5}
.mk-plan li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:1px;background:var(--ds-line-strong)}
.mk-plan.is-featured li::before{background:var(--ds-accent)}

.mk-calc{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-md);overflow:hidden}
.mk-calc table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--ds-fs-md)}
.mk-calc td{padding:var(--ds-3) var(--ds-5);border-bottom:1px solid var(--ds-line);color:var(--ds-text-2)}
.mk-calc td.num{text-align:right;font-family:var(--ds-font-mono);color:var(--ds-text);white-space:nowrap}
.mk-calc tr:last-child td{border-bottom:0;background:var(--ds-surface-2);color:var(--ds-text);font-weight:500}
.mk-calc tr:last-child td.num{font-weight:500}

.mk-fine{margin-top:var(--ds-4);font-size:var(--ds-fs-sm);color:var(--ds-text-3);line-height:1.6;max-width:80ch}

/* --- 12. FAQ ---------------------------------------------------------------- */
.mk-faq{border-top:1px solid var(--ds-line)}
.mk-faq details{border-bottom:1px solid var(--ds-line)}
.mk-faq summary{
  display:flex;align-items:flex-start;gap:var(--ds-3);
  padding:var(--ds-4) 0;cursor:pointer;list-style:none;
  font-size:var(--mk-fs-h3);font-weight:500;color:var(--ds-text);line-height:1.4;
}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary::after{
  content:"";flex:none;width:9px;height:9px;margin:7px 0 0 auto;
  border-right:1.5px solid var(--ds-text-3);border-bottom:1.5px solid var(--ds-text-3);
  transform:rotate(45deg);transition:transform .12s;
}
.mk-faq details[open] summary::after{transform:rotate(-135deg);margin-top:10px}
.mk-faq summary:hover{color:var(--ds-accent)}
.mk-faq-a{padding:0 0 var(--ds-5);color:var(--ds-text-2);line-height:1.65;max-width:76ch}
.mk-faq-a p + p{margin-top:var(--ds-3)}

/* --- 13. CTA ---------------------------------------------------------------- */
.mk-cta{
  background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-md);
  padding:var(--ds-10);
}
@media (max-width:720px){ .mk-cta{padding:var(--ds-6)} }
.mk-cta .mk-h2{margin-bottom:var(--ds-3)}
.mk-cta .mk-p{margin-bottom:0}

/* --- 14. Footer ------------------------------------------------------------- */
.mk-foot{border-top:1px solid var(--ds-line);background:var(--ds-bg-sub);padding:var(--ds-10) 0 var(--ds-8)}
.mk-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--ds-6)}
@media (max-width:820px){ .mk-foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .mk-foot-grid{grid-template-columns:1fr} }
.mk-foot h2{font-size:var(--ds-fs-label);letter-spacing:var(--ds-track-label);text-transform:uppercase;color:var(--ds-text-3);font-weight:500;margin-bottom:var(--ds-3)}
.mk-foot ul{display:flex;flex-direction:column;gap:var(--ds-2)}
.mk-foot a{color:var(--ds-text-2);font-size:var(--ds-fs-md)}
.mk-foot a:hover{color:var(--ds-text)}
.mk-foot address{font-style:normal;color:var(--ds-text-2);font-size:var(--ds-fs-md);line-height:1.7}
.mk-foot-brand{display:flex;align-items:center;gap:var(--ds-2);margin-bottom:var(--ds-3);color:var(--ds-text);font-weight:600}
.mk-foot-brand img{width:22px;height:22px;border-radius:var(--ds-r-sm)}
.mk-foot-bar{
  display:flex;flex-wrap:wrap;gap:var(--ds-2) var(--ds-4);align-items:center;
  margin-top:var(--ds-8);padding-top:var(--ds-4);border-top:1px solid var(--ds-line);
  font-size:var(--ds-fs-sm);color:var(--ds-text-3);
}

/* --- 15. Druck -------------------------------------------------------------- */
@media print{
  .mk-top,.mk-actions,.mk-cta{display:none}
  .mk-sec{padding:var(--ds-6) 0}
}