/* ============================================================
   Praxis Dr. Nazary — v4 "Rasterbau"
   Swiss International Style · visible grid · hairlines · cold blue
   ============================================================ */

:root {
  --paper: #F4F8FC;
  --ink: #0A1A2E;
  --blue-700: #1B4E8A;
  --blue-300: #A9CCEA;
  --blue-100: #DDEAF6;
  --pulse: #4D9DE8; /* Signalblau — EKG trace, status dots, CTA */
  --line: #BFD3E4;

  --rail-w: 56px;
  --rail-h-mobile: 40px;

  /* Zwei Schriften, aufgeteilt nach dem, was die Seite selbst behauptet.
     Gesprochenes traegt die Serifenschrift, Gemessenes die Grotesk. */
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  /* Schriftweg dieser Seite, damit die Frage nicht wieder hochkommt:
     bis 02.08. IBM Plex, dann gebannt. Am 07.08. zog Newsreader ein, ohne
     festgehaltene Freigabe. Am 14.08. hat Aryan das zurueckgenommen ("Ich
     habe die neuen Schriften nicht bejaht") und danach am Board Schibsted
     Grotesk gewaehlt, weil Archivo schon drei andere Kundenseiten fuehrt.
     Board: schrift-specimen/board-2026-08-14.png */
  --head: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --ease: 150ms ease-out;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
}

::selection { background: var(--blue-300); color: var(--ink); }

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

:focus-visible { outline: 2px solid var(--pulse); outline-offset: 2px; }

/* Zahlen, die untereinander stehen muessen: Sprechzeiten, Telefonnummern,
   Jahreszahlen. Frueher hiess diese Klasse .mono und schaltete auf eine
   Schreibmaschinenschrift um. Der Wechsel war nie noetig - gebraucht wurden
   nur gleich breite Ziffern, und die liefert die Textschrift selbst. Der
   Name sagt jetzt, was passiert. */
.zahl { font-variant-numeric: tabular-nums; }

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

/* Ueberschriften in Schibsted Grotesk, Gewicht 700.

   Dieser Absatz beschrieb bis zum 2026-08-14 eine Serifenschrift ohne
   Fettung. Das war Newsreader, die am 07.08. ohne festgehaltene Freigabe
   eingezogen war, als die gebannte IBM-Plex-Familie raus musste. Aryan hat
   sie am 14.08. zurueckgenommen: "Ich habe die neuen Schriften nicht bejaht."

   Am 14.08. hat Aryan am Board Schibsted Grotesk gewaehlt: Archivo fuehrte
   bereits die Anzeige bei Looden, Dent Art und Palmrain, das waere die vierte
   Kundenseite mit derselben Schrift gewesen. Schibsted hat keine
   Breitenachse, deshalb faellt font-stretch weg; das Gewicht traegt allein. */
h1, h2, h3 {
  font-family: var(--head);
  /* Gewicht 700, Laufweite -0.01em, Zeilenabstand 1.05. */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-align: left;
}

/* Der Titel steht auf einem Foto. Diese Regel hob frueher das Gewicht von 400
   auf 450 an, weil die duennen Striche der Serifenschrift ueber einer hellen
   Bildstelle wegzubrechen drohten. Mit Archivo 700 ist das gegenstandslos: die
   Regel darueber traegt das Gewicht schon, und 450 hat es hier wieder
   heruntergezogen. Gemessen am 2026-08-14: h1 kam mit 450 heraus statt 700. */
h1 { letter-spacing: -0.01em; }
h2 {
  font-size: clamp(30px, 4.4vw, 46px);
  margin-bottom: 40px;
  letter-spacing: -0.005em;
}
/* Klein gesetzt, deshalb halbfett: sonst verschwindet eine Serifenschrift
   neben dem Fliesstext daneben. */
h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.28;
}

/* ============================================================
   EKG rail — the vertical "Lebenslinie"
   ============================================================ */

.ekg-rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail-w);
  background: var(--paper);
  z-index: 200;
  overflow: hidden;
}

/* Monitor principle: the trace stands still, the pulse travels along it.
   Geometry is generated by JS in real pixels (no viewBox stretching). */
.ekg-ghost, .ekg-pulse {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.ekg-ghost polyline, .ekg-pulse polyline {
  fill: none;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ekg-ghost polyline { stroke: var(--blue-300); opacity: .6; }
.ekg-pulse polyline {
  stroke: var(--pulse);
  stroke-width: 2;
  stroke-dasharray: 14 86;           /* bright segment travelling the trace */
  animation: ekg-travel 1s linear infinite;  /* 1 full pass/second = 60 BPM */
}
@keyframes ekg-travel { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

.ekg-bpm {
  position: absolute;
  left: 0; bottom: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink);
  background: var(--paper);
  padding-top: 6px;
}
.ekg-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--pulse);
}

