/*
Theme Name: Mighty8
Template: twentytwentyfive
Description: Child-Theme für mightyeight.de auf Basis von Twenty Twenty-Five. Inhalte bleiben im Block-Editor bearbeitbar.
Version: 1.3.2
Requires at least: 6.7
Text Domain: mighty8
*/

:root {
	--m8-bg: var(--wp--preset--color--base);
	--m8-text: var(--wp--preset--color--contrast);
	--m8-text-2: var(--wp--preset--color--text-2);
	--m8-accent: var(--wp--preset--color--accent-1);
	--m8-accent-light: var(--wp--preset--color--accent-2);
	--m8-surface: var(--wp--preset--color--accent-3);
	--m8-lime: var(--wp--preset--color--accent-5);
	--m8-grey: var(--wp--preset--color--accent-6);
	--m8-nav: #cfd3e5;
	--m8-line: rgba(233, 233, 237, .14);
}

body {
	background:
		radial-gradient(900px 640px at 30% -80px, rgba(143, 174, 58, .34), transparent 64%),
		radial-gradient(1100px 800px at -10% 100%, rgba(0, 0, 0, .3), transparent 55%),
		var(--m8-bg);
	background-repeat: no-repeat;
	text-wrap: pretty;
	/* Sicherheitsnetz gegen horizontalen Überlauf. Im Impressum steht
	   "Verbraucherstreitbeilegung/Universalschlichtungsstelle" - 54 Zeichen
	   ohne Bindestrich oder Leerzeichen. Auf dem iPhone (rund 342px
	   Inhaltsbreite) war das Wort breiter als die Seite, wodurch sich das
	   gesamte Dokument samt Header und Footer seitlich verschieben ließ. */
	overflow-wrap: break-word;
}

/* Lange deutsche Komposita sauber trennen statt hart abzuschneiden.
   Bewusst nur im Fließtext - in den großen Überschriften sieht automatische
   Silbentrennung schlecht aus. Greift über lang="de" am <html>-Element. */
p, li, dd, dt, figcaption, .wpcf7-list-item-label { hyphens: auto; }
/* sanftes Scrollen zu Ankern - aber nicht gegen den Willen des Betriebssystems */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
[id] { scroll-margin-top: 88px; }

/* Fokus: das Outline nach einem Mausklick unterdrücken, bei Tastaturbedienung
   aber sichtbar lassen. Ein ersatzloses outline:none macht die Seite für
   Tastaturnutzer unbedienbar (WCAG 2.4.7). */
:is(a, button, input, select, textarea, summary, .wp-element-button):focus:not(:focus-visible) { outline: none; }
:is(a, button, input, select, textarea, summary, .wp-element-button):focus-visible {
	outline: 2px solid var(--m8-accent);
	outline-offset: 3px;
}
/* weißes Antipp-Aufblitzen (WebKit Tap-Highlight) auf Links/Buttons entfernen */
a, button { -webkit-tap-highlight-color: transparent; }

