/* ============================================================
   PORTFOLIO — style.css
   ============================================================ */


/* ------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES
   ------------------------------------------------------------ */

:root {
	/* Colors */
	--color-bg:             #F5F2ED;
	--color-text:           #140A00;
	--color-orange:         #FF8000;
	--color-orange-light:   #FFD079;
	--color-blue:           #002D52;
	--color-charcoal:       #565656;

	/* Typography */
	--font-main:            'DM Sans', sans-serif;

	/* Font weights */
	--weight-extralight:    200;
	--weight-light:         300;
	--weight-regular:       400;
	--weight-medium:        500;
	--weight-semibold:      600;
	--weight-bold:          700;
	--weight-black:         900;

	/* Header */
	--header-height:        108px;

	/* Grid */
	--grid-gutter:          18px;
	--grid-template:        1fr 305px 305px 305px 305px 1fr;

	/* Transitions */
	--transition-fast:      150ms ease;
	--transition-base:      250ms ease;
}


/* ------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------ */

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

html {
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-main);
	font-size: 18px;
	font-weight: var(--weight-regular);
	color: var(--color-text);
	background-color: var(--color-bg);
	min-height: 100vh;
	min-width: 1310px;
}

img {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	list-style: none;
}

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
}


/* ------------------------------------------------------------
   3. GRID LAYOUT
   Primary: 6 cols, gutter 18px, margin 0, 1920px base
   Secondary (content): 7 cols inside inner 4 primary cols = 1274px
   ------------------------------------------------------------ */

/* Outer wrapper: fixed primary grid — inner 4 cols fixed at 305px, outer cols flexible */
.grid-primary {
	display: grid;
	grid-template-columns: var(--grid-template);
	gap: var(--grid-gutter);
	width: 100%;
}

/* Secondary grid: spans cols 2–5 of primary, 7 cols inside */
.grid-secondary {
	grid-column: 2 / 6;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--grid-gutter);
}

/* Full bleed across primary */
.col-full { grid-column: 1 / -1; }

/* Secondary grid span helpers */
.scol-1-4 { grid-column: 1 / 5; }   /* image: s1–s4 */
.scol-5-7 { grid-column: 5 / 8; }   /* text:  s5–s7 */
.scol-1-3 { grid-column: 1 / 4; }   /* text:  s1–s3 (mirrored) */
.scol-4-7 { grid-column: 4 / 8; }   /* image: s4–s7 (mirrored) */
.scol-full { grid-column: 1 / -1; }  /* full secondary width */


/* ------------------------------------------------------------
   4. HEADER
   ------------------------------------------------------------ */

.header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	height: var(--header-height);
	background-color: var(--color-charcoal);
}

.header__inner {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: var(--grid-template);
	gap: var(--grid-gutter);
	align-items: start;
}

/* Content zone: spans secondary grid (primary cols 2–5), position: relative
   so brand + filters can be placed with pixel precision. */
.header__content {
	grid-column: 2 / 6;
	position: relative;
	height: 100%;
}

/* Brand: top-left of secondary grid, 23px from header top */
.header__brand {
	position: absolute;
	top: 23px;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.header__name {
	font-size: 32px;
	line-height: 32px;
	font-weight: var(--weight-bold);
	color: var(--color-orange-light);
}

.header__tagline {
	font-size: 20px;
	line-height: 20px;
	font-weight: var(--weight-regular);
	color: var(--color-orange-light);
}

/* Filter nav: 469px from secondary grid left edge, 32px from header top.
   Hidden by default; fades in via JS when stage scrolls out of view. */
.header__filters {
	position: absolute;
	top: 32px;
	left: 469px;
	display: flex;
	align-items: flex-start;
	gap: 61px;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-base);
}

.header__filters.is-visible {
	opacity: 1;
	pointer-events: all;
}

/* Mail icon: right-aligned to secondary grid (right:0 of header__content), 36px from top */
.header__mail {
	position: absolute;
	top: 36px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-orange);
	transition: opacity var(--transition-fast);
}

/* Force mail icon SVG to exact size */
.header__mail img {
	width: 49px;
	height: 36px;
	display: block;
}

.header__mail:hover {
	opacity: 0.75;
}

/* Lang toggle: primary col 6 */
.header__lang-wrap {
	grid-column: 6 / 7;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
}

.header__lang {
	font-size: 24px;
	line-height: 24px;
	font-weight: var(--weight-regular);
	color: var(--color-orange-light);
	opacity: 0.6;
	cursor: pointer;
	transition: opacity var(--transition-fast);
}

.header__lang:hover {
	opacity: 1;
}

/* Filter buttons in header: 20px/22px, auto-width, two-line, center-aligned */
.header__filters .filter-btn {
	font-size: 20px;
	line-height: 22px;
	font-weight: var(--weight-regular);
	text-transform: uppercase;
	letter-spacing: 0;
	color: var(--color-orange-light);
	text-align: center;
	white-space: nowrap;
	position: relative;
	transition: color var(--transition-fast);
}

.header__filters .filter-btn:hover {
	color: var(--color-orange);
}

.header__filters .filter-btn.is-active {
	color: var(--color-text);
}

/* Marker SVG: absolutely positioned behind button text, hidden by default.
   Rendered as background-image on a span so it scales reliably at any size. */
.filter-btn .btn-marker {
	position: absolute;
	display: block;
	pointer-events: none;
	opacity: 0;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transition: opacity var(--transition-fast);
	z-index: -1;
}

.filter-btn:hover .btn-marker {
	opacity: 0;
}

.filter-btn.is-active .btn-marker {
	opacity: 1;
}


/* ------------------------------------------------------------
   5. STAGE
   Stage section frame: 1274px wide (secondary grid) × 305px tall (portrait height).
   96px below header, 116px above content section.
   All children absolutely positioned within the frame.
   ------------------------------------------------------------ */

.stage {
	width: 100%;
	display: grid;
	grid-template-columns: var(--grid-template);
	gap: var(--grid-gutter);
	margin-top: 96px;
	margin-bottom: 116px;
}

/* Stage frame: spans secondary grid (primary cols 2–5), fixed 305px tall.
   position: relative so all stage content is pixel-positioned inside. */
.stage__frame {
	grid-column: 2 / 6;
	position: relative;
	height: 305px;
}

/* Portrait: 305×305px, top-left corner of frame */
.stage__portrait {
	position: absolute;
	top: 0;
	left: 0;
}

.stage__portrait-circle {
	width: 305px;
	height: 305px;
	border-radius: 50%;
	background-color: #D9D9D9;
	display: flex;
	align-items: center;
	justify-content: center;
}

.stage__portrait-glyph {
	font-size: 164px;
	line-height: 164px;
	color: var(--color-text);
	user-select: none;
}

/* About column: 235px wide, left edge 84px right of portrait's right edge (305+84=389px).
   Full frame height (305px). Title at top, CTA pushed to bottom via margin-top:auto. */
