/* =========================================================
   Zahnmedizin Rupperswil — stylesheet
   Palette: bright, crisp neutrals + vivid teal, echoing the logo's
   blue / lime / pink rainbow for accents and the intro animation.
   ========================================================= */

:root{
  /* --- core palette (bright, crisp) --- */
  --ink:        #24261F;   /* crisp near-black for sharp contrast */
  --ink-soft:   #333333;   /* graphite — 12.6:1 on white, WCAG AAA for body and small text */
  --sand:       #FFFFFF;   /* clean white page background */
  --sand-deep:  #F9FAF9;   /* near-white secondary section background */
  --card:       #FFFFFF;
  --line:       #EAEDEB;

  --teal:       #12909D;   /* vivid, crisp teal (brighter than before) */
  --teal-deep:  #0B6E79;
  --sage:       #56B27E;   /* fresh, brighter green */
  --sage-deep:  #2FA26A;   /* WhatsApp / positive actions */
  --gold:       #E8A93A;   /* warm gold for star ratings */
  --swiss:      #D63A31;   /* crisp Swiss-cross red */

  /* --- logo rainbow accents (precisely sampled from the real logo artwork) --- */
  --logo-blue:  #169BD4;
  --logo-lime:  #B6CC00;
  --logo-pink:  #F7838E;

  --radius: 20px;
  --wrap: 1240px;
  --shadow:    0 18px 40px -22px rgba(36,38,31,.30);
  --shadow-sm: 0 8px 18px -12px rgba(36,38,31,.34);

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Inter", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---------------------------------------------------------
     Type scale. 1rem = 16px. Hard floor: nothing below .8125rem,
     and that size is reserved for uppercase micro-labels only.
     Every element that carries actual reading text sits at 1rem+.
     --------------------------------------------------------- */
  --fs-2xs:  .8125rem;   /* 13px — uppercase labels, chips, badges */
  --fs-xs:   .875rem;    /* 14px — captions, meta */
  --fs-sm:   .9375rem;   /* 15px — secondary interface text */
  --fs-base: 1rem;       /* 16px — body copy */
  --fs-md:   1.0625rem;  /* 17px */
  --fs-lg:   1.125rem;   /* 18px — lead paragraphs, section intros */
  --fs-xl:   1.25rem;    /* 20px */

  --lh-body:    1.6;     /* body */
  --lh-heading: 1.15;    /* headings */

  --measure: 65ch;       /* hard line-length limit for reading text */
}

/* ---------- reset & base ---------- */
*{ box-sizing:border-box }
html{
  scroll-behavior:smooth;
  font-size:100%;                 /* 16px, and respects the reader's own browser setting */
  -webkit-text-size-adjust:100%;  /* iOS Safari must not re-scale the text */
  text-size-adjust:100%;
}
body{
  margin:0; color:var(--ink); background:var(--sand);
  font-family:var(--sans);
  font-size:var(--fs-base);       /* 16px base */
  line-height:var(--lh-body);     /* 1.6 */
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }

/* ---------------------------------------------------------
   Paragraph rules, enforced globally. Nothing further down is
   allowed to zero out the bottom margin of body copy.
   --------------------------------------------------------- */
p{
  margin:0 0 1.5rem;
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  max-width:var(--measure);
  color:var(--ink-soft);
}
p:last-child{ margin-bottom:0 }   /* no dead space at the foot of a card */
li{ line-height:var(--lh-body) }
strong,b{ color:var(--ink) }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:var(--lh-heading); margin:0; letter-spacing:-.015em }
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] body{ font-family:"Noto Sans Arabic","Inter",sans-serif }
a{ color:inherit }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px }
section{ padding:84px 0 }
.eyebrow{
  font:600 var(--fs-2xs)/1.2 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:""; width:20px; height:2px; background:var(--sage) }
.img{ position:relative; overflow:hidden; background:var(--sand-deep) }
.img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* ---------- accessible focus (all interactive elements) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--teal);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:600 var(--fs-base)/1.2 var(--sans); padding:14px 26px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn svg{ width:18px; height:18px; flex:none }
.btn:hover{ transform:translateY(-2px) }
.btn-call{ background:var(--teal); color:#fff; box-shadow:var(--shadow-sm) }
.btn-call:hover{ background:var(--teal-deep) }
.btn-wa{ background:var(--sage-deep); color:#fff; box-shadow:var(--shadow-sm) }
.btn-wa:hover{ background:#5c7a61 }
.btn-ghost{ background:transparent; color:var(--teal); border-color:var(--line) }
.btn-ghost:hover{ border-color:var(--teal); background:#fff }
.btn-light{ background:#fff; color:var(--teal) }

/* ---------- shared bits ---------- */
.gword{ font-weight:700; font-size:var(--fs-xs) }
.gword b:nth-child(1){ color:#8AB4E8 } .gword b:nth-child(2){ color:#D98A80 }
.gword b:nth-child(3){ color:var(--gold) } .gword b:nth-child(4){ color:#8AB4E8 }
.gword b:nth-child(5){ color:#8FAE94 } .gword b:nth-child(6){ color:#D98A80 }
.cross{ width:16px; height:16px; border-radius:4px; background:var(--swiss); display:grid; place-items:center; flex:none }
.cross::before{
  content:""; width:8px; height:8px; background:#fff;
  clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%);
}

/* ---------- header / nav ---------- */
header{
  position:sticky; top:0; z-index:60;
  background:rgba(247,243,236,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; gap:16px; height:78px }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none }
.brand img{ height:52px; width:auto }
.brand .wm{ font-family:var(--serif); font-weight:600; font-size:1.1875rem; color:var(--ink); letter-spacing:-.02em; line-height:1 }
.brand .wm small{
  display:block; font-family:var(--sans); font-weight:600; font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--teal); margin-top:3px;
}
.nav-links{ display:flex; gap:20px; margin-left:auto; list-style:none; padding:0; font-size:var(--fs-sm); font-weight:500 }
.nav-links a{ text-decoration:none; color:var(--ink-soft); padding:6px 0; position:relative }
.nav-links a:hover{ color:var(--teal) }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--sage); transition:width .2s }
.nav-links a:hover::after{ width:100% }
.nav-tools{ display:flex; align-items:center; gap:10px }

.langsel{ position:relative }
.langsel>button{
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:#fff;
  border-radius:999px; padding:9px 13px; font:600 var(--fs-sm) var(--sans); color:var(--ink); cursor:pointer;
}
.langsel>button svg{ width:16px; height:16px; color:var(--teal) }
.langmenu{
  position:absolute; right:0; top:calc(100% + 8px); background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); padding:6px; display:none; min-width:190px; z-index:80;
}
.langmenu.open{ display:block }
.langmenu button{
  display:flex; width:100%; align-items:center; gap:10px; border:0; background:transparent;
  padding:11px 12px; border-radius:10px; font:500 var(--fs-base) var(--sans); color:var(--ink); cursor:pointer; text-align:left;
}
.langmenu button:hover{ background:var(--sand) }
.langmenu button b{ font-weight:700; color:var(--teal); width:28px; font-size:var(--fs-2xs) }
.langmenu button[aria-current="true"]{ background:var(--sand) }

.burger{ display:none; border:1px solid var(--line); background:#fff; border-radius:10px; width:44px; height:40px; cursor:pointer; padding:0 }
.burger span{ display:block; width:18px; height:2px; background:var(--ink); margin:3px auto; border-radius:2px }

/* ---------- mobile drawer (slide-in with close button) ---------- */
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(86vw,360px); z-index:90;
  background:var(--card); box-shadow:var(--shadow); padding:22px 22px 28px;
  transform:translateX(100%); transition:transform .32s cubic-bezier(.3,.9,.4,1);
  overflow:auto;
}
[dir="rtl"] .drawer{ right:auto; left:0; transform:translateX(-100%) }
.drawer.open{ transform:translateX(0) }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px }
.drawer-head span{ font-family:var(--serif); font-size:1.1rem; line-height:var(--lh-heading); color:var(--ink) }
.drawer-close{
  border:1px solid var(--line); background:#fff; border-radius:10px; width:38px; height:38px;
  display:grid; place-items:center; cursor:pointer;
}
.drawer-close svg{ width:18px; height:18px; color:var(--ink) }
.drawer a{
  display:block; font-family:var(--serif); font-size:1.3rem; padding:13px 0;
  border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink);
}
.drawer-scrim{
  position:fixed; inset:0; z-index:85; background:rgba(36,38,31,.4);
  opacity:0; pointer-events:none; transition:opacity .28s ease;
}
.drawer-scrim.open{ opacity:1; pointer-events:auto }

/* ---------- legal modal (Impressum / Datenschutz) ---------- */
.foot-link-btn{
  display:block; background:transparent; border:0; padding:6px 0; margin:0; font:inherit; font-size:var(--fs-sm);
  color:#D8CFC0; text-decoration:none; cursor:pointer; text-align:left;
}
.foot-link-btn:hover{ color:#fff }
.legal-scrim{
  position:fixed; inset:0; z-index:95; background:rgba(24,26,20,.55);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.legal-scrim.open{ opacity:1; pointer-events:auto }
.legal-modal{
  position:fixed; inset:0; z-index:96; display:flex; align-items:center; justify-content:center; padding:24px;
}
.legal-modal[hidden]{ display:none }
.legal-box{
  background:var(--card); border-radius:20px; max-width:720px; width:100%; max-height:84vh;
  display:flex; flex-direction:column; box-shadow:var(--shadow); overflow:hidden;
}
.legal-head{
  display:flex; align-items:center; justify-content:space-between; padding:20px 24px;
  border-bottom:1px solid var(--line); font-family:var(--serif); font-size:1.2rem; line-height:var(--lh-heading); color:var(--ink); flex:none;
}
.legal-close{
  border:1px solid var(--line); background:#fff; border-radius:10px; width:36px; height:36px;
  display:grid; place-items:center; cursor:pointer; color:var(--ink); flex:none;
}
.legal-body{ padding:8px 24px 28px; overflow-y:auto; font-size:var(--fs-base); line-height:var(--lh-body); color:var(--ink-soft) }
.legal-body h3{ font-family:var(--serif); font-size:1.15rem; line-height:var(--lh-heading); color:var(--ink); margin:2rem 0 .75rem }
.legal-body h3:first-child{ margin-top:16px }
.legal-body p{ margin:0 0 1.5rem; max-width:var(--measure) }
.legal-body strong{ color:var(--ink) }
.legal-body ul{ margin:0 0 1.5rem; padding-left:22px; max-width:var(--measure) }
.legal-body li{ margin-bottom:.5rem }
.legal-body a{ color:var(--teal) }
.legal-body hr{ border:0; border-top:1px solid var(--line); margin:26px 0 10px }
.legal-note{
  background:var(--sand-deep); border:1px dashed var(--line); border-radius:10px; padding:10px 14px;
  font-size:var(--fs-sm); line-height:1.55; font-style:italic;
}
.legal-updated{ font-size:var(--fs-xs); color:var(--ink-soft); margin-top:1.5rem }
@media(max-width:560px){ .legal-box{ max-height:90vh; border-radius:16px } .legal-head{ padding:16px 18px } .legal-body{ padding:6px 18px 22px } }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding:52px 0 0; background:var(--sand) }
.hero-watermark{
  position:absolute; z-index:0; top:-60px; right:-90px; width:520px; height:auto;
  pointer-events:none; opacity:.16;
}
.hero-watermark img{ position:absolute; top:0; left:0; width:100%; height:auto }
.hero-watermark .wm-arcs{ animation:wmFloat 10s ease-in-out infinite }
.hero-watermark .wm-tooth{ animation:wmFloat 10s ease-in-out infinite; animation-delay:-3s }
@keyframes wmFloat{ 0%,100%{ transform:translateY(0) rotate(0deg) } 50%{ transform:translateY(16px) rotate(-1.5deg) } }
@media(max-width:640px){ .hero-watermark{ width:340px; top:-30px; right:-60px; opacity:.12 } }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding-bottom:60px; position:relative; z-index:1 }
.hero h1{ font-size:clamp(2.3rem,4.6vw,3.7rem); color:var(--logo-blue) }
.hero h1 em{ font-style:normal }
.hero p.lead{ font-size:var(--fs-lg); line-height:var(--lh-body); color:var(--ink-soft); max-width:var(--measure); margin:1.25rem 0 0 }
.badge-swiss{
  display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line);
  padding:9px 16px 9px 9px; border-radius:999px; font-weight:600; font-size:var(--fs-sm); box-shadow:var(--shadow-sm); margin-bottom:20px;
}
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px }
.hero-note{ margin-top:16px; font-size:var(--fs-sm); line-height:1.5; color:var(--ink-soft); display:flex; align-items:center; gap:8px }
.hero-note b, .hero-note strong{ color:var(--swiss) }

