/*
* MEDOS 2026 refresh
* A scoped design layer for the public landing and practice pages.
* It deliberately avoids the historical, cumulative .hero/.team-card overrides.
*/
:root {
--refresh-ink: #172b38;
--refresh-navy: #38556d;
/* Beide zeigen auf --medos-blue-text in style.css, das die Textfarbe seit
repoops#145 als Basis fuehrt. Die Namen bleiben, damit die vorhandenen
Regeln unveraendert bleiben.
Zu -bright: der Name ist historisch. Die Variable wurde mit #00a0e1
eingefuehrt, also tatsaechlich als das hellere Blau; auf dem Weg ueber die
Kontrastarbeit ist sie auf denselben Wert wie --refresh-blue gelandet.
Heute unterscheiden sich die beiden NICHT mehr. Wer hier einen zweiten Ton
vermutet, sucht etwas, das es seit damals nicht mehr gibt - verwendet wird
-bright noch an zwei Stellen (.home-hero-copy h1 span und
.practice-v2-hero-copy h1 span).
Fuer Flaechen und Grafiken gilt weiterhin --medos-blue, nicht diese hier. */
--refresh-blue: var(--medos-blue-text);
--refresh-blue-bright: var(--medos-blue-text);
--refresh-line: #d8e4e9;
--refresh-mist: #eef7fa;
--refresh-sand: #f8f4ec;
--refresh-white: #fff;
--refresh-max: 1240px;
--refresh-gutter: clamp(20px, 3.6vw, 44px);
}
html.refresh-root {
overflow-x: visible;
}
body.home-v2,
body.practice-v2,
body.methods-v2 {
overflow-x: visible;
color: var(--refresh-ink);
background: var(--refresh-white);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
}
body.home-v2 :where(main, section, article, div, nav, figure, header, footer),
body.practice-v2 :where(main, section, article, div, nav, figure, header, footer),
body.methods-v2 :where(main, section, article, div, nav, figure, header, footer) {
min-width: 0;
}
body.home-v2 :where(h1, h2, h3, h4, p, a, strong, span, blockquote),
body.practice-v2 :where(h1, h2, h3, h4, p, a, strong, span, blockquote),
body.methods-v2 :where(h1, h2, h3, h4, p, a, strong, span, blockquote) {
overflow-wrap: break-word;
}
body.home-v2 :where(h1, h2, h3, h4, strong),
body.practice-v2 :where(h1, h2, h3, h4, strong),
body.methods-v2 :where(h1, h2, h3, h4, strong) {
overflow-wrap: normal;
word-break: normal;
hyphens: auto;
}
.home-v2 .site-header,
.practice-v2 .site-header,
.methods-v2 .site-header {
min-height: 76px;
height: auto;
padding: 8px max(var(--refresh-gutter), calc((100vw - var(--refresh-max)) / 2));
grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) auto;
gap: clamp(16px, 2.2vw, 30px);
position: sticky;
inset: 0 0 auto;
border-bottom: 1px solid rgba(56, 85, 109, .14);
box-shadow: 0 4px 18px rgba(23, 43, 56, .055);
}
.home-v2 .brand img,
.practice-v2 .brand img,
.methods-v2 .brand img {
width: 166px;
height: auto;
max-height: 52px;
}
.home-v2 .desktop-nav,
.practice-v2 .desktop-nav,
.methods-v2 .desktop-nav {
gap: clamp(13px, 1.7vw, 25px);
font-size: .875rem;
}
.home-v2 .desktop-nav a,
.practice-v2 .desktop-nav a,
.methods-v2 .desktop-nav a {
padding-block: 10px;
}
.home-v2 .button,
.practice-v2 .button,
.methods-v2 .button {
min-height: 46px;
padding: 11px 19px;
border-radius: 8px;
box-shadow: none;
line-height: 1.25;
}
.home-v2 .button:hover,
.practice-v2 .button:hover,
.methods-v2 .button:hover {
transform: translateY(-1px);
}
.home-v2 .button-primary,
.practice-v2 .button-primary,
.methods-v2 .button-primary {
background: var(--refresh-blue);
}
.home-v2 .button-primary:hover,
.practice-v2 .button-primary:hover,
.methods-v2 .button-primary:hover {
background: #006b90;
box-shadow: none;
}
.home-v2 .button-secondary,
.practice-v2 .button-secondary,
.methods-v2 .button-secondary {
border: 1px solid var(--refresh-line);
background: var(--refresh-white);
color: var(--refresh-ink);
}
/* Die Farbe steht hier nicht mehr: sie kommt aus der Basisregel in
style.css und gilt damit auf ALLEN Seiten, nicht nur auf diesen drei.
Genau das war die Luecke - mtt, pilates und termine tragen keine dieser
Klassen und blieben deshalb beim hellen Markenblau. */
.home-v2 .eyebrow,
.practice-v2 .eyebrow,
.methods-v2 .eyebrow {
margin: 0 0 12px;
font-size: .75rem;
font-weight: 800;
letter-spacing: .12em;
line-height: 1.4;
text-transform: uppercase;
}
/* Landing: hero */
.home-hero {
width: 100%;
padding: 40px max(var(--refresh-gutter), calc((100vw - var(--refresh-max)) / 2)) 46px;
display: grid;
grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
align-items: center;
gap: clamp(38px, 5vw, 72px);
}
.home-hero-copy h1 {
max-width: 660px;
margin: 0;
color: var(--refresh-ink);
font-size: clamp(3.25rem, 5.35vw, 4.75rem);
font-weight: 800;
letter-spacing: -.055em;
line-height: .97;
}
.home-hero-copy h1 span {
color: var(--refresh-blue-bright);
}
.home-hero-lead {
max-width: 590px;
margin: 21px 0 0;
color: #4d6473;
font-size: clamp(1.04rem, 1.3vw, 1.18rem);
line-height: 1.58;
}
.home-hero-actions {
margin-top: 25px;
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.home-phone-link {
min-height: 46px;
display: inline-flex;
align-items: center;
color: var(--refresh-navy);
font-weight: 700;
text-decoration: underline;
text-decoration-color: rgba(0, 125, 168, .45);
text-decoration-thickness: 2px;
text-underline-offset: 5px;
}
.home-address {
margin: 21px 0 0;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
color: #526a79;
font-size: .9rem;
font-weight: 700;
}
.home-address-marker {
width: 9px;
height: 9px;
flex: 0 0 9px;
border-radius: 50%;
background: #ef6b57;
box-shadow: 0 0 0 6px rgba(239, 107, 87, .13);
}
.home-v2 .home-welcome-slideshow {
min-width: 0;
overflow: hidden;
display: grid;
border: 1px solid var(--refresh-line);
border-radius: 12px;
background: #fff;
box-shadow: 0 18px 50px rgba(31, 57, 72, .13);
}
.home-v2 .home-welcome-slide {
min-width: 0;
margin: 0;
grid-area: 1 / 1;
display: grid;
grid-template-rows: auto minmax(76px, auto);
align-self: stretch;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 1.05s cubic-bezier(.4, 0, .2, 1),
visibility 0s linear 1.05s;
}
.home-v2 .home-welcome-slide.is-active {
z-index: 1;
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.home-v2 .home-welcome-image {
min-height: 0;
overflow: hidden;
aspect-ratio: 1.45 / 1;
background: #dce8ec;
}
.home-v2 .home-welcome-slide img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.home-v2 .home-welcome-slide-team img {
object-position: 50% 35%;
}
.home-v2 .home-welcome-slide-treatment img {
object-position: 50% 58%;
}
.home-v2 .home-welcome-slide-rehabilitation img {
object-position: 58% 50%;
}
.home-v2 .home-welcome-slide-training img {
object-position: 50% 60%;
}
.home-v2 .home-welcome-slide figcaption {
min-width: 0;
padding: 13px 68px 15px 16px;
display: grid;
align-content: center;
gap: 3px;
border-top: 1px solid #e6edf0;
background: #fff;
}
.home-v2 .home-welcome-slide figcaption strong {
color: var(--refresh-ink);
font-size: clamp(.88rem, 1.05vw, 1rem);
line-height: 1.32;
overflow-wrap: break-word;
hyphens: auto;
}
.home-v2 .home-welcome-toggle {
width: 44px;
height: 44px;
margin: 0 12px 13px 0;
padding: 0;
z-index: 3;
grid-area: 1 / 1;
align-self: end;
justify-self: end;
display: grid;
place-items: center;
border: 1px solid #cbdde4;
border-radius: 8px;
background: rgba(255, 255, 255, .96);
color: var(--refresh-blue);
box-shadow: 0 4px 14px rgba(23, 43, 56, .09);
cursor: pointer;
}
.home-v2 .home-welcome-toggle:hover {
border-color: #9fc5d4;
background: #f4fafc;
}
.home-v2 .home-welcome-toggle[hidden] {
display: none;
}
.home-v2 .home-welcome-icon-pause {
display: flex;
gap: 4px;
}
.home-v2 .home-welcome-icon-pause i {
width: 3px;
height: 15px;
display: block;
border-radius: 1px;
background: currentColor;
}
.home-v2 .home-welcome-icon-play {
width: 0;
height: 0;
display: none;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 12px solid currentColor;
transform: translateX(1px);
}
.home-v2 .home-welcome-toggle[data-paused="true"] .home-welcome-icon-pause {
display: none;
}
.home-v2 .home-welcome-toggle[data-paused="true"] .home-welcome-icon-play {
display: block;
}
.home-hero-copy h1,
.home-hero-copy h1 span {
overflow-wrap: anywhere;
}
.home-v2 .home-welcome-slide figcaption span {
color: #59717f;
font-size: clamp(.76rem, .86vw, .84rem);
line-height: 1.45;
overflow-wrap: break-word;
hyphens: auto;
}
/* Landing: trust strip */
.home-trust {
width: min(calc(100% - 36px), var(--refresh-max));
margin: 0 auto;
padding: 17px 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--refresh-line);
border-bottom: 1px solid var(--refresh-line);
}
.home-trust > div {
padding: 3px 22px;
display: grid;
gap: 3px;
border-right: 1px solid var(--refresh-line);
}
.home-trust > div:first-child {
padding-left: 0;
}
.home-trust > div:last-child {
padding-right: 0;
border-right: 0;
}
.home-trust strong {
color: var(--refresh-ink);
font-size: .86rem;
}
.home-trust span {
color: #607684;
font-size: .76rem;
line-height: 1.4;
}
/* Shared landing headings */
.home-services,
.home-updates {
padding: clamp(48px, 4.5vw, 60px) 18px;
}
.home-section-heading,
.home-services-layout,
.home-updates-grid {
width: min(100%, var(--refresh-max));
margin-inline: auto;
}
.home-section-heading {
margin-bottom: 31px;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(300px, .72fr);
align-items: end;
gap: clamp(28px, 5vw, 70px);
}
.home-section-heading h2,
.home-team-content h2,
.home-visit h2 {
margin: 0;
color: var(--refresh-ink);
font-size: clamp(2.25rem, 3.6vw, 3.2rem);
font-weight: 800;
letter-spacing: -.05em;
line-height: 1.02;
}
.home-section-heading > p {
margin: 0;
color: #536b79;
font-size: 1rem;
line-height: 1.62;
}
/* Landing: services and practice imagery */
.home-services-layout {
display: grid;
grid-template-columns: minmax(310px, .78fr) minmax(560px, 1.22fr);
align-items: start;
gap: clamp(28px, 4vw, 54px);
}
.home-service-list {
display: grid;
border-top: 1px solid var(--refresh-line);
}
.home-service-list > a:not(.home-all-link) {
min-height: 64px;
padding: 12px 2px;
display: grid;
grid-template-columns: 32px minmax(0, 1fr) 24px;
align-items: center;
gap: 11px;
border-bottom: 1px solid var(--refresh-line);
color: var(--refresh-ink);
}
.home-service-list > a:not(.home-all-link):hover {
color: var(--refresh-blue);
}
.home-service-list > a > span:first-child {
color: var(--refresh-blue);
font-size: .72rem;
font-weight: 800;
}
.home-service-list strong {
font-size: .95rem;
line-height: 1.35;
}
.home-service-list i {
color: var(--refresh-blue);
font-size: 1rem;
font-style: normal;
text-align: right;
}
.home-all-link,
.home-text-link {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--refresh-blue);
font-size: .88rem;
font-weight: 800;
}
.home-practice-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.home-practice-grid figure {
position: relative;
margin: 0;
height: 196px;
overflow: hidden;
border-radius: 9px;
background: #dce8ec;
}
.home-practice-grid .home-practice-wide {
grid-column: 1 / -1;
height: 272px;
}
.home-practice-grid .home-practice-full {
grid-column: 1 / -1;
}
.home-practice-grid img {
width: 100%;
height: 100%;
object-fit: cover;
}
.home-practice-grid .media-training-room {
object-position: 50% 72%;
}
.home-practice-grid .media-treatment-room {
object-position: 50% 67%;
}
.home-practice-grid .media-leg-press {
object-position: 58% 50%;
}
.home-practice-grid .media-rower {
object-position: 50% 53%;
}
.home-practice-grid figure::after {
content: "";
position: absolute;
inset: 0;
/* SCRIM, UND ER TRAEGT DORT, WO DIE SCHRIFT STEHT - dieselbe Bauart und
derselbe Fehler wie bei .home-practice-photo (medos#91).
Vorher: eine Flaeche ueber dem unteren 48%-Streifen, darin transparent
bis .75 am Boden. Die Unterschrift beginnt aber 56px ueber der Unterkante
(13px Abstand + zwei Zeilen), und dort lag die Deckkraft bei .30 bis .43,
je nach Figurhoehe - weisse Schrift kam ueber einem hellen Bildbereich auf
1,92:1 (196px) bzw. 2,65:1 (272px).
DIE SCHWAECHE SASS OBEN, NICHT UNTEN.
Die Stopps stehen in PIXELN statt in Prozent, und das ist der Unterschied
zu #91: dort hat die Figur eine feste grosse Hoehe, hier wechselt sie mit
dem Haltepunkt (196px, 272px, darunter aspect-ratio). Ein Prozentmass
verschiebt den tragenden Punkt mit der Hoehe und ist bei der kleinsten
Figur am schwaechsten - genau dort, wo die Schrift relativ am hoechsten
sitzt. In Pixeln gemessen deckt der Verlauf die Unterschrift bei JEDER
Hoehe gleich.
.74 ab 72px ueber der Unterkante; 4,5:1 haelt bis 82,7px
Schriftoberkante zweizeilig 56px -> 26,7px Marge, 7,44:1
Schriftoberkante einzeilig 35,3px -> 47,4px Marge, 8,07:1
(einzeilig ab <=760px, dort ist der span display:none)
Gerechnet gegen den schlechtesten denkbaren Untergrund, ein WEISSES Foto.
Ist die Figur niedriger als 132px, wird der Verlauf oben beschnitten und
die Flaeche insgesamt etwas dunkler - das ist sichtbar, nicht schaedlich,
und die Unterschrift bleibt unberuehrt. */
background: linear-gradient(to top,
rgba(13, 34, 45, .82) 0,
rgba(13, 34, 45, .74) 72px,
rgba(13, 34, 45, 0) 132px);
pointer-events: none;
}
.home-practice-grid figcaption {
position: absolute;
z-index: 2;
left: 15px;
right: 15px;
bottom: 13px;
display: grid;
gap: 2px;
color: #fff;
}
.home-practice-grid figcaption strong {
font-size: .87rem;
}
/* Hier stand color: rgba(255, 255, 255, .82) - weisse Schrift, abgeschwaecht.
Entfernt aus demselben Grund wie das opacity: .9 in medos#91: eine
Deckkraft unter 1 auf Text ist kein Gestaltungsmittel, sondern ein Abzug
vom Kontrast, den der Scrim darueber gerade bezahlt hat. Auf der alten
Flaeche kam diese Zeile auf 1,73:1 und war damit die schlechtere der
beiden. */
.home-practice-grid figcaption span {
color: #fff;
font-size: .73rem;
}
/* Landing: team */
.home-team {
padding: clamp(48px, 4.5vw, 60px) max(var(--refresh-gutter), calc((100vw - var(--refresh-max)) / 2));
display: grid;
grid-template-columns: minmax(390px, .85fr) minmax(470px, 1.15fr);
align-items: center;
gap: clamp(38px, 6vw, 82px);
background: var(--refresh-mist);
}
.home-team-photo {
margin: 0;
overflow: hidden;
aspect-ratio: 760 / 600;
border-radius: 10px;
background: #fff;
box-shadow: 0 14px 38px rgba(31, 57, 72, .09);
}
.home-team-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.home-team-photo .media-team {
object-position: 50% 50%;
}
.home-team-content h2 {
max-width: 690px;
}
.home-team-intro {
max-width: 690px;
margin: 17px 0 0;
color: #526a78;
line-height: 1.62;
}
.home-team-list {
margin-top: 23px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.home-team-person {
min-height: 78px;
padding: 10px;
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
align-items: center;
gap: 11px;
border: 1px solid #d6e5ea;
border-radius: 8px;
background: rgba(255, 255, 255, .78);
}
.home-team-avatar {
width: 52px;
height: 52px;
overflow: hidden;
display: grid;
place-items: center;
border-radius: 7px;
background: #d8edf4;
color: var(--refresh-blue);
font-size: 1.15rem;
font-weight: 800;
}
.home-team-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--profile-focus-x, 50%) var(--profile-focus-y, 18%);
}
.home-team-person h3 {
margin: 0;
color: var(--refresh-ink);
font-size: .92rem;
line-height: 1.3;
}
.home-team-person p {
margin: 2px 0 0;
color: #607582;
font-size: .72rem;
line-height: 1.35;
}
.home-team-person blockquote {
margin: 4px 0 0;
overflow: visible;
display: block;
color: #426172;
font-size: .7rem;
font-style: normal;
line-height: 1.35;
}
.home-team-empty {
margin: 20px 0 0;
color: #526a78;
}
/* Landing: updates */
.home-updates {
background: var(--refresh-sand);
}
.home-updates-heading {
margin-bottom: 27px;
}
.home-updates-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.home-update-panel {
padding: 23px;
border: 1px solid #e4ddd0;
border-radius: 9px;
background: rgba(255, 255, 255, .74);
}
.home-course-visual {
margin: 0;
overflow: hidden;
aspect-ratio: 4 / 3;
border-radius: 7px;
background: #dce8ec;
}
.home-course-visual img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 48%;
}
.home-course-item.has-visual {
display: grid;
grid-template-columns: 122px minmax(0, 1fr);
align-items: center;
gap: 15px;
}
.home-update-title {
padding-bottom: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
border-bottom: 1px solid #e3ddd2;
}
.home-update-title h3 {
margin: 0;
color: var(--refresh-ink);
font-size: 1.35rem;
}
.home-update-title a,
.home-course-copy > a,
.home-update-empty a {
min-height: 44px;
padding-block: 8px;
display: inline-flex;
align-items: center;
color: var(--refresh-blue);
font-size: .78rem;
font-weight: 800;
}
.home-update-list {
display: grid;
}
.home-course-item,
.home-news-item {
min-height: 126px;
padding: 17px 0;
border-bottom: 1px solid #e5dfd5;
}
.home-course-item:last-child,
.home-news-item:last-child {
border-bottom: 0;
}
.home-course-copy > p,
.home-news-item > p {
margin: 0 0 6px;
color: var(--refresh-blue);
font-size: .68rem;
font-weight: 800;
letter-spacing: .07em;
line-height: 1.4;
text-transform: uppercase;
}
.home-news-item > p {
display: flex;
justify-content: space-between;
gap: 12px;
}
.home-news-item time {
color: #788c97;
font-weight: 700;
}
.home-course-copy h4,
.home-news-item h4 {
margin: 0;
color: var(--refresh-ink);
font-size: 1.05rem;
line-height: 1.35;
}
.home-course-copy > span {
margin: 7px 0 10px;
display: block;
color: #5f7480;
font-size: .76rem;
line-height: 1.45;
}
.home-news-item > div {
margin-top: 8px;
overflow: hidden;
display: -webkit-box;
color: #5f7480;
font-size: .82rem;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.home-update-empty {
min-height: 180px;
padding: 24px 0 4px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.home-update-empty strong {
font-size: 1.05rem;
}
.home-update-empty p {
margin: 7px 0 13px;
color: #607582;
line-height: 1.5;
}
/* Landing: visit and final action */
.home-visit {
padding: clamp(48px, 4.5vw, 60px) max(var(--refresh-gutter), calc((100vw - var(--refresh-max)) / 2));
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(330px, .68fr);
align-items: center;
gap: clamp(34px, 6vw, 86px);
color: #fff;
background: var(--refresh-ink);
}
.home-visit .eyebrow {
color: #7bd2ef;
}
.home-visit h2 {
max-width: 760px;
color: #fff;
}
.home-visit-copy > p:not(.eyebrow) {
margin: 16px 0 0;
color: rgba(255, 255, 255, .8);
font-weight: 700;
}
.home-visit ul {
margin: 20px 0 0;
padding: 0;
display: grid;
gap: 8px;
color: rgba(255, 255, 255, .78);
list-style: none;
}
.home-visit li {
position: relative;
padding-left: 21px;
line-height: 1.45;
}
.home-visit li::before {
content: "✓";
position: absolute;
left: 0;
color: #7bd2ef;
font-weight: 900;
}
.home-visit-actions {
display: grid;
gap: 9px;
}
.home-visit-actions .button {
width: 100%;
}
.home-visit-actions .button-secondary {
border-color: rgba(255, 255, 255, .25);
background: rgba(255, 255, 255, .08);
color: #fff;
}
.home-visit-actions .home-text-link {
margin: 6px 0 0;
color: #7bd2ef;
justify-content: center;
}
.home-visit-actions small {
margin: -1px 0 2px;
color: rgba(255, 255, 255, .64);
font-size: .72rem;
line-height: 1.45;
text-align: center;
}
.home-route-link {
margin-top: 3px;
color: rgba(255, 255, 255, .68);
font-size: .76rem;
text-align: center;
text-decoration: underline;
text-underline-offset: 4px;
}
.home-text-link,
.home-route-link {
min-height: 44px;
padding-block: 8px;
display: inline-flex;
align-items: center;
}
/* Shared footer on refreshed pages */
.home-v2 footer,
.practice-v2 footer,
.methods-v2 footer {
padding: 46px max(var(--refresh-gutter), calc((100vw - var(--refresh-max)) / 2)) 24px;
gap: 28px;
}
.home-v2 footer .footer-brand img,
.practice-v2 footer .footer-brand img,
.methods-v2 footer .footer-brand img {
width: 180px;
height: auto;
}
.home-v2 footer .physioswiss,
.practice-v2 footer .physioswiss,
.methods-v2 footer .physioswiss {
margin-top: 14px;
width: 126px;
height: auto;
}
/* Practice page */
.practice-v2 .subpage-main {
padding-top: 0;
}
.practice-v2-hero {
padding: clamp(38px, 3.6vw, 50px) max(var(--refresh-gutter), calc((100vw - var(--refresh-max)) / 2));
display: grid;
grid-template-columns: minmax(360px, .82fr) minmax(500px, 1.18fr);
align-items: center;
gap: clamp(38px, 6vw, 80px);
background: var(--refresh-mist);
}
.practice-v2-hero-copy h1 {
margin: 0;
color: var(--refresh-ink);
font-size: clamp(2.55rem, 4vw, 3.5rem);
letter-spacing: -.055em;
line-height: 1.05;
}
.practice-v2-hero-copy h1 span {
color: var(--refresh-blue-bright);
}
.practice-v2-hero-copy > p:last-child {
margin: 18px 0 0;
color: #536b79;
font-size: 1.02rem;
line-height: 1.62;
}
.practice-v2-hero figure {
margin: 0;
overflow: hidden;
aspect-ratio: 1.62 / 1;
border-radius: 10px;
background: #dce8ec;
}
.practice-v2-hero figure img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
.practice-v2-section {
padding: clamp(40px, 3.8vw, 52px) max(var(--refresh-gutter), calc((100vw - var(--refresh-max)) / 2));
}
.practice-v2-heading {
margin-bottom: 24px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .65fr);
align-items: end;
gap: clamp(28px, 5vw, 68px);
}
.practice-v2-heading h2 {
margin: 0;
color: var(--refresh-ink);
font-size: clamp(2rem, 3vw, 2.7rem);
letter-spacing: -.05em;
line-height: 1.06;
}
.practice-v2-heading > p {
margin: 0;
color: #536b79;
line-height: 1.62;
}
.practice-v2-team-layout {
display: grid;
grid-template-columns: minmax(390px, .82fr) minmax(480px, 1.18fr);
align-items: start;
gap: clamp(30px, 5vw, 64px);
}
.practice-v2-team-photo {
margin: 0;
overflow: hidden;
aspect-ratio: 760 / 600;
border-radius: 10px;
border: 1px solid var(--refresh-line);
background: #fff;
}
.practice-v2-team-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
.practice-v2-team-intro > p {
margin: 0;
color: #536b79;
line-height: 1.62;
}
.practice-v2-team-facts {
margin: 20px 0 0;
padding: 0;
display: grid;
gap: 8px;
list-style: none;
}
.practice-v2-team-facts li {
padding: 12px 14px;
display: grid;
gap: 3px;
border: 1px solid var(--refresh-line);
border-radius: 8px;
background: #fff;
}
.practice-v2-team-facts strong {
color: var(--refresh-ink);
font-size: .95rem;
line-height: 1.3;
}
.practice-v2-team-facts span {
color: #607582;
font-size: .78rem;
line-height: 1.45;
}
.practice-v2-profiles {
margin-top: clamp(24px, 3vw, 36px);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
gap: 10px;
}
.practice-v2-profile {
padding: 16px;
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
align-content: start;
gap: 15px;
border: 1px solid var(--refresh-line);
border-radius: 9px;
background: #fff;
}
.practice-v2-profile-media {
width: 92px;
height: 112px;
overflow: hidden;
display: grid;
place-items: center;
border-radius: 7px;
background: #dceff5;
color: var(--refresh-blue);
font-size: 1.5rem;
font-weight: 800;
}
.practice-v2-profile-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--profile-focus-x, 50%) var(--profile-focus-y, 18%);
}
.practice-v2-profile-copy .team-role {
margin: 0 0 3px;
color: var(--refresh-blue);
font-size: .68rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.practice-v2-profile-copy h3 {
margin: 0;
color: var(--refresh-ink);
font-size: 1.16rem;
line-height: 1.3;
}
.practice-v2-profile-copy blockquote {
margin: 7px 0 0;
color: #3f6070;
font-size: .84rem;
line-height: 1.5;
}
.practice-v2-profile-copy .team-bio {
margin: 7px 0 0;
color: #607582;
font-size: .8rem;
line-height: 1.5;
}
.team-tags {
margin: 11px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 5px;
list-style: none;
}
.team-tags li {
padding: 4px 9px;
border-radius: 999px;
background: #e7f4f9;
color: #2d6076;
font-size: .7rem;
font-weight: 700;
line-height: 1.35;
}
.team-facts {
margin: 11px 0 0;
padding-top: 10px;
display: grid;
gap: 5px;
border-top: 1px solid var(--refresh-line);
}
.team-facts > div {
display: grid;
grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
gap: 10px;
}
.team-facts dt {
color: #7b8c98;
font-size: .7rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.team-facts dd {
margin: 0;
color: #4b6473;
font-size: .78rem;
line-height: 1.45;
}
.practice-v2-tour {
background: var(--refresh-sand);
}
.practice-v2-tour-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
gap: 12px;
}
.practice-v2-tour-card {
margin: 0;
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr;
min-height: 0;
border: 1px solid #e4ddd0;
border-radius: 9px;
background: #fff;
}
.practice-v2-tour-card-main {
min-height: 0;
}
.practice-v2-tour-card img {
display: block;
width: 100%;
height: clamp(220px, 20vw, 285px);
min-height: 0;
object-fit: cover;
}
.practice-v2-tour-card-main .media-training-room {
object-position: 50% 52%;
}
.practice-v2-tour-card-group img {
object-position: 50% 48%;
}
.practice-v2-tour-card-strength .media-leg-press {
object-position: 58% 50%;
}
.practice-v2-tour-card figcaption {
padding: 14px 16px 15px;
display: grid;
gap: 4px;
color: var(--refresh-ink);
}
.practice-v2-tour-card figcaption span {
color: var(--refresh-blue);
font-size: .66rem;
font-weight: 800;
letter-spacing: .09em;
line-height: 1.4;
text-transform: uppercase;
}
.practice-v2-tour-card figcaption strong {
font-size: .94rem;
line-height: 1.35;
}
.practice-v2-location {
display: grid;
grid-template-columns: minmax(330px, .72fr) minmax(500px, 1.28fr);
align-items: stretch;
gap: clamp(28px, 5vw, 60px);
}
.practice-v2-location-copy {
align-self: center;
}
.practice-v2-location-copy h2 {
margin: 0;
color: var(--refresh-ink);
font-size: clamp(2.25rem, 3.8vw, 3.5rem);
letter-spacing: -.05em;
line-height: 1.06;
}
.practice-v2-location-copy > p:not(.eyebrow) {
margin: 16px 0 0;
color: #536b79;
line-height: 1.6;
}
.practice-v2-location-facts {
margin: 20px 0 0;
padding: 0;
display: grid;
gap: 7px;
color: #47616f;
list-style: none;
}
.practice-v2-location-facts li {
padding-left: 20px;
position: relative;
}
.practice-v2-location-facts li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--refresh-blue);
font-weight: 900;
}
.practice-v2-location-facts a {
color: inherit;
text-decoration: underline;
text-decoration-color: rgba(0, 118, 158, .38);
text-underline-offset: 4px;
}
.practice-v2-map {
overflow: hidden;
border: 1px solid var(--refresh-line);
border-radius: 10px;
background: #fff;
}
.practice-v2-map iframe {
display: block;
width: 100%;
height: 300px;
border: 0;
}
.practice-v2-map-info {
padding: 15px 17px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.practice-v2-map-info div {
display: grid;
gap: 3px;
}
.practice-v2-map-info strong {
font-size: .9rem;
}
.practice-v2-map-info span {
color: #607582;
font-size: .76rem;
}
.practice-v2-map-info a {
flex: 0 0 auto;
color: var(--refresh-blue);
font-size: .78rem;
font-weight: 800;
}
/* Responsive and text-zoom resilience */
@media (max-width: 1100px) {
.home-v2 .site-header,
.practice-v2 .site-header,
.methods-v2 .site-header {
grid-template-columns: minmax(0, 1fr) auto auto;
}
.home-hero {
grid-template-columns: minmax(320px, .82fr) minmax(430px, 1.18fr);
}
.home-services-layout,
.practice-v2-team-layout {
grid-template-columns: minmax(290px, .75fr) minmax(430px, 1.25fr);
}
}
@media (max-width: 860px) {
.home-section-heading,
.home-services-layout,
.home-team,
.home-visit,
.practice-v2-hero,
.practice-v2-heading,
.practice-v2-team-layout,
.practice-v2-location {
grid-template-columns: 1fr;
}
.home-hero {
grid-template-columns: 1fr;
padding-top: 34px;
}
.home-hero-copy {
max-width: 720px;
}
.home-v2 .home-welcome-image {
aspect-ratio: 1.6 / 1;
}
.home-trust {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-trust > div {
padding: 10px 16px;
}
.home-trust > div:nth-child(2) {
border-right: 0;
}
.home-trust > div:nth-child(-n+2) {
border-bottom: 1px solid var(--refresh-line);
}
.home-trust > div:first-child,
.home-trust > div:last-child {
padding-inline: 16px;
}
.home-team-photo,
.practice-v2-team-photo {
max-width: 720px;
aspect-ratio: 760 / 600;
}
.home-team-list {
max-width: 720px;
}
.practice-v2-hero figure {
max-width: 780px;
}
.practice-v2-tour-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.practice-v2-tour-card-main {
grid-column: 1 / -1;
min-height: 0;
}
.practice-v2-tour-card-main img {
height: auto;
aspect-ratio: 16 / 9;
}
.practice-v2-location {
gap: 26px;
}
}
@media (max-width: 760px) {
.home-v2 .site-header,
.practice-v2 .site-header,
.methods-v2 .site-header {
min-height: 70px;
height: auto;
padding: 9px 14px;
gap: 10px;
}
.home-v2 .brand img,
.practice-v2 .brand img,
.methods-v2 .brand img {
width: 148px;
max-height: 46px;
}
.home-v2 .header-cta,
.practice-v2 .header-cta,
.methods-v2 .header-cta {
display: none;
}
.home-v2 .mobile-menu,
.practice-v2 .mobile-menu,
.methods-v2 .mobile-menu {
min-width: 48px;
}
.home-v2 .mobile-menu summary,
.practice-v2 .mobile-menu summary,
.methods-v2 .mobile-menu summary {
min-width: 48px;
min-height: 48px;
}
.home-v2 .mobile-menu nav,
.practice-v2 .mobile-menu nav,
.methods-v2 .mobile-menu nav {
width: min(90vw, 340px);
max-height: calc(100dvh - 86px);
overflow-y: auto;
}
.home-v2 .mobile-menu nav a,
.practice-v2 .mobile-menu nav a,
.methods-v2 .mobile-menu nav a {
min-height: 44px;
display: flex;
align-items: center;
}
.home-hero {
padding: 24px 16px 32px;
gap: 24px;
}
.home-hero-copy h1 {
font-size: clamp(2.65rem, 12.4vw, 3.45rem);
line-height: .98;
}
.home-hero-lead {
margin-top: 16px;
font-size: 1rem;
line-height: 1.52;
}
.home-hero-actions {
margin-top: 19px;
gap: 11px;
align-items: stretch;
flex-direction: column;
}
.home-hero-actions .button,
.home-phone-link {
width: 100%;
justify-content: center;
}
.home-address {
margin-top: 17px;
align-items: flex-start;
font-size: .8rem;
}
.home-v2 .home-welcome-slideshow {
border-radius: 10px;
}
.home-trust {
width: calc(100% - 32px);
}
.home-services,
.home-updates {
padding: 40px 16px;
}
.home-section-heading {
margin-bottom: 24px;
gap: 14px;
}
.home-section-heading h2,
.home-team-content h2,
.home-visit h2 {
font-size: clamp(2.1rem, 10vw, 2.8rem);
}
.home-section-heading > p {
font-size: .94rem;
}
.home-services-layout {
gap: 27px;
}
.home-service-list > a:not(.home-all-link) {
min-height: 58px;
}
.home-practice-grid {
gap: 8px;
}
.home-practice-grid .home-practice-wide {
height: auto;
aspect-ratio: 16 / 9;
}
.home-practice-grid figure:not(.home-practice-wide) {
height: auto;
aspect-ratio: 1 / 1;
}
.home-practice-grid .home-practice-full {
aspect-ratio: 16 / 9;
}
.home-practice-grid figcaption span {
display: none;
}
.home-team {
padding: 40px 16px;
gap: 27px;
}
.home-team-photo {
width: 100%;
aspect-ratio: 760 / 600;
}
.home-team-photo .media-team,
.practice-v2-team-photo img {
object-position: 50% 50%;
}
.home-team-intro {
font-size: .94rem;
}
.home-team-list {
grid-template-columns: 1fr;
}
.home-team-person {
min-height: 72px;
}
.home-updates-grid {
grid-template-columns: 1fr;
}
.home-update-panel {
padding: 18px;
}
.home-course-visual {
margin: 0;
}
.home-course-item.has-visual {
grid-template-columns: 104px minmax(0, 1fr);
gap: 12px;
}
.home-update-empty {
min-height: 140px;
}
.home-visit {
padding: 40px 16px 86px;
gap: 27px;
}
.home-visit-copy > p:not(.eyebrow) {
font-size: .92rem;
}
.home-v2 footer,
.practice-v2 footer,
.methods-v2 footer {
padding: 42px 18px 98px;
}
.practice-v2 .subpage-main {
padding-top: 0;
}
.practice-v2-hero,
.practice-v2-section {
padding: 32px 16px;
}
.practice-v2-hero {
gap: 25px;
}
.practice-v2-hero-copy h1 {
font-size: clamp(1.75rem, calc(1.05rem + 6vw), 3.35rem);
}
.practice-v2-hero figure {
aspect-ratio: 1.45 / 1;
}
.practice-v2-heading {
margin-bottom: 23px;
gap: 14px;
}
.practice-v2-heading h2,
.practice-v2-location-copy h2 {
font-size: clamp(1.55rem, calc(.95rem + 5vw), 2.75rem);
}
.practice-v2-team-layout {
gap: 24px;
}
.practice-v2-team-photo {
width: 100%;
aspect-ratio: 760 / 600;
}
.practice-v2-profiles {
grid-template-columns: 1fr;
}
.practice-v2-profile {
grid-template-columns: 76px minmax(0, 1fr);
padding: 13px;
}
.practice-v2-profile-media {
width: 76px;
height: 92px;
}
.team-facts > div {
grid-template-columns: 1fr;
gap: 1px;
}
.practice-v2-profile-copy .team-role {
font-size: clamp(.54rem, calc(.32rem + .7vw), .68rem);
letter-spacing: .06em;
}
.practice-v2-profile-copy h3 {
font-size: clamp(.96rem, calc(.7rem + .8vw), 1.16rem);
}
.practice-v2-tour-grid {
gap: 8px;
}
.practice-v2-tour-card {
min-height: 0;
}
.practice-v2-tour-card:not(.practice-v2-tour-card-main) img {
height: auto;
aspect-ratio: 3 / 2;
}
.practice-v2-tour-card figcaption {
padding: 13px 14px 14px;
}
.practice-v2-map iframe {
height: 225px;
}
.practice-v2-map-info {
align-items: stretch;
flex-direction: column;
gap: 11px;
}
.practice-v2-map-info a {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.practice-v2-location-facts a {
min-height: 44px;
display: inline-flex;
align-items: center;
}
}
@media (max-width: 430px) {
.home-trust {
grid-template-columns: 1fr;
}
.home-trust > div {
padding: 10px 0;
border-right: 0;
border-bottom: 1px solid var(--refresh-line);
}
.home-trust > div:first-child,
.home-trust > div:last-child {
padding-inline: 0;
}
.home-trust > div:nth-child(2) {
border-bottom: 1px solid var(--refresh-line);
}
.home-trust > div:last-child {
border-bottom: 0;
}
.home-practice-grid,
.practice-v2-tour-grid {
grid-template-columns: 1fr;
}
.home-practice-grid .home-practice-wide,
.practice-v2-tour-card-main {
grid-column: auto;
}
.home-practice-grid figure:not(.home-practice-wide) {
aspect-ratio: 4 / 3;
}
.practice-v2-tour-card:not(.practice-v2-tour-card-main) img {
aspect-ratio: 4 / 3;
}
.home-course-item.has-visual {
grid-template-columns: 88px minmax(0, 1fr);
}
.home-update-title {
align-items: flex-start;
flex-direction: column;
gap: 6px;
}
}
@media (max-width: 760px) {
.home-v2 footer a,
.practice-v2 footer a,
.methods-v2 footer a {
min-height: 44px;
padding-block: 8px;
display: inline-flex;
align-items: center;
}
}
@media (prefers-reduced-motion: reduce) {
.home-v2 *,
.practice-v2 *,
.methods-v2 * {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
}
/* Shared accessibility refinements */
body.home-v2 :focus-visible,
body.practice-v2 :focus-visible,
body.methods-v2 :focus-visible {
outline: 3px solid #005f80;
outline-offset: 3px;
}
body.home-v2 footer :focus-visible,
body.practice-v2 footer :focus-visible,
body.methods-v2 footer :focus-visible {
outline-color: #7bd2ef;
}
.home-v2 .eyebrow,
.practice-v2 .eyebrow,
.methods-v2 .eyebrow {
font-size: .8125rem;
font-weight: 800;
}
.home-hero-copy h1,
.home-hero-copy h1 span {
overflow-wrap: normal;
word-break: normal;
hyphens: auto;
}
.home-hero-copy h1 {
letter-spacing: -.02em;
line-height: 1.04;
}
.home-v2 .home-welcome-reduced-summary {
display: none;
}
.home-v2 .home-welcome-slide.is-unavailable {
display: none;
}
.home-v2 .home-welcome-slide-treatment-secondary img {
object-position: 59% 52%;
}
.home-v2 .home-welcome-slide-seated img {
object-position: 45% 52%;
}
.home-v2 .home-welcome-slide-terrasensa img {
object-position: 50% 58%;
}
.home-v2 .home-welcome-slide figcaption strong {
font-size: clamp(1rem, 1.05vw, 1.0625rem);
}
.home-v2 .home-welcome-slide figcaption span {
font-size: .875rem;
line-height: 1.45;
}
/* Methods page */
.methods-v2 .subpage-main {
padding-top: 0;
overflow: visible;
}
.methods-v2-hero {
padding: clamp(38px, 3.8vw, 52px) max(var(--refresh-gutter), calc((100vw - var(--refresh-max)) / 2));
display: grid;
grid-template-columns: minmax(360px, .84fr) minmax(500px, 1.16fr);
align-items: center;
gap: clamp(38px, 6vw, 80px);
background: var(--refresh-mist);
}
.methods-v2-hero-copy h1 {
max-width: 680px;
margin: 0;
color: var(--refresh-ink);
font-size: clamp(2.65rem, 4.2vw, 3.75rem);
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.06;
}
.methods-v2-hero-copy h1 span {
color: var(--refresh-blue);
}
.methods-v2-hero-copy > p:last-of-type {
max-width: 620px;
margin: 19px 0 0;
color: #526b7a;
font-size: 1.0625rem;
line-height: 1.65;
}
.methods-v2-hero figure {
margin: 0;
overflow: hidden;
aspect-ratio: 1.62 / 1;
border: 1px solid var(--refresh-line);
border-radius: 10px;
background: #dce8ec;
}
.methods-v2-hero figure img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: 50% 62%;
}
.methods-v2 .method-jump-nav {
position: static;
z-index: 12;
top: auto;
width: 100%;
margin: 0;
padding: 11px max(var(--refresh-gutter), calc((100vw - var(--refresh-max)) / 2));
display: flex;
align-items: center;
gap: 15px;
border-block: 1px solid var(--refresh-line);
background: rgba(255, 255, 255, .97);
box-shadow: 0 5px 16px rgba(23, 43, 56, .045);
backdrop-filter: blur(8px);
}
.methods-v2 .method-jump-nav > strong {
flex: 0 0 auto;
color: #526b7a;
font-size: .875rem;
font-weight: 700;
}
.methods-v2 .method-jump-nav > div {
min-width: 0;
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
.methods-v2 .method-jump-nav a {
min-height: 44px;
padding: 9px 11px;
display: inline-flex;
align-items: center;
border-radius: 7px;
color: #365566;
font-size: .875rem;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
}
.methods-v2 .method-jump-nav a:hover {
color: #005f80;
background: var(--refresh-mist);
}
.methods-v2 .static-therapy-page {
width: min(100%, calc(var(--refresh-max) + 36px));
max-width: none;
margin: 0 auto;
padding: clamp(52px, 5vw, 70px) 18px;
}
.methods-v2 .static-therapy-intro {
margin: 0 0 clamp(36px, 4vw, 52px);
padding: 0;
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(320px, .74fr);
align-items: end;
gap: clamp(30px, 5vw, 70px);
border: 0;
}
.methods-v2 .static-therapy-intro h2 {
margin: 0;
color: var(--refresh-ink);
font-size: clamp(2.25rem, 3.5vw, 3.15rem);
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.1;
}
.methods-v2 .static-therapy-intro > p {
margin: 0;
color: #526b7a;
font-size: 1rem;
line-height: 1.65;
}
.methods-v2 .static-therapy-list {
display: grid;
border-top: 1px solid var(--refresh-line);
}
.methods-v2 .static-therapy-method {
scroll-margin-top: 92px;
padding: clamp(42px, 4.6vw, 62px) 0;
display: grid;
grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
align-items: start;
gap: clamp(34px, 5.3vw, 72px);
border: 0;
border-bottom: 1px solid var(--refresh-line);
border-radius: 0;
background: transparent;
box-shadow: none;
}
.methods-v2 .method-photo {
min-width: 0;
margin: 0;
overflow: hidden;
border: 1px solid var(--refresh-line);
border-radius: 10px;
background: #fff;
}
.methods-v2 .method-photo-media {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
background: #dce8ec;
}
.methods-v2 .method-photo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: var(--method-position, 50% 50%);
}
.methods-v2 .method-photo-media > span {
min-width: 48px;
min-height: 48px;
padding: 8px;
position: absolute;
top: 14px;
left: 14px;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, .82);
border-radius: 7px;
background: rgba(255, 255, 255, .94);
color: #005f80;
font-size: .875rem;
font-weight: 800;
box-shadow: 0 4px 14px rgba(23, 43, 56, .12);
}
.methods-v2 .method-photo figcaption {
min-height: 56px;
padding: 12px 14px;
display: flex;
align-items: center;
color: #526b7a;
font-size: .875rem;
line-height: 1.5;
}
.methods-v2 .method-static-copy {
min-width: 0;
padding: 2px 0 0;
align-self: start;
}
.methods-v2 .method-kicker {
margin: 0 0 8px;
color: #006b90;
font-size: .875rem;
font-weight: 800;
letter-spacing: .07em;
line-height: 1.4;
text-transform: uppercase;
}
.methods-v2 .method-static-copy > h2 {
max-width: 760px;
margin: 0;
color: var(--refresh-ink);
font-size: clamp(2rem, 3.2vw, 2.85rem);
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.12;
}
.methods-v2 .method-lead {
max-width: 760px;
margin: 14px 0 0;
color: #425e6d;
font-size: 1.125rem;
line-height: 1.65;
}
.methods-v2 .method-tags {
margin: 17px 0 0;
padding: 0;
display: flex;
gap: 7px;
flex-wrap: wrap;
list-style: none;
}
.methods-v2 .method-tags li {
min-height: 34px;
padding: 6px 10px;
display: inline-flex;
align-items: center;
border: 1px solid #cbdde4;
border-radius: 6px;
color: #425f6f;
background: #f8fbfc;
font-size: .875rem;
font-weight: 600;
line-height: 1.3;
}
.methods-v2 .method-answer {
margin: 24px 0 0;
padding: 3px 0 3px 17px;
border-left: 4px solid var(--refresh-blue);
background: transparent;
}
.methods-v2 .method-answer h3 {
margin: 0 0 5px;
color: var(--refresh-ink);
font-size: .9375rem;
font-weight: 800;
line-height: 1.4;
}
.methods-v2 .method-answer p {
max-width: 760px;
margin: 0;
color: #526b7a;
font-size: 1rem;
line-height: 1.65;
}
.methods-v2 .method-details {
margin: 25px 0 0;
overflow: hidden;
border: 1px solid var(--refresh-line);
border-radius: 8px;
background: #fff;
}
.methods-v2 .method-details summary {
min-height: 56px;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
color: var(--refresh-ink);
background: #fff;
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
cursor: pointer;
list-style: none;
}
.methods-v2 .method-details summary::-webkit-details-marker {
display: none;
}
.methods-v2 .method-details summary:focus-visible {
outline-offset: -4px;
}
.methods-v2 .method-details summary > span {
flex: 0 0 auto;
color: #006b90;
font-size: 1.45rem;
font-weight: 400;
line-height: 1;
transition: transform .2s ease;
}
.methods-v2 .method-details[open] summary {
border-bottom: 1px solid var(--refresh-line);
background: var(--refresh-mist);
}
.methods-v2 .method-details[open] summary > span {
transform: rotate(45deg);
}
.methods-v2 .method-details-body {
padding: 20px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
border-top: 0;
}
.methods-v2 .method-details-body section,
.methods-v2 .method-details-body aside {
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.methods-v2 .method-details-body h3,
.methods-v2 .method-details-body aside > strong {
margin: 0 0 7px;
color: var(--refresh-ink);
font-size: .9375rem;
font-weight: 800;
line-height: 1.4;
}
.methods-v2 .method-details-body p,
.methods-v2 .method-details-body ol {
margin: 0;
color: #526b7a;
font-size: 1rem;
line-height: 1.65;
}
.methods-v2 .method-details-body ol {
padding-left: 1.35rem;
}
.methods-v2 .method-details-body li + li {
margin-top: 5px;
}
.methods-v2 .method-details-body aside {
grid-column: 1 / -1;
padding: 15px 16px;
border-radius: 7px;
background: var(--refresh-mist);
}
.methods-v2 .method-details-body > a {
min-height: 44px;
grid-column: 1 / -1;
display: inline-flex;
align-items: center;
justify-self: start;
color: #005f80;
font-size: .875rem;
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
.methods-v2 .therapy-disclaimer {
margin: 24px 0 0;
color: #526b7a;
font-size: .875rem;
line-height: 1.55;
}
.methods-v2 .methods-page-cta {
width: min(calc(100% - 36px), var(--refresh-max));
margin: 0 auto clamp(52px, 6vw, 76px);
padding: clamp(30px, 3.8vw, 46px);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 30px;
border: 0;
border-radius: 10px;
color: #fff;
background: var(--refresh-ink);
}
.methods-v2 .methods-page-cta .eyebrow {
color: #7bd2ef;
}
.methods-v2 .methods-page-cta h2 {
max-width: 820px;
margin: 0;
color: #fff;
font-size: clamp(2rem, 3.2vw, 2.8rem);
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.12;
}
.methods-v2 .methods-page-cta p:not(.eyebrow) {
max-width: 760px;
margin: 12px 0 0;
color: rgba(255, 255, 255, .82);
line-height: 1.6;
}
.methods-v2 .methods-page-cta .button-primary {
min-width: 170px;
background: #fff;
color: #005f80;
}
.methods-v2 .methods-page-cta .button-primary:hover {
background: #e9f6fa;
color: #004f6a;
}
@media (max-width: 960px) {
.methods-v2-hero {
grid-template-columns: 1fr;
gap: 28px;
}
.methods-v2-hero-copy {
max-width: 760px;
}
.methods-v2-hero figure {
max-width: 820px;
aspect-ratio: 1.65 / 1;
}
.methods-v2 .method-jump-nav {
position: static;
}
.methods-v2 .static-therapy-intro {
grid-template-columns: 1fr;
align-items: start;
gap: 16px;
}
.methods-v2 .static-therapy-intro > p {
max-width: 760px;
}
.methods-v2 .static-therapy-method {
scroll-margin-top: 84px;
grid-template-columns: minmax(270px, 36%) minmax(0, 1fr);
gap: 30px;
}
.methods-v2 .method-details-body {
grid-template-columns: 1fr;
}
.methods-v2 .method-details-body aside,
.methods-v2 .method-details-body > a {
grid-column: auto;
}
}
@media (max-width: 760px) {
.methods-v2 .method-jump-nav {
padding: 14px 16px 16px;
display: grid;
gap: 8px;
box-shadow: none;
backdrop-filter: none;
}
.methods-v2 .method-jump-nav > div {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 5px;
overflow: visible;
}
.methods-v2 .method-jump-nav a {
width: 100%;
border: 1px solid var(--refresh-line);
background: #fff;
}
.methods-v2 .static-therapy-method {
scroll-margin-top: 78px;
grid-template-columns: 1fr;
}
.methods-v2 .method-photo {
width: 100%;
max-width: 620px;
}
.methods-v2 .methods-page-cta {
grid-template-columns: 1fr;
}
.methods-v2 .methods-page-cta .button {
width: 100%;
}
}
@media (max-width: 540px) {
.methods-v2-hero {
padding: 30px 16px;
}
.methods-v2-hero-copy h1 {
font-size: clamp(2.15rem, 10.6vw, 3rem);
line-height: 1.08;
}
.methods-v2-hero-copy > p:last-of-type {
font-size: 1rem;
}
.methods-v2-hero figure {
aspect-ratio: 4 / 3;
}
.methods-v2 .static-therapy-page {
padding: 40px 16px;
}
.methods-v2 .static-therapy-intro {
margin-bottom: 30px;
}
.methods-v2 .static-therapy-intro h2 {
font-size: clamp(2rem, 10vw, 2.55rem);
}
.methods-v2 .static-therapy-method {
padding: 36px 0;
gap: 25px;
}
.methods-v2 .method-static-copy > h2 {
font-size: clamp(1.8rem, 8.8vw, 2.35rem);
}
.methods-v2 .method-lead {
font-size: 1.0625rem;
}
.methods-v2 .method-details-body {
padding: 17px;
}
.methods-v2 .methods-page-cta {
width: calc(100% - 32px);
padding: 26px 22px;
}
.methods-v2 .methods-page-cta h2 {
font-size: clamp(1.75rem, 8.7vw, 2.3rem);
}
}
@media (prefers-reduced-motion: reduce) {
.home-v2 .home-welcome-reduced-summary {
min-width: 0;
padding: 18px;
grid-area: 2 / 1;
display: grid;
gap: 10px;
border-top: 1px solid var(--refresh-line);
background: #f7fbfc;
}
.home-v2 .home-welcome-reduced-summary > strong {
color: var(--refresh-ink);
font-size: 1rem;
line-height: 1.4;
}
.home-v2 .home-welcome-reduced-summary ul {
margin: 0;
padding-left: 1.25rem;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px 24px;
}
.home-v2 .home-welcome-reduced-summary li {
color: #526b7a;
font-size: .875rem;
line-height: 1.55;
}
.home-v2 .home-welcome-reduced-summary b {
color: var(--refresh-ink);
}
.methods-v2 .method-details summary > span {
transition: none;
}
}
@media (max-width: 620px) and (prefers-reduced-motion: reduce) {
.home-v2 .home-welcome-reduced-summary ul {
grid-template-columns: 1fr;
}
}
/*
* Protocol alignment: shared public design, concise navigation, light footer,
* MTT/Pilates pages and a genuine photographic practice tour.
*/
html.refresh-root body {
overflow-x: visible;
color: var(--refresh-ink);
background: var(--refresh-white);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
}
html.refresh-root body :where(main, section, article, div, nav, figure, header, footer) {
min-width: 0;
}
html.refresh-root body :where(p, li, a, span, strong, small, address) {
overflow-wrap: break-word;
}
html.refresh-root body :where(h1, h2, h3, h4) {
overflow-wrap: normal;
word-break: normal;
hyphens: auto;
}
html.refresh-root body :focus-visible {
outline: 3px solid #005f80;
outline-offset: 3px;
}
html.refresh-root .site-header {
min-height: 76px;
height: auto;
padding: 8px max(var(--refresh-gutter), calc((100vw - var(--refresh-max)) / 2));
grid-template-columns: minmax(150px, 178px) minmax(0, 1fr) auto;
gap: clamp(14px, 1.7vw, 25px);
position: sticky;
inset: 0 0 auto;
border-bottom: 1px solid rgba(56, 85, 109, .14);
box-shadow: 0 4px 18px rgba(23, 43, 56, .055);
}
html.refresh-root .brand img {
width: 160px;
height: auto;
max-height: 50px;
}
html.refresh-root .desktop-nav {
gap: clamp(12px, 1.35vw, 21px);
font-size: .84375rem;
}
html.refresh-root .desktop-nav a {
min-height: 44px;
padding-block: 10px;
display: inline-flex;
align-items: center;
}
.header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.header-contact-link {
min-height: 44px;
padding: 8px 4px;
display: inline-flex;
align-items: center;
color: var(--refresh-navy);
font-size: .8125rem;
font-weight: 750;
white-space: nowrap;
}
.header-whatsapp {
width: 44px;
height: 44px;
flex: 0 0 44px;
display: grid;
place-items: center;
border: 1px solid #b9d9cb;
border-radius: 8px;
color: #176b4f;
background: #f3faf6;
}
.header-whatsapp svg {
width: 22px;
height: 22px;
}
html.refresh-root .header-cta {
min-height: 44px;
padding: 9px 15px;
font-size: .8125rem;
}
/* Light and welcoming footer on every refreshed public page. */
html.refresh-root body footer {
padding: 46px max(var(--refresh-gutter), calc((100vw - var(--refresh-max)) / 2)) 24px;
grid-template-columns: 1.2fr 1fr 1fr .72fr;
gap: clamp(24px, 3vw, 42px);
color: #3e5868;
background: #f5fafb;
border-top: 1px solid var(--refresh-line);
}
html.refresh-root body footer .footer-brand img {
width: 178px;
height: auto;
filter: none;
}
html.refresh-root body footer .footer-brand p {
margin: 10px 0 0;
color: #536c7a;
font-size: .875rem;
line-height: 1.55;
}
html.refresh-root body footer .footer-title {
margin: 0 0 10px;
color: var(--refresh-ink);
font-size: .8125rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
html.refresh-root body footer address {
margin-bottom: 8px;
color: #536c7a;
font-size: .875rem;
font-style: normal;
line-height: 1.55;
}
html.refresh-root body footer :where(.footer-contact, .footer-medical) {
display: flex;
align-items: flex-start;
flex-direction: column;
}
html.refresh-root body footer :where(.footer-contact, .footer-medical) > a {
min-height: 36px;
padding-block: 5px;
display: inline-flex;
align-items: center;
color: #005f80;
font-size: .875rem;
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
overflow-wrap: anywhere;
}
html.refresh-root body footer .footer-actions {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
html.refresh-root body footer .footer-action {
min-height: 42px;
padding: 9px 14px;
display: inline-flex;
align-items: center;
gap: .5rem;
border-radius: 8px;
font-size: .875rem;
font-weight: 800;
text-decoration: none;
}
/* Das Icon kommt als ::before aus brand-icons.css und bringt einen eigenen
Abstand mit. Zusammen mit dem gap stand es sichtbar zu weit vom Text weg. */
html.refresh-root body footer .footer-action-whatsapp::before {
margin-right: 0;
}
html.refresh-root body footer .footer-action-whatsapp {
border: 1px solid #badbcc;
color: #176b4f;
background: #f3faf6;
}
html.refresh-root body footer .footer-action-whatsapp:hover {
border-color: #94c7ae;
color: #11553f;
background: #ecf7f1;
}
html.refresh-root body footer .footer-action-login {
border: 1px solid #b6d7e4;
color: #005f80;
background: #fff;
}
html.refresh-root body footer .footer-action-login:hover {
border-color: #8fc2d6;
color: #004e69;
background: #f1f9fc;
}
html.refresh-root body footer .footer-medical p:not(.footer-title) {
margin: 0 0 6px;
color: #536c7a;
font-size: .8125rem;
line-height: 1.5;
}
html.refresh-root body footer .physioswiss {
width: 130px;
height: auto;
margin: 0;
}
html.refresh-root body footer .footer-bottom {
padding-top: 22px;
border-top-color: #d2e1e6;
color: #536c7a;
}
html.refresh-root body footer a:hover {
color: #004e69;
}
/* Refined home page: three clear areas. */
.home-v2 .home-hero {
grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
align-items: stretch;
padding-block: clamp(34px, 4vw, 52px);
gap: clamp(34px, 4vw, 58px);
}
/* Die Mindestbreiten der beiden Spalten waren zusammen breiter als ein
Fenster um 1000px. Das Bild lief rechts aus dem Viewport und der
WhatsApp-Knopf wurde abgeschnitten. Ab hier wird gestapelt statt
gequetscht. */
@media (max-width: 1080px) {
.home-v2 .home-hero {
grid-template-columns: 1fr;
}
.home-v2 .home-hero-copy {
max-width: 760px;
}
}
.home-v2 .home-hero-copy h1 {
max-width: 720px;
font-size: clamp(2.3rem, 3.45vw, 3.45rem);
letter-spacing: -.035em;
line-height: 1.06;
}
.home-v2 .home-hero-copy h1 span {
display: inline;
}
.home-whatsapp-link {
min-height: 46px;
padding: 9px 13px;
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid #badbcc;
border-radius: 8px;
color: #176b4f;
background: #f3faf6;
font-size: .875rem;
font-weight: 800;
}
.home-whatsapp-link > span {
color: inherit;
font-size: inherit;
letter-spacing: normal;
}
.home-notice-card {
max-width: 590px;
margin-top: 18px;
padding: 12px 14px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 7px 12px;
border: 1px solid var(--refresh-line);
border-left: 4px solid var(--refresh-blue);
border-radius: 8px;
background: #f8fbfc;
}
.home-notice-card > span:first-child {
color: #536d7b;
font-size: .6875rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.home-notice-card strong {
font-size: .8125rem;
line-height: 1.4;
}
.home-notice-card a {
grid-column: 3;
grid-row: 1 / 3;
color: #005f80;
font-size: .75rem;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
.home-notice-card > span:last-child {
/* repoops#146-Folge, vom Kontrast-Waechter beim ersten Lauf gefunden:
#637986 auf dem Kartenhintergrund #f8fbfc ergibt 4.38:1, verlangt sind
4.5:1. #607582 ergibt 4.63:1 und ist im Haus bereits an acht Stellen in
Gebrauch - also kein neuer Wert.
DIESE ZEILE IST NUR SICHTBAR, WENN KEINE AKTUELLE MELDUNG GESETZT IST.
Live liegt derzeit eine ("Willkommen"), deshalb rendert dort der andere
Zweig und keine Messung gegen die Live-Seite konnte den Fall je sehen. */
color: #607582;
font-size: .75rem;
}
.home-v2 .home-welcome-slide-exterior img {
object-position: 50% 56%;
}
.home-overview {
padding: clamp(52px, 6vw, 82px) max(var(--refresh-gutter), calc((100vw - var(--refresh-max)) / 2));
background: #f8fbfc;
}
.home-offer-grid {
margin-top: 30px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.home-offer-card {
min-height: 265px;
padding: clamp(22px, 2.4vw, 30px);
display: flex;
align-items: flex-start;
flex-direction: column;
border: 1px solid var(--refresh-line);
border-radius: 10px;
background: #fff;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.home-offer-card:hover {
border-color: #9fc9d7;
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(23, 43, 56, .07);
}
.home-offer-card > span {
color: var(--refresh-blue);
font-size: .75rem;
font-weight: 800;
}
.home-offer-card h3 {
margin: 20px 0 8px;
color: var(--refresh-ink);
font-size: clamp(1.5rem, 2vw, 1.9rem);
line-height: 1.15;
}
.home-offer-card p {
margin: 0 0 20px;
color: #536c7a;
font-size: .9375rem;
line-height: 1.6;
}
.home-offer-card strong {
margin-top: auto;
color: #005f80;
font-size: .8125rem;
}
.home-place-layout {
margin-top: clamp(48px, 6vw, 72px);
display: grid;
grid-template-columns: minmax(280px, .72fr) minmax(520px, 1.28fr);
align-items: center;
gap: clamp(32px, 5vw, 70px);
}
.home-place-copy h2 {
margin: 0;
font-size: clamp(2rem, 3vw, 2.8rem);
line-height: 1.12;
}
.home-place-copy > p:not(.eyebrow) {
margin: 15px 0 0;
color: #536c7a;
}
.home-place-copy ul {
margin: 20px 0;
padding: 0;
display: grid;
gap: 8px;
list-style: none;
}
.home-place-copy li {
position: relative;
padding-left: 20px;
}
.home-place-copy li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--refresh-blue);
font-weight: 900;
}
.home-mini-tour {
display: grid;
grid-template-columns: 1.15fr .85fr;
grid-template-rows: repeat(2, minmax(150px, 1fr));
gap: 8px;
}
.home-mini-tour figure {
min-height: 0;
margin: 0;
overflow: hidden;
position: relative;
border-radius: 9px;
background: #dce8ec;
}
.home-mini-tour figure:first-child {
grid-row: 1 / 3;
}
.home-mini-tour img {
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
}
.home-mini-tour figure:first-child img {
object-position: 50% 54%;
}
.home-mini-tour figcaption {
position: absolute;
inset: auto 9px 9px;
width: fit-content;
padding: 5px 8px;
border-radius: 5px;
color: var(--refresh-ink);
background: rgba(255, 255, 255, .92);
font-size: .6875rem;
font-weight: 800;
}
.home-map-card {
margin-top: 16px;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, .36fr);
border: 1px solid var(--refresh-line);
border-radius: 10px;
background: #fff;
}
.home-map-card iframe {
width: 100%;
height: 235px;
border: 0;
}
.home-map-card > div {
padding: 22px;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
}
.home-map-card strong,
.home-map-card span {
display: block;
}
.home-map-card span {
margin-top: 5px;
color: #607582;
font-size: .8125rem;
}
.home-map-card a {
min-height: 44px;
margin-top: 13px;
display: inline-flex;
align-items: center;
color: #005f80;
font-size: .8125rem;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Shared therapy pages. */
body.mtt-v2,
body.pilates-v2,
body.contact-v2,
body.appointments-v2 {
color: var(--refresh-ink);
}
.therapy-hero {
padding: clamp(38px, 4vw, 56px) max(var(--refresh-gutter), calc((100vw - var(--refresh-max)) / 2));
display: grid;
grid-template-columns: minmax(360px, .86fr) minmax(500px, 1.14fr);
align-items: center;
gap: clamp(38px, 6vw, 78px);
background: var(--refresh-mist);
}
.therapy-hero h1 {
margin: 0;
font-size: clamp(2.55rem, 4.1vw, 3.7rem);
letter-spacing: -.04em;
line-height: 1.05;
}
.therapy-hero h1 span {
color: var(--refresh-blue);
}
.therapy-hero > div > p:last-of-type {
max-width: 650px;
margin: 18px 0 0;
color: #506977;
font-size: 1.0625rem;
line-height: 1.65;
}
/* "Passt zu Ihnen, wenn ..." - repoops#140, S2.
Steht in BEIDEN Hero-Bauarten (.therapy-hero und .methods-v2-hero) und ist
deshalb hier einmal beschrieben statt zweimal.
KEINE NEUE FARBE: --refresh-ink auf --refresh-mist ist 13,43:1, --refresh-navy
auf --refresh-mist ist 7,19:1 - selbst gerechnet, weil der Kontrast-Waechter
nur 412x823 misst und die uebrigen Breiten damit ungemessen sind.
KEIN im Block: beide Hero-Bauarten formatieren ihren Fuehrungstext ueber
die POSITION des Absatzes. */
.leistung-passt {
margin-top: 26px;
padding-top: 22px;
border-top: 1px solid var(--refresh-line);
}
.leistung-passt h2 {
margin: 0;
color: var(--refresh-ink);
font-size: 1.0625rem;
line-height: 1.4;
letter-spacing: -.01em;
}
.leistung-passt ul {
margin: 12px 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
max-width: 650px;
}
.leistung-passt li {
color: var(--refresh-ink);
font-size: .9375rem;
line-height: 1.55;
}
.leistung-passt strong {
display: block;
color: var(--refresh-navy);
font-size: .75rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.therapy-hero-actions {
margin-top: 24px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.therapy-hero figure {
margin: 0;
overflow: hidden;
border-radius: 10px;
background: #dce8ec;
}
.therapy-hero figure img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.therapy-hero-mtt figure img {
object-position: 59% 52%;
}
.therapy-hero-pilates figure img {
object-position: 50% 55%;
}
.therapy-hero figcaption,
.practice-v2-hero figcaption,
.practice-v2-team-photo figcaption {
padding: 11px 13px;
color: #536c7a;
background: #fff;
font-size: .8125rem;
line-height: 1.45;
}
.mtt-story,
.therapy-process,
.pilates-intro {
padding: clamp(52px, 6vw, 80px) max(var(--refresh-gutter), calc((100vw - var(--refresh-max)) / 2));
}
.therapy-process,
.pilates-intro {
background: #f8fbfc;
}
.therapy-heading {
max-width: 780px;
}
.therapy-heading h2 {
margin: 0;
font-size: clamp(2rem, 3.2vw, 2.9rem);
letter-spacing: -.025em;
line-height: 1.12;
}
.therapy-heading > p:last-child {
margin: 14px 0 0;
color: #536c7a;
}
.mtt-collage {
max-width: 1040px;
margin: 38px auto 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(170px, 20vw));
gap: 10px;
}
.mtt-photo {
min-height: 0;
margin: 0;
overflow: hidden;
position: relative;
border-radius: 10px;
background: #dce8ec;
}
.mtt-photo-1 { grid-area: 1 / 1 / 2 / 3; }
.mtt-photo-2 { grid-area: 1 / 3 / 2 / 5; }
.mtt-photo-3 { grid-area: 2 / 1 / 3 / 2; }
.mtt-photo-4 { grid-area: 2 / 4 / 3 / 5; }
.mtt-photo-5 { grid-area: 3 / 1 / 4 / 3; }
.mtt-photo-6 { grid-area: 3 / 3 / 4 / 5; }
.mtt-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mtt-photo-1 img { object-position: 50% 36%; }
.mtt-photo-2 img { object-position: 50% 46%; }
.mtt-photo-3 img { object-position: 50% 38%; }
.mtt-photo-4 img { object-position: 54% 50%; }
.mtt-photo-5 img { object-position: 50% 58%; }
.mtt-photo-6 img { object-position: 59% 52%; }
.mtt-photo figcaption {
position: absolute;
inset: auto 9px 9px;
padding: 5px 8px;
border-radius: 5px;
color: var(--refresh-ink);
background: rgba(255, 255, 255, .94);
font-size: .6875rem;
font-weight: 800;
}
.mtt-center {
z-index: 2;
grid-area: 2 / 2 / 3 / 4;
width: min(100%, 230px);
aspect-ratio: 1;
place-self: center;
padding: 12px;
display: grid;
place-content: center;
gap: 6px;
border: 8px solid #fff;
border-radius: 50%;
color: #fff;
background: var(--refresh-blue);
text-align: center;
box-shadow: 0 12px 30px rgba(23, 43, 56, .12);
}
.mtt-center strong {
font-size: clamp(2.8rem, 5vw, 4.5rem);
font-weight: 750;
letter-spacing: -.03em;
line-height: 1;
}
.mtt-center span {
font-size: clamp(.6875rem, .58rem + .3vw, .875rem);
font-weight: 600;
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
}
.therapy-process-grid {
margin-top: 30px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.therapy-process-grid article {
padding: clamp(22px, 2.5vw, 30px);
border: 1px solid var(--refresh-line);
border-radius: 10px;
background: #fff;
}
.therapy-process-grid article > span {
color: var(--refresh-blue);
font-size: .75rem;
font-weight: 800;
}
.therapy-process-grid h3 {
margin: 17px 0 8px;
font-size: 1.25rem;
}
.therapy-process-grid p {
margin: 0;
color: #536c7a;
font-size: .9375rem;
}
.therapy-flex-note {
margin-top: 14px;
padding: 20px 22px;
display: grid;
grid-template-columns: minmax(140px, .28fr) minmax(0, 1fr);
gap: 18px;
border-left: 4px solid var(--refresh-blue);
background: #eaf5f8;
}
.therapy-flex-note p {
margin: 0;
color: #4f6876;
}
.pilates-space-grid {
margin-top: 32px;
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 10px;
}
.pilates-space-grid figure {
margin: 0;
overflow: hidden;
border-radius: 10px;
background: #dce8ec;
}
.pilates-space-grid img {
width: 100%;
height: 380px;
object-fit: cover;
}
.pilates-space-grid figure:last-child img {
object-position: 50% 45%;
}
.pilates-space-grid figcaption {
padding: 11px 13px;
color: #536c7a;
background: #fff;
font-size: .8125rem;
}
.therapy-page-cta {
padding: clamp(38px, 5vw, 58px) max(var(--refresh-gutter), calc((100vw - var(--refresh-max)) / 2));
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 28px;
color: #fff;
background: var(--refresh-ink);
}
.therapy-page-cta .eyebrow {
color: #91d8ef;
}
.therapy-page-cta h2 {
max-width: 800px;
margin: 0;
color: #fff;
font-size: clamp(1.75rem, 3vw, 2.6rem);
line-height: 1.16;
}
.therapy-page-cta .button-primary {
color: #005f80;
background: #fff;
}
/* Practice photo tour and orientation. */
.practice-v2-hero figure {
background: #dce8ec;
}
.practice-v2-hero figure img {
aspect-ratio: 3 / 2;
}
.practice-photo-tour {
scroll-margin-top: 84px;
}
.practice-photo-tour-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.practice-photo-tour-card {
margin: 0;
overflow: hidden;
display: grid;
grid-template-rows: minmax(260px, 32vw) auto;
border: 1px solid var(--refresh-line);
border-radius: 10px;
background: #fff;
}
.practice-photo-tour-card-wide {
grid-column: 1 / -1;
grid-template-rows: minmax(330px, 38vw) auto;
}
.practice-photo-tour-card img {
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
}
/* Pro Foto, nicht pro Position: sonst wandert der Zuschnitt beim
Umsortieren der Bildstrecke auf das falsche Bild. */
.practice-photo-tour-card .media-treatment-room { object-position: 50% 55%; }
.practice-photo-tour-card .media-training-room { object-position: 50% 65%; }
.practice-photo-tour-card .media-consult { object-position: 50% 55%; }
.practice-photo-tour-card .media-treatment { object-position: 50% 58%; }
.practice-photo-tour-card .media-manual { object-position: 50% 52%; }
.practice-photo-tour-card .media-training-floor { object-position: 50% 58%; }
.practice-photo-tour-card .media-strength { object-position: 50% 48%; }
.practice-photo-tour-card .media-parking { object-position: 50% 62%; }
.practice-photo-tour-card figcaption {
padding: 14px 16px;
display: grid;
gap: 4px;
}
.practice-photo-tour-card figcaption span {
color: var(--refresh-blue);
font-size: .6875rem;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
}
.practice-photo-tour-card figcaption strong {
font-size: .9375rem;
line-height: 1.45;
}
.practice-landmarks {
margin-top: 22px;
display: grid;
gap: 7px;
}
.practice-landmarks a {
min-height: 54px;
padding: 10px 12px 10px 36px;
position: relative;
display: grid;
align-content: center;
border: 1px solid var(--refresh-line);
border-radius: 8px;
background: #fff;
}
.practice-landmarks a::before {
content: "";
width: 10px;
height: 10px;
position: absolute;
left: 14px;
top: 20px;
border: 3px solid #fff;
border-radius: 50%;
background: var(--refresh-blue);
box-shadow: 0 0 0 2px var(--refresh-blue);
}
.practice-landmarks strong {
color: var(--refresh-ink);
font-size: .8125rem;
}
.practice-landmarks span {
color: #607582;
font-size: .75rem;
}
/* Contact and appointment choice use the same current visual system. */
.contact-v2 .subpage-main,
.appointments-v2 .subpage-main {
padding-top: 0;
}
.contact-v2 .subpage-hero,
.appointments-v2 .subpage-hero {
min-height: 0;
padding: clamp(38px, 5vw, 62px) max(var(--refresh-gutter), calc((100vw - var(--refresh-max)) / 2));
background: var(--refresh-mist);
}
.contact-v2 .subpage-hero h1,
.appointments-v2 .subpage-hero h1 {
font-size: clamp(2.55rem, 4.6vw, 4.2rem);
line-height: 1.03;
}
.contact-v2 .content-page,
.appointments-v2 .content-page {
width: min(100%, var(--refresh-max));
margin-inline: auto;
padding-inline: 18px;
}
.contact-v2 .contact-addresses a,
.contact-v2 .contact-addresses small {
overflow-wrap: anywhere;
}
.appointment-choice {
width: min(100%, var(--refresh-max));
margin-inline: auto;
padding: clamp(34px, 4vw, 52px) 18px 0;
}
.appointment-choice header {
max-width: 760px;
}
.appointment-choice h2 {
margin: 0;
font-size: clamp(1.8rem, 3vw, 2.65rem);
line-height: 1.15;
}
.appointment-choice header > p:last-child {
margin: 12px 0 0;
color: #536c7a;
}
.appointment-choice-grid {
margin-top: 24px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.appointment-choice-grid a {
min-height: 138px;
padding: 20px;
display: flex;
align-items: flex-start;
flex-direction: column;
border: 1px solid var(--refresh-line);
border-radius: 10px;
background: #fff;
}
.appointment-choice-grid a:hover {
border-color: #91c5d6;
background: #f8fbfc;
}
.appointment-choice-grid span {
color: var(--refresh-blue);
font-size: .6875rem;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
}
.appointment-choice-grid strong {
margin-top: 12px;
color: var(--refresh-ink);
font-size: 1.125rem;
}
.appointment-choice-grid small {
margin-top: auto;
color: #607582;
line-height: 1.4;
}
.appointment-online-divider {
margin-top: 20px;
padding: 18px 20px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 3px 16px;
border-radius: 10px;
color: #fff;
background: var(--refresh-ink);
}
.appointment-online-divider > span {
grid-row: 1 / 3;
color: #91d8ef;
font-size: .6875rem;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
}
.appointment-online-divider strong {
font-size: 1rem;
}
.appointment-online-divider p {
margin: 0;
color: rgba(255, 255, 255, .75);
font-size: .8125rem;
}
.appointment-online-divider a {
min-height: 44px;
grid-column: 3;
grid-row: 1 / 3;
display: inline-flex;
align-items: center;
color: #fff;
font-size: .8125rem;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 4px;
}
.appointments-v2 .appointment-page {
scroll-margin-top: 84px;
}
@media (max-width: 1230px) {
.header-contact-link {
display: none;
}
}
@media (max-width: 1050px) {
html.refresh-root .site-header {
grid-template-columns: minmax(0, 1fr) auto auto;
}
html.refresh-root .mobile-menu {
display: block;
}
html.refresh-root .desktop-nav {
display: none;
}
}
@media (max-width: 920px) {
.home-v2 .home-hero,
.therapy-hero,
.home-place-layout,
.practice-v2-location {
grid-template-columns: 1fr;
}
.home-v2 .home-hero-copy {
max-width: 760px;
}
.home-v2 .home-welcome-slideshow,
.therapy-hero figure {
max-width: 800px;
}
.home-offer-grid,
.therapy-process-grid {
grid-template-columns: 1fr;
}
.home-offer-card {
min-height: 0;
}
.home-place-layout {
gap: 28px;
}
.therapy-page-cta {
grid-template-columns: 1fr;
}
html.refresh-root body footer {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
html.refresh-root .site-header {
min-height: 70px;
padding: 9px 14px;
gap: 8px;
}
html.refresh-root .brand img {
width: 144px;
}
html.refresh-root .header-actions {
gap: 6px;
}
html.refresh-root .header-cta {
display: none;
}
html.refresh-root .header-whatsapp {
width: 44px;
height: 44px;
}
html.refresh-root .mobile-menu {
min-width: 48px;
}
html.refresh-root .mobile-menu summary {
min-width: 48px;
min-height: 48px;
}
html.refresh-root .mobile-menu nav {
width: min(92vw, 350px);
max-height: calc(100dvh - 86px);
overflow-y: auto;
}
html.refresh-root .mobile-menu nav a {
min-height: 44px;
display: flex;
align-items: center;
}
.home-v2 .home-hero {
padding: 25px 16px 34px;
gap: 24px;
}
.home-v2 .home-hero-copy h1 {
font-size: clamp(2rem, 9.7vw, 3rem);
line-height: 1.08;
}
.home-v2 .home-hero-actions {
align-items: stretch;
}
.home-v2 .home-hero-actions > * {
width: 100%;
justify-content: center;
}
.home-notice-card {
grid-template-columns: 1fr;
}
.home-notice-card a {
min-height: 44px;
grid-column: auto;
grid-row: auto;
display: inline-flex;
align-items: center;
}
.home-overview,
.mtt-story,
.therapy-process,
.pilates-intro {
padding: 42px 16px;
}
.home-offer-grid {
margin-top: 22px;
}
.home-mini-tour {
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(230px, 54vw) minmax(150px, 38vw);
}
.home-mini-tour figure:first-child {
grid-column: 1 / -1;
grid-row: auto;
}
.home-map-card {
grid-template-columns: 1fr;
}
.home-map-card iframe {
height: 220px;
}
.therapy-hero {
padding: 32px 16px;
gap: 25px;
}
.therapy-hero h1 {
font-size: clamp(2.15rem, 10.5vw, 3.1rem);
}
.therapy-hero-actions {
align-items: stretch;
flex-direction: column;
}
.therapy-hero-actions .button {
width: 100%;
}
.mtt-collage {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(4, minmax(160px, 50vw));
gap: 7px;
}
.mtt-photo-1 { grid-area: 1 / 1 / 2 / 2; }
.mtt-photo-2 { grid-area: 1 / 2 / 2 / 3; }
.mtt-center { grid-area: 2 / 1 / 3 / 3; width: min(50vw, 210px); padding: 8px; }
.mtt-photo-3 { grid-area: 3 / 1 / 4 / 2; }
.mtt-photo-4 { grid-area: 3 / 2 / 4 / 3; }
.mtt-photo-5 { grid-area: 4 / 1 / 5 / 2; }
.mtt-photo-6 { grid-area: 4 / 2 / 5 / 3; }
.therapy-flex-note {
grid-template-columns: 1fr;
gap: 6px;
}
.pilates-space-grid {
grid-template-columns: 1fr;
}
.pilates-space-grid img {
height: auto;
aspect-ratio: 4 / 3;
}
.practice-photo-tour-grid {
grid-template-columns: 1fr;
}
.practice-photo-tour-card,
.practice-photo-tour-card-wide {
grid-column: auto;
grid-template-rows: minmax(220px, 67vw) auto;
}
.appointment-choice {
padding: 34px 16px 0;
}
.appointment-choice-grid {
grid-template-columns: 1fr;
}
.appointment-choice-grid a {
min-height: 112px;
}
.appointment-online-divider {
grid-template-columns: 1fr;
gap: 5px;
}
.appointment-online-divider > span,
.appointment-online-divider a {
grid-column: auto;
grid-row: auto;
}
.appointment-online-divider a {
margin-top: 5px;
}
html.refresh-root body footer {
padding: 40px 18px 94px;
grid-template-columns: 1fr;
gap: 27px;
}
html.refresh-root body footer .footer-bottom {
grid-column: auto;
}
html.refresh-root body footer :where(.footer-contact, .footer-medical) > a {
min-height: 44px;
padding-block: 8px;
}
}
@media (max-width: 380px) {
html.refresh-root .brand img {
width: 126px;
}
.home-v2 .home-hero-copy h1 {
font-size: clamp(1.82rem, 9.2vw, 2.3rem);
}
}
@media (prefers-reduced-motion: reduce) {
html.refresh-root body *,
html.refresh-root body *::before,
html.refresh-root body *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}
/* Headings stay visually calm; German auto-hyphenation created awkward breaks. */
html.refresh-root body :where(h1, h2, h3, h4) {
hyphens: none;
}
/* ---------------------------------------------------------------------------
Aktionsleiste unten auf schmalen Bildschirmen (repoops#141)
Vorher: .mobile-booking-bar war ein einzelner Link und stand nur auf
index.php. Auf allen anderen Seiten war der wichtigste Knopf auf dem Handy
gar nicht sichtbar, weil .header-cta unterhalb von 1050px ausgeblendet wird -
er lag hinter dem Menue, also zwei Taps entfernt.
Jetzt: drei Aktionen, auf jeder Seite, ohne Scrollen erreichbar. Die
Basisregeln (fixiert, nur bis 760px, Ein-/Ausblenden) stehen weiterhin in
assets/style.css; hier steht nur, was die drei Kinder betrifft.
--------------------------------------------------------------------------- */
@media (max-width: 760px) {
/* Dunkler als --medos-blue (#00a0e1), und das ist gemessen: Weiss auf
#00a0e1 ergibt 2.95:1 und faellt damit durch die geforderten 4.5:1 - die
Schrift ist rund 15px fett und zaehlt nicht als "gross". Weiss auf #00648f
ergibt 6.5:1. Weil die Leiste ab jetzt auf JEDER Seite steht und
Lighthouse in der Handy-Ansicht misst, waere der schwache Wert sonst auf
jeder Seite gelandet. */
.mobile-booking-bar {
background: #00648f;
gap: 8px;
padding: 6px 8px;
}
.mobile-booking-action {
flex: 1 1 auto;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
border-radius: 12px;
color: #fff;
font-weight: 800;
font-size: .95rem;
text-align: center;
white-space: nowrap;
}
/* Der primaere Knopf traegt mehr Gewicht als die beiden anderen - sichtbar
ueber Flaeche UND Kontrast, nicht nur ueber Farbe. #00648f auf Weiss sind
6.5:1. Welche der drei Aktionen primaer ist, entscheidet lib/cta.php,
nicht dieses Stylesheet. */
.mobile-booking-action.is-primary {
flex: 1.6 1 auto;
background: #fff;
color: #00648f;
}
.mobile-booking-action:not(.is-primary) {
border: 1px solid rgba(255, 255, 255, .55);
}
.mobile-booking-action:focus-visible {
outline: 3px solid #fff;
outline-offset: 2px;
}
}
/* ---------------------------------------------------------------------------
Leistungsvergleich (repoops#140)
Drei Karten, die Physiotherapie, MTT und Pilates gegeneinander abgrenzen.
Auf schmalen Bildschirmen untereinander, ab 900px nebeneinander - der
Vergleich lebt davon, dass man die Spalten nebeneinander sieht, sobald der
Platz reicht.
--------------------------------------------------------------------------- */
.leistungen-vergleich {
margin: clamp(2.5rem, 6vw, 4.5rem) auto;
padding: 0 clamp(1rem, 4vw, 2rem);
max-width: 1180px;
}
.leistungen-vergleich-kopf {
max-width: 46rem;
margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.leistungen-vergleich-kopf h2 {
margin: .25rem 0 .6rem;
}
.leistungen-vergleich-kopf p {
margin: 0;
line-height: 1.6;
}
.leistungen-vergleich-liste {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: clamp(1rem, 2.5vw, 1.5rem);
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.leistungen-vergleich-liste {
grid-template-columns: repeat(3, 1fr);
}
}
.leistungen-karte {
display: flex;
flex-direction: column;
gap: .75rem;
padding: clamp(1.1rem, 2.5vw, 1.6rem);
border: 1px solid rgba(0, 62, 92, .16);
border-radius: 18px;
background: #fff;
}
/* Die Karte der aktuellen Seite wird nicht nur farblich markiert: die
Textmarke "Sie sind hier" steht auch dann da, wenn Farben nicht
wahrgenommen werden. */
.leistungen-karte.is-active {
border-color: #00a0e1;
box-shadow: 0 0 0 2px rgba(0, 160, 225, .18);
}
.leistungen-karte-hier {
margin: 0;
font-size: .78rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: #007bb0;
}
.leistungen-karte h3 {
margin: 0;
font-size: clamp(1.15rem, 2.6vw, 1.4rem);
}
.leistungen-karte-kurz {
margin: 0;
font-weight: 600;
line-height: 1.5;
}
.leistungen-karte-fakten {
margin: 0;
display: grid;
gap: .2rem;
}
.leistungen-karte-fakten dt {
font-size: .8rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: #4a6577;
}
.leistungen-karte-fakten dd {
margin: 0 0 .55rem;
line-height: 1.55;
}
.leistungen-karte-beispiel {
margin: 0;
padding: .7rem .85rem;
border-radius: 12px;
background: rgba(0, 160, 225, .08);
line-height: 1.55;
}
.leistungen-karte-beispiel span {
display: block;
font-size: .8rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: #00648f;
margin-bottom: .25rem;
}
.leistungen-karte-aktionen {
margin-top: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem .9rem;
padding-top: .35rem;
}
/* 44px Mindesthoehe: Touch-Ziel fuer aeltere Patientinnen und Patienten
(repoops#146). */
.leistungen-karte-aktionen .button,
.leistungen-karte-link {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.leistungen-karte-link {
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.leistungen-vergleich-hinweis {
margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
line-height: 1.6;
}
/* Verweis von einer Methode auf ihre eigene Leistungsseite (repoops#140).
Die Medizinische Trainingstherapie stand als Methode 03 und gleichzeitig als
eigene Seite - ohne Verweis wirkt das wie zwei verschiedene Angebote. */
.method-more {
margin: .85rem 0 0;
line-height: 1.55;
}
.method-more a {
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---------------------------------------------------------------------------
Ihr erster Termin (repoops#142)
Beantwortet die drei Fragen, die vor einem ersten Termin offen sind und die
bisher auf keiner Seite standen: wie laeuft das ab, was mitbringen, wer
bezahlt.
--------------------------------------------------------------------------- */
.erster-termin {
margin: clamp(2.5rem, 6vw, 4.5rem) auto;
padding: 0 clamp(1rem, 4vw, 2rem);
max-width: 1180px;
/* 84px ist der Wert, den .practice-photo-tour (#rundgang) und
.appointments-v2 .appointment-page schon tragen. Er addiert sich zu
html{scroll-padding-top}, der Sprung landet also tiefer als noetig - aber
das gilt fuer ALLE Anker der Seite. Hier abzuweichen hiesse, dass
#erster-termin und #rundgang auf DERSELBEN Seite verschieden weit
springen. Der Wert gehoert einmal zentral korrigiert (repoops#145/#146),
nicht an einer Stelle. */
scroll-margin-top: 84px;
}
.erster-termin-kopf {
max-width: 46rem;
margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.erster-termin-kopf h2 {
margin: .25rem 0 .6rem;
}
.erster-termin-kopf p {
margin: 0;
line-height: 1.6;
}
.erster-termin-schritte {
list-style: none;
margin: 0 0 clamp(1.25rem, 3vw, 2rem);
padding: 0;
display: grid;
gap: clamp(1rem, 2.5vw, 1.5rem);
grid-template-columns: 1fr;
}
@media (min-width: 700px) {
.erster-termin-schritte {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1000px) {
.erster-termin-schritte {
grid-template-columns: repeat(4, 1fr);
}
}
.erster-termin-schritte li {
padding: clamp(1rem, 2.5vw, 1.4rem);
border: 1px solid rgba(0, 62, 92, .16);
border-radius: 18px;
background: #fff;
}
/* Die Ziffer ist Schmuck, kein Inhalt - die Reihenfolge traegt bereits das
. Deshalb aria-hidden im Markup und hier nur Gestaltung. */
.erster-termin-schritte li > span {
display: block;
font-size: .85rem;
font-weight: 800;
letter-spacing: .08em;
/* repoops#145: derselbe Wert wie zuvor, jetzt aber ueber das Token. Diese
Stelle kam mit repoops#142 herein, waehrend dieser PR offen war - eine
frische Fundstelle genau der Farbe, die hier auf eine Stelle
zusammengezogen wird. */
color: var(--medos-blue-text);
margin-bottom: .35rem;
}
.erster-termin-schritte h3 {
margin: 0 0 .4rem;
font-size: clamp(1.05rem, 2.4vw, 1.2rem);
}
.erster-termin-schritte p {
margin: 0;
line-height: 1.55;
}
.erster-termin-karten {
display: grid;
gap: clamp(1rem, 2.5vw, 1.5rem);
grid-template-columns: 1fr;
}
@media (min-width: 800px) {
.erster-termin-karten {
grid-template-columns: repeat(2, 1fr);
}
}
.erster-termin-karte {
padding: clamp(1.1rem, 2.5vw, 1.6rem);
border-radius: 18px;
background: rgba(0, 160, 225, .08);
}
.erster-termin-karte h3 {
margin: 0 0 .6rem;
font-size: clamp(1.05rem, 2.4vw, 1.25rem);
}
.erster-termin-karte p,
.erster-termin-karte li {
line-height: 1.6;
}
.erster-termin-karte ul {
margin: 0;
padding-left: 1.1rem;
}
.erster-termin-karte p {
margin: 0 0 .6rem;
}
.erster-termin-karte p:last-child {
margin-bottom: 0;
}
.erster-termin-hinweis {
font-weight: 600;
}
.erster-termin-aktion {
margin: clamp(1.25rem, 3vw, 2rem) 0 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .75rem 1.1rem;
}
.erster-termin-aktion .button,
.erster-termin-telefon {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.erster-termin-telefon {
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}