/* ==========================================================================
   Binderlands Kräutershop
   Ergaenzung zu style-v14.css, nicht deren Ersatz. Hier steht ausschliesslich,
   was der Shop zusaetzlich braucht. Farben, Schriften, Bogenform und Knoepfe
   kommen aus der Hauptdatei: Der Shop soll nicht wie ein zweites Programm
   wirken, das man betritt, sondern wie ein weiterer Raum desselben Hauses.
   ========================================================================== */

/* ---------- Kopf der Sortimentsseite ---------- */
.sh-kopf{padding-block:clamp(7rem,14vh,10rem) clamp(2rem,4vh,3rem)}
.sh-kopf__ort{font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rotbraun);margin:0 0 .9rem}
.sh-kopf h1{font-size:clamp(2.2rem,5vw,4rem);max-width:18ch}
.sh-kopf__lead{max-width:56ch;color:var(--tinte-60);font-size:1.12em}

/* ---------- Sortiment ---------- */
.sh-liste{padding-block:clamp(1rem,3vh,2.5rem) var(--sp)}
.karten--drei{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.sh-karte{text-decoration:none;color:inherit}
/* Die Produktfotos sind quadratisch aufgenommen, und die Packungen fuellen
   fast die volle Bildhoehe. Ein 4:3-Ausschnitt wie bei den Unterkunftskarten
   wuerde jeder Tuete Kopf und Fuss abschneiden. Also richtet sich hier die
   Kachel nach dem Bild und nicht umgekehrt. Gilt nur im Shop: Die Karten der
   Startseite behalten ihr Querformat. */
.sh-karte .karte__bild{aspect-ratio:1}
.sh-karte h3{font-size:1.5rem}
.sh-karte .karte__text{gap:0}
.sh-karte p{color:var(--tinte-60)}

/* Preis und Grundpreis stehen am Fuss der Karte, damit die Karten trotz
   unterschiedlich langer Texte auf einer Linie enden. */
.sh-preis{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--tinte-30);
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.sh-preis b{font-family:var(--sans);font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
.sh-preis span{font-family:var(--sans);font-size:.78rem;color:var(--tinte-60)}

.sh-fussnote{font-family:var(--sans);font-size:.82rem;color:var(--tinte-60);
  margin-top:2.2rem;max-width:70ch}
.sh-fussnote a{color:inherit}

/* ---------- Versandkasten ---------- */
.sh-versand{background:var(--mint-hell);padding-block:clamp(3rem,7vh,5rem)}
.sh-versand h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
.sh-fakten{list-style:none;margin:1.6rem 0 0;padding:0;font-family:var(--sans);font-size:.95rem}
.sh-fakten li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.72rem 0;border-bottom:1px solid rgba(26,28,24,.12)}
.sh-fakten li:last-child{border-bottom:0}
.sh-fakten b{font-weight:600;text-align:right}

/* ---------- Artikelseite ---------- */
.sh-artikel{padding-block:clamp(6.5rem,13vh,9rem) var(--sp)}
.sh-brot{font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;
  color:var(--tinte-60);margin:0 0 1.8rem}
.sh-brot a{color:inherit}
.sh-brot span{margin-inline:.4em}

.sh-artikel__raster{display:grid;gap:clamp(2rem,4vw,4rem);
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
.sh-artikel__bild{border-radius:26px;overflow:hidden;background:var(--papier-warm);
  box-shadow:0 2px 4px rgba(26,28,24,.05),0 22px 44px -26px rgba(26,28,24,.38)}
.sh-artikel__bild img{width:100%;height:auto}
.sh-artikel__text h1{font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:.4em}
.sh-artikel__text p{max-width:60ch}

/* Der Kaufkasten. Bis der Warenkorb steht, traegt er nur den Preis und die
   Angaben, die nach PAngV daneben gehoeren. */
.sh-kaufen{background:#fff;border-radius:22px;padding:clamp(1.3rem,2.4vw,1.9rem);
  margin:1.6rem 0 2.2rem;box-shadow:0 2px 4px rgba(26,28,24,.05)}
.sh-kaufen__preis{font-family:var(--sans);font-size:2rem;font-weight:600;
  letter-spacing:-.02em;margin:0}
.sh-kaufen__grund{font-family:var(--sans);font-size:.9rem;color:var(--tinte-60);margin:.2rem 0 .9rem}
.sh-kaufen__klein{font-family:var(--sans);font-size:.78rem;color:var(--tinte-60);margin:.35rem 0}
.sh-kaufen__klein a{color:inherit}
.sh-kaufen__bald{font-family:var(--sans);font-size:.8rem;color:var(--rotbraun);
  margin:1rem 0 0;padding-top:.9rem;border-top:1px solid var(--tinte-30)}

/* ---------- Pflichtangaben ----------
   Bewusst nuechtern und vollstaendig. Wer hier sucht, sucht eine Tatsache,
   keine Stimmung. */
.sh-pflicht{margin-top:clamp(3rem,6vh,4.5rem);background:var(--papier-warm);
  border-radius:26px;padding:clamp(1.6rem,3vw,2.6rem)}
.sh-pflicht h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:.8em}
.sh-dl{margin:0;display:grid;grid-template-columns:minmax(180px,auto) 1fr;
  gap:.1rem 2rem;font-family:var(--sans);font-size:.92rem;line-height:1.55}
.sh-dl dt{font-weight:600;padding:.7rem 0;border-top:1px solid var(--tinte-30)}
.sh-dl dd{margin:0;padding:.7rem 0;border-top:1px solid var(--tinte-30);color:var(--tinte-60)}
.sh-dl dt:first-of-type,.sh-dl dd:first-of-type{border-top:0}
.sh-klein{font-size:.82rem}

.sh-zurueck{margin-top:2.6rem}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:900px){
  .sh-artikel__raster{grid-template-columns:1fr}
  .sh-dl{grid-template-columns:1fr;gap:0}
  .sh-dl dd{padding-top:0;border-top:0;padding-bottom:.8rem}
  .sh-dl dt{padding-bottom:.15rem}
}
@media (max-width:700px){
  .sh-kopf{padding-block:clamp(6rem,12vh,8rem) 1.6rem}
  .sh-preis{flex-direction:column;gap:.15rem}
  .sh-fakten li{flex-direction:column;gap:.1rem}
  .sh-fakten b{text-align:left}
}

