/*
Theme Name: DDZ Custom
Theme URI: 
Author: Marc Bonn
Author URI: 
Description: Ein Custom Theme für WordPress - Ohne den ganzen Schrott.
Version: 1.0.0
*/

@import url("attachments/attachments.css");

/* Global */
* {
    margin: 0;
    padding: 0;
    
}

html, body{
    height:100%;
    min-height:100%;
}

/* #wpbody ist der Slot im Adminbereich für den Seitencontent */
header,main,footer,.block-editor-iframe__body
{
    font-family: Arial, Helvetica, sans-serif;
}



body {
    /* ------- Für Footer immer unten ------- */
    min-height: var(--window-height);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* ------- Für Footer immer unten ------- */

    font-size:18px;
    background-color: #f9fcfe;
}

/* Sanftes Einblenden der Imhalte nach einem Seitenwechsel
/* ---------------------------------------------------------- */
body:not(.wp-admin){
    opacity:0;
    transition: opacity 0.15s ease;
}
body:not(.wp-admin).loaded-and-scrolled,
body.editor-styles-wrapper{
    opacity:1 !important;
}
/* ---------------------------------------------------------- */

.container{
    width:1000px; /* maximale Breite für Desktopansicht */
    max-width:calc(100vw - 40px); /* für Mobilansicht | padding left right abziehen */
    margin-left:auto;
    margin-right:auto;
    padding-left:20px;
    padding-right:20px;
    overflow-x:auto;
}

.clear{
    clear:both !important;
}

p{
    line-height:1.6em;
    margin-bottom:1em;
}

h1:not(.site-name), h2:not(.site-description),
h3, h4, h5, h6, ul, ol
{
    line-height:1.3em;
    margin-bottom:0.5em;
    color: #345a69;
}

h1,h2,h3,h4,h5,h6,*{
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphenate-limit-chars: auto 3;
}

main .h1, 
main h1
{
    font-size: 2em;
}

main .h2, 
main h2
{
    font-size: 2.2em;
}
main h2.current-page-title{
    /* color:#3363cb; */
    display:block;
    margin-bottom: 2em;
}

main .h3, 
main h3 
{
    font-size: 1.4em;
}

main h1:not(first-child):not(:first-of-type),
main h2:not(.site-description):not(first-child):not(:first-of-type),
main h3:not(first-child):not(:first-of-type), 
main h4:not(first-child):not(:first-of-type), 
main h5:not(first-child):not(:first-of-type), 
main h6:not(first-child):not(:first-of-type)
{
    margin-top:1.1em;
}

h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/* Aufzählungen im Content-Bereich */
main ul:not(.menu),
main ol:not(.menu),
footer ul:not(.menu),
footer ol:not(.menu)
{
    margin-left:1em;
    margin-bottom:1.6em;
}
main ul:not(.menu) li,
main ol:not(.menu) li,
footer ul:not(.menu) li,
footer ol:not(.menu) li
{
    margin-bottom:0.6em;
}

main a,
footer a
{
    color:#3363cb;
    text-decoration: none;
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}
main a:hover,
footer a:hover
{
    text-decoration: underline;
}

main hr{
	opacity:0.1;
	height:1px;
	margin-bottom:1em;
	border: none;
	color: #333;  /* old IE */
	background-color: #333;  /* Modern Browsers */
}

main figcaption{
    font-style:italic;
    font-size:0.85em;
    opacity: 0.7;
}


.flex-cols{
    display:flex !important;
    width:100%;
}

.flex-cols > *{
    display:inline-block;
    margin-left: 20px;
    flex-grow:1; /* jedes Element kann sich grundsätzlich erstmal ausdehnen */
}
.flex-cols > *:first-child{
    margin-left: 0px; 
}



/* ===================================== Header ===================================== */
header {
   
    box-shadow: 0 0px 4px #ddd;
    background: #008c8a url('/kathi2.jpg');
    background-blend-mode: overlay;
    background-size: cover;
    background-position: 50% 30%;
    background-repeat: no-repeat;
    height:var(--window-height);
}

header > .container{

    width:100vw;
    height:var(--window-height);
    max-width:unset;
    max-height:unset;

    padding:unset;
    margin:unset;
    text-align:center;
    position: relative;
}

header .animated-logo{
    display:block;
    
    position: absolute;
    left:50%;
    top:45%;
    transform:translate(-50%, -100%);
    
    max-width:80vw;
    /* width: 320px; */
}

header .site-description-container{
    display: block;
    
    position: absolute;
    left:50%;
    bottom:calc(0px - 230px);
    transform:translate(-50%, 100%);

    /* width:1000px; */
}

