/* taucherarzt.online - shared stylesheet
   Premium medical + underwater aesthetic. Always light (no automatic dark
   theme); the navy bands (hero, contact, footer) are design choices.
   Long German compound words are never hyphenated or broken: no
   hyphens:auto and no overflow-wrap:anywhere/break-word on text blocks;
   fluid font sizes (clamp) keep them inside narrow viewports instead. */

/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face{
  font-family:"Manrope";
  src:url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --abyss:#04182b;
  --deep:#072a45;
  --ocean:#0b4466;
  --teal:#0f7c8c;
  --turquoise:#19a7b5;
  --cyan:#5fd4e0;
  --gold:#f2b01e;
  --gold-hover:#f7c44a;
  --teal-ink:#0b6f7d;          /* turquoise family, dark enough for text/buttons on light (>=4.5:1) */
  --bg:#f4f8fb;
  --mist:#eaf3f8;              /* lower end of the light blue gradient */
  --surface:#ffffff;
  --line:#dde7ee;
  --ink:#0c1f2e;
  --ink-soft:#4a6072;

  --font-display:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter:clamp(20px, 5vw, 48px);
  --header-h:76px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow-card:0 1px 2px rgba(4,24,43,.05), 0 18px 40px -24px rgba(4,24,43,.28);
  --focus:var(--teal-ink);

  color-scheme:light;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) - 8px);
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  overflow-x:clip;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1.0625rem, 1rem + .15vw, 1.125rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.nav-open{overflow:hidden;}
h1,h2,h3{
  font-family:var(--font-display);
  color:inherit;
  margin:0;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
}
p{margin:0;}
img,svg{display:block; max-width:100%;}
a{color:var(--teal-ink);}
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:6px;
}
/* The surfaces that are dark get a cyan ring, light ones a teal ring */
.hero,.contact,.site-footer,.page-hero,.nav{--focus:var(--cyan);}
/* Programmatic focus targets (sections after a menu jump) are not controls:
   no ring around a whole section */
[tabindex="-1"]:focus{outline:none;}

.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.wrap{
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.skip-link{
  position:fixed; left:12px; top:-80px; z-index:300;
  background:var(--abyss); color:#fff;
  padding:12px 20px; border-radius:10px;
  font-weight:600; text-decoration:none;
  border:2px solid var(--cyan);
  transition:top .15s ease;
  --focus:var(--cyan);
}
.skip-link:focus{top:12px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:0 28px;
  border-radius:999px;
  font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:-.005em;
  line-height:1.2; text-decoration:none; text-align:center;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn svg{width:20px; height:20px; flex:none;}
.btn-primary{
  /* Appointment CTA is deliberately signal yellow so it stands out on every
     surface (navy text on #f2b01e = 10:1) */
  background:var(--gold); color:var(--abyss);
  box-shadow:0 10px 26px -12px rgba(242,176,30,.65);
}
.btn-primary:hover{background:var(--gold-hover); box-shadow:0 14px 30px -12px rgba(242,176,30,.75);}
.btn-primary:visited{color:var(--abyss);}
.btn-ghost{
  color:#fff; border-color:rgba(255,255,255,.62); background:rgba(255,255,255,.04);   /* outline >=3:1 on every hero shade */
}
.btn-ghost:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.85);}
.btn-ghost:visited{color:#fff;}

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-body);
  font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  line-height:1.5;
  color:var(--teal-ink);
}
.eyebrow::before{
  content:""; flex:none; width:28px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--turquoise),var(--cyan));
}
.hero .eyebrow,.contact .eyebrow{color:var(--cyan);}

/* ---------- Header ---------- */
/* NOTE: no backdrop-filter / transform / filter on the header or any of its
   ancestors - they would become the containing block of the position:fixed
   mobile drawer (.nav) and collapse it to the header's height. */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  color:#fff;
  --focus:var(--cyan);
  transition:background-color .3s ease, box-shadow .3s ease, height .3s var(--ease), color .3s ease;
}
.site-header.is-scrolled{
  height:64px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 1px 0 var(--line), 0 10px 30px -16px rgba(4,24,43,.3);
  --focus:var(--teal-ink);
}
.header-inner{
  height:100%;
  max-width:1360px; margin-inline:auto;
  padding-inline:clamp(16px, 2.5vw, 40px);
  display:flex; align-items:center; gap:14px;
}
.brand{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:12px;
  min-height:44px;
  color:inherit; text-decoration:none;
  flex:0 1 auto; min-width:0;
}
.brand img{
  width:40px; height:40px; border-radius:50%; flex:none;
  object-fit:cover;
  box-shadow:0 0 0 2px rgba(95,212,224,.6);
}
.site-header.is-scrolled .brand img{box-shadow:0 0 0 2px rgba(11,111,125,.35);}
.brand-text{display:flex; flex-direction:column; line-height:1.2; min-width:0;}
.brand-text strong{
  font-family:var(--font-display); font-weight:800; font-size:.98rem; letter-spacing:-.01em;
  white-space:nowrap;
}
.brand-text span{font-size:.74rem; letter-spacing:.02em; opacity:.8; white-space:nowrap;}

