/*
Theme Name: Hygienenetz NRW
Theme URI: https://hygienenetz-nrw.de
Author: Dr. Rudolf Eicker
Description: Block-Theme für hygienenetz-nrw.de – Krankenhaushygienische Beratung und Schulungen. Schriften lokal eingebunden (keine Verbindung zu Google).
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hygienenetz
*/

/* Abstände zwischen Kopfzeile, Inhalt und Fußzeile */
.wp-site-blocks > * { margin-block-start: 0; }

/* Kopfzeile */
.hn-header {
	border-bottom: 1px solid var(--wp--preset--color--linie);
	padding-top: 18px;
	padding-bottom: 18px;
}
.hn-header .wp-block-site-title { font-family: var(--wp--preset--font-family--inter-display); font-weight: 700; font-size: 1.25rem; }
.hn-header .wp-block-site-title a { color: var(--wp--preset--color--nacht); text-decoration: none; }
.hn-header .wp-block-navigation { font-weight: 600; }
.hn-header .wp-block-navigation a { color: var(--wp--preset--color--nacht); text-decoration: none; }
.hn-header .wp-block-navigation a:hover,
.hn-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--petrol); text-decoration: underline; text-underline-offset: 6px; }

/* Fußzeile */
.hn-footer {
	background: var(--wp--preset--color--tief);
	color: var(--wp--preset--color--nebel);
	padding-top: 28px;
	padding-bottom: 28px;
	font-size: var(--wp--preset--font-size--small);
}
.hn-footer a { color: var(--wp--preset--color--nebel); }
.hn-footer a:hover { color: var(--wp--preset--color--hell); }
.hn-footer p { margin: 0; }

/* Abschnitte */
.hn-section { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); }
.hn-soft { background: var(--wp--preset--color--salbei); }
.hn-dark { background: var(--wp--preset--color--nacht); color: var(--wp--preset--color--nebel); }
.hn-dark :where(h1, h2, h3, h4) { color: var(--wp--preset--color--hell); }
.hn-dark a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--mint); }
.hn-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--wp--preset--color--mint); color: var(--wp--preset--color--nacht); }
.hn-dark .wp-block-button.is-style-outline .wp-block-button__link { border: 2px solid var(--wp--preset--color--mint); color: var(--wp--preset--color--hell); background: transparent; }
.wp-block-button.is-style-outline .wp-block-button__link { border: 2px solid currentColor; padding-top: 12px; padding-bottom: 12px; }

/* Kleine Überschrift über dem Titel */
.hn-eyebrow { font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--petrol); }
.hn-dark .hn-eyebrow { color: var(--wp--preset--color--mint); }

/* Karten */
.hn-card {
	background: var(--wp--preset--color--weiss);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 16px;
	padding: 28px;
	height: 100%;
	box-sizing: border-box;
}
.hn-card > * { margin-top: 0; }
.hn-card > * + * { margin-top: 0.75rem; }
.hn-card.hn-dark { border: none; }
.hn-card.hn-placeholder { background: transparent; border: 2px dashed #9FB6B1; }
.hn-step { font-family: var(--wp--preset--font-family--inter-display); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--wp--preset--color--petrol); }
.hn-dark .hn-step { color: var(--wp--preset--color--mint); }
.hn-fact-label { font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--preset--color--petrol); margin-bottom: 0.25rem; }
.hn-fact { color: var(--wp--preset--color--nacht); margin-top: 0 !important; }

/* Etiketten */
.hn-badge { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: 0.875rem; font-weight: 700; background: var(--wp--preset--color--mint); color: var(--wp--preset--color--nacht); }
.hn-badge.hn-badge-grau { background: var(--wp--preset--color--salbei); color: var(--wp--preset--color--text); font-weight: 600; }

/* Hinweis */
.hn-note { background: #FBF1E7; color: #6E3A12; border-radius: 10px; padding: 14px 16px; font-size: var(--wp--preset--font-size--small); }

/* Bilder */
.hn-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; }
.hn-netz img { width: 100%; max-width: 380px; height: auto; margin-inline: auto; display: block; }

/* Spalten gleich hoch */
.wp-block-columns.hn-cards > .wp-block-column > .hn-card { height: 100%; }