/* ═══════════════════════════════════════════
   Icon-Styles
════════════════════════════════════════════ */
   @font-face {
      font-family: 'Lexend';
      src: url('fonts/Lexend-Regular.woff2') format('woff');
      font-style: normal;
      font-weight: normal;
    }
@font-face {
      font-family: 'Lexend';
      src: url('fonts/Lexend-Bold.woff2') format('woff2');
      font-style: normal;
      font-weight: bold;
    }


    
/* Pfad-Styles aus Icon.svg */
.str0, .str1, .str2 { fill: none; }
.str0, .str1, .str2, .str3 { stroke-linecap: round; stroke-width: 3px; }
.str0, .str1, .str3 { stroke-linejoin: round; }
.str0, .str3 { stroke: #000; }
.str4 { fill: #010101; stroke-width: 3px;}
.str1, .str2 { stroke: #010101;fill: rgb(255, 255, 255); }
.str2, .srt5 { stroke-miterlimit: 10; }
.str5 { fill: #1d1d1b; stroke: #fff; stroke-width: 3px; }
.str3 { fill: rgb(35, 35, 255); }
.str6 { fill: rgb(0, 0, 0); }

/* ── Hover ──────────────────────────────────────────────────────────
   Icon 2: Hover wird per JavaScript gesteuert (mouseenter/leave)
           Nur der Kreis-Hintergrund (str2) wird eingefärbt.
   Icon 3: Hover per CSS – pointer-events auf dem Rect per inline
           style in icons.js auf 'all' gesetzt
   ─────────────────────────────────────────────────────────────────── */

/* Pointer cursor for all SVG anchor buttons */
svg a { cursor: pointer; }

/* Focus */
#hilfe-btn:focus,
#menu-btn:focus { outline: none; }

/* Level-pages use  a:hover > path { fill: … !important }  which hits every
   path inside #hilfe-btn. Lock the ? stroke and dot to their correct fills
   so only the circle background changes on hover. */
#hilfe-btn path.str0 { fill: none !important; }        /* Fragezeichen – kein Fill */
#hilfe-btn path.str6 { fill: #010101 !important; }     /* Punkt – schwarz */

/* Menu-Icon Rect-Hintergrund */
#menu-btn .str6 { fill: #ffffff; }
#menu-btn:hover rect,
#menu-btn:focus-visible rect { fill: rgba(65, 65, 65, 0.7); }


.instructions {
    position: absolute;
    top:25%;
    left: 24%;
    right: 25%;
    margin: 0;
    padding: 0 0 0 1.4em;
    list-style: disc;
    font-family: 'Lexend', sans-serif;
    font-size: 18pt;
    line-height: 1.4;
    color: #000000;
    z-index: 10;
    pointer-events: none;
  }

  .instructions li {
    margin-bottom: 1.3em;  /* Abstand zwischen den Punkten */
}

    /* ── scrollable info panel ── */
    .info-content {
      position: absolute;
      top: 12%;
      left: 25%;
      right: 22%;
      bottom: 3%;
      overflow: hidden auto;
      z-index: 10;
      padding-right: 1.5em;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }

    /* ── shared text class ── */
    .info-text {
      font-family: 'Lexend', sans-serif;
      color: #1a1a1a;
      line-height: 1.4;
    }

    h1.info-text {
      font-size: 25pt;
      font-weight: 700;
      margin: 0 0 0.6em 0;
      display: flex;
      text-align: center;
      align-items: center;
      gap: 0.3em;
      flex-wrap: wrap;
    }

    p.info-text {
      font-size: 18pt;
      margin: 0 0 0.5em 0;
    }

    /* ── "WCAG 1.4.10" clickable text + icon ── */
    .wcag-link {
      display: inline-flex;
      align-items: right;
      font-size: 15pt;
      gap: 0.4em;
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .wcag-link:hover,
    .wcag-link:focus {
      color: #333;
      text-decoration-thickness: 3px;
    }

    .wcag-link:focus {
      outline: 2px solid #333;
      outline-offset: 3px;
      border-radius: 2px;
    }


   .start-content {
      position: absolute;
      top: 12%;
      left: 27%;
      right: 25%;
      bottom: 3%;
      overflow: hidden auto;
      z-index: 10;
      padding-right: 1.5em;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }

     .h-content {
      position: absolute;
      top: 12%;
      left: 35%;
      right: 27%;
      bottom: 3%;
      overflow: hidden auto;
      z-index: 10;
      padding-right: 1.5em;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }

  

    /* ── shared text class ── */
    .start-text {
      font-family: 'Lexend', sans-serif;
      color: #1a1a1a;
      line-height: 1.4;
    }

    h1.start-text {
      font-size: 4vw;
      font-weight: 700;
      margin: 0 0 0.6em 0;
      display: flex;
      text-align: center;
      align-items: center;
      gap: 0.6em;
      flex-wrap: wrap;
    }

    p.start-text {
      font-size: 1.7vw;
      margin: 0 0 1.5em 0;
      
    }