/* ========================================================================== Physiotherapie — Designstudie Statische Version. Reines CSS, keine externen Requests. ========================================================================== */ /* --- Schriften (lokal) --------------------------------------------------- */ @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;src:url(../fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(../fonts/schibsted-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(../fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* --- Tokens -------------------------------------------------------------- */ :root{ --ink:#0F1719; --ink-80:#3A4749; --ink-60:#6C7A7B; --ink-40:#9AA6A6; --sand:#F4F1EC; --sand-deep:#E9E4DB; --paper:#ffffff; --paper-warm:#FBFAF8; --accent:#FF5C39; --teal:#0F9B8E; --line:rgba(15,23,25,.08); --line-2:rgba(15,23,25,.12); --line-3:rgba(15,23,25,.14); --on-dark:rgba(244,241,236,.78); --display:'Bricolage Grotesque',sans-serif; --text:'Schibsted Grotesk',system-ui,sans-serif; --wrap:1320px; --gutter:32px; } /* --- Basis --------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--text);-webkit-font-smoothing:antialiased} a{color:var(--ink);text-decoration:none} a:hover{color:var(--accent)} ::selection{background:var(--accent);color:#fff} button,input,select,textarea{font-family:inherit} img{display:block;max-width:100%} [hidden]{display:none !important} .page{position:relative;width:100%;overflow:clip} .wrap{max-width:var(--wrap);margin:0 auto} /* --- Keyframes ----------------------------------------------------------- */ @keyframes morph{0%{border-radius:52% 48% 38% 62%/48% 55% 45% 52%}50%{border-radius:38% 62% 58% 42%/58% 42% 58% 42%}100%{border-radius:52% 48% 38% 62%/48% 55% 45% 52%}} @keyframes drift{0%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(14px,-22px,0) rotate(4deg)}100%{transform:translate3d(0,0,0) rotate(0deg)}} @keyframes strand{to{stroke-dashoffset:0}} @keyframes flow{to{stroke-dashoffset:-400}} @keyframes softpulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.9;transform:scale(1.35)}} /* --- Scroll-Reveal ------------------------------------------------------- */ /* Verstecken passiert nur, wenn JS läuft: ohne JS ist alles sofort sichtbar. */ /* ⚠ NACHTRAG VON SOLVIQ (16. August 2026): Auftritte nach ROLLE, ohne Blur. Vorher bekamen alle 41 Elemente denselben Effekt -- `opacity + translate 26px + blur(6px)` ueber rund eine Sekunde. Gemeldet als "genau identische Blur-Effekte bei allen Schriften, auf Dauer extrem anstrengend". ⚠ Das Ermuedende ist der Blur, nicht die Bewegung: Er zwingt das Auge, bei jedem Element neu scharfzustellen. Bei 41 Elementen ist das Arbeit, die nichts erzaehlt. Und er wird in jedem Bild neu gerastert. ⚠ Die Handschrift ist hier eine ANDERE als beim Dachdecker (Maske von unten) -- diese Studie handelt von Koerper und Ruhe, also atmen die Elemente sich auf: ein Hauch Vergroesserung statt einer harten Kante. Drei gleiche Studien waeren wieder das, was gemeldet wurde. */ .js [data-reveal]{ opacity:0; translate:0 24px; scale:1; transition:opacity .62s cubic-bezier(.22,1,.36,1), translate .82s cubic-bezier(.22,1,.36,1), scale .82s cubic-bezier(.22,1,.36,1); } /* Ueberschriften: kommen aus der Tiefe und atmen sich auf */ .js h1[data-reveal],.js h2[data-reveal],.js h3[data-reveal]{ translate:0 30px; scale:.984; transition-duration:.66s,.94s,.94s; } /* Fliesstext: soll lesbar werden, nicht auftreten */ .js p[data-reveal]{ translate:0 12px; transition-duration:.44s,.58s,.58s; } /* Bilder und Figuren: ruhiges Ankommen, kein Ruck */ .js figure[data-reveal],.js img[data-reveal],.js svg[data-reveal]{ translate:0 18px; scale:1.028; transition-duration:.8s,1.1s,1.1s; } .js [data-reveal].is-in{opacity:1;translate:0 0;scale:1} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .js [data-reveal]{opacity:1;translate:0 0;scale:1;filter:none;transition:none} .blob,.deco-ring,.dot--live,.strand{animation:none !important} .fig--morph,.fig--morph2{animation:none !important} } /* --- Typo-Bausteine ------------------------------------------------------ */ .h1{font-family:var(--display);font-weight:600;font-size:clamp(44px,5.2vw,78px);line-height:.98;letter-spacing:-.035em;margin:0 0 26px;text-wrap:balance} .h2{font-family:var(--display);font-size:clamp(34px,3.6vw,54px);font-weight:600;line-height:1.04;letter-spacing:-.03em;margin:0;text-wrap:balance} .h2--md{font-size:clamp(30px,3.2vw,46px);line-height:1.05} .h2--sm{font-size:clamp(30px,3vw,44px);line-height:1.05} .eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase} /* --- Buttons ------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;border-radius:999px;font-size:16.5px;text-decoration:none} .btn--primary{gap:12px;background:var(--ink);color:#fff;padding:16px 26px;font-weight:600} .btn--primary:hover{background:var(--accent);color:#fff} .btn--ghost{padding:16px 24px;border:1px solid rgba(15,23,25,.22);font-weight:500} .btn--ghost:hover{border-color:var(--ink);background:rgba(15,23,25,.04);color:var(--ink)} .btn__arrow{font-size:19px;line-height:1} /* ========================================================================== Header ========================================================================== */ .progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;z-index:60} .hdr{position:fixed;top:0;left:0;right:0;z-index:50} .hdr__util{background:var(--ink);color:rgba(244,241,236,.82)} .hdr__util-inner{max-width:var(--wrap);margin:0 auto;padding:9px var(--gutter);display:flex;align-items:center;gap:24px;font-size:13.5px} .hdr__status{display:flex;align-items:center;gap:8px;white-space:nowrap} .hdr__sep{color:rgba(244,241,236,.4)} .hdr__place{white-space:nowrap} .hdr__util-links{margin-left:auto;display:flex;gap:22px;white-space:nowrap} .hdr__util-links a{color:rgba(244,241,236,.9)} .hdr__util-links a:hover{color:var(--accent)} .dot--live{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:softpulse 2.6s ease-in-out infinite;flex:none} .hdr__main{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:linear-gradient(180deg,rgba(244,241,236,.94) 0%,rgba(244,241,236,.86) 78%,rgba(244,241,236,0) 100%);padding-bottom:12px} .hdr__main-inner{max-width:var(--wrap);margin:0 auto;padding:16px var(--gutter) 0;display:flex;align-items:flex-end;gap:clamp(18px,2.4vw,36px)} .hdr__brand{flex:none} .hdr__brand-name{display:block;font-family:var(--display);font-weight:700;font-size:27px;letter-spacing:-.035em;line-height:1} .hdr__brand-sub{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-60);margin-top:4px;white-space:nowrap} .hdr__nav{display:flex;gap:clamp(16px,1.9vw,26px);margin-left:auto;font-size:15.5px;padding-bottom:5px;flex:none} .hdr__nav a{padding-bottom:4px;border-bottom:2px solid transparent;color:var(--ink-80);white-space:nowrap} .hdr__nav a:hover{border-color:var(--accent);color:var(--ink)} .hdr__cta{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;padding:12px 20px;border-radius:10px;font-size:15px;font-weight:600;white-space:nowrap;flex:none} .hdr__cta:hover{background:var(--accent);color:var(--ink)} .hdr-spacer{height:116px} /* ========================================================================== Hero ========================================================================== */ .hero{position:relative;padding:24px var(--gutter) 40px;scroll-margin-top:120px} .blob{position:absolute;pointer-events:none} .blob--a{top:-90px;right:-140px;width:560px;height:520px;background:radial-gradient(closest-side,rgba(15,155,142,.20),rgba(15,155,142,0));animation:morph 16s ease-in-out infinite} .blob--b{top:340px;left:-180px;width:460px;height:420px;background:radial-gradient(closest-side,rgba(255,92,57,.16),rgba(255,92,57,0));animation:morph 21s ease-in-out infinite reverse} .blob--c{right:-160px;top:80px;width:520px;height:520px;background:radial-gradient(closest-side,rgba(255,92,57,.22),rgba(255,92,57,0));animation:morph 19s ease-in-out infinite} .blob--d{left:50%;top:-60px;width:420px;height:420px;margin-left:-210px;background:radial-gradient(closest-side,rgba(15,155,142,.18),rgba(15,155,142,0));animation:morph 23s ease-in-out infinite} .hero__grid{position:relative;max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,564px);gap:56px;align-items:start} .hero__col{min-width:0} .slots{display:inline-flex;align-items:center;gap:13px;background:var(--paper);border:1px solid var(--line-2);border-radius:999px;padding:8px 18px 8px 10px;margin-bottom:26px;box-shadow:0 6px 18px -14px rgba(15,23,25,.5)} .slots__bars{display:flex;gap:4px;flex:none} .slots__bars i{width:11px;height:22px;border-radius:4px;background:rgba(15,23,25,.14)} .slots__bars i.is-free{background:var(--teal)} .slots__text{font-size:14px;color:var(--ink-80)} .slots__text strong{font-weight:700;color:var(--ink)} .mark{position:relative;white-space:nowrap} .mark__line{position:absolute;left:-4px;right:-4px;bottom:6px;height:14px;background:var(--accent);opacity:.9;border-radius:3px;transform:rotate(-1.2deg);z-index:-1;display:block} .hero__lead{font-size:19.5px;line-height:1.55;color:var(--ink-80);max-width:540px;margin:0 0 32px;text-wrap:pretty} .hero__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:38px} .hero__figure{position:relative;margin-top:8px} .fig--morph{position:relative;overflow:hidden;border-radius:56% 44% 42% 58%/46% 52% 48% 54%;animation:morph 24s ease-in-out infinite;box-shadow:0 40px 90px -40px rgba(15,23,25,.55)} .hero__img{width:100%;height:clamp(320px,34vw,460px);object-fit:cover;object-position:38% 40%} .hero__note{position:absolute;right:8px;bottom:-26px;background:var(--paper);border-radius:20px;padding:18px 22px;box-shadow:0 24px 50px -24px rgba(15,23,25,.45);max-width:300px} .hero__note-title{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.01em;margin-bottom:5px} .hero__note-text{font-size:14px;line-height:1.45;color:var(--ink-60)} /* ========================================================================== Beschwerde-Check (Quiz) ========================================================================== */ .quiz{margin:0;position:sticky;top:132px;background:var(--paper);border-radius:28px;padding:30px 32px 28px;box-shadow:0 40px 90px -46px rgba(15,23,25,.5);border:1px solid rgba(15,23,25,.07)} .quiz__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:6px} .quiz__title{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em} .quiz__step{font-size:13px;color:var(--ink-60)} .quiz__intro{margin:0 0 18px;font-size:14.5px;line-height:1.5;color:var(--ink-60)} .quiz__progress{display:flex;gap:6px;margin-bottom:26px} .quiz__progress i{flex:1;height:6px;border-radius:999px;background:var(--line-2)} .quiz__progress i.is-on{background:var(--accent)} .quiz__panel{min-height:430px} .quiz__panel--flex{display:flex;flex-direction:column} .q-label{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.015em;margin-bottom:4px} .q-sub{font-size:14px;color:var(--ink-60);margin-bottom:20px} .q-sub--tight{margin-bottom:10px} .q-sub--loose{margin-bottom:34px} .q-subq{font-size:14.5px;font-weight:600;margin-bottom:10px} /* Körperschema */ /* ⚠ NACHTRAG VON SOLVIQ: Die Buehne war 500px breit mit der SVG bei left:115px -- die Figur sass damit 5px neben der Mitte, und die beiden Pillenspalten hatten verschieden viel Luft zum Koerper (14 gegen 16px). Jetzt haengt alles an der Mitte, wie in der Handy-Fassung, und die Buehne darf die Karte ausnutzen: sonst bricht "Fuss / Sprunggelenk" um. */ .bodymap{position:relative;width:100%;max-width:540px;height:430px;margin:0 auto} .bodymap__svg{position:absolute;left:50%;top:0;transform:translateX(-50%);width:280px;height:420px} .rgn{position:absolute;display:flex;align-items:center;gap:8px;border:1px solid var(--line-3);border-radius:999px;font-size:13.5px;font-weight:500;cursor:pointer;background:var(--paper);color:var(--ink)} .rgn:hover{border-color:var(--ink)} .rgn--l{flex-direction:row;padding:5px 13px 5px 6px} .rgn--r{flex-direction:row-reverse;padding:5px 6px 5px 13px} .rgn__dot{width:14px;height:14px;border-radius:50%;background:#D5DEDC;flex:none} .rgn.is-on{background:var(--ink);color:#fff} .rgn.is-on .rgn__dot{background:var(--accent)} /* ⚠ NACHTRAG VON SOLVIQ, nicht Teil des Exports. Die Pillen standen hier AUF dem Koerper: `left:256px` ist bei einer 500px-Buehne mit der Figur bei 115..395 genau deren Mitte, "Brustwirbelsaeule" und "Hand / Ellenbogen" lagen dadurch ueber den Armen. Stefan am 15. August: "bekommen wir in desktop ansicht auch hin, dass die pillen mit einem strich etwas weiter vom koerper sind und diesen nicht ueberdecken?" Jetzt dieselbe Bauart wie auf dem Handy: zwei Spalten neben der Silhouette (115+78=193 links, 115+202=317 rechts) und eine Anschlusslinie, deren Laenge je Region gemessen ist. Die senkrechten Positionen bleiben, wo der Entwurf sie hatte -- nur die Huefte wandert hoch, weil der ueberarbeitete Rumpf bei y 218 endet und die Linie sonst auf den Oberschenkel zeigt. */ .bodymap{--figur:124px; --luft:14px} .rgn--l{left:calc(50% + var(--figur)/2 + var(--luft))} .rgn--r{right:calc(50% + var(--figur)/2 + var(--luft))} .rgn::after{content:'';position:absolute;top:50%; width:calc(var(--luft) + var(--figur) * var(--reach));height:1px; background:var(--line-3)} .rgn--l::after{right:100%} .rgn--r::after{left:100%} .rgn.is-on::after{background:var(--accent);height:2px} /* ⚠ --reach ist der Weg von der Pille bis zur KOERPERKANTE auf DIESER Hoehe, als Anteil der Figurbreite -- gemessen mit isPointInFill, nicht geschaetzt. ⚠ Die Werte stehen zweimal (hier und im Handy-Block), und das ist kein Versehen: Dort liegen die Anker auf anderen Hoehen, und der Koerper ist dort anders breit. Wer sie gleichsetzt, laesst die Linien ins Leere oder in den Koerper laufen. Wer die Figur aendert, misst BEIDE Saetze neu. */ .rgn--nacken{top:63px; --reach:.24} .rgn--bws{top:112px; --reach:.03} /* ⚠ Diese beiden liegen am engsten: bei top 172 und 196 ueberlappten sie sich um 4px (Pillenhoehe 29). Gemessen, nicht geschaetzt -- jetzt 5px Luft, und beide zeigen weiter auf ihre Region (Lende y 180, Becken 214, der Rumpf endet bei 218). */ .rgn--lws{top:166px; --reach:0} .rgn--huefte{top:200px; --reach:.26} .rgn--fuss{top:379px; --reach:.28} .rgn--schulter{top:75px; --reach:.13} .rgn--hand{top:187px; --reach:.02} .rgn--knie{top:287px; --reach:.25} .rgn-hint{font-size:13.5px;color:var(--ink-60);min-height:20px;margin-top:2px} /* ⚠ NACHTRAG VON SOLVIQ, nicht Teil des Exports. Die gewaehlte Region leuchtet IM Koerper auf -- vorher war die Figur nur Dekoration, die Auswahl stand allein in der Pille. Die Flaechen sind auf die Silhouette beschnitten (clip-path im Markup) und laufen als Radialverlauf weich aus; eine harte Ellipse las sich als aufgeklebter Fleck. ⚠ Es haengt an :has() und damit an KEINEM Skript -- das Quiz setzt die Klasse is-on ohnehin. Kennt ein Browser :has() nicht, bleibt es beim alten Verhalten: Die Pille wird dunkel, der Koerper bleibt ruhig. */ .zone{fill:url(#sq-zone); opacity:0; transition:opacity .3s ease; pointer-events:none} @media (prefers-reduced-motion:reduce){ .zone{transition:none} } /* ⚠ NACHTRAG VON SOLVIQ: Die Trefferflaechen am Koerper. `fill:none` allein nimmt KEINE Klicks entgegen -- SVG traegt standardmaessig pointer-events:visiblePainted, und was nicht gemalt wird, wird auch nicht getroffen. Deshalb ausdruecklich pointer-events:all. */ .zonen-treffer rect{fill:none; pointer-events:all} /* Am Zeigegeraet zeigt ein Ueberfahren die Region schon an, bevor man klickt -- sonst sieht man dem Koerper nicht an, dass er bedienbar ist. Schwaecher als die Auswahl (0,45 gegen 1), damit beides unterscheidbar bleibt. Auf dem Handy gibt es kein Hover, dort faellt der Block weg. ⚠ Dieser Block steht VOR der Auswahl-Regel, und das ist nicht Geschmackssache: Beide haben dieselbe Spezifitaet (0,3,0), also gewinnt die spaetere. Stand er dahinter, wurde eine bereits gewaehlte Region beim Ueberfahren SCHWAECHER (1 -> 0,45) -- gemessen in echtem Chrome ueber Input.dispatchMouseEvent. */ @media (hover:hover){ .zonen-treffer rect{cursor:pointer} .bodymap:has([data-zone="nacken"]:hover) .zone--nacken, .bodymap:has([data-zone="schulter"]:hover) .zone--schulter, .bodymap:has([data-zone="bws"]:hover) .zone--bws, .bodymap:has([data-zone="lws"]:hover) .zone--lws, .bodymap:has([data-zone="huefte"]:hover) .zone--huefte, .bodymap:has([data-zone="hand"]:hover) .zone--hand, .bodymap:has([data-zone="knie"]:hover) .zone--knie, .bodymap:has([data-zone="fuss"]:hover) .zone--fuss{opacity:.45} } .bodymap:has(.rgn--nacken.is-on) .zone--nacken, .bodymap:has(.rgn--schulter.is-on) .zone--schulter, .bodymap:has(.rgn--bws.is-on) .zone--bws, .bodymap:has(.rgn--lws.is-on) .zone--lws, .bodymap:has(.rgn--huefte.is-on) .zone--huefte, .bodymap:has(.rgn--hand.is-on) .zone--hand, .bodymap:has(.rgn--knie.is-on) .zone--knie, .bodymap:has(.rgn--fuss.is-on) .zone--fuss{opacity:1} /* NRS-Slider */ .nrs-row{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px} .nrs-value{font-family:var(--display);font-size:92px;line-height:.8;font-weight:700;letter-spacing:-.05em;color:#E8B93C} .nrs-meta{padding-bottom:8px} .nrs-title{font-size:16.5px;font-weight:600;margin-bottom:3px} .nrs-note{font-size:14px;line-height:1.45;color:var(--ink-60);max-width:280px} input[type=range].nrs{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:999px;background:linear-gradient(90deg,#0F9B8E 0%,#7FB35E 35%,#E8B93C 60%,#FF5C39 100%);outline:none;margin:0} input[type=range].nrs::-webkit-slider-thumb{-webkit-appearance:none;width:36px;height:36px;border-radius:50%;background:var(--ink);border:5px solid #fff;box-shadow:0 6px 18px rgba(15,23,25,.35);cursor:grab} input[type=range].nrs::-webkit-slider-thumb:active{cursor:grabbing} input[type=range].nrs::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--ink);border:5px solid #fff;box-shadow:0 6px 18px rgba(15,23,25,.35);cursor:grab} /* ⚠ NACHTRAG VON SOLVIQ (17. August 2026): Die "5" stand nicht unter dem Griff. Hier stand `justify-content:space-between` -- das verteilt den Restplatz gleichmaessig auf die zwei Luecken, wodurch die Mitte des mittleren Labels bei C/2 + (w1-w3)/2 landet, also um die halbe Breitendifferenz der AUSSENlabels verschoben. Gemessen bei 1280px: Bahnmitte 966,0 -- "5" bei 973,9, also 7,9px daneben, weil "0 · schmerzfrei" (86,4px) breiter ist als "10 · maximal" (70,6px). Mit `1fr auto 1fr` sind die beiden Aussenspalten per Definition gleich breit; die Mittelspalte liegt damit IMMER auf C/2, unabhaengig von den Textlaengen. Und C/2 ist zugleich die Griffposition bei Wert 5: Ein nativer Range-Griff wandert von thumb/2 bis breite-thumb/2, bei value=5 von 0..10 also exakt auf die Bahnmitte. ⚠ Wer hier wieder space-between einsetzt, holt den Versatz zurueck -- und zwar still: Er faellt erst auf, wenn jemand die Aussenlabels umformuliert, und dann sucht man den Fehler am Regler statt am Text. ⚠ Die Aussenlabels bleiben bewusst BUENDIG an den Bahnenden, obwohl der Griff bei 0 bzw. 10 um thumb/2 (18px) eingerueckt steht. Sie sind links- bzw. rechtsbuendige Textbloecke, keine Punktmarken -- eine Einrueckung liesse die Skala schmaler wirken als den Balken. */ .nrs-scale{display:grid;grid-template-columns:1fr auto 1fr;font-size:12.5px;color:var(--ink-40);margin-top:10px} .nrs-scale>:last-child{text-align:right} .q-block{margin-top:30px;border-top:1px solid rgba(15,23,25,.1);padding-top:20px} /* Chips + Optionskarten */ .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{border:1px solid var(--line-3);border-radius:999px;padding:9px 16px;font-size:14px;cursor:pointer;background:var(--paper);color:var(--ink)} .chip:hover{border-color:var(--ink)} .chip.is-on{background:var(--ink);color:#fff} .opts{display:flex;flex-direction:column;gap:10px} .opt{text-align:left;border:1px solid var(--line-3);border-radius:16px;padding:16px 18px;cursor:pointer;background:var(--paper);color:var(--ink)} .opt:hover{border-color:var(--ink)} .opt.is-on{background:var(--ink);color:#fff} .opt__t{font-size:16px;font-weight:600;margin-bottom:4px} .opt__d{font-size:13.5px;line-height:1.45;opacity:.72} /* Kontaktfelder */ .fields{display:flex;flex-direction:column;gap:12px} .field{display:block} .field__label{display:block;font-size:13px;font-weight:600;color:var(--ink-80);margin-bottom:6px} .input{width:100%;border:1px solid rgba(15,23,25,.16);border-radius:12px;padding:13px 15px;font-size:15px;background:var(--paper-warm);color:var(--ink);outline:none} .input:focus{border-color:var(--ink);background:var(--paper)} .field__group-label{display:block;font-size:13px;font-weight:600;color:var(--ink-80);margin-bottom:8px} .consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--ink-60);cursor:pointer;margin-top:2px} .consent input{margin-top:2px;width:17px;height:17px;accent-color:var(--ink);flex:none} /* Ergebnis */ .done__head{display:flex;align-items:center;gap:12px;margin-bottom:16px} .done__check{width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none} .done__title{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.02em} .done__summary{margin:0 0 20px;font-size:15px;line-height:1.55;color:var(--ink-80)} .assess{background:var(--sand);border-radius:18px;padding:20px 22px;margin-bottom:18px} .assess__label{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60);margin-bottom:10px} .assess__text{font-size:15.5px;line-height:1.55} .done__next{font-size:15px;line-height:1.55;color:var(--ink-80);margin-bottom:20px} .done__actions{display:flex;gap:12px;flex-wrap:wrap} .btn--dark-sm{display:inline-flex;align-items:center;background:var(--ink);color:#fff;padding:14px 22px;border-radius:999px;font-size:15.5px;font-weight:600;border:none;cursor:pointer} .btn--dark-sm:hover{background:var(--accent);color:#fff} .btn--outline-sm{border:1px solid rgba(15,23,25,.2);background:transparent;border-radius:999px;padding:14px 22px;font-size:15.5px;cursor:pointer;color:var(--ink)} .btn--outline-sm:hover{border-color:var(--ink)} .done__disclaimer{margin:20px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-40)} /* Quiz-Navigation */ .quiz__nav{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(15,23,25,.1)} .btn--back{border:1px solid rgba(15,23,25,.18);background:transparent;border-radius:999px;padding:13px 20px;font-size:15px;cursor:pointer;color:var(--ink)} .btn--back:hover{border-color:var(--ink)} .btn--back.is-off{opacity:.35} .btn--next{margin-left:auto;border:none;background:var(--ink);color:#fff;border-radius:999px;padding:14px 26px;font-size:15.5px;font-weight:600;cursor:pointer} .btn--next[disabled]{background:rgba(15,23,25,.28);cursor:not-allowed} .quiz__trust{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--ink-40)} .dot--sm{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none} /* ========================================================================== Faszien-Divider ========================================================================== */ .strands{position:relative;margin-top:70px} .strands svg{display:block;width:100%;height:150px} .strand{fill:none;stroke-linecap:round} .strand--1{stroke:var(--accent);stroke-width:3;opacity:.85;stroke-dasharray:2000;stroke-dashoffset:2000;animation:strand 2.4s cubic-bezier(.22,1,.36,1) .1s forwards} .strand--2{stroke:var(--teal);stroke-width:2;opacity:.7;stroke-dasharray:2000;stroke-dashoffset:2000;animation:strand 2.6s cubic-bezier(.22,1,.36,1) .22s forwards} .strand--3{stroke:var(--ink);stroke-width:1.2;opacity:.28;stroke-dasharray:2000;stroke-dashoffset:2000;animation:strand 2.9s cubic-bezier(.22,1,.36,1) .34s forwards} .strand--4{stroke:var(--accent);stroke-width:1.2;opacity:.35;stroke-dasharray:12 16;animation:flow 9s linear infinite} @media (prefers-reduced-motion:reduce){ .strand--1,.strand--2,.strand--3{stroke-dashoffset:0} .strand--4{animation:none} } /* ========================================================================== Kennzahlen ========================================================================== */ .stats-sec{padding:10px var(--gutter) 96px} .stats{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--line-2);border-radius:22px;overflow:hidden} .stat{background:var(--sand);padding:30px 26px} .stat__num{font-family:var(--display);font-size:52px;font-weight:700;letter-spacing:-.04em;line-height:1} .stat__text{font-size:14.5px;color:var(--ink-80);margin-top:8px;line-height:1.4} /* ========================================================================== Haltung (dunkel) ========================================================================== */ .stance{background:var(--ink);color:var(--sand);padding:110px var(--gutter);position:relative;overflow:hidden} .two{position:relative;max-width:var(--wrap);margin:0 auto;display:grid;gap:70px;align-items:center} .two--stance{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)} .eyebrow--accent{color:var(--accent);margin-bottom:22px} .eyebrow--teal{color:var(--teal);margin-bottom:20px} .stance .h2{margin-bottom:26px} .p-light{font-size:18px;line-height:1.6;color:var(--on-dark);margin:0 0 18px;max-width:560px;text-wrap:pretty} .p-light--last{margin-bottom:34px} .tags{display:flex;flex-wrap:wrap;gap:10px} .tag{border:1px solid rgba(244,241,236,.24);border-radius:999px;padding:9px 16px;font-size:14px} .fig{position:relative} .fig--morph2{overflow:hidden;border-radius:44% 56% 52% 48%/50% 44% 56% 50%;animation:morph 27s ease-in-out infinite;box-shadow:0 50px 100px -50px rgba(0,0,0,.9)} .fig__img--stance{width:100%;height:clamp(340px,32vw,480px);object-fit:cover;object-position:50% 45%} .note--accent{position:absolute;left:-18px;bottom:-22px;background:var(--accent);color:var(--ink);border-radius:18px;padding:16px 20px;max-width:260px;box-shadow:0 24px 50px -24px rgba(0,0,0,.7)} .note--accent b{display:block;font-family:var(--display);font-size:15px;font-weight:700;margin-bottom:4px} .note--accent span{font-size:13.5px;line-height:1.45;opacity:.85} /* ========================================================================== Leistungen ========================================================================== */ .svc{padding:110px var(--gutter) 90px;position:relative} .svc__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:48px;flex-wrap:wrap} .svc__head .h2{max-width:640px} .svc__intro{font-size:16.5px;line-height:1.55;color:var(--ink-60);max-width:340px;margin:0;text-wrap:pretty} .bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px} .span3{grid-column:span 3} .span2{grid-column:span 2} .card{border-radius:26px} .card--paper{background:var(--paper);border:1px solid var(--line)} .card--dark{background:var(--ink);color:var(--sand);padding:0;overflow:hidden;display:flex;flex-direction:column} .card--teal{background:var(--teal);color:#fff;padding:26px 26px 28px} .card--accent{background:var(--accent);color:var(--ink);padding:28px 28px 30px} .card__img{width:100%;height:250px;object-fit:cover;object-position:50% 55%} .card__body{padding:28px 30px 32px} .card__t{font-family:var(--display);font-weight:600;letter-spacing:-.02em} .card__t--l{font-size:25px;margin-bottom:10px} .card__t--s{font-size:21px;margin-bottom:8px} .card__t--bold{font-weight:700} .card__p{margin:0;line-height:1.55;text-wrap:pretty} .card__p--l{font-size:15.5px} .card__p--s{font-size:14.5px;line-height:1.5} .card--dark .card__p{color:rgba(244,241,236,.75)} .card--teal .card__p{opacity:.9} .card--paper .card__p{color:var(--ink-80)} .stack{grid-column:span 3;display:grid;grid-template-rows:auto auto;gap:20px} .stack__top{background:var(--paper);border-radius:26px;padding:28px 30px;border:1px solid var(--line)} .stack__top .card__p{color:var(--ink-80)} .cols{display:grid;grid-template-columns:1fr 1fr;gap:20px} .card--pad-m{padding:26px 26px 28px} .card--pad-s{padding:28px 28px 30px} /* ========================================================================== Aktive Phase ========================================================================== */ .active-sec{position:relative;padding:0 0 20px} .two--active{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:64px} .fig--flat{overflow:hidden;border-radius:26px;box-shadow:0 40px 90px -50px rgba(15,23,25,.6)} .fig__img--active{width:100%;height:clamp(320px,30vw,440px);object-fit:cover} .deco-ring{position:absolute;right:-24px;top:-28px;width:120px;height:120px;border-radius:50%;border:2px dashed rgba(15,155,142,.55);animation:drift 12s ease-in-out infinite;pointer-events:none} .active-sec .h2{margin-bottom:22px} .p-body{font-size:17.5px;line-height:1.6;color:var(--ink-80);margin:0 0 26px;max-width:540px;text-wrap:pretty} .ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px} .ticks li{display:flex;gap:14px;align-items:flex-start} .ticks i{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:8px;flex:none} .ticks span{font-size:16px;line-height:1.5;color:var(--ink-80)} .ticks strong{font-weight:600;color:var(--ink)} /* ========================================================================== Ablauf ========================================================================== */ .flow{padding:110px var(--gutter) 100px;position:relative} .flow .h2{margin-bottom:12px;max-width:720px} .flow__intro{font-size:17px;color:var(--ink-60);margin:0 0 56px;max-width:560px;text-wrap:pretty} .steps{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start} .step{border-radius:26px;padding:34px 32px 36px;background:var(--paper);border:1px solid var(--line)} .step--2{margin-top:40px} .step--3{margin-top:80px;background:var(--ink);color:var(--sand);border:none} .step__label{font-family:var(--display);font-size:13px;letter-spacing:.14em;color:var(--accent);margin-bottom:20px} .step__title{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.025em;margin-bottom:12px} .step__p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-80);text-wrap:pretty} .step--3 .step__p{color:var(--on-dark)} /* ========================================================================== Was wir nicht machen ========================================================================== */ .exclude{background:var(--sand-deep);padding:96px var(--gutter);position:relative;overflow:hidden} .two--exclude{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px;align-items:start} .exclude .h2{margin-bottom:18px} .exclude__intro{font-size:16.5px;line-height:1.6;color:var(--ink-80);margin:0;text-wrap:pretty} .hairline{display:flex;flex-direction:column;gap:2px;background:var(--line-3);border-radius:22px;overflow:hidden} .hairline__row{background:var(--sand-deep);padding:26px 30px} .hairline__t{font-family:var(--display);font-size:19px;font-weight:600;margin-bottom:7px} .hairline__p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-80);text-wrap:pretty} /* ========================================================================== Praxis / FAQ ========================================================================== */ .praxis{padding:100px var(--gutter) 90px} .two--praxis{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:start} .praxis .h2{margin-bottom:22px;max-width:520px} .praxis__lead{font-size:17px;line-height:1.6;color:var(--ink-80);margin:0 0 32px;max-width:520px;text-wrap:pretty} .meta-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:560px} .meta__label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);margin-bottom:12px} .meta__body{font-size:15.5px;line-height:1.9;color:var(--ink)} .meta__body span{color:var(--ink-60)} .faq{background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:32px 34px 34px} .faq__title{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:18px} .faq__list{display:flex;flex-direction:column;gap:20px} .faq__q{font-size:15.5px;font-weight:600;margin-bottom:5px} .faq__a{margin:0;font-size:15px;line-height:1.55;color:var(--ink-80);text-wrap:pretty} /* ========================================================================== Footer ========================================================================== */ .ft{background:var(--ink);color:var(--sand);padding:80px var(--gutter) 40px;position:relative;overflow:hidden} .spine{position:absolute;right:56px;top:40px;width:110px;height:440px;opacity:.22;pointer-events:none} .ft__inner{position:relative;max-width:var(--wrap);margin:0 auto} .foot{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:48px;padding-bottom:56px} .ft__brand{display:flex;align-items:center;gap:10px;margin-bottom:18px} .ft__tick{display:block;width:10px;height:26px;border-radius:5px;background:var(--accent)} .ft__name{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em} .ft__about{margin:0;font-size:15.5px;line-height:1.6;color:rgba(244,241,236,.7);max-width:380px;text-wrap:pretty} .ft__label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,236,.5);margin-bottom:14px} .ft__links{display:flex;flex-direction:column;gap:9px;font-size:15.5px} .ft__links a{color:rgba(244,241,236,.85)} .ft__links a:hover{color:var(--accent)} .ft__links span{color:rgba(244,241,236,.6)} .ft__bottom{border-top:1px solid rgba(244,241,236,.14);padding-top:24px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;font-size:13.5px;color:rgba(244,241,236,.55)} .ft__bottom a{color:rgba(244,241,236,.75)} .ft__bottom a:hover{color:var(--accent)} .ft__note{margin-left:auto} /* ========================================================================== Responsive ========================================================================== */ @media (max-width:1180px){ .hero__grid{grid-template-columns:minmax(0,1fr);gap:64px} .quiz{position:static;width:100%;max-width:600px} .two{grid-template-columns:minmax(0,1fr) !important;gap:44px} .steps{grid-template-columns:minmax(0,1fr)} .step--2,.step--3{margin-top:0} .bento{grid-template-columns:repeat(2,minmax(0,1fr))} .bento>*{grid-column:span 1} .stats{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:980px){ .hdr__util-links{display:none} } @media (max-width:820px){ .bento,.stats,.foot,.cols,.meta-cols{grid-template-columns:minmax(0,1fr)} .hdr__nav{display:none} .spine{display:none} } @media (max-width:600px){ :root{--gutter:18px} .hdr__util-inner{gap:16px} .hdr__main-inner{gap:16px} .quiz{padding-left:20px;padding-right:20px} } /* ⚠ NACHTRAG VON SOLVIQ, nicht Teil des Exports. Bei einem neuen Export aus Claude Design geht dieser Block verloren und muss wieder hinein. Das Koerperschema ist fuer eine 500px breite Buehne gebaut -- die acht Labels haengen an festen Pixelwerten (left:256px, right:290px ...). In der Quiz-Karte stehen auf einem 393px-Handy aber nur 317px zur Verfuegung: gemessen begann "Hand / Ellenbogen" bei -28px, "Brustwirbelsaeule" endete 67px neben der Figur. Das frueher hier stehende transform:scale(.76) hat das nicht behoben, sondern nur verkleinert. ⚠ Die Anheftung an den Koerperteil BLEIBT -- sie ist der Wert des Abschnitts. Ein erster Anlauf hat stattdessen umgebrochen (Figur oben, Regionen als Raster darunter); Stefan am 15. August: "wie es auf desktop ansicht direkt am richtigen koerperteil war war es besser". Das Raster steht nur noch als Rueckfallebene unter 360px. Damit die Anheftung auf 317px aufgeht, aendern sich drei Groessen: 1. Die Buehne bricht aus dem Kartenpolster aus (margin-inline: -16px) und gewinnt 32px. ⚠ Dazu gehoert max-width:none -- die Grundregel setzt max-width:100%, und die haette die negativen Raender wieder eingefangen (gemessen: Buehne blieb bei 315 statt 351px). 2. Der Punkt am Label wird zur ANSCHLUSSLINIE zum Koerper. Er kostete 22px Pillenbreite; die Linie kostet 6 und zeigt deutlicher. 3. Die Figur wird schmaler. Ihre Breite haengt an der HOEHE, nicht an der Breite: die Silhouette spannt 124 von 280 viewBox-Einheiten und 420 in der Hoehe, preserveAspectRatio passt in die kleinere Achse ein. Also Breite = 0,295 x Hoehe, und ein breiterer Kasten stellt nur mehr Luft daneben. ⚠ Aus 3. folgt die eigentliche Klemme: Eine schmalere Figur macht die Pillen breiter, aber die Buehne FLACHER -- und die Labels stehen in Prozent ihrer Hoehe, ruecken also zusammen. Beide Enden sind gemessen, nicht geschaetzt: Bei 92px Figur (311px hoch) bleiben in der rechten Spalte 7 / 9 / 12 / 71px Luft zwischen den Pillen. ⚠ KEINE Prozentwerte in --figur. Ein calc(100% - 250px) darin loest sich je nach Verwendung gegen die Breite ODER die Hoehe auf; in height:calc() wurde daraus ein ungueltiger Wert, die Buehne fiel auf Hoehe 0 und alle acht Labels lagen uebereinander. ⚠ Die Schwelle nach oben ist gerechnet: Der Innenraum der Karte ist min(600, vw - 2*gutter) - 2*Polster. Fuer die urspruenglichen 500px braucht es rund 630px Fensterbreite; 700 laesst 73px Reserve. */ /* ⚠ NACHTRAG VON SOLVIQ (siehe unten). Der Umbruch der zweiteiligen Beschriftungen: "Fuss / Sprunggelenk" wird zu "Fuss" ueber "Sprunggelenk", OHNE den Schraegstrich am Zeilenende. Stefan am 15. August: "kannst du bitte sprunggelenk und ellenbogen dann komplett in die zweite zeile setzen und nicht mit bindestrich". ⚠ Der Trenner steht als eigenes Element im Markup und wird ausgeblendet, das Leerzeichen davor bleibt: Der zugaengliche Name lautet damit weiter "Fuss Sprunggelenk" und nicht "FussSprunggelenk". ⚠ Und hyphens:auto ist RAUS. Es war als Notnagel gedacht, erzeugt aber genau das, was hier nicht sein soll -- einen Trennstrich mitten im Wort. Dass keiner mehr gebraucht wird, haengt an der Breitenrechnung unten. */ @media (max-width:700px){ .rgn__sep{display:none} .rgn__zw{display:block} } @media (min-width:360px) and (max-width:700px){ /* ⚠ Die Figur waechst mit dem Geraet, und die Formel ist die Umkehrung der Klemme oben: Die Buehne ist (100vw - 46px) breit -- Fensterrand 18, Kartenpolster 20, Kartenrahmen 1 je Seite, davon 16 zurueckgeholt --, und eine Pille braucht gemessen 113,9px fuer "Brustwirbelsaeule". Also darf die Figur hoechstens 100vw - 292px sein (mit 6px Reserve gegen abweichende Schriftmasse auf iOS). Gedeckelt bei 124px -- Silhouettenbreite der Desktop-Fassung, groesser soll sie nicht werden. Gemessen bleibt die Pillenbreite dadurch ueber die ganze Strecke bei rund 114px, waehrend die Figur von 84 auf 124px waechst. */ .bodymap{--figur:clamp(84px, calc(100vw - 292px), 124px); --luft:6px; position:relative; display:block; width:auto; max-width:none; height:calc(var(--figur) * 3.387); margin:10px -16px 2px; transform:none} .bodymap__svg{position:absolute; left:50%; top:0; transform:translateX(-50%); width:calc(var(--figur) * 2.258); height:calc(var(--figur) * 3.387); margin:0} /* ⚠ Die Pillen liegen NACH der SVG im Markup und damit darueber -- ihr Ueberlappen der (durchsichtigen) Seitenraender des SVG-Kastens ist gewollt und kostet nichts. */ /* ⚠ KEIN inset:auto hier. Es hat dieselbe Spezifitaet wie die Spaltenregeln .rgn--l/.rgn--r weiter oben und steht spaeter -- es hat deren left/right stillschweigend auf 0 zurueckgesetzt, und alle Pillen klebten am linken Buehnenrand. Aufgefallen ist das nur, weil die Messung die Silhouettenkante gegen die Pillenkante geprueft hat. */ .rgn{position:absolute; width:auto; --reach:0; max-width:calc((100% - var(--figur))/2 - var(--luft)); flex-direction:row; justify-content:flex-start; text-align:left; font-size:12px; line-height:1.25; padding:8px; gap:0; transform:translateY(-50%)} .rgn--r{flex-direction:row; padding:8px} .rgn__dot{display:none} /* Die Spaltenpositionen stehen in der Grundregel und rechnen mit --figur und --luft von selbst mit -- hier gibt es dazu nichts mehr zu sagen. */ /* Die Anschlusslinie selbst steht in der Grundregel weiter oben; hier aendern sich nur --figur, --luft, die Hoehen und --reach. ⚠ Die Prozentwerte sind gegen die NACHBARN geprueft, nicht nur gegen die Anatomie: nacken -> bws -> lws liegen am engsten, dort entscheidet sich, ob eine zweizeilige Pille noch passt. ⚠ Und --reach ist hier ein ANDERER Wert als am Desktop, weil die Anker auf anderen Hoehen sitzen -- gemessen an derselben Figur. */ .rgn--nacken {top:13%; --reach:.33} .rgn--bws {top:26%; --reach:.06} .rgn--lws {top:39.5%; --reach:0} .rgn--huefte {top:51.5%; --reach:.26} .rgn--fuss {top:90%; --reach:.24} .rgn--schulter{top:18.5%; --reach:.23} .rgn--hand {top:45%; --reach:0} .rgn--knie {top:68.5%; --reach:.25} } /* ⚠ Unter 380px stoesst die Figur auf ihren Mindestwert (84px) -- die Pillen werden dann nicht mehr breiter, wohl aber der Bedarf zu gross. Deshalb dort einen Schriftgrad kleiner; gemessen bleiben bei 360px 5 / 7 / 10 / 64px Luft zwischen den Pillen, und "Brustwirbelsaeule" bleibt einzeilig. */ @media (min-width:360px) and (max-width:379px){ .rgn{font-size:11px} } /* ⚠ Unter 360px traegt die Anheftung nicht mehr: Die Pillen muessten unter 90px breit werden, und dann bricht schon "Sprunggelenk" um. Dort steht deshalb das Raster -- Figur oben, Regionen darunter. Die SVG ist aria-hidden und rein bildhaft (keine Flaechen je Region), die Buttons tragen die ganze Funktion: verloren geht das Zeigen, nicht das Zuordnen. ⚠ text-align gehoert dazu: