/* Orange Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
    --primary: #fb8c00;
    --primary-hover: #f57c00;
    --primary-focus: rgba(251, 140, 0, 0.125);
    --primary-inverse: #FFF;
}

/* Orange Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #fb8c00;
        --primary-hover: #ff9800;
        --primary-focus: rgba(251, 140, 0, 0.25);
        --primary-inverse: #FFF;
    }
}

/* Orange Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
    --primary: #fb8c00;
    --primary-hover: #ff9800;
    --primary-focus: rgba(251, 140, 0, 0.25);
    --primary-inverse: #FFF;
}

/* Orange (Common styles) */
:root {
    --form-element-active-border-color: var(--primary);
    --form-element-focus-color: var(--primary-focus);
    --switch-color: var(--primary-inverse);
    --switch-checked-background-color: var(--primary);
}

html[data-theme=light] body {
    background-color: #E0E0E0;
}
h1 {
    margin:.5rem 0;
    color: #FFFFFF;
    text-shadow: 2px 2px 10px #353535;
}
h2, hr {
    margin-bottom:1.5rem;
}
header {
    padding:.5rem 1.5rem !important;
    padding-top:.5rem !important;
    background-image: url("https://urlaub-klick.de/static/header.jpg");
    background-size: cover;
    border-bottom: 15px solid #fb8c00;
}
html[data-theme=light] header {
    background-color: #F3F3F3;
}
html[data-theme=dark] header {
    background-color: #303030;
}
main {
    padding:2rem 1.5rem 3rem 1.5rem !important;
}
html[data-theme=light] main {
    background-color: #ffffff;
}
html[data-theme=dark] main {
    background-color: #353535;
}
footer {
    padding:2rem 1.5rem !important;
    font-size: 90%;
    text-align: center;
    line-height: 200%;
}
html[data-theme=light] footer {
    background-color: #fafafa;
}
html[data-theme=dark] footer {
    background-color: #303030;
}
#themeswitcher {
    display: block;
    margin: .5rem 1rem;
    float: right;
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 29.107 29.107' style='enable-background:new 0 0 29.107 29.107;' xml:space='preserve'><g><g id='c151_half_moon'><path d='M29.106,14.551c0-0.03-0.004-0.059-0.004-0.09C29.054,6.467,22.56,0,14.552,0C6.546,0,0.051,6.471,0.002,14.468 c0,0.029-0.001,0.054-0.001,0.083l0,0l0,0c0,8.039,6.517,14.556,14.551,14.556C22.59,29.106,29.106,22.59,29.106,14.551 L29.106,14.551L29.106,14.551z M2.078,14.551c0-6.875,5.597-12.472,12.474-12.472v24.949C7.675,27.028,2.078,21.431,2.078,14.551z'/></g><g id='Capa_1_121_'></g></g></svg>");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 2rem 2rem;
    width:2.4rem !important;
    height:2.4rem !important;
    border-radius: 1.2rem;
    background-color: #FFFFFF;
    border-color:#FFFFFF;
}