/* ===========================================================================
   Standortseiten der Praxis Ragnitz und Oettel
   Angelegt am 11.08.2026.

   Gilt fuer /hausarzt-soemmerda und /hausarzt-koelleda.

   Die Farben, Schriften, Rundungen und Schatten sind 1:1 die der Startseite
   und der Leistungsseiten. Abweichungen gibt es nur dort, wo eine eigene
   Seite mehr Platz hat als eine Kachel auf der Startseite: der Standortblock
   nutzt die volle Breite, und die Sprechzeiten stehen vollstaendig da, ohne
   Umschalter zwischen den beiden Haeusern.

   Die Navigation und der Fussbereich sind aus den Leistungsseiten uebernommen,
   damit beide Seiten sich anfuehlen wie der Rest des Hauses.
   =========================================================================== */

:root { color-scheme: only light; }
:root {
  --cream: #F8F5EE; --cream-soft: #F2EDE1; --cream-deep: #E8DFCC;
  --sage-mist: #DCE5DC; --sage-pale: #C8D6C8; --sage: #7A9582;
  --forest-mist: #3D5D4A; --forest: #2A4A38; --forest-ink: #1C3125;
  --gold: #A88948; --gold-soft: #C9AD77;
  --ink: #1A1F1B; --text: #2C332E; --muted: #676E68; --muted-light: #67706A;
  --line: rgba(26, 31, 27, 0.07); --line-strong: rgba(26, 31, 27, 0.14);
  --white: #FFFFFF;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-sm: 0 2px 12px rgba(28, 49, 37, 0.04);
  --shadow-md: 0 8px 32px rgba(28, 49, 37, 0.08);
  --radius: 16px; --radius-lg: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Inter', sans-serif; background: var(--cream); color: var(--text); line-height: 1.7; font-size: 16px; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; }

.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; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------------------------
   Hauptnavigation, 1:1 aus den Leistungsseiten
   --------------------------------------------------------------------------- */
/* Flaeche, Trennlinie, Schatten und die feste Position liegen am
   .nav-wrapper, den megamenu.js zur Laufzeit um die Leiste legt
   (megamenu.css Zeile 3 bis 11). Hier NICHT wiederholen, sonst liegen
   zwei Cremeflaechen mit je 0,92 Deckkraft uebereinander und die Leiste
   wird praktisch deckend statt halbdurchsichtig. Genau so macht es die
   Startseite: index.html Zeile 616 wird dort von megamenu.css Zeile 12
   auf durchsichtig gesetzt. Gemessen und behoben am 13.08.2026. */
nav#nav { position: relative; z-index: 100; padding: 18px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* megamenu.css Zeile 12 gibt #nav einen dreistufigen Schatten. Der Wrapper
   hat schon einen eigenen, also hier abschalten. Die Startseite tut
   dasselbe in index.html Zeile 3256. */
nav#nav { box-shadow: none; }
nav#nav .logo { font-family: 'Fraunces', serif; font-size: 21px; font-weight: 500; letter-spacing: -0.02em; color: #2A4A38; display: flex; align-items: center; gap: 12px; text-decoration: none; }
nav#nav .logo-mark { width: 38px; height: 38px; border-radius: 50%; background: #2A4A38; color: #F8F5EE; display: flex; align-items: center; justify-content: center; font-size: 14px; position: relative; overflow: hidden; font-weight: 500; flex-shrink: 0; }
nav#nav .logo-mark::before { content:''; position:absolute; inset:-50%; background: conic-gradient(from 0deg, transparent, rgba(201,173,119,0.4), transparent); animation: navLogoShine 6s linear infinite; }
@keyframes navLogoShine { to { transform: rotate(360deg); } }
nav#nav .logo-mark span { position: relative; z-index: 1; }
nav#nav .logo-text { display: flex; flex-direction: column; line-height: 1.1; }
nav#nav .logo-text .main { font-size: 18px; }
nav#nav .logo-text .sub { font-size: 11px; color: #6B736C; letter-spacing: 0.05em; font-family: 'Inter', sans-serif; font-weight: 400; }
nav#nav .nav-links { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; }
nav#nav .nav-links li { list-style: none; }
nav#nav .nav-links a { color: #2C332E; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.6s var(--ease); position: relative; }
nav#nav .nav-links a:hover { color: #2A4A38; }
nav#nav .nav-links a::after { content:''; position:absolute; bottom:-6px; left:0; width:0; height:1px; background: #2A4A38; transition: width 0.6s var(--ease); }
nav#nav .nav-links a:hover::after { width: 100%; }
nav#nav .nav-cta { padding: 11px 22px; background: #2A4A38; color: #F8F5EE; border-radius: 100px; text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.8s var(--ease); position: relative; overflow: hidden; flex-shrink: 0; }
nav#nav .nav-cta::before { content:''; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(201,173,119,0.3), transparent); transform: translateX(-100%); transition: transform 0.8s var(--ease); }
nav#nav .nav-cta:hover { background: #3D5D4A; transform: translateY(-1px); box-shadow: 0 12px 30px rgba(42,74,56,0.25); }
nav#nav .nav-cta:hover::before { transform: translateX(100%); }
nav#nav { width: 100%; box-sizing: border-box; flex-wrap: nowrap !important; }
nav#nav .logo-text .main { white-space: nowrap !important; }
nav#nav .nav-links { flex-wrap: nowrap !important; }
nav#nav .nav-links a { white-space: nowrap !important; }
@media (max-width: 968px) {
  nav#nav { padding: 16px 20px; }
  nav#nav .nav-links { display: none; }
  nav#nav .logo-text .sub { display: none; }
}
/* Mobiler Kopf: ohne diese Regeln schiebt "Rezept bestellen" den Menue-Knopf
   auf schmalen Handys aus dem Bild. Muster M01 aus mobile-final.css. */
@media (max-width: 640px) {
  nav#nav { padding: 12px 14px !important; gap: 0 !important; }
  nav#nav .logo { gap: 8px; flex: 1 1 auto; min-width: 0; order: 1; margin-right: auto; }
  nav#nav .logo-text { min-width: 0; }
  nav#nav .logo-text .main { font-size: 14px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
  nav#nav .nav-cta { padding: 9px 14px !important; font-size: 12px !important; flex-shrink: 0; line-height: 1.1; white-space: nowrap; order: 2; margin-left: auto !important; }
  nav#nav .mobile-menu-trigger { order: 3; margin-left: 14px !important; margin-right: 0 !important; }
}
@media (max-width: 380px) {
  nav#nav .logo-text .main { font-size: 13px; }
  nav#nav .nav-cta { padding: 8px 12px !important; font-size: 11.5px !important; }
}

/* ---------------------------------------------------------------------------
   Kopfbereich
   Der Kopfabstand haelt die fest stehende Navigationsleiste frei, genau wie
   auf den Leistungsseiten.
   --------------------------------------------------------------------------- */
.head-band { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; padding: 120px 32px 56px; }
.head-band::before { content: ""; position: absolute; top: -55%; left: 50%; width: 900px; height: 900px; transform: translateX(-50%); background: radial-gradient(circle, rgba(201, 173, 119, 0.11) 0%, transparent 62%); pointer-events: none; z-index: 0; }
.head-inner { max-width: 820px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.hero-eyebrow::before, .hero-eyebrow::after { content: ""; width: 24px; height: 1px; background: var(--line-strong); }
h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: clamp(38px, 8vw, 58px); line-height: 1.04; letter-spacing: -0.025em; color: var(--forest-ink); margin-bottom: 20px; }
h1 em { font-style: italic; font-weight: 400; color: var(--gold); }
.hero-lead { font-size: 17.5px; color: var(--muted); max-width: 660px; margin: 0 auto; line-height: 1.68; }

/* Der breite Rahmen. Die Standortseiten nutzen mehr Platz als die Startseite,
   weil hier nur ein Haus dargestellt wird und nicht zwei nebeneinander. */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px 40px; }
