/* ------------------------------------------------------------------
   Stilmuster "Bleistiftzeichnung" – Designentwurf, keine finale UI.
   Rahmen werden von assets/sketch.js (Rough.js) gezeichnet; das CSS
   liefert nur den Fallback, falls kein JavaScript läuft.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/kalam-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/kalam-700-latin.woff2") format("woff2");
}

:root {
  --graphit:        #3a3733;
  --graphit-mittel: #6f6a63;
  --graphit-hell:   #a9a29a;
  --papier:         #fcfbf8;
  --papier-schatten:#f2f0ea;
  --schrift-hand:   "Kalam", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 0 4rem;
  background-color: var(--papier);
  background-image:
    linear-gradient(rgba(58,55,51,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,55,51,.05) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  color: var(--graphit);
  font-family: var(--schrift-hand);
  font-size: 17px;
  line-height: 1.5;
}

/* ---------- Skizzen-Ebene ----------------------------------------- */

.skizze-ebene {
  position: absolute;
  top: 0; left: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
[data-skizze] { position: relative; }
[data-skizze] > *:not(.skizze-ebene) { position: relative; z-index: 1; }

/* Fallback ohne JavaScript: schlichte Rahmen */
html:not(.hat-skizze) [data-skizze] { border: 1.3px solid var(--graphit); border-radius: 3px; }
html:not(.hat-skizze) [data-skizze="linie"] { border: none; border-bottom: 1.3px solid var(--graphit); }
html:not(.hat-skizze) [data-skizze="kreis"] { border-radius: 50%; }
html:not(.hat-skizze) [data-skizze="gestrichelt"] { border-style: dashed; border-color: var(--graphit-hell); }

/* ---------- Seitengerüst ------------------------------------------ */

.blatt { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1.25rem; }

.entwurfs-hinweis {
  display: inline-block;
  transform: rotate(-1.4deg);
  padding: .4rem 1rem;
  margin-bottom: 1.3rem;
  color: var(--graphit-mittel);
  font-size: 15px;
}

h1, h2, h3 { font-weight: 700; margin: 0 0 .5rem; line-height: 1.3; }
h1 { font-size: 31px; }
h2 { font-size: 23px; margin-top: 2.2rem; }
h3 { font-size: 18px; }

.notiz { color: var(--graphit-mittel); font-size: 15px; margin: .1rem 0 1rem; }
.trennstrich { height: 8px; margin: 1rem 0 1.4rem; }

/* ---------- Kopfleiste & Patientenkontext ------------------------- */

.kopfleiste {
  display: flex; align-items: center; gap: .9rem;
  padding: .6rem .95rem; margin-bottom: .9rem;
  background: var(--papier-schatten);
}
.kopfleiste__titel { font-weight: 700; font-size: 19px; }
.kopfleiste__pfad  { color: var(--graphit-mittel); font-size: 15px; }
.kopfleiste__rechts { margin-left: auto; display: flex; gap: .6rem; align-items: center; }

.patientenbanner {
  display: flex; flex-wrap: wrap; gap: .35rem 1.7rem;
  padding: .65rem .95rem; margin-bottom: 1.2rem;
}
.patientenbanner__name { font-weight: 700; font-size: 19px; width: 100%; }
.patientenbanner dl { display: flex; gap: .4rem; margin: 0; font-size: 15px; }
.patientenbanner dt { color: var(--graphit-mittel); }
.patientenbanner dd { margin: 0; }

/* ---------- Reiter ------------------------------------------------ */

.reiter-leiste { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .9rem; }
.reiter {
  padding: .45rem 1rem;
  background: transparent; color: var(--graphit-mittel);
  font-family: inherit; font-size: 16px; border: none; cursor: pointer;
}
.reiter[aria-selected="true"] { color: var(--graphit); font-weight: 700; }

/* ---------- Formular ---------------------------------------------- */

.feldgruppe { padding: 1rem 1.15rem 1.3rem; margin-bottom: 1.4rem; }
.feldgruppe__titel { font-size: 18px; font-weight: 700; margin-bottom: .85rem; }

.raster { display: grid; gap: .95rem 1.25rem; grid-template-columns: repeat(12, 1fr); }
.sp-3 { grid-column: span 3; }
.sp-4 { grid-column: span 4; }
.sp-6 { grid-column: span 6; }
.sp-8 { grid-column: span 8; }
.sp-12 { grid-column: span 12; }

.feld { display: flex; flex-direction: column; gap: .25rem; }
.feld__beschriftung { font-size: 15px; color: var(--graphit-mittel); }
.feld__beschriftung .pflicht { color: var(--graphit); font-weight: 700; }
.feld__box { display: block; }

.eingabe, .auswahl, .textfeld {
  width: 100%;
  padding: .42rem .6rem;
  background: transparent; border: none; color: var(--graphit);
  font-family: inherit; font-size: 17px;
}
.textfeld { min-height: 5.5rem; resize: vertical; display: block; }
.eingabe:focus, .auswahl:focus, .textfeld:focus { outline: none; }
.feld__box:focus-within { background: var(--papier-schatten); }

.auswahl {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--graphit-mittel) 50%),
                    linear-gradient(135deg, var(--graphit-mittel) 50%, transparent 50%);
  background-position: calc(100% - 17px) 1.08em, calc(100% - 12px) 1.08em;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

