/* Vega-Magazin, Teil der Seite uebersicht (v4, 4.11.2026). Wird nach magazin.css geladen.
   Jeder Selektor beginnt mit body.vm.a-<kurz>. */
/* ===== Teil uebersicht ===== */
/* Teil uebersicht · nur Regeln dieses Artikels. Jeder Selektor beginnt mit body.vm.a-uebersicht. Kein content:"…" mit Buchstaben oder Ziffern. */
/* Übersicht /ratgeber (plan-uebersicht.md mit „Geändert im Abgleich“): Titelbild-Kopf S17 bibliothek, Signatur Ratgeber-Regal
   (Höhe = Lesezeit), Heft-Karten mit Lesezeit-Uhr, Abschluss als Karte mit dem Schaufenster. Werte setzt der Generator
   (--n, --max, --min, --kf, --i), hier steht keine Zahl aus dem Text fest. */

/* ---------- Kopf ---------- */
/* DE AT als Kennzahl: Clash 600, voll gefüllt, zählt nie. Trennstrich als leeres <i>. */
body.vm.a-uebersicht .vm-kz-land{display:flex;flex:none;align-items:center;gap:.2em;font-family:var(--f-disp);font-weight:600;letter-spacing:0}
body.vm.a-uebersicht .vm-kz-land i{display:block;flex:none;width:2px;height:.66em;border-radius:1px;background:currentColor;opacity:.32}
/* Das Gesicht der Szene liegt bei 57 bis 71 % der Bildbreite: die Titelkarte bleibt unter 1280 px bei Spalte 1 bis 6 */
@media (min-width:1024px) and (max-width:1279px),(min-width:641px) and (max-width:1279px) and (orientation:landscape){
  body.vm.a-uebersicht .vm-kopf.szene .vm-titelkarte{grid-column:1/7}
}

/* ---------- Band: Regal und Hefte (Papier) ---------- */
body.vm.a-uebersicht .vm-uebersicht{align-items:start;row-gap:24px}

/* Signatur: das Ratgeber-Regal. Vitrine (weiße Karte mit Galerielicht), Brett aus Nussbaum mit Messingkante,
   je Ratgeber ein Rücken in seiner Leitfarbe, Höhe = Minuten Lesezeit (Achse ab null), Zahl unter dem Brett. */
body.vm.a-uebersicht .vm-regal{--minute:clamp(19px,3svh,30px);--rg:clamp(5px,.55vw,9px);--zh:clamp(20px,1.6vw,26px);
  position:relative;padding:clamp(18px,2.6svh,26px) clamp(16px,1.5vw,24px) clamp(14px,2svh,20px);border-radius:var(--r-l);
  background:radial-gradient(120% 64% at 50% 0%,rgba(255,206,140,.3),rgba(255,206,140,0) 64%),#fff;box-shadow:var(--sch-karte)}
body.vm.a-uebersicht .vm-regal-reihe{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));column-gap:var(--rg);
  align-items:end;min-height:calc(var(--max) * var(--minute) + 22px + var(--zh) + 30px);padding-inline:4px}
/* Brett: Messingkante oben, Nussbaum, weicher Schatten. Oberkante = Unterkante der Rücken. */
body.vm.a-uebersicht .vm-regal-reihe::after{content:"";position:absolute;left:-6px;right:-6px;bottom:calc(var(--zh) + 12px);height:10px;border-radius:3px;
  background:linear-gradient(180deg,#E6C48F 0 2px,#7A5232 2px 4px,var(--kork-rahmen) 4px 100%);box-shadow:0 12px 18px -10px rgba(52,28,8,.55);
  transform-origin:0 50%;transition:transform .6s var(--ease)}
body.vm.a-uebersicht .vm-regal-heft{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;min-width:0;color:var(--tinte);text-decoration:none;
  -webkit-tap-highlight-color:transparent}
body.vm.a-uebersicht .vm-ruecken{--folie:rgba(255,255,255,.5);position:relative;display:block;height:calc(var(--min) * var(--minute));border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,transparent 0 11px,var(--folie) 11px 13px,transparent 13px),
    linear-gradient(0deg,transparent 0 9px,var(--folie) 9px 11px,transparent 11px),
    linear-gradient(90deg,rgba(255,255,255,.24),rgba(255,255,255,0) 42%,rgba(7,18,38,0) 66%,rgba(7,18,38,.16)),var(--kf);
  box-shadow:inset 0 0 0 1.5px rgba(7,18,38,.22);transform-origin:50% 100%;
  transition:transform var(--t-kurz) var(--ease),box-shadow var(--t-kurz) var(--ease)}
