:root{
      --bg: #ffffff;
      --text: #0f172a;
      --muted: #64748b;
      --line: #e2e8f0;

      --brand: #0ea5a4;
      --brand-dark: #0b8d8c;

      --card: #ffffff;
      --shadow: 0 10px 30px rgba(2, 6, 23, .08);

      --container: 1160px;
      --radius: 18px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:var(--bg);
      line-height:1.5;
    }
    img{max-width:100%; height:auto; display:block}
    a{color:inherit; text-decoration:none}
    button{font:inherit}

    .container{
      width:min(100% - 32px, var(--container));
      margin-inline:auto;
    }

    .skip-link{
      position:absolute;
      left:-999px;
      top:8px;
      padding:10px 12px;
      border-radius:12px;
      background:#fff;
      box-shadow:var(--shadow);
      z-index:9999;
    }
    .skip-link:focus{left:16px}

    /* Topbar */
    .topbar{
      border-bottom:1px solid var(--line);
      font-size:14px;
      color:var(--muted);
      background:#fff;
    }
    .topbar__inner{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:16px;
      padding:10px 0;
      flex-wrap:nowrap;
    }
    .topbar__left{
      display:flex;
      gap:14px;
      align-items:center;
      flex-wrap:wrap;
      flex:1 1 auto;
      min-width:0;
    }
    .topbar__right{
      display:flex;
      gap:14px;
      align-items:center;
      flex-wrap:nowrap;
      margin-left:auto;
      flex:0 0 auto;
      white-space:nowrap;
    }
    .topbar__item{display:flex; align-items:center; gap:8px}
    /* Topbar icons slightly larger */
    .topbar .icon{width:22px; height:22px}
    .topbar .action-btn svg{width:22px; height:22px}
    .topbar .action-btn[aria-label="WhatsApp"]{border-color:var(--brand); box-shadow:0 10px 24px rgba(0,0,0,.14)}

    .icon{
      width: 20px; height:20px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:var(--brand);
    }
    
    .icon svg{width:100%; height:100%}
.social{
      display:flex;
      gap:10px;
      align-items:center;
    }

    .topbar__wa{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:28px;
      height:28px;
      flex:0 0 auto;
    }

    /* WhatsApp in der Topbar: bewusst etwas groesser als Facebook */
    .topbar .icon--whatsapp{
      width:28px;
      height:28px;
    }
    .topbar .icon--whatsapp svg{
      width:100%;
      height:100%;
      display:block;
    }

.pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border:1px solid var(--line);
      border-radius:999px;
      background:#fff;
    }

    /* Header */
    .header{position:sticky;
      top:0;
      z-index:1000;
      background:#fff;
      border-bottom:1px solid rgba(255,255,255,.10);}

    .header__inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:14px 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:180px;
    }
    .brand img{height:120px;
      width:auto;}


    /* Breadcrumb */
    .breadcrumb{
      background: #000;
      border-top:1px solid rgba(255,255,255,.10);
    }
    .breadcrumb__inner{
      padding:8px 0;
    }
    .breadcrumb__list{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:0;
      list-style:none;
      margin:0;
      padding:0;
      font-size:14px;
      color:rgba(255,255,255,.72);
    }
    .breadcrumb__list li{
      display:flex;
      align-items:center;
    }
    .breadcrumb__list li+li:before{
      content:"/";
      margin:0 10px;
      color:rgba(255,255,255,.35);
    }
    .breadcrumb__list a{
      color:rgba(255,255,255,.85);
      text-decoration:none;
    }
    .breadcrumb__list a:hover{
      text-decoration:underline;
    }
    .breadcrumb__list [aria-current="page"]{
      color:#fff;
      font-weight:600;
    }

    .nav-toggle{display:inline-flex;
      align-items:center;
      justify-content:center;
      width:42px;
      height:42px;
      border-radius:14px;
      background:transparent;
      color:#000;
      cursor:pointer;}

    .nav-toggle svg{width:20px; height:20px}

    nav[aria-label="Hauptnavigation"]{
      position:relative;
    }

    .nav{
      list-style:none;
      margin:0;
      padding:0;
      display:none;
      gap:6px;
    }
    .nav.is-open{display:grid}
    .nav > li{
      position:relative;
    }

    .nav-link,
    .nav-btn{width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid transparent;
      background:transparent;
      color:#fff;
      cursor:pointer;
      text-align:left;}

    .nav-link, .nav-btn{
      color: #000
    }


    .nav-link:hover,
    .nav-btn:hover{
      background:rgba(255,255,255,.08);
    }
    .nav-link:focus-visible,
    .nav-btn:focus-visible{
      outline:3px solid rgba(14,165,164,.25);
      outline-offset:2px;
    }
    .chev{
      width:18px; height:18px;
      opacity:.7;
      flex:0 0 auto;
      transform:translateY(1px);
    }

    .submenu{list-style:none;
      margin:0;
      padding:6px;
      border:1px solid rgba(255,255,255,.14);
      background:#000;
      border-radius:16px;
      box-shadow:var(--shadow);
      display:none;}

    .submenu a{display:block;
      padding:10px 12px;
      border-radius:12px;
      color:#fff;
      white-space:nowrap;}

    .submenu a:hover{background:rgba(255,255,255,.08)}

    .nav-item.is-open > .submenu{display:block}

    .header__actions{
      display:flex;
      gap:10px;
      align-items:center;
    }
    .action-btn{
      width:42px;
      height:42px;
      border-radius:14px;
      border:1px solid var(--line);
      background:#fff;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
    }
    .action-btn svg{width:20px; height:20px}

    /* Desktop nav */
    @media (min-width: 900px){
      .nav-toggle{display:none}
      .nav{
        display:flex !important;
        align-items:center;
      }
      .nav{
        gap:2px;
      }
      .nav-link, .nav-btn{
        width:auto;
        padding:10px 12px;
      }
      .submenu{
        position:absolute;
        top:calc(100% + 10px);
        left:0;
        min-width:220px;
        display:none;
      }
      .submenu::before{
        content:"";
        position:absolute;
        top:-10px;
        left:0;
        width:100%;
        height:10px;
      }

      .nav > li:hover > .submenu,
      .nav > li:focus-within > .submenu{
        display:block;
      }
      .nav-item.is-open > .submenu{display:block}
    }

    /* Hero Background + graues Overlay */
