/* ==========================================================================
   CoMed am Grünmarkt — Home Hero
   Strict 2-colour system (Beige / Green), fluid 16-column grid, SangBleu
   Sunrise Bold in three optical cuts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   The type foundry ships three "Web" optical sizes of the same bold cut —
   XL / M / S — drawn with slightly different spacing/weight so the face
   still reads correctly at very different sizes, instead of relying on the
   browser to scale one file. We register each as its own family and pick
   the right one per context (menu/button = S, body copy = M, display
   headings elsewhere on the site = XL). The plain "-Bold.ttf" is kept as a
   general-purpose fallback family.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "SangBleu Sunrise S";
  src: url("../fonts/SangBleuSunrise-Bold-WebS.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Sunrise M";
  src: url("../fonts/SangBleuSunrise-Bold-WebM.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Sunrise XL";
  src: url("../fonts/SangBleuSunrise-Bold-WebXL.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SangBleu Sunrise";
  src: url("../fonts/SangBleuSunrise-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Used once, deliberately outside the SangBleu Sunrise system: the Google
   review badge on the Für Patient:innen page (see that section below). */
@font-face {
  font-family: "Arial";
  src: url("../fonts/Arial.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root{
  /* strict 2-colour palette */
  --beige: #cac3b9;
  --green: #0c1b03;
  --green-50: rgba(12, 27, 3, 0.5);

  /* 16-column grid: one fluid outer margin + one fluid gutter drive the
     whole layout so nothing needs breakpoint-specific overrides.
     --margin: InDesign spec is 27px at the 1920px reference width — the vw
     coefficient (27/19.2) hits that figure exactly at 1920 and scales
     proportionally below it, same approach used for every token below. */
  --margin: clamp(1rem, 1.40625vw, 1.6875rem);
  --gutter: clamp(0.5rem, 0.3rem + 0.6vw, 1.25rem);

  --nav-h: clamp(4rem, 3.1rem + 3vw, 6rem);

  /* Logo-Text.svg's own viewBox ratio (1341 x 71) — mirrors js/main.js's
     TEXT_ASPECT constant, reused here so any width-driven sizing of the
     wordmark (or type meant to match its finished on-page size, see the
     Medizinisches Zentrum subpage) only has one place this ratio lives. */
  --logo-text-aspect: 18.887;

  /* type: InDesign spec (1920px reference, 1pt = 4/3 px):
     nav/button/small text = 13pt = 17.333px; default/body text = 22pt =
     29.333px. Same vw-coefficient-hits-1920-exactly approach as --margin. */
  --fs-menu: clamp(0.76rem, 0.9028vw, .8rem);   /* → 17.33px at 1920 (13pt) */
  --fs-body: clamp(1.2rem, 1.5278vw, 1.4rem);    /* → 29.33px at 1920 (22pt) */
  /* InDesign tracking 20 (i.e. 20/1000 em) — shared by both type scales. */
  --ls: .02em;
  /* Shared "text to media" / "media to button" gap — spec gives both as
     45px at 1920, so one token covers both instead of two coincidentally
     equal values living in two different rules. */
  --gap-md: clamp(1.7rem, 2.34375vw, 2.8125rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; } /* anchor links (skip link, #kontakt, …) ease to their target instead of snapping */
}
body{
  margin: 0;
  overflow-x: hidden;
  background: var(--beige);
  color: var(--green);
  font-family: "SangBleu Sunrise M", "SangBleu Sunrise", Georgia, serif;
  line-height: 1.3;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; }

.skip-link{
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--beige);
  color: var(--green);
  padding: .6rem 1rem;
  border-radius: .5rem;
  z-index: 200;
  transition: top .2s var(--ease);
}
.skip-link:focus{ top: 1rem; }

.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   16-column grid
   `.grid` only sets up the tracks + symmetric outer margin; children place
   themselves with grid-column. Kept to 16 columns per spec even though most
   content here only ever spans a handful of them.
   -------------------------------------------------------------------------- */
.grid{
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  column-gap: var(--gutter);
  padding-inline: var(--margin);
  width: 100%;
}

/* ==========================================================================
   Header + scroll-morphing logo
   ========================================================================== */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  /* Stays fully transparent at every scroll position, by design — no bar,
     no blur, however far the page scrolls. Only the logo lockup (driven by
     --progress in js/main.js) and the icon's opacity animate. The one
     exception is the mobile nav-open state below, which needs the header to
     carry the same fill as the panel beneath it. */
  background: transparent;
  /* Nav/logo colour follows whatever's behind the header, not scroll
     position: beige over the hero photo (or any other dark section), green
     once a light/beige section (tagged data-header-theme="light" in the
     HTML) scrolls under it — toggled by js/main.js via the .on-light class. */
  --nav-color: var(--beige);
}
@media (prefers-reduced-motion: no-preference){
  .site-header{ transition: background-color .4s var(--ease), backdrop-filter .4s var(--ease); }
}
/* While the mobile panel is open, the header carries the exact same fill as
   .mobile-nav so the two read as one continuous tinted block from the very
   top of the viewport down to the panel's own bottom edge, instead of a
   transparent header sitting above an opaque panel. */
body.nav-open .site-header{
  background: rgba(202, 195, 185, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.site-header.on-light{
  --nav-color: var(--green);
}
/* While the mobile menu is open, the header's own logo/hamburger use a
   muted 50/50 mix instead of whatever beige/green .on-light would otherwise
   pick — distinct from both, and from the pure-green links inside the open
   panel itself. Wins over .on-light on specificity (both tie on class
   count; this one also carries the `body` type selector) regardless of
   source order. */
body.nav-open .site-header{
  --nav-color: color-mix(in srgb, var(--green) 50%, var(--beige) 50%);
}

.header__grid{
  position: relative; /* offset parent for the absolutely-positioned logo below */
  height: 100%;
  align-items: center;
}

/* Logo lockup: this box IS the small nav-state logo. Its "hero" appearance
   is purely a transform applied from JS — see index.html header comment.
   js/main.js also sets its width directly, to match the nav's own height
   (requested: the finished logo should always read as the same size as the
   nav, not just sit on the same baseline). That rules out placing it as a
   normal grid item in column 1: a grid item's size feeds back into its
   track's sizing, so a wide logo would inflate column 1 at the expense of
   the nav's track — shrinking it, forcing its text to wrap, which raises
   the nav's height and feeds an even wider logo back in next measurement.
   Positioning it absolutely (like the mobile logo already is) takes it out
   of grid flow entirely, so nothing about its size can ever affect the
   nav's — it simply overflows over the hero visually, which the huge
   hero-state already requires anyway. */
.logo-lockup{
  position: absolute;
  /* left:0 would resolve against the containing block's padding edge, which
     ignores .header__grid's own padding-inline (that's what supplies the
     page's outer margin) — so the offset has to be given explicitly here
     instead of assuming it comes for free. */
  left: var(--margin);
  /* Vertical centering is finished by js/main.js via a computed
     margin-top, not CSS's top:0/bottom:0/margin:auto trick — that trick
     only centers when height is definite going in, and this element's
     height is exactly the nav's own measured height (set directly by JS,
     see main.js), not something CSS can derive on its own beforehand. */
  top: 50%;
  width: clamp(7.5rem, 5.6rem + 8vw, 11.5rem);
  transform-origin: 0% 0%;
  will-change: transform;
}
.logo-lockup__text{
  width: 100%;
  height: auto;
  color: var(--nav-color);
}
.logo-lockup__icon{
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 4%;
  width: 6%;
  height: auto;
  color: var(--nav-color);
  opacity: 1; /* animated inline by main.js as the lockup shrinks into the nav */
}
@media (prefers-reduced-motion: no-preference){
  .logo-lockup__text, .logo-lockup__icon{ transition: color .25s var(--ease); }
}

.main-nav ul{
  display: flex;
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem);
}
.main-nav{
  /* Spans the full 16 columns rather than some narrower sub-range: the logo
     is positioned absolutely (see .logo-lockup above), not as a grid item,
     so it no longer needs a column reservation of its own here — the nav is
     free to use the whole row and just center itself in it. */
  grid-column: 1 / span 16;
  grid-row: 1;
  justify-self: center;
}
.main-nav a{
  display: inline-block;
  font-family: "SangBleu Sunrise S", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-menu);
  line-height: 1.2; /* 15.6pt / 13pt */
  text-transform: uppercase;
  letter-spacing: var(--ls);
  color: var(--nav-color);
  padding-block: .1em .3em; /* less above the text, unchanged below */
}
@media (prefers-reduced-motion: no-preference){
  .main-nav a{ transition: color .25s var(--ease); }
}
.main-nav a[aria-current="page"]{
  text-decoration: underline;
  text-underline-offset: .3em;
}

.menu-toggle{
  display: none;
  grid-column: 16 / span 1;
  grid-row: 1;
  justify-self: end;
  width: 1.2rem;
  height: 0.8rem;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
/* "Schliessen" inside the open panel is the close control — the hamburger
   itself has no reason to stay on screen while it's open. */
body.nav-open .menu-toggle{ display: none; }

.menu-toggle span{
  display: block;
  height: 2px;
  background: var(--nav-color);
  border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference){
  .menu-toggle span{ transition: background-color .25s var(--ease); }
}

/* ==========================================================================
   Mobile navigation panel
   Drops down from beneath the header rather than covering the screen: fixed
   height of exactly 50vh, same translucent-beige-over-blur fill as
   .btn-home's default state (not the site's green), so whatever's behind it
   — normally the hero photo — shows through softened, matching the
   reference. Animates its own height (0 → 50vh) instead of toggling
   `hidden`, since display:none can't be transitioned.
   ========================================================================== */
.mobile-nav{
  /* No padding here on purpose: with the site's box-sizing:border-box reset,
     padding on this element would set a floor under its own height (padding
     can't be "negative", so height:0 would actually render at
     padding-top+padding-bottom instead of truly collapsing) — moved onto
     .mobile-nav__inner instead, which is free to be clipped to nothing by
     this element's overflow:hidden regardless of its own padding.

     No background/backdrop-filter here either, for a less obvious reason:
     backdrop-filter (like transform or plain filter) makes an element the
     containing block for any position:fixed descendant, and .mobile-nav__
     icon needs its position:fixed to resolve against the real viewport —
     the same reference frame as .hero-mark's top:48vh — not against this
     panel. Confirmed by measurement: with the blur living here, the icon
     rendered `top:var(--nav-h)` lower than intended, exactly the height of
     this panel's own offset from the viewport. Moved onto ::before below,
     which — being an empty pseudo-element with no children of its own —
     can't affect the icon's containing block either way. */
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 90;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.mobile-nav::before{
  content: "";
  position: absolute;
  inset: 0;
  /* Negative z-index: a positioned element otherwise paints above normal-
     flow content by default regardless of source order, which — despite
     ::before coming "first" in the markup — was rendering this background
     on top of .mobile-nav__inner (itself just a plain static div) and
     hiding the links and Schliessen underneath it entirely. */
  z-index: -1;
  background: rgba(202, 195, 185, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (prefers-reduced-motion: no-preference){
  .mobile-nav{
    transition: height .4s var(--ease), visibility 0s linear .4s;
  }
}
.mobile-nav.is-open{
  height: 50vh;
  visibility: visible;
  transition-delay: 0s; /* visible immediately on open; the .4s delay above only applies when closing */
}

.mobile-nav__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: clamp(2rem, 8vw, 3rem) var(--margin);
}

.mobile-nav__list{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 6vw, 2.5rem);
  margin: 0;
  padding: 0;
}
.mobile-nav__list a{
  font-family: "SangBleu Sunrise M", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-body);
  letter-spacing: var(--ls);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls);
  color: var(--green);
}
.mobile-nav__list a[aria-current="page"]{
  text-decoration: underline;
  text-underline-offset: .3em;
}

.mobile-nav__close{
  margin-top: clamp(2rem, 8vw, 3rem); /* "margin to ul" */
  cursor: pointer;
  font-family: "SangBleu Sunrise M", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-body);
letter-spacing: var(--ls);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls);
  color: var(--green);
}

/* Same size and top:48vh as .hero-mark, in green — fixed to the viewport
   (not a flex child: .mobile-nav__inner's own overflow:hidden would clip an
   absolutely-positioned descendant during the height animation, but a
   fixed-position one is positioned — and clipped — against the viewport
   instead, so it isn't affected by that). Inherits .mobile-nav's
   visibility:hidden/visible, so it appears and disappears in sync with the
   panel without needing any rule of its own for that. Never moves and never
   changes colour — see the note on .hero-mark above for why that matters. */
.mobile-nav__icon{
  position: fixed;
  top: 48vh;
  left: var(--margin);
  width: clamp(3.5rem, 12vw, 5rem);
  height: auto;
  color: var(--green);
}

body.nav-open{ overflow: hidden; }
/* Same idea, shared by every native <dialog> on the site (booking, Anfrage):
   showModal() alone doesn't stop the page behind it from scrolling (via
   wheel/keyboard/etc, confirmed empirically), so JS toggles this class
   alongside showModal()/close(). */
body.dialog-open{ overflow: hidden; }
/* Simply hidden while open — .mobile-nav__icon (declared with the panel,
   below) is a separate, statically-positioned element that appears in its
   place instead of animating this one into a new position and colour.
   Swapping position:absolute → fixed on this element mid-open used to do
   that, but the swap can't be transitioned (it always snaps instantly),
   which read as a jump. Two static icons sharing the same top:48vh avoids
   that: nothing here actually moves, so there's nothing to look janky. */
body.nav-open .hero-mark{ opacity: 0; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  height: 100vh;
  height: 100svh;
  width: 100vw;
  overflow: hidden;
  isolation: isolate;
}
.hero__media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 22%; /* adjust once the final hero photo is confirmed */
  z-index: -2;
}
.hero__scrim{
  position: absolute;
  inset: 0;
  z-index: -1;
  /* subtle grounding for text legibility without dulling the photo */
  background:
    linear-gradient(to top, rgba(12,27,3,.55) 0%, rgba(12,27,3,0) 32%),
    linear-gradient(to bottom, rgba(12,27,3,.35) 0%, rgba(12,27,3,0) 22%);
}

.hero-logo-target{
  position: absolute;
  left: var(--margin);
  right: var(--margin);
  top: 46%; /* slightly above true center: leaves headroom for the icon below on short viewports */
  height: 9vw;
  transform: translateY(-50%);
  visibility: hidden;
  pointer-events: none;
}

.hero-mark{
  display: none; /* shown on mobile only — see media query below */
  position: absolute;
  left: var(--margin);
  /* vh, not %, even though .hero is exactly 100vh (so the two are the same
     number here either way) — written this way because .mobile-nav__icon
     below has to be positioned in actual vh (it's fixed, not relative to
     .hero), and matching the unit makes the shared "48" between the two
     rules an obvious, load-bearing link rather than a coincidence. */
  top: 48vh;
  width: clamp(3.5rem, 12vw, 5rem);
  height: auto;
  color: var(--beige);
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference){
  .hero-mark{ transition: opacity .2s ease; }
}

.hero__content{
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  row-gap: clamp(1rem, 3vw, 1.5rem);
}
.hero__copy{
  grid-column: 1 / span 8;
  margin: 0;
  color: var(--beige); /* explicit: body's own default is green now — only the hero stays beige */
  font-size: var(--fs-body);
  letter-spacing: var(--ls);
  font-weight: 700;
  line-height: 1.2727; /* 28pt / 22pt */
  text-wrap: pretty;
}
.hero__lead{ text-transform: uppercase; font-weight: inherit; }
.italic-lead{ font-style: italic; }
/* The descriptive sentence carries the trailing gap (margin-right), not the
   tagline (margin-left). An inline element's margin only ever shows at the
   very start/end of its whole box — never at each internal line-wrap — so
   this keeps the gap when the tagline shares a line with the sentence, and
   drops it cleanly (no stray left indent) when the tagline wraps to its own
   line instead. */
.hero__body{ margin-right: .75em; }
.hero__tagline{
  display: inline-block;
  text-transform: uppercase;
}

/*
  .btn-home — a one-off style for this specific hero CTA, not the site's
  default button. A later, reusable button design will get its own class;
  don't extend or reuse this one for that.
*/
.btn-home{
  grid-column: 14 / span 3;
  justify-self: end;
  white-space: nowrap;
  text-align: center;
  font-family: "SangBleu Sunrise S", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-menu);
  text-transform: uppercase;
  letter-spacing: var(--ls);
  padding: clamp(1.2rem, 1.5625vw, 1.875rem); /* 30px at 1920, uniform on all sides per spec */
  border-radius: clamp(.5rem, .8333vw, 1rem); /* 16px at 1920 */
  border: 1px solid transparent;
  background: rgba(202, 195, 185, .7);
  color: var(--green);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (prefers-reduced-motion: no-preference){
  .btn-home{ transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
}
@media (hover:hover) and (pointer:fine){
  .btn-home:hover{
    background: transparent;
    border-color: var(--beige);
    color: var(--beige);
    /* The default state's blur exists to soften the hero photo behind the
       translucent fill — once hover clears that fill there's nothing left
       to blur, so it was just smudging the photo behind the button. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.btn-home:focus-visible{
  outline: none;
  background: transparent;
  border-color: var(--beige);
  color: var(--beige);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ==========================================================================
   Shared content-section building blocks
   Every beige section below the hero (About, Team, Miete, …) is built from
   the same handful of pieces — same background/text colour/vertical rhythm,
   same "half-width text block, lead-styled heading" pattern, same media
   sizing base. Only each section's own grid span for its media block (and
   its aspect ratio) varies enough to need its own rule.
   ========================================================================== */
.content-section{
  background: var(--beige);
  color: var(--green);
  padding-block: clamp(3rem, 6vw, 6rem);
}

.media-section__text{
  grid-column: 1 / span 7;
  grid-row: 1;
}

/* Matches .hero__lead: same size/weight/case as the hero's own lead-in
   text, just recolored for each section's light background. */
.section-heading{
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-family: "SangBleu Sunrise M", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-body);
  letter-spacing: var(--ls);
  font-weight: 700;
  text-transform: uppercase;
}
.section-copy{
  margin: 0;
  font-family: "SangBleu Sunrise M", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-body);
  letter-spacing: var(--ls);
  font-weight: 700;
  line-height: 1.2727; /* 28pt / 22pt */
}

.media-section__image{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ==========================================================================
   About ("Über uns")
   ========================================================================== */
.brand-caps{ text-transform: uppercase; }

.about__media{
  /* Below the text, not beside it, and centered on the grid rather than
     left-aligned under it: 16 columns run from grid line 1 to line 17, so
     line 9 is the true midline — a span of 4 starting at line 7 (7 → 11)
     sits symmetrically around it. Explicit grid-row on both this and
     .media-section__text avoids the auto-placement collision-avoidance bug
     documented on .main-nav above. */
  grid-column: 7 / span 4;
  grid-row: 2;
  margin-top: var(--gap-md);
}
/* Darkening overlay lives on this wrapper around just the <img>, not on
   .about__media as a whole — that box also contains .btn-more below the
   photo, and inset:0 there would have washed out the button and the gap
   above it too, not just the image. Width is the InDesign spec's precise
   408px at 1920, not a percentage of the grid column — the two just don't
   coincide, so this is decoupled from the grid math on purpose. */
.about__photo{
  position: relative;
  width: clamp(15rem, 21.25vw, 25.5rem); /* 408px at 1920 */
  margin-inline: auto;
}
.about__photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .3);
}
.about__image{
  aspect-ratio: 408 / 564; /* InDesign spec — img/Element3_comed.png is already ~this ratio (410×566) */
}

/*
  .btn-more — the site's default/reused CTA. Precise 402px width at 1920
  (InDesign spec) — close to but not identical to .about__photo's 408px;
  given as two separate figures in the spec, so kept as two separate
  values rather than forced to match.
*/
.btn-more{
  display: block;
  width: clamp(16rem, 22.1875vw, 26.625rem); /* ~426px at 1920 — a little wider than the 402px spec */
  margin-inline: auto;
  margin-top: var(--gap-md);
  text-align: center;
  font-family: "SangBleu Sunrise S", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-menu);
  text-transform: uppercase;
  letter-spacing: var(--ls);
  padding: clamp(.35rem, .45vw, .55rem) clamp(1.25rem, .9rem + .8vw, 1.75rem); /* less block padding than the 12px spec */
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--green);
  color: #fff;
}
@media (prefers-reduced-motion: no-preference){
  .btn-more{ transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
}
@media (hover:hover) and (pointer:fine){
  .btn-more:hover{
    background: transparent;
    border-color: var(--green);
    color: var(--green);
  }
}
.btn-more:focus-visible{
  outline: none;
  background: transparent;
  border-color: var(--green);
  color: var(--green);
}

/* Shared across About/Team/Miete: every media-section__text goes full width
   once the two-column layout no longer has room to breathe, and every
   section gets noticeably more breathing room above/below it than desktop's
   clamp naturally gives at narrow viewports. */
@media (max-width: 1100px){
  .media-section__text{ grid-column: 1 / span 16; }
  .content-section{ padding-block: clamp(4rem, 16vw, 6rem); }
}

@media (max-width: 1100px){
  .about__media{
    grid-column: 1 / span 16;
    justify-self: center;
    width: min(58vw, 22rem);
    margin-top: clamp(2.5rem, 8vw, 4rem);
  }
  /* .btn-more's own margin-top already grew site-wide; mobile gets even
     more room between the image and the button below it. */
  .about__media .btn-more{
    margin-top: clamp(3rem, 9vw, 4.5rem);
  }
}

/* ==========================================================================
   Miete
   Same structure as About (text half-width, media block below it in its own
   row) — but the photo is landscape, not portrait, so its own block gets a
   wider span rather than reusing About's narrow one; a landscape crop
   squeezed into that narrow a column would render as a thin letterboxed
   strip instead of the wide, legible room shot the reference shows. The
   "Anfragen" button still keeps the site's standard .btn-more width,
   independent of that wider image — see the button's own rule below.
   ========================================================================== */
.miete__media{
  /* grid-column just keeps this roughly centered in the right area — the
     actual width is the InDesign spec's precise 939px at 1920 (decoupled
     from the grid math the same way .about__photo/.btn-more are), which
     happens to land close to but not exactly on this 8-column span's own
     width anyway. */
  grid-column: 5 / span 8;
  grid-row: 2;
  margin-top: var(--gap-md);
  width: clamp(35rem, 48.90625vw, 58.6875rem); /* 939px at 1920 */
  margin-inline: auto;
}
.miete__image{
  /* aspect-ratio: 939 / 663; /* InDesign spec 
   img/miete-interior.jpg is a portrait photo (933×1400) forced into a
     landscape frame — cover crops out roughly two-thirds of its height.
     Centering (the default) already keeps the table, lamp and plant in
     frame better than any vertical bias tried here. A true landscape shot
     of the room would fit this frame far better; flagged separately. 
  object-position: 50% 50%; */
}

/* Same width as every other .btn-more on the site (About, Team) rather than
   matching this section's own, wider media block — a direct grid sibling
   of .miete__media, not nested inside it, specifically so its width is
   decoupled from the image's and doesn't have to follow it. Same span used
   there: 4 columns starting at line 7 (7 → 11), symmetric on the grid's true
   midline (line 9). */
.miete__grid > .btn-more{
  /* margin-top comes from the shared .btn-more rule — kept in one place so
     every "default button" on the site stays in sync. */
  grid-column: 7 / span 4;
  grid-row: 3;
}

@media (max-width: 1100px){
  .miete__media{
    /* Full width like the reference, not narrowed/centered like About's
       portrait image — a landscape photo already reads well edge to edge
       at the same width as the text above it. */
    grid-column: 1 / span 16;
    width: 100%;
    margin-top: clamp(2.5rem, 8vw, 4rem);
  }
  /* The button still matches every other section's mobile width (About's),
     independent of .miete__media going full width right above it. */
  .miete__grid > .btn-more{
    grid-column: 1 / span 16;
    justify-self: center;
    width: min(58vw, 22rem);
    margin-top: clamp(3rem, 9vw, 4.5rem);
  }
}

/* ==========================================================================
   Team
   ========================================================================== */
/* Its own fixed grid-column span — not a flex sibling of .team__next sharing
   one row's leftover space — so the slider's width is fixed on its own
   terms. It used to be flex:1 1 auto next to the button, which meant the
   button's width was implicitly subtracted from the slider's width on every
   resize; sizing both independently on the grid decouples them completely,
   without resorting to position:absolute on either one. 16 columns run from
   line 1 to line 17 (true midline: line 9) — a span of 10 starting at line 4
   (4 → 14) sits symmetrically around it, leaving an equal 3-column margin on
   each side, narrower than a full-bleed 16-column span while still reading
   as noticeably wider than the About section's single image. */
#team .btn-more{
  margin-top: 7rem;
}

   .team__viewport{
  grid-column: 4 / span 10;
  grid-row: 2;
  margin-top: clamp(4.7rem, 6.5625vw, 7.875rem); /* 126px at 1920 */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.team__viewport::-webkit-scrollbar{ display: none; }

.team__track{
  display: flex;
  gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}
.team__slide{
  /* Five slides visible at once, sized fluidly from whatever room the
     viewport actually has rather than a fixed pixel width. */
  flex: 0 0 calc((100% - 4 * var(--gutter)) / 5);
  scroll-snap-align: start;
}
.team__photo{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 223 / 328; /* InDesign spec — narrower than the 654×900 source photos, so object-fit:cover now does crop slightly */
  object-fit: cover;
}
.team__name, .team__role{
  margin: 0;
  font-family: "SangBleu Sunrise S", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-menu);
}
.team__name{
  margin-top: 2em;
  text-transform: none; /* explicitly not uppercase, unlike every other nav-styled label on the site */
}
.team__role{
  margin-top: .15em;
  text-transform: uppercase;
}

