/* ============================================================
   DEMO / PRAXIS AM LINDENPLATZ

   Eigenstaendige Beispielseite. Sie teilt mit den anderen
   Demos nur die Schriftdateien, sonst nichts: eigene Farben,
   eigenes Raster, eigene Handschrift. Drei Demos aus einer
   Vorlage wuerden drei Varianten zeigen. Drei Demos mit
   eigener Gestaltung zeigen drei Kunden.

   ------------------------------------------------------------
   GESTALTUNGSENTSCHEIDUNGEN
   ------------------------------------------------------------
   FARBE   Salbei und warmes Papierweiss. Im Gesundheitsbereich
           zaehlt Ruhe. Kein Reinweiss (blendet), kein kaltes
           Klinikblau (jeder Zweite nutzt es).
   SCHRIFT Source Serif 4 fuer Ueberschriften: eine Serife wirkt
           verbindlich und ruhig. Inter fuer Fliesstext.
   RASTER  Eine Spalte, breite Raender, grosse Zeilenabstaende.
           Wer hier liest, sucht eine Auskunft und ist womoeglich
           krank. Dichte hilft ihm nicht.
   REIHEN- Sprechzeiten, Telefon, Anfahrt stehen ganz oben,
   FOLGE   noch vor dem Leistungsspektrum. Das ist die
           Reihenfolge, in der tatsaechlich gefragt wird.
   ============================================================ */

:root {
  --papier:      #FBFAF6;
  --papier-tief: #F2F0E9;
  --tinte:       #23302B;
  --tinte-weich: #5A6A63;
  --salbei:      #4A7C68;
  --salbei-hell: #E6EFEA;
  --signal:      #B4553A;
  --linie:       #DDD9CE;

  --schrift-titel: "Source Serif 4", Georgia, "Times New Roman", serif;
  --schrift-text:  "Inter", system-ui, -apple-system, sans-serif;

  --rand:   clamp(1.25rem, 5vw, 3rem);
  --maxw:   68rem;
  --lesen:  34rem;
  --r:      4px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;      /* 17px: Fliesstext fuer Menschen, die lesen muessen */
  line-height: 1.65;
  font-synthesis-weight: none;
}

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

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1rem; max-width: var(--lesen); }

a { color: var(--salbei); }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--salbei);
  outline-offset: 3px;
  border-radius: var(--r);
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--rand); }

.abschnitt { padding-block: clamp(3rem, 8vw, 6rem); }
.abschnitt--tief { background: var(--papier-tief); }

.marke-klein {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--salbei);
  margin-bottom: 0.75rem;
}

/* ------------------------------------------------------------
   HINWEISBAND: das hier ist eine Demo
   Steht ganz oben und bleibt dort. Eine erfundene Praxis ohne
   Kennzeichnung waere schlicht irrefuehrend.
   ------------------------------------------------------------ */
.demo-band {
  background: var(--tinte);
  color: var(--papier);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.demo-band .wrap {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
  align-items: center; justify-content: space-between;
  padding-block: 0.6rem;
}
.demo-band a { color: var(--papier); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ------------------------------------------------------------
   KOPF
   ------------------------------------------------------------ */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopf .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.6rem;
  min-height: 60px;
}
.logo {
  font-family: var(--schrift-titel);
  font-size: 1.2rem; font-weight: 600;
  color: var(--tinte); text-decoration: none;
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 44px;
}
.logo svg { width: 26px; height: 26px; flex: none; color: var(--salbei); }
.logo span { display: block; }
.logo small {
  display: block; font-family: var(--schrift-text);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tinte-weich);
}

.kopf-nav { display: none; gap: 1.5rem; }
.kopf-nav a {
  color: var(--tinte); text-decoration: none; font-size: 0.9375rem;
  min-height: 44px; display: inline-flex; align-items: center;
}
.kopf-nav a:hover { color: var(--salbei); }
@media (min-width: 60rem) { .kopf-nav { display: flex; } }

/* ------------------------------------------------------------
   KNOEPFE
   ------------------------------------------------------------ */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.7rem 1.35rem;
  border-radius: var(--r); border: 1px solid transparent;
  font: inherit; font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.knopf--voll { background: var(--salbei); color: #fff; }
.knopf--voll:hover { background: #3C6755; }
.knopf--linie { border-color: var(--tinte); color: var(--tinte); background: transparent; }
.knopf--linie:hover { background: var(--tinte); color: var(--papier); }
.knopf svg { width: 18px; height: 18px; flex: none; }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem); }
.hero__raster { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 60rem) {
  .hero__raster { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
}
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); margin-bottom: 1rem; }
.hero__lead { font-size: 1.1875rem; color: var(--tinte-weich); margin-bottom: 1.75rem; }
.hero__tun { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__bild { border-radius: var(--r); overflow: hidden; background: var(--papier-tief); }
.hero__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ------------------------------------------------------------
   DIE DREI AUSKUENFTE
   Zeiten, Telefon, Anfahrt. Das Wichtigste zuerst, nicht das
   Schoenste zuerst.
   ------------------------------------------------------------ */
.fakten { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; }
@media (min-width: 48rem) { .fakten { grid-template-columns: repeat(3, 1fr); } }
.fakt { background: var(--papier); padding: clamp(1.25rem, 3vw, 1.75rem); }
.fakt h3 { font-size: 1.0625rem; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.5rem; }
.fakt h3 svg { width: 20px; height: 20px; color: var(--salbei); flex: none; }
.fakt p { margin: 0; font-size: 0.9375rem; color: var(--tinte-weich); }
.fakt dl { margin: 0; font-size: 0.9375rem; }
.fakt dl div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.28rem; border-bottom: 1px solid var(--linie); }
.fakt dl div:last-child { border-bottom: 0; }
.fakt dt { color: var(--tinte-weich); }
.fakt dd { margin: 0; font-variant-numeric: tabular-nums; }
.fakt a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.jetzt-offen {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8125rem; font-weight: 600; color: var(--salbei);
  background: var(--salbei-hell); padding: 0.2rem 0.55rem; border-radius: 999px;
  margin-left: 0.5rem;
}
.jetzt-offen i { width: 7px; height: 7px; border-radius: 50%; background: var(--salbei); display: block; }

/* ------------------------------------------------------------
   LEISTUNGEN
   ------------------------------------------------------------ */
.spektrum { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .spektrum { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .spektrum { grid-template-columns: repeat(3, 1fr); } }
.leistung {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: clamp(1.25rem, 3vw, 1.6rem);
}
.abschnitt--tief .leistung { background: var(--papier); }
.leistung h3 { font-size: 1.1875rem; margin-bottom: 0.5rem; }
.leistung p { font-size: 0.9375rem; color: var(--tinte-weich); margin: 0; max-width: none; }
.leistung__zeichen {
  width: 40px; height: 40px; border-radius: var(--r);
  background: var(--salbei-hell); color: var(--salbei);
  display: grid; place-items: center; margin-bottom: 0.9rem;
}
.leistung__zeichen svg { width: 21px; height: 21px; }

/* ------------------------------------------------------------
   TEXTBLOCK MIT BILD
   ------------------------------------------------------------ */
.zwei { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 60rem) { .zwei { grid-template-columns: 1fr 1fr; } }
.zwei__bild { border-radius: var(--r); overflow: hidden; }
.zwei__bild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (min-width: 60rem) { .zwei--kehrt .zwei__bild { order: -1; } }

.liste-haken { list-style: none; margin: 1.25rem 0 0; padding: 0; max-width: var(--lesen); }
.liste-haken li { display: flex; gap: 0.7rem; padding-block: 0.4rem; align-items: flex-start; }
.liste-haken svg { width: 20px; height: 20px; color: var(--salbei); flex: none; margin-top: 0.2rem; }

/* ------------------------------------------------------------
   FRAGEN
   ------------------------------------------------------------ */
.fragen { max-width: 44rem; border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  cursor: pointer; list-style: none;
  padding: 1rem 2.5rem 1rem 0; position: relative;
  font-family: var(--schrift-titel); font-size: 1.125rem; font-weight: 600;
  min-height: 48px; display: flex; align-items: center;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; position: absolute; right: 0.5rem; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-right: 2px solid var(--salbei); border-bottom: 2px solid var(--salbei);
  transform: rotate(45deg); transition: transform 0.22s ease;
}
.fragen details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.fragen details p { padding-bottom: 1rem; color: var(--tinte-weich); }

/* ------------------------------------------------------------
   KONTAKT UND FUSS
   ------------------------------------------------------------ */
.kontakt-raster { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 60rem) { .kontakt-raster { grid-template-columns: 1fr 1fr; } }
.karte-platzhalter {
  border: 1px solid var(--linie); border-radius: var(--r);
  background:
    repeating-linear-gradient(45deg, transparent 0 11px, color-mix(in srgb, var(--salbei) 7%, transparent) 11px 22px),
    var(--salbei-hell);
  aspect-ratio: 4 / 3;
  display: grid; place-items: center; text-align: center; padding: 1.5rem;
}
.karte-platzhalter p { color: var(--tinte-weich); font-size: 0.875rem; margin: 0; }

.fuss {
  background: var(--tinte); color: var(--papier);
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
}
.fuss a { color: var(--papier); }
.fuss__raster { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss h3 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--schrift-text); font-weight: 600; margin-bottom: 0.75rem; opacity: 0.7; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 0.3rem; }
.fuss li a { min-height: 44px; display: inline-flex; align-items: center; font-size: 0.9375rem; }
.fuss__unten {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--papier) 22%, transparent);
  font-size: 0.8125rem; opacity: 0.75;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
}

/* ------------------------------------------------------------
   SPRUNGMARKE FUER DIE TASTATUR
   ------------------------------------------------------------ */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tinte); color: var(--papier);
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }