/*
Theme Name: Fiele One
Theme URI: https://fiele.de
Author: Fiele One GmbH
Description: Ruhiges, klassisches Block-Theme für die Fiele One GmbH – Familienholding mit langfristigem Anlagehorizont. Komplett im WordPress-Website-Editor pflegbar, ohne externe Schriften oder Skripte.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 3.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fiele-one
*/

/* Feinheiten, die theme.json nicht abdeckt */

html { scroll-behavior: smooth; }
:target { scroll-margin-top: 6rem; }

.fo-eyebrow {
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.fo-rule-top { border-top: 1px solid var(--wp--preset--color--line); }

/* Bühne: Text auf derselben Kante wie Logo und Abschnitte */
.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-left .wp-block-cover__inner-container { width: 100%; }
.fo-hero-text > * { max-width: 880px; }

/* Nummerierte Grundsätze */
.fo-principle .fo-num {
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent);
}

/* Beteiligungs-/Branchenkacheln */
.fo-field {
	border-top: 1px solid var(--wp--preset--color--line);
	transition: border-color .2s ease;
}
.fo-field:hover { border-top-color: var(--wp--preset--color--ink); }

/* Header bleibt beim Scrollen sichtbar */
.fo-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
body.admin-bar .fo-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .fo-header { top: 46px; } }

/* Links im Fließtext dezent */
.wp-block-post-content a:not(.wp-element-button) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Ruhiger Pfeil-Link */
.fo-arrow a::after { content: " →"; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.fo-field { transition: none; }
}

/* ===== Version 2: mehr Charakter ===== */

/* Hervorhebung: kursive Antiqua in Überschriften */
h1 em, h2 em, h3 em, .fo-serif {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
}
.fo-stage h1 em { color: var(--wp--preset--color--accent-light); }
h2 em { color: var(--wp--preset--color--accent); }
.has-ink-background-color h2 em { color: var(--wp--preset--color--accent-light); }

/* Bühne mit isometrischem Raster – Kanten im Winkel der Bildmarke (30°) */
.wp-block-cover.fo-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: url("assets/isometrie.svg") right center / cover no-repeat;
	-webkit-mask-image: linear-gradient(to left, #000 15%, transparent 80%);
	mask-image: linear-gradient(to left, #000 15%, transparent 80%);
}
.wp-block-cover.fo-stage .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* Leiste mit drei Stichworten am Fuß der Bühne */
.fo-stage-bar {
	border-top: 1px solid rgba(230, 234, 240, 0.22);
}
.fo-stage-bar p { margin: 0; }
/* Marker im Stil der schrägen Logo-Streifen */
.fo-stage-bar p::before {
	content: "";
	display: inline-block;
	width: 0.85rem; height: 0.7rem;
	margin-right: 0.7rem;
	background: var(--wp--preset--color--accent-light);
	clip-path: polygon(0 58%, 100% 0, 100% 42%, 0 100%);
	vertical-align: 0;
}

/* Große Ziffern bei den Grundsätzen */
.fo-principle .fo-num {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: clamp(2.75rem, 5vw, 4rem);
	line-height: 1;
	margin-bottom: 1.25rem;
}

/* Beteiligungs-Karten auf dunklem Grund */
.fo-card {
	position: relative;
	min-height: 19rem;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(230, 234, 240, 0.16);
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.fo-card .fo-card-index { color: var(--wp--preset--color--accent-light); }
.fo-card .fo-card-text { margin-top: auto; color: #A7B3C2; }
.fo-card:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}
.fo-card:hover .fo-card-index,
.fo-card:hover .fo-card-text { color: var(--wp--preset--color--on-dark); }

.fo-group-line { border-top: 1px solid rgba(230, 234, 240, 0.16); }
.fo-group-line a { color: var(--wp--preset--color--on-dark); }

/* Statement-Band in Fiele-Blau */
.fo-statement p { margin: 0; }
.fo-statement .fo-statement-text {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	line-height: 1.18;
	letter-spacing: -0.015em;
}

/* Große Mailadresse im Kontakt */
.fo-mail a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 0.08em;
	transition: color .2s ease;
}
.fo-mail a:hover { color: var(--wp--preset--color--accent); }

@media (prefers-reduced-motion: reduce) {
	.fo-card, .fo-mail a { transition: none; }
}

@media (max-width: 781px) {
	.fo-card { min-height: 0; }
	.fo-card .fo-card-text { margin-top: 1rem; }
}

/* Fußzeile: feine Linie über dem Copyright */
.fo-footer-copy {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(230, 234, 240, 0.16);
	color: #8D9AAB;
}

/* Logo */
.fo-logo { margin: 0; line-height: 0; }
.fo-logo img { display: block; height: auto; }
.fo-header .fo-logo img { width: clamp(118px, 12vw, 148px); }
.fo-logo-footer img { width: 132px; margin-bottom: 1.25rem; }

/* Kein Leerraum zwischen letztem Abschnitt und Fußbereich */
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }