*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:#0c0a09;color:#e9ddc5;font-family:"Crimson Text",Georgia,serif;font-size:18px;line-height:1.55;background-image:radial-gradient(ellipse at 50% 0%,#382719 0,#15100d 48%,#090807 100%)}a{color:inherit;text-decoration:none}.page-frame{max-width:1440px;margin:auto;border-left:1px solid #76552d;border-right:1px solid #76552d;box-shadow:0 0 70px #000}.site-header{height:auto;min-height:78px;padding:12px clamp(18px,4vw,56px);display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(#241a13,#100d0b);border-bottom:1px solid #98713c;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:12px;white-space:nowrap}.brand-mark{width:48px;height:48px;border:1px solid #c89a4d;border-radius:50%;display:grid;place-items:center;background:#25170e}.brand-mark svg{width:36px;fill:#d8aa58;stroke:#f1d18a;stroke-width:1.4}.brand strong{display:block;font:700 20px Cinzel,serif;color:#f1ca78;letter-spacing:1px}.brand small{display:block;color:#b9a487;font-size:12px;letter-spacing:1px}.main-nav{display:flex;gap:clamp(10px,2vw,27px);align-items:center}.main-nav a{font:600 12px Cinzel,serif;text-transform:uppercase;letter-spacing:.8px;color:#d1bea0;padding:9px 0;border-bottom:2px solid transparent}.main-nav a:hover,.main-nav a.active{color:#f4ca70;border-color:#c58c37}.menu-toggle{display:none;background:none;border:1px solid #8e6a38;color:#eac477;border-radius:4px;font-size:23px;padding:3px 10px}.hero{height:min(690px,72vw);min-height:490px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:flex-end;background:linear-gradient(90deg,#100b08 0%,#160f0bd9 35%,#100b0870 100%),url("assets/eulenspiegel-hero.jpg") left center/cover no-repeat,#21150e;border-bottom:1px solid #9c7138}.hero-art{position:absolute;inset:0;background:radial-gradient(ellipse at 72% 44%,#d18a3540,transparent 50%),linear-gradient(0deg,#0b0807 0%,transparent 24%)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,transparent 20%,#0907064d 60%,#090706b5 100%)}.hero-copy{position:relative;z-index:1;width:min(660px,58%);padding:40px 7% 65px 0;text-align:center}.eyebrow{font:600 11px Cinzel,serif;text-transform:uppercase;letter-spacing:3px;color:#d4a653;margin:0 0 12px}.hero h1{font:800 clamp(42px,7vw,88px)/1.05 Cinzel,serif;letter-spacing:1px;color:#f4d28a;text-shadow:0 3px 0 #48270e,0 8px 20px #000;margin:0}.ornament{display:flex;align-items:center;justify-content:center;gap:14px;color:#e8c178;font:600 clamp(14px,2vw,21px) Cinzel,serif;margin:22px 0}.ornament span{height:1px;width:54px;background:linear-gradient(90deg,transparent,#c18b3c)}.ornament span:last-child{transform:scaleX(-1)}.hero-lead{font-size:22px;color:#e7d8bc;margin:0 0 26px}.gold-button{display:inline-flex;align-items:center;gap:20px;padding:12px 20px;border:1px solid #e0b45d;border-radius:3px;background:linear-gradient(#77501d,#3b260f);box-shadow:inset 0 0 0 2px #2a1b0d,0 4px 15px #0008;color:#ffe0a0;font:600 12px Cinzel,serif;text-transform:uppercase;letter-spacing:.7px;transition:.2s}.gold-button:hover{filter:brightness(1.25);transform:translateY(-2px)}.gold-button b{font-size:20px}.hero-bottom{position:absolute;bottom:0;left:0;right:0;background:#0b0807d9;border-top:1px solid #86602f;text-align:center;padding:10px;color:#c9a66d;font:11px Cinzel,serif;letter-spacing:2px}.hero-bottom span{color:#f0c66f;padding:0 13px}.section{padding:76px clamp(20px,6vw,84px)}.intro-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:25px;align-items:start}.panel{border:1px solid #8c6739;box-shadow:inset 0 0 0 4px #1b120d,0 12px 32px #0008;position:relative}.parchment{background:linear-gradient(135deg,#e2c99a,#b89560);color:#382517;padding:35px 38px;border-color:#d0a55d;box-shadow:inset 0 0 0 5px #73502c, inset 0 0 30px #79562b66,0 12px 32px #0008}.parchment h2,.dark-panel h2,.section-title h2,.activity-copy h2,.join-card h2,.contact-band h2{font:700 clamp(24px,3vw,34px) Cinzel,serif;line-height:1.25;margin:0 0 18px}.parchment p{margin:0 0 15px}.eyebrow.dark{color:#795021}.signature{font-style:italic;font-weight:700;color:#6a3c19;margin-top:24px!important}.signature span{display:block;font-size:14px}.dark-panel{background:linear-gradient(145deg,#302219,#15100d);padding:34px 36px;border-color:#78552f}.panel-heading{display:flex;align-items:center;gap:14px;margin-bottom:22px}.panel-heading h2{margin:0}.heading-icon{font-size:30px;color:#e2b75e}.feature{display:flex;gap:16px;padding:15px 0;border-top:1px solid #6e5030}.feature-icon{font-size:26px;color:#e2b45c;width:35px;text-align:center}.feature h3,.activity-list h3{font:600 15px Cinzel,serif;color:#f0d092;margin:0 0 3px}.feature p,.activity-list p{margin:0;color:#c0b19a;font-size:16px}.section-title{text-align:center;margin:0 auto 34px}.section-title h2{color:#f0d092;margin-bottom:8px}.section-title>p:last-child{color:#b9a88e;margin:0}.rank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.rank-card{display:flex;align-items:center;gap:14px;padding:15px 16px;background:linear-gradient(110deg,#2b2018,#17110d);border:1px solid #72512d;box-shadow:inset 0 0 0 2px #0b0806;min-height:92px}.rank-crest{width:43px;height:43px;flex:none;display:grid;place-items:center;border:2px solid #d6ae60;clip-path:polygon(50% 0,94% 18%,86% 76%,50% 100%,14% 76%,6% 18%);font-size:23px;color:#fff4d6;text-shadow:0 2px 3px #000}.crest-red{background:#8e2521}.crest-gold{background:#98702b}.crest-violet{background:#653d89}.crest-blue{background:#245b83}.crest-green{background:#42713d}.crest-orange{background:#a65a20}.crest-purple{background:#753e6e}.crest-crown{background:#9a6d25}.rank-card h3{font:600 14px Cinzel,serif;color:#f0d092;margin:0 0 3px}.rank-card p{font-size:15px;color:#c2b39b;margin:0;line-height:1.3}.rank-card small{margin-left:auto;color:#92734a;font:12px Cinzel,serif}.rank-master{border-color:#c99c4b;background:linear-gradient(110deg,#493018,#21160e)}.note{color:#9f9078;font-size:13px;margin-top:16px}.note code{color:#d6b16e}.class-section{padding-top:25px}.class-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:10px}.class-tile{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:linear-gradient(#292018,#100d0b);border:1px solid #60472b;box-shadow:inset 0 0 0 3px #0b0806}.class-tile span{width:52px;height:52px;border:2px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:29px;background:radial-gradient(circle,#55402a,#16100c);text-shadow:0 2px 5px #000}.class-tile b{font:600 10px Cinzel,serif;text-transform:uppercase;letter-spacing:.4px;color:#e2d2b6}.warrior{color:#c69b72}.paladin{color:#f2a6cb}.hunter{color:#aad17c}.rogue{color:#fff16d}.priest{color:#eee8d9}.shaman{color:#6ca8e5}.mage{color:#68d9ed}.warlock{color:#b58be3}.druid{color:#e49b52}.activity-wrap{background:linear-gradient(90deg,#100b08ed,#17100be8),url("assets/eulenspiegel-hero.jpg") center 55%/cover;border-top:1px solid #8c6534;border-bottom:1px solid #8c6534}.activity-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.activity-copy h2{color:#f0d092}.activity-copy p:not(.eyebrow){color:#c7b89e;max-width:480px}.activity-list>div{display:flex;gap:17px;padding:13px 0;border-bottom:1px solid #6c4e2c}.activity-list>div>span{font-size:27px;color:#d8a94e;width:35px;text-align:center}.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.rules-card{padding:34px}.rule-list{padding:0;list-style:none;margin:22px 0 0}.rule-list li{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid #9e794c66}.rule-list span{color:#54702d;font-weight:700;font-size:20px}.join-card{padding:38px;background:radial-gradient(ellipse at 90% 10%,#79502455,transparent 50%),linear-gradient(145deg,#302219,#15100d);border:1px solid #8c6739}.join-card h2{color:#f0d092}.join-card>p:not(.eyebrow){color:#c5b69d;margin-bottom:25px}.contact-band{padding:34px clamp(20px,6vw,84px);display:flex;align-items:center;gap:25px;background:linear-gradient(90deg,#24180f,#100c09);border-top:1px solid #a27a3e;border-bottom:1px solid #a27a3e}.contact-emblem{width:76px;height:76px;border:1px solid #b78b47;border-radius:50%;display:grid;place-items:center;font-size:42px;color:#e2b75e;flex:none}.contact-band h2{font-size:24px;color:#f0d092;margin:0 0 5px}.contact-band p:not(.eyebrow){margin:0;color:#bca98b}.contact-actions{margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:8px}.contact-actions .gold-button{white-space:nowrap}.text-link{font-size:13px;color:#c9a66d;text-decoration:underline}footer{display:flex;justify-content:center;align-items:center;gap:20px;padding:22px;background:#090706;color:#927a59;font:11px Cinzel,serif;letter-spacing:1px}footer strong{color:#d5ae68;letter-spacing:2px}footer span:first-child,footer span:last-child{color:#d4a34d}
* { scrollbar-color: #9b7441 #24180f; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: #24180f; }
*::-webkit-scrollbar-thumb { background: #8c6739; border: 2px solid #24180f; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #c58c37; }
*::-webkit-scrollbar-corner { background: #24180f; }
.welcome-trigger { flex: none; padding: 16px 24px; cursor: pointer; font-size: 15px; white-space: nowrap; }
.welcome-trigger b { font-size: 24px; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.donation-trigger { flex: none; gap: 12px; padding: 8px 12px; cursor: pointer; font-size: 10px; white-space: nowrap; }
.donation-trigger b { font-size: 18px; }
.intro-column { display: flex; flex-direction: column; gap: 25px; }
.discord-card { display: flex; flex-direction: column; align-items: stretch; align-self: start; }
.discord-card .panel-heading, .discord-intro { width: 100%; }
.discord-intro { margin: 0 0 20px; color: #c5b69d; text-align: center; }
.discord-status-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #72c987; box-shadow: 0 0 8px #72c98788; }
.discord-status-dot.idle { background: #e6b95e; box-shadow: 0 0 8px #e6b95e66; }
.discord-status-dot.dnd { background: #d65b5b; box-shadow: 0 0 8px #d65b5b66; }
.discord-widget-message { margin: 0 0 18px; color: #c5b69d; }
.discord-channels { padding-top: 14px; border-top: 1px solid #6c4e2c; }
.discord-channels h3 { margin: 0 0 10px; color: #e6bd70; font: 600 12px Cinzel, serif; letter-spacing: 1px; text-transform: uppercase; }
.discord-room-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 9px; margin: 0 0 18px; padding: 0; list-style: none; }
.discord-room { min-width: 0; padding: 10px 11px; border: 1px solid #6e5030; border-radius: 3px; background: #1a120d; }
.discord-room-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.discord-room-icon { flex: none; color: #e2b75e; font-size: 14px; }
.discord-room-heading h4 { flex: 1; min-width: 0; margin: 0; color: #f0d092; font: 600 12px Cinzel, serif; overflow-wrap: anywhere; }
.discord-room-count { flex: none; color: #a9997f; font-size: 10px; }
.discord-room-members { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.discord-room-member { display: flex; align-items: center; gap: 7px; min-width: 0; color: #e9ddc5; font-size: 13px; overflow-wrap: anywhere; }
.discord-room-member .discord-status-dot { width: 7px; height: 7px; }
.discord-room-empty { margin: 0; color: #9f9078; font-size: 12px; font-style: italic; }
.discord-join-button { align-self: flex-start; }
.hero .welcome-trigger { box-shadow: inset 0 0 0 2px #2a1b0d, 0 4px 15px #0008, 0 0 24px #e0b45dcc, 0 0 54px #cf872d88; }
.hero .welcome-trigger:hover { box-shadow: inset 0 0 0 2px #2a1b0d, 0 4px 15px #0008, 0 0 30px #ffe0a0ee, 0 0 70px #cf872dcc; }
.welcome-modal { width: min(720px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); margin: auto; padding: 0; overflow: auto; border: 0; background: transparent; color: #382517; }
.welcome-modal::backdrop { background: #080604df; backdrop-filter: blur(4px); }
.welcome-letter { position: relative; margin: 0; padding: clamp(28px, 5vw, 52px); border: 1px solid #d0a55d; background: linear-gradient(135deg, #e2c99a, #b89560); box-shadow: inset 0 0 0 5px #73502c, inset 0 0 30px #79562b66, 0 12px 32px #0008; }
#welcome-modal .welcome-letter { padding-top: clamp(76px, 9vw, 84px); }
.welcome-jester-cap { position: absolute; top: 7px; left: 18px; z-index: 1; width: 70px; height: 62px; transform: rotate(-8deg); filter: drop-shadow(0 3px 2px #38251766); pointer-events: none; }
.welcome-jester-cap svg { display: block; width: 100%; height: 100%; overflow: visible; }
.welcome-letter h2 { margin: 0 42px 22px 0; color: #4c3019; font: 700 clamp(24px, 4vw, 36px)/1.2 Cinzel, serif; }
.welcome-letter-body p { margin: 0 0 16px; line-height: 1.6; }
.welcome-letter-body a { color: #6a3c19; font-weight: 700; text-decoration: underline; }
.welcome-letter-body a:hover { color: #3f2816; }
.welcome-letter .signature { margin-bottom: 0; }
.welcome-modal-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border: 1px solid #73502c; background: #e2c99a; color: #382517; font-size: 27px; line-height: 1; cursor: pointer; }
.welcome-modal-close:hover { background: #f0d7a8; }.dark-panel{background:linear-gradient(145deg,#302219,#15100d);padding:34px 36px;border-color:#78552f}.panel-heading{display:flex;align-items:center;gap:14px;margin-bottom:22px}.panel-heading h2{margin:0}.heading-icon{font-size:30px;color:#e2b75e}.feature{display:flex;gap:16px;padding:15px 0;border-top:1px solid #6e5030}.feature-icon{font-size:26px;color:#e2b45c;width:35px;text-align:center}.feature h3,.activity-list h3{font:600 15px Cinzel,serif;color:#f0d092;margin:0 0 3px}.feature p,.activity-list p{margin:0;color:#c0b19a;font-size:16px}.section-title{text-align:center;margin:0 auto 34px}.section-title h2{color:#f0d092;margin-bottom:8px}.section-title>p:last-child{color:#b9a88e;margin:0}.rank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.rank-card{display:flex;align-items:center;gap:14px;padding:15px 16px;background:linear-gradient(110deg,#2b2018,#17110d);border:1px solid #72512d;box-shadow:inset 0 0 0 2px #0b0806;min-height:92px}.rank-crest{width:43px;height:43px;flex:none;display:grid;place-items:center;border:2px solid #d6ae60;clip-path:polygon(50% 0,94% 18%,86% 76%,50% 100%,14% 76%,6% 18%);font-size:23px;color:#fff4d6;text-shadow:0 2px 3px #000}.crest-red{background:#8e2521}.crest-gold{background:#98702b}.crest-violet{background:#653d89}.crest-blue{background:#245b83}.crest-green{background:#42713d}.crest-orange{background:#a65a20}.crest-purple{background:#753e6e}.crest-crown{background:#9a6d25}.rank-card h3{font:600 14px Cinzel,serif;color:#f0d092;margin:0 0 3px}.rank-card p{font-size:15px;color:#c2b39b;margin:0;line-height:1.3}.rank-card small{margin-left:auto;color:#92734a;font:12px Cinzel,serif}.rank-master{border-color:#c99c4b;background:linear-gradient(110deg,#493018,#21160e)}.note{color:#9f9078;font-size:13px;margin-top:16px}.note code{color:#d6b16e}.class-section{padding-top:25px}.class-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:10px}.class-tile{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:linear-gradient(#292018,#100d0b);border:1px solid #60472b;box-shadow:inset 0 0 0 3px #0b0806}.class-tile span{width:52px;height:52px;border:2px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:29px;background:radial-gradient(circle,#55402a,#16100c);text-shadow:0 2px 5px #000}.class-tile b{font:600 10px Cinzel,serif;text-transform:uppercase;letter-spacing:.4px;color:#e2d2b6}.warrior{color:#c69b72}.paladin{color:#f2a6cb}.hunter{color:#aad17c}.rogue{color:#fff16d}.priest{color:#eee8d9}.shaman{color:#6ca8e5}.mage{color:#68d9ed}.warlock{color:#b58be3}.druid{color:#e49b52}.activity-wrap{background:linear-gradient(90deg,#100b08ed,#17100be8),url("assets/eulenspiegel-hero.jpg") center 55%/cover;border-top:1px solid #8c6534;border-bottom:1px solid #8c6534}.activity-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.activity-copy h2{color:#f0d092}.activity-copy p:not(.eyebrow){color:#c7b89e;max-width:480px}.activity-list>div{display:flex;gap:17px;padding:13px 0;border-bottom:1px solid #6c4e2c}.activity-list>div>span{font-size:27px;color:#d8a94e;width:35px;text-align:center}.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.rules-card{padding:34px}.rule-list{padding:0;list-style:none;margin:22px 0 0}.rule-list li{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid #9e794c66}.rule-list span{color:#54702d;font-weight:700;font-size:20px}.join-card{padding:38px;background:radial-gradient(ellipse at 90% 10%,#79502455,transparent 50%),linear-gradient(145deg,#302219,#15100d);border:1px solid #8c6739}.join-card h2{color:#f0d092}.join-card>p:not(.eyebrow){color:#c5b69d;margin-bottom:25px}.contact-band{padding:34px clamp(20px,6vw,84px);display:flex;align-items:center;gap:25px;background:linear-gradient(90deg,#24180f,#100c09);border-top:1px solid #a27a3e;border-bottom:1px solid #a27a3e}.contact-emblem{width:76px;height:76px;border:1px solid #b78b47;border-radius:50%;display:grid;place-items:center;font-size:42px;color:#e2b75e;flex:none}.contact-band h2{font-size:24px;color:#f0d092;margin:0 0 5px}.contact-band p:not(.eyebrow){margin:0;color:#bca98b}.contact-actions{margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:8px}.contact-actions .gold-button{white-space:nowrap}.text-link{font-size:13px;color:#c9a66d;text-decoration:underline}footer{display:flex;justify-content:center;align-items:center;gap:20px;padding:22px;background:#090706;color:#927a59;font:11px Cinzel,serif;letter-spacing:1px}footer strong{color:#d5ae68;letter-spacing:2px}footer span:first-child,footer span:last-child{color:#d4a34d}
@media(max-width:980px){.site-header{flex-wrap:wrap}.menu-toggle{display:block;margin-left:auto}.main-nav{display:none;order:3;width:100%;flex-wrap:wrap;padding:8px 0 3px}.main-nav.open{display:flex}.main-nav a{padding:8px 4px}.hero-copy{width:68%;padding-right:4%}.class-grid{grid-template-columns:repeat(5,1fr)}.rank-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){body{font-size:17px}.site-header{position:relative}.brand strong{font-size:17px}.brand small{font-size:10px}.hero{min-height:520px;height:76vh;max-height:680px;background-position:25% center}.hero-copy{width:100%;padding:35px 20px 60px;background:linear-gradient(90deg,#0b0807b8,#0b08077d)}.hero h1{font-size:48px}.hero-lead{font-size:18px}.hero-bottom{font-size:9px;letter-spacing:1px}.section{padding:52px 18px}.intro-grid,.activity-inner,.rules-grid{grid-template-columns:1fr;gap:18px}.parchment,.dark-panel,.rules-card,.join-card{padding:26px 23px}.rank-grid{grid-template-columns:1fr}.class-grid{grid-template-columns:repeat(3,1fr)}.class-tile{min-height:108px}.activity-inner{gap:24px}.contact-band{flex-wrap:wrap;text-align:center;justify-content:center}.contact-band>div:nth-child(2){flex-basis:100%}.contact-actions{margin:0;width:100%}footer{gap:9px;flex-wrap:wrap;font-size:9px}}

@media(min-width:651px){.hero{justify-content:flex-start}.hero-copy{padding-left:7%;padding-right:0}}
.hero-copy{text-align:left}
.hero-copy .ornament{justify-content:flex-start}
@media(max-width:980px){.intro-grid{grid-template-columns:1fr}.intro-column{gap:18px}}


/* ==========================================
   GILDENHALLE – RÄNGE UND GILDENROSTER
   ========================================== */

.guild-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Gemeinsame Gestaltung beider Bereiche */

.guild-ranks,
.guild-roster {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Linke Seite: Rangliste */

.guild-ranks {
  height: auto;
}

.guild-ranks .panel-heading {
  flex-shrink: 0;
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Rang-Karten behalten ihre volle Größe */

.guild-ranks .rank-card {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.guild-special-roles {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #6e5030;
}

.special-roles-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.special-roles-heading h3 {
  margin: 0;
  color: #f0d092;
  font: 600 19px Cinzel, serif;
}

.committee-card .committee-members {
  margin-top: 8px;
  color: #d3b06b;
  font-size: 13px;
}

/* Rechte Seite: Gildenroster */

.roster-slot {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  min-height: 0;
}

.guild-roster {
  position: relative;
  flex: 1 1 0;
  min-height: 420px;
}

.class-distribution {
  flex: 0 0 auto;
  padding: 28px 30px;
}

.class-distribution .panel-heading {
  margin-bottom: 14px;
}

.class-chart-summary {
  margin: 0 0 16px;
  color: #a9997f;
  font-size: 14px;
}

.class-chart {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.class-chart-row {
  display: grid;
  grid-template-columns: minmax(70px, .8fr) minmax(50px, 3fr) 104px;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.class-chart-name {
  min-width: 0;
  color: #e3d3b7;
  font-size: 14px;
  line-height: 1.3;
}

.class-chart-count {
  justify-self: end;
  color: #b9a88e;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.class-chart-track {
  display: block;
  width: 100%;
  height: 14px;
  overflow: hidden;
  border-radius: 2px;
  background: #100c09;
}

.class-chart-bar {
  display: block;
  width: var(--class-ratio);
  min-width: 1px;
  height: 100%;
  border-radius: 2px;
  background: var(--class-color);
  box-shadow: 0 0 8px var(--class-color);
}

.class-chart-placeholder {
  margin: 0;
  color: #b9a88e;
}

.guild-roster .panel-heading {
  flex-shrink: 0;
}

/* Nur dieser Bereich wird scrollbar */

.roster-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
}

/* Platzhalter für den späteren Gildenroster */

.roster-placeholder {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
  box-sizing: border-box;
  color: #c8b99e;
}

.roster-placeholder > span {
  font-size: 48px;
  color: #c49a51;
  margin-bottom: 15px;
}

.roster-placeholder h3 {
  color: #e5c68a;
  font: 600 20px Cinzel, serif;
  margin: 0 0 10px;
}

.roster-placeholder p {
  max-width: 280px;
  line-height: 1.7;
}

.roster-placeholder small {
  color: #927d5c;
  margin-top: 15px;
}

.roster-count { color: #c9a66d; font-size: 15px; margin: 0 0 12px; }
.roster-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 15px; }
.roster-table th, .roster-table td { padding: 8px; border-bottom: 1px solid #6c4e2c; overflow-wrap: anywhere; }
.roster-table th { color: #f0d092; }
.roster-source { margin: 0 0 12px; color: #b9a88e; font-size: 13px; }
.roster-character { padding: 0; border: 0; background: none; color: #f0d092; font: inherit; text-align: left; text-decoration: underline dotted; cursor: help; overflow-wrap: anywhere; }
.roster-character:focus-visible { outline: 2px solid #e0b45d; outline-offset: 3px; }
.roster-tooltip { position: fixed; z-index: 100; max-width: min(280px, calc(100vw - 16px)); padding: 10px 12px; border: 1px solid #b78b47; border-radius: 3px; background: #1a120d; box-shadow: 0 4px 15px #000b; color: #e9ddc5; font-size: 15px; white-space: pre-line; pointer-events: none; }
.roster-tooltip[hidden] { display: none; }
.admin-page { max-width: 1000px; margin: auto; }
.admin-panel { margin-top: 20px; }
.admin-panel h1 { font-family: Cinzel, serif; color: #f0d092; }
.admin-panel form { display: grid; gap: 12px; }
.admin-panel textarea, .admin-panel input[type="file"] { width: 100%; padding: 12px; background: #100d0b; border: 1px solid #8c6739; color: #e9ddc5; }
.admin-panel textarea { resize: vertical; font: 14px/1.5 monospace; }
.admin-confirm { display: flex; align-items: flex-start; gap: 10px; }
.admin-panel button { justify-self: start; cursor: pointer; }
.admin-success { color: #b6d59a; }
.admin-error { color: #ffaaa0; }

.addon-hero {
  padding: 66px 20px 58px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, #60401e88, transparent 65%), linear-gradient(#1b130e, #100c09);
  border-bottom: 1px solid #8c6534;
}
.addon-hero h1 {
  margin: 0;
  color: #f4d28a;
  font: 800 clamp(32px, 5vw, 58px)/1.15 Cinzel, serif;
  text-shadow: 0 3px 0 #48270e, 0 8px 20px #000;
}
.addon-hero > p:last-child { color: #c7b89e; margin: 14px auto 0; max-width: 620px; }
.addon-page { padding-top: 58px; }
.addon-category + .addon-category { margin-top: 74px; }
.addon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.addon-card {
  min-width: 0;
  min-height: 255px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: linear-gradient(145deg, #302219, #15100d);
}
.addon-card-own { border-color: #9a7541; }
.addon-mark {
  width: 44px;
  height: 44px;
  margin-bottom: 15px;
  display: grid;
  place-items: center;
  border: 1px solid #b78b47;
  border-radius: 50%;
  color: #e2b75e;
}
.addon-mark svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.addon-card .eyebrow { margin-bottom: 4px; font-size: 9px; letter-spacing: 1.8px; }
.addon-card h3 { margin: 0 0 8px; color: #f0d092; font: 600 18px Cinzel, serif; }
.addon-card > p:not(.eyebrow) { margin: 0; color: #c5b69d; font-size: 16px; line-height: 1.45; }
.addon-link {
  margin-top: auto;
  padding-top: 18px;
  color: #e6bd70;
  font: 600 11px Cinzel, serif;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.addon-details-link { padding-left: 0; border: 0; background: none; cursor: pointer; }
.addon-link:hover { color: #ffe0a0; text-decoration: underline; }
.addon-link span { padding-left: 5px; font-size: 15px; }
.addon-note { margin: 18px 0 0; color: #a9997f; font-size: 14px; text-align: center; }
.addon-modal-open { overflow: hidden; }
.addon-modal[hidden] { display: none; }
.addon-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.addon-modal-backdrop { position: absolute; inset: 0; background: #080604df; backdrop-filter: blur(4px); }
.addon-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(860px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: clamp(22px, 4vw, 36px);
  background: linear-gradient(145deg, #302219, #15100d);
  border: 1px solid #a27a3e;
  box-shadow: inset 0 0 0 4px #1b120d, 0 18px 70px #000d;
}
.addon-modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid #6c4e2c; }
.addon-modal-header .eyebrow { margin-bottom: 6px; }
.addon-modal-header h2 { margin: 0; color: #f0d092; font: 700 clamp(22px, 3vw, 30px) Cinzel, serif; }
.addon-modal-close { width: 38px; height: 38px; flex: none; border: 1px solid #8c6739; background: #17100c; color: #e6bd70; font-size: 27px; line-height: 1; cursor: pointer; }
.addon-modal-close:hover, .addon-gallery-control:hover { background: #493018; color: #ffe0a0; }
.addon-modal-content { display: flex; flex-direction: column; gap: 24px; padding-top: 22px; }
.addon-modal-section h3 { margin: 0 0 8px; color: #e6bd70; font: 600 13px Cinzel, serif; text-transform: uppercase; letter-spacing: 1px; }
.addon-modal-section > p { margin: 0; color: #c5b69d; }
.addon-patchnews { margin: 0; padding-left: 20px; color: #c5b69d; }
.addon-patchnews[hidden] { display: none; }
.addon-empty { color: #9f9078 !important; font-style: italic; }
.addon-gallery { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 12px; }
.addon-gallery-control { width: 40px; height: 48px; border: 1px solid #8c6739; background: #17100c; color: #e6bd70; font-size: 30px; line-height: 1; cursor: pointer; }
.addon-gallery-control[hidden] { display: none; }
.addon-gallery figure { min-width: 0; min-height: 180px; margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; text-align: center; }
.addon-gallery img { display: block; max-width: 100%; max-height: 380px; margin: 0 auto; border: 1px solid #6c4e2c; object-fit: contain; }
.addon-gallery img[hidden] { display: none; }
.addon-gallery-empty { margin: 0; padding: 52px 12px; color: #9f9078; border: 1px dashed #6c4e2c; }
.addon-gallery figcaption { color: #a9997f; font-size: 13px; }
.addon-gallery figcaption:empty { display: none; }

/* Responsive Darstellung */

@media (max-width: 850px) {
  .guild-overview {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .guild-roster { flex: 0 0 420px; }
}

@media (max-width: 980px) {
  .addon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .guild-roster { flex-basis: 400px; min-height: 400px; }
  .addon-hero { padding: 50px 20px 44px; }
  .addon-page { padding-top: 42px; }
  .addon-category + .addon-category { margin-top: 54px; }
  .addon-grid { grid-template-columns: 1fr; }
  .addon-card { min-height: 0; }
  .addon-modal { padding: 12px; }
  .addon-modal-dialog { max-height: calc(100vh - 24px); }
  .addon-modal-content { gap: 18px; }
  .addon-gallery { grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 6px; }
  .addon-gallery-control { width: 32px; }
  .class-chart-row { grid-template-columns: minmax(70px, .8fr) minmax(50px, 3fr) 92px; }
}

@media (max-width: 380px) {
  .site-header { padding: 10px 12px; gap: 8px; }
  .brand { min-width: 0; flex: 1; gap: 8px; white-space: normal; }
  .brand-mark { width: 40px; height: 40px; flex: none; }
  .brand-mark svg { width: 30px; }
  .brand strong { font-size: 15px; letter-spacing: .5px; }
  .brand small { display: none; }
  .menu-toggle { margin-left: 0; flex: none; }
  .class-distribution { padding-right: 16px; padding-left: 16px; }
  .class-distribution .panel-heading h2 { font-size: 20px; }
  .class-chart-row { grid-template-columns: minmax(78px, .8fr) minmax(42px, 3fr) 88px; gap: 8px; }
  .class-chart-name, .class-chart-count { font-size: 12px; }
}

@media (max-width: 650px) {
  .hero h1 { font-size: clamp(30px, 10.5vw, 48px); }
  .hero-copy .eyebrow { font-size: 10px; letter-spacing: 2px; }
  .hero-actions { width: 100%; max-width: 320px; align-items: stretch; }
  .hero-actions .gold-button { width: 100%; justify-content: space-between; gap: 12px; white-space: normal; }
  .welcome-trigger, .donation-trigger { padding: 12px 14px; font-size: 12px; }
}