/*
 * Produktseite — eigene Komponentenklassen, Präfix mes-
 * ====================================================
 *
 * WARUM EIGENE KLASSEN UND NICHT BOOTSTRAP:
 * Bootstrap 4.0.0 hängt global in includes/header_css.inc.php:51 und trägt Kopf, Menü, Filter
 * und Warenkorb — die Produktseite kann es nicht allein loswerden. Sie benutzt deshalb nur noch
 * das RASTER und bringt ihre Komponenten selbst mit. `card`, `btn`, `modal` aus Bootstrap
 * kommen hier nicht mehr vor: genau die ersetzt der Entwurf ohnehin. Sind irgendwann alle
 * Seiten so weit, schrumpft bootstrap.min.css (144.877 B) auf bootstrap-grid.min.css
 * (34.243 B) — oder fällt ganz weg.
 *
 * WARUM DER PRÄFIX:
 * Daneben liegen 123 KB gewachsenes CSS in einem konkatenierten Bündel. Ein eigener Präfix ist
 * die einzige Zusicherung, dass sich beides nicht in die Quere kommt — in keine Richtung.
 *
 * AUFBAU: Token oben, danach Komponenten in der Reihenfolge der Seite. Keine ID-Selektoren,
 * kein !important, keine Verschachtelung über zwei Ebenen.
 *
 * ZWEI AUSNAHMEN VOM !important-VERBOT, und beide stehen an ihrer Stelle begründet: die
 * eingeblendete Kaufleiste gegen Bootstraps `[hidden] { display: none !important }`, und der
 * Titel der Hinweiskarte gegen `css/style.css:117` (`h2 { font-size: 1.5rem !important }`).
 * Gegen ein globales !important hilft keine Spezifität, nur ein Gegengewicht.
 */

.mes-pdp {
    /* Farben aus dem Entwurf. Petrol ist die Hausfarbe (theme-color #4b839a im Kopf). */
    --mes-tinte: #1b2227;
    --mes-tinte-leise: #6b7780;
    --mes-petrol: #2f6478;
    --mes-petrol-hell: #eef3f5;
    --mes-signal: #e2670a;
    --mes-signal-hell: #fdeee2;
    --mes-gruen: #2e7d32;
    --mes-linie: #dfe4e7;
    --mes-flaeche: #ffffff;
    --mes-flaeche-highlight: #e6e6e6;
    --mes-linie-highlight: #9ea4a8;

    --mes-abstand: 16px;
    --mes-radius: 8px;
    /* Was oben frei bleiben muss: die Kaufleiste, sobald sie einblendet. Steht hier an einer
       Stelle, weil Sprungmarken (mes-nav) und die klebende Bühne denselben Wert brauchen. */
    --mes-sprungabstand: 88px;

    color: var(--mes-tinte);
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ------------------------------------------------------------------ Kopf */

.mes-pdp__kopf {
    padding-bottom: var(--mes-abstand);
    margin-bottom: calc(var(--mes-abstand) * 1.5);
    border-bottom: 1px solid var(--mes-linie);
}

.mes-pdp__titel {
    /* Im Entwurf läuft die Überschrift über die volle Breite, ÜBER beiden Spalten -- anders als
       heute, wo sie in der Aufteilung steckt. */
    margin: 0 0 4px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    text-wrap: pretty;
}

/* Die Zeile unter dem Titel: erst die Serie, dann die Artikelnummer.

   DIE RANGFOLGE IST DIE AUSSAGE. Die Nummer ist ein Beleg -- man liest sie, wenn man anruft
   oder reklamiert. Die Serie ist ein WEG zu dem, was dazu passt, und Wege gehoeren nach vorn.
   Vorher stand die Nummer allein in dieser Zeile und die Serie darunter. */
.mes-kennung {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    margin: 6px 0 0;
}

/* Kein eigener Absatz mehr, sondern ein Teil dieser Zeile -- und sie bricht nicht um, sondern
   rutscht bei mehreren Serien als Ganzes in die naechste Zeile. Eine zerteilte Artikelnummer
   kann man nicht vorlesen. */
.mes-pdp__artnr {
    color: var(--mes-tinte-leise);
    font-size: 13px;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ Serie

   Der Weg zu dem, was zum Artikel passt -- Stuehle zum Tisch, Pfosten zum Zaunelement. Er steht
   im Kopf, weil sich die Frage beim BETRACHTEN stellt und nicht beim Verlassen der Seite.

   ALS PLAETTCHEN WIE DIE FILTER-VERWEISE unten, aber in Petrol statt in Grau: es ist derselbe
   Art von Verweis (eine Filterseite), nur der wichtigste davon. Die gemeinsame Form haelt die
   Seite zusammen, die Farbe hebt ihn heraus -- ein zweiter Knopf im Stil des Kaufknopfes waere
   Wettbewerb um die Aufmerksamkeit, die dem Kaufen gehoert. */
.mes-serien__wort {
    color: var(--mes-tinte-leise);
    font-size: 13px;
}

/* Leiser als beide Nachbarn: er trennt, er gliedert nicht. */
.mes-kennung__trenner {
    color: var(--mes-linie-highlight);
    font-size: 13px;
}

.mes-serie {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    padding: 5px 12px;
    border: 1px solid var(--mes-petrol);
    border-radius: 999px;
    color: var(--mes-petrol);
    font-size: 13px;
    text-decoration: none;
}

.mes-serie__name {
    font-weight: 600;
}

.mes-serie__zahl {
    color: var(--mes-tinte-leise);
    font-size: 12px;
}

/* Wie bei den Kacheln: kein Blau, keine Unterstreichung -- die Flaeche antwortet.
   `a.mes-serie:hover` mit Elementnamen, weil Bootstraps `a:hover` sonst gewinnt. */
a.mes-serie:hover,
a.mes-serie:focus-visible {
    background: var(--mes-petrol-hell);
    color: var(--mes-petrol);
    text-decoration: none;
}

/* ---------------------------------------------------------------- Aufbau */

.mes-pdp__haupt {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--mes-abstand) * 1.5);
    align-items: start;
}

@media (min-width: 768px) {
    .mes-pdp__haupt {
        /* Bildbühne links, Kartensäule rechts (Entwurf 2a) -- aber nicht 1,9 zu 1.

           Bei diesem Verhältnis war die linke Spalte am Deckel des Shops (1470 px Inhalt)
           947 Pixel breit. Eine höhenbegrenzte Bühne kann das nicht füllen: bei 480 Pixeln
           Höhe belegt das Medianbild (4:3) 640 Pixel. Der Rest wurde zur toten Fläche
           zwischen Bild und Kaufbox.

           1,45 zu 1 gibt die überzählige Breite der Kaufsäule: 855 zu 590 am Deckel, 811 zu
           560 bei 1440. Was dann noch übrig ist, liegt SYMMETRISCH um das Bild im Rahmen und
           liest sich als Innenabstand statt als Lücke. */
        grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
    }
}

/* Die rechte Spalte ist keine Karte, sondern eine SÄULE aus mehreren. */
.mes-saeule {
    display: grid;
    gap: var(--mes-abstand);
}

.mes-karte {
    padding: var(--mes-abstand);
    border: 1px solid var(--mes-linie);
    border-radius: var(--mes-radius);
    background: var(--mes-flaeche);
}

/* ------------------------------------------------------------- Bildbühne */

/* Die Buehne ist auf dem Telefon quadratisch und auf dem Schreibtisch gedeckelt.

   QUADRAT AUF DEM TELEFON, weil dort das Bild der Held ist und senkrechter Platz nichts kostet
   -- man scrollt ohnehin. 37,5 Prozent der Erstbilder sind quadratisch; ein flacherer Rahmen
   wuerde sie unnoetig verkleinern.

   AUF DEM SCHREIBTISCH 4:3 UND GEDECKELT. Das Quadrat machte die Buehne bei 1440 px 898 Pixel
   hoch, waehrend die Kaufsaeule daneben bei 458 endete -- 651 Pixel Leere. Und es war die
   falsche Form: gemessen an 544 Erstbildern liegen 58,8 Prozent quer, nur 3,7 Prozent hoch, und
   der Median ist genau 4:3. Der Deckel folgt dem Bildschirm (52vh), damit auf einem flachen
   Notebook nicht doch wieder alles Wichtige unter die Kante rutscht.

   Groesser als 480 waere ohnehin sinnlos: die Auslieferung passt jedes Bild in ein 1000er
   Quadrat ein (SimpleImage::bestFit), und die gelieferte Hoehe liegt im Median bei 750 Pixeln.
   Wer genauer hinsehen will, oeffnet die Lightbox -- darauf weist die Pille im Bild hin. */
.mes-buehne__rahmen {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--mes-linie);
    border-radius: var(--mes-radius);
    background: var(--mes-flaeche);
    overflow: hidden;
}

/* Der Rahmen fuellt seine Spalte -- die Hoehe kommt aus drei Grenzen, die kleinste gewinnt:

     75cqw   das 4:3-Verhaeltnis der Spalte. Ist die Spalte schmal (Tablet, geteiltes Fenster),
             waere eine feste Hoehe zu viel und liesse oben und unten Leere.
     52vh    der Bildschirm. Auf einem flachen Notebook soll nicht alles Wichtige unter die
             Kante rutschen.
     480px   der Nutzen. Die Auslieferung passt jedes Bild in ein 1000er Quadrat ein
             (SimpleImage::bestFit), die gelieferte Hoehe liegt im Median bei 750 -- mehr
             Rahmen brauchte niemand. Wer genauer hinsehen will, oeffnet die Lightbox.

   `cqw` und nicht `vw`, weil die Spaltenbreite gemeint ist, nicht die Fensterbreite; dafuer
   traegt `.mes-buehne` `container-type`. Und KEIN `aspect-ratio` mit `max-height`: sobald der
   Deckel dort greift, rechnet der Browser die BREITE aus dem Verhaeltnis zurueck (gemessen 624
   statt 898 Pixel) und der Rahmen steht linksbuendig in einer halbleeren Spalte. */
@media (min-width: 768px) {
    .mes-buehne {
        container-type: inline-size;

        /* DIE BUEHNE BLEIBT STEHEN, waehrend die Kaufsaeule weiterlaeuft.

           Die Saeule ist IMMER die laengere Spalte -- ueber alle 20 Artikel des Routen-Regex
           gemessen liegt sie zwischen 123 und 458 Pixel darueber, im Mittel 232. Das laesst
           sich nicht wegrechnen: die Buehne hoeher zu machen war ja gerade der Fehler, den wir
           behoben haben, und die Angaben in der Saeule werden alle gebraucht.

           Aber der Leerraum ist erst beim SCROLLEN sichtbar -- im ersten Bild reicht die Buehne
           bis 832 Pixel, die Kante liegt bei 900. Genau dann fuellt ihn das Bild selbst: es
           begleitet den Kunden durch Ausfuehrung, Menge und Merkmale, statt oben wegzurutschen.
           Dafuer muss die Spalte auf volle Zeilenhoehe gehen (`align-self`), sonst hat das
           Kleben keinen Weg. */
        position: sticky;
        top: var(--mes-sprungabstand, 88px);
    }

    .mes-pdp__links {
        align-self: stretch;
    }

    .mes-buehne__rahmen {
        aspect-ratio: auto;
        height: min(75cqw, 52vh, 480px);
    }
}

/* Die Bahn: alle Bilder nebeneinander, eines je Ansicht, mit Einrasten. So blättert die Bühne
   ohne jedes Skript und ohne Obergrenze für die Bildanzahl (gemessenes Maximum: 37). */
.mes-buehne__bahn {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.mes-buehne__bahn::-webkit-scrollbar {
    display: none;
}

/* Das Seitenverhaeltnis sitzt am RAHMEN, nicht am Blatt: so bleibt die Buehne immer gleich hoch
   (kein Springen beim Blaettern), und das Bild darf trotzdem seine eigene Groesse behalten.
   Das Blatt nimmt schlicht die Hoehe des Rahmens an -- ein eigenes `aspect-ratio` hier wuerde
   den Deckel des Rahmens ueberfahren und das Bild unten abschneiden. */
.mes-buehne__blatt {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Bezugsrahmen fuer die Unterschrift: sie gehoert zu DIESEM Bild, nicht zur Buehne. */
    position: relative;
}

/* DIE BILDUNTERSCHRIFT -- rechtlich relevanter Text, kein Schmuck.

   „Die Dekoration ist nicht mit im Lieferumfang enthalten" grenzt ab, was der Kunde bekommt.
   Gemessen tragen 15.178 Bilder bei 6.713 aktiven Artikeln eine solche Zeile. Sie stand bisher
   nur in der Lupe (`data-footer`) -- also erst nach einem Klick, den niemand machen muss.

   IM BLATT, NICHT UNTER DER BUEHNE: eine Zeile unter der Buehne muesste dem gewaehlten Bild
   folgen, und das kann nur ein Skript. Faellt es aus, stuende dort fuer jedes Bild die
   Unterschrift des ersten -- bei einer Abgrenzung des Lieferumfangs waere das schlimmer als
   keine Angabe.

   Gemessen sind die Texte kurz: 51 Zeichen im Mittel, 235 im laengsten Fall. Der Streifen
   bleibt damit ein bis drei Zeilen hoch. */
.mes-buehne__unterschrift {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, .9);
    color: var(--mes-tinte);
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
}

/* NIE VERGROESSERN. Ein 480 Pixel breites Bild auf 945 Pixel aufgeblasen ist unscharf, und
   genau das tat `width: 100%`. Jetzt gilt: passt es hinein, steht es in seinen eigenen Pixeln;
   ist es groesser als die Buehne, wird es verkleinert. */
.mes-buehne__bild {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.mes-buehne__bild--leer {
    display: grid;
    place-items: center;
    min-height: 280px;
    color: var(--mes-tinte-leise);
    background: #f5f7f8;
}

/* Zählerpille OBEN rechts im Bild.

   Sie stand unten rechts, wo jetzt die Bildunterschrift liegt. Zwei Dinge uebereinander waeren
   der Kompromiss gewesen, bei dem der rechtlich relevante Text der Verlierer ist -- also weicht
   die Pille. Oben links stehen die Marken, oben rechts war frei. */
.mes-buehne__pille {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 1;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(27, 34, 39, .72);
    color: #fff;
    font-size: 12px;
    pointer-events: none;
}

/* --------------------------------------------------------------- Miniaturen */

.mes-miniaturen {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.mes-miniaturen__eintrag {
    flex: 0 0 auto;
    display: block;
    padding: 2px;
    border: 1px solid var(--mes-linie);
    border-radius: 6px;
    background: var(--mes-flaeche);
}

.mes-miniaturen__eintrag--aktiv,
.mes-miniaturen__eintrag:hover {
    border-color: var(--mes-petrol);
}

.mes-miniaturen__eintrag img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

/* Abzeichen liegen ÜBER dem Bild, oben links -- so steht es im Entwurf. */
.mes-buehne__marken {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ------------------------------------------------------------- Abzeichen */

.mes-marke {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.mes-marke--rabatt {
    background: var(--mes-signal);
    color: #fff;
}

.mes-marke--hersteller {
    border: 1px solid var(--mes-linie);
    background: var(--mes-flaeche);
    color: var(--mes-tinte);
    font-weight: 600;
}

.mes-marke--sparen {
    background: var(--mes-signal-hell);
    color: var(--mes-signal);
}

/* ----------------------------------------------------------------- Preis */

.mes-preis__alt {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 2px;
    color: var(--mes-tinte-leise);
    font-size: 14px;
}

/* Wie bei `.mes-bahnknoepfe[hidden]`: verbirgt heute schon Bootstraps
   `[hidden] { display: none !important }`. Die Zeile steht trotzdem hier, weil `display: flex`
   darueber sonst staerker waere als die UA-Regel -- und weil dieser Fall haeufig ist: jeder
   Artikel ohne Nachlass rendert die Zeile verborgen, seit dem Rueckbau des Buendelvergleichs
   auch 54 der 219 aktiven Setartikel. Genau diese Abhaengigkeit hat schon einmal eine
   Ueberschrift verschwinden lassen. */
.mes-preis__alt[hidden] {
    display: none;
}

.mes-preis {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.mes-preis__stern {
    font-size: 16px;
    vertical-align: super;
}

.mes-preis__grund,
.mes-preis__steuer {
    margin: 4px 0 0;
    color: var(--mes-tinte-leise);
    font-size: 12px;
}

.mes-preis__keiner {
    margin: 0;
    color: var(--mes-tinte-leise);
    font-style: italic;
}

/* ------------------------------------------------------------- Kaufzeile */

/* Entwurf: Mengenwähler links, Warenkorb-Knopf daneben über den Rest der Breite. */
/* FLEX STATT RASTER, und der Grund ist die Zusammenstellung.

   Hier stand `grid-template-columns: auto minmax(0, 1fr)`. Bei einem Kombiartikel ist der
   Mengenwaehler aber ausgeblendet (`add_kombi_product` liest `buyAnzahl` gar nicht) -- und ein
   Raster behaelt seine Spalten, auch wenn niemand darin steht: der Kaufknopf rutschte in die
   ERSTE Spalte und wurde auf seine Textbreite geschrumpft, waehrend die zweite leer blieb.
   Gemessen an 30350: Knopf 169 px in einer 556 px breiten Zeile, 377 px daneben ungenutzt.

   Im Flex-Fluss verschwindet ein ausgeblendetes Kind ersatzlos, und der Knopf nimmt den Platz,
   der da ist -- mit Mengenwaehler wie ohne. */
.mes-kaufzeile {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin: var(--mes-abstand) 0 10px;
}

.mes-kaufzeile__knopf {
    flex: 1 1 auto;
    /* Nicht unter die eigene Beschriftung schrumpfen, wenn daneben der Waehler steht. */
    min-width: 0;
}

/* Wie `.mes-kombi__leer` und `.mes-laengen__leer`: der Satz erklaert einen abgeschalteten
   Kaufknopf und muss gefunden werden -- also Signalfarbe, nicht das Grau der Hinweise.
   Er erscheint nur nach einem Wechsel auf eine vergriffene Ausfuehrung. */
.mes-kaufzeile__sperre {
    margin: 6px 0 0;
    color: var(--mes-signal);
    font-size: 13px;
}

.mes-menge {
    display: grid;
    grid-template-columns: 36px 44px 36px;
    align-items: stretch;
    border: 1px solid var(--mes-linie);
    border-radius: 6px;
    overflow: hidden;
}

.mes-menge__knopf {
    border: 0;
    background: var(--mes-flaeche);
    color: var(--mes-tinte-leise);
    font: 400 18px/1 system-ui, sans-serif;
    cursor: pointer;
}

.mes-menge__knopf:hover {
    background: #f5f7f8;
    color: var(--mes-tinte);
}

.mes-menge__feld {
    border: 0;
    text-align: center;
    font: 600 15px/1 system-ui, sans-serif;
    /* Die Pfeilchen des Zahlenfeldes sind neben eigenen Knöpfen doppelt gemoppelt. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.mes-menge__feld::-webkit-outer-spin-button,
.mes-menge__feld::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* MINDESTHOEHE, damit die Knoepfe auch mit dem Finger zu treffen sind. Die Empfehlung fuer
   Schaltflaechen liegt bei 44 Pixeln; die Pfeilchen, die ein Zahlenfeld von sich aus mitbringt,
   messen etwa neun -- deshalb gibt es diese Komponente ueberhaupt. */
.mes-menge {
    min-height: 40px;
}

/* In Listen schmaler: dort steht das Feld neben Name und Preis, nicht allein in der Kaufzeile.
   Schmaler heisst NICHT kleiner -- die Hoehe bleibt fingerfreundlich. */
.mes-menge--schmal {
    grid-template-columns: 34px 40px 34px;
    min-height: 36px;
}

.mes-menge--schmal .mes-menge__knopf {
    font-size: 16px;
}

/* Eine feste Stueckzahl bekommt keine Knoepfe -- sie ist gepflegt unveraenderlich. Dieselbe
   Breite wie das Feld daneben, damit die Zeilen einer Liste ausgerichtet bleiben. */
.mes-menge__fest {
    display: inline-block;
    min-width: 40px;
    text-align: center;
    font: 600 15px/1.6 system-ui, sans-serif;
    color: var(--mes-tinte);
}

.mes-laedt {
    margin: 0 0 8px;
    color: var(--mes-tinte-leise);
    font-size: 13px;
}

.mes-kauflinks {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin: 14px 0 0;
    font-size: 13px;
}

.mes-kauflinks a {
    color: var(--mes-petrol);
    text-decoration: underline;
}

/* -------------------------------------------------------------- Schalter */

.mes-btn {
    display: inline-block;
    padding: 13px 20px;
    border: 1px solid transparent;
    border-radius: 6px;
    font: 700 15px/1.2 system-ui, sans-serif;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.mes-btn--haupt {
    background: var(--mes-signal);
    color: #fff;
}

.mes-btn--zweit {
    background: var(--mes-petrol);
    color: #fff;
}

/* Zweitrangige Aktion mit Rand statt Fläche -- der PayPal-Knopf im Entwurf. */
.mes-btn--rand {
    border-color: var(--mes-linie);
    background: var(--mes-flaeche);
    color: var(--mes-tinte);
    font-weight: 600;
}

.mes-btn--rand:hover {
    background: #f5f7f8;
}

/* PAYPAL: UMRISS IN IHRER FARBE, FLAECHE WEISS.

   Die Wiedererkennung kommt ueber die Farbe, nicht ueber eine Flaeche -- und genau darum geht es
   hier: der orange Knopf darueber ist die Hauptsache, dieser ist der Nebenweg. Zwei gleich laute
   Knoepfe untereinander hiessen fuer den Kunden erst einmal, sich entscheiden zu muessen, welcher
   der richtige ist.

   GEGEN EINE GETOENTE FLAECHE spricht ausserdem die Nachbarschaft: direkt darunter steht die
   petrolfarbene Zusagen-Box. Zwei getoente Flaechen uebereinander verwischen den Unterschied
   zwischen Handlung und Information.

   #003087 ist PayPals Dunkelblau. Anzumerken bleibt: PayPal macht fuer Bezahlknoepfe eigene
   Gestaltungsvorgaben (offizielle Knoepfe mit ihrem Logo). Dies hier ist ein eigener Knopf in
   ihrer Farbe, kein offizieller -- der saubere Weg waere PayPals aktuelle Bilddatei. Die im Shop
   liegenden (`/images/paypal_expresscheckout/`) sind von 2014 und zeigen das alte Logo. */
.mes-btn--paypal {
    border-color: #003087;
    color: #003087;
}

.mes-btn--paypal:hover {
    /* Beim Ueberfahren eine Spur Flaeche -- nur dann, und sehr hell. */
    background: #eef2fb;
}

.mes-btn--paypal:focus-visible {
    outline: 2px solid #003087;
    outline-offset: 1px;
}

.mes-btn--breit {
    display: block;
    width: 100%;
}

/* Ein abgeschalteter Knopf muss abgeschaltet AUSSEHEN. Ohne diese Regel bliebe der
   Set-Kaufknopf leuchtend orange, waehrend er auf nichts mehr reagiert. */
.mes-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ------------------------------------------------------------- Vertrauen */

.mes-haken {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.mes-haken li {
    padding-left: 22px;
    margin-bottom: 8px;
    position: relative;
}

.mes-haken li:last-child {
    margin-bottom: 0;
}

/* Als Zeile unter den Kaufknoepfen: die drei Zusagen nebeneinander auf hellem Petrolgrund.

   Der Grund ist kein Schmuck, sondern der Ersatz fuer die Karte, die sie vorher trug: ohne ihn
   waere die Zeile nur noch ein weiterer grauer Absatz zwischen zwei anderen und wuerde genau
   das nicht mehr tun, wofuer sie da ist. Sie steht deshalb in normaler Schriftfarbe, nicht in
   der leisen -- und die Haken bleiben gruen.

   Sie umbrechen frei: bei 528 Pixeln Innenbreite stehen sie auf zwei Zeilen, auf dem Telefon
   auf dreien. Das ist gewollt -- eine Zusage abzuschneiden waere schlimmer als ein Umbruch. */
.mes-haken--zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: var(--mes-abstand);
    padding: 10px 12px;
    border-radius: var(--mes-radius);
    background: var(--mes-petrol-hell);
    font-size: 13px;
}

.mes-haken--zeile li {
    margin-bottom: 0;
    padding-left: 18px;
}

/* ---------------------------------------------------------------- Setinhalt
 *
 * Was in einem Setartikel steckt. Ein Raster aus flachen Zeilen -- keine Karten mit Rahmen:
 * das ist eine Inhaltsangabe, keine Auswahl. Der Kunde entscheidet hier nichts, er sieht nur
 * nach. */
.mes-setinhalt {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 560px) {
    .mes-setinhalt {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 900px) {
    .mes-setinhalt {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.mes-setpos__flaeche {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--mes-linie);
    border-radius: var(--mes-radius);
    background: var(--mes-flaeche);
    color: var(--mes-tinte);
    text-decoration: none;
}

/* Nur die verlinkten Positionen reagieren -- eine nicht kaufbare Position ist ein <span> und
   soll nicht so tun, als koenne man sie anklicken. */
a.mes-setpos__flaeche:hover {
    border-color: var(--mes-petrol);
    text-decoration: none;
}

.mes-setpos__bildfeld {
    position: relative;
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
}

.mes-setpos__bild {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

/* Die Stueckzahl gehoert AUF das Bild, nicht daneben: sie beantwortet die Frage „wie oft ist
   das drin" genau dort, wo das Auge ohnehin hinsieht. */
.mes-setpos__menge {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--mes-tinte);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.mes-setpos__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.mes-setpos__name {
    font-size: 13px;
    line-height: 1.35;
}

/* WARUM diese Position nicht anklickbar ist. Zwei Zustaende, zwei Toene -- das ist der ganze
   Zweck: „nur im Set" ist eine Absicht und darf nicht nach Mangel aussehen, „nicht
   verfuegbar" ist einer und darf nicht nach Absicht aussehen. */
.mes-setpos__zustand {
    align-self: flex-start;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.mes-setpos__zustand--nurimset {
    background: var(--mes-petrol-hell);
    color: var(--mes-petrol);
}

.mes-setpos__zustand--nichtverfuegbar {
    background: #fdeceb;
    color: #7a1a15;
}

/* ------------------------------------------------------- Nebenwege im Kaufblock
 *
 * „Gratis-Muster" und „Sie haben Fragen?". Sie standen als vierter Eintrag in der
 * Zusagenzeile und lasen sich dadurch wie eine weitere Zusage. Jetzt eigene Zeile, und als
 * Plaettchen mit Rahmen: erkennbar anklickbar, aber ohne Flaeche, damit sie neben dem
 * Kaufknopf nicht mitreden. */
.mes-nebenwege {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.mes-nebenweg {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    padding: 7px 12px;
    border: 1px solid var(--mes-linie);
    border-radius: 999px;
    background: var(--mes-flaeche);
    color: var(--mes-petrol);
    /* NICHT als `font`-Kurzform: darin muss am Ende eine Schriftfamilie stehen, und `inherit`
       ist dort kein gueltiger Wert -- der Browser verwirft dann die GANZE Zeile, samt Groesse
       und Gewicht (nachgemessen: 15px/400 statt 13px/600). */
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.mes-nebenweg:hover {
    border-color: var(--mes-petrol);
    background: var(--mes-petrol-hell);
    color: var(--mes-petrol);
    text-decoration: none;
}

/* Mausklick ohne Rahmen, Tastatur mit -- wie ueberall auf dieser Seite. Bootstraps Reboot
   setzt `button:focus` global, siehe mes-nav.css. */
.mes-nebenweg:focus {
    outline: none;
}

.mes-nebenweg:focus-visible {
    outline: 2px solid var(--mes-petrol);
    outline-offset: 2px;
}

.mes-nebenweg__zeichen {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mes-haken li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--mes-gruen);
    font-weight: 700;
}

/* --------------------------------------------------------------- Fehler */

.mes-pdp--fehler {
    max-width: 40em;
    padding: calc(var(--mes-abstand) * 2) 0;
}

/* --------------------------------------------------------- Kopf, Bewertung */

.mes-pdp__kopfzeile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mes-abstand);
    align-items: flex-start;
    justify-content: space-between;
}

/* Die Sterne kommen aus dem eTrusted-Widget und bringen ihre eigene Groesse mit;
   hier wird nur der Platz reserviert, damit die Zeile beim Nachladen nicht springt. */
.mes-bewertung {
    min-height: 20px;
    cursor: pointer;
    font-size: 13px;
    text-align: right;
}

/* ------------------------------------------------------------- Rechtstexte */

.mes-rechtstext {
    margin-top: calc(var(--mes-abstand) * 1.5);
    padding: var(--mes-abstand);
    border: 1px solid var(--mes-linie);
    border-radius: var(--mes-radius);
    background: #fbfcfc;
    color: var(--mes-tinte-leise);
    font-size: 13px;
}

.mes-rechtstext div + div {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--mes-linie);
}

/* ------------------------------------------------- Lieferzeilen im Kaufblock */

.mes-lieferung {
    margin: 0 0 var(--mes-abstand);
    padding: 12px 0 0;
    border-top: 1px solid var(--mes-linie);
    list-style: none;
    font-size: 14px;
}

.mes-lieferung__zeile {
    position: relative;
    padding-left: 20px;
    margin-bottom: 6px;
}

.mes-lieferung__zeile:last-child {
    margin-bottom: 0;
}

.mes-lieferung__zeile::before {
    position: absolute;
    left: 0;
    width: 14px;
    text-align: center;
}

/* Der gruene Punkt steht NUR bei vorhandenem Lagerbestand -- die Zeile selbst erscheint
   ueberhaupt nur dann. Es gibt bewusst keine gelbe oder rote Zwischenstufe. */
.mes-lieferung__zeile--lager::before {
    content: "\25CF";
    color: var(--mes-gruen);
}

.mes-lieferung__zeile--versand::before {
    content: "\21E2";
    color: var(--mes-tinte-leise);
}

.mes-lieferung__zeile--abholung::before {
    content: "\2302";
    color: var(--mes-tinte-leise);
}

/* „Nur noch 5 Stueck verfuegbar!" -- der Restbestand eines Auslauf- oder
   Bestandsverkaufsartikels. Als EINZIGE der vier Zeilen faerbig und halbfett: sie ist keine
   Auskunft ueber den Normalfall, sondern der Hinweis, dass es diesen Artikel danach nicht
   mehr gibt. Signalfarbe statt Gruen -- gruen hiesse „alles in Ordnung", und das ist es
   nicht. */
.mes-lieferung__zeile--auslauf {
    color: var(--mes-signal);
    font-weight: 600;
}

.mes-lieferung__zeile--auslauf::before {
    content: "\26A0";
    color: var(--mes-signal);
}

/* Der Widerrufshinweis zur Sonderanfertigung steht IM Kundenoptionen-Block, direkt unter den
   Feldern, deren Ausfuellen ihn ausloest. Abgesetzt, aber nicht als Warnkasten: er ist eine
   Rechtsfolge, keine Fehlermeldung. */
.mes-kundenoptionen__widerruf {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--mes-linie);
    color: var(--mes-tinte-leise);
    font-size: 13px;
}

/* ------------------------------------------------ Zusammenstellung (Kombi)

   Eine Kombi ist eine Bestellung aus mehreren Zeilen. Die Liste steht deshalb wie eine
   Rechnung: Bild, Bezeichnung, Stueckzahl -- und die Stueckzahl rechts, wo man sie sucht. */
.mes-kombi {
    margin: var(--mes-abstand) 0;
}

.mes-kombi__liste {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--mes-linie);
}

.mes-kombi__zeile {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--mes-linie);
}

/* Ein abgeschaltetes Teil bleibt STEHEN, aber blass: es gehoert zur Zusammenstellung und
   wird trotzdem nicht mitbestellt. Verschwaende es, fehlte dem Kunden die Erklaerung, warum
   die Zusammenstellung anders aussieht als beworben. */
.mes-kombi__zeile--fehlt {
    opacity: .6;
}

.mes-kombi__bild {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.mes-kombi__bild--leer {
    display: block;
    border: 1px solid var(--mes-linie);
    border-radius: 4px;
    background: var(--mes-flaeche);
}

.mes-kombi__text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Der Name steht auf seiner eigenen Zeile -- das tat frueher `display:block` am Namen selbst.
   Jetzt tut es diese Huelle, damit das Warnkuerzel NEBEN dem Namen stehen kann und nicht
   darunter. Am Umbruch langer Namen aendert das nichts. */
.mes-kombi__namenzeile {
    display: block;
}

.mes-kombi__name {
    color: var(--mes-tinte);
}

a.mes-kombi__name:hover {
    text-decoration: underline;
}

/* Was ein Teil kostet. Die Zeile ist ein Flexkasten aus Bild | Text | Menge; der Preis kommt
   als VIERTES Kind dazu und bricht auf schmalen Schirmen unter die Menge, statt sie zu
   quetschen -- deshalb `flex-basis: 100%` erst im Umbruch und hier nur die rechte Ausrichtung. */
/* AUCH DIE PREISSPALTE IST FEST BREIT, und zwar aus demselben Grund wie die Mengenspalte: mit
   `flex: 0 0 auto` richtete sie sich nach ihrem laengsten Betrag, und weil sie rechts steht,
   schob sie die Mengenspalte je Zeile um bis zu 9 px hin und her (gemessen bei 30682:
   „198,90 EUR" gegen „22,90 EUR"). Jetzt stehen Stueckzahl, Mal-Zeichen und Betrag in allen
   Zeilen an derselben Stelle. 132 px fassen „1.234,56 EUR" samt Stern. */
.mes-kombi__preis {
    flex: 0 0 132px;
    margin-left: auto;
    text-align: right;
    font-size: 13px;
    line-height: 1.4;
}

.mes-kombi__streich {
    display: block;
    color: var(--mes-tinte-leise);
}

.mes-kombi__stueck {
    display: block;
    font-weight: 700;
    white-space: nowrap;
}

/* Das Mal-Zeichen gehoert zur Stueckzahl links, nicht zum Betrag rechts -- deshalb leiser
   gesetzt als der Preis. Es ist ein Rechenzeichen, keine Angabe. */
.mes-kombi__mal {
    font-weight: 400;
    color: var(--mes-tinte-leise);
}

.mes-kombi__grund,
.mes-kombi__zeilensumme {
    display: block;
    color: var(--mes-tinte-leise);
    white-space: nowrap;
}

/* Das hochgestellte a) b) am Teilenamen -- der Verweis auf den Warnkasten darueber. Es ist eine
   Pflichtangabe, also Signalfarbe: wer die Warnung sucht, muss die Zuordnung finden. */
.mes-kombi__warnung {
    margin-left: 2px;
    color: var(--mes-signal);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* Derselbe Buchstabe im Warnkasten. Ohne feste Breite, weil er nur ein bis zwei Zeichen hat --
   eine Spalte dafuer waere mehr Struktur, als die Sache traegt. */
.mes-warnhinweis__kurz {
    font-weight: 700;
}

.mes-kombi__fehlt {
    display: block;
    margin-top: 2px;
    color: var(--mes-signal);
    font-size: 13px;
}

.mes-kombi__auswahl {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
    font-size: 13px;
}

.mes-kombi__auswahlname {
    color: var(--mes-tinte-leise);
}

.mes-kombi__feld {
    padding: 4px 6px;
    border: 1px solid var(--mes-linie);
    border-radius: 4px;
    background: var(--mes-flaeche);
    color: var(--mes-tinte);
    font: inherit;
}

/* DIE MENGENSPALTE IST FEST BREIT, damit die Stueckzahlen einer Liste untereinander stehen --
   egal ob sie aenderbar ist (Stepper: 34 + 40 + 34 = 108 px plus Rahmen) oder gepflegt fest
   (nur die Zahl, 40 px). Mit `flex: 0 0 auto` richtete sich die Spalte nach ihrem Inhalt, und
   eine Liste aus festen und aenderbaren Teilen stand versetzt -- gemessen bei 30682 um 83 px.
   Die feste Zahl zentriert sich jetzt ueber derselben Stelle, an der sonst das Eingabefeld
   sitzt. */
.mes-kombi__menge {
    display: flex;
    flex: 0 0 110px;
    gap: 4px;
    justify-content: center;
    align-items: center;
}




.mes-kombi__hinweis {
    margin: 10px 0 0;
    color: var(--mes-tinte-leise);
    font-size: 13px;
}

/* Der Satz steht nur da, wenn der Kaufweg gesperrt ist -- dann aber in der Signalfarbe, nicht
   im Grau der Hinweise darueber. Er erklaert einen abgeschalteten Knopf und muss deshalb
   gefunden werden. */
.mes-kombi__leer {
    margin: 6px 0 0;
    color: var(--mes-signal);
    font-size: 13px;
}

/* ---------------------------------------------------- Mengenartikel (Längen)

   Eine Laengentabelle ist eine Bestellliste: je Zeile eine Laenge, eine Stueckzahl und ein
   Betrag. Sie steht im Kaufblock und damit in der schmalen rechten Spalte (ab 960 px
   `minmax(320px, 1fr)`) -- eine siebenspaltige Tabelle wie im Bestand passt dort nicht.

   DREI SPALTEN STATT SIEBEN, und nichts geht verloren: Stueckzahl | Laenge mit ihrer
   Verfuegbarkeit | Preis mit der Zeilensumme. Der Bestand loest dasselbe Platzproblem mit
   `mobileHide`/`mobileShow` -- also zwei Fassungen desselben Inhalts, die man beide pflegen
   muss. Hier ist es EINE, die mitwaechst. */
.mes-laengen {
    margin: var(--mes-abstand) 0;
}

.mes-laengen__titel {
    margin: 0;
    font-weight: 600;
}

.mes-laengen__liste {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--mes-linie);
}

.mes-laenge {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--mes-linie);
}

.mes-laenge__menge {
    flex: 0 0 auto;
}

.mes-laenge__text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Laenge links, Stueckpreis rechts -- das Paar, um das es in der Zeile geht. */
.mes-laenge__kopf {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
}

.mes-laenge__name {
    font-weight: 600;
}

/* Bestand und Lieferzeit stehen klein unter der Laenge -- sie entscheiden mit, sind aber nicht
   das, was der Blick zuerst sucht. Beide Angaben gehoeren der LAENGE, nicht dem Artikel. */
.mes-laenge__lage {
    display: block;
    color: var(--mes-tinte-leise);
    font-size: 13px;
    line-height: 1.35;
}

/* „darüber 2-3 Wochen" auf eine eigene Zeile: die erste sagt, was da ist und wann es kommt,
   die zweite, was fuer alles darueber gilt. In einem Zug gelesen verschwimmt das. */
.mes-laenge__nachlieferung {
    display: block;
}

/* Streichpreis und Stueckpreis bleiben zusammen und brechen nicht auseinander -- sonst stuende
   der durchgestrichene Betrag in einer Zeile und der gueltige in der naechsten, und die beiden
   liessen sich nicht mehr als Paar lesen. */
.mes-laenge__preise {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    align-items: baseline;
}

.mes-laenge__streichpreis {
    color: var(--mes-tinte-leise);
    font-size: 13px;
    white-space: nowrap;
}

.mes-laenge__stueckpreis {
    color: var(--mes-tinte-leise);
    white-space: nowrap;
}

/* Die Zeilensumme ist die Zahl, die zaehlt -- sie steht deshalb kraeftiger als der Stueckpreis
   darueber. Leer, solange die Stueckzahl 0 ist; die Zeilenhoehe kommt vom Mengenfeld daneben,
   das Einblenden verschiebt also nichts. */
/* Die Zeilensumme ist die Zahl, die zaehlt -- sie steht deshalb kraeftiger als der Stueckpreis
   darueber und rechts, wo auch die Gesamtsumme steht. Leer, solange die Stueckzahl 0 ist; ihre
   Zeile bleibt aber freigehalten, sonst waechst die Tabelle beim ersten Klick auf „+" und der
   naechste Klick geht daneben. */
.mes-laenge__summe {
    display: block;
    min-height: 1.5em;
    color: var(--mes-tinte);
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* DER STERN DARF DIESE ZEILENBOX NICHT AUFZIEHEN. Er steht ueberall `vertical-align: super`,
   und das vergroessert die Zeile: gemessen 30 statt 22,5 Pixel, sobald ein Betrag darin steht.
   Die freigehaltene Zeile war damit zu niedrig, und der Kaufknopf sprang beim Nachrechnen um
   neun Pixel. `position: relative` hebt den Stern genauso, ohne Wirkung auf das Layout --
   optisch identisch, nur ohne Sprung. */
.mes-laenge__summe .mes-preis__stern {
    position: relative;
    top: -.4em;
    /* Auch seine EIGENE Zeilenhoehe zaehlt: mit 16px und der geerbten Zeilenhoehe 1,5 spannt
       der Stern eine 24-Pixel-Zeile auf, die freigehaltene misst 22,5. Kleiner und mit
       `line-height: 1` bleibt er unter der Zeilenhoehe des Betrags -- und die Zeile aendert
       ihre Hoehe nicht mehr, wenn ein Betrag hineinkommt. */
    font-size: .8em;
    line-height: 1;
    vertical-align: baseline;
}

/* Click & Collect fuer die ganze Tabelle -- im Ton der Lieferzeilen unter dem Preis. */
.mes-laengen__abholung {
    margin: 8px 0 0;
    color: var(--mes-tinte-leise);
    font-size: 13px;
}

/* Die Gesamtsumme steht IMMER da, auch mit 0,00 EUR -- sie doppelt nichts (oben steht der
   Grundpreis je Meter) und springt deshalb auch nicht ins Bild, waehrend der Kunde auf „+"
   klickt. Dieselbe Flaeche wie `.mes-summe`, damit die Seite eine Sprache spricht. */
.mes-laengen__summe {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    justify-content: space-between;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: var(--mes-radius);
    background: var(--mes-petrol-hell);
}

.mes-laengen__summenwort {
    color: var(--mes-tinte-leise);
}

.mes-laengen__summenbetrag {
    font-size: 18px;
    font-weight: 600;
}

/* Wie `.mes-kombi__leer`: der Satz erklaert einen abgeschalteten Kaufknopf und muss gefunden
   werden -- also Signalfarbe, nicht das Grau der Hinweise. */
.mes-laengen__leer {
    margin: 6px 0 0;
    color: var(--mes-signal);
    font-size: 13px;
}

/* SEIN PLATZ BLEIBT, WENN ER GEHT -- und hier ist das anders als bei der Zusammenstellung.
   Eine Laengentabelle startet mit lauter Nullen, der Satz steht also von Anfang an da und
   verschwindet beim ERSTEN Klick auf „+". Gemessen sprang dabei alles darunter um 17 Pixel nach
   oben, der Kaufknopf eingeschlossen -- genau der Sprung, der bei der Kaufzeile schon einmal
   behoben wurde. `visibility` statt `display` haelt die Zeile frei und nimmt sie trotzdem aus
   dem Vorlesefluss.
   (Bei `.mes-kombi__leer` gibt es das Problem nicht: dort sind die Teile anfangs gewaehlt, der
   Satz erscheint erst, wenn der Kunde alles herausnimmt.)

   `!important` ist hier kein Gewaltmittel, sondern die einzige Moeglichkeit: Bootstrap setzt im
   Shop global `[hidden] { display: none !important }`, und ohne Gegengewicht faellt die Zeile
   trotz dieser Regel zusammen -- gemessen genau die 25 Pixel Sprung, um die es geht. */
.mes-laengen__leer[hidden] {
    display: block !important;
    visibility: hidden;
}

/* Auf schmalen Schirmen rutscht der Geldblock unter die Laenge, statt die Zeile zu quetschen:
   bei 320 px bleiben neben dem 112 px breiten Mengenfeld sonst 90 px fuer „395cm" UND
   „39,30 EUR". */

/* ------------------------------------------------------- Paketartikel (VPE)

   Ein Paketartikel wird in Paketen verkauft und in Quadratmetern gebraucht. Der Block steht
   ueber der Kaufzeile und beantwortet, was dort einzutragen ist -- er ist kein zweiter
   Kaufweg, sondern eine Umrechnung davor. Deshalb ruhig gehalten: Rahmen wie die
   Ausfuehrungswahl, keine eigene Flaeche, kein Signal. */
.mes-paket {
    margin: var(--mes-abstand) 0;
    padding: 12px;
    border: 1px solid var(--mes-linie);
    border-radius: var(--mes-radius);
    background: #fbfcfc;
}

.mes-paket__einheit {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.mes-paket__rechner {
    display: block;
    margin-top: 10px;
}

.mes-paket__frage {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
}

.mes-paket__eingabe {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mes-paket__feld {
    width: 8em;
    padding: 8px 10px;
    border: 1px solid var(--mes-linie);
    border-radius: 6px;
    background: var(--mes-flaeche);
    font: inherit;
}

.mes-paket__masseinheit {
    color: var(--mes-tinte-leise);
}

/* Die Antwort erscheint ohne Knopfdruck. Sie bekommt eine eigene Zeile und deren Hoehe bleibt
   freigehalten, damit das Erscheinen die Kaufzeile darunter nicht verschiebt -- dieselbe Regel
   wie bei der Zeilensumme der Laengentabelle. */
.mes-paket__ergebnis {
    display: block;
    min-height: 1.5em;
    margin-top: 6px;
    color: var(--mes-petrol);
    font-size: 13px;
    font-weight: 600;
}

/* ------------------------------------------------- Planungshilfe (Zaun)

   DIE SZENE IST DER KASTEN. Der Bestand legt die Zeichnung als HINTERGRUND ueber die ganze
   Flaeche und den Text darauf (`.productBanner { background: url(produktPageBanner.png) right
   bottom / 95% no-repeat }` mit `.productBanner p { max-width: 70% }`). Deshalb gibt es dort
   keine leere Flaeche, in der eine Figur klebt -- die Flaeche IST das Bild.

   FREIGESTELLT GING ES NICHT. Zwei Anlaeufe haben die Figur ausgeschnitten neben den Text
   gestellt, erst in die Ecke, dann auf eine eigene Buehne. Beides wirkt hingestellt, und zwar
   unabhaengig davon, wo sie steht: eine gezeichnete Person in einer sonst leeren, umrandeten
   Kachel ist ein Fremdkoerper zwischen Preis, Lieferzeit und Kaufknopf.

   DASS MAX UNTEN AUF HUEFTHOEHE ENDET, IST DER ANSCHNITT DER ZEICHNUNG und gewollt -- er steht
   damit IN der Flaeche, wie auf jedem Banner. Was nicht sein darf, ist der Anschnitt OBEN.

   DEN TEXT DIE HOEHE BESTIMMEN LASSEN, UND DAS BILD SICH FUEGEN. Die Karte bekommt keine
   Mindesthoehe und kein `aspect-ratio`: beides drueckt sie kuenstlich auf, und `aspect-ratio`
   liesse sie obendrein ihre BREITE aus der Hoehe ableiten (gemessen 430 px statt 320) und den
   Text unten herauslaufen. Stattdessen passt sich die Zeichnung an: `contain` legt sie ganz
   hinein, in der schmalen Spalte an der Breite ausgerichtet, in der weiten an der Hoehe.

   DAS IST ZUGLEICH DIE GROESSTE FIGUR, DIE OHNE ANSCHNITT GEHT. Max fuellt die Zeichnung in
   ihrer ganzen Hoehe; wo die Karte die Hoehe begrenzt, ist er so gross wie die Karte hoch.
   Groesser ginge nur, indem die Karte aufgedrueckt oder ihm die Kappe genommen wird.

   DAS GELB KAM NICHT VOM BILD. Die Zeichnung ist transparent; laut war die
   `alert-warning`-Flaeche, auf der sie lag. Auf der Petrolkarte bleibt sie unter sich, und der
   Garten laeuft nach links in die Kartenfarbe aus statt in Weiss.

   47 KB ALS WEBP statt 277 als PNG. Kann ein Browser kein WebP, faellt nur das Bild weg und die
   Karte steht als ruhige Petrolflaeche da -- Text und Knopf bleiben vollstaendig.

   ZWEI KLASSEN, WEIL DIE KASKADE ES VERLANGT: `.mes-karte--petrol` steht weiter unten im Blatt
   und setzt `background` in Kurzschreibweise -- das zieht jedes Hintergrundbild wieder auf
   `none`. Mit einer Klasse allein ist die Karte still leer. */
.mes-karte--petrol.mes-planungshilfe {
    background-image: url(/images/max/produktPageBanner.webp);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
}

/* DER TEXT WEICHT DER FIGUR AUS, nicht umgekehrt -- dasselbe Mittel wie im Bestand. Die Figur
   sitzt im rechten Viertel der Zeichnung; 70 Prozent lassen ihr Platz und geben dem Knopf in der
   schmalsten Karte immer noch 202 px, waehrend „Planung anfragen" samt Innenabstand 166 braucht.

   `> *` statt drei Klassen: hier stehen genau drei Kinder, und jedes von ihnen braucht dieselbe
   Schranke. Eine eigene Klasse je Kind waere dieselbe Aussage dreimal. */
.mes-planungshilfe > * {
    max-width: 70%;
}

/* ------------------------------------------------- Angaben zur Zaunplanung

   Was der Bestand als HTML-Klumpen an die Beschreibung haengt
   (`Product::getKonfiguratorDescription()`), steht hier als eigener Block: Gesamtansicht,
   Variante und die Stueckliste je Pfostenart. Betrifft 124 aktive Artikel. */
.mes-planung {
    margin-bottom: calc(var(--mes-abstand) * 1.5);
}

.mes-planung__titel {
    margin: var(--mes-abstand) 0 8px;
    font-size: 16px !important;   /* dasselbe Gegengewicht wie bei .mes-karte__titel */
    font-weight: 700;
}

.mes-planung__titel:first-child {
    margin-top: 0;
}

/* DER ROLLRAHMEN. Die volle Ansicht wird bis zu 7.883 Pixel breit; auf Seitenbreite geschrumpft
   waere sie ein 47 Pixel hoher Haarstrich. Also in natuerlicher Hoehe stehen lassen und
   waagerecht rollen -- so macht es der Bestand auch (`.konfiguratorKombiGesamtbild`), nur mit
   einem `margin-top: -50px`-Kniff, der hier nicht noetig ist. */
.mes-planung__gesamt {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--mes-linie);
    border-radius: var(--mes-radius);
    background: var(--mes-flaeche);
}

.mes-planung__gesamt img {
    display: block;
    width: auto;
    max-width: none;   /* sonst quetscht die Grundregel fuer Bilder den Streifen zusammen */
    height: auto;
    max-height: 420px;
}

/* Die Warnung steht im Reiter zwischen Bild und Variante und braucht dort ihren eigenen
   Abstand -- als Block VOR den Reitern hatte sie ihn von der Seite. */
.mes-planung__warnung {
    margin: 12px 0 0;
}

.mes-planung__pfosten {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--mes-linie);
    border-radius: var(--mes-radius);
}

.mes-planung__marker {
    margin-bottom: 8px;
    font-weight: 700;
}

.mes-planung__teile {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mes-planung__teil {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 6px 0;
}

.mes-planung__teil + .mes-planung__teil {
    border-top: 1px solid var(--mes-linie);
}

.mes-planung__bild {
    flex: 0 0 auto;
    width: 50px;
    height: auto;
}

/* Die Ausfuehrung steht unter dem Namen, nicht dahinter -- sonst laeuft die Zeile auf dem
   Telefon in die zweite Zeile, und dort steht sie ohne Bezug. */
.mes-planung__option {
    display: block;
    color: var(--mes-tinte-leise);
    font-size: 14px;
}

/* ------------------------------------------------------ Energielabel (EEK)

   Steht direkt unter der Steuerzeile und damit in Sichtweite des Preises -- die
   Energielabel-Verordnung verlangt genau das. Der farbige Klotz traegt die Klasse, daneben
   steht die Skala im Klartext: „A" allein ist keine Angabe, wenn offen bleibt, ob es das beste
   von sieben oder das drittbeste von neun ist. */
.mes-eek {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 6px 0 0;
    font-size: 14px;
}

/* Die Farbe kommt aus der Datenbank (`products_eek.color`), nicht aus dem Stilblatt -- sie
   gehoert zur Klasse und darf sich nicht mit dem Design verschieben. Weisse Schrift mit
   Kontur, weil die Skala von Dunkelrot bis Dunkelgruen reicht und beides tragen muss. */
.mes-eek__klasse {
    display: inline-block;
    min-width: 34px;
    padding: 2px 8px;
    border-radius: 3px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 0 2px rgba(0, 0, 0, .55);
}

.mes-eek__spektrum {
    color: var(--mes-tinte-leise);
}

/* Der Klotz IST der Auslöser -- das Label ist ein Bild, also führt das Bildzeichen dorthin.
   Ein Textverweis daneben („Energielabel ansehen") stand vorher hier und war zweimal dasselbe
   Ziel in einer Zeile. */
.mes-eek__klasse--auf {
    cursor: pointer;
    text-decoration: none;
}

.mes-eek__klasse--auf:hover,
.mes-eek__klasse--auf:focus-visible {
    /* Kein Farbwechsel: die Farbe GEHOERT zur Klasse und darf sich beim Zeigen nicht
       verschieben. Stattdessen ein Ring -- er sagt „anklickbar", ohne die Aussage zu faelschen. */
    box-shadow: 0 0 0 2px var(--mes-flaeche), 0 0 0 4px var(--mes-petrol);
}

/* Das Labelblatt ist hoch und schmal (Energielabel-Format). Es soll ganz sichtbar sein, ohne
   den Dialog ueber den Bildschirm hinauswachsen zu lassen -- deshalb die Hoehenbegrenzung
   statt einer Breitenangabe. */
.mes-eek__blatt {
    display: flex;
    justify-content: center;
}

.mes-eek__bild {
    max-width: 100%;
    max-height: 70vh;
    height: auto;
}

/* Der Musterversand steht in derselben Zeile wie der Musterpreis und darf nicht wie ein
   Nachsatz wirken -- er ist der Teil, den der Kunde bezahlt. */
.mes-muster__versand {
    color: var(--mes-tinte);
}

/* --------------------------------------------------- Kleine Ueberschriften */

.mes-ueberschrift-klein {
    margin: 0 0 10px;
    color: var(--mes-petrol);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ------------------------------------------------------- Merkmale-Karte */

/* Die Liste selbst ist `.mes-datenliste` -- DIESELBE Komponente wie in den technischen Daten.
   Hier steht nur, was die Karte davon abweichend braucht. */

/* Die letzte Zeile ohne Trennlinie: in einer Karte stuende sie sonst kurz ueber dem unteren
   Innenabstand und saehe aus wie ein abgeschnittener Eintrag. */
.mes-band .mes-datenliste__zeile:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.mes-band__hinweis {
    margin: 10px 0 0;
    color: var(--mes-tinte-leise);
    font-size: 14px;
}

.mes-band__hinweis::before {
    content: "\1F527\A0";
}

.mes-band__sprung {
    margin: 10px 0 0;
    font-size: 14px;
}

.mes-band__sprung a {
    color: var(--mes-petrol);
}

/* -------------------------------------------------------- Karte in Petrol */

.mes-karte--petrol {
    border-color: #cfdde3;
    background: var(--mes-petrol-hell);
}

/* `!important`, WEIL DAS THEMA ES IST: `css/style.css:117` setzt `h2 { font-size: 1.5rem
   !important }` fuer den ganzen Shop, und `css/style.css:23` stellt die Grundschrift auf 11pt --
   1,5 rem sind damit 22 px. Ohne Gegengewicht stuende die Karten-Ueberschrift dort; die 16 px,
   die hier frueher standen, haben nie gegolten, weil gegen ein globales !important keine
   Spezifitaet hilft. 18 px sind deutlich Ueberschrift ueber den 14 px des Textes und passen in
   der 380 px breiten Kaufspalte in eine Zeile. */
.mes-karte__titel {
    margin: 0 0 4px;
    font-size: 18px !important;
    font-weight: 700;
}

.mes-karte__text {
    margin: 0 0 12px;
    color: var(--mes-tinte-leise);
    font-size: 14px;
}

.mes-btn--petrol {
    background: var(--mes-petrol);
    color: #fff;
    text-align: center;
    text-decoration: none;
}

/* WEIL ER EIN LINK IST UND KEIN KNOPF. Bootstrap setzt global
   `a:hover { color: #0056b3; text-decoration: underline }`; ohne Gegenregel steht beim
   Ueberfahren gemessen rgb(0,86,179) auf rgb(47,100,120) -- ein Kontrast von 1,1:1, also
   praktisch unlesbar, dazu unterstrichen. Die uebrigen Kaufknoepfe sind <button> und deshalb
   nicht betroffen; dieser hier MUSS ein Link bleiben, weil er ohne JavaScript nach /kontakt
   fuehrt.

   DIE FLAECHE GIBT DIE RUECKMELDUNG, nicht die Schrift -- eine Spur dunkler als das Petrol.
   Weiss darauf hat 8,1:1 und bleibt damit ueber der Anforderung, genau wie die 6,5:1 im
   Ruhezustand. */
.mes-btn--petrol:hover,
.mes-btn--petrol:focus {
    background: #285566;
    color: #fff;
    text-decoration: none;
}

/* Der Rahmen in Tinte, nicht in Petrol: auf der eigenen Farbe waere er unsichtbar. */
.mes-btn--petrol:focus-visible {
    outline: 2px solid var(--mes-tinte);
    outline-offset: 2px;
}

/* Die Reiternavigation liegt als eigene Baukasten-Komponente in css/components/mes-nav.css.
   Hier steht nur noch der Abstand zum Block darueber. */

.mes-nav {
    margin-top: calc(var(--mes-abstand) * 2);
}

/* ---------------------------------------------------- Technische Daten */

.mes-datenspalten {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 calc(var(--mes-abstand) * 2.5);
}

@media (min-width: 700px) {
    .mes-datenspalten {
        grid-template-columns: 1fr 1fr;
    }
}

.mes-datengruppe {
    margin-bottom: var(--mes-abstand);
    break-inside: avoid;
}

.mes-datenliste {
    margin: 0;
}

.mes-datenliste__zeile {
    display: grid;
    grid-template-columns: minmax(0, 9em) minmax(0, 1fr);
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--mes-linie);
    font-size: 14px;
}

.mes-datenliste dt {
    margin: 0;
    color: var(--mes-tinte-leise);
    font-weight: 400;
}

.mes-datenliste dd {
    margin: 0;
}

.mes-pflichttext {
    margin-top: var(--mes-abstand);
    padding: 10px 12px;
    border-left: 3px solid var(--mes-petrol);
    background: var(--mes-petrol-hell);
    font-size: 14px;
}

.mes-fliesstext img {
    max-width: 100%;
    height: auto;
}

.mes-leer {
    color: var(--mes-tinte-leise);
    font-style: italic;
}

.mes-dokumente {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mes-dokumente li {
    padding: 8px 0;
    border-bottom: 1px solid var(--mes-linie);
}

.mes-dokumente__typ {
    margin-left: 8px;
    color: var(--mes-tinte-leise);
    font-size: 12px;
}

.mes-hersteller__logo {
    max-width: 160px;
    height: auto;
    margin-bottom: 12px;
}

.mes-hersteller__anschrift {
    margin: 0;
    font-style: normal;
    font-size: 14px;
}

/* -------------------------------------------------------- Beziehungsbloecke */

.mes-beziehung {
    margin-top: calc(var(--mes-abstand) * 2);
}

.mes-beziehung__titel {
    margin: 0 0 var(--mes-abstand);
    font-size: 20px;
    font-weight: 700;
}

/* Varianten: dreispaltiges Raster aus umrandeten Zeilen, Miniatur links. Kein Preis --
   das ist Navigation innerhalb der Serie, keine Kaufentscheidung. */
.mes-variantenraster {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 560px) {
    .mes-variantenraster {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 900px) {
    .mes-variantenraster {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mes-variante {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--mes-linie);
    border-radius: var(--mes-radius);
    color: var(--mes-tinte);
    font-size: 14px;
    text-decoration: none;
}

.mes-variante:hover {
    border-color: var(--mes-petrol);
}

.mes-variante__bild {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.mes-variante__text {
    text-decoration: underline;
}

/* Cross-Selling: waagerechte Bahn mit Einrasten statt Karussell-Bibliothek. */
/* Ein Filmstreifen: es sind immer gleich viele Kacheln zu sehen, der Rest liegt rechts daneben
   und wird gescrollt.

   `minmax(0, …)` war der Fehler. Die Null als Untergrenze erlaubt der Spur zu SCHRUMPFEN, und
   das Raster hat sie brav so weit zusammengedrueckt, bis alle zwoelf Kacheln in die Breite
   passten — gemessen 108 Pixel je Kachel, scrollWidth gleich clientWidth, also gar keine Bahn
   mehr, sondern eine lange gequetschte Reihe. Eine feste Spurbreite laeuft dagegen ueber und
   erzeugt genau das gewuenschte Scrollen. */
.mes-kachelbahn {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 46%;
    gap: var(--mes-abstand);

    /* PLATZ FUER DEN HOVER. `overflow-x: auto` macht die Bahn zum Scrollrahmen -- und der
       klemmt BEIDE Achsen, nicht nur die waagerechte. Ohne dieses Polster schnitt er beim
       Ueberfahren den angehobenen Rand der Kachel und ihren Schatten oben ab. */
    padding: 6px 0 10px;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /* Kein Scrollbalken. Er waere hier ohnehin wertlos: sobald Kacheln nachgeladen werden,
       aendert sich die Gesamtbreite und der Balken springt. Geblaettert wird ueber die beiden
       Knoepfe, gewischt wird auf dem Telefon -- beides funktioniert ohne sichtbaren Balken. */
    scrollbar-width: none;
}

.mes-kachelbahn::-webkit-scrollbar {
    display: none;
}

@media (min-width: 600px) {
    .mes-kachelbahn {
        /* drei Kacheln plus zwei Abstaende */
        grid-auto-columns: calc((100% - 2 * var(--mes-abstand)) / 3);
    }
}

@media (min-width: 1000px) {
    .mes-kachelbahn {
        /* fuenf Kacheln plus vier Abstaende -- die Zahl aus dem Entwurf */
        grid-auto-columns: calc((100% - 4 * var(--mes-abstand)) / 5);
    }
}

/* Kopfzeile mit den beiden Pfeilknoepfen rechts, wie im Entwurf. */
.mes-beziehung__kopf {
    display: flex;
    gap: var(--mes-abstand);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mes-abstand);
}

.mes-beziehung__kopf .mes-beziehung__titel {
    margin: 0;
}

.mes-bahnknoepfe {
    display: flex;
    gap: 8px;
}

/* Verbirgt heute schon `[hidden] { display: none !important }` aus Bootstrap. Diese Zeile
   steht trotzdem hier: sie hat mehr Gewicht als `.mes-bahnknoepfe { display: flex }` und
   traegt das Verhalten damit selbst, wenn Bootstrap eines Tages faellt. */
.mes-bahnknoepfe[hidden] {
    display: none;
}

.mes-bahnknopf {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--mes-linie-highlight);
    border-radius: 50%;
    background: var(--mes-flaeche-highlight);
    color: var(--mes-tinte);
    font: 400 18px/1 system-ui, sans-serif;
    cursor: pointer;
}

.mes-bahnknopf:hover:not(:disabled) {
    border-color: var(--mes-petrol);
    color: var(--mes-petrol);
}

.mes-bahnknopf:disabled {
    opacity: .35;
    cursor: default;
}

/* Der Pfeil erbt die Farbe des Knopfes (`stroke="currentColor"`), damit er beim Ueberfahren auf
   Petrol mitgeht und im abgeschalteten Zustand mit verblasst. 20 von 36 Pixeln: gross genug, um
   ihn als Pfeil zu erkennen, klein genug, dass der Kreis noch ein Kreis bleibt. */
.mes-bahnknopf__pfeil {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto;
}

.mes-kachel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--mes-linie);
    border-radius: var(--mes-radius);
    background: var(--mes-flaeche);
    color: var(--mes-tinte);
    scroll-snap-align: start;
    text-decoration: none;
}


/* DIE KACHEL IST EIN LINK, ABER SIE LIEST SICH ALS KARTE. Bootstrap faerbt und unterstreicht
   jeden Link beim Ueberfahren (`a:hover { color: #0056b3; text-decoration: underline }`,
   bootstrap.min.css). Mitten in einer Kachel sieht das nach einem Textlink aus, der es nicht
   ist -- und nach einem Fremdkoerper im Entwurf. Die eigene Regel hatte zwar die hoehere
   Spezifitaet, setzte aber nur die Rahmenfarbe; Farbe und Unterstreichung blieben damit
   Bootstrap ueberlassen. Beides steht jetzt ausdruecklich hier.

   STATTDESSEN HEBT SICH DIE GANZE KACHEL: Rahmen in Petrol, ein weicher Schatten und ein Pixel
   nach oben. Das sagt „anklickbar", ohne den Text zu veraendern. */
.mes-kachel,
.mes-planer {
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.mes-kachel:hover,
.mes-planer:hover {
    border-color: var(--mes-petrol);
    box-shadow: 0 4px 14px rgba(27, 34, 39, .10);
    transform: translateY(-1px);
    color: var(--mes-tinte);
    text-decoration: none;
}

/* Wer Bewegung abgestellt hat, bekommt den Rahmen und den Schatten -- aber keinen Sprung. */
@media (prefers-reduced-motion: reduce) {
    .mes-kachel,
    .mes-planer {
        transition: none;
    }

    .mes-kachel:hover,
    .mes-planer:hover {
        transform: none;
    }
}

.mes-kachel__bildfeld {
    position: relative;
    display: block;
}

.mes-kachel__bild {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.mes-kachel__marke {
    position: absolute;
    top: 6px;
    left: 6px;
}

.mes-kachel__name {
    font-size: 13px;
    line-height: 1.35;
    /* Zwei Zeilen, danach abgeschnitten -- sonst reisst eine lange Bezeichnung die ganze
       Bahn auseinander. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mes-kachel__preis {
    margin-top: auto;
    font-size: 16px;
    font-weight: 700;
}

.mes-kachel__alt {
    margin-right: 6px;
    color: var(--mes-tinte-leise);
    font-size: 13px;
    font-weight: 400;
}

.mes-kachel__grund {
    color: var(--mes-tinte-leise);
    font-size: 11px;
}

/* ------------------------------------------------------ Sticky-Kaufleiste
 *
 * Sie sitzt OBEN. Der Kaufcontainer verschwindet nach oben aus dem Bild; eine Leiste, die
 * daraufhin am unteren Rand auftaucht, wirkt wie ein zweites, fremdes Element. Oben liest sie
 * sich als das, was sie ist: der weggescrollte Kaufblock, der stehen bleibt.
 * Nebenbei loest das den Platzstreit am unteren Rand, wo .contactBoxFixed (z-index 999), das
 * Trusted-Shops-Abzeichen und der Cookiebot-Banner sitzen.
 */

.mes-stickyleiste {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 998;
    border-bottom: 1px solid var(--mes-linie);
    background: var(--mes-flaeche);
    box-shadow: 0 2px 12px rgba(27, 34, 39, .12);
}

.mes-stickyleiste__inhalt {
    display: flex;
    gap: 12px;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px var(--mes-abstand);
}

.mes-stickyleiste__bild,
.mes-stickyleiste__text {
    /* Mobil bleiben nur Preis und Knopf -- so steht es im Entwurf. */
    display: none;
}

@media (min-width: 768px) {
    .mes-stickyleiste__bild {
        display: block;
        width: 48px;
        height: 48px;
        object-fit: contain;
    }

    .mes-stickyleiste__text {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
}

.mes-stickyleiste__name {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mes-stickyleiste__zusatz {
    color: var(--mes-tinte-leise);
    font-size: 13px;
}

/* Was in den Korb geht: Ausfuehrung und Stueckzahl. Eine Spur kraeftiger als die Lieferzeile
   darunter -- es ist eine Angabe ueber die Bestellung, keine ueber den Artikel. */
.mes-stickyleiste__wahl {
    color: var(--mes-tinte);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mes-stickyleiste__preis {
    margin-left: auto;
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}

/* Am oberen Rand ist kein fremdes Element im Weg -- der Freiraum, den die Leiste unten fuer
   .contactBoxFixed und das Trusted-Shops-Abzeichen lassen musste, entfaellt. */
@media (max-width: 767px) {
    .mes-stickyleiste__inhalt {
        gap: 8px;
    }

    .mes-stickyleiste__preis {
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    /* Der Platz zwischen den beiden fremden Elementen ist knapp; der Knopf soll trotzdem in
       EINER Zeile stehen. Enger gesetzt statt umgebrochen -- „In den" ueber „Warenkorb" liest
       sich wie zwei Knoepfe. */
    .mes-stickyleiste .mes-btn {
        padding: 10px 10px;
        font-size: 13px;
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------ Zubehoer-Buendel */

.mes-buendel {
    margin-top: calc(var(--mes-abstand) * 2);
}

.mes-buendel__kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
}

.mes-buendel__kopfrechts {
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.mes-buendel__zaehler {
    color: var(--mes-tinte-leise);
    font-size: 13px;
}

/* Ein Textknopf, kein zweiter Handlungsknopf: die Auswahl ist eine Bequemlichkeit, der
   Kaufknopf unten bleibt der einzige, der auffällt. */
.mes-buendel__umschalter {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mes-petrol);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.mes-buendel__umschalter:hover {
    text-decoration: none;
}

/* Mausklick ohne Rahmen, Tastatur mit — wie überall auf dieser Seite. Bootstraps Reboot
   setzt `button:focus` global, siehe mes-nav.css. */
.mes-buendel__umschalter:focus {
    outline: none;
}

.mes-buendel__umschalter:focus-visible {
    outline: 2px solid var(--mes-petrol);
    outline-offset: 2px;
}

.mes-buendel__text {
    margin-bottom: var(--mes-abstand);
    color: var(--mes-tinte-leise);
    font-size: 14px;
}

.mes-buendel__raster {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 620px) {
    .mes-buendel__raster {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 980px) {
    .mes-buendel__raster {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Eine Position. Gewaehlt = petrolfarbener Rand und leichte Toenung; abgewaehlt bleibt sie
   sichtbar und anklickbar, nur zurueckgenommen -- sie verschwinden zu lassen waere ein
   Springen des Rasters bei jedem Haken. */
.mes-bpos {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "bild text"
        "bild fuss"
        "grund grund";
    gap: 4px 12px;
    align-items: start;
    padding: 12px 12px 12px 38px;
    border: 1px solid var(--mes-petrol);
    border-radius: var(--mes-radius);
    background: var(--mes-petrol-hell);
}

.mes-bpos--abgewaehlt {
    border-color: var(--mes-linie);
    background: var(--mes-flaeche);
    opacity: .65;
}

.mes-bpos__haken {
    position: absolute;
    top: 14px;
    left: 12px;
    width: 18px;
    height: 18px;
    accent-color: var(--mes-petrol);
    cursor: pointer;
}

.mes-bpos__bild {
    grid-area: bild;
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: var(--mes-flaeche);
    border-radius: 6px;
}

.mes-bpos__text {
    grid-area: text;
    min-width: 0;
}

.mes-bpos__name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.mes-bpos__option {
    margin-top: 6px;
    max-width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--mes-linie);
    border-radius: 5px;
    background: var(--mes-flaeche);
    font: inherit;
    font-size: 13px;
}

/* KundenOptionen einer Buendelposition. Sie stehen nur bei ZUBEHOER sichtbar da -- beim
   Hauptartikel spiegelt das Skript die Felder der Kaufbox in verborgene Felder, sonst muesste
   man dieselbe Gravur zweimal tippen. */
.mes-bpos__kolabel {
    display: block;
    margin-top: 8px;
    color: var(--mes-tinte-leise);
    font-size: 13px;
}

.mes-bpos__kofeld {
    width: 100%;
    max-width: 260px;
    padding: 6px 10px;
    border: 1px solid var(--mes-linie);
    border-radius: 6px;
    font: inherit;
    font-size: 14px;
}

.mes-bpos__kofeld:focus {
    border-color: var(--mes-petrol);
    outline: 2px solid var(--mes-petrol);
    outline-offset: -2px;
}

.mes-bpos__kogrenzen {
    margin-left: 6px;
    color: var(--mes-tinte-leise);
    font-size: 12px;
}

.mes-bpos__link {
    display: inline-block;
    margin-top: 4px;
    color: var(--mes-petrol);
    font-size: 12px;
}

.mes-bpos__fuss {
    grid-area: fuss;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}


.mes-bpos__preis {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.mes-bpos__grund {
    grid-area: grund;
    color: var(--mes-tinte-leise);
    font-size: 11px;
}

/* Summenleiste ueber die volle Breite. */
.mes-buendel__leiste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mes-abstand);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--mes-abstand);
    padding: var(--mes-abstand);
    border: 1px solid var(--mes-linie);
    border-radius: var(--mes-radius);
    background: #fbfcfc;
}

/* Waehrend der Server rechnet: die alten Zahlen bleiben stehen, aber sichtbar vorlaeufig.
   Sie zu leeren waere schlechter -- dann steht dort kurz gar kein Preis. */
.mes-buendel__leiste--rechnet [data-mes-artikelsumme],
.mes-buendel__leiste--rechnet [data-mes-versand],
.mes-buendel__leiste--rechnet [data-mes-gesamt] {
    opacity: .45;
}

.mes-buendel__aufstellung {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}

.mes-buendel__zeile,
.mes-buendel__hinweis {
    color: var(--mes-tinte-leise);
    font-size: 13px;
}

.mes-buendel__gratis {
    color: var(--mes-gruen);
    font-weight: 700;
}

.mes-buendel__summe {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: auto;
}

.mes-buendel__summenlabel {
    color: var(--mes-tinte-leise);
    font-size: 12px;
}

.mes-buendel__betrag {
    font-size: 22px;
    font-weight: 700;
    white-space: nowrap;
}

/* ------------------------------------------------------------- Warnhinweise */

.mes-warnhinweis {
    display: flex;
    gap: 12px;
    margin-top: var(--mes-abstand);
    padding: 12px 14px;
    border: 1px solid #f0d6b8;
    border-radius: var(--mes-radius);
    background: var(--mes-signal-hell);
    font-size: 14px;
}

.mes-warnhinweis__signal {
    flex: 0 0 auto;
    color: var(--mes-signal);
    white-space: nowrap;
}

.mes-warnhinweis__zeile {
    margin: 0 0 4px;
}

.mes-warnhinweis__kurz {
    margin-right: 4px;
    color: var(--mes-tinte-leise);
}

/* ---------------------------------------------------------------- Tag-Links */

/* Abstaende kommen von `.mes-beziehung`: der Block steht am Seitenende als Nachbar der
   Kachelbaender und soll denselben Rhythmus haben. */

.mes-tags__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mes-tag {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    padding: 5px 12px;
    border: 1px solid var(--mes-linie);
    border-radius: 999px;
    color: var(--mes-tinte);
    font-size: 13px;
    text-decoration: none;
}

.mes-tag:hover {
    border-color: var(--mes-petrol);
    color: var(--mes-petrol);
}

.mes-tag__zahl {
    color: var(--mes-tinte-leise);
    font-size: 12px;
}

/* ------------------------------------------------------- Ausfuehrung im Kaufblock */

.mes-ausfuehrung {
    margin-top: var(--mes-abstand);
}

.mes-ausfuehrung__label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
}

.mes-ausfuehrung__feld {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--mes-linie);
    border-radius: 6px;
    background: var(--mes-flaeche);
    font: inherit;
}

/* Die Beschreibung der Optionsgruppe (`products_options.beschreibung`). Sie steht nicht als
   Zierde da: bei 26206 lautet sie „Bitte zur gewaehlten Zaunserie auswaehlen" und ist die
   einzige Stelle, die dem Kunden sagt, wonach er sich richten soll. */
.mes-ausfuehrung__hinweis {
    margin: 0 0 6px;
    color: var(--mes-tinte-leise);
    font-size: 12px;
}

/* ----------------------------------------------------- Bildauswahl statt Auswahlliste
 *
 * Ein Raster statt einer Zeile: `auto-fill` mit Mindestbreite bricht von selbst um, sobald die
 * Spalte enger wird -- keine Bruchpunkte noetig. Vier Kacheln in der 556 px breiten Kaufsaeule,
 * zwei auf dem Telefon.
 *
 * 112 px Mindestbreite, nicht weniger: die Namen sind teils lang („Classic Anthrazit fuer alle
 * Zaunserien bis auf Rhombus" bei 26206), und schmalere Kacheln machen daraus fuenf Zeilen.
 *
 * Der Radioknopf bleibt im Baum (Tastatur, Vorlesesoftware, und das Formular braucht ihn),
 * ist aber unsichtbar. Die Markierung traegt die Kachel. */
.mes-ausfuehrung__bilder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 8px;
}

.mes-bildwahl {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    margin: 0;
    padding: 8px 6px;
    border: 1px solid var(--mes-linie);
    border-radius: 6px;
    background: var(--mes-flaeche);
    cursor: pointer;
    text-align: center;
}

.mes-bildwahl:hover {
    border-color: var(--mes-petrol);
}

.mes-bildwahl--aktiv {
    border-color: var(--mes-petrol);
    box-shadow: inset 0 0 0 1px var(--mes-petrol);
}

/* Nicht `display: none` -- damit verliert das Feld die Tastatur. Es bleibt bedienbar und
   unsichtbar. */
.mes-bildwahl__knopf {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Der Fokusring gehoert an die KACHEL, nicht an den verborgenen Knopf -- sonst sieht man beim
   Durchtabben nicht, wo man ist. */
.mes-bildwahl:has(.mes-bildwahl__knopf:focus-visible) {
    outline: 2px solid var(--mes-petrol);
    outline-offset: 2px;
}

.mes-bildwahl__bild {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 4px;
    object-fit: contain;
}

/* Werte ohne eigene Bilddatei stehen als leere Kachel daneben: der Bestand macht die ganze
   Gruppe zur Bildauswahl, sobald EIN Wert ein Bild hat. */
.mes-bildwahl__bild--leer {
    background: var(--mes-petrol-hell, #eef3f5);
}

.mes-bildwahl__name {
    font-size: 12px;
    line-height: 1.3;
    hyphens: auto;
}

/* ------------------------------------------------------------- KundenOptionen */

/* DIESER BLOCK IST EINE BEDINGUNG, KEINE BEIGABE: ohne seine Pflichtangaben bricht
   `checkCustomOptions()` den Kauf ab. Er stand als blasse graue Karte zwischen Ausfuehrung und
   Kaufzeile und war als Bedingung nicht zu erkennen -- wer sie uebersah, bekam beim Kaufklick
   ein Warnfenster und musste die Stelle suchen.

   EINE SIGNALKANTE STATT EINER SIGNALFLAECHE. Der Bestand setzt den ganzen Block weiss auf die
   Flaeche und darueber eine fette 11-pt-Zeile; das ist zu viel und sieht aus wie eine
   Fehlermeldung. Die Kante links plus die Ueberschrift in derselben Farbe findet das Auge
   ebenso -- und laesst der roten Fehlermarkierung eines falsch gefuellten Feldes den Vorrang,
   die sonst in einer bereits eingefaerbten Flaeche unterginge. */
.mes-kundenoptionen {
    margin-top: var(--mes-abstand);
    padding: 12px;
    border: 1px solid var(--mes-linie);
    border-left: 3px solid var(--mes-signal);
    border-radius: var(--mes-radius);
    background: #fbfcfc;
}

.mes-kundenoptionen__titel {
    margin: 0;
    color: var(--mes-signal);
    font-size: 13px;
    font-weight: 600;
}

.mes-kundenoptionen__pflichttext {
    margin: 2px 0 10px;
    color: var(--mes-tinte-leise);
    font-size: 12px;
}

/* Der Stern traegt seine Bedeutung im `title` -- als `<abbr>` liest ihn auch ein Screenreader
   vor, statt „Sternchen" zu sagen. Ohne Unterstreichung: die Vorgabe mancher Browser fuer abbr
   sieht hier wie ein Verweis aus. */
.mes-kundenoption__pflicht {
    color: var(--mes-signal);
    font-weight: 600;
    text-decoration: none;
    cursor: help;
}

.mes-kundenoption {
    margin-bottom: 10px;
}

.mes-kundenoption:last-child {
    margin-bottom: 0;
}

.mes-kundenoption__label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
}

.mes-kundenoption__feld {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--mes-linie);
    border-radius: 6px;
    background: var(--mes-flaeche);
    font: inherit;
}

/* Die Fehlermarkierung setzt products.js per addClassName(error) -- der Klassenname ist
   deshalb NICHT im mes-Namensraum, sonst faende das alte Skript sie nicht. */
.mes-kundenoption__feld.error {
    border-color: #c0392b;
    background: #fdf2f0;
}

.mes-kundenoption__grenzen,
.mes-kundenoption__hinweis {
    display: block;
    margin-top: 3px;
    color: var(--mes-tinte-leise);
    font-size: 12px;
}

/* Die Summe, sobald mehr als ein Stueck gewaehlt ist. Sie ist der Betrag, der wirklich in den
   Warenkorb wandert -- deshalb hervorgehoben und nicht als graue Nebenzeile. Der grosse Preis
   darueber bleibt der Stueckpreis. */
.mes-summe {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    justify-content: space-between;
    /* Oben und unten derselbe Abstand -- die Zeile sitzt zwischen Lieferzeile und Kaufzeile
       und darf an keiner Seite kleben. */
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: var(--mes-radius);
    background: var(--mes-petrol-hell);
}

.mes-summe__rechnung {
    color: var(--mes-tinte-leise);
    font-size: 13px;
}

.mes-summe__betrag {
    font-size: 22px;
    font-weight: 700;
    white-space: nowrap;
}

/* In der Sticky-Leiste steht dieselbe Angabe, nur enger: die Rechnung ueber dem Betrag. */
.mes-stickyleiste__rechnung {
    display: block;
    color: var(--mes-tinte-leise);
    font-size: 12px;
    font-weight: 400;
    text-align: right;
}


/* ------------------------------------------------------ Ausstellungsstueck */

.mes-marke--ausstellung {
    background: var(--mes-petrol);
    color: #fff;
}

/* Der Rabatt steckt schon im Preis; hier steht, woher er kommt. */
.mes-ausstellung {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-left: 3px solid var(--mes-petrol);
    background: var(--mes-petrol-hell);
    font-size: 13px;
}

.mes-ausstellung__kopf {
    margin: 0;
}

.mes-ausstellung__zusatz {
    margin: 2px 0 0;
    color: var(--mes-tinte-leise);
    font-size: 12px;
}

/* Die Abzugsrechnung: Verkaufspreis, darunter der Abschlag. Zwei ausgerichtete Spalten wie
   ueberall auf dieser Seite -- die Betraege stehen rechtsbuendig untereinander, damit man sie
   uebereinander lesen kann. */
.mes-abzug {
    margin: 6px 0 0;
}

.mes-abzug__zeile {
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.mes-abzug__zeile dt,
.mes-abzug__zeile dd {
    margin: 0;
}

.mes-abzug__zeile dd {
    font-variant-numeric: tabular-nums;
}

.mes-abzug__zeile--minus dd {
    color: var(--mes-petrol);
    font-weight: 600;
}

/* ------------------------------------------------------------- Zaunplaner */

.mes-planerliste {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 700px) {
    .mes-planerliste {
        grid-template-columns: 1fr 1fr;
    }
}

.mes-planer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--mes-linie);
    border-radius: var(--mes-radius);
    background: var(--mes-flaeche);
    color: var(--mes-tinte);
    text-decoration: none;
}

.mes-planer__name {
    font-size: 15px;
    font-weight: 600;
}

/* Die Vorschau zeigt, wie eine fertige Planung aussieht. Wiederholte Bilder sind Absicht:
   dreimal dasselbe Element heisst drei gleiche Zaunfelder.
 *
 * EINE HAARLINIE, KEIN ABSTAND. Die Bilder sind keine Einzelteile nebeneinander, sondern die
 * Zaunelemente der Planung -- aneinandergesetzt ergeben sie EINE Zaunreihe. 2 px Abstand
 * zerlegten die wieder in Kacheln; ganz ohne Abstand verschmelzen dunkle Elemente mit dunklem
 * Rahmen aber zu einem einzigen schwarzen Balken (nachgesehen an GroJaSolid Steckzaun
 * Anthrazitgrau: drei Felder, nicht mehr auseinanderzuhalten). 1 px trennt sie, ohne eine
 * Luecke zu behaupten -- die Kartenflaeche scheint als feine Fuge durch.
 *
 * Die Pfosten, die im Bestand dazwischen gehoeren, fehlen in der Pflege bewusst; fuer eine
 * Vorschau dieser Groesse. Sie braeuchten dieselbe Fuge.
 *
 * AUF EINER GRUNDLINIE. Alle Elementbilder haben dieselbe Leinwandhoehe (gemessen: 400 px bei
 * jeder von 400 Dateien der Stichprobe), die Breite wechselt (272, 141, 282 ...). Die Hoehe
 * traegt also den Massstab: ein 90er Feld ist auf der Leinwand halb so hoch wie ein 180er,
 * der Rest ist durchsichtig. Deshalb `align-items: flex-end` -- so stehen alle Elemente auf
 * derselben Linie, statt zu schweben. Die Linie darunter macht das sichtbar. */
.mes-planer__vorschau {
    display: flex;
    gap: 1px;
    align-items: flex-end;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;

    /* DER ZAUN STEHT AUF EINEM BODEN, angedeutet: heller Garten oben, ein Streifen Erde
       unten, dazwischen eine Grasnarbe. Vorher hing die Reihe in einer zu 73 % leeren Karte
       (gemessen: Zaunreihe 183 px in einer Karte von 693 px) und der Boden war eine nackte
       Rahmenlinie. Die Buehne fuellt die Breite, ohne dem Zaun die Aufmerksamkeit zu nehmen:
       alle Farben sind aus den Marken-Tokens abgeleitet und stark aufgehellt.

       Die 18 px unten sind das Erdreich. Es ist Innenabstand, kein eigenes Element -- der
       Kasten bleibt eine einzige Flaeche, die sich mit `overflow: hidden` sauber abschneiden
       laesst. */
    padding-bottom: 18px;
    background-image:
        /* Grasnarbe -- ein paar Halme, die auf der Erdkante sitzen. Bewusst ein winziges
           Muster: es wiederholt sich und kostet keine Bilddatei. */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='7'%3E%3Cpath d='M2 7C3 4.5 3 3 4 1M8.5 7C8.5 5 9.5 3 10.5 1.8M17 7C16 4.5 16 3 15 1.4M22 7C22 4.5 21 3.4 20 2.4' fill='none' stroke='%232e7d32' stroke-opacity='.34' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E"),
        linear-gradient(to bottom,
            #f6faf6 0,
            #f6faf6 calc(100% - 18px),
            rgba(46, 125, 50, .30) calc(100% - 18px),
            rgba(46, 125, 50, .30) calc(100% - 17px),
            #f1ebe2 calc(100% - 17px),
            #ece4d8 100%);
    background-repeat: repeat-x, no-repeat;
    background-position: 0 calc(100% - 17px), 0 0;
    background-size: 26px 7px, auto;
}

/* 88 statt 56 px: von der Leinwand sind bei einem 180er Feld nur rund drei Viertel gefuellt
   (gemessen 287 von 400 px), der Rest ist der Luftraum ueber dem Zaun. Bei 56 px blieben
   davon 40 px Zaun uebrig -- zu wenig, um zu erkennen, worum es geht. */
.mes-planer__vorschau img {
    /* NICHT schrumpfen. Der Kasten ist so breit wie die Karte; ohne diese Zeile quetschte
       Flexbox eine zu lange Reihe hinein, statt sie abzuschneiden -- aus einem Zaunfeld
       wuerde eine Latte. */
    flex: 0 0 auto;
    height: 88px;
    width: auto;
    max-width: none;

    /* KNAPP UEBER DIE KANTE SETZEN. Jedes Elementbild hat unter dem Zaun 15 px durchsichtige
       Leinwand (gemessen: 15 px bei 30 von 30 Dateien der Stichprobe, immer bei Hoehe 400).
       Bei 88 px Anzeigehoehe sind das 3,3 px -- ohne Ausgleich schwebte der Zaun genau so
       weit ueber der Grasnarbe.

       0 statt der rechnerischen -3px: so bleiben rund 3 px Grasnarbe unter dem Zaun sichtbar.
       Er steht dann IM Gras statt davor -- und die Halme verschwinden nicht hinter den
       Elementen. */
    margin-bottom: 0;
}

.mes-planer__knopf {
    align-self: flex-start;
    margin-top: auto;
    color: var(--mes-petrol);
    font-size: 13px;
    font-weight: 600;
}

.mes-planer__knopf::after {
    content: " \2192";
}