header .site-description{
    display: inline-block;

    color:#ffffff;
    font-size:1.5em;
    padding:0.4em;
    padding-top:0.3em;
    padding-bottom:0.3em;
    background-color: #1e374aaa;
}

@media (min-width: 901px) and (min-height: 701px)
{
}

@media (max-width: 900px) or (max-height: 700px)
{

}



/* @media(min-width: 1000px) */
@media (min-width: 901px) and (min-height: 701px)
{
    header {
        background-size: 1000px auto;
        background-position: 50% 30%;
        background-repeat: no-repeat;
    }
    header .site-description-container {
        width:800px;
    }
}
/* @media (max-width: 1001px) */
@media (max-width: 900px) or (max-height: 700px)
{

    header .animated-logo{
        width: 200px;
        
        top:25%;
        transform:translate(-50%, 0%);
    }

    header .site-description-container {
        width:90vw;
        bottom: calc(0px - 70px);
    }

    header .site-description {
        display: block;
        font-size:1.2em;
    }
    header .site-description br:first-of-type{
        display: none;
    }
}

@media (max-height: 900px)
{
    header .site-description-container {
        bottom: calc(0px - 70px);
    }
}

/* Mobile Devices */
@media (hover: none) and (pointer: coarse) {
    /* header .animated-logo{
        top:6%;
    } */
}

/* ========================================================================== */

/* ===================================== Navigation ===================================== */

.desktop-menu-container {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    height: 80px;
    background-color: #1e374aaa;
    
    /* transition: opacity,padding 0.3s ease; */
    z-index: 10;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

body.sticky-menu .desktop-menu-container
{
    position: fixed;
    left: 0;
    right:0px;
    top: 0;
    transform: none;
    width: 100%;
    background-color: #1e374aee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

@media (max-width: 1200px) {
    body.sticky-menu .desktop-menu-container
    {
        padding-left:calc( ((30px + 150px)/2) - (30px / 2) );
    }
}

/* Abstand des Sticky-Menüs zur oberen Admin-Bar von Wordpress */
/* ---------------------------------------------------------- */
body.sticky-menu.admin-bar .desktop-menu-container {
    top: 32px;
}
@media (max-width: 782px) {
    body.sticky-menu.admin-bar .desktop-menu-container {
        top: 46px;
    }
}
/* ---------------------------------------------------------- */

/* Container mit dem Logo links und dem Hauptmenü */
/* ---------------------------------------------------------- */
.desktop-menu-container .logo{
    display:block;
    position: absolute;
    left:30px;
    height:60px;
    width:150px;

    opacity:0;
    transition: opacity 0.3s ease-in-out;
}

body.sticky-menu .desktop-menu-container > .logo{
    opacity:1;
}
/* ---------------------------------------------------------- */

/* SVG Logo im Header und im Hauptmenü  */
/* ---------------------------------------------------------- */
header svg,
main svg
{
    height:100%;
    width: 100%;
}
/* ---------------------------------------------------------- */

/* Horizontales Menü / Hauptmenü */
/* ---------------------------------------------------------- */
header ul.menu,
footer ul.menu
{
    display: flex;
    justify-content: flex-start;
    justify-content: center;

    align-items: center;
    gap: 0.5em 1.5em;
    align-items: stretch;
    max-width: 100%;
    flex-wrap: wrap;
}

header ul.menu{
    font-size:1.1em;
}

header ul.menu li,
footer ul.menu li
{
    list-style: none;
    display: inline-block;
    padding: 0px;
    white-space: nowrap;
}

header ul.menu li a,
footer ul.menu li a
{
    text-decoration: none;
    color: #ffffff;
    font-weight:600;
    transition: all 0.3s ease 0s;
    
}

header .desktop-menu-container.menu li:not(.current_page_item):hover{
    padding-bottom:5px;
    border-bottom:5px solid #ffffff88;
}

header ul.menu li.current_page_item,
footer ul.menu li.current_page_item
{
    padding-bottom:5px;
    border-bottom:5px solid #ffffff;
}
/* ---------------------------------------------------------- */


/* Mobiles Menü */
/* ---------------------------------------------------------- */
#mobile-menu{
    position: absolute;
    transform:translateX( -101vw );
    transition: all 0.3s ease;
}
body.mobile-menu-visible #mobile-menu{
    transform:translateX( 0vw );
}
body:not(.mobile-menu-visible) #mobile-menu-container .icon-close{
    display:none;
}
body.mobile-menu-visible #mobile-menu-container .icon-hamburger{
    display:none;
}

body.mobile-menu-visible{
    overflow: hidden;
}

