/* mod_kreillerfaq – J.N. Kreiller KG
   Farben nach Styleguide 01/2025, Gestaltung klar & funktional */

.kfaq {
  --kfaq-blue: #2a6bb7;
  --kfaq-blue-dark: #1f5494;
  --kfaq-gold: #ba9a68;
  --kfaq-ink: #1f2328;
  --kfaq-muted: #6b7178;
  --kfaq-grey: #999999;
  --kfaq-line: #d9dce0;
  --kfaq-tint: #f2f5f9;
  --kfaq-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  display: grid;
  grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
  gap: 2.5rem 4.5rem;
  align-items: start;
  margin: 2rem 0 3rem;
  font-family: var(--kfaq-font);
  color: var(--kfaq-ink);
  line-height: 1.55;
}

.kfaq *,
.kfaq *::before,
.kfaq *::after { box-sizing: border-box; }

/* ---------- Seitenspalte ---------- */

.kfaq__side {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.kfaq__head { position: relative; }

.kfaq__square {
  display: block;
  width: 1rem;
  height: 1rem;
  margin-bottom: 1rem;
  background: var(--kfaq-blue);
}

.kfaq__title {
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--kfaq-ink);
}

.kfaq__title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-top: 1rem;
  background: var(--kfaq-gold);
}

.kfaq__intro {
  margin: 1rem 0 0;
  color: var(--kfaq-muted);
  font-size: 0.975rem;
}

/* Suche */

.kfaq__label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--kfaq-muted);
}

.kfaq__input {
  width: 100%;
  padding: 0.625rem 0;
  border: 0;
  border-bottom: 2px solid var(--kfaq-ink);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--kfaq-ink);
  -webkit-appearance: none;
  appearance: none;
}

.kfaq__input::placeholder { color: var(--kfaq-grey); }

.kfaq__input:focus {
  outline: none;
  border-bottom-color: var(--kfaq-blue);
}

.kfaq__input:focus-visible {
  outline: 2px solid var(--kfaq-blue);
  outline-offset: 4px;
}

/* Kategorien */

.kfaq__cats {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--kfaq-line);
}

.kfaq__cat {
  display: grid;
  grid-template-columns: 0.625rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6875rem 0;
  border: 0;
  border-bottom: 1px solid var(--kfaq-line);
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  text-align: left;
  color: var(--kfaq-ink);
  cursor: pointer;
}

.kfaq__cat-mark {
  width: 0.625rem;
  height: 0.625rem;
  border: 1.5px solid var(--kfaq-blue);
  transition: background-color 0.15s ease;
}

.kfaq__cat-count {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--kfaq-grey);
}

.kfaq__cat:hover .kfaq__cat-name { color: var(--kfaq-blue); }

.kfaq__cat[aria-pressed="true"] { font-weight: 600; }
.kfaq__cat[aria-pressed="true"] .kfaq__cat-mark { background: var(--kfaq-blue); }
.kfaq__cat[aria-pressed="true"] .kfaq__cat-count { color: var(--kfaq-ink); }

.kfaq__cat:focus-visible {
  outline: 2px solid var(--kfaq-blue);
  outline-offset: 2px;
}

/* Kontaktfeld */

.kfaq__contact {
  padding: 1.5rem;
  border-top: 3px solid var(--kfaq-gold);
  background: var(--kfaq-blue);
  color: #fff;
}

.kfaq__contact p { margin: 0; }

.kfaq__contact-title {
  font-weight: 700;
  font-size: 1.0625rem;
}

.kfaq__contact-text {
  margin-top: 0.375rem !important;
  font-size: 0.9375rem;
  opacity: 0.9;
}

.kfaq__contact-phone {
  display: block;
  margin-top: 1rem;
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: #fff !important;
  text-decoration: none;
}

.kfaq__contact-link {
  display: inline-block;
  margin-top: 0.75rem;
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 0.9375rem;
  color: #fff !important;
  text-decoration: none;
}

.kfaq__contact a:hover { border-bottom-color: var(--kfaq-gold); }
.kfaq__contact-phone:hover { color: var(--kfaq-tint) !important; }

.kfaq__contact a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---------- Fragen ---------- */

.kfaq__status {
  min-height: 1.25rem;
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--kfaq-muted);
}

.kfaq__group + .kfaq__group { margin-top: 2.75rem; }

.kfaq__group-title {
  margin: 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--kfaq-ink);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--kfaq-blue);
}

.kfaq__item { border-bottom: 1px solid var(--kfaq-line); }

.kfaq__q {
  display: grid;
  grid-template-columns: 1fr 1rem;
  align-items: center;
  gap: 1.5rem;
  padding: 1.125rem 0;
  list-style: none;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--kfaq-ink);
}

.kfaq__q::-webkit-details-marker { display: none; }
.kfaq__q::marker { content: ""; }

.kfaq__q:hover .kfaq__q-text,
.kfaq__item[open] > .kfaq__q .kfaq__q-text { color: var(--kfaq-blue); }

.kfaq__q:focus-visible {
  outline: 2px solid var(--kfaq-blue);
  outline-offset: 2px;
}

/* Plus → Minus */
.kfaq__icon {
  position: relative;
  width: 1rem;
  height: 1rem;
}

.kfaq__icon::before,
.kfaq__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  width: 100%;
  height: 2px;
  background: var(--kfaq-blue);
  transition: transform 0.2s ease;
}

.kfaq__icon::after { transform: rotate(90deg); }
.kfaq__item[open] > .kfaq__q .kfaq__icon::after { transform: rotate(0deg); }

.kfaq__a {
  max-width: 68ch;
  padding: 0 2.5rem 1.5rem 0;
  font-size: 1rem;
  color: var(--kfaq-ink);
}

.kfaq__item[open] > .kfaq__a { animation: kfaq-reveal 0.2s ease-out; }

@keyframes kfaq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.kfaq__a > :first-child { margin-top: 0; }
.kfaq__a p { margin: 0 0 0.75rem; }
.kfaq__a ul,
.kfaq__a ol { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.kfaq__a li { margin-bottom: 0.25rem; }
.kfaq__a li::marker { color: var(--kfaq-blue); }

.kfaq__a a:not(.kfaq__anchor) {
  color: var(--kfaq-blue);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.kfaq__a a:not(.kfaq__anchor):hover { color: var(--kfaq-blue-dark); }

.kfaq__anchor {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--kfaq-grey) !important;
  text-decoration: none;
}

.kfaq__anchor:hover { color: var(--kfaq-blue) !important; }

.kfaq__item.is-target > .kfaq__q .kfaq__q-text {
  text-decoration: underline;
  text-decoration-color: var(--kfaq-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.kfaq__item { scroll-margin-top: 1.5rem; }

.kfaq__empty {
  margin: 1.5rem 0 0;
  padding: 1.25rem;
  background: var(--kfaq-tint);
  font-size: 0.9375rem;
}

.kfaq mark {
  padding: 0 1px;
  background: rgba(186, 154, 104, 0.3);
  color: inherit;
}

[data-kfaq] [hidden] { display: none !important; }

/* ---------- Mobil / Tablet ---------- */

@media (max-width: 899.98px) {
  .kfaq {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .kfaq__side { position: static; gap: 1.5rem; }
  .kfaq__main { order: 1; }
  .kfaq__contact { order: 2; }
  .kfaq__side { display: contents; }
  .kfaq__head,
  .kfaq__search,
  .kfaq__cats { order: 0; }

  .kfaq__cats {
    flex-direction: row;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    border-top: 0;
    scrollbar-width: thin;
  }

  .kfaq__cat {
    flex: 0 0 auto;
    width: auto;
    grid-template-columns: 0.5rem auto auto;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--kfaq-line);
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .kfaq__cat-mark { width: 0.5rem; height: 0.5rem; }
  .kfaq__cat[aria-pressed="true"] { border-color: var(--kfaq-blue); }

  .kfaq__a { padding-right: 0; }
  .kfaq__q { gap: 1rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kfaq *,
  .kfaq *::before,
  .kfaq *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .kfaq { display: block; }
  .kfaq__search,
  .kfaq__cats,
  .kfaq__anchor,
  .kfaq__icon,
  .kfaq__status { display: none !important; }
  .kfaq__a { display: block !important; }
}