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

    body{
      font-family:'Poppins', sans-serif;
      background:#070707;
      color:white;
      overflow-x:hidden;
    }

    html{
      scroll-behavior:smooth;
    }

    /* ---------------- NAVBAR ---------------- */
/* NAVBAR - MBK STYLE */
.navbar {
  background: rgba(5, 10, 25, 0.6); /* gleiches dunkles Blau wie MBK */
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

/* LINKS */
.nav-link {
  color: #cfe9ff !important;
  transition: 0.3s;
}

/* HOVER (nur Farbe, KEIN Strich) */
.nav-link:hover {
  color: #4fd1ff !important;
}

/* BURGER MENU */
.navbar-toggler {
  border: none;
  box-shadow: none !important;
}

.burger-line {
  display: block;
  width: 28px;
  height: 3px;
  background: white;
  margin: 5px 0;
  border-radius: 10px;
}

    /* ---------------- HERO ---------------- */

    .hero{
      height:100vh;

      background:
      linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.7)),
      url("../Bilder/Schönes Meer.jpg");

      background-size:cover;
      background-position:center;

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

      text-align:center;

      position:relative;
    }

    /* GLOW */

    .hero::before{
      content:"";

      position:absolute;

      width:500px;
      height:500px;

      background:#00d9ff20;

      border-radius:50%;

      filter:blur(120px);

      top:10%;
      left:5%;
    }

    .hero-content{
      position:relative;
      z-index:5;

      animation:fadeUp 1.5s ease;
    }

    .hero-content h1{
      font-size:130px;
      font-weight:800;
      letter-spacing:10px;

      text-transform:uppercase;

      text-shadow:
      0 0 20px rgba(255,255,255,0.4),
      0 0 40px rgba(0,217,255,0.4);
    }

    .hero-content p{
      margin-top:20px;
      font-size:24px;
      color:#ddd;
      letter-spacing:4px;
    }

    .hero-btn{
      display:inline-block;

      margin-top:40px;
      padding:15px 45px;

      border:2px solid white;
      border-radius:50px;

      color:white;
      text-decoration:none;

      transition:0.4s;
    }

    .hero-btn:hover{
      background:#00d9ff;
      border-color:#00d9ff;

      transform:translateY(-5px);

      color:white;

      box-shadow:
      0 0 20px rgba(0,217,255,0.5);
    }

    /* ---------------- ABOUT ---------------- */

    

    /* GLASS CARD */

    .glass-card{
      position:absolute;

      bottom:-35px;
      left:-35px;

      background:rgba(255,255,255,0.06);

      backdrop-filter:blur(15px);

      border:1px solid rgba(255,255,255,0.08);

      padding:30px;

      border-radius:25px;

      width:260px;
    }

    .glass-card h3{
      font-size:42px;
      color:#00d9ff;
      font-weight:700;
    }

    .glass-card p{
      margin-top:10px;
      color:#ddd;
      line-height:1.7;
    }

    .about-text span{
      color:#00d9ff;
      letter-spacing:4px;
      font-size:14px;
      font-weight:600;
    }

    .about-text h2{
      margin-top:20px;
      font-size:65px;
      font-weight:700;
      line-height:1.2;
    }

    .about-text p{
      margin-top:25px;
      color:#cfcfcf;
      line-height:2;
      font-size:18px;
    }

    /* ---------------- STATS ---------------- */

    .stats{
      display:flex;
      gap:25px;
      margin-top:50px;
    }

    .stat-box{
      flex:1;

      background:rgba(255,255,255,0.05);

      padding:30px;

      border-radius:25px;

      text-align:center;

      border:1px solid rgba(255,255,255,0.08);

      transition:0.4s;
    }

    .stat-box:hover{
      transform:translateY(-10px);

      background:rgba(0,217,255,0.1);

      box-shadow:
      0 0 25px rgba(0,217,255,0.15);
    }

    .stat-box h3{
      font-size:40px;
      color:#00d9ff;
      font-weight:700;
    }

    .stat-box p{
      color:#ddd;
      margin-top:10px;
      letter-spacing:2px;
    }

    /* ---------------- GALLERY ---------------- */

    .gallery{
      padding:120px 10%;
    }

    .section-title{
      text-align:center;
      margin-bottom:70px;
    }

    .section-title h2{
      font-size:70px;
      font-weight:700;
    }

    .gallery-grid{
      display:grid;

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

      gap:30px;
    }

    .gallery-item{
      overflow:hidden;
      border-radius:30px;

      position:relative;
    }

    .gallery-item img{
      width:100%;
      height:400px;

      object-fit:cover;

      transition:0.6s;
    }

    .gallery-item:hover img{
      transform:scale(1.1);
    }

    .gallery-overlay{
      position:absolute;
      inset:0;

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

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

      opacity:0;
      transition:0.4s;
    }

    .gallery-overlay h3{
      font-size:34px;
      letter-spacing:4px;
    }

    .gallery-item:hover .gallery-overlay{
      opacity:1;
    }

    /* ---------------- SKILLS ---------------- */

    .skills{
      padding:130px 10%;
    }

    .skills-grid{
      display:grid;

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

      gap:30px;
    }

    .skill-box{
      background:rgba(255,255,255,0.05);

      padding:45px;

      border-radius:30px;

      border:1px solid rgba(255,255,255,0.08);

      transition:0.4s;
    }

    .skill-box:hover{
      transform:translateY(-10px);

      background:rgba(0,217,255,0.1);

      box-shadow:
      0 0 25px rgba(0,217,255,0.15);
    }

    .skill-box h3{
      font-size:34px;
      margin-bottom:20px;
      color:#00d9ff;
    }

    .skill-box p{
      color:#d6d6d6;
      line-height:1.8;
    }

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;
}


    @keyframes fadeUp{

      from{
        opacity:0;
        transform:translateY(50px);
      }

      to{
        opacity:1;
        transform:translateY(0);
      }
    }



    @media(max-width:950px){

      .hero-content h1{
        font-size:70px;
      }

      .hero-content p{
        font-size:18px;
      }

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

      .stats{
        flex-direction:column;
      }

      .glass-card{
        position:relative;
        left:0;
        bottom:0;
        margin-top:20px;
        width:100%;
      }

      .about-text h2,
      .section-title h2{
        font-size:45px;
      }

      .navbar{
        padding:15px 20px;
      }
    }



.hobby-section{

    padding:120px 8%;

    background:
    linear-gradient(
    to bottom,
    #050816,
    #0c1324
    );

    color:white;

}

.hobby-title{

    text-align:center;

    margin-bottom:80px;

}

.hobby-title span{

    color:#4ea3ff;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:14px;

}

.hobby-title h2{

    font-size:65px;

    margin-top:15px;

}

/* CONTAINER */

.hobby-container{

    display:grid;

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

    gap:40px;

}

/* CARD */

.hobby-card{

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(12px);

    border-radius:30px;

    padding:50px;

    transition:0.5s;

    position:relative;

    overflow:hidden;

}

/* GLOW */

.hobby-card::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    background:#2563eb;

    border-radius:50%;

    filter:blur(120px);

    opacity:0;

    top:-70px;
    right:-70px;

    transition:0.5s;

}

.hobby-card:hover::before{

    opacity:0.25;

}

.hobby-card:hover{

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

    box-shadow:
    0 0 30px rgba(78,163,255,0.25);

}

/* ICON */

.hobby-icon{

    font-size:60px;

    margin-bottom:25px;

    transition:0.7s;

}

/* ICON HOVER */

.hobby-card:hover .hobby-icon{

    transform:
    rotate(360deg)
    scale(1.25);

}

/* TEXT */

.hobby-card h3{

    font-size:35px;

    margin-bottom:20px;

}

.hobby-card p{

    color:#cfcfcf;

    line-height:1.9;

    font-size:18px;

}

/* ABOUT BOX */

.about-box{

    margin-top:100px;

    background:
    rgba(255,255,255,0.04);

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius:35px;

    padding:70px;

    text-align:center;

    position:relative;

    overflow:hidden;

}


.about-box::before{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    background:#4ea3ff;

    border-radius:50%;

    filter:blur(180px);

    opacity:0.15;

    top:-120px;
    right:-120px;

}

/* TEXT */

.about-box h3{

    position:relative;

    z-index:2;

    font-size:55px;

    margin-bottom:25px;

}

.about-box p{

    position:relative;

    z-index:2;

    color:#d0d0d0;

    font-size:22px;

    line-height:2;

    max-width:900px;

    margin:auto;

}

/* RESPONSIVE */

@media(max-width:768px){

    .hobby-title h2{

        font-size:45px;

    }

    .about-box h3{

        font-size:40px;

    }

    .about-box p{

        font-size:18px;

    }

}


.hero-about{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;
}

/* Hintergrundtext */

.bg-text{

    position:absolute;

    font-size:18rem;

    font-weight:900;

    color:rgba(255,255,255,.03);

    letter-spacing:15px;

    user-select:none;
}

/* Überschrift */

.about-title{

    font-size:clamp(6rem,16vw,14rem);

    font-weight:900;

    letter-spacing:10px;

    background:
    linear-gradient(
    180deg,
    #ffffff,
    #9ce8ff,
    #4bc7ff,
    #0f7cff
    );

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

    text-shadow:
    0 0 20px rgba(100,220,255,.7),
    0 0 50px rgba(100,220,255,.6),
    0 0 100px rgba(100,220,255,.4);

    animation:floatTitle 5s infinite ease-in-out;
}

