/*
 * Becks Creek Theme – Design-Tokens (Block 1, P01-1).
 * Farb-/Font-Variablen und @font-face 1:1 übernommen aus
 * ../becks-creek shop/becks-creek-tickets/assets/css/bct-theme.css
 * (Ticket-Shop-Plugin), siehe docs/blocks/01-fundament-styleguide/ROADMAP.md,
 * "Entscheidungen, vor P01-1 getroffen". Keine neuen Tokens vorab erfinden.
 */

@font-face {
	font-family: 'Rye';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/rye-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Vollkorn';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/vollkorn-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Vollkorn';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/vollkorn-bold.woff2') format('woff2');
}

:root {
	/* Pergament */
	--bct-color-parchment: #f3e2c1;
	--bct-color-parchment-dark: #e2c793;

	/* Holz */
	--bct-color-wood: #6b4226;
	--bct-color-wood-dark: #4a2c17;

	/* Text/Akzente */
	--bct-color-ink: #2c1c10;
	--bct-color-accent: #a8321f;
	--bct-color-danger: #9b1c1c;
	--bct-color-success: #3f6b2a;

	/* Hellere Akzent-Variante (Auftraggeber-Feedback, 2026-10-02): nur für
	   Text auf dunklem Untergrund (z. B. .bc-nav-primary auf
	   .bc-site-header, Hintergrund --bct-color-wood-dark) – der reguläre
	   --bct-color-accent ist dort zu dunkel/kontrastarm. Auf hellem
	   Pergament-Untergrund (Buttons, Links im Fließtext, Submenüs) bleibt
	   --bct-color-accent unverändert in Verwendung.
	   Wert in P07-3 von #e2793f auf #e8864f angehoben: #e2793f erreichte
	   gegen --bct-color-wood-dark nur 4.23:1 (WCAG-AA-Mindestwert für
	   normalen Text ist 4.5:1, siehe feinschliff-audit.md Abschnitt
	   „Kontrast"), #e8864f erreicht 4.78:1 mit Sicherheitsmarge. */
	--bct-color-accent-light: #e8864f;

	/* Schriften */
	--bct-font-display: 'Rye', 'Georgia', serif;
	--bct-font-body: 'Vollkorn', Georgia, 'Times New Roman', serif;

	/* Seitenbreite (P05-17): einheitliche Innenbreite für Header, Footer,
	   Hero und Inhalts-Boxen – 67.5em (= 1080px bei 16px-Basis), gemessen
	   am alten Vantage-Theme (.full-container auf becks-creek.de, konstant
	   1080px über Nav/Content/Footer hinweg, unabhängig von der
	   Viewport-Breite). Ersetzt die vorherige Zweiteilung 72em (Rahmen)/
	   54em (Inhalts-Box) aus P05-14/P05-15. */
	--bct-container-width: 67.5em;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--bct-font-body);
	color: var(--bct-color-ink);
}

/* Seitenhintergrund-Textur (P02-2) */

body {
	background-color: var(--bct-color-parchment);
	background-image: url('../img/textures/bc-texture-page.webp');
	background-repeat: repeat;
}

/* Styleguide: Typografie (P01-2) */

.bc-styleguide h1,
.bc-styleguide h2,
.bc-styleguide h3,
.bc-styleguide h4,
.bc-styleguide h5,
.bc-styleguide h6 {
	font-family: var(--bct-font-display);
	color: var(--bct-color-wood-dark);
	line-height: 1.2;
	margin: 1.5em 0 0.5em;
}

.bc-styleguide h1 {
	font-size: 2.986rem;
}

.bc-styleguide h2 {
	font-size: 2.488rem;
}

.bc-styleguide h3 {
	font-size: 2.074rem;
}

.bc-styleguide h4 {
	font-size: 1.728rem;
}

.bc-styleguide h5 {
	font-size: 1.44rem;
}

.bc-styleguide h6 {
	font-size: 1.2rem;
}

.bc-styleguide p,
.bc-styleguide ul,
.bc-styleguide ol {
	font-family: var(--bct-font-body);
	line-height: 1.6;
	max-width: 65ch;
}

.bc-styleguide a {
	color: var(--bct-color-accent);
}

.bc-styleguide a:hover {
	text-decoration: underline;
}

.bc-styleguide a:focus-visible {
	outline: 2px solid var(--bct-color-accent);
	outline-offset: 2px;
}

.bc-styleguide a:visited {
	color: #7a2517;
}

/* Styleguide: Buttons (P01-3) */

.bc-button {
	display: inline-block;
	padding: 0.75em 1.75em;
	border: none;
	border-radius: 4px;
	font-family: var(--bct-font-display);
	font-size: 1em;
	letter-spacing: 0.04em;
	text-decoration: none;
	cursor: pointer;
}

.bc-button--primary {
	border: 2px solid var(--bct-color-wood-dark);
	background: linear-gradient(180deg, var(--bct-color-accent) 0%, var(--bct-color-wood-dark) 100%);
	color: var(--bct-color-parchment);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 6px rgba(0, 0, 0, 0.35);
}

.bc-button--primary:hover {
	background: linear-gradient(180deg, var(--bct-color-wood) 0%, var(--bct-color-wood-dark) 100%);
}

.bc-button--primary:active {
	transform: translateY(1px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35);
}

.bc-button--secondary {
	border: 2px solid var(--bct-color-wood);
	background: transparent;
	color: var(--bct-color-wood-dark);
}

.bc-button--secondary:hover {
	background: var(--bct-color-wood);
	color: var(--bct-color-parchment);
}

.bc-button--secondary:active {
	transform: translateY(1px);
}

.bc-button:focus-visible {
	outline: 3px solid var(--bct-color-accent);
	outline-offset: 2px;
}

.bc-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Styleguide: Boxen/Karten (P01-4) */

.bc-styleguide__demo-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5em;
}

.bc-card {
	position: relative;
	padding: 1.5em 1.25em;
	background:
		radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.15), transparent 60%),
		url('../img/textures/bc-texture-card.webp');
	background-repeat: repeat;
	border: 3px solid var(--bct-color-wood);
	border-radius: 4px;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.bc-card h3 {
	font-family: var(--bct-font-display);
	color: var(--bct-color-wood-dark);
	margin: 0 0 0.5em;
}

.bc-card p {
	margin: 0 0 1em;
}

.bc-card p:last-child {
	margin-bottom: 0;
}

.bc-card::before,
.bc-card::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #d8c090, var(--bct-color-wood-dark));
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
	top: 8px;
}

.bc-card::before {
	left: 8px;
}

.bc-card::after {
	right: 8px;
}

.bc-card a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.bc-card a:hover h3 {
	text-decoration: underline;
}

.bc-card a:focus-visible {
	outline: 3px solid var(--bct-color-accent);
	outline-offset: 2px;
}

/* Styleguide: Sprungnavigation (P01-5) */

.bc-styleguide__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
	margin: 0 0 1.5em;
	padding: 0.75em 0;
	border-bottom: 2px solid var(--bct-color-wood);
}

.bc-styleguide__nav a {
	color: var(--bct-color-wood-dark);
	font-family: var(--bct-font-display);
	text-decoration: none;
	letter-spacing: 0.03em;
}

.bc-styleguide__nav a:hover {
	text-decoration: underline;
}

.bc-styleguide__nav a:focus-visible {
	outline: 2px solid var(--bct-color-accent);
	outline-offset: 2px;
}

/* Styleguide: Formulare (P01-5) */

.bc-styleguide__demo-form {
	max-width: 24em;
}

.bc-field {
	margin: 0 0 1.25em;
}

.bc-field label,
.bc-field__legend {
	display: inline-block;
	font-weight: 700;
	font-family: var(--bct-font-body);
	margin-bottom: 0.35em;
}

.bc-field input[type='text'],
.bc-field input[type='email'],
.bc-field textarea,
.bc-field select {
	display: block;
	width: 100%;
	padding: 0.45em 0.6em;
	border: 2px solid var(--bct-color-wood);
	border-radius: 3px;
	background: #fffaf0;
	color: var(--bct-color-ink);
	font-family: var(--bct-font-body);
	font-size: 1em;
}

.bc-field textarea {
	resize: vertical;
}

.bc-field input[type='text']:focus-visible,
.bc-field input[type='email']:focus-visible,
.bc-field textarea:focus-visible,
.bc-field select:focus-visible,
.bc-field input[type='checkbox']:focus-visible,
.bc-field input[type='radio']:focus-visible {
	outline: 3px solid var(--bct-color-accent);
	outline-offset: 2px;
}

.bc-field__option {
	margin: 0 0 0.5em;
}

.bc-field__option label {
	display: inline-block;
	font-weight: 400;
	margin: 0 0 0 0.4em;
	cursor: pointer;
}

.bc-field--error input[type='text'],
.bc-field--error input[type='email'],
.bc-field [aria-invalid='true'] {
	border-color: var(--bct-color-danger);
}

.bc-field__error {
	margin: 0.35em 0 0;
	color: var(--bct-color-danger);
	font-size: 0.875em;
	font-weight: 700;
}

.bc-field input:disabled,
.bc-field textarea:disabled,
.bc-field select:disabled {
	opacity: 0.5;
	background: var(--bct-color-parchment-dark);
	cursor: not-allowed;
}

/* Seitenkopf-Baustein (P03-1) */
/* Zentrierung (P05-14): .bc-page-header teilt sich max-width/margin mit
   .bc-page-content/.bc-legal-content (gleiche Spalten-Breite wie der
   Inhalt darunter), damit P05-15 beide Stellen synchron anpassen kann,
   ohne den Wert ein zweites Mal zu duplizieren. Eigene Innenabstände
   (padding) bleiben pro Klasse getrennt, da .bc-page-header seine über
   .bc-content-box bekommt (siehe dort).
   Breite (P05-15, seit P05-17 über --bct-container-width): Container-
   Breite von 65ch auf jetzt 67.5em angehoben – 65ch wirkte gegenüber dem
   Seitenrahmen zu schmal. Der Fließtext selbst bleibt über eine eigene,
   schmalere Lesebreite (max-width: 70ch, siehe .bc-page-header__intro
   sowie .bc-page-content/.bc-legal-content p/ul/ol unten) begrenzt, damit
   die breitere Box nicht zu langen Zeilen führt. */

.bc-page-header,
.bc-page-content,
.bc-legal-content {
	max-width: var(--bct-container-width);
	margin: 0 auto;
}

.bc-page-header h1 {
	font-family: var(--bct-font-display);
	color: var(--bct-color-wood-dark);
	font-size: 2.488rem;
	line-height: 1.2;
	margin: 0 0 0.5em;
	text-align: center;
	/* P08-3-Fix: einzelne lange deutsche Komposita (z. B. „Kurzinformation")
	   brachen bei 375px sonst nicht um und erzeugten einen horizontalen
	   Scrollbalken. */
	overflow-wrap: break-word;
}

.bc-page-header__intro {
	font-family: var(--bct-font-body);
	line-height: 1.6;
	max-width: 70ch;
	margin: 0 auto 1.5em;
	text-align: center;
}

/* Standard-Inhaltsseite (P03-2) */
/* Rechtstext-Seite (P03-6): .bc-legal-content nutzt dieselben Kernwerte wie
   .bc-page-content, hier noch 1:1 identisch – eigene Klasse statt gemeinsamer
   Selektor, damit künftige Rechtstext-spezifische Anpassungen (z. B. kleinere
   Schrift für Paragraphen-Listen) nicht versehentlich Standardseiten
   mitbeeinflussen. Deklarationen bleiben zusammengezogen, solange kein
   Unterschied besteht. */

