/*
 * Physio am Ring — Physiotherapie in der Kölner Neustadt-Süd. Beispiel für das Paket „Rundum sorglos"
 * (1.490 € + 79 €/Monat): Online-Terminbuchung, zweite Sprache, Bewertungen sammeln, Änderungen per
 * WhatsApp, Betreuung. Bildidee: der Bewegungsradius — ein Arm, der seinen Bogen Grad für Grad
 * zurückgewinnt. Farben: kühles Weiß, tiefes Petrol, Teal für alles, was man drückt. Maße aus mass.css.
 */
:root {
  --grund: #F4F7F6; --flaeche: #FFFFFF; --tinte: #12303A; --gedaempft: #5B6E74;
  --akzent: #1F8A8A; --akzent-text: #FFFFFF; --akzent-tief: #146B6B;
  --linie: rgba(18, 48, 58, .12); --linie-stark: rgba(18, 48, 58, .26);
}
.marke .zeichen { color: var(--akzent); }
.sprache { display: inline-flex; padding: 3px; border-radius: var(--rund-knopf); border: 1px solid var(--linie-stark); margin-left: 6px; }
.sprache button { min-height: 32px; padding: 0 10px; border-radius: var(--rund-knopf); font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--gedaempft); }
.sprache button[aria-pressed="true"] { background: var(--tinte); color: #fff; }

/* Erstes Bild */
.held { padding-block: calc(var(--block) / 2) var(--block); }
.held .zweispalt { align-items: center; }
.held h1 { max-width: 15ch; }
.wartezeit { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: var(--rund-knopf); background: var(--flaeche); border: 1px solid var(--linie); font-family: var(--display); font-weight: 600; font-size: 14.5px; margin-bottom: 18px; }
.wartezeit::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 4px rgba(31, 138, 138, .2); }

/* Kassen-Weiche */
.kassen { display: inline-flex; padding: 5px; border-radius: var(--rund-knopf); border: 1px solid var(--linie-stark); background: var(--flaeche); gap: 4px; margin-top: calc(var(--luft) * 1.2); }
.kassen button { min-height: 42px; padding: 0 16px; border-radius: var(--rund-knopf); font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--gedaempft); }
.kassen button[aria-pressed="true"] { background: var(--tinte); color: #fff; }
.kasse-text { display: none; margin-top: var(--luft); }
.kasse-text.da { display: block; }
.kasse-text ul { list-style: none; display: grid; gap: 8px; }
.kasse-text li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.5; }
.kasse-text li::before { content: '✓'; color: var(--akzent); font-weight: 800; }

/* Der Bewegungsradius */
.radius { width: 100%; height: auto; }
.radius .grund { fill: var(--flaeche); }
.radius .bogen { fill: none; stroke: var(--linie-stark); stroke-width: 10; stroke-linecap: round; }
.radius .bogen--voll { stroke: var(--akzent); stroke-dasharray: 251; stroke-dashoffset: 251; animation: radius 7s ease-in-out infinite; }
.radius .koerper { fill: none; stroke: var(--tinte); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.radius .kopfkreis { fill: var(--tinte); }
.radius .arm { fill: none; stroke: var(--akzent-tief); stroke-width: 9; stroke-linecap: round; transform-origin: 160px 120px; animation: arm 7s ease-in-out infinite; }
.radius .gelenk { fill: var(--akzent); }
.radius .grad { font-family: var(--display); font-weight: 800; font-size: 26px; fill: var(--tinte); letter-spacing: -0.02em; }
.radius .klein { font-family: var(--display); font-weight: 600; font-size: 12px; fill: var(--gedaempft); letter-spacing: .08em; text-transform: uppercase; }
@keyframes arm { 0%, 12% { transform: rotate(0deg); } 50%, 62% { transform: rotate(-150deg); } 100% { transform: rotate(0deg); } }
@keyframes radius { 0%, 12% { stroke-dashoffset: 251; } 50%, 62% { stroke-dashoffset: 42; } 100% { stroke-dashoffset: 251; } }

/* Leistungen */
.leistung { display: grid; gap: 10px; }
.leistung .dauer { font-family: var(--display); font-weight: 600; font-stretch: 85%; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent-tief); }
.leistung p { font-size: 15.5px; color: var(--gedaempft); }
.leistung .preis { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--tinte); }

