@import url("fonts.css");

/* Website — "Sprechstunde".
   Palette sampled from the practice's own logo: the blue-grey of the iris ring
   (#474B55), the copper of the highlight (#9F7256 / #E4A16A) and its warm grey
   rim. Set large and calm — most patients here are past sixty. */

:root {
  --papier: #f4f2ef;
  --flaeche: #ffffff;
  --tinte: #22252a;
  --tinte-weich: #585e67;
  --marke: #474b55;
  --marke-tief: #2f333b;
  --kupfer: #8d6247;
  --kupfer-hell: #e4a16a;
  --kupfer-hauch: #f7eee5;
  --linie: #ddd8d1;
  --linie-stark: #c3bcb3;
  --alarm: #9d3123;
  --alarm-hauch: #fbeeeb;
  --tbc: #fbe4a4;
  --mass: 74rem;
  --text-mass: 40rem;
}

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

html { -webkit-text-size-adjust: 100%; font-size: 100%; }
html[data-scale="s"] { font-size: 93.75%; }
html[data-scale="l"] { font-size: 118.75%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 1.1875rem;
  line-height: 1.68;
  font-synthesis-weight: none;
}

h1, h2, h3 {
  font-family: Newsreader, Georgia, serif;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.5rem); }
h2 { font-size: clamp(1.55rem, 1.25rem + 1.3vw, 2.1rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--kupfer); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--marke-tief); }

