/*  MICROTHEMER STYLES  */

/*= Full Code Editor CSS ====== */

/**********************************
/* MIXING-TEMPLATE | 11.2024
**********************************/

:root {
  --ap-page-width: 1280px;
  --ap-page-width-half: 640px;
  --ap-page-width-down: 1279px;
  --ap-page-width-padding: 1250px;
  --ap-bp-s: 480px;
  --ap-bp-s-half: 240px;
  --ap-bp-s-down: 479px;
  --ap-bp-m: 768px;
  --ap-bp-m-half: 384px;
  --ap-bp-m-down: 767px;
  --ap-bp-l: 980px;
  --ap-bp-l-half: 490px;
  --ap-bp-l-down: 979px;
  --ap-bp-xl: 1280px;
  --ap-bp-xl-half: 640px;
  --ap-bp-xl-down: 1279px;
  --admin-bar: 32px;
  --content-height: 100vh;
  --footer-height: 100px;
  --page-width: 1440px;
  --home-padding-icon-m: var(--space-m);
  --home-padding-icon-l: var(--space-l);
  --pri-teint-40: #a0e0ed;
  --pri-teint-60: #8cdae9;
  --pri-teint-80: #79d4e5;
  --pri-teint-100: #53c7de;
  --home-border: 10px;
}

/********
* USAGE *
********/

/**********
* CLASSES *
**********/

@media (max-width: 480px) {
  .hide-s {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hide-m {
    display: none !important;
  }
}

@media (max-width: 980px) {
  .hide-l {
    display: none !important;
  }
}

@media (max-width: 1280px) {
  .hide-xl {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .block-xl {
    display: block !important;
  }
}

@media (min-width: 980px) {
  .block-l {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .block-m {
    display: block !important;
  }
}

@media (min-width: 480px) {
  .block-s {
    display: block !important;
  }
}

@media (min-width: 1280px) {
  .flex-xl {
    display: flex !important;
  }
}

@media (min-width: 980px) {
  .flex-l {
    display: flex !important;
  }
}

@media (min-width: 768px) {
  .flex-m {
    display: flex !important;
  }
}

@media (min-width: 480px) {
  .flex-s {
    display: flex !important;
  }
}

/*= General =================== */

/** General >> own classes **/
body .df-aic {
  -webkit-align-items: center !important;
  align-items: center !important;
}


/*= Header ==================== */

/** Header >> Header **/
body #mainheader .oxy-header-right > div {
  grid-gap: calc(var(--space-xs) / 2);
  gap: calc(var(--space-xs) / 2);
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

body #mainheader .oxy-header-right #mainheader_contact_section div,
body #mainheader .oxy-header-right #mainheader_contact_section a {
  color: var(--primary-semi-dark);
}

body #mainheader .oxy-header-right #mainheader_contact_section #mainheader_contact {
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
  -webkit-transition: box-shadow .3s, margin .3s;
  transition: box-shadow .3s, margin .3s;
  border-radius: 2px;
  border: 1px solid #ccc;
  color: white;
}

body #mainheader .oxy-header-right #mainheader_contact_section #mainheader_contact:hover {
  box-shadow: 0 0 11px rgba(33, 33, 33, 0.3);
  margin-top: -2px;
  margin-bottom: 2px;
}

body #mainheader_contact {
  background: var(--secondary);
  color: white;
}

/** Header >> Menu 08.24 **/
body #mainheader .overtop_menu svg {
  height: 16px;
  width: 20px;
  fill: var(--primary-semi-dark);
}

body #mainheader .overtop_menu a {
  color: var(--primary-semi-dark);
}

body #mainheader .overtop_menu li {
  -webkit-justify-content: center;
  justify-content: center;
}

body #mainheader .overtop_menu li.fade_menu {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@media (min-width: 768px) {
  body #mainheader .overtop_menu li.fade_menu {
    display: none;
  }
}

body #mainheader .overtop_menu_phone a {
  background: var(--secondary);
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
  -webkit-transition: box-shadow .3s, margin .3s;
  transition: box-shadow .3s, margin .3s;
  border-radius: 2px;
  color: white;
}

body #mainheader .overtop_menu_phone a:hover {
  box-shadow: 0 0 11px rgba(33, 33, 33, 0.3);
  margin-top: -2px;
  margin-bottom: 2px;
}

body #mainheader .overtop_menu_contact {
  position: relative;
  padding-left: 10px;
}

body #mainheader .overtop_menu_contact:before {
  color: var(--primary-semi-dark);
  content: "|";
  position: absolute;
}

body #mainheader .overtop_menu_login {
  position: relative;
}

body #mainheader .overtop_menu_login svg,
body #mainheader .overtop_menu_login img {
  margin-right: 5px;
}

body #mainheader .overtop_menu_login:before {
  color: var(--primary-semi-dark);
  content: "|";
  position: absolute;
}

@media (max-width: 768px) {
  body #mainheader .overtop_menu_hide {
    display: none !important;
  }
}

body #mainheader_first .oxy-header-left {
  -webkit-flex-grow: 1;
  flex-grow: 1;
}

body #mainheader_first .oxy-header-left .ct-div-block {
  width: 100%;
}

body #mainheader_first #link-33-11 {
  width: 100%;
}

@media (max-width: 768px) {
  body #mainheader_second {
    display: none !important;
  }
}

body #mainheader_second #_nav_menu-31-11 {
  position: relative;
  z-index: 9999999;
}

body #main-logo-claim {
  text-align: left;
}

@media (max-width: 768px) {
  body #main-logo-claim {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

body #main-logo-claim span {
  font-size: calc(var(--text-m) / 1.5);
}

body #main-logo-claim-wrapper {
  height: 50px;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

@media (max-width: 768px) {
  body #main-logo-claim-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
  }
}

body #main-logo-claim-wrapper img {
  height: 24px;
}

@media (max-width: 768px) {
  body #main-logo-claim-wrapper img {
    max-height: 70%;
    width: auto;
    height: auto;
  }
}

body #main-logo-claim-wrapper span {
  white-space: nowrap;
}

/** Header >> Header & Menü / Respo **/
body #mainheader_first .oxy-header-container {
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

/** Header >> Menu 11.25 **/
body #menu-overtop-menu .overtop_menu_stroke {
  position: relative;
  padding-left: 10px;
}

body #menu-overtop-menu .overtop_menu_stroke:before {
  color: var(--primary-semi-dark);
  content: "|";
  position: absolute;
}

body #menu-overtop-menu .overtop_menu_contact a {
  padding-right: 0;
}

body .main-menu nav,
body .main-menu .menu-main-menu-container {
  width: 100%;
}

@media (min-width: 980px) {
  body .main-menu #menu-main-menu {
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-left: -10px;
  }
}

body .breadcrumbs * {
  color: var(--base-medium);
  font-style: italic;
}

body .breadcrumbs a {
  color: var(--secondary-dark);
}


/*= Content =================== */

/** Content >> Main **/
body.page-id-27 #main-page-container p {
  text-align: left !important;
}

body #menu-main-menu {
  margin-right: -5px;
}

body #menu-main-menu a {
  text-transform: uppercase;
}

body #menu-main-menu li:not(.jugendamt) {
  margin-bottom: 10px;
  list-style-type: none;
  padding: 10px;
}

body #menu-main-menu li:not(.jugendamt) a {
  display: inline-block;
  text-decoration: none;
}

body #menu-main-menu li:not(.jugendamt) a::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: var(--primary-semi-dark);
  -webkit-transition: width .4s ease-in;
  transition: width .4s ease-in;
}

body #menu-main-menu li:not(.jugendamt) a:hover::after {
  width: 100%;
}

body #menu-main-menu li.current-menu-item a::after {
  width: 100%;
}

body #menu-main-menu li.jugendamt {
  margin-bottom: 10px;
  list-style-type: none;
  padding: 10px;
}

body #menu-main-menu li.jugendamt a {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

body #menu-main-menu li.jugendamt svg {
  height: 14px;
  width: 14px;
  margin-right: 5px;
  margin-bottom: 2px;
  fill: var(--primary-semi-dark);
  display: block;
}

body #menu-main-menu li.jugendamt p {
  text-align: justify;
}

body #menu-main-menu li:hover,
body #menu-main-menu li.current-menu-item a {
  color: var(--secondary-semi-dark);
}

body #menu-main-menu li.current-menu-item a {
  font-weight: bold;
}

body #menu-main-menu li.current-menu-item a::after {
  background: var(--secondary-semi-dark);
}

body #menu-main-menu li.jugendamt:hover a {
  color: var(--secondary-semi-dark);
}

body #menu-main-menu li.jugendamt:hover svg {
  fill: var(--secondary-semi-dark);
}

body #main-logo-small {
  margin-right: var(--space-xs);
}

body #main-logo-claim-wrapper {
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

body #mainheader_first * {
  text-transform: uppercase;
}

body #mainheader_first .oxy-header-left a {
  color: black;
}

body #mainheader_first #main-logo-claim p {
  text-transform: uppercase;
  font-size: calc(var(--text-m) / 1.5);
}

body #mainheader_first #main-logo-claim p strong {
  font-weight: 700;
  font-size: var(--text-m);
  letter-spacing: 3px;
}

body #main-page-container {
  width: 100%;
  max-width: var(--page-width);
  margin: auto;
  position: relative;
  padding-inline: var(--section-padding-x);
}

body #main-page-container h1 {
  text-transform: uppercase;
  color: var(--secondary);
  width: 100%;
  max-width: 65vw;
}

body #main-page-container h2,
body #main-page-container h3,
body #main-page-container h4 {
  color: var(--primary);
}

body #main-page-container img {
  width: 30vw;
  height: auto;
  border-radius: 50%;
  float: left;
  /* Change the shape according
                to the image */
  shape-outside: circle(50%);
}

body #main-page-container .wp-block-image {
  margin: 0;
}

body #main-page-container .wp-block-image img {
  border-radius: 0;
  float: none;
  shape-outside: none;
}

body #main-page-container p {
  text-align: justify;
}

body #main-page-container.single-page {
  margin-top: 100px;
}

body #main-page-container.no-image h1 {
  margin-bottom: var(--space-l);
}

body #main-backgrop-logo {
  position: absolute;
  top: -200px;
  left: -100px;
  opacity: .2;
  z-index: 1;
}

body #main_footer {
  background: var(--primary);
  background: -moz-linear-gradient(380deg, var(--primary) 50%, var(--primary-trans-10) 100%);
  background: -webkit-linear-gradient(380deg, var(--primary) 50%, var(--primary-trans-10) 100%);
  /* !its c*/
  background: linear-gradient(90deg, var(--primary) 50%, var(--primary-trans-10) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#db3e3e", endColorstr="#db3e3e", GradientType=1);
  margin-top: var(--space-l);
}

body #main_footer img {
  height: 60px;
}

body #main_footer a {
  text-shadow: 1px 1px 1px white;
  -webkit-text-stroke: 1px #ffffff52;
  text-stroke: 1px #ffffff52;
  color: var(--primary-dark);
}

body .ct-section-inner-wrap img {
  max-width: 100%;
}

/** Content >> Home **/
body .hhome {
  width: 100%;
  max-height: calc(100vh - 150px);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.25fr 0.25fr 0.5fr 0.5fr 0.5fr 0.25fr 0.25fr 0.25fr 0.5fr 0.5fr 0.25fr;
  grid-gap: 0px 0px;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: ". . . logo logo logo logo logo logo . . ." "one one . logo logo logo logo logo logo . . ." "one one . logo logo logo logo logo logo . five five" "one one . logo logo logo logo logo logo . five five" ". . . logo logo logo logo logo logo . five five" ". . . . . . . . . . . ." ". . two two . . . . . four four ." ". . two two . three three three . four four ." ". . two two . three three three . four four ." ". . two two . three three three . four four ." ". . . . . . . . . . . .";
}

body .hhome div:not(.logo) img {
  border-radius: 50%;
  overflow: hidden;
  border-width: clamp(1px, calc(1px + (9 * (100vw - 480px) / 520)), 10px);
  border-style: solid;
  width: 100%;
  max-width: 230px;
}

body .hhome .ct-text-block {
  font-size: calc(var(--text-m) / 1.3);
}

body .one {
  grid-area: one;
  -webkit-align-items: center;
  align-items: center;
  grid-gap: var(--space-xs);
  gap: var(--space-xs);
}

body .one .ct-text-block {
  text-transform: uppercase;
  text-align: center;
}

body .one div {
  -webkit-transition: color .3s ease;
  transition: color .3s ease;
}

body .one:hover div {
  color: var(--secondary);
}

body .one img {
  border-color: #d8f3f7;
}

body .two {
  grid-area: two;
  -webkit-align-items: center;
  align-items: center;
  grid-gap: var(--space-xs);
  gap: var(--space-xs);
}

body .two .ct-text-block {
  text-transform: uppercase;
  text-align: center;
}

body .two div {
  -webkit-transition: color .3s ease;
  transition: color .3s ease;
}

body .two:hover div {
  color: var(--secondary);
}

body .two img {
  border-color: #b0e7f0;
}

body .three {
  grid-area: three;
  -webkit-align-items: center;
  align-items: center;
  grid-gap: var(--space-xs);
  gap: var(--space-xs);
}

body .three .ct-text-block {
  text-transform: uppercase;
  text-align: center;
}

body .three div {
  -webkit-transition: color .3s ease;
  transition: color .3s ease;
}

body .three:hover div {
  color: var(--secondary);
}

body .three img {
  border-color: #89dae8;
}

body .four {
  grid-area: four;
  -webkit-align-items: center;
  align-items: center;
  grid-gap: var(--space-xs);
  gap: var(--space-xs);
}

body .four .ct-text-block {
  text-transform: uppercase;
  text-align: center;
}

body .four div {
  -webkit-transition: color .3s ease;
  transition: color .3s ease;
}

body .four:hover div {
  color: var(--secondary);
}

body .four img {
  border-color: #61cee1;
}

body .five {
  grid-area: five;
  -webkit-align-items: center;
  align-items: center;
  grid-gap: var(--space-xs);
  gap: var(--space-xs);
}

body .five .ct-text-block {
  text-transform: uppercase;
  text-align: center;
}

body .five div {
  -webkit-transition: color .3s ease;
  transition: color .3s ease;
}

body .five:hover div {
  color: var(--secondary);
}

body .five img {
  border-color: #3ac2d9;
}

body .logo {
  grid-area: logo;
  -webkit-align-items: center;
  align-items: center;
  height: 100%;
}

body .logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  body .hhome {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    grid-gap: var(--space-xl);
    gap: var(--space-xl);
    max-height: none;
  }

  body .hhome > div {
    width: 100%;
  }

  body .hhome div img {
    max-width: none !important;
  }

  body .hhome .logo {
    order: 1;
  }

  body .hhome .one {
    order: 2;
  }

  body .hhome .two {
    order: 3;
  }

  body .hhome .three {
    order: 4;
  }

  body .hhome .four {
    order: 5;
  }

  body .hhome .five {
    order: 6;
  }

  body .hhome .logo img {
    max-width: 350px !important;
  }
}

/** Content >> Passwort **/
body .pass-form.category {
  height: 100vh;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

/** Content >> datenschutz **/
body.page-id-74 h2 {
  margin-bottom: var(--space-s);
  margin-top: var(--space-m);
}

/** Content >> Form **/
body .wpcf7-form button,
body .wpcf7-form input[type="text"],
body .wpcf7-form input[type="email"],
body .wpcf7-form textarea {
  width: 100%;
}

body .wpcf7-form input[type="text"],
body .wpcf7-form input[type="email"],
body .wpcf7-form textarea {
  padding: 1rem;
}

body .wpcf7-form .obligation {
  color: red;
}

body .wpcf7-form .wpcf7-list-item {
  margin: 0;
}

/** Content >> ACSS **/
@media (hover: hover) and (pointer: fine) {
  html body a:where(:not([class*=btn--])):hover {
    color: var(--primary-hover);
  }
}


/*= Footer ==================== */

/** Footer >> Footer **/
body #main_footer {
  color: white;
}