/* --------------------------------------------------------------------------
   18. Patientenakten
   --------------------------------------------------------------------------
   Bewusst dokumentartig statt kachelartig: das Patientenregister ist eine
   Tabelle mit Buchstabengruppen, das Patientenblatt besteht aus Linienfeldern
   (nur eine Unterkante, keine Kästen), die Akten stehen auf einer Zeitleiste
   und eine einzelne Akte ist ein zweispaltiges Formular (links Bezeichnung,
   rechts Inhalt). Rot wird sparsam eingesetzt: Nummern, Fokus, neueste Akte,
   Allergiehinweis. */

/* --- Gemeinsame Bausteine ------------------------------------------------ */
/* Kein Kasten: Bereiche werden nur durch Abstand, Trennlinien und
   Schrifthierarchie gegliedert. */
.md-panel {
  padding: 0;
}

.md-feld {
  margin-top: 18px;
}

.md-feld:first-child {
  margin-top: 0;
}

.md-feld > label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--wood-text-muted);
}

.md-input {
  display: block;
  width: 100%;
  padding: 8px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--leather-edge);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--wood-text);
  color-scheme: dark;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.md-input::placeholder {
  color: var(--wood-text-placeholder);
}

.md-input:hover {
  border-bottom-color: rgba(130, 170, 190, 0.4);
}

.md-input:focus {
  outline: none;
  border-bottom-color: var(--brass-bright);
  box-shadow: 0 1px 0 var(--brass-bright);
}

/* Mehrzeilige Felder wie einzeilige: nur eine Unterkante, wachsen mit dem
   Text mit (siehe passeTextareasAn in js/views/patientenakten.js). */
textarea.md-input {
  min-height: 40px;
  line-height: 1.55;
  resize: none;
  overflow: hidden;
}

/* Allergiefeld: nur wenn wirklich etwas Relevantes eingetragen ist (nicht
   bei "/", "keine" o. ä., siehe hatEintrag), bekommt es eine rote Kante. */
.md-feld--warn.md-feld--aktiv textarea.md-input {
  padding-left: 12px;
  border-left: 3px solid var(--status-danger-bright);
  border-bottom-color: transparent;
}

.md-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

/* Beide Spalten gleich hoch beginnen lassen (sonst rutscht die zweite durch
   die :first-child-Regel oben nach unten). */
.md-grid-2 > .md-feld,
.md-grid-2 > .md-feld:first-child {
  margin-top: 20px;
}

@media (max-width: 560px) {
  .md-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   18a. Patientenregister
   -------------------------------------------------------------------------- */
.pat-kopf {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}

.pat-suche {
  position: relative;
  flex: 1;
  max-width: 520px;
}

.pat-suche svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--wood-text-soft);
  pointer-events: none;
}

.pat-suche input {
  width: 100%;
  padding: 12px 14px 12px 43px;
  background: var(--leather-800);
  border: 1px solid var(--leather-edge-soft);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--wood-text);
  transition: border-color 0.15s ease;
}

.pat-suche input::placeholder {
  color: var(--wood-text-placeholder);
}

.pat-suche input:hover {
  border-color: rgba(130, 170, 190, 0.34);
}

.pat-suche input:focus {
  outline: none;
  border-color: var(--brass-bright);
}

.pat-kopf .btn {
  margin-left: auto;
}

.pat-register {
  border-top: 1px solid var(--leather-edge);
}

.pat-spaltenkopf,
.pat-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px 80px 150px 16px;
  align-items: center;
  column-gap: 20px;
  padding-left: 14px;
  padding-right: 14px;
}

.pat-spaltenkopf {
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--wood-text-soft);
  border-bottom: 1px solid var(--leather-edge-soft);
}

.pat-gruppe {
  padding: 24px 14px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brass-bright);
}

.pat-zeile {
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--leather-edge-soft);
  cursor: pointer;
  transition: background 0.12s ease;
}

.pat-zeile:hover {
  background: rgba(130, 170, 190, 0.06);
}

.pat-zeile__name {
  display: block;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--wood-text);
}

.pat-zeile__titel {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pat-zeile__titel > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fundstelle bei einer Inhaltssuche: wo steht der Suchbegriff. */
.pat-zeile__treffer {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 400;
  color: var(--wood-text-muted);
}

.pat-zeile__treffer-ort {
  margin-right: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wood-text-soft);
}

.pat-zeile mark {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(217, 68, 82, 0.28);
  color: #ffffff;
}

.pat-zeile__warn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--status-danger-bright);
}

.pat-zeile__warn::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--status-danger-bright);
}

.pat-zeile__geb,
.pat-zeile__akten,
.pat-zeile__letzte {
  font-size: 13px;
  color: var(--wood-text-muted);
  font-variant-numeric: tabular-nums;
}

.pat-zeile__pfeil {
  color: var(--wood-text-placeholder);
  transition: color 0.12s ease, transform 0.12s ease;
}

.pat-zeile:hover .pat-zeile__pfeil {
  color: var(--brass-bright);
  transform: translateX(2px);
}

@media (max-width: 820px) {
  .pat-spaltenkopf,
  .pat-zeile {
    grid-template-columns: minmax(0, 1fr) 70px 16px;
  }
  .pat-spaltenkopf > :nth-child(2),
  .pat-spaltenkopf > :nth-child(4),
  .pat-zeile__geb,
  .pat-zeile__letzte {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   18b. Patientenseite
   --------------------------------------------------------------------------
   Erst lesen, dann bearbeiten: oben der Kopf mit Name und Stammdaten in einer
   Zeile, darunter die medizinischen Hinweise (Allergien als rote Zeile), dann
   die Akten in voller Breite. Das Bearbeiten-Formular klappt nur nach Klick
   auf "Bearbeiten" auf (Klasse .patient-seite--bearbeiten am Abschnitt). */
.patient-seite__zurueck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 26px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wood-text-muted);
  transition: color 0.15s ease;
}

.patient-seite__zurueck:hover {
  color: var(--brass-bright);
}

.pkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 32px;
}

.pkopf__id {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.pkopf__avatar {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brass);
  border-radius: var(--radius-lg);
  color: var(--brass-bright);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pkopf__text {
  min-width: 0;
}

.pkopf__name {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--wood-text);
  overflow-wrap: anywhere;
}

.pkopf__daten {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin-top: 14px;
}

.pkopf__eintrag {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pkopf__label {
  font-size: 12.5px;
  color: var(--wood-text-soft);
}

.pkopf__wert {
  font-size: 15px;
  font-weight: 500;
  color: var(--wood-text);
}

.pkopf__leer {
  font-size: 14px;
  color: var(--wood-text-placeholder);
}

.pkopf__aktionen {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}

/* --- Hinweise (Lese-Ansicht) ---------------------------------------------- */
.phinweise {
  margin: 30px 0 0;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--leather-edge-soft);
}

.phinweise .akte-hinweis {
  margin-top: 0;
}

.phinweise .akte-hinweis__zeile,
.phinweise__zeile {
  white-space: pre-line;
}

.phinweise__zeile {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--wood-text);
}

.phinweise .akte-hinweis + .phinweise__zeile {
  margin-top: 16px;
}

.phinweise__label {
  margin-right: 10px;
  font-weight: 600;
  color: var(--wood-text-soft);
}

.phinweise__leer {
  margin: 0;
  font-size: 14px;
  color: var(--wood-text-placeholder);
}

/* --- Bearbeiten-Formular --------------------------------------------------- */
.patient-seite--bearbeiten .pkopf__daten,
.patient-seite--bearbeiten .phinweise,
.patient-seite--bearbeiten #btn-patient-bearbeiten {
  display: none;
}

.pedit {
  margin: 30px 0 0;
  padding: 0 0 32px;
  border-bottom: 1px solid var(--leather-edge-soft);
}

.pedit[hidden] {
  display: none;
}

.pedit__titel {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 30px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wood-text-muted);
}

.pedit__titel:first-of-type {
  margin-top: 0;
}

.pedit__titel::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--leather-edge-soft);
}

.md-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 32px;
}

.md-grid-3 > .md-feld,
.md-grid-3 > .md-feld:first-child {
  margin-top: 20px;
}

.pedit__aktionen {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

/* --- Fuß der Seite ---------------------------------------------------------- */
.pfuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--leather-edge-soft);
}

.pfuss__meta {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--wood-text-soft);
}

.pfuss__loeschen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wood-text-soft);
  transition: color 0.15s ease;
}

.pfuss__loeschen:hover {
  color: var(--status-danger-bright);
}

.pfuss__loeschen[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .md-grid-3 {
    grid-template-columns: 1fr;
  }
  .pkopf__name {
    font-size: 28px;
  }
  .pkopf__avatar {
    width: 54px;
    height: 54px;
    font-size: 18px;
  }
}

/* --- Akten-Bereich ---------------------------------------------------------- */
.pakten {
  margin-top: 36px;
}

.pakten__suche {
  width: 280px;
  max-width: 100%;
  padding: 9px 14px;
  background: var(--leather-800);
  border: 1px solid var(--leather-edge-soft);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--wood-text);
  transition: border-color 0.15s ease;
}

.pakten__suche[hidden] {
  display: none;
}

.pakten__suche::placeholder {
  color: var(--wood-text-placeholder);
}

.pakten__suche:hover {
  border-color: rgba(130, 170, 190, 0.34);
}

.pakten__suche:focus {
  outline: none;
  border-color: var(--brass-bright);
}

.pakten__leer {
  padding: 48px 0 24px;
  text-align: center;
}

.pakten__leer[hidden] {
  display: none;
}

.pakten__leer p {
  margin: 0 0 16px;
  font-size: 14.5px;
  color: var(--wood-text-muted);
}

.akten-monat {
  margin: 34px 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wood-text-soft);
}

.akten-monat:first-child {
  margin-top: 4px;
}

/* --- Akten-Zeitleiste ---------------------------------------------------- */
.pakten__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}

.pakten__kopf h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pakten__anzahl {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--wood-text-soft);
}

.akten-zeitleiste {
  position: relative;
  max-width: 980px;
  padding-left: 32px;
}

.akten-zeitleiste::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 6px;
  width: 1px;
  background: var(--leather-edge);
}

/* Einträge ohne Kasten: getrennt durch Abstand + Haarlinie. Beim Überfahren
   wird nur die Akte-Nummer unterstrichen. */
.akte-eintrag {
  position: relative;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--leather-edge-soft);
  cursor: pointer;
}

.akte-eintrag:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.akte-eintrag:hover .akte-eintrag__nr,
.akte-eintrag:focus-visible .akte-eintrag__nr {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.akte-eintrag:focus-visible {
  outline: none;
}

.akte-eintrag__punkt {
  position: absolute;
  left: -32px;
  top: 8px;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border: 2px solid var(--wood-text-soft);
  border-radius: 50%;
  background: var(--leather-800);
}

.akte-eintrag--neu .akte-eintrag__punkt {
  border-color: var(--brass-bright);
  background: var(--brass-bright);
}

.akte-eintrag__loeschen {
  position: absolute;
  top: -4px;
  right: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--wood-text-soft);
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.akte-eintrag:hover .akte-eintrag__loeschen,
.akte-eintrag:focus-within .akte-eintrag__loeschen,
.akte-eintrag__loeschen:focus-visible {
  opacity: 1;
}

.akte-eintrag__loeschen:hover {
  color: var(--status-danger-bright);
  background: var(--status-danger-soft);
}

@media (hover: none) {
  .akte-eintrag__loeschen {
    opacity: 1;
  }
}

.akte-eintrag__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding-right: 40px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--wood-text-muted);
  font-variant-numeric: tabular-nums;
}

.akte-eintrag__nr {
  font-size: 17px;
  font-weight: 700;
  color: var(--brass-bright);
}

.akte-eintrag__autor::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 14px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--wood-text-soft);
}

/* Beschriftete Kurzfassung: zeigt schon in der Liste, WAS wo eingetragen ist
   (nur ausgefüllte Felder - der Behandlungsgrund ist Pflicht und steht immer
   da). */
.akte-eintrag__felder {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 12px 24px;
  margin: 0;
}

.akte-eintrag__felder dt {
  padding-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--wood-text-soft);
}

