/* Basis */
html{ font-size: clamp(13px, 1.8vmin, 17px); }
body{ font-family: Arial, Helvetica, sans-serif; }

html, body {
  height: 100%;
  margin: 0;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

/* Kopfbereich bleibt oben kleben */
#topBar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  padding: 8px 8px 4px;
}

/* optional: Titel etwas stylen */
#tableTitle {
  margin: 0 0 6px 0;
  font-size: 1.2rem;
}

table.dataTable thead>tr>th div.dt-column-header span.dt-column-title { 
	text-align: center;
}


/* Bereich unterhalb der Topbar wird der Scrollcontainer */
#tableArea {
  flex: 1 1 auto;
  min-height: 0;  /* wichtig bei flex + overflow */
  display: flex;
}

/* dein bisheriger Wrapper wird zum eigentlichen Scrollbereich */
#tableScaleWrap{
  position: relative;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 8px;
}

/* Kopfzeile der Tabelle fixieren */
#Mediliste thead th {
  position: sticky;
  top: 0;             /* am oberen Rand des Scrollbereichs von #tableScaleWrap kleben */
  z-index: 20;        /* über den Tabellenzeilen */
  background: #fff;   /* damit keine Zeilen durchscheinen */
}

html.no-scroll,
body.no-scroll {
  overflow: hidden;
}

#helpOverlay,
#helpOverlay .panel,
#drugOverlay,
#drugOverlay .panel,
#settingsOverlay,
#settingsOverlay .panel {
  overscroll-behavior: contain;
}

/* ====== Page-Loader ====== */
#pageLoader{
  position:fixed; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px;
  background:#dddddd;
  z-index:100000;
  transition: opacity .25s ease;
}
#pageLoader.hidden{ opacity:0; pointer-events:none; }
#pageLoader .spinner{
  width:48px; height:48px; border-radius:50%;
  border:4px solid #e5e7eb; border-top-color:#3b82f6;
  animation:spin 1s linear infinite;
}
#pageLoader .label{ font-size:14px; color:#444; }
@keyframes spin{ to { transform: rotate(360deg); } }
html.page-loading, body.page-loading{ overflow:hidden; }

/* ====== Auto-Scale-Hülle ====== */
#tableScaleWrap{
  position: relative;
  width: 100%;
  overflow: auto;
  border-radius: 8px;
  overflow-x: hidden;
  overflow-y: auto;
}
#tableScaleInner{
  transform-origin: top left;
  will-change: transform;
}

/* ====== Tabelle ====== */
#Mediliste{ table-layout: fixed; width: 100%; }

/* Gleiches Boxmodell */
#Mediliste th, #Mediliste td{
  box-sizing: border-box;
  padding-top:3px; padding-bottom:3px; padding-left:0; padding-right:0;
  vertical-align: middle;
  font-size: 1em;
}

/* Textspalten */
#Mediliste th.wrap, #Mediliste td.wrap{
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* schmale Spalten */
th.fit, td.fit{ white-space: nowrap !important; width: auto !important; text-align: center !important; }
th.center, td.center{ text-align:center !important; }

/* Iconspalten klein */
th.iconcol, td.iconcol{
  width: 1.6em !important;
  white-space: nowrap !important;
  padding-left: .2em; padding-right: .2em;
  text-align: center !important;
}
#Mediliste td.iconcol img, #Mediliste th.iconcol img{
  height: 1.1em;
  width: auto;
  opacity: .9;
}

/* Info-Button */
.btnInfo{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.2em; height:1.2em; line-height:1em;
  padding:0; margin:0;
  border:1px solid #ccc; border-radius:50%;
  cursor:pointer;
  font-size:1em;
  background-color:blue; color:white;
  font-family:'COURIER NEW'; font-weight:bold;
}


/* Details-Spalte mit + / - */
td.details-control{
  cursor:pointer;
  text-align:center !important;
  font-weight:bold;
  width:1em !important;
}
td.details-control::before{
  content:"▶︎";   /* ▶ geschlossen */
  color:#aaaaaa;           /* hier die gewünschte Graustufe */  
  font-style: normal;
}
tr.shown td.details-control::before{
  content:"▼︎";   /* ▼︎ offen */
  color:blue;           /* gleiches Grau für das Minus */  
  font-style: normal;
}

/* "erste" relevante Spalte fett: Schrank (2. Spalte) */
#Mediliste th:nth-child(2), #Mediliste td:nth-child(2){
  font-weight: bold !important; text-align: center !important;
}

/* Header-Dropdowns */
#Mediliste thead select{
  display:block; width:100%; max-width: 7.2em; margin:0 auto;
  height: 1.6em; font-size: .9em; padding: .1em .2em; text-align:center; box-sizing: border-box;
}

/* Zebra + Hover */
#Mediliste tbody tr:nth-child(even){ background-color:#f9f9f9; }
#Mediliste tbody tr:hover{ background-color:#e8f0fe; }

/* Auswahl */
#Mediliste tbody tr.row-selected{ background-color:#cfe8ff !important; }
#Mediliste tbody tr.row-selected:hover{ background-color:#b7dcff !important; }

/* NEU: Nicht-Prio grau + Trennlinie */
#Mediliste tbody tr.non-prio td{
  color:#666;
  font-style:italic;
}
#Mediliste tbody tr.prio-separator td{
  border-bottom:3px solid #888888 !important;
}

