/* ===========================================================================
   Upload-Portal — Stylesheet des geschützten Bereichs

   Wird nur von portal-kopf.php geladen, zusätzlich zu style.css. Die
   öffentliche Website bleibt dadurch unverändert schlank; umgekehrt erbt das
   Portal Farbrollen, Schriften, Knöpfe und Formularfelder aus style.css und
   sieht damit trotzdem nach Dentiq aus.

   Bewusst nüchterner als die Website: Hier wird gearbeitet, nicht geworben.
   =========================================================================== */

.portal-seite {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--grund-sanft);
}

/* --- Kopf ------------------------------------------------------------------ */
.portal-kopf {
  background: var(--tinte-800);
  color: var(--weiss);
  box-shadow: var(--schatten-1);
}
.portal-kopf__innen {
  /* Eine Hoehe fuer alles im Kopf. Ohne diese Groesse richtet sich jedes
     Element nach seiner eigenen Schriftgroesse mal Zeilenabstand 1.7 — der
     Bereichs-Chip kam so auf 30 px, die Navigationslinks auf 40 px, das Logo
     auf 32 px. Drei Hoehen nebeneinander, und keine passte zur anderen. */
  --kopf-element: 2.25rem;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-block: .9rem;
}
.portal-kopf__marke {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: var(--kopf-element);
}
.portal-kopf__logo { display: block; height: 1.9rem; width: auto; }

/* Chip und Navigationslinks teilen sich Hoehe und Ausrichtung. line-height: 1
   nimmt der geerbten Zeilenhoehe den Einfluss, zentriert wird ueber flex —
   damit haengt die Hoehe an einer Zahl und nicht mehr an der Schriftgroesse. */
/* FESTE Hoehe, nicht min-height: Der Listencontainer misst 41,9 px, obwohl
   seine Punkte 36 px hoch sind - die ueberzaehligen Pixel stammen aus der
   Grundlinienausrichtung des Zeilenkastens. Mit min-height streckte sich der
   erste Punkt auf die Containerhoehe und die uebrigen nicht; sichtbar als
   Versatz von knapp 3 px. Eine feste Hoehe schlaegt jede Streckung, damit
   sitzen alle Elemente exakt gleich. Nachgemessen am 24.08.2026. */
/* Zentriert wird ueber die Zeilenhoehe: line-height gleich der Elementhoehe
   setzt den Text exakt in die Mitte, ohne Ausrichtungsregeln. Bei
   Navigationsleisten die bewaehrte und robusteste Technik. */
.portal-kopf__bereich,
.portal-nav__link {
  display: inline-block;
  height: var(--kopf-element);
  line-height: var(--kopf-element);
  padding-block: 0;
  white-space: nowrap;
}

.portal-kopf__bereich {
  padding-inline: .7rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte-100);
}

.portal-nav__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* style.css gibt jedem Listenpunkt ab dem zweiten margin-top: .35em - richtig
   fuer Aufzaehlungen im Fliesstext, in einer Navigationsleiste dagegen ein
   Versatz von knapp 6 px gegenueber dem ersten Punkt. Die Hauptnavigation der
   Website nimmt ihn ebenso zurueck (.nav__liste li + li). Genau das war die
   Ursache der ungleichen Hoehen im Kopf; gefunden durch Messen der berechneten
   Abstaende am 24.08.2026. */
.portal-nav__liste li { margin: 0; }

.portal-nav__link {
  padding-inline: .8rem;
  border-radius: var(--radius);
  color: var(--tinte-200);
  font-size: .95rem;
  text-decoration: none;
  transition: background var(--uebergang), color var(--uebergang);
}
.portal-nav__link:hover,
.portal-nav__link:focus-visible { background: rgba(255, 255, 255, .12); color: var(--weiss); }
.portal-nav__link--aktiv { background: var(--marke-600); color: var(--weiss); }
.portal-nav__link--abmelden { color: var(--tinte-300); }

/* --- Inhalt ---------------------------------------------------------------- */
.portal-inhalt { flex: 1; padding-block: 2.5rem 4rem; }
.portal-schmal { max-width: 34rem; margin-inline: auto; }
/* Dieselbe Breite, aber am linken Rand — für ein Formular, das unter einer
   breiten Tabelle steht und nicht in der Mitte schweben soll. */
.portal-schmal--links { margin-inline: 0; }

