/**
 * Ziel-Pfad im Projekt: media/com_bilder/css/com-bilder-common.css
 *
 * Zentrale, view-übergreifende Formatierungs-Basis für com_bilder.
 * Gedacht für generelle Formatierungsthemen, die in mehreren Views gleich
 * aussehen sollen, statt je View einzeln (und ggf. inkonsistent) gepflegt zu
 * werden. Erster Baustein: einheitliche Farbe für die drei Standard-Buttons
 * "Speichern" / "Speichern & Schließen" / "Schließen ohne Speichern", wie sie
 * in den *edit-Views verwendet werden (aktuell u.a. ausstelleredit, edit,
 * colledit) - unabhängig davon, welche Bootstrap-/Template-Kaskade die
 * jeweilige Seite sonst lädt (!important aus demselben Grund wie in
 * edit-cascade.css: Ladereihenfolge der Template-Styles ist nicht
 * beeinflussbar).
 *
 * Verwendung: zusätzlich zu "btn btn-primary" die Klasse "com-bilder-btn"
 * auf den jeweiligen <button> setzen, siehe tmpl/ausstelleredit/default.php.
 *
 * Stand 2026-08-10: bisher nur in "ausstelleredit" eingebunden (siehe
 * claude/central-css-buttons-changelog.md). Bei künftiger Bearbeitung
 * anderer Views (edit, colledit, ...) soll deren Button-Markup ebenfalls auf
 * diese Klasse umgestellt werden, statt weiterhin unabhängig voneinander
 * blau/rot zu erscheinen.
 */
/**
 * Nachtrag 2026-09-01 (Nutzerauftrag "Layoutvereinheitlichung"): Umstellung
 * von "immer blau gefüllt" auf "weißer Hintergrund, erst bei Hover/Fokus/
 * Aktiv farbig" - nach demselben Schema wie weiter unten bei
 * ".com-bilder-filter-toggle" (dritter Baustein) und ".bilder-editor-btn"
 * (vierter Baustein, siehe Ende dieser Datei). Gilt für ALLE aktuellen und
 * künftigen Einbindungen dieser Klasse (Stand 2026-09-01: ausstelleredit,
 * siehe Kommentar oben). Zusätzlich: diese Datei war gegenüber der
 * Komponenten-Quelle (components/com_bilder/media/css/com-bilder-common.css)
 * auf eigene, hellblaue Werte (#B0E2FF/#6E7B8B) abgedriftet - mit diesem
 * Nachtrag wieder auf denselben Stand gebracht (beide Dateien identisch).
 */
.com-bilder-btn {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
    background-color: #fff !important;
    border-color: #0d6efd !important;
    color: #0d6efd !important;
}

.com-bilder-btn:hover,
.com-bilder-btn:focus,
.com-bilder-btn:active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

.com-bilder-btn:disabled,
.com-bilder-btn.disabled {
    background-color: #fff !important;
    border-color: #6ea8fe !important;
    color: #6ea8fe !important;
    opacity: 0.65;
}

/**
 * Zweiter Baustein (Nutzeranforderung 2026-08-17): view-übergreifend
 * gültige Hintergrundfarbe rgb(29,121,137). Als CSS-Custom-Property auf
 * :root definiert (statt fest verdrahtet in jeder einzelnen Regel), damit
 * künftige Verwendungsstellen denselben Wert referenzieren können, ohne ihn
 * zu wiederholen - bei einer späteren Farbänderung genügt eine einzige
 * Anpassung hier. Zusätzlich eine fertige Utility-Klasse ".com-bilder-bg"
 * nach demselben Muster wie ".com-bilder-btn" oben (!important, damit die
 * Farbe unabhängig von der jeweils ladenden Template-/Bootstrap-Kaskade
 * gilt).
 *
 * Erste Verwendungsstelle: Kopf-DIV "imBild.TV" im Handy-App-Modus der View
 * "geo" (#cbg-mobile-app-header, tmpl/geo/default.php) - siehe
 * geo-view-changelog.md, Nachtrag 2026-08-17.
 */
:root {
    --com-bilder-bg-color: rgb(29, 121, 137);
}

.com-bilder-bg {
    background-color: var(--com-bilder-bg-color) !important;
}

