/* ============================================================
   Praxis fuer Kieferorthopaedie Valchera, Rueti ZH (fiktive Demo-Praxis)
   Landing page. One stylesheet, no build step.

   Structure
     1  Font, tokens, reset
     2  Typography and helpers
     3  Buttons and links
     4  Navigation, mobile panel, mobile action bar
     5  Hero
     6  Trust band
     7  Treatments: tiles, hover video, the arch figure, scope list
     8  Process
     9  Team
    10  Gallery
    11  Questions
    12  Contact and form
    13  Footer
    14  Scroll reveals and reduced motion

   Colour system
     One base tone drives html, body, theme-color and both viewport
     edges. One signal colour is reserved for conversion elements,
     nothing else uses it as a fill. All remaining colour comes from
     the photographs and the videos.
   ============================================================ */

@font-face{
  font-family:'Switzer';
  src:url('../fonts/switzer-variable.woff2') format('woff2-variations');
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}

/* ---------- 1  tokens ---------- */
:root{
  color-scheme:light;

  /* EIN Basiston: html, body, theme-color, Seitenanfang, Seitenende */
  --base:#F5F8FB;
  --surface:#FFFFFF;
  --tint:#EAF1F7;
  --line:#D9E3EB;
  --line-soft:#E6EDF3;

  --ink-strong:#1D2A30;
  --ink:#2F4248;
  --ink-dim:#5C6E75;
  --ink-on-dark:#FFFFFF;
  --ink-on-dark-dim:rgba(255,255,255,.82);

  --brand:#007BC0;          /* Markenblau des Logos, nur Grafik */
  --signal:#0069A6;         /* einzige Signalfarbe, nur Conversion */
  --signal-deep:#005486;
  --signal-soft:#E3EFF7;

  --r-s:6px;
  --r-m:14px;

  --wrap:1200px;
  --wrap-narrow:820px;
  --gut:clamp(1.25rem,4.5vw,3rem);
  --sec-pad:clamp(4rem,9vw,7.5rem);
  --nav-h:64px;

  --fs-display:clamp(2.1rem,5.6vw,4.05rem);
  --fs-h2:clamp(1.7rem,3.6vw,2.85rem);
  --fs-h3:clamp(1.14rem,1.5vw,1.35rem);
  --fs-lead:clamp(1.02rem,1.35vw,1.22rem);
  --fs-body:1.0125rem;
  --fs-small:.9rem;
  --fs-label:.775rem;

  --ease:cubic-bezier(.22,.68,.24,1);
  --ease-soft:cubic-bezier(.32,.72,.28,1);
}

@media (min-width:900px){ :root{ --nav-h:76px; } }

*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}

html{
  background-color:var(--base);
  -webkit-text-size-adjust:100%;
}
/* Lenis steuert das weiche Scrollen, scroll-behavior darf hier nie stehen */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
/* iPhone: die Tint-Quellen wechseln ohne Uebergang, damit ein Scroll sofort den
   Endton abtastet statt eines Zwischenwerts der Blende. */
html.ios{transition:none;}

body{
  margin:0;
  background-color:var(--base);
  color:var(--ink);
  font-family:'Switzer',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs-body);
  line-height:1.62;
  font-weight:400;
  letter-spacing:.001em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video,canvas,svg{display:block;max-width:100%;}
img,video{height:auto;}

/* ---------- 2  Typografie ---------- */
h1,h2,h3{
  margin:0;
  color:var(--ink-strong);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.018em;
}
h1{font-size:var(--fs-display);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);line-height:1.28;letter-spacing:-.011em;}
p{margin:0 0 1.05em;}
p:last-child{margin-bottom:0;}

.kicker{
  margin:0 0 .95rem;
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.lead{
  font-size:var(--fs-lead);
  line-height:1.58;
  color:var(--ink);
  max-width:60ch;
}
.note{
  max-width:68ch;
  margin-top:clamp(1.5rem,3vw,2.25rem);
  color:var(--ink-dim);
  font-size:var(--fs-small);
  line-height:1.68;
}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
  position:fixed;top:.65rem;left:.65rem;z-index:400;
  transform:translateY(-160%);
  background:var(--signal);color:#fff;text-decoration:none;
  padding:.7rem 1.15rem;border-radius:var(--r-s);font-weight:600;
  transition:transform .25s var(--ease);
}
.skip:focus-visible{transform:translateY(0);}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);}
.wrap-narrow{max-width:var(--wrap-narrow);}

.sec{padding-block:var(--sec-pad);position:relative;}
.sec-tint{background:var(--tint);}
.sec-head{max-width:74ch;margin-bottom:clamp(2.25rem,4.5vw,3.5rem);}
.sec-head .lead{margin-top:1.15rem;}
.sec-act{margin-top:clamp(2rem,4vw,3rem);}

