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

:root {
  
  --color1: #404d6f;
  --color2: #b7ced4;
  --color3: #e2a261;
  --color4: #002641;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --padding-main: 40px;
  --corner-radius: 3px;
  --logo-height: 120px;
  
  --header-top-margin: 200px;
  --header-bottom-margin: 100px;
  --section-margin: 140px;
  --footer-top-margin: 400px;
  --footer-bottom-margin: 40px;
  
  --container-width: 1000px;
  --container-background2: rgba(217, 239, 245, 0.9);
  --container-background: transparent;
  --container-background-no-transparency: rgba(1, 47, 70, 1);

  --ceda-dark-blue:#404d6f;
  --ceda-light-blue:#e3f2fc;
}

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

/* Global */
* {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
}

html, body{
    color:var(--color1);
}

html {
  scroll-padding-top: 210px;
  scroll-behavior: smooth;
}
body.admin-bar{
    scroll-padding-top: 220px;
}

body {
    position: relative;
    padding-bottom:240px;

    background-color: var(--ceda-light-blue);
    /* 
        dunkelblau: #404d6f;
    */
    /* background-image:url(https://ceda2026.com/wp-content/uploads/2025/07/AdobeStock_325468959-2000.jpeg); */
    
    background-size:contain;
    background-position:bottom center;

    background-size:cover;
    background-position:top left;

    background-attachment:fixed;
    background-repeat:no-repeat;

    min-height: 100vh;
    height: 100%;

    /* ------- Für Footer immer unten ------- */
    /* 
    display: flex;
    flex-direction: column;
    justify-content: space-between; */
    /* ------- Für Footer immer unten ------- */

    font-size:18px;
}

.container{
    
    width:var(--container-width);
    max-width:var(--container-width);
    
    margin-left:auto;
    margin-right:auto;

    padding: var(--padding-main);
    
    background-color: var(--container-background);

    /* outline: 3px dashed rgb(50, 255, 50); */
}
main .container{
    background-color: transparent;
}

.wp-block-group{
    
    margin-left:calc( var(--padding-main) * -1 );
    margin-right:calc( var(--padding-main) * -1 );
    padding: var(--padding-main);
    background-color: var(--container-background);
}

.container:nth-child(even),
footer .container{
    /* outline-color:rgb(255, 0, 170) !important; */
}


.wp-block-group:not(:last-child){
    margin-bottom:var(--section-margin);
}

.padding{
    padding:var(--padding-main)
}

footer{
    width:100%;
    padding-top: 50px;
    padding-bottom: var(--footer-bottom-margin);
    position: absolute;
    bottom:0px;
    left:50%;
    transform:translateX(-50%);
}

.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:not(.menu), ol
{
    line-height:1.3em;
    margin-bottom:0.5em;
}

h1:not(.site-name):not(first-child):not(:first-of-type),
h2:not(.site-description):not(first-child):not(:first-of-type),
h3:not(first-child):not(:first-of-type), 
h4:not(first-child):not(:first-of-type), 
h5:not(first-child):not(:first-of-type), 
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;
}

ul:not(.menu),
ol:not(.menu)
{
    margin-left:1em;
    margin-bottom:1.6em;
}
ul:not(.menu) li,
ol:not(.menu) li
{
    margin-bottom:0.6em;
}

a
{
    color:#1943ac;
    text-decoration: none;
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}
a:hover
{   
    color:#265de6;
    text-decoration: underline;
}

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

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 {
    /* padding-top:var(--header-top-margin); */
    /* padding-bottom:var(--header-bottom-margin); */
}

/* Abstand ganz oben */
/* header > .container:first-child, */
header .distance-top{
    /* margin-top:var(--header-top-margin); */
}
body{
    padding-top:var(--header-top-margin);
}

@media screen and (max-width: 900px) {
    body{
        padding-top:0px;
    }
}


header .site-name,
header .site-description
{
    /* display:none; */
    white-space: nowrap;
}