.akte-eintrag__felder dd {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--wood-text);
  white-space: pre-line;
}

.akte-eintrag__felder dd.akte-eintrag__haupt {
  font-weight: 600;
}

@media (max-width: 560px) {
  .akte-eintrag__felder {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .akte-eintrag__felder dd {
    margin-bottom: 10px;
  }
}

/* --------------------------------------------------------------------------
   18c. Akte als Dokument
   --------------------------------------------------------------------------
   Links die Geschichte des Falls (Überschrift = Behandlungsgrund), rechts eine
   schmale Spalte mit den Eckdaten. Ansicht und Formular haben dasselbe Raster,
   die öffentliche Zugriffslink-Seite (akte.html) nutzt es ebenfalls.
   Selektor bewusst ".modal.modal--akte" (Spezifität 2): modals.css wird NACH
   dieser Datei geladen und setzt für ".modal" Breite/Padding/Hintergrund -
   mit nur einer Klasse würde das hier überschrieben. */
.modal.modal--akte {
  position: relative;
  width: 1040px;
  max-width: 94vw;
  min-height: min(600px, 90vh);
  max-height: 92vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--leather-800);
}

.modal.modal--schmal {
  width: 540px;
  min-height: 0;
}

/* Kopf der schmalen Dialoge (Patient anlegen, Zugriffslink) */
.akte-blatt__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 34px 40px 26px;
}

.akte-blatt__kopf h3 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.akte-blatt__sub {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--wood-text-muted);
}

.akte-blatt__kopf .modal__close {
  width: 36px;
  height: 36px;
  font-size: 16px;
}

.akte-blatt__kicker {
  display: block;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brass-bright);
}

.modal--akte .modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 40px 14px;
}

.modal--akte .modal__footer {
  flex: 0 0 auto;
  align-items: center;
  gap: 22px;
  margin-top: 0;
  padding: 18px 40px;
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid var(--leather-edge-soft);
}

.modal--akte .modal__footer .btn {
  padding: 12px 26px;
  font-size: 13.5px;
}

/* Fußzeilen-Aktionen als schlichter Text statt Buttons */
.akte-fuss__link,
.akte-fuss__loeschen {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wood-text-muted);
  transition: color 0.12s ease;
}

.akte-fuss__link:hover {
  color: var(--wood-text);
}

.akte-fuss__loeschen {
  margin-right: auto;
  color: var(--wood-text-soft);
}

.akte-fuss__loeschen:hover {
  color: var(--status-danger-bright);
}

.akte-fuss__link[hidden],
.akte-fuss__loeschen[hidden] {
  display: none;
}

/* --- Dokument: zwei Spalten -------------------------------------------- */
.akte-blatt__schliessen {
  position: absolute;
  top: 20px;
  right: 22px;
  z-index: 3;
  width: 38px;
  height: 38px;
  font-size: 16px;
}

.akte-blatt {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  overflow-y: auto;
}

.akte-blatt__haupt {
  min-width: 0;
  padding: 44px 52px 48px;
}

.akte-blatt__haupt h3 {
  max-width: 640px;
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.akte-blatt__seite {
  padding: 84px 32px 40px;
  background: rgba(0, 0, 0, 0.18);
  border-left: 1px solid var(--leather-edge-soft);
}

.akte-blatt__seite-innen {
  position: sticky;
  top: 84px;
  margin: 0;
}

.akte-seite > div {
  margin-bottom: 26px;
}

.akte-seite dt {
  margin-bottom: 3px;
  font-size: 12.5px;
  color: var(--wood-text-soft);
}

.akte-seite dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--wood-text);
  overflow-wrap: anywhere;
}

.akte-seite__hinweis {
  margin-top: 22px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--wood-text-soft);
}

/* --- Inhalt der Ansicht -------------------------------------------------- */
.akte-hinweis {
  margin-top: 28px;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--status-danger-bright);
}

.akte-hinweis__zeile {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--wood-text);
}

.akte-hinweis__zeile + .akte-hinweis__zeile {
  margin-top: 4px;
}

.akte-hinweis__label {
  margin-right: 10px;
  font-weight: 700;
  color: var(--status-danger-bright);
}

