/* MKG Dr. Jörg Knop, Hildesheim. Stylesheet der neuen Website, Fassung vom 21.10.2026.
   Farben aus dem Praxislogo (Weinrot, Grau), Fotos der Praxis hell und kühl.
   Schriften liegen auf dem eigenen Server (fonts/), es gehen keine Anfragen an Dritte.
   Newsreader für Überschriften (Wahl der Eltern am 21.10.2026, Variante C im Schriftvergleich),
   Source Sans 3 für den Text: ruhig, gut lesbar, klare Ziffern für Telefonnummern und Zeiten. */

@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}

:root {
  --rot: #740c40;          /* Logo */
  --rot-tief: #4f0a2c;
  --rot-hauch: #f7eef2;
  --tinte: #222222;
  --grau-700: #4d4d50;
  --grau-500: #6b6b6f;
  --grau-300: #d4d4d7;
  --grau-100: #f3f3f4;
  --weiss: #ffffff;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --breite: 1180px;
  --radius: 4px;
  --kopf: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 16px); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.6;
  color: var(--tinte);
  background: var(--weiss);
  font-feature-settings: "kern";
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rot); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 560; line-height: 1.15; margin: 0 0 .5em; color: var(--tinte); letter-spacing: -0.005em; }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); font-weight: 560; line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); }
h3 { font-size: 1.2rem; margin-top: 1.5em; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .3em; }
strong { font-weight: 700; }
.wrap { max-width: var(--breite); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.skip { position: absolute; left: -999px; top: 0; background: var(--rot); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Kopf ---------- */
.topbar { background: var(--grau-100); font-size: .9rem; color: var(--grau-700); }
.topbar .wrap { display: flex; justify-content: space-between; gap: 16px; padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
.topbar a { color: var(--grau-700); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.header { border-bottom: 1px solid var(--grau-300); background: rgba(255,255,255,.97); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--kopf); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--tinte); text-decoration: none; }
.brand img.emblem { width: 52px; height: 52px; }
.brand .brand-text { display: block; line-height: 1.15; }
.brand .brand-text strong { display: block; font-family: var(--serif); font-weight: 600; color: var(--rot); font-size: 1.12rem; }
.brand .brand-text span { font-size: .82rem; color: var(--grau-500); }

.nav-toggle { display: none; background: none; border: 1px solid var(--grau-300); border-radius: var(--radius); padding: 8px 10px; font: inherit; color: var(--tinte); cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--tinte); margin: 4px 0; }
.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; align-items: center; }
.nav > ul > li { position: relative; margin: 0; }
.nav a { display: block; white-space: nowrap; padding: 10px 12px; color: var(--tinte); text-decoration: none; border-radius: var(--radius); font-size: .98rem; }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { background: var(--grau-100); color: var(--rot); }
.nav .sub { list-style: none; margin: 0; padding: 6px; position: absolute; left: 0; top: 100%; background: #fff; border: 1px solid var(--grau-300); border-radius: var(--radius); min-width: 300px; display: none; box-shadow: 0 10px 28px rgba(34,34,34,.10); }
.nav .sub li { margin: 0; }
.nav li:hover > .sub, .nav li:focus-within > .sub { display: block; }
.nav .cta a { background: var(--rot); color: #fff; margin-left: 10px; font-weight: 600; }
.nav .cta a:hover, .nav .cta a:focus-visible { background: var(--rot-tief); color: #fff; }

/* ---------- Knöpfe ---------- */
.button, .button-quiet { display: inline-block; padding: 13px 22px; border-radius: var(--radius); font-weight: 600; text-decoration: none; line-height: 1.2; }
.button { background: var(--rot); color: #fff; border: 2px solid var(--rot); }
.button:hover, .button:focus-visible { background: var(--rot-tief); border-color: var(--rot-tief); color: #fff; }
.button-quiet { color: var(--rot); border: 2px solid var(--grau-300); background: #fff; }
.button-quiet:hover, .button-quiet:focus-visible { border-color: var(--rot); }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.buttons .textlink { align-self: center; font-weight: 600; padding: 6px 4px; }

/* ---------- Startseite: Bühne wie in Version 6 (Flur, Text darüber), Fotos blenden langsam ineinander ---------- */
.hero { position: relative; background: #262626; color: #fff; overflow: hidden; }
.hero-bilder { position: relative; height: min(62vh, 560px); }
.hero-bilder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2.4s ease-in-out; }
.hero-bilder img.aktiv { opacity: .82; }
.hero .box { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(20,20,20,.88) 0%, rgba(20,20,20,.62) 60%, rgba(20,20,20,0) 100%); padding: 64px 0 28px; }
.hero .kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: #f1d4d9; margin-bottom: .4em; }
.hero h1 { color: #fff; font-family: var(--serif); font-weight: 520; font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.1rem); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: .3em; }
.hero p { font-size: 1.12rem; max-width: 660px; margin-bottom: 1.2em; }
.hero .buttons { margin-top: 0; }
.button-light { display: inline-block; padding: 13px 22px; border-radius: var(--radius); font-weight: 600; text-decoration: none; line-height: 1.2; background: transparent; color: #fff; border: 2px solid #fff; }
.button-light:hover, .button-light:focus-visible { background: #fff; color: var(--tinte); }

/* ---------- Abschnitte ---------- */
.section { padding: clamp(56px, 7vw, 96px) 0; }
.section.alt { background: var(--grau-100); }
.section-head { max-width: 720px; margin-bottom: 36px; }
.section-head p { color: var(--grau-700); font-size: 1.08rem; margin: 0; }
.section-head.row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; }
.section-head.row > div { max-width: 640px; }

/* Behandlungsspektrum als Verzeichnis */
.index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; border-bottom: 1px solid var(--grau-300); }
.index a { display: block; padding: 24px 0 26px; border-top: 1px solid var(--grau-300); color: inherit; text-decoration: none; }
.index h3 { font-size: 1.42rem; margin: 0 0 .3em; color: var(--tinte); }
.index p { margin: 0; color: var(--grau-700); max-width: 52ch; }
.index .weiter { display: inline-block; margin-top: 10px; color: var(--rot); font-weight: 600; font-size: .95rem; }
.index a:hover h3, .index a:focus-visible h3 { color: var(--rot); }
.index a:hover .weiter { text-decoration: underline; }

/* Dunkles Band mit dem DVT-Bild: der schwarze Grund der 3D-Ansicht geht in das Band über */
.band-dark { background: #000; color: #dcdcde; }
.band-dark .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.band-dark h2 { color: #fff; }
.band-dark p { max-width: 52ch; }
.band-dark a { color: #fff; }
.band-dark figure { margin: 0; }
.band-dark figcaption { font-size: .88rem; color: #9b9b9f; margin-top: 4px; text-align: right; }

/* Bild und Text nebeneinander */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split figure { margin: 0; }
.split img { width: 100%; border-radius: var(--radius); }
.split.portrait { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.split.portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
blockquote { margin: 1.4em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--rot); font-family: var(--serif); font-size: 1.28rem; line-height: 1.45; color: var(--tinte); }
blockquote footer { font-family: var(--sans); font-size: .95rem; color: var(--grau-500); margin-top: .6em; }
.two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); }
.list-cols { columns: 2; column-gap: 40px; margin: 0; padding-left: 1.2em; }
.list-cols li { break-inside: avoid; margin-bottom: .45em; }

/* Bildstreifen zum Rundgang */
.strip { display: flex; gap: 12px; }
.strip a { display: block; flex: var(--r) 1 0; min-width: 0; text-decoration: none; color: var(--grau-700); }
.strip img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; border-radius: var(--radius); }
.strip span { display: block; font-size: .92rem; margin-top: 8px; }
.strip a:hover span { color: var(--rot); text-decoration: underline; }

/* Häufige Fragen zum Aufklappen */
.faq { max-width: 860px; border-bottom: 1px solid var(--grau-300); }
.faq details { border-top: 1px solid var(--grau-300); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 48px 20px 0; font-family: var(--serif); font-size: 1.22rem; font-weight: 540; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot); transform: translateY(-75%) rotate(45deg); transition: transform .2s ease; }
.faq details[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq summary:hover { color: var(--rot); }
.faq .antwort { padding: 0 0 22px; color: var(--grau-700); max-width: 66ch; }
.faq .antwort p:last-child { margin-bottom: 0; }

.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.contact-grid h3 { margin-top: 0; }
.hours { border-collapse: collapse; width: 100%; max-width: 520px; }
.hours th, .hours td { text-align: left; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--grau-300); font-weight: 400; vertical-align: top; }
.hours th { color: var(--grau-700); width: 7.5em; }
.notice { background: #fff8e6; border: 1px solid #f0d58c; border-radius: var(--radius); padding: 10px 14px; font-size: .95rem; color: #6b5300; }

/* ---------- Unterseiten ---------- */
.page-head { background: var(--grau-100); padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--grau-300); }
.page-head h1 { max-width: 22ch; }
.page-head p.intro { font-size: 1.15rem; color: var(--grau-700); max-width: 720px; margin: 0; }
.page-head-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.page-head-text { min-width: 0; }
.page-head-logo { flex: none; width: clamp(114px, 14.3vw, 192px); height: auto; }
@media (max-width: 720px) { .page-head-inner { align-items: flex-start; gap: 16px; } .page-head-logo { width: 83px; } }
.page { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; padding-top: 48px; padding-bottom: 72px; }
.subnav { position: sticky; top: calc(var(--kopf) + 24px); align-self: start; }
.subnav h2 { font-family: var(--sans); font-size: .9rem; font-weight: 600; color: var(--grau-500); margin-bottom: .6em; letter-spacing: 0; }
.subnav ul { list-style: none; margin: 0; padding: 0; }
.subnav li { margin: 0; }
.subnav a { display: block; padding: 6px 0 6px 12px; color: var(--grau-700); border-left: 2px solid var(--grau-300); text-decoration: none; font-size: .98rem; }
.subnav a:hover, .subnav a:focus-visible { border-left-color: var(--rot); color: var(--rot); }
.content { max-width: 720px; }
.content h2 { margin-top: 1.7em; }
.content h2:first-child { margin-top: 0; }
.content figure { margin: 1.6em 0; }
.content figure img { border-radius: var(--radius); }
.content figcaption, .shot figcaption { font-size: .9rem; color: var(--grau-500); margin-top: 8px; }
.content figure.dark { background: #000; border-radius: var(--radius); padding: 12px 12px 10px; }
.content figure.dark figcaption { color: #a3a3a7; padding: 0 4px; }
.figures { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 1.5em 0; }
.figures figure { margin: 0; }
.cta-band { background: var(--rot); color: #fff; padding: 44px 0; }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.cta-band h2 { color: #fff; margin: 0 0 .2em; }
.cta-band p { margin: 0; color: #f3dde7; }
.cta-band a.button { background: #fff; color: var(--rot); border-color: #fff; }
.cta-band a.button:hover { background: var(--rot-hauch); }

/* Ablauf als Zeitstrahl (Listen unter der Überschrift "Ablauf") */
ol.timeline { list-style: none; counter-reset: schritt; margin: 1.4em 0 1.6em; padding: 0; }
ol.timeline > li { counter-increment: schritt; position: relative; padding: 0 0 1.5em 3.4rem; margin: 0; }
ol.timeline > li::before { content: counter(schritt); position: absolute; left: 0; top: -.1em; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: #fff; border: 2px solid var(--rot); color: var(--rot); font-family: var(--serif); font-weight: 600; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; }
ol.timeline > li::after { content: ""; position: absolute; left: calc(1.15rem - 1px); top: 2.2rem; bottom: -.1em; width: 2px; background: var(--grau-300); }
ol.timeline > li:last-child { padding-bottom: 0; }
ol.timeline > li:last-child::after { display: none; }
ol.timeline strong { color: var(--tinte); }

/* ---------- Praxisrundgang ---------- */
.tour { padding-top: 16px; padding-bottom: 72px; }
.station { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px clamp(32px, 5vw, 64px); padding: 56px 0; border-top: 1px solid var(--grau-300); }
.station:first-child { border-top: 0; }
.station-text { align-self: start; position: sticky; top: calc(var(--kopf) + 24px); }
.station .nr { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--rot); font-weight: 450; display: block; margin-bottom: 10px; font-variant-numeric: lining-nums; }
.station h2 { margin-bottom: .5em; }
.station p { color: var(--grau-700); }
.shots { display: grid; gap: 14px; }
.shot-row { display: flex; gap: 14px; }
.shot-row.schmal { max-width: 520px; }
.shot { margin: 0; flex: var(--r) 1 0; min-width: 0; }
.shot a { display: block; border-radius: var(--radius); overflow: hidden; background: var(--grau-100); cursor: zoom-in; }
.shot img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; transition: transform .5s ease; }
.shot a:hover img { transform: scale(1.015); }

/* Großansicht */
.lightbox { border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; background: rgba(12, 12, 12, .95); color: #eee; }
.lightbox::backdrop { background: rgba(0, 0, 0, .4); }
.lightbox figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 76px 28px; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 2px; }
.lightbox figcaption { display: flex; gap: 18px; align-items: baseline; margin-top: 14px; font-size: .98rem; color: #d8d8da; }
.lightbox .lb-count { color: #9b9b9f; font-size: .9rem; }
.lightbox button { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox button:hover { background: rgba(255,255,255,.18); }
.lightbox .lb-close { top: 12px; right: 12px; }
.lightbox .lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 14px; top: 50%; transform: translateY(-50%); }

/* ---------- Fuß ---------- */
.footer { background: #1d1d1e; color: #cfcfd2; padding: 48px 0 24px; font-size: .95rem; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer h3 { color: #fff; font-size: 1.05rem; margin-top: 0; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 6px; }
.footer .legal { border-top: 1px solid #3d3d40; margin-top: 32px; padding-top: 16px; font-size: .86rem; color: #a3a3a7; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* Lageplan auf der Kontaktseite */
figure.map { margin: 20px 0 12px; }
figure.map img { display: block; width: 100%; height: auto; border: 1px solid var(--grau-300); border-radius: var(--radius); background: #f4f2ef; }
figure.map figcaption { margin-top: 6px; font-size: .8rem; color: var(--grau-500); }
figure.map figcaption a { color: inherit; }

/* Werdegang */
.vita { border-collapse: collapse; width: 100%; margin: .5em 0 1.2em; }
.vita th, .vita td { text-align: left; vertical-align: top; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--grau-300); font-weight: 400; }
.vita th { color: var(--rot); white-space: nowrap; width: 8.5em; font-weight: 600; }
.content ol li { margin-bottom: .5em; }
.doctor aside img { border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .nav a { padding: 10px 9px; font-size: .94rem; }
}
@media (max-width: 960px) {
  .index { column-gap: 40px; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .page { grid-template-columns: 1fr; gap: 28px; }
  .subnav { position: static; }
  .subnav ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .subnav a { border: 1px solid var(--grau-300); border-radius: 999px; padding: 6px 12px; font-size: .92rem; }
  .station { grid-template-columns: 1fr; }
  .station-text { position: static; max-width: 640px; }
  .band-dark .wrap { grid-template-columns: 1fr; }
}

/* ---------- Handy ---------- */
@media (max-width: 860px) {
  .topbar { display: none; }
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--grau-300); box-shadow: 0 12px 24px rgba(0,0,0,.08); max-height: calc(100vh - var(--kopf)); max-height: calc(100dvh - var(--kopf)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .nav.open { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 12px 16px; }
  .nav a { padding: 12px 10px; border-radius: 0; border-bottom: 1px solid var(--grau-100); }
  .nav .sub { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 16px; min-width: 0; }
  .nav .cta a { margin: 12px 0 0; border-radius: var(--radius); text-align: center; }
  .hero-bilder { height: 40vh; min-height: 240px; }
  .hero-bilder img.aktiv { opacity: 1; }
  .hero .box { position: static; background: #262626; padding: 24px 0 28px; }
  .hero p { font-size: 1rem; }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  .index { grid-template-columns: 1fr; }
  .contact-grid, .two-col, .split, .split.portrait, .figures, .footer .cols { grid-template-columns: 1fr; }
  .split.portrait figure { max-width: 320px; }
  .list-cols { columns: 1; }
  .strip { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-right: -20px; }
  .strip a { flex: 0 0 auto; width: calc(220px * var(--ar)); scroll-snap-align: start; }
  .shot-row { flex-direction: column; }
  .shot-row.schmal { max-width: none; }
  .station { padding: 40px 0; }
  .lightbox figure { padding: 60px 12px 20px; }
  .lightbox .lb-prev, .lightbox .lb-next { top: auto; bottom: 16px; transform: none; }
  .cta-band .wrap { display: block; }
  .cta-band a.button { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .shot img, .hero-bilder img { transition: none; } }
@media print { .header, .topbar, .nav, .cta-band, .footer .cols, .lightbox { display: none; } }