/* Praxis Siegmann: einheitliche Icons aus der bereitgestellten FontAwesome-TTF. */
@font-face {
  font-family: "PraxisFontAwesome";
  src: url("../assets/fonts/fontawesome-praxis.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

.praxis-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1em;
  flex-shrink: 0;
  line-height: 1;
  color: inherit;
  text-align: center;
  vertical-align: middle;
}

.praxis-icon::before {
  display: inline-block;
  font-family: "PraxisFontAwesome";
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  font-synthesis: none;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-spacing: normal;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pi-phone::before { content: "\f095"; }
.pi-print::before { content: "\f02f"; }
.pi-envelope::before { content: "\f0e0"; }
.pi-location::before { content: "\f041"; }
.pi-calendar::before { content: "\f073"; }
.pi-calendar-empty::before { content: "\f133"; }
.pi-desktop::before { content: "\f108"; }
.pi-user-md::before { content: "\f0f0"; }
.pi-instagram::before { content: "\f16d"; }
.pi-menu::before { content: "\f0c9"; }
.pi-close::before { content: "\f00d"; }
.pi-plus::before { content: "\f067"; }
.pi-minus::before { content: "\f068"; }
.pi-arrow-left::before { content: "\f060"; }
.pi-arrow-right::before { content: "\f061"; }
.pi-chevron-down::before { content: "\f078"; }
.pi-zoom::before { content: "\f00e"; }
.pi-clock::before { content: "\f017"; }
.pi-news::before { content: "\f0a1"; }
.pi-question::before { content: "\f059"; }

/* Kontakt: dieselbe Größe und vererbte Farbe wie die übrigen Texte. */
.kontakt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.kontakt-icon .praxis-icon {
  width: 22px;
  font-size: 22px;
  line-height: 1;
}
.btn .praxis-icon { margin-right: .55em; }

/* Die Linkbeschriftungen bleiben an den Links, die Symbole sind dekorativ. */
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer-socials .praxis-icon {
  font-size: 32px;
  opacity: .9;
  transition: opacity .25s ease, transform .25s ease;
}
.footer-socials a:hover .praxis-icon {
  opacity: 1;
}

/* Menü: Zustand und zugängliche Beschriftung steuert weiterhin main.js. */
.nav-toggle { color: var(--color-primary, #232f5d); }
.nav-toggle .praxis-icon {
  width: 100%;
  height: 100%;
  font-size: 28px;
}
.nav-toggle:hover { color: var(--color-secondary, #9096ac); }
.nav-toggle.open .nav-icon::before { content: "\f00d"; }

/* Plus/Minus statt gedrehter Textzeichen. */
.dropdown-card summary::after { display: none; content: none; }
.dropdown-icon {
  color: var(--color-accent, #cda177);
  font-size: 1.35rem;
}
.faq-new-item.is-open .faq-new-icon { transform: none; }
.faq-new-icon { font-size: 1.35rem; }

/* Feine Linien: der senkrechte Strich dreht sich beim Öffnen sanft ins Minus. */
.praxis-icon.pi-plus,
.praxis-icon.pi-minus {
  position: relative;
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 1.1em;
}
.praxis-icon.pi-plus::before,
.praxis-icon.pi-plus::after,
.praxis-icon.pi-minus::before,
.praxis-icon.pi-minus::after {
  content: "";
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform .24s ease, opacity .24s ease;
}
.praxis-icon.pi-plus::before,
.praxis-icon.pi-minus::before {
  width: .85em;
  height: 2px;
}
.praxis-icon.pi-plus::after,
.praxis-icon.pi-minus::after {
  width: 2px;
  height: .85em;
}
.dropdown-card.active .pi-plus::after,
.faq-new-item.is-open .pi-plus::after,
[aria-expanded="true"] .pi-plus::after,
.praxis-icon.pi-minus::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* Auch die dynamisch erzeugten Vertretungs-Pfeile nutzen die TTF. */
.rep-arrow,
.rep-dropdown.active .rep-arrow {
  background: none;
  -webkit-mask: none;
  mask: none;
  height: auto;
  color: var(--color-accent, #cda177);
  line-height: 1;
}
.rep-arrow { font-size: .9rem; }

.gallery-zoom .praxis-icon { font-size: 1rem; }
.gallery-close .praxis-icon { font-size: 1.35rem; vertical-align: 0; }
.gallery-prev .praxis-icon { margin-right: .3em; }
.gallery-next .praxis-icon { margin-left: .3em; }

/* Ausschließlich die Kontaktliste erhält weiße Symbole auf Secondary-Kreisen. */
.kontakt-liste .kontakt-icon .praxis-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-secondary, #9096ac);
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  vertical-align: middle;
}
.kontakt-icon { width: 36px; height: 36px; }
.kontakt-zeile { align-items: center; }

/* Menü, Galerie, Überschriften und übrige Icons stehen ohne eigenen Hintergrund. */
.gallery-zoom,
.gallery-close {
  background: transparent;
  border-radius: 0;
}
.gallery-close { color: var(--color-primary, #232f5d); }
.gallery-zoom { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .65)); }
.btn { align-items: center; }
.btn .praxis-icon { margin-right: 0; align-self: center; }
.icon-heading {
  display: flex;
  align-items: center;
  gap: .4em;
}
.news-section .icon-heading,
.faq-new-section .icon-heading { justify-content: center; }
.heading-icon {
  margin: 0;
  font-size: .9em;
  color: inherit;
  align-self: center;
}
.heading-label { line-height: inherit; }
.gallery-controls button,
.vax-text-link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
}

/* Gewünschte Überschriftenfarben; weiße Überschriften dunkler Bereiche bleiben lesbar. */
h2,
.legal-intro h2,
.detail-card h2,
.detail-cta h2,
.detail-links-section h2 { color: var(--color-primary, #232f5d); }
.home-page .hero-text h1 { color: var(--color-primary, #232f5d); }
.home-page .hero-text > p { color: var(--color-secondary, #9096ac); }

@media (prefers-reduced-motion: reduce) {
  .footer-socials .praxis-icon { transition: none; }
  .praxis-icon.pi-plus::before,
  .praxis-icon.pi-plus::after,
  .praxis-icon.pi-minus::before,
  .praxis-icon.pi-minus::after { transition: none; }
}