/* =============================================================
   Studio Kamélie – shop.css
   Zielordner: /srv/www/studio-kamelie/public/assets/css/shop.css

   Aufbau wie pages.css: nummerierte Sektionen, Maße aus der
   Vorlage, Herleitung im Kommentar.

   -------------------------------------------------------------
   MASSSTAB DER MESSUNG
   -------------------------------------------------------------
   Die Werte der Sektionen 1 und 2 stammen aus einem Bildschirm-
   foto von studio-kamelie.de/shop, NICHT aus DevTools. Anders als
   bei der Galerie auf /kurse/detail geht die Rechnung hier aber
   glatt auf und bestätigt sich selbst:

     Weißer Block   1027 gemessen  ->  1028 = 980 + 24 je Seite,
                    derselbe Block wie .start-willkommen
     Kategoriereihe 3 x 306 + 2 x 31 = 980, exakt die Inhaltsbreite
     Sektionsluft   67 oben / 41 unten -> 63/43 wie Sektion 2

   Der Maßstab ist damit 1:1. Einzelwerte, die sich nicht
   gegenrechnen lassen, sind unten als NICHT BELEGT markiert.

   -------------------------------------------------------------
   ALTBESTAND ENTFERNT
   -------------------------------------------------------------
   Die bisherige Fassung ist mit der letzten Shop-Seite entfallen.
   Sie zeigte auf sechs Variablen, die es in main.css nicht gibt
   (--clr-surface, --radius, --fz-md, --fz-sm, --fz-xl,
   --clr-accent-lt); jede Regel darauf fiel still aus.

   OFFEN: main.css hat unter "SHOP" noch .produkt-grid,
   .produkt-card*, .warenkorb-table und .warenkorb-total. Die
   Klassen benutzt keine Seite mehr - das ist toter Code, aber in
   einer fremden Datei und deshalb hier nicht angefasst.
   ============================================================= */


/* =============================================================
   1 – SHOP: HERO   (/shop)

   Baugleich mit Sektion 2 von pages.css (.start-willkommen):
   Hintergrundbild bei 40 % Deckkraft über ::before, darüber ein
   weißer Block von 1028 Breite. Eigene Klassennamen, weil die
   Sektion nicht auf der Startseite steht und der Block hier keine
   zweispaltige Aufteilung Bild | Text hat.

   Innen:
     Headline   Agathe Ledden 72, zentriert, line-height normal.
                Kein Link – es gibt kein Ziel über diese Seite
                hinaus.
     Karussell  Produktstreifen, Bauweise von .galerie (Sektion 9
                in pages.css) übernommen, Kachelhöhe 270 statt
                380/464.

   Gemessen: Block y487-1002, Sektion y420-1043.

   -------------------------------------------------------------
   GEÄNDERT: AUS DEM BILDERSTREIFEN IST EIN KARUSSELL GEWORDEN
   -------------------------------------------------------------

   Im Hero lag bisher ein .galerie-Streifen aus
   assets/img/shop-start/, gesteuert von galerie.js: jedes Bild ein
   <button>, der die Lightbox öffnet. Jetzt stehen dort Produkte,
   und die müssen auf ihre Seite führen. Eigene Klasse .karussell,
   eigenes Skript assets/js/karussell.js.

   DIE GESTALTUNG IST VON .galerie ÜBERNOMMEN, nicht neu erfunden:
   Bahn als Flexzeile mit verstecktem Scrollbalken, Lücke 8,
   scroll-snap auf die Kachelkante, runde Pfeile 44 mit Schatten,
   -12 in den Rand gezogen. Die Werte stehen in pages.css Sektion 9
   und sind dort belegt. Nur zwei Dinge sind anders:

     KACHELN SIND QUADRATISCH statt aspect-ratio aus dem Bild.
     Die Vorlage brauchte je Bild getimagesize(), damit die Bahn
     ihre Breite kennt, bevor die Bilder geladen sind - über das
     ganze Sortiment bei jedem Aufruf der Landeseite. Ein festes
     Quadrat kommt ohne einen einzigen Dateizugriff aus.

     object-fit: contain STATT cover, und die Fläche bleibt weiß
     statt lila-hell. Dieselbe Entscheidung wie im Produktraster
     (Sektion 4) und aus demselben Grund: cover beschnitte
     Kunstdrucke, und ein farbiger Streifen neben einem Kunstdruck
     sähe nach Fehler aus.

   -------------------------------------------------------------
   ENTFERNT: DER ABSTAND 73 UNTER DER HEADLINE
   -------------------------------------------------------------

   Er stand als NICHT BELEGT aus einem Bildschirmfoto darin und
   ging rechnerisch um rund 40 nicht auf. Jetzt trägt die Headline
   denselben Abstand wie überall sonst: keinen. Der Reset in
   main.css setzt alle Ränder auf 0, .start-willkommen__box h1
   schreibt margin-bottom: 0 ausdrücklich fest, und dort schließt
   .start-willkommen__cols unmittelbar an. Die Luft kommt aus der
   Zeilenhöhe der 72er Headline und dem Innenabstand des weißen
   Blocks - genau wie auf der Startseite.

   .shop-hero__streifen hat deshalb KEINE eigene Regel mehr. Das
   Element bleibt im HTML, damit die Struktur der Vorlage erhalten
   bleibt und ein späterer Abstand einen Platz hat.
   ============================================================= */
