/* Grundstile — bewusst knapp. Was hier nicht steht, wird nicht gebraucht. */
@font-face{font-family:'Mr Dodo';font-weight:700;font-display:swap;
  src:url('fonts/mrdodo-bold.woff2') format('woff2')}
@font-face{font-family:'Mr Dodo';font-weight:300;font-display:swap;
  src:url('fonts/mrdodo-light.woff2') format('woff2')}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 clamp(1rem,.55vw + .9rem,1.125rem)/1.65 var(--body);
  text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:.98;
  letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.6rem,8.5vw,6rem)}
h2{font-size:clamp(1.9rem,4.5vw,3rem)}
h3{font-size:1.6rem}
p{margin:0 0 var(--s3);max-width:var(--measure)}
a{color:inherit}
img{max-width:100%;height:auto;display:block}

/* Ein sichtbarer Fokus für alles, was die Tabulatortaste anspringt.
   Gemessen hatten 18 der 61 bedienbaren Elemente auf der Startseite keine
   Regel von uns und fielen auf den Browserring zurück — der ist je nach
   System hellblau und steht neben Koralle wie ein Fremdkörper.
   `:where()` zählt in der Spezifität nicht mit: Jede genauere Regel weiter
   unten gewinnt weiterhin, ohne `!important`. */
:where(a[href],button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--coral);outline-offset:2px}
.wrap{max-width:78rem;margin:0 auto;padding:0 var(--gut)}
.eyebrow{font-family:var(--display);font-weight:300;font-size:.85rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin:0 0 var(--s3)}

/* Kopf */
.sb-header{position:relative}
.sb-top{display:flex;align-items:center;gap:var(--s4);
  padding-top:var(--s4);padding-bottom:var(--s4);
  border-bottom:1px solid var(--line);flex-wrap:wrap;position:relative}
/* Die Navigation schiebt sich nach rechts, die Zeichen schliessen den Kopf ab.
   Vorher trug `justify-content:space-between` die Verteilung; mit drei
   Gruppen statt zweier verteilte das den Platz an der falschen Stelle. */
.sb-top .sb-nav{margin-left:auto}
.sb-mark{font-family:var(--display);font-size:1.35rem;letter-spacing:-.02em;text-decoration:none}
.sb-mark b{color:var(--coral)}
/* Mit Logo: feste Höhe, damit der Kopf nicht springt, während die Datei lädt. */
.sb-mark-img{display:block;line-height:0}
/* Mit `.sb-header` davor, und das ist kein Zierrat.
 *
 * WooCommerce bringt `.woocommerce img{height:auto;max-width:100%}` mit —
 * genau dieselbe Spezifitaet wie `.sb-mark-img img` und spaeter geladen,
 * also gewinnt WooCommerce. Aus `max-width:14rem` wurde `max-width:100%`,
 * und ein Prozentwert an einem Bild, dessen Behaelter sich erst nach dem
 * Bild richtet, loest sich zu null auf: Das Logo verschwand auf jeder
 * Shop-Seite, blieb aber auf Startseite, Ladenseite und Blog stehen.
 *
 * Dieselbe Falle hatte schon den grauen Streifen unter den Produktkacheln
 * verursacht. Wo das Theme Bildmasse setzt, braucht es eine Stufe mehr. */
.sb-header .sb-mark-img img{height:2.6rem;width:auto;max-width:14rem}
@media (max-width:40rem){.sb-header .sb-mark-img img{height:2.1rem}}
/* Die Regeln gelten der Hauptleiste, nicht jeder Liste im Kopf: Im Panel
   stehen weitere Listen, die ihre eigene Anordnung brauchen. Waeren die
   Regeln allgemein, muesste das Panel sie mit hoeherer Spezifitaet
   zurueckdrehen — ein Wettruesten, das niemand gewinnt. */
.sb-top nav{font-family:var(--display);font-weight:300;font-size:.95rem}
.sb-top .sb-menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:var(--s3) var(--s4);align-items:baseline}
/* Kein `position:relative` hier: Sonst spannt sich das Panel nicht ueber
   die Kopfbreite, sondern nur ueber die Breite des Menuepunkts. */
.sb-top .sb-menu>li{margin:0}
.sb-top .sb-menu>li>a{text-decoration:none;padding-bottom:.15rem;
  border-bottom:2px solid transparent;white-space:nowrap}
/* Der Menuepunkt, der ein Panel oeffnet, sieht aus wie ein Link — er ist
   aber ein Knopf, weil er nichts oeffnet ausser dem Panel. */
.sb-panel-trigger{font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  padding:0 0 .15rem;border-bottom:2px solid transparent;white-space:nowrap}
.sb-panel-trigger::after{content:" \203A";color:var(--steel);display:inline-block;
  transition:transform .2s ease}
.sb-panel-trigger[aria-expanded="true"]{border-bottom-color:var(--coral)}
.sb-panel-trigger[aria-expanded="true"]::after{transform:rotate(90deg)}

/* Das Panel spannt sich ueber die volle Breite unter den Kopfbereich.
   Kein Schatten, keine Rundung: Es ist eine Flaeche, die sich aufschiebt,
   keine schwebende Karte. */
.sb-panel{position:absolute;left:0;right:0;top:100%;z-index:30;
  background:var(--paper);border-top:1px solid var(--line);
  border-bottom:1px solid var(--ink)}
.sb-panel-inner{max-width:78rem;margin:0 auto;padding:var(--s5) var(--gut);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:var(--s6)}

.sb-panel-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s3);border-bottom:1px solid var(--line);padding-bottom:.5rem}
.sb-panel-title{font-family:var(--display);font-weight:700;font-size:1.35rem}
.sb-panel-close{font-size:1.6rem;line-height:1;background:none;border:0;padding:0 .2rem;
  color:var(--steel);cursor:pointer}
.sb-panel-close:hover,.sb-panel-close:focus-visible{color:var(--coral)}
.sb-panel-overview{display:inline-block;margin:.7rem 0 var(--s4);
  font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--coral);text-decoration:none}
.sb-panel-overview:hover{text-decoration:underline;text-underline-offset:.25em}

/* Die Gruppen stehen in Spalten nebeneinander, damit auch ein langes
   Sortiment ohne Scrollen ueberblickbar bleibt. Die duenne Linie zwischen
   den Gruppen ersetzt Ueberschriften, die nichts zu sagen haetten. */
.sb-panel-group{list-style:none;margin:0 0 var(--s3);padding:0 0 var(--s3);
  border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));
  gap:.35rem var(--s4)}
.sb-panel-group:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.sb-panel-group li{margin:0}
/* Beschriftung links, Zahl rechts an der Spaltenkante — wie in einem
   Register. Vorher lief die Zahl im Textfluss mit und rutschte bei einem
   umbrechenden Eintrag („Schnittmuster Schleiferlwerk") auf die zweite
   Zeile, wo sie unter der Beschriftung stand statt daneben. An der Kante
   steht sie immer gleich, egal wie lang die Beschriftung ist — und die
   Zahlen bilden je Spalte eine ruhige Senkrechte. */
.sb-panel-group a{display:grid;grid-template-columns:1fr auto;
  column-gap:.6rem;align-items:baseline;
  text-decoration:none;border-bottom:0;padding:.15rem 0;white-space:normal}
.sb-panel-label{display:block}
.sb-panel-group a:hover,.sb-panel-group a:focus-visible{color:var(--coral);outline:none}
.sb-panel-icon{color:var(--coral);font-size:.9em}
.sb-panel-count{font-family:var(--body);font-size:.75rem;color:var(--steel);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* Zwei Bildkacheln — dieselbe Bewegung wie bei den Produktkacheln, damit
   sich das Panel nicht wie ein Fremdkoerper anfuehlt. */
.sb-panel-promos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-content:start}
.sb-promo{position:relative;display:block;text-decoration:none;border-bottom:0;
  overflow:hidden;background:var(--surface)}
