/* ===== Local Fonts ===== */
@font-face {
    font-family: 'Google Sans Flex';
    src: url('fonts/GoogleSansFlex.woff2') format('woff2-variations'),
         url('fonts/GoogleSansFlex.woff2') format('woff2');
    font-weight: 1 1000;
    font-stretch: 25% 151%;
    font-style: oblique -90deg 90deg;
    font-display: swap;
}

  /* ===== Reset ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Google Sans Flex';
    }
  
  /* ===== Background ===== */
  body {
    min-height: 100vh;
    background: linear-gradient(120deg, #4b4da3 0%, #000 65%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
    /* ===== Hero Element ===== */
  .hero {
    padding: 10rem 2rem 10rem;
    text-align: center;
    overflow-x: hidden;
  }
  
  /* ===== CA Logo ===== */
  .logo {
    color: #8f92ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin: 0 auto 2rem;
  }
  
  /* ===== Headings ===== */
  h1 {
    letter-spacing: 0.15em;
    margin-bottom: 0.6rem;
  }

  .highlightFont {
    color:#8f92ff;
}

  .subtitle {
    opacity: 0.75;
    margin-bottom: 4rem;
  }
  
  /* ===== Overflow Illusion ===== */
  
  .projects-overflow {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: visible;
  }
  
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(6, 240px);
    gap: 1.4rem;
    transform: translateX(0px);
    rotate: -5deg; /* schiebt Grid aus dem Viewport */
  }
  
  /* ===== Project Cards ===== */
  .project-card {
    height: 150px;
    border-radius: 18px;
    background: linear-gradient(140deg, #444, #222);
    background-size: cover;
  }
  
  /*Positionierung der Cards*/
  .card-a { 
    background-image: url("bilder/projectCard_1.png");
    transform: translateY(50px);}
  .card-b { 
    background-image: url("bilder/projectCard_6.jpg");
    transform: translateY(50px);}
  .card-c { 
    background-image: url("bilder/projectCard_2.png");
    transform: translateY(50px);}
  .card-d { 
    background-image: url("bilder/projectCard_3.png");
    transform: translateY(50px);}
  .card-e { 
    background-image: url("bilder/projectCard_4.png");
    transform: translateY(50px);}
  .card-f { 
    background-image: url("bilder/projectCard_5.png");
    transform: translateY(50px);}


/* ===== Footer ===== */
  footer {
    text-align: center;
    padding: 2rem;
    font-size: 0.8rem;
    opacity: 0.8;
  }

/* ===== Socials ===== */
  .socials-grid {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
    
  }
  
  .socialCard {
    
    width: 30px;
    height: 30px;
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: all 0.3s ease;
  }


.socialCard:hover,
.socialCard:focus{
  transform: translateY(-3px) scale(1.05);
}

  /* ===== Impressum ===== */

  a:link { color:white; }
  footer a:visited {color:white;}

  .impressumText{
    color:white;
    text-align: left;
  }
  
  /* ===== Responsive ===== */
  
  @media (max-width: 900px) {
    .projects-grid {
      grid-template-columns: repeat(3, 220px);
      transform: none;
    }
  }