/* HTML-to-X: originale Produktpalette aus HtmlToPDF/src/HtmlToPdf/App.xaml. */
:root { font-family:"Segoe UI",Arial,sans-serif; font-size:17px; color-scheme:light; scroll-behavior:smooth; }
body.unified-design[data-site="htmltox"] {
  --bg:#f3f7fb; --surface:#fff; --text:#142d4e; --muted:#50647c;
  --line:#c5d3e2; --accent:#20c7be; --link:#087d78;
  --at-bg:#f3f7fb; --at-text:#142d4e; --at-line:#c5d3e2;
  --at-accent:#087d78; --at-surface:#fff;
  margin:0; background:var(--bg); color:var(--text);
}
.unified-design[data-site="htmltox"] :is(h1,h2,h3,p,figure) { margin-top:0; }
.unified-design[data-site="htmltox"] p { margin-bottom:22px; }
.unified-design[data-site="htmltox"] a { color:inherit; text-underline-offset:5px; }
.unified-design[data-site="htmltox"] h2 { margin-bottom:26px; }
.unified-design[data-site="htmltox"] h3 { font-size:1.1rem; margin-bottom:10px; }
.unified-design[data-site="htmltox"] .at-header { background:#fff; border-bottom:2px solid var(--accent); }
.unified-design[data-site="htmltox"] .at-panel { background:#e9f4f6; }
.unified-design[data-site="htmltox"] .skip { position:absolute; left:20px; top:-100px; padding:12px 20px; background:#fff; }
.unified-design[data-site="htmltox"] .skip:focus { position:fixed; top:12px; }
.unified-design[data-site="htmltox"] section { padding-block:68px; border-bottom:1px solid var(--line); }
.unified-design[data-site="htmltox"] .hero { display:grid; grid-template-columns:1fr 1.12fr; gap:48px; align-items:center; }
.unified-design[data-site="htmltox"] .hero>* { min-width:0; }
.unified-design[data-site="htmltox"] .hero h1 { font-size:clamp(2rem,3.3vw,2.8rem); font-weight:500; letter-spacing:-.045em; line-height:1.14; margin-bottom:24px; }
.hx-logo { display:block; width:240px; height:auto; margin-bottom:10px; }
.unified-design[data-site="htmltox"] .eyebrow { color:var(--link); text-transform:uppercase; font-size:.72rem; }
.unified-design[data-site="htmltox"] .hero .eyebrow { text-transform:none; letter-spacing:.04em; margin-bottom:30px; }
.unified-design[data-site="htmltox"] :is(.lede,.hx-hero-copy>p:not(.eyebrow)) { color:var(--muted); }
.unified-design[data-site="htmltox"] .actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; }
.unified-design[data-site="htmltox"] .button { border:1px solid var(--line); border-radius:7px; }
.unified-design[data-site="htmltox"] .primary { background:var(--accent); color:#142d4e; border-color:var(--accent); }
.unified-design[data-site="htmltox"] .button:hover { background:#48d6cf; }
.unified-design[data-site="htmltox"] .text-link { font-size:.9rem; font-weight:600; }
.unified-design[data-site="htmltox"] .hx-meta { font-size:.76rem; margin:24px 0 0; }
.hx-shot { margin:0; padding:12px; border:1px solid var(--line); border-radius:14px; background:white; box-shadow:8px 8px 0 #dce9f0; }
.hx-shot>a { display:block; border-radius:6px; }
.hx-shot img { display:block; width:100%; height:auto; border-radius:6px; }
.hx-shot figcaption { padding:16px 8px 6px; font-size:.8rem; line-height:1.6; color:var(--muted); }
.hx-shot figcaption strong { display:block; color:var(--text); margin-bottom:4px; }
.hx-formats { background:#fff; }
.hx-format-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:34px; }
.hx-format-grid article { padding:26px; background:#f3f7fb; border:1px solid var(--line); border-radius:10px; }
.hx-format { display:inline-block; color:var(--link); font:600 .9rem Consolas,monospace; padding:6px 10px; border:1px solid #b4deda; border-radius:5px; margin-bottom:24px; background:#e8f7f4; }
.unified-design[data-site="htmltox"] .hx-format-grid p { color:var(--muted); font-size:.94rem; margin-bottom:0; }
.unified-design[data-site="htmltox"] .hx-note { color:var(--muted); font-size:.83rem; margin-top:20px; }
.hx-views { display:grid; grid-template-columns:1fr 2fr; gap:30px; margin-top:34px; padding-top:30px; border-top:1px solid var(--line); }
.unified-design[data-site="htmltox"] .hx-views p { margin-bottom:0; }
.hx-automation { display:grid; grid-template-columns:1fr 1.12fr; align-items:center; gap:48px; }
.hx-automation>* { min-width:0; }
.hx-steps { padding:0; margin:30px 0; list-style:none; counter-reset:hx-step; }
.hx-steps li { position:relative; padding:0 0 22px 48px; counter-increment:hx-step; }
.hx-steps li::before { content:"0" counter(hx-step); position:absolute; left:0; top:0; color:var(--link); font:600 1rem/1.6 Consolas,monospace; }
.unified-design[data-site="htmltox"] .hx-steps p { color:var(--muted); font-size:.94rem; margin-bottom:0; }
.hx-requirements { background:#e8eff6; }
.hx-requirements-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:60px; }
.hx-requirements p { color:var(--muted); }
.hx-contact { --muted:#d1dfea; background:#142d4e; color:#fff; }
.unified-design[data-site="htmltox"] .hx-contact .eyebrow { color:#57dfd7; }
.unified-design[data-site="htmltox"] .hx-contact .lede { color:#d1dfea; max-width:700px; }
.unified-design[data-site="htmltox"] .hx-contact a:focus-visible { outline-color:#57dfd7; }
.unified-design[data-site="htmltox"] .hx-signature { margin:30px 0 0; color:#d1dfea; font-size:.86rem; }
.unified-design[data-site="htmltox"] .at-footer { background:#e8eff6; }
@media(max-width:1000px) {
  .unified-design[data-site="htmltox"] .hero,.hx-automation { grid-template-columns:1fr; gap:34px; }
  .hx-shot { max-width:850px; }
  .hx-format-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .unified-design[data-site="htmltox"] section { padding-block:44px; }
  .hx-format-grid,.hx-views,.hx-requirements-grid { grid-template-columns:1fr; gap:20px; }
  .hx-format-grid article { padding:22px; }
  .hx-shot { padding:8px; box-shadow:4px 4px 0 #dce9f0; }
  .hx-logo { width:220px; }
}
@media(prefers-reduced-motion:reduce) { :root { scroll-behavior:auto; } }
@media print {
  .unified-design[data-site="htmltox"] section { padding-block:24px; }
  .hx-contact { --muted:#142d4e; background:white; color:#142d4e; }
  .unified-design[data-site="htmltox"] .hx-contact :is(.lede,.eyebrow,.hx-signature) { color:#142d4e; }
  .hx-shot { break-inside:avoid; box-shadow:none; }
}