/* Header: oben transparent, beim Scrollen fixiert mit Hintergrund */
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; transition: background .25s ease, backdrop-filter .25s ease; }
header.wp-block-template-part.is-scrolled { background: rgba(12, 20, 27, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* backdrop-filter erzeugt einen Containing Block und bricht dadurch position:fixed des mobilen Menü-Overlays (wird auf Header-Höhe gequetscht) - beim offenen Menü deaktivieren */
header.wp-block-template-part.is-scrolled:has(.wp-block-navigation__responsive-container.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Mobil-Overlay hat z-index:100000 (WP-Core) und würde Logo/Markenname sonst verdecken - Header-Leiste darüber halten */
header.wp-block-template-part:has(.is-menu-open) { z-index: 100001; }
body.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { body.admin-bar header.wp-block-template-part { top: 46px; } }
.m8-header { padding-block: 14px; }
/* eigener Stapelkontext mit z-index über dem mobilen Menü-Overlay (dessen eigener Stapelkontext liegt bei 100000), damit Logo/Titel beim geöffneten Menü sichtbar bleiben */
.m8-brand { gap: 10px; position: relative; z-index: 100002; }
.m8-brand .wp-block-site-logo img { display: block; margin: -7px -7px -7px -9px; }
.m8-header .wp-block-site-title { margin: 0; font-size: 15px; font-weight: 500; }
.m8-header .wp-block-site-title a { color: var(--m8-text); text-decoration: none; }
.m8-header-right { gap: 28px; }
.m8-header .wp-block-navigation { font-size: 14px; gap: 28px; }
/* Markenname, Menüpunkte und CTA nie umbrechen - auf dem Tablet hat Flexbox
   sonst lieber den Titel und den Button zweizeilig gequetscht */
.m8-header .wp-block-site-title,
.m8-header .wp-block-navigation-item__content,
.m8-header .m8-header-cta .wp-block-button__link { white-space: nowrap; }
.m8-header .wp-block-navigation a { color: var(--m8-nav); }
.m8-header .wp-block-navigation a:hover { color: var(--m8-text); text-decoration: none; }
.m8-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--m8-bg) !important; color: var(--m8-text) !important; }
@media (max-width: 781px) { .m8-header .m8-header-cta { display: none; } }
/* "Start" und "Kontakt" als Nav-Link nur im mobilen Menü - auf Desktop übernehmen Logo bzw. CTA-Button die Funktion.
   Selektor bewusst mit .wp-block-navigation davor: der Core setzt
   ".wp-block-navigation .wp-block-navigation-item { display: flex }" und würde
   eine einfache Klasse überstimmen. */
@media (min-width: 782px) { .m8-header .wp-block-navigation .m8-nav-mobile-only { display: none; } }
/* Der Core schaltet erst unter 600px auf das Hamburger-Menü. Zwischen 600 und
   781px ist der CTA aber schon ausgeblendet und "Start"/"Kontakt" sichtbar -
   fünf Links nebeneinander passen da nicht. Hamburger daher bis 781px. */
@media (min-width: 600px) and (max-width: 781px) {
	.m8-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.m8-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

.m8-main { margin-block-start: 0; }

/* Kicker & Zahlen */
.m8-kicker, .m8-section p.m8-kicker { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--m8-accent); margin: 0; }
.m8-kicker + * { margin-block-start: 14px; }
.m8-num { font-size: 15px; color: var(--m8-accent); font-variant-numeric: tabular-nums; margin: 0; }
.m8-num + h3 { margin-block-start: 12px; }

/* Hero */
.m8-hero { padding-block: clamp(70px, 10vw, 140px) clamp(50px, 7vw, 90px); margin-block-start: 0; }
.m8-hero .m8-kicker { display: flex; align-items: center; gap: 12px; }
.m8-hero .m8-kicker::before { content: ""; width: 32px; height: 1px; background: linear-gradient(90deg, var(--m8-accent), var(--m8-lime)); }
.m8-hero .m8-kicker + * { margin-block-start: 24px; }
.m8-hero-title { font-size: clamp(42px, 5.6vw, 78px); line-height: 1.08; letter-spacing: -.02em; font-weight: 500; max-width: 16ch; }
/* Hervorgehobener Text in der Hero-Überschrift = Verlauf Akzent → Limette */
.m8-hero-title mark {
	background: linear-gradient(90deg, var(--m8-accent), var(--m8-lime));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent !important;
	-webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: .12em;
}
.m8-hero .m8-lead { margin-block-start: 32px; }
.m8-lead { font-size: 17px; line-height: 28px; max-width: 56ch; }
.m8-sub { font-size: 15.5px; line-height: 26px; max-width: 56ch; color: var(--m8-grey); margin-block-start: 14px; }
.m8-actions { margin-block-start: 30px; gap: 12px; }

/* Button-Stil "Kontur" = zweiter Button */
body .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; border-color: rgba(233, 233, 237, .28); color: var(--m8-text); }
body .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: rgba(233, 233, 237, .08); color: var(--m8-text); }

