/* ===========================================================================
   css/faq.css  ·  Fragenblock am Fuss jeder Schaufensterseite
   ---------------------------------------------------------------------------
   Eine Quelle fuer alle Seiten mit Fragenblock: Modellportfolio, Performance,
   Makro Index, Download. Aufbau: section.faq#faq > details.mz.mz-haupt >
   summary + div.mz-in, darin je Frage details.mz > summary + div.mz-in.
   28.09.2026 (FAQ Welle): der Block setzt sich von den Klappzeilen der Seite
   ab und ist tiefer gesetzt, drei Ebenen durch Einrueckung:
     Flaeche    eingelassen: zart getoent, innere Haarlinie, innerer Schatten,
                Ecke 16 wie die Kacheln aus css/glas.css
     Kopf       eigene Zeile mit rundem Glasknopf statt des Plus der Sektionen
     Fragen     24 px tiefer als der Kopf, die Linien beginnen dort
     Antworten  an einer feinen Fuehrungslinie, nochmals 24 px tiefer
   Handy mit kleineren Einrueckungen. Formelsatz: css/formel.css.
   Alles haengt an #faq und schlaegt damit die .mz Regeln aus
   css/schaufenster.css, egal in welcher Reihenfolge die Dateien laden. Den
   Abstand nach oben setzt .buehne hier, Performance in css/schaufenster.css,
   die Download Seite ihren Rahmen selbst. Glas und Schrift kommen aus
   css/glas.css und var(--font-head).
   =========================================================================== */

.buehne #faq{margin-top:72px}

/* Flaeche */
#faq>.mz-haupt{border:0;border-radius:var(--glas-ecke-kachel,16px);padding:0 32px;
  background:rgba(10,10,10,.03);
  box-shadow:inset 0 0 0 1px rgba(10,10,10,.06),inset 0 2px 5px rgba(10,10,10,.05)}

/* Zeilen */
#faq .mz>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:16px;font-family:var(--font-head);letter-spacing:-.01em}
#faq .mz>summary::-webkit-details-marker{display:none}
#faq .mz>summary:focus-visible{outline:2px solid rgba(10,10,10,.5);outline-offset:3px;border-radius:8px}

/* Kopf: runder Glasknopf, offen ein Minus (Befund 2.05) */
#faq .mz-haupt>summary{padding:22px 0;font-weight:700;font-size:18px;line-height:24px;color:var(--ink)}
#faq .mz-haupt>summary::after{content:"+";flex:none;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;font-weight:400;font-size:20px;line-height:1;color:var(--ink);
  background:var(--glas-hell,#fff);box-shadow:var(--glas-kante-hell),var(--glas-kontur),0 2px 6px rgba(10,10,10,.08);
  transition:box-shadow .18s ease}
#faq .mz-haupt>summary:hover::after{box-shadow:var(--glas-kante-hell),var(--glas-kontur),0 4px 12px rgba(10,10,10,.13)}
#faq .mz-haupt[open]>summary::after{content:"\2212"}

/* Fragen: eine Stufe tiefer */
#faq .mz-haupt>.mz-in{margin:0;padding:0 0 14px 24px}
#faq .mz-haupt>.mz-in>.mz{border-top:1px solid var(--linie)}
#faq .mz-haupt>.mz-in>.mz>summary{padding:15px 0 16px;font-weight:600;font-size:16px;line-height:24px;color:var(--ink)}
#faq .mz-haupt>.mz-in>.mz>summary::after{content:"+";flex:none;font-weight:400;font-size:20px;line-height:1;
  color:rgba(10,10,10,.5);transition:color .18s ease}
#faq .mz-haupt>.mz-in>.mz>summary:hover::after{color:var(--ink)}
#faq .mz-haupt>.mz-in>.mz[open]>summary::after{content:"\2212"}

/* Antworten: an einer feinen Fuehrungslinie, nochmals tiefer */
#faq .mz-haupt>.mz-in>.mz>.mz-in{margin:0 0 22px 2px;padding:4px 0 2px 22px;border-left:1px solid rgba(10,10,10,.16)}
/* Lange Worte (Pfade, Adressen) brechen um, statt die Seite zu verbreitern. */
#faq .mz-in p{font-size:15px;line-height:24px;color:rgba(10,10,10,.68);margin:0 0 16px;max-width:72ch;
  overflow-wrap:break-word}
#faq .mz-in p:last-child{margin-bottom:0}
#faq .mz-in b{color:var(--ink);font-weight:600}
/* Alte Formelzeile als Text, bis die Seite auf figure.formel-block umgestellt ist. */
#faq .mz-in p.formel{color:var(--ink);font-weight:600}
/* Quellzeile grau .6: Kontrast rund 4,7 zu 1 auf der getoenten Flaeche (WCAG AA). */
#faq .mz-in .quelle{font-size:13px;line-height:20px;color:rgba(10,10,10,.6)}

@media (max-width:700px){
  .buehne #faq{margin-top:56px}
  #faq>.mz-haupt{padding:0 16px;border-radius:14px}
  #faq .mz-haupt>summary{padding:18px 0;font-size:17px}
  #faq .mz-haupt>summary::after{width:32px;height:32px}
  #faq .mz-haupt>.mz-in{padding:0 0 10px 10px}
  #faq .mz-haupt>.mz-in>.mz>summary{padding:14px 0 15px;font-size:15.5px}
  #faq .mz-haupt>.mz-in>.mz>.mz-in{margin:0 0 20px 1px;padding:2px 0 2px 13px}
}