/* Physio and Friends – Mockup, gemeinsame Styles */
:root{
  --ink:#011D22;       /* Dunkelblau */
  --ink-2:#0E3036;
  --leaf:#AED272;      /* Logo-Grün */
  --leaf-2:#BEDD89;
  --leaf-deep:#4E7A22; /* Grün für kleine Schrift auf Hell */
  --leaf-tint:#EEF5E3;
  --mist:#DFE0E1;      /* Hellgrau */
  --paper:#F2F3F3;
  --stone:#909096;     /* Logo-Grau, nur groß/dekorativ */
  --muted:#5E6166;
  --on-ink:#C9D5D6;
  --white:#FFFFFF;
  --amber:#F2C14E;
  --red:#E2574C;
  --r-door:28px; --r-card:18px; --r-chip:999px;
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Lexend",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:17px;line-height:1.55;font-weight:300;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--leaf);border-radius:10px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.ph{border-bottom:1.5px dashed currentColor;cursor:help}
svg.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Statusleiste + Header */
.statusbar{background:var(--ink);color:var(--on-ink);font-size:14px}
.statusbar .wrap{display:flex;align-items:center;gap:22px;height:38px}
.statusbar .mini{display:flex;align-items:center;gap:8px}
.statusbar .dot{width:9px;height:9px;border-radius:50%}
.statusbar .dot.g{background:var(--leaf)}.statusbar .dot.y{background:var(--amber)}.statusbar .dot.r{background:var(--red)}
.statusbar .lbl{color:var(--white);font-weight:400}
.statusbar .right{margin-left:auto;display:flex;gap:22px}
.statusbar a:hover{color:var(--white)}

header.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--mist)}
.top .wrap{display:flex;align-items:center;gap:22px;height:76px}
.logo{position:relative;width:176px;height:64px;overflow:hidden;flex:none}
.logo img{position:absolute;width:207px;height:207px;max-width:none;left:-17px;top:-66px}
nav.main{display:flex;gap:4px;font-weight:400;font-size:15.5px;margin-left:6px}
.nav-item{position:relative}
.nav-item > a{display:flex;align-items:center;gap:4px;padding:10px 12px;border-radius:12px}
.nav-item > a:hover,.nav-item:focus-within > a{background:var(--paper)}
.nav-item > a[aria-current]{font-weight:500;box-shadow:inset 0 -2px 0 var(--leaf);border-radius:0}
.nav-item .caret{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.drop{position:absolute;top:100%;left:0;min-width:250px;background:var(--white);border-radius:var(--r-card);box-shadow:0 24px 48px -20px rgba(1,29,34,.35),0 0 0 1px var(--mist);padding:8px;display:none}
.nav-item:hover .drop,.nav-item:focus-within .drop{display:grid}
.drop a{padding:10px 14px;border-radius:12px;display:grid}
.drop a:hover{background:var(--paper)}
.drop a small{color:var(--muted);font-size:13.5px}
.top .actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.tel-ico{display:none;width:44px;height:44px;border-radius:50%;background:var(--paper);place-items:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:var(--r-chip);font-weight:500;font-size:16px;transition:transform .15s ease, background .15s ease;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-leaf{background:var(--leaf);color:var(--ink)}
.btn-leaf:hover{background:var(--leaf-2)}
.btn-ink{background:var(--ink);color:var(--white)}
.btn-ink:hover{background:var(--ink-2)}
.btn-white{background:var(--white);color:var(--ink)}
.btn-line{border:1.5px solid currentColor}
.btn-line:hover{background:rgba(1,29,34,.06)}
.on-dark .btn-line:hover{background:rgba(255,255,255,.08)}

/* ---------- Header-Fläche Startseite */
.band{background:var(--ink);color:var(--white);padding:52px 0 160px;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;right:-120px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(174,210,114,.18),transparent)}
.band .grid{display:grid;grid-template-columns:11fr 13fr;gap:48px;align-items:center;position:relative}
.band h1{font-weight:500;font-size:clamp(34px,3.5vw,50px);line-height:1.08;letter-spacing:-.025em}
.band h1 span{display:block;color:var(--on-ink);font-weight:300}
.band .lead{color:var(--on-ink);margin-top:22px;max-width:36ch;font-size:18px}
.band .contact{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.band figure{border-radius:var(--r-door);overflow:hidden;height:420px;position:relative}
.band figure img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.band figcaption{position:absolute;left:16px;bottom:16px;background:rgba(1,29,34,.72);color:var(--white);font-size:13.5px;padding:6px 12px;border-radius:var(--r-chip);backdrop-filter:blur(6px)}

/* ---------- Türen */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:-118px;position:relative;z-index:2}
.door{border-radius:var(--r-door);padding:32px 34px 30px;display:flex;flex-direction:column;min-height:380px;scroll-margin-top:110px}
.door-light{background:var(--white);box-shadow:0 1px 0 var(--mist), 0 24px 50px -30px rgba(1,29,34,.45)}
.door-leaf{background:var(--leaf);box-shadow:0 24px 50px -30px rgba(1,29,34,.45)}
.door .kicker{font-size:15px;font-weight:400;color:var(--muted);display:flex;align-items:center;gap:10px}
.door-leaf .kicker{color:#2E4A12}
.door h2{font-weight:500;font-size:clamp(26px,2.6vw,34px);line-height:1.12;letter-spacing:-.015em;margin:10px 0 10px}
.door p.lead{max-width:40ch;color:var(--muted)}
.door-leaf p.lead{color:#22370C}
.status{margin:24px 0;display:grid;gap:10px}
.door .btns{margin-top:auto;display:flex;gap:12px;flex-wrap:wrap}
.faces{display:flex;align-items:center;gap:14px;margin:0 0 24px;font-size:15.5px;color:var(--muted)}
.faces:hover span:last-child{color:var(--ink)}
.stack{display:flex}
.stack img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2.5px solid var(--white);margin-left:-10px}
.stack img:first-child{margin-left:0}

/* Ampel */
.light{display:grid;grid-template-columns:14px 1fr auto;column-gap:16px;row-gap:1px;align-items:center;width:100%;text-align:left;padding:14px 18px;border-radius:16px;background:var(--paper);transition:background .2s}
.light:hover{background:var(--mist)}
.door-leaf .light{background:rgba(255,255,255,.62)}
.door-leaf .light:hover{background:rgba(255,255,255,.8)}
.on-dark .light{background:rgba(255,255,255,.08)}
.on-dark .light:hover{background:rgba(255,255,255,.13)}
.light .lamp{grid-row:1 / span 2;width:14px;height:14px;border-radius:50%;position:relative;background:var(--mist)}
.light .lamp::after{content:"";position:absolute;inset:-6px;border-radius:50%;opacity:.3;background:inherit}
.light[data-s="g"] .lamp{background:#7FB23F}
.light[data-s="y"] .lamp{background:var(--amber)}
.light[data-s="r"] .lamp{background:var(--red)}
.light .where{grid-column:2;font-weight:500}
.light .what{grid-column:2;color:var(--muted);font-size:15.5px}
.door-leaf .light .what{color:#2E4A12}
.on-dark .light .what{color:var(--on-ink)}
.light .state{grid-column:3;grid-row:1 / span 2;font-size:13.5px;font-weight:500;padding:4px 12px;border-radius:var(--r-chip);background:var(--white);white-space:nowrap}
.on-dark .light .state{background:rgba(255,255,255,.14)}
.light:not(:has(.where)) .lamp,.light:not(:has(.where)) .state{grid-row:auto}
.stamp{font-size:14px;color:var(--muted);margin-top:18px;display:flex;gap:8px;align-items:center}
@media (prefers-reduced-motion:no-preference){
  .boot .lamp{animation:lampOn .5s ease both}
  .boot .light:nth-child(2) .lamp{animation-delay:.18s}
  @keyframes lampOn{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
}

/* Schnellaktionen */
.quick{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 0}
.quick a{display:flex;align-items:center;gap:10px;padding:12px 20px 12px 14px;border-radius:var(--r-chip);background:var(--white);border:1px solid var(--mist);font-weight:400;font-size:15.5px}
.quick a:hover{border-color:var(--leaf)}
.quick .ico{width:34px;height:34px;border-radius:50%;background:var(--leaf-tint);display:grid;place-items:center;color:var(--leaf-deep)}

/* ---------- Abschnitte */
section.block{padding:84px 0 0}
.head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
h3.t{font-weight:500;font-size:clamp(26px,2.8vw,36px);letter-spacing:-.018em;line-height:1.15}
.head p{color:var(--muted);max-width:46ch}
.more{font-weight:500;border-bottom:2px solid var(--leaf);padding-bottom:2px;white-space:nowrap;display:inline-block}

/* Leistungen als App-Liste */
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.split .intro p{color:var(--muted);margin-top:14px;max-width:38ch}
.legend{display:flex;gap:10px;margin:22px 0 26px}
.list{background:var(--white);border-radius:var(--r-card);overflow:hidden}
.row{display:flex;align-items:center;gap:16px;padding:19px 22px;border-top:1px solid var(--paper)}
.row:first-child{border-top:0}
.row:hover{background:#FAFBFB}
.row .name{font-weight:500}
.row .sub{display:block;font-size:14.5px;color:var(--muted);font-weight:300}
.row .ico{width:42px;height:42px;border-radius:50%;background:var(--leaf-tint);color:var(--leaf-deep);display:grid;place-items:center;flex:none}
.tags{margin-left:auto;display:flex;gap:6px}
.tag{font-size:12.5px;font-weight:500;padding:4px 10px;border-radius:var(--r-chip);white-space:nowrap}
.tag.p{background:var(--paper);color:var(--ink)}
.tag.h{background:var(--leaf);color:var(--ink)}
.chev{color:var(--stone)}

/* Schwerpunkt */
.focus{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.focus .photo{border-radius:var(--r-door);overflow:hidden;min-height:420px;background:var(--mist)}
.focus .photo img{width:100%;height:100%;object-fit:cover}
.focus .copy{border-radius:var(--r-door);background:var(--leaf-tint);padding:40px;display:flex;flex-direction:column}
.focus .copy p{color:#33464A;margin-top:14px;max-width:44ch}
.focus .copy .more{align-self:flex-start;margin-top:18px}
.exercise{margin-top:auto;background:var(--white);border-radius:var(--r-card);padding:22px 24px;display:flex;gap:18px;align-items:center}
.exercise .badge{width:54px;height:54px;border-radius:50%;background:var(--leaf);display:grid;place-items:center;flex:none}
.exercise small{display:block;color:var(--leaf-deep);font-weight:500;font-size:14px}
.exercise b{font-weight:500}

/* Team */
.teamintro{display:grid;grid-template-columns:7fr 5fr;gap:20px;margin-bottom:20px}
.teamintro figure{border-radius:var(--r-door);overflow:hidden;height:360px}
.teamintro figure img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.teamintro .copy{background:var(--white);border-radius:var(--r-door);padding:36px;display:flex;flex-direction:column}
.teamintro .copy p{color:var(--muted);margin-top:14px}
.teamintro .copy .more{margin-top:auto;align-self:flex-start}
.team{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.member{flex:0 0 180px;scroll-snap-align:start}
.member .pic{aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;background:var(--mist)}
.member .pic img{width:100%;height:100%;object-fit:cover}
.member .pic.none{display:grid;place-items:center;color:var(--muted);font-size:14px;background:repeating-linear-gradient(135deg,var(--mist) 0 10px,#E8E9EA 10px 20px)}
.member b{display:block;font-weight:500;margin-top:12px}
.member span{font-size:14.5px;color:var(--muted);line-height:1.4;display:block}
.trust{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px 34px;align-items:center;padding:24px 28px;background:var(--white);border-radius:var(--r-card)}
.trust .lbl{font-weight:500}
.trust span{color:var(--muted)}

/* Ratgeber */
.guides{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}
.guide{background:var(--white);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;gap:10px}
.guide.big{grid-row:span 2;background:var(--ink);color:var(--white);padding:36px}
.guide.big .rub{color:var(--leaf)}
.guide .rub{font-size:14px;font-weight:500;color:var(--leaf-deep)}
.guide h4{font-weight:500;font-size:21px;line-height:1.25;letter-spacing:-.01em}
.guide.big h4{font-size:clamp(26px,2.6vw,34px);line-height:1.15;max-width:18ch}
.guide p{color:var(--muted);font-size:15.5px}
.guide.big p{color:var(--on-ink);max-width:42ch}
.guide.big .btn{margin-top:auto;align-self:flex-start}
.guides.three{grid-template-columns:repeat(3,1fr)}

/* Standorte */
.places{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.place{background:var(--white);border-radius:var(--r-card);padding:30px;display:grid;gap:14px}
.place h4{font-weight:500;font-size:24px;letter-spacing:-.01em}
.place address{font-style:normal;color:var(--muted)}
.place p.ph{justify-self:start;color:var(--muted)}
.place .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.place .btn{min-height:46px;padding:0 20px;font-size:15px}

/* ---------- Unterseite Hausbesuch */
.crumbs{font-size:14px;color:#2E4A12;display:flex;gap:8px;align-items:center;margin-bottom:22px}
.crumbs a{border-bottom:1px solid currentColor}
.pagehead{background:var(--leaf);padding:44px 0 64px}
.pagehead .grid{display:grid;grid-template-columns:6fr 5fr;gap:48px;align-items:center}
.pagehead h1{font-weight:500;font-size:clamp(34px,4vw,54px);line-height:1.06;letter-spacing:-.025em}
.pagehead .lead{color:#22370C;margin-top:18px;max-width:42ch;font-size:18px}
.pagehead .light{background:rgba(255,255,255,.62);margin-top:26px;max-width:520px}
.pagehead .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.pagehead figure{border-radius:var(--r-door);overflow:hidden;height:440px;position:relative}
.pagehead figure img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.pagehead figcaption{position:absolute;left:16px;bottom:16px;background:rgba(1,29,34,.72);color:var(--white);font-size:13.5px;padding:6px 12px;border-radius:var(--r-chip)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s;list-style:none}
.step{background:var(--white);border-radius:var(--r-card);padding:26px 24px;counter-increment:s;position:relative}
.step::before{content:counter(s);width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-items:center;font-weight:500;margin-bottom:16px}
.step b{font-weight:500;display:block;margin-bottom:6px}
.step p{color:var(--muted);font-size:15.5px}
.step .hint{display:block;margin-top:12px;font-size:14px;color:var(--leaf-deep);font-weight:500}

.area{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.area p{color:var(--muted);margin-top:14px;max-width:40ch}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:12px 18px;border-radius:var(--r-chip);background:var(--white);border:1px solid var(--mist);font-weight:400;display:inline-flex;align-items:center;gap:8px}
.chip.on{background:var(--leaf);border-color:var(--leaf);font-weight:500}
.chip svg{color:var(--leaf-deep)}
.chips + .chips{margin-top:28px}
.sublabel{font-weight:500;margin:30px 0 12px}

.faq{background:var(--white);border-radius:var(--r-card);overflow:hidden}
.faq details{border-top:1px solid var(--paper)}
.faq details:first-child{border-top:0}
.faq summary{list-style:none;cursor:pointer;padding:22px 24px;font-weight:500;display:flex;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23011D22' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 24px 22px;color:var(--muted);max-width:70ch}
.faq .ans a{color:var(--ink);border-bottom:2px solid var(--leaf)}

.kin{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;background:var(--ink);color:var(--white);border-radius:var(--r-door);padding:44px}
.kin p{color:var(--on-ink);margin-top:12px;max-width:52ch}
.kin .btns{display:flex;flex-direction:column;gap:12px;align-items:stretch}

/* ---------- Footer */
footer{margin-top:96px;background:var(--ink);color:var(--on-ink);padding:56px 0 120px;font-size:15.5px}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:28px}
footer b{color:var(--white);font-weight:500;display:block;margin-bottom:10px}
footer ul{list-style:none;display:grid;gap:6px}
footer a:hover{color:var(--white)}
footer .note{margin-top:40px;font-size:13.5px;color:#7F9396;max-width:90ch}

/* ---------- Rückruf-Sheet */
dialog{border:0;border-radius:var(--r-door);padding:0;width:min(520px,calc(100% - 24px));margin:auto;color:var(--ink);background:var(--white)}
dialog::backdrop{background:rgba(1,29,34,.55)}
.sheet{padding:30px}
.sheet h4{font-weight:500;font-size:24px;letter-spacing:-.01em}
.sheet p{color:var(--muted);margin:6px 0 20px;font-size:15.5px}
.field{display:grid;gap:6px;margin-bottom:14px;font-size:15px;font-weight:400}
.field input,.field select{font:inherit;font-weight:300;font-size:17px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--mist);background:var(--paper);color:var(--ink)}
.field input:focus,.field select:focus{outline:none;border-color:var(--ink);background:var(--white)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;margin:6px 0 20px}
.check input{width:22px;height:22px;accent-color:var(--ink);margin-top:2px}
.sheet .btns{display:flex;gap:10px;justify-content:space-between;align-items:center}
.sheet .btns .btn-line{border:0;padding:0 6px;text-decoration:underline;text-underline-offset:4px}
.done{display:none}
.sent .form{display:none}.sent .done{display:block}
@media (prefers-reduced-motion:no-preference){
  dialog[open]{animation:sheetUp .28s cubic-bezier(.2,.8,.2,1)}
  @keyframes sheetUp{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
}

/* Hinweis für noch nicht ausgearbeitete Unterseiten */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--white);padding:14px 20px;border-radius:16px;font-size:15px;max-width:min(560px,calc(100% - 32px));box-shadow:0 20px 40px -16px rgba(0,0,0,.5);display:none}
.toast.show{display:block}
.toast b{font-weight:500;color:var(--leaf)}

/* Tab-Leiste und Tür-Umschalter (nur schmal) */
.tabbar,.doorjump{display:none}

@media (max-width:1100px){
  nav.main .hide-md{display:none}
}
@media (max-width:980px){
  nav.main{display:none}
  .band .grid,.doors,.split,.focus,.guides,.guides.three,.places,.teamintro,.pagehead .grid,.area,.kin{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .guide.big{grid-row:auto}
  .focus .photo{min-height:300px}
  .band figure{height:300px}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .wrap{padding:0 16px}
  .statusbar .right{display:none}
  .statusbar .wrap{gap:14px;font-size:13px;overflow-x:auto;white-space:nowrap}
  .top .wrap{height:64px}
  .logo{width:150px;height:55px}.logo img{width:176px;height:176px;left:-14px;top:-56px}
  .top .actions .btn{display:none}
  .tel-ico{display:grid}
  .band{padding:30px 0 90px}
  .band .grid{gap:24px}
  .band figure{height:220px}
  .band .contact{display:none}
  .doors{margin-top:-62px}
  .door{padding:26px 22px 24px;min-height:0}
  .doorjump{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:22px;padding:4px;border-radius:var(--r-chip);background:rgba(255,255,255,.1)}
  .doorjump a{text-align:center;padding:11px 8px;border-radius:var(--r-chip);font-weight:500;font-size:15.5px}
  .doorjump a:first-child{background:var(--white);color:var(--ink)}
  .doorjump a:last-child{background:var(--leaf);color:var(--ink)}
  .head{flex-direction:column;align-items:start}
  section.block{padding-top:64px}
  .tags{flex-direction:column;align-items:end}
  .steps{grid-template-columns:1fr}
  .pagehead figure{height:240px}
  .kin{padding:28px}
  footer .cols{grid-template-columns:1fr}
  .toast{bottom:92px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--white);border-top:1px solid var(--mist);padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
  .tabbar a{display:grid;justify-items:center;gap:3px;font-size:12px;font-weight:400;color:var(--muted);padding:4px 0}
  .tabbar a.on{color:var(--ink);font-weight:500}
  .tabbar .pill{padding:4px 16px;border-radius:var(--r-chip)}
  .tabbar a.on .pill{background:var(--leaf)}
}