@font-face {
    font-family: roboto;
    src: url("roboto.woff2") format("woff2"),
         url("roboto.woff") format("woff"),
         url("roboto.ttf") format("truetype");
  }
@font-face {
    font-family: "Roobert";
    src: url("Roobert-Light.woff2") format("woff2"),
         url("Roobert-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
@font-face {
    font-family: "Roobert";
    src: url("Roobert-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  
table {
    border-collapse:collapse;
}
.einzug{
  margin-left: 20px;
}
td {
    padding: 10px;
}
  .info{
    top:0px!important;
    padding: 10px;
    margin: 50px;
    border-radius: 3px;
  }
  
  .js-icon-edit{
    height:18px;
    margin-right:-2px;
    margin-left:-1px;
  }
  .js-icon-add{
    height:15px;
  }
  .js-icon-upload{
    height:18px;
  }

  .js-icon-jshow{
    height: 50px;
    margin: 20px;
  }
  
  p {
    margin-top:30px;
  }
  
  .js-icon-edit, 
  .js-icon-add, 
  .js-icon-upload, 
  .js-icon-bed, 
  .js-icon-arrow-up, 
  .js-icon-arrow-down, 
  .js-icon-bed,
  .js-icon-arrow-up,
  .js-icon-arrow-down,
  .js-icon-jshow,
  .js-icon-jshow-claim,
  .js-icon-alert,
  .js-icon-circle,
  .js-icon-check-1,
  .js-icon-check-2,
  .js-icon-check-3,
  .js-icon-check-4,
  .js-icon-checkbox,
  .js-icon-checkbox-dot,
  .js-icon-checkbox-triple,
  .js-icon-checkbox-dash,
  .js-icon-checkbox-smalldot,
  .js-icon-arrow-left,
  .js-icon-arrow-right,
  .js-icon-chevron-up,
  .js-icon-chevron-left,
  .js-icon-arrow-tri-right,
  .js-icon-vorige,
  .js-icon-naechste,
  .js-icon-pdf,
  .js-icon-pdf-multi,
  .js-icon-share,
  .js-icon-swap,
  .js-icon-maps,
  .js-icon-attachment,
  .js-icon-invisible,
  .js-icon-star,
  .js-icon-minus,
  .js-icon-checked,
  .js-icon-vollbild,
  .js-icon-vollbild_min,
  .js-icon-undo,
  .js-icon-paperplane,
  .js-icon-hamburger,
  .js-icon-kreis,
  .js-icon-kreis-voll,
  .js-icon-quadrat-voll,
  .js-icon-close,
  .js-icon-chev-left,
  .js-icon-chev-right,
  .js-icon-einklappen,
  .js-icon-ausklappen,
  .js-icon-arrow-topleft,
  .js-icon-arrow-bottomright,
  .js-icon-settings,
  .js-icon-email,
  .js-icon-pdf2,
  .js-icon-lock,
  .js-icon-lock-open,
  .js-icon-aaa,
  .js-icon-search,
  .js-icon-google,
  .js-icon-apple,
  .js-icon-dragdrop,
  .js-icon-download,
  .js-icon-instagram,
  .js-icon-reload,
  .js-icon-pin,
  .js-icon-pin-off,
  .js-icon-birthday {
    position:relative;
    top:3px;
    height:16px;
  }

  .js-icon-dot-green,
  .js-icon-dot-orange,
  .js-icon-dot-yellow,
  .js-icon-dot-blue{
    position:relative;
    top:0px;
    height:13px;
    padding-right:5px;
  }


  .js-box-yellow,
  .js-box-pink,
  .js-box-orange,
  .js-box-red,
  .js-box-green,
  .js-box-confirmed,
  .js-box-cancelled {
    padding:3px;
    border-radius:2px;
    font-weight:bold;
  }
  .js-box-cancelled{
    text-decoration: line-through;
  }
  .js-bar-blue {
    border-left-width: 3px!important;
  }

  .js-icon-chevron-down {
    transform: rotate(180deg);
    position:relative;
    top:1px;
    height:16px;
  }
  
  body {
    font-family: roboto;
    line-height: 24px;
    text-align: center;
  }
  
  div {
    position: relative;
    top: -20px;
  }
  
  input[type=text] {
    margin-left: 20px;
    background: transparent;
    border: none;
    border-radius: 0px;
    font-size: 16px;
    font-family: roboto;
    width: 140px;
    padding: 5px;
    cursor: pointer;
  }
  
  input:focus {
    outline: none;
  }
  
  .button {
    background: transparent;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 20px;
    position: relative;
    left: 5px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 0.7;
  }
  
  .button:hover {
    opacity: 1;
  }
  
  nav {
    display: block;
    text-align: left;
    overflow-y: scroll;
    overflow-x: hidden;
    position: fixed;
    left: 0px;
    top: 0px;
    padding-left: 10px;
    height: 100%;
    width: 220px;
    z-index: 2;
  }
  
  a.nav-h {
    display: block;
    width: 100%;
    padding: 20px 5px 5px 5px;
  }
  
  a.nav-u {
    display: block;
  }
  a.nav-v {
    display: block;
  }
  
  
  h1, h2, h3 {
    font-family: "Roobert", roboto, Helvetica, Arial, sans-serif;
    letter-spacing: -0.01em;
    font-weight: 300;
  }
  h1 {
    font-size: 34px;
    line-height: 1.2;
  }

  h2 {
    padding-top: 30px;
    font-size: 26px;
    line-height: 1.25;
  }

  h3 {
    padding-top: 15px;
    font-size: 16px;
  }
  
  p, ul, li {
    font-size: 15px;
    line-height: 30px;
  }
  
  #logo {
    width: 180px;
    position: relative;
    left: 20px;
    padding: 20px 0 20px 0;
  }
  
  logo {
    text-align: left;
    position: fixed;
    width: 230px;
    left: 0px;
    top: 0px;
    z-index: 3;
  }

  hl {
    padding: 2px 5px;
    border-radius: 2px;
    white-space: nowrap;
  }
  
  .icon-suche {
    position: relative;
    top: 8px;
    width: 24px;
  }
  
  /* Mobile Styles */
  @media only screen and (max-width: 600px) {
  
    .info{
      padding: 10px;
      margin: 20px;
      margin-top:40px;
      margin-bottom:40px;
    }
  
    inhalt {
      display: block;
      width: calc(100% - 50px);
      overflow-x:auto;
      text-align: left;
      padding: 18px 15px 25px 15px;
      margin: 15px;
      border-radius: 2px;
    }
  
    #logobox {
      display: none;
    }

    nav {
      display: none;
    }
  
    content {
      display: block;
      width: 100%;
      position: absolute;
      left: 0px;
    }
  
    nav-open {
      display: block;
      position: fixed;
      left: 0px;
      top: 5px;
      padding: 5px;
      cursor: pointer;
      z-index: 2;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  
    .hamburger {
      width: 30px;
    }
  
    nav-close {
      display: none;
      position: fixed;
      left: 240px;
      top: 23px;
      padding: 8px 12px;
      font-size: 24px;
      cursor: pointer;
      border-radius: 50px;
      z-index: 2;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  }
  
  /* Desktop Styles */
  @media only screen and (min-width: 601px) {
  
    .info{
      padding: 20px;
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 40px;
      margin-bottom: 40px;
    }
  
    /* Ticket 1233, 04.08.2026 — Lesebreite begrenzt.

       Bis hierher wuchs die Box mit dem Fenster: content ist 100% - 220px
       (Navigation) breit, inhalt davon nochmal 100% - 90px. Auf einem 2560er
       Schirm standen damit rund 2250px Text in einer Zeile, also gut 300
       Zeichen — unlesbar, und der Kira-Knopf klebte 2000px daneben in der Ecke.

       max-width zaehlt gegen den INHALT (content-box, kein globales
       border-box in dieser Datei): 1160 + 2x20 Innenabstand ergibt aussen
       1200px, dasselbe Mass wie der Rahmen der Startseite (style.css,
       body.landing .container-content).

       margin: 25px auto statt 25px — unterhalb der Grenze aendert das nichts:
       Breite (100% - 90px) plus Innenabstand (2x20px) lassen genau 50px
       uebrig, die auto zu zweimal 25px teilt, also exakt wie bisher. Oberhalb
       zentriert es die Box zwischen Navigation und rechtem Rand, statt sie
       links kleben zu lassen. Die Grenze greift ab rund 1470px Fensterbreite. */
    inhalt {
      display: block;
      width: calc(100% - 90px);
      max-width: 1160px;
      overflow-x:auto;
      text-align: left;
      padding: 18px 20px 25px 20px;
      margin: 25px auto;
      border-radius: 2px;
    }

    content {
      display: block;
      width: calc(100% - 220px);
      position: absolute;
      left: 220px;
    }
  
    nav-open,
    nav-close {
      display: none;
    }
  }
  
  /* Dark Mode */
  @media (prefers-color-scheme: dark) {
  
    td{
      border: 1px solid #444;
    }
    
    .innen {
      border-left: 1px solid #fff6d7a4;
    }
    .innen-d {
      border-left: 1px solid #867e6454;
    }
    .info{
      border:1px solid #fff6d7;
      background-color: #2e2c2bab;
      color:rgb(255, 255, 255);
    }
  
  .js-box-orange {
    background-color: #ff7f00;
  }

    .js-box-yellow {
      background-color: #c19e00;
    }

    .js-box-pink {
      background-color: #A45EE5;
    }

    .js-box-red {
      background-color: #9a242b;
    }

    .js-box-green {
      background-color: #1a5e1d;
    }
  
    .js-icon-edit, 
    .js-icon-add, 
    .js-icon-upload, 
    .js-icon-bed, 
    .js-icon-arrow-up, 
    .js-icon-arrow-down, 
    .js-icon-bed,
    .js-icon-arrow-up,
    .js-icon-arrow-down,
    .js-icon-jshow,
    .js-icon-jshow-claim,
    .js-icon-alert,
    .js-icon-circle,
    .js-icon-check-1,
    .js-icon-check-2,
    .js-icon-check-3,
    .js-icon-check-4,
    .js-icon-checkbox,
    .js-icon-checkbox-dot,
    .js-icon-checkbox-triple,
    .js-icon-checkbox-dash,
    .js-icon-checkbox-smalldot,
    .js-icon-arrow-left,
    .js-icon-arrow-right,
    .js-icon-chevron-up,
    .js-icon-chevron-left,
    .js-icon-arrow-tri-right,
    .js-icon-vorige,
    .js-icon-naechste,
    .js-icon-pdf,
    .js-icon-pdf-multi,
    .js-icon-share,
    .js-icon-swap,
    .js-icon-maps,
    .js-icon-attachment,
    .js-icon-invisible,
    .js-icon-star,
    .js-icon-minus,
    .js-icon-checked,
    .js-icon-vollbild,
    .js-icon-vollbild_min,
    .js-icon-undo,
    .js-icon-paperplane,
    .js-icon-hamburger,
    .js-icon-kreis,
    .js-icon-kreis-voll,
    .js-icon-quadrat-voll,
    .js-icon-close,
    .js-icon-chev-left,
    .js-icon-chev-right,
    .js-icon-einklappen,
    .js-icon-ausklappen,
    .js-icon-arrow-topleft,
    .js-icon-arrow-bottomright,
    .js-icon-settings,
    .js-icon-email,
    .js-icon-pdf2,
    .js-icon-lock,
    .js-icon-lock-open,
    .js-icon-aaa,
    .js-icon-search,
    .js-icon-google,
    .js-icon-apple,
    .js-icon-dragdrop,
    .js-icon-download,
    .js-icon-instagram,
    .js-icon-reload,
    .js-icon-pin,
    .js-icon-pin-off,
    .js-icon-birthday,
    .js-icon-chevron-down {
      fill: white;
    }
    .js-icon-alert{
      fill: #F9423A;
    }
    .js-icon-check-1,
    .js-icon-dot-green {
      fill: #75cb5d;
    }
    .js-icon-check-2,
    .js-icon-dot-orange {
      fill: #D16002;
    }
    .js-icon-dot-yellow {
      fill: #E0B400;
    }
    
    .js-icon-check-3{
      fill: #dc4633;
    }
    .js-bar-blue {
     border-left-color: #00b1d2!important;
    }
    .js-icon-check-4,
    .js-icon-dot-blue {
      fill: #00b1d2;
    }
    body {
      background-color: #111111;
      color: white;
    }
  
    p, ul, li {
      color: #ddd;
    }
  
    p.red {
      color: #f9432a !important;
    }
  
    nav {
      background-color: #000000;
      border-right: 1px solid rgba(255, 255, 255, 0.2);
    }
  
    inhalt {
      background-color: #000000;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
  
    logo {
      background-color: rgba(0, 0, 0, 1);
    }
  
    ::selection {
      background: red;
      color: white;
    }
  
    ::-moz-selection {
      background: red;
      color: white;
    }
  
    /* Dark Mode Links */
    a:link,
    a:visited,
    a:active,
    a:focus {
      color: #fff;
      text-decoration: underline;
      text-decoration-style: dashed;
      border: none;
      cursor: pointer;
    }
  
    a:hover {
      color: #ccc;
      text-decoration: underline;
      text-decoration-style: solid;
      border: none;
      cursor: pointer;
    }
  
    /* Dark Mode Nav Links */
    a.nav-h:link,
    a.nav-h:visited,
    a.nav-h:active,
    a.nav-h:focus {
      padding-left: 5px;
      font-weight: bold;
      font-size: 16px;
      padding-top: 14px;
      padding-bottom:0px;
      text-transform: none;
      text-decoration: none;
      border: none;
      opacity: 1;
      color: #ccc;
    }
  
    a.nav-h:hover {
      padding-left: 5px;
      color: #fff;
    }
  
    a.nav-u:link,
    a.nav-u:visited,
    a.nav-u:active,
    a.nav-u:focus {
      padding-bottom: 8px;
      padding-top: 12px;
      padding-left: 10px;
      font-size: 15px;
      text-transform: none;
      text-decoration: none;
      border: none;
      opacity: 0.9;
      color: #ccc;
    }
  
    a.nav-u:hover {
      padding-left: 10px;
      color: #fff;
    }
  
  
    a.nav-v:link,
    a.nav-v:visited,
    a.nav-v:active,
    a.nav-v:focus {
      padding-bottom: 8px;
      padding-top: 2px;
      padding-left: 14px;
      font-size: 15px;
      font-style:italic;
      text-transform: none;
      text-decoration: none;
      border: none;
      opacity: 0.8;
      color: #ccc;
    }
  
    a.nav-v:hover {
      padding-left: 14px;
      color: #fff;
    }
  
  
    hl {
      background-color: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
  
    #logo {
      fill: #ffffff;
    }
  
    input[type=text] {
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      color: white;
    }
  
    input[type=text]:hover {
      border-bottom: 1px solid rgba(255, 255, 255, 1);
    }
  
    .hamburger {
      fill: white;
    }
  
    .icon-suche {
      fill: white;
    }
  }
  
  /* Light Mode */
  @media (prefers-color-scheme: light) {
    td{
      border: 1px solid #ddd;
    }
    .innen {
      border-left: 1px solid #62605d;
    }
    .innen-d {
      border-left: 1px solid #cacac8;
    }
  
    .info{
      border:1px solid #211f1a;
      background-color: rgba(246, 240, 240, 0.57) ;
      color:rgba(0, 0, 0, 1);
    }

    .js-box-orange {
      background-color: #ffa92e;
    }
  
      .js-box-yellow {
        background-color: #FFE600;
      }
  
      .js-box-pink {
        background-color: #E39FF6;
      }
  
      .js-box-red {
        background-color: #fc592b;
      }
  
      .js-box-green {
        background-color: #78be2f;
      }
    
  
    .js-icon-edit, 
    .js-icon-add, 
    .js-icon-upload, 
    .js-icon-bed, 
    .js-icon-arrow-up, 
    .js-icon-arrow-down, 
    .js-icon-bed,
    .js-icon-arrow-up,
    .js-icon-arrow-down,
    .js-icon-jshow,
    .js-icon-alert,
    .js-icon-circle,
    .js-icon-checkbox,
    .js-icon-checkbox-dot,
    .js-icon-checkbox-triple,
    .js-icon-checkbox-dash,
    .js-icon-checkbox-smalldot,
    .js-icon-arrow-left,
    .js-icon-arrow-right,
    .js-icon-chevron-up,
    .js-icon-chevron-left,
    .js-icon-arrow-tri-right,
    .js-icon-vorige,
    .js-icon-naechste,
    .js-icon-pdf,
    .js-icon-pdf-multi,
    .js-icon-share,
    .js-icon-swap,
    .js-icon-maps,
    .js-icon-attachment,
    .js-icon-invisible,
    .js-icon-star,
    .js-icon-minus,
    .js-icon-checked,
    .js-icon-vollbild,
    .js-icon-vollbild_min,
    .js-icon-undo,
    .js-icon-paperplane,
    .js-icon-hamburger,
    .js-icon-kreis,
    .js-icon-kreis-voll,
    .js-icon-quadrat-voll,
    .js-icon-close,
    .js-icon-chev-left,
    .js-icon-chev-right,
    .js-icon-einklappen,
    .js-icon-ausklappen,
    .js-icon-arrow-topleft,
    .js-icon-arrow-bottomright,
    .js-icon-settings,
    .js-icon-email,
    .js-icon-pdf2,
    .js-icon-lock,
    .js-icon-lock-open,
    .js-icon-aaa,
    .js-icon-search,
    .js-icon-google,
    .js-icon-apple,
    .js-icon-dragdrop,
    .js-icon-download,
    .js-icon-instagram,
    .js-icon-reload,
    .js-icon-pin,
    .js-icon-pin-off,
    .js-icon-birthday,
    .js-icon-chevron-down {
      fill: black;
    }
    .js-icon-alert{
      fill: #dc4633;
    }
    .js-icon-check-1,
    .js-icon-dot-green{
      fill: #519548;
    }
    .js-icon-check-2,
    .js-icon-dot-orange{
      fill: #FF8400;
    }
    .js-icon-dot-yellow {
      fill: #E0B400;
    }
    
    .js-icon-check-3{
      fill: #dc4633;
    }

    .js-bar-blue {
      border-left-color: #0083c3!important;
     }

    .js-icon-check-4,
    .js-icon-dot-blue{
      fill: #0083c3;
    }
    body {
      background-color: #eeeeee;
      color: black;
    }
  
    p, ul, li {
      color: #444;
    }
  
    p.red {
      color: #dc4633 !important;
    }
  
    nav {
      background-color: #ffffff;
      border-right: 1px solid rgba(0, 0, 0, 0.2);
    }
  
    inhalt {
      background-color: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.2);
    }
  
    logo {
      background-color: rgba(255, 255, 255, 1);
    }
  
    ::selection {
      background: yellow;
      color: black;
    }
  
    ::-moz-selection {
      background: yellow;
      color: black;
    }
  
    /* Light Mode Links */
    a:link,
    a:visited,
    a:active,
    a:focus {
      color: #000;
      text-decoration: underline;
      text-decoration-style: dashed;
      border: none;
      cursor: pointer;
    }
  
    a:hover {
      color: #444;
      text-decoration: underline;
      text-decoration-style: solid;
      border: none;
      cursor: pointer;
    }
  
    /* Light Mode Nav Links */
    a.nav-h:link,
    a.nav-h:visited,
    a.nav-h:active,
    a.nav-h:focus {
      padding-left: 5px;
      font-weight: bold;
      font-size: 16px;
      text-transform: none;
      text-decoration: none;
      border: none;
      opacity: 1;
      color: #555;
    }
  
    a.nav-h:hover {
      padding-left: 5px;
      color: #000;
    }
  
    a.nav-u:link,
    a.nav-u:visited,
    a.nav-u:active,
    a.nav-u:focus {
      padding-bottom: 8px;
      padding-left: 10px;
      font-size: 15px;
      text-transform: none;
      text-decoration: none;
      border: none;
      opacity: 0.9;
      color: #555;
    }
  
    a.nav-u:hover {
      padding-left: 10px;
      color: #000;
    }
  
    a.nav-v:link,
    a.nav-v:visited,
    a.nav-v:active,
    a.nav-v:focus {
      padding-bottom: 8px;
      padding-left: 14px;
      font-size: 15px;
      font-style:italic;
      text-transform: none;
      text-decoration: none;
      border: none;
      opacity: 0.8;
      color: #555;
    }
  
    a.nav-v:hover {
      padding-left: 14px;
      color: #000;
    }
  
  
    hl {
      background-color: rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
  
    #logo {
      fill: #000000;
    }
  
    input[type=text] {
      border-bottom: 1px solid rgba(0, 0, 0, 0.5);
      color: black;
    }
  
    input[type=text]:hover {
      border-bottom: 1px solid rgba(0, 0, 0, 1);
    }
  
    .hamburger {
      fill: black;
    }
  
    .icon-suche {
      fill: black;
    }
  }
  
  .innen {
    opacity:0.9;
    box-sizing: border-box;
    padding-left: 10px;
    margin-left: 20px;
  }
  .innen-d {
    opacity:0.9;
    box-sizing: border-box;
    padding-left: 20px;
    margin-left: 40px;
    
  }
  .abstand {
    margin-top:40px;
  }

/* ============================================================================
   Volltextsuche — Treffer-Highlights + Counter-Zeile
   ============================================================================ */

  mark.jshow-mark {
    background-color: rgba(255, 220, 0, 0.55);
    color: inherit;
    padding: 1px 2px;
    border-radius: 2px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
  }

  mark.jshow-mark.current {
    background-color: rgba(255, 160, 0, 0.95);
    box-shadow: 0 0 0 2px rgba(255, 160, 0, 0.95);
    color: #000;
  }

  /* Suchfeld-Styling: klarer Rahmen statt nur Underline */
  input#suche {
    margin-left: 20px;
    padding: 8px 10px !important;
    border: 1px solid rgba(127, 127, 127, 0.4) !important;
    border-radius: 4px !important;
    width: calc(100% - 80px) !important;
    max-width: 160px;
    box-sizing: border-box;
    cursor: text !important;
  }

  input#suche:focus {
    border-color: rgba(255, 160, 0, 0.9) !important;
    outline: none;
  }

  /* Desktop-Suchpanel: zeigt Counter + Prev/Next/Close-Buttons */
  #suche-panel {
    display: none;
    position: relative;
    top: 0px;
    margin: 10px 20px 10px 20px;
    padding: 10px;
    font-family: roboto;
    font-size: 13px;
    line-height: 1.3;
    border-radius: 6px;
    border: 1px solid rgba(127, 127, 127, 0.25);
  }

  #suche-panel.visible {
    display: block;
  }

  #suche-panel #suche-counter {
    display: block;
    padding: 0 2px 8px 2px;
    font-weight: 500;
    position: relative;
    top: 45px;
  }

  #suche-panel.none #suche-counter {
    font-style: italic;
    opacity: 0.75;
    font-weight: 400;
  }

  #suche-panel-buttons {
    display: flex;
    gap: 6px;
  }

  #suche-panel-buttons button {
    flex: 1;
    border: 1px solid rgba(127, 127, 127, 0.4);
    background: transparent;
    border-radius: 4px;
    padding: 8px 0;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    color: inherit;
    line-height: 1;
    transition: background-color 0.12s ease, border-color 0.12s ease;
  }

  #suche-panel-buttons button:hover,
  #suche-panel-buttons button:focus {
    outline: none;
    border-color: rgba(255, 160, 0, 0.8);
  }

  #suche-panel-buttons button:active {
    transform: scale(0.97);
  }

  #suche-panel.none #suche-prev,
  #suche-panel.none #suche-next {
    opacity: 0.35;
    pointer-events: none;
  }

  /* Dark Mode Overrides */
  @media (prefers-color-scheme: dark) {
    mark.jshow-mark {
      background-color: rgba(255, 210, 0, 0.45);
      color: #fff;
    }
    mark.jshow-mark.current {
      background-color: rgba(255, 160, 0, 1);
      box-shadow: 0 0 0 2px rgba(255, 160, 0, 1);
      color: #000;
    }
    #suche-panel {
      background-color: rgba(255, 255, 255, 0.05);
      color: rgba(255, 255, 255, 0.9);
      border-color: rgba(255, 255, 255, 0.15);
    }
    #suche-panel-buttons button {
      border-color: rgba(255, 255, 255, 0.25);
      color: #fff;
    }
    #suche-panel-buttons button:hover,
    #suche-panel-buttons button:focus {
      background-color: rgba(255, 255, 255, 0.08);
    }
    input#suche {
      border-color: rgba(255, 255, 255, 0.3) !important;
    }
  }

  /* Light Mode Overrides */
  @media (prefers-color-scheme: light) {
    mark.jshow-mark {
      background-color: rgba(255, 220, 0, 0.7);
      color: #000;
    }
    mark.jshow-mark.current {
      background-color: rgba(255, 150, 0, 1);
      box-shadow: 0 0 0 2px rgba(255, 150, 0, 1);
      color: #000;
    }
    #suche-panel {
      background-color: rgba(0, 0, 0, 0.03);
      color: rgba(0, 0, 0, 0.85);
      border-color: rgba(0, 0, 0, 0.12);
    }
    #suche-panel-buttons button {
      border-color: rgba(0, 0, 0, 0.2);
      color: #000;
    }
    #suche-panel-buttons button:hover,
    #suche-panel-buttons button:focus {
      background-color: rgba(0, 0, 0, 0.05);
    }
    input#suche {
      border-color: rgba(0, 0, 0, 0.25) !important;
    }
  }

  /* Mobile Such-Toolbar (Counter + Prev/Next/Close), sticky oben am Viewport */
  #suche-mobile-bar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 8px 12px;
    align-items: center;
    gap: 8px;
    font-family: roboto;
    font-size: 14px;
    border-top: 1px solid rgba(127, 127, 127, 0.25);
    border-bottom: 1px solid rgba(127, 127, 127, 0.25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }

  #suche-mobile-bar.visible {
    display: flex;
  }

  #suche-mobile-counter {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #suche-mobile-bar.none #suche-mobile-counter {
    font-style: italic;
    opacity: 0.75;
  }

  #suche-mobile-bar button {
    border: 1px solid rgba(127, 127, 127, 0.35);
    background: transparent;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
    color: inherit;
    min-width: 38px;
    min-height: 38px;
    line-height: 1;
  }

  #suche-mobile-bar button:hover,
  #suche-mobile-bar button:focus {
    border-color: rgba(127, 127, 127, 0.7);
    outline: none;
  }

  #suche-mobile-bar button:active {
    transform: scale(0.96);
  }

  #suche-mobile-open .js-icon-search {
    width: 18px;
    height: 18px;
    display: block;
  }

  @media (prefers-color-scheme: dark) {
    #suche-mobile-bar {
      background-color: rgba(20, 20, 20, 0.96);
      color: #fff;
    }
    #suche-mobile-bar button {
      border-color: rgba(255, 255, 255, 0.35);
    }
    #suche-mobile-bar button:hover,
    #suche-mobile-bar button:focus {
      border-color: rgba(255, 255, 255, 0.7);
    }
  }

  @media (prefers-color-scheme: light) {
    #suche-mobile-bar {
      background-color: rgba(255, 255, 255, 0.96);
      color: #000;
    }
    #suche-mobile-bar button {
      border-color: rgba(0, 0, 0, 0.3);
    }
    #suche-mobile-bar button:hover,
    #suche-mobile-bar button:focus {
      border-color: rgba(0, 0, 0, 0.6);
    }
  }

  /* Auf Desktop bleibt die Mobile-Bar immer aus */
  @media only screen and (min-width: 601px) {
    #suche-mobile-bar,
    #suche-mobile-bar.visible {
      display: none !important;
    }
  }

  /* Auf Mobile bleibt das Desktop-Suchpanel immer aus */
  @media only screen and (max-width: 600px) {
    #suche-panel,
    #suche-panel.visible {
      display: none !important;
    }
  }

