/* ===========================================================================
   MASSSTAB DIESER SEITE  ·  [CC-9] 05.09.2026

   Betreiber: „wende best-practice aus dem design an fuer stegbreiten,
   abstaende, schriftgroessen". Vorher war jeder Wert einzeln gewachsen --
   .8125, .9375, 1.0625, .42, .85, .9 rem. Das laesst sich nicht pflegen und
   sieht aus wie es entstanden ist. Ab hier drei Reihen, sonst nichts:

   ABSTAENDE   Vielfache von 4 px, wie Bootstraps Spacer:
               .25rem  .5rem  .75rem  1rem  1.5rem  2rem  (4/8/12/16/24/32)
               Im Markup dafuer die Bootstrap-Klassen (mb-2, gap-2, py-2);
               eigene Werte nur, wo es keine Klasse gibt.

   SCHRIFT     .875rem (14) klein · 1rem (16) Grundtext · 1.125rem (18) Lead
               · 1.25rem (20) Titelchen. Zeilenhoehe 1.35 in Listen, 1.5 im
               Fliesstext, 1.6 im Langtext.

   RADIEN      .5rem (8 px) ueberall -- der Wert, den `.sgp-card` im Bestand
               traegt. Ein zweiter Radius auf derselben Seite liest sich als
               Versehen.

   STEG        2rem zwischen den Spalten. Ohne Spaltenpadding, damit genau
               eine Zahl den Abstand bestimmt.

   ZEILENLAENGE  68 Zeichen im Langtext. 45-75 gilt als lesbar; 68 nutzt die
               Spaltenbreite aus, ohne die Obergrenze zu reissen.
   =========================================================================== */

/* ===========================================================================
   sgp-artikelseite.css  ·  Kopfzone der Artikeldetailseite
   [CC-9] 05.09.2026

   VORGABE DES BETREIBERS: ausschliesslich Bootstrap, moeglichst wenig eigenes
   CSS, kein Foundation. Die Vorlage traegt deshalb Bootstrap-Klassen (`row`,
   `col-lg-6`, `d-flex`, `gap-*`, `badge`, `border-bottom`, `small`,
   `fw-semibold`) innerhalb der `.sgp-ui`-Huelle -- ohne die Huelle greift dort
   nichts, weil sgp-ui.css vollstaendig auf `.sgp-ui` praefixiert ist.

   Was hier steht, ist das, was Bootstrap NICHT kann, plus die Werte, die aus
   dem Bestand kommen. Erste Fassung dieser Datei: 326 Zeilen. Nach der
   Umstellung auf Bootstrap bleiben die folgenden.

   Farben aus dem Bestand: `--sg-green`, `--sg-green-bg`, `--sg-green-dark`,
   `--sg-green-border` sind bereits Variablen auf `.sgp-ui` und werden hier
   nur benutzt, nicht neu erfunden.
   =========================================================================== */


/* --- 1. Das Einzige, was Bootstrap nicht kann ------------------------------

   Gewuenscht ist: rechts eine durchgehende Kaufspalte, links Bild, Bildleiste
   und darunter die Kennzeichen -- zwei gestapelte Bloecke neben einem hohen.
   Eine Bootstrap-`row` bricht stattdessen um: die zweite Zeile beginnt erst
   unterhalb des HOECHSTEN Elements der ersten, und unter dem Bild bliebe
   genau der Weissraum stehen, der weg soll.

   Ab `lg` wird die Zeile deshalb zum Raster. Die DOM-Reihenfolge bleibt
   Medien -> Kauf -> Kennzeichen und ist damit auf dem Telefon schon die
   richtige; darunter greift diese Regel nicht und Bootstrap stapelt normal.
   Kein `order`: eine Reihenfolge, die nur im Blatt stimmt, ist fuer
   Vorlesegeraete falsch. */

/* Die Zeile darf nicht ueber ihren Container hinausragen: `#article-detail`
   traegt aus einer Altregel `padding-left/right: 0`, und Bootstraps
   Negativmargins schoben die Zeile darum 14 px nach aussen -- auf schmalem
   Schirm sichtbar als waagerechtes Scrollen (965 gegen 591 px).
   Nur die Margins, NICHT `--bs-gutter-x`: in diesem Baum liegt ueber
   Bootstraps `.sgp-ui .row` noch Foundations `.row`, und eine genullte
   Gutter-Variable liess die Zeile auf Breite 0 zusammenfallen. */
.sgp-ui .row.sgp-artikel-kopf { width: 100%; margin-left: 0; margin-right: 0; }

@media (min-width: 992px) {
    .sgp-ui .row.sgp-artikel-kopf {
        display: grid;
        /* `minmax(0, 1fr)`, nicht `1fr`: sonst zieht die Mindestbreite des
           Bildes die linke Spalte auf 612 px und die Kaufspalte bleibt bei
           532 -- die Lieferform-Kacheln werden dadurch schmaler als noetig. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        /* 3rem statt 2,25: an der Ecke zwischen Mitbestell-Block und dem,
           was links daneben steht, war es zu eng (Betreiber, 05.09.). */
        /* 36 px Steg. Vorher waren es 48 px Gap PLUS zweimal 10 px
           Spaltenpadding = 69 px optisch zwischen Bildkante und Kaufspalte --
           „harmonisch ist das nicht" (Betreiber, 05.09.). Das Padding ist
           unten raus, damit genau eine Zahl den Abstand bestimmt. */
        column-gap: 2rem;
        /* Betreiber, 05.09.: „auch vertikale weissraeume in der linken
           spalte (…) die dinge in der linken spalte sollten oben stehen".
           Gemessen bei 1280 px mit kurzer Beschreibung: 119 px unter dem
           Bild, 131 px unter den Kennzeichen.

           Ursache ist das Raster, nicht ein Abstand. Die Kaufspalte spannt
           alle drei Zeilen und ist hoeher als die linke Seite; den
           Ueberschuss verteilt Grid gleichmaessig auf drei `auto`-Zeilen.
           `align-items: start` hilft dagegen nicht -- es richtet den Inhalt
           IN der Zeile aus, waehrend die Zeile selbst schon zu hoch ist.

           Mit `1fr` in der letzten Zeile nimmt diese den Ueberschuss auf.
           Bild und Kennzeichen behalten ihre Inhaltshoehe und stehen dicht
           beieinander; die Luft landet unter dem Langtext, wo sie keine
           zwei Bloecke auseinanderzieht. */
        grid-template-rows: auto auto 1fr;
        align-items: start;
    }

    /* ⚠ MIT `.sgp-ui` DAVOR. Bootstraps `.sgp-ui .col-lg-6` traegt das
       Spaltenpadding mit Spezifitaet (0,2,0); ein Selektor ohne die Huelle
       kaeme auf (0,1,0) und verloere. */
    .sgp-ui .row.sgp-artikel-kopf > .sgp-artikel-medien,
    .sgp-ui .row.sgp-artikel-kopf > .sgp-artikel-kauf,
    .sgp-ui .row.sgp-artikel-kopf > .sgp-artikel-text {
        padding-left: 0;
        padding-right: 0;
    }

    /* ⚠ Die Kennzeichen-Zelle ist AUSGENOMMEN -- sie ist selbst die getoente
       Box, und die braucht Innenabstand. Sie stand vorher in dieser Liste,
       und `padding: 16px 0` liess Kennzeichen und Warengruppen-Pillen direkt
       an der Boxkante kleben (gemessen: 1 px links). Mit derselben
       Spezifitaet wie die Nullung darueber, sonst gewinnt Bootstraps
       Spaltenpadding. */
    .sgp-ui .row.sgp-artikel-kopf > .sgp-artikel-kennzeichen {
        /* Unten weniger als oben: dort schliesst der Hinweis
           „* komplett stachellose Rosen …" ab, und der braucht keinen so
           grossen Fuss wie die Box oben einen Kopf. */
        padding: 1rem 1rem .75rem;
    }

    .sgp-ui .sgp-artikel-medien      { width: auto; grid-column: 1; grid-row: 1; }
    .sgp-ui .sgp-artikel-kennzeichen { width: auto; grid-column: 1; grid-row: 2; }
    .sgp-ui .sgp-artikel-text        { width: auto; grid-column: 1; grid-row: 3; }
    .sgp-ui .sgp-artikel-kauf        { width: auto; grid-column: 2; grid-row: 1 / span 3; }
}

/* ⚠ Das Hauptbild-<li> floatete ueber `column small-12` (Foundation). Die
   Klasse ist raus; diese Regel faengt ab, dass eine Altregel an der id sie
   zurueckholt -- ohne sie hatte die <ul> die Hoehe 0 und die Bildleiste stand
   NEBEN dem Bild statt darunter. */
.sgp-artikel-medien #article-detail-image { float: none; width: auto; }


/* --- 1b. Eine Kante in der rechten Spalte ---------------------------------

   Betreiber: „alles in der rechten spalte soll links und rechts an einer
   gedachten linie buendig sitzen und keine margins / paddings haben die
   optische weissraeume verursachen."

   Gemessen war alles buendig bei 741/1293 -- ausser den Lieferform-Kacheln,
   die 10 px weiter innen begannen. Der Grund liegt tiefer als er aussieht:
   In diesem Baum stehen ZWEI `.row`-Definitionen uebereinander. Bootstraps
   `.sgp-ui .row` setzt die Gutter als Negativmargins
   (`margin-inline: calc(-.5 * var(--bs-gutter-x))`), damit das Padding der
   Spalten die Zeile nicht einrueckt. Danach kommt Foundations `.row` mit
   `margin-right: auto; margin-left: auto` und nimmt sie wieder weg -- das
   Spaltenpadding bleibt und schiebt jede verschachtelte Zeile nach innen.

   Hier wird die Formel fuer die Zeilen INNERHALB der Kaufspalte
   wiederhergestellt. `var(--bs-gutter-x)` steht auf der Zeile selbst, also
   rechnet jede mit ihrem eigenen Gutter (`g-2`, `g-3`, ...) und niemand muss
   eine Zahl pflegen. Foundation geht ohnehin aus dem Baum; danach faellt
   diese Regel von selbst weg.  */

/* Der Vertrauensblock („Kauf auf Rechnung", „Versand ab 6,90") stand 20 px
   weiter innen als alles andere in der Spalte -- er ist eine <ul>, und
   Foundations Reset gibt jeder Liste `margin-left: 1.25rem`. Bootstraps
   `.list-group` nullt zwar `padding-left`, aber nicht das Margin.
   (Betreiber, 05.09.: „kauf auf rechnung / versand ab 6,90 ist links noch
   nicht buendig!") */
