/* ============================================================
   Radiologische Allianz - Standort-Uebergangsseite
   Gestaltungsidee: helle Flaeche, klar abgesetzte Tafeln.
   Warme Markenfarbe nur dort, wo ein Mensch spricht.
   Durchgehend Figtree, keine Serifen.
   Standort-neutral: fuer alle Standorte identisch.

   LESBARKEIT (Hausregel, nicht aendern):
   Fliesstext IMMER schwarz auf hellem Grund. Keine grauen Texte.
   Rangfolge entsteht ueber Groesse und Schriftstaerke, nie ueber Farbe.
   Grundgroesse 17px, damit auch aeltere Patienten gut lesen koennen.

   SATZSPIEGEL (wichtig):
   Jeder Block traegt den Aussenabstand aussen (--pad),
   die Maxbreite sitzt immer auf dem __inner. Dadurch stehen
   Kopf, Hero, alle Sektionen und Fuss auf exakt derselben Kante.
   ============================================================ */

/* --- Schrift (lokal, DSGVO-konform) --- */
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/figtree-var.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}

/* --- Tokens --- */
:root {
  /* Flaeche: hell und freundlich, Tafeln in Weiss abgesetzt */
  --ground:      #F3F5F7;
  --ground-deep: #E9EDF1;
  --panel:       #FFFFFF;
  --ink:         #000000;   /* der einzige Textton */
  --line:        #E3E8ED;
  --line-soft:   #EDF1F4;
  --signal:      #E8453C;
  --signal-deep: #C9382F;
  --ember:       #EC764C;

  --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Satzspiegel */
  --shell:  1060px;
  --pad:    clamp(1.1rem, 4vw, 2rem);
  --rhythm: clamp(3rem, 6.5vw, 4.75rem);

  /* Bausteine: ein Radius, ein Kartenabstand, ein Rasterabstand */
  --r:        14px;
  --card-pad: 1.6rem;
  --gap:      1.25rem;

  --lift:    0 1px 2px rgba(20, 32, 45, 0.04), 0 14px 32px -16px rgba(20, 32, 45, 0.18);
  --lift-lo: 0 1px 2px rgba(20, 32, 45, 0.04), 0 8px 20px -14px rgba(20, 32, 45, 0.14);
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;   /* 17px Grundgroesse */
  line-height: 1.62;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--signal-deep); }

/* --- Barrierefreiheit --- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--signal); color: #fff;
  padding: 0.8rem 1.25rem; border-radius: 0 0 var(--r) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

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

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   Satzspiegel: Aussenabstand aussen, Maxbreite innen.
   Diese vier Zeilen halten alle Kanten deckungsgleich.
   ============================================================ */
.site-header, .hero, .section, .site-footer { padding-inline: var(--pad); }

.site-header__inner,
.hero__inner,
.section__inner,
.site-footer__inner { max-width: var(--shell); margin-inline: auto; }

/* --- Kopf --- */
.site-header { padding-block: 1.5rem; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-header__logo img { height: 38px; width: auto; }
.site-header__phone {
  display: none; align-items: center; gap: 0.5rem;
  font-size: 1.0625rem; font-weight: 600;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.site-header__phone svg { width: 18px; height: 18px; fill: var(--signal); }
.site-header__phone:hover { color: var(--signal-deep); }

/* --- Etikett --- */
.eyebrow {
  display: block;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.7rem;
}

/* ============================================================
   Hero: die Tafel, die den Standort empfaengt
   ============================================================ */
.hero { padding-block: 0.25rem var(--rhythm); }

.hero__inner {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--lift);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  animation: lightOn 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* warmes Kantenlicht von oben */
.hero__inner::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 150px;
  background: linear-gradient(180deg, rgba(236, 118, 76, 0.10), rgba(236, 118, 76, 0) 100%);
  pointer-events: none;
}

.hero__body {
  position: relative;
  padding: clamp(1.9rem, 4.6vw, 3.1rem);
  display: flex; flex-direction: column; justify-content: center;
}

.hero__badge {
  display: inline-block; align-self: flex-start;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--signal-deep);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--signal);
  margin-bottom: 1.5rem;
}

.hero__title {
  font-weight: 800;
  font-size: clamp(2rem, 3.7vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.032em;
  text-wrap: balance;
  max-width: 19ch;
  margin-bottom: 1.05rem;
}

.hero__lead {
  font-weight: 500;
  font-size: clamp(1.18rem, 1.85vw, 1.38rem);
  line-height: 1.45;
  letter-spacing: -0.012em;
  text-wrap: pretty;
  max-width: 34ch;
  margin-bottom: 0.85rem;
}

.hero__note {
  font-size: 1.0625rem;
  text-wrap: pretty;
  max-width: 44ch;
  margin-bottom: 1.9rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.hero__media { position: relative; background: var(--ground-deep); }
/* picture ist von sich aus inline, sonst greift die Hoehe am img nicht */
.hero__media picture { display: block; height: 100%; }
.hero__media img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; }

@keyframes lightOn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* --- Schaltflaechen --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  min-height: 52px; padding: 0.85rem 1.7rem;
  font-family: inherit; font-size: 1.0625rem; font-weight: 600;
  border: 1px solid transparent; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn--primary { background: var(--signal); color: #fff; }
.btn--primary:hover { background: var(--signal-deep); transform: translateY(-1px); }
.btn--secondary { background: var(--panel); color: var(--ink); border-color: #B9C4CE; }
.btn--secondary:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; fill: currentColor; }

/* --- Sektionen --- */
.section { padding-block: 0 var(--rhythm); }
.section__title {
  font-size: clamp(1.45rem, 2.8vw, 1.85rem);
  font-weight: 750; line-height: 1.15;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin-bottom: 0.7rem;
}
.section__lead {
  font-size: 1.0625rem;
  text-wrap: pretty;
  max-width: 58ch;
  margin-bottom: 1.75rem;
}

/* --- Tafel: ein Aussehen fuer alle Karten --- */
.info-card, .faq-item, .feature-card, .team-card, .mainlink__inner {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--lift-lo);
  padding: var(--card-pad);
}

/* --- Standort --- */
.info-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.info-card__head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.95rem; }
.info-card__head svg { width: 20px; height: 20px; fill: var(--signal); flex-shrink: 0; }
.info-card__head h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.008em; }
.info-card address { font-style: normal; }
.info-card p { font-size: 1.0625rem; }
.info-card p + p { margin-top: 0.3rem; }
.info-card a { color: var(--signal-deep); text-decoration: none; font-weight: 600; }
.info-card a:hover { text-decoration: underline; }
.info-card__hint {
  font-size: 1rem;
  margin-top: 0.95rem; padding-top: 0.95rem;
  border-top: 1px solid var(--line-soft);
}

/* --- Kontaktliste (Hausregel, nicht aendern):
   Eine Zeile pro Sache, dazwischen eine feine Trennlinie.
   Links steht wofuer die Nummer gilt, rechts die Nummer selbst.
   Nummern sind das Wichtigste auf der Karte, deshalb groesser und
   mit gleich breiten Ziffern, damit sie ruhig untereinander stehen.
   Keine Doppelpunkt-Aufzaehlung im Fliesstext, die liest niemand. --- */
