:root {
  color-scheme: dark;
  --bg: #0d1117;
  --leiste: #11161d;
  --flaeche: #161b22;
  --flaeche-2: #1c222b;
  --hover: #1f2630;
  --aktiv: #1f2d42;
  --rand: #262d37;
  --text: #d7dde6;
  --leise: #8590a0;
  --akzent: #4c8dff;
  --akzent-dunkel: #2f6fe0;
  --gut: #3fb950;
  --warn: #d29922;
  --schlecht: #f2564b;
  --term-bg: #0b0e13;
  --radius: 8px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --hoehe: 100dvh;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, select, textarea { font: inherit; color: inherit; }

button {
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}
button:hover { background: var(--hover); border-color: #343c48; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}
button.haupt { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; font-weight: 600; }
button.haupt:hover { background: var(--akzent); }
button.haupt:disabled { opacity: .55; cursor: wait; }
button.gefahr:hover { border-color: var(--schlecht); color: #ffb3ad; }
button.klein { padding: 3px 10px; font-size: 13px; }
button.link { background: none; border: 0; padding: 0; color: var(--leise); text-decoration: underline; }
button.link:hover { color: var(--text); }
button.symbol { padding: 4px 9px; font-size: 16px; line-height: 1; }
button.symbol[aria-pressed="true"] { background: var(--aktiv); border-color: var(--akzent-dunkel); }

input, select, textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 7px 9px;
}
input::placeholder, textarea::placeholder { color: #5d6776; }

label { display: block; margin: 10px 0 0; color: var(--leise); font-size: 13px; }
label > input, label > select { margin-top: 4px; color: var(--text); font-size: 14px; }

.leise { color: var(--leise); }
.klein { font-size: 12px; }
.fehler { color: var(--schlecht); min-height: 1.2em; margin: 8px 0 0; font-size: 13px; }

.marke { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; letter-spacing: .2px; }
.logo {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 6px;
  background: linear-gradient(135deg, #1f3a66, #18263d);
  color: #7fb0ff; font: 700 12px/1 var(--mono);
}
.logo.gross { width: 64px; height: 64px; font-size: 26px; border-radius: 14px; }

/* ---------- Anmeldung ---------- */

#login { height: var(--hoehe); display: grid; place-items: center; padding: 16px; }
.karte {
  width: min(360px, 100%);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 24px;
}
.karte .leise { margin: 4px 0 8px; }
.karte button.haupt { width: 100%; margin-top: 10px; padding: 9px; }

/* ---------- Grundaufbau ---------- */

#app { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: var(--hoehe); }

#leiste {
  background: var(--leiste);
  border-right: 1px solid var(--rand);
  display: flex; flex-direction: column;
  min-height: 0;
}
.leiste-kopf { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 10px; border-bottom: 1px solid var(--rand); }
#liste { flex: 1; overflow-y: auto; padding: 6px 6px 12px; }
.leiste-fuss {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--rand); font-size: 12px;
}

.gruppe { margin-top: 10px; }
.gruppe-kopf {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; color: var(--leise);
}
.gruppe-kopf .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gruppe-kopf .info { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; opacity: .8; }
.gruppe-leer { padding: 2px 8px 4px 22px; font-size: 12px; color: #5d6776; }

.punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #4a525e; }
.punkt.gut { background: var(--gut); }
.punkt.warn { background: var(--warn); }
.punkt.schlecht { background: var(--schlecht); }

.eintrag {
  display: flex; align-items: flex-start; gap: 9px;
  width: 100%; text-align: left;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  padding: 7px 8px; margin: 1px 0;
}
.eintrag:hover { background: var(--hover); border-color: transparent; }
.eintrag.gewaehlt { background: var(--aktiv); border-color: #2b4266; }
.eintrag .punkt { margin-top: 6px; }
.eintrag .text { flex: 1; min-width: 0; }
.eintrag .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eintrag .meta { font-size: 12px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.eintrag.neu .name { font-weight: 700; color: #fff; }
.eintrag .neu-punkt { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); margin-top: 7px; flex: none; }
.eintrag.neu .neu-punkt { display: block; }
.eintrag.beendet .name { color: var(--leise); }

/* ---------- Mitte ---------- */

#mitte { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--term-bg); }

#kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; min-height: 52px;
  background: var(--flaeche); border-bottom: 1px solid var(--rand);
}
#menue { display: none; }
.titel { flex: 1; min-width: 0; }
#titel-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#titel-info { font-size: 12px; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marke-status {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px;
  background: #1d2a1f; color: #7ee087; border: 1px solid #2a4a2f; white-space: nowrap;
}
.marke-status.warn { background: #2e2614; color: #f0c15a; border-color: #4d3f1c; }
.marke-status.aus { background: #1d2128; color: var(--leise); border-color: var(--rand); }
.aktionen { display: flex; gap: 6px; flex-wrap: nowrap; }
.aktionen button { font-size: 13px; padding: 4px 10px; }

#banner {
  background: #3a2a10; color: #f6d38b; border-bottom: 1px solid #5a4218;
  padding: 6px 12px; font-size: 13px; text-align: center;
}

/* Das Eingabefeld (⌨) liegt über dem Terminal, statt es kleiner zu machen. Sonst ändert sich die
   Terminalgröße der Session, und bei allen anderen Browsern dieser Session zerfällt das Bild.
   Bei offenem Eingabefeld rückt das Terminal um dessen Höhe (--leiste) nach oben; die obersten
   Zeilen sind dann verdeckt, die Eingabestelle unten bleibt sichtbar. */
#termrahmen { position: relative; flex: 1; min-height: 0; overflow: hidden; }
/* Die Größe des Terminals kommt vom Server (kleinster Browser, der zuschaut). Ist sie kleiner als
   der Platz hier, sitzt das Terminal unten links. Die Bildschirmtastatur des Handys (--tastatur)
   verkleinert es nicht, sie schiebt es wie das Eingabefeld nur nach oben. */
#term {
  position: absolute; inset: auto 4px calc(4px + var(--leiste, 0px)) 12px;
  height: calc(100% - 12px + var(--tastatur, 0px));
  display: flex; flex-direction: column; justify-content: flex-end;
}
#klein {
  position: absolute; top: 8px; right: 12px; z-index: 4; max-width: calc(100% - 24px);
  background: var(--flaeche); color: var(--leise); border: 1px solid var(--rand); border-radius: 6px;
  padding: 4px 8px; font-size: 12px; pointer-events: none;
}
#term .xterm-viewport { scrollbar-width: thin; scrollbar-color: #2c333d transparent; }
#leer {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--leise); text-align: center; padding: 24px; background: var(--term-bg);
}

#eingabe { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; border-top: 1px solid var(--rand); background: var(--flaeche); padding: 8px 10px; }
#tasten { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
#tasten button { font: 12px/1 var(--mono); padding: 7px 10px; flex: none; }
#tasten .trenner { flex: none; width: 1px; margin: 3px 2px; background: var(--rand); }
#tasten button.wort { font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; border-color: var(--akzent-dunkel); }
#schreiben { display: flex; gap: 8px; align-items: flex-end; }
#schreiben textarea { resize: none; max-height: 160px; min-height: 38px; line-height: 1.4; font-size: 15px; }
#schreiben button { height: 38px; }

/* ---------- Dialog & Meldung ---------- */

dialog {
  width: min(460px, calc(100vw - 32px));
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--rand); border-radius: 12px; padding: 20px;
}
dialog::backdrop { background: rgba(3, 6, 10, .65); }
dialog h2 { margin: 0 0 6px; font-size: 17px; }
fieldset { border: 0; padding: 0; margin: 12px 0 0; }
legend { color: var(--leise); font-size: 13px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chips button { border-radius: 99px; padding: 4px 12px; font-size: 13px; }
.chips button[aria-pressed="true"] { background: var(--aktiv); border-color: var(--akzent); color: #fff; }
.knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
#rechner-hinweis { margin: 4px 0 0; min-height: 1em; }

#meldung {
  position: fixed; right: 16px; bottom: 16px; max-width: min(420px, calc(100vw - 32px));
  background: #1a2638; color: #dbe7ff; border: 1px solid #2c4466;
  padding: 10px 14px; border-radius: var(--radius); z-index: 50; font-size: 13px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
/* Einfache Ansicht: Meldungen über dem Eingabebereich, nicht auf dem Senden-Knopf */
body.einfach #meldung { bottom: 190px; }

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 820px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  #leiste {
    position: fixed; z-index: 30; top: 0; bottom: 0; left: 0;
    width: min(86vw, 320px);
    transform: translateX(-102%); transition: transform .18s ease;
    box-shadow: 8px 0 24px rgba(0, 0, 0, .4);
  }
  body.leiste-offen #leiste { transform: none; }
  #vorhang { position: fixed; inset: 0; z-index: 25; background: rgba(3, 6, 10, .55); }
  #menue { display: inline-block; }
  #kopf { padding: 8px; gap: 8px; }
  .aktionen button:not(.symbol) { padding: 4px 8px; font-size: 12px; }
  .aktionen [data-aktion="rename"] { display: none; }
  #term { inset: auto 2px calc(2px + var(--leiste, 0px)) 6px; height: calc(100% - 8px + var(--tastatur, 0px)); }
}

