/*
Theme Name: Konrad Braun
Theme URI: https://konradbraun.at
Author: Konrad Braun
Description: Portfolio-Theme für konradbraun.at – Startseite mit Logo, Video- und Foto-Bereich, Projekte, Kachel-Grid und Burger-Menü.
Version: 1.9.1
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: konradbraun
*/

/* =========================================================================
   v1.1.0 – CSS komplett neu aufgeräumt (mobile-first).
   Desktop sieht aus wie vorher, Handy/Tablet bekommen eigene Regeln.
   ====================================================================== */

:root {
	--kb-blue: #1200ff;              /* exakt das Blau aus dem Logo */
	--kb-glow: 0 0 2px var(--kb-blue);
	--kb-glow-strong: 0 0 6px var(--kb-blue);
	--kb-glow-soft: 0 0 1px var(--kb-blue);   /* Links im Text: nur ein Hauch Blur */
	--kb-text: #111;
	--kb-nav-width: 90px;            /* Desktop-Seitenleiste */
	--kb-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ===== Grundlagen ===== */

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: #fff;
	color: var(--kb-text);
	font-family: var(--kb-font);
	font-weight: 300;
	font-size: 0.95rem;
	-webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
	letter-spacing: -0.5px;
}

a {
	color: var(--kb-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

img, video {
	max-width: 100%;
}

section {
	margin-bottom: 3rem;
}

.opacity-hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
.opacity-hover:hover {
	opacity: 0.6;
}

/* ===== Links im Text: schwarz mit weichem Glow (wie die fetten Begriffe im About-Text) =====
   v1.8.4: vorher blau – zu viel Blau, die Inhalte gingen unter. Blau bleibt für Logo, Titel & Akzente. */
.project-detail a:not(:has(img)),
.about-content a:not(:has(img)) {
	color: var(--kb-text);
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
	font-weight: 500;
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.kb-blue-link {
	color: var(--kb-blue);
	text-shadow: var(--kb-glow-soft);
	font-weight: 400;
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.project-detail a:not(:has(img)):hover,
.about-content a:not(:has(img)):hover,
.kb-blue-link:hover {
	opacity: 0.6;
}

/* Alte Links aus dem Import (Downloads, Kontakt) haben Inline-Styles
   mit "color: inherit" – die werden hier aufs Logo-Blau gezogen */
.project-detail a[style],
.about-content a[style],
.project-detail a[download],
.about-content a[download],
.project-detail a[href^="mailto:"],
.project-detail a[href^="tel:"],
.about-content a[href^="mailto:"],
.project-detail a[x-apple-data-detectors],
.about-content a[x-apple-data-detectors] {
	color: var(--kb-text) !important;
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.35) !important;
	text-decoration: none !important;
	font-weight: 500 !important;
}
.project-detail a strong,
.about-content a strong,
.project-detail a u,
.about-content a u {
	font-weight: inherit;
	text-decoration: none;
}

/* Kleine Icons (Download, Instagram, LinkedIn, Mail, Telefon) – nur blau, kein Blur */
.project-detail i[class*="fa-"],
.about-content i[class*="fa-"] {
	color: var(--kb-blue);
	width: 1.2em;
	margin-right: 0.45em;
	text-align: center;
}

/* ===== Navigation =====
   Handy: Burger oben links, Menü klappt als Vollbild-Overlay auf, alles mittig.
   Desktop (ab 801px): feste schmale Seitenleiste links wie bisher. */

.burger {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1001;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	-webkit-tap-highlight-color: transparent;
}
.burger span {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--kb-text);
	transition: transform 0.3s ease, opacity 0.2s ease;
}
.burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.side-nav {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.97);
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.side-nav.active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

.side-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.8rem;
}

.side-nav a {
	color: var(--kb-text);
	text-decoration: none;
	font-family: var(--kb-font);
	font-weight: 300;
	font-size: 1.15rem;
	transition: opacity 0.2s ease;
}
.side-nav a:hover {
	opacity: 0.6;
}

/* Untermenü (Work → Video / Photo): symmetrisch unter dem Hauptpunkt */
.has-submenu {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.has-submenu .submenu {
	max-height: 0;
	overflow: hidden;
	gap: 0;
	padding: 0;
	margin: 0;
	transition: max-height 0.4s ease, margin 0.4s ease;
}
.has-submenu.active .submenu {
	max-height: 200px;
	margin-top: 0.6rem;
}
.submenu li a {
	display: block;
	padding: 0.5rem 0.4rem;
	font-size: 0.95em;
	opacity: 0.75;
}

/* Symbol [+] darf die Zeile nicht aus der Mitte schieben */
.work-toggle {
	position: relative;
}
.work-toggle .symbol {
	position: absolute;
	left: 100%;
	margin-left: 0.3em;
	white-space: nowrap;
}

/* ===== Logo oben auf Unterseiten ===== */

.page-header {
	position: relative;
	padding: 1.2rem 0 1rem;
	background: #fff;
	display: flex;
	justify-content: center;
}
.logo-center a {
	display: inline-block;
	text-decoration: none;
}
.top-logo {
	display: block;
	width: 80px;
	height: auto;
}

/* ===== Startseite: Logo-Bühne ===== */

.logo-container {
	position: relative;
	height: 100vh;
	height: 100svh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	margin: 0;
}

.logo {
	display: block;
	width: 80vw;
	max-width: 500px;
	height: auto;
	background: #fff;
	object-fit: cover;
	object-position: center;
	clip-path: inset(10% 0 10% 0);
	opacity: 0;
	transform: scale(0.95);
	animation: logoFadeIn 1.5s ease-out 0.3s forwards;
}
@keyframes logoFadeIn {
	to { opacity: 1; transform: scale(1); }
}

/* Logo + Scroll-Hinweis werden beim Scrollen per JS weich ausgeblendet
   (Unschärfe, Bewegung) – gesteuert über die Wrapper, nicht über .logo selbst */
.hero-inner,
.scroll-hint {
	will-change: transform, opacity, filter;
}
.hero-inner {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* Scroll-Hinweis unter dem Logo */
.scroll-hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4.5rem;
	margin: 0 auto;
	width: max-content;
	color: var(--kb-blue);
	text-shadow: var(--kb-glow);
	text-decoration: none;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.scroll-hint__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	opacity: 0;
	animation: hintIn 1.2s ease-out 1.8s forwards;
}
.scroll-hint__arrow {
	width: 14px;
	height: 14px;
	border-right: 1.75px solid var(--kb-blue);
	border-bottom: 1.75px solid var(--kb-blue);
	transform: rotate(45deg);
	filter: drop-shadow(0 0 2.5px var(--kb-blue));
	animation: hintFloat 2.2s ease-in-out 3s infinite;
}
.scroll-hint__label {
	animation: hintPulse 2.2s ease-in-out 3s infinite;
}
@keyframes hintPulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.6; }
}
@keyframes hintIn {
	from { opacity: 0; filter: blur(6px); }
	to   { opacity: 1; filter: blur(0); }
}
@keyframes hintFloat {
	0%, 100% { transform: translateY(0) rotate(45deg); opacity: 1; }
	50%      { transform: translateY(8px) rotate(45deg); opacity: 0.55; }
}

/* Weißraum zwischen Startbild und Work – hier passiert der Übergang */
.home-gap {
	height: 35vh;
	height: 35svh;
}

/* ===== v1.8: Startseite mit schwebenden Kacheln =====
   Beim Laden treiben die ersten Kacheln frei durch den Raum, das Logo (transparent)
   und der Pfeil liegen darüber. Beim Scrollen fliegen die Kacheln in ihr Grid,
   Menü und Burger blenden ein. Steuerung in nav.js (Abschnitt "Intro"). */
.kb-intro-hero {
	background: transparent;
	z-index: 3;
	pointer-events: none;          /* Kacheln darunter bleiben klickbar … */
}
.kb-intro-hero .scroll-hint {
	pointer-events: auto;          /* … der Pfeil auch */
}

.kb-logo-canvas,
.kb-logo-fallback {
	clip-path: none;
	filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.22)) drop-shadow(0 10px 22px rgba(0, 0, 0, 0.14));
	width: min(56vw, 340px);
	height: auto;
	background: transparent;
	animation-delay: 1.3s;         /* Logo kommt nach den Kacheln */
}

/* Größerer, deutlicher Pfeil */
.kb-intro-hero .scroll-hint {
	bottom: 3rem;
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-shadow: 0 0 4px var(--kb-blue);
}
.kb-intro-hero .scroll-hint__inner {
	gap: 0.6rem;
	animation-delay: 2.1s;
}
.kb-intro-hero .scroll-hint__arrow {
	width: 34px;
	height: 34px;
	border-right-width: 3px;
	border-bottom-width: 3px;
	filter: drop-shadow(0 0 4px var(--kb-blue));
	animation: hintFloatBig 2s ease-in-out 3s infinite;
}
@keyframes hintFloatBig {
	0%, 100% { transform: translateY(0) rotate(45deg); opacity: 1; }
	50%      { transform: translateY(14px) rotate(45deg); opacity: 0.5; }
}

/* Schwebende Kacheln */
.kb-js .video-tile.kb-float {
	z-index: 2;
	transform-origin: 0 0;
	will-change: transform;
	opacity: 0;
	filter: blur(14px);
	transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.kb-js .video-tile.kb-float.kb-float-shown {
	opacity: 1;
	filter: none;
}
.video-tile.kb-floating .tile-caption,
.video-tile.kb-floating .video-overlay {
	opacity: 0;
	transition: opacity 0.4s ease;
}
.video-tile.kb-floating .tile-media {
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}

/* Menü + Burger erst nach dem ersten Scrollen */
.side-nav,
.burger {
	transition: opacity 0.6s ease, visibility 0s;
}
body.kb-intro-nav-hidden .burger,
body.kb-intro-nav-hidden:not(.kb-nav-open) .side-nav {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

/* Bereiche auf der Startseite */
.home-section {
	scroll-margin-top: 1rem;
	margin-bottom: 0;
}

.section-title-glow {
	font-family: var(--kb-font);
	font-weight: 300;
	font-size: 1.3rem;
	letter-spacing: 0.02em;
	text-align: center;
	color: var(--kb-blue);
	text-shadow: var(--kb-glow-strong);
	margin: 0;
	padding: 2rem 1rem 1.5rem;
}

/* ===== Inhalte (Work, Projekte, About) ===== */

.work-content,
.project-detail,
.about-content {
	max-width: 800px;
	margin: 0 auto;
	padding: 2rem 1rem 2rem;
	line-height: 1.7;
	box-sizing: border-box;
}
.home .work-content {
	padding-top: 0;
}

.project-detail h1 {
	font-size: 1.6rem;
	margin: 0 0 0.6rem;
	line-height: 1.3;
}
.project-detail h2 {
	font-size: 1.05rem;
	margin-top: 0;
}
/* v1.8.8: Texte entzerren – Luft zwischen Titel/Rolle, Credits und Text */
.project-detail h2 + p,
.project-detail h1 + p {
	margin-top: 2.2rem;
}
.project-detail p:has(> span[style*="opacity"]) {
	margin-bottom: 2.2rem;
}
/* „Video soon“ am Ende des Textes */
.project-detail .kb-soon-note {
	color: #777;
	font-style: italic;
}
/* Unauffälliger Link ohne Design (z. B. Namen) – nur leichter Hover */
.project-detail a.kb-quiet,
.about-content a.kb-quiet {
	color: inherit !important;
	text-shadow: inherit !important;
	font-weight: inherit !important;
	text-decoration: none !important;
	transition: opacity 0.3s ease;
}
.project-detail a.kb-quiet:hover,
.about-content a.kb-quiet:hover {
	opacity: 0.55 !important;
}

.about-content h1 {
	font-size: 2rem;
	margin-bottom: 2rem;
}
.about-content p > strong {
	font-weight: 500;
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
}
.about-portrait {
	display: block;
	width: 300px;
	max-width: 80%;
	height: auto;
	margin: 0 auto 50px;
	border-radius: 4px;
}

.project-detail img:not(.inline-gif),
.about-content img:not(.about-portrait) {
	max-width: 100%;
	height: auto;
}
.project-detail iframe {
	max-width: 100%;
}
.project-detail .wp-block-embed iframe,
.project-detail .wp-block-video video {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}
.project-detail figure {
	margin: 2rem 0;
}

.inline-gif {
	width: 140px;
	height: 140px;
	vertical-align: middle;
	margin: 0 4px;
	padding-top: 10px;
}

.kb-in-progress {
	color: var(--kb-blue);
	text-shadow: 0 0 5px var(--kb-blue);
	font-weight: 250;
	font-size: 1.6rem;
	text-align: center;
}

/* ===== Kachel-Grid =====
   Handy + Tablet: 2 nebeneinander, Desktop (ab 900px): 3 */

.video-grid,
.photo-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	padding: 0;
	margin: 0;
}

.video-tile {
	position: relative;
	display: block;
	width: 100%;
	color: var(--kb-text);
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.tile-media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.video-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

/* Titel unter dem Bild – nur auf Touch-Geräten sichtbar (siehe unten) */
.tile-caption {
	display: none;
}

.video-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
	transition: background 0.35s ease;
}

.video-title {
	color: #fff;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
	font-size: 0.8rem;
	line-height: 1.5;
	text-align: center;
	padding: 0.4rem 0.6rem;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Geräte mit Maus: Titel erscheint beim Hovern */
@media (hover: hover) {
	.video-tile:hover img { transform: scale(1.03); }
	.video-tile:hover .video-title { opacity: 1; }
	/* Beim Hovern wird das Bild leicht unscharf → Titel steht scharf darauf (Blur-Look der Seite) */
	.video-tile img {
		transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	}
	.video-tile:hover img {
		filter: blur(5px) brightness(0.92);
		transform: scale(1.06);
	}
	.video-title {
		font-weight: 400;
		letter-spacing: 0.02em;
		text-shadow: 0 0 12px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.35);
		transform: translateY(6px);
		transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	}
	.video-tile:hover .video-title {
		transform: none;
	}
}

/* Touch-Geräte (Handy, Tablet): kein Hover möglich → Bild bleibt frei,
   der Titel steht klein und ruhig darunter wie eine Bildunterschrift */
@media (hover: none) {
	.video-overlay { display: none; }
	.video-grid {
		column-gap: 4px;
		row-gap: 1.4rem;
	}
	.tile-caption {
		display: block;
		padding: 0.55rem 0.15rem 0;
		font-size: 0.7rem;
		line-height: 1.45;
		font-weight: 400;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		color: var(--kb-text);
	}
	.video-tile:active img { transform: scale(1.03); }
}

/* Foto-Liste (für später) */
.photo-list { display: flex; flex-direction: column; gap: 0; }
.photo-item { position: relative; display: block; overflow: hidden; }
.photo-item img { width: 100%; height: auto; display: block; transition: transform 0.4s ease; }
.photo-title {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-weight: 400;
	font-size: 1.4rem;
	opacity: 0;
	transition: opacity 0.3s ease;
	text-shadow: 0 0 5px #000;
}
@media (hover: hover) {
	.photo-item:hover img { transform: scale(1.02); }
	.photo-item:hover .photo-title { opacity: 1; }
}
@media (hover: none) {
	.photo-title { opacity: 1; }
}

/* ===== Einblend-Animation beim Scrollen =====
   Kacheln kommen nacheinander leicht von unten und werden dabei scharf
   (greift den Blur-Look vom Logo auf). Nur wenn JavaScript läuft. */

.kb-js .reveal {
	opacity: 0;
	transform: translateY(20px) scale(0.98);
	filter: blur(18px);
	transition:
		opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
		filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--kb-delay, 0ms);
	will-change: opacity, transform, filter;
}
.kb-js .reveal.is-in {
	opacity: 1;
	transform: none;
	filter: none;
	will-change: auto;
}

