/*
Datei:   css/g-shop.css
Zweck:   Shop, Warenkorb, Kasse und Rechtsseiten in der Bildsprache des Buches.
Warum:   Die Divi-Standardausgabe von WooCommerce hat mit der Teichwelt nichts
         zu tun — andere Schrift, andere Farben, Seitenleiste. Diese Datei
         holt die Seiten in dasselbe Bild, ohne die Startseite anzufassen.
*/

/* Die Gestaltungswerte liegen sonst auf .dbzdf (Sektionsklasse der
   Startseite). Im Shop gibt es diese Sektionen nicht — deshalb hier
   dieselben Werte am Seitenkoerper. */
body.quint-shop{
  --f-creme:#FAF3E3; --f-creme-hell:#FFFBF0; --f-papier:#F4E9D2;
  --f-navy:#16323F; --f-tinte:#22404C;
  --f-petrol:#1E4B44; --f-petrol-tief:#173C36;
  --f-wasser:#245F57; --f-wasser-mittel:#2C6F66; --f-wasser-hell:#4E9A8C;
  --f-gruen:#7FA65B; --f-gruen-tief:#5B7F3F; --f-gruen-hell:#9CC06E;
  --f-gold:#D9A441; --f-gold-hell:#EDBB5E; --f-gold-blass:#F6D89A;
  --f-display:"Baloo 2",sans-serif; --f-hand:"Caveat",cursive;
  --f-radius:20px;
  --f-schatten:0 14px 30px -18px rgba(22,50,63,.45);
  --f-schatten-tief:0 26px 50px -26px rgba(22,50,63,.55);
  background:var(--f-creme);
}
body.quint-shop #main-content{background:var(--f-creme)}
body.quint-shop #main-content .container{padding-top:clamp(34px,4vw,58px)}
body.quint-shop #main-content .container::before{display:none}   /* Divis Trennlinie zur Seitenleiste */
body.quint-shop #sidebar,body.quint-shop .et_pb_widget_area{display:none}
body.quint-shop #left-area{width:100%;padding-right:0;padding-bottom:clamp(40px,5vw,72px)}

/* Nur der Inhaltsbereich. Kopf- und Fusszeile kommen aus dem Theme
   Builder und liegen ausserhalb von #main-content — greift die Typografie
   auf den Seitenkoerper zu, faerbt sie die weissen Fussueberschriften
   tintenblau auf tintenblauem Grund. Genau das war passiert. */
body.quint-shop #main-content h1,body.quint-shop #main-content h2,
body.quint-shop #main-content h3,body.quint-shop #main-content h4,
body.quint-shop #main-content h5{font-family:var(--f-display);color:var(--f-navy);font-weight:800}
body.quint-shop #main-content h1{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.15;margin-bottom:.4em}
body.quint-shop #main-content h2{font-size:clamp(1.3rem,2vw,1.7rem);margin:1.6em 0 .5em}
body.quint-shop #main-content,body.quint-shop #main-content p,
body.quint-shop #main-content li,body.quint-shop #main-content td{
  font-family:"Nunito Sans",sans-serif;color:var(--f-tinte);line-height:1.68}
body.quint-shop #main-content a{color:var(--f-wasser-mittel)}
body.quint-shop #main-content a:hover{color:var(--f-gruen-tief)}

/* ---------- Produktliste ---------- */
.quint-shop ul.products{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.6vw,32px);margin:0;padding:0;list-style:none}
.quint-shop ul.products::before,.quint-shop ul.products::after{display:none}
.quint-shop ul.products li.product{width:auto !important;margin:0 !important;float:none !important;
  background:#fff;border:1px solid rgba(30,75,68,.1);border-radius:var(--f-radius);
  padding:16px 16px 20px;box-shadow:var(--f-schatten);display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease}
.quint-shop ul.products li.product:hover{transform:translateY(-3px);box-shadow:var(--f-schatten-tief)}
.quint-shop ul.products li.product img{border-radius:14px;margin-bottom:14px;background:var(--f-creme)}
.quint-shop ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--f-display) !important;font-weight:700 !important;
  font-size:1.06rem !important;color:var(--f-petrol) !important;padding:0 !important;margin:0 0 6px}
.quint-shop ul.products li.product .price{color:var(--f-navy) !important;
  font-family:var(--f-display);font-weight:700;font-size:1.22rem;margin-bottom:2px}
.quint-shop ul.products li.product .price del{opacity:.5;font-size:.85em;font-weight:500}
.quint-shop .wc-gzd-additional-info{font-size:.82rem;color:#5F726D;line-height:1.45;margin:0}
.quint-shop .wc-gzd-additional-info a{color:#5F726D;text-decoration:underline}
.quint-shop ul.products li.product .button{margin-top:auto}
.quint-shop ul.products li.product .star-rating{display:none}
@media(max-width:900px){.quint-shop ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.quint-shop ul.products{grid-template-columns:1fr}}

/* ---------- Schaltflächen ---------- */
.quint-shop .button,.quint-shop button.button,.quint-shop input.button,
.quint-shop a.button,.quint-shop .woocommerce-button,
body.quint-shop #main-content .woocommerce a.button.alt{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-display) !important;font-weight:700 !important;font-size:.98rem !important;
  background:linear-gradient(150deg,var(--f-gruen-hell),var(--f-gruen-tief)) !important;
  color:#fff !important;border:0 !important;border-radius:999px !important;
  padding:12px 26px !important;line-height:1.25 !important;
  box-shadow:0 12px 24px -14px rgba(63,101,41,.9);
  transition:transform .18s ease,box-shadow .18s ease}
.quint-shop .button:hover,.quint-shop button.button:hover,.quint-shop a.button:hover{
  transform:translateY(-2px);color:#fff !important}
.quint-shop .button.alt,.quint-shop button.alt,
.quint-shop .checkout-button,.quint-shop #place_order{
  background:linear-gradient(150deg,var(--f-gold-hell),var(--f-gold)) !important;
  color:#33240A !important;box-shadow:0 14px 26px -14px rgba(160,110,20,.95)}
.quint-shop .button:disabled,.quint-shop .button.disabled{opacity:.45;transform:none}

/* ---------- Einzelnes Produkt ---------- */
/* Divi haengt die Produktklasse auch an seine eigenen Huellen — deshalb
   nicht div.product ansprechen, sondern den Produktbeitrag selbst. Bild
   und Angaben liegen darin gemeinsam in einem .clearfix. */
.quint-shop .product.type-product > .clearfix{display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(26px,4vw,60px);align-items:start}
.quint-shop .product.type-product .woocommerce-product-gallery{width:100% !important;float:none !important;margin:0}
/* WooCommerce blendet beim Ueberfahren ein zweites Bild (.zoomImg) in den
   Link ein. Ohne Radius und ohne overflow am Link laege es eckig ueber dem
   runden Bild — die Rundung schien zu verschwinden. */
.quint-shop .product.type-product .woocommerce-product-gallery__image,
.quint-shop .product.type-product .woocommerce-product-gallery__image > a{
  display:block;border-radius:var(--f-radius);overflow:hidden}
.quint-shop .product.type-product .woocommerce-product-gallery img{border-radius:var(--f-radius);
  background:var(--f-creme);box-shadow:var(--f-schatten)}
.quint-shop .product.type-product .summary{width:100% !important;float:none !important;margin:0}
.quint-shop .product.type-product .product_title{margin:0 0 10px}
.quint-shop .product.type-product .summary .price{font-family:var(--f-display);font-weight:800;
  color:var(--f-navy) !important;font-size:clamp(1.6rem,2.6vw,2.1rem);margin:0 0 6px}
.quint-shop .product.type-product .woocommerce-product-details__short-description{
  font-size:1.05rem;color:var(--f-tinte);margin:16px 0 22px;max-width:46ch}
.quint-shop .product.type-product form.cart{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:20px 0}
.quint-shop .product.type-product .quantity input{width:82px;padding:11px 10px;border-radius:12px;
  border:1px solid rgba(30,75,68,.22);background:#fff;font-family:var(--f-display);font-weight:700;
  text-align:center;color:var(--f-navy)}
.quint-shop .product.type-product .product_meta{font-size:.86rem;color:#5F726D;
  border-top:1px solid rgba(30,75,68,.12);padding-top:14px;margin-top:6px}
/* ---------- Produktbeschreibung in Reitern -----------------------------
   Divis Ausgabe lief ueber die volle Inhaltsbreite: 137 Zeichen pro Zeile
   bei 14 px Schrift. Lesbar sind 60 bis 75. Der Text bekommt deshalb eine
   eigene Spaltenbreite, die Reiter Abstand zum Feld, die Zwischentitel Luft. */
.quint-shop .woocommerce-tabs{margin-top:clamp(34px,4.5vw,60px)}
.quint-shop .woocommerce-tabs ul.tabs{padding:0 !important;margin:0 0 18px !important;
  display:flex;gap:10px;flex-wrap:wrap;border:0 !important;list-style:none}
.quint-shop .woocommerce-tabs ul.tabs::before,
.quint-shop .woocommerce-tabs ul.tabs::after{display:none !important}
.quint-shop .woocommerce-tabs ul.tabs li{background:#fff !important;
  border:1px solid rgba(30,75,68,.16) !important;border-radius:999px !important;
  margin:0 !important;padding:0 !important;box-shadow:none !important;
  transition:background .18s ease,border-color .18s ease}
.quint-shop .woocommerce-tabs ul.tabs li::before,
.quint-shop .woocommerce-tabs ul.tabs li::after{display:none !important}
.quint-shop .woocommerce-tabs ul.tabs li a{font-family:var(--f-display) !important;
  font-weight:700 !important;font-size:.95rem !important;padding:10px 22px !important;
  color:var(--f-petrol) !important;display:block;text-decoration:none}
.quint-shop .woocommerce-tabs ul.tabs li:hover{border-color:rgba(30,75,68,.4) !important}
.quint-shop .woocommerce-tabs ul.tabs li.active{background:var(--f-petrol) !important;
  border-color:var(--f-petrol) !important}
.quint-shop .woocommerce-tabs ul.tabs li.active a{color:#fff !important}

.quint-shop .woocommerce-tabs .panel{background:#fff;
  border:1px solid rgba(30,75,68,.1);border-radius:var(--f-radius);
  padding:clamp(26px,3.4vw,46px) clamp(24px,3.4vw,52px);box-shadow:var(--f-schatten);
  margin:0 !important}
.quint-shop .woocommerce-tabs .panel > h2:first-child{display:none}

/* Lesespalte: der Text laeuft nicht mehr ueber die ganze Karte. */
.quint-shop .woocommerce-tabs .panel > *{max-width:68ch}
.quint-shop .woocommerce-tabs .panel p{font-size:1.02rem;line-height:1.72;
  color:var(--f-tinte);margin:0 0 1.1em}
.quint-shop .woocommerce-tabs .panel p:last-child{margin-bottom:0}
.quint-shop .woocommerce-tabs .panel p i{color:#4F6058}

.quint-shop .woocommerce-tabs .panel h3{font-family:var(--f-display);font-weight:700;
  color:var(--f-petrol);font-size:1.16rem;line-height:1.3;
  margin:2em 0 .6em !important;padding-top:1.1em;
  border-top:1px solid rgba(30,75,68,.12)}
.quint-shop .woocommerce-tabs .panel h3:first-of-type{border-top:0;padding-top:0;margin-top:1.6em !important}

/* Aufzaehlungen: Quints Haken statt Systempunkt. */
.quint-shop .woocommerce-tabs .panel ul{list-style:none;margin:0 0 1.2em;padding:0}
.quint-shop .woocommerce-tabs .panel ul li{position:relative;padding:0 0 0 30px;
  margin:0 0 .62em;font-size:1.02rem;line-height:1.6;color:var(--f-tinte)}
.quint-shop .woocommerce-tabs .panel ul li::before{content:"";position:absolute;
  left:2px;top:.42em;width:15px;height:15px;
  background:no-repeat center/contain
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B7F3F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E")}
.quint-shop .woocommerce-tabs .panel ul li b{color:var(--f-petrol)}

/* Tabelle „Zusaetzliche Informationen" ---------------------------------- */
.quint-shop .woocommerce-tabs .shop_attributes{width:100%;max-width:68ch;
  border-collapse:collapse;margin:0}
.quint-shop .woocommerce-tabs .shop_attributes th,
.quint-shop .woocommerce-tabs .shop_attributes td{text-align:left;padding:12px 0 !important;
  border:0 !important;border-bottom:1px solid rgba(30,75,68,.1) !important;
  font-size:.98rem;background:none !important}
.quint-shop .woocommerce-tabs .shop_attributes th{font-family:var(--f-display);
  font-weight:700;color:var(--f-petrol);width:40%}
.quint-shop .woocommerce-tabs .shop_attributes td p{margin:0}
.quint-shop .related.products,.quint-shop .up-sells{margin-top:clamp(34px,4vw,60px)}
@media(max-width:860px){.quint-shop .product.type-product > .clearfix{grid-template-columns:1fr}}

/* ---------- Warenkorb und Kasse ---------- */
.quint-shop table.shop_table{background:#fff;border:1px solid rgba(30,75,68,.1) !important;
  border-radius:var(--f-radius) !important;overflow:hidden;border-collapse:separate !important;
  box-shadow:var(--f-schatten)}
.quint-shop table.shop_table th{font-family:var(--f-display);font-weight:700;color:var(--f-petrol);
  background:var(--f-creme-hell);padding:14px 16px !important;border:0 !important}
.quint-shop table.shop_table td{padding:14px 16px !important;
  border-top:1px solid rgba(30,75,68,.08) !important;border-left:0 !important;border-right:0 !important;
  vertical-align:middle}
.quint-shop table.shop_table img{border-radius:10px;max-width:64px;background:var(--f-creme)}
.quint-shop .cart_totals,.quint-shop .woocommerce-checkout-review-order{
  background:#fff;border:1px solid rgba(30,75,68,.1);border-radius:var(--f-radius);
  padding:clamp(20px,2.6vw,30px);box-shadow:var(--f-schatten)}
.quint-shop .cart_totals table.shop_table,
.quint-shop .woocommerce-checkout-review-order table.shop_table{
  border:0 !important;box-shadow:none;background:none}
.quint-shop .cart_totals h2,.quint-shop #order_review_heading{margin-top:0}
.quint-shop .woocommerce form .form-row input.input-text,
.quint-shop .woocommerce form .form-row textarea,
.quint-shop .select2-container .select2-selection--single,
.quint-shop form .form-row input.input-text,.quint-shop form .form-row select{
  border:1px solid rgba(30,75,68,.22) !important;border-radius:12px !important;
  padding:12px 14px !important;background:#fff !important;font-family:"Nunito Sans",sans-serif;
  color:var(--f-tinte);height:auto !important}
.quint-shop form .form-row label{font-family:var(--f-display);font-weight:600;color:var(--f-petrol)}
.quint-shop .woocommerce-info,.quint-shop .woocommerce-message,.quint-shop .woocommerce-error{
  border-top:0 !important;background:#fff;border:1px solid rgba(30,75,68,.14);
  border-left:4px solid var(--f-gold) !important;border-radius:14px;
  padding:16px 20px !important;box-shadow:var(--f-schatten);color:var(--f-tinte)}
.quint-shop .woocommerce-message{border-left-color:var(--f-gruen-tief) !important}
.quint-shop .woocommerce-error{border-left-color:#9C4A3C !important}
.quint-shop .woocommerce-info::before,.quint-shop .woocommerce-message::before,
.quint-shop .woocommerce-error::before{display:none}
/* Divi faerbt diese Meldungen weiss (fuer seinen gruenen Balken). Auf dem
   hellen Kasten stand „Warenkorb aktualisiert." damit weiss auf weiss. */
.quint-shop .woocommerce-info,.quint-shop .woocommerce-message,
.quint-shop .woocommerce-error,.quint-shop .woocommerce-info *,
.quint-shop .woocommerce-message *,.quint-shop .woocommerce-error *{
  color:var(--f-tinte) !important;font-size:.98rem}
.quint-shop .woocommerce-info a,.quint-shop .woocommerce-message a{
  color:var(--f-wasser-mittel) !important;text-decoration:underline}
.quint-shop .woocommerce-info a.button,.quint-shop .woocommerce-message a.button{
  color:#fff !important;text-decoration:none}
.quint-shop .woocommerce-notices-wrapper:empty{display:none}
.quint-shop #payment{background:transparent !important;border-radius:0}
.quint-shop #payment ul.payment_methods{background:#fff;border:1px solid rgba(30,75,68,.1);
  border-radius:var(--f-radius);padding:18px 20px !important;box-shadow:var(--f-schatten);
  border-bottom:1px solid rgba(30,75,68,.1) !important}
.quint-shop #payment div.payment_box{background:var(--f-creme-hell) !important;border-radius:12px;
  color:var(--f-tinte)}
.quint-shop #payment div.payment_box::before{border-bottom-color:var(--f-creme-hell) !important}
.quint-shop .wc-gzd-checkbox-placeholder,.quint-shop .woocommerce-terms-and-conditions-wrapper{
  background:#fff;border:1px solid rgba(30,75,68,.12);border-radius:14px;
  padding:14px 18px;margin:16px 0}

/* ---------- Rechtsseiten ---------- */
body.quint-shop.quint-recht #left-area{max-width:74ch;margin:0 auto}
.quint-recht h2{border-top:1px solid rgba(30,75,68,.12);padding-top:1.1em}
.quint-recht h2:first-of-type{border-top:0;padding-top:0}
.quint-recht table{width:100%;border-collapse:collapse;margin:1em 0}
.quint-recht th,.quint-recht td{border:1px solid rgba(30,75,68,.14);padding:10px 14px;text-align:left}
.quint-recht th{background:var(--f-creme-hell);font-family:var(--f-display);color:var(--f-petrol)}

/* Offene Stellen in den Rechtstexten sichtbar halten — nichts davon darf
   unbemerkt live gehen. */
.dbzd-luecke{background:#FFE9A8;color:#5A3E00;padding:1px 7px;border-radius:6px;
  font-weight:700;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.dbzd-luecke::before{content:"⚠ ";}

/* ---------- Brotkrumen ---------- */
.quint-shop .woocommerce-breadcrumb{font-size:.88rem;color:#5F726D;margin-bottom:14px}
.quint-shop .woocommerce-breadcrumb a{color:#5F726D}


/* ---------- Vertrauenszeile unter dem Kaufen-Knopf ---------------------
   Dieselben vier Zusagen wie in der Bestell-Leiste der Startseite, damit
   der Bestellweg nicht kuehler wirkt als die Geschichte davor. */
.quint-shop ul.quint-vertrauen{list-style:none;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;
  margin:22px 0 0;padding:18px 0 0;border-top:1px solid rgba(30,75,68,.12)}
.quint-shop ul.quint-vertrauen li{display:flex;align-items:center;gap:9px;
  margin:0;font-size:.88rem;color:#4F6058;line-height:1.35}
.quint-shop ul.quint-vertrauen svg{flex:none;width:19px;height:19px;fill:none;
  stroke:var(--f-gruen-tief);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:560px){.quint-shop ul.quint-vertrauen{grid-template-columns:1fr}}

/* Buchpreisbindung: erklaeren, nicht nur einhalten. */
.quint-shop .quint-buchpreis{margin:18px 0 0;padding:14px 18px;font-size:.88rem;
  line-height:1.55;color:#4F6058;background:var(--f-creme-hell);
  border:1px solid rgba(30,75,68,.12);border-radius:14px}
.quint-shop .quint-buchpreis b{color:var(--f-petrol)}

/* ---------- Versandbalken in Warenkorb und Kasse ----------------------
   Der staerkste Hebel im Warenkorb: Er zeigt im Moment der Entscheidung,
   wie nah der kostenlose Versand ist. */
.quint-shop .quint-versandbalken{background:#fff;border:1px solid rgba(30,75,68,.1);
  border-radius:var(--f-radius);padding:18px 22px;margin:0 0 22px;
  box-shadow:var(--f-schatten)}
.quint-shop .quint-versandbalken .schiene{height:9px;border-radius:999px;
  background:rgba(30,75,68,.1);overflow:hidden}
.quint-shop .quint-versandbalken .schiene span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--f-gruen-hell),var(--f-gruen-tief));
  transition:width .4s ease}
.quint-shop .quint-versandbalken.erreicht .schiene span{
  background:linear-gradient(90deg,var(--f-gold-hell),var(--f-gold))}
.quint-shop .quint-versandbalken .txt{margin:10px 0 0;font-size:.94rem;color:var(--f-tinte)}
.quint-shop .quint-versandbalken.erreicht .txt{color:var(--f-gruen-tief);font-weight:600}
.quint-shop .quint-versandbalken .txt b,
.quint-shop .quint-versandbalken .txt .amount{color:var(--f-navy);font-weight:700}

/* ---------- Leerer Warenkorb ---------- */
.quint-shop .quint-leer{text-align:center;background:#fff;border-radius:var(--f-radius);
  border:1px solid rgba(30,75,68,.1);padding:clamp(30px,4vw,52px);box-shadow:var(--f-schatten)}
.quint-shop .quint-leer h2{margin-top:0}
.quint-shop .quint-leer p{max-width:44ch;margin:0 auto 16px}

/* ---------- Danke-Seite ---------- */
.quint-shop .woocommerce-thankyou-order-received{display:block;background:#fff;
  border:1px solid rgba(30,75,68,.1);border-left:4px solid var(--f-gruen-tief);
  border-radius:var(--f-radius);padding:clamp(22px,3vw,32px);box-shadow:var(--f-schatten);
  margin-bottom:26px;color:var(--f-tinte)}
.quint-shop .woocommerce-thankyou-order-received .gross{display:block;
  font-family:var(--f-display);font-weight:800;color:var(--f-navy);
  font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.2;margin-bottom:10px}
.quint-shop .woocommerce-thankyou-order-received .klein{display:block;
  font-size:.98rem;line-height:1.6;margin-top:8px}

/* ---------- Shop-Einleitung ---------- */
.quint-shop .quint-shop-intro{font-size:1.05rem;color:var(--f-tinte);
  max-width:60ch;margin:0 0 clamp(24px,3vw,36px)}

/* ---------- Verwandte Produkte ---------- */
.quint-shop .related.products h2,.quint-shop .up-sells h2,.quint-shop .cross-sells h2{
  font-size:clamp(1.15rem,1.8vw,1.5rem);margin-bottom:.7em}

/* ---------- Divis Pfeil auf den Schaltflächen -------------------------
   Divi haengt jedem Knopf ein ::after mit dem Pfeil aus der ETmodules-Schrift
   an und blendet es beim Ueberfahren ein. Weil unsere Knoepfe inline-flex
   sind statt inline-block, rutscht der Pfeil dabei mitten in den Text —
   aus „In den Warenkorb" wurde „In den W>renkorb". */
.quint-shop .button::after,.quint-shop .button::before,
.quint-shop button.button::after,.quint-shop button.button::before,
.quint-shop a.button::after,.quint-shop a.button::before,
.quint-shop input.button::after,.quint-shop input.button::before,
.quint-shop .checkout-button::after,.quint-shop #place_order::after,
body .eu-owb-order-withdraw-from-contract-button a::after,
body .eu-owb-order-withdraw-from-contract-button a::before{
  content:none !important;display:none !important}
.quint-shop .button:hover,.quint-shop a.button:hover,
.quint-shop button.button:hover{padding:12px 26px !important}

/* ---------- Abstände unter dem Kaufen-Knopf ----------------------------
   Divi setzt Listen in Produkten eigene Innenabstaende (padding:0 0 23px 14px).
   Die Vertrauenszeile bekam dadurch oben keine Luft und unten zu viel. */
.quint-shop ul.quint-vertrauen{margin:24px 0 0 !important;
  padding:20px 0 0 !important;row-gap:14px}
.quint-shop ul.quint-vertrauen li{margin:0 !important;padding:0 !important}
.quint-shop ul.quint-vertrauen li::before{display:none !important}

/* Artikelnummer und Kategorie: eigene Zeile mit Luft, nicht angeklebt. */
.quint-shop .product_meta{margin:24px 0 0 !important;padding:18px 0 0 !important;
  border-top:1px solid rgba(30,75,68,.12);font-size:.86rem;color:#5F726D;
  display:flex;flex-wrap:wrap;gap:6px 22px}
.quint-shop .product_meta > span{display:block;margin:0}
.quint-shop .product_meta a{color:var(--f-wasser-mittel)}

/* Der Buchpreisbindungs-Hinweis steht zwischen beiden — auch mit Luft. */
.quint-shop .quint-buchpreis{margin:22px 0 0 !important}

/* ---------- Reiter: gegen Divis ID-Regeln ------------------------------
   Divi schreibt seine WooCommerce-Regeln mit
   „body.woocommerce #content-area div.product …" — das ist spezifischer als
   jede Klassenregel und hat den aktiven Reiter weiss gelassen und den
   Abstand zum Feld auf null gesetzt. Gleiche Bauart, eine Klasse mehr. */
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs ul.tabs{
  margin:0 0 20px !important;padding:0 !important;border:0 !important;
  display:flex;gap:10px;flex-wrap:wrap}
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li{
  background:#fff !important;border:1px solid rgba(30,75,68,.16) !important;
  border-radius:999px !important;margin:0 !important;padding:0 !important;
  box-shadow:none !important;float:none !important}
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active{
  background:var(--f-petrol) !important;border-color:var(--f-petrol) !important}
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li a{
  color:var(--f-petrol) !important;padding:10px 22px !important;
  font-family:var(--f-display) !important;font-weight:700 !important;
  font-size:.95rem !important;display:block;text-decoration:none}
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active a{
  color:#fff !important}
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li::before,
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li::after{
  display:none !important;content:none !important}
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs .panel{
  margin:0 !important}

/* ---------- Reiter, zweiter Anlauf -------------------------------------
   Divis Regel für li.active laesst sich nicht zuverlaessig ueberschreiben.
   Statt weiter aufzuruesten wandert die Pille auf den Link: Das Listen-
   element wird unsichtbar, das <a> traegt Rahmen, Rundung und Farbe. Nebenbei
   ist damit die ganze Flaeche anklickbar statt nur die Schrift. */
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li,
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active{
  background:none !important;background-color:transparent !important;
  border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important}
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li a{
  display:block;background-color:#fff !important;background-image:none !important;
  border:1px solid rgba(30,75,68,.16) !important;border-radius:999px !important;
  padding:10px 22px !important;color:var(--f-petrol) !important;
  font-family:var(--f-display) !important;font-weight:700 !important;
  font-size:.95rem !important;text-decoration:none !important;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li a:hover{
  border-color:rgba(30,75,68,.42) !important}
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active a{
  background-color:#1E4B44 !important;background-image:none !important;
  border-color:#1E4B44 !important;color:#fff !important}

/* Divi setzt Listenpunkte über #content-area — dadurch stand neben dem
   grünen Haken noch der Systempunkt. */
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs .panel ul{
  list-style:none !important;list-style-type:none !important;padding-left:0 !important;margin-left:0 !important}
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs .panel ul li{
  list-style:none !important;list-style-type:none !important;
  padding:0 0 0 30px !important;margin:0 0 .62em !important}
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs .panel ul li::marker{
  content:"" !important;font-size:0 !important}

/* ---------- Set-Kennzeichnung in der Übersicht -------------------------
   WooCommerce klebt „Angebot!" in kräftigem Orange auf die Kachel. In dieser
   Bildwelt ist das ein Fremdkörper — Gold, rund, ruhig. */
.quint-shop ul.products li.product .onsale{
  position:absolute;top:22px;left:22px;z-index:3;margin:0 !important;
  background:linear-gradient(150deg,#EDBB5E,#D9A441) !important;color:#33240A !important;
  font-family:var(--f-display) !important;font-weight:700 !important;font-size:.76rem !important;
  letter-spacing:.04em;padding:5px 14px !important;border-radius:999px !important;
  min-height:0 !important;min-width:0 !important;line-height:1.4 !important;
  box-shadow:0 8px 18px -10px rgba(160,110,20,.9)}
.quint-shop ul.products li.product{position:relative}
.quint-shop .product.type-product .onsale{
  background:linear-gradient(150deg,#EDBB5E,#D9A441) !important;color:#33240A !important;
  font-family:var(--f-display) !important;font-weight:700 !important;
  border-radius:999px !important;padding:6px 16px !important;
  min-height:0 !important;min-width:0 !important;line-height:1.4 !important}

/* Preis mit Streichung: der alte Betrag tritt zurück, der neue nach vorn. */
.quint-shop ul.products li.product .price del,
.quint-shop .product.type-product .summary .price del{opacity:.55;font-weight:500;
  font-size:.72em;margin-right:6px}
.quint-shop ul.products li.product .price ins,
.quint-shop .product.type-product .summary .price ins{text-decoration:none;background:none}

/* Bundle-Bestandteile auf der Produktseite */
.quint-shop .bundled_product_summary{border-bottom:1px solid rgba(30,75,68,.1);
  padding:16px 0;margin:0}
.quint-shop .bundled_product_summary:last-of-type{border-bottom:0}
.quint-shop .bundled_product_title{font-family:var(--f-display);font-weight:700;
  color:var(--f-petrol);font-size:1rem}
.quint-shop .bundled_item_optional_checkbox label{font-family:var(--f-display);
  font-weight:700;color:var(--f-petrol)}
.quint-shop .bundle_price .price{font-family:var(--f-display);font-weight:800;
  color:var(--f-navy) !important;font-size:clamp(1.5rem,2.4vw,2rem)}

/* ---------- Preise und Reiter: letzte Feinheiten ----------------------
   Der reduzierte Preis steht in <ins>. Divi faerbt eingefuegten Text in
   seinem Linkblau — auf dem Turniertag-Set stand deshalb ein knallblaues
   „49,00 €" neben dem gedeckten Rest. */
body.quint-shop #main-content ins,
body.quint-shop #main-content .price ins,
body.quint-shop #main-content .price ins .amount,
body.quint-shop #main-content .price ins bdi{
  color:var(--f-navy) !important;text-decoration:none;background:none}
body.quint-shop #main-content .price del,
body.quint-shop #main-content .price del .amount,
body.quint-shop #main-content .price del bdi{color:#8A9A94 !important;font-weight:500}
body.quint-shop #main-content .price .from,
body.quint-shop #main-content .price > .amount{color:var(--f-navy) !important}

/* Der Reiterstreifen hatte einen grauen Grund quer ueber die Karte. */
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs ul.tabs{
  background:none !important;background-color:transparent !important;
  box-shadow:none !important;overflow:visible !important}
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs ul.tabs::before,
body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs ul.tabs::after{
  display:none !important;content:none !important;border:0 !important}

/* ---------- Kopfzeile der Artikelliste ---------------------------------
   Divi liefert das Sortierfeld als graues Systemelement mit eigenem Pfeil.
   Hier bekommt es dieselbe Form wie alles andere: weisse Kachel, feiner
   Rand, gerundet — und einen Pfeil in Quints Petrol statt dem des Browsers. */
.quint-shop .woocommerce-notices-wrapper + .woocommerce-result-count,
.quint-shop .woocommerce-result-count{font-size:.9rem;color:#5F726D;margin:0;
  align-self:center}
.quint-shop .woocommerce-ordering{margin:0}
.quint-shop .woocommerce-ordering select,
.quint-shop select.orderby{
  -webkit-appearance:none;appearance:none;
  background-color:#fff !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4B44' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  background-size:15px 15px !important;
  border:1px solid rgba(30,75,68,.16) !important;border-radius:999px !important;
  padding:10px 42px 10px 18px !important;
  font-family:var(--f-display) !important;font-weight:700 !important;
  font-size:.9rem !important;color:var(--f-petrol) !important;
  line-height:1.3 !important;height:auto !important;min-height:0 !important;
  box-shadow:none !important;cursor:pointer;
  transition:border-color .16s ease}
.quint-shop .woocommerce-ordering select:hover,
.quint-shop select.orderby:hover{border-color:rgba(30,75,68,.42) !important}
.quint-shop .woocommerce-ordering select:focus-visible,
.quint-shop select.orderby:focus-visible{outline:2px solid var(--f-gruen-tief);
  outline-offset:2px}

/* Zaehler und Sortierung in eine Zeile, mit Luft zum Raster darunter. */
.quint-shop #main-content .woocommerce-result-count,
.quint-shop #main-content .woocommerce-ordering{float:none !important}
.quint-shop .quint-listenkopf{display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin:0 0 clamp(20px,2.6vw,30px);padding-bottom:16px;
  border-bottom:1px solid rgba(30,75,68,.1)}
@media(max-width:600px){
  .quint-shop .quint-listenkopf{justify-content:flex-start}
  .quint-shop .woocommerce-ordering select{width:100%}
}

/* ---------- Vorbestellung ---------------------------------------------
   Bis zum Erscheinungstermin darf niemand glauben, das Buch komme in
   zwei Tagen. Der Hinweis steht deshalb ueber dem Kaufen-Knopf, nicht
   darunter — und in Gold, weil er eine Zusage ist, keine Warnung. */
.quint-shop .quint-vorbestellung{margin:0 0 20px;padding:16px 20px;
  background:var(--f-creme-hell);border:1px solid rgba(217,164,65,.5);
  border-left:4px solid var(--f-gold);border-radius:14px;
  font-size:.96rem;line-height:1.6;color:var(--f-tinte)}
.quint-shop .quint-vorbestellung b{color:var(--f-navy)}
.quint-shop .quint-vorbestellkorb{border-left:4px solid var(--f-gold)}
.quint-shop .quint-vorbestellkorb .txt{margin:0}
/* =====================================================================
   RECHTSTEXTE — Impressum, AGB, Datenschutz, Widerruf, Versand
   Die Seiten liegen ohne Builder in der Datenbank; am Wortlaut wird
   nichts geändert. Alles hier ist Darstellung: ein Kopfband in der
   Bildsprache der Seite, ruhiger Lesesatz darunter.
   Der Kicker steht in CSS und nicht im Text, damit die Rechtstexte
   unangetastet bleiben.
   ===================================================================== */
body.quint-recht #main-content{background:var(--f-creme)}
body.quint-shop.quint-recht #left-area{max-width:none;margin:0;padding:0}
/* Divi setzt den Abstand mit ID-Spezifitaet (#main-content .container),
   eine reine Klassenregel verliert dagegen. Deshalb hier ebenfalls mit ID —
   sonst steht ein 34 px breiter Streifen zwischen Kopfzeile und Kopfband. */
body.quint-recht #main-content #content-area,
body.quint-recht #main-content .container{width:100%;max-width:none;padding:0}

/* ---------- Kopfband ---------- */
body.quint-recht .entry-title{
  position:relative;margin:0;padding:clamp(52px,7vw,96px) 24px clamp(74px,9vw,120px);
  background:radial-gradient(120% 90% at 50% 0%,var(--f-creme-hell) 0%,var(--f-creme) 55%,var(--f-papier) 100%);
  font-family:var(--f-display);font-weight:800;color:var(--f-navy);
  font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.08;letter-spacing:-.012em;
  text-align:center;text-wrap:balance}
body.quint-recht .entry-title::before{
  content:"Rechtliches";display:block;margin-bottom:.35em;
  font-family:var(--f-hand);font-weight:600;letter-spacing:0;
  font-size:clamp(1.25rem,2.4vw,1.6rem);color:var(--f-gruen-tief);
  transform:rotate(-2.2deg)}
/* Dieselbe Welle wie an den Sektionsübergängen der übrigen Seiten. */
body.quint-recht .entry-title::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(34px,4vw,62px);
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0,110 H1440 V54 C1230,10 1050,92 720,54 C390,16 210,92 0,54 Z' fill='%23FAF3E3'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* ---------- Lesesatz ---------- */
body.quint-recht .entry-content{
  max-width:880px;margin:0 auto;padding:clamp(28px,4vw,52px) 24px clamp(64px,8vw,104px)}
body.quint-recht .entry-content p,
body.quint-recht .entry-content li{
  font-family:var(--f-text);font-size:1.05rem;line-height:1.78;color:var(--f-tinte)}
body.quint-recht .entry-content p{margin:0 0 1.05em}
body.quint-recht .entry-content>*:last-child{margin-bottom:0}

/* Paragraphenüberschriften bekommen Luft und einen ruhigen Trenner */
body.quint-recht .entry-content h2{
  font-family:var(--f-display);font-weight:700;color:var(--f-petrol);
  font-size:clamp(1.22rem,2.2vw,1.46rem);line-height:1.24;
  margin:2.4em 0 .7em;padding-top:1.1em;
  border-top:1px solid rgba(30,75,68,.14)}
body.quint-recht .entry-content h2:first-child{margin-top:0;padding-top:0;border-top:0}
body.quint-recht .entry-content h3{
  font-family:var(--f-display);font-weight:700;color:var(--f-navy);
  font-size:1.08rem;margin:1.8em 0 .5em}

body.quint-recht .entry-content a{
  color:var(--f-petrol);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
body.quint-recht .entry-content a:hover{color:var(--f-gruen-tief)}
body.quint-recht .entry-content b,body.quint-recht .entry-content strong{color:var(--f-navy)}

body.quint-recht .entry-content ul,body.quint-recht .entry-content ol{
  margin:0 0 1.05em;padding-left:1.4em}
body.quint-recht .entry-content li{margin-bottom:.45em}
/* Nur die Listen aus dem Rechtstext selbst — WooCommerce bringt eigene mit
   (Zahlungsarten), die ihre eigene Auszeichnung und Icons haben. */
/* Divi setzt die Aufzaehlungszeichen mit ID-Spezifitaet (#main-content …).
   Ohne !important blieb der Systempunkt stehen und stand neben Quints
   gruenem Punkt — jeder Listeneintrag hatte zwei Zeichen. */
body.quint-recht .entry-content ul:not([class]){list-style:none !important;padding-left:0}
body.quint-recht .entry-content ul:not([class])>li{list-style:none !important}
body.quint-recht .entry-content ul:not([class])>li::marker{content:"" !important}
body.quint-recht .entry-content ul:not([class])>li{position:relative;padding-left:1.5em}
body.quint-recht .entry-content ul:not([class])>li::before{
  content:"";position:absolute;left:.3em;top:.72em;width:7px;height:7px;border-radius:50%;
  background:var(--f-gruen)}

/* ---------- Zahlungsarten (WooCommerce/Germanized) ----------
   Die Liste stammt aus dem Checkout und bringt Radiobuttons, Icons und
   Beschreibungskaesten mit. Auf einer Textseite braucht sie eine ruhige
   Aufzaehlung — Icon rechts neben dem Namen, Erklaerung darunter. */
body.quint-recht .entry-content .woocommerce{margin:1.4em 0}
body.quint-recht .entry-content ul.payment_methods{
  list-style:none;margin:0;padding:0;border:0}
body.quint-recht .entry-content ul.payment_methods>li{
  list-style:none;margin:0 0 1.1em;padding:0}
body.quint-recht .entry-content ul.payment_methods>li::before{content:none}
body.quint-recht .entry-content ul.payment_methods>li:last-child{margin-bottom:0}
body.quint-recht .entry-content ul.payment_methods label{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--f-display);font-weight:700;color:var(--f-petrol);
  font-size:1.05rem;line-height:1.4;margin:0}
body.quint-recht .entry-content ul.payment_methods label img{
  height:26px;width:auto;max-width:64px;object-fit:contain;
  border:1px solid rgba(30,75,68,.14);border-radius:6px;background:#fff;padding:3px 6px;
  margin:0;display:inline-block;float:none}
body.quint-recht .entry-content ul.payment_methods .payment_box{
  margin:.35em 0 0;padding:0;background:none;border:0;box-shadow:none}
body.quint-recht .entry-content ul.payment_methods .payment_box::before{content:none}
body.quint-recht .entry-content ul.payment_methods .payment_box p{margin:0;font-size:1rem}
body.quint-recht .entry-content ul.payment_methods .payment_box p:empty{display:none}
body.quint-recht .entry-content ul.payment_methods input[type="radio"]{display:none}

/* Hervorgehobene Kästen im Rechtstext (Muster-Widerrufsformular u. ä.) */
body.quint-recht .entry-content blockquote{
  margin:1.6em 0;padding:clamp(20px,3vw,30px);border:0;
  background:#fff;border-radius:var(--f-radius);box-shadow:var(--f-schatten)}
body.quint-recht .entry-content blockquote p:last-child{margin-bottom:0}

/* Der Widerrufsknopf von Germanized steht auf diesen Seiten mittig */
body.quint-recht .eu-owb-order-withdraw-from-contract-button{background:transparent;padding-top:0}
/* „Stand: …“ über dem Rechtstext */
body.quint-recht .entry-content .quint-stand{
  font-size:.92rem;color:var(--f-tinte);opacity:.75;margin-bottom:2em}
/* Ausfüllzeilen im Muster-Widerrufsformular */
body.quint-recht .entry-content .quint-feld{
  margin:0 0 .6em;padding-bottom:.5em;border-bottom:1px dashed rgba(30,75,68,.28)}
body.quint-recht .entry-content .quint-feld:last-child{border-bottom:0;margin-bottom:0}

/* =====================================================================
   Produktgalerie: Pfeile über dem großen Bild
   ---------------------------------------------------------------------
   FlexSlider legt die Navigation als <a class="flex-prev"> an. Sie sitzt
   halbtransparent über den Bildrändern, wird beim Überfahren der Galerie
   deutlicher und bleibt per Tastatur immer sichtbar. Bei nur einem Bild
   blendet FlexSlider sie selbst aus (.flex-disabled).
   ===================================================================== */
.woocommerce-product-gallery{position:relative}
.woocommerce-product-gallery .flex-direction-nav{list-style:none;margin:0;padding:0}
.woocommerce-product-gallery .flex-direction-nav a{
  position:absolute;top:50%;translate:0 -50%;z-index:6;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.86);border:1px solid rgba(30,75,68,.14);
  box-shadow:0 10px 22px -12px rgba(22,50,63,.8);
  color:var(--f-petrol,#1E4B44);text-decoration:none;cursor:pointer;
  opacity:0;transition:opacity .18s ease,background .18s ease,transform .18s ease}
.woocommerce-product-gallery:hover .flex-direction-nav a,
.woocommerce-product-gallery .flex-direction-nav a:focus-visible{opacity:1}
/* Die Zentrierung laeuft ueber translate, die Vergroesserung ueber scale —
   beide als eigene Eigenschaft. Ein transform daneben wuerde die Zentrierung
   ueberschreiben und den Knopf beim Ueberfahren wegspringen lassen. */
.woocommerce-product-gallery .flex-direction-nav a{scale:1}
.woocommerce-product-gallery .flex-direction-nav a:hover{background:#fff;scale:1.06}
.woocommerce-product-gallery .flex-direction-nav a:focus-visible{
  outline:3px solid var(--f-gold,#D9A441);outline-offset:2px}
.woocommerce-product-gallery .flex-direction-nav a::before{
  content:"";width:11px;height:11px;border-top:2.5px solid currentColor;
  border-right:2.5px solid currentColor;border-radius:2px}
.woocommerce-product-gallery .flex-direction-nav .flex-prev{left:14px}
.woocommerce-product-gallery .flex-direction-nav .flex-prev::before{rotate:225deg;margin-left:3px}
.woocommerce-product-gallery .flex-direction-nav .flex-next{right:14px}
.woocommerce-product-gallery .flex-direction-nav .flex-next::before{rotate:45deg;margin-right:3px}
/* Beim ersten und letzten Bild macht FlexSlider den Pfeil inaktiv. */
.woocommerce-product-gallery .flex-direction-nav a.flex-disabled{display:none}
/* Auf Touchgeräten gibt es kein Überfahren — dort dauerhaft zeigen. */
@media(hover:none){
  .woocommerce-product-gallery .flex-direction-nav a{opacity:.92;width:42px;height:42px}
}

/* =====================================================================
   Galerie und Reiter — Nachbesserungen (03.09.2026)
   ===================================================================== */

/* 1. Die Pfeile saßen in der Mitte der GANZEN Galerie — also inklusive
      Vorschaubildern — und dadurch rund 125 px zu tief. Die Liste wird
      jetzt zu einem quadratischen Feld über dem Hauptbild; da alle
      Produktfotos quadratisch sind, deckt es genau das große Bild ab. */
.woocommerce-product-gallery .flex-direction-nav{
  position:absolute;top:0;left:0;width:100%;aspect-ratio:1;
  margin:0;padding:0;pointer-events:none;z-index:6}
.woocommerce-product-gallery .flex-direction-nav a{pointer-events:auto}

/* 2. Divi setzt Listenzeichen mit ID-Spezifität. Ohne !important standen
      unter der Galerie zwei nackte Punkte — die <li> der beiden Pfeile. */
.woocommerce-product-gallery .flex-direction-nav,
.woocommerce-product-gallery .flex-direction-nav li{
  list-style:none !important}
.woocommerce-product-gallery .flex-direction-nav li::marker{content:"" !important}
.woocommerce-product-gallery .flex-direction-nav li{margin:0 !important;padding:0 !important}

/* 3. Um die beiden Reiter lag ein grauer Kasten von WooCommerce — die
      Knöpfe hingen darin in der Luft. Ohne ihn stehen sie als Pillen über
      der weißen Karte, wie die Filterknöpfe im übrigen Shop. */
.quint-shop .woocommerce-tabs{border:0 !important;margin:34px 0 45px !important}
.quint-shop .woocommerce-tabs ul.tabs{padding-left:4px !important;margin-bottom:14px !important}

/* Anschrift und Telefonnummer auf den Rechtsseiten sind anklickbar —
   dezent unterstrichen, damit der Fließtext ruhig bleibt. */
body.quint-recht .entry-content a.quint-anfahrt,
body.quint-recht .entry-content a[href^="tel:"]{
  color:inherit;text-decoration:underline;text-decoration-color:rgba(30,75,68,.35);
  text-underline-offset:3px}
body.quint-recht .entry-content a.quint-anfahrt:hover,
body.quint-recht .entry-content a[href^="tel:"]:hover{
  text-decoration-color:var(--f-gruen-tief)}

/* ---------- Reiterfelder auf dem Handy ---------------------------------
   Auf 430 px standen vor dem ersten Zeichen 103 px Einrueckung: 43 px
   Zeilenrand von Divi, 30 px Polsterung des Reiterfelds und 30 px
   Listeneinzug. Der Aufzaehlung blieben 254 px — jeder Punkt brach in
   zwei Zeilen. Polsterung und Einzug sind Desktop-Werte; hier werden sie
   auf das Noetige zurueckgenommen (der Haken ist 15 px breit und sitzt
   bei 2 px, 22 px Einzug reichen also).
   -------------------------------------------------------------------- */
@media(max-width:600px){
  .quint-shop .woocommerce-tabs .panel{
    padding:22px 16px !important}
  /* Volle Kette noetig: die Regel gegen Divis Systempunkte weiter oben
     setzt padding mit !important. */
  body.quint-shop.woocommerce #content-area div.product .woocommerce-tabs .panel ul li{
    padding:0 0 0 22px !important}
}

/* ---------- Pflichtstern an der AGB-Zustimmung -------------------------
   Germanized haengt hinter den Satz ein &nbsp; und ein <span
   class="required">*</span>. Passt der Stern nicht mehr in die letzte
   Zeile, rutscht er allein in die naechste und steht dort wie ein
   versehentliches Zeichen unter dem Text.

   Ausblenden kostet nichts: das Zeichen traegt bereits aria-hidden, und
   direkt daneben steht fuer Screenreader das Wort „Erforderlich". Dass
   das Haekchen Pflicht ist, sagt ausserdem die Fehlermeldung beim
   Absenden.
   -------------------------------------------------------------------- */
.woocommerce-checkout .checkbox-legal .required,
.woocommerce-checkout .wc-gzd-checkbox-placeholder .required{display:none}

/* ---------- Shop-Raster gegen Divis Float-Layout -----------------------
   Divi schreibt in sein eingebettetes CSS (nicht in eine Datei, deshalb
   im Quelltext der Seite zu finden):

     @media (min-width:768px) and (max-width:980px){
       .woocommerce-page ul.products li.product:nth-child(n){
         width:28.333%!important; float:left!important }}

   Das :nth-child(n) hebt die Spezifitaet, dazu !important — damit schlaegt
   die Regel unser width:auto und die Kacheln schrumpften im Raster auf
   91 px, der Text brach buchstabenweise um. Es gibt dieselbe Regel auch
   fuer <=767 px (45,25 %) und <=479 px (100 %).

   Hier mit hoeherer Spezifitaet dagegen: das Raster bestimmt die Breite,
   nicht der Float.
   -------------------------------------------------------------------- */
body.quint-shop.woocommerce ul.products li.product:nth-child(n),
body.quint-shop.woocommerce-page ul.products li.product:nth-child(n){
  width:auto !important;max-width:none !important;
  margin:0 !important;float:none !important;clear:none !important}

/* ---------- Aus dem Pruefbericht (Tablet, 03.09.2026) ------------------ */

/* Der PayPal-Knopf sass mit 0 px Abstand unter dem Kasten zur
   Buchpreisbindung — er wirkte wie ein Teil davon. */
.quint-shop .ppc-button-wrapper{margin-top:22px !important;margin-bottom:6px}

/* Das Feld „E-Mail (wiederholen)" im Widerrufsformular ist Germanized'
   Spam-Falle: wird es ausgefuellt, gilt die Anfrage als Bot
   ($is_spam = ! empty( $email_repeat ), siehe Ajax.php im Plugin).
   Unser Formular-CSS hat die Versteckung des Plugins ueberschrieben —
   uebrig blieb ein 30 px breiter Stummel mit sichtbarer Beschriftung, den
   der Pruefbericht zu Recht als abgeschnittene Linie gemeldet hat.
   Wieder aus dem Blickfeld, aber im Formular: eine per display:none
   entfernte Falle fuellt kein Bot mehr aus. */
.woocommerce .form-row-email-repeat,
form .form-row-email-repeat{
  position:absolute !important;left:-9999px !important;top:auto !important;
  width:1px !important;height:1px !important;overflow:hidden !important;
  padding:0 !important;margin:0 !important}

/* Im Fragenbereich stossen auf schmalen Bildschirmen zwei Spalten
   aneinander. Die allgemeine Spaltenluecke (bis 30 px) wirkte dort wie ein
   Bruch zwischen zwei Bloecken — hier derselbe Rhythmus wie zwischen den
   Fragen selbst. */
@media(max-width:980px){
  .dbzdf-faq .et_pb_row>.et_pb_column:not(:last-child){margin-bottom:18px !important}
}

/* ---------- Logoleiste der Zahlungsarten -------------------------------
   Auf „Versand & Zahlung" gab es keine Logos — die beiden winzigen Symbole
   dort stammten aus einem versteckten Kassen-Fragment, nicht aus der Seite.
   Der Pruefbericht hat den Bereich zu Recht als unklar gemeldet.
   -------------------------------------------------------------------- */
.quint-zahlarten{
  list-style:none !important;display:flex;flex-wrap:wrap;gap:14px;
  margin:0 0 1.6em !important;padding:0 !important}
.quint-zahlarten li{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  min-width:92px;padding:14px 12px 12px;margin:0 !important;
  background:#fff;border:1px solid rgba(30,75,68,.14);border-radius:12px;
  box-shadow:0 8px 18px -14px rgba(22,50,63,.55)}
.quint-zahlarten li::before{display:none !important}
.quint-zahlarten img{width:64px;height:42px;object-fit:contain;display:block}
.quint-zahlarten span{
  font-family:var(--f-display);font-size:.78rem;line-height:1.25;
  color:var(--f-petrol);text-align:center}
/* Vorkasse hat kein Logo — die Kachel traegt nur das Wort, damit die Reihe
   vollstaendig ist. */
.quint-zahlarten li.wort{justify-content:center;min-height:82px}
@media(max-width:600px){
  .quint-zahlarten{gap:10px}
  .quint-zahlarten li{min-width:78px;padding:11px 9px 10px}
  .quint-zahlarten img{width:52px;height:34px}
}