.sgp-artikel-kauf ul.list-group,
.sgp-artikel-beiwerk ul.list-group {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

.sgp-artikel-kauf .row,
.sgp-artikel-beiwerk .row {
    margin-left: calc(-.5 * var(--bs-gutter-x));
    margin-right: calc(-.5 * var(--bs-gutter-x));
}


/* --- 2. Bildleiste: nur die Kachelgroesse ---------------------------------
   Zeile, Abstand, Rahmen, Radius und der waagerechte Ueberlauf kommen aus
   Bootstrap (`d-flex flex-nowrap gap-2 overflow-auto border rounded`). Eine
   feste Kachelgroesse kennt Bootstrap nicht, und sie ist der Punkt der
   Uebung: vorher trug jedes Zusatzbild `column small-3`, ein Viertel der
   Spaltenbreite, und sechs Bilder ergaben zwei Reihen zu je 130 px. */

/* ⚠ DIESE DREI ZEILEN SIND TRAGEND. Die Kacheln sind <span>-Elemente, also
   inline -- eine `width` an einem Inline-Element tut nichts. Owl misst bei
   `autoWidth` die Breite jedes Items beim Aufbau und bekam dadurch 4 px
   statt 92. Ich hatte sie beim Zusammenfassen der Pfeil-Regeln versehentlich
   mit weggeräumt; die Leiste bestand danach aus 4x20-px-Splittern. */
.sgp-bildleiste.owl-carousel { overflow: hidden; }
.sgp-bildleiste .owl-stage   { display: flex; }
.sgp-bildleiste .owl-item    { display: flex; }

.sgp-bildleiste-bild         { display: block; flex: 0 0 auto; width: 84px; line-height: 0; background: #fff; }
.sgp-bildleiste-bild img     { width: 84px; height: 84px; object-fit: cover; display: block; }
.sgp-bildleiste-bild a,
.sgp-bildleiste-bild picture { display: block; }
.sgp-bildleiste-bild:hover   { border-color: var(--sg-green) !important; }

/* Die Altregel `.article-detail-image-secondary{padding:2px!important}` aus
   sgp-basis.css traegt ein !important und trifft die Kacheln weiter. */
.sgp-bildleiste .article-detail-image-secondary { padding: 0 !important; }

/* Ohne Zusatzbilder bleibt der Container leer -- dann darf er weder Hoehe
   noch Abstand belegen. Die Vorlage haelt BEGIN/END addImage in EINER Zeile,
   sonst bliebe Whitespace stehen und `:empty` griffe nicht. */
/* ⚠ `!important`, weil Bootstraps Utility `.sgp-ui .d-flex` selbst eines
   traegt: ohne das blieb die leere Leiste als 8-px-Streifen plus `mb-3`
   stehen -- gemessen an /rosen/banksiae-lutea.html, 32 px Loch zwischen
   Bild und Kennzeichen. */
.sgp-bildleiste:empty { display: none !important; margin-bottom: 0 !important; }

@media (min-width: 992px) {
    .sgp-bildleiste-bild,
    .sgp-bildleiste-bild img { width: 92px; }
    .sgp-bildleiste-bild img { height: 92px; }
}




/* --- 3. Typografie der Kopfzeile ------------------------------------------
   Betreiber: „ramblerrose, turbat kann auch ueber dem namen stehen -- das
   macht es schoener, du kannst gerne auch mit typografie arbeiten".
   Kleine gesperrte Oberzeile, darunter der Sortenname gross: die klassische
   Anordnung fuer Gattung und Sorte. Bootstrap liefert `text-uppercase` und
   `fw-semibold`; Sperrung, Groesse und Farbe sind Satzarbeit. */

.sgp-artikel-kicker {
    font-size: .875rem;
    letter-spacing: .09em;
    color: var(--sg-green);
}

.sgp-artikel-kicker:empty { display: none; }

/* Hoehe und Breite direkt unter dem Namen -- „mit die wichtigste info". */
.sgp-artikel-masse       { font-size: 1rem; color: #3f3f38; }
.sgp-artikel-masse:empty { display: none; }
.sgp-artikel-masse svg   { color: var(--sg-green); flex: 0 0 auto; }

/* Der Kurztext aus `mss_commerce_article_content.short` -- ein Satz, der die
   Sorte charakterisiert, und die Seite hat ihn bisher nirgends gezeigt. Er
   steht vor dem Preis, weil er die Frage beantwortet, die vor dem Preis
   kommt. Etwas groesser als Fliesstext, ohne Kasten und ohne Balken: er ist
   Text, kein Hinweisfeld. */
/* GLEICH GROSS wie der Fliesstext, nicht groesser. Der Kurztext stand auf
   1,125 rem und die Langbeschreibung auf 1,0625 -- eine Einleitung, die
   groesser gesetzt ist als der Text, den sie einleitet, dreht die Ordnung um
   (Betreiber, 05.09.). Er hebt sich weiter ab, aber ueber seine Stellung
   ueber dem Preis, nicht ueber die Schriftgroesse. */
.sgp-sorte-kurz              { font-size: 1.0625rem; line-height: 1.5; }
.sgp-sorte-kurz:empty        { display: none; }
.sgp-sorte-kurz p:last-child { margin-bottom: 0; }


/* --- 4. Kennzeichen und Warengruppen --------------------------------------
   Raster, Abstaende und Trennlinien kommen aus Bootstrap (`row row-cols-2
   g-0 border-top`, je Paar `border-bottom py-2`). Hier bleiben die Groesse
   des Sinnbilds und der Umbruchschutz fuer lange Werte wie
   „fast stachellos / schwach bewehrt *". */

/* Die Trennlinie steht hier, nicht als Bootstrap-Utility im Markup: deren
   `.border-bottom` traegt `!important`, und damit liess sich die Linie der
   letzten Reihe nicht abschalten. */
.sgp-kennzeichen-paar {
    min-width: 0;
    border-bottom: 1px solid #e6e1cd;
}

/* Die Kennzeichen als farbig hinterlegte Flaeche (Betreiber, 05.09.) --
   dieselbe Tönung wie die Warengruppen-Pillen, damit die linke Spalte als
   ein Block liest und nicht als drei lose Teile. Die Trennlinie gehoert
   unter das Paar, nicht auch ueber die Liste: beide zusammen ergaben oben
   eine Doppellinie. */
.sgp-artikel-kennzeichen {
    margin: 0 0 1rem;
    padding: 1rem;
    background: #faf8ee;
    border: 1px solid #e6e1cd;
    /* Runder als der Rest der Seite, und mit Absicht: eine Sprechblase ist
       kein Kasten. Die untere linke Ecke bleibt kleiner, dort sitzt der
       Schweif -- so liest sich die Form als Blase und nicht als Pille.
       (Betreiber, 05.09.: „mehr wie eine blase aussehen lassen wenn es geht") */
    border-radius: 1.25rem 1.25rem 1.25rem .35rem;
}

.sgp-kennzeichen { border-top: 0; margin-bottom: 0 !important; }

/* Die letzte REIHE braucht keine Linie -- darunter kommen die Warengruppen,
   und die bringen ihren eigenen Abstand mit.

   Zweispaltig sind das die letzten ZWEI Paare, einspaltig nur das letzte.
   `:last-child` allein liess deshalb die Linie unter dem vorletzten stehen
   (Betreiber, 05.09.).

   ⚠ Bei einer UNGERADEN Zahl von Kennzeichen steht das letzte allein in der
   Schlusszeile; dann verliert auch das vorletzte -- rechts in der Zeile
   darueber -- seine Linie. Das ist der Preis dafuer, die Reihe ohne
   Skript zu treffen, und faellt kaum auf: Ghislaine hat acht Kennzeichen,
   Royal Jubilee zehn. */
.sgp-kennzeichen .sgp-kennzeichen-paar:last-child { border-bottom: 0; }

@media (min-width: 576px) {
    .sgp-kennzeichen .sgp-kennzeichen-paar:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Die Warengruppen sitzen in derselben Box, durch eine Linie getrennt statt
   durch Weissraum. */
/* Die Warengruppen sitzen in derselben Box wie die Kennzeichen, durch eine
   Linie getrennt. Sie brauchen oben UND unten Luft, sonst stossen die Pillen
   an Linie und Boxrand (Betreiber, 05.09.: „innenabstand zu den kategorien!"). */
/* KEINE eigene Linie oben: die letzte Kennzeichen-Reihe bringt ihre
   `border-bottom` mit, und beide zusammen ergaben den doppelten Strich
   (Betreiber, 05.09.). Der Abstand allein trennt hier ausreichend. */
/* Weniger Luft ueber und unter der Pillenreihe: der Abstand zur letzten
   Kennzeichen-Zeile darueber und zum Boxrand darunter war groesser als der
   zwischen den Pillen selbst -- das laesst die Reihe schweben, statt sie an
   die Kennzeichen anzuschliessen (Betreiber, 05.09.). */
/* Die Pillenreihe schliesst an die Kennzeichen an, sie steht nicht fuer sich:
   .5 rem darueber statt .75, und der Hinweis darunter endet buendig mit dem
   unteren Innenrand der Box (Betreiber, 05.09.). */
.sgp-artikel-kategorien {
    margin: 0 !important;
    padding-top: .5rem;
    padding-bottom: 0;
}
.sgp-kennzeichen-wert { overflow-wrap: anywhere; }
.sgp-kz-icon          { width: 15px; flex: 0 0 auto; }
.sgp-kz-icon:empty    { display: none; }
.min-w-0              { min-width: 0; }

/* Chips der Warengruppen. `badge rounded-pill` ist Bootstrap; Bootstrap-Badges
   haben aber keine Marken-Farbe, und `text-bg-*` setzte einen Bootstrap-Ton
   statt des Hausgruens. */
/* Mehr Innenabstand und mehr Kontrast (Betreiber, 05.09.).
   Gemessen gegen #f4efd4 (--sg-green-bg): #525a24 (--sg-green-dark) ergibt
   7,3:1 und traegt damit auch als kleine Schrift die AA-Schwelle von 4,5:1
   mit Abstand. Der Rahmen ist dunkler als vorher, damit die Pille auch auf
   weissem Grund als Flaeche steht und nicht als getoenter Text. */
/* ⚠ MIT `.sgp-ui a` DAVOR -- auch im Grundzustand, nicht nur bei :hover.
   Bootstraps `.sgp-ui .badge` traegt (0,2,0) und schlug meine `.sgp-kat-chip`
   (0,1,0): gemessen kamen Padding 4,2/7,8 px und die Schriftfarbe #bd5900 aus
   Bootstrap durch, nicht meine 8/16 px und das Hausgruen. Beides sah aus wie
   ein Versehen, und beides war eines -- nur nicht im Wert, sondern im
   Selektor. */
.sgp-ui a.sgp-kat-chip {
    background: var(--sg-green-bg);
    color: var(--sg-green-dark);
    border: 1px solid var(--sg-green);
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.3;
    /* Etwas schmaler als zuvor (8/16): die Pillen sind Wege zu einer
       Warengruppe, keine Schaltflaechen -- sie duerfen leicht wirken.
       6/12 bleibt auf der Abstandsreihe (Vielfache von 2 bzw. 4). */
    padding: .375rem .75rem;
    white-space: normal;
    text-align: left;
}

/* ⚠ MIT `.sgp-ui a` DAVOR. Der Bestand hat `.sgp-ui a:hover` mit
   Spezifitaet (0,2,1); meine `.sgp-kat-chip:hover` kam auf (0,2,0) und verlor.
   Sichtbar war das als dunkles Braun auf dunklem Gruen -- rund 1,6:1, also
   unter jeder Schwelle. Jetzt (0,3,1), und Weiss auf `--sg-green` (#69732f)
   ergibt 5,4:1: AA fuer Fliesstext, mit Reserve fuer die kleine Schrift der
   Pille. */
/* ⚠ `!important` NUR AUF `color`, und mit Grund: von meiner Regel griff
   alles ausser der Schriftfarbe -- Rahmen grün (#69732f), Padding 8/16, aber
   `color` blieb bei #bd5900. Der Bestand setzt die Linkfarbe also mit
   `!important`, und dagegen hilft weder Spezifitaet noch Reihenfolge.
   Die Variablen sind vorhanden (nachgesehen: `--sg-green-dark: #525a24`),
   es lag nicht an ihnen.
   Kontrast: #525a24 auf #f4efd4 = 7,3:1 im Ruhezustand, #fff auf #69732f =
   5,4:1 bei :hover. Beides ueber der AA-Schwelle von 4,5:1 -- vorher waren es
   3,95:1 im Ruhezustand und deutlich weniger beim Ueberfahren. */
.sgp-ui a.sgp-kat-chip { color: var(--sg-green-dark) !important; }

.sgp-ui a.sgp-kat-chip:hover,
.sgp-ui a.sgp-kat-chip:focus,
.sgp-ui a.sgp-kat-chip:active {
    background: var(--sg-green);
    border-color: var(--sg-green);
    color: #fff !important;
}


/* --- 5. Beschreibung ------------------------------------------------------

   Der Fliesstext stand in der halben Spalte, unter der Kaufbox und hinter dem
   Vertrauensblock. Jetzt hat er die volle Seite -- aber nicht die volle
   Zeilenlaenge: ueber 1.100 px liest niemand eine Zeile zu Ende.

   Der Mitbestell-Block stand hier zwischenzeitlich als zweite Spalte daneben.
   Das kostete ihn Breite (die Duenger-Box ist fuer rund 490 px gebaut und
   wurde in 400 px gequetscht) und liess ueber ihm 471 px Luecke stehen, weil
   die Kaufspalte kuerzer ist als Bild plus Kennzeichen. Er steht jetzt in der
   Kaufspalte; hier bleibt nur der Text. */

.sgp-artikel-text .product-description > [itemprop="description"] {
    max-width: 68ch;
    font-size: 1.0625rem;
    line-height: 1.6;
}

.sgp-artikel-text .product-description > [itemprop="description"] h2,
.sgp-artikel-text .product-description > [itemprop="description"] h3 {
    margin-top: 1.4em;
    font-size: 1.2rem;
    line-height: 1.35;
}


/* Ein Innenabstand fuer alle getoenten Flaechen der Seite: 1 rem, wie die
   Sprechblase und die Pflegekarte ihn schon haben. Nichts klebt an seiner
   Begrenzung (Betreiber, 05.09.). */

/* --- 6. Abstaende an den Raendern der Kopfzone ----------------------------
   Der Mitbestell-Block schliesst die rechte Spalte ab; ohne Fuss steht sein
   Rahmen direkt auf dem naechsten Abschnitt. Und die linke Spalte braucht
   unter den Warengruppen denselben Abstand, damit beide Spalten auf einer
   Linie enden statt auf zwei. */
/* Betreiber: „keine weissraeume wenn es nicht sein muss". Die Bildleiste
   trug `mb-3` (16 px) und die Kennzeichen begannen erst danach; zusammen mit
   dem Karussell-Rand waren das ueber 30 px zwischen Bildern und Kennzeichen.
   Jetzt einer statt zweier Abstaende. */
.sgp-bildleiste            { margin-bottom: .5rem !important; }
.sgp-artikel-medien        { margin-bottom: .25rem; }
.sgp-artikel-beiwerk       { margin-bottom: 0; }
.sgp-artikel-text          { padding-top: .25rem; }


/* --- 7. Stimmen der Kundschaft --------------------------------------------

   Betreiber: „die kommentare muessen auch nicht alle sichtbar sein ... hier
   kannst du auch elemente wie sprechblasen statt rahmen oder aehnliches
   nutzen". Bei Ghislaine sind es 32 Berichte -- untereinander waren das
   mehrere Bildschirmhoehen zwischen Beschreibung und Pflegetipps.

   Die Blase ist bewusst kein Kasten mit Rahmen: eine Aussage ist Rede, kein
   Datensatz. Der Schweif ist ein gedrehtes Quadrat in derselben Fuellung --
   keine Grafik, damit er Farbe und Rand der Blase erbt und bei jeder
   Bildschirmbreite sitzt. */

.sgp-blase {
    position: relative;
    margin: 0 0 .75rem;
    padding: 1rem;
    background: #faf8ee;
    border: 1px solid #e6e1cd;
    border-radius: .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #2b2b26;
}

/* Der Schweif: gedrehtes Quadrat, zwei Kanten sichtbar, die dritte vom
   Blasenkoerper verdeckt. */
/* Der Schweif sitzt ueber dem Personenzeichen im Fuss -- 1,25 rem entspricht
   der Mitte des 30-px-Kreises bei .75 rem Einzug. So liest sich die Blase als
   Rede DIESER Person und nicht als Kasten mit einer Zeile darunter. */
.sgp-blase::after {
    content: "";
    position: absolute;
    left: 1.4rem;
    bottom: -11px;
    width: 20px;
    height: 20px;
    background: #faf8ee;
    border-right: 1px solid #e6e1cd;
    border-bottom: 1px solid #e6e1cd;
    transform: rotate(45deg);
}

.sgp-blase-titel {
    display: block;
    margin-bottom: .35rem;
    font-weight: 600;
}

.sgp-blase .user-review-text { overflow-wrap: anywhere; }

.sgp-blase-bild        { flex: 0 0 auto; width: 72px; line-height: 0; }
.sgp-blase-bild img    { width: 72px; height: 72px; object-fit: cover; display: block; }

/* Zeichen · Name · Sterne, darunter Datum und Region.
   Der Einzug entspricht dem Schweif der Blase darueber. */
/* ⚠ DIESER BEREICH LIEGT AUSSERHALB DER `.sgp-ui`-HUELLE.

   `#product-ratings` steht hinter dem schliessenden `</div>` der Huelle, und
   sgp-ui.css ist vollstaendig auf `.sgp-ui` praefixiert -- `d-flex`, `gap-2`,
   `align-items-start` im Markup sind dort also Klassen, die es gibt und die
   nichts tun. Gemessen: `.sgp-stimme-fuss` stand auf `display: block`, und
   Zeichen, Name und Datum brachen in DREI Zeilen um statt in zwei.

   Die Huelle drumherum zu legen waere der grosse Hebel gewesen -- sie bringt
   Bootstraps Reboot mit und haette Schrift und Abstaende des ganzen
   Bewertungsbereichs veraendert, den ich nicht umbauen soll. Also stehen die
   paar Layout-Eigenschaften hier ausgeschrieben. Wandert der Bereich
   irgendwann in die Huelle, sind sie redundant, aber nicht falsch. */
.sgp-stimme-fuss {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    /* Etwas mehr Luft zwischen Schweif und Zeichen (Betreiber, 05.09.) --
       der Schweif zeigt auf das Zeichen, er soll es nicht beruehren. */
    margin-top: .5rem;
    padding-left: .75rem;
    font-size: .875rem;
    color: #5c5c52;
}

/* Zwei Zeilen, nicht drei: Zeichen, Name und Sterne stehen NEBENEINANDER,
   Datum und Region darunter. Betreiber, 05.09.: „keine drei zeilen aufmachen
   - den namen schon direkt neben das icon setzen". `display: flex` am span
   ist Pflicht -- ein <span> ist sonst inline, und der Block darin brach um. */
.sgp-stimme-angaben {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.sgp-stimme-oben  {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    line-height: 1.2;
}
.sgp-stimme-unten { display: block; color: #7a7a6e; line-height: 1.35; }

.sgp-stimme-wer  { font-weight: 600; color: #2b2b26; }
.sgp-stimme-wo::before { content: " · "; }
.sgp-stimme-wo   { font-style: italic; }

/* DIE STERNE.  Sie waren verschwunden, und die Ursache war mein eigener
   Umbau: die Groesse kam aus `#product-ratings .user-review-first .rating-box
   { height: 14px; width: 70px }` -- und `user-review-first` war die
   Foundation-Spalte des alten Fusses, die ich entfernt habe. Ohne sie greift
   nur noch `#product-ratings .rating-box` ohne Masse, und die Leiste stand mit
   Hoehe 0 da.

   Die Sternmaske selbst kommt weiter aus dem Bestand (`.rating-box,
   .rating-box .rating` tragen sie als Hintergrundbild); hier stehen nur die
   Masse und die Ausrichtung neben dem Namen.
   ⚠ Mit `#product-ratings` davor: die Bestandsregel ist (1,1,0), ein
   Selektor ohne die id kaeme auf (0,2,0) und verloere. */
#product-ratings .sgp-stimme-oben .rating-box {
    position: relative;
    display: inline-block;
    float: none;
    vertical-align: middle;
    /* Groesser als die 70x14 des Bestands und rechts an der Kante -- so
       heben sie sich vom Namen ab, statt an ihm zu kleben (Betreiber). */
    width: 90px;
    height: 18px;
    margin: 0 0 0 auto;
    padding: 0;
    background-color: #d7cfc1;
    background-size: 18px 18px;
}

#product-ratings .sgp-stimme-oben .rating-box .rating {
    display: block;
    float: left;
    height: 18px;
    background-color: #dca946;
    background-size: 18px 18px;
}


/* Gleich hohe Karten. `autoHeight` richtet die Buehne nach der hoechsten
   Karte der Seite -- die anderen standen dann kuerzer da und darunter klaffte
   Luft bis zu den Pfeilen. Jetzt strecken sich alle drei auf dieselbe Hoehe,
   der Text steht oben, die Person unten. Das ist die uebliche Kartenform und
   verteilt den Ueberschuss dorthin, wo er nicht als Loch liest. */
.sgp-stimmen .owl-stage { display: flex; align-items: stretch; }
.sgp-stimmen .owl-item  { display: flex; }
.sgp-stimmen .owl-item > .sgp-stimme {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Die Blase waechst NICHT auf Kartenhoehe: sie und der Fuss gehoeren
   zusammen -- der Schweif zeigt auf das Zeichen der Person. Gestreckt stand
   der Fuss am unteren Kartenrand, 80 px unter dem Text, und der Bezug war
   dahin. Der Ueberschuss liegt jetzt unter dem Fuss, wo er nichts trennt. */
.sgp-stimmen .sgp-blase       { flex: 0 0 auto; }
.sgp-stimmen .sgp-stimme-fuss { margin-top: 0; }


/* --- 8. Vor und zurueck ---------------------------------------------------
   Belegte 118 px Hoehe fuer zwei Verweise. Jetzt eine Zeile. */

/* ⚠ `width: 100%`. Ohne das kollabiert die Zeile auf Breite 0 und klebt am
   rechten Seitenrand -- dasselbe Muster wie bei der Kopfzeile: ein
   Flex-Container ohne eigene Breite bekommt in diesem Baum keine vom
   Elternteil, weil `#article-detail` als Foundation-`.columns` floatet.
   Zweimal derselbe Fehler an einem Tag; deshalb steht er hier als Regel und
   nicht als Zufall. */
.sgp-nachbarn {
    width: 100%;
    border-top: 1px solid #e6e1cd;
    margin: 1rem 0 0;
}

/* In der Kaufspalte reicht der Platz fuer zwei Namen nebeneinander knapp --
   `min-width: 0` erlaubt dem Namen zu kuerzen statt die Zeile zu sprengen. */
.sgp-nachbar {
    color: #3f3f38;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 49%;
}

.sgp-nachbar:hover .sgp-nachbar-name { color: var(--sg-link); }

.sgp-nachbar-bild     { flex: 0 0 auto; width: 44px; line-height: 0; }
.sgp-nachbar-bild img { width: 44px; height: 44px; object-fit: cover; display: block; }

.sgp-nachbar-pfeil {
    color: var(--sg-green);
    font-size: 1.4rem;
    line-height: 1;
    flex: 0 0 auto;
}

.sgp-nachbar-text { display: flex; flex-direction: column; min-width: 0; }

.sgp-nachbar-was {
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #7a7a6e;
}

.sgp-nachbar-name {
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .sgp-nachbar-was { display: none; }
    .sgp-nachbar-name { font-size: .875rem; }
}


/* --- 9. Nachtrag: Hoehe, Pfeile, Feldbeschriftung -------------------------

   (a) Die Blasen werden auf sieben Zeilen gedeckelt. Ohne das richtet sich
   die Karussellhoehe nach dem laengsten Beitrag der gerade sichtbaren Seite,
   und die Hoehe springt beim Blaettern. Mit Deckel sind alle Karten
   annaehernd gleich hoch; wer den ganzen Text will, klappt ihn nicht auf --
   er steht vollstaendig in der Blase, sobald sie die einzige auf der Seite
   ist (Telefon). Sieben Zeilen sind rund 45 Woerter, genug fuer die Aussage. */
/* Sechs Zeilen Text, EINE Reihe Bilder. Der Deckel auf den Text allein
   reichte nicht: eine Blase mit vier Bildern war 460 px hoch, waehrend die
   daneben 160 px mass -- und Owl richtet die Stage nach der hoechsten. Beides
   zusammen haelt die Karten in einem Rahmen von rund 280 px. */
/* ACHT Zeilen bei Beitraegen ohne Bild -- gemessen, nicht geraten: bei
   340 px Kartenhoehe hatten diese Karten 60 bis 205 px unter dem Fuss frei,
   eine Zeile kostet 24. Zwei Zeilen mehr passen also selbst in die knappste,
   mit 12 px Reserve.
   Der Grund ist nicht Textmenge um ihrer selbst willen: die Kartenhoehe steht
   fest, damit beim Blaettern nichts springt. Was der Text nicht fuellt, bleibt
   als Weissraum stehen -- also fuellt ihn besser der Text. */
.sgp-blase .user-review-text {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Die Bilder eines Beitrags laufen waagerecht statt zeilenweise umzubrechen
   (Betreiber, 05.09.) -- zwei nebeneinander, der Rest per Wischen oder
   Scrollen. Kein zweites Karussell in jeder Blase: eine Schnappleiste ist
   hier robuster als ein Owl im Owl, und auf dem Telefon ist Wischen ohnehin
   die erwartete Geste. */
.sgp-blase-bilder {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;
    scrollbar-width: thin;
    scrollbar-color: #d8d2bd transparent;
}

.sgp-blase-bilder::-webkit-scrollbar       { height: 5px; }
.sgp-blase-bilder::-webkit-scrollbar-thumb { background: #d8d2bd; border-radius: 3px; }

/* Rechtsbuendig, dort wo sonst das schliessende Zeichen stuende -- der
   Knopf tritt an dessen Stelle und uebernimmt auch seinen Platz. */
.sgp-blase-mehr {
    display: block;
    margin: .25rem 0 0 auto;
    padding: 0;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--sg-link);
}

/* Ein gekuerztes Zitat wird nicht geschlossen: das Anfuehrungszeichen unten
   rechts wuerde behaupten, der Beitrag sei zu Ende. Er ist es nicht -- er
   steht vollstaendig im Modal hinter „mehr lesen". */
.sgp-blase--gekuerzt .sgp-blase-zu { display: none; }

.sgp-blase-mehr:hover { text-decoration: underline; }

/* Im Modal steht der Beitrag vollstaendig -- ohne Deckel, ohne Blase. */
#sgpStimmeModal .sgp-stimme-voll { font-size: 1rem; line-height: 1.6; }
#sgpStimmeModal .sgp-blase-bild { flex: 0 0 calc(33.333% - .34rem); }

@media (max-width: 767.98px) {
    .sgp-blase .user-review-text { -webkit-line-clamp: 10; }
}



/* (c) „Stueck" belegte eine ganze Zeile fuer ein Feld von 88 px. Die
   Beschriftung bleibt fuer Vorlesegeraete erhalten (das `for` zeigt weiter
   auf das Feld), sie steht nur nicht mehr im Weg -- neben dem Feld steht
   „in den Warenkorb", damit ist die Zahl erklaert. */
.sgp-artikel-kauf label[for="sgpNumber"] {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* (d) Bilder in den Berichten: gleiche Kachelgroesse wie die Bildleiste,
   damit die Seite eine Sprache spricht. Vorher trugen sie Foundation-Spalten
   und wurden je nach Bildseitenverhaeltnis unterschiedlich hoch. */
.sgp-blase-bilder      { margin-top: .75rem; }
/* Zwei je Blasenbreite, gross genug um etwas zu erkennen, leicht gerundet
   wie alles andere auf dieser Seite. `calc(50% - .25rem)` ist die halbe
   Breite minus der halbe Abstand -- so passen genau zwei, egal wie breit die
   Karte gerade ist. */
.sgp-blase-bild {
    flex: 0 0 calc(33.333% - .34rem);
    scroll-snap-align: start;
    line-height: 0;
    border: 1px solid #e6e1cd;
    border-radius: .5rem;
    overflow: hidden;
}

/* Quadratisch, eingepasst statt verzerrt: `object-fit: cover` fuellt das
   Quadrat und schneidet den Ueberstand, `object-position: center` nimmt die
   Mitte. Vorher 4:3 -- bei hochformatigen Aufnahmen (tzara, 04.10.) blieben
   dadurch Streifen stehen. Ein Quadrat kennt kein Hoch- und kein Querformat
   und laesst deshalb nirgends Luft. */
/* ⚠ Selektor mit dem Elternteil davor. `.sgp-blase-bild img` allein verlor
   gegen eine Bestandsregel, und das Bild blieb bei seiner natuerlichen Breite
   (96 px) in einer 154 px breiten Kachel stehen -- genau der weisse Streifen,
   der beanstandet wurde. Gemessen an tzara, 04.10.: `natural 96x69`, Kachel
   154, `w=96px`. */
.sgp-blase-bilder .sgp-blase-bild img,
#sgpStimmeModal .sgp-blase-bilder .sgp-blase-bild img {
    /* `!important`, weil der Bestand ausserhalb der `.sgp-ui`-Huelle eine
       eigene Breite auf diese Bilder setzt: gemessen `w=96px` in einer
       154 px breiten Kachel -- der weisse Streifen rechts, den der Betreiber
       an tzara/04.10. gesehen hat. Die Quelldatei ist 96x69 gross; das
       Quadrat fuellt sie hoch und schneidet seitlich, statt Luft zu lassen. */
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
    background: #f2efe2;
}

.sgp-blase-bild picture { display: block; }


/* --- 10. Pflegetipps ------------------------------------------------------
   Vier Spalten mit zentriertem Text, `padding: 15px` inline und Verweisen im
   Fliesstext („=> Rosen schneiden"). Als Karten gelesen: gleiche Hoehe,
   gleicher Rahmen wie die Kennzeichen-Box, der Verweis am Fuss statt mitten
   im Absatz. Das Markup bleibt, wie es ist -- nur die Gestaltung ist neu,
   damit an den beiden Fassungen (Rose und Clematis) nichts auseinanderlaeuft. */

#pflegetips-carousel .item {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;
    padding: 1rem !important;
    text-align: left !important;
    background: #faf8ee;
    border: 1px solid #e6e1cd;
    border-radius: .5rem;
}

#pflegetips-carousel .item strong {
    font-size: 1rem;
    line-height: 1.3;
    color: #2b2b26;
}

#pflegetips-carousel .item p {
    margin: 0 !important;
    font-size: .875rem;
    line-height: 1.5;
    color: #3f3f38;
}

/* Die Verweise stehen am Fuss der Karte, untereinander, mit etwas Luft --
   vorher liefen sie als Textzeilen mit „=>" mitten in den Absatz. */
#pflegetips-carousel .item a {
    margin-top: auto;
    font-weight: 600;
    font-size: .875rem;
}

#pflegetips-carousel .owl-stage { display: flex; align-items: stretch; }
#pflegetips-carousel .owl-item  { display: flex; }
#pflegetips-carousel .owl-item > .item { width: 100%; }


/* --- 11. Pflegetipps: Abstaende und ein Zeichen ---------------------------
   Betreiber: „abstaende beim pflege-tips slider? ein icon oder etwas anderes
   emotionales bei den pflegetips?"

   Ein Blatt als Wasserzeichen in der Ecke jeder Karte -- einheitlich, nicht
   je Karte ein anderes Symbol: die Reihenfolge der vier Tipps steht in zwei
   Fassungen (Rose und Clematis) und ein `nth-child`-Symbol saesse beim
   naechsten Umbau am falschen Text. Es ist ein Hintergrundbild aus diesem
   Blatt, kein Icon-Zeichensatz -- die Artikelseite laedt keinen. */

#pflegetips-carousel .item {
    position: relative;
    overflow: hidden;
}

#pflegetips-carousel .item::after {
    content: "";
    position: absolute;
    right: -10px;
    bottom: -14px;
    width: 76px;
    height: 76px;
    opacity: .13;
    pointer-events: none;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369732f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E");
}

/* Die Karten brauchen Luft zueinander und zum Rand -- Owl setzt `margin` je
   Item, aber die Reihe selbst stand ohne Abstand zur Ueberschrift und zum
   naechsten Abschnitt. */
/* Ein Abstandsmass fuer beide Karussells (Betreiber: „konsistenz ist
   angesagt"): 1 rem ueber, 1,5 rem unter der Reihe, .25 rem je Element. */
#pflegetips-carousel,
.sgp-stimmen.owl-carousel { margin: 1rem 0 1.5rem; }

/* DER STEG ZWISCHEN DEN KARTEN -- eine Zahl fuer beide Karussells.
   Vorher: Stimmen 28 px (Owl-`margin: 20` plus 2x4 Innenrand), Pflegetipps
   8 px. Jetzt tragen beide Owl-`margin: 0`, und der sichtbare Abstand ist
   2 x .5 rem = 16 px -- ein Wert der Abstandsreihe dieser Seite. */
#pflegetips-carousel .owl-item,
.sgp-stimmen .owl-item { padding: 0 .5rem; }




/* Das Personenzeichen unter dem Schweif der Blase. */
.sgp-stimme-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #faf8ee;
    border: 1px solid #e6e1cd;
    color: var(--sg-green);
}


/* ===========================================================================
   EINE BEDIENUNG FUER ALLE DREI KARUSSELLS  ·  [CC-9] 05.09.2026

   Betreiber: „inkonsistente platzierung der vor/zurueck buttons von
   kommentar-slider und pflegetips, entweder beide unten oder beide oben, oder
   overlay-pfeile links/rechts. aber konsistent!"

   Es waren drei verschiedene Loesungen auf einer Seite: Bildleiste als
   Overlay an den Schmalseiten, Pflegetipps oben rechts, Stimmen unten rechts.

   Gewaehlt: UNTEN RECHTS, fuer alle drei. Das ist die einzige der drei
   angebotenen Varianten, die nirgends ueberlappt -- und Ueberlappungen hat
   derselbe Betreiber heute zweimal beanstandet (Pfeile auf „Jetzt bewerten",
   Pfeile auf dem Hauptbild). Overlay haette bei den Stimmen und den
   Pflegetipps auf dem Text gelegen, oben rechts bei den Stimmen wieder auf
   dem Bewertungskopf.
   =========================================================================== */

.sgp-stimmen.owl-theme .owl-nav,
#pflegetips-carousel.owl-theme .owl-nav {
    position: static;
    display: flex;
    justify-content: flex-end;
    gap: .25rem;
    margin: .5rem 0 0;
}

.sgp-stimmen.owl-theme .owl-nav [class*="owl-"],
#pflegetips-carousel.owl-theme .owl-nav [class*="owl-"] {
    position: static;
    transform: none;
    margin: 0;
    width: 30px;
    height: 30px;
    line-height: 26px;
    padding: 0;
    border: 1px solid var(--sg-green-border);
    border-radius: 50%;
    background: #fff;
    color: var(--sg-green-dark);
    font-size: 1.25rem;
    box-shadow: none;
}

.sgp-stimmen.owl-theme .owl-nav [class*="owl-"]:hover,
#pflegetips-carousel.owl-theme .owl-nav [class*="owl-"]:hover {
    background: var(--sg-green);
    border-color: var(--sg-green);
    color: #fff;
}

.sgp-stimmen.owl-theme .owl-nav .disabled,
#pflegetips-carousel.owl-theme .owl-nav .disabled { opacity: .35; }



/* --- Feste Buehnenhoehe fuer die Stimmen ----------------------------------
   Ohne `autoHeight` bestimmt die hoechste Karte die Buehne, und die ist durch
   den Deckel (sechs Zeilen Text, eine Bildreihe) bekannt und konstant. Die
   Mindesthoehe ist bewusst grosszuegig: lieber Luft in einer kurzen Karte als
   ein abgeschnittener Name in der langen, und beim Blaettern aendert sich
   nichts mehr. */
/* FESTE Hoehe, nicht `min-height`: mit Mindesthoehe sprang die Buehne
   trotzdem (351 / 351 / 386 gemessen), weil Karten mit Bildern hoeher sind.
   400 px fassen sechs Zeilen Text, eine Bildreihe und den Fuss -- grosszuegig
   gesetzt, damit kein Name mehr abgeschnitten wird. */
/* 340 px, und die Bilder ruecken zu dritt in die Reihe (Betreiber: „lieber
   die bilder kleiner (3 in der kachel = weniger hoch)"). Bei 400 px stand
   tzaras Beitrag trotzdem unten an, weil zwei Bilder in einer Reihe 154 px
   hoch waren; zu dritt sind es 100, und die 54 px Unterschied sind genau der
   Grund, warum die Karte jetzt passt. */
.sgp-stimmen .owl-item > .sgp-stimme { height: 340px; }

/* Der Fuss mit Zeichen, Name und Datum darf nie umbrechen oder abgeschnitten
   werden -- er ist die Zuordnung des Zitats. */
.sgp-stimme-fuss { flex: 0 0 auto; }
.sgp-stimme-wer, .sgp-stimme-wann { white-space: nowrap; }


/* --- Anfuehrungszeichen statt Gedankenstrich ------------------------------
   Betreiber: „der strich am anfang des kommentar-textes weg, dafuer grosse
   anfuehrungszeichen - typografisch schoen, die die nach oben und unten
   zeigen." Also die deutschen Gaensefuesschen: unten oeffnend, oben
   schliessend.

   Das oeffnende steht als grosses, blasses Zeichen links oben in der Blase --
   es traegt den Text, ohne ihn zu verdraengen. Das schliessende sitzt am
   Ende, kleiner: es beendet das Zitat, statt es ein zweites Mal anzukuendigen.
   Beide `aria-hidden` in der Wirkung -- sie stehen in `content`, also liest
   sie kein Vorlesegeraet als Text mit. */

.sgp-blase { padding-left: 2.5rem; }

/* ZUR TYPOGRAFIE, weil die Frage berechtigt ist: Deutsch oeffnet ein Zitat
   mit „ (U+201E) auf der Grundlinie und schliesst mit " (U+201C) oben. Das
   ist richtig — und genau deshalb „sitzt es sehr tief", wenn man es als
   grosses Schmuckzeichen oben in die Ecke stellt: die Glyphe ist gebaut, um
   unten am Wortanfang zu stehen, nicht oben in einer Ecke.
   Zwei Wege daraus: das englische " (66-Form) nehmen, das oben sitzt — dann
   ist die Anfuehrung aber nicht mehr deutsch. Oder das richtige Zeichen
   behalten und den Versatz ausgleichen. Zweiteres, mit `translateY`: das
   Zeichen bleibt korrekt, steht aber optisch dort, wo das Auge es sucht. */
.sgp-blase::before {
    content: "\201E";           /* „ */
    position: absolute;
    left: .55rem;
    top: .5rem;
    transform: translateY(-.28em);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.25rem;
    line-height: 1;
    color: var(--sg-green);
    opacity: .28;
    pointer-events: none;
}

/* ⚠ DER GEDANKENSTRICH KOMMT AUS DEM BLATT, NICHT AUS DEN DATEN.
   `#product-ratings .user-review-text:before { content: "— " }` steht in
   sgp-basis.css UND in sgp-ui-theme.css -- gemeinsames CSS, das ich nicht
   anfasse. Ich hatte ihn zuerst per JS aus dem Text zu schneiden versucht;
   der Server liefert die Beitraege aber sauber („Super Sorte, sehr robust…"),
   und das Skript lief gegen einen Strich, den es nie gab. Er stand weiter da,
   weil er gar nicht im Text steht.
   Hier wird die Regel ueberschrieben statt geaendert: (1,2,1) gegen (1,1,1).
   Das Zitat bekommt stattdessen richtige Anfuehrungszeichen. */
#product-ratings .sgp-blase .user-review-text::before,
#product-ratings .sgp-blase .user-review-text:before { content: none; }

/* Das schliessende Zeichen steht ausserhalb der Zeilenklammer (siehe die
   Anmerkung in der Vorlage) und sitzt rechts unten in der Blase -- dort, wo
   ein Zitat endet. */
/* Gleich gross und gleich stark wie das oeffnende -- ein Zitat, das mit
   einem 3,25-rem-Zeichen aufmacht und mit einem 2-rem-Zeichen zumacht, sieht
   nach zwei verschiedenen Absichten aus.

   Und es ruckt hoch: `"` (U+201C) ist eine Hochkomma-Form, sie sitzt von
   Natur aus oben auf der x-Hoehe. In einer eigenen Zeile unter dem Text wirkt
   sie deshalb, als sei sie heruntergefallen. `line-height: 0` nimmt der Zeile
   die Hoehe, `translateY` schiebt das Zeichen auf die Hoehe der letzten
   Textzeile -- es schliesst dort, wo der Text aufhoert, statt darunter.
   Rechts steht es, weil links das oeffnende steht; die beiden fassen das
   Zitat ein. */
.sgp-blase-zu {
    display: block;
    margin-top: 0;
    text-align: right;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.25rem;
    line-height: 0;
    transform: translateY(-.42em);
    color: var(--sg-green);
    opacity: .28;
    pointer-events: none;
}

/* Auf dem Telefon steht die Blase allein und darf schmaler eingezogen sein. */
@media (max-width: 575.98px) {
    .sgp-blase { padding-left: 2rem; }
    .sgp-blase::before { font-size: 2.5rem; left: .45rem; }
}


/* Auch diese beiden stehen ausserhalb der Huelle und brauchen ihr Layout
   ausgeschrieben -- siehe die Anmerkung am Fuss der Stimme. */
.sgp-blase-bilder {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
}

.sgp-stimme-avatar { flex: 0 0 auto; }
.sgp-stimme-oben   { gap: .5rem; flex-wrap: wrap; }


/* Blasen mit Bildern: drei Zeilen Text statt sechs. Eine Bildreihe ist
   97 px hoch, sechs Zeilen sind rund 144 -- zusammen mit Fuss und Innenrand
   passte das nicht in 340 px, und der Name rutschte unter den Kartenrand
   (tzara). Der Knopf „mehr lesen" kommt dadurch frueher; der vollstaendige
   Beitrag steht ohnehin im Modal. */
/* VIER Zeilen, nicht drei -- gemessen, nicht geschaetzt: bei 340 px
   Kartenhoehe hat die knappste Karte mit Bild 43 px unter dem Fuss frei, eine
   Zeile kostet 24. Eine passt also, zwei nicht (48 > 43). Nach der Aenderung
   bleiben dort 19 px Reserve.
   Die Hoehe gleichzeitig zu senken geht nicht: jeder Pixel weniger Hoehe ist
   ein Pixel weniger Reserve, und bei 330 px waeren es nur noch 9 -- zu knapp
   fuer eine andere Schriftgroesse oder einen langen Namen. */
.sgp-blase--mit-bild .user-review-text { -webkit-line-clamp: 4; }

@media (max-width: 767.98px) {
    .sgp-blase--mit-bild .user-review-text { -webkit-line-clamp: 6; }
}


/* --- Die Bildleiste bekommt ihre Pfeile INNEN, links und rechts -----------

   Betreiber: „die pfeile am slider unter dem hauptbild brauchen vertikalen
   platz - bitte inline im slider, rechts und links. das ist an der stelle
   ganz schlecht."

   Bewusste Ausnahme von der Regel „alle Pfeile unten", und sie hat ein Mass:
   die Leiste ist 92 px hoch. Eine Pfeilzeile darunter kostet rund 40 px --
   43 % mehr Hoehe fuer zwei Knoepfe, direkt unter dem Hauptbild, wo jeder
   Pixel gegen die Kaufbox arbeitet. Bei den Karten-Karussells (340 px) faellt
   dieselbe Zeile kaum ins Gewicht; dort bleiben die Pfeile unten.

   Ueberlappung ist hier in Ordnung, wo sie es bei Text nicht waere: die Pfeile
   liegen ueber einer Kachel am Rand, die man ohnehin gerade wegblaettert --
   nicht ueber einem Wort, das man lesen will. */

.sgp-bildleiste.owl-theme { position: relative; }
/* ⚠ `position: static` AUSDRUECKLICH. Der Bestand positioniert `.owl-nav`
   absolut (fuer die anderen Karussells der Seite), und die Box hat dabei
   Hoehe 0. Meine Pfeile mit `top: 50%` bezogen sich damit auf diesen
   Nullpunkt statt auf die Leiste -- gemessen sassen sie 54 px UEBER ihr, also
   auf dem Hauptbild. Mit `static` ist der naechste positionierte Vorfahr
   wieder `.sgp-bildleiste` selbst, und 50 % sind die halbe Leistenhoehe. */
.sgp-bildleiste.owl-theme .owl-nav {
    position: static;
    margin: 0;
    text-align: left;
}

.sgp-bildleiste.owl-theme .owl-nav [class*="owl-"] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    margin: 0;
    width: 28px;
    height: 28px;
    line-height: 24px;
    padding: 0;
    border: 1px solid var(--sg-green-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--sg-green-dark);
    font-size: 1.15rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}

.sgp-bildleiste.owl-theme .owl-nav .owl-prev { left: .35rem; }
.sgp-bildleiste.owl-theme .owl-nav .owl-next { right: .35rem; }

.sgp-bildleiste.owl-theme .owl-nav [class*="owl-"]:hover {
    background: var(--sg-green);
    border-color: var(--sg-green);
    color: #fff;
}

/* Am Anfang und am Ende der Leiste ist der jeweilige Pfeil ohne Funktion --
   dann soll er auch nicht ueber einem Bild liegen. */
.sgp-bildleiste.owl-theme .owl-nav .disabled { opacity: 0; pointer-events: none; }


/* --- 12. Das Modal „Erfahrungsbericht" ------------------------------------

   (a) Der Kopf traegt nur noch den Schliessen-Knopf, weil die Ueberschrift im
   Formular steht. Ohne Titel braucht er weniger Hoehe und keine Trennlinie --
   die bringt der Abstand zum Formular schon mit. */

.sgp-modal-kopf-schlank {
    border-bottom: 0;
    padding-bottom: .25rem;
}

/* (b) Die beiden Knoepfe unter „was wollen Sie machen?".

   Gemessen: der linke stand mit `color: #767676` auf `background: #69732f` --
   rund 1,3:1, also praktisch unlesbar. Der Grund ist ein halb abgeloester
   Zustand: die Klasse `hollow` (Foundation) soll einen Knopf mit Rahmen und
   ohne Fuellung machen; die Fuellung kam aber schon aus `.button.secondary`,
   und uebrig blieb die graue Schrift der `hollow`-Variante auf olivem Grund.

   Statt die Foundation-Klassen zu flicken -- sie gehen ohnehin aus dem Baum --
   bekommen die beiden Knoepfe hier ihre eigene Gestalt: der eine gefuellt,
   der andere umrandet, beide in den Hausfarben.
     gefuellt:  #fff auf #69732f  = 5,4:1
     umrandet:  #525a24 auf #fff  = 8,6:1                                   */

#sgpBerichtModal #comment-mode-full,
#sgpBerichtModal #comment-mode-images {
    padding: .5rem 1rem;
    border-radius: .5rem;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
}

#sgpBerichtModal #comment-mode-full {
    background: var(--sg-green) !important;
    border: 1px solid var(--sg-green) !important;
    color: #fff !important;
}

#sgpBerichtModal #comment-mode-images {
    background: #fff !important;
    border: 1px solid var(--sg-green) !important;
    color: var(--sg-green-dark) !important;
}

#sgpBerichtModal #comment-mode-full:hover,
#sgpBerichtModal #comment-mode-full:focus-visible {
    background: var(--sg-green-dark) !important;
    border-color: var(--sg-green-dark) !important;
}

#sgpBerichtModal #comment-mode-images:hover,
#sgpBerichtModal #comment-mode-images:focus-visible {
    background: var(--sg-green-bg) !important;
}


/* --- 13. Drei Feinheiten -------------------------------------------------- */

/* (a) Die Linie ueber „… Erfahrungen und Bilder unserer Besucher" (Betreiber,
   05.09.). Sie kommt aus `#product-attributes-header` -- dem Rest des alten
   Kopfes „weitere Informationen", in dem seit dem Umbau nur noch der
   botanische Zweitname steht. Die Linie schloss frueher eine Tabelle ab, die
   es dort nicht mehr gibt; sie trennt jetzt nichts mehr, sondern steht nur
   noch ueber der naechsten Ueberschrift. */
#product-attributes-header { border-bottom: 0 !important; }

/* (b) Der Abstand von den Stimmen zu den Pflegetipps war 66 px: 24 px vom
   Slider und 42 px vom Wrapper der Pflegetipps. Auf ein Mass gebracht, das
   zum Rest der Seite passt. */
/* Der Wrapper der Pflegetipps traegt `margin: 42px 0 0` aus dem Bestand.
   Ihn ueber `.column.small-12` zu treffen ginge nicht -- die Klasse tragen
   auf dieser Seite ein Dutzend Blocke. `:has()` trifft genau den einen, der
   das Karussell enthaelt. */
/* ⚠ `:not(#article-detail)` IST PFLICHT, an allen vier Stellen mit
   `#pflegetips-carousel`. Diese Selektoren hiessen bis zum 06.09. `.column`,
   und `#article-detail` trug `columns` -- MEHRZAHL. Sie trafen die Wurzel
   deshalb nie, und das war Zufall, nicht Absicht.

   Mit der Umbenennung auf `.sgp-spalte` (Abschnitt 92) heissen beide gleich.
   `:has(#pflegetips-carousel)` sucht aber unter ALLEN Nachfahren -- und das
   Karussell liegt irgendwo unter `#article-detail`. Damit griff
   `margin-top: 0 !important` auf die ganze Seite.

   Gemessen: die Rosenseite verlor ihre 15 px Kopfabstand aus sgp-basis.css,
   die ganze Seite rutschte um genau diesen Betrag nach oben (519 Elemente im
   Vorher/Nachher-Abzug). Die Zubehoerseite war nicht betroffen -- sie hat
   keine Pflegetips, der Selektor fand nichts. Genau diese Aufteilung hat den
   Fehler verraten.

   Gemeint war immer der Block, der das Karussell TRAEGT
   (`#product-collateral`), nie die Seitenwurzel. */