/* ==========================================================================
   BA-6: Warenkorb, Konten, Formulare
   ========================================================================== */

.sh-versteckt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Korbzahl in der Navigation ---------- */
.sh-korbknopf{position:relative}
.sh-korbzahl{display:inline-flex;align-items:center;justify-content:center;
  min-width:1.45em;height:1.45em;margin-left:.55em;padding:0 .35em;
  border-radius:999px;background:#fff;color:var(--krautgruen);
  font-size:.78em;font-weight:600;line-height:1}
.btn:hover .sh-korbzahl,.btn:focus-visible .sh-korbzahl{background:var(--krautgruen);color:#fff}

/* ---------- Meldungen ---------- */
.sh-hinweis{font-family:var(--sans);font-size:.92rem;background:var(--mint-hell);
  border-left:4px solid var(--krautgruen);border-radius:0 12px 12px 0;
  padding:.9rem 1.1rem;margin:0 0 1.8rem}
.sh-fehler{font-family:var(--sans);font-size:.92rem;background:#fdeceb;
  border-left:4px solid var(--rotbraun);border-radius:0 12px 12px 0;
  padding:.9rem 1.1rem;margin:0 0 1.8rem}
.sh-fehler p{margin:0 0 .4rem;font-weight:600}
.sh-fehler ul{margin:0;padding-left:1.2rem}

/* ---------- Der Knopf am Artikel ---------- */
.sh-kaufen__form{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  margin-top:1rem;padding-top:1rem;border-top:1px solid var(--tinte-30)}
.sh-kaufen__form label{font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinte-60)}
.sh-kaufen__form input[type=number]{width:5.2rem;font-family:var(--sans);font-size:1rem;
  padding:.72rem .6rem;border:1px solid var(--tinte-30);border-radius:12px;
  background:var(--papier);color:var(--tinte);text-align:center}

/* ---------- Korbtabelle ---------- */
.sh-korb{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.92rem;margin-bottom:1.6rem}
.sh-korb th{text-align:left;font-weight:600;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinte-60);padding:.6rem .7rem;border-bottom:1px solid var(--tinte-30)}
.sh-korb td{padding:.9rem .7rem;border-bottom:1px solid var(--tinte-30);vertical-align:middle}
.sh-korb__ware{display:flex;align-items:center;gap:.9rem}
.sh-korb__ware img{border-radius:10px;width:64px;height:64px;object-fit:cover;flex:none}
.sh-korb__ware a{font-weight:600;text-decoration:none;display:block}
.sh-korb__ware a:hover{text-decoration:underline}
.sh-korb__ware span{display:block;font-size:.8rem;color:var(--tinte-60)}
.sh-korb input[type=number]{width:4.4rem;font:inherit;padding:.5rem;text-align:center;
  border:1px solid var(--tinte-30);border-radius:10px;background:#fff;color:var(--tinte)}
.sh-korb__weg{width:2.6rem;text-align:right}
.sh-korb__weg button{background:none;border:0;cursor:pointer;font-size:1.5rem;line-height:1;
  color:var(--tinte-60);padding:.2rem .4rem;border-radius:8px}
.sh-korb__weg button:hover,.sh-korb__weg button:focus-visible{color:var(--rotbraun);background:var(--papier-warm)}
.sh-korb__aktion{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2.4rem}

/* ---------- Summe ---------- */
.sh-summe{background:var(--papier-warm);border-radius:22px;padding:clamp(1.3rem,2.4vw,1.9rem)}
.sh-summe dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:.5rem 1.4rem;
  font-family:var(--sans);font-size:.98rem}
.sh-summe dt{color:var(--tinte-60)}
.sh-summe dd{margin:0;text-align:right}
.sh-summe__gesamt{font-size:1.25rem;font-weight:600;color:var(--tinte)!important;
  padding-top:.6rem;border-top:1px solid var(--tinte-30)}
.sh-summe .sh-klein{font-family:var(--sans);color:var(--tinte-60);margin:.5rem 0 0}
.sh-korb__weiter{margin:1.6rem 0 0;display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}

/* ---------- Formulare ----------
   Beschriftung ueber dem Feld, nicht daneben und nicht darin: Ein Platzhalter,
   der beim Tippen verschwindet, ist keine Beschriftung. */
.sh-form{max-width:640px;margin-bottom:2.8rem}
.sh-form h2{font-size:clamp(1.3rem,2.6vw,1.8rem);margin:2.2rem 0 1rem}
.sh-form h2:first-child{margin-top:0}
.sh-form label{display:block;margin-bottom:1.1rem}
.sh-form label span{display:block;font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;
  color:var(--tinte-60);margin-bottom:.35rem}
.sh-form input[type=text],.sh-form input[type=email],.sh-form input[type=password],.sh-form input:not([type]){
  width:100%;font-family:var(--sans);font-size:1rem;padding:.85rem .9rem;
  border:1px solid var(--tinte-30);border-radius:12px;background:#fff;color:var(--tinte)}
.sh-form input:focus-visible{outline:2px solid var(--krautgruen);outline-offset:1px}
.sh-form__zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem}
.sh-haken{display:flex!important;align-items:flex-start;gap:.7rem;margin:1.4rem 0 1.8rem}
.sh-haken input{margin-top:.3rem;width:1.15rem;height:1.15rem;flex:none;accent-color:var(--krautgruen)}
.sh-haken span{font-family:var(--sans);font-size:.92rem;color:var(--tinte);margin:0!important}

@media (max-width:700px){
  .sh-form__zwei{grid-template-columns:1fr;gap:0}
  /* Die Korbtabelle wird zu Kaertchen: Eine vierspaltige Tabelle auf einem
     Telefon ist entweder unlesbar klein oder schiebt die Seite zur Seite. */
  .sh-korb thead{display:none}
  .sh-korb,.sh-korb tbody,.sh-korb tr,.sh-korb td{display:block;width:100%}
  .sh-korb tr{border:1px solid var(--tinte-30);border-radius:16px;padding:.5rem .8rem;margin-bottom:1rem;background:#fff}
  .sh-korb td{border:0;padding:.42rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem}
  .sh-korb td::before{content:attr(data-titel);font-size:.74rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--tinte-60)}
  .sh-korb td:first-child::before{content:none}
  .sh-korb td:first-child{display:block}
  .sh-korb__weg{text-align:right;justify-content:flex-end}
  .sh-korb__weg::before{content:none!important}
  /* 16 px verhindert das Hineinzoomen in iOS Safari */
  .sh-form input,.sh-korb input{font-size:1rem}
}

/* ==========================================================================
   BA-7: Kasse, Bestellung, Rechnung
   ========================================================================== */

.sh-anschrift{font-family:var(--sans);font-size:.98rem;line-height:1.7;
  background:#fff;border-radius:16px;padding:1.1rem 1.3rem;display:inline-block;margin:0 0 .7rem}

/* Auswahl der Zahlungsart. Grosse Trefferflaeche, ganze Kachel klickbar. */
.sh-wahl{display:flex!important;align-items:flex-start;gap:.9rem;
  background:#fff;border:1px solid var(--tinte-30);border-radius:16px;
  padding:1rem 1.2rem;margin-bottom:.9rem;cursor:pointer;transition:border-color .3s}
.sh-wahl:hover{border-color:var(--krautgruen)}
.sh-wahl:has(input:checked){border-color:var(--krautgruen);box-shadow:inset 0 0 0 1px var(--krautgruen)}
.sh-wahl input{margin-top:.25rem;width:1.15rem;height:1.15rem;flex:none;accent-color:var(--krautgruen)}
.sh-wahl span{font-family:var(--sans);font-size:.92rem;color:var(--tinte-60);margin:0!important}
.sh-wahl b{color:var(--tinte);font-size:1rem}
.sh-wahl--aus{opacity:.5;cursor:not-allowed}
.sh-wahl--aus:hover{border-color:var(--tinte-30)}

.sh-form textarea{width:100%;font-family:var(--sans);font-size:1rem;padding:.85rem .9rem;
  border:1px solid var(--tinte-30);border-radius:12px;background:#fff;color:var(--tinte);resize:vertical}

/* Der Summenkasten an der Kasse traegt den Bestellknopf und steht deshalb
   heller ab: Was hier steht, ist das, wozu der Klick verpflichtet. */
.sh-summe--kasse{background:var(--mint-hell);margin-top:1.6rem}
.sh-bestellen{margin:1.4rem 0 .4rem}
.sh-bestellen .btn{width:100%;justify-content:center;font-size:.9rem;padding:1.2em 1.9em}
.sh-zurueck .btn{margin-right:.7rem;margin-bottom:.7rem}

/* ==========================================================================
   Bildergalerie der Artikelseite
   Ohne JavaScript stehen alle Bilder untereinander. Erst die Klasse
   ist-geschaltet, die das Skript setzt, legt sie uebereinander. Wer kein
   Skript hat, sieht damit alles, nur untereinander statt nacheinander.
   ========================================================================== */
.sh-galerie__blatt{margin:0}
.sh-galerie__blatt + .sh-galerie__blatt{margin-top:1rem}
.sh-galerie__blatt img{width:100%;height:auto;border-radius:26px;
  box-shadow:0 2px 4px rgba(26,28,24,.05),0 22px 44px -26px rgba(26,28,24,.38)}

.sh-galerie.ist-geschaltet .sh-galerie__gross{position:relative}
.sh-galerie.ist-geschaltet .sh-galerie__blatt{position:absolute;inset:0;margin:0;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease)}
.sh-galerie.ist-geschaltet .sh-galerie__blatt.ist-da{position:relative;opacity:1;visibility:visible}

.sh-galerie__reihe{display:flex;gap:.6rem;margin-top:.9rem;flex-wrap:wrap}
.sh-galerie__klein{flex:0 0 auto;width:72px;height:72px;padding:0;cursor:pointer;
  border:2px solid transparent;border-radius:14px;overflow:hidden;background:var(--papier-warm);
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.sh-galerie__klein img{width:100%;height:100%;object-fit:cover;display:block}
.sh-galerie__klein:hover{transform:translateY(-2px)}
.sh-galerie__klein.ist-da{border-color:var(--krautgruen)}
.sh-galerie__klein:focus-visible{outline:2px solid var(--krautgruen);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .sh-galerie.ist-geschaltet .sh-galerie__blatt{transition:none}
  .sh-galerie__klein{transition:none}
  .sh-galerie__klein:hover{transform:none}
}
@media (max-width:700px){
  .sh-galerie__klein{width:60px;height:60px}
}

/* ==========================================================================
   BA-9: Rechtsseiten
   Lesbarkeit vor Gestaltung. Wer hier liest, sucht einen Satz, keine Stimmung.
   ========================================================================== */
.sh-recht h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:2.4rem 0 .7rem}
.sh-recht h3{font-size:1.1rem;margin:1.6rem 0 .5rem}
.sh-recht p{max-width:68ch}
.sh-recht .sh-korb{max-width:68ch}
.sh-recht__stand{margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--tinte-30)}

/* Der Kasten trägt den gesetzlichen Mustertext. Er ist abgesetzt, damit man
   sieht, wo das Gesetz spricht und wo wir. */
.sh-kasten{background:#fff;border-radius:22px;padding:clamp(1.3rem,2.6vw,2rem);
  margin:1.4rem 0 2rem;max-width:72ch}
.sh-kasten h2:first-child{margin-top:0}
.sh-kasten p{font-size:.98rem}

.sh-formular{font-family:var(--sans);font-size:.92rem;background:var(--papier-warm)}
.sh-linie{display:inline-block;min-width:16rem;border-bottom:1px solid var(--tinte-30)}
.sh-linie--kurz{min-width:11rem}
.sh-formular .sh-linie{display:block;min-width:0;width:100%}
.sh-formular p .sh-linie--kurz{display:inline-block;width:auto}

/* Ein Pflichtwert, der noch fehlt, wird rot. Er soll auffallen, bevor ein
   Kunde ihn sieht. */
.sh-luecke{color:#b4442c;font-weight:600}

/* Die Widerrufsschaltflaeche in der Fussleiste. § 356a BGB verlangt, dass sie
   "deutlich hervorgehoben" ist. Ein Link zwischen anderen Links waere das
   nicht, deshalb traegt sie einen Rahmen und steht ab. */
.fuss__widerruf{display:inline-block;margin-top:.5rem;padding:.5em 1em;
  border:1px solid rgba(246,243,234,.42);border-radius:999px;
  font-size:.82rem;letter-spacing:.04em;text-decoration:none;
  transition:background .3s var(--ease),color .3s var(--ease)}
.fuss a.fuss__widerruf{color:rgba(246,243,234,.92)}
.fuss a.fuss__widerruf:hover,.fuss a.fuss__widerruf:focus-visible{
  background:rgba(246,243,234,.92);color:var(--tinte)}

/* ---------- Die amtliche EU-Mitteilung zur Gewährleistung ----------
   Pflicht ab 27.09.2026. Die Grafik wird nur gleichmäßig skaliert, nie
   beschnitten und nie gestreckt: Beides verbieten die Richtlinien der
   Kommission ausdrücklich. Deshalb width und height:auto und kein
   object-fit, das zuschneiden könnte.

   Die Breite ist so gewählt, dass die Mitteilung in Standardgröße lesbar
   bleibt, wie die Richtlinien es verlangen. Unter 380 Pixeln wird der
   Fließtext darin zu klein, deshalb geht sie auf dem Telefon über die volle
   Breite. */
.sh-gewaehr{margin:2.2rem 0;max-width:68ch}
.sh-gewaehr__bild{display:block;width:min(100%,460px);
  border:0;border-radius:6px;overflow:hidden;
  box-shadow:0 1px 3px rgba(26,28,24,.10),0 12px 28px -18px rgba(26,28,24,.34)}
.sh-gewaehr__bild img{width:100%;height:auto;display:block}
.sh-gewaehr__link{font-family:var(--sans);font-size:.82rem;color:var(--tinte-60);
  margin:.6rem 0 0}
.sh-gewaehr__dazu{font-family:var(--sans);font-size:.82rem;color:var(--tinte-60);
  line-height:1.6;margin:.9rem 0 0;max-width:62ch;
  padding-left:.9rem;border-left:2px solid var(--tinte-30)}
@media (max-width:560px){ .sh-gewaehr__bild{width:100%} }