.team__next{
  /* Sits in the same 3-column margin the slider leaves free on the right
     (columns 14–16) — occupying its own reserved grid area, not absolutely
     positioned, but just as free of the slider's own width as if it were.
     Grid's own column-gap sits between this area and .team__viewport's, but
     nowhere after column 16 (there's no column 17) — so centering plainly
     within 14/span3 leaves one gutter's worth more space on the slider side
     than on the edge side. Widening the box leftward by exactly one gutter
     (and shifting it left by the same amount) absorbs that gap into the
     box's own width instead of leaving it outside as a hidden extra, so
     text-align:center inside it lands the text with equal space on both
     sides — confirmed by measurement, not just by eye. */
  grid-column: 14 / span 3;
  grid-row: 2;
  width: calc(100% + var(--gutter));
  margin-left: calc(-1 * var(--gutter));
  align-self: center;
  margin-top: clamp(2rem, 5vw, 4rem);
  text-align: center;
  cursor: pointer;
  font-family: "SangBleu Sunrise S", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-menu);
  text-transform: uppercase;
  letter-spacing: var(--ls);
  text-decoration: underline;
  border: 1px solid transparent;
}

.team__grid > .btn-more{
  /* margin-top comes from the shared .btn-more rule — kept in one place so
     every "default button" on the site stays in sync. */
  grid-column: 7 / span 4;
  grid-row: 3;
}

/* Per-card actions — mobile only (see media query): a "Termin buchen"
   button and a "Kassenarzt" tag, each 50% wide. Hidden entirely on desktop,
   where the carousel card only ever shows the photo, name and role. */
.team__actions{
  display: none;
}
@media (prefers-reduced-motion: no-preference){
  .team__book, .team__tag{ transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
}
@media (hover:hover) and (pointer:fine){
  .team__book:hover{
    background: transparent;
    border-color: var(--green);
    color: var(--green);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.team__book:focus-visible{
  outline: none;
  background: transparent;
  border-color: var(--green);
  color: var(--green);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.team__book, .team__tag{
  flex: 1 1 50%;
  text-align: center;
  font-family: "SangBleu Sunrise S", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-menu);
  text-transform: uppercase;
  letter-spacing: var(--ls);
  padding: clamp(1.2rem, 1.5625vw, 1.875rem); /* 30px at 1920, uniform on all sides per spec */
  border-radius: clamp(.5rem, .8333vw, 1rem); /* 16px at 1920 */
}
.team__book{
  /* A one-off style of its own — similar look to .btn-home (rounded rect,
     not a pill), but .btn-home is explicitly reserved for the hero's own
     CTA and isn't meant to be reused elsewhere, so this gets its own rule
     rather than sharing that class. border is 1px transparent, not 0 —
     :hover below only changes border-color, which is invisible on a
     zero-width border regardless of its color (confirmed empirically: the
     hover state's color/background were already working, only the border
     silently wasn't, since there was no width for that colour to paint). */
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--green);
  color: var(--beige);
}
.team__tag{
  /* Plain label, not a control: a <span>, not a <button> or <a> — no click
     handler, no href, not part of the tab order. Green at ~20% over the
     card's beige background, distinctly lighter than .team__book. */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-50);
  color: var(--beige);
}

.team__toggle{
  display: none; /* mobile only, see media query */
}

@media (max-width: 1100px){
  /* .media-section__text's own shared rule already covers this section's
     text block going full width; see the mobile query in the shared block
     above. */

  /* Exactly as wide as the About section's single portrait image, and
     centered the same way — not the nearly-full-width slider it is on
     desktop. */
  .team__viewport{
    grid-column: 1 / span 16;
    justify-self: center;
    width: min(58vw, 22rem);
    margin-top: clamp(2.5rem, 8vw, 4rem);
    overflow: visible;
  }

  /* No horizontal carousel on mobile: a plain vertical stack of cards,
     collapsed to just the first one until "Mehr" is pressed. The infinite-
     loop clones js/main.js appends for the desktop carousel are irrelevant
     here and always hidden, expanded state or not. */
  .team__track{
    flex-direction: column;
    /* Spacing between cards comes from each card's own margin-top below
       (needed so it can animate to 0 alongside max-height) — the base
       rule's flex gap would otherwise stack an extra gutter on top of that. */
    gap: 0;
  }
  .team__slide{
    flex: 0 0 auto;
    width: 100%;
  }
  .team__slide[aria-hidden]{ display: none !important; }

  /* Smooth expand/collapse: each extra card animates its own max-height
     (and fades) rather than snapping via display:none, which can't be
     transitioned. max-height is capped well above any single card's actual
     height so the reveal never gets clipped, at the cost of the animation
     visually "finishing" slightly before its full declared duration — an
     accepted trade-off of the max-height technique. Each card also carries
     its own margin-top instead of .team__track using `gap`, since a flex
     gap still reserves space between items even at max-height:0. */
  .team__slide:not(:first-child){
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    opacity: 0;
  }
  @media (prefers-reduced-motion: no-preference){
    .team__slide:not(:first-child){
      transition: max-height .5s var(--ease), margin-top .5s var(--ease), opacity .35s ease;
    }
  }
  .team__track.is-expanded .team__slide:not(:first-child){
    max-height: 48rem;
    margin-top: clamp(2rem, 8vw, 3rem);
    opacity: 1;
  }

  .team__actions{
    display: flex;
    gap: clamp(.3rem, 1.5vw, .5rem);
    margin-top: clamp(1.5rem, 5vw, 2.25rem);
  }

  .team__next{ display: none; } /* replaced by .team__toggle below */
  .team__grid > .btn-more{ display: none; } /* replaced by .team__toggle below */

  .team__toggle{
    display: block;
    margin: clamp(2rem, 6vw, 3rem) auto 0;
    text-align: center;
    cursor: pointer;
    font-family: "SangBleu Sunrise S", "SangBleu Sunrise", Georgia, serif;
    font-size: var(--fs-menu);
    text-transform: uppercase;
    letter-spacing: var(--ls);
    text-decoration: underline;
    text-underline-offset: .3em;
  }
}

/* ==========================================================================
   Dialogs — shared positioning/entrance-animation base for every native
   <dialog> on the site (booking popup, Anfrage popup). Each dialog's own
   size/colour/content styling stays in its own block below.
   ========================================================================== */
/* position:fixed + inset:0 + margin:auto explicitly reproduces (rather than
   relies on) the UA stylesheet's own dialog:modal centering — this used to
   be position:relative, which quietly broke that centering and, on a long
   page, made the browser scroll the whole document back to wherever the
   <dialog> happens to sit in the DOM (near the very bottom of <main> on
   fuer-aerztinnen.html) in order to bring it into view. Confirmed via
   measurement: opening the Anfrage dialog from partway down the page reset
   window.scrollY to 0 before this fix. */
.booking-dialog,
.anfrage-dialog{
  position: fixed;
  inset: 0;
  margin: auto;
}
/* Fade + scale in on open, same back out on close — @starting-style is what
   lets a property transition across the dialog's display:none↔block (and
   ::backdrop's on↔off) boundary at all; without it, or in browsers that
   don't support it, both simply render at their target state immediately,
   which is exactly what prefers-reduced-motion should get anyway. */
@media (prefers-reduced-motion: no-preference){
  .booking-dialog,
  .anfrage-dialog{
    opacity: 1;
    transform: scale(1);
    transition: opacity .25s var(--ease), transform .25s var(--ease), overlay .25s var(--ease) allow-discrete, display .25s var(--ease) allow-discrete;
  }
  .booking-dialog::backdrop,
  .anfrage-dialog::backdrop{
    opacity: 1;
    transition: opacity .25s var(--ease), overlay .25s var(--ease) allow-discrete, display .25s var(--ease) allow-discrete;
  }
  @starting-style{
    .booking-dialog[open],
    .anfrage-dialog[open]{
      opacity: 0;
      transform: scale(.96);
    }
    .booking-dialog[open]::backdrop,
    .anfrage-dialog[open]::backdrop{
      opacity: 0;
    }
  }
}

/* ==========================================================================
   Booking dialog — placeholder popup opened from each "Termin buchen"
   button in the team list. No real booking system exists to link to yet.
   ========================================================================== */
.booking-dialog{
  max-width: min(90vw, 28rem);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border: none;
  border-radius: clamp(.75rem, .5rem + .5vw, 1.25rem);
  background: var(--beige);
  color: var(--green);
}
.booking-dialog::backdrop{
  background: rgba(12, 27, 3, .55);
}
.booking-dialog__close{
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--green);
}
.booking-dialog__heading{
  margin: 0 2rem .75rem 0;
  font-family: "SangBleu Sunrise M", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-body);
letter-spacing: var(--ls);
  font-weight: 700;
  text-transform: uppercase;
}
.booking-dialog__body{
  margin: 0;
  font-family: "SangBleu Sunrise M", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-menu);
  line-height: 1.3;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer__heading{
  grid-column: 1 / span 16;
}

/* Built on the site's own 16-column grid, not a separate 3-equal-fr one:
   16 doesn't divide evenly by 3, so "three equal thirds" and "every column
   a clean span of the 16-column grid" can't both be exactly true — this
   picks the second (5 / 6 / 5, map getting the extra column since it's the
   visual centerpiece) so this row's lines mean the same thing as everywhere
   else's. That also means .footer__map's right edge lands exactly on line
   12 — the same line .team-detail__details on fuer-patientinnen.html is
   pinned to, rather than just the closest approximation to it. */
.footer__top{
  grid-column: 1 / span 16;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  column-gap: var(--gutter);
  /* No margin-top of its own: .footer__heading's own .section-heading
     margin-bottom is already the standard "heading to text" gap used
     everywhere else — adding a second, much larger margin here on top of
     that (as this used to) meant Kontakt sat further from the address
     than any other heading sits from its own text on the site. */
}
.footer__info{ grid-column: 1 / span 5; }
.footer__map{ grid-column: 6 / span 6; }
.footer__spacer{ grid-column: 12 / span 5; }

.footer__info{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
/* "Footer text is the same as nav and button" — the small type scale, not
   .section-copy's default (body) scale. */
.footer__address{
  margin: 0;
  font-style: normal;
  font-family: "SangBleu Sunrise S", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-body);
  letter-spacing: var(--ls);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2; /* 15.6pt / 13pt */
}
.footer__address p{ margin: 0; }
.footer__address a{ text-decoration: none; }
@media (hover:hover) and (pointer:fine){
  .footer__address a:hover{ text-decoration: underline; }
}
.footer__icon{
  width: clamp(4.5rem, 10vw, 7rem);
  height: auto;
  color: var(--green);
}

.footer__map{
  /* InDesign spec: 460×460 at 1920, not tied to .about__photo/.btn-more's
     own (different) widths — supersedes the earlier "match those" rule
     now that a precise figure exists. Centered within its own (wider,
     6-column) grid area via margin-inline:auto rather than stretching to
     fill it. */
  position: relative;
  width: clamp(17.5rem, 23.9583vw, 28.75rem); /* 460px at 1920 */
  margin-inline: auto;
  aspect-ratio: 1;
  border-radius: 1rem; /* 16px, flat per spec */
  overflow: hidden; /* clips the iframe to the rounded corners */
}
.footer__map iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.footer__spacer{ /* intentionally empty — reserved for future content */ }

.footer__meta{
  grid-column: 1 / span 16;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  column-gap: var(--gutter);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-family: "SangBleu Sunrise S", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-menu);
  text-transform: uppercase;
  letter-spacing: var(--ls);
}
.footer__hours{ grid-column: 1 / span 2; }
.footer__social{ grid-column: 3 / span 2; }
.footer__legal{ grid-column: 5 / span 3; }

.footer__meta-heading{
  margin: 0 0 .5em;
  font: inherit;
  font-weight: 700;
}
.footer__hours-list{ margin: 0; }
.footer__hours-list div{ display: flex; gap: 0.5rem; }
/* Fixed width on the day label so the hours line up in a column regardless
   of how wide each abbreviation happens to render. */
.footer__hours-list dt{ flex: 0 0 2.5em; margin: 0; font-weight: 700; }
.footer__hours-list dd{ margin: 0; font-weight: 700; }
.footer__social a, .footer__legal a{ display: block; font-weight: 700; text-decoration: none; }
@media (hover:hover) and (pointer:fine){
  .footer__social a:hover, .footer__legal a:hover{ text-decoration: underline; }
}

/* The header's own logo, reused via <use> rather than repeating its path
   data a third time in the document (see index.html). Fluid by design: no
   fixed size at all, just 100% of the content width at every viewport. */
.footer__wordmark{
  grid-column: 1 / span 16;
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(2rem, 6vw, 4rem);
  color: var(--green);
}