/* Auswahlkästchen und Optionsfelder */
.wahl-liste { display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; padding-top: .25rem; }
.wahl { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-size: 16px; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }

.wahl__kasten { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; }
.wahl__haken {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700; line-height: 1;
  opacity: 0; transform: rotate(-8deg) scale(.6);
  transition: opacity .12s, transform .12s;
  z-index: 2;
}
.wahl input:checked ~ .wahl__kasten .wahl__haken { opacity: 1; transform: rotate(-8deg) scale(1); }
.wahl--rund .wahl__haken { font-size: 26px; transform: scale(.5); }
.wahl--rund input:checked ~ .wahl__kasten .wahl__haken { transform: scale(1); }

/* ---------- Schaltflächen ----------------------------------------- */

.knopf {
  padding: .45rem 1.2rem;
  background: transparent; color: var(--graphit);
  font-family: inherit; font-size: 16px; border: none; cursor: pointer;
}
.knopf:hover { background: var(--papier-schatten); }
.knopf:active { transform: translateY(1px); }
.knopf--haupt { font-weight: 700; }
.knopf--still { color: var(--graphit-mittel); }
.knopf-zeile { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; margin-top: 1.25rem; }
.knopf-zeile__rechts { margin-left: auto; }

/* ---------- Tabelle ----------------------------------------------- */

.tabelle-huelle { padding: .35rem; }
table.liste { width: 100%; border-collapse: collapse; font-size: 16px; }
table.liste th, table.liste td { padding: .48rem .7rem; text-align: left; }
table.liste th { font-weight: 700; color: var(--graphit-mittel); font-size: 15px; }
table.liste thead tr { border-bottom: 1.4px solid var(--graphit-hell); }
table.liste tbody tr { border-bottom: 1.1px dashed var(--graphit-hell); }
table.liste tbody tr:last-child { border-bottom: none; }
table.liste tbody tr:hover { background: var(--papier-schatten); }

/* ---------- Kleinteile -------------------------------------------- */

.merker { display: inline-block; padding: .18rem .6rem; font-size: 14px; color: var(--graphit-mittel); }
.platzhalter {
  display: flex; align-items: center; justify-content: center;
  min-height: 92px; padding: .9rem;
  color: var(--graphit-hell); font-size: 15px; text-align: center;
}
.hinweis-kasten { padding: .75rem .95rem; font-size: 15px; color: var(--graphit-mittel); }

@media (max-width: 760px) {
  .sp-3, .sp-4, .sp-6, .sp-8 { grid-column: span 12; }
  body { font-size: 16px; }
  .kopfleiste { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ==================================================================
   Arbeitsplatz-Gerüst (Fenster, Objektliste, Kerninfo, Kartenreiter)
   ================================================================== */

/* Die Seite scrollt als Ganzes: so wächst und schrumpft der Rahmen der
   Formularfläche mit ihrem Inhalt, statt ihn beim Scrollen zu überlagern. */
body.arbeitsplatz { padding: 0; }

.fenster {
  display: flex; flex-direction: column;
  min-height: calc(100vh - 20px);
  margin: 10px;
  background: var(--papier);
}

.fenster__titel {
  display: flex; align-items: center; gap: .6rem;
  padding: .35rem .8rem;
  font-size: 15px;
  border-bottom: 1.2px dashed var(--graphit-hell);
}
.fenster__titel-text { font-weight: 700; }
.fenster__knoepfe { margin-left: auto; display: flex; gap: .55rem; color: var(--graphit-mittel); }

.menueleiste {
  display: flex; gap: 1.1rem;
  padding: .3rem .8rem;
  font-size: 15px; color: var(--graphit-mittel);
}
.menueleiste span { cursor: default; }
.menueleiste span:hover { color: var(--graphit); }

.werkzeugleiste {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .8rem .5rem;
  border-bottom: 1.2px dashed var(--graphit-hell);
}
.werkzeug { width: 22px; height: 20px; display: inline-block; }
.werkzeug-trenner { width: 1px; height: 20px; border-left: 1.2px dashed var(--graphit-hell); margin: 0 .25rem; }
.werkzeugleiste .feld__box { width: 210px; }
.werkzeugleiste .feld__box--schmal { width: 120px; }

/* ---------- Arbeitsfläche ----------------------------------------- */

.arbeitsflaeche {
  flex: 1;
  display: grid;
  grid-template-columns: 330px 1fr;
  align-items: start;
  gap: .7rem;
  padding: .7rem .8rem .8rem;
}

.spalte { display: flex; flex-direction: column; min-width: 0; gap: .6rem; }

/* ---------- Objektliste ------------------------------------------- */

/* ---------- Fixierte Kopfbereiche ---------------------------------
   Fensterleiste, Menü und Symbolleiste bleiben oben stehen, darunter
   Kerninfo und Kartenreiter. --kopfhoehe wird in app.js gesetzt.      */

/* Spezifität nötig: sonst setzt die allgemeine Regel für Kinder von
   [data-skizze] die Positionierung wieder auf relative zurück. */
.fenster > .fenster__kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 5px;          /* lässt den gezeichneten Fensterrahmen frei */
  background: var(--papier);
}

.kopfbereich {
  position: sticky;
  top: var(--kopfhoehe, 110px);
  z-index: 10;
  padding-bottom: .45rem;
  background: var(--papier);
}
.kopfbereich .reiter-leiste--arbeitsplatz { margin-bottom: 0; }

/* Fallliste bleibt beim Scrollen stehen und behält ihre eigene Rollfläche */
.arbeitsflaeche > .spalte:first-child {
  position: sticky;
  top: calc(var(--kopfhoehe, 110px) + 8px);
  align-self: start;
}
.objektliste {
  display: flex; flex-direction: column;
  max-height: calc(100vh - var(--kopfhoehe, 110px) - 30px);
  padding: .5rem .55rem;
}
.objektliste__titel { font-weight: 700; font-size: 16px; margin-bottom: .4rem; }
.objektliste__suche { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.objektliste__suche .feld__box { flex: 1; }
.objektliste__rollflaeche { flex: 1; overflow: auto; min-height: 0; }

table.fallliste { width: 100%; border-collapse: collapse; font-size: 15px; }
table.fallliste th {
  position: sticky; top: 0;
  background: var(--papier);
  text-align: left; font-weight: 700; font-size: 14px; color: var(--graphit-mittel);
  padding: .25rem .4rem;
  border-bottom: 1.3px solid var(--graphit-hell);
}
table.fallliste td { padding: .3rem .4rem; border-bottom: 1.1px dashed var(--graphit-hell); }
table.fallliste tbody tr { cursor: pointer; }
table.fallliste tbody tr:hover { background: var(--papier-schatten); }
table.fallliste tbody tr[aria-selected="true"] { background: var(--papier-schatten); font-weight: 700; }
table.fallliste tbody tr[aria-selected="true"] td:first-child { position: relative; }

/* ---------- Kerninfo ---------------------------------------------- */

.kerninfo-kopf {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .6rem;
  font-size: 15px;
  background: var(--papier-schatten);
}
.kerninfo-kopf__text { font-weight: 700; }
.kerninfo-kopf__rechts { margin-left: auto; display: flex; align-items: center; gap: .5rem; color: var(--graphit-mittel); }

.kerninfo {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.4fr;
  gap: .5rem;
  padding: .3rem 0;
}
.kerninfo__block { padding: .3rem .55rem .5rem; min-height: 0; }
.kerninfo__titel { font-weight: 700; font-size: 14px; margin-bottom: .1rem; }

/* enge Zeilen, damit die Kerninfo flach bleibt */
.kerninfo__felder { display: block; }
.kerninfo__zeile { font-size: 14px; line-height: 1.35; display: flex; gap: .35rem; margin: 0; }
.kerninfo__zeile dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kerninfo__warnung { font-size: 14px; line-height: 1.3; }
.kerninfo__zeile dt { color: var(--graphit-mittel); margin: 0; }
.kerninfo__zeile dd { margin: 0; }
.kerninfo__warnung { color: var(--graphit); font-size: 15px; display: flex; gap: .4rem; }
.kerninfo__warnung::before { content: "!"; font-weight: 700; }

/* ---------- Formularfläche ---------------------------------------- */

.formularflaeche { padding: .8rem .9rem 1rem; }
.formularflaeche .platzhalter { min-height: 220px; }

.reiter-leiste--arbeitsplatz { margin-bottom: 0; overflow-x: auto; padding-bottom: 2px; }
.reiter-leiste--arbeitsplatz .reiter { white-space: nowrap; font-size: 15px; padding: .35rem .75rem; }

@media (max-width: 1100px) {
  .arbeitsflaeche { grid-template-columns: 1fr; }
  .fenster > .fenster__kopf, .spalte > .kopfbereich { position: static; }
  .arbeitsflaeche > .spalte:first-child { position: static; }
  .objektliste { max-height: 220px; }
  .kerninfo { grid-template-columns: 1fr; }
}

/* ==================================================================
   Kartenreiter "Team Konferenz"
   ================================================================== */

.konferenz__titel { font-size: 26px; margin-bottom: .15rem; }

/* ---------- Teilnehmende ------------------------------------------ */

.teilnehmer {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem 1.6rem;
}
.teilnehmer__eintrag { display: flex; align-items: baseline; gap: .5rem; font-size: 16px; }
.teilnehmer__name { font-weight: 700; }
.teilnehmer__rolle { color: var(--graphit-mittel); font-size: 15px; }
.teilnehmer__kuerzel { margin-left: auto; color: var(--graphit-hell); font-size: 14px; }

/* ---------- Patientenabschnitte (Akkordeon) ----------------------- */

.patientenliste { display: flex; flex-direction: column; gap: .65rem; margin-top: 1.6rem; }
.patient { display: block; }

.patient__kopf {
  width: 100%;
  display: flex; align-items: baseline; gap: .7rem;
  padding: .55rem .8rem;
  background: transparent; border: none;
  font-family: inherit; font-size: 17px; color: var(--graphit);
  text-align: left; cursor: pointer;
}
.patient__kopf:hover { background: var(--papier-schatten); }
.patient__kopf[aria-expanded="true"] { background: var(--papier-schatten); }
.patient__pfeil { width: 1em; color: var(--graphit-mittel); }
.patient__name { font-weight: 700; font-size: 18px; }
.patient__meta { color: var(--graphit-mittel); font-size: 15px; }
.patient__stand { margin-left: auto; white-space: nowrap; }
.patient__kopf[aria-expanded="true"] .patient__pfeil { color: var(--graphit); }

.patient__inhalt { padding: .7rem 0 .3rem; }
.patient__inhalt[hidden] { display: none; }

/* ---------- Themen-Tabelle ---------------------------------------- */

table.themen { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 16px; }
table.themen th {
  text-align: left; font-weight: 700; font-size: 15px; color: var(--graphit-mittel);
  padding: .4rem .7rem; border-bottom: 1.4px solid var(--graphit-hell);
}
table.themen th:nth-child(1), table.themen td:nth-child(1) { width: 15%; }
table.themen th:nth-child(2), table.themen td:nth-child(2) { width: 47%; }
table.themen th:nth-child(3), table.themen td:nth-child(3) { width: 38%; }
table.themen td { padding: .6rem .7rem; vertical-align: top; border-bottom: 1.1px dashed var(--graphit-hell); }
table.themen tbody tr:last-child td { border-bottom: none; }

.themen__bezeichnung { font-weight: 700; }
.themen__journal .notiz { margin: 0; }

.journal-eintrag { margin-bottom: .6rem; }
.journal-eintrag:last-child { margin-bottom: 0; }
.journal-eintrag__kopf { display: flex; gap: .55rem; font-size: 14px; color: var(--graphit-mittel); }
.journal-eintrag__kuerzel { letter-spacing: .04em; }
.journal-eintrag__text { font-size: 16px; }

.textfeld--entscheidung { min-height: 4.6rem; font-size: 16px; }

/* ==================================================================
   Sprachumschalter – bewusst bunt: gehört nicht zum Designentwurf
   ================================================================== */

.sprachwahl {
  margin-left: auto;
  display: flex; align-items: center; gap: .45rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.sprachwahl__stand {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: #0a7ec2;
  padding-right: .3rem;
}

.sprachwahl__hinweis {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #d6006e;
}

.sprachwahl__knopf {
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  padding: .22rem .75rem;
  border: 2px solid #0a7ec2;
  border-radius: 999px;
  background: #ffffff;
  color: #0a7ec2;
  cursor: pointer;
  transition: transform .08s, box-shadow .12s;
}
.sprachwahl__knopf:hover { box-shadow: 0 0 0 3px rgba(10,126,194,.18); }
.sprachwahl__knopf:active { transform: translateY(1px); }
.sprachwahl__knopf[aria-pressed="true"] {
  border-color: #d6006e;
  background: linear-gradient(90deg, #d6006e, #ff8a3d);
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(214,0,110,.35);
}
.sprachwahl__knopf:focus-visible { outline: 3px solid #ffc107; outline-offset: 2px; }

@media (max-width: 760px) {
  .sprachwahl__stand {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: #0a7ec2;
  padding-right: .3rem;
}

.sprachwahl__hinweis { display: none; }
}

/* ---------- Schieber "Kompakt" ------------------------------------- */

.werkzeugzeile { display: flex; justify-content: flex-end; margin-top: 1.5rem; }

.schieber { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; }
.schieber__text { font-size: 16px; color: var(--graphit-mittel); }
.schieber__eingabe { position: absolute; opacity: 0; pointer-events: none; }

.schieber__spur {
  position: relative;
  display: inline-block;
  width: 48px; height: 23px;
}
/* höhere Spezifität nötig, sonst greift die allgemeine Regel für
   Kinder von [data-skizze] und macht den Knebel wieder relativ */
.schieber__spur > .schieber__knebel {
  position: absolute;
  display: block;
  top: 3px; left: 3px;
  width: 18px; height: 17px;
  z-index: 2;
  transition: left .14s ease;
}
.schieber__eingabe:checked ~ .schieber__spur > .schieber__knebel { left: 27px; }
.schieber__eingabe:focus-visible ~ .schieber__spur { outline: 2px dashed var(--graphit-mittel); outline-offset: 3px; }
.schieber:hover .schieber__spur { background: var(--papier-schatten); }