/*
Theme Name: WAAL Theme
Description: Basic Theme für das WAAL Team
Version: 1.0
Author: Steven Fiedler
*/

:root{
--waal-bg-color: #c2dcff;
--waal-text-color: #661414;
--waal-link-color: #7a0000;
--waal-menu-link-color: #3d0000;
--waal-headline-color: #3d0000;
--waal-meta-color: #3a0000;
--waal-highlight-color: #ffc2e8;
--waal-input-bg-color: #aacbf8;
--waal-input-border-color: #7a000033;
--waal-btn-bg-color: #3d0000;
--waal-btn-text-color: #c2dcff;
--waal-content-width: 650px;
}

/* body, header, main, footer */
body { font-family: "DM Sans", sans-serif; font-optical-sizing: auto; font-weight: <weight>; font-style: normal; background-color: var(--waal-bg-color); color: var(--waal-text-color)}
#header{ margin: 30px 0px 0px}
#main{ margin: 30px 0px}
#footer{ margin: 60px 0px;}
#footer .wrapper{ border-top:2px dotted var(--waal-link-color); padding-top: 30px }

/* menü */
.menu{ list-style: none; margin: 0px; padding: 0px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 15px}
.menu a{ text-decoration: none; color: var(--waal-menu-link-color)}

/* links */
a{ color: var(--waal-link-color) }
a:hover, a:active{ color: var(--waal-highlight-color) }

/* überschriften */
h1{ font-family: "Rubik Beastly", system-ui; font-weight: 400; font-style: normal; font-size: 7rem; line-height: 1em; width: min-content; }
h1, h2, h3, h4, h5{color:var(--waal-headline-color)}

/* formulare */
input,select,textarea{padding:10px;margin:5px 0px 20px;border-radius: 5px;background:var(--waal-input-bg-color);border:1px solid var(--waal-input-border-color);font-size:1em;width:-webkit-fill-available;height:1em;font-family: "DM Sans", sans-serif;}
textarea{height:auto;}
input[type=checkbox]{margin:0px 5px 0px 0px;min-width:18px;min-height:18px;width:auto;height:auto;}
input[type=submit]{width:auto;height:auto;background:var(--waal-btn-bg-color);color:var(--waal-btn-text-color);}
input[type=submit]:hover{cursor:pointer;}
label{padding:0px 10px 0px 0px;display:inline-flex;align-items:center;}

/* allgemeine klassen */
.wrapper{ width:100%; max-width: var(--waal-content-width); margin:auto}
.single-posts-flex{ display:flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; margin-top: 80px}
.single-posts-intro{ max-width: 300px }
.meta{ color: var(--waal-meta-color) }
.wp-post-image{width:100%!important;height:auto!important}

/* formular klassen */
.form-flex{gap:40px;display:flex;justify-content:space-between;}
.form-flex-nogap{gap:0px;display:flex;justify-content:space-between;}
.areas-flex{display:inline-flex;border:1px dotted #7a000033;flex-wrap:wrap;margin-bottom:5px;}
.form-col{width:-webkit-fill-available;}
.form-col-50{width:calc(50% - 20px);}
.margin-bottom{margin-bottom:20px!important;}
.msg{position:absolute;top:10%;left:50%;transform:translateX(-50%);box-shadow:0px 0px 40px #00000055;z-index:1;padding:20px;border-radius:20px;background:#c2dcff}
.msg.green{background:#c2ffcc!important}
.msg.red{background:#ffc2c2!important}
.close{position:absolute;top:-15px;right:-15px;width:40px;height:40px;display:flex;background:#fff;color:#3d0000;border-radius:100%;align-items:center;justify-content:center;text-transform:uppercase;cursor:pointer;}


@media screen and (max-width:600px){
h1{font-size: 6rem;}
.form-flex{display:block;}
.form-col, .form-col-50{width:100%;}
}

@media screen and (max-width:500px){
h1{font-size: 5rem;}
}

@media screen and (max-width:400px){
h1{font-size: 4rem;}
}