/* Heilpraktikerschule Ellinghaus – gemeinsame Styles.
   Die Gestaltung der einzelnen Elemente steht direkt im HTML (wie im Design). */

x-if, x-variant { display: contents; }
[hidden] { display: none !important; }

/* Header: Desktop- und Mobil-Navigation */
.dc-narrow { display: none; }
@media (max-width: 999.98px) {
  .dc-wide { display: none; }
  .dc-narrow { display: contents; }
}
@media (min-width: 1000px) {
  x-if[data-if="showMobileMenu"] { display: none !important; }
}
/* Schmale Handys: Logo etwas kleiner, damit der Menü-Button ins Bild passt */
@media (max-width: 600px) {
  /* lange deutsche Wörter in Überschriften sauber trennen */
  h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
}
@media (max-width: 480px) {
  header > div:first-child { padding: 0 16px !important; gap: 12px !important; }
  header > div:first-child > a img { height: 40px !important; }
}
@media (max-width: 400px) {
  footer img[style*="height:60px"] { max-width: 100%; height: auto !important; }
  h1 span[style*="nowrap"] { white-space: normal !important; }
}

/* Bildplätze ohne Foto: ein Bild mit gleichem Namen in /bilder ersetzt den Platzhalter automatisch */
.slot-empty {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; overflow: hidden;
  background: linear-gradient(135deg, #EDE5D8, #E2D6C4); color: #8D1A15;
}
.slot-empty img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot-initials { font-family: Lora, Georgia, serif; font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: .04em; opacity: .7; }

.form-msg { margin: 0; padding: 12px 16px; border-radius: 12px; background: #F1DEDA; color: #6E1410; font-size: 16px; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Hover-Zustände aus dem Design */
.hv1:hover,.hv1:focus-visible{background:#EDE5D8 !important;color:#8D1A15 !important}
.hv2:hover,.hv2:focus-visible{background:#6E1410 !important;color:#F8F5EE !important}
.hv3:hover,.hv3:focus-visible{border-bottom-color:#E8C4BE !important;color:#FFFFFF !important}
.hv4:hover,.hv4:focus-visible{color:#FFFFFF !important;text-decoration:underline !important}
.hv5:hover,.hv5:focus-visible{background:#EDE5D8 !important;color:#6E1410 !important}
.hv6:hover,.hv6:focus-visible{background:#E2D8C7 !important;color:#8D1A15 !important}
.hv7:hover,.hv7:focus-visible{color:#8D1A15 !important;background:#F1ECE2 !important}
.hv8:hover,.hv8:focus-visible{background:#5E100C !important;color:#F8F5EE !important}
.hv9:hover,.hv9:focus-visible{background:#EBCFC9 !important;color:#6E1410 !important}
.hv10:hover,.hv10:focus-visible{background:#F8F5EE !important;color:#8D1A15 !important;border-color:#F8F5EE !important}
.hv11:hover,.hv11:focus-visible{text-decoration:underline !important;color:#FFFFFF !important}
.hv12:hover,.hv12:focus-visible{color:#8D1A15 !important;background:#E5DCCD !important}
.hv13:hover,.hv13:focus-visible{background:#F1DEDA !important}
.hv14:hover,.hv14:focus-visible{color:#8D1A15 !important}
.hv15:hover,.hv15:focus-visible{background:#6E1410 !important}
.hv16:hover,.hv16:focus-visible{background:#F1DEDA !important;color:#8D1A15 !important}
.hv17:hover,.hv17:focus-visible{background:#F1DEDA !important;color:#303830 !important}
.hv18:hover,.hv18:focus-visible{background:#F1ECE2 !important;color:#8D1A15 !important}
.hv19:hover,.hv19:focus-visible{background:#E2D8C7 !important}