@font-face {
font-family: 'Ubuntu Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//canifriend.de/wp-content/themes/canifriend-by-ivo-mix/assets/fonts/ubuntu_sans/static/UbuntuSans-Regular.ttf) format('truetype');
} @font-face {
font-family: 'Ubuntu Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(//canifriend.de/wp-content/themes/canifriend-by-ivo-mix/assets/fonts/ubuntu_sans/static/UbuntuSans-Bold.ttf) format('truetype');
} @font-face {
font-family: 'Ubuntu Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(//canifriend.de/wp-content/themes/canifriend-by-ivo-mix/assets/fonts/ubuntu_sans/static/UbuntuSans-Italic.ttf) format('truetype');
} @font-face {
font-family: 'Ubuntu Sans';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(//canifriend.de/wp-content/themes/canifriend-by-ivo-mix/assets/fonts/ubuntu_sans/static/UbuntuSans-BoldItalic.ttf) format('truetype');
} @font-face {
font-family: 'Ubuntu Sans Variable';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(//canifriend.de/wp-content/themes/canifriend-by-ivo-mix/assets/fonts/ubuntu_sans/UbuntuSans-VariableFont_wdth,wght.ttf) format('truetype-variations');
}.cf-header {
position: relative;
height: 140px;
}
.cf-header .cf-header-logo {
position: absolute;
top:0;
left: 50%;
transform: translateX(-50%);
z-index: 3;
width: 500px;
height: 208px;
background-color: var(--wp--preset--color--white);
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
} .cf-section-heading {
display: flex;
align-items: flex-start;
gap: 20px;
position: relative;
}
.cf-section-heading::before {
content: "";
position: absolute;
display: block;
width: 50px;
min-width: 50px;
height: 3px;
background-color: #444444;
top: calc(0.5em + 1.5px);
left: -70px;
} .cf-hero-box .wp-block-columns {
margin-bottom: 0;
max-width: 1087px;
margin-left: auto;
margin-right: auto;
} .cf-beige-box {
position: relative;
}
.cf-beige-box::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background-color: var(--wp--preset--color--beige);
top: 20px;
left: 20px;
z-index: -1;
border-radius: 35px;
} .cf-art {
position: absolute;
pointer-events: none;
z-index: 2;
}
.cf-art--form {
top: 32px;
left: -85px;
width: 133px;
transform: rotate(-40deg);
}
.cf-art--hero-topleft {
top: 0;
left: -114px;
width: 114px;
height: auto;
}
.cf-art--hero-dog-topright {
top: -2%;
right: 33%;
width: 15%;
height: auto;
}
.cf-art--hero-dog-bottomright {
bottom: 10%;
right: -5%;
width: 27%;
height: auto;
transform: scaleX(-1);
}
.cf-art--hero-dog-left {
top: 45%;
left: 0;
width: 21%;
height: auto;
}
.cf-hero-text-col {
position: relative;
flex-grow: 1 !important;
}
@media (max-width: 880px) {
.cf-hero-text-col {
flex-grow: 1.3 !important;
}
} .cf-hero-image-col {
display: flex;
align-items: flex-end;
justify-content: center;
position: relative;
flex-grow: 0.8 !important;
}
.cf-hero-dog {
margin-bottom: 0 !important;
}
.cf-hero-dog img {
display: block;
width: 560px;
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
margin: 0 auto;
padding: 0;
} .cf-divider {
display: flex;
align-items: center;
gap: 0;
}
.cf-divider::before,
.cf-divider::after {
content: "";
flex: 1;
height: 1px;
background-color: #C4C4C4;
}
.cf-divider img {
width: 147px;
height: auto;
margin: 0;
} .cf-termin-section {
position: relative;
overflow: visible;
} .wp-block-details{
height: fit-content;
}
.wp-block-details summary {
cursor: pointer;
font-weight: 700;
font-size: var(--wp--preset--font-size--large);
line-height: 1.2;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
min-height: 62px;
}
.wp-block-details summary::-webkit-details-marker {
display: none;
}
.wp-block-details summary::after {
content: "";
display: inline-block;
width: 22px;
height: 22px;
background-image: url(//canifriend.de/wp-content/themes/canifriend-by-ivo-mix/assets/img/chevron-down-solid-full.svg);
background-repeat: no-repeat;
background-size: contain;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.wp-block-details[open] summary::after {
transform: rotate(180deg);
} .cf-form-wrapper {position: relative;}
.cf-form-wrapper .fluentform .ff-el-group{margin-bottom: 0;}
.cf-form-wrapper.cf-form-wrapper--termin .fluentform form>fieldset{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.cf-form-wrapper.cf-form-wrapper--kontakt .fluentform form>fieldset{
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 30px;
}
.cf-form-wrapper.cf-form-wrapper--termin form>fieldset>div:nth-of-type(1) {grid-area: 1 / 1 / 2 / 2;}
.cf-form-wrapper.cf-form-wrapper--termin form>fieldset>div:nth-of-type(2) {grid-area: 1 / 2 / 2 / 3;}
.cf-form-wrapper.cf-form-wrapper--termin form>fieldset>div:nth-of-type(3) {grid-area: 2 / 1 / 4 / 2;}
.cf-form-wrapper.cf-form-wrapper--termin form>fieldset>div:nth-of-type(4) {grid-area: 2 / 2 / 3 / 3;}
.cf-form-wrapper.cf-form-wrapper--termin form>fieldset>div:nth-of-type(5) {grid-area: 3 / 2 / 4 / 3;}
.cf-form-wrapper.cf-form-wrapper--termin form>fieldset>div:nth-of-type(6) {grid-area: 4 / 1 / 5 / 3;}
.cf-form-wrapper.cf-form-wrapper--termin .ff_submit_btn_wrapper {grid-area: 5 / 1 / 6 / 3;}
.cf-form-wrapper .ff-el-form-control {
background: #fff;
border: none;
border-radius: 15px;
padding: 12px 18px;
font-size: var(--wp--preset--font-size--large);
font-family: var(--wp--preset--font-family--ubuntu-sans);
line-height: 1.24;
box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.cf-form-wrapper--kontakt.cf-form-wrapper .ff-el-form-control {
border: solid 1px var(--wp--preset--color--black);
}
.cf-form-wrapper .ff-btn-submit {
background: var(--wp--preset--color--black);
color: #fff;
border: 3px solid var(--wp--preset--color--black);
border-radius: 15px;
padding: 8px 18px;
font-size: var(--wp--preset--font-size--large);
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
height: fit-content;
}
.cf-form-wrapper .ff-btn-submit:hover {
background: transparent;
color: var(--wp--preset--color--black);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.cf-form-wrapper .ff_tc_label {font-size: var(--wp--preset--font-size--medium);}
.cf-form-wrapper.cf-form-wrapper--termin  .ff_submit_btn_wrapper {
display: flex;
gap: 20px;
}
.cf-form-wrapper.cf-form-wrapper--termin .ff_submit_btn_wrapper::before{display: none;}
.cf-form-wrapper.cf-form-wrapper--termin .ff_submit_btn_wrapper::after{
content: 'Ich bitte um Verständnis, dass Termine mindestens 24 Stunden im Voraus abgesagt werden müssen und andernfalls vollständig in Rechnung gestellt werden.';
font-size: var(--wp--preset--font-size--medium);
display: block;
}
.cf-form-wrapper .fluentform .ff-el-tc label.ff_tc_label>span{
width: 25px;
}
.cf-form-wrapper .fluentform .ff-el-form-check-label .ff-el-form-check-input{
width: 20px;
height: 20px;
}
.cf-form-wrapper .ff-el-group:has(.ff-el-datepicker) .ff-el-input--content {
position: relative;
}
.cf-form-wrapper .ff-el-group:has(.ff-el-datepicker) .ff-el-input--content:after {
background-image: url(//canifriend.de/wp-content/themes/canifriend-by-ivo-mix/assets/img/calendar.svg);
background-size: contain;
background-repeat: no-repeat;
content: '';
display: block;
width: 18px;
height: 18px;
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
} .cf-icon-link {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: underline;
color: #444444;
}
.cf-icon-link img {
width: 22px;
height: auto;
} .cf-slider {
position: relative;
overflow: hidden;
border-radius: 20px;
width: 100%;
max-width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
}
.cf-slider > * {
max-width: 100% !important;
}
.cf-slider .wp-block-group__inner-container {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.cf-slider-track {
display: flex;
transition: transform 0.4s ease-in-out;
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.cf-slider-slide {
min-width: 100%;
max-width: 100%;
flex-shrink: 0;
flex-grow: 0;
box-sizing: border-box;
}
.cf-slider-slide figure {
margin: 0 !important;
width: 100%;
}
.cf-slider-slide img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
border-radius: 20px;
}
.cf-slider-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
background: rgba(68, 68, 68, 0.7);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
padding: 0;
}
.cf-slider-nav:hover {
background: rgba(68, 68, 68, 0.9);
transform: translateY(-50%) scale(1.1);
}
.cf-slider-nav:active {
transform: translateY(-50%) scale(0.95);
}
.cf-slider-nav--disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.cf-slider-nav img {
width: 30px;
height: auto;
display: block;
}
.cf-slider-nav--prev {
left: 30px;
}
.cf-slider-nav--next {
right: 30px;
} .cf-list {
list-style: disc;
padding-left: 1em;
}
.cf-list li:not(:last-child) {
margin-bottom: 1em;
} @media (max-width: 1562px) {
.cf-beige-box::before {
top: 10px;
left: 10px;
}
}
@media (max-width: 1508px) {
.cf-section-heading::before {
top: unset;
bottom: 15px;
left: 0;
width: 100px;
}
}
@media (max-width: 1360px) {
.cf-art--hero-topleft {
display: none;
}
}
@media (max-width: 1200px) {
.cf-art--hero-dog-bottomright{
bottom: 20%;
}
}
@media (max-width: 1024px) {
.cf-header{
height: 173px;
}
.cf-header .cf-header-logo{
height: 237px;	
}
.cf-art--hero-dog-topright{
top:0;
right: 30%;
}
}
@media (max-width: 930px) {
.cf-hero-dog img{
padding: 0;
}
.cf-art--hero-dog-bottomright{
right: -10%;
bottom: 25%;
}
.cf-art--hero-dog-topright{
top: 10%;
}
}
@media (max-width: 781px) {
.cf-grid-2 {
grid-template-columns: 1fr;
gap: 30px;
}
.cf-form-wrapper.cf-form-wrapper--termin .fluentform form>fieldset{
grid-template-columns: 1fr;
gap: 20px;
}
.cf-form-wrapper.cf-form-wrapper--termin .fluentform form>fieldset>div{
grid-area: auto;
}
.cf-form-wrapper.cf-form-wrapper--termin .ff_submit_btn_wrapper{
flex-wrap: wrap;
}
.cf-hero-image-col {
display: none;
}
.cf-hero-text-col .wp-block-heading,
.cf-hero-text-col p {
text-align: center;
}
.cf-hero-text-col .wp-block-buttons {
justify-content: center;
}
.cf-hero-box{
padding-top: 120px !important;
padding-bottom: 60px !important;
}
.br-no-mobile{
display: none;
}
}
@media (max-width: 768px) {
.cf-slider-nav {
width: 50px;
height: 50px;
}
.cf-slider-nav img {
width: 24px;
}
.cf-slider-nav--prev {
left: 15px;
}
.cf-slider-nav--next {
right: 15px;
}
}
@media (max-width: 500px) {
.cf-header .cf-header-logo{
width: 72vw;
height: 46vw;
}
.cf-header .cf-header-logo img{
width: 54vw;
} 
.cf-header{
height: 34vw;
}
.cf-hero-box{
padding-top: 24vw !important;
}
.cf-beige-box{
padding-left: 20px !important;
padding-right: 20px !important;
}
.cf-art--form{
display: none;
}
}