/* ──────────────────────────────────────────
   Hauptbox
────────────────────────────────────────── */

.voo-gesuch-groupsrch {
    max-width: 580px;
    margin: auto;
    box-sizing: border-box;

    background: var(--base-color);
    border: 1px solid var(--accent-dust);

    color: var(--maincolor-text);
    font-family: 'Roboto', sans-serif;
}


/* ──────────────────────────────────────────
   Header
────────────────────────────────────────── */

.voo-gesuch-header {
    padding: 24px 20px 8px;

    background: var(--base-color);
    background-image: var(--light-background);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    text-align: center;

    font-family: var(--font-heading);
    font-size: 40px;
    line-height: 1.1;
    text-transform: lowercase;
    letter-spacing: .04em;

    color: var(--maincolor-text);
}

.voo-gesuch-headersmall {
    margin-top: 6px;

    font-family: 'Roboto', sans-serif;
    font-size: 10px;

    text-transform: uppercase;
    letter-spacing: .15em;

    color: var(--maincolor-text);
    opacity: .75;
}


/* ──────────────────────────────────────────
   Charakterblock
────────────────────────────────────────── */

.voo-gesuch-charblock-wrapper {
    margin: 22px 20px;
}

.voo-gesuch-charblock-title {

    font-family: var(--font-heading);
    font-size: 30px;
    line-height: 1.1;

    color: var(--maincolor-text);

    text-align: center;
    text-transform: lowercase;

    padding-bottom: 10px;
    margin-bottom: 8px;

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

.voo-gesuch-charblock-titlesmall {

    margin-bottom: 22px;

    font-family: 'Roboto', sans-serif;
    font-size: 10px;

    letter-spacing: .15em;
    text-transform: uppercase;

    color: var(--maincolor-text);
    opacity: .7;

    text-align: center;
}

.voo-gesuch-charblock {

    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: stretch;
}


/* ──────────────────────────────────────────
   Linke Spalte
────────────────────────────────────────── */

.voo-gesuch-char-left {

    flex: 0 0 150px;

    display: flex;
    flex-direction: column;
}

.voo-gesuch-char-left img {

    width: 150px;
    height: 150px;

    object-fit: cover;
}


/* Fakten unter Bild */

.voo-gesuch-char-facts {

    width: 150px;
    margin-top:12px;

    display: flex;
    flex-direction: column;
    gap: 5px;

    font-size: 10px;
    line-height: 1.5;
}

.voo-gesuch-char-fact-row {

    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.voo-gesuch-char-fact-row b {

    color: var(--maincolor-text);
    font-weight: 600;
}

.voo-gesuch-char-fact-row span {

    color: var(--maincolor-text);
    opacity: .75;

    text-align: right;
}


/* ──────────────────────────────────────────
   Textbereich
────────────────────────────────────────── */

.voo-gesuch-char-right {

    flex: 1;
    min-width: 280px;

    display: flex;
    flex-direction: column;

    max-height: 245px;
}

.voo-gesuch-textbox {

    flex: 1;

    padding-left: 18px;
    padding-right: 4px;

    border-left: 1px solid var(--accent-dust);

    box-sizing: border-box;

    overflow-y: auto;

    font-size: 13px;
    line-height: 1.8;
    text-align: justify;

    color: var(--maincolor-text);
}


/* ──────────────────────────────────────────
   Untertitel
────────────────────────────────────────── */

.voo-gesuch-subtitle {

    margin-top: 15px;
    margin-bottom: 10px;

    padding-bottom: 5px;

    border-bottom: 1px solid var(--accent-dust);

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .15em;

    color: var(--maincolor-text);
}


/* ──────────────────────────────────────────
   Divider
────────────────────────────────────────── */

.voo-gesuch-divider {

    width: 120px;
    height: 1px;

    margin: 30px auto;

    background: var(--accent-dust);

    font-size: 0;
}


/* ──────────────────────────────────────────
   Boardblock
────────────────────────────────────────── */

.voo-gesuch-board-block {

    margin: 20px;

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

    align-items: stretch;
}


/* Selftext */

.voo-gesuch-selftext {

    flex: 1;

    max-height: 270px;

    padding-left: 18px;
    padding-right: 4px;

    border-left: 1px solid var(--accent-dust);

    overflow-y: auto;

    box-sizing: border-box;

    font-size: 13px;
    line-height: 1.8;
    text-align: justify;

    color: var(--maincolor-text);
}


/* Factsbox */

.voo-gesuch-factsbox {

    flex: 0 0 180px;

    max-height: 270px;

    display: flex;
    flex-direction: column;

    padding-left: 18px;

    border-left: 1px solid var(--accent-dust);

    overflow-y: auto;

    box-sizing: border-box;

    font-size: 10px;
    line-height: 1.6;

    color: var(--maincolor-text);
}

.voo-gesuch-fact {

    font-size: 10px;
}

.voo-gesuch-fact a {

    color: var(--maincolor-text);
    text-decoration: none;
    transition: .2s;
}

.voo-gesuch-fact a:hover {

    opacity: .6;
}


/* Links */

.voo-gesuch-factsbox .links {

    display: block;

    width: 75%;

    padding: 8px 10px !important;

    background: rgba(0,0,0,.03);

    border-left: 2px solid var(--accent-dust);

    color: var(--maincolor-text);

    text-decoration: none;

    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 9px;

    transition: .2s;
}

.voo-gesuch-factsbox .links:hover {

    background: rgba(0,0,0,.06);
}


/* ──────────────────────────────────────────
   Scrollbars
────────────────────────────────────────── */

.voo-gesuch-textbox::-webkit-scrollbar,
.voo-gesuch-selftext::-webkit-scrollbar,
.voo-gesuch-factsbox::-webkit-scrollbar {

    width: 5px;
}

.voo-gesuch-textbox::-webkit-scrollbar-track,
.voo-gesuch-selftext::-webkit-scrollbar-track,
.voo-gesuch-factsbox::-webkit-scrollbar-track {

    background: transparent;
}

.voo-gesuch-textbox::-webkit-scrollbar-thumb,
.voo-gesuch-selftext::-webkit-scrollbar-thumb,
.voo-gesuch-factsbox::-webkit-scrollbar-thumb {

    background: var(--accent-dust);
    border-radius: 20px;
}


/* ──────────────────────────────────────────
   Footer
────────────────────────────────────────── */

.voo-gesuch-footer {
    height: 32px;

    background: var(--base-color);
    background-image: var(--light-background);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* ──────────────────────────────────────────
   Allgemeine Formatierung
────────────────────────────────────────── */

.voo-gesuch-groupsrch b {

    color: var(--maincolor-text);
    font-weight: 600;
}

.voo-gesuch-groupsrch i {

    font-style: italic;
    opacity: .85;
}