@media (max-width: 1100px){
  .footer__top{
    grid-template-columns: 1fr;
    gap: clamp(2rem, 8vw, 3rem);
  }
  /* Reset off the desktop rule's line numbers (6/span6, 12/span5) — against
     this single-column template those lines don't exist, and grid-column
     referencing a line past the explicit template just creates implicit
     extra columns to satisfy it instead of erroring, which would quietly
     break the mobile single-column stack. */
  .footer__info,
  .footer__map,
  .footer__spacer{
    grid-column: 1;
  }
  .footer__info{
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    height: auto;
  }
  .footer__spacer{ display: none; }

  /* Narrower than its column here specifically — matching About's image
     and the Team cards' mobile width — not on desktop, where it stays
     full-bleed within its third of the row. */
  .footer__map{
    width: min(58vw, 22rem);
    margin-inline: auto;
  }

  .footer__meta{
    grid-template-columns: 1fr;
    row-gap: clamp(1.5rem, 6vw, 1.7rem);
  }
  .footer__hours, .footer__social, .footer__legal{ grid-column: 1 / -1; }
}

/* ==========================================================================
   Tablet (1101px–1199px)
   The logo no longer reserves any grid space (it's positioned absolutely),
   so the nav already gets the full row on every desktop+ width — the only
   thing that changes here is alignment: centered like a wide desktop window
   reads as adrift on a narrower one, so it's pushed to the row's right edge
   instead, leaving the logo's left corner as its own anchor.
   ========================================================================== */
@media (min-width: 1101px) and (max-width: 1199px){
  .main-nav{
    justify-self: end;
  }
}

/* ==========================================================================
   Mobile (≤1100px)
   No scroll-morph: the header renders permanently in its compact state,
   the icon moves out of the lockup entirely and becomes a static watermark
   over the photo, and the three nav links move behind the hamburger. Cut off
   higher than a bare "phone vs. everything else" split (768px) would suggest
   — three inline nav links plus the logo reads as cramped through most of
   the portrait-tablet range too, so that range gets the hamburger as well.
   ========================================================================== */
@media (max-width: 1100px){
  /* The 16-column grid is more machinery than this simple row needs on
     mobile: with the logo spanning columns 1/16 and the hamburger spanning
     column 1, both have an auto row position and overlapping columns, so
     CSS Grid's collision-avoiding auto-placement pushed the hamburger onto
     a second implicit row instead of beside the logo. Flex sidesteps that
     entirely. The hamburger is the only element left in normal flow (the
     nav is display:none and the logo is taken out of flow below), so it
     naturally sits at the far left with nothing competing for the right
     side. The logo is centered on the row itself — via absolute
     positioning, not flex/grid centering — so it stays put regardless of
     the hamburger's width. */
  .header__grid{
    display: flex;
    align-items: center;
  }

  .logo-lockup{
    left: 0;
    right: 0;
    margin-inline: auto;
    width: clamp(12rem, 68vw, 15.5rem);
    /* Desktop centers vertically via a JS-computed margin-top (transform is
       already spent on the scroll-morph there) — mobile runs no scroll-morph
       and js/main.js clears its inline transform entirely, leaving this
       slot free, so a plain translateY handles centering here instead. The
       !important also guards against a stale desktop transform surviving a
       live resize into mobile before JS has re-run. */
    transform: translateY(-50%) !important;
  }
  .logo-lockup__icon{ display: none; }

  .main-nav{ display: none; }
  .menu-toggle{ display: flex; }

  .hero-mark{ display: block; }

  .hero__content{ bottom: clamp(1.5rem, 6vw, 2.5rem); }
  .hero__copy{ grid-column: 1 / span 16; }
  .btn-home{
    grid-column: 10 / span 7;
    justify-self: end;
  }
}

@media (min-width: 1101px){
  .mobile-nav{ display: none !important; }
}

/* ==========================================================================
   Subpage: Medizinisches Zentrum
   Static (non-morphing) header logo, a full-height display headline sized
   to match the homepage's own finished/scrolled logo, and a full-bleed
   scroll-triggered video section. Everything else on this page (hero copy,
   the About-style and Miete sections, the footer) reuses the homepage's
   existing shared classes untouched.
   ========================================================================== */

/* Sits at the nav's own size from the very first paint — no JS, no morph.
   Explicit grid-row on both this and .main-nav avoids the auto-placement
   collision-avoidance bug documented on .main-nav above; deliberate
   grid-column overlap with .main-nav (which spans the full row, centering
   itself within it) is fine since both are explicitly placed, not
   auto-placed — same pattern .menu-toggle already relies on. */
.logo-static{
  grid-column: 1 / span 4;
  grid-row: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
}
.logo-static__text{
  display: block;
  width: calc(var(--fs-menu) * var(--logo-text-aspect));
  height: var(--fs-menu);
  color: var(--nav-color);
}
@media (prefers-reduced-motion: no-preference){
  .logo-static__text{ transition: color .25s var(--ease); }
}
@media (max-width: 1100px){
  /* .header__grid switches to flex here (see the shared mobile block above);
     centering this the same way .logo-lockup centers itself on mobile keeps
     the two pages' header rows reading the same (hamburger left, wordmark
     centered) despite this logo never being part of a grid track. */
  .logo-static{
    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
  }
}

/* Section 1 — flat 0.5 black overlay, not the homepage hero's soft top/
   bottom gradient vignette (.hero__scrim as shipped there). */
.hero__scrim--flat{
  background: rgba(0, 0, 0, .5);
}

/*
  Centered exactly where the homepage's own "big" logo sits at scroll 0
  (.hero-logo-target: left/right var(--margin), top 46%) and sized to match
  its *visible* height: at scroll 0 the homepage wordmark (drawn as solid
  vector paths, so its own bounding box is exactly its ink) fills the full
  grid width at its own width:height ratio, i.e. (100vw - 2*margin) /
  --logo-text-aspect. Real text isn't the same, though — at line-height:1 the
  *line box* is exactly 1x font-size, but the actual glyph ink (what the eye
  measures) sits well inside that box, leaving ascender/descender headroom
  the all-caps text here never uses. Measured empirically for this font/
  weight/string ("COMED ZENTRUM" via canvas actualBoundingBox metrics): ink
  height is ~0.792x the line-box/font-size, so font-size needs to be scaled
  up by 1/0.792 (~1.2626) for the *visible* letters to match the logo's
  height, not just the invisible box around them.
  white-space:nowrap keeps this on one line: this text is much shorter per
  unit height than the full wordmark it's aspect-matched against, so without
  it the box would wrap to two lines at this font-size and silently double
  its own height.
*/
.zentrum-heading{
  position: absolute;
  left: var(--margin);
  right: var(--margin);
  top: 46%;
  transform: translateY(-50%);
  margin: 0;
  z-index: 1;
  text-align: center;
  white-space: nowrap;
  color: var(--beige);
  font-family: "SangBleu Sunrise XL", "SangBleu Sunrise", Georgia, serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls);
  line-height: 1; /* kept as-is: already empirically verified against the logo's height (see above) — the spec's 160px/174.667px (≈0.916) ratio isn't worth the risk of re-deriving that match for a line-height change that doesn't affect the visible glyph size anyway */
  font-size: calc((100vw - 2 * var(--margin)) / var(--logo-text-aspect) * 1.2626);
}

/* ==========================================================================
   Sections 2 & 4 — equal full-viewport height on desktop
   Section 2 has no button, Section 4 does, so their natural content heights
   differ; min-height:100vh (with the single .grid child centered inside it)
   makes both sections read as the same height regardless, instead of one
   looking visibly shorter than the other. Desktop only — mobile keeps its
   natural, content-driven height, same as before.
   ========================================================================== */
@media (min-width: 1101px){
  .zentrum-fullscreen{
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}

/* Section 2 — img/Tresen 1.3.jpg (887×1222, portrait) forced into the same
   landscape frame .miete__media already provides; only the crop needs its
   own rule, same pattern as .miete__image vs. .media-section__image.
.zentrum-image--tresen{
  aspect-ratio: 16 / 9;
  object-position: 50% 30%;
}
   */

/* ==========================================================================
   Section 3 — full-bleed scroll-triggered video
   No real footage yet, so the <video> renders on its poster (the same
   Tresen photo, zoomed further in than Section 2's crop) until one exists;
   js/page.js plays/pauses it against an IntersectionObserver and toggles
   native controls on hover — controls is a boolean attribute, not
   something CSS can gate.
   ========================================================================== */
.zentrum-video{
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
/* Full 100vh reads as an intentional full-bleed moment on desktop, but on a
   phone it costs an entire extra scroll for what's still just a placeholder
   image — a plain landscape frame (same ratio the other cropped photos on
   this page already use) is enough. */
@media (max-width: 1100px){
  .zentrum-video{
    height: auto;
    aspect-ratio: 16 / 9;
  }
}
.zentrum-video__el{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 25%;
  transform: scale(1.15); /* the "zoomed in" crop the reference calls for */
  z-index: -2;
  background: var(--green); /* shows briefly before the poster paints */
}
.zentrum-video__scrim{
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .5);
  pointer-events: none; /* lets hover (→ controls) reach the video underneath */
}

/* ==========================================================================
   Subpage: Für Patient:innen
   Section 2 — a two-column row (intro block + a stack of full-detail doctor
   cards) — and Section 3 — a heading with three benefit cards centered in
   the remaining viewport height below it, the same min-height:100vh + centered-
   remainder pattern as .zentrum-fullscreen but with a pinned-top heading.
   ========================================================================== */

/* ------------------------------------------------------------------------
   Section 2 — Team detail list
   Heading/intro/review in their own row (reusing .media-section__text
   directly — it's the same "heading + paragraph, left half, row 1" shape
   already used for About/Miete/Team elsewhere), the full card list in its
   own row below — same row-then-media pattern as those other sections,
   just applied here instead of the side-by-side layout tried earlier.
   ------------------------------------------------------------------------ */
.team-detail__review{
  grid-column: 1 / span 5;
  justify-self: start; /* content width, not stretched to fill the column */
  display: inline-flex;
  align-items: center;
  gap: clamp(.4rem, 1.2vw, .6rem);
  padding: 0.3rem 3rem 0.3rem 0.3rem;
  background: var(--green); /* no border-radius: a plain rectangle, not a pill */
  color: white;
  font-family: "Arial", Helvetica, sans-serif;
  font-size: var(--fs-body);
  text-decoration: none;
}
.team-detail__stars{
  letter-spacing: .05em;
}
/* Only this part reads as a link — the stars/score aren't underlined. */
.team-detail__review-label{
    text-decoration: underline;
    text-underline-offset: 1px;
    font-size: 17px;
    font-weight: 400;
}

.team-detail__list{
  grid-column: 1 / span 16;
  grid-row: 2;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 8vw, 6rem); /* "a lot of spacing" between cards */
  padding: 0;
  list-style: none;
}
/* Each card is its own 16-column grid (matching the page grid's own column
   math, gutter included, just without re-adding the page's outer margin) —
   not a flex row — so the image can sit at the exact same column span as
   .about__media (centered, "exactly the Portrait Image") independent of
   where the details column starts. */
.team-detail__card{
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  column-gap: var(--gutter);
  align-items: start;
}

.team-detail__media{
  grid-column: 7 / span 4; /* same span as .about__media on the homepage */
}
.team-detail__photo{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 654 / 900; /* same source-photo ratio as the homepage carousel */
  object-fit: cover;
}
/* .team__name / .team__role (below the photo) are reused as-is from the
   homepage carousel — same size, same treatment, per instruction. */
.team-detail__media .team__name{ margin-top: .75em; }

/* .team__actions/.team__book/.team__tag already carry the exact look this
   needs (dark-green solid + ~20%-green pill) — they're just gated to mobile
   only on the homepage (see the max-width:1100px query below their shared
   rules). This page shows them at every width instead. Full width of the
   image column above them, same as every other .btn-more-style CTA on the
   site being 100% of its own image's column. */
.team-detail__actions{
  display: flex;
  gap: clamp(.3rem, 1.5vw, .5rem);
  margin-top: clamp(1rem, 3vw, 1.5rem);
}
/* Keep both labels on one line at this column width, rather than letting
   "Termin buchen" wrap and grow taller than "Kassenarzt" next to it. */
.team-detail__actions .team__book,
.team-detail__actions .team__tag{
  white-space: nowrap;
  padding: clamp(1.2rem, 1.5625vw, 1.875rem);
}

/* grid-column-start matches the column the footer's Google-Maps embed ends
   at on desktop (measured empirically, since .footer__map sits in its own
   plain 3-column grid, not this 16-column one, so the two don't share exact
   line numbers by construction) — so this text's left edge lines up with
   the map's right edge further down the page. */
.team-detail__details{
  grid-column: 11 / span 5;
  padding-left: 3rem;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}
.team-detail__details .section-heading{
  margin-bottom: clamp(.75rem, 2vw, 1.25rem);
}
/* Body copy in this column reads at the same size as .team__name/.team__role
   elsewhere on the site (fs-menu), not the larger .section-copy size used
   for intro paragraphs — per instruction. */
.team-detail__meta{
  margin: 0;
  font-family: "SangBleu Sunrise S", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-menu);
  line-height: 1.5;
}
.team-detail__meta + .team-detail__meta{ margin-top: 1em; }
.team-detail__meta-list{
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "SangBleu Sunrise S", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-menu);
  line-height: 1.6;
}
.team-detail__phone{
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: .2em;
}

@media (max-width: 1100px){
  .team-detail__list{
    margin-top: clamp(2.5rem, 8vw, 4rem);
    gap: clamp(2.5rem, 8vw, 4rem);
  }
  /* The nested 16-column grid only earns its keep on desktop, where the
     review/image/details columns sit side by side; on mobile it's a plain
     vertical stack instead, in DOM order (review badge, then image, then
     details) — same as before. Image centered the same way the homepage's
     mobile team slider centers its (also width:min(58vw,22rem)) card;
     details stretched back to the full device width for its paragraphs. */
  .team-detail__card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 8vw, 3rem);
  }
  .team-detail__media{
    width: min(58vw, 22rem);
  }
  .team-detail__details{
    align-self: stretch;
    width: 100%;
    padding-left: 0;
  }
}

/* ------------------------------------------------------------------------
   Section 3 — Vorteile für Patient:innen
   ------------------------------------------------------------------------ */
.advantages{
  display: flex;
  flex-direction: column;
}
@media (min-width: 1101px){
  .advantages{ min-height: 100vh; }
}
.advantages__heading{
  grid-column: 1 / span 16;
}
.advantages__center{
  flex: 1;
  display: flex;
  align-items: center;
}
/* 16 columns run line 1 to line 17; three 4-column cards starting at line 3
   (3 → 15) leave a symmetric 2-column inset on both sides — wider than the
   standard --margin, matching the reference's noticeably inset card row. */
.advantages__cards-row{
  row-gap: var(--gutter);
}
.advantages__card{
  /* 3-value shorthand: top, left-and-right, bottom — less all around than
     before, except the bottom, which gets noticeably more. */
  padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2vw, 1.75rem) clamp(2.25rem, 4vw, 3.25rem);
  border-radius: clamp(.75rem, 1vw, 1.25rem);
  background: var(--green-50);
  color: var(--beige);
}
/* grid-column set whole (start/span together) per card, not as a shared
   base + per-card start override — overriding only grid-column-start after
   a `span 4` shorthand resets grid-column-end back to auto, which collapses
   each card to a single auto-sized (content-driven) column instead of a
   true 4-column span. Confirmed via measurement: cards rendered at three
   different widths, each tracking its own content's min-content width. */
.advantages__card:nth-child(1){ grid-column: 3 / span 4; }
.advantages__card:nth-child(2){ grid-column: 7 / span 4; }
.advantages__card:nth-child(3){ grid-column: 11 / span 4; }

.advantages__card-title{
  margin: 0 0 clamp(1.5rem, 4vw, 2rem);
  font-family: "SangBleu Sunrise M", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-body);
