/* bricolage-grotesque-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/bricolage-grotesque-v9-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* bricolage-grotesque-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/bricolage-grotesque-v9-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* bricolage-grotesque-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/bricolage-grotesque-v9-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* bricolage-grotesque-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bricolage-grotesque-v9-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* bricolage-grotesque-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/bricolage-grotesque-v9-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v44-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



body, html { margin:0; padding:0; background:#f2f9ff; letter-spacing:1px; font-family: 'Bricolage Grotesque';font-style: normal; font-weight: 200; }

:root {
  --brko-blau: #0c416b;
  --brko-hellblau: #d0edff;
  --brko-text: #2a2a2b;
  --brko-dunkelgrau:#3e3e3e
}

h1, h2, h3, h4, h5, h6 { font-weight:200; margin:0;}

.path-frontpage h2 { font-size:clamp(3rem, 6.5vw, 10rem); text-transform:uppercase; }

.path-frontpage h3, .views-field-field-sprechzeiten-1 h4  { margin-bottom:40px; font-size:clamp(2rem, 2.5vw, 3rem);}

.views-field-field-sprechzeiten-1 h4 { color:var(--brko-blau);}

.path-team h2, .path-leistungen h2, .path-kontakt h2, .path-praxis h2, .page-node-type-seite h2 { font-size:clamp(3rem, 5.5vw, 10rem); text-transform:uppercase; color: var(--brko-blau);}

.page-node-type-seite h2 {margin:60px 0 90px;}

.nodi h5 { font-size:clamp(1rem, 2vw, 3rem); color:var(--brko-hellblau);}

.path-frontpage h2, .site-footer h2 {font-family: 'Open Sans';}

p {color: var(--brko-text);}

a { text-decoration:none;}

#main-wrapper { width:80%; margin:auto;}

#page { position:sticky; top:10px; z-index:5;}

.page-node-type-seite #block-brko-content a { color: var(--brko-blau);}

.views-field-field-adresse a{background: no-repeat; color: var(--brko-blau); background-image: url(https://www.twoonefour.de/brkoweb/themes/brko/images/Pfeils.png); background-position: right center; padding-right: 29px; background-size: contain; background-size:4%;}

@media only screen and (max-width: 870px) {
	#main-wrapper { width:93%; margin:auto;}

.path-team h2, .path-leistungen h2, .path-kontakt h2, .path-praxis h2, .page-node-type-seite h2 {  -webkit-hyphens: auto;-ms-hyphens: auto;hyphens: auto;}
}

/* Menu */

#header { width:650px; margin:30px auto; background:white; border-radius:33px; padding:10px 20px; height:54px; display:flex;}

#site-header__inner { display:inline-block;}

#Logo { width:250px; position:relative; top:13px; left:8px;}

#header ul { padding-left:35px;}

#header ul li { list-style:none; font-size:19px; display:inline-block; margin:0 5px;}

#header ul li a {color: var(--brko-text);}
 
#header ul li a:hover { text-decoration:underline;}

@media only screen and (max-width: 870px) {
#block-brko-hauptnavigation { display:none;}
#header { width:87%;}
}

/* CheeseburgerMenu */

#block-brko-cheesburgermenuausloser { display:none;}

.cheeseburger-menu__backdrop { z-index:4;}

.block-cheeseburgermenu__trigger-element { background:none; width:50px; position:absolute; top:18px; right:9%;}

.block-cheeseburgermenu__trigger-element span { background:black;}

.cheeseburger-menu__mainmenu { margin-top:40px; text-align:center; padding:0 !important;}

.cheeseburger-menu__mainmenu li {display:table !important; margin:0 auto 40px auto !important; padding:0;}

.block-cheeseburgermenu-container--with-navigation { padding:0;}

.block-cheeseburgermenu-container { width:100%;}

.cheeseburger-menu__side-trigger {background: var(--brko-dunkelgrau);}

#block-cheesburgermenuausloser {display:none;}

.cheeseburger-menu__item-label { max-width:100%;}

.cheeseburger-menu__side-menu { position:relative;}

@media only screen and (max-width: 870px) {
   #block-brko-cheesburgermenuausloser { display:block;}
}



/* FRONT */

.views-field-field-headerbild { margin:-150px 0 40px 0; display: flex; justify-content: center; align-items: center; overflow: hidden; max-height: 60vh; position: relative; border-radius: 25px;}

.views-field-field-headerbild img { width:100%; height:auto;}

.path-frontpage #BMain { text-align:center;}

#block-brko-content, #block-brko-views-block-start-top-block-1 {font-size:clamp(1.2rem, 1.3vw, 2rem);}

.path-frontpage #block-brko-content ul, .views-field-field-telefon-und-mail ul { margin:0; padding:0; display:inline-block; background: var(--brko-hellblau); border-radius:50px; padding:16px 25px;}

.views-field-field-telefon-und-mail ul li a { color:var(--brko-text);}

.path-frontpage #block-brko-content ul li, .views-field-field-telefon-und-mail ul li { list-style:none; display:inline-block; margin:0 10px;}

.nodi { background: var(--brko-dunkelgrau); color:white; border-radius:2em; width:70%; margin:50px auto; padding:40px 20px; }

.nodi p { color:white;}

.views-field-field-sprechzeiten-1 { background:white; border-radius:25px; padding:30px;}

.views-field-field-sprechzeiten-1 .field-content { display: flex; align-items: stretch; flex-wrap: wrap;}

.views-field-field-sprechzeiten-1 img {    object-fit: cover; width: 100%; height: 100%; display: block; border-radius:25px 0 0 25px;}

.views-field-field-sprechzeiten-1 .SpBox {}

.views-field-field-sprechzeiten-1 .SpBoxs { flex: 1; overflow: hidden; width: 30%; box-sizing: border-box;}

.views-field-field-sprechzeiten-1 .SpBoxl { width:60%; margin-left:5%; line-height:1.2;}

.views-field-field-sprechzeiten-1 .SpBoxl div {position: relative; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); width: 85%; text-align:left; margin: auto; }

.views-field-field-sprechzeiten-1 { font-size:clamp(1.2rem, 1.3vw, 2rem);}

.views-field-field-sprechzeiten-1 .SpBoxl .Hinwe { line-height:0.8;}

.views-field-field-sprechzeiten-1 em {font-size:clamp(0.8rem, 0.9vw, 1.2rem);}

#block-brko-views-block-infotext-block-1 {margin-top:40px; margin-bottom:50px; position:relative; left:-14%; width:120%;  color:white;}

#block-brko-views-block-infotext-block-1 .views-view-responsive-grid__item { background:var(--brko-dunkelgrau); border-radius:0 2em 2em 0;}

#block-brko-views-block-infotext-block-1 p { color:white;}

#block-brko-views-block-infotext-block-1 .views-field-field-infotext { padding:30px 0; text-align:left; display:flex; margin-left:2%;}

#block-brko-views-block-infotext-block-1 .views-field-field-infotext .field-content { width:100%;}

#block-brko-views-block-infotext-block-1 .views-field-field-infotext .InnerI { width:66%; display:inline-block; text-align:left; margin-left:30px;}

#block-brko-views-block-infotext-block-1 .views-field-field-infotext h2 { font-size:clamp(2.5rem, 3vw, 4rem); color:var(--brko-hellblau);}

.circle { position: relative;
    display: inline-block;
    width: 10%;
    padding: 5% 0;
    float: left;
    border-radius: 50%;
    -webkit-box-shadow: 0 @shadow-length 0 0 @shadow;
    box-shadow: 0 @shadow-length 0 0 @shadow;
    text-shadow: 0 @shadow-length 0 @shadow;
    background: #d0edff;
    margin-left: 10%;
    border: 24px solid #b2c9d7;}

#block-brko-views-block-praxis-start-block-1 img { width:90%; height:auto; border-radius:25px;}

#block-brko-views-block-praxis-start-block-1 .views-view-responsive-grid__item:nth-child(even) { position:relative;top:28%;}

#block-brko-views-block-praxis-start-block-1 footer { display:inline-block; width:100%; margin-top:14%; text-align:center;}

#block-brko-views-block-praxis-start-block-1 footer a { color:var(--brko-blau);}

#block-brko-views-block-start-leistungen-block-1, #block-brko-views-block-praxis-start-block-1 { text-align:left; color:var(--brko-blau);}

#block-brko-views-block-start-leistungen-block-1 { margin:100px 0 90px 0;}

#block-brko-views-block-start-leistungen-block-1 .views-field-title { color:var(--brko-text);margin-bottom:30px; border-bottom: 1px solid var(--brko-blau); padding-bottom: 10px; font-size: clamp(1.4rem, 1.6vw, 2rem); }

#block-brko-views-block-start-leistungen-block-1 .views-field-title a { color:var(--brko-text); display:block;}

#block-brko-views-block-start-leistungen-block-1 h3 { margin-bottom:20px;}

#block-brko-views-block-start-leistungen-block-1 header { margin-bottom:30px;}

#block-brko-views-block-start-leistungen-block-1 footer { margin-top:55px; text-align:center;}

#block-brko-views-block-start-leistungen-block-1 footer a, #block-brko-views-block-praxis-start-block-1 footer a { color:var(--brko-blau); padding:20px; border:1px solid; border-radius:2em;}

#block-brko-views-block-start-leistungen-block-1 footer a:hover, #block-brko-views-block-praxis-start-block-1 footer a:hover { color:white; background:var(--brko-blau);}

@media only screen and (max-width: 870px) {
.views-field-field-headerbild { max-height: 40vh; margin-top:-140px;}
.views-field-field-headerbild img { width:130%;}
#block-brko-views-block-praxis-start-block-1 .views-view-responsive-grid__item:nth-child(even) { top:0;}
#block-brko-views-block-praxis-start-block-1, #block-brko-views-block-start-leistungen-block-1 { text-align:center;}
#block-brko-views-block-infotext-block-1 { width:91vw; left:0;}
#block-brko-views-block-infotext-block-1 .views-view-responsive-grid__item { border-radius:2em;}
#block-brko-views-block-infotext-block-1 .views-field-field-infotext { text-align:center;}
#block-brko-views-block-infotext-block-1 .views-field-field-infotext .InnerI { width:88%; text-align:center; margin:20px 0 0 0;}
.circle { width:6%; padding:3% 0; left:0; float:none; margin:0;}
.views-field-field-sprechzeiten-1 .field-content { display:grid;}
.views-field-field-sprechzeiten-1 .SpBoxs { width:100%; height:200px; margin-bottom:30px;}
.views-field-field-sprechzeiten-1 img { border-radius:25px;}
.views-field-field-sprechzeiten-1 .SpBoxl { width:100%; margin-left:0px;}
.views-field-field-sprechzeiten-1 .SpBoxl div { text-align:center;}
}


/* TEAM */

.path-team .views-view-responsive-grid__item { width:100%; text-align:center;}

.path-team .views-field-field-infos { width:80%; margin:auto;}

.path-team .views-field-title-1 { color:var(--brko-blau);font-size:clamp(1.5rem, 2vw, 2.5rem);}

.path-team .views-field-field-bild img { width:70%; height:auto; margin-bottom:35px; border-radius:25px;}

@media only screen and (max-width: 870px) {
.path-team .views-field-field-infos { width:98%; margin-bottom:60px;}
}


/* LEISTUNGEN */

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { background:none; color: var(--brko-text); border:none;}

.ui-widget-content, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border:none; background:none;}

.path-leistungen .views-field-title { outline:none !important; border-top:3px solid; font-size:clamp(2rem, 3vw, 4rem); font-weight:200; margin-top:60px; padding-top:100px;}

.ui-widget {  letter-spacing:1px; font-family: 'Bricolage Grotesque';font-style: normal; font-weight: 200;}

#block-brko-content header { text-align: center; margin: 60px 0 90px 0;}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr, .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-radius:0;}

.ui-icon, .ui-widget-content .ui-icon { background-image: url(../images/Pfeil.png) !important; }

.ui-icon { width: 155px;height: 97px;}

.ui-icon-triangle-1-e { background-position: 0 3px; }

.ui-state-active .ui-icon, .ui-button:active .ui-icon {background-image: url(../images/Pfeild.png) !important;}

.ui-accordion-header-active .ui-icon { height: 155px !important; width: 155px;}

.ui-icon-triangle-1-s { background-position: 0 16px;}

.path-leistungen h2 { margin-bottom:30px;}

.ui-accordion-content ul li { margin:0 0 35px 0;}

@media only screen and (max-width: 870px) {
.ui-accordion .ui-accordion-content { padding:1em 0;}
.ui-icon  { display:flex; margin-bottom:20px;}
.ui-accordion-content .views-field-field-inhalt { width:92%; margin:auto;}
.path-leistungen .views-field-title {overflow-wrap: break-word;}
}


/* PRAXIS */

.path-praxis .views-field-field-bilder img { width:90%; height:auto; border-radius:25px;}

.path-praxis .views-field-field-bilder img:hover {/* scale:1.2; transition: 0.2s all ease-out;*/}

.path-praxis .views-view-responsive-grid__item { text-align:center;}

.path-praxis .views-view-responsive-grid__item:nth-child(even) { position:relative;top:28%;}

.path-praxis .views-view-responsive-grid__item:nth-child(3) .views-field-field-bilder img, .path-praxis .views-view-responsive-grid__item:nth-child(7) .views-field-field-bilder img, .path-praxis .views-view-responsive-grid__item:nth-child(11) .views-field-field-bilder img{ width:55%; border-10px solid green;}

.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img, .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active, .pswp__img { cursor:default;}

@media only screen and (max-width: 870px) {
.path-praxis .views-field-field-bilder img, .path-praxis .views-view-responsive-grid__item:nth-child(3) .views-field-field-bilder img, .path-praxis .views-view-responsive-grid__item:nth-child(7) .views-field-field-bilder img, .path-praxis .views-view-responsive-grid__item:nth-child(11) .views-field-field-bilder img { width:100%;}
.path-praxis .views-view-responsive-grid__item:nth-child(even) { top:0;}
.views-view-responsive-grid {--views-responsive-grid--layout-gap:20px;}
}


/* SEITE */

.page-node-type-seite #block-brko-content { width:80%; margin:auto; text-align:center;}

.page-node-type-seite #block-brko-content ul li { list-style:none; border-bottom:1px solid; margin-bottom:15px; padding-bottom:15px;}

.page-node-type-seite #block-brko-content ul li:last-child { border:none;}

/* KONTAKT */

.path-kontakt #block-brko-content { text-align:center;}

.path-kontakt .views-field-nothing { border:1px solid; padding:40px; margin:50px 0; border-radius:2em;}

.path-kontakt .views-field-field-notdienst { background: var(--brko-dunkelgrau); color: white; border-radius: 2em; width: 70%; margin: 50px auto; padding: 40px 20px; }

.path-kontakt .views-field-field-notdienst p { color:white;}

.path-kontakt .views-field-field-notdienst h5 { font-size: clamp(1rem, 2vw, 3rem); color: var(--brko-hellblau); }

@media only screen and (max-width: 870px) {
.page-node-type-seite #block-brko-content {overflow-wrap: break-word;}
}



/* FOOTER */

.site-footer {    background: white; margin-top: 90px; padding: 40px; text-align: center; }

.site-footer h2 { font-size: clamp(2rem, 2.5vw, 4rem); margin:0; }

.site-footer h3 {font-size: clamp(1.2rem, 1.5vw, 2rem);}

.FooterBox { display:flex; text-align:center; margin:60px 0; font-size:23px;}

.FooterBoxI { width:33.3%; line-height:32px;}

.FooterBoxI a { color:black;}

#block-brko-footer-2 ul { margin:0; padding:0;}

#block-brko-footer-2 ul li { list-style:none; display:inline-block; margin:0 8px;}

#block-brko-footer-2 ul li a { color: grey;}

#block-brko-footer-2 ul li a:hover { color:black;}

@media only screen and (max-width: 870px) {
.FooterBox { display:inline;}
.FooterBoxI { margin-bottom:20px; width:100%;}
}