/* Toolbar */
#selectionToolbar{ display:flex; gap:8px; align-items:center; margin:8px 0 12px; flex-wrap:wrap; }
#selectionToolbar button{ padding:6px 10px; border:1px solid #ccc; border-radius:6px; cursor:pointer; background:#fff; }
#selectionToolbar .pill{ font-size:12px; padding:2px 8px; border-radius:999px; background:#f1f3f4; border:1px solid #e0e0e0; }

.count-group{ display:flex; gap:8px; flex-wrap:nowrap; white-space:nowrap; }
@media (max-width: 640px){
  .count-group{ order: 3; width: 100%; justify-content: space-between; }
}

#btnResetSelection.hidden { display:none; }

/* Suchfeld */
div.dt-search{ width:100% !important; text-align:center !important; margin-bottom:10px !important; }
div.dt-search label{ display:none !important; }
input.dt-input[type="search"]{
  width:100% !important;
  font-size: clamp(14px, 3vmin, 24px) !important;
  padding: clamp(8px,1.2vmin,14px) clamp(10px,1.6vmin,16px) !important;
  border:1px solid #ccc; border-radius:6px; box-sizing:border-box;
}
#searchWrapper{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
#clearSearch{ padding:6px 10px; border:1px solid #ccc; border-radius:6px; background:#fff; cursor:pointer; }
#clearSearch.hidden{ display:none; }

/* ====== Hilfe-Overlay mit Fade ====== */
#helpOverlay{
  position:fixed;
  inset:0;
  /* background:rgba(0,0,0,.45); */
  z-index:100;

  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}

/* Startzustand: komplett weg */
#helpOverlay[hidden]{
  display:none;
}

/* sichtbarer Zustand */
#helpOverlay.is-open{
  opacity:1;
  pointer-events:auto;
}

#helpOverlay .panel{
  position:absolute;
  inset:6% 5%;
  background:#fff;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  padding:16px;
  overflow:auto;

  opacity:0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}

#helpOverlay.is-open .panel{
  opacity:1;
  transform: translateY(0);
}

#helpOverlay .panel header{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;
}
#helpOverlay .closeHelp{
  border:1px solid #ccc; border-radius:8px; background:#fff; cursor:pointer; padding:6px 10px;
}
#helpOverlay .help-body{
  display:grid; gap:16px;
  grid-template-columns: 1fr;
}
#helpOverlay .help-section h4{ margin:0 0 6px 0; }
#helpOverlay .help-section p{ margin:.4em 0; }
#helpOverlay ul{ margin:.2em 0 .4em 1.2em; }
#helpOverlay li{ margin:.15em 0; }

/* Video-Platzhalter / Iframe */
.video-slot{ position:relative; border:1px dashed #ddd; border-radius:8px; padding:10px; }
.video-slot iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius:8px; display:block; }
.video-placeholder{
  display:flex; align-items:center; justify-content:center;
  height:56vw; max-height:360px; min-height:180px;
  font-size:14px; color:#444; background:#fafafa; border-radius:8px;
}


/* ====== Einstellungen-Overlay mit Fade ====== */
#settingsOverlay{
  position:fixed;
  inset:0;
  /* background:rgba(0,0,0,.45); */
  z-index:100;

  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}

/* Startzustand */
#settingsOverlay[hidden]{
  display:none;
}

/* sichtbarer Zustand */
#settingsOverlay.is-open{
  opacity:1;
  pointer-events:auto;
}

#settingsOverlay .panel{
  position:absolute;
  inset:8% 5%;
  background:#fff;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  padding:16px;
  overflow:auto;

  opacity:0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}

#settingsOverlay.is-open .panel{
  opacity:1;
  transform: translateY(0);
}

#settingsOverlay .panel header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

#settingsOverlay .closeSettings{
  border:1px solid #ccc;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  padding:6px 10px;
}

/* einfache Struktur im Overlay */
.settings-body{
  display:grid;
  gap:16px;
}

.settings-section h2{
  margin:0 0 6px 0;
  font-size:1.1rem;
}

.settings-section p{
  margin:.4em 0;
}

.settings-note{
  font-size:.9em;
}


/* Aktionen im Einstellungs-Overlay */
.settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
	padding-bottom:20px;
	padding-left:10px;
	padding-top:10px;
}

.settings-actions button{
  padding:6px 10px;
  border:1px solid #ccc;
  border-radius:6px;
  background:#fff;
  cursor:pointer;
  font:inherit;
}


/* Kontaktformular */
#helpContactForm .form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
#helpContactForm label{ font-weight:600; }

#helpContactForm input,
#helpContactForm textarea,
#helpContactForm select{
  padding:8px;
  border:1px solid #ccc;
  border-radius:6px;
  font:inherit;
  width:100%;
  box-sizing:border-box;
  background-color:#fff;
}

/* einheitlicher Fokus */
#helpContactForm input:focus,
#helpContactForm textarea:focus,
#helpContactForm select:focus{
  outline: none;
  border-color:#3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

/* Dropdown-Pfeil und native Optik neutralisieren */
#helpContactForm select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.2em;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'><path d='M5 8l5 5 5-5' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right .6em center;
  background-size: 1em;
}

/* optional: Cursor wie bei Buttons */
#helpContactForm select{ cursor: pointer; }

#helpContactForm .form-actions{ display:flex; gap:10px; align-items:center; }
#helpContactForm button{ padding:8px 12px; border:1px solid #ccc; border-radius:6px; background:#fff; cursor:pointer; }
#helpFormStatus{ font-size:.9em; opacity:.85; }