.sgp-spalte:not(#article-detail):has(> #pflegetips-carousel),
.sgp-spalte:not(#article-detail):has(#pflegetips-carousel) { margin-top: .5rem !important; }

#pflegetips-carousel { margin-top: .5rem; }

/* (c) Das Zeichen der Person sitzt etwas tiefer als Name und Datum -- so
   bleibt Luft zwischen ihm und der Blase darueber, und der Schweif zeigt in
   diese Luft hinein statt direkt auf den Rand des Kreises. Nur das Zeichen;
   Name und Datum bleiben, wo sie sind (Betreiber, 05.09.). */
.sgp-stimme-avatar { margin-top: .35rem; }


/* Der Fliesstext fluchtet mit dem Inhalt der Kennzeichen-Box darueber --
   beide beginnen 1 rem hinter der Spaltenkante. Vorher stand der Text an der
   Kante und die Box daneben eingerueckt; das las sich wie zwei verschiedene
   Spalten (Betreiber, 05.09.: „setze sie auf die selbe vertikale linie wie
   das *komplett stachelfreie …"). */
/* Der Einzug des Fliesstexts gilt nur im Raster: dort steht links daneben
   die Kennzeichen-Box, und beide sollen auf einer Linie beginnen. Gestapelt
   gibt es keine Box daneben -- dann steht der Text auf der Spaltenkante wie
   Bild und Ueberschriften, sonst waere er als einziger eingerueckt
   (gemessen 17 px Unterschied bei 320 px). */
@media (min-width: 992px) {
    .sgp-artikel-text .product-description { padding-left: 1rem; }
}


/* --- 14. Eine Form fuer die Abschnittsueberschriften ----------------------

   Betreiber: „vereinheitliche die Ueberschriften von den erfahrungen und
   pflegetips - konsistenz!"

   Sie waren zwei verschiedene Dinge: „… Erfahrungen und Bilder unserer
   Besucher" ist ein <h2> in Ueberschriftengroesse mit Unterlinie, „Pflege -
   Tipps für …" ein <div class="section-heading"> mit `font-size: 16px;
   font-weight: normal` und einem <strong> darin. Gleiche Rolle im Aufbau,
   zwei Erscheinungen.

   Beide bekommen jetzt dieselbe: 1,25 rem, halbfett, Unterlinie, gleicher
   Abstand darueber und darunter. Das Markup bleibt, wie es ist -- die
   Pflegetipps-Ueberschrift steht in zwei Fassungen (Rose und Clematis), und
   ein Umbau dort waere zweimal dieselbe Arbeit mit zwei Fehlerquellen. */

#product-ratings > h2#Erfahrungen,
#pflegetips-carousel ~ .section-heading,
.sgp-spalte:not(#article-detail) > .section-heading:has(+ #pflegetips-carousel),
.section-heading:has(+ #pflegetips-carousel),
/* „Zubehoer, Empfehlungen, oft zusammen mit … gekauft" -- dasselbe
   `div.section-heading`, nur vor einem anderen Karussell. Es stand als
   einziger Abschnittstitel noch in 16 px normal und sah daneben aus wie eine
   Bildunterschrift (Betreiber, 06.09.). [CC-9] */
.section-heading:has(+ #product-kiSimilar) {
    margin: 0 0 .75rem !important;
    /* ⚠ Links 6 px, nicht 0: dieses `!important` hat den Einzug aus
       Abschnitt 19 ueberschrieben, und die Ueberschriften standen weiter
       links als der Fliesstext. Der Wert gehoert hierher, wo das
       `!important` steht -- ein zweiter Selektor daneben verliert. */
    padding: 0 0 .5rem 6px !important;
    border-bottom: 1px solid #e6e1cd !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #0a0a0a;
}

/* Das <strong> in der Pflegetipps-Ueberschrift traegt sonst sein eigenes
   Gewicht und seine eigene Groesse. */
.section-heading:has(+ #pflegetips-carousel) strong {
    font-size: inherit;
    font-weight: inherit;
}

/* Und der Abstand davor: der Wrapper bringt 8 px mit, das Karussell noch
   einmal 8 -- zusammen mit dem Rand des Stimmen-Sliders waren das 32 px vor
   einer Ueberschrift, die selbst schon Abstand hat. */
.sgp-spalte:not(#article-detail):has(> #pflegetips-carousel),
.sgp-spalte:not(#article-detail):has(#pflegetips-carousel) { margin-top: 0 !important; }

#pflegetips-carousel { margin-top: 0; }


/* --- 15. Das Merken-Herz --------------------------------------------------

   Betreiber, 05.09.: „das herz ist abgeschnitten, und darf schon auch rot
   sein. ein herz ist rot, und nicht orange."

   ZWEI SACHEN, ZWEI URSACHEN:

   (a) Abgeschnitten war es, weil die Herzform die viewBox `0 0 16 16` bis an
   die Kante ausfuellt und die Kontur (`stroke-width: 1.3`) je zur Haelfte
   ausserhalb liegt. Behoben in der Vorlage: `viewBox="-1 -1 18 18"` gibt
   ringsum einen Pixel Luft, ohne die Form zu veraendern.

   (b) Orange kam aus `sgp-basis.css`: CC-1s Regeln setzen `#bd5900` -- die
   Handlungsfarbe der Seite, dieselbe wie am Knopf „in den Warenkorb". Fuer
   einen Knopf richtig, fuer ein Herz nicht. Hier steht jetzt ein gedecktes
   Rot, das neben Oliv und dem Braun der Seite bestehen kann, ohne zu
   schreien: #c0392b, auf Weiss 5,0:1.

   ⚠ Ueberschrieben, nicht geaendert: die Regeln gehoeren CC-1 und liegen in
   gemeinsamem CSS. `!important` nur dort, wo CC-1s Regel selbst mit hoher
   Spezifitaet setzt. */

/* Ein warmes Rot, kein Ziegelton: #d0322a liegt naeher am reinen Rot als
   das zuerst gesetzte #c0392b und behaelt den warmen Stich, der zum Braun
   und Oliv der Seite passt. Auf Weiss 4,9:1.
   Die Kontur ist staerker als CC-1s 1,3 -- bei 26 px Anzeige wirkte die
   duenne Linie blass, und ein Herz im Umriss lebt von seiner Kontur. */
.sgp-merken-herz {
    color: #d0322a;
}

.sgp-merken-herz .sgp-merken-herz-bild { stroke-width: 1.7; }

/* (c) Es sitzt oben buendig mit der Oberzeile „RAMBLERROSE (TURBAT, 1916)"
   statt auf Hoehe des Sortennamens darunter (Betreiber, 05.09.). Dafuer
   verlaesst es den Textfluss der Namenszeile und haengt an der Spalte --
   im DOM bleibt es, wo es ist, damit CC-1s Skript es weiter findet und die
   Reihenfolge fuer Vorlesegeraete stimmt.
   Der Sortenname bekommt rechts Platz, damit lange Namen nicht darunter
   laufen: „Comtesse Cecile de Chabrillant" ist 30 Zeichen. */
.sgp-artikel-kauf { position: relative; }

.sgp-artikel-kauf .sgp-merken-herz {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    z-index: 2;
}

.sgp-artikel-kauf .product-name-wrapp .product-name { padding-right: 2.5rem; }

.sgp-artikel-kauf .sgp-merken-herz:hover,
.sgp-artikel-kauf .sgp-merken-herz:focus-visible,
.product-name-wrapp .sgp-merken-herz:hover,
.product-name-wrapp .sgp-merken-herz:focus-visible {
    color: #d0322a !important;
}

.sgp-merken-herz[aria-pressed="true"] {
    color: #d0322a !important;
}


/* --- 16. Der Mitbestell-Block ---------------------------------------------

   Betreiber, 05.09.: Bild wieder oben neben dem Namen, der Text darunter bis
   nach links, Gebinde und „alle Größen" gleich breit UND bündig, „weitere
   Artikel" rechtsbündig.

   ⚠ ALLES NUR AUS DIESEM BLATT. `_sgpUpselling.html` gehoert nicht mir, und
   der Block wird auch im Korb und in den Sheets ausgegeben -- eine Aenderung
   am Markup traefe drei Stellen statt einer. Die Regeln hier greifen ueber
   `.sgp-artikel-beiwerk`, also ausschliesslich auf der Artikelseite.

   (a) BILD OBEN, TEXT DARUNTER. Die Karte hat Bild und Text als Flexzeile:
   `<div class="d-flex"><img><span><span Name><span Text><span Echo></span>`.
   Der Text sass dadurch in einer 156 px schmalen Saeule neben dem Bild.
   `display: contents` am Wrapper-<span> loest ihn auf, ohne das Markup
   anzufassen: seine drei Kinder werden zu direkten Zellen des Rasters --
   Name neben dem Bild, Text und Hinweis darunter ueber die volle Breite.

   ⚠ `.sgp-promo-item` ist die KARTE. `.sgp-promo` traegt der aeussere Block
   „Duenger dabei -- versandkostenfrei"; ein Selektor darauf trifft den Rahmen
   statt des Artikels und tut nichts. Zweimal danebengegriffen, bis ich die
   Klassen der Karte wirklich ausgelesen hatte -- die Namen sind sich zu
   aehnlich, um sie zu raten. */

.sgp-artikel-beiwerk .sgp-promo-item > .d-flex {
    display: grid !important;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: .5rem;
    row-gap: .15rem;
    align-items: start;
}

.sgp-artikel-beiwerk .sgp-promo-item > .d-flex > img {
    grid-column: 1;
    grid-row: 1;
}

.sgp-artikel-beiwerk .sgp-promo-item > .d-flex > span {
    display: contents;
}

.sgp-artikel-beiwerk .sgp-promo-item > .d-flex > span > .fw-semibold {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}

/* Text und „keine Groesse gewaehlt" laufen ueber beide Spalten. */
.sgp-artikel-beiwerk .sgp-promo-item > .d-flex > span > .small {
    grid-column: 1 / -1;
}

/* (b) GEBINDE UND „ALLE GROESSEN" BUENDIG. Die versteckten Auswahlfelder
   (`input.btn-check`) standen mit 13 px Breite IM Fluss und schoben die
   beiden Gebinde-Schaltflaechen um 16 px nach links, waehrend „alle Größen"
   an der rechten Kante blieb. Bootstrap nimmt `btn-check` normalerweise aus
   dem Fluss; hier hebt `sgp-extra-size` das auf. */
.sgp-artikel-beiwerk fieldset input.btn-check {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
}

/* Alle Gebinde einer Zeile gleich hoch: der Container traegt
   `align-items-start` aus Bootstrap, und damit war jede Schaltflaeche so
   hoch wie ihr eigener Text -- „1kg Rosenduenger im Karton" zweizeilig,
   „2,5kg Rosenduenger im Karton" dreizeilig, gemessen 64 gegen 80 px.
   `stretch` zieht sie auf die Hoehe der hoechsten; der Inhalt sitzt darin
   mittig, damit die kuerzere nicht oben klebt. */
.sgp-artikel-beiwerk fieldset > div {
    align-items: stretch !important;
    justify-content: flex-start !important;
}

/* `align-self: stretch` AM ELEMENT, nicht nur `align-items` am Container:
   die Schaltflaechen bringen ein eigenes `align-self` mit, und das schlaegt
   die Vorgabe des Containers. Sichtbar wurde es erst an der zweiten Karte --
   bei der ersten sind beide Beschriftungen gleich lang, da faellt nichts auf.
   Gemessen: 80 gegen 64 px. */
.sgp-artikel-beiwerk fieldset .sgp-chip {
    align-self: stretch !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ZWEI GEBINDE NEBENEINANDER (Probe, Betreiber 05.09.).
   Die Auswahl ist meist zweigliedrig -- „1kg im Karton" und „2,5kg im
   Karton" -- und nebeneinander liest sie sich als das, was sie ist: eine
   Entscheidung zwischen zwei Groessen, nicht eine Liste. Das spart eine
   Zeile Hoehe je Artikel, und bei drei Angeboten bricht die dritte
   selbstverstaendlich um.

   `calc(50% - .25rem)` ist die halbe Breite minus dem halben Abstand
   (`gap-2` = .5rem). „alle Groessen" bleibt ueber die volle Breite -- es ist
   kein Gebinde, sondern der Weg zu allen. */
/* ⚠ `flex`, nicht `width`: der Container ist eine Flexzeile, und dort
   entscheidet `flex-basis` -- eine Breitenangabe allein bleibt wirkungslos,
   solange die Basis auf 100 % steht. Gemessen: mit `width: calc(50% - .25rem)`
   blieben die Schaltflaechen bei 305 px. */
/* ⚠ `!important`, und der Grund ist wissenswert: der Bestand KENNT die
   Zweispaltigkeit schon -- `.sgp-ui .sgp-promo-item .sgp-chip { flex: 0 0
   calc(50% - 4px) }` steht in sgp-ui-theme.css, aber innerhalb
   `@media (max-width: 35.98em)`. Also genau andersherum: zwei nebeneinander
   auf dem TELEFON, wo die Karte die volle Seitenbreite hat, und
   untereinander auf dem Schirm, wo sie in einer 305 px schmalen Spalte
   steht. Das ist keine Nachlaessigkeit, sondern eine Entscheidung.

   Hier wird sie fuer die Artikelseite umgedreht, weil der Betreiber es sehen
   wollte. Was das kostet: zwei Gebinde in 305 px sind je 150 px, und
   „2,5kg Rosenduenger im Karton" plus Preis braucht darin drei Zeilen statt
   zwei -- die Karte wird also nicht zwingend niedriger. */
.sgp-artikel-beiwerk fieldset .sgp-chip {
    flex: 0 0 calc(50% - .25rem) !important;
    width: calc(50% - .25rem) !important;
    margin: 0;
    font-size: .8125rem;
    line-height: 1.25;
    padding: .4rem .5rem;
}

.sgp-artikel-beiwerk fieldset .sgp-chip-toggle {
    width: 100%;
    margin: 0;
}

/* Bei sehr schmaler Spalte -- Telefon, oder wenn das Beiwerk unter dem Text
   steht -- wieder untereinander: zwei Gebinde in 140 px waeren zwei Woerter
   je Zeile. */
@media (max-width: 575.98px) {
    .sgp-artikel-beiwerk fieldset .sgp-chip { flex: 0 0 100%; width: 100%; }
}

/* (c) „weitere Artikel auswaehlen" an die rechte Kante. */
.sgp-artikel-beiwerk .sgp-promo ~ p,
.sgp-artikel-beiwerk > .sgp-ui p:has(> .btn-outline-sg) { text-align: right; }


/* Das Kennzeichen „innerhalb DE" in der Ueberschrift des Mitbestell-Blocks:
   kleiner und an die rechte Kante (Betreiber, 05.09.). Es ist eine
   Einschraenkung zur Aussage „versandkostenfrei", keine zweite Aussage --
   und Einschraenkungen stehen klein und am Rand, nicht mitten im Satz. */
.sgp-artikel-beiwerk .sgp-promo > h2 {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sgp-artikel-beiwerk .sgp-promo > h2 .badge {
    margin-left: auto;
    font-size: .6875rem;
    font-weight: 600;
    padding: .3em .6em;
}


/* Die Beschriftung des Gebinde-Feldes traegt `visually-hidden`, ist aber
   280 px breit im Fluss geblieben -- bei 992 px Fensterbreite ergab das
   waagerechtes Scrollen (1022 gegen 992 gemessen). `<legend>` ist ein
   Sonderfall: Bootstraps Utility setzt zwar `position: absolute`, aber die
   Legende gehoert zum Rahmen des `<fieldset>` und wird von manchen Browsern
   trotzdem im Fluss gerechnet. Hier hart zusammengefaltet -- fuer
   Vorlesegeraete bleibt sie erhalten. */
/* ⚠ `display: block` ist der entscheidende Teil. Ein `<legend>` rendert als
   `display: table`, und dabei ignoriert der Browser jede Breitenangabe -- die
   Legende blieb 280 px breit, obwohl `max-width: 1px` gesetzt war. Gemessen:
   `w=279.531px maxW=1px`. Erst als Block laesst sie sich zusammenfalten. */
/* Alle versteckten Legenden im Artikelbereich, nicht nur die im
   Mitbestell-Block: bei 320 px stammte der Ueberstand aus einer zweiten,
   die anderswo steht. */
#article-detail legend.visually-hidden,
.sgp-artikel-beiwerk legend.visually-hidden {
    display: block !important;
    position: absolute !important;
    width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    float: none !important;
}


/* --- 17. Unter 992 px wird gestapelt -------------------------------------

   Die drei Zellen tragen `col-12 col-lg-6`. Erwartet: volle Breite bis 991,
   halbe ab 992. Gemessen bei 765 px Fensterbreite: **je 382,5 px**, also
   halbe Breite -- `col-lg-6` wirkt in diesem Baum ohne seine Media-Query.
   (Vermutlich ein Rest der Foundation-Abloesung; CC-10 baut das Raster
   gerade um.)

   Folge ohne diese Regel: Auf Tablets steht die Kaufbox in 383 px, die
   Lieferform-Kacheln brechen dreizeilig um, und das Bild ist halb so breit
   wie es sein koennte. Hier wird deshalb ausdruecklich gestapelt, was
   gestapelt gehoert -- dieselbe Grenze, an der mein Raster oben einsetzt,
   damit es genau einen Umschaltpunkt gibt. */

@media (max-width: 991.98px) {
    /* DER SORTENNAME STEHT UEBER DEM BILD, auf jedem gestapelten Schirm.

       Die Vorlage fuehrt ihn zweimal: einmal als <h1> ganz oben mit
       Foundations `show-for-small-only` (nur unter 640 px) und einmal als
       <h2> in der Kaufspalte mit `d-none d-lg-flex`. Erwartet: unter 992 der
       H1, darueber der H2. Gemessen bei 785 px: der H1 war weg, der H2 stand
       bei y=932 -- also erst nach dem Bild. `d-lg-flex` wirkt in diesem Baum
       ohne seine Media-Query, genau wie `col-lg-6`.

       Ergebnis war eine Luecke zwischen 640 und 991: auf dem Telefon oben,
       auf dem Tablet unten. Hier bekommt jeder gestapelte Schirm dieselbe
       Ordnung -- Name zuerst, dann das Bild. */
    .product-name-wrapp.sgp-nur-klein { display: flex !important; }
    .sgp-artikel-kauf .product-name-wrapp.sgp-name-zeile { display: none !important; }

    .sgp-ui .row.sgp-artikel-kopf > .sgp-artikel-medien,
    .sgp-ui .row.sgp-artikel-kopf > .sgp-artikel-kauf,
    .sgp-ui .row.sgp-artikel-kopf > .sgp-artikel-kennzeichen,
    .sgp-ui .row.sgp-artikel-kopf > .sgp-artikel-text {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ⚠ DAS BILD WIRD GEDECKELT. Gestapelt nimmt es die volle Spaltenbreite
       -- bei 785 px sind das 765x765 px, und mit der Bildleiste darunter
       stehen 850 px zwischen Seitenanfang und Sortennamen. Der Preis liegt
       dann auf einem Tablet unter der Falz, obwohl daneben Platz waere.
       480 px zeigen die Bluete gross genug und lassen Namen, Kurztext und
       Preis in den ersten Bildschirm ruecken. Mittig, damit die Spalte nicht
       einseitig wirkt. */
    /* Der Deckel gilt AB 768 px. Darunter -- Telefon, schmales Fenster --
       gehoert das Bild ueber die ganze Breite: bei 591 px liess der Deckel
       111 px Weissraum links und rechts stehen, waehrend die Bluete kleiner
       war als noetig. Auf dem Telefon ist Bildschirmbreite das Beste, was man
       einem Produktbild geben kann. */
    /* ⚠ HIER STAND EIN RECHTECK ZWISCHEN 576 UND 991 PX -- ENTFERNT.
       Betreiber, 06.09.2026, auf die Frage quadratisch oder wie bisher:
       „quadratisch, immer."

       Was hier stand und warum: die Bildflaeche bekam volle Breite bei fester
       Hoehe (58 % der Bildschirmhoehe, gedeckelt auf 520 px), damit der
       Kaufweg nicht zu tief rutscht. Der Gedanke war richtig gemessen -- bei
       900 px Viewport war das Bild dadurch 856x520 statt 856x856, und der
       Preis stand 336 px hoeher.

       Warum es trotzdem weg ist: das Verhaeltnis lief mit der Breite davon.
       Gemessen 576 -> 1,07, dann 1,15, 1,39, und bei 900 px 1,65. Aus einem
       Produktbild wurde ein Streifen, und zwar genau dort, wo die Seite auf
       Tablets am haeufigsten steht. Ein Bild, das je nach Fensterbreite ein
       anderes Format hat, liest sich als Fehler, nicht als Anpassung.

       ⚠ ES IST ERSATZLOS GESTRICHEN, nicht durch etwas Eigenes ersetzt. Ohne
       diesen Block gilt wieder der Bestand: `.image-square` ist ein Quadrat
       ueber `padding-bottom: 100%`, das Bild fuellt es ueber
       `min-width/min-height: 100%` und ist mit `translate(-50%, -50%)`
       zentriert. Damit gibt es ueber ALLE Breiten nur noch EINE Bauart
       statt zweier -- und das raeumt zugleich die Falle weg, an der ich heute
       schon einmal haengengeblieben bin: eine Regel, die bei 768 px stimmte,
       weil dort `top: 0; left: 0` danebenstand, und ab 992 px das Gegenteil
       bewirkte, weil es das dort nicht tat (Abschnitt 90).

       Der Preis der Entscheidung, gemessen und nicht geschaetzt, steht im
       Commit: der Kaufweg rueckt zwischen 576 und 991 px um 118 bis 336 px
       nach unten. Das ist der Tausch, den der Betreiber bewusst gemacht hat. */

    /* Gestapelt braucht jeder Block Abstand zum naechsten -- aber einen, der
       zu den Abstaenden innerhalb der Bloecke passt. Gemessen waren es 49 px
       zwischen Kaufspalte und Kennzeichen; das liest sich als Bruch, nicht
       als Gliederung. Ein Mass fuer alle drei. */
    .sgp-artikel-medien     { margin-bottom: 1rem; }
    .sgp-artikel-kauf       { margin-bottom: 1rem; }
    .sgp-artikel-kennzeichen{ margin-bottom: 1rem; }

    /* Faellt der Mitbestell-Block aus (auf schmalem Schirm bietet ihn der
       Bestand ueber das Bottom-Sheet an), soll seine Huelle keinen Abstand
       hinterlassen. */
    .sgp-artikel-beiwerk    { margin-bottom: 0; }

    /* ⚠ Die Kennzeichen-Box stand als einzige auf L0 statt L7 -- sie ist
       selbst die Zelle, und gestapelt fehlte ihr das Spaltenpadding, das
       alle anderen Bloecke haben. Sichtbar als eine Kante, die 7 px weiter
       aussen liegt als der Rest: genau das Flattern, das nicht sein soll.
       Der Rahmen der Box rueckt jetzt auf dieselbe Linie, der Innenabstand
       bleibt. */
    .sgp-ui .row.sgp-artikel-kopf > .sgp-artikel-kennzeichen {
        /* ⚠ `flex-basis: auto`, nicht 100 %. Im Flexcontainer bestimmt die
           Basis die Breite -- `width` allein reicht nicht. Mit Basis 100 %
           plus den beiden Aussenabstaenden ragte die Box 7 px nach rechts
           heraus, und bei 320 px Viewport wurde daraus waagerechtes Scrollen
           (327 gegen 320 gemessen). */
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: none !important;
        margin-left: .4375rem;
        margin-right: .4375rem;
        padding: 1rem;
    }
}


/* Zwischen Fliesstext und dem Restblock (botanischer Zweitname, Teilen)
   standen 92 px. Der Block traegt Foundation-Abstaende, die auf eine
   Tabelle gerechnet waren, die dort nicht mehr steht. */
#product-attributes { margin-top: 0 !important; padding-top: .5rem; }
#product-attributes-header { padding-top: 0 !important; }


/* --- 18. Das Hauptbild randlos, auf dem Telefon --------------------------

   Betreiber: „da kann das hauptbild auch bis zu einer gewissen breite nicht
   gerundet aber dafuer wirklich komplett von links nach rechts gehen. die
   miniaturen darunter aber nicht mehr, also wie jetzt."

   Unter 576 px bricht das Hauptbild aus dem Spaltenraster aus und laeuft von
   Kante zu Kante -- die 7 px Innenabstand werden mit einem negativen
   Aussenabstand aufgehoben und die Breite um genau denselben Betrag
   vergroessert. Ohne Radien, weil eine Rundung an der Bildschirmkante nicht
   als Form liest, sondern als Fehler.

   Die Bildleiste darunter bleibt im Raster: sie steht in einer Reihe mit
   allem anderen, und dort ist die gemeinsame Kante wichtiger als die
   Bildwirkung. */

@media (max-width: 575.98px) {
    .sgp-artikel-medien #article-detail-images {
        margin-left: -.4375rem;
        margin-right: -.4375rem;
        width: calc(100% + .875rem);
        max-width: none;
    }

    .sgp-artikel-medien #article-detail-image .image-square,
    .sgp-artikel-medien #article-detail-image .image-square img {
        border-radius: 0 !important;
    }
}


/* --- 19. Eine Textlinie fuer die ganze Seite ------------------------------

   Betreiber: „text soll auf einer vertikalen linie links anstehen, nicht
   flattern". Gemessen bei 1200 px waren es vier Kanten: Bild und Miniaturen
   bei 10 (Spaltenkante), Langtext 26, Pillen und Stachelhinweis 27,
   Ueberschriften 20.

   Massgeblich ist die Linie des Fliesstexts. Die Ueberschriften ziehen mit
   einem eigenen Einzug nach -- NICHT, indem ich den Container-Abstaenden
   etwas wegnehme: Das war mein erster Versuch, und er hat bei 320 bis 576 px
   waagerechtes Scrollen ausgeloest, weil `#product-ratings` mit seinem
   Innenabstand die Breite seiner Kinder begrenzt. Ein Einzug an der
   Ueberschrift kann das nicht.

   Bild und Boxen bleiben auf der Spaltenkante: sie sind Flaechen, keine
   Zeilen. Eine Box, deren Rahmen auf der Textlinie stuende, haette ihren
   eigenen Text 16 px weiter innen -- dann flatterte es erst recht. */

#product-ratings > h2#Erfahrungen,
#product-ratings > p,
.section-heading:has(+ #pflegetips-carousel) {
    padding-left: 6px;
}


/* --- 20. Ein Abstandsmass zwischen den Bloecken ---------------------------

   Gemessen bei 390 px, ganze Seite im iframe:

     214 px vor dem Vertrauensblock  (nach dem Warenkorb-Knopf)
     108 px vor der Duenger-Box
     133 px vor den Kennzeichen      (nach Vor/Zurueck)
      92 px nach dem Langtext

   Zwei davon enthalten gar kein Element -- es ist reiner Abstand, aus
   Margins von Bloecken, die fuer eine breitere Spalte gerechnet waren. Auf
   dem Telefon liest sich das nicht als Gliederung, sondern als Aussetzer:
   man scrollt und weiss nicht, ob noch etwas kommt.

   1 rem zwischen allem, was in der Kaufspalte untereinander steht. */

@media (max-width: 991.98px) {
    .sgp-artikel-kauf > .sgp-ui,
    .sgp-artikel-kauf > .product-basket,
    .sgp-artikel-kauf > .sgp-artikel-beiwerk {
        margin-top: 0 !important;
        margin-bottom: 1rem !important;
        /* ⚠ HIER SASS DIE LUECKE: die Huelle des Vertrauensblocks traegt
           `padding-bottom: 92px` -- gemessen, nicht vermutet. Sie stammt aus
           der Zeit, als der Block Teil des Kaufbereichs war und den Abstand
           zum naechsten Element mitbrachte. Seit er in der Kaufspalte steht,
           ist es eine leere Flaeche von der Hoehe eines Absatzes. */
        padding-bottom: 0 !important;
    }

    /* Der Kaufbereich endet mit der Garantiezeile; alles darunter ist
       Abstand aus `_sgpBuyArea`, der fuer die Desktop-Spalte gedacht war. */
    .sgp-artikel-kauf .product-basket > .sgp-ui { margin-bottom: 0 !important; }
    .sgp-artikel-kauf .product-basket .sgp-promo.d-lg-none { margin-top: .75rem !important; }

    .sgp-nachbarn      { margin: .75rem 0 0 !important; }
    .sgp-artikel-text  { margin-bottom: 1rem !important; }
    #product-attributes { padding-top: 0 !important; }
}

/* Auch im Raster: nach dem Langtext folgte eine 92-px-Luecke, bevor der
   Restblock beginnt. */
.sgp-artikel-text { margin-bottom: 1rem; }


/* --- 21. Die Lieferform-Kachel nutzt ihre Breite -------------------------

   Betreiber: „bei der kleinen breite kann etwas von dem text nach rechts,
   damit die hoehe der einzelnen lieferform geringer wird" und „der weissraum
   rechts in der kachel taugt nicht".

   Gemessen bei 768 px: die Kachel ist 728 px breit und 187 px hoch, ihre
   vier Bloecke stehen alle links untereinander -- Name (25), Preise (63),
   Qualitaet (22), Verfuegbarkeit und Liefertermin (48). Rechts bleiben rund
   300 px leer, waehrend die Kachel in die Hoehe waechst.

   Preise stehen links, Qualitaet und Liefertermin rechts -- unterhalb von
   992 px durchgaengig, auch auf dem Telefon: gemessen bei 320 px reicht die
   Kachel dafuer noch. Bei 768 px sinkt die Summe der vier Kacheln von 717 auf
   470 px, ohne dass ein Wort verlorengeht.

   Die rechte Spalte ist `minmax(0, auto)` -- sie nimmt nur, was ihr Text
   braucht, und gibt bei Enge zurueck, statt die Preise zu quetschen.

   Die Bloecke werden ueber ihre Klassen adressiert, nicht ueber
   `nth-child` -- nicht jede Sorte hat Staffelpreise, und dann verschoebe
   sich die Reihenfolge. */

@media (max-width: 991.98px) {
    .sgp-artikel-kauf .sgp-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, auto);
        column-gap: 1rem;
        align-content: start;
    }

    /* Name und Zeichen ueber die ganze Breite */
    .sgp-artikel-kauf .sgp-card > .d-flex {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    /* Preise links, ueber beide Zeilen */
    .sgp-artikel-kauf .sgp-card > .d-block.mt-1 {
        grid-column: 1;
        grid-row: 2 / span 2;
    }

    /* Qualitaet und Liefertermin rechts, untereinander */
    .sgp-artikel-kauf .sgp-card > .sgp-quality {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
    }

    .sgp-artikel-kauf .sgp-card > .sgp-vt-liefer {
        grid-column: 2;
        grid-row: 3;
        text-align: right;
    }

    /* Das Haekchen der gewaehlten Lieferform sitzt absolut in der Ecke und
       darf vom Raster nicht mitgerechnet werden. */
    .sgp-artikel-kauf .sgp-card > [class*="check"],
    .sgp-artikel-kauf .sgp-card > .position-absolute { grid-column: 1 / -1; }
}


/* --- 22. Das 92-px-Fusspolster der .sgp-ui-Huelle ------------------------

   `sgp-ui-theme.css` Zeile 128 setzt unter 768 px `.sgp-ui {
   padding-bottom: 92px }` -- Platz fuer die fixierte Fussleiste des
   Telefons. Die Regel trifft aber JEDE Huelle, nicht nur die aeusserste,
   und diese Seite hat sieben davon.

   Drei tragen auf dem Telefon nichts als das Polster:

   | Huelle | Inhalt auf dem Telefon | Wirkung |
   |---|---|---|
   | im Kaufblock (`product-basket`) | Formular endet darueber | Abstand unter dem Vertrauensblock |
   | in `sgp-artikel-beiwerk` | Desktop-Duenger, `d-none` | 92 px unter dem Duenger |
   | die zwei Modal-Huellen | Modals, unsichtbar | 184 px nach dem Langtext |

   Gemessen bei 320 px: zusammen 276 px Luft, ohne dass ein Pixel Inhalt
   dahintersteht. Der Betreiber hat alle drei einzeln geruegt -- „abstand
   unter dünger zu hoch, abstand unter trust facts zu hoch, abstand unter
   langbeschreibung zu hoch". Es war dreimal dieselbe Regel.

   Die aeusserste Huelle behaelt ihr Polster: dort steht die Fussleiste
   wirklich. */

/* ⚠ Ebenfalls auf `#article-detail` begrenzt -- verschachtelte `.sgp-ui`-
   Huellen gibt es auch auf Warenkorb-, Konto- und Kassenseiten, und dort ist
   das Fusspolster moeglicherweise gewollt. Was hier zurueckgenommen wird,
   soll nur hier zurueckgenommen sein. */
@media (max-width: 767.98px) {
    #article-detail .sgp-ui .sgp-ui,
    #article-detail .sgp-ui.sgp-huelle-flach {
        padding-bottom: 0 !important;
    }
}


/* --- 23. Das Fusspolster steht auch mitten im Dokument -------------------

   Nachtrag zu 22: die AEUSSERSTE `.sgp-ui`-Huelle traegt dieselben 92 px --
   und sie ist auf dieser Seite nicht das Seitenende. Hinter ihr kommen die
   Erfahrungen, die Pflegetipps und der Fuss. Punktweise abgetastet
   (`elementFromPoint` alle 12 px): zwischen 2938 und 3046 traegt nichts als
   diese Huelle, 108 px leer zwischen Langtext und Erfahrungen.

   Das Polster gehoert an die letzte Huelle der Seite, nicht an eine, die in
   der Mitte endet. */

@media (max-width: 767.98px) {
    #article-detail .sgp-ui:has(.sgp-artikel-kopf) { padding-bottom: 0 !important; }
}


/* --- 24. Der Sortenname auf dem Telefon ---------------------------------

   Betreiber: „mobil sollte der name 1. etwas kleiner werden 2. beim scrollen
   oben sticky stehen".

   Gemessen: 32 px in Arial ueber 260 px Laufweite -- bei einem langen
   Sortennamen sind das drei Zeilen, bevor die Seite anfaengt. 26 px reichen
   und lassen dieselbe Wirkung.

   Sticky klebt unter der Kopfleiste, die beim Scrollen einrastet (`fixed`,
   84 px hoch, `z-index: 10000`). Der Name bekommt deshalb `top: 84px` und
   einen eigenen Grund -- ohne Hintergrund liefe der Seiteninhalt sichtbar
   hindurch. Sein `z-index` bleibt unter dem der Leiste. */

@media (max-width: 991.98px) {
    .product-name-wrapp .product-name {
        font-size: 1.625rem !important;   /* 26 px statt 32 */
        line-height: 1.15;
        margin-bottom: 0 !important;      /* trug 20 px, siehe unten */
    }

    /* Betreiber, nach dem Verkleinern: „dann kann er auch den vertikalen
       weissraum verschwinden lassen, und kompakter sticky stehen".
       Gemessen: Huelle 61 px fuer eine 30-px-Zeile -- 20 px Aussenabstand
       unter dem Namen und zweimal 5,6 px Innenabstand. Der Aussenabstand
       stammt aus der Standardregel fuer Ueberschriften und hat in einer
       klebenden Leiste nichts zu suchen: dort ist er kein Abstand zum
       naechsten Absatz, sondern eine leere Bank, die beim Scrollen
       mitfaehrt. Bleiben 40 px. */
    /* ⚠ DER KOPF IST NICHT UEBERALL 84 PX HOCH. Bis zum 06.09. stand hier
       eine einzige Zahl, gemessen bei 375 und 390 px. Sie gilt dort auch --
       aber nur dort. Gemessen mit `server/frontend/pruefe-klebeabstand.mjs`
       ueber 375/390/400/420/430/439/440/480/520/560/576/640/700/740/768/790/
       799/800/900/991:

           unter  440 px   #title-bar-wrapper        0 bis  84    ->  84
           440 bis 799     #title-bar-wrapper        0 bis  99    ->  99
           ab     800 px   #navigation-top-wrapper  30 bis  80    ->  80

       Die 440 sind 27.5em und kommen aus dem Bestand
       (`@media screen and (min-width:27.5em){.title-bar .button{padding:
       0.85em .5em}}`) -- der Knopf wird hoeher, die Leiste waechst um 15 px.
       Die 800 sind 50em: dort blendet `hide-for-medium-larger` die mobile
       Titelleiste aus und die Hauptnavigation uebernimmt.

       WIRKUNG DES ALTEN WERTES: von 440 bis 799 px fuhr die Namenszeile
       15 px UNTER den Kopf. Weder ich noch CC-10 hatten das gefunden -- er
       hat 375/390/992/1280 gemessen, ich 320/390/576/768/992/1200/1400, und
       bei 576 und 768 habe ich den z-index geprueft, aber nicht die HOEHE
       des Kopfes. Eine Zahl, die an einer Breite stimmt, ist kein Beleg fuer
       die naechste.

       `var(--sgp-kopf-unten, …)`: CC-10 baut diese Variable in den
       Foundation-Ersatz ein (gerechnet ueber die eingerasteten Elemente mit
       Hoehe > 0). Sobald sie da ist, uebernimmt sie alle drei Werte von
       selbst. Bis dahin gilt der Rueckfallwert, und das ist der gemessene.
       Eine Variable als Rueckfall zu lesen ist keine Abhaengigkeit -- ohne
       sie steht hier genau das, was ohne sie richtig ist. */
    .product-name-wrapp {
        position: sticky;
        top: var(--sgp-kopf-unten, 84px);
        z-index: 500;
        background: #fff;
        padding-top: .25rem;
        padding-bottom: .25rem;
        box-shadow: 0 6px 6px -6px rgba(0, 0, 0, .18);
    }

    /* 27.5em = 440 px: der Knopf der Titelleiste wird hoeher, die Leiste
       waechst von 84 auf 99. Gemessen 439 -> 84, 440 -> 99. */
    @media (min-width: 27.5em) {
        .product-name-wrapp { top: var(--sgp-kopf-unten, 99px); }
    }

    /* 50em = 800 px: `hide-for-medium-larger` nimmt die mobile Titelleiste
       weg, die Hauptnavigation klebt von 30 bis 80. Gemessen 799 -> 99,
       800 -> 80. */
    @media (min-width: 50em) {
        .product-name-wrapp { top: var(--sgp-kopf-unten, 80px); }
    }

    /* Das Herz faehrt mit und bleibt an der Oberkante des Namens. */
    .product-name-wrapp .sgp-merken-herz { margin-top: 0; }
}


/* --- 25. Der Langtext bekommt Rand --------------------------------------

   Betreiber: „die langbeschreibung kann links und rechts etwas padding
   gebrauchen". Als einziger Block der Seite ist sie reiner Fliesstext ueber
   die volle Breite -- bei 320 px eine 306 px lange Zeile, die beidseitig
   7 px vom Rand steht. Die Kacheln daneben wirken luftiger, weil ihr Text
   hinter ihrem eigenen Innenabstand beginnt.

   Mit .5rem beginnt der Fliesstext auf derselben Linie wie der Text IN den
   Kacheln (7 px Kachelrand + 8 px `p-2`). Damit ist es keine zweite Kante,
   sondern dieselbe. */

@media (max-width: 991.98px) {
    .sgp-artikel-text .product-description {
        padding-left: .5rem;
        padding-right: .5rem;
    }
}


/* --- 26. Eine Zeile zu viel in der Sprechblase --------------------------

   Betreiber: „erfahrungs-slider etwas zu niedrig - oder 1 zeile zu viel fuer
   'mehr lesen'".

   Der erste Verdacht war falsch: `scrollHeight` meldete 13 px mehr als die
   Blase hoch ist, aber die kommen vom Schweif (`::after`, absolut gesetzt),
   nicht von abgeschnittenem Text. Nachgerechnet ueber alle fuenf Karten:

       Blase 298 + Aussenabstand 12 + Fuss 36 = 346

   -- gegen eine Karte von 340. Es fehlten **sechs Pixel**, und die nahm der
   Fuss, also Name und Datum. Genau die Stelle, die nie abgeschnitten werden
   darf: sie ist die Zuordnung des Zitats.

   348 px statt 340. Nicht mehr: die feste Kartenhoehe soll das Springen beim
   Blaettern verhindern, nicht Weissraum unter kurzen Beitraegen erzeugen. */

@media (max-width: 767.98px) {
    .sgp-stimmen .owl-item > .sgp-stimme { height: 348px; }   /* Zeile 958 setzt `height`, nicht `min-height` */
}


/* --- 27. Der Name bleibt auch auf grossen Schirmen stehen ---------------

   Betreiber: „halten wir das sticky doch auch fuer die groesseren groessen
   fest - man verliert schnell den context wenn man so weit scrollt."

   Auf dem Telefon klebt die Namensleiste zwischen 400 und rund 5.000 px
   Scrolltiefe; hier uebernimmt die Namenszeile der Kaufspalte dieselbe
   Aufgabe. Sie liegt im Raster ueber alle drei Reihen (Bild, Kennzeichen,
   Langtext) -- genau der Bereich, in dem man am weitesten scrollt, ohne dass
   der Name sonst noch einmal auftaucht.

   `top: 80px`: die Hauptnavigation steht auf dieser Breite fix zwischen 30
   und 80 px (`z-index: 9000`). Mit `top: 0` verschwand die Leiste dahinter --
   sichtbar blieb ein Streifen von wenigen Pixeln. Gemessen, nachdem es im
   Bild auffiel. Weisser Grund und `z-index`, weil der uebrige Spalteninhalt
   darunter durchlaeuft. */

   ZURUECKGENOMMEN am 05.09., nachdem die Leiste aus Abschnitt 28/30 stand:
   Beide zusammen zeigten denselben Namen in zwei verschiedenen Darstellungen
   uebereinander -- die klebende Zeile in ihrer halben Spaltenbreite, darueber
   die durchgehende Leiste. Die Leiste kann es allein, und sie traegt weiter
   (die Zelle endete bei 1.800 px). Sie springt jetzt frueher ein, weil der
   Name nicht mehr kuenstlich im Bild gehalten wird.

   Die Regel bleibt als Kommentar stehen, damit niemand denselben Weg noch
   einmal geht:

       .sgp-artikel-kauf .sgp-name-zeile { position: sticky; top: 80px; … } */


/* --- 28. Die mitlaufende Namensleiste ----------------------------------

   Gehoert zum Block am Ende von `commerceArticleNew.html`. Nur ab 992 px:
   darunter klebt die Namenszeile selbst und traegt weit genug.

   Sie ist bewusst schmal und ruhig -- sie soll sagen, wo man ist, und
   nicht mit der Seite um Aufmerksamkeit streiten. */

/* ⚠ ALS EIGENE MEDIA-QUERY, nicht als Grundregel. Die Grundregel
   `.sgp-namensleiste { display: none }` stand hier und blieb wirkungslos:
   gemessen bei 375 px war die Leiste `display: block` und `position: static`,
   lag also IM FLUSS und schob das Dokument auf 712 px auf -- eine Seite,
   die auf dem Telefon zur Haelfte neben dem Bildschirm liegt. Gefunden hat
   es CC-1, dem ein eigener Kasten dadurch verrutschte.

   Eine Regel, die nicht wirkt, wird nicht durch Nachdenken wirksam: hier
   steht sie mit ihrer eigenen Bedingung und mit `!important`. */
@media (max-width: 991.98px) {
    .sgp-namensleiste { display: none !important; }
}

@media (min-width: 992px) {
    .sgp-namensleiste {
        display: block;
        position: fixed;
        top: var(--sgp-kopf-unten, 80px);   /* unter der fixen Hauptnavigation (30 bis 80) */
        left: 0;
        right: 0;
        /* ⚠ 9100, nicht 1020. Die Merklisten-Auswahl von CC-1 (`.sgp-merken-
           panel`, `z-index: 40`) geht INNERHALB dieser Leiste auf. Ein Kind
           kann seinen Stapelzusammenhang nicht verlassen: mit 1020 blieb das
           Panel unter der Hauptnavigation (9000) und wurde von ihr
           angeschnitten (Betreiber, 06.09.). Die Leiste selbst ueberlappt die
           Navigation nicht -- sie beginnt bei 80, wo diese endet -- also
           kostet der hoehere Wert nichts. */
        z-index: 9100;
        background: rgba(255, 255, 255, .96);
        border-bottom: 1px solid #e6e1cd;
        box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .25);
    }

    .sgp-namensleiste[hidden] { display: none; }

    .sgp-namensleiste-innen {
        max-width: 1400px;
        margin: 0 auto;
        padding: .5rem 1rem;
    }

    .sgp-namensleiste-name {
        font-size: 1.125rem;
        letter-spacing: .01em;
        color: #2b2b26;
        min-width: 0;
    }
}


/* --- 29. Der Steg unter vor/zurueck und seine zweite Linie --------------

   Betreiber (320 px): „den abstand unter vor/zurueck (…) noch verringern,
   und die doppelte linie ueber den beiden vor/zurueck sorten zu den
   versanddienstleistern entfernen."

   Gemessen: die Nachbarnzeile endet bei 2061, die Kennzeichen beginnen bei
   2110 -- 49 px, zusammengesetzt aus dem Aussenabstand der Huelle (16) und
   dem der Kaufspalte (16) plus dem eigenen Innenabstand. Auf 24 gekuerzt.

   Die zweite Linie: der Vertrauensblock schliesst mit dem Rahmen seines
   letzten Eintrags ab, und die Nachbarnzeile setzt ihre eigene Trennlinie
   direkt darueber. Zwei Linien im Abstand weniger Pixel lesen sich als
   Fehler, nicht als Gliederung. Der Trennstrich der Nachbarn faellt weg --
   die Linie des Blocks darueber trennt bereits. */

@media (max-width: 991.98px) {
    .sgp-artikel-kauf .sgp-nachbarn {
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
    }

    .sgp-artikel-kauf > .sgp-ui:last-of-type,
    .sgp-artikel-kauf .sgp-nachbarn { margin-bottom: .5rem !important; }
}


/* --- 30. Was in der Leiste mitfaehrt ------------------------------------

   Betreiber, 05.09.: „eine kleine version des hauptbilds mit in der
   sticky-leiste (…) so um die 40px hoch, quadratisches hauptbild, name in
   grosser schrift, rechts davon der zuechter / jahr dezenter, ganz rechts
   die wuchshoehe, auch recht gross aber heller (wie zuechter)."

   Drei Gewichte, nicht drei Groessen: der Name traegt die Farbe des Textes,
   Zuechter und Hoehe stehen in derselben helleren Stufe. Die Hoehe ist so
   gross wie der Name, aber hell -- gut ablesbar, ohne mit ihm zu streiten.

   Das Bild kommt erst ab 1200 px dazu. Darunter ist die Leiste schmal genug,
   dass ein Bild sie zum Balken machen wuerde. */

@media (min-width: 992px) {
    /* Betreiber, nachdem sie stand: „sticky ist so gut, gerne etwas hoeher /
       groesser -- auch der text". Aus 40 px werden 52, alle drei Textstufen
       wachsen um denselben Schritt, damit das Verhaeltnis bleibt. */
    /* Feste Hoehe, nicht `min-height`: die Leiste gibt ihre Hoehe VOR, und
       das Bild haengt darunter hinaus (siehe unten). */
    .sgp-namensleiste-innen {
        height: 52px;
        padding: 0 1rem 0 9rem;   /* 9rem = Bildbreite plus Steg */
        position: relative;
    }

    /* Betreiber: „das bild im sticky maximal gross, kein padding/margin,
       keine rundung". Buendig in der linken Ecke, quadratisch, so hoch wie
       die Leiste.

       ⚠ NICHT ueber `align-self: stretch` mit `aspect-ratio` -- das ist
         zirkulaer: ohne gesetzte Hoehe faellt das Bild auf seine Eigengroesse
         zurueck, und die betraegt hier 1200 px. Gemessen, nachdem genau das
         passiert war: die Leiste stand 1201 px hoch ueber der Seite. Dieselbe
         Falle wie bei den Kundenbildern in der Bildleiste, zwei Abschnitte
         weiter oben, nur eine Viertelstunde spaeter. */
    /* Betreiber: „kann das Bild im Sticky in etwa doppelt so gross werden,
       ohne dass die sticky zeile hoeher wird und wie eine Fahne nach unten
       hinaus ragen?"

       Ja -- indem es aus dem Fluss genommen wird. `position: absolute` in
       der relativ gesetzten Leiste: die Zeile behaelt ihre 52 px, das Bild
       ist 104 und haengt zur Haelfte darunter. Der Text weicht ihm ueber das
       linke Innenmass aus, nicht ueber einen Abstand am Bild -- ein Abstand
       an einem absolut gesetzten Element bewegt nichts anderes mehr.

       Der Schatten setzt die Fahne vom Seiteninhalt ab, durch den sie
       laeuft. */
    /* Weisser Grund mit Innenabstand -- die Fahne liest sich damit als
       aufgelegtes Bild, nicht als Loch in der Leiste (Betreiber, 05.09.).
       Der Innenabstand steht am Bild selbst: `padding` an einem `img` zeigt
       dessen Hintergrund, und `object-fit` rechnet innerhalb der Inhaltsbox.
       Ein zusaetzlicher Behaelter im Markup waere dafuer nicht noetig. */
    .sgp-namensleiste-bild {
        position: absolute;
        left: 0;
        top: 0;
        width: 132px;
        height: 132px;
        box-sizing: border-box;
        padding: 7px;
        background: #fff;
        object-fit: cover;
        border-radius: 0 !important;
        margin: 0;
        box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .35);
    }

    /* Damit die Fahne nicht am Leistenrand abgeschnitten wird. */
    .sgp-namensleiste { overflow: visible; }

    .sgp-namensleiste-name {
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 1.2;
        color: #2b2b26;
        min-width: 0;
    }

    .sgp-namensleiste-art,
    .sgp-namensleiste-zuechter,
    .sgp-namensleiste-masse { color: #8a857a; line-height: 1.2; }

    .sgp-namensleiste-art,
    .sgp-namensleiste-zuechter { font-size: 1.0625rem; min-width: 0; }

    /* Ein Trennpunkt zwischen Art und Zuechter -- zwei helle Woerter
       nebeneinander lesen sich sonst als ein Begriff. */
    .sgp-namensleiste-zuechter::before { content: "· "; color: #c4bfae; }
    .sgp-namensleiste-masse {
        font-size: 1.3125rem;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 1rem;
    }

    /* Die Maszeile bringt ihre eigenen Abstaende mit (`gap-3` am Original);
       in der Leiste sitzt sie enger, damit Hoehe und Breite als ein Wert
       zusammenbleiben. */
    .sgp-namensleiste-masse > span { display: inline-flex; align-items: center; gap: .3rem; }

    .sgp-namensleiste-sterne .rating-box { margin: 0; }

    /* Das Herz sitzt am rechten Ende, in Zeilenhoehe. Farbe und Form kommen
       vom Original mit -- geklont wird der fertige Knopf. */
    .sgp-namensleiste-herz { display: inline-flex; align-items: center; }
    .sgp-namensleiste-herz .sgp-herz-klon { margin: 0; padding: 0; }

    .sgp-namensleiste-bild { display: none; }
}

@media (min-width: 1200px) {
    .sgp-namensleiste-bild { display: block; }
}


/* --- 31. Kundenbilder in der Kopfzeile der Erfahrungen ------------------

   Kleine, dicht gesetzte Miniaturen -- sie sind ein Hinweis („hier stehen
   echte Fotos"), keine Galerie. Die Galerie ist einen Klick entfernt und
   gehoert den Beitraegen darunter. */

/* ⚠ OHNE BOOTSTRAP. `#product-ratings` liegt ausserhalb der `.sgp-ui`-Huelle,
   und `sgp-ui.css` ist vollstaendig darauf praefixiert -- `d-lg-inline-flex`
   am Streifen existiert im Markup und tut nichts. Der `<span>` blieb `inline`
   und stellte die Miniaturen untereinander statt nebeneinander (Betreiber,
   05.09.). Die Ausrichtung steht deshalb hier. */
/* Der Streifen steht auf JEDER Breite -- der Betreiber will die Kundenfotos
   auch auf dem Telefon sehen, dort in einer eigenen Zeile vor der
   Schaltflaeche (06.09.). Verborgen ist er nur, wenn zu wenige Bilder da sind;
   dann setzt das Skript `hidden`.

   ⚠ `!important` an BEIDEN Regeln. Die Altregel `#product-ratings span
   { display: block }` (0,1,1 plus Id) schlaegt jeden reinen Klassenselektor;
   ohne das stapelten sich die Miniaturen untereinander quer ueber der
   Schaltflaeche. */
.sgp-bilderstreifen[hidden] { display: none !important; }

/* ⚠ `!important`. Der Bewertungsbereich stellt seine `span` auf
   `display: block` (Altbestand, hoehere Spezifitaet als eine Klasse) -- die
   Miniaturen standen deshalb weiter untereinander, obwohl die Regel hier
   stand. Gemessen: `display=block` trotz `inline-flex` in dieser Datei. */
.sgp-bilderstreifen:not([hidden]) {
    display: inline-flex !important;
    align-items: center;
    gap: .25rem;
    vertical-align: middle;
}

/* 56 px. Betreiber: „wenn die zeile nur 44 hoch ist - mach sie etwas
   hoeher, und nimm dafuer abstand nach unten raus." Die Zeile waechst also
   um 11 px, und die 20 px Fusspolster ihres Elternblocks fallen weg -- unter
   dem Strich elf Pixel weniger, bei sichtbar groesseren Bildern. */
.sgp-bilderstreifen-bild {
    display: block;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid #e6e1cd;
    border-radius: .25rem;
    overflow: hidden;
    background: none;
    line-height: 0;
    cursor: pointer;
}

.sgp-bilderstreifen-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sgp-bilderstreifen-bild:hover { border-color: #b9b29a; }

.sgp-bilderstreifen-zahl {
    margin-left: .35rem;
    font-size: .875rem;
    color: #8a857a;
    white-space: nowrap;
}


/* --- 32. Kundenbilder in der Bildleiste ---------------------------------

   Sie stehen zwischen den Bildern der Gaertnerei und sollen als das
   erkennbar sein, was sie sind -- ein warmer Rand statt des grauen, sonst
   nichts. Groesse und Verhalten bleiben gleich, damit die Leiste eine
   Leiste bleibt und nicht zwei. */

.sgp-bildleiste-kundenbild {
    border-color: #d8cfae !important;
    cursor: pointer;
}

.sgp-bildleiste-kundenbild:hover { border-color: #b9ab7a !important; }

/* ⚠ HIER STAND `width: 100%; height: 100%`. Das ist zirkulaer -- die Kachel
   hat keine gesetzte Hoehe, also faellt der Browser auf die Eigenhoehe des
   Bildes zurueck (120 px im Hochformat), und weil die Owl-Reihe ein
   Flexcontainer ist, zog dieses eine Bild ALLE Kacheln auf 122 px. Gemessen
   an Ghislaine: 92x122 statt 92x92, bei eigenen wie fremden Bildern.

   Die Groesse steht bereits weiter oben (`.sgp-bildleiste-bild img`,
   84 bzw. 92 px im Quadrat mit `object-fit: cover`). Kundenbilder brauchen
   dazu nichts -- nur ihren eigenen Rand. Betreiber: „setze die ausschnitte
   unter dem hauptbild auch fuer die kundenbilder quadratisch". */
.sgp-bildleiste .owl-item { align-items: flex-start; }


/* --- 33. Das Pluszeichen im Bilderstreifen ------------------------------

   Gleiche Groesse wie eine Miniatur, gestrichelt statt durchgezogen: es
   steht fuer die Bilder, die hier nicht mehr hinpassen, nicht fuer ein
   weiteres Bild. */

.sgp-bilderstreifen-mehr {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px dashed #d8cfae;
    border-radius: .25rem;
    background: #fbf9f2;
    color: #8a857a;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.sgp-bilderstreifen-mehr:hover { border-color: #b9ab7a; color: #2b2b26; }


/* --- 34. Bilder in den Beitraegen: quadratisch, hoechstens zwei ---------

   Betreiber: „wenn jetzt das '+1' auch noch quadratisch wird (…) ist das
   prima". Quadratisch werden dabei BEIDE -- ein quadratisches Pluszeichen
   neben hochformatigen Bildern waere die schiefere Reihe als vorher. Damit
   folgen die Beitragsbilder derselben Form wie die Bildleiste unter dem
   Hauptbild.

   Nebenwirkung, willkommen: die Reihe wird von 103 auf 79 px flacher, und
   der Platz kommt dem Text in der Karte zugute. */

/* ⚠ `flex: 0 0 72px`, nicht nur `width`. Gemessen nach dem ersten Versuch:
   99x72 statt 72x72 -- im Flexcontainer entscheidet `flex-basis` ueber die
   Hauptachse, und eine fruehere Regel setzt sie. Dritte Begegnung mit
   derselben Falle an dieser Seite. */
.sgp-blase-bild        { flex: 0 0 72px; width: 72px; height: 72px; }
.sgp-blase-bild img    { width: 72px; height: 72px; object-fit: cover; display: block; }
.sgp-blase-bild picture { display: block; line-height: 0; }

.sgp-blase-bild-verborgen { display: none !important; }

.sgp-blase-mehr-bilder {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 1px dashed #d8cfae;
    border-radius: .25rem;
    background: #fbf9f2;
    color: #8a857a;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.sgp-blase-mehr-bilder:hover { border-color: #b9ab7a; color: #2b2b26; }


/* Das Fusspolster der Kopfzeile weicht der hoeheren Bildzeile (Betreiber,
   05.09.). Gemessen: `.row.product-ratings-head` trug 20 px, dazu standen
   36 px bis zur ersten Sprechblase. */
.product-ratings-head { padding-bottom: 0 !important; }


/* --- 35. Groessere Sterne in der Kopfzeile, Luft vor den Bildern --------

   Betreiber: „etwas mehr abstand der bilder zum wort 'bewertungen', die
   sterne groesser!"

   Die Sternleiste ist eine Grafik ueber einem Farbbalken -- Hoehe, Breite
   und `background-size` muessen deshalb GEMEINSAM wachsen, sonst wiederholt
   sich das Muster falsch. Aus 70x14 mit 14-px-Kachel werden 130x26 mit
   26-px-Kachel: derselbe Faktor auf alle drei Werte. */

.ratings-summary .rating-box,
.ratings-summary .rating-box .rating {
    height: 26px !important;
    background-size: 26px 26px !important;
}

.ratings-summary .rating-box { width: 130px !important; }

/* Betreiber: „die Kundenbilder nach rechts zum button, alternativ auch
   mittig in den freien raum".

   Beides auf einmal: die Kopfzeile wird ein Flexcontainer, und Streifen wie
   Schaltflaeche bekommen je einen automatischen Vorabstand. Zwei `auto`
   teilen den freien Raum zu gleichen Teilen -- der Streifen steht damit
   mittig zwischen Text und Knopf und rueckt bei jeder Breite mit, statt an
   einem festen Abstand zu kleben. */
.ratings-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.ratings-summary > .rating-box-wrapper { margin-bottom: 0; }

.sgp-bilderstreifen:not([hidden]) { margin-left: auto; }
.ratings-summary > .button.primary  { margin-left: auto; }


/* --- 36. „Jetzt kaufen" in der Leiste ----------------------------------

   Auf beiden Seiten derselbe Knopf: in der durchgehenden Namensleiste ab
   992 px und in der klebenden Namenszeile des Telefons. Er ist der einzige
   Weg zurueck zur Kaufbox, ohne selbst zu scrollen.

   Farbe wie die Hauptschaltflaeche der Seite, aber eine Stufe kleiner -- er
   ist ein Wegweiser, nicht der Kaufabschluss. */

.sgp-zur-kaufbox {
    flex: 0 0 auto;
    padding: .35rem .9rem;
    border: 0;
    border-radius: .375rem;
    background: var(--sg-orange, #d2691e);
    color: #fff;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
}

.sgp-zur-kaufbox:hover { filter: brightness(1.08); }

/* Auf dem Telefon steht er rechts in der Namenszeile, neben dem Herz. */
.sgp-zur-kaufbox-mobil { margin-left: auto; }

@media (min-width: 992px) {
    .sgp-zur-kaufbox-mobil { display: none; }
}

@media (max-width: 991.98px) {
    .product-name-wrapp {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    /* Einzeilig mit Auslassung. Ohne das bricht ein langer Sortenname neben
       Herz und Knopf um -- gemessen an „Ghislaine de Feligonde" bei 320 px:
       drei Zeilen, die klebende Leiste wuchs von 42 auf 98 px und nahm ein
       Viertel des Bildschirms mit. Der volle Name steht zwei Fingerbreit
       darunter in der Ueberschrift. */
    .product-name-wrapp .product-name {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Alles in EINER Zeile: Name, Herz, Knopf -- der Name kuerzt sich mit
       einer Auslassung, wenn er nicht passt (Betreiber, 06.09.: „ellipses war
       gut!", davor „alles etwas kleiner").

       Die zweizeilige Fassung stand kurz und ist zurueckgenommen: sie gab dem
       Namen zwar die volle Breite, kostete dafuer aber 25 px Hoehe an einer
       Leiste, die den ganzen Weg mitfaehrt. Bei 20 px Schrift passen rund 20
       Zeichen neben Herz und Knopf, und die meisten Sortennamen bleiben damit
       ganz stehen. */
    .product-name-wrapp .product-name {
        flex: 1 1 auto;
        font-size: 1.25rem !important;   /* 20 px statt 26 */
    }

    .product-name-wrapp .sgp-merken-herz,
    .product-name-wrapp .sgp-zur-kaufbox { flex: 0 0 auto; }

    .product-name-wrapp .sgp-merken-herz { transform: scale(.85); transform-origin: left center; }

    .sgp-zur-kaufbox-mobil {
        padding: .25rem .6rem;
        font-size: .8125rem;
        margin-left: .25rem;
    }
}


/* --- 37. Das Herz regt sich beim Scrollen ------------------------------

   Betreiber: „nur ganz dezent, als wuerde es pumpen / leicht wackeln".

   Also beides in einem Zyklus und beides klein: 6 % groesser und zwei Grad
   Neigung, in anderthalb Sekunden. Ein Schlag, der auffaellt, waere in einer
   Leiste, die den ganzen Weg mitfaehrt, nach der zweiten Seite laestig.

   Nur der Klon in der Leiste, nie das Herz in der Kaufspalte: dort steht es
   still und wird bedient, hier faehrt es mit und darf daran erinnern. */

/* Drei Fassungen, bis es sass: 6 % war zu viel („dezenter"), 3,5 % zu wenig
   („doch ein klein wenig auffälliger"). 5 % mit anderthalb Grad, etwas
   schneller -- die Mitte, an der der Betreiber stehen geblieben ist. */
@keyframes sgp-herz-puls {
      0% { transform: scale(1)    rotate(0deg); }
     25% { transform: scale(1.05) rotate(-1.5deg); }
     50% { transform: scale(1)    rotate(0deg); }
     75% { transform: scale(1.05) rotate(1.5deg); }
    100% { transform: scale(1)    rotate(0deg); }
}

.sgp-namensleiste-herz .sgp-herz-regt-sich {
    animation: sgp-herz-puls 1.7s ease-in-out infinite;
    transform-origin: center;
}

/* Wer Bewegung abbestellt hat, bekommt keine. Die Leiste erfuellt ihren
   Zweck auch ohne. */
@media (prefers-reduced-motion: reduce) {
    .sgp-namensleiste-herz .sgp-herz-regt-sich { animation: none; }
}


/* --- 38. Der Bilderstreifen bekommt eine eigene Zeile ------------------

   Betreiber: „die kundenfotos [muessen] eine eigene zeile bekommen - das geht
   nicht mehr zwischen den sternen und dem button".

   Gemessen an Ghislaine, Luft links und rechts vom Streifen:

       992 px  ->  56 px      1200 px  ->  160 px
      1100 px  -> 110 px      1280 px  ->  167 px

   Und Ghislaine ist der guenstige Fall: „aus 6 Bewertungen" ist kurz. Eine
   Sorte mit dreistelliger Zahl frisst weitere Zeichen. Unter 1200 px steht
   der Streifen deshalb in einer eigenen Zeile unter den Sternen -- die
   Kopfzeile wird dort zweizeilig statt gedraengt.

   `order` statt einer neuen Stelle im Markup: die Reihenfolge im Quelltext
   bleibt, wie sie fuer Vorlesegeraete richtig ist. */

@media (max-width: 1199.98px) {
    .sgp-bilderstreifen:not([hidden]) {
        flex: 0 0 100%;
        margin-left: 0;
        order: 3;
    }

    .ratings-summary > .button.primary { order: 2; }
}

/* Auf dem Telefon zurueckhaltender: kleinere Miniaturen, damit Bilder, Plus
   und Beschriftung in eine 280 px breite Zeile passen. */
@media (max-width: 575.98px) {
    .sgp-bilderstreifen-bild,
    .sgp-bilderstreifen-mehr { width: 44px; height: 44px; }

    .sgp-bilderstreifen-zahl { font-size: .8125rem; }
}


/* --- 39. Die Merklisten-Auswahl in der Leiste --------------------------

   Betreiber: „setze die position an der er aufgeht tiefer, unter das herz".

   Das Panel haengt an der Huelle des Herzens und stand mit .35 rem Abstand
   direkt an dessen Unterkante -- in einer 52 px hohen Leiste beruehrt es
   damit noch die Leiste selbst. In der Leiste faengt es deshalb unterhalb
   von IHR an, nicht unterhalb des Herzens. */

.sgp-namensleiste .sgp-merken-panel {
    top: 100%;
    margin-top: .85rem;
}


/* --- 40. Umbruch vor „aus … Bewertungen" -------------------------------- */

/* ⚠ NUR AUF DEM TELEFON. Berichtigung des Betreibers, 06.09.: „das war nur
   mobil, wenn die fotos nichtmehr dazwischen passen". Auf breiten Schirmen
   steht „5 / 5 aus 6 Bewertungen" in einer Zeile und soll dort auch bleiben --
   ein erzwungener Umbruch zerreisst dort einen Satz ohne Not. */
.ratings-summary .sgp-zeilenbruch { display: none !important; }

@media (max-width: 575.98px) {
    .ratings-summary .sgp-zeilenbruch {
        display: block !important;
        flex: 0 0 100% !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* --- 41. Luft zwischen Kundenfotos, Beitraegen und Pflegetipps ---------

   Betreiber (320 px): „vertikaler abstand … Kundenfotos + der eigentliche
   slider" und „den pflegetips etwas margin-top geben". Gemessen: 16 px vom
   Fotostreifen zur ersten Sprechblase, 24 px von den Beitraegen zu den
   Pflegetipps -- an einer Stelle, an der ein Abschnitt endet und der
   naechste beginnt, ist das zu wenig, um die beiden auseinanderzuhalten. */

@media (max-width: 991.98px) {
    .sgp-bilderstreifen:not([hidden]) { margin-bottom: .75rem; }
    .sgp-stimmen { margin-top: .5rem; }
    #pflegetips { margin-top: 2.5rem !important; }
}


/* --- 42. Der Langtext nimmt die freie Spalte mit ------------------------

   Gehoert zum Skript `textBreitePruefen` in der Vorlage. Es setzt die Klasse
   nur, wenn die Kaufspalte oberhalb des Langtextes endet -- also genau dann,
   wenn rechts nichts mehr steht.

   `max-width` bleibt: eine Zeile ueber 1.400 px waere zwar breit, aber
   schlechter zu lesen als eine ueber 700. Der Gewinn ist die halbe Hoehe des
   Textblocks, nicht die Breite an sich. */

@media (min-width: 992px) {
    .sgp-artikel-kopf.sgp-text-breit .sgp-artikel-text {
        grid-column: 1 / -1;
    }

    .sgp-artikel-kopf.sgp-text-breit .sgp-artikel-text .product-description {
        max-width: 78ch;
    }
}


/* --- 43. Eine Sorte ohne Erfahrungsberichte ----------------------------

   Bei null Bewertungen stand dort „- / 5 aus 0 Bewertungen" neben fuenf
   grauen Sternen -- eine Leerstelle, die wie ein Fehler aussieht, und das an
   einer Stelle, die Vertrauen schaffen soll. Gemessen an Clematis
   'Aromatica'.

   Die Sterne und die Nullzahl treten zurueck, die Einladung bleibt: die
   Schaltflaeche „Jetzt mitmachen" steht dann allein und ist damit das
   Angebot, das erste zu sein. Der Text selbst kommt aus der Vorlage, hier
   wird nur verborgen -- die Angaben bleiben fuer Suchmaschinen im Markup. */

.ratings-summary.sgp-ohne-bewertungen .rating-box-wrapper,
.ratings-summary.sgp-ohne-bewertungen .total-text,
.ratings-summary.sgp-ohne-bewertungen .sgp-zeilenbruch,
.ratings-summary.sgp-ohne-bewertungen .strong,
.ratings-summary.sgp-ohne-bewertungen > span:not(.sgp-erster-bericht):not(.sgp-bilderstreifen) {
    display: none !important;
}

.ratings-summary.sgp-ohne-bewertungen { gap: .75rem; }

.sgp-erster-bericht {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    color: #4b4b45;
    line-height: 1.45;
}

.sgp-erster-bericht strong { color: #2b2b26; font-weight: 600; }

.sgp-erster-bericht-zusatz { color: #7a7a6e; }

@media (max-width: 575.98px) {
    .sgp-erster-bericht-zusatz { display: block; font-size: .9375rem; }
}


/* --- 44. Der Zubehoer-Abschnitt bekommt denselben Rahmen --------------

   Ueberschrift oben (Abschnitt 14), hier der Abstand davor -- gleich dem,
   den Erfahrungen und Pflegetipps haben. Ein Abschnitt, der wie die anderen
   aussieht, wird auch wie die anderen gelesen. */

.section-heading:has(+ #product-kiSimilar) { margin-top: 2.5rem !important; }

/* Das Karussell darunter steht an derselben Kante wie die anderen beiden. */
#product-kiSimilar { margin-top: .25rem; }


/* --- 45. Eine einzelne Stimme -----------------------------------------

   Gemessen an Clematis 'Apple Blossom' (genau ein Bericht): die Karte nahm
   1.160 px, der Text lief ueber 1.102 px -- rund 134 Zeichen je Zeile. Gut
   lesbar sind 45 bis 75; das Auge findet den Zeilenanfang nicht wieder.

   Ursache ist keine Regel, sondern eine fehlende: bei mehreren Karten setzt
   Owl die Breite, bei einer einzelnen wird das Karussell gar nicht erst
   aufgebaut (`owl-loaded` fehlt). Die Bootstrap-Spaltenklassen im Markup
   (`row-cols-lg-3`) koennen nicht einspringen -- `#product-ratings` liegt
   AUSSERHALB der `.sgp-ui`-Huelle, und dort sind sie wirkungslos.

   Die einzelne Karte bleibt breiter als eine von dreien -- allein in einer
   Drittelspalte saehe sie verloren aus -- aber sie bekommt eine Lesebreite. */

.sgp-stimmen:not(.owl-loaded) > .sgp-stimme {
    max-width: 44rem;   /* rund 70 Zeichen */
}

/* Zwei Karten ohne Karussell teilen sich die Breite, statt untereinander zu
   stehen. */
@media (min-width: 768px) {
    .sgp-stimmen:not(.owl-loaded) {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .sgp-stimmen:not(.owl-loaded) > .sgp-stimme {
        flex: 1 1 22rem;
        max-width: 44rem;
    }
}


/* --- 46. Luft in der Bewertungs-Kopfzeile ohne Fotostreifen ------------

   Betreiber: „hier fehlt abstand, von der bewertung zum button - den haben
   sonst glaube ich die bilder erzwungen, also die kundenfotos?"

   Genau so ist es. Der Fotostreifen ist 56 px hoch und stand als eigenes
   Element zwischen Zahl und Schaltflaeche; er hat den Abstand nicht gesetzt,
   sondern belegt. Bei einer Sorte ohne Kundenfotos -- auf Clematis der
   Regelfall -- fiel er weg und mit ihm die Luft.

   Der Abstand steht jetzt in der Zeile selbst und ist damit unabhaengig
   davon, ob Bilder da sind. */

.ratings-summary {
    row-gap: 1rem;
    padding-bottom: .5rem;
}

.ratings-summary > .button.primary { margin-top: .15rem; }

/* Und derselbe Abstand nach unten zur ersten Sprechblase, auf jeder Breite --
   bisher stand er nur unterhalb von 992 px. */
.sgp-stimmen { margin-top: .75rem; }


/* --- 47. Die Bilder im Zubehoer-Karussell sind gestaucht ---------------

   Betreiber: „sind die bilder im zubehör verzerrt?"

   Ja, gemessen: Original 400x266 (Querformat), angezeigt 212x212 (Quadrat),
   `object-fit: fill`. Das ist keine Beschneidung, sondern eine Stauchung --
   die Bluete wird schmaler, als sie ist. Bei einer Gaertnerei, die Pflanzen
   nach ihrem Aussehen verkauft, ist das mehr als ein Schoenheitsfehler.

   `cover` zeigt denselben Ausschnitt in richtigen Proportionen. Die Kachel
   bleibt quadratisch, es fehlen links und rechts je rund 22 % des Bildes --
   das ist der Preis, und er ist geringer als eine falsche Bluetenform. */

#product-kiSimilar img,
#product-kiSimilar .image-square img {
    object-fit: cover;
    object-position: center;
}


/* --- 48. Die Kacheln im Zubehoer-Karussell -----------------------------

   Bisher: Bild, darunter freistehender Text in drei Groessen, kein Rahmen,
   kein Grund -- die Kacheln standen als lose Haufen nebeneinander, waehrend
   Pflegetipps und Erfahrungen daneben Karten sind. Betreiber: „das zubehör
   fertig formatieren".

   Dieselbe Karte wie bei den Pflegetipps: heller Grund, feiner Rahmen,
   gleiche Rundung. Das Bild sitzt buendig oben, der Text bekommt einen
   Innenabstand -- so liest sich die Kachel als ein Ding und nicht als Bild
   mit Beschriftung darunter.

   Der Preis steht zuletzt und traegt als Einziges Gewicht: er ist die
   Angabe, wegen der man hinsieht. */

#product-kiSimilar .item {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 0 .75rem;
    /* Derselbe cremefarbene Grund wie die Pflegetipp-Karten (#faf8ee) --
       weiss stand daneben wie ein Fremdkoerper (Betreiber, 06.09.). */
    background: #faf8ee;
    border: 1px solid #e6e1cd;
    border-radius: .5rem;
    overflow: hidden;
    text-align: left;
}

#product-kiSimilar .item > a {
    display: block;
    line-height: 0;
    margin-bottom: .6rem;
}

#product-kiSimilar .item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

#product-kiSimilar .item .product-name {
    display: block;
    padding: 0 .75rem;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: #2b2b26;
}

/* Farbe und Wuchshoehe: eine Zeile, zurueckhaltend. Die Huelle darum setzt
   das Skript in der Vorlage -- siehe dort, warum. */
#product-kiSimilar .sgp-zubehoer-angaben {
    display: block;
    padding: .15rem .75rem 0;
    font-size: .875rem;
    line-height: 1.35;
    color: #7a7a6e;
}

#product-kiSimilar .sgp-zubehoer-angaben span { display: inline; }

#product-kiSimilar .item br { display: none; }

#product-kiSimilar .item .product-price {
    display: block;
    margin-top: auto;
    padding: .5rem .75rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #2b2b26;
}

/* Gleiche Hoehe fuer alle Kacheln einer Reihe -- ohne das haengt der Preis
   je nach Laenge des Namens auf einer anderen Linie. */
#product-kiSimilar .owl-stage { display: flex; align-items: stretch; }
#product-kiSimilar .owl-item  { display: flex; }
#product-kiSimilar .owl-item > .item { width: 100%; }

/* Auf dieselbe Linie wie Pflegetipps und Erfahrungen (Betreiber, 06.09.).
   Gemessen bei 1400 px: erste Stimme und erste Pflegekachel beginnen bei
   128 px, die erste Zubehoerkachel bei 119 -- neun Pixel Versatz an drei
   Abschnitten, die untereinander stehen.

   Die Ursache ist kein Abstand an der Kachel, sondern einer am Traeger: bei
   den Pflegetipps traegt `.owl-item` 8 px Innenabstand, beim Zubehoer keinen.
   Derselbe Wert hier stellt beide auf dieselbe Kante und gibt den Kacheln
   nebenbei den gleichen Zwischenraum. */
#product-kiSimilar .owl-item { padding-left: 8px; padding-right: 8px; }


/* --- 49. Die Pflegetipps als Weg -------------------------------------

   Ordnungszahl und Einleitung setzt das Skript in der Vorlage; hier steht,
   wie sie aussehen. Die Zahl ist ein Ordnungszeichen, kein Schmuck: gross
   genug, um die Reihenfolge zu tragen, hell genug, um dem Titel nicht die
   Aufmerksamkeit zu nehmen. */

/* Betreiber, 06.09.: „zu nah an der linie, zu hell". Der Satz klebte mit
   -.25 rem an der Unterlinie der Ueberschrift und stand im selben Grau wie
   eine Nebenangabe -- dabei ist er die Ansprache. Jetzt eine Zeile Abstand,
   dieselbe Farbe wie der Fliesstext und eine Spur groesser. */
.sgp-pflege-einleitung {
    margin: 1rem 0 1.25rem 6px;
    max-width: 62ch;
    color: #4b4b45;
    font-size: 1.0625rem;
    line-height: 1.55;
}

.sgp-pflege-nr {
    display: block;
    margin-bottom: .15rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: #b9ab7a;
}


/* --- 50. Bilder in Karussellen wachsen unter dem Zeiger ---------------

   Betreiber: „ganz subtil? ease-in oder so?" -- 4 %, in einer drittel
   Sekunde, mit weicher Bremse am Ende (`ease-out`; reines `ease-in` beginnt
   traege und endet abrupt, das wirkt bei so kleinen Wegen wie ein Ruck).

   Der Ausschnitt bleibt gleich gross, nur das Bild darin waechst -- deshalb
   `overflow: hidden` am Rahmen. Ohne das schoebe sich das Bild ueber seine
   Nachbarn.

   `prefers-reduced-motion` schaltet es ab; wer Bewegung abbestellt hat,
   bekommt keine. */

/* ⚠ NUR WO DAS BILD SEINEN RAHMEN FUELLT. Erster Versuch war „alle Bilder in
   jedem Owl", und das ging schief: die Kacheln in „zuletzt gesehen" tragen
   Querformate in quadratischen Rahmen, per negativem Aussenabstand
   zurechtgerueckt. `scale` rechnet vom Mittelpunkt des BILDES, nicht des
   Rahmens -- ein aus der Mitte geschobenes Bild wandert beim Wachsen sichtbar
   zur Seite (Betreiber, 06.09.: „die fahren jetzt komisch zur seite").

   Bleiben die Stellen, an denen `object-fit: cover` das Bild deckungsgleich
   mit seinem Rahmen macht: das Zubehoer-Karussell und die Bildleiste unter
   dem Hauptbild. Dort ist Bildmitte gleich Rahmenmitte, und es wachsen
   heisst wirklich nur wachsen. */

/* ⚠ NICHT DAS <img> TRANSFORMIEREN. Das ist die Ursache, warum zwei Anlaeufe
   gescheitert sind -- erst wanderten die Bilder seitlich, dann tat sich gar
   nichts mehr.

   Gemessen: das Bild traegt bereits ein eigenes Transform,
   `matrix(1, 0, 0, 1, -106.95, -106.95)`. Fremdes CSS zentriert es damit im
   quadratischen Rahmen, und die Regel dahinter traegt ein `!important`.
   `transform` ist EINE Eigenschaft: ein `scale()` ersetzt die Verschiebung,
   statt sie zu ergaenzen -- daher das Wandern -- und wird vom `!important`
   anschliessend ueberstimmt -- daher die Wirkungslosigkeit.

   Skaliert wird deshalb der BEHAELTER (`.image-square`, `picture` oder das
   Bild selbst, je nach Aufbau). Er traegt kein fremdes Transform, und der
   Rahmen darum schneidet mit `overflow: hidden` ab. */

#product-kiSimilar .owl-item a,
.sgp-bildleiste-bild { display: block; overflow: hidden; }

/* FALL 1: Bilder in `.image-square`. Sie sind absolut gesetzt und mit
   `transform: translateX(-50%) translateY(-50%)` zentriert (sgp-basis.css).
   `transform` ist EINE Eigenschaft -- ein blosses `scale()` loescht die
   Zentrierung, und genau das war das seitliche Wandern beim ersten Versuch.
   Die Verschiebung muss mitgeschrieben werden, in dieser Reihenfolge: erst
   verschieben, dann skalieren. */
/* Ruhig statt schnell (Betreiber, 06.09.: „im zubehör-owl ist das sehr
   nervös … mach es smoother"). Der Weg ist kurz, also darf er lange dauern:
   eine halbe Sekunde mit weicher Bremse, und 4 % statt 6. Beim Verlassen
   laeuft es langsamer zurueck als hin -- so wirkt das Zurueckfallen nicht
   wie ein Abreissen, wenn der Zeiger ueber mehrere Kacheln streicht. */
/* ⚠ MIT `#article-detail` DAVOR. Dieses Blatt haengt an `outerWideNew.html`
   -- dem Rahmen vieler Seiten, nicht nur der Artikelseite. `.image-square`
   kommt auch auf den Uebersichten vor: gemessen 24 Mal auf /rosen/ und 61 Mal
   auf /clematis/. Eine Regel ohne Anker haette dort mitgewirkt, ohne dass es
   hier auffaellt. */
#article-detail .image-square img {
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

#product-kiSimilar .item:hover .image-square img,
.sgp-bildleiste-bild:hover .image-square img {
    transform: translateX(-50%) translateY(-50%) scale(1.04);
    transition-duration: .45s;
}

/* FALL 2: Bilder ohne diese Zentrierung -- die Kundenfotos, die dieses
   Skript selbst in die Bildleiste haengt. Sie fuellen ihren Rahmen ueber
   `object-fit` und tragen kein eigenes Transform. */
.sgp-bildleiste-kundenbild img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.sgp-bildleiste-kundenbild:hover img { transform: scale(1.04); transition-duration: .45s; }

@media (prefers-reduced-motion: reduce) {
    .image-square img,
    .sgp-bildleiste-kundenbild img { transition: none; }

    #product-kiSimilar .item:hover .image-square img,
    .sgp-bildleiste-bild:hover .image-square img {
        transform: translateX(-50%) translateY(-50%);
    }

    .sgp-bildleiste-kundenbild:hover img { transform: none; }
}


/* --- 51. Die Rosenschule ----------------------------------------------

   Ein ruhiger Abschnitt, kein Werbebanner: viel Weissraum, keine Umrandung,
   keine Farbflaeche ausser dem Grund des Hauses. Was ihn traegt, ist die
   Typografie -- ein Satz gross, der Rest zurueckhaltend.

   Er steht bewusst NACH den Pflegetipps: erst die Begleitung zeigen, dann
   sagen, warum es sie gibt. Umgekehrt waere es eine Ankuendigung. */

.sgp-schule {
    /* ⚠ `clear: both`. `#pflegetips` ist eine Foundation-Spalte und FLOATET;
       ohne das rutschte dieser Abschnitt unter sie statt hinter sie -- die
       beige Flaeche lag dann hinter Ueberschrift, Einleitung und Karten und
       sah aus, als steckte der ganze Pflegeblock in einer Box (Betreiber,
       06.09.: „dieses damit … nicht in der beigen box"). Gemessen: Pflege
       2368-2767, Schule 2416-3114 -- 350 px Ueberlappung. */
    clear: both;
    margin: 2.5rem 0;
    padding: 2.25rem 1.5rem;
    background: #faf8ee;
    border-top: 1px solid #e6e1cd;
    border-bottom: 1px solid #e6e1cd;
    text-align: center;
}

.sgp-schule-satz {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.35;
    color: #2b2b26;
}

.sgp-schule-zweit {
    display: inline-block;
    font-weight: 400;
    color: #6b6b60;
}

.sgp-schule-text {
    max-width: 54ch;
    margin: 0 auto 1.25rem;
    font-size: 1rem;
    line-height: 1.6;
    color: #4b4b45;
}

.sgp-schule-signatur {
    margin: 0 0 1.25rem;
    font-size: .875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a857a;
}

.sgp-schule-weg {
    display: inline-block;
    padding: .5rem 1.25rem;
    border: 1px solid #b9ab7a;
    border-radius: .375rem;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    color: #5c5326;
    transition: background .2s ease-out, border-color .2s ease-out;
}

.sgp-schule-weg:hover {
    background: #f2ecd8;
    border-color: #8f8351;
    color: #3f3819;
}

@media (max-width: 575.98px) {
    .sgp-schule { margin: 2rem 0; padding: 1.75rem 1rem; }
    .sgp-schule-satz { font-size: 1.25rem; }
}


/* --- 52. Abstand zwischen Erfahrungen und Pflegetipps ------------------

   Betreiber, 06.09.: „etwas mehr vertikaler abstand von pflege und
   kommentare". Nachdem die Pflege direkt hinter die Erfahrungen gerueckt
   ist, stossen zwei Abschnitte aneinander, die vorher der Zubehoer-Block
   getrennt hat -- die letzte Sprechblase und die Pflege-Ueberschrift standen
   knapp uebereinander.

   `!important`, weil Abschnitt 41 denselben Wert unterhalb von 992 px setzt
   und sonst gewinnt. */

/* EIN Abstand zwischen Abschnitten: 2,5 rem (40 px), auf jeder Breite.
   Vorher standen dort 3,5 rem vor der Pflege, 3 rem vor der Rosenschule und
   2,5 rem vor dem Zubehoer -- drei Werte fuer dieselbe Fuge. Betreiber:
   „richte alles sauber aus, mach den feinschliff penibel". */
#pflegetips { margin-top: 2.5rem !important; }

@media (max-width: 575.98px) {
    #pflegetips { margin-top: 2rem !important; }
}


/* Die Gattungsverweise im Rosenschul-Text: unterstrichen, in der Farbe des
   Textes -- sie sollen lesbar bleiben und den Satz nicht aufbrechen. */
.sgp-schule-text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-color: #b9ab7a;
    text-decoration-thickness: 1px;
}

.sgp-schule-text a:hover { color: #2b2b26; text-decoration-color: #8f8351; }


/* --- 53. Ersatz fuer Foundations `.column small-12` --------------------

   Betreiber, 06.09.: „nimm foundation-markup raus wenn es stört - foundation
   fliegt raus, wenn du schon dran bist ist das eine gute gelegenheit."

   Gemessen, was die Klasse beitraegt: `float: left`, `width: 100%`,
   `padding: 0 10px`. Gebraucht werden davon zwei Drittel -- der Float ist
   der Grund, warum ein nachfolgender Abschnitt UNTER den Block rutscht statt
   dahinter. Genau das ist heute beim Rosenschul-Abschnitt passiert, und an
   `#product-ratings` hatte schon jemand vor mir ein `style="float: none"`
   dagegengesetzt.

   Ersetzt an den Bloecken, die zu diesem Umbau gehoeren (`#pflegetips` in
   beiden Fassungen, `#product-ratings`). Die uebrigen Foundation-Spalten in
   dieser Vorlage bleiben unangetastet -- ihr Ausbau gehoert zur Abloesung
   durch CC-10 und nicht nebenbei hierher. */

.sgp-block {
    float: none;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}


/* Der zweite Absatz des Rosenschul-Textes steht abgesetzt -- ein kurzer
   Strich zwischen beiden, nicht nur ein Abstand: der erste Satz sagt, wer wir
   sind, der zweite, was daraus folgt. */
.sgp-schule-text-zwei {
    position: relative;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}

.sgp-schule-text-zwei::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: 1px;
    background: #d8cfae;
}


/* --- 54. Pfeile ohne Weg ------------------------------------------------

   Betreiber, 06.09.: „im pflege-owl die pfeile raus wenn es nichts zu
   scrollen gibt". Bei Clematis stehen zwei Pflegekarten in einer Reihe, in
   die vier passen -- die Pfeile daneben versprechen etwas, das es nicht gibt.

   Owl schaltet beide Knoepfe in diesem Fall selbst auf `.disabled`; die
   Leiste bleibt trotzdem stehen. Sind BEIDE abgeschaltet, gibt es nichts zu
   blaettern, und sie kann weg. Gilt fuer alle Karussells dieser Seite --
   dasselbe Versprechen, derselbe Grund. */

/* ⚠ ZURUECKGENOMMEN -- die Bedingung trifft nie zu. Gemessen: beide Knoepfe
   stehen auf `disabled=false`, auch wenn alle Kacheln sichtbar sind, weil die
   Karussells mit `loop`/`rewind` laufen. Die Entscheidung faellt jetzt im
   Skript der Vorlage (`pfeilePruefen`), das die Kachelbreiten aufsummiert.

       .owl-nav:has(.owl-prev.disabled):has(.owl-next.disabled) { display: none }
*/


/* --- 55. Wenn nichts zu kaufen ist -------------------------------------

   Gehoert zum Zweig `!kaufbar` in der Vorlage. Der Kaufweg wird verborgen,
   nicht entfernt -- die Auszeichnung fuer Suchmaschinen steht im selben
   Formular. */

/* ⚠ MIT ZWEI KLASSEN. Die Zeile traegt `d-flex`, und Bootstraps
   `.sgp-ui .d-flex` hat sowohl `!important` als auch die hoehere Spezifitaet
   (0,2,0 gegen 0,1,0) -- eine einzelne Klasse verliert, auch mit
   `!important`. Gemessen: Klasse gesetzt, Zeile trotzdem 42 px hoch. */
.sgp-ui .sgp-kein-kaufweg,
.product-basket .sgp-kein-kaufweg { display: none !important; }

.sgp-nicht-lieferbar {
    margin: .25rem 0 1rem;
    padding: .75rem 1rem;
    background: #fbf6e8;
    border: 1px solid #e6d9b0;
    border-radius: .5rem;
    color: #5c5326 !important;
    font-size: 1rem;
    line-height: 1.5;
}


/* --- 56. KEIN Bildzoom im Zubehoer ------------------------------------

   Dreimal nachgebessert (6 % / 4 % / 2 %, .3 s / .5 s / .6 s), dreimal
   dieselbe Ruecksmeldung: „sehr nervös", „das geht garnicht". Damit ist
   nicht die Zahl das Problem, sondern das Mittel.

   Der Grund ist technisch: das Bild in `.image-square` ist absolut gesetzt,
   per `translate(-50%,-50%)` zentriert und mit `min-width/min-height: 100%`
   groesser als sein Rahmen. Eine Skalierung darauf laesst den Browser bei
   jedem Bild neu zeichnen statt nur zu verschieben -- und weil das Bild
   ueber den Rahmen hinausragt, wandert der Beschnitt an allen vier Kanten
   zugleich. Das liest sich als Zappeln, egal wie klein der Weg ist.

   Also ein anderes Mittel, das dasselbe sagt: die Karte HEBT SICH. Rahmen
   etwas dunkler, ein weicher Schatten, ein Pixel nach oben. Nichts, was
   neu gezeichnet werden muss, und keine Bewegung innerhalb des Bildes.

   Der Zoom in der Bildleiste unter dem Hauptbild bleibt -- dort wurde er nie
   beanstandet, die Bilder sind klein und liegen im Rahmen statt darueber. */

#product-kiSimilar .item {
    transition: box-shadow .35s ease-out, border-color .35s ease-out, transform .35s ease-out;
}

#product-kiSimilar .item:hover {
    border-color: #b9ab7a;
    box-shadow: 0 .5rem 1.25rem -.5rem rgba(0, 0, 0, .22);
    transform: translateY(-2px);
}

/* Und das Bild bleibt, wo es ist. */
#product-kiSimilar .item:hover .image-square img {
    transform: translateX(-50%) translateY(-50%);
}


/* --- 57. Der Bestand vergroessert selbst -- auf 150 %, ohne Uebergang ---

   DAS war der „riesige, sehr schnelle" Sprung im Zubehoer, und er kam nicht
   von mir. In sgp-basis.css steht:

       .image-square:hover img          { zoom: 150% }
       .image-square:hover img.landscape { max-height: 150% }
       .image-square:hover img.portrait  { max-width: 150% }

   `zoom` ist keine animierbare Eigenschaft -- der Sprung passiert in einem
   Bild. Weiter unten in derselben Datei steht bereits eine Ruecknahme
   (`zoom: 100% !important`), die aber nur einen Teil der Faelle trifft.

   Hier wird sie fuer die Bereiche dieser Seite vollstaendig zurueckgenommen.
   Was der Kachel den Hinweis gibt, ist das Heben aus Abschnitt 56. */

#product-kiSimilar .image-square:hover img,
.sgp-bildleiste .image-square:hover img,
#article-detail-image .image-square:hover img {
    zoom: 100% !important;
}

#product-kiSimilar .image-square:hover img.landscape,
.sgp-bildleiste .image-square:hover img.landscape,
#article-detail-image .image-square:hover img.landscape { max-height: 100% !important; }

#product-kiSimilar .image-square:hover img.portrait,
.sgp-bildleiste .image-square:hover img.portrait,
#article-detail-image .image-square:hover img.portrait { max-width: 100% !important; }


/* --- 58. Die Artikelbilder ohne Rahmen --------------------------------

   Betreiber: „nimm den rahmen weg bei den artikelbildern + hover". Die
   Kacheln der Bildleiste trugen einen grauen Rahmen und im Hover einen
   gruenen -- zwei Linien um ein Bild, das fuer sich steht. */

/* ⚠ Die Klasse `border` ist AUS DEM MARKUP genommen, nicht ueberschrieben:
   Bootstraps `.sgp-ui .border` traegt `!important` und die hoehere
   Spezifitaet (0,2,0) -- eine eigene Klasse verliert dagegen, auch mit
   `!important`. Gemessen: Rahmen blieb 1 px, obwohl die Regel stand.
   Der Kundenbild-Rand aus Abschnitt 32 faellt damit ebenfalls weg. */
.sgp-bildleiste-bild,
.sgp-bildleiste-bild:hover,
.sgp-bildleiste-kundenbild,
.sgp-bildleiste-kundenbild:hover {
    border: 0 !important;
}


/* --- 59. Das Hauptbild darf atmen -------------------------------------

   Betreiber: „das hauptbild kann ruhig auch etwas zoomen auf einem hover."
   Zwei Prozent, in einer halben Sekunde -- bei einem Bild dieser Groesse
   ist das ein deutlicher, aber ruhiger Weg. Der Rahmen schneidet ab, damit
   nichts ueber die Kante tritt. */

#article-detail-image { overflow: hidden; }

/* ⚠ HIER STAND EINMAL EIN ZOOM AUF DEM BILD. Er ist ersatzlos entfernt --
   skaliert wird seit Abschnitt 90 der Rahmen. Am Bild selbst steht jetzt
   ABSICHTLICH keine einzige `transform`-Regel mehr.

   NACHTRAG SPAETER AM 06.09.: Als dieser Text entstand, gab es die Ruhelage
   des Bildes ZWEIMAL -- unter 992 px ueber `top: 0; left: 0` samt
   `object-fit: cover`, darueber ueber `left: 50%; top: 50%` mit
   `translate(-50%, -50%)` aus dem Bestand. Genau diese Naht hat den Versatz
   um 233 px erzeugt: eine Regel, die im einen Bereich stimmte, weil ein
   Nachbar danebenstand, und im anderen das Gegenteil bewirkte.

   Die Naht ist weg. Der Block unter 992 px ist entfernt (Betreiber:
   „quadratisch, immer"), es gilt ueber alle Breiten nur noch der Bestand.

   Was hier trotzdem gilt und der Grund ist, warum der Absatz stehenbleibt:
   Wer am Hauptbild eine `transform` schreibt, uebernimmt damit auch dessen
   Zentrierung -- `transform` ist EINE Eigenschaft, ein blosses `scale()`
   loescht das `translate` mit. Wer keine schreibt, hat das Problem nicht.
   Deshalb skaliert der Zeiger-Effekt den Rahmen. */


/* --- 60. EINE Linke Kante ---------------------------------------------

   Betreiber: „achte auf stimmige abstände, bündige kanten". Durchlauf ueber
   320/390/576/768/992/1200/1400 -- an jeder Breite standen VIER verschiedene
   linke Kanten. Gemessen bei 390 px und je Ursache aufgeloest:

   |  7 px | Kicker, Name, Kurztext, Langtext | Innenabstand der Kopfspalten |
   | 10 px | Abschnittsueberschriften          | `.sgp-block` 10 + h2 6       |
   | 24 px | Kennzeichen, Kategorien           | Zelle 7 + eigene 16          |
   |  0 px | Rosenschule                       | volles Band, Absicht         |

   Bezug ist die Kaufspalte -- dort steht der Sortenname, und danach richtet
   sich das Auge. Die Rosenschule bleibt ein randloses Band mit zentriertem
   Text; sie hat keine linke Textkante, die flattern koennte.

   Die Werte sind relativ: alle betroffenen Behaelter beginnen an derselben
   Stelle, deshalb genuegt derselbe Innenabstand -- und er stimmt damit auf
   jeder Breite, auch wenn der Aussenrand der Seite mitwaechst. */

/* Kennzeichen und Kategorien: der eigene Innenabstand der Rasterzelle faellt
   weg. Die Karte darin bringt ihren Textabstand selbst mit.

   Der verbleibende eine Pixel ist die Rahmenlinie der Karte -- sie steht auf
   der Kante, ihr Inhalt beginnt dahinter. Das ist richtig so und keine
   Abweichung. Bei 768 bis 991 px lag die Zelle zwei Pixel weiter links als
   ihre Nachbarn; der Ausgleich steht unten. */
.sgp-artikel-kennzeichen {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .sgp-artikel-kennzeichen {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
}

/* Abschnittsbloecke auf denselben Innenabstand wie die Kopfspalten.

   ⚠ Der Wert ist NICHT ueber alle Breiten derselbe. Nachgemessen, weil die
   erste Fassung (7 px ueberall) nur auf dem Telefon passte:

   |      | Kopfspalte | Abschnitt vorher | noetig |
   |------|-----------|------------------|--------|
   | 390  |  7        |  7               |  7     |
   | 768  | 20        | 17               | 10     |
   | 1400 | 110       | 117              |  0     |

   Grund ist der Aussenrand der Seite, der bei 768 dazukommt und bei 992 in
   das Raster wandert -- der Kopfbereich sitzt dort in einem Grid, die
   Abschnitte darunter nicht. */
.sgp-block {
    padding-left: 7px;
    padding-right: 7px;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .sgp-block { padding-left: 10px; padding-right: 10px; }
}

@media (min-width: 992px) {
    .sgp-block { padding-left: 0; padding-right: 0; }
}

/* Und die Ueberschriften ohne zusaetzlichen Einzug -- die 6 px stammen aus
   der Zeit, als ihr Behaelter keinen hatte. */
#product-ratings > h2#Erfahrungen,
#pflegetips-carousel ~ .section-heading,
.sgp-spalte:not(#article-detail) > .section-heading:has(+ #pflegetips-carousel),
.section-heading:has(+ #pflegetips-carousel),
.section-heading:has(+ #product-kiSimilar) {
    padding-left: 0 !important;
}

.sgp-pflege-einleitung { margin-left: 0; }


/* --- 61. Kategorien und Fussnote auf die Textlinie der Karte -----------

   Betreiber: „vor allem störend: pills der kategorien die direkt am rand
   sitzen, und der *-text zu stachellosen darunter".

   Gemessen bei 390 px: Karte, Pillen und Fussnote stehen alle bei 8 px --
   auf der Kante. Der Text IN der Karte beginnt aber bei 31. Pillen und
   Fussnote gehoeren inhaltlich zu den Kennzeichen; sie sollen deshalb mit
   deren Inhalt fluchten, nicht mit der Umrandung. Eine farbige Pille an der
   Kante liest sich ausserdem staerker als Text an derselben Stelle -- sie
   hat eine sichtbare Flaeche, wo Text Luft hat.

   23 px ist gemessen, nicht gewaehlt: der Abstand der Karte plus der ihrer
   Zellen. */

.sgp-artikel-kategorien,
.sgp-artikel-kennzeichen > p.small {
    padding-left: 23px;
    padding-right: 23px;
}


/* Und derselbe Wert vor dem Zubehoer -- er stand schon dort, hier nur zur
   Sicherheit an einer Stelle zusammengefasst. */
.section-heading:has(+ #product-kiSimilar) { margin-top: 2.5rem !important; }


/* --- 62. Auch die erste Fuge ------------------------------------------

   Gemessen nach der Vereinheitlichung: Erfahrungen->Pflege und
   Pflege->Rosenschule stehen ueberall auf demselben Wert, aber die Fuge
   davor -- Kopfbereich -> Erfahrungen -- war 8 px bei 390, 9 bei 768 und 30
   bei 1400. Sie entstand aus Aussenabstaenden der Nachbarn, nicht aus einer
   Absicht. */

#product-ratings { margin-top: 2.5rem; }

@media (max-width: 575.98px) {
    #product-ratings { margin-top: 2rem; }
}


/* --- 63. Zubehör: dieselbe Seite, weniger Pflanzenzubehör --------------

   Seit dem 06.09.2026 laufen die 109 Artikel der Klasse 25 über dieselbe
   Vorlage wie Rosen und Clematis. Was für eine Pflanze richtig ist, ist es
   für eine Gartenschere nicht — der Klassenmarker am Wurzelelement
   (`sgp-klasse-25`, gesetzt im Ereignis) trennt beides, ohne dass jemand aus
   fehlenden Feldern auf die Art des Artikels schliessen muss.

   Betreiber: „diese seite braucht keine buy-box und ähnliches" — später
   präzisiert: „also die buy-box schon, aber nicht so ausführlich."
   Es fällt also weg, was an der PFLANZE hängt, nicht der Kaufweg. */

/* ⚠ ZURUECKGENOMMEN am 06.09. auf Ansage des Betreibers: „die dünger dabei …
   box wieder rein." Mein Einwand war, dass eine Duengerwerbung unter einer
   Gartenschere ein Angebot ohne Anlass ist -- der Betreiber sieht es anders,
   und es ist seine Entscheidung. Wer Rosen schneidet, duengt sie auch.

       .sgp-klasse-25 .sgp-promo,
       .sgp-klasse-25 [aria-labelledby="sgpPromoH"],
       .sgp-klasse-25 .sgp-artikel-beiwerk { display: none !important; }
*/

/* Die Anwachsgarantie gilt Pflanzen. */
.sgp-klasse-25 .product-basket a[href*="anwachsgarantie"],
.sgp-klasse-25 .sgp-anwachs { display: none !important; }

/* Ein leerer Steckbrief hinterlässt sonst einen leeren Rahmen: gemessen an
   der FELCO 2 stand dort eine 574 × 102 px grosse Karte mit einer einzigen
   Kategorie-Pille darin und keinem Kennzeichen. */
.sgp-artikel-kennzeichen:not(:has(.sgp-kennzeichen-paar)) {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}

.sgp-kennzeichen:not(:has(.sgp-kennzeichen-paar)) { display: none !important; }


/* --- 64. „Dazu passend" ------------------------------------------------

   Gehört zum Block `appArticlesWrapper` in der Vorlage. Dieselbe Kartenform
   wie das Zubehör-Karussell, aber ohne Karussell: die Liste ist kurz und
   steht in der schmalen Spalte. */

.sgp-dazu { margin-top: 1.5rem; }

.sgp-dazu-titel {
    margin: 0 0 .75rem;
    padding: 0 0 .5rem;
    border-bottom: 1px solid #e6e1cd;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: #2b2b26;
}

.sgp-dazu-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .75rem;
}

.sgp-dazu-liste > * {
    background: #faf8ee;
    border: 1px solid #e6e1cd;
    border-radius: .5rem;
    overflow: hidden;
    font-size: .875rem;
    line-height: 1.35;
}

.sgp-dazu-liste img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}


/* --- 65. Die Kacheln unter „Dazu passend" ------------------------------

   Zur neuen `commerceAppArticleInList.html`. Bootstrap-frei und
   Foundation-frei: die Kachel bringt keine Rasterklassen mit, das Raster
   stellt `.sgp-dazu-liste`. */

.sgp-dazu-karte {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.sgp-dazu-bild {
    display: block;
    line-height: 0;
    overflow: hidden;
}

/* Quadratisch, immer -- unabhaengig davon, was das Bild mitbringt
   (Betreiber, 06.09.: „setze die bilder immer quadratisch"). */
.sgp-dazu-bild img,
.sgp-dazu-bild .image-square {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.sgp-dazu-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: .25rem;
    padding: .5rem .6rem .6rem;
}

.sgp-dazu-name {
    font-weight: 600;
    line-height: 1.3;
    color: #2b2b26;
}

.sgp-dazu-preis {
    margin-top: auto;
    font-weight: 600;
    color: #2b2b26;
}

.sgp-dazu-karte:hover .sgp-dazu-name { text-decoration: underline; }


/* --- 66. Fremde Kacheln unter „Dazu passend" baendigen -----------------

   Welche Listenvorlage das Framework fuer einen zugeordneten Artikel waehlt,
   entscheidet ein Ereignis (`beforeRenderInList`, Vorlage per Referenz) --
   nicht diese Seite. Gemessen an der FELCO 2 kam die alte Foundation-Kachel:
   `single-productx column small-12 medium-4`, 61 x 116 px, Text uebereinander.

   Statt der Vorlagenwahl hinterherzulaufen, wird hier die Kachel gebaendigt,
   die tatsaechlich ankommt. Foundations Rasterklassen werden im Kontext
   dieser Liste wirkungslos gemacht -- ausserhalb bleibt alles, wie es ist. */

.sgp-dazu-liste > *,
.sgp-dazu-liste .column,
.sgp-dazu-liste [class*="small-"],
.sgp-dazu-liste [class*="medium-"],
.sgp-dazu-liste [class*="large-"] {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.sgp-dazu-liste > * {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
}

/* Das Bild oben, quadratisch, ueber die volle Kachelbreite
   (Betreiber: „setze die bilder immer quadratisch"). */
.sgp-dazu-liste img {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    position: static !important;
    transform: none !important;
}

.sgp-dazu-liste .image-square,
.sgp-dazu-liste a {
    display: block;
    width: auto !important;
    height: auto !important;
    position: static !important;
}

/* Text darunter, mit Luft und ohne Ueberlappung. */
.sgp-dazu-liste > * > *:not(a):not(meta) {
    position: static !important;
    padding: .5rem .6rem 0;
    font-size: .875rem;
    line-height: 1.35;
}

.sgp-dazu-liste .product-price,
.sgp-dazu-liste [class*="price"] {
    padding: .25rem .6rem .6rem;
    font-weight: 600;
    color: #2b2b26;
}


/* --- 67. Die Bilder in vor/zurück quadratisch -------------------------

   Betreiber: „auch in vorige/nächste die bilder quadratisch setzen /
   zeigen". Sie kamen in ihrem Originalverhältnis und standen damit als
   einzige Bilder der Seite nicht im Quadrat. */

.sgp-nachbar-bild {
    flex: 0 0 auto;
    overflow: hidden;
}

.sgp-nachbar-bild,
.sgp-nachbar-bild picture,
.sgp-nachbar-bild img {
    display: block;
    width: 44px;
    height: 44px;
}

.sgp-nachbar-bild img {
    object-fit: cover;
    max-width: none;
    min-width: 0;
    min-height: 0;
    position: static;
    transform: none;
}


/* --- 68. Der Text in den Dazu-Kacheln ---------------------------------

   Die gelieferten Kacheln bringen eigene Ausrichtungen und teils absolut
   gesetzte Preise mit -- gemessen: Namen mal links, mal rechtsbuendig, und
   der Preis lag ueber dem Kurztext. Hier wird beides in eine Spalte
   gezwungen: Bild, Name, Beschreibung, Preis zuletzt. */

.sgp-dazu-liste > * {
    text-align: left !important;
    justify-content: flex-start;
}

.sgp-dazu-liste > * > *:not(a):not(meta),
.sgp-dazu-liste [class*="price"],
.sgp-dazu-liste .product-name {
    text-align: left !important;
    position: static !important;
    float: none !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
}

/* Der Preis steht zuletzt und wird an den unteren Rand gedrueckt, damit die
   Preise einer Reihe auf einer Linie liegen. */
.sgp-dazu-liste [class*="price"] {
    margin-top: auto !important;
    padding-top: .35rem;
    font-size: 1rem;
}

/* Der „=>mehr"-Verweis der Altvorlage ist in dieser Kachel ueberfluessig --
   die ganze Kachel ist bereits ein Verweis. */
.sgp-dazu-liste a[href]:not(:has(img)) { font-size: .8125rem; }


/* --- 69. Die Dazu-Kacheln aufgeraeumt ---------------------------------

   Betreiber, 06.09.: „hintergrundfarbe der schrift, elipses wenn eine
   kurzbeschreibung da ist, preis groesser, innenabstaende, bild ohne
   innenabstand an den container stellen, linie unter der ueberschrift weg"
   und „vertikale abstaende der kacheln an die stegbreite anpassen". */

/* Keine Linie unter „Dazu passend". */
.sgp-dazu-titel {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: .75rem !important;
}

/* Der Steg ist waagerecht wie senkrecht derselbe. */
.sgp-dazu-liste { gap: .75rem !important; }

/* Das Bild sitzt buendig in der Kachel -- kein Innenabstand, keine Rundung
   an den Innenkanten. */
.sgp-dazu-liste > * { padding: 0 !important; overflow: hidden; }

.sgp-dazu-liste > * > a:first-of-type,
.sgp-dazu-liste .image-square { margin: 0 !important; padding: 0 !important; }

/* Der Text bekommt seinen Abstand, das Bild nicht. */
.sgp-dazu-liste > * > *:not(a):not(meta) { padding: .6rem .7rem 0 !important; }

/* Kein eigener Grund hinter der Schrift -- die Kachel hat schon einen. */
.sgp-dazu-liste > * > *:not(a):not(meta),
.sgp-dazu-liste [class*="price"],
.sgp-dazu-liste .product-name { background: none !important; }

/* Eine Kurzbeschreibung wird nach zwei Zeilen mit Auslassung beendet. */
.sgp-dazu-liste .product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
}

.sgp-dazu-liste > * > div > *:not([class*="price"]):not(.product-name) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #7a7a6e;
    font-size: .8125rem;
}

/* Der Preis ist die Angabe, wegen der man hinsieht. */
.sgp-dazu-liste [class*="price"] {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #2b2b26 !important;
    padding: .4rem .7rem .1rem !important;
}

/* --- Der Kaufknopf in der Kachel --- */

.sgp-dazu-kauf { margin: 0; padding: .5rem .7rem .7rem; }

.sgp-dazu-knopf {
    display: block;
    width: 100%;
    padding: .4rem .6rem;
    border: 0;
    border-radius: .375rem;
    background: var(--sg-orange, #d2691e);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.sgp-dazu-knopf:hover { filter: brightness(1.08); }


/* --- 70. Die Dazu-Kachel, an ihrem wirklichen Aufbau ------------------

   Erst gemessen, dann geschrieben. Der Aufbau der gelieferten Kachel:

       DIV                     Huelle
        DIV.image-square-x     Bild, mit 12 px Einzug
        A.article-name         Name -- RECHTSBUENDIG, darin `column small-11`
        DIV.price-range-item   Kasten, 75 px hoch
         SMALL.zubehoer-short  Kurztext, 155 px hoch -- laeuft heraus
         FORM.af_<id>          Kaufformular, HOEHE 0 -- unsichtbar
         A                     „=>mehr"

   Das Kaufformular war also da und nur nicht zu sehen. Ein zweites daneben
   zu bauen waere der Fehler gewesen; das Skript in der Vorlage haelt sich
   deshalb zurueck, wenn schon eines steht. */

/* Bild buendig, ohne Einzug. */
.sgp-dazu-liste .image-square-x {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: block;
}

.sgp-dazu-liste .image-square-x a { display: block; width: 100% !important; }

/* Der Name links, ohne Foundation-Spalte. */
.sgp-dazu-liste .article-name,
.sgp-dazu-liste .article-name span {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    position: static !important;
    float: none !important;
    color: #2b2b26;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.sgp-dazu-liste .article-name { padding: .6rem .7rem .2rem !important; }

/* Der Kasten darunter waechst mit seinem Inhalt. */
.sgp-dazu-liste .price-range-item {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 .7rem .7rem !important;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/* Kurztext: zwei Zeilen, dann Auslassung. */
.sgp-dazu-liste .zubehoer-short {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #7a7a6e;
    font-size: .8125rem;
    line-height: 1.35;
}

/* Das vorhandene Kaufformular sichtbar machen -- Preis gross, Knopf darunter. */
.sgp-dazu-liste form[class^="af_"],
.sgp-dazu-liste form[class*=" af_"] {
    display: flex !important;
    flex-direction: column;
    gap: .4rem;
    height: auto !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.sgp-dazu-liste form[class^="af_"] *,
.sgp-dazu-liste form[class*=" af_"] * {
    position: static !important;
    float: none !important;
    max-width: none !important;
}

.sgp-dazu-liste form [class*="price"],
.sgp-dazu-liste form .price {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #2b2b26 !important;
    padding: 0 !important;
}

.sgp-dazu-liste form button,
.sgp-dazu-liste form input[type="submit"],
.sgp-dazu-liste form .button {
    display: block !important;
    width: 100% !important;
    padding: .4rem .6rem !important;
    border: 0 !important;
    border-radius: .375rem !important;
    background: var(--sg-orange, #d2691e) !important;
    color: #fff !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    cursor: pointer;
}

/* Das Mengenfeld der Kachel braucht niemand -- eins ist die Regel, mehr
   waehlt man im Warenkorb. Es bleibt im Formular stehen, damit die
   Korbschicht seinen Wert findet. */
.sgp-dazu-liste form input[type="number"],
.sgp-dazu-liste form input[type="text"] { display: none !important; }

/* „=>mehr" ist ueberfluessig: die ganze Kachel fuehrt dorthin. */
.sgp-dazu-liste .price-range-item > a:last-child { display: none !important; }


/* --- 71. Die Kachel als Spalte, die ihren Inhalt traegt ---------------

   Nach Abschnitt 70 stand der Kaufknopf zwar da, wurde aber unten
   abgeschnitten, und der Kurztext lief in den Preis. Ursache ist der innere
   Wrapper: er traegt einen eigenen Innenabstand (daher die 12 px unter dem
   Bild) und wachst nicht mit, waehrend die Kachel eine feste Reihenhoehe
   hat. Beide werden jetzt zu Flex-Spalten -- dann verteilt sich der Inhalt,
   statt sich zu stapeln. */

.sgp-dazu-liste > * > div:first-child {
    display: flex !important;
    flex-direction: column;
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Das Bild sitzt ganz oben in der Ecke. */
.sgp-dazu-liste .image-square-x,
.sgp-dazu-liste .image-square-x a,
.sgp-dazu-liste .image-square-x img {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Der Kasten unter dem Namen nimmt den Rest und schiebt den Kaufknopf nach
   unten -- so liegen die Knoepfe einer Reihe auf einer Linie. */
.sgp-dazu-liste .price-range-item {
    flex: 1 1 auto;
    justify-content: flex-start;
}

.sgp-dazu-liste form[class^="af_"],
.sgp-dazu-liste form[class*=" af_"] { margin-top: auto !important; }


/* --- 72. Die Zubehoer-Kachel, jetzt mit eigenen Klassen ---------------

   `commerceArticleInListZubehoer.html` traegt seit dem 06.09.2026 kein
   Foundation mehr (Betreiber: „lasse alle foundation-klassen verschwinden
   und ersetze sie durch bootstrap"). Ersetzt wurden:

       .single-productx column small-12 medium-4  ->  .sgp-zubehoer-kachel
       span.column.small-11 (im Namen)            ->  .sgp-zubehoer-name

   Das Raster stellt der Aufrufer. Diese Vorlage wird auch auf den
   Zubehoer-Uebersichten verwendet -- deshalb steht hier nur, was die Kachel
   selbst betrifft, und keine Breite. */

.sgp-zubehoer-kachel {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

.sgp-zubehoer-name {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    color: #2b2b26;
}

.sgp-zubehoer-kaufen {
    display: block;
    width: 100%;
    margin-top: .4rem;
    padding: .4rem .6rem;
    border: 0;
    border-radius: .375rem;
    background: var(--sg-orange, #d2691e);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.sgp-zubehoer-kaufen:hover { filter: brightness(1.08); }

/* In der Liste „Dazu passend" fuellt die Kachel ihre Rasterzelle. */
.sgp-dazu-liste > .sgp-zubehoer-kachel { height: 100%; margin-bottom: 0; }


/* --- 73. Die Kachel: Bild klebt, Fuss steht ---------------------------

   Betreiber: „bild soll 'im rahmen kleben', hintergrundfarbe des
   artikelnamens weg, kurztext und button etc. unten bündig, damit der name
   auch 2 oder 3 zeilen haben kann."

   Der Name ist damit das einzige Element, das wachsen darf. Bild oben,
   Kurztext, Preis und Knopf unten -- dazwischen dehnt sich der Name. So
   liegen Preise und Knoepfe einer Reihe auf einer Linie, gleich wie lang
   die Namen sind. */

/* Das Bild klebt in der Ecke: keine Rundung an den Innenkanten, kein Rand. */
.sgp-dazu-liste .image-square-x {
    border-radius: .5rem .5rem 0 0;
    overflow: hidden;
}

.sgp-dazu-liste .image-square-x img {
    border-radius: 0 !important;
    display: block;
}

/* Kein eigener Grund hinter dem Namen -- die Kachel hat einen. */
.sgp-dazu-liste .article-name,
.sgp-dazu-liste .article-name span,
.sgp-dazu-liste .sgp-zubehoer-name {
    background: none !important;
    background-color: transparent !important;
}

/* Der Name nimmt den freien Platz und darf mehrzeilig werden. */
.sgp-dazu-liste .article-name {
    flex: 1 1 auto;
    display: flex !important;
    align-items: flex-start;
}

/* Alles unter dem Namen steht unten. */
.sgp-dazu-liste .price-range-item {
    flex: 0 0 auto !important;
    margin-top: auto;
}


/* --- 74. Kein Ueberlauf am Kachelfuss ---------------------------------

   Gemessen nach Abschnitt 73: der Knopf stand 3 bis 8 px unter der
   Kachelkante, der Kurztext war angeschnitten. Die Kachel hat eine feste
   Reihenhoehe, ihr Inhalt aber keine Grenze -- also bekommt der Kurztext
   eine, und der Fuss darf nicht schrumpfen. */

.sgp-dazu-liste > * { overflow: hidden; }

.sgp-dazu-liste .zubehoer-short {
    -webkit-line-clamp: 2;
    flex: 0 1 auto;
    min-height: 0;
}

.sgp-dazu-liste form[class^="af_"],
.sgp-dazu-liste form[class*=" af_"],
.sgp-dazu-liste .sgp-zubehoer-kaufen {
    flex: 0 0 auto;
}

.sgp-dazu-liste .price-range-item { padding-bottom: .5rem !important; }


/* --- 75. Der Name endet nach drei Zeilen ------------------------------

   Betreiber: „die schrift so klein dass der name niemals 4-zeilig wird -
   oder elipses". Beides: eine Spur kleiner UND eine harte Grenze bei drei
   Zeilen mit Auslassung. Die Schrift allein waere keine Zusicherung -- es
   gibt Artikelnamen wie „FELCO 2/3 F-Tech - beschichtete Klinge fuer
   FELCO 2, 4, 11", und der naechste kann laenger sein.

   Drei Zeilen, weil zwei bei diesen Namen zu oft mitten im Modellnamen
   abschneiden. */

.sgp-dazu-liste .article-name,
.sgp-dazu-liste .article-name span,
.sgp-dazu-liste .sgp-zubehoer-name {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .9375rem !important;
    line-height: 1.3 !important;
}

/* Der Name als Ganzes bleibt fuer Vorlesegeraete und als Titel erhalten. */
.sgp-dazu-liste .article-name { align-items: flex-start; }


/* --- 76. Kein Kurztext in der Kachel ----------------------------------

   Er stand zwischen Name und Preis und wurde bei jeder Kachel angeschnitten
   -- bei drei Zeilen Name, Preis und Knopf ist der Platz aufgebraucht. Ein
   halber Satz sagt weniger als keiner, und die ganze Kachel fuehrt ohnehin
   zur Seite mit dem vollstaendigen Text. */

.sgp-dazu-liste .zubehoer-short { display: none !important; }


/* --- 77. Letzter Schliff an der Kachel --------------------------------

   Betreiber: „das bild hat immernoch abstand nach innen, preis etwas
   groesser, rechtsbuendig, button und preis sind noch nicht unten in der
   kachel, den button dezenter -- er ist ja nur ein secondary beim zubehoer."

   Der Bildabstand kam nicht vom Bild: der innere Wrapper trug
   `padding: 9.6px 11.2px 0` (gemessen). Der Selektor davor traf ihn nicht,
   weil er auf `div:first-child` zeigte -- vor ihm stehen zwei `meta`. */

.sgp-dazu-liste > * > div {
    padding: 0 !important;
    margin: 0 !important;
}

/* Der Text bekommt seinen Abstand einzeln, das Bild keinen. */
.sgp-dazu-liste .article-name { padding: .6rem .7rem .2rem !important; }
.sgp-dazu-liste .price-range-item { padding: 0 .7rem .7rem !important; }

/* Preis groesser und rechtsbuendig -- er ist die Zahl, die man vergleicht. */
.sgp-dazu-liste .price-range-item [class*="price"],
.sgp-dazu-liste form [class*="price"],
.sgp-dazu-liste .price {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    text-align: right !important;
    display: block !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 0 .35rem !important;
}

/* Preis und Knopf ganz unten: der Kasten darum schiebt sich nach unten und
   sein Inhalt sitzt am Fuss. */
.sgp-dazu-liste .price-range-item {
    margin-top: auto !important;
    justify-content: flex-end !important;
}

/* Der Knopf ist beim Zubehoer die zweite Wahl -- die erste steht oben in der
   Kaufbox. Also zurueckhaltend: heller Grund, farbiger Rand, farbige
   Schrift. */
.sgp-dazu-liste form button,
.sgp-dazu-liste form input[type="submit"],
.sgp-dazu-liste .sgp-zubehoer-kaufen {
    background: #fff !important;
    border: 1px solid #c9bb8e !important;
    color: #6b5d1f !important;
    font-weight: 600 !important;
}

.sgp-dazu-liste form button:hover,
.sgp-dazu-liste .sgp-zubehoer-kaufen:hover {
    background: #f6f2e2 !important;
    border-color: #8f8351 !important;
    color: #3f3819 !important;
    filter: none !important;
}


/* --- 78. Die zwei letzten Widerstaende --------------------------------

   Beide gemessen statt geraten:

   · Der Innenabstand kommt von einem Wrapper OHNE Klasse
     (`padding: 9.6px 11.2px 0`) -- der Selektor davor traf ihn nicht.
   · Der Preis ist `<span class="ps__">` und traegt keine „price"-Klasse;
     alle Regeln auf `[class*="price"]` gingen daran vorbei. */

.sgp-dazu-liste .sgp-zubehoer-kachel > div,
.sgp-dazu-liste > * > div:not(.image-square-x):not(.price-range-item) {
    padding: 0 !important;
    margin: 0 !important;
}

/* Der Preis: gross, rechtsbuendig, eigene Zeile. */
.sgp-dazu-liste .ps__,
.sgp-dazu-liste span[class^="ps_"] {
    display: block !important;
    width: 100% !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #2b2b26 !important;
    text-align: right !important;
    margin: 0 0 .4rem !important;
    padding: 0 !important;
}

/* Auch sein Behaelter im Formular richtet nach rechts, sonst zieht er den
   Text wieder nach links. */
.sgp-dazu-liste form > div { text-align: right !important; width: 100%; }


/* --- 79. Preis und Knopf stehen in JEDER Kachel unten -----------------

   Betreiber: „button und preis in der kachel unten, in jeder kachel."

   Bisher gelang das nur dort, wo der Name lang genug war. Der Grund ist
   derselbe wie beim Innenabstand: der tragende Wrapper hat KEINE KLASSE und
   ist NICHT das erste Kind (zwei `meta` stehen davor) -- die Regel mit
   `div:first-child` traf ihn nie. Ohne Flexspalte auf ihm wirkt kein
   `margin-top: auto` darunter.

   Jetzt: Wrapper ist Spalte ueber die volle Kachelhoehe, der Name dehnt
   sich, Preis und Knopf sitzen am Fuss -- unabhaengig von der Namenslaenge. */

.sgp-dazu-liste .sgp-zubehoer-kachel,
.sgp-dazu-liste > * {
    display: flex !important;
    flex-direction: column;
    height: 100%;
}

.sgp-dazu-liste .sgp-zubehoer-kachel > div,
.sgp-dazu-liste > * > div:not(.image-square-x):not(.price-range-item) {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    height: auto !important;
}

.sgp-dazu-liste .image-square-x { flex: 0 0 auto; }
.sgp-dazu-liste .article-name   { flex: 1 1 auto; }
.sgp-dazu-liste .price-range-item {
    flex: 0 0 auto !important;
    margin-top: auto !important;
}

/* Preis zurueckhaltend und nah am Knopf. Drei Stufen zurueck vom ersten
   Versuch (20 -> 17 -> 15 px): er soll lesbar sein, aber nicht mit dem Preis
   in der Kaufbox darueber konkurrieren. */
.sgp-dazu-liste .ps__,
.sgp-dazu-liste span[class^="ps_"] {
    font-size: .9375rem !important;
    font-weight: 600 !important;
    margin: 0 0 .2rem !important;
}

.sgp-dazu-liste form[class^="af_"],
.sgp-dazu-liste form[class*=" af_"] { gap: .2rem !important; }


/* Etwas mehr Hoehe je Kachel -- der Name bekommt damit seine dritte Zeile,
   ohne dass Preis und Knopf nach unten gedraengt werden. */
.sgp-dazu-liste { grid-auto-rows: minmax(21rem, auto); }


/* --- 80. Zubehör: Kategorien ohne Karte, an der sie fluchten -----------

   Abschnitt 61 rueckt Kategorien und Fussnote auf die Textlinie der
   Kennzeichen-Karte ein (23 px). Bei Zubehoer gibt es diese Karte nicht --
   der Steckbrief ist leer und ausgeblendet. Der Einzug richtet sich dort
   also an nichts aus und stand als einzige Abweichung im Kantenbild
   (gemessen bei 768 px: Kategorien 17, alles andere 20).

   Ohne Karte steht der Block auf der gemeinsamen Linie. */

/* ⚠ NACHTRAG 06.09. -- 0 war falsch. Betreiber: „bei den scheren stehen die
   kategorie-pills noch zu weit links (…) die linke kante der pille soll mit
   der kante des fliestexts stehen."

   Gemessen ueber sieben Breiten: Pille und `.product-description` sitzen auf
   DERSELBEN Box -- 7 / 7 bei 320, 20 / 20 bei 768, 10 / 10 bei 992, 110 / 110
   bei 1400. Der ganze Unterschied ist der Innenabstand, den die Beschreibung
   selbst traegt. Die Pille bekommt deshalb keinen eigenen, ausgerechneten
   Wert, sondern DENSELBEN -- und zwar aus denselben zwei Quellen:

       .5rem  unter 992 px   (Abschnitt 25, `.sgp-artikel-text
                              .product-description`)
       1rem   ab    992 px   (Abschnitt 14, dieselbe Regel)

   Damit kann die Kante nicht auseinanderlaufen: wer den Fliesstext
   verschiebt, muss beide Zahlen anfassen und sieht diesen Block. Ein
   gemessener Fixwert haette genau das nicht geleistet -- die 0 hier war so
   einer, und sie stimmte nur, solange die Beschreibung keinen Einzug hatte.

   Auf der Rosen- und Clematis-Seite greift das nicht: dort gibt es die
   Kennzeichen-Karte, `:not(:has(.sgp-kennzeichen-paar))` schliesst sie aus,
   und es bleibt bei den 23 px aus Abschnitt 61. */

.sgp-klasse-25 .sgp-artikel-kennzeichen:not(:has(.sgp-kennzeichen-paar)) .sgp-artikel-kategorien,
.sgp-artikel-kennzeichen:not(:has(.sgp-kennzeichen-paar)) .sgp-artikel-kategorien {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
}

@media (min-width: 992px) {
    .sgp-klasse-25 .sgp-artikel-kennzeichen:not(:has(.sgp-kennzeichen-paar)) .sgp-artikel-kategorien,
    .sgp-artikel-kennzeichen:not(:has(.sgp-kennzeichen-paar)) .sgp-artikel-kategorien {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ⚠ 3 px, nicht 0. Der allgemeine Ausgleich fuer diese Breite betraegt 2 px
   (Abschnitt 60); bei Zubehoer fehlt die Karte, und die Zelle beginnt drei
   Pixel weiter links. Gemessen: mit 0 stand sie bei 17, alles andere bei 20. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .sgp-klasse-25 .sgp-artikel-kennzeichen { padding-left: 3px !important; }
}


/* --- 81. Auf dem Telefon: Zeile statt Kachel -------------------------

   Betreiber, 06.09.: „ich will das zubehör einzeilig, sauber gesetzt, links
   ein kleineres bild, dann name, darunter eine zeile preis / kaufen (…)
   preis und kaufen sollen eher rechtsbündig stehen."

   Bei 320 px waren die Kacheln 147 px breit -- zwei Spalten, in denen ein
   Name wie „FELCO 2/3 F-Tech - beschichtete Klinge" dreizeilig steht und der
   Preis an der Kante klebt. Als Zeile ueber die volle Breite ist derselbe
   Inhalt ruhiger zu lesen und braucht weniger Hoehe.

   Aufbau: Bild links ueber beide Zeilen, Name oben rechts, darunter Preis
   und Knopf am rechten Rand. Kein neues Markup -- dieselben drei Bausteine,
   anders angeordnet. */

@media (max-width: 575.98px) {
    .sgp-dazu-liste {
        grid-template-columns: 1fr !important;
        gap: .5rem !important;
    }

    .sgp-dazu-liste > * > div:not(.image-square-x):not(.price-range-item) {
        display: grid !important;
        grid-template-columns: 84px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: .75rem;
        align-items: start;
        padding: .6rem !important;
    }

    .sgp-dazu-liste .image-square-x {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 84px !important;
        border-radius: .375rem;
    }

    .sgp-dazu-liste .article-name {
        grid-column: 2;
        grid-row: 1;
        padding: 0 !important;
        -webkit-line-clamp: 2;
        align-self: start;
    }

    .sgp-dazu-liste .price-range-item {
        grid-column: 2;
        grid-row: 2;
        padding: .4rem 0 0 !important;
        margin: 0 !important;
    }

    /* Preis und Knopf in EINER Zeile, am rechten Rand. */
    .sgp-dazu-liste form[class^="af_"],
    .sgp-dazu-liste form[class*=" af_"] {
        flex-direction: row !important;
        align-items: center;
        justify-content: flex-end;
        gap: .6rem !important;
    }

    .sgp-dazu-liste form > div { width: auto !important; }

    .sgp-dazu-liste .ps__,
    .sgp-dazu-liste span[class^="ps_"] {
        width: auto !important;
        margin: 0 !important;
        white-space: nowrap;
    }

    .sgp-dazu-liste form button,
    .sgp-dazu-liste .sgp-zubehoer-kaufen {
        width: auto !important;
        padding: .35rem .9rem !important;
        white-space: nowrap;
    }

    /* Die feste Kachelhoehe gilt hier nicht -- die Zeile ist so hoch wie ihr
       Inhalt. */
    .sgp-dazu-liste { grid-auto-rows: auto !important; }
    .sgp-dazu-liste > * { height: auto !important; }
}


/* --- 82. Die Zeile so flach wie möglich -------------------------------

   Betreiber: „versuche die höhe der zeilen so klein wie möglich zu halten."
   Gemessen waren 135 px je Zeile. Was daran Luft war:

   · das Bild mit 84 px  ->  64, es ist eine Marke, kein Motiv
   · Innenabstand .6 rem  ->  .45
   · Name zweizeilig      ->  bleibt, aber enger gesetzt
   · Abstand ueber der Preiszeile .4 rem -> .25
   · der Knopf war so hoch wie in der Kachel -> flacher

   Zusammen rund ein Drittel weniger, ohne dass etwas naeher zusammenrueckt,
   als es lesbar ist. */

@media (max-width: 575.98px) {
    .sgp-dazu-liste > * > div:not(.image-square-x):not(.price-range-item) {
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: .6rem;
        padding: .45rem !important;
    }

    .sgp-dazu-liste .image-square-x { width: 64px !important; }

    .sgp-dazu-liste .article-name,
    .sgp-dazu-liste .article-name span {
        font-size: .875rem !important;
        line-height: 1.25 !important;
    }

    .sgp-dazu-liste .price-range-item { padding-top: .25rem !important; }

    .sgp-dazu-liste .ps__,
    .sgp-dazu-liste span[class^="ps_"] { font-size: .875rem !important; }

    .sgp-dazu-liste form button,
    .sgp-dazu-liste .sgp-zubehoer-kaufen {
        padding: .25rem .8rem !important;
        font-size: .8125rem !important;
    }

    .sgp-dazu-liste { gap: .4rem !important; }
}


/* --- 83. Die Zeile ist so hoch wie ihr Bild --------------------------

   Betreiber: „also nur so hoch wie das bild, den rest kompakt daneben."

   Damit bestimmt das Bild die Hoehe und nicht der Text. Rechts bleiben
   64 px fuer zwei Zeilen: Name (eine Zeile, gekuerzt) und darunter Preis
   und Knopf. Beides zusammen misst rund 46 px und steht mittig neben dem
   Bild.

   Der Name wird dadurch frueher gekuerzt -- der vollstaendige steht eine
   Antippung entfernt auf der Artikelseite, und vierzehn flache Zeilen sind
   besser zu ueberfliegen als vierzehn hohe. */

@media (max-width: 575.98px) {
    .sgp-dazu-liste > * > div:not(.image-square-x):not(.price-range-item) {
        grid-template-rows: auto auto;
        align-content: center;
    }

    /* Das Bild gibt die Hoehe vor. */
    .sgp-dazu-liste .image-square-x {
        grid-row: 1 / span 2;
        align-self: center;
    }

    /* Der Name: eine Zeile, dann Auslassung. */
    .sgp-dazu-liste .article-name,
    .sgp-dazu-liste .article-name span {
        -webkit-line-clamp: 1 !important;
        line-height: 1.3 !important;
    }

    .sgp-dazu-liste .article-name { align-self: end; padding-bottom: .15rem !important; }

    .sgp-dazu-liste .price-range-item {
        align-self: start;
        padding-top: 0 !important;
    }
}


/* --- 84. Preis und Knopf stehen wirklich nebeneinander ---------------

   Nachgemessen: `.price-range-item` war 75 px hoch, obwohl Preis und Knopf
   zusammen 27 px brauchen. Der Grund: der Preis liegt NICHT im Formular,
   sondern als Geschwister daneben -- mein `flex-direction: row` am Formular
   konnte die beiden also gar nicht nebeneinander bringen.

   Der gemeinsame Behaelter ist `.price-range-item`. Er wird zur Zeile, und
   damit stimmt auch die Hoehe: Bild 64, rechts Name 21 und Preiszeile 27. */

@media (max-width: 575.98px) {
    .sgp-dazu-liste .price-range-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: flex-end;
        gap: .6rem;
        height: auto !important;
        min-height: 0 !important;
    }

    .sgp-dazu-liste .price-range-item > * { margin: 0 !important; }

    .sgp-dazu-liste .ps__,
    .sgp-dazu-liste span[class^="ps_"] {
        line-height: 1.2 !important;
        align-self: center;
    }

    /* Der Wrapper darf nicht hoeher werden als sein Bild. */
    .sgp-dazu-liste > * > div:not(.image-square-x):not(.price-range-item) {
        grid-template-rows: auto auto !important;
        align-content: center;
    }
}


/* --- 85. Die 75-px-Zeile ---------------------------------------------

   Der Wrapper meldete `grid-template-rows: 20.58px 75px 0px 0px` -- vier
   Zeilen statt zwei, und die zweite 75 px hoch, obwohl ihr einziger
   sichtbarer Inhalt (das Kaufformular) 27 px misst. Die ueberzaehligen
   Zeilen entstehen aus den verborgenen Kindern (Kurztext, „=>mehr"), die
   zwar `display: none` tragen, aber im Raster weiter eine Spur ziehen,
   sobald mehr Kinder als Zeilen da sind.

   `min-content` fuer beide Zeilen und `grid-auto-rows: 0` fuer alles
   weitere: dann bestimmt der Inhalt die Hoehe und nichts sonst. */

@media (max-width: 575.98px) {
    .sgp-dazu-liste > * > div:not(.image-square-x):not(.price-range-item) {
        grid-template-rows: min-content min-content !important;
        grid-auto-rows: 0 !important;
    }

    .sgp-dazu-liste .price-range-item {
        align-self: start !important;
        height: auto !important;
    }

    /* Verborgene Kinder ganz aus dem Raster nehmen. */
    .sgp-dazu-liste .zubehoer-short,
    .sgp-dazu-liste .price-range-item > a:last-child {
        display: none !important;
        position: absolute !important;
    }
}


/* --- 86. Die zweite Rasterzeile bekommt ein Mass ---------------------

   `min-content` half nicht: der Preis-Kasten meldet 75 px als sein
   Mindestmass, obwohl sein einziger sichtbarer Inhalt 27 px misst -- die
   verborgenen Geschwister (Kurztext, „=>mehr") zaehlen bei der Berechnung
   offenbar mit, auch abgeschaltet.

   Statt der Ursache weiter nachzugehen, bekommt die Zeile das Mass, das sie
   braucht: 30 px. Zusammen mit der Namenszeile (21) und dem Innenabstand
   (2 x 7) ergibt das 65 -- also genau die Hoehe des Bildes. Damit ist die
   Zeile so flach, wie der Betreiber sie wollte, und bleibt es auch, wenn
   der Preis einmal laenger ist. */

@media (max-width: 575.98px) {
    .sgp-dazu-liste > * > div:not(.image-square-x):not(.price-range-item) {
        grid-template-rows: 21px 30px !important;
        align-content: center;
    }

    .sgp-dazu-liste .price-range-item {
        height: 30px !important;
        min-height: 0 !important;
        max-height: 30px !important;
        align-items: center !important;
        overflow: visible;
    }

    .sgp-dazu-liste form[class^="af_"],
    .sgp-dazu-liste form[class*=" af_"] { height: auto !important; }

    .sgp-dazu-liste form button,
    .sgp-dazu-liste .sgp-zubehoer-kaufen {
        padding: .2rem .75rem !important;
        line-height: 1.25 !important;
    }
}


/* --- 87. Der Nullfall: Einladung, Knopf und der Abschnitt danach ------

   Drei Befunde am Erfahrungsteil ohne Berichte, alle gemessen bei 320 px:

   1. DIE EINLADUNG ERBT EINE FREMDE ZEILENHOEHE. `line-height: 33px` bei
      einer 15-px-Schrift -- das ist die Zeilenhoehe der Bewertungszeile, in
      der sie steht. Meine eigene Angabe (1.45) verlor dagegen.

   2. TEXT UEBER DEM KNOPF. Die Einladung war 260 x 28 px, ihr Text aber
      dreizeilig -- er lief aus seinem Kasten heraus und ueber die
      Schaltflaeche. Ursache ist dieselbe: eine Zeilenhoehe, die nicht zur
      Schrift passt, und ein Kasten, der nur eine Zeile hoch gerechnet wurde.

   3. KEIN ABSTAND ZU „ZULETZT GESEHEN". Der folgende Block beginnt exakt
      dort, wo die Erfahrungen enden -- 6684 gegen 6684. Kein ungecleartes
      Float (er traegt `clear: both`), sondern schlicht kein Aussenabstand. */

.sgp-erster-bericht {
    line-height: 1.45 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: .15rem 0 !important;
}

.sgp-erster-bericht-zusatz { line-height: 1.45 !important; }

/* Zwischen Einladung und Schaltflaeche muss Luft bleiben, auch wenn beide
   in derselben Zeile beginnen. */
.ratings-summary.sgp-ohne-bewertungen {
    row-gap: .75rem !important;
    align-items: center;
}

.ratings-summary.sgp-ohne-bewertungen .sgp-erster-bericht { flex: 1 1 16rem; }

/* Und der Abschnitt danach bekommt denselben Abstand wie alle anderen. */
#product-ratings + .row,
#product-ratings + div { margin-top: 2.5rem !important; }

@media (max-width: 575.98px) {
    #product-ratings + .row,
    #product-ratings + div { margin-top: 2rem !important; }
}


/* --- 88. Wie viele Kacheln nebeneinander ------------------------------

   Betreiber, 06.09.: „nimm hier doch 2 kacheln je zeile, dann bei 768 3."

   Bis dahin bestimmte `auto-fill` mit 9 rem Mindestbreite die Zahl, und die
   fiel je nach Breite anders aus als gedacht: bei 576 px standen drei
   Kacheln zu 179 px -- kaum breiter als die 147 px bei 320, wo die Zeile
   ausdruecklich gewuenscht war.

   Jetzt ist die Zahl gesetzt statt gerechnet:

       bis 575 px   Zeile (Abschnitt 81)
       576 – 767    2 Kacheln
       ab 768       3 Kacheln
       ab 992       so viele, wie in die Kaufspalte passen (mind. 9 rem)
*/

@media (min-width: 576px) and (max-width: 767.98px) {
    .sgp-dazu-liste { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .sgp-dazu-liste { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}


/* --- 89. Der Preis steht auch in der Kachel rechts --------------------

   In der Zeilenform (bis 575 px) sitzt er rechts neben dem Knopf; in der
   Kachelform stand er links. Betreiber: „auch hier den preis rechtsbündig."

   Der Preis liegt in einem Behaelter im Formular -- rechtsbuendig muss also
   BEIDES sein, sonst zieht der Behaelter den Text wieder nach links. */

@media (min-width: 576px) {
    .sgp-dazu-liste .price-range-item,
    .sgp-dazu-liste form[class^="af_"],
    .sgp-dazu-liste form[class*=" af_"],
    .sgp-dazu-liste form > div {
        text-align: right !important;
        align-items: stretch;
    }

    .sgp-dazu-liste .ps__,
    .sgp-dazu-liste span[class^="ps_"] {
        display: block !important;
        width: 100% !important;
        text-align: right !important;
    }
}


/* Nachtrag zu 89: der Behaelter des Preises blieb im Flex-Formular 140 px
   breit (bei 251 px Formularbreite) -- `text-align: right` an ihm richtet
   dann nur innerhalb dieser 140 px aus. Er braucht die volle Breite. */
@media (min-width: 576px) {
    .sgp-dazu-liste form > div,
    .sgp-dazu-liste form > div > span {
        width: 100% !important;
        max-width: none !important;
        align-self: stretch;
    }
}


/* --- 90. Das Hauptbild springt beim Zeigen ---------------------------

   Betreiber: „hier schiebt das große bild beim hover nach rechts oben."

   Meine Regel aus Abschnitt 59 schrieb `translateX(-50%) translateY(-50%)`
   mit, weil Bilder in `.image-square` ueblicherweise so zentriert sind.
   Das Hauptbild ist es NICHT: gemessen `transform: none` im Ruhezustand --
   es sitzt absolut mit `left`/`top`. Die Verschiebung wurde ihm damit
   HINZUGEFUEGT statt erhalten, und es sprang um seine halbe Groesse.

   Skaliert wird deshalb der Rahmen (`a.image-square`), nicht das Bild. Er
   traegt kein eigenes Transform, und `#article-detail-image` schneidet mit
   `overflow: hidden` ab. Damit ist es gleichgueltig, wie das Bild darin
   positioniert ist -- der Fehler kann so nicht wiederkommen. */

/* ⚠ HIER STAND `#article-detail-image img { transform: none !important }`
   -- OHNE Breitengrenze, und das war ab 992 px ein Fehler. Bei 768 px
   gemessen stimmte die Voraussetzung („das Hauptbild traegt kein
   Transform"): dort setzt Abschnitt 17 `top: 0; left: 0` dazu. Ab 992 px
   faellt dieser Block weg, der Bestand stellt auf `left: 50%; top: 50%` um
   -- und das `none` loeschte das Gegenstueck `translate(-50%, -50%)`. Das
   Bild stand dauerhaft um 233 px (die halbe Rahmenbreite) nach rechts
   unten versetzt und lief unter `overflow: hidden` aus dem Rahmen.

   Nicht beim Zeigen. Immer. Gemessen bei 992 px:

       Rahmen  l 12   t 304   466x466
       Bild    l 245  t 537   left 233px  top 233px  transform none

   Es gibt hier nichts mehr zurueckzunehmen, weil Abschnitt 59 nichts mehr
   setzt. Die Zeile ist deshalb geloescht und nicht berichtigt.

   ⚠ NACHTRAG, EINE STUNDE SPAETER. Mit der Zeile ist auch ihr
   `transition: none !important` gefallen, und DAS wurde gebraucht.
   Betreiber: „bei dieser (oder einer anderen) ist es von links oben
   hereingefahren."

   Ursache: Abschnitt 50 legt `#article-detail .image-square img
   { transition: transform .5s }` -- gedacht fuer die Karussellbilder. Das
   Hauptbild liegt aber ebenfalls in `#article-detail` und wird mitgenommen.
   Solange es `transform: none` trug, war nichts zu animieren; seit es die
   Zentrierung `translate(-50%, -50%)` wieder hat, faehrt es beim Aufbau um
   seine halbe Groesse in die Lage.

   Gemessen an allen neun Breiten: `transition-property: transform,
   duration .5s` -- an JEDER, auch dort, wo das Bild gar nicht bewegt wird.

   Der Uebergang wird hier abgeschaltet, das Transform NICHT angefasst. Das
   ist der Unterschied zur geloeschten Zeile: sie tat beides. */

#article-detail-image img,
#article-detail-image .image-square img {
    transition: none !important;
}

#article-detail-image .image-square {
    display: block;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
    transform-origin: center center;
}

#article-detail-image:hover .image-square { transform: scale(1.02); }

@media (prefers-reduced-motion: reduce) {
    #article-detail-image .image-square { transition: none; }
    #article-detail-image:hover .image-square { transform: none; }
}


/* --- 91. Die klebende Namenszeile faehrt unter den Header ------------

   Betreiber, 06.09.: „das sticky fährt aber unter den header."

   Gemessen bei 320/390/576/768/900 px, nachdem der Header wirklich
   eingerastet war (Foundation fixiert ihn erst nach echten Scroll-
   Ereignissen -- ohne die sieht eine Messung ihn gar nicht):

       Header          0..84   z-index 10000
       Namenszeile    84..126  z-index   500

   Sie grenzen aneinander, aber der Header gewinnt jeden Streit. Sobald sich
   beim Scrollen etwas um wenige Pixel verschiebt -- und beim Einrasten tut
   es das -- verschwindet die Zeile dahinter.

   Auf grossen Schirmen steht die Leiste laengst auf 9100 (Abschnitt 28); die
   mobile Zeile bekommt denselben Wert. Ueberdecken kann sie den Header
   nicht: sie beginnt dort, wo er endet. */

@media (max-width: 991.98px) {
    .product-name-wrapp { z-index: 9100 !important; }
}


/* --- 92. Foundation raus, Bootstrap rein --------------------------------

   Betreiber, 06.09.: „zaehle die foundation-klassen, ersetze sie mit
   bootstrap so dass es 1:1 gleich rendert."

   GEZAEHLT: 64 Vorkommen, 18 verschiedene Klassen, in meinen drei Vorlagen
   (`commerceArticleNew.html`, `commerceArticleInListZubehoer.html`,
   `commerceAppArticleInList.html`). Die Huellen sind nicht dabei -- sie
   gehoeren CC-1 und CC-3.

   ⚠ DER TAUSCH GEHT NICHT UEBERALL, UND DAS SIEHT MAN NICHT.

   Bootstrap ist in diesem Baum auf `.sgp-ui` praefigiert: jede Regel heisst
   `.sgp-ui .row`, `.sgp-ui .col-12`. Meine Vorlage oeffnet diese Huelle erst
   in Zeile 90 und schliesst sie in 679. SIEBEN der Stellen liegen
   ausserhalb:

       #article-detail            Zeile   2
       .product-name-wrapp        Zeile  11
       #product-attributes        Zeile 682
       #product-facts-secondary   Zeile 711
       .ratings-summary           Zeile 728
       a.button.primary           Zeile 761
       #product-collateral        Zeile 962

   Ein `col-12` an diesen Elementen waere WIRKUNGSLOS -- keine Fehlermeldung,
   kein leeres Feld, nur eine Spalte ohne Innenabstand. Gemessen mit
   `e.closest('.sgp-ui')`, nicht geschlossen aus der Einrueckung.

   Sie bekommen deshalb eigene Klassen. Das ist kein Rueckschritt: die
   Deklarationen sind Foundations eigene, Zeile fuer Zeile aus
   `sgp-basis.css` uebernommen, damit „1:1" auch wirklich 1:1 heisst und
   nicht „sieht aehnlich aus".

   Innerhalb der Huelle wurde echtes Bootstrap gesetzt (`col-12`, `col-6`,
   `col-md-6`, `row g-0`). Das ist dort tragfaehig, weil das Theme Bootstraps
   Fuge bereits auf Foundations Mass gestellt hat -- nachgesehen, nicht
   angenommen:

       .sgp-ui .row { --bs-gutter-x: 0.875rem }          = Foundations .4375rem
       @media (min-width:40em) … { 1.25rem }             = Foundations .625rem
       .sgp-ui .row { max-width: 75rem; margin: 0 auto }  = Foundations .row

   EINE ABWEICHUNG BLEIBT, mit Absicht: `medium-6` schaltet bei 40em
   (640 px), Bootstraps `col-md-6` bei 768. Zwischen 640 und 767 stehen die
   beiden Felder im Bewertungsformular jetzt untereinander statt nebeneinander.
   Bootstrap hat keinen 640er Haltepunkt; ihn mit einer eigenen Media-Query
   nachzubauen hiesse, Foundation unter neuem Namen weiterzufuehren. */

/* Foundation: .column,.columns{width:100%;float:left;padding:0 .4375rem} */
.sgp-spalte {
    width: 100%;
    float: left;
    padding-left: .4375rem;
    padding-right: .4375rem;
}

/* Foundation: @media print,screen and (min-width:40em){padding:0 .625rem} */
@media (min-width: 40em) {
    .sgp-spalte {
        padding-left: .625rem;
        padding-right: .625rem;
    }
}

/* Foundation: .medium-9{width:75%} ab 40em */
@media (min-width: 40em) {
    .sgp-spalte-9 { width: 75%; }
}

/* Foundation: .show-for-small-only -- sichtbar NUR unter 40em.
   Die Originalregel lautet
       @media screen and (max-width:0em),screen and (min-width:40em)
   und der erste Zweig trifft nie; wirksam ist allein der zweite. */
@media (min-width: 40em) {
    .sgp-nur-klein { display: none !important; }
}

/* Foundation: .hide-for-small-only{display:none} unter 39.99875em */
@media (max-width: 39.99875em) {
    .sgp-ab-mittel { display: none !important; }
}


/* --- 93. Verhaeltnis des Hauptbilds: QUADRATISCH ----------------------

   Stand 06.09.2026, Entscheidung des Betreibers:

       „ok, alles quadratisch, eventuell entscheide ich das spaeter.
        fuer den launch heute aber: quadratisch !"

   HIER STAND EINE 4:3-FASSUNG, ein paar Minuten lang. Sie ist entfernt, aber
   ihre Messwerte stehen hier -- damit die Frage, wenn sie wiederkommt, nicht
   noch einmal von vorn erarbeitet werden muss.

   WAS 4:3 GEBRACHT HAETTE, gemessen an /rosen/beetrosen/heinz-winkler.html:

       768 px   Quadrat 724x724  Preis y 1318  |  4:3 724x543  Preis y 1137
       991 px   Quadrat 947x947                |  4:3 947x710
       Gewinn: 181 px bei 768, 237 px bei 991 -- der Weg zum Preis.

       Auf dem Schirm: bei gleicher Scrollposition waren mit 4:3 Miniaturen,
       Sortenart und Wuchshoehe schon zu sehen, wo das Quadrat noch nichts
       als Bild zeigte.

   WAS ES GEKOSTET HAETTE: alle acht Produktfotos der Probeseite sind
   1200x1200 -- nachgezaehlt, ohne Ausnahme. Ein 4:3-Rahmen zeigt also nicht
   mehr vom Bild, er schneidet oben und unten je 12,5 % weg. Ein Viertel des
   Bildes gegen 181 bis 237 px Weg.

   ⚠ UND DIE FALLE, DIE DABEI SICHTBAR WURDE -- sie gilt fuer JEDEN kuenftigen
     Versuch mit einem anderen Verhaeltnis. Es genuegt NICHT, den Rahmen auf
     `padding-bottom: 75%` zu stellen. Gemessen mit genau diesem einen Eingriff:

         Rahmen 724x543   Bild gerendert 724x543   Quelle 1200x1200
         Verhaeltnis natuerlich 1,000   gerendert 1,333   ->  VERZERRT

     Das Bild wird dann GESTAUCHT, nicht beschnitten: der Bestand gibt ihm
     Rahmengroesse und `object-fit: fill`, und fuellen heisst dehnen. Bei einer
     Bluetennahaufnahme sieht man das praktisch nicht -- der Betreiber hat es
     erfragt („aber nicht verzerren !"), bevor es gemessen war. Wer das
     wiederaufnimmt, braucht zwingend:

         object-fit: cover;  object-position: center;
         width/height 100%,  min-width/min-height 0,  transform: none

     und eine Pruefung, die das GERENDERTE Verhaeltnis gegen das NATUERLICHE
     der Datei stellt. Die Boxgroesse allein beweist nichts.

   ES GILT ALSO DER BESTAND, und hier steht mit Absicht keine Regel:
   `.image-square` ist ueber `padding-bottom: 100%` quadratisch, das Bild
   fuellt es ueber `min-width`/`min-height: 100%` und ist mit
   `translate(-50%, -50%)` zentriert. Eine Bauart fuer alle Breiten, keine
   Naht -- siehe Abschnitt 90, wo genau so eine Naht 233 px Versatz erzeugt
   hat. */