/* ---------- Zugangsfreigabe ---------- */

button.breit { width: 100%; padding: 8px; }
.oder { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--leise); font-size: 12px; }
.oder::before, .oder::after { content: ""; flex: 1; border-top: 1px solid var(--rand); }
.code {
  margin: 14px 0; padding: 14px; text-align: center;
  font: 700 30px/1 var(--mono); letter-spacing: 4px; color: #fff;
  background: var(--bg); border: 1px solid var(--rand); border-radius: var(--radius);
}
#freigabe-karte p { margin: 8px 0; }
#freigabe-karte button { margin-top: 8px; }

#anfragen { background: #14233b; border-bottom: 1px solid #2b4266; }
.anfrage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; font-size: 13px; }
.anfrage + .anfrage { border-top: 1px solid #2b4266; }
.anfrage .text { flex: 1; min-width: 200px; }
.anfrage b { font-family: var(--mono); letter-spacing: 1px; color: #fff; }

.freigabe { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rand); }
.freigabe .text { flex: 1; min-width: 0; }
#freigaben-liste:empty::after { content: "Keine aktiven Freigaben."; display: block; color: var(--leise); padding: 8px 0; }
.anfrage input { width: 150px; padding: 4px 8px; font-size: 13px; }

/* ---------- Vorschau ---------- */

a.knopf {
  display: inline-block; border-radius: 6px; padding: 5px 12px; text-decoration: none;
  background: var(--akzent-dunkel); border: 1px solid var(--akzent-dunkel); color: #fff; font-weight: 600;
}
a.knopf:hover { background: var(--akzent); }
#vorschau-link { font-family: var(--mono); font-size: 13px; margin-top: 10px; }
#vorschau-dialog code { font-size: 12px; }
@media (max-width: 820px) { .aktionen [data-aktion="vorschau"] { padding: 4px 8px; } }

/* ---------- Links ---------- */

.link-zeile { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--rand); }
.link-zeile .adresse {
  flex: 1; min-width: 0; font: 12px/1.35 var(--mono); color: #9cc3ff;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all;
}
.link-zeile .knopf, .link-zeile button { flex: none; padding: 4px 10px; font-size: 13px; }
#links-liste:empty::after { content: "Keine Adressen gefunden."; display: block; color: var(--leise); padding: 8px 0; }
@media (max-width: 820px) { .aktionen [data-aktion="links"] { padding: 4px 8px; } }
.anfrage select { width: auto; padding: 4px 6px; font-size: 13px; }
.freigabe button { flex: none; }

