/* * 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: die Artikelnummer. Die Serie stand hier einmal mit drin und hat jetzt eine eigene Karte unter dem Kaufbereich (siehe „Serie" weiter unten). */ .mes-kennung { margin: 6px 0 0; } /* Sie bricht nicht um: eine zerteilte Artikelnummer kann man nicht vorlesen. */ .mes-pdp__artnr { color: var(--mes-tinte-leise); font-size: 13px; white-space: nowrap; } /* ---------------------------------------------------------------- Aufbau */ /* `minmax(0, 1fr)`, NICHT `1fr` -- und das ist der Unterschied zwischen heil und kaputt. `1fr` ist die Kurzform von `minmax(auto, 1fr)`, und dieses `auto` ist die MIN-CONTENT-Breite der Spalte. Sie kann also nicht schmaler werden als ihr breitestes Kind. Der Vorschaustreifen (`.mes-miniaturen`) ist eine Flexzeile mit `nowrap`; sein `overflow-x: auto` laesst ihn zwar selbst scrollen, nimmt der Spalte aber nicht die Mindestbreite. Ergebnis: die Spalte wurde so breit wie ALLE Miniaturen zusammen und schob die ganze Seite hinaus. WARUM ES NICHT ALLEN ARTIKELN PASSIERTE: erst ab etwa fuenf Bildern ist der Streifen breiter als ein Telefon. Gemessen bei 375 px Ansichtsbreite -- 4 Bilder (66013): 375 px, heil; 8 Bilder (30682): 568 px; 11 Bilder (58747): 777 px, also mehr als die doppelte Breite. AUF DEM SCHREIBTISCH FIEL ES NIE AUF, weil die Regel darunter fuer `min-width: 768px` von jeher `minmax(0, 1.45fr)` schreibt. Die Null stand also schon da, nur eine Zeile zu tief. */ .mes-pdp__haupt { display: grid; grid-template-columns: minmax(0, 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); } /* ------------------------------------------------------------------ Serie Der Weg zu dem, was zum Artikel passt -- Stuehle zum Tisch, Pfosten zum Zaunelement. In der Kaufkarte direkt unter den Ausfuehrungen (bloecke/serienwahl.twig). EINE ZEILE, KEIN BLOCK. Als ganzbreite, 48 Pixel hohe Rahmen in Petrol sahen die Verweise aus wie ein weiterer Knopf -- direkt ueber „In den Warenkorb" und zum Verwechseln nah am PayPal-Knopf darunter -- und schoben den Warenkorb bei zwei Serien um rund 140 Pixel vom Preis weg (57472). Jetzt: leise Ueberschrift links, die Serien daneben als Pillen, die nur bei Bedarf umbrechen; bei zwei Serien rund 35 Pixel. Die Stelle macht den Verweis findbar, die Form muss es nicht mehr. GRAUER RAHMEN, PETROLFARBENER NAME: der Name ist das Ziel und traegt die Farbe, der Rahmen zeigt nur „anklickbar". Erst beim Ueberfahren faerbt er sich. */ .mes-serienwahl { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mes-linie); } /* Direkt unter den Ausfuehrungen gehoert die Serie zu ihnen -- keine zweite Trennlinie. */ .mes-variantenwahl + .mes-serienwahl { margin-top: 10px; padding-top: 0; border-top: 0; } /* So leise wie „Weitere Ausfuehrungen verfuegbar" -- `!important` aus demselben Grund wie dort (`.mes-variantenwahl__titel`): `css/style.css:114` setzt jedes h2 auf 1.5rem. */ .mes-serienwahl__titel { margin: 0; font-size: 13px !important; font-weight: 600; } .mes-serienwahl__liste { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .mes-serienweg { display: inline-flex; gap: 6px; align-items: center; min-height: 34px; padding: 4px 10px 4px 12px; border: 1px solid var(--mes-linie); border-radius: 999px; color: var(--mes-petrol); font-size: 13px; line-height: 1.3; text-decoration: none; } .mes-serienweg__name { font-weight: 600; } /* Die Zahl bricht nicht um: „31 / Artikel" auf zwei Zeilen liest niemand als eine Angabe. */ .mes-serienweg__zahl { color: var(--mes-tinte-leise); font-size: 12px; white-space: nowrap; } .mes-serienweg__pfeil { flex-shrink: 0; width: 12px; height: 12px; } /* Wie bei den Kacheln: kein Blau, keine Unterstreichung -- die Flaeche antwortet. `a.mes-serienweg:hover` mit Elementnamen, weil Bootstraps `a:hover` sonst gewinnt. */ a.mes-serienweg:hover, a.mes-serienweg:focus-visible { border-color: var(--mes-petrol); background: var(--mes-petrol-hell); color: var(--mes-petrol); text-decoration: none; } /* ------------------------------------------------------------- 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; } /* AUF SCHMALEN SCHIRMEN GAR NICHT. Oben rechts traf der Hinweis auf die Markenreihe links -- bei 343 px Bildbreite ist fuer beides kein Platz, „13 Bilder - zum Zoomen klicken" misst allein 166 px. Nach unten verschoben lag er dann auf der Bildunterschrift. ER WIRD DORT AUCH NICHT GEBRAUCHT: auf einem Telefon wischt und spreizt man, „klicken" ist die falsche Aufforderung, und wie viele Bilder es gibt, zeigt der Miniaturstreifen direkt darunter. Ein Hinweis, der nur Platz kostet und eine Geste nennt, die es dort nicht gibt, gehoert weg und nicht woandershin. */ @media (max-width: 700px) { .mes-buehne__pille { display: 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. */ /* DIE REIHE BRICHT UM UND ENDET VOR DEM ZOOMHINWEIS. * * Beide liegen oben auf dem Bild -- die Marken links, `.mes-buehne__pille` rechts -- und bei * schmaler Bildspalte liefen sie ineinander: gemessen bei 820 px Fensterbreite endete die Reihe * bei x=323, der Hinweis begann bei x=263. Das gab es schon mit dem Textplaettchen fuer den * Hersteller (rund 35 px Ueberlappung); mit dem Logo sind es 60. * * `max-width: 58%` LAESST DEM HINWEIS SEINEN PLATZ, `flex-wrap` gibt den Marken eine zweite * Zeile statt sie darunterzuschieben. Kein fester Wert in Pixeln: der Hinweis ist mal * „zum Zoomen klicken" und mal „13 Bilder - zum Zoomen klicken", und die Bildspalte ist mal * 431 und mal 700 px breit. * * `align-items: flex-start`, damit in einer zweiten Zeile nichts gestreckt wird. */ .mes-buehne__marken { position: absolute; top: 12px; left: 12px; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; max-width: 58%; } /* ------------------------------------------------------------- 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; } /* DAS HERSTELLERLOGO OHNE PLAETTCHEN. Die Logos sind als Freisteller angelegt -- 80 der 128 Dateien tragen einen Alphakanal --, und ein weisser Kasten mit Rand um einen Freisteller ist ein Rahmen um einen Rahmen. Der Bestand zeigte sie ebenfalls blank ueber dem Bild (`productImageLeft.tpl:61-73`, `.pILHersteller2` ohne Grund und ohne Kontur). DIE UEBRIGEN 48 BRINGEN IHREN EIGENEN GRUND MIT (PNG-Farbtyp 2, ohne Alphakanal). Sie sehen damit aus wie zuvor -- ein heller Kasten --, nur ohne die zusaetzliche Kontur. Ihnen einen Rahmen zu lassen und den Freistellern nicht, hiesse zwei Sorten Herstellermarke; die Loesung dafuer ist ein freigestelltes PNG, keine Regel im Stilblatt. `padding: 0` und kein Radius: es gibt keine Flaeche mehr, an der ein Radius sichtbar waere. EIN TEXTPLAETTCHEN FUER HERSTELLER OHNE LOGO GIBT ES NICHT MEHR (buehne.twig): ohne Logo steht ueber dem Bild gar nichts. Mit ihm sind `.mes-marke--hersteller` samt Rand und Flaeche entfallen -- und hier das `border: 0` / `background: none`, das nur dieses Plaettchen wieder aufheben musste. */ .mes-marke--logo { display: inline-flex; align-items: center; padding: 0; border-radius: 0; } /* DER VERWEIS ZEIGT SICH BEIM UEBERFAHREN, nicht dauerhaft. Ein Logo mit Unterstreichung oder Rahmen waere wieder das Plaettchen, das gerade weggefallen ist; ein leichtes Aufhellen sagt „anklickbar", ohne die Marke zu veraendern. Bootstrap faerbt und unterstreicht sonst jeden Link (`a:hover`), was hier ins Leere ginge -- das Kind ist ein Bild. */ a.mes-marke--logo { transition: opacity .15s ease, transform .15s ease; } a.mes-marke--logo:hover, a.mes-marke--logo:focus-visible { opacity: .78; transform: translateY(-1px); text-decoration: none; } a.mes-marke--logo:focus-visible { outline: 2px solid var(--mes-petrol); outline-offset: 3px; opacity: 1; } @media (prefers-reduced-motion: reduce) { a.mes-marke--logo { transition: none; } a.mes-marke--logo:hover { transform: none; } }/* NATUERLICHE GROESSE, nur gedeckelt -- und das ist eine Korrektur. * * Vorher stand hier eine feste Hoehe von 20 px. Das traf die flachen Wortmarken gut * (AppleBee 100x24, Brafab 90x23), zerstoerte aber die quadratischen: Csun ist 40x40 und * landete bei 20x20, also einem Viertel der Flaeche -- erkennbar war das nicht mehr. 25 der * 57 Logos sind 40 px oder hoeher und betreffen 3.280 aktive Artikel. * * Die gepflegten Groessen SIND die Anzeigegroessen: `small/` hat einen Median von 38 px Hoehe, * und wer diese Dateien anlegt, hat sie fuer genau diesen Zweck zugeschnitten. Die Reihe wird * dadurch unruhiger als mit einer Einheitshoehe -- ein Logo, das man nicht erkennt, nuetzt * aber gar nichts. * * DIE DECKEL SIND FUER DIE AUSREISSER, nicht die Regel: Komex misst 1000x301 (4 Artikel) und * wuerde sonst das halbe Produktbild verdecken. 48 px Hoehe entsprechen dem groessten * regulaer gepflegten Logo (Sieger 70x73 landet damit bei 46x48), 130 px Breite fangen die * flachen ab. */ .mes-marke__logo { display: block; width: auto; height: auto; max-width: 130px; max-height: 48px; object-fit: contain; } /* Sondermass: dieselbe Pille wie der Hersteller, aber mit Zeichen und in Petrol -- sie ist eine EIGENSCHAFT des Artikels, keine Marke und kein Nachlass. `inline-flex`, damit Zeichen und Text auf einer Grundlinie sitzen. */ /* AKTIONSMARKE. Rot wie die Eckbanderole des Bestands, die sie ersetzt -- dieselbe Aussage, dieselbe Signalfarbe, aber flach und in der Reihe der uebrigen Marken statt quer ueber der Bildecke. Nicht das Orange des Rabattabzeichens: eine Aktionsmarke ist kein Preisnachlass, und drei der neun Artikel tragen beides nebeneinander. */ .mes-marke--aktion { background: #c0392b; color: #fff; } .mes-marke--sondermass { display: inline-flex; gap: 5px; align-items: center; border: 1px solid var(--mes-petrol); background: var(--mes-flaeche); color: var(--mes-petrol); 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; } /* DIE AUFSCHLUESSELUNG EINER ZUSAMMENSTELLUNG MIT PAKETRABATT: „Summe der Teile" minus „Paketrabatt", darunter gross der Endpreis. Sie steht anstelle des Streichpreises, weil ein durchgestrichener Betrag hier zwei verschiedene Nachlaesse in eine Zahl gepresst haette. ZWEI SPALTEN MIT AUSGERICHTETEN BETRAEGEN, damit die Rechnung als Rechnung lesbar ist: Bezeichnung links, Betrag rechtsbuendig. `tabular-nums` haelt die Ziffern in einer Spur -- ohne das wandern die Kommas gegeneinander. */ .mes-rechnung { margin: 0 0 4px; color: var(--mes-tinte-leise); font-size: 14px; } .mes-rechnung__zeile { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; } .mes-rechnung__zeile dt, .mes-rechnung__zeile dd { margin: 0; } .mes-rechnung__zeile dd { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Der Abzug in Signalfarbe: er ist der Grund, warum der Preis darunter niedriger ist, und die einzige Zahl der Rechnung, die dem Kunden nuetzt. */ .mes-rechnung__zeile--abzug { color: var(--mes-signal); font-weight: 600; } /* 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; } /* Der Verweis auf die Sets und Kombinationen, in denen es den Artikel gibt. Nicht kursiv wie der Satz darueber: der ist eine Feststellung, das hier ist der Ausweg -- und ein Weg soll sich abheben, nicht mitleiden. */ .mes-preis__ausweg { display: inline-block; margin-top: 8px; color: var(--mes-petrol); font-size: 14px; font-weight: 600; text-decoration: none; } .mes-preis__ausweg::after { content: " ↓"; } .mes-preis__ausweg:hover { color: var(--mes-petrol); text-decoration: underline; } /* Der Sprung landet sonst unter der fest stehenden Kaufleiste. */ .mes-kachelbahn { scroll-margin-top: 96px; } /* ------------------------------------------------------------- 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 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; } /* Die Ueberschrift des Widerrufshinweises. Sie steht in der NORMALEN Schriftfarbe, waehrend der Kasten sonst leise gesetzt ist -- der Text schraenkt ein Kundenrecht ein, und eine Einschraenkung muss als solche zu finden sein. `!important` gegen `css/style.css:117` (`h2 { font-size: 1.5rem !important }`): gegen ein globales !important hilft keine Spezifitaet, nur ein Gegengewicht. Dieselbe Ausnahme wie beim Titel der Abholkarte. */ .mes-rechtstext__titel { margin: 0 0 8px; color: var(--mes-tinte); font-size: 14px !important; font-weight: 700; } .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; } /* ------------------------------------------------ Variantenwahl (Variantenset) Jede Zeile ist ein Verweis, kein Auswahlfeld: die Wahl ist eine Adresse und funktioniert ohne Skript. Die gewaehlte Zeile hat den Rahmen der Bildwahl und `aria-current` -- die Farbe allein waere fuer Vorleser keine Auskunft. */ .mes-setwahl { margin: var(--mes-abstand) 0; } .mes-setwahl__titel { margin: 0 0 8px; font-size: 15px; } .mes-setwahl__liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .mes-setwahl__karte { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; border: 1px solid var(--mes-linie); border-radius: var(--mes-radius); background: var(--mes-flaeche); color: var(--mes-tinte); text-decoration: none; } .mes-setwahl__karte:hover { border-color: var(--mes-linie-highlight); } .mes-setwahl__karte--aktiv { border-color: var(--mes-petrol); box-shadow: inset 0 0 0 1px var(--mes-petrol); } /* Nicht bestellbar bleibt waehlbar: wer sie ansieht, soll die Teile und den Grund sehen. */ .mes-setwahl__karte--aus { opacity: .7; } .mes-setwahl__name { font-weight: 600; } .mes-setwahl__preis { text-align: right; font-weight: 600; white-space: nowrap; } .mes-setwahl__zusatz { grid-column: 1 / -1; 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; } /* AUF DEM TELEFON BRICHT DER PREIS IN DIE ZWEITE ZEILE. Vier feste Breiten nebeneinander gehen dort nicht auf: Bild 72 + Menge 110 + Preis 132 plus drei Abstaende sind 350 px, und der Name braucht auch noch etwas. Gemessen bei 375 px Ansichtsbreite lief die Zeile um 5 px ueber und schob die ganze Seite mit -- ein Fehler, den erst die feste Mengen- und Preisspalte gebracht hat (sie richtet die Stueckzahlen aus, siehe oben). Unterhalb von 560 px rutscht der Preis deshalb unter Bild, Name und Menge und nimmt dort die volle Breite, rechtsbuendig wie zuvor. Die Zuordnung bleibt eindeutig, weil jede Zeile ihren eigenen Kasten mit Trennlinie hat. */ @media (max-width: 559px) { .mes-kombi__zeile { flex-wrap: wrap; } /* BASIS 0, SONST BRICHT ALLES. Mit `flex-basis: auto` ist die Ausgangsbreite des Textes seine INHALTSBREITE -- beim Umbruch passt er damit nicht neben Bild und Menge, bekommt eine eigene Zeile, und die beiden anderen ebenso: gemessen vier Zeilen und 255 px Hoehe statt zwei und 130. Mit Basis 0 nimmt er, was uebrig bleibt (345 - 72 - 110 - 24 Abstand = 139 px), und nur der Preis rutscht nach unten. */ .mes-kombi__text { flex: 1 1 0; } .mes-kombi__preis { flex: 0 0 100%; margin-left: 0; } } .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; } /* DAS BILD ZUR GEWAEHLTEN AUSFUEHRUNG -- ein Streifen, kein Quadrat. * * Die Dateien sind gepflegte Materialproben im Format 170x30 px, also rund 5,7:1. Ein * quadratischer Rahmen mit `object-fit: contain` liesse davon oben und unten Luft und machte * aus der Probe eine Briefmarke; ein Rahmen MIT `cover` schnitte die Maserung an. Deshalb * traegt die Hoehe das Mass und die Breite folgt. * * `max-width` IST DIE NOTBREMSE, nicht die Regel: eine der 24 Dateien misst 6720x1186 px * (6,5 MB), und ohne Schranke waere die Zeile 133 px breit -- in der Kombiliste neben Feld, * Menge und Preis ist das der Umbruch. Die gepflegten 170er bleiben darunter und werden nicht * gestaucht. * * `flex: 0 0 auto`, damit die Probe nicht schrumpft, wenn der Teilename lang ist: eine * gequetschte Farbprobe ist keine Farbprobe mehr. */ .mes-kombi__optionsbild { flex: 0 0 auto; height: 20px; width: auto; max-width: 114px; border: 1px solid var(--mes-linie); border-radius: 3px; object-fit: cover; } /* 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