/* ---------- 3  Buttons und Links ---------- */
a{color:var(--signal);text-underline-offset:.22em;text-decoration-thickness:1px;}
a:hover{color:var(--signal-deep);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;
  padding:.95rem 1.75rem;
  border:1px solid transparent;border-radius:var(--r-s);
  font:inherit;font-weight:600;font-size:.975rem;letter-spacing:.005em;
  text-decoration:none;cursor:pointer;
  transition:background-color .28s var(--ease),color .28s var(--ease),
             border-color .28s var(--ease),transform .28s var(--ease),
             box-shadow .28s var(--ease);
}
.btn-primary{
  background:var(--signal);color:#fff;
  box-shadow:0 1px 2px rgba(16,44,64,.14);
}
.btn-primary:hover{background:var(--signal-deep);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,44,64,.16);}
.btn-ghost{
  background:transparent;color:var(--ink-strong);border-color:var(--line);
}
.btn-ghost:hover{background:var(--surface);border-color:var(--ink-dim);color:var(--ink-strong);transform:translateY(-2px);}
.btn-sm{min-height:44px;padding:.62rem 1.2rem;font-size:.9rem;}
.btn-wide{width:100%;}
.btn:active{transform:translateY(0);}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
  border-radius:var(--r-s);
}

.link-out{font-weight:600;}

/* ---------- 4  Navigation ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;gap:1rem;
  height:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  padding-top:env(safe-area-inset-top,0px);
  padding-inline:var(--gut);
  background-color:transparent;
  transition:background-color .4s var(--ease),height .4s var(--ease);
}
/* Frost auf dem Pseudo-Element: backdrop-filter auf der Nav selbst machte sie zum
   Containing-Block fuer die fixen Kinder (Panel, Verdunklung). */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .4s var(--ease);
  background:rgba(245,248,251,.78);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
}
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--line);opacity:0;transition:opacity .4s var(--ease);
}
.nav.scrolled::before,.nav.scrolled::after{opacity:1;}
.nav.scrolled{height:calc(58px + env(safe-area-inset-top,0px));}
/* Die gescrollte Nav ist auf dem iPhone die einzige bewusste Kanten-Tint-Quelle.
   Ihr Deckton ist der Basiston: Statusleiste, Nav und Seite sind eine Flaeche. */
html.ios .nav{transition-property:height;}
html.ios .nav::before{display:none;}
html.ios .nav.scrolled{background-color:var(--base);}
html.menu-render .nav{background-color:var(--base);}

.brand{
  display:flex;align-items:center;gap:.7rem;
  margin-right:auto;text-decoration:none;color:var(--ink-strong);
}
.brand-mark{width:auto;height:38px;transition:transform .4s var(--ease);}
.nav.scrolled .brand-mark{height:32px;}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-1{font-weight:600;font-size:1.055rem;letter-spacing:-.012em;color:var(--ink-strong);}
.brand-2{font-size:.715rem;letter-spacing:.085em;text-transform:uppercase;color:var(--ink-dim);}
.brand:hover .brand-mark{transform:translateY(-2px);}
/* Sehr schmale Schirme: die Zeile unter der Wortmarke braeuchte drei Zeilen und
   schoebe die Leiste auseinander. Logo und Name tragen dort allein. */
@media (max-width:419px){
  .brand-2{display:none;}
  .brand-1{font-size:1.12rem;}
}

.nav-links{display:none;align-items:center;gap:.15rem;}
.nav-links a{
  padding:.5rem .72rem;border-radius:var(--r-s);
  color:var(--ink);text-decoration:none;font-size:.945rem;font-weight:500;
  transition:color .25s var(--ease),background-color .25s var(--ease);
}
.nav-links a:hover{color:var(--ink-strong);background:rgba(0,105,166,.07);}
/* Standortanzeige auf der langen Seite: der Eintrag des gerade gelesenen
   Abschnitts steht kraeftiger und traegt eine Unterlinie in der Markenfarbe. */
.nav-links a.current{color:var(--ink-strong);font-weight:600;box-shadow:inset 0 -2px 0 var(--brand);}
.nav-panel-links a.current{color:var(--signal);font-weight:600;}
.nav-tel{
  display:none;color:var(--ink-strong);text-decoration:none;font-weight:600;
  font-size:.945rem;padding-inline:.4rem;
}
.nav-tel:hover{color:var(--signal);}
.nav-cta{display:none;}