#mobile-menu-container{
    position: relative;
}
#mobile-menu-switch{
    position: absolute;
    top:50px;
    right:50px;
    z-index:2;
    scale:1.3;
    cursor: pointer;
}
#mobile-menu{
    top:0px;
    left:0px;
    right:0px;
    background-color: #fcfcfcdd;
    background-color: #26455cdd;
    z-index:1;
    height:var(--window-height);
    padding-top:calc(50px + 0.4em);
}

body.mobile-menu-visible #mobile-menu{
    left:0px;
}

#mobile-menu ul.menu{
    display:block;
    margin-top:-1em;
}

#mobile-menu ul.menu li{
    display:block;
    padding:50px;
    padding-top:0.8em;
    padding-bottom:0.8em;
    width: calc(100% - 100px); /* 2 x padding abziehen */
}

#mobile-menu ul.menu li.current_page_item{
    border-bottom:unset;
}

#mobile-menu li a{
    
    display:block;
}
#mobile-menu li:hover{
    background-color: #182c3baa;
}
/* ---------------------------------------------------------- */


/* ========================================================================== */

/* ===================================== Main ===================================== */
main{
    padding-top:130px;
}


/* ========================================================================== */

/* ===================================== Footer ===================================== */
footer {
    margin-top:100px;
    padding: 30px 0px;
    padding-bottom:100px;
    background: #2d4456;
    color:white;
    box-shadow: 0 0px 3px 0px #ddd;
}

footer .menu {
    font-size:unset;
    margin-top:50px;
}
footer .menu li a {
    font-weight:unset;
}
/* ========================================================================== */

/* ============== Einstellungen für das Block System von Wordpress ================= */
/* farbigen BLocks automatisch ein Padding geben */
.wp-block-columns.has-background{
    padding:20px 30px;
    border-radius:5px;
}
/* der Letzte Absatz innerhalb eines farbigen BLocks bekommt keinen Abstand nach unten */
.wp-block-columns.has-background .wp-block-column p:last-child{
    margin-bottom: 0px;
}

.wp-block-button > a {
    background-color: #3363cb;
    color:white;
    margin-top: 0.3em; 
    text-decoration: none !important;
    transition: all 0.3s ease 0s;
}

.wp-block-button > a:hover{
    filter: brightness(1.1) !important;
    scale: 1.01 !important;
}
/* ================================================================================= */


/* Media Queries für Responsives Design
  sollten ganz unten stehen, da sie die v
  orherigen Anweisungen überschreiben */
/* ---------------------------------------------------------- */



@media (max-width: 900px) {

    /* header{
        background-position: calc(50% - 100px) 0px;
    } */

    .flex-cols{
        flex-direction: column;
    }
    .flex-cols > *{
        margin-left: 0px;
        padding-top:2em;
    }
    .flex-cols > *:first-child{
        padding-top:0px;
    }
}

/* @media (max-width: 900px) or (max-height: 800px) */
@media (max-width: 900px) or (max-height: 700px)
{
    .desktop{
        display:none;
    }
}
/* @media (min-width: 901px) and (min-height: 801px) */
@media (min-width: 901px) and (min-height: 701px)
{
    .mobile{
        display:none;
    }
}




/* #jump-top */
/* ========================================================================== */
html {
    /* scroll-behavior: smooth; */
}

#jump-top{
    position: fixed;
    right: 50px;
    bottom: 50px;
    z-index: 1000;
    width: 40px;
    height: 40px;
    border:3px solid white;
    border-radius: 50%;
    background-color:#008c8a;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    /* display:none; */
    scale:0;
    opacity:0;
    transition: all 0.3s ease-in-out;
}
@media (max-width: 900px) or (max-height: 700px) {
    #jump-top{
        right: 20px;
        bottom: 20px;
    }
}
#jump-top.show {
    /* display:block; */
    scale: 1;
    opacity:1;
}
#jump-top > svg > path{
    fill:white;
}
/* ========================================================================== */



.scroll-position{
    position:absolute; 
    bottom:0; 
    left:0; 
    right:0; 
    height:79px;
}
@media (max-width: 900px) or (max-height: 700px) {
    .scroll-position{
        height:0px;
        transform: translateY(50px);
    }
}




/* ========================================================================== */
/* ========================================================================== */
/* ========================================================================== */

/* .register-btn-box{
    display:flex;
    justify-content: center;
    align-items: center;
} */

/* html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
} */


.page-id-228 h3{
    min-height: 80px;
}
@media (max-width: 781px) {
    .page-id-228 h3{
        min-height: unset;
    }
}

.wp-block-gallery > *{
    outline:1px solid #ddd;
}
@media (max-width: 600px) {
    .wp-block-gallery {
        flex-direction: column;
    }
    .wp-block-gallery > *{
        flex: 1 0 100%;
        width:100% !important;
        display:block;
    }

    .wp-block-button{
        width:100% !important;
    }
}