/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 12 2025 | 10:40:42 */
  #eb-band {

    --lava: var(--lava, #fa681f);
    --lava-08: var(--lava-08, rgba(250, 104, 31, .08));
    --lava-12: var(--lava-12, rgba(250, 104, 31, .12));
    --lava-16: var(--lava-16, rgba(250, 104, 31, .16));
    --lava-22: var(--lava-22, rgba(250, 104, 31, .22));
    --gold: var(--gold, #ffe392);
    --gold-08: var(--gold-08, rgba(255, 227, 146, .08));
    --ink: var(--ink, #e8eef7);
    --ink-2: var(--ink-2, #c9d1d9);

    /* Metallische Gradienten */
    --metal-1: #e3eaee;
    --metal-2: #cfd6e3;
    --metal-3: #7b8890;

    /* Lokale Farben */
    --border: #232a3b;
    --panel: #0f1421;
    --panel2: #101523;

    /* Design Tokens */
    --white-05: var(--white-05, rgba(255, 255, 255, .05));
    --white-08: var(--white-08, rgba(255, 255, 255, .08));
    --white-12: var(--white-12, rgba(255, 255, 255, .12));
    --black-35: var(--black-35, rgba(0, 0, 0, .35));
    --black-45: var(--black-45, rgba(0, 0, 0, .45));

    /* Shadows */
    --shadow-md: var(--shadow-md, 0 12px 28px rgba(0, 0, 0, .35));
    --shadow-lg: var(--shadow-lg, 0 18px 48px rgba(0, 0, 0, .55));
    --shadow-card: var(--shadow-card, 0 22px 38px rgba(0, 0, 0, .35));

    /* Transitions */
    --transition-fast: var(--transition-fast, .16s ease);
    --transition-base: var(--transition-base, .2s ease);
    --transition-smooth: var(--transition-smooth, .25s ease);

    /* Border Radius */
    --radius-sm: var(--radius-sm, 8px);
    --radius-md: var(--radius-md, 10px);
    --radius-lg: var(--radius-lg, 12px);
    --radius-xl: var(--radius-xl, 14px);
    --radius-2xl: var(--radius-2xl, 16px);

    /* Z-Index */
    --z-base: var(--z-base, 1);
    --z-content: var(--z-content, 2);
    --z-overlay: var(--z-overlay, 999);

    font-family: var(--font-sans, Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    color: var(--ink);
    background:
      radial-gradient(1400px 760px at 85% -20%, var(--lava-08), transparent 70%),
      radial-gradient(1200px 680px at 20% 120%, var(--gold-08), transparent 60%),
      linear-gradient(180deg, #090b12, #0b0c11);
    padding: clamp(36px, 8vw, 64px) 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  #eb-band .eb-band__wrap {
    width: min(1320px, 92vw);
    margin-inline: auto;
    display: grid;
    gap: clamp(22px, 4vw, 32px);
  }

  #eb-band .eb-band__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
  }



  #eb-band .eb-band__grid {
    display: grid;
    justify-items: center;
    justify-content: center;
    gap: clamp(20px, 3vw, 26px);
    grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  }

  #eb-band .eb-card {
    width: 100%;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid var(--border);
    background:
      radial-gradient(120% 120% at 100% 0, rgba(58, 160, 255, .05), transparent 60%),
      radial-gradient(120% 120% at 0 100%, var(--lava-08), transparent 60%),
      linear-gradient(180deg, #11172a, #0c1220);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-fast), border-color var(--transition-base), box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  #eb-band .eb-card:focus-within,
  #eb-band .eb-card:hover {
    border-color: var(--lava);
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 18px 40px var(--lava-16);
  }

  #eb-band .eb-card:focus-within {
    outline: 3px solid var(--lava);
    outline-offset: 4px;
    box-shadow: 0 0 0 7px var(--lava-16), 0 18px 40px var(--black-45);
  }

  #eb-band .eb-card__fig {
    margin: 0;
    position: relative;
    height: clamp(260px, 36vw, 420px);
    background: #0c101a;
    overflow: hidden;
  }

  #eb-band .eb-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform var(--transition-smooth);
    will-change: transform;
    transform: translateZ(0);
  }

  #eb-band .eb-card:hover .eb-card__img {
    transform: scale(1.02) translateZ(0);
  }

  #eb-band .eb-card__roleBadge {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: var(--z-content);
    padding: .36rem .6rem;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #171f32, #0f1525);
    border: 1px solid var(--white-08);
    color: var(--gold);
    font: 800 11px/1 var(--font-sans, Montserrat, system-ui);
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 6px 18px var(--lava-12);
  }

  #eb-band .eb-card__meta {
    padding: 16px;
    text-align: center;
  }

  #eb-band .eb-card__name {
    margin: 0 0 4px;
    font-family: Cinzel, serif;
    font-weight: 900;
    font-size: clamp(18px, 1.6vw, 22px);
    letter-spacing: .04em;
    background: linear-gradient(180deg, var(--m1), var(--m3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  #eb-band .eb-card__role {
    color: var(--lava);
    font-weight: 900;
    font-size: .95rem;
    letter-spacing: .06em;
    text-transform: uppercase;
  }


  /* ============================================
   ACCESSIBILITY UTILITIES
   ============================================ */
  #eb-band .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* Skip Link */
  #eb-band .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--lava);
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0 0 var(--radius-lg) 0;
    z-index: var(--z-overlay);
    font-weight: 700;
    transition: top var(--transition-fast);
  }

  #eb-band .skip-link:focus {
    top: 0;
    outline: 3px solid var(--gold);
    outline-offset: 2px;
  }

  /* ============================================
   RESPONSIVE OPTIMIZATIONS
   ============================================ */
  @media (max-width:980px) {
    #eb-band {
      background: linear-gradient(180deg, #0b0d13, #10131a);
    }

    #eb-band .eb-band__head {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    #eb-band .eb-band__lead {
      text-align: center;
    }
  }

  @media (max-width:640px) {
    #eb-band .eb-card__fig {
      height: clamp(220px, 58vw, 320px);
    }
  }

  /* Mobile: Enhanced Touch Targets */
  @media (max-width:480px) {
    #eb-band .eb-card {
      min-height: 44px;
    }

    #eb-band .eb-card__roleBadge {
      font-size: 10px;
      padding: .32rem .55rem;
    }
  }

  /* Very Small Screens */
  @media (max-width:360px) {
    #eb-band .eb-band__title {
      font-size: clamp(24px, 5vw, 32px);
    }
  }

  /* Landscape Mode */
  @media (max-height:500px) and (orientation:landscape) {
    #eb-band {
      padding: clamp(20px, 4vh, 36px) 0;
    }
  }

  /* Reduced Motion */
  @media (prefers-reduced-motion:reduce) {

    #eb-band *,
    #eb-band *::before,
    #eb-band *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    #eb-band .eb-card:hover {
      transform: none;
    }
  }