/* Own adjustments - loaded after site.css */

/* Search box: on the dark field of the template the placeholder was
   practically invisible. opacity explicitly at 1, Firefox lowers it to
   .54 otherwise. */
#yoo-search input { color: #fff; }
#yoo-search input::placeholder { color: #cfcfcf; opacity: 1; }
#yoo-search input::-webkit-input-placeholder { color: #cfcfcf; }
#yoo-search input::-moz-placeholder { color: #cfcfcf; opacity: 1; }

/* --- OT-THANKS ---
   The page after a download. Built by layouts/_default/thanks.html from
   data/downloads.toml; there are no content files behind it.

   Same language as the blog: Verdana for headings, Georgia for reading
   text, one red (#cf0a0d), hairlines only. Same 36px gutter to the
   navigation column, which ends at 215.

   The reading column is 620px - a little wider than the blog's 576,
   because there is no rail beside it and the text is short.

   The offer is the reason the page exists. It is the one block that
   breaks the quiet: a red rule above it, the code in a box that asks to
   be selected. Everything else stays calm so that it stands out - the
   checksum of the download too, a footnote under a hairline. */

.danke { padding-left: 36px; margin: 34px 0 56px 0; max-width: 620px; }
/* The column is 620px wide whatever the heading: the text area around it
   is as wide as its widest line, and the 28px heading used to be that
   line. Where the window has less room, as before: as wide as the
   checksum line. */
@media (min-width: 880px) {
  .danke { box-sizing: border-box; width: 656px; max-width: none; }
}

body#page .danke h1 {
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  font-size: 24px; line-height: 1.25; font-weight: bold;
  text-align: left; margin: 0 0 14px 0; padding: 0; color: #1a1a1a;
}
/* One line, whatever the product: "Danke für den Download von Clipboard
   History Lite" is 700px in Verdana at 24px, 780 with a font 11% wider -
   more than the 620 of the text column, so the heading may run past it
   to the right. Only where the window has the room; a narrower one
   breaks the line as before. */
@media (min-width: 1100px) {
  body#page .danke h1 { white-space: nowrap; }
  /* the text area clips what runs past it (overflow: hidden), so the
     column grows with the heading - and everything under the heading
     keeps its 620px */
  .danke { box-sizing: content-box; width: max-content; min-width: 620px; }
  .danke > :not(h1) { max-width: 620px; }
}

/* The first line answers the one question the visitor has right now:
   is my download coming? Set larger than the rest. */
body#page .danke p.fuehrung {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px; line-height: 1.6; text-align: left;
  margin: 0 0 12px 0; color: #1a1a1a;
}

body#page .danke p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px; line-height: 1.65; text-align: left;
  margin: 0 0 14px 0; color: #333;
}
body#page .danke a:link, body#page .danke a:visited {
  color: #cf0a0d; text-decoration: underline;
}
body#page .danke a:hover { color: #8f0709; background: none; }

/* The offer */
.danke .aktion {
  border-top: 3px solid #cf0a0d; background: #fbf7f3;
  padding: 20px 24px 24px 24px; margin: 0 0 32px 0; border-radius: 0 0 3px 3px;
}
.danke .aktion .marke {
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  font-size: 11px; font-weight: bold; letter-spacing: .1em;
  text-transform: uppercase; color: #cf0a0d; margin: 0 0 8px 0;
}
body#page .danke .aktion h2 {
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  font-size: 20px; line-height: 1.3; font-weight: bold; text-align: left;
  margin: 0 0 10px 0; padding: 0; border: none; color: #1a1a1a;
}
body#page .danke .aktion p { margin: 0 0 16px 0; color: #1a1a1a; }

/* The code in a box of its own, monospace, spaced out: it has to be
   read off the screen and typed into a shop somewhere else. */
.danke .aktion .code {
  display: inline-block; vertical-align: middle;
  border: 1px dashed #cf0a0d; background: #fff; border-radius: 3px;
  padding: 9px 16px; margin: 0 14px 0 0;
}
.danke .aktion .code span {
  font-family: "DejaVu Sans Mono", Consolas, monospace;
  font-size: 17px; font-weight: bold; letter-spacing: .1em; color: #cf0a0d;
  -webkit-user-select: all; user-select: all;
}
body#page .danke .aktion a.knopf {
  display: inline-block; vertical-align: middle; box-sizing: border-box;
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  font-size: 14px; font-weight: bold; line-height: 1;
  color: #fff; background: #cf0a0d; border-radius: 3px;
  padding: 14px 22px; text-decoration: none; text-shadow: none;
}
body#page .danke .aktion a.knopf:hover { background: #a80609; color: #fff; }

/* The notes below - alternate download, newsletter, tutorial */
.danke .hinweise { margin: 0 0 18px 0; }

/* The SHA-256 of the file that is coming (0208): a footnote between two
   hairlines, the same rule and spacing as the support line under it - no
   fill, no box: the coupon stays the one block that breaks the quiet.
   Label, checksum and command start at the text column's left edge, the
   copy button ends at its right edge, where the hairline ends. Verdana
   12px in the page's black for the words; the checksum in the monospace
   of Windows at 14px, where it is compared with Get-FileHash, digit by
   digit. No line may break: 64 characters and 7 group gaps are 589px in
   the DejaVu Sans Mono of Linux, Consolas is narrower, the column 620. */
.danke .pruef {
  border-top: 1px solid #e2e2e2; padding: 12px 0 0 0; margin: 0 0 18px 0;
  font: 12px/1.5 Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif; color: #1a1a1a;
}
.danke .pruef[hidden] { display: none; }
.danke .pruef .kopf { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.danke .pruef .kopf b { color: #1a1a1a; }
.danke .pruef .wert {
  display: block; margin: 6px 0 4px 0; white-space: nowrap; color: #1a1a1a;
  font: 14px/1.4 Consolas, "DejaVu Sans Mono", monospace;
  -webkit-user-select: all; user-select: all;
}
.danke .pruef .wert span + span { margin-left: .5em; }
body#page .danke .pruef p.befehl {
  font: 12px/1.5 Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  color: #1a1a1a; margin: 0; white-space: nowrap;
}
.danke .pruef .befehl code {
  font: 12px Consolas, "DejaVu Sans Mono", monospace; color: #1a1a1a;
  -webkit-user-select: all; user-select: all;
}
/* The white button of the download page's older version, in small */
.danke .pruef .kopie {
  margin-left: auto; font: 12px Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  color: #1a1a1a; background: #fff; border: 1px solid #666; border-radius: 3px;
  padding: 1px 8px; cursor: pointer;
}
.danke .pruef .kopie[hidden] { display: none; }
.danke .pruef .kopie:hover { background: #e8e8e8; }
.danke .pruef .kopie:focus-visible { outline: 2px solid #000055; outline-offset: 1px; }

/* Support, a quiet line instead of the old box with the light bulb */
.danke .hilfe {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px; line-height: 1.6; color: #595959;
  border-top: 1px solid #e2e2e2; padding: 12px 0 0 0; margin: 0;
}
/* --- OT-THANKS end --- */

/* --- OT-DNLOAD ---
   The download page, layouts/_default/dnload.html, built from
   data/dnload.json. Chosen from six designs on 2026-09-24: cards in two
   columns, one red line on top of each and no other lines; since
   2026-09-25 white cards with a grey strip per download. The Windows of
   all programs said once under the heading, a card names its own only
   where it differs. Small text stays at #222 or darker - grey on white
   was a complaint. */
.dl-sub { text-align: center !important; font-family: Verdana, sans-serif !important; font-size: 12px; color: #222; margin: 6px 0 14px !important; }
.dl-sub span { color: #555; padding: 0 4px; }
.dl-sub a:link, .dl-sub a:visited { color: #0000A8; }
/* the space between the last cards and the copyright line */
.dlb:last-of-type { margin-bottom: 26px; }
/* ... but a note right under the cards (the software overview) belongs
   to them: 10px, not 26. */
.dlb:has(+ .dl-sub) { margin-bottom: 10px; }
/* The text column of every page is 765px - the old Joomla frame. Here
   that cost line breaks: the Linkman line "Changelog · PDF manual ·
   Licence Pro · Licence Lite · OT Translator" did not fit a card of 350.
   So this page is exactly as wide as its widest line needs, measured by
   the browser in the font it really has (Verdana on Windows is a tenth
   wider than elsewhere): max-content, never below 765, never wider than
   the window beside the menu. The two columns are equal (1fr), so the
   widest card decides both. The heading and the line under it do not
   count (contain) - they centre over the cards. Below a window of 995px
   - a phone lays the page out at 980 - it stays 765, as before.
   :has() - only the page that holds the cards. */
@media (min-width: 995px) {
  #article:has(.dlb) { width: max-content; min-width: 765px; max-width: calc(100vw - 230px); }
}
#article:has(.dlb) > h1, .dl-sub { contain: inline-size; }
.dlb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 13px; width: calc(100% - 5px); margin-left: 5px; }
.dlb-card { display: flex; flex-direction: column; background: #fff; border-top: 3px solid #cf0a0d; padding: 9px 12px 10px; font-family: Verdana, sans-serif; color: #000; }
.dlb-t { font-size: 17px; font-weight: bold; padding-bottom: 2px; }
/* The card title and the "Legacy Software" line are h2 - the page went
   from h1 straight to h3 and the cards had no heading at all. site.css
   centres every h2 in Verdana/Georgia at 1.2em; the title keeps what
   the div had: the card's typeface and the body's line height, so the
   page stays pixel for pixel where it was. */
h2.dlb-t { text-align: left; margin: 0; font-family: inherit; line-height: inherit; }
/* gap 4px, button padding 11px: with the Verdana of Windows the French
   "Version 10.70 · essai de 30 jours" missed the line by one pixel. */
.dlb-r { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; padding: 7px 6px 6px; margin: 7px -6px 0; background: #f4f4f4; }
/* Every download row is a grey strip on the white card (chosen 2026-09-25).
   The card is as wide as its link line, so in the rows a wide gap opens
   between "Pro 8.99.9" and its button; on one grey strip the name and
   the button read as one object and the eye follows the strip instead of
   searching across the empty card. The negative margin puts the strip 6px into
   the card's padding, so the text keeps the left edge of the title. */
.dlb-t + .dlb-r { margin-top: 4px; }
.dlb-n { padding-top: 5px; font-size: 13px; color: #222; }
.dlb-n b { font-size: 13px; color: #000; }
.dlb-n i { font-style: normal; }
.dlb-n small { display: block; font-size: 13px; color: #222; margin-top: 5px; }
.dlb-b { text-align: right; white-space: nowrap; }
/* The mirror line is wider than the button in fr and es ("o servidor
   espejo"). The negative margin lets it reach left into the text column,
   so the button alone decides how wide the right column is. */
.dlb-b small { display: block; margin: 3px 0 0 -70px; font-size: 12px; color: #222; }
a.dlb-ml { color: #0000A8 !important; font-weight: bold; text-decoration: underline; }
/* site.css answers a:hover with white on #000055. :link keeps matching
   under the mouse, so every link coloured here needs its own :hover. */
a.dlb-ml:hover { color: #fff !important; background-color: #000055; text-decoration: none; }
a.dlb-btn { display: inline-block; border: 1px solid #cf0a0d; background: #cf0a0d; color: #fff !important; text-decoration: none; font-size: 12px; font-weight: bold; padding: 5px 11px; border-radius: 3px; }
.dlb-o { padding: 7px 6px 6px; margin-top: 8px; }
.dlb-o .dlb-n { padding-top: 4px; font-size: 12px; }
.dlb-o .dlb-n b { font-size: 12px; }
/* A grid, not a wrapping flex row: a wrapping row is as wide as all its
   pieces side by side, and the page takes its width from the widest
   card - this one row made every card 90px too wide. */
.dlb-o { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 4px; }
/* The lines under an additional download run the full width of the card,
   not beside the button: the German label of the older Cacheman ("letzte
   Version für" and three Windows) broke in two there with the Verdana of
   Windows. */
.dlb-w { grid-column: 1 / -1; font-size: 12px; color: #222; margin-top: -2px; }
.dlb-w small { display: block; font-size: 12px; color: #222; margin-top: 3px; }
a.dlb-sec { background: #fff; border-color: #666; color: #222 !important; font-weight: normal; padding: 3px 10px; }
a.dlb-btn:hover { background: #a8080b; border-color: #a8080b; }
a.dlb-sec:hover { background: #e8e8e8; border-color: #666; }
.dlb-x { font-size: 12px; color: #222; margin-top: auto; padding-top: 10px; line-height: 1.6; }
.dlb-os { color: #222; margin-right: 14px; }
.dlb-x a { white-space: nowrap; }
.dlb-x a:link, .dlb-x a:visited { color: #0000A8; }
.dlb-x a:hover, .dl-sub a:hover { color: #fff; background-color: #000055; text-decoration: none; }
.dl-h3 { font-family: Verdana, sans-serif; font-size: 19px; text-align: left !important; text-decoration: none !important; color: #000; width: calc(100% - 5px); margin: 8px 0 10px 5px !important; }
/* Public betas (0301): the cards of the programs, marked as beta by an
   orange line on top instead of the red one and a badge after the name -
   the clear orange of the house rules (#c2410c, 5.2:1 on white), the
   radius of the buttons. The warning line sits under the heading on the
   left edge of the cards, 8px of ink below the heading and 12px above the
   card (design.md R8, measured on Windows); contain,
   so its long sentence wraps instead of widening the page (max-content
   above). The badge is centred on the name: both boxes in one flex row,
   the name and the badge's text both trimmed to their capitals, so each
   box centre is a cap middle (untrimmed, the line box of the 17px Verdana
   put the badge 1.5px below the name's middle on Windows). The row has no bold version line: the date line takes its
   place, at the height of the button's text like the version line. */
.dlb-warn { contain: inline-size; font-family: Verdana, sans-serif; font-size: 12px; line-height: 18px; color: #222; text-align: left !important; width: calc(100% - 5px); margin: -14px 0 11px 5px !important; }
.dlb-beta { border-top-color: #c2410c; }
/* padding: the trimmed name lost the half-leading of its line box; 4px
   above and 10px below (2 of .dlb-t + 8) put name and strip on the rows
   of the program cards (measured on Windows: name ink 1160-1174, strip
   from 1189 in both). */
h2.dlb-t:has(.dlb-badge) { display: flex; align-items: center; gap: 8px; padding: 4px 0 10px; }
.dlb-tn { min-width: 0; text-box: trim-both cap alphabetic; }
.dlb-badge { flex: none; font-size: 11px; font-weight: bold; line-height: 11px; letter-spacing: .03em; text-transform: uppercase; color: #c2410c; border: 1px solid #c2410c; border-radius: 3px; padding: 3px 5px; text-box: trim-both cap alphabetic; }
.dlb-beta .dlb-n small:first-child { margin-top: 0; }
/* --- OT-DNLOAD end --- */

/* --- OT-BUYBOX ---
   The purchase path: layouts/partials/buybox.html, prices from
   data/products.toml. One offer - name, price, "one-time purchase", the
   trial, a button to the shop - in five places: under the download boxes
   of a product page (.bb-page), in a card of the download page (.bb-dl),
   on a thank-you page (.bb-danke), under a blog post (.bb-post) and as
   the rows of the buy-now page (.bb-row in .bb-list).

   Chosen 2026-09-26 from three designs: the list row. The offer is one
   more row of the download list - its hairline, its 28px mark column, a
   dark mark where the downloads have the red one - and its button is
   outlined dark. The red button stays the one thing on a page that
   starts something free. No badges, no "sale", nothing that moves.
   Small text #222 or darker, Verdana for the interface, Georgia where
   the page reads. The thank-you page and the blog post name Verdana with
   the fallbacks of their own stylesheets. */

/* --- the offer ------------------------------------------------------------- */
#article .bb, #article .bb-post {
  box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;
  column-gap: 16px; text-align: left !important;
  font: 12px/1.5 Verdana, Arial, sans-serif; color: #222;
}
#article .bb-n { min-width: 0; }
#article .bb-n b { font-size: 13px; color: #000; }
#article .bb-p { font-size: 13px; font-weight: bold; color: #000; white-space: nowrap; margin-left: 4px; }
#article .bb-n small { display: block; font-size: 12px; color: #222; margin-top: 1px; }
#article .bb-n small span { color: #555; }
/* the button: outlined dark, never broken, never red */
#article a.bb-btn {
  flex: none; display: inline-block; white-space: nowrap; box-sizing: border-box;
  font: bold 12px/1.4 Verdana, Arial, sans-serif;
  padding: 5px 13px; border-radius: 3px; text-decoration: none !important; text-shadow: none;
  background: #fff; border: 1px solid #222; color: #000 !important;
}
#article a.bb-btn:hover { background: #ececec; color: #000 !important; }
#article a.bb-btn:focus-visible { outline: 2px solid #000055; outline-offset: 2px; }

/* --- product pages: after the download boxes ---------------------------- */
/* one more row of the list: its width, its hairline, its 28px for the mark */
#article .bb-page {
  position: relative; width: min(780px, 100%); margin: 0 auto 12px; padding: 8px 4px 8px 28px;
  border-bottom: 1px solid #e0e0e0;
}
#article .bb-page::before {
  content: ""; position: absolute; left: 4px; top: 11px; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='16' height='16' rx='2' fill='%23222'/%3E%3Cpath d='M3 4.5h1.8l1.3 5.5h5.6l1.3-4H5.4' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3Ccircle cx='6.8' cy='12.2' r='1' fill='%23fff'/%3E%3Ccircle cx='11.2' cy='12.2' r='1' fill='%23fff'/%3E%3C/svg%3E") no-repeat;
}
body#page #article .download:has(+ .bb-page) { margin-bottom: 0 !important; }
/* A box on its own keeps its layout (OT-DOWNLOAD-BOX: the note under the
   name). It and its offer stand in one frame as wide as the wider of
   the two - like .dl-under - so the offer's edges are the box's edges. */
#article .bb-one { display: flow-root; width: fit-content; max-width: 100%; margin: 12px auto; }
#article .dl-under > .bb-one { position: relative; left: 2.5px; }
body#page #article .bb-one > .download:not(.download + .download) { width: auto !important; margin: 0 !important; }
body#page #article .bb-one > .bb-page { width: auto; margin: 0; }

/* --- the download page: in the card, after the downloads ---------------- */
/* a row without the grey, under a hairline; name, price and button only -
   "one-time purchase" is said on the product pages, the thank-you pages
   and the buy-now page, not four times here */
#article .bb-dl { margin: 7px -6px 0; padding: 7px 6px 1px; border-top: 1px solid #e0e0e0; }
#article .bb-dl .bb-n small { display: none; }
/* the offer never widens a card: the page is as wide as its widest card
   (OT-DNLOAD), and that is decided by the downloads */
#article .bb-dl { contain: inline-size; }
#article .bb-dl .bb-n { padding-top: 1px; }

/* --- the thank-you page: under the checksum, above the support line ----- */
/* a footnote like the checksum: a hairline above, the row under it */
#article .bb-danke { margin: 0 0 20px 0; border-top: 1px solid #e2e2e2; padding-top: 16px; }
#article .danke .bb, #article .bb-post, #article .bb-post a.bb-btn, #article .bb-post a.bb-get { font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif; }
body#page .danke .bb-danke p.bb-h {
  font: bold 15px/1.4 Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif; color: #1a1a1a; margin: 0 0 8px 0;
}
#article .bb-adds { margin: 0 0 12px 0; padding: 0; list-style: none; }
#article .bb-adds li {
  position: relative; padding: 0 0 0 18px; margin: 0 0 4px 0;
  font: 16px/1.5 Georgia, "Times New Roman", serif; color: #1a1a1a;
}
#article .bb-adds li::before { content: ""; position: absolute; left: 4px; top: .65em; width: 5px; height: 5px; background: #222; border-radius: 50%; }
#article .bb-thanks .bb-n b, #article .bb-thanks .bb-p { font-size: 14px; }

/* --- under a blog post --------------------------------------------------- */
/* Name and line across the column, the button under them with the price
   and the trial beside it - a signature under the text, between two
   hairlines; the line keeps the whole 576px and never breaks. */
#article .bb-post {
  flex-direction: column; align-items: flex-start; row-gap: 9px; margin: 20px 0 6px;
  padding: 12px 0 14px; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;
}
#article .bb-post .bb-n b { font-size: 15px; }
#article .bb-post .bb-n b a:link, #article .bb-post .bb-n b a:visited { color: #000; text-decoration: underline; }
#article .bb-post .bb-n b a:hover { color: #cf0a0d; background: none; }
#article .bb-post .bb-n small { font-size: 13px; margin-top: 3px; }
#article .bb-post .bb-act { display: flex; align-items: center; column-gap: 12px; }
#article .bb-post .bb-act small { font-size: 12px; color: #222; white-space: nowrap; }
#article .bb-post .bb-act small a:link, #article .bb-post .bb-act small a:visited { color: #0000A8; text-decoration: underline; }
#article .bb-post .bb-act small a:hover { color: #fff; background: #000055; text-decoration: none; }
/* a free product: the download button of the download page */
#article .bb-post a.bb-get {
  display: inline-block; white-space: nowrap; border: 1px solid #cf0a0d; background: #cf0a0d; color: #fff !important;
  text-decoration: none !important; font: bold 12px/1.4 Verdana, Arial, sans-serif;
  padding: 5px 13px; border-radius: 3px;
}
#article .bb-post a.bb-get:hover { background: #a8080b; border-color: #a8080b; }

/* --- the buy-now page ------------------------------------------------------ */
/* The page is as wide as the text column of the old frame, 765px, in
   every language - it took its width from its longest paragraph, so the
   list stood in a different place in each language. Like the download
   page (OT-DNLOAD): the heading and the texts do not count. */
#article:has(.bb-list) { min-width: 765px; }
@media (min-width: 995px) {
  #article:has(.bb-list) { width: max-content; max-width: calc(100vw - 230px); }
}
#article:has(.bb-list) > h1, #article .bb-pay, #article .bb-corp { contain: inline-size; }
/* One row per product: name and edition, the Windows it runs on under
   it, the price in a column of its own, the button. "One-time purchase"
   and the trial are said once, in the line under the heading. The rows
   of a list: the red line on top, hairlines between. */
#article .bb-list { width: min(640px, 100%); margin: 14px auto 0; box-sizing: border-box; border-top: 2px solid #cf0a0d; }
#article .bb-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 18px; align-items: center;
  padding: 9px 6px 9px 8px; border-bottom: 1px solid #e0e0e0;
}
#article .bb-row .bb-n { display: contents; }
#article .bb-row .bb-n b { grid-column: 1; grid-row: 1; font-size: 14px; }
#article .bb-row .bb-n small { grid-column: 1; grid-row: 2; margin-top: 2px; }
#article .bb-row .bb-p { grid-column: 2; grid-row: 1 / 3; font-size: 14px; margin: 0; text-align: right; }
#article .bb-row a.bb-btn { grid-column: 3; grid-row: 1 / 3; }
/* the legacy label: the look of "Legacy Software" on the download page */
body#page #article p.bb-lh {
  width: min(640px, 100%); margin: 22px auto 8px; box-sizing: border-box; text-align: left;
  font: bold 19px/1.3 Verdana, Arial, sans-serif; color: #000;
}
#article .bb-pay { width: min(640px, 100%); margin: 22px auto 18px; text-align: center; }
body#page #article .bb-pay p { font: 12px/1.6 Verdana, Arial, sans-serif; color: #222; text-align: center; margin: 0 0 10px; text-wrap: balance; }
#article .bb-pay img { max-width: 100%; height: auto; }
/* the old DE heading about invoices for companies: kept as the heading it
   was, set like the payment text under the list */
#article .bb-corp { width: min(640px, 100%); margin: 0 auto 26px; }
body#page #article .bb-corp h2 { font: 12px/1.6 Verdana, Arial, sans-serif; color: #222; text-align: center; margin: 0; }
/* --- OT-BUYBOX end --- */

/* --- OT-NEWSLETTER ---
   The newsletter pages (layouts/_default/newsletter.html, js/nl.js):
   the sign-up form, the confirm page, the unsubscribe page. The language
   of the download cards: one sans (Segoe UI / Arial) and bold, the
   lists as white rows on a grey panel; the button dark, the second one
   outlined like the one of the buy box - the red stays with the downloads
   and the errors. One
   column of 630px, left-aligned under the text of the page. */
#article .ot-nl { max-width: 630px; margin-bottom: 36px; }
#article .ot-nl > form, #article .ot-nl > div, #article .ot-nl > p.ot-nl-status,
#article .ot-nl > p.ot-nl-notoken { margin-left: 5px; margin-right: 5px; }
#article .ot-nl p.ot-nl-nojs { margin-left: 5px; margin-right: 5px; }
#article .ot-nl-form, #article .ot-nl-act { margin: 18px 0 0; }
#article .ot-nl-field { margin: 0 0 16px; }
#article .ot-nl p { text-align: left; }
/* no automatic hyphenation on these short pages: it split the name ("Ou-tertech") */
#article .ot-nl p, #article .ot-nl li { hyphens: manual; -webkit-hyphens: manual; }
/* one family, the sans of the site, and bold - like the download cards */
#article .ot-nl label, #article .ot-nl legend {
  font: bold 13px/1.4 "Segoe UI", Arial, Helvetica, sans-serif; color: #1a1a1a;
}
#article .ot-nl-field label { display: block; margin: 0 0 6px; }
#article .ot-nl-field input {
  box-sizing: border-box; width: 100%; max-width: 420px; min-height: 40px; padding: 8px 10px;
  font: 15px/1.4 "Segoe UI", Arial, Helvetica, sans-serif; color: #000;
  border: 1px solid #888; border-radius: 3px; background: #fff;
}
#article .ot-nl-field input:focus { outline: 2px solid #000; outline-offset: 1px; border-color: #000; }
#article .ot-nl-field input::placeholder { color: #767676; opacity: 1; }
#article .ot-nl input[aria-invalid=true], #article .ot-nl input[aria-invalid=true]:focus { border-color: #cf0a0d; outline-color: #cf0a0d; }
#article .ot-nl-fielderr {
  display: block; margin: 6px 0 0; font: bold 13px/1.4 "Segoe UI", Arial, Helvetica, sans-serif; color: #cf0a0d;
}
#article .ot-nl-lists { margin: 0 0 14px; padding: 8px; border: 0; background: #f3f3f3; border-radius: 3px; }
#article .ot-nl-lists legend { float: left; width: 100%; padding: 2px 4px 8px; }
#article .ot-nl-lists label.ot-nl-list {
  clear: both; display: grid; grid-template-columns: 24px 1fr; column-gap: 6px; align-items: baseline;
  margin: 0 0 4px; padding: 9px 10px; background: #fff; cursor: pointer; font-weight: normal;
}
#article .ot-nl-lists label.ot-nl-list:last-child { margin-bottom: 0; }
#article .ot-nl-list input { grid-row: 1 / span 2; margin: 0; position: relative; top: 2px; width: 16px; height: 16px; }
#article .ot-nl-name { font: bold 13px/1.4 "Segoe UI", Arial, Helvetica, sans-serif; color: #000; }
#article .ot-nl-about { grid-column: 2; font: 13px/1.45 "Segoe UI", Arial, Helvetica, sans-serif; color: #555; }
#article p.ot-nl-consent {
  margin: 14px 0; font: 13px/1.55 "Segoe UI", Arial, Helvetica, sans-serif; color: #444;
}
#article .ot-nl-send { margin: 0 0 10px; }
#article button.ot-nl-btn {
  display: inline-block; box-sizing: border-box; cursor: pointer; min-height: 40px; min-width: 160px;
  font: bold 14px/1.3 "Segoe UI", Arial, Helvetica, sans-serif;
  padding: 10px 22px; border-radius: 3px; background: #222; border: 1px solid #222; color: #fff;
}
#article button.ot-nl-btn:hover { background: #000; border-color: #000; }
#article button.ot-nl-btn.ot-nl-btn2 { background: #fff; color: #000; }
#article button.ot-nl-btn.ot-nl-btn2:hover { background: #ececec; }
#article button.ot-nl-btn:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
#article button.ot-nl-btn:disabled { background: #555; border-color: #555; color: #fff; opacity: 1; cursor: default; }
/* the unsubscribe and language pages: the buttons one width */
#article .ot-nl[data-mode=unsubscribe] .ot-nl-act, #article .ot-nl[data-mode=language] .ot-nl-act { display: inline-block; }
#article .ot-nl[data-mode=unsubscribe] button.ot-nl-btn, #article .ot-nl[data-mode=language] button.ot-nl-btn { min-width: 280px; width: 100%; }
#article p.ot-nl-q { margin: 0 0 12px; font: bold 15px/1.45 "Segoe UI", Arial, Helvetica, sans-serif; color: #1a1a1a; }
/* the newsletter language: two radios in one row on a grey panel */
#article .ot-nl-langs { margin: 0 0 14px; padding: 8px 12px 10px; border: 0; background: #f3f3f3; border-radius: 3px; }
#article .ot-nl-langs legend { float: left; width: 100%; padding: 2px 0 6px; }
#article .ot-nl-langs label.ot-nl-lang {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 22px 0 0; padding: 4px 0;
  font-weight: normal; cursor: pointer;
}
#article .ot-nl-lang input { margin: 0; width: 16px; height: 16px; }
#article .ot-nl-status:empty { display: none; }
#article p.ot-nl-status, #article p.ot-nl-notoken, #article p.ot-nl-nojs {
  margin: 12px 0; padding: 10px 14px; font: 14px/1.5 "Segoe UI", Arial, Helvetica, sans-serif;
  border-left: 3px solid #999; background: #f6f6f6; color: #1a1a1a;
}
#article p.ot-nl-ok { border-left-color: #2e7d32; background: #eef6ee; }
#article p.ot-nl-err { border-left-color: #cf0a0d; background: #fbeeee; }
#article p.ot-nl-done { font-size: 15px; padding: 14px 16px; }
#article p.ot-nl-status:focus { outline: none; }
#article p.ot-nl-again { margin: 12px 5px; font: 14px/1.5 "Segoe UI", Arial, Helvetica, sans-serif; }
/* the honeypot: gone for people, there for a form filler */
#article .ot-nl-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#article .ot-nl [hidden] { display: none !important; }
/* --- OT-NEWSLETTER end --- */

/* --- OT-LEGAL ---
   The contact page (/en/contact, /de/kontakt, /fr/contact, /es/contact)
   and the imprint (/en/imprint, /de/impressum, /fr/mentions-legales,
   /es/aviso-legal), files/pages/<lang>/. The language of the newsletter
   pages: the sans of the site, bold labels, a dark top line on white
   cards, the grey panel with white rows for the list of the programs;
   the red stays with the downloads and the errors. One column of
   760px under the heading; the cards flow from three or two across into
   one where the column is narrow. The site has no dark scheme, so
   neither have these pages. */
/* a fixed width: #article is a float that shrinks to its content */
#article .ot-legal { width: 760px; max-width: 100%; margin: 0 0 30px; color: #1a1a1a; }
#article .ot-legal a { text-decoration: none; }
#article .ot-legal a:hover, #article .ot-legal a:focus-visible { text-decoration: underline; }
#article .ot-legal h1 { margin: 0 0 6px; text-align: left; }
#article .ot-legal p, #article .ot-legal li, #article .ot-legal dd, #article .ot-legal dt {
  text-align: left; hyphens: manual; -webkit-hyphens: manual;
}
#article .ot-legal p.ot-lead {
  margin: 0 0 18px; font: 15px/1.5 var(--ot-read, "Segoe UI", Arial, sans-serif); color: #444;
}
#article .ot-legal .ot-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0 0 14px;
}
#article .ot-legal .ot-card {
  box-sizing: border-box; min-width: 0; margin: 0; padding: 14px 16px 16px;
  background: #fff; border: 1px solid #d6d6d6; border-top: 3px solid #222; border-radius: 3px;
}
#article .ot-legal .ot-card.ot-main { border-top-color: #000; background: #fafafa; }
/* the imprint: four cards, two across */
#article .ot-imprint .ot-cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
#article .ot-legal .ot-card h2 {
  margin: 0 0 8px; padding: 0; border: 0; background: none;
  font: 600 17px/1.3 var(--ot-head, "Segoe UI", Arial, sans-serif); color: #000; text-align: left;
}
#article .ot-legal .ot-card p {
  margin: 0 0 8px; font: 14px/1.55 var(--ot-read, "Segoe UI", Arial, sans-serif); color: #333;
}
#article .ot-legal .ot-card p:last-child { margin-bottom: 0; }
#article .ot-legal .ot-card p.ot-big { font-size: 15px; color: #1a1a1a; }
/* a line with a small bold label in front: e-mail, phone, register */
#article .ot-legal .ot-k {
  display: block; margin: 0 0 1px; font: bold 12.5px/1.4 var(--ot-ui, "Segoe UI", Arial, sans-serif); color: #555;
}
#article .ot-legal a.ot-mail, #article .ot-legal a[href^="tel:"] { overflow-wrap: anywhere; font-weight: 600; }
#article .ot-legal address { font-style: normal; margin: 0 0 10px; }
#article .ot-legal a.ot-more { display: inline-block; margin-top: 2px; font-weight: 600; }
#article .ot-legal a.ot-more::after { content: " \2192"; }
/* the programs: white tiles on the grey panel, the name above its address */
#article .ot-legal .ot-panel { margin: 0 0 14px; padding: 12px 12px 10px; background: #f3f3f3; border-radius: 3px; }
#article .ot-legal .ot-panel h2 {
  margin: 0 4px 10px; padding: 0; border: 0; background: none;
  font: 600 17px/1.3 var(--ot-head, "Segoe UI", Arial, sans-serif); color: #000; text-align: left;
}
#article .ot-legal dl.ot-rows { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px; }
#article .ot-legal dl.ot-rows > div { min-width: 0; padding: 9px 12px 10px; background: #fff; border-radius: 2px; }
#article .ot-legal dl.ot-rows dt { margin: 0 0 1px; font: bold 14px/1.4 var(--ot-ui, "Segoe UI", Arial, sans-serif); color: #000; }
#article .ot-legal dl.ot-rows dd { margin: 0; font: 14px/1.45 var(--ot-read, "Segoe UI", Arial, sans-serif); }
/* the line under the cards: the other legal pages, small */
#article .ot-legal p.ot-foot {
  margin: 16px 0 0; padding-top: 10px; border-top: 1px solid #e2e2e2;
  font: 13px/1.5 var(--ot-read, "Segoe UI", Arial, sans-serif); color: #555;
}
/* --- OT-LEGAL end --- */