body.vm.a-uebersicht .vm-regal-heft.auf-tinte .vm-ruecken{--folie:rgba(7,18,38,.2)}
/* Rückenschild wie auf einem Ordner: weißes Schild mit der Ordnungszahl in Tinte (auf jeder Leitfarbe lesbar) */
body.vm.a-uebersicht .vm-ruecken b{position:absolute;top:19px;left:max(3px,12%);right:max(3px,12%);padding:4px 0 3px;border-radius:3px;background:rgba(255,255,255,.94);
  box-shadow:0 1px 0 rgba(7,18,38,.18),inset 0 0 0 1px rgba(7,18,38,.08);text-align:center;font:600 17px/1 var(--f-disp);letter-spacing:0;color:var(--tinte)}
/* Lesezeichen: hängt am aktiven Rücken (Amber auf dunklen, Tinte auf hellen Leitfarben) */
body.vm.a-uebersicht .vm-ruecken::after{content:"";position:absolute;bottom:calc(100% - 4px);right:12%;width:max(10px,30%);height:22px;background:var(--amber);
  clip-path:polygon(0 0,50% 30%,100% 0,100% 100%,0 100%);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .35s var(--feder)}
body.vm.a-uebersicht .vm-regal-heft.auf-tinte .vm-ruecken::after{background:var(--tinte)}
body.vm.a-uebersicht .vm-regal-min{position:relative;margin-top:22px;text-align:center;font:800 var(--zh)/1 var(--f-text);font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.02em;color:var(--tinte);transition:color .2s}
body.vm.a-uebersicht .vm-regal-min::after{content:"";position:absolute;left:50%;bottom:-9px;width:18px;height:3px;margin-left:-9px;border-radius:2px;background:var(--kf);
  transform:scaleX(0);transition:transform .3s var(--ease)}
body.vm.a-uebersicht .vm-regal-legende{margin-top:16px;padding-top:12px;border-top:1px solid var(--linie-hell);text-align:center;font:600 17px/1.4 var(--f-text);color:var(--grau)}
/* Kopplung: Zeiger oder Fokus auf der Karte hebt ihren Rücken, Zeiger auf dem Rücken hebt die Karte (.hebt aus magazin.js) */
body.vm.a-uebersicht .vm-regal-heft.hebt .vm-ruecken{transform:translateY(-8px)}
@media (hover:hover){
  body.vm.a-uebersicht .vm-regal-heft:hover .vm-ruecken{transform:translateY(-8px)}
}
/* Aktiver Ratgeber (.an aus magazin.js, Karte über 35 % der Fensterhöhe): Rücken tritt vor, Lesezeichen, Zahl unterstrichen */
body.vm.a-uebersicht .vm-regal-heft.an .vm-ruecken{transform:translateY(-12px) scale(1.07);box-shadow:inset 0 0 0 1.5px rgba(7,18,38,.22),0 16px 20px -12px rgba(7,18,38,.6)}
body.vm.a-uebersicht .vm-regal-heft.an .vm-ruecken::after{opacity:1;transform:none}
body.vm.a-uebersicht .vm-regal-heft.an .vm-regal-min{color:var(--link)}
body.vm.a-uebersicht .vm-regal-heft.an .vm-regal-min::after{transform:none}
/* Eintritt (nur mit .warte aus magazin.js): Brett zeichnet sich, Rücken wachsen nacheinander aus dem Brett, dann die Minuten */
body.vm.a-uebersicht .vm-regal.warte .vm-regal-reihe::after{transform:scaleX(0)}
body.vm.a-uebersicht .vm-regal.warte .vm-ruecken{transform:scaleY(0)}
body.vm.a-uebersicht .vm-regal.warte .vm-regal-min{opacity:0}
body.vm.a-uebersicht .vm-regal.da .vm-ruecken{animation:vm-ue-wachs .65s var(--ease) calc(180ms + var(--i,0) * 80ms) backwards}
body.vm.a-uebersicht .vm-regal.da .vm-regal-min{transition:opacity .3s var(--ease) calc(720ms + var(--i,0) * 80ms),color .2s}
@keyframes vm-ue-wachs{from{transform:scaleY(0)}}