.menu-toggle{
  position:relative; z-index:2;
  margin-left:auto; flex:none;
  width:48px; height:48px; padding:0;
  display:grid; place-items:center;
  background:transparent; color:inherit;
  border:1.5px solid rgba(255,255,255,.55); border-radius:50%;
  cursor:pointer;
  transition:border-color .3s ease, background-color .2s ease;
}
.site-header.is-scrolled .menu-toggle{border-color:var(--line);}
.menu-toggle:hover{background:rgba(255,255,255,.1);}
.site-header.is-scrolled .menu-toggle:hover{background:var(--bg);}
.bars{position:relative; display:block; width:20px; height:14px;}
.bars i{
  position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor;
  transition:transform .3s var(--ease), opacity .2s ease, top .3s var(--ease);
}
.bars i:nth-child(1){top:0;}
.bars i:nth-child(2){top:6px;}
.bars i:nth-child(3){top:12px;}
body.nav-open .bars i:nth-child(1){top:6px; transform:rotate(45deg);}
body.nav-open .bars i:nth-child(2){opacity:0;}
body.nav-open .bars i:nth-child(3){top:6px; transform:rotate(-45deg);}
body.nav-open .site-header{
  background:transparent; color:#fff; box-shadow:none; height:var(--header-h);
  --focus:var(--cyan);
}
body.nav-open .site-header .menu-toggle{border-color:rgba(255,255,255,.55);}

/* Mobile drawer (default = below 900px) */
.nav{
  position:fixed; inset:0; z-index:1;
  display:flex; flex-direction:column; gap:2px;
  padding:calc(var(--header-h) + 12px) var(--gutter) calc(28px + env(safe-area-inset-bottom));
  color:#fff;
  background:
    radial-gradient(700px 360px at 90% 8%, rgba(25,167,181,.22), transparent 65%),
    linear-gradient(180deg,var(--abyss) 0%, var(--deep) 62%, var(--ocean) 100%);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
body.nav-open .nav{opacity:1; visibility:visible; transition-delay:0s;}
.nav > *{
  opacity:0; transform:translateY(12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
body.nav-open .nav > *{opacity:1; transform:none; transition-delay:calc(var(--n,0) * 50ms + 80ms);}
.nav > :nth-child(1){--n:0;} .nav > :nth-child(2){--n:1;} .nav > :nth-child(3){--n:2;}
.nav > :nth-child(4){--n:3;} .nav > :nth-child(5){--n:4;} .nav > :nth-child(6){--n:5;}
.nav-link{
  display:flex; align-items:center; justify-content:space-between;
  min-height:58px; padding:0 4px;
  font-family:var(--font-display); font-weight:700; font-size:1.4rem; letter-spacing:-.015em;
  color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.nav-link[aria-current="page"]{color:var(--cyan);}
.nav-link:hover{color:var(--cyan);}
.nav .btn-primary{margin-top:26px; min-height:58px; font-size:1.1rem;}
.nav-phone{
  display:flex; align-items:center; justify-content:center; gap:12px;
  min-height:58px; margin-top:8px;
  font-family:var(--font-display); font-weight:700; font-size:1.25rem; letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  color:#fff; text-decoration:none;
}
.nav-phone svg{width:22px; height:22px; color:var(--cyan); flex:none;}

/* Desktop navigation */
@media (min-width:900px){
  .menu-toggle{display:none;}
  .nav{
    position:static; inset:auto; z-index:auto;
    margin-left:auto; padding:0;
    flex-direction:row; align-items:center; gap:2px;
    background:none; color:inherit;
    overflow:visible;
    opacity:1; visibility:visible; transition:none;
  }
  .nav > *{opacity:1; transform:none; transition:none;}
  .nav-link{
    position:relative; min-height:44px;
    padding:0 clamp(8px, 1vw, 14px);
    font-family:var(--font-body); font-weight:500; font-size:.94rem; letter-spacing:0;
    color:rgba(255,255,255,.9);
    border-bottom:0;
    transition:color .2s ease;
  }
  .nav-link::after{
    content:""; position:absolute; left:clamp(8px,1vw,14px); right:clamp(8px,1vw,14px); bottom:5px; height:2px; border-radius:2px;
    background:var(--cyan);
    transform:scaleX(0); transform-origin:left center;
    transition:transform .35s var(--ease);
  }
  .nav-link:hover,.nav-link[aria-current="page"]{color:#fff;}
  .nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1);}
  .site-header.is-scrolled .nav-link{color:var(--ink-soft);}
  .site-header.is-scrolled .nav-link:hover,
  .site-header.is-scrolled .nav-link[aria-current="page"]{color:var(--ink);}
  .site-header.is-scrolled .nav-link::after{background:var(--teal-ink);}
  /* the nav sits on the white header here: teal ring, not the drawer's cyan */
  .site-header.is-scrolled .nav{--focus:var(--teal-ink);}
  .nav .btn-primary{margin:0 6px 0 clamp(6px,1vw,14px); min-height:46px; padding:0 22px; font-size:.94rem;}
  .nav-phone{
    margin:0; min-height:44px; gap:8px; padding:0 8px;
    font-family:var(--font-body); font-weight:600; font-size:.94rem; color:inherit;
    white-space:nowrap;
  }
  .nav-phone svg{width:18px; height:18px; color:var(--cyan);}
  .site-header.is-scrolled .nav-phone svg{color:var(--teal-ink);}
  .nav-phone:hover .nav-phone-num{text-decoration:underline; text-underline-offset:4px;}
}
/* Compact tier: icon-only phone so everything fits on one line */
@media (min-width:900px) and (max-width:1179px){
  .nav-phone{width:44px; justify-content:center; padding:0;}
  .nav-phone-num{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; margin:-1px;
  }
}
@media (max-width:420px){
  .brand img{width:36px; height:36px;}
  .brand{gap:10px;}
  /* may wrap instead of running under the menu button (text spacing / large text) */
  .brand-text strong,.brand-text span{white-space:normal;}
  .brand-text strong{font-size:.86rem;}
  .brand-text span{font-size:.68rem;}
}
@media (max-width:899px){
  .site-header{--header-h:68px;}
  .site-header.is-scrolled{height:60px;}
}

/* ---------- Mobile quick-action bar ---------- */
.mobile-bar{display:none;}
@media (max-width:899px){
  body:not(.page){padding-bottom:calc(76px + env(safe-area-inset-bottom));}
  /* keyboard focus must not end up behind the fixed bar */
  html{scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom));}
  .mobile-bar{
    display:flex; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 -10px 28px -16px rgba(4,24,43,.35);
  }
  .mobile-bar a{
    flex:1 1 0; min-width:0;
    display:flex; align-items:center; justify-content:center; gap:8px;
    min-height:52px; padding:0 10px;
    border-radius:999px;
    font-family:var(--font-display); font-weight:700; font-size:.98rem;
    text-decoration:none; text-align:center; line-height:1.2;
  }
  .mobile-bar svg{width:20px; height:20px; flex:none;}
  .mobile-bar .call{color:var(--ink); background:var(--bg); border:1.5px solid var(--line);}
  .mobile-bar .book{color:var(--abyss); background:var(--gold); border:1.5px solid var(--gold);}
}

/* Very short viewports (landscape phones, 200% zoom on a laptop): the fixed bar
   would take a large share of the screen, so it scrolls with the page end */
@media (max-width:899px) and (max-height:520px){
  html{scroll-padding-bottom:0;}
  body:not(.page){padding-bottom:0;}
  .mobile-bar{position:static; box-shadow:none;}
}

@media (max-width:380px){
  .mobile-bar{gap:8px; padding-inline:8px;}
  .mobile-bar a{gap:6px; padding:0 6px; font-size:.9rem;}
  .mobile-bar svg{width:18px; height:18px;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center;
  color:#fff;
  background:linear-gradient(180deg, var(--abyss) 0%, var(--deep) 38%, var(--ocean) 74%, var(--teal) 132%);
  padding:calc(var(--header-h) + clamp(36px, 7vw, 96px)) 0 clamp(120px, 15vw, 210px);
}
@media (min-width:1000px){
  .hero{min-height:max(88vh, 680px);}
}
.hero > .wrap{position:relative; z-index:2;}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
/* very slow, subtle "water movement" glow (60s) */
.hero-bg::before{
  content:""; position:absolute; inset:-25%;
  background:
    radial-gradient(40% 36% at 78% 30%, rgba(25,167,181,.26), transparent 70%),
    radial-gradient(46% 40% at 18% 78%, rgba(15,124,140,.22), transparent 70%);
  animation:waterDrift 60s ease-in-out infinite alternate;
}
@keyframes waterDrift{
  from{transform:translate3d(-3%,-2%,0) scale(1);}
  to{transform:translate3d(3%,3%,0) scale(1.08);}
}
/* calm area behind the text column */
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 80% at 24% 46%, rgba(4,24,43,.6), rgba(4,24,43,0) 72%),
    linear-gradient(180deg, rgba(4,24,43,.25), rgba(4,24,43,0) 30%);
}
@media (max-width:999px){
  .hero-bg::after{background:linear-gradient(180deg, rgba(4,24,43,.55), rgba(4,24,43,.3) 70%, rgba(4,24,43,.1));}
}
.rays{position:absolute; inset:0 0 22% 0; overflow:hidden;}
.rays i{
  position:absolute; display:block;
  top:-14%; left:var(--x); width:var(--w); height:135%;
  transform-origin:50% 0;
  transform:rotate(var(--r));
  background:linear-gradient(180deg, rgba(150,230,240,var(--o)) 0%, rgba(150,230,240,0) 80%);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  animation:raySway var(--d) ease-in-out var(--delay) infinite alternate;
  will-change:transform;
}
.rays i:nth-child(1){--x:4%;  --w:16vw; --r:15deg; --o:.17; --d:22s; --delay:-4s;}
.rays i:nth-child(2){--x:24%; --w:9vw;  --r:19deg; --o:.12; --d:18s; --delay:-11s;}
.rays i:nth-child(3){--x:44%; --w:19vw; --r:13deg; --o:.15; --d:25s; --delay:-17s;}
.rays i:nth-child(4){--x:66%; --w:10vw; --r:20deg; --o:.19; --d:16s; --delay:-2s;}
.rays i:nth-child(5){--x:84%; --w:14vw; --r:16deg; --o:.12; --d:20s; --delay:-9s;}
@keyframes raySway{
  from{transform:rotate(calc(var(--r) - 6deg)) translateX(-3vw);}
  to{transform:rotate(calc(var(--r) + 6deg)) translateX(3vw);}
}
@media (max-width:699px){
  .rays i:nth-child(n+4){display:none;}
  .rays i{--w:28vw;}
}
#ocean{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; opacity:0; transition:opacity 1.2s ease;}
#ocean.is-ready{opacity:.9;}
/* Keep the moving scene away from the text column: on wide screens it is
   masked down over the left (text) side, on narrow screens - where text
   fills the hero - the whole layer stays dimmer. */
