﻿/* /all/all.css */

/*
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
@import url('http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext');
*/

body {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
}

a {
    text-decoration: none;
    color: #880000;
}

a:hover {
    text-decoration: underline;
}

button {
    color: #880000;
    background: unset;
    border: 1px solid #880000;
    padding: 5px;
}

button:disabled {
    color: #bbbbbb;
    background: unset;
    border: 1px solid #bbbbbb;
}

hr {
    margin: 25px 0px;
}

/* Seite */
/*------------------------------------------------------*/

#BhmSeite {
    margin: 0px;
}

/* Seite mit 3 Spalten */
/*------------------------------------------------------*/

#BhmSeiteSpalte1 {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 225px;
    height: 100%;
    padding: 15px;
    text-align: center;
    background-color: #880000;
    color: #ffffff;
}

#BhmSeiteSpalte2 {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-left: 300px;
    margin-right: 270px;
}

#BhmSeiteSpalte3 {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0px;
    right: 0px;
    width: 225px;
    height: 100%;
    padding: 15px;
    background-color: #880000;
    color: #ffffff;
}

/* Scrollen in den Spalten */

.BhmSpalteScroll {
    overflow-y: auto;
    padding-bottom: 50px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.BhmSpalteScroll::-webkit-scrollbar {
    display: none;
}

/* Layout der 1. Spalte */

#BhmSeiteSpalte1 > div > div {
    margin-top: 10px;
}

#BhmSeiteSpalte1 a {
    color: #ffff00;
}

#BhmSeiteSpalte1 button {
    color: #ffff00;
    border-color: #ffff00;
    margin-top: 5px;
    width: 75%;
}

#BhmSpalte1Bild {
    width: auto;
    height: 225px;
    margin-top: 125px;
}

#BhmSpalte1Titel {
    font-weight: bold;
    font-size: large;
}

/* Layout der 2. Spalte */

/* Seiten-Navigation und Logo */

#BhmNavigation {
    position: fixed;
    top: 0px;
    left: 300px;
    right: 300px;
    background: rgba(255, 255, 255, 1.00);
    margin-bottom: 25px;
    padding-bottom: 5px;
}

#BhmNavPop {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px 0px;
    border-bottom: 1px solid #880000;
}

#BhmNavigation > div > div {
    margin-top: auto;
    margin-right: 1px;
}

#BhmNavigation a {
    padding: 1px 5px;
    color: #ffffff;
    background-color: #880000;
}

#BhmNavigation hr {
    margin: 5px 0px;
    color: #880000;
}

#BhmNavSwitch {
    display: none;
    width: 45px;
    height: 45px;
    height: 45px;
    width: 45px;
    margin-right: 5px;
    padding: 0px;
    font-size: x-large;
    color: #ffffff;
    background-color: #880000;
    ;
    border: unset;
}

/* Logo */

#BhmLogoBahamas {
    position: fixed;
    height: 50px;
    width: auto;
    margin-bottom: 5px;
}

#BhmLogoPalme {
    height: 75px;
    width: auto;
    margin-left: auto;
    margin-right: -20px;
    margin-bottom: -5px;
}

#BhmLogoPalmePhone {
    display: none;
    height: 45px;
    width: auto;
    margin-left: auto;
    margin-bottom: -10px;
}

#BhmSpalte2Top {
    margin-top: 125px;
}

#BhmSeiteSpalte2 > div.BhmSpalteScroll {
    width: 95%;
}

#BhmSeiteSpalte2 h1 {
    margin: 0px;
    margin-bottom: 50px;
}

/* Layout der 3. Spalte */

#BhmSeiteSpalte3 > div > div {
    margin-bottom: 50px;
}

#BhmSeiteSpalte3 hr {
    margin: 50px 0px;
}

#BhmSeiteSpalte3 h3 {
    margin-top: 0px;
}

#BhmSeiteSpalte3 a {
    color: #ffff00;
}

#BhmSeiteSpalte3 p {
    margin: 0px;
}

#BhmSeiteSpalte3 button {
    color: #ffff00;
    border-color: #ffff00;
    margin-top: 10px;
    width: 75%;
}

.BhmSpalte3Aktion {
    border: 1px solid;
    padding: 10px;
}

#BhmSpalte3Shop > div {
    display: flex;
    flex-direction: row;
    margin-bottom: 25px;
    border: 1px solid;
    padding: 10px;
}

#BhmSpalte3Shop > div > div {
    margin-top: auto;
    padding-left: 10px;
}

#BhmSpalte3Shop img {
    width: auto;
    height: 125px;
}

/* Allgemein verwendbare Message Box */

#BhmMsgBox {
    padding: 5px;
    width: 97%;
    height: 200px;
    white-space: nowrap;
}

@media screen and (min-width: 1500px) {
    body {
        font-size: large;
    }
    #BhmSeiteSpalte1 {
        width: 250px;
    }
    #BhmSeiteSpalte3 {
        width: 250px;
    }
    #BhmSeiteSpalte2 {
        margin-left: 375px;
        margin-right: 325px;
    }
    #BhmNavigation {
        left: 375px;
        right: 375px;
    }
    #BhmSpalte1Bild {
        height: 250px;
    }
}

@media screen and (min-width: 1800px) {
    body {
        font-size: x-large;
    }
    #BhmSeiteSpalte1 {
        width: 300px;
    }
    #BhmSeiteSpalte3 {
        width: 300px;
    }
    #BhmSeiteSpalte2 {
        margin-left: 425px;
        margin-right: 370px;
    }
    #BhmNavigation {
        left: 425px;
        right: 425px;
    }
    #BhmNavPop {
        padding-top: 20px;
    }
    #BhmSpalte1Bild {
        height: 300px;
        margin-top: 150px;
    }
    #BhmSpalte2Top {
        margin-top: 150px;
    }
}

