/* --- DEIN BESTEHENDES STYLESHEET (INTEGRIERT) --- */
    * {
      margin: 0;
      padding: 0;
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
    }

    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      overflow-x: hidden;
      background-color: #ffffff;
    }
    @media screen and (max-width: 769px) {
      body {
        flex-direction: column;
      }
    }
    @media screen and (max-width: 579px) {
      body {
        padding-top: 30px;
      }
    }

    main {
      max-width: 1200px;
      margin: auto 20%;
      display: flex;
      flex-direction: column;
      z-index: 1;
      position: relative;
    }
    @media screen and (max-width: 769px) {
      main {
        margin: 20px 10%;
      }
    }

    h1 {
      margin-bottom: 30px;
    }

    p {
      margin-bottom: 10px;
      text-align: justify;
    }
    p.conclusion {
      text-align: center;
    }

    .logo {
      position: absolute;
      top: 20px;
      right: 10%;
      width: 200px;
      height: 200px;
      z-index: 10;
      margin-bottom: 0;
    }
    @media screen and (max-width: 769px) {
      .logo {
        position: static;
        margin: 30px auto 0;
      }
    }

    .button {
      margin: 20px auto 30px;
      text-decoration: none;
      padding: 17px 20px 15px;
      border-radius: 10px;
      overflow: hidden;
      display: inline-block;
      position: relative;
      width: 220px;
      box-sizing: border-box;
      font-weight: bold;
      transition: color 300ms ease, box-shadow 300ms ease;
      color: #5865F2;
      text-align: center;
      -webkit-box-shadow: 0px 0px 20px 0px #5865F2;
      -moz-box-shadow: 0px 0px 20px 0px #5865F2;
      box-shadow: 0px 0px 20px 0px #5865F2;
    }
    .button .bg {
      background-color: #FFF;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
    }
    .button::before, .button::after {
      transition: left 300ms ease;
      content: "";
      height: 100%;
      background-color: #5865F2;
      position: absolute;
      top: 0;
      left: calc(-100% - 60px);
      z-index: -1;
    }
    .button::before {
      width: 55px;
      transform: translateX(180px);
      border-radius: 0 200% 200% 0;
      -webkit-box-shadow: 0px 0px 20px 0px #5865F2;
      -moz-box-shadow: 0px 0px 20px 0px #5865F2;
      box-shadow: 0px 0px 20px 0px #5865F2;
    }
    .button::after {
      width: 100%;
    }
    .button:hover {
      color: #FFF;
      -webkit-box-shadow: 0px 0px 35px 0px #5865F2;
      -moz-box-shadow: 0px 0px 35px 0px #5865F2;
      box-shadow: 0px 0px 35px 0px #5865F2;
    }
    .button:hover svg {
      fill: #FFF;
    }
    .button:hover::before, .button:hover::after {
      left: 0;
    }
    .button:active {
      -webkit-box-shadow: 0px 0px 25px 0px #5865F2;
      -moz-box-shadow: 0px 0px 25px 0px #5865F2;
      box-shadow: 0px 0px 25px 0px #5865F2;
    }
    .button svg {
      height: 20px;
      fill: #5865F2;
      transition: fill 250ms ease;
      vertical-align: middle;
      top: -2px;
      position: relative;
      margin-right: 10px;
    }

    .stripe1, .stripe2, .stripe3 {
      width: 0;
      height: 0;
      position: absolute;
      top: 0;
      left: 0;
    }
    .stripe1 {
      border-left: 0px solid transparent;
      border-right: 710px solid transparent;
      border-top: 140px solid #e0f2f1;
    }
    .stripe2 {
      border-left: 0px solid transparent;
      border-right: 680px solid transparent;
      border-top: 120px solid #009699;
    }
    .stripe3 {
      border-left: 0px solid transparent;
      border-right: 630px solid transparent;
      border-top: 100px solid #26a6a8;
    }

    @keyframes bubbleLow {
      from { top: 100%; background-color: #26a6a8; opacity: 1; }
      to { top: calc(100% - 200px); background-color: #e0f2f1; opacity: 0; }
    }
    @keyframes bubble {
      from { top: 100%; background-color: #26a6a8; opacity: 1; }
      to { top: calc(100% - 300px); background-color: #e0f2f1; opacity: 0; }
    }
    @keyframes bubbleHigh {
      from { top: 100%; background-color: #26a6a8; opacity: 1; }
      to { top: calc(100% - 400px); background-color: #e0f2f1; opacity: 0; }
    }
    .bubble {
      background-color: #26a6a8;
      border-radius: 100%;
      position: fixed;
      top: 100%;
      animation: 2s bubble ease-out infinite;
      z-index: -10;
    }
    @media screen and (max-width: 579px) {
      .bubble:nth-of-type(2n) { display: none; }
    }
    .bubble.low { animation: 2s bubbleLow ease-out infinite; }
    .bubble.high { animation: 2s bubbleHigh ease-out infinite; }

    .team {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 20px;
      gap: 20px 0;
    }
    .team .member {
      display: flex;
      flex-direction: column;
      flex-basis: 35%;
      align-items: center;
    }
    @media screen and (max-width: 769px) {
      .team .member { flex-basis: 50%; }
    }
    .team .member .name { font-weight: bold; }
    .team .member .role { color: #9e9e9e; font-style: italic; }
    .team .member.admin .name { color: #d50000; }
    .team .member.mod .name { color: #00c853; }
    .team .member.web .name { color: #ffab00; }

    /* --- DATENSCHUTZ OPTIK (MODAL & FOOTER LINK) --- */
    footer {
      text-align: center;
      margin-top: 40px;
      margin-bottom: 20px;
      z-index: 2;
    }
    footer a {
      color: #9e9e9e;
      text-decoration: none;
      font-size: 0.9em;
      transition: color 300ms ease;
    }
    footer a:hover {
      color: #26a6a8;
    }

    .ds-modal {
      display: none; 
      position: fixed; 
      z-index: 100; 
      left: 0;
      top: 0;
      width: 100%; 
      height: 100%; 
      overflow: auto; 
      background-color: rgba(0,0,0,0.5); 
      backdrop-filter: blur(3px);
    }
    .ds-modal-content {
      background-color: #fff;
      margin: 8% auto; 
      padding: 30px;
      border-radius: 10px;
      max-width: 700px;
      width: 85%;
      box-shadow: 0 4px 20px rgba(0,0,0,0.2);
      color: #333;
    }
    .ds-modal-content h2, .ds-modal-content h3 {
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: bold;
    }
    .ds-modal-content h2 { font-size: 1.5em; border-bottom: 1px solid #eee; padding-bottom: 10px; font-weight: 400;}
    .ds-modal-content h3 { font-size: 1.1em; }
    .ds-modal-content p, .ds-modal-content ul { font-size: 0.95em; color: #555; text-align: left; margin-bottom: 15px; }
    .ds-modal-content ul { padding-left: 20px; }
    
    .ds-close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
      line-height: 20px;
    }
    .ds-close:hover {
      color: #d50000;
    }