/* =========================================================
   RESERVIERUNGEN – GRUNDLAYOUT
   ========================================================= */

.reservations_page {
    --res-bg: #160d08;
    --res-panel: #1c100a;
    --res-panel-soft: #24140c;
    --res-panel-light: #302014;
    --res-border: #50321d;
    --res-border-soft: #3f2818;
    --res-accent: #98602d;
    --res-accent-light: #c58b45;
    --res-gold: #d6a363;
    --res-gold-light: #ead0a1;
    --res-text: #d9c4a5;
    --res-muted: #9d856b;

    width: 100%;
    margin: 20px auto;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;

    color: var(--res-text);
    background: var(--res-bg);

    border-top: 1px solid var(--res-border);
    border-right: 1px solid var(--res-border-soft);
    border-bottom: 1px solid var(--res-border);
    border-left: 4px solid #8c572a;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.30),
        inset 0 0 35px rgba(0, 0, 0, 0.18);
}

.reservations_page,
.reservations_page *,
.reservations_page *::before,
.reservations_page *::after {
    box-sizing: border-box;
}


/* =========================================================
   HAUPTÜBERSCHRIFT
   ========================================================= */

.reservations_page .reservations-headline.thead {
    position: relative;
    width: 100%;
    min-height: 52px;
    padding: 15px 22px;

    display: flex;
    align-items: center;

    color: var(--res-gold);

    background:
        linear-gradient(
            90deg,
            rgba(58, 36, 22, 0.96),
            rgba(36, 20, 12, 0.96)
        );

    border: 0;
    border-bottom: 1px solid #68401f;
}

.reservations-headline b {
    width: 100%;

    display: flex;
    align-items: center;
}

.reservations-headline b::after {
    content: "";
    height: 1px;
    flex: 1;
    margin-left: 18px;

    background:
        linear-gradient(
            90deg,
            rgba(197, 139, 69, 0.55),
            transparent
        );
}

.reservations-headline h4 {
    display: block;
    margin: 0;
    padding: 0;

    color: var(--res-gold);

    font-family: Cinzel, Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 2.2px;
    text-align: left;
    text-transform: uppercase;
}


/* =========================================================
   BESCHREIBUNG
   ========================================================= */

.reservations_page .reservations-desc {
    width: 100%;
    padding: 20px 24px;

    color: var(--res-text);

    background:
        linear-gradient(
            110deg,
            rgba(197, 139, 69, 0.025),
            transparent 50%
        ),
        rgba(28, 16, 10, 0.88);

    border: 0;
    border-bottom: 1px solid var(--res-border);

    font-family: Georgia, serif;
    font-size: 13px;
    line-height: 180%;
    text-align: justify;
}

.reservations-desc h1 {
    display: block;
    margin: 0;
    padding: 0;

    color: var(--res-text);

    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 180%;
}

.reservations-desc strong,
.reservations-desc b {
    color: var(--res-gold-light);
}

.reservations-desc a:link,
.reservations-desc a:visited,
.reservations-desc a:active {
    color: #d1a064;
}

.reservations-desc a:hover {
    color: #f0d3a7;
}


/* =========================================================
   FORMULARBEREICH
   ========================================================= */

.reservations_formularPage {
    width: 100%;
    padding: 20px 24px;

    background:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 10px,
            rgba(197, 139, 69, 0.012) 10px,
            rgba(197, 139, 69, 0.012) 11px
        ),
        #1a0f09;

    border-bottom: 1px solid var(--res-border);
}

