@font-face{font-family:Barlow;font-weight:400;src:url(fonts/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-weight:500;src:url(fonts/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-weight:600;src:url(fonts/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-weight:400;font-style:italic;src:url(fonts/barlow-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:BSC;font-weight:600;src:url(fonts/barlow-semi-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:BSC;font-weight:700;src:url(fonts/barlow-semi-condensed-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:BSC;font-weight:800;src:url(fonts/barlow-semi-condensed-latin-800-normal.woff2) format('woff2')}

/* Gestaltung: A4 hoch, catdesk-Blau als Leitfarbe, Orange als Akzent (wie Logo), Barlow / Barlow Semi Condensed */
:root{
  --blue:#1d5bb0; --blue-d:#163f7c; --blue-l:#e9f0fa; --orange:#f39200; --orange-l:#fff3e0;
  --ink:#16223a; --muted:#56657d; --line:#d6dfeb; --paper:#ffffff; --tint:#f4f7fb;
  --f-head:BSC,"Arial Narrow",Arial,sans-serif; --f-body:Barlow,Arial,sans-serif;
}


html,body{margin:0;padding:0;background:#fff}
body{font:400 10.5pt/1.5 var(--f-body);color:var(--ink);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.page{break-after:page;position:relative}
.page:last-child{break-after:auto}
h1,h2,h3,h4{font-family:var(--f-head);margin:0;color:var(--ink);line-height:1.1}
p{margin:0}

/* ── Seite: Über catdesk ───────────────────────── */
.intro-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:5mm;border-bottom:1px solid var(--line)}
.intro-top img{height:8mm;width:auto}
.intro-top span{font:600 8.5pt var(--f-body);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.eyebrow{font:700 9pt var(--f-head);color:var(--orange);letter-spacing:.14em;text-transform:uppercase}
.intro-head{margin-top:7mm}
.intro-head h1{font-size:30pt;font-weight:800;margin-top:2mm;letter-spacing:-.01em}
.intro-head h1 em{font-style:normal;color:var(--blue)}
.intro-text{margin-top:5mm;font-size:12pt;line-height:1.55;max-width:165mm}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:3.5mm;margin-top:7mm}
.fact{background:var(--blue-l);border-radius:3mm;padding:3.5mm 4mm}
.fact b{display:block;font:800 19pt var(--f-head);color:var(--blue);line-height:1}
.fact span{display:block;margin-top:1.5mm;font-size:8.8pt;line-height:1.3;color:var(--ink)}
.shot{margin-top:6mm;border-radius:2.5mm;overflow:hidden;border:1px solid var(--line);box-shadow:0 2mm 6mm rgba(22,63,124,.12)}
.shot img{display:block;width:100%;height:auto}
.caption{margin-top:2mm;font-size:8.5pt;color:var(--muted)}
.vendor{margin-top:6mm;display:grid;grid-template-columns:1fr 1fr;gap:8mm;align-items:start;
  background:var(--tint);border-radius:3mm;padding:5mm 6mm}
.vendor img{width:100%;height:auto}
.vendor h4{font:700 9pt var(--f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2mm}
.vendor p{font-size:9pt;line-height:1.45}

/* ── Modulseiten (Core und Plugins) ───────────── */
.mhead{display:flex;justify-content:space-between;align-items:center;padding-bottom:4mm;border-bottom:1px solid var(--line)}
.mhead .crumb{font:600 8.5pt var(--f-body);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.mhead img{height:6mm;width:auto}
.mtitle{margin-top:4mm;display:flex;gap:5mm;align-items:flex-start}
.mtitle .ico{flex:0 0 14mm;height:14mm;border-radius:3.5mm;background:var(--blue);display:flex;align-items:center;justify-content:center}
.mtitle .ico svg{width:8mm;height:8mm}
.mtitle h2{font-size:24pt;font-weight:800;letter-spacing:-.01em}
.mtitle .tag{font:700 8.5pt var(--f-head);color:var(--orange);letter-spacing:.14em;text-transform:uppercase;margin-bottom:1mm}
.lead{margin-top:3mm;font-size:10pt;line-height:1.45}
.hero{margin:4.5mm 0 0}
.hero .frame{border:1px solid var(--line);border-radius:2mm;overflow:hidden;box-shadow:0 1mm 3mm rgba(22,63,124,.10);aspect-ratio:2.3;background:#fff}
.hero .frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.hero figcaption{margin-top:1.5mm;font-size:8.5pt;line-height:1.35;color:var(--muted)}
.hero figcaption b{color:var(--ink);font-weight:600}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:3mm 5mm;margin-top:3.5mm}
.shots figure{margin:0}
.shots .frame{border:1px solid var(--line);border-radius:2mm;overflow:hidden;box-shadow:0 1mm 3mm rgba(22,63,124,.10);aspect-ratio:2;background:#fff}
.shots .frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.shots figcaption{margin-top:1.5mm;font-size:8.5pt;line-height:1.35;color:var(--muted)}
.shots figcaption b{color:var(--ink);font-weight:600}
.lists{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:5mm;margin-top:4mm}
.lists h3{font:700 10pt var(--f-head);letter-spacing:.08em;text-transform:uppercase;color:var(--blue);padding-bottom:1.5mm;margin-bottom:2mm;border-bottom:2px solid var(--blue)}
.lists h3.o{color:var(--orange);border-color:var(--orange)}
.lists h3.g{color:#1f7a3c;border-color:#1f7a3c}
.lists ul{margin:0;padding:0;list-style:none}
.lists li{position:relative;padding-left:3.4mm;font-size:8.2pt;line-height:1.3;margin-bottom:.9mm}
.lists li::before{content:"";position:absolute;left:0;top:1.5mm;width:1.6mm;height:1.6mm;border-radius:50%;background:var(--blue)}
.lists .c-o li::before{background:var(--orange)}
.lists .c-g li::before{background:#1f7a3c}
.lists li b{font-weight:600}


/* ── App-Seiten (Handy-Apps) ─────────────────── */
.phones{display:grid;grid-template-columns:repeat(4,1fr);gap:6mm;margin-top:4.5mm;padding:0 2mm}
.phones figure{margin:0}
.phone{position:relative;border-radius:5.5mm;background:#16223a;padding:1.8mm 1.4mm;box-shadow:0 2mm 5mm rgba(22,34,58,.25)}
.phone::before{content:"";position:absolute;top:2.6mm;left:50%;width:2mm;height:2mm;margin-left:-1mm;border-radius:50%;background:#2c3a55;z-index:2}
.phone img{display:block;width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:4mm}
.phones figcaption{margin-top:2mm;font-size:8.3pt;line-height:1.35;color:var(--muted);text-align:center}
.phones figcaption b{display:block;color:var(--ink);font-weight:600}
.appbadge{display:inline-flex;align-items:center;gap:1.5mm;margin-left:2mm;padding:.6mm 2.2mm;border-radius:99px;background:var(--orange-l);color:#9a5b00;font:700 7.5pt var(--f-head);letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}
.mtitle .ico.app{background:var(--orange)}
.docshot{border:1px solid var(--line);border-radius:2mm;overflow:hidden;box-shadow:0 1mm 3mm rgba(22,63,124,.10);aspect-ratio:2;background:#fff}
.docshot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}


.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm;margin-top:4.5mm}
.flow div{position:relative;background:var(--tint);border-radius:2.5mm;padding:3mm 3mm 3mm 11mm;font-size:8.4pt;line-height:1.32}
.flow div b{display:block;font:700 9.5pt var(--f-head);color:var(--ink);margin-bottom:.6mm}
.flow div::before{content:attr(data-n);position:absolute;left:3mm;top:3.3mm;width:6mm;height:6mm;border-radius:50%;background:var(--orange);color:#fff;font:800 9pt/6mm var(--f-head);text-align:center}
.note-box{margin-top:3.5mm;display:flex;gap:4mm;align-items:flex-start;border:1px solid var(--line);border-left:1.2mm solid var(--blue);border-radius:2mm;padding:3.5mm 4.5mm;font-size:9pt;line-height:1.45}
.note-box b{color:var(--blue)}


.cover{page:cover;width:210mm;height:297mm;position:relative;overflow:hidden;background:linear-gradient(170deg,#ffffff 0%,#f2f6fc 55%,#e6eef9 100%)}
.cover .cloud{position:absolute;right:-40mm;top:-30mm;width:190mm;opacity:.07}
.cv-top{position:absolute;left:18mm;right:18mm;top:16mm;display:flex;justify-content:space-between;align-items:flex-start}
.cv-top img{width:86mm;height:auto}
.cv-top span{font:700 8.5pt var(--f-head);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4mm}
.cv-head{position:absolute;left:18mm;right:18mm;top:58mm}
.cv-head h1{font:800 34pt/1.02 var(--f-head);color:var(--ink);letter-spacing:-.01em}
.cv-head h1 em{font-style:normal;color:var(--orange)}
.cv-head p{margin-top:4mm;font-size:12.5pt;line-height:1.45;color:var(--muted);max-width:150mm}
.cv-stage{position:absolute;left:18mm;right:18mm;top:110mm;height:104mm}
.cv-win{position:absolute;left:0;top:0;width:150mm;border-radius:3mm;background:#fff;box-shadow:0 4mm 12mm rgba(22,63,124,.22),0 1mm 3mm rgba(22,63,124,.12);overflow:hidden;border:1px solid #d3deee}
.cv-win .bar{height:6mm;background:#eef3fa;display:flex;align-items:center;gap:1.4mm;padding-left:3mm;border-bottom:1px solid #d9e3f0}
.cv-win .bar i{width:2mm;height:2mm;border-radius:50%;background:#c8d4e6}
.cv-win .bar span{margin-left:4mm;font:500 6.5pt var(--f-body);color:#7d8ca3;background:#fff;border-radius:1mm;padding:.5mm 8mm .5mm 2mm}
.cv-win img{display:block;width:100%}
.cv-phone{position:absolute;width:36mm;border-radius:5mm;background:#16223a;padding:1.6mm 1.3mm;box-shadow:0 4mm 10mm rgba(22,34,58,.3)}
.cv-phone img{display:block;width:100%;aspect-ratio:390/760;object-fit:cover;object-position:top;border-radius:3.6mm}
.cv-phone.p1{right:16mm;top:20mm}
.cv-phone.p2{right:-2mm;top:38mm}
.cv-mods{position:absolute;left:18mm;right:18mm;top:224mm;display:flex;flex-wrap:wrap;gap:1.4mm;justify-content:flex-start}
.cv-mods span{font:700 7.7pt var(--f-head);color:var(--blue-d);background:#fff;border:1px solid #d3deee;border-radius:99px;padding:.8mm 2.4mm}
.cv-mods span.a{background:var(--orange-l);border-color:#f8d39a;color:#8a4b00}
.cv-band{position:absolute;left:0;right:0;bottom:0;height:34mm;background:var(--blue);display:flex;align-items:center;justify-content:space-between;padding:0 18mm}
.cv-facts{display:flex;gap:8mm}
.cv-facts div{color:#fff;font:500 8pt/1.25 var(--f-body)}
.cv-facts b{display:block;font:800 17pt/1 var(--f-head);color:#fff}
.cv-made{display:flex;align-items:center;gap:4mm;color:#cfe0f6;font:500 7.5pt/1.3 var(--f-body);text-align:right}
.cv-made img{height:7mm;width:auto}


.toc-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 10mm;margin-top:6mm}
.toc-grp{font:700 8.5pt var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin:4mm 0 1.5mm}
.toc-grp:first-child{margin-top:0}
.toc a{display:flex;align-items:baseline;gap:2mm;text-decoration:none;color:var(--ink);font-size:10pt;line-height:1.25;padding:1.15mm 0;border-bottom:1px dotted #c9d4e3}
.toc a .t{font-weight:600}
.toc a .s{color:var(--muted);font-size:8.3pt;font-weight:400}
.toc a .n{margin-left:auto;font:700 10pt var(--f-head);color:var(--blue)}
.toc a.sub{padding-left:5mm}
.toc a.sub .t{font-weight:500;color:#2b3a55}
.toc-legend{margin-top:9mm;display:grid;grid-template-columns:1.3fr 1fr;gap:6mm}
.toc-legend h4{font:700 10pt var(--f-head);color:var(--ink);margin-bottom:2mm}
.toc-legend p{font-size:8.8pt;line-height:1.45;margin-bottom:1.2mm;display:flex;align-items:center;gap:2mm}
.toc-legend i{flex:0 0 2.6mm;height:2.6mm;border-radius:50%;display:inline-block}
.toc-new{background:var(--blue-l);border-radius:3mm;padding:4mm 5mm}
.toc-new p{display:block}
.toc a.app .t::before{content:"";display:inline-block;width:1.8mm;height:3mm;border:1.2px solid var(--orange);border-radius:.6mm;margin-right:1.6mm;vertical-align:-.3mm}


.dl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2mm;margin-top:3.5mm}
.dl{background:var(--tint);border-radius:2.5mm;padding:2mm 2.8mm}
.dl b{display:block;font:800 10pt var(--f-head);color:var(--blue-d)}
.dl span{display:block;font-size:7.9pt;line-height:1.3;color:var(--muted);margin-top:.6mm}


.flows{display:flex;flex-direction:column;gap:5mm;margin-top:6mm}
.flow-row{border:1px solid var(--line);border-radius:3mm;padding:4mm 5mm;background:#fff}
.flow-row h3{font:700 11pt var(--f-head);color:var(--ink);margin-bottom:1mm}
.flow-row p{font-size:8.8pt;color:var(--muted);line-height:1.4;margin-bottom:3mm}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:2mm 0}
.chip{display:inline-flex;flex-direction:column;justify-content:center;min-height:11mm;padding:1.6mm 3.2mm;border-radius:2.2mm;background:var(--blue-l);color:var(--blue-d);font:700 9pt/1.15 var(--f-head)}
.chip small{display:block;font:500 7.2pt/1.2 var(--f-body);color:var(--muted);margin-top:.5mm}
.chip.app{background:var(--orange-l);color:#8a4b00}
.chip.end{background:#e7f5ec;color:#1f6b3a}
.arr{width:7mm;text-align:center;color:var(--orange);font:700 12pt var(--f-head)}
.corebox{margin-top:6mm;display:grid;grid-template-columns:20mm 1fr;gap:5mm;align-items:center;background:var(--blue);color:#fff;border-radius:3mm;padding:5mm 6mm}
.corebox b{font:800 13pt var(--f-head);display:block}
.corebox p{font-size:9pt;line-height:1.45;color:#dbe7f7}
.corebox .ico{width:20mm;height:20mm;border-radius:4mm;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.deps{width:100%;border-collapse:collapse;margin-top:4mm;font-size:8pt;line-height:1.25}
.deps thead th{font:700 8.5pt var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:var(--blue);text-align:left;padding:2mm 2.5mm;border-bottom:2px solid var(--blue)}
.deps thead th:nth-child(3){color:var(--orange);border-color:var(--orange)}
.deps tbody th{font:700 8.6pt var(--f-head);text-align:left;white-space:nowrap;color:var(--ink)}
.deps tbody th,.deps td{padding:.8mm 2.2mm;border-bottom:1px solid var(--line);vertical-align:top}
.deps tbody tr:nth-child(even){background:var(--tint)}
.deps .dz{color:#a8b3c4}
.deps-note{margin-top:3mm;font-size:8pt;color:var(--muted)}


.ind-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5mm;margin-top:4mm}
.ind{border:1px solid var(--line);border-radius:3mm;padding:2.8mm 3.8mm;display:flex;flex-direction:column;gap:1.3mm;break-inside:avoid}
.ind-h{display:flex;gap:3mm;align-items:center}
.ind-h .ic{flex:0 0 10mm;height:10mm;border-radius:2.5mm;background:var(--orange);display:flex;align-items:center;justify-content:center}
.ind-h .ic svg{width:6mm;height:6mm}
.ind-h h3{font:800 12pt var(--f-head)}
.ind-h small{display:block;font:600 7.6pt var(--f-body);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.ind p{font-size:8.5pt;line-height:1.38}
.ind .use{font-size:8.2pt;line-height:1.33;color:var(--ink);margin:0;padding-left:3.5mm}
.ind .use li{margin-bottom:.6mm}
.ind .mods{display:flex;flex-wrap:wrap;gap:1mm;margin-top:auto;padding-top:.5mm}
.ind .mods span{font:700 7.6pt var(--f-head);color:var(--blue-d);background:var(--blue-l);border-radius:1.4mm;padding:.7mm 2mm}
.ind .mods span.a{background:var(--orange-l);color:#8a4b00}
.cta{margin-top:3.5mm;display:grid;grid-template-columns:1.2fr 1fr;gap:5mm;align-items:center;background:var(--blue);color:#fff;border-radius:3mm;padding:4mm 5.5mm}
.cta h3{font:800 13pt var(--f-head);color:#fff;margin-bottom:1.5mm}
.cta p{font-size:8.6pt;line-height:1.45;color:#dbe7f7}
.cta .steps{display:grid;grid-template-columns:1fr;gap:1.2mm}
.cta .steps div{display:flex;gap:2mm;align-items:center;font:600 8.6pt/1.25 var(--f-body)}
.cta .steps b{flex:0 0 6mm;height:6mm;border-radius:50%;background:var(--orange);color:#fff;font:800 9pt/6mm var(--f-head);text-align:center}
.cta .contact{margin-top:2.5mm;font-size:8.8pt;color:#fff}


.back{page:cover;width:210mm;height:297mm;position:relative;overflow:hidden;background:var(--blue);color:#fff}
.back .bk-top{position:absolute;left:20mm;right:20mm;top:22mm}
.back .bk-top img{width:70mm;height:auto;background:#fff;border-radius:4mm;padding:5mm 6mm}
.back h2{position:absolute;left:20mm;right:20mm;top:78mm;font:800 30pt/1.08 var(--f-head);color:#fff}
.back h2 em{font-style:normal;color:var(--orange)}
.back .bk-text{position:absolute;left:20mm;width:110mm;top:122mm;font-size:11pt;line-height:1.55;color:#dbe7f7}
.back .bk-qr{position:absolute;right:20mm;top:122mm;width:44mm;text-align:center;font:600 8.5pt var(--f-body);color:#dbe7f7}
.back .bk-qr div{background:#fff;border-radius:3mm;padding:4mm;margin-bottom:2.5mm}
.back .bk-qr img{width:100%;display:block}
.back .bk-contact{position:absolute;left:20mm;right:20mm;top:178mm;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6mm;border-top:1px solid rgba(255,255,255,.25);padding-top:7mm}
.back .bk-contact h4{font:700 8.5pt var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:2mm}
.back .bk-contact p{font-size:9.5pt;line-height:1.55;color:#fff}
.back .bk-foot{position:absolute;left:20mm;right:20mm;bottom:18mm;display:flex;justify-content:space-between;align-items:flex-end}
.back .bk-foot img{height:9mm;width:auto}
.back .bk-foot span{font-size:7.5pt;color:#9fb8dc;max-width:100mm;line-height:1.4}