/* Health Care to Market. Mobile first, Umschaltpunkte 700 px (Laptop) und 1360 px (Desktop).
   Designwerte: Mobile 390, Laptop 1280, Desktop 1440. Dazwischen fliessend. */

@font-face {
  font-family: 'Nimbus Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/nimbus-sans-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Nimbus Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/nimbus-sans-Bold.otf') format('opentype');
}

:root {
  --red: #D82028;
  --red-hover: #CD0202;
  --ink: #303840;
  --footer: #262c32;
  --on-dark: #d5d8dc;
  --muted: #5f656c;
  --toggle-off: #9aa0a6;

  /* Mobile (390 px) */
  --gutter: 24px;
  --header-pad-y: 16px;
  --logo-h: 38px;
  --h1: 44px;
  --hero-lead: 19px;
  --hero-p: 17px;
  --hero-pad-top: 40px;
  --hero-pad-bottom: 64px;
  --hero-gap: 36px;
  --shadow: 14px;
  --contact-pad-y: 56px;
  --h2: 34px;
  --contact-p: 18px;
  --icon: 22px;
  --strip: 20px;
  --legal-h1: 40px;
  --legal-h2: 26px;
  --legal-h3: 18px;
  --legal-p: 17px;
}

/* Laptop: ab 700 px, wächst bis 1280 px auf den Laptop-Wert */
@media (min-width: 700px) {
  :root {
    --gutter: min(48px, calc(24px + (100vw - 700px) * 0.04138));
    --header-pad-y: min(26px, calc(16px + (100vw - 700px) * 0.01724));
    --logo-h: min(46px, calc(38px + (100vw - 700px) * 0.01379));
    --h1: min(72px, calc(44px + (100vw - 700px) * 0.04828));
    --hero-lead: min(22px, calc(19px + (100vw - 700px) * 0.00517));
    --hero-p: min(19px, calc(17px + (100vw - 700px) * 0.00345));
    --hero-pad-top: min(72px, calc(40px + (100vw - 700px) * 0.05517));
    --hero-pad-bottom: min(96px, calc(64px + (100vw - 700px) * 0.05517));
    --hero-gap: min(56px, calc(36px + (100vw - 700px) * 0.03448));
    --shadow: min(18px, calc(14px + (100vw - 700px) * 0.0069));
    --contact-pad-y: min(88px, calc(56px + (100vw - 700px) * 0.05517));
    --h2: min(44px, calc(34px + (100vw - 700px) * 0.01724));
    --contact-p: min(19px, calc(18px + (100vw - 700px) * 0.00172));
    --strip: min(32px, calc(20px + (100vw - 700px) * 0.02069));
    --legal-h1: min(60px, calc(40px + (100vw - 700px) * 0.03448));
    --legal-h2: min(30px, calc(26px + (100vw - 700px) * 0.0069));
    --legal-h3: min(20px, calc(18px + (100vw - 700px) * 0.00345));
    --legal-p: min(18px, calc(17px + (100vw - 700px) * 0.00172));
  }
}

