/*
    Theme Name: ZVA Erlangen
    Author: Birke und Partner GmbH (Pedro Stoehr)
    Author URI: https://birke.de
    Template: bones
     __                           
    /\ \                          
    \ \ \____  __  __  _____      
     \ \  __ \/\ \/\ \/\  __ \    
      \ \ \_\ \ \ \_\ \ \ \_\ \ __ 
       \ \____/\ \____/\ \  __//\_\
        \/___/  \/___/  \ \ \/ \/_/
                         \ \_\    
                          \/_/      
*/

/* ------------------------------------------------------------------------
// ANCHOR Imports
------------------------------------------------------------------------ */

@import url('../bones/vendor/bootstrap-5.3.8-dist/css/bootstrap.min.css');
@import url('modules/mod-navigation/navigation.css');

/* ------------------------------------------------------------------------
// ANCHOR Vars
------------------------------------------------------------------------ */

:root {
  --theme-white: #ffffff;
  --theme-white-rgb: 255 255 255;
  --theme-black: #000000;
  --theme-black-rgb: 0 0 0;
  --theme-primary: #009d8b;
  --theme-primary-rgb: 0 157 139;
  --theme-secondary: #76b82a;
  --theme-secondary-rgb: 118 184 42;
  --theme-primary-hover: #006b5b;
  --theme-primary-hover-rgb: 0,107,91;
  --theme-primary-active: #006b5b;
  --theme-primary-active-rgb: 0,107,91;
  --theme-beige: #f1f1f1;  
  --theme-beige-rgb: 241,237,235;
  --theme-beige-mid: #f8f8f8;  
  --theme-beige-dark: #c1b6b2;
  --theme-beige-dark-rgb: 193 182 178;
  --theme-yellow: #ffcc00;
  --theme-border-radius: 10px;
  --bs-link-color: var(--theme-primary);
  --bs-link-color-rgb: 0,157,139;
  --bs-link-hover-color: var(--theme-primary-hover);
  --bs-link-hover-color-rgb: 0,107,91;
    --accent: #2563eb;
  --border: #e5e7eb;
  --muted: #6b7280;
  --radius: 0.75rem;
}


@keyframes Gradient {
	0%{background-position:0 50%}
	50%{background-position:100% 50%}
	100%{background-position:0 50%}
}

/* ------------------------------------------------------------------------
// ANCHOR A11Y
------------------------------------------------------------------------ */

.hidden{display:none!important}
.visually-hidden{position:absolute!important;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;word-wrap:normal}
.visually-hidden.focusable:focus,.visually-hidden.focusable:active{position:static!important;overflow:visible;clip:auto;width:auto;height:auto}
.invisible{visibility:hidden}
a:focus,input:focus,button:focus,select:focus,textarea:focus,[tabindex]:not([tabindex="-1"]):focus{outline:2px solid currentColor!important;outline-offset:2px}
[class^="icon-"],[class*=" icon-"],[class^="element-"],[class*=" element-"]{display:inline-block;width:1em;aspect-ratio:1 / 1;stroke-width:0;stroke:currentColor;fill:currentColor;line-height:1;margin:0;padding:0}
#skiptocontent a{position:absolute;top:-40px;left:0;z-index:100000;padding:6px;color:var(--theme-white);background:var(--theme-petrol);border-right:1px solid var(--theme-white);border-bottom:1px solid var(--theme-white);border-bottom-right-radius:8px;transition:top .5s ease-out}
#skiptocontent a:focus{top:0;outline-color:transparent;transition:top .05s ease-in}
@media (prefers-reduced-motion: reduce) {#skiptocontent a{transition-duration:.001ms!important}}

.wpforms-container input:focus,
.wpforms-container button:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus,
.submenu-toggle:focus,
[tabindex]:not([tabindex="-1"]):focus {
  outline: none !important;
  outline-offset: 0;
}


/* ------------------------------------------------------------------------
// ANCHOR Bootstrap
------------------------------------------------------------------------ */

.container {
  padding-inline: 1.5rem;
}

.btn-primary {
  font-size: 1.1rem;
  padding: .5rem 1rem;
  --bs-btn-color: var(--theme-white);
  --bs-btn-bg: var(--theme-primary);
  --bs-btn-border-color: var(--theme-primary);
  --bs-btn-hover-color: var(--theme-white);
  --bs-btn-hover-bg: var(--theme-primary-hover);
  --bs-btn-hover-border-color: var(--theme-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--theme-primary);
  --bs-btn-active-color: var(--theme-white);
  --bs-btn-active-bg: var(--theme-primary-active);
  --bs-btn-active-border-color: var(--theme-primary-active);
  --bs-btn-active-shadow: inset 0 3px 5px rgb(var(--theme-black-rgb) / 2%);
  --bs-btn-disabled-color: var(--theme-white);
  --bs-btn-disabled-bg: rgb(var(--theme-primary-light));
  --bs-btn-disabled-border-color: var(--theme-beige-dark);
}

.btn-sm {
  font-size: .9rem;
  padding: .25rem .5rem
}

/* ------------------------------------------------------------------------
// ANCHOR WordPress
------------------------------------------------------------------------ */

.wp-block-button__link{background-color:var(--theme-black);color:var(--theme-white);padding:.75rem 1rem;border-radius:6px;font-size:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center;margin-block:.5rem 1.5rem;transition:background-color .3s ease;text-decoration:none;font-weight:600}
.wp-block-button__link:hover{background-color:var(--theme-primary-hover)}
.wpforms-page-indicator-steps{display:none!important}
.wp-block-table,.wp-block-table table{width:100%;border-collapse:collapse;border-spacing:0;margin:0;padding:0}
.wp-block-table th,.wp-block-table td{border:none;padding:.5rem .75rem;text-align:left;vertical-align:top}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd){background:transparent!important}
.wp-block-table table.has-fixed-layout{table-layout:auto!important}
.wp-block-table thead{border:0}
.wp-element-caption{width:100%;max-width:680px;padding:0 2rem;padding-top:1rem;text-align:center;margin:0 auto}
.wp-element-caption.wide{max-width:800px}
.wp-block-image{padding:1.5rem 0}
.wp-block-image.size-large img,.wp-block-image.size-full img{border-radius:6px;display:block;height:auto;max-width:100%;width:1200px}

/* ------------------------------------------------------------------------
// SECTION Plugins
------------------------------------------------------------------------ */

.random-image-strip{display:flex;flex-wrap:nowrap;width:100%;gap:0}
.random-image-strip__item{flex:1 1 0;margin:0;padding:0}
.random-image-strip__item img{display:block;width:100%;height:auto}

/* !SECTION */

/* ------------------------------------------------------------------------
// SECTION Globals
------------------------------------------------------------------------ */

/* ANCHOR html, body */

body{background:var(--theme-beige);color:var(--theme-black);font-size:1rem;line-height:1.5;overflow-x:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
h1,h2{color:var(--theme-primary);text-align:center}
h2{text-align:left;padding-block:1rem;font-weight:700}
h3{font-size:1.4rem;font-weight:700;padding-top:1rem;padding-bottom:.5rem}
h4{font-size:1rem;font-weight:700;padding-top:.75rem;padding-bottom:.5rem}
.small-nfo{font-size:.9rem}

/* ANCHOR Header */

.site-header{position:absolute;top:0;left:0;right:0;z-index:9001;background-color:var(--theme-white);border-bottom:1px solid var(--theme-beige)}
html > body .site-header{position:fixed}
.site-header .container.mast{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;position:relative;padding-block:1rem}
.brand-logo{display:inline-block}
.brand-logo svg{height:54px;width:120px;stroke-width:0;stroke:currentColor;fill:currentColor}

/* ANCHOR Main */

main {
  background-color: var(--theme-white);
  padding-top: 88px;
  padding-bottom: 2rem;
}

/* ANCHOR Footer */

.site-footer{font-size:.9rem;line-height:1.5;padding:2rem 0 1.5rem 0}
.site-footer ul{list-style-type:none;margin:0;padding:0}
.site-footer p{margin-bottom:.15rem}
.site-footer strong{text-transform:uppercase}
.site-footer a{color:var(--theme-black);text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* !SECTION */

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

/* ANCHOR Spacer */

.block-spacer{margin:clamp(2rem, 4vw, 4rem) 0}

/* ANCHOR Hero */

.hero-img,.hero-txt{margin-bottom:clamp(.5rem,1.25vw,3rem)}
.hero-img{position:relative;width:100%;background-size:cover;background-position:center center;display:flex;align-items:center;max-height:280px;aspect-ratio:16 / 9}
.hero-img .container{position:relative;z-index:2}
.hero-img:not(.home)::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.4);z-index:1}
.hero-img.home{max-height:840px}
.hero-wrapper{position:relative;width:100%;aspect-ratio:16 / 9;max-height:840px;overflow:hidden}
.hero-gradient{position:absolute;inset:0;z-index:1;background:linear-gradient(121deg,var(--theme-primary),var(--theme-secondary),var(--theme-primary));background-size:200% 200%;animation:Gradient 15s ease infinite}
.hero-img{position:relative;inset:0;z-index:2;background-size:cover;background-position:center center;width:100%;height:100%;display:flex;align-items:center}
.hero-img h1{color:var(--theme-white);font-weight:800;line-height:1.1;font-size:clamp(1.5rem,6vw,4rem);margin:0;padding:0}
.hero-img.home h1{font-size:clamp(1.5rem,6vw,5rem);max-width:60%}
.hero-txt{position:relative;width:100%;display:flex;align-items:center;max-height:160px;aspect-ratio:16 / 9}
.hero-txt h1{font-weight:700;line-height:1.1;font-size:clamp(1.5rem,6vw,4rem);margin:0;padding:0}

/* ANCHOR Storys */

.block-storys .story-item{margin-bottom:2rem}
.block-storys .story-item a{color:var(--theme-black);display:block;text-decoration:none}
.block-storys .story-cats{font-size:.85rem;margin-bottom:.75rem}
.block-storys .story-cats a{border-radius:1rem;border:1px solid var(--theme-beige-dark);color:var(--theme-black);display:inline-block;line-height:1;font-weight:500;padding:.2rem .5rem .25rem}
.block-storys .story-cats a:hover{border-color:var(--theme-primary);background-color:var(--theme-primary);color:var(--theme-white)}
.block-storys a h3{color:var(--theme-primary)}
.block-storys a:hover h3{text-decoration:underline}

/* ANCHOR Sharing is caring */

.txt-share{text-align:center;padding-top:2rem}
.txt-share p{font-family:var(--theme-font-extra-two)}
.txt-share ul{list-style-type:none;margin:0 auto;padding:0}
.txt-share li{display:inline-block;margin:0 .15rem}
.txt-share [class^="icon-"],.txt-share [class*=" icon-"]{width:1.75em}
.txt-share a,.txt-share a:hover,.txt-share a:focus{box-shadow:none}

/* ANCHOR Intro */

.block-intro{font-size:clamp(1rem,2vw,1.3rem);margin-bottom:2rem;font-weight:500}

/* ANCHOR Tiles */

.block-tile{position:relative;margin-bottom:3rem}
.block-tile .tile-content{background:linear-gradient(221deg,var(--theme-primary) 53%,var(--theme-secondary) 100%);border-radius:var(--theme-border-radius);color:var(--theme-white);width:85%;padding:85px 43% 65px 90px;min-height:450px;display:flex;align-items:center}
.block-tile .tile-image{position:absolute;right:0;top:50%;z-index:10;width:50%;transform:translate(0,-50%)}
.block-tile.reverse .tile-content{background:linear-gradient(121deg,var(--theme-primary) 53%,var(--theme-secondary) 100%);padding:85px 90px 65px 43%;margin-left:15%}
.block-tile.reverse .tile-image{right:auto;left:0}
.block-tile img{border-radius:var(--theme-border-radius)}
.block-tile .wp-block-button__link{background-color:var(--theme-white);color:var(--theme-black);padding:.75rem 1rem;border-radius:6px;font-size:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center;margin-block:.5rem 1.5rem;transition:all .3s ease;text-decoration:none;font-weight:600}
.block-tile .wp-block-button__link:hover{background-color:var(--theme-white);color:var(--theme-primary-hover)}

/* ANCHOR Zitate */

.block-zitat{font-weight:600;font-size:clamp(1rem,2vw,1.5rem)}
.block-zitat p:last-child{font-weight:400;font-size:1rem;font-style:italic}

/* ANCHOR Boxes */

.block-box{border:3px solid;border-radius:var(--theme-border-radius);padding:1.75rem 2rem 1rem}
.block-box h2{padding-top:0;padding-bottom:1rem;margin-bottom:0}
.block-box h3:first-child{padding-top:0}
.box-default{border-color:var(--theme-primary)}
.box-hinweis{border-color:var(--theme-yellow);background-color:var(--theme-yellow)}
.box-hinweis h2{color:var(--theme-black)}
.box-soft{border:0;background:var(--theme-beige);background:linear-gradient(221deg,var(--theme-beige-mid) 53%,var(--theme-beige) 100%);box-shadow:none}

/* ANCHOR FAQ */

.block-faq{display:flex;flex-direction:column;gap:1rem}
details{border:1px solid var(--border);border-radius:var(--radius);background:#fff;overflow:hidden;padding:0}
summary{list-style:none;cursor:pointer;padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;font-weight:600;position:relative;user-select:none}
summary::-webkit-details-marker{display:none}
details[open] summary{background-color:var(--theme-primary);color:var(--theme-white);border:1px solid var(--theme-primary)}
details[open]{border-color:var(--theme-primary)}
summary:focus{outline:none}
summary:focus-visible{background-color:rgba(37,99,235,0.08)}
summary::after{content:"";width:1rem;height:1rem;margin-left:1rem;flex-shrink:0;background:linear-gradient(var(--theme-primary),var(--theme-primary)) center/100% 2px no-repeat,linear-gradient(var(--theme-primary),var(--theme-primary)) center/2px 100% no-repeat}
details[open] summary::after{background:linear-gradient(var(--theme-white),var(--theme-white)) center/100% 2px no-repeat}
details > :not(summary){padding:1.5rem 1.5rem 1rem;margin:0}

/* ANCHOR Tables */

.wp-block-table table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.4;margin-bottom:1.5rem}
.wp-block-table thead th{font-weight:600;padding:.75rem;background:var(--theme-primary);white-space:nowrap;color:#FFF}
.wp-block-table thead th:first-child{border-radius:var(--theme-border-radius) 0 0 0}
.wp-block-table thead th:last-child{border-radius:0 var(--theme-border-radius) 0 0}
.wp-block-table td{padding:.75rem;border:1px solid #e2e2e2}
.wp-block-table tbody tr:nth-child(odd){background:#fafafa}
@media (min-width: 769px) {
  .wp-block-table table,.wp-block-table thead,.wp-block-table tbody,.wp-block-table th,.wp-block-table td,.wp-block-table tr{display:table}
  .wp-block-table thead{display:table-header-group}
  .wp-block-table tbody{display:table-row-group}
  .wp-block-table tr{display:table-row}
  .wp-block-table th,.wp-block-table td{display:table-cell;position:static;padding-left:.75rem}
  .wp-block-table td::before{content:none!important}
}
@media (max-width: 768px) {
  .wp-block-table table,.wp-block-table thead,.wp-block-table tbody,.wp-block-table th,.wp-block-table td,.wp-block-table tr{display:block}
  .wp-block-table thead{display:none}
  .wp-block-table tbody tr{margin-bottom:1rem;border:1px solid #ddd;border-radius:var(--theme-border-radius);padding:.25rem .75rem}
  .wp-block-table td:first-child{color:var(--theme-primary);font-size:1.2rem;font-weight:700;padding:1rem .75rem .25rem 0;border-bottom:none;display:block;width:100%;text-align:left}
  .wp-block-table td:first-child::before{content:none!important}
  .wp-block-table td{position:relative;display:flex;align-items:center;min-height:2.5rem;padding:.75rem 0 .75rem 45%;border-color:#EEE;border-width:0 0 1px;box-sizing:border-box}
  .wp-block-table td::before{content:attr(data-th);position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;width:40%;font-weight:bold;white-space:nowrap;padding-right:.5rem}
  .wp-block-table td:last-child{border-bottom:none}
}

/* ANCHOR Pre-Footer */

.pre-footer{background-color:var(--theme-primary);padding:1.5rem 0;font-size:.9rem;color:var(--theme-white);line-height:1.2}
.pre-footer p{margin-bottom:.5rem}
.pre-footer p:last-child{margin-bottom:0}
.pre-footer a{color:var(--theme-white)}
.spalten-item{padding:0 1rem 1.5rem;background:var(--theme-beige);background:linear-gradient(221deg,var(--theme-beige-mid) 53%,var(--theme-beige) 100%);border-radius:var(--theme-border-radius)}
.spalten-item h3{text-align:center;color:var(--theme-primary)}

/* !SECTION */

/* ------------------------------------------------------------------------
// SECTION Responsive, Baby!
------------------------------------------------------------------------ */

/* ANCHOR Extra Large */

@media screen and (min-width: 1200px) {
  .container,.container-md,.container-sm{max-width:1200px}
}

/* ANCHOR Large */

@media screen and (min-width: 992px) {
  .site-hero.home h1{text-align:left!important}

.nav-toggle {
    display: none;
  }

}

/* ANCHOR Small + Medium */

@media screen and (max-width: 991.98px) {
  .block-tile{margin-bottom:2rem}
  .site-footer .footer-item{margin-bottom:1rem}
  main{padding-top:75px}
  .site-header .container.mast{padding-block:1rem}
}

/* ANCHOR Medium */

@media screen and (min-width: 576px) and (max-width: 991.98px) {
  .block-tile .tile-content{padding:42.5px 23% 32.5px 45px;min-height:350px}
  .block-tile.reverse .item-content{padding:42.5px 45px 32.5px 23%}
  .block-tile .tile-image{width:33%}
}

/* ANCHOR Small */

@media screen and (max-width: 575.98px) {
  .block-tile .tile-content{padding:30px 25px 20px;min-height:0!important;width:100%}
  .block-tile.reverse .tile-content{padding:30px 25px 20px;margin:0}
  .block-tile .tile-image{position:relative;right:0;top:0;left:0;width:100%;transform:translate(0,0)}
  .block-tile .tile-content{border-radius: 0 0 var(--theme-border-radius) var(--theme-border-radius);}
  .block-tile .tile-image img{border-radius: var(--theme-border-radius) var(--theme-border-radius) 0 0;}
}


/* --------- Toggle */

.nav-toggle {
  display: inline-block;
  border: none;
  background-color: transparent;
  padding: 0.5rem;
  font-weight: bold;
  line-height: 1;
}

.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.nav-toggle[aria-expanded="false"] .icon-close {
  display: none;
}

.nav-toggle [class^="icon-"],
.nav-toggle [class*=" icon-"] {
  width: 1.5em;
  height: 1.5em;
}












/* // ANCHOR Responsive, Baby!
------------------------------------------------------------------------ */


/* --------- LARGE */

@media screen and (min-width: 992px) {

/*


  

  nav > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 1rem;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
  }

  nav > ul > li {
    position: relative;
  }

  nav > ul > li a {
    display: inline-block;
    position: relative;
    color: var(--theme-black);
    font-weight: 500;
    text-decoration: none;
    padding-block: 0.3rem;
  }



nav > ul > li.current-menu-item > a,
nav > ul > li.current_page_item > a {
  color: var(--theme-primary);
}


nav > ul > li:has(.current-menu-item,
                  .current-menu-ancestor,
                  .current_page_item,
                  .current_page_ancestor,
                  .current-page-ancestor) > a {
  color: var(--theme-primary);
}


nav ul.sub-menu li.current-menu-item > a,
nav ul.sub-menu li.current_page_item > a,
nav ul.sub-menu li.current-menu-ancestor > a,
nav ul.sub-menu li.current_page_ancestor > a,
nav ul.sub-menu li.current-page-ancestor > a {
  color: var(--theme-primary);
}


nav > ul > li.current-menu-item > a:hover,
nav > ul > li.current_page_item > a:hover,
nav > ul > li:has(.current-menu-item,
                  .current-menu-ancestor,
                  .current_page_item,
                  .current_page_ancestor,
                  .current-page-ancestor) > a:hover,
nav ul.sub-menu li.current-menu-item > a:hover,
nav ul.sub-menu li.current_page_item > a:hover,
nav ul.sub-menu li.current-menu-ancestor > a:hover,
nav ul.sub-menu li.current_page_ancestor > a:hover,
nav ul.sub-menu li.current-page-ancestor > a:hover {
  text-decoration: underline;
}





 

  nav > ul > li.menu-item-type-custom a {
    color: var(--theme-black) !important;
  }

  nav > ul > li a:hover {
    text-decoration: underline;
  }

  nav > ul > li > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: -1rem;
    right: 0;
    background-color: var(--theme-white);
    font-size: 0.9rem;
    list-style: none;
    padding: 0.75rem .5rem .25rem 1rem;
    margin: 0;
    min-width: 280px;
    box-shadow: 0 0 1px var(--theme-beige-dark);
  }

  nav > ul > li > ul > li {
    margin-bottom: 0.25rem;
  }

  nav > ul > li.open > ul {
    display: block;
  }


  nav > ul > li.menu-item-has-children {
    position: relative;
    --toggle-w: 1em;
    --toggle-pad: 0.15rem;
  }


  nav > ul > li.menu-item-has-children > a {
    padding-right: calc(var(--toggle-w) + var(--toggle-pad));
  }


.submenu-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: currentColor;
}

.submenu-toggle::after {
  content: "";
  display: block;
  width: 14px !important;
  height: 12px !important;
  flex-shrink: 0;
  margin-left: 0.5rem;

  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' stroke='currentColor' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='3 4 7 8 11 4' />\
</svg>");
}

.submenu-toggle:hover,
.submenu-toggle:focus {
  color: var(--theme-primary);
}

.submenu-toggle {
  padding-right: 0.35rem;
}

.submenu-toggle::after {
  margin-left: 0.5rem;
}
*/

}

/* --------- SMALL + MEDIUM */

@media screen and (max-width: 991.98px) {



  /*

  nav {
    flex: 0 0 100%;
    max-width: 100%;
  }

  nav > ul,
  nav > ul > li > ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  nav > ul > li > ul {
    margin-left: 1rem;
    font-size: 0.9rem;
  }

  nav > ul {
    border-top: 1px solid var(--theme-beige-dark);
    margin-top: 1.5rem;
    padding-block: 1rem;
  }

  .submenu-toggle {
    display: none !important;
  }

  #main-nav {
    display: none;
  }

  #main-nav.open {
    display: block;
  }

*/
  

}



/*! END OF LINE */