:root {
  --bg: #f4f5f7;
  --flaeche: #ffffff;
  --rand: #e4e1dc;
  --text: #23211d;
  --text-schwach: #706a5f;
  --akzent: #82642c;
  --akzent-hell: #f3ead8;
  --gruen: #1f8a4c;
  --gruen-hell: #e3f5ea;
  --rot: #c0392b;
  --rot-hell: #fbe9e7;
  --gelb-hell: #fff6dc;
  --radius: 10px;
}
.visual-einstieg { display:flex;justify-content:space-between;align-items:start;gap:24px;margin:12px 0 24px; }
.visual-einstieg p { max-width:760px; }
.visual-upload { max-width:none !important;margin-bottom:24px; }
.visual-upload label,.visual-dialog label,.visual-referenz label { display:block;margin:10px 0; }
.visual-referenzliste { display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px; }
.visual-referenz { padding:20px;background:var(--flaeche);border:1px solid var(--rand);border-radius:12px; }
.visual-referenzbilder { display:flex;gap:8px;overflow-x:auto;margin-bottom:16px; }
.visual-referenzbilder img { width:150px;height:180px;object-fit:contain;background:#2a2722;border-radius:6px; }
.visual-qualitaet { padding:14px;border:1px solid var(--rand);border-radius:10px;margin:14px 0;background:#181713; }
.visual-qualitaet p { margin:8px 0; }
.visual-dialog { width:min(1000px,94vw);max-height:90vh;border:1px solid var(--rand);border-radius:14px;padding:24px;color:var(--text); }
.visual-dialog::backdrop { background:rgba(0, 0, 0, 0.55); }
.visual-dialog h2 { margin:0; }
.visual-dialog fieldset { margin:20px 0;border:1px solid var(--rand);border-radius:8px;padding:16px; }
.visual-editorfolie { display:grid;grid-template-columns:180px 1fr;gap:20px; }
.visual-editorfolie>img { width:180px;max-height:260px;object-fit:contain; }
.visual-dateien button { padding:2px 10px; }
@media(max-width:650px) { .visual-editorfolie { grid-template-columns:1fr; } .visual-einstieg { flex-direction:column; } .visual-referenzliste { grid-template-columns:1fr; } }
* { box-sizing: border-box; }
html { hyphens: none; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--akzent); text-decoration: none; }
h1 { font-size: 24px; margin: 0; }
h2 { font-size: 18px; margin: 24px 0 10px; }
h3 { font-size: 15px; margin: 0 0 6px; }

.kopf {
  display: flex; align-items: center; gap: 18px; padding: 12px 24px;
  background: var(--flaeche); border-bottom: 1px solid var(--rand);
  position: sticky; top: 0; z-index: 5;
}
.marke { font-weight: 700; color: var(--text); letter-spacing: .2px; }
.hauptnav { display: flex; gap: 4px; }
.hauptnav a { padding: 4px 10px; border-radius: 6px; color: var(--text-schwach); }
.hauptnav a:hover { background: #181713; color: var(--text); }

/* Planer */
.planer { display: grid; grid-template-columns: 1fr 340px; gap: 18px; margin-top: 16px; }
@media (max-width: 1000px) { .planer { grid-template-columns: 1fr; } }
.kalender { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal-kopf { font-size: 12px; color: var(--text-schwach); text-align: center; padding: 4px 0; }
.kal-tag { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px; min-height: 96px; padding: 4px; }
.kal-tag.fremd { opacity: .45; }
.kal-tag.heute { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.kal-datum { font-size: 12px; color: var(--text-schwach); text-align: right; padding: 0 2px 2px; }
.kal-eintrag { font-size: 11.5px; line-height: 1.3; background: var(--akzent-hell); border-left: 3px solid var(--akzent); border-radius: 4px; padding: 3px 5px; margin-bottom: 3px; cursor: pointer; overflow: hidden; }
.kal-eintrag:hover { filter: brightness(.96); }
.kal-eintrag.fertig { background: var(--gruen-hell); border-left-color: var(--gruen); }
.kal-eintrag.fehler { background: var(--rot-hell); border-left-color: var(--rot); }
.kal-zeit { font-weight: 600; }
.kal-titel { color: var(--text-schwach); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.unverplant { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 14px; align-self: start; max-height: 80vh; overflow: auto; }
.uv-eintrag { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rand); }
.uv-eintrag img, .uv-eintrag .platzhalter { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: #181713; }
.uv-eintrag select, .uv-eintrag input { width: auto; font-size: 13px; padding: 4px 6px; }
.uv-eintrag button { font-size: 13px; padding: 4px 10px; }
#brotkrumen { color: var(--text-schwach); flex: 1; }
#brotkrumen a { color: var(--text-schwach); }
.systemstatus { font-size: 12px; color: var(--text-schwach); display: flex; gap: 10px; }
.systemstatus .ok { color: var(--gruen); }
.systemstatus .fehlt { color: var(--rot); }

.seite { max-width: 1240px; margin: 0 auto; padding: 24px 16px 80px; }
.zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zwischen { justify-content: space-between; }
.inline { display: flex; gap: 8px; flex-wrap: wrap; }
.stumm { color: var(--text-schwach); }
.klein { font-size: 13px; }
.leer { padding: 40px; text-align: center; color: var(--text-schwach); background: var(--flaeche); border: 1px dashed var(--rand); border-radius: var(--radius); }

input, textarea, select, button {
  font: inherit; color: inherit;
}
input[type=text], input:not([type]), input[type=number], textarea, select {
  border: 1px solid var(--rand); border-radius: 8px; padding: 8px 10px; background: var(--flaeche); width: 100%;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--akzent-hell); border-color: var(--akzent); }
textarea { min-height: 80px; resize: vertical; }
label { display: block; font-size: 13px; color: var(--text-schwach); margin-bottom: 4px; }
.feld { margin-bottom: 14px; }
.inline input { width: auto; }
button {
  border: 1px solid var(--rand); background: var(--flaeche); border-radius: 8px; padding: 8px 14px; cursor: pointer;
}
button:hover { background: #181713; }
button:disabled { opacity: .5; cursor: default; }
button.primaer { background: var(--akzent); color: #1a1915; border-color: var(--akzent); }
button.primaer:hover { background: #6e5426; }
button.gruen { background: var(--gruen); color: #fff; border-color: var(--gruen); }
button.rot { color: var(--rot); border-color: #76342d; }
button.leise { border-color: transparent; background: transparent; color: var(--text-schwach); }
button.leise:hover { background: #181713; }

.tabs { display: flex; gap: 4px; background: #2a2722; padding: 4px; border-radius: 10px; }
.tabs button { border: none; background: transparent; padding: 6px 14px; }
.tabs button.aktiv { background: var(--flaeche); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16); }

.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 20px; }
.karte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 16px;
}
.karte.klickbar { cursor: pointer; }
.karte.klickbar:hover { border-color: var(--akzent); }
.karte .zahlen { display: flex; gap: 14px; margin-top: 10px; font-size: 13px; color: var(--text-schwach); }

.schild {
  display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px;
  background: #181713; color: var(--text-schwach); margin-right: 6px;
}
.schild.entwurf { background: var(--gelb-hell); color: #ffdf66; }
.schild.freigegeben { background: var(--gruen-hell); color: var(--gruen); }
.schild.abgelehnt { background: var(--rot-hell); color: var(--rot); }
.schild.typ { background: var(--akzent-hell); color: var(--akzent); }
.schild.news { background: #2a2722; color: #ece6da; }

/* Profil */
.formular { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 20px; max-width: 900px; }
.spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 760px) { .spalten { grid-template-columns: 1fr; } }
.farbchips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.farbchip { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--rand); }
.logo-vorschau { max-height: 80px; max-width: 200px; display: block; margin-bottom: 8px; background: #1d1b17; border: 1px solid var(--rand); padding: 6px; border-radius: 8px; }
.kontrollen { display: flex; gap: 14px; flex-wrap: wrap; }
.kontrollen label { display: flex; align-items: center; gap: 6px; color: var(--text); }
input[type=range] { accent-color: var(--akzent); padding: 0; border: none; background: transparent; }

/* Analyse und Bildkandidaten */
.analysebox { background: var(--akzent-hell); border: 1px solid #765e2d; border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; }
.analysebox ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-schwach); }
.analysebox li:last-child { color: var(--text); }
.kandidaten { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 10px 0; }
.kandidat { position: relative; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #181713; cursor: pointer; aspect-ratio: 1; }
.kandidat img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kandidat.gewaehlt { border-color: var(--akzent); }
.kandidat input { position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; }

/* Wissensbasis */
.ablage {
  border: 2px dashed var(--rand); border-radius: var(--radius); padding: 28px; text-align: center;
  background: var(--flaeche); color: var(--text-schwach); cursor: pointer;
}
.ablage.aktiv { border-color: var(--akzent); background: var(--akzent-hell); }
.wissenliste { display: grid; gap: 10px; margin-top: 16px; }
.wisseneintrag {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: start;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px;
}
.wisseneintrag img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; background: #181713; }
.wisseneintrag .platzhalter { width: 96px; height: 96px; border-radius: 8px; background: #181713; display: flex; align-items: center; justify-content: center; color: var(--text-schwach); font-size: 12px; }
.wisseneintrag .vorschau { font-size: 13px; color: var(--text-schwach); white-space: pre-wrap; max-height: 120px; overflow: auto; }
.wisseneintrag textarea { font-size: 13px; }

/* Content */
.werkzeuge { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.werkzeuge .feld { margin: 0; }
.werkzeuge input[type=number] { width: 70px; }
.werkzeuge .hinweis { flex: 1; min-width: 240px; }
.fortschritt { margin-top: 12px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px; font-size: 13px; }
.fortschritt ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-schwach); }
.fortschritt li:last-child { color: var(--text); }
.filter { display: flex; gap: 6px; margin: 18px 0 10px; flex-wrap: wrap; }
.filter button.aktiv { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent); }

.contentliste { display: grid; gap: 16px; }
.contentkarte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 18px; padding: 16px;
}
.contentkarte.freigegeben { border-left: 4px solid var(--gruen); }
.contentkarte.abgelehnt { border-left: 4px solid var(--rot); opacity: .85; }
@media (max-width: 860px) { .contentkarte { grid-template-columns: 1fr; } }
.bilder { display: flex; flex-direction: column; gap: 10px; }
.bild {
  position: relative; background: #181713; border-radius: 8px; overflow: hidden;
}
.bild img { display: block; width: 100%; height: auto; }
.bild .fehltext { padding: 30px 12px; text-align: center; color: var(--rot); font-size: 13px; }
.bild .folie { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.bild .aktionen { display: flex; gap: 6px; padding: 6px; background: #181713; }
.bild .aktionen button { font-size: 12px; padding: 4px 10px; }
.linkvorschau { background: #181713; border-radius: 8px; overflow: hidden; }
.linkvorschau .vorschauhinweis { padding: 8px 10px 0; }
.linkvorschau .aktionen { display: flex; gap: 6px; padding: 6px; background: #181713; flex-wrap: wrap; }
.linkvorschau .aktionen button { font-size: 12px; padding: 4px 10px; }
.vorschaukarte {
  display: block; margin: 8px 10px; background: #1d1b17; border: 1px solid var(--rand);
  border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit;
}
.vorschaukarte img { display: block; width: 100%; height: auto; background: #181713; }
.vorschaukarte .fehltext { padding: 24px 12px; text-align: center; color: var(--text-schwach); font-size: 13px; }
.vorschautext { padding: 10px 12px; }
.vorschaudomain { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-schwach); }
.vorschautitel { font-weight: 600; font-size: 14px; margin: 2px 0 4px; line-height: 1.3; }
.promptteil { border: 1px solid var(--rand); border-radius: 8px; margin-bottom: 6px; background: #1d1b17; }
.promptteil summary { cursor: pointer; padding: 8px 12px; font-size: 13px; font-weight: 600; }
.promptteil summary .stumm { font-weight: 400; margin-left: 6px; }
.promptteil pre { margin: 0; padding: 10px 12px; border-top: 1px solid var(--rand); font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-height: 480px; overflow: auto; background: #181713; }
.promptbox { padding: 8px; background: #181713; display: none; }
.promptbox.offen { display: block; }
.promptbox textarea { font-size: 12px; min-height: 100px; }
.contentkarte .texte .feld { margin-bottom: 10px; }
.contentkarte textarea.caption { min-height: 160px; }
.contentkarte .aktionsleiste { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.contentkarte .fehlerbox { background: var(--rot-hell); color: var(--rot); padding: 8px 10px; border-radius: 8px; font-size: 13px; white-space: pre-wrap; margin-bottom: 10px; }
.contentkarte .idee { font-size: 13px; color: var(--text-schwach); margin-bottom: 8px; }
.layoutzeile { margin-bottom: 10px; align-items: center; }
.layoutzeile select { width: auto; }
.postbox { background: #181713; border: 1px solid var(--rand); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.kanal { margin-top: 10px; }
.geaendert { outline: 2px solid var(--gelb-hell); }

/* Regeln */
.regel { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; }
.regel.inaktiv { opacity: .55; }
.regel textarea { font-size: 14px; min-height: 48px; }

/* Chat */
.chatknopf { margin-left: 8px; background: var(--akzent) !important; color: #1a1915 !important; }
.chat {
  position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 100vw; background: var(--flaeche);
  border-left: 1px solid var(--rand); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.16); z-index: 20;
  display: flex; flex-direction: column;
}
.chat[hidden] { display: none; }
.chat-kopf { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--rand); }
.chat-kontext { padding: 8px 14px; border-bottom: 1px solid var(--rand); background: #181713; }
.chat-stueck { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; }
.chat-stueck img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.chat-verlauf { flex: 1; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-nachricht { display: flex; flex-direction: column; gap: 6px; max-width: 92%; }
.chat-nachricht.user { align-self: flex-end; align-items: flex-end; }
.chat-nachricht .blase { padding: 8px 12px; border-radius: 12px; background: #181713; font-size: 14px; line-height: 1.45; }
.chat-nachricht.user .blase { background: var(--akzent); color: #1a1915; }
.aktion { font-size: 13px; background: var(--gruen-hell); border-left: 3px solid var(--gruen); padding: 6px 10px; border-radius: 6px; }
.aktion.fehl { background: var(--rot-hell); border-left-color: var(--rot); }
.aktion img { display: block; max-width: 100%; border-radius: 6px; margin-top: 6px; }
.chat-eingabe { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--rand); align-items: flex-end; }
.chat-eingabe textarea { flex: 1; min-height: 60px; }

.meldung {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #23211d; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 90vw;
}
.meldung.sichtbar { opacity: 1; }
.meldung.fehler { background: var(--rot); }

/* Layout-Vorlagen (Design-Reiter) */
.vorlagen-galerie {
  display: grid; gap: 16px; margin: 12px 0;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.vorlage-karte {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 12px;
}
.vorlage-bild {
  background: #181613; border-radius: 8px; overflow: hidden;
  min-height: 180px; display: grid; place-items: center; margin-bottom: 10px;
}
.vorlage-bild img { width: 100%; height: auto; display: block; }
.vorlage-kopf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.schild-eigen { background: var(--akzent-hell); color: var(--akzent); }
.v-staerke-knopf.aktiv { background: var(--akzent); color: #1a1915; border-color: var(--akzent); }
.token-gitter {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.token-gitter label { display: block; }
.token-gitter input, .token-gitter select, .token-gitter textarea { width: 100%; }
.fehlertext { color: var(--rot); padding: 10px; text-align: center; }

/* Content-Prinzipien */
.tagwahl { display: flex; flex-wrap: wrap; gap: 6px; }
.tagwahl label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 3px 9px; border: 1px solid var(--rand); border-radius: 999px; cursor: pointer; background: var(--flaeche); }
.tagwahl label:has(input:checked) { background: var(--akzent-hell); color: var(--akzent); border-color: var(--akzent); }
.tagwahl input { margin: 0; }
.prinzip { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
.prinzip.inaktiv { opacity: .55; }
.prinzip .muster { font-style: italic; color: var(--text-schwach); margin-top: 6px; }
.stufenbox { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 10px 0; }
.stufe { border: 1px solid var(--rand); border-radius: 8px; padding: 10px; font-size: 13px; }
.stufe.aktiv { border-color: var(--akzent); background: var(--akzent-hell); }

/* Einstellungen (Fundus-Suche) und Kasten „So wird gesucht" */
.aktivbanner { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--akzent-hell); border: 1px solid #765e2d; border-radius: var(--radius); padding: 10px 14px; margin: 12px 0; font-size: 14px; }
.schild.warn { background: var(--gelb-hell); color: #ffdf66; }
.vorgaben { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-bottom: 12px; }
.vorgabe { position: relative; text-align: left; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; }
.vorgabe:hover { border-color: var(--akzent); }
.vorgabe.geladen { border-color: var(--akzent); background: var(--akzent-hell); }
.vorgabe .beschreibung { font-size: 12.5px; color: var(--text-schwach); margin-top: 4px; }
.vorgabe .loeschen { position: absolute; top: 8px; right: 8px; font-size: 12px; padding: 2px 8px; }
.karte-einst { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; }
.karte-einst h3 { margin-bottom: 2px; }
.karte-einst .raster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-top: 12px; }
@media (max-width: 760px) { .karte-einst .raster { grid-template-columns: 1fr; } }
.regler label { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; color: var(--text); }
.regler .wert { font-variant-numeric: tabular-nums; font-weight: 600; }
.regler .reihe { display: flex; gap: 10px; align-items: center; }
.regler .reihe input[type=range] { flex: 1; }
.regler .reihe input[type=number] { width: 100px; padding: 5px 8px; }
.regler .hinweis { font-size: 12px; color: var(--text-schwach); margin-top: 2px; }
.regler textarea { font-family: ui-monospace, Consolas, monospace; font-size: 13px; min-height: 120px; }
.regler.breit { grid-column: 1 / -1; }
.klebeleiste { position: sticky; bottom: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 0; margin-top: 8px; background: rgba(255, 248, 235, 0.085); border-top: 1px solid var(--rand); backdrop-filter: blur(4px); }
.suchweg { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 14px 18px; font-size: 14px; }
.suchweg ol { margin: 0; padding-left: 22px; }
.suchweg li { margin-bottom: 10px; }
.suchweg li strong { display: block; }
.suchweg .klein { color: var(--text-schwach); }
.suchweg .kosten { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rand); }

/* Galerie: gesammelte Posts in der Anmutung der Netzwerke */
.galeriefilter { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px; margin: 16px 0 10px; }
.galeriefilter select, .galeriefilter input { width: auto; min-width: 150px; }
.postgitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; align-items: start; }
.post { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.post-kopf { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.post-avatar { width: 34px; height: 34px; border-radius: 999px; background: var(--akzent-hell); color: var(--akzent); display: grid; place-items: center; font-weight: 700; flex: none; }
.post-autor { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.post-autor strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-kopf .schild { margin: 0; flex: none; }
.post-bild { background: #181713; display: grid; place-items: center; min-height: 120px; }
.post-bild img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; }
.post-kein-bild { padding: 26px 14px; text-align: center; font-size: 12.5px; color: var(--text-schwach); }
.post-zahlen { padding: 8px 12px 0; color: var(--text-schwach); }
.post-text { padding: 6px 12px 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.post-text.gekuerzt { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.post-mehr { align-self: flex-start; margin: 2px 6px; }
.post-fuss { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; margin-top: auto; border-top: 1px solid var(--rand); }
.post-fuss .schild { margin: 0; }
.post-urteil { padding: 0 12px 10px; }

/* Kundenseite seit 24.09.2026: vier Bereiche, darunter nur die Reiter des gewählten Bereichs */
.seite > #k-name { margin-bottom: 10px; }
.kunde-bereiche { margin: 0 0 12px; border-bottom: 1px solid var(--rand); align-items: flex-end; }
.bereiche { display: flex; gap: 2px; flex-wrap: wrap; }
.bereiche button { border: none; border-radius: 0; background: transparent; padding: 8px 14px 10px; font-weight: 600; color: var(--text-schwach); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.bereiche button:hover { background: transparent; color: var(--text); }
.bereiche button.aktiv { color: var(--text); border-bottom-color: var(--akzent); }
.kunde-bereiche .chatknopf { margin: 0 0 8px; }
[data-tabs-von] { flex-wrap: wrap; margin-bottom: 14px; }
[data-tabs-von][hidden] { display: none; }
.bereiche-trenner { align-self: center; height: 22px; border-left: 1px solid var(--rand); margin: 0 10px 4px; }
/* Seit 24.09.2026: Was nur der Betreiber sieht (der Kunde hat diese Seiten im Portal nicht), ist violett */
:root { --betreiber: #8a6a30; --betreiber-hell: #f3ead8; }
.bereiche button[data-nur-betreiber], .tabs button[data-nur-betreiber] { color: var(--betreiber); }
.bereiche button[data-nur-betreiber].aktiv { color: var(--betreiber); border-bottom-color: var(--betreiber); }
.tabs button[data-nur-betreiber].aktiv { background: var(--betreiber-hell); }
.chatknopf { background: var(--betreiber) !important; border-color: var(--betreiber) !important; }
.kunde-rechts { gap: 12px; align-items: center; margin-bottom: 8px; }
.kunde-bereiche .kunde-rechts .chatknopf { margin: 0; }
.nur-betreiber-legende { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--betreiber); }
.nur-betreiber-legende::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--betreiber); }

/* Seit 25.09.2026: Fundus als ein Menüpunkt mit Unterreitern; Website-Auswertung im Profil; Material violett */
.unternavi { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--rand); }
.unternavi a { padding: 6px 12px; border-radius: 8px; color: var(--text-schwach); }
.unternavi a.aktiv { background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }
.website-auswertung { border: 1px solid #765e2d; background: var(--betreiber-hell); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; }
.website-auswertung p { margin: 0; }
.wisseneintrag.nur-betreiber { border-left: 3px solid var(--betreiber); }
.material-sichtbar { margin: 8px 0 16px; }