/* ==========================================================================
   Gemeinde24 – Orchid Modern
   Design: Artefakt „Gemeinde24 Admin – Modernisierung“
   https://claude.ai/artifact/3vo7eyRePeLSFxCzpMjN8w

   Wird über config/platform.php → resource.stylesheets NACH orchid.css und
   style.css geladen. Abschalten = Eintrag dort entfernen, dann gilt wieder das
   alte Aussehen (die var()-Schalter in style.css haben die alten Werte als
   Rückfallwert).

   Regel: kein !important in dieser Datei. Der Reihe nach:
     1. Bootstrap-Variablen setzen (auch die !important-Utilities wie .rounded,
        .shadow-sm, .bg-white lesen ihre Werte aus Variablen).
     2. Gleiche Klasse wie Orchid mit „body“ davor – eine Spur höhere Priorität.
     3. --g24-*-Schalter für Regeln aus style.css, die !important tragen.
     4. Wo der Orchid-Kern selbst feste !important-Werte setzt (.btn-danger,
        .fw-light, .layout a:hover): Technik ohne !important, jeweils kommentiert.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../vendor/inter/inter-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../vendor/inter/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ── */
:root {
    --g24-primary: #16759f;
    --g24-primary-dunkel: #0f5a7b;
    --g24-primary-rgb: 22, 117, 159;
    --g24-sidebar: #17435f;
    --g24-sidebar-rgb: 23, 67, 95;
    --g24-akzent-badge: #5cc3ec;
    --g24-danger: #c2410c;
    --g24-danger-text: #b42318;
    --g24-danger-hell: #fdecea;
    --g24-grund: #f3f5f8;
    --g24-text: #0f1e2b;
    --g24-text-label: #334555;
    --g24-text-muted: #5b6b7a;
    --g24-rand: #e3e8ee;
    --g24-rand-hell: #edf1f5;
    --g24-rand-input: #d5dde5;
    --g24-radius: 10px;
    --g24-radius-karte: 16px;
    --g24-schatten-karte: 0 1px 2px rgba(15, 30, 43, .04), 0 8px 24px rgba(15, 30, 43, .04);
    --g24-schatten-feld: 0 1px 2px rgba(15, 30, 43, .04);
    --g24-fokus: 0 0 0 4px rgba(var(--g24-primary-rgb), .15);

    /* Schalter für die !important-Regeln in style.css */
    --g24-schrift: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --g24-style-sidebar: var(--g24-sidebar);
    --g24-style-nav-aktiv-bg: rgba(255, 255, 255, .14);
    --g24-style-nav-aktiv-text: #fff;
    --g24-style-tabkarte-radius: var(--g24-radius-karte);
    --g24-style-tab-radius: 9px;
    --g24-style-primary: var(--g24-primary);
    --g24-style-primary-hover: var(--g24-primary-dunkel);
    --g24-style-outline-text: var(--g24-primary);
    --g24-style-outline-rand: var(--g24-primary);
    --g24-style-outline-hover: var(--g24-primary);

    /* Bootstrap */
    --bs-primary: var(--g24-primary);
    --bs-primary-rgb: var(--g24-primary-rgb);
    --bs-dark-rgb: var(--g24-sidebar-rgb);
    --bs-body-bg: var(--g24-grund);
    --bs-body-bg-rgb: 243, 245, 248;
    --bs-body-color: var(--g24-text);
    --bs-emphasis-color: var(--g24-text);
    --bs-secondary-color: var(--g24-text-muted);
    --bs-font-sans-serif: var(--g24-schrift);
    --bs-border-color: var(--g24-rand);
    --bs-border-color-translucent: var(--g24-rand);
    --bs-border-radius: var(--g24-radius);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--g24-radius-karte);
    --bs-border-radius-xl: var(--g24-radius-karte);
    --bs-link-color: var(--g24-primary);
    --bs-link-color-rgb: var(--g24-primary-rgb);
    --bs-link-hover-color: var(--g24-primary-dunkel);
    --bs-box-shadow-sm: var(--g24-schatten-karte);
    --bs-box-shadow: var(--g24-schatten-karte);
    --bs-focus-ring-color: rgba(var(--g24-primary-rgb), .15);
}

/* ── Grundlage ── */
html body {
    background-color: var(--g24-grund);
    color: var(--g24-text);
    font-size: .9375rem;
    -webkit-font-smoothing: antialiased;
}

body a {
    text-underline-offset: 2px;
}

body .text-muted {
    --bs-text-opacity: 1;
    --bs-secondary-color: var(--g24-text-muted);
}

body :focus-visible {
    outline: 2px solid var(--g24-primary);
    outline-offset: 2px;
}

/* ── Seitenleiste ── */
body .aside.bg-dark {
    background-image: none;
    color: #e6f0f6;
}

body .aside .bg-dark {
    background-image: none;
}

/* Badges in der Leiste: helles Blau auf der dunklen Fläche */
body .aside {
    --bs-primary-rgb: 92, 195, 236;
}

