/* ==========================================================================
   Design work that came after the static prototype was signed off.

   The files next to this one are a byte copy of Ai/mian-site/css and stay that
   way, so anything drawn from the Figma but never built in the prototype —
   or corrected on the client's review — lives here instead. That keeps it
   obvious later which rules the client approved as HTML and which arrived
   during the WordPress build.

   No colour literals: tokens.css is still the single source
   (Ai/qa/tokens-audit.py enforces it).
   ========================================================================== */

/* --- Two sections on the same ground --------------------------------------
   Each section carries 120px of its own vertical padding, which is right when
   the ground changes. Where two identical grounds meet there is no edge to
   separate, so 240px of empty colour is left in the middle — visible between
   "So funktioniert AdminAlly" and "Ein Blick auf die Oberfläche".
   Collapsing the second one's top padding restores the intended rhythm.
   -------------------------------------------------------------------------- */

.cf-psec--white + .cf-psec--white,
.cf-psec--crystal + .cf-psec--crystal,
.cf-psec--cream + .cf-psec--cream,
.cf-psec--dark + .cf-psec--dark {
	padding-top: 0;
}

/* --- Kontakt: the dark details card ---------------------------------------
   `.cf-details__label` asks for `--cf-muted`. In the prototype that was
   #5E8386, a mid teal that read fine on the dark card. The Figma rebuild
   aliased `--cf-muted` to `--cf-teal` (#004045) to pull the un-migrated pages
   onto the new palette — which on a #0A3533 ground makes PHONE, E-MAIL, BÜRO
   and ERREICHBARKEIT very nearly invisible.

   `--cf-sky` is the token the system already has for muted text on dark, so
   the labels use that. Same fix belongs anywhere else the alias lands on a
   dark ground; this is the only place it currently does.
   -------------------------------------------------------------------------- */

.cf-details__label {
	color: var(--cf-sky);
}

/* --- Tools & Guides -------------------------------------------------------
   Figma: ressourcen-page > tools-guides-section.
   Section pad 100/80, gap 56. Grid of three 405px cards, gap 32.
   Card: white, radius 16, 1px #D6DED9 at 40%, padding 32, inner gap 24.
   Head: 48px crystal tile + text stack, gap 16, title gap 2.
   -------------------------------------------------------------------------- */

.cf-tools {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-top: var(--cf-gap-sec);
}

.cf-tool {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
	border: 1px solid var(--cf-line-border-40);
	border-radius: var(--cf-r-card);
	background: var(--cf-white);
}