letter-spacing: var(--ls);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.25;
}
.advantages__card-items{
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "SangBleu Sunrise M", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-body);
letter-spacing: var(--ls);
  line-height: 1.5;
}
.advantages__card-items li{
  position: relative;
  padding-left: 1em;
}
.advantages__card-items li + li{ margin-top: 1em; }
.advantages__card-items li::before{
  content: "•";
  position: absolute;
  left: 0;
}

@media (max-width: 1100px){
  .advantages__cards-row{
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 6vw, 2.5rem);
  }
  .advantages__card,
  .advantages__card:nth-child(1),
  .advantages__card:nth-child(2),
  .advantages__card:nth-child(3){
    grid-column: unset;
    width: 100%;
  }
}

/* ==========================================================================
   Subpage: Für Ärzt:innen
   Section 1's CTA (centered under the headline, not beside the hero copy)
   and Section 4's placeholder room shapes — everything else on this page
   (the Miete-style Räume/Detail sections, the Vorteile cards, the footer)
   reuses classes already built for the other two subpages untouched.
   ========================================================================== */

/* .btn-more exactly, colors swapped (beige/green instead of green/beige) —
   "the default button... only in beige" — plus position overridden, since
   it's a plain child of .hero (not a grid item at all), centered
   independently of the hero copy below it. Still needs an explicit width,
   though: .btn-more's own width:90% resolves against .hero itself here
   (its nearest positioned ancestor), not a 4-column grid area, so left
   alone it would stretch to 90% of the full hero width instead of matching
   every other .btn-more on this page — this reproduces that same "90% of
   4 of 16 columns" math (see .about__media and friends) by hand instead. */
.miete-hero__cta{
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: calc(.85 * ((100vw - 2 * var(--margin)) / 4 - .75 * var(--gutter)));
  margin-top: 0;
  white-space: nowrap;
  background: var(--beige);
  color: var(--green);
}
@media (hover: hover) and (pointer: fine){
  .miete-hero__cta:hover{
    background: transparent;
    border-color: var(--beige);
    color: var(--beige);
  }
}
.miete-hero__cta:focus-visible{
  outline: none;
  background: transparent;
  border-color: var(--beige);
  color: var(--beige);
}

/* ------------------------------------------------------------------------
   Section 4 — Detail: placeholder room shapes
   No real floor-plan imagery exists yet, so these are plain colour blocks
   (same olive tone as the Vorteile cards) — same 3-across column math as
   .advantages__card (col 3/7/11, span 4), reused directly for visual
   consistency between the two sections.
   ------------------------------------------------------------------------ */
.miete-detail__shapes{
  grid-column: 1 / span 16;
  grid-row: 2;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(3rem, 6vw, 8rem); /* deliberately wider than the shared --gutter */
}
.miete-detail__shape{
  flex: 0 0 clamp(14rem, 26vw, 18rem);
}

.miete-detail__shape-box{
  width: 100%;
  aspect-ratio: 1;
  background: var(--green-50);
}
/* The one non-square option: an L-shape, notched at the bottom-left. */
.miete-detail__shape-box--c{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%, 40% 60%, 0 60%);
}
.miete-detail__shape-label{
  margin: clamp(1rem, 3vw, 4rem) 0 0;
  text-align: center;
  font-family: "SangBleu Sunrise M", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-body);
  text-transform: uppercase;
letter-spacing: var(--ls);
  line-height: 1.2;
}

.miete-detail__shape-label span{ display: block;}

/* Same "default button, row 3" placement already used for every other
   Miete-style section's .btn-more. */
.miete-detail__grid > .btn-more{
  grid-column: 7 / span 4;
  grid-row: 3;
}

@media (max-width: 1100px){
  /* Small enough already (clamp floors at 7rem) to stay a flex row here
     too, rather than forcing the usual single-column mobile stack. */
  .miete-detail__shapes{
    gap: clamp(2rem, 8vw, 3rem);
  }
  .miete-detail__grid > .btn-more{
    grid-column: 1 / span 16;
    justify-self: center;
    width: min(58vw, 22rem);
    margin-top: clamp(3rem, 9vw, 4.5rem);
  }
}

/* ==========================================================================
   Anfrage popup
   Shared by every "Anfragen" trigger on fuer-aerztinnen.html. Same olive
   tone as the Vorteile cards (not .booking-dialog's beige) — beige, at
   half opacity, is the *backdrop* here instead, the reverse of
   .booking-dialog's dark-green-backdrop/beige-panel pairing.
   ========================================================================== */
.anfrage-dialog{
  /* position/inset/margin (centering) come from the shared dialog block
     above. */
  width: 100%;
  max-width: 900px;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(3.5rem, 9vw, 7rem); /* block, inline — a lot more room on the sides than top/bottom */
  border: none;
  border-radius: clamp(.75rem, .5rem + .5vw, 1.25rem);
  background: color-mix(in srgb, var(--green) 55%, var(--beige) 45%);
  color: var(--beige);
}
.anfrage-dialog::backdrop{
  background: rgba(202, 195, 185, .5);
}
@media (max-width: 1100px){
  .anfrage-dialog{
    width: 90%;
    padding: clamp(1.5rem, 6vw, 2.5rem) clamp(1.25rem, 6vw, 2rem);
  }
}

.anfrage-dialog__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.anfrage-dialog__heading{
  margin: 0;
  font-family: "SangBleu Sunrise M", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-body);
letter-spacing: var(--ls);
  font-weight: 700;
  text-transform: uppercase;
}
/* Sits in the same flex row as the heading (not absolutely positioned)
   specifically so it lines up with the heading's own vertical center for
   free, regardless of exact padding/font-size — rather than hand-tuning a
   `top` offset to match. */
.anfrage-dialog__close{
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--green); /* the closest this 2-colour palette gets to "black" */
}

.anfrage-form{
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 1.75rem);
}
/* Without this, the `hidden` attribute JS sets on submit does nothing:
   [hidden] and .anfrage-form both carry one-class-worth of specificity, so
   the later-declared rule wins the cascade regardless of the attribute —
   and .anfrage-form's own display:flex above is what's declared last. */
.anfrage-form[hidden]{
  display: none;
}
.anfrage-form__row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}
.anfrage-form__field label{
  display: block;
  margin-bottom: .5em;
  font-family: "SangBleu Sunrise M", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-menu);
letter-spacing: var(--ls); /* same as the site's default text, per instruction */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls);
}
/* White, not beige or green: the one deliberate exception to the site's
   2-colour palette — an empty input needs to read as "empty and fillable"
   against the card's own olive fill, which neither palette colour does. */
.anfrage-form__field input{
  display: block;
  width: 100%;
  padding: clamp(.6rem, .5rem + .5vw, .9rem) clamp(.8rem, .6rem + .6vw, 1.1rem);
  border: 0;
  border-radius: clamp(.5rem, .8333vw, 1rem);
  background: #fff;
  color: var(--green);
  font-family: "SangBleu Sunrise M", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-menu);
}
.anfrage-form__field input::placeholder{
  color: color-mix(in srgb, var(--green) 50%, transparent);
}

/* .btn-more now defaults to 90% of its own column (see that rule) — that's
   for matching a narrowed sibling image elsewhere, not relevant here, so
   this restores the full form-content width instead. "A bit wider than
   the default button" follows automatically from the dialog itself being
   wider, no separate override needed. margin-top (tuned for sitting below
   a photo/image elsewhere) is also cleared, since spacing here already
   comes from .anfrage-form's own gap. */
.anfrage-form__submit{
  width: 100%;
  margin-inline: 0;
  margin-top: 7%;
}

.anfrage-form__confirmation{
  margin: 0;
  font-family: "SangBleu Sunrise M", "SangBleu Sunrise", Georgia, serif;
  font-size: var(--fs-body);
letter-spacing: var(--ls);
  line-height: 1.3;
}

@media (max-width: 1100px){
  .anfrage-form__row{
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 3vw, 1.75rem);
  }
}