/* ============================================================
   klinikinfosystem.de – zentrale Stylesheet-Datei
   Design: "Die Akte" – die Seite ist als klinisches Dokument aufgebaut.
   Rubriken: Anamnese / Befund / Diagnose / Therapie / Aufnahme

   Palette:
     Aktenpapier   #F7F6F1
     Tintenblau    #1C3A5E
     Linienblau    #9FB4C9
     Befundrot     #B3261E (Alarm-/Negativwerte: pathologische Zahlen, Kosten, Dokumentationslast)
     endoinfo-Grün #68B000 (einziges Grün: Marke, Lösung, Zeitgewinn, Logo-„info")
     Graphit       #23272B

   Typografie – vollständig lokal gehostet (IBM Plex, SIL OFL):
     Display: IBM Plex Serif   (Gravitas, Fachblatt)
     Body:    IBM Plex Sans
     Daten:   IBM Plex Mono    (Kurvenblatt, Laborausdruck, Marke)
   Alle Schriftdateien liegen unter /fonts/ – keine externen Server.
   ============================================================ */

/* ---------- Lokale Schriften ---------- */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-serif-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-serif-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-700.woff2') format('woff2');
}

:root {
  --papier: #F7F6F1;
  --papier-dunkel: #EFEDE5;
  --tinte: #1C3A5E;
  --tinte-hell: #2C4E78;
  --linie: #C9CFD6;
  --linie-blau: #9FB4C9;
  --rot: #B3261E;
  --rot-hell: #FBEDEC;
  --gruen: #68B000;
  --gruen-hell: #EFF6E0;
  --graphit: #23272B;
  --grau: #5C636B;
  --font-display: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', 'Consolas', 'Liberation Mono', Menlo, monospace;
  --max: 880px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  background: var(--papier);
  color: var(--graphit);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Wortmarke / Markenschrift ---------- */
/* Die Marke lässt sich nicht als Marke registrieren – daher wirkt sie
   über eine feste, versale Logotype-Typografie wie eine Marke. */
.wortmarke {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--tinte);
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
}
.wortmarke span { color: var(--gruen); }

/* Inline-Nennung der Marke im Fließtext und in Headlines:
   dieselbe Schrift wie der umgebende Text, nur versal – kein Monospace,
   keine Größenänderung, keine erzwungenen Umbrüche. */
.marke {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-style: normal;
}

/* Aktendeckel-Kopf */
.aktenkopf {
  border-bottom: 3px double var(--tinte);
  background: var(--papier);
  position: sticky;
  top: 0;
  z-index: 50;
}
.aktenkopf-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.aktenzeichen {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--grau);
  letter-spacing: 0.06em;
}
.kopf-cta {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--tinte);
  padding: 8px 16px;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
}
.kopf-cta:hover, .kopf-cta:focus-visible { background: var(--tinte-hell); }

main { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* Rubrik-Reiter wie im Klinikdokument */
.rubrik {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 72px 0 28px;
}
.rubrik-tab {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--papier);
  background: var(--tinte);
  padding: 5px 14px 4px;
  border-radius: 2px 2px 0 0;
}
.rubrik-tab.rot { background: var(--rot); }
.rubrik-tab.gruen { background: var(--gruen); }
.rubrik::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie-blau);
}

/* Hero: das Deckblatt */
.deckblatt {
  padding: 76px 0 56px;
  border-bottom: 1px solid var(--linie);
}
.deckblatt .vermerk {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 22px;
}
.deckblatt h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.12;
  color: var(--tinte);
  max-width: 21ch;
  margin-bottom: 24px;
}
.deckblatt h1 em {
  font-style: normal;
  border-bottom: 3px solid var(--gruen);
}
.deckblatt .unterzeile {
  font-size: 19px;
  color: var(--graphit);
  max-width: 58ch;
  margin-bottom: 34px;
}
.deckblatt .unterzeile strong { color: var(--tinte); }
.cta-zeile { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn-primaer {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--gruen);
  padding: 14px 28px;
  border-radius: 3px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn-primaer:hover, .btn-primaer:focus-visible { background: #235948; }
.cta-hinweis {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--grau);
}

/* Tagesbalken: die Verlaufskurve eines Arzttages */
.tagesbalken { margin: 46px 0 8px; }
.tagesbalken .balken-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 8px;
}
.balken {
  display: flex;
  height: 44px;
  border: 1px solid var(--tinte);
  border-radius: 3px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
}
.balken > div {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}
.b-patient { background: var(--tinte); flex: 0 0 52%; }
.b-doku { background: var(--rot); flex: 0 0 38%; }
.b-doku-neu { background: var(--rot); flex: 0 0 12%; }
.b-zurueck { background: var(--gruen); flex: 0 0 26%; }
.b-rest { background: var(--linie-blau); color: var(--tinte) !important; flex: 1; }
.balken-legende {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--grau);
}
.legende-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* Fliesstext */
.absatz { max-width: 66ch; margin-bottom: 20px; }
.absatz strong { color: var(--tinte); }