/* Info-Overlay (Drug) mit Fade */
#drugOverlay{
  position:fixed;
  inset:0;
  /* background:rgba(0,0,0,.45); */
  z-index:100;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:none;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}

#drugOverlay.is-open{
  opacity:1;
  pointer-events:auto;
} 

#drugOverlay .panel{
  position:absolute;
  inset:8% 5%;
  background:#fff;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  padding:16px 20px 16px 16px;
  overflow:auto;

  opacity:0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}

#drugOverlay.is-open .panel{
  opacity:1;
  transform: translateY(0);
}


#drugOverlay .panel header{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: left;   /* zentriert den Titel */
  padding: 12px 16px 20px;      /* rechts Platz für den Button lassen */
}

/* Titel größer und ohne zusätzlichen Abstand */
#drugOverlayTitle{
  margin: 0;
  font-size: 1.4rem;         /* nach Geschmack anpassen */
  font-weight: 600;
  text-align: center;
  padding-top:10px;
}

/* Schließen-Button fest rechts im Header */
#drugOverlay .closeOverlay{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}


#drugOverlay .closeOverlay{ border:1px solid #ccc; border-radius:8px; background:#fff; cursor:pointer; padding:6px 10px; }
#drugOverlay .kv{ margin:6px 0; }
#drugOverlay .kv .k{ font-weight:bold; }

/* Overlay-Listen enger einrücken */
#drugOverlay ul{
  margin: 0 0 0.3em 1em;
  padding-left: 2em;
}
#drugOverlay li{
  margin: 0px 0px 0.3em 0;
}
#drugOverlay ul ul{
  margin: 0.3em 0 0.3em 0;
  padding-left: 2em;
}
#drugOverlay p{
  margin: 0 0 0.3em 0;
  padding-left: 1em;
}

/* H2-Gruppen eingerückt */
.h2group{
  border-left: 2px solid #ccc;
  padding-left: 10px;
  margin-left: 10px;
}



.box-ab {
  background: #e5f4e8;       /* sehr helles Grün */
  border-left: 6px solid #2e7d32;
  color: #000000;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 16px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  position: relative;        /* NEU: Referenz für das P-Icon */
}

/*
.box-ab::after {
    content: "AB";
    position: absolute;
    top: 15px;
    right: 15px;
    height: 1.2em;
    border-radius: 0% 6px 0% 6px;
    background: rgba(255, 255, 255, 0.3);
    color: #2e7d32;
    font-weight: bold;
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
    font-family: COURIER;
    width: 60px;
}
*/

.box-p {
  background: #fff3e0;       /* sehr helles Orange */
  border-left: 6px solid #ff9800;
  color: #000000;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 16px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  position: relative;        /* NEU: Referenz für das P-Icon */
  
}

.box-p::after {
    content: "Perfusor";
    position: absolute;
    top: 15px;
    right: 15px;
    height: 1.2em;
    border-radius: 0% 6px 0% 6px;
    background: rgba(255, 255, 255, 0.3);
    color: #ff9800;
    font-weight: bold;
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
    font-family: COURIER;
    width: 150px;
}


.box-wichtig {
  background: #fdecea;       /* sehr helles Rot */
  border-left: 6px solid #d32f2f;
  color: #000000;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 16px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.box-eigene {
  background: #f5f5f5;       /* hellgrau */
  border-left: 6px solid #9e9e9e;
  color: #000000;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 16px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}


.box-arzneiinfos {
  background: #f4f8ff;       /* fast weiß */
  border-left: 6px solid #b4c5ff;  /* sehr dezente linke Leiste */
  color: #000000;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 16px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10); /* etwas weniger Schatten */
}

.box-funfacts {
  background: #effeff;            /* sehr helles, weiches Türkis */
  border-left: 6px solid #9ce4e6; /* dein gewünschter Farbton */
  color: #000000;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 16px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  position: relative;
}




/* Badge allgemein für alle Boxen mit Bild */
.box-badge {
  float: right;
  margin: 0 0 6px 12px;   /* Abstand nach links/unten */
}

.box-badge img {
  display: block;
  width: 40px;            /* nach Geschmack anpassen */
  height: auto;
}

/* Inhalt, falls du mal etwas spezielles willst */
.box-content {

}

/* Links/Überschriften übernehmen Schwarz */
.box-eigene a,
.box-arzneiinfos a,
.box-ab a,
.box-p a,
.box-wichtig a,
.box-funfacts {
  color: #000000;
}

.box-eigene .h1line,
.box-arzneiinfos .h1line,
.box-ab .h1line,
.box-p .h1line,
.box-wichtig .h1line,
.box-funfacts .h1line {
  color: #000000;
}



/* Hilfe: Link-Button für ausführliche Hilfe */
#helpContent .help-more-row{
  margin: 0.5em 0 0.8em;
}

#helpContent .help-more{
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.95em;
  color: #2563eb;
  text-decoration: underline;
  cursor: pointer;
}

#helpContent .help-more:hover{
  text-decoration: none;
}

#helpContent #helpMore[hidden]{
  display: none;
}



/* Panel: oben komplett ohne Abstand, Header soll den oberen Radius tragen */
#drugOverlay .panel{
  position:absolute;
  inset:8% 5%;
  background:#fff;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  overflow:auto;

  opacity:0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;

  display:flex;
  flex-direction:column;

  padding:0; /* wichtig: kein Padding oben oder seitlich */
}

/* Header liegt direkt am oberen Rand und hat den Radius */
#drugOverlay .panel header{
  position:sticky;
  top:0;
  z-index:5;

  display:flex;
  align-items:center;
  justify-content:left;

  padding:12px 16px 16px;
  background:#fff;

  border-top-left-radius:10px;   /* Header übernimmt die Rundung */
  border-top-right-radius:10px;
}

/* Titel */
#drugOverlayTitle{
  margin:0;
  font-size:1.4rem;
  font-weight:600;
}

/* Schließen-Button rechts */
#drugOverlay .closeOverlay{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
}

/* Body mit Abstand */
#drugOverlayBody{
  flex:1 1 auto;
  padding: 0 16px 16px 16px;
}

/* Erste Box drückt nicht hoch */
#drugOverlayBody > *:first-child{
  margin-top:0;
}







/* Key-Value-Renderer */
:root{ --kv-left: clamp(50px, 16ch, 100px); }
.flex-kv{ display:grid; grid-template-columns: var(--kv-left) 1fr; column-gap:16px; align-items:start; padding-top:5px;}
.flex-kv .row{ display:contents; }
.flex-kv .row>.k{ font-weight:600; color:#222; }
.flex-kv .row>.k, .flex-kv .row>.v{ padding:.6em 0; text-align: left; }
.flex-kv .row::after{ content:""; grid-column:1 / -1; border-bottom:1px solid darkgrey ; }
.flex-kv .row:last-child::after{ border-bottom:none; }
.flex-pre{
  white-space:pre-wrap;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:.9em; background:#fafafa; border:1px solid #eee; border-radius:6px; padding:.6em;
}
.flex-box{ border:1px solid #000; box-shadow: 2px 2px grey; border-radius:8px; padding: 0.4em 1em 0.2em 1em; margin:0.5em 2em 1em 2em; background-color: beige }

.flex-box .online-links{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
}

.flex-box .online-link{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid #d0d0d0;
  font-size:0.85em;
  text-decoration:none;
  background:rgba(255,255,255,0.7);
  color:#333;
  white-space:nowrap;
}

.flex-box .online-link:hover{
  border-color:#3b82f6;
  background:#eef3ff;
}

.flex-box .online-link:active{
  transform:translateY(1px);
}

/* Lokales Log-Panel */
#localLogPanel{
  display:none; position:fixed; inset:10% 5%; background:#fff;
  border:1px solid #ddd; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.15);
  padding:16px; z-index:200; overflow:auto;
}
#LocalLogsTable{ width:100%; border-collapse:collapse; font-size:14px; }
#LocalLogsTable th, #LocalLogsTable td{ padding:6px; border-bottom:1px solid #eee; text-align:left; }
#LocalLogsTable td.code{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

/* === Desktop-Feintuning === */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px){
  html{ font-size: clamp(15px, 0.95vmin, 19px); }
  #Mediliste th, #Mediliste td{
    font-size: 1.2em; padding-top: 6px; padding-bottom: 6px; padding-left:0px; padding-right:0px; height:1.2em;
  }
  th.iconcol, td.iconcol{
    width: 2.4em !important; padding-left: .35em; padding-right: .35em; vertical-align: middle !important;
  }
  #Mediliste td.iconcol img, #Mediliste th.iconcol img{ 
    height: 1em; width: auto; opacity: .95; 
    transform: scale(1.4);
    transform-origin: center center;
  }

  .btnInfo{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1em;
    height:1em;
    line-height:1em;
    padding:0;
    margin:0;
    border:1px solid #ccc;
    border-radius:50%;
    cursor:pointer;
    font-size:1em;
    background-color:blue;
    color:white;
    font-family:'COURIER NEW';
    font-weight:bold;
    transform: scale(1.4);
    transform-origin: center center;
  }

  input.dt-input[type="search"]{ font-size: clamp(16px, 1.6vmin, 22px) !important; padding: 10px 14px !important; }
}

/* ===== DataTables-Fußbereich ===== */

#Mediliste_wrapper { text-align: center; }
#Mediliste_wrapper .dataTables_info,
#Mediliste_wrapper .dataTables_paginate {
  float: none !important;
  display: inline-block;
  text-align: center;
}
#Mediliste_wrapper .dataTables_info {
  margin: 8px 0 4px;
  font-size: 0.9em;
  color: #555;
}
#Mediliste_wrapper .dt-info {
  padding:10px;
  text-style: italic;
  color: #555;
}
#Mediliste_wrapper .dataTables_paginate {
  margin: 0 4px 8px;
}
#Mediliste_wrapper .dt-show-all {
  display: inline-block;
  margin: 0 0 8px 4px;
  padding: 4px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 0.9em;
}
#Mediliste_wrapper .dt-show-all:hover {
  background: #f5f5f5;
}

#btnShowAll {
  padding: 5px 12px;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #f2f2f2;
  cursor: pointer;
  font-size: 0.9em;
  color: #333;
  margin: 0 4px;
  transition: background 0.15s, border-color 0.15s;
}
#btnShowAll:hover {
  background: #e6e6e6;
  border-color: #999;
}
#btnShowAll:active {
  background: #dcdcdc;
  border-color: #888;
}

/* Darstellung der DataTables-Detailzeile (+-Zeile) */
#Mediliste tr.child td{
  padding: 0 !important;
  background: #f5f7fb !important;
  text-align: left !important;
}

table.dataTable.cell-border>tbody>tr>*:first-child {
	padding: 0 !important;
}

/* Box für Produzent / PZN kompakter */
#Mediliste tr.child td .flex-box{
  margin: 2px 0;
  padding: 4px 6px;
  background: transparent;
  border-radius: 4px;
}

.flex-kv{
  display:grid;
  grid-template-columns: var(--kv-left) 1fr;
  column-gap:16px;
  row-gap: .1em;
  align-items:start;
}

.flex-kv .row>.k,
.flex-kv .row>.v{
  padding:0 0;
  line-height: 1.4;
}

/* === Editor-Popup für Dateiauswahl === */
#editorPopup{
  position: fixed;
  display: none;
  z-index: 100;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  padding: 4px 0;
  min-width: 220px;
  font-size: 0.9em;
}

#editorPopup a{
  display: block;
  padding: 6px 10px;
  text-decoration: none;
  color: #222;
  white-space: nowrap;
}

#editorPopup a:hover{
  background: #eef3ff;
}



/* Farbvarianten für Info-Button je nach Quelle */
.btnInfo-ab {          /* ICU-Mediliste_Zusatzinfos_AB.md */
  background-color: #006400;   /* dunkles Grün */
}

.btnInfo-p {           /* ICU-Mediliste_Zusatzinfos_P.md */
  background-color: #ff9800;   /* Orange */
}


/* optional: wenn in beiden Dateien vorhanden */
.btnInfo-both {
  background: linear-gradient(to right,
    #006400 0%,
    #ff9800 80%
	);
}

.btnInfo-wichtig {     /* ICU-Mediliste_Zusatzinfos_Wichtig.md */
  /* background-color: #d32f2f;   /* Rot, passend zur box-wichtig */
  color: #ffaaaa;
}

.btnInfo-eigene {      /* ICU-Mediliste_Zusatzinfos_Eigene.md */
/*  background-color: ;   /* neutrales Dunkelgrau */
}



/* Karte / Hintergrund rechts */
.perfusor-calc-card {
  width:250px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.4); /* leicht transparent */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin-top:10px;
}

/* Zeilenanordnung */
.perfusor-calc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.perfusor-calc-row:last-child {
  margin-bottom: 0;
}

/* Label / Einheit */
.perfusor-label {
  min-width: 70px;
  font-size: 0.9rem;
}

.perfusor-unit {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Inputs & Selects */
.perfusor-calc-rate,
.perfusor-calc-weight,
.perfusor-calc-result-input,
.perfusor-calc-unit,
.perfusor-calc-abs-input,
.perfusor-calc-abs-unit
{
  font-family: 'COURIER';
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.5); /* etwas transparenter als Karte */
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.perfusor-calc-rate
{
	width:55px;
}

.perfusor-calc-weight
{
	width:70px;
}

.perfusor-calc-result-input,
.perfusor-calc-abs-input
{
	width:55px;
    white-space: pre; /* damit führende Leerzeichen sichtbar bleiben */
	
}

.perfusor-calc-unit,
.perfusor-calc-abs-unit
{
	width:100px;
	
}

.perfusor-calc-rate:focus,
.perfusor-calc-weight:focus {
  border-color: #1f7edb;
  box-shadow: 0 0 0 2px rgba(31, 126, 219, 0.15);
  background: #fff;
}

/* Ergebnis */
.perfusor-calc-result {
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.02);
  color:black;
}

.perfusor-calc-result.perfusor-empty {
  opacity: 0.5;
  font-weight: 400;
}



.perfusor-collapse {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 12px 0;
  background: #fafafa;
}

.perfusor-collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 10px 12px;
  font-weight: bold;
  font-size: 1rem;
  background: #eee;
  border-radius: 8px 8px 0 0;
}

.perfusor-collapse-body {
  padding: 10px 12px;
    display: none;

}

.perfusor-collapse-icon {
  transition: transform 0.2s ease;
}

.perfusor-collapse.open .perfusor-collapse-icon {
  transform: rotate(90deg);
}

.perfusor-collapse.open .perfusor-collapse-body {
  display: block;
}




#locationOverlay[hidden] {
  display: none;
}





/* ===========================
   Login-Overlay
   =========================== */

#loginOverlay {

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  
  
  position: fixed;
  inset: 0;
  z-index: 1400;

  /* zentriertes Layout: oben mittig, mit Abstand nach oben */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 1.5rem 1.5rem;

  /* Hintergrund ausgrauen + leicht weichzeichnen */
  background: rgba(0, 0, 0, 0.01);
}

#loginOverlay[hidden] {
  display: none;
}

.login-panel {
  position: relative;
  max-width: 420px;
  width: 100%;
  padding: 1.5rem 1.75rem 1.75rem;
  border-radius: 14px;
  background: #ffffff;
  color: #0f172a;
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.35),
    0 0 0 1px rgba(148, 163, 184, 0.35);
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  animation: login-pop-in 180ms ease-out forwards;
}

.login-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}

.login-panel h1 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.login-close-btn {
  appearance: none;
  border: none;
  background: transparent;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  color: #64748b;
}

.login-close-btn:hover,
.login-close-btn:focus-visible {
  color: #0f172a;
}

#loginForm {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

#loginForm .form-row {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

#loginForm label {
  font-size: .85rem;
  font-weight: 500;
  color: #475569;
}

#loginForm input[type="text"],
#loginForm input[type="password"] {
  font: inherit;
  padding: .45rem .6rem;
  border-radius: 8px;
  border: 1px solid #cbd5f5;
  background: #f8fafc;
  color: inherit;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

#loginForm input[type="text"]:focus,
#loginForm input[type="password"]:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, .45);
  background: #ffffff;
}

