/*
Theme Name: Famulatur Karte (Minimal)
Description: Minimal-Theme für eine einzige Kartenseite. Styling für Leaflet-Popups, Marker und Layout.
Version: 2.1
Author: KSC, OpenAI
*/

:root {
  --space-side: clamp(16px, 8vw, 120px);
  --font-base: 18px;
  --accent-red: #d32f2f;
}

html { font-size: 100%; }
body {
  margin: 0;
  padding: 0;
  font-family: 'Avenir Next', sans-serif;
  font-size: var(--font-base);
  color: #111;
  background: #fff;
}

/* Titel größer, links bündig mit Karte (gleicher Seitenrand) */
h1 {
  font-size: clamp(2.8rem, 4.2vw, 3.5rem);
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
}

/* Hinweis über der Karte */
h3 {
  color: var(--accent-red);
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
}

/* Hinweis über der Karte */
h4 {
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
}

h4 a { color: inherit; text-decoration: none; font-weight: 700}
h4 a:hover { color: var(--accent-red); }

/* Wrapper mit adaptivem Seitenrand */
.page-wrap {
  padding-left: var(--space-side);
  padding-right: var(--space-side);
}

/* Karte volle Breite im Wrapper */
#map { width: 100%; height: 60vh; border-radius: 8px; }

/* Popup-Typo: Adresse so groß wie Telefon */
.leaflet-popup-content .popup-name strong { font-size: 1.125rem; font-weight: 600; display: block; margin-bottom: .25rem; }
.leaflet-popup-content .popup-address,
.leaflet-popup-content .popup-contact { font-size: 1rem; line-height: 1.45; }
.leaflet-popup-content .popup-web a,
.leaflet-popup-content .popup-mail a { text-decoration: underline; word-break: break-word; }

/* Moderner roter F-Marker (divIcon) */
.marker-f { 
  background: transparent;
}
.marker-f .marker-f-inner {
  background-color: var(--accent-red);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* Footer-Menü: zentriert, gleiche Größe wie Fließtext, ohne Unterstreichung, Hover rot */
footer {
  margin-top: 1.25rem;
  padding: 2rem var(--space-side);
  font-size: 1rem;
  color: #555;
  border-top: 1px solid rgba(0,0,0,.06);
  text-align: center;
}
footer .menu { list-style: none; padding: 0; margin: 0; display: inline-flex; gap: 1.25rem; }
footer .menu a { color: inherit; text-decoration: none; }
footer .menu a:hover { color: var(--accent-red); }

@media (max-width: 768px) {
  h1 { font-size: clamp(2rem, 6vw, 2.6rem); }
  #map { height: 60vh; }
}