/* Neue Fassung (fernterminal.eigenfunke.com): kleine Marke neben dem Namen */
.neu-marke {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #0b0e13; background: #56d364; border-radius: 4px; padding: 1px 5px; margin-left: 4px;
  vertical-align: 2px;
}

/* ---------- Eingebauter Browser (browser-fenster.js) ---------- */

.bf {
  position: fixed; z-index: 20;
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--flaeche); border: 1px solid #343c48; border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  overflow: hidden;
}
.bf.dock {
  position: relative; grid-column: 3; grid-row: 1; z-index: 1;
  left: auto !important; top: auto !important; width: auto !important; height: var(--hoehe) !important;
  border-radius: 0; border-width: 0 0 0 1px; box-shadow: none;
}
body.bf-dock #app { grid-template-columns: 280px minmax(0, 1fr) var(--bf-dock, 42vw); }

.bf-kopf {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 5px 6px 5px 10px; background: var(--flaeche-2); border-bottom: 1px solid var(--rand);
  cursor: move; user-select: none; touch-action: none;
}
.bf.dock .bf-kopf { cursor: default; }
.bf-logo { font-size: 14px; }
.bf-titel { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-kopf button, .bf-leiste button { padding: 3px 8px; font-size: 14px; line-height: 1.1; }
#bf-zu:hover { border-color: var(--schlecht); color: #ffb3ad; }

.bf-leiste { display: flex; align-items: center; gap: 5px; flex: none; padding: 6px; border-bottom: 1px solid var(--rand); }
.bf-leiste input { flex: 1; min-width: 0; padding: 5px 9px; font: 13px/1.3 var(--mono); border-radius: 99px; }
.bf-leiste button:disabled { opacity: .45; cursor: default; }

.bf-menue {
  position: absolute; z-index: 3; right: 8px; top: 84px; min-width: 240px;
  display: flex; flex-direction: column; padding: 4px;
  background: var(--flaeche); border: 1px solid #343c48; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.bf-menue button { background: none; border: 0; text-align: left; padding: 7px 10px; font-size: 13px; }
.bf-menue button:hover { background: var(--hover); }

.bf-inhalt { position: relative; flex: 1; min-height: 0; background: #fff; }
.bf-inhalt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
/* Beim Ziehen liegt das Schild über dem iframe, sonst „verschluckt“ es die Mausbewegungen */
.bf-schild { position: absolute; inset: 0; z-index: 2; }

.bf-status {
  flex: none; padding: 3px 10px; font-size: 12px; color: var(--leise);
  border-top: 1px solid var(--rand); background: var(--flaeche);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bf-status.ki { color: #9cc3ff; background: #14233b; }
.bf-status.laedt { color: var(--warn); }
.bf-status.fehler { color: #ffb3ad; background: #2b1616; }

/* Griffe zum Ziehen der Größe – ganz innerhalb des Fensters (die runde Ecke schneidet sonst ab) */
.bf-griff { position: absolute; z-index: 4; touch-action: none; }
.bf-griff.n, .bf-griff.s { left: 14px; right: 14px; height: 6px; cursor: ns-resize; }
.bf-griff.n { top: 0; } .bf-griff.s { bottom: 0; }
.bf-griff.e, .bf-griff.w { top: 14px; bottom: 14px; width: 6px; cursor: ew-resize; }
.bf-griff.e { right: 0; } .bf-griff.w { left: 0; }
.bf-griff.ne, .bf-griff.nw, .bf-griff.se, .bf-griff.sw { width: 16px; height: 16px; }
.bf-griff.ne { top: 0; right: 0; cursor: nesw-resize; } .bf-griff.sw { bottom: 0; left: 0; cursor: nesw-resize; }
.bf-griff.nw { top: 0; left: 0; cursor: nwse-resize; } .bf-griff.se { bottom: 0; right: 0; cursor: nwse-resize; }
.bf.dock .bf-griff:not(.w) { display: none; }
.bf.dock .bf-griff.w { top: 0; bottom: 0; left: 0; width: 7px; }

.bf-pille {
  position: fixed; z-index: 21; right: 16px; bottom: 16px; max-width: 260px;
  padding: 7px 14px; border-radius: 99px; background: var(--aktiv); border-color: var(--akzent-dunkel);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45); overflow: hidden; text-overflow: ellipsis;
}

/* Handy: Browser als Vollbild, ohne Andocken und Ziehen */
@media (max-width: 820px) {
  .bf, .bf.dock {
    position: fixed !important; z-index: 35; inset: 0 !important;
    width: auto !important; height: var(--hoehe) !important; border-radius: 0; border: 0;
  }
  body.bf-dock #app { grid-template-columns: minmax(0, 1fr); }
  .bf-kopf { cursor: default; padding: 6px 6px 6px 10px; }
  #bf-dock, .bf-griff { display: none; }
  .bf-kopf button, .bf-leiste button { padding: 6px 10px; }
  .bf-leiste input { font-size: 16px; } /* iOS vergrößert sonst beim Antippen */
  .bf-pille { bottom: 72px; }
}

/* Dateien ins Terminal ziehen */
#ablegen {
  position: absolute; inset: 8px; z-index: 6; display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--akzent, #4c8dff); border-radius: 10px; background: rgba(11, 14, 19, .82);
  color: #d7dde6; font-size: 15px; pointer-events: none; text-align: center; padding: 16px;
}
#ablegen[hidden] { display: none; }

/* ---------- Umschalter Terminal / Einfach ---------- */
.ansicht { display: flex; flex: none; border: 1px solid var(--rand); border-radius: 99px; overflow: hidden; }
.ansicht button { border: 0; border-radius: 0; padding: 4px 11px; font-size: 13px; background: var(--flaeche-2); }
.ansicht button[aria-pressed="true"] { background: var(--akzent-dunkel); color: #fff; font-weight: 600; }

/* ---------- Einfache Ansicht ---------- */
#einfach {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
  background: var(--term-bg); color: var(--text);
}
#einfach[hidden] { display: none; }
body.einfach #eingabe, body.einfach #eingabe-schalter, body.einfach #klein { display: none !important; }
#einfach-text {
  flex: 1; min-height: 0; overflow-y: auto; padding: 18px max(16px, calc((100% - 860px) / 2)) 12px;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; outline: none;
}
#einfach-text > div { min-height: 1.55em; }
#einfach-text .leer { min-height: .7em; }
#einfach-text .du {
  margin: 14px 0 6px; padding: 8px 12px; border-radius: 10px; background: #182a45; color: #e6efff;
  border: 1px solid #24406a; font-weight: 500;
}
#einfach-text .du + .du { margin-top: -6px; border-top: 0; border-radius: 0 0 10px 10px; }
#einfach-text .ki { margin-top: 8px; }
#einfach-text .mono { font: 13px/1.4 var(--mono); white-space: pre; overflow-x: auto; overflow-wrap: normal; }
#einfach-text .fuss { color: var(--leise); font-size: 13px; }
#einfach-unten {
  flex: none; border-top: 1px solid var(--rand); background: var(--flaeche);
  padding: 8px max(12px, calc((100% - 884px) / 2)) 10px;
}
#einfach-status { font-size: 13px; color: var(--leise); min-height: 18px; margin-bottom: 6px; }
#einfach-status.arbeitet { color: #9cc3ff; }
#einfach-status.arbeitet::before { content: "● "; animation: einfach-puls 1.2s ease-in-out infinite; }
#einfach-status.wartet { color: #7ee087; }
@keyframes einfach-puls { 50% { opacity: .25; } }
#einfach-tasten { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
#einfach-tasten button { flex: none; padding: 6px 12px; font-size: 13px; }
#einfach-tasten .trenner { flex: none; width: 1px; margin: 3px 2px; background: var(--rand); }
#einfach-form { display: flex; gap: 8px; align-items: flex-end; }
#einfach-form textarea {
  flex: 1; resize: none; min-height: 52px; max-height: 220px; font-size: 16px; line-height: 1.45; padding: 10px 12px;
}
#einfach-form button { height: 52px; padding: 0 18px; font-size: 15px; }
#einfach-form textarea:disabled { opacity: .5; }

/* ---------- Dateien ---------- */
dialog.breit { width: min(760px, calc(100vw - 32px)); }
dialog h3 { margin: 18px 0 4px; font-size: 14px; }
.dateien-ort { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; }
.dateien-ort code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; font-size: 12px; color: var(--leise); }
#dateien-liste { max-height: min(50vh, 460px); overflow-y: auto; border: 1px solid var(--rand); border-radius: 8px; }
.datei-zeile { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--rand); font-size: 14px; }
.datei-zeile:first-child { border-top: 0; }
.datei-zeile .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datei-zeile button.name { text-align: left; background: none; border: 0; padding: 0; color: #9cc3ff; cursor: pointer; }
.datei-zeile button.name:hover { text-decoration: underline; }
.datei-zeile .info { flex: none; color: var(--leise); font-size: 12px; font-family: var(--mono); }
.datei-zeile > button:not(.name), .datei-zeile a.knopf { flex: none; padding: 3px 9px; font-size: 12px; }
.datei-link { display: flex; gap: 6px; padding: 0 10px 8px; }
.datei-link input { flex: 1; min-width: 0; font: 12px var(--mono); padding: 4px 8px; }
.datei-link button, .datei-link a.knopf { flex: none; padding: 3px 9px; font-size: 12px; }
.dateien-leer { padding: 14px; color: var(--leise); font-size: 14px; }
@media (max-width: 820px) {
  .ansicht button { padding: 4px 8px; font-size: 12px; }
  .datei-zeile .info.zeit { display: none; }
  #einfach-text { padding: 12px 12px 8px; font-size: 15px; }
}

#einfach-text a { color: #9cc3ff; }
/* Handy: Knöpfe in eine eigene, seitlich verschiebbare Zeile, damit der Name sichtbar bleibt */
@media (max-width: 600px) {
  #kopf { flex-wrap: wrap; row-gap: 6px; padding-bottom: 6px; }
  #kopf .titel { flex: 1 1 120px; }
  #kopf .aktionen { order: 10; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  #kopf .aktionen button { flex: none; }
}