.login-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .25rem;
}

.login-submit,
.login-cancel {
  font: inherit;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: .4rem .9rem;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.login-submit {
  background: #2563eb;
  color: #ffffff;
}

.login-submit:hover:not(:disabled) {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.login-submit:disabled {
  opacity: .7;
  cursor: default;
}

.login-cancel {
  background: #e5e7eb;
  color: #111827;
}

.login-cancel:hover {
  background: #d4d4d8;
}

.login-status {
  min-height: 1.2em;
  margin-top: .25rem;
  font-size: .85rem;
}

.login-status[data-state="error"] {
  color: #b91c1c;
}

.login-status[data-state="success"] {
  color: #15803d;
}

.login-status[data-state="info"] {
  color: #4b5563;
}

.login-note {
  margin-top: 0.75rem;
  font-size: .85rem;
  color: #6b7280;
}

/* kleiner „Ladevorschau“-Effekt am Submit-Button */
#loginForm.is-loading .login-submit {
  position: relative;
}

#loginForm.is-loading .login-submit::after {
  content: "";
  position: absolute;
  inset-inline: .7rem;
  bottom: .3rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(59, 130, 246, .1), rgba(59, 130, 246, .6), rgba(59, 130, 246, .1));
  animation: login-loading-bar 900ms linear infinite;
}

/* Dark-Mode-Anpassungen */
.dark-mode #loginOverlay {
  background: rgba(15, 23, 42, 0.86);
}

.dark-mode .login-panel {
  background: #020617;
  color: #e5e7eb;
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.8),
    0 0 0 1px rgba(30, 64, 175, 0.7);
}

.dark-mode #loginForm label {
  color: #cbd5f5;
}

.dark-mode #loginForm input[type="text"],
.dark-mode #loginForm input[type="password"] {
  background: #020617;
  border-color: #1f2937;
  color: #e5e7eb;
}

.dark-mode #loginForm input[type="text"]:focus,
.dark-mode #loginForm input[type="password"]:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.7);
  background: #020617;
}

.dark-mode .login-cancel {
  background: #111827;
  color: #e5e7eb;
  border-color: #1f2937;
}

.dark-mode .login-cancel:hover {
  background: #020617;
}

/* Animationen */
@keyframes login-pop-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes login-loading-bar {
  0% {
    transform: translateX(-40%);
  }
  100% {
    transform: translateX(40%);
  }
}

/* Scroll-Lock-Klassen (werden schon von dir benutzt) */
.no-scroll {
  overflow: hidden !important;
}




/* Kontext-Auswahl (Einrichtung/Klinik/Station/Liste) */
#contextBar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  max-width: 45%;
  min-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#contextLabel {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#contextBar select {
  font: inherit;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #fff;
  max-width: 220px;
}

#contextBar select.hidden {
  display: none;
}

body.dark-mode #contextBar select {
  background: #111827;
  color: #e5e7eb;
  border-color: #4b5563;
}

/* auf sehr kleinen Screens Kontext-Bar nach unten umbrechen */
@media (max-width: 640px) {
  #contextBar {
    flex-basis: 100%;
    max-width: 100%;
    order: 4;
  }
}













@media (max-width: 640px) {
  #Mediliste th.col-info,
  #Mediliste td.col-info {
    width: 160px !important;
	
  #drugOverlay .panel header{
  justify-content: center;   /* zentriert den Titel */
}	
	
	
  }
  

  
}








/* ===== Dark-Mode ===== */
html.dark-mode{
  color-scheme: dark;
}

body.dark-mode{
  background:#020617;
  color:#e5e7eb;
}

/* Grundlegende Links im Dark-Mode */
body.dark-mode a{
  color:#93c5fd;
}

/* zentrale Panels/Hintergründe */
body.dark-mode #topBar,
body.dark-mode #pageLoader,
body.dark-mode #helpOverlay .panel,
body.dark-mode #settingsOverlay .panel,
body.dark-mode #drugOverlay .panel,
body.dark-mode #localLogPanel,
body.dark-mode #editorPopup,
body.dark-mode #contextOverlay
{
  background:#0f172a;
  color:#e5e7eb;
}

body.dark-mode #pageLoader{
  background:#020617;
}

body.dark-mode #pageLoader .label{
  color:#e5e7eb;
}

/* Tabelle */
body.dark-mode #Mediliste thead th{
  background:#111827;
  color:#e5e7eb;
}

body.dark-mode #Mediliste tbody tr:nth-child(even){
  background-color:#020617;
}

body.dark-mode #Mediliste tbody tr:hover{
  background-color:#1f2937;
}

body.dark-mode #Mediliste tbody tr.row-selected{
  background-color:#1d4ed8 !important;
}

body.dark-mode #Mediliste tbody tr.row-selected:hover{
  background-color:#1e40af !important;
}

/* Child-Row im Dark-Mode */
body.dark-mode #Mediliste tr.child td{
  background:#020617 !important;
}

/* Eingabefelder & Buttons */
body.dark-mode input.dt-input[type="search"],
body.dark-mode #helpContactForm input,
body.dark-mode #helpContactForm textarea,
body.dark-mode #helpContactForm select,
body.dark-mode #contextOverlay select,
body.dark-mode #helpContactForm select,
body.dark-mode #contextOverlay select,
body.dark-mode #contextBar select
{
  background:#020617;
  color:#e5e7eb;
  border-color:#4b5563;
}

body.dark-mode #selectionToolbar button,
body.dark-mode #clearSearch,
body.dark-mode #helpOverlay .closeHelp,
body.dark-mode #settingsOverlay .closeSettings,
body.dark-mode #drugOverlay .closeOverlay,
body.dark-mode #helpContactForm button,
body.dark-mode #btnShowAll,
body.dark-mode #localLogPanel button,
body.dark-mode .settings-actions button{
  background:#111827;
  color:#e5e7eb;
  border-color:#4b5563;
}

/* Infos unter der Tabelle */
body.dark-mode #Mediliste_wrapper .dt-info,
body.dark-mode #Mediliste_wrapper .dataTables_info{
  color:#e5e7eb;
}

/* Flex-Box im Detailbereich etwas abdunkeln */
body.dark-mode .flex-box{
  background:#020617;
  border-color:#4b5563;
  box-shadow:0 2px 6px rgba(0,0,0,0.6);
}

/* ===== Dark-Mode Feinschliff ===== */

/* 1. Tabellenrahmen in der Mediliste: hell / weißlich */
body.dark-mode table.dataTable.cell-border,
body.dark-mode table.dataTable.cell-border th,
body.dark-mode table.dataTable.cell-border td {
  border-color: #e5e7eb !important; /* "weiß" im Darkmode */
}

/* 2. Zähler "Ausgewählt / Gefunden / Gesamt": schwarz mit weißer Schrift */
body.dark-mode #selectionToolbar .pill {
  background: #000000;
  color: #ffffff;
  border-color: #4b5563;
}

/* 3. Info-Box-Overlay: Box-Hintergründe weiß lassen, farbiger Rand bleibt */
body.dark-mode .box-ab,
body.dark-mode .box-p,
body.dark-mode .box-wichtig,
body.dark-mode .box-eigene,
body.dark-mode .box-arzneiinfos,
body.dark-mode .box-funfacts {
  background: #ffffff;
  color: #000000;
}

/* Titel und Abschnittsüberschriften im Overlay schwarz statt weiß */
body.dark-mode #drugOverlayTitle,
body.dark-mode #drugOverlay .h1line {
  color: #000000;
}

/* 4. Kurzinfo (linkes Dreieck): Pfeiltext im Darkmode weiß */
body.dark-mode td.details-control::before,
body.dark-mode tr.shown td.details-control::before {
  color: #ffffff;
}

/* ===== Darkmode: Drug-Overlay optimieren ===== */
body.dark-mode #drugOverlay .panel {
  background: #0f172a;   /* dunkles Blau-Grau */
  color: #e5e7eb;
}

body.dark-mode #drugOverlay .panel header
{
  background: #0f172a;   /* dunkles Blau-Grau */
  color: #e5e7eb;
}

body.dark-mode .flex-kv .row>.k
{
 color: #ffffff;
}

/* Titel oben */
body.dark-mode #drugOverlayTitle {
  color: #e5e7eb;
}

/* Überschriften in den Boxen */
body.dark-mode #drugOverlay .h1line {
  color: #e5e7eb;
}

/* Arzneiinfos-Boxen: im Darkmode NICHT weiß, sondern dunklere Variante */
body.dark-mode .box-arzneiinfos {
  background: #1e293b;
  border-left-color: #64748b;
  color: #e5e7eb;
}

/* Eigene Boxen */
body.dark-mode .box-eigene {
  background: #1e293b;
  border-left-color: #9ca3af;
  color: #e5e7eb;
}

/* AB (grün) */
body.dark-mode .box-ab {
  background: #064e3b;
  border-left-color: #10b981;
  color: #ffffff;
}

/* P (orange) */
body.dark-mode .box-p {
  background: #7c2d12;
  border-left-color: #fb923c;
  color: #ffffff;
}

/* Wichtig (rot) */
body.dark-mode .box-wichtig {
  background: #7f1d1d;
  border-left-color: #f87171;
  color: #ffffff;
}


/* Listen, Absätze und Links im Overlay */
body.dark-mode #drugOverlayBody li,
body.dark-mode #drugOverlayBody p,
body.dark-mode #drugOverlayBody a {
  color: #e5e7eb;
}

#selectionToolbar{
  display:flex;
  gap:8px;
  align-items:center;
}

#selectionToolbar .toolbar-right{
  margin-left:auto;
  display:flex;
  gap:8px;
}

#helpOverlay,
#settingsOverlay,
#drugOverlay,
#contextOverlay,
#locationOverlay
 {
  position:fixed;
  inset:0;

  /* leicht abgedunkelt + milchig */
  /* background: rgba(0,0,0,0.25); */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  z-index:100;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}


#localLogOverlay {
  position: fixed;
  inset: 0;

  /* background: rgba(0,0,0,0.25); */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 120; /* knapp unter dem Panel */
}

#localLogPanel {
  z-index: 100;


}




/* Kontext-Overlay grundlegend wie Hilfe/Einstellungen */

#contextOverlay[aria-modal="true"] {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* oder center, wenn du es ganz mittig willst */
  padding: 40px 16px;      /* Abstand zum oberen Rand */
  /* background: rgba(0, 0, 0, 0.25); */
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* wenn per JS .is-open gesetzt wird → sichtbar & klickbar */
#contextOverlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Das eigentliche Panel im Overlay */
#contextOverlay .panel {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  padding: 20px 24px 24px;
}

/* Header vom Kontext-Overlay */
#contextOverlay header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

#contextOverlay header h1 {
  margin: 0;
  font-size: 1.3rem;
}

