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

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

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

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

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

.et_pb_portfolio_grid .et_pb_portfolio_item {
    width: 28%!important;
    min-height: 300px;
    margin: 1.5%;
    box-shadow: 0px 2px 24px rgba(0, 0, 0, 0.1)!important;
    background-color: white;
}

.et_pb_post {
    min-height: 450px!important;
}

@media (max-width: 980px) {
    .et_pb_portfolio_grid .et_pb_portfolio_item {
        width: 45%!important;
        margin: 2.5%;
    }
}

@media (max-width: 767px) {
    .et_pb_portfolio_grid .et_pb_portfolio_item {
        width: 100%!important;
        margin: 0 0 20px 0;
    }
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten auf Desktop */
    gap: 50px; /* Abstand zwischen den Projekten */
    margin-bottom: 40px;
    margin-top: 40px;
}

.project-item {
    background-color: #ffffff;
    border: 1px solid #c7d1df;
    border-radius: 20px 0 20px 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.2s ease; /* Sanfte Übergangsdauer für das Ein- und Ausblenden */
    transition: background-color 0.2s;
    transition: border-color 0.2s;
}

.project-item.show {
    opacity: 1;
}

.project-item:hover {
    background-color: #f0f3f6;
    border: 1px solid #181f4e;
}

a {
    text-decoration: none!important;
}

.project-image {
    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: auto;
    transition: transform 0.2s ease; /* Sanfte Animation */
}

.project-content {
    margin-top: 15px;
    padding: 0 10px 10px 10px;
}

.project-item:hover .project-image img {
    transform: scale(1.05); /* Leichtes Zoomen */
}

@media screen and (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr; /* 1 Spalte auf Tablets und Smartphones */
    }
}

.filter-buttons button {
    border-radius: 5px;
    background-color: #f5f7f9;
    padding: 10px 20px;
    margin-right: 10px;
    margin-bottom: 10px;
    color: #1b144d!important;
    border: 1px solid rgba(0, 0, 0, 0);
    cursor: pointer;
    transition: background-color 0.3s;
}

.filter-buttons button:hover {
    background-color: #e4e7eb;
}

.filter-buttons button.active {
    border-color: #1b144d; /* Farbe des Rahmens für den aktiven Button */
}

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

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

label {
    font-size: clamp(16px, 2.5vw, 20px)!important;
}

form.ncore_user_form.ncore_form_narrow input[type=password], form.ncore_user_form.ncore_form_narrow input[type=password]:focus, form.ncore_user_form.ncore_form_narrow input[type=text], form.ncore_user_form.ncore_form_narrow input[type=text]:focus {
    height: 30px!important;
}

.primary, input[type=submit] {
    padding: 7px 14px;
    font-size: clamp(16px, 2.5vw, 20px)!important;
    border-radius: 20px 0 20px 0;
    background-color: #181f4e;
    border: 1px solid #181f4e;
    color: white!important;
    transition: background-color 0.2s;
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.primary:hover {
    background-color: #2c4d81;
}

.secondary {
    border-bottom: 1px solid #1b144d;
    background-color: #ffffff;
    color: #1b144d;
    padding: 8px 0 4px 0;
    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;
    gap: 7px;
    flex-wrap: nowrap;
    transition: padding 0.3s;
}

.secondary:hover {
    padding: 4px 0 8px 0;
}

.secondary img {
    max-width: clamp(18px, 2.5vw, 23px)!important;
}

.et_pb_button {
    text-decoration: none;
}

.more-link {
    text-decoration: none;
}

.et_pb_row {
    width: 90%;
    margin: 0 auto;
}

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

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

.autor img {

    border-radius: 100px;
}

/* ---------- Grundlayout ---------- */
.headerbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

img.logo{max-width:170px;}

/* ---------- DESKTOP NAV ---------- */

/* horizontale Liste & Abstände */
.nav-list{
  display:flex;
  justify-content:center;
  gap:4px;          /* Abstand zw. Menüpunkten */
  margin:0;
  padding:0;
  list-style:none;
}

/* Links & Drop-down-Buttons im Hauptmenü */
.nav-desktop a, .nav-secondary a,
.nav-desktop .submenu-trigger{
  display:inline-flex;
  align-items:center;
  gap:4px;
  text-decoration:none;
  padding:5px 10px;
  font:inherit;
  background:none;
  border:none;
  cursor:pointer;
  color: #1b144d;
}

/* kleine Icons / Pfeile */
.nav-desktop img, .nav-secondary img{width:25px;}

/* :hover + :focus – klar sichtbarer Fokus für Barrierefreiheit */

.nav-desktop a:focus-visible,
.nav-desktop .submenu-trigger:focus-visible{
  outline: 2px solid white!important;
    box-shadow: 0 0 0 4px black!important;
}

/* Pfeilanimation wenn aufgeklappt */
.arrow { transition: transform .3s ease; width: 30px; }

.submenu-trigger[aria-expanded="true"] .arrow {
  transform: rotate(180deg);
}

/* ---------- Drop-down / Submenü ---------- */
.nav-item{position:relative;}

.submenu{
  position:absolute;
  top:100%;
  left:0;
  width:400px;
  background:#fff;
  border:1px solid #c7d1df;
  border-radius:0 0 30px 0;
  box-shadow:2px 2px 20px rgba(129,129,129,.1);
  overflow:hidden;
  /* Ausgangszustand für Transition */
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}

/* wenn per `hidden` ausgeblendet → animiert */
.submenu[hidden]{
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
}

/* Links im Drop-down */
.submenu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  color:#000;
  border-radius: 0 !important;
  text-decoration:none;
  border-bottom:1px solid #c7d1df;
  background:#fff;
  transition:background-color .3s;
}

.submenu a:last-child{border-bottom:none;}

.submenu a:hover,
.submenu a:focus-visible{background:#f0f3f6;outline:none;}

/* ---------- MOBILE NAV (Burger + Pop-ups) ---------- */
.nav-mobile{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.nav-mobile-left{display:flex;align-items:center;width:50%;}
.nav-mobile-left img{width:130px;}

.nav-mobile-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  width:50%;
  gap:20px;
}

.nav-mobile-right img{width:30px;}

button{background:none;border:none;padding:0;cursor:pointer;}

/* ---------- Pop-up-Overlays ---------- */
.nav-popup{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  display:flex;justify-content:center;align-items:center;
  background:rgba(0,0,0,.5);
  z-index:1000;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease;
}

.nav-popup.visible{opacity:1;visibility:visible;}

@keyframes slideIn{from{opacity:0}to{opacity:1}}

.nav-popup-content{
  width:95%;height:95%;
  background:#f0f3f6;
  border:1px solid #c7d1df;
  border-radius:30px;
  overflow:hidden;
  box-shadow:2px 2px 10px rgba(0,0,0,.1);
  position:relative;
  text-align:left;
}

/* Schließen-Leiste */
.nav-popup-close {
  width:100%;
  background:#fff;
  padding:20px;
  display:flex;justify-content:center;
  font-size: clamp(20px, 2.5vw, 29px)!important;
  color:#181f4e;
}

.nav-popup-close button {
    font-size: clamp(20px, 2.5vw, 29px)!important;
  color:#181f4e;
}

/* Link-/Button-Liste im Pop-up */
.nav-popup-links{
  margin-top:20px;
  display:flex;flex-direction:column;align-items:center;
  font-size: clamp(20px, 2.5vw, 29px)!important;
}

.nav-popup-links a,
.nav-popup-links button{
  display:inline-flex;align-items:center;justify-content:center;
  gap:1px;
  padding:10px 0;
  text-decoration:none;
  font-size: clamp(20px, 2.5vw, 29px)!important;
  background:none;border:none;color:#181f4e;
}

#nav-toggle:focus-visible {
    outline:2px solid #fff;
    box-shadow:0 0 0 4px #000;
}

