/* === Farbvariablen für den Weinstammtisch === */
:root {
    --wine-primary: #880015;
    --wine-primary-hover: #a0001a;
    --wine-text-primary: #313131;
    --wine-text-secondary: #919191;
    --wine-text-label: #616161;
    --wine-text-disabled: #c2c2c2;
    --wine-border: #e4e4e4;
    --wine-bg-light: #ffffff;
    --wine-btn-secondary: #f4f4f4;
    --wine-btn-secondary-hover: #eaeaea;
    --wine-btn-tertiary: transparent;
    --wine-btn-tertiary-hover: rgba(136, 0, 21, 0.1);
    --wine-danger: #c7362e; /* etwas heller, klar unterscheidbar */
    --wine-danger-hover: #aa1e18; /* dunklerer Akzent beim Hover */
}

/* === Grundschriftart === */
html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    color: var(--wine-text-primary);
    background-color: var(--wine-bg-light);
}

h1:focus {
    outline: none;
    border: none;
}


/* === Links === */
a, .btn-link {
    color: var(--wine-primary);
    text-decoration: none;
}

    a:hover {
        color: var(--wine-primary-hover);
    }

/* === Buttons === */

/* Primärbutton */
/* Primärbutton */
.btn-primary {
    background-color: var(--wine-primary);
    color: white;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 999px;
    font-weight: normal;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.2s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    /* Hover-Effekt */
    .btn-primary:hover {
        background-color: var(--wine-primary-hover);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    /* Fokuszustand ohne blauen Rand */
    .btn-primary:focus {
        outline: none;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Kein blauer Rand */
    }

    /* Aktiv-Zustand, wenn der Button geklickt und gehalten wird */
    .btn-primary:active {
        background-color: var(--wine-primary); /* Originalfarbe bleibt erhalten */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Behalte den Schatten bei */
    }



/* Sekundärbutton */
.btn-secondary {
    background-color: var(--wine-btn-secondary);
    color: var(--wine-text-primary);
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--wine-border);
    border-radius: 999px;
    transition: background-color 0.3s;
}

    .btn-secondary:hover {
        background-color: var(--wine-btn-secondary-hover);
        color: #313131; /* Textfarbe bleibt dunkelgrau */
    }

/* Tertiärbutton */
.btn-tertiary {
    background-color: var(--wine-btn-tertiary);
    color: var(--wine-primary);
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 999px;
    transition: background-color 0.3s;
}

    .btn-tertiary:hover {
        background-color: var(--wine-btn-tertiary-hover);
    }

.btn-danger {
    background-color: var(--wine-danger);
    color: white;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 999px;
    font-weight: normal;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.2s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    .btn-danger:hover {
        background-color: var(--wine-danger-hover);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }



/* Fokus für Formelemente */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--wine-primary);
    outline: none;
}

/* === Cards === */
.card {
    border: 1px solid var(--wine-border);
    border-radius: 1rem;
    background-color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.card-header {
    color: #313131; /* primary text */
    border-bottom: 1px solid #e4e4e4;
}

/* === Standard-Inhalt-Abstand === */
.content {
    padding-top: 1.1rem;
}

/* === Typografie & Farben === */
.text-primary {
    color: var(--wine-text-primary) !important;
}

.text-secondary {
    color: var(--wine-text-secondary) !important;
}

.text-label {
    color: var(--wine-text-label) !important;
}

.text-disabled {
    color: var(--wine-text-disabled) !important;
}

/* === Validierung === */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* === Fehleranzeige Blazor === */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,...[gekürzt für Lesbarkeit]...) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Ein Fehler ist aufgetreten.";
    }

/* === Formularfelder === */
.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--wine-text-label);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* === Buttons: active & focus Zustand anpassen === */
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--wine-primary);
    border-color: var(--wine-primary);
    box-shadow: 0 0 0 0.25rem rgba(136, 0, 21, 0.4);
}

/* === Checkboxen, Radiobuttons, Switches im Weinstil === */
.form-check-input:checked {
    background-color: var(--wine-primary);
    border-color: var(--wine-primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(136, 0, 21, 0.4);
    border-color: var(--wine-primary);
}

/* === Range Slider (falls verwendet) === */
.form-range::-webkit-slider-thumb {
    background-color: var(--wine-primary);
}

.form-range::-moz-range-thumb {
    background-color: var(--wine-primary);
}

.form-range::-ms-thumb {
    background-color: var(--wine-primary);
}

/* Entferne den blauen Hintergrund beim Fokussieren und Klicken */
.dropdown-item:focus,
.dropdown-item:active {
    background-color: transparent; /* Kein Hintergrund beim Klicken oder Fokussieren */
    outline: none; /* Entferne den standardmäßigen Fokusrahmen */
}
/* Ändere den Cursor beim Hover */
.dropdown-item:hover {
    cursor: pointer; /* Hand-Cursor beim Hover */
    background-color: #f8f9fa; /* Optionale Hintergrundfarbe beim Hover */
}

/* Verhindere das Markieren von Text */
.dropdown-item {
    user-select: none; /* Verhindert das Markieren des Textes */
}

/* Standardzustand des Accordion-Headers */
.accordion-button {
    background-color: white; /* Weißer Hintergrund */
    color: #313131; /* Dunkelgraue Textfarbe */
    border: none; /* Keine Border */
}

    /* Ausgeklapptes Accordion */
    .accordion-button:not(.collapsed) {
        background-color: white; /* Weißer Hintergrund */
        color: #313131; /* Dunkelgraue Textfarbe */
        box-shadow: none; /* Kein Schatten */
    }

    /* Hover-Effekt auf dem Accordion-Header */
    .accordion-button:hover {
        background-color: white; /* Weiß bleibt beim Hover */
        color: #313131; /* Dunkelgraue Textfarbe */
        cursor: pointer; /* Hand-Cursor beim Hover */
    }

    /* Klicken auf den Header (beim Fokus) */
    .accordion-button:focus, .accordion-button:active {
        background-color: white; /* Weiß bleibt beim Klicken */
        color: #313131; /* Dunkelgraue Textfarbe */
        outline: none; /* Entfernt die Standard-Outline */
        box-shadow: none; /* Kein Fokus-Schatten */
    }

/* Akkordeon-Inhalt (z.B. Panel) */
.accordion-collapse {
    background-color: white; /* Weißer Hintergrund des Panels */
    padding: 1rem; /* Polsterung des Inhalts */
    border: 1px solid #e0e0e0; /* Helle Border um den Inhalt */
    border-top: none; /* Keine Border am oberen Rand */
}

/* Optional: Entfernen des Hintergrunds und Textfarbe beim Zusammenklappen */
.accordion-button.collapsed {
    background-color: white; /* Weißer Hintergrund beim eingeklappten Zustand */
    color: #313131; /* Dunkelgraue Textfarbe */
}
/* Standard Switch */
.form-check-input {
    background-color: #dcdcdc; /* Heller Hintergrund für inaktive Switches */
    border-color: #dcdcdc; /* Helle Grenze */
}

    /* Switch-Inneres (der Schiebeknopf) */
    .form-check-input:checked {
        background-color: #880015; /* Rote Farbe, wenn aktiviert */
        border-color: #880015; /* Rote Grenze */
    }

        /* Switch-Knopf (bei aktivem Zustand) */
        .form-check-input:checked:focus {
            box-shadow: 0 0 0 0.25rem rgba(136, 0, 21, 0.25); /* Roter Schatten bei Fokus */
        }

/* Button Group */
.btn-group {
    display: flex;
    gap: 0.5rem; /* Abstand zwischen den Buttons */
}

    /* Standard Button in der Gruppe */
    .btn-group .btn {
        background-color: #ffffff; /* Weißer Hintergrund für Standard-Buttons */
        border: 1px solid #dcdcdc; /* Graue Grenze */
        color: #616161; /* Dunkelgraue Textfarbe */
    }

        /* Button im aktivierten Zustand */
        .btn-group .btn.active, .btn-group .btn:focus {
            background-color: #880015; /* Dunkelroter Hintergrund */
            color: white; /* Weiße Textfarbe */
            border-color: #880015; /* Rote Grenze */
        }

        /* Button im Hover-Zustand (keine Änderung gewünscht) */
        .btn-group .btn:hover {
            background-color: #ffffff; /* Keine Änderung beim Hover */
            border-color: #dcdcdc; /* Keine Änderung bei Hover */
            color: #616161; /* Keine Änderung bei Hover */
        }

    /* Button-Styles für sekundäre Buttons in der Gruppe */
    .btn-group .btn-secondary {
        background-color: #f1f1f1; /* Heller Hintergrund für sekundäre Buttons */
        border: 1px solid #dcdcdc; /* Graue Grenze */
        color: #616161; /* Dunkelgraue Textfarbe */
    }

        /* Aktivierter sekundärer Button */
        .btn-group .btn-secondary.active, .btn-group .btn-secondary:focus {
            background-color: #880015; /* Dunkelroter Hintergrund */
            color: white; /* Weiße Textfarbe */
            border-color: #880015; /* Rote Grenze */
        }

        /* Keine Hover-Änderung für sekundäre Buttons */
        .btn-group .btn-secondary:hover {
            background-color: #f1f1f1; /* Keine Änderung beim Hover */
            border-color: #dcdcdc; /* Keine Änderung bei Hover */
            color: #616161; /* Keine Änderung bei Hover */
        }

/* Pagination als Button-Gruppe */
.pagination {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-radius: 8px; /* Randradius für die gesamte Button-Gruppe */
    overflow: hidden; /* Damit die Ecken der Buttons abgerundet bleiben */
    border: 1px solid #dcdcdc; /* Graue Grenze um die gesamte Button-Gruppe */
}

/* Pagination als Button-Gruppe */
.pagination {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-radius: 8px; /* Randradius für die gesamte Button-Gruppe */
    overflow: hidden; /* Damit die Ecken der Buttons abgerundet bleiben */
    border: 1px solid #dcdcdc; /* Graue Grenze um die gesamte Button-Gruppe */
}

    .pagination .page-item {
        margin: 0; /* Entfernen des Margins für die einzelnen Elemente */
    }

        /* Aktive Seite */
        .pagination .page-item.active {
            background-color: #880015; /* Dunkelroter Hintergrund für die aktive Seite */
            border-color: #880015; /* Rote Grenze für die aktive Seite */
        }

    /* Seitenlinks */
    .pagination .page-link {
        display: block;
        padding: 0.5rem 1rem; /* Polsterung für die Links */
        color: #616161; /* Dunkelgraue Textfarbe */
        text-decoration: none; /* Entfernt die Unterstreichung */
        border: 1px solid #dcdcdc; /* Graue Grenze um die Links */
        font-weight: normal;
        border-radius: 0; /* Kein Border-Radius auf den einzelnen Links, damit der Container-Effekt funktioniert */
        cursor: pointer; /* Mauszeiger als Hand bei Hover */
    }

        /* Fokussierter und aktiver Link */
        .pagination .page-item.active .page-link,
        .pagination .page-link:focus {
            color: white; /* Weiße Schrift für die aktive Seite */
            background-color: #880015; /* Dunkelroter Hintergrund */
            border-color: #880015; /* Rote Grenze */
        }

        /* Keine Hover-Änderung */
        .pagination .page-link:hover {
            background-color: #ffffff; /* Keine Änderung bei Hover */
            color: #616161; /* Dunkelgraue Textfarbe */
            border-color: #dcdcdc; /* Keine Änderung bei Hover */
        }

    /* Optional: Deaktivierte Seiten verbergen */
    .pagination .page-item.disabled .page-link {
        color: #b0b0b0; /* Graue Farbe für deaktivierte Seiten */
        pointer-events: none; /* Verhindert, dass man auf die deaktivierten Seiten klickt */
    }



.btn-primary-square {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(2.5rem + 2px);
    width: calc(2.5rem + 2px);
    padding: 0;
    border-radius: 6px;
    background-color: var(--wine-primary); /* Bootstrap Primary */
    border: 1px solid var(--wine-primary);
    color: white;
    position: relative;
}

.btn-secondary-square-small {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(2.2rem + 2px);
    width: calc(2.2rem + 2px);
    padding: 0;
    border-radius: 6px;
    background-color: var(--wine-btn-secondary); /* Bootstrap Primary */
    border: 1px solid var(--wine-border);
    color: var(--wine-text-primary);
    position: relative;
}

    .btn-primary-square span, .btn-secondary-square-small span {
        font-size: 1.5rem;
        position: relative;
        top: -1px;
    }

    /* Optional, falls du hover vermeiden möchtest */
    .btn-primary-square:hover, .btn-secondary-square-small:hover {
        background-color: var(--wine-primary);
        border-color: var(--wine-primary);
        color: white;
    }
/* Normale Selects */
select.form-select-primary {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #880015;
    background-color: white;
    color: var(--bs-body-color); /* Bootstrap Textfarbe */
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.375rem;
    height: calc(2.5rem + 2px);
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

/* Hover für normale Selects */
select.form-select-primary:hover {
    border-color: #880015;
    background-color: #f8f9fa; /* optional leicht heller Hintergrund beim Hover */
}

/* Fokus für normale Selects */
select.form-select:focus {
    border-color: #880015;
    background-color: #f8f9fa; /* gleich wie hover */
    box-shadow: 0 0 0 0.2rem rgba(136, 0, 21, 0.25);
    outline: none;
}

/* Multiple Selects */
select.form-select[multiple] {
    overflow-y: auto;
    height: auto;
}

/* Hover und Fokus von Optionen bei Multiple */
select.form-select[multiple] option:focus,
select.form-select[multiple] option:active,
select.form-select[multiple] option:focus-visible {
    background-color: #880015;
    color: white;
}
/* Standard-Textfarbe */
.nav-pills .nav-link {
    color: var(--wine-text-primary) !important;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    /* Hover-Zustand */
    .nav-pills .nav-link:hover {
        background-color: var(--wine-btn-tertiary-hover);
        color: var(--wine-primary) !important;
    }

    /* Aktiver NavLink */
    .nav-pills .nav-link.active,
    .nav-pills .show > .nav-link {
        background-color: var(--wine-primary) !important;
        color: #fff !important;
    }

    /* Fokus-Zustand */
    .nav-pills .nav-link:focus {
        background-color: var(--wine-btn-tertiary-hover);
        color: var(--wine-primary);
        outline: none;
    }

.clickable {
    cursor: pointer;
    user-select: none; /* verhindert Markieren */
}