/*
Theme Name: madgeeks
Theme URI: https://madgeeks.de
Author: Pascal Ammersbach
Author URI: https://madgeeks.de
Description: Schlankes Block-Theme für madgeeks.de. Helles und dunkles Farbschema (folgt dem System, umschaltbar), lokal eingebundene Schriften, keine Page-Builder-Abhängigkeit.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: madgeeks
*/

/* ---------- Farbschema ----------
   Hell ist in theme.json definiert. Dunkel überschreibt dieselben Presets,
   damit alle Blöcke (auch im Editor gesetzte Farben) automatisch mitziehen. */
:root { color-scheme: light; }
html[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--base: #0E1216;
	--wp--preset--color--surface: #151A20;
	--wp--preset--color--card: #1B2129;
	--wp--preset--color--contrast: #E8ECEF;
	--wp--preset--color--muted: #B4BDC6;
	--wp--preset--color--subtle: #9AA4AE;
	--wp--preset--color--border: #262D36;
	--wp--preset--color--accent: #4FB3EA;
	--wp--preset--color--on-accent: #0B1520;
	--wp--preset--color--accent-text: #6CC4F0;
	--wp--preset--color--tint: #16324A;
	--wp--preset--color--feature: #123049;
	--wp--preset--color--on-feature: #FFFFFF;
	--wp--preset--color--on-feature-muted: #C6DDEE;
	--wp--preset--color--ink: #0A0D10;
	--wp--preset--color--ink-soft: #161B22;
	--wp--preset--color--ink-deep: #06080A;
	--wp--preset--color--on-ink: #E8ECEF;
	--wp--preset--color--on-ink-muted: #A7B0B8;
	--wp--preset--color--sky: #6CC4F0;
	--wp--preset--color--chrome: #1F262E;
	--wp--preset--color--dot: #3A424C;
}
html[data-theme="dark"] .mg-terminal { box-shadow: none; border-color: #2C343E; }
/* Ohne JavaScript: Systemeinstellung respektieren */
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) {
		color-scheme: dark;
		--wp--preset--color--base: #0E1216;
		--wp--preset--color--surface: #151A20;
		--wp--preset--color--card: #1B2129;
		--wp--preset--color--contrast: #E8ECEF;
		--wp--preset--color--muted: #B4BDC6;
		--wp--preset--color--subtle: #9AA4AE;
		--wp--preset--color--border: #262D36;
		--wp--preset--color--accent: #4FB3EA;
		--wp--preset--color--on-accent: #0B1520;
		--wp--preset--color--accent-text: #6CC4F0;
		--wp--preset--color--tint: #16324A;
		--wp--preset--color--feature: #123049;
		--wp--preset--color--on-feature: #FFFFFF;
		--wp--preset--color--on-feature-muted: #C6DDEE;
		--wp--preset--color--ink: #0A0D10;
		--wp--preset--color--ink-soft: #161B22;
		--wp--preset--color--ink-deep: #06080A;
		--wp--preset--color--on-ink: #E8ECEF;
		--wp--preset--color--on-ink-muted: #A7B0B8;
		--wp--preset--color--sky: #6CC4F0;
		--wp--preset--color--chrome: #1F262E;
		--wp--preset--color--dot: #3A424C;
	}
	html:not([data-theme]) .mg-terminal { box-shadow: none; border-color: #2C343E; }
}