.shop-hero {
    position: relative;
    padding-block: 63px 43px;
    isolation: isolate;
}

/* Deckkraft liegt auf dem Bild, nicht als Overlay darüber –
   dieselbe Lösung wie auf der Startseite. */
.shop-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--section-bg);
    background-size: cover;
    background-position: center;
    opacity: .4;
}

.shop-hero__box {
    width: min(calc(var(--content-w) + 48px), 100% - 2 * var(--gutter));
    margin-inline: auto;
    background: var(--clr-white);
    padding: 22px 24px 24px;
}

.shop-hero__box h1 {
    text-align: center;
    line-height: normal;
    margin-bottom: 0;
}

/* --- Karussell ----------------------------------------------
   Kachelhöhe 270 (gemessen), und die Bahn darf nur so breit
   werden wie der Blockinhalt. .galerie steht auf 1216 – das ist
   die Breite auf /atelier und der Startseite, hier liefe sie über
   den weißen Block hinaus. */
.karussell {
    --karussell-h: 270px;
    position: relative;
    width: 100%;
}

/* Lücke 8 und versteckter Scrollbalken wie .galerie__track.
   scroll-behavior und scroll-snap schaltet karussell.js für die
   Dauer einer Pfeilfahrt ab: Snap rastet bei jedem gesetzten
   scrollLeft sofort ein und machte aus der Animation ein Springen.
   Ohne JavaScript bleiben beide wirksam und die Bahn ist ein
   gewöhnlicher Scrollbereich. */
.karussell__track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.karussell__track::-webkit-scrollbar { display: none; }

/* Quadratisch: Höhe und Breite aus derselben Variablen. Damit
   steht die Breite der Bahn fest, ohne dass ein einziges Bild
   vermessen werden muss. */
.karussell__item {
    flex: 0 0 auto;
    width: var(--karussell-h);
    height: var(--karussell-h);
    background: var(--clr-white);
    scroll-snap-align: start;
    display: block;
}

/* Der Link soll sich nicht wie Fließtext verhalten: main.css gibt
   jedem a beim Überfahren eine Unterstreichung. Bei einer Kachel
   aus einem Bild bliebe sie unsichtbar, bei einem fehlenden Bild
   stünde plötzlich ein unterstrichener alt-Text da. */
.karussell__item:hover { text-decoration: none; }

.karussell__item img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Pfeile: Maße, Schatten und Randversatz aus .galerie__nav
   übernommen, damit sich die beiden Streifen der Website gleich
   anfühlen. -12 zieht sie in den 24er Innenabstand des weißen
   Blocks hinein, nicht darüber hinaus. */
.karussell__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--clr-white);
    color: var(--clr-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    cursor: pointer;
    z-index: 2;
    transition: background .2s, color .2s;
}

.karussell__nav:hover { background: var(--clr-lila); color: var(--clr-white); }
.karussell__nav[hidden] { display: none; }
.karussell__nav svg { width: 22px; height: 22px; }
.karussell__nav--prev { left: -12px; }
.karussell__nav--next { right: -12px; }


/* =============================================================
   2 – SHOP: KATEGORIEN   (/shop)

   Kacheln nebeneinander, Bild 306 x 224 (cover), darunter Titel,
   Text und ein unterstrichener Link.

   -------------------------------------------------------------
   GEÄNDERT: KEIN RASTER MEHR, EINE ZEILE MIT UMBRUCH
   -------------------------------------------------------------

   Vorher hing die Darstellung an der Anzahl: list.php hängte eine
   Klasse --n1 bis --n4 an, und für jede stand eine eigene
   Spaltenrechnung hier. Vier Kacheln schrumpften auf 221,75, eine
   einzelne stand mittig.

   Alle vier Klassen sind entfallen. Die Kachel ist 306 breit,
   Punkt. Drei nebeneinander ergeben 3 x 306 + 2 x 31 = 980 - exakt
   die Inhaltsbreite und der gemessene Fall. Die vierte bricht um
   und steht linksbündig unter der ersten.

   FOLGE, DIE MAN KENNEN MUSS: zwischen 768 und rund 1030 Pixel
   Fensterbreite passen drei Kacheln zu je 306 nicht mehr in die
   Zeile, es werden 2 + 1. Vorher schrumpften sie stattdessen.
   Bewusst in Kauf genommen - feste Breite heißt feste Breite.

   Die ganze Kachel ist EIN Link. Die Vorlage macht nur die
   Schlusszeile klickbar; drei Links auf dasselbe Ziel je Kachel
   wären für die Tastaturbedienung aber schlechter, und die
   Kursliste löst es mit .kurs-band genauso.

   Titelfarbe ist das helle Lila (#b183ba), nicht das dunkle der
   Überschriften – auf der Kategorieseite ist die H1 dagegen
   dunkel. Deshalb hier eine eigene Regel gegen die h2-Vorgabe
   aus main.css.
   ============================================================= */
.shop-kat {
    background: var(--clr-white);
    padding-block: 31px 24px;
}

.shop-kat__leer {
    font-size: 16px;
    line-height: 28.8px;
    text-align: center;
    padding-block: 40px;
}

.shop-kat__reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 31px;
}

/* 0 0 306px: die Kachel wächst nicht und schrumpft nicht. Der
   Umbruch entscheidet sich an dieser Breite, nicht an der Anzahl -
   deshalb braucht die Reihe keine Klasse mehr und list.php muss
   nicht zählen.

   min-width: 0 gegen die Flex-Vorgabe min-width: auto: ein langer
   Kategorietitel ohne Leerzeichen machte die Kachel sonst breiter
   als 306 und schöbe die dritte in die nächste Zeile. */
.kat-kachel {
    flex: 0 0 306px;
    min-width: 0;
    display: block;
    color: inherit;
    text-decoration: none;
}

.kat-kachel:hover { text-decoration: none; }

/* Feste Bildfläche: die Kacheln müssen auf einer Linie stehen,
   auch wenn ein Bild hochformatig ist. Ohne aspect-ratio bestimmt
   das Bild die Höhe und die drei Kacheln laufen auseinander. */
.kat-kachel__bild {
    aspect-ratio: 306 / 224;
    overflow: hidden;
    background: var(--clr-lila-lt);
}

.kat-kachel__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* NICHT BELEGT – Schriftgrad 22 aus dem Theme-Token font_3
   übernommen, im Foto nicht sicher zu messen. */
.kat-kachel__titel {
    margin-top: 22px;
    font-family: var(--ff-display);
    font-size: var(--fz-display-xl);
    font-weight: 400;
    line-height: normal;
    color: var(--clr-lila-mid);
    transition: color .2s;
}

.kat-kachel:hover .kat-kachel__titel { color: var(--clr-lila); }

/* 16 / 28,8 – dieselbe Textzeile wie überall auf der Website.
   Aus dem Foto gegengerechnet: Zeilenabstand 29. */
.kat-kachel__text {
    margin-top: 20px;
    font-family: var(--ff-body);
    font-size: 16px;
    line-height: 28.8px;
    color: var(--clr-text);
}

/* Steht in der Vorlage als letzte Zeile des Absatzes, ohne
   Absatzabstand. Eigenes Element mit gleicher Zeilenhöhe und
   margin-top 0 sieht genauso aus, lässt sich aber getrennt
   auszeichnen. */
.kat-kachel__link {
    display: block;
    font-family: var(--ff-body);
    font-size: 16px;
    line-height: 28.8px;
    color: var(--clr-text);
    text-decoration: underline;
}

.kat-kachel:hover .kat-kachel__link { color: var(--clr-lila); }

/* Ohne Text schließt der Link direkt an den Titel an. */
.kat-kachel__titel + .kat-kachel__link { margin-top: 20px; }


/* =============================================================
   3 – SHOP: KATEGORIELEISTE   (/shop/kategorie, /shop/produkte)

   Eine Zeile, zentriert, Glieder durch | getrennt. Die aktuelle
   Seite steht in hellem Lila und ohne Unterstreichung, die
   übrigen schwarz und unterstrichen.

   Der Trenner ist ein eigenes Element mit aria-hidden, kein
   ::before auf dem Link – dieselbe Lösung wie beim Breadcrumb
   auf /kurse/detail. Sonst liest die Vorlesehilfe bei jedem
   Glied einen senkrechten Strich mit.

   NICHT BELEGT – Schriftgrad. Die Fotomessung legt eher 14 nahe
   (608 px für 79 Zeichen), übernommen ist der Site-Wert 16.
   ============================================================= */
.shop-leiste {
    background: var(--clr-white);
    padding-block: 20px 0;
}

.shop-leiste__liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0 6px;
}

.shop-leiste__punkt {
    font-family: var(--ff-body);
    font-size: 16px;
    line-height: 28.8px;
}

.shop-leiste__trenner {
    margin-right: 6px;
    color: var(--clr-text);
}

.shop-leiste__punkt a {
    color: var(--clr-text);
    text-decoration: underline;
}

.shop-leiste__punkt a:hover { color: var(--clr-lila); }

.shop-leiste__aktiv {
    color: var(--clr-lila-mid);
    text-decoration: none;
}


/* =============================================================
   4 – SHOP: KOPF UND PRODUKTRASTER

   Kopf, aus den Zeichenbreiten der Vorlage gegengerechnet:
     H1     282 px auf 10 Zeichen -> 46 px. Dieselbe Zeile wie
            .kurse-liste__kopf h1: 46 / 64,4, Lila, ohne Sperrung.
     Intro  627 px auf 52 Zeichen -> 22 px, also --fz-lead / 1,8.
            Abstand zur H1 aus dem Foto: 27.

   Raster: vier Spalten, Lücke 12. Bei 980 Inhalt ergibt das
   Spalten von 236. Gemessenes Spaltenraster 244 gegen gerechnete
   248 – die Ablesung trägt ±4, deshalb NICHT BELEGT.

   Die Bildzelle ist QUADRATISCH und das Bild liegt mit
   object-fit: contain darin. In der Vorlage sind Querformat
   (226 breit) und Hochformat (155 breit) verschieden breit,
   stehen aber auf derselben Mittelachse und die Titel darunter
   auf einer Linie – das geht nur mit contain in fester Zelle.
   cover würde Kunstdrucke beschneiden.

   NICHT BELEGT – Zeilenabstand 90. Aus dem Foto hergeleitet
   (Bildoberkante Reihe 1 bei 388, Reihe 2 bei 766, Zellenhöhe
   236 plus zwei Textzeilen). Die Vorlage hält dort vermutlich
   Platz für zweizeilige Titel frei.
   ============================================================= */
.shop-liste {
    background: var(--clr-white);
    padding-block: 33px 49px;
}

.shop-liste__kopf h1 {
    font-family: var(--ff-display);
    font-size: 46px;
    font-weight: 400;
    line-height: 64.4px;
    letter-spacing: normal;
    color: var(--clr-lila);
    text-align: center;
}

.shop-liste__intro {
    margin-top: 27px;
    font-family: var(--ff-body);
    font-size: var(--fz-lead);
    line-height: var(--lh-lead);
    color: var(--clr-text);
    text-align: center;
}

.shop-liste__leer {
    margin-top: 60px;
    font-size: 16px;
    line-height: 28.8px;
    text-align: center;
}

.produkt-raster {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 90px 12px;
}

.produkt-kachel {
    display: block;
    color: inherit;
    text-decoration: none;
}

.produkt-kachel:hover { text-decoration: none; }

/* Quadratisch und ohne Beschnitt. Die Fläche bleibt weiß statt
   lila-hell wie bei den Kategoriekacheln: dort füllt das Bild sie
   ganz, hier bleibt links und rechts Rand stehen, und ein farbiger
   Streifen neben einem Kunstdruck sähe nach Fehler aus. */
.produkt-kachel__bild {
    aspect-ratio: 1;
    background: var(--clr-white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.produkt-kachel__bild img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.produkt-kachel__titel {
    margin-top: 21px;
    font-family: var(--ff-body);
    font-size: 16px;
    line-height: 26px;
    color: var(--clr-text);
    transition: color .2s;
}

.produkt-kachel:hover .produkt-kachel__titel { color: var(--clr-lila); }

.produkt-kachel__preis {
    font-family: var(--ff-body);
    font-size: 16px;
    line-height: 26px;
    color: var(--clr-text);
}

.produkt-kachel__status {
    margin-top: 4px;
    font-family: var(--ff-body);
    font-size: var(--fz-body-s);
    line-height: 20px;
    color: var(--clr-text-muted);
}


/* =============================================================
   5 – SHOP: PRODUKTSEITE   (/shop/produkt)

   Vorlage: /product-page/gartenhaus, aus dem Bildschirmfoto.
   Inhaltsbreite 890 innerhalb der 980er-wrap, also 45 Innenabstand
   je Seite – dasselbe Prinzip wie die 130 auf /kurse/detail.

     Zeile    Breadcrumb links, Nachbarn rechts, y259.
     Spalten  Bild 498 | Lücke 35 | Angaben 357.
     Bild     quadratische Zelle mit contain, wie im Raster.
              In der Vorlage steht das Querformat 498 x 352 mittig
              auf derselben Achse wie ein Hochformat.

   NICHT BELEGT – 498/35/357 und der Innenabstand 45 sind aus dem
   Foto abgelesen (±4). Sie sind als Verhältnis gesetzt, damit sie
   bei jeder Breite tragen.
   ============================================================= */
.produkt {
    background: var(--clr-white);
    padding-block: 48px 32px;
}

.produkt__inner { padding-inline: 45px; }

/* --- Pfad und Nachbarn --- */
.produkt__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 24px;
}

/* Trennzeichen als eigenes Element, nicht als ::before im Link –
   sonst wird es beim Überfahren mitunterstrichen und zählt zur
   Klickfläche. Gleiche Lösung wie .kursdetail__pfad. */
.produkt__pfad,
.produkt__nachbarn {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    font-size: 16px;
    line-height: 20px;
    color: var(--clr-text);
}

.produkt__pfad a,
.produkt__nachbar {
    color: var(--clr-text);
    text-decoration: none;
}

.produkt__pfad a:hover,
.produkt__nachbar:hover { text-decoration: underline; }

.produkt__pfad-trenner,
.produkt__nachbar-trenner { color: var(--clr-text-muted); }

.produkt__pfad-hier { color: var(--clr-grey); }

/* --- Bild und Angaben --- */
.produkt__spalten {
    margin-top: 40px;
    display: grid;
    grid-template-columns: minmax(0, 498fr) minmax(0, 357fr);
    gap: 35px;
    align-items: start;
}

.produkt__bild {
    aspect-ratio: 1;
    background: var(--clr-white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.produkt__bild img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Kleinbildstreifen. Die Steuerung sitzt in main.js und hängt an
   #gallery-main und .gallery-thumb – die Namen sind deshalb
   unverändert übernommen. */
.produkt__thumbs {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.produkt__thumbs .gallery-thumb {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border: 1px solid rgba(0, 0, 0, .2);
    cursor: pointer;
    transition: border-color .2s;
}

.produkt__thumbs .gallery-thumb:hover,
.produkt__thumbs .gallery-thumb.is-active { border-color: var(--clr-lila); }

.produkt__titel {
    font-family: var(--ff-display);
    font-size: 34px;
    font-weight: 400;
    line-height: 44px;
    letter-spacing: normal;
    color: var(--clr-text);
}

.produkt__sku {
    margin-top: 8px;
    font-size: var(--fz-body-s);
    line-height: 20px;
    color: var(--clr-lila);
}

.produkt__preis {
    margin-top: 24px;
    font-family: var(--ff-body);
    font-size: 20px;
    line-height: 28px;
    color: var(--clr-text);
}

.produkt__fehler {
    margin-top: 16px;
    list-style: disc;
    padding-left: 20px;
    color: var(--clr-error);
    font-size: var(--fz-body-s);
    line-height: 20px;
}

.produkt-form { margin-top: 24px; }

.produkt-form__feld { max-width: 120px; }

.produkt__bestand {
    margin-top: 8px;
    font-size: var(--fz-body-s);
    line-height: 20px;
    color: var(--clr-text-muted);
}

/* Der Knopf läuft in der Vorlage über die volle Spaltenbreite. */
.produkt__knopf {
    margin-top: 20px;
    width: 100%;
    padding: 12px 16px;
    text-align: center;
}

.produkt__hinweis {
    margin-top: 24px;
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text-muted);
}

.produkt__hinweis a { text-decoration: underline; }

.produkt__versand {
    margin-top: 24px;
    font-size: var(--fz-body-s);
    line-height: 22px;
    color: var(--clr-text-muted);
}

/* Beschreibung steht unter der Bildspalte, nicht neben ihr. */
.produkt__text {
    margin-top: 40px;
    font-size: 16px;
    line-height: 28.8px;
    color: var(--clr-text);
}

.produkt__aehnlich { margin-top: 60px; }

.produkt__aehnlich h2 {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 400;
    line-height: normal;
    color: var(--clr-text);
}

.produkt__aehnlich .produkt-raster { margin-top: 24px; }


/* =============================================================
   6 – SHOP: WARENKORB   (/shop/warenkorb)

   Vorlage: /cart-page. Zwei Spalten, 607 | 53 | 280 = 940 in der
   980er-wrap, also 20 Innenabstand je Seite.

   Je Zeile: Bild 102, Angaben, Mengenfeld, Zeilensumme rechts,
   Knopf zum Entfernen. Trennlinien unter Überschrift und Zeile.

   Ein Formular trägt alle Mengenfelder und mehrere Knöpfe – siehe
   Kopf von shop/cart.php. Deshalb hier kein eigenes Formular je
   Zeile und keine Regeln dafür.

   NICHT BELEGT – die Spaltenmaße und die Bildgröße 102 stammen aus
   dem Foto (±4) und sind als Verhältnis gesetzt.
   ============================================================= */
.korb {
    background: var(--clr-white);
    padding-block: 48px 48px;
}

.korb__inner { padding-inline: 20px; }

.korb__fehler {
    margin-bottom: 24px;
    list-style: disc;
    padding-left: 20px;
    color: var(--clr-error);
    font-size: var(--fz-body-s);
    line-height: 20px;
}

.korb__meldung {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--clr-lila-lt);
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
}

.korb__leer { text-align: center; padding-block: 40px 60px; }
.korb__leer h1 { font-family: var(--ff-display); font-size: 34px; line-height: 44px; color: var(--clr-text); }
.korb__leer p  { margin-top: 20px; font-size: 16px; line-height: 28.8px; }
.korb__leer-aktion { margin-top: 28px; }

.korb__spalten {
    display: grid;
    grid-template-columns: minmax(0, 607fr) minmax(0, 280fr);
    gap: 53px;
    align-items: start;
}

/* Überschrift und Trennlinie darunter, in beiden Spalten gleich –
   in der Vorlage stehen sie auf derselben Höhe. */
.korb__titel {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 400;
    line-height: normal;
    color: var(--clr-text);
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.korb-zeile {
    display: grid;
    grid-template-columns: 102px minmax(0, 1fr) 92px 90px auto;
    align-items: center;
    gap: 16px;
    padding-block: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.korb-zeile__bild {
    width: 102px;
    aspect-ratio: 1;
    background: var(--clr-white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.korb-zeile__bild img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.korb-zeile__titel {
    display: block;
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
    text-decoration: none;
}

.korb-zeile__titel:hover { color: var(--clr-lila); text-decoration: underline; }

.korb-zeile__einzel,
.korb-zeile__sku {
    margin-top: 4px;
    font-size: var(--fz-body-s);
    line-height: 20px;
    color: var(--clr-text-muted);
}

.korb-zeile__summe {
    text-align: right;
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
}

.korb-zeile__weg-knopf {
    padding: 4px;
    border: 0;
    background: none;
    font-family: var(--ff-body);
    font-size: var(--fz-body-s);
    line-height: 20px;
    color: var(--clr-text-muted);
    text-decoration: underline;
    cursor: pointer;
    transition: color .2s;
}

.korb-zeile__weg-knopf:hover { color: var(--clr-lila); }

.korb__aktualisieren { margin-top: 24px; }

/* --- Bestellübersicht --- */
.korb-summe__liste { margin-top: 20px; }

.korb-summe__zeile {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 16px;
    line-height: 28.8px;
    color: var(--clr-text);
}

.korb-summe__gesamt {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, .2);
    font-family: var(--ff-display);
    font-size: 22px;
    line-height: 30px;
    color: var(--clr-text);
}

.korb-summe__aktion { margin-top: 24px; }

.korb-summe__aktion .btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    text-align: center;
}

.korb-summe__hinweis {
    margin-top: 20px;
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-error);
}

.korb-summe__hinweis a { color: inherit; text-decoration: underline; }

.korb-summe__versandtext {
    margin-top: 16px;
    font-size: var(--fz-body-s);
    line-height: 22px;
    color: var(--clr-text-muted);
}

.korb-summe__weiter { margin-top: 16px; }

.korb-summe__weiter a {
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
    text-decoration: underline;
}

.korb-summe__weiter a:hover { color: var(--clr-lila); }


/* =============================================================
   7 – SHOP: KASSE   (/shop/checkout)

   Ohne Vorlage. Das Bildschirmfoto der Wix-Kasse bricht aus dem
   Seitendesign aus (eigener Kopf, eigene Schrift, schwarzer Knopf)
   und ist deshalb ausdrücklich nicht maßgeblich.

   Aufgebaut wie /kurse/buchen (Sektion 21 in pages.css): Kopf,
   Formular, Rechtshinweis darunter und außerhalb des <form>.
   Daneben die Bestellübersicht in derselben Spaltenteilung wie der
   Warenkorb, damit beide Seiten sich gleich anfühlen.

   Feldabstände und Typografie sind aus dem Buchungsformular
   übernommen und nicht neu gemessen – dort sind sie belegt.
   ============================================================= */
.kasse {
    background: var(--clr-white);
    padding-block: 48px 48px;
}

.kasse__inner { padding-inline: 20px; }

.kasse__kopf h1 {
    font-family: var(--ff-display);
    font-size: 46px;
    font-weight: 400;
    line-height: 64.4px;
    letter-spacing: normal;
    color: var(--clr-lila);
    text-align: center;
}

/* --- Bestätigung und Sperren --- */
.kasse__danke,
.kasse__leer {
    margin-top: 40px;
    font-size: 16px;
    line-height: 28.8px;
    color: var(--clr-text);
    text-align: center;
}

.kasse__danke a,
.kasse__leer a { text-decoration: underline; }

.kasse__nummer {
    margin-top: 16px;
    font-size: 16px;
    line-height: 28.8px;
    text-align: center;
}

.kasse__zurueck { margin-top: 32px; text-align: center; }

/* --- Zwei Spalten --- */
.kasse__spalten {
    margin-top: 40px;
    display: grid;
    grid-template-columns: minmax(0, 607fr) minmax(0, 280fr);
    gap: 53px;
    align-items: start;
}

.kasse__fehler {
    margin-bottom: 24px;
    list-style: disc;
    padding-left: 20px;
    color: var(--clr-error);
    font-size: var(--fz-body-s);
    line-height: 20px;
}

/* --- Formular --- */
.kasse-form__h2 {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 400;
    line-height: normal;
    color: var(--clr-text);
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

/* Die Abstände hängen am KIND-Kombinator, nicht am blanken
   Nachbarn. PLZ und Ort liegen in .kasse-form__reihe nebeneinander
   und sind dort ebenfalls Geschwister vom Typ .kasse-form__feld -
   ohne das '>' bekam das Ort-Feld dieselben 20px margin-top wie ein
   untereinander stehendes Feld. Ergebnis: die beiden Spalten der
   Reihe standen um exakt 20px versetzt, Label gegen Label. */
.kasse-form > .kasse-form__h2 + .kasse-form__feld,
.kasse-form > .kasse-form__h2 + .kasse-form__reihe { margin-top: 24px; }

.kasse-form > .kasse-form__feld + .kasse-form__feld,
.kasse-form > .kasse-form__feld + .kasse-form__reihe,
.kasse-form > .kasse-form__reihe + .kasse-form__feld { margin-top: 20px; }

.kasse-form > .kasse-form__feld + .kasse-form__h2,
.kasse-form > .kasse-form__reihe + .kasse-form__h2 { margin-top: 40px; }

/* PLZ und Ort nebeneinander: fünf Ziffern brauchen keine halbe
   Zeile. Das Verhältnis hält auch, wenn eine Meldung darunter
   erscheint - align-items: start, sonst wüchse die Nachbarspalte
   mit.

   Die Felder darin tragen KEINEN eigenen Abstand nach oben, sonst
   stünden die beiden Spalten versetzt. Dafür sorgt der
   Kind-Kombinator in den Abstandsregeln oben. */
.kasse-form__reihe {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* Felder in der Bauweise des Buchungsformulars (Sektion 21 in
   pages.css): weiße Fläche, feiner Rahmen ringsum, 16 / 24.

   Ohne diese Regeln greifen die globalen aus main.css – dort haben
   Eingabefelder eine lila-helle Fläche und nur unten eine 2px-Linie.
   Das ist das Wix-Theme-Default; /kontakt und /kurse/buchen
   überschreiben es beide, die Kasse stand als einzige noch darauf.
   Werte von dort übernommen und nicht neu gemessen – dort sind sie
   belegt. */
.kasse-form__feld label {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
}

.kasse-form__feld input,
.kasse-form__feld textarea {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--ff-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
    background: var(--clr-white);
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 0;
}

.kasse-form__feld textarea {
    min-height: 0;
    height: 120px;
    resize: vertical;
}

.kasse-form__feld input:focus,
.kasse-form__feld textarea:focus {
    outline: none;
    border-color: var(--clr-lila);
}

/* Fehlerhaftes Feld: roter Rahmen, dazu die Meldung darunter.

   Der Fokusfall MUSS mit. .kasse-form__feld input:focus hat (0,2,1)
   und schlüge ein blosses .kasse-form__feld [aria-invalid] mit
   (0,2,0) - die Markierung verschwände, sobald jemand in das Feld
   klickt, um den Fehler zu beheben. Derselbe Stolperstein ist in
   Sektion 16 von pages.css für /kontakt dokumentiert. */
.kasse-form__feld [aria-invalid="true"],
.kasse-form__feld input[aria-invalid="true"]:focus,
.kasse-form__feld textarea[aria-invalid="true"]:focus {
    border-color: var(--clr-error);
}

.kasse-form__meldung {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 20px;
    color: var(--clr-error);
}

.kasse-form__aktion { margin-top: 32px; }

.kasse-form__knopf { padding: 12px 24px; }

/* Steht außerhalb des <form> und nur beim sichtbaren Formular –
   er handelt vom Absenden. Gleiche Typografie wie der Hinweis auf
   /kurse/buchen. */
.kasse__hinweis {
    margin-top: 24px;
    font-size: var(--fz-body-s);
    line-height: 22px;
    color: var(--clr-text-muted);
}

.kasse__hinweis a { color: inherit; text-decoration: underline; }

/* --- Übersicht --- */
.kasse__titel {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 400;
    line-height: normal;
    color: var(--clr-text);
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.kasse-posten { margin-top: 16px; }

.kasse-posten__zeile {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-block: 8px;
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
}

.kasse-posten__summe { white-space: nowrap; }

.kasse-summe {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, .2);
}

.kasse-summe__zeile {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 16px;
    line-height: 28.8px;
    color: var(--clr-text);
}

.kasse-summe__gesamt {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, .2);
    font-family: var(--ff-display);
    font-size: 22px;
    line-height: 30px;
    color: var(--clr-text);
}

.kasse__weiter { margin-top: 20px; }

.kasse__weiter a {
    font-size: 16px;
    line-height: 24px;
    color: var(--clr-text);
    text-decoration: underline;
}

.kasse__weiter a:hover { color: var(--clr-lila); }


/* =============================================================
   RESPONSIVE  (Sektionen 1 bis 7)
   Bruchstellen wie in pages.css: 1019 und 767.
   ============================================================= */
@media (max-width: 1019px) {
    .karussell { --karussell-h: 220px; }

    /* Der Zeilenabstand der Vorlage hält Platz für zweizeilige
       Titel frei. Auf schmalen Spalten werden die Titel ohnehin
       zweizeilig, dann ist er zu groß. */
    .produkt-raster { gap: 56px 12px; }

    .produkt__inner { padding-inline: 0; }
    .korb__inner    { padding-inline: 0; }
    .kasse__inner   { padding-inline: 0; }
}

@media (max-width: 767px) {
    .shop-hero { padding-block: 32px 24px; }
    .shop-hero__box { padding: 16px 16px 20px; }
    .karussell { --karussell-h: 180px; }

    /* Pfeile aus dem Rand herein, sonst stehen sie halb außerhalb
       des weißen Blocks. Dieselbe Bruchstelle wie .galerie__nav in
       pages.css. */
    .karussell__nav--prev { left: 0; }
    .karussell__nav--next { right: 0; }

    /* Volle Breite statt 306: eine feste Kachel ließe auf einem
       400er Bildschirm rechts einen Streifen stehen. flex-basis auf
       100 % legt jede Kachel in eine eigene Zeile - der Umbruch
       macht das von allein, sobald die zweite nicht mehr daneben
       passt. */
    .kat-kachel { flex-basis: 100%; }
    .shop-kat__reihe { gap: 40px; }

    .shop-liste { padding-block: 24px 40px; }
    .shop-liste__kopf h1 { font-size: 34px; line-height: 46px; }
    .produkt-raster {
        margin-top: 40px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 12px;
    }

    .produkt { padding-block: 24px 32px; }
    .produkt__spalten { grid-template-columns: 1fr; gap: 24px; }
    .produkt__titel { font-size: 28px; line-height: 36px; }
    .produkt__thumbs .gallery-thumb { width: 72px; height: 72px; }

    .korb { padding-block: 24px 40px; }
    .korb__spalten { grid-template-columns: 1fr; gap: 40px; }

    .kasse { padding-block: 24px 40px; }
    .kasse__kopf h1 { font-size: 34px; line-height: 46px; }
    .kasse__spalten { grid-template-columns: 1fr; gap: 40px; }
    .kasse-form__reihe { grid-template-columns: 110px minmax(0, 1fr); }
    .kasse-form__knopf { width: 100%; }

    /* Zeile umbauen: Bild links, Angaben rechts, darunter Menge,
       Summe und Entfernen in einer Reihe. Fünf Spalten passen auf
       ein Telefon nicht nebeneinander. */
    .korb-zeile {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        grid-template-areas:
            "bild angaben angaben"
            "bild menge   summe"
            "bild weg     weg";
        gap: 8px 12px;
    }
    .korb-zeile__bild    { grid-area: bild; width: 72px; }
    .korb-zeile__angaben { grid-area: angaben; }
    .korb-zeile__menge   { grid-area: menge; }
    .korb-zeile__summe   { grid-area: summe; }
    .korb-zeile__weg     { grid-area: weg; justify-self: start; }
}