/* WillowPlant · Blog (ybc_blog 5.1) – Entwicklung 12.11.2026 */
/* Titel wie im Shop: normale Schreibweise statt Versalien */
.ybc_block_category .ybc_title_block,
.ybc-blog-related-posts .ybc_title_block,
.ybc-blog-related-products-wrapper a { text-transform: none; line-height: 1.35; }
.ybc_block_category .ybc_title_block,
.ybc-blog-related-posts .ybc_title_block { font-size: 15px; }
.ybc-blog-related-products-wrapper a { font-size: 13px; font-weight: 600; }
/* Knöpfe gerundet in CI-Orange (Farbe kommt aus den Blog-Einstellungen) */
.blog_view_all, .ybc-blog-form-comment input.button { border-radius: 20px; padding: 8px 22px; font-weight: 600; text-transform: none; }
/* Kommentar-Formular: gerundete Felder, grüne Beschriftung */
.ybc-blog-form-comment label { font-weight: 600; color: #6b8e23; }
.ybc-blog-form-comment input[type=text], .ybc-blog-form-comment input[type=email], .ybc-blog-form-comment textarea {
  border: 1px solid #c8dba0; border-radius: 12px; padding: 8px 12px; }
.ybc-blog-form-comment input:focus, .ybc-blog-form-comment textarea:focus { border-color: #ee732a; outline: none; }
/* Schlagwörter als Kapseln */
.ybc_block_tag .blog_tag a { display: inline-block; margin: 0 4px 6px 0; padding: 3px 10px; border-radius: 12px;
  background: #f1f6e4; color: #5f7f1f; font-size: 12px !important; line-height: 1.5; }
.ybc_block_tag .blog_tag a:hover { background: #ee732a; color: #fff; }

/* 12.11.2026 v2 – Artikelfoto: gleicher Abstand oben wie seitlich */
.ybc-blog-wrapper-detail { padding-top: 30px !important; }

/* Blog-Slider: Pfeile wie bei den Produktfotos (runder weißer Knopf, oranger Pfeil, seitlich mittig) */
.ybc_blog_carousel .slick-arrow, .ybc_block_slider .slick-arrow, .blog_type_slider .slick-arrow {
  position: absolute !important; top: 30% !important; bottom: auto !important; z-index: 3; width: 40px !important; height: 40px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: rgba(255, 255, 255, .94) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); font-size: 0 !important;
  color: #ee732a; cursor: pointer; transition: opacity .2s, background-color .15s; }
.ybc_blog_carousel .slick-prev, .ybc_block_slider .slick-prev, .blog_type_slider .slick-prev { left: 4px !important; right: auto !important; }
.ybc_blog_carousel .slick-next, .ybc_block_slider .slick-next, .blog_type_slider .slick-next { right: 4px !important; left: auto !important; }
.ybc_blog_carousel .slick-arrow::before, .ybc_block_slider .slick-arrow::before, .blog_type_slider .slick-arrow::before {
  font-family: 'Material Icons' !important; font-size: 30px !important; line-height: 40px !important; color: #ee732a !important;
  content: 'chevron_left' !important; opacity: 1 !important; display: block; width: 40px; text-align: center;
  font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }
.ybc_blog_carousel .slick-next::before, .ybc_block_slider .slick-next::before, .blog_type_slider .slick-next::before { content: 'chevron_right' !important; }
.ybc_blog_carousel .slick-arrow:hover, .ybc_block_slider .slick-arrow:hover, .blog_type_slider .slick-arrow:hover { background: #ee732a !important; }
.ybc_blog_carousel .slick-arrow:hover::before, .ybc_block_slider .slick-arrow:hover::before, .blog_type_slider .slick-arrow:hover::before { color: #fff !important; }
.ybc_blog_carousel .slick-arrow.slick-disabled, .ybc_block_slider .slick-arrow.slick-disabled, .blog_type_slider .slick-arrow.slick-disabled { opacity: 0 !important; pointer-events: none; }

/* Produktseite: Zubehör („Vielleicht gefällt Ihnen auch“) und „gleiche Kategorie“ als einzeiliger Slider (wp-slider.js) */
body .wp-row-slider { position: relative; }
body .wp-row-track { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; gap: 16px; margin: 0 !important; padding: 4px 2px 24px !important; }
body .wp-row-track::-webkit-scrollbar { display: none; }
body .wp-row-track > * { flex: 0 0 calc((100% - 48px) / 4) !important; max-width: none !important; width: auto !important;
  margin: 0 !important; float: none !important; scroll-snap-align: start; }
@media (max-width: 991px) { body .wp-row-track > * { flex-basis: calc((100% - 32px) / 3) !important; } }
@media (max-width: 767px) { body .wp-row-track > * { flex-basis: calc((100% - 16px) / 2) !important; } }
body .wp-row-btn { display: flex; align-items: center; justify-content: center; position: absolute; top: 40%; z-index: 3;
  width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25); color: #ee732a; cursor: pointer; outline: none; transition: opacity .2s, background-color .15s, color .15s; }
body .wp-row-btn.wp-prev { left: 4px; }
body .wp-row-btn.wp-next { right: 4px; }
body .wp-row-btn .material-icons { font-size: 30px; line-height: 1; }
body .wp-row-btn:hover { background: #ee732a; color: #fff; }
body .wp-row-btn.wp-off { opacity: 0; pointer-events: none; }

/* v3: Blog-Pfeile gegen die Modul-Styles durchsetzen (Modul zeichnet den Pfeil als gedrehtes Quadrat) */
body #wrapper button.slick-arrow.slick-prev, body #wrapper button.slick-arrow.slick-next { border-radius: 50% !important; overflow: hidden; }
body #wrapper .ybc_blog_carousel button.slick-arrow::before, body #wrapper .ybc_block_slider button.slick-arrow::before,
body #wrapper .blog_type_slider button.slick-arrow::before {
  width: 40px !important; height: 40px !important; border: 0 !important; transform: none !important; margin: 0 !important;
  position: static !important; background: none !important; }

/* v4 (12.11.): einheitliche Rundungen 15 px wie die Produktkarten; Blogbilder abgerundet */
body .wp-row-track .thumbnail-container { border-radius: 15px !important; }
body .wp-row-track .thumbnail-top, body .wp-row-track .thumbnail-top .product-thumbnail, body .wp-row-track .thumbnail-top img { border-radius: 15px 15px 0 0 !important; overflow: hidden; }
body .wp-row-track .thumbnail-container .product-description { border-radius: 0 0 15px 15px !important; }
#product .ybc-blog-related-posts.on_product { border-radius: 15px !important; }
body .ybc_item_img, body .ybc_item_img img, body .ybc_image-single, body .ybc_image-single img, body .ybc_blog_img img, body .post_image img { border-radius: 15px !important; overflow: hidden; }
body .ybc_item_img img, body .ybc_image-single img { display: block; }

/* v5 (12.11.): Wissen-Beitrag „Ähnliche Produkte“ wie „Vielleicht gefällt Ihnen auch“ (Karten von wp-slider.js) */
body .wp-blog-products-box, body .wp-blog-box:has(.wp-blog-products) { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
body .wp-blog-products .all-product-link { display: block; color: #fff !important; font-size: 18px; font-weight: 700; text-align: center; text-transform: uppercase; margin: 48px 0 !important; padding: 0 !important; }
body .wp-blog-products .products { margin: 0 !important; }
body .wp-blog-products .product-miniature { padding: 0 !important; }
@media (min-width: 768px) { body .wp-row-track > * { min-width: 250px !important; } body .wp-blog-products .wp-row-track > * { flex-basis: calc((100% - 32px) / 3) !important; } }
@media (max-width: 767px) { body .wp-blog-products .wp-row-track > * { min-width: 0 !important; flex-basis: calc((100% - 16px) / 2) !important; } }
body .wp-row-track::before, body .wp-row-track::after { display: none !important; content: none !important; }
body .wp-blog-products .thumbnail-container, body .wp-blog-products .product-description { width: 100% !important; }
body .wp-blog-products .product-thumbnail img { width: 100% !important; height: auto !important; }

/* v6 (12.11.): Wissen-Beitrag „Ähnliche Beiträge“ wie „Passende Beiträge“ auf der Produktseite */
body.ybc-blog .wp-blog-box > .ybc-blog-related-posts > .title_blog { font-size: 18px !important; font-weight: 700 !important; text-transform: uppercase !important; text-align: center !important; margin: 0 0 16px !important; padding: 0 !important; }
body.ybc-blog .wp-blog-box > .ybc-blog-related-posts .ybc-blog-related-posts-list-li { padding: 0 10px !important; }
body.ybc-blog .wp-blog-box > .ybc-blog-related-posts .slick-list { margin: 0 -10px; }
body.ybc-blog .wp-blog-box > .ybc-blog-related-posts .ybc_item_img img { width: 100% !important; height: auto !important; }
body.ybc-blog .wp-blog-box > .ybc-blog-related-posts .ybc_title_block { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; margin-top: 9px; }
body.ybc-blog .wp-blog-box > .ybc-blog-related-posts .blog_description { font-size: 14px; line-height: 24px; }
body.ybc-blog .wp-blog-box > .ybc-blog-related-posts .ybc-blog-related-posts-wrapper { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* v7 (13.11.): Kategorieseite „Ähnliche Beiträge“ wie auf der Wissen-Beitragsseite (Abstände, Titel, Karten) */
body .ybc_block_related_category_page { padding: 30px !important; border-radius: 20px !important; background: #fff !important; margin-bottom: 30px !important; }
body .ybc_block_related_category_page > .title_blog { font-size: 18px !important; font-weight: 700 !important; text-transform: uppercase !important; text-align: center !important; color: #414141 !important; margin: 0 0 16px !important; padding: 0 !important; }
body .ybc_block_related_category_page .ybc_blog_content_block { width: auto !important; margin: 0 !important; }
body .ybc_block_related_category_page .slick-list { margin: 0 -10px !important; }
body .ybc_block_related_category_page .ybc_blog_content_block_item { padding: 0 10px !important; margin-bottom: 0 !important; }
body .ybc_block_related_category_page .ybc_item_img img { width: 100% !important; height: auto !important; border-radius: 15px; }
body .ybc_block_related_category_page .ybc_title_block { display: block; font-size: 15px !important; font-weight: 700 !important; text-transform: none !important; line-height: 1.35 !important; margin-top: 9px !important; color: #414141; }
body .ybc_block_related_category_page .blog_description { font-size: 14px; line-height: 24px; }

/* v8 (13.11.): Instagram-Teilen-Knopf auf Wissen-Beitraegen (Styles wie ps_sharebuttons.tpl) */
.social-sharing li.wp-instagram{position:relative;background-size:1.25rem 1.25rem;background-position:center}
.social-sharing li.wp-instagram.icon-gray{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23acaaa6' d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 01-1.38-.9 3.7 3.7 0 01-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.31-1.46.72-2.13 1.38A5.9 5.9 0 00.63 4.14C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.31.79.72 1.46 1.38 2.13a5.9 5.9 0 002.13 1.38c.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.9 5.9 0 002.13-1.38 5.9 5.9 0 001.38-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.9 5.9 0 00-1.38-2.13A5.9 5.9 0 0019.86.63C19.1.33 18.22.13 16.95.07 15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 100 12.32 6.16 6.16 0 000-12.32zM12 16a4 4 0 110-8 4 4 0 010 8zm6.4-11.85a1.44 1.44 0 100 2.88 1.44 1.44 0 000-2.88z'/%3E%3C/svg%3E")}
.social-sharing li.wp-instagram.icon-gray:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e4405f' d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 01-1.38-.9 3.7 3.7 0 01-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.31-1.46.72-2.13 1.38A5.9 5.9 0 00.63 4.14C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.31.79.72 1.46 1.38 2.13a5.9 5.9 0 002.13 1.38c.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.9 5.9 0 002.13-1.38 5.9 5.9 0 001.38-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.9 5.9 0 00-1.38-2.13A5.9 5.9 0 0019.86.63C19.1.33 18.22.13 16.95.07 15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 100 12.32 6.16 6.16 0 000-12.32zM12 16a4 4 0 110-8 4 4 0 010 8zm6.4-11.85a1.44 1.44 0 100 2.88 1.44 1.44 0 000-2.88z'/%3E%3C/svg%3E")}
.social-sharing li.wp-instagram.wp-copied::after{content:"Link kopiert – in Instagram einfügen";position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;padding:4px 8px;border-radius:6px;background:#414141;color:#fff;font-size:12px;line-height:1.2;z-index:5}

/* v9 (13.11.): Karussell „Ähnliche Beiträge“ links und rechts gleicher Abstand (slick-list um die negativen Ränder verbreitern) */
body.ybc-blog .wp-blog-box > .ybc-blog-related-posts .slick-list, body .ybc_block_related_category_page .slick-list { width: calc(100% + 20px) !important; max-width: none !important; }

/* v10 (13.11.): Beitragskarten überall gleich hoch – Titel max. 3 Zeilen, Text max. 4 Zeilen (mit …), „weiterlesen“ auf gleicher Höhe */
body .post-wrapper .ybc_title_block,
body .ybc-blog-related-posts .ybc_title_block,
body .ybc_block_related_category_page .ybc_title_block {
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  line-height: 1.35 !important; min-height: 4.05em; }
body .post-wrapper .blog_description,
body .ybc-blog-related-posts .blog_description,
body .ybc_block_related_category_page .blog_description {
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  line-height: 24px !important; min-height: 96px; max-height: 96px; }
body .post-wrapper .blog_description p,
body .ybc-blog-related-posts .blog_description p,
body .ybc_block_related_category_page .blog_description p { display: inline; margin: 0 !important; }

/* v10 (13.11.): Produkt-Slider („Vielleicht gefällt Ihnen auch“, „… in der gleichen Kategorie“) bündig mit den übrigen Kästchen; Karten füllen ihre Spalte */
body .wp-row-track { padding-left: 0 !important; padding-right: 0 !important; }
body .wp-row-track .thumbnail-container { width: 100% !important; max-width: none !important; }
body .wp-row-track .thumbnail-top, body .wp-row-track .product-thumbnail, body .wp-row-track .product-description { width: 100% !important; max-width: none !important; }
body .wp-row-track .product-thumbnail img { width: 100% !important; height: auto !important; }
/* Pfeile: senkrecht auf Bildmitte (setzt wp-slider.js), seitlich innerhalb der Karten */
body .wp-row-btn.wp-prev { left: 8px; }
body .wp-row-btn.wp-next { right: 8px; }

/* v10 (13.11.): Kategorieseite – Produktraster bündig mit Kopf, Paginierung und „Ähnliche Beiträge“ */
@media (min-width: 992px) {
  body #js-product-list .products { margin-left: 0 !important; margin-right: 0 !important; gap: 16px; }
  body #js-product-list .products > .product-miniature, body #js-product-list .products > .js-product-miniature { flex: 0 0 calc((100% - 32px) / 3) !important; max-width: calc((100% - 32px) / 3) !important; width: auto !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  body #js-product-list .products .thumbnail-container { width: 100% !important; max-width: none !important; }
  body #js-product-list .products .thumbnail-top, body #js-product-list .products .product-thumbnail, body #js-product-list .products .product-description { width: 100% !important; max-width: none !important; }
  body #js-product-list .products .product-thumbnail img { width: 100% !important; height: auto !important; }
  body #js-product-list-top { margin-left: 0 !important; margin-right: 0 !important; }
}
body .post-wrapper .ybc_item_img img, body .ybc-blog-related-posts .ybc_item_img img, body .ybc_block_related_category_page .ybc_item_img img { aspect-ratio: 260 / 180; object-fit: cover; width: 100% !important; height: auto !important; }

/* v11 (13.11.): Vorschau-Box über die volle Kartenbreite; im Ruhezustand unsichtbar, beim Hover bündig über der Beschreibung */
html body .product-miniature .thumbnail-container .highlighted-informations,
html body #wrapper .product-miniature .thumbnail-container .highlighted-informations,
html body #wrapper .hc-products-list .product-miniature .thumbnail-container .highlighted-informations {
  left: 0 !important; right: 0 !important; width: auto !important; top: auto !important; bottom: var(--wp-hi-b, 120px) !important;
  border-radius: 15px 15px 0 0 !important; z-index: 2; opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .2s, transform .2s, visibility 0s linear .2s !important; }
html body .product-miniature .thumbnail-container:hover .highlighted-informations,
html body #wrapper .product-miniature .thumbnail-container:hover .highlighted-informations,
html body #wrapper .hc-products-list .product-miniature .thumbnail-container:hover .highlighted-informations,
html body #wrapper .product-miniature .thumbnail-container:focus-within .highlighted-informations {
  bottom: var(--wp-hi-b, 120px) !important; opacity: 1; visibility: visible; transform: none;
  transition: opacity .2s, transform .2s, visibility 0s !important; }

/* v12 (13.11.): Wissen-Übersicht/Kategorie – Sortierfeld rechtsbündig */
body #js-post-list-top { display: flex !important; justify-content: flex-end !important; margin-left: 0 !important; margin-right: 0 !important; }
body #js-post-list-top > .total-products { display: none !important; }
body #js-post-list-top > div:last-child { flex: 0 0 auto !important; max-width: none !important; width: auto !important; padding-right: 0 !important; }
body #js-post-list-top > div:last-child > .row { display: flex !important; align-items: center; justify-content: flex-end; flex-wrap: nowrap; margin: 0 !important; gap: 12px; }
body #js-post-list-top .sort-by, body #js-post-list-top .products-sort-order { flex: 0 0 auto !important; max-width: none !important; width: auto !important; padding: 0 !important; text-align: right; }

/* v13 (13.11.): Vorschau-Box waechst mit den Farbvarianten mit; Sortierfeld unter dem Kategoriebild */
html body #wrapper .product-miniature .thumbnail-container .highlighted-informations, html body .product-miniature .thumbnail-container .highlighted-informations { height: auto !important; min-height: 50px; padding-bottom: 6px !important; }
body #js-post-list-top { clear: both !important; width: 100% !important; margin-bottom: 16px !important; }