/* ---------- Basis ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 6rem; }
:focus-visible { outline: 2px solid var(--wp--preset--color--accent-text); outline-offset: 3px; }
img { height: auto; max-width: 100%; }
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}

/* ---------- Kopfbereich ---------- */
header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
.mg-header { border-bottom: 1px solid var(--wp--preset--color--border); padding-top: 0.875rem; padding-bottom: 0.875rem; }
.mg-brand-link { display: inline-flex; align-items: center; gap: 10px; color: var(--wp--preset--color--contrast); text-decoration: none; }
.mg-brand-link:hover { color: var(--wp--preset--color--contrast); }
.mg-brand-link .mg-logo { display: block; height: 40px; width: auto; }
@media (max-width: 600px) { .mg-brand-link .mg-logo { height: 34px; } }
.mg-header__actions { gap: 1.5rem; }
.mg-header .wp-block-navigation { gap: 1.625rem; }
.mg-theme-toggle {
	width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--wp--preset--color--border); border-radius: 10px; background: transparent;
	color: var(--wp--preset--color--contrast); cursor: pointer;
}
.mg-theme-toggle:hover { border-color: var(--wp--preset--color--contrast); }
.mg-theme-toggle svg { width: 20px; height: 20px; }
.mg-theme-toggle .mg-sun { display: none; }
html[data-theme="dark"] .mg-theme-toggle .mg-sun { display: block; }
html[data-theme="dark"] .mg-theme-toggle .mg-moon { display: none; }
html:not([data-theme]) .mg-theme-toggle { display: none; }
.mg-header__cta .wp-block-button__link { padding: 0.7rem 1.25rem; font-size: var(--wp--preset--font-size--small); }
@media (max-width: 781px) { .mg-header .wp-block-buttons.mg-header__cta { display: none; } }

/* ---------- Abschnitte ---------- */
.mg-section { padding-top: var(--wp--preset--spacing--80); padding-bottom: var(--wp--preset--spacing--80); }
.mg-section.mg-section > * + * { margin-block-start: var(--wp--preset--spacing--70); }
.mg-section--bordered { border-top: 1px solid var(--wp--preset--color--border); border-bottom: 1px solid var(--wp--preset--color--border); }
.mg-section-head { gap: 0.875rem; }
.mg-section-head > * { max-width: 44rem; margin: 0; }
.is-style-kicker {
	font-family: var(--wp--preset--font-family--mono); font-size: 0.875rem; letter-spacing: 0.04em;
	color: var(--wp--preset--color--accent-text); margin: 0;
}
.mg-meta { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; color: var(--wp--preset--color--subtle); }
.mg-lead { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--muted); max-width: 34rem; }
.mg-intro { color: var(--wp--preset--color--muted); max-width: 40rem; }

/* Hero */
.mg-hero { padding-top: clamp(4rem, 9vw, 6.5rem); padding-bottom: clamp(4rem, 9vw, 6.5rem); }
.mg-hero__cols { gap: 3.5rem; }
.mg-hero__cols .wp-block-column > * { margin-top: 0; }
.mg-hero__cols .wp-block-column > * + * { margin-top: 1.5rem; }
.mg-hero__cols .wp-block-buttons { padding-top: 0.5rem; }

