/* ============================================================
   clean.css — Stage A accessibility & polish overrides.
   Loaded AFTER custom.css. Does not touch the template's own
   files. Uses the template palette (primary #3A1916, accent
   #E25E52). Safe to remove without breaking layout.
   ============================================================ */

/* --- Respect prefers-reduced-motion (WCAG 2.3.3) ----------------
   WOW.js, animate.css and GSAP SplitText hide content first, then
   reveal it via motion. For users who ask for reduced motion we
   kill the motion AND force the content visible so nothing stays
   hidden behind an animation that no longer plays. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* WOW.js / animate.css elements start with visibility:hidden */
  .wow {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
  }
  /* GSAP SplitText reveals (chars/words get inline opacity:0) */
  .text-effect, .reveal,
  .text-anime-style-1, .text-anime-style-2, .text-anime-style-3,
  .text-effect *, .reveal *,
  .text-anime-style-1 *, .text-anime-style-2 *, .text-anime-style-3 * {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* --- Visible keyboard focus -----------------------------------
   The template suppresses outlines; restore a clear, on-brand
   focus ring for keyboard users only (mouse clicks unaffected). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #E25E52 !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* --- Demo-mode form feedback (static preview, no backend) ----- */
.demo-note {
  margin-top: 10px;
  color: #3A1916;
  font-weight: 600;
}

/* ── Astro-ребренд: текстовый логотип + переключатель языков DE/EN ── */
.brand-text-link { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text {
  font-family: var(--accent-font, var(--default-font, sans-serif));
  font-weight: 700; font-size: 26px; letter-spacing: -0.5px;
  color: var(--primary-color); display: block;
}
.brand-sub {
  font-size: 12px; font-weight: 500; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent-color); margin-top: 2px;
}
.dark-section .brand-text, .main-footer-prime .brand-text { color: var(--white-color); }
.footer-logo-prime .brand-text { font-size: 24px; }

.header-btn-group { display: flex; align-items: center; gap: 18px; }
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; }
.lang-switch a { color: var(--primary-color); opacity: .5; text-decoration: none; }
.lang-switch a.active { opacity: 1; color: var(--accent-color); }
.lang-switch a:hover { opacity: 1; }
.lang-switch span { opacity: .35; }
@media (max-width: 991px) { .header-btn-group { gap: 12px; } .brand-text { font-size: 21px; } .brand-sub { font-size: 11px; } }

/* ── Языковое выпадающее меню (флаги + Bootstrap dropdown) ── */
.lang-dropdown { position: relative; }
.lang-current {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1.5px solid rgba(58,25,22,.16);
  border-radius: 40px; padding: 7px 14px; cursor: pointer; line-height: 1;
  font-family: var(--default-font, sans-serif); font-weight: 600; font-size: 14px;
  color: var(--primary-color); transition: border-color .25s, box-shadow .25s;
}
.lang-current:hover, .lang-current:focus-visible { border-color: var(--accent-color); }
.lang-current[aria-expanded="true"] { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(226,94,82,.12); }
.lang-flag { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.lang-code { letter-spacing: .5px; }
.lang-current .fa-chevron-down { font-size: 10px; opacity: .55; transition: transform .25s; }
.lang-current[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }

.lang-menu { position: absolute; right: 0; top: calc(100% + 12px); z-index: 1050; list-style: none; margin: 0; min-width: 184px; padding: 8px; border-radius: 16px; background: var(--white-color); box-shadow: 0 20px 46px rgba(58,25,22,.18); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.lang-dropdown.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-dropdown.open .lang-current { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(226,94,82,.12); }
.lang-dropdown.open .fa-chevron-down { transform: rotate(180deg); }
.lang-option { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; text-decoration: none; font-weight: 500; font-size: 15px; color: var(--primary-color); transition: background .2s, color .2s; }
.lang-option:hover { background: var(--secondary-color); color: var(--primary-color); }
.lang-option.active { background: var(--accent-color); color: #fff; }
.lang-option.active .lang-flag { box-shadow: 0 0 0 1px rgba(255,255,255,.45); }
.lang-option .lang-check { margin-left: auto; font-size: 11px; opacity: .9; }
@media (max-width: 991px) { .lang-current { padding: 6px 11px; font-size: 13px; } }

/* ── Шапка прозрачная поверх тёмного героя: логотип и переключатель — белые ── */
.main-header .brand-text { color: var(--white-color); }
.main-header .lang-current { color: var(--white-color); border-color: rgba(255,255,255,.55); }
.main-header .lang-current:hover,
.main-header .lang-current:focus-visible,
.main-header .lang-dropdown.open .lang-current { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.16); }
.main-header .lang-current .fa-chevron-down { opacity: .9; }

/* ── Ratgeber (статьи) ── */
.ratgeber-list { padding-top: 90px; }
.ratgeber-list .section-title { margin-bottom: 50px; }
.ratgeber-meta { font-size: 13px; font-weight: 600; color: var(--accent-color); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 10px; }
.ratgeber-excerpt { color: var(--text-color); margin: 0 0 18px; font-size: 15px; line-height: 1.6; }
.ratgeber-back { text-align: right; }
.page-single-post .post-entry > :first-child { margin-top: 0; }
@media (max-width: 991px){ .ratgeber-back { text-align: left; margin-top: 14px; } }

/* ── Текстовые страницы (Leistungen, Team, Kontakt …) ── */
.page-content-section { padding: 100px 0; }
.page-entry ul, .post-entry ul { margin-bottom: 22px; }
@media (max-width: 991px){ .page-content-section { padding: 60px 0; } }

/* Стандартная типографическая схема заголовков ВНУТРИ контента.
   H1 — только в шапке страницы; внутри текста h2 заметно меньше (Petona давал 52/40px — «как H1»). */
.post-entry h2 { font-size: 24px; font-weight: 700; line-height: 1.3;  margin: 34px 0 12px; }
.post-entry h3 { font-size: 19px; font-weight: 700; line-height: 1.35; margin: 26px 0 8px; }
.post-entry h4 { font-size: 17px; font-weight: 600; line-height: 1.4;  margin: 20px 0 6px; }
.post-entry > :first-child { margin-top: 0; }
@media (max-width: 991px) { .post-entry h2 { font-size: 22px; } .post-entry h3 { font-size: 18px; } }

/* ── Hero: реальное фото клиента (AVIF+WebP) вместо демо-стока ── */
.hero-prime {
  background-image: url('/images/hero-tierarztpraxis-karlsruhe-durlach.webp') !important;
  background-image: image-set(
    url('/images/hero-tierarztpraxis-karlsruhe-durlach.avif') type('image/avif'),
    url('/images/hero-tierarztpraxis-karlsruhe-durlach.webp') type('image/webp')) !important;
  background-position: center center !important;
  background-size: cover !important;
}