header .site-name {
    margin-top:-0.2em;  /* Ausgleich des Schriftabstandes oben bei ganz großer Schrift*/
    font-size: 4em;
    font-weight: bold;
    color: transparent;
    /* background-image: url('https://images.unsplash.com/photo-1732535725600-f805d8b33c9c?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');  */
    background-image: url('/wp-content/uploads/2025/07/photo-1732535725600-f805d8b33c9c.jpeg'); 
    background-size: 250%; /* Enlarged for smooth animation */
    background-position: 0 50%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate-background 14s infinite alternate linear;
}
/* https://prismic.io/blog/css-text-animations */
@keyframes animate-background {
    0% {
        background-position: 0 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

header .site-name a{
    color:unset;
    text-decoration: none;
    /* font-family: 'Courier New', Courier, monospace; */
}

header .site-description{
    color:var(--color3);
    font-size:1.42em;
    /* margin-bottom:2.4em; */
}


.site-name-description-container{
    display:table-row;
    font-size: 1.1em;
    transform-origin: 0px 0px;
    transition: 0.6s;
}

body.scroll-fix-active .site-name-description-container{
    font-size:0.4em;
}

header .site-name{
    display:table-cell;
    vertical-align:middle;
}
header .site-description{
    padding-left:20px;
    display:table-cell;
    vertical-align:middle;
}


.scroll-fix{
    position: fixed;
    top:0px;
    left:0px;
    right:0px;
    width:100%;
    z-index: 99999;
    /* 
    left:50%;
    transform:translateX(-50%); */
}
/* body.scroll-fix-active .scroll-fix .container{
    
    background-color: var(--color4);
    padding-bottom:5px;
} */

/* Wenn die WordPress Anmeldung aktiv ist, positioniere das Element nicht ganz oben, sondern unter der Adminbar. */
body.admin-bar .scroll-fix{
    top:32px;
}
/* bei schmalem Fenster 46px */
@media (max-width: 782px) {
    body.admin-bar .scroll-fix{
        top:46px;
    }
}


/* .site-name{
    transition: 0.6s;
}
.site-description{
    transition: 0.6s;
}
body.scroll-fix-active .scroll-fix .site-name{
    font-size: 2.5em;
    margin-top:0em; 
    
}
body.scroll-fix-active .scroll-fix .site-description{
    font-size: 0.9em;
    margin-bottom: 0px;
    margin-top: 0.5em;
} */

/* .scroll-fix header .container{
    transition: 0.6s;
}
body.scroll-fix-active header .container{
    padding-top:5px;
    padding-bottom:5px;
} */

.main-menu{
    /* margin-top:10px;
    margin-bottom:5px; */
}



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

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

.navigation{
    background-color: var(--ceda-dark-blue);
    padding:0px;
}

.navigation > .container{
    padding:0px;
    padding-top:15px;
    padding-bottom:10px;
    width:100%;
}

ul.menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5em 1.1em;
    align-items: stretch;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

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

    padding-bottom:5px;
    border-bottom:5px solid transparent;
}

ul.menu li:not(:last-child) {
    /* margin-right: 3em; */
}

ul.menu li a {
    text-decoration: none;
    color: var(--ceda-light-blue);
    font-weight:600;
    transition: all 0.3s ease 0s;
}

ul.menu li a:hover,
ul.menu li.current-scrollspy-item a{
    color: white;
}

ul.menu li.current_page_item,
li.current-scrollspy-item a
{
    padding-bottom:5px;
    border-bottom:5px solid white;
}

/* ul.menu li.current_page_item a::after{
    content: ' ';
    display:block;
    
} */

#mobile-menu-fixed{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    z-index:99999999999;
}
/* wp-admin-bar ist 32px hoch */
body.admin-bar #mobile-menu-fixed{
    top:32px;
}

/* bei schmalem Fenster 46px */
@media (max-width: 782px) {
    body.admin-bar #mobile-menu-fixed{
        top:46px;
    }
}
/* @media (max-width: 900px) {
    body.admin-bar #mobile-menu-fixed{
        top: 0px;
    }
    .scroll-fix {
        position: fixed;
        top: 0px;
        width:100%;
    }
} */



body:not(.mobile-menu-visible) #mobile-menu{
    display:none;
}
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;
    /* padding des headers abziehen */
    /* margin-top:-30px;  */
}
#mobile-menu-switch{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index:2;
}
#mobile-menu-switch svg{
    fill:var(--color1)
}
#mobile-menu{
    /* position: absolute; */
    top:0px;
    left:0px;
    right:0px;
    background-color: var(--container-background-no-transparency);
    z-index:1;
    height:100vh;
    /* padding:20px; */

}
#mobile-menu ul.menu {
    justify-content: space-between;
    align-items: left;
    gap: 0.5em;
    flex-direction: column;
}

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

/* ===================================== Main ===================================== */
main{
    /* padding-top:var(--header-bottom-margin); */
    /* height:100%; */
}
main .container:first-child{
    /* margin-top:360px; */
    height: 100%;
}

.current-page-title{
    color:var(--color1);
    display:block !important
}

/* h2.wp-block-heading{
    margin-top:6em;
} */
/* ========================================================================== */

/* ===================================== Footer ===================================== */
footer {
}
/* ========================================================================== */

/* ============== Einstellungen für das Block System von Wordpress ================= */
/* farbigen BLocks automatisch ein Padding geben */
.wp-block-columns.has-background{
    padding:20px var(--padding-main);
    border-radius:var(--corner-radius);
}
/* 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__link{
    background-color: var(--color1);;
    color:white;
    margin-top: 0.3em; 
}

.wp-block-button__link:hover{
    background-color: #073aa9;
}
/* ================================================================================= */



@media (max-width: 1100px) {
    .container{
        width:800px;
        max-width:800px;
    }
    .site-name-description-container{
        font-size: 0.85em;
    }
}

@media (max-width: 900px) {
    .container{
        width:calc(100% - (var(--padding-main) * 2));
        max-width:calc(100%);
        margin-left:0;
        margin-right:0;
    }
    
    .site-name-description-container{
        font-size: 0.5em;
    }
    ul.menu{
        /* gap:2.5em !important; */
        display:block;
    }

    ul.menu li{
        display:block;
        width:auto;
        margin-bottom:1.5em;
    }

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

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

    .desktop{
        display:none;
    }
}

@media (min-width: 901px) {
    .mobile{
        display:none;
    }
}
@media (max-width: 600px) {
    /* .site-name-description-container{
        font-size: 0.5em;
    } */
    .site-name-description-container .site-name,
    .site-name-description-container .site-description
    {
        display:block;
        width:100%;
        padding-left:0px;
    }
}



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

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

.logo.sponsor{
    width: 100%;
    background-color: #FFFFFF;
    text-align: center;
}

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