@media screen and (min-width: 2500px) {
    body {
        font-size: xx-large;
    }
    #BhmSeiteSpalte1 {
        width: 450px;
    }
    #BhmSeiteSpalte3 {
        width: 450px;
    }
    #BhmSeiteSpalte2 {
        margin-left: 600px;
        margin-right: 525px;
    }
    #BhmNavigation {
        left: 600px;
        right: 600px;
    }
    #BhmNavPop {
        padding-top: 25px;
    }
    #BhmSeiteSpalte1 button {
        font-size: 1em;
    }
    #BhmLogoBahamas {
        height: 75px;
    }
    #BhmLogoPalme {
        height: 100px;
    }
    #BhmSpalte2Top {
        margin-top: 200px;
    }
    #BhmSpalte1Bild {
        height: 450px;
        margin-top: 200px;
    }
}

@media screen and (min-width: 3000px) {
    body {
        font-size: 3em;
    }
    #BhmNavPop {
        padding-top: 50px;
    }
    #BhmSeiteSpalte1 {
        width: 700px;
    }
    #BhmSeiteSpalte3 {
        width: 700px;
    }
    #BhmSeiteSpalte2 {
        margin-left: 900px;
        margin-right: 900px;
    }
    #BhmNavigation {
        left: 1000px;
        right: 1000px;
    }
    #BhmSpalte1Bild {
        height: 700px;
        margin-top: 250px;
    }
    #BhmSpalte2Top {
        margin-top: 250px;
    }
}

@media screen and (min-width: 4000px) {
    #BhmSeiteSpalte1 {
        width: 800px;
    }

    #BhmSeiteSpalte3 {
        width: 800px;
    }

    #BhmSeiteSpalte2 {
        margin-left: 1200px;
        margin-right: 1200px;
    }

    #BhmNavigation {
        left: 1200px;
        right: 1200px;
    }
}

/* Schmale Bildschirme */

@media screen and (max-width: 1100px) {
    #BhmNavigation a {
        font-size: small;
    }
}

@media screen and (max-width: 900px) {
    #BhmSeiteSpalte1 {
        display: none;
    }
    #BhmSeiteSpalte2 {
        margin-left: 5px;
        margin-right: 250px;
    }
    #BhmNavigation {
        left: 5px;
        right: 275px;
    }
    #BhmSeiteSpalte3 {
        width: 200px;
        font-size: small;
    }
}

@media screen and (max-width: 800px) {
    #BhmSeiteSpalte2 {
        margin-right: 225px;
        font-size: small;
    }
    #BhmNavigation {
        right: 250px;
    }
    #BhmSeiteSpalte3 {
        width: 175px;
        font-size: x-small;
    }
}

@media screen and (max-width: 700px) {
    #BhmSeiteSpalte3 {
        display: none;
    }
    #BhmSeite {
        margin: 5px;
    }
    #BhmSeiteSpalte2 {
        margin: 0px;
    }
    #BhmNavigation {
        width: 100%;
    }
    #BhmNavTitel {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        padding-bottom: 5px;
        border-bottom: 1px solid #880000;
    }
    #BhmNavSwitch {
        display: block;
    }
    #BhmLogoBahamas {
        position: unset;
        left: unset;
        height: 45px;
        margin: 0px;
    }
    #BhmLogoPalme {
        display: none;
    }
    #BhmLogoPalmePhone {
        display: block;
    }
    #BhmNavPop {
        display: none;
        justify-content: unset;
    }
    #BhmSpalte2Top {
        margin-top: 75px;
    }
}

@media screen and (max-width: 600px) {
    #BhmSpalte2Top {
        margin-top: 75px;
    }
}

@media screen and (max-width: 500px) {
    #BhmNavSwitch {
        width: 35px;
        height: 35px;
        font-size: medium;
    }
    #BhmLogoBahamas {
        height: 35px;
    }
    #BhmLogoPalmePhone {
        height: 35px;
    }
    #BhmSpalte2Top {
        margin-top: 60px;
    }
}

@media screen and (max-width: 400px) {
    #BhmNavPop {
        flex-direction: column;
    }
    #BhmNavigation > div > div {
        width: 100%;
        margin: 0px;
        background-color: #880000;
    }
}

@media screen and (max-width: 300px) {
}

/*
    &#xe802;
☰	\u2315
☰	9776	2630	 	TRIGRAM FOR HEAVEN
✂	9986	2702	 	BLACK SCISSORS
✓	10003	2713	 	CHECK MARK
✔	10004	2714	 	HEAVY CHECK MARK
✕	10005	2715	 	MULTIPLICATION X
✖	10006	2716	 	HEAVY MULTIPLICATION X❌	10060	274C	 	CROSS MARK
❮	10094	276E	 	HEAVY LEFT-POINTING ANGLE QUOTATION MARK ORNAMENT
❯	10095	276F	 	HEAVY RIGHT-POINTING ANGLE QUOTATION MARK ORNAMENT
➕	10133	2795	 	HEAVY PLUS SIGN
➖	10134	2796	 	HEAVY MINUS SIGN
⏴	&#9204;		\23F4	&#x23F4;	U+23F4
⏵	&#9205;		\23F5	&#x23F5;	U+23F5
⏶	&#9206;		\23F6	&#x23F6;	U+23F6
⏷	&#9207;		\23F7	&#x23F7;	U+23F7
*/