/* Bereichs-Titel ("Video", "Photo") – wird per JS beim Scrollen scharf */
.kb-js [data-kb-title] {
	opacity: 0;
	will-change: transform, opacity, filter;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.kb-js .reveal,
	.kb-js [data-kb-title] { opacity: 1; transform: none; filter: none; transition: none; }
	.kb-js body > header, .kb-js body > main, .kb-js body > footer,
	.kb-leaving body > header, .kb-leaving body > main, .kb-leaving body > footer { animation: none; }
	.scroll-hint__inner, .scroll-hint__arrow, .scroll-hint__label, .logo { animation: none; opacity: 1; transform: none; }
	.kb-intro-hero .scroll-hint__arrow { animation: none; }
	.scroll-hint__arrow { transform: rotate(45deg); }
}

/* ===== Seitenwechsel mit Blur =====
   Beim Klick auf einen internen Link verschwimmt die Seite, die neue wird scharf.
   Nur Inhalt (Logo, main, Footer) – das Menü bleibt ruhig stehen. */
.kb-js body > header,
.kb-js body > main,
.kb-js body > footer {
	animation: kbPageIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.kb-leaving body > header,
.kb-leaving body > main,
.kb-leaving body > footer {
	animation: kbPageOut 0.38s ease-in forwards;
}
@keyframes kbPageIn {
	from { opacity: 0; filter: blur(14px); }
	to   { opacity: 1; filter: blur(0); }
}
@keyframes kbPageOut {
	from { opacity: 1; filter: blur(0); }
	to   { opacity: 0; filter: blur(14px); }
}

/* ===== Zurück-Button =====
   Sitzt oben in der Kopfzeile, auf Höhe des Logos – getrennt vom Text.
   Handy: rechts oben, spiegelt den Burger links. Desktop: links an der Textkante. */
.kb-back {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0 0.4rem;
	color: var(--kb-text);
	text-decoration: none;
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: opacity 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}
.kb-back:hover { opacity: 0.6; }
.kb-back__arrow {
	display: inline-block;
	font-size: 1.15em;
	letter-spacing: 0;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.kb-back:hover .kb-back__arrow { transform: translateX(-5px); }

/* Contact-Seite: Links, Downloads und Icons schwarz statt blau */
.kb-page-contact .project-detail a,
.kb-page-contact .project-detail a[style],
.kb-page-contact .project-detail a[download],
.kb-page-contact .project-detail a[href^="mailto:"] {
	color: var(--kb-text) !important;
	text-shadow: none !important;
	font-weight: 300 !important;
}
.kb-page-contact .project-detail i[class*="fa-"] {
	color: var(--kb-text);
}

/* „Let's talk about your vision“ – dezenter Outline-Button (Stil wie BACK / WORK) */
.kb-cta {
	margin: 3.8rem 0 1rem;
	text-align: center;            /* v1.8.8: mittig, ohne Pfeil */
}
.kb-cta a {
	display: inline-flex;
	align-items: center;
	padding: 0.95rem 1.8rem;
	border: 1px solid var(--kb-text);
	border-radius: 999px;
	color: var(--kb-text) !important;
	background: transparent;
	text-shadow: none !important;
	font-size: 0.74rem;
	font-weight: 400 !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.kb-cta a:hover,
.kb-cta a:focus-visible {
	opacity: 1 !important;
	background: var(--kb-text);
	color: #fff !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.kb-cta .kb-cta__arrow {
	display: inline-block;
	font-size: 1.15em;
	letter-spacing: 0;
	color: inherit;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.kb-cta a:hover .kb-cta__arrow { transform: translateX(6px); }

/* ===== Einheitlicher Aufbau der Projektseiten (v1.8.6) =====
   Text → Linie → Video → Linie → Press → Linie → weitere Links → Linie → Button */
.kb-divider {
	margin: 2.6rem 0;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.project-detail h3.kb-section-title {
	margin: 0 0 0.9rem;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.project-detail .kb-link-list {
	margin: 0;
	line-height: 2;
}
.project-detail .kb-soon {
	margin: 0;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #777;
}
.project-detail .kb-player { margin: 0; }
.kb-divider + .kb-cta { margin-top: 0; }

/* Hochkant-Player (Shorts, Instagram) immer mittig */
.kb-player--vertical,
.kb-player--instagram {
	max-width: 400px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.kb-player--vertical .kb-player__frame,
.kb-player--instagram .kb-player__frame {
	margin: 0 auto;
}

/* Impressum & Datenschutz: ganz sachlich – Links normal, nur unterstrichen */
body.kb-page-impressum .project-detail a,
body.kb-page-datenschutz .project-detail a {
	color: inherit !important;
	text-shadow: none !important;
	font-weight: inherit !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

/* About: CV-Downloads schwarz mit Glow wie die fetten Begriffe im Text */
.about-content a[download],
.about-content a[download] strong,
.about-content a[download] u {
	color: var(--kb-text) !important;
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.35) !important;
	font-weight: 500 !important;
}
.about-content p:has(> a[download]) i[class*="fa-"] {
	color: var(--kb-text);
}

/* ===== Video-Player (Klick zum Laden, Datenschutz-freundlich) ===== */
.kb-player {
	margin: 2.2rem 0 0.4rem;
}
.kb-player__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #0b0b0b;
}
.kb-player--vertical .kb-player__frame {
	max-width: 360px;
	aspect-ratio: 9 / 16;
}
.kb-player__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.kb-player__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: blur(2px) brightness(0.9);
	transform: scale(1.04);
	transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.kb-player__poster:hover img,
.kb-player__poster:focus-visible img {
	filter: none;
	transform: scale(1.0);
}
.kb-player__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 76px;
	height: 76px;
	margin: -38px 0 0 -38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.kb-player__play::after {
	content: "";
	position: absolute;
	left: 31px;
	top: 25px;
	border-style: solid;
	border-width: 13px 0 13px 21px;
	border-color: transparent transparent transparent var(--kb-blue);
	filter: drop-shadow(0 0 2px var(--kb-blue));
}
.kb-player__poster:hover .kb-player__play { transform: scale(1.08); }
.kb-player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.kb-player__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.5rem;
	margin-top: 0.6rem;
	font-size: 0.72rem;
	line-height: 1.5;
	color: #777;
}
.kb-player__label {
	color: var(--kb-text);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.kb-player__caption a {
	color: #777 !important;
	text-shadow: none !important;
	font-weight: 300 !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
}
.kb-player--instagram .kb-player__frame {
	max-width: 400px;
	aspect-ratio: 400 / 720;
	background: #fff;
}
.kb-player--instagram .kb-player__poster img { filter: blur(2px) brightness(0.9); }
/* v1.8.7: Vorschaubild füllt den Player immer komplett (überschreibt .project-detail img { height:auto }) */
.project-detail .kb-player__poster img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
}

/* Contact: E-Mail-Adresse blau + fett */
body.kb-page-contact .project-detail a[href^="mailto:"] {
	color: var(--kb-blue) !important;
	text-shadow: var(--kb-glow-soft) !important;
	font-weight: 500 !important;
}

/* ===== Footer ===== */

footer {
	text-align: center;
	padding: 2rem 1rem;
	font-size: 0.85rem;
}

.main-footer {
	max-width: 700px;
	margin: 0 auto;
	font-weight: 300;
	color: var(--kb-blue);
	text-shadow: var(--kb-glow);
}
.main-footer p {
	margin: 0;
}

.footer-links {
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 1.2rem;
}
.footer-links a {
	color: var(--kb-blue);
	text-decoration: none;
	text-shadow: var(--kb-glow);
}
.footer-links a:hover {
	opacity: 0.6;
}

/* Startseite: Impressum / Datenschutz unten, exakt mittig unter dem Logo */
.home-footer {
	padding: 3rem 1rem 2rem;
	font-size: 0.75rem;
	font-weight: 300;
}
.home-footer .footer-links {
	margin: 0;
}
.home-footer__copy {
	margin: 0 0 0.6rem;
	color: var(--kb-blue);
	text-shadow: var(--kb-glow);
}

/* ===== Barrierefreiheit ===== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* =========================================================================
   Ab 601px (große Handys quer, Tablets)
   ====================================================================== */
@media (min-width: 601px) {
	body { font-size: 1rem; }

	.video-title { font-size: 0.95rem; }

	.work-content,
	.project-detail,
	.about-content {
		padding: 3rem 2rem 2rem;
	}
	.project-detail h1 { font-size: 2rem; }
	.about-content h1 { font-size: 2.5rem; }
	.inline-gif { width: 200px; height: 200px; }
	.top-logo { width: 100px; }
}

/* =========================================================================
   Ab 801px: Desktop mit fester Seitenleiste links (wie bisher)
   ====================================================================== */
@media (min-width: 801px) {
	body {
		margin-left: var(--kb-nav-width);
	}

	.burger { display: none; }

	.side-nav {
		inset: 0 auto 0 0;
		width: calc(var(--kb-nav-width) - 10px);
		padding: 2rem 0.5rem 0;
		box-sizing: border-box;
		background: #fff;
		align-items: flex-start;
		justify-content: center;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
		z-index: 10;
	}
	.side-nav ul { gap: 2rem; }
	.side-nav a { font-size: 0.8rem; }

	/* Desktop: [+] normal hinter "Work" */
	.work-toggle .symbol {
		position: static;
		margin-left: 0;
	}

	.page-header { padding: 2rem 0 1rem; }

	/* Startseite: Logo + Pfeil exakt mittig im ganzen Fenster (Menü ist im Intro unsichtbar) */
	.kb-intro-hero {
		margin-left: calc(-1 * var(--kb-nav-width));
		width: 100vw;
	}

	/* Back links an der Textkante, vertikal mittig zum Logo */
	.kb-back {
		top: 50%;
		right: auto;
		left: max(2rem, calc(50% - 400px + 2rem));
		transform: translateY(-50%);
	}

	.work-content,
	.project-detail,
	.about-content {
		padding-top: 4rem;
	}
	.about-content { padding-top: 5rem; }

	.home-section { scroll-margin-top: 0; }
	.section-title-glow { padding-top: 3rem; }
}

/* =========================================================================
   Ab 900px: 3 Kacheln nebeneinander
   ====================================================================== */
@media (min-width: 900px) {
	.video-grid,
	.photo-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.video-title { font-size: 1rem; }
}

/* Admin-Leiste (nur eingeloggt sichtbar) nicht über Burger/Navigation legen */
.admin-bar .burger { top: calc(46px + 0.75rem); }
@media (min-width: 783px) {
	.admin-bar .burger { top: calc(32px + 0.75rem); }
}
@media (min-width: 801px) {
	.admin-bar .side-nav { top: 32px; }
}

/* ===== v1.8.9: Kamera-Vorschau im About-Text (Hovercard wie bei Wikipedia) ===== */
.kb-peek {
	cursor: zoom-in;
	text-decoration: underline dotted rgba(0, 0, 0, 0.35);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	outline: none;
}
.kb-peek:focus-visible { text-decoration-color: var(--kb-text); }
.kb-peek-card {
	position: absolute;
	z-index: 200;
	width: 260px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);
	opacity: 0;
	visibility: hidden;
	filter: blur(6px);
	transform: translateY(6px);
	transition: opacity 0.35s ease, filter 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s;
	pointer-events: none;
}
.kb-peek-card.is-above { transform: translateY(-6px); }
.kb-peek-card.is-open {
	opacity: 1;
	visibility: visible;
	filter: none;
	transform: none;
	pointer-events: auto;
	transition-delay: 0s;
}
.kb-peek-card img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: #f2f2f2;
}
.kb-peek-card__meta {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.6rem 0.8rem 0.65rem;
}
.kb-peek-card__name {
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kb-text);
}
.kb-peek-card__credit {
	font-size: 0.6rem;
	line-height: 1.4;
	color: #999 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	font-weight: 300 !important;
}
.kb-peek-card__credit:hover { text-decoration: underline !important; }
.kb-peek-card__notch {
	position: absolute;
	top: -6px;
	width: 11px;
	height: 11px;
	margin-left: -5.5px;
	background: #fff;
	border-left: 1px solid rgba(0, 0, 0, 0.1);
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	transform: rotate(45deg);
}
.kb-peek-card.is-above .kb-peek-card__notch {
	top: auto;
	bottom: -6px;
	transform: rotate(225deg);
}
@media (prefers-reduced-motion: reduce) {
	.kb-peek-card { transition: none; filter: none; transform: none; }
}

/* ===== v1.9.1: Intro bei „Bewegung reduzieren“ – nur weiches Ein-/Ausblenden, keine Bewegung ===== */
.kb-js .video-tile.kb-float.kb-calm {
	transition: opacity 0.6s ease, filter 0.6s ease;
}
.kb-js .video-tile.kb-float.kb-calm.kb-float-shown { opacity: 1; }