.akte-abschnitt {
  margin-top: 30px;
}

.akte-abschnitt__label {
  margin: 0 0 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wood-text-soft);
}

.akte-abschnitt p {
  max-width: 66ch;
  margin: 0;
  white-space: pre-wrap;
  font-size: 16px;
  line-height: 1.7;
  color: var(--wood-text);
  overflow-wrap: anywhere;
}

.akte-leer {
  margin-top: 30px;
  color: var(--wood-text-placeholder);
}

/* --- Formular -------------------------------------------------------------- */
.akte-titelfeld {
  margin-top: 30px;
}

.akte-blatt__haupt .md-feld {
  margin-top: 26px;
}

.md-input--gross {
  padding: 10px 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Zum Schreiben längerer Texte bleibt eine sichtbare Schreibfläche. */
.akte-blatt__haupt textarea.md-input {
  min-height: 92px;
  padding: 12px 14px;
  font-size: 15.5px;
  overflow: hidden;
  background: rgba(130, 170, 190, 0.05);
  border: 1px solid var(--leather-edge-soft);
  border-radius: 6px;
}

.akte-blatt__haupt textarea.md-input:hover {
  border-color: rgba(130, 170, 190, 0.34);
}

.akte-blatt__haupt textarea.md-input:focus {
  border-color: var(--brass-bright);
  box-shadow: none;
}

.akte-blatt__seite .md-feld {
  margin-top: 0;
}

@media (max-width: 820px) {
  .akte-blatt {
    grid-template-columns: 1fr;
  }
  .akte-blatt__haupt {
    padding: 34px 24px 28px;
  }
  .akte-blatt__seite {
    padding: 28px 24px;
    border-left: none;
    border-top: 1px solid var(--leather-edge-soft);
  }
  .akte-blatt__seite-innen {
    position: static;
  }
  .akte-blatt__kopf,
  .modal--akte .modal__body,
  .modal--akte .modal__footer {
    padding-left: 22px;
    padding-right: 22px;
  }
  .modal--akte .modal__footer {
    flex-wrap: wrap;
    gap: 12px 18px;
  }
  .akte-blatt__haupt h3 {
    font-size: 26px;
  }
}

/* --- Zugriffslink-Dialog -------------------------------------------------- */
.akte-link__erklaerung,
.akte-link__info {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--wood-text-muted);
}

.akte-link__info {
  margin-top: 14px;
  font-size: 13px;
  color: var(--wood-text-soft);
}

/* --------------------------------------------------------------------------
   18d. Kollisionsschutz, Ähnlichkeitsliste
   -------------------------------------------------------------------------- */
.anwesenheit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 13.5px;
  color: var(--wood-text-muted);
}

.anwesenheit[hidden] {
  display: none;
}

.modal--akte .anwesenheit {
  margin: 18px 0 4px;
}

.anwesenheit__punkt {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--status-done);
  animation: online-dot-puls 2.4s ease-in-out infinite alternate;
}

.konflikt-hinweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 22px;
  padding: 12px 0 12px 14px;
  border-left: 3px solid var(--status-open);
  font-size: 13px;
  line-height: 1.5;
  color: var(--wood-text);
}

.konflikt-hinweis[hidden] {
  display: none;
}

.modal--akte .konflikt-hinweis {
  margin: 14px 0 4px;
}

.konflikt-hinweis__aktion {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brass-bright);
  white-space: nowrap;
}

.konflikt-hinweis__aktion:hover {
  text-decoration: underline;
}

.konflikt-hinweis__aktion[hidden] {
  display: none;
}

.aehnlich {
  margin-top: 18px;
}

.aehnlich[hidden] {
  display: none;
}

.aehnlich__titel {
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--status-open);
}

.aehnlich__titel--warn {
  color: var(--status-danger-bright);
}

.aehnlich__zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 10px 0;
  text-align: left;
  border-bottom: 1px solid var(--leather-edge-soft);
}

.aehnlich__zeile:hover .aehnlich__name {
  color: var(--brass-bright);
}

.aehnlich__name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--wood-text);
}

.aehnlich__info {
  font-size: 12.5px;
  color: var(--wood-text-soft);
}