/* page offset for the rail */
.page { margin-left: var(--rail-w); }

/* ============================================================
   Notfall block (below Sprechzeiten)
   ============================================================ */

.notfall {
  margin-top: 48px;
  background: #fff;
  border-radius: 16px;
  padding: 32px 36px;
  box-shadow: 0 1px 2px rgba(10,26,46,.04), 0 10px 28px rgba(10,26,46,.05);
}
.notfall h3 { margin-bottom: 10px; }
.notfall p { max-width: 62ch; color: rgba(10, 26, 46, .78); }
.notfall dl { margin-top: 24px; display: grid; gap: 6px; }
.notfall dl div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
}
.notfall dt { font-size: 13px; color: rgba(10, 26, 46, .7); }
.notfall dd { font-size: 15px; }
.notfall dd a { color: var(--blue-700); text-decoration: none; font-weight: 500; }
.notfall dd a:hover { text-decoration: underline; }

/* ============================================================
   Header
   ============================================================ */

.site-header {
  position: fixed;
  top: 0; left: var(--rail-w); right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 40px;
  height: 64px;
  color: #fff;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.site-header.scrolled {
  background: var(--paper);
  color: var(--ink);
  border-bottom-color: var(--line);
}

/* Der Name im Kopf ist ein Namensschild, kein Logo-Schriftzug. Halbfett,
   ein wenig gesperrt, so steht er auf einer Praxistuer. */
