/* Theme Name: Cotto Hof Theme URI: https://cottohof.de Author: Cotto Hof Author URI: https://cottohof.de Description: Hochwertiges, editoriales Block-Theme (FSE) fuer Cotto Hof - Terrakotta- und Cotto-Spezialist. WooCommerce-kompatibel, ohne Pagebuilder. Warm, emotional, conversionstark. Requires at least: 6.5 Tested up to: 6.7 Requires PHP: 7.4 Version: 4.5.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: cottohof Tags: full-site-editing, block-styles, custom-colors, custom-menu, e-commerce, editor-style */ :root{ --ck-schwarz:#1c1714;--ck-terra:#d24219;--ck-hell:#f4ae73;--ck-rot:#a10001; --ck-creme:#fff4e1;--ck-sand:#e8cdad;--ck-ton:#d19470;--ck-stein:#f3eee8;--ck-linie:#e6dccd; --ck-ink:#3f342c;--ck-mute:#6a5b4f; --ck-ease:cubic-bezier(.22,1,.36,1); --ck-shadow:0 26px 60px -18px rgba(28,23,20,.30); --ck-shadow-sm:0 14px 34px -16px rgba(28,23,20,.22); --ck-sec:clamp(3.25rem,6.5vw,5.75rem); /* einheitlicher Sektionsabstand */ --ck-radius:4px; } /* ---------- Base / defensiv gegen Alt-CSS ---------- */ html{scroll-behavior:smooth} body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* WICHTIG: kein overflow-clip auf Vorfahren -> sonst bricht position:sticky */ .wp-site-blocks{overflow:visible} /* Keine Lücke zwischen Header und Inhalt (block-gap der Top-Level-Blöcke) */ .wp-site-blocks{--wp--style--block-gap:0px} .wp-site-blocks > *{margin-block-start:0!important;margin-block-end:0!important} main.ck-home{padding-top:0!important;margin-top:0!important} .ck-origins-wrap{margin-block:0!important} .ck-origins{width:100%} img{max-width:100%;height:auto} .ck-page h1,.ck-page h2,.ck-page h3,.ck-page h4, .wp-block-post-title,.ck-hero h1{letter-spacing:-.015em;text-wrap:balance} p{text-wrap:pretty} :where(.editor-styles-wrapper) *{box-sizing:border-box} /* Buttons */ :root :where(.wp-block-button__link){transition:transform .35s var(--ck-ease),box-shadow .35s var(--ck-ease),background-color .35s var(--ck-ease),color .35s var(--ck-ease);font-weight:600;letter-spacing:.01em} .wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(161,0,1,.5)} .is-style-outline>.wp-block-button__link{background:transparent;border:1.5px solid currentColor} .is-style-outline>.wp-block-button__link:hover{box-shadow:none} /* Sichtbarer Tastatur-Fokus (WCAG 2.4.7) – nur bei Tastaturnutzung, nicht bei Maus */ a:focus-visible,button:focus-visible,summary:focus-visible,.wp-block-button__link:focus-visible,.ck-headico:focus-visible,.wp-block-navigation-item__content:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ck-terra);outline-offset:2px;border-radius:2px} .ck-hero a:focus-visible,.ck-process a:focus-visible,.ck-arch a:focus-visible,.ck-sample a:focus-visible,.ck-footer .ck-fcta a:focus-visible{outline-color:#fff} /* Eyebrow-Farbe auf dunkleres Rot fuer AA-Kontrast (7,2:1 statt 4,3:1 auf hellen BGs). Dunkle Sektionen ueberschreiben mit hellcotto. */ .ck-eyebrow,.eyebrow{font-family:Inter,system-ui,sans-serif!important;font-size:.74rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ck-rot);margin:0 0 .4rem} /* ========================================================= HEADER (hell, sticky, EINZEILIG ohne Umbruch) ========================================================= */ .ck-header{position:-webkit-sticky;position:sticky;top:0;z-index:999;background:#faf6ef;border-bottom:1px solid var(--ck-linie);transition:box-shadow .4s var(--ck-ease),padding .4s var(--ck-ease)} .ck-header.ck-scrolled{box-shadow:0 8px 30px -16px rgba(28,23,20,.25)} .ck-header>.wp-block-group{max-width:1320px;margin-inline:auto;padding:1rem clamp(1rem,3vw,2.4rem)} .ck-header .ck-bar{display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:1.4rem} .ck-header.ck-scrolled>.wp-block-group{padding-top:.6rem;padding-bottom:.6rem} .ck-header .wp-block-site-logo{margin:0;flex:0 0 auto} .ck-header .wp-block-site-logo img{height:64px;width:auto;transition:height .4s var(--ck-ease)} .ck-header.ck-scrolled .wp-block-site-logo img{height:54px} .ck-header a{color:var(--ck-schwarz);text-decoration:none} /* Navigation */ /* Menue linksbuendig: Nav sitzt direkt hinter dem Logo, Aktionen werden per margin-right:auto nach rechts geschoben */ .ck-header .wp-block-navigation{flex:0 1 auto;justify-content:flex-start;flex-wrap:nowrap;gap:clamp(.9rem,1.8vw,2rem)!important;--wp--style--block-gap:0;margin-left:clamp(.6rem,2vw,2rem);margin-right:auto} .ck-header .wp-block-navigation .wp-block-navigation__container{justify-content:flex-start} .ck-header .wp-block-navigation .wp-block-navigation-item{white-space:nowrap} .ck-header .wp-block-navigation .wp-block-navigation-item__content{font-size:.9rem;font-weight:500;padding:.35rem 0;position:relative} .ck-header .wp-block-navigation .wp-block-navigation-item__content::after{content:"";position:absolute;left:0;right:auto;bottom:-3px;width:0;height:2px;background:var(--ck-terra);transition:width .35s var(--ck-ease)} .ck-header .wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content::after, .ck-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after{width:100%} .ck-header .wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content{color:var(--ck-terra)} /* Aktionen rechts */ .ck-actions{display:flex;align-items:center;gap:1.1rem;flex:0 0 auto} .ck-headico{display:inline-flex;color:var(--ck-schwarz);opacity:.8;transition:opacity .3s,color .3s} .ck-headico:hover{opacity:1;color:var(--ck-terra)} .ck-headcta .wp-block-button__link{font-size:.82rem;background:transparent;color:var(--ck-schwarz);border:1.5px solid var(--ck-ton);padding:.62rem 1.05rem;white-space:nowrap} .ck-headcta .wp-block-button__link:hover{background:var(--ck-rot);border-color:var(--ck-rot);color:#fff;box-shadow:none;transform:none} /* Doppelte, von WooCommerce/Plugin in den Header injizierte Warenkorb-/Konto-Icons ausblenden. Unsere eigenen Icons tragen .ck-headico und bleiben sichtbar. */ .ck-header .wp-block-woocommerce-mini-cart, .ck-header .wc-block-mini-cart, .ck-header .wc-block-mini-cart__button, .ck-header .wp-block-woocommerce-customer-account, .ck-header a[href*="/cart"]:not(.ck-headico), .ck-header a[href*="/warenkorb"]:not(.ck-headico), .ck-header a[href*="/mein-konto"]:not(.ck-headico), .ck-header a[href*="/my-account"]:not(.ck-headico){display:none!important} /* Mobile-Overlay (Hamburger): linksbündig, kompakt, volle Breite */ .ck-header .wp-block-navigation__responsive-container.is-menu-open{background:#faf6ef!important;padding:0!important} .ck-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog{width:100%!important;max-width:none!important;margin:0!important;padding:0!important} .ck-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{width:100%!important;max-width:560px!important;margin:0!important;padding:4.6rem 1.6rem 2rem!important;align-items:stretch!important} .ck-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{width:100%!important;align-items:stretch!important;gap:0!important} .ck-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{width:100%!important;margin:0!important;border-bottom:1px solid var(--ck-linie)} .ck-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{display:block;width:100%;text-align:left;padding:.95rem 0!important;font-family:"Cormorant Garamond",Georgia,serif!important;font-size:1.4rem!important;font-weight:500;color:var(--ck-schwarz)!important;letter-spacing:0} .ck-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover{color:var(--ck-terra)!important} /* Untermenü (Verlegung/Sanierung) eingerückt & dezent */ .ck-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{width:100%} .ck-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item{border-bottom:none} .ck-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{font-family:Inter,sans-serif!important;font-size:1.02rem!important;color:var(--ck-mute)!important;padding:.5rem 0 .5rem 1.1rem!important} /* „Nur-mobil"-Aktionen (Beratung/Warenkorb/Konto) unten in Inter, abgesetzt */ .ck-header .wp-block-navigation__responsive-container.is-menu-open .ck-mob-only .wp-block-navigation-item__content{font-family:Inter,sans-serif!important;font-size:1.05rem!important;font-weight:600} .ck-header .wp-block-navigation__responsive-container.is-menu-open .ck-mob-first .wp-block-navigation-item__content{color:var(--ck-rot)!important} /* Schließen-/Öffnen-Icon */ .ck-header .wp-block-navigation__responsive-container-close svg, .ck-header .wp-block-navigation__responsive-container-open svg{fill:var(--ck-schwarz)} .ck-header .wp-block-navigation__responsive-container-close{top:1.4rem;right:1.4rem} /* === Mobile (≤900px): Logo + Suche/Warenkorb-Icons + Burger (Version 1.2.3, Jan-Wunsch); Konto-Icon + Beratung-Button wandern weiter ins Burger-Menü === */ .ck-header .wp-block-navigation-item.ck-mob-only{display:none} @media(max-width:900px){ .ck-header .wp-block-navigation__responsive-container-open{display:flex!important;margin-left:0} .ck-header .wp-block-navigation__responsive-container:not(.is-menu-open){display:none!important} .ck-header .wp-block-navigation{order:3;margin-left:0!important;margin-right:0!important;flex:0 0 auto} .ck-actions{display:flex!important;order:2;gap:.85rem;margin-left:auto} .ck-actions .ck-headico[aria-label="Konto"]{display:none} .ck-headcta{display:none!important} .ck-header .wp-block-site-logo img{height:52px} .ck-header.ck-scrolled .wp-block-site-logo img{height:46px} .ck-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.ck-mob-only{display:flex} .ck-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.ck-mob-first{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--ck-linie)} } /* ========================================================= HERO ========================================================= */ .ck-hero.wp-block-cover{min-height:clamp(560px,86vh,860px);justify-content:flex-end;align-items:flex-start;text-align:left;overflow:hidden;padding-bottom:clamp(2.5rem,6vh,5rem)} .ck-hero .wp-block-cover__image-background{will-change:transform} .ck-hero>.wp-block-cover__background{background:linear-gradient(180deg,rgba(28,23,20,.44) 0%,rgba(28,23,20,.20) 30%,rgba(28,23,20,.52) 60%,rgba(28,23,20,.9) 100%)!important;opacity:1!important} /* Scrim auf der linken Textseite: sichert Kontrast fuer Eyebrow/Headline/Buttons, Bild bleibt rechts hell */ .ck-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,rgba(28,23,20,.80) 0%,rgba(28,23,20,.54) 28%,rgba(28,23,20,.20) 52%,transparent 72%)} .ck-hero .wp-block-cover__inner-container{position:relative;z-index:3;width:100%;max-width:1280px;margin-inline:auto;padding-inline:clamp(1rem,3vw,2.4rem);text-align:left} /* Hero linksbuendig: das constrained-Layout zentriert sonst die schmalen Textelemente (margin-inline:auto). */ .ck-hero .wp-block-cover__inner-container>*, .ck-hero .ck-reveal>*{margin-left:0!important;margin-right:0!important} .ck-hero .wp-block-buttons{justify-content:flex-start} .ck-hero h1,.ck-hero p,.ck-hero .ck-eyebrow{text-align:left;margin-inline-start:0} .ck-hero h1{font-size:clamp(2.6rem,6.4vw,5.6rem);font-weight:500;line-height:1.04;color:#fff;margin:0;max-width:16ch} .ck-hero h1 em{font-style:italic;color:var(--ck-hell)} .ck-hero p{font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.6;color:rgba(255,255,255,.92);max-width:44ch} .ck-hero .ck-eyebrow{color:var(--ck-hell)} /* schwebende Fliese entfernt (Kunde: „Kachel raus, zu haeufig drin") */ @keyframes ck-float{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-14px)}} /* ========================================================= HERKUNFT-LEISTE (ersetzt Marquee, elegant & ruhig) ========================================================= */ .ck-origins{background:var(--ck-schwarz);color:var(--ck-creme);padding:1.15rem 1.5rem;display:flex;align-items:center;justify-content:center;gap:1.4rem 2.2rem;flex-wrap:wrap;text-align:center} .ck-origins .ck-olabel{font-family:Inter,sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ck-hell);opacity:.95} .ck-origins ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.2rem 1.6rem;flex-wrap:wrap;justify-content:center} .ck-origins li{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:1.28rem;color:var(--ck-creme);position:relative;padding-left:1.6rem} .ck-origins li:first-child{padding-left:0} .ck-origins li:not(:first-child)::before{content:"◆";position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:.42rem;color:var(--ck-terra);font-style:normal} /* ========================================================= SEKTIONS-RHYTHMUS (einheitlich, beendet doppelte Paddings) ========================================================= */ main{--wp--style--block-gap:0} /* Einheitlicher Sektionsabstand (bewusst uniform via !important fuer konsistenten Rhythmus). */ .ck-home > .wp-block-group:not(.ck-origins-wrap), .ck-home > .wp-block-cover:not(.ck-hero){padding-top:var(--ck-sec)!important;padding-bottom:var(--ck-sec)!important} .ck-home > *{margin-block:0!important} /* innenliegende Spalten-Abstaende */ .ck-home .wp-block-columns{gap:clamp(1.8rem,4vw,3.4rem)} .ck-inner{max-width:1280px;margin-inline:auto;padding-inline:clamp(1rem,3vw,2.4rem)} /* Helpers */ .ck-lead{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.75;color:var(--ck-ink)} .ck-rule{position:relative;padding-bottom:.55em;margin-bottom:.2em} .ck-rule::after{content:"";position:absolute;left:0;bottom:0;width:60px;height:3px;background:var(--ck-terra);border-radius:2px} .has-text-align-center.ck-rule::after{left:50%;transform:translateX(-50%)} .ck-txtlink{font-weight:600;color:var(--ck-rot);border-bottom:1.5px solid transparent;transition:border-color .3s,color .3s;text-decoration:none;display:inline-block} .ck-txtlink:hover{border-color:var(--ck-terra);color:var(--ck-terra)} .ck-badge{background:#fff;box-shadow:var(--ck-shadow-sm);border-radius:var(--ck-radius)} .ck-num{font-family:"Cormorant Garamond",serif;font-size:2.8rem;line-height:1;color:var(--ck-rot);margin:0} /* Bild-Kacheln: feste Ratio, KEIN weisser Rand mehr */ .ck-media{position:relative;overflow:hidden;border-radius:var(--ck-radius);aspect-ratio:4/3;margin:0;background:var(--ck-sand)} .ck-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ck-ease)} .ck-media:hover img{transform:scale(1.05)} .ck-media.ck-tall{aspect-ratio:4/5} .ck-media.ck-wide{aspect-ratio:3/2} /* Editierbar: .ck-media als core/image-Figur ODER als Gruppe mit innenliegendem Bild (Overlay) */ .ck-media.wp-block-group{display:block;padding:0} .ck-media .wp-block-image{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:0;border-radius:inherit} .ck-media .wp-block-image a{display:block;width:100%;height:100%} .ck-media .ck-idx,.ck-media .ck-badge-img{z-index:2} .ck-idx{position:absolute;top:1.2rem;left:1.4rem;z-index:2;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.15rem;color:#fff;letter-spacing:.04em;text-shadow:0 2px 12px rgba(0,0,0,.5)} .ck-tag{display:inline-block;font-size:.76rem;font-weight:500;color:var(--ck-mute);border:1px solid var(--ck-linie);border-radius:999px;padding:.38rem .85rem;margin:0 .4rem .45rem 0;background:#fff} /* PROZESS (dunkel) */ .ck-process{background:var(--ck-schwarz)!important;color:var(--ck-creme)} .ck-process h2,.ck-process h3,.ck-process h4{color:#fff} .ck-process .ck-step{display:flex;gap:1.5rem;padding:1.5rem 0;border-top:1px solid rgba(255,255,255,.14)} .ck-process .ck-step:last-child{border-bottom:1px solid rgba(255,255,255,.14)} .ck-process .ck-step .n{font-family:"Cormorant Garamond",serif;font-size:1.5rem;color:var(--ck-hell);min-width:2.4rem;line-height:1.3} .ck-process .ck-step h3{font-size:1.3rem;margin:0 0 .3rem} .ck-process .ck-step p{color:rgba(255,244,225,.72);margin:0;font-size:.98rem;line-height:1.6} /* MUSTER-BAND (terrakotta) */ .ck-sample.wp-block-cover{overflow:hidden} .ck-sample>.wp-block-cover__background{background:linear-gradient(135deg,#d24219 0%,#b8350f 100%)!important;opacity:1!important} .ck-sample .wp-block-cover__inner-container{position:relative;z-index:2;max-width:1280px;margin-inline:auto;padding-inline:clamp(1rem,3vw,2.4rem)} .ck-sample .ck-bigword{position:absolute;right:-2%;top:50%;transform:translateY(-50%);font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(8rem,22vw,22rem);line-height:.8;color:rgba(255,255,255,.10);z-index:0;pointer-events:none;white-space:nowrap} .ck-sample h2,.ck-sample p{color:#fff} .ck-sample .ck-tilewrap{display:flex;justify-content:center} .ck-sample .ck-tilewrap .wp-block-image{margin:0;width:100%;display:flex;justify-content:center} .ck-sample .ck-tilewrap img{width:min(58%,260px);filter:drop-shadow(0 28px 46px rgba(0,0,0,.34));transform:rotate(6deg);transition:transform .6s var(--ck-ease)} .ck-sample:hover .ck-tilewrap img{transform:rotate(0)} /* SANIERUNG */ .ck-san .ck-checks ul{list-style:none;margin:1.4rem 0 1.8rem;padding:0} .ck-san .ck-checks li{display:flex;gap:.85rem;padding:.45rem 0;color:var(--ck-ink);align-items:flex-start} .ck-san .ck-checks li svg{flex:none;margin-top:.2rem} .ck-badge-img{position:absolute;top:1rem;left:1rem;z-index:2;background:rgba(28,23,20,.82);color:#fff;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.45rem .8rem;border-radius:3px;backdrop-filter:blur(4px)} /* ARCHITEKTEN (dunkles Cover) */ .ck-arch.wp-block-cover{overflow:hidden} .ck-arch>.wp-block-cover__background{background:linear-gradient(90deg,rgba(28,23,20,.96) 0%,rgba(28,23,20,.8) 55%,rgba(28,23,20,.5) 100%)!important;opacity:1!important} .ck-arch .wp-block-cover__inner-container{position:relative;z-index:2;max-width:1280px;margin-inline:auto;padding-inline:clamp(1rem,3vw,2.4rem);width:100%} .ck-arch h2,.ck-arch p{color:#fff} .ck-arch .ck-feats{display:flex;gap:2.4rem;flex-wrap:wrap;margin:0 0 2rem} .ck-arch .ck-feat .n{font-family:"Cormorant Garamond",serif;font-size:2.1rem;color:var(--ck-hell);line-height:1} .ck-arch .ck-feat small{display:block;color:rgba(255,244,225,.72);font-size:.85rem;max-width:18ch;margin-top:.25rem} /* SHOWROOM */ .ck-show .ck-stats{display:flex;gap:2.6rem;margin:1.6rem 0;flex-wrap:wrap} .ck-show .ck-stat .n{font-family:"Cormorant Garamond",serif;font-size:2.4rem;color:var(--ck-rot);line-height:1} .ck-show .ck-stat small{display:block;font-size:.85rem;color:var(--ck-mute);margin-top:.25rem} /* FAQ */ .ck-faq.wp-block-group{background:var(--ck-creme)!important} .ck-faq .wp-block-details{border-bottom:1px solid var(--ck-linie);padding:0} .ck-faq summary{cursor:pointer;list-style:none;padding:1.4rem 2.5rem 1.4rem 0;font-weight:500;font-size:1.45rem;font-family:"Cormorant Garamond",serif;position:relative;color:var(--ck-schwarz)} .ck-faq summary::-webkit-details-marker{display:none} .ck-faq summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--ck-terra);font-family:Inter,sans-serif;line-height:1;transition:transform .3s} .ck-faq details[open] summary{color:var(--ck-terra)} .ck-faq details[open] summary::after{content:"–"} .ck-faq .wp-block-details>*:not(summary){padding:0 0 1.4rem;color:var(--ck-ink);max-width:72ch;line-height:1.75;font-size:1.08rem} /* Ausfuehrliche FAQ-Seite: Kategorie-Ueberschriften + Abschluss-CTA */ .ck-faq .ck-faqcat{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(1.55rem,2.6vw,2.1rem);color:var(--ck-schwarz);margin:2.6rem 0 .3rem;padding-bottom:.5rem;border-bottom:2px solid var(--ck-terra)} .ck-faq .ck-faqcat:first-of-type{margin-top:.4rem} .ck-faqcta{font-size:1.02rem;color:var(--ck-ink)} .ck-faqcta a{color:var(--ck-rot);font-weight:600;text-decoration:none;border-bottom:1.5px solid transparent;transition:border-color .3s} .ck-faqcta a:hover{border-color:var(--ck-terra)} /* ========================================================= FOOTER (modern: CTA-Band + Spalten + Bottom-Bar) ========================================================= */ .ck-footer{background:var(--ck-stein)!important;color:var(--ck-mute)} .ck-fcta{background:var(--ck-schwarz);color:var(--ck-creme);padding:clamp(2.5rem,5vw,3.75rem) clamp(1rem,3vw,2.4rem)} .ck-fcta .ck-eyebrow{color:var(--ck-hell)} .ck-fcta-h{color:#fff;font-size:clamp(1.8rem,3.4vw,2.8rem);margin:.1rem 0 .4rem;font-weight:500} .ck-fcta-p{color:rgba(255,244,225,.74);margin:0;max-width:44ch} .ck-fcta-btns{justify-content:flex-end} .ck-fcta-btns .wp-block-button__link{background:var(--ck-rot);color:#fff;border:none;padding:.95rem 1.7rem;font-size:.95rem} .ck-fcta-btns .wp-block-button__link:hover{background:var(--ck-terra);transform:translateY(-2px)} .ck-fcta-tel{text-align:right;margin:.8rem 0 0;font-size:.9rem;color:rgba(255,244,225,.7)} .ck-fcta-tel a{color:var(--ck-hell);border-bottom:1px solid transparent;text-decoration:none} .ck-fcta-tel a:hover{border-color:var(--ck-hell)} .ck-fmain{padding:clamp(3rem,5vw,4.5rem) clamp(1rem,3vw,2.4rem) clamp(2rem,3vw,2.75rem)} .ck-fcols{gap:clamp(1.5rem,3vw,2.5rem)!important} .ck-fmain .wp-block-site-logo{margin:0} .ck-fmain .wp-block-site-logo img{height:54px;width:auto;margin-bottom:1.1rem} .ck-fbrand{color:var(--ck-mute);line-height:1.65;font-size:.95rem;max-width:36ch;margin:0 0 1rem} .ck-faddr{color:var(--ck-mute);font-size:.84rem;margin:0} .ck-footer .ck-fhead{font-family:Inter,sans-serif;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--ck-schwarz);margin:0 0 1.1rem;position:relative;padding-bottom:.6rem} .ck-footer .ck-fhead::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--ck-terra)} .ck-flist{list-style:none;margin:0;padding:0} .ck-flist li{margin-bottom:.55rem} .ck-flist a{color:var(--ck-mute);text-decoration:none;font-size:.95rem;transition:color .25s,padding-left .25s} .ck-flist a:hover{color:var(--ck-terra);padding-left:4px} .ck-fcontact{margin:0 0 .9rem;line-height:1.95} .ck-fcontact a{color:var(--ck-mute);text-decoration:none} .ck-fcontact a:hover{color:var(--ck-terra)} .ck-fnote{font-size:.84rem;color:var(--ck-mute);margin:0} .ck-fbar{border-top:1px solid var(--ck-linie);padding:1.4rem clamp(1rem,3vw,2.4rem)} .ck-fbar-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:var(--ck-mute)} .ck-flegal{display:flex;gap:1.2rem;flex-wrap:wrap} .ck-flegal a{color:var(--ck-mute);text-decoration:none;transition:color .25s} .ck-flegal a:hover{color:var(--ck-terra)} /* REVEAL */ .ck-reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ck-ease),transform .9s var(--ck-ease)} .ck-reveal.in{opacity:1;transform:none} .ck-reveal.d1{transition-delay:.08s}.ck-reveal.d2{transition-delay:.16s}.ck-reveal.d3{transition-delay:.24s} @media(prefers-reduced-motion:reduce){.ck-reveal{opacity:1;transform:none;transition:none}.ck-hero::after{animation:none}} /* ========================================================= WOOCOMMERCE (Shop + Produktseite, hochwertig) ========================================================= */ .woocommerce .woocommerce-products-header__title,.woocommerce h1.entry-title,.ck-shop .wp-block-post-title{font-family:"Cormorant Garamond",serif;font-weight:500} .woocommerce .woocommerce-result-count{color:var(--ck-mute);font-size:.9rem;margin:0 0 1.4rem} .woocommerce .woocommerce-ordering{margin:0 0 1.4rem} .woocommerce .woocommerce-ordering select,.woocommerce select.orderby{padding:.6rem 2.2rem .6rem .9rem;border:1px solid var(--ck-linie);border-radius:3px;background:#fff;font-family:Inter,sans-serif;font-size:.9rem;color:var(--ck-schwarz)} .woocommerce ul.products{display:grid!important;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.6vw,2.2rem);margin:0!important;padding:0!important;list-style:none} .woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important} .woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;background:#fff;border:1px solid var(--ck-linie);border-radius:var(--ck-radius);overflow:hidden;display:flex;flex-direction:column;text-align:left;transition:transform .35s var(--ck-ease),box-shadow .35s var(--ck-ease)} .woocommerce ul.products li.product:hover{transform:translateY(-6px);box-shadow:var(--ck-shadow)} .woocommerce ul.products li.product img{aspect-ratio:1/1;object-fit:cover;width:100%;display:block;margin:0!important;background:var(--ck-stein);transition:transform 1s var(--ck-ease)} .woocommerce ul.products li.product:hover img{transform:scale(1.05)} .woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:"Cormorant Garamond",serif;font-size:1.4rem;font-weight:500;line-height:1.2;padding:1rem 1.15rem 0;color:var(--ck-schwarz)} .woocommerce ul.products li.product .price{color:var(--ck-rot)!important;font-weight:600;padding:.35rem 1.15rem 0;display:block;font-size:1.08rem;font-family:Inter,sans-serif} .woocommerce ul.products li.product .price del{color:var(--ck-mute)!important;font-weight:400} .woocommerce ul.products li.product .price ins{text-decoration:none} .woocommerce ul.products li.product .button{margin:.9rem 1.15rem 1.15rem!important;display:block;text-align:center} .woocommerce a.button,.woocommerce button.button,.woocommerce #respond input#submit,.woocommerce .single_add_to_cart_button,.woocommerce-cart .button,.woocommerce-checkout .button{background:var(--ck-rot)!important;color:#fff!important;border-radius:2px;font-weight:600;font-family:Inter,sans-serif;border:none;padding:.85rem 1.4rem;transition:background-color .3s,transform .3s;line-height:1.2} .woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .single_add_to_cart_button:hover,.woocommerce #respond input#submit:hover{background:var(--ck-terra)!important;transform:translateY(-2px)} .woocommerce span.onsale{background:var(--ck-rot)!important;color:#fff;border-radius:3px;font-family:Inter,sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;min-height:auto;min-width:auto;padding:.5em .85em;line-height:1;top:.7rem;left:.7rem;right:auto;margin:0;z-index:2;box-shadow:0 2px 8px rgba(28,23,20,.18)} .woocommerce ul.products li.product span.onsale{position:absolute;top:.7rem;left:.7rem;right:auto} .woocommerce div.product{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start} .woocommerce div.product .woocommerce-product-gallery{margin:0;width:100%!important;float:none!important} .woocommerce div.product .woocommerce-product-gallery__image img,.woocommerce div.product div.images img{border-radius:var(--ck-radius);box-shadow:var(--ck-shadow-sm)} .woocommerce div.product .summary,.woocommerce div.product .entry-summary{margin:0!important;width:100%!important;float:none!important} .woocommerce div.product .product_title{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(2rem,4vw,3rem);line-height:1.05;margin:0 0 .6rem} .woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--ck-rot);font-weight:600;font-size:1.7rem;font-family:Inter,sans-serif;margin-bottom:1.2rem} .woocommerce div.product .woocommerce-product-details__short-description{color:var(--ck-ink);line-height:1.7;margin-bottom:1.4rem} .woocommerce div.product form.cart{margin:1.2rem 0;display:flex;gap:.8rem;align-items:stretch;flex-wrap:wrap} .woocommerce div.product form.cart .quantity input.qty{width:80px;padding:.85rem .6rem;border:1px solid var(--ck-linie);border-radius:3px;text-align:center;font-family:Inter,sans-serif;font-size:1rem} .woocommerce div.product form.cart .single_add_to_cart_button{padding:.9rem 2rem;font-size:1rem} .woocommerce div.product .product_meta{font-size:.86rem;color:var(--ck-mute);margin-top:1.4rem;border-top:1px solid var(--ck-linie);padding-top:1rem} .woocommerce div.product .product_meta a{color:var(--ck-rot)} .woocommerce div.product .woocommerce-tabs{grid-column:1 / -1;margin-top:1rem} .woocommerce div.product .woocommerce-tabs ul.tabs{border:none;padding:0;margin:0 0 1.5rem;display:flex;gap:1.5rem} .woocommerce div.product .woocommerce-tabs ul.tabs::before{border-color:var(--ck-linie)} .woocommerce div.product .woocommerce-tabs ul.tabs li{background:none;border:none;border-radius:0;padding:0 0 .6rem;margin:0} .woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--ck-mute);font-family:Inter,sans-serif;font-weight:600;font-size:.92rem;padding:0 .9rem;text-transform:none} .woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom:2px solid var(--ck-terra)} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ck-schwarz)} .woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none} .woocommerce div.product .woocommerce-Tabs-panel h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:1.8rem} .woocommerce div.product .woocommerce-Tabs-panel p{color:var(--ck-ink);line-height:1.7} .woocommerce .related,.woocommerce .upsells{grid-column:1 / -1;margin-top:2.5rem} .woocommerce .related>h2,.woocommerce .upsells>h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:2rem;margin-bottom:1.4rem} .woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{border-top-color:var(--ck-terra);background:#fff} .woocommerce-breadcrumb{font-size:.85rem;color:var(--ck-mute);margin-bottom:1.5rem} .woocommerce-breadcrumb a{color:var(--ck-rot)} @media(max-width:980px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}} @media(max-width:900px){.woocommerce div.product{grid-template-columns:1fr}} @media(max-width:782px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:1rem}} @media(max-width:430px){.woocommerce ul.products{grid-template-columns:1fr}} /* ========================================================= FORMULARE ========================================================= */ .ck-form{max-width:660px} .ck-form p{margin:0 0 1.7rem} .ck-form .row{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin:0 0 1.7rem} .ck-form .row>p{margin:0} .ck-form label{display:block;font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--ck-mute);margin-bottom:.6rem} .ck-form input[type=text],.ck-form input[type=email],.ck-form input[type=tel],.ck-form input[type=number],.ck-form textarea,.ck-form select{width:100%;padding:1.05rem 1.2rem;border:1px solid var(--ck-linie);border-radius:7px;background:#fffdfb;font-family:Inter,sans-serif;font-size:1rem;color:var(--ck-schwarz);transition:border-color .25s,box-shadow .25s,background-color .25s} .ck-form input:hover,.ck-form textarea:hover,.ck-form select:hover{border-color:var(--ck-ton)} .ck-form input:focus,.ck-form textarea:focus,.ck-form select:focus{outline:none;border-color:var(--ck-terra);background:#fff;box-shadow:0 0 0 3px rgba(210,66,25,.14)} .ck-form textarea{min-height:160px;resize:vertical} .ck-form .file-wrap{border:1px dashed var(--ck-ton);border-radius:7px;padding:1.15rem;background:#fbf7f1} .ck-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .ck-form button{background:var(--ck-rot);color:#fff;border:none;border-radius:7px;padding:1.1rem 2.4rem;font-family:Inter,sans-serif;font-weight:600;font-size:1rem;cursor:pointer;transition:background-color .3s,transform .3s;margin-top:.3rem} .ck-form button:hover{background:var(--ck-terra);transform:translateY(-2px)} .ck-form .consent{font-size:.82rem;color:var(--ck-mute);display:flex;gap:.6rem;align-items:flex-start} .ck-form .consent input{margin-top:.25rem} .ck-formnote{padding:1rem 1.2rem;border-radius:3px;margin-bottom:1.5rem;font-weight:500} .ck-formnote.ok{background:#eef6ec;border-left:3px solid #4a7c43;color:#2f5a2b} .ck-formnote.err{background:#fbecea;border-left:3px solid var(--ck-rot);color:#8a2a1f} /* ========================================================= UNTERSEITEN-BAUSTEINE ========================================================= */ .ck-phero.wp-block-cover{min-height:clamp(320px,42vh,440px);align-items:center} .ck-phero>.wp-block-cover__background{background:linear-gradient(180deg,rgba(28,23,20,.45),rgba(28,23,20,.72))!important;opacity:1!important} .ck-phero .wp-block-cover__inner-container{max-width:1100px;margin-inline:auto;padding-inline:clamp(1rem,3vw,2.4rem);width:100%} .ck-phero h1{color:#fff;font-size:clamp(2.4rem,5vw,4rem);margin:0} .ck-phero p{color:rgba(255,244,225,.92);font-size:1.1rem;max-width:54ch;margin:.8rem 0 0} .ck-prose{max-width:760px} .ck-prose h2{font-size:clamp(1.8rem,3vw,2.4rem);margin:2.2rem 0 .8rem} .ck-prose p,.ck-prose li{color:var(--ck-ink);line-height:1.75;font-size:1.05rem} /* Karten-Gruppen als responsives 3er-Raster: keine gequetschten Reihen bei 6 Karten (z.B. Architekten-Leistungen) */ .ck-cards{display:grid!important;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)!important} .ck-cards>.wp-block-column{margin:0!important} @media(max-width:860px){.ck-cards{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.ck-cards{grid-template-columns:1fr}} .ck-card{background:#fff;border:1px solid var(--ck-linie);border-radius:var(--ck-radius);padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--ck-shadow-sm);height:100%} .ck-card h3{margin:.2rem 0 .5rem;font-size:1.5rem} .ck-card p{color:var(--ck-ink);line-height:1.65} .ck-mosaic .wp-block-image{margin:0} .ck-mosaic .wp-block-image img{border-radius:var(--ck-radius);aspect-ratio:1/1;object-fit:cover;width:100%} /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1130px){ /* Navigation -> Hamburger schon ab Tablet (vorher 1024, dadurch Quetschzone 1025-1130) */ .ck-header .wp-block-navigation__responsive-container:not(.is-menu-open){display:none} .ck-header .wp-block-navigation__responsive-container-open{display:flex} /* Logo links, Aktionen + Burger rechtsbuendig */ .ck-header .ck-bar{justify-content:flex-start;gap:.6rem} .ck-header .wp-block-site-logo{margin-right:auto} .ck-actions{order:2;gap:.8rem} .ck-header .wp-block-navigation{order:3;flex:0 0 auto;margin-left:.2rem;margin-right:0} .ck-headcta{display:none} } @media(min-width:1131px){ .ck-header .wp-block-navigation__responsive-container-open{display:none} } @media(max-width:781px){ .ck-hero h1{max-width:18ch} .ck-home .wp-block-columns{flex-wrap:wrap} .ck-home .wp-block-column{flex-basis:100%!important} .ck-sample .ck-bigword{display:none} .ck-arch .ck-feats{gap:1.4rem} .ck-media{aspect-ratio:16/10} .ck-headcta{display:none} } @media(max-width:600px){ .ck-origins{gap:.6rem 1.2rem;padding:1rem} .ck-origins li{font-size:1.1rem;padding-left:1.2rem} } /* ========================================================= NAV-DROPDOWN (Sortiment-Submenu) ========================================================= */ .ck-header .wp-block-navigation .wp-block-navigation-submenu__toggle{color:inherit} .ck-header .wp-block-navigation .wp-block-navigation-submenu__toggle svg{fill:currentColor} .ck-header .wp-block-navigation .wp-block-navigation__submenu-container{top:100%!important;left:0;margin:0!important;padding:.5rem 0;min-width:235px;background:#fff;border:1px solid var(--ck-linie);border-top:none;border-radius:0 0 var(--ck-radius) var(--ck-radius);box-shadow:var(--ck-shadow);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease,visibility .18s} .ck-header .wp-block-navigation .wp-block-navigation-submenu:hover>.wp-block-navigation__submenu-container, .ck-header .wp-block-navigation .wp-block-navigation-submenu:focus-within>.wp-block-navigation__submenu-container, .ck-header .wp-block-navigation .wp-block-navigation__submenu-container:hover{opacity:1!important;visibility:visible!important;transform:none!important;display:flex} .ck-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item{white-space:nowrap} .ck-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content{padding:.62rem 1.3rem!important;font-size:.92rem;width:100%} .ck-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after{display:none} .ck-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover{background:var(--ck-stein)} .ck-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover .wp-block-navigation-item__content{color:var(--ck-terra)} /* ========================================================= SORTIMENT-KARTEN ========================================================= */ .ck-catcard{background:#fff;border:1px solid var(--ck-linie);border-radius:var(--ck-radius);overflow:hidden;box-shadow:var(--ck-shadow-sm);height:100%;padding:0!important;transition:transform .35s var(--ck-ease),box-shadow .35s var(--ck-ease)} .ck-catcard:hover{transform:translateY(-6px);box-shadow:var(--ck-shadow)} .ck-catcard>*{max-width:none!important} .ck-catcard .ck-catcard-img{display:block;overflow:hidden} .ck-catcard .ck-media{border-radius:0;aspect-ratio:16/10;margin:0} .ck-catcard:hover .ck-media img{transform:scale(1.05)} .ck-catcard h3{margin:1.2rem 0 .45rem;font-size:1.65rem;padding-inline:clamp(1.3rem,2.5vw,1.9rem)} .ck-catcard h3 a{color:var(--ck-schwarz);text-decoration:none} .ck-catcard h3 a:hover{color:var(--ck-terra)} .ck-catcard p{color:var(--ck-ink);line-height:1.6;margin:0 0 .7rem;padding-inline:clamp(1.3rem,2.5vw,1.9rem)} .ck-catcard p:last-child{padding-bottom:1.5rem;margin-bottom:0} /* Rechtshinweis */ .ck-legalnote{font-size:.85rem;color:var(--ck-mute);border-left:3px solid var(--ck-linie);padding:.4rem 0 .4rem 1rem;margin-top:2.4rem} /* Footer responsive */ @media(max-width:781px){ .ck-fcta-btns{justify-content:flex-start} .ck-fcta-tel{text-align:left} .ck-fbar-row{flex-direction:column;align-items:flex-start;gap:.7rem} .ck-fcols .wp-block-column{flex-basis:48%!important} } @media(max-width:600px){ .ck-fcols .wp-block-column{flex-basis:100%!important} } /* ========================================================= PRODUKTSEITE: Über-Cotto-Sektion ========================================================= */ .ck-aboutcotto{background:var(--ck-creme);padding:clamp(3rem,6vw,5rem) clamp(1rem,4vw,2rem)!important;margin-top:clamp(2.5rem,5vw,4rem)} .ck-aboutcotto .ck-eyebrow{color:var(--ck-rot);text-align:center} .ck-aboutcotto-h{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(2rem,4vw,3rem);text-align:center;margin:.3rem 0 1.8rem;color:var(--ck-schwarz)} .ck-aboutcotto-cols{gap:clamp(1.5rem,4vw,3rem)!important} .ck-aboutcotto-cols p{color:var(--ck-ink);line-height:1.8;font-size:1.05rem;margin:0} .ck-aboutcotto-btns{justify-content:center;margin-top:2rem} /* ========================================================= SHOP-FILTERLEISTE (Alt-Regeln entfernt in 1.2.3 – sie machten die Pills auf Mobil unsichtbar. Gültige Filter-Styles: Block „Shop-Filter" weiter unten.) ========================================================= */ /* Mengen-/Einheit-Hinweis (Variations-Selects: siehe FEINSCHLIFF-Block unten, table.variations) */ .woocommerce .ck-unit-hint{font-size:.84rem;color:var(--ck-mute);margin:.2rem 0 1rem} /* ========================================================= FEINSCHLIFF (mobiles Menü, Overflow, Selects, Tabs, Formular) ========================================================= */ /* --- Kein horizontaler Overflow (mobile Scrollbalken) --- */ html{overflow-x:clip} body{overflow-x:clip;max-width:100%} img,video,iframe{max-width:100%;height:auto} .alignfull{max-width:100vw} .woocommerce ul.products{margin-left:0;margin-right:0} .ck-product,.ck-shop{overflow-x:clip} /* --- 3-Balken-Hamburger (sauber gezeichnet) --- */ .ck-header .wp-block-navigation__responsive-container-open{position:relative;width:42px;height:42px;background:transparent;border:none;padding:0;cursor:pointer} .ck-header .wp-block-navigation__responsive-container-open svg{display:none} .ck-header .wp-block-navigation__responsive-container-open::before{content:"";position:absolute;left:10px;right:10px;top:14px;height:2px;background:var(--ck-schwarz);box-shadow:0 7px 0 var(--ck-schwarz),0 14px 0 var(--ck-schwarz);border-radius:2px} /* --- Mobiles Overlay: ruhig, großzügig, saubere Untermenüs --- */ .ck-header .wp-block-navigation__responsive-container.is-menu-open{background:#faf6ef;padding:5rem 1.6rem 2.4rem} .ck-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{width:100%;max-width:520px;margin-inline:auto} .ck-header .is-menu-open .wp-block-navigation__container{flex-direction:column;align-items:stretch;gap:0} .ck-header .is-menu-open .wp-block-navigation-item{display:block;width:100%;border-bottom:1px solid var(--ck-linie)} .ck-header .is-menu-open .wp-block-navigation-item__content{display:block;font-family:"Cormorant Garamond",serif;font-size:1.7rem!important;font-weight:500;color:var(--ck-schwarz)!important;padding:.85rem 0!important} .ck-header .is-menu-open .wp-block-navigation-item__content::after{display:none} .ck-header .is-menu-open .wp-block-navigation-submenu__toggle{position:absolute;right:0;top:1rem;width:2rem;height:2rem} /* Untermenü im Overlay: schlichte, eingerückte Liste statt Dropdown-Karte */ .ck-header .is-menu-open .wp-block-navigation__submenu-container{position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:0 0 .6rem .2rem!important;margin:0!important;min-width:0!important;width:100%!important} .ck-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item{border-bottom:none} .ck-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{font-family:Inter,sans-serif;font-size:1.02rem!important;font-weight:400;color:var(--ck-mute)!important;padding:.5rem 0 .5rem 1rem!important} .ck-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{color:var(--ck-terra)!important} .ck-header .wp-block-navigation__responsive-container-close{top:1.6rem;right:1.4rem} .ck-header .wp-block-navigation__responsive-container-close svg{width:30px;height:30px;fill:var(--ck-schwarz)} /* --- Variations-Selects (Farbe/Form/Vorbehandlung) hübscher --- */ .woocommerce div.product form.variations_form.cart{display:block} .woocommerce table.variations{display:block;margin:0 0 1.3rem;border:none} .woocommerce table.variations tbody,.woocommerce table.variations tr{display:block} .woocommerce table.variations td,.woocommerce table.variations th{display:block;width:100%;padding:0;border:none;background:none} .woocommerce table.variations th.label{padding:0 0 .4rem;text-align:left} .woocommerce table.variations tr{margin-bottom:1rem} .woocommerce table.variations label{font-family:Inter,sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ck-mute)} .woocommerce table.variations select{appearance:none;-webkit-appearance:none;width:100%;max-width:380px;padding:.85rem 2.8rem .85rem 1rem;border:1px solid var(--ck-linie);border-radius:4px;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236a5b4f' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;font-family:Inter,sans-serif;font-size:.98rem;color:var(--ck-schwarz);cursor:pointer;transition:border-color .2s,box-shadow .2s} .woocommerce table.variations select:focus{outline:none;border-color:var(--ck-terra);box-shadow:0 0 0 3px rgba(210,66,25,.12)} .woocommerce .single_variation_wrap{margin-top:.4rem} .woocommerce .single_variation .price{color:var(--ck-rot);font-size:1.6rem;font-weight:600;display:block;margin-bottom:.9rem} .woocommerce a.reset_variations{display:inline-block;font-size:.82rem;color:var(--ck-mute);margin:.3rem 0 0;text-decoration:underline} /* --- WooCommerce-Tabs: lesbare Breite, saubere Abstände --- */ .woocommerce div.product .woocommerce-tabs{margin-top:2.8rem;clear:both} .woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 1.6rem;border-bottom:1px solid var(--ck-linie)} .woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none} .woocommerce div.product .woocommerce-tabs ul.tabs li{margin:0 .7rem 0 0;padding:0 0 .7rem;background:none;border:none;border-radius:0} .woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom:2px solid var(--ck-terra)} .woocommerce div.product .woocommerce-tabs ul.tabs li a{font-family:Inter,sans-serif;font-weight:600;color:var(--ck-mute);padding:0 .9rem} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ck-schwarz)} .woocommerce div.product .woocommerce-tabs .panel{max-width:none;padding:0;margin:0} .woocommerce div.product .woocommerce-tabs .panel h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:1.9rem;margin:0 0 .8rem;color:var(--ck-schwarz)} .woocommerce div.product .woocommerce-tabs .panel p{line-height:1.8;color:var(--ck-ink)} /* --- Formular-Felder: mobil gestapelt (Grundregeln stehen im FORMULARE-Block oben) --- */ @media(max-width:680px){.ck-form .row{grid-template-columns:1fr;gap:0}.ck-form .row>p{margin-bottom:1.3rem}.ck-form .row>p:last-child{margin-bottom:0}} .ck-form .consent{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer} .ck-form .consent input{margin-top:.2rem;width:auto} .ck-form .consent label{display:inline;margin:0;font-size:.82rem;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--ck-mute);cursor:pointer} .ck-form-wa{font-size:.86rem;color:var(--ck-mute);margin:.2rem 0 1rem} .ck-form-wa a{color:var(--ck-terra);font-weight:600;text-decoration:none} /* --- Native WooCommerce-Formulare (Checkout/Konto): gleiche Abstaende & Felder wie .ck-form --- */ .woocommerce form .form-row{margin:0 0 1.1rem;padding:0} /* Robustes 2-Spalten-Grid statt Floats (kein Clear-Problem). Faellt ohne Wrapper auf 1 Spalte zurueck. */ .woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper,.woocommerce-additional-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem} .woocommerce form .form-row{float:none;width:auto;clear:both} .woocommerce form .form-row-first{grid-column:1} .woocommerce form .form-row-last{grid-column:2} .woocommerce form .form-row-wide,.woocommerce form .form-row.notes{grid-column:1 / -1} .woocommerce form .form-row label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--ck-mute);margin-bottom:.35rem} .woocommerce form .input-text,.woocommerce form input.input-text,.woocommerce form textarea,.woocommerce form select,.woocommerce-account form input[type=text],.woocommerce-account form input[type=email],.woocommerce-account form input[type=password]{width:100%;padding:.85rem 1rem;border:1px solid var(--ck-linie);border-radius:3px;background:#fff;font-family:Inter,sans-serif;font-size:1rem;color:var(--ck-schwarz);transition:border-color .25s,box-shadow .25s} .woocommerce form .input-text:focus,.woocommerce form textarea:focus,.woocommerce form select:focus{outline:none;border-color:var(--ck-terra);box-shadow:0 0 0 3px rgba(210,66,25,.12)} .woocommerce form.checkout .col2-set .col-1,.woocommerce form.checkout .col2-set .col-2{margin-bottom:1.5rem} @media(max-width:600px){.woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper,.woocommerce-additional-fields__field-wrapper{grid-template-columns:1fr}} /* ========================================================= SOCIAL, ZAHLUNGS-BADGES, BACK-TO-TOP ========================================================= */ .ck-social{display:flex;gap:.7rem;margin-top:1.1rem} .ck-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--ck-linie);border-radius:50%;color:var(--ck-mute);transition:all .25s var(--ck-ease)} .ck-social a:hover{background:var(--ck-terra);border-color:var(--ck-terra);color:#fff} .ck-fpay{display:flex;align-items:center;gap:.9rem 1.2rem;flex-wrap:wrap;justify-content:center;padding:1.4rem 0 .2rem;margin-top:1.5rem;border-top:1px solid var(--ck-linie)} .ck-fpay-label{font-family:Inter,sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ck-mute);margin:0} .ck-paybadges{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center} .ck-paybadge{display:inline-flex;align-items:center;height:30px;padding:0 .7rem;border-radius:5px;background:#fff;border:1px solid var(--ck-linie);color:var(--ck-ink);font-family:Inter,sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.02em;box-shadow:0 1px 2px rgba(0,0,0,.06)} .ck-paybadge--icon{padding:0 .5rem} .ck-paybadge--icon img{height:20px;width:auto;max-width:64px;display:block;margin:0} .ck-checkout-pay{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--ck-linie)} .ck-checkout-pay .ck-pay-note{font-size:.85rem;color:var(--ck-mute);margin:0 0 .6rem} .woocommerce .ck-paybadges{justify-content:flex-start} .ck-backtotop{position:fixed;right:1.3rem;bottom:1.3rem;z-index:90;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:var(--ck-schwarz);color:#fff;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s var(--ck-ease),transform .3s var(--ck-ease),background-color .3s;box-shadow:0 8px 22px rgba(28,23,20,.28)} .ck-backtotop.is-visible{opacity:1;visibility:visible;transform:none} .ck-backtotop:hover{background:var(--ck-terra)} @media(max-width:600px){.ck-backtotop{right:1rem;bottom:1rem;width:42px;height:42px}} /* ========================================================= TOP-USP-LEISTE + PRODUKT-/WARENKORB-TRUST ========================================================= */ .ck-topbar{background:var(--ck-schwarz);color:#f3e9da;font-family:Inter,sans-serif} .ck-topbar-inner{max-width:1280px;margin-inline:auto;padding:.42rem clamp(1rem,3vw,2rem);display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .8rem;font-size:.76rem;letter-spacing:.03em;text-align:center} .ck-topbar-inner .ck-tb-dot{color:var(--ck-terra)} .ck-header.ck-scrolled .ck-topbar{display:none} /* Mobile: Topbar bleibt sichtbar – Botschaften rotieren (kein Abschneiden, eine Zeile) */ @media(max-width:781px){ .ck-topbar-inner{position:relative;flex-wrap:nowrap;overflow:hidden;min-height:1.6rem;padding-top:.5rem;padding-bottom:.5rem} .ck-topbar-inner .ck-tb-dot{display:none} .ck-topbar-inner .ck-tb-msg{position:absolute;left:1rem;right:1rem;top:50%;transform:translateY(-50%);opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:ck-tbcycle 13s infinite} .ck-topbar-inner .ck-tb-msg:nth-child(1){opacity:1;animation-delay:0s} .ck-topbar-inner .ck-tb-msg:nth-child(3){animation-delay:3.25s} .ck-topbar-inner .ck-tb-msg:nth-child(5){animation-delay:6.5s} .ck-topbar-inner .ck-tb-msg:nth-child(7){animation-delay:9.75s} } @keyframes ck-tbcycle{0%{opacity:0}3%{opacity:1}22%{opacity:1}25%{opacity:0}100%{opacity:0}} @media(prefers-reduced-motion:reduce){.ck-topbar-inner .ck-tb-msg{animation:none!important}} /* Produktseite USP-Block – volle Breite unter dem Produkt */ .ck-product-usps{grid-column:1 / -1;margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.4rem,3vw,2rem) clamp(1.2rem,3vw,2.2rem);background:var(--ck-creme);border-radius:var(--ck-radius)} .ck-pu-note{font-size:.95rem;color:var(--ck-ink);background:#fff;border:1px solid var(--ck-linie);border-radius:6px;padding:.8rem 1.1rem;margin:0 auto 1.5rem;max-width:760px;text-align:center} .ck-pu-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem} .ck-pu-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;line-height:1.4;color:var(--ck-mute)} .ck-pu-list li strong{color:var(--ck-schwarz);font-weight:600;display:block;margin-bottom:.1rem} .ck-pu-check{display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:var(--ck-terra);color:#fff;font-size:.72rem;margin-top:.05rem} .ck-pu-help{font-size:.92rem;color:var(--ck-mute);margin:1.5rem 0 0;text-align:center} .ck-pu-help a{color:var(--ck-terra);text-decoration:none;font-weight:600} @media(max-width:900px){.ck-pu-list{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){.ck-pu-list{grid-template-columns:1fr 1fr}} @media(max-width:360px){.ck-pu-list{grid-template-columns:1fr}} /* Warenkorb USP + Hilfe */ .ck-cart-usps{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:center;padding:.9rem 1rem;margin:0 0 1.4rem;background:var(--ck-stein);border-radius:6px} .ck-cart-usps span{font-size:.85rem;color:var(--ck-ink);position:relative;padding-left:1.2rem} .ck-cart-usps span::before{content:"✓";position:absolute;left:0;color:var(--ck-terra);font-weight:700} .ck-cart-help{font-size:.9rem;color:var(--ck-mute);margin:1.2rem 0 0;text-align:center} .ck-cart-help a{color:var(--ck-terra);text-decoration:none;font-weight:600} /* ========================================================= TEAM / PERSÖNLICHKEIT ========================================================= */ .ck-team{background:var(--ck-creme)!important} .ck-founderquote{max-width:760px;margin:0 auto;border-left:3px solid var(--ck-terra);padding:.3rem 0 .3rem 1.6rem} .ck-founderquote p{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.35;color:var(--ck-schwarz);margin:0} .ck-founderquote cite{display:block;margin-top:1rem;font-family:Inter,sans-serif;font-style:normal;font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ck-mute)} .ck-teamgrid{gap:clamp(1.4rem,3vw,2.4rem)!important} /* Robust: Container haelt die Ratio, Bild fuellt ihn immer komplett (kein weisser Rand). */ .ck-teamphoto{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:3px;margin:0;background:var(--ck-sand)} .ck-teamphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block} .ck-teamname{font-size:1.5rem;margin:1rem 0 .2rem;color:var(--ck-schwarz)} .ck-teamrole{font-family:Inter,sans-serif;font-size:.86rem;color:var(--ck-mute);margin:0} /* Mobil im Porträtformat bleiben – bei 3/2 wurden die Köpfe abgeschnitten (Jan, 23.07.2026) */ @media(max-width:781px){.ck-teamgrid .wp-block-column{flex-basis:100%!important}.ck-teamphoto{aspect-ratio:4/5;max-width:420px;margin:0 auto}} /* ========================================================= EINSTIEGS-KACHELN (Boden / Wand / Pflege) ========================================================= */ .ck-entry{gap:clamp(1rem,2.2vw,1.6rem)!important} .ck-entry .wp-block-column{display:flex} .ck-entrytile{position:relative;border-radius:var(--ck-radius);overflow:hidden;box-shadow:var(--ck-shadow-sm);transition:transform .35s var(--ck-ease),box-shadow .35s var(--ck-ease);width:100%} .ck-entrytile:hover{transform:translateY(-6px);box-shadow:var(--ck-shadow)} .ck-entrytile .ck-media{aspect-ratio:4/5;border-radius:0;background:var(--ck-sand)} .ck-entrytile::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(28,23,20,0) 40%,rgba(28,23,20,.18) 62%,rgba(28,23,20,.82) 100%)} .ck-entrytitle{position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;padding:1.3rem 1.5rem;color:#fff;font-size:clamp(1.4rem,2vw,1.95rem);pointer-events:none;display:flex;align-items:center;gap:.55rem} .ck-entrytitle::after{content:"→";font-size:.9em;transition:transform .3s var(--ck-ease)} .ck-entrytile:hover .ck-entrytitle::after{transform:translateX(6px)} @media(max-width:781px){.ck-entry .wp-block-column{flex-basis:100%!important}.ck-entrytile .ck-media{aspect-ratio:16/9}} /* ========================================================= KOLLEKTIONEN-RASTER (Vielfalt) ========================================================= */ .ck-colgrid{display:grid!important;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)} .ck-colgrid>*{margin:0!important;max-width:none!important} .ck-collections .ck-legalnote{border-left:none;padding:0;color:var(--ck-mute)} .ck-collections .ck-legalnote a{color:var(--ck-terra);font-weight:600;text-decoration:none} @media(max-width:900px){.ck-colgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.ck-colgrid{grid-template-columns:1fr}} /* ========================================================= UMBAU v2 – Bild-Füll-Fix, Formular-Härtung, Inspiration, Detailseiten, Beratungs-Assistent, Produkt-Trust ========================================================= */ /* --- Bild-Füll-Fix: .ck-media füllt IMMER komplett (kein weißer Balken) --- */ .ck-media>figure.wp-block-image,.ck-media .wp-block-image{position:absolute!important;inset:0;margin:0!important;width:100%;height:100%;border-radius:inherit} .ck-media>figure.wp-block-image img,.ck-media .wp-block-image img,.ck-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;margin:0!important;max-width:none} .ck-media .wp-block-image a{display:block;width:100%;height:100%} /* --- Formular-Härtung: Flex statt Grid -> Felder können sich NIE überlappen --- */ .ck-form .row{display:flex!important;flex-wrap:wrap;gap:1.5rem 1.7rem;align-items:flex-start;margin:0 0 1.5rem} .ck-form .row>p{flex:1 1 calc(50% - 0.9rem);min-width:200px;margin:0} .ck-form label{line-height:1.3;display:block} .ck-form input[type=text],.ck-form input[type=email],.ck-form input[type=tel],.ck-form input[type=number],.ck-form textarea,.ck-form select{display:block;width:100%;max-width:100%;box-sizing:border-box} @media(max-width:680px){.ck-form .row>p{flex:1 1 100%}} /* --- Inspiration-Übersicht --- */ .ck-inspcat{scroll-margin-top:120px} .ck-insprow{align-items:center} .ck-insprow .ck-media{aspect-ratio:4/3;border-radius:var(--ck-radius);box-shadow:var(--ck-shadow-sm);background:var(--ck-sand)} .ck-insprow .ck-media img{transition:transform 1.1s var(--ck-ease)} .ck-insprow:hover .ck-media img{transform:scale(1.04)} .ck-insprow h3 a{color:var(--ck-schwarz);text-decoration:none} .ck-insprow h3 a:hover{color:var(--ck-terra)} .ck-insphint{color:var(--ck-mute);font-size:.95rem;margin:.7rem 0 0;display:flex;gap:.55rem;align-items:flex-start} .ck-insphint::before{content:"✓";color:var(--ck-rot);font-weight:700;flex:none} .ck-inspcta{text-align:center} @media(max-width:781px){.ck-insprow{gap:1.2rem!important}.ck-insprow .wp-block-column{flex-basis:100%!important}.ck-insprow .ck-media{aspect-ratio:16/10}} /* --- Marken-Detailseite --- */ .ck-detaillead{color:var(--ck-ink);line-height:1.55;max-width:760px;font-family:"Cormorant Garamond",serif;font-style:italic} .ck-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.4vw,1rem)} .ck-gallery .ck-media{aspect-ratio:4/3;border-radius:var(--ck-radius);margin:0;background:var(--ck-sand)} .ck-gallery .ck-media img{transition:transform 1s var(--ck-ease)} .ck-gallery .ck-media:hover img{transform:scale(1.05)} @media(max-width:781px){.ck-gallery{grid-template-columns:repeat(2,1fr)}} @media(max-width:460px){.ck-gallery{grid-template-columns:1fr}} .ck-featurelist{list-style:none;margin:1.6rem 0;padding:0;display:grid;gap:.75rem} .ck-featurelist li{position:relative;padding-left:2rem;color:var(--ck-ink);line-height:1.55} .ck-featurelist li::before{content:"✓";position:absolute;left:0;top:.1rem;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--ck-rot);color:#fff;font-size:.78rem;display:flex;align-items:center;justify-content:center} .ck-specs{background:var(--ck-stein);border:1px solid var(--ck-linie);border-radius:var(--ck-radius);padding:1.4rem 1.6rem;margin:1.8rem 0} .ck-specs h3{font-size:1.1rem;margin:0 0 .7rem;color:var(--ck-schwarz)} .ck-specs ul{margin:0;padding:0;list-style:none;display:grid;gap:.45rem} .ck-specs li{color:var(--ck-ink);font-size:.95rem;padding-left:1.2rem;position:relative} .ck-specs li::before{content:"›";position:absolute;left:.2rem;color:var(--ck-terra);font-weight:700} .ck-colorcard h3{font-size:1.3rem;margin:0 0 .8rem;color:var(--ck-schwarz)} .ck-media.ck-colors{aspect-ratio:auto;background:#fff;border:1px solid var(--ck-linie);border-radius:var(--ck-radius);position:relative} .ck-media.ck-colors .wp-block-image,.ck-media.ck-colors img{position:static!important;width:100%;height:auto!important;object-fit:contain} .ck-buybox h2{margin-top:0} .ck-buybox .wp-block-buttons{margin-top:1.2rem} .ck-brandstory .ck-eyebrow{color:var(--ck-rot)} .ck-brandstory .ck-cards h3{color:var(--ck-schwarz)} .ck-brandstory .ck-cards p{color:var(--ck-ink);line-height:1.6;margin:0} /* --- Beratungs-Assistent --- */ .ck-berater{max-width:920px;margin:0 auto} .ck-berater-progress{height:4px;background:var(--ck-linie);border-radius:999px;overflow:hidden;margin-bottom:2.2rem} .ck-berater-bar{display:block;height:100%;background:var(--ck-terra);transition:width .4s var(--ck-ease)} .ck-berater-q{font-family:"Cormorant Garamond",serif;font-size:clamp(1.5rem,3vw,2.3rem);color:var(--ck-schwarz);margin:0 0 1.6rem;text-align:center;outline:none} .ck-berater-opts{display:grid;gap:1rem;max-width:600px;margin:0 auto} .ck-berater-opts-2{grid-template-columns:1fr 1fr} .ck-berater-opt{display:flex;flex-direction:column;gap:.3rem;text-align:left;background:#fff;border:1.5px solid var(--ck-linie);border-radius:8px;padding:1.2rem 1.4rem;cursor:pointer;font-family:Inter,sans-serif;transition:transform .25s var(--ck-ease),border-color .25s,box-shadow .25s} .ck-berater-opt:hover{border-color:var(--ck-terra);transform:translateY(-2px);box-shadow:var(--ck-shadow-sm)} .ck-berater-opt-l{font-size:1.1rem;font-weight:600;color:var(--ck-schwarz)} .ck-berater-opt-s{font-size:.85rem;color:var(--ck-mute)} .ck-berater-nav{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center;margin-top:2.2rem} .ck-berater-back{background:none;border:none;color:var(--ck-mute);font-family:Inter,sans-serif;font-size:.92rem;font-weight:600;cursor:pointer;padding:.45rem .7rem;border-radius:4px} .ck-berater-back:hover{color:var(--ck-terra)} .ck-berater-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.4rem;margin-top:1rem} .ck-berater-card{background:#fff;border:1px solid var(--ck-linie);border-radius:8px;overflow:hidden;box-shadow:var(--ck-shadow-sm);transition:transform .3s var(--ck-ease),box-shadow .3s var(--ck-ease);display:flex;flex-direction:column} .ck-berater-card:hover{transform:translateY(-5px);box-shadow:var(--ck-shadow)} .ck-berater-card-img{display:block;aspect-ratio:4/3;overflow:hidden} .ck-berater-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ck-ease)} .ck-berater-card:hover .ck-berater-card-img img{transform:scale(1.06)} .ck-berater-card-b{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1} .ck-berater-card-b h3{font-size:1.25rem;margin:0} .ck-berater-card-b h3 a{color:var(--ck-schwarz);text-decoration:none} .ck-berater-card-b h3 a:hover{color:var(--ck-terra)} .ck-berater-card-b p{font-size:.88rem;color:var(--ck-mute);margin:0;line-height:1.5;flex:1} .ck-berater-card-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem} .ck-berater-cta{font-size:.85rem;font-weight:600;text-decoration:none;color:#fff;background:var(--ck-rot);padding:.5rem .9rem;border-radius:4px;transition:background .25s} .ck-berater-cta:hover{background:var(--ck-terra);color:#fff} .ck-berater-cta.is-ghost{background:transparent;color:var(--ck-rot);border:1px solid var(--ck-linie)} .ck-berater-cta.is-ghost:hover{background:var(--ck-stein);color:var(--ck-rot)} @media(max-width:520px){.ck-berater-opts-2{grid-template-columns:1fr}} /* --- Produkt-Trust-Band (Einzelseite) --- */ .ck-prodtrust{padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,2rem)!important} .ck-prodtrust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.4rem)} .ck-prodtrust-card .ck-eyebrow{color:var(--ck-rot)} .ck-prodtrust-card h3{font-size:1.3rem;margin:.3rem 0 .5rem;color:var(--ck-schwarz)} .ck-prodtrust-card p{color:var(--ck-ink);line-height:1.6;margin:0;font-size:.97rem} @media(max-width:781px){.ck-prodtrust-grid{grid-template-columns:1fr;gap:1.5rem}} /* --- Team: Platzhalter-Foto (Bruder, Foto folgt) --- */ .ck-teamphoto-soon::after{content:"Foto folgt";position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);z-index:2;background:rgba(28,23,20,.72);color:#fff;font-family:Inter,sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px} .ck-teamphoto-soon img{filter:grayscale(.25) brightness(.97)} @media(prefers-reduced-motion:reduce){ .ck-berater-bar,.ck-berater-opt,.ck-berater-card,.ck-berater-card-img img, .ck-insprow .ck-media img,.ck-gallery .ck-media img{transition:none!important} } /* ========================================================= FIX-RUNDE: Shop-Intro, Produktkarten-Politur, Detail-Abstände ========================================================= */ .ck-shopintro{max-width:780px} .ck-shopintro .ck-lead{color:var(--ck-ink)} .ck-shopintro .ck-lead a{color:var(--ck-rot);font-weight:600;text-decoration:none} .ck-shopintro .ck-lead a:hover{color:var(--ck-terra)} /* Produktkarten ruhiger & großzügiger */ .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:1.5rem;padding:1.2rem 1.3rem 0} .woocommerce ul.products li.product .price{padding:.4rem 1.3rem 0;font-size:1.15rem} .woocommerce ul.products li.product .button{margin:1rem 1.3rem 1.3rem!important} @media(max-width:860px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.woocommerce ul.products{grid-template-columns:1fr}} /* Produkt-Detailseite: mehr Luft im Kaufbereich */ .woocommerce div.product{gap:clamp(2.2rem,4.5vw,4rem)} .woocommerce div.product .summary,.woocommerce div.product .entry-summary{padding-top:.2rem} .ck-product{padding-bottom:0!important} .ck-aboutcotto{margin-top:0!important} /* „Nur Musterfliese bestellen" – Box am Produkt */ .ck-muster{margin-top:1.6rem;padding:1.1rem 1.3rem;background:var(--ck-stein);border:1px solid var(--ck-linie);border-radius:var(--ck-radius)} .ck-muster-h{margin:0 0 .85rem;font-size:.95rem;color:var(--ck-ink)} .ck-muster-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.8rem} .ck-muster-color{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;font-weight:600;letter-spacing:.03em;color:var(--ck-mute)} .ck-muster-color select{padding:.6rem .8rem;border:1px solid var(--ck-linie);border-radius:4px;background:#fff;font-family:Inter,sans-serif;font-size:.95rem;color:var(--ck-schwarz)} .ck-muster-btn{background:#fff!important;color:var(--ck-rot)!important;border:1.5px solid var(--ck-rot)!important;padding:.72rem 1.2rem!important;font-size:.92rem!important;border-radius:3px!important;transition:background-color .25s,color .25s!important} .ck-muster-btn:hover{background:var(--ck-rot)!important;color:#fff!important;transform:none!important} /* ---- v4.0: Lieferzeit-Hinweis am Kaufbereich ---- */ .ck-delivery{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap;margin:.9rem 0 0;padding:.65rem .9rem;background:var(--ck-stein);border:1px solid var(--ck-linie);border-radius:var(--ck-radius);font-size:.88rem;color:var(--ck-ink)} .ck-delivery a{white-space:nowrap;font-weight:600} .ck-delivery svg{flex:none;color:var(--ck-rot)} /* ---- v4.0: Referenzen-Galerie ---- */ .ck-refgrid.wp-block-gallery{gap:clamp(.9rem,2vw,1.4rem)} .ck-refgrid .wp-block-image img{border-radius:var(--ck-radius);aspect-ratio:4/3;object-fit:cover;width:100%} .ck-refgrid .wp-element-caption{font-size:.82rem;color:var(--ck-mute);margin-top:.4rem} /* ---- v4.0: Team-Grid mit 4 Personen: mittlere Breiten 2x2 ---- */ @media(min-width:782px) and (max-width:1023px){.ck-teamgrid{flex-wrap:wrap!important}.ck-teamgrid .wp-block-column{flex-basis:47%!important}} /* ==== v4.1: Kauf-UX (m²-Einheit, Vorbehandlung), Filter-Redesign, Warenkorb & Kasse im CI ==== */ /* Preis-Einheit hinter jedem Preis */ .ck-priceunit{font-size:.55em;font-weight:600;color:var(--ck-mute);letter-spacing:.02em} .woocommerce ul.products li.product .ck-priceunit{font-size:.72em} /* Mengenfeld mit Einheit daneben */ .woocommerce div.product form.cart div.quantity{display:inline-flex;align-items:center;gap:.45rem} .ck-qty-unit{font-family:Inter,sans-serif;font-weight:600;font-size:.9rem;color:var(--ck-mute);margin-right:.6rem} /* Vorbehandlungs-Auswahl im Kaufbereich */ .ck-vorb{margin:0 0 1.1rem;padding:.9rem 1rem;background:var(--ck-stein);border:1px solid var(--ck-linie);border-radius:var(--ck-radius)} .ck-vorb-label{display:block;font-family:Inter,sans-serif;font-weight:600;font-size:.85rem;margin-bottom:.45rem;color:var(--ck-ink)} .ck-vorb-hint{font-weight:400;color:var(--ck-mute)} .ck-vorb select{width:100%;padding:.65rem .8rem;border:1px solid var(--ck-linie);border-radius:4px;background:#fff;font-family:Inter,sans-serif;font-size:.95rem;color:var(--ck-schwarz)} /* Muster-Zeile: Farbe und Button sauber auf einer Linie */ .ck-muster-row{align-items:flex-end;gap:.8rem} .ck-muster-color{flex:1 1 200px} .ck-muster-color select{width:100%;height:46px;padding:.6rem .8rem} .ck-muster-btn{height:46px;display:inline-flex;align-items:center;white-space:nowrap} /* Beschreibung & Zusatzinfos: Panel als Karte mit Innenabstand */ .woocommerce div.product .woocommerce-tabs .panel{max-width:none;background:#fff;border:1px solid var(--ck-linie);border-radius:var(--ck-radius);padding:1.5rem 1.8rem;margin:0 0 1rem} @media(max-width:600px){.woocommerce div.product .woocommerce-tabs .panel{padding:1.1rem 1.1rem}} .woocommerce table.woocommerce-product-attributes th{width:34%;font-family:Inter,sans-serif;font-weight:600;color:var(--ck-ink)} .woocommerce table.woocommerce-product-attributes th,.woocommerce table.woocommerce-product-attributes td{padding:.55rem .3rem;border-bottom:1px solid var(--ck-linie)} /* Sale-Badge (deutsch) */ .woocommerce span.onsale{background:var(--ck-rot);color:#fff;font-family:Inter,sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;min-width:0;min-height:0;line-height:1;padding:.5em .85em;border-radius:3px} /* Shop-Filter: eine ruhige Karte; jede Gruppe ist ein
(Desktop offen als Zeile, mobil klappbar – Theme-JS schließt Gruppen ohne aktiven Filter initial) */ .ck-shopfilter{background:#fff;border:1px solid var(--ck-linie);border-radius:var(--ck-radius);padding:1rem 1.2rem;margin:0 0 1.7rem;display:flex;flex-direction:column;gap:.55rem} .ck-filtergroup{display:flex;align-items:center;gap:.45rem} .ck-filterlabel{flex:none;font-family:Inter,sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ck-mute);min-width:76px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:.35rem} .ck-filterlabel::-webkit-details-marker{display:none} .ck-filterlabel::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--ck-mute);border-bottom:1.6px solid var(--ck-mute);transform:rotate(45deg) translateY(-1px);transition:transform .2s;display:none} .ck-filterpills{display:flex;align-items:center;gap:.45rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;min-width:0;flex:1} .ck-filterpills::-webkit-scrollbar{display:none} .ck-filtergroup a{flex:none;font-family:Inter,sans-serif;font-size:.84rem;font-weight:500;color:var(--ck-ink);background:var(--ck-stein);border:1px solid var(--ck-linie);border-radius:999px;padding:.34rem .85rem;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s} .ck-filtergroup a:hover{background:var(--ck-terra);border-color:var(--ck-terra);color:#fff} .ck-filtergroup a.is-active{background:var(--ck-terra);border-color:var(--ck-terra);color:#fff;font-weight:600} @media(max-width:781px){ .ck-filtergroup{display:block} .ck-filterlabel{min-width:0;padding:.35rem 0} .ck-filterlabel::after{display:inline-block} .ck-filtergroup:not([open]) .ck-filterlabel::after{transform:rotate(-45deg)} .ck-filterpills{flex-wrap:wrap;overflow:visible;padding:.35rem 0 .5rem} } /* Klassischer Warenkorb (falls aktiv) */ .woocommerce-cart table.cart{background:#fff;border:1px solid var(--ck-linie);border-radius:var(--ck-radius);overflow:hidden} .woocommerce-cart table.cart img{width:72px;border-radius:4px} .woocommerce-cart .cart_totals{background:#fff;border:1px solid var(--ck-linie);border-radius:var(--ck-radius);padding:1.2rem 1.4rem} /* Block-Warenkorb im CI */ .wp-block-woocommerce-cart .wc-block-cart-items{background:#fff;border:1px solid var(--ck-linie);border-radius:var(--ck-radius);padding:.3rem 1.1rem} .wc-block-cart-item__image img{border-radius:var(--ck-radius)} .wc-block-components-product-name{font-family:Inter,sans-serif;font-weight:600;color:var(--ck-schwarz)!important;text-decoration:none} .wc-block-components-product-metadata__description,.wc-block-components-product-details{font-size:.82rem;color:var(--ck-mute)} .wc-block-components-quantity-selector{border:1px solid var(--ck-linie);border-radius:4px} .wc-block-components-quantity-selector input{font-family:Inter,sans-serif} .wp-block-woocommerce-cart .wc-block-components-sidebar>div{background:#fff;border:1px solid var(--ck-linie);border-radius:var(--ck-radius);padding:.6rem 1.1rem} .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{color:var(--ck-rot)} /* Block-Kasse im CI (Logo kommt über den Template-Teil „Kassen-Header") */ .ck-checkout-header{border-bottom:1px solid var(--ck-linie)} .ck-checkout-secure{margin:0;font-family:Inter,sans-serif;font-size:.82rem;font-weight:600;color:var(--ck-mute);display:flex;align-items:center} .wc-block-checkout__form .wc-block-components-checkout-step{background:#fff;border:1px solid var(--ck-linie);border-radius:var(--ck-radius);padding:1.1rem 1.2rem;margin-bottom:1rem} .wc-block-components-checkout-step__heading{margin-top:0} .wc-block-components-checkout-step__title{font-family:Inter,sans-serif;color:var(--ck-schwarz)} .wc-block-components-text-input input,.wc-block-components-combobox .components-combobox-control__input,.wc-block-components-textarea{border-radius:4px;border-color:var(--ck-linie)} .wc-block-components-text-input input:focus,.wc-block-components-combobox .components-combobox-control__input:focus{border-color:var(--ck-terra);box-shadow:0 0 0 1px var(--ck-terra)} .wc-block-components-button:not(.is-link){background:var(--ck-rot);color:#fff;border-radius:3px;font-family:Inter,sans-serif;font-weight:600;letter-spacing:.01em} .wc-block-components-button:not(.is-link):hover,.wc-block-components-button:not(.is-link):focus{background:var(--ck-terra);color:#fff} .wc-block-components-checkout-place-order-button{width:100%} .wc-block-components-checkout-return-to-cart-button{color:var(--ck-ink)} /* ===== Version 1.2.1 – Livegang-Politur (22.07.2026) ===== */ /* Germanized-Zusatzangaben (inkl. MwSt. / zzgl. Versand) in Shop-Karten: gleicher Innenabstand wie Titel/Preis */ .woocommerce ul.products li.product .wc-gzd-additional-info, .woocommerce ul.products li.product .legal-price-info, .woocommerce ul.products li.product .shipping-costs-info, .woocommerce ul.products li.product .tax-info{padding-left:1.3rem;padding-right:1.3rem;margin:.15rem 0 0;font-size:.82rem;color:var(--ck-mute)} @media(max-width:781px){.woocommerce ul.products li.product .wc-gzd-additional-info,.woocommerce ul.products li.product .legal-price-info,.woocommerce ul.products li.product .shipping-costs-info,.woocommerce ul.products li.product .tax-info{padding-left:1.15rem;padding-right:1.15rem}} /* Auch auf der Produktseite: Zusatzangaben nicht am Rand kleben lassen */ .woocommerce div.product .wc-gzd-additional-info{margin:.3rem 0 0} /* Hero-Kicker („Seit 1998 …") auf Desktop in einer Zeile */ @media(min-width:782px){.ck-hero .ck-eyebrow{white-space:nowrap;max-width:none}} /* Kasse/Warenkorb im CI: „Sichere Kasse"-Zeile über dem Kassen-Block */ .ck-checkoutpage .ck-checkout-secure{margin:0 0 1rem} .ck-cartpage .wp-block-post-title,.ck-checkoutpage .wp-block-post-title{font-family:"Cormorant Garamond",serif;font-weight:500} /* Pflege-Empfehlungsband über dem Warenkorb */ .ck-cartupsell{background:#fff;border:1px solid var(--ck-linie);border-radius:var(--ck-radius);padding:1.3rem 1.4rem;margin:0 0 1.8rem} .ck-cartupsell-h{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:1.45rem;margin:0 0 .2rem;color:var(--ck-schwarz)} .ck-cartupsell-sub{margin:0 0 1rem;font-size:.9rem;color:var(--ck-mute)} .ck-cartupsell-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .ck-cartupsell-item img{width:56px;height:56px;object-fit:cover;border-radius:6px;flex:none} .ck-cartupsell-name{font-family:Inter,sans-serif;font-weight:600;font-size:.9rem;color:var(--ck-ink);line-height:1.3} .ck-cartupsell-item a{text-decoration:none} .ck-cartupsell-item:hover{border-color:var(--ck-terra)} @media(max-width:781px){.ck-cartupsell-grid{grid-template-columns:1fr;gap:.6rem}} /* Such-Overlay (Lupe im Header öffnet echte Produktsuche) */ .ck-search-overlay{position:fixed;inset:0;z-index:1200;display:none;align-items:flex-start;justify-content:center;padding:14vh 1.2rem 0;background:rgba(28,23,20,.55);backdrop-filter:blur(2px)} .ck-search-overlay.open{display:flex} .ck-search-box{width:100%;max-width:620px;background:#fff;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.35);padding:1.1rem 1.2rem} .ck-search-box form{display:flex;gap:.6rem} .ck-search-box input[type=search]{flex:1;border:1px solid var(--ck-linie);border-radius:7px;padding:.75rem 1rem;font-size:1rem;font-family:Inter,sans-serif} .ck-search-box input[type=search]:focus{outline:none;border-color:var(--ck-terra);box-shadow:0 0 0 1px var(--ck-terra)} .ck-search-box button{background:var(--ck-rot);color:#fff;border:none;border-radius:7px;padding:.75rem 1.2rem;font-family:Inter,sans-serif;font-weight:600;cursor:pointer} .ck-search-box button:hover{background:var(--ck-terra)} .ck-search-hint{margin:.6rem 0 0;font-size:.8rem;color:var(--ck-mute)} /* ===== Version 1.2.3 – Mobile-Politur nach Livegang-Tests (23.07.2026) ===== */ /* Produktseite mobil: Titel + Preis VOR der Galerie (Block kommt aus dem Theme-PHP), kein horizontaler Überlauf mehr (lange Format-Namen in Selects/Tabellen) */ .ck-mobiletitle{display:none} @media(max-width:900px){ .ck-mobiletitle{display:block;min-width:0} .ck-mobiletitle-name{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(1.9rem,7vw,2.4rem);line-height:1.08;margin:0 0 .35rem;color:var(--ck-schwarz)} .ck-mobiletitle-price{color:var(--ck-rot);font-weight:600;font-size:1.35rem;font-family:Inter,sans-serif} .woocommerce div.product .summary .product_title, .woocommerce div.product .summary > p.price{display:none} /* Galerie kompakter: nicht mehr bildschirmfüllend */ .woocommerce div.product .woocommerce-product-gallery{max-width:420px;margin:0 auto} /* Überlauf-Bremsen: alles bleibt im Viewport */ .woocommerce div.product{max-width:100%} .woocommerce div.product .summary,.woocommerce div.product .entry-summary{min-width:0;max-width:100%} .woocommerce div.product .summary select,.woocommerce div.product form.cart select{width:100%;max-width:100%} .woocommerce div.product table.variations{display:block;width:100%} .woocommerce div.product table.variations tbody,.woocommerce div.product table.variations tr, .woocommerce div.product table.variations th,.woocommerce div.product table.variations td{display:block;width:100%;padding:0;text-align:left} .woocommerce div.product table.variations td.value{margin:.2rem 0 .8rem} .woocommerce div.product .woocommerce-tabs{min-width:0;max-width:100%} .woocommerce div.product .woocommerce-tabs .panel table{display:block;width:100%;overflow-x:auto} .woocommerce div.product .ck-vorb select,.woocommerce div.product .ck-muster select{width:100%;max-width:100%} .woocommerce div.product .ck-muster-row{flex-wrap:wrap} } /* Inspiration-Übersicht mobil: immer gleiche Reihenfolge (Bild zuerst, dann Text + Buttons) – vorher stießen bei „gespiegelten" Reihen zwei Bilder direkt aneinander */ @media(max-width:781px){ .ck-insprow{display:flex;flex-wrap:wrap} .ck-insprow > .wp-block-column:has(.ck-media){order:-1} } /* Empfehlungsband als Mini-Kaufformular (1.2.5): Ausführung + Menge wählbar, Live-Preis, Layout bricht sauber um – nichts läuft mehr aus dem Bildschirm */ .ck-cartupsell-item{display:flex;flex-direction:column;gap:.6rem;border:1px solid var(--ck-linie);border-radius:8px;padding:.75rem .85rem;background:var(--ck-creme,#faf6f1);min-width:0} .ck-cartupsell-link{display:flex;gap:.7rem;align-items:center;min-width:0;text-decoration:none} .ck-cartupsell-name{flex:1;min-width:0} .ck-cartupsell-price{flex:none;font-family:Inter,sans-serif;font-size:.95rem;color:var(--ck-rot);font-weight:700;white-space:nowrap} .ck-cartupsell-form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;min-width:0} .ck-cartupsell-var{flex:1 1 100%;min-width:0;max-width:100%;border:1px solid var(--ck-linie);border-radius:6px;padding:.5rem .6rem;font-family:Inter,sans-serif;font-size:.85rem;background:#fff;color:var(--ck-ink)} .ck-cartupsell-qty{width:64px;flex:none;border:1px solid var(--ck-linie);border-radius:6px;padding:.5rem .4rem;text-align:center;font-family:Inter,sans-serif;font-size:.9rem;background:#fff} .ck-cartupsell-add{flex:1;min-width:0;border:none;cursor:pointer;background:var(--ck-rot);color:#fff!important;font-family:Inter,sans-serif;font-weight:600;font-size:.82rem;padding:.55rem .8rem;border-radius:6px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .2s} .ck-cartupsell-add:hover{background:var(--ck-terra)}