/* =========================================================
   Mrs. Property VSL 1
   Token-Block. Quelle: kunden/maike-kipker/marke/design-system/
   colors_and_type.css + design-referenz-live-seiten.md
   Ausserhalb dieses Blocks steht kein Hex-Wert im CSS.
   ========================================================= */
:root{
  /* Farben */
  --mp-altrosa:#f8e0d9;      /* Live-Wert der Bestandsseiten */
  --mp-altrosa-soft:#fdf4f1;
  --mp-beere:#a33e6b;
  --mp-beere-dark:#8c3159;
  --mp-beere-veil:rgba(163,62,107,.11);
  --mp-kohle:#373c3c;
  --mp-text:#4b4f58;         /* Live-Fliesstextfarbe */
  --mp-saphir:#34517a;
  --mp-hellgrau:#e3e3e3;
  --mp-senf:#efdd4f;        /* Signature-Marker aus dem CD-Manual */
  --mp-paper:#ffffff;

  --bg:var(--mp-paper);
  --bg-soft:var(--mp-altrosa);
  --fg:var(--mp-text);
  --fg-strong:var(--mp-kohle);
  --accent:var(--mp-beere);
  --line:rgba(55,60,60,.16);
  --line-soft:rgba(55,60,60,.09);

  /* Schrift */
  --font-display:'Tenor Sans','Cormorant Garamond',Georgia,serif;
  --font-text:'Raleway','Helvetica Neue',Arial,sans-serif;
  --t-h1:clamp(30px,5.2vw,52px);
  --t-h2:clamp(25px,3.6vw,38px);
  --t-h3:clamp(20px,2.2vw,26px);
  --t-h4:clamp(18px,1.7vw,20px);
  --t-body-lg:clamp(17px,1.5vw,19px);
  --t-body:16px;
  --t-sm:14px;
  --t-eyebrow:12px;
  --ls-eyebrow:.2em;

  /* Raster */
  --radius:3px;
  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --container:1180px;
  --prose:760px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-text);font-size:var(--t-body);line-height:1.62;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}

h1,h2,h3,h4{
  font-family:var(--font-display);font-weight:400;
  color:var(--accent);margin:0 0 var(--s4);line-height:1.18;
  letter-spacing:-.005em;
}
h1{font-size:var(--t-h1);line-height:1.1}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
h4{font-size:var(--t-h4)}
p{margin:0 0 var(--s4)}
strong{font-weight:700;color:var(--fg-strong)}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.prose{max-width:var(--prose);margin-left:auto;margin-right:auto}
section{padding:var(--s7) 0}
.tight{padding-top:var(--s5)}
.bg-rose{background:var(--mp-altrosa)}
.bg-soft{background:var(--mp-altrosa-soft)}
.bg-fade{background:linear-gradient(var(--mp-altrosa) 40%,var(--mp-paper) 100%)}
.bg-beere{background:var(--accent);color:var(--mp-paper)}
.bg-beere h2,.bg-beere h3{color:var(--mp-paper)}
.center{text-align:center}

.eyebrow{
  font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  font-weight:500;color:var(--accent);margin:0 0 var(--s4)
}

/* ---------- Header ---------- */
.site-head{background:var(--mp-paper);border-bottom:1px solid var(--line-soft)}
.site-head .wrap{display:flex;align-items:center;justify-content:center;padding-top:14px;padding-bottom:14px}
.site-head img{width:200px;height:auto}

/* ---------- CTA ---------- */
.cta{
  display:inline-block;background:var(--accent);color:var(--mp-paper);
  text-decoration:none;border-radius:var(--radius);
  padding:14px 26px;font-family:var(--font-text);font-weight:600;
  font-size:clamp(17px,1.7vw,20px);line-height:1.3;text-align:center;
  transition:background .15s ease;max-width:100%;
}
.cta:hover,.cta:focus-visible{background:var(--mp-beere-dark)}
.cta-note{font-size:var(--t-sm);color:var(--fg);margin:10px 0 0;font-style:italic}
.cta-block{margin:var(--s6) 0}
.bg-beere .cta{background:var(--mp-paper);color:var(--accent)}
.bg-beere .cta:hover{background:var(--mp-altrosa)}

