/* 
Theme Name: My customizr Child Theme for fontane-electronic.de
Theme URI: https://www.difool.de/ 
Description: difool.design Theme 
Author: Difool
Author URI: https://www.difool.de/
Template: customizr
Version: 1.0.0
*/
/*
#606060
#970007

yellow = #fac00a
green = #1f4346
dkl-blue = #3E73AA | #275280

background: radial-gradient( 150px 73px at 50px bottom, #fff, #1f4346 );

*/

body { /* font-family: 'Segoe UI','Helvetica Neue',Helvetica,Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans',sans-serif; */ }

a { color: #64ec07; }

.tc-header .navbar-brand-sitename { color: #fff; }
.tc-header:not(.header-transparent) { box-shadow: 0 6px 23px rgba(39, 82, 128, 0.6); }
.primary-navbar__wrapper.has-horizontal-menu { background: #1f4346; /*clip-path: ellipse(95% 100% at top);*/ }
.primary-navbar__wrapper.has-horizontal-menu.desktop-sticky.sticky-visible { /*clip-path: ellipse(95% 100% at top);*/ }

.fixed-header-on .desktop-sticky { padding-bottom: .5rem; }

.navbar-brand a img { padding: .3rem 0 .6rem 0; }
@media screen and (max-width:360px) {
.navbar-brand a img { padding: 0rem 0 .5rem 0; }
}

.parent { display: flex; margin: 4rem auto 4rem auto; align-items: center; justify-content: center; }
.parent div { width: 33.33%; }
.parent div a { margin: 0 0 20px 0; display: inline-flex; }
@media screen and (max-width:360px) {
.parent { flex-direction: column; }
.parent div { width: 100%; }
}

body:is(.is-scrolled) .navbar-brand a img { padding: .0rem 0 .0rem 0; }

.topbar-nav__nav { margin: 0 19%; }
.topbar-navbar__wrapper { background: #efefef; color: #222; }
.topbar-link span { color: #222; }
#topbar-nav a.nav__link span { color: #222; }
#topbar-nav a.nav__link:hover span { color: #1f4346; }
#topbar-nav a.nav__link .nav__title::before { background-color: #1f4346; }
.topbar-link { pointer-events: none; cursor: default; opacity: 0.85; }

#main-menu.nav__menu { font-size: .85em; }

#main-wrapper { border-radius: 100% / 0 0 30% 30%; }

#tc-page-wrap {
background: url("images/logo-fontane-w.svg") no-repeat center center fixed; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  background-position: 50% 60px;
  background-color: rgba(255,255,255,0.95);
  background-blend-mode: lighten;
  }

/*
#main-wrapper { 
background-image: url("images/fontane-logo-1.svg");
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: -500px 70px;
  background-color: rgba(255,255,255,0.93);
  background-blend-mode: lighten;
 }
*/

a { color: #dda710; } /* #e18107 */
h1, h2, h3, h4, h5, h6 { color: #275280; font-family: 'Segoe UI','Helvetica Neue',Helvetica,Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans',sans-serif; }
article p { color: #275280; }
article .entry-content { color: #275280; }

h1.entry-title { position: relative; display: inline-block; padding-right: 42px; /* Platz für die gezeichneten Klammern */ }
h1.entry-title::after { content: ""; background: url("images/fontane-icon-2.png") no-repeat bottom; background-size: 80%; display: inline-block; width: 30px; height: 50px; margin: 0 0 -4px 8px; opacity: .4; }

.post-content h2 { position: relative; display: inline-block; padding-right: 42px; /* Platz für die gezeichneten Klammern */ }
.post-content h2::after { content: ""; background: url("images/fontane-icon-2.png") no-repeat bottom; background-size: 80%; display: inline-block; width: 30px; height: 50px; margin: 0 0 -4px 8px; opacity: .4; }

/* <n>text</n> */
article n {
  font-weight: 400;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNTAgMTAwIiBmaWxsPSIjZmZmMTgxIj4KICA8cG9seWdvbiBwb2ludHM9IjE2LDAgMTAwLDAgODQsMTAwLCAwLDEwMCIgLz4KPC9zdmc+Cg==") center top / auto 1.5rem space no-repeat padding-box, rgb(255, 241, 129) content-box;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: black;
  display: inline;
  padding: 0px 2ch 0px 1ch;
  margin-right: -1ch;
}

/*** header video ***/
.custom-video-container { border-top: 16px solid #fff; }
.custom-video-container,
.custom-image-container {
    position: relative;
    width: 100%;
    max-width: auto; /* Maximale Breite 1170px; */
    height: 283px; /* Festes Höhe */
    margin: 0 auto; /* Horizontal zentrieren */
    overflow: hidden;
    box-shadow: 0 6px 23px rgba(39, 82, 128, 0.47);
   /* border-bottom: double 4px color(srgb 0.6469 0.7061 0.71); */
}

.custom-video-container video,
.custom-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Um sicherzustellen, dass das Video oder Bild die gesamte Fläche ausfüllt */
}


/* featured-page */
.home article p { text-align: justify; }

.featured-page p.fp-text-one, .featured-page p.fp-text-two, .featured-page p.fp-text-three { color: #275280; }

h4.fp-title { text-align: center; text-transform: uppercase; padding-bottom: 5px; }
h4.fp-title::before {
  width: 28px;
  height: 5px;
  display: block;
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  margin-left: -14px;
  background-color: #1f4346;
}
h4.fp-title::after {
  width: 100px;
  height: 1px;
  display: block;
  content: "";
  position: relative;
  margin-top: 15px;
  left: 50%;
  margin-left: -50px;
  background-color: #1f4346;
}

.featured-page .widget-front { transition: all .2s ease-in-out; }
.featured-page .widget-front.hover { /*transform: scale(1.03);*/ }
.widget-front.hover .fp-title::after { width: 2.5em; background-color: #bcc7c8; }
.widget-front.hover .fp-title::before { background-color: #bcc7c8; }

.featured-page { margin-top: 0px; }
.czr__r-wTCT { max-width: 200px; }
.featured-page .czr-thumb-wrapper { overflow: visible; }
.featured-page .czr-thumb-wrapper img { width: 200px; }
.czr-link-mask { border-color: rgba(255, 255, 255, 0.5);  }

/*** impressum ***/
.privacy-policy h5 { font-weight: 600; }


/*** contact ***/
/* .wpcf7 form { display: inline-grid; justify-items: left; } */
/* .wpcf7 input {  } */
.page-id-30 figure img { padding-top: 1.2rem; }
img.wp-image-285 { opacity: .6; width: 175px; }

.wpcf7 form p input, .wpcf7 form p select, .wpcf7 form p textarea { width: 100%; background-color: rgba(165, 180, 181, 0.17); color: #000; }
.wpcf7 input[type=checkbox] { width: 17px; height: 17px; }
.wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin-left: 0; }
.wpcf7 .wpcf7-acceptance .wpcf7-list-item label { display: flex; }
.wpcf7 .wpcf7-acceptance .wpcf7-list-item .wpcf7-list-item-label { margin: -.1em 0 5px 1em; letter-spacing: 1px; line-height: 1.3em; }

.wpcf7-form input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
}

.wpcf7-form input[type="checkbox"]:checked::before {
    content: "\2713"; /* Universelles HTML-Häkchen */
    font-family: Arial, sans-serif; /* Nutzt die Standardschriftart des Systems */
    font-weight: bold;
    color: limegreen;
    font-size: 16px;
    
    /* Perfekte Zentrierung */
    position: absolute;
    top: 30%;
    left: 40%;
    transform: translate(-50%, -50%);
}


.wpcf7 form p label { width: 100%; }
.wpcf7 span > textarea { width: 100%; }


/* start flex grid */

.czr-wp-the-content .col { flex-basis: 33%; margin: 1em; border: 0px solid green; }

@media only screen and (orientation: portrait) {
.czr-wp-the-content .col { flex-basis: 100%; }
}

/* end flex grid */
/*
body:not(.home) #main-wrapper::after { background: url("images/design_and_draw_150.png") no-repeat center center; background-size: 100px; background-color: transparent; width: 100px; height: 100px; display: block; float: right; top: -.6rem; right: 2rem; position: relative; }

body:not(.home) #main-wrapper::after { transition: transform 0.5s ease-in-out, filter 0.5s ease; display: inline-block; }
body:not(.home) #main-wrapper:hover::after { transform: rotate(360deg); filter: grayscale(.8) !important; }
*/
/* 1. Die Drehung definieren */
@keyframes scroll-rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
body:not(.home) #main-wrapper {
    position: relative; /* Stellt sicher, dass das Icon am Wrapper ausgerichtet wird */
}

/* 2. Die Animation an das Scrollen binden */
body:not(.home) #main-wrapper::after {
    content: "";
    background: url("images/logo-fontane-w.svg") no-repeat center center;
    background-size: contain;
    width: 100px;
    height: 100px;
    
    position: absolute;
    /* Ankerpunkt unten rechts */
    bottom: -2.8rem; 
    right: 2rem;
    
    /* Falls es aus dem Container herausragen soll, ohne Scrollbars zu triggern: */
    pointer-events: none; /* Verhindert, dass das Icon Klicks blockiert */
    
    animation: scroll-rotation linear;
    animation-timeline: scroll(root);
    display: block;
    z-index: 10; /* Damit es über dem Content liegt */
}
body:not(.home) #main-wrapper:hover::after { filter: grayscale(.8) !important; }


#footer { 
/*border-top: solid 4px color(srgb 0.6469 0.7061 0.71);*/
border-top: solid 4px #fac00a;
 }


.footer-skin-light .footer__wrapper { background: #1f4346; box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; }
.footer-skin-light .footer__wrapper #colophon { background: transparent; }

.colophon__row .footer__credits { color: #fff; }
.footer-skin-light .footer__wrapper a { color: #fff; }
.footer-skin-light .footer__wrapper a:hover { color: #e18107; }

.czr-credits { display: none; }

.footer-menu {  }
.footer-menu ul { display: flex; }
.footer-menu ul li { margin: 1em 0; padding: 0 .5rem; font-size: .86rem; }



/*** RESPONSIVE ***/

@media (min-width: 20em) and (max-width: 60em) {

.navbar-brand-sitelogo::after { content: 'fontane-electronic.de'; font-family: 'Verdana','Geneva','sans-serif'; color: #fff; padding-left: .5rem; }

body:not(.home) #main-wrapper::after { background: none; }

/* .custom-video-container { border-top: 0px solid #fff; } */
.custom-video-container, .custom-image-container { width: 100%; max-width: 100%; height: 138px; }
.custom-image-container img { object-fit: contain; }

.footer-menu { display: inline-flex; }
.colophon .col-12.col-sm-auto:first-child { order: 2; margin-top: -.6rem; }
}

/* only desktops */
@media screen and (min-width:1025px) {
.tc-header { background-color: transparent; }

}

/* iPads */
@media screen and (min-width:992px) {
.topbar-nav__nav { margin: 0 14%; }

}

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

.home article p { text-align: justify; hyphens: auto; }
h1.entry-title::after, .post-content h2::after { background-size: 55%; height: 35px; }

.parent { flex-wrap: wrap; }
.parent div { width: 100%; text-align: center; margin-bottom: 3.5rem; }
.parent div:nth-child(3) { margin-bottom: 0rem; }
.parent figure { display: inline-grid; margin: 0 0 -1rem; }
.parent figure img.wp-image-285 { width: 230px; }

}

/* iPhone 8 Plus portrait and landscape */
@media only screen and (min-width: 440px) and (max-width: 965px) {  }

/* iPhone 17 Plus portrait */
@media only screen and (max-width: 440px) and (orientation: portrait) { 
  .custom-video-container, .custom-image-container { width: 100%; max-width: 100%; height: 80px; }
 }
/* iPhone 8 Plus landscape */
@media only screen and (max-width: 956px) and (orientation: landscape) {
.navbar-brand-sitelogo::after { top: .18rem; position: relative; }
.parent { gap: 1.2rem; }
.parent figure img.wp-image-285 { width: 155px; }
 }