/* ===============================
   JMG – Phonk/Gaming/Dev CSS Theme
   =============================== */

/* -------- Fonts -------- */
/* Optionaler Mono-Font für Dev-Vibe */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap');

/* -------- CSS Custom Properties -------- */
:root{
  --bg-0: #07070b;         /* Deep black */
  --bg-1: #0b0c12;         /* Surface */
  --bg-2: #0f111a;         /* Cards */
  --txt-1: #e7e9ee;        /* Main text */
  --txt-2: #a8adbd;        /* Muted */
  --acc-1: #9b5cff;        /* Neon Purple */
  --acc-2: #00e6ff;        /* Cyber Cyan */
  --acc-3: #ff2d95;        /* Magenta */
  --good:  #79ff8f;
  --warn:  #ffd166;
  --bad:   #ff6b6b;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 22px;
  --pad: 16px;
  --pad-lg: 28px;
  --gap: 22px;
  --maxw: 1100px;

  --shadow-soft: 0 10px 30px rgba(0,0,0,.45);
  --shadow-neon: 0 0 10px rgba(155,92,255,.55), 0 0 18px rgba(0,230,255,.35);

  --glow: drop-shadow(0 0 0.4rem var(--acc-1)) drop-shadow(0 0 0.8rem var(--acc-2));

  --grid-color: rgba(255,255,255,.04);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* -------- Reset & Base -------- */
*{ box-sizing: border-box; }
html,body{ height: 100%; }
html{
  scroll-behavior: smooth;
}
body{
  margin: 0;
  color: var(--txt-1);
  font-family: 'Iceland', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(155,92,255,.18), transparent 60%),
    radial-gradient(1000px 600px at -10% 20%, rgba(0,230,255,.14), transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
  overflow-x: hidden;
}

/* Subtle scanlines + grain */
body::before{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 2px, transparent 4px),
    radial-gradient(1000px 600px at 120% 120%, rgba(255,45,149,.08), transparent 60%);
  mix-blend-mode: soft-light;
  opacity: .6;
  z-index: 0;
}

/* Neon grid backdrop (very subtle) */
body::after{
  content:"";
  position: fixed; inset: 0;
  background:
    linear-gradient(transparent 98%, var(--grid-color) 98%),
    linear-gradient(90deg, transparent 98%, var(--grid-color) 98%);
  background-size: 40px 40px;
  opacity: .25;
  pointer-events: none;
  z-index: 0;
}

/* Accessibility */
:focus-visible{
  outline: 2px dashed var(--acc-2);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Scrollbar */
*{ scrollbar-width: thin; scrollbar-color: var(--acc-1) transparent; }
*::-webkit-scrollbar{ width: 10px; height: 10px;}
*::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, var(--acc-1), var(--acc-2)); border-radius: 10px; }
*::-webkit-scrollbar-track{ background: transparent; }

/* -------- Layout Containers -------- */
main{
  position: relative;
  z-index: 1;
}
#profiles{
  max-width: var(--maxw);
  margin: 110px auto 80px;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

/* -------- Header / Navigation -------- */
.main-header{
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(15,17,26,.85), rgba(15,17,26,.55));
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}

.logo h1{
  margin: 0;
  font-size: clamp(22px, 3.5vw, 34px);
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(155,92,255,.7), 0 0 18px rgba(0,230,255,.35);
}

/* Hamburger */
.menu-toggle{
  width: 40px; height: 32px; display: grid; align-items: center; gap: 6px;
  cursor: pointer; padding: 4px; border-radius: 8px;
  transition: background .2s var(--ease);
}
.menu-toggle:hover{ background: rgba(255,255,255,.06); }
.menu-toggle span{
  display: block; height: 2px; background: linear-gradient(90deg, var(--acc-1), var(--acc-2));
  border-radius: 2px; transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.menu-toggle.active span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity: 0; }
.menu-toggle.active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Nav */
.nav-menu{
  position: fixed; top: 64px; right: -105%;
  display: flex; flex-direction: column; gap: 10px;
  width: min(320px, 90vw); height: calc(100vh - 64px);
  padding: 18px;
  background: rgba(12,14,22,.9);
  border-left: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  transition: right .35s var(--ease);
}
.nav-menu a{
  color: var(--txt-1); text-decoration: none;
  padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.nav-menu a:hover{
  color: white;
  transform: translateX(-2px);
  box-shadow: 0 6px 20px rgba(0,230,255,.15);
}
.nav-menu.open{ right: 0; }

/* Ask AI button – highlight */
.nav-menu .ask-ai-btn{
  margin-top: auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(90deg, var(--acc-1), var(--acc-2), var(--acc-3));
  background-blend-mode: overlay, normal;
  color: white; font-weight: 700; letter-spacing: .3px;
  box-shadow: 0 0 18px rgba(155,92,255,.35);
}

/* Desktop nav */
@media (min-width: 900px){
  .menu-toggle{ display: none; }
  .nav-menu{
    position: static; height: auto; width: auto;
    flex-direction: row; gap: 8px; padding: 0; background: transparent; border: 0; backdrop-filter: none;
  }
  .nav-menu a{ background: transparent; border: 1px solid rgba(255,255,255,.08); }
}

/* -------- Cards / Blocks -------- */
.link-block,
.welcome-block{
  position: relative;
  padding: var(--pad-lg);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* Neon border sweep */
.link-block::before,
.welcome-block::before{
  content:"";
  position: absolute; inset: -1px;
  padding: 1px; border-radius: inherit;
  background: conic-gradient(from 0deg, var(--acc-1), var(--acc-2), var(--acc-3), var(--acc-1));

  /* Masking: Safari + Standard */

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-repeat: no-repeat, no-repeat;
        mask-repeat: no-repeat, no-repeat;


  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: border-spin 8s linear infinite;
  opacity: .45;
  pointer-events: none;
}
@keyframes border-spin{
  to { transform: rotate(360deg); }
}

/* Titles */
.section-title{
  margin: 0 0 12px;
  font-size: clamp(18px, 2vw, 22px);
  color: white;
  text-shadow: 0 0 10px rgba(155,92,255,.4);
  letter-spacing: .6px;
}

/* -------- Welcome Block -------- */
#welcome{
  display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center;
}
.welcome-pfp{
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; display: block;
  border: 2px solid rgba(255,255,255,.1);
  box-shadow: 0 0 22px rgba(155,92,255,.35);
  transition: transform .25s var(--ease), filter .25s var(--ease);
  filter: var(--glow);
}
.welcome-pfp:hover{ transform: translateY(-2px) scale(1.03); }

.welcome-text .username{
  margin: 0; font-size: clamp(28px, 4vw, 40px); color: #fff; letter-spacing: .5px;
}
.welcome-text .intro{ margin: 8px 0 0; color: var(--txt-2); line-height: 1.5; }
.about-me-inline h2{ margin: 12px 0 6px; font-size: 18px; color: var(--acc-2); }
.about-me-inline .intro{ margin: 0; }

/* -------- Discord / GitHub Invite Box -------- */
.invite-box{
  display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center;
  padding: 14px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
}
.server-icon{
  width: 72px; height: 72px; border-radius: 12px; object-fit: cover;
  background: #111; border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 20px rgba(0,0,0,.4);
}
.server-info h3{ margin: 0; font-size: 20px; }
.server-info .desc{ margin: 6px 0 10px; color: var(--txt-2); }

.badge-bar{
  display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0;
}
.badge-icon{
  width: 26px; height: 26px; border-radius: 6px;
  filter: var(--glow); box-shadow: 0 0 8px rgba(0,230,255,.25);
}
.icon-rotate{ animation: spin 8s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg);} }

.meta{
  display: flex; gap: 14px; flex-wrap: wrap; color: var(--txt-2); font-size: 13px; margin: 6px 0 10px;
}

/* Tags / Chips */
.tags{ display: flex; flex-wrap: wrap; gap: 8px; }
.tag{
  font-size: 12px; padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.05);
}
.tag.discord{ border-color: rgba(0,230,255,.25); }

/* Buttons */
.join-btn, .nav-menu a.join-btn, .invite-box .join-btn{
  display: inline-block; text-decoration: none;
  margin-top: 10px; color: #fff; font-weight: 700; letter-spacing: .3px;
  padding: 10px 14px; border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(90deg, var(--acc-1), var(--acc-2));
  background-blend-mode: overlay, normal;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 8px 24px rgba(0,230,255,.18);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.join-btn:hover{
  transform: translateY(-1.5px);
  box-shadow: 0 12px 30px rgba(155,92,255,.28);
  filter: brightness(1.05);
}

/* -------- Server Widget -------- */
.discord-widget{
  min-height: 110px; display: grid; place-items: center;
  color: var(--txt-2);
  border-radius: var(--radius);
  border: 1px dashed rgba(255,255,255,.15);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}

/* -------- DevBuddy Ad -------- */
#ad, #feld1{ position: relative; }
.ad-header h3{
  margin: 0 0 10px; color: var(--acc-1); text-shadow: 0 0 8px rgba(155,92,255,.35);
}
.ad-banner{
  width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 22px rgba(155,92,255,.25);
}
.hover-pop{ transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.hover-pop:hover{
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 16px 36px rgba(0,0,0,.45), 0 0 28px rgba(0,230,255,.25);
}

/* -------- Frog Game Block -------- */
#frog p a{
  color: var(--acc-2); text-decoration: underline dotted;
}
#frog p a:hover{ color: var(--acc-1); }

/* -------- Thank You -------- */
#thank-you p{
  margin: 0; color: var(--txt-2);
}

