body{background-color:var(--base-2);color:var(--contrast);}a{text-decoration:none;}.entry-title a, .site-branding a, a.button, .wp-block-button__link, .main-navigation a{text-decoration:none;}a:hover, a:focus, a:active{color:var(--contrast);}.wp-block-group__inner-container{max-width:1200px;margin-left:auto;margin-right:auto;}@media (max-width: 500px) and (min-width: 769px){.inside-header{display:flex;flex-direction:column;align-items:center;}.site-logo, .site-branding{margin-bottom:1.5em;}#site-navigation{margin:0 auto;}.header-widget{margin-top:1.5em;}}.site-header .header-image{width:170px;}.dropdown-click .main-navigation ul ul{display:none;visibility:hidden;}.dropdown-click .main-navigation ul ul ul.toggled-on{left:0;top:auto;position:relative;box-shadow:none;border-bottom:1px solid rgba(0,0,0,0.05);}.dropdown-click .main-navigation ul ul li:last-child > ul.toggled-on{border-bottom:0;}.dropdown-click .main-navigation ul.toggled-on, .dropdown-click .main-navigation ul li.sfHover > ul.toggled-on{display:block;left:auto;right:auto;opacity:1;visibility:visible;pointer-events:auto;height:auto;overflow:visible;float:none;}.dropdown-click .main-navigation.sub-menu-left .sub-menu.toggled-on, .dropdown-click .main-navigation.sub-menu-left ul li.sfHover > ul.toggled-on{right:0;}.dropdown-click nav ul ul ul{background-color:transparent;}.dropdown-click .widget-area .main-navigation ul ul{top:auto;position:absolute;float:none;width:100%;left:-99999px;}.dropdown-click .widget-area .main-navigation ul ul.toggled-on{position:relative;left:0;right:0;}.dropdown-click .widget-area.sidebar .main-navigation ul li.sfHover ul, .dropdown-click .widget-area.sidebar .main-navigation ul li:hover ul{right:0;left:0;}.dropdown-click .sfHover > a > .dropdown-menu-toggle > .gp-icon svg{transform:rotate(180deg);}:root{--contrast:#222222;--contrast-2:#575760;--contrast-3:#b2b2be;--base:#f0f0f0;--base-2:#f7f8f9;--base-3:#ffffff;--accent:#1e73be;}:root .has-contrast-color{color:var(--contrast);}:root .has-contrast-background-color{background-color:var(--contrast);}:root .has-contrast-2-color{color:var(--contrast-2);}:root .has-contrast-2-background-color{background-color:var(--contrast-2);}:root .has-contrast-3-color{color:var(--contrast-3);}:root .has-contrast-3-background-color{background-color:var(--contrast-3);}:root .has-base-color{color:var(--base);}:root .has-base-background-color{background-color:var(--base);}:root .has-base-2-color{color:var(--base-2);}:root .has-base-2-background-color{background-color:var(--base-2);}:root .has-base-3-color{color:var(--base-3);}:root .has-base-3-background-color{background-color:var(--base-3);}:root .has-accent-color{color:var(--accent);}:root .has-accent-background-color{background-color:var(--accent);}.top-bar{background-color:#636363;color:#ffffff;}.top-bar a{color:#ffffff;}.top-bar a:hover{color:#303030;}.site-header{background-color:var(--base-3);}.main-title a,.main-title a:hover{color:var(--contrast);}.site-description{color:var(--contrast-2);}.mobile-menu-control-wrapper .menu-toggle,.mobile-menu-control-wrapper .menu-toggle:hover,.mobile-menu-control-wrapper .menu-toggle:focus,.has-inline-mobile-toggle #site-navigation.toggled{background-color:rgba(0, 0, 0, 0.02);}.main-navigation,.main-navigation ul ul{background-color:var(--base-3);}.main-navigation .main-nav ul li a, .main-navigation .menu-toggle, .main-navigation .menu-bar-items{color:var(--contrast);}.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a, .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a, .main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a, .main-navigation .menu-bar-item:hover > a, .main-navigation .menu-bar-item.sfHover > button.menu-toggle:hover,button.menu-toggle:focus{color:var(--contrast);}.main-navigation .main-nav ul li[class*="current-menu-"] > .navigation-search input[type="search"],.navigation-search input[type="search"]:active, .navigation-search input[type="search"]:focus, .main-navigation .main-nav ul li.search-item.active > a, .main-navigation .menu-bar-items .search-item.active > .main-navigation ul ul{background-color:#fffaf0;}.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header{background-color:var(--base-3);}.entry-title a{color:var(--contrast);}.entry-title a:hover{color:var(--contrast-2);}.entry-meta{color:var(--contrast-2);}.sidebar .widget{background-color:var(--base-3);}.footer-widgets{background-color:var(--base-3);}.site-info{background-color:var(--base-3);}input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="search"],input[type="tel"],input[type="number"],textarea,select{color:var(--contrast);background-color:var(--base-2);border-color:var(--base);}input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="number"]:focus,textarea:focus,select:focus{color:var(--contrast);background-color:var(--base-2);border-color:var(--contrast-3);}button,html input[type="button"],input[type="reset"],input[type="submit"],a.button,a.wp-block-button__link:not(.has-background){color:#ffffff;background-color:#55555e;}button:hover,html input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover,a.button:hover,button:focus,html input[type="button"]:focus,input[type="reset"]:focus,input[type="submit"]:focus,a.button:focus,a.wp-block-button__link:not(.has-background):active,a.wp-block-button__link:not(.has-background):focus,a.wp-block-button__link:not(.has-background):hover{color:#ffffff;background-color:#3f4047;}a.generate-back-to-top{background-color:rgba( 0,0,0,0.4 );color:#ffffff;}a.generate-back-to-top:hover,a.generate-back-to-top:focus{background-color:rgba( 0,0,0,0.6 );color:#ffffff;}:root{--gp-search-modal-bg-color:var(--base-3);--gp-search-modal-text-color:var(--contrast);--gp-search-modal-overlay-bg-color:rgba(0,0,0,0.2);}@media (max-width:768px){.main-navigation .menu-bar-item:hover > a, .main-navigation .menu-bar-item.sfHover > a{background:none;color:var(--contrast);}}.nav-below-header .main-navigation .inside-navigation.grid-container, .nav-above-header .main-navigation .inside-navigation.grid-container{padding:0px 20px 0px 20px;}.site-main .wp-block-group__inner-container{padding:40px;}.separate-containers .paging-navigation{padding-top:20px;padding-bottom:20px;}.entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull{margin-left:-40px;width:calc(100% + 80px);max-width:calc(100% + 80px);}.rtl .menu-item-has-children .dropdown-menu-toggle{padding-left:20px;}.rtl .main-navigation .main-nav ul li.menu-item-has-children > a{padding-right:20px;}@media (max-width:768px){.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header{padding:30px;}.site-main .wp-block-group__inner-container{padding:30px;}.inside-top-bar{padding-right:30px;padding-left:30px;}.inside-header{padding-right:30px;padding-left:30px;}.widget-area .widget{padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;}.footer-widgets-container{padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;}.inside-site-info{padding-right:30px;padding-left:30px;}.entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull{margin-left:-30px;width:calc(100% + 60px);max-width:calc(100% + 60px);}.one-container .site-main .paging-navigation{margin-bottom:20px;}}/* End cached CSS */.is-right-sidebar{width:30%;}.is-left-sidebar{width:30%;}.site-content .content-area{width:100%;}@media (max-width:768px){.main-navigation .menu-toggle,.sidebar-nav-mobile:not(#sticky-placeholder){display:block;}.main-navigation ul,.gen-sidebar-nav,.main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul,.has-inline-mobile-toggle #site-navigation .inside-navigation > *:not(.navigation-search):not(.main-nav){display:none;}.nav-align-right .inside-navigation,.nav-align-center .inside-navigation{justify-content:space-between;}.has-inline-mobile-toggle .mobile-menu-control-wrapper{display:flex;flex-wrap:wrap;}.has-inline-mobile-toggle .inside-header{flex-direction:row;text-align:left;flex-wrap:wrap;}.has-inline-mobile-toggle .header-widget,.has-inline-mobile-toggle #site-navigation{flex-basis:100%;}.nav-float-left .has-inline-mobile-toggle #site-navigation{order:10;}} /*# sourceURL=generate-style-inline-css */ #breadcrumbs, #breadcrumbs a, #breadcrumbs .breadcrumb_last { color: #90a0ba; font-size: .86rem; text-decoration: inherit; } a.button.malvorlage-link { max-width: 250px; white-space: normal; overflow: visible; text-overflow: clip; border-radius: 5px; } #freeColoringBtn { max-width: 250px; white-space: normal; overflow: visible; text-overflow: clip; border-radius: 5px; } .hc-subnav { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; padding: 0; list-style: none; } .hc-subnav__item { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid #d1d5db; border-radius: 15px; background: #fff; color: #333; text-decoration: none; font-weight: 300; font-size: 1em; line-height: 1.2; transition: all 0.2s ease; white-space: nowrap; } .hc-subnav__item:hover, .hc-subnav__item:focus { border-color: #3b82f6; background: #f0f7ff; color: #333; text-decoration: none; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .hc-subnav__item.is-active { border-color: #3b82f6; background: #dbeafe; color: #1e40af; font-weight: 300; } .hc-subnav__icon { display: inline-block; margin-right: 10px; font-size: 1.4em; line-height: 1; vertical-align: middle; } /* Mobile: 3-zeilig mit horizontalem Scroll, Pills behalten natürliche Breite */ @media (max-width: 600px) { .hc-subnav { display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; max-height: 144px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; gap: 8px; padding: 4px 16px 12px; margin: 16px -16px; scrollbar-width: thin; scrollbar-color: #d1d5db transparent; } .hc-subnav::-webkit-scrollbar { height: 4px; } .hc-subnav::-webkit-scrollbar-track { background: transparent; } .hc-subnav::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 15px; } .hc-subnav__item { flex-shrink: 0; padding: 6px 14px; font-size: 0.95em; margin-right: 8px; } .hc-subnav__icon { margin-right: 8px; font-size: 1.2em; } } [data-ugc-gallery="true"] h3 { display: -webkit-box; -webkit-line-clamp: 1; /* Anzahl Zeilen */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; } @media (max-width: 824px) { .header-widget { display: none !important; } } @media (min-width: 825px) { li.wpml-ls-slot-2 { display: none !important; } } .sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .wpml-ls-legacy-dropdown {width: inherit !important;} .provenexpert-wrapper {background-color:#fff !important;} .footer-at {display: block; color: #555; text-decoration: none; font-size: 14px; padding: 3px 0; break-inside: avoid;} .site-footer .footer-widgets-container .inner-padding { padding: 0 0 0 20px !important; } center a.button.ap{ max-width: none; white-space: normal; overflow: visible; text-overflow: clip; border-radius: 5px; } center a.button.ap:hover{ filter: brightness(1.06); box-shadow: 0 6px 14px rgba(0,0,0,.18); transform: translateY(-1px); } figcaption a { display: inline-block; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } li.wpml-ls-menu-item > a{ display: flex; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; white-space: nowrap; } li.wpml-ls-menu-item > a > .dropdown-menu-toggle{ margin-left: auto !important; } li.wpml-ls-menu-item > a > img.wpml-ls-flag, li.wpml-ls-menu-item > a > span.wpml-ls-native{ flex: 0 0 auto !important; display: inline-block; } @media (max-width: 768px){ :root{ --brand: #0b6aa6; --line: #e5e7eb; --card: #ffffff; --subtle: #f4f6f8; } #site-navigation.main-navigation.toggled .main-nav > ul{ background: var(--card) !important; border: 1px solid var(--line) !important; box-shadow: 0 10px 24px rgba(0,0,0,.2); overflow: hidden; } #site-navigation.main-navigation.toggled .main-nav > ul > li > a{ display:flex; align-items:center; justify-content:space-between; padding: 10px 16px !important; font-size: 20px; color: #111827; } /* Divider */ #site-navigation.main-navigation.toggled .main-nav > ul > li + li > a{ border-top: 1px solid var(--line); } #site-navigation.main-navigation.toggled .menu-item-has-children > a{ position: relative; padding-right: 64px !important; /* Platz für Toggle rechts */ } #site-navigation.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle{ /* GP reset (sonst riesig) */ height: 30px !important; width: 30px !important; padding: 0 !important; margin: 0 !important; /* Position wie im Mockup */ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); /* Look */ background: transparent !important; border: 1px solid var(--line) !important; border-radius: 12px; display:flex; align-items:center; justify-content:center; } /* Beige Quadrat killen (falls irgendwo gesetzt) */ #site-navigation.main-navigation.toggled .dropdown-menu-toggle .gp-icon{ background: transparent !important; color: var(--brand) !important; } #site-navigation.main-navigation.toggled .dropdown-menu-toggle .gp-icon svg{ fill: var(--brand) !important; } /* Tap/Active fühlt sich wertiger an */ #site-navigation.main-navigation.toggled .main-nav > ul > li > a:active{ background: rgba(11,106,166,.08); } /* Submenu dezenter (wie Mockup: hellgrauer Block) */ #site-navigation.main-navigation.toggled .main-nav ul ul.sub-menu.toggled-on{ background: var(--subtle); border-top: 1px solid var(--line); padding: 6px 0 10px; } #site-navigation.main-navigation.toggled .main-nav ul ul.sub-menu.toggled-on a{ padding: 12px 16px !important; font-size: 16px; } /* Chevron drehen wenn offen (GP nutzt sfHover) */ #site-navigation.main-navigation.toggled li.sfHover > a > .dropdown-menu-toggle .gp-icon svg{ transform: rotate(180deg); transition: transform .18s ease; } } .gp-icon svg { height: 1.25em !important; width: 1.25em !important;} h1 {font-size: 26px;} h2 {font-size: 24px;} h3 {font-size: 22px;} /*@media (max-width: 768px) { .separate-containers .inside-article { background-color:#fff !important; } }*/ /* ======================================== 1. Container unter dem Header ===================================== */ .gp-header-search{ display:flex; justify-content:center; /* mittig ausrichten */ /* oben etwas Luft lassen */ background:var(--gp-contrast-0, #EAF3FF); border-bottom:1px solid rgba(0,0,0,.05); } /* ======================================== 2. Suchformular */ .gp-icon svg { fill: inherit; } span.gp-icon.icon-search {background-color: inherit;} .gp-header-search .search-form{ position:relative; /* für Button‑Positionierung */ width:100%; max-width:600px; padding: 3px; } /* Eingabefeld */ .gp-header-search .search-field{ border-radius: 9px; width:100%; height: 35px; padding:.65rem 3rem .65rem 1rem; /* rechts Platz für Icon */ font-size:1rem; border:1px solid #d0d0d0; background:#fff; outline:none; } .gp-header-search .search-submit{ position:absolute; right:0.2rem; /* vertikal genau zentrieren */ top:0; bottom:0; margin:auto 0; transform:none; width:3rem; height:2rem; border:0; background:#febd69; cursor:pointer; padding:0; border-radius: 0 9px 9px 0; } /* suchstyle ende */ @media (max-width: 768px) { .main-navigation .main-nav ul ul li a { font-size: 20px;} .main-navigation a {font-size: 20px;} .wp-block-image.size-full img { width: 100vw; height: 40vw; /* oder fixe Höhe z.B. 200px */ object-fit: cover; object-position: center; } } @media (max-width: 768px) { .page-id-3941 .h-64, .page-id-3765 .h-64, .page-id-4546 .h-64, .page-id-4817 .h-64, .page-id-5088 .h-64, .page-id-5994 .h-64, .page-id-5652 .h-64, .page-id-6810 .h-64, .page-id-6821 .h-64, .page-id-6267 .h-64, .page-id-6823 .h-64, .page-id-6817 .h-64, .page-id-6825 .h-64, .page-id-6813 .h-64, .page-id-6815 .h-64, .page-id-6819 .h-64, .page-id-1790 .h-64, .page-id-3414 .h-64, .page-id-3589 .h-64 { height: 11rem; } } .site-info {display: none;} a.malvorlage-link { text-decoration: none; } /* nur innerhalb von figure mit diesen Klassen wird h-64 überschrieben */ figure.bg-white.shadow-md.rounded-lg.overflow-hidden.transform.hover\:scale-105.transition-transform.duration-300 .h-64 { height: 16rem; } .sub-navigation { margin-bottom: 2em; } .btn-blue { background: #043256; } .btn-blue, .btn-grey, .btn-orange { border: 0; border-radius: 3px; display: inline-block; color: #fff; text-transform: uppercase; margin-bottom: 8px; box-shadow: 2px 2px 10px -3px rgba(0, 0, 0, .6); padding: 8px 15px 8px 12px; } .buttonmz { letter-spacing: -.16px; line-height: 1.4; min-height: 24px; background-color: white; border-color: black !important; appearance: none; display: inline-block; width: auto; text-decoration: none; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid black !important; border-radius: 2px; background-color: white; color: #444; white-space: normal; } .buttonmz { padding: 4px 10px; margin: 3px; } .buttonmz:hover { background-color: grey !important; color: white !important; } ul.sub-menu > li > ul.sub-menu { background-color: #fff4df; /* Wunschfarbe einsetzen */ } .gp-icon { background-color: #fcf0d9;} #downloadLink { text-transform: uppercase; text-decoration: inherit; color: white; } .btn-orange { display: inline-flex; align-items: center; padding: 5px 20px; font-size: 14px; border: none; margin: 5px; cursor: pointer; transition: background-color 0.3s ease; background: #e8734a; color: #ffffff; } .btn-orange:hover { background: #0860a5; } .btn-orange img { height: 18px; display: inline-block; vertical-align: bottom; margin-right: 6px; } #detailBild { height: 300px; max-width: 100%;} /* ===================== */ /* Print-Spezifische Styles */ /* ===================== */ .print-grid-container { display: grid; gap: 1rem; width: 100%; grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 290px) {.print-grid-container {grid-template-columns: repeat(2, minmax(0, 1fr));}} @media (min-width: 640px) {.print-grid-container {grid-template-columns: repeat(3, minmax(0, 1fr));}} @media (min-width: 768px) {.print-grid-container {grid-template-columns: repeat(4, minmax(0, 1fr));}} @media (min-width: 1024px) {.print-grid-container {grid-template-columns: repeat(5, minmax(0, 1fr));}} @media (min-width: 1130px) {.print-grid-container {grid-template-columns: repeat(6, minmax(0, 1fr));}} .print-figure { width: 180px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06); border-radius: 0.5rem; overflow: hidden; transform: none; transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 390px) {.print-figure {width: 150px;}} .print-figure:hover { transform: scale(1.05); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); text-decoration:none; } .print-figure .print-image { width: 100%; height: 10rem; object-fit: contain; } @media (min-width: 768px) { .print-figure .print-image { height: 10rem; } } .print-figure figcaption { padding: 1rem; color: #4B5563; text-align: center; } /* ===================== */ /* Bestehende Styles */ /* ===================== */ .inside-header { padding: 5px 10px; } .paintings { /* Optional Styles hier */ } .grid { display: grid; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 640px) { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .gap-6 { gap: 1.5rem; } /* ===================== */ /* Utility Klassen */ /* ===================== */ .separate-containers .site-main { margin: inherit; } .inside-article { padding: 20px !important; } .bg-white { background-color: #ffffff; } .shadow-md { border: 1px solid rgb(0 0 0 / 22%); box-shadow: 0 4px 10px rgb(0 0 0 / 26%); } .rounded-lg { border-radius: 0.5rem; } .overflow-hidden { overflow: hidden; } .transform { transform: none; } .hover\:scale-105:hover { transform: scale(1.05); } .transition-transform { transition-property: transform; } .duration-300 { transition-duration: 300ms; } .w-full { width: 100%; } .h-64 { height: 16rem; } @media (min-width: 768px) { .md\:h-48 { height: 12rem; } } /*@media (max-width: 768px) { .h-64 { height: 11rem; } }*/ .object-contain { object-fit: contain; } .p-4 { padding: 1rem; } .text-gray-600 { color: #4B5563; } .text-center { text-align: center; } /* ===================== */ /* Spezielle Komponenten */ /* ===================== */ .shortcode-fullrow { grid-column: 1 / -1; display: block; width: 100%; margin: 1rem 0; background:#fff; } /* tool page */ .page-id-10836 .inside-article { padding-top: 0px !important; padding-right: 10px !important; padding-left: 10px !important; } .page-id-10836 .main-navigation .main-nav ul li a { line-height: inherit; } .page-id-10836 #breadcrumbs {display:none !important} .dat2 { text-align: right; font-size: 11px; color: #999; font-style: italic; margin: 10px 0 10px 0; padding-bottom: 10px; border-bottom: 1px solid #eee; } /* fehlender Hover */ figure.bg-white.shadow-md.rounded-lg.overflow-hidden { transform: scale(1); transition: transform 0.3s ease; } figure.bg-white.shadow-md.rounded-lg.overflow-hidden:hover { transform: scale(1.05); } /* GalleryModal – extrahierte Styles aus tool.html (minimal angepasst) Enthält: Modal-Layout, Header, Navigation, Overlays, SVG-Container, Thumbnails */ /* Modal-Header */ #modalHeader { display:flex; align-items:center; justify-content:center; gap:12px; text-align:center; position:relative; padding-right:42px; } #modalHeader #modalTitle { margin:0; font-weight:600; } /* Like-Button-Layout im Header mittig */ #modalHeader .like-control { display:inline-flex; align-items:center; gap:8px; } #modalHeader .like-control .btn { display:inline-flex; align-items:center; gap:6px; cursor:pointer; } #modalHeader .like-control .count { font-weight:600; } /* Modal-Grundgerüst */ .modal2 { position: fixed; inset: 0; display: none; z-index: 9999; background: rgba(0,0,0,.6); } .modal2 .modal-cont2 { position: relative; width: min(1200px, 96vw); height: min(92vh, 900px); margin: 2vh auto; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 16px; overflow: hidden; } .clos2 { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 28px; cursor: pointer; color: #333; z-index: 10; } /* Navigation im Modal */ .nav-buttons { position: absolute; top: 12px; right: 16px; display:flex; gap:10px; z-index: 10; } .nav-button { display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:6px; cursor:pointer; user-select:none; } .nav-button:hover { background:#fff; } /* Overlay + Spinner (im Modal) */ #overlayLayer { position:absolute; inset:0; background: rgba(255,255,255,.75); display:none; z-index: 3; } #loadingSpinner { position:absolute; inset:auto; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border:4px solid #eee; border-top-color:#999; border-radius:50%; animation: gm_spin 1s linear infinite; display:none; z-index: 4; } @keyframes gm_spin { to { transform: translate(-50%,-50%) rotate(360deg); } } /* Container für das geladene SVG */ #animatedSvgContainer { position: relative; width: 100%; height: calc(100% - 64px); margin-top: 12px; overflow: hidden; background:#fff; border: 1px solid #eee; border-radius: 8px; } #animatedSvgContainer svg { display:block; margin:0; width:100%; height:100%; max-width:100%; max-height:100%; } /* Thumbnail-Grid */ img.cs-thumb:hover { opacity: 1;} img.cs-thumb { max-width: 30%;padding:5px;cursor:pointer;opacity: 0.4;max-height: 120px;} div.cs-thumbs {display: flex; justify-content: center; align-items: center; background-color: #ffebd8;height:120px} /* statt global */ figcaption a.malvorlage-link{ max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Button-Link NICHT abschneiden */ center a.button.malvorlage-link{ max-width: none; white-space: normal; overflow: visible; text-overflow: clip; border-radius: 5px; } center a.button.malvorlage-link:hover{ filter: brightness(1.06); box-shadow: 0 6px 14px rgba(0,0,0,.18); transform: translateY(-1px); } .thumb-container { display:inline-block; text-align:center; margin: 6px; position: relative; } .thumbclicktool { width: 160px; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: transform .12s ease, box-shadow .12s ease; } .thumbclicktool:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.12); } .thumb-play-circle { position:absolute; inset:auto; left:50%; top:50%; transform:translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.5); box-shadow: 0 2px 6px rgba(0,0,0,.22); pointer-events: none; } /* Optional: Like-Wrapper (falls verwendet) */ .likebtn-wrapper { display:inline-block; } /* Minimal-Styles für internen Like-Button */ .gm-like-btn { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 10px; border-radius:6px; border:1px solid #ddd; background:#fff; color:#333; cursor:pointer; font: inherit; } .gm-like-btn:hover { background:#fff; } .gm-like-btn[aria-pressed="true"] { background:#ffe8ec; border-color:#ffb5c2; color:#c2274e; } .gm-like-count { margin-left:6px; font-weight:600; } /* Like-Button (vollständiges Layout für .like-control) */ .like-control { display:inline-flex; align-items:center; background:#fff; border:1px solid #cfcfcf; border-radius:8px; overflow:hidden; user-select:none; font-family: inherit; } .like-control .count { min-width:34px; text-align:center; padding:6px 12px; border-left:1px solid #e0e0e0; background:#ffffff; } .like-control .icon { width:18px; height:18px; } .like-control.liked .btn { color:#2e7d32; } .like-control.disabled .btn { opacity:0.6; cursor:default; } /* Zweizeilige Caption ohne … */ figure figcaption a.malvorlage-link { display: -webkit-box; -webkit-line-clamp: 1; /* genau 2 Zeilen */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; /* kein Ellipsis */ white-space: normal; /* Umbruch erlauben */ line-height: 1.3; max-width: none; /* nicht auf 200px begrenzen */ } .paintings { margin-bottom: 25px; } /* search sticky */ .gp-header-search { position: sticky; top: 0; z-index: 99; } .sub-navigation .buttonmz.is-active{ background: #222; color: #fff; border-color: #222; } #modalTitle { max-width: 16ch; /* Mobile default */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Desktop */ @media (min-width: 1024px) { #modalTitle { max-width: 30ch; } } [data-ugc-gallery="true"]{ background:#0960a514; padding:14px 16px 12px; } /* Community-Box fuellt die Resthoehe der Karte -> alle Boxen einer Reihe gleich hoch (buendig) */ .card [data-ugc-gallery="true"]{flex:1 1 auto} /* Leere "Still blank"-Box: fuellt mit + zentriert die CTA (statt kurzem Kasten) */ [data-ugc-gallery="true"][data-ugc-empty="true"]{height:auto!important;display:flex;align-items:center;justify-content:center;text-align:center} [data-ugc-gallery="true"] > p{ margin:0 0 10px 0; text-align:center; font-size:12px; line-height:1.15; color:#f97316; text-transform:none; letter-spacing:0; } [data-ugc-gallery="true"] .cs-thumbs{ /* Community-Thumbs: ersetzt die frueheren verstreuten Thumb-Regeln komplett. Byline bleibt sichtbar (SEO). Rang-Badge nur ab 3 Thumbs (Renderer setzt is-hidden). */ display:flex;justify-content:center;align-items:flex-start;flex-wrap:nowrap;gap:8px;margin:0;padding:0;list-style:none;background:transparent;height:auto; } [data-ugc-gallery="true"] .ugc-thumb-item{position:relative;flex:1 1 0;min-width:0;max-width:76px;display:block} [data-ugc-gallery="true"] .ugc-by{display:block;height:18px;line-height:18px;margin:0;font-size:10.5px;font-weight:600;text-align:center;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} [data-ugc-gallery="true"] .cs-thumb-btn{display:block;width:100%;aspect-ratio:1;padding:0;border:0;background:transparent;cursor:pointer} [data-ugc-gallery="true"] .cs-thumb-wrapper{width:100%;height:100%;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 3px 8px rgba(15,23,42,.14),0 0 0 2px rgba(255,255,255,.95)} [data-ugc-gallery="true"] .cs-thumb{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;padding:0!important;display:block;opacity:1;object-fit:cover;border:0!important;border-radius:12px!important;transition:transform 160ms ease,filter 160ms ease} [data-ugc-gallery="true"] .cs-thumb-btn:hover .cs-thumb{transform:scale(1.04);filter:saturate(1.1)} [data-ugc-gallery="true"] .ugc-rank-wrapper{position:absolute;top:12px;left:-8px;z-index:3;width:30px;height:30px;border-radius:999px;background:#fff;box-shadow:0 2px 6px rgba(15,23,42,.2),inset 0 0 0 1px rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center} [data-ugc-gallery="true"] .ugc-rank-wrapper.is-hidden{display:none} [data-ugc-gallery="true"] .ugc-medal-emoji{display:none} [data-ugc-gallery="true"] .ugc-rank-wrapper::after{font-size:14px;font-weight:800;line-height:1;color:#334155} [data-ugc-gallery="true"] .ugc-thumb-item:nth-child(1) .ugc-rank-wrapper::after{content:"1"} [data-ugc-gallery="true"] .ugc-thumb-item:nth-child(2) .ugc-rank-wrapper::after{content:"2"} [data-ugc-gallery="true"] .ugc-thumb-item:nth-child(3) .ugc-rank-wrapper::after{content:"3"} [data-ugc-gallery="true"] .ugc-thumb-item:nth-child(1) .ugc-rank-wrapper{background:#fde047} [data-ugc-gallery="true"] .ugc-thumb-item:nth-child(2) .ugc-rank-wrapper{background:#cbd5e1} [data-ugc-gallery="true"] .ugc-thumb-item:nth-child(3) .ugc-rank-wrapper{background:#fed7aa} [data-ugc-gallery="true"] .ugc-like{position:absolute;right:-6px;bottom:-4px;z-index:4;min-width:38px;height:24px;padding:0 8px;border-radius:999px;background:#fff;color:#f97316;font-size:12px;font-weight:800;line-height:24px;display:inline-flex;align-items:center;justify-content:center;gap:4px;box-shadow:0 2px 7px rgba(15,23,42,.16),0 0 0 1px rgba(249,115,22,.12)} [data-ugc-gallery="true"] .ugc-like .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} [data-ugc-gallery="true"] .ugc-like-icon{width:14px;height:14px;color:currentColor} @media(max-width:420px){ [data-ugc-gallery="true"] .cs-thumbs{gap:6px} } hr.ugc-more-sep.is-hidden { margin-top: 10px; margin-bottom: 10px; } hr.ugc-more-sep { margin-top: 10px; margin-bottom: 10px; } p.ugc-more-link.is-hidden { opacity: 0; } img.w-full.h-64.object-contain{ margin-top: 10px !important; } .shortcode-fullrow.content-block {background: #fff;} .ShariffSC.sh-share::after { content: ""; display: block; border-bottom: 0.5px solid #ccc; margin-top: 10px; margin-bottom: 20px; } /* Content Slots * * Full-width in deinem Grid (spannt über alle Spalten) */ .shortcode-fullrow, .content-block{ grid-column: 1 / -1; width: 100%; display: block; } /* Optik (optional, kannste anpassen) */ .content-block{ background: #fff; /* border: 1px solid #f3d8b3; */ border-radius: 8px; padding: 19px; margin: 6px 0; /* passt zum gap */ } .content-block__inner{ max-width: 1100px; /* optional: begrenzt Textbreite */ margin: 0 auto; } .content-block__title{ margin: 0 0 8px 0; } .content-block__text{ margin: 0 0 12px 0; color: #444; line-height: 1.4; } .content-block__dynamic{ /* Platz für dynamische Inhalte */ } .color-swatch { display:inline-block;width: 2em;height: 2em;border-radius:3px;vertical-align:middle;margin-right:4px;border: 1px solid rgb(160 160 160);} /* ===== Horizontal scroll wrapper table ===== */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; position: relative; /* Sichtbarere Scrollbar für Desktop/Android */ scrollbar-width: auto; scrollbar-color: #888 #e0e0e0; } .table-wrapper::-webkit-scrollbar { height: 12px; } .table-wrapper::-webkit-scrollbar-track { background:#fff; border-radius: 6px; } .table-wrapper::-webkit-scrollbar-thumb { background: #888; border-radius: 6px; border: 1px solid #ddd; } .table-wrapper::-webkit-scrollbar-thumb:hover { background: #666; } /* iOS Scroll-Indikator - bleibt sehr lange sichtbar */ .table-wrapper::after { content: "← Scroll →"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.7); color: #fff; padding: 4px 8px; border-radius: 12px; font-size: 12px; pointer-events: none; opacity: 0; z-index: 10; } @media (hover: none) and (pointer: coarse) { .table-wrapper::after { opacity: 1; animation: longFadeOut 20s ease-in-out 10s forwards; } } @keyframes longFadeOut { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 0; } } /* ===== Table sizing ===== */ .table-wrapper table { min-width: 760px; border-collapse: collapse; } .table-wrapper .table-figure { margin: 0 !important; /* kill Theme figure margins */ padding: 0; display: block; max-width: none; width: auto; float: none !important; /* falls Theme figure floated */ } .table-wrapper .table-figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; /* optional: zentrieren */ } .shortcode-fullrow.content-block:nth-of-type(3) { background-color:#fff; } blockquote { border-left: 5px solid rgb(0 115 170); background-color: #ffffff; } .info-table thead { background-color: #0073aaa3; color: #ffffff; } div.entry-content {margin-top: 0.5em !important; } .shariff-buttons { display: flex; align-items: center; } .shariff-buttons::before { content: "Share"; margin-right: 15px; font-weight: 400; align-self: flex-start; margin-top: 10px; } .native-share-btn { display: none; } @media (max-width: 768px) { .native-share-btn { display: flex; align-items: center; gap: 8px; margin: 0 0 10px auto; width: fit-content; border: 0; font-weight: 600; font-size: 15px; cursor: pointer; background-color: #fff; color: #000000; } .share-icon { width: 24px; height: 24px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 16.1c-.8 0-1.6.3-2.2.8L8.9 13.7c.1-.3.1-.5.1-.8s0-.5-.1-.8l6.8-3.9c.6.6 1.4.9 2.3.9 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3c0 .3 0 .5.1.8L8.2 9.8C7.6 9.2 6.8 8.9 6 8.9c-1.7 0-3 1.3-3 3s1.3 3 3 3c.8 0 1.6-.3 2.2-.8l6.9 3.9c-.1.2-.1.5-.1.7 0 1.7 1.3 3 3 3s3-1.3 3-3-1.3-3-3-3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 16.1c-.8 0-1.6.3-2.2.8L8.9 13.7c.1-.3.1-.5.1-.8s0-.5-.1-.8l6.8-3.9c.6.6 1.4.9 2.3.9 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3c0 .3 0 .5.1.8L8.2 9.8C7.6 9.2 6.8 8.9 6 8.9c-1.7 0-3 1.3-3 3s1.3 3 3 3c.8 0 1.6-.3 2.2-.8l6.9 3.9c-.1.2-.1.5-.1.7 0 1.7 1.3 3 3 3s3-1.3 3-3-1.3-3-3-3z'/%3E%3C/svg%3E") center / contain no-repeat; } div.ShariffSC.sh-share { display: none !important; } hr.native-share-divider {background-color: rgba(0, 0, 0, .1); border: 0; height: 1px; margin-top: 0px !important; margin-bottom: 30px !important;} } @media (min-width: 768px) { hr.native-share-divider {display:none}} .fact-card { display: flex; align-items: flex-start; gap: 15px; padding: 20px; margin: 20px 0; border-radius: 20px; box-shadow: 0 6px 15px rgba(0,0,0,0.1); transition: transform 0.2s ease; } .fact-card:hover { transform: scale(1.02); } .fact-card:nth-child(1) { background: #FFE4E1; } .fact-card:nth-child(2) { background: #FFF3B0; } .fact-card:nth-child(3) { background: #D6F5FF; } .fact-card:nth-child(4) { background: #E6D6FF; } .fact-card:nth-child(5) { background: #D9FFD6; } .fact-number { font-size: 28px; font-weight: bold; background: #FF6B6B; color: white; width: 50px; height: 50px; min-width: 50px; min-height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ===== Crafts Section ===== */ .content-block__inner h2:nth-of-type(n+2) { text-align: center; font-size: 32px; margin: 10px 0 30px; } /* Card Layout */ .craft-card{ display:flex; gap:16px; padding:20px; margin:18px 0; border-radius:22px; box-shadow: 0 8px 18px rgba(0,0,0,0.10); border: 2px solid rgba(0,0,0,0.04); transition: transform .18s ease, box-shadow .18s ease; } .craft-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,0.12); } /* Alternating fun backgrounds */ .craft-card:nth-of-type(1){ background:#FFE4E1; } /* pink */ .craft-card:nth-of-type(2){ background:#FFF3B0; } /* yellow */ .craft-card:nth-of-type(3){ background:#D6F5FF; } /* blue */ /* Number “sticker” - never squish */ .craft-number{ font-size: 26px; font-weight: 800; color:#fff; width:54px; aspect-ratio: 1 / 1; /* always round */ border-radius:999px; display:flex; align-items:center; justify-content:center; flex-shrink:0; /* important */ min-width:54px; /* safety */ box-shadow: 0 10px 18px rgba(0,0,0,0.12); border: 2px solid rgba(255,255,255,0.65); } /* Different colors for number circle */ .craft-card:nth-of-type(1) .craft-number{ background:#FF6B6B; } .craft-card:nth-of-type(2) .craft-number{ background:#FF9F1C; } .craft-card:nth-of-type(3) .craft-number{ background:#4D96FF; } /* Title */ .craft-title{ margin: 0 0 10px; font-size: 22px; line-height: 1.25; } /* Supplies + Supports as badges */ .craft-supplies, .craft-skill{ margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,0.55); border: 1px dashed rgba(0,0,0,0.10); font-weight: 600; } /* Make emoji icons align nicely */ .craft-supplies .emoji, .craft-skill .emoji{ width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; } /* Steps list: friendly and readable */ .craft-steps{ margin: 12px 0 8px; padding-left: 22px; } .craft-steps li{ margin: 8px 0; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,0.40); border: 1px solid rgba(0,0,0,0.06); } /* Improve spacing inside content */ .craft-content{ flex: 1; min-width: 0; /* helps prevent overflow in flex layouts */ } /* ===== Mobile: stack nicely ===== */ @media (max-width: 520px){ .craft-card{ flex-direction: column; align-items: center; text-align: left; } .craft-number{ width: 50px; min-width: 50px; } .craft-title{ text-align:center; } .craft-steps{ padding-left: 18px; } } /* ===== download calender ===== */ .download-flex { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px; align-items: stretch; } .download-flex a { display: inline-flex !important; align-items: center; justify-content: center; white-space: nowrap; width: auto !important; min-width: 140px; flex: 1 1 0; } .download-flex br { display: none !important; } .brlbs-mt-4 button#CookieBoxSaveButton, .brlbs-mt-4 button.brlbs-btn-save { display: none !important; } .brlbs-mt-4 button.brlbs-btn-accept-only-essential { display: none !important; } .brlbs-mt-4 button#CookieBoxPreferencesButton, .brlbs-mt-4 button.brlbs-cmpnt-btn-preferences { background: #c6c6c6 !important; border-color: #c6c6c6 !important; color: #fff !important; } .brlbs-cmpnt-action-paragraph a[data-borlabs-cookie-actions], .brlbs-cmpnt-action-paragraph a[data-borlabs-cookie-actions]:link, .brlbs-cmpnt-action-paragraph a[data-borlabs-cookie-actions]:visited, .brlbs-cmpnt-action-paragraph a[data-borlabs-cookie-actions]:hover, .brlbs-cmpnt-action-paragraph a[data-borlabs-cookie-actions]:focus, .brlbs-cmpnt-action-paragraph a[data-borlabs-cookie-actions]:active { color: inherit !important; text-decoration: none !important; font-weight: inherit !important; } .footer-widgets { background-color: inherit !important; } .grid-container { background-color: white; } /* ───── Tokens (scoped) ───── */ .tdp.tdp--v2{ --tdp-c-bg:#faf8f5; --tdp-c-white:#fff; --tdp-c-text:#2d2a26; --tdp-c-text-mid:#5a5650; --tdp-c-text-light:#8a857f; --tdp-c-primary:#e8734a; --tdp-c-primary-hover:#d4623b; --tdp-c-primary-soft:#fef0eb; --tdp-c-secondary:#2a7d5f; --tdp-c-secondary-soft:#e8f5ef; --tdp-c-accent:#4a90c4; --tdp-c-accent-soft:#ebf3fa; --tdp-c-border:#e8e4df; --tdp-c-section-alt:#f3f0eb; --tdp-c-ugc-bg:#fdf6f0; --tdp-radius-sm:8px; --tdp-radius-md:14px; --tdp-radius-lg:20px; --tdp-shadow-card:0 2px 12px rgba(45,42,38,.07); --tdp-shadow-hover:0 8px 28px rgba(45,42,38,.12); --tdp-shadow-cta:0 4px 16px rgba(232,115,74,.3); /* Match GeneratePress theme stack used on colomio.com/mandala/ so the detail page inherits the same rendering as sibling category pages — no Google Fonts fetched. Display = Body = system stack. */ --tdp-font-display:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --tdp-font-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --tdp-max-w:900px; --tdp-gap:clamp(16px,4vw,32px); font-family:var(--tdp-font-body); font-size:16px; color:var(--tdp-c-text); line-height:1.7; max-width:var(--tdp-max-w); margin:0 auto; } /* ───── Hero row: TOC (left) + Hero column (right) on desktop ───── Mobile-first: flex-column with explicit order so the user sees hero → CTAs → watch-link → TOC. On ≥900px the row promotes to a 2-col grid only when a TOC actually exists (':has(.tdp-toc)'), otherwise it stays single-column for sparse pages with too few sections to warrant a TOC. */ .tdp--v2 .tdp-hero-row{display:flex;flex-direction:column;gap:20px;margin:0 0 var(--tdp-gap);} @media (min-width:900px){ .tdp--v2 .tdp-hero-row:has(.tdp-toc){display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:start;} } .tdp--v2 .tdp-hero-col{display:flex;flex-direction:column;gap:16px;order:1;} @media (min-width:900px){.tdp--v2 .tdp-hero-col{order:0;}} /* ───── TOC card ───── */ .tdp--v2 .tdp-toc{background:var(--tdp-c-white);border:1px solid var(--tdp-c-border);border-radius:var(--tdp-radius-lg);padding:18px 18px 10px;box-shadow:var(--tdp-shadow-card);order:2;} @media (min-width:900px){.tdp--v2 .tdp-toc{order:0;position:sticky;top:80px;}} .tdp--v2 .tdp-toc__title{font-family:var(--tdp-font-display);font-weight:700;font-size:15px;color:var(--tdp-c-text);margin:0 0 12px;padding:0 4px;} .tdp--v2 .tdp-toc__list{list-style:none;padding:0;margin:0;} .tdp--v2 .tdp-toc__list li{margin:0;} .tdp--v2 .tdp-toc__link{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:var(--tdp-radius-sm);text-decoration:none;color:var(--tdp-c-text);font-weight:600;font-size:14px;line-height:1.3;transition:background .15s ease, color .15s ease;} .tdp--v2 .tdp-toc__link:hover{background:var(--tdp-c-section-alt);color:var(--tdp-c-primary);} .tdp--v2 .tdp-toc__icon{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;} .tdp--v2 .tdp-toc__icon--community{background:var(--tdp-c-secondary-soft);} .tdp--v2 .tdp-toc__icon--tips {background:var(--tdp-c-primary-soft); } .tdp--v2 .tdp-toc__icon--faq {background:var(--tdp-c-accent-soft); } .tdp--v2 .tdp-toc__icon--related {background:var(--tdp-c-accent-soft); } .tdp--v2 .tdp-toc__label{flex:1 1 auto;min-width:0;} .tdp--v2 .tdp-toc__chev{color:var(--tdp-c-text-light);font-size:12px;} /* ───── Hero card ───── Lives inside .tdp-hero-col; the CTA row is now a sibling, not a child. Image is capped at 480px tall so portrait sources don't push the CTAs off the desktop fold. */ .tdp--v2 .tdp-hero-card{background:var(--tdp-c-white);border-radius:var(--tdp-radius-lg);box-shadow:var(--tdp-shadow-card);overflow:hidden;border:1px solid var(--tdp-c-border);animation:tdpFadeUp .5s ease both;} .tdp--v2 .tdp-hero-card__image{background:#fff;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,40px);} .tdp--v2 .tdp-hero-card__image picture,.tdp--v2 .tdp-hero-card__image img{display:block;max-width:500px;max-height:480px;width:100%;height:auto;border-radius:var(--tdp-radius-md);margin:0;object-fit:contain;} .tdp--v2 .tdp-hero-actions{display:flex;gap:12px;flex-wrap:wrap;} /* ───── Buttons ───── */ .tdp--v2 .tdp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:var(--tdp-radius-md);font-family:var(--tdp-font-display);font-weight:700;font-size:16px;border:none;cursor:pointer;transition:all .2s ease;flex:1;min-width:160px;text-decoration:none;box-shadow:var(--tdp-shadow-card);} .tdp--v2 .tdp-btn--primary{background:var(--tdp-c-primary);color:#fff;box-shadow:var(--tdp-shadow-cta);} .tdp--v2 .tdp-btn--primary:hover{background:var(--tdp-c-primary-hover);color:#fff;transform:translateY(-1px);box-shadow:0 6px 20px rgba(232,115,74,.4);} .tdp--v2 .tdp-btn--secondary{background:var(--tdp-c-text);color:#fff;} .tdp--v2 .tdp-btn--secondary:hover{background:#1a1816;color:#fff;transform:translateY(-1px);} .tdp--v2 .tdp-btn svg{width:18px;height:18px;flex-shrink:0;} /* ───── Intro ───── */ .tdp--v2 .tdp-intro{padding:0 0 var(--tdp-gap);} .tdp--v2 .tdp-intro p{font-size:16px;color:var(--tdp-c-text-mid);margin:0 0 14px;line-height:1.75;} .tdp--v2 .tdp-intro p:last-child{margin-bottom:0;} /* ───── Section shell (tips / community / related / faq) ───── scroll-margin-top reserves space for the WP sticky header so when the TOC's anchor link jumps to a section, the section's heading isn't underlapped by the sticky chrome. */ .tdp--v2 .tdp-tips,.tdp--v2 .tdp-community,.tdp--v2 .tdp-related,.tdp--v2 .tdp-faq{border-radius:var(--tdp-radius-lg);padding:clamp(24px,4vw,40px);margin:0 0 var(--tdp-gap);scroll-margin-top:96px;} .tdp--v2 .tdp-tips{background:var(--tdp-c-section-alt);} .tdp--v2 .tdp-community{background:var(--tdp-c-ugc-bg);} .tdp--v2 .tdp-related{background:var(--tdp-c-bg);border:1px solid var(--tdp-c-border);} .tdp--v2 .tdp-faq{background:var(--tdp-c-white);border:1px solid var(--tdp-c-border);} /* ───── Section titles (with emoji icon badge) ───── */ .tdp--v2 .tdp-tips h2,.tdp--v2 .tdp-community h2,.tdp--v2 .tdp-related h2,.tdp--v2 .tdp-faq h2{font-family:var(--tdp-font-display);font-size:24px;font-weight:700;color:var(--tdp-c-text);margin:0 0 24px;display:flex;align-items:center;gap:10px;line-height:1.25;} .tdp--v2 .tdp-tips h2::before,.tdp--v2 .tdp-community h2::before,.tdp--v2 .tdp-related h2::before,.tdp--v2 .tdp-faq h2::before{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-size:16px;flex-shrink:0;} .tdp--v2 .tdp-tips h2::before{content:'✏️';background:var(--tdp-c-primary-soft);} .tdp--v2 .tdp-community h2::before{content:'🎨';background:var(--tdp-c-secondary-soft);} .tdp--v2 .tdp-related h2::before{content:'✨';background:var(--tdp-c-accent-soft);} .tdp--v2 .tdp-faq h2::before{content:'❓';background:var(--tdp-c-primary-soft);} /* ───── Tip cards (built via CSS counter on GPT's