/*
 Theme Name:     A-DUR Child-Theme
 Theme URI:      http://www.a-dur.at
 Description:    Divi Child-Theme
 Author:         A-DUR
 Author URI:     http://www.a-dur.at
 Template:       Divi
 Version:        1.0.0
*/

/* Standardmäßig unsichtbar */
/*#main-content .et_pb_section, 
#main-content .et_pb_row, 
#main-content .et_pb_column, 
#main-content .et_pb_module {
    opacity: 0;
    transition: opacity 0.4s ease 0.1s;
}*/

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #f6f8fa;
}

.first {
    padding-top: 170px !important;
    margin-top: 0 !important;
}

a:focus-visible {
    outline: 2px solid white;
    box-shadow: 0 0 0 4px black;
}

.grainy-bg {
    position: relative;
    background: rgba(4, 40, 53, 1)!important;
  }
  
  /* Canvas als statische „Rausch-Schicht“ hinten */
  .grainy-bg canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; /* Klicks gehen „durch“ das Canvas hindurch */
    z-index: 1;         /* Hinter dem Inhalt */
  }

  #canvas2 {
    position: relative;
  }

@media only screen and (max-width: 900px) {
    .first {
        padding-top: 130px !important;
        margin-top: 0 !important;
    }
}

@media only screen and (min-width: 900px) {
    .first {
        padding-top: 180px !important;
        margin-top: 0 !important;
    }
}


#main-content, .et_pb_section {
    
    background-color: #f6f8fa;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: 400;
    color: #0b4357;
    font-size: clamp(16px, 2.5vw, 20px);
    line-height: 1.6;
    font-family: "Roboto";
}

    /* Verstecken via [hidden] */
    [hidden] {
        display: none !important;
      }
  
      .headerleiste {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px;
        z-index: 10;
        max-width: 1400px;
        margin: 0 auto;
      }
  
      .headerleiste .links {
        width: 20%;
      }
  
      .headerleiste .rechts {
        width: 20%;
        display: flex;
        justify-content: flex-end;
      }
  
      /* Logo links */
      .headerleiste .links img {
        height: 70px;
        margin-top: -1px;
      }
  
      /* Hauptnavigation (Mitte) */
      nav {
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0!important;
      }


      nav ul {
        
        list-style: none;
        display: flex;
        justify-content: center;
        gap: 30px;
        margin: -10px 0 0 0;
        padding: 0!important;
      }
  
      nav ul li {
        position: static;
        list-style-type: none;
      }
  
      /* Haupt-Menülinks */
      nav ul li a {
        display: flex;
        flex-wrap: nowrap!important;
        padding: 5px 10px;
        text-decoration: none;
        border-radius: 5px;
        transition: text-decoration 0.3s;
        color: #d4e3e9;
        white-space: nowrap;
      }
      nav ul li a:hover {
        text-decoration: underline 3px solid #aae8ff;
        text-underline-offset: 16px;
      }
  
      /* Dropdown über volle Breite */
      li.has-dropdown > .dropdown-container {
        position: absolute;
        top: 100%;
        width: 450px;
        background-color: #ffffff;
        border-radius: 0 0 5px 5px;
        z-index: 99;
        border: 1px solid #2f3b3f;
        margin-top: -10px;
      }

      .dropdown-content ul {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        text-align: left;
        gap: 0;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
      }
      .dropdown-content li {
        width: 100%;
      }
      .dropdown-content li a {
        display: block;
        padding: 3px 15px;
        border-top: 1px solid #e5e5e5;
        transition: background-color 0.3s;
        width: 100%;
        border-radius: 0;
      }
      .dropdown-content li a:hover {
        background-color: #aae8ff;
      }

.headerleiste-mobile {
    display: none;
}

