@import url(./fonts.css);

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    background: #eee9e1;
    min-width: 300px;
    font-family: serif;
    font-size: 1rem;
}

header, section, footer {
    margin: 0 auto;
    padding: 0 5px;
    width: 100%;
}

header {
    margin-block: 0 1em;
}

section {
    margin-block-start: 1em;
}

footer {
    margin-top: 30px;
    padding: 5px 0 15px 0;
    border-top: 1px solid #867035;
    color: #262626;
}

h1, h2, h3 {
    font-family: 'Clicker Script', cursive;
    font-weight: normal;
}
h4, h5, h6 {
    font-family: serif;
    font-weight: bold;
    margin-block-end: .5em;
}

h1 {
    font-size: 2.4em;
    text-align: center;
    margin-block: 1rem .2em;
}

h2 {
    font-size: 2em;
    text-align: left;
    margin-block: 0.5em 0;
}

h3 {
    font-size: 1.8em;
    text-align: left;
    margin: 0.5em 0 0;
}

h4 {
    font-size: 1.4em;
}
h5 {
    font-size: 1.2em;
}
h6 {
    font-size: 1.1em;
}

p {
    margin-block: 0.5em;
}

a {
    color: #514320;
    text-decoration: none;
}

table {
    margin: 0 auto;
}

table, table tr, table td {
    border: none;
}

table td {
    padding: 2px;
}

#Telefon table tr th {
    text-align: right;
}

#Telefon table tr th {
    text-align: left;
}

form {
    padding: 5px;
}

form label {
    margin: 0 auto;
    display: inline-block;
    font-weight: bold;
    cursor: pointer;
}

form input, form select, form textarea {
    margin: 0 auto;
    display: inline-block;
    padding: 2px;
    background: #eee9e1;
    border: 1px solid #867035;
    width: 100%;
    font-size: 1.1em;
}

form textarea {
    min-height: 100px;
}

form input[type=checkbox] {
    width: auto;
    margin: 0 5px 0 0;
}

.button {
    padding: 5px;
    margin: 2px;
    border: 1px solid #867035;
    border-radius: 5px;
    text-align: center;
}

form input[type=submit], form input[type=button], .button {
    box-shadow: 2px 2px 1px #514320;
    background-color: #00000000;
    cursor: pointer;
}

form input[type=submit]:hover, form input[type=button]:hover, .button:hover, form input[type="radio"]:checked+label {
    background-color: #00000010;
    transform: translateX(1px) translateY(1px);
    box-shadow: 1px 1px 1px #514320;
}


img {
    max-width: 100%;
}

/*************************/
/*         ALERTS        */
/*************************/

.danger, .error, .success, .info, .warning  {
    display: block;
    margin: .5em auto;
    padding: .5em;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    /* max-width: 1000px; */
    border: 1px solid;
    /*border-radius: 15px;*/
}
.danger a, .error a, .success a, .info a, .warning  a {
    color: inherit;
    text-decoration: underline;
}
.success { /* green */
    color: #3c763d;
    background: #dff0d8;
    background: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
    border-color: #b2dba1;
}
.info  { /* blue */
    color: #31708f;
    background: #d9edf7;
    background: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
    border-color: #9acfea;
}
.warning  { /* orange */
    color: #8a6d3b;
    background: #fcf8e3;
    background: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
    border-color: #f5e79e;
}
.danger, .error { /* red */
    color: #a94442;
    background: #f2dede;
    background: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
    border-color: #dca7a7;
}


.nav {
    display: block;
    text-align: center;
    position: relative;
}

.nav .mobile {
    display: block;
    margin: 0;
    padding: 0.6em 0;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid #867035;
    border-radius: 10px;
    transition: border-radius 50ms linear 200ms;
}

.nav:hover .mobile {
    border-radius: 10px 10px 0 0;
    transition: border-radius 50ms linear 0ms;
}

.nav .navlinks {
    position: absolute;
    left: 0;
    right: 0;
    background-color: #eee9e1;

    max-height: 0;
    display: block;
    overflow: hidden;
    transition: max-height 200ms linear 50ms;
}

.nav:hover .navlinks {
    display: block;
    max-height: 500px;
}

.nav .navlinks a {
    display: block;
    cursor: pointer;
    text-decoration: none;
    margin: 0;
    padding: 0.6em 0;
    width: 100%;
    border: 1px solid #867035;
    border-top: 0;
    border-radius: 0;
}

.nav:hover > a {
    background-color: #b7b1a1;
}

.nav:hover a:hover {
    background-color: #b7b1a1;
}


.nav .navlinks a:last-child {
    border-radius: 0 0 10px 10px;
}

a.toplink {
    display: block;
    text-align: right;
    margin: -2em 5px 1em auto;
}

a.toplink::after {
    content: "↑";
}

.karte {
    width: 100%;
    background-size: cover;
    background: url("../images/maps_bg.png") no-repeat;
    background-position-y: center;
    overflow: hidden;
}

.karte iframe {
    width: 100%;
    max-width: 100%;
    height: 400px;
    border: none;
}

.karte a {
    display: block;
    margin: 0;
    padding: 1em 0;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

.hidden {
    display: none !important;
}
.border {
    border: 1px solid #867035;
    border-radius: 5px;
}

.raised {
    box-shadow: 2px 2px 3px #514320;
}

.small {
    font-size: .8em;
}

.smaller {
    font-size: .6em;
}

.large {
    font-size: 1.2em;
}

.larger {
    font-size: 1.5em;
}

.cursive {
    font-family: 'Clicker Script', cursive;
    font-weight: normal;
}

.bold {
    font-weight: bold;
}

.center {
    text-align: center;
}

.right {
    display: block;
    margin: 0 0 0 auto;
    text-align: right;
}

.desktop-only {
    display: none;
}

.paperBorder {
    position: relative;
}

.paperBorder::before {
    content: " ";
    background: url('../images/rand.png?v=2') no-repeat;
    background-size: cover;
    background-position-y: top;
    transform: scaleY(-1);
    display: block;
    position: absolute;
    width: 700px;
    height: 30px;
    z-index: 1;
}

.paperBorder:after {
    content: " ";
    background-image: url('../images/rand.png?v=2');
    background-size: cover;
    background-position-y: top;
    display: block;
    position: absolute;
    width: 700px;
    height: 30px;
    margin-top: -30px;
}

.popup_container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(3px);
    background-color: #00000020;
    z-index: 10;
}

.popup {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 95%;
    height: auto;
    max-height: 80%;
    background: #eee9e1;
    border: 1px solid #867035;
    box-shadow: 2px 2px 3px #514320;
    padding: 1em;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 20;
}

.rsvp {

}

.rsvp-no {
    display: none;
}

#Einladung a {
    display: block;
    padding: 5px;
    margin: 0 0 5px 0;
    text-decoration: none;
}


/* responsive table design, based on https://css-tricks.com/accessible-simple-responsive-tables/ */
.rtable {
    display: flex;
    flex-wrap:  wrap;
    margin: .25em 0;
    padding: 0;
}
.rtable .rcell {
    box-sizing: border-box;
    flex-grow: 1;
    width: 100%;
    padding: 1px;
    overflow: hidden;
    list-style: none;
}
.rtable h1, .rtable h2, .rtable h3, .rtable h4, .rtable h5, .rtable h6 {
    margin: 0;
}
.rtable-2cols > .rcell {
    width: 50%;
}
.rtable-3cols > .rcell {
    width: 33.33%;
}
.rtable-4cols > .rcell {
    width: 25%;
}
.rtable-5cols > .rcell {
    width: 20%;
}
.rtable-6cols > .rcell {
    width: 16.66%;
}
@media all and (max-width: 500px) {
    .rtable {
        display: block;
    }
    .rtable > .rcell {
        width: 100% !important;
    }
}

@media (min-width: 700px) {
    body {
        padding: 10px 0;
        font-size: 1.1rem;
    }

    header, section, footer {
        width: 700px;
    }

    h1 {
        font-size: 3.5em;
    }

    h2 {
        font-size: 2.5em;
    }

    .desktop-only {
        display: block;
    }

    .impressum {
        max-width: 700px;
    }

    .popup {
        width: 650px;
        min-width: 500px;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

}