.bc-page-content,
.bc-legal-content {
	padding: 0 1em 3em;
}

.bc-page-content h1,
.bc-page-content h2,
.bc-page-content h3,
.bc-page-content h4,
.bc-legal-content h1,
.bc-legal-content h2,
.bc-legal-content h3,
.bc-legal-content h4 {
	font-family: var(--bct-font-display);
	color: var(--bct-color-wood-dark);
	line-height: 1.2;
	margin: 1.5em 0 0.5em;
}

/* Informationen-Cluster (P05-4): Classic-Editor-Altinhalte bringen
   vereinzelt ein eigenes <h1> im post_content mit (zusätzlich zum
   Seitenkopf-H1 aus content-page-header.php) – hier bewusst auf
   Content-H2-Größe begrenzt, damit es kleiner als das Seitenkopf-H1
   (.bc-page-header h1, 2.488rem) bleibt. */
.bc-page-content h1,
.bc-legal-content h1 {
	font-size: 2.074rem;
}

.bc-page-content h2,
.bc-legal-content h2 {
	font-size: 2.074rem;
}

.bc-page-content h3,
.bc-legal-content h3 {
	font-size: 1.728rem;
}

.bc-page-content h4,
.bc-legal-content h4 {
	font-size: 1.44rem;
}

.bc-page-content p,
.bc-page-content ul,
.bc-page-content ol,
.bc-legal-content p,
.bc-legal-content ul,
.bc-legal-content ol {
	font-family: var(--bct-font-body);
	line-height: 1.6;
	max-width: 70ch;
	margin: 0 auto 1em;
}

.bc-page-content a,
.bc-legal-content a {
	color: var(--bct-color-accent);
}

.bc-page-content a:hover,
.bc-legal-content a:hover {
	text-decoration: underline;
}

.bc-page-content a:focus-visible,
.bc-legal-content a:focus-visible {
	outline: 2px solid var(--bct-color-accent);
	outline-offset: 2px;
}

.bc-page-content a:visited,
.bc-legal-content a:visited {
	color: #7a2517;
}

.bc-page-content img,
.bc-legal-content img {
	max-width: 100%;
	height: auto;
}

/* Informationen-Cluster: Yoast-FAQ-Block (P05-4)
   "FAQ der Navoran" nutzt wp:yoast/faq-block, das the_content() als flache
   Folge von .schema-faq-section-Divs ausgibt (kein Akkordion, kein eigenes
   CSS mitgeliefert) – hier an die bc-page-content-Optik angeglichen. */

.bc-page-content .schema-faq-section {
	margin: 0 0 1.5em;
	padding: 0 0 1.5em;
	border-bottom: 2px solid var(--bct-color-wood);
}

.bc-page-content .schema-faq-section:last-child {
	border-bottom: none;
}

.bc-page-content .schema-faq-question {
	display: block;
	font-family: var(--bct-font-display);
	color: var(--bct-color-wood-dark);
	font-size: 1.44rem;
	line-height: 1.2;
	margin: 0 0 0.5em;
}

.bc-page-content .schema-faq-answer {
	font-family: var(--bct-font-body);
	line-height: 1.6;
	margin: 0;
}

/* Downloads, Unsere Partner, Newsletter (P05-6): page.php bleibt für alle
   drei Seiten unverändert (the_content() reicht laut Content-Audit), hier
   nur CSS-Harmonisierung der jeweils eingebetteten Gutenberg-Blöcke bzw.
   des Newsletter-Plugin-Formulars ans Designsystem. */

/* Downloads: wp:file-Block auf .bc-button-Optik mappen */
.bc-page-content .wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
	margin: 0 0 1.5em;
}

.bc-page-content .wp-block-file__embed {
	width: 100%;
	max-width: 100%;
	border: 2px solid var(--bct-color-wood);
	border-radius: 4px;
}

.bc-page-content .wp-block-file__button,
.bc-page-content .wp-element-button {
	display: inline-block;
	padding: 0.75em 1.75em;
	border: 2px solid var(--bct-color-wood-dark);
	border-radius: 4px;
	background: linear-gradient(180deg, var(--bct-color-accent) 0%, var(--bct-color-wood-dark) 100%);
	color: var(--bct-color-parchment);
	font-family: var(--bct-font-display);
	letter-spacing: 0.04em;
	text-decoration: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 6px rgba(0, 0, 0, 0.35);
}

.bc-page-content .wp-block-file__button:hover,
.bc-page-content .wp-element-button:hover {
	background: linear-gradient(180deg, var(--bct-color-wood) 0%, var(--bct-color-wood-dark) 100%);
	text-decoration: none;
}

/* Unsere Partner: wp:columns/wp:image-Abstände und -Rahmen an Designsystem angleichen */
.bc-page-content .wp-block-columns {
	gap: 1.5em;
	margin: 0 0 1.5em;
}

.bc-page-content .wp-block-column {
	margin: 0;
}

.bc-page-content .wp-block-image {
	margin: 0 0 1em;
}

.bc-page-content .wp-block-image img {
	border: 2px solid var(--bct-color-wood);
	border-radius: 4px;
}

/* Newsletter: Anmeldeformular des aktiven Plugins "Newsletter" (tnp-Klassen)
   an .bc-field/.bc-button-Optik angeglichen, Formularlogik (admin-ajax.php)
   bleibt unverändert. */
.bc-page-content .tnp-subscription {
	max-width: 24em;
	margin: 1.5em 0 0;
}

.bc-page-content .tnp-field {
	margin: 0 0 1.25em;
}

.bc-page-content .tnp-field label {
	display: inline-block;
	font-weight: 700;
	font-family: var(--bct-font-body);
	margin-bottom: 0.35em;
}

.bc-page-content .tnp-field input[type='text'],
.bc-page-content .tnp-field input[type='email'] {
	display: block;
	width: 100%;
	padding: 0.45em 0.6em;
	border: 2px solid var(--bct-color-wood);
	border-radius: 3px;
	background: #fffaf0;
	color: var(--bct-color-ink);
	font-family: var(--bct-font-body);
	font-size: 1em;
}

.bc-page-content .tnp-field input[type='text']:focus-visible,
.bc-page-content .tnp-field input[type='email']:focus-visible,
.bc-page-content .tnp-privacy-field input[type='checkbox']:focus-visible {
	outline: 3px solid var(--bct-color-accent);
	outline-offset: 2px;
}

.bc-page-content .tnp-privacy-field label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-weight: 400;
	cursor: pointer;
}

.bc-page-content .tnp-subscription input.tnp-submit {
	display: inline-block;
	padding: 0.75em 1.75em;
	border: 2px solid var(--bct-color-wood-dark);
	border-radius: 4px;
	background-color: transparent;
	background-image: linear-gradient(180deg, var(--bct-color-accent) 0%, var(--bct-color-wood-dark) 100%);
	color: var(--bct-color-parchment);
	font-family: var(--bct-font-display);
	letter-spacing: 0.04em;
	cursor: pointer;
}

.bc-page-content .tnp-subscription input.tnp-submit:hover {
	background-image: linear-gradient(180deg, var(--bct-color-wood) 0%, var(--bct-color-wood-dark) 100%);
}

/* Galerie (P03-3) */

.bc-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1.5em;
	max-width: var(--bct-container-width);
	margin: 0 auto;
	padding: 0 1em 3em;
}

.bc-gallery-item {
	margin: 0;
}

.bc-gallery-item img {
	display: block;
	width: 100%;
	height: auto;
}

.bc-gallery-item__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background:
		radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.15), transparent 60%),
		url('../img/textures/bc-texture-card.webp');
	background-repeat: repeat;
	border: 2px solid var(--bct-color-wood);
	border-radius: 4px;
	color: rgba(44, 28, 16, 0.55);
	font-family: var(--bct-font-body);
	text-align: center;
}

.bc-gallery-item figcaption {
	font-size: 0.875em;
	text-align: center;
	margin-top: 0.5em;
}

/* Startseite: echter Editor-Inhalt (P05-11)
   .bc-front-content wrappt the_content() der Seite "Start" (ID 24). Der
   echte Inhalt ist Gutenberg-Blockmarkup (Cover-Hero, Buttons, Columns,
   Gruppen mit spacing-Presets) aus der alten Vantage-Seite – kein eigenes
   Theme-Markup, daher hier CSS-Zuordnung auf die vorhandenen
   wp-block-*-Klassen statt neuer Komponenten. Eigene Klasse statt
   .bc-page-content, weil deren Selektoren (h1–h4/p/a/img) nicht zum
   Gutenberg-Blockmarkup passen würden – seit der Breiten-Korrektur weiter
   unten (Auftraggeber-Feedback, 2026-10-02) sind .alignfull-Blöcke
   (Cover-Hero, Hintergrundfarb-Bänder) hier aber genauso auf
   --bct-container-width begrenzt wie überall sonst auf der Seite, kein
   Full-Bleed mehr. Spacing-Preset-Variablen
   (var(--wp--preset--spacing--NN)) aus dem post_content werden hier lokal
   definiert, da dieses klassische Theme kein theme.json registriert und
   WordPress sie sonst
   nicht auflösen würde (Inhalt wäre ohne die ursprünglichen Innenabstände
   zusammengequetscht). Werte 1:1 aus WordPress' Standard-Spacing-Skala. */

.bc-front-page {
	--wp--preset--spacing--20: 0.44rem;
	--wp--preset--spacing--30: 0.67rem;
	--wp--preset--spacing--40: 1rem;
	--wp--preset--spacing--50: 1.5rem;
	--wp--preset--spacing--60: 2.25rem;
	--wp--preset--spacing--70: 3.38rem;
	--wp--preset--spacing--80: 5.06rem;
}

/* Editor-Farbpalette "background"/"tertiary" (Auftraggeber-Feedback,
   2026-10-02): registriert in functions.php
   (add_theme_support( 'editor-color-palette', … )) für die Editor-Auswahl,
   aber bei einem klassischen Theme ohne theme.json erzeugt diese
   Registrierung allein noch keine Frontend-CSS-Regeln für die daraus
   entstehenden has-background-background-color/has-tertiary-background-
   color-Klassen (im Gegensatz zu Block-Themes mit theme.json). Diese
   beiden Klassen stammen aus der alten Vantage-Website und stecken nicht
   nur im Startseiten-Inhalt (.bc-front-content), sondern in mehreren
   migrierten Seiten (u. a. "Veranstaltungen", "Preise", "Über") – daher
   hier bewusst global und nicht auf .bc-front-content beschränkt, damit
   jede aktuelle wie künftige Seite mit denselben Block-Editor-Farben
   automatisch korrekt aussieht, ohne weiteren Code-Eingriff pro Seite.
   "black"/"white" sind WordPress-Kernstandard und werden bereits über
   wp-block-library-theme.css abgedeckt, brauchen hier keine eigene Regel. */

.has-background-background-color {
	background-color: #e2c793;
}

.has-background-color {
	color: #e2c793;
}

.has-tertiary-background-color {
	background-color: #f7efd9;
}

.has-tertiary-color {
	color: #f7efd9;
}

.bc-front-content {
	font-family: var(--bct-font-body);
	line-height: 1.6;
}

.bc-front-content .wp-block-group,
.bc-front-content .wp-block-columns,
.bc-front-content .wp-block-cover,
.bc-front-content .wp-block-group.alignfull > .wp-block-group__inner-container {
	max-width: var(--bct-container-width);
	margin-left: auto;
	margin-right: auto;
}

/* Korrektur (Auftraggeber-Feedback, 2026-10-02): .alignfull-Blöcke
   (Hero-Cover-Bild, Hintergrundfarb-Bänder "Unsere Geschichte"/"Warum
   Becks Creek?"/Gründer-Sektion) liefen zuvor bewusst randlos über die
   volle Fensterbreite (siehe Begründung oben) – auf Wunsch des
   Auftraggebers sollen sie stattdessen genauso wie jede andere Box der
   Seite auf --bct-container-width begrenzt und zentriert sein, kein
   Full-Bleed mehr auf der Startseite. Die Regel oben erfasst zwar bereits
   .wp-block-group/.wp-block-columns/.wp-block-cover unabhängig von
   .alignfull, WordPress-Kern setzt auf .alignfull aber zusätzlich
   width:100vw sowie negative margin-left/right (calc(50% - 50vw)) für den
   Breakout-Effekt – die müssen hier gezielt zurückgesetzt werden, sonst
   gewinnt trotz gesetztem max-width die Breakout-Positionierung. */

.bc-front-content .alignfull {
	width: auto;
	margin-left: auto;
	margin-right: auto;
}

.bc-front-content h1,
.bc-front-content h2,
.bc-front-content h3,
.bc-front-content h4 {
	font-family: var(--bct-font-display);
	color: var(--bct-color-wood-dark);
	line-height: 1.2;
}

.bc-front-content h2 {
	font-size: 2.074rem;
}

.bc-front-content h3 {
	font-size: 1.728rem;
}

.bc-front-content h4 {
	font-size: 1.44rem;
}

.bc-front-content a:not(.wp-element-button) {
	color: var(--bct-color-accent);
}

.bc-front-content a:not(.wp-element-button):hover {
	text-decoration: underline;
}

.bc-front-content a:focus-visible {
	outline: 2px solid var(--bct-color-accent);
	outline-offset: 2px;
}

.bc-front-content img {
	max-width: 100%;
	height: auto;
}

/* Hero (wp:cover): große Fläche, zentrierte weiße Überschrift, wie .bc-hero
   zuvor – Textfarbe bleibt die im Editor gesetzte Weißfarbe (Overlay-Bild). */
.bc-front-content .wp-block-cover {
	text-align: center;
}

.bc-front-content .wp-block-cover h1 {
	color: inherit;
	font-size: 2.986rem;
}

.bc-front-content .wp-block-cover p {
	color: inherit;
	font-family: var(--bct-font-body);
}

/* Buttons (wp:buttons) auf .bc-button-Optik mappen, analog Downloads/
   Newsletter aus P05-6. */
.bc-front-content .wp-element-button {
	display: inline-block;
	padding: 0.75em 1.75em;
	border: 2px solid var(--bct-color-wood-dark);
	border-radius: 4px;
	background: linear-gradient(180deg, var(--bct-color-accent) 0%, var(--bct-color-wood-dark) 100%);
	color: var(--bct-color-parchment);
	font-family: var(--bct-font-display);
	letter-spacing: 0.04em;
	text-decoration: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 6px rgba(0, 0, 0, 0.35);
}

.bc-front-content .wp-element-button:hover {
	background: linear-gradient(180deg, var(--bct-color-wood) 0%, var(--bct-color-wood-dark) 100%);
	text-decoration: none;
}

.bc-front-content .wp-element-button:focus-visible {
	outline: 3px solid var(--bct-color-accent);
	outline-offset: 2px;
}

.bc-front-content .wp-block-button.is-style-outline .wp-element-button {
	background: transparent;
	border-color: var(--bct-color-wood);
	color: var(--bct-color-wood-dark);
	box-shadow: none;
}

.bc-front-content .wp-block-cover .wp-block-button.is-style-outline .wp-element-button {
	border-color: var(--bct-color-parchment);
	color: var(--bct-color-parchment);
}

.bc-front-content .wp-block-button.is-style-outline .wp-element-button:hover {
	background: rgba(107, 66, 38, 0.15);
}

/* Blog (P03-4) */

/* Archiv-Kachelraster (P05-13): ersetzt die vormalige einspaltige
   .bc-blog-list-Liste, Grid-Vorbild wie .bc-styleguide__demo-row. */
.bc-news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5em;
	max-width: var(--bct-container-width);
	margin: 0 auto;
	padding: 0 1em;
}

.bc-news-card img {
	display: block;
	width: calc(100% + 2.5em);
	max-width: calc(100% + 2.5em);
	height: auto;
	margin: -1.5em -1.25em 1em;
	border-radius: 4px 4px 0 0;
}

.bc-news-card time {
	display: block;
	font-family: var(--bct-font-body);
	font-size: 0.875em;
	/* P07-3-Fix: Alpha von 0.65 auf 0.72 angehoben – 0.65 erreichte gegen
	   den Seitenhintergrund nur 4.65:1 (WCAG-AA-Minimum 4.5:1 ohne Puffer,
	   feinschliff-audit.md, „Blog-Metadaten knapp über der Schwelle"), echte
	   Texturstellen können heller als der Flächenton sein. 0.72 ergibt
	   5.74:1 mit Sicherheitsmarge. */
	color: rgba(44, 28, 16, 0.72);
	margin-bottom: 0.5em;
}

.bc-news-card .bc-news-card__excerpt a {
	color: var(--bct-color-accent);
	text-decoration: none;
}

.bc-news-card .bc-news-card__excerpt a:hover {
	text-decoration: underline;
}

.bc-news-card .bc-news-card__excerpt a:focus-visible {
	outline: 2px solid var(--bct-color-accent);
	outline-offset: 2px;
}