.sb-promo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  transform:scale(1.015);transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.sb-promo:hover img,.sb-promo:focus-visible img{transform:scale(1.06)}
.sb-promo-flag{position:absolute;top:0;left:0;background:var(--coral);color:var(--paper);
  font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;padding:.3rem .6rem}
.sb-promo-card{position:absolute;left:0;right:0;bottom:0;background:var(--paper);
  padding:.65rem .8rem;display:flex;align-items:baseline;justify-content:space-between;
  gap:.5rem}
.sb-promo-card strong{font-family:var(--display);font-weight:700;font-size:.95rem}
.sb-promo-go{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--coral);white-space:nowrap}

html:not(.sb-js) .sb-has-panel:hover .sb-panel,
html:not(.sb-js) .sb-has-panel:focus-within .sb-panel{display:block}

.sb-top .sb-menu>li>a:hover,
.sb-top .sb-menu>li>a:focus-visible,
.sb-panel-trigger:hover,
.sb-panel-trigger:focus-visible{border-bottom-color:var(--coral);outline:none}

/* Produktkacheln — fester Rahmen, nur der Stoff bewegt sich */
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:var(--s4)}
.sb-tile{text-decoration:none;display:flex;flex-direction:column;height:100%}
/* Der Rahmen gibt das Hochformat vor, das Bild fuellt ihn ganz aus.
   Die Regeln nennen `.frame` mit — nicht der Ordnung halber, sondern weil
   WooCommerce `.woocommerce img{height:auto}` mitbringt. Das hat dieselbe
   Spezifitaet wie `.sb-tile img` und wird spaeter geladen: Ohne den
   zusaetzlichen Schritt verliert unsere Hoehe, das Bild bleibt in seinem
   eigenen Format stehen und der Rahmen schaut unten als grauer Streifen
   hervor — sichtbar nur in den Shop-Listen, nicht auf der Startseite. */
.sb-tile .frame{position:relative;aspect-ratio:5/6;overflow:hidden;background:var(--surface)}
.sb-tile .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.96);transform:scale(1.015);transform-origin:50% 55%;
  transition:transform .55s cubic-bezier(.22,.61,.36,1),filter .55s ease}
.sb-tile:hover .frame img,
.sb-tile:focus-visible .frame img{transform:scale(1.055) translateY(-1.2%);filter:saturate(1.04)}
.sb-tile .t{font-family:var(--display);font-weight:700;font-size:.95rem;
  margin:var(--s2) 0 .1rem;line-height:1.2;transition:color .25s ease}
.sb-tile .p{font-size:.85rem;color:var(--steel);margin-top:auto;padding-top:.15rem}
.sb-tile:hover .t,.sb-tile:focus-visible .t{color:var(--coral)}
.sb-tile:focus-visible{outline:2px solid var(--coral);outline-offset:4px}

/* Ausverkauft.
   Bewusst in Tinte und nicht in Koralle: Die Akzentfarbe gehoert dem, was
   man tun kann. Ein Hinweis, dass gerade nichts geht, darf nicht lauter
   rufen als ein Kaufknopf. Das Bild tritt leicht zurueck, bleibt aber
   erkennbar — der Stoff ist ja weiterhin der Grund, hinzuschauen. */
.sb-flag-out{position:absolute;left:0;bottom:0;z-index:1;
  background:var(--ink);color:var(--paper);
  font-family:var(--display);font-weight:700;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;padding:.32rem .55rem}
.sb-tile-out .frame img{filter:saturate(.5) opacity(.72)}
.sb-tile-out:hover .frame img,
.sb-tile-out:focus-visible .frame img{filter:saturate(.7) opacity(.85)}
.sb-tile-out .p{color:var(--steel);text-decoration:line-through;
  text-decoration-thickness:1px;text-underline-offset:.2em}
.sb-ph{aspect-ratio:5/6;background:var(--surface);display:grid;place-items:center;
  font-family:var(--display);font-weight:300;color:var(--steel);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase}

/* Schaltfläche */
.sb-cta{display:inline-block;background:var(--coral);color:#fff;font-family:var(--display);
  font-weight:700;text-decoration:none;padding:.95rem 1.9rem;font-size:1.05rem;border:0;cursor:pointer}
.sb-cta:hover,.sb-cta:focus-visible{background:var(--ink);outline:none}
.sb-cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* Die zweite Stimme: gleiche Form, weniger Gewicht. Für Handlungen, die
   danebenstehen — „Aktualisiere", „Zum Warechorb" in einer Meldung — und
   die nicht mit dem Kaufknopf um Aufmerksamkeit ringen sollen. */
.sb-cta-quiet{background:transparent;color:var(--ink);border:2px solid var(--ink);
  padding:calc(.95rem - 2px) calc(1.9rem - 2px)}
.sb-cta-quiet:hover,.sb-cta-quiet:focus-visible{background:var(--ink);color:var(--paper)}

section{padding:clamp(3rem,7vw,5.5rem) 0}

@media (prefers-reduced-motion:reduce){
  .sb-tile .frame img{transform:none!important;transition:none!important}
  .sb-tile:hover .frame img,
  .sb-tile:focus-visible .frame img{transform:none!important}
  *{animation:none!important}
}

/* Produktseite */
.sb-crumbs{font-family:var(--display);font-weight:300;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--steel);padding:var(--s4) 0 0}
.sb-crumbs a{text-decoration:none;border-bottom:1px solid var(--line)}
.sb-crumbs a:hover{border-bottom-color:var(--coral)}
/* Das Bild bekommt mehr Platz: bei Stoff ist es das eigentliche Argument.
   Und ein flacheres Verhältnis zeigt mehr vom Muster. */
.sb-product-main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:var(--gut);align-items:start;padding:var(--s5) 0}
/* Dasselbe Format wie die Kachel: Wer auf ein Bild klickt, soll dasselbe
   Bild grösser sehen und nicht einen anderen Ausschnitt. */
.sb-product-img{width:100%;aspect-ratio:5/6;object-fit:cover}
.sb-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-top:var(--s2)}
.sb-gallery img{aspect-ratio:1;object-fit:cover;display:block;width:100%}
/* Der Streifen wird erst anfassbar, wenn das Skript da ist — sonst versprechen
   Zeigefinger und Rahmen etwas, das ohne Skript niemand einlöst. Der Verweis
   selbst funktioniert immer: Er öffnet das Bild in voller Groesse. */
.sb-gallery-knopf{display:block;position:relative;text-decoration:none;
  outline-offset:2px}
.sb-gallery.ist-schaltbar .sb-gallery-knopf{cursor:zoom-in}
.sb-gallery-knopf::after{content:'';position:absolute;inset:0;
  border:2px solid transparent;transition:border-color .2s ease}
.sb-gallery.ist-schaltbar .sb-gallery-knopf:hover::after,
.sb-gallery.ist-schaltbar .sb-gallery-knopf:focus-visible::after{border-color:var(--ink)}
.sb-gallery.ist-schaltbar .sb-gallery-knopf.ist-aktiv::after{border-color:var(--ink)}
.sb-gallery.ist-schaltbar .sb-gallery-knopf.ist-aktiv img{opacity:.82}
@media (prefers-reduced-motion:reduce){.sb-gallery-knopf::after{transition:none}}
.sb-product-buy h1{font-size:clamp(2rem,5vw,3.4rem);margin-bottom:var(--s3)}
.sb-price{font-family:var(--display);font-weight:700;font-size:1.9rem;
  margin:0 0 var(--s2);display:flex;align-items:baseline;gap:.4rem}
.sb-price del{opacity:.45;font-size:.7em;font-weight:300}
.sb-price ins{text-decoration:none;color:var(--coral)}
.sb-unit{font-family:var(--body);font-style:italic;font-weight:400;
  font-size:.55em;color:var(--steel)}
