/* ========================================================= meditationgongs.de · Produktseite (Entwurf 04.09.2026) Grund Weiß (liste.css, html[data-grund="hell"]), Bilder als dunkle Flächen. Farben: die sechs Markenwerte, Weiß und Alpha-Ableitungen derselben Farben. ========================================================= */ /* ---------- Kopfbereich: Galerie links, Kaufbereich rechts ---------- */ /* Punkt „mehr Raum je Produkt": groesserer Zwischenraum und mehr Luft um die Galerie */ /* Die Kinder duerfen schrumpfen. Ein Grid-Item steht ohne diese Angabe auf min-width:auto und wird nie schmaler als sein breitester Inhalt, auch wenn die Spur selbst auf minmax(0,1fr) steht. Gemessen am 15.09.2026: das Datenblatt des Chakra Mallets schob die Seite auf dem Telefon auf 549 Pixel, und der Scrollrahmen um die Tafel konnte gar nicht greifen, weil der Rahmen mitwuchs. Mit min-width:0 scrollt die Tafel in ihrem Rahmen und die Seite steht. */ .produkt > *{min-width:0} .produkt{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(40px,6vw,112px);padding:clamp(24px,3.4vw,52px) 0 calc(var(--sec)*.55);align-items:start} .galerie{display:grid;gap:26px} /* 13.10.2026 (Paula, Uebergabe Nr. 13): .galerie, .kauf und .beschreibung sind drei Kinder desselben Rasters. Am Desktop steht der Kaufblock rechts ueber beide Zeilen und bleibt beim Scrollen haften, links folgen Bilder und Beschreibung. Auf dem Telefon laeuft die Reihenfolge Galerie, Kaufblock, Beschreibung, siehe die Regel im Block max-width:900px. */ .produkt{grid-template-areas:"galerie kauf" "beschr kauf";grid-template-rows:auto 1fr;row-gap:0} .produkt > .galerie{grid-area:galerie} .produkt > .kauf{grid-area:kauf} .produkt > .beschreibung{grid-area:beschr} /* Punkt 9 (Alexander 05.09.2026): kein schwarzer Rand und kein Anschnitt. Das Bild sitzt nicht mehr in einer dunklen 4:5-Flaeche, sondern steht frei auf dem weissen Grund und wird auf die Buehne eingepasst (contain). */ .galerie__haupt{position:relative;aspect-ratio:1/1;border:0;padding:0;border-radius:0;overflow:visible;background:none;box-shadow:none;cursor:zoom-in} .galerie__haupt img{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .8s var(--ease)} .galerie__haupt:hover img{transform:scale(1.03)} .galerie__lupe{position:absolute;right:0;bottom:0;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px 0 14px;border-radius:999px;background:rgba(48,48,48,.72);color:var(--creme);font-size:var(--fs-small);font-weight:500;backdrop-filter:blur(4px);pointer-events:none} .galerie__lupe svg{width:20px;height:20px} /* minmax(0,1fr) statt 1fr. Gemessen am 15.09.2026 auf der Seite /produkt/olli-hess-hard-mallet-chakra bei 390 Pixeln, aus der Seite heraus: scrollWidth 413 gegen clientWidth 390, die Seite liess sich also seitlich schieben. Ursache: 1fr heisst minmax(auto,1fr), und die Spur schrumpft dann nicht unter die kleinste Breite ihres Inhalts. Dieses Produkt ist das einzige mit acht Bildern, also mit vier gefuellten Spalten, und erst dann faellt es auf. Alle anderen Produktseiten waren und bleiben sauber. */ .galerie__reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px} /* Miniaturen: dieselbe Regel, kein Kasten, nichts angeschnitten. Die aktive Miniatur ist an der weinroten Linie darunter zu erkennen. */ .galerie__reihe button{padding:0 0 10px;border:0;border-bottom:2px solid var(--linie);background:none;border-radius:0;overflow:visible;aspect-ratio:1/1;cursor:pointer;outline-offset:3px;box-shadow:none;transition:border-color .3s} .galerie__reihe button img{width:100%;height:100%;object-fit:contain;opacity:.6;transition:opacity .3s} .galerie__reihe button:hover img,.galerie__reihe button[aria-current] img{opacity:1} .galerie__reihe button:hover,.galerie__reihe button[aria-current]{border-bottom-color:var(--wein)} .kauf{position:sticky;top:112px;display:grid;gap:22px} .kauf__marke{font-size:var(--fs-kicker);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text)} .kauf h1{font-size:clamp(2.6rem,4.4vw,4rem);line-height:1.02;margin-top:8px} /* Anmerkung Alexander 12.09.2026: „test wie normale content font groesse. kleiner bitte". Die Zeile unter dem Produktnamen lief auf bis zu 1,35 rem und war damit groesser als jeder Fliesstext der Seite. Sie steht jetzt auf demselben Wert wie die Produktbeschreibung darunter (--fs-body, 19 px) und traegt auch deren Zeilenhoehe. */ .kauf__satz{font-size:var(--fs-body);line-height:1.66;color:var(--dunkel);max-width:36ch} .preisblock{display:grid;gap:4px;padding:22px 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)} .preisblock .preis{font-size:clamp(2rem,2.6vw,2.5rem)} .preisblock .brutto{font-size:var(--fs-body)} .varianten{display:grid;gap:12px;border:0;margin:0;padding:0} .varianten legend{font-weight:600;color:var(--dunkel);font-size:1.0625rem;padding:0;margin-bottom:12px;display:flex;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box} .varianten legend span{font-weight:500;color:var(--text)} /* Genau eine Ausführung ist keine Wahl, sondern eine Angabe. Alexanders Anmerkung vom 15.09.2026 am Olli Hess Mallet L355: "Das Millid gibt es nur in Rot deshalb brauchen wir keinen AuswahlButton für Rot, sondern einfach nur rot." Die Zeile steht an derselben Stelle wie sonst die Legende der Auswahl und trägt dieselbe Schrift, damit die Seite mit und ohne Wahl gleich wirkt. */ .kauf__angabe{margin:0;font-weight:600;color:var(--dunkel);font-size:1.0625rem;display:flex;justify-content:space-between;gap:12px} .kauf__angabe span + span{font-weight:500;color:var(--text)} /* minmax(0,1fr) und ein Umbruchpunkt im Wort. Gemessen am 15.09.2026 auf /produkt/olli-hess-hard-mallet-chakra bei 390 Pixeln: die Ausfuehrung "hellblau/dunkelblau" ist ein einziges langes Wort, und eine 1fr-Spur schrumpft nicht unter dessen Breite. Drei solche Spuren schoben die Seite auf 413 Pixel. Die Marke schreibt die Farben so, der Umbruch gehoert deshalb ins Layout und nicht in den Text. */ .varianten__reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} /* Erste Wahlstufe, 14.09.2026. Zwei bis fuenf Knoepfe, je nach Produkt, sie duerfen breiter stehen als die Groessen darunter. */ .varianten__reihe--stufe{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} /* Traegt eine Ausfuehrung einen Erklaersatz, braucht sie mehr Breite. In der dreispaltigen Grundform brach der Satz "Fuer Gongs bis 40 inch. Mit der Erweiterung haengen auch zwei Gongs an einem Staender" am 15.09.2026 in acht Zeilen um, gemessen am Meinl Gong-Staender Metall. */ .varianten__reihe--erklaert{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))} .variante__hinweis{margin-top:6px;line-height:1.45} /* .variante traegt display:grid. Ohne diese Zeile setzt sich das Attribut hidden nicht durch, und die Groessen der anderen Stufe blieben sichtbar. */ .variante[hidden]{display:none} .variante{display:grid;gap:2px;justify-items:start;overflow-wrap:break-word;padding:14px 16px;border:1px solid var(--dunkel-14);border-radius:var(--radius);background:var(--weiss);color:var(--dunkel);text-align:left;font-size:1.0625rem;font-weight:600;line-height:1.3;transition:border-color .25s,box-shadow .25s} .variante small{font-size:1rem;font-weight:500;color:var(--text)} .variante:hover{border-color:var(--wein)} .variante[aria-pressed=true]{border-color:var(--wein);box-shadow:inset 0 0 0 1px var(--wein);color:var(--wein)} /* Anmerkung Alexander 12.09.2026: „text in normaler textfarbe. groesse wie zahlung und versand". Die Lieferaussage stand in --fs-body (19 px) und in der Zustandsfarbe des ganzen Textes, also Weinrot bei Vorrat. Sie laeuft jetzt in --fs-small (16,5 px) und --dunkel, genau wie die Zeilen in .kauf__klar darunter. Die Farbcodierung bleibt, aber nur noch am Ring, damit der Zustand ablesbar ist, ohne dass die Zeile den Block dominiert. Die Ringfarbe je Zustand steht in design.css, in den Regeln .liefer .ring, .liefer--vorrat .ring, .liefer--kurz .ring und .liefer--termin .ring. Zeilennummern stehen hier bewusst nicht, sie wandern bei jeder Einfuegung. */ /* Anmerkung Alexander 14.09.2026 auf der Komet-2-Seite, Anker auf #liefer-text: "bitte hier die selbe schriftfarbe wie beim rest des textes. passe das in der css ueberall gleich an". Die Zeile stand hier auf --dunkel (#303030), dem Ton dieses Blocks, waehrend jede andere Lieferaussage im Shop seit dem 13.09.2026 im Fliesston --text (#54595f) laeuft. Sie traegt jetzt ueberall denselben Ton, die eigene Regel faellt damit weg. Die beiden Nachbarzeilen in .kauf__klar bleiben auf --dunkel, sie sind eine andere Aussage. Faellt ihm der Unterschied auf, ziehen wir sie nach. */ .kauf .liefer{margin-top:0;font-size:var(--fs-small);line-height:1.45;align-items:flex-start} /* Symbol an der ersten Zeile, wie in .kauf__klar darunter (Jody, 13.10.2026). */ .kauf .liefer .ring{margin-top:.22em} .kauf__aktion{display:grid;gap:14px;justify-items:start} .kauf__aktion .btn{width:100%;min-height:62px;font-size:1.125rem} .kauf__klar{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:14px} .kauf__klar li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-small);color:var(--dunkel);line-height:1.45} .kauf__klar .ring{color:var(--akzent);flex:none;margin-top:.22em} /* ---------- Kurze Beschreibung unter der Galerie ---------- */ /* min-width:0, weil .beschreibung ein Grid-Item von .galerie ist. Ein Grid-Item steht sonst auf min-width:auto und wird nie schmaler als sein breitester Inhalt. Gemessen am 15.09.2026: die Datenblatt-Tafel machte .beschreibung 527 Pixel breit, obwohl die Spalte nur 346 hergab, und die Seite liess sich auf dem Telefon nach rechts schieben. Der Scrollrahmen um die Tafel konnte dabei gar nicht greifen, weil er mitwuchs. */ .beschreibung{margin-top:56px;padding-top:36px;border-top:1px solid var(--linie);max-width:62ch;min-width:0} .beschreibung .kicker{margin-bottom:20px} .beschreibung p + p{margin-top:22px} /* Anmerkung Alexander 12.09.2026: „abstand über dem Wort ‚Größen' so gross wie drunter". Fuer h4 und ul stand in der Beschreibung keine Regel, es galt der Browser-Standard: oben lief die Zwischenueberschrift gegen den Absatz darueber, unten stand Luft. Beide Abstaende stehen jetzt auf denselben 22 Pixeln wie zwischen zwei Absaetzen, und die Liste bringt keinen eigenen Aussenabstand mehr mit, damit der Wert nicht ein zweites Mal dazukommt. Heute traegt nur die Beschreibung der sechs Oetken Komet Gongs einen solchen Block, die Regel gilt aber allgemein. */ .beschreibung h4{margin:22px 0;font-size:var(--fs-body);line-height:1.45;color:var(--dunkel)} /* Anmerkung Alexander 15.09.2026 auf /produkt/gongstaender-holz-knickfuss, markiert an der Überschrift „Gong-Ständer weitere Größen:": „Hier bitte mehr Abstand zwischen dem Überschriften." Gemessen: für h3 galt in der Beschreibung keine eigene Regel, es griff die Grundregel aus design.css, dort steht für h1, h2 und h3 margin:0. Die Überschrift stand also ohne jeden Abstand zwischen zwei Absätzen, oben wie unten 0 Pixel, während zwischen zwei Absätzen 22 Pixel stehen. Neu 34 Pixel oben und unten, also derselbe Wert wie die größte Stufe der Überschrift selbst, und dieselbe Symmetrie, die Alexander am 12.09.2026 für h4 verlangt hat („abstand über dem Wort so gross wie drunter"). Die Regel gilt für jede Produktbeschreibung, nicht nur für diese eine Seite. Nachtrag 22.09.2026, nach Richards Prüflauf über alle Anmerkungen. Der Punkt war zu Recht noch offen, aber die Ursache lag nicht an der Überschrift. Gemessen auf /produkt/gongstaender-holz-knickfuss bei 1440 Pixeln, Lücke zwischen je zwei Elementen der Beschreibung: Kicker -> Absatz 42 Pixel Absatz -> Absatz 22 Pixel Absatz -> Liste 0 Pixel Liste -> Absatz 0 Pixel Absatz -> h3 34 Pixel h3 -> Absatz 34 Pixel Die beiden Nullen stammen aus der Regel darunter: am 12.09.2026 wurde der Liste jeder Außenabstand genommen, damit sich der neue h4-Abstand nicht verdoppelt. Das war nicht nötig, senkrechte Abstände benachbarter Elemente fallen ohnehin zum größeren zusammen, und es hat jede Liste im Shop oben wie unten an ihre Nachbarn geklebt. Genau dieser Klumpen steht auf der Seite direkt vor der Überschrift, deshalb wirkte dort der Abstand zu klein. Der Vergleich mit „Technische Daten" führt in die Irre: das ist eine eigene Seitensektion mit 165,6 Pixeln Innenabstand, die Überschrift hier eine Zwischenstufe im laufenden Text. Maßstab ist deshalb der Rhythmus der Spalte selbst, also die 22 Pixel zwischen zwei Absätzen. Zwei Änderungen: die Prosaliste bekommt ihre 22 Pixel zurück und steht damit im Rhythmus der Absätze. Die h3 geht von 34 auf 44 Pixel, also genau das Doppelte des Grundrhythmus, weiter symmetrisch. */ /* 13.10.2026, Lea: Tim hat die Zwischenueberschriften der Beschreibungen um eine Stufe gehoben (Adler S4), h3 wurde h2, h4 wurde h3. Das Aussehen wandert mit: h2 sieht aus wie die bisherige h3, h3 wie die bisherige h4. :not([class]) laesst h2.groessen__titel aus katalog.php unberuehrt, die Regel traegt 0,2,1 und wuerde dessen 0,2,0 sonst ueberstimmen. Gezaehlt am 13.10.2026: h2 in 5 Beschreibungen, h3 nur noch bei der Lava Edition. */ .beschreibung h2:not([class]){font-size:var(--fs-h3);line-height:1.15;margin:44px 0} .beschreibung h3{font-family:var(--f-text);font-weight:600;font-size:var(--fs-body);line-height:1.45;letter-spacing:normal;color:var(--dunkel);margin:22px 0} /* Nur Prosalisten, erkennbar daran, dass sie keine Klasse tragen. Gezählt am 22.09.2026 über alle 60 Produkte der Datenbank: 23 Listen in produkt.beschreibung, davon 22 an aktiven Produkten, dazu 7 h3 und 16 h4. Eine klassenbehaftete Liste steht in keiner Beschreibung, malletdaten baut malletdatenblatt() ohnehin in eine Tafel um. Die erste hier genannte Zahl lautete 130 von 132 und war nicht belegt, berichtigt nach Checker Jodys Nachzählung. Die Einschränkung bleibt trotzdem richtig: .beschreibung ul trüge 0,1,1 und würde eine Komponentenklasse mit 0,1,0 überstimmen, sobald eine in eine Beschreibung gerät. Zur dritten Regel: sie schützt die Komponenten nicht, sie zwingt ihnen 0 auf, mit 0,2,1 und damit stärker als ihre eigene Klasse. Sie steht hier, weil die gebauten Blöcke ihren Abstand von außen bekommen und ihn heute auch so brauchen. Wer einer Komponente später einen eigenen Abstand gibt, muss diese Zeile anfassen, sonst sucht er lange. Ebenfalls Checker Jodys Befund. */ .beschreibung ul{padding-left:1.3em} .beschreibung ul:not([class]){margin:22px 0} .beschreibung ul[class]{margin:0} .beschreibung ul li{color:var(--text);font-size:var(--fs-body);line-height:1.66} .beschreibung ul li + li{margin-top:8px} .beschreibung p:not(.kicker){color:var(--text);font-size:var(--fs-body);line-height:1.66} /* ---------- Klangprobe: dunkles Band ---------- */ .klang{background:var(--dunkel);color:var(--creme);padding:clamp(56px,7vw,104px) 0} .klang .kicker{color:var(--creme)} .klang h2{color:var(--creme);max-width:16ch} .klang__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--gap);align-items:center} .klang p{color:var(--creme);margin-top:18px;max-width:40ch} .spieler{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;padding:26px 28px;border:1px solid rgba(243,238,217,.22);border-radius:var(--radius-l);background:rgba(243,238,217,.05)} .spieler__knopf{width:72px;height:72px;border-radius:999px;border:0;background:var(--creme);color:var(--wein);display:grid;place-items:center;cursor:pointer;transition:transform .25s var(--ease),background .25s} .spieler__knopf:hover{transform:scale(1.04);background:var(--weiss)} .spieler__knopf svg{width:26px;height:26px;margin-left:3px} .spieler__welle{display:grid;gap:12px} .spieler__welle svg{width:100%;height:56px;display:block} .spieler__zeile{display:flex;justify-content:space-between;gap:16px;font-size:var(--fs-small);color:var(--creme);font-weight:500} .spieler__zeile span:last-child{opacity:.75} /* ---------- Technische Daten ---------- */ .daten{padding:var(--sec) 0 0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--gap)} .daten dl{margin:0;display:grid;grid-template-columns:minmax(160px,.4fr) 1fr} .daten dt,.daten dd{margin:0;padding:24px 0;border-top:1px solid var(--linie);font-size:var(--fs-body);line-height:1.5} .daten dt{font-weight:600;color:var(--dunkel);padding-right:24px} .daten dd{color:var(--text)} /* Die Zeilen stehen seit dem 15.09.2026 in einem Behälter, weil ein Produkt neben seinen eigenen Zeilen auch Zeilen je Ausführung tragen kann. Der Abschluss unten gehört deshalb an den Behälter und nicht mehr an die letzte Zeile einer einzelnen Liste, sonst stünde mitten im Block eine zweite Trennlinie. */ .daten__werte{border-bottom:1px solid var(--linie)} .daten dl[hidden]{display:none} /* ---------- Zubehör ---------- */ .zubehoer{padding:var(--sec) 0 0} .zubehoer .sek-kopf{margin-bottom:clamp(24px,3vw,40px)} /* ---------- Frage zum Instrument ---------- */ .frage{margin:var(--sec) 0;padding:clamp(36px,4.5vw,64px) clamp(24px,4vw,64px);border-radius:var(--radius-l);border:1px solid var(--linie);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:start;background:var(--weiss)} /* Die Ueberschrift lautet "Eine Frage zu diesem Instrument?" und je nach Kategorie auch "... zu diesem Gongstaender?". Bei max-width:14ch brach sie an jeder gemessenen Breite auf drei Zeilen, Befund Checker Jody, nachgemessen am 22.09.2026 bei 1440, 1024 und 500 Pixel. 21ch traegt auch die laengste Fassung in zwei Zeilen. */ .frage h2{max-width:21ch;margin-bottom:18px} .frage p{color:var(--dunkel);max-width:34ch;margin-bottom:22px} .formular{display:grid;gap:16px} .formular .zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px} .feld{display:grid;gap:8px} .feld label{font-weight:600;color:var(--dunkel);font-size:1.0625rem} .feld input,.feld textarea{font:inherit;font-size:1.0625rem;color:var(--dunkel);background:var(--weiss);border:1px solid var(--dunkel-14);border-radius:var(--radius);padding:14px 16px;width:100%} .feld textarea{min-height:150px;resize:vertical} .feld input:focus,.feld textarea:focus{outline:2px solid var(--akzent);outline-offset:1px;border-color:var(--akzent)} .formular .btn{justify-self:start} .formular .small{color:var(--text)} /* Honigtopf gegen Massenversand: aus dem Blickfeld, aber nicht display:none, damit ein Versandskript ihn findet und ausfuellt. */ /* Stand des Beratungsformulars, Bestaetigung und Hinweis. Linie statt Flaeche, wie im ganzen System: eine Kante links, kein Kasten mit Schatten. Beide Absaetze stehen im Formular und spannen dort ueber dessen volle Breite. .frage davor ist noetig, nicht schmueckend: .frage p traegt max-width:34ch und hat als Klasse mit Element die hoehere Spezifitaet, ohne diesen Vorsatz bliebe die Meldung auf 34ch stehen, egal wie weit unten die Regel steht. Gefunden von Checker Jody am 18.09.2026. */ .frage .frage__stand{max-width:none;margin:0 0 4px;padding:14px 18px;border-left:3px solid var(--wein);background:var(--creme);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--dunkel)} .frage .frage__stand--hinweis{border-left-color:var(--akzent)} .frage .frage__schutz{max-width:none;margin:4px 0 0;font-size:var(--fs-small);line-height:var(--lh-body);color:var(--text)} .frage .frage__schutz a{color:var(--akzent)} /* ---------- Zoom ---------- */ .zoom{position:fixed;inset:0;z-index:300;background:rgba(48,48,48,.96);display:grid;place-items:center;padding:24px;cursor:zoom-out} .zoom[hidden]{display:none} .zoom img{max-width:min(1400px,94vw);max-height:92vh;border-radius:var(--radius);box-shadow:0 40px 90px -30px rgba(0,0,0,.7)} .zoom__zu{position:absolute;top:20px;right:20px;width:52px;height:52px;border-radius:999px;border:1px solid rgba(243,238,217,.4);background:transparent;color:var(--creme);display:grid;place-items:center;cursor:pointer} .zoom__zu svg{width:22px;height:22px} /* ---------- Kaufleiste Mobil ---------- */ .kaufleiste{display:none} .kaufleiste--aus{transform:translateY(110%)} /* ---------- Responsiv ---------- */ @media (max-width:1180px){ .produkt{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .zubehoer .kacheln{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ /* minmax(0,1fr) statt 1fr, dieselbe Falle wie bei .galerie__reihe: eine 1fr-Spur schrumpft nicht unter die kleinste Breite ihres Inhalts. Beim Chakra Mallet mit acht Bildern schob das die ganze Seite bei 390 Pixeln auf 413 Pixel Breite, gemessen am 15.09.2026. */ .produkt{grid-template-columns:minmax(0,1fr);grid-template-areas:"galerie" "kauf" "beschr";grid-template-rows:none;gap:32px;padding-top:12px} .produkt > .beschreibung{margin-top:16px} .kauf{position:static} .kauf h1{font-size:clamp(2.3rem,9vw,3rem)} .klang__grid,.daten,.frage{grid-template-columns:1fr} .daten dl{grid-template-columns:minmax(120px,.42fr) 1fr} .zubehoer .kacheln{grid-template-columns:1fr 1fr} .frage{padding:28px 20px} .formular .zwei{grid-template-columns:1fr} body{padding-bottom:96px} .kaufleiste{display:grid;grid-template-columns:minmax(0,1fr) auto;position:fixed;left:0;right:0;bottom:0;z-index:90;gap:12px;align-items:center;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));background:var(--weiss);border-top:1px solid var(--linie);transition:transform .35s var(--ease)} .kaufleiste .preis{font-size:1.25rem;white-space:nowrap} .kaufleiste .preis small{font-size:1rem;margin-left:.3em} .kaufleiste .brutto{display:block;font-size:1rem;white-space:nowrap} .kaufleiste .btn{min-height:50px;padding:0 18px;font-size:1.0625rem} } @media (max-width:560px){ /* Lupe nur als runder Knopf in der Bildecke, damit sie nicht ueber dem Motiv liegt. Das Wort bleibt im Knopf und damit im Namen fuer Screenreader, es wird nur nicht gezeichnet (Jody, 13.10.2026). */ .galerie__lupe{width:46px;padding:0;gap:0;justify-content:center;font-size:0} .varianten__reihe{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .variante{padding:12px 10px;font-size:1rem} .galerie__reihe{gap:10px} .spieler{grid-template-columns:auto 1fr;padding:20px} .spieler__knopf{width:60px;height:60px} } /* ---------- Kopfbild je Produkt (Auftrag Alexander 10.09.2026) ---------- Ohne Text darauf, weil der Produktname als H1 im Kaufbereich steht und zweimal stoerte. Faellt herobild leer, gibt es den Abschnitt nicht. Umgebaut am 12.09.2026, Alexanders Anmerkung: der Streifen zeigt zu wenig von der Bildstimmung. Gemessene Ursache, nicht geraten: der Streifen lief vollbreit mit einer Hoehe von 26vw. Bei 1440 Pixeln Fensterbreite war das ein Ausschnitt von 1440 zu 374, also 3,85 zu 1, aus Dateien, die 1400 mal 700 Pixel messen und damit 2 zu 1 stehen. Knapp die Haelfte der Bildhoehe fiel weg, und zwar genau die Raender, in denen die Stimmung liegt: Wasserfall, Steine, Wasserspiegel, Lichtstrahl, Zweige. Der Ausweg ist nicht mehr Hoehe, sondern weniger Breite. Das Bild steht jetzt als Tafel mittig auf dem hellen Grund, in derselben Haltung wie die Galerie darunter: kein Kasten, kein Radius, kein Schatten, nichts angeschnitten. Berichtigt am selben Tag, Befund Checker Jody: die erste Fassung setzte pauschal aspect-ratio 2 zu 1. Das gilt aber nur fuer neun der zwoelf Kopfbild-Dateien. Auris Symphonic Gongs und Oetken Komet Gong 6 messen 1400 mal 933 und stehen 1,50 zu 1, Oetken Flower of Life misst 1400 mal 788 und steht 1,78 zu 1. Bei festem 2 zu 1 verloren die ersten beiden 25,1 Prozent ihrer Bildhoehe und das dritte 11,1 Prozent, also genau der Fehler, den der Umbau beheben sollte. Es wird deshalb kein Verhaeltnis mehr gesetzt. Begrenzt sind nur die beiden Kanten, und zwar hoechstens 920 Pixel breit und hoechstens 460 Pixel hoch. Beide Achsen stehen auf auto, der Browser skaliert das Bild also in seinem eigenen Verhaeltnis in dieses Feld hinein und beschneidet nichts. Die Bandhoehe bleibt trotzdem ueber alle Produktseiten gleich, weil am Schreibtisch immer die Hoehe zuerst anschlaegt: 920 mal 460 bei 2 zu 1, 818 mal 460 bei 1,78 zu 1, 690 mal 460 bei 1,50 zu 1. Was sich von Seite zu Seite unterscheidet, ist die Breite, nicht die Hoehe. Das width- und height-Attribut am Bild haelt den Platz vor dem Laden frei. Die beiden Attribute wirken als Praesentationshinweis und setzen die CSS-Eigenschaften width und height. Ohne das ausdrueckliche auto hier gewinnen sie, und das Bild stuende starr in 1400 mal 700. Genau das ist am 08.09.2026 auf der Fragen-Seite schon einmal passiert. */ /* ---------- Stimmungsbild, unter der Beschreibung ---------- */ /* Loest das frühere Kopfband .phero ab, Alexanders Entscheidung vom 14.09.2026 fuer Weg C. Das Band lief ueber die volle Breite und schnitt dabei bei einem Dreiviertelformat 29,1 Prozent des Motivs weg, gemessen an /produkt/auris-symphonic-gongs. Hier wird nichts beschnitten. width 100 Prozent, height auto: das Bild fuellt die Inhaltsbreite und behaelt sein eigenes Seitenverhaeltnis, egal ob die Datei 2 zu 1, 16 zu 9 oder 3 zu 2 ist. Keine feste Hoehe, kein object-fit, kein aspect-ratio, sonst faengt das Beschneiden wieder an. */ .pszene{margin:0;padding:clamp(28px,4vw,64px) 0 0} .pszene img{width:100%;height:auto;display:block;background:var(--dunkel)} /* Die Regel fuer .pszene figcaption ist am 22.09.2026 entfallen, mit der Bildunterschrift selbst. Befund Checker Jody, tote Regel. */ /* ---------- Größenraster in der Beschreibung ---------- Alexander am 15.09.2026 am Vergleich der drei Runden, zwei Zeilen: "schumann: Zum Abgleich, die Fassung von gestern" "komet 1: dichet 1 kompakt" Er waehlt also je nach Zahl der Groessen verschieden: wenige Groessen luftig, viele kompakt. Beide Fassungen stehen hier, die Schwelle setzt groessentafel() in system/katalog.php. Gemessen am 15.09.2026 bei 62 Zeichen Satzbreite, Blockhoehe in Pixeln: Groessen luftig kompakt 2 218 155 3 406 282 5 594 409 7 782 535 Die luftige Fassung bleibt genau bis zwei Groessen einreihig. Ab drei bricht sie um und waechst in einem Sprung um 188 Pixel, also um 86 Prozent durch eine einzige zusaetzliche Groesse. Genau dort liegt die Schwelle. Gemeinsam ist beiden: die Zollzahl in der Serifenschrift und in Weinrot, Einheit und Zentimeter im Fliesston, Haarlinie ueber jedem Feld, keine Kaesten, keine Schatten. Alle Farben aus design.css. */ .beschreibung .groessen{margin:clamp(26px,3vw,38px) 0 0} .beschreibung .groessen__titel{ font-family:var(--f-display);font-weight:400;color:var(--wein);line-height:1.2; letter-spacing:normal; /* 13.10.2026: als h2 sonst -.005em aus der h2-Grundregel */ } .beschreibung .groessen__felder{list-style:none;margin:0;padding:0;display:grid} /* produkt.css gibt .beschreibung ul li ab dem zweiten Punkt einen Aussenabstand. Der wuerde jedes Feld ausser dem ersten nach unten schieben, und die Ziffern staenden nebeneinander auf zwei Hoehen. */ .beschreibung .groessen__felder li + li{margin-top:0} .beschreibung .groessen__feld{border-top:1px solid var(--linie)} .groessen__mass{display:flex;flex-wrap:wrap;align-items:baseline;margin:0} .groessen__zahl{ font-family:var(--f-display);font-weight:400;color:var(--wein);letter-spacing:-.01em; /* Instrument Serif hat in der ausgelieferten Fassung keine Versalziffern. Die Ziffern sind Minuskelziffern, 3 und 4 gehen unter die Linie, 6 und 8 darueber. Sie stehen alle auf einer Grundlinie, das gibt der Reihe den Charakter eines gesetzten Katalogs. */ } .groessen__einheit{font-size:1rem;font-weight:500;color:var(--text);letter-spacing:.02em} .groessen__cm{font-size:1rem;line-height:1.45;color:var(--text);white-space:nowrap} .groessen__ton{font-size:1rem;line-height:1.45;color:var(--dunkel)} /* ---- Fassung luftig, bis zwei Groessen ---- */ /* Runde zwei, von Alexander beim Schumann Gong gewaehlt. Jede Groesse bekommt ein breites Feld, der Zentimeterwert steht unter der Ziffer. */ .groessen--luftig .groessen__titel{font-size:clamp(1.625rem,2.2vw,2rem);margin:0 0 clamp(26px,3vw,38px)} .groessen--luftig .groessen__felder{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(26px,3.2vw,46px) clamp(24px,3vw,48px)} .groessen--luftig .groessen__feld{padding-top:clamp(16px,1.8vw,22px)} .groessen--luftig .groessen__mass{gap:0 .34em} .groessen--luftig .groessen__zahl{font-size:clamp(2.625rem,4.2vw,3.5rem);line-height:.9} .groessen--luftig .groessen__einheit{font-size:1.0625rem} .groessen--luftig .groessen__cm{flex:0 0 100%;margin:10px 0 0;font-size:1.0625rem} .groessen--luftig .groessen__ton{margin:10px 0 0;font-size:1.0625rem} /* ---- Fassung kompakt, ab drei Groessen ---- */ /* Runde drei, Dichte 1, von Alexander beim Komet Gong 1 gewaehlt. Halb so grosse Ziffer, engere Abstaende, feste drei Spalten ohne Stimmung, damit sechs Groessen zwei saubere Reihen geben statt fuenf plus eine haengende. */ .groessen--kompakt .groessen__titel{font-size:1.5rem;margin:0 0 20px} /* 150 statt 170 Pixel Mindestbreite. Bei 62 Zeichen Satzbreite, also rund 527 Pixeln, ergeben 170 Pixel nur zwei Spalten, und drei Groessen standen dann als zwei plus eine haengende da. Mit 150 passen drei Felder in eine Reihe, und "126,22 Hz, H2" braucht darin rund 105 Pixel. Gemessen am 15.09.2026. */ .groessen--kompakt .groessen__felder{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px 30px} .groessen--kompakt .groessen__felder--ohneton{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 26px} .groessen--kompakt .groessen__feld{padding-top:11px} .groessen--kompakt .groessen__mass{gap:0 .34em} .groessen--kompakt .groessen__zahl{font-size:1.75rem;line-height:1.05} .groessen--kompakt .groessen__cm{flex:0 0 100%;margin:4px 0 0} .groessen--kompakt .groessen__ton{margin:5px 0 0} /* Ein Satz, der keine Groesse ist, bekommt eine eigene Form, damit er nicht wie ein Rest unter der Aufzaehlung aussieht. */ .beschreibung .massnotiz{ margin:clamp(22px,2.6vw,32px) 0 0;padding:4px 0 4px clamp(16px,2vw,24px); border-left:2px solid var(--wein-20); font-family:var(--f-display);font-style:italic;font-weight:400; font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.5;color:var(--dunkel); } .beschreibung .massnotiz + .massnotiz{margin-top:10px} @media(max-width:520px){ .beschreibung .groessen__felder, .beschreibung .groessen__felder--ohneton{grid-template-columns:1fr 1fr;gap:16px 22px} } @media(max-width:360px){ .beschreibung .groessen__felder, .beschreibung .groessen__felder--ohneton{grid-template-columns:1fr} } /* ---------- Datenblatt je Farbe ---------- Alexander am 15.09.2026 auf /produkt/olli-hess-hard-mallet-chakra: "bitte übersichtlicher darstellen. z.b. tabelle?" Gebaut von malletdatenblatt() in system/katalog.php, das den vorhandenen Textblock bei der Ausgabe als Tafel setzt. Dieselbe Sprache wie die Größentafel darüber: Haarlinien, Versalien in Weinrot als Spaltenkopf, die Zeile beginnt mit einem Serifenwort in Weinrot. Keine neuen Farben, kein Text unter 16 Pixel. */ /* max-width:100% ist hier nicht schmueckend. Ohne die Angabe nahm der Rahmen die Breite seiner Tabelle an, 527 statt 390 Pixel, und schob die ganze Seite auf dem Telefon nach rechts. Gemessen am 15.09.2026 aus der Seite heraus. Erst mit der Deckelung greift overflow-x und der Rahmen scrollt selbst, waehrend die Seite steht. */ .beschreibung .datenblatt-rahmen{margin:22px 0 0;max-width:100%;overflow-x:auto} .beschreibung .datenblatt{width:100%;min-width:440px;border-collapse:collapse;font-variant-numeric:tabular-nums} .beschreibung .datenblatt th, .beschreibung .datenblatt td{text-align:left;padding:12px 16px 12px 0;vertical-align:baseline} .beschreibung .datenblatt th:last-child, .beschreibung .datenblatt td:last-child{padding-right:0} .beschreibung .datenblatt thead th{ font-size:.9375rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--wein);padding-bottom:9px;border-bottom:1px solid var(--wein);white-space:nowrap; } .beschreibung .datenblatt tbody tr:first-child td, .beschreibung .datenblatt tbody tr:first-child th{padding-top:14px} .beschreibung .datenblatt tbody tr + tr td, .beschreibung .datenblatt tbody tr + tr th{border-top:1px solid var(--linie)} /* Erste Spalte: der Einstieg in die Zeile, in der Serifenschrift und in Weinrot, wie die Zollzahl im Größenraster. */ .beschreibung .datenblatt tbody th{ font-family:var(--f-display);font-weight:400;color:var(--wein); font-size:1.25rem;line-height:1.25;white-space:nowrap; } .beschreibung .datenblatt tbody th small{ display:block;font-family:var(--f-text);font-size:1rem;font-weight:500; color:var(--text);letter-spacing:.02em;margin-top:2px;white-space:normal; } /* Messwerte bleiben auf einer Zeile. "ca. 12 mm" brach auf dem Telefon sonst um, obwohl die Tafel ohnehin in ihrem Rahmen scrollt. Lange Textwerte ohne Ziffer stehen gar nicht erst in einer Spalte, sie wandern unter die Tafel, und unter zwei Zeilen entsteht keine Tafel. */ .beschreibung .datenblatt td{font-size:1.0625rem;line-height:1.45;color:var(--text);white-space:nowrap} /* Was bei allen Ausführungen gleich ist, steht einmal unter der Tafel. */ .beschreibung .datenblatt-gleich{margin:16px 0 0;font-size:var(--fs-small);line-height:1.55;color:var(--text)} .beschreibung .datenblatt-gleich b{font-weight:600;color:var(--dunkel)} .beschreibung .datenblatt-gleich + .datenblatt-gleich{margin-top:6px} @media(max-width:560px){ .beschreibung .datenblatt th, .beschreibung .datenblatt td{padding:11px 12px 11px 0;font-size:1rem} .beschreibung .datenblatt tbody th{font-size:1.125rem} }