/*
Theme Name: Beni Brachtel
Theme URI: https://benibrachtel.com
Author: Beni Brachtel
Description: Minimalistisches, zweisprachiges (DE/EN) Portfolio-Theme für benibrachtel.com – schwarzer Hintergrund, Projekte in Kapiteln, Bild und Text nebeneinander.
Version: 1.4.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: benibrachtel
*/

/* ---------- Schrift: Inter (frei, SIL Open Font License, siehe fonts/Inter-OFL.txt) ---------- */
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Variable.woff') format('woff'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Variable-Italic.woff') format('woff'); font-weight: 100 900; font-style: italic; font-display: swap; }

/* ---------- Grundwerte ---------- */
:root {
	--bg: #000000;
	--fg: #EDEDE8;
	--fg-soft: #D2D2CC;
	--muted: #8C8C86;
	--line: #2A2A28;
	--line-strong: #EDEDE8;
	--pad: 48px;
	--font: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.45;
	letter-spacing: -0.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--fg); text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; padding: 8px 12px; background: var(--fg); color: #000; }

/* ---------- Kopfzeile ---------- */
.site-header {
	display: flex; flex-wrap: wrap; align-items: baseline;
	gap: 8px 28px; padding: 28px var(--pad) 0;
}
.site-title { font-size: 18px; font-weight: 700; margin-right: auto; }
.site-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.site-tools { display: flex; align-items: baseline; gap: 28px; }
.lang-switch { display: inline-flex; align-items: baseline; font-size: 13px; letter-spacing: 0.02em; }
.lang-switch a { color: var(--muted); }
.lang-switch a.is-active { color: var(--fg); }
.lang-switch .sep { color: #4A4A46; padding: 0 1px; }
.ig { font-size: 16px; }
.ig-short { display: none; }
.lang-toggle { display: none; }
.arrow { display: inline-block; width: 0.72em; height: 0.72em; vertical-align: -0.02em; overflow: visible; }
a:hover .arrow { text-decoration: none; }
/* Ein einziger Pfeil nach oben, fest oben rechts; erscheint beim Scrollen. */
.back-top {
	position: fixed; z-index: 40; right: max(var(--pad), env(safe-area-inset-right, 0px)); top: calc(16px + env(safe-area-inset-top, 0px));
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -8px;
	border-radius: 50%; background: rgba(0, 0, 0, .72); color: var(--fg); transition: opacity .25s, visibility .25s;
}
.back-top .arrow { width: 16px; height: 16px; }
.back-top:hover { color: var(--muted); }
.back-top.is-hidden { opacity: 0; visibility: hidden; }

/* ---------- Startseite ---------- */
.home-bar {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
	gap: 8px 28px; padding: 28px var(--pad) 48px;
}
.chapter-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.view-switch { display: flex; align-items: baseline; gap: 6px; }
.view-switch button {
	padding: 0; border: 0; background: transparent; cursor: pointer;
	font: inherit; color: var(--muted);
}
.view-switch button[aria-pressed="true"] { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }

.chapter { padding-bottom: 96px; scroll-margin-top: 16px; }
.chapter-title {
	display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
	margin: 0; padding: 16px var(--pad); border-top: 1px solid var(--line-strong);
	font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em;
}
.chapter:first-of-type .chapter-title { border-top: 0; }
.view-switch .sep { color: #4A4A46; }

.entries { display: flex; flex-direction: column; gap: 96px; padding: 32px var(--pad) 0; }
.entry { display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: flex-start; }
.entry-media { flex: 2 1 560px; min-width: 0; display: block; }
.entry-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; transition: opacity .2s; }
.entry-media:hover img { opacity: .85; }
#releases .entry-media img { width: 75%; }
.bereich-releases .project-hero { padding-left: var(--pad); padding-right: var(--pad); }
.bereich-releases .project-hero img { display: block; max-width: 75%; margin: 0; object-position: left top; }
@media (min-width: 901px) {
	/* Computer: Cover endet genau am Wortende von „Kontakt“ (Wert setzt js/site.js). */
	html.has-kontakt .bereich-releases .project-hero img { width: calc(var(--kontakt-end) - var(--pad)); max-width: 100%; max-height: none; }
}
.entry-text { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.entry-meta { display: flex; gap: 16px; font-size: 14px; color: var(--muted); }
.entry-title { font-size: 24px; line-height: 1.2; font-weight: 700; }
.entry-venue { color: var(--muted); }
.listen-link {
	display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start;
	text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #55554F;
}
.listen-link:hover { text-decoration-color: #fff; }
.listen-link { gap: 0.3em; }
.chapter-nav a .arrow, .site-nav .arrow { margin-left: 0.1em; }

.index-list { display: none; padding: 0 var(--pad); overflow-x: auto; }
.index-row {
	display: grid; grid-template-columns: 72px minmax(0, 3fr) minmax(0, 3fr) 140px;
	gap: 24px; align-items: baseline; min-width: 760px; padding: 12px 0; border-bottom: 1px solid var(--line);
}
.index-row .year, .index-row .art { font-size: 14px; color: var(--muted); }
.index-row .title { font-size: 17px; font-weight: 700; }
.index-row .venue { font-size: 15px; color: var(--muted); }
body.view-index .entries { display: none; }
body.view-index .index-list { display: block; }

/* ---------- Projektseite ---------- */
.back-link { padding: 20px var(--pad) 0; font-size: 15px; }
.back-link a { color: var(--muted); }
.project-hero { margin: 0; padding: 30px 24px 0; }
.project-hero img { width: 100%; height: auto; max-height: 88vh; object-fit: contain; object-position: center top; }
.project-body { display: flex; flex-wrap: wrap; gap: 40px 48px; padding: 32px var(--pad) 120px; }
.project-meta { flex: 1 1 260px; display: flex; flex-direction: column; gap: 22px; font-size: 15px; }
.project-meta div { display: flex; flex-direction: column; gap: 2px; }
.project-meta .k { color: var(--muted); }
.project-article { flex: 3 1 640px; min-width: 0; max-width: 820px; }
.project-article h1, .page-title {
	margin: 0 0 28px; font-size: 48px; line-height: 1.08; font-weight: 700; letter-spacing: -0.015em;
}
.prose { color: var(--fg-soft); font-size: 17px; line-height: 1.55; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.2em; }
.prose h1, .prose h2, .prose h3, .prose h4 { margin: 2em 0 .6em; font-size: 15px; font-weight: 400; color: var(--muted); }
.prose a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #55554F; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose iframe, .prose video, .prose .wp-block-embed { max-width: 100%; }
.prose .wp-block-embed__wrapper iframe, .prose > iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.prose strong { color: var(--fg); font-weight: 700; }

.project-nav .k { color: var(--muted); }
.project-nav {
	display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
	padding: 28px var(--pad); border-top: 1px solid var(--line); font-size: 15px;
}
/* Vorheriges links, nächstes rechts – auch am Handy nebeneinander. */
.project-nav > span { flex: 1 1 0; min-width: 0; }
.project-nav > span:last-child { text-align: right; }

/* ---------- Bandcamp-Player (lädt erst nach Klick) ---------- */
.player { margin: 0 0 48px; border: 1px solid #3A3A37; }
.player-consent { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 20px; }
.player-consent p { margin: 0; flex: 1 1 260px; font-size: 14px; color: var(--muted); }
.player-load {
	min-height: 48px; padding: 0 20px; border: 1px solid var(--fg); background: transparent; color: var(--fg);
	font: inherit; font-size: 15px; cursor: pointer;
}
.player-load:hover { background: var(--fg); color: #000; }
.player iframe { display: block; width: 100%; height: 120px; border: 0; }
.player-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 10px 20px; border-top: 1px solid #3A3A37; font-size: 14px; color: var(--muted); }

/* ---------- Seiten / Bio ---------- */
.page-wrap { padding: 56px var(--pad) 120px; }
.page-wrap .prose { max-width: 820px; }
.split { display: flex; flex-wrap: wrap; gap: 40px 48px; padding: 56px var(--pad) 120px; }
.split > .col-a { flex: 1 1 380px; min-width: 0; }
.split > .col-b { flex: 1 1 560px; min-width: 0; max-width: 760px; }
.split + .split { border-top: 1px solid var(--line); }
.split { position: relative; }

.bio-photo figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.bio-text { font-size: 17px; line-height: 1.55; color: var(--fg); }
.bio-text p { margin: 0 0 1.55em; }
.bio-text h2 { margin: 0 0 12px; font-size: 17px; font-weight: 400; color: var(--muted); }
.bio-text dl { margin: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); border-top: 1px solid var(--line); }
.bio-text dt { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.bio-text dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.br-desktop { display: inline; }

.contact-list { display: flex; flex-direction: column; gap: 28px; font-size: 20px; line-height: 1.4; }
.contact-list div { display: flex; flex-direction: column; gap: 6px; }
.contact-list .k { font-size: 15px; color: var(--muted); }
.contact-list a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #55554F; }
.newsletter { margin-top: 28px; padding-top: 32px; border-top: 1px solid var(--line); }
.newsletter h3 { margin: 0 0 14px; font-size: 20px; font-weight: 700; }
.newsletter input[type="email"], .newsletter input[type="text"] {
	min-height: 48px; padding: 0 14px; border: 1px solid #55554F; border-radius: 0; background: #000; color: var(--fg); font: inherit; font-size: 16px; width: 100%;
}
.newsletter input[type="submit"], .newsletter button {
	min-height: 48px; padding: 0 22px; border: 1px solid var(--fg); border-radius: 0; background: var(--fg); color: #000; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.newsletter label { color: var(--muted); font-size: 14px; }

/* ---------- Fußzeile ---------- */
.site-footer {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
	padding: 28px var(--pad) 40px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted);
}
.site-footer nav { display: flex; gap: 24px; }
.site-footer a { color: var(--muted); }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
	:root { --pad: 20px; }
	.br-desktop { display: none; }
	html { scroll-behavior: smooth; }
	.site-header { display: grid; grid-template-columns: 1fr auto; gap: 18px 16px; padding-top: 16px; }
	.site-title { grid-column: 1; grid-row: 1; margin: 0; }
	.site-tools { grid-column: 2; grid-row: 1; gap: 16px; }
	.lang-switch { display: none; }
	.lang-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 6px; margin: -4px 0; border: 1px solid var(--muted); font-size: 12px; letter-spacing: 0.04em; line-height: 1; color: var(--fg); }
	.site-nav { grid-column: 1 / -1; grid-row: 2; gap: 6px 20px; }
	.home-bar { padding-top: 22px; padding-bottom: 32px; gap: 28px 20px; }
	.chapter-nav { gap: 6px 16px; font-size: 15px; white-space: nowrap; }
	.chapter-nav a .arrow { margin-left: 0.05em; }
	.view-switch { flex-basis: 100%; }
	#releases .entry-media img { margin: 0 0 0 var(--pad); width: 75%; }
	.chapter-title { font-size: 24px; }
	.entries { gap: 64px; padding-left: 0; padding-right: 0; }
	.entry-text { padding: 0 var(--pad); }
	.project-hero { padding: 22px 0 0; }
	.project-body { padding-top: 24px; }
	.project-article h1, .page-title { font-size: 34px; }
	.bio-text dl { grid-template-columns: 84px minmax(0, 1fr); }
	.contact-list { font-size: 18px; }
}
/* Hochkant: Kapitel in zwei Reihen (Bühne & Film / Klang & Raum, Releases / Lehre). */
@media (max-width: 600px) {
	.chapter-nav { display: grid; grid-template-columns: minmax(var(--media-x, auto), max-content) auto; justify-content: start; gap: 6px 0; }
	.chapter-nav a { padding-right: 12px; }
	/* Index im selben Raster: Titel ab „Media“; Ort und Art liegen rechts daneben (zur Seite wischen). */
	.index-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.index-row { grid-template-columns: var(--media-x, 124px) calc(100vw - var(--media-x, 124px) - 2 * var(--pad)) 260px 120px; gap: 0; min-width: max-content; }
	.index-row .title { font-size: 16px; padding-right: 24px; }
	.index-row .venue { font-size: 14px; padding-right: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }