/* Fidano 2026 – Grundgerüst der Webseite: Seite, Kopf, Fuß, Einschweben, Ratgeber-Inhalte.
   Die Bausteine der Abschnitte (fp-…) stehen in komponenten.css.
   Nur Rollen-Token aus fidano-tokens.css (fidano-design REGELN.md 3), keine festen Farbwerte.
   Umbruchpunkte nach REGELN 3.11: Handy 767px, Tablet 1023px. */

html { scroll-behavior: smooth; }
body { background: var(--grund); color: var(--text); font-family: var(--schrift-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-family: var(--schrift-titel); font-weight: var(--gewicht-titel); letter-spacing: var(--sperrung-titel); color: var(--text); text-wrap: balance; }
p { text-wrap: pretty; }
img { height: auto; }
:where(a, button, summary):focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: var(--r-klein); }
@media (max-width: 767px) { :root { --rand: 16px; } }

/* Linien-Symbole (REGELN 3.13): Strich 1,75 px, runde Enden, Farbe aus dem Text */
.f-ico { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Vollbreite Abschnitte stoßen direkt aneinander */
.wp-site-blocks > *,
main.wp-block-group > *,
main.wp-block-group > .wp-block-post-content > .alignfull { margin-block-start: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- Kopfbereich (dunkel, Glas beim Scrollen, REGELN 3.10) ---------- */
.f-header { position: sticky; top: 0; z-index: 50; background: var(--grund); color: var(--text); border-bottom: 1px solid transparent; transition: background-color var(--dauer-mittel) var(--kurve-ruhig), border-color var(--dauer-mittel) var(--kurve-ruhig); }
.f-header.is-scrolled { background: var(--flaeche-glas); -webkit-backdrop-filter: var(--glas-unschaerfe); backdrop-filter: var(--glas-unschaerfe); border-bottom-color: var(--linie); }
.admin-bar .f-header { top: var(--wp-admin--admin-bar--height, 32px); }
.f-header__inner { max-width: var(--wp--style--global--wide-size); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--a-6); padding: var(--a-3) var(--rand); }
.f-header .f-logo img { display: block; height: 66px; width: auto; margin-block: -10px; transform-origin: left center; transition: transform var(--dauer-mittel) var(--kurve-ruhig); }
.f-header.is-scrolled .f-logo img { transform: scale(.85); }
.f-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.f-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1rem, 2.2vw, 2rem); }
.f-nav ul a { position: relative; padding-block: var(--a-2); color: var(--text-matt); text-decoration: none; font-size: .9375rem; font-weight: var(--gewicht-ui); transition: color var(--dauer-hover) var(--kurve-ruhig); }
.f-nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: var(--r-rund); background: var(--akzent); transform: scaleX(0); transform-origin: left; transition: transform var(--dauer-hover) var(--kurve-ruhig); }
.f-nav ul a:hover, .f-nav ul a[aria-current="page"] { color: var(--text); }
.f-nav ul a:hover::after, .f-nav ul a[aria-current="page"]::after { transform: scaleX(1); }
.f-vp { display: inline-flex; align-items: center; gap: var(--a-2); color: var(--text-matt); text-decoration: none; font-size: .9375rem; font-weight: var(--gewicht-ui); transition: color var(--dauer-hover) var(--kurve-ruhig); }
.f-vp .f-ico { width: 1.05rem; height: 1.05rem; color: var(--akzent); }
.f-vp:hover { color: var(--text); }
.f-header .f-cta { min-height: 2.75rem; font-size: .9375rem; white-space: nowrap; }
.f-menu-toggle { display: none; min-height: 2.75rem; padding: 0 var(--a-4); border: 1px solid var(--knopf-neben-rand); border-radius: var(--r-rund); background: transparent; color: var(--text); font: var(--gewicht-ui) .9375rem var(--schrift-text); cursor: pointer; transition: border-color var(--dauer-hover) var(--kurve-ruhig), background-color var(--dauer-hover) var(--kurve-ruhig); }
.f-menu-toggle:hover { border-color: var(--akzent); background: var(--flaeche-tief); }
@media (max-width: 1023px) {
	.f-menu-toggle { display: inline-flex; align-items: center; }
	.f-nav {
		position: fixed; inset: 0 0 auto 0; top: var(--f-header-h, 76px); flex-direction: column; align-items: stretch; gap: var(--a-4);
		padding: var(--a-4) var(--rand) var(--a-6); background: var(--grund); border-bottom: 1px solid var(--linie); box-shadow: var(--tiefe-3);
		transform: translateY(-120%); visibility: hidden; transition: transform var(--dauer-mittel) var(--kurve-ruhig), visibility 0s linear var(--dauer-mittel);
	}
	.f-nav.is-open { transform: none; visibility: visible; transition: transform var(--dauer-mittel) var(--kurve-ruhig); }
	.f-nav ul { flex-direction: column; gap: 0; }
	.f-nav ul a { display: block; padding: var(--a-4) 0; border-bottom: 1px solid var(--linie); font-size: 1.0625rem; }
	.f-nav ul a::after { display: none; }
	.f-vp { justify-content: center; padding: var(--a-3); }
	.f-header .f-logo img { height: 56px; margin: -10px 0 -10px -12px; }
}

