/*
 * PAULY777 base.css: nur, was theme.json nicht kann. Budget < 250 Zeilen, strikt auf
 * p7-Klassen gescoped (dazu Skip-Link, Fokusring, Chrome-Abstände am body).
 * Tokens kommen als --wp--preset--* und --wp--custom--* aus theme.json.
 */

/* --- Skip-Link (ohne JS); Ziel ist main#main in jedem Template --- */
.p7-skip-link {
	position: absolute;
	inset: 0.5rem auto auto 0.5rem;
	z-index: 300;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--accent, #c6ff00);
	color: var(--wp--preset--color--ink, #0e0e0e);
	font-weight: 700;
	text-decoration: none;
	transform: translateY(-300%);
}
.p7-skip-link:focus { transform: none; }

/* --- Chrome: fixierter Header oben, Player-Slot unten, Anker unter dem Header --- */
html { scroll-padding-top: calc(var(--wp--custom--chrome--top, 4rem) + 1rem); }
body {
	padding-top: var(--wp--custom--chrome--top, 4rem);
	padding-bottom: var(--wp--custom--chrome--bottom, 0px);
}
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-template-part { margin-block-start: 0; }

.p7-header {
	position: fixed;
	inset: 0 0 auto;
	box-sizing: border-box; max-width: 100vw;
	z-index: 100;
	height: var(--wp--custom--chrome--top, 4rem);
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--line, #2a2a2a);
	background: rgba(14, 14, 14, 0.9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.admin-bar .p7-header { top: var(--wp-admin--admin-bar--height, 32px); }
.p7-header__inner { height: 100%; }

.p7-brand {
	display: inline-flex; align-items: center; min-height: 44px;
	color: var(--wp--preset--color--paper, #f2f2ef);
	text-decoration: none;
}
.p7-brand:hover { color: var(--wp--preset--color--accent, #c6ff00); }
.p7-brand svg { display: block; width: clamp(160px, 22vw, 240px); height: auto; }

.p7-player-bar {
	position: fixed;
	inset: auto 0 0;
	z-index: 100;
	height: var(--wp--custom--chrome--bottom, 0px);
	overflow: hidden;
}

/* --- Sprachumschalter (Plugin-Block pauly777/lang-switch) --- */
.p7-lang { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.p7-lang__link {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding: 0 0.5rem;
	color: var(--wp--preset--color--muted, #9a9a94);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}
.p7-lang__link:hover { color: var(--wp--preset--color--paper, #f2f2ef); }
.p7-lang__link[aria-current] {
	color: var(--wp--preset--color--accent, #c6ff00);
	box-shadow: inset 0 -2px 0 currentColor;
}

/* --- Hero: Betontextur als SVG-Filter (feTurbulence, < 8 % deckend), Marker-Unterstrich --- */
.p7-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--ink, #0e0e0e);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
	background-size: 400px 400px;
}
.p7-hero__title { margin: 0; }
.p7-hero__wortmarke {
	display: block; width: min(100%, 40rem); height: auto;
	color: var(--wp--preset--color--paper, #f2f2ef);
}
.p7-hero__claim {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent, #c6ff00);
	text-decoration-thickness: 0.16em;
	text-decoration-skip-ink: none;
	text-underline-offset: 0.1em;
}

/* --- Abschnitte und Karten (surface, line) --- */
.p7-section { border-top: 1px solid var(--wp--preset--color--line, #2a2a2a); }
.p7-card {
	height: 100%;
	padding: var(--wp--preset--spacing--40, 1.5rem);
	border: 1px solid var(--wp--preset--color--line, #2a2a2a);
	border-top: 3px solid var(--wp--preset--color--accent, #c6ff00);
	background: var(--wp--preset--color--surface, #181818);
}

/* --- Vormerkung (Plugin-Block pauly777/comeback-signup) --- */
.p7-signup__eyebrow {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--accent, #c6ff00);
	font-family: var(--wp--preset--font-family--display, cursive);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}
.p7-signup__title { margin: 0; }
.p7-signup__window {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--muted, #9a9a94);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.p7-signup__text { margin: 1rem 0 0; }
.p7-signup__form { display: grid; gap: 1rem; max-width: 32rem; margin-top: 1.5rem; }
.p7-signup__field { display: grid; gap: 0.375rem; font-weight: 700; }
.p7-signup__field input {
	box-sizing: border-box; width: 100%; max-width: 100%; min-height: 48px; padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--line, #2a2a2a); border-radius: 0;
	background: var(--wp--preset--color--surface, #181818);
	color: var(--wp--preset--color--paper, #f2f2ef);
	font: inherit;
	font-weight: 400;
}
.p7-signup__consent {
	display: flex; gap: 0.75rem; align-items: flex-start;
	color: var(--wp--preset--color--muted, #9a9a94);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}
.p7-signup__consent input {
	flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0;
	accent-color: var(--wp--preset--color--accent, #c6ff00);
}
.p7-signup__button {
	justify-self: start; min-height: 48px; padding: 0.9rem 1.75rem;
	border: 0; border-radius: 0;
	background: var(--wp--preset--color--accent, #c6ff00);
	color: var(--wp--preset--color--ink, #0e0e0e);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.p7-signup__button:hover { background: var(--wp--preset--color--hover, #e0ff66); }
.p7-signup__status {
	margin: 1rem 0 0; padding: 0.875rem 1rem;
	border: 1px solid var(--wp--preset--color--accent, #c6ff00); border-left-width: 4px;
}
.p7-signup__status:empty { display: none; }
.p7-signup__status--error { border-color: var(--wp--preset--color--signal, #ff3b5c); }
.p7-signup__action { margin-top: 1rem; }
.p7-signup__follow {
	margin-top: 2rem; padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--line, #2a2a2a);
}
.p7-signup__follow > p { margin: 0 0 0.75rem; color: var(--wp--preset--color--muted, #9a9a94); }

/* --- Social-Buttons (Plugin-Block pauly777/social-links und Follow-Zeile) --- */
.p7-social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.p7-social__link {
	display: inline-flex; gap: 0.5rem; align-items: center;
	min-height: 44px; padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--line, #2a2a2a);
	background: var(--wp--preset--color--surface, #181818);
	color: var(--wp--preset--color--paper, #f2f2ef);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	text-decoration: none;
}
.p7-social__link:hover {
	border-color: var(--wp--preset--color--accent, #c6ff00);
	color: var(--wp--preset--color--accent, #c6ff00);
}
.p7-social__link svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; }

/* --- Footer: Rechtsleiste immer sichtbar (360/768/1440 px), Touch-Targets 44 px --- */
.p7-footer__inner { row-gap: 1rem; }
.p7-footer__legal a {
	display: inline-flex; align-items: center;
	min-height: 44px; padding: 0 0.5rem;
	color: var(--wp--preset--color--paper, #f2f2ef);
	font-weight: 700;
	text-decoration: none;
}
.p7-footer__legal a:hover { color: var(--wp--preset--color--accent, #c6ff00); text-decoration: underline; }

/* --- Rechtstext (Template page-legal): Zwischentitel in der Body-Schrift, Lesebreite --- */
.p7-legal h2,
.p7-legal h3 {
	margin-top: var(--wp--preset--spacing--50, 3rem);
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-weight: 700;
}
.p7-legal h2 { font-size: var(--wp--preset--font-size--large, 1.25rem); }
.p7-legal h3 { font-size: var(--wp--preset--font-size--medium, 1rem); }
.p7-legal p,
.p7-legal li { max-width: 70ch; overflow-wrap: anywhere; }

/* --- Fokusring (WCAG 2.4.7): accent, 3 px, für alle fokussierbaren Elemente --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #c6ff00);
	outline-offset: 3px;
}

/* --- Bewegung: dezente Farbwechsel und sanftes Scrollen zum Anker; bei reduce alles aus --- */
.p7-brand,
.p7-lang__link,
.p7-social__link,
.p7-signup__button,
.p7-footer__legal a { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
	.p7-brand,
	.p7-lang__link,
	.p7-social__link,
	.p7-signup__button,
	.p7-footer__legal a,
	.wp-element-button { transition: none; }
}