:focus-visible {
  outline: 3px solid #16181c;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #ffd9a0;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; display: block; }

mark.tbc {
  background: var(--tbc);
  color: #4a3a04;
  padding: 0.05em 0.35em;
  border-radius: 2px;
  font-size: 0.94em;
  box-decoration-break: clone;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  position: static; display: inline-block;
  padding: 0.5rem 1rem; background: var(--marke); color: #fff;
}

/* --- header --------------------------------------------------------------- */

.siteheader {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  box-shadow: 0 1px 0 rgba(141, 98, 71, 0.18);
}
.headerbar {
  max-width: var(--mass);
  margin: 0 auto;
  padding: 0.7rem clamp(1.25rem, 3.2vw, 3rem);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.brand {
  display: flex; align-items: center; gap: 0.85rem;
  text-decoration: none; color: inherit; margin-right: auto;
}
.brand-logo { width: 2rem; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text strong {
  font-family: Newsreader, Georgia, serif;
  font-size: 1.2rem; font-weight: 600;
}
.brand-text > span { font-size: 0.82rem; color: var(--tinte-weich); }

.siteheader nav ul {
  display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; font-size: 1.02rem;
}
.siteheader nav a {
  text-decoration: none; color: var(--tinte);
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.siteheader nav a:hover { border-bottom-color: var(--linie-stark); color: var(--tinte); }
.siteheader nav a[aria-current="page"] { border-bottom-color: var(--kupfer); }

.headertools { display: flex; align-items: center; gap: 0.75rem; }

.textsize { display: flex; border: 1px solid var(--linie); border-radius: 3px; overflow: hidden; }
.textsize button {
  font: inherit; font-size: 0.95rem; line-height: 1;
  background: var(--flaeche); color: var(--tinte-weich);
  border: 0; border-right: 1px solid var(--linie);
  padding: 0.45rem 0.6rem; cursor: pointer;
}
.textsize button:last-child { border-right: 0; }
.textsize button span { font-size: 0.75em; vertical-align: super; }
.textsize button:hover { background: var(--kupfer-hauch); color: var(--tinte); }
.textsize button[aria-pressed="true"] { background: var(--marke); color: #fff; }

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-weight: 600; text-decoration: none;
  padding: 0.72rem 1.35rem; border: 1px solid transparent; border-radius: 3px;
  cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--marke); color: #fff; }
.btn-primary:hover { background: var(--marke-tief); color: #fff; }
.btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: var(--flaeche); color: var(--marke-tief); border-color: var(--marke); }
.btn-secondary:hover { background: var(--kupfer-hauch); }
.btn-ghost { border-color: var(--linie-stark); color: var(--tinte); }
.btn-ghost:hover { background: var(--kupfer-hauch); }
.btn-header { border-color: var(--linie-stark); color: var(--tinte); padding: 0.5rem 1rem; font-size: 1rem; }
.btn-header:hover { background: var(--kupfer-hauch); }
.btn-emergency { background: var(--alarm); color: #fff; font-size: 1.2rem; }
.btn-emergency:hover { background: #7d2419; color: #fff; }

/* --- hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  overflow: hidden;
}
.hero-inner {
  max-width: var(--mass);
  margin: 0 auto;
  padding: clamp(2.6rem, 1.5rem + 5vw, 5rem) clamp(1.25rem, 3.2vw, 3rem);
  position: relative;
  z-index: 1;
}
.hero-inner > * { max-width: 34rem; }
.lead {
  font-size: clamp(1.18rem, 1.05rem + 0.5vw, 1.42rem);
  color: var(--tinte-weich);
  margin-top: 1.15rem;
}
.crumb { font-size: 0.95rem; color: var(--tinte-weich); margin-bottom: 0.9rem; }
.crumb a { color: var(--kupfer); }
.hero-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 2rem; }

/* hero with an image: text left, picture right, joined by a copper rule */
.hero-mit-bild {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  max-width: none;
}
.hero-mit-bild .hero-inner {
  max-width: calc(var(--mass) / 2 + 6rem);
  margin-left: auto;
  margin-right: 0;
  padding-right: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.hero-mit-bild .hero-bild { position: relative; border-left: 3px solid var(--kupfer); }
.hero-mit-bild .hero-bild img { width: 100%; height: 100%; object-fit: cover; }

/* the Amsler grid — the practice's own self-test, used as a quiet motif */
.hero-grid {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(50%, 32rem);
  background-image:
    linear-gradient(#b9b1a7 1px, transparent 1px),
    linear-gradient(90deg, #b9b1a7 1px, transparent 1px);
  background-size: 2.6rem 2.6rem;
  background-position: center;
  opacity: 0.7;
  mask-image: radial-gradient(circle at 58% 50%, #000 32%, transparent 74%);
}
.hero-grid::after {
  content: "";
  position: absolute; top: 50%; left: 58%;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--kupfer); transform: translate(-50%, -50%);
}

/* --- block rhythm --------------------------------------------------------- */

.block {
  max-width: var(--mass);
  margin: 0 auto;
  padding: clamp(2.4rem, 1.5rem + 2.6vw, 3.8rem) clamp(1.25rem, 3.2vw, 3rem);
  border-bottom: 1px solid var(--linie);
}
.block:last-child { border-bottom: none; }
.block > h2 { margin-bottom: 1.4rem; }

.prose p, .prose h2 { max-width: var(--text-mass); }
.note { font-size: 0.95rem; color: var(--tinte-weich); margin-top: 1rem; }

.cardlink {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  color: var(--kupfer);
  margin-top: 0.9rem;
}
.cardlink:hover { text-decoration: underline; }

/* --- the three paths ------------------------------------------------------ */

.wege { background: var(--flaeche); max-width: none; border-top: 3px solid var(--kupfer);
        border-bottom: 1px solid var(--linie); }
.wege-title {
  font-family: "Source Sans 3", sans-serif;
  font-size: 1rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--kupfer); margin-bottom: 1.2rem;
}
.wegegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 1rem; }
.weg {
  position: relative; display: block; background: var(--flaeche);
  color: var(--tinte); text-decoration: none;
  padding: 1.5rem 1.5rem 3rem; border: 1px solid var(--linie);
}
.weg:hover { border-color: var(--kupfer); color: var(--tinte); }
.weg h3 { margin-bottom: 0.4rem; }
.weg p { margin: 0; color: var(--tinte-weich); font-size: 1.02rem; }
.weg-arrow { position: absolute; right: 1.3rem; bottom: 1.2rem; color: var(--kupfer); font-size: 1.4rem; }

/* --- facts ---------------------------------------------------------------- */

.factlist { margin: 0; }
.fact {
  display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr; gap: 1.5rem;
  padding: 0.85rem 0; border-top: 1px solid var(--linie);
}
.fact:last-child { border-bottom: 1px solid var(--linie); }
.fact dt { font-weight: 600; color: var(--tinte-weich); }
.fact dd { margin: 0; }

/* --- cards ---------------------------------------------------------------- */

.cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1.25rem; }
.card {
  background: var(--flaeche); border: 1px solid var(--linie);
  display: flex; flex-direction: column; overflow: hidden;
}
.cardmedia { aspect-ratio: 4 / 3; overflow: hidden; background: var(--papier); }
.cardmedia img { width: 100%; height: 100%; object-fit: cover; }
.cardbody { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.card h3 { margin-bottom: 0.5rem; }
.card p { flex: 1; margin: 0; color: var(--tinte-weich); }

/* --- definition list ------------------------------------------------------ */

.deflist-rows { display: grid; gap: 1.5rem; }
.deflist-row { display: grid; grid-template-columns: minmax(12rem, 19rem) 1fr; gap: 1.5rem; align-items: start; }
.deflist-row h3 { color: var(--marke-tief); }
.deflist-row p { margin: 0; color: var(--tinte-weich); }

/* --- steps ---------------------------------------------------------------- */

.schrittliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; counter-reset: s; }
.schritt { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.schritt-nr {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--marke); color: #fff;
  display: grid; place-items: center;
  font-family: Newsreader, serif; font-size: 1.25rem;
}
.schritt h3 { margin-bottom: 0.25rem; }
.schritt p { margin: 0; color: var(--tinte-weich); max-width: var(--text-mass); }

/* --- checklist ------------------------------------------------------------ */

.checkliste-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; max-width: var(--text-mass); }
.checkliste-items li { position: relative; padding-left: 2rem; }
.checkliste-items li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 0.75rem; height: 0.42rem;
  border-left: 2px solid var(--kupfer); border-bottom: 2px solid var(--kupfer);
  transform: rotate(-45deg);
}

/* --- devices -------------------------------------------------------------- */

.geraeteliste { display: grid; gap: 0; }
.geraet {
  display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 2rem;
  padding: 1.6rem 0; border-top: 1px solid var(--linie); align-items: start;
}
.geraet:last-child { border-bottom: 1px solid var(--linie); }
.geraet > div:only-child { grid-column: 1 / -1; }
.geraetbild { background: var(--flaeche); border: 1px solid var(--linie); }
.geraetbild img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.geraet h3 { margin-bottom: 0.35rem; }
.geraet p { margin: 0; color: var(--tinte-weich); max-width: var(--text-mass); }

/* --- image + text --------------------------------------------------------- */

.bildtext {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center;
}
.bildtext-links .bildtext-bild { order: -1; }
.bildtext-rechts .bildtext-bild { order: 1; }
.bildtext-bild img { width: 100%; border: 1px solid var(--linie); }
.bildtext-text p { max-width: var(--text-mass); }
.bildtext-text h2 { margin-bottom: 1rem; }

/* --- gallery, video, downloads ------------------------------------------- */

.gallerygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem; }
.gallerygrid figure { margin: 0; }
.gallerygrid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--linie); }
.gallerygrid figcaption { font-size: 0.95rem; color: var(--tinte-weich); margin-top: 0.5rem; }

.videoblock video { width: 100%; max-width: 46rem; border: 1px solid var(--linie); background: #000; }
.videotext { max-width: var(--text-mass); margin-bottom: 1.2rem; }

.dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; max-width: 40rem; }
.dl-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  background: var(--flaeche); border: 1px solid var(--linie);
  padding: 0.9rem 1.1rem; text-decoration: none; color: var(--tinte); font-weight: 600;
}
.dl-list a:hover { border-color: var(--kupfer); background: var(--kupfer-hauch); }
.dl-meta { font-weight: 400; font-size: 0.9rem; color: var(--tinte-weich); white-space: nowrap; }

/* --- faq ------------------------------------------------------------------ */

.faqnav { max-width: var(--mass); margin: 0 auto; padding: 1.6rem clamp(1.25rem, 3.2vw, 3rem) 0; }
.faqnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.faqnav a {
  display: inline-block; padding: 0.4rem 0.85rem;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 999px; text-decoration: none; color: var(--tinte); font-size: 1rem;
}
.faqnav a:hover { border-color: var(--kupfer); background: var(--kupfer-hauch); }

.faq-item { border-top: 1px solid var(--linie); }
.faq-item:last-of-type { border-bottom: 1px solid var(--linie); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2.5rem 1.05rem 0; position: relative;
  font-family: Newsreader, Georgia, serif; font-size: 1.26rem; font-weight: 600;
  color: var(--marke-tief);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; font-weight: 400; color: var(--kupfer);
}
.faq-item[open] summary::after { content: "–"; }
.faq-answer { padding-bottom: 1.3rem; max-width: var(--text-mass); }
.faqgruppe { padding-top: 2rem; border-bottom: none; scroll-margin-top: 6rem; }
.faqgruppe > h2 { margin-bottom: 0.8rem; }

/* --- warnings and emergency ---------------------------------------------- */

.warn { background: var(--alarm-hauch); max-width: none; border-bottom: none; }
.warn h2 { color: var(--alarm); }
.warnlist { margin: 0; padding-left: 1.3rem; max-width: var(--text-mass); }
.warnlist li { margin-bottom: 0.5rem; }
.warn-foot { margin-top: 1.2rem; font-weight: 600; max-width: var(--text-mass); }

