/* ==========================================================
   fairewolle CI fuer Mastodon
   Einsetzen unter: Verwaltung -> Erscheinungsbild -> Eigenes CSS
   Stand: 20.10.2026 (Nachtrag 15: Profil bearbeiten)

   Farben und Schriften entsprechen der fairewolle-CI:
   Dunkelbraun #3A2E22, Terrakotta #A8552F, Moosgruen #6D6F49,
   Cream #F6EFE1. Schriften ueber fonts.bunny.net, nicht Google.
   Seit 12.10.2026 Cormorant Garamond + Jost wie auf fairewolle.de
   (vorher Fraunces + Archivo).
   ========================================================== */

@import url('https://fonts.bunny.net/css?family=cormorant-garamond:500,600|jost: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: 'Jost', 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: 'Cormorant Garamond', 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: 'Jost', 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: 'Jost', 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: 'Jost', 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 ---------- */
.react-toggle--checked .react-toggle-track {
  background-color: var(--fw-moos) !important;
}
/* Nachtrag 14: Beschriftung neben dem Schalter bekam hier frueher
   faelschlich die gruene Flaeche ab. */

/* ==========================================================
   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: 'Cormorant Garamond', 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;
}
/* ==========================================================
   NACHTRAG 4, 27.09.2026
   Registrierungs-/Einladungsseite (app/views/auth/registrations,
   server-gerendert, nicht die App-Oberflaeche - andere Klassen als
   der Rest dieser Datei). Gefunden ueber den echten Quelltext der
   Einladungsseite: Fortschrittspunkte ohne eigene Klasse (nur
   aria-current="step"), Handle in einem nackten <span>, ganze Karte
   in einem Link.
   ========================================================== */

/* ---------- Fortschrittsanzeige (Serverregeln / Deine Daten / E-Mail) ---------- */
.progress-tracker {
  list-style: none !important;
}
.progress-tracker .circle {
  background-color: var(--fw-warm) !important;
  border: 1px solid var(--fw-mid) !important;
}
.progress-tracker li[aria-current="step"] .circle {
  background-color: var(--fw-moos) !important;
  border-color: var(--fw-moos) !important;
}
.progress-tracker .label {
  color: var(--fw-mid) !important;
  font-family: 'Jost', system-ui, sans-serif !important;
}
.progress-tracker li[aria-current="step"] .label {
  color: var(--fw-braun) !important;
  font-weight: 600 !important;
}

/* ---------- "Du wurdest eingeladen von" - Karte ---------- */
.card.h-card a,
.card.h-card .display-name span,
.card.h-card .display-name bdi {
  color: var(--fw-terrakotta) !important;
}
.card.h-card .display-name strong {
  color: var(--fw-braun) !important;
}
.card.h-card .display-name svg,
.card.h-card svg.material-lock {
  fill: var(--fw-terrakotta) !important;
}
.card.h-card:hover a,
.card.h-card:hover .display-name span {
  color: var(--fw-braun) !important;
}
/* ==========================================================
   NACHTRAG 5, 27.09.2026
   Registrierungs-/Einladungsseite, Fortsetzung von Nachtrag 4.
   Kopfbereich ist eine dritte, eigene Ansicht (header.logo-container)
   mit dem Mastodon-SCHRIFTZUG als SVG, andere Klasse als das
   Elefanten-Icon aus Nachtrag 1 - deshalb griff die Ausblend-Regel
   dort nicht.
   ========================================================== */

/* ---------- Mastodon-Schriftzug im Kopf der Registrierungsseite ----------
   Wie beim Icon: kein Upload-Feld dafuer, die Domain steht ohnehin
   im Seitentitel und im Text darunter. */
.logo-container .logo,
.logo--wordmark {
  display: none !important;
}

/* ---------- Nummerierte Kreise vor den Serverregeln ----------
   Zwei moegliche Wege, wie Mastodon die "1", "2" usw. zeichnet - beide
   abgedeckt, falls einer davon nicht zutrifft, bitte Ruecksprache. */
.rules-list li::before {
  background-color: var(--fw-moos) !important;
  color: var(--fw-cream) !important;
}
.rules-list li::marker {
  color: var(--fw-moos) !important;
}
/* ==========================================================
   NACHTRAG 6, 27.09.2026
   Eigenes Logo statt nur Ausblenden, im Kopf der Registrierungs-
   /Einladungsseite (header.logo-container, siehe Nachtrag 5).
   Nutzt die von Mastodon selbst erzeugte 1024x1024-Variante des
   bereits hochgeladenen Icons (App-Icon-Pipeline) statt des
   kleinen 48px-Favicons, damit es scharf bleibt.
   Kein eigenes Upload-Feld noetig, kein neuer Datei-Upload.
   ========================================================== */

.logo-container .logo,
.logo--wordmark {
  display: none !important;
}
.logo-container a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}
.logo-container a::before {
  background: url('/system/site_uploads/files/000/000/001/48/c4011fd57374714a.png') no-repeat center / contain !important;
}
.logo-container a::after {
  content: "fairewolle" !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--fw-braun) !important;
  line-height: 1 !important;
}
/* NACHTRAG 7, 27.09.2026 - UNGETESTET, best effort
   "@social.fairewolle.de" neben dem Profilnamen-Feld beim Registrieren.
   Klasse aus dem Quellcode nicht sicher ermittelt (simple_form-Append). */
.simple_form .input.append .append,
.simple_form .append,
.input-group-append,
.simple_form span.append {
  color: var(--fw-mid) !important;
}

/* ==========================================================
   NACHTRAG 8, 12.10.2026
   Lesbarkeit. Mastodon ist fuer dunklen Hintergrund gebaut; auf
   den server-gerenderten Seiten (Registrierung, Anmelden, Regeln)
   blieben helle Textfarben stehen und waren auf Cream kaum lesbar.
   Ausserdem die dunkle Leiste unten auf dem Handy ("Konto
   erstellen / Anmelden") und die ueberlappenden Schritt-Beschriftungen.
   ========================================================== */

/* ---------- Texte auf Registrierung / Anmelden / Regeln ---------- */
.form-container,
.form-container p,
.form-container li,
.form-container span,
.form-container .lead,
.content__heading,
.content__heading p,
.lead,
.rules-list,
.rules-list li,
.rules-list__text,
.simple_form p,
.simple_form .lead,
.simple_form strong {
  color: var(--fw-braun) !important;
}
.rules-list__hint,
.form-container .hint,
.simple_form .hint,
.simple_form p.hint {
  color: var(--fw-mid) !important;
}
.rules-list li,
.rules-list__item {
  border-color: var(--fw-warm) !important;
  background: transparent !important;
}

/* ---------- Leiste unten auf dem Handy und Kopfleiste ---------- */
.ui__navigation-bar,
.ui__header,
.sign-in-banner,
.navigation-bar {
  background-color: var(--fw-weiss) !important;
  border-color: var(--fw-warm) !important;
  color: var(--fw-braun) !important;
}
.ui__navigation-bar .button.button-secondary,
.ui__header .button.button-secondary,
.sign-in-banner .button.button-secondary {
  background-color: transparent !important;
  border: 1px solid var(--fw-braun) !important;
  color: var(--fw-braun) !important;
}

/* ---------- Schritt-Anzeige: Beschriftungen ueberlappen auf dem Handy ---------- */
.progress-tracker .label {
  font-size: 13px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}
@media (max-width: 480px) {
  .progress-tracker .label { font-size: 11px !important; }
}

/* ---------- Ueberschriften: Cormorant braucht etwas mehr Groesse ---------- */
h1, h2, .content__heading h1 {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}


/* ==========================================================
   NACHTRAG 9, 12.10.2026
   Registrierungsformular: weisse Kaesten um die Felder, lila
   "@social.fairewolle.de", schwarze Checkbox, rosa Sternchen.
   ========================================================== */

/* ---------- Keine weissen Kaesten um Feldgruppen im Formular ----------
   Die Kartenregel oben (.fields-group) gilt fuer die App, nicht fuer
   die Formularseiten. */
