/* amaxo Trainings-Oberflaeche - Markenfarben/Fonts 1:1 aus config.py (COLOR_*, FONT_FILES),
   keine neuen Farbwerte erfinden. */

@font-face {
  font-family: "Neue Machina";
  src: url("fonts/PPNeueMachina-Light.ttf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Medium.ttf") format("truetype");
  font-weight: 500;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-SemiBold.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Bold.ttf") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-ExtraBold.ttf") format("truetype");
  font-weight: 800;
}

:root {
  --binary-black: #1D1D1D;
  --dark-green: #173D32;
  --eden: #0F4E4E;
  --lime: #80D024;
  --light-grey: #F0EEED;
  --white: #FFFFFF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Manrope", sans-serif;
  background: var(--light-grey);
  color: var(--binary-black);
}

.kopfbereich {
  /* Bella-Kollege-Feedback 2026-08-14: Balken war zu dick, auf ca. ein Drittel der bisherigen
     Hoehe reduziert (Padding/Logo/Schriftgroesse/Abstaende proportional verkleinert). */
  background: var(--dark-green);
  color: var(--white);
  padding: 10px 40px 12px;
}

.logo-zeile { margin-bottom: 6px; }
.logo { height: 16px; }

.thema {
  font-family: "Neue Machina", "Manrope", sans-serif;
  font-weight: 300;
  font-size: 20px;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}

.hauptmenu {
  display: flex;
  gap: 8px;
}

.menu-punkt {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 4px;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
}
.menu-punkt:hover { color: var(--white); }
.menu-punkt.aktiv {
  color: var(--lime);
  border-bottom-color: var(--lime);
}
a.menu-punkt { text-decoration: none; display: inline-block; }
.angemeldet-als {
  color: rgba(255,255,255,0.7);
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 4px;
  align-self: center;
}

/* --- Login-Seite (Bella-Vorgabe 2026-08-14) --- */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login-karte {
  background: var(--white);
  border-radius: 14px;
  padding: 40px 36px;
  width: min(90vw, 360px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  text-align: center;
}
.login-logo { height: 22px; margin-bottom: 22px; }
.login-karte h1 {
  font-family: "Neue Machina", "Manrope", sans-serif;
  font-weight: 300;
  font-size: 26px;
  color: var(--dark-green);
  margin: 0 0 4px;
}
.login-unterzeile { font-size: 12px; color: #888; margin: 0 0 22px; }
.login-fehler {
  background: rgba(230,80,80,0.1);
  color: #B03434;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  margin: 0 0 16px;
}
.login-karte form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.login-karte label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dark-green);
}
.login-karte input {
  border: 1.5px solid #ccc;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
}
.login-karte input:focus { outline: none; border-color: var(--lime); }
.login-button {
  margin-top: 6px;
  background: var(--dark-green);
  color: var(--white);
  border: none;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  padding: 12px;
  cursor: pointer;
}
.login-button:hover { background: var(--eden); }

/* --- Admin-Seite --- */
.admin-inhalt { max-width: 760px; }
.admin-kachel {
  background: var(--white);
  border-radius: 14px;
  padding: 26px 28px;
  margin-bottom: 28px;
}
.admin-kachel h2 {
  font-family: "Neue Machina", "Manrope", sans-serif;
  font-weight: 300;
  font-size: 22px;
  color: var(--dark-green);
  margin: 0 0 18px;
}
.admin-form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.admin-form-vertikal { flex-direction: column; max-width: 320px; }
.admin-form input {
  flex: 1;
  min-width: 160px;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: "Manrope", sans-serif;
  font-size: 13px;
}
.admin-form button {
  background: var(--dark-green);
  color: var(--white);
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 22px;
  cursor: pointer;
}
.admin-form button:hover { background: var(--eden); }
.admin-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  color: var(--dark-green);
  white-space: nowrap;
}