.contact { margin: 0; }
.contact__row {
  display: grid;
  gap: 0.2rem 1.1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line-soft);
}
.contact__row:first-child { border-top: 0; padding-top: 0; }
.contact__row:last-child  { padding-bottom: 0; }
.contact dt { font-size: 1rem; font-weight: 600; }
.contact dd { margin: 0; font-size: 1.0625rem; }
.contact dd strong { font-weight: 700; }
.contact address { line-height: 1.45; }
/* dd mitschreiben, sonst gewinnt die allgemeinere Regel .contact dd */
.contact dd.contact__value--number {
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.contact dd.contact__value--number a { font-weight: 700; }
.contact dd.contact__note { font-size: 1rem; margin-top: 0.35rem; }

@media (min-width: 34rem) {
  .contact__row { grid-template-columns: 10.5rem 1fr; align-items: baseline; }
  .contact__note { grid-column: 2; }
}

.hours { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.hours th, .hours td { text-align: left; padding: 0.62rem 0; vertical-align: baseline; font-weight: 400; }
.hours th { font-weight: 600; padding-right: 1.1rem; white-space: nowrap; }
.hours td { font-variant-numeric: tabular-nums; }
.hours tr + tr th, .hours tr + tr td { border-top: 1px solid var(--line-soft); }
.hours tr:first-child th, .hours tr:first-child td { padding-top: 0; }

/* --- Haeufige Fragen --- */
.faq-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.faq-item h3 {
  display: flex; gap: 0.55rem; align-items: flex-start;
  font-size: 1.1rem; font-weight: 700; letter-spacing: -0.008em;
  margin-bottom: 0.4rem;
}
.faq-item h3 svg { width: 19px; height: 19px; fill: var(--signal); flex-shrink: 0; margin-top: 0.25rem; }
.faq-item p { font-size: 1.0625rem; text-wrap: pretty; }
.faq-item a { color: var(--signal-deep); font-weight: 600; text-decoration: none; }
.faq-item a:hover { text-decoration: underline; }

/* --- Termin --- */
.termin__actions { display: flex; flex-direction: column; gap: 0.7rem; max-width: 500px; }
.termin__hint { font-size: 1rem; margin-top: 0.95rem; max-width: 54ch; }
.termin__phone { margin-top: 0.9rem; font-size: 1.0625rem; }
.termin__phone a { color: var(--signal-deep); font-weight: 700; text-decoration: none; }
.termin__phone a:hover { text-decoration: underline; }

/* --- Leistungen --- */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.feature-card { display: flex; gap: 0.8rem; align-items: flex-start; }
.feature-card svg { width: 23px; height: 23px; fill: var(--signal); flex-shrink: 0; margin-top: 0.15rem; }
.feature-card h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.008em; margin-bottom: 0.2rem; }
.feature-card p { font-size: 1.0125rem; text-wrap: pretty; }

.devices { margin-top: 1.9rem; }
.devices h3 {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 0.8rem;
}
.devices ul { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0.45rem 1.75rem; }
.devices li { font-size: 1.0125rem; padding-left: 1.05rem; position: relative; }
.devices li::before {
  content: ""; position: absolute; left: 0; top: 0.66em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--signal);
}

/* --- Team --- */
.team-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-bottom: 1.1rem; }
.team-card { text-align: center; padding-block: 1.9rem; }
.team-card picture { display: block; }
.team-card__photo {
  width: 128px; height: 128px; border-radius: 50%;
  object-fit: cover; background: var(--ground-deep);
  margin: 0 auto 0.95rem;
}
.team-card h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.008em; }
.team-card p { font-size: 1.0125rem; margin-top: 0.15rem; }
.team__note { font-size: 1.0625rem; max-width: 58ch; text-wrap: pretty; }

/* --- Verbund --- */
.mainlink__inner { padding: clamp(1.9rem, 4.6vw, 2.9rem); text-align: center; }
.mainlink__inner .section__title { margin-bottom: 0.9rem; }
.mainlink__inner p { font-size: 1.0625rem; max-width: 58ch; margin: 0 auto 0.75rem; text-wrap: pretty; }
.mainlink__inner p:last-of-type { margin-bottom: 1.75rem; }

/* --- Fuss --- */
.site-footer { border-top: 1px solid var(--line); padding-block: 1.85rem; }
.site-footer__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0.85rem;
}
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.site-footer__nav a { color: var(--ink); font-size: 1rem; text-decoration: none; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__copy { font-size: 0.95rem; }

/* ============================================================
   Breiten
   ============================================================ */
@media (min-width: 620px) {
  .devices ul { grid-template-columns: repeat(2, 1fr); }
  .termin__actions { flex-direction: row; }
  .termin__actions .btn { flex: 1; }
}

@media (min-width: 760px) {
  .site-header__phone { display: inline-flex; }
  .info-grid    { grid-template-columns: repeat(2, 1fr); }
  .faq-grid     { grid-template-columns: repeat(2, 1fr); }
  .team-grid    { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .info-card--wide { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
  .hero__inner  { grid-template-columns: 1.06fr 0.94fr; }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .devices ul   { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}