.notfall { background: var(--marke-tief); color: #e6e2db; max-width: none; border-bottom: none; }
.notfall-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2rem; align-items: center;
}
.notfall h2 { color: #fff; margin-bottom: 0.7rem; }
.notfall p { max-width: var(--text-mass); margin: 0; }

/* --- people --------------------------------------------------------------- */

.person { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.portraitbox img { width: 100%; border: 1px solid var(--linie); }
.person .rolle { color: var(--kupfer); font-weight: 600; margin-top: 0.3rem; }

.teamgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: 1.25rem; }
.teamcard { margin: 0; }
.teamcard img { width: 100%; aspect-ratio: 17 / 20; object-fit: cover; border: 1px solid var(--linie); }
.teamcard figcaption { padding-top: 0.7rem; display: flex; flex-direction: column; }
.teamcard span { font-size: 0.95rem; color: var(--tinte-weich); }

/* --- appointment ---------------------------------------------------------- */

.termin { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: 1.25rem; }
.termincard {
  background: var(--flaeche); border: 1px solid var(--linie); padding: 1.75rem;
  display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
}
.termincard-primary { border-top: 3px solid var(--kupfer); }
.assist-demo {
  background: var(--kupfer-hauch); border-left: 3px solid var(--kupfer);
  padding: 0.8rem 1rem; font-style: italic; width: 100%; margin: 0;
}
.assist-demo .dot {
  display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--kupfer); margin-right: 0.45rem;
}

.linkbox {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center;
  background: var(--flaeche); max-width: none;
}
.linkbox > div { max-width: var(--text-mass); }
.linkbox h2 { margin-bottom: 0.6rem; }

.prose.highlight { background: var(--flaeche); max-width: none; }