.headerleiste-mobile img {
    max-width: 200px;
    margin-top: 1px;
}

      .mobile-nav-toggle {
        background: none;
        border: none;
        cursor: pointer;
      }
      .mobile-nav-toggle img {
        max-width: 30px;
        margin: 0;
      }
  
      /* Das mobile Off-Canvas-Menü, standardmäßig versteckt */
      .mobile-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 9999;
  
        /* Ausserhalb des sichtbaren Bereichs schieben (links) */
        transform: translateX(-100%);
        transition: transform 0.3s ease;
      }
      .mobile-menu.open {
        transform: translateX(0);
      }
  
      /* Kopfzeile im mobilen Menü (Schließen-Button) */
      .mobile-menu-header {
        display: flex;
        justify-content: flex-end;
      }
      .mobile-menu-close, .close-panel, .back-btn {
        background: none;
        border: none;
        border-radius: 5px 0 0 5px;
        cursor: pointer;
        margin-top: 23px;
        background-color: #f9f9f9;
      }

      .back-btn {
        border-radius: 0 5px 5px 0;
      }

      .mobile-menu-close img, .close-panel img, .back-btn img {
        max-width: 30px;
        margin: 10px 20px 0 20px;
      }
  
      /* Hauptinhalt des mobilen Menüs (Ebene 1) */
      .mobile-menu-content {
        position: relative; 
        height: calc(100% - 50px); /* Platz für Header */
        overflow-y: auto;         /* Scrollbar, wenn Inhalt länger ist als Höhe */
        padding: 20px 0 20px 20px;
      }
      .mobile-menu-content ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .mobile-menu-content li {
        margin-bottom: 15px;
      }
      .mobile-menu-content a,
      .mobile-menu-content button {
        background: none;
        border: none;
        padding: 0;
        text-decoration: none;
        color: #0b4357;
        font-size: clamp(24px, 3vw, 30px);
        cursor: pointer;
        display: block;
      }
  
      .submenu-panel {
        position: absolute;
        top: 0; 
        left: 0; /* wir regeln die Ausblendung über translateX(100%) */
        width: 100%;
        height: 100%;
        background: #fff;
        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
        
        /* WICHTIG: Standardmäßig unsichtbar und nicht klickbar */
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateX(-100%); /* aus dem sichtbaren Bereich raus */
        padding: 13px 0 20px 0;
      }

    .submenu-panel li {
        padding-left: 20px;
        list-style-type: none;
    }
    .submenu-panel li a {
        font-size: clamp(24px, 3vw, 30px);
    }
      /* Wenn wir .open hinzufügen, wird es sichtbar und fährt hinein */
      .submenu-panel.open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
      }
  
      .submenu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: -15px;
        margin-bottom: 30px;
      }
      .submenu-header h2 {
        padding-top: 32px;
      }
  
      /* ----------------------------------------------
         = = =  RESPONSIVE BREAKPOINT  (max-width: 768px)
         ---------------------------------------------- */
      @media (max-width: 1200px) {
        /* Desktop-Menü unsichtbar, Hamburger sichtbar */
        nav[aria-label="Hauptnavigation"] {
          display: none;
        }
        .headerleiste-mobile {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: 1600px;
            padding: 0px;
            z-index: 10;
            margin: 0 auto;
        }
        .headerleiste {
            display: none;
          }
      }

div.button-nav {
    display: flex;
    gap: 20px;
}

.special {
    background-color: #aae8ff;
    border: 1px solid #e5e5e5;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: clamp(16px, 2.5vw, 20px) !important;
    margin: -6px 0 0 0;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0b4357;

}

.special img {
    max-width: clamp(20px, 2.5vw, 25px) !important;

}

.special:hover {
    background-color: #ffffff;
}

.primary {
    background-color: #aae8ff;
    padding: 10px 20px;
    font-size: clamp(16px, 2.5vw, 20px) !important;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #0b4357;
    gap: 10px;
}

.primary img {
    max-width: clamp(20px, 2.5vw, 25px) !important;
}

.primary:hover {
    background-color: #ffffff;
}

.secondary {
    background-color: #f0fbff;
    border: 1px solid #0b4357;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: clamp(16px, 2.5vw, 20px) !important;
    margin-top: 20px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #0b4357;
}

.secondary img {
    max-width: clamp(20px, 2.5vw, 25px) !important;
    margin-right: 10px;
}

.secondary:hover {
    background-color: #aae8ff;
}

.tertiary {
    border: 1px solid #3c475b;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: clamp(16px, 2.5vw, 20px) !important;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #d4e3e9;
    gap: 10px;
    margin-top: 0;
}

.tertiary img {
    max-width: clamp(20px, 2.5vw, 25px) !important;
}

.tertiary:hover {
    background-color: rgba(255,255,255,0.1);
}

.headerleiste .tertiary {
    border: none;
    margin-top: -10px;
}

.headerleiste .tertiary:hover {
    background-color: rgba(255,255,255,0);
    text-decoration: underline 3px solid #aae8ff;
    text-underline-offset: 16px;
}

a.content-link {
    border: 1px solid #0b4357;
    background-color: #f0fbff;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin: 20px 0;
    transition: background-color 0.3s;
}

a.content-link:hover {
    background-color: #aae8ff;
}