/**
 * Dritter Baustein (Nutzerauftrag 2026-08-21, View "gallery" - Ortsfilter/
 * Alternativfilter Ein-/Ausschalter): einheitliche Optik fuer die beiden
 * Umschalt-Buttons "Ortsfilter"/"Alternativfilter" (siehe
 * tmpl/gallery/_filterpanel_ortsauswahl_klassisch.php,
 * _filterpanel_ortsauswahl_modern.php, _filterpanel_kategorie_klassisch.php,
 * _filterpanel_kategorie_modern.php).
 *
 * Nachtrag 2026-08-21 (2, Nutzerauftrag "Filterhinterlegung zu aufdringlich"):
 * der urspruengliche gruene/rote Hintergrund (aktiv/deaktiviert) wirkte zu
 * grell - beide Zustaende ("ein"/"aus") UND beide Filter (Ortsfilter,
 * Alternativfilter) verwenden jetzt einheitlich ein helles Grau, identisch
 * zur Farbgebung der Auswahllisten (<select class="form-select">) in
 * Zeile 1 (Darstellung/Spezialauswahl) - weisser Hintergrund, grauer Rahmen
 * (#ced4da, Bootstrap-Standardfarbe fuer Formularelemente in diesem Projekt,
 * siehe z.B. .com-bilder-geo-year-slider.noUi-target). Die Unterscheidung
 * aktiv/deaktiviert bleibt ausschliesslich ueber Icon (durchgestrichen/nicht)
 * und Text ("ein"/"aus") erhalten, nicht mehr ueber die Farbe. Eigene Klassen
 * statt "com-bilder-btn" oben bleiben trotzdem bestehen (eigener, von der
 * einheitlichen Button-Blau-Farbe unabhaengiger Namensraum) - gleiches
 * !important-Prinzip (ladereihenfolgeunabhaengig).
 */
.com-bilder-filter-toggle,
.com-bilder-filter-toggle--on,
.com-bilder-filter-toggle--off {
    background-color: #fff !important;
    border-color: #ced4da !important;
    color: #495057 !important;
}

.com-bilder-filter-toggle--on:hover,
.com-bilder-filter-toggle--on:focus,
.com-bilder-filter-toggle--off:hover,
.com-bilder-filter-toggle--off:focus {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #495057 !important;
}

/**
 * Vierter Baustein (Nutzerauftrag 2026-09-01, View "themen" - Buttons "Neu"
 * und "Neuer Themenführer", die nur besonders berechtigten Usern angezeigt
 * werden, z.B. Superuser): eigene CSS-Variable "Editor-Farbe" (--editor-
 * farbe) für Bedienelemente, die einen Editor aufrufen und nur für
 * berechtigte User sichtbar sind - sowohl für Buttons (Schrift-/Rahmenfarbe)
 * als auch für reine Textlinks wie "Anpassen" (siehe cbt-anpassen in
 * tmpl/themen/default.php). Rückfrage/Freigabe 2026-09-01: bewusst dieselbe
 * Farbe wie das bisherige "btn-outline-success"-Grün, jetzt aber als
 * zentrale Variable statt Bootstrap-Klasse - unabhängig von Bootstrap-
 * Version/-Kaskade und an einer Stelle änderbar.
 *
 * Dazu die fertige Utility-Klasse ".bilder-editor-btn" (weißer Hintergrund,
 * Rahmen/Schrift in Editor-Farbe; erst bei Hover/Fokus/Aktiv wird der
 * Hintergrund farbig - nach demselben Schema wie ".com-bilder-filter-toggle"
 * oben bzw. ".com-bilder-btn" ganz oben in dieser Datei, dort ebenfalls am
 * 2026-09-01 auf dieses Schema umgestellt). Höhe/Innenabstand/Schriftgröße
 * entsprechen bewusst 1:1 der bisherigen "btn btn-sm"-Optik (Nutzerauftrag
 * 2026-09-01: "die Höhe passt auch [...] sollte ebenfalls zum Standard
 * werden") - fest zugewiesen statt von der jeweils geladenen Bootstrap-
 * Version übernommen, damit die Höhe unabhängig von künftigen Template-/
 * Bootstrap-Änderungen gleich bleibt.
 *
 * Verwendung: zusätzlich zu "btn btn-sm" die Klasse "bilder-editor-btn" auf
 * den jeweiligen <a>/<button> setzen (ersetzt "btn-outline-success").
 * Erste Verwendungsstelle: View "themen", Buttons "Neu" (Kopfzeile) und
 * "Neuer Themenführer" (Reiter "Gruppe"), siehe tmpl/themen/default.php.
 */
