/**
 * Schriften (Fraunces, IBM Plex Sans, IBM Plex Mono) - lokal ausgeliefert
 * statt von fonts.googleapis.com nachgeladen.
 *
 * Warum lokal: beim Einbinden ueber Googles CDN uebertraegt JEDER Aufruf
 * einer apotools-Seite die IP-Adresse des Apotheken-Arbeitsplatzes an
 * Google, ohne dass die Nutzer einwilligen koennten. Das ist in Oesterreich
 * und Deutschland wiederholt als DSGVO-Verstoss beurteilt worden. Die
 * Schriftdateien liegen deshalb unter assets/fonts/ im Repo und werden vom
 * eigenen Server ausgeliefert - keine Verbindung zu Dritten mehr.
 *
 * Die Regeln unten sind eine woertliche Uebernahme dessen, was Google
 * selbst fuer genau diese Familien/Schnitte ausliefert (siehe die frueheren
 * css2?family=...-Links in den Seitenkoepfen), damit sich am Schriftbild
 * nichts aendert. Zwei bewusste Abweichungen:
 *
 * 1. Nur die Subsets "latin" und "latin-ext". Die Oberflaeche ist
 *    deutschsprachig; die von Google zusaetzlich gelieferten Subsets
 *    (vietnamese, cyrillic, greek) wuerden nur Bandbreite kosten.
 * 2. Fraunces und IBM Plex Sans sind Variable Fonts: Google liefert fuer
 *    400, 500 und 600 jeweils DIESELBE Datei aus und stellt das Gewicht
 *    erst ueber die @font-face-Regel ein. Die Datei liegt hier deshalb nur
 *    einmal je Subset, die drei Regeln zeigen gemeinsam darauf (6 Dateien
 *    statt 14, rund 250 statt 640 kB).
 *
 * Erzeugt/aktualisiert werden Dateien und Regeln durch
 * werkzeuge/schriften-holen.php - nicht von Hand pflegen.
 *
 * url(...) ist relativ zu DIESER Datei, nicht zur einbindenden Seite:
 * assets/fonts/... wird damit aus jeder Verzeichnistiefe korrekt aufgeloest
 * (Repo-Root, apoartikel-api/, apostatistik/, apoetikett/ ...), ohne dass
 * die Seiten einen eigenen Pfad mitgeben muessten.
 */

/* Fraunces 400 - latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces 400 - latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces 500 - latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces 500 - latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces 600 - latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces 600 - latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 - latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500 - latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans 400 - latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans 400 - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans 500 - latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans 500 - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans 600 - latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans 600 - latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/**
 * apotools.css — zentrales Design-System (Tokens + wiederverwendbare
 * Komponenten), ersetzt die bisher pro Seite kopierten <style>-Blöcke.
 *
 * Herkunft: apoinfo/includes/layout.php (bisher reichhaltigste geteilte
 * Implementierung dieser Palette), Tabellen-Pattern aus
 * apoartikel-api/apolager.php, Button-Vereinheitlichung aus
 * google-business-verwaltung.php/apotext/index.php, .kpi/.receipt/.dropzone
 * aus der Zusammenführung von apoapotheken/apobuchhaltung/apostatistik.
 *
 * Einbindung: <link rel="stylesheet" href="assets/apotools.css"> im
 * Repo-Root, href="../assets/apotools.css" eine Ebene tiefer (apotext/,
 * apowerbung/, apoinfo/, apoapotheken/, apobuchhaltung/, apoartikel-api/,
 * apostatistik/) - relativer Pfad, kein führender Slash: DEV deployt in ein
 * Unterverzeichnis, LIVE in die Domain-Root (siehe deploy_dev.yml /
 * deploy-live.yml), ein absoluter Pfad würde auf DEV ins Leere laufen.
 */

