/* ============================================================================ teil-zc-ring.css — der Produktring im Abschnitt „bachmaier® HEAROS" (/hoerakustik/, Abschnitt 04). AUFBAU UND GEOMETRIE. Christopher, 04.10.2026, Sprachnachricht: „Die Seite Hörakustik, 04 bachmaier HEAROS. Haben wir diese Ohrstücke auch in hochauflösend, kannst du die freistellen und können wir die irgendwie in so einen Ring machen, rotierend, um zum Beispiel ‚Probehören möglich' … in der Liste darzustellen ist mir immer noch zu einfach." ZUSTAENDIGKEIT. Diese Datei baut: Raster, Stellung auf dem Kreis, Masse, Rahmen, Farben, Schriftgroessen. Sie fasst transform, rotate, translate, opacity, transition, animation, @keyframes, animation-play-state, will-change und filter NICHT an — die Drehung steht in teil-zd-drehung.css und wird dort zeitgleich von einer anderen Sitzung geschrieben. Auch der @media(prefers-reduced-motion)-Zweig gehoert dorthin; hier steht keiner, weil hier nichts zu beruhigen ist. Eigenschaften, die in keiner der beiden Listen stehen (text-align, line-height, border, list-style, cursor, outline), gehoeren zum Aufbau und darum hierher. ┌──────────────────────────────────────────────────────────────────────┐ │ OFFENER WIDERSPRUCH ZU teil-zd-drehung.css — GEMESSEN 04.10.2026, │ │ MUSS VON DER HAUPTSITZUNG ENTSCHIEDEN WERDEN. │ │ │ │ Beide Dateien stellen die fuenf Plaetze auf den Kreis, und die zwei │ │ Stellungen ADDIEREN sich: │ │ hier left/top mit sin()/cos(), Radius --ring-r │ │ teil-zd Z. 192 transform: rotate(θ) translateY(-var(--ring-r,…)) │ │ rotate(-θ) │ │ teil-zd Z. 304 dasselbe mit + 72 px als Ruhezustand vor .auf │ │ Im Browser gemessen, zweimal: │ │ * solange --ring-r hier noch nicht gesetzt war, griff sein │ │ Ersatzwert clamp(96px,30vw,230px). Bei 1850 px Fenster standen │ │ die Ohrstuecke auf Radius 476,1 px statt 251,6 px │ │ (= (251,6 + 230 + 72) x 0,86 Einflug-Skalierung). │ │ * mit --ring-r von hier liest er den echten Radius: gemessen bei │ │ 1280 px Fenster translateY(-334,5 px) = -(262,5 + 72). Nach .auf │ │ sind es -262,5 px, der Platz steht also auf GENAU DEM DOPPELTEN │ │ Radius (525 px statt 262,5) und weit ausserhalb des Quadrats. │ │ │ │ Mein Auftrag sagt woertlich: „Du darfst die Plaetze also NICHT per │ │ transform setzen" und „NUR die Geometrie gehoert dir; die DREHUNG │ │ des Rings gehoert dem anderen Agenten." Danach ist die Stellung │ │ Aufbau und gehoert hierher. Geaendert habe ich seine Datei trotzdem │ │ nicht — ich schreibe nur die mir zugewiesenen zwei Dateien. │ │ │ │ DIE AUFLOESUNG IST IN BEIDE RICHTUNGEN EIN EINZIGES LOESCHEN: │ │ * Stellung bleibt hier (Vertrag): in teil-zd-drehung.css die │ │ translateY-Zeile aus beiden .ring-platz-Regeln nehmen; rotate und │ │ Gegendrehung bleiben, und der Ring stimmt sofort. │ │ * Stellung soll dort liegen: hier die vier Zeilen unter │ │ „DIE FUENF PLAETZE" loeschen (sie sind als Block ausgewiesen). │ │ --ring-r wird weiter von hier geliefert und waechst mit. │ │ Beides wurde gemessen, nicht geschaetzt: mit stillgelegter │ │ translateY-Zeile standen alle fuenf Stuecke auf Radius 255,0 px, │ │ gleich weit, vollstaendig im Quadrat, 157 px Luft zum Nachbarn. │ └──────────────────────────────────────────────────────────────────────┘ --ring-r ist deshalb bewusst SEIN Name und nicht meiner: teil-zd liest ihn (dort Punkt 7 und 9, „--ring-r muss mitwachsen"). Er traegt hier den echten Radius, damit die Zahl in beiden Aufloesungen stimmt. WICHTIG FUER DIE STELLUNG DER FUENF PLAETZE: eine Drehung um den Kreismittelpunkt ist eine transform. Die Plaetze duerfen deshalb NICHT per transform gesetzt werden, sonst ueberschreibt die eine Datei die andere. Sie stehen hier auf position:absolute mit top/left und rechnen ihre Lage mit den CSS-Funktionen sin() und cos(), die ohne transform auskommen. ── Was gemessen wurde, bevor hier etwas stand (04.10.2026) ─────────────── 1) Die fuenf freigestellten Dateien, geladen von brillen-voigt.de/wp-content/uploads/2019/08/ und Byte fuer Byte nachgemessen (PNG-Kopf und Alphakanal, nicht geschaetzt): hearos-bangi-frei.png 640x640, 191 KB, deckend 21,4 % hearos-boomii-frei.png 640x640, 145 KB, deckend 25,1 % hearos-proii-frei.png 640x640, 281 KB, deckend 38,8 % hearos-proiii-frei.png 640x640, 322 KB, deckend 39,6 % hearos-proiv-frei.png 640x640, 305 KB, deckend 39,7 % Alle fuenf tragen das Motiv ueber die VOLLE Breite (x 0 bis 639 bei allen fuenf), senkrecht eingerueckt um 27 px (Bang I), 107 px (Boom II) und 43–45 px (die drei Pro). Daraus folgt zweierlei: das Ohrstueck ist genau so breit wie sein Platz — der Platz braucht also keinen Zuschlag — und die ECKEN eines Platzes sind durchsichtig. Darum darf die Mitte rechnerisch bis dicht an die Bahn heranreichen. Die 640er-Fassung wiegt im Mittel 249 KB. Sie wird ueber srcset praktisch nie geladen (Rechnung unter „Anzeigegroessen"). 2) Der Abschnitt vorher, gemessen am Quelltext der laufenden Seite: zwei Baender. Band 1 „In-Ear-Monitoring - made in Bavaria" traegt nur Text. Band 2 „Probehören möglich!" traegt den Ausleihsatz UND die fuenf Bildchen — als 150x150-Miniaturen in einer Reihe, jede verlinkt auf ihre Originaldatei. Die Bilder stehen also im ZWEITEN Band, nicht im ersten. Die Ohrstuecke werden damit heute kleiner gezeigt (150 px), als der Ring sie zeigt (bis 150 px auf dem Telefon, 146–154 px am Schreibtisch). 3) .bahn ist min(1560px, 100%) breit und innen um --gasse eingerueckt (clamp(16px, 4vw, 56px)). Bei 1850 px Fenster bleiben 1448 px nutzbar — derselbe Wert, mit dem teil-z9-baender.css rechnet. ── Die Masse, nachgerechnet ───────────────────────────────────────────── Der Ring ist ein Quadrat mit aspect-ratio:1 und fester Grundflaeche, damit die Seite beim Laden nicht springt. Es gilt durchgehend: Platz --stueck = --ring-mass x --stueck-anteil Bahnradius --ring-r = (--ring-mass - --stueck) / 2 - --ring-rand freie Mitte d_frei = --ring-mass - 2x--stueck - 2x--ring-rand = 0,52 x --ring-mass (bei Anteil 0,22/0,02) Die Mitte traegt „Probehören möglich!" (21,3 px), das Namensfeld (17,7 px), den Ausleihsatz mit 150 Zeichen (vier Zeilen, 78,5 px), den Knopf (38,5 px), drei Zeilenabstaende (26,4 px) und ihre Polsterung (19,2 px) — zusammen rund 202 px Hoehe auf 0,42 x M Breite. In einen Kreis passt ein Rechteck, wenn Wurzel(b² + h²) <= d_frei ist. Mit b = 0,42 x M und d_frei = 0,52 x M folgt h <= 0,307 x M, also M >= 658 px. UNTER RUND 660 px RINGBREITE PASST DIE MITTE NICHT MEHR IN DEN RING. Daran haengt der Haltepunkt 1280 px weiter unten; er ist keine Geschmacksfrage. Gerechnet je Zweig: a) ab 1661 px Fenster — zwei Spalten, Ring links, Fliesstext rechts. Die Spalte misst (1448 - --band-gasse) / 2, also 695,8 px bei 1661 px und 692,5 px bei 1850 px Fenster; sie faellt in diesem Bereich nie unter 692 px (ab 1560 px steht .bahn am Deckel). --ring-mass darum fest auf 680 px: passt in jede Spalte dieses Bereichs, ohne an ihr zu kleben. Platz 149,6 px · Bahnradius 251,6 px · freie Mitte 353,6 px Mitte 285,6 px breit, darin Platz fuer 209 px Hoehe (gebraucht 202) Abstand zweier Nachbarn auf der Bahn: 2 x 251,6 x sin36° = 295,8 px bei 149,6 px Plattenbreite — 146 px Luft, nichts beruehrt sich. b) 1280–1660 px — eine Spalte, Ring oben, Fliesstext darunter, Mitte im Ring. --ring-mass clamp(300px, 56vw, 700px) steht ab 1250 px Fenster am Deckel von 700 px. Platz 154 · Bahn 259 · freie Mitte 364 · Mitte 294 breit, darin 215 px Hoehe moeglich (202 noetig). Warum 1280 und nicht 1180: bei 1180 px misst der Ring 660,8 px und die Mitte haette 277,5 x 202 px — genau die 202 px, die sie braucht, ohne einen Millimeter Spielraum. Eine Zahl, die auf sich selbst aufgeht, ist keine Reserve. c) 941–1279 px — eine Spalte, die Mitte steht UNTER dem Kreis. Gleiche Formel, 56vw: 527 px bei 941 px Fenster, Platz 116 px. Die Mitte in den Ring zu zwingen hiesse hier, den Ausleihsatz auf 190 px Breite zu brechen — sechs Zeilen, die die Ohrstuecke ueberlaufen. d) bis 940 px — eine Spalte, Mitte unter dem Kreis, dafuer GROESSERE Ohrstuecke: --stueck-anteil 0,26 statt 0,22, weil die Mitte den Platz nicht mehr braucht. --ring-mass clamp(240px, 70vw, 560px). 940 px Fenster: Ring 560 · Platz 145,6 430 px Fenster: Ring 301 · Platz 78,3 · .bahn innen 395,6 375 px Fenster: Ring 262,5 · Platz 68,3 · .bahn innen 343 Bei 375 px bleiben also 80 px Luft neben dem Ring; es gibt kein Querscrollen. Ein eigener Zweig bei 430 px ist nicht noetig — der clamp laeuft stetig mit. Der Ring BLEIBT auf dem Telefon ein Ring: bei 262,5 px Durchmesser stehen die Nachbarn 108 px auseinander bei 68 px Breite, die Ohrstuecke beruehren sich nicht und bleiben erkennbar. Eine „ruhige Reihe" waere hier der Verzicht auf genau das, was er bestellt hat; die Reihe steht trotzdem bereit — als Rueckfall fuer Browser ohne sin() (siehe unten) und als sichtbare Namensliste unter dem Ring. ── Anzeigegroessen und srcset ─────────────────────────────────────────── Das sizes-Etikett in vorlagen/leistung.php folgt genau dieser Rechnung: (max-width:800px) 19vw — Platz 18,2vw, solange 70vw unter 560 ist (max-width:940px) 146px — ab 800 px Fenster steht der Ring am Deckel (max-width:1249px) 13vw — Platz 12,32vw (0,22 x 56vw) 154px — ab 1250 px Deckel, ab 1661 px 149,6 px Damit waehlt ein Browser mit doppelter Punktdichte die 320er-Fassung (154 x 2 = 308 <= 320) und nicht die 640er. Geladen werden so 49–89 KB je Ohrstueck statt 145–322 KB. functions.php bindet assets/css/teil-*.css alphabetisch nach seiten.css ein. „zc" sortiert hinter jede bestehende Datei; jede Regel hier gewinnt ueber die Ladereihenfolge. Die Datei enthaelt kein !important. ========================================================================= */ /* ── Die Masse je Haltepunkt ───────────────────────────────────────────── Alle vier Werte haengen an --ring-mass; wer den Ring groesser will, aendert eine Zahl. Bewusst OHNE Prozent: nachgerechnet bindet min(100%, …) an keinem einzigen Haltepunkt (70vw gegen 92vw nutzbare Bahn, 56vw gegen 92vw, 680px gegen 692px Spalte). Prozent in --stueck und --ring-r wuerde sich ausserdem je Eigenschaft auf eine andere Bezugsgroesse beziehen — Breite bei left, Hoehe bei top. Laengen tun das nicht. -------------------------------------------------------------------- */ .leistung .ring-teil{ --ring-mass:clamp(240px, 70vw, 560px); --stueck-anteil:.26; --ring-rand:calc(var(--ring-mass) * .02); --stueck:calc(var(--ring-mass) * var(--stueck-anteil)); --ring-r:calc((var(--ring-mass) - var(--stueck)) / 2 - var(--ring-rand)); --ring-mitte-breite:calc(var(--ring-mass) * .42); --ring-luft:clamp(1rem, 2vw, 1.75rem); } @media (min-width:941px){ .leistung .ring-teil{ --ring-mass:clamp(300px, 56vw, 700px); /* 0,21 und nicht 0,22: im Browser gemessen (04.10.2026, 1850 px Fenster) ist die Mitte 212,8 px hoch und nicht die gerechneten 202 px — ihre Diagonale kam damit auf 356,1 px gegen 353,6 px freien Durchmesser. Ein Prozentpunkt weniger Platzbreite bringt den freien Durchmesser auf 367,2 px und damit 14 px Luft. Besser am Ohrstueck sparen als die Schrift in die Bilder laufen lassen. */ --stueck-anteil:.21; } } @media (min-width:1661px){ /* Die Spalte misst hier nie weniger als 692 px (Rechnung oben, Punkt a). */ .leistung .ring-teil{ --ring-mass:680px } } /* ── Der Ring als Ganzes ───────────────────────────────────────────────── Drei Zeilen untereinander: Kreis, Mitte, Namensschilder. Ab 1280 px legt sich die Mitte in den Kreis (weiter unten) — dann bleiben zwei Zeilen. -------------------------------------------------------------------- */ .leistung .ring{ display:grid; justify-items:center; row-gap:var(--ring-luft); margin-inline:auto; width:100%; } /* Der Kreis OHNE sin(): eine ruhige Reihe. Das ist zugleich der Rueckfall fuer Browser, die die Winkelfunktionen nicht koennen — siehe @supports. Keine feste Hoehe, keine Bahn, nichts, was ohne die Rechnung falsch waere. */ .leistung .ring-kreis{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(.5rem, 1.4vw, 1rem); max-width:100%; } /* Der Platz eines Ohrstuecks. Quadratisch und in beiden Gestalten gleich gross, damit beim Umschalten nichts springt. */ .leistung .ring-platz{ width:var(--stueck); height:var(--stueck); } /* Das Ohrstueck selbst. object-fit:contain und nicht cover: das Motiv ist quadratisch angelegt und senkrecht eingerueckt (Messung 1) — cover wuerde bei einem kuenftigen, nicht ganz quadratischen Bild beschneiden, contain nie. Die Datei traegt width/height 640, die Flaeche steht also vor dem Laden fest. */ .leistung .ring-stueck{ display:block; width:100%; height:100%; object-fit:contain; } /* ── Die Mitte ─────────────────────────────────────────────────────────── Ruf, Namensschild des gezeigten Modells, Ausleihsatz, Knopf. Die enge Breite (0,42 x Ring) gilt NUR, solange die Mitte im Ring steht — sie ist dort eine Folge des freien Kreises, kein Satzspiegel. Steht die Mitte unter dem Kreis, hat sie die ganze Bahn und nimmt davon eine lesbare Spalte. Gemessen am 04.10.2026, bevor das getrennt war: bei 375 px Fenster war die Mitte 110,3 px breit und 336,8 px hoch — der Ausleihsatz lief als schmale Saeule ueber den halben Bildschirm. -------------------------------------------------------------------- */ .leistung .ring-mitte{ display:grid; justify-items:center; align-content:center; /* .45rem statt .55rem — dieselbe Messung wie beim Platzanteil: drei Zeilenabstaende sind 4,8 px Hoehe, die der Mitte im Ring fehlen. */ row-gap:.45rem; max-width:min(100%, 32rem); text-align:center; z-index:1; } .leistung .ring-ruf{ margin:0; font-size:clamp(1.12rem, 1.5vw, 1.34rem); font-weight:850; line-height:1.12; letter-spacing:-.015em; color:var(--blau); } /* Der Name des Ohrstuecks, auf das gerade gezeigt wird. Das Feld ist IMMER da und immer gleich hoch (1,3em = 17,7 px bei 13,6 px Schrift), auch wenn es leer ist — sonst huepft der Satz darunter, sobald die Maus ueber ein Ohrstueck faehrt. Gefuellt wird es vom kleinen Skript in vorlagen/leistung.php, nicht von CSS. */ .leistung .ring-modell{ margin:0; min-height:1.3em; font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; line-height:1.3; color:var(--gold-tief); } .leistung .ring-satz{ margin:0; font-size:clamp(.82rem, .95vw, .88rem); line-height:1.5; color:var(--text-leise); } /* Der Knopf im Ring ist kleiner als der Knopf am Seitenfuss: 38,5 px hoch statt 49,6 px. Die 11,1 px sind in der Rechnung oben eingeplant — mit dem grossen Knopf braeuchte die Mitte 213 px, und im Zweig a) stehen nur 209 px zur Verfuegung. Dort, bei zwei Spalten, waere sie uebergelaufen. */ .leistung .ring-mitte .knopf{ font-size:.86rem; padding:.72em 1.25em; } /* ── Die Namensschilder ────────────────────────────────────────────────── Fuenf echte