@media (min-width:900px){
  #ocean{-webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.4) 46%, #000 64%); mask-image:linear-gradient(90deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.4) 46%, #000 64%);}
  #ocean.is-ready{opacity:1;}
}

.hero-wave{
  position:absolute; left:0; right:0; bottom:-1px; z-index:1;
  width:100%; height:clamp(48px, 7vw, 112px);
  pointer-events:none;
}

.hero-grid{display:grid; gap:clamp(32px, 5vw, 72px); align-items:center;}
.hero-text{min-width:0; max-width:46rem;}
.hero h1{
  margin:18px 0 22px;
  font-weight:800;
  font-size:clamp(1.15rem, .2rem + 4.4vw, 2.85rem);
  line-height:1.16; letter-spacing:-.025em;
  color:#fff;
  text-wrap:balance;
}
.hero .lede{
  max-width:56ch;
  font-size:clamp(.9rem, .5rem + 2.2vw, 1.14rem);
  line-height:1.7;
  color:rgba(255,255,255,.9);
}
.hero .eyebrow{font-size:clamp(.68rem, .5rem + .6vw, .78rem);}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin:clamp(24px,3vw,34px) 0 26px;}
.region-tag{
  display:inline-flex; align-items:center; gap:10px; max-width:100%;
  padding:10px 18px 10px 14px;
  border-radius:22px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-size:.9rem; font-weight:500; line-height:1.4; color:#fff;
}
.region-tag svg{width:18px; height:18px; flex:none; color:var(--cyan);}

.hero-visual{position:relative; display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;}
.hero-rings{display:none;}
.badge{
  display:inline-flex; align-items:center; gap:10px; max-width:100%;
  padding:11px 18px 11px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.6);
  font-family:var(--font-display); font-weight:600; font-size:.92rem; line-height:1.3; color:#fff;
}
.badge svg{width:20px; height:20px; flex:none; color:var(--cyan);}

@media (min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);}
  .hero h1{font-size:clamp(2rem, 1rem + 2.4vw, 2.85rem);}
  .hero-visual{
    display:block; margin:0;
    width:min(100%, 480px); aspect-ratio:1; justify-self:end;
  }
  .hero-rings{display:block; position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
  .badge{position:absolute; font-size:.98rem; padding:14px 22px 14px 16px; animation:floatY 9s ease-in-out infinite alternate;}
  .badge-1{top:15%; left:-8%;}
  .badge-2{bottom:17%; right:-2%; animation-duration:11s; animation-delay:-5s;}
}
@keyframes floatY{
  from{transform:translate3d(0,-7px,0);}
  to{transform:translate3d(0,7px,0);}
}
.sweep{transform-box:view-box; transform-origin:50% 50%; animation:spin 48s linear infinite;}
.ring-ticks{transform-box:view-box; transform-origin:50% 50%; animation:spin 240s linear infinite reverse;}
@keyframes spin{to{transform:rotate(360deg);}}
.ping{opacity:.5; animation:ping 7s ease-in-out infinite;}
.ping:nth-of-type(2){animation-delay:-2.4s;}
.ping:nth-of-type(3){animation-delay:-4.6s;}
@keyframes ping{0%,100%{opacity:.12;} 50%{opacity:.85;}}

/* ---------- Sections ---------- */
.section{position:relative; padding-block:clamp(72px, 9vw, 124px);}
.section-head{max-width:46rem; margin-bottom:clamp(36px, 5vw, 60px);}
.section-head h2{
  margin-top:14px;
  font-size:clamp(1.55rem, 1rem + 2.2vw, 2.55rem);
  font-weight:800; line-height:1.15;
  color:var(--ink);
  text-wrap:balance;
}
.section-head .lede{
  margin-top:18px; max-width:62ch;
  font-size:1.0625rem; color:var(--ink-soft);
}