.hero {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url("../img/physiotherapie-neuenkirchen-am-brand.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


    .hero__inner{
      display:flex;
      align-items:center;
      padding:72px 0;
    }
    .hero__content{
      max-width:720px;
    }
    .hero h1{
      margin:0 0 14px;
      font-size:clamp(28px, 3.2vw, 54px);
      line-height:1.08;
      letter-spacing:-.02em;
    }
    .hero p{
      margin:0 0 22px;
      color:rgba(255,255,255,.88);
      font-size:18px;
      max-width:58ch;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px 18px;
      border-radius:999px;
      border:1px solid transparent;
      cursor:pointer;
      font-weight:600;
    }
    .btn-primary{
      background:var(--brand);
      color:#fff;
    }
    .btn-primary:hover{background:var(--brand-dark)}
    .btn-secondary{
      background:transparent;
      color:#fff;
      border-color:rgba(255,255,255,.35);
    }
    .btn-secondary:hover{background:rgba(255,255,255,.08)}

    .hero__cta{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }

    /* Partners */
    .partners{
      border-bottom:1px solid var(--line);
      background:#fff;
    }
    .partners__inner{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:18px;
      align-items:center;
      padding:26px 0;
    }
    .partner{
      display:flex;
      justify-content:center;
      opacity:.65;
      filter:grayscale(1);
      transition:opacity .2s ease;
    }
    .partner:hover{opacity:.9}
    .partner img{height:34px; width:auto}
    @media (min-width: 700px){
      .partners__inner{grid-template-columns: repeat(5, minmax(0, 1fr))}
    }

    /* Sections */
    section{
      padding:72px 0;
    }
    .section-title{
      text-align:center;
      margin:0 0 12px;
      font-size:clamp(22px, 2.2vw, 34px);
      letter-spacing:-.02em;
    }
    .section-sub{
      text-align:center;
      color:var(--muted);
      margin:0 auto 34px;
      max-width:72ch;
    }
    .accent-line{
      width:64px;
      height:3px;
      background:var(--brand);
      border-radius:999px;
      margin:16px auto 0;
    }

    /* Services (2 columns with center line look) */
    .services{
      position:relative;
    }
    .services__grid{
      display:grid;
      grid-template-columns: 1fr;
      gap:16px;
      margin-top:34px;
    }
    .service{
      display:flex;
      gap:14px;
      align-items:flex-start;
      padding:18px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--card);
      box-shadow: 0 1px 0 rgba(2,6,23,.02);
    }
    .service__icon{
      width:54px;
      height:54px;
      border-radius:999px;
      border:1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:center;
      background:#fff;
      flex:0 0 auto;
    }
    .service__icon img{width:26px; height:26px}
    .service h3{margin:0 0 6px; font-size:16px}
    .service p{margin:0; color:var(--muted); font-size:14px}

    @media (min-width: 900px){
      .services__grid{
        grid-template-columns: 1fr 1fr;
        gap:18px 34px;
        position:relative;
      }
      .services__grid::before{
        content:"";
        position:absolute;
        left:50%;
        top:0;
        bottom:0;
        width:1px;
        background:var(--line);
        transform:translateX(-.5px);
        pointer-events:none;
      }
      .service{padding:20px}
    }

    /* Portfolio */
    .portfolio{
      background:#f8fafc;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }
    .tabs{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:8px;
      margin:0 0 26px;
      padding:0;
      list-style:none;
    }
    .tab{
      padding:10px 12px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--text);
      cursor:pointer;
      font-weight:600;
      font-size:14px;
    }
    .tab[aria-selected="true"]{
      border-color:rgba(14,165,164,.35);
      box-shadow:0 0 0 4px rgba(14,165,164,.12);
    }

    .gallery{
      display:grid;
      grid-template-columns: 1fr;
      gap:16px;
    }
    .tile{
      border-radius:var(--radius);
      overflow:hidden;
      border:1px solid var(--line);
      background:#fff;
      box-shadow:var(--shadow);
      position:relative;
      min-height:220px;
    }
    .tile img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .tile::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, transparent, rgba(2,6,23,.18));
      opacity:0;
      transition:opacity .2s ease;
    }
    .tile:hover::after{opacity:1}

    @media (min-width: 800px){
      .gallery{
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 220px;
      }
      .tile.wide{grid-column: span 2}
      .tile.tall{
        grid-row: span 2;
        grid-column: span 1;
      }
    }

    /* Testimonials */
    .testimonials__track{
      display:grid;
      grid-auto-flow:column;
      grid-auto-columns: min(100%, 360px);
      gap:16px;
      overflow:auto;
      padding:6px 6px 18px;
      scroll-snap-type:x mandatory;
      scrollbar-width:thin;
    }
    .t-card{
      scroll-snap-align:start;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#fff;
      box-shadow:var(--shadow);
      padding:22px;
      min-height:220px;
    }
    .t-card p{
      margin:0 0 18px;
      color:var(--muted);
      font-size:15px;
    }
    .t-meta{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .t-meta img{
      width:54px; height:54px;
      border-radius:999px;
      border:1px solid var(--line);
      object-fit:cover;
      background:#fff;
    }
    .t-name{margin:0; font-weight:800}
    .t-role{margin:2px 0 0; color:var(--muted); font-size:13px}

    /* FAQ */
    .faq{
      background:#fff;
      border-top:1px solid var(--line);
    }
    .faq__wrap{
      max-width: 860px;
      margin: 0 auto;
      display: grid;
      gap: 12px;
    }
    .faq-item{
      border:1px solid var(--line);
      border-radius: var(--radius);
      background:#fff;
      box-shadow: 0 1px 0 rgba(2,6,23,.02);
      overflow:hidden;
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding: 18px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      font-weight: 800;
    }
    .faq-item summary::marker{content:""}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:focus-visible{
      outline:3px solid rgba(14,165,164,.25);
      outline-offset:2px;
      border-radius: 14px;
    }
    .faq-item[open] summary{
      background:#f8fafc;
      border-bottom:1px solid var(--line);
    }
    .faq-chev{
      width:18px;
      height:18px;
      opacity:.75;
      flex:0 0 auto;
      transition: transform .2s ease;
    }
    .faq-item[open] .faq-chev{transform: rotate(180deg)}
    .faq-item__content{
      padding: 0 18px 18px;
      color: var(--muted);
      font-size: 15px;
    }
    .faq-item__content p{margin: 14px 0 0}
    .faq__hint{
      text-align:center;
      margin: 22px 0 0;
      color: var(--muted);
    }
    .faq__link{
      color: var(--brand);
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 3px;
    }
    .faq__link:hover{color: var(--brand-dark)}

    /* Footer */
    .footer{
      background:#0b1220;
      color:#e5e7eb;
    }
    .footer a{color:#e5e7eb}
    .footer__top{
      padding:64px 0 36px;
      border-bottom:1px solid rgba(148,163,184,.18);
    }
    .footer__grid{
      display:grid;
      grid-template-columns: 1fr;
      gap:26px;
    }
    .footer__brand img{height:100px; width:auto; filter:brightness(200%)}
    .footer__muted{color:rgba(226,232,240,.72); font-size:14px; margin:12px 0 0}
    .footer__list{
      margin:14px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
      color:rgba(226,232,240,.78);
      font-size:14px;
    }
    
    .footer__list--contact li{
      display:flex;
      gap:10px;
      align-items:flex-start;
    }
    .footer__list--contact .icon{
      margin-top:2px;
      flex:0 0 auto;
    }
    .footer__list--contact br{display:block}

    .footer__wa{
      display:flex;
      gap:10px;
      align-items:flex-start;
    }
    .footer__wa .icon{
      margin-top:2px;
      flex:0 0 auto;
    }

    /* WhatsApp im Footer: inline SVG, leicht groesser als die Standard-Icons */
    .footer .icon--whatsapp{
      width:26px;
      height:26px;
      margin-top:0;
    }
    .footer .icon--whatsapp svg{
      width:100%;
      height:100%;
      display:block;
    }
.footer h3{
      margin:0;
      font-size:14px;
      letter-spacing:.06em;
      text-transform:uppercase;
      color:#fff;
    }
    .footer__form{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:14px;
    }
    .input{
      flex:1 1 220px;
      min-width:200px;
      height:44px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.28);
      background:transparent;
      color:#fff;
      padding:0 14px;
      outline:none;
    }
    .input::placeholder{color:rgba(226,232,240,.55)}
    .footer__bottom{
      padding:18px 0;
      display:flex;
      gap:16px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
      color:rgba(226,232,240,.7);
      font-size:13px;
    }
    .footer__mini-nav{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:center;
    }

    /* Back to top */
    .to-top{
      position:fixed;
      right:18px;
      bottom:18px;
      width:48px;
      height:48px;
      border-radius:999px;
      border:1px solid rgba(226,232,240,.8);
      background:#fff;
      box-shadow:var(--shadow);
      display:none;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      z-index:1100;
    }
    .to-top.is-visible{display:flex}
    .to-top svg{width:18px; height:18px}

    @media (min-width: 900px){
      .footer__grid{grid-template-columns: 1.2fr 1fr 1fr}
    }

    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      *{transition:none !important}
    }

    /* Subpages */
    .hero--small{min-height:360px}
    .page__wrap{
      max-width: 920px;
      margin: 0 auto;
      display:grid;
      gap:18px;
    }
    .page-card{
      border:1px solid var(--line);
      border-radius: var(--radius);
      background:#fff;
      box-shadow:var(--shadow);
      padding:22px;
    }
    .page-card p{color:var(--muted)}
    .page-list{
      margin:14px 0 0;
      padding-left:18px;
      color:var(--muted);
    }
    .page-cta{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:14px;
    }

/* Google Maps (privacy consent) */
.maps-consent {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.02);
}

.maps-consent__placeholder {
  padding: 16px;
}

.maps-consent__text {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.maps-consent__frame iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
}

@media (min-width: 992px) {
  .maps-consent__frame iframe {
    height: 420px;
  }
}