/* ---------- hero benefits list: custom checkmark bullets ---------- */
.hero-benefits{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px }
.hero-benefits li{ position:relative; padding-left:32px; font-size:var(--fs-base); line-height:var(--lh-body); max-width:var(--measure); color:var(--ink-soft) }
.hero-benefits li strong{ color:var(--ink); font-weight:600 }
.hero-benefits li::before{
  content:"";
  position:absolute; left:0; top:3px; width:20px; height:20px;
  background-color:var(--teal);
  -webkit-mask-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat;
  mask-size:contain; -webkit-mask-size:contain;
}

/* ---------- mobile spacing for the hero benefits list ---------- */
@media(max-width:768px){
  .hero-benefits{ margin-top:18px; gap:10px; padding:0 2px }
  .hero-benefits li{ font-size:var(--fs-base); padding-left:28px; line-height:var(--lh-body) }
  .hero-benefits li::before{ width:18px; height:18px; top:2px }
}

.btn-maps{
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background: var(--teal);
  color: #fff;
  font-size:var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: background .2s;
}
.btn-maps:hover{ background: var(--teal-deep) }

@media (max-width:600px){
  .btn-maps{
    display: block;
    width: fit-content;
    min-height: 44px;
    line-height: 28px;
    padding: 8px 20px;
    margin-top: 12px;
  }
}
.hero-quick{ display:flex; gap:28px; flex-wrap:wrap; margin-top:24px; padding-top:22px; border-top:1px solid var(--line) }
.hero-quick div{ font-size:var(--fs-sm); line-height:1.5; color:var(--ink-soft) }
.hero-quick b{ display:block; font-family:var(--serif); font-size:1.6rem; line-height:var(--lh-heading); color:var(--ink); font-weight:600 }

.hero-media{ position:relative }
.hero-media .main{ aspect-ratio:4/4.2; border-radius:24px; box-shadow:var(--shadow); border:6px solid #fff }

.glass-route{
  position:absolute; left:16px; right:16px; bottom:16px; background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.6); border-radius:18px; padding:16px 18px; box-shadow:var(--shadow-sm);
}
.glass-route .rt{ display:flex; align-items:center }
.glass-route .dot{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff; flex:none }
.glass-route .dot.a{ background:var(--sage) } .glass-route .dot.b{ background:var(--teal) }
.glass-route .seg{ flex:1; height:3px; background:repeating-linear-gradient(90deg,var(--sage) 0 7px,transparent 7px 13px); position:relative }

/* Zentrale Plakette "1 Min." – groesser und auffaelliger */
.glass-route .seg .w{
  position:absolute; top:-28px; left:50%; transform:translateX(-50%); background:var(--teal); color:#fff;
  font-size:var(--fs-sm); font-weight:800; padding:7px 16px; border-radius:999px; white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}

/* Hauptbezeichnungen (Bahnhof Rupperswil / Dorfstrasse 9) – ausdrucksstaerker */
.glass-route b{
  font-size:var(--fs-base);
  font-weight:800;
  line-height:1.3;
  display:block;
  color:var(--ink);
}

/* Nebenbeschriftungen (Start / unsere Praxis) – etwas groesser und kontrastreicher */
.glass-route small{
  font-size:var(--fs-xs);
  font-weight:500;
  color:var(--ink-soft);
  display:block;
  margin-top:2px;
}

.wave-div{ display:block; width:100%; line-height:0; margin-top:-2px }
.wave-div svg{ width:100%; height:auto; display:block }

/* ---------- greetings marquee ---------- */
.marquee{
  background:repeating-linear-gradient(90deg,
    var(--logo-blue) 0 8%, var(--logo-lime) 8% 16%, var(--logo-pink) 16% 24%,
    var(--logo-blue) 24% 32%, var(--logo-lime) 32% 40%, var(--logo-pink) 40% 48%,
    var(--logo-blue) 48% 56%, var(--logo-lime) 56% 64%, var(--logo-pink) 64% 72%,
    var(--logo-blue) 72% 80%, var(--logo-lime) 80% 88%, var(--logo-pink) 88% 96%,
    var(--logo-blue) 96% 100%);
  background-size:250% 100%; animation:ribbon 16s linear infinite;
  color:#16221A; overflow:hidden; white-space:nowrap; padding:11px 0;
  font-family:var(--serif); font-size:1.1rem; font-weight:700;
}
.marquee .track{ display:inline-block; animation:scroll 30s linear infinite }
.marquee .track span{ padding:0 26px; opacity:.95; text-shadow:0 1px 1px rgba(255,255,255,.35) }
.marquee .track span::after{ content:"·"; margin-left:26px; opacity:.6 }
@keyframes scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@keyframes ribbon{ 0%{ background-position:0% 50% } 100%{ background-position:300% 50% } }

/* ---------- trust strip ---------- */
.trust{ background:var(--teal-deep); color:#fff; padding:28px 0 }  /* deeper teal: white text reaches 5.96:1 */
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; text-align:center }
.trust-grid .t b{ font-family:var(--serif); font-size:1.05rem; line-height:var(--lh-heading); display:block; font-weight:600 }
.trust-grid .t span{ font-size:var(--fs-sm); line-height:1.5; color:#EAF5F2 }
.trust-grid .t .ic{
  width:44px; height:44px; margin:0 auto 12px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff;
}
.trust-grid .t .ic svg{ width:22px; height:22px }
.trust-grid .t:nth-child(1) .ic{ background:var(--logo-blue) }
.trust-grid .t:nth-child(2) .ic{ background:var(--logo-lime) }
.trust-grid .t:nth-child(3) .ic{ background:var(--logo-pink) }
.trust-grid .t:nth-child(4) .ic{ background:rgba(255,255,255,.9); color:var(--teal) }

.head{ max-width:660px; margin-bottom:42px }
.head.center{ margin:0 auto 42px; text-align:center }
.head.center .eyebrow{ justify-content:center }
.head h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:var(--lh-heading); margin-top:.875rem }
.head p{ color:var(--ink-soft); margin:.875rem 0 0; font-size:var(--fs-lg); line-height:var(--lh-body); max-width:var(--measure) }
.head.center p{ margin-left:auto; margin-right:auto }