/* reveal-on-scroll: hidden only once JS has flagged <html> */
.reveal{
  transition:opacity .65s var(--ease), transform .65s var(--ease);
  transition-delay:calc(var(--i, 0) * 80ms);
}
html.js .reveal:not(.is-visible){opacity:0; transform:translateY(16px);}

/* Qualifikation */
.qualifikation{background:var(--bg);}
.qual-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr);
  column-gap:clamp(36px, 6vw, 88px);
  border-bottom:1px solid var(--line);
}
@media (min-width:820px){
  .qual-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
.qual{
  position:relative;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:clamp(16px, 2.5vw, 26px); align-items:start;
  padding:clamp(26px, 3.2vw, 38px) 0;
  border-top:1px solid var(--line);
}
.qual::before{
  content:""; position:absolute; left:0; top:-1px; width:100%; height:2px;
  background:linear-gradient(90deg, var(--turquoise), rgba(25,167,181,0));
  transform:scaleX(0); transform-origin:left center;
  transition:transform .6s var(--ease);
}
.qual:hover::before{transform:scaleX(1);}
.qual-num{
  grid-area:auto;
  min-width:2.1ch;
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(2.3rem, 1.5rem + 2.4vw, 3.4rem); line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  color:var(--teal);
}
.qual-body h3{font-size:clamp(1.05rem, 1rem + .3vw, 1.2rem); font-weight:700; letter-spacing:-.01em; line-height:1.3; color:var(--ink);}
.qual-body p{margin-top:8px; font-size:.98rem; line-height:1.65; color:var(--ink-soft);}
.qual-icon{
  width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center;
  color:var(--teal-ink); background:rgba(25,167,181,.1);
  transition:background-color .3s ease, color .3s ease;
}
.qual:hover .qual-icon{background:var(--teal-ink); color:#fff;}
.qual-icon svg,.step-icon svg,.callout svg.callout-icon{
  width:24px; height:24px;
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
@media (max-width:519px){
  /* Compact rows on phones: number and icon share the first line, so the
     eight qualifications stay scannable without endless scrolling */
  .qual{grid-template-columns:minmax(0,1fr) auto; row-gap:8px; padding:22px 0;}
  .qual-body{grid-column:1 / -1; grid-row:2;}
  .qual-num{font-size:1.9rem;}
  .qual-icon{width:40px; height:40px; border-radius:12px;}
  .qual-icon svg{width:21px; height:21px;}
  .qual-body p{margin-top:4px;}
  .eyebrow{letter-spacing:.1em; font-size:.74rem; gap:10px;}
  .eyebrow::before{width:20px;}
}

/* Praxisspektrum */
.praxis{background:linear-gradient(180deg, var(--bg) 0%, var(--mist) 100%); padding-bottom:clamp(56px, 7vw, 96px);}
.praxis-line{
  position:absolute; left:0; top:0; width:100%; height:clamp(28px, 4vw, 56px);
  color:var(--turquoise); opacity:.45; pointer-events:none;
}
.steps-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px;}
.steps-head .section-head{margin-bottom:0; flex:1 1 30rem;}
.steps-controls{display:flex; gap:12px; flex:none;}
.steps-controls button{
  width:52px; height:52px; padding:0; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface); color:var(--teal-ink);
  border:1.5px solid var(--line);
  box-shadow:0 8px 20px -14px rgba(4,24,43,.4);
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease, transform .2s var(--ease);
}
.steps-controls button svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.steps-controls button:hover{background:var(--teal-ink); color:#fff; border-color:var(--teal-ink); transform:translateY(-1px);}
.steps-controls button[aria-disabled="true"]{opacity:.38; cursor:default; transform:none; background:var(--surface); color:var(--teal-ink); border-color:var(--line);}
.scroll-hint{
  display:flex; align-items:center; gap:14px;
  margin:clamp(28px, 4vw, 40px) 0 4px;
  font-size:.9rem; color:var(--ink-soft);
}
.scroll-hint::before{content:""; width:28px; height:1.5px; background:var(--turquoise); flex:none; border-radius:2px;}

.steps-strip{
  list-style:none; margin:0; padding:14px var(--gutter) 30px;
  margin-inline:calc(-1 * var(--gutter));
  scroll-padding-inline:var(--gutter);
  display:flex; gap:20px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:rgba(11,111,125,.35) transparent;
}
.steps-strip:focus-visible{outline-offset:-3px;}
.step{flex:0 0 min(272px, 78vw); scroll-snap-align:start; display:flex;}
.step-card{
  position:relative; width:100%;
  display:flex; flex-direction:column; gap:22px;
  padding:26px 24px 28px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line); border-radius:22px;
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--turquoise), var(--cyan));
  opacity:.8;
}
.step-card:hover{transform:translateY(-4px); box-shadow:0 2px 4px rgba(4,24,43,.05), 0 26px 46px -24px rgba(4,24,43,.35);}
.step-top{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.step-card .num{
  font-family:var(--font-display); font-weight:300; font-size:2.6rem; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--teal);
}
.step-icon{
  width:46px; height:46px; border-radius:14px;
  display:grid; place-items:center;
  color:var(--teal-ink); background:rgba(25,167,181,.1);
}
.step-card p{font-family:var(--font-display); font-weight:600; font-size:1.06rem; line-height:1.4; letter-spacing:-.01em; color:var(--ink);}

