/*
:root {
  --jh-jugendhaus: #445577; 
  --jh-kinder: #bc40cc;
  --jh-ebersberg: #618034;
  --jh-theater: #996f00;
  --jh-jugend: #2066cf;
  --jh-treff: #e91f00;
}
*/
:root {
    --jh-jugendhaus: #444;
    --jh-jugendhaus-logo:#ff4d00;
    --jh-jugendhaus-bar: #d74100;
    /* --jh-jugendhaus-logo-hover: #d67c5c; */
    --jh-jugendhaus-logo-hover: #ff8040;
    --jh-kinder: #862a72;
    --jh-ebersberg: #5c8840;
    --jh-theater: #996f00;
    --jh-jugend: #2a5ea3;
    --jh-treff: #864444;
}

@font-face {
    font-family: 'isp_light';
    src: url('/assets/font/ipluslight-webfont.woff2') format('woff2'),
         url('/assets/font/ipluslight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'isp_light';
    src: url('/assets/font/iplusbold-webfont.woff2') format('woff2'),
         url('/assets/font/iplusbold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

body {
    font-family: 'isp_light', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #444;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Extra Large */
@media (min-width: 1600px) {
  body {
    font-size: 20px;
    line-height: 30px;
  }
}


/* Farbklassen */
.jh-bg-red { background-color: var(--jh-kinder); }
.jh-bg-green { background-color: var(--jh-ebersberg); }
.jh-bg-blue { background-color: var(--jh-jugend); }
.jh-bg-yellow { background-color: var(--jh-theater); }
.jh-bg-orange { background-color: var(--jh-treff); }
.jh-bg-grey { background-color: var(--jh-jugendhaus-bar); }
.jh-start-block.jh-bg-grey h2 {
  background-color: var(--jh-jugendhaus-logo);
}
.jh-start-block.jh-bg-grey a:hover h2 {
  background-color: var(--jh-jugendhaus-logo-hover);
}
h1 {
    font-size: 2.8rem;
    line-height:120%;
    font-weight: bold;
    margin:0;
    padding:0;
    margin-bottom:0.5rem;
}
h2 {
    font-size:1.7rem;
    line-height:120%;
    font-weight: bold;    
    margin:0;
    padding:0;
    margin-bottom:0.25rem;
}
h3 {
    font-size: 1.2rem;
    line-height:120%;
    font-weight: bold;    
    margin:0;
    padding:0;
    margin-bottom:0.5rem;
}

.jh-event-details h1,
.jh-event-details h1 * {
    color:white !important;
}
.jh-event-details h1 {
  display:inline-block;
  padding:5px 10px !important;
  margin-bottom:10px;
}


a, button,input {
  outline: none;
  box-shadow: none;
  border:none;
  background:transparent;
}
.nowrap {
    white-space: nowrap;
}
cite {
    color:#888;
    font-size:1.2rem;
    line-height:140%;
    letter-spacing: 1px;
}

/* Hauptinhalt */
#jh-content {
    position:relative;
    left: 0px;
    top:0;
    margin-left: 195px;
    min-height: 100vh;
    transition: margin-left 0.3s ease;
    z-index:20;
}

.jh-modal {
    position:fix;
    left:0;
    top:0;
    z-index:80000;
}

/* Responsive image-Container für festes Seitenverhältnis */
.jh-img-container {
  display: block;
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* 4:3 Verhältnis */
  overflow: hidden;
}

.jh-img-container-3-2 {
  padding-bottom: 66.67%; /* 3:2 Verhältnis */
}

.jh-img-container-16-9 {
  padding-bottom: 56.25%; /* 16:9 Verhältnis */
}

.jh-img-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%; /* Begrenzt die Breite auf den Container */
  max-height: none; /* Erlaubt dem Bild, höher als der Container zu sein */
}

a .jh-img-container img {
  transition: transform 0.3s ease;
}

a:hover .jh-img-container img {
  transform: translate(-50%, -50%) scale(1.05);
}

#jh-logo {
  position: absolute;
  left: 45px;
  top: 134px;
  text-decoration: none;
  color:white;
  display: inline-block;
  transition: left 0.3s ease, top 0.3s ease;
}

.icon-logo-jhf {
  font-size:405px;
  line-height:405px;
  transition: font-size 0.3s ease;
}

#jh-menu-btn {
    display: block;
    position: absolute;
    top: 25px;
    left: 45px;
    width: 70px;
    height: 70px;
    padding-top:14px;
    text-align:center;
    font-size: 38px !important;
    line-height: 38px !important;
    z-index: 1001; /* Höherer z-index als andere Elemente */
    border-radius: 4px;
    color:white;
    transition: all 0.3s ease;
}

#jh-header.jh-style-jugendhaus #jh-menu-btn {
  color:var(--jh-jugendhaus);
}

#jh-menu-btn:hover {
    color:white;
    background-color:var(--jh-jugendhaus);
    text-decoration: none;
}
.jh-style-jugendhaus #jh-menu-btn:hover {
  color:white !important;
}
.jh-style-kinder #jh-menu-btn:hover {
  color:var(--jh-kinder);
  background-color:white;
}
.jh-style-ebersberg #jh-menu-btn:hover {
  color:var(--jh-ebersberg);
  background-color:white;
}
.jh-style-theater #jh-menu-btn:hover {
  color:var(--jh-theater);
  background-color:white;
}
.jh-style-jugend #jh-menu-btn:hover {
  color:var(--jh-jugend);
  background-color:white;
}
.jh-style-treff #jh-menu-btn:hover {
  color:var(--jh-treff);
  background-color:white;
}

#jh-search {
    height:130px; 
    position:relative;
}
#jh-search-btn {
    position:absolute;
    left: 0px;
    top: 20px;
    width: 70px;
    height: 70px;
    padding:4px 0 0 0px;
    font-size: 45px;
    line-height: 45px;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-align:left;
    color:var(--jh-jugendhaus);
}
.jh-style-kinder #jh-search-btn {
  color: var(--jh-kinder);
}
.jh-style-ebersberg #jh-search-btn {
  color: var(--jh-ebersberg);
}
.jh-style-theater #jh-search-btn {
  color: var(--jh-theater);
}
.jh-style-jugend #jh-search-btn {
  color: var(--jh-jugend);
}
.jh-style-treff #jh-search-btn {
  color: var(--jh-treff);
}

#jh-search-btn:hover {
  background-color:var(--jh-jugendhaus);
  color: #fff;
  text-decoration: none;
  padding-left:15px;
}
.jh-style-kinder #jh-search-btn:hover {
  background-color:var(--jh-kinder);
}
.jh-style-ebersberg #jh-search-btn:hover {
  background-color:var(--jh-ebersberg);
}
.jh-style-theater #jh-search-btn:hover {
  background-color:var(--jh-theater);
}
.jh-style-jugend #jh-search-btn:hover {
  background-color:var(--jh-jugend);
}
.jh-style-treff #jh-search-btn:hover {
  background-color:var(--jh-treff);
}
#jh-search-btn.deactivated {
  opacity:0.4;
  background:none !important;
  padding-left:15px;
  cursor:default;
  color:var(--jh-jugendhaus);
}
.jh-style-kinder #jh-search-btn.deactivated {
  color:var(--jh-kinder);
}
.jh-style-ebersberg #jh-search-btn.deactivated {
  color:var(--jh-ebersberg);
}
.jh-style-theater #jh-search-btn.deactivated {
  color:var(--jh-theater);
}
.jh-style-jugend #jh-search-btn.deactivated {
  color:var(--jh-jugend);
}
.jh-style-treff #jh-search-btn.deactivated {
  color:var(--jh-treff);
}
#jh-search-input-wrapper {
  display:none;
  position:absolute;
  left: 80px;
  right:0;
  top: 30px;
  overflow:hidden;
}
#jh-search-input {
    width:0;
    font-size:34px;
    line-height:34px;
    border-bottom:2px solid var(--jh-jugendhaus);
    
    border-top:none;
    border-left:none;
    border-right:none;
    transition: width 0.2s ease-out;
    background:#fff;
}

#jh-search-input.jh-active {
    width:100%;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #aaa;
  opacity: 1;
}

::-webkit-input-placeholder { /* Chrome, Safari, Edge */
  color: #aaa;
}

::-moz-placeholder { /* Firefox 19+ */
  color: #aaa;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #aaa;
}

:-moz-placeholder { /* Firefox 18- */
  color: #aaa;
}

#jh-subheader {
  display:none;
  position:absolute;
  top:-20;
  left:-25px;
  right:0;
  height:110px;
  bottom:auto;
}
.jh-style-jugendhaus #jh-subheader {
    background-color:var(--jh-jugendhaus-2);
}
.jh-style-ebersberg #jh-subheader {
    background-color:var(--jh-ebersberg-2);
}
.jh-style-kinder #jh-subheader {
    background-color:var(--jh-kinder-2);
}
.jh-style-theater #jh-subheader {
    background-color:var(--jh-theater-2);
}
.jh-style-jugend #jh-subheader {
    background-color:var(--jh-jugend-2);
}
.jh-style-treff #jh-subheader {
    background-color:var(--jh-treff-2);
}


/* Header-Bereich */
#jh-header {
    background:white;
    height: 100%;
    width: 160px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1030;
    transition: all 0.3s ease;
    overflow:hidden;
    border-right:2px solid var(--jh-jugendhaus);
}

#jh-header.jh-style-kinder {
  background-color: var(--jh-kinder);
  color:white;
  border-right:none;
}
#jh-header.jh-style-ebersberg {
  background-color: var(--jh-ebersberg);
  color:white;
  border-right:none;
}
#jh-header.jh-style-theater {
  background-color: var(--jh-theater);
  color:white;
  border-right:none;
}
#jh-header.jh-style-jugend {
  background-color: var(--jh-jugend);
  color:white;
  border-right:none;
}
#jh-header.jh-style-treff {
  background-color: var(--jh-treff);
  color:white;
  border-right:none;
}

#jh-header.jh-style-jugendhaus #jh-logo {
  color: var(--jh-jugendhaus-logo);
}


/* XL */
.row {
  margin-right: -18px;
  margin-left: -18px;
  margin-bottom: -36px; /* Negativer Margin für vertikalen Abstand */
}
[class*="col-"] {
  padding-right: 18px;
  padding-left: 18px;
  padding-bottom: 36px; /* Vertikaler Abstand */
}

/* L */
@media (max-width: 1599.98px) {
  .row {
    margin-right: -12px;
    margin-left: -12px;
    margin-bottom: -24px; /* Negativer Margin für vertikalen Abstand */
  }
  [class*="col-"] {
    padding-right: 12px;
    padding-left: 12px;
    padding-bottom: 24px; /* Vertikaler Abstand */
  }
  #jh-header {
    width:140px;
  }
  #jh-content {
    margin-left:160px;
  }
  #jh-logo {
    left: 40px;
    top: 134px;
  }
  .icon-logo-jhf {
    font-size:360px;
    line-height:360px;
  }
  #jh-menu-btn {
    top: 25px;
    left: 40px;
    width: 60px;
    height: 60px;
    padding-top:13px;
    font-size: 32px !important;
    line-height: 32px !important;
  }
  #jh-search-input-wrapper {
    
  }
  #jh-search-btn {
    padding:2px 0 0 0px;
    top: 25px;
    width:60px;
    height:60px;
    font-size: 39px;
    line-height: 39px;
  }
  #jh-search-btn:hover {
      padding-left:15px;
  }
  #jh-search-btn.deactivated {
      opacity:0.4;
      background:none !important;
      padding-left:13px;
      color:#444;
      cursor:default;
  }

}

/* MD */
@media (max-width: 1199.98px) {
  .row {
    margin-right: -12px;
    margin-left: -12px;
    margin-bottom: -24px; /* Negativer Margin für vertikalen Abstand */
  }
  [class*="col-"] {
    padding-right: 12px;
    padding-left: 12px;
    padding-bottom: 24px; /* Vertikaler Abstand */
  }
}

/* SM */
@media (max-width: 991.98px) {
  .row {
    margin-right: -12px;
    margin-left: -12px;
    margin-bottom: -24px; /* Negativer Margin für vertikalen Abstand */
  }
  [class*="col-"] {
    padding-right: 12px;
    padding-left: 12px;
    padding-bottom: 24px; /* Vertikaler Abstand */
  }
  #jh-logo {
    left: 40px;
    top: 134px;
  }
  .icon-logo-jhf {
    font-size:347px;
    line-height:347px;
  }
}

/* XS */
@media (max-width: 767.98px) {
  .row {
    margin-right: -10px;
    margin-left: -10px;
    margin-bottom: -20px; /* Negativer Margin für vertikalen Abstand */
  }
  [class*="col-"] {
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 20px; /* Vertikaler Abstand */
  }

  h1 {
    font-size: 2rem;
    line-height:120%;
  }
  h2 {
    font-size: 1.4rem;
    line-height:120%;
  }
  h3 {
    font-size: 1.2rem;
    line-height:120%;
  }

  #jh-header {
    width:80px;
  }
  #jh-content {
    margin-left:80px;
  }
  #jh-logo {
    left: 20px;
    top: 87px;
  }
  .icon-logo-jhf {
    font-size:240px;
    line-height:240px;
  }
  #jh-menu-btn {
    top: 16px;
    left: 17px;
    width: 45px;
    height: 45px;
    padding-top:10px;
    font-size: 24px !important;
    line-height: 24px !important;
  }
  #jh-search {
    height:85px; 
  }

  #jh-search-btn {
    top:16px;
    width: 45px;
    height: 45px;
    padding:2px 0 0 0px;
    font-size: 29px;
    line-height: 29px;
  }
  #jh-search-btn:hover {
      padding-left:11px;
  }
  #jh-search-btn.deactivated {
      padding-left:10px;
  }
  #jh-search-input-wrapper {
    left: 60px;
    top: 23px;
    
  }

  #jh-search-input {
    font-size:24px;
    line-height:24px;
    padding:4px 10px;
  }
  #jh-subheader {
    left:0px;
    height:70px;
  }
}

/* Extra Small */
@media (max-width: 575.98px) {
  .row {
    margin-right: -8px;
    margin-left: -8px;
    margin-bottom: -16px; /* Negativer Margin für vertikalen Abstand */
  }
  [class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
    padding-bottom: 16px; /* Vertikaler Abstand */
  }

  #jh-header {
      width: 60px;
  }
    
  #jh-content {
    margin-left: 60px;
  }
  #jh-logo {
    left: 15px;
    top: 72px;
  }
  .icon-logo-jhf {
    font-size:180px;
    line-height:180px;
  }
  #jh-menu-btn {
    top:9px;
    left: 8px;
    width: 42px;
    height: 42px;
    padding-top:11px;
    font-size: 18px !important;
    line-height: 18px !important;
  }
  #jh-search {
    height:70px;
  }
  #jh-search-btn {
    top:9px;
    width: 42px;
    height: 42px;
    padding:2px 0 0 0px;
    font-size: 25px;
    line-height: 25px;
  }
  #jh-search-btn:hover {
      padding-left:11px;
  }
  #jh-search-btn.deactivated {
      padding-left:10px;
  }
  #jh-subheader {
    left:0px;
    height:60px;
  }
  #jh-search-input-wrapper {
    top: 15px;
    left:50px;
  }
  #jh-search-input {
    font-size:1.2rem;
    line-height:100%;
  }
}