@font-face {
  font-family: roboto;
  src: url("https://doc.j.show/roboto.woff2") format("woff2"),
       url("https://doc.j.show/roboto.woff") format("woff"),
       url("https://doc.j.show/roboto.ttf") format("truetype");
}
@font-face {
  font-family: "Roobert";
  src: url("https://doc.j.show/Roobert-Light.woff2") format("woff2"),
       url("https://doc.j.show/Roobert-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("https://doc.j.show/Roobert-Light.woff2") format("woff2"),
       url("https://doc.j.show/Roobert-Light.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

a:link    { color: white; text-decoration: none; border: none; cursor: pointer; }
a:visited { color: white; text-decoration: none; border: none; cursor: pointer; }
a:hover   { color: #ccc;  text-decoration: none; border: none; cursor: pointer; }
a:active  { color: white; text-decoration: none; border: none; cursor: pointer; }
a:focus   { color: white; text-decoration: none; border: none; cursor: pointer; }

.textlink {
  text-decoration: underline;
}

body {
  background-color: black;
  text-align: center;
  margin: 0;
  padding: 0;
  color: white;
  font-family: roboto, Helvetica, Arial, sans-serif;
}

.container-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  z-index: 100;
  background-color: black;
  border-bottom: 1px solid #333;
  overflow: hidden;
}

.container-logo {
  position: relative;
  top: -30px;
  margin: auto;
  min-width: 300px;
  max-width: 800px;
  height: 170px;
  overflow-y: hidden;
  background-color: black;
  text-align: center;
}

.logo {
  height: 200px;
}

.container-content {
  position: relative;
  top: 195px;
  width: 80%;
  min-width: 300px;
  max-width: 800px;
  margin: auto;
  padding-top: 30px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 60px;
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
}

@media (max-width: 600px) {
  .container-content {
    width: 95%;
  }
}

h1 {
  padding: 20px 20px 10px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-family: "Roobert", roboto, Helvetica, Arial, sans-serif;
}

h2 {
  padding: 30px 20px 10px;
  font-size: 18px;
  font-weight: 500;
  font-family: "Roobert", roboto, Helvetica, Arial, sans-serif;
}

p, li {
  padding-left: 20px;
  padding-right: 20px;
}

ol {
  padding-left: 40px;
  padding-right: 20px;
}

p.center {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

/* Anchor navigation — lives inside .container-top (fixed header) */
.pricing-nav {
  position: relative;
  top: -50px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  justify-content: center;
  padding: 14px 20px 12px;
  margin: 0 auto;
  max-width: 800px;
  font-size: 14px;
}

.pricing-nav a {
  white-space: nowrap;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 3px 10px;
  opacity: 0.85;
}

.pricing-nav a:hover {
  border-color: #888;
  opacity: 1;
  color: white;
}

/* Section anchors */
.section-spacer {
  height: 20px;
  scroll-margin-top: 210px;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 10px 20px;
  font-size: 15px;
}

td, th {
  padding: 5px 10px;
  text-align: left;
  border-bottom: 1px solid #222;
}

/* Tiered pricing table layout */
.table-container {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 20px;
}

.discount-table {
  flex: 1;
}

.discount-table table {
  margin: 0;
}

.discount-table td {
  text-align: center;
  border: 1px solid #222;
  padding: 3px 8px;
}

/* Callout box */
.innen {
  background: #111;
  border-left: 3px solid #444;
  border-radius: 4px;
  margin: 10px 20px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.6;
}

/* Indented list items */
li.einzug {
  padding-left: 40px;
  list-style: none;
}

/* Switcher row at bottom */
.pricing-footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid #222;
  font-size: 14px;
  opacity: 0.7;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.pricing-footer select {
  border: none;
  border-bottom: 1px solid grey;
  background: transparent;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
}

.lang-switcher {
  text-align: right;
  padding-right: 20px;
  padding-bottom: 10px;
}

/* hl tag (UI element highlight) */
hl {
  font-family: monospace;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 13px;
}

/* ===========================================================================
   Ticket 1217 — Kira haengt an der Inhaltsspalte, nicht am Bildschirmrand.

   Gleiche Sache wie auf der Landingpage, nur enger: .container-content ist hier
   width:80% / max 800px + 2x20px Polster (content-box, also 840px Aussenmass)
   und steht mittig. Auf einem 3440er Schirm endet die Spalte bei x=2140, der
   Knopf sass bei x=3416 — knapp 1300px daneben und damit aus dem Blick.

   Nur die Preisseiten laden diese Datei; die Handbuchseiten haben ihren eigenen
   Satz am Ende von style10.css. Deshalb steht die Regel hier und nicht in
   kira11.js, das beide Seitenarten bedient.

   Abstand rechter Rand -> rechte Spaltenkante = max(10% - 20px, 50% - 420px).
   Davon abgezogen: Knopf 48px (36px breit, 12px Luft neben der Spalte), Punkt
   60px (bleibt 12px rechts vom Knopf), Fenster 0 (Kante buendig).

   ⚠ ERST AB 2400px (04.08.2026, Ticket 1233). Die erste Fassung schaltete ab
   900px um, damit wanderte der Knopf schon auf jedem Laptop nach innen — auf
   einem 15- oder 17-Zoll-Schirm (1440 bis 1920px) stand er dann mitten im Bild
   statt in der Ecke, wo ihn jeder sucht. Er darf sich erst loesen, wenn das
   Fenster deutlich mehr als doppelt so breit ist wie die Spalte. Die Schwelle
   stammt vom 1200px-Rahmen der Startseite und ist hier bewusst dieselbe statt
   der rechnerischen 2 x 840px: Kira springt auf allen Web-Einstiegen (j.show,
   install.j.show, Handbuch, Preisseiten) zur selben Fensterbreite um.
   Darunter greift wieder der Satz aus kira11.js, also 24px / 12px / 0 in der
   Ecke. Die max()-Untergrenzen koennen ab 2400px nicht mehr greifen, sie
   bleiben als Sicherung stehen, falls die Schwelle je gesenkt wird.

   Prozent statt vw: an einem fixed-Element rechnen Prozente gegen den Viewport
   OHNE Scrollleiste, 100vw wuerde sie mitzaehlen. Die 10%-Terme bleiben stehen,
   obwohl sie ab 2400px nie gewinnen — sie gehoeren zur Formel und wuerden bei
   einer niedrigeren Schwelle sofort wieder gebraucht.

   Der body-Vorsatz ist noetig, nicht Zierde: kira11.js haengt seinen Stilblock
   zur Laufzeit an <head> — also NACH dieser Datei — und setzt right dort mit
   !important auf 24px. Bei gleicher Spezifitaet (0,1,0) gewaenne der spaetere
   Block. "body .kira-float-btn" ist (0,1,1) und schlaegt ihn unabhaengig von
   der Reihenfolge.
   =========================================================================== */
@media (min-width: 2400px) {
  body .kira-float-btn   { right: max(24px, calc(10% - 68px), calc(50% - 468px)) !important; }
  body .kira-pending-dot { right: max(12px, calc(10% - 80px), calc(50% - 480px)) !important; }
  body .kira-overlay     { right: max(0px,  calc(10% - 20px), calc(50% - 420px)) !important; }
}