/*
Theme Name:   Pandanation Child
Template:     pandanation
Version:      1.0.0
*/


/*** NICHT EINKOMMENTIEREN ***/
/* EINKOMMENTIEREN */


/*** Info: Pixelwerte für den Umbruch der Viewports ***/
/*** 'xs'     => max-width: 575px   ***/
/*** 'sm'     => min-width: 576px   ***/
/*** 'md'     => min-width: 768px   ***/
/*** 'lg'     => min-width: 992px   ***/
/*** 'xl'     => min-width: 1200px  ***/
/*** 'xxl'    => min-width: 1400px  ***/
/*** 'xxxl'   => min-width: 1800px  ***/



/*** Einbinden der font-family ***/
/* 
@font-face {
    font-family: 'TheSansPlain';
    src: url("fonts/TheSansPlain-Regular.woff2") format('woff2'), url("fonts/TheSansPlain-Regular.woff") format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TheSansPlain';
    src: url("fonts/TheSansPlain-Bold.woff2") format('woff2'), url("fonts/TheSansPlain-Bold.woff") format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'RobotoSlab';
    src: url("fonts/RobotoSlab-Regular.woff2") format('woff2'), url("fonts/RobotoSlab-Regular.woff") format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'RobotoSlab';
    src: url("fonts/RobotoSlab-Bold.woff2") format('woff2'), url("fonts/RobotoSlab-Bold.woff") format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
} */



/*** Fontsize, Font Family, Line Height ***/

:root {
/* 
    --kdgs-font-family-primary: TheSansPlain, sans-serif;
    --kdgs-font-family-secondary: RobotoSlab, sans-serif; */
    
    --kdgs-font-size-H1-sm: calc(29 / 16 * 1rem);
    --kdgs-font-size-H2-sm: calc(21.7 / 16 * 1rem);
    --kdgs-font-size-H3-sm: calc(19.2 / 16 * 1rem); /* Also used for: Mobile Main nav */
    --kdgs-font-size-H4-sm: calc(17 / 16 * 1rem); /* Also used for: Mobile sub nav */
    --kdgs-font-size-H5-sm: calc(16.3 / 16 * 1rem); /* Also used for: Mobile meta nav */
    --kdgs-font-size-P-sm: calc(16 / 16 * 1rem);
    --kdgs-font-size-xl-sm: calc(23.5 / 16 * 1rem);
    --kdgs-font-size-lg-sm: calc(21.2 / 16 * 1rem);
    --kdgs-font-size-md-sm: calc(16.6 / 16 * 1rem);
    --kdgs-font-size-sm-sm: calc(15.2 / 16 * 1rem);
    --kdgs-font-size-xs-sm: calc(15 / 16 * 1rem);

    --kdgs-font-size-H1-xl: calc(96 / 16 * 1rem);
    --kdgs-font-size-H2-xl: calc(56 / 16 * 1rem);
    --kdgs-font-size-H3-xl: calc(42 / 16 * 1rem);
    --kdgs-font-size-H4-xl: calc(30 / 16 * 1rem); /* Also used for: Accordion */
    --kdgs-font-size-H5-xl: calc(26 / 16 * 1rem); /* Also used for: Desktop Main nav */
    --kdgs-font-size-P-xl: calc(22 / 16 * 1rem); /* Also used for: Desktop Sub nav */
    --kdgs-font-size-xl-xl: calc(66 / 16 * 1rem); /* Used for: Header */
    --kdgs-font-size-lg-xl: calc(53 / 16 * 1rem); /* Used for: Zitat Teaser */
    --kdgs-font-size-md-xl: calc(28 / 16 * 1rem); /* Used for: Footer Mails */
    --kdgs-font-size-sm-xl: calc(20 / 16 * 1rem); /* Used for: Desktop Metanav, footer columns, links */
    --kdgs-font-size-xs-xl: calc(16 / 16 * 1rem); /* Used for: Footer impressumm nav, referenzen */
}


