/* ═══ Baustein Fragen und Antworten ═════════════════════════
   Vorbild: 03_Design/final/idee-start.html
   ═══════════════════════════════════════════════════════════ */


/* Eine Spalte ueber die volle Breite. Zwei Spalten mit ungleich
   langen Antworten reissen immer ein Loch: klappt links eine Frage
   auf, steht rechts daneben nichts. Untereinander liest es sich
   wie eine Dokumentation und nicht wie ein Akkordeon von der
   Stange. */
/* Kein Abstand oben: den traegt der Abschnittskopf. */
.faq .g {
	border-top: 1px solid var(--ln);
}

/* Verweis auf die vollstaendige Konditionsseite. Eine Zeile, kein
   Knopf: der Weg zur Buchung liegt weiter unten. */
.faq__weiter {
	margin-top: var(--s5);
	font-size: var(--t-klein);
	letter-spacing: .18em;
	text-transform: uppercase;
}
.faq__weiter a {
	color: var(--tx);
	box-shadow: inset 0 -1px 0 var(--ln);
	transition: box-shadow .3s var(--e);
	display: inline-flex;
	align-items: center;
	min-height: var(--tippflaeche);
}
.faq__weiter a:hover { box-shadow: inset 0 -1px 0 var(--tx); }


/* Auf der Startseite stehen vier kurze Fragen, und dort waeren vier
   Zeilen ueber die volle Breite eine Folie. Zwei Spalten gehen hier
   auf, weil alle vier Antworten zwei Zeilen haben. */
.faq--zwei { padding-block: 0; }
/* --s3 statt null: die Ueberschrift stand 17 Pixel ueber der ersten
   Frage. Der eine Pixel ueber 16 ist die Haarlinie und laesst sich
   nicht wegrechnen; sechzehn dazu setzen den Abstand auf 33, und den
   hat die Seite ohnehin, von einem Wert zum naechsten Begriff. */
.faq--zwei .g {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--s7);
}

@media (max-width: 61.25rem) {
	.faq--zwei .g { grid-template-columns: 1fr; }
}

/* ── Fragen mit Kachel daneben ──────────────────────────── */
/* Vorbild: 03_Design/final/idee-soelden.html
   Links Rubrik, Ueberschrift und eine Kachel, rechts die Liste.
   Auf /soelden/ steht in der Kachel der Skischulrabatt: er ist
   keine Frage, sondern eine Zusage, und in einem Aufklapper waere
   er verborgen. */

.faq--seite .faq__g {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--s6);
	align-items: start;
}

/* Die Kachel ist die Textkachel aus basis.css (.platte). Den Abstand
   vom Titel zu ihr traegt der Titel (--s3), wie beim Spaltenkopf. */

/* Die Liste beginnt an der Oberkante ihrer Spalte, nicht 32 Pixel
   darunter: neben ihr steht keine Ueberschrift, unter der sie
   haengen koennte, sondern die Rubrik der Nachbarspalte. Der Rahmen
   der Liste ist damit dieselbe Linie wie deren erste Zeile. */
.faq--seite .faq__rechts {
	border-top: 1px solid var(--ln);
}

/* Dreiunddreissig Fragen in zwei Spalten lassen unten eine Zelle
   leer. Die letzte nimmt dann die ganze Zeile. Ueber nth-child,
   nicht ueber eine Klasse: kommt eine Frage dazu, geht das Raster
   von selbst wieder auf. */
.faq--zwei .g > details:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.faq--seite .faq__rechts .g {
	margin-top: 0;
	border-top: 0;
}




/* Ein Satz, kein Kicker. Der Baustein setzt die Fusszeile sonst in
   Versalien mit Sperrung, weil sie dort allein unter einer Spalte
   steht. Hier steht sie unter einer Liste von Fragen und ist der
   naechste Satz, nicht eine neue Rubrik. */
.faq--seite .faq__weiter {
	margin-top: var(--s4);
	font-size: .875rem;
	letter-spacing: normal;
	text-transform: none;
}

@media (max-width: 61.25rem) {

	.faq--seite .faq__g {
		grid-template-columns: 1fr;
		gap: var(--s5);
	}
}