/* ============================================================================ AUTOHAUS OPPITZHAUSER — "Schauraum" Volledig nieuwe designtaal. Eén showroom, twee merken. Licht en rustig als basis, één donkere filmische band per pagina voor de auto. Merkidentiteit zit uitsluitend in --marke (accent) + de fotografie. ========================================================================== */ /* ⚠️ GEEN @import naar Google Fonts meer. Een @import in een stylesheet is een ketting: de browser haalt eerst de HTML, dan dit bestand, ontdekt pas dán de import, haalt de Google-CSS op en pas daarna de lettertypes zelf — vier stappen achter elkaar naar twee vreemde servers voordat er ook maar één letter goed staat. Beide fonts zijn variabel, dus twee lokale bestanden dekken alle gewichten (samen 71 KB) en komen mee over dezelfde verbinding als de rest van de site. */ @font-face{ font-family:'Manrope'; src:url('oh-font-manrope.woff2') format('woff2'); font-weight:200 800; /* variabel: één bestand, alle gewichten */ font-style:normal; font-display:swap; /* tekst is meteen leesbaar in de systeemletter */ } @font-face{ font-family:'Inter'; src:url('oh-font-inter.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } :root{ /* papier & inkt */ --paper:#fbfbfa; --paper-2:#f2f2f0; --card:#ffffff; --ink:#16181c; --ink-2:#5a616b; --ink-3:#8c939c; --hair:#e6e5e2; --night:#101215; --night-2:#191c21; /* Merkaccent — wordt per merk gezet. ⚠️ De grondwaarde is het MARINEBLAUW UIT HUN EIGEN LOGO (#0a1432, gemeten op het woordmerk in opp-logo.png). Dat was hiervoor bijna-zwart (#16181c), en dat is precies wat Louis op 26-08-2026 liet vervangen: "make the secondary color of the website the dark navy color that comes back in the logo". Elke volle knop, elk pijl-linkje, elk labeltje en elke menu-markering draait op dit ene token, dus dit is de enige plek waar die kleur staat. ⛔ Schrijf hem nergens los in een paginabestand. --marke-op is de HOVERKLEUR. Die is nodig omdat de oude `filter:brightness(1.15)` op een kleur die zo donker is niets zichtbaars doet (10,20,50 wordt 11,23,57 — dat ziet niemand). De opgelichte tint is ontleend aan de ring in hetzelfde logo (#38427d). */ --marke:#0a1432; --marke-zacht:#ecedf4; --marke-tekst:#ffffff; --marke-op:#1d2a5c; /* maat & ritme */ --kop:'Manrope',system-ui,sans-serif; --tekst:'Inter',system-ui,sans-serif; --breed:1220px; --lucht:clamp(3.5rem,8vw,7rem); --radius:4px; --nav:72px; } /* Hyundai houdt zijn EIGEN marine (#002c5f) — dat is een fabrikantskleur en geen zwart, dus die valt buiten de vervanging. Chery stond wél op zwart (#1a1a1a) en draagt nu de huiskleur van de dealer. */ [data-marke="hyundai"]{ --marke:#002c5f; --marke-zacht:#eaeff6; --marke-tekst:#ffffff; --marke-op:#00447f; } [data-marke="chery"]{ --marke:#0a1432; --marke-zacht:#ecedf4; --marke-tekst:#ffffff; --marke-op:#1d2a5c; } /* ── Ankersprongen ──────────────────────────────────────────────────────── De balk staat VAST bovenaan, dus een sprong naar #een-kop zette die kop er precies achter — op de telefoon net zo goed als op de desktop. Alleen de modelpagina en de planner hadden hier een eigen regel voor; de andere dertien pagina's niet, en die hebben óók ankers (voettekst → #datenschutz, service → #planer, contact → #termin, impressum, aktionen). ⚠️ `:where()` is bewust: die selector weegt NIETS, dus een pagina met een TWEEDE vaste strook (de ankerbalk op de modelpagina, `--nav` + 54px) kan er nog steeds overheen schrijven zonder !important. */ :where([id]){scroll-margin-top:calc(var(--nav) + 1rem)} *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media(max-width:760px){html{font-size:17px}} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--tekst); font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip} img,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--kop);font-weight:700;letter-spacing:-.025em;line-height:1.04;margin:0} p{margin:0} .mid{width:min(var(--breed),100% - clamp(2rem,7vw,5rem));margin-inline:auto} /* ── typografische schaal ── */ .xxl{font-size:clamp(2.8rem,7.5vw,5.6rem)} .xl{font-size:clamp(2.1rem,4.8vw,3.4rem)} /* ⛔ EEN DUITSE SAMENSTELLING KAN BREDER ZIJN DAN ZIJN VAK, EN DAN VALT HIJ STIL BUITEN BEELD. Gemeten op 320 px: „Gebrauchtwagen." is 372 px breed in een kolom van 288, „Renngeschichte." 353, „Kilometerbegrenzung." 347, „Fachwerkstätte" 323. De held staat op `overflow:hidden`, dus GEEN ENKELE overloopmeting ziet dit — de rechterkant van het woord is er gewoon niet. Vijftien gevallen over vier pagina's, en dat wordt er alleen maar meer: het Duits maakt nu eenmaal lange woorden. Afbreken is hier het juiste middel en niet de type verkleinen: een kop die op elke telefoon 20 % kleiner wordt, verzwakt de hele pagina voor vier woorden. `hyphens:auto` breekt op de plekken die het Duits toestaat (Ge-brauchtwagen), en dat kan alleen omdat elke pagina `` draagt. `break-word` is het vangnet voor een woord dat zelfs dan niet past. ⚠️ Haalt iemand ooit `lang="de"` weg, dan breekt dit op de verkeerde plek. */ @media(max-width:480px){ h1,h2,h3,h4{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word} } .lg{font-size:clamp(1.5rem,2.8vw,2.1rem)} .md{font-size:clamp(1.1rem,1.8vw,1.35rem)} .lood{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--ink-2);max-width:56ch} .fijn{font-size:.83rem;color:var(--ink-3)} /* het merkje boven een kop */ .merk{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--kop);font-weight:600; font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--marke)} .merk::before{content:"";width:22px;height:1px;background:currentColor;opacity:.55} /* ── knoppen ── */ .knop{display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-family:var(--kop);font-weight:600;font-size:.92rem;letter-spacing:-.005em; padding:.9rem 1.65rem;border:1px solid transparent;border-radius:var(--radius); cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s} .knop:hover{transform:translateY(-1px)} .knop--vol{background:var(--marke);color:var(--marke-tekst);border-color:var(--marke)} .knop--vol:hover{background:var(--marke-op);border-color:var(--marke-op)} /* De lijnknop stond op --ink (de tekstkleur, bijna zwart). Ook dat is een zwarte knop, dus die volgt het merkaccent mee. --ink blijft wat het is: lopende tekst. */ .knop--lijn{border-color:var(--marke);color:var(--marke)} .knop--lijn:hover{background:var(--marke);color:var(--marke-tekst)} .knop--licht{background:#fff;color:var(--ink);border-color:#fff} .knop--licht:hover{background:var(--paper-2);border-color:var(--paper-2)} .knop--glas{border-color:rgba(255,255,255,.5);color:#fff} .knop--glas:hover{background:rgba(255,255,255,.14)} /* het merkembleem als icoontje ín een gewone knop — witte knop, dus het embleem staat in de eigen merkkleur en steekt er duidelijk tegen af. De emblemen komen rechtstreeks uit de officiële merkbestanden (hyundai.com resp. chery.at), alleen het woordmerk is eraf gesneden. ⚠️ Ze staan op de kaphoogte van de knoptekst (±11 px), niet groter — en omdat de verhoudingen verschillen (Hyundai 2:1, Chery 3:1) krijgt elk merk een eigen hoogte, anders weegt Chery visueel veel zwaarder. */ /* ⚠️ Beide merkknoppen even breed en even hoog. Zonder vaste maat bepaalt de tekstlengte de breedte ("Hyundai Modelle" is langer dan "Chery Modelle") en staan ze ongelijk naast elkaar. De inhoud blijft gecentreerd. */ .knop--merk{padding-left:1.35rem;min-width:13.5rem;min-height:3.4rem} /* ⚠️ Op de telefoon NIET over de volle breedte. Ze stapelen daar onder elkaar, maar houden dezelfde maat als op het scherm — volle breedte maakt er banners van in plaats van knoppen. */ @media(max-width:420px){.knop--merk{min-width:13.5rem}} .knop__merk{flex:none;width:auto;object-fit:contain} .knop__merk--hyundai{height:12px} .knop__merk--chery{height:9px} .pijl{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--kop);font-weight:600;font-size:.88rem;color:var(--marke)} .pijl svg{transition:transform .25s} a:hover .pijl svg,.pijl:hover svg{transform:translateX(4px)} /* ── navigatie ── */ .balk{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)} .balk__in{display:flex;align-items:center;gap:1.5rem;height:var(--nav); width:min(var(--breed),100% - clamp(2rem,7vw,5rem));margin-inline:auto} /* Het logo is een LINK naar de startpagina en was maar 30 px hoog aan te raken. Het beeld blijft 30 px; het raakvlak wordt 44. */ .logo{margin-right:auto;display:flex;align-items:center;min-height:44px} /* ⚠️ height + width:auto is NIET genoeg als het beeld een FLEXITEM is: die mag krimpen, en dan wordt een logo van 1200x249 platgedrukt. Op de twee oudere pagina's gebeurde dat echt, bij 1024 px, tot 31x30 px. flex:none houdt de eigen breedte; contain zorgt dat het zelfs dan niet vervormt. */ .logo img{height:42px;width:auto;flex:none;object-fit:contain} .menu{display:flex;align-items:center;gap:.3rem} .menu a{white-space:nowrap;font-family:var(--kop);font-weight:500;font-size:.92rem;padding:.55rem .85rem; color:var(--ink);border-radius:var(--radius);transition:color .2s,background .2s} .menu a:hover{color:var(--marke);background:var(--marke-zacht)} .menu a[aria-current]{color:var(--marke)} .menu a[aria-current]::after{content:"";display:block;height:2px;background:var(--marke);margin-top:4px;border-radius:2px} /* ⛔ DE KNOP RECHTSBOVEN IS EEN FLEXITEM, EN DIE MAG KRIMPEN. Louis, 01-09-2026: „the button that says make an appointment in the top right is not good". Gemeten, en het waren drie fouten tegelijk: · De rij had 1.268 px nodig en de container is hoogstens 1.220 px breed. Op ELKE bureaubladbreedte, tot 1920 toe, brak „Termin vereinbaren" dus in twee regels af en werd de knop 67 px hoog in een balk van 72. · Tussen 941 en ~1.150 px liep de knop BUITEN het scherm: op 1024 stond er nog „Te / ve" tegen de rechterrand. Onzichtbaar in elke overloopmeting, want de balk knipt zijn eigen overloop weg. · En het LOGO was daar helemaal verdwenen — de eerste flexitem die het verschil moest opvangen. ⛔ `white-space:nowrap` alleen is niet genoeg: dan verschuift de knel naar het logo. Beide op `flex:none`, en de RUIMTE moet echt gevonden worden — zie de twee media-query's onderaan dit blok. Dit is hetzelfde lijk als het platgedrukte logo op de twee oudste pagina's. */ .balk .knop{padding:.62rem 1.15rem;font-size:.86rem} .balk__cta{flex:none;white-space:nowrap} .logo{flex:none} /* 44 x 44 is de ondergrens voor iets wat je met een duim raakt; dit stond op 39 x 42. De streepjes blijven even groot, alleen het raakvlak groeit. */ .hamburger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;margin-left:auto; min-width:44px;min-height:44px;align-items:center;justify-content:center;flex-direction:column} .hamburger span{display:block;width:23px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.3s} /* Negen menu-items, het logo en de knop passen alleen samen in 1.220 px als het menu krapper staat. Gemeten: zonder deze regel komt de rij 48 px tekort en breekt de knop af. */ /* 08-09-2026: het logo ging van 30 naar 42 px hoog (Sabine: „größer machen"), dus 57 px breder. Gemeten: de rij liep daarmee 12 px over op 1200 en 1240 px. Het menu staat daarom nog een tikje krapper; tussen 1200 en 1280 blijft het passen. */ @media(min-width:1200px){ .balk__in{gap:.8rem} .menu{gap:.1rem} .menu a{padding:.55rem .46rem;font-size:.86rem} .balk .knop{padding:.62rem 1rem} } /* ⚠️ DE HAMBURGER BEGINT OP 1.199 PX, NIET OP 940. Tussen die twee breedtes past de rij niet: op 1024 px is de container 952 px en heeft de rij er ruim 1.100 nodig. Een nette lade is beter dan een halve knop tegen de rand. Verandert het aantal menu-items of de tekst van de knop, meet dit dan opnieuw — /tmp/verhuis/balkproef2.js meet 14 breedtes. */ @media(max-width:1199px){ .menu{position:fixed;inset:var(--nav) 0 auto 0;flex-direction:column;align-items:stretch; background:var(--paper);border-bottom:1px solid var(--hair);padding:.8rem clamp(1.2rem,5vw,2rem) 1.4rem; transform:translateY(-130%);transition:transform .38s cubic-bezier(.16,1,.3,1);box-shadow:0 30px 60px rgba(16,18,22,.14)} .menu.open{transform:none} .menu a{padding:.95rem .2rem;border-bottom:1px solid var(--hair);border-radius:0} .balk__cta{display:none}.hamburger{display:flex} } /* Chery 0 % Leasing (Sabine, 08-09-2026): hun eigen VIERKANTE campagnevisual naast de tekst. Bewust geen .paar__fig: dat vak is 3:2 en zou de logo's en het „0 %" boven en onder afsnijden. Het vak volgt het bestand (1:1). */ .cheryaktie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,4rem);align-items:center} .cheryaktie__fig{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:1;background:var(--paper-2)} .cheryaktie__fig img{width:100%;height:100%;object-fit:cover;display:block} .cheryaktie .merk__logo{flex:none;width:auto;height:14px;object-fit:contain;margin-right:.5rem;vertical-align:middle} .cheryaktie__tekst .lood{max-width:48ch} @media(max-width:820px){.cheryaktie{grid-template-columns:1fr}.cheryaktie__fig{max-width:560px}} /* ── secties ── */ .blok{padding-block:var(--lucht)} .blok--zacht{background:var(--paper-2)} .blok--nacht{background:var(--night);color:#fff} .blok--nacht h1,.blok--nacht h2,.blok--nacht h3{color:#fff} .blok--nacht .lood{color:rgba(255,255,255,.72)} .blok--nacht .merk{color:rgba(255,255,255,.72)} .kop{max-width:62ch;margin-bottom:clamp(2rem,4vw,3rem)} .kop h2{margin-top:.9rem} .kop .lood{margin-top:1rem} .kop--rij{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap} /* ── filmische band (de auto) ── */ .film{position:relative;isolation:isolate;min-height:min(88vh,760px);display:flex;align-items:flex-end; overflow:hidden;background:var(--night)} .film__beeld{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover; animation:adem 20s ease-in-out infinite alternate} @keyframes adem{from{transform:scale(1.03)}to{transform:scale(1.09)}} .film__waas{position:absolute;inset:0;z-index:-1; background:linear-gradient(100deg,rgba(10,12,15,.86) 0%,rgba(10,12,15,.45) 45%,rgba(10,12,15,.05) 78%), linear-gradient(0deg,rgba(10,12,15,.8) 0%,transparent 50%)} .film__in{padding-block:clamp(2.5rem,7vw,5rem);color:#fff;max-width:min(640px,100%)} /* Alleen de startpagina iets ruimer: daar staan drie knoppen naast elkaar en met 640 px viel de derde net op een eigen regel. De koptekst blijft leesbaar omdat die zijn eigen regellengte houdt. */ .film--start .film__in{max-width:min(720px,100%)} .film--start .film__in h1,.film--start .film__in .lood{max-width:640px} /* Alle drie de heroknoppen even groot, ook als ze op de telefoon stapelen. */ .film--start .film__knoppen .knop{min-width:13.5rem;min-height:3.4rem} .film__in .merk{color:rgba(255,255,255,.82)} .film__in h1{margin-top:1rem;text-shadow:0 2px 40px rgba(0,0,0,.35)} .film__in .lood{color:rgba(255,255,255,.86);margin-top:1.2rem} .film__prijs{display:block;font-family:var(--kop);font-weight:600;font-size:clamp(1rem,2vw,1.25rem); margin-top:1.1rem;color:#fff} /* de listenpreis en de actievoorwaarde, klein onder de vanafprijs */ .film__voet{display:block;margin-top:.35rem;font-size:.8rem;color:rgba(255,255,255,.72);line-height:1.5} .film__voet a{color:#fff;text-decoration:underline;text-underline-offset:2px} .film__knoppen{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.5rem,3vw,2.2rem)} /* "nu bij ons" — het eerste wat je leest, nog vóór de kop. Bewust een pil met een zacht kloppend stipje: dat leest als "actueel", niet als een reclamesticker. */ .nu{display:inline-flex;align-items:center;gap:.6rem; font-family:var(--kop);font-weight:600;font-size:.82rem;letter-spacing:-.005em; color:#fff;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.3); padding:.5rem 1rem .5rem .85rem;border-radius:999px;backdrop-filter:blur(6px)} /* de badge is nu een link naar de voorraad — laat dat ook merken */ a.nu{transition:background .2s,border-color .2s} a.nu:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)} .nu i{width:7px;height:7px;border-radius:50%;background:#5fd08a;flex:none; box-shadow:0 0 0 0 rgba(95,208,138,.7);animation:klop 2.6s ease-out infinite} @keyframes klop{ 0%{box-shadow:0 0 0 0 rgba(95,208,138,.65)} 70%{box-shadow:0 0 0 9px rgba(95,208,138,0)} 100%{box-shadow:0 0 0 0 rgba(95,208,138,0)} } @media(prefers-reduced-motion:reduce){.nu i{animation:none}} .film__in .nu + h1{margin-top:1.1rem} /* ── cijfers (het handschrift van de site) ── */ /* ⚠️ minmax(0,1fr) en niet 1fr: een 1fr-kolom heeft stilzwijgend `min-width:auto`, dus een lang woord in het grote getal ("Werkstatt") of een telefoonnummer ("0216262188") duwt de kolom breder dan zijn deel en het hele raster steekt buiten het scherm. Zo liep de startpagina op 320 px 29 px over. */ .cijfers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--hair)} .cijfers--nacht{border-color:rgba(255,255,255,.16)} /* Tot 1100 px twee kolommen: een woord als Werkstatt op 3,1rem vet past niet in een kwart van een tablet en brak middenin (17-09-2026, gemeten op 768 en 1024). */ @media(max-width:1100px){.cijfers{grid-template-columns:repeat(2,minmax(0,1fr))} .cijfer:nth-child(2n){border-right:0} .cijfer:nth-child(-n+2){border-bottom:1px solid var(--hair)} .cijfers--nacht .cijfer:nth-child(-n+2){border-color:rgba(255,255,255,.16)}} /* Op een heel smal scherm (iPhone SE en alles daaronder) passen twee van die grote getallen naast elkaar niet meer zonder te breken. Dan één kolom. */ @media(max-width:400px){ .cijfers{grid-template-columns:minmax(0,1fr)} .cijfer,.cijfer:nth-child(2n){border-right:0} .cijfer:not(:last-child){border-bottom:1px solid var(--hair)} .cijfers--nacht .cijfer:not(:last-child){border-color:rgba(255,255,255,.16)} } .cijfer{padding:clamp(1.4rem,3vw,2.2rem) clamp(1rem,2vw,1.6rem);border-right:1px solid var(--hair)} .cijfers--nacht .cijfer{border-color:rgba(255,255,255,.16)} .cijfer:last-child{border-right:0} @media(max-width:700px){ .cijfer:nth-child(2n){border-right:0} .cijfer:nth-child(-n+2){border-bottom:1px solid var(--hair)} .cijfers--nacht .cijfer:nth-child(-n+2){border-color:rgba(255,255,255,.16)} } .cijfer b{display:block;font-family:var(--kop);font-weight:800;font-size:clamp(1.9rem,4.6vw,3.1rem); line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere} .cijfer b i{font-style:normal;font-size:.42em;font-weight:600;margin-left:.2em;color:var(--marke);letter-spacing:0} .cijfers--nacht .cijfer b i{color:rgba(255,255,255,.6)} .cijfer span{display:block;margin-top:.55rem;font-size:.82rem;color:var(--ink-2)} /* het opgeteld getal zelf — erft de , niet het bijschrift */ .cijfer b .tel,.maat b .tel{display:inline;margin:0;font-size:inherit;color:inherit; font-family:inherit;font-weight:inherit;letter-spacing:inherit} .cijfers--nacht .cijfer span{color:rgba(255,255,255,.6)} /* ── modelkaarten (editorial, geen zware kaders) ── */ .rek{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.6rem) clamp(1.2rem,2.4vw,2rem)} @media(max-width:920px){.rek{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.rek{grid-template-columns:1fr}} /* ⚠️ DE CARROUSEL MAG ALLEEN ZIJWAARTS BEWEGEN. `overflow-x:auto` laat de browser óók `overflow-y` op `auto` zetten, waardoor dit vak stiekem een verticale scrollcontainer werd. Scrol je met een touchpad over de carrousel, dan pakt dat vak de (altijd licht schuine) beweging op en wipt de rij op en neer in plaats van dat de pagina doorscrolt. Daarom expliciet `overflow-y:hidden`, en `proximity` in plaats van `mandatory`: mandatory dwingt bij élk klein gebaar een sprong af, wat dezelfde schok geeft. */ .baan{display:flex;gap:clamp(1.2rem,2.4vw,2rem); overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:.5rem} .baan::-webkit-scrollbar{display:none} .baan>.wagen{scroll-snap-align:start;flex:0 0 clamp(260px,31vw,340px)} /* In de carrousel alleen invloeien, niet omhoog schuiven: die verticale beweging wordt door `overflow-y:hidden` toch afgesneden. */ .baan>.wagen.op{transform:none} .wagen{display:flex;flex-direction:column;background:none} .wagen__beeld{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius); background:linear-gradient(165deg,#fff,#eceeef)} .wagen__beeld img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)} .wagen:hover .wagen__beeld img{transform:scale(1.05)} /* De officiele modelrenders zijn 16:9 met een marge van 6 % rond de wagen. In een vak van 3:2 haalt object-fit er 16 % breedte af — precies de neus en de kont. Dit vak volgt dus het bestand. */ .wagen__beeld--render{aspect-ratio:16/9} .wagen__vlag{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.94);color:var(--ink); font-family:var(--kop);font-weight:600;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase; padding:5px 10px;border-radius:2px} .wagen__lijf{padding-top:1.1rem;display:flex;flex-direction:column;flex:1} .wagen__naam{font-family:var(--kop);font-weight:700;font-size:1.16rem;letter-spacing:-.02em} .wagen__soort{font-size:.88rem;color:var(--ink-2);margin-top:.2rem} .wagen__feit{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:.85rem;font-size:.82rem;color:var(--ink-2)} .wagen__feit span{display:inline-flex;align-items:center;gap:.35rem} .wagen__feit span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--marke);opacity:.6} .wagen__voet{margin-top:auto;padding-top:1rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem; border-top:1px solid var(--hair)} .wagen__prijs{font-family:var(--kop);font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums} .wagen__prijs em{display:block;font-style:normal;font-size:.75rem;font-weight:500;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-3);margin-bottom:.1rem} /* ── merkkeuze (start) ── */ .keuze{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem)} @media(max-width:800px){.keuze{grid-template-columns:1fr}} .deur{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius); min-height:clamp(360px,44vw,520px);display:flex;align-items:flex-end;color:#fff} .deur img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover; transition:transform 1s cubic-bezier(.16,1,.3,1)} .deur:hover img{transform:scale(1.05)} .deur::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(0deg,rgba(8,10,13,.88) 0%,rgba(8,10,13,.18) 58%,transparent 100%)} .deur__in{padding:clamp(1.5rem,3.2vw,2.4rem);width:100%} .deur__in b{display:block;font-family:var(--kop);font-weight:800;font-size:clamp(1.9rem,4.4vw,2.8rem);letter-spacing:-.03em} .deur__in p{color:rgba(255,255,255,.78);margin-top:.4rem;font-size:.95rem;max-width:38ch} .deur__tel{font-family:var(--kop);font-weight:600;font-size:.75rem;letter-spacing:.18em; text-transform:uppercase;color:rgba(255,255,255,.7)} .deur__in .pijl{color:#fff;margin-top:1.2rem} /* ── beeld + tekst (het verhaal) ── */ .paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,4rem);align-items:center; padding-block:clamp(2rem,5vw,3.6rem);border-bottom:1px solid var(--hair)} .paar:last-child{border-bottom:0} .paar:nth-child(even) .paar__fig{order:2} @media(max-width:820px){.paar{grid-template-columns:1fr;gap:1.4rem}.paar:nth-child(even) .paar__fig{order:0}} .paar__fig{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;background:var(--paper-2)} .paar__fig img{width:100%;height:100%;object-fit:cover} .paar__tekst h3{margin-bottom:.8rem;max-width:18ch} .paar__tekst p{color:var(--ink-2);max-width:46ch} /* ── HUISMAAT 3:2 ─────────────────────────────────────────────────────────── STAANDE REGEL: elk inhoudsbeeld op deze site is FYSIEK op 3:2 gebracht, en elk vak dat zo'n beeld toont staat ook op 3:2. Daardoor snijdt object-fit: cover nergens iets weg en is er nergens een balk te zien. Hier stond eerder een lijst met `object-fit:contain` voor brede renders. Dat loste het bijsnijden op maar maakte iets ergers: een beeld met balken naast een beeld dat het vak vult, in dezelfde rij. Dat is wat er goedkoop uitzag. De juiste plek om dit op te lossen is het BESTAND, niet de opmaak. Wie een nieuwe foto toevoegt: eerst op 3:2 zetten, dan pas plaatsen. Reservekopie van de originelen: reservekopie/fotos-voor-3op2/. Uitzonderingen die bewust een eigen maat houden, elk onderling wel gelijk: de heldbeelden (.film), de merkdeuren (.deur), de teamportretten (2:3), de lakkiezer en de 360-weergave. */ .tekening img{object-fit:contain;background:linear-gradient(168deg,#fafbfb 0%,#eef0f1 100%)} /* de merkdeuren waren 1,15:1 — te smal voor een liggend heldbeeld */ .deur{aspect-ratio:16/10;width:100%;min-width:0} @media(max-width:800px){.deur{aspect-ratio:16/10;width:100%;min-width:0}} .paar__fig{aspect-ratio:3/2} /* Teamportretten staan in hun eigen maat 2:3 en zijn onderling allemaal gelijk. Twee teamleden zijn honden en zijn liggend gefotografeerd; die twee bestanden zijn op 2:3 bijgesneden in plaats van met balken getoond. */ /* ── galerij ── */ .gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,1.2vw,.9rem)} .gal figure{margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius);background:var(--paper-2)} .gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)} .gal figure:hover img{transform:scale(1.06)} @media(max-width:720px){.gal{grid-template-columns:repeat(2,1fr)}} /* ── tabel & vragen ── */ .tab{width:100%;border-collapse:collapse;font-size:.94rem} .tab tr{border-bottom:1px solid var(--hair)} /* overflow-wrap: een lange samenstelling ("Ladeleistung") of een waarde zonder spaties kan een tabel breder maken dan zijn 100 %, en dan schuift de hele pagina zijwaarts. Op de IONIQ 9 gebeurde dat op 320 px. */ .tab td{padding:.85rem 0;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto} /* ⛔ Geen `overflow-wrap:anywhere` hier. Dat brak Duitse samenstellingen midden in het woord ("Finanzierungsb / etrag", "Rechtsgeschäf / tsgebühr") op 390 px. `break-word` breekt alleen als het niet anders kan, en `hyphens:auto` zet er dan een afbreekstreepje op de juiste lettergreep. De pagina heeft daarvoor wel `` nodig, anders weet de browser niet hoe hij moet afbreken. */ .tab td:first-child{color:var(--ink-2);width:45%} .tab td:last-child{font-weight:600;text-align:right} /* tussenkop in een tabel, bv. de afdeling boven zijn openingstijden */ .tab .tab__kop{font-family:var(--kop);font-weight:700;font-size:.75rem;letter-spacing:.16em; text-transform:uppercase;color:var(--marke);padding-top:1.2rem;text-align:left;width:auto} .tab tr:first-child .tab__kop{padding-top:0} .vragen details{border-bottom:1px solid var(--hair)} .vragen summary{cursor:pointer;list-style:none;padding:1.15rem 0;font-family:var(--kop);font-weight:600; display:flex;justify-content:space-between;align-items:center;gap:1.5rem} .vragen summary::-webkit-details-marker{display:none} .vragen summary::after{content:"";width:11px;height:11px;flex:0 0 auto; border-right:2px solid var(--marke);border-bottom:2px solid var(--marke); transform:rotate(45deg) translateY(-2px);transition:transform .3s} .vragen details[open] summary::after{transform:rotate(-135deg) translateY(-2px)} .vragen p{padding-bottom:1.2rem;color:var(--ink-2);max-width:62ch} /* ── voet ── */ .voet{background:var(--night);color:rgba(255,255,255,.66);padding-block:clamp(3rem,6vw,4.5rem) 1.8rem} .voet__rek{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem} @media(max-width:820px){.voet__rek{grid-template-columns:1fr 1fr}} @media(max-width:520px){.voet__rek{grid-template-columns:1fr}} .voet img{height:34px;width:auto;margin-bottom:1rem} .voet h4{color:#fff;font-family:var(--kop);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.9rem} .voet a{display:block;padding:.25rem 0;font-size:.92rem;color:rgba(255,255,255,.66)} .voet a:hover{color:#fff} .voet__streep{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.13); display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:max(.8rem,13px);color:rgba(255,255,255,.5)} /* ⚠️ Beide helften van deze regel zijn flexitems en mochten allebei krimpen. De rechterkant is lang, dus de linkerkant werd samengeknepen tot hij op drie regels brak met een losse "·" op een eigen regel — terwijl er rechts nog ruimte over was. Niet laten krimpen, en op een breed scherm helemaal niet breken; op een telefoon staan ze toch al onder elkaar. */ .voet__streep > span{flex:0 1 auto} /* ⚠️ .voet a staat op display:block, want in de kolommen erboven is elke link een eigen regel. In déze regel horen ze in de lopende tekst te staan, anders valt Impressum onder Datenschutz onder het scheidingsteken. */ .voet__streep a{display:inline;padding:0;font-size:inherit;color:rgba(255,255,255,.7)} .voet__streep a:hover{color:#fff} @media(min-width:900px){ .voet__streep > span{white-space:nowrap} } /* ── Credit van het webbureau (03-10-2026) ───────────────────────────────── Louis: "website by deallos at the bottom of the page", op elke klantsite. Staat in de copyrightregel, zelfde letter en kleur als de rest van die regel. Daarvoor zijn twee dingen aan de HELE regel hierboven veranderd (gemeten): · kleur .45 naar .5: .45 wit op het zwarte vlak haalde 4,41:1, net onder de 4,5:1 voor kleine tekst; .5 haalt 5,3:1 en stond al elders in dit bestand. · letter .8rem naar max(.8rem,13px): op een breed scherm was dat 12,8 px, onder de huisgrens van 13 px; op de telefoon blijft het 13,6 px. De link krijgt een raakvlak van 44 px zonder dat de regel hoger wordt: 12 px opvulling boven en onder, en dezelfde 12 px als negatieve marge. */ .voet__credit{white-space:nowrap} .voet__streep .voet__credit a{display:inline-block;padding:12px 0;margin:-12px 0} /* ⚠️ De chatbel (oh-chat.css) staat vast rechtsonder en lag op een telefoon, helemaal onderaan gescrold, over deze regel: gemeten op 390 px raakte een tik op "Deallos" op de modelpagina de bel (body.ch--hoog zet hem 58 px hoger), en op de andere pagina's lag hij over "alle Angaben ohne Gewähr". Zolang de twee helften onder elkaar staan krijgt de voet onderaan de hoogte van de bel erbij (12 + 52 px, met ch--hoog nog 58 px meer), dan schuift de hele regel erboven uit. */ @media(max-width:900px){ .voet{padding-bottom:calc(1.8rem + 76px)} body.ch--hoog .voet{padding-bottom:calc(1.8rem + 134px)} } /* ── de vloot in het schijnwerperlicht (donkere miniaturen, dicht raster) ── */ .flotte{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:clamp(.5rem,1.2vw,.9rem)} .flotte a{position:relative;display:block;border-radius:var(--radius);overflow:hidden; background:#000;aspect-ratio:360/268;isolation:isolate} .flotte img{width:100%;height:100%;object-fit:cover;opacity:.86; transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .4s} .flotte a:hover img{transform:scale(1.07);opacity:1} .flotte b{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.85rem .9rem .75rem; font-family:var(--kop);font-weight:600;font-size:.86rem;color:#fff;letter-spacing:-.01em; background:linear-gradient(0deg,rgba(0,0,0,.82),transparent)} .flotte a::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);transition:border-color .3s} .flotte a:hover::after{border-color:rgba(255,255,255,.28)} /* ── beweging: rustig in beeld komen ── */ .op{opacity:0;transform:translateY(18px); transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)} .op.in{opacity:1;transform:none} .film__beeld{will-change:transform} @media(prefers-reduced-motion:reduce){ .op{opacity:1;transform:none;transition:none} .film__beeld{animation:none !important;transform:none !important} } /* ── hulp ── */ .spring{position:absolute;left:-9999px} .spring:focus{left:1rem;top:1rem;z-index:99;background:#fff;color:var(--ink);padding:.7rem 1.1rem;border-radius:var(--radius)} [hidden]{display:none !important} /* ============================================================================ LEASINGREKENAAR — gedeeld door de homepage en elke modelpagina. De opmaak stond eerst inline in oh-start.html; sinds de rekenaar ook op de modelpagina staat hoort hij hier, anders lopen de twee uiteen. ========================================================================== */ /* ── financieringsrekenaar ── */ .reken{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair); border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden} @media(max-width:820px){.reken{grid-template-columns:1fr}} .reken__knop,.reken__uit{background:var(--card);padding:clamp(1.3rem,2.8vw,2rem)} .reken__uit{background:var(--paper-2)} .reken label{display:block;font-family:var(--kop);font-weight:600;font-size:.75rem; letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.5rem} .reken label b{float:right;letter-spacing:0;text-transform:none;font-size:.92rem;color:var(--ink)} .reken select{width:100%;font:inherit;font-size:.98rem;color:var(--ink);background:var(--paper); border:1px solid var(--hair);border-radius:var(--radius);padding:.8rem .9rem} .reken__schuif{margin-top:1.6rem} .reken input[type=range]{width:100%;accent-color:var(--marke);height:2rem} .reken__grens{display:flex;justify-content:space-between;font-size:.75rem;color:var(--ink-3)} .reken__grens i{font-style:normal;font-variant-numeric:tabular-nums} .reken__em{display:block;font-family:var(--kop);font-weight:600;font-size:.75rem;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-3)} .reken__uit>b{display:block;font-family:var(--kop);font-weight:700; font-size:clamp(2.2rem,5vw,3rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums; line-height:1;margin:.25rem 0 1.2rem} .reken__tab td{padding:.55rem 0;font-size:.86rem} .reken__tab td:last-child{font-variant-numeric:tabular-nums} .reken__tab tr.som td{font-weight:700;color:var(--ink)} .reken__tab tr.kop2 td{padding:1rem 0 .25rem;font-family:var(--kop);font-weight:600; font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3); border-bottom:0} .reken__klein{font-size:.75rem;color:var(--ink-3);line-height:1.6;margin:1.1rem 0 1.4rem;max-width:52ch} /* De ramingszin staat BOVEN de kleine lettertjes en weegt zwaarder: hij zet de verwachting van de bezoeker, de rest legt de rekenwijze uit. */ .reken__raming{font-size:.82rem;color:var(--ink-2);margin:1.1rem 0 .2rem; padding:.75rem .9rem;border-left:3px solid var(--marke);background:var(--zacht,rgba(0,0,0,.03)); border-radius:0 var(--radius,6px) var(--radius,6px) 0} .reken__raming strong{color:var(--ink)} /* ══ AM PLATZ tegenover AUF BESTELLUNG ═══════════════════════════════════════ Het verschil tussen een wagen die ER STAAT en een wagen die BESTELD wordt, is het eerste wat een bezoeker moet kunnen zien — anders leest hij een vanafprijs van een modelpagina als een auto die klaarstaat. Eén vormtaal op elke pagina: groen = staat op het plein, marine-omlijnd = wordt besteld. De cijfers komen uit oh-voorraadtal.js, dat in dezelfde ronde wordt gemaakt als de voorraadlijst zelf. ⛔ Nooit met de hand een aantal in een pagina typen. */ .staat{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem; padding:.85rem 1.1rem;border-radius:var(--radius);border:1px solid var(--hair); background:var(--card);font-size:.92rem;line-height:1.45} .staat__stip{width:9px;height:9px;border-radius:50%;flex:none;background:var(--ink-3)} .staat--hier{border-color:rgba(26,127,75,.35);background:rgba(26,127,75,.05)} .staat--hier .staat__stip{background:#1a7f4b} .staat--hier b{color:#146238} .staat b{font-family:var(--kop);font-weight:700} .staat span{color:var(--ink-2)} .staat a{margin-left:auto;white-space:nowrap} @media(max-width:620px){ .staat{align-items:flex-start} .staat a{margin-left:0;min-height:44px;display:inline-flex;align-items:center} } /* het strookje onder een modelkaart: één regel, geen kader */ .kaart__staat,.wagen__staat{display:flex;align-items:center;gap:.4rem;margin-top:.45rem; font-size:.76rem;color:var(--ink-2);font-family:var(--kop);font-weight:600} .kaart__staat i,.wagen__staat i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--ink-3)} .kaart__staat--hier,.wagen__staat--hier{color:#146238} .kaart__staat--hier i,.wagen__staat--hier i{background:#1a7f4b} /* toelichting onder een schuif — waarom die stand de aanbevolen stand is */ .reken__tip{display:block;margin-top:.5rem;font-size:.75rem;line-height:1.55;color:var(--ink-3)} .reken__tip b{color:var(--ink-2);font-weight:600} .reken__tip button{font:inherit;font-size:.75rem;color:var(--marke);background:none;border:0; padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px} .reken__bron{margin-top:.55rem;padding-top:.55rem;border-top:1px dotted var(--hair); font-size:.75rem;color:var(--ink-3)} /* verdeelbalk — waar het geld heen gaat, zodat de restwaarde iets zichtbaars wordt */ .reken__balk{margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid var(--hair)} .reken__staaf{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--hair)} .reken__staaf span{display:block;transition:width .25s ease} .reken__staaf .s1{background:var(--ink-2)} .reken__staaf .s2{background:var(--marke)} .reken__staaf .s3{background:color-mix(in srgb,var(--marke) 26%,transparent)} .reken__leg{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:.8rem; font-size:.75rem;color:var(--ink-3)} .reken__leg i{font-style:normal;display:inline-flex;align-items:center;gap:.4rem} .reken__leg i::before{content:'';width:9px;height:9px;border-radius:2px;background:currentColor} .reken__leg .l1::before{background:var(--ink-2)} .reken__leg .l2::before{background:var(--marke)} .reken__leg .l3::before{background:color-mix(in srgb,var(--marke) 26%,transparent); outline:1px solid var(--hair)} .reken__leg b{color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums} /* wat er ná de looptijd gebeurt — de vraag die de restwaarde oproept */ .slot{margin-top:clamp(1.6rem,3vw,2.4rem);display:grid;gap:1px;background:var(--hair); border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden; grid-template-columns:repeat(3,1fr)} @media(max-width:720px){.slot{grid-template-columns:1fr}} .slot > div{background:var(--card);padding:clamp(1.1rem,2.4vw,1.5rem)} .slot h3{font-family:var(--kop);font-weight:600;font-size:.95rem;letter-spacing:-.01em; margin:0 0 .4rem} .slot p{font-size:.82rem;line-height:1.6;color:var(--ink-2);margin:0} .slot b{font-variant-numeric:tabular-nums;color:var(--ink)} /* op een modelpagina staat de wagen vast: geen keuzelijst maar een regel */ .reken__vast{margin:0;padding:.85rem .95rem;border:1px solid var(--hair); border-radius:var(--radius);background:var(--paper)} .reken__vast b{display:block;font-family:var(--kop);font-weight:700;font-size:1.05rem} .reken__vast span{display:block;margin-top:.15rem;font-size:.84rem;color:var(--ink-3)} /* ============================================================================ MODELVERGELIJKING — twee datenbladen naast elkaar ========================================================================== */ .verg__kies{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:1.6rem} .verg__kies label{font-family:var(--kop);font-weight:600;font-size:.75rem;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-2)} .verg__kies select{font:inherit;font-size:1rem;color:var(--ink);background:var(--paper); border:1px solid var(--hair);border-radius:var(--radius);padding:.7rem .9rem;min-width:min(340px,100%)} .verg__uit{background:var(--card);border:1px solid var(--hair);border-radius:var(--radius); padding:clamp(1.1rem,2.6vw,1.7rem);margin-bottom:1.6rem} .verg__som{margin:0;font-family:var(--kop);font-weight:400;font-size:clamp(1.05rem,2.2vw,1.3rem); line-height:1.4;color:var(--ink)} .verg__som b{font-weight:700} .verg__waarom{margin:1rem 0 .4rem;font-family:var(--kop);font-weight:600;font-size:.75rem; letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .verg__lijst{margin:0;padding-left:1.1rem;display:grid;gap:.35rem; font-size:.94rem;line-height:1.5;color:var(--ink-2)} .verg__lijst li::marker{color:var(--marke)} /* de tabel mag op smalle schermen zijwaarts schuiven i.p.v. de pagina te rekken */ .verg__tabel{overflow-x:auto;-webkit-overflow-scrolling:touch} .verg__tabel table{min-width:520px} .verg__tabel td,.verg__tabel th{text-align:right;font-variant-numeric:tabular-nums} .verg__tabel td:first-child,.verg__tabel th:first-child{text-align:left} .verg__kop th{font-family:var(--kop);font-weight:700;font-size:.9rem;color:var(--ink); padding-bottom:.6rem} .verg__wat{color:var(--ink-2)} .verg--gelijk td{color:var(--ink-3)} .verg__zelfde{display:inline-block;margin-left:.5rem;padding:.05rem .4rem;border-radius:99px; background:var(--paper-2);font-family:var(--kop);font-weight:600;font-size:.75rem; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);vertical-align:middle} .verg--plus{font-weight:700;color:var(--ink)} /* ⚠️ Geen pijltje omhoog: bij de prijs is juist de LAGERE waarde het voordeel. Een vinkje zegt "dit is hier het voordeel" zonder richting te suggereren. */ .verg--plus::after{content:"✓";margin-left:.4rem;font-size:.78em;color:var(--marke); vertical-align:baseline} /* ============================================================================ MOBIEL: COMPACTER, EN GEEN AANGESNEDEN WAGENS ⚠️ De held was min-height:88vh. Op een telefoon is dat een STAAND vak (≈0,49) terwijl elk autobeeld liggend is (1,5 – 1,8). Met object-fit:cover viel daar 67 tot 72 % van het beeld weg: je zag een verticale strook van de wagen, en dat is precies wat er "uitgerekt" uitzag. Een lagere held brengt het vak dichter bij de verhouding van het beeld en scheelt meteen een halve schermhoogte. ========================================================================== */ @media(max-width:760px){ /* ⚠️ DE VERHOUDING IS EEN ONDERGRENS, GEEN VASTE MAAT. Hier stond `aspect-ratio:4/5` plus `max-height:78vh`. Dat legde de hoogte van de held VAST, terwijl de tekst erin op een telefoon vier tot acht regels lang is. `.film` staat op `align-items:flex-end` en `overflow:hidden`, dus alles wat niet paste liep er BOVENAAN uit en werd stil weggeknipt: op de startpagina 200 px — precies de pil "Fahrzeuge sofort verfügbar" en de bovenste helft van "Zwei Marken." Op het scherm leest dat als "de vaste balk ligt over de hero", maar de balk raakte niets: de hero knipte zichzelf af. Gemeten op 360 px: start 480 vak / 680 inhoud, de historieband 640 / 770, de modelpagina 450 / 479, aktion 450 / 504, service 450 / 545. De verhouding zit nu in een onzichtbaar hulpstuk. Padding in PROCENTEN rekent tegen de BREEDTE, dus 125 % van de breedte is precies 4:5. Een flexrij is zo hoog als zijn hoogste item: past de tekst binnen die verhouding, dan bepaalt de verhouding de hoogte; past hij niet, dan wint de tekst. ⛔ Zet hier nooit `height` of `max-height` op terug — dan knipt het opnieuw. Een pagina die haar held helemaal door de inhoud wil laten bepalen zet `--vak:0`; een eigen verhouding zet je met `--vak:`. ⚠️ width:100% blijft nodig: zonder die regel leidt de browser de BREEDTE af uit een min-height die een pagina zelf zet (.film--archiv stond op 640 px hoog, en 640 x 4/5 gaf een sectie van 512 px breed in een scherm van 390). De body knipt dat weg met overflow-x:clip, dus er verschijnt geen schuifbalk en de rechterkant van elke regel valt gewoon buiten beeld. */ .film{min-height:auto;aspect-ratio:auto;max-height:none;width:100%} .film::before{content:"";flex:0 0 0;width:0;padding-top:var(--vak,min(125%,78vh))} .film--start{--vak:min(133.333%,78vh)} /* ⚠️ De labelkolom stond ook op een telefoon op 45 %. Voor het adres bleef er dan ~180 px over voor oppitzhauser@oppitzhauser.at, en `overflow-wrap:anywhere` brak dat midden in het woord af ("oppitzhauser@oppitzhaus / er.at"). Een label is kort, een waarde niet: op klein formaat krijgt de waarde de ruimte. */ .tab td:first-child{width:32%} /* ── RAAKVLAKKEN VAN 44 PX ──────────────────────────────────────────────── Gemeten op 360, 390 en 414 px stond de helft van wat je met een duim raakt te laag: de voettekstlinks op 32, de pijl-linkjes op 23, de pil boven de kop op 40 en de schuiven van de financieringsrekenaar op 32. ⚠️ Alleen `.voet__rek a` — de links in de onderste streep staan bewust inline naast elkaar (Impressum · Datenschutz) en mogen geen blokhoogte krijgen, anders vallen ze weer elk op een eigen regel. */ .voet__rek a{min-height:44px;display:flex;align-items:center;padding-block:0} a.pijl{min-height:44px} a.nu{min-height:44px} .reken input[type=range]{height:44px} /* de wagen zit in het midden-onder van deze opnames, niet in het hart */ .film__beeld{object-position:50% 58%} /* rustiger ademen: op klein formaat valt het zoomen extra op */ @keyframes adem{from{transform:scale(1.02)}to{transform:scale(1.05)}} } /* ── compacter op telefoon én laptop ──────────────────────────────────────── De pagina's zijn lang geworden. Minder lucht tussen de blokken zonder dat het gedrongen wordt: op de telefoon het meest, op een laptop iets. */ @media(max-width:760px){ .blok{padding-block:clamp(2.2rem,7vw,3rem)} .kop{margin-bottom:1.4rem} .loop figure{flex-basis:clamp(230px,74vw,300px)} } @media(min-width:761px) and (max-width:1400px){ .blok{padding-block:clamp(3rem,5.2vw,4.4rem)} } /* de fotoverantwoording onder een galerij met Brits persmateriaal */ .ukfijn{margin-top:1.4rem;max-width:70ch;padding-top:1rem;border-top:1px solid var(--hair)} .ukfijn b{color:var(--ink-2);font-weight:600} /* ── RAAKVLAKKEN OP EEN AANRAAKSCHERM ────────────────────────────────────── Gemeten op 390 px: de lakstalen op de modelpagina stonden op 38 x 38, de uitvoeringsknoppen op 34 hoog en de filters op de voorraadpagina op 36. Dat is te klein voor een duim en het is ook precies waar Louis op 26-08-2026 mis bleef tikken. De regel geldt ALLEEN waar niet gewezen kan worden (`pointer:coarse`), zodat de desktop exact blijft zoals hij was. ⚠️ Het BEELD blijft even groot; alleen het gebied eromheen groeit. Bij een ronde staal doet een pseudo-element dat, anders wordt de stip zelf dikker. */ @media(pointer:coarse){ .kaart__lak,.wagen__lak{min-width:44px;min-height:44px} } /* ⚠️ De lakstalen, de uitvoeringsknoppen, de ankerbalk en de voorraadfilters krijgen hun 44 px in HUN EIGEN paginabestand, niet hier. Reden: die klassen worden in een