/* ---------------------------------------------------------------------------
   Mobile layer. Loaded last, overrides only what breaks below 900px.
   The design was drawn at 1440px and has media queries down to 640px, but the
   header never had a mobile navigation: seven horizontal items plus a 92px
   logo cannot fit a phone. That is the main thing fixed here.
   --------------------------------------------------------------------------- */

/* ---- Logo ----
   The new logo file is trimmed to its artwork (aspect 4.75:1), where the old
   one carried a wide transparent margin (2.63:1). At the design's fixed
   height:92px it would therefore be 437px wide and crowd the navigation, so
   the height is capped here and the width left to follow the aspect ratio.
   On a phone it additionally may never exceed the space left by the menu
   button — hence height:auto plus max-width, never a fixed height. */
.header .brand{min-width:0}
.header .brand img{height:auto;max-height:58px;max-width:100%;width:auto}
/* On a phone the width, not the height, is the limit: the artwork is 4.75:1,
   so 375px minus padding minus the menu button leaves room for about 60px of
   height. The cap is set high on purpose and the width does the limiting. */
@media (max-width:900px){
  .header .brand img{max-height:84px;max-width:100%}
}

/* ---- Header: burger instead of a row of links ---- */
.nav-burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer;padding:0}
.nav-burger span{display:block;width:20px;height:2px;background:var(--navy);position:relative}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--navy)}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}
body.nav-open .nav-burger span{background:transparent}
body.nav-open .nav-burger span::before{top:0;transform:rotate(45deg)}
body.nav-open .nav-burger span::after{top:0;transform:rotate(-45deg)}

@media (max-width:900px){
  /* Sticky: the menu button has to stay reachable while reading a long guide. */
  .header{position:sticky;top:0;z-index:70;background:#fff;height:auto;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:8px 12px;transition:box-shadow .18s ease}
  .header .brand{display:flex;align-items:center}
  .header.is-stuck{box-shadow:0 6px 18px rgba(11,36,64,.10)}
  /* narrower button and padding buy the logo ~20px of width */
  .nav-burger{width:42px;height:42px}
  .nav-burger{display:inline-flex}
  .header .phone{display:none}

  .nav{display:none}
  body.nav-open .nav{display:flex;flex-direction:column;position:fixed;left:0;right:0;top:var(--nav-top,120px);z-index:60;background:#fff;border-top:1px solid var(--line);box-shadow:0 22px 50px rgba(11,36,64,.18);padding:4px 18px 16px;gap:0;justify-content:flex-start;max-height:calc(100vh - var(--nav-top,120px));overflow:auto;font-size:15px}
  body.nav-open .nav a{padding:0;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
  body.nav-open .nav a::after{display:none!important}
  body.nav-open .nav-item{display:block;position:static}
  body.nav-open .nav-item>a{justify-content:space-between}
  /* !important throughout: the desktop submenu is an absolutely positioned
     hover flyout (left:50% + translateX(-50%) + opacity transition). Without
     overruling every one of those the panel showed a white box shifted half
     off-screen — visible only as two faint outlines at the left edge. */
  body.nav-open .nav-sub{position:static!important;inset:auto!important;transform:none!important;opacity:1!important;visibility:visible!important;box-shadow:none!important;border:0!important;border-radius:0!important;padding:0 0 0 16px!important;min-width:0!important;width:auto!important;background:transparent!important;display:flex!important;flex-direction:column!important}
  body.nav-open .nav-sub a{font-weight:500;color:#4a5f78;min-height:44px}

  /* The call button belongs on a phone, but at the bottom of the panel. */
  body.nav-open .nav::after{content:"";display:block;height:4px}

  /* Two- and three-column grids the desktop queries did not reach. */
  .subhero-grid,.subhero-grid.ct,.revs-grid,.rel2-grid.three,.rv-banner{grid-template-columns:minmax(0,1fr)!important}
  .subhero-grid{gap:24px}
  .ct-portrait{max-width:320px}

  /* Side padding: the design uses 40px almost everywhere. */
  .about-sec,.acl-hero,.acl-intro,.acl-strip,.crumb-bar .crumb,.ct-body,.cta-band,.disclaimer,.faq,.hero-copy,.idx-body,.loc,.md-body,.pr-body,.pr-hero,.pr-info,.pr-learn,.pr-qa,.refs,.rel2,.revs,.rv-banner,.sm-body,.subhero{padding-left:18px;padding-right:18px}
  .footer{margin:18px 14px 24px;grid-template-columns:minmax(0,1fr)}
  .footer .fcell:not(:last-child){border-right:0;border-bottom:1px solid var(--line)}
  /* The translation plugin's floating switcher is fixed to the bottom right.
     It used to be given 74px of clearance below the legal bar, which read as an
     empty navy field. The switcher is lifted by the same amount instead
     (mobile.js), so 26px of ordinary padding is enough. */
  .flegal{padding:12px 18px 26px}
  .page{box-shadow:none}
}

/* Five credentials wrapped unevenly — a grid keeps them in line. */
@media (max-width:900px){
  /* Five credentials wrapped unevenly with flex; a two-column grid lines them
     up. The location keeps its own row — pulling it into the third row's empty
     cell was tried and the browser kept placing it elsewhere, and 18px of
     height is not worth a fragile rule. */
  /* Variant A, chosen with the client: the five credentials and the location
     share one three-column grid, so the bar is two rows instead of four —
     92px down to about 56px. The location sits in the sixth cell, which the
     five marks leave empty. */
  /* Two rows, no third: the credentials grid on the left, the location pinned to
     the right edge on the first row's baseline. Bar height about 40px. */
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:4px 10px;padding:6px 14px}
  /* !important because the design hides the credentials below 640px, and a
     caching layer that combines stylesheets can reverse the file order — the
     five credentials then vanished on the phone even though this rule exists. */
  .topbar .badges{display:grid!important;grid-template-columns:repeat(3,auto);gap:4px 12px;justify-items:start;justify-content:start}
  .topbar .locale{display:flex;gap:10px;width:auto;justify-self:end;white-space:nowrap}
}
@media (min-width:641px) and (max-width:900px){
  /* Five cells in a three-across grid left two orphans on the last row. */
  .certifications,.stats{grid-template-columns:repeat(2,1fr)}
  .certifications>*:nth-child(5),.stats>*:nth-child(5){grid-column:1/-1}
}

/* The credential band on the homepage: each cell centred its own mark, and the
   marks have different widths (flag 40, DKG 52, FIFA 26). Stacked on a phone
   the logos and their labels therefore started at five different positions.
   A fixed mark column lines all five up. */
@media (max-width:900px){
  .certifications{grid-template-columns:minmax(0,1fr)}
  .certifications .cert{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;justify-content:start;gap:14px;min-height:72px;padding:12px 18px;text-align:left}
  .cert .cert-mark{height:auto;max-height:38px;max-width:58px;justify-self:center}
  .cert .cert-logo{height:22px;justify-self:center}
  .cert .cert-mark.wide{max-width:58px}
  .cert .flag-de{width:34px;height:34px;justify-self:center}
  .cert .cert-t{text-align:left}
  .certifications .cert:not(:last-child){border-right:0;border-bottom:1px solid var(--line)}
}

@media (max-width:640px){
  .topbar{font-size:10.5px}
  /* "German Board Certified" is far longer than the other four, so it takes two
     of the three columns and the rest fall in beside it. An earlier attempt
     replaced its text via ::after on span:first-child — which matched the gold
     dot inside EVERY mark, so all five read "German Board". Child selector and
     no text replacement. */
  .topbar .badges>span:first-child{grid-column:span 2}
  h1{font-size:30px}
  .subhero h1{font-size:31px}
  .subhero .intro{font-size:15px}
  .hero{min-height:auto}
  .btn{padding:14px 18px}
  .actions{display:flex;flex-wrap:wrap;gap:10px}
  .legal-block h2{font-size:23px}
  .flegal{gap:6px 16px;font-size:12.5px}
}

@media (max-width:900px){
  /* One hard-coded pixel width survives from a direct edit in the editor
     (.hero-copy on the homepage, width:614px inline). An inline style beats a
     media query, so it has to be overruled explicitly; the desktop value in
     the markup stays untouched. */
  .hero-copy{width:auto!important;height:auto!important;top:auto!important;max-width:100%;padding-bottom:40px}
  /* Hero on a phone, in the order asked for: words and buttons, the portrait,
     the quote, then the figures. Nothing is added or removed — the stage is
     turned into a single column and each part takes its place.

     Three things went wrong on the earlier attempts and are handled here:
     the portrait is a direct child of .hero, not of .hero-media, so the order
     has to sit on both; it must leave absolute positioning or it keeps hanging
     over the headline; and the white gradient of the stage lies above it in the
     stacking order, which is what washed the photograph out — it is lifted
     above the gradient instead. */
  .hero{display:flex;flex-direction:column}
  .hero-copy{order:1;padding-bottom:26px}
  .hero-media{order:2;position:static!important;width:auto!important;height:auto!important;z-index:3}
  /* The clinic photograph belongs behind the surgeon and nowhere else. It
     cannot go on .hero-media — the portrait is a direct child of .hero, that
     wrapper holds nothing here. It goes on the portrait itself: the cut-out is
     transparent, so the photograph shows through around the figure and forms
     its stage. The text zone above stays plain, which is why the gradient is
     switched off below 900px. */
  /* The clinic photograph gets a frame of its own instead of bleeding behind
     everything. Reason: the section is roughly 1:3.4 on a phone while the
     photograph is 1:2.11, so anything that fills the section has to crop 38% of
     the width — which read as a zoomed, artificial wall. In its own box with the
     file's aspect ratio and background-size:contain the room is shown whole,
     never cropped, never stretched, and the surgeon stands in front of it.
     Sizes are stated relative to the WIDTH, never in vh: a percentage margin
     resolves against the containing block's width, which is the same 390-odd
     pixels on every phone. The first attempt used vh and looked right only in
     the desktop preview frame, whose viewport was 1500px tall — on a real
     handset the same rule produced a completely different figure. */
  .hero{background:#F9F9F7!important;position:relative}
  .hero::before{display:none!important}
    .hero::after{content:"";order:2;display:block;width:100%;aspect-ratio:863/1823;background-image:url("../img/hero-mobile-v2.jpg");background-size:cover;background-position:center top;background-repeat:no-repeat;filter:blur(3px);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 9%,#000 86%,rgba(0,0,0,0) 100%),linear-gradient(90deg,rgba(0,0,0,0) 0,#000 7%,#000 93%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 9%,#000 86%,rgba(0,0,0,0) 100%),linear-gradient(90deg,rgba(0,0,0,0) 0,#000 7%,#000 93%,rgba(0,0,0,0) 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
  .hero-copy{padding:22px 18px 8px!important}
  .hero h1{font-size:32px!important}
  .hero .actions{margin:16px 0 0!important}
  .hero-doc{display:block!important;order:3;position:relative!important;inset:auto!important;z-index:3;width:88%!important;max-width:none!important;height:auto!important;max-height:none!important;object-fit:contain;object-position:bottom center;margin:-189% auto 0!important}
  /* The quote bubble is drawn to float over the photograph: 72% white with a
     blur behind it. Once it sits in the flow on a phone, the hero image runs on
     behind it and the words turned into grey on a photo of an operating theatre.
     Solid card, full-strength ink. */
  /* The navy figures band is pulled up 46px in the desktop design so it slides
     under the floating quote bubble. With the bubble in the flow on a phone that
     negative margin ate 20px of the card — the signature was cut off. */
  .stats{margin-top:22px!important}
  .hero .quote{order:4;position:static;margin:0 18px 26px;max-width:none;width:auto;background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid var(--line)!important;box-shadow:0 10px 26px rgba(4,24,50,.10)!important}
  /* The card is white now, but the quotation still read grey against it —
     something in the stack was lightening it. Stated outright, with a little
     more weight, so it holds at 4.5:1 whatever sits behind it. */
  .hero .quote,.hero .quote *{opacity:1!important}
  .hero .quote blockquote{color:#0b2440!important;font-weight:600!important}
  .hero .quote figcaption{color:var(--ink)!important}
  .hero .quote .sig-img{opacity:1}

  /* Video lightbox on a phone: the desktop padding of 32px left a postage
     stamp. YouTube's own fullscreen button inside the player still works —
     iOS only allows fullscreen for the video element itself, not for our
     surrounding box, so that button is the way to go fullscreen. */
  .lb{padding:10px}
  .lb-box{width:100%;border-radius:10px}
  .lb-x{width:44px;height:44px}
  .lb-note{padding:12px 14px;font-size:13px}

  /* Never let a wide embed push the page sideways. */
  .map-frame,.lb-media{max-width:100%}
  img,iframe{max-width:100%}
}