body .aside .badge {
    --bs-badge-color: #0c2f45;
    --bs-badge-font-size: 11px;
    --bs-badge-padding-x: 8px;
    --bs-badge-padding-y: 3px;
    text-shadow: none;
}

body .aside header.align-items-center {
    background: none;
}

body .aside .header-brand img {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
}

body .aside .divider {
    border-bottom-color: rgba(255, 255, 255, .08);
}

/* Gruppenüberschrift: style.css färbt .text-muted in der Leiste fix weiß → Abstufung über opacity */
body .aside .nav small.text-muted {
    margin-left: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .68;
}

body .aside .nav > li {
    margin-bottom: 2px;
}

body .aside .nav > li > a {
    gap: 4px;
    min-height: 40px;
    padding: 9px 12px;
    border-radius: var(--g24-radius);
    color: #e6f0f6;
    font-size: 14px;
}

body .aside .nav > li > a:hover,
body .aside .nav > li > a:focus {
    background-color: rgba(255, 255, 255, .08);
    color: #fff;
}

/* Orchid liest den Schatten mit !important aus dieser Variable */
body .aside .nav > li > a {
    --bs-box-shadow-sm: none;
}

body .aside .nav > li.active > a {
    --bs-box-shadow-sm: inset 0 0 0 1px rgba(255, 255, 255, .12);
    font-weight: 600;
}

body .aside .nav > li > a svg {
    width: 18px;
    height: 18px;
    flex: none;
}

body .aside .profile-container {
    border-radius: 12px;
    background: rgba(0, 0, 0, .18);
}

body .aside .profile-container .text-white {
    font-weight: 600;
}

/* Am Desktop bleibt die Leiste stehen; das Menü scrollt in sich, das Profil bleibt unten */
@media (min-width: 1200px) {
    body .aside {
        position: sticky;
        top: 0;
        height: 100vh;
        max-height: 100vh;
    }

    body .aside > .aside-collapse {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        scrollbar-color: rgba(255, 255, 255, .24) transparent;
        scrollbar-width: thin;
    }

    body .aside > .aside-collapse > ul.nav {
        flex-wrap: nowrap;
    }

    /* „Nach oben“ ist mit stehender Leiste überflüssig, der Block schiebt nur das Profil nach unten */
    body .aside .to-top {
        flex: 1 1 auto;
        margin-top: 0;
        visibility: hidden;
    }
}

/* ── Kopfzeile: Brotkrumen, Titel, Command-Bar ── */
body nav[aria-label="breadcrumb"] {
    margin-left: -1.5rem;
}

body .breadcrumb {
    --bs-breadcrumb-divider: "›";
    --bs-breadcrumb-item-active-color: var(--g24-text);
    --bs-breadcrumb-divider-color: var(--g24-text-muted);
    font-size: 13px;
}

body .breadcrumb .breadcrumb-item a {
    color: var(--g24-primary);
    text-decoration: none;
}

body .breadcrumb .breadcrumb-item.active {
    font-weight: 500;
}

/* Die Karte um den Titel fällt weg: --bs-bg-opacity macht .layout durchsichtig.
   Beim Scrollen bleibt die Leiste kleben, daher Grundfarbe mit Unschärfe dahinter. */
