/* Yarik · Oberfläche
   ==================
   Ruhig, sachlich, gut lesbar auch auf dem Praxis-Bildschirm.
   Farben: kühles Blaugrün als Akzent, klare Signalfarben für
   kritisch / Warnung / erledigt. */

:root{
  --grund:#F4F6F7; --flaeche:#FFFFFF; --flaeche2:#EBEFF1;
  --schrift:#111A1F; --schrift2:#3D4C54; --schrift3:#6A7A83;
  --linie:#D3DBDF; --linie-stark:#B4C0C6;
  --akzent:#12586B; --akzent-hell:#DCEAEE;
  --warn:#8A5A00; --warn-hell:#F7E9CE;
  --fehler:#96231F; --fehler-hell:#F6DFDD;
  --gut:#1F6046; --gut-hell:#DBECE3;
  --schatten:0 1px 2px rgba(17,26,31,.06), 0 8px 24px -18px rgba(17,26,31,.3);
}

*{box-sizing:border-box}
/* Muss vor allen display-Regeln stehen: sonst gewinnt z. B. .feld{display:flex}
   gegen das hidden-Attribut, und ausgeblendete Felder bleiben sichtbar. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--grund); color:var(--schrift);
  font-family:"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  font-size:16.5px; line-height:1.6;
}
body.schmal{max-width:760px;margin:0 auto;padding:32px 20px 80px}

a{color:var(--akzent)}
h1{font-size:27px;margin:0 0 4px;letter-spacing:-.015em}
h2{font-size:19px;margin:0 0 12px;letter-spacing:-.01em}
h3{font-size:17px;margin:20px 0 8px}
p{margin:0 0 12px}
code{background:var(--flaeche2);padding:.1em .4em;border-radius:3px;font-size:.9em}
.unterzeile{color:var(--schrift3);font-size:15px;margin:0 0 20px}
.hinweis{color:var(--schrift3);font-size:14.5px}
.zahl{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.klein{font-size:14.5px}

/* ---------- Gerüst ---------- */
.kopfleiste{
  background:var(--flaeche); border-bottom:1px solid var(--linie);
  position:sticky; top:0; z-index:20;
}
.kopfleiste .innen{
  max-width:1240px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:16px;min-height:52px;flex-wrap:wrap;
}
.marke{font-weight:700;letter-spacing:.02em;color:var(--akzent);font-size:17px}
.navi{display:flex;gap:2px;flex:1;flex-wrap:wrap}
.navi a{
  padding:7px 11px;border-radius:4px;text-decoration:none;color:var(--schrift2);
  font-size:15px;white-space:nowrap;
}
.navi a:hover{background:var(--flaeche2)}
.navi a.aktiv{background:var(--akzent);color:#fff}
.navi a .kennzahl{
  display:inline-block;margin-left:5px;padding:0 5px;border-radius:8px;
  background:var(--fehler);color:#fff;font-size:11px;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.navi a.aktiv .kennzahl{background:rgba(255,255,255,.25)}
.wer{font-size:14.5px;color:var(--schrift3);white-space:nowrap}
.inhalt{max-width:1240px;margin:0 auto;padding:22px 20px 80px}

/* ---------- Karten und Tabellen ---------- */
.karte{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:5px;
  padding:18px 20px;margin:0 0 16px;box-shadow:var(--schatten);
}
.karte.eng{padding:14px 16px}

.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:5px;
  overflow:hidden;margin:0 0 18px}
.kachel{background:var(--flaeche);padding:14px 16px;text-decoration:none;color:inherit;display:block}
a.kachel:hover{background:var(--flaeche2)}
.kachel .n{font-size:28px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums}
.kachel .l{font-size:14px;color:var(--schrift3);margin-top:2px;line-height:1.3}
.kachel.kritisch .n{color:var(--fehler)}
.kachel.warnung .n{color:var(--warn)}
.kachel.gut .n{color:var(--gut)}

.tabellenrahmen{overflow-x:auto;border:1px solid var(--linie);border-radius:5px;
  background:var(--flaeche);margin:0 0 16px}
table.tabelle{border-collapse:collapse;width:100%;font-size:15.5px}
table.tabelle th,table.tabelle td{
  text-align:left;padding:8px 12px;border-bottom:1px solid var(--linie);vertical-align:top;
}
table.tabelle th{
  font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--schrift3);
  font-weight:600;background:var(--flaeche2);white-space:nowrap;
}
table.tabelle tbody tr:last-child td{border-bottom:none}
table.tabelle tbody tr:hover{background:var(--flaeche2)}

/* ---------- Meldungen ---------- */
.meldung{padding:13px 17px;border-radius:4px;margin:0 0 16px;font-size:15.5px;
  border:1px solid transparent;white-space:pre-wrap}
.meldung.gut{background:var(--gut-hell);border-color:var(--gut);color:var(--gut)}
.meldung.warn{background:var(--warn-hell);border-color:var(--warn);color:var(--warn)}
.meldung.fehler{background:var(--fehler-hell);border-color:var(--fehler);color:var(--fehler)}
.meldung.info{background:var(--akzent-hell);border-color:var(--akzent);color:var(--akzent)}

.marke-hinweis{
  background:var(--warn-hell);border-left:3px solid var(--warn);color:var(--warn);
  padding:10px 14px;border-radius:3px;margin:0 0 10px;font-size:15px;
}
.marke-hinweis.wichtig{background:var(--fehler-hell);border-left-color:var(--fehler);
  color:var(--fehler);font-weight:600}

/* ---------- Schilder ---------- */
.schild{display:inline-block;padding:3px 9px;border-radius:3px;font-size:12.5px;
  font-weight:600;white-space:nowrap;letter-spacing:.02em}
.schild.offen{background:var(--akzent-hell);color:var(--akzent)}
.schild.gesperrt{background:var(--fehler-hell);color:var(--fehler)}
.schild.ruecksprache{background:var(--warn-hell);color:var(--warn)}
.schild.sperrfrist{background:var(--flaeche2);color:var(--schrift3)}
.schild.bestellt{background:var(--gut-hell);color:var(--gut)}
.schild.storniert{background:var(--flaeche2);color:var(--schrift3);text-decoration:line-through}
.schild.faellig{background:var(--fehler-hell);color:var(--fehler)}
/* Der Patient ist kein Status, sondern eine andere Art von Angabe.
   Deshalb umrandet statt gefuellt — er soll sich von den Statusmarken
   unterscheiden lassen, auch ohne den Text zu lesen. */
.schild.patient{background:var(--flaeche);color:var(--akzent);
  border:1px solid var(--akzent);font-weight:600}
.schild.patient .wer{font-weight:400;color:var(--schrift2)}
/* Und in der Positionstabelle die Zelle selbst. */
.tabelle td.fuer-patient{background:var(--akzent-hell)}
/* „kein Preis" ist kein Zahlenwert — es soll auch nicht wie einer aussehen. */
.kein-preis{color:var(--warn);font-size:13.5px;white-space:nowrap;
  border-bottom:1px dotted var(--warn);cursor:help}
/* Aufzaehlung nach einer Sammelaktion — mehrspaltig, damit ein Dutzend
   Namen nicht die halbe Seite fuellt. */
.sammelliste{margin:8px 0 14px;padding-left:20px;columns:2;column-gap:28px}
.sammelliste li{margin:0 0 3px;break-inside:avoid}
@media (max-width:700px){ .sammelliste{columns:1} }

/* ---------- Bedienelemente ---------- */
.knopf{
  display:inline-block;padding:8px 15px;border:1px solid var(--akzent);
  background:var(--akzent);color:#fff;border-radius:4px;font-size:15.5px;
  font-family:inherit;cursor:pointer;text-decoration:none;line-height:1.3;
}
.knopf:hover{filter:brightness(1.12)}
.knopf.leise{background:transparent;color:var(--schrift2);border-color:var(--linie-stark)}
.knopf.leise:hover{background:var(--flaeche2);filter:none}
.knopf.gefahr{background:var(--fehler);border-color:var(--fehler)}
.knopf.klein{padding:6px 12px;font-size:14.5px}
.knopf:disabled{opacity:.45;cursor:default;filter:none}

.feld{display:flex;align-items:center;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.feld label{width:170px;flex:none;color:var(--schrift2);font-size:15px;font-weight:500}
.feld input[type=text],.feld input[type=number],.feld input[type=password],
.feld select,.feld textarea{
  flex:1;min-width:150px;padding:7px 10px;border:1px solid var(--linie-stark);
  border-radius:4px;font-size:15.5px;font-family:inherit;background:var(--flaeche);
  color:var(--schrift);
}
.feld textarea{min-height:64px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:2px solid var(--akzent);outline-offset:-1px;border-color:var(--akzent)}
.feld .einheit{color:var(--schrift3);font-size:14.5px}
.ankreuz{display:flex;gap:9px;align-items:flex-start;margin:0 0 12px;font-size:15.5px;cursor:pointer}
.ankreuz input{margin-top:3px;flex:none}

.werkzeugleiste{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.werkzeugleiste input[type=search],.werkzeugleiste input[type=text],
.werkzeugleiste select{
  padding:7px 10px;border:1px solid var(--linie-stark);border-radius:4px;
  font-size:15.5px;font-family:inherit;background:var(--flaeche);color:var(--schrift);
}
.werkzeugleiste input[type=search]{min-width:230px}

/* ---------- Aufklappbares ---------- */
details.block{background:var(--flaeche);border:1px solid var(--linie);
  border-left:3px solid var(--linie-stark);border-radius:5px;margin:0 0 10px;
  box-shadow:var(--schatten)}
details.block[open]{border-left-color:var(--akzent)}
details.block.bereit{border-left-color:var(--gut)}
details.block.wartet{border-left-color:var(--warn)}
details.block.problem{border-left-color:var(--fehler)}
/* Wartet ein Patient darauf, sticht das alles andere aus — deshalb steht
   die Regel NACH den Statusfarben und traegt breiter auf. So faellt in
   einer langen Liste sofort auf, wo ein Mensch auf sein Medikament
   wartet. Gilt in den Teamwuenschen wie im Bestellbedarf. */
details.block.fuerpatient,
details.block.patientenpaket{border-left-color:var(--akzent);
  border-left-width:4px}
details.block > summary{
  padding:12px 16px;cursor:pointer;display:flex;align-items:baseline;gap:12px;
  flex-wrap:wrap;list-style:none;
}
details.block > summary::-webkit-details-marker{display:none}
details.block > summary:hover{background:var(--flaeche2)}
summary .titel{font-weight:600;flex:1;min-width:180px}
summary .wert{font-variant-numeric:tabular-nums;font-weight:600}
summary .neben{color:var(--schrift3);font-size:14.5px;font-variant-numeric:tabular-nums}
.blockinhalt{padding:0 16px 16px;border-top:1px solid var(--linie)}

.liste{margin:0 0 12px;padding-left:20px}
.liste li{margin:0 0 5px}

.leer{padding:34px 20px;text-align:center;color:var(--schrift3)}

/* ---------- Ausdruck ---------- */
@media print{
  .kopfleiste,.werkzeugleiste,.knopf,.nichtdrucken{display:none !important}
  body{background:#fff;font-size:12pt}
  .inhalt{padding:0;max-width:none}
  .karte{border:none;box-shadow:none;padding:0}
  table.tabelle th{background:#eee}
  a{color:inherit;text-decoration:none}
}

@media (max-width:720px){
  .feld label{width:100%}
  .kopfleiste .innen{min-height:auto;padding:8px 14px}
  .inhalt{padding:16px 14px 60px}
}

/* ---------- Artikelsuche zum Tippen ---------- */
.suchfeld{position:relative;flex:1;min-width:220px}
.suchfeld input[type=text]{width:100%;padding:7px 10px;
  border:1px solid var(--linie-stark);border-radius:4px;
  font-size:14px;font-family:inherit;background:var(--flaeche);color:var(--schrift)}
.suchfeld input[type=text]:focus{outline:2px solid var(--akzent);outline-offset:-1px;
  border-color:var(--akzent)}
.suchtreffer{position:absolute;top:100%;left:0;right:0;z-index:40;
  max-height:300px;overflow-y:auto;background:var(--flaeche);
  border:1px solid var(--linie-stark);border-radius:0 0 4px 4px;
  box-shadow:0 8px 24px -10px rgba(17,26,31,.35)}
.suchzeile{display:flex;gap:10px;align-items:baseline;padding:7px 10px;
  border-bottom:1px solid var(--linie);cursor:pointer;font-size:15.5px}
.suchzeile:last-child{border-bottom:none}
.suchzeile:hover,.suchzeile.aktiv{background:var(--akzent-hell)}
.suchzeile .sname{flex:1;min-width:0}
.suchzeile .szusatz{color:var(--schrift3);font-size:14px;white-space:nowrap}
.suchzeile mark{background:#FFE9A8;color:inherit;padding:0 1px;border-radius:2px}
.suchleer{padding:11px 12px;color:var(--schrift3);font-size:14.5px}