/* ==========================================================================
   POS-cashservice — Angleichung an pos-cashservice.de
   Lädt nach pos-shop.css und überschreibt gezielt:
   - Überschriften dunkel statt blau (#1C1E21 wie Hauptseite)
   - Buttons eckiger (8px); Blau = Standard, Orange + dunkle Schrift = Kauf-CTA
   - Creme-Flächen (#FBEEDA) und Orange-Ringe als Markenelement
   - Preise in Blau (Orange-Text auf Weiß hat zu wenig Kontrast)
   - Heller Footer (#F5F5F5) wie auf der Hauptseite
   Entfernen dieser Datei = altes Shop-Design.
   ========================================================================== */

:root {
  --fg-1: #1C1E21;
  --fg-2: #646A73;
  --cream: #FBEEDA;
  --cream-ring: #FBEEDA;
  --sky: #D8E5FD;
  --radius-btn: 8px;
}

body { color: var(--fg-1); }

/* ---------- Überschriften: dunkel wie Hauptseite ---------- */
h1, h2, h3,
.hero h1, .page-head h1, .section-head h2, .buybox h1,
.cattile h3, .summary h3, .legal-doc h2,
.pcard h3, .lcard .lcard-main h3, .hero-prod .hp-body .t,
.usp h4, .usp .pos-h4, .filter-card > h4, .filter-card > .pos-h4, .staffel-title {
  color: var(--fg-1);
}
.pcard h3 a, .lcard h3 a { color: inherit; }