:root {
    --editor-farbe: #198754;
}

.bilder-editor-btn {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
    background-color: #fff !important;
    border: 1px solid var(--editor-farbe) !important;
    color: var(--editor-farbe) !important;
}

.bilder-editor-btn:hover,
.bilder-editor-btn:focus,
.bilder-editor-btn:active {
    background-color: var(--editor-farbe) !important;
    border-color: var(--editor-farbe) !important;
    color: #fff !important;
}

.bilder-editor-btn:disabled,
.bilder-editor-btn.disabled {
    background-color: #fff !important;
    border-color: var(--editor-farbe) !important;
    color: var(--editor-farbe) !important;
    opacity: 0.65;
}

/**
 * Fünfter Baustein (Nutzerauftrag 2026-09-02, View "beitragsliste" -
 * Filter-/Sortierleiste): einheitliche, kompaktere Optik für <select>-
 * Auswahllisten, view-übergreifend nutzbar - bisher wich jede View mit
 * eigenen Auswahllisten (z.B. die Orts-Kaskade in "beitragedit"/"edit", die
 * Bereichs-/Ansicht-Auswahl in "themen") von der jeweils geladenen
 * Bootstrap-Standardgröße (".form-select", recht groß/hoch) ab, ohne
 * projektweit einheitlich zu sein. Erste Verwendungsstelle: die neue
 * Filter-/Sortierleiste in "beitragsliste" (tmpl/beitragsliste/default.php,
 * Sortieren/Eigentümer/Thema).
 *
 * Verwendung: zusätzlich zu "form-select" die Klasse "com-bilder-select" auf
 * das jeweilige <select> setzen (ersetzt/ergänzt "form-select", ist NICHT
 * dessen Ersatz - Bootstrap liefert weiterhin die Pfeil-Grafik/Grundoptik,
 * diese Klasse verkleinert nur Innenabstand/Schriftgröße/Höhe und
 * vereinheitlicht die Rahmenfarbe, nach demselben !important-Prinzip wie
 * die Bausteine oben, ladereihenfolgeunabhängig). Bei künftiger Bearbeitung
 * anderer Views mit eigenen Auswahllisten soll deren Markup ebenfalls auf
 * diese Klasse umgestellt werden.
 *
 * Nachtrag 2026-09-09 (Nutzermeldung "Auswahlsymbol weiss/kaum erkennbar",
 * View "gallery" Design "modern"): diese Klasse wird inzwischen auch auf
 * <select>-Elemente OHNE "form-select" angewendet (siehe
 * .cbg-modern-orte-select/.cbg-modern-katfilter-select in
 * tmpl/gallery/_filterpanel_ortsauswahl_modern.php bzw.
 * _filterpanel_kategorie_modern.php) - dort fehlte bisher jede Pfeil-Grafik
 * komplett (kein "form-select", also kein Bootstrap-Pfeil), sodass nur der
 * native, je nach Browser/Betriebssystem kaum sichtbare System-Pfeil
 * uebrig blieb. "com-bilder-select" liefert daher jetzt SELBST eine eigene
 * Pfeil-Grafik (SVG-Chevron, Farbe = Rahmenfarbe #ced4da, wie vom Nutzer
 * vorgeschlagen) samt "appearance: none" - funktioniert dadurch jetzt
 * eigenstaendig, unabhaengig davon, ob zusaetzlich "form-select" gesetzt
 * ist (bei vorhandenem "form-select" wird dessen eigene, dunklere
 * Pfeil-Grafik einfach durch diese hier ersetzt - einheitliche Farbe
 * projektweit).
 */
.com-bilder-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ced4da' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    padding: 0.25rem 1.75rem 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    min-height: unset !important;
    border-color: #ced4da !important;
    background-position: right 0.5rem center !important;
    background-size: 12px 12px !important;
}