.callout.exam-note{
  display:flex; align-items:flex-start; gap:18px;
  margin-top:clamp(20px, 3vw, 34px);
  padding:clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px);
  background:rgba(25,167,181,.1);
  border:1px solid rgba(25,167,181,.22);
  border-left:5px solid var(--teal);
  border-radius:8px 22px 22px 8px;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.05rem, 1rem + .35vw, 1.22rem); line-height:1.5; letter-spacing:-.01em;
  color:var(--ink);
}
.callout svg.callout-icon{width:30px; height:30px; flex:none; color:var(--teal-ink); margin-top:1px;}

/* Kontakt */
.contact{
  color:#fff;
  background:
    radial-gradient(760px 380px at 88% 4%, rgba(25,167,181,.2), transparent 65%),
    radial-gradient(640px 360px at 6% 96%, rgba(15,124,140,.16), transparent 65%),
    linear-gradient(180deg, var(--deep) 0%, var(--abyss) 100%);
  padding-top:clamp(120px, 14vw, 190px);
  overflow:hidden;
}
.contact-wave{
  position:absolute; left:0; right:0; top:-1px; width:100%;
  height:clamp(48px, 7vw, 112px); color:var(--mist); pointer-events:none;
}
.contact .section-head h2{color:#fff;}
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap:18px; margin-bottom:clamp(30px, 4vw, 44px);}
@media (min-width:900px){.contact-grid{grid-template-columns:repeat(3, minmax(0,1fr));}}
.tile{
  position:relative; min-width:0;
  padding:clamp(22px, 3vw, 30px);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  border-radius:22px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.tile.note{grid-column:1 / -1;}
.tile .label{
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px;
  font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan);
}
.tile .label svg{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.tile a,.tile .value{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; line-height:1.35;
  font-size:clamp(.92rem, .3rem + 3vw, 1.3rem);
  color:#fff; text-decoration:none;
}
.tile a{display:inline-flex; align-items:center; min-height:44px; border-bottom:1.5px solid rgba(95,212,224,.8); transition:color .2s ease, border-color .2s ease;}
.tile a:hover{color:var(--cyan); border-color:var(--cyan);}
/* the address never breaks; it scales down with its tile instead */
.tile{container-type:inline-size;}
.tile a.tile-mail{font-size:min(clamp(.92rem, .3rem + 3vw, 1.3rem), 7.9cqi);}
.tile a.tile-tel{font-variant-numeric:tabular-nums;}
.tile .value{display:block;}
.tile.note strong{display:block; margin-bottom:8px; font-family:var(--font-display); font-size:1.12rem; font-weight:700; color:#fff;}
.tile.note p{color:rgba(255,255,255,.86); font-size:1rem; max-width:62ch;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--abyss);
  color:rgba(255,255,255,.8);
  padding:clamp(36px, 5vw, 52px) 0 clamp(32px, 4vw, 44px);
  border-top:1px solid rgba(95,212,224,.14);
}
.footer-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px 36px;}
.footer-brand{display:flex; align-items:center; gap:14px; min-width:0;}
.footer-brand img{width:40px; height:40px; border-radius:50%; flex:none; box-shadow:0 0 0 2px rgba(95,212,224,.45);}
.footer-brand p{font-size:.9rem; line-height:1.5; color:rgba(255,255,255,.82);}
.footer-links{display:flex; flex-wrap:wrap; gap:0 6px;}
.footer-links a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 10px;
  font-size:.9rem; color:rgba(255,255,255,.82); text-decoration:none;
  transition:color .2s ease;
}
.footer-links a:hover{color:var(--cyan); text-decoration:underline; text-underline-offset:5px;}