/* Senf auf hellem Grund war zu schwach — der Kontrast reichte nicht, und
   gesperrte Versalien in .72rem lesen sich schlecht. Jetzt heller Text auf
   dunklem Grund, grösser, ohne Versalien. */
.sb-cert{display:inline-flex;align-items:center;gap:.5rem;
  background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:.92rem;line-height:1.35;
  padding:.55rem .9rem;margin:0 0 var(--s3);max-width:32ch}
.sb-cert::before{content:"";flex:0 0 .7rem;height:.7rem;background:var(--mustard);
  border-radius:50%}
.sb-stock{font-size:.9rem;margin-bottom:var(--s3)}
.sb-stock.out{color:var(--coral)}
/* Der eine Satz zum Stoff, direkt unter dem Preis: „Blaue Punkte auf
   weissem Grund." Er beantwortet die erste Frage, bevor irgendein Datum
   gelesen wird. */
.sb-product-kurz{margin:0 0 var(--s3);font-size:1.1rem;line-height:1.55;max-width:42ch}
.sb-product-kurz p{margin:0 0 var(--s2)}
.sb-product-kurz p:last-child{margin-bottom:0}

/* Die Stoffdaten: Beschriftung und Wert je Zeile, Werte an einer Kante.
   Kein Kasten, nur Linien — es ist eine Aufstellung, keine Karte. */
.sb-product-date{margin:var(--s4) 0 0;padding-top:var(--s4);
  border-top:1px solid var(--line)}
.sb-product-date>div{display:grid;grid-template-columns:minmax(7rem,10rem) minmax(0,1fr);
  gap:var(--s2) var(--s3);padding:.55rem 0;border-bottom:1px solid var(--line)}
.sb-product-date>div:last-child{border-bottom:0}
.sb-product-date dt{font-family:var(--display);font-weight:300;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--steel);
  align-self:baseline}
.sb-product-date dd{margin:0;line-height:1.5}
@media (max-width:40rem){
  .sb-product-date>div{grid-template-columns:1fr;gap:.15rem}
}

.sb-desc{margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s4)}
.sb-related{border-top:1px solid var(--line)}
.sb-related h2{margin-bottom:var(--s4)}

/* Empfehlungen mit Rolle.
   Die Rolle steht ueber der Kachel und sagt, WOFUER das Produkt hier steht.
   Ohne sie waeren es vier Kacheln, und niemand wuesste, warum gerade diese —
   genau der Zustand, den diese Leiste abloest. Sie ist Beiwerk und traegt
   deshalb dieselbe leise Auszeichnung wie die Augenbraue ueber einer
   Ueberschrift, nicht die Groesse eines Titels. */
.sb-empf{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.sb-empf-rolle{font-family:var(--display);font-weight:300;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
/* Feste Vierteilung, solange sie passt: Die vier Rollen sind eine Reihe und
   sollen als eine gelesen werden, nicht als Fliesstext aus Kacheln. */
.sb-empf-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:64rem){.sb-empf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:30rem){.sb-empf-grid{grid-template-columns:1fr}}

/* Mengenfeld und Warenkorb — die Logik bleibt bei WooCommerce, nur die
   Darstellung ist unsere. Das Feld muss auch auf schmalen Geräten bedienbar
   bleiben, insbesondere für Dezimaleingaben (FR-011). */
.sb-product-buy form.cart{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:stretch;margin:var(--s3) 0}
.sb-product-buy .quantity input[type=number]{font:400 1.1rem/1 var(--body);
  padding:.85rem .7rem;width:6.5rem;min-height:3rem;border:1px solid var(--ink);
  background:#fff;color:var(--ink)}
.sb-product-buy .quantity input:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
/* Höhere Spezifität als die Erweiterungs-Stile, die den Knopf sonst violett
   färben. `!important` bleibt aussen vor — die Klasse reicht. */
.sb-product-buy form.cart button.single_add_to_cart_button,
.sb-product-buy button[type=submit]{background:var(--coral);color:#fff;border:0;
  font-family:var(--display);font-weight:700;font-size:1.05rem;padding:.9rem 1.9rem;
  cursor:pointer;border-radius:0}
.sb-product-buy form.cart button.single_add_to_cart_button:hover,
.sb-product-buy form.cart button.single_add_to_cart_button:focus-visible,
.sb-product-buy button[type=submit]:hover,
.sb-product-buy button[type=submit]:focus-visible{background:var(--ink);outline:none}

/* ---- Produkte mit Auswahl (Naehpaeckli mit Groesse) ----------------------
   Bei diesen Produkten kam bisher gar nichts von uns an: Das Auswahlfeld
   stand ungestaltet da — 19 px hoch, Schriftgroesse des Browsers, ohne
   Innenabstand — und der Knopf war WooCommerce-Violett bei halber Deckkraft,
   weil dessen Regel fuer den Zustand „noch keine Groesse gewaehlt" eine
   Klasse mehr traegt als unsere. Beides sah aus wie ein anderer Shop.

   Die Bauteile bekommen jetzt dieselben Masse wie beim Stoff: gleiche Hoehe,
   gleiche Schrift, gleicher Rahmen. */

/* Beschriftung ueber das Feld statt daneben: „Grösse" und ein Klappfeld auf
   einer Zeile draengen sich, und das Feld wird dabei so schmal, dass die
   Groessenangaben abgeschnitten werden. */
.sb-product-buy table.variations{width:100%;border:0;border-collapse:collapse;
  margin:0 0 var(--s3)}
.sb-product-buy table.variations th,
.sb-product-buy table.variations td{display:block;padding:0;text-align:left;border:0}
.sb-product-buy table.variations th.label label{display:block;
  font-family:var(--display);font-weight:300;font-size:.85rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--steel);
  margin:0 0 .45rem}

.sb-product-buy select{font:400 1.1rem/1.2 var(--body);
  padding:.85rem 2.2rem .85rem .7rem;min-height:3rem;width:100%;max-width:22rem;
  border:1px solid var(--ink);border-radius:0;background:#fff;color:var(--ink);
  appearance:none;
  /* Eigener Pfeil: die Vorgabe des Systems passt zu keiner Schrift der Seite. */
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
    linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 55%,calc(100% - .8rem) 55%;
  background-size:.4rem .4rem,.4rem .4rem;background-repeat:no-repeat}
.sb-product-buy select:focus-visible{outline:2px solid var(--coral);outline-offset:2px}

.sb-product-buy a.reset_variations{display:inline-block;margin-top:.5rem;
  font-size:.85rem;color:var(--steel)}

/* Preis der gewaehlten Ausfuehrung: dieselbe Stimme wie der Preis darueber. */
.sb-product-buy .woocommerce-variation-price{margin:0 0 var(--s3)}
.sb-product-buy .woocommerce-variation-price .price{font-family:var(--display);
  font-weight:700;font-size:1.5rem}
.sb-product-buy .woocommerce-variation-availability p{margin:0 0 var(--s2);font-size:.9rem}

/* Menge und Knopf nebeneinander, mit Luft — wie beim Stoff. */
.sb-product-buy .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;
  gap:var(--s2);align-items:stretch;margin:var(--s3) 0}

/* Der Knopf auch im gesperrten Zustand in unserer Farbe. WooCommerce faerbt
   ihn sonst violett, und die Regel dort traegt eine Klasse mehr. Gesperrt
   heisst hier nicht „blass", sondern ruhig: Er sagt, dass zuerst etwas zu
   waehlen ist, statt zum Klicken einzuladen. */
.sb-product-buy form.cart button.single_add_to_cart_button.disabled,
.sb-product-buy form.cart button.single_add_to_cart_button:disabled,
.sb-product-buy form.cart button.single_add_to_cart_button.wc-variation-selection-needed{
  background:var(--surface);color:var(--steel);opacity:1;cursor:not-allowed}
.sb-product-buy form.cart button.single_add_to_cart_button.disabled:hover,
.sb-product-buy form.cart button.single_add_to_cart_button.wc-variation-selection-needed:hover{
  background:var(--surface);color:var(--steel)}

