/* Landing page (single posts): title, gallery, FAQ. Not part of the Tailwind build. */

/* Title + preheader: white text on the brand blue (#00334C), as in the mockup */
.single-post .tadus-page-head, .page-child .tadus-page-head { background: #00334c; padding-block: 0.5rem 1rem; }
.single-post .tadus-title, .page-child .tadus-title { color: #fff; }
.single-post .tadus-preheader, .page-child .tadus-preheader { color: #fff; margin-bottom: 0; }
@media (max-width: 1535px) { .single-post .tadus-title, .single-post .tadus-preheader, .page-child .tadus-title, .page-child .tadus-preheader { padding-inline: 2rem; } }

/* Gallery: 2 columns on mobile, 4 from tablet, equal tiles, gentle sequential fade-in */
.entry-content .wp-block-gallery.not-prose {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0 auto;
	padding-inline: 1rem;
	max-width: 80rem;
}
.entry-content .wp-block-gallery.not-prose > figure { margin: 0; width: auto; }
.entry-content .wp-block-gallery.not-prose img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
@media (min-width: 900px) {
	.entry-content .wp-block-gallery.not-prose { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
}
.entry-content .wp-block-gallery .add-plop-right { transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s ease; }
.entry-content .wp-block-gallery .plop-right { opacity: 1; transform: none; }
.entry-content .wp-block-gallery figure:nth-child(2) { transition-delay: 0.15s; }
.entry-content .wp-block-gallery figure:nth-child(3) { transition-delay: 0.3s; }
.entry-content .wp-block-gallery figure:nth-child(4) { transition-delay: 0.45s; }
@media (max-width: 899px) {
	/* 2x2 grid: stagger per row on mobile */
	.entry-content .wp-block-gallery figure:nth-child(3) { transition-delay: 0s; }
	.entry-content .wp-block-gallery figure:nth-child(4) { transition-delay: 0.15s; }
}

/* FAQ: dark intro (from the group) -> light band (selected + other categories) -> dark question zone */
.tadus-faq { color: #fff; }
.tadus-faq { --faq-pad: max(2rem, calc((100vw - 96rem) / 2)); --faq-w: calc(50vw - var(--faq-pad)); --faq-h: 21rem; --faq-tan: 0.84; --faq-gap: 3rem; --faq-qx: var(--faq-pad); }
.tadus-faq__band { background: #00334c; margin-inline: calc(50% - 50vw); overflow: hidden; }
.tadus-faq__bandinner { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
	.tadus-faq__bandinner { grid-template-columns: calc(var(--faq-pad) + var(--faq-w)) minmax(0, 1fr); height: var(--faq-h); }
}
.tadus-faq__qzone { margin-inline: calc(50% - 50vw); padding: 1.5rem 0 3rem var(--faq-pad); }

.tadus-faq__questions { transition: opacity 0.25s ease, transform 0.25s ease; }
/* Hidden until the block is scrolled into view (JS adds .is-seen). */
.tadus-faq.is-js:not(.is-seen) .tadus-faq__q { animation-play-state: paused; }
/* desktop: the whole panel slides in from the left, illustration scales in */
@media (min-width: 900px) {
	.tadus-faq__head { transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
	.tadus-faq__head.is-leaving, .tadus-faq__head.is-entering, .tadus-faq.is-js:not(.is-seen) .tadus-faq__head { opacity: 0; transform: translateX(-35%); }
	.tadus-faq__head:not([hidden]) .tadus-faq__illu { animation: tadus-faq-illu 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s both; }
	.tadus-faq.is-js:not(.is-seen) .tadus-faq__illu { animation-play-state: paused; }
}
@keyframes tadus-faq-illu { from { opacity: 0; transform: scale(0.85) translateY(1rem); } to { opacity: 1; transform: none; } }
.tadus-faq__questions.is-leaving, .tadus-faq__questions.is-entering { opacity: 0; }

.tadus-faq__head { position: relative; isolation: isolate; color: #00334c; padding: 1.5rem 1.5rem 1.5rem var(--faq-pad); }
.tadus-faq__head::before { content: ""; position: absolute; inset: 0 0 0 -100vw; background: #b1bac2; z-index: -1; }
@media (min-width: 900px) {
	.tadus-faq__head { padding: 2.5rem calc(var(--faq-h) * var(--faq-tan) * 0.88) 1.5rem var(--faq-pad); height: var(--faq-h); isolation: isolate; }
	/* skewed panel with rounded top-right corner */
	.tadus-faq__head::before { border-top-right-radius: 1.5rem; transform: skewX(40deg); transform-origin: bottom right; }
}
.tadus-faq__title { text-align: center; font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 700; line-height: 1.15; margin: 0; outline: none; }
.tadus-faq__illu { display: block; width: auto; max-width: 100%; max-height: 11rem; margin: 0.75rem auto 0; mix-blend-mode: multiply; }

.tadus-faq__questions { display: flex; flex-direction: column; gap: 0.75rem; max-width: none; margin-left: calc(var(--faq-pad) * -1); }
.tadus-faq__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.75rem;
	width: var(--qw, auto);
	padding: 0.75rem calc(var(--qs, 3.15rem) + 1rem) 0.75rem var(--faq-qx);
	background: #33b1cb;
	color: #fff;
	text-shadow: 0 1px 2px rgb(0 51 76 / 0.45);
	clip-path: polygon(0 0, calc(100% - var(--qs, 3.15rem)) 0, 100% 100%, 0 100%);
	cursor: pointer;
	list-style: none;
}
.tadus-faq__summary::-webkit-details-marker { display: none; }
.tadus-faq__qtitle { margin: 0; font-size: clamp(1rem, 0.89rem + 0.45vw, 1.25rem); line-height: 1.35; font-weight: 700; }
.tadus-faq__summary { transition: background-color 0.25s ease; }
.tadus-faq__summary:hover { background: #4cc0d8; }
.tadus-faq__summary:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

/* plus / minus */
.tadus-faq__toggle { position: relative; flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; }
.tadus-faq__toggle::before,
.tadus-faq__toggle::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; transition: transform 0.3s ease; }
.tadus-faq__toggle::after { transform: rotate(90deg); }
.tadus-faq__q[open] .tadus-faq__toggle::after { transform: rotate(0deg); }

.tadus-faq__a {
	background: #fff;
	color: #00334c;
	padding: 1.25rem;
	margin: 0 0 0 var(--faq-qx);
	width: calc(var(--qw, 100%) - var(--faq-qx));
	box-sizing: border-box;
	border-radius: 0 0 0.75rem 0.75rem;
}
.tadus-faq__summary { position: relative; z-index: 2; }
.tadus-faq__a { position: relative; z-index: 1; }
/* Chrome/FF keep closed content rendered (content-visibility); display:none makes the animation restart on every open */
.tadus-faq__q:not([open])::details-content { display: none; }
.tadus-faq__q[open] > .tadus-faq__a { interpolate-size: allow-keywords; overflow: clip; animation: tadus-faq-in 0.5s ease; }
/* grows from the title downwards (height 0 -> auto), no movement above it */
.tadus-faq__q.is-closing[open] > .tadus-faq__a { animation: tadus-faq-out 0.4s ease forwards; }
@keyframes tadus-faq-out { to { height: 0; padding-block: 0; opacity: 0; } }
@keyframes tadus-faq-in { from { height: 0; padding-block: 0; opacity: 0; } }
.tadus-faq__a > * + * { margin-top: 1em; }
.tadus-faq__a a:not([class]) { color: #00334c; text-decoration: underline; }
.tadus-faq__a img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.tadus-faq__a ul { list-style: disc; padding-left: 1.25rem; }
.tadus-faq__a ol { list-style: decimal; padding-left: 1.25rem; }
/* bars slide in one after another when a category is shown */
.tadus-faq__questions:not([hidden]) .tadus-faq__q { animation: tadus-faq-bar 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.tadus-faq__q:nth-child(2) { animation-delay: 0.06s !important; }
.tadus-faq__q:nth-child(3) { animation-delay: 0.12s !important; }
.tadus-faq__q:nth-child(4) { animation-delay: 0.18s !important; }
.tadus-faq__q:nth-child(n+5) { animation-delay: 0.24s !important; }
@keyframes tadus-faq-bar { from { opacity: 0; transform: translateX(-4rem); } to { opacity: 1; transform: none; } }

/* category buttons: fixed size, selected one leaves an empty slot */
.tadus-faq__cats-wrap { position: relative; background: #fff; padding: 1.5rem 2rem; isolation: isolate; }
@media (min-width: 900px) {
	.tadus-faq__cats-wrap { background: none; height: var(--faq-h); padding: 1.5rem min(var(--faq-pad), 2rem) 1.5rem calc(var(--faq-gap) + 1rem); display: flex; align-items: center; }
	.tadus-faq__cats-wrap::before { content: ""; position: absolute; inset: 0 -100vw 0 var(--faq-gap); background: #fff; z-index: -1; transform: skewX(40deg); transform-origin: bottom left; }
}
.tadus-faq__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; width: 100%; }
.tadus-faq__cats::before { content: "Weitere Themen"; grid-column: 1 / -1; font-weight: 700; font-size: 1.125rem; color: #00334c; }
@media (min-width: 900px) { .tadus-faq__cats::before { display: none; } }
/* same look as the page buttons (.cool_button): thin brand ring + dark face */
.tadus-faq__cat { background: #33b1cb; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2); color: #fff; cursor: pointer; font-weight: 700; padding: 0; }
.tadus-faq__catlabel { display: flex; align-items: center; justify-content: center; min-height: 4rem; margin: 1px; padding: 0.5rem 0.5rem; text-wrap: balance; background: #00334c; border-radius: 0.75rem; font-size: clamp(0.9375rem, 0.8rem + 0.56vw, 1.25rem); line-height: 1.2; text-align: center; transition: background 0.2s ease; }
.tadus-faq__cat { transition: transform 0.25s ease, opacity 0.4s ease, visibility 0.4s; }
.tadus-faq__cat:hover { transform: translateY(-3px); }
.tadus-faq__cat:hover .tadus-faq__catlabel, .tadus-faq__cat:focus-visible .tadus-faq__catlabel { background: linear-gradient(15deg, #00334c, #0a5a7c); }
.tadus-faq__cat:focus-visible { outline: 3px solid #00334c; outline-offset: 3px; }
.tadus-faq__cat.is-active { display: none; }

/* newsletter status line */
.tadus-nl-status { margin-top: 1rem; }

/* reduced motion: no sliding or scaling, only a short fade */
@keyframes tadus-faq-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.tadus-faq__cat, .tadus-faq__toggle::before, .tadus-faq__toggle::after,
	.entry-content .wp-block-gallery .add-plop-right { transition: none; }
	.entry-content .wp-block-gallery .add-plop-right { transform: none; }
	.tadus-faq__q[open] > .tadus-faq__a, .tadus-faq__questions:not([hidden]) .tadus-faq__q { animation-name: tadus-faq-fade; animation-duration: 0.4s; animation-delay: 0s !important; }
	.tadus-faq__cat:hover { transform: none; }
	.tadus-faq__head.is-leaving, .tadus-faq__head.is-entering, .tadus-faq.is-js:not(.is-seen) .tadus-faq__head { transform: none; }
	.tadus-faq__head:not([hidden]) .tadus-faq__illu { animation-name: tadus-faq-fade; animation-duration: 0.4s; animation-delay: 0s; }
}

.tadus-faq__panel, #fragen-antworten { scroll-margin-top: 9rem; }
.tadus-faq__a h2, .tadus-faq__a h3, .tadus-faq__a h4 { font-weight: 700; }

/* mobile: the grey panel stays, title + illustration fade together; buttons fade slower */
@media (max-width: 899px) {
	.tadus-faq__title, .tadus-faq__illu { transition: opacity 0.4s ease-in-out; }
	.tadus-faq__head.is-leaving .tadus-faq__title, .tadus-faq__head.is-entering .tadus-faq__title,
	.tadus-faq__head.is-leaving .tadus-faq__illu, .tadus-faq__head.is-entering .tadus-faq__illu,
	.tadus-faq.is-js:not(.is-seen) .tadus-faq__title, .tadus-faq.is-js:not(.is-seen) .tadus-faq__illu { opacity: 0; }
	.tadus-faq__cat { transition: opacity 0.6s ease, visibility 0.6s, transform 0.25s ease; }
}

/* Icon Button variants: .btn-blau (filled face), .btn-klein (FAQ size) */
.cool_button.btn-blau::before {
  animation-delay: -0.875s;
}
.cool_button.btn-klein {
  font-size: clamp(0.9375rem, 0.8rem + 0.56vw, 1.25rem);
}
.cool_button.btn-klein > span {
  min-height: 4rem;
  padding: 0.5rem 1.5rem;
}
.cool_button.btn-klein img {
  height: 2.5rem;
  padding-right: 0.75rem;
  margin-right: 0.75rem;
}
.cool_button.btn-blau > span {
  background-color: var(--color-blau);
  background-image: none;
  color: #fff;
}
.cool_button.btn-blau:hover > span,
.cool_button.btn-blau:focus > span {
  background-color: var(--color-blau2);
}

/* Mobile: stacked nowrap groups keep only a small gap instead of the 100px desktop spacer */
@media (max-width: 781px) {
	.entry-content .wp-block-group.is-nowrap { flex-direction: column; align-items: flex-start; }
	.entry-content .wp-block-group.is-nowrap > .wp-block-spacer { height: 1rem !important; flex-basis: auto !important; }
}