/* ==========================================================
   Reservierungsportal
   style.css
   Version 4.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;

}


/* ----------------------------------------------------------
   Titelbox
---------------------------------------------------------- */

.titel{

    position:absolute;

    top:50%;
    left:50%;

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

    width:calc(100% - 80px);

    max-width:760px;

    text-align:center;

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

    padding:22px 28px;

    border-radius:10px;

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

}

.titel h1{

    color:#b88a1b;

    font-size:2.3rem;

    margin-bottom:10px;

}

.titel p{

    margin-top:8px;

    line-height:1.55;

}


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

.login{

    margin-top:18px;

}

.login a{

    color:#24527a;

    text-decoration:none;

    font-weight:bold;

}

.login a:hover{

    color:#b88a1b;

}


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

nav{

    position:sticky;

    top:0;

    z-index:1000;

    background:white;

    padding:14px;

    text-align:center;

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

}

nav a{

    color:#24527a;

    text-decoration:none;

    font-weight:600;

    margin:0 18px;

    transition:.2s;

}

nav a:hover{

    color:#b88a1b;

}

nav a.active{

    color:#b88a1b;

}


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

main{

    max-width:1100px;

    margin:40px auto;

    padding:0 22px;

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

section{

    background:#ffffff;

    padding:24px;

    margin-bottom:40px;

    border-radius:10px;

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

}

section h2{

    border-left:6px solid #b88a1b;

    padding-left:12px;

    margin-bottom:18px;

    color:#444;

    font-size:1.4rem;

}


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

section ol{

    margin-top:22px;

}


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

iframe{

    width:100%;

    height:480px;

    border:none;

    display:block;

}


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

.kalenderlogin{

    margin-top:12px;

    text-align:right;

}

.kalenderlogin a{

    text-decoration:none;

    color:#24527a;

    font-weight:600;

    font-size:.95rem;

}

.kalenderlogin a:hover{

    color:#b88a1b;

}


/* ----------------------------------------------------------
   Listen
---------------------------------------------------------- */

ol,
ul{

    margin-left:28px;

}

li{

    margin-bottom:12px;

}

strong{

    color:#444;

}


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

footer{

    margin-top:50px;

    padding:28px;

    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
---------------------------------------------------------- */

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

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

@media (max-width:700px){

    /* Kopfbild */

    .headerbild{

        height:160px;

    }


    /* Titelbox */

    .titel{

        position:absolute;

        top:50%;

        left:20px;

        right:20px;

        width:auto;

        max-width:none;

        transform:translateY(-50%);

        padding:18px 22px;

    }


    /* Überschrift */

    .titel h1{

        font-size:1.65rem;

        margin-bottom:8px;

    }


    /* Beschreibung */

    .titel p{

        font-size:0.92rem;

        line-height:1.45;

        margin-top:6px;

    }


    /* Login-Link */

    .login{

        margin-top:12px;

    }


    /* Navigation */

    nav{

        padding:10px;

        line-height:2;

    }

    nav a{

        margin:0 8px;

        font-size:.95rem;

    }


    /* Seiteninhalt */

    main{

        padding:0 15px;

    }

    section{

        padding:18px;

    }


    /* Kalender */

    iframe{

        height:340px;

    }


    /* Nach-oben-Button */

    #topButton{

        width:40px;

        height:40px;

        right:15px;

        bottom:15px;

        font-size:18px;

    }

}