.nav-popup-links a:focus-visible,
.nav-popup-links button:focus-visible{
  outline:2px solid #fff;
  box-shadow:0 0 0 4px #000;
}

.nav-popup-links a img, .nav-popup-links button img {
    width: 22px;
    height: 22px;
}

/* Logout-Area im Pop-up */
.nav-popup-action a{
  position:absolute;bottom:0;left:0;width:100%;
  padding:20px;
  background:#b7dba1;color:#000;
  display:flex;justify-content:center;align-items:center;
  transition:background .3s;
}
.nav-popup-action a:hover,
.nav-popup-action a:focus-visible{background:#fff;}

/* ---------- MEDIA QUERIES ---------- */
@media (max-width:1100px){
  .headerbar{display:none;}
}

@media (min-width:1100px){
  .nav-mobile{display:none;}
}

/* ---------- Visually Hidden + Skip-Link ---------- */
.visually-hidden{
  position:absolute!important;
  clip:rect(1px,1px,1px,1px);
  padding:0;border:0;height:1px;width:1px;overflow:hidden;
}
.focusable:focus-visible{
  position:static!important;
  clip:auto!important;
  width:auto;height:auto;
  padding:8px 16px;
  outline:2px solid #000;
  background:#fff;
  z-index:10000;
}

* {
    font-size: clamp(16px, 2.5vw, 20px);
    line-height: 1.6;
    font-family: "encode"!important;
}

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

p.small {
    font-size: clamp(13px, 2.5vw, 16px)!important;
}

p.small a {
font-size: clamp(13px, 2.5vw, 16px)!important;
}

a.link {
  text-decoration: underline 1px dotted!important;
};

article {
    position: relative;
}

a.more-link {
    position: absolute;
    width: calc(100% - 30px); /* Anpassen, damit es nicht über die Box hinausragt */
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 15px;
    text-align: center;
    display: block;
    background-color: #f0f3f6;
    transition: background-color 0.3s;
  }
  a.more-link:hover {
    background-color: #d0d7dd;
  }
  .et_pb_post {
    border:4px solid white!important;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
  }

#page-container a {
    font-size: clamp(16px, 2.5vw, 20px);
    color: #1b144d;
    line-height: 1.6;
}

.et_pb_video_play {
    font-size: 94px!important;
color: #ffffff!important;
line-height: 1.6;
}

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

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

h1 {
    font-size: clamp(24px, 3vw, 30px)!important;
    color: #1b144d!important;
    line-height: 1.2;
    font-family: "commissioner"!important;
}

h1.entry-title {
    font-size: clamp(30px, 4vw, 50px)!important;
    font-weight: 200!important;
    color: #1b144d!important;
    line-height: 1.2;
    font-family: "commissioner"!important;
}

h1.anmeldung {
    font-size: clamp(30px, 5vw, 50px)!important;
    color: #1b144d!important;
    line-height: 1.2;
    font-family: "commissioner"!important;
}

h2 {
    font-size: clamp(24px, 4vw, 34px);
    color: #1b144d;
    line-height: 1.3;
    font-family: "commissioner"!important;
}

h3 {
    font-size: clamp(22px, 4vw, 28px);
    color: #1b144d;
    line-height: 1.4;
    font-family: "commissioner"!important;
}

.entry-title a {
    font-size: clamp(24px, 4vw, 32px);
    color: #1b144d!important;
    line-height: 1.9;
    font-family: "commissioner"!important;
}

h4 {
    font-size: clamp(18px, 3vw, 25px);
    line-height: 1.4;
    color: #1b144d!important;
    font-family: "commissioner"!important;
}

footer a {
    font-size: 14px!important;
}

footer p {
    font-size: 14px!important;
}

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