/* Heft-Karten: weißes Heft mit Rückenkante in der Leitfarbe, Ordnungszahl auf dem Rücken, zwei Papierkanten unten rechts */
body.vm.a-uebersicht .vm-hefte{list-style:none;display:grid;gap:clamp(16px,2.4svh,26px);margin:0;padding:0}
body.vm.a-uebersicht .vm-heft{--sp:clamp(72px,6.4vw,104px);--stapel:3px 3px 0 -1px #fff,4px 4px 0 -1px var(--linie),7px 7px 0 -2px #fff,8px 8px 0 -2px var(--linie);
  position:relative;transition:opacity var(--t-mittel) var(--ease),transform var(--t-mittel) var(--ease)}
body.vm.a-uebersicht .vm-heft-link{position:relative;display:block;min-height:100%;
  padding:clamp(22px,3svh,30px) clamp(24px,2.8vw,44px) clamp(22px,2.8svh,28px) calc(var(--sp) + clamp(22px,2.2vw,36px));
  background:#fff;border-radius:var(--r-l);color:var(--text);text-decoration:none;box-shadow:var(--stapel),var(--sch-karte);
  transition:transform var(--t-kurz) var(--ease),box-shadow var(--t-kurz) var(--ease)}
body.vm.a-uebersicht .vm-heft-ruecken{position:absolute;left:0;top:0;bottom:0;width:var(--sp);border-radius:var(--r-l) 0 0 var(--r-l);
  background:linear-gradient(180deg,transparent 0 16px,var(--folie,rgba(255,255,255,.45)) 16px 18px,transparent 18px),
    linear-gradient(0deg,transparent 0 14px,var(--folie,rgba(255,255,255,.45)) 14px 16px,transparent 16px),
    linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,0) 46%),var(--kf);
  box-shadow:inset -6px 0 0 rgba(7,18,38,.13),inset 0 0 0 1.5px rgba(7,18,38,.08);transform-origin:50% 0;transition:transform .6s var(--ease) .12s}
body.vm.a-uebersicht .vm-heft.auf-tinte .vm-heft-ruecken{--folie:rgba(7,18,38,.18)}
/* Rückenschild oben, Lesezeit-Uhr unten an der Stelle des Grifflochs: der Rücken liest sich wie ein Ordner im Regal */
body.vm.a-uebersicht .vm-heft-ruecken b{position:absolute;top:clamp(28px,3.6svh,36px);left:14%;right:calc(14% + 6px);padding:10px 0 8px;border-radius:6px;
  background:rgba(255,255,255,.95);box-shadow:0 2px 0 rgba(7,18,38,.16),inset 0 0 0 1px rgba(7,18,38,.08);
  text-align:center;font:600 clamp(28px,2.5vw,38px)/1 var(--f-disp);letter-spacing:-.01em;color:var(--tinte)}
body.vm.a-uebersicht .vm-heft-meta{display:block;font:600 17px/1.5 var(--f-text);color:var(--grau)}
body.vm.a-uebersicht .vm-heft-rechner{display:inline-flex;align-items:center;gap:6px;padding:1px 11px 1px 8px;border-radius:var(--r-pille);background:var(--amber-hell);
  color:var(--amber-text);white-space:nowrap}
