/* ==========================================================================
   Quelle — Physiotherapie & Wellness — Stylesheet
   Palette: Ozeanblau #1B4B63 · Nebel #F2F7F9 · Himmelblau #7FB8CC
            Apricot #D9A15C · Nebelgrau #B9C9CF · Tinte #142430
   Typografie: durchgehend Sans-Serif (Plus Jakarta Sans + Inter) —
   bewusst kein Editorial-Serifen-Look, keine Mono-Akzentschrift.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --sage:      #1B4B63;
  --sage-70:   #2C6E88;
  --linen:     #F2F7F9;
  --linen-soft:#E4EEF2;
  --white:     #FFFFFF;
  --moss:      #7FB8CC;
  --moss-tint: rgba(127,184,204,0.16);
  --clay:      #D9A15C;
  --clay-tint: rgba(217,161,92,0.14);
  --stone:     #B9C9CF;
  --ink:       #142430;

  --font-display:'Plus Jakarta Sans', sans-serif;
  --font-body:  'Inter', sans-serif;

  --fs-hero: clamp(2.4rem, 4.6vw, 3.75rem);
  --fs-h2:   clamp(1.7rem, 3vw, 2.5rem);
  --fs-h3:   clamp(1.1rem, 1.7vw, 1.3rem);
  --fs-body: 1.03rem;
  --fs-small:0.875rem;

  --space-3xs: 0.375rem;
  --space-xs:  0.75rem;
  --space-sm:  1.25rem;
  --space-md:  2.25rem;
  --space-lg:  4rem;
  --space-xl:  6.5rem;

  --max-w: 1180px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-soft: 0 16px 40px -24px rgba(20,36,48,0.35);
  --shadow-tight: 0 8px 22px -14px rgba(20,36,48,0.3);
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::as{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

body{
  margin:0;
  background:var(--linen);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img, svg{ display:block; max-width:100%; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.1;
  margin:0 0 var(--space-sm);
  letter-spacing:-0.015em;
}

p{ margin:0 0 var(--space-sm); }

.container{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--space-md);
}

:focus-visible{
  outline:2px solid var(--clay);
  outline-offset:3px;
}

/* -------------------- eyebrow: pill badge, not a lined label -------------------- */
.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:0.78rem;
  letter-spacing:0.01em;
  color:var(--sage);
  background:var(--moss-tint);
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  padding:0.4rem 0.9rem;
  border-radius:var(--radius-pill);
  margin-bottom:var(--space-xs);
}

/* -------------------- buttons: full pill -------------------- */
.btn{
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.92rem;
  letter-spacing:0;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.9rem 1.7rem;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary{
  background:var(--clay);
  color:var(--ink);
  box-shadow:0 10px 24px -12px rgba(217,161,92,0.55);
}
.btn-primary:hover{ background:#B9843F; transform:translateY(-2px); }

.btn-ghost{
  background:var(--white);
  color:var(--sage);
  border-color:rgba(27,75,99,0.2);
}
.btn-ghost:hover{ border-color:var(--sage); transform:translateY(-2px); }

.btn-row{ display:flex; gap:var(--space-sm); flex-wrap:wrap; }

/* -------------------- header / nav -------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(242,247,249,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(27,75,99,0.12);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:var(--space-xs);
  padding-bottom:var(--space-xs);
}
.logo{
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:800;
  color:var(--sage);
  display:flex;
  align-items:center;
  gap:0.6rem;
}
.logo-mark{ width:26px; height:26px; flex-shrink:0; }

.nav-links{
  display:flex;
  gap:var(--space-md);
  list-style:none;
  margin:0; padding:0;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.92rem;
}
.nav-links a{
  position:relative;
  padding-bottom:4px;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--sage);
  border-radius:var(--radius-pill);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.2s ease;
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-links a[aria-current="page"]{ color:var(--sage); }

.nav-toggle{ display:none; }

/* -------------------- stat band (replaces the old thin-line divider) -------------------- */
.stat-band{
  background:var(--sage);
  color:var(--linen);
  border-radius:var(--radius-lg);
  margin:0 auto;
  max-width:var(--max-w);
}
.stat-band-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  gap:var(--space-md);
  padding:var(--space-md) var(--space-lg);
  text-align:center;
}
.stat-band .stat{ display:flex; flex-direction:column; gap:0.2rem; }
.stat-band .stat-num{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,3vw,2.2rem); }
.stat-band .stat-label{ font-size:0.85rem; color:rgba(242,247,249,0.75); }

