/* HP 1.6.8 R33: compact shared layout; original themes, IDs and artwork remain. */
@media screen {
  body[data-hp] {
    --hp-sidebar-width: 184px;
    --hp-radius: 10px;
    --hp-unified-topbar: calc(76px + var(--hp-unified-tool-extra, 0px));
    --hp-head-crest-slot: 88px;
    --hp-head-crest-height: 88px;
    --hp-head-title-size: clamp(26px, 2.6vw, 34px);
    --r33-line: var(--border);
    --r33-line: color-mix(in srgb, var(--main) 22%, var(--panel));
    --r33-soft: var(--panel);
    --r33-soft: color-mix(in srgb, var(--main) 5%, var(--panel));
  }
  body[data-hp] .hp-topbar {
    height: auto; min-height: var(--hp-unified-topbar);
    padding: 8px 24px; gap: 10px 20px;
    border-bottom: 2px solid var(--main); box-shadow: none;
  }
  body[data-hp] .hp-brand { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  body[data-hp] .hp-brand-logo { width: 44px; height: 52px; object-fit: contain; }
  body[data-hp] .hp-brand-title { font-size: 20px; line-height: 1.25; }
  body[data-hp] .hp-tools { width: clamp(300px, 31vw, 380px); }
  body[data-hp] .hp-tools label { font-size: 12px; line-height: 15px; }
  body[data-hp] .hp-tools select { min-height: 40px; height: 40px; font-size: 16px; }
  body[data-hp] .hp-layout { width: calc(100% - 40px); max-width: 1640px; gap: 20px; margin: 16px auto; }
  body[data-hp] .hp-sidebar { padding: 12px; border-color: var(--r33-line); top: calc(var(--hp-topbar-height) + 16px); }
  body[data-hp] .hp-sidebar-title { font-size: 16px; margin: 2px 6px 10px; }
  body[data-hp] .hp-global-nav { gap: 6px; }
  body[data-hp] .hp-global-nav > a { min-height: 44px; padding: 10px; font-size: 16px; }
  body[data-hp] .hp-global-nav > .hp-current { color: var(--main); border-inline-start: 4px solid var(--main); background: var(--r33-soft); }
  body[data-hp] .hp-global-nav small { display: none; }
  body[data-hp] .hp-main-frame { border-color: var(--r33-line); border-radius: 10px; background: var(--panel); }
  body[data-hp] .hp-sectionbar {
    height: auto; min-height: 60px; padding: 8px 18px; gap: 6px;
    top: var(--hp-topbar-height); background: var(--panel); border-bottom: 1px solid var(--r33-line);
  }
  body[data-hp] .hp-header-menu {
    height: auto; min-height: 44px; gap: 6px; --hp-header-max-rows: 2;
  }
  body[data-hp] .hp-header-menu > a {
    height: auto; min-height: 44px; padding: 9px 12px; border-color: transparent;
    font-size: 16px; line-height: 1.3; overflow-wrap: break-word;
    background: var(--panel); color: var(--main);
  }
  body[data-hp] .hp-header-menu > a:hover { background: var(--r33-soft); border-color: var(--r33-line); }
  body[data-hp] .hp-header-menu > a[aria-current] {
    border: 1px solid var(--main); background: var(--main); color: var(--on-main);
    text-decoration: none; padding-inline: 12px; font-weight: 700;
  }
  body[data-hp] .hp-header-meta { height: auto; min-height: 0; }
  body[data-hp] .hp-header-meta > .hp-page-title { display: none; }
  body[data-hp] .hp-header-meta:has(> .hp-menu-pagination[hidden]) { display: none; }
  body[data-hp] .hp-header-meta > .hp-menu-pagination { width: 100%; margin: 0; justify-content: flex-end; }
  body[data-hp="software"] .hp-header-menu { --hp-header-max-rows: 99; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body[data-hp="software"] .hp-header-menu > a { width: 100%; text-align: center; white-space: normal; }
  body[data-hp="software"] .hp-header-meta { display: none; }
  body[data-hp] main.hp-content { padding: 22px; }
  body[data-hp] main.hp-content > .hp-unified-header {
    height: auto; min-height: 138px; grid-template-rows: auto;
    grid-template-columns: var(--hp-head-crest-slot) minmax(0, 1fr) var(--hp-head-crest-slot);
    gap: 16px; margin-bottom: 22px; padding: 18px;
    background: var(--r33-soft); border-color: var(--r33-line);
  }
  body[data-hp] main.hp-content > .hp-unified-header > .hp-unified-copy {
    height: auto; min-height: 0; grid-template-rows: auto; gap: 8px;
  }
  body[data-hp] main.hp-content > .hp-unified-header .hp-unified-slot:empty { display: none; }
  body[data-hp] main.hp-content > .hp-unified-header .hp-unified-slot > * { max-width: 100%; margin: 0; }
  body[data-hp] main.hp-content > .hp-unified-header h1 { font-size: var(--hp-head-title-size); line-height: 1.2; }
  body[data-hp] main.hp-content > .hp-unified-header .hp-unified-kicker > * { font-size: 14px; line-height: 1.4; }
  body[data-hp] main.hp-content > .hp-unified-header .hp-unified-subtitle > * { font-size: 17px; line-height: 1.5; }
  body[data-hp] main.hp-content > .hp-unified-header .hp-unified-actions { display: flex; flex-flow: row wrap; gap: 8px; }
  body[data-hp] main.hp-content > .hp-unified-header .hp-unified-actions > * { font-size: 16px; line-height: 1.3; }
  body[data-hp] main.hp-content > .hp-unified-header .hp-unified-actions .bh-button { height: auto; min-height: 44px; padding: 9px 14px; max-width: 280px; }
  body[data-hp] main.hp-content > .hp-unified-header > .bh-crest,
  body[data-hp] main.hp-content > .hp-unified-header > .bh-crest:last-child { width: var(--hp-head-crest-slot); height: var(--hp-head-crest-height); }
  body[data-hp] .hp-content :is(.bh-card, .vm-card, .wp-card, .r31-card) { border-color: var(--r33-line); box-shadow: none; }
  body[data-hp] .hp-footer { background: var(--panel); border-color: var(--r33-line); padding: 20px 22px; gap: 12px 20px; }
  body[data-hp] .hp-footer a { min-height: 32px; display: inline-flex; align-items: center; }
  body[data-hp] :is(.bh-button, .wp-button, .vm-button) { border-radius: 7px; min-height: 44px; }
  body[data-hp] .hp-content :is(section, article, h2, h3)[id] { scroll-margin-top: calc(var(--hp-topbar-height) + var(--hp-r33-menu-height, 64px) + 18px); }
  body[data-hp="software"] .r31-notice { padding: 12px 16px; margin: 14px 0 18px; border-color: var(--r33-line); border-inline-start: 4px solid var(--main); background: var(--r33-soft); }
  body[data-hp="software"] .r31-notice p { line-height: 1.55; }
  body[data-hp="software"] .r31-grid,
  .r33-featured-grid, .r33-feature-grid, .r33-platform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 20px 0 28px; }
  .r33-program-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 20px 0 28px; }
  body[data-hp="software"] .r31-card { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--r33-line); border-top: 3px solid var(--main); border-radius: 10px; background: var(--panel); }
  body[data-hp="software"] .r31-card h2 { font-size: 1.4rem; line-height: 1.25; }
  body[data-hp="software"] .r31-card p { line-height: 1.55; margin-bottom: 12px; }
  body[data-hp="software"] .r31-card .r31-version { font-size: 16px; color: var(--muted); margin-bottom: 14px; }
  body[data-hp="software"] .r31-badge { width: fit-content; border-color: var(--r33-line); background: var(--r33-soft); color: var(--main); }
  body[data-hp="software"] .r31-links { gap: 9px; align-items: stretch; }
  body[data-hp="software"] .r31-links .r31-plain-link { border: 1px solid var(--r33-line); border-radius: 7px; text-decoration: none; background: var(--panel); color: var(--main); }
  body[data-hp="software"] .r31-links .r31-plain-link:hover { border-color: var(--main); text-decoration: underline; }
  body[data-hp="software"] .r31-feature { border-color: var(--r33-line); padding: 16px 0; }
  body[data-hp="software"] .r31-feature h2 { font-size: 1.4rem; }
  .r33-goodie { padding: 20px 24px; margin: 18px 0 26px; border: 1px solid var(--r33-line); border-inline-start: 6px solid var(--main); border-radius: 10px; background: var(--r33-soft); }
  .r33-goodie h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
  .r33-goodie p { margin: 8px 0; max-width: 78ch; }
  .r33-goodie .r31-links { margin-bottom: 0; }
  .r33-goodie .dpl2-release { color: var(--main); background: var(--panel); border-color: var(--main); }
  .r33-section-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
  .r33-section-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--r33-line); border-radius: 7px; color: var(--main); background: var(--panel); font-weight: 700; text-decoration: none; }
  .r33-section-nav a:hover { border-color: var(--main); background: var(--r33-soft); }
  .r33-feature-grid > *, .r33-platform-grid > * { min-width: 0; }
  .r33-feature-grid .r31-feature { margin: 0; padding: 18px; border: 1px solid var(--r33-line); border-radius: 10px; }
  body[data-hp="software"] .r33-dpl-detail { padding: 8px 16px; border: 1px solid var(--r33-line); border-radius: 8px; }
  .r33-dpl-detail > summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 700; color: var(--main); line-height: 1.4; }
  .r33-dpl-detail > summary::marker { color: var(--main); }
  .r33-dpl-detail[open] > summary { margin-bottom: 12px; border-bottom: 1px solid var(--r33-line); }
  .r33-dpl-detail > :last-child { margin-bottom: 10px; }
  .r33-benefits { padding-inline-start: 1.2em; margin: 12px 0; }
  .r33-benefits li { margin: 8px 0; line-height: 1.55; }
  .r33-product-figure { margin: 14px 0 18px; min-width: 0; }
  .r33-product-figure img { display: block; width: auto; max-width: 100%; max-height: 280px; margin-inline: auto; object-fit: contain; border: 1px solid var(--r33-line); border-radius: 8px; }
  .r33-product-figure figcaption { font-size: 14px; line-height: 1.4; text-align: center; }
  .r33-comparison { border-collapse: collapse; width: 100%; margin: 20px 0 28px; font-size: 17px; }
  .r33-comparison th, .r33-comparison td { border-bottom: 1px solid var(--r33-line); text-align: left; padding: 13px 14px; vertical-align: top; }
  .r33-comparison th { color: var(--main); background: var(--r33-soft); }
  .r33-comparison caption { font-weight: 700; text-align: left; margin-bottom: 12px; color: var(--main); }
  body:is([data-view="weiss"], [data-view="schwarz"]) { --r33-line: var(--main); --r33-soft: var(--panel); }
  body:is([data-view="weiss"], [data-view="schwarz"]) .hp-header-menu > a[aria-current] { color: var(--main); background: var(--panel); box-shadow: inset 0 -3px var(--main); }
  body:is([data-view="weiss"], [data-view="schwarz"]) .hp-content :is(.r31-card, .r33-goodie, .r33-feature-grid .r31-feature) { background: var(--panel); }
  html.hp-field-numbering body[data-hp] .hp-topbar { height: auto; }
  html.hp-field-numbering body[data-hp] .hp-header-menu > a { height: auto; flex-wrap: wrap; }
  html.hp-field-numbering body[data-hp] .hp-header-menu > a::after { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}
@media screen and (min-width: 1320px) {
  .r33-program-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 1100px) {
  body[data-hp] { --hp-sidebar-width: 164px; --hp-head-crest-slot: 72px; --hp-head-crest-height: 72px; }
  body[data-hp] .hp-layout { gap: 14px; width: calc(100% - 28px); }
  body[data-hp] .hp-sidebar { padding: 10px; }
  body[data-hp] .hp-global-nav > a { padding: 9px 8px; }
  body[data-hp="software"] .hp-header-menu > a { padding-inline: 8px; font-size: 15px; }
}
@media screen and (max-width: 800px) {
  body[data-hp] { --hp-unified-topbar: calc(116px + var(--hp-unified-tool-extra, 0px)); }
  body[data-hp] .hp-topbar { grid-template-columns: minmax(0, 1fr); padding: 8px 14px; gap: 5px; }
  body[data-hp] .hp-brand { grid-template-columns: 30px minmax(0, 1fr); gap: 9px; }
  body[data-hp] .hp-brand-logo { width: 30px; height: 36px; }
  body[data-hp] .hp-brand-title { font-size: 18px; }
  body[data-hp] .hp-tools { grid-column: 1; grid-row: 2; width: 100%; gap: 8px; }
  body[data-hp] .hp-tools select { font-size: 15px; min-height: 40px; height: 40px; }
  body[data-hp] #hp-nav-toggle { display: none; }
  body[data-hp] .hp-layout { width: calc(100% - 20px); display: block; margin: 10px auto; }
  body[data-hp] .hp-sidebar,
  body[data-hp] .hp-sidebar.is-open { display: block; position: static; width: 100%; max-height: none; margin: 0 0 10px; padding: 8px; box-shadow: none; }
  body[data-hp] .hp-sidebar-title { display: none; }
  body[data-hp] .hp-global-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body[data-hp] .hp-global-nav > a { justify-content: center; min-height: 44px; padding: 8px 6px; font-size: 15px; text-align: center; }
  body[data-hp] .hp-global-nav > .hp-current { border: 1px solid var(--main); box-shadow: inset 0 -3px var(--main); }
  body[data-hp] .hp-sectionbar { position: static; padding: 9px; }
  body[data-hp="software"] .hp-header-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-hp="software"] .hp-header-menu > a { min-height: 44px; font-size: 15px; }
  body[data-hp] main.hp-content { padding: 16px; }
  body[data-hp] .hp-content :is(section, article, h2, h3)[id] { scroll-margin-top: calc(var(--hp-topbar-height) + 16px); }
  body[data-hp] .hp-footer { padding: 18px 16px; }
  html.hp-field-numbering body[data-hp] .hp-topbar { grid-template-rows: auto auto; }
  html.hp-field-numbering body[data-hp] .hp-tools { grid-column: 1; grid-row: 2; }
}
@media screen and (max-width: 740px) {
  body[data-hp="software"] .r31-grid,
  .r33-featured-grid, .r33-feature-grid, .r33-platform-grid, .r33-program-grid { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 640px) {
  body[data-hp] { --hp-head-crest-slot: 48px; --hp-head-crest-height: 52px; --hp-head-title-size: 24px; }
  body[data-hp] main.hp-content > .hp-unified-header { grid-template-columns: var(--hp-head-crest-slot) minmax(0, 1fr); grid-template-rows: auto; gap: 10px 12px; min-height: 96px; padding: 14px; margin-bottom: 18px; }
  body[data-hp] main.hp-content > .hp-unified-header > .hp-unified-copy { grid-column: 2; grid-row: 1 / span 2; gap: 8px; }
  body[data-hp] main.hp-content > .hp-unified-header > .bh-crest { grid-column: 1; grid-row: 1; }
  body[data-hp] main.hp-content > .hp-unified-header > .bh-crest:last-child { display: block; grid-column: 1; grid-row: 2; }
  body[data-hp] main.hp-content > .hp-unified-header .hp-unified-kicker > * { font-size: 13px; }
  body[data-hp] main.hp-content > .hp-unified-header .hp-unified-subtitle > * { font-size: 15px; }
  body[data-hp] main.hp-content > .hp-unified-header .hp-unified-actions .bh-button { width: 100%; flex-basis: 100%; max-width: 100%; font-size: 15px; }
  body[data-hp="software"] .r31-card { padding: 16px; }
  .r33-goodie { padding: 16px; }
  .r33-section-nav { gap: 6px; }
  .r33-section-nav a { flex: 1 1 130px; text-align: center; padding-inline: 8px; font-size: 16px; }
  .r33-comparison, .r33-comparison tbody, .r33-comparison tr, .r33-comparison td { display: block; width: 100%; }
  .r33-comparison thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .r33-comparison tr { margin: 0 0 14px; border: 1px solid var(--r33-line); border-radius: 8px; overflow: hidden; }
  .r33-comparison th[scope="row"] { display: block; width: 100%; }
  .r33-comparison td[data-label]::before { display: block; content: attr(data-label); font-weight: 700; color: var(--main); margin-bottom: 4px; }
}
@media screen and (max-height: 480px) {
  body[data-hp] .hp-sectionbar { position: static; }
  body[data-hp] .hp-sidebar { position: static; max-height: none; }
}
@media screen and (max-width: 560px) {
  /* The fixed software brand already displays the crest. Give long translated
     product titles the full content width on phones. */
  body[data-hp="software"] main.hp-content > .hp-unified-header { grid-template-columns: minmax(0, 1fr); }
  body[data-hp="software"] main.hp-content > .hp-unified-header > .bh-crest,
  body[data-hp="software"] main.hp-content > .hp-unified-header > .bh-crest:last-child { display: none; }
  body[data-hp="software"] main.hp-content > .hp-unified-header > .hp-unified-copy { grid-column: 1; grid-row: 1; }
}
@media screen and (max-width: 380px) {
  body[data-hp] .hp-global-nav,
  body[data-hp="software"] .hp-header-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media print {
  .r33-section-nav { display: none; }
  .r33-featured-grid, .r33-feature-grid, .r33-platform-grid, .r33-program-grid { display: block; }
  .r33-goodie, .r33-product-figure { break-inside: avoid; }
  .r33-comparison { width: 100%; border-collapse: collapse; }
  .r33-comparison th, .r33-comparison td { text-align: left; border: 1px solid #777; padding: 6px; }
}