.bc-blog-single time {
	display: block;
	font-family: var(--bct-font-body);
	font-size: 0.875em;
	/* P07-3-Fix: siehe .bc-news-card time oben (gleicher Grund, gleicher
	   neuer Wert, 5.74:1). */
	color: rgba(44, 28, 16, 0.72);
	margin-bottom: 0.5em;
}

.bc-blog-single {
	max-width: var(--bct-container-width);
	margin: 0 auto;
	padding: 0 1em 3em;
}

/* Breite (P05-15): the_content()-Fließtext bekommt dieselbe eigene
   Lesebreite wie .bc-page-content/.bc-legal-content (max-width: 70ch,
   siehe dort), unabhängig von der breiteren --bct-container-width-Box. */
.bc-blog-single p,
.bc-blog-single ul,
.bc-blog-single ol {
	max-width: 70ch;
	margin: 0 auto 1em;
}

/* Kontaktseite (P03-5) */

.bc-contact {
	max-width: var(--bct-container-width);
	margin: 0 auto;
	padding: 0 1em 3em;
}

.bc-contact p,
.bc-contact ul,
.bc-contact ol {
	max-width: 70ch;
	margin: 0 auto 1em;
}

.bc-contact__form {
	margin-top: 1.5em;
}

/* 404-Seite (P03-7) */

.bc-404 {
	max-width: 48em;
	margin: 0 auto;
	padding: 4em 1em;
	text-align: center;
}

.bc-404 h1 {
	font-family: var(--bct-font-display);
	color: var(--bct-color-wood-dark);
	font-size: 2.986rem;
	line-height: 1.2;
	margin: 0 0 0.5em;
}

.bc-404 p {
	font-family: var(--bct-font-body);
	line-height: 1.6;
	margin: 0 auto 1.5em;
}

/* Header/Hauptmenü (P04-1) */

.bc-site-header {
	background-color: var(--bct-color-wood-dark);
	background-image: url('../img/textures/bc-texture-holzplanke.webp');
	background-repeat: repeat;
	position: sticky;
	top: 0;
	z-index: 30;
	transition: box-shadow 0.2s ease;
}

/* Schattenwurf erst nach dem ersten Scrollen (per JS gesetzt, bct-theme.js) –
   Signal, dass der Header jetzt "schwebt" statt fest im Seitenfluss zu
   stehen. Kein Transparenz-/Kontrastrisiko, da der Header-Hintergrund
   (Holzplanken-Textur) immer deckend bleibt und nie durchscheint. */
.bc-site-header--scrolled {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.bc-site-header__inner {
	max-width: var(--bct-container-width);
	margin: 0 auto;
	padding: 1em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1em;
}

.bc-site-branding {
	font-family: var(--bct-font-display);
	color: var(--bct-color-parchment);
	font-size: 1.5em;
	text-decoration: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.bc-site-branding:hover,
.bc-site-branding:focus-visible {
	color: var(--bct-color-accent);
}

.bc-nav-primary {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
	margin: 0;
	padding: 0;
}

.bc-nav-primary a {
	color: var(--bct-color-parchment);
	font-family: var(--bct-font-body);
	text-decoration: none;
	padding: 0.25em 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.bc-nav-primary a:hover,
.bc-nav-primary a:focus-visible {
	color: var(--bct-color-accent-light);
	text-decoration: underline;
}

/* P07-3-Fix: Haupt-Navigation nutzte als einzige Komponentengruppe keinen
   Outline-Fokusring (nur Farbwechsel + Unterstreichung) – inkonsistent zum
   Muster aus Block 1 (.bc-button/.bc-field, outline: 3px solid
   var(--bct-color-accent), outline-offset: 2px). Hier --bct-color-accent-light
   statt --bct-color-accent, da die Navigation auf dunklem
   --bct-color-wood-dark-Untergrund liegt, wo --bct-color-accent zu dunkel
   ist (siehe --bct-color-accent-light-Kommentar oben). Kontrast
   --bct-color-accent-light gegen --bct-color-wood-dark: 4.78:1, weit über
   dem 3:1-Mindestwert für UI-Komponenten. */
.bc-nav-primary a:focus-visible {
	outline: 3px solid var(--bct-color-accent-light);
	outline-offset: 2px;
}

.bc-nav-primary .current-menu-item > a {
	color: var(--bct-color-accent-light);
}

/* Navi-Bar: Submenüs (P04-5) */

.bc-nav-primary li {
	position: relative;
}

.bc-nav-primary .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0.5em 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 12em;
	background-color: var(--bct-color-parchment);
	border: 2px solid var(--bct-color-wood);
	border-radius: 4px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
	display: none;
	z-index: 20;
}

.bc-nav-primary li:hover > .sub-menu,
.bc-nav-primary li:focus-within > .sub-menu {
	display: block;
}

.bc-nav-primary .sub-menu a {
	color: var(--bct-color-ink);
	display: block;
	padding: 0.5em 1em;
}

.bc-nav-primary .sub-menu a:hover,
.bc-nav-primary .sub-menu a:focus-visible {
	color: var(--bct-color-accent);
}

/* P07-3-Fix: Der weiter oben ergänzte Outline-Fokusring
   (.bc-nav-primary a:focus-visible, --bct-color-accent-light) gilt wegen
   geringerer Spezifität auch hier, --bct-color-accent-light wurde aber
   gezielt für dunkle Untergründe gewählt – auf dem hellen Pergament-Panel
   des Desktop-Submenüs ergäbe das nur 2.07:1 (unter dem 3:1-Minimum für
   UI-Komponenten). Hier auf --bct-color-accent zurückgesetzt (5.24:1
   gegen den Pergament-Hintergrund des Panels). */
.bc-nav-primary .sub-menu a:focus-visible {
	outline-color: var(--bct-color-accent);
}

.bc-nav-primary .sub-menu .current-menu-item > a {
	color: var(--bct-color-accent);
	font-weight: 700;
}

.bc-nav-primary .menu-item-has-children > a {
	padding-right: 1.25em;
	position: relative;
}

.bc-nav-primary .menu-item-has-children > a::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -0.15em;
	width: 0;
	height: 0;
	border: 0.3em solid transparent;
	border-top-color: currentColor;
}

/* Mobile Navigation (P04-2) */

.bc-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	background: none;
	border: 2px solid var(--bct-color-parchment);
	border-radius: 3px;
	color: var(--bct-color-parchment);
	cursor: pointer;
}

