.wrapper{
    display: block;   /* kein Flex */
    height: auto;
    padding: 10px;
    }
    .wrapper .container{ 
    margin: 0 auto; 
    }
    :root{ --panel:#1b1f27; --muted:#9aa1ad; }

    .container {
    text-align: left;
    }

    /* --- Vorschau-Bereich --- */
    #iv-wrap{ max-width:720px; margin:0 auto; }         /* Größe der Vorschau */
    #iv-card{
      position:relative; background:var(--panel); border:1px solid #2f3441; border-radius:14px; overflow:hidden;
      aspect-ratio:16/9; display:grid; place-items:center; cursor:pointer;
    }

    /*#iv-canvas{ width:100%; height:100%; display:block; object-fit:cover; background:#0b0d11; } */
        
    #iv-card{
    position: relative;
    background: var(--panel);
    border: 1px solid #2f3441;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16/9;
    display: grid;
    place-items: center;
    cursor: pointer;
    }

    #iv-poster{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #0b0d11;
    }
    
    #iv-play{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      display:inline-grid; place-items:center; width:80px; height:80px; border-radius:999px;
      background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.25);
      transition:transform .15s ease, background-color .15s ease, border-color .15s ease;
      pointer-events:none;
    }
    #iv-play{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color: var(--accent-clr);   /* steuert Kreis + Dreieck */
    pointer-events:none;        /* Klick geht an #iv-card */
    z-index:2;                  /* sicher über dem Canvas */
    }
    #iv-card:hover #iv-play{ transform:translate(-50%,-50%) scale(1.06); background:rgba(0,0,0,.55); border-color:rgba(255,255,255,.35); }
    #iv-tri{
      width:0; height:0; border-left:26px solid var(--accent);
      border-top:16px solid transparent; border-bottom:16px solid transparent; margin-left:5px;
    }
    #iv-note{ color:var(--muted); font-size:12px; margin-top:10px; }

    /* --- Modal-Overlay (IDs = keine Konflikte) --- */
    #iv-overlay{
      position:fixed; inset:0; display:none; align-items:center; justify-content:center;
      padding:24px; background:rgba(0,0,0,.75); z-index:9999; box-sizing:border-box;
    }
    #iv-overlay[data-open="1"]{ display:flex; }         /* Toggle über data-open */

    #iv-content{
      width:100%; max-width:min(1200px, calc(100vw - 48px));  /* 48px = 2*24px Padding */
      margin:0 auto; display:flex; flex-direction:column; gap:10px; box-sizing:border-box;
    }
    #iv-box{
      position:relative; width:100%; aspect-ratio:16/9; background:#000;
      border-radius:12px; overflow:hidden; border:1px solid #2f3441; box-shadow:0 10px 40px rgba(0,0,0,.6);
    }
    #iv-video{ display:block; width:100%; height:100%; background:#000; }

    #iv-actions{ width:100%; display:flex; justify-content:flex-end; padding-top:10px; box-sizing:border-box; }
    #iv-close{
      height:42px; min-width:120px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center;
      background:transparent; color:var(--text); border:1px solid var(--accent-clr); border-radius:10px; cursor:pointer;
    }

    /* info text */
    /* -------- Single-column info layout (dark) -------- */

    .info-stack{
      max-width: 820px;
      margin: 28px auto 0;
      text-align: left;
      color: var(--text, #e6e7eb);
    }

    .hero-title{
      font-size: clamp(20px, 2.6vw, 28px);
      line-height: 1.2;
      margin: 0 0 6px 0;
      color: var(--text, #e6e7eb);
    }

    .hero-subtitle{
      font-size: clamp(14px, 2.2vw, 18px);
      color: var(--secondary-text-clr, #9aa1ad);
      margin: 0 0 18px 0;
    }

    .section-head{
      font-size: clamp(18px, 2.4vw, 22px);
      color: var( --accent-clr) !important; 
      margin: 22px 0 12px 0;
      padding-top: 6px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }

    .feature-block{
      background: rgba(255,255,255,0.03);
      border: 1px solid #2f3441;
      border-radius: 12px;
      padding: 16px 16px;
      margin: 12px 0;
    }

    .feature-block h3{
      margin: 0 0 6px 0;
      font-size: clamp(16px, 2.2vw, 18px);
      color: var(--text, #e6e7eb);
      letter-spacing: .2px;
    }

    .feature-block p{
      margin: 0;
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--secondary-text-clr, #9aa1ad);
    }

    /* Spacing zum Video-Block darüber */
    #iv-wrap{ margin-bottom: 22px; }

    /* Mobile Feinschliff */
    @media (max-width: 480px){
      .container{
            margin-top:20px;
            border-radius: 10px;
            padding: 10px 10px 10px 10px;
            width: 90%;
       }
      .info-stack{ margin-top: 20px; padding: 0 2px; }
      .feature-block{ padding: 14px 12px; }

    }

    /* Überschrift mit Icon */
    .it{
      display:flex;
      align-items:center;
      gap:.6rem;
      margin:22px 0 8px;
      font-weight:600;
      color: var(--accent-clr) !important;
    }
    .section-head, .it {
      overflow-wrap: break-word;
      hyphens: auto;
    }

    /* Icon-Kachel */
    .it-ico{
      display:inline-grid;
      place-items:center;
      width:28px; height:28px;
      border-radius:8px;
      background:rgba(255,255,255,0.06);
      border:1px solid rgba(255,255,255,0.10);
      color: var(--accent-clr, #66d9ef); /* steuert die Linienfarbe */
    }

    /* SVG innen skaliert weich mit */
    .it-ico svg{
      width:18px; height:18px;
    }

    /* Optional: runde Icons */
    .it-ico.round{ border-radius:999px; }

    /* Optional kleiner */
    .it.sm { font-size: .95em; }
    .it.sm .it-ico { width:24px; height:24px; }
    .it.sm .it-ico svg { width:16px; height:16px; }