#contextOverlay .closeContext {
  padding: 4px 10px;
  font-size: 0.9rem;
}

/* Inhalt / Abschnitte schön untereinander */

#contextOverlay .settings-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#contextOverlay .settings-section h2 {
  margin: 0 0 4px;
  font-size: 0.95rem;
}

#contextOverlay .settings-actions {
  display: block;
}

/* Kontext-Selects im selben Stil wie das Kontaktformular */
#contextOverlay select,
#closeContext {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font: inherit;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;

  /* Dropdown-Pfeil & native Optik neutralisieren – wie beim Kontaktformular */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.2em;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'><path d='M5 8l5 5 5-5' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right .6em center;
  background-size: 1em;
  cursor: pointer;
}

/* Fokuszustand wie im Kontaktformular */
#contextOverlay select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

/* Hinweis-Text etwas dezenter */
#contextOverlay .settings-note {
  font-size: 0.85rem;
  color: #444;
}





/* ===== Dark-Mode: Perfusor-Felder ===== */

body.dark-mode .perfusor-calc-card {
  background: rgba(15, 23, 42, 0.9);   /* dunkle Karte */
  border-color: #1f2937;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Eingabefelder und Select im Perfusor */
body.dark-mode .perfusor-calc-rate,
body.dark-mode .perfusor-calc-weight,
body.dark-mode .perfusor-calc-result-input,
body.dark-mode .perfusor-calc-unit, 
body.dark-mode .perfusor-calc-abs-unit, 
body.dark-mode .perfusor-calc-abs-input
{
  background: #020617;
  color: #e5e7eb;
  border-color: #4b5563;
}

body.dark-mode .perfusor-calc-rate:focus,
body.dark-mode .perfusor-calc-weight:focus,
body.dark-mode .perfusor-calc-result-input:focus,
body.dark-mode .perfusor-calc-unit:focus {
  border-color: #1f7edb;
  box-shadow: 0 0 0 2px rgba(31, 126, 219, 0.3);
  background: #020617;
}

/* Platzhalter etwas abgedunkelt */
body.dark-mode .perfusor-calc-rate::placeholder,
body.dark-mode .perfusor-calc-weight::placeholder,
body.dark-mode .perfusor-calc-result-input::placeholder {
  color: #6b7280;
}

/* Ergebnisfeld */
body.dark-mode .perfusor-calc-result {
  background: #111827;
  color: #f9fafb;
}

/* Collapsible-Box (Perfusor-Bereich) */
body.dark-mode .perfusor-collapse {
  background: #020617;
  border-color: #374151;
}

body.dark-mode .perfusor-collapse-header {
  background: #111827;
  color: #e5e7eb;
}

body.dark-mode .perfusor-collapse-body {
  background: #020617;
  color: #e5e7eb;
}

/* Icon im Header, wenn du eins nutzt */
body.dark-mode .perfusor-collapse-icon {
  color: #e5e7eb;
}

body.dark-mode .box-p::after {
    background: #7c2d12;
    color: #ffffff;
}

/* Darkmode-Variante für das "Perfusor"-Badge */
body.dark-mode .box-p::after {
    background: rgba(0, 0, 0, 0.55);   /* dunkler, passt zum Hintergrund */
    color: #fed7aa;                    /* helles Orange fürs Label */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(251, 146, 60, 0.6);  /* dezenter Rahmen im Orange-Ton */
}

body.dark-mode .box-funfacts {
  background: #2f3a3b;            /* dunkles, entspanntes Grau mit leichter Grün-Blau-Tönung */
  border-left-color: #79c8cb;     /* abgetöntes, dezenteres Türkis */
  color: #ffffff;
}


.box-content::after {
  content: "";
  display: block;
  clear: both;
}


.loader-image {
  display:block;
  width:256px;
  height:256px;
  filter: drop-shadow(0 0 8px rgba(0,0,0,0.5))
          drop-shadow(0 0 16px rgba(0,0,0,0.25));
		  
    filter:
    drop-shadow(0 0 1px #000)
    drop-shadow(0 0 1px #000)
    drop-shadow(0 0 1px #000)
	
	;
  
}


.loader-label-wrap {
  padding: 10px 18px;
  background: #eeb45d;
  border: 2px solid #000;
  border-radius: 12px;
  display: inline-block;
  /* leichter Schatten */
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);  
}

.label {
  font-weight: bold;   /* neu */
  font-family: 'COURIER';
  font-size: 10em;
  color: #000;
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Container für Punkte mit fixer Breite */
.dots-wrap {
  display: inline-block;
  position: relative;
  width: 1.8em;     /* Breite fix → kein Wackeln */
  margin-left: 0.1em;
}

/* animierte Punkte */
.dots {
  position: absolute;
  left: 0;
}

.dots::after {
  content: "";
  animation: dotAnim 1.6s infinite;
}

/* unsichtbarer Platzhalter für fixe Breite */
.dots-placeholder {
  visibility: hidden;
}

@keyframes dotAnim {
  0%   { content: ""; }
  15%  { content: ""; }   /* kleine Pause */
  40%  { content: "."; }
  65%  { content: ".."; }
  90%  { content: "..."; }
  100% { content: ""; }   /* zurück zu leer */
}







#locationOverlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Panel im Location-Overlay animiert anzeigen */
#locationOverlay .panel {
  position: absolute;
  inset: 8% 5%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: 16px;
  overflow: auto;

  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}

#locationOverlay.is-open .panel {
  opacity: 1;
  transform: translateY(0);
}