/* ---------- Hero ---------- */
.hero{background:var(--mp-altrosa);padding-top:var(--s6)}
.kicker{
  font-family:var(--font-text);font-weight:600;font-size:var(--t-sm);
  line-height:1.5;color:var(--accent);margin:0 0 var(--s4);max-width:46ch
}
.badge{width:230px;margin:0 0 var(--s5)}
.hero-grid{display:grid;gap:var(--s6);align-items:center}
.hero .lead{font-size:var(--t-body-lg)}
.hero-img{max-width:420px;margin:0 auto}

/* ---------- Trustbar ---------- */
.trust{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:var(--s5) 0}
.trust ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);text-align:center}
.trust li{
  font-size:var(--t-sm);color:var(--fg-strong);letter-spacing:.02em;
  position:relative;padding-top:var(--s4);border-top:1.5px solid var(--accent);max-width:34ch;margin:0 auto
}

.presse{padding:var(--s6) 0}
.presse p{font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);text-align:center;color:var(--fg);margin-bottom:var(--s4)}

/* ---------- Video ---------- */
.video-frame{
  position:relative;aspect-ratio:16/9;background:var(--mp-hellgrau);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:var(--s5);border-radius:var(--radius)
}
.video-frame span{font-size:var(--t-sm);color:var(--fg);max-width:32ch}

/* ---------- Nummerierte Bloecke ---------- */
.numbered{counter-reset:n;display:grid;gap:var(--s6)}
.numbered > li{list-style:none;position:relative;padding-left:56px}
.numbered > li::before{
  counter-increment:n;content:counter(n);
  position:absolute;left:0;top:2px;width:38px;height:38px;
  border:1.5px solid var(--accent);color:var(--accent);
  font-family:var(--font-display);font-size:19px;
  display:flex;align-items:center;justify-content:center
}
.numbered h3{margin-bottom:var(--s3)}

/* ---------- Tabelle ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--t-sm);background:var(--mp-paper)}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{background:var(--mp-altrosa);font-family:var(--font-display);font-weight:400;color:var(--accent);font-size:15px}
tbody th{font-weight:600;color:var(--fg-strong);width:34%}
tbody tr:nth-child(odd) td,tbody tr:nth-child(odd) th{background:var(--mp-altrosa-soft)}
.table-note{font-size:13px;font-style:italic;margin-top:var(--s3)}

/* ---------- Karten / Case Studies ---------- */
.case{border:1px solid var(--line);background:var(--mp-paper);padding:var(--s5);margin-bottom:var(--s6)}
.case-name{font-family:var(--font-text);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:var(--t-sm);color:var(--accent);margin:0 0 var(--s4)}
.case dl{margin:0}
.case dt{font-weight:700;color:var(--fg-strong);margin-top:var(--s4)}
.case dd{margin:4px 0 0}
.case-result{margin-top:var(--s5);border-top:1px solid var(--line-soft);padding-top:var(--s4)}
.case-result .label{font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--fg)}
.case-result .big{font-family:var(--font-display);font-size:clamp(26px,3.4vw,34px);color:var(--accent);line-height:1.15;margin:6px 0 4px}
.case-result .sub{font-size:var(--t-sm);margin:0}

.quote{border-left:2px solid var(--accent);padding:var(--s2) 0 var(--s2) var(--s5);margin:0 0 var(--s5)}
.quote p{font-family:var(--font-display);font-size:var(--t-h4);color:var(--fg-strong);line-height:1.45}
.quote cite{display:block;font-family:var(--font-text);font-style:normal;font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-top:var(--s3)}

/* ---------- Bildplatzhalter ---------- */
.ph{
  border:1px dashed var(--line);background:var(--mp-altrosa-soft);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:var(--s5);font-size:13px;color:var(--fg);min-height:180px
}
.ph.portrait{aspect-ratio:3/4;max-width:320px;margin-left:auto;margin-right:auto}
.ph.wide{aspect-ratio:16/9}