.nav-toggle{
  display:inline-flex;align-items:center;gap:.55rem;
  min-height:42px;padding:.5rem .85rem;
  background:transparent;border:1px solid var(--line);border-radius:var(--r-s);
  color:var(--ink-strong);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.nav-toggle:hover{border-color:var(--ink-dim);background:var(--surface);}
.bars{display:inline-flex;flex-direction:column;gap:4px;width:17px;}
.bars i{display:block;height:2px;background:var(--ink-strong);border-radius:2px;transition:transform .35s var(--ease),opacity .25s var(--ease);}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media (min-width:1080px){
  .nav-links,.nav-tel,.nav-cta{display:flex;}
  .nav-toggle{display:none;}
  .nav{gap:1.25rem;}
}

/* Menue: geschlossen echtes display:none. iOS 26 tastet auch Elemente mit
   opacity:0 als Farbquelle fuer die Leisten ab. */
.nav-backdrop,.nav-panel{display:none;}
html.menu-render .nav-backdrop,html.menu-render .nav-panel{display:block;}
.nav-backdrop{
  position:fixed;inset:0;z-index:190;
  background:rgba(20,38,50,.42);
  opacity:0;transition:opacity .42s var(--ease);
}
html.menu-open .nav-backdrop{opacity:1;}
/* iPhone: der offene Zustand darf an den Kanten keinen zweiten Ton erzeugen. */
html.ios .nav-backdrop{
  background:linear-gradient(180deg,
    var(--base) 0,
    var(--base) calc(env(safe-area-inset-top,0px) + 3px),
    rgba(20,38,50,.42) calc(env(safe-area-inset-top,0px) + 20px),
    rgba(20,38,50,.42) calc(100% - env(safe-area-inset-bottom,0px) - 20px),
    var(--base) calc(100% - env(safe-area-inset-bottom,0px) - 3px),
    var(--base) 100%);
}
.nav-panel{
  position:fixed;top:0;left:0;right:0;z-index:195;
  background:var(--base);border-bottom:1px solid var(--line);
  padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + .75rem) var(--gut) 1.9rem;
  max-height:calc(100dvh - 1.5rem);overflow-y:auto;
  transform:translateY(-101%);transition:transform .5s var(--ease);
}
html.menu-open .nav-panel{transform:translateY(0);}
.nav-panel-links{display:flex;flex-direction:column;margin-bottom:1.4rem;}
.nav-panel-links a{
  padding:.95rem .25rem;border-bottom:1px solid var(--line-soft);
  color:var(--ink-strong);text-decoration:none;font-size:1.08rem;font-weight:500;
}
.nav-panel-links a:hover{color:var(--signal);}
.nav-panel .btn{width:100%;}
.nav-panel-foot{
  display:flex;flex-direction:column;gap:.3rem;
  margin-top:1.4rem;font-size:var(--fs-small);color:var(--ink-dim);
}
.nav-panel-foot a{font-weight:600;text-decoration:none;}

/* mobile Handlungsleiste */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:180;
  display:flex;gap:.6rem;
  padding:.7rem var(--gut);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px));
  background:var(--base);border-top:1px solid var(--line);
  transform:translateY(105%);transition:transform .45s var(--ease);
}
.mbar.on{transform:translateY(0);}
.mbar .btn{flex:1;min-height:48px;padding-inline:.9rem;font-size:.925rem;}
.mbar .btn-ghost{background:var(--surface);}
html.menu-render .mbar{transform:translateY(105%);}
@media (min-width:1080px){ .mbar{display:none;} }

/* ---------- 5  Hero ---------- */
.hero{position:relative;background-color:var(--base);}
.hero-stage{
  position:relative;overflow:hidden;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px));
}
.hero-poster,.hero-poster img,.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero-video{opacity:0;transition:opacity 1.1s var(--ease-soft);}
.hero-video.on{opacity:1;}
/* Der Schleier traegt den Kontrast jetzt in der Mitte, weil dort auch der Text
   steht. Er besteht aus drei Lagen, von oben nach unten gestapelt:
     1  eine weiche Aufhellung genau hinter dem Textblock. Sie laeuft zu den
        Raendern hin vollstaendig aus, damit das Video ringsum offen steht.
     2  ein schmales Band unter der Navigation, damit Wortmarke und Menue
        auf jedem Bildinhalt lesbar bleiben.
     3  der Abschluss nach unten. Die letzten Prozent sind flaechig im
        Basiston, ohne jeden Verlauf: die iOS-Leisten tasten dort immer
        denselben reinen Ton ab. */
.hero-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(116% 60% at 50% 45%,
      rgba(245,248,251,.80) 0%,
      rgba(245,248,251,.68) 24%,
      rgba(245,248,251,.38) 48%,
      rgba(245,248,251,.11) 70%,
      rgba(245,248,251,0) 86%),
    linear-gradient(180deg,
      rgba(245,248,251,.60) 0%,
      rgba(245,248,251,.17) 13%,
      rgba(245,248,251,0) 24%),
    linear-gradient(180deg,
      rgba(245,248,251,0) 72%,
      rgba(245,248,251,.48) 86%,
      rgba(245,248,251,.88) 94%,
      var(--base) 97%,
      var(--base) 100%);
}
/* Auf schmalen Schirmen fuellt der Textblock einen groesseren Teil des Bildes
   aus. Die Aufhellung greift dort etwas weiter und etwas kraeftiger, der
   flaechige Abschluss nach unten bleibt unveraendert. */
@media (max-width:699px){
  .hero-veil{
    background:
      radial-gradient(148% 55% at 50% 44%,
        rgba(245,248,251,.86) 0%,
        rgba(245,248,251,.76) 28%,
        rgba(245,248,251,.44) 54%,
        rgba(245,248,251,.13) 76%,
        rgba(245,248,251,0) 90%),
      linear-gradient(180deg,
        rgba(245,248,251,.64) 0%,
        rgba(245,248,251,.19) 15%,
        rgba(245,248,251,0) 27%),
      linear-gradient(180deg,
        rgba(245,248,251,0) 70%,
        rgba(245,248,251,.52) 85%,
        rgba(245,248,251,.90) 94%,
        var(--base) 97%,
        var(--base) 100%);
  }
}
/* Der Textblock steht mittig und bleibt kurz: eine Zeile Versprechen, ein
   Nachsatz, die beiden Wege. Der untere Innenabstand ist groesser als der
   obere, damit der Block optisch mittig sitzt und die Scroll-Angabe am
   unteren Rand freien Platz behaelt. */