/* Farbband */
.m8-band { padding-block: clamp(50px, 7vw, 90px); margin-block-start: 0; }
.m8-band .wp-block-columns { gap: 30px 40px; margin: 0; }
.m8-band h3 { font-size: 20px; margin: 0; }
.m8-band p { font-size: 15px; line-height: 24px; color: #d6dae3; margin-block-start: 8px; }
.m8-band .m8-band-kicker { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--m8-accent-light); margin: 0; }
.m8-band .m8-band-title { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.2; font-weight: 500; color: var(--m8-text); margin: 12px 0 0; hyphens: manual; }
/* Tablet: vier Spalten nebeneinander werden zu schmal (~150px, Silbentrennung
   in jeder zweiten Zeile). Kicker + Titel daher als eigene Zeile oben, die
   drei Themen darunter. Core erzwingt ab 782px nowrap mit !important. */
@media (min-width: 782px) and (max-width: 1199px) {
	.m8-band .wp-block-columns { flex-wrap: wrap !important; }
	.m8-band .wp-block-columns > .wp-block-column:first-child { flex-basis: 100%; }
}
/* Desktop: "Ein Ansprechpartner." ist per &nbsp; verbunden und braucht eine
   ganze Zeile - die Titelspalte bekommt dafür etwas mehr Breite als die
   drei Themenspalten. */
@media (min-width: 1200px) {
	.m8-band .wp-block-columns > .wp-block-column:first-child { flex-grow: 1.3; }
}

/* Abschnitte */
.m8-section { padding-block: 0 clamp(50px, 7vw, 90px); margin-block-start: 0; }
#leistungen.m8-section { padding-block-start: clamp(70px, 10vw, 140px); }
#kontakt.m8-section { padding-block-end: clamp(70px, 10vw, 140px); }
.m8-sep { margin-block: 0 clamp(50px, 7vw, 90px) !important; border-top-width: 1px; }
.m8-section h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; letter-spacing: -.015em; max-width: 22ch; margin-block-end: 0; }
.m8-section h2 + .m8-card { margin-block-start: 40px; }
.m8-section p:not([class]) { max-width: 60ch; color: var(--m8-text-2); }
.m8-section .wp-block-columns { gap: 20px clamp(30px, 5vw, 50px); margin: 0; }
.m8-process h2 { font-size: clamp(28px, 3vw, 38px); }
.m8-about h2 { max-width: 16ch; }
.m8-contact h2 { max-width: 18ch; }
.m8-contact .wp-block-columns { gap: 40px clamp(30px, 5vw, 50px); }

/* Ab Desktop sollen die beiden Karten im Kontaktbereich unten bündig
   abschließen. Die Spalten sind durch das Flex-Layout von WordPress ohnehin
   schon gleich hoch - die Karten darin behalten aber ihre natürliche Höhe,
   weshalb mal die eine, mal die andere tiefer endet, je nachdem wie die
   Überschrift umbricht. Mit flex:1 füllt jede Karte den Rest ihrer Spalte.

   Die Spalten selbst auf Flex umzustellen ist unkritisch: die Abstände in
   diesem Theme hängen durchgehend am margin-block-start des jeweils
   folgenden Geschwisterelements, es kollabieren also keine Ränder, die im
   Flex-Kontext plötzlich doppelt zählen würden. */
@media (min-width: 782px) {
	.m8-contact .wp-block-columns > .wp-block-column { display: flex; flex-direction: column; }
	.m8-contact .wp-block-columns > .wp-block-column > .m8-card { flex: 1; }

	/* Gewonnene Höhe ans Nachrichtenfeld weitergeben, statt unten eine leere
	   Fläche in der Karte zu lassen. :has() statt einer eigenen Klasse, damit
	   das Formular nicht an drei Stellen (lokal, live, JSON) nachgezogen
	   werden muss - die Regel gilt ohnehin nur ab 782px. */
	.m8-contact .m8-form-card .wpcf7,
	.m8-contact .m8-form-card .wpcf7 form { display: flex; flex-direction: column; flex: 1; }
	.m8-contact .m8-form-card .wpcf7 form { gap: 18px; }
	/* Das Label ist ein Grid aus Beschriftung + Feld. Damit das Feld die
	   zusätzliche Höhe auch wirklich bekommt, muss die zweite Grid-Zeile
	   mitwachsen (1fr) und die Zwischenebene min-height:0 erlauben. */
	.m8-contact .m8-form-card .wpcf7 form > label:has(textarea) { flex: 1; grid-template-rows: auto 1fr; }
	.m8-contact .m8-form-card .wpcf7 form > label:has(textarea) > .wpcf7-form-control-wrap { display: grid; min-height: 0; }
	.m8-contact .m8-form-card .wpcf7 form > label:has(textarea) textarea { height: 100%; min-height: 110px; }
}

/* Vorgehen: 4 Schritte */
.m8-steps { margin-block-start: 50px !important; gap: 30px 40px !important; }
.m8-step-title { font-size: 18px; margin-block-start: 8px; }
.m8-step-text { font-size: 15px; line-height: 24px; color: var(--m8-text-2); margin-block-start: 6px; }

/* Karten */
.m8-card { background: var(--m8-surface); border: 1px solid var(--m8-line); border-radius: 8px; padding: clamp(30px, 5vw, 50px); }
.m8-card + .m8-card { margin-block-start: 24px; }
.m8-card > .wp-block-columns { align-items: center; gap: 30px clamp(30px, 5vw, 50px); }
.m8-card h3 { font-size: clamp(30px, 3vw, 40px); line-height: 1.15; letter-spacing: -.015em; }
.m8-points { margin-block-start: 20px; padding-left: 1.2em; font-size: 15px; display: grid; gap: 6px; }
.m8-card-small { padding: 24px; margin-block-start: 28px !important; }
.m8-card-small p:not([class]) { font-size: 15px; line-height: 24px; margin-block-start: 0; color: var(--m8-text); }
.m8-card-kicker { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--m8-grey); margin: 0 0 6px; }
p + .m8-card-kicker { margin-block-start: 20px; }
.m8-img { margin: 0; }
.m8-img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }

/* Signatur */
.m8-sig { margin-block-start: 24px; font-size: 14px; line-height: 22px; color: var(--m8-grey); }
.m8-sig strong { font-size: 16px; font-weight: 500; color: var(--m8-text); }

/* Kontaktformular (Contact Form 7) */
.m8-form-card { padding: clamp(24px, 4vw, 40px); }
.m8-form-card .wpcf7 form { display: grid; gap: 18px; }
.m8-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.m8-form-card label { display: grid; gap: 6px; font-size: 14px; color: var(--m8-text); }
.m8-form-card input[type="text"], .m8-form-card input[type="email"], .m8-form-card input[type="tel"], .m8-form-card textarea {
	width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 14px;
	color: var(--m8-text); background: var(--m8-bg); border: 1px solid rgba(233, 233, 237, .22); border-radius: 8px;
}
.m8-form-card textarea { resize: vertical; }
/* Felder bekommen statt eines Outlines einen Akzentrahmen - 2px, damit der
   Fokus auch bei WCAG 2.4.11 deutlich genug ist */
.m8-form-card input:focus, .m8-form-card textarea:focus { outline: none; border-color: var(--m8-accent); box-shadow: 0 0 0 2px var(--m8-accent); }
.m8-form-card ::placeholder { color: #8f93a6; }
.m8-topics { border: 0; margin: 0; padding: 0; min-width: 0; }
.m8-topics legend { font-size: 14px; padding: 0; margin-bottom: 8px; }
.m8-topics .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.m8-form-card .wpcf7-list-item { margin: 0; }
.m8-form-card .wpcf7-list-item label { display: flex; align-items: center; gap: 8px; }
.m8-form-card input[type="checkbox"] { accent-color: var(--m8-accent); width: 16px; height: 16px; margin: 0; }
.m8-form-card .wpcf7-acceptance label { align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 21px; color: var(--m8-nav); }
.m8-form-card .wpcf7-acceptance input { margin-top: 3px; }
.m8-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--m8-grey); }
.m8-form-card .wpcf7-submit { cursor: pointer; }
.m8-form-card .wpcf7-response-output { margin: 0 !important; border-radius: 8px; font-size: 14px; }

/* Footer */
.m8-footer { padding-block: 0 48px; font-size: 13px; color: var(--m8-grey); }
.m8-footer .m8-sep { margin-bottom: 28px !important; }
.m8-footer .alignwide.is-layout-flex { gap: 12px 32px; }
.m8-footer p { margin: 0; }
.m8-footer-links { word-spacing: 1.2em; }
.m8-footer-links a { color: var(--m8-nav); word-spacing: normal; }