.simple_form .fields-group,
.form-container .fields-group,
.simple_form .fields-row,
.simple_form .input {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------- "@social.fairewolle.de" hinter dem Profilnamen ---------- */
.label_input__append,
.label_input__wrapper .label_input__append,
.simple_form .label_input__append {
  color: var(--fw-mid) !important;
  background: transparent !important;
}
.label_input__append::after {
  background: none !important; /* Farbverlauf in Mastodon-Dunkel entfernen */
}

/* ---------- Checkboxen ---------- */
.simple_form input[type="checkbox"],
.form-container input[type="checkbox"] {
  accent-color: var(--fw-moos) !important;
  background-color: var(--fw-weiss) !important;
  border: 1.5px solid var(--fw-mid) !important;
  border-radius: 4px !important;
}
.simple_form input[type="checkbox"]:checked,
.form-container input[type="checkbox"]:checked {
  background-color: var(--fw-moos) !important;
  border-color: var(--fw-moos) !important;
}

/* ---------- Pflichtfeld-Sternchen ---------- */
.simple_form abbr,
.simple_form .required abbr {
  color: var(--fw-terrakotta) !important;
  text-decoration: none !important;
}

/* ---------- Ueberschrift "Weshalb moechtest du beitreten?" ---------- */
.simple_form h4,
.simple_form .fields-group h4 {
  color: var(--fw-braun) !important;
}

/* ==========================================================
   NACHTRAG 10, 12.10.2026
   Dunkler Balken oben auf Registrierung/Anmelden: Der Abstand ueber
   dem Formular zeigt den Hintergrund von <html>, der war noch
   Mastodon-Dunkel. Dazu die letzten Lila-Reste in der Schritt-Anzeige
   und ueberlappende Beschriftungen auf schmalen Bildschirmen.
   ========================================================== */

html {
  background-color: var(--fw-cream) !important;
}

/* ---------- Schritt-Anzeige: Lila raus ---------- */
.progress-tracker .separator,
.progress-tracker .line {
  border-color: var(--fw-mid) !important;
  background-color: var(--fw-mid) !important;
}
.progress-tracker .separator.completed,
.progress-tracker .line.completed {
  border-color: var(--fw-moos) !important;
  background-color: var(--fw-moos) !important;
}
.progress-tracker li.completed .circle {
  background-color: var(--fw-moos) !important;
  border-color: var(--fw-moos) !important;
  color: var(--fw-cream) !important;
}
.progress-tracker li.completed .circle svg {
  fill: var(--fw-cream) !important;
}
.progress-tracker .circle::before,
.progress-tracker li[aria-current="step"] .circle::before {
  background-color: var(--fw-cream) !important;
}

/* ---------- Handy: nur die aktuelle Beschriftung zeigen ---------- */
@media (max-width: 480px) {
  .progress-tracker li:not([aria-current="step"]) .label {
    visibility: hidden !important;
  }
}

/* ==========================================================
   NACHTRAG 11, 12.10.2026
   Letzte Feinheiten in der App-Oberflaeche (Handy, abgemeldet):
   lila Suchsymbol, lila Reiter-Strich, blasse Reiter-Texte,
   fast schwarzer Text im Anmelde-Kasten.
   ========================================================== */

/* ---------- Suchsymbol ---------- */
.search__icon,
.search__icon .icon,
.search__icon svg {
  color: var(--fw-mid) !important;
  fill: var(--fw-mid) !important;
}

/* ---------- Reiter (Beitraege, Hashtags, Nachrichten ...) ---------- */
.account__section-headline a,
.account__section-headline button,
.notification__filter-bar a,
.notification__filter-bar button {
  color: var(--fw-mid) !important;
}
.account__section-headline a.active,
.account__section-headline button.active,
.notification__filter-bar a.active,
.notification__filter-bar button.active {
  color: var(--fw-braun) !important;
  font-weight: 600 !important;
}
.account__section-headline a.active::before,
.account__section-headline button.active::before,
.account__section-headline a.active::after,
.account__section-headline button.active::after,
.notification__filter-bar a.active::before,
.notification__filter-bar button.active::before {
  background-color: var(--fw-moos) !important;
  border-color: var(--fw-moos) !important;
}

/* ---------- Anmelde-Kasten ("Mastodon ist der beste Zugang ...") ---------- */
.sign-in-banner,
.sign-in-banner p,
.sign-in-banner strong {
  color: var(--fw-braun) !important;
}

/* ---------- Spaltentitel und Leer-Hinweise etwas kraeftiger ---------- */
.column-header__title,
.column-header__title span {
  color: var(--fw-braun) !important;
}
.empty-column-indicator {
  color: var(--fw-mid) !important;
}

/* ==========================================================
   NACHTRAG 12, 12.10.2026
   Menue ruhiger und kontrastreicher: Text dunkelbraun statt alles
   Terrakotta, Symbole bleiben Terrakotta als Akzent, aktiver Punkt
   Moosgruen. Keine einzelnen weissen Kaesten je Menuepunkt mehr.
   Hashtag-Pillen ohne Lila-Hintergrund.
   ========================================================== */

.navigation-panel .column-link,
.navigation-panel a.column-link,
.navigation-panel button.column-link,
.column-link,
.column-link--transparent {
  color: var(--fw-braun) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.navigation-panel .column-link .icon,
.navigation-panel .column-link svg,
.column-link .column-link__icon,
.column-link svg {
  color: var(--fw-terrakotta) !important;
  fill: var(--fw-terrakotta) !important;
}
.navigation-panel .column-link.active,
.column-link--transparent.active,
.column-link.active {
  color: var(--fw-moos) !important;
  background-color: var(--fw-warm) !important;
  font-weight: 600 !important;
}
.navigation-panel .column-link.active svg,
.column-link.active svg {
  color: var(--fw-moos) !important;
  fill: var(--fw-moos) !important;
}
.column-link:hover,
.column-link:focus {
  background-color: var(--fw-warm) !important;
  color: var(--fw-braun) !important;
}
.navigation-panel,
.navigation-panel__menu,
.navigation-panel__sign-in-banner,
.navigation-panel__legal {
  background-color: var(--fw-cream) !important;
}
.navigation-panel hr {
  border-color: var(--fw-warm) !important;
}

/* ---------- Hashtag-Pillen unter Beitraegen ---------- */
.hashtag-bar a {
  background-color: var(--fw-warm) !important;
  color: var(--fw-moos) !important;
  border-radius: 6px !important;
}
.hashtag-bar a:hover {
  background-color: var(--fw-moos) !important;
  color: var(--fw-cream) !important;
}

/* ==========================================================
   NACHTRAG 13, 17.10.2026 (Mastodon v4.6.8, Desktop)
   1. Beitragstext in der Einzelansicht fast unsichtbar: die
      Detailansicht nahm noch die helle Schriftfarbe des dunklen
      Grundthemas.
   2. Ausklappmenue (Mehr): markierter Eintrag dunkelblau mit
      dunkler Schrift, unlesbar.
   3. Dunkler Balken oben ueber der mittleren Spalte.
   ========================================================== */

/* ---------- 1. Beitragstext und Namen, ueberall ---------- */
.detailed-status,
.detailed-status .status__content,
.detailed-status .status__content p,
.detailed-status__display-name,
.detailed-status__display-name strong,
.detailed-status__display-name bdi,
.status__content,
.status__content p,
.status__content__text,
.status__display-name,
.status__display-name bdi,
.display-name,
.display-name strong,
.display-name__html,
.reply-indicator__content,
.notification__message,
.account__header__content,
.account__header__bio,
.account__header__tabs__name h1 {
  color: var(--fw-braun) !important;
  opacity: 1 !important;
}
.detailed-status__display-name span,
.display-name__account,
.status__display-name span:not(.display-name__html),
.detailed-status__meta,
.detailed-status__meta a,
.detailed-status__datetime,
.status__relative-time,
.status__visibility-icon,
.account__header__tabs__name small {
  color: var(--fw-mid) !important;
  opacity: 1 !important;
}
.detailed-status .status__content a,
.status__content a {
  color: var(--fw-terrakotta) !important;
}
.status__content a.mention,
.status__content a.hashtag,
.detailed-status .status__content a.mention,
.detailed-status .status__content a.hashtag {
  color: var(--fw-moos) !important;
}

/* ---------- 2. Ausklappmenue ---------- */
.dropdown-menu,
.dropdown-menu__container,
.dropdown-menu__items {
  background-color: var(--fw-weiss) !important;
  border: 1px solid var(--fw-warm) !important;
  box-shadow: 0 8px 24px rgba(58, 46, 34, .12) !important;
}
.dropdown-menu__item a,
.dropdown-menu__item button,
.dropdown-menu__item > span {
  background-color: transparent !important;
  color: var(--fw-terrakotta) !important;
}
.dropdown-menu__item a:hover,
.dropdown-menu__item a:focus,
.dropdown-menu__item a:active,
.dropdown-menu__item button:hover,
.dropdown-menu__item button:focus,
.dropdown-menu__item button:active,
.dropdown-menu__item.active a,
.dropdown-menu__item.active button,
.dropdown-menu__item--dangerous a:hover,
.dropdown-menu__item--dangerous button:hover {
  background-color: var(--fw-warm) !important;
  color: var(--fw-braun) !important;
  outline: none !important;
}
.dropdown-menu__item a:focus-visible,
.dropdown-menu__item button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--fw-moos) !important;
}
.dropdown-menu__separator,
.dropdown-menu hr {
  border-color: var(--fw-warm) !important;
  background-color: var(--fw-warm) !important;
}
.dropdown-menu__arrow {
  border-bottom-color: var(--fw-warm) !important;
  border-top-color: var(--fw-warm) !important;
}

/* ---------- 3. Balken oben ueber der mittleren Spalte ---------- */
.tabs-bar__wrapper,
.columns-area__panels__main,
.column-back-button,
.column-header__wrapper,
.column-header__wrapper.active,
.column > .scrollable,
.ui__header {
  background-color: var(--fw-cream) !important;
  box-shadow: none !important;
}
.column-header__wrapper,
.column-back-button {
  background-color: var(--fw-weiss) !important;
  border-top: 0 !important;
}


/* ==========================================================
   NACHTRAG 14, 18.10.2026 (Mastodon 4.6.x)
   1. Schalter (z. B. Startseite: Geteilte Beitraege anzeigen) noch lila,
      die alte Regel greift in 4.6 nicht mehr ueberall.
   2. Beschriftungen neben den Schaltern hatten eine gruene Flaeche
      (Fehler aus der fruehen Schalter-Regel, oben korrigiert).
   ========================================================== */

/* ---------- 1. Schalter: Spur und Knopf, alle bekannten Varianten ---------- */
.react-toggle-track,
.react-toggle .react-toggle-track,
.toggle-switch__track,
[role="switch"] {
  background-color: #d9cfbf !important;
  border-color: #d9cfbf !important;
}
.react-toggle--checked .react-toggle-track,
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track,
.react-toggle input:checked + .react-toggle-track,
input:checked + .toggle-switch__track,
[role="switch"][aria-checked="true"],
input[type="checkbox"][role="switch"]:checked {
  background-color: var(--fw-moos) !important;
  border-color: var(--fw-moos) !important;
}
.react-toggle:hover:not(.react-toggle--disabled):not(.react-toggle--checked) .react-toggle-track {
  background-color: #cbbfab !important;
}
.react-toggle-thumb,
.toggle-switch__thumb {
  background-color: var(--fw-weiss) !important;
  border-color: var(--fw-moos) !important;
  box-shadow: 0 1px 3px rgba(58, 46, 34, .25) !important;
}
.react-toggle--focus .react-toggle-thumb,
.react-toggle:focus-within .react-toggle-thumb {
  box-shadow: 0 0 0 3px rgba(109, 111, 73, .35) !important;
}
input[type="checkbox"][role="switch"] {
  accent-color: var(--fw-moos) !important;
}

/* ---------- 2. Beschriftungen neben Schaltern ---------- */
.setting-toggle,
.setting-toggle__label,
.setting-toggle label,
.column-settings__row label,
.column-settings label,
.column-settings__row .setting-toggle__label {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--fw-braun) !important;
}
.column-settings,
.column-settings__section,
.column-settings__row {
  background-color: var(--fw-weiss) !important;
  color: var(--fw-braun) !important;
}
.column-settings__section,
.column-settings h3 {
  color: var(--fw-mid) !important;
}


/* ==========================================================
   NACHTRAG 15, 20.10.2026 (Mastodon 4.6.x)
   "Profil bearbeiten" (neue Profilseite): Die Abschnitte hatten auf dem
   Handy keinen Innenabstand, Text und Knoepfe klebten am Rand, die
   Ueberschriften direkt unter dem Text davor. Die Klassen dieser Seite
   enden auf account_edit__<name>, deshalb Attribut-Selektoren.
   ========================================================== */
section[class*="account_edit__"] {
  padding: 24px 20px !important;
  border-bottom: 1px solid var(--fw-warm) !important;
  box-sizing: border-box;
}
[class*="account_edit__sectionHeader"] {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 12px !important;
}
[class*="account_edit__sectionTitle"] {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 22px !important;
  line-height: 1.15;
  color: var(--fw-braun) !important;
  min-width: 0;
}
[class*="account_edit__sectionSubtitle"] {
  margin: 0 0 14px !important;
  line-height: 1.5;
  color: var(--fw-mid) !important;
}
[class*="account_edit__bio"] {
  line-height: 1.55;
  margin-bottom: 4px;
}
li[class*="account_edit__field"] {
  padding: 10px 0 !important;
}
[class*="account_edit__fieldName"],
[class*="account_edit__fieldValue"] {
  margin: 0 !important;
  padding: 0 !important;
}
/* Knoepfe "Felder neu anordnen" / "Zusatzfeld hinzufuegen" unter die Ueberschrift */
[class*="account_edit__fieldButtons"] {
  width: 100%;
}
[class*="account_edit__fieldButtons"] .button {
  width: 100%;
  justify-content: center;
}
/* "Wie erstelle ich einen verifizierten Link?" als Textlink statt Knopf */
[class*="account_edit__verifiedLinkHelpButton"][class*="account_edit__verifiedLinkHelpButton"] {
  display: inline-block;
  margin: 4px 0 14px !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  color: var(--fw-terrakotta) !important;
  text-decoration: underline;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
}
/* Tipp-Kasten in den Abschnitten */
section[class*="account_edit__"] [class*="callout"][class*="wrapper"] {
  margin-top: 4px;
  padding: 14px !important;
  background-color: var(--fw-warm) !important;
  border-radius: 12px;
}
@media (max-width: 480px) {
  [class*="account_edit__sectionHeader"] .button {
    width: 100%;
    justify-content: center;
  }
}
/* Nachtrag 16: Textfarben im neuen Profilkopf */
:root,
html,
body,
[data-color-scheme],
[data-contrast] {
  --color-text-primary: #3A2E22 !important;
  --color-text-secondary: #6B5F54 !important;
  --color-text-tertiary: #6B5F54 !important;
  --color-text-brand: #A8552F !important;
  --color-text-brand-soft: #A8552F !important;
  --color-text-inverted: #FDFBF6 !important;
  --color-text-disabled: #9A8F83 !important;
  --color-bg-primary: #F6EFE1 !important;
  --color-bg-secondary: #EDE3D2 !important;
  --color-bg-tertiary: #E4D8C3 !important;
  --color-bg-inverted: #3A2E22 !important;
  --color-bg-brand-base: #6D6F49 !important;
  --color-bg-brand-base-hover: #565840 !important;
  --color-bg-brand-soft: #E4D8C3 !important;
  --color-bg-brand-softest: #EDE3D2 !important;
  --color-border-primary: #D8CBB5 !important;
  --color-border-brand: #6D6F49 !important;
  --color-border-brand-soft: #C9BCA3 !important;
}
/* Nachtrag 17, 21.10.2026: verifizierte Profilfelder in Moos statt Mastodon-Mint */
:root,
html,
body,
[data-color-scheme],
[data-contrast] {
  --color-text-success: #6D6F49 !important;
  --color-bg-success-base: #6D6F49 !important;
  --color-bg-success-soft: #DDDFC6 !important;
  --color-bg-success-softest: #ECEBD9 !important;
  --color-border-success-soft: #BDBF9B !important;
}