.stage__intro {
	position: absolute;
	top: 0;
	left: 389px;
	width: 235px;
	height: 305px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.stage__hi {
	font-size: 100px;
	line-height: 100px;
	font-weight: var(--weight-semibold);
	color: var(--color-text);
}

.stage__body {
	font-size: 18px;
	line-height: 22px;
	font-weight: var(--weight-regular);
	color: var(--color-text);
	width: 235px;
	position: relative;  /* anchor for absolutely positioned child SVGs */
}

/* Static SVG markers inside stage__body — all absolutely positioned, behind text */
.stage__body-marker {
	position: absolute;
	display: block;
	pointer-events: none;
	z-index: -1;
}

/* marker-text1: top-left of body frame, offset x=0 y=-2px */
.stage__body-marker--text1 {
	width: 206px;
	height: 49px;
	top: -2px;
	left: 0;
}

/* marker-text2: bottom-right of body frame, offset x=-6px y=4px
   Anchored via bottom/right so it tracks the content height. */
.stage__body-marker--text2 {
	width: 242px;
	height: 48px;
	bottom: -4px;   /* y offset=4px below bottom edge → negative bottom */
	right: -6px;    /* x offset=-6px right of right edge → negative right */
}

/* lines-circle: anchored to bottom-left of stage__frame.
   Offset x=368px, y=-35px → left:368px, bottom:35px.
   Positioned on stage__frame (position:relative), behind all content. */
.stage__lines-circle {
	position: absolute;
	width: 355px;
	height: 124px;
	bottom: 35px;
	left: 368px;
	pointer-events: none;
	display: block;
	z-index: -1;
}

/* CTA pushed to bottom of the 305px column */
.stage__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 20px;
	line-height: 20px;
	font-weight: var(--weight-semibold);
	color: var(--color-blue);
	margin-top: auto;
	transition: gap var(--transition-fast);
}

.stage__cta:hover {
	gap: 12px;
}

.stage__cta svg {
	flex-shrink: 0;
}

/* Mindmap: 396×267px frame, 19px below stage frame top.
   Anchored 138px right of intro column's right edge (389+235+138=762px from frame left). */
.stage__mindmap {
	position: absolute;
	top: 19px;
	left: 762px;
	width: 396px;
	height: 267px;
}

/* Mindmap SVG (orange lines) layer — added later, fills frame */
.stage__mindmap svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* lines-mindmap: 329×225px, centered within the 396×267px mindmap frame */
.mindmap__lines {
	position: absolute;
	width: 329px;
	height: 225px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	display: block;
}

/* Mindmap filter buttons — anchored to their respective frame edges.
   Left: left-aligned + vertically centered.
   Right: right-aligned + vertically centered.
   Top: top-aligned + horizontally centered.
   Bottom: bottom-aligned + horizontally centered.
   Text inside stays center-aligned. */
.mindmap__btn {
	position: absolute;
	font-size: 20px;
	line-height: 22px;
	font-weight: var(--weight-regular);
	text-transform: uppercase;
	text-align: center;
	color: var(--color-text);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	white-space: nowrap;
	/* inner stacking context for marker */
	isolation: isolate;
	transition: color var(--transition-fast);
}

.mindmap__btn:hover {
	color: var(--color-orange);
}

.mindmap__btn.is-active {
	color: var(--color-text);
}

/* WEB DESIGN: left edge at frame left, vertically centered */
.mindmap__btn--web {
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
/* GAME DESIGN: right edge at frame right, vertically centered */
.mindmap__btn--game {
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
/* UX/UI DESIGN: top edge at frame top, horizontally centered */
.mindmap__btn--uxui {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
/* ILLUSTRATION & GRAPHICS: bottom edge at frame bottom, horizontally centered */
.mindmap__btn--illus {
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}


/* ------------------------------------------------------------
   6. SECTION TITLE
   ------------------------------------------------------------ */

.section-title-wrap {
	width: 100%;
	margin-top: 0;
	margin-bottom: 108px;
}

/* Secondary grid inner */
.section-title-wrap .grid-secondary {
	align-items: end;
}

.section-title__eyebrow {
	font-size: 18px;
	line-height: 18px;
	font-weight: var(--weight-regular);
	text-transform: uppercase;
	color: var(--color-text);
	letter-spacing: 0.02em;
	margin-bottom: 9px;
}

.section-title__main {
	font-size: 64px;
	line-height: 64px;
	font-weight: var(--weight-extralight);
	color: var(--color-text);
}

.section-title__rule {
	grid-column: 1 / -1;
	height: 2px;
	background-color: var(--color-text);
	border: none;
	margin-top: 18px;
}


/* ------------------------------------------------------------
   7. POST CARDS
   ------------------------------------------------------------ */

.posts {
	width: 100%;
}

.post {
	width: 100%;
	position: relative;
}

/* Image placeholder */
.post__image {
	width: 720px;
	height: 540px;
	background-color: #D9D9D9;
	border: 1px solid #BBBBBB;
	flex-shrink: 0;
}

/* Text block */
.post__text {
	display: flex;
	flex-direction: column;
}

/* Odd (standard) entries: image left, text right → text content right-aligned */
.post:not(.post--mirrored) .post__text {
	align-items: flex-end;
	text-align: right;
}

/* Even (mirrored) entries: text left, image right → text content left-aligned */
.post--mirrored .post__text {
	align-items: flex-start;
	text-align: left;
}

.post__eyebrow {
	font-size: 24px;
	line-height: 24px;
	font-weight: var(--weight-extralight);
	color: var(--color-text);
}

.post__title {
	font-size: 54px;
	line-height: 54px;
	font-weight: var(--weight-black);
	color: var(--color-text);
	margin-top: 10px;
}

.post__subtitle {
	font-size: 24px;
	line-height: 24px;
	font-weight: var(--weight-light);
	font-style: italic;
	color: var(--color-text);
	margin-top: 10px;
}

/* Pills: 2 columns, fixed 160px each */
.post__pills {
	display: grid;
	grid-template-columns: 160px 160px;
	gap: 12px;
	margin-top: 27px;
}

/* Odd (standard) entries: pills right-aligned to secondary grid */
.post:not(.post--mirrored) .post__pills {
	justify-content: end;
}

/* Last pill alone on a row: right-align it within the 2-col grid */
.post__pills .pill:last-child:nth-child(odd) {
	grid-column: 2 / 3;
}

.pill {
	width: 160px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid rgba(20, 10, 0, 0.5);
	background: transparent;
	color: var(--color-text);
	font-size: 16px;
	line-height: 22px;
	font-weight: var(--weight-light);
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
	white-space: nowrap;
}

.pill.is-active {
	background-color: var(--color-orange);
	border-color: var(--color-orange);
	color: var(--color-bg);
}

.post__body {
	font-size: 18px;
	line-height: 22px;
	font-weight: var(--weight-regular);
	color: var(--color-text);
	margin-top: 27px;
}

.post__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 18px;
	line-height: 22px;
	font-weight: var(--weight-bold);
	font-style: italic;
	color: var(--color-text);
	margin-top: 27px;
	transition: gap var(--transition-fast);
}

.post__cta:hover {
	gap: 10px;
}

/* Separator between posts: spans secondary grid width, 2px, 25% black.
   90px from lowest element of preceding entry to line center (2px line → 89px margin + 1px half). */
.post__separator {
	grid-column: 2 / 6;
	height: 2px;
	background-color: var(--color-text);
	opacity: 0.25;
	border: none;
	margin-top: 89px;
	margin-bottom: 89px;
}

/* Secondary images (overlay mode) */
.post__secondaries {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
}

.post__secondaries--overlay img {
	position: absolute;
	bottom: 0;
}


/* ------------------------------------------------------------
   8. FOOTER
   ------------------------------------------------------------ */

.footer {
	margin-top: 108px;
	padding: 36px 0;
	border-top: 1px solid rgba(20, 10, 0, 0.15);
	display: grid;
	grid-template-columns: var(--grid-template);
	gap: var(--grid-gutter);
	align-items: center;
}

.footer__inner {
	grid-column: 2 / 6;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer__copy {
	font-size: 16px;
	line-height: 22px;
	font-weight: var(--weight-regular);
	opacity: 0.5;
}

.footer__impressum {
	font-size: 16px;
	line-height: 22px;
	font-weight: var(--weight-regular);
	opacity: 0.5;
	transition: opacity var(--transition-fast);
}

.footer__impressum:hover {
	opacity: 1;
}


/* ------------------------------------------------------------
   9. UTILITY
   ------------------------------------------------------------ */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Hidden posts (filtered out) */
.post.is-hidden {
	display: none;
}