/* --- OT-BLOGLIST ---
   Blog overview - the same visual language as the post pages (see
   OT-BLOGPOST further down). Two columns of entries so that a long
   archive does not run down one narrow band beside an empty right
   half. Scoped to .bloglist.

   Sizes step 36 / 26 / 18 / 16 from page title down to body text, so
   the three levels are told apart at a glance and not by weight only. */

/* Same 36px gutter to the navigation as on the post pages. */
body#page h1.blogtitel {
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  font-size: 36px; text-align: left; margin: 34px 0 22px 36px; padding: 0;
  color: #1a1a1a; line-height: 1.18;
}

/* The newest post as a lead across the full width, so the page has a
   point to start reading. */
.blogaufmacher {
  max-width: 924px; margin: 0 0 0 36px;
  padding: 0 0 20px 0; border-bottom: 2px solid #e2e2e2;
}
.blogaufmacher .blogdate { margin: 0 0 7px 0; }
body#page .blogaufmacher h2 {
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  font-size: 26px; font-weight: bold; text-align: left;
  margin: 0 0 11px 0; padding: 0; border: none; line-height: 1.28;
}
body#page .blogaufmacher h2 a:link,
body#page .blogaufmacher h2 a:visited { color: #1a1a1a; text-decoration: none; }
body#page .blogaufmacher h2 a:hover { color: #cf0a0d; background: none; }
body#page .blogaufmacher p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px; line-height: 1.65; text-align: left; margin: 0;
  max-width: 576px; color: #333;
}

