/* Eigene Gestaltung des Social-Media-Tools. Farben kommen aus assets/mendels/mendels.css (--m-…),
   dadurch gilt die Nachtansicht automatisch. Kopf und Fuß: Mendels-Oberfläche (nicht ändern). */
body { margin:0; font-family: var(--m-display); background:var(--m-grund); color:var(--m-text); }
a { color:var(--m-gruen-text); }
main { max-width:1100px; margin:1rem auto; padding:0 1rem; }
h1 { font-size:1.4rem; color:var(--m-ueberschrift); } h2 { font-size:1.1rem; margin-top:2rem; color:var(--m-ueberschrift); }
.card { background:var(--m-flaeche); border:1px solid var(--m-linie); border-radius:10px; padding:1rem; display:flex; flex-direction:column; gap:.8rem; }
.card.narrow { max-width:360px; margin:3rem auto; }
label { display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; font-weight:700; flex:1; }
label.check { flex-direction:row; align-items:center; gap:.4rem; font-weight:400; flex:0 0 auto; }
input, select, textarea { font:inherit; padding:.5rem; border:1px solid var(--m-linie-stark); border-radius:6px; background:var(--m-feld); color:var(--m-text); }
.row { display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-end; }
button { font:inherit; background:var(--m-gruen); color:#fff; border:0; border-radius:6px; padding:.55rem 1rem; cursor:pointer; align-self:flex-start; }
button:hover { background:var(--m-gruen-hover); }
button.danger { background:var(--m-rot); margin-top:1.5rem; }
button.link { background:none; color:var(--m-rot); padding:0 .4rem; text-decoration:underline; }
.flash { background:var(--m-ok-flaeche); border:1px solid var(--m-gruen); padding:.6rem .8rem; border-radius:6px; white-space:pre-wrap; }
.einst .card { display:block; }
.einst label { font-weight:400; font-size:.9em; flex:none; }
.einst label.check { display:flex; margin-bottom:10px; }
.einst input[type="checkbox"] { width:auto; }
.einst button { align-self:auto; }
.einst .btn-secondary, .einst .btn-secondary:hover { background:var(--m-flaeche); color:var(--m-text); }
.einst-einleitung { margin-top:-6px; }
.einst-hilfe { margin:-6px 0 12px; }
.einst-fuss { margin:12px 0 0; }
.einst small { display:block; margin-top:4px; }
.einst-vorlage { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--m-linie); flex-wrap:wrap; }
.einst-vorlage p { margin:2px 0 0; white-space:pre-wrap; }
.einst textarea { width:100%; box-sizing:border-box; }
.vorlage-wahl { flex:none; max-width:320px; }
.themen-wahl { margin:.2rem 0 0; }
.video-fehler { margin:.4rem 0 0; font-size:.85rem; }
.textfeld { display:flex; flex-direction:column; gap:.3rem; }
.textfeld textarea { width:100%; box-sizing:border-box; }
.textfeld-von { margin:0; font-size:.85rem; color:var(--m-leise); }
.textfeld-von button:disabled { opacity:.45; cursor:default; }
.beste-zeiten { margin:0; }
button.btn-duplizieren { background:none; color:var(--m-gruen-text); border:1px solid var(--m-linie-stark); margin-top:1.5rem; }
button.btn-duplizieren:hover { background:var(--m-flaeche); }
.vorschau { display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-start; }
.vorschau-karte { flex:0 1 300px; background:var(--m-flaeche); border:1px solid var(--m-linie); border-radius:10px; padding:.7rem; }
.vorschau-kanal { margin:0 0 .5rem; font-size:.75rem; color:var(--m-leise); }
.vorschau-kopf { display:flex; align-items:center; gap:.5rem; font-size:.85rem; margin-bottom:.5rem; }
.vorschau-punkt { width:24px; height:24px; border-radius:50%; background:var(--m-gruen); flex:none; }
.vorschau-flaeche { position:relative; width:100%; max-height:420px; background:var(--m-grund); border-radius:6px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.vorschau-flaeche img { width:100%; height:100%; object-fit:cover; display:block; }
.vorschau-flaeche video { width:100%; height:100%; display:block; }
.vorschau-leer { color:var(--m-leise); font-size:.85rem; }
.vorschau-zaehler { position:absolute; top:6px; right:6px; background:rgba(0,0,0,.6); color:#fff; font-size:.7rem; padding:1px 7px; border-radius:10px; }
.vorschau-text { margin:.5rem 0 0; font-size:.85rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.zuschnitt { border:1px solid var(--m-linie); border-radius:10px; background:var(--m-flaeche); color:var(--m-text); padding:1rem; max-width:calc(100vw - 2rem); }
.zuschnitt::backdrop { background:rgba(0,0,0,.6); }
.zuschnitt h3 { margin:0 0 .6rem; }
.zuschnitt-formate { margin-bottom:.6rem; }
.zuschnitt-formate button { background:none; color:var(--m-text); border:1px solid var(--m-linie-stark); padding:.3rem .7rem; }
.zuschnitt-formate button.aktiv { background:var(--m-gruen); color:#fff; border-color:var(--m-gruen); }
.zuschnitt-flaeche { display:block; margin:0 auto; touch-action:none; cursor:grab; background:var(--m-grund); }
.zuschnitt-zoom { margin:.6rem 0; }
button.link.link-gruen { color:var(--m-gruen-text); font-size:.85rem; }
.einst-webvorschau { border:1px dashed var(--m-linie-stark); border-radius:8px; padding:12px; background:#fff; color:#3B4553; }
.einst-schritte { margin:0 0 12px; padding-left:1.3em; }
.einst-schritte li { margin:.4rem 0; }
.einst details.einst-klappe { display:block; border:1px solid var(--m-linie); border-radius:10px; padding:1rem; margin-bottom:20px; background:var(--m-flaeche); }
.einst details.einst-klappe > summary { font-size:1rem; margin-bottom:.4rem; }
.einst-hinweis { margin-top:12px; }
.einst-verbindung { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 0; border-top:1px solid var(--m-linie); }
.einst-verbindung:first-of-type { border-top:0; }
.einst input[type="radio"] { width:auto; }
.import { margin-bottom:1rem; background:var(--m-flaeche); }
.import p { margin:.6rem 0; }
.einst-cron { margin-bottom:14px; }
.einst-cron p { margin:2px 0 6px; }
.einst-tabelle { overflow-x:auto; }
.knopfreihe { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.hilfe-inhalt { margin-top:-.4rem; }
#dateien, #video, #typen, #kanaele, #meldungen, #aenderungen { display:block; scroll-margin-top:1rem; }
.hilfe-titel { margin:0 0 .6rem; font-size:1.1rem; }
.hilfe-tabelle { overflow-x:auto; margin:.6rem 0; }
.hilfe-tabelle th { white-space:nowrap; }
.hilfe-liste { margin:.4rem 0; padding-left:1.2em; }
.hilfe-liste li { margin:.25rem 0; }
.hilfe-version { margin:14px 0 4px; }
.flash-error { background:var(--m-rot-flaeche); border-color:var(--m-rot); }
.flash-warning { background:var(--m-gelb-flaeche); border-color:var(--m-gelb); color:var(--m-text); }
.muted { color:var(--m-leise); font-size:.85rem; }
.monthnav { display:flex; align-items:center; gap:1rem; } .monthnav a { font-size:1.6rem; color:var(--m-ueberschrift); text-decoration:none; padding:0 .5rem; }
.grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.dow { text-align:center; font-size:.8rem; font-weight:700; }
.cell { background:var(--m-flaeche); border:1px solid var(--m-linie); border-radius:6px; min-height:90px; padding:3px; overflow:hidden; }
.cell.empty { background:transparent; border:0; } .cell.today { border:2px solid var(--m-gruen); }
.num { font-size:.75rem; color:var(--m-leise); }
.cell-kopf { display:flex; justify-content:space-between; align-items:center; }
.cell-neu { display:inline-block; min-width:1.4rem; text-align:center; font-weight:700; line-height:1.3; color:var(--m-gruen-text); text-decoration:none; border-radius:4px; opacity:.55; }
.cell-neu:hover, .cell-neu:focus-visible { opacity:1; background:var(--m-flaeche-2); }
.chip[draggable="true"] { cursor:grab; }
.wird-gezogen [data-tag] { outline:1px dashed var(--m-linie); }
[data-tag].ziel { outline:2px dashed var(--m-gruen); outline-offset:-2px; }
.chip { display:block; font-size:.72rem; padding:2px 5px; margin-top:2px; border-radius:4px; text-decoration:none; color:var(--m-text); background:var(--m-flaeche-2); border-left:4px solid var(--m-grau-3); }
.chip .t { font-weight:700; }
.s-idee { border-left-color:var(--m-grau-3); }
.s-entwurf { border-left-color:var(--m-gelb); background:var(--m-gelb-flaeche); }
.s-freigabe { border-left-color:#e0803c; background:color-mix(in srgb, #e0803c 18%, var(--m-flaeche)); }
.s-geplant { border-left-color:var(--m-gruen); background:var(--m-ok-flaeche); }
.s-veroeffentlicht { border-left-color:var(--m-grau-1); background:var(--m-flaeche-2); }
.s-fehler { border-left-color:var(--m-rot); background:var(--m-rot-flaeche); }
.undated { display:flex; flex-wrap:wrap; gap:6px; min-height:2.4rem; margin-bottom:1rem; } .undated .chip { display:inline-block; font-size:.85rem; padding:4px 8px; }
.legend .chip { display:inline-block; }
table { width:100%; border-collapse:collapse; background:var(--m-flaeche); border-radius:8px; overflow:hidden; font-size:.9rem; }
th, td { text-align:left; padding:.5rem; border-bottom:1px solid var(--m-linie); } th { background:var(--m-flaeche-2); }
.filters { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.files { list-style:none; padding:0; margin:0; } .files li { display:flex; align-items:center; gap:.6rem; padding:.3rem 0; border-bottom:1px solid var(--m-linie); }
.files li { flex-wrap:wrap; }
.files form.datei-kanal { margin-left:auto; } .files form.datei-kanal + form { margin-left:0; }
.datei-standbild input[type="file"] { display:none; }
.link-knopf { display:inline; flex:none; font-size:.85rem; font-weight:400; color:var(--m-gruen-text); text-decoration:underline; cursor:pointer; }
.files form.datei-standbild { margin-left:0; }
.datei-kanal select { padding:.25rem .4rem; font-size:.85rem; }
.ablage { border:2px dashed var(--m-linie-stark); border-radius:10px; padding:1rem; display:flex; flex-direction:column; gap:.6rem; }
.ablage.bereit { border-color:var(--m-gruen); }
.ablage.aktiv { background:var(--m-gruen-flaeche); }
.ablage-text { margin:0; }
.ablage-kanal { flex:0 0 auto; }
.ablage input[type="file"] { flex:1 1 220px; min-width:0; }
.ablage-balken { width:100%; accent-color:var(--m-gruen); }
.files img { height:48px; width:48px; object-fit:cover; border-radius:4px; } .files form { margin-left:auto; }
@media (max-width:700px) { .kal-hinweis { display:none; } .grid { grid-template-columns:1fr; } .dow, .cell.empty { display:none; } .cell { min-height:0; } }

.err { background:var(--m-rot-flaeche); border:1px solid var(--m-rot); padding:.6rem .8rem; border-radius:6px; }
.warn { background:var(--m-gelb-flaeche); border:1px solid var(--m-gelb); padding:.6rem .8rem; border-radius:6px; }
.log { font-size:.8rem; width:100%; } .log td { vertical-align:top; }
pre.out { background:var(--m-flaeche); border:1px solid var(--m-linie); padding:.8rem; border-radius:8px; white-space:pre-wrap; }

.tiles { display:flex; gap:.6rem; flex-wrap:wrap; margin:1rem 0; }
.tile { background:var(--m-flaeche); border:1px solid var(--m-linie); border-left:6px solid var(--m-gruen); border-radius:8px; padding:.6rem 1rem; min-width:130px; font-size:.8rem; }
.tile span { display:block; font-size:1.5rem; font-weight:700; color:var(--m-ueberschrift); }
.stats-tabelle { overflow-x:auto; }
.barcell { width:30%; } .bar { display:block; height:10px; background:var(--m-gruen); border-radius:5px; min-width:2px; }
.chart { width:100%; max-width:680px; background:var(--m-flaeche); border:1px solid var(--m-linie); border-radius:8px; }
.ch-grid { stroke:var(--m-linie); } .ch-txt { fill:var(--m-leise); }
.ch-a { stroke:var(--m-gruen); } .ch-b { stroke:var(--m-grau-2); } .ch-c { stroke:#e0803c; }
.ch-a-t { fill:var(--m-gruen-text); } .ch-b-t { fill:var(--m-text); } .ch-c-t { fill:#e0803c; }

.btn.big { display:block; text-align:center; background:var(--m-gruen); color:#fff; padding:.8rem 1rem; border-radius:8px; text-decoration:none; font-weight:700; }
.btn.big:hover { background:var(--m-gruen-hover); }
details { border:1px solid var(--m-linie); border-radius:8px; padding:.6rem .8rem; } summary { cursor:pointer; font-size:.85rem; }
.stack { display:flex; flex-direction:column; gap:.8rem; margin-top:.8rem; }
.userrow { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; } .userrow .mail { min-width:180px; font-size:.9rem; } .userrow .acts { display:flex; gap:.4rem; flex-wrap:wrap; margin-left:auto; }
button.small { padding:.3rem .6rem; font-size:.8rem; margin-top:0; }