a.content-link img {
    max-width: 30px;
}

.wpforms-field-label,
.wpforms-field-medium,
.wpforms-field-large,
.wpforms-field-date-time-time,
.wpforms-field-date-time-date {
    font-size: clamp(16px, 2.5vw, 20px) !important;
    color: #3c475b !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    background-color: #f6f8fa!important;
}

.wpforms-field-medium:focus-visible,
.wpforms-field-large:focus-visible,
select:focus-visible,
option:focus-visible {
    border: 1px solid #3c475b !important;
    box-shadow: none !important;
}

.wpforms-submit {
    color: #3c475b !important;
    background-color: #aae8ff !important;
    border: 2px solid #aae8ff !important;
    padding: 15px 25px !important;
    border-radius: 5px !important;
    font-size: clamp(16px, 2.5vw, 20px) !important;
    margin-top: 20px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background-color 0.3s !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    outline: none !important;
}

select:hover,
option:hover {
    border: 1px solid #3c475b !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
}

.wpforms-submit:focus-visible {
    outline: none !important;
}

.wpforms-confirmation-container-full {
    color: #3c475b !important;
    background-color: #e2f0d9 !important;
}

.et_pb_button {
    text-decoration: none;
}

.et_pb_row {
    width: 90%;
    margin: 0 auto;
    max-width: 1400px;
}

.ueber-uns img {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid white;
}

.autor {
    display: flex;
    justify-content: left;
}

.autor .left {
    width: 30%;
    max-width: 200px;
    margin: 0 40px 0 0;
}

.autor img {
    border-radius: 100px;
}

p {
    font-size: clamp(16px, 2.5vw, 20px);
    color: #0b4357;
    line-height: 1.6;
}

a {
    font-size: clamp(16px, 2.5vw, 20px);
    color: #0b4357;
    line-height: 1.6;
    text-decoration: underline dotted #0b4357 0.5px;
}

.wp-block-list {
    font-size: clamp(16px, 2.5vw, 20px);
    color: #0b4357 !important;
    line-height: 1.6;
}

.wp-block-list li {
    margin: 10px 0;
}

h1 {
    font-size: clamp(25px, 4vw, 35px) !important;
    color: #aae8ff;
    line-height: 1.3;
    font-weight: 100;
}

h1.start {
    font-size: clamp(50px, 7vw, 84px) !important;
    
}

.et_pb_title_container h1 {
    display: inline-block;
    border-radius: 5px;
    padding-bottom: 20px;
}

.topic-container {
    position: relative;
    margin-bottom: 30px;
}

.et_pb_title_container h1::before, .topic-container::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0; /* Links unter der Überschrift */
    width: 60px; /* Breite des Balkens */
    height: 3px; /* Höhe des Balkens */
    background-color: #aae8ff; /* Farbe des Balkens */
}

h2 {
    font-size: clamp(25px, 4vw, 35px) !important;
    color: #0b4357 !important;
    line-height: 1.3;
    font-weight: 100;
}


.entry-title a, h2.entry-title {
    font-size: clamp(20px, 3vw, 24px) !important;
    color: #0b4357 !important;
    line-height: 1.5!important;
}

h3 {
    font-size: clamp(18px, 3vw, 25px) !important;
    color: #0b4357 !important;
    line-height: 1.4;
    font-weight: 100;
}

h4 {
    font-size: clamp(20px, 3vw, 28px) !important;
    color: #0b4357 !important;
    font-weight: 100;
}

.et_pb_post {
    background-color: #fdfdfd!important;
    border-radius: 5px;
    border: 1px solid #0b4357!important;
}

.schatten {
    box-shadow: 2px 2px 20px rgba(129, 129, 129, 0.1);
}

.leistungen {
    display: flex;
    flex-wrap: wrap;
    /* Elemente dürfen umbrechen */
    gap: 20px;
    /* Abstand zwischen den Elementen */
    justify-content: center;
    /* Gleichmäßige Verteilung */
}

.leistungen a {
    flex: 1 1 calc(25% - 20px);
    /* Drei Elemente pro Zeile inkl. Lücke */
    max-width: calc(25% - 20px);
    /* Sicherstellen, dass nicht mehr Platz verwendet wird */
    min-width: 250px;
    /* Mindestbreite für kleine Bildschirme */
    box-shadow: 2px 2px 20px rgba(129, 129, 129, 0.1);
    border-radius: 5px;
    border: 1px solid #e5e5e5;
}

