@charset "UTF-8";
/* Swizz-IT WebFTP (Auftrag W): ergänzt panel.css und panel_extra.css.
   Alle Gestaltung über Klassen: die WebFTP-Seiten erlauben keine Inline-Stile
   (strenge CSP, webftp_sicherheitskopfzeilen()). */

[hidden] {
  display: none !important;
}

/* Grundgerüst: Kopf, Inhalt, Fuss */
.webftp {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f8f4ef;
  color: var(--ink);
}

.webftp-kopf {
  background: linear-gradient(180deg, #0f1b1a 0%, #0a1514 100%);
  color: #f4f7f6;
}

.webftp-kopf__innen {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}

.webftp-marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ecf4f2;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.webftp-marke__logo {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.webftp-marke__zusatz {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(42, 157, 143, 0.28);
  color: #c4ece5;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.webftp-konto {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.webftp-konto__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #c8d6d3;
}

.webftp-konto__formular {
  margin: 0;
}

.webftp-kopf .button--ghost {
  color: #f4f7f6;
  border-color: rgba(255, 255, 255, 0.25);
}

.webftp-kopf .button--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
}

.webftp-inhalt {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 56px;
}

.webftp-fuss {
  padding: 0 24px 28px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-muted);
}

.webftp-fuss__verweise {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
}

.webftp-fuss__verweise a {
  color: inherit;
  text-decoration: underline;
}

.webftp-fuss__zeile {
  margin: 6px 0 0;
}

/* Symbole */
.webftp-symbol {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.webftp-symbol--ordner {
  color: var(--brand);
}

.button .webftp-symbol {
  margin-right: 6px;
}

.webftp-symbolknopf .webftp-symbol {
  margin-right: 0;
}

/* Hilfsklassen */
.webftp-unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.webftp-meldung {
  margin: 0 0 16px;
}

.webftp-gedaempft {
  color: var(--ink-muted);
  font-size: 0.88rem;
  white-space: nowrap;
}

.webftp-umbruch {
  word-break: break-all;
}

.webftp-knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.webftp-knopf-breit {
  width: 100%;
}

.webftp-formular {
  display: grid;
  gap: 10px;
  margin: 0;
}

.webftp-feldname {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.webftp-haken {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.4;
}

.webftp-haken input {
  margin-top: 2px;
}

/* Anmeldung */
.webftp-anmeldung {
  max-width: 420px;
  margin: 32px auto 0;
}

.webftp-anmeldung .form {
  max-width: none;
}

.webftp-anmeldung__symbol,
.webftp-bestaetigung__symbol {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: var(--brand-soft);
  color: var(--brand);
}

.webftp-anmeldung__symbol .webftp-symbol,
.webftp-bestaetigung__symbol .webftp-symbol {
  width: 24px;
  height: 24px;
}

.webftp-anmeldung__hinweis {
  margin-top: 16px;
}

/* Leiste mit Brotkrümeln und Werkzeugen */
.webftp-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.webftp-pfad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  font-size: 0.95rem;
  min-width: 0;
}

.webftp-pfad a,
.webftp-pfad__aktuell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  word-break: break-all;
}

.webftp-pfad a {
  color: var(--brand-strong);
  text-decoration: none;
  font-weight: 600;
}

.webftp-pfad a:hover {
  background: var(--brand-soft);
}

.webftp-pfad__aktuell {
  font-weight: 700;
  color: var(--ink);
}

.webftp-pfad__trenner {
  color: var(--ink-faint);
}

.webftp-werkzeuge {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

/* Umschalter "Versteckte Dateien zeigen" (Formular mit nur einem Knopf) */
.webftp-ansicht {
  margin: 0;
  display: inline-flex;
}

/* Aufklappbare Formulare (details/summary, ohne Skript) */
.webftp-ausklapp {
  position: relative;
}

.webftp-ausklapp > summary {
  list-style: none;
  cursor: pointer;
}

.webftp-ausklapp > summary::-webkit-details-marker {
  display: none;
}

.webftp-ausklapp__inhalt {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: min(360px, 88vw);
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--panel-shadow);
  text-align: left;
}

/* Ordneransicht */
.webftp-liste {
  padding: 4px 8px 8px;
  overflow-x: auto;
}

.webftp-tabelle {
  margin-top: 0;
}

.webftp-tabelle th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  white-space: nowrap;
}

.webftp-tabelle td {
  vertical-align: middle;
}

.webftp-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.webftp-name .webftp-symbol {
  color: var(--ink-faint);
}

.webftp-name .webftp-symbol--ordner {
  color: var(--brand);
}

.webftp-name__text {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  word-break: break-all;
}

a.webftp-name__text:hover {
  color: var(--brand-strong);
  text-decoration: underline;
}

.webftp-name__hinweis {
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.webftp-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-strong);
  font-weight: 600;
  text-decoration: none;
}

.webftp-zurueck:hover {
  text-decoration: underline;
}

.webftp-rechte {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

.webftp-spalte-aktionen {
  width: 1%;
  white-space: nowrap;
}

.webftp-aktionen {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}

.webftp-symbolknopf {
  padding: 6px 8px;
}

.webftp-symbolknopf--gefahr:hover {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fff5f5;
}

.webftp-geschuetzt {
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  color: var(--ink-faint);
}

/* Editor */
.webftp-editor {
  display: grid;
  gap: 14px;
}

.webftp-editor__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.webftp-editor__titel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  word-break: break-all;
}

.webftp-editor__kopf .badge {
  margin: 0;
}

.webftp-editor__feld {
  width: 100%;
  min-height: 60vh;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fdfbf9;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
  resize: vertical;
}

.webftp-editor__feld:focus {
  outline: none;
  border-color: var(--panel-accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.18);
}

/* Bestätigung, Fehler */
.webftp-bestaetigung {
  max-width: 560px;
}

.webftp-bestaetigung .webftp-formular {
  gap: 14px;
}

/* Formular wird gesendet (webftp.js) */
.webftp-formular[aria-busy="true"] button[type="submit"] {
  opacity: 0.7;
  cursor: progress;
}

/* Kleine Bildschirme */
@media (max-width: 760px) {
  .webftp-spalte-rechte,
  .webftp-spalte-datum {
    display: none;
  }
}

@media (max-width: 560px) {
  .webftp-inhalt {
    padding: 20px 16px 40px;
  }

  .webftp-kopf__innen {
    padding: 12px 16px;
  }

  .webftp-spalte-groesse {
    display: none;
  }

  .webftp-ausklapp__inhalt {
    position: fixed;
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 16px;
    width: auto;
  }
}