body .command-bar-wrapper {
    margin-bottom: .5rem;
    overflow-x: clip;
    overflow-clip-margin: 12px;
    background: rgba(243, 245, 248, .88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Negativer Rand gleicht das feste padding von .layout aus: Titel und Button stehen bündig mit den Karten */
body .command-bar-wrapper .layout {
    --bs-bg-opacity: 0;
    --bs-box-shadow-sm: none;
    --bs-border-radius: 0;
    margin: 0 -1.5rem;
    border-top: 0;
    border-radius: 0;
    box-shadow: none;
}

/* .fw-light hat !important. Mit der variablen Schrift setzt die Achse das Gewicht direkt. */
body .command-bar-wrapper h1 {
    font-size: 28px;
    font-variation-settings: "wght" 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

body .command-bar-wrapper header small {
    display: block;
    margin-top: 6px;
    font-size: 14px;
}

/* Platz für den Fokusring und den Schatten: .command-bar schneidet sonst ab */
body .command-bar {
    padding: 4px;
}

/* ── Karten ── */
body .bg-white.rounded {
    --bs-border-radius: var(--g24-radius-karte);
    border: 1px solid var(--g24-rand);
}

body .bg-white.rounded-top,
body .layout-wrapper.rounded-top {
    --bs-border-radius: var(--g24-radius-karte);
}

body .bg-white.rounded.p-4 {
    color: var(--g24-text);
}

body .bg-white a:not(.btn):not(.nav-link) {
    color: var(--g24-primary);
}

/* Layout::block: Schatten liegt am äußeren Element, das sonst eckig wäre */
body fieldset > .col-12.shadow-sm {
    --bs-box-shadow-sm: none;
}

body fieldset > .col-12.shadow-sm > .bg-white {
    box-shadow: var(--g24-schatten-karte);
}

/* Titel in die Karte ziehen: das fieldset wird zur Karte, die innere Fläche wird durchsichtig.
   Greift nur bei Layout::rows mit Titel (.col > legend direkt neben der Fläche). */
body fieldset:has(> .col > legend):has(> .bg-white.rounded) {
    border: 1px solid var(--g24-rand);
    border-radius: var(--g24-radius-karte);
    background: #fff;
    box-shadow: var(--g24-schatten-karte);
}

body fieldset:has(> .col > legend) > .bg-white.rounded {
    --bs-bg-opacity: 0;
    --bs-box-shadow-sm: none;
    border: 0;
}

/* .p-0 und legend.mt-2 sind feste !important-Werte, der Abstand oben kommt daher als Rand der Zeile */
body fieldset:has(> .bg-white.rounded) > .col:has(> legend) {
    margin-top: 14px;
    border-bottom: 1px solid var(--g24-rand-hell);
}

body fieldset:has(> .bg-white.rounded) > .col > legend {
    float: none;
    margin-bottom: 16px;
    padding-left: 8px;
}

body legend {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: 0;
}

body fieldset:not(:has(> .bg-white.rounded)) legend {
    margin-bottom: 1rem;
}

body legend p.small {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
}

/* ── Felder ── */
body .form-label,
body .form-group > label,
body .form-group label.form-label {
    color: var(--g24-text-label);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
}

body .form-group .form-text,
body .form-group small.text-muted {
    color: var(--g24-text-muted);
    font-size: 12px;
}

body .form-control,
body .form-select,
body .bootstrap-tagsinput,
body .chosen-choices,
body .chosen-single {
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid var(--g24-rand-input);
    border-radius: var(--g24-radius);
    background-color: #fff;
    box-shadow: var(--g24-schatten-feld);
    color: var(--g24-text);
    font-size: 15px;
    line-height: 1.45;
    transition: border-color .12s ease, box-shadow .12s ease;
}

body .form-control:hover:not(:disabled):not([readonly]):not(:focus),
body .form-select:hover:not(:disabled):not(:focus) {
    border-color: #b8c4cf;
}

body .form-control:focus,
body .form-select:focus,
body .bootstrap-tagsinput:focus,
body .chosen-choices:focus,
body .chosen-single:focus {
    border-color: var(--g24-primary);
    background-color: #fff;
    box-shadow: var(--g24-fokus);
    color: var(--g24-text);
}

body .form-control::placeholder,
body .form-control:focus::placeholder {
    color: #718190;
}

body .form-control:disabled,
body .form-control[readonly] {
    background-color: #f8fafc;
    color: var(--g24-text-muted);
}

/* Kalenderfelder sind technisch schreibgeschützt, aber bedienbar: dürfen nicht deaktiviert aussehen */
body .form-control.flatpickr-input[readonly],
body .flatpickr-input + .form-control[readonly] {
    background-color: #fff;
    color: var(--g24-text);
    cursor: pointer;
}

body .form-control.is-invalid,
body .is-invalid .form-control {
    border-color: var(--g24-danger);
    box-shadow: 0 0 0 4px rgba(194, 65, 12, .12);
}

body .invalid-feedback {
    color: var(--g24-danger);
    font-size: 12px;
}

body label .text-danger,
body .form-label .text-danger {
    --bs-danger-rgb: 194, 65, 12;
}

body .input-group > .form-control,
body .input-group > .input-group-text,
body .input-group > .btn {
    border-radius: 0;
}

body .input-group > :first-child {
    border-top-left-radius: var(--g24-radius);
    border-bottom-left-radius: var(--g24-radius);
}

body .input-group > :last-child {
    border-top-right-radius: var(--g24-radius);
    border-bottom-right-radius: var(--g24-radius);
}

body .input-group-text {
    border-color: var(--g24-rand-input);
    background-color: #f8fafc;
}

/* Versteckte Felder (Input::make()->type('hidden')) belegen sonst eine leere Zeile im Abstand der Karte */
body .form-group:has(> [data-controller="input"] > input[type="hidden"]:only-child) {
    display: none;
}

/* Tom Select (Relation, Select): der Wrapper erbt .form-control vom select und ist der sichtbare
   Rahmen. Innen deshalb ohne Rand, sonst wird das Feld höher als die anderen. */
body .form-control.ts-wrapper {
    padding: 0;
}

body .form-control.ts-wrapper .ts-control {
    min-height: 42px;
    padding: 9px 14px;
    border: 0;
    border-radius: var(--g24-radius);
    background: none;
    box-shadow: none;
    font-size: 15px;
}

/* Pfeil, damit man das Feld als Auswahl erkennt: Orchid zeigt ihn nur ohne .form-control,
   und .form-control nimmt nativen Selects mit appearance:none den eigenen Pfeil */
/* Orchid: .ts-control hat background:transparent !important → der Pfeil kommt an den Wrapper */
body .form-control.ts-wrapper.single {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235b6b7a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 14px center;
    background-repeat: no-repeat;
    background-size: 12px;
}

body .form-control.ts-wrapper.single .ts-control > .item {
    max-width: calc(100% - 28px);
}

body select.form-control:not(.tomselected):not([multiple]) {
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235b6b7a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 14px center;
    background-repeat: no-repeat;
    background-size: 12px;
}

body .form-control.ts-wrapper.focus {
    border-color: var(--g24-primary);
    box-shadow: var(--g24-fokus);
}

body .ts-dropdown {
    overflow: hidden;
    margin-top: 6px;
    border-color: var(--g24-rand);
    border-radius: var(--g24-radius);
    box-shadow: 0 8px 24px rgba(15, 30, 43, .12);
}

/* Checkbox, Radio, Schalter */
body .form-check-input {
    --bs-form-check-bg: #fff;
    border-color: #b8c4cf;
}

body .form-check-input:checked {
    border-color: var(--g24-primary);
    background-color: var(--g24-primary);
}

body .form-check-input:focus {
    border-color: var(--g24-primary);
    box-shadow: var(--g24-fokus);
}

body .form-check-input[type="checkbox"] {
    border-radius: 5px;
}

body .form-switch .form-check-input[type="checkbox"] {
    border-radius: 2em;
}

/* Upload-Flächen */
body .dropzone-wrapper,
body .dropzone {
    border-radius: var(--g24-radius);
}

body .dropzone-wrapper .border-dashed,
body .dropzone-wrapper .dz-message,
body .cropper-actions.border-dashed {
    border-radius: var(--g24-radius);
}

/* Hochgeladene Datei: beim Überfahren zweigeteilt – links Informationen, rechts ansehen.
   opacity statt display:none, damit beide per Tastatur erreichbar bleiben. */
body .dropzone-wrapper .dz-preview .btn-edit.g24-dz-aktionen {
    display: flex;
    align-items: stretch;
    top: 0;
    height: 100%;
    padding: 0;
    border-radius: var(--g24-radius);
    overflow: hidden;
    background-color: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    cursor: default;
    opacity: 0;
    transition: opacity .12s ease;
}

body .dropzone-wrapper .dz-preview:hover .btn-edit.g24-dz-aktionen,
body .dropzone-wrapper .dz-preview .btn-edit.g24-dz-aktionen:focus-within {
    opacity: 1;
}

/* Ohne Maus (Tablet, Handy) gibt es kein Überfahren */
@media (hover: none) {
    body .dropzone-wrapper .dz-preview .btn-edit.g24-dz-aktionen {
        opacity: 1;
    }
}

body .dropzone-wrapper .g24-dz-aktion {
    display: flex;
    flex: 1 1 50%;
    align-items: center;
    justify-content: center;
    color: var(--g24-text);
    font-size: 20px;
    transition: background-color .12s ease, color .12s ease;
}

body .dropzone-wrapper .g24-dz-aktion:hover,
body .dropzone-wrapper .g24-dz-aktion:focus-visible {
    background-color: rgba(var(--g24-primary-rgb), .12);
    color: var(--g24-primary);
}

body .dropzone-wrapper .g24-dz-aktion:focus-visible {
    outline-offset: -2px;
}

/* Farbe am Icon: .bg-white a und a:hover (!important) würden sie sonst überschreiben */
body .dropzone-wrapper .g24-dz-aktion svg {
    color: var(--g24-text);
}

body .dropzone-wrapper .g24-dz-aktion:hover svg,
body .dropzone-wrapper .g24-dz-aktion:focus-visible svg {
    color: var(--g24-primary);
}

body .dropzone-wrapper .g24-dz-aktion + .g24-dz-aktion {
    border-left: 1px solid var(--g24-rand-input);
}

/* Schließen-Kreuz liegt über der Fläche */
body .dropzone-wrapper .dz-preview .btn-remove {
    z-index: 60;
}

/* Bildfeld mit Medienkatalog-Kachel (.onlyMedia, je zwei Spalten im Grid):
   Kachel fest, Upload-Fläche nimmt den Rest – 1fr 1fr würde die Karte sprengen. */
@media (min-width: 768px) {
    body .d-md-grid.form-group:has(> .onlyMedia + .onlyMedia) {
        --bs-gap: 12px;
        grid-template-columns: minmax(0, 1fr) 120px;
    }
}

/* Der Titel „.“ im PHP hält nur die Kachel auf Höhe des Upload-Felds */
body .onlyMedia + .onlyMedia .form-label {
    visibility: hidden;
}

/* Orchid: padding oben und min-height 150px – die Kachel säße tiefer als die Upload-Fläche */
body .onlyMedia .dropzone-wrapper {
    min-height: 0;
    padding: 0;
}

body .onlyMedia .dropzone-wrapper .dz-preview {
    margin: 0;
}

body .cropper-actions {
    min-height: 112px;
    padding: 14px;
    background-color: #f8fafc;
}

/* Bild-ID ohne Datei (src="332734"): die kaputte Vorschau wäre nur ein Punkt */
body .cropper-preview:not([src*="/"]) {
    display: none;
}

body .fields-cropper-container .cropper-preview {
    border-radius: 8px;
}

body .cropper-actions > span,
body .picture-actions > span {
    color: var(--g24-text-label);
    font-size: 13px;
    font-weight: 400;
    text-align: left;
}

/* Einzelne Buttons statt verbundener Gruppe: in schmalen Spalten brechen sie um, statt abgeschnitten zu werden */
body .cropper-actions .btn-group,
body .picture-actions .btn-group {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

body .cropper-actions .btn-group > .btn:not(.btn-link),
body .picture-actions .btn-group > .btn:not(.btn-link) {
    flex: 1 1 auto;
    min-height: 40px;
    margin-left: 0;
    padding: 6px 12px;
    border-radius: 8px;
    background-color: #fff;
    font-size: 13px;
    white-space: nowrap;
}

/* Entfernen ist Nebensache: neutraler Rand, nur der Text rot */
body .btn-outline-danger.cropper-remove,
body .btn-outline-danger.picture-remove {
    --bs-btn-color: var(--g24-danger-text);
    --bs-btn-border-color: var(--g24-rand-input);
    --bs-btn-hover-color: var(--g24-danger-text);
    --bs-btn-hover-bg: var(--g24-danger-hell);
    --bs-btn-hover-border-color: var(--g24-rand-input);
    --bs-btn-active-color: var(--g24-danger-text);
    --bs-btn-active-bg: var(--g24-danger-hell);
    --bs-btn-active-border-color: var(--g24-rand-input);
}

/* TinyMCE und Quill */
body .tox.tox-tinymce,
body .ql-toolbar.ql-snow {
    border-color: var(--g24-rand-input);
}

body .tox.tox-tinymce {
    border-radius: var(--g24-radius);
}

body .ql-toolbar.ql-snow {
    border-top-left-radius: var(--g24-radius);
    border-top-right-radius: var(--g24-radius);
}

body .ql-container.ql-snow {
    border-color: var(--g24-rand-input);
    border-bottom-left-radius: var(--g24-radius);
    border-bottom-right-radius: var(--g24-radius);
}

/* ── Tabs als Segmented Control ── */
body .nav-tabs-alt {
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1rem;
    border-radius: 12px;
    background: #e6ebf1;
}

body .nav-tabs-alt .nav-tabs.nav-tabs-scroll-bar {
    padding: 4px;
    border: 0;
    background: none;
}

/* border-width 0: die blaue Linie aus Orchid (border-bottom-color !important) verschwindet damit */
body .nav-tabs-alt .nav-tabs .nav-item .nav-link {
    min-height: 38px;
    margin: 0;
    padding: 8px 18px;
    border-width: 0;
    border-radius: 9px;
    color: #4a5b6b;
    font-size: 14px;
    font-weight: 500;
}

body .nav-tabs-alt .nav-tabs .nav-item .nav-link:hover {
    color: var(--g24-text);
}

body .nav-tabs-alt .nav-tabs .nav-item .nav-link.active {
    box-shadow: 0 1px 2px rgba(15, 30, 43, .10);
    color: var(--g24-text);
    font-weight: 600;
}

/* ── Buttons ── */
body .btn {
    --bs-btn-font-size: 14px;
    border-radius: var(--g24-radius);
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

body .btn:not(.btn-link):not(.btn-sm) {
    min-height: 44px;
    padding: 8px 20px;
    font-weight: 600;
    justify-content: center;
}

body .btn-primary {
    box-shadow: 0 1px 2px rgba(15, 30, 43, .12), 0 4px 12px rgba(var(--g24-primary-rgb), .22);
}

/* Orchid: .layout a:hover { color:#000 !important } würde Link-Buttons schwarz färben.
   text-fill-color schlägt color ohne !important, das Icon bekommt seine Farbe direkt. */
body a.btn-primary:hover {
    -webkit-text-fill-color: #fff;
}

body a.btn-primary:hover svg {
    color: #fff;
}

/* Randfarbe ist in Orchid fest (!important), die sichtbare Linie kommt daher als innerer Schatten */
body .btn-default,
body .dropzone-wrapper .btn-default {
    border-radius: var(--g24-radius);
    box-shadow: inset 0 0 0 1px var(--g24-rand-input);
}

/* Speichern ist in Orchid ein .btn-danger mit festem !important. Der Farbverlauf liegt über
   background-color und braucht kein !important; der Rand ist weg, weil seine Farbe fest bleibt.
   Bewusst nur Speicher-Aktionen, ein Löschen-Button darf nie blau werden. */
body .btn-danger[formaction*="/save" i],
body .btn-danger[formaction*="/speichern" i],
body .btn-danger.fb-save-btn {
    background-image: linear-gradient(var(--g24-primary), var(--g24-primary));
    border-style: none;
    box-shadow: 0 1px 2px rgba(15, 30, 43, .12), 0 4px 12px rgba(var(--g24-primary-rgb), .22);
}

body .btn-danger[formaction*="/save" i]:hover,
body .btn-danger[formaction*="/speichern" i]:hover,
body .btn-danger.fb-save-btn:hover {
    background-image: linear-gradient(var(--g24-primary-dunkel), var(--g24-primary-dunkel));
}

/* Löschen: helle Fläche, roter Text (gleiche Technik) */
body .btn-danger:not([formaction*="/save" i]):not([formaction*="/speichern" i]):not(.fb-save-btn) {
    background-image: linear-gradient(var(--g24-danger-hell), var(--g24-danger-hell));
    border-style: none;
    -webkit-text-fill-color: var(--g24-danger-text);
}

body .btn-danger:not([formaction*="/save" i]):not([formaction*="/speichern" i]):not(.fb-save-btn) svg {
    color: var(--g24-danger-text);
}

body .btn-danger:not([formaction*="/save" i]):not([formaction*="/speichern" i]):not(.fb-save-btn):hover {
    background-image: linear-gradient(#fbdcd8, #fbdcd8);
}

/* Anmeldung und Dialoge: Orchid zeigt den Hauptbutton als .btn-default (gleiche Technik) */
body .form-signin button[type="submit"].btn-default,
body .modal-footer button[type="submit"].btn-default,
body .modal-footer button[data-action].btn-default {
    background-image: linear-gradient(var(--g24-primary), var(--g24-primary));
    border-style: none;
    box-shadow: 0 1px 2px rgba(15, 30, 43, .12), 0 4px 12px rgba(var(--g24-primary-rgb), .22);
    -webkit-text-fill-color: #fff;
}

body .form-signin button[type="submit"].btn-default svg,
body .modal-footer button[type="submit"].btn-default svg,
body .modal-footer button[data-action].btn-default svg {
    color: #fff;
}

body .form-signin button[type="submit"].btn-default:hover,
body .modal-footer button[type="submit"].btn-default:hover,
body .modal-footer button[data-action].btn-default:hover {
    background-image: linear-gradient(var(--g24-primary-dunkel), var(--g24-primary-dunkel));
}

/* Command-Bar: Sekundäraktionen (Hilfe, Vorschau …) als weiße Buttons */
body .command-bar .btn.btn-link,
body .command-bar .btn.btn-outline-secondary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 18px;
    border: 1px solid var(--g24-rand-input);
    border-radius: var(--g24-radius);
    background-color: #fff;
    color: var(--g24-text);
    font-weight: 600;
}

body .command-bar .btn.btn-link:hover,
body .command-bar .btn.btn-link:focus,
body .command-bar .btn.btn-outline-secondary:hover,
body .command-bar .btn.btn-outline-secondary:focus {
    border-color: #b8c4cf;
    background-color: #f8fafc;
}

body .command-bar .btn:not(.btn-link) {
    display: inline-flex;
    align-items: center;
    border-radius: var(--g24-radius);
}

/* ── Tabellen ── */
body .table {
    --bs-table-border-color: var(--g24-rand-hell);
    --bs-table-hover-bg: #f8fafc;
}

body .table > thead > tr > th {
    padding: 12px 16px;
    border-bottom: 1px solid var(--g24-rand);
    background-color: #f8fafc;
    color: var(--g24-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
}

body .table > tbody > tr > td {
    padding: 12px 16px;
    border-top: 1px solid var(--g24-rand-hell);
    font-size: 14px;
    vertical-align: middle;
}

body .table > tbody > tr:hover > td {
    --bs-table-bg-state: #f8fafc;
}

/* Klickbarer Titel (App\\Support\\TabellenLink). Orchid: .bg-white a:hover { color:#000 !important } */
body .table .g24-tabellen-titel {
    color: var(--g24-primary);
    font-weight: 600;
    text-decoration: none;
}

body .table .g24-tabellen-titel:hover,
body .table .g24-tabellen-titel:focus-visible {
    color: var(--g24-primary-dunkel);
    -webkit-text-fill-color: var(--g24-primary-dunkel);
    text-decoration: underline;
}

/* Variante für Dialoge: ein Button, der wie der Link aussieht */
body .table .btn.g24-tabellen-titel {
    display: inline;
    min-height: 0;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
}

/* Status-Badges in Tabellen: ruhige Pillen */
body .badge {
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: 999px;
    text-shadow: none;
}

body .table .badge {
    --bs-badge-font-size: 11px;
    --bs-badge-padding-x: 9px;
    --bs-badge-padding-y: 3px;
}

/* ── Blättern ── */
body .pagination {
    --bs-pagination-border-width: 0;
    --bs-pagination-bg: transparent;
    --bs-pagination-color: var(--g24-text);
    --bs-pagination-hover-bg: #eef2f6;
    --bs-pagination-hover-color: var(--g24-text);
    --bs-pagination-focus-box-shadow: var(--g24-fokus);
    --bs-pagination-active-bg: #e6ebf1;
    --bs-pagination-font-size: 14px;
    gap: 4px;
}

body .pagination .page-link {
    min-width: 36px;
    border-radius: 8px;
    text-align: center;
}

/* ── Modale, Menüs, Hinweise ── */
body .modal {
    --bs-modal-border-radius: var(--g24-radius-karte);
    --bs-modal-inner-border-radius: 15px;
    --bs-modal-border-color: var(--g24-rand);
    --bs-modal-header-border-color: var(--g24-rand-hell);
    --bs-modal-footer-border-color: var(--g24-rand-hell);
    --bs-modal-box-shadow: 0 24px 64px rgba(15, 30, 43, .22);
}

/* .fw-light am Titel: wie beim Seitentitel über die Schriftachse */
body .modal-title {
    font-size: 17px;
    font-variation-settings: "wght" 600;
}

/* Keine Karte in der Karte */
body .modal .bg-white.rounded {
    --bs-box-shadow-sm: none;
    border: 0;
}

body .dropdown-menu {
    --bs-dropdown-border-radius: var(--g24-radius);
    --bs-dropdown-border-color: var(--g24-rand);
    --bs-dropdown-box-shadow: 0 8px 24px rgba(15, 30, 43, .12);
    --bs-dropdown-font-size: 14px;
    box-shadow: 0 8px 24px rgba(15, 30, 43, .12);
}

body .alert {
    --bs-alert-border-radius: 12px;
    font-size: 14px;
}

body .toast {
    --bs-toast-border-radius: 12px;
}

/* Klappbare Bereiche im Formular */
body .accordion-heading {
    margin-bottom: 8px;
    padding: 6px 14px;
    border: 1px solid var(--g24-rand);
    border-radius: 12px;
    background: #fff;
}

body .accordion-heading.collapsed {
    background: #fff;
}

/* .collapsed: style.css setzt dort font-weight 200 */
body .accordion-heading h6,
body .accordion-heading.collapsed h6 {
    color: var(--g24-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Formbuilder (jQuery formBuilder, Formular bearbeiten) ──
   Sein CSS kommt zur Laufzeit in die Seite, daher gleiche Selektoren wie dort mit „body“ davor. */
body .alert-info {
    --bs-alert-bg: #eaf4f9;
    --bs-alert-color: #0f4a66;
    --bs-alert-border-color: #cfe5f0;
}

@media (min-width: 992px) {
    body .form-wrap.form-builder .stage-wrap {
        width: calc(100% - 276px);
    }

    /* Bausteine bleiben beim Scrollen sichtbar, auch bei langen Formularen */
    body .form-wrap.form-builder .cb-wrap {
        position: sticky;
        top: 120px;
        width: 260px;
    }
}

@media (max-width: 991.98px) {
    body .form-wrap.form-builder .stage-wrap,
    body .form-wrap.form-builder .cb-wrap {
        float: none;
        width: 100%;
    }

    body .form-wrap.form-builder .cb-wrap {
        margin-bottom: 16px;
    }

    body .form-wrap.form-builder .frmb-control {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 6px;
    }
}

/* Bausteine rechts */
body .form-wrap.form-builder .frmb-control li,
body .form-wrap.form-builder .frmb-control li:first-child,
body .form-wrap.form-builder .frmb-control li:last-child {
    margin: 0 0 6px;
    padding: 9px 12px;
    border: 1px solid var(--g24-rand);
    border-radius: var(--g24-radius);
    box-shadow: none;
    color: var(--g24-text);
    font-size: 14px;
    transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}

body .form-wrap.form-builder .frmb-control li:hover {
    border-color: var(--g24-primary);
    background-color: rgba(var(--g24-primary-rgb), .06);
    color: var(--g24-primary);
}

body .form-wrap.form-builder .frmb-control li.ui-sortable-helper {
    border-color: var(--g24-primary);
    box-shadow: 0 8px 24px rgba(15, 30, 43, .16);
}

/* Felder im Formular: jedes eine eigene Box */
body .form-wrap.form-builder .frmb {
    margin: 0;
    padding-right: 16px;
}

body .form-wrap.form-builder .frmb > li,
body .form-wrap.form-builder .frmb > li:first-child,
body .form-wrap.form-builder .frmb > li:last-child {
    margin-bottom: 8px;
    padding: 14px 16px;
    border: 1px solid var(--g24-rand);
    border-radius: 12px;
    background-color: #fff;
    cursor: move;
    transition: border-color .12s ease, box-shadow .12s ease;
}

body .form-wrap.form-builder .frmb > li:hover {
    border-color: #b8c4cf;
    box-shadow: var(--g24-schatten-karte);
}

/* Geöffnetes Feld: blauer Rand, Einstellungen als ruhige Fläche */
body .form-wrap.form-builder .frmb > li.editing,
body .form-wrap.form-builder .frmb > li.editing:hover {
    border-color: var(--g24-primary);
    box-shadow: var(--g24-fokus);
    cursor: default;
}

body .form-wrap.form-builder .frmb li .field-label {
    color: var(--g24-text-label);
    font-size: 13px;
    font-weight: 500;
}

body .form-wrap.form-builder .frmb li .required-asterisk {
    color: var(--g24-danger);
}

/* Vorschau: Überschriften kleiner, damit die Box nicht das Formular dominiert */
body .form-wrap.form-builder .frmb .prev-holder h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
}

body .form-wrap.form-builder .frmb .prev-holder h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
}

body .form-wrap.form-builder .frmb .prev-holder h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

body .form-wrap.form-builder .frmb .prev-holder .form-group {
    margin-bottom: 0;
}

body .form-wrap.form-builder .frmb .prev-holder label {
    color: var(--g24-text-label);
    font-size: 13px;
    font-weight: 500;
}

body .form-wrap.form-builder input[type="checkbox"],
body .form-wrap.form-builder input[type="radio"] {
    accent-color: var(--g24-primary);
}

body .form-wrap.form-builder .frmb .form-control,
body .form-wrap.form-builder .frmb .prev-holder input[type="text"],
body .form-wrap.form-builder .frmb .prev-holder input[type="number"],
body .form-wrap.form-builder .frmb .prev-holder select,
body .form-wrap.form-builder .frmb .prev-holder textarea {
    border-color: var(--g24-rand-input);
    box-shadow: var(--g24-schatten-feld);
}

/* Aktionen oben rechts in der Box */
body .form-wrap.form-builder .frmb .field-actions {
    display: flex;
    gap: 2px;
    top: 8px;
    right: 8px;
    padding: 2px;
    border: 1px solid var(--g24-rand);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--g24-schatten-feld);
    transition: opacity .12s ease;
}

body .form-wrap.form-builder .frmb .field-actions .btn,
body .form-wrap.form-builder .frmb .field-actions .btn:first-child,
body .form-wrap.form-builder .frmb li:first-child .field-actions .btn:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background-color: transparent;
    color: var(--g24-text-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

body .form-wrap.form-builder .frmb .field-actions .toggle-form:hover,
body .form-wrap.form-builder .frmb .field-actions .copy-button:hover {
    background-color: rgba(var(--g24-primary-rgb), .12);
    color: var(--g24-primary);
    -webkit-text-fill-color: var(--g24-primary);
}

body .form-wrap.form-builder .frmb .field-actions .del-button:hover {
    background-color: var(--g24-danger-hell);
    color: var(--g24-danger-text);
    -webkit-text-fill-color: var(--g24-danger-text);
}

/* Einstellungen des Felds */
body .form-wrap.form-builder .frmb .form-elements {
    margin-top: 12px;
    padding: 16px 16px 56px;
    border: 1px solid var(--g24-rand);
    border-radius: var(--g24-radius);
    background: #f8fafc;
}

body .form-wrap.form-builder .frmb .form-elements .form-group {
    margin-bottom: 12px;
}

body .form-wrap.form-builder .frmb .form-elements .form-group > label {
    color: var(--g24-text-label);
    font-size: 13px;
    font-weight: 500;
    line-height: 44px;
    margin-bottom: 0;
}

body .form-wrap.form-builder .frmb .form-elements .fld-label.form-control {
    height: auto;
}

body .form-wrap.form-builder .frmb li .close-field {
    display: inline-flex;
    align-items: center;
    bottom: 26px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--g24-rand-input);
    border-radius: 8px;
    background: #fff;
    color: var(--g24-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transform: translateX(-50%);
}

body .form-wrap.form-builder .frmb li .close-field:hover {
    border-color: #b8c4cf;
    background: #f1f4f7;
    -webkit-text-fill-color: var(--g24-text);
}

/* Leere Fläche: Hinweis zum Hineinziehen */
body .form-wrap.form-builder .stage-wrap.empty {
    border: 2px dashed var(--g24-rand-input);
    border-radius: 12px;
    background: #f8fafc;
    color: var(--g24-text-muted);
}

/* ── Handy: Command-Bar liegt bei Orchid unten am Bildschirm ── */
@media (max-width: 767.98px) {
    body nav[aria-label="breadcrumb"] {
        margin-left: 0;
    }

    body .command-bar-wrapper {
        margin-bottom: 0;
        border-top: 1px solid var(--g24-rand);
        background: rgba(255, 255, 255, .92);
    }

    body .command-bar .btn:not(.btn-link):not(.btn-sm),
    body .command-bar .btn.btn-link {
        padding-inline: 14px;
    }

    body .command-bar-wrapper .layout {
        margin: 0;
    }

    body fieldset:has(> .bg-white.rounded) > .col:has(> legend) {
        margin-top: 8px;
    }
}