/* ==========================================================
   Reservierungsportal
   style.css
   Version 5.0
   ========================================================== */


/* ----------------------------------------------------------
   Grundeinstellungen
---------------------------------------------------------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Segoe UI",Arial,Helvetica,sans-serif;
    background:#f5f5f2;
    color:#333;
    line-height:1.6;
}


/* ----------------------------------------------------------
   Kopfbereich
---------------------------------------------------------- */

header{
    position:relative;
}

.headerbild{
    width:100%;
    height:220px;
    display:block;
    object-fit:cover;
}


/* ----------------------------------------------------------
   Kopfbox
---------------------------------------------------------- */

.kopf{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:88%;
    max-width:760px;

    background:rgba(255,255,255,.84);

    border-radius:10px;

    padding:20px 30px;

    text-align:center;

    box-shadow:0 4px 12px rgba(0,0,0,.18);

}


/* ----------------------------------------------------------
   Überschrift
---------------------------------------------------------- */

.kopf h1{

    color:#b88a1b;

    font-size:2.2rem;

    margin-bottom:10px;

}


/* ----------------------------------------------------------
   Beschreibung
---------------------------------------------------------- */

.kopf p{

    margin-top:8px;

    line-height:1.55;

}


/* ----------------------------------------------------------
   Login
---------------------------------------------------------- */

.login{

    margin-top:16px;

}

.login a{

    text-decoration:none;

    color:#24527a;

    font-weight:bold;

}

.login a:hover{

    color:#b88a1b;

}


/* ----------------------------------------------------------
   Navigation
---------------------------------------------------------- */

nav{

    position:sticky;

    top:0;

    z-index:1000;

    background:white;

    text-align:center;

    padding:13px;

    box-shadow:0 2px 6px rgba(0,0,0,.08);

}

nav a{

    text-decoration:none;

    color:#24527a;

    font-weight:600;

    margin:0 16px;

    transition:.2s;

}

nav a:hover{

    color:#b88a1b;

}

nav a.active{

    color:#b88a1b;

}


/* ----------------------------------------------------------
   Hauptbereich
---------------------------------------------------------- */

main{

    max-width:1100px;

    margin:30px auto;

    padding:0 20px;

}
/* ----------------------------------------------------------
   Bereiche
---------------------------------------------------------- */

section{

    background:#ffffff;

    padding:20px;

    margin-bottom:24px;

    border-radius:10px;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}


/* ----------------------------------------------------------
   Überschriften
---------------------------------------------------------- */

section h2{

    border-left:6px solid #b88a1b;

    padding-left:12px;

    margin-bottom:16px;

    color:#444;

    font-size:1.30rem;

}


/* ----------------------------------------------------------
   Abstand vor nummerierten Listen
---------------------------------------------------------- */

section ol{

    margin-top:18px;

}

ol,
ul{

    margin-left:28px;

    margin-bottom:10px;

}

li{

    margin-bottom:10px;

}

strong{

    color:#444;

}


/* ----------------------------------------------------------
   Kalender
---------------------------------------------------------- */

iframe{

    width:100%;

    height:480px;

    border:none;

    display:block;

}


/* ----------------------------------------------------------
   Login unter jedem Kalender
---------------------------------------------------------- */

.kalenderlogin{

    margin-top:8px;

    margin-bottom:0;

    text-align:right;

}

.kalenderlogin a{

    text-decoration:none;

    color:#24527a;

    font-weight:600;

    font-size:.95rem;

}

.kalenderlogin a:hover{

    color:#b88a1b;

}


/* ----------------------------------------------------------
   Footer
---------------------------------------------------------- */

footer{

    margin-top:40px;

    padding:24px;

    text-align:center;

    color:#777;

    font-size:.9rem;

    border-top:1px solid #dddddd;

}


/* ----------------------------------------------------------
   Nach-oben-Button
---------------------------------------------------------- */

#topButton{

    position:fixed;

    right:25px;

    bottom:25px;

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#b88a1b;

    color:white;

    font-size:22px;

    cursor:pointer;

    display:none;

    box-shadow:0 3px 8px rgba(0,0,0,.25);

    transition:.2s;

}

#topButton:hover{

    background:#24527a;

}
/* ----------------------------------------------------------
   Smartphone / Tablet
---------------------------------------------------------- */

@media (max-width:700px){

    /* Kopfbild */

    .headerbild{

        height:170px;

    }


    /* Kopfbox */

    .kopf{

        position:absolute;

        top:50%;

        left:18px;

        right:18px;

        width:auto;

        max-width:none;

        transform:translateY(-50%);

        padding:16px 20px;

        border-radius:8px;

    }


    /* Überschrift */

    .kopf h1{

        font-size:1.45rem;

        margin-bottom:6px;

    }


    /* Beschreibung */

    .kopf p{

        font-size:.90rem;

        line-height:1.45;

        margin-top:6px;

    }


    /* Login */

    .login{

        margin-top:10px;

    }

    .login a{

        font-size:.95rem;

    }


    /* Navigation */

    nav{

        padding:10px;

        line-height:1.9;

    }

    nav a{

        margin:0 8px;

        font-size:.92rem;

    }


    /* Hauptbereich */

    main{

        padding:0 12px;

    }

    section{

        padding:18px;

        margin-bottom:18px;

    }


    /* Kalender */

    iframe{

        height:340px;

    }


    /* Nach-oben-Button */

    #topButton{

        width:40px;

        height:40px;

        right:15px;

        bottom:15px;

        font-size:18px;

    }

}