.cf-tool__head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.cf-tool__titles {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cf-tool__eyebrow {
	margin: 0;
	color: var(--cf-teal-muted);
	font-family: var(--cf-font-body);
	font-weight: 700;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: var(--cf-ls-caps);
	text-transform: uppercase;
}

.cf-tool__title {
	margin: 0;
	color: var(--cf-ink);
	font-family: var(--cf-font-head);
	font-weight: 700;
	font-size: 18px;
	line-height: 27px;
}

.cf-tool__text {
	margin: 0;
	color: var(--cf-ink);
	font-family: var(--cf-font-body);
	font-size: var(--cf-fs-body-xs);
	line-height: 21px;
	/* German compounds have no space to break at. */
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Pushed to the foot so the links line up across cards of unequal height. */
.cf-tool__link {
	margin-top: auto;
	color: var(--cf-ink);
	font-family: var(--cf-font-body);
	font-weight: 700;
	font-size: var(--cf-fs-body-xs);
	line-height: 18px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.cf-tool__link:hover {
	color: var(--cf-link);
}

/* No file attached yet: it reads as a label, not as something clickable. */
.cf-tool__link--pending {
	color: var(--cf-placeholder);
	font-style: italic;
	text-decoration: none;
	cursor: default;
}

/* The icon tile is the same 48px crystal square the product pages use. */
.cf-tool .cf-ficon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--cf-r-inner);
	background: var(--cf-crystal);
	color: var(--cf-teal);
}

@media (max-width: 1000px) {
	.cf-tools { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.cf-tools { grid-template-columns: 1fr; gap: 20px; }
	.cf-tool { padding: 24px; }
}

/* --- Startseite: one blog card, not two -----------------------------------
   The prototype drew a lighter card on the homepage (no border, no excerpt,
   no "Weiterlesen") and the bordered one on Ressourcen. Two cards for the same
   object, and the difference read as an accident rather than a decision.

   The block now renders template-parts/post-card, so both places are literally
   the same component. Only the grid stays the homepage's own: three across on
   a cream ground, where Ressourcen runs six on white.
   -------------------------------------------------------------------------- */

.cf-teaser {
	align-items: stretch;
}

/* --- "Alle Beiträge" ------------------------------------------------------
   .cf-pager__btn is an inline-flex box with no gap, so the arrow sat against
   the last letter. Every other link+arrow pair in the design uses 8px.
   -------------------------------------------------------------------------- */

.cf-pager__btn {
	gap: 8px;
}

/* --- Mobile ---------------------------------------------------------------
   32px of card padding inside a 20px gutter leaves a 390px phone about 266px
   for the text. The card keeps its shape at 20px and the excerpt stops
   breaking mid-word.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.cf-postcard {
		padding: 20px;
	}

	.cf-postcard__media {
		margin-bottom: 8px;
	}

	/* The logo was sized for the prototype's 1249px bar. On a phone it is the
	   only brand mark on screen, and 150px read as small next to a 44px burger. */
	.cf-header__logo img {
		width: 175px;
	}
}

@media (max-width: 359px) {
	.cf-header__logo img {
		width: 145px;
	}
}

/* --- Drawer accordions ----------------------------------------------------
   The drawer used to print the top level only, because a flat list of all
   eleven items ran three screens long. Collapsed, a parent costs one row, so
   the sub-pages are reachable on a phone at last.

   The trigger is a <button> and inherits none of the link metrics, so they are
   restated. The chevron turns rather than slides: it points at a panel below
   it, not at another page.
   -------------------------------------------------------------------------- */

.cf-drawer__item {
	display: block;
}

.cf-drawer__link--toggle {
	width: 100%;
	margin: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--cf-line-light-10);
	text-align: left;
	cursor: pointer;
	/* A button does not inherit these. */
	font-family: var(--cf-font-body);
	font-weight: 500;
	font-size: 17px;
	line-height: 1.3;
	color: var(--cf-white);
}

.cf-drawer__chev--acc {
	transform: rotate(0deg);
}

.cf-drawer__item.is-open .cf-drawer__chev--acc {
	transform: rotate(180deg);
	color: var(--cf-cyan);
}

/* The rotation is the whole affordance, so the hover nudge must not apply. */
.cf-drawer__link--toggle:hover .cf-drawer__chev--acc {
	transform: none;
}

.cf-drawer__item.is-open .cf-drawer__link--toggle:hover .cf-drawer__chev--acc {
	transform: rotate(180deg);
}

.cf-drawer__item.is-open .cf-drawer__link--toggle {
	color: var(--cf-cyan);
	border-bottom-color: transparent;
}

.cf-drawer__sub {
	display: flex;
	flex-direction: column;
	padding: 4px 0 12px 14px;
	border-bottom: 1px solid var(--cf-line-light-10);
	/* Marks the group as belonging to the row above it. */
	border-left: 1px solid var(--cf-line-light-10);
	margin-left: 2px;
}

.cf-drawer__sublink {
	padding: 12px 0 12px 14px;
	font-family: var(--cf-font-body);
	font-weight: 400;
	font-size: 15.5px;
	line-height: 1.4;
	color: var(--cf-sky);
	text-decoration: none;
	transition: color .2s var(--cf-ease);
}

.cf-drawer__sublink:hover,
.cf-drawer__sublink:focus-visible,
.cf-drawer__sublink[aria-current='page'] {
	color: var(--cf-cyan);
}

@media (prefers-reduced-motion: reduce) {
	.cf-drawer__chev--acc {
		transition: none;
	}
}

/* --- Newsletter: the answer ------------------------------------------------
   The prototype's form had nowhere to say anything, because it submitted
   nowhere. It talks to the Newsletter plugin now, so it needs one line for
   "check your inbox", "already subscribed" and the failures.
   -------------------------------------------------------------------------- */

.cf-newsletter__status {
	margin: 2px 0 0;
	font-family: var(--cf-font-body);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--cf-sky);
}

.cf-newsletter__status.is-ok {
	color: var(--cf-cyan);
}

.cf-newsletter__status.is-error {
	color: var(--cf-error);
}

.cf-newsletter.is-busy .cf-newsletter__submit {
	opacity: .6;
	cursor: progress;
}