body.vm.a-uebersicht .vm-heft-rechner-ikon{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.vm.a-uebersicht .vm-heft h2{max-width:24em;margin:clamp(10px,1.5svh,14px) 0 0;font:600 clamp(26px,2.3vw,36px)/1.08 var(--f-disp);letter-spacing:-.012em;
  color:var(--tinte);text-wrap:balance;text-shadow:none}
body.vm.a-uebersicht .vm-heft p{max-width:62ch;margin-top:10px;font-size:var(--fs-text);line-height:1.55;color:var(--text);text-wrap:pretty}
body.vm.a-uebersicht .vm-heft-mehr{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font:700 17px/1 var(--f-text);color:var(--link)}
body.vm.a-uebersicht .vm-heft-mehr::after{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--i-pfeil) center/contain no-repeat;
  mask:var(--i-pfeil) center/contain no-repeat;transition:transform var(--t-kurz) var(--ease)}

/* Lesezeit-Uhr (zweite datengetragene Grafik): Zifferblatt ohne Zahlen, Sektor = Minuten von 60, Zeiger am Ende des Sektors */
/* Sie sitzt unten auf dem Rücken der Karte: weißes Blatt, der Sektor in der Leitfarbe wirkt wie ein Fenster auf den Rücken. */
body.vm.a-uebersicht .vm-lesezeit{position:absolute;left:0;right:6px;bottom:clamp(28px,3.6svh,36px);display:block;width:clamp(50px,4.1vw,60px);height:auto;aspect-ratio:1;
  margin-inline:auto;overflow:visible;filter:drop-shadow(0 5px 8px rgba(7,18,38,.28))}