h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 34px);
  line-height: 1.2;
  color: var(--tinte);
  margin-bottom: 20px;
  max-width: 26ch;
}

/* Messwert-Tabelle wie Laborausdruck */
.laborwerte {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0;
  font-size: 15.5px;
}
.laborwerte caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau);
  padding-bottom: 10px;
}
.laborwerte th, .laborwerte td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
.laborwerte th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--grau);
  border-bottom: 2px solid var(--tinte);
}
.laborwerte td.wert {
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
}
.laborwerte td.wert.pathologisch { color: var(--rot); }
.laborwerte td.wert.pathologisch::after { content: " ▲"; font-size: 11px; }
.laborwerte td.wert.normal { color: var(--gruen); }
.laborwerte td.quelle {
  font-size: 13px;
  color: var(--grau);
}

/* Befundkarten */
.befundkarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 30px 0;
}
.befundkarte {
  border: 1px solid var(--linie);
  border-top: 3px solid var(--rot);
  background: #fff;
  padding: 22px 20px 18px;
  border-radius: 0 0 3px 3px;
}
.befundkarte.gruen { border-top-color: var(--gruen); }
.befundkarte .zahl {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  color: var(--rot);
  line-height: 1;
  margin-bottom: 8px;
}
.befundkarte.gruen .zahl { color: var(--gruen); }
.befundkarte .einheit {
  font-size: 14px;
  color: var(--graphit);
  line-height: 1.45;
}
.befundkarte .fussnote {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--grau);
  margin-top: 10px;
  display: block;
}

/* Diagnose-Block (Datenschutz) */
.aktenvermerk {
  background: var(--rot-hell);
  border-left: 4px solid var(--rot);
  padding: 22px 24px;
  margin: 28px 0;
  border-radius: 0 3px 3px 0;
}
.aktenvermerk .vermerk-kopf {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rot);
  margin-bottom: 10px;
}
.aktenvermerk p { max-width: 66ch; }
.aktenvermerk p + p { margin-top: 12px; }

.diagnose-liste { margin: 26px 0; }
.diagnose-liste .diagnose {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--linie);
}
.diagnose-liste .diagnose:first-child { border-top: 2px solid var(--tinte); }
.diagnose .icd {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--rot);
  letter-spacing: 0.04em;
  padding-top: 2px;
}
.diagnose .text { max-width: 62ch; }
.diagnose .text strong { color: var(--tinte); }
@media (max-width: 560px) {
  .diagnose-liste .diagnose { grid-template-columns: 1fr; gap: 6px; }
}

/* Therapie-Block */
.therapie-versprechen {
  background: var(--gruen-hell);
  border: 1px solid var(--gruen);
  border-radius: 3px;
  padding: 30px 28px;
  margin: 30px 0;
}
.therapie-versprechen h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 23px;
  color: var(--gruen);
  margin-bottom: 16px;
}
.eigenschaften { list-style: none; max-width: 66ch; }
.eigenschaften li {
  padding: 10px 0 10px 34px;
  position: relative;
  border-bottom: 1px dashed rgba(44,110,90,0.35);
}
.eigenschaften li:last-child { border-bottom: none; }
.eigenschaften li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  top: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--gruen);
}
.diskretion {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--grau);
  border-top: 1px solid var(--linie);
  margin-top: 22px;
  padding-top: 16px;
  max-width: 70ch;
}

/* Zeitgewinn-Rechnung */
.rechnung {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: 4px 24px 8px;
  margin: 30px 0;
}
.rechnung table { width: 100%; border-collapse: collapse; font-size: 16px; }
.rechnung td { padding: 13px 8px; border-bottom: 1px solid var(--papier-dunkel); }
.rechnung tr:last-child td { border-bottom: none; border-top: 2px solid var(--tinte); font-weight: 700; }
.rechnung td.wert {
  font-family: var(--font-mono);
  text-align: right;
  white-space: nowrap;
  color: var(--gruen);
  font-weight: 700;
}
.rechnung tr:last-child td.wert { font-size: 19px; }
.rechnung-fussnote {
  font-size: 13px;
  color: var(--grau);
  max-width: 70ch;
  margin: -14px 0 30px;
}