/* ---------- Legal pages (impressum, datenschutz, 404) ---------- */
body.page{display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;}
body.page > main{flex:1 0 auto;}
.legal-header{
  position:sticky; top:0; z-index:100;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 30px -22px rgba(4,24,43,.35);
  color:var(--ink);
}
.legal-header .header-inner{height:auto; min-height:68px; padding-block:10px; flex-wrap:wrap; justify-content:space-between; gap:6px 20px;}
.legal-header .brand{min-width:0;}
.legal-header .brand img{box-shadow:0 0 0 2px rgba(11,111,125,.35);}
.brand-link strong{
  font-family:var(--font-display); font-weight:800; font-size:.98rem; letter-spacing:-.01em;
  white-space:normal;
}
.back-link{
  display:inline-flex; align-items:center; min-height:44px; padding:0 4px;
  font-weight:600; font-size:.94rem; text-decoration:none; color:var(--teal-ink);
  white-space:nowrap; position:relative;
}
.back-link::after{
  content:""; position:absolute; left:4px; right:4px; bottom:7px; height:2px; background:var(--turquoise);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.back-link:hover::after{transform:scaleX(1);}

.page-hero{
  position:relative; isolation:isolate; overflow:hidden;
  color:#fff;
  background:linear-gradient(180deg, var(--abyss) 0%, var(--deep) 55%, var(--ocean) 100%);
  padding:clamp(40px, 7vw, 72px) 0 clamp(96px, 11vw, 136px);
}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(112deg, transparent 18%, rgba(95,212,224,.08) 28%, transparent 40%),
    linear-gradient(104deg, transparent 52%, rgba(95,212,224,.06) 60%, transparent 70%),
    radial-gradient(520px 260px at 88% 0%, rgba(25,167,181,.22), transparent 70%);
}
.page-hero h1{
  font-size:clamp(1.3rem, .4rem + 4.5vw, 3rem);
  font-weight:800; letter-spacing:-.025em; line-height:1.15; color:#fff;
}
.page-hero .lede{margin-top:16px; max-width:60ch; font-size:clamp(.92rem, .6rem + 1.4vw, 1.1rem); color:rgba(255,255,255,.88);}
.page-hero-wave{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(28px, 4vw, 56px); color:var(--bg); pointer-events:none;}

.legal-main{padding-bottom:clamp(48px, 7vw, 96px);}
.legal-card{
  position:relative; z-index:1;
  max-width:calc(72ch + 2 * clamp(24px, 5vw, 64px));
  margin:clamp(-72px, -6vw, -48px) auto 0;
  padding:clamp(28px, 5vw, 64px) clamp(24px, 5vw, 64px);
  background:var(--surface);
  border:1px solid var(--line); border-radius:24px;
  box-shadow:var(--shadow-card);
  font-size:clamp(1rem, .96rem + .15vw, 1.0625rem);
  line-height:1.75;
}
.legal-card h2{
  position:relative;
  margin:2.2em 0 .7em; padding-top:18px;
  font-size:clamp(1.05rem, 1rem + .4vw, 1.3rem); font-weight:700; line-height:1.3; letter-spacing:-.015em;
  color:var(--ink);
}
.legal-card h2::before{
  content:""; position:absolute; left:0; top:0; width:36px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--turquoise), var(--cyan));
}
.legal-card h2:first-child{margin-top:0;}
.legal-card p,.legal-card address,.legal-card li{margin:0 0 1em; color:var(--ink);}
.legal-card address{font-style:normal;}
.legal-card ul{margin:0 0 1em; padding-left:1.3em;}
.legal-card li{margin-bottom:.5em; padding-left:.2em;}
.legal-card li::marker{color:var(--turquoise);}
.legal-card a{color:var(--teal-ink); text-decoration-thickness:1px; text-underline-offset:3px;}
.legal-card a:hover{text-decoration-thickness:2px;}
.legal-card .lede{margin-top:2em; font-size:.94rem; color:var(--ink-soft);}
.legal-card a.btn,.legal-card a.btn:visited{color:#fff; text-decoration:none; margin-bottom:.4em;}
/* Yellow is reserved for the appointment CTA; other primary buttons stay teal */
.legal-card a.btn-primary{background:var(--teal-ink); box-shadow:0 10px 24px -12px rgba(11,111,125,.7);}
.legal-card a.btn-primary:hover{background:#09606c;}
.legal-card > :last-child{margin-bottom:0;}
@media (max-width:559px){
  /* full-bleed white column so long legal words keep their room at 320px */
  .legal-card{
    max-width:none; margin-inline:calc(-1 * var(--gutter));
    padding-inline:16px; border-radius:0; border-inline:0;
  }
}

/* ---------- Reduced motion ---------- */
/* Pause control for the decorative hero animation (WCAG 2.2.2) */
.motion-toggle{display:none;}
html.js .motion-toggle{
  position:absolute; right:clamp(16px, 4vw, 40px); bottom:clamp(64px, 9vw, 120px); z-index:3;
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  border-radius:50%; cursor:pointer;
  color:rgba(255,255,255,.85); background:rgba(4,24,43,.35);
  border:1px solid rgba(255,255,255,.4);
  transition:background-color .2s ease, color .2s ease;
  --focus:var(--cyan);
}
.motion-toggle:hover{background:rgba(4,24,43,.6); color:#fff;}
.motion-toggle svg{width:20px; height:20px;}
.motion-toggle .icon-play, .motion-toggle[aria-pressed="true"] .icon-pause{display:none;}
.motion-toggle[aria-pressed="true"] .icon-play{display:block;}
html.motion-paused .rays i, html.motion-paused .hero-bg::before, html.motion-paused .sweep,
html.motion-paused .ring-ticks, html.motion-paused .ping, html.motion-paused .badge{animation-play-state:paused !important;}

@media (prefers-reduced-motion: reduce){
  html.js .motion-toggle{display:none;}
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important; animation-delay:0s !important;
    transition-duration:.001ms !important; transition-delay:0s !important;
  }
  .rays i,.hero-bg::before,.sweep,.ring-ticks,.ping,.badge{animation:none !important;}
  html.js .reveal:not(.is-visible){opacity:1; transform:none;}
  .nav > *{opacity:1; transform:none;}
}

main:focus{outline:none;}

/* ---------- Extra ambient motion (transform/opacity only, GPU friendly) ---------- */
/* A: slow swell drifting behind the hero wave edge */
.hero-swell{
  position:absolute; left:0; right:0; bottom:-1px; z-index:1;
  height:clamp(48px, 7vw, 112px); overflow:hidden; pointer-events:none;
  opacity:.35;
}
.hero-swell svg{
  display:block; width:200%; height:100%;
  animation:swell 34s linear infinite;
}
@keyframes swell{from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);}}