/* ---------- Fußbereich (dunkel) ---------- */
.f-footer { background: var(--grund); color: var(--text-matt); font-size: .9375rem; }
.f-footer__grid { max-width: var(--wp--style--global--wide-size); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--rand) var(--a-8); display: grid; gap: var(--a-10); grid-template-columns: 1.4fr repeat(3, 1fr); }
.f-footer__claim { margin-top: var(--a-5); max-width: 22rem; line-height: var(--zh-text); }
.f-footer a { color: var(--text); text-decoration: none; transition: color var(--dauer-hover) var(--kurve-ruhig); }
.f-footer a:hover { color: var(--akzent); }
.f-footer h4 { margin: 0 0 var(--a-4); font-size: var(--gr-label); font-weight: var(--gewicht-ui); letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--akzent); }
.f-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--a-2); }
.f-footer .f-logo img { display: block; height: 72px; width: auto; margin: -12px 0 -12px -14px; }
.f-footer__base { border-top: 1px solid var(--linie); font-size: var(--gr-klein); }
.f-footer__base > div { max-width: var(--wp--style--global--wide-size); margin: 0 auto; padding: var(--a-5) var(--rand); display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-6); justify-content: space-between; }
@media (max-width: 1023px) { .f-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
	.f-footer__grid { grid-template-columns: 1fr; gap: var(--a-8); }
	/* Platz für die feste Leiste am Handy */
	body:has(.fp-mobil) .f-footer__base { padding-bottom: 5rem; }
}

/* ---------- Seitenkopf schlicht (Ratgeber, Rechtliches, 404) ---------- */
.f-pagehead { background: var(--grund-tief); border-bottom: 1px solid var(--linie); padding: clamp(3rem, 7vw, 5rem) var(--rand) clamp(2rem, 4vw, 3rem); }
.f-pagehead > * { max-width: var(--wp--style--global--wide-size); margin-inline: auto !important; }
.f-pagehead h1 { font-size: var(--gr-display); line-height: var(--zh-display); max-width: 20ch; margin-block: var(--a-3) var(--a-4); }
.f-pagehead .f-lead { font-size: 1.125rem; line-height: var(--zh-text); color: var(--text-matt); max-width: 40rem; margin: 0; }
.f-pagehead .f-meta { display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-4); font-size: var(--gr-klein); color: var(--text-matt); }
.f-pagehead .f-meta p { margin: 0; }
.f-label { margin: 0; font-size: var(--gr-label); font-weight: var(--gewicht-ui); letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--akzent); }
.f-section--tight { padding: clamp(2.5rem, 5vw, 4rem) var(--rand); }
.f-404 a { color: var(--akzent); }

/* ---------- Ratgeber: Artikel-Kacheln (ganze Kachel klickbar, REGELN 3.7 und 3.15) ---------- */
.f-cards .wp-block-post-template { gap: var(--a-6); }
.f-card { position: relative; isolation: isolate; height: 100%; display: flex; flex-direction: column; gap: var(--a-2); padding: var(--a-3) var(--a-3) var(--a-6); border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--flaeche); box-shadow: var(--tiefe-1); transition: transform var(--dauer-hover) var(--kurve-ruhig), box-shadow var(--dauer-hover) var(--kurve-ruhig), border-color var(--dauer-hover) var(--kurve-ruhig); }
.f-card:hover { transform: translateY(var(--hover-karte)); box-shadow: var(--tiefe-2); border-color: var(--akzent-rand); }
.f-card > * { margin: 0 !important; padding-inline: var(--a-3); }
.f-card .wp-block-post-featured-image { padding: 0; overflow: hidden; border-radius: var(--r-innen); aspect-ratio: 16 / 10; background: var(--akzent-flaeche); margin-bottom: var(--a-3) !important; }
.f-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dauer-lang) var(--kurve-ruhig); }
.f-card:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.f-card .wp-block-post-terms a { position: relative; z-index: 2; font-size: var(--gr-label); font-weight: var(--gewicht-ui); letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--akzent); text-decoration: none; }
.f-card .wp-block-post-title { font-size: var(--gr-titel); line-height: var(--zh-titel); }
.f-card .wp-block-post-title a { color: var(--text); text-decoration: none; transition: color var(--dauer-hover) var(--kurve-ruhig); }
/* Der Titel-Link deckt die ganze Kachel ab */
.f-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-karte); }
.f-card:hover .wp-block-post-title a { color: var(--akzent); }
.f-card .wp-block-post-excerpt { color: var(--text-matt); font-size: .9375rem; line-height: var(--zh-text); }
.f-card .wp-block-post-excerpt p { margin: 0; }
.f-card .wp-block-post-excerpt__more-link { display: none; }
.wp-block-query-pagination { margin-top: var(--a-10) !important; gap: var(--a-2); font-weight: var(--gewicht-ui); }
.wp-block-query-pagination a, .wp-block-query-pagination .current { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--a-3); border-radius: var(--r-rund); color: var(--text); text-decoration: none; transition: background-color var(--dauer-hover) var(--kurve-ruhig); }
.wp-block-query-pagination a:hover { background: var(--flaeche-tief); }
.wp-block-query-pagination .current { background: var(--knopf-haupt); color: var(--knopf-haupt-text); }
@media (max-width: 1023px) { .f-cards .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .f-cards .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; } }