/* -------------------- hero: asymmetric photo collage, not a full-bleed image -------------------- */
.hero-split{ padding:var(--space-lg) 0 var(--space-md); overflow:hidden; }
.hero-split-inner{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:var(--space-xl);
  align-items:center;
}
.hero-text h1{ font-size:var(--fs-hero); color:var(--ink); }
.hero-text h1 .accent{ color:var(--clay); }
.hero-text .lede{ font-size:1.08rem; color:var(--sage-70); max-width:44ch; margin-bottom:var(--space-md); }
.hero-text .eyebrow{ background:var(--moss-tint); color:var(--sage); }

.hero-facts{
  display:flex;
  gap:var(--space-lg);
  margin-top:var(--space-lg);
  padding-top:var(--space-md);
  border-top:1px solid rgba(27,75,99,0.14);
}
.hero-facts .fact{ display:flex; flex-direction:column; gap:0.15rem; }
.hero-facts strong{ font-family:var(--font-display); font-size:1.05rem; color:var(--sage); }
.hero-facts span{ font-size:0.82rem; color:var(--sage-70); }

.hero-collage{
  position:relative;
  height:520px;
}
.collage-photo{
  position:absolute;
  overflow:hidden;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
.collage-photo img{ width:100%; height:100%; object-fit:cover; }
.collage-photo-a{ top:0; right:0; width:74%; aspect-ratio:4/5; z-index:1; }
.collage-photo-b{
  bottom:0; left:0; width:50%; aspect-ratio:1/1; z-index:2;
  border:6px solid var(--linen);
}
.collage-badge{
  position:absolute;
  left:-20px; bottom:-20px;
  z-index:3;
  background:var(--white);
  border-radius:var(--radius);
  padding:0.9rem 1.2rem;
  box-shadow:var(--shadow-tight);
  text-align:left;
  max-width:170px;
}
.collage-badge strong{ display:block; font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--sage); }
.collage-badge span{ font-size:0.8rem; color:var(--sage-70); }

/* -------------------- sections -------------------- */
section{ padding:var(--space-lg) 0; }
.section-tight{ padding:var(--space-md) 0; }
.section-alt{ background:var(--linen-soft); }
.section-dark{ background:var(--sage); color:var(--linen); }
.section-dark .eyebrow{ background:rgba(242,247,249,0.14); color:var(--linen); }
.section-dark h2{ color:var(--linen); }

.section-head{ max-width:56ch; margin-bottom:var(--space-md); }

/* -------------------- feature photo -------------------- */
.feature-photo{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:var(--shadow-soft);
  transition:transform 0.4s ease;
}
.feature-photo.ratio-4-3{ aspect-ratio:4/3; }
.feature-photo.ratio-3-2{ aspect-ratio:3/2; }
.feature-photo.ratio-16-9{ aspect-ratio:16/9; }
.feature-photo.ratio-1-1{ aspect-ratio:1/1; }
.feature-photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.6s ease;
}
.feature-photo:hover img{ transform:scale(1.04); }
.feature-tag{
  position:absolute;
  left:var(--space-sm); bottom:var(--space-sm);
  background:var(--white);
  color:var(--sage);
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.78rem;
  padding:0.55rem 1rem;
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-tight);
}

/* -------------------- grids / cards -------------------- */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-md);
}
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-lg);
  align-items:center;
}

.card{
  background:var(--white);
  border:1px solid rgba(27,75,99,0.1);
  border-radius:var(--radius);
  padding:var(--space-md);
  box-shadow:var(--shadow-tight);
}
.card .icon-badge{
  width:52px; height:52px;
  border-radius:var(--radius-sm);
  background:var(--clay-tint);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--space-sm);
}
.card .icon{ width:26px; height:26px; color:var(--clay); }
.card h3{ font-size:var(--fs-h3); color:var(--sage); }
.card p{ color:var(--sage-70); margin-bottom:0; font-size:0.95rem; }

/* -------------------- quote -------------------- */
.quote{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.25rem, 2.2vw, 1.7rem);
  color:var(--sage);
  max-width:44ch;
  margin:0 auto var(--space-sm);
  text-align:center;
  letter-spacing:-0.01em;
}
.quote-cite{
  display:block;
  text-align:center;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.85rem;
  color:var(--sage-70);
}

/* -------------------- CTA band -------------------- */
.cta-band{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md);
  flex-wrap:wrap;
}
.cta-band h2{ margin-bottom:0; }

/* -------------------- footer -------------------- */
.site-footer{
  background:var(--sage);
  color:var(--linen);
  padding:var(--space-lg) 0 var(--space-md);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:var(--space-md);
  padding-bottom:var(--space-md);
  border-bottom:1px solid rgba(242,247,249,0.18);
}
.site-footer h4{
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.85rem;
  color:var(--moss);
  margin-bottom:var(--space-sm);
}
.site-footer a{ opacity:0.9; }
.site-footer a:hover{ opacity:1; text-decoration:underline; }
.footer-logo{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.3rem;
  margin-bottom:var(--space-xs);
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-xs);
  padding-top:var(--space-sm);
  font-size:0.82rem;
  opacity:0.75;
}
address{ font-style:normal; line-height:1.7; }

/* -------------------- page hero (inner pages) -------------------- */
.page-hero{
  padding:var(--space-lg) 0 var(--space-md);
  background:var(--linen-soft);
}
.page-hero h1{ color:var(--sage); font-size:clamp(2rem, 4vw, 2.9rem); }
.page-hero .lede{ max-width:54ch; color:var(--sage-70); }

/* -------------------- leistungen: service cards, not a menu list -------------------- */
.menu-category{ margin-bottom:var(--space-lg); }
.menu-category h2{ color:var(--sage); }
.menu-category .cat-note{ color:var(--sage-70); font-size:0.9rem; margin-bottom:var(--space-md); }

.service-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-sm);
}
.service-card{
  background:var(--white);
  border:1px solid rgba(27,75,99,0.1);
  border-radius:var(--radius);
  padding:var(--space-sm) var(--space-md);
  box-shadow:var(--shadow-tight);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.service-card-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  color:var(--ink);
  margin-bottom:0.3rem;
}
.service-card-desc{ font-size:0.9rem; color:var(--sage-70); margin-bottom:var(--space-xs); }
.service-card-price{
  display:inline-flex;
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.85rem;
  color:var(--clay);
  background:var(--clay-tint);
  padding:0.3rem 0.8rem;
  border-radius:var(--radius-pill);
}

/* -------------------- team -------------------- */
.team-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-md);
}
.team-card{
  text-align:left;
  background:var(--white);
  border:1px solid rgba(27,75,99,0.1);
  border-radius:var(--radius);
  padding:var(--space-md);
  box-shadow:var(--shadow-tight);
}
.team-avatar{
  width:64px; height:64px;
  border-radius:var(--radius-sm);
  margin-bottom:var(--space-sm);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.3rem;
  color:var(--linen);
}
.team-card h3{ font-size:1.08rem; margin-bottom:0.15rem; color:var(--sage); }
.team-role{ font-size:0.82rem; color:var(--sage-70); font-weight:600; }

/* -------------------- values list -------------------- */
.values-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); }
.values-list li{
  display:flex; gap:var(--space-sm);
  background:var(--white);
  border-radius:var(--radius);
  padding:var(--space-md);
  box-shadow:var(--shadow-tight);
}
.values-list .num{
  font-family:var(--font-display);
  font-weight:800;
  color:var(--clay);
  font-size:1.1rem;
}

/* -------------------- contact page: light card, not dark -------------------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-xl);
  align-items:start;
}
.form-field{ margin-bottom:var(--space-sm); display:flex; flex-direction:column; gap:0.4rem; }
.form-field label{
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.8rem;
  color:var(--sage);
}
.form-field input,
.form-field textarea{
  font-family:var(--font-body);
  font-size:1rem;
  padding:0.8rem 1rem;
  border:1px solid var(--stone);
  border-radius:var(--radius-sm);
  background:var(--linen-soft);
  color:var(--ink);
}
.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--clay);
  background:var(--white);
}
.form-note{
  font-size:0.82rem;
  color:var(--sage-70);
  margin-top:var(--space-xs);
}
.hours-table{ width:100%; border-collapse:collapse; font-size:0.92rem; }
.hours-table td{ padding:0.6rem 0; border-bottom:1px solid rgba(27,75,99,0.12); }
.hours-table td:last-child{ text-align:right; font-weight:700; color:var(--clay); }

.map-sketch{ border-radius:var(--radius); background:var(--linen-soft); box-shadow:var(--shadow-tight); }

/* -------------------- scroll reveal -------------------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}

/* -------------------- hover lift -------------------- */
.card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-soft);
}

/* -------------------- image gallery -------------------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--space-sm);
}
.gallery-item{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:var(--shadow-tight);
  background:var(--linen-soft);
  cursor:default;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.gallery-item:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-soft);
}
.gallery-item svg, .gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 0.5s ease;
}
.gallery-item:hover svg, .gallery-item:hover img{ transform:scale(1.08); }
.gallery-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:var(--space-xs) var(--space-sm);
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.78rem;
  color:var(--linen);
  background:linear-gradient(to top, rgba(20,36,48,0.72), transparent);
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.gallery-item:hover .gallery-caption{ opacity:1; transform:none; }

/* -------------------- appointment card -------------------- */
.reserve-card{
  background:var(--white);
  color:var(--ink);
  border-radius:var(--radius-lg);
  padding:var(--space-lg) var(--space-md);
  max-width:560px;
  margin:0 auto;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(27,75,99,0.08);
}
.reserve-card .form-field label{ color:var(--sage); }
.reserve-card .form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-sm);
}
.reserve-card input,
.reserve-card select,
.reserve-card textarea{
  background:var(--linen-soft);
  border:1px solid var(--stone);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  padding:0.8rem 1rem;
  border-radius:var(--radius-sm);
  width:100%;
}
.reserve-card input::placeholder{ color:rgba(20,36,48,0.4); }
.reserve-card input:focus,
.reserve-card select:focus,
.reserve-card textarea:focus{
  outline:none;
  border-color:var(--clay);
  background:var(--white);
}
.reserve-card select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5 8l5 5 5-5' stroke='%233F5A46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 0.9rem center;
  padding-right:2.4rem;
}
.reserve-card .btn-primary{
  width:100%;
  justify-content:center;
  padding:1rem;
  font-size:0.95rem;
  margin-top:var(--space-xs);
}
.reserve-card .form-note{ text-align:center; }

/* -------------------- responsive -------------------- */
@media (max-width: 880px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; gap:var(--space-md); }
  .team-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .service-grid{ grid-template-columns:1fr; }
  .values-list{ grid-template-columns:1fr; }

  .hero-split-inner{ grid-template-columns:1fr; }
  .hero-collage{ height:380px; margin-top:var(--space-md); }
  .hero-facts{ gap:var(--space-md); }
  .stat-band-inner{ padding:var(--space-md); gap:var(--space-sm); }
}

@media (max-width: 640px){
  .nav-links{
    position:fixed; inset:64px 0 0 0;
    background:var(--linen);
    flex-direction:column;
    padding:var(--space-md);
    gap:var(--space-md);
    font-size:1.1rem;
    transform:translateX(100%);
    transition:transform 0.25s ease;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{
    display:flex;
    align-items:center; justify-content:center;
    width:38px; height:38px;
    background:transparent;
    border:1px solid var(--sage);
    border-radius:var(--radius-sm);
    cursor:pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:""; display:block; width:16px; height:1px; background:var(--sage); position:relative;
  }
  .nav-toggle span::before{ top:-5px; }
  .nav-toggle span::after{ top:4px; }
  .team-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .cta-band{ flex-direction:column; align-items:flex-start; }
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .reserve-card .form-row{ grid-template-columns:1fr; }
  .reserve-card{ padding:var(--space-md) var(--space-sm); }
  .collage-badge{ display:none; }
  .hero-facts{ flex-direction:column; gap:var(--space-sm); }
}