/* Font Family */
body, .body {
    font-family: var(--kdgs-font-family-primary);
    font-weight: 400;
}
.lead { 
    font-family: var(--kdgs-font-family-secondary);
    font-weight: 400;
    line-height: 1.4;
}
h1, .h1 {
    font-weight: 400;
    font-family: var(--kdgs-font-family-secondary);
    line-height: 1.1;
}
h2, .h2 {
    font-weight: 400;
    font-family: var(--kdgs-font-family-secondary);
}
h3, .h3 {
    font-weight: 400;
    font-family: var(--kdgs-font-family-secondary);
    line-height: 1.4;
}
h4, .h4 {
       font-weight: 400;
    font-family: var(--kdgs-font-family-secondary);
    line-height: 1.4;
}
h5, .h5 {
    font-weight: 400;
    font-family: var(--kdgs-font-family-secondary);
}

b, strong {
    font-family: SourceSansPro-Semibold, sans-serif;
    font-weight: 400;
  }


/* Navi */

.mod-header .header-wrapper .main-nav .menu .menu-item a {
    font-family: var(--kdgs-font-family-secondary);	font-size: var(--kdgs-font-size-H4);
}

/* Footer */

.mod-footer {
  background-color: #eae8d7;
}

/* Links */

a, a:active, a:focus, a:visited, .link, .mod-header .header-wrapper .main-nav .menu .menu-item.current-menu-item > a {
  text-decoration: underline;
    text-decoration-color: #00728f;
  text-underline-offset: 5px;
    text-decoration-thickness: 2px;
}

.mod-header .header-wrapper .main-nav .menu .menu-item:hover > a, a:hover, .link:hover, .mod-header .header-wrapper .main-nav .menu .menu-item.current-menu-item > a:hover {
    text-decoration-color: #f5d200;
    text-decoration-thickness:2px;
}

/* Sticky Button */
a.sticky-button {
  background-color: var(--c-theme-3);
  color: #000;
    padding: 12px 1em;
}

a.sticky-button .svg-icon {
  display: none;
}

.link-title {
  font-family: var(--kdgs-font-family-secondary);
  font-size: var(--kdgs-font-size-H4);
}

a.sticky-button:hover {
    background-color: var(--c-theme-2);
    color:#fff;
}


/* Archive */

.mod-cpt-archiv .container-breakout .tile-container .teaser-container .title {
  font-weight: 400;
    font-family: var(--kdgs-font-family-secondary);
    font-size: 35px;
    line-height: 40px;
}

.link { 
  font-weight: 600;
}

.mod-cpt-archiv .container-breakout .tile-container .teaser-container .teaser-link {
  height: 100%;
  background-color: var(--c-theme-10);
}

.mod-cpt-archiv .container-breakout .tile-container .teaser-container .teaser-link .text-wrapper {
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow:2;
}

.mod-cpt-archiv .teaser {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.mod-cpt-archiv .container-breakout .tile-container .teaser-container .teaser-link .link-wrapper {
  padding: 20px;
}
@media (min-width: 768px){
  .mod-cpt-archiv .container-breakout .tile-container .teaser-container .teaser-link .link-wrapper {
    display: none;
  }
}

#cpt-archiv-search {
  font-family: var(--kdgs-font-family-secondary);
  font-size: 22px;
}

.mod-cpt-archiv .container-breakout .tile-container .teaser-container .teaser-link .event-date {
  margin-top: 20px;
  font-weight: 600;
}

.mod-cpt-archiv .container-breakout .tile-container .teaser-container .teaser-link .spendenziel {
  margin-top: 20px;
  font-size: 20px;
  margin-bottom: 10px;
}

.mod-cpt-archiv .container-breakout .tile-container .teaser-container .teaser-link .aktionsende {
  margin-top: 10px;
  font-size: 20px;
}

.mod-cpt-archiv .container-breakout .tile-container .teaser-container .teaser-link .spendenziel .label, .mod-cpt-archiv .container-breakout .tile-container .teaser-container .teaser-link .aktionsende .label {
  font-family: SourceSansPro-Semibold, sans-serif;
}

.mod-cpt-archiv .container-breakout .tile-container .teaser-container .teaser-link .kontakt {
  font-size: var(--kdgs-font-size-xs);
}

.mod-cpt-archiv .container-breakout .tile-container .teaser-container .teaser-link .text {
  font-size: 20px;
  overflow-wrap: break-word;
  hyphens: auto;
}


/* ==== BLÖCKE ==== */

/* Fullscreen Header */


.mod-full-screen-header{
    height: 100vh;
}

.mod-full-screen-header img {
    border-radius: 0;
}

.mod-full-screen-header .header-container .img-wrapper .a-image__picture img {
    height: 100vh;
    -webkit-mask-image: none;
    mask-image: none;
}


/*** Font Color ***/

body, .body,
.lead, 
h1, .h1, 
h2, .h2,
h4, .h4,
h5, .h5 {
    color: var(--c-text-primary);
}

h3, .h3 {
    color: var(--c-text-secondary);
}


/**********/
/* Header */
/**********/

/* Logo */
@media screen and (min-width: 1200px) {
    .mod-header .header-wrapper .home-link .img-wrapper {
        max-width: 270px;
    }
}

/* Header farbe */
.mod-header {
    background-color: var(--c-theme-4);
}

/* Navigation */
.mod-header .header-wrapper .main-nav {
    font-family: var(--kdgs-font-family-secondary);
}

.mod-header .header-wrapper .main-nav .menu .menu-item a {
    font-weight: 400;
  }

/* Metanavigation */
.mod-header .header-wrapper .meta-nav.above {
    top: 0px;
    background-color: white;
    padding: 7px 25px;
}

/* ---Formulare---*/

.form-check-input:checked {
  background-color: var(--c-theme-2);
  border-color: var(--c-theme-2);
}

.btn-primary, .btn-dark {
  --bs-btn-bg: var(--c-theme-2);
  --bs-btn-border-color: var(--c-theme-2);
  padding-bottom: 12px;
}

.form-group .form-select option{
  font-size: 18px !important;
}

/* ------ */
/* Blocks */
/* ------ */

.mod-header-mit-bild-breit .container-breakout {
    padding-top: var(--header-height);
}

/* --- Link List ----*/

.mod-links .link-list .link {
    text-decoration: underline;
    font-weight: 400;
    font-family: var(--kdgs-font-family-secondary);
    font-size: var(--kdgs-font-size-H2);
    text-decoration-color: #00728f;
  }
  .mod-links .link-list .link:hover {
    text-decoration-color: #f5d200;
  }

/*---------------*/
/* Single Aktion */
/*---------------*/

.mod-aktion {
  margin-bottom: 100px;
}

.mod-aktion .aktion-info {
  gap: 28px;
  font-size: var(--kdgs-font-size-H5);
  font-family: SourceSansPro-Semibold, sans-serif;
}

.mod-aktion .info-wrapper {
    border: 0;
    border-radius: var(--image-border-radius);
    padding: 35px;
    background-color: var(--c-theme-10);
}
@media (min-width: 768px){
  .mod-aktion .info-wrapper {
    padding:75px;
  }
}


.btn-success {
  background-color: var(--c-theme-2);
  font-family: var(--kdgs-font-family-secondary);
  font-size: var( --kdgs-font-size-H4);
  border-color: var(--c-theme-2);
  padding-bottom: 13px;

}

.btn-success:hover {
  background-color: var(--c-theme-7);
  border-color: var(--c-theme-7);
}

.list-group-item {
  border: 0;
    border-bottom-width: 0px;
    border-bottom-style: none;
    border-bottom-color: currentcolor;
  border-bottom: solid 2px #000;
  width: 100%;
  max-width: 800px;
}

.donation-info {
  display: flex;
  justify-content: space-between;
}

.list-group-item:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.aktionsende, .spendenziel {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.mod-single-post .content-wrapper {
  margin-top: 50px;
  margin-bottom: 150px;
}

.progress, .progress-stacked {
  --bs-progress-bg: white;
}
.bg-success {
  background-color: #009191 !important;
}

/* Beispiel mit Muster Hintergrund 
  .page-id-628 {
    background: url("/wp-content/themes/pandanation-child/final_curve.svg)");
    background-size: contain;
  }
  */