/* Google Fonts werden ueber <link rel="stylesheet"> in index.html
   geladen (mit preconnect), nicht mehr per @import hier - @import
   erzwingt einen zusaetzlichen sequenziellen Lade-Hop (erst
   styles.css laden+parsen, dann erst den Font-Import entdecken). */

:root{
color-scheme: light;
--bg: #F3EDE4;
--surface: #FFFFFF;
--surface-sunken: #EAE2D4;
--ink: #2E3D3D;
--ink-muted: #6B6255;
--sage: #C0684A;
--sage-deep: #2E3D3D;
--sage-tint: #F7EDE9;
--petrol: #2E3D3D; /* einheitlich mit Übersicht, Handbuch, Kopfzeilen */
--status-ok: #2DC937;
--status-ok-tint: #E1F5E2;
--brick: #E60000;
--brick-tint: #FBDADA;
--ochre: #FFC107;
--ochre-tint: #FFF3CD;
--line: #E7E1DA;
--radius: 6px;
--shadow: 0 1px 2px rgba(30,42,52,0.06), 0 6px 20px rgba(30,42,52,0.05);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
background: var(--bg);
color: var(--ink);
font-family: 'Public Sans', sans-serif;
-webkit-font-smoothing: antialiased;
}
.shell{
max-width: 1280px; margin: 0 auto; padding: 28px 24px 80px; box-sizing: border-box;
min-height: 100vh; display: flex; flex-direction: column;
}

.topbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom: 22px; }
.brand-eyebrow{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 2px; }
.brand-title{ font-family:'Source Serif 4', serif; font-optical-sizing:auto; font-weight:600; font-size: 30px; margin:0; color: var(--sage-deep); }
.status-pill{
display:inline-flex; align-items:center; gap:8px;
background: var(--surface); border:1px solid var(--line);
border-radius:4px; padding: 8px 16px; font-size: 13px; font-weight:600; color: var(--ink-muted);
box-shadow: var(--shadow);
}
.status-dot{ width:9px; height:9px; border-radius:50%; background: var(--status-ok); flex-shrink:0; }
.status-pill.warn .status-dot{ background: var(--ochre); }
.status-pill.crit .status-dot{ background: var(--brick); }

.topbar-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.actor-dropdown{ position:relative; }
.actor-select-btn{
background: var(--sage-tint); border:1px solid var(--line); color: var(--sage-deep);
border-radius:3px; padding: 8px 14px; font-size: 12.5px; font-weight:600;
font-family:'Public Sans'; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.actor-select-btn:after{ content:'▾'; font-size:10px; }
.actor-select-btn.needs-selection{ border-color: var(--brick); background: var(--brick-tint); }
.actor-select-menu{
display:none; position:absolute; top:calc(100% + 6px); right:0; min-width:180px; z-index:50;
background: var(--surface); border:1px solid var(--line); border-radius:6px;
box-shadow: var(--shadow); overflow:hidden;
}
.actor-select-menu.open{ display:block; }
.actor-select-menu button{
display:block; width:100%; text-align:left; border:none; background:none; cursor:pointer;
padding:10px 14px; font-family:'Public Sans'; font-size:13.5px; color: var(--ink);
}
.actor-select-menu button:hover{ background: var(--surface-sunken); }
.actor-select-menu button.current{ font-weight:700; color: var(--sage-deep); }
.actor-select-menu .empty-note{ padding:10px 14px; font-size:12.5px; color: var(--ink-muted); }

.staff-panel{ display:none; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:16px; margin-bottom:18px; box-shadow: var(--shadow); }
.staff-panel h2{ margin:0 0 12px; font-family:'Source Serif 4', serif; font-size:16px; font-weight:600; color: var(--sage-deep); }
.staff-row{ display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--line); }
.staff-row:last-of-type{ border-bottom:none; }
.staff-row span{ flex:1; font-size:14px; }
.staff-row button{ border:none; background:none; color: var(--ink-muted); cursor:pointer; font-size:12.5px; text-decoration:underline; }
.staff-row button:hover{ color: var(--brick); }
.staff-add-row{ display:flex; gap:8px; margin-top:12px; }
.staff-add-row input{ flex:1; border:1px solid var(--line); border-radius:4px; padding:8px 10px; font-family:'Public Sans'; font-size:14px; }
.staff-add-row button{ border:none; background: var(--sage); color:#fff; border-radius:3px; padding:8px 14px; font-size:13.5px; font-weight:600; cursor:pointer; }

.privacy-panel{ display:none; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:16px; margin-bottom:18px; box-shadow: var(--shadow); font-size: 13.5px; line-height:1.6; color: var(--ink); }
.privacy-panel h3{ margin:0 0 10px; font-family:'Source Serif 4', serif; font-size:16px; font-weight:600; color: var(--sage-deep); }
.privacy-panel p{ margin: 0 0 10px; }
.privacy-panel ul{ margin: 0 0 10px; padding-left: 20px; }
.app-footer{
display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px;
margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line);
font-size:13px; color: var(--ink-muted);
}
.footer-brand{
display:inline-flex; align-items:center; gap:6px;
font-family:'Source Serif 4', serif; font-weight:600; font-size:14px; color: var(--sage);
}
.footer-brand-vacc{ color: var(--sage-deep); }
.footer-brand sup{ font-size:9px; margin-left:1px; opacity:0.55; }
.footer-copyright{ margin-left:auto; }

.scroll-top-btn{
position:fixed; bottom:22px; right:22px; width:42px; height:42px; border-radius:50%;
background: var(--surface); border:1px solid var(--line); color: var(--ink-muted);
font-size:18px; cursor:pointer; box-shadow: var(--shadow); opacity:0; pointer-events:none;
transition: opacity .2s ease; z-index:40;
}
.scroll-top-btn.show{ opacity:0.85; pointer-events:auto; }
.scroll-top-btn:hover{ opacity:1; color: var(--sage-deep); }

.refresh-btn{
background: var(--surface); border:1px solid var(--line); color: var(--ink);
border-radius: 999px; width:34px; height:34px; padding:0; flex-shrink:0;
font-size:24px; line-height:1; cursor:pointer; box-shadow: var(--shadow);
display:inline-flex; align-items:center; justify-content:center;
transition: color .2s ease;
}
.refresh-btn:hover{ color: var(--sage-deep); }
.refresh-btn.spinning{ color: var(--sage-deep); animation: refresh-spin .7s linear infinite; }

.pull-refresh-indicator{
position:fixed; top:10px; left:50%; transform: translate(-50%, -100%);
width:38px; height:38px; border-radius:50%;
background: var(--surface); border:1px solid var(--line); box-shadow: var(--shadow);
display:flex; align-items:center; justify-content:center; color: var(--ink);
font-size:26px; line-height:1;
z-index:60; opacity:0; pointer-events:none;
transition: opacity .15s ease;
}
.pull-refresh-indicator.show{ opacity:1; }
.pull-refresh-indicator.ready{ color: var(--sage-deep); }
.pull-refresh-indicator.spinning{ animation: refresh-spin .7s linear infinite; color: var(--sage-deep); }

@keyframes refresh-spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

.scanner-overlay{
display:none; position:fixed; inset:0; background:rgba(30,42,52,0.75); z-index:100;
align-items:center; justify-content:center; padding:20px;
}
.scanner-overlay.show{ display:flex; }
.scanner-box{ background: var(--surface); border-radius:6px; padding:16px; width:100%; max-width:420px; }
.scanner-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-weight:600; }
.scanner-close{ background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color: var(--ink-muted); padding:10px; margin:-10px; border-radius:3px; }
.scanner-actor-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; background: var(--surface-sunken); border-radius:4px; padding:8px 10px; margin-bottom:10px; font-size:13px; }
.scanner-actor-row.needs-selection{ background: var(--brick-tint); color:#5E2417; }
.scanner-actor-row select{ border:1px solid var(--line); border-radius:4px; padding:5px 7px; font-family:'Public Sans'; font-size:13px; max-width:60%; }
/* Kamerabild flach halten (Seitenverhältnis 4:3 quer statt Hochformat), damit
   auf kleinen Handys (z. B. iPhone SE) Status, Ergebnis und Knöpfe ohne Scrollen
   sichtbar bleiben. Der DataMatrix-Code wird trotzdem in voller Auflösung
   gelesen (kameraConstraints in scanner.js) - nur die Anzeige ist kleiner. */
#scannerVideo{ display:block; width:100%; aspect-ratio:4 / 3; max-height:min(240px, 32vh); border-radius:6px; background:#000; object-fit:cover; }
/* Ergebnis wird angezeigt (Kamera pausiert): Kamerabild und USB-Feld
   ausblenden, siehe setScannerActive in scanner.js. */
.scanner-box.scan-paused #scannerVideo,
.scanner-box.scan-paused .usb-scanner-row{ display:none; }
/* Kleines Display: Fenster darf die ganze Höhe nutzen und scrollt nur im
   Notfall innerhalb des Fensters. */
.scanner-box{ max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; }
@media (max-height: 700px){
.scanner-overlay{ padding:12px; }
.scanner-box{ padding:12px; }
.scanner-actor-row{ margin-bottom:8px; padding:6px 10px; }
}
.scanner-status{ text-align:center; font-size:13px; color: var(--ink-muted); margin-top:10px; }

.usb-scanner-row{ margin-top:10px; }
.usb-scanner-row input{
width:100%; border:1px solid var(--line); border-radius:4px; padding:9px 10px;
font-family:'Public Sans'; font-size:13.5px; background: var(--surface-sunken);
}
.usb-scanner-row input:focus{ outline:2px solid var(--sage); outline-offset:1px; background: var(--surface); }
.scanner-match{ margin-top:10px; }
.scanner-match .match-row{ background: var(--sage-tint); border-radius:6px; padding:12px; text-align:center; }
.scanner-match .match-row p{ margin:0 0 8px; font-size:14px; }
.scanner-match .match-row button{ border:none; border-radius:3px; padding:8px 16px; font-weight:600; cursor:pointer; color:#fff; }
.scanner-match .match-row button.in{ background: var(--status-ok); }
.scanner-match .match-row button.out{ background: var(--brick); }
.scanner-match .link-row{ background: var(--ochre-tint); border-radius:6px; padding:12px; }
.scanner-match .link-row p{ margin:0 0 8px; font-size:13.5px; }
.scanner-match .link-row select{ width:100%; padding:8px; border-radius:4px; border:1px solid var(--line); margin-bottom:8px; }
.scanner-match .link-row button{ border:none; background: var(--sage); color:#fff; border-radius:3px; padding:8px 14px; font-weight:600; cursor:pointer; margin-right:6px; }
.app-footer button{ background:none; border:none; color: var(--ink-muted); font-size:13px; text-decoration:underline; cursor:pointer; padding:0; }

.undo-bar{ display:none; }
.undo-bar.show{
display:flex; align-items:center; gap:10px; background: var(--surface); border:1px solid var(--line);
border-radius:6px; padding: 8px 10px 8px 14px; font-size:13px; margin-bottom:16px; width:fit-content;
box-shadow: var(--shadow);
}
.undo-bar button{ background:none; border:none; color: var(--sage-deep); font-weight:600; cursor:pointer; font-size:13px; text-decoration:underline; }
.undo-bar .undo-close{
text-decoration:none; font-weight:400; color: var(--ink-muted); font-size:16px; line-height:1;
padding:2px 6px; border-radius:50%;
}
.undo-bar .undo-close:hover{ background: var(--surface-sunken); color: var(--ink); }

.alert-banner{
display:none; flex-direction:column; flex:1 1 auto; min-width:0;
background: var(--sage-deep); border:none; color: var(--bg);
border-radius: 6px; padding: 14px 18px; margin:0; font-size: 14px;
}
.alert-banner-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:4px; }
.alert-banner-eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; opacity:0.55; }
.alert-banner-ok-count{ display:flex; align-items:center; gap:6px; font-size:12px; flex-shrink:0; }
.alert-banner-ok-text{ opacity:0.6; }
.alert-banner-allok{ font-size:15px; padding:10px 0 4px; opacity:.9; }
/* Ohne Bestandskasten (noch keine Medikamente) füllt die Scan-Station die Zeile. */
.top-row > .alert-banner[style*="none"] + .station-tile{ flex:1 1 auto; margin-left:0; }
.jump-chips{ display:flex; flex-direction:column; }
.jump-chip{
display:flex; align-items:center; gap:9px; width:100%;
background:none; border:none; border-bottom:1px solid rgba(243,237,228,0.1);
color: var(--bg); cursor:pointer; text-align:left; border-radius:0;
padding:6px 0; font-size:13px; font-weight:500; font-family:'Public Sans';
}
.jump-chips .jump-chip:last-child{ border-bottom:none; }
.jump-chip:hover .jump-chip-name{ text-decoration:underline; }
.jump-chip-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.jump-chip.crit .jump-chip-dot{ background: var(--brick); }
.jump-chip.warn .jump-chip-dot{ background: var(--ochre); }
.jump-chip-dot.ok{ background: var(--status-ok); }
.jump-chip-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jump-chip-detail{ opacity:0.55; font-weight:400; }
.jump-chip-status{ margin-left:auto; padding-left:12px; font-size:11.5px; font-weight:600; opacity:0.7; flex-shrink:0; white-space:nowrap; }

@keyframes card-highlight-pulse{
0%{ box-shadow: 0 0 0 0 rgba(230,0,0,0.45); }
70%{ box-shadow: 0 0 0 10px rgba(230,0,0,0); }
100%{ box-shadow: 0 0 0 0 rgba(230,0,0,0); }
}
.card.highlight-jump{ animation: card-highlight-pulse 1s ease-out 2; }

.top-row{ display:flex; gap:16px; align-items:stretch; margin-bottom:18px; }
.top-row > .station-tile{ margin-left:auto; }
.hero-top{ margin:0 0 24px; display:flex; gap:16px; align-items:stretch; }
.hero-top > .hero-actions-row{ flex:1 1 auto; min-width:0; }
.hero-actions-row{
margin:0; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
background: var(--surface); border:1px solid var(--line); border-radius: 6px;
padding:16px; box-shadow: var(--shadow);
}
.search-bar-row{ margin:20px 0 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.search-input-wrap{ position:relative; flex:0 0 230px; }
.search-bar-row > .pill-btn{ flex:0 0 230px; }
.search-clear-btn{
display:none; position:absolute; right:10px; top:50%; transform:translateY(-50%);
background:none; border:none; color:var(--ink-muted); font-size:18px; line-height:1;
cursor:pointer; padding:4px 6px; width:auto;
}
.search-clear-btn:hover{ color:var(--ink); }
.search-clear-btn.show{ display:block; }
.search-input-wrap input{
width:100%; box-sizing:border-box; padding:12px 36px 12px 14px; border-radius: 4px;
border:1px solid var(--line); background: var(--surface); box-shadow: var(--shadow);
font-family:'Public Sans'; font-size:15px;
}
.search-input-wrap input:focus{ outline:2px solid var(--sage); outline-offset:1px; }
.quick-entry-toggle{
background:none; border:none; color: var(--ink-muted); font-size:13px; text-decoration:underline;
cursor:pointer; width:auto; padding:0; white-space:nowrap;
}
.quick-entry{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 20px; }
.quick-entry-label{ font-size:12px; color:var(--ink-muted); margin: 0 0 8px; }
.quick-entry-row{ display:flex; gap:10px; }
.quick-entry-row input{
flex:1; border:1px solid var(--line); border-radius: 4px; padding: 12px 14px;
font-family:'Public Sans'; font-size:15px; background: var(--bg); color: var(--ink);
}
.quick-entry-row input:focus{ outline:2px solid var(--sage); outline-offset:1px; }
.quick-entry-row button{
border:none; background: var(--sage); color:#fff; font-weight:600; font-size:14px;
border-radius:3px; padding: 0 20px; cursor:pointer; transition: background .15s ease;
}
.quick-entry-row button:hover{ background: var(--sage-deep); }
.quick-entry-row button:disabled{ background: var(--ink-muted); cursor:default; }
.quick-entry-hint{ font-size: 12.5px; color: var(--ink-muted); margin: 8px 2px 0; }
.quick-feedback{ font-size: 13.5px; margin: 10px 2px 0; padding: 8px 10px; border-radius: 4px; display:none; }
.quick-feedback.ok{ display:block; background: var(--sage-tint); color: var(--sage-deep); }
.quick-feedback.err{ display:block; background: var(--brick-tint); color:#5E2417; }

.ambiguous-box{ display:none; background: var(--ochre-tint); border-radius:6px; padding:10px; margin-top:8px; font-size:13.5px; }
.ambiguous-box.show{ display:block; }
.ambiguous-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 0; }
.ambiguous-row span{ flex:1; min-width:160px; }
.ambiguous-row button{
border:none; border-radius:3px; padding:6px 12px; font-size:12.5px; font-weight:600; cursor:pointer; color:#fff;
}
.ambiguous-row button.in{ background: var(--status-ok); }
.ambiguous-row button.out{ background: var(--brick); }

.action-tiles{ display:flex; gap:16px; margin-bottom: 18px; flex-wrap:wrap; }
.action-tile{
flex:0 1 auto; min-width:200px;
padding:4px 4px;
}
.action-tile-title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color: var(--ink-muted); margin:0 0 8px; }
.action-link{
display:block; width:100%; text-align:left; background:none; border:none;
font-family:'Public Sans'; font-size:13px; font-weight:500; color: var(--ink-muted);
padding:6px 8px; margin:0 -8px; border-radius:4px; cursor:pointer; white-space:nowrap;
transition: background .15s ease, color .15s ease;
}
.action-link:hover{ background: var(--surface-sunken); color: var(--ink); }
.hero-actions-row .pill-btn{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.hero-actions-row .pill-btn + .pill-btn{ margin-top:0; }
/* Zweite Reihe: Impfausweis-Nachtrag und GDT-Export */
.hero-actions-row .row-break{ flex-basis:100%; height:0; }
.pill-btn.scan-in{ color:#1E7A26; }
.pill-btn.scan-out{ color:#A80000; }
.scan-icon{ flex-shrink:0; }
.station-tile{
flex:0 0 300px; display:flex; align-items:center; gap:14px; text-align:left;
background: var(--petrol); color:#fff; border:none; border-radius: 6px;
padding:16px 18px; box-shadow: var(--shadow); cursor:pointer; font-family:'Public Sans';
transition: background .15s ease, transform .15s ease;
}
.station-tile:hover{ background:#3A4C4C; }
.station-tile:active{ transform:translateY(1px); }
.station-tile:focus-visible{ outline:3px solid var(--sage); outline-offset:2px; }
.station-tile-icon{ flex-shrink:0; opacity:.95; }
.station-tile-text{ display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.station-tile-title{ font-size:16px; font-weight:700; letter-spacing:.01em; }
.station-tile-sub{ font-size:12.5px; line-height:1.35; color:rgba(255,255,255,.82); }
.station-tile-arrow{ font-size:18px; opacity:.8; transition: transform .15s ease; }
.station-tile:hover .station-tile-arrow{ transform:translateX(3px); }
@media (max-width:760px){
.hero-top, .top-row{ flex-direction:column; }
.station-tile{ flex:0 0 auto; }
.top-row > .station-tile{ margin-left:0; }
}
/* Breite Bildschirme (Tablet quer, Desktop): alle vier Knöpfe in einer Reihe */
@media (min-width:1100px){
.hero-actions-row .row-break{ display:none; }
}
@media (max-width:600px){
.action-tiles{ flex-direction:column; }
}

.add-choice{ display:none; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:16px; margin-bottom:18px; box-shadow: var(--shadow); }
.add-choice.show{ display:block; }
.add-choice-label{ margin:0 0 10px; font-size:13.5px; color: var(--ink-muted); }
.add-choice-buttons{ display:flex; gap:10px; }
.add-choice-buttons button{
border:none; background: var(--sage); color:#fff;
font-family:'Public Sans'; font-size:14px; font-weight:600; padding:10px 18px; border-radius:3px; cursor:pointer;
}
.add-choice-buttons #addChoiceManual{ background: var(--surface-sunken); color: var(--ink); }

.add-form{ display:none; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:16px; margin-bottom:18px; box-shadow: var(--shadow); }
.add-form h3{ margin:0 0 12px; font-family:'Source Serif 4', serif; font-size:17px; font-weight:600; color: var(--sage-deep); }
.add-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:10px; }
.add-grid .full-row{ grid-column: 1 / -1; max-width: 220px; }
.add-grid label{ font-size:11.5px; color: var(--ink-muted); display:block; margin-bottom:4px; }
.add-grid input{ width:100%; border:1px solid var(--line); border-radius:4px; padding:9px 10px; font-family:'Public Sans'; font-size:14px; }
.add-form-actions{ display:flex; gap:8px; margin-top:12px; }
.add-form-actions button{ border:none; border-radius:3px; padding:9px 16px; font-size:13.5px; font-weight:600; cursor:pointer; }
.add-form-actions .save{ background: var(--sage); color:#fff; }
.add-form-actions .cancel{ background: var(--surface-sunken); color: var(--ink); }

.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:14px; margin-bottom: 24px; align-items:start; }
.category-button-bar{
grid-column: 1 / -1; display:flex; flex-wrap:wrap; gap:8px; margin: 6px 0 4px;
}
.category-toggle-btn{
font-family:'Public Sans'; font-size:15.5px; font-weight:700; color: var(--sage);
background: var(--surface); border:1px solid var(--line); border-radius: 3px;
padding:10px 18px; cursor:pointer; transition: background .15s, border-color .15s;
}
.category-toggle-btn:hover{ border-color: var(--sage); }
.category-toggle-btn.open{ background: var(--sage); color:#fff; border-color: var(--sage); }
.category-section{
grid-column: 1 / -1; display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap:16px; margin-bottom:4px;
}
.card{
background: var(--surface); border:1px solid var(--line); border-radius: 6px;
padding: 16px; box-shadow: var(--shadow); position:relative;
}
.card.crit{ border-color:#D9BBAF; }
.card.warn{ border-color:#E3CE9E; }
.card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:10px; }
.card-head-text{ min-width:0; }
.card-edit-btn{ flex-shrink:0; }
.card-name{ font-weight:600; font-size:15px; line-height:1.3; overflow-wrap:break-word; }
.card-unit{ font-size:12px; color:var(--ink-muted); margin-top:2px; }
.card-edit-btn{ background:none; border:none; color: var(--ink-muted); cursor:pointer; font-size:12px; padding:6px 8px; }
.card-edit-btn:hover{ color: var(--ink); }
.edit-panel{ display:none; background: var(--surface-sunken); border-radius:6px; padding:12px; margin-top:10px; }
.edit-panel.show{ display:block; }
.edit-panel-row{ margin-bottom:8px; }
.edit-panel-row label{ display:block; font-size:11.5px; color: var(--ink-muted); margin-bottom:3px; }
.edit-panel-row input{ width:100%; border:1px solid var(--line); border-radius:4px; padding:7px 9px; font-family:'Public Sans'; font-size:13.5px; }
.edit-panel-actions{ display:flex; gap:8px; margin-top:10px; }
.edit-panel-actions button{ border:none; border-radius:3px; padding:7px 12px; font-size:12.5px; font-weight:600; cursor:pointer; }
.edit-panel-actions .save{ background: var(--sage); color:#fff; }
.edit-panel-actions .cancel{ background: var(--surface); color: var(--ink); border:1px solid var(--line); }
.edit-panel-actions .delete{ background:none; color: var(--brick); margin-left:auto; text-decoration:underline; }

.pillbar{ display:flex; gap:3px; margin: 10px 0 10px; flex-wrap:wrap; }
.pillbar span{ width:9px; height:16px; border-radius: 5px; background: var(--surface-sunken); flex-shrink:0; }
.pillbar span.filled{ background: var(--status-ok); }
.card.warn .pillbar span.filled{ background: var(--ochre); }
.card.crit .pillbar span.filled{ background: var(--brick); }

.card-numbers{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.card-stock{ font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:26px; color: var(--ink); }
.card-threshold{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; color: var(--ink-muted); }
.card-expiry{ font-size:12px; color: var(--ink-muted); margin-bottom:10px; }
.card-expiry.expiring{ color: #8A6300; font-weight:600; }
.card-expiry.expired{ color: var(--brick); font-weight:600; }

.card-numbers-ab{ display:flex; gap:18px; margin-bottom:12px; }
.card-stock-block{ flex:1; }
.card-stock-label-small{ font-size:10.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:2px; }
.card-stock-vorrat{ font-size:20px; color: var(--ink-muted); }
.card-status-label.crit{ color: var(--brick); }
.card-status-label.warn{ color: #8A6300; }

.action-eyebrow{
font-family:'IBM Plex Mono', monospace; font-size:10px; font-weight:600;
color:var(--ink-muted); text-transform:uppercase; letter-spacing:.14em;
margin:16px 0 8px; padding-top:12px; border-top:1px solid var(--line);
}
.action-grid{ display:grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap:8px; }
.action-btn{
width:100%; box-sizing:border-box;
border:none; background: #EBE7E2; color: #1E2A34;
font-family:'Public Sans'; font-size:13px; font-weight:600; text-align:center;
border-radius:3px; padding:9px 6px; cursor:pointer; transition: background .15s;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.action-btn:hover{ background: #DDD8D1; }

/* Eigenständige Pill-Buttons außerhalb der Medikamentenkarten (z. B.
GDT-Export: "Alle herunterladen" / "als übertragen markieren") - gleiche
Optik wie .action-btn, aber ohne width:100% (die Buttons stehen frei,
nicht in einem Karten-Grid) und mit etwas mehr seitlichem Padding. */
.pill-btn{
display:inline-block; border:none; background: #EBE7E2; color: #1E2A34;
font-family:'Public Sans'; font-size:13px; font-weight:600; text-align:center;
border-radius:3px; padding:9px 18px; cursor:pointer; transition: background .15s;
}
.pill-btn:hover{ background: #DDD8D1; }
.pill-btn + .pill-btn{ margin-top:8px; }

.transfer-row{ display:none; gap:8px; margin-top:10px; }
.transfer-row.show{ display:flex; }
.transfer-row input{ width:80px; border:1px solid var(--line); border-radius:4px; padding:6px 8px; font-family:'IBM Plex Mono'; }
.transfer-row button{ border:none; background: var(--sage); color:#fff; border-radius:3px; padding:6px 10px; font-size:12.5px; cursor:pointer; }
.auffuellen-box{ width:100%; display:flex; flex-direction:column; gap:6px; font-size:12.5px; }
.auffuellen-title{ font-weight:600; }
.auffuellen-box label{ font-size:10.5px; color:var(--ink-muted); }
.auffuellen-box select{ width:100%; border:1px solid var(--line); border-radius:4px; padding:6px 8px; font-size:12.5px; background:var(--surface); color:var(--ink); }
.auffuellen-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.auffuellen-hint{ font-size:11.5px; color:var(--ink-muted); }

.stepper{ display:flex; align-items:center; gap:8px; }
.stepper button{
width:34px; height:34px; border-radius:3px; border:1px solid var(--line); background: var(--bg);
font-size:17px; font-weight:600; cursor:pointer; color: var(--ink);
}
.stepper button:hover{ background: var(--surface-sunken); }
.stepper .adjust-link{ margin-left:auto; background:none; border:none; color: var(--ink-muted); font-size:12px; cursor:pointer; text-decoration:underline; width:auto; height:auto; }

.charge-row{ display:none; flex-wrap:wrap; gap:8px; margin-top:10px; align-items:center; }
.charge-row.show{ display:flex; }
.charge-row input[type="text"]{ width:110px; border:1px solid var(--line); border-radius:4px; padding:6px 8px; font-family:'IBM Plex Mono'; }
.charge-row input[id^="chargeExpiry-"]{ width:120px; border:1px solid var(--line); border-radius:4px; padding:6px 8px; font-family:'IBM Plex Mono'; }
.charge-row input[type="number"]{ width:56px; border:1px solid var(--line); border-radius:4px; padding:6px 8px; font-family:'IBM Plex Mono'; }
.charge-row button{ border:none; background: var(--sage); color:#fff; border-radius:3px; padding:6px 10px; font-size:12.5px; cursor:pointer; }
.charge-row button.cancel{ background:none; color: var(--ink-muted); text-decoration:underline; }
.charge-row-hint{ font-size:11px; color: var(--ink-muted); width:100%; margin:-2px 0 0; }

.card-status-label{ font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color: #157A1F; }
.card.warn .card-status-label{ color: #8A6300; }
.card.crit .card-status-label{ color: var(--brick); }

/* Zwei-Spalten-Raster: spart auf breiteren Screens deutlich Platz (zwei
   Medikamente nebeneinander statt eine lange Liste). auto-fit mit
   minmax(...) fällt automatisch auf eine Spalte zurück, sobald der
   verfügbare Platz (z. B. auf dem Smartphone) für zwei Karten nicht mehr
   reicht - keine feste Media-Query-Grenze nötig. */
.inventur-inline{ display:none; margin-top:10px; }
.inventur-inline-box{ background:var(--surface-sunken); border-radius:10px; padding:10px; }
.inventur-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:10px 14px; }
.inventur-med{ background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:8px 10px; }
/* Medikamentenname wie die Kategorie-Überschrift im Bestellformular-PDF:
   gleiche Akzentfarbe (--sage entspricht dort rgb(0.76,0.29,0.18)), knapp
   und fett, keine große Kartenoptik. */
.inventur-med-name{ font-weight:700; font-size:12px; margin-bottom:4px; color:var(--sage-deep); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inventur-table{ width:100%; border-collapse:collapse; font-size:11px; table-layout:fixed; }
/* Header-Leiste im Beige-Ton des PDFs (dort rgb(0.95,0.93,0.90), hier
   --surface-sunken - bewusst dieselbe Variable wie im PDF-Farbschema). */
.inventur-table th{ background:var(--surface-sunken); text-align:left; padding:3px 4px; font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--ink-muted); }
.inventur-table td{ padding:3px 4px; border-bottom:1px solid var(--line); vertical-align:middle; word-break:break-word; }
.inventur-table tr:last-child td{ border-bottom:none; }
.inventur-table td.inventur-col-batch{ color:var(--ink); }
.inventur-table td.inventur-col-soll{ color:var(--ink-muted); font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-align:center; }
.inventur-table input[type="number"]{ width:100%; max-width:42px; box-sizing:border-box; padding:2px 3px; border:1px solid var(--line); border-radius:4px; font-family:'Public Sans'; font-size:11px; background:var(--bg); color:var(--ink); }
.inventur-table input[type="number"]:focus{ outline:2px solid var(--sage); outline-offset:1px; }
/* Gruppen-Überschrift je Kategorie (wie in der Hauptansicht) und
   Varianten-Abschnitte (Einzeldosis / Sammelpackung) innerhalb einer Kachel. */
.inventur-category{ font-weight:700; font-size:12.5px; color:var(--ink); margin:14px 0 6px 0; padding-bottom:3px; border-bottom:1px solid var(--line); }
.inventur-category:first-of-type{ margin-top:0; }
.inventur-variant-head{ font-size:10.5px; font-weight:600; color:var(--ink-muted); margin:6px 0 2px 0; }
.inventur-variant-empty{ font-size:11px; color:var(--ink-muted); font-style:italic; margin:0 0 4px 0; }
.inventur-add-btn{ background:none; border:1px dashed var(--line); color:var(--ink-muted); font-size:11px; padding:3px 8px; border-radius:4px; cursor:pointer; margin-top:4px; font-family:'Public Sans'; }
.inventur-add-btn:hover{ color:var(--ink); border-color:var(--ink-muted); }
/* Neue Charge: Kopfzeile (Chargennummer, MHD) in voller Breite über den Mengen. */
.inventur-table tr.inventur-newhead td{ background:var(--surface-sunken); border-bottom:none; padding:5px 4px 2px 4px; }
.inventur-new-batch, .inventur-new-expiry{ box-sizing:border-box; padding:2px 4px; border:1px solid var(--line); border-radius:4px; font-family:'Public Sans'; font-size:11px; background:var(--bg); color:var(--ink); }
.inventur-new-batch{ width:46%; }
.inventur-new-expiry{ width:30%; }
.inventur-new-remove{ background:none; border:none; color:var(--ink-muted); font-size:15px; line-height:1; cursor:pointer; padding:0 4px; vertical-align:middle; }
.inventur-new-label{ font-size:10px; font-style:italic; }
.inventur-table tr.inventur-row-error td{ background:var(--brick-tint); }
.inventur-row-msg{ color:var(--brick); font-size:10.5px; font-weight:600; margin-top:3px; }
.inventur-sum{ font-size:10.5px; color:var(--ink-muted); margin-top:6px; }
.inventur-sum-same{ color:var(--sage-deep); }
.inventur-sum-diff{ color:var(--brick); font-weight:600; }

.log-panel{ display:none; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:16px; box-shadow: var(--shadow); }
.log-panel h2{ margin:0 0 10px; font-family:'Source Serif 4', serif; font-size:16px; font-weight:600; color: var(--sage-deep); }
.log-entry{ font-size:13px; padding:8px 0; border-bottom:1px solid var(--line); color: var(--ink); }
.log-entry:last-child{ border-bottom:none; }
.log-entry .ts{ color: var(--ink-muted); font-family:'IBM Plex Mono'; font-size:11.5px; display:block; margin-bottom:2px; }
.empty-state{ text-align:center; color: var(--ink-muted); padding: 40px 20px; font-size:14px; }
.print-only{ display:none; }
@media print{
@page{ size: 50mm 18mm; margin:0; }
/* WICHTIG: display:none statt nur visibility:hidden - sonst behält der
(bei 21+ Medikamenten sehr lange) Hauptinhalt weiterhin seinen Platz
im Layout, und der Druck paginiert über diese unsichtbare Höhe hinweg
(führte zu Dutzenden leeren Seiten trotz nur einem winzigen Etikett). */
body > *:not(#printLabel){ display:none !important; }
#printLabel{
display:block !important;
position:static; margin:0; padding:0;
}
/* Jede .label-copy ist ein eigenes Etikett (50x18mm); zwei Kopien
(Impfausweis + Dokumentation) werden als zwei Druckseiten
hintereinander ausgegeben. Kein Adress-/Stempelteil mehr (auf
Wunsch entfernt) - dadurch mehr Höhe für mehrzeilige Angaben bei
Kombi-Impfstoffen mit mehreren Krankheiten. */
#printLabel .label-page{
display:block; width:50mm; height:18mm;
page-break-after: always; break-after: page;
}
#printLabel .label-page:last-child{ page-break-after: auto; break-after: auto; }
#printLabel .label-copy{
width:50mm; height:18mm; box-sizing:border-box;
display:flex; flex-direction:row; align-items:center; gap:1.5mm;
padding:0.7mm 1.5mm;
font-family:'Public Sans', sans-serif; color:#000;
}
#printLabel .label-col-main{
flex:1 1 auto; min-width:0; max-width:32mm; text-align:left;
display:flex; flex-direction:column; justify-content:center; gap:0.3mm;
}
#printLabel .label-date{ font-size:6.5pt; font-weight:700; }
#printLabel .label-med{ font-size:7.5pt; font-weight:700; line-height:1.15; overflow-wrap:break-word; word-break:break-word; }
#printLabel .label-lot{ font-size:4.8pt; font-weight:600; line-height:1.15; }
/* Stamaril (Gelbfieber): eigene Zeile für die englische Übersetzung
   "Yellow Fever" (behördliche Kontrollen des Internationalen
   Impfausweises, siehe printing.js isStamarilLabel/STAMARIL_TRANSLATION).
   Datum/Name/LOT bleiben bei den Basiswerten oben unverändert - ein
   Vergleich mit einem echten Ausdruck (Tollwutimpfstoff HDC) zeigt, dass
   der Name auch für Stamaril bei dieser Schriftgröße auf eine Zeile
   passt, siehe Kommentar in printing.js/buildZplLabel. Dieselbe Größe wie
   .label-med (7.5pt), damit "Yellow Fever" genauso aussieht wie eine ganz
   normale, umgebrochene zweite Namenszeile (siehe Tollwutimpfstoff-Beispiel,
   dort sind Zeile 2 und 3 aus demselben Grund auch gleich groß). */
#printLabel .label-translation{ font-size:7.5pt; font-weight:700; line-height:1.15; }
#printLabel .label-col-qr{
flex:0 0 10.4mm; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.4mm;
}
#printLabel .label-col-qr img{ width:9.6mm; height:9.6mm; display:block; }
#printLabel .label-col-meta{
flex:0 0 15mm; display:flex; flex-direction:column; justify-content:center; gap:0.8mm;
}
#printLabel .label-meta-row{ font-size:5.2pt; font-weight:600; line-height:1.15; overflow-wrap:break-word; word-break:break-word; }
#printLabel .label-meta-row .label-caption{ font-size:4.7pt; font-weight:700; color:#000; margin-right:0.7mm; }
#printLabel .label-meta-row-pn{ font-size:7.5pt; font-weight:700; }
#printLabel .label-meta-row-pn .label-caption{ font-size:7.5pt; }
}

/* Praxishandbuch (Tab neben "Bestand") */
.view-tabs{ display:flex; gap:8px; margin-bottom:20px; }
.view-tab{
border:1px solid var(--line); background: var(--surface); color: var(--ink);
border-radius:999px; padding:8px 18px; font-family:'Public Sans'; font-size:13px; font-weight:600; cursor:pointer;
}
.view-tab:hover{ border-color: var(--sage); }
.view-tab.active{ background: var(--sage); border-color: var(--sage); color:#fff; }

.handbuch-layout{ display:flex; gap:24px; align-items:flex-start; }
.handbuch-toc-col{ width:290px; flex-shrink:0; display:flex; flex-direction:column; gap:12px; }
.handbuch-toc-title{ font-family:'Source Serif 4', serif; font-weight:600; font-size:15px; margin:0; color: var(--sage-deep); }
.handbuch-toc-sub{ font-size:11px; color: var(--ink-muted); margin:2px 0 0; }
.handbuch-toc{ background: var(--sage-deep); color: var(--bg); border-radius:6px; padding:12px 16px; }
.handbuch-toc-eyebrow{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; opacity:.55; margin:0 0 4px; }
.handbuch-toc-row{
display:flex; align-items:flex-start; gap:9px; width:100%; background:none; border:none;
border-bottom:1px solid rgba(243,237,228,0.1); color: var(--bg); cursor:pointer; text-align:left;
padding:6px 0; font-size:12.5px; font-weight:500; font-family:'Public Sans'; line-height:1.4;
}
.handbuch-toc-row:last-child{ border-bottom:none; }
.handbuch-toc-row:hover{ text-decoration:underline; }
.handbuch-toc-row.active{ color:#fff; font-weight:700; }
.handbuch-toc-num{ opacity:.6; flex-shrink:0; line-height:1.4; }

.handbuch-reader{ flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }
.handbuch-spread{
position:relative; background: var(--surface); border-radius:10px;
box-shadow: 0 4px 10px rgba(30,42,52,0.08), 0 18px 40px rgba(30,42,52,0.10);
padding:32px 40px; flex:1; min-height:520px;
column-count:2; column-gap:56px; column-rule:1px solid var(--line);
}
.handbuch-fold{
position:absolute; left:50%; top:0; bottom:0; width:32px; transform:translateX(-50%);
background:linear-gradient(to right, transparent, rgba(30,42,52,0.08), transparent); pointer-events:none;
}
.handbuch-chapter-eyebrow{ column-span:all; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--sage); margin:0 0 8px; }
.handbuch-chapter-title{ column-span:all; font-family:'Source Serif 4', serif; font-weight:600; font-size:22px; margin:0 0 16px; color: var(--sage-deep); }
.handbuch-block-heading{ font-family:'Source Serif 4', serif; font-style:italic; font-weight:500; font-size:14px; color: var(--sage-deep); margin:14px 0 8px; break-after:avoid; }
.handbuch-block-text{ font-size:13.5px; line-height:1.7; color: var(--ink); margin:0 0 12px; white-space:pre-line; }
.handbuch-block-text strong{ color: var(--sage-deep); }
.handbuch-block-list{ margin:0 0 12px; padding-left:18px; font-size:13.5px; line-height:1.75; color: var(--ink); }

.handbuch-pagecontrols{ display:flex; align-items:center; justify-content:center; gap:18px; }
.handbuch-navbtn{
width:38px; height:38px; border-radius:50%; background: var(--surface); border:1px solid var(--line); color: var(--ink-muted);
box-shadow: var(--shadow); display:flex; align-items:center; justify-content:center; font-size:18px; cursor:pointer;
}
.handbuch-navbtn:hover{ color: var(--ink); border-color: var(--sage); }
.handbuch-navbtn:disabled{ opacity:.35; cursor:default; }
.handbuch-pageindicator{ text-align:center; font-size:12.5px; font-weight:600; color: var(--ink-muted); min-width:140px; }


@media (max-width: 860px){
.handbuch-layout{ flex-direction:column; }
.handbuch-toc-col{ width:100%; }
.handbuch-spread{ column-count:1; min-height:0; }
.handbuch-fold{ display:none; }
}
.charge-row select.charge-pick-missing{ border-color:var(--brick); outline:2px solid var(--brick-tint); }
.charge-row select{ width:100%; box-sizing:border-box; padding:6px 8px; border:1px solid var(--line); border-radius:6px; font-family:inherit; font-size:13px; background:var(--bg); color:var(--ink); }
.staff-row .staff-station-ok{ flex:none; font-size:11.5px; color: var(--petrol); margin-left:8px; font-weight:600; white-space:nowrap; }
.staff-station-intro{ margin:0 0 12px; font-size:13px; color: var(--ink-muted); }
.staff-station-field{ display:block; font-size:13px; font-weight:600; margin-bottom:12px; }
.staff-pin-block{ display:flex; align-items:center; justify-content:space-between; gap:10px; background: var(--surface-sunken); border-radius:6px; padding:10px 12px; margin-top:12px; font-size:13px; }
.staff-pin-block button{ border:1px solid var(--line); background: var(--surface); border-radius:4px; padding:7px 12px; font-weight:600; cursor:pointer; font-family:inherit; }
.staff-pin-anzeige{ text-align:center; background: var(--sage-tint); border-radius:6px; padding:12px; margin-top:10px; }
.staff-pin-anzeige p{ font-size:12.5px; margin:6px 0 0; }
.staff-pin-wert{ font-family:'IBM Plex Mono', monospace; font-size:30px; font-weight:700; letter-spacing:6px; color: var(--sage-deep); }
.staff-station-check{ display:flex; align-items:flex-start; gap:8px; font-size:13px; margin:0 0 12px; }
.staff-station-check input{ width:auto; margin-top:2px; }
.staff-station-field > span{ font-weight:400; color: var(--ink-muted); font-size:12px; margin-left:4px; }
.staff-station-field input{ display:block; width:100%; margin-top:4px; padding:8px 10px; font-family:'IBM Plex Mono', monospace; font-size:14px; border:1px solid var(--line); border-radius:4px; background:#fff; box-sizing:border-box; }
.staff-station-field .staff-station-input-row{ display:flex; gap:8px; margin:4px 0 0; }
.staff-station-input-row input{ margin-top:0; flex:1; min-width:0; }
.staff-station-input-row input.staff-station-toggle{ flex:none; width:22px; height:22px; margin:8px 2px 0 0; accent-color: var(--ink); }
.staff-station-field input[readonly]{ background: var(--paper, #f6f3ee); color: var(--ink); }
.staff-station-suggest{ flex:none; font-family:'Public Sans'; border:1px solid var(--line); background: var(--surface-sunken); border-radius:4px; padding:0 12px; font-size:12.5px; cursor:pointer; }
.staff-station-error{ min-height:1em; color: var(--brick); font-size:12.5px; margin-bottom:8px; }
.staff-station-actions{ display:flex; align-items:center; gap:8px; }
.staff-station-spacer{ flex:1; }
.staff-station-actions button{ border:none; border-radius:4px; padding:8px 14px; font-size:13px; cursor:pointer; font-family:'Public Sans'; }
.staff-station-print{ background:none; color: var(--ink-muted); text-decoration:underline; padding-left:0 !important; }
.staff-station-print:disabled{ opacity:.45; cursor:default; }
.staff-station-cancel{ background: var(--surface-sunken); color: var(--ink); }
.staff-station-save{ background: var(--petrol); color:#fff; font-weight:600; }
.staff-station-save:disabled{ opacity:.6; cursor:default; }

/* --- Scan-Station (station.js): Vollbild, aus zwei Metern lesbar --- */
.station-overlay{ display:none; position:fixed; inset:0; z-index:200; background: var(--bg); flex-direction:column; gap:14px; padding:18px 22px; overflow-y:auto; }
.station-overlay.show{ display:flex; }
/* Reihenfolge der Bereiche (alle Größen): Kopf, Einstellungen, Kamerabild (zum
   Zielen auf den Code), Kacheln, Zeile zum Vorgang, Meldung, Nachdruck, Tasten,
   Eingabefeld des Tastatur-Scanners. */
.station-overlay > .station-head{ order:0; }
.station-overlay > .station-settings{ order:1; }
.station-overlay > .station-cam-frame{ order:1; }
.station-overlay > .station-slots{ order:2; }
.station-overlay > .station-session-row{ order:3; }
.station-overlay > .station-banner{ order:4; }
.station-overlay > .station-reprint{ order:5; }
.station-overlay > .station-actions{ order:6; }
.station-overlay > .station-foot{ order:7; }
/* Läuft die Kamera, wird das Eingabefeld des Tastatur-Scanners nicht gebraucht:
   nur unsichtbar, nicht entfernt (muss fokussierbar bleiben). */
.station-overlay.cam-on .station-foot{ position:absolute; left:0; bottom:0; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.station-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.station-title{ font-family:'Source Serif 4', serif; font-size:24px; font-weight:600; color: var(--sage-deep); margin-right:auto; }
#stationName:not(:empty)::before{ content:' · '; }
.station-banner{ scroll-margin-bottom:140px; }
.station-actor{ display:flex; align-items:center; gap:8px; font-size:13px; color: var(--ink-muted); }
.station-head button, .station-actor select{ border:1px solid var(--line); background: var(--surface); border-radius:4px; padding:9px 12px; font-family:inherit; font-size:14px; cursor:pointer; color: var(--ink); }
.station-actor select{ font-weight:600; }
.station-actor select.needs-selection{ border-color: var(--brick); background: var(--brick-tint); }
.station-slots{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.station-slot{ background: var(--petrol); color:#fff; border:2px dashed rgba(255,255,255,0.45); border-radius: var(--radius); padding:16px; min-height:130px; }
/* Leere Kachel: Petrol mit gedämpfter Schrift und gestricheltem Rand - so ist
   auf einen Blick erkennbar, was noch fehlt. */
.station-slot:not(.filled) .station-slot-value, .station-slot:not(.filled) .station-slot-sub{ opacity:0.55; }
/* Gefüllte Kachel: Petrol mit voller weißer Schrift und durchgezogenem Rand. */
.station-slot.filled{ border:2px solid var(--petrol); }
.station-slot-label{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color: rgba(255,255,255,0.78); }
.station-slot-value{ font-size:30px; font-weight:700; line-height:1.15; margin-top:8px; overflow-wrap:anywhere; }
.station-slot-sub{ font-family:'IBM Plex Mono', monospace; font-size:15px; margin-top:6px; color: rgba(255,255,255,0.88); }
.station-overlay > .station-manual{ order:2; }
/* "✎ eintippen" in den Kacheln Arzt und Patientennummer (station.js). */
.station-slot-manual{ margin-top:10px; border:1px solid rgba(255,255,255,0.6); background:transparent; color:#fff; border-radius:4px; padding:7px 12px; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.station-slot-arzt{ margin-left:6px; }
.station-slot-manual:hover{ background:rgba(255,255,255,0.12); }
.station-manual{ background: var(--surface); border:2px solid var(--petrol); border-radius: var(--radius); padding:14px 16px; }
.station-manual label{ display:block; font-size:15px; font-weight:600; margin-bottom:8px; }
.station-manual-row{ display:flex; gap:10px; flex-wrap:wrap; }
.station-manual-row input{ flex:1; min-width:160px; border:1px solid var(--line); border-radius:4px; padding:12px 14px; font-family:'IBM Plex Mono', monospace; font-size:26px; background: var(--surface); color: var(--ink); }
.station-manual-row input:focus{ outline:2px solid var(--status-ok); outline-offset:1px; }
.station-manual-row button{ border:1px solid var(--ink); background: var(--surface); border-radius:4px; padding:12px 18px; font-family:inherit; font-size:17px; font-weight:600; cursor:pointer; color: var(--ink); }
.station-manual-row .station-manual-ok{ background: var(--petrol); border-color: var(--petrol); color:#fff; }
.station-manual-hint{ font-size:13px; color: var(--ink-muted); margin:0 0 10px; }
.station-manual-reasons{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.station-manual-reason{ display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:6px; padding:8px 12px; font-size:15px; font-weight:500; cursor:pointer; background: var(--surface-sunken); }
.station-manual-reason input{ width:auto; margin:0; }
.station-manual-error{ min-height:1.2em; margin-top:8px; font-size:14px; color: var(--brick); font-weight:600; }
.station-manual-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; margin:12px 0; max-height:40vh; overflow-y:auto; }
.station-manual-choice{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; border:1px solid var(--line); background: var(--surface-sunken); border-radius:6px; padding:12px 14px; font-family:inherit; font-size:17px; font-weight:600; cursor:pointer; color: var(--ink); }
.station-manual-choice span{ font-size:13px; font-weight:500; color: var(--ink-muted); }
.station-manual-choice:hover{ border-color: var(--petrol); }
.station-manual-choice.expired{ opacity:0.5; cursor:not-allowed; }
.station-manual-empty{ font-size:15px; color: var(--ink-muted); padding:8px 0; }
.station-banner{ flex:1; min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-radius: var(--radius); padding:20px; background: var(--surface-sunken); }
.station-banner-title{ font-size:40px; font-weight:700; line-height:1.15; }
.station-banner-detail{ font-size:20px; margin-top:10px; max-width:1000px; }
.station-banner.idle .station-banner-title{ font-weight:600; color: var(--ink-muted); }
.station-banner.busy{ background: var(--ochre-tint); }
.station-banner.ok{ background: var(--status-ok); color:#06320A; }
.station-banner.warn{ background: var(--ochre); color:#3A2C00; }
.station-banner.error{ background: var(--brick); color:#fff; }
.station-nachtrag{ border:2px solid var(--line); background: var(--surface); border-radius: var(--radius); padding:14px 16px; font-family:inherit; font-size:17px; font-weight:600; cursor:pointer; color: var(--ink); text-align:left; }
.station-nachtrag.active{ border-color: var(--ochre); background: var(--ochre-tint); }
.station-storno{ flex:0 1 220px; border:2px solid var(--brick); background: var(--surface); color: var(--brick); border-radius: var(--radius); padding:14px 16px; font-family:inherit; font-size:17px; font-weight:600; cursor:pointer; }
.station-reprint{ align-items:center; gap:12px; flex-wrap:wrap; background: var(--ochre-tint); border:1px solid var(--ochre); border-radius: var(--radius); padding:12px 16px; font-size:16px; font-weight:600; }
.station-reprint span{ margin-right:auto; }
.station-reprint button{ border:1px solid var(--ink); background: var(--surface); border-radius:4px; padding:10px 16px; font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; color: var(--ink); }
/* Kompakter Sucher (28.10.2026): nur ein Ausschnitt aus der Bildmitte - man sieht
   die Packung davor, nicht den Raum. Die Erkennung nutzt das ganze Kamerabild. */
/* Sucher: ganzes Kamerabild (die Erkennung prüft das ganze Bild, STATION_CROP
   in station.js). Kein Zielrahmen: die Linse sitzt je nach Gerät am Rand
   (Lenovo: oben links), ein Rahmen in der Mitte lenkt in die falsche Richtung. */
.station-cam-frame{ align-self:center; width:min(480px, 100%); }
#stationVideo{ display:block; width:100%; height:270px; object-fit:contain; border-radius: var(--radius); background:#000; }
.station-cam-frame{ overflow:hidden; border-radius: var(--radius); background:#000; position:relative; }
.station-cam-info{ position:absolute; left:0; right:0; bottom:0; padding:3px 8px; font-family:'IBM Plex Mono', monospace; font-size:11px; color:#fff; background:rgba(0,0,0,0.55); }
.station-cam{ flex:0 1 200px; border:2px solid var(--petrol); background: var(--surface); color: var(--petrol); border-radius: var(--radius); padding:14px 16px; font-family:inherit; font-size:18px; font-weight:700; cursor:pointer; }
.station-cam.active{ background: var(--petrol); color:#fff; }
.station-foot input{ width:100%; border:1px solid var(--line); border-radius:4px; padding:8px 10px; font-family:'IBM Plex Mono', monospace; font-size:13px; background: var(--surface); color: var(--ink); }
.station-foot input:focus{ outline:2px solid var(--status-ok); outline-offset:1px; }
.station-last-scan{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color: var(--ink-muted); word-break:break-all; margin-top:6px; min-height:1.4em; }
.station-settings{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:16px; box-shadow: var(--shadow); max-width:560px; }
.station-settings h3{ margin:0 0 4px; font-family:'Source Serif 4', serif; font-size:17px; font-weight:600; }
.station-settings label{ display:flex; flex-direction:column; gap:4px; font-size:13px; margin-top:10px; }
.station-settings label.station-check{ flex-direction:row; align-items:flex-start; gap:8px; }
.station-settings input[type="text"], .station-settings input[type="number"], .station-settings select{ border:1px solid var(--line); border-radius:4px; padding:8px 10px; font-family:inherit; font-size:14px; background: var(--surface); color: var(--ink); }
.station-settings-hint{ font-size:12px; color: var(--ink-muted); margin:4px 0 0; }
.station-settings-actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:14px; }
.station-settings-actions button{ border:1px solid var(--line); background: var(--surface); border-radius:4px; padding:8px 14px; font-family:inherit; font-size:13.5px; cursor:pointer; color: var(--ink); }
.station-settings-actions button.primary{ background: var(--sage); border-color: var(--sage); color:#fff; font-weight:600; }
@media (max-width: 640px){
.station-overlay{ padding:12px; gap:10px; }
.station-slots{ grid-template-columns:1fr; }
.station-finish{ flex:1 1 100%; }
.station-title{ font-size:19px; }
.station-slot{ min-height:0; padding:12px; }
.station-slot-value{ font-size:22px; }
.station-banner{ min-height:110px; }
.station-banner-title{ font-size:25px; }
.station-banner-detail{ font-size:15px; }
}

.station-session-row{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:15px; font-weight:600; }
#stationCountdown{ color: var(--ink-muted); font-weight:500; }
/* Die Tasten bleiben am unteren Rand sichtbar, auch wenn der Inhalt (kleines
   Telefon, Kamerabild) länger ist als der Bildschirm. */
.station-actions{ display:flex; gap:12px; flex-wrap:wrap; position:sticky; bottom:0; z-index:5; background: var(--bg); padding:8px 0 4px; }
.station-actions .station-nachtrag{ flex:1 1 280px; }
.station-finish{ flex:0 1 240px; border:2px solid var(--status-ok); background: var(--status-ok); color:#06320A; border-radius: var(--radius); padding:14px 16px; font-family:inherit; font-size:20px; font-weight:700; cursor:pointer; }
.station-finish:disabled{ border-color: var(--line); background: var(--surface-sunken); color: var(--ink-muted); cursor:not-allowed; }

/* Kleine Displays (z. B. iPhone SE): kompakter, alles ohne Scrollen sichtbar.
   Steht bewusst NACH den Grundregeln oben, sonst überschreiben diese es. */
@media (max-width: 640px){
.station-overlay{ padding:10px; gap:8px; }
.station-head{ gap:8px; }
.station-head button{ padding:7px 10px; font-size:13px; }
.station-slots{ gap:6px; }
.station-slot{ padding:8px 12px; }
.station-slot-label{ font-size:11px; }
.station-slot-value{ font-size:19px; margin-top:2px; }
.station-slot-sub{ font-size:12px; margin-top:2px; }
/* Zeile mit Buchungsliste und Restzeit entfällt auf dem Handy (Medikament-Kachel
   und Fertig-Taste zeigen dasselbe); !important, weil das Skript sie inline einblendet. */
.station-session-row{ display:none !important; }
.station-banner{ flex:1 0 auto; min-height:70px; padding:8px 10px; }
.station-banner-title{ font-size:19px; }
.station-banner-detail{ font-size:13px; margin-top:4px; }
.station-actions{ gap:8px; }
/* Impfausweis und Fertig nebeneinander statt untereinander (spart eine Zeile). */
.station-actions .station-nachtrag{ flex:1 1 52%; padding:8px 10px; font-size:14px; line-height:1.2; }
.station-finish{ flex:1 1 40%; padding:10px 12px; font-size:18px; }
#stationVideo{ height:220px; }
.station-last-scan{ display:none; }
/* Arzt und Patientennummer stehen nebeneinander, das Medikament darunter über die
   ganze Breite. (Reihenfolge der Bereiche: siehe oben, gilt für alle Größen.) */
/* Auf dem Handy nur der Stationsname (z. B. "Behandlungszimmer 3"), sonst "Scan-Station". */
.station-title{ font-size:15px; }
.station-title.has-name .station-title-prefix{ display:none; }
.station-title.has-name #stationName::before{ content:none; }
.station-btn-text{ display:none; }
.station-head button{ padding:7px 12px; font-size:16px; line-height:1; }
.station-head{ flex-wrap:nowrap; }
/* Eingabefeld für Tastatur-Scanner: auf dem Handy nur unsichtbar, nicht entfernt
   (muss fokussierbar bleiben, "inputmode=none" verhindert die Bildschirmtastatur). */
.station-foot{ position:absolute; left:0; bottom:0; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.station-overlay > .station-cam-frame #stationVideo{ height:180px; }
.station-overlay > .station-slots{ grid-template-columns:1fr 1fr; }
.station-slots .station-slot:nth-child(3){ grid-column:1 / -1; }
}

/* Kein Impfstoff: keine Dosenangaben im Bearbeiten-Fenster (jede Packung zählt 1). */
.edit-panel[data-impfstoff="0"] .pzn-doses-wrap{ display:none; }
.inventur-table tr.inventur-expiryfix td{ border-top:none; padding:2px 4px 6px 4px; font-size:11px; color:var(--ink-muted); }
.inventur-expiryfix-label{ font-style:italic; }
.inventur-fix-expiry{ width:auto; max-width:90px; }

/* GDT-Ablage im PVS-Ordner (gdt-ablage.js) */
.gdt-ablage{ border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:10px 0; }
.gdt-ablage-hint{ font-size:12.5px; color: var(--ink-muted); margin:6px 0 0; }
.gdt-ablage-hint code{ font-size:12px; }
.gdt-ablage-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }