/* printabell – Gestaltung laut docs/design/printabell-design.md
   Grundlagen (Schrift, Größen, Kopfbereich, Seitentitel) setzt woo/bin/design.sh über Kadence-Einstellungen.
   Hier nur, was Kadence/Germanized nicht per Einstellung können. */

/* Farben: Kadence-Palette */
:root {
  --global-palette1: #7b1e3a; /* Bordeaux – Buttons, Links, Preise */
  --global-palette2: #5e1630; /* Bordeaux dunkel – Hover, Fokus */
  --global-palette3: #2b2326; /* Tinte – Text, Überschriften */
  --global-palette4: #2b2326;
  --global-palette5: #6b6266; /* Schiefer – Nebentext */
  --global-palette6: #9a9195;
  --global-palette7: #f8f4f5; /* Hauch – Flächen */
  --global-palette8: #fbf9fa;
  --global-palette9: #ffffff;
  --pb-line: #e7dfe2;
}

/* Logo statt Seitenname */
.site-branding .site-title-wrap { display: none; }

/* Kopfbereich: Symbole (Instagram, Konto, Merkzettel) mit Abstand, Farbe wie Suche und Warenkorb */
.printabell-header-links { display: inline-flex; align-items: center; gap: 4px; }
.printabell-header-link { display: inline-flex; padding: 8px; color: var(--global-palette3); }
.printabell-header-link:hover { color: var(--global-palette1); }

/* Fokus sichtbar */
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--global-palette2); outline-offset: 2px; }

/* Textseiten (Rechtstexte, Über uns, Kontakt): lesbare Zeilenlänge, Spalte samt Titel mittig.
   body.page statt .page – Kadence setzt .page auch am Artikel. Shop-Seiten (Warenkorb, Kasse, Konto) bleiben breit. */
body.page:not(.home):not(.woocommerce-page) .content-container { max-width: calc(760px + 2 * var(--global-content-edge-padding, 1.5rem)); }

/* 404: ohne Karte */
.error404 .content-bg, .error404 .entry.content-bg { background: none; box-shadow: none; padding-left: 0; padding-right: 0; }

/* Handy-Menü hell statt schwarz */
#mobile-drawer .drawer-inner { background: var(--global-palette9); color: var(--global-palette3); }
#mobile-drawer .drawer-inner a, #mobile-drawer .drawer-header .drawer-toggle { color: var(--global-palette3); }
#mobile-drawer .mobile-navigation ul li > a, #mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap > a { font-size: 18px; padding-top: 12px; padding-bottom: 12px; }
#mobile-drawer .mobile-navigation ul li > a, #mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap { border-bottom-color: var(--pb-line); }
#mobile-drawer .mobile-navigation .drawer-sub-toggle { color: var(--global-palette3); border-left-color: var(--pb-line); }
#mobile-drawer .mobile-navigation ul ul li > a, #mobile-drawer .mobile-navigation ul ul .drawer-nav-drop-wrap > a { font-size: 16px; }
#mobile-drawer .drawer-inner a:hover, #mobile-drawer .current-menu-item > a { color: var(--global-palette1); }

/* Brotkrumen und Seitentitel im Inhalt */
.woocommerce-breadcrumb, .kadence-breadcrumbs { font-size: 14px; color: var(--global-palette5); }
.entry-hero, .page-title { text-align: left; }

/* Buttons: normale Schreibweise, kein Pfeil, ausreichend groß */
.button, button, input[type="submit"], .wp-block-button__link {
  text-transform: none; letter-spacing: normal; min-height: 44px;
}
.woocommerce ul.products li.product .button .kadence-svg-iconset,
.woocommerce ul.products li.product .product-action-wrap .kadence-svg-iconset { display: none; }

/* Formulare: volle Breite, ruhige Rahmen */
.printabell-contact-form input[type="text"], .printabell-contact-form input[type="email"], .printabell-contact-form textarea {
  width: 100%; max-width: 100%;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], textarea, select {
  border: 1px solid var(--pb-line); border-radius: 4px;
}

/* Produktkacheln: Titel, Preis in Bordeaux, Pflichtangaben klein als eine Zeile, Aktion als Textlink */
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-weight: 500; font-size: 17px; }
.woocommerce ul.products li.product .price { color: var(--global-palette1); font-weight: 500; margin-bottom: 2px; }
.woocommerce ul.products li.product .product-action-wrap { margin-top: 2px; }
.woocommerce ul.products li.product .wc-gzd-additional-info-loop {
  display: inline; font-size: 13px; color: var(--global-palette5); margin: 0; line-height: 1.5;
}
.woocommerce ul.products li.product .wc-gzd-additional-info-loop.tax-info::after { content: ", "; }
.woocommerce ul.products li.product .wc-gzd-additional-info-loop.shipping-costs-info::after { content: ""; display: block; margin-bottom: 8px; }
.woocommerce ul.products li.product .product-action-wrap .button { text-transform: none; font-weight: 500; letter-spacing: 0; }

/* Kategorie-Einleitung als ruhige Fläche statt Text im Titelbalken */
.term-description { background: var(--global-palette7); padding: 24px; border-radius: 4px; max-width: 760px; }

/* Produktseite: Preis, Tabs mit Unterstreichung statt grauer Kästen */
.single-product div.product p.price, .single-product div.product span.price { color: var(--global-palette1); font-size: 22px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--global-palette1); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--pb-line); }

/* Gewährleistungshinweis auf der Produktseite: dezenter Textlink über Artikelnummer und Kategorie */
.printabell-legal-guarantee-link { margin: 0 0 10px; font-size: 13px; }
.printabell-legal-guarantee-link a.wc-gzd-popover-trigger { color: var(--global-palette5); }

/* Inhaltsbilder (Über uns) nicht bildschirmfüllend */
.printabell-image img { max-height: 520px; width: 100%; object-fit: cover; border-radius: 4px; }

/* Desktop-Aufklappmenü hell statt dunkel */
.header-navigation .header-menu-container ul ul.sub-menu, .header-navigation .header-menu-container ul ul.submenu {
  background: var(--global-palette9); border: 1px solid var(--pb-line); box-shadow: 0 8px 24px rgba(43, 35, 38, 0.08);
}
.header-navigation .header-menu-container ul ul li.menu-item > a { color: var(--global-palette3); font-size: 15px; border-bottom-color: var(--pb-line); }
.header-navigation .header-menu-container ul ul li.menu-item > a:hover, .header-navigation .header-menu-container ul ul li.current-menu-item > a { color: var(--global-palette1); background: var(--global-palette7); }

/* Footer: vier Spalten mit Überschriften, linksbündig */
.site-footer .site-middle-footer-inner-wrap { align-items: start; }
.site-footer .widget-title, .site-footer h3.wp-block-heading { font-size: 18px; font-weight: 500; margin: 0 0 12px; }
.site-footer .footer-navigation::before, .site-footer .footer-social-wrap::before {
  display: block; font-size: 18px; font-weight: 500; margin: 0 0 12px; color: var(--global-palette3);
}
.site-footer .footer-navigation::before { content: "Rechtliches"; }
.site-footer .footer-social-wrap::before { content: "Folge uns"; }
.site-footer .footer-navigation { display: block; }
.site-footer .footer-navigation .footer-menu-container > ul { flex-direction: column; align-items: flex-start; }
.site-footer .footer-navigation .footer-menu-container > ul > li > a { padding: 3px 0 !important; color: var(--global-palette3); } /* Kadence setzt 10 px Innenabstand per Customizer-CSS */
.site-footer .footer-navigation, .site-footer .footer-social-wrap, .site-footer .footer-widget-area { text-align: left; justify-content: flex-start; }
.site-footer .footer-social-wrap .footer-social-inner-wrap { justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: 8px; }
.site-footer a:hover { color: var(--global-palette1); }
/* Tablet: Kadence kennt für 4 Spalten nur nebeneinander oder untereinander – hier 2 × 2 */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-footer .site-middle-footer-inner-wrap.site-footer-row-columns-4 { grid-template-columns: 1fr 1fr; }
}

/* Newsletter-Formular im Footer */
.site-footer div.tnp-subscription { max-width: 100%; margin: 0; } /* Plugin setzt 500 px + margin auto (zentriert) */
.tnp-subscription input.tnp-email { background: var(--global-palette9); border: 1px solid var(--pb-line); border-radius: 4px; }
.tnp-subscription input.tnp-submit { background: var(--global-palette1); border-radius: 4px; min-height: 44px; font-weight: 500; }
.tnp-subscription input.tnp-submit:hover { background: var(--global-palette2); }
.tnp-subscription label { font-size: 14px; }
.tnp-subscription .tnp-privacy-field label { font-size: 13px; color: var(--global-palette5); }

/* Unter dem Footer: „Vertrag widerrufen“ (Gewährleistungshinweis steht seit 11.11.2026 auf der Produktseite) */
.eu-owb-order-withdraw-from-contract-button { margin: 16px auto; }

/* Startseite: wechselnde Titelbilder wie im alten Shop (Originale 1160 × 410, daher Inhaltsbreite statt bildschirmbreit),
   darüber Überschrift und Weg in den Shop. Verhalten in slider.js */
.home .content-area { margin-top: 0; }
.home .entry-content > *:first-child { margin-top: 24px; }
.printabell-hero { position: relative; aspect-ratio: 1160 / 410; border-radius: 4px; overflow: hidden; display: grid; }
.printabell-slider { position: absolute; inset: 0; }
.printabell-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.printabell-slide.is-active { opacity: 1; }
.printabell-slide img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.printabell-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Schrift dezent links unten (seit 11.11.2026): Abdunklung nur in dieser Ecke, das Bild bleibt hell */
  background: linear-gradient(to top right, rgba(43, 35, 38, 0.6), rgba(43, 35, 38, 0) 55%); }
