:root {
--bg: #f4f5f0;
--surface: #ffffff;
--ink: #14151a;
--muted: #6b6e76;
--line: #dfe1d9;
--accent: #3454ff;
--accent-soft: #e7ebff;
--gold: #e8a33d;
--radius: 14px;
--maxw: 1120px;
}

/* =========================================
GRUNDEINSTELLUNGEN
========================================= */

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.display {
font-family: 'Space Grotesk', sans-serif;
letter-spacing: -0.02em;
margin: 0;
}

.mono {
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.02em;
}

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

.wrap {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 32px;
}

/* =========================================
NAVIGATION
========================================= */

header.site {
position: sticky;
top: 0;
z-index: 50;

background: rgba(244, 245, 240, 0.85);

backdrop-filter: blur(10px);

border-bottom: 1px solid var(--line);
}

nav {
display: flex;
align-items: center;
justify-content: space-between;

max-width: var(--maxw);

margin: 0 auto;

padding: 20px 32px;
}

.brand {
font-size: 18px;
font-weight: 600;

display: flex;
align-items: center;
gap: 8px;
}

.brand .dot {
width: 8px;
height: 8px;

border-radius: 50%;

background: var(--accent);
}

.nav-links {
display: flex;
gap: 32px;
align-items: center;
}

.nav-links a {
font-size: 14px;
font-weight: 500;

color: var(--muted);

position: relative;

padding-bottom: 4px;
}

.nav-links a:hover {
color: var(--ink);
}

.nav-links a.active {
color: var(--ink);
}

.nav-links a.active::after {
content: '';

position: absolute;

left: 0;
right: 0;
bottom: -2px;

height: 2px;

background: var(--accent);
}

/* =========================================
STATUS
========================================= */

.status {
display: flex;
align-items: center;
gap: 8px;

font-size: 13px;

color: var(--muted);

border: 1px solid var(--line);

padding: 6px 12px;

border-radius: 100px;
}

.status .pulse {
width: 7px;
height: 7px;

border-radius: 50%;

background: #2fbf71;

position: relative;
}

.status .pulse::after {
content: '';

position: absolute;

inset: -4px;

border-radius: 50%;

border: 1px solid #2fbf71;

animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
0% {
transform: scale(0.6);
opacity: 1;
}

100% {
transform: scale(1.8);
opacity: 0;
}
}

/* =========================================
HERO 
========================================= */

.hero {
padding: 96px 0 64px;

display: grid;

grid-template-columns: 1.3fr 1fr;

gap: 48px;

align-items: center;
}

.eyebrow {
font-size: 13px;

color: var(--accent);

text-transform: uppercase;

font-weight: 500;

margin-bottom: 18px;

display: block;
}

.hero h1 {
font-size: clamp(40px, 6vw, 72px);

line-height: 1.02;

font-weight: 600;
}

.hero h1 span {
color: var(--accent);
}

.hero p.pitch {
font-size: 18px;

color: var(--muted);

max-width: 44ch;

margin-top: 22px;

line-height: 1.6;
}

.hero-cta {
display: flex;

gap: 14px;

margin-top: 32px;
}

.hero-graphic img {
  display: block;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  object-fit: cover; 
  border-radius: 16px; 
}

.btn {
padding: 13px 24px;

border-radius: 100px;

font-size: 14px;

font-weight: 600;

display: inline-flex;

align-items: center;

gap: 8px;

transition:
transform 0.15s ease,
box-shadow 0.15s ease;
}

.btn-primary {
background: var(--ink);
color: var(--surface);
}

.btn-primary:hover {
transform: translateY(-2px);

box-shadow:
0 8px 20px
rgba(20, 21, 26, 0.18);
}

.btn-ghost {
border: 1px solid var(--line);
}

.btn-ghost:hover {
border-color: var(--ink);

transform: translateY(-2px);
}

.hero-graphic {
aspect-ratio: 1 / 1;

background: var(--surface);

border: 1px solid var(--line);

border-radius: 20px;

position: relative;

overflow: hidden;
}

.hero-graphic svg {
width: 100%;
height: 100%;
}

/* =========================================
MARQUEE
========================================= */

.marquee-section {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);

padding: 20px 0;

overflow: hidden;

background: var(--surface);
}

.marquee-track {
display: flex;

gap: 48px;

white-space: nowrap;

width: max-content;

animation: scroll 26s linear infinite;
}

.marquee-track span {
font-family: 'JetBrains Mono', monospace;

font-size: 14px;

color: var(--muted);

display: flex;

align-items: center;

gap: 48px;
}

.marquee-track span::after {
content: '/';

color: var(--line);
}

@keyframes scroll {
from {
transform: translateX(0);
}

to {
transform: translateX(-50%);
}
}

