/* ================================================================
   SABTEC — Häufige Fragen (nur diese Seite)
   ================================================================
   Alles, was mehrere Seiten teilen, steht in `assets/css/system.css`
   (.sub, .sec, .wrap, .faqsearch, .faqsearch-hint, .faq details,
   .faq summary, .faq .a, .schaden, .modal, .modalin, .popx, .form,
   .btn, .ctab). Hier stehen ausschlieszlich die Regeln, die es nur
   auf der FAQ-Seite gibt:

   1. Maszen des Seitenkopfs und der Sektion
   2. Themen-Schaltflaechen (.fcats/.fcat) und Nachladen (.faqmore)
   3. Aufzaehlungen in Antworten und der Filterzustand .hid
   4. Schadensband und Modal — Ueberschriftenebene und Ohne-Skript-Fall
   5. Kleine Bildschirme

   Farben und Maszen kommen aus theme.json; es steht kein Farbwert
   als Zahl in dieser Datei.
   ================================================================ */

/* 1. Seitenkopf und Sektion ----------------------------------------- */

/* Die Pill „Frage stellen" ist im Frame groeszer als der Systemwert
   (.sub .navcta: 14 px / 14–28 px). Der Prototyp loest das ueber ein
   style-Attribut, hier haengt es an der Seitenklasse. */
.faqsub .navcta { font-size: 17.5px; padding: 19px 42px; }
.faqsub .navcta svg { width: 18px; height: 18px; vertical-align: -3px; margin-left: 6px; }

/* Der Frame setzt das Suchfeld dichter unter das blaue Panel als der
   Standardrhythmus (112 px) es vorsieht. */
.faqsec { padding-top: 40px; }

/* Fragen, Suchfeld und Schadensband stehen auf einer schmaleren Bahn
   als die 1280er Inhaltsbreite — im Frame 920 px inkl. Seitenrand. */
.wrap.faqwrap { max-width: 920px; }

/* Beschriftung des Suchfelds: fuer Screenreader vorhanden, im Design
   nicht sichtbar (dort traegt der Platzhalter die Beschriftung). */
.faq-versteckt {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Ohne min-width laesst Flexbox das Eingabefeld nicht unter seine
   Standardbreite schrumpfen — auf dem Telefon laeuft die Pill sonst
   ueber den Seitenrand hinaus. */
.faqsearch input { min-width: 0; }

/* 2. Themen-Schaltflaechen und Nachladen ---------------------------- */

.fcats {
	display: flex; flex-wrap: wrap; gap: 10px;
	justify-content: center; margin-bottom: 30px;
}

/* Eigener Chip statt .fchip: der Frame zeigt die aktive Auswahl hier
   blau (nicht gruen wie die Filter der Katalogseiten) und die Schrift
   in 900. Als <button> erbt das Element die Schrift nicht von selbst —
   ohne `font: inherit` rendert Chrome Arial. */
.fcat {
	font: inherit; font-size: 13.5px; font-weight: 900; line-height: 1.2;
	appearance: none; -webkit-appearance: none;
	border: 1.5px solid var(--wp--custom--ui--line-strong);
	background: var(--wp--preset--color--white);
	border-radius: 30px; padding: 9px 20px;
	color: var(--ink); cursor: pointer;
}
.fcat:hover { background: var(--wp--custom--ui--hover-soft); }
.fcat.on {
	background: var(--blue); border-color: var(--blue);
	color: var(--wp--preset--color--white);
}

.faqmore { display: flex; justify-content: center; margin-top: 26px; }
/* Ohne diese Zeile gewinnt `display:flex` gegen das UA-Verhalten von
   `hidden` — der Knopf stuende dann ohne JavaScript da und taete nichts. */
.faqmore[hidden] { display: none; }
.faqmore button {
	font: inherit; font-size: 15px; font-weight: 900;
	appearance: none; -webkit-appearance: none;
	background: var(--wp--preset--color--white); color: var(--blue);
	border: 1.5px solid var(--wp--custom--ui--line-strong);
	border-radius: 40px; padding: 14px 32px; cursor: pointer;
}
.faqmore button:hover { background: var(--wp--custom--ui--hover-soft); }

/* 3. Antworten und Filterzustand ------------------------------------ */

/* Zwei der 27 Antworten sind Aufzaehlungen. Der Einzug kommt wie im
   Prototyp aus dem Auszenabstand; `padding-left: 0` haelt die generische
   Regel `.sabtec-page ul:not([class])` (1,25 em) davon ab, den Einzug ein
   zweites Mal aufzuschlagen. */
.faq .a ul { margin: 10px 0 0 20px; padding-left: 0; }
.faq .a li { margin-top: 4px; }

/* Von Suche oder Themenfilter ausgeblendet. Die Klasse setzt
   ausschlieszlich assets/js/faq.js — ohne Skript ist sie nie gesetzt
   und alle 27 Fragen bleiben sichtbar. */
.faq details.hid { display: none; }

/* 4. Schadensband und Modal ----------------------------------------- */

/* Der Prototyp springt hier von h1 auf h3. Das ist ein
   Gliederungsfehler (BFSG), deshalb steht im Markup h2 — die Groesze
   kommt aus system.css nur fuer h3, also hier nachgezogen. */
.schaden h2 { font-size: 28px; font-weight: 900; letter-spacing: -.5px; }
.modalin h2 { font-size: 24px; font-weight: 900; letter-spacing: -.5px; }

/* Der Auslöser ist ein Sprunglink auf das Modal. Ohne JavaScript
   zeigt `:target` es an, mit JavaScript uebernimmt faq.js (Fokusfalle,
   Escape, Fokusrueckgabe). Damit ist das Formular in beiden Faellen
   erreichbar. */
.modal:target { display: flex; }

/* Schlieszen ist eine Sprungmarke (damit es ohne JavaScript geht), also
   ein <a> im Kleid der Schaltflaeche aus dem Designsystem — das × zentriert
   sich in einem Link nicht von selbst. */
#schaden-modal .popx {
	display: flex; align-items: center; justify-content: center;
	line-height: 1;
}

/* Das Formular im Modal steht ohne Kasten und ohne Innenabstand. */
.form.faqform { background: none; border: none; padding: 0; margin-top: 10px; }

/* 5. Kleine Bildschirme --------------------------------------------- */

@media (max-width: 700px) {
	.faqsub .navcta { font-size: 15px; padding: 14px 28px; }

	.faqsearch { padding-left: 16px; }
	.faqsearch input { padding: 13px 10px; font-size: 15px; }
	.faqsearch button { padding: 13px 18px; }

	/* 48 px Innenabstand plus 22 px Seitenrand lassen bei 390 px nur
	   250 px Textbreite — zu wenig fuer eine 28-px-Ueberschrift. */
	.schaden { padding: 36px 24px; }
	.schaden h2 { font-size: 22px; }

	.modalin { padding: 28px 22px; }
}