/* Team */
.person { display: grid; gap: 12px; }
.person .avatar { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 28px; color: #fff; background: var(--akzent); }
.person .avatar.zwei { background: #4C7C9B; } .person .avatar.drei { background: #7B8F5B; }
.person .rolle { font-family: var(--display); font-weight: 600; font-stretch: 85%; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gedaempft); }
.person .quali { list-style: none; display: grid; gap: 4px; font-size: 14.5px; color: var(--gedaempft); }
.person .quali li::before { content: '· '; }
.person p { font-size: 15.5px; color: var(--gedaempft); }

/* Praxis: der Grundriss */
.grundriss { width: 100%; height: auto; border-radius: var(--rund); }
.grundriss .wand { fill: var(--flaeche); stroke: var(--tinte); stroke-width: 2.5; }
.grundriss .raum { fill: rgba(31, 138, 138, .08); stroke: var(--linie-stark); stroke-width: 1.5; }
.grundriss .raum.an { fill: rgba(31, 138, 138, .22); stroke: var(--akzent); }
.grundriss text { font-family: var(--display); font-weight: 600; font-size: 12px; fill: var(--tinte); }
.grundriss .tuer { fill: none; stroke: var(--akzent-tief); stroke-width: 2; }
.raeume { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.raeume button { min-height: 36px; padding: 0 14px; border-radius: var(--rund-knopf); border: 1px solid var(--linie-stark); font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--gedaempft); }
.raeume button[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.raum-satz { margin-top: 12px; font-size: 15px; color: var(--gedaempft); min-height: 3em; }
.merkmale { list-style: none; display: grid; gap: 10px; }
.merkmale li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15.5px; line-height: 1.5; }
.merkmale li::before { content: '✓'; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--akzent); color: #fff; font-weight: 800; font-size: 13px; }

/* Bewertungen sammeln */
.google { display: flex; align-items: center; gap: 16px; }
.google b { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 5vw, 60px); letter-spacing: -0.04em; line-height: 1; }
.google span { color: var(--gedaempft); font-size: 15px; }
.qr { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.qr svg { width: 96px; height: 96px; border-radius: 8px; background: #fff; border: 1px solid var(--linie); }
.qr svg rect { fill: var(--tinte); }

/* Online-Terminbuchung */
.buchung { display: grid; gap: var(--luft); }
.schritt { display: grid; gap: 14px; }
.schritt-kopf { display: flex; align-items: baseline; gap: 12px; }
.schritt-kopf i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tinte); color: #fff; font-family: var(--display); font-weight: 700; font-style: normal; font-size: 14px; flex: none; }
.schritt-kopf h3 { font-size: 20px; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl button { min-height: 44px; padding: 0 16px; border-radius: var(--rund-knopf); border: 1px solid var(--linie-stark); background: var(--flaeche); font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--tinte); }
.wahl button small { display: block; font-family: var(--text); font-weight: 400; font-size: 12.5px; color: var(--gedaempft); }
.wahl button[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.wahl button[aria-pressed="true"] small { color: rgba(255, 255, 255, .8); }
.woche-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.woche-kopf b { font-family: var(--display); font-size: 16px; }
.woche-kopf button { min-height: 38px; padding: 0 14px; border-radius: var(--rund-knopf); border: 1px solid var(--linie-stark); font-family: var(--display); font-weight: 600; font-size: 14px; }
.kalender { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tag { display: grid; gap: 6px; align-content: start; }
.tag > b { font-family: var(--display); font-size: 14px; text-align: center; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.tag > b small { display: block; font-family: var(--text); font-weight: 400; font-size: 12px; color: var(--gedaempft); }
.tag button { min-height: 36px; border-radius: 8px; border: 1px solid var(--linie); background: var(--flaeche); font-family: var(--display); font-weight: 600; font-size: 13.5px; color: var(--tinte); }
.tag button:disabled { opacity: .3; text-decoration: line-through; cursor: default; }
.tag button[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.tag .leer { font-size: 12.5px; color: var(--gedaempft); text-align: center; padding: 8px 0; }
.zusammenfassung { display: grid; gap: 8px; padding: 18px 20px; border-radius: var(--rund); background: var(--flaeche); border: 1px solid var(--linie); }
.zusammenfassung b { font-family: var(--display); }
.zusammenfassung dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: 15px; }
.zusammenfassung dt { color: var(--gedaempft); }
.buchung .fortschritt { height: 4px; border-radius: 2px; background: var(--linie); overflow: hidden; }
.buchung .fortschritt i { display: block; height: 100%; width: 100%; background: var(--akzent); transform-origin: left center; transform: scaleX(0); transition: transform .4s var(--ease); }

/* Regeln */
.regeln { display: grid; gap: var(--luft); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.regeln .karte h3 { margin-bottom: 8px; }
.regeln .karte p { font-size: 15.5px; color: var(--gedaempft); }

@media (max-width: 980px) { .regeln { grid-template-columns: 1fr; } .kalender { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 760px) { .kassen { width: 100%; } .kassen button { flex: 1; padding: 0 8px; font-size: 14px; } .kalender { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tag:nth-child(n+4) { grid-column: span 1; } .sprache { margin: 8px 0 0; align-self: flex-start; } }
@media (prefers-reduced-motion: reduce) { .radius .arm { animation: none; transform: rotate(-110deg); } .radius .bogen--voll { animation: none; stroke-dashoffset: 90; } }