/* B: occasional rising bubbles in the free margins of the contact band */
.contact-bubbles{display:none;}
@media (min-width:1100px){
  .contact-bubbles{display:block; position:absolute; inset:0; pointer-events:none; overflow:hidden;}
  .contact-bubbles i{
    position:absolute; bottom:-24px; width:10px; height:10px; border-radius:50%;
    border:1px solid rgba(190,238,246,.35); background:rgba(255,255,255,.04);
    opacity:0; animation:rise 18s linear infinite;
  }
  .contact-bubbles i:nth-child(1){left:3.5%; animation-delay:-2s;}
  .contact-bubbles i:nth-child(2){left:6.5%; width:6px; height:6px; animation-duration:22s; animation-delay:-11s;}
  .contact-bubbles i:nth-child(3){left:9%; width:8px; height:8px; animation-duration:26s; animation-delay:-6s;}
  .contact-bubbles i:nth-child(4){right:4%; animation-duration:20s; animation-delay:-15s;}
  .contact-bubbles i:nth-child(5){right:7.5%; width:6px; height:6px; animation-duration:24s; animation-delay:-4s;}
  .contact-bubbles i:nth-child(6){right:10%; width:8px; height:8px; animation-duration:28s; animation-delay:-19s;}
}
@keyframes rise{
  0%{transform:translate3d(0,0,0); opacity:0;}
  10%{opacity:1;}
  50%{transform:translate3d(8px,-45vh,0);}
  85%{opacity:.8;}
  100%{transform:translate3d(-4px,-90vh,0); opacity:0;}
}

/* C: a soft light glint across the hero appointment button every few seconds */
.hero .btn-primary{position:relative; overflow:hidden; isolation:isolate;}
.hero .btn-primary::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:45%; z-index:-1;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform:translate3d(-120%,0,0) skewX(-18deg);
  animation:glint 7s ease-in-out 2.5s infinite;
  pointer-events:none;
}
@keyframes glint{0%,78%{transform:translate3d(-120%,0,0) skewX(-18deg);} 92%,100%{transform:translate3d(320%,0,0) skewX(-18deg);}}

html.motion-paused .hero-swell svg, html.motion-paused .contact-bubbles i,
html.motion-paused .hero .btn-primary::after{animation-play-state:paused !important;}
@media (prefers-reduced-motion: reduce){
  .hero-swell svg, .hero .btn-primary::after{animation:none !important;}
  .contact-bubbles{display:none !important;}
}

/* ---------- Hero overline: "A · B", the dot always stays visible ---------- */
.eyebrow-hero{align-items:flex-start;}
.eyebrow-hero::before{margin-top:.72em;}
@media (min-width:1000px){.hero .eyebrow-hero{letter-spacing:.13em;}}
.eyebrow-hero .eb-sep{font-weight:800;}

/* ---------- Phones: more air in the typography ---------- */
@media (max-width:599px){
  h1,h2,h3{letter-spacing:-.005em;}
  .hero h1{
    font-size:clamp(1.3rem, .35rem + 5vw, 1.6rem);
    line-height:1.28; letter-spacing:-.005em;
    margin:16px 0 20px;
  }
  .hero .lede{font-size:1rem; line-height:1.78;}
  .hero .eyebrow{letter-spacing:.12em; line-height:1.65;}
  .section-head h2{line-height:1.25;}
  .section-head .lede{line-height:1.75;}
  .qual-body h3{line-height:1.35;}
  .qual-body p{line-height:1.7;}
  .step-card p{letter-spacing:0; line-height:1.5;}
  .callout.exam-note{letter-spacing:0; line-height:1.6;}
  .page-hero h1{letter-spacing:-.005em; line-height:1.25;}
}

/* ---------- Phones: a little more letter-spacing for the bold display face ---------- */
@media (max-width:599px){
  .btn, .mobile-bar a, .nav-link, .brand-text strong, .brand-link strong{letter-spacing:.005em;}
  .tile a, .tile .value{letter-spacing:.01em; line-height:1.45; font-size:1.06rem;}
  .tile .value{line-height:1.6;}
  .region-tag{line-height:1.5;}
  .footer-copy, .site-footer p{line-height:1.6;}
}

/* Hyphenated compounds (E-Mail, Rheinland-Pfalz, ...) are never split at their hyphen */
.nobr{white-space:nowrap;}