.hero-copy{
  position:relative;z-index:2;
  width:100%;max-width:min(72rem,100%);margin-inline:auto;
  padding:0 var(--gut) clamp(3.5rem,8vh,5.5rem);
  text-align:center;
}
.hero-kicker{color:var(--ink);}
/* Eigene Stufe statt der Anzeigengroesse: die kurze Zeile soll auf dem Schirm
   in einer Zeile stehen und darf dafuer nicht bis an die Deckelgroesse der
   Skala wachsen. */
.hero-title{
  max-width:none;
  font-size:clamp(2.25rem,4.6vw,3.65rem);
  text-wrap:balance;
}
.hero-lead{
  margin-top:1.15rem;max-width:52ch;margin-inline:auto;
  font-size:var(--fs-lead);line-height:1.5;color:var(--ink-strong);
  text-wrap:balance;
}
.hero-act{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:2.1rem;}
/* Der zweite Weg steht hier auf bewegtem Bild. Durchsichtig waere er weder als
   Schaltflaeche erkennbar noch zuverlaessig lesbar, deshalb bekommt er im Hero
   eine eigene Flaeche und einen kraeftigeren Rand. */
.hero-act .btn-ghost{
  background:rgba(255,255,255,.90);
  border-color:rgba(29,42,48,.22);
}
.hero-act .btn-ghost:hover{background:#fff;border-color:var(--ink-dim);}
/* Auf schmalen Schirmen brechen die beiden Wege ohnehin untereinander. Dann
   stehen sie gleich breit statt unterschiedlich lang eingerueckt, und die
   Trefferflaechen werden groesser. */
@media (max-width:519px){
  .hero-act{flex-direction:column;align-items:center;gap:.65rem;}
  .hero-act .btn{width:100%;max-width:19rem;}
}

/* Die Scroll-Angabe steht mittig unter dem Block. Die Linie zeigt nach unten
   und ist die Richtungsangabe der Geste, kein Ornament. Sie steht tiefer als
   der Textblock, wo die mittige Aufhellung schon ausgelaufen ist. Deshalb
   traegt die Angabe hier den kraeftigen Ton und nicht den gedaempften. */
.hero-scroll{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(1.5rem,4vh,2.5rem);
  z-index:2;display:none;flex-direction:column;align-items:center;gap:.75rem;
  color:var(--ink-strong);text-decoration:none;
  font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  transition:color .3s var(--ease);
}
.hero-scroll:hover{color:var(--signal);}
.hero-scroll-line{display:block;width:1px;height:34px;background:rgba(29,42,48,.45);transform-origin:top center;transition:transform .45s var(--ease);}
.hero-scroll:hover .hero-scroll-line{transform:scaleY(1.32);}
@media (min-width:900px) and (min-height:640px){ .hero-scroll{display:flex;} }

/* Niedrige Fenster. Der mittige Block wird stufenweise kompakter, damit er
   weder unter die Navigation noch unter die Scroll-Angabe rutscht. */
@media (max-height:720px){
  .hero-title{font-size:clamp(1.95rem,3.7vw,2.85rem);}
  .hero-copy{padding-bottom:clamp(2.25rem,5.5vh,3.25rem);}
  .hero-act{margin-top:1.65rem;}
}
@media (max-height:600px){
  .hero-title{font-size:clamp(1.8rem,3.2vw,2.35rem);}
  .hero-lead{margin-top:.85rem;}
  .hero-act{margin-top:1.35rem;}
}
@media (max-height:520px){
  .hero-kicker{display:none;}
  .hero-copy{padding-bottom:1.75rem;}
  .hero-lead{margin-top:.7rem;}
}

.video-toggle{
  position:absolute;right:var(--gut);z-index:3;
  bottom:clamp(1.5rem,4vh,2.5rem);
  width:42px;height:42px;padding:0;
  display:grid;place-items:center;
  background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:var(--r-s);
  cursor:pointer;transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.video-toggle:hover{background:#fff;transform:translateY(-2px);}
.video-toggle-icon{
  width:12px;height:13px;
  border-left:3.5px solid var(--ink-strong);border-right:3.5px solid var(--ink-strong);
}
.video-toggle.paused .video-toggle-icon{
  width:0;height:0;border:none;
  border-top:7px solid transparent;border-bottom:7px solid transparent;
  border-left:12px solid var(--ink-strong);margin-left:3px;
}

/* ---------- 6  Trust ---------- */
.sec-trust{padding-block:clamp(3.25rem,7vw,5.5rem);}
.trust-grid{display:grid;gap:clamp(1.75rem,4vw,3rem);}
/* Haarlinie je Punkt: sie gliedert die Leiste, ohne eine sichtbare Ueberschrift
   zu brauchen. Dieselbe Gliederung tragen die Schritte im Ablauf. */
.trust-list{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem;}
.trust-list li{padding-top:1.15rem;border-top:1px solid var(--line);}
.trust-list h3{margin-bottom:.5rem;font-size:1.055rem;}
.trust-list p{color:var(--ink-dim);font-size:var(--fs-small);line-height:1.66;}
.trust-figure{margin:0;border-radius:var(--r-m);overflow:hidden;background:var(--tint);}
.trust-figure img{width:100%;height:100%;object-fit:cover;}
.trust-note{
  margin-top:clamp(1.75rem,3.5vw,2.75rem);padding-top:1.4rem;
  border-top:1px solid var(--line);
  color:var(--ink-dim);font-size:.83rem;line-height:1.62;max-width:none;
}
@media (min-width:720px){
  .trust-list{grid-template-columns:1fr 1fr;gap:1.9rem 2.5rem;}
}
@media (min-width:1000px){
  .trust-grid{grid-template-columns:minmax(0,1fr) minmax(280px,34%);align-items:start;}
  .trust-figure{position:sticky;top:calc(var(--nav-h) + 1.5rem);aspect-ratio:4/3;}
}

/* ---------- 7  Behandlungen ---------- */
.tiles{display:grid;gap:clamp(1.25rem,2.6vw,2rem);}
@media (min-width:760px){ .tiles{grid-template-columns:1fr 1fr;} }

.tile{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.tile:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(24,52,70,.10);border-color:var(--line-soft);}
.tile-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--tint);}
.tile-media img,.tile-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.tile-media video{opacity:0;transition:opacity .5s var(--ease-soft);}
.tile-media.playing video{opacity:1;}
.tile-body{padding:clamp(1.35rem,2.6vw,1.9rem);display:flex;flex-direction:column;gap:.75rem;flex:1;}
.tile-body h3{margin-bottom:.1rem;}
.tile-body p{color:var(--ink-dim);font-size:var(--fs-small);line-height:1.68;margin:0;}
.tile-link{
  margin-top:auto;align-self:flex-start;
  font-size:.885rem;font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(0,105,166,.35);padding-bottom:2px;
  transition:border-color .25s var(--ease);
}
.tile-link:hover{border-color:var(--signal-deep);}

/* ---------- 7b  Zahnbogen (WebGL) ---------- */
.arch{
  margin:clamp(2.5rem,5vw,4rem) 0 0;
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  align-items:center;
}
.arch-stage{
  position:relative;aspect-ratio:4/3;
  border-radius:var(--r-m);overflow:hidden;
  background:linear-gradient(168deg,#FFFFFF 0%,#EAF1F7 100%);
  border:1px solid var(--line);
}
.arch-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.arch-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s var(--ease-soft);}
.arch.live .arch-canvas{opacity:1;}
.arch.live .arch-fallback{opacity:0;transition:opacity .6s var(--ease-soft);}
.arch-steps{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:none;gap:0 .9rem;list-style:none;margin:0;
  padding:1rem clamp(1rem,3vw,1.75rem);
  grid-template-columns:repeat(3,1fr);
}
.arch.live .arch-steps{display:grid;}
.arch-steps li{
  padding-top:.6rem;border-top:2px solid var(--line);
  font-size:clamp(.63rem,1.5vw,.775rem);letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;line-height:1.35;
  color:var(--ink-dim);
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.arch-steps li.on{color:var(--ink-strong);border-top-color:var(--brand);}
@media (max-width:560px){
  .arch-steps{gap:0 .9rem;padding-inline:1rem;}
  .arch-steps li{font-size:.6rem;letter-spacing:.045em;}
}
.arch-caption h3{margin:0 0 .8rem;}
.arch-caption p:last-child{color:var(--ink-dim);font-size:var(--fs-small);line-height:1.68;max-width:52ch;}
@media (min-width:900px){
  .arch{grid-template-columns:minmax(0,58%) minmax(0,1fr);}
}

/* ---------- 7c  Leistungsumfang ---------- */
.scope{
  margin-top:clamp(2.5rem,5vw,4rem);
  padding:clamp(1.6rem,3.4vw,2.5rem);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  display:grid;gap:clamp(1.25rem,3vw,2.5rem);
}
.scope-head h3{margin-bottom:.7rem;}
.scope-head p{color:var(--ink-dim);font-size:var(--fs-small);margin:0;}
.scope-list{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;}
.scope-list li{
  position:relative;padding-left:1.85rem;
  font-size:var(--fs-small);line-height:1.62;color:var(--ink);
}
.scope-list li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:11px;height:6px;
  border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}
@media (min-width:860px){ .scope{grid-template-columns:minmax(0,34%) minmax(0,1fr);} }

/* ---------- 8  Ablauf ---------- */
.steps-wrap{display:grid;gap:clamp(2rem,4vw,3.25rem);align-items:start;}
.steps{list-style:none;margin:0;padding:0;}
.step{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem;
  padding:clamp(1.4rem,2.8vw,1.9rem) 0;
  border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line);}
.step-num{
  font-size:.92rem;font-weight:600;color:var(--brand);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;padding-top:.16em;
}
.step-body h3{margin-bottom:.35rem;}
.step-time{
  margin:0 0 .7rem;font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:var(--ink-dim);
}
.step-body p:last-child{color:var(--ink-dim);font-size:var(--fs-small);line-height:1.68;margin:0;}
.steps-figure{margin:0;border-radius:var(--r-m);overflow:hidden;}
.steps-figure img{width:100%;height:auto;}
@media (min-width:960px){
  .steps-wrap{grid-template-columns:minmax(0,1fr) minmax(300px,38%);}
  .steps-figure{position:sticky;top:calc(var(--nav-h) + 1.5rem);}
}

.after{margin-top:clamp(2.25rem,4.5vw,3.25rem);}
.after-list{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem;}
.after-list li{
  padding:clamp(1.25rem,2.4vw,1.65rem);
  background:var(--tint);border-radius:var(--r-m);
}
.after-list h3{font-size:1.02rem;margin-bottom:.45rem;}
.after-list p{margin:0;color:var(--ink-dim);font-size:.875rem;line-height:1.66;}
@media (min-width:820px){ .after-list{grid-template-columns:repeat(3,1fr);} }

/* ---------- 9  Team ---------- */
.team-lead{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:start;}
.team-figure{margin:0;border-radius:var(--r-m);overflow:hidden;background:var(--surface);}
.team-figure img{width:100%;height:auto;}
.team-people{display:grid;gap:clamp(1.25rem,2.5vw,1.75rem);}
.person{
  padding:clamp(1.35rem,2.6vw,1.85rem);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
}
.person h3{margin-bottom:.3rem;}
.person-role{
  margin:0 0 1.1rem;font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:var(--ink-dim);
}
.person p{color:var(--ink-dim);font-size:var(--fs-small);line-height:1.7;}
.person-quote{
  margin:0 0 1.25rem;padding:.15rem 0 .15rem 1.15rem;
  border-left:2px solid var(--brand);
}
.person-quote p{margin:0;color:var(--ink-strong);font-size:1.02rem;line-height:1.55;font-weight:500;}
.person-facts{list-style:none;margin:0 0 .85rem;padding:0;display:grid;gap:.55rem;}
.person-facts li{
  font-size:var(--fs-small);color:var(--ink);line-height:1.55;
  padding-left:1.1rem;position:relative;
}
.person-facts li::before{
  content:"";position:absolute;left:0;top:.66em;width:5px;height:5px;
  border-radius:50%;background:var(--line);
}
.person-add{font-size:.845rem;}
@media (min-width:900px){
  .team-lead{grid-template-columns:minmax(240px,30%) minmax(0,1fr);}
  .team-figure{position:sticky;top:calc(var(--nav-h) + 1.5rem);}
  .team-people{grid-template-columns:1fr 1fr;gap:2.75rem;}
}

.staff{
  margin-top:clamp(2.5rem,5vw,3.75rem);padding-top:clamp(2rem,4vw,2.75rem);
  border-top:1px solid var(--line);
  display:grid;gap:clamp(1.25rem,3vw,2.5rem);
}
.staff h3{margin-bottom:.7rem;}
.staff p{color:var(--ink-dim);font-size:var(--fs-small);line-height:1.7;}
.staff-quote{margin:0;padding:.15rem 0 .15rem 1.15rem;border-left:2px solid var(--brand);}
.staff-quote p{
  margin:0 0 .6rem;color:var(--ink-strong);font-size:1.02rem;line-height:1.55;font-weight:500;
}
.staff-quote footer{font-size:var(--fs-small);color:var(--ink-dim);}
@media (min-width:860px){
  .staff{grid-template-columns:minmax(0,1fr) minmax(0,38%);align-items:start;}
}

/* ---------- 10  Galerie ---------- */
.gallery{margin-top:clamp(1rem,3vw,2rem);}
.gal-track{
  display:flex;gap:clamp(.85rem,2vw,1.35rem);
  list-style:none;margin:0;
  padding:.25rem var(--gut) 1.5rem;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.gal-track::-webkit-scrollbar{display:none;}
/* Die Spur ist tastaturbedienbar: mit dem Tabulator erreichbar, danach mit den
   Pfeiltasten seitlich scrollbar. Der Fokusrahmen sitzt innen, damit er am
   randlosen Band nicht abgeschnitten wird. */
.gal-track:focus-visible{outline:2px solid var(--signal);outline-offset:-4px;border-radius:var(--r-m);}
.gal-item{flex:0 0 auto;width:min(82vw,560px);scroll-snap-align:center;}
.gal-item figure{margin:0;}
.gal-item img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-m);background:var(--tint);
}
.gal-item figcaption{
  margin-top:.75rem;font-size:var(--fs-small);color:var(--ink-dim);
}
.gal-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.gal-status{margin:0;font-size:var(--fs-small);color:var(--ink-dim);font-variant-numeric:tabular-nums;}
.gal-nav{display:flex;gap:.5rem;}
.gal-btn{
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);
  color:var(--ink-strong);font-size:1.05rem;cursor:pointer;
  transition:border-color .25s var(--ease),transform .25s var(--ease),background-color .25s var(--ease);
}
.gal-btn:hover:not(:disabled){border-color:var(--ink-dim);transform:translateY(-2px);}
.gal-btn:disabled{opacity:.38;cursor:default;}
@media (min-width:900px){ .gal-item{width:min(42vw,520px);} }