.printabell-hero__text { position: relative; z-index: 2; align-self: end; justify-self: start; text-align: left; color: #fff; padding: 0 32px 28px; max-width: 760px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
.printabell-hero__text h1 { color: #fff; font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; line-height: 1.2; margin: 0 0 14px; }
.printabell-hero__text p { font-size: clamp(16px, 1.8vw, 19px); margin: 0 0 20px; }
.printabell-hero__button { padding: 10px 22px; font-size: 15px; text-shadow: none; }
.printabell-slider__prev, .printabell-slider__next { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; border: 0; font-size: 28px; line-height: 1;
  background: rgba(255, 255, 255, 0.85); color: var(--global-palette3); cursor: pointer; }
.printabell-slider__prev { left: 16px; } .printabell-slider__next { right: 16px; }
.printabell-slider__prev:hover, .printabell-slider__next:hover { background: #fff; color: var(--global-palette1); }
.printabell-slider__dots { position: absolute; z-index: 3; bottom: 14px; right: 16px; display: flex; gap: 2px; }
.printabell-slider__dot { width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.printabell-slider__dot::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.printabell-slider__dot[aria-current="true"]::before { background: #fff; inset: 7px; }
@media (max-width: 767px) {
  .printabell-hero { aspect-ratio: 4 / 3; }
  .printabell-hero__text { padding: 0 16px 16px; }
  .printabell-hero__text h1 { font-size: 18px; margin-bottom: 10px; }
  .printabell-slider__prev, .printabell-slider__next { display: none; } /* auf dem Handy wischen */
  .printabell-slider__dots { right: 50%; transform: translateX(50%); bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) { .printabell-slide { transition: none; } }

/* Kategorie-Kacheln: quadratisch, Titel auf dem Bild */
.printabell-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 40px 0 64px; }
.printabell-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 4px; }
.printabell-tile img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .4s ease; }
.printabell-tile:hover img { transform: scale(1.04); }
.printabell-tile span { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 16px 14px; color: #fff; font-size: 18px; font-weight: 500;
  background: linear-gradient(to top, rgba(43, 35, 38, 0.6), transparent); }
@media (max-width: 1024px) { .printabell-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
  .printabell-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 24px 0 40px; }
  .printabell-tile span { font-size: 16px; padding: 24px 12px 10px; }
  /* ungerade Anzahl: letzte Kachel über die volle Breite statt allein in der Zeile */
  .printabell-tile:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
}

/* Instagram-Bereich */
.printabell-instagram { width: 100vw; margin: 64px 0 0 calc(50% - 50vw); padding: 56px 24px; background: var(--global-palette7); text-align: center; }
.printabell-instagram h2 { margin: 0 0 8px; }
.printabell-instagram p { color: var(--global-palette5); margin: 0 auto 28px; max-width: 560px; }
.printabell-instagram p a { color: var(--global-palette1); font-weight: 500; }
.printabell-instagram__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 1200px; margin: 0 auto 28px; }
.printabell-instagram__grid a { display: block; aspect-ratio: 1; overflow: hidden; }
.printabell-instagram__grid img { width: 100% !important; height: 100% !important; object-fit: cover; }
@media (max-width: 767px) { .printabell-instagram__grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } .printabell-instagram { padding: 40px 16px; } }

/* Vorrats-Hinweis klein */
.printabell-home-note { font-size: 14px; color: var(--global-palette5); text-align: center; margin: 32px auto 0; max-width: 760px; }

/* Bewertungen als Herzen wie im alten Shop (nur Optik; Bewertungslogik bleibt WooCommerce) */
.woocommerce .star-rating, .star-rating {
  --pb-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.5S1.5 15 1.5 7.6A5.6 5.6 0 0 1 12 4.4a5.6 5.6 0 0 1 10.5 3.2C22.5 15 12 21.5 12 21.5z'/%3E%3C/svg%3E");
  position: relative; display: inline-block; width: 5.75em; height: 1em; font-size: 15px; line-height: 1; overflow: hidden; font-family: inherit; color: transparent; }
.woocommerce .star-rating::before, .star-rating::before {
  content: "" !important; position: absolute; inset: 0; background: #d9cfd3; float: none;
  -webkit-mask: var(--pb-heart) 0 0 / 1.15em 1em repeat-x; mask: var(--pb-heart) 0 0 / 1.15em 1em repeat-x; }
.woocommerce .star-rating span, .star-rating span { position: absolute; inset: 0 auto 0 0; overflow: hidden; padding-top: 1.5em; }
.woocommerce .star-rating span::before, .star-rating span::before {
  content: "" !important; position: absolute; top: 0; left: 0; width: 5.75em; height: 1em; background: var(--global-palette1);
  -webkit-mask: var(--pb-heart) 0 0 / 1.15em 1em repeat-x; mask: var(--pb-heart) 0 0 / 1.15em 1em repeat-x; }
.woocommerce ul.products li.product .star-rating { margin: 4px 0 6px; }
/* Kachel: Herzen und kurzer Hinweis „geprüft“ in einer Zeile */
.woocommerce ul.products li.product .star-rating { float: none; display: inline-block; vertical-align: middle; margin: 4px 0 6px; }
.woocommerce ul.products li.product .wc-gzd-rating-authenticity-status { display: inline-block; vertical-align: middle; margin: 4px 0 6px 8px; font-size: 13px; }
.woocommerce ul.products li.product .wc-gzd-rating-authenticity-status a { color: var(--global-palette5); }