/* Reading layout for the manual generated from docs/marketing/bedienungsanleitung. */
.nav{flex-wrap:wrap;gap:8px 24px}
.manual-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.65fr);gap:64px;align-items:center;margin-bottom:48px}
.manual-intro h2{margin-bottom:22px}
.manual-intro .actions{margin-top:28px}
.manual-intro .small{margin-top:14px}
.manual-cover img{width:100%;border-radius:var(--r-md)}
.manual-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}
.manual-toc{position:sticky;top:120px;font-size:var(--fs-sm);line-height:1.45}
.manual-toc h3{font:600 var(--fs-xs) var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--stone-500);margin-bottom:14px}
.manual-toc ol{list-style:none;margin:0;padding:0}
.manual-toc li+li{border-top:1px solid var(--stone-200)}
.manual-toc a{display:flex;gap:12px;align-items:baseline;padding:12px 0;color:var(--interactive);text-decoration:none}
.manual a:not(.button),.manual a:not(.button):hover{text-decoration:none;font-weight:700}
.manual-toc .manual-number{font-variant-numeric:tabular-nums;color:var(--gold-deep);font-weight:600;flex:none}
.manual-chapters{min-width:0}
.manual-chapters>.small{margin-bottom:24px}
.manual-chapter{margin:0;border-top:1px solid var(--stone-300)}
.manual-chapter:last-child{border-bottom:1px solid var(--stone-300)}
.manual-chapter>summary{padding:24px 0;gap:18px;align-items:baseline}
.manual-chapter>summary .manual-number{font:600 var(--fs-md) var(--font-sans);color:var(--gold-deep);flex:none}
.manual-chapter>summary h3{font-size:var(--fs-lg);flex:1;line-height:1.35}
.manual-chapter[open]>summary{padding-bottom:28px}
.manual-chapter:target>summary h3{color:var(--interactive)}
.manual-chapter>.manual-body{padding:0 0 36px;font-size:var(--fs-md);line-height:1.75;color:var(--ink-soft);overflow-wrap:anywhere}
.manual-body p{max-width:70ch;margin:0 0 18px}
.manual-body strong,.manual-body b{font-weight:600;color:var(--ink)}
.manual-body h4{font:600 var(--fs-lg)/1.35 var(--font-serif);margin:32px 0 14px;color:var(--ink)}
.manual-body h5{font:600 var(--fs-md)/1.4 var(--font-sans);margin:24px 0 12px;color:var(--ink)}
.manual-body ul,.manual-body ol{padding-left:24px;list-style:revert;margin:16px 0 24px}
.manual-body li{margin-bottom:10px}
.manual-body a{color:var(--interactive)}
.manual-body .kapitel-kopf{margin-bottom:28px}
/* Das generierte Markup liefert sechs minimal verschiedene --ton-Werte.
   Die Unterschiede sind zu klein, um als System gelesen zu werden, aber
   gross genug, dass die Kanten auffallen. Eine Flaeche fuer alle. */
.manual-body .band{background:var(--paper-alt);border:1px solid var(--stone-200);border-radius:var(--r-md);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center}
.manual-body .band img{width:100%}
.manual-body .bandsatz{padding:24px;margin:0;font:italic 600 var(--fs-md)/1.55 var(--font-serif);color:var(--ink-soft)}
.manual-body .vorspann{font-size:var(--fs-md);color:var(--stone-600)}
.manual-body .merksatz{font:italic 600 var(--fs-lg)/1.5 var(--font-serif);padding:24px 0;margin:28px 0;border-block:1px solid var(--stone-300);color:var(--ink)}
.manual-body .hinweis,.manual-body .koshka{background:var(--paper-alt);border-radius:var(--r-md);padding:24px;margin:28px 0}
.manual-body .koshka{display:grid;grid-template-columns:90px minmax(0,1fr);gap:24px;align-items:start}
.manual-body .koshka img{width:100%;height:auto}
.manual-body .koshka-titel,.manual-body .kanal-titel{font:600 var(--fs-lg)/1.4 var(--font-serif);color:var(--ink)}
.manual-body .koshka p:last-child,.manual-body .kanal p:last-child{margin-bottom:0}
.manual-body .quelle{font-size:var(--fs-sm);color:var(--stone-600)}
.manual-body figure{margin:24px 0;min-width:0}
/* Die Ausschnitte kommen randlos aus capture-manual-images.mjs; Rand und
   Rundung setzt ab hier das Stylesheet — eine Rahmung statt zweier, und
   dieselbe Form wie die Screenshot-Kacheln auf der Seite. */
.manual-body figure img{width:auto;max-width:100%;height:auto;max-height:620px;margin-inline:auto;border:1px solid var(--stone-300);border-radius:var(--r-md)}
/* Nur so breit wie das Bild: sonst sitzt die Lupe am Rand der Spalte
   statt am Bild und schwebt daneben in der Leere. Die Mindesthoehe greift
   nur bei sehr flachen Bildern wie der Schrittreiter-Leiste, die auf
   schmalen Geraeten sonst unter die Mindestgroesse fuer Tippziele faellt. */
.manual-image-link{position:relative;display:flex;align-items:center;width:fit-content;max-width:100%;min-height:24px;margin-inline:auto;min-width:0;padding:0;cursor:zoom-in}
.manual-image-link .magnify{top:12px;right:12px}
.manual-body .manual-image-link:hover img{outline:2px solid var(--interactive);outline-offset:3px}
.manual-body figcaption{margin-top:12px;line-height:1.6}
.manual-body .paar,.manual-body .mobil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.manual-body .mobil img{max-height:500px}
.manual-body{counter-reset:manual-step}
.manual-body .schritte{margin-top:28px}
.manual-body .schritt{position:relative;padding-left:46px;margin-bottom:28px}
.manual-body .schritt:before{counter-increment:manual-step;content:counter(manual-step,decimal-leading-zero);position:absolute;left:0;top:2px;font:600 var(--fs-lg) var(--font-serif);color:var(--gold-deep)}
.manual-body .schritt h4{margin-top:0}
.manual-body .geschafft{border-left:2px solid var(--gold);padding-left:16px;color:var(--stone-600)}
.manual-body .bereich{margin-top:32px}
.manual-body .bereich-kopf{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.manual-body .bereich-kopf h4{margin:0}
.manual-body .bereich-kopf .nr{color:var(--gold-deep);font-weight:600}
.manual-body .gruppe{font-size:var(--fs-xs);color:var(--stone-600);text-transform:uppercase;letter-spacing:.08em}
.manual-body table{width:100%;border-collapse:collapse;margin:20px 0 28px;font-size:var(--fs-sm);line-height:1.6;table-layout:fixed}
.manual-body th,.manual-body td{padding:14px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--stone-200);hyphens:auto}
.manual-body th{font-weight:600;color:var(--ink)}
.manual-body th:first-child,.manual-body td:first-child{padding-left:0}
.manual-body th:last-child,.manual-body td:last-child{padding-right:0}
.manual-body .ueberblick td:first-child{width:30%;font-weight:600}
.manual-body .schlussseite{margin-top:32px}
.manual-body .schwestern{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;font-size:var(--fs-sm)}
.manual-body .schwestern .marke{height:54px;display:flex;gap:8px;align-items:center;margin-bottom:16px}
.manual-body .schwestern .marke img{width:auto;max-width:100%;height:42px;object-fit:contain}
.manual-body .schwestern .marke-mood .wort{height:auto;max-width:calc(100% - 50px)}
.manual-body .schwestern a{display:block;margin-bottom:8px;overflow-wrap:anywhere;font-size:var(--fs-xs)}
.manual-body .kanal{display:flex;gap:20px;align-items:flex-start;padding:24px;border-radius:var(--r-md);background:var(--paper-alt);margin-top:24px}
.manual-body .kanal>img{width:64px;height:64px;border-radius:var(--r-full);flex:none}
.manual-body .kanal a{overflow-wrap:anywhere;font-size:var(--fs-sm)}
/* "Weiter zu Kapitel N" steht unmittelbar ueber der Ueberschrift desselben
   Kapitels und bietet dieselbe Aktion an wie diese. Der Hinweis wird aus
   dem Handbuch generiert, deshalb hier ausgeblendet statt im Markup entfernt. */
.manual-chapter-end{display:none}
.manual-chapter-end--unused{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:32px;border-top:1px solid var(--stone-200);padding-top:20px;font-size:var(--fs-sm)}
.manual-print-link{font-size:var(--fs-sm);margin-top:24px}
@media(max-width:1080px){
  .header-inner{flex-wrap:wrap;padding-block:12px;gap:8px 24px}
  .nav{order:3;width:100%;justify-content:center;border-top:1px solid var(--stone-200);padding-top:4px}
  .manual-chapter{scroll-margin-top:60px}
  .manual-toc{top:174px}
  .manual-layout{grid-template-columns:205px minmax(0,1fr);gap:32px}
  .manual-intro{gap:36px}
  .manual-body .band{grid-template-columns:1fr}
}
@media(max-width:900px){
  .manual-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .manual-toc{position:static}
  .manual-toc ol{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
  .manual-toc li{border-top:1px solid var(--stone-200)}
  .manual-body .band{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nav{justify-content:space-between;gap:0 16px}
  .manual-intro{grid-template-columns:1fr;gap:28px;margin-bottom:32px}
  .manual-cover{max-width:440px}
  .manual-chapter{scroll-margin-top:0}
  .manual-chapter>summary{gap:12px;padding-block:20px}
  .manual-body .band{grid-template-columns:1fr}
  .manual-body .band img{max-height:240px;object-fit:cover}
  .manual-body .bandsatz{padding:20px}
  .manual-body .paar,.manual-body .mobil,.manual-body .schwestern{grid-template-columns:1fr;gap:8px}
  .manual-body .schwestern{gap:28px}
  .manual-body .koshka{grid-template-columns:60px minmax(0,1fr);gap:16px;padding:18px}
  .manual-body .hinweis{padding:18px}
  .manual-body th,.manual-body td{padding:12px 6px}
  .manual-body .kanal{padding:18px;gap:16px;flex-wrap:wrap}
  .manual-body .schritt{padding-left:34px}
}
@media(max-width:420px){
  .manual-toc ol{grid-template-columns:1fr}
  .manual-body .koshka{grid-template-columns:1fr}
  .manual-body .koshka>img{width:72px}
}
@media(max-height:680px){.manual-toc{position:static}}
@media print{
  .manual-toc,.manual-chapter-end,.manual-print-link{display:none}
  .manual-layout,.manual-intro{display:block}
  .manual-cover{max-width:300px}
  .manual-chapter>.manual-body{display:block!important}
  .manual-chapter>summary:after{display:none}
  .manual-body h4,.manual-body h5{break-after:avoid}
}