.wordmark {
  font-family: var(--head);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.045em;
  color: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.wordmark span { font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: 0; opacity: .8; }
.brand-mark { width: 20px; height: 20px; flex: 0 0 auto }
.brand-mark circle { fill: #3FB2A8; transition: fill var(--ease) }
.site-header.scrolled .brand-mark circle { fill: #0E7C7B }
.wordmark:hover { text-decoration: none; }

.site-nav { display: flex; gap: 22px; margin-left: auto; }
.site-nav a {
  color: inherit;
  font-size: 15px;
  font-weight: 500;
}
.site-nav a:hover { color: var(--pulse); text-decoration: none; }
.site-header.scrolled .site-nav a:hover { color: var(--blue-700); }

.header-phone {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: inherit;
  white-space: nowrap;
}

/* ============================================================
   Hero
   ============================================================ */

.hero { position: relative; height: 92vh; min-height: 540px; overflow: hidden; }

.hero-photo {
  position: absolute; inset: 0;
  background-color: #0A1A2E;
  background-size: cover;
  background-position: center;
  filter: saturate(.85);
}

.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(10,26,46,.55) 0%,
      rgba(10,26,46,.18) 12%,
      transparent 24%),
    linear-gradient(to top,
      rgba(10,26,46,.88) 0%,
      rgba(10,26,46,.42) 45%,
      transparent 78%);
  pointer-events: none;
}

.hero-content {
  position: absolute;
  left: 40px; right: 40px; bottom: 56px;
  color: #fff;
  max-width: 860px;
}
.hero-content h1 {
  font-size: clamp(36px, 5.4vw, 64px);
  margin-bottom: 18px;
}
.hero-sub { font-size: 17px; opacity: .92; max-width: 640px; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 12px;
  border: none;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.btn:hover { text-decoration: none; }

.btn-pulse { background: var(--pulse); color: var(--ink); }
.btn-pulse:hover { background: #63ACEC; }

.btn-outline {
  color: #fff;
  background: rgba(255,255,255,.14);
  font-size: 15px;
}
.btn-outline:hover { background: rgba(255,255,255,.24); }

.hero-note { margin-top: 20px; font-size: 14px; opacity: .78; }

/* ============================================================
   Sections
   ============================================================ */

.section { padding: 96px 40px; max-width: 1240px; }

.band {
  background: var(--blue-100);
  max-width: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band > * { max-width: 1160px; }

/* --- Praxis: 5/7 split --- */
.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 0;
  border-top: 1px solid var(--line);
}

.split-left { padding: 44px 44px 44px 0; }
.split-left h2 { margin-bottom: 36px; }

.facts { border-top: 1px solid var(--line); font-size: 14px; }
.facts div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.facts dt { color: var(--blue-700); }
.facts dd { text-align: right; }

.split-right {
  padding: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
}
/* Frueher eine hellblaue Flaeche mit Radius hinter dem Text. Getoente Boxen
   nur zum Gruppieren sind bei Webtuff gesperrt (.claude/rules/no-generic-boxes.md).
   Die Spalte traegt sich selbst: eine Haarlinie oben, dieselbe wie in der
   Faktenliste links, bindet die beiden Haelften zusammen. */
.tint { border-top: 1px solid var(--line); }

/* --- Leistungen: 3x2 cards --- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px 30px;
  box-shadow: 0 1px 2px rgba(10,26,46,.04), 0 10px 28px rgba(10,26,46,.05);
  transition: box-shadow var(--ease), transform var(--ease);
}
.card:hover {
  box-shadow: 0 2px 4px rgba(10,26,46,.05), 0 16px 36px rgba(10,26,46,.09);
  transform: translateY(-2px);
}
.card h3 { margin-bottom: 12px; }
.card p { font-size: 15px; line-height: 1.55; }

/* --- Team --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: #10345E;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  overflow: hidden;
  filter: saturate(.85);
}

.member figcaption { padding-top: 14px; }
/* Personennamen in der Leseschrift, die Funktion darunter in der Grotesk.
   Dieselbe Trennung wie sonst auf der Seite: der Mensch, dann die Angabe. */
.member strong {
  display: block;
  font-family: var(--head);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
}
.member figcaption span { display: block; margin-top: 2px; font-size: 14px; color: var(--blue-700); }

/* --- Anfahrt / Karte --- */
.map {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.map-frame {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(10,26,46,.04), 0 10px 28px rgba(10,26,46,.05);
  min-height: 380px;
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
}
.map-info {
  background: #fff;
  border-radius: 16px;
  padding: 32px 30px;
  box-shadow: 0 1px 2px rgba(10,26,46,.04), 0 10px 28px rgba(10,26,46,.05);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.map-info strong { font-weight: 600; font-size: 17px; }
.map-info .map-hint { margin-top: 8px; font-size: 14px; color: var(--blue-700); }
.btn-route {
  margin-top: auto;
  align-self: flex-start;
  background: var(--ink);
  color: #fff;
}
.btn-route:hover { background: var(--blue-700); }
@media (max-width: 760px) {
  .map { grid-template-columns: 1fr; }
  .btn-route { margin-top: 20px; }
}

/* --- Sprechzeiten --- */
.hours {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  /* Uhrzeiten stehen spaltenweise untereinander, sonst tanzt die Tabelle. */
  font-variant-numeric: tabular-nums;
}
.hours th, .hours td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}
.hours tbody tr:first-child th,
.hours tbody tr:first-child td { border-top: 1px solid var(--line); }
.hours th[scope="row"] { width: 120px; color: var(--blue-700); }
.hours .closed { color: rgba(10,26,46,.5); }
.hours .closed th[scope="row"] { color: rgba(27,78,138,.5); }
.hours .phone-only { color: var(--blue-700); }
.hours .through {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--blue-700);
  margin-left: 8px;
}

.hours tr.today { background: var(--blue-100); }
.hours tr.today th[scope="row"] { position: relative; }
.hours .open-dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 10px;
  border-radius: 999px;
  background: var(--pulse);
  vertical-align: 1px;
}

/* --- Terminanfrage --- */
.booking {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 40px;
  margin-bottom: 56px;
}

.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-head {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--blue-700);
  text-align: center;
  padding: 4px 0 8px;
}

.cal-day {
  appearance: none;
  border: none;
  border-radius: 10px;
  background: #fff;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink);
  padding: 10px 2px;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  transition: background var(--ease), border-color var(--ease);
}
.cal-day small { display: block; font-size: 10px; color: var(--blue-700); }
.cal-day:hover:not(:disabled) { background: var(--blue-300); }
.cal-day:disabled {
  color: var(--line);
  background: transparent;
  cursor: not-allowed;
}
.cal-day:disabled small { color: var(--line); }
.cal-day.selected { background: var(--ink); color: #fff; }
.cal-day.selected small { color: var(--blue-300); }

.slots-title { font-size: 13px; margin-bottom: 16px; color: var(--blue-700); }

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}

.slot {
  appearance: none;
  border: none;
  border-radius: 10px;
  background: #fff;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink);
  padding: 9px 4px;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}
.slot:hover:not(:disabled) { background: var(--blue-300); }
.slot:disabled {
  color: var(--line);
  background: transparent;
  cursor: not-allowed;
}
.slot.selected { background: var(--ink); color: #fff; }

.booking-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  max-width: 760px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 500; }

.field input,
.field textarea {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 14px;
}
.field input:focus,
.field textarea:focus { outline: 2px solid var(--pulse); outline-offset: 0; }
.field textarea { resize: vertical; }

.btn-submit { background: var(--ink); color: #fff; }
.btn-submit:hover { background: var(--blue-700); }

.helper { font-size: 13px; color: var(--blue-700); margin-top: 10px; }

.form-error {
  grid-column: 1 / -1;
  color: #B4322A;
  font-size: 14px;
}

.confirmation:not(:empty) {
  max-width: 760px;
  background: #fff;
  border-radius: 16px;
  padding: 32px 36px;
  box-shadow: 0 1px 2px rgba(10,26,46,.04), 0 10px 28px rgba(10,26,46,.05);
}
.confirmation h3 { margin-bottom: 14px; }
.confirmation dl div {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  font-size: 15px;
}
.confirmation dt { font-variant-numeric: tabular-nums; width: 110px; flex-shrink: 0; color: var(--blue-700); }
.confirmation .confirm-note { margin-top: 16px; font-size: 14px; }
.confirmation .confirm-note a { font-variant-numeric: tabular-nums; }

/* ============================================================
   Footer
   ============================================================ */

.footer {
  background: var(--ink);
  color: #fff;
  padding: 72px 40px 40px;
}
.footer a { color: var(--blue-300); }

.footer-ekg {
  display: block;
  width: 100%;
  max-width: 1160px;
  height: 40px;
  margin-bottom: 48px;
}
.footer-ekg polyline {
  fill: none;
  stroke: var(--pulse);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 900;
  stroke-dashoffset: 0;
}
.footer-ekg.pulse polyline { animation: footer-pulse 1.4s ease-out 1 both; }
@keyframes footer-pulse {
  from { stroke-dashoffset: 900; }
  to { stroke-dashoffset: 0; }
}

/* Dritte Spalte fuer Impressum und Datenschutz. Rechtstexte gehoeren in die
   Fusszeile, nicht als angehaengter Absatz darunter. */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 900px;
  font-size: 15px;
}
@media (max-width: 700px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
.footer-cols p { margin-bottom: 10px; }
.footer-cols .zahl { font-size: 14px; }

.copyright {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid rgba(191,211,228,.25);
  font-size: 13px;
  color: rgba(255,255,255,.6);
}

/* ============================================================
   Scroll reveal
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease-out, transform .45s ease-out;
}
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 980px) {
  .cards, .team-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split-left { border-right: none; padding-right: 0; }
  .booking { grid-template-columns: 1fr; }
  .site-nav { display: none; }
}

@media (max-width: 760px) {
  :root { --rail-w: 0px; }

  .page { margin-left: 0; padding-bottom: calc(var(--rail-h-mobile) + env(safe-area-inset-bottom, 0px)); }

  /* rail becomes a bottom strip; lifted above the iPhone home-indicator /
     rounded-corner zone via safe-area inset */
  .ekg-rail {
    top: auto; left: 0; right: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    width: auto;
    height: var(--rail-h-mobile);
  }
  /* opaque continuation below the strip so content never peeks through the gap */
  .ekg-rail::after {
    content: "";
    position: absolute;
    top: 100%; left: 0; right: 0;
    height: env(safe-area-inset-bottom, 0px);
    background: var(--paper);
  }
  .ekg-bpm {
    left: auto; bottom: 0; top: 0;
    right: calc(12px + env(safe-area-inset-right, 0px));
    width: auto;
    flex-direction: row;
    align-items: center;
    padding: 0 4px;
  }

  .site-header { left: 0; padding: 0 20px; gap: 16px; }
  /* Der Zusatz "/ Hausarztpraxis Basel" faellt auf dem Handy weg. Er stand
     zusammen mit dem Namen und der Telefonnummer in einer 64px-Zeile, die
     dafuer zu schmal ist, und hat die Nummer ueber den rechten Rand gedrueckt
     - ausgerechnet die Nummer, wegen der die meisten die Seite aufrufen.
     Was er sagt, steht zwei Zeilen weiter unten ohnehin im Titel. */
  .wordmark span { display: none; }
  /* Die Navigation ist hier ausgeblendet, und mit ihr faellt das
     margin-left:auto weg, das die Nummer sonst nach rechts schiebt. */
  .header-phone { margin-left: auto; }

  .hero-content { left: 20px; right: 20px; bottom: 84px; }
  .section { padding: 72px 20px; }
  .cards, .team-grid { grid-template-columns: 1fr; }
  .booking-form { grid-template-columns: 1fr; }
  /* Kein seitlicher Einzug mehr: das stammt aus der Zeit, als hier eine
     getoente Flaeche lag. Ohne sie stand der Absatz eingerueckt, waehrend
     Ueberschrift und Faktenliste darueber am linken Rand begannen. */
  .split-right { padding: 32px 0 0; }
  .footer { padding: 56px 20px 32px; }
  .footer-cols { grid-template-columns: 1fr; }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ekg-pulse { display: none; }
  .footer-ekg.pulse polyline { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .ekg-pulse polyline { animation: none !important; }
}