* { box-sizing: border-box; }

:root {
  --bg: #f4f5f7;
  --card-bg: #ffffff;
  --border: #e4e4e7;
  --text: #18181b;
  --text-muted: #6b7280;
  --accent: #c17a5f;
  --accent-hover: #ad6a51;
  --accent-soft: #fbeee8;
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(20, 20, 25, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 20, 25, 0.06), 0 1px 3px rgba(20, 20, 25, 0.05);
  --shadow-lg: 0 16px 40px rgba(20, 20, 25, 0.14), 0 2px 8px rgba(20, 20, 25, 0.06);
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ---- Header ---- */
.app-header { margin-bottom: 24px; }
.app-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.app-header-title { min-width: 0; }
.app-header h1 { font-size: 26px; margin: 0 0 8px; font-weight: 700; }
.app-header-tagline { font-weight: 500; font-size: 0.52em; color: var(--text-muted); white-space: nowrap; }
.app-header p { margin: 0; color: var(--text-muted); font-size: 14px; max-width: 720px; line-height: 1.5; }
.app-header-logo { height: 26px; width: auto; flex-shrink: 0; margin-top: 6px; }
@media (max-width: 640px) {
  .app-header-top { flex-direction: column; }
  .app-header-tagline { display: block; margin-top: 4px; white-space: normal; }
}
.health-banner { margin-top: 10px; font-size: 13px; }
.health-banner.warn {
  background: #fff4e5; color: #92400e; border: 1px solid #fcd9a6;
  padding: 8px 12px; border-radius: 8px; display: inline-block;
}

/* ---- Cards ---- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.card h2 { font-size: 15px; margin: 0 0 6px; font-weight: 700; }
.hint { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; }

textarea, input[type="text"], input[type="url"], input[type="number"] {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 14.5px;
  resize: vertical;
  background: #fafafa;
  color: var(--text);
}
textarea, input[type="text"], input[type="url"] { width: 100%; }
textarea:focus, input[type="text"]:focus, input[type="file"]:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}

.file-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.file-line input[type="file"] { font-size: 12px; max-width: 260px; }

/* ---- Dropzone ---- */
.dropzone {
  border: 2px dashed #cfd2d8;
  border-radius: 12px;
  padding: 36px 20px;
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone-icon { color: #9ca3af; margin-bottom: 8px; }
.dropzone p { margin: 0 0 4px; font-size: 15.5px; color: var(--text); }
.dropzone-sub { font-size: 12px; color: var(--text-muted); }
.dropzone.drag { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.drag .dropzone-icon { color: var(--accent); }

/* "Foto aufnehmen"-Button (siehe index.html): per Default versteckt - macht auf
   Desktop keinen Sinn (kein "capture"-Verhalten, wäre nur ein redundanter zweiter
   Datei-Dialog neben der Dropzone). Erscheint nur unterhalb der Mobile-Breite. */
.camera-capture-btn { display: none; width: 100%; justify-content: center; margin: 10px 0 16px; }
@media (max-width: 700px) {
  .camera-capture-btn { display: inline-flex; }
}

.thumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}
/* Sobald Bilder ausgewählt sind, als eigene Fläche absetzen statt lose im
   Karten-Hintergrund zu schweben (moderne Browser; ohne :has()-Unterstützung
   bleibt die Liste optisch schlicht, funktional unverändert). */
.thumb-list:has(.thumb-wrap) {
  padding: 14px;
  background: #faf8f6;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.thumb { position: relative; width: 68px; height: 68px; cursor: grab; }
/* object-fit: contain (statt cover) - zeigt IMMER das komplette Bild in der
   festen 68x68-Box, auch nach einem manuellen Zuschnitt auf ein Nicht-1:1-
   Format (z.B. 9:16 fürs Story-Format). Mit "cover" würde die quadratische
   Box das eben erst manuell gewählte Seitenverhältnis selbst nochmal
   automatisch mittig zuschneiden - die kleine Vorschau hätte dann nicht mehr
   zum tatsächlich gespeicherten Bildausschnitt gepasst. */
.thumb img { width: 100%; height: 100%; object-fit: contain; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); }
.remove-thumb {
  position: absolute; top: -6px; right: -6px;
  background: #18181b; color: #fff; border: 2px solid #fff;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 12px; cursor: pointer; line-height: 1;
}

/* Reihenfolge per Drag&Drop änderbar */
.thumb.dragging { opacity: 0.4; }
.thumb.drag-over { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* Live-Fortschritt pro Bild während "Analysieren & Postings erstellen" läuft */
.thumb-status {
  position: absolute;
  bottom: -6px;
  left: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.thumb-processing .thumb-status { color: var(--accent-hover); border-color: var(--accent); animation: smc-pulse 1s ease-in-out infinite; }
.thumb-done .thumb-status { color: #fff; background: #2ecc71; border-color: #2ecc71; }
.thumb-error .thumb-status { color: #fff; background: #b42318; border-color: #b42318; }
@keyframes smc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.thumb-list.processing .remove-thumb { display: none; }
.thumb-list.processing .thumb { cursor: default; }

.thumb-crop-btn {
  position: absolute; bottom: -8px; right: -8px;
  background: #fff; color: var(--text); border: 1px solid var(--border);
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 15px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.thumb-list.processing .thumb-crop-btn { display: none; }
.thumb-cropped-badge {
  position: absolute; top: -6px; left: -6px;
  background: var(--accent); color: #fff; border: 2px solid #fff;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 9px; display: flex; align-items: center; justify-content: center;
}

.cost-estimate { margin: -6px 0 12px; }

.action-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---- Fortschrittsanzeige während "Analysieren & Postings erstellen" ---- */
.generate-progress { margin-top: 12px; }
.generate-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #ece9e5;
  overflow: hidden;
}
.generate-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.35s ease;
}
/* Solange noch kein einziges Bild fertig ist (0%), trotzdem ein kurzes,
   sichtbares Lebenszeichen zeigen statt eines leeren Balkens. */
.generate-progress.active .generate-progress-bar { min-width: 3%; }
.generate-progress.active .generate-progress-bar {
  background-image: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent-hover) 50%,
    var(--accent) 100%
  );
  background-size: 200% 100%;
  animation: smc-progress-shimmer 1.4s linear infinite;
}
@keyframes smc-progress-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: 0 0; }
}
.generate-progress.done .generate-progress-bar { background: #2ecc71; animation: none; }
.generate-progress.error .generate-progress-bar { background: #b42318; animation: none; }
.generate-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.generate-progress-timer { font-variant-numeric: tabular-nums; font-weight: 600; }

.primary-btn {
  padding: 13px 24px;
  min-height: 46px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(193, 122, 95, 0.28);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.primary-btn:hover:not(:disabled) { background: var(--accent-hover); box-shadow: 0 4px 12px rgba(193, 122, 95, 0.34); }
.primary-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 4px rgba(193, 122, 95, 0.3); }
.primary-btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.status-msg { font-size: 13px; color: var(--text-muted); }

.secondary-btn {
  padding: 11px 18px;
  min-height: 42px;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.secondary-btn:hover:not(:disabled) { background: #faf8f6; border-color: var(--accent); box-shadow: var(--shadow-sm); }
.secondary-btn:disabled { opacity: 0.5; cursor: default; }

.regenerate-row { margin-top: 16px; }
.prep-download-row { margin-top: 10px; }
.send-freigabe-row { margin-top: 10px; }
.freigabe-jump-link { color: var(--accent); font-weight: 600; margin-left: 6px; }
.send-freigabe-form {
  margin-top: 10px;
  padding: 14px;
  background: #faf8f6;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.finish-btn { font-size: 16px; padding: 13px 24px; }

/* ---- Copy-Buttons neben Titel/Caption/Hashtags/Alt-Text ---- */
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 5px; }
.field-label-row label { margin: 0; }
.copy-btn {
  border: none;
  background: none;
  color: var(--accent-hover);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
  text-transform: none;
  letter-spacing: normal;
}
.copy-btn:hover { text-decoration: underline; }
.copy-btn.copied { color: #2ecc71; }

/* Hashtag-Sets: kleine Chip-Buttons unter dem Hashtags-Feld im Generator
   (siehe activeHashtagSets in app.js) - fügen gespeicherte Kombinationen an,
   statt das Feld zu überschreiben. */
.hashtag-set-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hashtag-set-btn {
  border: 1px solid var(--border); background: #fff; color: var(--text);
  border-radius: 20px; padding: 4px 11px; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
}
.hashtag-set-btn:hover { border-color: var(--accent); color: var(--accent-hover); }

/* ---- Vorschlags-Varianten (A/B) neben "Neuer Vorschlag" ---- */
.variant-nav { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.variant-nav button {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  width: 22px;
  height: 22px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text);
}
.variant-nav button:hover:not(:disabled) { border-color: var(--accent); }
.variant-nav button:disabled { opacity: 0.35; cursor: default; }
.variant-label { min-width: 62px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- Results ---- */
.results-heading { font-size: 15px; font-weight: 700; margin: 4px 0 14px; }
.results-container { display: flex; flex-direction: column; gap: 20px; }
.empty-hint { color: var(--text-muted); font-size: 13px; }

.result-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.result-error { color: #b42318; font-size: 13px; }

.result-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
}
@media (max-width: 750px) {
  .result-grid { grid-template-columns: 1fr; }
}

.editor-col h3 { margin: 0; font-size: 14px; word-break: break-all; font-weight: 700; }
.editor-col label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin: 12px 0 5px; font-weight: 600; }

.editor-top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }

/* Kleines Badge für den markierten Aufnahmeort (Ortsmarkierung-Feature), taucht
   im Ergebnis-Editor, in der Freigabe-Übersicht und -Detailansicht auf. */
.location-badge {
  display: inline-block; font-size: 11px; font-weight: 600; color: var(--accent-hover);
  background: rgba(96, 132, 214, 0.12); border-radius: 20px; padding: 3px 10px; white-space: nowrap;
}

/* Farbiger Rand je Freigabe-Status, direkt am Ergebnis erkennbar. */
.result-card[data-status="entwurf"] { border-left: 4px solid #cfd2d8; }
.result-card[data-status="review"] { border-left: 4px solid #e9b949; }
.result-card[data-status="approved"] { border-left: 4px solid #2ecc71; }

.field-counter { display: block; font-size: 11px; color: var(--text-muted); margin-top: 4px; text-align: right; }
.field-counter.counter-warn { color: #b42318; font-weight: 700; }

/* ---- Sprach-Tabs pro Ergebniskarte ---- */
.lang-tabs { display: flex; gap: 6px; margin-top: 14px; }
.lang-tab-btn {
  padding: 5px 12px;
  border: 1px solid var(--border);
  background: #fafafa;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.lang-tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.lang-warning {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #fdf1e8;
  border: 1px solid #e9b949;
  color: #8a5a00;
  font-size: 12.5px;
  font-weight: 600;
}

/* ---- Sprachen-Auswahl im Kampagnen-Briefing ---- */
.lang-select-row { margin-top: 18px; }
.lang-checkbox-list { flex-direction: row; gap: 20px; flex-wrap: wrap; }

.analysis-block {
  font-size: 12.5px;
  background: #faf8f6;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.analysis-block summary { cursor: pointer; font-weight: 600; color: var(--accent-hover); list-style: revert; }
.analysis-list { margin: 8px 0 0; padding-left: 16px; color: var(--text); }
.analysis-list li { margin-bottom: 5px; line-height: 1.4; }

.campaign-check {
  font-size: 12.5px;
  background: #f0f9f3;
  border: 1px solid #c9ecd4;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  line-height: 1.4;
}

/* "Wie gefalle ich dem Algorithmus?" - rein interne Einschätzung der KI
   (siehe algorithmus_score/-begruendung im Prompt), nicht Teil dessen, was
   an Kunden/Freigabe weitergegeben wird - bewusst dezent, aber gut sichtbar
   direkt unter den generierten Texten. */
.algo-score-block {
  font-size: 12.5px;
  background: #faf8f6;
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 10px;
  margin: 10px 0;
}
.algo-score-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.algo-score-label { font-weight: 600; color: var(--text); }
.algo-score-value { font-weight: 700; font-size: 15px; color: var(--text); white-space: nowrap; }
.algo-score-max { font-weight: 500; font-size: 11px; color: var(--text-muted); }
.algo-score-bar { height: 6px; background: #e8e6e2; border-radius: 999px; margin: 8px 0 6px; overflow: hidden; }
.algo-score-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.3s ease; }
.algo-score-bar-fill.algo-score-bar-low { background: #d0453a; }
.algo-score-bar-fill.algo-score-bar-mid { background: #e0a52c; }
.algo-score-bar-fill.algo-score-bar-high { background: #2ecc71; }
.algo-score-text { margin: 0; color: var(--text-muted); line-height: 1.4; }

/* ---- Preview tabs ---- */
.preview-tabs { display: flex; gap: 6px; margin-bottom: 12px; background: #f1f1f3; padding: 4px; border-radius: 9px; }
.tab-btn {
  flex: 1;
  padding: 7px 4px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab-btn.active { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

.preview-pane { display: none; }
.preview-pane.active { display: block; }

/* Nur für den PDF-Export gebaut (siehe app.js renderPrintLangVersions) - auf dem
   Bildschirm immer ausgeblendet, erscheint nur innerhalb von @media print. */
.print-lang-versions { display: none; }

/* ---- Mock: shared ---- */
.mock {
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 12px;
  overflow: hidden;
  font-size: 12px;
  max-width: 320px;
  margin: 0 auto;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.mock-header { display: flex; align-items: center; padding: 9px 11px; gap: 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); flex-shrink: 0; }
.avatar.small { width: 24px; height: 24px; }
.mock-header-text { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.mock-username { font-weight: 600; font-size: 12px; }
.mock-location { font-size: 10px; color: #888; }
.mock-dots { color: #444; }

/* object-fit: contain (statt cover) - die Formate 1:1 (Feed), 4:3 (Facebook)
   und 9:16 (Story, siehe .story-image weiter unten) unterscheiden sich vom
   tatsächlichen Bildformat (insbesondere nach einem manuellen Zuschnitt im
   Upload-Bereich). Mit "cover" hätte jede Vorschau das Bild nochmal anders
   automatisch mittig zugeschnitten - die drei Formate passten dann optisch
   nicht mehr zueinander bzw. nicht mehr zum selbst gewählten Ausschnitt.
   "contain" zeigt in jedem Format immer das komplette Bild (ggf. mit
   dezenten Balken), garantiert konsistent über alle drei Vorschauen hinweg. */
.mock-image-square { width: 100%; aspect-ratio: 1 / 1; background: #eee; }
.mock-image-square img, .mock-image-square video { width: 100%; height: 100%; object-fit: contain; display: block; }

.mock-image-rect { width: 100%; aspect-ratio: 4 / 3; background: #eee; }
.mock-image-rect img, .mock-image-rect video { width: 100%; height: 100%; object-fit: contain; display: block; }

.mock-actions { padding: 9px 11px; font-size: 16px; letter-spacing: 4px; color: #333; }
.fb-actions { font-size: 11px; letter-spacing: 0; color: #555; border-top: 1px solid #eee; padding: 9px 11px; }

.mock-caption { padding: 0 11px 11px; font-size: 12px; line-height: 1.45; }
.fb-caption { padding: 0 11px 8px; }
.mock-title { font-weight: 600; }
.mock-hashtags { color: #00376b; margin-top: 5px; word-break: break-word; }

.mock-cta { display: none; margin-top: 8px; font-size: 12px; font-weight: 700; }
.mock-cta.ig-cta { color: var(--accent-hover); }
.mock-cta.fb-cta a { color: #1877f2; text-decoration: none; }
.mock-cta.fb-cta a:hover { text-decoration: underline; }
.mock-cta.story-cta { color: #fff; margin-top: 10px; font-size: 12px; }

/* ---- Statische PDF-Export-Varianten (siehe app.js print*Template-Funktionen) ---- */
.print-mock-title { font-weight: 600; }
.print-mock-hashtags { color: #00376b; margin-top: 5px; word-break: break-word; }
.print-mock-cta { margin-top: 8px; font-size: 12px; font-weight: 700; }
.print-mock-cta.ig-cta { color: var(--accent-hover); }
.print-mock-cta.fb-cta a { color: #1877f2; text-decoration: none; }
.print-mock-cta.story-cta { color: #fff; margin-top: 10px; font-size: 12px; }

/* ---- Instagram Story ---- */
.ig-story { max-width: 220px; background: #000; color: #fff; border-radius: 18px; position: relative; }
.story-progress { height: 3px; background: rgba(255,255,255,0.3); margin: 7px 9px 0; border-radius: 3px; }
.story-header { background: transparent; }
.story-header .mock-username { color: #fff; }
.story-image { width: 100%; aspect-ratio: 9 / 16; background: #222; }
.story-image img, .story-image video { width: 100%; height: 100%; object-fit: contain; display: block; }
.story-caption { position: absolute; bottom: 16px; left: 0; right: 0; padding: 0 14px; font-size: 13px; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }

/* ---- Layout: Generator-Schublade (fest auf ein Projekt gesperrt, keine
   Seitenleiste mehr - alle Einstiegspunkte liegen im Board-Kopfbereich) ---- */
.page-app { max-width: 1280px; }

.app-shell {
  display: flex;
  align-items: flex-start;
}

.main-content-full { width: 100%; }

.company-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1;
  min-height: 40px;
}
.company-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 10px;
  min-height: 46px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  text-align: left;
  font: inherit;
  color: var(--text);
  width: 100%;
}
.company-list-item:hover { background: #faf8f6; }
.company-list-item.active { background: var(--accent-soft); border-color: var(--accent); }
.company-list-item .avatar { width: 30px; height: 30px; flex-shrink: 0; }
.company-list-item-name {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-content { flex: 1; min-width: 0; }

.main-view { display: none; }
.main-view.active { display: block; }

.empty-state {
  background: var(--card-bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
}
.empty-state h2 { margin: 0 0 8px; color: var(--text); font-size: 18px; }
.empty-state p { margin: 0; font-size: 14px; }

.company-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.avatar-lg { width: 48px; height: 48px; flex-shrink: 0; }
.company-header-text { flex: 1; min-width: 0; }
.company-header-text h2 { margin: 0; font-size: 19px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.company-subview { display: none; }
.company-subview.active { display: block; }

/* ---- Kampagnen-Briefing-Vorschau (nur lesend, Bearbeitung unter "Projekte
   verwalten") ---- */
.brief-warning {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 9px;
  background: #fdf1e8;
  border: 1px solid #e9b949;
  color: #8a5a00;
  font-size: 13.5px;
}
.brief-warning a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Saisonaler Tipp im Generator (siehe renderSeasonalTip in app.js) - fest
   nach Monat kuratierte Themenidee, rein informativ, kein API-Call. */
.seasonal-tip-box {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--text);
  font-size: 13.5px;
}

/* ---- "Projekte verwalten": Liste links + Formular rechts ---- */
.manage-header-row { margin-bottom: 18px; }
.manage-header-row h2 { margin: 0 0 6px; }

.manage-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.manage-list-col {
  flex: 0 0 260px;
  width: 260px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.manage-list-col .company-list { max-height: 360px; margin-top: 0; }
.manage-form-col { flex: 1; min-width: 0; }

@media (max-width: 860px) {
  .manage-layout { flex-direction: column; }
  .manage-list-col { width: 100%; flex: none; }
  .manage-list-col .company-list { max-height: 240px; }
}

/* ---- Zuschnitt & Komprimierung ---- */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 700px) {
  .settings-grid { grid-template-columns: 1fr; }
}
.settings-col h3 { font-size: 13px; margin: 0 0 10px; font-weight: 700; }

.format-options { display: flex; flex-direction: column; gap: 10px; }
.format-checkbox-row, .radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.format-checkbox, .radio-row input[type="radio"] { accent-color: var(--accent); width: 15px; height: 15px; }

.target-size-row { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; }
.target-size-row input[type="number"] { width: 100px; }

.crop-group { margin-bottom: 28px; }
.crop-group-title { font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.seo-name-row { margin: 10px 0; max-width: 320px; }
.seo-name-row input[type="text"] { font-size: 12.5px; padding: 8px 10px; }
.crop-card-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; }
.crop-card { width: 300px; max-width: 100%; }
.crop-card-label { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.crop-canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--border);
  touch-action: none;
  cursor: grab;
}
.crop-canvas:active { cursor: grabbing; }

.zoom-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--text-muted); }
.zoom-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.zoom-value { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Download-Paket (Posting-Kontext im Zuschnitt-Tool) ---- */
.crop-posting-banner {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.posting-package-box {
  background: #faf8f6;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.posting-package-box .hint { margin-bottom: 12px; }
.posting-package-status { margin-left: 10px; }

.downloads-list { display: flex; flex-direction: column; gap: 8px; }
.download-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  padding: 9px 12px;
  background: #faf8f6;
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-wrap: wrap;
}
.download-name { font-weight: 600; }
.download-meta { color: var(--text-muted); flex: 1; }
.download-link { color: var(--accent-hover); font-weight: 600; text-decoration: none; }
.download-link:hover { text-decoration: underline; }

/* ---- Header: Kosten-Badge ---- */
.header-meta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.health-banner { margin-top: 0; }
.cost-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
.cost-badge:hover { border-color: var(--accent); color: var(--text); }

/* ---- Presets ---- */
.preset-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.preset-row select {
  flex: 1;
  min-width: 160px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: #fafafa;
  color: var(--text);
}

.tone-settings { margin-top: 18px; }
.cta-row { margin-top: 18px; }
.account-row { margin-top: 18px; }

/* ---- Erweiterte Einstellungen (einklappbar, standardmäßig zu) ----
   Bewusst kompakt gehalten: das Panel wird auch beim Öffnen eines bereits
   angelegten Postings (nicht nur bei der Ersteinrichtung) eingeblendet und
   soll dort nicht unnötig viel Platz beanspruchen - kleinere Innenabstände/
   Schriftgrößen als der Rest der App, aber weiterhin gut lesbar/klickbar. */
.advanced-settings {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 2px;
}
.advanced-settings summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  padding: 8px 0;
  list-style: none;
}
.advanced-settings summary::-webkit-details-marker { display: none; }
.advanced-settings summary::before { content: "▸ "; color: var(--accent); }
.advanced-settings[open] summary::before { content: "▾ "; }
.advanced-settings[open] summary {
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

/* Jede thematische Gruppe (Anrede, Wortschatz, CTA, Landing-Page, Im Text
   berücksichtigen, Sprache) bekommt eine eigene Karte statt loser Blöcke im
   selben Fließtext - macht die vielen Felder auf einen Blick überschaubar,
   aber mit deutlich schlankeren Abständen als eine normale .card. */
.advanced-settings .settings-grid { row-gap: 10px; column-gap: 16px; }
.advanced-settings .tone-settings,
.advanced-settings .cta-row,
.advanced-settings .key-terms-row,
.advanced-settings .lang-select-row {
  margin-top: 10px;
}
.advanced-settings .settings-col {
  background: #faf8f6;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
}
.advanced-settings .settings-col h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 0 0 8px;
  font-weight: 700;
}
.settings-col-icon { font-size: 13px; line-height: 1; }
.advanced-settings .small-label { margin-top: 0; margin-bottom: 3px; font-size: 10.5px; }
.advanced-settings .settings-col .hint { margin-bottom: 6px; font-size: 12px; }
.advanced-settings .format-options { gap: 6px; }
.advanced-settings .format-checkbox-row,
.advanced-settings .radio-row { font-size: 12.5px; }
.advanced-settings .settings-col textarea,
.advanced-settings .settings-col input[type="text"],
.advanced-settings .settings-col input[type="url"],
.advanced-settings .settings-col input[type="number"] {
  background: #fff;
  padding: 7px 9px;
  font-size: 13px;
  border-radius: 8px;
}
.advanced-settings .hashtag-count-row { font-size: 12.5px; }
.advanced-settings textarea#keyTerms { min-height: 46px; }

.small-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin: 0 0 5px; font-weight: 600; }

.hashtag-count-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.hashtag-count-row input[type="number"] { width: 70px; }

.import-presets-line { margin-top: 0; }

/* ---- Konto-Name & Profilbild ---- */
.avatar-picker-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.avatar-picker-preview {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.avatar-file-line { margin-top: 0; }

/* ---- Ergebnisse: Header-Zeile mit Export-Button ---- */
.results-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.results-header-row .results-heading { margin: 0; }

/* ---- Verlauf ---- */
#historySearch {
  flex: 1;
  min-width: 200px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  background: #fafafa;
  color: var(--text);
}
#historyStatusFilter {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13px;
  background: #fafafa;
  color: var(--text);
}
.history-status-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  background: #f1f1f3;
  color: var(--text-muted);
}
.history-status-badge.status-review { background: #fdf1e0; color: #92600a; }
.history-status-badge.status-approved { background: #e6f9ec; color: #1a7a3d; }
.history-card {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 14px;
  align-items: start;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.history-thumb { width: 90px; border-radius: 8px; overflow: hidden; background: #eee; }
.history-thumb img { width: 100%; display: block; }
.history-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--text-muted); }
.history-filename { font-weight: 600; word-break: break-all; }
.history-campaign { font-size: 11px; color: var(--accent-hover); margin-top: 2px; }
.history-title { font-weight: 700; font-size: 13px; margin-top: 4px; }
.history-caption { font-size: 12.5px; color: var(--text); margin-top: 3px; line-height: 1.4; }
.history-hashtags { font-size: 12px; color: #00376b; margin-top: 4px; word-break: break-word; }
.history-delete {
  background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 4px;
}
.history-delete:hover { color: #b42318; }
@media (max-width: 560px) {
  .history-card { grid-template-columns: 1fr; }
  .history-thumb { width: 100%; }
}

/* ---- Druckansicht (Export für Freigabe) ----
   Zeigt NUR die fertigen Social-Media-Vorschauen (Mockups) - kein Werkzeug-Chrome,
   keine Bildanalyse, keine Eingabefelder. Der Kunde soll ein sauberes Posting-Mockup
   sehen, nicht die Werkstatt dahinter. */
@media print {
  .app-header,
  .company-header,
  .results-header-row,
  .card,
  .editor-col,
  .preview-tabs,
  #panelCrop,
  #viewManageProjects {
    display: none !important;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  html, body { background: #fff; margin: 0; padding: 0; }
  .page { max-width: 100%; margin: 0; padding: 0; min-height: 0 !important; }
  .results-section { margin: 0; padding: 0; }

  /* Nichts soll vor dem ersten Ergebnis einen Seitenumbruch erzwingen - sonst
     bleibt Seite 1 leer, weil der Browser den ersten (unteilbaren) Block nicht
     mehr auf die Reststrecke von Seite 1 bekommt. */
  #resultsContainer { margin: 0; padding: 0; break-before: avoid; page-break-before: avoid; }
  #resultsContainer > .result-card:first-child {
    break-before: avoid;
    page-break-before: avoid;
    margin-top: 0;
  }

  .result-card {
    break-inside: auto;
    border: none !important;
    box-shadow: none;
    margin-bottom: 28px;
    padding: 0;
  }
  .mock { break-inside: avoid; page-break-inside: avoid; }

  /* Nur noch eine Spalte (Vorschau), zentriert - Editor-Spalte ist ausgeblendet. */
  .result-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .preview-col { max-width: 380px; margin: 0 auto; }

  /* Die interaktiven Vorschau-Panes zeigen immer nur EINE Sprache (die gerade
     aktive) - für den Kunden-PDF brauchen wir aber beide Sprachversionen
     nebeneinander, also werden sie hier ausgeblendet und stattdessen die
     statischen .print-lang-versions-Blöcke gezeigt (siehe unten). */
  .preview-pane { display: none !important; }

  .print-lang-versions { display: block !important; margin: 0; padding: 0; }

  /* Kein break-inside:avoid auf dem ganzen Sprachblock (DE bzw. IT mit allen drei
     Formaten) - der ist oft höher als eine Druckseite. Statt den kompletten Block
     auf die nächste Seite zu schieben (was Seite 1 leer lassen würde), darf er
     zwischen den einzelnen Formaten (.print-pane) umbrechen; nur die einzelnen
     Mockups selbst bleiben unbrechbar (siehe .print-pane/.mock unten). */
  .print-lang-block { margin-bottom: 36px; break-inside: auto; }
  .print-lang-block:last-child { margin-bottom: 0; }
  .print-lang-versions .print-lang-block:first-child {
    break-before: avoid;
    page-break-before: avoid;
  }

  .print-lang-heading {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }

  /* Alle drei Formate (Feed/Story/Facebook) untereinander zeigen statt nur den
     gerade aktiven Tab - der Kunde soll alle Varianten auf einen Blick sehen. */
  .print-pane {
    display: block;
    margin-bottom: 22px;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .print-pane:last-child { margin-bottom: 0; }

  /* "Jetzt an Kunde schicken" passiert jetzt aus der Freigabe-Detailansicht
     heraus (siehe freigabe.js) statt aus dem Generator - beim Drucken von
     dort soll NUR der Mockup-Block dieses einen Postings erscheinen, nicht
     das Board dahinter oder der interne Freigabe-Workflow (Rollen-Boxen,
     Kommentare, Bearbeiten-Formular etc.). */
  .freigabe-header,
  .freigabe-body,
  .freigabe-detail-header,
  #freigabeDetail > img,
  #freigabeDetail > label,
  #freigabeDetail > input,
  #freigabeDetail > textarea,
  .freigabe-detail-lang-tabs,
  .freigabe-role-boxes,
  .freigabe-comments,
  .freigabe-history,
  .freigabe-detail-footer,
  .freigabe-approved-banner,
  #freigabeDetail > .action-row {
    display: none !important;
  }
  /* WICHTIG: #freigabeDetailOverlay steckt in #viewFreigabe.freigabe-page, das
     selbst "position: fixed; inset: 0; overflow-y: auto;" ist (fürs normale
     Scrollen am Bildschirm). Fixierte Container mit overflow:auto werden beim
     Drucken NICHT für die Seite expandiert, sondern auf die sichtbare
     Viewport-Höhe abgeschnitten - ohne diese Zeile fehlten dadurch alle
     Formate, die im Moment des Drucks unterhalb des sichtbaren Bereichs des
     Dialogs lagen (z.B. das Facebook-Format ganz unten). */
  .freigabe-page {
    position: static !important;
    inset: auto !important;
    overflow: visible !important;
    height: auto !important;
    background: none !important;
  }
  .freigabe-detail-overlay {
    position: static !important;
    background: none !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    height: auto !important;
  }
  .freigabe-detail {
    max-width: 380px;
    margin: 0 auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    height: auto !important;
  }
}

/* =======================================================================
   Freigabe-Übersicht: eigenständige Vollbild-Ansicht (kein Sidebar), damit
   sich das Layout später 1:1 für einen echten externen Kundenzugriff nutzen
   lässt. Bewusst dunkler Header, um sich optisch vom internen Generator
   abzusetzen (wie in der Referenz-Vorlage).

   Das Board ist die permanente Startseite (immer sichtbar); der Generator
   öffnet sich als Schublade darüber (siehe ".generator-drawer" weiter unten),
   statt auf eine eigene Seite zu wechseln.
   ======================================================================= */
.freigabe-page { display: block; position: fixed; inset: 0; background: var(--bg); z-index: 1; overflow-y: auto; }

/* ---- Generator-Schublade: legt sich als Panel über das Board ---- */
.generator-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 14, 0.5);
  z-index: 90;
}
.generator-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(1240px, 96vw);
  background: var(--bg);
  z-index: 95;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.generator-drawer.open { transform: translateX(0); }
.generator-drawer-scroll { position: absolute; inset: 0; overflow-y: auto; }
.generator-drawer-close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.generator-drawer-close-btn:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 860px) {
  .generator-drawer { width: 100vw; }
}

/* Einzeilige Kopfleiste: Logo (links) / Ansichts-Nav inkl. "Projekte" (Mitte) /
   Neues Posting + Konto-Menü (rechts). Auf schmalen Screens bricht sie per
   flex-wrap in mehrere Zeilen um (siehe Media Query unten) - kein separates
   Hamburger-Menü mehr nötig. */
.freigabe-header {
  background: #15151a;
  color: #fff;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 5;
}
.freigabe-header-left { display: flex; align-items: center; gap: 14px; }
.freigabe-logo { height: 20px; width: auto; filter: invert(1) brightness(2); }
.freigabe-header-subtitle {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #9c9ca3;
  border-left: 1px solid #33333a; padding-left: 14px;
}

.freigabe-nav { display: flex; gap: 6px; }
.freigabe-nav-btn {
  background: none; border: none; color: #c8c8ce; font: inherit; font-weight: 600; font-size: 14px;
  padding: 9px 14px; border-radius: 8px; cursor: pointer;
}
.freigabe-nav-btn:hover { background: #232329; color: #fff; }
.freigabe-nav-btn.active { background: var(--accent); color: #fff; }

/* Hamburger-Button für die mobile Nav (siehe freigabeNavToggle in app.js) -
   per Default unsichtbar, erscheint erst in der Mobile-Media-Query weiter
   unten. Auf Desktop ändert sich dadurch optisch nichts. */
.freigabe-nav-toggle {
  display: none;
  background: #232329; border: 1px solid #33333a; color: #fff;
  width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.freigabe-nav-toggle:hover { border-color: var(--accent); }

/* Simuliert lokal, was Agentur bzw. Kunde später sehen würden (siehe README) -
   kein echter Login, nur ein Ansicht-Umschalter fürs Testen. */
.freigabe-role-toggle {
  display: flex; gap: 2px; background: #232329; border-radius: 9px; padding: 3px;
  margin-left: 4px;
}
.freigabe-role-btn {
  background: none; border: none; color: #9c9ca3; font: inherit; font-weight: 600; font-size: 12px;
  padding: 6px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.freigabe-role-btn:hover { color: #fff; }
.freigabe-role-btn.active { background: #fff; color: #17171c; }

.freigabe-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.freigabe-header-right .secondary-btn { background: #232329; color: #fff; border-color: #33333a; }
.freigabe-header-right .secondary-btn:hover { background: #2c2c33; border-color: var(--accent); }

/* Name im Konto-Menü-Button (Kopfleiste, rechts) - echter Login-Status statt
   der früheren reinen Rollen-Simulation. */
.freigabe-user-name { font-size: 12px; color: #d4d4d8; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.btn-icon-chevron { opacity: 0.7; }

/* Icons statt Emoji in Kopfleiste/Konto-Menü (dünne Outline-SVGs, siehe
   index.html) - Ausrichtung/Abstand nur innerhalb dieser gescopten Selektoren,
   damit .primary-btn/.secondary-btn an allen anderen Stellen im Tool (Generator,
   Zuschnitt-Tool, Projekte verwalten, ...) unverändert bleiben. */
.btn-icon { flex-shrink: 0; }
.freigabe-header-right .secondary-btn,
.freigabe-header-right .primary-btn,
.freigabe-role-btn,
.freigabe-nav-btn,
.freigabe-image-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Konto-Menü (Kopfleiste rechts): fasst Rollen-Umschalter (Vorschau),
   agentur-exklusive Tools (Zuschnitt, Backup, Benutzer verwalten) und
   Abmelden in einem Dropdown zusammen - ersetzt das frühere separate
   "Tools"-Menü + die frühere Nutzer-Info-Zeile. */
.tools-menu { position: relative; }
.tools-menu-btn.secondary-btn { background: #232329; color: #fff; border-color: #33333a; }
.tools-menu.open .tools-menu-btn { border-color: var(--accent); }
.tools-menu-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 240px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 20;
}
.tools-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  background: none; border: none; color: var(--text); font: inherit; font-size: 13.5px;
  font-weight: 600; text-align: left; padding: 10px 12px; border-radius: 8px; cursor: pointer;
}
.tools-menu-item:hover { background: var(--accent-soft); }
.tools-menu-divider { height: 1px; background: var(--border); margin: 4px 6px; }
.tools-menu-file-item { justify-content: flex-start; }

/* Rollen-Umschalter (Vorschau) sitzt jetzt oben im weißen Konto-Dropdown statt
   im dunklen Header - heller Pillen-Stil statt der ursprünglichen dunklen
   Variante, damit er auf weißem Grund lesbar bleibt. */
.tools-menu-dropdown .freigabe-role-toggle {
  display: flex; gap: 2px; background: var(--bg-soft, #f2f2f5); border-radius: 9px;
  padding: 3px; margin: 2px 2px 6px;
}
.tools-menu-dropdown .freigabe-role-btn { color: #6b6b73; }
.tools-menu-dropdown .freigabe-role-btn:hover { color: var(--text); }
.tools-menu-dropdown .freigabe-role-btn.active { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); }

/* Banner: macht für Agentur-Nutzer sichtbar, dass sie gerade nur die
   Kunden-Vorschau anschauen (currentRole "kunde"), statt tatsächlich als
   Kunde eingeloggt zu sein - sonst leicht zu verwechseln, v.a. weil die
   Vorschau optisch/funktional wie die echte Kunden-Ansicht wirkt. */
.freigabe-simulation-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fff7e6; border-bottom: 1px solid #f0c674; color: #7a5200;
  padding: 10px 28px; font-size: 13px; font-weight: 600;
}
.freigabe-simulation-banner span { flex: 1; min-width: 200px; }
.freigabe-simulation-banner strong { font-weight: 800; }
.freigabe-simulation-banner button {
  background: #fff; border: 1px solid #f0c674; color: #7a5200; border-radius: 8px;
  padding: 6px 12px; font: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer;
  white-space: nowrap;
}
.freigabe-simulation-banner button:hover { background: #fdf0d5; }

.freigabe-body { max-width: 1280px; margin: 0 auto; padding: 24px 28px 60px; }

.freigabe-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.freigabe-stat-box {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  text-align: center; cursor: pointer; transition: border-color 0.15s ease; min-height: 46px;
}
.freigabe-stat-box.active { border-color: var(--accent); background: var(--accent-soft); }
.freigabe-stat-number { font-size: 26px; font-weight: 800; }
.freigabe-stat-label { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.freigabe-stat-box[data-stat="freigegeben"] .freigabe-stat-number { color: #1a7f43; }
.freigabe-stat-box[data-stat="ausstehend"] .freigabe-stat-number { color: #a15c00; }
.freigabe-stat-box[data-stat="aenderung_angefordert"] .freigabe-stat-number { color: #b42318; }

/* Erinnerungs-Badge für Postings, die schon länger auf eine vollständige
   Freigabe warten (siehe overdueBadgeHtml/isLongOpen in freigabe.js) - taucht
   in Karten-, Listen- und Detailansicht auf, egal welche Rolle gerade
   angemeldet ist. */
.freigabe-overdue-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff3e0; color: #a15c00; border: 1px solid #f0c98a;
  border-radius: 20px; padding: 3px 9px; font-size: 11px; font-weight: 700;
  white-space: nowrap;
}

/* Kleines Abzeichen bei vorhandener interner Notiz (nur Agentur-Ansicht,
   siehe interne_notiz in freigabe.js/app.py) - Tooltip zeigt den Text an. */
.freigabe-note-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #eef1f5; color: #4a5568; border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 9px; font-size: 11px; font-weight: 700;
  white-space: nowrap; cursor: help;
}

/* "Diese Woche fällig"-Widget (nur Agentur-Ansicht, siehe renderDueWidget in
   freigabe.js) - fasst alle bereits freigegebenen, für diese Kalenderwoche
   geplanten Postings kompakt zusammen, damit man nicht erst in den Kalender
   wechseln muss. */
.freigabe-due-widget {
  background: #fff8f4; border: 1px solid #edcbb5; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 18px;
}
.freigabe-due-widget-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; font-weight: 700; font-size: 13.5px; margin-bottom: 10px;
}
.freigabe-due-widget-header .secondary-btn { padding: 7px 12px; min-height: 34px; font-size: 12.5px; }
.freigabe-due-widget-list { display: flex; flex-direction: column; gap: 6px; }
.freigabe-due-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.freigabe-due-item:hover { border-color: var(--accent); }
.freigabe-due-date { font-weight: 700; color: var(--accent); flex-shrink: 0; }
.freigabe-due-project { color: var(--text-muted); flex-shrink: 0; }
.freigabe-due-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Auswertung: einfaches Balkendiagramm "Postings pro Monat" (siehe
   renderAuswertung in freigabe.js) - bewusst ohne Chart-Library, nur CSS. */
.freigabe-month-chart {
  display: flex; align-items: flex-end; gap: 14px; height: 200px;
  padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: 12px;
}
.freigabe-month-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.freigabe-month-bar-track {
  flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center;
}
.freigabe-month-bar { width: 60%; min-height: 3px; background: var(--accent); border-radius: 5px 5px 0 0; }
.freigabe-month-bar-count { font-size: 12.5px; font-weight: 700; margin-top: 6px; }
.freigabe-month-bar-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.freigabe-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.freigabe-filter-btn {
  padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border); background: #fff;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text); min-height: 38px;
}
.freigabe-filter-btn.active { background: var(--text); color: #fff; border-color: var(--text); }
.freigabe-filters select {
  padding: 8px 12px; border-radius: 9px; border: 1px solid var(--border); font: inherit; font-size: 13px; background: #fff;
}
.freigabe-filter-count { margin-left: auto; font-size: 13px; color: var(--text-muted); }
.freigabe-search-input {
  padding: 8px 12px; border-radius: 9px; border: 1px solid var(--border); font: inherit; font-size: 13px;
  background: #fff; width: 200px; max-width: 100%;
}

/* ---- Karten-Grid ---- */
.freigabe-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.freigabe-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; cursor: pointer;
  border-top: 4px solid var(--border); box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.freigabe-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.freigabe-card.status-freigegeben { border-top-color: #2ecc71; }
.freigabe-card.status-ausstehend { border-top-color: #e0a300; }
.freigabe-card.status-aenderung_angefordert { border-top-color: #e0522f; }
.freigabe-card-thumb { width: 100%; aspect-ratio: 1 / 1; background: #e8e8ec; overflow: hidden; }
.freigabe-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Video-Postings (Stufe 1, siehe video-konzept.md): Platzhalter-Icon statt Thumbnail
   in Kachel-/Tabellenansicht (siehe freigabeThumbHtml in freigabe.js). */
.freigabe-video-thumb { display: flex; align-items: center; justify-content: center; font-size: 26px; }
.freigabe-card-body { padding: 12px 14px 14px; }
.freigabe-card-project { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.freigabe-status-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 8px;
  border-radius: 20px; text-transform: uppercase;
}
.freigabe-status-badge.status-freigegeben { background: #e3f6ea; color: #1a7f43; }
.freigabe-status-badge.status-ausstehend { background: #fdf1dc; color: #a15c00; }
.freigabe-status-badge.status-aenderung_angefordert { background: #fbe6e1; color: #b42318; }
.freigabe-card-platform { font-size: 12px; color: var(--text-muted); margin: 6px 0; }

.platform-badge { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.platform-badge.platform-instagram { color: #C13584; }
.platform-badge.platform-facebook { color: #1877F2; }
.platform-badge.platform-beide { color: #7a3d8f; }
.platform-badge.platform-beide svg:last-child { color: #1877F2; }
.freigabe-card-roles { display: flex; gap: 10px; font-size: 11px; color: var(--text-muted); margin: 6px 0; }
.freigabe-role-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; }
.freigabe-role-dot.status-freigegeben { background: #2ecc71; }
.freigabe-role-dot.status-ausstehend { background: #d8ae4a; }
.freigabe-role-dot.status-aenderung_angefordert { background: #e0522f; }
.freigabe-card-title {
  font-size: 13.5px; font-weight: 700; margin-top: 6px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.freigabe-card-caption {
  font-size: 12.5px; color: var(--text-muted); margin: 4px 0 6px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.freigabe-card-dates {
  font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--border); margin-top: 8px;
  padding-top: 8px; display: flex; justify-content: space-between; gap: 8px;
}
.freigabe-card-dates .planned { color: var(--accent-hover); font-weight: 600; }

/* ---- Liste ---- */
/* Sicherheitsnetz für Zwischenbreiten (Tablet quer o.ä.): falls die Tabelle
   trotz Desktop-Layout mal breiter als der Viewport wird, scrollt nur DIESER
   Wrapper seitlich statt der ganzen Seite. Ab der Mobile-Breite (860px)
   rendert freigabe.js ohnehin gar keine Tabelle mehr, siehe .freigabe-list-cards. */
.freigabe-table-wrap { overflow-x: auto; border-radius: 12px; }
.freigabe-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.freigabe-table th, .freigabe-table td { padding: 10px 12px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--border); }
.freigabe-table th { background: #faf8f6; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }

/* Mobile Mini-Karten statt Tabellenzeilen (siehe renderListe in freigabe.js) -
   dieselben Infos wie die Tabellenspalten, nur gestapelt statt nebeneinander. */
.freigabe-list-cards { display: flex; flex-direction: column; gap: 10px; }
.freigabe-list-card {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; cursor: pointer;
}
.freigabe-list-card:active { background: #faf8f6; }
.freigabe-list-card .freigabe-row-select { margin-top: 4px; flex-shrink: 0; }
.freigabe-list-card-thumb { flex-shrink: 0; }
.freigabe-list-card-thumb .freigabe-table-thumb { width: 48px; height: 48px; }
.freigabe-list-card-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.freigabe-list-card-project { font-weight: 700; font-size: 14px; }
.freigabe-list-card-title { font-size: 13px; color: var(--text-muted); }
.freigabe-list-card-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.freigabe-list-card-roles { gap: 12px; font-size: 12px; color: var(--text-muted); }
.freigabe-list-card-roles span { display: inline-flex; align-items: center; gap: 4px; }
.freigabe-list-card-dates { font-size: 11.5px; color: var(--text-muted); }

.freigabe-bulk-bar {
  display: flex; align-items: center; gap: 12px; background: var(--accent-soft);
  border: 1px solid var(--accent); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px;
  font-size: 13px; font-weight: 600;
}
.freigabe-bulk-bar #freigabeBulkCount { margin-right: auto; }
.freigabe-table tr:last-child td { border-bottom: none; }
.freigabe-table tr.freigabe-row-clickable { cursor: pointer; }
.freigabe-table tr.freigabe-row-clickable:hover { background: #faf8f6; }
.freigabe-table-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #e8e8ec; display: block; }

/* ---- Kalender ---- */
.freigabe-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.freigabe-calendar-header h3 { margin: 0; font-size: 16px; }
.freigabe-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.freigabe-calendar-daylabel { font-size: 11px; text-transform: uppercase; color: var(--text-muted); text-align: center; padding-bottom: 4px; }
.freigabe-calendar-cell { min-height: 92px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 6px; font-size: 11px; }
.freigabe-calendar-cell.outside { background: #f4f4f6; color: #c4c4c8; }
.freigabe-calendar-daynum { font-weight: 700; margin-bottom: 4px; }
.freigabe-calendar-entry { background: var(--accent-soft); border-radius: 6px; padding: 3px 5px; margin-bottom: 3px; cursor: pointer; font-size: 10.5px; line-height: 1.3; }
.freigabe-calendar-entry:hover { background: var(--accent); color: #fff; }

/* Mobile Agenda-Liste (siehe renderKalender in freigabe.js) - wird statt des
   7-Spalten-Rasters gerendert, sobald die App per JS erkennt, dass der
   Viewport schmal ist. Nur Tage MIT Postings, jeweils als eigene, gut lesbare
   Zeile statt einer gequetschten Raster-Zelle. */
.freigabe-calendar-agenda { display: flex; flex-direction: column; gap: 14px; }
.freigabe-agenda-day { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.freigabe-agenda-daylabel { font-size: 12.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 8px; }
.freigabe-agenda-entries { display: flex; flex-direction: column; gap: 6px; }
.freigabe-agenda-entry {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--accent-soft); border-radius: 8px; padding: 9px 11px; cursor: pointer;
}
.freigabe-agenda-entry:active { background: var(--accent); }
.freigabe-agenda-entry:active .freigabe-agenda-entry-project,
.freigabe-agenda-entry:active .freigabe-agenda-entry-title { color: #fff; }
.freigabe-agenda-entry-project { font-size: 13.5px; font-weight: 700; }
.freigabe-agenda-entry-title { font-size: 12.5px; color: var(--text-muted); }

.freigabe-unplanned { margin-top: 20px; }
.freigabe-unplanned h3 { font-size: 14px; margin-bottom: 10px; }

/* ---- Detail-Overlay ---- */
.freigabe-detail-overlay { position: fixed; inset: 0; background: rgba(10, 10, 14, 0.55); z-index: 60; display: flex; justify-content: center; overflow-y: auto; padding: 40px 20px; }
.freigabe-detail { background: #fff; border-radius: 18px; max-width: 640px; width: 100%; padding: 28px; margin-bottom: 40px; height: fit-content; box-shadow: var(--shadow-lg); }
.freigabe-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }

/* Projekt-Auswahlfenster ("Neues Posting erstellen"): im Gegensatz zum
   Freigabe-Detail (kann sehr lang werden) ist dieses Fenster kurz und soll
   immer mittig im Fenster stehen, nicht oben angeklebt. */
#projectPickerOverlay { align-items: center; }

/* "Vorschau anzeigen"-Button oben rechts im Bild der Agentur-Detailansicht +
   das Vorschau-Fenster selbst (IG Feed/Story, Facebook als Tabs) - nutzt
   dieselben .mock-Bausteine wie der PDF-Export (buildMockTriple in
   freigabe.js), nur zum Anschauen statt zum Drucken. */
.freigabe-detail-image-wrap { display: flex; flex-direction: column; align-items: flex-end; margin: 16px 0; gap: 8px; }
.freigabe-image-preview-btn {
  background: #232329; color: #fff; border: none;
  border-radius: 8px; padding: 7px 12px; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.freigabe-image-preview-btn:hover { background: #2c2c33; }

.freigabe-preview-overlay { align-items: center; z-index: 65; }
.freigabe-preview-overlay .preview-tabs { justify-content: center; }
.freigabe-preview-hint {
  background: #fff8e6; border: 1px solid #f3d98a; color: #8a6300;
  border-radius: 8px; padding: 9px 12px; margin: 12px 0 0; font-size: 12.5px;
}
.freigabe-preview-overlay .preview-pane { display: none; margin-top: 14px; }
.freigabe-preview-overlay .preview-pane.active { display: block; }

/* Bild-Zuschnitt-Overlay beim Hochladen: höherer z-index als die Generator-
   Schublade (95), da es AUS der Schublade heraus geöffnet wird. */
.thumb-crop-overlay {
  position: fixed; inset: 0; background: rgba(10, 10, 14, 0.55); z-index: 120;
  display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 40px 20px;
}
.thumb-crop-dialog { background: #fff; border-radius: 18px; max-width: 480px; width: 100%; padding: 24px; margin: auto; box-shadow: var(--shadow-lg); }
.thumb-crop-format-row { flex-direction: row; flex-wrap: wrap; gap: 14px; margin: 14px 0 4px; }
.thumb-crop-canvas-wrap { display: flex; justify-content: center; margin-top: 10px; }
.thumb-crop-canvas-wrap .crop-canvas { max-width: 100%; height: auto; }

/* Aufnahmeort-Auswahl: stilisierte Routengrafik als farbcodierte Abschnitte
   (eine "Erlebniswelt" je Kampagnen-Briefing = eine Farbe/Band), siehe
   ROUTE_LOCATIONS in app.py + renderLocationPicker in app.js. Bewusst als
   CSS-Zeitleiste statt echter Karte (kein externer Kartendienst nötig). */
.location-picker-map { max-height: 55vh; overflow-y: auto; padding-left: 2px; }
.location-band {
  position: relative; padding: 4px 0 14px 20px; border-left: 4px solid var(--border); margin-left: 6px;
}
.location-band:last-child { border-left-color: transparent; padding-bottom: 0; }
.location-band-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.location-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.location-chip-btn {
  border: 1px solid var(--border); background: #fff; color: var(--text);
  border-radius: 20px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.location-chip-btn:hover { border-color: var(--accent); }
.location-chip-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.location-band[data-erlebniswelt="Wasser"] { border-left-color: #2f8fd6; }
.location-band[data-erlebniswelt="Wasser"] .location-band-title { color: #2f8fd6; }
.location-band[data-erlebniswelt="Schatzkiste Tirols"] { border-left-color: #c9932f; }
.location-band[data-erlebniswelt="Schatzkiste Tirols"] .location-band-title { color: #a97a1f; }
.location-band[data-erlebniswelt="Alpin-mediterranes Lebensgefühl"] { border-left-color: #d97a3f; }
.location-band[data-erlebniswelt="Alpin-mediterranes Lebensgefühl"] .location-band-title { color: #c26a30; }
.location-band[data-erlebniswelt="Dolomiten"] { border-left-color: #3f9b7a; }
.location-band[data-erlebniswelt="Dolomiten"] .location-band-title { color: #2f8064; }
.location-band[data-erlebniswelt="Venedig"] { border-left-color: #9a5fc9; }
.location-band[data-erlebniswelt="Venedig"] .location-band-title { color: #8348b3; }

.thumb-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 74px; }
.thumb-location-btn {
  font: inherit; font-size: 10px; font-weight: 600; color: var(--text-muted);
  background: #fff; border: 1px solid var(--border); border-radius: 20px;
  cursor: pointer; padding: 2px 8px; max-width: 74px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.thumb-location-btn:hover { color: var(--accent-hover); border-color: var(--accent); }
.thumb-location-btn.set { color: #fff; background: var(--accent); border-color: var(--accent); }
.thumb-list.processing .thumb-location-btn { pointer-events: none; opacity: 0.5; }

/* ---- Video-Upload (Stufe 1, siehe video-konzept.md) - Poster-Thumbnail +
   Dateiname unter dem Thumb, analog zum Ortsmarkierung-Chip bei Fotos. ---- */
.thumb-video-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: var(--bg); border-radius: 8px; border: 1px solid var(--border);
}
.thumb-video-name {
  font-size: 10px; font-weight: 600; color: var(--text-muted); max-width: 74px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}

.freigabe-role-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
@media (max-width: 560px) { .freigabe-role-boxes { grid-template-columns: 1fr; } }
.freigabe-role-boxes-single { grid-template-columns: 1fr; max-width: 360px; }
.freigabe-role-box { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: #faf8f6; }
.freigabe-role-box.status-freigegeben { border-color: #2ecc71; background: #eefbf2; }
.freigabe-role-box.status-aenderung_angefordert { border-color: #e0522f; background: #fdf1ec; }
.freigabe-role-box-header { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 13.5px; margin-bottom: 10px; }
.freigabe-role-box-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.freigabe-role-box-actions .primary-btn, .freigabe-role-box-actions .secondary-btn { padding: 8px 12px; font-size: 12.5px; min-height: 34px; }
.freigabe-reject-comment { width: 100%; margin-bottom: 10px; font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); font-family: inherit; box-sizing: border-box; }

.freigabe-detail-lang-tabs { margin: 4px 0 14px; }

.freigabe-comments { margin-top: 16px; }
.freigabe-comments h4 { margin: 0 0 8px; font-size: 13px; }
.freigabe-comment { font-size: 13px; padding: 8px 10px; background: #faf8f6; border-radius: 8px; margin-bottom: 6px; }
.freigabe-comment-date { color: var(--text-muted); font-size: 11px; margin-left: 6px; }

.freigabe-history { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 10px; }
.freigabe-history summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.freigabe-version { font-size: 12.5px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.freigabe-version:last-child { border-bottom: none; }
.freigabe-version-date { color: var(--text-muted); font-size: 11px; margin-bottom: 2px; }

/* Standard-Bestätigungsleiste ganz unten im Freigabe-Detail-Fenster (Agentur-
   Ansicht): Abbrechen / Speichern / Löschen / Vorschau drucken (PDF) - bleibt
   beim Scrollen innerhalb des Fensters am unteren Rand sichtbar. */
.freigabe-detail-footer {
  position: sticky;
  bottom: -28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px -28px -28px;
  padding: 14px 28px;
  background: #fff;
  border-top: 1px solid var(--border);
  border-radius: 0 0 16px 16px;
}
.freigabe-detail-footer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Download-Paket-Button: eigene Zeile UNTER Abbrechen/Speichern/Löschen/Duplizieren,
   aber noch innerhalb derselben sticky Fußleiste - sonst würde er beim Scrollen
   hinter der Fußleiste verschwinden (die als eigenständiges sticky-Element sonst
   über nachfolgende Inhalte "wandert"). */
.freigabe-detail-footer-download { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); }

.freigabe-approved-banner {
  margin-top: 18px; text-align: center; background: #eefbf2; border: 1px solid #2ecc71; color: #1a7f43;
  border-radius: 10px; padding: 14px; font-weight: 700; font-size: 15px;
}
.freigabe-approved-banner span { display: block; font-weight: 500; font-size: 12.5px; margin-top: 4px; color: #1a7f43; }

@media (max-width: 860px) {
  .freigabe-stats { grid-template-columns: repeat(2, 1fr); }
  .freigabe-card-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .freigabe-header-hint { display: none; }
  .freigabe-calendar-cell { min-height: 60px; font-size: 10px; }

  /* Kopfleiste auf Mobile: EINE Zeile bleibt erhalten (Logo links, Hamburger +
     "Neu"-Icon + Konto-Menü rechts) statt der früheren Lösung, bei der alle
     6 Nav-Pillen umgebrochen sind und über mehrere unruhige Zeilen liefen.
     Die fünf Nav-Buttons (Postings/Liste/Kalender/Auswertung/Projekte)
     verschwinden hinter dem Hamburger und klappen als Panel darunter auf.
     Wirkt sich NUR unterhalb dieser Breite aus, Desktop (oberhalb 860px)
     bleibt komplett unverändert. */
  .freigabe-header { flex-wrap: nowrap; gap: 8px; padding: 10px 14px; }
  .freigabe-header-left { min-width: 0; flex-shrink: 1; overflow: hidden; }
  .freigabe-header-left .freigabe-header-subtitle { display: none; }
  /* Das Logo ist ein breites Wortmarken-Banner (1200x103px) - bei nur fixer
     Höhe (wie vorher) rendert es trotzdem ~210px breit, weil <img> sich
     innerhalb seines eigenen Flex-Kontexts nicht von selbst unter die
     Inhaltsbreite schrumpft (Flexbox-Falle: min-width:auto). Dadurch
     überlappte das Logo den danebenliegenden Hamburger-Button auf schmalen
     Screens. Fix: Breite hart deckeln (object-fit:contain skaliert das
     KOMPLETTE Logo proportional runter, schneidet nichts ab) statt nur die
     Höhe vorzugeben. */
  .freigabe-logo { height: auto; max-height: 16px; max-width: 108px; width: auto; object-fit: contain; flex-shrink: 1; }

  .freigabe-nav-toggle { display: inline-flex; order: 1; flex-shrink: 0; }

  .freigabe-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 2px;
    background: #1c1c22;
    border-top: 1px solid #33333a;
    border-bottom: 1px solid #33333a;
    padding: 8px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    z-index: 20;
  }
  .freigabe-nav.mobile-open { display: flex; }
  .freigabe-nav-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 14px;
    font-size: 15px;
  }

  .freigabe-header-right { order: 2; flex-wrap: nowrap; gap: 8px; flex-shrink: 0; }
  /* "+"-Button auf Mobile nur als Icon (Text würde die eine Zeile sprengen) -
     der volle Name bleibt für Screenreader/Hover über "title" auf dem Button
     erhalten (siehe index.html). Feste 44x44px-Größe statt nur Padding, damit
     er als Tippziel groß genug ist (Apple-Empfehlung: mind. 44x44pt) und
     optisch nicht mehr wie ein zu kleiner Zufallsknopf wirkt. */
  #newPostingBtn .btn-label { display: none; }
  #newPostingBtn {
    width: 44px; height: 44px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  #newPostingBtn .btn-icon { width: 20px; height: 20px; }
  .freigabe-nav-toggle { width: 44px; height: 44px; }
  .freigabe-user-name { display: none; }
  .tools-menu-dropdown { right: 0; left: auto; width: auto; min-width: 220px; }

  /* Auf Mobile reichen die großen, antippbaren Stat-Kacheln oben (Alle/
     Ausstehend/Freigegeben/Änderung angefordert) als Status-Filter völlig -
     die kleinen Pillen-Buttons darunter sind exakt dieselbe Funktion nur
     nochmal doppelt und kleiner. Projekt-/Plattform-Dropdown fliegen auf
     Mobile ebenfalls raus (Plattform ist ohnehin fast immer "beide", siehe
     Kommentar bei PLATFORM_LABELS; Projekt-Filter selten gebraucht, wenn man
     eh meist nur sein eigenes Projekt im Blick hat). Suche und "Gruppieren"
     bleiben, weil die auf Mobile weiterhin sinnvoll sind. */
  .freigabe-filter-btn { display: none; }
  #freigabeProjectFilter,
  #freigabePlatformFilter {
    display: none;
  }

  /* iOS Safari zoomt automatisch in die Seite hinein, sobald ein Eingabefeld
     mit weniger als 16px Schriftgröße fokussiert wird - betraf bisher JEDES
     Textfeld im Tool (14.5px Basis-Schrift) und war vermutlich ein Hauptgrund
     für den "wirkt insgesamt unrund"-Eindruck auf dem Handy, nicht nur beim
     Kalender. Wirkt sich NUR unterhalb der Mobile-Breite aus, Desktop bleibt
     bei der bisherigen (kompakteren) Schriftgröße. */
  input[type="text"],
  input[type="url"],
  input[type="number"],
  input[type="email"],
  input[type="date"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px;
  }

  /* Freigabe-Detailansicht & Vorschau-Overlay: auf Desktop eine schwebende
     Karte mit Rand ringsum (40px+28px) - auf einem 375px-Screen blieben davon
     nur ~280px Inhaltsbreite übrig, u.a. die 3 Vorschau-Tabs und die
     Footer-Buttonzeile wurden dadurch eng. Auf Mobile stattdessen randlos/
     vollflächig wie ein eigener Screen (gängiges Mobile-Modal-Muster) -
     Desktop-Darstellung bleibt unverändert. */
  .freigabe-detail-overlay { padding: 0; align-items: stretch; }
  .freigabe-detail {
    max-width: none !important;
    width: 100%;
    min-height: 100%;
    border-radius: 0;
    padding: 16px;
    margin-bottom: 0;
    box-shadow: none;
  }
}

@media (max-width: 480px) {
  .freigabe-header { padding: 12px 16px; }
  .freigabe-body { padding: 16px 16px 48px; }
  .freigabe-header-subtitle { display: none; }
  .freigabe-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .freigabe-card-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}