/* Landingpage „Gewaltfreie Kommunikation" (Seite gewaltfreie-kommunikation).
 * Gestaltung liegt hier, nicht in Block-Attributen. Geladen nur auf dieser Seite.
 *
 * Abstände folgen einer Skala nach dem goldenen Schnitt (φ ≈ 1,618), Basis 1rem:
 *   --g-2 .382rem · --g-1 .618rem · --g0 1rem · --g1 1.618rem · --g2 2.618rem · --g3 4.236rem · --g4 6.854rem
 * Farben nur aus der Palette; Abstufungen per color-mix aus Palettenfarben.
 */
:root {
	--g-2: .382rem;
	--g-1: .618rem;
	--g0: 1rem;
	--g1: 1.618rem;
	--g2: 2.618rem;
	--g3: 4.236rem;
	--g4: 6.854rem;
	/* Mauve für hellen Grund (Kontrast ≥ 4,5:1 auf tertiary/base) */
	--hn-mauve-dunkel: color-mix(in srgb, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--main));
	--hn-mauve-verlauf: color-mix(in srgb, var(--wp--preset--color--primary) 82%, var(--wp--preset--color--main));
}

/* ---------- Sektionen ---------- */
.hn-gfk-section { padding-block: var(--g4) !important; }
.hn-gfk-section > * + * { margin-block-start: var(--g2) !important; }
.hn-stack > * + * { margin-block-start: var(--g1) !important; }
@media (max-width: 781px) {
	.hn-gfk-section { padding-block: var(--g3) !important; }
}

/* ---------- Abschnittsköpfe ---------- */
.hn-section-head > * { margin-block: 0 !important; }
.hn-section-head > .hn-kicker + h2 { margin-block-start: var(--g-1) !important; }
.hn-section-head > h2 + .hn-lead { margin-block-start: var(--g1) !important; }
.hn-section-head h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.12; }
.hn-section-head .hn-lead { line-height: 1.618; }
.hn-section-head.is-center > * { text-align: center; margin-inline: auto; }

/* Mauve auf hellem Grund: dunklere Abstufung */
.hn-gfk-section.is-light .has-primary-color,
.hn-on-light.has-primary-color { color: var(--hn-mauve-dunkel) !important; }

/* ---------- Hero ---------- */
.hn-gfk-hero { padding-block: var(--g4) !important; }
.hn-hero-cols { gap: var(--g3) !important; margin-block: 0 !important; }
.hn-hero-copy > * { margin-block: 0 !important; }
.hn-hero-copy > .hn-kicker + h1 { margin-block-start: 2rem !important; }
.hn-hero-copy > h1 + p { margin-block-start: 2rem !important; }
.hn-hero-copy > .hn-hero-buttons { margin-block-start: 2rem !important; gap: var(--g0) !important; }
.hn-hero-copy > .hn-trust { margin-block-start: var(--g1) !important; }
/* H1, Einleitung und Abstände wie im Hero der Startseite (Theme-H1, Grundschrift, 2rem) */
.hn-hero-lead { line-height: 1.618; }
.hn-hero-img { margin: 0 !important; }
.hn-hero-img img { object-position: 28% center; }
.hn-trust { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--g-1) var(--g1);
	font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--main-accent); }
.hn-trust li { margin: 0 !important; padding: 0; line-height: 1.4; }
.hn-trust li::before { content: "+"; color: var(--wp--preset--color--primary); margin-right: var(--g-1); }
@media (max-width: 781px) {
	.hn-gfk-hero { padding-block: var(--g2) var(--g3) !important; }
	.hn-hero-cols { gap: var(--g2) !important; }
	.hn-hero-media { order: -1; }
	.hn-hero-img img { aspect-ratio: 16 / 10 !important; object-position: 25% 30%; }
}

/* ---------- Raster & Karten ---------- */
.hn-grid { gap: var(--g0) !important; }
.hn-card { padding: var(--g1) !important; gap: var(--g-1) !important; }
.hn-card.is-compact { padding: var(--g0) var(--g1) !important; }
.hn-card > * { margin-block: 0 !important; }
.hn-card .hn-card-title { line-height: 1.3; }
.hn-num { margin: 0; line-height: 1.05 !important; }

/* Kennzahlen + Fußnote + Vorteile */
.hn-footnote { opacity: .8; line-height: 1.5; }
.hn-benefit { padding: var(--g0) var(--g1) !important; border-left: 3px solid var(--wp--preset--color--primary); border-radius: 4px; }
.hn-benefit p { margin: 0; }

/* Bedürfnisse: Titel + Nummer in einer Zeile */
.hn-card > .is-layout-flex { gap: var(--g0); }
.hn-need-num { margin: 0 !important; color: color-mix(in srgb, var(--wp--preset--color--main-accent) 55%, var(--wp--preset--color--main)) !important; }

/* ---------- Vier Schritte ---------- */
.hn-step-circle { width: 2.618rem; height: 2.618rem; border-radius: 50%; border: 1.5px solid var(--wp--preset--color--primary);
	display: grid; place-items: center; font-weight: 700; color: var(--hn-mauve-dunkel) !important; margin-bottom: var(--g-2) !important; }
.hn-step.is-last .hn-step-circle { color: var(--wp--preset--color--primary) !important; }
.hn-step h3 { margin: 0; }
.hn-step-ex { margin-top: auto !important; padding-top: var(--g0); border-top: 1px solid var(--wp--preset--color--border-light); }
.hn-step.is-last .hn-step-ex { border-top-color: var(--wp--preset--color--border-dark); }

/* ---------- Wolf / Giraffe ---------- */
.hn-wg-head { margin-block: 0 !important; }
.hn-wg-label { margin: 0; letter-spacing: 2px; text-transform: uppercase; line-height: 1.5; }
.hn-wg-row > * { margin-block: 0 !important; }
.hn-wg-row > * + * { margin-block-start: var(--g-1) !important; }
.hn-wg-pair { gap: var(--g2) !important; }
.hn-wg-pair .wp-block-column > .wp-block-group { height: 100%; justify-content: center; }
.hn-wg-pair p { margin: 0; }
.hn-wg-pair { margin-block: 0 !important; }
.hn-wolf s { text-decoration-thickness: 1.5px; }
@media (min-width: 782px) {
	.hn-wg-head { gap: var(--g2) !important; }
	.hn-wg-pair .wp-block-column:last-child { position: relative; }
	.hn-wg-pair .wp-block-column:last-child::before { content: "→"; position: absolute; left: calc(-1 * var(--g2) / 2); top: 50%;
		transform: translate(-50%, -50%); color: var(--wp--preset--color--primary); font-size: 1.2rem; }
}
@media (max-width: 781px) {
	.hn-wg-pair { gap: var(--g-1) !important; }
	.hn-wg-head { display: none !important; }
}

/* ---------- Listen ---------- */
.hn-check, .hn-arrow { list-style: none; padding: 0; margin: var(--g-1) 0 0 !important; font-size: var(--wp--preset--font-size--small); }
.hn-check li, .hn-arrow li { position: relative; margin: 0 !important; padding: var(--g-1) 0 var(--g-1) var(--g1); border-top: 1px solid var(--wp--preset--color--border-dark); line-height: 1.45; }
.hn-check li::before { content: "✓"; position: absolute; left: 0; color: var(--wp--preset--color--primary); font-weight: 700; }
.hn-check.is-dark li { border-top-color: color-mix(in srgb, var(--wp--preset--color--main) 18%, transparent); }
.hn-check.is-dark li::before { color: var(--wp--preset--color--main); }
.hn-arrow li::before { content: "→"; position: absolute; left: 0; color: var(--wp--preset--color--primary); }
.has-base-background-color .hn-arrow li { border-top-color: var(--wp--preset--color--border-light); }
.has-base-background-color .hn-arrow li::before { color: var(--hn-mauve-dunkel); }
.hn-module.is-feature { background-image: linear-gradient(160deg, var(--wp--preset--color--primary), var(--hn-mauve-verlauf)); }

/* ---------- Ablauf ---------- */
.hn-timeline { gap: var(--g-1) !important; }
.hn-tl { border-top: 3px solid var(--wp--preset--color--primary) !important; gap: var(--g-2) !important; }

/* ---------- Good Guy / Bad Guy ---------- */
.hn-gg-sub { margin-top: calc(-1 * var(--g-2)) !important; }
.hn-answer { padding: var(--g0) var(--g1) !important; margin-top: var(--g-1) !important; }
.hn-answer p { margin: 0; }

/* ---------- Für wen ---------- */
.hn-target-quote { margin-top: auto !important; padding-top: var(--g0); border-top: 1px solid var(--wp--preset--color--border-dark); }
.hn-refs { align-items: baseline; gap: var(--g-1) var(--g1) !important; }
.hn-refs p { margin: 0; }

/* ---------- Trainer ---------- */
.hn-trainer { gap: var(--g3) !important; }
.hn-trainer .wp-block-column > * { margin-block: 0 !important; }
.hn-trainer .wp-block-column > * + * { margin-block-start: var(--g1) !important; }
.hn-trainer .wp-block-column > .hn-kicker + h2 { margin-block-start: var(--g-1) !important; }
.hn-trainer .wp-block-image { margin: 0 !important; }
.hn-badge { display: inline-block; padding: var(--g-2) var(--g0); border: 1px solid var(--wp--preset--color--primary); border-radius: 999px; }
.hn-stats { gap: var(--g1) !important; margin-block-start: var(--g2) !important; }
.hn-stat > * { margin: 0 !important; }

/* ---------- FAQ ---------- */
.hn-faq > * { margin-block: 0 !important; }
.hn-faq-item { border-bottom: 1px solid var(--wp--preset--color--border-dark); padding: var(--g0) 0; }
.hn-faq-item:first-child { border-top: 1px solid var(--wp--preset--color--border-dark); }
.hn-faq-item summary { font-weight: 700; color: var(--wp--preset--color--base); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--g0); min-height: 44px; align-items: center; }
.hn-faq-item summary::-webkit-details-marker { display: none; }
.hn-faq-item summary::after { content: "+"; color: var(--wp--preset--color--primary); font-size: 1.3rem; line-height: 1; transition: transform .2s; }
.hn-faq-item[open] summary::after { transform: rotate(45deg); }
.hn-faq-item summary:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 4px; }
.hn-faq-item p { margin: var(--g-1) 0 0; line-height: 1.618; }
@media (prefers-reduced-motion: reduce) { .hn-faq-item summary::after { transition: none; } }

/* ---------- Anfrage-Karte ---------- */
.hn-cta-final { padding: var(--g3) var(--g2) !important; background-image: linear-gradient(160deg, var(--wp--preset--color--primary), var(--hn-mauve-verlauf)); }
.hn-cta-final > * { margin-block: 0 !important; }
.hn-cta-final > * + * { margin-block-start: var(--g1) !important; }
.hn-cta-final > h2 { margin-block-start: var(--g-1) !important; }
.hn-cta-final .wp-block-button.is-style-button-outline .wp-block-button__link { color: var(--wp--preset--color--main); border-color: color-mix(in srgb, var(--wp--preset--color--main) 40%, transparent); }
.hn-cta-final .wp-block-buttons { gap: var(--g-1) !important; }
.hn-gfk-form { padding: var(--g1) !important; margin-block-start: var(--g2) !important; }
.hn-gfk-form > * { margin-block: 0 !important; }
.hn-privacy-note { margin-block-start: var(--g0) !important; line-height: 1.5; }
.hn-privacy-note a { color: inherit; text-decoration: underline; }
@media (max-width: 781px) {
	.hn-cta-final { padding: var(--g2) var(--g0) !important; }
	.hn-gfk-form { padding: var(--g0) !important; }
}

/* Formular hell auf der Mauve-Karte (überschreibt die dunklen Feldstile der Seite) */
.hn-gfk-form .fluentform .ff-el-input--label label { color: var(--wp--preset--color--main) !important; font-weight: 700; font-size: .85rem; }
.hn-gfk-form .fluentform .ff-el-form-control { background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--main) !important; border: 1px solid color-mix(in srgb, var(--wp--preset--color--main) 22%, transparent) !important; min-height: 44px; }
.hn-gfk-form .fluentform .ff-el-form-control::placeholder { color: var(--wp--preset--color--secondary) !important; opacity: 1; }
.hn-gfk-form .fluentform .ff-el-form-control:focus { outline: 2px solid var(--wp--preset--color--main) !important; outline-offset: 1px; }
.hn-gfk-form .fluentform .ff-btn-submit { background: var(--wp--preset--color--main) !important; color: var(--wp--preset--color--base) !important; border: 0 !important; min-height: 44px; padding-inline: var(--g1) !important; }
.hn-gfk-form .fluentform .ff-el-group { margin-bottom: var(--g0); }
.hn-gfk-form .ff_submit_btn_wrapper { text-align: center; }
@media (min-width: 782px) {
	.hn-gfk-form .fluentform fieldset { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--g1); }
	.hn-gfk-form .fluentform fieldset > .ff-el-group:nth-last-child(-n+2),
	.hn-gfk-form .fluentform fieldset > .ff_submit_btn_wrapper,
	.hn-gfk-form .fluentform fieldset > input[type="hidden"] { grid-column: 1 / -1; }
}

/* Lange Komposita („Konfliktmanagement") passen bei Tablet-Breite nicht in die Modulkarte */
.hn-module h3 { font-size: clamp(1.618rem, 2.6vw, 2.35rem); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* Feste Spaltenzahl je Raster (Vorlage: 3×2, 4er-Reihen, 8 Ablauf-Kacheln) – Tablet 2, Handy 1 */
.hn-grid.hn-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.hn-grid.hn-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.hn-grid.hn-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.hn-grid.hn-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
@media (max-width: 1023px) {
	.hn-grid.hn-cols-3, .hn-grid.hn-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.hn-grid.hn-cols-8 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 599px) {
	.hn-grid.hn-cols-2, .hn-grid.hn-cols-3, .hn-grid.hn-cols-4 { grid-template-columns: minmax(0, 1fr) !important; }
	.hn-grid.hn-cols-8 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}