@keyframes floatTitle{

    50%{
        transform:translateY(-8px);
    }

}

.hero-line{

    width:350px;
    height:3px;

    margin:25px auto;

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

    box-shadow:
    0 0 25px #56d8ff;
}

.hero-tag{

    display:inline-block;

    padding:10px 20px;

    border-radius:30px;

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

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

    color:#8fdfff;

    margin-bottom:20px;
}

html,
body{
    background:linear-gradient(
    135deg,
    #040b1f,
    #07152f,
    #0b2044
    ) !important;
}



footer{
    padding:40px;
    text-align:center;
    border-top:1px solid rgba(255,255,255,.1);
    margin-top:100px;
}

footer a{
    color:#9fd6ff;
    text-decoration:none;
    margin:0 20px;
    transition:.3s;
}

footer a:hover{
    color:#4fd1ff;
}



.skills-banner{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;

    max-width:1000px;
    margin:50px auto;

    padding:20px;
}

.skills-banner span{
    padding:12px 24px;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.12);

    border-radius:999px;

    color:white;

    font-size:0.95rem;
    font-weight:500;
    letter-spacing:0.5px;

    transition:all 0.3s ease;
}

.skills-banner span:hover{
    transform:translateY(-3px);

    border-color:#4da6ff;

    box-shadow:
        0 0 20px rgba(77,166,255,0.25);
}



body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: radial-gradient(circle at top, #0b1f3f, #05070f 60%, #02030a);
  color: white;
}

/* TITLE */
.title {
  text-align: center;
  font-size: 3rem;
  margin: 60px 0 30px;
  color: #cfe6ff;
  letter-spacing: 2px;
}

/* GRID */
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 120px;
  gap: 20px;
  padding: 40px;
}

/* CARD */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transform: translateY(0);
  transition: 0.4s ease;

  /* 🔥 WICHTIG: KEIN WEISS MEHR */
  background: linear-gradient(145deg, #0b1b35, #070d1a);
  box-shadow: 0 10px 35px rgba(0,0,0,0.6);
}

/* IMAGE */
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* 🔥 DAS FIXT DEN "WEISSEN LOOK" */
  filter: brightness(0.65) saturate(1.2) contrast(1.1);

  transition: 0.6s ease;
}

/* BLUE OVERLAY LAYER (SEHR WICHTIG FÜR PREMIUM LOOK) */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 30, 80, 0.0),
    rgba(5, 10, 30, 0.65)
  );
  z-index: 1;
}

/* HOVER EFFECT */
.card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 25px 70px rgba(0, 140, 255, 0.25);
}

.card:hover img {
  transform: scale(1.12);
  filter: brightness(0.85) saturate(1.4);
}

/* TEXT */
.text {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 14px;
  z-index: 2;

  /* 🔥 GLASS BLUE LOOK */
  background: rgba(10, 20, 45, 0.55);
  backdrop-filter: blur(12px);
  color: #d8eaff;
  font-size: 1rem;
}

/* SIZE SYSTEM (wie vorher, bleibt gut) */
.big {
  grid-column: span 3;
  grid-row: span 3;
}

.medium {
  grid-column: span 2;
  grid-row: span 2;
}

.small {
  grid-column: span 1;
  grid-row: span 2;
}


.portfolio{

    padding:120px 8%;
}

.title{

    text-align:center;

    font-size:5rem;

    font-weight:900;

    color:#d7ecff;

    margin-bottom:80px;

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

.masonry{

    display:grid;

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

    grid-auto-rows:250px;

    gap:25px;
}

.item{

    position:relative;

    overflow:hidden;

    border-radius:25px;

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

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

    transition:.5s;
}

.item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s;
}

.tall{

    grid-row:span 2;
}

.wide{

    grid-column:span 2;
}

.item:hover{

    transform:
    translateY(-10px)
    rotate(1deg);

    box-shadow:
    0 0 30px rgba(0,160,255,.3);
}

.item:hover img{

    transform:scale(1.08);
}

/* Lichtstreifen */

.item::before{

    content:"";

    position:absolute;

    top:0;
    left:-150%;

    width:50%;
    height:100%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.2),
    transparent
    );

    transform:skewX(-20deg);

    transition:.8s;

    z-index:5;
}

.item:hover::before{

    left:180%;
}

/* Schwebeeffekt */

.item:nth-child(1){
    animation:float1 6s ease-in-out infinite;
}

.item:nth-child(2){
    animation:float2 8s ease-in-out infinite;
}

.item:nth-child(3){
    animation:float1 7s ease-in-out infinite;
}

@keyframes float1{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }
}

@keyframes float2{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(8px);
    }
}

@media(max-width:900px){

.masonry{

    grid-template-columns:1fr;
}

.tall,
.wide{

    grid-column:span 1;
    grid-row:span 1;
}

.title{

    font-size:3rem;
}

}

.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);
}