/* Vorher/nachher (Startseite + Dankeseite). Inhalt und Quellen: /assets/js/vergleich.js */
.vs{--rot:#ff6b63;--gruen:#3ddc84;--font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
/* Auswahl */
.vs-wahl{display:flex;justify-content:center;margin:30px 0 14px}
.vs-wahl-in{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);flex-wrap:wrap;justify-content:center}
.vs-tab{min-height:44px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:var(--mut);font:650 15px var(--font);padding:10px 20px;border-radius:999px;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.vs-tab:hover{color:var(--fg);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}
.vs-tab[aria-pressed="true"]{background:linear-gradient(135deg,#1E63E6,#2468EE);border-color:transparent;color:#fff;box-shadow:0 8px 24px -8px rgba(46,125,255,.7)}
.vs-tab:focus-visible,.vs-schalter button:focus-visible{outline:2px solid var(--blue-l);outline-offset:2px}
.vs-lage{text-align:center;color:var(--mut);font-size:17px;max-width:620px;margin:0 auto}
/* Bühne: EIN Handy in der Mitte, links das Fazit ohne, rechts das Fazit mit Datei */
.vs-buehne{position:relative;display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"o h m";align-items:center;column-gap:clamp(28px,4vw,64px);margin-top:34px;padding:10px 0 20px}
.vs-buehne::before{content:"";position:absolute;inset:4% 8% 10%;background:radial-gradient(34% 55% at 38% 50%,rgba(255,107,99,.13),transparent 70%),radial-gradient(34% 55% at 62% 50%,rgba(46,125,255,.30),transparent 70%);filter:blur(12px);pointer-events:none}
.vs-mitte{grid-area:h;position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.vs-seite{position:relative;display:flex;flex-direction:column;gap:14px;max-width:330px}
.vs-seite.vs-ohne{grid-area:o;justify-self:end;align-items:flex-end;text-align:right}
.vs-seite.vs-mit{grid-area:m;justify-self:start;align-items:flex-start;text-align:left}
.vs-marke{display:inline-flex;align-items:center;gap:8px;font:800 12px var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--mut-2)}
.vs-marke::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rot);box-shadow:0 0 0 4px rgba(255,107,99,.15)}
.vs-ohne .vs-marke{flex-direction:row-reverse}
.vs-mit .vs-marke{color:var(--blue-l)}
.vs-mit .vs-marke::before{background:var(--blue);box-shadow:0 0 0 4px rgba(46,125,255,.22)}
.vs-fazit{margin:0;font:750 clamp(19px,2.1vw,24px)/1.25 var(--font);letter-spacing:-.015em;color:var(--fg);text-wrap:balance}
.vs-fazit small{display:block;font:500 15px/1.5 var(--font);letter-spacing:0;color:var(--mut);margin-top:8px;text-wrap:pretty}
.vs-ohne .vs-fazit em{font-style:normal;color:var(--rot)}
.vs-mit .vs-fazit em{font-style:normal;color:var(--gruen)}
/* Das Handy */
.vs-mass{position:absolute;width:max(250px,min(300px,calc((100svh - 150px) * 300 / 620)));height:0;visibility:hidden;pointer-events:none}
.vs-geraet{position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.vs-handy{position:relative;width:300px;zoom:var(--z,1);aspect-ratio:300/620;border-radius:54px;padding:11px;
  background:linear-gradient(145deg,#6b6f78 0%,#2a2c31 18%,#17181b 50%,#34373d 82%,#7a7e87 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 50px 80px -30px rgba(0,0,0,.85),-40px 34px 70px -46px rgba(255,107,99,.35),40px 34px 70px -40px rgba(46,125,255,.5)}
.vs-handy::before{content:"";position:absolute;right:-3px;top:150px;width:3px;height:74px;border-radius:0 3px 3px 0;background:linear-gradient(#5d6169,#2b2d32)}
.vs-handy::after{content:"";position:absolute;left:-3px;top:120px;width:3px;height:44px;border-radius:3px 0 0 3px;background:linear-gradient(#5d6169,#2b2d32);box-shadow:0 60px 0 #3a3d43,0 118px 0 #3a3d43}
.vs-schirm{position:relative;height:100%;border-radius:44px;overflow:hidden;background:#000;isolation:isolate}
.vs-schirm::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  background:linear-gradient(115deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 28%,transparent 42%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.vs-schicht{position:absolute;inset:0}
.vs-schicht.vs-mit{clip-path:inset(0 0 0 var(--p,50%))}
.vs-insel{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:96px;height:28px;border-radius:20px;background:#000;z-index:8}
.vs-status{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 28px 0 32px;font:650 14px var(--font);color:#fff;z-index:4}
.vs-status.dunkel{color:#111}
.vs-status svg{height:12px;width:auto}
/* Der Schieber: Trennlinie im Bildschirm, Griff außerhalb des Zooms (bleibt am Handy ≥ 44 px) */
.vs-linie{position:absolute;inset:0;z-index:7;pointer-events:none;transform:translateX(var(--p,50%))}
.vs-linie::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;
  background:linear-gradient(rgba(255,255,255,.35),#fff 22%,#fff 78%,rgba(255,255,255,.35));box-shadow:0 0 0 1px rgba(8,12,20,.28),0 0 16px 1px rgba(110,160,255,.75)}
.vs-bahn{position:absolute;inset:calc(11px * var(--z,1));border-radius:calc(44px * var(--z,1));cursor:ew-resize;z-index:2}
.vs-griff{position:absolute;top:50%;left:0;transform:translateX(var(--x,0));width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;cursor:grab;
  background:rgba(12,17,28,.62);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.92),0 10px 26px -6px rgba(0,0,0,.6),0 0 22px rgba(46,125,255,.45);transition:scale .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.vs-griff svg{width:26px;height:15px}
.vs-griff:hover,.vs-zieht .vs-griff{scale:1.08}
.vs-zieht .vs-griff{cursor:grabbing;box-shadow:inset 0 0 0 1.5px #fff,0 12px 30px -6px rgba(0,0,0,.65),0 0 30px rgba(46,125,255,.7)}
.vs-griff:focus{outline:none}
.vs-griff:focus-visible{outline:3px solid var(--blue-l);outline-offset:3px}
.vs-weich .vs-linie{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.vs-weich .vs-griff{transition:transform .45s cubic-bezier(.2,.8,.2,1),scale .2s,box-shadow .2s}
.vs-weich .vs-schicht.vs-mit{transition:clip-path .45s cubic-bezier(.2,.8,.2,1)}
/* Die beiden Enden des Schiebers */
.vs-schalter{position:relative;display:flex;justify-content:space-between;gap:10px;width:100%}
.vs-schalter::before{content:"";position:absolute;left:24px;right:24px;top:50%;height:1px;background:linear-gradient(90deg,rgba(255,107,99,.55),rgba(255,255,255,.12) 45%,rgba(255,255,255,.12) 55%,rgba(46,125,255,.7))}
.vs-schalter button{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;white-space:nowrap;border:1px solid var(--line);background:var(--ink,#1B1D20);color:var(--mut);font:700 14px var(--font);padding:9px 15px;border-radius:999px;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.vs-schalter button::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rot)}
.vs-schalter button.m{flex-direction:row-reverse}
.vs-schalter button.m::before{background:var(--blue)}
.vs-schalter button:hover{color:var(--fg);border-color:rgba(255,255,255,.2)}
.vs-schalter button[aria-pressed="true"].o{background:rgba(255,107,99,.16);border-color:rgba(255,107,99,.45);color:#ffc2bd}
.vs-schalter button[aria-pressed="true"].m{background:linear-gradient(135deg,#1E63E6,#2468EE);border-color:transparent;color:#fff}
.vs-schalter button[aria-pressed="true"].m::before{background:#fff}
/* Sperrbildschirm */
.vs-sperr{position:absolute;inset:0;padding:52px 12px 16px;display:flex;flex-direction:column;gap:6px;color:#fff;overflow:hidden;
  background:radial-gradient(90% 60% at 20% 10%,#56657a 0%,transparent 60%),radial-gradient(80% 60% at 90% 90%,#2c3544 0%,transparent 60%),#161b23}
.vs-mit .vs-sperr{background:radial-gradient(90% 60% at 15% 5%,#3b7bd9 0%,transparent 55%),radial-gradient(80% 70% at 95% 95%,#1b3a6b 0%,transparent 60%),#0c1528}
.vs-uhr{font:250 46px/1 var(--font);text-align:center;letter-spacing:-.03em}
.vs-tag{text-align:center;font:600 14px var(--font);opacity:.85;margin:2px 0 4px}
.vs-trenner{font:700 10.5px var(--font);letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin:4px 6px 0}
.vs-noti{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.17);
  border-radius:18px;padding:8px 11px;flex:none;box-shadow:0 8px 20px -12px rgba(0,0,0,.5)}
.vs-noti.gut{background:rgba(61,220,132,.24);box-shadow:inset 0 0 0 1px rgba(61,220,132,.55),0 10px 30px -10px rgba(61,220,132,.45)}
.vs-noti.schlecht{background:rgba(255,107,99,.22);box-shadow:inset 0 0 0 1px rgba(255,107,99,.5),0 10px 30px -10px rgba(255,107,99,.35)}
.vs-app{flex:none;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.vs-app svg{width:19px;height:19px}
.vs-a-mail{background:linear-gradient(#4aa3ff,#1a73e8)}.vs-a-tel{background:linear-gradient(#5be07f,#28b34f)}.vs-a-liste{background:linear-gradient(#35a383,#1c6b55)}.vs-a-termin{background:linear-gradient(#ffb340,#ff8a00)}
.vs-noti-kopf{display:flex;justify-content:space-between;gap:8px;font:500 12px var(--font);color:rgba(255,255,255,.9)}
.vs-noti-titel{font:650 14px/1.3 var(--font);margin-top:1px}
.vs-noti-text{font:400 13px/1.32 var(--font);opacity:.92}
/* Einfliegen */
.vs-an .vs-noti,.vs-an .vs-trenner{animation:vs-rein .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * .45s + .2s)}
@media (prefers-reduced-motion:no-preference){.vs:not(.vs-an) .vs-noti,.vs:not(.vs-an) .vs-trenner{opacity:0}}
@keyframes vs-rein{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
/* Mail */
.vs-mailapp{position:absolute;inset:0;padding:56px 12px 16px;background:#f2f2f7;color:#1c1c1e;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.vs-mailapp .vs-noti{background:#1f2937;color:#fff}
.vs-mailapp .vs-noti-kopf{color:#d1d5db}
.vs-mailapp .vs-ordner{font:800 28px var(--font);letter-spacing:-.02em;margin:2px 6px 0}
.vs-mail{background:#fff;border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.06);flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.vs-mail-kopf{padding:14px 16px 12px;border-bottom:1px solid #e5e5ea}
.vs-mail-kopf span{display:block;font:500 12.5px var(--font);color:#8e8e93}
.vs-mail-kopf b{display:block;font:700 15.5px/1.3 var(--font);margin-top:4px}
.vs-mail-text{padding:12px 16px;font:400 14px/1.55 var(--font);white-space:pre-line;color:#2c2c2e;flex:1;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
.vs-mail-text mark{background:rgba(255,107,99,.18);color:inherit;border-radius:4px;padding:0 2px}
.vs-mit .vs-mail-text mark{background:rgba(61,220,132,.22)}
/* Seiten, die von selbst durchlaufen */
.vs-lauf{position:absolute;inset:46px 0 0;background:#fff;overflow:hidden;border-top:1px solid #e5e5ea}
.vs-schicht:has(.vs-lauf){background:#f7f7f8}
.vs-lauf img{display:block;width:100%;height:auto;will-change:transform}
.vs-an .vs-lauf img{animation:vs-lauf var(--dauer,12s) cubic-bezier(.45,0,.55,1) 1 forwards}
@keyframes vs-lauf{0%,10%{transform:none}85%,100%{transform:translateY(var(--weg,0))}}
.vs-geraet:hover .vs-lauf img,.vs-zieht .vs-lauf img,.vs-geraet:focus-within .vs-lauf img,.vs-steht .vs-lauf img{animation-play-state:paused}
/* ohne Bewegung scrollt man die Seiten selbst (Tastatur: Fokus auf die Seite); Rahmen außen ums Handy */
.vs-lauf:focus{outline:none}
.vs-handy:has(.vs-lauf:focus-visible){outline:3px solid var(--blue-l);outline-offset:4px}
.vs-zaehler{position:absolute;right:12px;bottom:14px;z-index:4;font:700 12px var(--font);color:#fff;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:6px 10px;border-radius:999px}
.vs-ohne .vs-zaehler{right:auto;left:12px}
/* Zweiter Block */
.vs-zwei{margin-top:90px}
.vs-zwei h3{text-align:center;font:800 clamp(24px,3.2vw,36px)/1.15 var(--font);letter-spacing:-.025em;margin:0}
.vs-zwei .vs-lage{margin-top:10px}
.vs-fuss{text-align:center;color:var(--mut-2);font-size:13.5px;margin:40px auto 0;max-width:760px;line-height:1.55}
details.vs-fuss{background:none;border:0;border-radius:0;padding:0;margin-bottom:0}
.vs-fuss summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 14px var(--font);letter-spacing:0;color:var(--mut);cursor:pointer;list-style:none}
.vs-fuss summary::-webkit-details-marker{display:none}
.vs-fuss summary::after{content:"+";color:var(--blue-l);font-weight:700;font-size:17px;line-height:1}
.vs-fuss[open] summary::after{content:"–"}
.vs-fuss summary:hover{color:var(--fg)}
.vs-fuss summary:focus-visible{outline:2px solid var(--blue-l);outline-offset:2px;border-radius:6px}
.vs-fuss p{font-size:13.5px;color:var(--mut-2);line-height:1.55;margin:4px 0 0}
@media (max-width:860px){
  .vs-mass{width:max(200px,min(244px,66vw,calc((100svh - 210px) * 300 / 620)))}
  .vs-buehne{grid-template-columns:1fr 1fr;grid-template-areas:"h h" "o m";column-gap:14px;row-gap:22px;margin-top:18px}
  .vs-buehne::before{inset:0 0 30%}
  .vs-seite{max-width:none;gap:8px}
  .vs-seite.vs-ohne,.vs-seite.vs-mit{justify-self:stretch;align-items:flex-start;text-align:left}
  .vs-ohne .vs-marke{flex-direction:row}
  .vs-schalter{max-width:360px;order:-1}
  .vs-seite{align-self:start}
  .vs-fazit{font-size:16.5px}
  .vs-fazit small{font-size:14px;margin-top:6px}
  .vs-zwei .vs-schalter{margin-top:0}
  .vs-wahl-in{border-radius:22px}
  .vs-tab{padding:9px 14px;font-size:14px}
}
@media (max-width:520px){
  .vs-wahl-in{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;border-radius:20px}
  .vs-tab{padding:6px 8px;font-size:13px;line-height:1.2;border-radius:15px}
  .vs-marke{font-size:10.5px;letter-spacing:.06em;gap:6px}
  .vs-marke::before{width:7px;height:7px;box-shadow:0 0 0 3px rgba(255,107,99,.15)}
  .vs-mit .vs-marke::before{box-shadow:0 0 0 3px rgba(46,125,255,.22)}
}
@media (max-width:359px){
  .vs-schalter button{font-size:13px;padding:9px 11px;gap:6px}
  .vs-buehne{column-gap:10px}
  .vs-fazit{font-size:16px}
  .vs-fazit small{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .vs-an .vs-noti,.vs-an .vs-trenner,.vs-an .vs-lauf img{animation:none}
  .vs-lauf{overflow-y:auto}
  /* ohne Bewegung: die Seiten lassen sich selbst scrollen, gezogen wird nur am Griff */
  .vs-bahn{pointer-events:none}
  .vs-griff{pointer-events:auto}
  .vs-griff,.vs-weich .vs-griff,.vs-weich .vs-linie,.vs-weich .vs-schicht.vs-mit,.vs-schalter button{transition:none}
}