/* Inhaltsseiten: EIN Blockdesign, Fassung a5 (seit 1.33.0 die einzige; a, a2, a3, a4 entfernt 19.10.2026) -- wmch-shop 1.26.0 (a5 1.28.0), * 17.10.2026, Worker shop-inhaltsseiten. Laedt nur mit aktiver Fassung * (WMCH_Inhaltsseite::assets), nach dem Customizer-CSS und nach basic.css. * Das Markup baut inhaltsseiten.js; Masse wie im Mockup * shop/entwuerfe/inhaltsseiten-20261017/ (gemessen 1280/1920/390). * * body.wm-seite-a .wm-acc sichtbar: Checklisten ganz offen, FAQ-Akkordeon * (eine Fassung B, Fragen links / Antwort rechts, hat der * Nutzer am 17.10.2026 gestrichen) * figure.wm-mood Mood-Bild 2:3, rechts, sticky; Handy: 4:3 ueber dem Block * * Farben: Navy var(--blue) aus theme.css; Linien Navy 18 % statt Schwarz * (basic.css setzt beim Akkordeon 1 px #000). Rot/Gruen tragen nichts. */ body.wm-seite-neu{ --wm-line:rgba(0,39,76,.18); --wm-radius:12px; } /* seiten-ausrichtung begrenzt Liste (768) und FAQ-Kasten (880) -- die Huelle ist jetzt .wm-spalten; die Breiten gelten je Fassung unten. */ .wm-spalten{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; } @media (min-width:992px){ body.wm-seite-a .wm-spalten{ grid-template-columns:minmax(0,704px) minmax(240px,420px); column-gap:clamp(40px,5vw,96px); align-items:start; } } .wm-text{ min-width:0; } /* ---- Mood-Bild ---- */ .wm-mood{ margin:0; position:sticky; top:calc(var(--hh, 84px) + 24px); } .wm-mood img{ display:block; width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:var(--wm-radius); } @media (max-width:991px){ .wm-mood{ position:static; order:-1; } .wm-mood img{ aspect-ratio:4/3; max-height:min(52vh,420px); object-position:50% 45%; } } /* ---- Check-Icon (Endzustand der Theme-Animation, ohne Ripple) ---- */ .wm-seite-neu .check{ display:block; } .wm-seite-neu .check svg{ display:block; width:100%; height:100%; overflow:visible; } .wm-seite-neu .check .disc, .wm-seite-neu .check .tick{ transform:none; animation:none; stroke-dashoffset:0; } /* ---- A: Akkordeon mit Haken ---- */ .wm-acc{ display:none; max-width:704px; } body.wm-seite-a .wm-acc{ display:block; } .wm-block{ border-bottom:1px solid var(--wm-line); } .wm-block:first-child{ border-top:1px solid var(--wm-line); } .wm-block__h{ margin:0; font-size:inherit; line-height:inherit; font-weight:inherit; } .wm-block__btn{ display:grid; grid-template-columns:40px minmax(0,1fr) 32px; align-items:center; gap:24px; width:100%; padding:20px 0; margin:0; background:none; border:0; cursor:pointer; text-align:left; color:var(--blue); font:inherit; letter-spacing:inherit; border-radius:0; touch-action:manipulation; } .wm-block__btn:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; } .wm-block__t{ font-size:var(--fz-h3); font-weight:500; line-height:1.3; letter-spacing:.02em; text-wrap:pretty; } .wm-block__btn .check{ width:40px; height:40px; } .wm-chev{ width:32px; height:32px; display:grid; place-items:center; } .wm-chev svg{ width:32px; height:32px; } .wm-block.offen .wm-chev{ transform:rotate(180deg); } /* Lesebreite: 640 px waren fuer 18 px Fliesstext gerechnet (~77 Zeichen); bei 16 px (bis 1199) wurden es 80. Darum in em der eigenen Schrift: 36em = 576 px bei 16 px (~72 Zeichen), 648 -> gedeckelt 640 bei 18 px wie bisher. font-size am Behaelter, damit em der Leiter folgt (schrift-audit 21.10.2026, Challenge Gate F1: 72ch waere ein Nullschlag gewesen). */ .wm-block__text{ padding:0 0 24px 64px; font-size:var(--fz-p); max-width:calc(min(640px, 36em) + 64px); } .wm-block__text p + p, .wm-block__text ul{ margin-top:12px; } @media (hover:hover){ .wm-block__btn:hover .wm-block__t{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; } } @media (prefers-reduced-motion:no-preference){ .wm-chev{ transition:transform .3s cubic-bezier(.16,1,.3,1); } } @media (max-width:1199px){ .wm-block__btn{ grid-template-columns:32px minmax(0,1fr) 24px; gap:16px; padding:16px 0; } .wm-block__btn .check{ width:32px; height:32px; } .wm-chev, .wm-chev svg{ width:24px; height:24px; } .wm-block__text{ padding-left:48px; } } @media (max-width:767px){ .wm-block__text{ padding-left:0; } } /* ---- Einblend-Animation des Themes innerhalb der Bloecke AUS ---- * animation.css setzt .wpb_content_element .wpb_wrapper und .animation_el auf * opacity 0 + translateY(56px), theme.js blendet beim Hineinscrollen ein * (is_shown). Die Antworten der FAQ stecken in solchen Textbloecken; nach dem * Umbau liegen sie in einem zugeklappten Block, den theme.js nie "sieht" -- * beim Aufklappen blieb der Text unsichtbar (Nutzer 17.10.2026, Variante A, * FAQ). Innerhalb der neuen Bloecke gilt die Animation deshalb nicht. */ .wm-block__text .wpb_content_element .wpb_wrapper, .wm-block__text .animation_el{ opacity:1 !important; transform:none !important; transition:none !important; will-change:auto; } /* ---- Abschnittstitel auf EINER Zeile (Nutzer 17.10.2026 ~16:45) ---- * Die H2 stecken in einer halben WPBakery-Spalte (vc_col-sm-6, 572 px bei * 1280) und brachen deshalb um ("Uhrmacherpruefung von Echtheit und / * Qualitaet"). Ab 992 px darf der Titel bis 190 % seiner Spalte laufen * (1'087 px bei 1280, 1'627 bei 1920 -- die laengste Ueberschrift misst * ~700 px bei 32 px); darunter stapelt WPBakery die Spalten ohnehin. */ @media (min-width:992px){ body.wm-seite-neu .wpb-content-wrapper > .vc_section.default_section .vc_col-sm-6 h2{ width:max-content; max-width:190%; } } /* ---- a5 "a-2 - kleine Bilder mittig": das Bild am Uhrenfeld des Kopfbilds ---- * Nutzer 19.10.2026: die kleinen Bilder an der Linie der Header-Uhr, die * Bildmitte auf der Mitte des Uhrenfelds. Wo die Linie im Fenster liegt, haengt * an Breite UND Hoehe des Fensters (Kopfbild object-fit: cover) -- das kann * CSS nicht ohne die Masse der Datei. inhaltsseiten.js misst darum das * Kopfbild und setzt je Raster --wm-a5-spalten ("px px"). * Erst MIT dem Wert bekommt das Raster die Klasse wm-spalten--linie; ohne * (kein Skript, unter 1200 px ohne Linie) gilt das Grundraster oben. * Bis 19.10.2026 hiess die Variable --wm-a4-spalten (Fassung a4, entfernt). */ @media (min-width:992px){ body.wm-seite-a5 .wm-spalten.wm-spalten--linie{ grid-template-columns:var(--wm-a5-spalten); column-gap:48px; } } /* ---- FAQ (DE 1223, EN 1541) an der Kante des Logos (19.10.2026, a5 ausgerollt) ---- * Die FAQ steht nicht im Customizer-Block seiten-ausrichtung: das Theme rueckt * ihre Zeilen (small_row) ab 1200 px ein (gemessen 1440: Raster 230-1210, * Titel bei 58), das Mood-Bild blieb dadurch bei 326 px. Hier dieselbe Regel * wie im Block -- nur mit Fassung (diese Datei laedt sonst nicht); EN seit * 20.10.2026 (a5 auch auf EN). */ @media (min-width:1200px){ body.wm-seite-neu:is(.page-id-1223, .page-id-1541) .default_section :is(.small_row, .smaller_row){ padding-inline:0; } } /* ---- Ueber uns (DE 36, EN 1540) wie a5 (wmch-shop 1.52.0, 23.10.2026, Worker ueber-uns-layout) ---- * Nutzer 23.10.2026: "UEBER UNS ... Schriftgroessen / Abstaende zur * Header-Leiste ... an die anderen Seiten angleichen", Variante A. Die Seite * hat kein Kopfbild und keine Liste: Titelzeile (kontakt_title_row), Text * links, Doppelbild rechts, darunter "Unsere Partner". Die Regeln haengen an * den Klassen dieser Bausteine (kontakt__content, kontakt_title_row), nicht * an Seiten-IDs -- welche Seite a5 hat, sagt allein SEITEN. * Fliesstext .h4 (20 px, 1.3) -> wie a5 und jeder Absatz: --fz-p, 1.4 * (18 px ab 1200, 16 darunter) * Lesebreite hoechstens 640 px bzw. 36em wie .wm-block__text (Partnertext * lief bei 1440 ueber 1112 px) * Titel BEIDE Titelzeilen ("Über uns" h1, "Unsere Partner" h2) * wie die Abschnittstitel der a5-Seiten ("In 3 Schritten zum * Verkauf", h2 in basic.css): h2-Stufe, Manrope 400, .02em. * Runde 2, Nutzer 23.10.2026: "'Über uns' muss die gleiche * Header Schrift und Grösse sein wie 'In 3 Schritten zum * Verkauf' auch 'Unsere Partner' (nicht alles in * Grossbuchstaben!)". Bis dahin blieb der Seitentitel Playfair * --fz-h1 (44). Die Versalien standen im TEXT -- geaendert mit * shop/API/ueber-uns-titel.php, nicht hier. * "Unsere Partner" ist seit 24.10.2026 ein h2 (Nutzer: eine * Hauptueberschrift je Seite; shop/API/ueber-uns-h2.php) -- * die Regel trifft beide Tags, sichtbar aendert sich nichts. * Den Abstand Kopfleiste -> Titel setzt der Customizer-Block titelzeile * (gilt auch fuer die Rechtsseiten, die a5 nicht haben). */ body.wm-seite-neu .kontakt__content .h4 p{ font-size:var(--fz-p); line-height:1.4; } body.wm-seite-neu .kontakt__content .wpb_text_column{ font-size:var(--fz-p); max-width:min(640px, 36em); } body.wm-seite-neu .wpb-content-wrapper > section.vc_section > .kontakt_title_row :is(h1, h2){ font-family:"Manrope",sans-serif; font-size:var(--fz-h2); line-height:1.3; font-weight:400; letter-spacing:.02em; } /* ---- Partnerlogos unter "Unsere Partner" (wmch-shop 1.64.0, 31.10.2026, Worker partner-logos) ---- * Markup aus dem Shortcode [wm_partner] (WMCH_Partner), in einer eigenen * Zeile der Sektion. Entscheide des Nutzers: vier Gruppen, keine Links, alle * Logos Navy (die Dateien SIND navy, hier wird nichts eingefaerbt). * Desktop je Gruppe eine Zeile: Titel links (22 %, mind. 200 px), Logos * rechts, dazwischen eine Haarlinie in Navy 14 % * < 768 Titel ueber den Logos, zwei Logos je Zeile, Logos 75 % * Die Hoehe je Logo setzt WMCH_Partner::hoehe() als --h (gleiche Flaeche je * Logo). Gewicht body.wm-seite-neu + Klasse: basic.css gibt * .wpb_text_column ul Einzug und Abstand und h3 die Staerke 500. * Kein eigener Rand oben: die Zeile davor traegt den Zeilenabstand des * Themes (48 px bei 1440) -- ein margin-top verdoppelte ihn auf 96. */ body.wm-seite-neu .wm-partner__gruppe{ display:grid; grid-template-columns:minmax(200px, 22%) 1fr; column-gap:48px; align-items:center; padding:32px 0; border-top:1px solid rgba(0,39,76,.14); } body.wm-seite-neu .wm-partner__titel{ margin:0; font-family:"Manrope",sans-serif; font-size:var(--fz-p); line-height:1.4; font-weight:400; letter-spacing:.02em; color:rgba(0,39,76,.68); } body.wm-seite-neu .wm-partner__logos{ display:flex; flex-wrap:wrap; align-items:center; gap:24px 64px; margin:0; padding:0; list-style:none; } body.wm-seite-neu .wm-partner__logo{ margin:0; padding:0; line-height:0; } body.wm-seite-neu .wm-partner__logo img{ display:block; width:auto; max-width:100%; height:var(--h); object-fit:contain; object-position:left center; } @media (max-width:767px){ body.wm-seite-neu .wm-partner__gruppe{ grid-template-columns:1fr; row-gap:20px; padding:24px 0; } body.wm-seite-neu .wm-partner__logos{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; } body.wm-seite-neu .wm-partner__logo img{ height:calc(var(--h) * .75); } }