@media (max-width:40rem){
  .sb-product-buy select{max-width:none}
  .sb-product-buy .woocommerce-variation-add-to-cart button.single_add_to_cart_button{flex:1 1 100%}
}
.sb-product-buy button[type=submit]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media (max-width:52rem){
  .sb-product-main{grid-template-columns:1fr}
  .sb-gallery{grid-template-columns:repeat(4,1fr)}
}

/* Kategorieseite */
/* Überschrift und Einleitung untereinander, nicht nebeneinander.
   Nebeneinander riss der Text vom Titel ab und wirkte wie eine Randnotiz —
   er gehört als Erklärung direkt unter die Überschrift. */
.sb-archive-head{margin-bottom:clamp(2rem,4vw,3rem)}
.sb-archive-head h1,.sb-archive-head h2{margin-bottom:var(--s3)}
.sb-archive-head p{max-width:52ch;color:var(--mute)}
.sb-archive-intro{max-width:52ch}
.sb-archive-intro p{margin:0 0 var(--s2);color:var(--mute)}
.sb-pagination{padding:var(--s5) 0 0}
.sb-pagination ul{list-style:none;display:flex;gap:var(--s2);padding:0;margin:0;
  font-family:var(--display);font-weight:300}
.sb-pagination a,.sb-pagination span{display:block;padding:.5rem .9rem;
  border:1px solid var(--line);text-decoration:none}
.sb-pagination .current{border-color:var(--ink);background:var(--ink);color:var(--paper)}

/* Seiten */
.sb-page{padding:var(--s5) 0}
.sb-prose{max-width:38rem}
/* Warenkorb, Kasse und Konto: volle Breite, aber der Fliesstext darin behaelt
   sein Mass. */
.sb-shop-body{max-width:none}
.sb-shop-body>p{max-width:var(--measure)}
.sb-prose h2{margin:var(--s5) 0 var(--s3)}

/* Warenkorb */
/* Warenkorb.
   Die Regeln nennen `table.shop_table` und `table.cart` mit, weil WooCommerce
   fuer beide eigene bringt: Rahmen mit Radius um die ganze Tabelle, und
   `table.cart img{width:32px}` — daran schrumpfte das Produktbild auf
   Briefmarkengroesse. Ohne die zusaetzliche Klasse verliert jede eigene
   Regel gegen sie. */
/* `table-layout:fixed`, sonst waechst die Tabelle auf die Mindestbreite
   ihres Inhalts und schiebt sich unter die Uebersicht daneben. Mit festen
   Spalten entscheidet der Satzspiegel, nicht der laengste Produktname. */
.sb-page .sb-cart table.shop_table{width:100%;table-layout:fixed;
  border:0;border-collapse:collapse;border-radius:0;margin:var(--s4) 0}
.sb-page .sb-cart table.shop_table th:nth-child(2),
.sb-page .sb-cart table.shop_table th:nth-child(4){width:6.5rem}
.sb-page .sb-cart table.shop_table th:nth-child(3){width:8.5rem}
.sb-page .sb-cart table.shop_table th:nth-child(5){width:2.25rem}
.sb-page .sb-cart table.shop_table th{font-family:var(--display);font-weight:300;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--steel);
  text-align:left;padding:0 var(--s2) var(--s2) 0;border-bottom:1px solid var(--ink)}
.sb-page .sb-cart table.shop_table td{padding:var(--s3) var(--s2) var(--s3) 0;
  border-top:0;border-bottom:1px solid var(--line);vertical-align:top}
.sb-cart .product-name{display:flex;gap:var(--s3);align-items:flex-start}
/* Ein Element mehr im Weg als `.woocommerce-cart table.cart img{width:32px}`,
   sonst schrumpft das Bild auf Briefmarkengroesse. */
.sb-page .sb-cart table.cart td img,.sb-page .sb-cart-media img{width:5rem;height:auto;
  aspect-ratio:5/6;object-fit:cover;box-shadow:none;max-width:none}
.sb-cart-media{flex:0 0 auto;display:block;line-height:0}
.sb-cart-title{font-family:var(--display);font-weight:700;line-height:1.25;
  min-width:0;overflow-wrap:anywhere}
.sb-cart-title a{text-decoration:none}
.sb-cart-title a:hover{color:var(--coral)}
.sb-cart .product-price,.sb-cart .product-subtotal{white-space:nowrap}
.sb-cart .product-price .sb-unit{display:block;font-size:.8rem}
.sb-cart .remove{font-size:1.4rem;text-decoration:none;color:var(--steel);line-height:1}
.sb-cart .remove:hover,.sb-cart .remove:focus-visible{color:var(--coral)}
/* Die Zeile mit Gutschein und Aktualisieren traegt zwei ungleiche Dinge:
   links etwas einzugeben, rechts etwas zu bestaetigen. */
.sb-cart .sb-cart-actions{display:flex;gap:var(--s3);flex-wrap:wrap;
  justify-content:space-between;align-items:flex-end;
  padding-top:var(--s4);border-bottom:0}
/* Feld und Knopf gehoeren zusammen: Ein Gutscheincode wird eingegeben und
   sofort eingeloest. Stand der Knopf darunter, sah es aus wie zwei Schritte.
   `nowrap` mit schrumpfendem Feld statt Umbruch — in der schmaleren Spalte
   der zweispaltigen Ansicht wich der Knopf sonst nach unten aus. */
.sb-cart .coupon{display:flex;gap:var(--s2);align-items:center;flex-wrap:nowrap}
.sb-cart .coupon label{flex:0 0 auto;font-family:var(--display);font-weight:300;
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);
  margin:0}
.sb-page .sb-cart .coupon input[type=text]{flex:1 1 auto;min-width:0;max-width:16rem}
.sb-cart .coupon .sb-cta{flex:0 0 auto;white-space:nowrap;padding:.75rem 1.4rem}
.sb-cart input[type=text],.sb-cart input[type=number]{font:400 1rem/1.2 var(--body);
  padding:.75rem .7rem;min-height:2.9rem;border:1px solid var(--ink);
  background:#fff;color:var(--ink);border-radius:0}
.sb-cart input:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
/* Das Mengenfeld im Warenkorb wie auf der Produktseite. */
.sb-cart .quantity input[type=number]{width:4.5rem;text-align:center}

@media (max-width:52rem){
  .sb-cart .product-name{flex-direction:column}
  .sb-cart .sb-cart-actions{flex-direction:column;align-items:stretch}
  .sb-cart .coupon{flex-wrap:wrap}
  .sb-cart .coupon label{flex:1 0 100%}
  .sb-page .sb-cart .coupon input[type=text]{max-width:none}
}

/* Startseite */
/* Das Einstiegsbild bekommt mehr Gewicht als der Text — bei Stoff ist es
   das eigentliche Argument. */
.sb-hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);
  gap:var(--gut);align-items:center;padding:clamp(2.5rem,7vw,6rem) 0 clamp(2rem,4vw,3rem)}
.sb-hero h1 em{font-style:normal;color:var(--coral)}
.sb-lede{max-width:34ch;margin:var(--s4) 0 var(--s4);font-size:1.15em}
.sb-hero figure{margin:0;position:relative}
.sb-hero figure img{aspect-ratio:5/4;object-fit:cover;width:100%}
.sb-hero figcaption{position:absolute;left:0;bottom:0;background:var(--paper);
  padding:.6rem 1rem .5rem;font-family:var(--display);font-weight:300;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}

/* Kasse */
.sb-checkout-cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);
  gap:var(--gut);align-items:start;padding:var(--s5) 0}
.sb-checkout-summary{position:sticky;top:var(--s4);background:#fff;
  border:1px solid var(--line);padding:var(--s4)}
.sb-checkout-summary h2{font-size:1.5rem;margin-bottom:var(--s3)}
/* Gutschein in der Uebersicht: eine Zeile, immer sichtbar, mit einer Linie
   von den Summen darueber abgesetzt. */
.sb-checkout-coupon{margin:var(--s4) 0;padding-top:var(--s4);
  border-top:1px solid var(--line)}
.sb-checkout-coupon label{display:block;font-family:var(--display);font-weight:300;
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);
  margin:0 0 .4rem}
.sb-checkout-coupon-row{display:flex;gap:var(--s2);align-items:stretch;flex-wrap:nowrap}
.sb-checkout .sb-checkout-coupon-row input[type=text]{flex:1 1 auto;min-width:0;margin:0}
.sb-checkout-coupon-row .sb-cta{flex:0 0 auto;white-space:nowrap;
  padding:.7rem 1.2rem;font-size:.95rem}
@media (max-width:40rem){
  .sb-checkout-coupon-row{flex-wrap:wrap}
  .sb-checkout-coupon-row .sb-cta{flex:1 0 100%}
}
.sb-checkout h3{font-family:var(--display);font-size:1.4rem;margin:var(--s4) 0 var(--s3)}
.sb-checkout p.form-row{margin:0 0 var(--s3);max-width:none}
.sb-checkout label{display:block;font-family:var(--display);font-weight:300;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
  margin-bottom:.35rem}
.sb-checkout input[type=text],.sb-checkout input[type=email],.sb-checkout input[type=tel],
.sb-checkout textarea,.sb-checkout select,.sb-checkout .select2-selection{
  width:100%;font:400 1rem/1.4 var(--body);padding:.75rem;
  border:1px solid var(--ink);background:#fff;color:var(--ink)}
.sb-checkout input:focus-visible,.sb-checkout textarea:focus-visible,
.sb-checkout select:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.sb-checkout table{width:100%;border-collapse:collapse;font-size:.95rem}
.sb-checkout table th,.sb-checkout table td{padding:.55rem 0;border-bottom:1px solid var(--line);text-align:left}
.sb-checkout .order-total{font-family:var(--display);font-weight:700;font-size:1.15rem}
.sb-checkout .wc_payment_methods{list-style:none;padding:0;margin:var(--s3) 0}
.sb-checkout .wc_payment_method label{text-transform:none;letter-spacing:0;
  font-family:var(--body);font-size:1rem;color:var(--ink);display:inline}
.sb-checkout #place_order{width:100%;background:var(--coral);color:#fff;border:0;
  font-family:var(--display);font-weight:700;font-size:1.1rem;padding:1rem;cursor:pointer;margin-top:var(--s3)}
.sb-checkout #place_order:hover,.sb-checkout #place_order:focus-visible{background:var(--ink);outline:none}

/* Konto */
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0 0 var(--s4);
  display:flex;flex-wrap:wrap;gap:var(--s3);border-bottom:1px solid var(--line);padding-bottom:var(--s2)}
.woocommerce-MyAccount-navigation a{font-family:var(--display);font-weight:300;
  text-decoration:none;padding-bottom:.3rem;border-bottom:2px solid transparent}
.woocommerce-MyAccount-navigation .is-active a{border-bottom-color:var(--coral);font-weight:700}
.sb-account-content{padding-bottom:var(--s5)}
.sb-account-content table{width:100%;border-collapse:collapse}
.sb-account-content th{font-family:var(--display);font-weight:300;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel);text-align:left;
  padding:0 var(--s2) var(--s2) 0;border-bottom:1px solid var(--line)}
.sb-account-content td{padding:var(--s2) var(--s2) var(--s2) 0;border-bottom:1px solid var(--line)}

@media (max-width:52rem){
  .sb-hero{grid-template-columns:1fr}
  .sb-hero figure{order:-1}
  .sb-checkout-cols{grid-template-columns:1fr}
  .sb-checkout-summary{position:static}
}


/* Feste Vierergruppe, wo genau vier Dinge gezeigt werden. */
.sb-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:60rem){.sb-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Der letzte Beitrag — über die volle Breite, als eine grosse Fläche.
   Ein Beitrag verdient mehr Raum als eine Kachel, sonst geht er neben den
   Produkten unter. */
.sb-journal{background:var(--ink);color:var(--paper);margin:clamp(3rem,7vw,5.5rem) 0 0}
.sb-journal-link{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:var(--gut);align-items:center;text-decoration:none;color:inherit;
  padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(2rem,4vw,3rem)}
.sb-journal-media{overflow:hidden}
.sb-journal-media img{width:100%;aspect-ratio:3/2;object-fit:cover;
  transform:scale(1.015);transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.sb-journal-link:hover .sb-journal-media img,
.sb-journal-link:focus-visible .sb-journal-media img{transform:scale(1.05)}
.sb-journal-text h2{color:var(--paper);margin-bottom:var(--s3)}
.sb-journal-text p{color:#ded8d0;max-width:38ch}
.sb-journal .eyebrow{color:var(--mustard)}
.sb-journal .sb-more{display:inline-block;margin-top:var(--s3);font-family:var(--display);
  font-weight:700;color:var(--coral);border-bottom:2px solid var(--coral);padding-bottom:.1rem}
.sb-journal-link:focus-visible{outline:2px solid var(--coral);outline-offset:-4px}
@media (max-width:60rem){
  .sb-journal-link{grid-template-columns:1fr}
  .sb-hero{grid-template-columns:1fr}
}


/* Das Meterband — das eine Merkmal, an das man sich erinnert.
   Keine Verzierung: es trägt die Aussage, dass ab 0.1 Meter in Schritten
   von 0.1 zugeschnitten wird. Genau das unterscheidet den Laden von
   Anbietern, die nur ganze Meter abgeben. Es erscheint einmal je Seite. */
.sb-meter{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);
  padding:0 0 .9rem;overflow:hidden}
.sb-meter .ticks{display:flex;align-items:flex-start;height:1.6rem}
.sb-meter .ticks span{flex:1 0 auto;width:calc(100%/50);border-left:1px solid var(--ink);
  height:.42rem;opacity:.42}
.sb-meter .ticks span:nth-child(5n+1){height:.95rem;opacity:1}
.sb-meter .ticks span:nth-child(10n+1){height:1.5rem;opacity:1;border-left-width:2px}
.sb-meter .read{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  font-family:var(--display);font-weight:300;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel)}
.sb-meter .read strong{font-weight:700;color:var(--ink);letter-spacing:-.01em;
  text-transform:none;font-size:1rem;text-align:center}
@media (max-width:52rem){
  .sb-meter .read{flex-direction:column;align-items:flex-start;gap:.3rem}
  .sb-meter .read strong{text-align:left}
}

/* Bildunterschrift im Einstieg, wie auf den Zielseiten. */
.sb-hero figcaption{position:absolute;left:0;bottom:0;background:var(--paper);
  padding:.6rem 1rem .5rem;font-family:var(--display);font-weight:300;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}

/* Beitragsübersicht: der erste Beitrag gross, die übrigen im Raster. */
.sb-journal-lead{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:var(--gut);align-items:center;text-decoration:none;color:inherit;
  padding:var(--s4) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:var(--s5)}
.sb-journal-lead .sb-more{display:inline-block;margin-top:var(--s3);
  font-family:var(--display);font-weight:700;color:var(--coral);
  border-bottom:2px solid var(--coral);padding-bottom:.1rem}
.sb-journal-lead:focus-visible{outline:2px solid var(--coral);outline-offset:4px}
@media (max-width:60rem){.sb-journal-lead{grid-template-columns:1fr}}

/* Einzelner Beitrag.
   Der Text steht in einer schmalen Spalte — ein Beitrag wird gelesen, nicht
   ueberflogen, und eine Zeile ueber die halbe Bildschirmbreite liest sich
   schlecht. Das Bild dagegen laeuft ueber die volle Breite: Es zeigt das
   fertige Stueck, und darum geht es. */
/* Begrenzt wird der Titel, nicht die Zeile darueber: Absaetze tragen
   allgemein das Textmass (34ch), und darin bricht
   „Shirts · Für Anfänger · 2. März 2022" mitten im Datum um. Die Zeile ist
   kein Fliesstext, sondern eine Angabe — sie darf so breit sein wie noetig. */
/* Weniger Luft oben: Die Brotkrumen stehen jetzt davor. */
.sb-post-head{padding:var(--s3) 0 var(--s4)}
.sb-post-head .eyebrow{max-width:none}
.sb-post-head h1{margin:0;max-width:18ch}
.sb-post-media{margin:0 0 clamp(2rem,5vw,3.5rem)}
.sb-post-media img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.sb-post-body>*{max-width:var(--measure)}
.sb-post-body .sb-lede{font-size:1.15rem;line-height:1.6}
.sb-post-body h2{margin:clamp(2.5rem,6vw,4rem) 0 var(--s3)}
/* Die Produkte sind kein Fliesstext — sie duerfen die ganze Breite haben. */
.sb-post-body .sb-post-products{max-width:none;margin-bottom:var(--s5)}
.sb-post-back{padding:0 0 clamp(2.5rem,6vw,4rem)}
.sb-post-back a{font-family:var(--display);font-weight:700;color:var(--coral);
  text-decoration:none;border-bottom:2px solid var(--coral);padding-bottom:.1rem}
@media (max-width:52rem){
  .sb-post-media img{aspect-ratio:4/3}
}

/* Schnittmuster-Marken.
   Die Eckwerte stehen als Zeile unter dem Einstieg — dieselbe Rolle wie das
   Meterband beim Stoff: die eine Angabe, die vor dem Kauf zaehlt. Kein
   Kasten, keine Karten; nur Linien und Raum. */
/* Einleitung und Markenzeichen nebeneinander. */
.sb-marke-head{margin-bottom:var(--s4)}
.sb-marke-lead{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:var(--gut);align-items:start;margin-bottom:clamp(2rem,4vw,3rem)}
.sb-marke-lead-solo{grid-template-columns:1fr}
.sb-marke-intro p{max-width:52ch}
.sb-marke-intro p:last-child{margin-bottom:0}

/* Zwei der drei Logos liegen als Rastergrafik mit weissem Grund vor — auf
   dem warmen Papier faellt das als heller Fleck auf. Die Mischform
   `multiply` laesst das Weiss verschwinden und die Farben stehen; ohne
   Kasten, ohne Rahmen. */
.sb-marke-logo{margin:0;justify-self:end}
/* Feste Hoehe, nicht bloss eine Obergrenze: Das Lybstes-Logo ist ein SVG
   ohne eigene Masse. Mit `height:auto` hat der Browser nichts, woraus er
   eine Groesse ableiten koennte — es fiel auf null zusammen und war
   schlicht nicht da. `object-fit` faengt den Fall ab, dass ein sehr breites
   Logo an die Spaltenbreite stoesst: Es wird eingepasst statt gestaucht. */
.sb-marke-logo img{height:5.5rem;width:auto;max-width:100%;
  object-fit:contain;object-position:right center;
  display:block;mix-blend-mode:multiply}
@media (max-width:52rem){
  .sb-marke-lead{grid-template-columns:1fr;gap:var(--s4)}
  /* Auf schmalen Bildschirmen zuerst das Zeichen, dann der Text — sonst
     stuende es nach zwei Absaetzen und niemand saehe es. */
  .sb-marke-logo{order:-1;justify-self:start}
  .sb-marke-logo img{height:4rem;object-position:left center}
}
.sb-facts{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);margin:0 0 var(--s5);
  padding:var(--s3) 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.sb-facts div{display:flex;flex-direction:column;gap:.15rem}
.sb-facts dt{font-family:var(--display);font-weight:300;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.sb-facts dd{margin:0;font-family:var(--display);font-weight:700;font-size:1.05rem}
.sb-facts dd .woocommerce-Price-amount{font-family:inherit}
.sb-marke-weiter{margin:var(--s6) 0 var(--s7);padding-top:var(--s4);
  border-top:1px solid var(--line)}
.sb-marke-weiter h2{margin:0 0 var(--s3)}
.sb-marke-weiter ul{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.sb-marke-weiter a{font-family:var(--display);font-weight:700;text-decoration:none;
  border-bottom:2px solid var(--line);padding-bottom:.1rem}
.sb-marke-weiter a:hover,.sb-marke-weiter a:focus-visible{border-bottom-color:var(--coral);
  color:var(--coral);outline:none}

/* Warenkorb und Konto.
   Nur Zeichen, kein Text: Zwei Wörter mehr im Kopf drängen die Navigation,
   und beide Zeichen sind eingeführt genug, um ohne Beschriftung zu tragen.
   Der Text bleibt für Vorleseprogramme im Markup und erscheint auf breiten
   Bildschirmen beim Überfahren nicht — er würde nur springen. */
.sb-actions{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto}
.sb-action{position:relative;display:inline-flex;align-items:center;
  color:var(--ink);text-decoration:none;padding:.35rem;margin:-.35rem}
.sb-action:hover,.sb-action:focus-visible{color:var(--coral);outline:none}
.sb-action:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.sb-action svg{display:block}
.sb-action-text{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* Die Zahl sitzt am Zeichen, nicht daneben — sonst wandert das Zeichen,
   sobald etwas im Warenkorb liegt. */
.sb-action-count{position:absolute;top:-.15rem;right:-.35rem;
  min-width:1.15rem;height:1.15rem;padding:0 .25rem;
  display:grid;place-items:center;
  background:var(--coral);color:#fff;border-radius:999px;
  font-family:var(--body);font-size:.7rem;line-height:1;
  font-variant-numeric:tabular-nums}

/* Zugelegt-Feld — die Bestätigung dort, wo sie hingehört.
   Vorher stand über der ganzen Seite ein Balken, der die Überschrift nach
   unten schob und stehen blieb, bis man weiterklickte. Für „ich habe es
   gehört" ist das zu viel Apparat. Jetzt hängt die Bestätigung unter dem
   Warenkorb-Zeichen — dort, wo der Artikel eben hingewandert ist — und geht
   nach vier Sekunden von selbst wieder.

   Ohne Skript: Eine Zeitregel im Stil kann das genauso, und sie kostet keine
   Anfrage (Prinzip III). Ohne Schlagschatten auf weissem Grund: Die Linie in
   Tinte trennt schärfer als ein Weichzeichner, und das Dreieck zeigt, woher
   das Feld kommt. */
/* Verankert an der Kopfzeile, nicht am Zeichen: Auf schmalen Bildschirmen
   steht rechts vom Warenkorb noch der Menüknopf. Wäre das Feld am Zeichen
   festgemacht, schöbe es sich um dessen Breite nach links — bei 390 px stand
   es 42 px über den linken Rand hinaus. Die Kopfzeile trägt aussen den
   Seitenrand, deshalb `var(--gut)` statt `0`. */
.sb-zugelegt{position:absolute;top:calc(100% + .4rem);
  right:calc(var(--gut) - .35rem);z-index:70;
  width:min(21rem,calc(100% - 2*var(--gut)));
  background:var(--paper);border:1px solid var(--ink);padding:var(--s3);
  display:grid;grid-template-columns:1fr;gap:var(--s2) var(--s3);
  text-align:left;
  animation:sb-zugelegt-auf .2s cubic-bezier(.22,.61,.36,1) both,
            sb-zugelegt-zu .3s ease-in 4s forwards}
.sb-zugelegt-bild{grid-template-columns:auto 1fr}
.sb-zugelegt img{width:2.75rem;height:3.4rem;object-fit:cover;
  align-self:start;border:1px solid var(--line)}
.sb-zugelegt-text{min-width:0}
.sb-zugelegt span{display:block;font-size:.92rem;line-height:1.4;
  hyphens:auto;overflow-wrap:anywhere}
/* Der Weg zum Warenkorb ist hier ein Nachsatz, kein zweiter Hauptknopf —
   das Zeichen darüber führt bereits dorthin. */
.sb-zugelegt .sb-cta-quiet{display:inline-block;margin-top:var(--s2);
  border-width:1px;padding:.35rem .8rem;font-size:.82rem}
/* Wer hinschaut oder mit der Tastatur hinspringt, bekommt Zeit: Das
   Ausblenden hält an, solange Zeiger oder Fokus im Feld sind. */
.sb-zugelegt:hover,.sb-zugelegt:focus-within{animation-play-state:paused}
/* Das Dreieck zeigt auf das Zeichen. Ein gedrehtes Quadrat mit zwei Kanten —
   so bleibt die Linie durchgehend, ohne zweite Farbe. */
.sb-zugelegt::before{content:"";position:absolute;top:-.35rem;right:.75rem;
  width:.6rem;height:.6rem;background:var(--paper);
  border-left:1px solid var(--ink);border-top:1px solid var(--ink);
  transform:rotate(45deg)}
@keyframes sb-zugelegt-auf{from{opacity:0;transform:translateY(-.4rem)}
  to{opacity:1;transform:none}}
@keyframes sb-zugelegt-zu{from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-.3rem);visibility:hidden}}
/* Wer Bewegung abbestellt hat, bekommt keine — das Verschwinden bleibt,
   denn das ist keine Zierde, sondern der Zweck. */
@media (prefers-reduced-motion:reduce){
  .sb-zugelegt{animation:sb-zugelegt-zu .01s linear 4s forwards}
}
/* Schmal: Das Feld nimmt die Breite der Kopfzeile ein und verliert das
   Dreieck. Es zeigte sonst auf den Menüknopf statt auf den Warenkorb — und
   ein Zeiger, der auf das Falsche deutet, ist schlechter als keiner. */
@media (max-width:30rem){
  .sb-zugelegt::before{display:none}
}

/* Meldungen von WooCommerce.
   Sie kamen als Kasten mit gruenem Balken oben auf blaeulichem Grund — nicht
   unsere Sprache. Jede Regel traegt `.sb-page` davor, weil WooCommerce
   dieselben Klassen mit derselben Spezifitaet belegt und spaeter laedt;
   ohne die zusaetzliche Stufe passiert sichtbar nichts. */
.sb-page .woocommerce-message,
.sb-page .woocommerce-info,
.sb-page .woocommerce-error{
  list-style:none;margin:0 0 var(--s3);padding:var(--s3) var(--s4);
  background:var(--surface);border:0;border-left:3px solid var(--coral);
  border-radius:0;color:var(--ink);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  font-family:var(--body);line-height:1.5}
.sb-page .woocommerce-message::before,
.sb-page .woocommerce-info::before,
.sb-page .woocommerce-error::before{content:none}
.sb-page .woocommerce-error{border-left-color:var(--ink);
  flex-direction:column;align-items:flex-start;gap:.35rem}
.sb-page .woocommerce-error li{margin:0}
.sb-page .woocommerce-message .sb-cta-quiet,
.sb-page .woocommerce-info .sb-cta-quiet{margin-left:auto}

/* Zwei Spalten auf der Warenkorbseite: links die Positionen, rechts die
   Summe. Sie laeuft beim Blaettern mit — wer Mengen aendert, will sehen, was
   das mit dem Betrag macht, ohne ans Seitenende zu scrollen.
   Das Raster sitzt am Behaelter, den WooCommerce um alles legt; Formular und
   Summenblock sind dessen Kinder. */
.woocommerce-cart .sb-page .woocommerce{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,29rem);
  gap:var(--s6) clamp(2rem,5vw,4.5rem);align-items:start}
.woocommerce-cart .sb-page .woocommerce-notices-wrapper{grid-column:1 / -1}
/* `min-width:0`, sonst darf der Rasterplatz auf die Mindestbreite seines
   Inhalts wachsen: Die Tabelle lief bis 880 px, wo die Uebersicht schon bei
   860 begann — die Entfernen-Spalte verschwand halb dahinter, und der
   Abstand sah aufgebraucht aus, obwohl er da war. */
.woocommerce-cart .sb-page .woocommerce-cart-form{grid-column:1;margin:0;min-width:0}
.woocommerce-cart .sb-page .cart-collaterals{grid-column:2;margin:0;
  position:sticky;top:var(--s4)}
/* WooCommerce laesst den Summenblock rechts schwimmen und gibt ihm 48 %
   der Breite — sinnvoll, solange er unter dem Warenkorb steht. In unserer
   eigenen Spalte macht das aus 464 px derer 223, und der Knopf schrumpft
   mit. Hier steht er nicht mehr im Weg herum, sondern fuellt die Spalte. */
.sb-page .woocommerce .cart-collaterals .cart_totals{float:none;width:100%;
  background:var(--surface);padding:var(--s4)}
.sb-page .cart_totals h2{font-size:1.35rem;margin:0 0 var(--s3)}
.sb-page .cart_totals table.shop_table{width:100%;border:0;border-collapse:collapse;
  border-radius:0;margin:0}
/* Beschriftung ueber den Betrag statt daneben: In einer Spalte von 24 rem
   stossen „Zwischensumme" in gesperrten Versalien und der Betrag sonst
   aneinander. Untereinander hat beides Luft, und die Betraege stehen
   buendig. */
.sb-page .cart_totals table.shop_table tr{display:block;padding:var(--s2) 0;
  border-bottom:1px solid var(--line)}
.sb-page .cart_totals table.shop_table th,
.sb-page .cart_totals table.shop_table td{display:block;width:auto;padding:0;
  border:0;text-align:left}
.sb-page .cart_totals table.shop_table th{font-family:var(--display);font-weight:300;
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);
  margin-bottom:.2rem}
.sb-page .cart_totals table.shop_table td{font-size:1.05rem}
.sb-page .cart_totals .order-total{border-bottom:0;border-top:2px solid var(--ink);
  margin-top:var(--s2);padding-top:var(--s3)}
.sb-page .cart_totals .order-total td{font-family:var(--display);font-weight:700;
  font-size:1.35rem}
.sb-page .cart_totals .woocommerce-shipping-destination{font-size:.85rem;color:var(--steel)}

/* Der Weg zur Kasse ist die eine Handlung auf dieser Seite. WooCommerce
   faerbt ihn violett; hier traegt er dieselbe Farbe wie jeder Kaufknopf. */
/* Der Behaelter des Knopfes ist bei WooCommerce schmalgehend; ohne
   `display:block` und volle Breite schrumpft er auf die Textbreite, und der
   Knopf klebt rechts in der Ecke statt die Spalte zu fuellen. */
.sb-page .wc-proceed-to-checkout{display:block;width:100%;margin-top:var(--s4);padding:0}
.sb-page a.checkout-button.button.alt{display:block;width:100%;text-align:center;
  white-space:nowrap;
  background:var(--coral);color:#fff;border:0;border-radius:0;
  font-family:var(--display);font-weight:700;font-size:1.05rem;
  padding:.95rem 1.9rem;text-decoration:none}
.sb-page a.checkout-button.button.alt:hover,
.sb-page a.checkout-button.button.alt:focus-visible{background:var(--ink);color:#fff;outline:none}
.sb-page a.checkout-button.button.alt:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media (max-width:60rem){
  /* Untereinander, und die Summe steht dann nicht mehr fest: Auf einem
     schmalen Bildschirm nimmt sie sonst die halbe Hoehe weg. */
  .woocommerce-cart .sb-page .woocommerce{grid-template-columns:1fr}
  .woocommerce-cart .sb-page .woocommerce-cart-form,
  .woocommerce-cart .sb-page .cart-collaterals{grid-column:1;position:static}
}

/* Einstiege auf den Uebersichtsseiten.
   Bild oben, darunter Name, Anzahl und ein Satz. Kein Kasten und kein
   Schatten — die Reihe lebt vom Bild und vom Weissraum dazwischen. */
.sb-entries-section{padding:0 0 clamp(2.5rem,6vw,4rem)}
.sb-entries{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:var(--s5) var(--gut)}
.sb-entry{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.sb-entry-media{display:block;overflow:hidden;background:var(--surface);
  aspect-ratio:5/6;position:relative}
/* Eine Stufe mehr als `.woocommerce img{height:auto}` — auf den
   Kategorieseiten gewinnt WooCommerce sonst, und unter jedem Bild bleibt ein
   grauer Streifen stehen. Zum vierten Mal dieselbe Falle. */
.sb-entries .sb-entry-media img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;transform:scale(1.015);
  transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.sb-entries .sb-entry:hover .sb-entry-media img,
.sb-entries .sb-entry:focus-visible .sb-entry-media img{transform:scale(1.06)}
.sb-entry-body{display:block;padding-top:var(--s3)}
.sb-entry-title{display:block;font-family:var(--display);font-weight:700;
  font-size:1.1rem;line-height:1.2;transition:color .25s ease}
.sb-entry:hover .sb-entry-title,
.sb-entry:focus-visible .sb-entry-title{color:var(--coral)}
.sb-entry-count{display:block;font-family:var(--body);font-size:.8rem;
  color:var(--steel);margin-top:.2rem}
.sb-entry-text{display:block;margin-top:.5rem;line-height:1.5;color:var(--mute);
  max-width:34ch}
.sb-entry:focus-visible{outline:2px solid var(--coral);outline-offset:4px}
/* Die Ueberschrift ueber der vollstaendigen Liste darunter. */
.sb-entries-more{margin:0 0 var(--s4);padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){
  .sb-entries .sb-entry-media img,
  .sb-entries .sb-entry:hover .sb-entry-media img{transform:none;transition:none}
}

/* ---- Menü: Ebenen und Hamburger ------------------------------------------
   Der Umschalter ist ein Kontrollkästchen, kein Skript: so lässt sich das
   Menü auch ohne JavaScript öffnen. Auf breiten Bildschirmen ist er
   ausgeblendet und die Ebenen klappen beim Überfahren auf. */
.sb-nav-toggle{position:absolute;opacity:0;pointer-events:none}
.sb-burger{display:none;cursor:pointer;padding:.6rem;margin:-.6rem -.6rem -.6rem 0;
  flex-direction:column;gap:.32rem;align-self:center}
.sb-burger span{display:block;width:1.5rem;height:2px;background:var(--ink);
  transition:transform .25s ease,opacity .25s ease}
.sb-nav-toggle:focus-visible+.sb-burger{outline:2px solid var(--coral);outline-offset:2px}

@media (max-width:60rem){
  .sb-top{position:relative;align-items:center}
  /* Rechtsbündig: Zeichen und Umschalter am rechten Rand, das Logo links.
     Der Warenkorb bleibt sichtbar, auch wenn das Menü zu ist — wer etwas
     drin hat, soll ihn nicht erst suchen müssen. */
  .sb-actions{order:1;margin-left:auto;gap:var(--s3)}
  .sb-burger{display:flex;order:2;margin-left:0}
  .sb-top nav{order:3;flex-basis:100%;display:none;padding-top:var(--s3)}
  .sb-top .sb-nav{margin-left:0}
  .sb-nav-toggle:checked~nav{display:block}
  .sb-top .sb-menu{flex-direction:column;align-items:stretch;gap:0}
  .sb-top .sb-menu>li{border-top:1px solid var(--line)}
  .sb-top .sb-menu>li>a{display:block;padding:.85rem 0;white-space:normal}
  /* Das Panel wird zur eingerueckten Liste statt zur Ueberlagerung. Die
     Bildkacheln entfallen: Sie wuerden das Menu unbedienbar lang machen. */
  .sb-panel-trigger{display:block;width:100%;text-align:left;padding:.85rem 0}
  .sb-panel{position:static;border:0;background:transparent}
  .sb-panel-inner{grid-template-columns:1fr;gap:0;padding:0 0 .6rem 1.1rem}
  .sb-panel-head,.sb-panel-promos{display:none}
  .sb-panel-overview{margin:0 0 .4rem}
  .sb-panel-group{margin:0;padding:0;border-bottom:0;grid-template-columns:1fr;gap:0}
  .sb-panel-group+.sb-panel-group{border-top:1px solid var(--line);padding-top:.4rem;
    margin-top:.4rem}
  .sb-panel-group a{padding:.45rem 0;color:var(--steel)}
  /* Drei Striche werden zum Kreuz. */
  .sb-nav-toggle:checked+.sb-burger span:nth-child(1){transform:translateY(.55rem) rotate(45deg)}
  .sb-nav-toggle:checked+.sb-burger span:nth-child(2){opacity:0}
  .sb-nav-toggle:checked+.sb-burger span:nth-child(3){transform:translateY(-.55rem) rotate(-45deg)}
}

/* Einheit am Mengenfeld (T010). Sie steht als eigenes Feld neben der Zahl,
   nicht darin: im Feld würde sie die Dezimaleingabe stören, davor würde sie
   als Beschriftung gelesen. So bleibt sie, was sie ist — die Angabe, worin
   gerechnet wird. `p{max-width:var(--measure)}` greift hier nicht, weil kein
   Absatz beteiligt ist. */
.sb-product-buy .sb-qty-unit{display:flex;flex-direction:column;justify-content:center;
  gap:.1rem;padding-right:var(--s2);max-width:11rem}
.sb-product-buy .sb-qty-unit-name{font-family:var(--display);font-weight:700;
  font-size:1.05rem;line-height:1.1;color:var(--ink)}
.sb-product-buy .sb-qty-unit-hint{font-size:.8rem;line-height:1.25;color:var(--steel)}
@media (max-width:40rem){
  .sb-product-buy .sb-qty-unit{max-width:none;padding-right:0}
}

/* Farbauswahl über der Kachelliste (Feature 005).
   Jede Farbe ist ein Link, kein Formular — deshalb braucht es kein Skript,
   und die Tastatur kommt ohne Zutun durch. Die gewählte Farbe ist nicht nur
   farblich markiert, sondern trägt ein Kreuz und einen Satz für
   Vorleseprogramme: Wer Farben schlecht unterscheidet, soll trotzdem sehen,
   was aktiv ist. */
.sb-farbfilter{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3);
  margin:0 0 var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.sb-farbfilter-titel{font-family:var(--display);font-weight:300;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.sb-farbfilter ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin:0;padding:0}
.sb-farbe{display:inline-flex;align-items:baseline;gap:.35rem;text-decoration:none;
  padding:.3rem .7rem;border:1px solid var(--line);background:#fff;color:var(--ink);
  font-size:.92rem;line-height:1.3}
.sb-farbe:hover,.sb-farbe:focus-visible{border-color:var(--ink)}
.sb-farbe-zahl{font-size:.78rem;color:var(--steel);font-variant-numeric:tabular-nums}
.sb-farbe.is-aktiv{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sb-farbe.is-aktiv .sb-farbe-zahl{color:var(--paper);opacity:.7}
.sb-farbe-weg{font-size:1rem;line-height:1}
.sb-farbfilter-alle{font-family:var(--display);font-weight:700;color:var(--coral);
  text-decoration:none;font-size:.92rem}
.sb-farbfilter-alle:hover{text-decoration:underline;text-underline-offset:.25em}
/* Nur für Vorleseprogramme — sichtbar nichts, hörbar alles. */
.sb-nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media (max-width:30rem){
  .sb-farbfilter{gap:var(--s2)}
  .sb-farbfilter ul{gap:.35rem}
  .sb-farbe{padding:.3rem .55rem;font-size:.88rem}
}