*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{

background:
radial-gradient(circle at top left,
rgba(0,180,255,.15),
transparent 35%),

radial-gradient(circle at bottom right,
rgba(0,100,255,.15),
transparent 35%),

linear-gradient(
135deg,
#020816,
#07152f,
#0a2148
);

color:white;
overflow-x:hidden;
}

/* GLOW */

.glow{
position:fixed;
border-radius:50%;
filter:blur(150px);
z-index:-1;
}

.glow1{
width:450px;
height:450px;
background:#00c3ff;
top:-150px;
left:-150px;
opacity:.15;
}

.glow2{
width:500px;
height:500px;
background:#0055ff;
bottom:-200px;
right:-200px;
opacity:.15;
}

/* NAVBAR */

.navbar{

background:rgba(5,10,25,.55);

backdrop-filter:blur(20px);

border-bottom:
1px solid rgba(255,255,255,.08);
}

.brand{
color:white;
font-weight:700;
margin-left:10px;
}

.nav-link{
color:#d7e8ff !important;
}

.nav-link:hover{
color:#5fd8ff !important;
}

/* BURGER */

.navbar-toggler{
border:none;
box-shadow:none !important;
}

.burger-line{

display:block;

width:28px;
height:3px;

background:white;

margin:5px 0;

border-radius:20px;
}

/* HERO */

.hero{

height:100vh;

display:flex;
justify-content:center;
align-items:center;

text-align:center;
}

.hero-tag{

display:inline-block;

padding:10px 22px;

border-radius:40px;

background:rgba(219, 210, 210, 0.05);

border:1px solid rgba(255,255,255,.08);
color: #00c3ff;

margin-bottom:25px;
}

.hero h1{

font-size:clamp(7rem,18vw,15rem);

font-weight:900;

letter-spacing:12px;

background:
linear-gradient(
180deg,
#ffffff,
#cdefff,
#5fd8ff
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

text-shadow:
0 0 25px rgba(0,180,255,.4);
}

.hero-line{
width:300px;
height:3px;

margin:20px auto;

background:
linear-gradient(
90deg,
transparent,
#08b8f3,
transparent
);

box-shadow:0 0 20px #5fd8ff;
}

/* FEATURES */

.features{

padding:120px 10%;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;
}

.feature-card{

padding:35px;

background:
rgba(255,255,255,.05);

backdrop-filter:blur(20px);

border:
1px solid rgba(255,255,255,.08);

border-radius:25px;

transition:.4s;
}

.feature-card:hover{

transform:translateY(-10px);

box-shadow:
0 0 30px rgba(0,180,255,.2);
}

/* PROJEKTE */

.projects{

padding:120px 10%;
}

.projects h2{

text-align:center;

font-size:3rem;

margin-bottom:60px;
color: #dcd5d5;
}

.project-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;
}

.project-card{

padding:20px;

border-radius:25px;
color: #cdefff;
background:
rgba(255,255,255,.05);

backdrop-filter:blur(20px);

border:
1px solid rgba(255,255,255,.08);

transition:.4s;
}

.project-card:hover{

transform:translateY(-10px);

box-shadow:
0 0 35px rgba(0,180,255,.2);
}

.project-card img{

width:100%;

border-radius:15px;

margin-bottom:15px;
}

/* HIGHLIGHT */

.highlight{

padding:120px 10%;

text-align:center;
}

.highlight h2{

font-size:3rem;

margin-bottom:20px;
}

/* FOOTER */

footer{

padding:40px;

text-align:center;

border-top:
1px solid rgba(255,255,255,.08);
}

footer a{

color:#9fd6ff;

margin:0 20px;

text-decoration:none;

transition:.3s;
}

footer a:hover{

color:#5fd8ff;
}


.projects{
    padding:120px 10%;
}

.projects h2{
    text-align:center;
    font-size:3rem;
    font-weight:800;
    margin-bottom:60px
}

.project-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

.project-card{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:25px;

    overflow:hidden;

    transition:.4s;

    padding:20px;
}

.project-card:hover{

    transform:
    translateY(-10px)
    scale(1.02);

    box-shadow:
    0 0 35px rgba(0,180,255,.2);
}

.project-card img{

    width:100%;
    height:220px;

    object-fit:cover;

    border-radius:15px;

    margin-bottom:15px;
}

.project-card h3{
    margin-bottom:10px;
}

.project-card p{
    color:#d7e8ff;
    line-height:1.6;
}

/* Erste Karte größer */

.featured{
    grid-column:span 2;
}

/* Altes Portfolio */

.old-portfolio{

    background:
    linear-gradient(
    135deg,
    rgba(20,40,90,.5),
    rgba(0,120,255,.1)
    );
}

.small-tag{

    display:inline-block;

    padding:5px 12px;

    border-radius:20px;

    font-size:.8rem;

    background:
    rgba(255,255,255,.08);

    margin-bottom:12px;
}

.project-btn{

    display:inline-block;

    margin-top:15px;

    text-decoration:none;

    color:white;

    padding:10px 18px;

    border-radius:30px;

    background:
    linear-gradient(
    90deg,
    #247cff,
    #56d8ff
    );

    transition:.3s;
}

.project-btn:hover{

    transform:translateY(-3px);

    color:white;
}

.old-portfolio h3{

    font-size:1.7rem;

    font-weight:800;

    background:
    linear-gradient(
    180deg,
    #ffffff,
    #bfeeff
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

p {
  color: rgb(215, 201, 201);
}

.navbar-toggler {
  border: none;
  box-shadow: none !important;
}

/* Burger Linien */
.burger-line {
  display: block;
  width: 28px;
  height: 3px;
  background: white;
  margin: 5px 0;
  border-radius: 10px;
  transition: 0.3s;
}

/* X Animation wenn Menü offen ist */
.navbar-toggler[aria-expanded="true"] .burger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.navbar-toggler[aria-expanded="true"] .burger-line:nth-child(2) {
  opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .burger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}