/* Light, clinic-style design (no framework) */

:root{
  --box-gap: 24px;

  --bg:#ffffff;
  --surface:#f6f8fb;
  --card:#ffffff;
  --stroke:rgba(16,24,40,.14);
  --text:#0b1220;
  --muted:rgba(11,18,32,.72);

  --primary:#005fa3;
  --primary-2:#0b79d0;
  --primary-soft:rgba(0,95,163,.10);

  --shadow: 0 14px 34px rgba(16,24,40,.12);
  --radius: 18px;
  --radius-sm: 12px;
  --max: 1160px;
}

*{box-sizing:border-box}
html,body{height:100%}
/*
  Force light color scheme for embedded widgets.
  Many third‑party iframes (e.g. Termin‑Widgets) switch to a dark UI when the
  user's OS/browser prefers dark mode, which can look like a "black" background
  on an otherwise light page.
*/
html{color-scheme: light;}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg);
  line-height:1.6;
}

a{color:inherit}
a:hover{opacity:.92}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

.skip{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{left:20px; top:20px; width:auto; height:auto; padding:10px 12px; background:#fff; color:#000; border-radius:10px; z-index:9999; box-shadow:var(--shadow)}

/*
  Fixed header (instead of sticky)
  Some mobile browsers can be unreliable with position: sticky depending on
  scroll containers / viewport quirks. A fixed header is more robust.
*/
.header{
  position: fixed;
  top:0;
  left:0;
  right:0;
  z-index:2000;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--stroke);

  padding-top: env(safe-area-inset-top);
}

/* Reserve space so content doesn't slide under the fixed header */
body{ padding-top: calc(var(--header-h, 92px) + env(safe-area-inset-top)); }

.header.is-scrolled{
  box-shadow: 0 10px 24px rgba(16,24,40,.08);
}

/* Avoid anchor targets being hidden behind the sticky header */
section[id]{
  scroll-margin-top: 110px;
}

/* Better keyboard visibility */
:focus-visible{
  outline: 3px solid rgba(0,95,163,.35);
  outline-offset: 3px;
}

.utilbar{
  background:linear-gradient(90deg, rgba(0,95,163,.08), rgba(11,121,208,.06));
  border-bottom:1px solid var(--stroke);
  font-size:13px;
}
.utilbar__inner{
  display:flex; align-items:center; justify-content:space-between; gap: var(--box-gap);
  padding:8px 0;
}
.utilbar a{color:var(--primary); text-decoration:none}
.utilbar a:hover{text-decoration:underline}
.utilbar__right{display:flex; align-items:center; gap: var(--box-gap); flex-wrap:wrap}

.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap: var(--box-gap);
  padding:12px 0;
}

.brand{display:flex; align-items:center; gap: var(--box-gap); text-decoration:none}
.brand__logo{width:40px; height:40px}
.brand__name{font-weight:800; letter-spacing:-.02em}
.brand__tag{font-size:12px; color:var(--muted)}

.nav{
  display:flex; align-items:center; gap: var(--box-gap);
}
.nav a{
  font-size:14px;
  text-decoration:none;
  color:rgba(11,18,32,.88);
  padding:10px 10px;
  border-radius:12px;
}
.nav a:hover{background:rgba(0,95,163,.08)}
.nav .btn{margin-left:6px}

/* Online booking widgets: more room so the embedded applet fits immediately */
.online-widget{width:100%;}
.online-iframe{width:100%;min-height:180px;height:auto;border:none;display:block;}
.online-widget iframe{display:block;width:100%;min-height:180px;}

.navbtn{
  display:none;
  width:44px; height:44px; border-radius:12px;
  border:1px solid var(--stroke);
  background:#fff;
  color:var(--text);
}
.navbtn span{display:block; height:2px; width:18px; margin:4px auto; background:rgba(11,18,32,.76); border-radius:2px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  text-decoration:none;
  font-weight:700;
  border:1px solid rgba(0,95,163,.25);
  background: linear-gradient(135deg, rgba(0,95,163,.12), rgba(11,121,208,.10));
  color:var(--primary);
}
.btn:hover{background: linear-gradient(135deg, rgba(0,95,163,.16), rgba(11,121,208,.14))}
.btn--solid{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 22px rgba(0,95,163,.22);
}
.btn--solid:hover{filter:brightness(1.03)}
.btn--ghost{
  background:#fff;
  border:1px solid var(--stroke);
  color:rgba(11,18,32,.9);
}
.btn--ghost:hover{background:rgba(16,24,40,.04)}
.btn--small{padding:10px 12px; font-size:13px}

.pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,95,163,.20);
  background:rgba(0,95,163,.08);
  font-size:12px;
  color:var(--primary);
  width:max-content;
}

main{padding-top:16px}

.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--stroke);
  background:
    radial-gradient(900px 480px at 10% 20%, rgba(0,95,163,.18), transparent 60%),
    radial-gradient(900px 480px at 80% 10%, rgba(11,121,208,.14), transparent 60%),
    linear-gradient(180deg, rgba(246,248,251,.92), rgba(255,255,255,1));
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--box-gap);
  padding:48px 0 34px;
  align-items:start;
}
.hero__lead h1{
  margin:10px 0 8px;
  font-size:clamp(30px, 4vw, 44px);
  line-height:1.15;
  letter-spacing:-.03em;
}
.hero__lead p{margin:0; color:var(--muted); max-width:62ch}
.hero__actions{display:flex; gap: var(--box-gap); flex-wrap:wrap; margin-top:18px}

.hero__card{
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}
.kv{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--box-gap);
}
.kv__row{
  display:flex; justify-content:space-between; gap: var(--box-gap); flex-wrap:wrap;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(16,24,40,.03);
  border:1px solid rgba(16,24,40,.06);
}
.kv__k{font-weight:700; color:rgba(11,18,32,.84)}
.kv__v{color:rgba(11,18,32,.80)}
.kv__v a{color:var(--primary); text-decoration:none}
.kv__v a:hover{text-decoration:underline}

.searchbox{
  margin-top:14px;
  display:flex; gap: var(--box-gap);
}
.searchbox input{
  flex:1;
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:12px 12px;
  font-size:14px;
  outline:none;
  background:#fff;
}
.searchbox input:focus{box-shadow:0 0 0 4px rgba(0,95,163,.12); border-color:rgba(0,95,163,.35)}

.section{padding:44px 0}
.section--alt{background:var(--surface); border-top:1px solid var(--stroke); border-bottom:1px solid var(--stroke)}
.section__head{max-width: 78ch; margin-bottom:18px}
.section__head h2{margin:0 0 8px; font-size:28px; letter-spacing:-.02em}
.section__head p{margin:0; color:var(--muted)}

.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:16px}
.grid3{display:grid; grid-template-columns: repeat(3,1fr); gap:16px}

.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 8px 20px rgba(16,24,40,.06);
}
.card h3{margin:6px 0 10px; letter-spacing:-.01em}
.card h4{margin:16px 0 8px}
.card p{margin:0 0 12px; color:var(--muted)}
.card__eyebrow{
  display:inline-flex;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--primary);
  background:rgba(0,95,163,.08);
  border:1px solid rgba(0,95,163,.18);
  padding:6px 10px;
  border-radius:999px;
}

.list{margin:8px 0 0; padding-left:18px; color:rgba(11,18,32,.82)}
.list li{margin:6px 0}
.list--cols{columns:2; column-gap:20px}

.split{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--box-gap);
  align-items: stretch;
}

.photo{
  width:100%;
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.photo img{display:block; width:100%; height:auto}

.teamphoto{margin:14px 0 18px; border-radius: var(--radius); overflow:hidden; border:1px solid var(--stroke); box-shadow: var(--shadow); background:#fff}
.teamphoto img{display:block; width:100%; height:320px; object-fit:cover}
.teamphoto__caption{padding:10px 12px; font-size:13px; color:var(--muted); border-top:1px solid var(--stroke); background:rgba(16,24,40,.01)}

.badgegrid{display:flex; flex-wrap:wrap; gap: var(--box-gap); margin-top:10px}
.badge{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(0,95,163,.18);
  background:rgba(0,95,163,.06);
}
.badge__k{font-weight:800; color:var(--primary)}
.badge__v{color:rgba(11,18,32,.82)}

.teamgrid{display:grid; grid-template-columns: repeat(4,1fr); gap:14px}
.person{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 8px 18px rgba(16,24,40,.06);
}
.person img{width:100%; height:220px; object-fit:cover}
.person__body{padding:14px}
.person__name{font-weight:900}
.person__role{color:var(--muted); font-size:13px; margin-top:2px}
.person__meta{margin-top:10px; font-size:13px; color:rgba(11,18,32,.80)}

.notice{
  padding:14px 16px;
  border-radius: var(--radius);
  border:1px solid rgba(0,95,163,.20);
  background: rgba(0,95,163,.08);
  color:rgba(11,18,32,.86);
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background:#fff;
}
.table th,.table td{padding:12px 12px; border-bottom:1px solid var(--stroke); text-align:left}
.table th{font-size:13px; color:rgba(11,18,32,.80); background:rgba(16,24,40,.02)}
.table tr:last-child td{border-bottom:none}

.footer{
  padding:28px 0;
  background: #0b1220;
  color: rgba(255,255,255,.88);
}
.footer a{color:#fff; text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--box-gap);
  align-items:start;
}
.footer__muted{color:rgba(255,255,255,.70); font-size:13px}

.smallprint{
  border-top:1px solid rgba(255,255,255,.18);
  margin-top:16px;
  padding-top:14px;
  font-size:12px;
  color:rgba(255,255,255,.70);
}

@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr; padding:34px 0 26px}
  .teamgrid{grid-template-columns: repeat(2,1fr)}
  .grid3{grid-template-columns: 1fr}
  .grid2{grid-template-columns: 1fr}
  .list--cols{columns:1}
  .teamphoto img{height:220px}
}

@media (max-width: 820px){
  .navbtn{display:block}
  .nav{
    position:absolute;
    top:100%;
    right:14px;
    left:14px;
    margin:0 auto;
    max-width:var(--max);
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap: var(--box-gap);
    background:#fff;
    border:1px solid var(--stroke);
    border-radius: var(--radius);
    padding:10px;
    box-shadow: var(--shadow);
  }
  .nav a{padding:12px 12px}
  .nav.open{display:flex}
  .footer__grid{grid-template-columns:1fr}
}

/* CTA band */
.cta{
  padding:40px 0;
  background: linear-gradient(90deg, rgba(0,95,163,.10), rgba(11,121,208,.06));
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
}
.cta__inner{display:flex; align-items:center; justify-content:space-between; gap: var(--box-gap); flex-wrap:wrap}
.cta__inner h2{margin:0 0 6px; letter-spacing:-.02em}
.cta__inner p{margin:0; color:var(--muted)}
.cta__actions{display:flex; gap: var(--box-gap); flex-wrap:wrap}


/* Hero background image (Sliderbild) */
.hero--with-image{position:relative; overflow:hidden;}
.hero--with-image::before{content:""; position:absolute; inset:0; background:url("assets/hero-neu.jpg") center/cover no-repeat; filter:saturate(110%) contrast(105%); transform:scale(1.03);}
.hero--with-image::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.86) 45%, rgba(255,255,255,.78) 100%);}
.hero--with-image > .container{position:relative; z-index:1;}

/* Mobile: mehr seitlicher Abstand für Inhalte im Slider/Hero */
@media (max-width: 520px){
  .hero--with-image > .container{
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Zwei-Klick-Einwilligung für externe Inhalte (Karte/Terminwidget) */
.consent-embed__title{font-weight:800; font-size:18px; margin-bottom:10px}
.consent-embed__text{max-width:620px; margin:0 auto 14px; color:rgba(16,24,40,.85)}
.consent-embed__hint{max-width:620px; margin:14px auto 0; font-size:13px; color:rgba(16,24,40,.7)}
.consent-embed__inner{background:linear-gradient(180deg, rgba(16,24,40,.02), rgba(16,24,40,.01)); border-radius:18px}

/* Make iframe canvas/background light even when the OS is in dark mode */
iframe[id^="automedic-plugin-"]{
  color-scheme: light;
  background:#fff;
}
iframe[src*="vitalyze.meditech-ai.de"],
iframe[src*="widget.automedic.de"]{
  color-scheme: light;
  background:#fff;
}

/* Sensible default height to avoid "empty/black" areas before postMessage-resize kicks in */
.online-split iframe[id^="automedic-plugin-"]{
  /* Start height; will grow via postMessage (see script.js). */
  min-height: 520px;
  height: 520px;
  /* IMPORTANT: no max-height, so the widget can grow */
  max-height: none;
  display:block;
}


/* Online-Terminsplit (Endoskopie | Kardiologie) */
.online-split{display:grid;grid-template-columns:1fr 1fr;gap: var(--box-gap);margin-top:20px;align-items:stretch;grid-auto-rows:1fr}
@media (max-width: 900px){}

.online-split > .card{height:100%;display:flex;flex-direction:column;align-self:stretch;min-height:100%}

.online-split .consent-embed{margin-top:0}

.online-split .consent-embed__inner{width:100%}


/* Equal-height cards in Terminvereinbarung / Bitte mitbringen */
.split{align-items:stretch}
.split > .card{height:100%; display:flex; flex-direction:column}


/* === Global equal spacing for box layouts === */
.split,
.online-split{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--box-gap);
  align-items: stretch;
}

/* Ensure cards in grids stretch evenly */
.split > .card,
.online-split > .card{
  height: 100%;
}

/* Mobile stacking */
@media (max-width: 900px){
  .split,
  .online-split{
    grid-template-columns: 1fr;
  }
}


/* === Consistent box spacing across the site === */
.cards,
.grid,
.split,
.online-split,
.hero__badges,
.footer__grid{
  gap: var(--box-gap);
}

/* Consistent vertical rhythm between stacked cards (when not using grid gap) */
.section + .section{ margin-top: calc(var(--box-gap) * 2); }
.card + .card{ margin-top: var(--box-gap); }


/* === Equal-height side-by-side boxes (global) === */
:root{
  --box-gap: 24px;
}

/* Any 2-column grid containers used for box layouts */
.split,
.online-split,
.cards,
.card-grid,
.grid-2,
.grid-3,
.info-grid,
.features,
.section-grid{
  gap: var(--box-gap);
  align-items: stretch;
  grid-auto-rows: 1fr;
}

/* Ensure direct box children stretch fully */
.split > .card,
.online-split > .card,
.cards > .card,
.card-grid > .card,
.grid-2 > .card,
.grid-3 > .card,
.info-grid > .card,
.features > .card,
.section-grid > .card{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* If a grid uses <a class="card">...</a> etc */
.split > a.card,
.online-split > a.card,
.cards > a.card,
.card-grid > a.card,
.grid-2 > a.card,
.grid-3 > a.card,
.info-grid > a.card,
.features > a.card,
.section-grid > a.card{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Make "card body" grow when present so buttons align to bottom */
.card__body,
.card .card__body{
  flex: 1 1 auto;
}

/* Keep 2 columns equal width on desktop for the two-column sections */
.split,
.online-split{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px){
  .split,
  .online-split{
    grid-template-columns: 1fr;
  }
}


/* === FIX: Equal-height + equal-width boxes for side-by-side cards === */
:root{ --box-gap: 24px; }

/* Termine & Öffnungszeiten (Terminvereinbarung | Bitte mitbringen) */
.split{
  display:flex !important;
  gap: var(--box-gap) !important;
  align-items: stretch !important;
}
.split > .card{
  flex: 1 1 0;
  height: auto;
  display:flex;
  flex-direction:column;
}

/* Online-Termine split (Endoskopie | Kardiologie) */
.online-split{
  display:flex !important;
  gap: var(--box-gap) !important;
  align-items: stretch !important;
}
.online-split > .card{
  flex: 1 1 0;
  display:flex;
  flex-direction:column;
}

/* Mobile stacking */
@media (max-width: 900px){
  .split, .online-split{
    flex-direction:column;
  }
}


/* ===============================
   FINAL BOX LAYOUT OVERRIDES
   Goal:
   - Boxes that are side-by-side are ALWAYS equal height
   - Side-by-side columns are ALWAYS equal width
   - Horizontal + vertical spacing between boxes is ALWAYS identical
   =============================== */

:root{
  --box-gap: 24px;
}

/* Two-column box rows */
.split,
.online-split{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--box-gap) !important;
  align-items: stretch !important;
  grid-auto-rows: 1fr !important;
}

/* Make the boxes stretch to identical height */
.split > *,
.online-split > *{
  height: 100% !important;
}

/* Make cards behave predictably inside equal-height columns */
.split > .card,
.split > article.card,
.online-split > .card{
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}

/* If a card has a body wrapper, let it grow so buttons stay aligned */
.card__body{
  flex: 1 1 auto;
}

/* Keep same spacing for other card grids if present */
.cards,
.card-grid,
.grid,
.grid-2,
.grid-3,
.info-grid,
.features,
.section-grid{
  gap: var(--box-gap);
}

/* Mobile: stack */
@media (max-width: 900px){
  .split,
  .online-split{
    grid-template-columns: 1fr !important;
  }
}

/* === v23: deterministic 2-col box rows + consistent spacing === */
.split,
.online-split{
  gap: var(--box-gap) !important;
}


/* === v24 FIX: side-by-side boxes ALWAYS equal width + equal height === */
:root{ --box-gap: 24px; }

.split,
.online-split{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--box-gap) !important;
  align-items: stretch !important;
}

.split > .card,
.split > article.card,
.online-split > .card,
.online-split > article.card{
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Mobile: stack */
@media (max-width: 900px){
  .split,
  .online-split{
    grid-template-columns: 1fr !important;
  }
}


/* === v25: Global rules for all side-by-side boxes === */
:root{
  --box-gap: 24px;
}

/* All multi-column box containers on the site */
.split,
.online-split,
.grid2,
.badgegrid,
.teamgrid{
  gap: var(--box-gap) !important;
  align-items: stretch !important;           /* for flex */
  justify-items: stretch !important;         /* for grid */
}

/* If container is grid, ensure rows take the height of the tallest item (and items stretch) */
.split,
.online-split,
.grid2,
.badgegrid,
.teamgrid{
  grid-auto-rows: 1fr !important;
}

/* Make any direct children stretch to full row height */
.split > *,
.online-split > *,
.grid2 > *,
.badgegrid > *,
.teamgrid > *{
  align-self: stretch !important;
  height: 100% !important;
}

/* Ensure cards behave predictably inside equal-height columns */
.grid2 > article.card,
.grid2 > .card,
.badgegrid > .card,
.teamgrid > .card,
.split > .card,
.split > article.card,
.online-split > .card,
.online-split > article.card{
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}

/* Remove any accidental top margins that can shift cards */
.grid2 > *,
.badgegrid > *,
.teamgrid > *,
.split > *,
.online-split > *{
  margin-top: 0 !important;
}

/* Responsive: stack where already defined by the site; keep gaps consistent */
@media (max-width: 900px){
  .split,
  .online-split,
  .grid2{
    grid-template-columns: 1fr !important;
  }
}


/* === v26: Increase vertical spacing for main service boxes === */
:root{
  --box-gap: 24px;
}

/* Ensure grid2 has proper vertical and horizontal spacing */
.grid2{
  row-gap: var(--box-gap) !important;
  column-gap: var(--box-gap) !important;
  gap: var(--box-gap) !important;
  margin-top: var(--box-gap);
}


/* v27: badges size to content */
.badge{width:fit-content; max-width:100%}


/* === v28: Service title boxes width = word length === */
.grid2 .card h3{
  display:inline-block;
  width:fit-content;
  padding:10px 18px;
}

/* Ensure service cards remain equal height but headings don't stretch */
.grid2 > .card{
  display:flex;
  flex-direction:column;
}

/* === v28: Akut & Unterlagen wieder nebeneinander === */
.badgegrid{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--box-gap);
}

@media (max-width: 600px){
  .badgegrid{
    grid-template-columns: 1fr !important;
  }
}


/* FAQ + larger online widget on smaller screens */
.faq-grid{align-items:stretch;}
.faq-card h3{margin-top:0;}
@media (max-width: 768px){
  .online-iframe,
  .online-widget iframe{min-height:620px;}
}