/* „Kurz erklärt“: sieben Direktantworten unter dem Chat. Offen lesbar für Suchmaschinen und KI (details/summary). */
.fqk { position: relative; padding: clamp(40px, 8vh, 96px) clamp(24px, 4vw, 40px) clamp(56px, 10vh, 120px); }
.fqk-in { max-width: 980px; margin: 0 auto; }
.fqk-head { display: grid; gap: 12px; margin-bottom: clamp(24px, 4vh, 40px); }
.fqk-eye { margin: 0; display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono, inherit); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
[data-theme='dark'] .fqk-eye { color: var(--ws-gold, #BFAE86); }
.fqk-eye::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.fqk-h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.01em; color: var(--fg); }
.fqk-h2 em { font-style: italic; color: var(--accent-text); }
[data-theme='dark'] .fqk-h2 em { color: var(--ws-gold, #BFAE86); }
.fqk-list { display: grid; gap: 10px; }
.fqk-item { border-radius: 22px; border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 2.5%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); transition: background 400ms cubic-bezier(.16,1,.3,1), border-color 400ms; opacity: 0; transform: translateY(18px); }
.fqk-item.is-in { opacity: 1; transform: none; transition: opacity 800ms cubic-bezier(.16,1,.3,1), transform 900ms cubic-bezier(.16,1,.3,1), background 400ms, border-color 400ms; }
.fqk-item[open] { background: color-mix(in srgb, var(--fg) 4.5%, transparent); border-color: color-mix(in srgb, #BFAE86 40%, var(--line)); }
.fqk-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; align-items: center; gap: 14px; padding: 20px 22px; border-radius: inherit; outline: none; }
.fqk-item summary::-webkit-details-marker { display: none; }
.fqk-item summary:focus-visible { box-shadow: 0 0 0 2px #BFAE86; }
.fqk-n { font-size: 11px; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; color: var(--accent-text); }
[data-theme='dark'] .fqk-n { color: var(--ws-gold, #BFAE86); }
.fqk-item h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.3; color: var(--fg); }
.fqk-item summary i { position: relative; width: 24px; height: 24px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.fqk-item summary i::before, .fqk-item summary i::after { content: ''; position: absolute; left: 7px; right: 7px; top: 11.5px; height: 1px; background: var(--fg); transition: transform 500ms cubic-bezier(.16,1,.3,1); }
.fqk-item summary i::after { transform: rotate(90deg); }
.fqk-item[open] summary i::after { transform: rotate(0); }
.fqk-a { padding: 0 22px 22px 76px; }
.fqk-a p { margin: 0; max-width: 68ch; font-size: clamp(14.5px, 1.3vw, 16px); line-height: 1.8; color: var(--fg-mute); text-wrap: pretty; }
@media (max-width: 640px) {
  .fqk-item summary { grid-template-columns: 30px minmax(0, 1fr) 22px; gap: 10px; padding: 18px 16px; }
  .fqk-a { padding: 0 16px 18px 56px; }
}
@media (min-width: 641px) and (max-width: 1100px) and (min-height: 801px) {
  .fqk-item h3 { font-size: 22px; }
  .fqk-a p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .fqk-item { opacity: 1; transform: none; } }

/* Wie die Fragen-Akkordeons der Leistungsseiten: Glaskarte, goldene Linie beim Überfahren,
   Nummer rückt nach, Plus dreht sich und füllt sich gold, Antwort klappt weich auf. */
.fqk-list { gap: 12px; }
.fqk-item { --fqk-ease: cubic-bezier(.16,1,.3,1); position: relative; isolation: isolate; overflow: hidden; border: 0; border-radius: 20px;
  --dz-card-bg: #FFFFFF; --dz-rim: rgba(255,255,255,0.9); --dz-edge: rgba(191,174,134,0.3); --dz-sheen: rgba(255,255,255,0.5); --dz-drop: 0 18px 40px -30px rgba(26,23,20,0.35);
  background: linear-gradient(158deg, var(--dz-sheen), transparent 38%), color-mix(in srgb, var(--dz-card-bg) 62%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: inset 0 1px 0 var(--dz-rim), inset 0 0 0 1px var(--dz-edge), var(--dz-drop);
  transform: none; translate: 0 22px;
  transition: box-shadow 500ms var(--fqk-ease), transform 600ms var(--fqk-ease), background 420ms var(--fqk-ease), opacity 900ms var(--fqk-ease), translate 1000ms var(--fqk-ease); }
[data-theme='dark'] .fqk-item { --dz-card-bg: #1C1812; --dz-rim: rgba(255,255,255,0.16); --dz-edge: rgba(191,174,134,0.26); --dz-sheen: rgba(255,255,255,0.06); --dz-drop: 0 22px 50px -30px rgba(0,0,0,0.85); }
.fqk-item.is-in { opacity: 1; translate: 0 0; transform: none; transition: box-shadow 500ms var(--fqk-ease), transform 600ms var(--fqk-ease), background 420ms var(--fqk-ease), opacity 900ms var(--fqk-ease), translate 1000ms var(--fqk-ease); }
.fqk-item[open] { background: linear-gradient(158deg, var(--dz-sheen), transparent 38%), color-mix(in srgb, var(--dz-card-bg) 62%, transparent); box-shadow: inset 0 1px 0 var(--dz-rim), inset 0 0 0 1px rgba(216,190,147,0.6), var(--dz-drop); }
.fqk-item::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; border-radius: 2px; background: #BFAE86; transform: scaleX(0); transform-origin: left center; transition: transform 500ms var(--fqk-ease); pointer-events: none; }
.fqk-item.is-in:hover { transition-delay: 0ms !important; transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--dz-rim), inset 0 0 0 1px rgba(216,190,147,0.7), 0 0 40px -16px rgba(191,174,134,0.5), var(--dz-drop); }
.fqk-item:hover::after, .fqk-item[open]::after { transform: scaleX(1); }
.fqk-item summary { grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 16px; padding: 22px 22px 22px 24px; }
.fqk-n { transition: color 400ms, transform 500ms var(--fqk-ease); }
.fqk-item:hover .fqk-n { transform: translateX(3px); }
.fqk-item h3 { transition: color 400ms var(--fqk-ease); }
.fqk-item:hover h3, .fqk-item[open] h3 { color: var(--accent-text); }
[data-theme='dark'] .fqk-item:hover h3, [data-theme='dark'] .fqk-item[open] h3 { color: #E4D4AE; }
.fqk-item summary i { width: 30px; height: 30px; color: var(--fg); box-shadow: inset 0 0 0 1px rgba(191,174,134,0.45); transition: background 400ms, box-shadow 400ms, color 400ms, transform 600ms var(--fqk-ease); }
.fqk-item summary i::before, .fqk-item summary i::after { left: 9px; right: 9px; top: 14.5px; background: currentColor; }
.fqk-item:hover summary i { background: rgba(191,174,134,0.14); transform: rotate(90deg); }
.fqk-item[open] summary i { background: #BFAE86; color: #1A1714; box-shadow: none; transform: rotate(180deg); }
.fqk-a { display: grid; grid-template-rows: 0fr; padding: 0; transition: grid-template-rows 600ms var(--fqk-ease); }
.fqk-item[open] .fqk-a { grid-template-rows: 1fr; }
.fqk-a > p { overflow: hidden; min-height: 0; padding: 0 30px 0 74px; opacity: 0; transform: translateY(-6px); transition: opacity 500ms var(--fqk-ease) 80ms, transform 600ms var(--fqk-ease) 80ms, padding 600ms var(--fqk-ease); }
.fqk-item[open] .fqk-a > p { padding-bottom: 24px; opacity: 1; transform: none; }
@media (max-width: 640px) {
  .fqk-item summary { grid-template-columns: 26px minmax(0, 1fr) 28px; gap: 12px; padding: 18px 16px; }
  .fqk-item summary i { width: 28px; height: 28px; }
  .fqk-item summary i::before, .fqk-item summary i::after { left: 8px; right: 8px; top: 13.5px; }
  .fqk-a > p { padding: 0 18px 0 54px; }
  .fqk-item[open] .fqk-a > p { padding-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { .fqk-item, .fqk-a, .fqk-a > p, .fqk-item summary i, .fqk-item::after { transition: none !important; translate: none; } }