@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;
}

/* Ticket 14036 — die 95 % sind das AUSSENMASS. Ohne border-box kamen die
   2x20px Polster obendrauf: bei 390px Fensterbreite 370,5 + 40 = 410,5px, die
   Seite liess sich auf jedem Handy 21px seitlich schieben. Ab 601px bleibt es
   bei content-box (80 % / max 800px + Polster = 840px), darauf rechnet der
   Kira-Satz am Dateiende. Die Tabellen dazu stehen unter "Tiered pricing". */
@media (max-width: 600px) {
  .container-content {
    width: 95%;
    box-sizing: border-box;
  }
}

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;
}

/* Ticket 14251 — das Ziel von "Uebersicht" (#pricing) steht als erstes
   Element der Inhaltsspalte vor dem h1. Hoehe 0, damit die Seite aussieht
   wie vorher: der Abstand ueber dem h1 kommt aus dem Polster der Spalte. */
.container-content > .section-spacer:first-child {
  height: 0;
}

/* Ticket 14084 — auf dem Handy steht der Kopf NICHT fest, er rollt mit weg.
   Die Sprungmarken brechen dort in bis zu fuenf Reihen um (320-360px; in der
   Ersatzschrift bei 300px sieben), der feste 200px-Kopf hat Platz fuer zwei:
   ab der dritten Reihe waren die Knoepfe abgeschnitten und nicht antippbar
   (bei 390px 69 von 75 Seiten). Fest halten liesse sich ein mitwachsender
   Kopf nicht — Inhaltsversatz und scroll-margin muessten seine Hoehe kennen,
   und die ist je Sprache, Breite und Schrift eine andere; fuenf Reihen fest
   waeren ausserdem 300px eines 667px-Schirms. Im Fluss folgt die
   Inhaltsspalte dem Kopf von selbst (top 0 statt 195px), und die Sprungziele
   brauchen keinen Vorhalt. margin-top statt top bei den Sprungmarken: ein
   relatives top verschiebt nur das Bild, nicht den Fluss — der Kopf endete
   sonst 50px unter dem letzten Knopf. Ab 601px bleibt der feste Kopf: dort
   sind es hoechstens zwei Reihen (gemessen ueber alle 75 Seiten bis 1320px,
   in Seiten- und Ersatzschrift).
   Das Logo ist bei 200px Hoehe 355,6px breit, unter 356px also breiter als
   die Spalte; text-align haengt den Ueberstand rechts an (bei 320px 17,8px
   aus der Mitte), flex verteilt ihn auf beide Seiten. overflow statt nur
   overflow-y: neben einem hidden wird visible zu auto, der Ueberstand liess
   sich sonst seitlich wischen.
   Ticket 14252 — dasselbe in niedrigen Fenstern: ein quer gehaltenes Handy
   ist breiter als 600px (844x390, 667x375) und hatte den festen Kopf, der
   201px davon belegte — dem Text blieben 189 bzw. 174px. Unter 501px Hoehe
   rollt der Kopf deshalb ebenfalls mit; darueber bleiben dem Text unter dem
   festen Kopf mindestens 300px. Tablets quer (768px und hoeher) und
   Laptop-Fenster behalten den festen Kopf.
   Waechter: stuff/test_preisseiten_mobil_breite.js, Teil K. */
@media (max-width: 600px), (max-height: 500px) {
  .container-top {
    position: relative;
    height: auto;
  }
  .container-logo {
    display: flex;
    justify-content: center;
    overflow: hidden;
  }
  .pricing-nav {
    top: 0;
    margin-top: -50px;
  }
  .container-content {
    top: 0;
  }
  .section-spacer {
    scroll-margin-top: 0;
  }
}

/* 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;
}

/* Ticket 14036 — Tabellen auf dem Handy. Die drei Rabatt-Tabellen brauchen
   nebeneinander mindestens 389px (103 + 103 + 111 + Abstaende + Rand) und
   standen damit auf jedem Handy ueber den rechten Rand; enger gesetzt passen
   sie ab 360px in eine Zeile, darunter brechen sie um statt ueberzustehen.
   Die engeren Zellen braucht die laengste Kopfzeile aller Sprachen
   (et: "Krediidipakett | Krediidid | Hind (koos käibemaksuga)", 333px am
   Stueck). Gemessen ueber alle 75 Seiten von 300 bis 600px: kein Querlauf;
   unter 300px greift die min-width der Inhaltsspalte. */
@media (max-width: 600px) {
  td, th {
    padding: 5px 6px;
  }
  .table-container {
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
  }
  .discount-table td {
    padding: 3px 4px;
  }
}

@media (max-width: 359px) {
  table {
    margin-left: 0;
    font-size: 14px;
  }
  td, th {
    padding: 4px;
  }
}

/* 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; }
}