/* ==========================================================
   fairewolle CI fuer Mastodon
   Einsetzen unter: Verwaltung -> Erscheinungsbild -> Eigenes CSS
   Stand: 28.08.2026

   Farben und Schriften entsprechen der fairewolle-CI:
   Dunkelbraun #3A2E22, Terrakotta #A8552F, Moosgruen #6D6F49,
   Cream #F6EFE1. Schriften ueber fonts.bunny.net, nicht Google.
   ========================================================== */

@import url('https://fonts.bunny.net/css?family=fraunces:400,600|archivo:400,500,600');

:root {
  /* fairewolle-Palette */
  --fw-braun:      #3A2E22;
  --fw-terrakotta: #A8552F;
  --fw-moos:       #6D6F49;
  --fw-cream:      #F6EFE1;
  --fw-warm:       #EDE3D2;
  --fw-weiss:      #FDFBF6;
  --fw-mid:        #6B5F54;

  /* Mastodon-Variablen ueberschreiben */
  --color-primary:        #6D6F49;
  --accent-color:         #6D6F49;
  --accent-color-hover:   #565840;
  --link-color:           #A8552F;
  --link-color-hover:     #8A431F;
}

/* ---------- Grundflaechen ---------- */
body,
.admin-wrapper,
.admin-wrapper .content-wrapper,
.sidebar-wrapper,
.public-layout,
.columns-area,
.columns-area__panels,
.columns-area__panels__pane__inner,
.drawer__inner,
.getting-started {
  background-color: var(--fw-cream) !important;
  color: var(--fw-braun) !important;
  font-family: 'Archivo', system-ui, sans-serif !important;
}

/* ---------- Schrift ---------- */
h1, h2, h3, h4,
.column-header__title,
.account__header__tabs__name h1,
.public-account-header__tabs__name h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  color: var(--fw-braun) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
h5, h6, label, legend, .hint, .form-text {
  font-family: 'Archivo', system-ui, sans-serif !important;
  color: var(--fw-mid) !important;
}

/* ---------- Spalten und Karten ---------- */
.column > .scrollable,
.column-header,
.column-header__button,
.column-back-button,
.drawer__header,
.card,
.status,
.status__wrapper,
.detailed-status,
.account-card,
.notification,
.conversation,
.fields-group,
.dashboard__counters > div > a,
.dashboard__counters > div > div {
  background-color: var(--fw-weiss) !important;
  color: var(--fw-braun) !important;
  border-color: var(--fw-warm) !important;
}
.status, .conversation, .notification {
  border-bottom: 1px solid var(--fw-warm) !important;
}

/* ---------- Navigation ---------- */
.navigation-bar,
.tabs-bar,
.column-link,
.getting-started__trends {
  background-color: var(--fw-weiss) !important;
  color: var(--fw-braun) !important;
}
.column-link:hover,
.column-link:focus {
  background-color: var(--fw-warm) !important;
  color: var(--fw-braun) !important;
}
.column-link--transparent.active,
.admin-wrapper .sidebar ul a.selected,
.admin-wrapper .sidebar ul a.active {
  color: var(--fw-moos) !important;
  font-weight: 600 !important;
}

/* ---------- Links ---------- */
a,
.status__content a,
.status__display-name strong,
.account__display-name strong {
  color: var(--fw-terrakotta) !important;
}
a:hover { color: var(--fw-braun) !important; }
.status__display-name strong,
.account__display-name strong { color: var(--fw-braun) !important; }
.status__content a.mention,
.status__content a.hashtag {
  color: var(--fw-moos) !important;
}

