@charset "UTF-8";

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

html, body {
	margin: 0;
	padding: 0;
	font-size: 100%;
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
}

/* ── Schriften ── */
@font-face {
	font-family: font-heading;
	src: url("../fonts/JosefinSans-Regular.ttf");
}
@font-face {
	font-family: font-main;
	src: url("../fonts/CourierPrime-Regular.ttf");
}

/* ── Variablen ── */
:root {
	--color-bg:      #ffffff;
	--color-surface: #F5F5F5;
	--color-text:    #0A0A0A;
	--color-muted:   #666666;
	--color-accent:  #6B8C3E;
	--color-border:  #E0E0E0;

	--font-heading:  "font-heading", sans-serif;
	--font-main:     "font-main", monospace;

	--nav-height:    6rem;
	--panel-width:   min(680px, 95vw);
	--radius:        4px;
	--transition:    0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Basis ── */
body {
	background:  var(--color-bg);
	color:       var(--color-text);
	font-family: var(--font-main);
	font-size:   1rem;
	line-height: 1.6;
}

img {
	display:    block;
	max-width:  100%;
	max-height: 100%;
	object-fit: cover;
}

a {
	text-decoration: none;
	color: var(--color-accent);
}

.accent { color: var(--color-accent); }

/* ── Typografie ── */
h1, h2, h3 {
	font-family: var(--font-heading);
	font-weight: normal;
	line-height: normal;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.4; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1rem; }

p { color: var(--color-muted); }

/* ── Layout ── */
main {
	padding: calc(var(--nav-height) + 2rem) clamp(1.5rem, 10vw, 20vw) 2rem clamp(1.5rem, 8vw, 15vw);
	min-height: 90vh;
}

section {
	padding-top:       4rem;
	padding-bottom:    6rem;
	border-bottom:     1px solid var(--color-border);
	scroll-margin-top: var(--nav-height);
}
section:last-of-type {
	border-bottom:  none;
	padding-bottom: 4rem;
}

footer {
	min-height:      8vh;
	padding:         0 1.9rem;
	border-top:      1px solid var(--color-border);
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	font-size:       0.8rem;
	color:           var(--color-muted);
}
footer p { color: var(--color-muted); margin: 0; }

/* ── Navigation ── */
nav {
	position:        fixed;
	top:             0;
	width:           100%;
	height:          var(--nav-height);
	z-index:         997;
	background:      var(--color-bg);
	border-bottom:   1px solid var(--color-border);
	padding:         0 1.9rem;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
}

.nav-logo { height: 3.8rem; }

.nav-links {
	display:    flex;
	list-style: none;
	gap:        2rem;
	margin:     0;
	padding:    0;
}
.nav-links a {
	font-family:    var(--font-heading);
	font-size:      0.8rem;
	text-transform: uppercase;
	color:          var(--color-muted);
	transition:     color 0.2s;
}
.nav-links a:hover { color: var(--color-accent); }

/* ── Filter ── */
.filter-bar {
	display:       flex;
	gap:           0.5rem;
	flex-wrap:     wrap;
	margin-bottom: 2.5rem;
}
.filter-btn {
	background:    none;
	border:        1px solid var(--color-border);
	border-radius: 999px;
	padding:       0.35rem 1rem;
	font-family:   var(--font-main);
	font-size:     0.8rem;
	cursor:        pointer;
	color:         var(--color-muted);
	transition:    all 0.2s;
}
.filter-btn:hover,
.filter-btn.active {
	background:   var(--color-accent);
	border-color: var(--color-accent);
	color:        #fff;
}

/* ── Projekt-Grid ── */
.grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap:                   1.5rem;
}

/* ── Karte ── */
.card {
	background:    var(--color-surface);
	border:        1px solid var(--color-border);
	border-radius: var(--radius);
	overflow:      hidden;
	cursor:        pointer;
	transition:    transform 0.25s, box-shadow 0.25s;
}
.card:hover {
	transform:  translateY(-4px);
	box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

/* ── Gemeinsame Platzhalter-Styles ── */
.card-thumb,
.panel-hero,
.panel-img-slot,
.about-photo {
	position:   relative;
	overflow:   hidden;
	background: var(--color-border);
}
.card-thumb::after,
.panel-hero::after,
.panel-img-slot::after,
.about-photo::after {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       0.75rem;
	color:           var(--color-muted);
	text-transform:  uppercase;
}
.card-thumb::after    { content: attr(data-label); }

.card-thumb {
	aspect-ratio:  4/3;
	border-radius: var(--radius) var(--radius) 0 0;
}
.card-thumb img { transition: transform 0.4s; }
.card:hover .card-thumb img { transform: scale(1.04); }

.card-body  { padding: 1.1rem 1.25rem 1.3rem; }
.card-tag   { font-size: 0.7rem; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.35rem; }
.card-title { margin-bottom: 0.4rem; color: var(--color-text); }
.card-desc  {
	font-size:          0.85rem;
	color:              var(--color-muted);
	display:            -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

/* ── Projekt X (kein Panel) ── */
.projektx {
	background:    var(--color-surface);
	border:        1px solid var(--color-border);
	border-radius: var(--radius);
	overflow:      hidden;
	transition:    transform 0.25s, box-shadow 0.25s;
}
.projektx:hover {
	transform:  translateY(-4px);
	box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

.projektx:hover .card-thumb img { transform: scale(1.04); }

.projektxlink {
	text-decoration: none;
	color:           inherit;
}

/* ── Overlay ── */
.overlay {
	position:        fixed;
	inset:           0;
	z-index:         998;
	background:      rgba(26,26,26,0.45);
	backdrop-filter: blur(2px);
	opacity:         0;
	pointer-events:  none;
	transition:      opacity var(--transition);
}
.overlay.open { opacity: 1; pointer-events: all; }

/* ── Panel ── */
.panel {
	position:    fixed;
	top: 0; right: 0; bottom: 0;
	width:       var(--panel-width);
	z-index:     999;
	background:  var(--color-surface);
	border-left: 1px solid var(--color-border);
	overflow-y:  auto;
	transform:   translateX(100%);
	transition:  transform var(--transition);
}
.panel.open { transform: translateX(0); }

.panel-close {
	position:        sticky;
	top:             0;
	min-height:      var(--nav-height);
	z-index:         1;
	background:      var(--color-surface);
	border-bottom:   1px solid var(--color-border);
	padding:         1rem 2.5rem;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
}
.panel-close-tag {
	font-family:    var(--font-heading);
	font-size:      0.75rem;
	text-transform: uppercase;
	color:          var(--color-accent);
}
.close-btn {
	background:    none;
	border:        1px solid var(--color-border);
	border-radius: 999px;
	padding:       0.3rem 0.9rem;
	font-family:   var(--font-main);
	font-size:     0.8rem;
	cursor:        pointer;
	color:         var(--color-text);
	transition:    background 0.2s;
}
.close-btn:hover { background: var(--color-border); }

.panel-hero { aspect-ratio: 4/3; }

.panel-hero img,
.panel-img-slot img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

.panel-content { padding: 2rem 2.5rem 3rem; }

.panel-title       { font-size: 1.8rem; margin-bottom: 0.5rem; color: var(--color-text); }
.panel-meta        { display: flex; gap: 1.5rem; font-size: 0.8rem; color: var(--color-muted); margin-bottom: 1.5rem; flex-wrap: wrap; }
.panel-description { font-size: 1rem; color: var(--color-text); line-height: 1.75; margin-bottom: 2rem; max-width: none; }
.panel-doc-label   { font-size: 0.85rem; font-weight: 700; color: var(--color-accent); margin-bottom: 1.2rem; }

/* ── Prozess-Schritte ── */
.doc-steps { display: flex; flex-direction: column; gap: 1.5rem; }
.doc-step  { display: flex; gap: 1.25rem; }
.doc-step-num {

	flex-shrink:     0;
	width:           2rem;
	height:          2rem;
	border:          1px solid var(--color-accent);
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       0.75rem;
	font-weight:     500;
	color:           var(--color-accent);
	margin-top:      0.15rem;
}
.doc-step-body h4 { font-size: 0.95rem; font-weight: 500; margin-bottom: 0.25rem; color: var(--color-text); }
.doc-step-body p  { font-size: 0.875rem; color: var(--color-muted); line-height: 1.6; max-width: none; }

/* ── Detail-Bilder im Panel ── */
.panel-images {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   0.75rem;
	margin-top:            2rem;
}
.panel-img-slot { aspect-ratio: 4/3; border-radius: var(--radius); }

/* ── Tools ── */
.tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.tool-tag {
	background:    var(--color-bg);
	border:        1px solid var(--color-border);
	border-radius: var(--radius);
	padding:       0.25rem 0.75rem;
	font-size:     0.78rem;
	color:         var(--color-muted);
}

/* ── Über mich ── */
.about-grid {
	display:               grid;
	grid-template-columns: 280px 1fr;
	grid-template-rows:    auto auto;
	gap:                   2rem 4rem;
	align-items:           start;
}

.about-photo {
	aspect-ratio:  1/1;
	border-radius: var(--radius);
	grid-column:   1;
	grid-row:      1;
}

.about-text {
	grid-column: 2;
	grid-row:    1 / span 2;
}
.about-text h2 { margin-top: 0; }
.about-text p  { line-height: 1.8; margin-bottom: 1rem; max-width: none; }

.skills-list {
	display:     flex;
	flex-wrap:   wrap;
	gap:         0.5rem;
	grid-column: 1;
	grid-row:    2;
	align-content: flex-start;
}

.skill-pill {
	background:    var(--color-bg);
	border:        1px solid var(--color-border);
	border-radius: 999px;
	padding:       0.3rem 0.9rem;
	font-size:     0.8rem;
	color:         var(--color-text);
}

/* ── Kontakt ── */
.kontakt-link {
	display:       inline-flex;
	align-items:   center;
	gap:           0.5rem;
	background:    var(--color-accent);
	color:         var(--color-bg) !important;
	padding:       0.75rem 1.75rem;
	margin-top:    2rem;
	border-radius: 999px;
	font-size:     0.9rem;
	transition:    opacity 0.2s;
}
.kontakt-link:hover { opacity: 0.85; }

/* ══════════════════════════════════════
   MOBILE
══════════════════════════════════════ */

/* Tablets & kleine Desktops */
@media (max-width: 900px) {
	main {
		padding: calc(var(--nav-height) + 2rem) 2rem 2rem 2rem;
	}

	.grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}
}

/* Smartphones */
@media (max-width: 700px) {

	:root { --nav-height: 4.5rem; }

	/* Nav – Links kleiner */
	.nav-links { gap: 1rem; }
	.nav-links a { font-size: 0.75rem; }
	.nav-logo { height: 2.8rem; }

	/* Hero */
	h1 { font-size: 1.8rem; }

	/* Grid – eine Spalte */
	.grid {
		grid-template-columns: 1fr;
	}

	/* Über mich – untereinander statt nebeneinander */
	.about-grid {
		grid-template-columns: 1fr;
		grid-template-rows:    auto auto auto;
		gap:                   1.5rem;
	}
	.about-photo {
		grid-column: 1;
		grid-row:    1;
		max-width:   200px;
	}
	.about-text {
		grid-column: 1;
		grid-row:    2;
	}
	.skills-list {
		grid-column: 1;
		grid-row:    3;
	}

	/* Panel – volle Breite auf Mobile */
	:root { --panel-width: 100vw; }
	.panel-content { padding: 1.5rem; }
	.panel-close   { padding: 1rem 1.5rem; }

	/* Panel-Bilder – eine Spalte auf sehr kleinen Screens */
	.panel-images { grid-template-columns: 1fr; }

	/* Footer */
	footer {
		flex-direction: column;
		align-items:    flex-start;
		gap:            0.5rem;
		padding:        1rem 1.9rem;
	}
}