.bc-nav-toggle:hover,
.bc-nav-toggle:focus-visible {
	border-color: var(--bct-color-accent);
	color: var(--bct-color-accent);
}

@media (max-width: 47.99em) {
	.bc-nav-toggle {
		display: inline-flex;
	}

	.bc-nav-primary:not(.is-open) {
		display: none;
	}

	.bc-nav-primary.is-open {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.bc-nav-primary .menu-item-has-children > a::after {
		display: none;
	}

	.bc-nav-primary .sub-menu {
		display: block;
		position: static;
		background: none;
		border: none;
		box-shadow: none;
		padding-left: 1em;
	}

	.bc-nav-primary .sub-menu a {
		color: var(--bct-color-parchment);
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	}

	/* P07-3-Fix: Die globale Hover/Fokus-Regel weiter oben
	   (.bc-nav-primary .sub-menu a:hover/:focus-visible) bleibt wegen
	   höherer Pseudoklassen-Spezifität auch hier aktiv und würde ohne
	   diese Überschreibung dunkles Rot (--bct-color-accent, 1.89:1) auf
	   dem dunklen Mobil-Hintergrund zeigen (feinschliff-audit.md,
	   „Kritisch – Submenü-Hover/Fokus-Text auf Mobilgeräten"). Gleiche
	   Spezifität wie die globale Regel, aber später im Stylesheet →
	   gewinnt laut Kaskade. Nach dem Fix: 4.78:1 (--bct-color-accent-light
	   gegen --bct-color-wood-dark). */
	.bc-nav-primary .sub-menu a:hover,
	.bc-nav-primary .sub-menu a:focus-visible {
		color: var(--bct-color-accent-light);
	}

	/* P07-3-Fix: Die Desktop-Regel weiter oben
	   (.bc-nav-primary .sub-menu a:focus-visible { outline-color: accent })
	   ist für das helle Pergament-Panel des Desktop-Submenüs gedacht und hat
	   dieselbe Spezifität – ohne diese Überschreibung würde der Fokusring
	   hier auf dem dunklen Mobil-Hintergrund wieder in dunklem Rot
	   erscheinen (derselbe 1.89:1-Fehler wie bei der Textfarbe oben, nur für
	   den Rahmen statt den Text). Gleiche Spezifität, aber später im
	   Stylesheet → gewinnt laut Kaskade; Ergebnis 4.78:1. */
	.bc-nav-primary .sub-menu a:focus-visible {
		outline-color: var(--bct-color-accent-light);
	}
}

/* Footer (P04-3) */

.bc-site-footer {
	background-color: var(--bct-color-wood-dark);
	background-image: url('../img/textures/bc-texture-holzplanke.webp');
	background-repeat: repeat;
	color: var(--bct-color-parchment);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	margin-top: 3em;
}

.bc-site-footer__inner {
	max-width: var(--bct-container-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2em;
	padding: 3em 1em;
}

.bc-footer-contact a,
.bc-footer-nav a {
	color: var(--bct-color-parchment);
	text-decoration: none;
}

/* P07-3-Fix: Footer-Links lagen bislang bei Hover/Fokus auf
   --bct-color-accent (dunkles Rot) – auf dem dunklen
   --bct-color-wood-dark-Untergrund des Footers rechnerisch nur **1.89:1**,
   derselbe unzureichende Wert, den das Audit für die „ursprüngliche
   Akzentfarbe auf dunklem Grund" dokumentiert (feinschliff-audit.md,
   Abschnitt „Kontrast", Vergleichszeile vor dem 0.30.1-Fix). Der Audit-
   Befund „Navigationstext Header/Footer, Hover/Fokus" (Mängelliste, Punkt
   2) ging davon aus, dass Header **und** Footer bereits einheitlich
   --bct-color-accent-light nutzen – tatsächlich war nur der Header darauf
   umgestellt. Hier auf --bct-color-accent-light vereinheitlicht (jetzt
   4.78:1 gegen --bct-color-wood-dark, s. o.), zusätzlich Outline-Fokusring
   nach dem Block-1-Muster (.bc-button/.bc-field) ergänzt, der auf
   Hauptnavigation/Footer bislang fehlte. */
.bc-footer-contact a:hover,
.bc-footer-contact a:focus-visible,
.bc-footer-nav a:hover,
.bc-footer-nav a:focus-visible {
	color: var(--bct-color-accent-light);
	text-decoration: underline;
}

.bc-footer-contact a:focus-visible,
.bc-footer-nav a:focus-visible,
.bc-social-links a:focus-visible {
	outline: 3px solid var(--bct-color-accent-light);
	outline-offset: 2px;
}

.bc-footer-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.bc-social-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1em;
}

.bc-social-links a {
	color: var(--bct-color-parchment);
}

.bc-social-links a:hover,
.bc-social-links a:focus-visible {
	/* P07-3-Fix: gleicher Fehler/gleiche Korrektur wie bei
	   .bc-footer-contact/.bc-footer-nav oben (--bct-color-accent auf
	   --bct-color-wood-dark war 1.89:1). */
	color: var(--bct-color-accent-light);
}

.bc-social-links svg {
	width: 1.5em;
	height: 1.5em;
}

.bc-footer-bottom {
	text-align: center;
	padding: 1em;
	font-size: 0.875em;
	border-top: 1px solid var(--bct-color-wood);
}

/* Inhalts-Box (P05-12): gleiche Papier-Optik wie .bc-card (Textur, Rahmen,
   Nagelköpfe, Schatten), aber ohne dessen Ganze-Kachel-Link-Regeln – hier
   steht normaler Fließtext mit mehreren einzelnen Links drin. Per
   zusätzlicher Markup-Klasse mit .bc-page-content/.bc-legal-content/
   .bc-blog-single/.bc-contact kombiniert (siehe page.php,
   page-rechtstext.php, page-kontakt.php, single.php, page-galerie.php).
   Bewusst ans Ende der Datei gesetzt: bei gleicher Spezifität gewinnt die
   später stehende Regel, damit Margin/Padding hier zuverlässig die
   jeweilige Basisklasse überschreiben, unabhängig davon, wo diese im
   Stylesheet steht.
   Seitenkopf (P05-14): .bc-page-header (content-page-header.php,
   home.php, archive.php) trägt dieselbe Klasse als eigene, zweite Box
   oberhalb der Inhalts-Box – max-width kommt dort bereits von
   .bc-page-header selbst (s. o.), .bc-content-box liefert nur Optik +
   margin-bottom als Abstand zur folgenden Box. */

.bc-content-box {
	position: relative;
	margin: 0 auto 3em;
	padding: 2em 1.75em;
	background:
		radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.15), transparent 60%),
		url('../img/textures/bc-texture-card.webp');
	background-repeat: repeat;
	border: 3px solid var(--bct-color-wood);
	border-radius: 4px;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.bc-content-box::before,
.bc-content-box::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #d8c090, var(--bct-color-wood-dark));
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
	top: 8px;
}

.bc-content-box::before {
	left: 8px;
}

.bc-content-box::after {
	right: 8px;
}

/* Shop-Integration (P06-3, zurückgenommen 2026-10-02): Die ursprüngliche
   P06-3-Fassung unterdrückte hier die äußere Theme-Box
   (.bc-page-content.bc-content-box) auf den drei aktiven
   Ticket-Shop-Plugin-Seiten per fest einprogrammierter
   body.page-id-<ID>-Auswahl, um den in P06-1 festgestellten
   Box-in-Box-Effekt zu vermeiden (äußere Theme-Box + innere, vom Plugin
   selbst mitgebrachte Papier-Karten .bct-ticket-card/.bct-cart-table/
   etc.). Auftraggeber-Entscheidung nach Sichtung (2026-10-02): die
   fehlende äußere Box wirkte inkohärent mit dem Rest der Seite und die
   feste ID-Liste ist nicht die gewünschte Lösung für wiederkehrende
   Shop-/Plugin-Seiten. Der Suppress-Codeblock wurde daher ersatzlos
   entfernt – .bc-page-content.bc-content-box verhält sich auf diesen drei
   Seiten jetzt wieder wie auf jeder anderen Seite ohne eigenes Template
   (page.php), ohne jede Seiten-ID-Sonderbehandlung. Der damit
   zurückkehrende Box-in-Box-Effekt (äußere Theme-Box um die vom Plugin
   gestalteten inneren Karten) ist eine bewusst in Kauf genommene
   Zwischenlösung, siehe docs/STATE.md für die weitere Diskussion/den
   nächsten Schritt. */

/* Shop-Integration: Lesbarkeit "Zur Kasse"-Button (Auftraggeber-Feedback,
   2026-10-02). .bct-cart-checkout-link kommt aus dem Plugin-eigenen CSS
   (../becks-creek shop/becks-creek-tickets/assets/css/bct-theme.css,
   außerhalb dieses Projekts, siehe ROADMAP "Nicht Teil dieses Blocks") und
   war auf der Produktivinstanz kaum lesbar (zu geringer Kontrast Text/
   Verlauf). Theme-seitige Angleichung an die reguläre .bc-button--primary-
   Optik, ausschließlich auf der Warenkorb-Seite (1526). */

body.page-id-1526 .bct-cart-checkout-link {
	border: 2px solid var(--bct-color-wood-dark);
	border-radius: 4px;
	background: linear-gradient(180deg, var(--bct-color-accent) 0%, var(--bct-color-wood-dark) 100%);
	color: var(--bct-color-parchment);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 6px rgba(0, 0, 0, 0.35);
}

body.page-id-1526 .bct-cart-checkout-link:hover {
	background: linear-gradient(180deg, var(--bct-color-wood) 0%, var(--bct-color-wood-dark) 100%);
	color: var(--bct-color-parchment);
}

/* Archiv-Pagination (P05-13): WordPress' Standard-Markup
   (.nav-links/.page-numbers/.current aus the_posts_pagination()) kommt ohne
   eigenes CSS komplett ungestylt (Browser-Default-Blau). Button-Optik
   analog .bc-button--secondary. */

.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5em;
	max-width: var(--bct-container-width);
	margin: 2em auto 0;
	padding: 0 1em;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5em;
	padding: 0.5em 0.75em;
	border: 2px solid var(--bct-color-wood);
	border-radius: 4px;
	font-family: var(--bct-font-display);
	font-size: 0.9em;
	letter-spacing: 0.02em;
	color: var(--bct-color-wood-dark);
	background: transparent;
	text-decoration: none;
}

a.page-numbers:hover {
	background: var(--bct-color-wood);
	color: var(--bct-color-parchment);
}

a.page-numbers:focus-visible {
	outline: 3px solid var(--bct-color-accent);
	outline-offset: 2px;
}

.page-numbers.current {
	border-color: var(--bct-color-wood-dark);
	background: linear-gradient(180deg, var(--bct-color-accent) 0%, var(--bct-color-wood-dark) 100%);
	color: var(--bct-color-parchment);
}

.page-numbers.dots {
	border-color: transparent;
}