:root :where(.wp-element-button, .wp-block-button__link) {
    background-color: #20234c!important;
    border-radius: 0;
    margin-top: 10px;
    padding:5px 10px;
    border-radius: 5px;
    color: white!important;
    transition: background-color 0.3s;
}

.et_pb_post_content a {
    text-decoration: underline;
}

:root :where(.wp-element-button, .wp-block-button__link) a {
    color: white!important;
}

.pagination-wrapper {
    display: flex;
    justify-content: center;
    gap: 10px; /* Abstand zwischen den Buttons */
    margin-top: 30px; /* Abstand nach oben zum Projektcontainer */
}

.pagination-wrapper .load-page {
    padding: 8px 16px;
    border: 1px solid #f0f3f6;
    background-color: #f0f3f6;
    color: #20234c;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.pagination-wrapper .load-page:hover {
    background-color: #e4e7eb;
    color: #20234c;
}

.pagination-wrapper .load-page.active {
    background-color: #f0f3f6; /* Hintergrundfarbe für den aktiven Button */
    color: #c42d36; /* Textfarbe für den aktiven Button */
    border-color: #c42d36; /* Rahmenfarbe für den aktiven Button */
}

.button-redirect {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #f0f3f6;
    background-color: #f0f3f6;
    border-radius: 5px;
    border: 1px solid #20234c;
    transition: background-color 0.3s;
    margin-bottom: 10px;
}

.button-redirect img {
    width: 35px;
    margin-top: 5px;
}

.button-redirect-left {
    padding: 5px 10px;
    display: flex;
    align-items: center;
}

.button-redirect-right {
    border-left: 1px solid #20234c;
    padding: 5px 20px;
}

.button-redirect:hover {
    background-color: #e1e6eb!important;
}

.login {
    border: 1px solid #c7d1df;
    border-radius: 30px;
    overflow: hidden;
}

.login .top {
    background-color: #eff3f6;
    text-align: center;
    padding: 30px 10px;
}

.login .top img {
    width: 130px;
    margin-bottom: 15px;
}

.login .top h1 {
    margin-bottom: 10px;
}

.login .bottom {
    padding: 0 20px;
} 

.login .bottom {
    display: flex!important;
    justify-content: center!important;
    flex-direction: column!important;
    width: 100%;
}

.digimember_login {
    margin: 0 auto!important;
}

.ncore {
    text-align: center!important;
}

.ncore input[type=submit], .dm-dialog-button {
    margin-top: 20px!important;
    margin-bottom: 20px!important;
    padding: 10px 20px!important;
    border-radius: 20px 0 20px 0!important;
    background-color: #181f4e!important;
    border: none!important;
    transition: background-color 0.2s;
}

.ncore input[type=submit]:hover, .dm-dialog-button:hover {
    background-color: #2c4d81!important;
}

.ncore input[type=text] {
    border-bottom: 2px solid #52577a!important;
}

.ncore input[type=password] {
    border-bottom: 2px solid #52577a!important;
}

.dm-dialog-header {
    text-align: center!important;
    font-size: clamp(22px, 4vw, 28px)!important;
    color: #1b144d!important;
    line-height: 1.4!important;
    font-weight: 200!important;
    font-family: "commissioner"!important;
}

a.logout {
    padding: 7px 10px;
    transition: background-color 0.2s;
    display: flex;
    gap: 5px;
    align-items: center;
}

a.logout img {
    width: 25px;
}

a.logout:hover {
    
}

#project-search-input {
    border: none;
    border-radius: 20px 0 20px 0;
    padding: 10px 20px;
    color: white;
    min-width: 400px;
    background-color: #1b144d;
    box-shadow: 2px 2px 20px rgba(129, 129, 129, 0.1);
    margin: 20px auto 40px auto;
}

::placeholder {
  color: white;
  opacity: 1; /* Firefox */
}

.payment-companies {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.payment-companies img {
    height: 40px;
}