.mg-terminal { background: #12161C; border: 1px solid #12161C; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(18, 22, 28, 0.18); }
.mg-terminal__bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid #262C34; }
.mg-terminal__bar span { width: 11px; height: 11px; border-radius: 50%; background: #3A424C; }
.mg-terminal__bar code { margin-left: 10px; font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; color: #8C96A0; background: none; }
.mg-terminal__body {
	margin: 0; padding: 26px 26px 30px; background: none; color: #E8ECEF; white-space: pre-wrap;
	font-family: var(--wp--preset--font-family--mono); font-size: 0.9375rem; line-height: 2; overflow-x: auto;
}
.mg-terminal__body .p { color: #6CC4F0; }
.mg-terminal__body .m { color: #A7B0B8; }
.mg-terminal__body .ok { color: #7BD88F; }
@media (max-width: 600px) { .mg-terminal__body { font-size: 0.8125rem; padding: 20px; } }

/* Karten */
.is-style-card {
	background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card); padding: 1.875rem;
}
.mg-section:not(.has-background) .is-style-card { background: var(--wp--preset--color--surface); }
.is-style-card.is-style-card > * { margin-top: 0; margin-bottom: 0; }
.is-style-card.is-style-card > * + * { margin-top: 0.875rem; }
.is-style-card h3 { font-size: 1.4375rem; }
.is-style-card ul { padding-left: 1.25rem; font-size: var(--wp--preset--font-size--small); }
.is-style-card li + li { margin-top: 0.375rem; }

.mg-icon { display: block; width: 32px; height: 32px; background-color: var(--wp--preset--color--accent-text);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.mg-icon--web{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='14' rx='2'/%3E%3Cpath d='M3 8h18M8 21h8M12 18v3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='14' rx='2'/%3E%3Cpath d='M3 8h18M8 21h8M12 18v3'/%3E%3C/svg%3E")}
.mg-icon--server{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='6' rx='1.5'/%3E%3Crect x='3' y='14' width='18' height='6' rx='1.5'/%3E%3Cpath d='M7 7h.01M7 17h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='6' rx='1.5'/%3E%3Crect x='3' y='14' width='18' height='6' rx='1.5'/%3E%3Cpath d='M7 7h.01M7 17h.01'/%3E%3C/svg%3E")}
.mg-icon--code{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 8-4 4 4 4M16 8l4 4-4 4M13.5 5l-3 14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 8-4 4 4 4M16 8l4 4-4 4M13.5 5l-3 14'/%3E%3C/svg%3E")}
.mg-icon--plus{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v4M12 17v4M3 12h4M17 12h4'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v4M12 17v4M3 12h4M17 12h4'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E")}
.mg-icon--mail{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}

/* Projekte */
.mg-project.mg-project { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.mg-project.mg-project > * + * { margin-top: 0; }
.mg-project__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0.75rem; }
.mg-project__body > * { margin: 0 !important; }
.mg-project__body h3 { font-size: 1.375rem; }
.mg-project__body .mg-more { margin-top: auto !important; }
.mg-more a { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.mg-browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--wp--preset--color--chrome); }
.mg-browser__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--wp--preset--color--dot); }
.mg-browser__bar code { margin-left: 8px; font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; color: var(--wp--preset--color--subtle); background: none; }
.mg-browser__view { height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 0 1rem; }
.mg-browser__view strong { line-height: 1.1; }
.mg-browser__view--imbiss { background: #E8572A; color: #FFFFFF; }
.mg-browser__view--imbiss strong { font-family: var(--wp--preset--font-family--display); font-size: 1.75rem; }
.mg-browser__view--imbiss small { font-size: 0.875rem; color: #FFF1E8; }
.mg-browser__view--hana { background: #F3EDE4; color: #2A1F1A; }
.mg-browser__view--hana .mg-hana-mark { font-size: 1.875rem; color: #B23A3A; line-height: 1; }
.mg-browser__view--hana strong { font-family: Georgia, serif; font-weight: 400; font-size: 1.625rem; }
.mg-browser__view--wok { background: #17120E; }
.mg-browser__view--wok strong { font-family: Georgia, serif; font-weight: 400; font-size: 1.875rem; color: #C9A84C; }
.mg-browser__view--wok small { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: #D9CBA8; }

/* Ablauf */
.mg-step { border-top: 2px solid var(--wp--preset--color--contrast); padding-top: 1.25rem; }
.mg-step.mg-step > * { margin: 0; }
.mg-step.mg-step > * + * { margin-top: 0.625rem; }
.mg-step h3 { font-size: 1.3125rem; }
.mg-step p:not(.mg-step__num) { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.mg-step__num { font-family: var(--wp--preset--font-family--mono); font-size: 0.875rem; color: var(--wp--preset--color--accent-text); }

/* Pakete */
.mg-price { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 2.125rem; letter-spacing: -0.02em; line-height: 1.1; }
.mg-price small { font-size: 1.0625rem; font-weight: 500; color: var(--wp--preset--color--subtle); letter-spacing: 0; }
.is-style-card.mg-card--feature { background: var(--wp--preset--color--feature); border-color: var(--wp--preset--color--feature); color: var(--wp--preset--color--on-feature); }
.mg-card--feature .mg-price small { color: var(--wp--preset--color--on-feature-muted); }
.mg-note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--subtle); }

.is-style-card.mg-cta { padding: clamp(1.75rem, 4vw, 3rem); gap: 2rem; }
.is-style-card.mg-cta > * + * { margin-top: 0; }
.mg-cta__text { flex: 1 1 28rem; max-width: 44rem; }
.mg-cta__text > * { margin: 0; }
.mg-cta__text > * + * { margin-top: 0.875rem; }

/* Über mich */
.mg-about__cols { gap: 3.5rem; }
.mg-about__cols .wp-block-column > * { margin-top: 0; }
.mg-about__cols .wp-block-column > * + * { margin-top: 1.125rem; }
.mg-portrait {
	aspect-ratio: 4 / 5; width: 100%; max-width: 320px; border-radius: 18px; background: var(--wp--preset--color--tint);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 4rem; color: var(--wp--preset--color--accent-text);
}
.mg-portrait img { width: 100%; height: 100%; object-fit: cover; }
.mg-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mg-chips li { padding: 6px 14px; border: 1px solid var(--wp--preset--color--border); border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; color: var(--wp--preset--color--muted); }

/* Kontakt */
.mg-contact { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-ink); }
.mg-contact__cols { gap: 3.5rem; }
.mg-contact__cols .wp-block-column > * { margin-top: 0; }
.mg-contact__cols .wp-block-column > * + * { margin-top: 1.25rem; }
.mg-contact h2 { color: #FFFFFF; }
.mg-contact .is-style-kicker { color: var(--wp--preset--color--sky); }
.mg-contact p { color: var(--wp--preset--color--on-ink-muted); }
.mg-mail a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #FFFFFF; text-decoration: none;
	font-family: var(--wp--preset--font-family--mono); font-size: 1.0625rem; }
.mg-mail a:hover { color: var(--wp--preset--color--sky); }
.mg-mail .mg-icon { width: 20px; height: 20px; background-color: var(--wp--preset--color--sky); }
.mg-form-card { background: var(--wp--preset--color--ink-soft); border-radius: 16px; padding: 2rem; }
/* WPForms (Modern Markup + klassisches Markup) */
.mg-form-card .wpforms-container {
	--wpforms-field-background-color: #12161C; --wpforms-field-border-color: #39414B; --wpforms-field-text-color: #FFFFFF;
	--wpforms-label-color: #C3CAD1; --wpforms-label-sublabel-color: #A7B0B8; --wpforms-label-error-color: #FF8A80;
	--wpforms-button-background-color: #4FB3EA; --wpforms-button-text-color: #0B1520; --wpforms-button-border-radius: 10px;
	--wpforms-field-border-radius: 8px; --wpforms-field-size-input-height: 46px;
	margin: 0 !important;
}
.mg-form-card .wpforms-form label, .mg-form-card .wpforms-form .wpforms-field-label { color: #C3CAD1 !important; font-weight: 500; }
.mg-form-card .wpforms-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.mg-form-card .wpforms-form textarea {
	background: #12161C !important; border: 1px solid #39414B !important; color: #FFFFFF !important; border-radius: 8px !important;
	max-width: 100% !important; width: 100% !important; font-family: inherit; font-size: 1rem !important;
}
.mg-form-card .wpforms-form input:focus, .mg-form-card .wpforms-form textarea:focus { border-color: #6CC4F0 !important; box-shadow: none !important; outline: 2px solid #6CC4F0; outline-offset: 1px; }
.mg-form-card .wpforms-form button[type=submit] {
	background: #4FB3EA !important; color: #0B1520 !important; border: 0 !important; border-radius: 10px !important;
	min-height: 50px; padding: 0 1.75rem !important; font-weight: 600 !important; font-size: 1rem !important; width: 100%;
}
.mg-form-card .wpforms-form button[type=submit]:hover { background: #FFFFFF !important; }

/* Fußbereich */
.mg-footer { padding-top: 1.25rem; padding-bottom: 1.25rem; font-size: 0.875rem; }
.mg-footer p { margin: 0; }
.mg-footer__links { display: flex; gap: 1.5rem; }
.mg-footer a { color: #C3CAD1; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.mg-footer a:hover { color: #FFFFFF; text-decoration: underline; }

/* Inhaltsseiten (Impressum, Datenschutz) */
.mg-page { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--80); }
.mg-page h1 { font-size: clamp(2rem, 4vw, 3rem); }
.mg-page .wp-block-post-content h1:first-child { display: none; }
.mg-page h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.mg-page h3 { font-size: 1.25rem; margin-top: 2rem; }

/* Keine Lücken zwischen Kopf, Inhalt, Fuß und vollbreiten Abschnitten */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-post-content.wp-block-post-content > .alignfull { margin-block-start: 0; margin-block-end: 0; }
.mg-contact__cols > .wp-block-column { align-self: flex-start; }

/* Porträtfoto */
.mg-portrait-img { margin: 0; }
.mg-portrait-img img { display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; border-radius: 18px; }