/* Aufnahme / Formular */
.aufnahme {
  background: var(--tinte);
  color: var(--papier);
  border-radius: 4px;
  padding: 44px 36px;
  margin: 30px 0 20px;
}
.aufnahme h2 { color: #fff; }
.aufnahme .absatz { color: #E4E9EF; }
.aufnahme .absatz strong { color: #fff; }
.voraussetzung {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 3px;
  padding: 18px 20px;
  margin: 22px 0 30px;
  font-size: 15.5px;
  max-width: 62ch;
}
.voraussetzung .v-kopf {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A8C5A8;
  margin-bottom: 8px;
}
.voraussetzung a { color: #fff; font-weight: 600; }

form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld.voll { grid-column: 1 / -1; }
label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B9C6D6;
}
input[type="text"], input[type="email"], select {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  color: #fff;
}
input::placeholder { color: rgba(255,255,255,0.45); }
select { color: #fff; }
select option { color: var(--graphit); }
input:focus-visible, select:focus-visible, .btn-primaer:focus-visible, a:focus-visible {
  outline: 3px solid #8FD6BC;
  outline-offset: 2px;
}
.checkzeile {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: #E4E9EF;
}
.checkzeile input { width: 19px; height: 19px; margin-top: 3px; accent-color: var(--gruen); }
.formular-cta { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.formular-hinweis { font-size: 13px; color: #B9C6D6; max-width: 46ch; }
@media (max-width: 620px) {
  form { grid-template-columns: 1fr; }
  .aufnahme { padding: 34px 22px; }
}

/* Fusszeile */
footer {
  border-top: 3px double var(--tinte);
  margin-top: 70px;
}
.fuss-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 30px 24px 44px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--grau);
}
.fuss-inner a { color: var(--tinte); text-decoration: none; }
.fuss-inner a:hover { text-decoration: underline; }
.fuss-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* sanftes Einblenden */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Rechtsseiten (Impressum, Datenschutzerklärung)
   Nutzen denselben Aktendeckel-Kopf und dieselbe Fusszeile.
   ============================================================ */
.rechtstext {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 40px;
}
.rechtstext .kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 12px;
}
.rechtstext h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 42px);
  line-height: 1.15;
  color: var(--tinte);
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 3px double var(--tinte);
}
.rechtstext h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--tinte);
  margin: 40px 0 12px;
  padding-top: 28px;
  border-top: 1px solid var(--linie);
  max-width: none;
}
.rechtstext h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.rechtstext h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--tinte);
  margin: 22px 0 6px;
}
.rechtstext p { font-size: 16px; margin-bottom: 14px; }
.rechtstext ul { padding-left: 22px; margin-bottom: 14px; }
.rechtstext li { font-size: 16px; margin-bottom: 6px; line-height: 1.6; }
.rechtstext a { color: var(--gruen); text-decoration: none; }
.rechtstext a:hover { text-decoration: underline; }
.rechtstext address { font-style: normal; line-height: 1.8; margin-bottom: 14px; }
.rechtstext strong { color: var(--tinte); }

.toc {
  background: var(--papier-dunkel);
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: 20px 24px;
  margin-bottom: 32px;
}
.toc p {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 10px;
}
.toc ol { padding-left: 20px; }
.toc li { font-size: 14px; margin-bottom: 4px; }
.toc a { color: var(--tinte); }

.platzhalter {
  background: #FFF3CD;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  border: 1px dashed #CCA800;
  color: #664D00;
  border-radius: 2px;
}

/* ============================================================
   Einwilligungs-Banner (Google Analytics, DSGVO-Opt-in)
   Wird von consent.js dynamisch eingefügt.
   ============================================================ */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--tinte);
  color: #E4E9EF;
  border-top: 3px solid var(--gruen);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
}
.consent-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.consent-text {
  flex: 1 1 320px;
  max-width: 74ch;
  font-size: 14px;
  line-height: 1.55;
}
.consent-text a { color: #fff; font-weight: 600; }
.consent-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.consent-btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
}
.consent-accept { background: var(--gruen); color: #fff; }
.consent-accept:hover, .consent-accept:focus-visible { background: #5A9800; }
.consent-decline {
  background: transparent;
  color: #E4E9EF;
  border-color: rgba(255,255,255,0.45);
}
.consent-decline:hover, .consent-decline:focus-visible { background: rgba(255,255,255,0.12); }
@media (max-width: 620px) {
  .consent-buttons { width: 100%; }
  .consent-btn { flex: 1; }
}