/* ========================================================================== ModelHub — Vorschau-Regler Gemeinsames Modul fuer ALLE Demo-Vorlagen. Liegt bewusst ausserhalb der Vorlagen-Ordner, damit eine Aenderung sofort ueberall gilt. Erscheint NUR auf Vorschauseiten (``). Auf der echten Website eines Models ist das Attribut entfernt — dann laedt das Modul zwar mit, zeigt aber nichts an. Alle Klassen tragen das Praefix `mh-`, alle Farben stehen fest im Modul. Es erbt nichts von der Vorlage und faerbt nichts von ihr ein. ========================================================================== */ :root{ --mh-ui-ink:#0d0e10; --mh-ui-paper:#f4f4f5; --mh-ui-line:#33363b; --mh-ui-mute:#9aa0a6; --mh-ui-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } /* Ohne data-demo bleibt alles unsichtbar — Sicherheitsnetz zusaetzlich zum JS */ html:not([data-demo]) .mh-bar, html:not([data-demo]) .mh-tab{display:none!important} /* --- Leiste --------------------------------------------------------------- Unten MITTIG, nicht unten rechts. Die rechte untere Ecke gehoert im Web den Cookie-Bannern, Chat-Blasen und Barrierefreiheits-Plugins; ein Zahnrad an dieser Stelle wird als Pflichtwerkzeug gelesen und weggeklickt. Die Leiste zeigt stattdessen, was sie kann: vier Gesichter. */ .mh-bar{ position:fixed;z-index:9000; left:50%;bottom:20px; /* KEIN Auftritt. Die Leiste ist einfach da. Drei Anlaeufe, drei Male unsichtbar: erst per JavaScript-Klasse (ein ReferenceError liess sie unten liegen), dann als Animation mit `both`-Fuellung (haelt waehrend der Verzoegerung den Startzustand), dann als Animation ohne Fuellung (eine laufende, aber nicht fortschreitende Animation haelt den Startzustand ebenfalls). Gemeinsame Ursache: Die Sichtbarkeit haing an etwas, das ausfallen kann. Jetzt haengt sie an nichts — die Position steht fest im Stylesheet. Prominenz macht ohnehin die Gestaltung, nicht die Bewegung. */ transform:translate(-50%,0); display:flex;align-items:stretch;gap:0; max-width:calc(100vw - 24px); background:rgba(16,17,19,.93); -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px); border:1px solid rgba(255,255,255,.11); border-radius:16px; box-shadow:0 18px 50px -12px rgba(0,0,0,.6); color:var(--mh-ui-paper); font-family:var(--mh-ui-font); overflow:hidden; transition:opacity .55s ease,transform .7s cubic-bezier(.16,1,.3,1); } /* Wartezustand: liegt tiefer und ist durchsichtig, bis die Intro-Sequenz der Vorlage durch ist. Wird von customizer.js abgenommen — bewusst KEINE Animation mit Rueckwaerts-Fuellung, an der ist die Leiste am 02.09.2026 dreimal haengengeblieben. Faellt das Skript aus, gibt es die Leiste ohnehin nicht: Sie wird von ebendiesem Skript erzeugt. */ .mh-bar.is-waiting,.mh-tab.is-waiting{ opacity:0; transform:translate(-50%,24px); pointer-events:none; } .mh-sec{display:flex;align-items:center;gap:12px;padding:11px 16px;flex:none} .mh-sec + .mh-sec{border-left:1px solid rgba(255,255,255,.11)} /* Die Gesichterreihe ist der nachgiebige Teil. Ohne das schoben sich auf schmalen Geraeten Zuruecksetzen und Einklappen aus der Leiste heraus — overflow:hidden liess sie lautlos verschwinden. */ .mh-sec--worlds{flex:0 1 auto;min-width:0} .mh-lead{ display:flex;flex-direction:column;gap:1px;padding-right:2px; line-height:1.25; } .mh-lead b{font-size:12.5px;font-weight:600;letter-spacing:-.01em} .mh-lead span{font-size:10.5px;color:var(--mh-ui-mute)} /* --- Die Gesichter -------------------------------------------------------- */ /* Der Ring der aktiven Auswahl liegt als box-shadow AUSSERHALB des Elementkastens (2px hell + 2px dunkel) und der Kreis ist zusaetzlich auf 1.07 vergroessert — zusammen rund 6px ueber den Kasten hinaus. Ein Scrollbereich beschneidet das: `overflow-x:auto` laesst die Y-Achse nicht auf `visible`, sie wird ebenfalls zu `auto`. Deshalb hier Luft schaffen und sie per negativem Aussenabstand wieder aus dem Layout nehmen — sonst wuerde die Leiste 16px hoeher. */ .mh-worlds{display:flex;gap:9px;padding:11px 6px;margin:-11px -6px; overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .mh-worlds::-webkit-scrollbar{display:none} .mh-w{flex:none} .mh-w{ position:relative; display:flex;flex-direction:column;align-items:center;gap:5px; background:none;border:0;padding:0;cursor:pointer; font:inherit;color:inherit; width:52px; } .mh-w i{ display:block;width:40px;height:40px;border-radius:50%; background:#2a2d31 center/cover no-repeat; box-shadow:0 0 0 1.5px rgba(255,255,255,.16); transition:box-shadow .28s ease,transform .35s cubic-bezier(.16,1,.3,1),filter .28s ease; filter:saturate(.75) brightness(.82); } .mh-w span{ font-size:9.5px;letter-spacing:.03em;color:var(--mh-ui-mute); white-space:nowrap;transition:color .25s ease; } .mh-w:hover:not([disabled]) i{transform:scale(1.07);filter:none} .mh-w:hover:not([disabled]) span{color:var(--mh-ui-paper)} .mh-w[aria-pressed="true"] i{ box-shadow:0 0 0 2px var(--mh-ui-paper),0 0 0 4px rgba(16,17,19,.9); filter:none;transform:scale(1.07); } .mh-w[aria-pressed="true"] span{color:var(--mh-ui-paper);font-weight:600} .mh-w[disabled]{cursor:not-allowed} .mh-w[disabled] i{filter:grayscale(1) brightness(.42);box-shadow:0 0 0 1px rgba(255,255,255,.1)} .mh-w[disabled] span{opacity:.45} /* --- Schwarzweiss / Farbe ------------------------------------------------- */ .mh-seg{display:flex;background:rgba(255,255,255,.07);border-radius:9px;padding:3px} .mh-seg button{ background:none;border:0;cursor:pointer; padding:6px 11px;border-radius:6px; font:inherit;font-size:11.5px;color:var(--mh-ui-mute); transition:background .22s ease,color .22s ease; } .mh-seg button:hover{color:var(--mh-ui-paper)} .mh-seg button[aria-pressed="true"]{background:var(--mh-ui-paper);color:var(--mh-ui-ink);font-weight:600} /* --- Rechter Abschluss ---------------------------------------------------- */ .mh-end{display:flex;align-items:center;gap:10px;padding:11px 13px 11px 14px;flex:none; border-left:1px solid rgba(255,255,255,.11)} .mh-note{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mh-ui-mute);white-space:nowrap} .mh-icon{ background:none;border:0;cursor:pointer;padding:5px;border-radius:7px; color:var(--mh-ui-mute);display:grid;place-items:center; transition:color .22s ease,background .22s ease; } .mh-icon:hover{color:var(--mh-ui-paper);background:rgba(255,255,255,.09)} .mh-icon svg{width:14px;height:14px;display:block} /* --- Eingeklappt: schmale Lasche ------------------------------------------ */ .mh-tab{ position:fixed;z-index:9000; left:50%;bottom:20px;transform:translate(-50%,0); display:flex;align-items:center;gap:9px; padding:10px 16px; background:rgba(16,17,19,.93); -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px); border:1px solid rgba(255,255,255,.11);border-radius:999px; box-shadow:0 14px 40px -12px rgba(0,0,0,.55); color:var(--mh-ui-paper);font-family:var(--mh-ui-font); font-size:12px;cursor:pointer; transition:opacity .55s ease,transform .7s cubic-bezier(.16,1,.3,1); } .mh-tab u{ display:block;width:22px;height:22px;border-radius:50%; background:#2a2d31 center/cover no-repeat; box-shadow:0 0 0 1.5px rgba(255,255,255,.22); } [hidden]{display:none!important} .mh-w:focus-visible,.mh-seg button:focus-visible,.mh-icon:focus-visible,.mh-tab:focus-visible{ outline:2px solid #e0b64a;outline-offset:2px; } /* ========================================================================== Was der Regler an der VORLAGE aendert Genau eines: die Klasse `mh-bw` fuers Entsaettigen. Der Bildtausch laeuft ueber `src`, nicht ueber CSS. Alles andere bleibt Sache der Vorlage — so bleibt das Modul mit jeder Vorlage vertraeglich. ========================================================================== */ html.mh-bw img{filter:grayscale(1)} html.mh-bw video{filter:grayscale(1)} /* --- Schmale Viewports: zwei Zeilen statt Scrollreihe --------------------- Mit fuenf Welten passt die Reihe einzeilig nicht mehr neben Schalter und Knoepfe. Vorher scrollte sie seitlich — dabei lag "Male 50+" bei 390px ausserhalb und bei 360px sogar zwei Welten. Was man wegwischen muss, findet niemand. Jetzt bekommt die Reihe eine eigene Zeile ueber voller Breite; Schalter und Knoepfe ruecken darunter. Das traegt auch eine sechste Welt. */ @media (max-width:640px){ /* Breite festsetzen, nicht nur deckeln: Eine umbrechende Flex-Leiste richtet sich sonst nach ihrem Inhalt und wird SCHMALER statt breiter — dadurch fehlten dem Gesichterband 4px und die fuenfte Welt fiel heraus. */ .mh-bar{flex-wrap:wrap;bottom:12px;border-radius:14px;width:calc(100vw - 24px)} .mh-sec--lead{display:none} /* leere Huelle wuerde Platz kosten */ .mh-note{display:none} .mh-sec--worlds{ flex:1 0 100%; border-bottom:1px solid rgba(255,255,255,.11); padding:10px 12px; } .mh-worlds{ justify-content:space-between;width:100%; overflow:visible; /* passt jetzt, nichts zu scrollen */ gap:4px;padding:9px 4px;margin:-9px -4px; } /* Zweite Zeile: Schalter links, Knoepfe rechts */ .mh-sec + .mh-sec{border-left:0} .mh-end{border-left:0;margin-left:auto} .mh-sec{padding:9px 12px} .mh-end{padding:9px 12px;gap:8px} } @media (max-width:420px){ .mh-w{width:44px} .mh-w i{width:36px;height:36px} .mh-w span{font-size:9px} .mh-seg button{padding:6px 10px} } @media (prefers-reduced-motion:reduce){ .mh-bar,.mh-tab,.mh-w i{transition:none!important} .mh-bar,.mh-tab{transform:translate(-50%,0)} .mh-bar.is-waiting,.mh-tab.is-waiting{transform:translate(-50%,0)} } /* --- Wohin ein Beschnitt faellt ------------------------------------------ Ein Bild wird fast nie in genau dem Verhaeltnis gezeigt, in dem es geschnitten wurde: novaelles Portfolio-Raster hat feste Zeilenhoehen, also wird der Kasten mit schmalerem Fenster breiter — bei 1024px um rund 15%. `object-fit:cover` nimmt die ueberzaehlige Hoehe standardmaessig oben UND unten zu gleichen Teilen weg, und oben sitzt der Kopf. 32% statt 50% verschiebt den Beschnitt nach unten. Der Wert ist nicht geraten: Die Ausschnitte setzen das Gesicht auf 34% der Bildhoehe, und bei 32% bleibt es genau dort stehen, egal wie stark beschnitten wird ((0,34 - 0,32t)/(1-t) = 0,34). Fuesse koennen fehlen, Koepfe nie. Wirkt nur, WENN beschnitten wird — am Desktop, wo Datei- und Kastenmass uebereinstimmen, aendert die Zeile nichts. */ html[data-demo] img[data-slot]{object-position:center 32%}