/* Frueher zentrierte .wrap-narrow ganze Sektionen. Dadurch stand die
   Ueberschrift dieser Sektion weiter innen als alle anderen, es gab zwei
   linke Kanten auf einer Seite. Jetzt bleibt die Sektion voll breit, nur der
   Textkasten selbst ist schmaler, und zwar linksbuendig. */
.wrap-narrow { max-width: 900px; }
.wrap-narrow-inner { max-width: 900px; margin-left: auto; margin-right: auto; }

.pfad { font-size: 14.5px; color: var(--muted); margin: 0 0 10px; display: flex; align-items: center; flex-wrap: wrap; }
.pfad a, .pfad span[aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
.pfad a { color: var(--forest); text-decoration: none; border-bottom: 1px solid transparent; }
.pfad a:hover { border-bottom-color: var(--forest); }
.pfad span[aria-hidden] { margin: 0 8px; color: var(--muted-light); }

section.block { margin-top: 56px; }
/* block-head zentriert: die Ueberschriften stehen mittig, genau wie im
   Standortbereich der Startseite. Die Inhalte darunter behalten ihre
   eigene Ausrichtung, nur der Kopf ist zentriert. */
.block-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.block h2 { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(25px, 4.8vw, 34px); line-height: 1.2; letter-spacing: -0.015em; color: var(--forest-ink); }
.block-sub { font-size: 15.5px; color: var(--muted); margin-top: 10px; line-height: 1.7; max-width: 720px; margin-left: auto; margin-right: auto; }
.block-head { margin-bottom: 26px; text-align: center; }

/* ---------------------------------------------------------------------------
   DER BREITE STANDORTBLOCK
   Links die Karte ueber die volle Hoehe, rechts die Angaben. Auf dem Handy
   stapelt sich beides: Karte oben, Angaben darunter.
   --------------------------------------------------------------------------- */
.ort { margin-top: -30px; position: relative; z-index: 2; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
/* Der Block zieht sich 30px nach oben unter den Kopfbereich. Steht die
   Pfadzeile davor, schoebe er sich ueber sie. Gleiche Korrektur wie auf den
   Leistungsseiten (.lst-pfad + .intro). */
.pfad + .ort { margin-top: 0; }
.ort-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .ort-grid { grid-template-columns: 1.05fr 1fr; } }

.ort-karte { position: relative; min-height: 300px; background: var(--cream-soft); }
@media (min-width: 900px) { .ort-karte { min-height: 100%; } }
.ort-karte .osm-map { height: 100%; min-height: 300px; border-radius: 0; }
/* Rechts oben, nicht links: links sitzen die Zoom-Knoepfe der Karte. */
.ort-karte-fahne { position: absolute; top: 16px; right: 16px; z-index: 500; background: rgba(248,245,238,0.94); border: 1px solid var(--line); border-radius: 100px; padding: 7px 15px; font-size: 12.5px; font-weight: 600; color: var(--forest-ink); box-shadow: var(--shadow-sm); letter-spacing: 0.02em; }

.ort-seite { padding: 34px 28px 32px; display: flex; flex-direction: column; }
@media (min-width: 768px) { .ort-seite { padding: 30px 42px 28px; } }

.ort-status { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; background: var(--cream-soft); border: 1px solid var(--line); border-radius: 100px; padding: 7px 15px 7px 12px; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.ort-status-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-light); flex-shrink: 0; }
.ort-status.offen { background: rgba(122, 149, 130, 0.14); border-color: rgba(59, 107, 78, 0.28); color: #3B6B4E; }
.ort-status.offen .ort-status-punkt { background: #4B8A61; box-shadow: 0 0 0 4px rgba(75, 138, 97, 0.18); }

.ort-name { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(26px, 4.5vw, 34px); line-height: 1.15; color: var(--forest-ink); letter-spacing: -0.02em; margin-bottom: 6px; }
.ort-rolle { font-size: 13.5px; color: var(--gold); font-family: 'Fraunces', serif; font-style: italic; margin-bottom: 14px; }

.ort-zeilen { display: grid; gap: 0; margin-bottom: 16px; }
.ort-zeile { display: flex; gap: 14px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ort-zeile:last-child { border-bottom: 0; }
.ort-zeile-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--cream-soft); display: flex; align-items: center; justify-content: center; color: var(--forest); margin-top: 1px; }
.ort-zeile-ic svg { width: 17px; height: 17px; }
/* Die drei Teile stehen untereinander: Beschriftung, Wert, Zusatz.
   Ohne block laufen sie als spans in eine Zeile. */
.ort-zeile-tx { min-width: 0; display: block; }
.ort-zeile-lab { display: block; font-size: 11px; line-height: 1.3; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); margin-bottom: 2px; }
.ort-zeile-val { display: block; font-size: 16px; color: var(--forest-ink); line-height: 1.5; }
.ort-zeile-val a { color: var(--forest-ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.ort-zeile-val a:hover { color: var(--forest); border-bottom-color: var(--forest); }
.ort-zeile-zusatz { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   ANFAHRT-KNOEPFE
   Auf der Startseite sind das kleine Textlinks mit 13 Pixel Symbol. Hier haben
   wir Platz, deshalb echte Knoepfe.

   Zur Symbolgroesse: Das Google-Zeichen fuellt sein Feld bis an den Rand aus,
   das Apple-Zeichen laesst ringsum Luft. Bei gleicher Zahl wirkt Apple daher
   kleiner. Deshalb steht Google auf 22 und Apple auf 26 Pixel. Optisch sind
   sie damit gleich gross. Wer die Werte anfasst, muss den Abstand mitdenken.
   --------------------------------------------------------------------------- */
.route { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 480px) { .route { grid-template-columns: 1fr 1fr; } }
.route-btn { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 60px; padding: 14px 20px; background: var(--white); border: 1.5px solid var(--line-strong); border-radius: 16px; text-decoration: none; color: var(--forest-ink); font-size: 15.5px; font-weight: 600; box-shadow: var(--shadow-sm); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); }
.route-btn:hover { transform: translateY(-2px); border-color: var(--sage); }
.route-btn-ic { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
.route-btn-google svg { width: 22px; height: 22px; }
.route-btn-apple  svg { width: 26px; height: 26px; }
.route-btn-tx { display: flex; flex-direction: column; line-height: 1.2; }
.route-btn-tx b { font-weight: 600; font-size: 15.5px; }
.route-btn-tx span { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .route-btn:hover { transform: none; } }

/* ---------------------------------------------------------------------------
   SPRECHZEITEN
   Vollstaendige Woche ohne Umschalter. Der heutige Tag ist hervorgehoben.
   --------------------------------------------------------------------------- */
/* Karte und Sprechzeiten stehen auf gleicher Hoehe. Deshalb stretch statt
   start, und die Tafel verteilt ihre Zeilen ueber die volle Hoehe. */
.zeiten { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 860px) { .zeiten { grid-template-columns: 1.35fr 1fr; gap: 22px; align-items: stretch; } }

.zeiten-tafel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.zeiten-tag { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 22px; border-bottom: 1px solid var(--line); flex: 1 1 auto; }
.zeiten-tag:last-child { border-bottom: 0; }
/* Groesser als die Vorlage: Sprechzeiten sind die meistgesuchte Angabe der
   Seite und werden oft von aelteren Augen gelesen. */
.zeiten-tag-name { font-size: 17px; font-weight: 500; color: var(--text); }
.zeiten-tag-wert { font-size: 17px; color: var(--forest-ink); font-variant-numeric: tabular-nums; text-align: right; }

/* Der heutige Tag traegt denselben Streifen und dieselbe Flaeche wie im
   Oeffnungszeiten-Widget der Startseite (.schedule-day.today): Flaeche
   sage-mist, Marke forest. Durchgehend, nicht auslaufend. */
.zeiten-tag.heute { background: var(--sage-mist); position: relative; }
.zeiten-tag.heute::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--forest); }
.zeiten-tag.heute .zeiten-tag-name { font-weight: 700; color: var(--forest); }
.zeiten-tag.heute .zeiten-tag-wert { color: var(--ink); font-weight: 600; }
.zeiten-tag.heute .zeiten-tag-name::after { content: "heute"; display: inline-block; margin-left: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--forest); vertical-align: middle; }

.zeiten-neben { display: grid; gap: 14px; align-content: stretch; }
.zeiten-karte { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px; box-shadow: var(--shadow-sm); }
.zeiten-karte h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; color: var(--forest-ink); margin-bottom: 8px; }
.zeiten-karte p { font-size: 14.5px; line-height: 1.68; color: var(--muted); }
.zeiten-karte p + p { margin-top: 10px; }
.zeiten-karte strong { color: var(--text); font-weight: 600; }
.zeiten-naechste { background: linear-gradient(160deg, var(--forest) 0%, var(--forest-ink) 100%); color: var(--cream); border: 0; }
.zeiten-naechste h3 { color: var(--gold-soft); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-family: 'Inter', sans-serif; margin-bottom: 10px; }
.zeiten-naechste p { color: rgba(248,245,238,0.78); }
.zeiten-naechste .gross { font-family: 'Fraunces', serif; font-size: clamp(22px, 4vw, 27px); font-weight: 400; color: var(--cream); line-height: 1.25; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------------------
   Textbausteine
   --------------------------------------------------------------------------- */
.tafel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow-sm); }
@media (min-width: 768px) { .tafel { padding: 38px 40px; } }
.tafel p { font-size: 16.5px; line-height: 1.78; color: var(--text); }
.tafel p + p { margin-top: 14px; }
.tafel strong { color: var(--forest-ink); font-weight: 600; }

