/* ── Discord-Webhook: Landingpage /tools/discord-webhook + Abo-Widget (auch im Profil-Tab) + Tools-Hub ──
   Layout "B · Karten-Raster" (09.09.2026): Karten/Sektionen nutzen die Hub-Klassen aus content-hub.css. */

.discord-page { width: 100%; padding: 0 0 2.5rem; }
.tools-page { padding: 0 0 2.5rem; }

/* Hero: bestehendes page-hero, Discord-Akzent nur im Glow und Logo */
.discord-hero { border-color: rgba(88, 101, 242, 0.35); }
.discord-hero .page-hero__glow { background: radial-gradient(60% 190% at 88% 50%, rgba(88, 101, 242, 0.32) 0%, transparent 68%); }
.discord-hero__logo { position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; background: #5865f2; display: grid; place-items: center; box-shadow: 0 0 24px rgba(88, 101, 242, 0.45); }
.discord-hero__logo svg { width: 34px; height: 34px; fill: #fff; }

/* GEO: zitierfaehiger Absatz + Fakten-Leiste im Konsolen-Look */
.discord-intro { margin: -0.5rem 0 1rem; font-size: 0.98rem; line-height: 1.55; color: var(--text-secondary); }
.discord-facts {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.6rem 1.25rem;
    margin: 0 0 2.25rem; padding: 0.85rem 1rem;
    background: linear-gradient(180deg, #16181f 0%, #101218 100%);
    border: 1px solid rgba(196, 162, 78, 0.22); border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 6px 20px rgba(0, 0, 0, 0.3);
}
.discord-facts__item { min-width: 0; }
.discord-facts dt { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dimmed); margin: 0 0 0.15rem; }
.discord-facts dd { margin: 0; font-size: 0.88rem; line-height: 1.4; color: var(--text-primary); }

/* Inhalts-Karten (chub-card) */
.discord-card__badge { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 4px; background: rgba(10, 10, 15, 0.82); border: 1px solid currentColor; }
.discord-card--news .discord-card__badge { color: #c4a24e; }
.discord-card--guide .discord-card__badge { color: #a78bfa; }
.discord-card--build .discord-card__badge { color: #60a5fa; }
.discord-card--bluepost .discord-card__badge { color: #38bdf8; }
.discord-card__fallback { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(0, 116, 224, 0.85); }
.discord-card__fallback svg { width: 44px; height: 44px; }
.discord-card .chub-card__title { font-size: 0.94rem; }

/* Schritte als Konsolen-Leiste */
.discord-steps {
    list-style: none; margin: 0; padding: 1rem 1.25rem;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;
    background: linear-gradient(180deg, #16181f 0%, #101218 100%);
    border: 1px solid rgba(196, 162, 78, 0.22); border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 6px 20px rgba(0, 0, 0, 0.3);
}
.discord-step { display: grid; grid-template-columns: 44px 1fr; gap: 0.75rem; padding-right: 1rem; border-right: 1px solid var(--border-color, #2a2a35); }
.discord-step:last-child { border-right: none; padding-right: 0; }
.discord-step__num { font-family: var(--font-heading); font-size: 1.7rem; line-height: 1; color: var(--gold); text-shadow: 0 0 18px rgba(165, 9, 5, 0.35); }
.discord-step__title { margin: 0 0 0.2rem; font-size: 0.98rem; font-weight: 700; color: var(--text-primary); }
.discord-step__text { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-secondary); }
.discord-step kbd { font: inherit; font-size: 0.85em; padding: 0.05rem 0.4rem; border: 1px solid var(--border-color, #2a2a35); border-radius: 4px; background: var(--bg-input); color: var(--text-primary); white-space: nowrap; }

/* Zwei Beispiel-Beitraege nebeneinander, Verbinden-Panel darunter in voller Breite */
.discord-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.discord-login { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.discord-connect { background: var(--bg-panel); border: 1px solid var(--border-panel, #252830); border-radius: 8px; padding: 1.25rem 1.5rem; }
.discord-login p { margin: 0; color: var(--text-secondary); line-height: 1.5; max-width: 70ch; }
.discord-login__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Tools-Hub: Hero + Karte */
.tools-hero { border-color: rgba(196, 162, 78, 0.28); }
.tools-hero__logo { position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; background: radial-gradient(120% 120% at 30% 20%, #23242c 0%, #15161b 100%); border: 1px solid rgba(196, 162, 78, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 14px rgba(0, 0, 0, 0.35); display: grid; place-items: center; color: #c4a24e; }
.tools-hero__logo svg { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(196, 162, 78, 0.35)); }
.tools-hero__logo img { width: 44px; height: 44px; display: block; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); }
.discord-facts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Tools-Hub-Karte */
.tools-card__thumb { display: grid; place-items: center; }
.tools-card__thumb--discord { background: linear-gradient(135deg, #1b1d2b 0%, #0f1017 100%); color: #5865f2; }
.tools-card__thumb--discord svg { width: 56px; height: 56px; }

/* Embed-Vorschau: nachgebauter Discord-Chat — Masse und Farben nach dem echten Discord-Client */
.discord-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dchat { background: #313338; border-radius: 10px; padding: 0.85rem 1rem 1rem; color: #dbdee1; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.375; }
.dchat__msg { display: grid; grid-template-columns: 40px 1fr; gap: 1rem; }
.dchat__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #0a0a0f; }
.dchat__content { min-width: 0; }
.dchat__head { display: flex; align-items: center; gap: 0.35rem; margin: 0 0 0.35rem; line-height: 1.375; }
.dchat__name { font-weight: 500; color: #f2f3f5; }
.dchat__bot { font-size: 0.625rem; font-weight: 500; background: #5865f2; color: #fff; padding: 0 0.275rem; height: 0.955rem; line-height: 0.955rem; border-radius: 0.1875rem; text-transform: uppercase; }
.dchat__time { font-size: 0.75rem; color: #949ba4; }
.dembed { background: #2b2d31; border-left: 4px solid #5865f2; border-radius: 4px; padding: 0.5rem 1rem 1rem 0.75rem; max-width: 432px; display: grid; gap: 0.5rem; }
.dembed--news { border-left-color: #c4a24e; }
.dembed--guide { border-left-color: #8b5cf6; }
.dembed--build { border-left-color: #3b82f6; }
.dembed--bluepost { border-left-color: #0074e0; }
.dembed__author { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: #f2f3f5; }
.dembed__author img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #0a0a0f; }
.dembed__title { display: block; color: #00a8fc; font-weight: 600; font-size: 1rem; line-height: 1.375; text-decoration: none; }
.dembed__title:hover { text-decoration: underline; }
.dembed__desc { font-size: 0.875rem; line-height: 1.125rem; color: #dbdee1; margin: 0; white-space: pre-line; }
.dembed__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
.dembed__field b { display: block; font-size: 0.875rem; font-weight: 600; color: #f2f3f5; margin: 0 0 0.125rem; }
.dembed__field span { font-size: 0.875rem; line-height: 1.125rem; color: #dbdee1; }
.dembed__thumb { justify-self: end; width: 80px; height: 80px; border-radius: 4px; object-fit: cover; }
.dembed__img { border-radius: 4px; overflow: hidden; max-width: 400px; }
.dembed__img img { display: block; width: 100%; height: auto; }
.dembed__footer { font-size: 0.75rem; font-weight: 500; line-height: 1rem; color: #dbdee1; }
.dembed__dot { margin: 0 0.1rem; }

/* Abo-Widget (Landingpage + Profil): Liste + "Server verbinden"-Button */
.dsub__msg { padding: 0.65rem 0.9rem; border-radius: 4px; margin: 0 0 1rem; font-size: 0.92rem; border: 1px solid transparent; }
.dsub__msg--ok { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.4); color: #7ee2a3; }
.dsub__msg--error { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); color: #f5a3a3; }
.dsub__msg--info { background: rgba(88, 101, 242, 0.12); border-color: rgba(88, 101, 242, 0.4); }
.dsub__h { font-size: 1.05rem; margin: 0; }
.dsub__list-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; flex-wrap: wrap; }
.dsub__count { font-size: 0.8rem; color: var(--text-dimmed); }
.dsub__add { display: inline-flex; align-items: center; gap: 0.45rem; border-radius: 4px; }
.dsub__add:disabled { opacity: 0.45; cursor: not-allowed; filter: saturate(0.4); }
.dsub__empty { padding: 1.25rem; border: 1px dashed var(--border-color, #2a2a35); border-radius: 4px; text-align: center; }
.dsub__empty p { margin: 0; }
.dsub__notice { color: var(--text-secondary); margin: 0.5rem 0 0; }

.dsub__card { border: 1px solid var(--border-color, #2a2a35); border-radius: 4px; padding: 0.85rem 1rem; margin-bottom: 0.6rem; background: #15161d; }
.dsub__card--off { opacity: 0.75; }
.dsub__card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.dsub__card-title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dsub__card-id { font-size: 0.78rem; color: var(--text-dimmed); font-family: ui-monospace, Menlo, Consolas, monospace; }
.dsub__status { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dsub__status--on { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.7); }
.dsub__status--off { background: #7a7870; }
.dsub__card-state { font-size: 0.78rem; color: var(--text-secondary); letter-spacing: 0.03em; text-transform: uppercase; }
.dsub__card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; margin: 0.5rem 0 0.65rem; font-size: 0.84rem; color: var(--text-secondary); }
.dsub__chips { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }
.dsub__chip { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; padding: 0.15rem 0.5rem; border-radius: 3px; border: 1px solid var(--border-color, #2a2a35); color: var(--text-primary); background: #1e1f27; }
.dsub__chip--news { border-color: rgba(196, 162, 78, 0.5); }
.dsub__chip--guides { border-color: rgba(139, 92, 246, 0.5); }
.dsub__chip--builds { border-color: rgba(59, 130, 246, 0.5); }
.dsub__chip--blueposts { border-color: rgba(0, 116, 224, 0.5); }
.dsub__err { color: #f5a3a3; }
.dsub__card-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dsub__card-actions .btn { border-radius: 4px; }
.dsub__danger { color: #f5a3a3; }

/* Modal (Anlegen/Bearbeiten) — Look des Titel-Baukastens (.tb in build-editor.css) */
body.modal-noscroll { overflow: hidden; }
.dsm { max-width: 640px; height: auto; max-height: 90vh; border-radius: 4px; }
.dsm__header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: 52px; padding: 0 16px; border-bottom: 1px solid #2a2b35; background: #1e1f27; border-radius: 4px 4px 0 0;
}
.dsm__title { margin: 0; font-family: var(--font-heading); font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary); }
.dsm__close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #777; cursor: pointer; border-radius: 2px; }
.dsm__close:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.dsm__body { flex: 1; min-height: 0; overflow-y: auto; }
.dsm__form { display: flex; flex-direction: column; }
.dsm__section { padding: 14px 16px; border-bottom: 1px solid #2a2b35; }
.dsm__section:last-child { border-bottom: none; }
.dsm__section:first-child { background: #15161d; }
.dsm__section--row { display: grid; grid-template-columns: 1fr auto; gap: 16px; }
.dsm__col { min-width: 0; }
.dsm__section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dimmed); margin-bottom: 8px; }
.dsm__hint { display: block; font-size: 12px; color: var(--text-dimmed); margin-top: 6px; }
.dsm__input {
    width: 100%; height: 40px; padding: 0 12px; box-sizing: border-box; background: #1e1f27; border: 1px solid #2a2b35; border-radius: 4px;
    color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none; transition: border-color 0.15s;
}
.dsm__input:focus { border-color: rgba(88, 101, 242, 0.8); }
.dsm__input::placeholder { color: #555; }
.dsm__url-locked { display: flex; flex-direction: column; gap: 4px; }
.dsm__url-locked code { font-size: 12px; color: var(--text-secondary); background: #1e1f27; border: 1px solid #2a2b35; border-radius: 4px; padding: 10px 12px; }
.dsm__seg { display: inline-flex; border: 1px solid #2a2b35; border-radius: 4px; overflow: hidden; height: 40px; }
.dsm__seg-item { display: flex; }
.dsm__seg-item input { position: absolute; opacity: 0; pointer-events: none; }
.dsm__seg-item span { display: flex; align-items: center; padding: 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; color: #777; }
.dsm__seg-item + .dsm__seg-item span { border-left: 1px solid #2a2b35; }
.dsm__seg-item span:hover { color: #bbb; }
.dsm__seg-item input:checked + span { background: rgba(255, 255, 255, 0.08); color: #fff; }
.dsm__checks { display: flex; flex-wrap: wrap; gap: 6px; }
.dsm__check { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid #2a2b35; border-radius: 4px; font-size: 13px; cursor: pointer; background: #1e1f27; color: var(--text-secondary); transition: border-color 0.15s, color 0.15s; }
.dsm__check:hover { color: var(--text-primary); }
.dsm__check:has(input:checked) { border-color: rgba(196, 162, 78, 0.45); color: var(--text-primary); background: #23242c; }
.dsm__check input { accent-color: #c4a24e; margin: 0; }
.dsm__checks--classes .dsm__check { height: 30px; padding: 0 10px; font-size: 12px; }
.dsm__footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid #2a2b35; background: #1e1f27; border-radius: 0 0 4px 4px; }
.dsm__error { flex: 1; color: #e57373; font-size: 12px; text-align: left; min-width: 0; }
.dsm__error:empty { display: none; }
.dsm__footer .btn { border-radius: 4px; }
.dsm__apply:disabled { opacity: 0.45; cursor: not-allowed; filter: saturate(0.4); }

/* FAQ zweispaltig */
.discord-faq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; align-items: start; }
.discord-faq details { border-bottom: 1px solid var(--border-color, #2a2a35); }
.discord-faq summary { cursor: pointer; padding: 0.8rem 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--text-primary); }
.discord-faq summary::-webkit-details-marker { display: none; }
.discord-faq summary::after { content: '+'; color: var(--text-dimmed); font-weight: 400; }
.discord-faq details[open] summary::after { content: '\2013'; }
.discord-faq details p { margin: 0; padding: 0 0 0.9rem; color: var(--text-secondary); line-height: 1.55; max-width: 70ch; }

@media (max-width: 1280px) {
    .discord-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .discord-facts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .discord-steps { grid-template-columns: 1fr; }
    .discord-step { border-right: none; padding-right: 0; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border-color, #2a2a35); }
    .discord-step:last-child { border-bottom: none; padding-bottom: 0; }
    .discord-examples { grid-template-columns: 1fr; }
    .discord-faq__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .discord-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dsm__section--row { grid-template-columns: 1fr; }
    .discord-connect { padding: 1rem; }
}