/* ============================================================================
   Sprachauswahl-Dropdown — rechts oben in der ersten inhalt-Box
   ============================================================================ */

  inhalt#documentation {
    position: relative;
  }

  #lang-select {
    position: absolute;
    top: 18px;
    right: 20px;
    padding: 5px 28px 5px 10px;
    font-family: roboto;
    font-size: 13px;
    border-radius: 4px;
    border: 1px solid rgba(127, 127, 127, 0.35);
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    z-index: 1;
  }

  #lang-select:focus {
    outline: none;
    border-color: rgba(255, 160, 0, 0.9);
  }

  /* Auf Mobile: kleiner, aber sichtbar */
  @media only screen and (max-width: 600px) {
    #lang-select {
      font-size: 12px;
      padding: 4px 24px 4px 8px;
      top: 12px;
      right: 12px;
    }
  }

  @media (prefers-color-scheme: dark) {
    #lang-select {
      color: rgba(255, 255, 255, 0.85);
      border-color: rgba(255, 255, 255, 0.25);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    #lang-select option {
      background-color: #1a1a1a;
      color: #fff;
    }
  }

  @media (prefers-color-scheme: light) {
    #lang-select {
      color: rgba(0, 0, 0, 0.8);
      border-color: rgba(0, 0, 0, 0.2);
    }
    #lang-select option {
      background-color: #fff;
      color: #000;
    }
  }