body.vm.a-uebersicht .vm-lz-blatt{fill:#fff;stroke:rgba(7,18,38,.16);stroke-width:1}
body.vm.a-uebersicht .vm-lz-marken{fill:none;stroke:rgba(7,18,38,.4);stroke-width:2.4;stroke-dasharray:.35 4.65;stroke-dashoffset:.175;
  transform:rotate(-90deg);transform-origin:20px 20px}
body.vm.a-uebersicht .vm-lz-sektor{fill:none;stroke:var(--kf);stroke-width:14.5;stroke-dasharray:var(--min) 60;stroke-dashoffset:0;
  transform:rotate(-90deg);transform-origin:20px 20px;transition:stroke-dashoffset .9s var(--ease) .3s}
body.vm.a-uebersicht .vm-lz-start{stroke:var(--tinte);stroke-width:1.6;stroke-linecap:round;opacity:.5}
body.vm.a-uebersicht .vm-lz-zeiger{stroke:var(--tinte);stroke-width:2.4;stroke-linecap:round;transform:rotate(calc(var(--min) * 6deg));transform-origin:20px 20px;
  transition:transform .9s var(--ease) .3s}
body.vm.a-uebersicht .vm-lz-achse{fill:var(--tinte)}

/* Eintritt der Karte (nur mit .warte): steigt 22 px, Rückenkante wächst von oben, die Uhr läuft bis zur Lesezeit */
body.vm.a-uebersicht .vm-heft.warte{opacity:0;transform:translateY(22px);scroll-margin-top:22px}
/* scroll-margin gleicht die 22 px aus: Ein Sprung vom Regal zu einer Karte, die noch wartet, landete sonst 22 px zu hoch
   (am Handy mit der Oberkante unter der Nav), weil der Browser das Sprungziel samt Versatz misst */
body.vm.a-uebersicht .vm-heft.warte .vm-heft-ruecken{transform:scaleY(0)}
body.vm.a-uebersicht .vm-heft.warte .vm-lz-sektor{stroke-dashoffset:var(--min)}
body.vm.a-uebersicht .vm-heft.warte .vm-lz-zeiger{transform:rotate(0deg)}

/* Hover und Kopplung: Karte nach vorn, Pfeil rückt */
body.vm.a-uebersicht .vm-heft.hebt .vm-heft-link{transform:translateY(-4px) scale(1.01);box-shadow:var(--stapel),var(--sch-hoch)}
@media (hover:hover){
  body.vm.a-uebersicht .vm-heft-link:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--stapel),var(--sch-hoch)}
  body.vm.a-uebersicht .vm-heft-link:hover .vm-heft-mehr::after{transform:translateX(4px)}
}
/* Ohne JS: dieselbe Kopplung über :has() (Nummern 1 bis 12) */
body.vm.a-uebersicht .vm-uebersicht:has(.vm-heft[data-regal="1"] .vm-heft-link:is(:hover,:focus-visible)) .vm-regal-heft[data-regal="1"] .vm-ruecken,
body.vm.a-uebersicht .vm-uebersicht:has(.vm-heft[data-regal="2"] .vm-heft-link:is(:hover,:focus-visible)) .vm-regal-heft[data-regal="2"] .vm-ruecken,
body.vm.a-uebersicht .vm-uebersicht:has(.vm-heft[data-regal="3"] .vm-heft-link:is(:hover,:focus-visible)) .vm-regal-heft[data-regal="3"] .vm-ruecken,
body.vm.a-uebersicht .vm-uebersicht:has(.vm-heft[data-regal="4"] .vm-heft-link:is(:hover,:focus-visible)) .vm-regal-heft[data-regal="4"] .vm-ruecken,
body.vm.a-uebersicht .vm-uebersicht:has(.vm-heft[data-regal="5"] .vm-heft-link:is(:hover,:focus-visible)) .vm-regal-heft[data-regal="5"] .vm-ruecken,
body.vm.a-uebersicht .vm-uebersicht:has(.vm-heft[data-regal="6"] .vm-heft-link:is(:hover,:focus-visible)) .vm-regal-heft[data-regal="6"] .vm-ruecken,
body.vm.a-uebersicht .vm-uebersicht:has(.vm-heft[data-regal="7"] .vm-heft-link:is(:hover,:focus-visible)) .vm-regal-heft[data-regal="7"] .vm-ruecken,
body.vm.a-uebersicht .vm-uebersicht:has(.vm-heft[data-regal="8"] .vm-heft-link:is(:hover,:focus-visible)) .vm-regal-heft[data-regal="8"] .vm-ruecken,
body.vm.a-uebersicht .vm-uebersicht:has(.vm-heft[data-regal="9"] .vm-heft-link:is(:hover,:focus-visible)) .vm-regal-heft[data-regal="9"] .vm-ruecken,
body.vm.a-uebersicht .vm-uebersicht:has(.vm-heft[data-regal="10"] .vm-heft-link:is(:hover,:focus-visible)) .vm-regal-heft[data-regal="10"] .vm-ruecken,
body.vm.a-uebersicht .vm-uebersicht:has(.vm-heft[data-regal="11"] .vm-heft-link:is(:hover,:focus-visible)) .vm-regal-heft[data-regal="11"] .vm-ruecken,
body.vm.a-uebersicht .vm-uebersicht:has(.vm-heft[data-regal="12"] .vm-heft-link:is(:hover,:focus-visible)) .vm-regal-heft[data-regal="12"] .vm-ruecken{transform:translateY(-8px)}
@media (hover:hover){
  body.vm.a-uebersicht .vm-uebersicht:has(.vm-regal-heft[data-regal="1"]:hover) .vm-heft[data-regal="1"] .vm-heft-link,
  body.vm.a-uebersicht .vm-uebersicht:has(.vm-regal-heft[data-regal="2"]:hover) .vm-heft[data-regal="2"] .vm-heft-link,
  body.vm.a-uebersicht .vm-uebersicht:has(.vm-regal-heft[data-regal="3"]:hover) .vm-heft[data-regal="3"] .vm-heft-link,
  body.vm.a-uebersicht .vm-uebersicht:has(.vm-regal-heft[data-regal="4"]:hover) .vm-heft[data-regal="4"] .vm-heft-link,
  body.vm.a-uebersicht .vm-uebersicht:has(.vm-regal-heft[data-regal="5"]:hover) .vm-heft[data-regal="5"] .vm-heft-link,
  body.vm.a-uebersicht .vm-uebersicht:has(.vm-regal-heft[data-regal="6"]:hover) .vm-heft[data-regal="6"] .vm-heft-link,
  body.vm.a-uebersicht .vm-uebersicht:has(.vm-regal-heft[data-regal="7"]:hover) .vm-heft[data-regal="7"] .vm-heft-link,
  body.vm.a-uebersicht .vm-uebersicht:has(.vm-regal-heft[data-regal="8"]:hover) .vm-heft[data-regal="8"] .vm-heft-link,
  body.vm.a-uebersicht .vm-uebersicht:has(.vm-regal-heft[data-regal="9"]:hover) .vm-heft[data-regal="9"] .vm-heft-link,
  body.vm.a-uebersicht .vm-uebersicht:has(.vm-regal-heft[data-regal="10"]:hover) .vm-heft[data-regal="10"] .vm-heft-link,
  body.vm.a-uebersicht .vm-uebersicht:has(.vm-regal-heft[data-regal="11"]:hover) .vm-heft[data-regal="11"] .vm-heft-link,
  body.vm.a-uebersicht .vm-uebersicht:has(.vm-regal-heft[data-regal="12"]:hover) .vm-heft[data-regal="12"] .vm-heft-link{transform:translateY(-4px) scale(1.01);box-shadow:var(--stapel),var(--sch-hoch)}
}

/* ---------- Abschluss: „einen Anlass“ mit Amber-Unterstrich, zieht beim Eintritt auf (Mechanik von .vm-u) ---------- */
body.vm.a-uebersicht .vm-schluss .vm-u.vm-unterstrich{background-image:linear-gradient(var(--amber),var(--amber));background-size:calc(var(--u,1) * 100%) .12em;
  background-position:0 94%;padding-bottom:.06em}
/* Schaufenster-Karte erst zeichnen, wenn sie in die Nähe kommt. Die Größe steht über aspect-ratio fest (kein Sprung, CLS 0).
   So lädt das lazy Bild erst beim Scrollen: Chrome lädt lazy Bilder sonst bis 3.000 px unter dem Falz voraus, und die
   Übersicht ist kurz (Karte rund 2.650 px unter dem Falz). Erster Bildschirm bleibt bei der Kopf-Szene allein. */
body.vm.a-uebersicht .vm-schluss-bild.karte{content-visibility:auto;background:var(--daemmer-1)}
/* Bild geladen (Teil uebersicht in magazin.js): Karte bleibt gezeichnet, auch wenn sie das Fenster wieder verlässt */
body.vm.a-uebersicht .vm-schluss-bild.karte.offen{content-visibility:visible}

/* ---------- Schlusszeichen: acht kleine Rücken auf einem Brett, mittig im schmalen weißen Band vor dem Fuß ---------- */
body.vm.a-uebersicht .vm-schlusszeichen{padding-block:clamp(30px,4.6svh,44px)}
body.vm.a-uebersicht .vm-schlusszeichen-regal{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:4px;width:max-content;margin-inline:auto;padding:0 8px 4px}
body.vm.a-uebersicht .vm-schlusszeichen-regal::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:2px;
  background:linear-gradient(180deg,#E6C48F 0 1px,var(--kork-rahmen) 1px)}
body.vm.a-uebersicht .vm-schlusszeichen-regal i{display:block;width:9px;height:30px;border-radius:2px 2px 1px 1px;background:var(--kf);box-shadow:inset 0 0 0 1px rgba(7,18,38,.2);
  transform-origin:50% 100%}
body.vm.a-uebersicht .vm-schlusszeichen-regal.da i{animation:vm-ue-wachs .5s var(--ease) calc(var(--i,0) * 60ms) backwards}

/* ---------- Laptop und Tablet quer: Regal klebt links (Spalte 1 bis 4), Hefte rechts (Spalte 5 bis 12) ---------- */
@media (min-width:1024px),(min-width:641px) and (orientation:landscape){
  body.vm.a-uebersicht .vm-regal{grid-column:1/5;position:sticky;top:calc(var(--nav) + 28px)}
  body.vm.a-uebersicht .vm-hefte{grid-column:5/13}
  /* Abschluss: Text eine Spalte breiter als im Kartenmuster, damit die Überschrift in vier Zeilen bleibt */
  body.vm.a-uebersicht .vm-schluss:has(.vm-schluss-bild.karte) .vm-schluss-text{grid-column:7/13;padding-left:clamp(8px,2.6vw,48px)}
}
/* Unter 1280 px bekommt das Regal eine Spalte mehr, damit jeder Rücken sein Schild tragen kann (Rücken mindestens rund 30 px) */
@media (min-width:1024px) and (max-width:1279px),(min-width:641px) and (max-width:1279px) and (orientation:landscape){
  body.vm.a-uebersicht .vm-regal{grid-column:1/6}
  body.vm.a-uebersicht .vm-hefte{grid-column:6/13}
  body.vm.a-uebersicht .vm-heft{--sp:clamp(64px,7vw,84px)}
}

/* ---------- Handy (bis 640 px oder Hochformat bis 1023 px) ---------- */
@media (max-width:640px),(max-width:1023px) and (orientation:portrait){
  /* Die Nav ist am Handy 77 px hoch, magazin.css rechnet mit 64 px: sonst lägen die obersten 13 px der Szene unter der Nav
     (dort stehen die Mappen) und Sprungziele landeten 11 px unter ihrer Kante */
  body.vm.a-uebersicht{--nav:77px}
  /* Kopf-Szene bis quadratisch statt 4 : 3: Adler und Mappen groß. Gedeckelt, damit H1 und Kennzahlen im ersten Bildschirm
     bleiben (rund 440 px darunter), nie flacher als 4 : 3 (75vw). width:100 %, sonst schrumpft die Breite mit dem Deckel. */
  body.vm.a-uebersicht .vm-kopf-szene{width:100%;aspect-ratio:1/1;max-height:max(75vw,min(56svh,100svh - 440px))}
  body.vm.a-uebersicht .vm-uebersicht{row-gap:20px}
  body.vm.a-uebersicht .vm-regal{--minute:clamp(10px,1.55svh,13px);--rg:6px;--zh:20px;padding:16px 14px 12px}
  body.vm.a-uebersicht .vm-regal-reihe{min-height:calc(var(--max) * var(--minute) + 22px + var(--zh) + 24px);padding-inline:2px}
  body.vm.a-uebersicht .vm-ruecken b{top:16px;left:2px;right:2px}
  body.vm.a-uebersicht .vm-ruecken::after{height:13px}
  body.vm.a-uebersicht .vm-regal-legende{margin-top:14px;padding-top:10px}
  body.vm.a-uebersicht .vm-heft{--sp:52px}
  body.vm.a-uebersicht .vm-heft-link{padding:22px 18px 20px calc(var(--sp) + 18px)}
  body.vm.a-uebersicht .vm-heft-ruecken{background:linear-gradient(180deg,transparent 0 12px,var(--folie,rgba(255,255,255,.45)) 12px 14px,transparent 14px),
    linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,0) 46%),var(--kf);box-shadow:inset -4px 0 0 rgba(7,18,38,.13)}
  body.vm.a-uebersicht .vm-heft-ruecken b{top:24px;left:7px;right:11px;padding:6px 0 5px;border-radius:4px;font-size:19px}
  body.vm.a-uebersicht .vm-heft h2{font-size:clamp(24px,6.6vw,28px);line-height:1.1}
  body.vm.a-uebersicht .vm-heft-meta{line-height:1.45}
  body.vm.a-uebersicht .vm-lesezeit{right:4px;bottom:20px;width:36px}
  body.vm.a-uebersicht .vm-heft.warte .vm-heft-ruecken{transform:none}
}

/* ---------- Druck ---------- */
@media print{
  body.vm.a-uebersicht .vm-regal{display:none}
  body.vm.a-uebersicht .vm-hefte{grid-column:1/-1}
  body.vm.a-uebersicht .vm-heft-link{box-shadow:none;border:1px solid var(--linie)}
  body.vm.a-uebersicht .vm-heft{opacity:1;transform:none}
}