.portal-titel {
  margin: 0 0 .4rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.2;
}
.portal-untertitel {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .9rem;
  font-size: 1.12rem;
}
.portal-vorspann { margin: 0 0 1.6rem; color: var(--text-leise); }
.portal-zurueck { margin: 0 0 1rem; }

.portal-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.portal-abschnitt { margin-top: 2.5rem; }

.portal-karte {
  padding: 1.6rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gr);
  background: var(--grund);
  box-shadow: var(--schatten-1);
}
.portal-karte--warnung {
  border-color: var(--gold-500);
  background: #fdf9f0;
}
.portal-karte + .portal-karte { margin-top: 1.2rem; }
.portal-leer { text-align: center; padding-block: 2.5rem; }
.portal-leer p { margin: 0 0 .8rem; }

.portal-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.2rem;
  align-items: start;
}

.portal-hinweise { margin-top: 1.8rem; font-size: .95rem; }
.portal-hinweise p { margin: 0 0 .5rem; }
.portal-fussnote { margin-top: 1rem; font-size: .9rem; color: var(--text-leise); }

.portal-link-kasten {
  padding: .8rem;
  border-radius: var(--radius);
  background: var(--tinte-50);
  overflow-wrap: anywhere;
  font-size: .9rem;
}

/* --- Beschreibungslisten --------------------------------------------------- */
.portal-daten {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: .5rem 1rem;
  margin: 0;
}
.portal-daten dt { color: var(--text-leise); font-size: .92rem; }
.portal-daten dd { margin: 0; }

/* --- Tabellen -------------------------------------------------------------- */
.portal-tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gr);
  background: var(--grund);
}
.portal-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.portal-tabelle th,
.portal-tabelle td {
  padding: .75rem .9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linie);
}
.portal-tabelle thead th {
  background: var(--tinte-50);
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-leise);
  white-space: nowrap;
}
.portal-tabelle tbody tr:last-child td { border-bottom: 0; }
.portal-tabelle tbody tr:hover { background: var(--tinte-50); }
.portal-tabelle--eng th,
.portal-tabelle--eng td { padding: .5rem .7rem; font-size: .9rem; }
.portal-tabelle__zeile--still { opacity: .55; }

.portal-datei { display: block; font-weight: 600; overflow-wrap: anywhere; }
.portal-bemerkung {
  display: block;
  margin-top: .15rem;
  font-size: .87rem;
  color: var(--text-leise);
}

.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechts { text-align: right; }
.nichtumbrechen { white-space: nowrap; }
.ereignis {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem;
  color: var(--tinte-700);
}

/* --- Statusanzeigen ---------------------------------------------------------
   Bewusst NICHT ".marke": So heisst in style.css bereits die Wortmarke, also
   das Logo. Zwei Bedeutungen unter einem Klassennamen waeren eine Falle fuer
   den Naechsten - ein eingebundenes Logo im Portal saehe aus wie eine Pille. */
.status {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0 .6rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.status--wartet { background: #fdf1dc; color: #8a5f16; }
.status--fertig { background: #dff3e6; color: #1c6b3c; }
.status--stopp  { background: #fbe3e3; color: #99201f; }
.status--still  { background: var(--tinte-100); color: var(--text-leise); }

/* --- Filterleiste ---------------------------------------------------------- */
.filterleiste {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.4rem;
}
/* Wie im Kopf: Hoehe an eine Zahl haengen statt an die Schriftgroesse. */
.filterleiste .chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding-block: 0;
  line-height: 1;
  text-decoration: none;
}
.chip--aktiv {
  background: var(--tinte-800);
  border-color: var(--tinte-800);
  color: var(--weiss);
}

/* --- Aktionen -------------------------------------------------------------- */
.portal-aktionen { display: flex; flex-direction: column; gap: .5rem; }
.portal-aktionen form { margin: 0; }
.portal-aktionen .feld__hilfe { margin: 0 0 .6rem; }

/* In einer Tabellenzelle stehen die Schaltflaechen nebeneinander statt
   untereinander — sonst wird die Zeile unnoetig hoch. */
.portal-aktionen--zeile {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .4rem;
}

/* In dieser Spalte stehen ein Link und zwei Schaltflaechen nebeneinander.
   Ein <a> und ein <button> richten sich von Haus aus unterschiedlich aus —
   der Link an der Schriftlinie, die Schaltflaeche an ihrer eigenen Box. Ohne
   die gemeinsame Hoehe unten stehen sie sichtbar versetzt. */
.portal-zeilenaktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .3rem .7rem;
}
.portal-zeilenaktionen form { margin: 0; display: flex; }
.portal-zeilenaktionen .pfeil-link,
.portal-zeilenaktionen .knopf-schlicht {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0;
  font-size: .9rem;
  line-height: 1;
}

.knopf-schlicht {
  padding: .2rem .4rem;
  border: 0;
  background: none;
  color: var(--marke-700);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.knopf-schlicht:hover { color: var(--marke-600); }
.knopf-schlicht--gefahr { color: #99201f; }

.knopf--gefahr { background: #99201f; border-color: #99201f; color: var(--weiss); }
.knopf--gefahr:hover { background: #7d1a19; border-color: #7d1a19; }

.portal-gefahr {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
}
.portal-gefahr summary {
  cursor: pointer;
  color: #99201f;
  font-weight: 600;
  font-size: .95rem;
}
.portal-gefahr[open] summary { margin-bottom: .8rem; }
.portal-gefahr .zustimmung { margin-block: .8rem; }

/* --- Speicherbalken -------------------------------------------------------- */
.portal-balken {
  height: .55rem;
  margin: .3rem 0 .4rem;
  border-radius: 999px;
  background: var(--tinte-100);
  overflow: hidden;
}
.portal-balken__fuellung {
  height: 100%;
  background: var(--marke-500);
  transition: width var(--uebergang);
}
.portal-balken__fuellung--warnung { background: #c4531f; }

.kennzahlen--portal { margin-bottom: 1rem; }

/* --- Dateiauswahl ---------------------------------------------------------- */
.upload-auswahl { display: block; margin-top: .7rem; }
.upload-auswahl__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.upload-auswahl__liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  padding: .45rem .7rem;
  font-size: .9rem;
  border-bottom: 1px solid var(--linie);
}
.upload-auswahl__liste li:last-child { border-bottom: 0; }
.upload-auswahl__liste li span:first-child { flex: 1; overflow-wrap: anywhere; }
.upload-auswahl__groesse { color: var(--text-leise); font-variant-numeric: tabular-nums; }
.upload-auswahl__zeile--fehler { background: #fbe3e3; }
.upload-auswahl__hinweis { color: #99201f; font-weight: 600; }
.upload-auswahl__warnung { margin: .6rem 0 0; color: #99201f; font-size: .9rem; }

.upload-warten { margin: .8rem 0 0; color: var(--text-leise); font-size: .93rem; }

.upload-ergebnis {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gr);
  overflow: hidden;
  background: var(--grund);
}
.upload-ergebnis__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .8rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--linie);
  border-left: 3px solid transparent;
  font-size: .93rem;
}
.upload-ergebnis__zeile:last-child { border-bottom: 0; }
.upload-ergebnis__zeile strong { flex: 1; overflow-wrap: anywhere; }
.upload-ergebnis__zeile--gut { border-left-color: #2e8b57; }
.upload-ergebnis__zeile--gut span { color: #1c6b3c; }
.upload-ergebnis__zeile--fehler { border-left-color: #99201f; }
.upload-ergebnis__zeile--fehler span { color: #99201f; }

/* --- Fuß ------------------------------------------------------------------- */
.portal-fuss {
  padding-block: 1.2rem;
  border-top: 1px solid var(--linie-stark);
  background: var(--grund);
  font-size: .9rem;
  color: var(--text-leise);
}
.portal-fuss__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1.5rem;
}
.portal-fuss p { margin: 0; }

/* Ohne align-items und line-height sass der erste Link 5 px hoeher als die
   uebrigen: Ein <a> richtet sich an der Schriftlinie seines Listenpunkts aus,
   und die Punkte sind im Flex-Container unterschiedlich hoch. Gemessen am
   24.08.2026 im Browser, nicht geschaetzt. */
.portal-fuss__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Siehe Navigation oben: li + li aus style.css zurueckziehen. */
.portal-fuss__liste li { margin: 0; }
.portal-fuss__liste a { display: inline-block; line-height: 1.4rem; }

/* Nur für Screenreader — etwa Tabellenköpfe reiner Aktionsspalten */
.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 40rem) {
  .portal-kopf__innen { justify-content: center; }
  .portal-kopfzeile { flex-direction: column; }
  .portal-daten { grid-template-columns: 1fr; gap: .1rem; }
  .portal-daten dd { margin-bottom: .6rem; }
}