/* -------- Reveal Animations (progressive enhancement) -------- */
/* Standard: sichtbar; wenn <body class="js">, dann animieren */
.reveal{ opacity: 1; transform: none; }
.js .reveal{
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
  will-change: transform, opacity;
}
.js .reveal.is-visible{
  opacity: 1; transform: none; filter: drop-shadow(0 0 20px rgba(0,230,255,.08));
}
@media (prefers-reduced-motion: reduce){
  .js .reveal{ transition: none; }
  .icon-rotate, .link-block::before{ animation: none !important; }
}

/* -------- Responsive Tweaks -------- */
@media (max-width: 640px){
  #profiles{ margin-top: 92px; }
  #welcome{ grid-template-columns: 72px 1fr; }
  .welcome-pfp{ width: 72px; height: 72px; }
  .invite-box{ grid-template-columns: 56px 1fr; }
  .server-icon{ width: 56px; height: 56px; border-radius: 10px; }
}

/* -------- Subtle hover accent on cards -------- */
.link-block:hover, .welcome-block:hover{
  box-shadow: var(--shadow-soft), 0 0 24px rgba(0,230,255,.08);
}

/* -------- Tiny glitch accent on titles -------- */
.section-title{
  position: relative;
  isolation: isolate;
}
.section-title::after{
  content: attr(data-glitch);
  position: absolute; inset: 0;
  color: var(--acc-2);
  mix-blend-mode: screen;
  clip-path: polygon(0 2%, 100% 2%, 100% 20%, 0 20%); 
  transform: translate(1px, -1px);
  opacity: .18;
  pointer-events: none;
}

.link-block:hover,
.welcome-block:hover {
  filter: none !important;
}

.invite-box, .badge-bar {
  transform-style: preserve-3d;
}

.badge-icon:hover {
  transform: translateZ(10px);
  transition: transform 0.3s var(--ease);
}

.discord-widget {
  padding: var(--pad-lg);
  max-width: var(--maxw);
  margin: var(--gap) auto;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-soft);
  display: grid;
  place-items: center;
}

#thank-you {
  margin: var(--gap) auto 2 * var(--gap);
  padding: var(--pad-lg);
}

#thank-you p {
  font-size: 1.1rem;
  text-align: center;
  color: var(--acc-2);
  line-height: 1.5;
}

#thank-you::after {
  content: '';
  display: block;
  height: 40px;
}

.discord-widget {
  /* Klassen von link-block übernehmen */
  position: relative;
  padding: var(--pad-lg);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-soft);
  overflow: hidden;

  /* Tilt-Animation übernehmen */
  --mask: var(--grid-color);
  display: flex;              /* statt grid */
  flex-direction: column;
  justify-content: center;
  height: 100%;               /* gleiche Höhe wie Nachbarn */
}

.discord-widget::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, var(--acc-1), var(--acc-2), var(--acc-3), var(--acc-1));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  animation: border-spin 8s linear infinite;
  opacity: .45;
  pointer-events: none;
}

/* Container für die CTAs */
.cta-container {
  max-width: var(--maxw);
  margin: var(--gap) auto;
  display: grid;
  gap: var(--gap);
  padding: 0 var(--pad);
}

/* Basis-Styling aller CTA-Blöcke */
.cta-block {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--pad-lg);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  gap: 16px;
}

/* Neon-Farb-Varianten */
.cta-neon-blue::before,
.cta-neon-green::before,
.cta-neon-pink::before {
  content: "";
  position: absolute; inset: -1px; padding:1px; border-radius:inherit;
  background: conic-gradient(
    from 0deg, 
    /* Blue */
    var(--acc-2) 0%, var(--acc-1) 33%, var(--acc-2) 66%, var(--acc-3) 100%
    /* adapt colors per class below */
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-repeat: no-repeat, no-repeat;
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  animation: border-spin 8s linear infinite;
  opacity: .5;
  pointer-events: none;
}

.cta-neon-blue::before {
  background: conic-gradient(from 0deg, var(--acc-2), var(--acc-1), var(--acc-2));
}

.cta-neon-green::before {
  background: conic-gradient(from 0deg, #79ff8f, #00e6ff, #79ff8f);
}

.cta-neon-pink::before {
  background: conic-gradient(from 0deg, var(--acc-3), var(--acc-1), var(--acc-3));
}

/* Icon im CTA */
.cta-icon {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  object-fit: contain;
  flex-shrink: 0;
  filter: var(--glow);
}

/* Rotation für Frosch */
.cta-rotate {
  animation: spin 12s linear infinite reverse;
}

/* Inhalt */
.cta-content h3 {
  margin: 0 0 8px;
  color: white;
  font-size: clamp(20px, 2.5vw, 28px);
}

.cta-content p {
  margin: 0 0 12px;
  color: var(--txt-2);
  line-height: 1.4;
}

/* Links/Rechts-Knöpfe */
.cta-links {
  display: flex;
  gap: 12px;
}

.cta-block .join-btn {
  padding: 10px 16px;
  font-size: 0.9rem;
}

/* Thank-You extra Abstand unten */
#thank-you {
  margin-bottom: calc(var(--gap) * 2);
}

/* Discord Widget an CTA-Layout angleichen */
.discord-widget .invite-box {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.cta-icon-large {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: 16px;
  object-fit: contain;
}

#thank-you h3 {
  text-align: center;
  width: 100%;
}

#feld1 {
  flex-direction: column;   /* Bild oben, Text darunter */
  text-align: center;       /* optional: Text zentrieren */
}
#feld1 .cta-content {
  width: 100%;
}

#thank-you {
  text-align: center;
}
#thank-you .cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* -----------------------
   Robust fixes for layout issues shown in screenshot
   Paste at the end of style.css
   ----------------------- */

/* 1) Ensure discord widget and any injected inner wrapper take full width */
#discord-widget,
.discord-widget {
  /* keep card look */
  padding: var(--pad-lg);
  max-width: var(--maxw);
  margin: var(--gap) auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  overflow: visible; /* allow injected children to overflow if necessary */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

/* Force all direct children (including third-party embed wrappers) to fill container */
#discord-widget > * ,
.discord-widget > * {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* If the widget injects an inner .invite-box or similar, make it use full width and proper layout */
#discord-widget .invite-box,
.discord-widget .invite-box {
  width: 100%;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 14px;
  box-sizing: border-box;
}

/* Center the loading text if present */
#discord-widget p,
.discord-widget p {
  text-align: center;
  color: var(--txt-2);
  margin: 0;
}

/* 2) Ensure DevBuddy CTA buttons are centered */
#feld1 { 
  /* keep column layout */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* Ensure cta-content centers its children */
#feld1 .cta-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Make the link-button group center horizontally and wrap on small screens */
.cta-links {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

/* Remove top-margin on the .join-btn inside the cta-links so they line up nicely */
.cta-links .join-btn {
  margin-top: 0 !important;
}

/* 3) Fix thank-you margin syntax & ensure centering */
#thank-you {
  margin: var(--gap) auto calc(var(--gap) * 2);
  padding: var(--pad-lg);
  max-width: var(--maxw);
  text-align: center;
}

#thank-you .cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ===========================
   Make discord widget match other cards exactly
   Paste at end of style.css
   =========================== */

/* 1) Card-styling — exakt wie .link-block / .cta-block */
#discord-widget,
.discord-widget {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--maxw);           /* gleiche Max-Breite wie Rest */
  margin: var(--gap) auto;
  padding: var(--pad-lg);           /* gleiches Innenpadding */
  border-radius: var(--radius-lg); /* gleiche Rundungen */
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

/* 2) Force all direct children / injected wrappers to full width
   (viele embeds erzeugen z.B. <div class="wrapper"> mit eigener Breite) */
#discord-widget > *,
.discord-widget > * {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transform: none !important; /* falls das Embed skaliert */
}

/* 3) Wenn das Embed ein iframe nutzt, mache es responsive und volle Breite.
   Passe die Höhe an, falls du eine bestimmte Höhe erwartest. */
#discord-widget iframe,
.discord-widget iframe {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  border: none !important;
  display: block !important;
  aspect-ratio: 16 / 6; /* optional: Verhältnis anpassen (großes Banner-Style) */
  border-radius: 12px;
}

/* Falls das embed einen inneren .invite-box oder .card-wrapper nutzt, diese ebenfalls strecken */
#discord-widget .invite-box,
.discord-widget .invite-box,
#discord-widget .card-wrapper,
.discord-widget .card-wrapper,
#discord-widget .widget,
.discord-widget .widget {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: var(--pad) !important; /* optional kleines Padding, falls nötig */
  box-sizing: border-box !important;
}

/* 4) Kleiner visueller Abgleich: Innenabstände und Textzentrierung */
#discord-widget .server-info,
.discord-widget .server-info {
  width: 100%;
  color: var(--txt-2);
}

#discord-widget p,
.discord-widget p {
  margin: 0;
  text-align: left; /* oder center, wenn du Text mittig willst */
  color: var(--txt-2);
}

/* 5) Fallback: Falls das Embed per JS einen Inline-style width gesetzt hat */
#discord-widget [style*="width"],
.discord-widget [style*="width"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Optional: für sehr breite Banner (z.B. DevBuddy-Bild darunter) gleiche Innenabstände sicherstellen */
#profiles > .discord-widget,
#profiles > #discord-widget {
  margin-left: auto;
  margin-right: auto;
}