/* Orthopädiezentrum Magdeburg — shared design system.
   Extracted verbatim from the approved index.html so every page renders
   from one source of truth. Subpage-only rules live in pages.css. */

:root{
    --blue:#2980b9;        /* brand header blue (from logo) */
    --blue-deep:#1a4d73;   /* ink-blue for headings */
    --cyan:#3c9ddb;        /* third square / accent */
    /* the three squares in the 2025 logo, sampled from ozm_logo_2025.png */
    --logo-deep:#0067D4;
    --logo-mid:#0086D4;
    --logo-cyan:#04A1C7;
    --ink:#22303b;
    --slate:#5a6b78;
    --mist:#eef3f7;
    --ice:#e4f0f9;
    --line:#d7e3ec;
    --paper:#ffffff;
    --shadow:0 18px 40px -22px rgba(26,77,115,.55);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;overflow-x:clip}
  body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
  img{max-width:100%;display:block}
  h1,h2,h3,h4,h5{font-family:'Bricolage Grotesque',system-ui,sans-serif;color:var(--blue-deep);line-height:1.06;letter-spacing:-.025em;font-weight:800}
  a{color:var(--blue)}
  .wrap{max-width:1200px;margin:0 auto;padding:0 34px}
  :where(a,button):focus-visible{outline:2.5px solid var(--cyan);outline-offset:3px;border-radius:6px}
  [id]{scroll-margin-top:96px}

  /* ---- buttons: pill, gradient depth, arrow chip ---- */
  .btn{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;
       background:linear-gradient(160deg,#3b95cf 0%,var(--blue) 42%,#1f699c 100%);
       font-family:'Inter';font-weight:600;font-size:15px;letter-spacing:.01em;padding:13px 15px 13px 28px;border-radius:999px;
       box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 12px 26px -12px rgba(26,77,115,.75);
       transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
  .btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 18px 34px -12px rgba(26,77,115,.8)}
  .btn .chip{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:0 0 auto;transition:transform .18s ease,background .18s ease}
  .btn .chip svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2}
  .btn:hover .chip{transform:translateX(3px);background:rgba(255,255,255,.3)}
  .btn.on-dark{background:#fff;color:var(--blue-deep);box-shadow:0 14px 30px -14px rgba(0,0,0,.55)}
  .btn.on-dark:hover{filter:none;background:var(--mist)}
  .btn.on-dark .chip{background:var(--blue)}
  .btn.plain{padding:13px 28px}
  .linkarrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--blue-deep);
             text-decoration:none;transition:color .16s}
  .linkarrow svg{width:30px;height:30px;padding:7px;border-radius:50%;border:1.5px solid var(--line);stroke:currentColor;
                 transition:transform .18s,background .18s,border-color .18s}
  .linkarrow:hover{color:var(--blue)}
  .linkarrow:hover svg{transform:translateX(3px);background:var(--blue);border-color:var(--blue);stroke:#fff}
  .linkarrow.on-dark{color:#fff}
  .linkarrow.on-dark svg{border-color:rgba(255,255,255,.45)}
  .linkarrow.on-dark:hover{color:#fff}
  .linkarrow.on-dark:hover svg{background:#fff;border-color:#fff;stroke:var(--blue-deep)}

  /* ---- section scaffolding ---- */
  section{padding:44px 0}
  .standorte .sec-head-row{margin-bottom:28px}
  .sec-mark{display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .sec-mark span{font-family:'Inter';font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
  .sec-title{font-size:clamp(30px,3.8vw,46px);max-width:20ch;text-wrap:balance}
  .sec-lead{font-size:17px;color:var(--slate);max-width:60ch;margin-top:16px}
  .sec-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:30px}
  @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

  /* scroll reveal (tiny, no library) */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

  /* ---- top utility bar (brand blue, per client header) ---- */
  .topbar{background:var(--blue);color:#eaf4fb;font-size:12.5px;letter-spacing:.01em;border-bottom:1px solid rgba(255,255,255,.16)}
  .topbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:9px 34px}
  .topbar a{color:#fff;text-decoration:none;font-weight:600}
  .topbar .sep{opacity:.5;margin:0 10px}
  .topbar .right{display:flex;align-items:center;gap:0;margin-left:auto}
  .topbar .central-contact{display:flex;align-items:center;flex-wrap:wrap;gap:4px 18px}
  .topbar .central-label{font-weight:500;opacity:.8}
  .topbar a:focus-visible{outline:2px solid #fff;outline-offset:4px}
  .hours-central{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 24px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--slate);text-align:center}
  .hours-central strong{color:var(--blue-deep);font-weight:600}
  .hours-central a{color:var(--blue-deep);overflow-wrap:anywhere}
  .topbar .social{display:inline-flex;align-items:center;gap:12px;margin-left:16px;padding-left:16px;border-left:1px solid rgba(255,255,255,.28)}
  .topbar .social a{display:inline-flex;opacity:.85;transition:opacity .15s}
  .topbar .social a:hover{opacity:1}
  .topbar .social svg{width:16px;height:16px;fill:#fff}

  /* ---- nav ---- */
  nav.main{background:var(--blue);position:sticky;top:0;z-index:1200}
  nav.main .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px;gap:18px}
  /* Logo darf bei Platznot nachgeben (min-width:0 + object-fit), der Termin-Button nie */
  nav.main .logo{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;background:#fff;border-radius:12px;padding:9px 16px;box-shadow:0 3px 12px -3px rgba(2,40,80,.22)}
  nav.main .logo img{height:38px;width:auto;max-width:100%;object-fit:contain;flex:0 0 auto;display:block}
  nav.main ul{display:flex;gap:26px;list-style:none;font-size:15.5px;font-weight:600;align-items:center}
  nav.main ul > li{position:relative}
  nav.main ul > li > a{color:#fff;text-decoration:none;position:relative;padding:6px 0;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  nav.main ul > li > a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--cyan);transition:right .2s}
  nav.main ul > li > a:hover::after{right:0}
  nav.main ul .caret{transition:transform .18s}
  nav.main li.has-drop:hover .caret,nav.main li.has-drop:focus-within .caret{transform:rotate(180deg)}

  /* ---- Leistungen dropdown ---- */
  nav.main .drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);padding-top:14px;
    opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease;z-index:60}
  nav.main li.has-drop:hover .drop,nav.main li.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  nav.main .drop .card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:10px;min-width:250px;display:grid;gap:2px}
  nav.main .drop a{padding:11px 14px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:11px;white-space:nowrap}
  nav.main .drop a::after{content:none}
  nav.main .drop a:hover{background:var(--mist);color:var(--blue-deep)}
  nav.main .drop a .dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);flex:0 0 auto}
  nav.main .drop a b{font-weight:600}
  nav.main .drop a small{display:block;font-weight:400;font-size:12px;color:var(--slate)}

  nav.main .navcta{display:flex;align-items:center;gap:18px;flex:0 0 auto}
  /* mobile hamburger (hidden on desktop) */
  .navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;
    padding:0;border:0;background:transparent;cursor:pointer;flex:0 0 auto}
  .navtoggle span{display:block;width:24px;height:2.5px;border-radius:2px;background:#fff;margin:0 auto;transition:transform .22s,opacity .18s}
  nav.main.open .navtoggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  nav.main.open .navtoggle span:nth-child(2){opacity:0}
  nav.main.open .navtoggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  nav.main .navtel{display:inline-flex;flex-direction:column;line-height:1.1;text-decoration:none;text-align:right}
  nav.main .navtel b{font-size:14.5px;font-weight:700;color:#fff}
  nav.main .navtel small{font-size:11px;font-weight:500;color:rgba(255,255,255,.8);letter-spacing:.02em}
  /* Primary appointment CTA — min. 44px Tap-Target, vertikal am Logo (44px) ausgerichtet */
  .btn-book{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;width:auto;white-space:nowrap;min-height:44px;box-sizing:border-box;
    background:#fff;border:1.5px solid var(--line);border-radius:999px;
    padding:6px 8px 6px 14px;text-decoration:none;box-shadow:0 10px 24px -14px rgba(2,40,80,.4);
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
  .btn-book:hover{border-color:var(--cyan);box-shadow:0 15px 28px -14px rgba(2,40,80,.5);transform:translateY(-2px)}
  .btn-book img{display:block;height:18px;width:auto}
  .btn-book .sepv{display:block;width:1px;height:18px;background:var(--line)}
  .btn-book .lbl{display:block;line-height:1.1;min-width:0}
  .btn-book .lbl b{font-family:'Inter';font-weight:700;font-size:13.5px;color:var(--blue-deep);white-space:nowrap}
  .btn-book .lbl-short{display:none}
  .btn-book--doctolib .lbl,.btn-book--doctolib .sepv{display:none}
  .btn-book::after{content:'→';display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;min-width:24px;border-radius:50%;background:var(--cyan);color:#fff;font-size:16px;line-height:1;transition:transform .16s ease,background .16s ease}
  .btn-book:hover::after{background:#09afd0;transform:translateX(2px)}

  /* ---- HERO: light duotone practice photo, doctors blended into the page, geometric fields ---- */
  .hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#5b9fd0 0%,#3a85bd 100%)}
  .hero .duo{position:absolute;inset:0}
  /* full-strength photo blue like the live site; white copy over a soft dark scrim */
  .hero .duo img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
  .hero .duo::after{content:"";position:absolute;inset:0;
      background:linear-gradient(90deg,rgba(13,42,66,.55) 0%,rgba(13,42,66,.30) 46%,rgba(13,42,66,0) 76%)}
  .hero .geo{position:absolute;inset:0;pointer-events:none}
  .hero .geo span{position:absolute;border-radius:50%}
  .hero .geo .wedge{left:0;bottom:0;width:360px;height:300px;border-radius:0;
      background:rgba(255,255,255,.06);clip-path:polygon(0 100%,100% 100%,0 16%)}
  /* no z-index here: an isolated stacking context would stop the people photo's
     mix-blend-mode:multiply from reaching the duotone/geometry layers below */
  .hero .wrap{position:relative}
  .hero .copy{padding:72px 0 72px;max-width:640px}
  .hero .kicker{display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .hero .kicker span{font-size:15px;font-weight:500;letter-spacing:.01em;color:#d6e8f6}
  .hero h1{font-size:clamp(44px,4.5vw,64px);letter-spacing:-.025em;line-height:1.04;color:#fff;text-shadow:0 2px 18px rgba(13,42,66,.35)}
  .hero .sub{font-size:17.5px;line-height:1.65;color:#eaf4fb;margin:18px 0 32px;max-width:48ch;text-shadow:0 1px 8px rgba(13,42,66,.45)}
  .hero .cta-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
  .hero .uni{margin-top:38px;padding-top:18px;border-top:1px solid rgba(255,255,255,.35);font-size:13px;color:#d6e8f6;max-width:44ch}
  .hero .uni strong{color:#fff;font-weight:600}
  .hero-people{position:relative;align-self:end;display:flex;justify-content:center;min-height:300px}
  /* real transparent cutout (generated-images/gf_2022_cut.png) — no blend needed */
  .hero-people img{max-height:500px;width:auto;max-width:100%;object-fit:contain;object-position:bottom;
      filter:drop-shadow(0 18px 30px rgba(7,25,40,.35))}
  .hero-chip{position:absolute;left:-6px;bottom:40px;background:#fff;border-radius:14px;padding:13px 18px;box-shadow:var(--shadow);z-index:3}
  .hero-chip b{font-family:'Bricolage Grotesque';color:var(--blue-deep);font-size:14.5px;display:block}
  .hero-chip small{color:var(--slate);font-size:12.5px}

  /* light info banner directly below the hero: the essentials at a glance */
  .welcome{background:#fff;padding:44px 0 40px}
  .welcome .wrap{max-width:1080px;text-align:center}
  .welcome .kick{font-family:'Bricolage Grotesque';font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--logo-mid);margin-bottom:12px}
  .welcome p{font-size:16.5px;line-height:1.68;color:var(--slate);margin-bottom:16px}
  .welcome p.lead{font-size:18px;line-height:1.6;color:var(--ink);margin-bottom:0;max-width:64ch;margin-left:auto;margin-right:auto}
  .welcome p.sign{font-family:'Bricolage Grotesque';font-size:16px;font-weight:600;color:var(--blue-deep);margin-bottom:0;margin-top:30px}
  @media(max-width:760px){.welcome{padding:42px 0 38px}.welcome p.lead{margin-bottom:14px}}
  .facts{background:var(--mist);border-bottom:1px solid var(--line)}
  .hours{padding:28px 0 24px}
  .hours-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:18px;flex-wrap:wrap}
  .hours-head h3{font-family:'Bricolage Grotesque';font-size:22px;color:var(--blue-deep)}
  .hours-head .lede{font-size:13.5px;color:var(--slate)}
  .hours-head .lede b{color:var(--ink);font-weight:600}
  .hours-head .lede a{color:var(--blue-deep);font-weight:600;text-decoration:none}
  .hours-head .lede a:hover{text-decoration:underline}
  .htable{border-top:1px solid var(--line)}
  .hrow{display:grid;grid-template-columns:250px repeat(5,1fr);border-bottom:1px solid var(--line)}
  .hrow.hhead .hd{font-family:'Bricolage Grotesque';font-weight:700;font-size:12.5px;letter-spacing:.03em;color:var(--blue-deep);
        padding:9px 10px;border-left:1px solid var(--line);text-align:center}
  .hrow.hhead .hpx{border-left:0}
  .hpx{padding:14px 18px 14px 0;display:flex;flex-direction:column;gap:2px}
  .hpx b{font-family:'Bricolage Grotesque';font-size:14.5px;color:var(--blue-deep);line-height:1.25}
  .hpx small{font-size:11.5px;color:var(--slate)}
  .hpx small a{color:var(--logo-mid);font-weight:600;text-decoration:none}
  .hpx small a:hover{text-decoration:underline}
  .hpx b a{color:inherit;text-decoration:none}
  .hpx b a:hover{text-decoration:underline}
  .hc .t a{color:var(--logo-mid);font-weight:600;text-decoration:none}
  .hc .t a:hover{text-decoration:underline}
  .hpx em{font-style:normal;font-size:11px;color:var(--logo-mid);font-weight:600;margin-top:3px}
  .hc{padding:11px 8px;border-left:1px solid var(--line);font-size:12.5px;color:var(--ink);text-align:center;
      display:flex;flex-direction:column;justify-content:center;gap:1px}
  .hc .t{display:block;white-space:nowrap}
  .hc .t.muted,.hc.closed{color:var(--slate)}
  .hc.closed{font-size:12px}
  .hc.span{grid-column:2 / -1;flex-direction:row;gap:6px}

  /* ---- wir für sie (intro): photo collage left, editorial right ---- */
  .intro{background:var(--paper);padding-top:44px;overflow:hidden}
  .intro .wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
  .intro .art{position:relative}
  .intro .art::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;
      border:1.5px solid rgba(41,128,185,.28);right:-60px;top:-58px}
  .intro .art::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;
      background:var(--ice);left:-44px;bottom:-40px;z-index:0}
  .intro .art img{position:relative;z-index:1;border-radius:18px;box-shadow:var(--shadow);width:100%;object-fit:cover;aspect-ratio:4/3.1}
  .intro .art .tag{position:absolute;z-index:2;right:22px;bottom:-24px;background:#fff;border-radius:14px;padding:15px 20px;box-shadow:var(--shadow);max-width:240px}
  .intro .art .tag b{font-family:'Bricolage Grotesque';color:var(--blue-deep);font-size:15px}
  .intro .art .tag small{display:block;color:var(--slate);font-size:12.5px;margin-top:2px}
  .intro .txt p{color:var(--slate);font-size:16.5px;margin-top:16px}
  .intro .txt .btn{margin-top:30px}

  /* ---- körperregion navigator: dark brand-blue band, X-ray tiles ---- */
  .region{position:relative;overflow:hidden;background:linear-gradient(165deg,#163a58 0%,var(--blue-deep) 46%,#1f5d8c 100%)}
  .region .geo{position:absolute;inset:0;pointer-events:none}
  .region .geo span{position:absolute;border-radius:50%}
  .region .geo .r1{width:900px;height:900px;right:-320px;top:-520px;border:1px solid rgba(255,255,255,.13)}
  .region .geo .r2{width:520px;height:520px;left:-240px;bottom:-260px;background:rgba(255,255,255,.045)}
  .region .wrap{position:relative;z-index:2}
  .region .sec-mark span{color:#7cc4ec}
  .region .sec-title{color:#fff}
  .region .sec-lead{color:#bcd9ec}
  .rg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .rg{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;
      background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
      transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}
  .rg:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.09);
      box-shadow:0 26px 44px -22px rgba(0,10,25,.7)}
  .rg .ph{position:relative;aspect-ratio:1/.94;overflow:hidden}
  .rg .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
  .rg:hover .ph img{transform:scale(1.06)}
  .rg .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(18,45,70,.55) 100%)}
  .rg .tx{display:flex;align-items:center;gap:12px;padding:15px 18px 17px}
  .rg .tx > div{flex:1;min-width:0}
  .rg h4{font-size:18.5px;color:#fff;letter-spacing:-.015em}
  .rg p{font-size:12.5px;color:#a9cde5;line-height:1.45;margin-top:3px}
  .rg .go{width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);display:grid;place-items:center;
      transition:background .18s,border-color .18s,transform .18s}
  .rg .go svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;transition:stroke .18s}
  .rg:hover .go{background:#fff;border-color:#fff;transform:translateX(3px)}
  .rg:hover .go svg{stroke:var(--blue-deep)}

  /* Six-practice directory on the homepage: location-led rather than generic service tiles. */
  .practice-grid{grid-template-columns:repeat(3,1fr);gap:22px}
  .practice-card{position:relative;background:rgba(255,255,255,.06)}
  .practice-card .ph{aspect-ratio:1.52/1}
  .practice-card .ph img{filter:saturate(.82)}
  .practice-card .ph::after{background:linear-gradient(180deg,rgba(9,33,53,.04) 35%,rgba(10,40,64,.7) 100%)}
  .practice-card .practice-place{position:absolute;z-index:1;left:15px;bottom:13px;padding:6px 10px;border:1px solid rgba(255,255,255,.52);border-radius:999px;background:rgba(11,47,73,.62);backdrop-filter:blur(7px);color:#fff;font-family:'Bricolage Grotesque';font-size:11px;font-weight:700;letter-spacing:.055em;text-transform:uppercase}
  .practice-card .tx{min-height:120px;align-items:flex-end}
  .practice-card .practice-type{display:block;margin-bottom:5px;color:#7cc4ec;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
  .practice-card h4{font-size:19px}
  .practice-card p{display:block;color:#bcd9ec}

  /* ---- feature (stosswelle) — tonal band: oversized circles cropped by the frame ---- */
  .feature{padding:0}
  .fbanner{position:relative;overflow:hidden;isolation:isolate;min-height:560px;
           background:linear-gradient(118deg,#1f5a83 0%,#3b83a6 54%,#7fb2c3 100%)}
  /* each field is a circle far larger than the band, so only an arc of it reads */
  .fbanner-fields{position:absolute;inset:0;pointer-events:none}
  .fbanner-fields span{position:absolute;display:block;border-radius:50%}
  .fbanner-fields .f1{width:1680px;height:1680px;left:-420px;top:-600px;background:rgba(255,255,255,.05)}
  .fbanner-fields .f2{width:1180px;height:1180px;left:-60px;top:-300px;background:rgba(255,255,255,.055)}
  .fbanner-fields .f3{width:820px;height:820px;left:210px;top:-90px;border:1px solid rgba(255,255,255,.16)}
  /* the one straight element — a wedge rising to meet the photo edge */
  .fbanner-fields .f4{width:100%;height:100%;left:0;top:0;border-radius:0;
                      background:rgba(255,255,255,.085);clip-path:polygon(58% 26%,58% 100%,6% 100%)}
  /* photo as a full-height panel reaching the centre, dissolving into the gradient */
  .fbanner-orb{position:absolute;top:0;right:0;height:100%;width:54%;object-fit:cover;
               -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 20%,#000 46%);
               mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 20%,#000 46%)}
  .fbanner-body{position:relative;min-height:560px;
                display:flex;flex-direction:column;justify-content:center;
                /* center the copy inside the left (non-photo) panel: photo starts at 58% */
                padding:80px 0 80px max(34px,calc(23vw - 230px))}
  /* keep the copy clear of the photo panel (starts at 58%) */
  .fbanner-body > *{max-width:min(460px,42vw)}
  .fbanner-body .sec-title{color:#fff;max-width:14ch}
  .fbanner-body .sec-mark span{color:rgba(255,255,255,.8)}
  .fbanner-body .cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px}
  .fbanner-body .igel{font-size:13px;color:rgba(255,255,255,.78);border-left:2px solid rgba(255,255,255,.35);padding-left:12px}
  .feature h6{font-family:'Bricolage Grotesque';font-size:15.5px;font-weight:700;color:#fff;margin:22px 0 4px}
  .feature p{font-size:15.5px;color:rgba(255,255,255,.82)}
  .feature .btn{margin-top:28px;align-self:flex-start}

  /* ---- rücken (StimaWELL / Check My Back) ---- */
  .ruecken{background:var(--mist);padding:44px 0}
  .ruecken .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .ruecken .art{position:relative}
  .ruecken .art::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;
      border:1.5px solid rgba(41,128,185,.30);left:-52px;top:-48px}
  .ruecken img.shot{position:relative;z-index:1;border-radius:18px;box-shadow:var(--shadow);width:100%;aspect-ratio:4/3;object-fit:cover}
  .ruecken p{font-size:15.5px;color:var(--slate);margin-top:14px}
  .ruecken .logos{display:flex;gap:22px;align-items:center;margin-top:26px;flex-wrap:wrap}
  .ruecken .logos img{height:40px;width:auto;background:#fff;border-radius:8px;padding:4px 8px}

  /* ---- standorte ---- */
  .st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  /* tonal cards in the three logo blues — same cropped-circle language as the feature banner */
  .st{position:relative;overflow:hidden;isolation:isolate;border:0;border-radius:20px;padding:30px 30px 28px;
      color:#fff;display:flex;flex-direction:column;min-height:250px;
      transition:box-shadow .18s,transform .18s}
  .st.b1{background:linear-gradient(135deg,var(--logo-deep) 0%,var(--logo-mid) 100%)}
  .st.b2{background:linear-gradient(135deg,var(--logo-mid) 0%,var(--logo-cyan) 100%)}
  .st.b3{background:linear-gradient(135deg,var(--logo-deep) 0%,var(--logo-cyan) 100%)}
  /* oversized circles, cropped by the card so only an arc reads */
  .st .fields{position:absolute;inset:0;pointer-events:none;z-index:0}
  .st .fields span{position:absolute;display:block;border-radius:50%}
  .st .fields .c1{width:520px;height:520px;right:-230px;top:-190px;background:rgba(255,255,255,.07)}
  .st .fields .c2{width:360px;height:360px;right:-90px;top:-40px;border:1px solid rgba(255,255,255,.18)}
  .st .fields .c3{width:300px;height:300px;left:-140px;bottom:-160px;background:rgba(255,255,255,.06)}
  /* scrim keeps white text above 4.5:1 — raw logo cyan is only 3.04:1, so this needs a floor, not a fade to 0 */
  .st::after{content:'';position:absolute;inset:0;z-index:1;
             background:linear-gradient(150deg,rgba(2,28,64,.34) 0%,rgba(2,28,64,.25) 100%)}
  .st > *:not(.fields){position:relative;z-index:2}
  .st:hover{box-shadow:0 22px 42px -20px rgba(2,40,80,.6);transform:translateY(-3px)}
  .st .kind{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.85);font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:9px}
  .st h4{font-size:20px;margin-bottom:9px;color:#fff}
  .st p{font-size:14.5px;color:rgba(255,255,255,.92);line-height:1.55}
  .st .desc{font-size:13.5px;color:rgba(255,255,255,.82)}
  .st .addr{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22);font-style:normal;display:flex;flex-direction:column;gap:3px}
  .st .addr b{font-size:15.5px;color:#fff;font-weight:600}
  .st .addr span{font-size:13.5px;color:rgba(255,255,255,.88)}
  .st .more{margin-top:auto;padding-top:20px}
  /* Standorte: location list plus an API-key-free Leaflet map */
  /* height:auto statt fix 560px: alle sechs Standorte bleiben ohne Scrollen
     sichtbar, die Karte wächst einfach mit der Liste */
  .map-shell{display:grid;grid-template-columns:370px 1fr;height:auto;min-height:560px;border-radius:24px;overflow:hidden;
             background:#fff;border:1px solid var(--mist);box-shadow:0 26px 50px -28px rgba(2,40,80,.35);
             position:relative;z-index:0;isolation:isolate}
  .map-list{overflow-y:auto;border-right:1px solid var(--mist)}
  .map-item{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--mist);
            border-left:3px solid transparent;padding:16px 20px 15px;cursor:pointer;font-family:inherit;transition:background .15s}
  .map-item:hover{background:var(--paper)}
  .map-item.active{background:var(--ice);border-left-color:var(--logo-mid)}
  .map-item .kind{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--logo-mid);font-weight:600}
  .map-item h4{font-size:15.5px;color:var(--blue-deep);margin:3px 0 2px}
  .map-item .adr{font-size:13px;color:var(--slate);line-height:1.45}
  .map-item .tel{display:inline-block;margin-top:6px;font-size:13px;font-weight:600;color:var(--logo-mid);text-decoration:none}
  .map-item .tel:hover{text-decoration:underline}
  .map-item .links{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
  .map-item .links a{font-size:13px;font-weight:600;color:var(--logo-mid);text-decoration:none}
  .map-item .links a:hover{text-decoration:underline}
  #stmap{height:100%;width:100%;background:var(--ice)}
  .leaflet-container{font:inherit}
  @media(max-width:900px){
    .map-shell{grid-template-columns:1fr;grid-template-rows:300px 280px;height:auto}
    .map-list{order:2;border-right:0;border-top:1px solid var(--mist)}
    #stmap{order:1;min-height:300px}
  }
  .st .more a{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:#fff;
              text-decoration:none;border:1.5px solid rgba(255,255,255,.7);border-radius:999px;padding:11px 22px;
              transition:background .18s,border-color .18s}
  .st .more a:hover{background:#fff;border-color:#fff;color:var(--logo-deep)}

  /* ---- team: arch portraits ---- */
  .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;row-gap:28px}
  .doc{text-align:center}
  .doc .ph{position:relative;border-radius:50%;overflow:hidden;background:linear-gradient(180deg,var(--ice) 0%,var(--mist) 100%);
      aspect-ratio:1/1;transition:box-shadow .18s,transform .18s}
  .doc .ph img{width:100%;height:100%;object-fit:cover;object-position:center 15%;transition:transform .3s ease}
  .doc .ph.nophoto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
  .doc .ph.nophoto .ph-silhouette{width:40%;height:auto;color:#9fb6c8}
  .doc .ph.nophoto span{font-size:12px;letter-spacing:.04em;color:var(--slate);font-weight:600}
  .doc:hover .ph{transform:translateY(-4px);box-shadow:var(--shadow)}
  .doc:hover .ph img{transform:scale(1.04)}
  .doc h5{font-size:16px;color:var(--blue-deep);margin-top:15px}
  .doc p{font-size:12.5px;color:var(--slate);margin-top:3px;line-height:1.45}
  /* team on dark-blue overlay (reuses the .region gradient + text colors) */
  .team{background:linear-gradient(165deg,#163a58 0%,var(--blue-deep) 46%,#1f5d8c 100%)}
  .team .sec-mark span{color:#7cc4ec}
  .team .sec-title{color:#fff}
  .team .doc h5{color:#fff}
  .team .doc p{color:#bcd9ec}

  /* ---- zertifikate (compact strip: badge beside the text) ---- */
  .certs{padding:40px 0}
  .certs .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .cert{min-width:0}
  /* fixed badge column: the source badges have very different aspect ratios */
  .cert{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 16px;
        display:grid;grid-template-columns:74px minmax(0,1fr);align-items:center;gap:14px}
  .cert img{max-height:56px;max-width:74px;width:auto;margin:0 auto;object-fit:contain}
  .cert h6{font-family:'Bricolage Grotesque';font-size:13.5px;font-weight:700;color:var(--blue-deep);line-height:1.25}
  .cert p{font-size:12.5px;line-height:1.45;color:var(--slate);margin-top:3px}
  .cert.cert-text{grid-template-columns:minmax(0,1fr)}
  a.cert{text-decoration:none;transition:border-color .15s,box-shadow .15s}
  a.cert:hover{border-color:var(--logo-mid);box-shadow:0 8px 20px rgba(15,42,68,.07)}
  .sec-head{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin-bottom:18px}
  .sec-head .sec-mark{margin-bottom:0}

  /* ---- news ---- */
  .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
  .card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
  .card .imgwrap{overflow:hidden}
  .card img{height:196px;width:100%;object-fit:cover;transition:transform .3s ease}
  .card:hover img{transform:scale(1.04)}
  .card .pad{padding:22px 24px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
  .card .date{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);font-weight:600}
  .card h5{font-size:17px;line-height:1.25;color:var(--blue-deep)}
  .card p{font-size:14px;color:var(--slate);flex:1}

  /* ---- jobs banner ---- */
  .jobs{position:relative;overflow:hidden;background:linear-gradient(120deg,#1f699c 0%,var(--blue) 55%,#3b95cf 100%);color:#fff;padding:40px 0}
  .jobs .jb{position:absolute;border-radius:50%;pointer-events:none}
  .jobs .jb1{width:560px;height:560px;right:-200px;top:-330px;background:rgba(255,255,255,.07)}
  .jobs .jb2{width:380px;height:380px;right:8%;bottom:-260px;border:1px solid rgba(255,255,255,.22)}
  .jobs .wrap{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
  .jobs h3{color:#fff;font-size:25px}
  .jobs p{font-size:15px;color:#d6e8f6;margin-top:6px;max-width:52ch}

  /* ---- sponsor (compact logo strip) ---- */
  .sponsor{padding:38px 0}
  .logo-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;align-items:center}
  .logo-row .cell{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;align-items:center;justify-content:center;min-height:74px;filter:grayscale(.3);transition:filter .18s}
  .logo-row .cell:hover{filter:grayscale(0)}
  .logo-row img{max-height:42px;width:auto;max-width:100%;object-fit:contain}

  /* ---- footer ---- */
  footer{background:var(--blue-deep);color:#b9d2e4;font-size:14px}
  footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:48px 0 36px}
  footer h6{font-family:'Bricolage Grotesque';color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;font-weight:700}
  footer ul{list-style:none}
  footer li{margin-bottom:9px}
  footer a{color:#b9d2e4;text-decoration:none;transition:color .15s}
  footer a:hover{color:#fff}
  footer .brand .logo{background:#fff;border-radius:10px;padding:12px 14px;display:inline-block}
  footer .brand .logo img{height:44px;width:auto}
  footer .brand p{margin-top:16px;max-width:300px;color:#9fbdd4}
  footer .base{border-top:1px solid rgba(255,255,255,.14);padding:20px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:#8fb0c9}
  footer .site-credit{font-size:11px;opacity:.72}

  /* ---- responsive ---- */
  /* desktop default = the approved 125%-zoom look; effective layout width is
     viewport/1.25, so companion rules below re-align the nav breakpoint */
  @media (min-width:1280px){
    body{zoom:1.25}
  }
  /* zoomed range companions: media queries see the real viewport, layout gets
     viewport/1.25, so re-apply the mid-size rules across the shifted band */
  @media (min-width:1280px) and (max-width:1560px){
    nav.main .navtel{display:none}
    /* zoom:1.25 shrinks the effective layout to ~1024–1150px here; the branded
       Doctolib pill drops its text label so logo + full menu fit without clipping
       (the Doctolib wordmark itself reads as the label, as on mobile). */
    .btn-book--doctolib .lbl,.btn-book--doctolib .sepv{display:none}
  }
  @media (min-width:1280px) and (max-width:1425px){
    .certs .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:1140px){
    nav.main .navtel{display:none}
    .btn-book .lbl-full{display:none}
    .btn-book .lbl-short{display:inline}
    nav.main ul{gap:22px;font-size:15px}
    .certs .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:980px){
    /* stacked layout: text spans the full width, so scrim from the top instead of the left */
    .hero .duo::after{background:linear-gradient(180deg,rgba(13,42,66,.58) 0%,rgba(13,42,66,.34) 55%,rgba(13,42,66,.08) 100%)}
    .hero .copy{padding:64px 0 26px}
    .hero-people{min-height:0}
    .hero-people img{max-height:340px}
    .hours{padding:26px 0 22px}
    .hours-head h3{font-size:19px}
    .hrow.hhead{display:none}
    .hrow{grid-template-columns:1fr;border-bottom:0;padding:14px 0;border-top:1px solid var(--line)}
    .hrow:first-of-type{border-top:0}
    .hpx{padding:0 0 8px}
    .hc{border-left:0;text-align:right;flex-direction:row;justify-content:flex-end;align-items:baseline;
        padding:5px 0;gap:10px}
    .hc::before{content:attr(data-d);font-family:'Bricolage Grotesque';font-weight:700;font-size:12.5px;color:var(--blue-deep);text-align:left;margin-right:auto}
    .hc .t{display:inline-block}
    .hrow .hc.span{grid-column:auto}
    .intro .wrap,.ruecken .wrap{grid-template-columns:1fr;gap:48px}
    .intro .art{order:2}
    .fbanner{min-height:0;display:flex;flex-direction:column-reverse}
    .fbanner-fields .f4{clip-path:polygon(100% 40%,100% 100%,20% 100%)}
    /* stacked: fade from the top edge instead of the left */
    .fbanner-orb{position:static;width:100%;height:280px;
                 -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 34%);
                 mask-image:linear-gradient(180deg,transparent 0%,#000 34%)}
    .fbanner-body{width:100%;min-height:0;padding:44px 32px}
    .fbanner-body > *{max-width:none}
    .rg-grid{grid-template-columns:repeat(2,1fr)}
    .practice-grid{grid-template-columns:repeat(2,1fr)}
    .certs .grid,.team-grid{grid-template-columns:repeat(2,1fr)}
    .st-grid,.news-grid{grid-template-columns:repeat(2,1fr)}
    .logo-row{grid-template-columns:repeat(3,1fr)}
    footer .cols{grid-template-columns:1fr 1fr}
    nav.main .navtel{display:none}
    .navtoggle{display:flex}
    nav.main ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
      gap:0;background:var(--blue);padding:6px 0 14px;border-top:1px solid rgba(255,255,255,.16);
      box-shadow:0 22px 34px -14px rgba(2,40,80,.5)}
    nav.main.open ul{display:flex}
    nav.main ul > li{width:100%}
    nav.main ul > li > a{padding:14px 24px;font-size:17px;justify-content:space-between}
    nav.main ul > li > a::after{display:none}
    nav.main .drop{display:none}
  }
  @media (max-width:640px){
    .btn-book .sepv{display:none}
    .btn-book .lbl-full{display:none}
    .btn-book .lbl-short{display:inline}
  }
  @media (max-width:560px){
    .wrap{padding:0 20px}
    .topbar .wrap{padding:9px 20px}
    nav.main .wrap{gap:10px}
    nav.main .navcta{gap:10px}
    nav.main .logo{padding:7px 12px}
    nav.main .logo img{height:30px}
    .btn-book{gap:8px;padding:6px 8px 6px 12px}
    .btn-book img{height:17px}
    .hero h1{font-size:clamp(36px,10.5vw,46px)}
    .hero-chip{left:0;bottom:18px;padding:11px 14px}
    .rg-grid{gap:12px}
    .rg h4{font-size:16px}
    .rg p{display:none}
    .rg .go{display:none}
    .rg .tx{padding:12px 14px 14px}
    .practice-grid{grid-template-columns:1fr;gap:16px}
    .practice-card{display:grid;grid-template-columns:minmax(120px,38%) 1fr;min-height:148px}
    .practice-card .ph{aspect-ratio:auto;min-height:148px}
    .practice-card .practice-place{left:10px;bottom:10px;font-size:9.5px;padding:5px 8px}
    .practice-card .tx{min-height:0;padding:16px;align-items:center}
    .practice-card h4{font-size:17px}
    .practice-card p{display:block;font-size:11.5px}
    .st-grid,.news-grid,.certs .grid{grid-template-columns:1fr}
    .team-grid{grid-template-columns:repeat(2,1fr);gap:16px;row-gap:24px}
    .logo-row{grid-template-columns:repeat(2,1fr)}
    footer .cols{grid-template-columns:1fr}
    .intro .art::before{right:-20px}
    .intro .art .tag{right:10px}
  }
  @media (max-width:360px){
    /* Schmalste Phones: kleinere Doctolib-Wortmarke + engere Abstände; Kreis-Chip (24px)
       und 44px-Tap-Target bleiben, der Logo-Kasten gibt den Rest nach */
    nav.main .logo{padding:7px 8px}
    .btn-book{gap:6px;padding:6px 6px 6px 10px}
    .btn-book img{height:15px}
  }

/* Die zentrale E-Mail bleibt auch auf kleinen Displays ausgeschrieben erreichbar. */
@media(max-width:560px){
  .topbar .right{width:100%;justify-content:space-between;gap:10px;align-items:flex-start}
  .topbar .central-contact{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:11.5px;min-width:0}
  .topbar .central-mail{grid-column:1 / -1;overflow-wrap:anywhere}
  .topbar .social{margin-left:0;padding-left:0;border-left:0;padding-top:3px;gap:10px;flex-shrink:0}
  .hours-central{flex-direction:column;gap:8px}
}