/* Redirect Overlay Styles */
.frd-overlay{position:fixed;inset:0;background:radial-gradient(rgba(21,21,21,1) 0%, rgba(0,0,0,.85) 100%);z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px}
.frd-panel{width:100%;max-width:500px;background:#121212;border:1px solid #252525;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.4);position:relative;color:#e6e9ef}
.frd-footer{padding:18px 24px 24px;display:flex;flex-direction:column;gap:10px}
.frd-footer .frd-btn{width:100%}
.frd-content{padding:18px 24px 8px}
.frd-item{display:flex;gap:1.0vw;padding:12px 0}
.frd-content .frd-item > div > span{display:block;color:#6e7787}
.frd-close{position:absolute;top:0px;right:0px;width:36px;height:36px;border:none;border-radius:18px;background:transparent;color:#9aa4b2;cursor:pointer}
.frd-btn{position:relative;overflow:hidden;border-radius:.375em;padding:12px 16px;font-weight:700;cursor:pointer;transition:filter .2s ease, all .2s ease, color .2s ease;border:0;text-align:center; font-size: small !important;}
.frd-btn:hover{filter:brightness(1.05); box-shadow:0 0 15px #929292; transition: box-shadow .2s ease; color:#000}
.frd-btn--primary{background:#929292;color:#000; font-family: var(--wp--preset--font-family--body); font-weight:100;}
.frd-btn--secondary{background:transparent;color:#e6e9ef;border:1px solid #252525;font-weight:600;padding:10px 16px}
.frd-btn--secondary:hover{background:#1a1a1a;color:#e6e9ef;border-color:#2e2e2e;box-shadow:0 0 15px rgba(255,255,255,0.06);transition:all .2s ease}
.frd-flash-slide::before{content:"";position:absolute;inset:0;left:-120%;width:120%;background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);transform:skewX(-20deg);transition:left .35s ease}
.frd-flash-slide:hover::before{left:120%}

.frd-error_redirect, .frd-error_redirect a{font-weight: 100 !important;}
.frd-error-redborder {
  width: 100%;
  max-width: 500px;
  background: #121212;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  position: relative;
  color: #252525;
  z-index: 0;
  overflow: hidden;
}

/* animierter Border */
.frd-error-redborder {
  width: 100%;
  max-width: 500px;
  background: #121212;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  position: relative;
  color: #252525;
  border: 1px solid #252525;
  animation: borderColorShift 4s ease-in-out infinite alternate;
}

@keyframes borderColorShift {
  0% {
    border-color: #252525;
  }
  100% {
    border-color: #990000;
  }
}

.frd-header{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 24px;margin-top:.8vw}
.frd-logos{display:flex;align-items:center;gap:14px;margin-top:.8vw}
.frd-logo-tile{width:2.5vw;height:2.5vw;border-radius:.375em;border:1px solid #252525;display:flex;align-items:center;justify-content:center;color:#e6e9ef}
.frd-logo-tile--bg{background-size:100%;background-position:center;background-repeat:no-repeat}
.frd-logo-svg{width:70%;height:70%;object-fit:contain;display:block;filter: var(--wp--preset--duotone--secondary)}

.frd-dots{display:flex;gap:5px;align-items:center;justify-content:center}
.frd-dot{width:6px;height:6px;background:#e6e9ef;border-radius:50%;opacity:.7;display:inline-block;transform-origin:center;animation:frd-dot-wobble 1.2s ease-in-out infinite}
.frd-dots .frd-dot:nth-child(1){animation-delay:0s}
.frd-dots .frd-dot:nth-child(2){animation-delay:.15s}
.frd-dots .frd-dot:nth-child(3){animation-delay:.30s}
@keyframes frd-dot-wobble { 0%, 80%, 100% { transform: scale(1); } 20% { transform: scale(1.35); } 40% { transform: scale(1); } 60% { transform: scale(1.2); } }

/* Close-Button Hover-Effekt: Farbe + doppelte Rotation */
.frd-close{transition: color .2s ease, transform .45s ease; transform: rotate(0deg); transform-origin:50% 50%; will-change: transform}
.frd-close:hover{color:#990000 !important; transform: rotate(720deg)}

/* Icon-Styling in den Items */
.frd-item .frd-icon{flex:0 0 clamp(18px,1.6vw,28px);width:clamp(18px,1.6vw,28px);height:clamp(18px,1.6vw,28px);display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#e9e5c7}
.frd-item .frd-icon svg{width:clamp(18px,1.6vw,28px);height:clamp(18px,1.6vw,28px);display:block;stroke:currentColor;filter: var(--wp--preset--duotone--secondary)}
.frd-item .frd-icon img{width:clamp(18px,1.6vw,28px);height:clamp(18px,1.6vw,28px);display:block;filter: var(--wp--preset--duotone--secondary)}

/* Vertikale Zentrierung von Icon und Text unabhängig von Textzeilenhöhe */
.frd-item{align-items:center}

/* Box um die Liste und Trennlinien zwischen Abschnitten */
.frd-content{border:1px solid #2a2a2a;border-radius:12px;overflow:hidden;padding:6px 0;margin:10px 12px}

/* seitlicher Einzug und feinerer Kontrast für Trenner (mit Abstand zur Außenlinie) */
.frd-item{align-items:center; padding-left:1vw !important; padding-right:1vw !important; position:relative}
.frd-item + .frd-item{border-top:0}
.frd-item + .frd-item::before{content:"";position:absolute;left:12px;right:12px;top:0;height:1px;background:rgba(255,255,255,.08)}

.frd-titlewrap{text-align:center}
.frd-title{font-size:var(--wp--preset--font-size--large);color:var(--wp--preset--color--body);font-weight:800;line-height:1.2;text-transform:uppercase;margin-top:1vw}
.frd-sub{font-size:12px;color:#9aa4b2}

/* Überschriften in den Items */
.frd-item b{font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--body);font-weight:100}

/* Beschreibungen in den Items: Overrides gegen Inline-Styles */
.frd-item span{color:#6e7787 !important;font-weight:100 !important;font-size:var(--wp--preset--font-size--x-small)}

/* Countdown: Sekunden hervorheben */
.frd-count #frdCount{color:#fff;font-size:var(--wp--preset--font-size--x-small);}
.frd-count-text{font-size:var(--wp--preset--font-size--x-small); text-align: center;}
.frd-count-bg{text-align: center;}

/* Responsive: Tablet */
@media (max-width: 1024px) {
  .frd-panel{max-width:560px}
  .frd-content{padding:16px 18px 6px}
  .frd-footer{padding:16px 18px 18px}
  .frd-item{gap:12px}
  .frd-logo-tile{width:42px;height:42px}
  .frd-logo-svg{width:70%;height:70%}
  .frd-close{width:40px;height:40px}
}

/* Error-only Animation: Discord-Logo -> rotes X */
.frd-error-redborder .frd-logo-tile[aria-label="Discord"]{position:relative}
.frd-error-redborder .frd-logo-tile[aria-label="Discord"] .frd-logo-svg{animation:frdDiscordFadeOut 1.2s ease forwards}
.frd-error-redborder .frd-logo-tile[aria-label="Discord"]::before,
.frd-error-redborder .frd-logo-tile[aria-label="Discord"]::after{
  content:""; position:absolute; left:15%; right:15%; top:50%; height:2px; background:#990000; border-radius:2px; opacity:0; transform-origin:50% 50%;
}
.frd-error-redborder .frd-logo-tile[aria-label="Discord"]::before{transform:rotate(45deg); animation: frdXFadeIn 1.2s ease forwards .2s}
.frd-error-redborder .frd-logo-tile[aria-label="Discord"]::after{transform:rotate(-45deg); animation: frdXFadeIn 1.2s ease forwards .2s}

@keyframes frdDiscordFadeOut{0%{opacity:1; transform:scale(1)} 60%{opacity:.15; transform:scale(.94)} 100%{opacity:0.15; transform:scale(.9)}}
@keyframes frdXFadeIn{0%{opacity:0; transform:scale(.8) rotate(var(--rot,0))} 60%{opacity:.75} 100%{opacity:1}}

/* Responsive: Mobile */
@media (max-width: 768px) {
  .frd-overlay{padding:14px}
  .frd-panel{max-width:92vw;border-radius:12px}
  .frd-logos{gap:10px}
  .frd-logo-tile{width:38px;height:38px}
  .frd-item{gap:10px;padding:10px 0}
  .frd-content{padding:14px 16px 6px}
  .frd-footer{padding:14px 16px 16px}
  .frd-btn{width:100%;padding:12px 14px}
  .frd-close{width:44px;height:44px}
  .frd-title{font-size:clamp(16px, 5vw, 20px)}
  .frd-sub{font-size:11px}
  .frd-item .frd-icon{width:24px;height:24px;flex:0 0 24px}
  .frd-item .frd-icon img{width:24px;height:24px}
}