/* ---------- Eingabefelder ---------- */
.simple_form input[type="text"],
.simple_form input[type="email"],
.simple_form input[type="password"],
.simple_form input[type="number"],
.simple_form select,
.simple_form textarea,
.compose-form__inner,
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input,
.search__input {
  background-color: var(--fw-weiss) !important;
  border: 1px solid var(--fw-warm) !important;
  border-radius: 6px !important;
  color: var(--fw-braun) !important;
  font-family: 'Archivo', system-ui, sans-serif !important;
}
.simple_form input:focus,
.simple_form textarea:focus,
.search__input:focus {
  border-color: var(--fw-moos) !important;
  outline: none !important;
}
::placeholder { color: #A79A8C !important; }

/* ---------- Schaltflaechen ---------- */
.button,
.button.button-primary,
button.button,
button[type="submit"],
.compose-form__publish .button {
  background-color: var(--fw-moos) !important;
  border: 1px solid var(--fw-moos) !important;
  color: var(--fw-cream) !important;
  border-radius: 6px !important;
  font-family: 'Archivo', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
.button:hover,
.button.button-primary:hover,
button[type="submit"]:hover {
  background-color: #565840 !important;
  border-color: #565840 !important;
}
.button.button-secondary,
.button.secondary,
a.button.secondary {
  background-color: transparent !important;
  border: 1px solid var(--fw-braun) !important;
  color: var(--fw-braun) !important;
}
.button.button-secondary:hover,
.button.secondary:hover {
  background-color: var(--fw-warm) !important;
}
/* Terrakotta bewusst nur fuer folgen/entfolgen, damit es Akzent bleibt */
.account__header__tabs__buttons .button:not(.button-secondary) {
  background-color: var(--fw-terrakotta) !important;
  border-color: var(--fw-terrakotta) !important;
}

/* ---------- Symbolleisten unter Beitraegen ---------- */
.status__action-bar__button,
.detailed-status__action-bar .icon-button,
.icon-button {
  color: var(--fw-mid) !important;
}
.icon-button:hover { color: var(--fw-terrakotta) !important; }
.icon-button.active { color: var(--fw-moos) !important; }

/* ---------- Meldungen ---------- */
.flash-message.notice,
.flash.flash-notice {
  background-color: var(--fw-moos) !important;
  color: var(--fw-cream) !important;
  border: none !important;
  border-radius: 6px !important;
}
.flash-message.alert,
.flash.flash-alert {
  background-color: var(--fw-terrakotta) !important;
  color: var(--fw-cream) !important;
  border: none !important;
  border-radius: 6px !important;
}

/* ---------- Verwaltung ---------- */
.admin-wrapper th,
.admin-wrapper td,
table.table > tbody > tr > td,
table.table > thead > tr > th {
  background-color: var(--fw-weiss) !important;
  color: var(--fw-braun) !important;
  border-bottom-color: var(--fw-warm) !important;
}
.admin-wrapper .sidebar {
  background-color: var(--fw-warm) !important;
}

/* ---------- Oeffentliche Seiten ---------- */
.public-layout .header,
.public-layout .public-account-header__bar,
.landing .hero-widget,
.landing-page__call-to-action {
  background-color: var(--fw-weiss) !important;
  color: var(--fw-braun) !important;
}

/* ---------- Trennlinien ---------- */
hr, .column-header__collapsible-inner, .setting-toggle {
  border-color: var(--fw-warm) !important;
}

/* ==========================================================
   NACHTRAG 29.08.2026
   Restliche Stellen, an denen Mastodon sein eigenes Lila
   verwendet. Das Lila steckt teils in SVG-Dateien und in
   Variablen, die der obere Block nicht erreicht.
   ========================================================== */

/* ---------- Mastodon-Logo ausblenden ----------
   Das lila "m" liegt als SVG im Programmcode, es gibt kein
   Upload-Feld dafuer. Die Adresse steht ohnehin darueber. */
.logo--icon,
.ui__header__logo .logo,
.column-header__wrapper .logo,
.navigation-panel__logo .logo,
.sidebar__logo,
h1 .logo {
  display: none !important;
}

/* ---------- Symbolleisten und Navigationsleisten ---------- */
.ui__navigation-bar,
.ui__navigation-bar__item,
.tabs-bar__link,
.navigation-panel a,
.navigation-panel button {
  color: var(--fw-terrakotta) !important;
}
.ui__navigation-bar__item.active,
.tabs-bar__link.active,
.navigation-panel a.active {
  color: var(--fw-moos) !important;
}
.ui__navigation-bar svg,
.ui__navigation-bar__item svg,
.tabs-bar__link svg,
.navigation-panel svg {
  fill: currentColor !important;
  color: inherit !important;
}

/* ---------- Alle uebrigen Symbole ---------- */
.fa, .fa-icon, svg.icon,
.icon-button svg,
.column-header__icon svg {
  fill: currentColor !important;
}

/* ---------- Restliche Lila-Quellen in den Variablen ---------- */
:root,
body {
  --color-blurple-600: #6D6F49 !important;
  --color-blurple-500: #6D6F49 !important;
  --color-blurple-400: #7E805A !important;
  --color-blurple-300: #9A9C78 !important;
  --color-accent: #6D6F49 !important;
  --highlight-text-color: #A8552F !important;
  --hover-color: #EDE3D2 !important;
}

/* ---------- Schaltflaechen, die Mastodon eigenstaendig faerbt ---------- */
.button--block,
.compose-form__submit button,
.ui__header__links .button,
.interaction-modal__choices__choice .button {
  background-color: var(--fw-moos) !important;
  border-color: var(--fw-moos) !important;
  color: var(--fw-cream) !important;
}

/* ---------- Auswahl und Fokus ---------- */
::selection {
  background: var(--fw-warm) !important;
  color: var(--fw-braun) !important;
}
:focus-visible {
  outline: 2px solid var(--fw-moos) !important;
  outline-offset: 2px !important;
}

/* ---------- Ladeanzeige ---------- */
.loading-bar {
  background-color: var(--fw-terrakotta) !important;
}
.circular-progress circle {
  stroke: var(--fw-moos) !important;
}

/* ---------- Anzahl-Marken (ungelesene Meldungen) ---------- */
.notification-bar,
.icon-with-badge__badge,
.ui__navigation-bar__item .icon-with-badge__badge {
  background-color: var(--fw-terrakotta) !important;
  color: var(--fw-cream) !important;
}

/* ---------- Schalter ---------- */
.setting-toggle__label,
.react-toggle--checked .react-toggle-track {
  background-color: var(--fw-moos) !important;
}

/* ==========================================================
   NACHTRAG 2, 29.08.2026
   Zwei Stellen aus der Praxis: der leere "Neuer Beitrag"-Knopf
   und der lila Rahmen am Schreibfeld.
   ========================================================== */

/* ---------- "Neuer Beitrag" wieder sichtbar ----------
   Der Text war weg, weil die Ausblend-Regel fuer das Logo zu
   breit griff und die Schriftfarbe nicht durchkam. */
.button--block,
.compose-panel .button,
.navigation-panel .button,
a.button.button--block {
  color: #F6EFE1 !important;
  background-color: #6D6F49 !important;
  border-color: #6D6F49 !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  visibility: visible !important;
}
.button--block *,
.compose-panel .button *,
.navigation-panel .button * {
  color: #F6EFE1 !important;
  fill: #F6EFE1 !important;
  display: inline-flex !important;
  visibility: visible !important;
}

/* ---------- Schreibfeld: lila Rahmen und Flaeche ---------- */
.compose-form,
.compose-form__highlightable,
.compose-form__dropdowns,
.compose-form__footer,
.compose-form__actions,
.compose-form .compose-form__warning,
.compose-panel .compose-form__highlightable {
  background-color: #FDFBF6 !important;
  border-color: #EDE3D2 !important;
  box-shadow: none !important;
  outline: none !important;
}
.compose-form__highlightable {
  border: 1px solid #EDE3D2 !important;
  border-radius: 8px !important;
}
.compose-form__highlightable:focus-within {
  border-color: #6D6F49 !important;
  box-shadow: none !important;
}

/* ---------- Sichtbarkeit und Sprache ---------- */
.privacy-dropdown__value,
.compose-form .dropdown-button,
.language-dropdown__value,
.compose-form__dropdowns button {
  background-color: transparent !important;
  border: 1px solid #EDE3D2 !important;
  border-radius: 6px !important;
  color: #6B5F54 !important;
}
.compose-form__dropdowns button svg,
.privacy-dropdown__value svg,
.language-dropdown__value svg {
  fill: #A8552F !important;
}
.compose-form__dropdowns button:hover,
.privacy-dropdown__value:hover {
  border-color: #6D6F49 !important;
  color: #3A2E22 !important;
}

/* ---------- Werkzeugleiste unter dem Schreibfeld ---------- */
.compose-form__actions .icon-button,
.compose-form__upload-button-icon,
.compose-form__buttons button {
  color: #6B5F54 !important;
}
.compose-form__actions .icon-button:hover {
  color: #A8552F !important;
}
.character-counter {
  color: #6B5F54 !important;
}

/* ---------- Restliche lila Rahmen und Flaechen ---------- */
.focusable:focus,
.dropdown-menu,
.dropdown-menu__container,
.privacy-dropdown.active .privacy-dropdown__value {
  background-color: #FDFBF6 !important;
  border-color: #EDE3D2 !important;
  box-shadow: none !important;
}

/* ==========================================================
   NACHTRAG 3, 29.08.2026
   Verbliebene Lila-Stellen: Ueberschriften auf der Info-Seite,
   Hinweistexte in leeren Ansichten, aktiver Reiter-Balken,
   Zurueck-Links und Hinweiskaesten.
   ========================================================== */

/* ---------- Aufklappbare Ueberschriften (Ueber, Serverregeln) ---------- */
.about__section__title,
.about__section__title button,
.about h3, .about h4,
details summary,
details summary h3,
details summary h4 {
  color: #3A2E22 !important;
  font-family: 'Fraunces', Georgia, serif !important;
}
.about__section__title svg,
details summary svg {
  fill: #A8552F !important;
}

/* ---------- Hinweistexte in leeren Ansichten ---------- */
.empty-column-indicator,
.empty-column-indicator__message,
.regeneration-indicator,
.regeneration-indicator__label,
.column-link__badge,
.about__section__body,
.follow_recommendations__scrollable__message,
.lists__empty,
.getting-started__footer {
  color: #6B5F54 !important;
}
.empty-column-indicator svg path,
.regeneration-indicator svg path {
  stroke: #C4B8A6 !important;
  fill: none !important;
}

/* ---------- Aktiver Reiter-Balken ---------- */
.account__section-headline a.active::after,
.account__section-headline button.active::after,
.notification__filter-bar a.active::after,
.account__section-headline a.active span,
.tabs-bar__link.active {
  border-color: #6D6F49 !important;
  border-bottom-color: #6D6F49 !important;
  background-color: #6D6F49 !important;
}
.account__section-headline a.active,
.account__section-headline button.active {
  color: #6D6F49 !important;
  background-color: transparent !important;
}

/* ---------- Zurueck-Links und Textlinks in Kopfzeilen ---------- */
.column-back-button,
.column-back-button__icon,
.column-header__back-button,
.column-back-button--slim-button {
  color: #A8552F !important;
  background: transparent !important;
}
.column-back-button svg,
.column-header__back-button svg {
  fill: #A8552F !important;
}

/* ---------- Hinweiskaesten ---------- */
.dismissable-banner,
.dismissable-banner__message,
.info-banner,
.timeline-hint {
  background-color: #F6EFE1 !important;
  border-color: #EDE3D2 !important;
  color: #3A2E22 !important;
}
.dismissable-banner__action button,
.dismissable-banner .icon-button {
  color: #6B5F54 !important;
}

/* ---------- Illustrationen entfaerben ----------
   Mastodon zeichnet Elefant und Schnoerkel in seinem Lila.
   Vollstaendig umfaerben geht nicht, aber zurueckhaltender machen. */
.empty-column-indicator img,
.regeneration-indicator img,
.list-panel img,
.column-inline-form img {
  opacity: 0.35 !important;
  filter: grayscale(0.8) sepia(0.25) !important;
}

/* ---------- Restliche Lila-Variablen zweiter Durchgang ---------- */
:root, body, .layout-single-column, .ui {
  --color-primary-light: #7E805A !important;
  --color-primary-dark: #565840 !important;
  --indigo-1: #6D6F49 !important;
  --indigo-2: #7E805A !important;
  --indigo-3: #9A9C78 !important;
  --indigo-5: #6D6F49 !important;
}