/* ---------- 11  Fragen ---------- */
.faq{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item h3{margin:0;font-size:inherit;letter-spacing:normal;}
.faq-q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem;
  padding:1.35rem .35rem;
  background:transparent;border:0;cursor:pointer;
  font:inherit;text-align:left;color:var(--ink-strong);
  transition:color .25s var(--ease);
}
.faq-q:hover{color:var(--signal);}
.faq-t{font-size:1.055rem;font-weight:600;line-height:1.4;letter-spacing:-.008em;}
.faq-ico{
  position:relative;flex:0 0 auto;width:18px;height:18px;margin-top:.28em;
}
.faq-ico::before,.faq-ico::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--signal);border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .38s var(--ease),opacity .3s var(--ease);
}
.faq-ico::before{width:16px;height:2px;}
.faq-ico::after{width:2px;height:16px;}
.faq-q[aria-expanded="true"] .faq-ico::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.faq-a{height:0;overflow:hidden;transition:height .42s var(--ease);}
.faq-inner{padding:0 3rem 1.5rem .35rem;}
.faq-inner p{margin:0;color:var(--ink-dim);font-size:var(--fs-small);line-height:1.72;}

/* ---------- 12  Kontakt ---------- */
.contact-grid{display:grid;gap:clamp(1.5rem,3.5vw,2.5rem);align-items:start;}
@media (min-width:980px){ .contact-grid{grid-template-columns:minmax(0,1fr) minmax(320px,38%);} }

.form-card{
  position:relative;
  padding:clamp(1.5rem,3.2vw,2.4rem);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
}
.f-row{display:grid;gap:1.05rem;}
@media (min-width:600px){ .f-row{grid-template-columns:1fr 1fr;} }
.f-field{margin-bottom:1.05rem;}
.f-row .f-field{margin-bottom:0;}
.f-row + .f-row,.f-row + .f-field{margin-top:1.05rem;}
.f-field label,.f-check label{
  display:block;margin-bottom:.42rem;
  font-size:.865rem;font-weight:600;color:var(--ink-strong);
}
.req{color:var(--signal);margin-left:.1em;}
.f-field input,.f-field select,.f-field textarea{
  width:100%;
  padding:.82rem .95rem;
  background:var(--base);
  border:1px solid var(--line);border-radius:var(--r-s);
  font:inherit;font-size:.97rem;color:var(--ink-strong);
  transition:border-color .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease);
}
.f-field textarea{resize:vertical;min-height:110px;line-height:1.55;}
/* Eigener Pfeil: das Standardsteuerelement sieht auf jedem System anders aus,
   und ohne Pfeil sieht das Feld wie ein Textfeld aus. Die Grafik steckt als
   Daten-URI im Stylesheet, es gibt also keine zusaetzliche Anfrage. */
.f-field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235C6E75' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:12px 8px;
}
/* Der Platzhalter muss lesbar bleiben, ohne wie eine Eingabe auszusehen.
   4.56:1 auf dem Feldgrund --base und 4.86:1 auf dem Fokusgrund --surface,
   dabei immer noch deutlich heller als der Eingabetext --ink-strong. */
