@import url('https://fonts.googleapis.com/css2?family=Noto%20Serif%20Thai:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600&display=swap&subset=thai,latin'); /* Designsystem für Hansa Barber — gerechnet, nicht ausgewählt. Ton 284°, Gegenton 82°, Typo-Verhältnis 1.333, Charakter: gedeckt / kantig / edel. Gemessener Kontrast (hell): Tinte 12.74:1 · Matt 4.55:1 · auf Akzent 4.67:1 */ :root{ --grund:#d7d9f0;--flaeche:#eeeffd;--erhoben:#e0e1f8; --linie:#b7b8ea;--tinte:#161626;--matt:#5e5e6e; --akzent:#6e67cd;--akzent-text:#5b51b5; --auf-akzent:#ffffff;--gegen:#b8a17a; color-scheme:light dark; /* Typo: EIN Verhältnis (1.333), sieben Stufen daraus. */ --t-display:clamp(32px,4.0vw,60px); --t-h1:clamp(28px,2.6vw,45px); --t-h2:clamp(28px,1.5vw,33px); --t-h3:24px;--t-lead:20px;--t-body:17px; --t-klein:14px;--t-label:12px; /* Raum: EINE Skala. Ein Wert daneben ist ein Fehler. */ --r1:4px;--r2:8px;--r3:14px;--r4:22px; --r5:34px;--r6:52px;--r7:78px;--r8:116px; --luft:clamp(78px,8vw,144px); --r:3px;--r-klein:2px; --r-gross:5px; --schatten-1:0 1px 2px oklch(0.165 0.02 284 / .06);--schatten-2:0 10px 24px -14px oklch(0.165 0.03 284 / .28); --schatten-3:0 34px 70px -40px oklch(0.165 0.04 284 / .42); --kopfschrift:'Noto Serif Thai',system-ui,sans-serif; --textschrift:'Sarabun',system-ui,sans-serif; --spur:-0.01em;--kopfgewicht:700; --raus:cubic-bezier(.2,.7,.3,1);--rein:cubic-bezier(.4,0,1,1); --kurz:160ms;--mittel:240ms;--lang:420ms; --muster:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22%23eeeffd%22%2F%3E%3Crect%20x%3D%22-1.8704206738620996%22%20y%3D%22-1.8704206738620996%22%20width%3D%2223.7408413477242%22%20height%3D%2223.7408413477242%22%20transform%3D%22rotate(38%2010%2010)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.5537940058857203%22%2F%3E%3Crect%20x%3D%2218.712771888822317%22%20y%3D%22-1.2872281111776829%22%20width%3D%2222.574456222355366%22%20height%3D%2222.574456222355366%22%20transform%3D%22rotate(60%2030%2010)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.3912688634591177%22%2F%3E%3Crect%20x%3D%2243.35620447434485%22%20y%3D%223.3562044743448496%22%20width%3D%2213.2875910513103%22%20height%3D%2213.2875910513103%22%20transform%3D%22rotate(31%2050%2010)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.5397428076248616%22%2F%3E%3Crect%20x%3D%2261.29483939707279%22%20y%3D%221.294839397072792%22%20width%3D%2217.410321205854416%22%20height%3D%2217.410321205854416%22%20transform%3D%22rotate(48%2070%2010)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6463206995977089%22%2F%3E%3Crect%20x%3D%2282.32869565300643%22%20y%3D%222.3286956530064344%22%20width%3D%2215.342608693987131%22%20height%3D%2215.342608693987131%22%20transform%3D%22rotate(59%2090%2010)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6722952029667795%22%2F%3E%3Crect%20x%3D%22100.48853028193116%22%20y%3D%220.4885302819311619%22%20width%3D%2219.022939436137676%22%20height%3D%2219.022939436137676%22%20transform%3D%22rotate(7%20110%2010)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.2513132697204128%22%2F%3E%3Crect%20x%3D%221.2103984374552965%22%20y%3D%2221.210398437455297%22%20width%3D%2217.579203125089407%22%20height%3D%2217.579203125089407%22%20transform%3D%22rotate(16%2010%2030)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.2768399065826088%22%2F%3E%3Crect%20x%3D%2222.937633119523525%22%20y%3D%2222.937633119523525%22%20width%3D%2214.12473376095295%22%20height%3D%2214.12473376095295%22%20transform%3D%22rotate(56%2030%2030)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6950168054318056%22%2F%3E%3Crect%20x%3D%2240.97769055329263%22%20y%3D%2220.977690553292632%22%20width%3D%2218.044618893414736%22%20height%3D%2218.044618893414736%22%20transform%3D%22rotate(39%2050%2030)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.5325202727690339%22%2F%3E%3Crect%20x%3D%2257.66503156349063%22%20y%3D%2217.66503156349063%22%20width%3D%2224.66993687301874%22%20height%3D%2224.66993687301874%22%20transform%3D%22rotate(32%2070%2030)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.2640827839495614%22%2F%3E%3Crect%20x%3D%2282.95051471330225%22%20y%3D%2222.950514713302255%22%20width%3D%2214.09897057339549%22%20height%3D%2214.09897057339549%22%20transform%3D%22rotate(48%2090%2030)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.5865865217056125%22%2F%3E%3Crect%20x%3D%22103.28615954518318%22%20y%3D%2223.28615954518318%22%20width%3D%2213.427680909633636%22%20height%3D%2213.427680909633636%22%20transform%3D%22rotate(54%20110%2030)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.5107248591957614%22%2F%3E%3Crect%20x%3D%223.0425159465521574%22%20y%3D%2243.04251594655216%22%20width%3D%2213.914968106895685%22%20height%3D%2213.914968106895685%22%20transform%3D%22rotate(30%2010%2050)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.4395380658097565%22%2F%3E%3Crect%20x%3D%2224.631025809794664%22%20y%3D%2244.631025809794664%22%20width%3D%2210.737948380410671%22%20height%3D%2210.737948380410671%22%20transform%3D%22rotate(84%2030%2050)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.290780957438983%22%2F%3E%3Crect%20x%3D%2241.825509982183576%22%20y%3D%2241.825509982183576%22%20width%3D%2216.34898003563285%22%20height%3D%2216.34898003563285%22%20transform%3D%22rotate(7%2050%2050)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.49284060415811837%22%2F%3E%3Crect%20x%3D%2262.389065600931644%22%20y%3D%2242.389065600931644%22%20width%3D%2215.221868798136711%22%20height%3D%2215.221868798136711%22%20transform%3D%22rotate(67%2070%2050)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.7168220648309216%22%2F%3E%3Crect%20x%3D%2281.43269675038755%22%20y%3D%2241.43269675038755%22%20width%3D%2217.1346064992249%22%20height%3D%2217.1346064992249%22%20transform%3D%22rotate(21%2090%2050)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.4581315591931343%22%2F%3E%3Crect%20x%3D%22100.91451480612159%22%20y%3D%2240.91451480612159%22%20width%3D%2218.170970387756824%22%20height%3D%2218.170970387756824%22%20transform%3D%22rotate(54%20110%2050)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.38318026543129236%22%2F%3E%3Crect%20x%3D%22-0.6827794369310141%22%20y%3D%2259.317220563068986%22%20width%3D%2221.365558873862028%22%20height%3D%2221.365558873862028%22%20transform%3D%22rotate(90%2010%2070)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.39567508618347347%22%2F%3E%3Crect%20x%3D%2217.16593937575817%22%20y%3D%2257.16593937575817%22%20width%3D%2225.668121248483658%22%20height%3D%2225.668121248483658%22%20transform%3D%22rotate(79%2030%2070)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.7280693695647642%22%2F%3E%3Crect%20x%3D%2238.43736603669822%22%20y%3D%2258.43736603669822%22%20width%3D%2223.125267926603556%22%20height%3D%2223.125267926603556%22%20transform%3D%22rotate(6%2050%2070)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6366442921571434%22%2F%3E%3Crect%20x%3D%2257.401990327984095%22%20y%3D%2257.401990327984095%22%20width%3D%2225.19601934403181%22%20height%3D%2225.19601934403181%22%20transform%3D%22rotate(38%2070%2070)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6836160036036745%22%2F%3E%3Crect%20x%3D%2281.05686631985009%22%20y%3D%2261.05686631985009%22%20width%3D%2217.886267360299826%22%20height%3D%2217.886267360299826%22%20transform%3D%22rotate(53%2090%2070)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6548434572760016%22%2F%3E%3Crect%20x%3D%2299.2163921520114%22%20y%3D%2259.216392152011395%22%20width%3D%2221.56721569597721%22%20height%3D%2221.56721569597721%22%20transform%3D%22rotate(31%20110%2070)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.35885731352027506%22%2F%3E%3Crect%20x%3D%222.5284876879304647%22%20y%3D%2282.52848768793046%22%20width%3D%2214.94302462413907%22%20height%3D%2214.94302462413907%22%20transform%3D%22rotate(61%2010%2090)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.7449869578704238%22%2F%3E%3Crect%20x%3D%2220.268609922379255%22%20y%3D%2280.26860992237926%22%20width%3D%2219.46278015524149%22%20height%3D%2219.46278015524149%22%20transform%3D%22rotate(51%2030%2090)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6848434658022597%22%2F%3E%3Crect%20x%3D%2239.671242067590356%22%20y%3D%2279.67124206759036%22%20width%3D%2220.65751586481929%22%20height%3D%2220.65751586481929%22%20transform%3D%22rotate(79%2050%2090)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.542874246602878%22%2F%3E%3Crect%20x%3D%2257.15257793664932%22%20y%3D%2277.15257793664932%22%20width%3D%2225.694844126701355%22%20height%3D%2225.694844126701355%22%20transform%3D%22rotate(22%2070%2090)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.2561589105753228%22%2F%3E%3Crect%20x%3D%2283.15626655332744%22%20y%3D%2283.15626655332744%22%20width%3D%2213.687466893345118%22%20height%3D%2213.687466893345118%22%20transform%3D%22rotate(50%2090%2090)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6439916514791548%22%2F%3E%3Crect%20x%3D%22103.74431018903852%22%20y%3D%2283.74431018903852%22%20width%3D%2212.51137962192297%22%20height%3D%2212.51137962192297%22%20transform%3D%22rotate(13%20110%2090)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.31069590302649885%22%2F%3E%3Crect%20x%3D%222.1835964787751436%22%20y%3D%22102.18359647877514%22%20width%3D%2215.632807042449713%22%20height%3D%2215.632807042449713%22%20transform%3D%22rotate(84%2010%20110)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.7474819116760045%22%2F%3E%3Crect%20x%3D%2221.580150492489338%22%20y%3D%22101.58015049248934%22%20width%3D%2216.839699015021324%22%20height%3D%2216.839699015021324%22%20transform%3D%22rotate(35%2030%20110)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.4306270604720339%22%2F%3E%3Crect%20x%3D%2240.16174610517919%22%20y%3D%22100.16174610517919%22%20width%3D%2219.67650778964162%22%20height%3D%2219.67650778964162%22%20transform%3D%22rotate(68%2050%20110)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.5283012744039297%22%2F%3E%3Crect%20x%3D%2264.8408575616777%22%20y%3D%22104.8408575616777%22%20width%3D%2210.318284876644611%22%20height%3D%2210.318284876644611%22%20transform%3D%22rotate(8%2070%20110)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.4034807636635378%22%2F%3E%3Crect%20x%3D%2277.59419848956168%22%20y%3D%2297.59419848956168%22%20width%3D%2224.811603020876646%22%20height%3D%2224.811603020876646%22%20transform%3D%22rotate(34%2090%20110)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.7279816332738847%22%2F%3E%3Crect%20x%3D%22104.8526578694582%22%20y%3D%22104.8526578694582%22%20width%3D%2210.294684261083603%22%20height%3D%2210.294684261083603%22%20transform%3D%22rotate(89%20110%20110)%22%20fill%3D%22none%22%20stroke%3D%22%236e67cd%22%20stroke-width%3D%221.2%22%20opacity%3D%220.28427399217616767%22%2F%3E%3C%2Fsvg%3E"); --foto:url('../bilder/friseur-2.jpg'); --foto2:url('../bilder/friseur-3.jpg');--foto3:url('../bilder/friseur-4.jpg'); --txt-beispiel:"ภาพตัวอย่าง"; } @media (prefers-color-scheme:dark){:root{ --grund:#0d0e13;--flaeche:#16161e;--erhoben:#1f1f29; --linie:#31323e;--tinte:#f2f2ff;--matt:#a2a3b5; --akzent:#a7a7e1;--akzent-text:#a7a7e1; --auf-akzent:#0d0d11;--gegen:#846e45; --muster:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Crect%20width%3D%22120%22%20height%3D%22120%22%20fill%3D%22%2316161e%22%2F%3E%3Crect%20x%3D%22-1.8704206738620996%22%20y%3D%22-1.8704206738620996%22%20width%3D%2223.7408413477242%22%20height%3D%2223.7408413477242%22%20transform%3D%22rotate(38%2010%2010)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.5537940058857203%22%2F%3E%3Crect%20x%3D%2218.712771888822317%22%20y%3D%22-1.2872281111776829%22%20width%3D%2222.574456222355366%22%20height%3D%2222.574456222355366%22%20transform%3D%22rotate(60%2030%2010)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.3912688634591177%22%2F%3E%3Crect%20x%3D%2243.35620447434485%22%20y%3D%223.3562044743448496%22%20width%3D%2213.2875910513103%22%20height%3D%2213.2875910513103%22%20transform%3D%22rotate(31%2050%2010)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.5397428076248616%22%2F%3E%3Crect%20x%3D%2261.29483939707279%22%20y%3D%221.294839397072792%22%20width%3D%2217.410321205854416%22%20height%3D%2217.410321205854416%22%20transform%3D%22rotate(48%2070%2010)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6463206995977089%22%2F%3E%3Crect%20x%3D%2282.32869565300643%22%20y%3D%222.3286956530064344%22%20width%3D%2215.342608693987131%22%20height%3D%2215.342608693987131%22%20transform%3D%22rotate(59%2090%2010)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6722952029667795%22%2F%3E%3Crect%20x%3D%22100.48853028193116%22%20y%3D%220.4885302819311619%22%20width%3D%2219.022939436137676%22%20height%3D%2219.022939436137676%22%20transform%3D%22rotate(7%20110%2010)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.2513132697204128%22%2F%3E%3Crect%20x%3D%221.2103984374552965%22%20y%3D%2221.210398437455297%22%20width%3D%2217.579203125089407%22%20height%3D%2217.579203125089407%22%20transform%3D%22rotate(16%2010%2030)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.2768399065826088%22%2F%3E%3Crect%20x%3D%2222.937633119523525%22%20y%3D%2222.937633119523525%22%20width%3D%2214.12473376095295%22%20height%3D%2214.12473376095295%22%20transform%3D%22rotate(56%2030%2030)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6950168054318056%22%2F%3E%3Crect%20x%3D%2240.97769055329263%22%20y%3D%2220.977690553292632%22%20width%3D%2218.044618893414736%22%20height%3D%2218.044618893414736%22%20transform%3D%22rotate(39%2050%2030)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.5325202727690339%22%2F%3E%3Crect%20x%3D%2257.66503156349063%22%20y%3D%2217.66503156349063%22%20width%3D%2224.66993687301874%22%20height%3D%2224.66993687301874%22%20transform%3D%22rotate(32%2070%2030)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.2640827839495614%22%2F%3E%3Crect%20x%3D%2282.95051471330225%22%20y%3D%2222.950514713302255%22%20width%3D%2214.09897057339549%22%20height%3D%2214.09897057339549%22%20transform%3D%22rotate(48%2090%2030)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.5865865217056125%22%2F%3E%3Crect%20x%3D%22103.28615954518318%22%20y%3D%2223.28615954518318%22%20width%3D%2213.427680909633636%22%20height%3D%2213.427680909633636%22%20transform%3D%22rotate(54%20110%2030)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.5107248591957614%22%2F%3E%3Crect%20x%3D%223.0425159465521574%22%20y%3D%2243.04251594655216%22%20width%3D%2213.914968106895685%22%20height%3D%2213.914968106895685%22%20transform%3D%22rotate(30%2010%2050)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.4395380658097565%22%2F%3E%3Crect%20x%3D%2224.631025809794664%22%20y%3D%2244.631025809794664%22%20width%3D%2210.737948380410671%22%20height%3D%2210.737948380410671%22%20transform%3D%22rotate(84%2030%2050)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.290780957438983%22%2F%3E%3Crect%20x%3D%2241.825509982183576%22%20y%3D%2241.825509982183576%22%20width%3D%2216.34898003563285%22%20height%3D%2216.34898003563285%22%20transform%3D%22rotate(7%2050%2050)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.49284060415811837%22%2F%3E%3Crect%20x%3D%2262.389065600931644%22%20y%3D%2242.389065600931644%22%20width%3D%2215.221868798136711%22%20height%3D%2215.221868798136711%22%20transform%3D%22rotate(67%2070%2050)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.7168220648309216%22%2F%3E%3Crect%20x%3D%2281.43269675038755%22%20y%3D%2241.43269675038755%22%20width%3D%2217.1346064992249%22%20height%3D%2217.1346064992249%22%20transform%3D%22rotate(21%2090%2050)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.4581315591931343%22%2F%3E%3Crect%20x%3D%22100.91451480612159%22%20y%3D%2240.91451480612159%22%20width%3D%2218.170970387756824%22%20height%3D%2218.170970387756824%22%20transform%3D%22rotate(54%20110%2050)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.38318026543129236%22%2F%3E%3Crect%20x%3D%22-0.6827794369310141%22%20y%3D%2259.317220563068986%22%20width%3D%2221.365558873862028%22%20height%3D%2221.365558873862028%22%20transform%3D%22rotate(90%2010%2070)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.39567508618347347%22%2F%3E%3Crect%20x%3D%2217.16593937575817%22%20y%3D%2257.16593937575817%22%20width%3D%2225.668121248483658%22%20height%3D%2225.668121248483658%22%20transform%3D%22rotate(79%2030%2070)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.7280693695647642%22%2F%3E%3Crect%20x%3D%2238.43736603669822%22%20y%3D%2258.43736603669822%22%20width%3D%2223.125267926603556%22%20height%3D%2223.125267926603556%22%20transform%3D%22rotate(6%2050%2070)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6366442921571434%22%2F%3E%3Crect%20x%3D%2257.401990327984095%22%20y%3D%2257.401990327984095%22%20width%3D%2225.19601934403181%22%20height%3D%2225.19601934403181%22%20transform%3D%22rotate(38%2070%2070)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6836160036036745%22%2F%3E%3Crect%20x%3D%2281.05686631985009%22%20y%3D%2261.05686631985009%22%20width%3D%2217.886267360299826%22%20height%3D%2217.886267360299826%22%20transform%3D%22rotate(53%2090%2070)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6548434572760016%22%2F%3E%3Crect%20x%3D%2299.2163921520114%22%20y%3D%2259.216392152011395%22%20width%3D%2221.56721569597721%22%20height%3D%2221.56721569597721%22%20transform%3D%22rotate(31%20110%2070)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.35885731352027506%22%2F%3E%3Crect%20x%3D%222.5284876879304647%22%20y%3D%2282.52848768793046%22%20width%3D%2214.94302462413907%22%20height%3D%2214.94302462413907%22%20transform%3D%22rotate(61%2010%2090)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.7449869578704238%22%2F%3E%3Crect%20x%3D%2220.268609922379255%22%20y%3D%2280.26860992237926%22%20width%3D%2219.46278015524149%22%20height%3D%2219.46278015524149%22%20transform%3D%22rotate(51%2030%2090)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6848434658022597%22%2F%3E%3Crect%20x%3D%2239.671242067590356%22%20y%3D%2279.67124206759036%22%20width%3D%2220.65751586481929%22%20height%3D%2220.65751586481929%22%20transform%3D%22rotate(79%2050%2090)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.542874246602878%22%2F%3E%3Crect%20x%3D%2257.15257793664932%22%20y%3D%2277.15257793664932%22%20width%3D%2225.694844126701355%22%20height%3D%2225.694844126701355%22%20transform%3D%22rotate(22%2070%2090)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.2561589105753228%22%2F%3E%3Crect%20x%3D%2283.15626655332744%22%20y%3D%2283.15626655332744%22%20width%3D%2213.687466893345118%22%20height%3D%2213.687466893345118%22%20transform%3D%22rotate(50%2090%2090)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.6439916514791548%22%2F%3E%3Crect%20x%3D%22103.74431018903852%22%20y%3D%2283.74431018903852%22%20width%3D%2212.51137962192297%22%20height%3D%2212.51137962192297%22%20transform%3D%22rotate(13%20110%2090)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.31069590302649885%22%2F%3E%3Crect%20x%3D%222.1835964787751436%22%20y%3D%22102.18359647877514%22%20width%3D%2215.632807042449713%22%20height%3D%2215.632807042449713%22%20transform%3D%22rotate(84%2010%20110)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.7474819116760045%22%2F%3E%3Crect%20x%3D%2221.580150492489338%22%20y%3D%22101.58015049248934%22%20width%3D%2216.839699015021324%22%20height%3D%2216.839699015021324%22%20transform%3D%22rotate(35%2030%20110)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.4306270604720339%22%2F%3E%3Crect%20x%3D%2240.16174610517919%22%20y%3D%22100.16174610517919%22%20width%3D%2219.67650778964162%22%20height%3D%2219.67650778964162%22%20transform%3D%22rotate(68%2050%20110)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.5283012744039297%22%2F%3E%3Crect%20x%3D%2264.8408575616777%22%20y%3D%22104.8408575616777%22%20width%3D%2210.318284876644611%22%20height%3D%2210.318284876644611%22%20transform%3D%22rotate(8%2070%20110)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.4034807636635378%22%2F%3E%3Crect%20x%3D%2277.59419848956168%22%20y%3D%2297.59419848956168%22%20width%3D%2224.811603020876646%22%20height%3D%2224.811603020876646%22%20transform%3D%22rotate(34%2090%20110)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.7279816332738847%22%2F%3E%3Crect%20x%3D%22104.8526578694582%22%20y%3D%22104.8526578694582%22%20width%3D%2210.294684261083603%22%20height%3D%2210.294684261083603%22%20transform%3D%22rotate(89%20110%20110)%22%20fill%3D%22none%22%20stroke%3D%22%23a7a7e1%22%20stroke-width%3D%221.2%22%20opacity%3D%220.28427399217616767%22%2F%3E%3C%2Fsvg%3E"); }} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--grund);color:var(--tinte);font-family:var(--textschrift); font-size:var(--t-body);line-height:1.62;-webkit-font-smoothing:antialiased; font-synthesis-weight:none;min-height:100vh} /* Korn: nur bei Kreide- und Nachtfassung. Eine Papierfläche ohne Struktur wirkt auf großen Flächen tot, aber sichtbares Rauschen wirkt billig — deshalb 3 % Deckung, fest verankert, und nie über dem Text. */ body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)'/%3E%3C/svg%3E"); background-size:140px 140px} body>*{position:relative;z-index:1} img,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} p,ul,ol,figure{margin:0} ul{padding:0;list-style:none} /* Typo — Betonung über Gewicht und Farbe, erst dann über Größe. Enge Laufweite nur bei großen Graden, offene bei Versalien. */ h1,h2,h3{font-family:var(--kopfschrift);font-weight:var(--kopfgewicht); letter-spacing:var(--spur);margin:0;text-wrap:balance} h1{font-size:var(--t-h1);line-height:1.04} h2{font-size:var(--t-h2);line-height:1.1} h3{font-size:var(--t-h3);line-height:1.28} .lead{color:var(--matt);font-size:var(--t-lead);max-width:62ch;text-wrap:pretty} .eyebrow{font-size:var(--t-label);letter-spacing:.15em;text-transform:uppercase; color:var(--matt);font-weight:600} time,.zahl,.zeit__w,.num__n,.b__zahl,.z span:last-child{font-variant-numeric:tabular-nums} /* Fokus: sichtbar, immer, auf jedem Steuerelement — nicht der Browserring auf einem eigenen Knopf. */ :focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:var(--r-klein)} .sprung{position:absolute;left:-9999px;top:0;z-index:99;background:var(--akzent); color:var(--auf-akzent);padding:var(--r3) var(--r4);border-radius:var(--r-klein)} .sprung:focus{left:var(--r3);top:var(--r3)} /* Demo-Band — Charta 9.5, nicht wegklickbar */ .band{position:sticky;top:0;z-index:50;background:var(--tinte);color:var(--grund); font-size:var(--t-label);line-height:1.4;padding:var(--r2) var(--r4); display:flex;flex-wrap:wrap;gap:var(--r2) var(--r4);align-items:center;justify-content:center} .band b{font-weight:700} /* Die eine Handlung, die dem Ladenbesitzer offensteht, ohne die ganze Seite zu scrollen — und ohne die Demo als seine Seite zu zerstören. */ .band__weg{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--r3); border:1px solid color-mix(in srgb,var(--grund) 45%,transparent);border-radius:999px; font-weight:600;white-space:nowrap; transition:background var(--kurz) var(--raus)} .band__weg:hover{background:color-mix(in srgb,var(--grund) 16%,transparent)} .kopf{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--grund) 88%,transparent); backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--linie)} /* Der Ladenname ist ein Link zur Startseite — also ein Tap-Ziel, also 44px. Gemessen: er war 20px hoch. */ .marke{font-family:var(--kopfschrift);font-weight:var(--kopfgewicht);font-size:var(--t-h3); letter-spacing:var(--spur);line-height:1.15;max-width:44vw;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column; justify-content:center;min-height:44px} .marke small{display:block;font-family:var(--textschrift);font-weight:400; font-size:var(--t-label);color:var(--matt);letter-spacing:.04em} .nav{white-space:nowrap;overflow-x:auto;scrollbar-width:none} .nav::-webkit-scrollbar{display:none} .nav a{color:var(--matt);padding:var(--r1) 0;border-bottom:2px solid transparent; transition:color var(--kurz) var(--raus),border-color var(--kurz) var(--raus)} .nav a:hover{color:var(--tinte)} .nav a[aria-current]{color:var(--tinte);border-color:var(--akzent)} @media(max-width:640px){.marke{font-size:var(--t-body);max-width:32vw}.marke small{display:none} /* ⛔ Bei einer Kundenvorschau trägt diese Zeile die Branche — sie ist auf „Bilder" und „Kontakt" die einzige Stelle, die sagt, was der Betrieb tut. Sie auszublenden hiesse, die Seite dort stumm zu schalten. */ .marke--logo small{display:block} .nav{font-size:var(--t-klein)!important;gap:var(--r3)!important}} /* Knöpfe: alle Zustände, Tap-Ziel 48. Nur transform und opacity bewegen sich. */ .knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--r2); min-height:48px;padding:0 var(--r4);border-radius:var(--r);border:1px solid var(--linie); background:var(--flaeche);color:var(--tinte);font-weight:600;font-size:var(--t-body); font-family:var(--textschrift);cursor:pointer; transition:transform var(--kurz) var(--raus),border-color var(--kurz) var(--raus), box-shadow var(--kurz) var(--raus)} .knopf:hover{transform:translateY(-2px);border-color:var(--akzent);box-shadow:var(--schatten-2)} .knopf:active{transform:translateY(0)} .knopf[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} .knopf--haupt{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)} .knopf--haupt:hover{box-shadow:var(--schatten-3)} .hero__tat{display:flex;flex-wrap:wrap;gap:var(--r3);margin-top:var(--r5)} .hero__tat.mitte{justify-content:center} .merk{display:flex;flex-wrap:wrap;gap:var(--r2);margin-top:var(--r4)} .merk li{display:inline-flex;align-items:center;gap:var(--r2);border:1px solid var(--linie); border-radius:999px;padding:var(--r2) var(--r4);font-size:var(--t-klein);background:var(--flaeche)} .merk .pkt{width:6px;height:6px;border-radius:50%;background:var(--akzent);flex:none} .gal{display:grid;gap:var(--r3);grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} /* ⛔ 07.08.2026: Vorher trug nur die erste und fünfte Kachel ein Bild, der Rest das Muster mit dem Wort „รูปของคุณ" auf leerer Fläche — das sah aus wie ein unfertiger Kasten. Jetzt trägt JEDE Kachel ein echtes Foto, reihum aus drei verschiedenen, damit nie zwei gleiche nebeneinander liegen. Und jede trägt ihr Abzeichen: das Foto zeigt NICHT diesen Betrieb. */ .gal__f{aspect-ratio:1;border-radius:var(--r);background-image:var(--foto);background-size:cover; background-position:center;display:grid;place-items:end start;padding:var(--r3);overflow:hidden; position:relative} .gal__f:nth-child(3n+2){background-image:var(--foto2)} .gal__f:nth-child(3n+3){background-image:var(--foto3)} /* Lesbar auf hell wie auf dunkel: das Abzeichen sitzt auf einer eigenen Fläche, nicht auf dem Foto. Ein Verlauf am unteren Rand trägt es. */ .gal__f::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;pointer-events:none; background:linear-gradient(to top,oklch(0 0 0/.55),transparent)} .gal__f span{position:relative;z-index:1;font-size:var(--t-label);font-weight:600; background:oklch(0 0 0/.62);color:#fff;padding:var(--r1) var(--r3);border-radius:999px; backdrop-filter:blur(3px)} /* ⛔ Auch die grossen Bildflächen der Architekturen tragen ihr Abzeichen — Kopfbild, Bildband und Bento-Kachel. Der Text kommt aus einer Eigenschaft, damit derselbe Baustein auf Thai und Englisch funktioniert, ohne dass zehn Architekturen ihre Auszeichnung ändern müssen. */ .streifen,.b--foto,.buehne{position:relative} .streifen::after,.b--foto::after,.buehne::before{content:var(--txt-beispiel); position:absolute;top:var(--r3);right:var(--r3);z-index:2; font-size:var(--t-label);font-weight:600;line-height:1; background:oklch(0 0 0/.62);color:#fff;padding:var(--r1) var(--r3);border-radius:999px; backdrop-filter:blur(3px);pointer-events:none} /* Der Satz, der einmal je Seite unübersehbar dastehen muss. */ .fotonote{background:color-mix(in srgb,var(--akzent) 9%,var(--flaeche)); border-bottom:1px solid var(--linie)} .fotonote__in{max-width:1180px;margin:0 auto;padding:var(--r3) var(--r4); display:flex;gap:var(--r2) var(--r4);align-items:baseline;flex-wrap:wrap} .fotonote b{font-size:var(--t-klein);color:var(--akzent-text);font-weight:700} .fotonote i{font-style:normal;font-size:var(--t-label);color:var(--tinte);opacity:.85} .fotonote em{font-style:normal;font-size:var(--t-label);color:var(--matt)} /* ⛔ Am Telefon gemessen: Demo-Band und Hinweis zusammen nahmen 380 von 844 px, bevor der Betrieb seinen eigenen Namen sah. Der Hinweis muss ehrlich sein, nicht laut — deshalb dieselbe Aussage auf halber Höhe. */ @media(max-width:640px){ .fotonote__in{padding:var(--r2) var(--r3);gap:1px var(--r2);line-height:1.45} .fotonote b{font-size:13px} .fotonote i,.fotonote em{font-size:11.5px} } .gal__f:nth-child(3n+1){aspect-ratio:4/5} .gal__f:nth-child(4n){aspect-ratio:5/4} .form{display:grid;gap:var(--r3);max-width:520px} .form input,.form textarea{font:inherit;font-size:var(--t-body);padding:var(--r3) var(--r4); border-radius:var(--r);border:1px solid var(--linie);background:var(--flaeche); color:var(--tinte);width:100%} .form input[disabled],.form textarea[disabled]{opacity:.55} .form__hinweis{font-size:var(--t-klein);color:var(--matt);border-left:3px solid var(--akzent); padding-left:var(--r3)} .tel{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;gap:var(--r3); padding:var(--r3) var(--r4) calc(var(--r3) + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--grund) 94%,transparent);backdrop-filter:blur(14px); border-top:1px solid var(--linie)} .tel .knopf{flex:1} @media(max-width:720px){.tel{display:flex}body{padding-bottom:86px}} .angebot{background:var(--tinte);color:var(--grund);text-align:center;padding-block:var(--luft)} .angebot h2{color:var(--grund)} .angebot p{color:color-mix(in srgb,var(--grund) 76%,var(--tinte));margin-inline:auto} .angebot__vertrauen{margin-top:var(--r3);font-weight:600; color:color-mix(in srgb,var(--grund) 92%,var(--tinte))!important;max-width:48ch} .angebot__tat{display:flex;flex-wrap:wrap;gap:var(--r3);justify-content:center;margin-top:var(--r5)} .angebot .knopf{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)} .angebot .knopf--rand{background:transparent;border-color:currentColor;color:inherit} /* ====================================================================== KUNDENVORSCHAU — unser Anteil an einer Seite, die uns nicht gehört ⛔ 07.08.2026, auf 390 px nachgemessen: Band 91 px + Fotohinweis 105 px + Angebotsblock 502 px + Fuss 181 px = 879 px von 1788 px. Wir waren 49 % der Seite, der Betrieb 42 %. Sun: „man muss echt nicht hier zur zahlung gross anzeigen." Wie es die machen, die es können: WordPress-Adminleiste 32 px (46 px auf dem Telefon), Shopify-Ankündigungsleiste 39 px, Webflow-Signatur 26 px, Squarespace bewirbt sein eigenes Produkt auf der eigenen Demo mit einer Karte von 243 × 76 px — 9 % der Höhe eines 844-px-Schirms. Keiner von ihnen legt einen VerkaufsABSCHNITT in die fremde Seite. Zielbudget hier: unter 15 % der Seitenhöhe, ein Preis, ein Knopf. ====================================================================== */ .band--kunde{min-height:36px;padding:var(--r1) var(--r3);gap:var(--r2) var(--r3); justify-content:space-between;flex-wrap:nowrap;font-size:13px} .band--kunde .band__satz{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} /* Kein Knopf im Band. Ein Knopf ist eine Aufforderung, und wir fordern hier nichts — der Kunde soll SEINE Seite ansehen. */ .band--kunde .band__weg{border:0;padding:0 var(--r1);min-height:32px;flex:none; text-decoration:underline;text-underline-offset:3px;opacity:.85;font-weight:500} .band--kunde .band__weg:hover{background:none;opacity:1} @media(max-width:640px){.band--kunde{min-height:44px;font-size:14px}} .fotonote--schmal .fotonote__in{padding:var(--r2) var(--r4);gap:2px var(--r2);line-height:1.4} .fotonote--schmal b{font-size:var(--t-label)} .fotonote--schmal i{font-size:var(--t-label)} /* --- Sprachumschalter --------------------------------------------------- ⛔ Er sitzt im Kopf SEINER Seite, nicht in unserem Band. Im Band wäre er ein Werkzeug von uns; im Kopf ist er eine Eigenschaft seiner Website — und genau die verkaufen wir ihm („ภาษาไทยและอังกฤษ"). Keine Flaggen (eine Flagge ist ein Land, keine Sprache). Trefferflächen nach WCAG 2.5.8: mindestens 24 × 24 px, hier 44 × 32 px, auf dem Telefon 40 × 36 px. Der aktive Zustand ist eine gefüllte Fläche PLUS Fettung — nie allein eine Farbe (Sprünglis Goldton schafft nur 2,8:1). */ .kopf__rechts{display:flex;align-items:center;gap:var(--r3);min-width:0} .sprachen{display:inline-flex;align-items:center;gap:2px;padding:2px;flex:none; border:1px solid var(--linie);border-radius:999px;background:var(--flaeche)} .sprachen a{display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:32px;padding:0 var(--r2);border-radius:999px; font-size:var(--t-label);font-weight:600;color:var(--matt);white-space:nowrap; transition:background var(--kurz) var(--raus),color var(--kurz) var(--raus)} .sprachen a:hover{color:var(--tinte)} .sprachen abbr{text-decoration:none;border:0;cursor:inherit} .sprachen a[aria-current]{background:var(--tinte);color:var(--grund);font-weight:700} @media(max-width:640px){.sprachen a{min-width:40px;min-height:36px;font-size:12px}} /* --- Der leise Hinweis am Fuss ------------------------------------------ */ .hinweis{border-top:1px solid var(--linie);background:var(--flaeche);padding-block:var(--r4)} .hinweis p{margin:0;max-width:64ch;font-size:var(--t-klein);color:var(--matt);line-height:1.5} .hinweis__marke{font-weight:700;color:var(--tinte)!important;font-size:var(--t-label)!important; letter-spacing:.12em;text-transform:uppercase} .hinweis__satz{margin-top:var(--r2)!important;color:var(--tinte)!important} .hinweis__preis{margin-top:var(--r2)!important} .hinweis__mwst{margin-top:var(--r1)!important;font-size:var(--t-label)!important;opacity:.8} .hinweis__tat{display:flex;flex-wrap:wrap;align-items:center;gap:var(--r3);margin-top:var(--r4)} .knopf--klein{min-height:44px;padding:0 var(--r4);font-size:var(--t-klein)} .hinweis__wir{font-size:var(--t-klein);color:var(--matt);text-decoration:underline; text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center} .hinweis__wir:hover{color:var(--tinte)} /* Die zur Überschrift beförderte Augenbraue — siehe h1Sichern. */ .seitentitel{font-size:var(--t-h2);letter-spacing:var(--spur);text-transform:none; color:var(--tinte);margin-bottom:var(--r3)} /* --- Das Logo des Kunden ------------------------------------------------ Vollständig sichtbar (object-fit contain), nie beschnitten, auf ruhiger Fläche — ein Logo verträgt keinen Anschnitt, dafür ist es gezeichnet. */ .marke--logo{flex-direction:row;align-items:center;gap:var(--r3);max-width:62vw;white-space:normal} .marke__logo{width:44px;height:44px;flex:none;border-radius:var(--r-klein); /* Weiss, nicht die Seitenfarbe: fast jedes eingesandte Logo hat selbst einen weissen Grund. Auf hellblau ergäbe das ein weisses Rechteck mitten im Kopf — mit Rahmen und Radius liest es sich als Logoplatte. */ object-fit:contain;background:#fff;border:1px solid var(--linie);padding:3px} .marke__wort{display:flex;flex-direction:column;justify-content:center;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fuss{font-size:var(--t-klein);color:var(--matt);padding-block:var(--r6); border-top:1px solid var(--linie)} .fuss a{color:var(--akzent-text);text-decoration:underline;text-underline-offset:3px} /* Bewegung: 240 ms Eingang, ease-out, nur transform und opacity. */ [data-auf]{opacity:0;transform:translateY(14px); transition:opacity var(--lang) var(--raus),transform var(--lang) var(--raus)} [data-auf].da{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} [data-auf]{opacity:1;transform:none} } .wrap{width:min(100% - 40px,var(--breit));margin-inline:auto} .sec{padding-block:var(--luft);position:relative} .eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--matt);font-weight:600} .lead{color:var(--matt);font-size:clamp(16.5px,1.7vw,19px);max-width:60ch} .muster{background-image:var(--muster);background-size:cover;background-position:center} :root{--breit:100%} /* ⛔ Das Raster sitzt auf
, NICHT auf . Auf body würde das Demo-Band die erste Zelle belegen und Säule wie Inhalt je eine Spalte weiterschieben — die Seite sah dadurch aus wie ein Fehler. */ /* ⛔ Ein blankes 1fr ist NICHT minmax(0,1fr): die zweite Spalte bekommt sonst ihre min-content-Breite und schiebt die Seite auseinander — gemessen 270 px Überlauf bei 900 px. Das ist der Fehler, den ein Ladenbesitzer auf dem Tablet sofort sieht. */ main{display:grid;grid-template-columns:minmax(240px,30%) minmax(0,1fr);align-items:start} .saeule{position:sticky;top:0;height:100vh;padding:38px 34px;display:flex;flex-direction:column; justify-content:space-between;background:var(--tinte);color:var(--grund);overflow:hidden} .saeule::after{content:'';position:absolute;inset:auto -30% -30% -30%;height:60%; background-image:var(--foto);background-size:cover;background-position:center;opacity:.34; filter:grayscale(.7) contrast(1.15)} .saeule h1{font-size:clamp(30px,3.6vw,52px);line-height:1.02;position:relative;z-index:1} .saeule .nav{display:grid;gap:11px;margin-top:30px;position:relative;z-index:1} /* ⛔ Farbe MUSS hier stehen. Die Grundregel setzt .nav a auf --matt, und das ist ein Ton für hellen Grund; auf der dunklen Säule ergab das Schwarz auf Schwarz, gemessen 1:1. Geerbte Farben sind auf umgekehrtem Grund immer verdächtig. */ .saeule .nav a{color:var(--grund);font-size:16px;opacity:.78;border:0;padding:0} .saeule .nav a:hover,.saeule .nav a[aria-current]{color:var(--grund);opacity:1; text-decoration:underline;text-underline-offset:5px} .saeule .knopf{background:var(--grund);color:var(--tinte);border-color:var(--grund); position:relative;z-index:1} .inhalt{min-width:0} .sec{padding-inline:clamp(24px,4vw,64px)} .wrap{width:100%;max-width:760px;margin:0} @media(max-width:1000px){ main{grid-template-columns:1fr} /* ⛔ NICHT static. Das Schmuck-Pseudoelement der Säule ist absolut positioniert und mit inset:auto -30% -30% -30% bewusst größer als sie. Verliert die Säule ihren Positionsbezug, hängt es sich an body und ragt 270 px über den Rand hinaus — gemessen bei 900 px. relative behält den Bezug, overflow:hidden schneidet ab. */ .saeule{position:relative;height:auto;padding:var(--r5) var(--r4) var(--r6);overflow:hidden} .saeule .nav{display:flex;flex-wrap:wrap;gap:16px} }