/* ==========================================================================
   Ordination Dr. Franner
   Weiß / helles Creme mit Salbei-Akzent.
   Faustina für Überschriften, Source Sans 3 für alles andere.
   Source Sans 3 hat proportionale Ziffern in normaler Breite, wichtig für
   Telefonnummern und Uhrzeiten, und offene Buchstabenformen.
   ========================================================================== */

:root {
  /* Monochrome Salbei-Palette. Primärfarbe: --sage #8EA58C */
  --hint:       #D9E5D7;
  --mint:       #BFCFBB;
  --sage:       #8EA58C;
  --moss:       #738A6E;
  --evergreen:  #344C3D;

  --paper:      #EDF2EB;
  --white:      #FFFFFF;
  --wash:       var(--sage);
  --sage-deep:  var(--evergreen);
  --ink:        #232A25;
  --muted:      #5E6B61;
  --line:       #CFDBCC;

  --font-head:  Faustina, Georgia, serif;
  --font-body:  "Source Sans 3", system-ui, sans-serif;

  --radius:     12px;
  --radius-sm:  8px;

  --measure: 60ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --wrap: 66rem;
  --header-h: 5.75rem;

  --step-0:  1.0625rem;
  --step-1:  1.0625rem;
  --step-2:  clamp(1.25rem, 2vw, 1.5rem);
  --step-3:  clamp(1.5rem, 2.6vw, 1.875rem);
  --step-4:  clamp(1.875rem, 4vw, 2.625rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-family: var(--font-body); }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  color: var(--sage-deep);
  margin: 0 0 .7em;
  letter-spacing: -0.005em;
}

h1 { font-size: var(--step-4); letter-spacing: -0.015em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--sage-deep); text-decoration-color: var(--sage); text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--sage-deep); }

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

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

.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px;
  background: var(--sage-deep); color: var(--paper); padding: .75rem 1rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* Anker nicht unter der fixierten Kopfzeile verstecken */
[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* --- Kopfzeile ---------------------------------------------------------- */

.masthead {
  background: rgba(237, 242, 235, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}

.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: var(--header-h);
}

.wordmark {
  font-family: var(--font-head);
  /* Desktop size. Reduced in two steps from 2.35rem so the longer name
     "Dr. Veronika Franner" does not crowd the navigation.
     Mobile is set separately in the max-width: 60rem block below. */
  font-size: 1.9rem; font-weight: 600; line-height: 1.02;
  color: var(--sage-deep); text-decoration: none; flex: none;
}
.wordmark span {
  display: block; font-family: var(--font-body);
  font-size: 1.0625rem; font-weight: 400; color: var(--muted);
  /* Etwas Luft zwischen Name und Fachbezeichnung. */
  margin-top: .45rem;
}

.nav { display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 1.9rem); }
.nav a { text-decoration: none; color: var(--ink); font-size: .975rem; padding-block: .3rem;
  border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--sage); }

.nav__cta {
  background: var(--sage-deep); color: #FFFFFF !important;
  padding: .5rem 1.1rem !important; border-radius: 999px;
  border-bottom: 0 !important; white-space: nowrap;
}
.nav__cta:hover { background: #263A2E; }

/* --- Klappmenü für schmale Schirme --------------------------------------

   --kopf wird von js/seite.js auf die tatsächliche Höhe der Kopfzeile
   gesetzt und bei jeder Größenänderung nachgeführt. Feste Werte gehen
   schief, sobald sich Schriftgröße oder Zeilenumbruch ändern.

   Die Kopfzeile ist auf schmalen Schirmen fest positioniert, nicht klebend.
   Klebend plus gesperrtes Scrollen vertrug sich nicht: sobald das Scrollen
   gesperrt wurde, sprang die Kopfzeile an den Seitenanfang und nahm das
   geöffnete Menü mit. */

.menue-knopf {
  display: none;
  position: relative;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  flex: none;
}

/* Feste Abstände statt space-between, damit das Kreuz genau aufgeht. */
.menue-knopf__balken {
  position: absolute; left: 50%; width: 1.5rem; height: 2px;
  margin-left: -.75rem;
  background: var(--evergreen); border-radius: 2px;
  transition: transform .25s ease, opacity .15s ease;
}
.menue-knopf__balken:nth-child(1) { top: calc(50% - .5rem); }
.menue-knopf__balken:nth-child(2) { top: calc(50% - 1px); }
.menue-knopf__balken:nth-child(3) { top: calc(50% + .5rem - 2px); }

.menue-knopf[aria-expanded="true"] .menue-knopf__balken:nth-child(1) {
  transform: translateY(.5rem) rotate(45deg);
}
.menue-knopf[aria-expanded="true"] .menue-knopf__balken:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] .menue-knopf__balken:nth-child(3) {
  transform: translateY(calc(-.5rem + 2px)) rotate(-45deg);
}

@media (max-width: 60rem) {
  .menue-knopf { display: block; }

  .masthead {
    position: fixed; top: 0; left: 0; right: 0;
    background: var(--paper); backdrop-filter: none;
  }
  body { padding-top: var(--kopf, 5.75rem); }

  .masthead__inner { flex-wrap: nowrap; padding-block: .6rem; gap: 1rem; }
  .wordmark { font-size: 1.75rem; }
  .wordmark span { font-size: .95rem; }

  .nav {
    position: fixed; left: 0; right: 0;
    top: var(--kopf, 5.75rem); bottom: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: .5rem var(--gutter) 2.5rem;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; transform: translateY(-.5rem);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav.offen { opacity: 1; visibility: visible; transform: none; }

  .nav a {
    font-size: 1.3rem; font-family: var(--font-head); font-weight: 600;
    color: var(--evergreen);
    padding-block: 1.05rem; border-bottom: 1px solid var(--line);
  }
  .nav a:hover { border-bottom-color: var(--line); }
  .nav__cta {
    margin-top: 1.5rem; align-self: flex-start;
    border-bottom: 0 !important; font-size: 1.0625rem !important;
    padding: .8rem 1.5rem !important;
  }
}

/* Seite nicht scrollen, solange das Menü offen ist. */
html.menue-offen, html.menue-offen body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .menue-knopf__balken, .nav { transition: none; }
}

/* --- Hero --------------------------------------------------------------
   Bildformat: 2:1 am Desktop, 3:2 am Handy. Die Kamera liefert 3:2, am
   Desktop wird also oben und unten beschnitten, nicht seitlich.

   Das Bild steht für sich: keine Überschrift, keine Abdunklung, kein
   Verlauf. Den Namen trägt die Kopfzeile. */

.hero { position: relative; background: var(--wash); }

.hero img {
  display: block; width: 100%;
  aspect-ratio: 2 / 1; max-height: 62vh;
  object-fit: cover; object-position: center 40%;
}

/* Startseite: Titel und Untertitel bleiben im Quelltext, nur nicht mehr im
   Bild. Vorlesesoftware und Suchmaschinen finden das h1 weiterhin, und das
   Skript füllt data-feld="name" und data-feld="untertitel" wie bisher.
   Unterseiten (.hero--klein) zeigen ihren Titel weiter an. */
.hero:not(.hero--klein) .hero__text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Nur noch für Unterseiten: Abdunklung und Verlauf, damit der weisse Titel
   auch über hellen Bildstellen lesbar bleibt. */
.hero--klein::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(20, 26, 21, .62) 0%, rgba(20, 26, 21, 0) 55%),
    rgba(20, 26, 21, .2);
}

.hero--klein .hero__text {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: flex-end;
  padding-bottom: clamp(1.75rem, 5vw, 3.5rem);
}
.hero--klein .hero__text h1 { color: #FFFFFF; margin-bottom: .3em; text-wrap: balance; }

@media (max-width: 46rem) {
  .hero img { aspect-ratio: 3 / 2; }
}

/* Flacheres Titelbild für Unterseiten. */
.hero--klein img { aspect-ratio: 3 / 1; max-height: 20rem; object-position: center 45%; }
@media (max-width: 46rem) { .hero--klein img { aspect-ratio: 2 / 1; } }
.hero--klein h1 { font-size: var(--step-3); }

/* --- Abschnitte --------------------------------------------------------- */

.section { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.section--paper { background: var(--white); }

.section > .wrap > h2 { margin-bottom: 1.5rem; }

.lead { color: var(--muted); max-width: var(--measure); margin-top: -.75rem; margin-bottom: 2rem; }

.cols {
  display: grid; gap: clamp(2rem, 4.5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  align-items: start;
}
/* Karten in einer Reihe füllen die gleiche Höhe. */
.cols--karten { align-items: stretch; gap: clamp(1.25rem, 2.5vw, 1.75rem); }

/* --- Öffnungszeiten ----------------------------------------------------- */

/* separate statt collapse, sonst lässt sich die Zeile nicht abrunden. */
.hours { width: 100%; border-collapse: separate; border-spacing: 0; }
.hours th, .hours td {
  text-align: left; padding: .7rem .75rem; font-weight: 400;
}
.hours th { width: 9rem; }

/* Heutiger Tag. Salbeigrün wie die Boxen, damit die Seite einheitlich bleibt.
   Am Wochenende ist keine Zeile hervorgehoben: Samstag und Sonntag stehen
   nicht in TABELLENTAGE, also trägt keine Zeile data-today. */
.hours tr[data-today="true"] th,
.hours tr[data-today="true"] td {
  background: var(--wash); color: #FFFFFF;
}
.hours tr[data-today="true"] th {
  font-weight: 700; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.hours tr[data-today="true"] td { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.hours tr[data-today="true"] .closed { color: #FFFFFF; }
.hours tr[data-today="true"] td small { color: rgba(255,255,255,.9); }

.hours td small { display: block; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.hours .closed { color: var(--muted); }

/* --- Boxen -------------------------------------------------------------- */

.box {
  background: var(--wash);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-sm);
  color: #FFFFFF;
  /* Damit zwei Karten nebeneinander gleich hoch sind und ein Knopf unten
     sitzt, statt die Karte in die Länge zu ziehen. */
  display: flex; flex-direction: column; height: 100%;
}
.box h2, .box h3 {
  font-family: var(--font-head); font-size: var(--step-2); font-weight: 600;
  color: #FFFFFF; margin-bottom: 1.35rem; letter-spacing: -0.005em;
}
.box p { font-size: .975rem; color: inherit; }
.holiday__dates + p { margin-top: 1.5rem; padding-top: 1.35rem;
  border-top: 1px solid rgba(255,255,255,.35); }
.box__aktion { margin-top: auto; padding-top: 1.5rem; }
.box a { color: #FFFFFF; text-decoration-color: rgba(255,255,255,.65); }
.box a:hover { text-decoration-color: #FFFFFF; }

.holiday__dates { list-style: none; margin: 0; padding: 0; }
.holiday__dates li { padding-block: .95rem; border-bottom: 1px solid rgba(255,255,255,.35); }
.holiday__dates li:first-child { padding-top: 0; }
.holiday__dates li:last-child { border-bottom: 0; padding-bottom: 0; }
.holiday__dates .date {
  font-family: var(--font-body); font-size: 1.05rem; font-weight: 700;
  color: #FFFFFF; display: block; margin-bottom: .15rem;
}
.holiday__dates .note { color: rgba(255,255,255,.9); font-size: .925rem; line-height: 1.5; }

/* --- Notfall (einziger kräftiger Farbblock) ----------------------------- */

.urgent { background: var(--evergreen); color: #E4EBE3; }
.urgent h2 { color: #FFFFFF; }
.urgent p { color: var(--mint); }

/* Trennlinien als Rahmen, nicht als Abstand mit Hintergrund. Sonst bleibt
   bei drei Einträgen in zwei Spalten ein heller Rest als vierte Zelle übrig. */
.urgent__list { list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); }
.urgent__list li + li { border-left: 1px solid rgba(191,207,187,.3); }
.urgent__list a { display: flex; align-items: baseline; gap: 1rem;
  padding: 1.1rem 1.25rem; text-decoration: none; }
.urgent__list li:first-child a { padding-left: 0; }
.urgent__num { font-family: var(--font-head); font-size: 1.6rem; font-weight: 600;
  color: #FFFFFF; border-bottom: 2px solid transparent; }
.urgent__list a:hover .urgent__num { border-bottom-color: #FFFFFF; }
.urgent__label { color: var(--mint); font-size: .95rem; }

/* Am Handy untereinander, damit die Nummern groß und tippbar bleiben. */
@media (max-width: 46rem) {
  .urgent__list { grid-template-columns: 1fr; }
  .urgent__list li + li { border-left: 0; border-top: 1px solid rgba(191,207,187,.3); }
  .urgent__list a { padding-inline: 0; }
}

/* --- Leistungen --------------------------------------------------------- */

.services { list-style: none; margin: 0; padding: 0; }
.services li { padding-block: .35rem; }

/* --- Team --------------------------------------------------------------- */

/* Namen ohne Trennlinien, der Abstand reicht als Gliederung. */
.people { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.people li { padding-block: .2rem; }

.figure { margin: 0; }
.figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  background: var(--wash); border-radius: var(--radius); }
.figure figcaption { padding-top: .6rem; font-size: .9rem; color: var(--muted); }

/* --- Aufklappbare Abschnitte -------------------------------------------- */

.accordion { border-top: 1px solid var(--line); margin-top: 2.25rem; }
.accordion details + details { border-top: 1px solid var(--line); }
.accordion summary {
  list-style: none; cursor: pointer; padding: .95rem 2rem .95rem 0;
  position: relative; font-size: var(--step-1); color: var(--sage-deep);
  font-family: var(--font-head); font-weight: 600;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%;
  width: .55rem; height: .55rem; margin-top: -.4rem;
  border-right: 2px solid var(--sage); border-bottom: 2px solid var(--sage);
  transform: rotate(45deg); transition: transform .18s ease;
}
.accordion details[open] summary::after { transform: rotate(-135deg); margin-top: -.15rem; }
.accordion summary:hover { color: var(--ink); }
.accordion__body { padding: 0 0 1.4rem; }
.accordion__body ul { list-style: none; margin: 0; padding: 0; }
.accordion__body li { padding-block: .4rem; }
.accordion__body li small { display: block; color: var(--muted); font-size: .875rem; }

/* --- Kontakt und Karte -------------------------------------------------- */

.phone {
  font-family: var(--font-head); font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 600; color: var(--sage-deep); text-decoration: none;
  display: inline-block; border-bottom: 2px solid var(--sage); line-height: 1.25;
}
.phone:hover { border-bottom-color: var(--sage-deep); }

.contact-list { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.contact-list li { padding-block: .8rem; border-bottom: 1px solid var(--line); }
.contact-list li:first-child { border-top: 1px solid var(--line); }
.contact-list .label { display: block; color: var(--muted); font-size: .875rem; }

.map {
  background: #EFEFEF; border-radius: var(--radius); overflow: hidden;
  height: clamp(18rem, 44vh, 27rem);
}
/* Nur die Kacheln entsättigen, damit die Markierung farbig bleibt. */
.map .leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.04); }
.map .leaflet-container { background: #EFEFEF; font-family: var(--font-body); }
.map .leaflet-control-zoom a { color: var(--evergreen); }
.map__noscript { padding: 1.5rem; }
.map__credit { font-size: .8rem; color: var(--muted); margin: .6rem 0 0; }
.map__credit a { color: var(--muted); }

/* Kontakt: Text links, Karte rechts, wie abgestimmt. */
.kontakt { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.kontakt__text h2 { margin-bottom: 1.5rem; }
.kontakt__adresse, .kontakt__daten { font-size: var(--step-1); line-height: 1.8; }
.kontakt__hinweis { font-weight: 700; }
.kontakt__anfahrt { color: var(--muted); font-size: .95rem; margin-top: 1.5rem;
  padding-top: 1.25rem; border-top: 1px solid var(--line); }

/* --- Fußzeile ----------------------------------------------------------- */

.footer { background: var(--sage); color: #FFFFFF; padding-block: 3rem; }
.footer a { color: #FFFFFF; text-decoration-color: rgba(255,255,255,.65); }
.footer a:hover { text-decoration-color: #FFFFFF; }
.footer__cols { display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.footer h2 { font-size: .875rem; font-family: var(--font-body);
  color: rgba(255,255,255,.85); font-weight: 600; margin-bottom: .5rem; }
.footer p { font-size: .95rem; color: #FFFFFF; }

/* --- Rechtstext (Impressum, Datenschutz) -------------------------------- */

/* Die beiden Abschnitte trennt der Farbwechsel, keine Linie. */
.legal h2 { font-size: var(--step-3); margin-bottom: 1.5rem; }
.legal h3 { font-size: var(--step-1); font-family: var(--font-body); font-weight: 700;
  color: var(--ink); margin-top: 2rem; margin-bottom: .5rem; }
.legal p, .legal ul { max-width: var(--measure); }
.legal ul { padding-left: 1.2rem; margin: 0 0 1.15em; }
.legal li { margin-bottom: .3rem; }
.legal__block { margin-bottom: 1.35em; }
.legal__block strong { color: var(--sage-deep); }
.legal__stand { margin-top: 2.5rem; color: var(--muted); font-size: .95rem; }

.todo { background: #FBF3DE; border-left: 3px solid #C9A227;
  padding: 1rem 1.25rem; margin-bottom: 2.5rem; font-size: .95rem; max-width: var(--measure);
  border-radius: var(--radius-sm); }


/* --- Knöpfe -------------------------------------------------------------- */

.button {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--evergreen); color: #FFFFFF;
  padding: .7rem 1.3rem; border-radius: 999px;
  text-decoration: none; font-weight: 600; line-height: 1.3;
}
.button:hover { background: #263A2E; }

/* Auf den Salbeikarten wäre ein fast schwarzer Knopf lauter als die
   Überschrift. Heller Grund, dunkelgrüne Schrift.
   .box a färbt Links weiß, deshalb muss die Regel hier gewinnen. */
.box a.button--hell, .button--hell {
  background: #FFFFFF; color: var(--evergreen);
  padding: .6rem 1.15rem; font-size: .95rem;
  text-decoration: none;
}
.box a.button--hell:hover, .button--hell:hover { background: #FFFFFF; color: #263A2E; }

.button--rand {
  background: transparent; color: var(--evergreen);
  box-shadow: inset 0 0 0 2px var(--evergreen);
}
.button--rand:hover { background: var(--evergreen); color: #FFFFFF; }

/* Das Telefonsymbol richtet sich nach der Schriftgröße des Knopfes. Ohne
   feste Maße würde die SVG-Grafik den Knopf sprengen. */
.button__icon {
  width: 1.2em; height: 1.2em; flex: none;
  fill: currentColor; display: block;
}

.kontakt__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }


/* --- Einblenden beim Scrollen -------------------------------------------
   Nur wenn JavaScript läuft (Klasse js am html-Element). Ohne JavaScript
   und bei reduzierter Bewegung ist alles sofort sichtbar. */

.js .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.js .reveal.sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}


/* Am Handy steht das Foto über dem Text, am Desktop bleibt es rechts daneben.
   Die Reihenfolge im Quelltext bleibt unverändert, damit die Überschrift für
   Vorlesesoftware weiterhin vor dem Bild kommt. */
@media (max-width: 46rem) {
  .spalte-bild { order: -1; }
}