/* ---------- team ---------- */
.team{ background:var(--sand-deep) }
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px }
.doc{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s, box-shadow .2s }
.doc:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.doc .ph{ aspect-ratio:1/1.02; position:relative; background:var(--sand-deep) }
.doc .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top }
.doc .flag{ position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:7px; background:var(--swiss); display:grid; place-items:center; box-shadow:var(--shadow-sm) }
.doc .flag::before{ content:""; width:13px; height:13px; background:#fff; clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%) }
.doc .bd{ padding:20px 22px 24px }
.doc h3{ font-size:1.18rem; line-height:var(--lh-heading) }
.doc .role{ color:var(--teal-deep); font-weight:600; font-size:var(--fs-sm); line-height:1.45; margin:6px 0 14px }
.doc ul{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px }
.doc ul li{ background:var(--sand-deep); color:var(--teal-deep); padding:5px 11px; border-radius:8px; font-weight:600; font-size:var(--fs-2xs) }

/* ---------- about ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:center }
.about-media{ position:relative }
.about-media .img{ aspect-ratio:4/3.3; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow) }
.about-media .press{ position:absolute; right:-14px; bottom:-18px; width:150px; border-radius:14px; overflow:hidden; border:4px solid #fff; box-shadow:var(--shadow); background:#fff }
.about-media .press img{ width:100%; display:block }
.about-media .press span{ position:absolute; left:6px; bottom:6px; background:var(--teal-deep); color:#fff; font-size:var(--fs-2xs); font-weight:700; padding:4px 9px; border-radius:6px }
.about p.intro{ font-size:var(--fs-lg); line-height:var(--lh-body); color:var(--ink-soft); max-width:var(--measure) }
.checks{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px }
.checks li{ display:flex; gap:12px; align-items:flex-start; font-size:var(--fs-base); line-height:var(--lh-body); max-width:var(--measure); color:var(--ink-soft) }
.checks a{ color:var(--teal-deep); font-weight:600; text-decoration:underline; text-underline-offset:2px }
.checks a:hover{ text-decoration-thickness:2px }
.checks .ck{ width:26px; height:26px; border-radius:8px; background:var(--sand-deep); color:var(--teal); display:grid; place-items:center; flex:none; margin-top:1px }
.checks .ck svg{ width:15px; height:15px }

/* ---------- services ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.svc{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:box-shadow .18s, border-color .18s }
.svc:hover{ box-shadow:var(--shadow); border-color:var(--sage) }
.svc .media{ position:relative; aspect-ratio:16/10; background:var(--sand-deep) }
.svc .media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.svc-toggle{
  display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left;
  background:transparent; border:0; cursor:pointer; padding:22px 20px; font-family:inherit;
}
.svc-toggle .ic{ width:44px; height:44px; border-radius:13px; background:var(--sand-deep); color:var(--teal); display:grid; place-items:center; flex:none }
.svc-toggle .ic svg{ width:23px; height:23px }
.svc-head{ flex:1; min-width:0 }
.svc-head h3{ font-size:1.08rem; line-height:var(--lh-heading); margin-bottom:7px; font-family:var(--serif); font-weight:500; color:var(--ink) }
.svc-head p{ font-size:var(--fs-sm); line-height:1.55; color:var(--ink-soft); margin:0; max-width:var(--measure) }
.svc-toggle .chev{ width:19px; height:19px; color:var(--ink-soft); flex:none; margin-top:4px; transition:transform .25s ease }
.svc-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); color:var(--teal) }
.svc-toggle:hover .ic{ background:var(--teal); color:#fff }
.svc-panel{ padding:0 20px 22px 76px }
.svc-panel p{ font-size:var(--fs-base); line-height:var(--lh-body); color:var(--ink-soft); margin:0 0 1.5rem; max-width:var(--measure) }
.svc-panel p:last-child{ margin-bottom:0 }
[dir="rtl"] .svc-panel{ padding:0 76px 22px 20px }
.svc-highlights{ max-width:560px }

/* ---------- gallery ---------- */
.gal-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:14px }
.gal-grid .img{ border-radius:var(--radius); border:1px solid var(--line) }
.gal-grid .big{ grid-column:span 2; grid-row:span 2 }
.gal-grid .wide{ grid-column:span 2 }
.gal-grid .img img{ transition:transform .5s ease }
.gal-grid .img:hover img{ transform:scale(1.05) }
.gal-grid .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px 14px 10px;
  font-size:var(--fs-xs); font-weight:600; color:#fff; letter-spacing:.01em;
  background:linear-gradient(0deg, rgba(24,26,20,.72) 0%, rgba(24,26,20,.32) 60%, transparent 100%);
  pointer-events:none;
}

/* ---------- education / Lehrbetrieb & Fortbildung ---------- */
.edu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
.edu{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s }
.edu:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.edu .media{ position:relative; aspect-ratio:16/7; background:var(--sand-deep) }
.edu .media.contain img{ object-fit:contain }
.edu .media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.edu .media.badge{ display:grid; place-items:center; background:var(--sand-deep) }
.edu .media.badge img{ position:static; width:auto; height:80%; object-fit:contain }
.edu .bd{ padding:24px 26px 28px }
.edu h3{ font-size:1.22rem; line-height:var(--lh-heading); margin-bottom:.625rem }
.edu p{ font-size:var(--fs-base); line-height:var(--lh-body); color:var(--ink-soft); margin:0 0 1.5rem; max-width:var(--measure) }
.edu .lnk{ display:inline-flex; align-items:center; gap:7px; margin-top:.25rem; font-weight:600; font-size:var(--fs-sm); color:var(--teal-deep); text-decoration:none }
.edu .lnk:hover{ text-decoration:underline }
.edu .lnk svg{ width:15px; height:15px }
.partner-label{ margin-top:1.5rem; font-size:var(--fs-2xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft) }
.partner-list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.partner-list li{ background:var(--sand-deep); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:6px 12px; font-weight:600; font-size:var(--fs-xs) }
.partner-list li a{ color:inherit; text-decoration:none }
.partner-list li a:hover{ text-decoration:underline; color:var(--teal) }

