.noScript {
      padding: 2em;
      background: #fbba23; 
      color: rgb(36, 36, 36); 
      text-align: center;
    }
    
    .noScript h3{
      font-size: 1.6em;
      font-weight: 475;
      border-bottom: solid 1px rgb(36, 36, 36);
      color: rgb(36, 36, 36); 
    }
    .noScript p {
      font-size: 1.3em;
      font-weight: 425;
      color: rgb(36, 36, 36); 
    } 
    
    body {
      font-family: system-ui, sans-serif;
      max-width: 1000px;
      margin: 0 auto;
      padding: 2rem;
      background-color: #f3f3f3;
      color: #222;
      letter-spacing: 0.03em;
    }

    h1 {
      font-size: 1.8em;
      line-height: 2em;
    }
    h2 {
      font-size: 1.6em;
      line-height: 1.9em;
    }
    h3 {
      font-size: 1.4em;
      line-height: 1.7em;
    }

    h1, h2, h3 {
      letter-spacing: 0.08em;
      color: #004b3c;
      padding: 5px;
      font-weight: 475;
    }
    h1, h2 {
      background-color: #edeeee;
      border-radius: 8px;;
    }
    h3 {
        border-bottom: solid 1px #004b3c;
        padding-bottom: 1px;
    }

    p {
      line-height: 1.3em;
      font-size: 1em;
    }

    ul {
      padding-left: 1.2rem;
    }
    li {
        line-height: 1.3em;
        margin-bottom: 0.4em;
        margin-left: 0.5em;
    }
    button {
      padding: 0.6rem 1.2rem;
      background-color: #004e12;
      color: white;
      border: none;
      border-radius: 4px;
      font-weight: 475;
      cursor: pointer;
    }

    .sprechblase-svg {
      width: 80%;
      height: auto;
      margin: 2rem 0;
      display: block;
      max-width: 600px;
    }


    .sprechblase-svg text{
      font-style: italic;
      font-weight: 525;
      color:#1f1f1f
    }

    .sprechblase-svg image{
       width: auto;
       height: 190px;
    }

    .workarea{
      width: 100%;
      padding: 1rem 2rem;
      background-color: rgb(255, 255, 255);
      border-radius: 8px;
    }

    .absatz{
        margin-left: 0.7em;
        line-height: 1.25em;
    }

    .SVG-section{
      max-width: 800px;
      width: 98%;
      display: flex; 
      justify-content: center; 
    }

    /* --------- HEADER ----------- */
    .header {
        position: sticky;
        width: 100%;
        max-width: 100%;
        margin: auto;
        top: 0;
        z-index: 100;
        background-color: rgba(29, 250, 106, 0.8);
        display: flex;
        align-items: center;
        padding: 1rem 2rem;
        border-bottom: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        backdrop-filter: blur(4px);
        border-radius: 8px;
    }
    .headerLine{
      display: flex;
      align-items: center;
      width: 100%;
      padding: 5px 5px;
    }
    .header img {
        height: 45px;
        width: auto;
        border-radius: 4px;
        margin: 5px 15px;
    }
    .KontaktCall {
        cursor: pointer;
        border: dashed 2px rgb(156, 155, 155);
    }
    .KontaktCallLimited{
      max-height: 2.5em;
      width: auto;
    }

    .header .title {
        font-size: 1.4rem;
        letter-spacing: 0.2em;
        font-weight: 450;
        color: #202020;
    }

    .legalText{
        text-align: left;
        font-size: 0.8rem;
        line-height: 1;
        font-style: italic;
        color:rgba(31, 31, 31, 0.8)
    }


  .sparring-container {
    margin: 15px 10px;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .sparring-container img {
    
    max-width: 175px;
    height: auto;
    flex-shrink: 0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.7);
    cursor: pointer;
  }

  .sparring-text {
    flex: 1;
    letter-spacing: 0.05em;
    font-size: 1.15rem;
    line-height: 1.4em;
  }

  .book-container {
    margin: 15px 10px;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .book-container img {
    
    max-width: 175px;
    height: auto;
    flex-shrink: 0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.7);
    cursor: pointer;
  }

  .book-text {
    flex: 1;
    letter-spacing: 0.05em;
    font-size: 1.15rem;
    line-height: 1.4em;
  }

    /* ---------------- FOOTER -----------*/
    footer {
        max-width: 1000px;
        margin: 0.2rem auto 1rem auto;  
        padding: 1rem 2rem;
        background-color: #e0dedeee;  
        color: #272727;
        font-size: 0.9rem;
        text-align: center;
        box-shadow: 0 0 10px rgba(0,0,0,0.04);
        border-radius: 8px;
    }   
    footer a {
        color: #204020;
        text-decoration: none;
        margin: 0 0.5rem;
    }

    footer a:hover {
        text-decoration: underline;
    }

    

    @media (max-width: 600px) {
      body {
        padding: 0.5rem;
      }
      
      .workarea{
        padding: 5px;
      }
      .header{
        padding: 1rem 0.4rem;
        max-width: 100%;
      }
      .header .title {
        letter-spacing: 0.1em;
        margin-right: 8px;
      }

      .header img {
        margin: 5px 8px;
      }
      .sprechblase-svg {
        width: 98%;
        max-width: 500px;
      }
      .sparring-container {
        flex-direction: column;
        align-items: flex-start;
      }

      .sparring-container img {
        max-width: 100%;
      }
      .sparring-text{
        border-top: 10px;
      }
      .book-container {
        flex-direction: column;
        align-items: flex-start;
      }

      .book-container img {
        max-width: 100%;
      }
      .book-text{
        border-top: 10px;
      }

    }