/* Eyebrow → Creme-Pill wie „10.000+ zufriedene Kunden" */
.eyebrow {
  display: inline-block;
  background: var(--cream);
  color: var(--fg-1);
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
}
.finder .eyebrow, .section.brand .eyebrow { background: rgba(255,255,255,.14); color: #fff; }

/* Kicker (Kategorie über Produktname) ruhiger */
.pcard .kicker, .lcard .lcard-main .kicker { color: var(--fg-2); letter-spacing: .04em; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--radius-btn); }
.btn-primary { background: var(--pos-blue); color: #fff; }
.btn-primary:hover { background: var(--blue-600); box-shadow: none; }
.btn-ghost { background: #fff; color: var(--pos-blue); border-color: var(--pos-blue); }
.btn-ghost:hover { background: var(--blue-50); }

/* Kauf-CTAs: Orange mit dunkler Schrift (wie „Jetzt beraten lassen") */
.single_add_to_cart_button.btn,
.single_add_to_cart_button,
#place_order,
.checkout-button,
.wc-proceed-to-checkout .btn,
.summary .btn-primary {
  background: var(--pos-orange) !important;
  color: var(--fg-1) !important;
  border-color: var(--pos-orange) !important;
  border-radius: var(--radius-btn) !important;
}
.single_add_to_cart_button:hover,
#place_order:hover,
.checkout-button:hover,
.summary .btn-primary:hover { background: var(--orange-400) !important; }

/* Produktkarten: „Ansehen" als ruhiger Outline-Button */
.pcard .pcard-foot .btn-primary {
  background: #fff; color: var(--pos-blue); border-color: var(--pos-blue);
}
.pcard:hover .pcard-foot .btn-primary { background: var(--pos-blue); color: #fff; }

/* ---------- Topbar: hell statt Navy ---------- */
.utilbar { background: var(--cream); color: var(--fg-1); }
.utilbar a { color: var(--fg-1); }
.utilbar a:hover { color: var(--pos-blue); }
.utilbar svg.ic, .utilbar .usp svg.ic { color: var(--pos-orange); }
.utilbar .ub-main { font-weight: 700; color: var(--pos-blue); }

/* ---------- Header / Navigation ---------- */
.searchbar { border-radius: var(--radius-btn); }
.searchbar input { border-radius: var(--radius-btn) 0 0 var(--radius-btn); }
.searchbar button { border-radius: 0 6px 6px 0; color: var(--fg-1); }
.searchbar button svg.ic { color: var(--fg-1); }
.header .h-actions .act-label .t2 { color: var(--fg-1); }
.catnav a { border-radius: var(--radius-btn); }
.catnav a.allcats { border-radius: var(--radius-btn); }
.catnav .nav-promo { color: var(--fg-1); }
.catnav .nav-promo svg.ic { color: var(--pos-orange); }
.burger { color: var(--fg-1); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.hero::before {
  /* Orange-Ring-Deko wie auf der Hauptseite */
  content: ""; position: absolute; left: -220px; bottom: -250px;
  width: 340px; height: 340px; border: 26px solid var(--cream-ring); border-radius: 50%;
}
.hero .container { position: relative; z-index: 1; }
.hero .tick svg.ic { color: var(--pos-orange); }
.hero-panel { background: var(--cream); box-shadow: none; }
.hero-panel::after { border-color: rgba(243,146,0,.35); }
.hero-prod { box-shadow: var(--shadow-sm); }
.hero-prod .hp-body .p { color: var(--pos-blue); }

/* ---------- Bildflächen ----------
   Produktfotos haben (noch) keinen transparenten Hintergrund → weiß lassen.
   Sobald freigestellte PNGs vorliegen, hier var(--cream) setzen wie auf der Hauptseite. */
.pcard .ph, .lcard .ph, .hero-prod .ph { background: #fff; }
.ph .ph-label {
  font-family: var(--font-body); font-weight: 700; color: var(--fg-2);
  background: #fff; border: none; letter-spacing: 0;
}
.ph .ph-ring { border-color: rgba(243,146,0,.28); }

/* ---------- Preise: Blau ---------- */
.pcard .price-main, .lcard .lcard-buy .price-main,
.pdp-price .p, .pdp-price .amount, .pdp-price .woocommerce-Price-amount,
.ac-price { color: var(--pos-blue); }

/* ---------- Karten ---------- */
.pcard, .lcard, .cattile, .filter-card, .panel, .summary { border-radius: 16px; }
.pcard .staffel-hint, .lcard .staffel-hint { color: var(--fg-2); }
.pcard .staffel-hint svg.ic { color: var(--pos-orange); }
.badge-orange { color: var(--fg-1); }

/* Kategorie-Kacheln: Creme + Orange-Ring + Icon */
.cattile .ph { background: var(--cream); }
.cattile .ph .ph-ring { width: 120px; height: 120px; border: 6px solid var(--pos-orange); background: #fff; }
.cattile .ct-icon { position: relative; z-index: 1; color: var(--pos-blue); display: flex; }
.cattile .ct-icon svg.ic { width: 44px; height: 44px; stroke-width: 1.5; }
.cattile:hover .ph-ring { background: var(--blue-50); }

/* ---------- USP-Leiste ---------- */
.usp .usp-ic { background: #fff; border: 2px solid var(--pos-orange); border-radius: 50%; }

/* ---------- Finder: blaues Band wie „Unsere Produkte" ---------- */
.finder { background: var(--pos-blue); }
.finder::after { border-color: rgba(243,146,0,.55); border-width: 18px; }
.finder p { color: #dbe4f6; }
.finder .finder-form { border-radius: 12px; }
.finder .btn-primary { background: var(--pos-orange); color: var(--fg-1); }
.finder .btn-primary:hover { background: var(--orange-400); }

/* ---------- Tabs, Breadcrumb, Steps ---------- */
.tabset button.active { color: var(--fg-1); }
.breadcrumbs li[aria-current] { color: var(--fg-1); }
.viewtoggle { border-radius: var(--radius-btn); }

/* ---------- Footer: hell wie Hauptseite ---------- */
.footer { background: #F5F5F5; color: var(--fg-1); position: relative; overflow: hidden; }
.footer::after {
  content: ""; position: absolute; right: -120px; bottom: -140px;
  width: 300px; height: 300px; border: 22px solid #fff; border-radius: 50%;
}
.footer .container { position: relative; z-index: 1; }
.footer .logo img { height: 40px; }
.footer .blurb { color: var(--fg-2); }
.footer h4, .footer .pos-h4 { color: var(--fg-1); }
.footer a, .footer .addr { color: var(--fg-1); }
.footer a:hover { color: var(--pos-blue); }
.footer .pay-pill { background: #fff; color: var(--fg-1); border: 1px solid #E0E0E0; }
.footer-b2b { color: var(--fg-2); border-top-color: #E0E0E0; }
.footer .bottom { color: var(--fg-2); border-top-color: #E0E0E0; }
.footer .bottom a { color: var(--pos-blue); font-weight: 700; }

/* ---------- Mobile-Menü ---------- */
.mobile-menu a { color: var(--fg-1); }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .utilbar .ub-main { display: none; }
  .hero-stack { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-panel { padding: 14px; }
  .hero-prod .hp-body { padding: 9px 10px 11px; }
  .hero-prod .hp-body .t { font-size: 12.5px; }
  .hero-prod .hp-body .p { font-size: 16px; }
  .hero::before { display: none; }
}

/* ---------- Kontaktformular-Meldungen ---------- */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 10px; margin: 0 0 20px; font-size: 15px; line-height: 1.5; }
.form-msg svg.ic { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.form-msg-ok { background: var(--success-bg); color: var(--success); }
.form-msg-err { background: var(--error-bg); color: var(--error); }

/* ---------- Restliche Überschriften/Labels dunkel ---------- */
.co-block > h3, .form-row label, .field label, .payment_box .form-row label,
.wc_payment_method > label, .acc-q, .faq-group > h2, .cc h4, .val h3, .ns h4,
.legal-doc h2, .legal-doc h3, .confirm-hero h1, .cart-item .ci-info h4, .cart-item .ci-info h4 a,
.mini-item .mi-name, .sum-line.total .lbl, .optrow .opt-main .ot, .cstep.active .ct,
.table th, .def-table td:first-child, .order-meta .om .omv, .results-bar .rcount strong {
  color: var(--fg-1);
}
.sum-line.total .val, .cart-item .ci-price, .mini-item .mi-price { color: var(--fg-1); }
.cart-item .ci-price { white-space: nowrap; }
.co-block h3:not(:first-child), #customer_details h3 { font-size: 18px; color: var(--fg-1); }
.woocommerce-billing-fields > h3 { display: none; } /* doppelt zu „Kontakt & Lieferadresse" */
.acc-q:hover { color: var(--pos-blue); }
.select select, .woocommerce-ordering select.orderby { color: var(--fg-1); border-radius: var(--radius-btn); }
select#billing_country, select#shipping_country {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--border-2);
  border-radius: var(--radius-btn); background: #fff; font-family: var(--font-body); font-size: 15px;
}

/* Datenschutz-Checkbox: Text als ein Block */
.checkrow { display: flex; gap: 10px; align-items: flex-start; }
.checkrow input { margin-top: 3px; flex: none; }
.checkrow > span { flex: 1; }

/* Tabs auf schmalen Screens scrollbar statt abgeschnitten */
.tabset { overflow-x: auto; scrollbar-width: none; }
.tabset::-webkit-scrollbar { display: none; }
.tabset button { white-space: nowrap; flex: none; }

/* ---------- Mobile: Shop-Übersicht ---------- */
@media (max-width: 760px) {
  .results-bar { gap: 10px; }
  .results-bar .rtools { width: 100%; }
  .viewtoggle { display: none; }               /* Listenansicht auf dem Handy unnötig */
  .woocommerce-ordering, .woocommerce-ordering select.orderby { width: 100%; }
  .filters .select, .filters .select select { width: 100%; }

  /* Produkte zweispaltig, kompakter */
  .product-grid, .product-grid.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .pcard-body { padding: 12px 12px 14px; }
  .pcard .kicker { display: none; }
  .pcard h3 { font-size: 14px; }
  .pcard .compat { font-size: 11.5px; margin-bottom: 8px; }
  .pcard .priceblock { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 10px; }
  .pcard .price-main { font-size: 20px; }
  .pcard .price-meta { text-align: left; }
  .pcard .pcard-foot .btn { padding: 10px 8px; font-size: 13.5px; }
  .pcard .pcard-foot .btn svg.ic { display: none; }
  .pcard .ph .ph-label { font-size: 10px; text-align: center; }

  .cat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .cattile .ct-body { padding: 14px; }
  .cattile h3 { font-size: 16px; }
  .cattile p { display: none; }
  .cattile .ph .ph-ring { width: 84px; height: 84px; border-width: 5px; }
  .cattile .ct-icon svg.ic { width: 32px; height: 32px; }
}

/* Warenkorb: Mengen-Stepper nie zusammendrücken */
.cart-item .ci-right .quantity { flex: none; }
.cart-item .ci-right .quantity input.qty { width: 44px; min-width: 44px; }
@media (max-width: 760px) {
  .cart-item .ci-right { flex-wrap: wrap; gap: 10px; }
  .cart-item .ci-price { font-size: 18px; }
  /* FAQ-Banner „Frage nicht beantwortet?" untereinander statt gequetscht */
  .finder .finder-in[style] { grid-template-columns: 1fr !important; gap: 16px !important; }
  .finder .finder-in[style] > div:first-child:has(> svg) { display: none; }
}

/* ---------- Mobile: Touch & iOS ---------- */
@media (max-width: 760px) {
  /* ≥16px verhindert das automatische Hineinzoomen von iOS beim Antippen */
  input, select, textarea,
  .select select, .woocommerce-ordering select.orderby,
  .searchbar input, .finder .finder-form .select select { font-size: 16px !important; }
  /* Größere Tippflächen */
  .utilbar .ub { padding: 8px 0; }
  .checkrow input[type="checkbox"] { width: 22px; height: 22px; }
}

/* ---------- Logo mit Zusatz „zubehörshop": größer, damit die Unterzeile lesbar bleibt ---------- */
.header .logo img { height: 52px; }
@media (max-width: 680px) { .header .logo img { height: 42px; } }
.mobile-menu .mm-head img { height: 42px; }

/* ---------- Kasse: Zahlungsarten als Schritt links ---------- */
/* Auswahlpunkt neben dem Namen statt darüber (input und label sind Geschwister) */
.wc_payment_method { display: grid; grid-template-columns: 16px 1fr; column-gap: 10px; align-items: center; }
.wc_payment_method > .payment_box { grid-column: 1 / -1; padding-left: 26px; }
#payment-block .wc_payment_methods { margin-bottom: 0; }
#payment-block #payment { background: none; padding: 0; }
.checkout-summary .wc-gzd-checkbox-placeholder:first-child, .checkout-summary .sum-foot > #order_review > :first-child { margin-top: 0; }
/* Eigener Auswahlpunkt statt Browser-Radio (accent-color in Orange wirkte „innen größer als außen") –
   gleiche Optik wie .optrow .radio */
.wc_payment_method input[type="radio"] {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin: 0; border-radius: 999px;
  border: 2px solid var(--border-2); background: #fff; cursor: pointer;
  display: grid; place-content: center;
}
.wc_payment_method input[type="radio"]::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: var(--pos-orange); transform: scale(0); transition: transform var(--dur-fast);
}
.wc_payment_method input[type="radio"]:checked { border-color: var(--pos-orange); }
.wc_payment_method input[type="radio"]:checked::before { transform: scale(1); }
.wc_payment_method input[type="radio"]:focus-visible { outline: 2px solid var(--pos-blue); outline-offset: 2px; }
.wc_payment_method { grid-template-columns: 18px 1fr; }

/* ---------- Ratgeber-/SEO-Texte (Startseite, Kategorien) und Produktbeschreibung ---------- */
.seo-text { max-width: 820px; }
.prose h2 { font-size: 22px; line-height: 1.3; color: var(--fg-1); margin: 28px 0 10px; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; color: var(--fg-1); }
.prose a { color: var(--pos-blue); text-decoration: underline; text-underline-offset: 2px; }
/* Aufzählungen ohne eigenes Icon bekommen einen orangen Punkt */
.prose ul { gap: 6px; }
.prose ul li:not(:has(svg))::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--pos-orange); margin-top: 10px; flex: none;
}

/* 404 */
.notfound-search { margin: 0 0 8px; }
.notfound-h2 { font-family: var(--font-display); font-size: 24px; margin: 0 0 18px; }
.notfound-help { margin: 28px 0 0; color: var(--fg-2); }
.notfound-help a { font-weight: 600; }
/* Lange Kategorienamen in schmalen Kacheln sauber trennen („Terminal-halterung“) */
.cattile h3 { hyphens: auto; -webkit-hyphens: auto; }
/* Zahlungsarten im Footer: Logos und Textpillen auf einer Höhe */
.footer .pay-row { align-items: center; }
.footer .pay-pill { height: 28px; display: inline-flex; align-items: center; box-sizing: border-box; }
.footer .pay-logo { height: 28px; width: auto; display: block; }
/* Versanddienstleister im Footer: Logos in weißen Chips wie die Zahlungs-Pillen */
.footer .ship-label { margin: 14px 0 8px; font-size: 12px; color: var(--fg-2); }
.footer .ship-chip { height: 28px; padding: 0 8px; display: inline-flex; align-items: center; background: #fff; border: 1px solid #E0E0E0; border-radius: 6px; box-sizing: border-box; }
.footer .ship-chip img { display: block; width: auto; max-height: 20px; }