/*
 Theme Name:   2025 Cipello
 Theme URI:    https://ff-webdesigner.com
 Description:  Child-Theme für das Standard-Theme mit klassischer Menü-Unterstützung im Header.
 Author:       Frank Weolky
 Template:     twentytwentyfive
 Version:      1.0.0
*/
/* farben */
:root {
  --color-neongruen: #90c73d; 
  --color-lila: #813f99; 
  --color-hellgruen: #b5e865;
}
.home .wp-site-blocks .post-hero-wrap img{}
.wp-block-navigation.cipello-nav { display: flex; justify-content: flex-end; width: 100%; perspective: 1200px; position: relative; z-index: 2147483647; }
.wp-block-navigation.cipello-nav ul.wp-block-navigation__container { display: flex; justify-content: flex-end; list-style: none; margin: 0; padding: 0; gap: 2rem; align-items: center; width: 100%; }
.wp-block-navigation.cipello-nav .wp-block-navigation-item { position: relative; text-align: right; z-index: 2147483647; }
.wp-block-navigation.cipello-nav .wp-block-navigation-item__content { color: var(--color-lila); text-decoration: none; font-family: inherit; font-size: 1.25rem; font-weight: 600; padding: 0.5rem 0; display: inline-block; position: relative; transition: color 0.3s ease; }
.wp-block-navigation.cipello-nav .wp-block-navigation-item__content:hover { color: var(--color-lila); }
.wp-block-navigation.cipello-nav .wp-block-navigation-item__content::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: var(--color-neongruen); transition: width 0.4s ease-out; }
.wp-block-navigation.cipello-nav .wp-block-navigation-item__content:hover::after { width: 100%; }

header { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 1000 !important; background-color: var(--wp--preset--background, #fff) !important; transition: padding 0.3s ease, box-shadow 0.3s ease; padding: 0; }
header.sticky { padding: 5px 0 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
header img, header .custom-logo { transition: transform 0.3s ease, max-width 0.3s ease, height 0.3s ease; }

header.sticky > .wp-block-group > .wp-block-group { padding: 0 !important }
.admin-bar header{margin-top:32px}
main {margin-top:147px !important}
.admin-bar main{margin-top: 147px !important}
.hero {position:absolute;top: -50vh;background:#ffffff99; padding: 2.5rem; border; 1px solid #fff; border-radius:5rem;backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);left:50%;transform:translateX(-50%);width:70%}
  .hero h1{margin:0}
  .post-hero-wrap { position: relative; width: 100%; height: calc(55vh); min-height: 400px; margin-bottom: 0; z-index: 1; }
html { scroll-behavior: smooth; }
.wpcf7 input[type="submit"]{background:var(--color-lila);color:#fff;transition: filter 0.2s ease;}
.wpcf7 input[type="submit"]:hover{filter: brightness(0.85);}

.wp-block-accordion{border:2px solid var(--color-neongruen);box-shadow:0 0 10px var(--color-neongruen);background:color-mix(in srgb,var(--color-hellgruen) 60%,white);border-radius:8px;overflow:hidden}
.wp-block-accordion-heading__toggle{background:transparent;border:none;width:100%;padding:1.25rem 1.5rem;display:flex;justify-content:space-between;cursor:pointer;transition:background-color .3s ease}
.wp-block-accordion-heading__toggle-title{color:var(--color-lila);font-weight:700;font-size:1.35rem;transition:color .3s ease}
.wp-block-accordion-heading__toggle:hover{background:var(--color-neongruen)}
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title{color:var(--color-lila)}
.wp-block-accordion-heading__toggle-icon{color:var(--color-lila);font-weight:700;font-size:2.2rem;transition:color .3s ease}
.wp-block-accordion-panel{padding:1.25rem 1.5rem;background:color-mix(in srgb,var(--color-hellgruen) 15%,white);border-top:1px dashed var(--color-neongruen);display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease,padding .4s ease;overflow:hidden;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit}
.wp-block-accordion-panel > *{margin:0}
.wp-block-accordion-item.is-open .wp-block-accordion-panel{margin-block-start:0;grid-template-rows:1fr;padding:1.25rem 1.5rem}
  

h1{font-family:"Caveat";font-size:300%; line-height:1; margin-bottom:4rem}
.wp-block-navigation.cipello-nav .wp-block-navigation-item.has-child > ul.wp-block-navigation__submenu { visibility: hidden; opacity: 0; max-height: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) rotateX(-90deg); right: auto; background: transparent !important; box-shadow: 0 25px 50px rgba(0,0,0,0.4); width: max-content; padding: 0; list-style: none; border: none; border-radius: 4px; z-index: 2147483647 !important; text-align: left; transform-origin: top center; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease-in, visibility 0.6s linear }
.wp-block-navigation.cipello-nav .wp-block-navigation-item.has-child li { width: 100%; margin: 0; display: block; background: var(--color-neongruen) !important; background-image: linear-gradient(135deg, #ebf5dd 0%, #d8dede 50%, #eaeef1 100%) !important; border: 1px solid #ffffff; border-radius: 0; opacity: 1 !important; z-index: 2147483647 !important; position: relative; box-sizing: border-box; }
.wp-block-navigation.cipello-nav .wp-block-navigation-item.has-child li a { padding: 0.6rem 0.75rem; white-space: nowrap; color:var(--color-lila); font-size: 0.95rem; font-weight: normal; display: block; transition: background-color 0.2s ease; background: transparent !important; opacity: 1 !important; text-align: left; }
.wp-block-navigation.cipello-nav .wp-block-navigation-item.has-child li a:hover { background-color: rgba(255,255,255,0.8) !important; color: var(--color-lila); }
.wp-block-navigation.cipello-nav .wp-block-navigation-item.has-child:hover > ul.wp-block-navigation__submenu { visibility: visible; opacity: 1; transform: translateX(-50%) rotateX(0deg); }

footer{font-size:75%}
footer a{text-decoration:none}
footer{position: relative; overflow: hidden; z-index:1;margin-top:0; box-shadow: 0 -25px 50px rgba(0,0,0,0.4); background: linear-gradient(to bottom,  rgba(242,242,242,.9) 50%,rgba(242,242,242,.7) 100%)}

.post-hero-title{text-shadow: 0 0 10px #000; }
main>div:nth-of-type(2){margin-block-start:0}

.admin-bar .post-hero-wrap { margin-top: 0; }

figure.post-hero-image-blur { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; min-height: 100vh; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--color-neongruen) 35%, #000000) 0%, var(--color-neongruen) 100%) !important; isolation: isolate; }
figure.post-hero-image-blur img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; mix-blend-mode: luminosity; filter: grayscale(100%) contrast(130%) brightness(130%) !important; -webkit-filter: grayscale(100%) contrast(130%) brightness(130%) !important; animation: fadeInColor 1s ease-out 0.2s forwards; }
figure.post-hero-image-blur::after { content: ""; position: absolute; inset: 0; background-color: var(--color-neongruen); mix-blend-mode: color; pointer-events: none; }
@keyframes fadeInColor { 0% { opacity: 0; } 100% { opacity: 1; } }
.post-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; background: rgba(0, 0, 0, 0.05); padding: 0 !important; z-index: 2; margin: 0; animation: fadeInOverlay 2s ease-out forwards !important; }
.post-hero-overlay .entry-header { max-width: 1400px; width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--wp--preset--spacing--30, 1.5rem) !important; padding-right: var(--wp--preset--spacing--30, 1.5rem) !important; box-sizing: border-box; }
.post-hero-title { color: #ffffff; font-size: clamp(2rem, 5vw, 3.5rem); margin: 0; text-align: left; }
.hero-curve-mask { position: absolute; bottom: -1px; left: 0; width: 100%; height: 150px; z-index: 3; pointer-events: none; }
.hero-curve-mask path { fill: var(--wp--preset--color--base, #ffffff); }
.cipello-header{max-width:1400px; margin: 0 auto}
main > .wp-block-group:not(.post-hero-wrap) { position: relative; z-index: 10; background-color: var(--wp--preset--color--base, #ffffff); }
@keyframes fadeInOverlay { 0% { opacity: 0 !important; filter: blur(10px) !important; -webkit-filter: blur(10px) !important; } 100% { opacity: 1 !important; filter: blur(0px) !important; -webkit-filter: blur(0px) !important; } }



main > .wp-block-group:not(.post-hero-wrap),footer > .wp-block-group:not(.post-hero-wrap) { margin-left: 0; margin-right: 0; padding-left:calc((100vw - 1400px) / 2); padding-left:calc((100vw - 1800px) / 2);}
.has-global-padding > .alignfull{margin:0;padding:0}
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:1400px}
main h2:not(:first-of-type){padding-top:2rem}
.wp-block-image::before { content: ""; display: block; width: 100%; height: 2rem; background: #fff; }

.post-hero-overlay .entry-header{display:none}
:not(.hero)>.wp-block-heading{font-family:"Caveat";padding-bottom:4rem;padding-top:2rem;color:var(--color-neongruen);text-align:center}
h2{font-size:200%}
:not(.hero)>h3.wp-block-heading{text-align:left; font-size:200%; margin-top:5rem} 

.footer-curve-mask { position: absolute; top: -1px; left: 0; width: 100% !important; max-width:100% !important;height: 150px; z-index: 3; pointer-events: none; }
.footer-curve-mask path { fill: var(--wp--preset--color--base, #ffffff); }
footer .wp-block-columns{margin-top:150px}

.wpcf7 form { max-width: 800px; }
.wpcf7 form > p, .wpcf7 form > div { margin: 0 0 24px; }
.wpcf7 .contact-row { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 24px; margin: 0 0 24px; }
.wpcf7 .contact-row > p, .wpcf7 .contact-row > br { display: none; }
.wpcf7 .contact-field { margin: 0 !important; min-width: 0; width: auto !important; float: none !important; }
.wpcf7 .contact-field p { margin: 0; }
.wpcf7 .contact-field:has(textarea) { grid-column: 1 / -1; }
.wpcf7 label { display: block; font-size: 0; line-height: 0; }
.wpcf7 br { display: none; }
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"] { width: 100%; height: 64px; padding: 0 28px; font-size: 18px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 3px 10px rgba(0,0,0,0.18); box-sizing: border-box; outline: none; }
.wpcf7 textarea { width: 100%; height: 220px; padding: 22px 28px; font-size: 18px; font-family: inherit; border: 0; border-radius: 32px; background: #fff; box-shadow: inset 0 3px 10px rgba(0,0,0,0.18); box-sizing: border-box; outline: none; resize: vertical; }
.wpcf7 input:focus, .wpcf7 textarea:focus { box-shadow: inset 0 3px 10px rgba(0,0,0,0.28); }
.wpcf7 ::placeholder { font-size: 18px; color: #777; opacity: 1; }
.wpcf7 input[type="submit"] { height: 64px; padding: 0 48px; font-size: 18px; text-transform: uppercase; border: 0; border-radius: 999px; cursor: pointer; margin-top: 8px; }
@media (max-width: 600px) { .wpcf7 .contact-row { grid-template-columns: 1fr; } }

@media screen and (max-width:768px){
h1{font-size:200%}
body .is-layout-grid{display:block}
:not(.hero)>h3.wp-block-heading{padding:1rem 0; margin:0}
.wp-block-accordion-heading__toggle{padding:.5rem}
}
@media screen and (max-width:1399px){
ul#menu-main-menu {margin-right:1rem !important}
.hero{padding:1rem;border-radius:1rem;width:95%;top:calc(150px - 90vh)}
[class*="curve-mask"]{height:2rem}
main > .wp-block-group:not(.post-hero-wrap), footer > .wp-block-group:not(.post-hero-wrap){padding:1rem}
}
@media screnn and (min-width:1400px){
header.sticky img, header.sticky .custom-logo { height:80px; width:auto }
}