.f-field input::placeholder,.f-field textarea::placeholder{color:#64747A;opacity:1;}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  border-color:var(--signal);background:var(--surface);
  box-shadow:0 0 0 3px rgba(0,105,166,.13);
  outline:none;
}
.f-field.invalid input,.f-field.invalid select,.f-field.invalid textarea,
.f-check.invalid input{border-color:#A6301F;}
.f-err{margin:0;font-size:.82rem;color:#8E2A1B;line-height:1.5;}
.f-field .f-err:not(:empty),.f-check .f-err:not(:empty){margin-top:.42rem;}

.f-check{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .75rem;
  margin:1.35rem 0 1.1rem;
}
.f-check input{
  width:20px;height:20px;margin:.2rem 0 0;accent-color:var(--signal);cursor:pointer;
}
.f-check label{margin:0;font-weight:400;font-size:.865rem;line-height:1.55;color:var(--ink);}
.f-check .f-err{grid-column:2;}
.f-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.f-req-hint{margin:0 0 1.15rem;font-size:.8rem;color:var(--ink-dim);}

#submitBtn{position:relative;}
.btn-spin{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  display:none;
}
#submitBtn.loading .btn-spin{display:block;animation:spin .8s linear infinite;}
#submitBtn[disabled]{opacity:.62;cursor:default;transform:none;box-shadow:none;}
@keyframes spin{to{transform:rotate(360deg);}}
.f-status{margin:.85rem 0 0;font-size:.85rem;color:var(--ink-dim);min-height:1.2em;}

.f-panel{padding:1.5rem 0 .25rem;}
.f-panel h3{margin-bottom:.55rem;}
.f-panel p{color:var(--ink-dim);font-size:var(--fs-small);margin-bottom:1.15rem;}
.f-note{
  margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line-soft);
  font-size:.82rem;color:var(--ink-dim);line-height:1.66;
}

/* Hinweis auf den Vorfuehr-Modus. Ruhiger Hinweis in der Farbwelt der
   Signalfarbe, kein Alarmton. Steht ueber dem Formular und noch einmal in
   der Bestaetigung; main.js nimmt beide heraus, sobald FORM_ENDPOINT
   gesetzt ist. */
.form-card .f-demo,.f-panel .f-demo{
  margin:0 0 1.35rem;padding:.78rem .95rem;
  background:var(--signal-soft);border:1px solid #C2DAEC;border-radius:var(--r-s);
  font-size:.85rem;line-height:1.62;color:var(--ink);
}
.f-demo strong{font-weight:600;color:var(--ink-strong);}
.f-demo a{color:var(--signal-deep);white-space:nowrap;}

.contact-aside{display:grid;gap:1.15rem;}
.card{
  padding:clamp(1.35rem,2.6vw,1.75rem);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
}
.card h3{margin-bottom:.85rem;font-size:1.02rem;}
.card address{font-style:normal;color:var(--ink-dim);font-size:var(--fs-small);line-height:1.72;}
.card p{color:var(--ink-dim);font-size:var(--fs-small);}
.kv{margin:1.15rem 0 0;display:grid;gap:.5rem;}
.kv > div{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.75rem;font-size:var(--fs-small);}
.kv dt{color:var(--ink-dim);}
.kv dd{margin:0;color:var(--ink-strong);}
.kv dd a{font-weight:600;text-decoration:none;}
.card-alert{background:var(--signal-soft);border-color:#C9DFEE;}
.card-alert h3{font-size:.94rem;}
.alert-value{margin:0;font-size:1.32rem;font-weight:600;}
.alert-value a{color:var(--signal-deep);text-decoration:none;}

.open-chip{
  display:inline-block;margin:0 0 1.1rem;
  padding:.5rem .95rem;border-radius:var(--r-s);
  background:var(--signal-soft);color:var(--signal-deep);
  font-size:.83rem;font-weight:600;line-height:1.4;
}
.open-chip.closed{background:var(--tint);color:var(--ink-dim);}
.hours{width:100%;border-collapse:collapse;font-size:.845rem;}
.hours th,.hours td{padding:.55rem .4rem;text-align:left;vertical-align:top;}
.hours thead th{
  font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:600;border-bottom:1px solid var(--line);
}
.hours tbody th{font-weight:500;color:var(--ink-strong);}
.hours tbody td{color:var(--ink-dim);}
.hours tbody tr + tr th,.hours tbody tr + tr td{border-top:1px solid var(--line-soft);}
.hours th:first-child,.hours td:first-child{padding-left:0;}

/* ---------- 13  Footer ---------- */
/* Flaechig im Basiston: das Seitenende traegt keinen Verlauf, damit die iOS-Leiste
   an der Unterkante genau den Basiston abtastet. */
.foot{
  background:var(--base);
  border-top:1px solid var(--line);
  padding-top:clamp(2.75rem,5vw,4rem);
  padding-bottom:calc(clamp(2rem,4vw,3rem) + env(safe-area-inset-bottom,0px));
}
@media (max-width:1079px){ .foot{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom,0px));} }
.foot-claim{
  margin:0 0 clamp(1.75rem,3.5vw,2.5rem);
  font-size:var(--fs-lead);color:var(--ink-strong);font-weight:500;
}
.foot-grid{display:grid;gap:1.75rem;}
.foot-mark{width:auto;height:56px;opacity:.9;}
.foot-col h2{
  margin:0 0 .8rem;font-size:var(--fs-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-dim);font-weight:600;
}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem;}
.foot-col li{font-size:var(--fs-small);color:var(--ink-dim);line-height:1.55;}
.foot-col a{color:var(--ink);text-decoration:none;}
.foot-col a:hover{color:var(--signal);}
.foot-nav{gap:.42rem;}
.foot-legal{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.35rem;
  border-top:1px solid var(--line);
  font-size:.82rem;color:var(--ink-dim);
}
.foot-legal p{margin:0;}
.foot-links{display:flex;gap:1.25rem;}
.foot-links a{color:var(--ink-dim);text-decoration:none;}
.foot-links a:hover{color:var(--signal);}
.foot-ext{margin:1.1rem 0 0;font-size:.8rem;color:var(--ink-dim);}
@media (min-width:760px){
  .foot-grid{grid-template-columns:auto repeat(3,minmax(0,1fr));gap:2.5rem;align-items:start;}
}

/* ---------- 14  Einblendungen ---------- */
/* Nur wenn die Seite animieren darf. html.anim setzt das Boot-Snippet vor dem
   ersten Paint; ohne Skripte oder bei reduzierter Bewegung steht alles sofort. */
html.anim .rv{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease-soft),transform .85s var(--ease-soft);
  will-change:opacity,transform;
}
html.anim .rv.in{opacity:1;transform:none;}
html.anim .rv.in{will-change:auto;}

/* Hero: die Zeilen laufen gestaffelt ein, ruhig und mittig. Zuerst die
   Zeile ueber dem Titel, dann der Titel Wort fuer Wort, danach Nachsatz,
   Schaltflaechen und Angaben. */
html.anim .hero-copy > *:not(.hero-title){opacity:0;transform:translateY(20px);}
html.anim .hero-copy.in > *:not(.hero-title){
  opacity:1;transform:none;
  transition:opacity .95s var(--ease-soft),transform .95s var(--ease-soft);
}
html.anim .hero-title .w{
  display:inline-block;opacity:0;transform:translateY(.42em);
}
html.anim .hero-copy.in .hero-title .w{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease-soft),transform .8s var(--ease-soft);
}
html.anim .hero-scroll,html.anim .video-toggle{
  opacity:0;transition:opacity .9s var(--ease-soft) .9s;
}
html.anim .hero-copy.in ~ .hero-scroll,
html.anim .hero-copy.in ~ .video-toggle{opacity:1;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .rv,.hero-copy > *,.hero-title .w{opacity:1 !important;transform:none !important;}
  .hero-scroll,.video-toggle{opacity:1 !important;}
}