.amsler { display: flex; justify-content: center; }
.amslergrid { width: min(100%, 26rem); border: 1px solid var(--linie); background: #fff; }

/* --- cta ------------------------------------------------------------------ */

.cta {
  background: var(--marke); color: #fff; max-width: none; border-bottom: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center;
}
.cta > div:first-child { max-width: var(--text-mass); }
.cta h2 { color: #fff; margin-bottom: 0.5rem; }
.cta-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.cta .btn-primary { background: var(--kupfer-hell); color: #2b1c0f; }
.cta .btn-primary:hover { background: #efb27f; color: #2b1c0f; }
.cta .btn-ghost { border-color: rgba(255,255,255,0.5); color: #fff; }
.cta .btn-ghost:hover { background: rgba(255,255,255,0.14); }

/* --- footer --------------------------------------------------------------- */

.sitefooter { background: var(--flaeche); border-top: 3px solid var(--kupfer); font-size: 1.02rem; }
.footergrid {
  max-width: var(--mass); margin: 0 auto; padding: 3rem clamp(1.25rem, 3.2vw, 3rem) 2rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 2rem;
}
.footer-logo { width: 1.8rem; margin-bottom: 0.8rem; }
.sitefooter h2 {
  font-size: 1.05rem; font-family: "Source Sans 3", sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte-weich);
  margin-bottom: 0.9rem;
}
.sitefooter address { font-style: normal; }
.kassen { font-weight: 600; color: var(--marke-tief); }
.footernav { list-style: none; margin: 0; padding: 0; }
.footernav li { margin-bottom: 0.35rem; }
.footerbase {
  max-width: var(--mass); margin: 0 auto; padding: 1.2rem clamp(1.25rem, 3.2vw, 3rem) 2.5rem;
  border-top: 1px solid var(--linie); display: flex; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; font-size: 0.95rem; color: var(--tinte-weich);
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 62rem) {
  .headerbar { gap: 0.8rem; }
  .siteheader nav { order: 3; width: 100%; }
  .siteheader nav ul { gap: 1.1rem; flex-wrap: wrap; font-size: 1rem; }
  .hero-mit-bild { grid-template-columns: minmax(0, 1fr); }
  .hero-mit-bild .hero-inner { max-width: var(--mass); margin-inline: auto; padding-right: 1.5rem; }
  .hero-mit-bild .hero-bild { border-left: 0; border-top: 3px solid var(--kupfer); }
  .hero-mit-bild .hero-bild img { max-height: 24rem; }
  .hero-grid { display: none; }
  .bildtext { grid-template-columns: minmax(0, 1fr); }
  .bildtext-rechts .bildtext-bild, .bildtext-links .bildtext-bild { order: -1; }
  .person { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .portraitbox { max-width: 16rem; }
  .geraet { grid-template-columns: 10rem minmax(0, 1fr); gap: 1.2rem; }
  .deflist-row, .fact { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .notfall-inner, .cta, .linkbox { grid-template-columns: minmax(0, 1fr); }
  .cta-actions, .notfall .btn-emergency { justify-self: start; }
}

@media (max-width: 34rem) {
  .geraet { grid-template-columns: minmax(0, 1fr); }
  .geraetbild { max-width: 14rem; }
  .headertools { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .siteheader, .cta, .notfall, .hero-grid { display: none; }
}


/* --- design-review pass ---------------------------------------------------- */

/* Touch targets: the text-size control was 30px high — under the 44px floor,
   and this is the one control the oldest visitors reach for first. */
.textsize button { min-width: 2.9rem; min-height: 2.9rem; }

/* Visited links stay distinguishable — patients often return to one answer. */
main a:visited:not(.btn):not(.weg):not(.pickbtn) { color: #6f5340; }

/* The three paths are not a symmetric feature grid: the acute one is the
   emergency, and it looks like it. */
.weg-akut { border-color: var(--alarm); box-shadow: inset 0 3px 0 var(--alarm); }
.weg-akut h3 { color: var(--alarm); }

/* Motion, sparingly: the headline settles in once. Anything more would fight
   the audience. */
@media (prefers-reduced-motion: no-preference) {
  .hero-inner > h1, .hero-inner > .lead, .hero-inner > .hero-actions {
    animation: heroein 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .hero-inner > .lead { animation-delay: 0.06s; }
  .hero-inner > .hero-actions { animation-delay: 0.12s; }
  @keyframes heroein { from { opacity: 0; transform: translateY(0.6rem); } }
}


/* --- Randabstände: Maßrahmen und lange Wörter ------------------------------ */

/* German compounds ("Netzhauterkrankungen") set a min-content width that blows
   up a grid column past the viewport; overflow:hidden then hides the damage and
   the text ends up 7px from the edge. minmax(0,…) plus hyphenation fixes it at
   the source. */
.hero-mit-bild, .bildtext, .person, .geraet, .schritt, .fact, .deflist-row,
.notfall-inner, .cta, .linkbox, .termin, .cardgrid, .wegegrid, .teamgrid,
.gallerygrid, .geraeteliste, .factlist, .footergrid {
  min-width: 0;
}
.hero-inner, .bildtext-text, .cardbody, .faq-answer, .weg, .termincard { min-width: 0; }
h1, h2, h3, summary, dt, .brand-text strong { hyphens: auto; }
h1, h2, h3, .lead, p, dt, dd, li, summary, figcaption, address {
  overflow-wrap: break-word;
}
/* Never hyphenate the phone number or short labels into nonsense */
.btn, .brand-text, .dl-meta, .schritt-nr { hyphens: manual; }

/* Full-bleed colour bands whose content still respects the measure.
   The padding does the centring, so no child's `margin: 0` can pull text back
   to the viewport edge (that bug had the fact lists starting 66px left of their
   own headings). No clip-path either, so focus rings are never cut off. */
.band {
  max-width: none;
  padding-inline: max(clamp(1.25rem, 3.2vw, 3rem), (100% - var(--mass)) / 2);
}

.wege, .warn, .notfall, .cta, .linkbox, .prose.highlight, .facts, .checkliste, .person {
  max-width: none;
  padding-inline: max(clamp(1.25rem, 3.2vw, 3rem), (100% - var(--mass)) / 2);
}

/* The header wraps to three rows on a phone; sticky then covers 43% of the
   screen and buries every anchor target. Static below that, and the document
   reserves the header height for jumps. */
html { scroll-padding-top: 7.5rem; }
@media (max-width: 54rem), (max-height: 44rem) {
  .siteheader { position: static; }
  html { scroll-padding-top: 1rem; }
}

/* Fund 13: navigation links were 35px tall for an audience that is mostly over
   sixty. */
.siteheader nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* Fund 5: the rounded frame clipped the focus ring of the outer size buttons. */
.textsize { overflow: visible; }
.textsize button:first-child { border-radius: 3px 0 0 3px; }
.textsize button:last-child { border-radius: 0 3px 3px 0; }

/* Navigation: a disclosure menu on phones, the full row from tablet up. The
   summary is hidden on wide screens and the list forced open there, so the
   markup carries no JavaScript and still works with a keyboard. */
.menu > summary {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 2.75rem; padding: 0 0.9rem;
  border: 1px solid currentColor; border-radius: 3px;
  font-weight: 600; cursor: pointer; list-style: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu-strich, .menu-strich::before, .menu-strich::after {
  display: block; width: 1.1rem; height: 2px; background: currentColor; content: "";
}
.menu-strich { position: relative; }
.menu-strich::before { position: absolute; top: -6px; }
.menu-strich::after { position: absolute; top: 6px; }
.menu[open] > summary { border-color: var(--kupfer); }

@media (max-width: 54rem) {
  .siteheader nav { order: 3; width: 100%; }
  .menu:not([open]) > ul { display: none; }
  .menu > ul { flex-direction: column; gap: 0; padding-top: 0.5rem; }
  .menu > ul li { border-top: 1px solid currentColor; }
  .menu > ul a { width: 100%; }
}
@media (min-width: 54.0625rem) {
  .menu > summary { display: none; }
  .menu > ul { display: flex !important; }
}

/* Header on small screens: logo on its own line, then one row with menu,
   text size and call. Three stacked rows ate 216px of a 568px screen. */
.tel-kurz { display: none; }
@media (max-width: 54rem) {
  .siteheader nav { order: 2; width: auto; }
  .headertools { order: 3; margin-left: auto; }
  .brand { width: 100%; }
}
@media (max-width: 26rem) {
  .tel-lang { display: none; }
  .tel-kurz { display: inline; }
  .headerbar { gap: 0.5rem; }
  .brand-logo { width: 1.7rem; }
  .brand-text strong { font-size: 1.05rem; }
  .brand-text > span { font-size: 0.75rem; }
  .btn-header, .menu > summary { padding-inline: 0.7rem; }
}

/* The nav row only wrapped below 62rem. Between that and the desktop layout —
   and at the large text setting, where rem in a media query still means 16px
   but the links are set in 19px — the last items ran off the right edge. */
.siteheader nav ul { flex-wrap: wrap; }

/* The download list is a grid, so the non-wrapping "PDF, 898 kB" set the column's
   min-content width and pushed the row past its container on a 320px screen. */
.dl-list { grid-template-columns: minmax(0, 1fr); }
.dl-list a { flex-wrap: wrap; min-width: 0; }
.dl-meta { white-space: nowrap; }
@media (max-width: 26rem) {
  .dl-list a { gap: 0.2rem; }
  .dl-meta { white-space: normal; }
}


/* Hover colors follow the background of each section. Dark bands use white
   so links remain readable on hover. */

:root { --link-hover: var(--marke-tief); }
a:hover { color: var(--link-hover); }
/* Only dark bands use white. The header, the footer and
   the paths band are white here — giving them a white hover colour is what put
   white on white. */
.notfall, .cta { --link-hover: #ffffff; }

/* Underline instead of a colour flip wherever colour alone would be risky */
a:hover { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.btn:hover, .weg:hover, .thema:hover, .symptom-link:hover,
.faqnav a:hover, .dl-list a:hover { text-decoration: none; }

/* ===========================================================================
   Symptom-Einstieg: was der Patient bemerkt, nicht wie es medizinisch heißt
   ======================================================================== */

.symptomliste { display: grid; gap: 0.9rem; }
.symptom {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: 1.4rem 1.5rem;
  display: grid;
  gap: 0.5rem;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.symptom:hover { border-color: var(--kupfer); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(30, 28, 24, 0.09); }
.symptom h3 { margin: 0; max-width: 48rem; }
.symptom p { margin: 0; color: var(--tinte-weich); max-width: 52rem; }
.symptom-dringlich {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.symptom-punkt { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: currentColor; }
.symptom-normal .symptom-dringlich { color: var(--tinte-weich); }
.symptom-eilig .symptom-dringlich { color: var(--kupfer); }
.symptom-eilig { border-left: 4px solid var(--kupfer); }
.symptom-sofort .symptom-dringlich { color: var(--alarm); }
.symptom-sofort { border-left: 4px solid var(--alarm); }
.symptom-ziele { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }
.symptom-link {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0.25rem 0.95rem; border: 1px solid var(--linie); border-radius: 999px;
  font-size: 0.98rem; font-weight: 600; text-decoration: none; color: var(--tinte);
}
.symptom-link:hover { border-color: var(--kupfer); background: var(--kupfer-hauch); color: var(--tinte); }

/* ===========================================================================
   Themenkarten (Erkrankungen nach Ort im Auge)
   ======================================================================== */

.themengrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 0.9rem; }
.thema {
  display: block; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 3px;
  padding: 1.3rem 1.4rem; text-decoration: none; color: var(--tinte);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.thema:hover { border-color: var(--kupfer); color: var(--tinte); transform: translateY(-2px);
               box-shadow: 0 8px 22px rgba(30, 28, 24, 0.09); }
.thema h3 { margin-bottom: 0.35rem; }
.thema p { margin: 0; color: var(--tinte-weich); font-size: 1.02rem; }

/* ===========================================================================
   Bewegung — zurückhaltend, aber nicht starr
   Alles hinter @supports und prefers-reduced-motion: wo der Browser es nicht
   kann oder der Nutzer es abbestellt hat, steht die Seite einfach da.
   ======================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* sanfter Seitenwechsel ohne Weiß-Blitz (Chrome/Edge) */
  @view-transition { navigation: auto; }

  /* Bilder atmen beim Überfahren */
  .cardmedia, .gallerygrid figure, .bildtext-bild, .teamcard { overflow: hidden; }
  .cardmedia img, .gallerygrid img, .bildtext-bild img, .teamcard img {
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .card:hover .cardmedia img, .gallerygrid figure:hover img,
  .bildtext:hover .bildtext-bild img, .teamcard:hover img { transform: scale(1.035); }

  /* Abschnitte blenden beim Hereinscrollen auf — rein deklarativ, ohne Skript */
  @supports (animation-timeline: view()) {
    main > .block {
      animation: sanft-auf linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }
    /* das Bergpanorama zieht beim Scrollen leicht nach */
    .hero-mit-bild .hero-bild img {
      animation: nachziehen linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
  @keyframes sanft-auf { from { opacity: 0; transform: translateY(1.1rem); } }
  @keyframes nachziehen { to { transform: scale(1.06) translateY(2%); } }
}

/* Aufklappen mit Übergang, wo der Browser es unterstützt */
@media (prefers-reduced-motion: no-preference) {
  @supports selector(::details-content) {
    .faq-item::details-content {
      block-size: 0; overflow: hidden;
      transition: block-size 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), content-visibility 0.32s allow-discrete;
    }
    .faq-item[open]::details-content { block-size: auto; }
  }
}

/* nav is a flex item in the header bar and was shrinking to min-content; with
   flex-wrap on the list every link then took its own line (442px tall at
   1400px). Let it claim the free space instead. */
.siteheader nav { flex: 1 1 auto; min-width: 0; }
@media (max-width: 54rem) { .siteheader nav { flex: 0 0 auto; } }

/* Acute complaints as a marked action next to the phone number. Filled, not
   outlined: outlined red measured 2.05:1 on the dark header. */
.btn-notfall {
  background: var(--alarm); border-color: var(--alarm); color: #ffffff;
  padding: 0.5rem 0.9rem; font-size: 1rem; min-height: 2.75rem;
}
.btn-notfall:hover { background: #7d2419; border-color: #7d2419; color: #ffffff; }
.siteheader .btn-notfall { border-width: 2px; }
@media (max-width: 26rem) { .btn-notfall { padding-inline: 0.6rem; } }

/* The menu is open by default (works without JavaScript); on wide screens the
   summary disappears and the list is a row. */
.menu[open] > ul { display: flex; }

/* ===========================================================================
   Kopfzeile in zwei Ebenen
   Logo, Notfall, Schriftgröße und Telefon in einer Reihe; die Navigation
   darunter mit eigener Linie. Alles in eine Zeile zu pressen ergab entweder
   einen 147px hohen Kopf oder eine Navigation, die aus ihm herausragte.
   ======================================================================== */

.headerbar { row-gap: 0; }
.siteheader nav { flex: 0 0 100%; order: 5; width: 100%; min-width: 0; }
.menu[open] > ul { border-top: 1px solid var(--linie); padding-top: 0.35rem; margin-top: 0.35rem; }
.siteheader nav ul { gap: 0.35rem 1.6rem; }
.siteheader nav a { padding-inline: 0.15rem; }
.brand { margin-right: auto; width: auto; }
.headertools { order: 4; gap: 0.5rem; margin-left: 0; }

@media (max-width: 54rem) {
  .siteheader nav { order: 5; }
  .menu[open] > ul { border-top: 1px solid var(--linie); }
  .textsize { order: 6; justify-content: flex-start; }
}
@media (max-width: 26rem) {
  .headertools { flex-wrap: wrap; }
  .siteheader nav ul { gap: 0; }
}

/* The size switch takes a full row below 54rem, so its container has to be
   allowed to wrap there — otherwise it pushes the call button off the screen. */
@media (max-width: 54rem) {
  .headertools { flex-wrap: wrap; row-gap: 0.4rem; }
  .textsize { margin-top: 0; }
  .textsize button { min-width: 2.75rem; padding-inline: 0.4rem; }
}

/* The FAQ topic chips were 41px — just under the touch floor. */
.faqnav a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Footer links are real targets too — phone, mail, route and the page list. */
.footernav a, .sitefooter p a, .footerbase a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
}
.skip:focus { min-height: 2.75rem; align-items: center; }

/* Only on small phones does the size switch need a row of its own. */
@media (max-width: 34rem) {
  .textsize { flex: 0 0 100%; margin-top: 0.35rem; }
}