*{
    text-decoration: none;
}

    body {
      margin: 0;
      font-family: "semplicitapro", sans-serif;
      font-weight: 900;
      font-style: normal; 
      font-size: 20pt;
    }
    
    .top-bar {
      background-color: #e6e6e6; /* Grey bar */
      margin-left: 0pt;
      margin-right: 0pt;
      color: black;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2rem;
      position: relative;
      z-index: 2;
    }

    .logo {
      padding-left: 21pt;
    }

    .footer {
      background-color: #e6e6e6;
      font-family: "Open Sans Light";
      font-size: 45%;
      padding: 25px 25px;
    }
    
    .footer-container {
      display: flex;
      justify-content: space-between;
      max-width: 1200px;
      margin: auto;
      flex-wrap: wrap;
      gap: 0px;
      justify-content: space-between; 
      padding: 0 0px; 
    }
    
    .footer-column {
      flex: 1;
      min-width: 250px;
      margin: 0px;
    }
    
    .footer-column p {
      line-height: 1.6;
      padding-left: 25pt;
    }

    h1 {
      padding-left: 25pt;
      padding-right: 25pt;
    }

    h2 {
      padding-left: 25pt;
      padding-right: 25pt;
    }

    h3 {
      padding-left: 25pt;
      padding-right: 25pt;
    }

    h4 {
      padding-left: 25pt;
      padding-right: 25pt;
    }

    p.text-privacy{
      padding-left: 25pt;
      padding-right: 25pt;
    }

    p.text-legal-center{
      padding-left: 25pt;
      padding-right: 25pt;
    }
    
    .footer-column ul {
      list-style: none;
      padding: 0;
      padding-left: 25pt;
    }
    
    .footer-column ul li {
      margin-bottom: 10px;
    }
    
    .footer-column a {
      color: #002244;
      text-decoration: none;
    }
    
    .footer-column a:hover {
      text-decoration: underline;
    }

    
    /* === Responsive Design === */
    @media (max-width: 768px) {
      .footer-container {
        flex-direction: column;
        align-items: flex-start;
      }
    
      .footer-column {
        width: 100%;
        margin-bottom: 20px;
      }
    }

    .footer-column:first-child {
      flex: 1;
    }
    
    .footer-column:last-child {
      flex: 0 0 auto; /* Prevent it from expanding */
      min-width: 150px; /* Adjust this as needed */
      text-align: left;
    }
    
    .logo {
      font-size: 1.2rem;
      font-family: "semplicitapro", sans-serif;
    }
    
    .menu-toggle {
      padding-right: 25pt;
      width: 30px;
      height: 18.5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
    }
    
    .menu-toggle .bar {
      height: 4px;
      background-color: black;
      border-radius: 2px;
      transition: all 0.3s;
    }
    
    .menu-toggle.active .bar:first-child {
      transform: rotate(45deg) translate(5px, 5px);
    }
    
    .menu-toggle.active .bar:last-child {
      transform: rotate(-45deg) translate(5px, -5px);
    }
    
    .menu-toggle.active .bar:nth-child(2) {
      opacity: 30;
    }
    
    /* Menu overlay */
    .menu-overlay {
      position: fixed;
      top: 0;
      left: 0;
      padding-left: 5%;
      padding-top: 5%;
      height: 100vh;
      width: 100%;
      background-color: rgba(255, 255, 255, 0.90); /* 30% opacity */
      display: none;
      justify-content: left;
      align-items: left;
      z-index: 1;
    }
    
    .menu-overlay.show {
      display: flex;
    }
    
    .menu-content ul {
      list-style-image: none;
      list-style: none;
      list-style-type: none;
      padding: 0;
      width: 100%;
      margin: 20 pt;
      text-align: left;
      font-size: 20pt;
      line-height: 40pt;
    }

    .sub-menu {
      margin-left: 20%;
      font-size: 10pt;
    }

    
    .menu-content li:hover {
      color: #E84435;               /* Change text color to red on hover */
      border-left: none;        /* Remove any blue line that might appear */
      outline: none;            /* Remove browser focus outline */
    }

    .menu-content li::marker {
      content: none;
    }

    .content-img {
      width: 32%;
      align-items: center;
      justify-content: center;
    }

    .content-main-image {
      width: 90%;
      margin-top: 5%;
      margin-left: 5%;
      margin-right: 5%;
    }

    .content-title {
      font-size: 100%;
      text-align: center;
      line-height: 40pt;
    }

    .content-sub-title {
      font-size: 85%;
      text-align: center;
      line-height: 20pt;
    }

    .content-intro {
      font-family: "Open Sans Light";
      font-size: 70%;
      text-align: center;
      line-height: 25pt;
    }

    .content-title {
      font-size: 85%;
      text-align: center;
      line-height: 25pt;
    }

    .container {
      display: flex;
      max-width: 1200px;
      margin: 50px auto;
      font-family: "Open Sans Light";
      align-items: center;
    }

    .text-section {
      flex: 1;
      padding: 40px;
      color: #222;
    }

    .text-section h1 {
      color: #E84435;
      font-size: 70%;
      margin-bottom: 20px;
    }

    .text-section p {
      font-size: 60%;
      line-height: 15pt;
    }

    .image-section {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 25pt;
    }

    .image-section img {
      max-width: 100%;
      height: auto;
    }

    @media (max-width: 768px) {
      .container {
        flex-direction: column;
      }

      .text-section, .image-section {
        padding: 20px;
      }

    }

    .privacy{
      font-family: "Open Sans Light";
    }

  h1.title-privacy{
  font-family: "Open Sans Light";
  font-style: normal;
  font-size: 100%;
  text-align: left;
  margin-left: 25pt;
  margin-right: 25pt;
  line-height: 30pt;
  }

  .content-text{
    padding-left: 25pt;
    padding-right: 25pt;
  }

  h2.subtitle-privacy{
    font-family: "Open Sans Light";
    font-style: normal;
    font-size: 80%;
    text-align: left;
    margin-left:20pt;
    margin-right: 20pt;
    line-height: 25pt;
    }

  h3.subsubtitle-privacy{
    font-family: "Open Sans Light";
    font-size: 70%;
    text-align: left;
    margin-top: 30pt;
    margin-bottom: 0pt;
    margin-left:20pt;
    margin-right: 20pt;
    line-height: 20pt;
  }

  .box{
    font-family: "Open Sans Light";
  }

  .box-sub{
    font-family: "Open Sans Light";
  }

  h4.subsubsubtitle-privacy{
    font-family: "Open Sans Light";
    font-size: 70%;
    text-align: left;
    margin-left:20pt;
    margin-right: 20pt;
    line-height: 20pt;
  }

  p.text-privacy{
    font-family: "Open Sans Light";
    font-size: 60%;
    text-align: justify;
    margin-left:20pt;
    margin-right: 20pt;
    line-height: 15pt;
    }

  p.text-legal{
    font-family: "Open Sans Light";
    font-size: 60%;
    text-align: justify;
    margin-left:20pt;
    margin-right: 20pt;
    line-height: 6pt;
    padding-left: 25pt;
    }

  .icon-row-sm{
    padding-left: 25pt;
  }

  p.text-legal-center{
    font-family: "Open Sans Light";
    font-size: 60%;
    text-align: justify;
    margin-left:20pt;
    margin-right: 20pt;
    line-height: 15pt;
    text-align: left;
    }

    .list-privacy{
      font-family: "Open Sans Light";
      font-size: 60%;
      text-align: left;
      margin-left:20pt;
      margin-right: 20pt;
      line-height: 15pt;
    }

    p.text-about-me {
      font-family: "Open Sans Light";
      font-size: 60%;
      text-align: justify;
      line-height: 15pt;
      text-align: left;
      margin-left: 10pt;
      margin-right: 10pt
    }

    br {
      line-height: 2pt;;
    }

    .container-vita{
      text-align: left;
    }

    .container-collaboration{
      text-align: left;
      padding-left: 25pt;
    }
    
    .vita-container {
      justify-content: space-between;
      max-width: 1200px;
      gap: 20px;
      justify-content: space-between; 
    }
    
    
    .vita-container {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 20px;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .vita-logo {
      width: 200pt;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      padding-left: 8pt;
    }

    .text {
      display: flex;
      flex-direction: column;
      gap: 5px;
      flex-grow: 1;
      min-width: 200px;
      margin-top: 10pt;
      margin-bottom: 10pt;
      line-height: 10pt;
      margin-left: -5pt;
    }

    .box {
      padding-left: 15pt;
      padding-right: 20pt;
      padding-bottom: 0pt;
      font-size: 16px;
    }

    .box-top {
      padding-left: 15pt;
      padding-right: 20pt;
      padding-bottom: 5pt;
      line-height: 15pt;
      font-size: 20px;
      padding-top: 20pt;
    }

    .box-top-second {
      padding-left: 15pt;
      padding-right: 20pt;
      padding-bottom: 5pt;
      font-size: 20px;
      padding-top: 0pt;
    }

    

    .box-sub {
      padding: 20px;
      font-size: 16px;
      color:#222;
    }

    /* Responsive layout: stack vertically on small screens */
    @media (max-width: 600px) {
      .container {
        flex-direction: column;
        align-items: center;
      }

      .text {
        width: 100%;
      }

      .box {
        width: 80%;
      }
    }

    .skills-container {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem; /* Abstand zwischen den Gruppen */
    }
    
    .skill-group {
      display: flex;
      flex-direction: column; /* Subtitle oben, Icons darunter */
      display: flex;
      flex-direction: column;
      align-items: flex-start;  /* <- statt center */
      text-align: left;         /* <- statt center */
      margin-left: 12pt;
    }

    .icon-row {
      align-items: left;
      margin-left: 25pt;
      margin-right: 25pt;
      display: flex;
      gap: 0.5rem;
    }

    .icon-row-sm {
      align-items: left;
      margin-left: 0pt;
      margin-right: 25pt;
      display: flex;
    }
    
    
      .skill-icon {
        width: 40px;
        height: auto;
        margin: 0 5px;
        display: inline-block;
        transition: all 0.3s ease;
        vertical-align: middle;  
      }

      .photoshop-icon:hover {
        content: url("../icons/photoshop_colour.png");
      }

      .lightroom-icon:hover {
        content: url("../icons/lightroom_colour.png");
      }

      .illustrator-icon:hover {
        content: url("../icons/illustrator_colour.png");
      }

      .indesign-icon:hover {
        content: url("../icons/indesign_colour.png");
      }

      .animate-icon:hover {
        content: url("../icons/animate_colour.png");
      }

      .xd-icon:hover {
        content: url("../icons/xd_colour.png");
      }

      .figma-icon:hover {
        content: url("../icons/figma_colour.png");
      }

      .premiere-icon:hover {
        content: url("../icons/premiere_colour.png");
      }

      .davinci-icon:hover {
        content: url("../icons/davinci_colour.png");
      }

      .fusion-icon:hover {
        content: url("../icons/fusion_colour.png");
      }

      .rhino-icon:hover {
        content: url("../icons/rhino_colour.png");
      }

      .wordpress-icon:hover {
        content: url("../icons/wordpress_colour.png");
      }

      .contao-icon:hover {
        content: url("../icons/contao_colour.png");
      }

      .typo3-icon:hover {
        content: url("../icons/typo3_colour.png");
      }

      .html-icon:hover {
        content: url("../icons/html_colour.png");
      }

      .css-icon:hover {
        content: url("../icons/css_colour.png");
      }

      .php-icon:hover {
        content: url("../icons/php_colour.png");
      }

      .html-icon{
        height: 40pt;
        width: 40pt
      }

      .css-icon{
        height: 40pt
      }

      .php-icon{
        height: 40pt;
        width: 40pt;
        margin-top: 8%;
      }


    .socialmedia-icon {
      width: 30px;
      height: 30px;
      display: inline-block;   /* wichtig: blockförmig machen */
      margin: 0 10px;          /* gleiche Abstände links und rechts */
      transition: all 0.3s ease;
      vertical-align: middle;  /* sorgt für sauberes Ausrichten */
    }

    /* Instagram Hover-Effekt */
    .instagram-icon:hover {
      content: url("../icons/instagram_colour.png");
    }

    .linkedin-icon:hover {
      content: url("../icons/linkedin_colour.png");
    }

    .title-skills{
      font-family: "Open Sans Light";
      font-size: 70%;
      text-align: left;
      margin-left:25pt;
      margin-right: 25pt;
      line-height: 20pt;
    }

    .subtitle-skills{
      font-family: "Open Sans Light";
      font-size: 50%;
      text-align: left;
      margin-left: 28pt;
      margin-right: 25pt;
      line-height: 10pt;
    }

    a:link {
      color: black;
    }

    a:hover {
      color: #E84435;
    }
/*
    .text-vita {
      font-family: "Open Sans Light";
      font-size: 60%;
      text-align: justify;
      line-height: 15pt;
      text-align: left;
      margin-right: 5%;
    }
      */