/* ---------- Leistungen ---------- */
.features{display:grid;gap:var(--s5);list-style:none;padding:0;margin:0}
.feature{border-top:1.5px solid var(--accent);padding-top:var(--s4)}
.feature svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.5;margin-bottom:var(--s3)}
.feature h3{font-size:var(--t-h4);margin-bottom:var(--s2)}
.feature p{margin:0;font-size:var(--t-sm)}

/* ---------- Schritte ---------- */
.steps{list-style:none;padding:0;margin:0;counter-reset:s;display:grid;gap:var(--s6)}
.steps li{position:relative;padding-left:56px}
.steps li::before{
  counter-increment:s;content:counter(s);position:absolute;left:0;top:0;
  width:38px;height:38px;background:var(--accent);color:var(--mp-paper);
  font-family:var(--font-display);font-size:19px;display:flex;align-items:center;justify-content:center
}
.steps h3{margin-bottom:var(--s2)}
.steps p{margin:0}

/* ---------- Kennzahlen ---------- */
.stats{display:grid;gap:var(--s5);list-style:none;padding:0;margin:0;text-align:center}
.stats li{border-top:1px solid rgba(255,255,255,.35);padding-top:var(--s4)}
.stats b{display:block;font-family:var(--font-display);font-size:clamp(24px,3vw,32px);font-weight:400;line-height:1.15}
.stats span{font-size:var(--t-sm);opacity:.92}

/* ---------- Checklisten ---------- */
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:var(--s4)}
.checklist li{position:relative;padding-left:34px}
.checklist li::before{
  content:"";position:absolute;left:0;top:6px;width:18px;height:10px;
  border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg)
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--s4) 34px var(--s4) 0;position:relative;
  font-family:var(--font-display);font-size:var(--t-h4);color:var(--accent)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .answer{padding:0 0 var(--s5)}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- Footer ---------- */
.site-foot{background:var(--mp-kohle);color:var(--mp-altrosa);font-size:13px;padding:var(--s7) 0}
.site-foot a{color:var(--mp-altrosa)}
.site-foot .wrap{text-align:center}
.site-foot img{width:120px;margin:var(--s4) auto 0;opacity:.9}

