/* bb-kompass: Aufklapp-Eintraege (Sektionslayout „Aufklapp-Eintrag", Zonen-Layout „Aufklapp-Zone").
   Ohne JavaScript bleibt alles offen lesbar; bbk-aufklapp.js setzt .ist-bereit und schaltet auf/zu. */

	/* Eintraege direkt unter einer Standardtext-Box haengen an deren Box an */
	section#main:has(+ .bbk-auf-sektion) {
		padding-bottom: 0;
	}

		section#main:has(+ .bbk-auf-sektion) .box {
			margin-bottom: 0;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			box-shadow: none;
		}

	.bbk-auf {
		background: #fff;
		padding: 0 3em;
	}

		.bbk-auf-sektion + .bbk-auf-sektion .bbk-auf {
			border-top: solid 1px #e5e5e5;
		}

		/* letzter Eintrag einer Liste schliesst die Box ab */
		.bbk-auf-sektion:not(:has(+ .bbk-auf-sektion)) .bbk-auf {
			border-bottom-left-radius: 6px;
			border-bottom-right-radius: 6px;
			box-shadow: 0 2px 0 0 #e5e5e5;
			margin-bottom: 2em;
			padding-bottom: 1.5em;
		}

		/* Liste ohne Box davor: oben abrunden */
		:not(section#main):not(.bbk-auf-sektion) + .bbk-auf-sektion .bbk-auf,
		.bbk-auf-sektion:first-child .bbk-auf {
			border-top-left-radius: 6px;
			border-top-right-radius: 6px;
			margin-top: 2em;
		}

		section#main + .bbk-auf-sektion .bbk-auf {
			margin-top: 0;
			border-top: solid 1px #e5e5e5;
		}

	/* Zone 1: Frage bzw. Titel */
	.bbk-auf__teil:first-child {
		color: #3c86a7;
		font-size: 1.15em;
		font-weight: 400;
		line-height: 1.4em;
		padding: 1em 0;
	}

		.bbk-auf__teil:first-child > * {
			color: inherit;
			font-size: inherit;
			font-weight: inherit;
			line-height: inherit;
			letter-spacing: inherit;
			margin: 0;
		}

	/* Zone 2: Antwort */
	.bbk-auf__teil + .bbk-auf__teil {
		padding: 0 0 1em 0;
	}

		.bbk-auf__teil + .bbk-auf__teil > :last-child {
			margin-bottom: 0;
		}

	/* Mit JavaScript: auf- und zuklappbar */
	.bbk-auf.ist-bereit .bbk-auf__teil:first-child {
		cursor: pointer;
		padding-right: 2em;
		position: relative;
	}

		.bbk-auf.ist-bereit .bbk-auf__teil:first-child::after {
			border-bottom: solid 2px currentColor;
			border-right: solid 2px currentColor;
			content: "";
			height: 0.5em;
			position: absolute;
			right: 0.4em;
			top: 1.35em;
			transform: rotate(45deg);
			transition: transform 0.2s ease-in-out;
			width: 0.5em;
		}

		.bbk-auf.ist-offen .bbk-auf__teil:first-child::after {
			top: 1.6em;
			transform: rotate(-135deg);
		}

		.bbk-auf.ist-bereit .bbk-auf__teil:first-child:hover {
			color: #2a6f8f;
		}

		.bbk-auf.ist-bereit .bbk-auf__teil:first-child:focus-visible {
			outline: solid 2px #3c86a7;
			outline-offset: 2px;
		}

	/* Antwort gleitet auf und zu; die Hoehe setzt bbk-aufklapp.js waehrend des Uebergangs */
	.bbk-auf.ist-bereit .bbk-auf__teil + .bbk-auf__teil {
		overflow: hidden;
		transition: height 0.35s ease-in-out, padding-bottom 0.35s ease-in-out, opacity 0.35s ease-in-out, visibility 0s;
	}

	.bbk-auf.ist-bereit:not(.ist-offen) .bbk-auf__teil + .bbk-auf__teil {
		height: 0;
		opacity: 0;
		padding-bottom: 0;
		transition: height 0.35s ease-in-out, padding-bottom 0.35s ease-in-out, opacity 0.35s ease-in-out, visibility 0s 0.35s;
		visibility: hidden;
	}

	@media (prefers-reduced-motion: reduce) {

		.bbk-auf.ist-bereit .bbk-auf__teil + .bbk-auf__teil,
		.bbk-auf.ist-bereit:not(.ist-offen) .bbk-auf__teil + .bbk-auf__teil,
		.bbk-auf.ist-bereit .bbk-auf__teil:first-child::after {
			transition: none;
		}

	}

	.bbk-auf-sektion {
		scroll-margin-top: 4.5em;
	}

	@media screen and (max-width: 980px) {

		.bbk-auf {
			padding-left: 2em;
			padding-right: 2em;
		}

	}

	@media screen and (max-width: 736px) {

		section#main:has(+ .bbk-auf-sektion) .box {
			margin-bottom: 0;
		}

		.bbk-auf {
			padding-left: 1em;
			padding-right: 1em;
		}

		.bbk-auf-sektion:not(:has(+ .bbk-auf-sektion)) .bbk-auf {
			border-radius: 0;
			box-shadow: none;
		}

	}

	@media print {

		.bbk-auf.ist-bereit:not(.ist-offen) .bbk-auf__teil + .bbk-auf__teil {
			height: auto;
			opacity: 1;
			padding-bottom: 1em;
			visibility: visible;
		}

	}