/* ===========================================================================
   Kira: Knopf, Punkt und Chatfenster haengen an der Lesebox
   Ticket 1233, 04.08.2026 (Nachzug zu 1217)
   ---------------------------------------------------------------------------
   kira.css klebt alle drei per position:fixed in die rechte untere
   Bildschirmecke. Bei Ticket 1217 blieb das Handbuch deshalb bewusst aussen
   vor: die Lesebox fuellte damals die volle Breite, der Knopf stand dort
   ohnehin buendig daneben. Seit die Box oben auf 1200px begrenzt ist, gilt
   das nicht mehr — auf einem 2560er Schirm endet der Text bei x=1880, der
   Knopf sass bei x=2536.

   Bezugsgroesse ist die rechte Kante der Box. Sie steht mittig im Bereich
   rechts der 220px breiten Navigation, ihre Kante liegt also
   max(25px, 50% - 710px) vom rechten Fensterrand entfernt (710 = 220/2 + 600).
   Davon abgezogen:
     Knopf   48px  -> 36px breit, steht mit 12px Luft neben der Box
     Punkt   60px  -> bleibt wie in kira.css 12px rechts neben dem Knopf
     Fenster  0px  -> rechte Kante buendig mit der Box

   ⚠ ERST AB 2400px, und das ist der Kern der Regel. 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 MEHR ALS DOPPELT so breit ist wie die Box:
   2 x 1200px. Darunter greift wieder der Satz aus kira11.js, also exakt das
   Bild von vorher (24px / 12px / 0 in der Ecke). Dieselbe Schwelle gilt auf
   j.show und install.j.show, damit Kira auf allen Web-Einstiegen zur selben
   Fensterbreite umspringt.
   Folge, bewusst in Kauf genommen: zwischen 1470px (ab da ist die Box
   begrenzt) und 2400px steht der Knopf in der Ecke und damit ein Stueck neben
   der Box — auf 1920px rund 190px. Das ist der Preis dafuer, dass sich auf
   normalen Schirmen nichts bewegt.
   Die max()-Untergrenzen (24px / 12px / 0) koennen ab 2400px nicht mehr
   greifen; sie bleiben als Sicherung stehen, falls die Schwelle je gesenkt
   wird — ohne sie liefe der Knopf dann aus dem Bild.

   ⚠ Der Vorsatz "body" ist Pflicht, nicht Zierde: kira11.js haengt seinen
   Stilblock zur LAUFZEIT an <head>, also nach dieser Datei, und setzt right
   dort ebenfalls mit !important. Bei gleicher Spezifitaet (0,1,0) gewaenne der
   spaetere Block. "body .kira-float-btn" ist (0,1,1) und schlaegt ihn
   reihenfolgeunabhaengig. Gleiche Begruendung wie in pricing-style2.css.

   Prozent statt vw mit Absicht: an einem fixed-Element rechnen Prozente gegen
   den Viewport OHNE Scrollleiste, 100vw wuerde sie mitzaehlen und alles um
   deren Breite nach rechts schieben.
   =========================================================================== */
@media (min-width: 2400px) {
  body .kira-float-btn   { right: max(24px, calc(50% - 758px)) !important; }
  body .kira-pending-dot { right: max(12px, calc(50% - 770px)) !important; }
  body .kira-overlay     { right: max(0px,  calc(50% - 710px)) !important; }
}