/* Scrollytelling, Plugin staefa/scrollytelling
   Alle Regeln sind unter .sty gekapselt, damit sie die Website nicht beeinflussen.
   Schrift und Farben folgen dem CI von staefa-versorgt.ch (Variablen aus assets/styles/style.css). */

.sty{
  /* Grundmass statt rem. Die Website setzt die Schriftgrösse von html fluid auf etwa 18 bis 28px,
     damit würden alle rem-Masse und die Höhe der Bühne zu gross. */
  --sty-rem:16px;
  /* Farben an staefa-versorgt.ch angelehnt (--dark, --gray, --light-gray, --medium-gray aus style.css) */
  --sty-bg:#fff; --sty-surface:#fff; --sty-ink:var(--gray,#535353); --sty-muted:var(--gray,#535353); --sty-dark:var(--dark,#2c2c2c);
  /* Akzent wie auf der Website: Gelb, dazu Schwarz und Grau */
  --sty-accent:var(--yellow,#ffee35); --sty-black:#000;
  --sty-dim:rgba(44,44,44,.6); --sty-rule:var(--medium-gray,#c4c4c4);
  /* Nur für die Einfärbung im Überblick, damit die vier Seiten unterscheidbar bleiben */
  --sty-folder:#5b7393; --sty-stamp:#7a6f9b; --sty-ochre:var(--yellow,#ffee35); --sty-green:#6f8a74;
  --sty-serif:var(--serif,Georgia,serif); --sty-sans:var(--sans-serif,system-ui,sans-serif);
  --sty-top:0px; /* Höhe eines fixierten Website-Kopfs, falls vorhanden */
  font-family:var(--sans-serif,system-ui,sans-serif);background:var(--sty-bg);color:var(--sty-ink);font-size:calc(1.125*var(--sty-rem));line-height:1.6;
}
.sty *,.sty *::before,.sty *::after{box-sizing:border-box}
.sty :where(button){font:inherit;color:inherit}
.sty :focus-visible{outline:2px solid var(--sty-black);outline-offset:2px}

/* Einstieg */
.sty-intro{max-width:calc(42*var(--sty-rem));margin:0 auto;padding:12vh calc(1.5*var(--sty-rem)) 10vh}
.sty-kicker{font-family:var(--sty-sans);font-weight:300;text-transform:uppercase;letter-spacing:.02em;line-height:1.2;color:var(--sty-ink);font-size:var(--font-size-xs,1rem);margin:0 0 calc(1.2*var(--sty-rem))}
.sty-lead p{font-family:var(--sty-serif);font-size:inherit;line-height:1.5;color:var(--sty-ink);margin:0 0 calc(2*var(--sty-rem))}
.sty-intro{font-size:var(--font-size-base,1.125rem)}
.sty-ask{margin:0 0 calc(1*var(--sty-rem));color:var(--sty-muted);font-size:var(--font-size-sm,1rem)}
.sty-chips{display:flex;flex-wrap:wrap;gap:calc(.5*var(--sty-rem));margin:0 0 calc(1.5*var(--sty-rem));padding:0;list-style:none}
/* Wie die Knöpfe der Website: Pille, gewählt schwarz mit weisser Schrift */
.sty-chip{font-family:var(--sty-sans);border:1px solid var(--sty-rule);background:var(--sty-surface);color:var(--sty-ink);border-radius:100vw;padding:.35em 1.1em;cursor:pointer;font-size:var(--font-size-xxxs,1rem);line-height:1.3;transition:border-color .2s,background .2s,color .2s}
.sty-chip.is-locked{opacity:.35;cursor:default}
.sty-chip.is-locked:hover{border-color:var(--sty-rule)}
.sty-chip[aria-pressed="true"]{border-color:var(--sty-black);background:var(--sty-black);color:#fff}
.sty-hint{font-family:var(--sty-sans);font-size:var(--font-size-xxxs,.9rem);color:var(--sty-muted);margin:0}

/* Bühne */
.sty-story{position:relative}
.sty-stage{position:sticky;top:var(--sty-top);height:calc(100svh - var(--sty-top));display:flex;flex-direction:column;align-items:center;gap:calc(.6*var(--sty-rem));padding:calc(.8*var(--sty-rem)) calc(1*var(--sty-rem)) calc(1*var(--sty-rem));z-index:1}
.sty-topbar{width:min(calc(40*var(--sty-rem)),100%);display:flex;justify-content:space-between;align-items:center;gap:calc(1*var(--sty-rem))}
.sty-pagebar{display:flex;gap:calc(1*var(--sty-rem));font-family:var(--sty-sans);font-size:calc(.85*var(--sty-rem));color:var(--sty-muted);transition:opacity .4s}
/* Keine Reiter: nur eine Beschriftung des gezeigten Dokuments, damit nichts anklickbar wirkt */
.sty-pagebar span{display:none}
.sty-pagebar span.is-on{display:inline;color:var(--sty-muted)}
.sty-pagebar span.is-on::before{content:"Abgebildet: "}
.sty-stage.is-overview .sty-pagebar{opacity:0}
.sty-notesbtn{border:0;background:var(--sty-black);color:#fff;border-radius:100vw;padding:calc(.3*var(--sty-rem)) calc(.4*var(--sty-rem)) calc(.3*var(--sty-rem)) calc(1*var(--sty-rem));font-family:var(--sty-sans);font-size:calc(.85*var(--sty-rem));cursor:pointer;white-space:nowrap}
.sty-notesbtn b{display:inline-block;min-width:1.6em;padding:0 .3em;text-align:center;background:var(--sty-accent);color:var(--sty-black);font-weight:500;border-radius:100vw;margin-left:calc(.5*var(--sty-rem))}
.sty-notesbtn.is-pulse{animation:sty-pulse .7s}
@keyframes sty-pulse{40%{transform:scale(1.12)}}

.sty-views{position:relative;flex:none;width:100%;height:min(calc(100svh - var(--sty-top) - calc(17*var(--sty-rem))),calc((100vw - calc(2*var(--sty-rem))) / var(--sty-ratio,.75)));display:flex;justify-content:center;container-type:size}
.sty-viewer{position:relative;height:100%;aspect-ratio:var(--sty-ratio,.75);max-width:100%;overflow:hidden;background:var(--sty-dark);border-radius:2px;transition:opacity .5s;container-type:inline-size}
.sty-inner{position:absolute;inset:0;transform-origin:0 0;transition:transform .9s cubic-bezier(.6,0,.2,1)}
.sty-inner img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .6s}
.sty-inner img.sty-blur.is-on{opacity:1}
.sty-stage.is-reveal .sty-inner img.sty-sharp.is-on{opacity:1}
.sty-hl{position:absolute;border:calc(4px / var(--s,1)) solid var(--sty-accent);box-shadow:0 0 0 9999px var(--sty-dim);border-radius:calc(4px / var(--s,1));
  transition:left .9s cubic-bezier(.6,0,.2,1),top .9s cubic-bezier(.6,0,.2,1),width .9s cubic-bezier(.6,0,.2,1),height .9s cubic-bezier(.6,0,.2,1),opacity .5s}
.sty-hl.is-off{opacity:0}

/* Nicht vorgesehene Felder */
.sty-ghosts{position:absolute;display:flex;flex-direction:column;justify-content:center;gap:2.6cqw;pointer-events:none;z-index:2}
.sty-ghost{display:flex;justify-content:space-between;align-items:baseline;gap:1em;font-size:2.8cqw;line-height:1.3;color:var(--sty-black);font-family:var(--sty-sans);
  opacity:0;transform:translateY(6px);border:1px dashed var(--sty-black);padding:.15em .4em;background:var(--sty-accent);transition:opacity .5s,transform .5s;white-space:nowrap}
.sty-ghost em{font-style:normal;font-family:var(--sty-sans);font-size:.8em;color:var(--sty-ink)}
.sty-stage.is-ghost .sty-ghost{opacity:1;transform:none}
.sty-stage.is-ghost .sty-ghost:nth-child(2){transition-delay:.25s}
.sty-stage.is-ghost .sty-ghost:nth-child(3){transition-delay:.5s}
.sty-stage.is-ghost .sty-ghost:nth-child(4){transition-delay:.75s}
.sty-stage.is-ghost .sty-ghost:nth-child(5){transition-delay:1s}

/* Überblick */
/* Seiten im Raster, ab vier Seiten in zwei Reihen. --sp-h ist die Bildhöhe, begrenzt durch Höhe und Breite der Bühne */
.sty-spread{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--sty-cols,3),auto);justify-content:center;align-content:center;gap:2cqh 3cqw;opacity:0;pointer-events:none;transition:opacity .5s;
  --sp-cap:calc(2.6*var(--sty-rem));
  --sp-h:min(calc((100cqh - var(--sty-rows,1) * var(--sp-cap) - (var(--sty-rows,1) - 1) * 2cqh) / var(--sty-rows,1)),calc((100cqw - (var(--sty-cols,3) - 1) * 3cqw) / var(--sty-cols,3) / var(--sty-ratio,.75)))}
.sty-stage.is-overview .sty-viewer{opacity:0}
.sty-stage.is-overview .sty-spread{opacity:1}
.sty-sp{width:calc(var(--sp-h) * var(--sty-ratio,.75));margin:0;display:flex;flex-direction:column;align-items:center}
.sty-sp-img{position:relative;height:var(--sp-h);aspect-ratio:var(--sty-ratio,.75)}
.sty-sp img{width:100%;height:100%;object-fit:cover;display:block;border-radius:2px}
.sty-tint{position:absolute;inset:0;opacity:.55;mix-blend-mode:multiply;border-radius:2px}
.sty-sp figcaption{margin-top:.4em;height:calc(2.6*var(--sty-rem) - .4em);width:100%;text-align:center;font-family:var(--sty-sans);font-size:calc(.78*var(--sty-rem));line-height:1.25;hyphens:auto;overflow-wrap:anywhere}

/* Text unten */
.sty-caption{width:min(calc(40*var(--sty-rem)),100%);margin-top:auto;min-height:calc(10.5*var(--sty-rem));max-height:42svh;overflow:auto;background:var(--sty-surface);
  border-left:5px solid var(--sty-accent);padding:calc(1*var(--sty-rem)) calc(1.25*var(--sty-rem));transition:opacity .3s,transform .3s}
.sty-caption.is-out{opacity:0;transform:translateY(calc(.6*var(--sty-rem)))}
/* Zwischentitel wie .blog h3 der Artikel: serifenlos */
.sty-caption h3{font-family:var(--sty-sans);font-weight:500;color:var(--sty-black);font-size:calc(1.2*var(--sty-rem));line-height:1.25;margin:0 0 calc(.45*var(--sty-rem))}
.sty-caption p{font-family:var(--sty-serif);margin:0 0 calc(.5*var(--sty-rem));font-size:calc(1.05*var(--sty-rem));line-height:1.55}
.sty-caption p:last-child{margin-bottom:0}
.sty-big{font-family:var(--sty-sans)!important;font-weight:700;color:var(--sty-black);font-size:calc(2.6*var(--sty-rem))!important;line-height:1!important;margin:0 0 calc(.3*var(--sty-rem))!important}
.sty-legend{font-family:var(--sty-sans)!important;display:flex;flex-wrap:wrap;gap:calc(.4*var(--sty-rem)) calc(1*var(--sty-rem));font-size:calc(.92*var(--sty-rem))!important;margin-top:calc(.3*var(--sty-rem))}
.sty-legend span::before{content:"";display:inline-block;width:.8em;height:.8em;border-radius:2px;margin-right:.35em;vertical-align:-.05em;background:var(--c)}
/* Glossarbegriff mit gelbem Leuchtstift-Strich */
.sty-term{background:none;border:0;padding:0 .05em;box-shadow:inset 0 -.38em 0 var(--sty-accent);cursor:help;font-size:inherit;line-height:inherit;transition:box-shadow .2s}
.sty-term:hover{box-shadow:inset 0 -1.1em 0 var(--sty-accent)}
/* Vergleich mit der eigenen Auswahl */
.sty .sty-cmphead{font-family:var(--sty-sans);font-size:var(--font-size-xxxxs,.8rem);text-transform:uppercase;letter-spacing:.06em;color:var(--sty-muted);margin:1.1em 0 .3em}
.sty .sty-cmpkey{font-family:var(--sty-sans);font-size:var(--font-size-xxxxs,.8rem);color:var(--sty-muted);margin:.9em 0 0}
.sty-cmpkey i{display:inline-block;width:1.6em;height:.95em;border-radius:100vw;vertical-align:-.1em;margin-right:.35em}
.sty-cmpkey i.k-yes{background:var(--sty-accent)}
.sty-cmpkey i.k-no{border:1px dashed var(--sty-muted);margin-left:1em}
.sty-cmp li.is-mine::before{content:"✓ ";font-weight:500}
.sty-cmp{display:flex;flex-wrap:wrap;gap:calc(.35*var(--sty-rem));margin:calc(.4*var(--sty-rem)) 0 0;padding:0;list-style:none}
.sty-cmp li{font-family:var(--sty-sans);font-size:calc(.82*var(--sty-rem));line-height:1.2;padding:calc(.18*var(--sty-rem)) calc(.5*var(--sty-rem));border-radius:100vw;border:1px solid var(--sty-rule)}
.sty-cmp li.is-yes{color:var(--sty-black);background:var(--sty-accent);border-color:var(--sty-accent)}
.sty-cmp li.is-no{color:var(--sty-muted);border-style:dashed}
.sty-cmp li.is-mine{font-weight:500;color:var(--sty-black)}
.sty-cmp li.is-no.is-mine{border-color:var(--sty-black)}

/* Glossar */
.sty-pop{position:absolute;left:50%;bottom:calc(12*var(--sty-rem));transform:translateX(-50%);width:min(calc(30*var(--sty-rem)),calc(100% - calc(2*var(--sty-rem))));
  background:var(--sty-dark);color:#fff;font-family:var(--sty-sans);border-top:5px solid var(--sty-accent);padding:calc(.8*var(--sty-rem)) calc(1*var(--sty-rem));border-radius:0;font-size:calc(.98*var(--sty-rem));line-height:1.5;z-index:5;display:none}
.sty-pop.is-on{display:block}
.sty-pop strong{display:block;margin-bottom:calc(.2*var(--sty-rem))}

/* Notizzettel */
.sty-sheet{position:fixed;inset:auto 0 0 0;max-height:75svh;overflow:auto;background:var(--sty-surface);border-top:5px solid var(--sty-accent);
  padding:calc(1.2*var(--sty-rem)) calc(1.5*var(--sty-rem)) calc(env(safe-area-inset-bottom,0px) + calc(1.5*var(--sty-rem)));z-index:1000;transform:translateY(105%);transition:transform .35s;box-shadow:0 -10px 30px rgba(0,0,0,.18)}
.sty-sheet.is-on{transform:none}
.sty-sheet-in{max-width:calc(40*var(--sty-rem));margin:0 auto}
.sty-sheet h2{font-weight:normal;color:var(--sty-black);font-size:calc(1.8*var(--sty-rem));margin:0 0 calc(.8*var(--sty-rem))}
.sty-sheet ol,.sty-outro ol{margin:0;padding-left:calc(1.3*var(--sty-rem))}
.sty-sheet li,.sty-outro li{font-family:var(--sty-serif);margin-bottom:calc(.5*var(--sty-rem))}
.sty-sheet li::marker,.sty-outro li::marker{font-family:var(--sty-sans);font-weight:500}
.sty-close{float:right;border:0;background:var(--sty-black);color:#fff;font-family:var(--sty-sans);font-size:calc(.85*var(--sty-rem));border-radius:100vw;padding:calc(.3*var(--sty-rem)) calc(1*var(--sty-rem));cursor:pointer}
.sty-empty{color:var(--sty-muted)}

/* Unsichtbare Auslöser, Inhalt bleibt für Screenreader lesbar */
.sty-steps{position:relative;margin-top:calc(-100svh + var(--sty-top));padding-bottom:30vh;z-index:0;pointer-events:none}
.sty-step{height:90vh}
.sty-step>*{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.sty-outro{max-width:calc(42*var(--sty-rem));margin:0 auto;padding:10vh calc(1.5*var(--sty-rem)) 14vh}
.sty-outro h2{font-weight:normal;color:var(--sty-black);font-size:var(--font-size-xxl,2.2rem);line-height:1.15;margin:0 0 calc(1*var(--sty-rem))}
.sty-outro p{margin:0 0 calc(1.5*var(--sty-rem))}
.sty-outro small{display:block;font-family:var(--sty-sans);color:var(--sty-muted);font-size:var(--font-size-xxxs,.9rem);border-top:1px solid var(--sty-rule);padding-top:calc(1*var(--sty-rem));margin-top:calc(2.5*var(--sty-rem))}

@media (max-width:820px){
  .sty-views{height:min(calc(100svh - var(--sty-top) - calc(22*var(--sty-rem))),calc((100vw - calc(2*var(--sty-rem))) / var(--sty-ratio,.75)))}
  .sty-caption{min-height:calc(15.5*var(--sty-rem));padding:calc(.85*var(--sty-rem)) calc(1*var(--sty-rem))}
  .sty-caption h3{font-size:calc(1.1*var(--sty-rem))}
  .sty-caption p{font-size:calc(.96*var(--sty-rem));line-height:1.5}
  .sty-big{font-size:calc(2.1*var(--sty-rem))!important}
  .sty-pagebar{gap:calc(.55*var(--sty-rem));font-size:calc(.75*var(--sty-rem))}
  .sty-notesbtn{font-size:calc(.75*var(--sty-rem));padding:calc(.25*var(--sty-rem)) calc(.3*var(--sty-rem)) calc(.25*var(--sty-rem)) calc(.75*var(--sty-rem))}
  .sty-sp figcaption{font-size:calc(.68*var(--sty-rem))}
  .sty-pop{bottom:calc(14*var(--sty-rem))}
}
/* Anpassungen an staefa-versorgt.ch (assets/styles/style.css) */
/* overflow-x:hidden auf html und body verhindert position:sticky. clip schneidet gleich ab, ohne Scrollcontainer. */
html:has(.sty),body:has(.sty){overflow-x:clip}
/* section und footer sind dort ein 12-Spalten-Raster mit grossen Abständen */
.sty section,.sty footer,.sty header{display:block;margin-top:0}
.sty-outro{font-family:inherit;font-size:var(--font-size-base,1.125rem)}
.sty-outro p{font-family:var(--serif,inherit);font-size:inherit}
/* article h2 ist dort serifenlos */
.sty-outro h2,.sty-sheet h2{font-family:var(--serif,inherit)}
/* p:not(:last-of-type) setzt dort eigene Abstände */
/* Titel und Untertitel nutzen h4 und h3.lead.line der Website (wie im Artikel) */
.sty-intro-head h3.lead p{margin:0}
/* Im Artikel verkleinert .blog h3 den Lead auf 1.2rem, die Geschichte steht nicht in .blog */
.sty .sty-intro-head h3.lead{font-size:1.2rem;margin-top:1em}
.sty .sty-kicker{margin:0 0 calc(1.2*var(--sty-rem))}
.sty .sty-ask{margin:0 0 calc(1*var(--sty-rem))}
.sty .sty-hint{margin:0}
.sty .sty-empty{margin:0}
/* button hat dort Abstand, runde Ecken und einen dunklen Hover */
.sty :where(button){margin:0}
.sty .sty-term{border-radius:0}
.sty-term:hover{background-color:transparent}
.sty-chip:hover{background-color:var(--sty-surface);border-color:var(--sty-black)}
.sty-chip[aria-pressed="true"]:hover,.sty-notesbtn:hover,.sty-close:hover{background-color:var(--sty-dark)}
/* strong ist dort schwarz, em unterstrichen */
.sty-pop strong{color:var(--sty-accent);font-size:1em;display:block}
.sty-ghost em{text-decoration:none}
/* Menüknopf oben rechts ist fixiert und würde auf schmalen Bildschirmen den Notizen-Knopf verdecken */
@media (max-width:820px){.sty{--sty-top:72px}}
@media (max-width:480px){.sty{--sty-top:44px}}
/* ---------------------------------------------------------------
   Layout und Typografie wie die Artikel (templates/article.php)
   12-Spalten-Raster der Website, Titel links, Text rechts.
   Masse in rem folgen hier bewusst der Website.
   --------------------------------------------------------------- */
.sty{color:var(--sty-ink)}
.sty .sty-intro,.sty .sty-outro{max-width:1920px;margin:0 auto;padding:0 1rem;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;font-size:1rem}
/* Luft zwischen Themenauswahl und dem ersten Schritt */
.sty .sty-intro{padding-bottom:calc(12rem + 12vh)}
.sty .sty-outro{padding-top:12rem;padding-bottom:6rem}
/* .sty davor, weil die Website footer > :first-child über alle Spalten legt */
.sty .sty-intro-head,.sty .sty-outro-head{grid-column:2/7;padding-right:3rem}
.sty .sty-intro-body,.sty .sty-outro-body{grid-column:7/12;padding-top:12rem}
.sty .sty-outro-body{padding-top:6rem}

.sty .sty-kicker{font-size:var(--font-size-xxxxs);font-weight:400;letter-spacing:.06em;color:var(--sty-muted);margin:0 0 1rem}
/* Fliesstext wie main im Artikel */
.sty-lead p,.sty-outro p,.sty-outro li{font-family:var(--sty-serif);font-size:1rem;line-height:1.5;color:var(--sty-ink)}
.sty-lead p{margin:0 0 1em}
.sty-lead p+p{text-indent:2rem}
.sty .sty-ask{font-family:var(--sty-serif);font-size:1rem;color:var(--sty-ink);margin:2rem 0 1rem}
.sty-chip{font-size:var(--font-size-xxxxs)}
.sty .sty-hint{font-size:var(--font-size-xxxxs);margin-top:1rem}
.sty-outro h2{font-family:var(--sty-sans);font-weight:300;text-transform:uppercase;font-size:var(--font-size-md);line-height:1.1;color:var(--sty-ink);margin:0 0 2rem}
.sty-outro ol{padding-left:1.4em}
.sty-outro small{font-size:var(--font-size-xxxxs);margin-top:3rem;border-top:0;padding-top:0}

/* Textbox: Zwischentitel wie .blog h3, ohne Fettung, grau */
.sty-caption{position:relative;border-left:0;padding:calc(1.4*var(--sty-rem) + 5px) 0 calc(1*var(--sty-rem))}
.sty-caption::before{content:"";position:absolute;left:0;top:0;width:33%;height:5px;background:var(--sty-accent)}
.sty-caption h3{font-weight:normal;color:var(--sty-ink)}
.sty-big{color:var(--sty-ink)}
/* Kleingedrucktes unter dem Text, etwa zu Schwärzungen */
.sty .sty-caption .sty-small{font-family:var(--sty-sans);font-size:var(--font-size-xxxxs,.8rem);line-height:1.4;color:var(--sty-muted);margin:1em 0 0;padding-top:.6em;border-top:1px solid var(--sty-rule)}

/* Tablet wie Artikel: Spalten 4/12 und 5/12 */
@media (min-width:768px) and (max-width:1024px){
  .sty .sty-intro-head,.sty .sty-outro-head{grid-column:3/12;padding-right:0}
  .sty .sty-intro-body,.sty .sty-outro-body{grid-column:4/12;padding-top:6rem}
}
/* Handy: eine Spalte */
@media (max-width:767px){
  .sty .sty-intro-head,.sty .sty-outro-head,.sty .sty-intro-body,.sty .sty-outro-body{grid-column:1/-1;padding-right:0}
  .sty .sty-intro-body{padding-top:8rem}
  .sty .sty-outro-body{padding-top:3rem}
  .sty .sty-intro{padding-bottom:calc(6rem + 15vh)}
  .sty .sty-outro{padding-top:6rem}
}

/* Grosse Bildschirme: Dokument links wie das Bild im Artikel, Text rechts in Spalte 7 bis 11 */
@media (min-width:1025px){
  .sty{--sty-top:0px}
  .sty-stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);gap:calc(.8*var(--sty-rem)) 0;
    align-items:stretch;max-width:1920px;margin:0 auto;padding:calc(1.2*var(--sty-rem)) 1rem calc(1.5*var(--sty-rem))}
  .sty-topbar{grid-column:1/7;grid-row:1;width:auto;padding-right:3rem}
  .sty-views{grid-column:1/7;grid-row:2;width:auto;height:auto;padding-right:3rem}
  .sty-viewer{height:min(100%,calc(100cqw / var(--sty-ratio,.75)))}
  .sty-caption{grid-column:7/12;grid-row:1/3;align-self:center;width:auto;margin:0;min-height:0;max-height:calc(100svh - 4rem);
    background:none;border:0;padding:calc(2em + 5px) 0 0;position:relative;font-size:1rem}
  .sty-caption h3{font-size:1.2rem;line-height:1.25;margin:0 0 .5em}
  .sty-caption p{font-size:1rem;line-height:1.5;margin:0 0 .6em}
  .sty-big{font-size:var(--font-size-xxxxl)!important;margin:0 0 .3em!important}
  .sty-legend{font-size:var(--font-size-xxxxs)!important;gap:.3em 1.2em}
  .sty-cmp li{font-size:var(--font-size-xxxxs)}
  .sty-views{justify-content:flex-start}
  .sty-spread{right:3rem}
  .sty-pop{left:calc(1rem + (100% - 2rem) * 6 / 12);width:calc((100% - 2rem) * 5 / 12);bottom:calc(1.5*var(--sty-rem));transform:none;font-size:var(--font-size-xxxxs)}
  .sty-steps{margin-top:-100svh}
}
/* Vergleich auf Handy und Tablet: Dokument kleiner, damit die Auswahl ganz sichtbar ist */
@media (max-width:1024px){
  .sty-views{transition:height .5s}
  .sty-stage.is-compare .sty-views{height:19svh}
  .sty-stage.is-compare .sty-caption{max-height:none;flex:1;min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .sty *{transition:none!important;animation:none!important}
}
.sty [hidden]{display:none!important}
/* Handy: Dokument in voller Breite, gezeigt wird nur der markierte Ausschnitt */
@media (max-width:767px){
  .sty-views{height:max(calc(13*var(--sty-rem)),calc(100svh - var(--sty-top) - calc(22*var(--sty-rem))))}
  .sty-viewer{width:100%;height:100%;aspect-ratio:auto;background:#fff}
  .sty-inner{inset:auto;left:0;top:0;width:100%;height:auto;aspect-ratio:var(--sty-ratio,.75)}
}