/**
 * Sechster Baustein (Nutzerauftrag 2026-09-02, View "beitrag" - Teilen-Icon
 * "wie er auch in der view ef vorkommt"): das Teilen-Icon in "ef"
 * (#ef-share-btn, tmpl/ef/default.php) hat streng genommen KEINE "spezielle"
 * Formatierung über reines Bootstrap-Outline-Styling hinaus - lediglich eine
 * triviale Ausrichtung von Icon und Text nebeneinander (inline-flex + gap).
 * Trotzdem hier als eigener Baustein abgelegt, da mit "beitrag"
 * (tmpl/beitrag/default.php, Button #cbb-beitrag-share-btn) jetzt eine
 * ZWEITE View dasselbe Icon/denselben Text verwendet - identisches Prinzip
 * wie bei den bisherigen Bausteinen oben (zentral statt pro View
 * dupliziert). "ef" selbst wurde NICHT angetastet (außerhalb dieses
 * Auftrags) und verwendet weiterhin seine eigene, lokale Regel
 * ".com-bilder-ef-share-btn" - kann bei künftiger Bearbeitung ebenfalls auf
 * diese zentrale Klasse umgestellt werden.
 *
 * Verwendung: zusätzlich zu "btn btn-sm btn-outline-secondary" die Klasse
 * "com-bilder-share-btn" auf den jeweiligen <button> setzen.
 */
.com-bilder-share-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/**
 * Siebter Baustein (Nutzerauftrag 2026-09-20, View "edit" - Tabs
 * "Klassifizierung (ja/nein)" und "Rückseite"): kompaktere Darstellung der
 * Ja/Nein-Umschalter (Feldtyp "radio" mit class="btn-group btn-group-yesno",
 * siehe forms/edit.xml) - Größe auf 60% reduziert, Zeilenabstand zum
 * jeweils nächsten Ja/Nein-Feld halbiert. Beide Tabs bestehen (fast)
 * ausschließlich aus solchen Umschaltern - in voller Bootstrap-
 * Standardgröße wirken sie dort unnötig groß/weitläufig.
 *
 * Erzeugtes Markup pro Feld (siehe
 * layouts/joomla/form/field/radio/buttons.php):
 *   <div class="mb-3 form-group">
 *     <fieldset id="jform_...">
 *       <div class="btn-group btn-group-yesno ...">
 *         <input class="btn-check" ...><label class="btn btn-outline-danger/success">Nein/Ja</label>
 *         ...
 *       </div>
 *     </fieldset>
 *   </div>
 *
 * Bewusst NICHT global auf ".btn-group-yesno" angewendet: diese Klasse wird
 * projektweit in vielen weiteren Views/Tabs verwendet (u.a. in dieser
 * selben View "edit" auch in Tab "Allgemein"/"Ort"/"Berechtigungen" sowie in
 * ausstelleredit/colledit/sik_edit/themenedit/beitragedit) - dort soll die
 * bisherige Standardgröße unverändert bleiben. Daher per ID-Selektor auf
 * genau diese beiden Tab-Panes eingegrenzt (jede Tab-Pane erhält in
 * tmpl/edit/default.php automatisch die ID des jeweiligen Fieldset-Namens
 * aus forms/edit.xml, hier "tab10" bzw. "tab_rueckseite").
 *
 * Größenreduktion direkt über font-size/padding/border-radius (60% der
 * Bootstrap-5-Standardwerte fürs "btn": font-size 1rem -> 0.6rem, padding
 * 0.375rem 0.75rem -> 0.225rem 0.45rem, border-radius 0.375rem -> 0.225rem)
 * statt transform:scale() - dadurch schrumpft die tatsächliche Layout-Box
 * mit (kein ungenutzter Leerraum durch eine rein visuelle Skalierung),
 * analog zum bereits bestehenden Muster bei ".com-bilder-select" weiter
 * oben in dieser Datei.
 *
 * Für den halbierten Zeilenabstand wird die margin-bottom der jeweiligen
 * Feld-Zeile (".mb-3.form-group", siehe tmpl/edit/default.php) von
 * Bootstraps Standard 1rem auf 0.5rem reduziert - über :has() auf
 * genau die Zeilen eingegrenzt, die einen Ja/Nein-Umschalter enthalten
 * (in Tab "Rückseite" bleibt die Zeile des Listenfelds "Bewertung
 * Rückseite" davon unberührt).
 */
#tab10 .btn-group-yesno .btn,
#tab_rueckseite .btn-group-yesno .btn {
    font-size: 0.6rem !important;
    padding: 0.225rem 0.45rem !important;
    border-radius: 0.225rem !important;
}

#tab10 .form-group:has(.btn-group-yesno),
#tab_rueckseite .form-group:has(.btn-group-yesno) {
    margin-bottom: 0.5rem !important;
}