/* Ursprüngliche Gestaltung: schwarzer Hintergrund. Nur auf ausdrücklichen Wunsch ändern. */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
--bg:#000000;
--panel:#111b23;
--ink:#edf2ef;
--muted:#9caaaF;
--lime:#d0ef9c;
--line:#2a353b}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:90px}
body{
margin:0;
background:var(--bg);
color:var(--ink);
font-family:'DM Sans',sans-serif}
a{
color:inherit;
text-decoration:none}
button{
font:inherit}
header{
height:92px;
display:flex;
align-items:center;
justify-content:space-between;
max-width:1360px;
margin:auto;
padding:0 6%;
border-bottom:1px solid var(--line)}
.brand{
font-weight:700;
display:flex;
gap:12px;
align-items:center}
.brand span{
color:var(--lime);
font-size:30px}
nav{
display:flex;
gap:32px;
font-size:13px;
color:#bdc7ca}
.navlast{
color:var(--lime)}
main{
overflow:hidden}
.wrap{
max-width:1200px;
margin:auto;
padding:0 38px}
.hero{
position:relative;
min-height:730px;
display:grid;
grid-template-columns:1.15fr 1fr;
align-items:center;
gap:25px}
.eyebrow{
text-transform:uppercase;
font-size:11px;
letter-spacing:2.6px;
color:var(--lime);
display:flex;
gap:12px;
align-items:center}
.eyebrow:before{
content:'';
height:6px;
width:6px;
border-radius:50%;
background:var(--lime)}
h1,h2,h3{
font-family:Manrope,sans-serif}
h1{
font-size:clamp(48px,6.2vw,82px);
line-height:1.07;
letter-spacing:-4px;
font-weight:500;
margin:28px 0}
h1 em{
font-style:normal;
color:var(--lime)}
.intro{
color:var(--muted);
line-height:1.9;
font-size:15px;
max-width:450px}
.button{
display:inline-flex;
align-items:center;
gap:30px;
background:var(--lime);
color:#172018;
padding:16px 22px;
border-radius:3px;
font-size:13px;
font-weight:700;
margin-top:24px}
.button span{
font-size:19px}
.heroart{
position:relative;
width:100%;
aspect-ratio:1}
.heroart svg{
width:120%;
height:120%;
position:absolute;
left:-10%;
top:-10%}
.caption{
position:absolute;
bottom:-6px;
left:30%;
font-size:10px;
letter-spacing:2px;
color:var(--muted)}
.metrics{
display:flex;
gap:36px;
margin-top:48px;
font-size:10px;
text-transform:uppercase;
letter-spacing:1.6px;
color:var(--muted)}
.metrics b{
display:block;
color:var(--ink);
font-size:20px;
font-weight:500;
letter-spacing:0;
margin-bottom:6px}
.strip{
border-block:1px solid var(--line);
padding:24px 0;
display:flex;
justify-content:space-between;
font-size:11px;
letter-spacing:2px;
color:#b5c1c4}
/* Vier unterschiedliche Themenfarben; Reihenfolge und einzeilige Darstellung bleiben. */
.strip span:nth-child(1){color:#9ac7ff}
.strip span:nth-child(2){color:var(--lime)}
.strip span:nth-child(3){color:#e0b3f5}
.strip span:nth-child(4){color:#f5c18c}
section{
padding:100px 0}
.sectiontop{
display:flex;
justify-content:space-between;
align-items:end;
gap:30px;
margin-bottom:40px}
h2{
font-size:clamp(30px,3.5vw,46px);
font-weight:500;
letter-spacing:-1.6px;
line-height:1.2;
margin:18px 0 0}
.sectiontop p{
color:var(--muted);
max-width:350px;
font-size:14px;
line-height:1.8}
.grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px}
.card{
border:1px solid var(--line);
padding:25px 23px;
background:linear-gradient(150deg,#14212a,#10181e);
min-height:270px;
transition:transform .2s,border-color .2s}
.card:hover{
transform:translateY(-5px);
border-color:#819d6a}
.number{
font-size:10px;
color:var(--muted);
letter-spacing:2px}
.icon{
height:72px;
display:flex;
align-items:center;
font-size:34px;
color:var(--lime)}
h3{
font-size:17px;
font-weight:600;
margin:14px 0}
.card p{
font-size:12px;
line-height:1.9;
color:var(--muted)}
.connection{
padding:54px;
border:1px solid var(--line);
background:radial-gradient(ellipse at 90% 50%,#23342c,transparent 65%);
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
margin-top:26px}
.connection h3{
font-size:25px;
line-height:1.4;
margin:0}
.connection p{
color:var(--muted);
font-size:14px;
line-height:1.9;
margin:0}
.projects{
padding-top:20px}
.filters{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom:26px}
.filters button{
padding:10px 17px;
border:1px solid var(--line);
border-radius:30px;
color:#b2bec3;
background:transparent;
cursor:pointer;
font-size:12px}
.filters button[aria-pressed=true]{
color:#162019;
background:var(--lime);
border-color:var(--lime)}
.project{
display:grid;
grid-template-columns:74px 1fr 1fr 35px;
gap:20px;
align-items:center;
border-top:1px solid var(--line);
padding:29px 0}
.project[hidden]{
display:none}
.project .n{
font-size:12px;
color:var(--lime)}
.project h3{
margin:0 0 8px;
font-size:19px}
.tags{
color:var(--muted);
font-size:10px;
letter-spacing:1px}
.project p{
font-size:13px;
line-height:1.8;
color:var(--muted);
margin:0}
.arrow{
color:var(--lime);
font-size:24px}
.note{
font-size:11px;
color:var(--muted);
margin-top:22px}
.about{
border-top:1px solid var(--line);
display:grid;
grid-template-columns:.7fr 1fr;
gap:100px}
.portrait{
background:#142027;
aspect-ratio:1;
border:1px solid var(--line);
display:grid;
place-items:center;
position:relative}
.portrait:before,.portrait:after{
content:'';
position:absolute;
border:1px solid #334743;
border-radius:50%;
width:70%;
height:70%}
.portrait:after{
width:45%;
height:45%;
border-style:dashed}
.monogram{
font-family:Manrope,sans-serif;
font-size:85px;
font-weight:500;
color:var(--lime)}
.portrait small{
position:absolute;
bottom:20px;
color:var(--muted);
font-size:10px;
letter-spacing:2px}
.about p{
color:var(--muted);
line-height:1.9;
font-size:15px}
.motto{
color:var(--lime);
font-size:20px;
margin-top:30px}
.footer{
padding:30px 0;
border-top:1px solid var(--line);
display:flex;
justify-content:space-between;
color:var(--muted);
font-size:11px}
.footer a{
color:var(--lime)}
a:focus-visible,button:focus-visible{
outline:2px solid var(--lime);
outline-offset:5px}
@media(max-width:800px){
header{
height:75px;
padding:0 24px}
nav{
gap:16px;
font-size:11px}
.brand{
font-size:12px}
.wrap{
padding:0 24px}
.hero{
grid-template-columns:1fr;
padding-top:60px;
gap:0}
.heroart{
max-width:440px;
margin:0 auto 40px}
.heroart svg{
width:100%;
height:100%;
left:0;
top:0}
h1{
letter-spacing:-2px}
.metrics{
margin-top:30px}
.strip{
font-size:8px;
letter-spacing:1px}
.grid{
grid-template-columns:1fr 1fr}
section{
padding:65px 0}
.sectiontop{
display:block}
.connection{
padding:28px;
grid-template-columns:1fr;
gap:22px}
.project{
grid-template-columns:30px 1fr 20px}
.project p{
grid-column:2;
grid-row:2}
.project .arrow{
grid-column:3;
grid-row:1}
.about{
grid-template-columns:1fr;
gap:36px}
.portrait{
max-width:300px;
width:100%}
.footer{
gap:20px}
.caption{
bottom:0}
}
@media(max-width:440px){
nav a:first-child{
display:none}
.grid{
grid-template-columns:1fr}
.card{
min-height:210px}
.icon{
height:46px}
.strip{
display:flex;
flex-wrap:nowrap;
gap:6px}
.strip span{
white-space:nowrap}
.strip span:nth-child(even){
display:block}
}


/* Schwarze Grundfläche, unabhängig vom hellen oder dunklen Gerätemodus. */
:root {
 color-scheme: dark;
 }

html {
 background-color: #000000;
 }

body {
 background-color: #000000;
 color: #edf2ef;
 }


/* Gewünschte Navigation rechts oben. Schwarze Grundgestaltung unverändert. */
header { position:relative; gap:24px; }
header nav { margin-left:auto; justify-content:flex-end; align-items:center; }

.thought { border-top:1px solid var(--line); padding:32px 0 45px; margin:12px 0; }
.thought blockquote { margin:0 0 15px; font-family:Manrope,sans-serif; font-size:clamp(20px,2.4vw,28px); font-weight:400; line-height:1.6; color:var(--ink); }
.thought p { color:var(--lime); font-size:13px; line-height:1.8; }
.thought p span { color:var(--muted); }
.thought>a { color:var(--muted); font-size:11px; text-decoration:underline; text-underline-offset:4px; }
.project-area { font-size:11px; color:var(--lime); letter-spacing:1px; margin-bottom:8px; }
/* Ständig sichtbare Navigationslinks, auch auf Telefonen. Keine Menütaste. */
header { height:auto; min-height:92px; padding-block:20px; flex-wrap:wrap; }
header nav { display:flex; position:static; flex-direction:row; flex-wrap:wrap; margin-left:auto; justify-content:flex-end; gap:16px 24px; }
header nav a { display:inline-block; }
@media(max-width:800px) {
 header { gap:16px; }
 header .brand { font-size:11px; line-height:1.6; }
 header nav { width:100%; font-size:12px; gap:12px 18px; }
 header nav a:first-child { display:inline-block; }
}

/* Vier gleichfarbige Navigationslinks in einer Zeile. */
header #main-menu { flex-wrap:nowrap; }
header #main-menu a { white-space:nowrap; color:inherit; }
@media(max-width:800px) {
 header #main-menu { font-size:clamp(10px,2.9vw,12px); gap:clamp(8px,2vw,18px); }
}

/* Fünfter Menüpunkt: auf schmalen Displays in weitere Zeilen umbrechen. */
@media(max-width:800px) {
 header #main-menu { flex-wrap:wrap; }
}