.bloglist {
  max-width: 924px; margin-left: 36px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px; row-gap: 0;
}
.bloglist .blogitem {
  margin: 0; padding: 22px 0; border-bottom: 1px solid #ececec;
}
/* The two entries right below a year mark keep the mark's own spacing;
   a fixed :first-child rule would miss them, because the mark itself is
   the first child of the grid. */
.bloglist .jahr + .blogitem,
.bloglist .jahr + .blogitem + .blogitem { padding-top: 14px; }
/* Fixed height so that titles in one grid row start on the same line,
   whether or not that post carries a date. The migrated posts have
   none. */
.bloglist .blogdate { margin: 0 0 5px 0; min-height: 15px; }
body#page .bloglist .blogitem h2 {
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  font-size: 18px; font-weight: bold; text-align: left;
  margin: 0 0 8px 0; padding: 0; border: none; line-height: 1.32;
}
/* Titles as text, not as a blue underlined link - two dozen of those
   in a row are noise, not hierarchy. Colour on hover. */
body#page .bloglist .blogitem h2 a:link,
body#page .bloglist .blogitem h2 a:visited {
  color: #1a1a1a; text-decoration: none;
}
body#page .bloglist .blogitem h2 a:hover {
  color: #cf0a0d; background: none; text-decoration: none;
}
/* The template cuts the teaser at a word boundary and sets its own
   ellipsis; the clamp is only the backstop for a long description, so
   that no entry pushes its grid row out of line. A clamp alone cut in
   the middle of words - and it hit names: "AMD Ryze...". */
body#page .bloglist .blogitem p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px; line-height: 1.55; text-align: left; margin: 0;
  color: #444;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}

/* Year marks: they span both columns and break the archive into
   something the eye can hold on to. No rule of their own - the entry
   above already ends in one, and two lines would pin the year between
   them. */
.bloglist .jahr, .jahroben {
  grid-column: 1 / -1;
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  font-size: 11px; font-weight: bold; color: #595959;
  letter-spacing: .1em; text-transform: uppercase;
  margin: 20px 0 0 0; padding: 0;
}
/* Right under the page title the title's own margin is the gap. */
h1.blogtitel + .bloglist > .jahr:first-child { margin-top: 0; }
/* The lead carries the mark of its own year and sits outside the grid,
   so it takes the left gutter itself. */
.jahroben { margin: 0 0 12px 36px; }
body#page p.blogarchive {
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  font-size: 12px; text-align: left; margin: 24px 0 56px 36px;
}
body#page p.blogempty {
  font-family: Georgia, "Times New Roman", serif;
  color: #888; text-align: left; margin: 0;
}
/* A narrow window (the text column under about 760px): one column, and
   a gutter on the right - two columns of 230px broke every title into
   five lines, and the list ran up to the edge of the window. */
@media (max-width: 1099px) {
  .bloglist { grid-template-columns: minmax(0, 1fr); margin-right: 24px; }
  .bloglist .jahr + .blogitem + .blogitem { padding-top: 22px; }
  .blogaufmacher { margin-right: 24px; }
}
/* --- OT-BLOGLIST end --- */

/* Comparison tables: the first header cell is empty and a <td>, not
   a <th> - site.css colours only thead th, so it stayed white. */
table.comparelist thead td {
  background: #f0f0f0;
  border-bottom: 1px solid #999;
  border-left: 1px solid #fff;
}

/* --- OT-BLOGPOST ---
   Appearance of blog posts. Everything is scoped to .blogpost, so no
   page outside the blog is affected. Typeface and colours stay those of
   the site (Georgia for body text, Verdana for headings, the site red
   #cf0a0d); only spacing, alignment and sizes are set anew.

   The site puts #article at left:210px while the navigation column ends
   at 215 - the text would otherwise touch it. The 36px gutter is part
   of the content, the site skeleton stays untouched. #article is 960px
   wide; everything right of 1170px belongs to the template.
   36 + 576 + 48 + 300 = 960, so the text column runs from 246 to 1170,
   exactly like the overview. The 48px gutter is wider than the spacing
   inside either column - at 32 the eye slipped across into the rail at
   the end of a line.

   Layout: header across the full width with the product mark beside the
   title, then the text with a rail beside it. The rail carries download
   and the neighbouring posts. A release note is short - with the download
   alone the rail ran out after 370px and left a hole of 300 by 600
   pixels beside the text.

   The Verdana chains end in sans-serif - the site's own chains end in
   serif, which hands a visitor without Windows fonts a serif heading. */

.blogpost { box-sizing: border-box; padding-left: 36px;
            margin: 34px 0 56px 0; max-width: 960px; }
.blogpost .koerper { display: flex; align-items: flex-start; gap: 48px; }
.blogpost .haupt   { flex: 0 1 576px; min-width: 0; }
.blogpost .schiene { flex: 0 0 300px; position: sticky; top: 24px; }

/* Header across the full width. The product mark stands beside the
   title, not above it and not in the rail: on its own it was a picture
   with nothing to belong to. */
.blogpost .kopf {
  display: flex; align-items: center; gap: 20px;
  padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 2px solid #e2e2e2;
}
.blogpost .kopf img.marke {
  flex: 0 0 auto; height: 58px; width: auto; display: block;
}
.blogpost .titelzeile { min-width: 0; }
body#page .blogpost h1, .blogpost .titel {
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  font-size: 30px; line-height: 1.22; font-weight: bold;
  text-align: left; margin: 0; padding: 0; color: #1a1a1a;
  max-width: 820px;
}
/* The posts of 2011-2019 come through layouts/_default/single.html:
   their title is a div (.titel) set like the h1 above, and the way back
   to the archive sits under the text, inside the post's own gutter. */
.blogpost p.blogarchive { margin: 24px 0 0 0; }

/* One date style on both pages: spaced small caps, above the title */
.blogpost .datum, .bloglist .blogdate, .blogaufmacher .blogdate,
.blogpost .karte .datum {
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  font-size: 11px; color: #767676; letter-spacing: .06em;
  text-transform: uppercase; font-weight: normal;
}
.blogpost .kopf .datum { margin: 0 0 9px 0; }

/* Body text: left aligned instead of justified, more leading */
body#page .blogpost p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px; line-height: 1.65; text-align: left;
  margin: 0 0 14px 0; color: #1a1a1a;
}

/* Links inside the text in the site red, not in browser blue. */
body#page .blogpost p a:link, body#page .blogpost p a:visited,
body#page .blogpost li a:link, body#page .blogpost li a:visited {
  color: #cf0a0d; text-decoration: underline;
}
body#page .blogpost p a:hover, body#page .blogpost li a:hover {
  color: #8f0709; background: none;
}

/* Section headings. 19px sits between the 30px title and the 16px text -
   at 16px the heading was exactly as large as the paragraph under it
   and carried by its weight alone. The space above it does the
   dividing, not the size. */
body#page .blogpost h2 {
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  font-size: 19px; font-weight: bold; text-align: left; line-height: 1.3;
  margin: 32px 0 16px 0; padding: 0; color: #1a1a1a; border: none;
}

/* List of changes - hanging indent, marker inside the column */
.blogpost ul.neu { list-style: none; margin: 0 0 18px 0; padding: 0; }
.blogpost ul.neu li {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px; line-height: 1.5; color: #1a1a1a;
  padding: 0 0 0 20px; margin: 0 0 10px 0; position: relative;
}
.blogpost ul.neu li:before {
  content: ""; position: absolute; left: 4px; top: .6em;
  width: 4px; height: 4px; background: #1a1a1a; opacity: .55;
  border-radius: 50%;
}

/* Screenshots side by side: two at 276px with a 24px gutter fill the
   576px column exactly, a single one takes the whole column. Stacked at
   full width they were a wall of 863px before the first heading.

   Two rows - pictures, then captions - and each figure hands its two
   parts to those rows (subgrid). So the captions share one baseline
   even when the two screenshots are of different proportions, and no
   picture has to be boxed into a fixed height or cropped for it. */
.blogpost .bilder {
  margin: 26px 0 6px 0; display: grid; gap: 10px 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-template-rows: auto auto; align-items: start;
}
.blogpost .bilder figure {
  min-width: 0; margin: 0; padding: 0;
  display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 10px;
}
.blogpost .bilder a { display: block; align-self: start; }
.blogpost .bilder img.thumb {
  width: 100%; height: auto; display: block; margin: 0; padding: 0;
  border: 1px solid #e5e5e5; border-radius: 3px; box-sizing: border-box;
}
.blogpost .bilder figcaption {
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  font-size: 12px; line-height: 1.45; color: #595959;
  margin: 0; text-align: left;
}

/* The rail: download and the neighbouring posts */
/* Flex with a minimum height, so that the button is the same size on
   every product page however long its wording is - only the type gets
   smaller, not the button. */
body#page .blogpost .schiene a.knopf {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; box-sizing: border-box; text-align: center;
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  font-size: 15px; font-weight: bold; line-height: 1.3;
  color: #fff; background: #cf0a0d; border-radius: 3px;
  padding: 10px 16px; text-decoration: none; text-shadow: none;
  text-wrap: balance;
}
/* The layout counts the characters and sets these. "Download Clipboard
   History Pro" left the word "Pro" alone on a second line; one step
   down and it fits on one. Beyond that the button wraps, but evenly -
   balance splits it in the middle instead of at the last word. */
body#page .blogpost .schiene a.knopf.lang     { font-size: 13px; padding: 10px 12px; }
body#page .blogpost .schiene a.knopf.sehrlang { font-size: 12px; padding: 10px 10px;
                                                letter-spacing: -.01em; }
body#page .blogpost .schiene a.knopf:hover { background: #a80609; color: #fff; }
.blogpost .schiene .meta {
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  font-size: 11px; line-height: 1.5; color: #767676;
  margin: 9px 0 0 0; text-align: center;
}

/* The neighbouring posts in the rail, one below the other, separated by
   a rule instead of a grey panel - #f7f7f7 on white is not a shape. */
.blogpost .weitere { margin: 44px 0 0 0; padding: 20px 0 0 0;
                     border-top: 1px solid #e2e2e2; }
body#page .blogpost .weitere h3 {
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  font-size: 11px; font-weight: bold; text-align: left;
  text-transform: uppercase; letter-spacing: .06em; color: #595959;
  margin: 0 0 4px 0; padding: 0; text-decoration: none;
}
body#page .blogpost a.karte {
  display: block; padding: 14px 0; background: none; color: #1a1a1a;
  border-bottom: 1px solid #ececec; text-decoration: none;
}
.blogpost .weitere a.karte:last-child { border-bottom: none; padding-bottom: 0; }
body#page .blogpost a.karte:hover { background: none; }
.blogpost .karte .datum { display: block; margin: 0 0 5px 0; }
.blogpost .karte .titel {
  font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
  font-size: 14px; line-height: 1.4; font-weight: bold; display: block;
}
body#page .blogpost a.karte:hover .titel { color: #cf0a0d; }
/* the way back to the blog under every post (1.70.3) */
body#page .blogpost p.zurueck { margin: 18px 0 0; font: 13px/1.5 Verdana, Arial, sans-serif; }
body#page .blogpost p.zurueck a { color: #1a1a1a; text-decoration: underline; background: none; }
body#page .blogpost p.zurueck a:hover { color: #cf0a0d; }
/* --- OT-BLOGPOST end --- */

/* --- OT-MENU-SELECTION ---
   Clicking an entry used to leave its label selected; on the grey bar of
   the active entry the white text then all but disappeared. Keyboard
   focus is unaffected. */
div#menu li a,
#left div.moduletable_menu li a {
  -webkit-user-select: none;
  user-select: none;
}
/* --- OT-MENU-SELECTION end --- */

/* --- OT-MENU-CONTRAST ---
   White on #969696 is 2.96:1, WCAG AA asks for 4.5:1. #707070 is 4.95:1.
   On trial - delete this block and run ot-build for the old grey. */
#left div.moduletable_menu li.active,
#left div.moduletable_menu li.active:hover {
  background-color: #707070;
}
/* --- OT-MENU-CONTRAST end --- */

/* --- OT-LINK-HOVER ---
   site.css puts black text on #000055 while the mouse is over one of
   these links - 1.13:1, effectively invisible. White is 18.6:1. Here and
   not in site.css, because site.css is not part of any package and a
   hand edit to it would be lost the next time it is replaced. */
a.linkbluewsh:hover {
  color: #ffffff;
}
/* The heading "Apps by Name" of the left menu leads to the overview of all
   programs (1.70.1): it stays a heading to look at, the link shows on hover. */
#left a.ot-lefthead { color: inherit; text-decoration: none; }
#left a.ot-lefthead:hover { text-decoration: underline; }
/* --- OT-LINK-HOVER end --- */

/* --- OT-ANDROID-FIREFOX ---
   Firefox on Android showed this site worse than Chrome on the same
   phone, for three reasons:
   1. Font inflation. On a page without a mobile viewport Firefox enlarges
      the text of wide blocks, up to about double, and leaves narrow ones
      alone - the main column grows, the menu and the boxes do not, and
      lines outgrow their boxes. none turns that off for this site. Chrome
      does not inflate this page and is left alone; -moz- is read by
      Firefox for Android only.
   2. Georgia. Android has no Georgia. Chrome follows Android's alias
      georgia -> serif, Firefox falls through to Arial, so body text and
      the left menu came out sans-serif. Noto Serif (Android 5 and later)
      and Droid Serif (before) are named right after Georgia; wherever
      Georgia exists nothing changes. The selectors are the five in
      site.css with the stack Georgia, Arial.
   3. Text without a font of its own gets the browser default: serif in
      Chrome and on every desktop, sans-serif in Firefox for Android.
      Stating serif makes it the same everywhere.
   4. Noto Serif is larger than Georgia at the same size - its small
      letters are 0.536 of the size against Georgia's 0.481 - so in both
      browsers on Android "Zwischenablage erweitern" no longer fitted its
      menu bar and ran into the entry below. font-size-adjust scales any
      stand-in to Georgia's proportion; Georgia itself stays as it is. */
html {
  -moz-text-size-adjust: none;
}
body#page {
  font-family: serif;
}
body#page p, #left, blockquote div, h4, h6 {
  font-family: Georgia, "Noto Serif", "Droid Serif", Arial, Helvetica, sans-serif;
}
#left {
  font-size-adjust: 0.481;
}
/* --- OT-ANDROID-FIREFOX end --- */

/* --- OT-DUP-IDS ---
   The download tables used id="adddownloads" seven times per page; it is
   a class now. Same values as #adddownloads in site.css, which is not
   part of any package and keeps its (now unused) rule. */
.adddownloads { position: relative; top: 0; left: 0; width: 769px; }
/* --- OT-DUP-IDS end --- */

/* --- OT-LIST-FONT ---
   Lists in the text column had no font of their own and took the page
   default, serif - Times New Roman on Windows - while the paragraphs
   around them are Georgia. At the same 14px Times looks a size smaller,
   and the feature lists under the product texts read as small print.
   The lists get the stack of the paragraphs. Set on ul/ol, not on li: a
   list entry or link with a font of its own keeps it, and so do the
   search results of pagefind. */
#article :is(ul, ol):not(.pagefind-ui *) {
  font-family: Georgia, "Noto Serif", "Droid Serif", Arial, Helvetica, sans-serif;
}
/* --- OT-LIST-FONT end --- */

/* --- OT-TEXT-FONT ---
   More text in the text column without a font of its own, so in Times
   New Roman on Windows beside the Georgia of the paragraphs: the names
   under the testimonials take the stack of the paragraphs, the bold
   in-text headings (Referenzen, Funktionsübersicht - b at 130%) take
   Verdana, like every other heading of the pages. The download boxes
   have a block of their own, OT-DOWNLOAD-BOX. */
#article td:has(blockquote) {
  font-family: Georgia, "Noto Serif", "Droid Serif", Arial, Helvetica, sans-serif;
}
#article b[style*="130%"] {
  font-family: Verdana, Arial, sans-serif;
}
/* --- OT-TEXT-FONT end --- */

/* --- OT-DOWNLOAD-BOX ---
   The download boxes of the product pages (div.download, 136 on 108
   pages), chosen 2026-09-25 from five designs: a list of files, not a
   grey box - a red download sign, the name of the download in bold black,
   the note beside it; hairlines between the rows, a red line on top of
   the first. The name is underlined, so it reads as the link it is. The
   green arrow and the text shadow of the old template are gone. Only
   CSS: the boxes come in three kinds of markup (link and text, link <br>
   text, link <div inline> text), all laid out alike.

   Name and note are two columns. The name is at least 270px wide, so the
   notes of a pair of boxes start at one x, and at most 420px (60% of a
   narrow box):
   a longer name breaks within its column, a note too long for the rest
   breaks within its own - neither ever ends up under the other. */
#article .download {
  display: flex; align-items: baseline; column-gap: 24px;
  box-sizing: border-box; width: min(780px, 100%) !important; margin: 0 auto !important; padding: 8px 4px 8px 28px !important;
  background: none !important; border: 0 !important; border-bottom: 1px solid #e0e0e0 !important;
  position: relative; text-align: left !important;
  font: 12px/1.5 Verdana, Arial, sans-serif; color: #222;
}
#article .download:not(.download + .download) {
  border-top: 2px solid #cf0a0d !important; margin-top: 12px !important;
}
#article .download:not(:has(+ .download)) { margin-bottom: 12px !important; }
#article .download::before {
  content: ""; position: absolute; left: 4px; top: 10px; width: 16px; height: 16px;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iMiIgZmlsbD0iI2NmMGEwZCIvPjxwYXRoIGQ9Ik04IDMuNXY3TTUgNy41IDggMTAuNWwzLTNNNC41IDEyLjVoNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNiIvPjwvc3ZnPg==") no-repeat;
}
#article .download a.linkbluesh {
  flex: 0 1 auto; min-width: 270px; max-width: min(60%, 420px); margin: 0 !important; text-shadow: none;
  font: bold 13px/1.4 Verdana, Arial, sans-serif; color: #000 !important; text-decoration: underline !important;
}
#article .download a.linkbluesh:hover { color: #cf0a0d !important; background: none; text-decoration: underline !important; }
/* A box on its own has nothing to line up with: the note goes under the
   name, and the box is as wide as the longer of the two. A pair keeps
   the two columns and the fixed width, so its rows end at one x and its
   notes start at one x. */
#article .download:not(.download + .download):not(:has(+ .download)) {
  width: fit-content !important; max-width: 100%;
  flex-direction: column; align-items: flex-start; row-gap: 1px; padding-right: 16px !important;
}
#article .download:not(.download + .download):not(:has(+ .download)) a.linkbluesh {
  max-width: none; min-width: 0;
}
/* ... and both are centred in it (1.70.1): the note stands in the middle
   under the name, not at its left edge. The red sign moves onto the name,
   so it stays in front of it; the box keeps its width. */
#article .download:not(.download + .download):not(:has(+ .download)) {
  align-items: center; text-align: center !important; padding-left: 4px !important;
}
#article .download:not(.download + .download):not(:has(+ .download))::before { display: none; }
#article .download:not(.download + .download):not(:has(+ .download)) a.linkbluesh {
  padding-left: 24px; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iMiIgZmlsbD0iI2NmMGEwZCIvPjxwYXRoIGQ9Ik04IDMuNXY3TTUgNy41IDggMTAuNWwzLTNNNC41IDEyLjVoNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNiIvPjwvc3ZnPg==") no-repeat 0 1px;
}
/* A box right under a table narrower than the text column: install.sh
   puts the two into a frame as wide as the table, and the box centres in
   it - under the table, not in the column. The table stands 5px in, the
   box half of that. */
#article .dl-under { display: flow-root; width: fit-content; max-width: 100%; }
#article .dl-under > .download { left: 2.5px; }
/* Six pages hold the boxes in the first cell of a table, an award logo
   in the second (PC Welt, Softpedia). The table becomes a grid of one
   cell, as wide as the boxes and centred under the text above; the award
   shares that cell as a small seal at the right end of the red top line,
   caption left of the logo - it belongs to the downloads without pushing
   them down or off centre. */
#article table:has(> tbody > tr > td > .download) {
  display: grid; grid-template-columns: auto; justify-content: center;
  width: 100% !important; margin-left: 0 !important;
}
#article table:has(> tbody > tr > td > .download) > tbody,
#article table:has(> tbody > tr > td > .download) > tbody > tr { display: contents; }
#article table:has(> tbody > tr > td > .download) > tbody > tr > td { display: block; grid-area: 1 / 1; width: auto !important; max-width: 100%; padding: 0; }
#article table:has(> tbody > tr > td > .download) > tbody > tr > td:first-child { padding-top: 20px; }
#article table:has(> tbody > tr > td > .download) > tbody > tr > td:first-child > .download:first-child { margin-top: 6px !important; }
#article table:has(> tbody > tr > td > .download) > tbody > tr > td:nth-child(2) {
  justify-self: end; align-self: start; position: relative; z-index: 1; height: 21px;
  display: flex; align-items: flex-end; justify-content: flex-end;
}
#article table:has(> tbody > tr > td > .download) > tbody > tr > td:nth-child(2) > a {
  display: flex; flex-direction: row-reverse; align-items: flex-end; column-gap: 8px;
  text-decoration: none !important; text-shadow: none !important; background: none !important;
}
#article table:has(> tbody > tr > td > .download) > tbody > tr > td:nth-child(2) br { display: none; }
#article table:has(> tbody > tr > td > .download) > tbody > tr > td:nth-child(2) img {
  display: block; float: none; margin: 0 !important; padding: 0 !important; border: 0 !important;
  width: auto; height: 20px;
}
#article table:has(> tbody > tr > td > .download) > tbody > tr > td:nth-child(2) img[src*="pcwelt_200"] { width: 100px; height: auto; margin: -5px 0 -4px !important; }
#article table:has(> tbody > tr > td > .download) > tbody > tr > td:nth-child(2) center {
  font: 11px/1 Verdana, Arial, sans-serif; color: #222; white-space: nowrap; padding-bottom: 3px;
}
#article table:has(> tbody > tr > td > .download) > tbody > tr > td:nth-child(2) a:hover center { color: #cf0a0d; text-decoration: underline; }
/* the Softpedia badge (158x85) is only readable larger: a taller band */
#article table:has(> tbody > tr > td > .download):has(img[src*="softpedia"]) > tbody > tr > td:first-child { padding-top: 44px; }
#article table:has(> tbody > tr > td > .download):has(img[src*="softpedia"]) > tbody > tr > td:nth-child(2) { height: 45px; }
#article table:has(> tbody > tr > td > .download) > tbody > tr > td:nth-child(2) img[src*="softpedia"] { height: 44px; }
#article table:has(> tbody > tr > td > .download) > tbody > tr > td:nth-child(n+3) { display: none; }
/* the "show the differences" panel under such a table stays centred under the boxes */
#article table:has(> tbody > tr > td > .download) + :is(#adddownloads, .adddownloads) { margin-left: auto !important; margin-right: auto !important; }
/* the pieces of the older markup: the inline div becomes its text, line
   breaks and empty paragraphs go, bold as the whole note is not bold */
#article .download > div { display: contents !important; }
#article .download br, #article .download p:empty { display: none; }
#article .download b { font-weight: normal; }
/* --- OT-DOWNLOAD-BOX end --- */

/* --- OT-TEXT-WIDTH ---
   The text column ran as wide as the window: at 2000px a line held 150
   characters and more, and beside four lines of text the pictures of the
   page head left a hole. At most 1400px now - two columns of about 680,
   a line of about 110 characters. The download page keeps its own
   width (OT-DNLOAD). */
#article { max-width: 1400px; }
/* The row of two columns at the top of a product page ends with 5px of
   padding; a download box right under it keeps 1px to the pictures. */
#article .colmask.doublepage:has(+ br + center > .download:first-child,
                                 + br + div > .download:first-child,
                                 + center > .download:first-child,
                                 + div > .download:first-child,
                                 + .download) { padding-bottom: 1px; }
/* --- OT-TEXT-WIDTH end --- */

/* --- OT-SITEMAP ---
   The sitemap for people (layouts/_default/sitemap-page.html): the pages
   as a tree - the software with its products and their pages, then
   download, buy, articles, blog, website, help, about. The software in
   one column, the rest in a second where the page is wide enough; lines
   join a page to the one it belongs to. The blog years fold open. */
/* A fixed width: the page was as wide as its longest line, and opening
   a blog year with a long title widened it and moved everything. */
#article:has(.smtree) { width: min(860px, calc(100vw - 240px)); }
.smtree { margin: 16px 0 30px 5px; font-family: Georgia, "Noto Serif", "Droid Serif", Arial, Helvetica, sans-serif; font-size: 14px; color: #000; }
.smtree ul { list-style: none; margin: 0; padding: 0; }
/* two lists side by side, the software left and the rest right - fixed,
   so opening a blog year only lengthens its own column (CSS columns
   rebalanced and threw whole sections across) */
.smtree { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); column-gap: 56px; }
.smtree > ul > li { margin: 0 0 22px; }
.smtree > ul > li > a, .smtree > ul > li > span {
  display: block; font: bold 15px Verdana, Arial, sans-serif; color: #000;
  padding-bottom: 4px; margin-bottom: 4px; border-bottom: 2px solid #cf0a0d;
}
.smtree ul ul li { position: relative; padding-left: 20px; line-height: 1.8; }
.smtree ul ul ul { margin-left: 2px; }
.smtree ul ul li::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; border-left: 1px solid #b4b4b4; }
.smtree ul ul li:last-child::before { bottom: auto; height: 0.95em; }
.smtree ul ul li::after { content: ""; position: absolute; left: 4px; top: 0.95em; width: 11px; border-top: 1px solid #b4b4b4; }
.smtree ul ul > li:has(> ul) > a, .smtree ul ul > li > span { font-weight: bold; }
.smtree a:link, .smtree a:visited { color: #0000A8; text-decoration: none; }
.smtree a:hover { color: #fff; background-color: #000055; text-decoration: none; }
.smtree > ul > li > a:link, .smtree > ul > li > a:visited { color: #000; }
.smtree details > summary { cursor: pointer; font: bold 13px Verdana, Arial, sans-serif; line-height: 1.8; }
.smtree details > summary .sm-n { font-weight: normal; color: #444; margin-left: 4px; }
.smtree details > summary .sm-n::before { content: "("; } .smtree details > summary .sm-n::after { content: ")"; }
/* --- OT-SITEMAP end --- */

/* --- OT-WHITESPACE ---
   Empty lines the Joomla editor typed into the text (whitespace audit
   2026-09-26). fix-markup.py puts one <span class="ot-sp"> where it took
   out a line of &nbsp;, a run of <br> at the edge of a block or an empty
   <p>: an 8px step instead of a 20px empty line, so paragraphs stay apart
   and sections no longer drift. */
#article .ot-sp { display: block; height: 8px; }
/* <div class="clr">&nbsp;</div> after every "click here to show the
   differences" panel: a clear helper with a space in it, so a 20px empty
   line; site.css has no rule for .clr. Height 0 keeps the clearing. */
#article div.clr { clear: both; height: 0; overflow: hidden; }
/* ... and the panel keeps 8px under its toggle line, or the line below
   it (the update boxes, a heading) would sit 1px under it. */
#article .jkefel { padding-bottom: 8px; }
/* --- OT-WHITESPACE end --- */

/* --- OT-LAYOUT-FIX ---
   The grey buttons under the downloads (update / newsletter / changelog:
   div.tip and div.info written with display: inline, 87 on 29 pages).
   As inline boxes their text broke inside the button, and the padding of
   a broken box takes no room in the line, so the next line ran into it.
   Each button is one unbroken piece now; where a row is too long for the
   column, whole buttons go to the next line. The extra 50px on the right
   of the Linkman changelog button go - all three are padded alike - and
   the 740px frame of the Linkman downloads shrinks with a narrow column
   instead of running out of it. */
#article div:is(.tip, .info)[style*="display: inline"] {
  display: inline-block !important; width: auto !important; white-space: nowrap;
  padding-right: 10px !important; margin-top: 4px !important; margin-bottom: 4px !important;
  vertical-align: top;
}
#article div[style*="width"]:has(> div:is(.tip, .info)[style*="display: inline"],
                                 > .ot-btns > div:is(.tip, .info)[style*="display: inline"]) { max-width: 100%; }
/* A window narrower than about 1300px (a small laptop, a tablet, the
   980px a phone lays a page out at): #article is placed absolutely and
   grows with its widest piece - the 960px Linkman video, the 993px
   Firefox screenshot, the 900px table of the portable page - so 20
   product pages ran past the window and got a horizontal scrollbar
   (layout audit 2026-09-26). There the column ends at the window and
   those pieces shrink with it, the video keeps 16:9. From 1300px on
   nothing changes. */
@media (max-width: 1299px) {
  #article { max-width: calc(100vw - 230px); }
  #article :is(img, iframe, table, div[style*="width"]) { max-width: 100%; }
  #article img { height: auto; }
  #article iframe { height: auto; aspect-ratio: 16 / 9; }
}
/* The orange key words of the registry tutorial (#ff641a, 2.96:1 on
   white) were hard to read; the same orange, darker: 5.2:1. */
#article font[color="#ff641a" i] { color: #c2410c; }
/* The mail address of the feedback pages stood alone in a div, 5px left
   of the text above it; paragraphs keep 5px. */
#article > div > a.ot-mail:only-child { margin-left: 5px; }
/* de/windows-optimieren: the right column began with an empty
   <h2>&nbsp;</h2> so that its text starts level with the heading of the
   left column. An empty heading is noise to a search engine; the page has
   a <div class="ot-h2gap"> there now, one line of an #article h2 (21px,
   line height 1.3 - OT-FONTS) and no heading. */
#article .ot-h2gap { font-size: 21px; line-height: 1.3; margin: 0 1px 0 5px; }
/* Justified text in a narrow column (layout audit 2026-09-27): the Joomla
   pages fixed widths of 200 to 450px - tables beside screenshots on the
   add-on pages, the testimonial quotes, the boxes beside the photo on the
   contact and feedback pages - and in so short a line justification
   opened wide gaps between the words. These columns are set flush left,
   everything else stays justified. */
#article table.simplebox td :is(p, div),
#article td > blockquote, #article td > blockquote div,
#article .ot-quote blockquote, #article .ot-quote blockquote div,
#article div[style*="width"]:has(> p > img.winlogo) > p { text-align: left; }
/* The two columns of the product pages are about 680px wide; below a
   window of about 1200px (and on a phone) they fall under 480px, and
   there they are set flush left as well. */
@media (max-width: 1209px) {
  #article .colmask :is(.col1, .col2) :is(p, blockquote, blockquote div) { text-align: left; }
}
/* The entries of the left menu were #646464 on the grey bar #e6e6e6
   (4.7:1) - grey on grey next to the new fonts; #333 is 10:1. The active
   entry (white on its dark bar) and the hover colour are more specific
   in site.css and stay as they are. */
#left div.moduletable_menu li a, #left div.moduletable_menu a:link,
#left div.moduletable_menu a:visited { color: #333; }
/* HowTo overview (en/de/fr/es howto): two groups of links, each entry
   with one line on what the reader finds there. The page is sized to its
   content (860px as the sitemap, narrower with the window). Two columns:
   the groups on the left, the question mark on the right beside them, so
   every line has the same measure. Below a window of 1100px (a phone
   lays the page out at 980) the picture - decoration only, alt="" -
   gives its room to the text, so each description keeps one line.
   Headings are the #article h2 of
   OT-FONTS, set left with a thin rule as the section heads of the
   product pages (.ot-head). */
#article:has(> .ot-howto) { width: min(860px, calc(100vw - 240px)); }
#article .ot-howto {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 36px;
  margin: 18px 0 0; }
#article .ot-howto > * { grid-column: 1; }
#article .ot-howto > .ot-howto-img { grid-column: 2; grid-row: 1 / span 4; margin: 2px 5px 0 0; }
#article .ot-howto h2 {
  text-align: left; margin: 0 5px 10px; padding: 0 0 4px; border-bottom: 1px solid #e0e0e0; }
#article .ot-howto dl { margin: 0 5px 26px; }
#article .ot-howto dt { margin: 12px 0 0; line-height: 1.4; }
#article .ot-howto dt:first-child { margin-top: 0; }
#article .ot-howto dd { margin: 2px 0 0; font-size: 15px; line-height: 1.45; color: #222; }
#article .ot-howto p.ot-howto-foot { text-align: left; margin: 0 5px; }
@media (max-width: 1099px) {
  #article .ot-howto { display: block; }
  #article .ot-howto > .ot-howto-img { display: none; }
}
/* --- OT-LAYOUT-FIX end --- */

/* --- OT-PRODUCT-LAYOUT ---
   The part under the download box of the GetDiz FAQ pages and the
   Batchrun feature pages (text-fixes.txt, files/pages es/fr; 0234). The
   GetDiz screenshots stand centred under the centred download box
   (p.ot-shots), as on create-batch-file. The
   FAQ ran as one column of 300px beside an empty half, with Q: and A: on
   lines of their own and the text italic and justified: two columns now,
   question bold, answer upright and left-aligned (div.ot-faq). The Batchrun
   feature list ran across the page under a screenshot of its own, with a
   Verdana heading: the screenshot beside the list, the list in two columns
   where there is room (div.ot-feat). Headings in the Georgia of the page
   heading. Below a window of 995px - a phone lays the page out at 980 -
   all of it is one column. */
/* The part is as wide as the text column, so its centred rows share the
   axis of the download box. The FAQ and the feature list take the frame
   of the two columns at the top (10px wider, as .colmask.doublepage):
   the FAQ columns are 49% and 48% of it with 2% between, the text 5px in
   from each edge - so the second question starts where the right column
   of the intro does, at every width. */
#article .ot-lower { display: block; clear: both; }
#article :is(.ot-faq, .ot-feat) { margin-right: -10px; }
#article .ot-shots { text-align: center; margin: 14px 0 0; }
/* the Gizmo quote under the GetDiz screenshots (de) stands on the same
   axis as the centred rows above it, not at the left edge */
#article .ot-quote { margin-left: auto; margin-right: auto; max-width: 100%; }
/* The grey buttons under the downloads (update / newsletter / changelog)
   stood at the left edge of the column under a download box set in the
   middle (0260). fix-markup.py (part 10) puts each row of them into a
   div.ot-btns, on every page; the row is centred in the column, as the
   box above it. Whole buttons go to the next line where the column is
   too narrow (OT-LAYOUT-FIX), each line centred. */
#article .ot-btns { text-align: center; }
/* The pages give the buttons margins of their own on the right only
   (10px, 11px, 3px - whatever the Joomla editor typed), so a line that
   ended in such a button sat a few pixels left of the middle. In the row
   every button has 5px on either side: equal gaps, and each line of the
   row centred exactly. */
#article .ot-btns > div:is(.tip, .info) { margin-left: 5px !important; margin-right: 5px !important; }
#article .ot-lower > .ot-btns { margin-top: 4px; }
#article .ot-head {
  margin: 22px 5px 12px; padding: 0 0 4px; border-bottom: 1px solid #e0e0e0; text-align: left;
  font: bold 17px/1.3 Georgia, "Noto Serif", "Droid Serif", Arial, Helvetica, sans-serif; color: #000;
}
#article .ot-faq { display: grid; grid-template-columns: 49% 48%; column-gap: 2%; margin-bottom: 10px; }
#article .ot-faq > .ot-head { grid-column: 1 / -1; }
#article .ot-faq-item { padding: 0 5px; }
#article :is(.ot-faq, .ot-feat) p:not(.ot-head) { text-align: left; font-style: normal; margin: 0 0 8px; line-height: 1.5; }
#article .ot-faq p.ot-q { font-weight: bold; margin-bottom: 6px; }
#article .ot-feat { margin-bottom: 10px; padding-right: calc((100% + 10px) / 100); }
#article .ot-feat-body { display: flex; align-items: flex-start; column-gap: 28px; padding: 0 5px; }
#article .ot-feat-body > a { flex: none; }
#article .ot-feat-body > a img.thumb { margin-top: 0; }
#article .ot-feat-body > ul.checkbox { flex: 1 1 0; min-width: 0; margin: 0; columns: 2 300px; column-gap: 40px; }
#article .ot-feat-body > ul.checkbox li { margin: 0 0 10px; line-height: 1.4; break-inside: avoid; }
@media (max-width: 994px) {
  #article .ot-faq { grid-template-columns: 99%; }
  #article .ot-feat-body { flex-direction: column; row-gap: 14px; }
  #article .ot-feat-body > ul.checkbox { columns: 1; }
}
/* --- OT-PRODUCT-LAYOUT end --- */

/* --- OT-FONTS ---
   The fonts of the site (27.09.2026, concept A2 + left menu in Franklin
   Gothic Medium 14px): Segoe UI for reading text and the interface,
   Bahnschrift for headings, box titles and tabs, Cambria italic for the
   testimonials, Franklin Gothic Medium for the left menu. All preinstalled
   on Windows 10 and 11; Android/iOS fall back to their system fonts.
   Always the last block of custom.css, so it overrides the older font
   rules above it (install.sh keeps it there). */
/* A2 r3 "Windows-native sans" - Segoe UI / Bahnschrift / Cambria (testimonials)
   Font proposal, generator fa, round 1. Load after custom.css.
   All primary families ship with Windows 10 and 11 (Microsoft font lists);
   the names after them are for Android (Roboto, Noto Serif) and iOS
   (-apple-system = San Francisco, Georgia). */
:root {
  --ot-read: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --ot-ui: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --ot-head: Bahnschrift, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --ot-nav: Bahnschrift, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --ot-quote: Cambria, "Noto Serif", "Droid Serif", Georgia, serif;
  --ot-mono: Consolas, "Cascadia Mono", ui-monospace, Menlo, "Roboto Mono", "Droid Sans Mono", monospace;
}
/* family map: generated from site.css + custom.css (1.70.3), same selectors, same order */
body#page p { font-family: var(--ot-read); }
body#page .color1 { font-family: var(--ot-read); }
body#page .color2 { font-family: var(--ot-read); }
body#page .color3 { font-family: var(--ot-read); }
body#page .color4 { font-family: var(--ot-read); }
a.linkbluesh:link { font-family: var(--ot-ui); }
a.linkbluesh:visited { font-family: var(--ot-ui); }
a.linkbluesh:hover { font-family: var(--ot-ui); }
a.linkbluewsh:link { font-family: var(--ot-ui); }
a.linkbluewsh:visited { font-family: var(--ot-ui); }
a.linkbluewsh:hover { font-family: var(--ot-ui); }
a.linkblack:link { font-family: var(--ot-ui); }
a.linkblack:link { font-family: var(--ot-ui); }
a.linkblack:visited { font-family: var(--ot-ui); }
a.linkblack:hover { font-family: var(--ot-ui); }
#topmenu { font-family: var(--ot-nav); }
#menu { font-family: var(--ot-nav); }
#left { font-family: var(--ot-read); }
.arial_red { font-family: var(--ot-nav); }
.arial_black { font-family: var(--ot-nav); }
.arial_blue { font-family: var(--ot-nav); }
.arial_green { font-family: var(--ot-nav); }
.arial_gray1 { font-family: var(--ot-nav); }
.arial_gray2 { font-family: var(--ot-nav); }
.geo_red { font-family: var(--ot-read); }
.geo_black { font-family: var(--ot-read); }
.geo_blue { font-family: var(--ot-read); }
.geo_green { font-family: var(--ot-read); }
.geo_gray1 { font-family: var(--ot-read); }
.geo_gray2 { font-family: var(--ot-read); }
.table_text_small { font-family: var(--ot-read); }
.table_text { font-family: var(--ot-nav); }
.shadowtext { font-family: var(--ot-ui); }
.stickytooltip .stickystatus { font-family: var(--ot-nav); }
blockquote div { font-family: var(--ot-read); }
em.box, em.file, em.directory { font-family: var(--ot-mono); }
h1, h2, h3, h4, h5, h6 { font-family: var(--ot-ui); }
h4 { font-family: var(--ot-read); }
h5 { font-family: var(--ot-nav); }
h6 { font-family: var(--ot-read); }
.contentheading, .componentheading { font-family: var(--ot-nav); }
body#page .danke h1 { font-family: var(--ot-ui); }
body#page .danke p.fuehrung { font-family: var(--ot-read); }
body#page .danke p { font-family: var(--ot-read); }
.danke .aktion .marke { font-family: var(--ot-ui); }
body#page .danke .aktion h2 { font-family: var(--ot-ui); }
.danke .aktion .code span { font-family: var(--ot-mono); }
body#page .danke .aktion a.knopf { font-family: var(--ot-ui); }
.danke .pruef { font-family: var(--ot-ui); }
.danke .pruef .wert { font-family: var(--ot-mono); }
body#page .danke .pruef p.befehl { font-family: var(--ot-ui); }
.danke .pruef .befehl code { font-family: var(--ot-mono); }
.danke .pruef .kopie { font-family: var(--ot-ui); }
.danke .hilfe { font-family: var(--ot-read); }
.dl-sub { font-family: var(--ot-ui) !important; }
.dlb-card { font-family: var(--ot-ui); }
.dl-h3 { font-family: var(--ot-ui); }
#article .bb, #article .bb-post { font-family: var(--ot-ui); }
#article a.bb-btn { font-family: var(--ot-ui); }
#article .danke .bb, #article .bb-post, #article .bb-post a.bb-btn, #article .bb-post a.bb-get { font-family: var(--ot-ui); }
body#page .danke .bb-danke p.bb-h { font-family: var(--ot-ui); }
#article .bb-adds li { font-family: var(--ot-read); }
#article .bb-post a.bb-get { font-family: var(--ot-ui); }
body#page #article p.bb-lh { font-family: var(--ot-ui); }
body#page #article .bb-pay p { font-family: var(--ot-ui); }
body#page #article .bb-corp h2 { font-family: var(--ot-ui); }
body#page h1.blogtitel { font-family: var(--ot-ui); }
body#page .blogaufmacher h2 { font-family: var(--ot-ui); }
body#page .blogaufmacher p { font-family: var(--ot-read); }
body#page .bloglist .blogitem h2 { font-family: var(--ot-ui); }
body#page .bloglist .blogitem p { font-family: var(--ot-read); }
.bloglist .jahr, .jahroben { font-family: var(--ot-ui); }
body#page p.blogarchive { font-family: var(--ot-ui); }
body#page p.blogempty { font-family: var(--ot-read); }
body#page .blogpost h1, .blogpost .titel { font-family: var(--ot-ui); }
.blogpost .datum, .bloglist .blogdate, .blogaufmacher .blogdate, .blogpost .karte .datum { font-family: var(--ot-ui); }
body#page .blogpost p { font-family: var(--ot-read); }
body#page .blogpost h2 { font-family: var(--ot-ui); }
.blogpost ul.neu li { font-family: var(--ot-read); }
.blogpost .bilder figcaption { font-family: var(--ot-ui); }
body#page .blogpost .schiene a.knopf { font-family: var(--ot-ui); }
.blogpost .schiene .meta { font-family: var(--ot-ui); }
body#page .blogpost .weitere h3 { font-family: var(--ot-ui); }
.blogpost .karte .titel { font-family: var(--ot-ui); }
body#page .blogpost p.zurueck { font-family: var(--ot-ui); }
body#page { font-family: var(--ot-read); }
body#page p, #left, blockquote div, h4, h6 { font-family: var(--ot-read); }
#article :is(ul, ol):not(.pagefind-ui *) { font-family: var(--ot-read); }
#article td:has(blockquote) { font-family: var(--ot-read); }
#article b[style*="130%"] { font-family: var(--ot-ui); }
#article .download { font-family: var(--ot-ui); }
#article .download a.linkbluesh { font-family: var(--ot-ui); }
#article table:has(> tbody > tr > td > .download) > tbody > tr > td:nth-child(2) center { font-family: var(--ot-ui); }
.smtree { font-family: var(--ot-read); }
.smtree > ul > li > a, .smtree > ul > li > span { font-family: var(--ot-ui); }
.smtree details > summary { font-family: var(--ot-ui); }
/* px sizes: generated, old -> new by the concept table */
body { font-size: 15px; }
body.font-small { font-size: 13px; }
body.font-medium { font-size: 15px; }
body.font-large { font-size: 16px; }
#topmenu { font-size: 14px; }
.stickytooltip .stickystatus { font-size: 12px; }
#system-debug div { font-size: 12px; }
.button2-left a, .button2-right a, .button2-left span, .button2-right span { font-size: 12px; }
body#page .danke h1 { font-size: 27px; }
body#page .danke p.fuehrung { font-size: 18px; }
body#page .danke p { font-size: 16px; }
.danke .aktion .marke { font-size: 12px; }
body#page .danke .aktion h2 { font-size: 22px; }
.danke .aktion .code span { font-size: 18px; }
body#page .danke .aktion a.knopf { font-size: 15px; }
.danke .pruef { font-size: 13px; }
.danke .pruef .wert { font-size: 14px; }
body#page .danke .pruef p.befehl { font-size: 13px; }
.danke .pruef .befehl code { font-size: 13px; }
.danke .pruef .kopie { font-size: 13px; }
.danke .hilfe { font-size: 16px; }
.dl-sub { font-size: 13px; }
.dlb-t { font-size: 18px; }
.dlb-n { font-size: 14px; }
.dlb-n b { font-size: 14px; }
.dlb-n small { font-size: 14px; }
.dlb-b small { font-size: 13px; }
a.dlb-btn { font-size: 13px; }
.dlb-o .dlb-n { font-size: 13px; }
.dlb-o .dlb-n b { font-size: 13px; }
.dlb-w { font-size: 13px; }
.dlb-w small { font-size: 13px; }
.dlb-x { font-size: 13px; }
.dl-h3 { font-size: 21px; }
#article .bb, #article .bb-post { font-size: 13px; }
#article .bb-n b { font-size: 14px; }
#article .bb-p { font-size: 14px; }
#article .bb-n small { font-size: 13px; }
#article a.bb-btn { font-size: 13px; }
body#page .danke .bb-danke p.bb-h { font-size: 16px; }
#article .bb-adds li { font-size: 16px; }
#article .bb-thanks .bb-n b, #article .bb-thanks .bb-p { font-size: 15px; }
#article .bb-post .bb-n b { font-size: 16px; }
#article .bb-post .bb-n small { font-size: 14px; }
#article .bb-post .bb-act small { font-size: 13px; }
#article .bb-post a.bb-get { font-size: 13px; }
#article .bb-row .bb-n b { font-size: 15px; }
#article .bb-row .bb-p { font-size: 15px; }
body#page #article p.bb-lh { font-size: 21px; }
body#page #article .bb-pay p { font-size: 13px; }
body#page #article .bb-corp h2 { font-size: 13px; }
body#page h1.blogtitel { font-size: 36px; }
body#page .blogaufmacher h2 { font-size: 29px; }
body#page .blogaufmacher p { font-size: 16px; }
body#page .bloglist .blogitem h2 { font-size: 18px; }
body#page .bloglist .blogitem p { font-size: 16px; }
.bloglist .jahr, .jahroben { font-size: 12px; }
body#page p.blogarchive { font-size: 13px; }
body#page .blogpost h1, .blogpost .titel { font-size: 32px; }
.blogpost .datum, .bloglist .blogdate, .blogaufmacher .blogdate, .blogpost .karte .datum { font-size: 12px; }
body#page .blogpost p { font-size: 16px; }
body#page .blogpost h2 { font-size: 21px; }
.blogpost ul.neu li { font-size: 16px; }
.blogpost .bilder figcaption { font-size: 13px; }
body#page .blogpost .schiene a.knopf { font-size: 16px; }
body#page .blogpost .schiene a.knopf.lang { font-size: 14px; }
body#page .blogpost .schiene a.knopf.sehrlang { font-size: 13px; }
.blogpost .schiene .meta { font-size: 12px; }
body#page .blogpost .weitere h3 { font-size: 12px; }
.blogpost .karte .titel { font-size: 15px; }
body#page .blogpost p.zurueck { font-size: 14px; }
#article .download { font-size: 13px; }
#article .download a.linkbluesh { font-size: 14px; }
#article table:has(> tbody > tr > td > .download) > tbody > tr > td:nth-child(2) center { font-size: 12px; }
.smtree { font-size: 15px; }
.smtree > ul > li > a, .smtree > ul > li > span { font-size: 16px; }
.smtree details > summary { font-size: 14px; }

/* --- concept rules (after the map, so they win at equal specificity) --- */
/* reading text: base size of the page; h1/h2/% sizes of site.css scale with it.
   No font-size-adjust on reading text: phones show the page zoomed out, so
   Roboto / Noto Serif / San Francisco keep the full stated size. */
body#page, body.font-medium { font-size: 16px; line-height: 1.5; }
body#page { font-family: var(--ot-read); }
body#page p, #article :is(ul, ol):not(.pagefind-ui *), #article td, #article th { font-family: var(--ot-read); }
#article td, #article th { line-height: 1.5; }
/* justified reading text: hyphenation against wide word gaps (every page
   has lang="en|de|fr|es" on <html>) */
body#page p, #article li, #article td { hyphens: auto; -webkit-hyphens: auto; }
/* testimonials: own family, same size as the body, author lines included */
body#page blockquote, body#page blockquote div, #article td:has(blockquote) { font-family: var(--ot-quote); font-size: 16px; }
/* headings, box and section titles */
body#page h1, body#page h2, body#page h3, .contentheading, #article h1, #article h2,
#article p.bb-lh, body#page #article p.bb-lh, h2.dl-h3, .dl-h3, h2.dlb-t, .dlb-t, body#page .danke h1, body#page .danke .aktion h2 {
  font-family: var(--ot-head); font-weight: 600; letter-spacing: -0.01em; hyphens: manual; }
body#page #article h1, body#page .contentheading { font-size: 28px; line-height: 1.2; }
body#page #article h2 { font-size: 21px; line-height: 1.3; }
/* left menu: entries and group labels in the same face, labels regular
   weight, no tracking - as calm as today */
#left, #left div.moduletable_menu li a, #left div.moduletable_menu li a span {
  font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; font-size: 13.5px; font-size-adjust: .5; }
#left div[style*="text-align"], #left a.ot-lefthead { font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0; font-size-adjust: .5; }
/* top tabs and top links */
div#menu li a, div#menu li a span, #menu span { font-family: var(--ot-nav); font-size: 16px; font-weight: 600; letter-spacing: 0; }
#topmenu, #topmenu a, #topmenu span { font-family: var(--ot-nav); font-size: 13px; }
/* follow pill: social.css keeps its fixed 132px and 11px bold; only the
   family changes (text measured to fit in en/de/fr/es with the real logo) */
html body #twitter a.ot-x, html body #twitter a.ot-x * { font-family: var(--ot-ui); letter-spacing: 0; }
/* small UI text: Segoe is narrower than Verdana, so the sub lines that read
   as text get 14px (today Verdana 12) */
#article div.download b, #article div.download > div b { font-size: 14px; font-weight: 400; }
#article .bb-n small, #article .bb-post .bb-n small { font-size: 14px; }
.dl-sub { font-size: 14px !important; }
/* product names in buy rows and boxes: bold, 15px in the buy list */
#article .bb-n b, #article .bb-p { font-weight: 700; }
#article .bb-row .bb-n b, #article .bb-row .bb-p { font-size: 15px; }
/* "... details" links under the product texts: fixed size, one line;
   inside reading text they take the paragraph's font and size */
body#page a.linkbluesh { font-size: 13px; white-space: nowrap; }
body#page p a.linkbluesh, #article li a.linkbluesh { font: inherit; white-space: normal; }
/* UI sizes (as B): buttons 14, download rows 14, mirror link 13 regular,
   payment note 14, product names 16 */
#article a.bb-btn, #article a.bb-get, a.dlb-btn, body#page .danke .aktion a.knopf { font-size: 14px; }
#article .dlb-n, #article .dlb-n b, #article .dlb-n small, #article .dlb-o .dlb-n, #article .dlb-o .dlb-n b, #article .dlb-w, #article .dlb-w small { font-size: 14px; }
#article .dlb-b small { font-size: 13px; }
#article a.dlb-ml { font-size: 13px; font-weight: 400; }
body#page #article .bb-pay p, body#page #article .bb-corp h2 { font-size: 14px; }
#article .bb-row .bb-n b, #article .bb-row .bb-p, #article .bb-dl .bb-n b, #article .bb-dl .bb-p { font-size: 16px; }
/* S2-1 (Franklin Gothic Medium sizes, left menu only): entries 14px, group labels 15px.
   Append AFTER A2-r3.css. Entry line-height pinned to the 25px box (as site.css) so centring
   uses half-leading only; no font-specific offsets. */
#left, #left div.moduletable_menu li a, #left div.moduletable_menu li a span {
  font-family: "Franklin Gothic Medium", "Franklin Gothic", -apple-system, BlinkMacSystemFont, Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; font-weight: 400; letter-spacing: 0; font-size-adjust: none; }
#left div.moduletable_menu li a { line-height: 25px; }
#left div[style*="text-align"], #left a.ot-lefthead {
  font-family: "Franklin Gothic Medium", "Franklin Gothic", -apple-system, BlinkMacSystemFont, Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; font-weight: 400; letter-spacing: 0; font-size-adjust: none; }
/* --- OT-FONTS end --- */