/* ---------- Ratgeber-Artikel und einfache Inhaltsseiten ---------- */
.f-article .wp-block-post-content, .f-section--tight { color: var(--text); font-size: 1.0625rem; line-height: 1.7; }
.f-article .wp-block-post-content > * + * { margin-top: 1.25em; }
.f-article .wp-block-post-content h2 { font-size: var(--gr-h1); line-height: var(--zh-h1); margin-top: 2em; }
.f-article .wp-block-post-content h3 { font-size: var(--gr-h2); line-height: var(--zh-h2); margin-top: 1.6em; }
.f-article .wp-block-post-content a, .f-section--tight a { color: var(--akzent); }
.f-article .wp-block-post-content ul { padding-left: 1.25em; }
.f-article .wp-block-post-content li::marker { color: var(--akzent); }
.f-article .wp-block-post-content blockquote { margin-inline: 0; padding: var(--a-5) var(--a-6); border-radius: var(--r-innen); background: var(--flaeche); font-size: 1.125rem; }
.f-article .wp-block-post-content :is(.f-note, .wp-block-group.f-note) { padding: var(--a-4) var(--a-5); border-radius: var(--r-innen); background: var(--flaeche); color: var(--text-matt); font-size: .9375rem; }
.f-article .wp-block-post-content img { border-radius: var(--r-innen); }

/* Knöpfe aus dem Block-Editor (Ratgeber-Inhalte) wie fp-knopf */
.wp-block-button__link { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 var(--a-6); border: 1px solid var(--knopf-haupt); border-radius: var(--r-rund); background: var(--knopf-haupt); color: var(--knopf-haupt-text); font: var(--gewicht-ui) 1rem/1 var(--schrift-text); text-decoration: none; transition: background-color var(--dauer-hover) var(--kurve-ruhig), border-color var(--dauer-hover) var(--kurve-ruhig), transform var(--dauer-hover) var(--kurve-ruhig); }
.wp-block-button__link:hover { background: var(--knopf-haupt-hover); border-color: var(--knopf-haupt-hover); color: var(--knopf-haupt-text); transform: translateY(var(--hover-knopf)); }

/* ---------- Bewegung: Einschweben beim Scrollen (REGELN 3.8) ----------
   Ohne JS oder bei reduzierter Bewegung bleibt alles sichtbar. */
.js .f-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dauer-lang) var(--kurve-ruhig), transform var(--dauer-lang) var(--kurve-ruhig); }
.js .f-reveal.is-in { opacity: 1; transform: none; }
.js .f-reveal[data-delay="1"] { transition-delay: 80ms; }
.js .f-reveal[data-delay="2"] { transition-delay: 160ms; }
.js .f-reveal[data-delay="3"] { transition-delay: 240ms; }
.js .f-reveal[data-delay="4"] { transition-delay: 320ms; }
.js .f-reveal[data-delay="5"] { transition-delay: 400ms; }

/* Große Überschrift baut sich Zeile für Zeile auf (Höhepunkt beim Laden) */
.f-line { display: block; overflow: hidden; padding-bottom: .06em; }
.f-line > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
	.js .f-line > span { animation: f-zeile var(--dauer-lang) var(--kurve-ruhig) both; }
	.js .f-line:nth-child(2) > span { animation-delay: 90ms; }
	.js .f-line:nth-child(3) > span { animation-delay: 180ms; }
}
@keyframes f-zeile { from { transform: translateY(105%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .f-reveal { opacity: 1; transform: none; transition: none; }
	.f-card:hover, .f-card:hover .wp-block-post-featured-image img, .wp-block-button__link:hover { transform: none; }
	.f-header .f-logo img, .f-nav { transition: none; }
}

/* Azad 23.10.2026: schwebender Knopf „VP-Portal Login“ (Snippet 14) auf der neuen Webseite weg – oben gibt es den Login schon. Wirkt nur, wo die Weiche dieses Theme lädt. */
.fidano-vp-float-btn { display: none !important; }