.leistungen a:hover {
    box-shadow: 2px 2px 20px rgba(129, 129, 129, 0.2);
}

@media (max-width: 900px) {
    .leistungen a {
        flex: 1 1 calc(50% - 20px);
        /* Zwei Elemente pro Zeile */
    }
}

@media (max-width: 600px) {
    .leistungen {
        justify-content: center;
    }

    .leistungen a {
        flex: 1 1 100%;
        /* Ein Element pro Zeile */
    }
}

.leistung-oben {
    background-color: rgb(249, 249, 249);
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 20%, rgba(249, 249, 249, 1) 80%);
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leistung-unten {
    background-color: rgb(226, 240, 217);
    text-align: center;
    padding: 5px;
}

.leistung img {
    width: 70px;
}

footer a,
footer p,
footer h4,
footer td {
    font-size: 16px !important;
}

div.komponenten img {
    width: 20px;
    border-radius: 0 !important;
    margin: 0 10px 0 0;
}

div.komponenten img:first-child {
    margin-left: 0;
}

div.komponenten {
    margin: -20px 0 -10px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

div.komponenten-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #e5e5e5;
    padding: 5px 10px;
    border-radius: 5px;
}

div.features p {
    margin-bottom: -10px;
}

p img {
    width: 20px;
    margin-right: 10px;
}

.article-list {
    border: 1px solid #0b4357;
    border-radius: 5px;
}

.article-list .top {
    background-color: #ffffff;
    padding: 5px 15px;
    margin-bottom: 0;
    border-radius: 5px 5px 0 0;
}

.article-list li {
    list-style-type: none;
}

.article-list a {
    display: block;
    padding: 3px 15px;
    border-top: 1px solid #e5e5e5;
    transition: background-color 0.3s;
}

.article-list a:hover {
    background-color: #aae8ff;
}

.wp-block-columns {
    margin-top: 30px;
    margin-left: 7px;
    margin-bottom: 40px;
}

.article-row {
    background-color: #f6f8fa;
    border: 1px solid #0b4357;
    border-radius: 5px;
    padding: 0 20px 0 20px;
}

.article-row ul {
    margin-bottom: -10px;
}

.article-row h3 {
    background-color: #ffffff;
    border: 1px solid #0b4357;
    padding: 3px 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-top: -25px;
    margin-left: -30px;
    display: inline-block;
}

.citation {
    border: 1px solid #0b4357;
    background-color: #fdfdfd;
    padding: 10px 20px;
    border-radius: 5px;
    margin: 10px 0 40px 0;
}

.citation .top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}



.citation .top img {
    width: 40px;
    height: 40px;
}

.citation p {
    margin-left: 30px;
}

.citation .bottom p {
    margin-left: 70px;
}

.wp-block-image {
    margin: 20px 0 30px 0;
}

/* Standardmäßig unsichtbar */
.animation {
    opacity: 0;
    transform: translateY(5px); /* Startposition unterhalb */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Sobald das Element sichtbar wird */
.fade-in-up {
    opacity: 1;
    transform: translateY(0);
}

.article {
    background-color: white;
    border-radius: 5px;
    border: 1px solid #0b4357;
    overflow: hidden;
    position: relative;
    box-shadow: 2px 2px 20px rgba(129, 129, 129, 0.1);
}

.article .top {
    position: relative;
    overflow: hidden;
}

.article .top img {
    height: 400px;
    width: 100%;
    object-fit: cover;
    border-radius: 5px 5px 0 0 !important;
    transition: transform 0.4s ease;
}

/* Zoom-Effekt beim Hover */
.article:hover .top img {
    transform: scale(1.05);
}

/* Gradient-Overlay */
.article .top::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(11, 45, 57, 1) 100%);
    pointer-events: none;
}

.article .bottom {
    position: absolute;
    bottom: 0;
    padding: 20px 30px;
}

.article .bottom h2, .article .bottom p {
    color: white !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    transition: color 0.3s;
}

.article:hover .bottom h2, .article:hover .bottom p {
    color: #aae8ff!important;
}

.et_pb_image_wrap img {
    width: 100%;
  height: 100%;
  object-fit: cover; /* Skaliert das Bild proportional und füllt den Container */
  display: block;
}

.chancen {
    display: flex;
    align-items: center;
    gap: 15px;
}

.chancen img {
    width: 25px;
}

.kursdaten {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.kursdaten-element {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: no wrap;
}

.kursdaten-element img {
    width: 20px;
}

.kursdaten-element {
    color: #f0fbff!important;
}