/* =========================================
ÜBER MICH
========================================= */

.about {
padding: 88px 0;

display: grid;

grid-template-columns: 0.9fr 1.4fr;

gap: 56px;
}

.avatar-block {
width: 100%;

aspect-ratio: 4 / 5;

border-radius: var(--radius);

background:
linear-gradient(
155deg,
var(--accent) 0%,
#6c86ff 60%,
var(--gold) 130%
);

display: flex;

align-items: flex-end;

padding: 24px;
}

.avatar-block .initials {
font-family: 'Space Grotesk', sans-serif;

font-size: 20px;

font-weight: 600;

color: #ffffff;

background: rgba(0, 0, 0, 0.18);

padding: 8px 14px;

border-radius: 100px;
}

.section-label {
font-size: 13px;

color: var(--muted);

text-transform: uppercase;

letter-spacing: 0.06em;

margin-bottom: 16px;

font-weight: 500;
}

.about h2 {
font-size: 28px;

margin-bottom: 18px;

font-weight: 600;
}

.about p {
color: var(--muted);

line-height: 1.75;

font-size: 16px;

margin: 0 0 16px;
}

.skills {
display: flex;

flex-wrap: wrap;

gap: 10px;

margin-top: 24px;
}

.skill-tag {
font-family: 'JetBrains Mono', monospace;

font-size: 12.5px;

padding: 7px 12px;

border: 1px solid var(--line);

border-radius: 8px;

background: var(--surface);
}

/* =========================================
ERFAHRUNG / TIMELINE
========================================= */

.timeline-section {
padding: 0 0 96px;
}

.timeline-section h2 {
font-size: 28px;

margin-bottom: 40px;

font-weight: 600;
}

.tl-item {
display: grid;

grid-template-columns: 120px 1fr auto;

gap: 24px;

padding: 26px 0;

border-top: 1px solid var(--line);

align-items: start;
}

.tl-item:last-child {
border-bottom: 1px solid var(--line);
}

.tl-year {
font-family: 'JetBrains Mono', monospace;

color: var(--accent);

font-size: 14px;

padding-top: 2px;
}

.tl-role {
font-weight: 600;

font-size: 17px;
}

.tl-org {
color: var(--muted);

font-size: 14px;

margin-top: 4px;
}

.tl-desc {
color: var(--muted);

font-size: 14px;

max-width: 60ch;

margin-top: 8px;

line-height: 1.6;
}

.tl-tag {
font-family: 'JetBrains Mono', monospace;

font-size: 11px;

color: var(--muted);

align-self: start;
}

/* =========================================
PROJEKTE – SEITENKOPF
========================================= */

.page-head {
padding: 72px 0 40px;
}

.page-head h1 {
font-size: clamp(34px, 5vw, 52px);

font-weight: 600;
}

.page-head p {
color: var(--muted);

max-width: 56ch;

margin-top: 16px;

font-size: 16px;

line-height: 1.65;
}

/* =========================================
PROJECT DETAIL
========================================= */

.project-detail {
padding-bottom: 100px;
}

.project-header {
display: flex;

justify-content: space-between;

align-items: flex-start;

gap: 24px;

padding-bottom: 32px;

border-bottom: 1px solid var(--line);
}

.project-header h2 {
font-size: clamp(30px, 4vw, 46px);

font-weight: 600;

margin-top: 8px;
}

.project-year {
font-size: 14px;

color: var(--accent);

white-space: nowrap;

padding-top: 8px;
}

/* =========================================
PROJEKT BESCHREIBUNG
========================================= */

.project-intro {
max-width: 760px;

padding: 48px 0;
}

.project-intro p {
color: var(--muted);

font-size: 17px;

line-height: 1.75;

margin: 0 0 20px;
}

/* =========================================
TECHNOLOGIEN
========================================= */

.project-technologies {
padding: 32px 0 56px;

border-top: 1px solid var(--line);
}

.project-technologies h3 {
font-size: 20px;

margin-bottom: 20px;
}

/* =========================================
MEINE AUFGABEN
========================================= */

.project-features {
padding: 56px 0;

border-top: 1px solid var(--line);
}

.project-features h3 {
font-size: 26px;

margin-bottom: 32px;
}

.feature-grid {
display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 18px;
}

.feature {
background: var(--surface);

border: 1px solid var(--line);

border-radius: var(--radius);

padding: 28px;

transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}

.feature:hover {
transform: translateY(-3px);

box-shadow:
0 12px 28px
rgba(20, 21, 26, 0.08);
}

.feature-number {
font-family: 'JetBrains Mono', monospace;

font-size: 12px;

color: var(--accent);

display: block;

margin-bottom: 18px;
}

.feature h4 {
font-family: 'Space Grotesk', sans-serif;

font-size: 18px;

margin: 0 0 12px;
}

.feature p {
color: var(--muted);

font-size: 14px;

line-height: 1.65;

margin: 0;
}

/* =========================================
SCREENSHOTS
========================================= */

.project-screenshots h3 {
font-size: 26px;

margin-bottom: 32px;
}

.screenshot-card {
background: var(--surface);

border: 1px solid var(--line);

border-radius: var(--radius);

overflow: hidden;
}

.screenshot-description {
padding: 24px 28px 28px;
}

.screenshot-description h4 {
font-size: 20px;

margin: 0 0 8px;
}

.screenshot-description p {
color: var(--muted);

font-size: 15px;

line-height: 1.6;

margin: 0;
}

/* =========================================
PROJEKTZIEL
========================================= */

.project-summary {
padding: 56px 0;

border-top: 1px solid var(--line);

max-width: 760px;
}

.project-summary h3 {
font-size: 26px;

margin-bottom: 16px;
}

.project-summary p {
color: var(--muted);

line-height: 1.75;

font-size: 16px;
}

/* =========================================
FOOTER
========================================= */

footer {
border-top: 1px solid var(--line);

padding: 56px 0;
}

.footer-grid {
display: flex;

justify-content: space-between;

align-items: flex-end;

flex-wrap: wrap;

gap: 24px;
}

footer h3 {
font-size: 26px;

font-weight: 600;
}

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

margin-top: 8px;

font-size: 15px;
}

.footer-links {
display: flex;

gap: 24px;
}

.footer-links a {
font-size: 14px;

color: var(--muted);

border-bottom: 1px solid transparent;

padding-bottom: 2px;
}

.footer-links a:hover {
color: var(--ink);

border-color: var(--ink);
}

.copyright {
margin-top: 40px;

font-size: 12.5px;

color: var(--muted);

font-family: 'JetBrains Mono', monospace;
}

/* =========================================
RESPONSIVE
========================================= */

@media (max-width: 860px) {

.hero {
grid-template-columns: 1fr;

padding-top: 56px;

}

.hero-graphic {
order: -1;

aspect-ratio: 16 / 9;

}

.about {
grid-template-columns: 1fr;
}

.avatar-block {
aspect-ratio: 16 / 9;
}

.tl-item {
grid-template-columns: 1fr;

gap: 6px;

}

.feature-grid {
grid-template-columns: 1fr;
}

.project-header {
flex-direction: column;
}

nav .nav-links {
gap: 18px;
}

.status {
display: none;
}

}

@media (max-width: 600px) {

.wrap {
padding: 0 20px;
}

nav {
padding: 16px 20px;
}

.brand {
font-size: 15px;
}

.nav-links {
gap: 14px;
}

.nav-links a {
font-size: 13px;
}

.screenshot-grid {
gap: 24px;
}

.screenshot-description {
padding: 20px;
}

}

/* =========================================
REDUZIERTE BEWEGUNG
========================================= */

@media (prefers-reduced-motion: reduce) {

.marquee-track {
animation: none;
}

.status .pulse::after {
animation: none;
}

.card,
.card-link svg,
.feature {
transition: none;
}

}

/* =========================================
FOKUS
========================================= */

:focus-visible {
outline: 2px solid var(--accent);

outline-offset: 3px;
}

/* =========================================
   SCREENSHOTS – VOLLE BREITE
========================================= */

.project-screenshots {
  width: 100%;
  padding: 80px 0;

  border-top: 1px solid var(--line);
}

.project-screenshots h3 {
  font-size: 28px;
  margin-bottom: 40px;
}

.screenshot-grid {
  display: flex !important;

  flex-direction: column !important;

  width: 100% !important;

  max-width: none !important;

  gap: 60px;
}

.screenshot-card {
  display: block !important;

  width: 100% !important;

  max-width: none !important;

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  overflow: hidden;

  box-shadow:
    0 20px 50px
    rgba(20, 21, 26, 0.08);
}

.screenshot-card img {
  display: block !important;

  width: 100% !important;

  max-width: none !important;

  height: auto !important;

  object-fit: contain !important;
}

.screenshot-description {
  width: 100%;

  padding: 28px 32px 32px;
}

.screenshot-description h4 {
  font-size: 22px;

  margin: 0 0 10px;
}

.screenshot-description p {
  color: var(--muted);

  font-size: 16px;

  line-height: 1.65;

  margin: 0;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 860px) {

  .project-screenshots {
    padding: 56px 0;
  }

  .screenshot-grid {
    gap: 40px;
  }

}


@media (max-width: 600px) {

  .screenshot-description {
    padding: 20px;
  }

}