/* ---------- Breakpoints ---------- */
@media (min-width:768px){
  section{padding:var(--s8) 0}
  .wrap{padding:0 32px}
  .trust ul{grid-template-columns:repeat(3,1fr)}
  .features{grid-template-columns:repeat(2,1fr);gap:var(--s6)}
  .stats{grid-template-columns:repeat(3,1fr)}
  .cols-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}
}
@media (min-width:1024px){
  section{padding:var(--s9) 0}
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:var(--s8)}
  .hero .prose{margin-left:0}
  .features{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(6,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- Lesbarkeit: Pull-Quote, Marker, Statement ---------- */
.pull{
  margin:var(--s6) 0;padding:var(--s5) 0;
  border-top:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent)
}
.pull p{
  margin:0;font-family:var(--font-display);
  font-size:clamp(20px,2.4vw,27px);line-height:1.35;color:var(--accent)
}
.statement{font-family:var(--font-display);font-size:var(--t-h3);color:var(--fg-strong);margin-bottom:var(--s5)}
/* Senf-Marker, das Signature-Element aus dem Corporate-Design-Manual */
.mark{
  background:linear-gradient(transparent 58%, var(--mp-senf) 58%, var(--mp-senf) 94%, transparent 94%);
  padding:0 .12em
}

/* ---------- Bilder im Fliesstext ---------- */
.shot{margin:0}
.shot img{width:100%;border-radius:var(--radius)}
.cols-2 .shot img{aspect-ratio:4/3;object-fit:cover}
.shot figcaption{
  font-size:13px;font-style:italic;color:var(--fg);margin-top:10px;padding-left:2px
}
.shot.inset{margin:var(--s6) 0;max-width:520px}

/* ---------- Zahlenduell vor der Tabelle ---------- */
.duel{display:grid;gap:2px;background:var(--line-soft);margin:0 0 var(--s5);border:1px solid var(--line-soft)}
.duel-col{background:var(--mp-paper);padding:var(--s5);text-align:center}
.duel-col.is-good{background:var(--mp-beere-veil)}
.duel-label{
  font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  color:var(--fg);margin:0 0 var(--s4)
}
.duel-num{
  font-family:var(--font-display);font-size:clamp(26px,3.4vw,36px);
  color:var(--accent);line-height:1.1;margin:0
}
.duel-sub{font-size:13px;margin:4px 0 var(--s5)}
.duel-sub:last-child{margin-bottom:0}

/* ---------- Ueber Maike ---------- */
.about-grid{display:grid;gap:var(--s6)}
.about-photo img{width:100%;max-width:340px;margin:0 auto;border-radius:var(--radius)}
.about-text{max-width:var(--prose)}
.about-text h3{margin-top:var(--s6)}

@media (min-width:768px){
  .duel{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .about-grid{grid-template-columns:340px 1fr;gap:var(--s8);align-items:start}
  .about-photo{position:sticky;top:var(--s6)}
  .about-photo img{max-width:100%}
}

/* Beweis-Sektion darf breiter laufen als die Textspalte */
@media (min-width:1024px){
  #vergleich .cols-2,
  #vergleich .duel,
  #vergleich .table-scroll,
  #vergleich .table-note{width:980px;margin-left:-110px}
  #vergleich table{min-width:100%}
}

/* Bild in der Case-Study-Karte: einheitliche Hoehe, damit die drei Karten gleich wirken */
.case-img{margin-bottom:var(--s5)}
.case-img img{aspect-ratio:4/3;object-fit:cover;max-height:320px;width:100%}

/* =========================================================
   Quiz-Overlay. Das Quiz laeuft jetzt auf der Landingpage,
   nicht mehr auf einer eigenen Seite.
   ========================================================= */
.qm{position:fixed;inset:0;z-index:100;display:none}
.qm.is-open{display:block}
.qm-backdrop{position:absolute;inset:0;background:rgba(55,60,60,.55)}
.qm-panel{
  position:absolute;inset:0;background:var(--mp-altrosa-soft);
  overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:var(--s8)
}
.qm-head{
  position:sticky;top:0;z-index:2;background:var(--mp-paper);
  border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px
}
.qm-head img{width:150px}
.qm-close{
  background:none;border:0;cursor:pointer;font-family:var(--font-text);
  font-size:var(--t-sm);color:var(--fg);padding:8px;display:flex;align-items:center;gap:8px
}
.qm-close:hover{color:var(--accent)}
.qm-close svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none}
.qm-inner{max-width:680px;margin:0 auto;padding:0 20px}
body.qm-locked{overflow:hidden}

.qm .progress{height:3px;background:var(--mp-hellgrau);margin:var(--s6) 0 var(--s5)}
.qm .progress i{display:block;height:100%;background:var(--accent);width:0;transition:width .25s ease}
.qm .qcount{font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--fg);margin:0 0 var(--s3)}
.qm .step{display:none}
.qm .step.is-active{display:block}
.qm fieldset{border:0;margin:0;padding:0}
.qm legend{font-family:var(--font-display);font-size:var(--t-h3);color:var(--accent);line-height:1.25;margin-bottom:var(--s4);padding:0}
.qm .hint{font-size:var(--t-sm);font-style:italic;margin:0 0 var(--s5)}
.qm .options{display:grid;gap:10px;margin:0 0 var(--s5)}
.qm .opt{position:relative}
.qm .opt input{position:absolute;opacity:0;width:1px;height:1px}
.qm .opt span{
  display:block;background:var(--mp-paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px 14px 46px;cursor:pointer;
  font-size:var(--t-body);transition:border-color .15s ease,background .15s ease
}
.qm .opt span::before{
  content:"";position:absolute;left:16px;top:16px;width:16px;height:16px;
  border:1.5px solid var(--line);background:var(--mp-paper)
}
.qm .opt input[type=radio]+span::before{border-radius:50%}
.qm .opt:hover span{border-color:var(--accent)}
.qm .opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.qm .opt input:checked+span{border-color:var(--accent);background:var(--mp-beere-veil)}
.qm .opt input:checked+span::before{background:var(--accent);border-color:var(--accent)}
.qm .nav{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
.qm .back{background:none;border:0;color:var(--fg);font-family:var(--font-text);font-size:var(--t-sm);cursor:pointer;padding:8px 0;text-decoration:underline}
.qm button.cta{border:0;cursor:pointer;font-family:var(--font-text)}
.qm button.cta[disabled]{opacity:.45;cursor:not-allowed}
.qm .result{display:none}
.qm .result.is-active{display:block}
.qm .result h2{font-size:var(--t-h2)}

.qm .lead-form{position:relative;background:var(--mp-paper);border:1px solid var(--line);padding:var(--s5);margin-top:var(--s5)}
.qm .lead-done{border:1px solid var(--accent);background:var(--mp-paper);padding:var(--s5);margin-top:var(--s5)}
.qm .lead-done h3{font-size:var(--t-h3)}
.qm .lead-done p:last-child{margin-bottom:0}
.qm .lead-form label{display:block;font-size:var(--t-sm);font-weight:600;color:var(--fg-strong);margin-bottom:6px}
.qm .lead-form input[type=text],.qm .lead-form input[type=email]{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--font-text);font-size:var(--t-body);margin-bottom:var(--s4);
  background:var(--mp-paper);color:var(--fg-strong)
}
.qm .lead-form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.qm .field-error{color:var(--accent);font-size:var(--t-sm);margin:-10px 0 var(--s4);display:none}
.qm .field-error.is-visible{display:block}
.qm .form-error{
  background:var(--mp-beere-veil);border-left:2px solid var(--accent);
  padding:12px 14px;margin:0 0 var(--s4);font-size:var(--t-sm);color:var(--fg-strong)
}
.qm .todo{border:1px dashed var(--line);background:var(--mp-altrosa);padding:var(--s4);font-size:13px;margin-top:var(--s5)}

.qm .fcheck{
  position:absolute;inset:0;z-index:6;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)
}
.qm .fcheck.is-on{display:flex}
.qm .fcheck p{margin:0;font-size:15px;font-weight:600;color:var(--fg-strong)}
.qm .fspin{position:relative;width:46px;height:46px}
.qm .fspin i{
  position:absolute;top:0;left:50%;width:4px;height:12px;margin-left:-2px;
  border-radius:2px;background:var(--accent);transform-origin:2px 23px;
  animation:fspin 1.08s linear infinite
}
.qm .fspin i:nth-child(1){transform:rotate(0deg);animation-delay:-1.08s}
.qm .fspin i:nth-child(2){transform:rotate(30deg);animation-delay:-.99s}
.qm .fspin i:nth-child(3){transform:rotate(60deg);animation-delay:-.90s}
.qm .fspin i:nth-child(4){transform:rotate(90deg);animation-delay:-.81s}
.qm .fspin i:nth-child(5){transform:rotate(120deg);animation-delay:-.72s}
.qm .fspin i:nth-child(6){transform:rotate(150deg);animation-delay:-.63s}
.qm .fspin i:nth-child(7){transform:rotate(180deg);animation-delay:-.54s}
.qm .fspin i:nth-child(8){transform:rotate(210deg);animation-delay:-.45s}
.qm .fspin i:nth-child(9){transform:rotate(240deg);animation-delay:-.36s}
.qm .fspin i:nth-child(10){transform:rotate(270deg);animation-delay:-.27s}
.qm .fspin i:nth-child(11){transform:rotate(300deg);animation-delay:-.18s}
.qm .fspin i:nth-child(12){transform:rotate(330deg);animation-delay:-.09s}
@keyframes fspin{0%{opacity:1}100%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.qm .fspin i{animation-duration:2.4s}}

@media (min-width:768px){
  .qm-panel{
    inset:28px;max-width:820px;margin:0 auto;border-radius:var(--radius);
    box-shadow:0 24px 60px -24px rgba(55,60,60,.45)
  }
}