.karten { display: grid; gap: 12px; }
@media (min-width: 700px) { .karten { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .karten-3 { grid-template-columns: repeat(3, 1fr); } }
.karte { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
a.karte:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.karte h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 19px; color: var(--forest-ink); margin-bottom: 6px; }
.karte p { font-size: 14.5px; line-height: 1.62; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { a.karte:hover { transform: none; } }

/* Der jeweils andere Standort */
.anderer { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; justify-content: space-between; background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 28px; }
.anderer-tx h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 20px; color: var(--forest-ink); margin-bottom: 5px; }
.anderer-tx p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* Bewertungen, kompakte Fassung */
.bew { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 26px; box-shadow: var(--shadow-sm); text-align: center; }
@media (min-width: 768px) { .bew { padding: 40px 40px; } }
.bew-note { font-family: 'Fraunces', serif; font-size: clamp(44px, 9vw, 62px); font-weight: 300; color: var(--forest-ink); line-height: 1; letter-spacing: -0.03em; }
.bew-sterne { font-size: 22px; letter-spacing: 4px; color: var(--gold); margin: 12px 0 8px; }
.bew-anzahl { font-size: 14.5px; color: var(--muted); }
.bew-hinweis { font-size: 13.5px; color: var(--muted-light); margin-top: 14px; line-height: 1.6; max-width: 520px; margin-left: auto; margin-right: auto; }
.bew-link { display: inline-flex; align-items: center; min-height: 48px; margin-top: 18px; color: var(--forest); font-size: 15px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.bew-link:hover { border-bottom-color: var(--forest); }

/* Abschluss */
.final { margin-top: 56px; background: linear-gradient(135deg, var(--cream-soft) 0%, var(--white) 100%); border: 1px solid var(--line); border-radius: 28px; padding: 44px 28px; text-align: center; box-shadow: var(--shadow-sm); }
.final-eyebrow { font-family: 'Fraunces', serif; font-style: italic; color: var(--gold); font-size: 15px; margin-bottom: 8px; }
.final h2 { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(24px, 4.8vw, 32px); line-height: 1.18; letter-spacing: -0.02em; color: var(--forest-ink); margin-bottom: 12px; }
.final p { font-size: 15.5px; color: var(--muted); max-width: 560px; margin: 0 auto 24px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 15px 34px; border-radius: 100px; background: var(--forest); color: var(--cream); font-size: 16px; font-weight: 600; text-decoration: none; box-shadow: 0 8px 28px rgba(42, 74, 56, 0.2); transition: background 0.35s var(--ease), transform 0.35s var(--ease); }
.cta:hover { background: var(--forest-mist); transform: translateY(-2px); }
.cta-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 15px 30px; border-radius: 100px; background: transparent; color: var(--forest); border: 1.5px solid var(--forest); font-size: 15.5px; font-weight: 600; text-decoration: none; transition: background 0.35s var(--ease), color 0.35s var(--ease); }
.cta-ghost:hover { background: var(--forest); color: var(--cream); }
@media (prefers-reduced-motion: reduce) { .cta:hover { transform: none; } }

/* Notfall
   Hier standen bis zum 12.08.2026 die Regeln des frueheren kleinen
   Notfall-Hinweises (eine Zeile mit zwei Verweisen). Seit dem 11.08. steht an
   der Stelle der vollstaendige Notfallblock der Startseite, der seine Regeln
   aus notfall-uebernahme.css bekommt. Die alten Regeln trafen ihn weiter, weil
   er dieselbe Klasse traegt: .notfall a { display: inline-flex } presste die
   Notrufkarten auf dem Handy in drei schmale Saeulen mit gebrochenen Woertern.
   Deshalb sind sie entfernt. */

@media (max-width: 640px) {
  .head-band { padding: 104px 20px 40px; }
  .final { padding: 34px 20px; border-radius: 22px; }
  .cta, .cta-ghost { width: 100%; }
  .ort { border-radius: 20px; }
  .ort-seite { padding: 28px 20px 26px; }
  /* Auf schmalen Bildschirmen legt sich die Fahne ueber das Kartenfenster.
     Die Adresse steht ohnehin direkt darunter, also weg damit. */
  .ort-karte-fahne { display: none; }
  .anderer { padding: 22px 20px; }
}

/* ---------------------------------------------------------------------------
   Fussbereich, 1:1 aus den Leistungsseiten
   --------------------------------------------------------------------------- */
footer { background: var(--forest-ink); color: var(--cream); padding: 64px 48px 28px; position: relative; overflow: hidden; margin-top: 80px; }
footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.5; }
footer::after { content:''; position:absolute; bottom:-100px; left:50%; transform: translateX(-50%); width: 600px; height: 300px; background: radial-gradient(ellipse, rgba(201,173,119,0.12) 0%, transparent 70%); pointer-events: none; }
.footer-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 48px; margin-bottom: 26px; position: relative; z-index: 1; }
.footer-brand h4 { font-family: 'Fraunces', serif; font-variation-settings: "opsz" 144, "SOFT" 50; font-size: 29px; font-weight: 400; margin-bottom: 14px; line-height: 1.3; color: var(--cream); background: linear-gradient(108deg, var(--cream) 0%, var(--cream) 35%, rgba(201, 173, 119, 1) 50%, var(--cream) 65%, var(--cream) 100%); background-size: 250% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: brandShimmer 2.8s linear infinite alternate; }
@keyframes brandShimmer { 0% { background-position: 0% 0; } 100% { background-position: 100% 0; } }
.footer-brand p { font-size: 14px; line-height: 1.7; color: rgba(248,245,238,0.55); max-width: 340px; margin-bottom: 26px; }
.footer-locations { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 380px; }
.footer-loc h6 { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 8px; }
.footer-loc p { font-size: 13px; color: rgba(248,245,238,0.75); line-height: 1.4; margin-bottom: 1px; max-width: none; }
footer .footer-loc, footer .footer-col { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: center center; }
footer .footer-loc:hover, footer .footer-col:hover { transform: scale(1.08); }
footer .footer-brand .brand-head { display: inline-block; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: center center; }
footer .footer-brand .brand-head:hover { transform: scale(1.08); }
.footer-loc a { color: rgba(248,245,238,0.75); text-decoration: none; }
.footer-loc a:hover { color: var(--cream); }
.footer-col h5 { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 20px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 12px; }
.footer-col a { color: rgba(248,245,238,0.7); text-decoration: none; font-size: 14px; transition: all 0.6s var(--ease); }
.footer-col a:hover { color: var(--cream); padding-left: 6px; }
.footer-bottom { max-width: 1280px; margin: 0 auto; padding-top: 20px; border-top: 1px solid rgba(248,245,238,0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; position: relative; z-index: 1; }
.footer-bottom p { font-size: 13px; color: rgba(248,245,238,0.45); }
.footer-bottom p:last-child { color: var(--gold-soft); font-style: italic; font-family: 'Fraunces', serif; }
@media (max-width: 968px) {
  footer { padding: 48px 24px 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}
/* Die Karriere-Spalte entfaellt auf dem Handy, genau wie auf der Startseite.
   Stand bis zum 12.08.2026 in notfall-uebernahme.css, gehoert aber hierher. */
@media (max-width: 768px) {
  .footer-col-karriere { display: none; }
}

/* ===========================================================================
   TIEFE UND BEDIENUNG                                    11.08.2026 (Dirk)

   Zwei Anmerkungen aus der Abnahme: die Seite wirkte flach, und der weiche
   Hub beim Zeigen fehlte, den wir am 08.08. fuer die ganze Seite eingefuehrt
   haben (assets/hover.css). Beides wird hier nachgezogen.

   Die Schattenstaffel ist dieselbe wie in depth-shadows.css: eine harte
   Nahkante, eine mittlere Ebene, ein weiter weicher Abfall. Erst die dritte
   Stufe macht den Unterschied zwischen "Kasten auf Papier" und "Karte, die
   ueber der Flaeche liegt".

   Der Hub betraegt drei Pixel und die Kurve ist dieselbe wie ueberall sonst.
   Geraete ohne Mauszeiger sind ausgenommen, sonst bliebe der Zustand nach dem
   Antippen haengen.
   =========================================================================== */

.ort,
.zeiten-tafel,
.zeiten-karte,
.tafel,
.karte,
.bew,
.anderer,
.final {
  box-shadow: 0 2px 4px rgba(0,0,0,0.04),
              0 12px 24px -6px rgba(28,49,37,0.14),
              0 32px 56px -16px rgba(28,49,37,0.24);
}

.karte,
.route-btn,
.anderer,
.zeiten-karte {
  transition: transform 0.4s var(--ease), box-shadow 0.55s var(--ease), border-color 0.4s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  html body a.karte:hover,
  html body .route-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05),
                0 18px 36px -8px rgba(28,49,37,0.18),
                0 48px 80px -20px rgba(28,49,37,0.32);
  }
  html body .route-btn:hover { border-color: var(--sage); }

  /* Der Kasten mit dem anderen Standort ist selbst nicht anklickbar, er hebt
     sich aber mit, wenn man ihn ansteuert. Sonst wirkt der Knopf darin wie
     ein Fremdkoerper. */
  html body .anderer:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05),
                0 16px 32px -8px rgba(28,49,37,0.16),
                0 40px 70px -18px rgba(28,49,37,0.28);
  }

  html body .bew-link,
  html body .zeiten-karte a { transition: border-color 0.4s var(--ease), color 0.4s var(--ease); }

  html body a.karte:active,
  html body .route-btn:active { transform: translateY(0); }
}

/* ---------------------------------------------------------------------------
   GESPIEGELTE ANORDNUNG
   Sömmerda zeigt die Karte links, Kölleda rechts. Zwei Gruende: die Seiten
   sind auf den ersten Blick auseinanderzuhalten, und wer beide nacheinander
   ansieht, merkt sofort, dass er die Seite gewechselt hat.
   Auf dem Handy stapelt sich beides ohnehin, dort bleibt die Karte oben.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .ort-gespiegelt .ort-grid { grid-template-columns: 1fr 1.05fr; }
  .ort-gespiegelt .ort-karte { order: 2; }
  .ort-gespiegelt .ort-seite { order: 1; }
}

/* Der Reliefhintergrund liegt als feste Ebene hinter der Seite. Damit er
   sichtbar wird, muessen die hellen Flaechen durchlassen. Weisse Karten
   bleiben deckend, sonst leidet die Lesbarkeit. Gleiche Regel wie in
   relief.css fuer die Startseite. */
body:has(.px-hintergrund) { background: transparent; }
body:has(.px-hintergrund) .head-band { background: linear-gradient(180deg, rgba(248,245,238,0.82) 0%, rgba(242,237,225,0.86) 100%); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html body a.karte:hover,
  html body .route-btn:hover,
  html body .anderer:hover { transform: none; }
}

/* ===========================================================================
   NOTDIENST-APOTHEKEN                                     11.08.2026
   Je Standort ein eigener Plan: Sömmerda liest notapotheke-fallback.json,
   Kölleda notapotheke-koelleda.json. Gleiche Struktur, andere Adressen.
   Die heute zustaendige Apotheke steht gross, die kommenden Tage darunter
   in einer Liste, die man aufklappt.
   =========================================================================== */
.apo { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 12px 24px -6px rgba(28,49,37,0.14), 0 32px 56px -16px rgba(28,49,37,0.24);
  overflow: hidden; }
.apo-heute { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 30px 26px; background: linear-gradient(160deg, var(--forest) 0%, var(--forest-ink) 100%); color: var(--cream); }
@media (min-width: 768px) { .apo-heute { padding: 34px 40px; } }
.apo-lab { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 6px; }
.apo-name { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(24px, 4.4vw, 32px); line-height: 1.16; letter-spacing: -0.02em; color: var(--cream); }
.apo-adr { font-size: 15px; color: rgba(248,245,238,0.78); margin-top: 8px; line-height: 1.6; }
.apo-tel { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; margin-top: 12px; color: var(--cream); font-family: 'Fraunces', serif; font-size: 19px; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(201,173,119,0.5); }
.apo-tel:hover { color: var(--gold-soft); border-bottom-color: var(--gold-soft); }
.apo-zeit { font-size: 13.5px; color: rgba(248,245,238,0.62); margin-top: 10px; }

.apo-liste { list-style: none; margin: 0; padding: 0; }
.apo-tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 13px 26px; border-bottom: 1px solid var(--line); font-size: 15px; }
@media (min-width: 768px) { .apo-tag { padding: 13px 40px; } }
.apo-tag:last-child { border-bottom: 0; }
.apo-tag-datum { font-weight: 600; color: var(--forest-ink); min-width: 108px; font-variant-numeric: tabular-nums; }
.apo-tag-name { color: var(--text); }
.apo-tag-ort { color: var(--muted); font-size: 14px; }
.apo-tag a { color: var(--forest); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.apo-tag a:hover { border-bottom-color: var(--forest); }

.apo-mehr { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 56px;
  background: var(--cream-soft); border: 0; border-top: 1px solid var(--line); cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--forest); transition: background 0.4s var(--ease); }
.apo-mehr:hover { background: var(--cream-deep); }
.apo-mehr svg { width: 18px; height: 18px; transition: transform 0.4s var(--ease); }
.apo.offen .apo-mehr svg { transform: rotate(180deg); }
.apo-fuss { padding: 15px 26px; background: var(--cream-soft); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); line-height: 1.6; }
@media (min-width: 768px) { .apo-fuss { padding: 15px 40px; } }
.apo-fuss a { color: var(--forest); }

/* Online-Service am Standort. Die Kacheln tragen ein Symbol, damit sie sich
   von den Leistungskacheln unterscheiden, und liegen wie alles Klickbare mit
   drei Pixeln Hub ueber der Flaeche. */
.karte-service { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.karte-ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--cream-soft); color: var(--forest); margin-bottom: 14px; transition: background 0.45s var(--ease); }
.karte-ic svg { width: 22px; height: 22px; }
.karte-service:hover .karte-ic { background: var(--sage-mist); }
.karte-service h3 { margin-bottom: 6px; }
.service-hinweis { margin-top: 16px; padding: 16px 20px; background: var(--cream-soft); border: 1px solid var(--line); border-radius: 14px; font-size: 13.5px; line-height: 1.65; color: var(--muted); text-align: center; }

/* ===========================================================================
   ANFASSEN WIE AUF DER STARTSEITE                      11.08.2026 (Dirk)
   Der Effekt der externen Verweise dort (.route-alt-link): die Flaeche
   wechselt weich auf sage-mist, Rahmen und Schrift auf forest, das Symbol
   geht von 0,75 auf volle Deckkraft, dazu ein Pixel Hub. Langsam, nicht
   sprunghaft. Genau dieser Effekt gilt hier fuer alles Klickbare.
   =========================================================================== */
.route-btn, a.karte, .anderer, .bew-link, .zeiten-karte a, .notfall-number, .notfall-pharmacy {
  transition: background-color 0.65s var(--ease),
              border-color 0.65s var(--ease),
              color 0.65s var(--ease),
              box-shadow 0.65s var(--ease),
              transform 0.55s var(--ease);
}
.route-btn svg, a.karte svg, .notfall-number svg { transition: opacity 0.65s var(--ease), transform 0.55s var(--ease); }
.route-btn svg { opacity: 0.78; }

@media (hover: hover) and (pointer: fine) {
  html body .route-btn:hover,
  html body a.karte:hover,
  html body .anderer:hover {
    background: var(--sage-mist);
    border-color: var(--forest);
    color: var(--forest);
    transform: translateY(-1px);
  }
  html body .route-btn:hover svg,
  html body a.karte:hover svg { opacity: 1; }
  html body .route-btn:hover .route-btn-tx span { color: var(--forest); }
  html body a.karte:hover h3 { color: var(--forest); }
  html body .karte-service:hover .karte-ic { background: var(--white); }
  html body .bew-link:hover,
  html body .zeiten-karte a:hover { color: var(--forest); border-bottom-color: var(--forest); }
}
@media (prefers-reduced-motion: reduce) {
  html body .route-btn:hover, html body a.karte:hover, html body .anderer:hover { transform: none; }
}

/* Die Notfall-Ueberschrift hat zwei Fassungen, eine fuer breite Bildschirme
   und eine kuerzere fuers Handy. Die Umschaltung steht auf der Startseite in
   einem Style-Block ohne Notfall-Bezug und war deshalb bei der Uebernahme
   nicht dabei. Ohne sie standen beide Fassungen nebeneinander. */
.notfall-title .title-desktop { display: inline; }
.notfall-title .title-mobile  { display: none; }
@media (max-width: 768px) {
  .notfall-title .title-desktop { display: none; }
  .notfall-title .title-mobile  { display: inline; }
}


/* ==========================================================================
   Sprechzeiten in zwei Spalten, 12.08.2026

   Vorher standen Vormittag und Nachmittag in einer Zeile hintereinander,
   getrennt durch einen Punkt. Auf den Screenshots war nicht zu erkennen,
   welche Zeit zu welchem Tagesabschnitt gehoert. Jetzt hat jeder Abschnitt
   eine eigene Spalte mit Ueberschrift.

   Auf schmalen Geraeten stehen die beiden Zeiten untereinander und tragen
   ihre Beschriftung selbst, weil drei Spalten dort zu eng waeren.
   ========================================================================== */
.zeiten-tafel { --zeiten-raster: minmax(104px, 1.05fr) 1fr 1fr; }