/* ---------- access / directions ---------- */
.access{ background:var(--sand-deep) }
.access-hero{ position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); margin-bottom:26px; aspect-ratio:22/8 }
.access-hero .img{ position:absolute; inset:0 }
.access-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(36,38,31,.8) 0%,rgba(18,144,157,.35) 55%,rgba(18,144,157,0) 100%) }
.access-hero .ov{ position:absolute; left:0; top:0; bottom:0; display:flex; flex-direction:column; justify-content:center; padding:32px 42px; color:#fff; max-width:620px; z-index:2 }
.access-hero .ov h3{ font-size:clamp(1.4rem,2.8vw,2.1rem); line-height:var(--lh-heading); color:#fff }
.bigroute{ display:flex; align-items:center; gap:10px; margin-top:18px; flex-wrap:wrap }
.bigroute .st{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); border-radius:14px; padding:10px 14px }
.bigroute .st .d{ width:32px; height:32px; border-radius:9px; background:#fff; color:var(--teal); display:grid; place-items:center; flex:none }
.bigroute .st .d svg{ width:18px; height:18px }
.bigroute .st b{ font-size:var(--fs-base); line-height:1.35; display:block } .bigroute .st small{ font-size:var(--fs-xs); color:#EAF5F2 }
.bigroute .mid{ font-weight:800; font-size:var(--fs-sm); background:var(--sage); color:#1E2C22; padding:7px 14px; border-radius:999px; white-space:nowrap }

.access-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:32px; align-items:stretch }
.map-frame{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); min-height:400px }
.map-frame iframe{ width:100%; height:100%; min-height:400px; border:0; display:block }
.info-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px }
.info-row{ display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--line) }
.info-row:last-child{ border-bottom:0 }
.info-row .ic{ width:38px; height:38px; border-radius:11px; background:var(--sand-deep); color:var(--teal); display:grid; place-items:center; flex:none }
.info-row .ic svg{ width:20px; height:20px }
.info-row b{ font-size:var(--fs-base); line-height:1.4 } .info-row span, .info-row a{ font-size:var(--fs-sm); line-height:1.5; color:var(--ink-soft); text-decoration:none }
.info-row a:hover{ color:var(--teal); text-decoration:underline }
.hours{ list-style:none; margin:.5rem 0 0; padding:0; font-size:var(--fs-sm); width:100% }
.hours li{ display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dashed var(--line); color:var(--ink-soft) }
.hours li:last-child{ border:0 } .hours li.closed span:last-child{ color:var(--swiss); font-weight:600 }
.transit-note{ background:var(--sand-deep); color:var(--teal-deep); border-radius:14px; padding:15px 18px; font-weight:600; font-size:var(--fs-sm); line-height:1.5; display:flex; gap:10px; align-items:center; margin-bottom:20px }

/* ---------- reviews ---------- */
.reviews{ background:var(--teal-deep); color:#fff }  /* deeper teal: white text reaches 5.96:1 */
.reviews .head h2{ color:#fff } .reviews .head p{ color:#EAF5F2 }
.g-summary{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius); padding:22px 26px; margin-bottom:26px }
.g-summary .gword{ font-size:1.3rem }
.stars{ color:var(--gold); font-size:1.15rem; letter-spacing:2px }
.g-summary .txt{ font-size:var(--fs-base); line-height:1.55; color:#EAF5F2; flex:1; min-width:180px }
.rev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:26px }
.rev{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius); padding:22px }
.rev .stars{ font-size:1rem; margin-bottom:10px }
.rev p{ font-size:var(--fs-base); line-height:var(--lh-body); color:#F5FAF8; margin:0 0 1.25rem; font-style:italic; max-width:var(--measure) }
.rev .who{ display:flex; align-items:center; gap:11px }
.rev .who .a{ width:38px; height:38px; border-radius:50%; background:var(--sage); color:#26362A; display:grid; place-items:center; font-weight:700; flex:none }
.rev .who b{ font-size:var(--fs-sm) } .rev .who small{ font-size:var(--fs-xs); color:#DDEDE8; display:block }

/* ---------- FAQ ---------- */
.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:960px; margin:0 auto }
.faq{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 24px }
.faq h3{ font-family:var(--sans); font-size:var(--fs-base); line-height:var(--lh-heading); font-weight:700; color:var(--ink); display:flex; gap:11px; align-items:flex-start }
.faq h3::before{ content:"?"; width:24px; height:24px; border-radius:7px; background:var(--teal-deep); color:#fff; font-size:var(--fs-xs); display:grid; place-items:center; flex:none }
.faq p{ margin:.75rem 0 0 35px; font-size:var(--fs-base); line-height:var(--lh-body); color:var(--ink-soft); max-width:var(--measure) }
[dir="rtl"] .faq p{ margin:.75rem 35px 0 0 }

/* ---------- CTA ---------- */
.cta{ position:relative; overflow:hidden; border-radius:28px; color:#fff; box-shadow:var(--shadow) }
.cta .bg{ position:absolute; inset:0 }
.cta .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(150deg,rgba(24,26,20,.88),rgba(18,144,157,.85)) }
.cta .inner{ position:relative; padding:52px 42px; text-align:center }
.cta h2{ font-size:clamp(1.9rem,3.2vw,2.5rem); line-height:var(--lh-heading); color:#fff }
.cta p{ color:#F4EFE6; font-size:var(--fs-lg); line-height:var(--lh-body); max-width:var(--measure); margin:.875rem auto 1.625rem }
.cta-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

/* ---------- footer ---------- */
.alps-section{ position:relative; overflow:hidden; margin-top:78px; min-height:420px; display:flex; align-items:flex-end }
.alps-art{ position:absolute; inset:0; width:100%; height:100%; z-index:0 }
.alps-copy{ position:relative; z-index:1; padding:60px 24px 54px; text-align:center; max-width:760px; margin:0 auto }
.alps-copy .eyebrow::before{ background:#fff }
.alps-copy h2{ color:#fff; font-size:clamp(1.8rem,3.4vw,2.5rem); line-height:var(--lh-heading); margin-top:.75rem; text-shadow:0 2px 14px rgba(6,40,45,.35) }
.alps-copy p{ color:#EFF9F6; font-size:var(--fs-lg); line-height:var(--lh-body); max-width:var(--measure); margin:.875rem auto 0; text-shadow:0 1px 8px rgba(6,40,45,.3) }
.swiss-flag{ animation:flagWave 3.5s ease-in-out infinite }
@keyframes flagWave{ 0%,100%{ transform:skewY(0deg) } 50%{ transform:skewY(2deg) } }
@media(max-width:640px){ .alps-section{ min-height:320px } .alps-copy{ padding:40px 20px 34px } }

footer{ background:var(--ink); color:#D8CFC0; padding:54px 0 30px }

.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px }
.foot-grid h4{ font-family:var(--sans); font-weight:700; font-size:var(--fs-2xs); letter-spacing:.13em; text-transform:uppercase; color:#B9AE9B; margin:0 0 14px }
.foot-grid a{ color:#E2DACC; text-decoration:none; font-size:var(--fs-sm); line-height:1.5; display:block; padding:7px 0 }
.foot-grid a:hover{ color:#fff }
.foot-brand{ display:flex; align-items:center; gap:11px; margin-bottom:12px }
.foot-brand .chip{ background:#fff; border-radius:12px; padding:6px; display:grid; place-items:center }
.foot-brand .chip img{ height:36px }
.foot-brand .wm{ font-family:var(--serif); font-size:1.12rem; line-height:var(--lh-heading); color:#fff }
.social{ display:flex; gap:10px; margin-top:14px }
.social a{ width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; padding:0 }
.social a:hover{ background:rgba(255,255,255,.08) }
.social svg{ width:18px; height:18px }
.foot-bot{ border-top:1px solid rgba(255,255,255,.1); margin-top:32px; padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:var(--fs-xs); line-height:1.5; color:#B9AE9B }

/* ---------- sticky mobile action bar ---------- */
.action-bar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:70; background:#fff;
  border-top:1px solid var(--line); box-shadow:0 -10px 28px -8px rgba(36,38,31,.32);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
}
.action-bar .btn{ flex:1; border-radius:12px; min-height:48px }
.wa-float{
  position:fixed; right:18px; bottom:22px; z-index:65; width:56px; height:56px; border-radius:50%;
  background:var(--sage-deep); display:grid; place-items:center; box-shadow:var(--shadow); color:#fff; text-decoration:none;
  transition:transform .16s;
}
.wa-float:hover{ transform:scale(1.06) }
.wa-float svg{ width:28px; height:28px }
[dir="rtl"] .wa-float{ right:auto; left:18px }

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease }
.reveal.in{ opacity:1; transform:none }

/* staggered card entrance inside key grids, layered on top of the parent fade */
.team-grid > *, .svc-grid > *, .gal-grid > *, .edu-grid > * {
  opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal.in.team-grid > *, .team-grid.reveal.in > * { opacity:1; transform:none }
.reveal.in.svc-grid  > *, .svc-grid.reveal.in  > * { opacity:1; transform:none }
.reveal.in.gal-grid  > *, .gal-grid.reveal.in  > * { opacity:1; transform:none }
.reveal.in.edu-grid  > *, .edu-grid.reveal.in  > * { opacity:1; transform:none }
.team-grid > *:nth-child(2), .svc-grid > *:nth-child(2), .gal-grid > *:nth-child(2), .edu-grid > *:nth-child(2){ transition-delay:.08s }
.team-grid > *:nth-child(3), .svc-grid > *:nth-child(3), .gal-grid > *:nth-child(3), .edu-grid > *:nth-child(3){ transition-delay:.16s }
.svc-grid  > *:nth-child(4), .gal-grid > *:nth-child(4){ transition-delay:.24s }
.svc-grid  > *:nth-child(5), .gal-grid > *:nth-child(5){ transition-delay:.32s }
.svc-grid  > *:nth-child(6), .gal-grid > *:nth-child(6){ transition-delay:.40s }
.svc-grid  > *:nth-child(7), .gal-grid > *:nth-child(7){ transition-delay:.48s }
.svc-grid  > *:nth-child(8), .gal-grid > *:nth-child(8){ transition-delay:.56s }

/* gentle pulse on the WhatsApp button to draw the eye without being noisy */
.wa-float{ animation:waPulse 3.4s ease-in-out infinite }
.wa-float:hover{ animation-play-state:paused }
@keyframes waPulse{
  0%,100%{ box-shadow:var(--shadow), 0 0 0 0 rgba(47,162,106,.35) }
  50%{ box-shadow:var(--shadow), 0 0 0 10px rgba(47,162,106,0) }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:36px }
  .hero-rainbow{ width:220px; top:-20px; right:-40px; opacity:.6 }
  .hero-media .main{ aspect-ratio:16/12; max-height:440px }
  .about-grid{ grid-template-columns:1fr; gap:30px }
  .access-grid{ grid-template-columns:1fr }
  .access-hero{ aspect-ratio:16/11 }
  .access-hero .ov{ max-width:100%; padding:22px }
  .svc-grid{ grid-template-columns:repeat(2,1fr) }
  .trust-grid{ grid-template-columns:repeat(2,1fr); gap:22px; text-align:left }
  .trust-grid .t .ic{ margin:0 0 8px }
  .team-grid{ grid-template-columns:1fr }
  .edu-grid{ grid-template-columns:1fr }
  .gal-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:160px }
  .gal-grid .big{ grid-column:span 2; grid-row:span 1 } .gal-grid .wide{ grid-column:span 2 }
  .rev-grid{ grid-template-columns:1fr } .faq-grid{ grid-template-columns:1fr }
  .foot-grid{ grid-template-columns:1fr 1fr }
  .nav-links{ display:none } .burger{ display:block }
  .action-bar{ display:flex } .wa-float{ display:none }

  /* --- Mobile UX audit: every tappable control reaches the 44px thumb-target minimum --- */
  .btn{ min-height:48px; padding:14px 22px }
  .burger{ width:48px; height:48px }
  .langsel>button{ min-height:44px; padding:10px 14px }
  .drawer a{ min-height:52px; display:flex; align-items:center; padding:14px 0 }
  .svc-toggle{ min-height:64px }
  .foot-nav a{ display:inline-block; padding:9px 0; min-height:44px }

  /* --- "Ihr Team" section: roomier cards so names/roles/tags don't feel cramped --- */
  .team{ padding:64px 0 }
  .team-grid{ gap:26px }
  .doc .bd{ padding:22px 20px 26px }
  .doc h3{ line-height:1.25 }
  .doc .role{ margin:6px 0 14px }

  /* --- "Leistungen" (services) section: de-indent the expanded text on narrower screens --- */
  .svc-panel{ padding:0 20px 24px 20px }
  [dir="rtl"] .svc-panel{ padding:0 20px 24px 20px }

  /* --- sticky action-bar: keep page content clear of it while scrolling --- */
  body{ padding-bottom:88px }

  /* Rule 5 — side breathing room on tablets, well above the 16px floor */
  .wrap{ padding:0 24px }
  .legal-modal{ padding:20px }
}

/* Mobile: sections were cramped — give real breathing room */
@media (max-width:560px){
  section{ padding:56px 0 72px }         /* generous bottom space, was flush */
  .wrap{ padding:0 20px }
  .svc-grid{ grid-template-columns:1fr }
  .foot-grid{ grid-template-columns:1fr; gap:30px }
  .cta .inner{ padding:38px 22px }
  .gal-grid{ grid-template-columns:1fr; grid-auto-rows:200px }
  .gal-grid .big, .gal-grid .wide{ grid-column:span 1 }
  .brand img{ height:44px }
  .hero{ padding-top:36px }
  .hero-grid{ padding-bottom:48px }
  footer{ margin-top:56px; padding-bottom:36px }

  /* --- Mobile UX audit: full-width, easy-to-thumb primary buttons on narrow phones --- */
  .hero-cta{ flex-direction:column }
  .hero-cta .btn{ width:100%; min-height:50px }
  .cta-btns{ flex-direction:column }
  .cta-btns .btn{ width:100%; min-height:50px }
  .action-bar{ gap:10px }
  .action-bar .btn{ min-height:50px; font-size:var(--fs-sm) }

  /* --- "Ihr Team": single-column cards get tighter, legible padding on small phones --- */
  .team{ padding:48px 0 60px }
  .doc .bd{ padding:20px 18px 22px }
  .doc h3{ font-size:1.1rem }
  .doc .role{ font-size:var(--fs-sm); margin:6px 0 13px }
  .doc ul li{ font-size:var(--fs-2xs); padding:5px 10px }

  /* --- "Leistungen": bigger, more readable copy in the accordion rows/panels --- */
  .svc-toggle{ padding:18px 16px; gap:14px }
  .svc-toggle .ic{ width:40px; height:40px; border-radius:11px }
  .svc-toggle .ic svg{ width:20px; height:20px }
  .svc-head h3{ font-size:1rem }
  .svc-head p{ font-size:var(--fs-sm); line-height:1.55 }
  .svc-panel{ padding:0 16px 22px 16px }
  .svc-panel p{ font-size:var(--fs-base); line-height:var(--lh-body) }

  /* --- sticky action-bar: taller buttons need a touch more clearance below --- */
  body{ padding-bottom:96px }

  /* ---------------------------------------------------------
     Rule 5 — nothing shrinks on a phone. Body copy stays at 16px
     and every text surface keeps at least 16px of side padding.
     --------------------------------------------------------- */
  body{ font-size:var(--fs-base); line-height:var(--lh-body) }
  .wrap{ padding:0 20px }
  .hero p.lead, .head p, .about p.intro, .cta p, .alps-copy p{ font-size:var(--fs-md); line-height:var(--lh-body) }

  /* a ch-based measure is meaningless in a single narrow column */
  p, .head p, .about p.intro, .edu p, .faq p, .svc-panel p, .svc-head p,
  .hero p.lead, .cta p, .alps-copy p, .checks li, .hero-benefits li, .rev p{ max-width:100% }

  .info-card{ padding:22px 18px }
  .g-summary{ padding:20px 18px }
  .rev{ padding:22px 18px }
  .faq{ padding:20px 18px }
  .drawer{ padding:20px 18px 26px }
  .legal-modal{ padding:16px }
  .doc .bd{ padding:20px 18px 24px }
  .edu .bd{ padding:22px 18px 24px }
  .svc-toggle{ padding:18px }
  .svc-panel{ padding:0 18px 22px }
  .cta .inner{ padding:38px 20px }
  .alps-copy{ padding:40px 20px 34px }
  .access-hero .ov{ padding:22px 20px }
}

/* ---------------------------------------------------------
   Very small phones. Gutters compress down to — but never
   below — the 16px minimum. Text sizes do not change at all.
   --------------------------------------------------------- */
@media (max-width:380px){
  .wrap{ padding:0 16px }
  .info-card, .g-summary, .rev, .faq{ padding-left:16px; padding-right:16px }
  .doc .bd, .edu .bd{ padding-left:16px; padding-right:16px }
  .svc-toggle, .svc-panel{ padding-left:16px; padding-right:16px }
  .legal-head{ padding:14px 16px }
  .legal-body{ padding:6px 16px 20px }
  .legal-modal{ padding:12px }
  .drawer{ padding:18px 16px 24px }
  .cta .inner{ padding:32px 16px }
  .alps-copy{ padding:36px 16px 30px }
  .access-hero .ov{ padding:20px 16px }
  body{ font-size:var(--fs-base) }
  .faq p{ margin-left:0 }
  [dir="rtl"] .faq p{ margin-right:0 }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important }
  .reveal{ opacity:1; transform:none }
}

/* =========================================================
   Intro logo animation — tooth appears, then the rainbow
   arcs (the logo's own colors) draw in, then the wordmark.
   ========================================================= */
#splash{
  position:fixed; inset:0; z-index:999; display:grid; place-items:center;
  background:radial-gradient(120% 100% at 50% 30%,#ffffff 0%,var(--sand) 70%);
}
#splash.go{ animation:splashOut .7s ease 3.1s forwards }
#splash .sp{ display:flex; flex-direction:column; align-items:center; gap:22px }
#splash .mark{ position:relative; width:220px; height:246px }
#splash .mark::after{
  content:""; position:absolute; left:50%; top:50%; width:300px; height:300px; margin:-150px 0 0 -150px;
  border-radius:50%; opacity:0;
  background:radial-gradient(circle, rgba(31,165,218,.16) 0%, rgba(174,203,46,.14) 45%, rgba(232,145,155,.12) 75%, transparent 80%);
}
#splash.go .mark::after{ animation:glowIn 1.6s ease .45s forwards }
#splash .mark img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain }
#splash .lg-tooth,#splash .lg-arcs,#splash .wm-anim{ opacity:0 }
#splash.go .lg-tooth{ transform:scale(.55); animation:toothIn .8s cubic-bezier(.2,1.5,.4,1) .15s forwards }
#splash.go .lg-arcs{
  clip-path:inset(0 100% 0 0); transform-origin:70% 80%;
  animation:arcsIn 1.2s cubic-bezier(.25,.8,.3,1) .8s forwards;
}
#splash .wm-anim{
  font-family:var(--serif); font-size:clamp(1.4rem,4.2vw,2.4rem); font-weight:600; color:var(--teal);
  letter-spacing:-.02em; transform:translateY(16px); text-align:center;
}
#splash.go .wm-anim{ animation:wmIn .75s ease 1.95s forwards }
#splash .wm-anim small{
  display:block; font-family:var(--sans); font-size:var(--fs-xs); font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:9px;
}
#splash .skip{
  position:absolute; bottom:26px; left:0; right:0; text-align:center; font-size:var(--fs-xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); opacity:0;
}
#splash.go .skip{ animation:wmIn .5s ease 2.5s forwards }
@keyframes toothIn{ to{ opacity:1; transform:scale(1) } }
@keyframes arcsIn{
  0%{ opacity:0; clip-path:inset(0 100% 0 0); transform:rotate(-12deg) scale(.9) }
  22%{ opacity:1 }
  100%{ opacity:1; clip-path:inset(0 0 0 0); transform:rotate(0) scale(1) }
}
@keyframes wmIn{ to{ opacity:1; transform:none } }
@keyframes glowIn{ to{ opacity:1 } }
@keyframes splashOut{ to{ opacity:0; visibility:hidden; pointer-events:none } }
body.splashing{ overflow:hidden }
@media (prefers-reduced-motion:reduce){ #splash{ display:none!important } }



/* =========================================================
   Horizontal-overflow guard
   Removes the sideways scroll and the empty white strip on
   phones, without clipping any of the layered visual effects.
   ========================================================= */

/* --- 1. Viewport clamp -------------------------------------------------
   overflow-x:hidden is the requested baseline. Where `clip` is supported
   we upgrade to it, because `hidden` makes <html> a scroll container and
   that is exactly what breaks `position:sticky` on the header in Safari
   and older Chrome. `clip` cuts the overflow without creating a scroll
   port, so the sticky header keeps working. */
html, body{
  overflow-x:hidden;
  max-width:100%;
}
@supports (overflow:clip){
  html, body{ overflow-x:clip }
}

/* --- 2. Flex and grid children ---------------------------------------
   Both default to min-width:auto, so one unbreakable token — an e-mail
   address, a long German compound — sets a floor the track cannot go
   below and pushes the whole row past the viewport. On a 320px screen
   "zahnmedizin.rupperswil@gmx.ch" needs 203px where only 204px exist;
   with a fallback font loaded first, it tips over. min-width:0 lets the
   track shrink and hands the wrapping decision to rule 3 below. */
.hero-grid > *, .about-grid > *, .access-grid > *, .svc-grid > *,
.team-grid > *, .gal-grid > *, .edu-grid > *, .rev-grid > *,
.faq-grid > *, .foot-grid > *, .trust-grid > *,
.info-row > *, .hours li > *, .bigroute > *, .bigroute .st > *,
.hero-quick > *, .foot-bot > *, .transit-note > *, .g-summary > *,
.svc-toggle > *, .checks li > *, .legal-head > *{ min-width:0 }

/* --- 3. Long tokens wrap instead of shoving the layout sideways ------- */
body{ overflow-wrap:break-word }
.info-row a, .info-row span, .foot-grid a, .legal-body a,
.legal-body li, .rev p, .faq p{ overflow-wrap:anywhere }

/* --- 4. Nothing exceeds its container -------------------------------- */
img, svg, video, iframe, .map-frame iframe{ max-width:100% }

/* --- 5. .about-media .press -------------------------------------------
   The badge deliberately hangs off the image's bottom-right corner
   (right:-14px; bottom:-18px). On desktop that overhang sits inside the
   24px page gutter, so it is invisible to the scrollbar. On phones the
   gutter drops to 16px and only 2px of clearance is left.
   Clipping the parent with overflow:hidden would cut off the badge and
   its drop shadow and kill the layered look, so instead the sideways
   overhang is retired on small screens while the vertical overlap — the
   part that actually reads as "stacked" — is kept. */
@media (max-width:640px){
  .about-media{ position:relative }          /* unchanged, stated for clarity */
  .about-media .press{
    right:0;                                  /* was -14px: the only axis that scrolled */
    bottom:-14px;                             /* vertical overlap preserved */
    width:min(150px,40%);
  }
}

/* --- 6. Decorative absolutes: confirm their clipping ------------------
   .hero-watermark (right:-90px) and .glass-route .seg .w (translateX)
   both live inside .hero, which already carries overflow:hidden — they
   are contained. .hero-rainbow (right:-40px, in the 980px block) has no
   matching element in the markup any more; the rule is inert and left
   in place, but it is neutralised here in case the element returns. */
.hero, .about, .access, .reviews, .cta, .alps{ position:relative }
.hero-rainbow{ max-width:100% }


/* =========================================================
   Utility classes replacing the former inline style="" attributes.
   Moving them out of the markup is what allows the CSP in .htaccess
   to drop style-src 'unsafe-inline'.
   ========================================================= */
.is-inline-flex{ display:inline-flex }
.ta-right{ text-align:right }
.ta-center{ text-align:center }
.pt-0{ padding-top:0 }
.w-100{ width:100% }
.btn-block{ width:100%; margin-top:16px }
.hours-legend{ display:flex; justify-content:space-between; margin-top:8px }
.ph-initials{
  display:grid; place-items:center; color:#fff;
  font-family:var(--serif); font-size:2.4rem; font-weight:600; background:var(--teal);
}
.eyebrow-on-teal{ color:#EAF5F2 }
.eyebrow-on-photo{ color:#fff }
.btn-ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3) }
.acc-bycar{ margin:1rem 0 0; font-size:var(--fs-sm); line-height:1.55; color:#F2EDE3 }
.foot-tagline{ font-size:var(--fs-sm); line-height:1.5; color:#B9AE9B; max-width:34ch }