:root {
  --ink: #1B3A32; --paper: #EEECE1; --card: #FAF9F4;
  --brass: #B4842A; --brass-dim: #D9C8A0; --line: #6E7C73; --radius: 3px;
  --green: #235140; --green-bg: #DCE9DE;
  --red: #8A3A2E;   --red-bg: #FBE4E0;
  --yellow: #8A6A1E; --yellow-bg: #F3E7C4;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
a { color: var(--brass); }

/* ===== Seiten-Header-Pattern ===== */
.wrap { max-width: 900px; margin: 0 auto; padding: 40px 24px 80px; }
.eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brass); margin: 0 0 14px;
}
h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 30px; margin: 0 0 6px; }
h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 20px; margin: 24px 0 12px; }
.back { font-size: 12px; text-decoration: none; }

/* Bildmarke vor der Eyebrow-Zeile (apotools_logo_mark() aus
   includes/logo.php). Die Farbe wird bewusst nur am <svg> gesetzt: .eyebrow
   selbst ist messingfarben, ein color auf dem Elternelement wuerde die
   Schriftzeile mitfaerben. Moerser und Hammer tragen damit Tinte, das
   Pistill bleibt ueber --logo-accent beim Messing. */
.eyebrow-brand { display: flex; align-items: center; gap: 9px; }
.eyebrow-brand svg { color: var(--ink); }

/* ===== Flash-Messages ===== */
.msg { padding: 10px 14px; border-radius: var(--radius); font-size: 13.5px; margin: 20px 0; }
.msg.error { background: var(--red-bg); color: var(--red); }
.msg.success { background: var(--green-bg); color: var(--green); }
.msg.warn { background: var(--yellow-bg); color: var(--yellow); }

/* ===== Cards / Kacheln / Einträge ===== */
.card {
  background: var(--card); border: 1px solid var(--brass-dim); border-radius: var(--radius);
  padding: 22px; margin-top: 28px;
}
.card h2 { margin: 0 0 16px; }

/* Aufklappbare "Neu anlegen"-Karte (<details class="card card-neu">) - die
   Zusammenfassung traegt selbst das Plus-/Minus-Zeichen, das native
   Dreieck des Browsers wird ausgeblendet.

   Stand bisher nur im lokalen <style> von apoinfo/includes/layout.php,
   obwohl dasselbe Markup auch im APP-Backend (Kundenliste, News,
   Eigenmarke) steht - dort fehlte die Gestaltung also komplett und die
   Karte klappte mit dem nackten Browser-Dreieck auf. Daher jetzt hier,
   einmal fuer beide. */
.card-neu { margin: 20px 0 28px; padding: 0 22px; }
.card-neu summary {
  cursor: pointer; list-style: none; padding: 18px 0;
  display: flex; align-items: center; gap: 8px;
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 16px; color: var(--ink);
}
.card-neu summary::-webkit-details-marker { display: none; }
.card-neu summary::before {
  content: '+'; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--brass); color: var(--brass);
  font-family: 'IBM Plex Mono', monospace; font-size: 14px; flex-shrink: 0;
}
.card-neu[open] summary { border-bottom: 1px solid var(--brass-dim); margin-bottom: 18px; }
.card-neu[open] summary::before { content: '\2013'; }
.card-neu > form { padding-bottom: 22px; }

.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 20px; }
.tile {
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--brass-dim);
  border-radius: var(--radius); padding: 20px 18px; text-decoration: none; min-height: 130px;
}
.tile:hover { border-color: var(--brass); }
.tile .mono {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--brass); color: var(--brass);
  font-family: 'Fraunces', serif; font-size: 15px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; flex-shrink: 0;
}
.tile h2 { font-size: 18px; margin: 0 0 6px; }
.tile p { font-size: 13px; line-height: 1.5; color: var(--line); margin: 0; }

.eintrag-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 14px; align-items: start;
}
.eintrag {
  background: var(--card); border: 1px solid var(--brass-dim); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 14px;
}
.eintrag-liste .eintrag { margin-bottom: 0; }
.eintrag h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 17px; margin: 0 0 6px; }
.eintrag .meta {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--line);
  margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.eintrag .inhalt { font-size: 14px; line-height: 1.6; }

/* ===== Badges ===== */
.badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px; background: var(--brass); color: #fff; display: inline-block;
}
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-muted { background: var(--line); color: #fff; }

/* ===== Buttons — eine kanonische Lösung (gefüllt, dunkel) =====

   .btn-secondary und .btn-danger stehen hier bewusst gleich mit in der
   Grundform: an einem <button> greift die Grundform ohnehin über den
   Element-Namen, an einem <a> aber nur über .btn - und im Haus steht
   40mal <a class="btn-secondary"> gegen 2mal <a class="btn btn-secondary">.
   Diesen 40 fehlten damit Innenabstand, Schriftschnitt und vor allem
   text-decoration:none: sie erschienen als unterstrichener Text in einem
   dünnen Kasten statt als Knopf (zu sehen z.B. am "Abbrechen" neben
   "Speichern"). Die Farben setzen die beiden Regeln darunter, die später
   stehen und deshalb gewinnen. */
.btn, button, .btn-secondary, .btn-danger {
  font-family: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: none;
  display: inline-block; padding: 9px 18px; border: none; border-radius: var(--radius);
  background: var(--ink); color: var(--paper);
}
.btn:hover, button:hover { background: var(--brass); }
.btn-secondary, button.secondary {
  background: #fff; color: var(--ink); border: 1px solid var(--brass-dim);
}
.btn-secondary:hover, button.secondary:hover { background: var(--brass); color: #fff; border-color: var(--brass); }
.btn-danger, button.danger { background: var(--red); color: #fff; }
.btn-danger:hover, button.danger:hover { background: #6E2C22; }

/* ===== Tabellen (Pattern aus apoartikel-api/apolager.php) ===== */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 20px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--brass-dim); }
th {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--line); position: sticky; top: 0; background: #fff; z-index: 1;
}
td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ===== Formulare ===== */
label.field { display: block; font-size: 12.5px; color: var(--line); margin-bottom: 14px; }
input[type=text], input[type=url], input[type=password], input[type=date], input[type=search],
input[type=email], input[type=number], input[type=time], input[type=datetime-local],
select, textarea {
  display: block; width: 100%; margin-top: 6px; padding: 9px 10px; border: 1px solid var(--brass-dim);
  border-radius: var(--radius); font-size: 14px; background: #fff; color: var(--ink); font-family: inherit;
}
/* Datum/Uhrzeit: Safari zeichnet die Felder sonst als eigene, zentrierte
   Knöpfe, Chrome/Edge den Kalender in Systemblau - beides passt nicht zum
   Rest der Formulare. Die Auswahl selbst (Kalender) bleibt die des
   Browsers; nur Feld, Symbol und Akzentfarbe tragen unser Design. */
input[type=date], input[type=time], input[type=datetime-local] {
  -webkit-appearance: none; appearance: none; min-height: 40px; text-align: left;
  accent-color: var(--brass); color-scheme: light;
}
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value,
input[type=datetime-local]::-webkit-date-and-time-value { text-align: left; }
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
input[type=date]:focus, input[type=time]:focus, input[type=datetime-local]:focus {
  outline: none; border-color: var(--brass);
}
textarea { resize: vertical; min-height: 100px; }
label.checkbox-field, label.radio-field {
  display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); margin-bottom: 8px;
}
label.radio-field input { width: auto; margin: 0; }
fieldset { border: 1px solid var(--brass-dim); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; }
legend { font-size: 12.5px; color: var(--line); padding: 0 6px; }
fieldset > p.hint { font-size: 12.5px; color: var(--line); margin: 0 0 14px; }
fieldset label.field { margin-bottom: 0; }

/* Kleiner Kontext-Hinweis neben einem Feld-Label, z.B. welches Intervall
   ein optionales Feld betrifft (siehe checkliste-verwaltung.php,
   checkliste-apotheke.php). */
.field-hint {
  display: inline-block; margin-left: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--brass); font-weight: 400;
}

/* Formular per Klick ein-/ausblenden statt es dauerhaft offen zu zeigen
   (z.B. "+ Neuen Eintrag anlegen"-Formulare) - reines <details>/<summary>,
   kein JS nötig. */
details.toggle-form { margin-top: 28px; }
details.toggle-form > summary {
  display: inline-block; cursor: pointer; font-weight: 600; font-size: 13.5px; list-style: none;
  padding: 9px 18px; border-radius: var(--radius); background: #fff; color: var(--ink); border: 1px solid var(--brass-dim);
}
details.toggle-form > summary::-webkit-details-marker { display: none; }
details.toggle-form > summary:hover { background: var(--brass); color: #fff; border-color: var(--brass); }
details.toggle-form[open] > summary { margin-bottom: 14px; }

/* ===== Checkliste: Fälligkeitsfelder (checkliste-verwaltung.php, checkliste-apotheke.php) ===== */
.checkliste-faellig-fieldset { margin-top: 4px; }
.checkliste-faellig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 18px; }

/* TinyMCE (siehe apoinfo/includes/layout.php, apotext/index.php) ersetzt
   dieses <textarea> clientseitig - die Regel verhindert nur ein unschönes
   Aufblitzen des rohen, unformatierten Feldes vor der Initialisierung. */
textarea.apotools-wysiwyg { min-height: 120px; }

.leer { color: var(--line); font-size: 13.5px; padding: 8px 0; text-align: center; }

.dropzone {
  border: 1px dashed var(--brass-dim); border-radius: var(--radius); padding: 16px; text-align: center;
  font-size: 12.5px; color: var(--line); cursor: pointer; background: var(--card);
}
.dropzone:hover, .dropzone.dragover { border-color: var(--brass); background: #fff; color: var(--ink); }
.dropzone .dropzone-browse { color: var(--brass); text-decoration: underline; }
.dropzone-dateiname { display: block; margin-top: 6px; font-size: 12px; color: var(--ink); font-weight: 600; }

/* ===== KPI-Kacheln (zuvor 2x mit ap-/ab-Präfix separat gebaut) ===== */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi { background: var(--card); border: 1px solid var(--brass-dim); border-radius: var(--radius); padding: 14px 16px; }
.kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--line); margin-bottom: 6px; }
.kpi-value { font-family: 'IBM Plex Mono', monospace; font-size: 20px; font-weight: 600; color: var(--ink); }
.kpi-sub { font-size: 11.5px; color: var(--line); margin-top: 4px; }

/* ===== Beleg-/Upload-Optik (zuvor 2x mit ab-/kw-Präfix separat gebaut) ===== */
.receipt {
  background: #FCFBF7; border: 1px solid var(--brass-dim); border-radius: 2px; position: relative;
  padding: 22px 24px 26px; margin-bottom: 26px;
}
.receipt::before {
  content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px;
  background-image: linear-gradient(135deg, var(--paper) 50%, transparent 50%),
    linear-gradient(-135deg, var(--paper) 50%, transparent 50%);
  background-size: 14px 14px; background-position: top left; background-repeat: repeat-x;
}
.receipt-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--line);
  text-transform: uppercase; margin-bottom: 10px;
}

/* ===== Reiterleiste über zusammengehörige Seiten (includes/seiten_tabs.php)
   Übernommen aus apoetikett/assets/theme.css (.ae-untertabs), damit beide
   dasselbe Aussehen haben. ===== */
.apt-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
.apt-tabs a {
  font-size: 12.5px; text-decoration: none; color: var(--ink); background: var(--card);
  border: 1px solid var(--brass-dim); border-radius: var(--radius); padding: 6px 11px;
}
.apt-tabs a:hover { border-color: var(--brass); }
.apt-tabs a.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ===== Hilfe: schwebende Schaltflaechen =====
   Der "?"-Knopf steht auf jeder Seite unten rechts (gezeichnet am Ende von
   includes/nav.php). Der Stapel ist bewusst column-reverse mit gap: die
   Chat-Blase aus Stufe 2 dockt spaeter darueber an, ohne dass dieses CSS
   nochmal angefasst werden muss.
   Kein Konflikt mit dem Burger-Knopf (#aptnav-toggle, oben) und keiner mit
   der Seitenleiste ab 1180px (die steht links). */
.apthilfe-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; flex-direction: column-reverse; gap: 10px; align-items: flex-end;
}
.apthilfe-knopf {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--card); color: var(--brass); text-decoration: none;
  font-family: 'Fraunces', serif; font-size: 22px; line-height: 1;
  border: 1px solid var(--brass-dim); box-shadow: 0 2px 8px rgba(27,58,50,0.18);
}
.apthilfe-knopf:hover { border-color: var(--brass); background: var(--paper); }
/* Auf Papier hat ein Bildschirmknopf nichts verloren. */
@media print { .apthilfe-fab { display: none; } }