.reservations_formularPage form {
    width: min(720px, 75%);
    margin: 0 auto;
    padding: 18px;

    color: var(--res-text);
    background: rgba(28, 16, 10, 0.88);

    border-top: 1px solid var(--res-border);
    border-right: 1px solid var(--res-border-soft);
    border-bottom: 1px solid var(--res-border);
    border-left: 3px solid var(--res-accent);

    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   FORMULAR IM THREAD
   ========================================================= */

.reservations_formularShowthread {
    width: 100%;
}

.reservations_formularShowthread form {
    width: 100%;
    margin: 12px auto;
    padding: 18px;

    color: var(--res-text);
    background: rgba(28, 16, 10, 0.86);

    border-top: 1px solid var(--res-border);
    border-right: 1px solid var(--res-border-soft);
    border-bottom: 1px solid var(--res-border);
    border-left: 3px solid var(--res-accent);
}


/* =========================================================
   FORMULARZEILEN
   ========================================================= */

.reservations_formular-input {
    width: 100%;
    margin-bottom: 14px;

    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 14px;
}

.reservations_formular-input:last-child {
    margin-bottom: 0;
}

.reservations_formular-label {
    width: 100%;
    margin: 0 0 7px;
    padding: 0;

    display: block;

    color: #be9059;

    font-family: Cinzel, Georgia, serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 145%;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.reservations_formular-select,
.reservations_formular-field {
    width: 100%;
    min-width: 0;
}

.reservations_formular-select select,
.reservations_formular-field input.textbox,
.reservations_formular-field input[type="text"],
.reservations_formular-field input[type="date"],
.reservations_formular-field input[type="number"],
.reservations_formular-field textarea,
.reservations_formular-field .select2-container {
    width: 100%;
    max-width: 100%;
}


/* =========================================================
   FORMULARFELDER
   ========================================================= */

.reservations_formular-field input.textbox,
.reservations_formular-field input[type="text"],
.reservations_formular-field input[type="date"],
.reservations_formular-field input[type="number"],
.reservations_formular-select select,
.reservations_formular-field textarea {
    min-height: 38px;
    margin: 0;
    padding: 9px 11px;

    color: #dbc4a6;
    background: #160d08;

    border: 1px solid #57361f;
    border-radius: 0;

    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.reservations_formular-field textarea {
    min-height: 110px;

    resize: vertical;

    font-family: Georgia, serif;
    line-height: 165%;
}

.reservations_formular-field input::placeholder,
.reservations_formular-field textarea::placeholder {
    color: #75614d;
}

.reservations_formular-field input:focus,
.reservations_formular-select select:focus,
.reservations_formular-field textarea:focus {
    border-color: #9e6935;

    box-shadow:
        0 0 0 1px rgba(197, 139, 69, 0.18);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.reservations_page input.button,
.reservations_page button,
.reservations_page input[type="submit"] {
    min-height: 34px;
    padding: 8px 14px;

    color: #d8af78;
    background: #2f1c10;

    border: 1px solid #70451f;
    border-radius: 0;

    font-family: Cinzel, Georgia, serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.8px;
    text-transform: uppercase;

    cursor: pointer;
}

.reservations_page input.button:hover,
.reservations_page button:hover,
.reservations_page input[type="submit"]:hover {
    color: #160d08;
    background: #d1a267;
    border-color: #d1a267;
}


/* =========================================================
   SELECT2
   ========================================================= */

.reservations_page .select2-container {
    width: 100% !important;
    max-width: 100%;
}

.reservations_page .select2-container .select2-choice,
.reservations_page .select2-container-multi .select2-choices {
    min-height: 38px;
    padding: 4px 7px;

    color: #dbc4a6;
    background: #160d08;

    border: 1px solid #57361f;
    border-radius: 0;
    box-shadow: none;
}

.reservations_page
.select2-container-multi
.select2-choices
.select2-search-choice {
    margin: 3px;
    padding: 6px 8px 6px 20px;

    color: #d9bd98;
    background: #342013;

    border: 1px solid #68401f;
    border-radius: 0;
    box-shadow: none;

    font-size: 12px;
}

.reservations_page
.select2-container-multi
.select2-choices
.select2-search-field input {
    color: #dbc4a6 !important;
    background: transparent !important;

    font-size: 13px !important;
}


/* =========================================================
   AUSGABEBEREICH
   ========================================================= */

.reservations_page-container {
    width: 100%;
    padding: 22px 24px 24px;

    color: var(--res-text);

    background:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 10px,
            rgba(197, 139, 69, 0.012) 10px,
            rgba(197, 139, 69, 0.012) 11px
        ),
        #1a0f09;

    border: 0;
}


/* =========================================================
   RESERVIERUNGSLISTEN
   ========================================================= */

.reservationsSingle,
.reservations-genderflex {
    width: 100%;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 9px;
}

.reservations-reservation {
    width: 100%;
}

.reservations_types {
    width: 100%;
    margin-bottom: 17px;
}

.reservations_types:last-child {
    margin-bottom: 0;
}


/* =========================================================
   KATEGORIE / GESCHLECHT
   ========================================================= */

.reservations-genderline {
    width: 100%;
    margin-bottom: 8px;
    padding: 9px 12px;

    color: #c99559;
    background: rgba(58, 36, 22, 0.60);

    border-top: 1px solid rgba(197, 139, 69, 0.18);
    border-right: 1px solid rgba(197, 139, 69, 0.10);
    border-bottom: 1px solid rgba(197, 139, 69, 0.18);
    border-left: 3px solid #875326;

    font-family: Cinzel, Georgia, serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 145%;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}


/* =========================================================
   EINZELNER EINTRAG
   ========================================================= */

.reservations_entry {
    position: relative;
    margin: 0 0 7px;
    padding: 10px 12px;

    color: #c9b092;
    background:
        linear-gradient(
            110deg,
            rgba(197, 139, 69, 0.025),
            transparent 60%
        ),
        rgba(36, 20, 12, 0.74);

    border-top: 1px solid rgba(197, 139, 69, 0.17);
    border-right: 1px solid rgba(197, 139, 69, 0.09);
    border-bottom: 1px solid rgba(197, 139, 69, 0.17);
    border-left: 2px solid #70451f;

    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 155%;
}

.reservations_entry:last-child {
    margin-bottom: 0;
}

.reservations_entry a:link,
.reservations_entry a:visited,
.reservations_entry a:active {
    color: #d1a064;
}

.reservations_entry a:hover {
    color: #efd0a3;
}


/* =========================================================
   SHOWTHREAD-AUFTEILUNG
   ========================================================= */

.reservations_showthread {
    width: 100%;
    padding: 22px 24px 24px;

    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 18px;
    align-items: start;

    background:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 10px,
            rgba(197, 139, 69, 0.012) 10px,
            rgba(197, 139, 69, 0.012) 11px
        ),
        #1a0f09;
}

.reservations_showthread-guide,
.reservations_showthread-output {
    width: 100%;
    min-width: 0;
}

.reservations_showthread-desc {
    width: 100%;
    padding: 17px 19px;

    color: #d0b99a;
    background: rgba(28, 16, 10, 0.86);

    border-top: 1px solid var(--res-border);
    border-right: 1px solid var(--res-border-soft);
    border-bottom: 1px solid var(--res-border);
    border-left: 3px solid var(--res-accent);

    font-family: Georgia, serif;
    font-size: 13px;
    line-height: 175%;
    text-align: justify;
}


/* =========================================================
   TABS
   ========================================================= */

.reservationTab {
    width: 100%;
    margin-bottom: 16px;

    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    border-bottom: 1px solid rgba(197, 139, 69, 0.18);
}

.reservationTablinks {
    min-height: 38px;
    margin: 0;
    padding: 9px 14px;

    color: #bea27e;
    background: rgba(36, 20, 12, 0.74);

    border: 1px solid rgba(197, 139, 69, 0.14);
    border-bottom: 0;
    border-radius: 0;

    font-family: Cinzel, Georgia, serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 145%;
    letter-spacing: 0.6px;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.reservationTablinks:hover {
    color: #e3bd88;
    background: #302014;
    border-color: #70451f;
}

.reservationTablinks.active {
    color: var(--res-gold-light);

    background:
        linear-gradient(
            90deg,
            rgba(58, 36, 22, 0.94),
            rgba(36, 20, 12, 0.92)
        );

    border-color: #98602d;
    border-bottom-color: #302014;

    font-weight: 600;
}

.reservationTabcontent {
    display: none;
    width: 100%;
}


/* =========================================================
   EIGENE UND GESPERRTE RESERVIERUNGEN
   ========================================================= */

.reservations_ownreservations {
    width: 100%;
    margin-bottom: 20px;
}

.reservations_ownreservations-types,
.reservations_blockedreservations-types {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.reservations_ownreservationsBit,
.reservations_blockedreservationsBit {
    width: 100%;
    min-width: 0;
    padding: 14px;

    color: var(--res-text);
    background: rgba(28, 16, 10, 0.84);

    border-top: 1px solid var(--res-border);
    border-right: 1px solid var(--res-border-soft);
    border-bottom: 1px solid var(--res-border);
    border-left: 3px solid var(--res-accent);
}

.reservations_ownreservations-title,
.reservations_blockedreservations-title {
    margin: 0 0 11px;
    padding: 0 0 9px;

    color: #c99559;

    border-bottom: 1px solid rgba(197, 139, 69, 0.16);

    font-family: Cinzel, Georgia, serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 145%;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}


/* =========================================================
   BANNER / HINWEIS
   ========================================================= */

.reservationsBanner {
    margin: 0;

    float: right;

    color: #bd905a;

    font-family: Georgia, serif;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 0.3px;
}


/* =========================================================
   FEHLERMELDUNGEN
   ========================================================= */

.reservations_page + .error,
.reservations_error,
#reservations_error {
    margin: 12px 0;
    padding: 12px 15px;

    color: #e0c3a0;
    background: #351b13;

    border: 1px solid #75402f;
    border-left: 4px solid #a95a43;

    font-size: 13px;
    line-height: 160%;
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

.reservations_page * {
    scrollbar-width: thin;
    scrollbar-color: #875326 #160d08;
}

.reservations_page *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.reservations_page *::-webkit-scrollbar-track {
    background: #160d08;
}

.reservations_page *::-webkit-scrollbar-thumb {
    background: #875326;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 900px) {

    .reservations_formularPage form {
        width: 100%;
    }

    .reservations_showthread {
        grid-template-columns: 1fr;
    }

    .reservations_ownreservations-types,
    .reservations_blockedreservations-types {
        grid-template-columns: 1fr;
    }

}

@media screen and (max-width: 650px) {

    .reservations_formular-input {
        flex-wrap: wrap;
        gap: 10px;
    }

    .reservations_page-container,
    .reservations_formularPage,
    .reservations_showthread {
        padding-right: 14px;
        padding-left: 14px;
    }

    .reservationTab {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        border-bottom: 0;
    }

    .reservationTablinks {
        width: 100%;
        border-bottom: 1px solid rgba(197, 139, 69, 0.14);
    }

}

@media screen and (max-width: 450px) {

    .reservations-headline h4 {
        font-size: 15px;
        letter-spacing: 1.5px;
    }

    .reservations_page .reservations-headline.thead {
        padding: 13px 15px;
    }

    .reservations_page .reservations-desc {
        padding: 16px;

        font-size: 12px;
        line-height: 175%;
        text-align: left;
    }

    .reservations-desc h1 {
        font-size: 12px;
        line-height: 175%;
    }

    .reservations_formularPage form,
    .reservations_formularShowthread form {
        padding: 13px;
    }

    .reservationTab {
        grid-template-columns: 1fr;
    }

    .reservations_showthread-desc {
        padding: 14px;

        font-size: 12px;
        text-align: left;
    }

}