.admin-passwort-anzeige {
  background: var(--lime);
  color: var(--dark-green);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 13px;
}
.admin-passwort-anzeige[hidden] { display: none; }
.admin-passwort-anzeige code {
  display: block;
  background: rgba(255,255,255,0.6);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  margin: 8px 0;
  word-break: break-all;
}
.admin-passwort-anzeige button {
  background: var(--dark-green);
  color: var(--white);
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
}

.admin-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-tabelle th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #999;
  padding: 6px 8px;
  border-bottom: 1.5px solid var(--light-grey);
}
.admin-tabelle td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--light-grey);
}
.admin-tabelle-aktionen { display: flex; gap: 6px; }
.admin-tabelle-aktionen button {
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
}
.btn-zuruecksetzen { background: var(--light-grey); color: var(--dark-green); }
.btn-zuruecksetzen:hover { background: #e2dfdc; }
.btn-loeschen { background: rgba(230,80,80,0.12); color: #B03434; }
.btn-loeschen:hover { background: rgba(230,80,80,0.22); }

.admin-status-text { font-size: 12px; font-weight: 700; margin: 0; }
.admin-status-text.status-ok { color: var(--dark-green); }
.admin-status-text.status-fehler { color: #B03434; }

.view[hidden] { display: none; }

.inhalt {
  max-width: 960px;
  margin: 0 auto;
  padding: 36px 24px 80px;
}

/* --- Serienauswahl --- */
.serienauswahl { margin-bottom: 36px; }

.dropdown { position: relative; display: inline-block; }

.serie-button {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 2px solid var(--dark-green);
  color: var(--dark-green);
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.serie-button:hover { background: var(--light-grey); }
.serie-button .chevron { font-size: 12px; opacity: 0.7; }

.serie-liste {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  background: var(--white);
  border: 2px solid var(--dark-green);
  border-radius: 10px;
  list-style: none;
  margin: 0;
  padding: 6px;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.serie-liste li {
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}
.serie-liste li:hover { background: var(--light-grey); }
.serie-liste li.aktiv { background: var(--lime); color: var(--dark-green); font-weight: 700; }

/* --- Ablaufleiste --- */
.ablaufleiste {
  background: var(--white);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.start-button {
  background: var(--dark-green);
  color: var(--white);
  border: none;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 17px;
  padding: 14px 40px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.start-button:hover:not(:disabled) { background: var(--eden); }
.start-button:active:not(:disabled) { transform: scale(0.98); }
.start-button:disabled { background: #C7C7C7; cursor: not-allowed; }

.agenten-reihe {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.agent-knoten {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 140px;
  text-align: center;
}

.agent-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2.5px solid var(--dark-green);
  color: var(--dark-green);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.agent-icon svg { width: 28px; height: 28px; }

.agent-knoten.aktiv .agent-icon {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--dark-green);
  box-shadow: 0 0 0 6px rgba(128, 208, 36, 0.25);
}

.agent-knoten.erledigt .agent-icon {
  background: var(--dark-green);
  border-color: var(--dark-green);
  color: var(--white);
}

.agent-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-green);
}

.verbindung {
  flex: 1;
  height: 3px;
  background: var(--light-grey);
  margin: 0 -6px;
  margin-bottom: 30px;
  border-radius: 3px;
}

.status-zeile {
  margin: 0;
  font-size: 14px;
  color: var(--eden);
  font-weight: 600;
  min-height: 20px;
}

.sperr-zeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px auto 0;
}
.sperr-zeile[hidden] { display: none; }

.sperr-hinweis {
  display: inline-block;
  margin: 0;
  background: var(--lime);
  color: var(--dark-green);
  font-weight: 800;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
}

.fremd-glocke {
  border: none;
  background: var(--light-grey);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}
.fremd-glocke[hidden] { display: none; }
.fremd-glocke:hover { background: #e2dfdc; }
.fremd-glocke.aktiv { background: var(--lime); }

.benachrichtigen-auswahl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--eden);
  cursor: pointer;
  user-select: none;
}
.benachrichtigen-auswahl input { accent-color: var(--lime); width: 15px; height: 15px; cursor: pointer; }

/* --- Fehler-Kasten (Bella-Vorgabe 2026-08-14) --- */
.fehler-kasten {
  margin: 14px auto 0;
  max-width: 480px;
  background: rgba(230,80,80,0.1);
  border: 1.5px solid rgba(230,80,80,0.3);
  border-radius: 10px;
  padding: 12px 16px;
  text-align: left;
}
.fehler-kasten[hidden] { display: none; }
.fehler-kasten strong { color: #B03434; font-size: 13px; }
.fehler-kasten p { margin: 4px 0 0; font-size: 12.5px; color: #7a2a2a; line-height: 1.4; word-break: break-word; }
.fehler-allgemein { margin-top: 6px !important; }
.fehler-hinweis { font-style: italic; opacity: 0.8; margin-top: 8px !important; }

/* --- Verlaufsübersicht --- */
.verlauf-titel {
  font-family: "Neue Machina", "Manrope", sans-serif;
  font-weight: 300;
  font-size: 22px;
  color: var(--dark-green);
  margin: 0 0 14px;
}
.verlauf-titel:not(:first-child) { margin-top: 32px; }

.verlauf-durchlaeufe-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
}
.verlauf-durchlaeufe-kopf .verlauf-titel { margin: 0; }
.verlauf-zuruecksetzen-btn {
  background: var(--white);
  border: 1.5px solid #B03434;
  color: #B03434;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11.5px;
  padding: 7px 16px;
  cursor: pointer;
}
.verlauf-zuruecksetzen-btn:hover { background: rgba(230,80,80,0.08); }

.verlauf-serien-tabelle {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
}
.verlauf-serien-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--light-grey);
  font-size: 13px;
}
.verlauf-serien-zeile:last-child { border-bottom: none; }
.verlauf-serien-name { font-weight: 700; color: var(--dark-green); flex: 1; }
.verlauf-serien-zahl { color: #777; font-weight: 600; }
.verlauf-serien-zahl-lime { color: var(--dark-green); background: rgba(128,208,36,0.25); padding: 3px 10px; border-radius: 999px; }

.verlauf-durchlaeufe-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.verlauf-durchlauf-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 12.5px;
}
.verlauf-durchlauf-status { font-weight: 800; width: 18px; text-align: center; }
.verlauf-durchlauf-status.status-ok { color: var(--dark-green); }
.verlauf-durchlauf-status.status-fehler { color: #B03434; }
.verlauf-durchlauf-details { margin-left: auto; color: #888; text-align: right; }

/* --- Posting-Agent-Knoten in der Ablaufleiste: sichtbar, aber bewusst NICHT anklickbar/aktiv
   (Bella-Vorgabe 2026-08-13) - separat abgesetzt, mit Hinweis, wo er tatsaechlich gesteuert wird. */
.verbindung-abgesetzt { background: transparent; }
.agent-knoten-extern {
  opacity: 0.55;
  cursor: default;
}
.agent-knoten-extern .agent-icon {
  border-style: dashed;
}
.agent-hinweis {
  font-size: 10.5px;
  font-weight: 500;
  color: #888;
  line-height: 1.3;
}

/* --- Bestaetigungs-Dialog (Start-Button, Bella-Vorgabe 2026-08-13) --- */
.bestaetigen-modal {
  position: fixed;
  inset: 0;
  background: rgba(29,29,29,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
}
.bestaetigen-modal[hidden] { display: none; }
.bestaetigen-modal-inhalt {
  background: var(--white);
  border-radius: 12px;
  padding: 24px;
  max-width: min(90vw, 420px);
  text-align: center;
}
.bestaetigen-modal-inhalt p {
  font-weight: 700;
  color: var(--dark-green);
  margin: 0 0 18px;
}
.bestaetigen-modal-aktionen { display: flex; gap: 10px; }
.bestaetigen-modal-aktionen button { flex: 1; padding: 10px 4px; font-size: 13px; }

/* --- Ergebnisse --- */
.ergebnis-bereich { margin-top: 44px; }
.ergebnis-bereich h2 {
  font-family: "Neue Machina", "Manrope", sans-serif;
  font-weight: 300;
  font-size: 26px;
  color: var(--dark-green);
}
.ergebnis-hinweis { font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 500; color: #999; }

/* Bella-Vorgabe 2026-08-08: kleine Vorschau-Kacheln statt grosser Karten, FEST 3 pro Reihe (nicht
   responsive-auto-fill) - "es soll nicht zu gedrueckt sein". Posts SAMMELN sich hier ueber mehrere
   Durchlaeufe, bis sie bewertet werden, siehe app.js/offene-posts. */
.post-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
  max-width: 640px;
}
@media (max-width: 640px) {
  .post-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}

.post-mini-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.post-mini-karte.wird-entfernt {
  transform: scale(0.35) translateY(-36px) rotate(8deg);
  opacity: 0;
}

.post-mini-vorschau {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  background: var(--light-grey);
  display: block;
}

.post-mini-name {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}

.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
.badge.ok { background: rgba(128,208,36,0.2); color: var(--dark-green); }
.badge.nicht-ok { background: rgba(230,80,80,0.15); color: #B03434; }

.post-mini-begruendung {
  font-size: 10.5px;
  color: #B03434;
  line-height: 1.35;
  margin: 0;
  text-align: center;
}

.bild-modal-kritik-begruendung {
  font-size: 12px;
  color: #B03434;
  background: rgba(230,80,80,0.08);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0 0 6px;
  text-align: left;
  line-height: 1.4;
}
.bild-modal-kritik-begruendung[hidden] { display: none; }

.post-mini-buttons {
  display: flex;
  gap: 6px;
  width: 100%;
}
.btn-freigeben, .btn-ablehnen, .btn-verschieben {
  flex: 1;
  border: none;
  border-radius: 6px;
  padding: 8px 4px;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
}
.btn-freigeben { background: var(--lime); color: var(--dark-green); }
.btn-freigeben:hover { background: #6fb81f; }
.btn-ablehnen { background: var(--light-grey); color: var(--binary-black); }
.btn-ablehnen:hover { background: #e2dfdc; }
.btn-verschieben { background: var(--light-grey); color: var(--dark-green); }
.btn-verschieben:hover { background: #e2dfdc; }
.btn-download {
  flex: 1;
  border: 1.5px solid var(--dark-green);
  border-radius: 6px;
  padding: 8px 4px;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  background: var(--white);
  color: var(--dark-green);
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-download:hover { background: var(--light-grey); }

.post-mini-karte.fehlgeschlagen {
  padding: 14px;
  color: #777;
  font-size: 11px;
  border: 2px dashed #ccc;
  box-shadow: none;
  text-align: center;
}

/* --- Ordner-Ansicht: zwei Ordner-Symbole (wie ein echter Datei-Browser) --- */
.ordner-icon-ansicht {
  display: flex;
  gap: 48px;
  padding: 40px 0;
}
.ordner-icon-ansicht[hidden] { display: none; }

.ordner-icon-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 16px;
  border-radius: 12px;
  transition: background 0.15s ease;
}
.ordner-icon-karte:hover { background: rgba(23,61,50,0.06); }

.ordner-icon-svg {
  width: 96px;
  height: 80px;
}
.ordner-icon-svg.freigegeben path { fill: var(--lime); }
.ordner-icon-svg.abgelehnt path { fill: #B9B6B2; }

.ordner-icon-karte span {
  font-weight: 700;
  font-size: 15px;
  color: var(--dark-green);
}

/* --- Ordner-Inhalt: Datei-Raster mit Vorschau + Name, wie im Explorer --- */
.ordner-zurueck {
  background: none;
  border: none;
  color: var(--eden);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 0 0 20px;
}
.ordner-zurueck:hover { text-decoration: underline; }

#ordner-inhalt-titel {
  font-family: "Neue Machina", "Manrope", sans-serif;
  font-weight: 300;
  font-size: 24px;
  color: var(--dark-green);
  margin: 0 0 20px;
}

.datei-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 24px;
}

/* --- Geplante Posts, eigener Bereich oben (Bella-Vorgabe 2026-08-14) --- */
.geplante-posts-bereich {
  background: rgba(128,208,36,0.1);
  border: 1.5px solid rgba(128,208,36,0.35);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 28px;
}
.geplante-posts-bereich[hidden] { display: none; }
.geplante-posts-titel {
  font-family: "Neue Machina", "Manrope", sans-serif;
  font-weight: 300;
  font-size: 17px;
  color: var(--dark-green);
  margin: 0 0 16px;
}
.datei-termin {
  font-size: 11px;
  font-weight: 800;
  color: var(--dark-green);
  background: var(--lime);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 4px;
}

.datei-eintrag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
}
.datei-eintrag:hover { background: rgba(23,61,50,0.06); }

.datei-vorschau {
  width: 120px;
  height: 150px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  background: var(--light-grey);
}

.datei-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--binary-black);
  line-height: 1.3;
  word-break: break-word;
}

.ordner-leer {
  color: #999;
  font-size: 13px;
  margin: 4px 0 0;
}

.datei-posting-status {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
.datei-posting-status.status-geplant { background: rgba(23,61,50,0.12); color: var(--dark-green); }
.datei-posting-status.status-veroeffentlicht { background: rgba(128,208,36,0.25); color: var(--dark-green); }
.datei-posting-status.status-fehler { background: rgba(230,80,80,0.15); color: #B03434; }

/* --- Posting-Agent-Infokasten (Bella-Vorgabe 2026-08-13): amaxo-Lime, abgerundet, wegklickbar,
   merkt sich per localStorage, dass es gelesen wurde (app.js). --- */
.posting-info-kasten {
  position: relative;
  background: var(--lime);
  color: var(--dark-green);
  border-radius: 14px;
  padding: 20px 44px 20px 22px;
  margin: 0 0 24px;
}
.posting-info-kasten h3 {
  font-family: "Neue Machina", "Manrope", sans-serif;
  font-weight: 300;
  font-size: 20px;
  margin: 0 0 10px;
  color: var(--white);
}
.posting-info-kasten p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 8px;
  color: var(--white);
}
.posting-info-kasten p:last-child { margin-bottom: 0; }
.posting-info-schliessen {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 15px;
  cursor: pointer;
  opacity: 0.85;
}
.posting-info-schliessen:hover { opacity: 1; }

.posting-info-oeffnen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--lime);
  background: var(--white);
  color: var(--dark-green);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  margin: 0 0 20px;
}
.posting-info-oeffnen:hover { background: var(--light-grey); }
.posting-info-oeffnen[hidden] { display: none; }
.posting-info-kasten[hidden] { display: none; }

/* --- Bild-Vollansicht (Lightbox) --- */
.bild-modal {
  position: fixed;
  inset: 0;
  background: rgba(29,29,29,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.bild-modal[hidden] { display: none; }

.bild-modal-inhalt {
  position: relative;
  max-width: min(90vw, 560px);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.bild-modal-inhalt img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: 6px;
  display: block;
  margin: 0 auto 12px;
}

#bild-modal-titel {
  font-weight: 800;
  font-size: 15px;
  color: var(--dark-green);
  margin: 0 0 6px;
}

#bild-modal-text {
  font-size: 13px;
  color: #444;
  margin: 0 0 6px;
  line-height: 1.4;
  text-align: left;
}

#bild-modal-caption {
  font-size: 12px;
  color: #666;
  margin: 0;
  line-height: 1.4;
  text-align: left;
}

/* --- Editierbare Caption (Bella-Vorgabe 2026-09-07) - gilt sowohl fuer #bild-modal-caption als
   auch fuer #posting-optimiert-caption, siehe baueEditierbareCaption() in app.js. --- */
.caption-anzeige {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.caption-text {
  margin: 0;
  flex: 1;
  white-space: pre-line;
  max-height: 6em;
  overflow: auto;
}
.caption-anzeige-knoepfe {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.caption-bearbeiten-btn, .caption-kopieren-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--dark-green);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
  white-space: nowrap;
}
.caption-bearbeiten-btn:hover, .caption-kopieren-btn:hover { text-decoration: underline; }
.caption-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 5.5em;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  line-height: 1.4;
  border: 1.5px solid var(--dark-green);
  border-radius: 6px;
  padding: 8px;
  resize: vertical;
}
.caption-bearbeiten-aktionen {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.caption-speichern-btn, .caption-abbrechen-btn {
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  padding: 6px 14px;
  cursor: pointer;
}
.caption-speichern-btn { background: var(--lime); color: var(--dark-green); border: none; }
.caption-speichern-btn:hover:not(:disabled) { background: #6fb81f; }
.caption-speichern-btn:disabled { opacity: 0.6; cursor: default; }
.caption-abbrechen-btn { background: var(--white); color: var(--dark-green); border: 1.5px solid var(--dark-green); }
.caption-abbrechen-btn:hover:not(:disabled) { background: var(--light-grey); }
.caption-fehler { color: #B03434; font-size: 11px; margin: 6px 0 0; }
.caption-fehler[hidden] { display: none; }

.bild-modal-plattform {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px 0;
}
.plattform-toggle {
  border: 1.5px solid var(--dark-green);
  background: var(--white);
  color: var(--dark-green);
  font-weight: 700;
  font-size: 11px;
  padding: 5px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.plattform-toggle.aktiv { background: var(--dark-green); color: var(--white); }
.plattform-toggle:not(.aktiv):hover { background: var(--light-grey); }

.bild-modal-aktionen {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.bild-modal-aktionen button { flex: 1; }

/* --- Posting-Abschnitt in der Detailansicht (Bella-Vorgabe 2026-08-13) --- */
.bild-modal-posting[hidden] { display: none; }
.posting-abschnitt {
  text-align: left;
  border-top: 1px solid var(--light-grey);
  margin-top: 14px;
  padding-top: 14px;
}
.posting-lade-hinweis { font-size: 12px; color: #999; text-align: center; }

.posting-hinweis-text {
  font-size: 11.5px;
  color: #777;
  line-height: 1.4;
  margin: 0 0 12px;
}

.posting-frage {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.posting-frage span {
  font-size: 13px;
  font-weight: 700;
  color: var(--dark-green);
  margin-right: 4px;
}
.posting-toggle {
  border: 2px solid var(--dark-green);
  background: var(--white);
  color: var(--dark-green);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 18px;
  border-radius: 999px;
  cursor: pointer;
}
.posting-toggle.aktiv { background: var(--dark-green); color: var(--white); }
.posting-toggle:not(.aktiv):hover { background: var(--light-grey); }

.posting-termin {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-bottom: 12px;
}
.posting-termin[hidden] { display: none; }
.posting-termin label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--dark-green);
}
.posting-termin input {
  border: 1.5px solid var(--dark-green);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
}
.posting-planen-btn {
  background: var(--lime);
  color: var(--dark-green);
  border: none;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  padding: 8px 18px;
  cursor: pointer;
}
.posting-planen-btn:hover:not(:disabled) { background: #6fb81f; }
.posting-planen-btn:disabled { opacity: 0.6; cursor: default; }

.posting-status-text {
  font-size: 11.5px;
  font-weight: 700;
  margin: 0 0 12px;
}
.posting-status-text.status-ok { color: var(--dark-green); }
.posting-status-text.status-fehler { color: #B03434; }

.posting-ergebnis {
  background: var(--light-grey);
  border-radius: 10px;
  padding: 12px 14px;
}
.posting-ergebnis h4 {
  font-family: "Neue Machina", "Manrope", sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: var(--dark-green);
  margin: 0 0 8px;
}
.posting-ergebnis-titel { font-size: 12.5px; font-weight: 800; margin: 0 0 6px; }
.posting-ergebnis-caption { font-size: 12px; line-height: 1.4; margin: 0 0 8px; white-space: pre-line; }
.posting-ergebnis-hashtags { font-size: 11px; color: var(--eden); margin: 0 0 10px; }
.posting-neu-generieren-btn {
  background: var(--white);
  border: 1.5px solid var(--dark-green);
  color: var(--dark-green);
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  padding: 6px 16px;
  cursor: pointer;
}
.posting-neu-generieren-btn:hover:not(:disabled) { background: var(--light-grey); }
.posting-neu-generieren-btn:disabled { opacity: 0.6; cursor: default; }

.posting-ueberarbeiten-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dark-green);
  margin: 2px 0 12px;
}
.posting-ueberarbeiten-hinweis {
  background: rgba(23,61,50,0.08);
  color: var(--dark-green);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 16px;
}
.posting-ueberarbeiten-hinweis[hidden] { display: none; }

/* --- Feedback (Bella-Vorgabe 2026-08-19): nur noch allgemeines Feedback, kein Pro-Post-Agenten-
   Aufruf mehr - der Button unter jedem Post fuehrt einfach zum selben allgemeinen Feedback-Fenster. --- */
.bild-modal-feedback-bereich { margin: 0 0 14px; }
.bild-modal-feedback-bereich[hidden] { display: none; }
.feedback-post-btn {
  background: var(--white);
  border: 1.5px solid var(--dark-green);
  color: var(--dark-green);
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 18px;
  cursor: pointer;
  margin: 0 0 4px;
}
.feedback-post-btn:hover { background: var(--light-grey); }
.feedback-post-hinweis {
  font-size: 10.5px;
  color: #888;
  line-height: 1.35;
  margin: 0;
}

.feedback-textarea {
  width: 100%;
  min-height: 56px;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  padding: 8px 10px;
  font-family: "Manrope", sans-serif;
  font-size: 12.5px;
  resize: vertical;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.feedback-fehler {
  font-size: 11px;
  color: #B03434;
  margin: 6px 0 0;
}
.feedback-fehler[hidden] { display: none; }

/* --- Allgemeines Feedback: Tab (Admin) + immer verfuegbarer Einstiegspunkt --- */
.feedback-tab-hinweis { font-size: 13px; color: #888; margin: -8px 0 20px; }
.feedback-liste { display: flex; flex-direction: column; gap: 10px; }
.feedback-eintrag {
  background: var(--white);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.feedback-eintrag.erledigt { opacity: 0.55; }
.feedback-eintrag.erledigt .feedback-eintrag-text { text-decoration: line-through; }
.feedback-eintrag-erledigt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--dark-green);
  float: right;
  cursor: pointer;
}
.feedback-eintrag-text { font-size: 13px; line-height: 1.45; margin: 0 0 6px; }
.feedback-eintrag-meta { font-size: 11px; color: #999; margin: 0; }
.allgemeines-feedback-hinweis { font-size: 13px; font-weight: 500; color: var(--dark-green); text-align: left; }

.bild-modal-schliessen {
  /* Bella-Vorgabe 2026-08-14: vorher mit negativem Offset AUSSERHALB der Karte positioniert -
     wurde vom neuen overflow-y:auto auf .bild-modal-inhalt (Scroll-Fix) abgeschnitten. Jetzt
     sticky INNERHALB der Karte, bleibt beim Scrollen trotzdem oben sichtbar. */
  position: sticky;
  top: 0;
  float: right;
  margin: -4px -4px 4px auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--dark-green);
  color: var(--white);
  font-size: 15px;
  cursor: pointer;
  z-index: 5;
}

@media (max-width: 720px) {
  .ordner-icon-ansicht { gap: 24px; }
}