/* ===== Hilfe-Chat (Stufe 2) =====
   Das Fenster haengt im selben .apthilfe-fab-Stapel wie der "?"-Knopf und
   wird von includes/nav.php gezeichnet, aber nur wenn ein API-Schluessel
   hinterlegt ist. */
.apthilfe-chat-knopf { border: 0; cursor: pointer; padding: 0; }
.apthilfe-chat-knopf svg { width: 21px; height: 21px; }
.apthilfe-chat {
  width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--brass-dim);
  border-radius: var(--radius); box-shadow: 0 6px 24px rgba(27,58,50,0.22);
  overflow: hidden;
}
/* MUSS nach der Regel darueber stehen und mitwandern, wenn jemand sie
   verschiebt: das hidden-Attribut wirkt nur ueber [hidden]{display:none}
   im Standardstylesheet des Browsers, und jede display-Angabe aus DIESER
   Datei ueberstimmt es. Ohne die Zeile hier blieb das Chat-Fenster
   dauerhaft offen - der Schliessen-Knopf setzte hidden zwar, sichtbar
   aenderte sich aber nichts. Gleiche Falle bei jedem kuenftigen Element,
   das per .hidden geschaltet und zugleich hier mit display gestylt wird. */
.apthilfe-chat[hidden] { display: none; }
.apthilfe-chat-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--brass-dim); background: var(--paper);
}
.apthilfe-zu { border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--line); }
.apthilfe-verlauf { flex: 1 1 auto; overflow-y: auto; padding: 12px; min-height: 120px; }
.apthilfe-blase { font-size: 14px; line-height: 1.55; margin-bottom: 12px; }
.apthilfe-blase p { margin: 0 0 6px; }
.apthilfe-blase ul { margin: 0 0 6px; padding-left: 20px; }
.apthilfe-frage { text-align: right; color: var(--line); }
.apthilfe-frage p {
  display: inline-block; text-align: left; background: var(--paper);
  border: 1px solid var(--brass-dim); border-radius: var(--radius); padding: 6px 9px;
}
.apthilfe-warte { color: var(--line); font-style: italic; }
.apthilfe-fehler { color: var(--red); }
.apthilfe-quellen { font-size: 12.5px; color: var(--line); margin-top: 8px !important; }
.apthilfe-bewertung { font-size: 12.5px; color: var(--line); margin-top: 6px !important; }
.apthilfe-bewertung button { border: 0; background: none; cursor: pointer; font-size: 15px; padding: 0 3px; }
/* Der Datenschutz-Hinweis steht dauerhaft ueber dem Eingabefeld, nicht als
   einmalig wegklickbare Meldung - er soll beim Tippen zu sehen sein. */
.apthilfe-hinweis {
  font-size: 11.5px; line-height: 1.45; color: var(--line);
  margin: 0; padding: 8px 12px; background: var(--yellow-bg); border-top: 1px solid var(--brass-dim);
}
.apthilfe-eingabezeile { display: flex; gap: 8px; padding: 10px 12px 4px; align-items: flex-end; }
.apthilfe-eingabe {
  flex: 1 1 auto; resize: none; font-family: 'IBM Plex Sans', sans-serif; font-size: 14px;
  padding: 7px 9px; border: 1px solid var(--brass-dim); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
}
.apthilfe-zaehler { font-size: 11px; color: var(--line); margin: 0; padding: 0 12px 10px; min-height: 14px; }