/* Bildschirmfassung der catdesk-Broschuere: Rahmen, Navigation, Handlungsaufforderung.
   Die Seiteninhalte nutzen unveraendert brochure.css (Druckgestaltung in mm/pt). */
:root{--bg:#e7edf5;--sheet:#ffffff;--bar:#ffffff;--bar-line:#d6dfeb;--z:1;--w:calc(210mm * var(--z))}
/* Auf breiten Bildschirmen das Blatt vergroessern, damit Bildschirmfotos und Texte gut lesbar sind */
@media (min-width:1100px){:root{--z:1.22}}
@media (min-width:1400px){:root{--z:1.4}}
html{background:var(--bg)}
body{background:var(--bg);margin:0}
a{color:var(--blue)}

/* Kopfleiste */
.topbar{position:sticky;top:0;z-index:20;background:var(--bar);border-bottom:1px solid var(--bar-line);box-shadow:0 1px 6px rgba(22,63,124,.06)}
.tb-in{max-width:var(--w);margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px;box-sizing:border-box}
.tb-logo img{display:block;height:30px;width:auto}
.tb-toc{font:700 13px var(--f-head);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--blue);padding:7px 12px;border:1px solid var(--line);border-radius:8px}
.tb-toc:hover{background:var(--blue-l)}
.tb-pos{margin-left:auto;font:500 13px var(--f-body);color:var(--muted);white-space:nowrap}
.tb-nav{display:flex;gap:6px}
.tb-nav a,.tb-nav span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--line);font:600 22px/1 var(--f-body);text-decoration:none;color:var(--blue);background:#fff}
.tb-nav a:hover{background:var(--blue-l)}
.tb-nav span{color:#c3cdda}

/* Blatt */
.sheet{width:210mm;zoom:var(--z);max-width:100%;margin:20px auto 0;background:var(--sheet);box-shadow:0 6px 24px rgba(22,63,124,.12);box-sizing:border-box;padding:16mm 16mm 14mm}
.sheet-cover,.sheet-back{padding:0;overflow:hidden}
.sheet section.page{break-after:auto}
.sheet section[style*="height"]{height:auto!important}
.sheet a{text-decoration:none}
.sheet a:hover .t{color:var(--blue)}

/* Handlungsaufforderung */
.act{width:var(--w);max-width:100%;box-sizing:border-box;margin:16px auto 0;background:var(--blue);color:#fff;border-radius:12px;padding:22px 26px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.act h2{font:800 22px/1.15 var(--f-head);color:#fff;margin:0 0 6px}
.act p{margin:0;font-size:15px;line-height:1.45;color:#dbe7f7;max-width:440px}
.act-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.act-btn{display:inline-block;background:var(--orange);color:#fff;font:700 15px var(--f-head);letter-spacing:.02em;text-decoration:none;padding:11px 20px;border-radius:8px}
.act-btn:hover{background:#d98200;color:#fff}
.act-link{color:#fff;font:600 14px var(--f-body);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.act-link:hover{border-bottom-color:#fff;color:#fff}
.act a:focus-visible,.pager a:focus-visible,.topbar a:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* Seitenwechsel unten */
.pager{width:var(--w);max-width:100%;box-sizing:border-box;margin:14px auto 0;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.pager a{display:flex;flex-direction:column;justify-content:center;gap:2px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;text-decoration:none;color:var(--ink);min-width:0}
.pager a:hover{border-color:var(--blue);background:var(--blue-l)}
.pager small{font:700 11px var(--f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pager span{font:700 16px/1.2 var(--f-head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pager .nv-next{text-align:right;align-items:flex-end}
.pager .nv-toc{justify-content:center;align-items:center;font:700 13px var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.pager .off{visibility:hidden}
.sitefoot{width:var(--w);max-width:100%;box-sizing:border-box;margin:18px auto 30px;padding:0 4px;font-size:12.5px;color:var(--muted);text-align:center}
.sitefoot a{color:var(--muted)}

/* Schmale Bildschirme: Inhalt fliesst einspaltig, Deckblatt und Rueckseite werden skaliert (site.js) */
@media (max-width:840px){
  .sheet{width:auto}
  .tb-in{gap:10px;padding:8px 12px}
  .tb-logo img{height:24px}
  .tb-pos{font-size:12px}
  .sheet{margin:12px 0 0;box-shadow:none;padding:22px 16px}
  .sheet-cover,.sheet-back{padding:0}
  .sheet .shots,.sheet .lists,.sheet .vendor,.sheet .toc-cols,.sheet .ind-grid,.sheet .cta,.sheet .toc-legend{grid-template-columns:minmax(0,1fr)!important}
  .sheet .facts,.sheet .phones,.sheet .flow,.sheet .dl-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sheet .mhead img,.sheet .intro-top img{height:22px}
  .sheet table{display:block;overflow-x:auto}
  .sheet .mtitle h2{font-size:26px}
  .act{border-radius:0;padding:20px 16px;margin-top:0}
  .pager{padding:0 12px;grid-template-columns:1fr 1fr}
  .pager .nv-toc{grid-column:1 / -1;grid-row:2}
  .sitefoot{padding:0 16px}
}
@media (max-width:420px){
  .sheet .facts,.sheet .flow,.sheet .dl-grid{grid-template-columns:minmax(0,1fr)!important}
  .tb-pos{display:none}
}
@media print{.topbar,.act,.pager,.sitefoot{display:none}.sheet{box-shadow:none;margin:0}}