/* Desktop: ab 1360 px, wächst bis 1440 px auf den Desktop-Wert */
@media (min-width: 1360px) {
  :root {
    --gutter: min(60px, calc(48px + (100vw - 1360px) * 0.15));
    --logo-h: min(50px, calc(46px + (100vw - 1360px) * 0.05));
    --h1: min(88px, calc(72px + (100vw - 1360px) * 0.2));
    --hero-lead: min(24px, calc(22px + (100vw - 1360px) * 0.025));
    --hero-p: min(21px, calc(19px + (100vw - 1360px) * 0.025));
    --hero-pad-top: min(96px, calc(72px + (100vw - 1360px) * 0.3));
    --hero-pad-bottom: min(128px, calc(96px + (100vw - 1360px) * 0.4));
    --hero-gap: min(80px, calc(56px + (100vw - 1360px) * 0.3));
    --shadow: min(20px, calc(18px + (100vw - 1360px) * 0.025));
    --contact-pad-y: min(104px, calc(88px + (100vw - 1360px) * 0.2));
    --h2: min(56px, calc(44px + (100vw - 1360px) * 0.15));
    --contact-p: min(20px, calc(19px + (100vw - 1360px) * 0.0125));
    --icon: min(24px, calc(22px + (100vw - 1360px) * 0.025));
    --strip: min(36px, calc(32px + (100vw - 1360px) * 0.05));
    --legal-h1: min(72px, calc(60px + (100vw - 1360px) * 0.15));
    --legal-h2: min(34px, calc(30px + (100vw - 1360px) * 0.05));
    --legal-h3: min(21px, calc(20px + (100vw - 1360px) * 0.0125));
    --legal-p: min(19px, calc(18px + (100vw - 1360px) * 0.0125));
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: 'Nimbus Sans', 'Nimbus Sans L', 'TeX Gyre Heros', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-synthesis: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; }

a { color: var(--red-hover); text-decoration: underline; }
a:hover { text-decoration: none; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.site-header :focus-visible,
.dark :focus-visible,
.foot :focus-visible { outline-color: #fff; }

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

.bar { height: 6px; background: var(--red); flex: none; }

.wrap {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Header */
.site-header { background: var(--ink); }
.site-header .wrap {
  padding-top: var(--header-pad-y);
  padding-bottom: var(--header-pad-y);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { display: block; line-height: 0; text-decoration: none; }
.logo img { height: var(--logo-h); width: auto; display: block; }
.li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  text-decoration: none;
}
.li svg { width: 26px; height: 26px; fill: #fff; transition: fill .15s; }
.li:hover svg, .li:focus-visible svg { fill: var(--red); }
@media (min-width: 700px) { .li svg { width: 30px; height: 30px; } }

/* Hero */
main { flex: 0 0 auto; }
main.wrap { flex: 1 0 auto; }
.hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--hero-gap);
  padding: var(--hero-pad-top) 0 var(--hero-pad-bottom);
}
.portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.hero-text { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.hero h1 {
  margin: -0.08em 0 0;
  font-weight: 400;
  font-size: var(--h1);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.hero h1 span { color: var(--red); }
.rule { width: 64px; height: 4px; background: var(--red); }
.hero .text {
  max-width: 34em;
  display: flex;
  flex-direction: column;
  gap: 1em;
  font-size: var(--hero-lead);
  line-height: 1.45;
}
.hero .text p { margin: 0; }
.hero .text p:last-child { font-weight: 700; }
.nowrap { white-space: nowrap; }

@media (min-width: 700px) {
  .hero { grid-template-columns: 5fr 7fr; }
}

/* Kontakt */
.dark { background: var(--ink); color: #fff; }
.dark a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.dark a:hover { text-decoration-color: #fff; }
.contact {
  padding-top: var(--contact-pad-y);
  padding-bottom: var(--contact-pad-y);
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.contact-intro { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
}
.eyebrow::before { content: ''; display: block; width: 28px; height: 4px; background: var(--red); }
.contact h2 {
  margin: 0;
  font-weight: 400;
  font-size: var(--h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}
.contact-intro p { margin: 0; max-width: 26em; font-size: var(--contact-p); line-height: 1.5; color: var(--on-dark); }
.contact-intro p.quote-author { font-size: 15px; line-height: 1.4; }
.address {
  border-left: 4px solid var(--red);
  padding: 8px 0 8px var(--strip);
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: var(--contact-p);
  line-height: 1.45;
}
.row svg {
  flex: none;
  width: var(--icon);
  height: var(--icon);
  margin-top: 3px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.row a { overflow-wrap: anywhere; }

@media (min-width: 700px) {
  .contact { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 48px; }
  .contact-intro, .address { flex: 1 1 360px; }
}
@media (min-width: 1360px) {
  .contact { gap: 64px; }
  .contact-intro, .address { flex-basis: 400px; }
}

/* Footer */
.foot { background: var(--footer); color: var(--on-dark); flex: none; }
.foot .wrap {
  padding-top: 24px;
  padding-bottom: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
}
.foot nav { display: flex; flex-wrap: wrap; gap: 0 24px; order: -1; }
.foot .copy { padding-top: 8px; }
.foot a, .foot button {
  color: var(--on-dark);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.foot a:hover, .foot button:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
@media (min-width: 700px) {
  .foot .wrap {
    padding-top: 28px;
    padding-bottom: 28px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 4px 32px;
  }
  .foot nav { order: 0; gap: 0 28px; }
  .foot .copy { padding-top: 0; }
}
@media (min-width: 1360px) {
  .foot .wrap { padding-top: 32px; padding-bottom: 32px; }
}

/* Impressum und Datenschutz */
.legal { max-width: 44em; padding: 48px 0 72px; }
@media (min-width: 700px) { .legal { padding: 72px 0 96px; } }
@media (min-width: 1360px) { .legal { padding: 96px 0 128px; } }
.legal h1 {
  margin: 0 0 28px;
  font-weight: 400;
  font-size: var(--legal-h1);
  line-height: 1;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.legal .rule { margin-bottom: 40px; }
.legal h2 {
  margin: 56px 0 16px;
  font-weight: 400;
  font-size: var(--legal-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.legal h3 {
  margin: 32px 0 10px;
  font-weight: 700;
  font-size: var(--legal-h3);
  line-height: 1.3;
}
.legal p { margin: 0 0 1em; font-size: var(--legal-p); line-height: 1.6; }
.legal p.lead { font-weight: 700; }
.legal p, .legal a { overflow-wrap: anywhere; }

/* Cookie-Banner */
.banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: #fff;
  border-top: 4px solid var(--red);
  box-shadow: 0 -8px 32px rgba(48, 56, 64, 0.28);
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--ink);
  max-height: 90vh;
  overflow-y: auto;
}
.banner[hidden], .banner [hidden] { display: none; }
.banner-title { font-weight: 400; font-size: 22px; line-height: 1.1; }
.banner-view { display: flex; flex-direction: column; gap: 12px; }
.banner-view p { margin: 0; font-size: 15px; line-height: 1.5; }
.btns { display: flex; gap: 12px; }
.btn {
  min-height: 48px;
  padding: 0 22px;
  font: 400 17px 'Nimbus Sans', 'Nimbus Sans L', 'TeX Gyre Heros', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  cursor: pointer;
  flex: 1 1 auto;
}
.btn-p { background: var(--red); color: #fff; border: 1px solid var(--red); }
.btn-p:hover { background: var(--red-hover); border-color: var(--red-hover); }
.btn-s { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.btn-s:hover { background: #ebebeb; }
.linkbtn {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  min-height: 44px;
  font: 400 17px 'Nimbus Sans', 'Nimbus Sans L', 'TeX Gyre Heros', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--red-hover);
  text-decoration: underline;
  cursor: pointer;
}
.linkbtn:hover { text-decoration: none; }
.tgl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 17px;
}
.tgl strong { font-weight: 700; }
.tgl small { font-size: 14px; color: var(--muted); }
.tgl-fixed { font-size: 14px; color: var(--muted); }
.switch {
  display: flex;
  flex: none;
  width: 52px;
  height: 30px;
  border-radius: 15px;
  padding: 3px;
  margin: 0;
  border: 0;
  background: var(--toggle-off);
  cursor: pointer;
  align-items: center;
  justify-content: flex-start;
}
.switch[aria-pressed='true'] { background: var(--red); justify-content: flex-end; }
.switch span { display: block; width: 24px; height: 24px; border-radius: 12px; background: #fff; }

@media (min-width: 700px) {
  .banner {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: 440px;
    max-width: calc(100vw - 48px);
    padding: 24px;
    gap: 14px;
    box-shadow: 0 8px 32px rgba(48, 56, 64, 0.28);
  }
  .banner-title { font-size: 24px; }
  .banner-view { gap: 14px; }
  .banner-view p { font-size: 16px; line-height: 1.55; }
  .btns { flex-wrap: wrap; }
  .btn { min-height: 44px; flex: 0 1 auto; }
  .tgl small, .tgl-fixed { font-size: 15px; }
  .switch { width: 48px; height: 26px; border-radius: 13px; }
  .switch span { width: 20px; height: 20px; border-radius: 10px; }
}
@media (min-width: 1360px) {
  .banner { width: 460px; padding: 28px; gap: 16px; }
  .banner-title { font-size: 26px; }
  .banner-view { gap: 16px; }
  .banner-view p { font-size: 17px; }
}

/* Mobile */
@media (max-width: 699px) {
  .foot .wrap { font-size: 15px; }
  .banner-title { font-size: 20px; }
  .banner-view p { font-size: 14px; }
  .btn, .linkbtn { font-size: 16px; }
  .tgl { font-size: 16px; }
}