.zeiten-kopf,
.zeiten-tag {
  display: grid;
  grid-template-columns: var(--zeiten-raster);
  align-items: center;
  gap: 14px;
}

.zeiten-kopf {
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
}
.zeiten-kopf span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.zeiten-kopf .zeiten-spalte { text-align: right; }

.zeiten-tag-leer { color: var(--muted-light); }

/* Der Hinweis steht unter beiden Spalten und damit ausserhalb des Rasters.
   So bleiben Tafel und Karten daneben weiterhin gleich hoch. */
.zeiten-hinweis {
  margin-top: 18px;
  padding: 15px 20px;
  background: var(--sage-mist);
  border-radius: var(--radius);
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--muted);
}
.zeiten-hinweis strong { color: var(--text); font-weight: 600; }

@media (max-width: 620px) {
  .zeiten-kopf { display: none; }
  .zeiten-tag { grid-template-columns: 1fr; gap: 3px; padding: 13px 18px; }
  .zeiten-tag-wert { text-align: left; font-size: 15.5px; }
  .zeiten-tag-wert::before {
    content: attr(data-teil) " ";
    color: var(--muted);
    font-size: 12.5px;
    letter-spacing: 0.04em;
  }
}


/* ==========================================================================
   Tiefe und Effekte der Startseite, 13.08.2026

   Grundlage ist der vollstaendige Abgleich beider Seiten. Begruendung und
   Messwerte stehen in docs/STANDORTSEITEN.md.
   ========================================================================== */

/* 1 Die Zeichenflaeche der Seite. Der body ist wegen des Reliefs
      durchsichtig, ohne diese Zeile faellt der Browser auf reines Weiss
      zurueck. Die Startseite hat dort Creme. */
html { background: var(--cream); }

/* 2 Farbflecken hinter dem Relief, wie auf der Startseite. Ohne Bewegung,
      weil die Startseite ihre Drift-Animationen auf Null gesetzt hat. */
.ambient-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; animation: none; }
.ambient-orb.one { width: 600px; height: 600px; background: var(--sage-pale); top: -10%; left: -15%; }
.ambient-orb.two { width: 500px; height: 500px; background: var(--gold-soft); top: 40%; right: -10%; opacity: 0.2; }
.ambient-orb.three { width: 450px; height: 450px; background: var(--sage-mist); bottom: -10%; left: 30%; }

/* Lichtkreis am Mauszeiger, Werte aus der Startseite uebernommen. */
.cursor-glow {
  position: fixed; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(122,149,130,0.18) 0%, transparent 65%);
  pointer-events: none; z-index: 1; transform: translate(-50%,-50%);
  transition: opacity 0.6s var(--ease); opacity: 0; mix-blend-mode: multiply;
}
.cursor-glow.active { opacity: 1; }

/* 4 Das Symbolfeld kippt beim Zeigen, genau wie .info-icon der Startseite:
      Flaeche in 1.2s, Symbol in 0.7s, zwei verschiedene Kurven. */
.ort-zeile-ic {
  transition: background 1.2s cubic-bezier(0.25,0.46,0.45,0.94),
              color 0.7s cubic-bezier(0.4,0,0.2,1);
}
.ort-zeile:hover .ort-zeile-ic {
  background: var(--forest);
  color: var(--cream);
}

/* 5 Der Standortblock hebt sich beim Zeigen, wie .standort-card. */
.ort {
  transition: box-shadow 420ms ease, transform 420ms ease;
}
.ort:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05),
              0 18px 36px -8px rgba(28,49,37,0.18),
              0 48px 80px -20px rgba(28,49,37,0.32);
}

/* 6 Die spaetere Regel faerbte das Symbolfeld beim Zeigen weiss und drehte
      damit den gewollten Effekt um. Zurueck auf gruen. */
html body .karte-service:hover .karte-ic { background: var(--sage-mist); }

@media (prefers-reduced-motion: reduce) {
  .ambient-orb, .cursor-glow { display: none !important; }
  .ort:hover { transform: none; }
}

/* Die Wolken stehen still, genau wie auf der Startseite.
   notfall-uebernahme.css wird nach dieser Datei geladen und bringt die
   bewegten Kurven drift1 bis drift3 mit. Auf der Startseite sind dieselben
   Kurven weiter unten auf Null gesetzt, die Flecken bewegen sich dort nicht.
   Diese Auswahl ist gewichtiger und gewinnt unabhaengig von der Reihenfolge. */
html body .ambient-orb.one,
html body .ambient-orb.two,
html body .ambient-orb.three { animation: none; }

/* B5 (14.08.2026): Telefon- und E-Mail-Verweise im Standortblock waren
   nur 21px hoch (gemessen 122x21 und 234x21). Unsichtbares Tastfeld nach
   Hausmuster (::after ohne pointer-events:none), Zeilenhoehe unveraendert.
   Die 11px-OSM-Quellenverweise in der Karte bleiben bewusst unveraendert. */
.ort-zeile-val a { position: relative; }
.ort-zeile-val a::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }