:root{
  --gold:#e4c68b;
  --gold2:#b77a3f;
  --red:#a62c20;
  --ink:#080605;
  --panel1:rgba(29,15,11,.97);
  --panel2:rgba(8,6,5,.985);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#080605;color:#eadfc9}
body.master-layout{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  background:#080605 url('../ui/master/background-smoke.png') center top/1254px auto repeat fixed;
  font-family:Georgia,"Times New Roman",serif;
}
a{color:inherit}
.master-nav{
  /*
   * 3.0.1: Die Layout-Höhe entspricht NUR der eigentlichen Holzleiste.
   * Die langen Banner/Ketten sind absolut positioniert und dürfen über den
   * Hero hinausragen, ohne ihn nach unten zu schieben.
   */
  position:sticky;
  top:0;
  z-index:100;
  width:100vw;
  height:clamp(82px,6.1vw,234px);
  line-height:0;
  overflow:visible;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.65));
}
.master-nav picture{
  position:absolute;
  inset:0 auto auto 0;
  display:block;
  width:100vw;
  height:auto;
  pointer-events:none;
}
.master-nav img{
  display:block;
  width:100vw;
  max-width:none;
  height:auto;
  object-fit:contain;
  object-position:top center;
}
.master-nav-hotspots{
  position:absolute;
  inset:0;
  height:100%;
  pointer-events:none;
  z-index:2;
}
.master-nav-hotspots a{
  position:absolute;
  pointer-events:auto;
  display:block;
}

/* Startseite + Anmelden waren bereits gut getroffen */
.master-nav-hotspots a:nth-child(1),
.master-nav-hotspots a:nth-child(8){
  top:24%;
  height:52%;
}

/* Die Gilde bis Discord: oben später beginnen, unten gleich lassen */
.master-nav-hotspots a:nth-child(2),
.master-nav-hotspots a:nth-child(3),
.master-nav-hotspots a:nth-child(4),
.master-nav-hotspots a:nth-child(5),
.master-nav-hotspots a:nth-child(6),
.master-nav-hotspots a:nth-child(7){
  top:31%;
  height:45%;
}

/* Klickflächen nach deiner gelben Markierung im Screenshot */
.master-nav-hotspots a:nth-child(1){left:16.2%;width:7.6%}  /* Startseite */
.master-nav-hotspots a:nth-child(2){left:25.6%;width:5.3%}  /* Die Gilde */
.master-nav-hotspots a:nth-child(3){left:32.8%;width:7.1%}  /* Mitglieder */
.master-nav-hotspots a:nth-child(4){left:42.2%;width:4.5%}  /* Guides */
.master-nav-hotspots a:nth-child(5){left:51.2%;width:6.3%}  /* Bewerbung */
.master-nav-hotspots a:nth-child(6){left:60.0%;width:5.2%}  /* Discord */
.master-nav-hotspots a:nth-child(7){left:66.2%;width:5.1%}  /* Raids */
.master-nav-hotspots a:nth-child(8){left:83.8%;width:8.6%}  /* Anmelden */

.master-hero{
  width:100vw;
  margin:0 0 -1px;
  line-height:0;
  position:relative;
  z-index:5;
  /* No extra spacing: transparent NAV pixels do not participate in layout. */
}
.master-hero picture,.master-hero img{display:block;width:100%;height:auto}
.master-hero:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:8%;
  background:linear-gradient(to bottom,rgba(8,6,5,0),rgba(8,6,5,.18),rgba(8,6,5,.46));
  pointer-events:none;
}

.master-content{
  flex:1 0 auto;
  width:min(1500px,88vw);
  margin:0 auto;
  padding:22px 0 64px;
  position:relative;
  z-index:10;
}
.page-title{
  width:min(780px,94%);
  margin:0 auto 20px;
  padding:24px 36px 20px;
  text-align:center;
  background:linear-gradient(180deg,rgba(40,19,13,.98),rgba(7,5,4,.99));
  border:2px solid #725037;
  outline:1px solid #2d170e;
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.45),0 12px 22px rgba(0,0,0,.55);
}
.page-title .eyebrow,.eyebrow{display:block;color:#d49a4b;font:bold .72rem Georgia,serif;letter-spacing:.22em;margin-bottom:7px}
.page-title h1{margin:0;color:#f0d596;font-size:clamp(1.65rem,2.1vw,2.75rem);text-shadow:0 2px 2px #000}
.page-title p{margin:.55rem auto 0;max-width:66ch;color:#d6c5a9;line-height:1.45}

.panel,.member-card,.guide-card,.action-card{
  background:linear-gradient(180deg,var(--panel1),var(--panel2));
  border:2px solid #725037;
  outline:1px solid #2a150d;
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.46),0 10px 20px rgba(0,0,0,.48);
}
.panel{padding:24px 28px;margin:16px 0}
.panel h2,.panel h3,.member-card h3,.guide-card h3,.action-card h2{color:#e7c77e;margin-top:0}
.richtext{line-height:1.58}
.richtext p{margin:.65em 0}
.values,.member-grid,.guide-grid,.home-grid,.home-actions{display:grid;gap:16px}
.values{grid-template-columns:repeat(3,minmax(0,1fr))}
.member-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.member-card,.guide-card{padding:20px;text-decoration:none;position:relative}
.member-card{display:flex;gap:16px;align-items:flex-start}
.avatar.sigil,.discord-icon{
  flex:0 0 52px;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;border:1px solid #c77835;
  box-shadow:inset 0 0 16px #541a12,0 0 10px rgba(173,58,28,.25);
  color:#f1d39a;font-weight:bold;font-size:1.3rem
}
.meta,.muted{color:#9f8b70}
.guide-card{display:block;color:#eadfc9}
.guide-card .guide-id{position:absolute;right:16px;top:14px;color:#9d7950}
.guide-meta{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 16px}
.guide-meta>div{background:rgba(30,16,11,.92);border:1px solid #56321f;padding:14px}
.guide-meta span{display:block;color:#a9875d;font-size:.7rem;text-transform:uppercase}
.guide-meta strong{color:#edd5a2}
.application-form label{display:block;color:#cdbb9c;margin:12px 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
input,textarea{
  width:100%;margin-top:7px;padding:12px 13px;
  border:1px solid #65351e;background:#090706;color:#eee0ca;
  font:inherit;outline:none
}
input:focus,textarea:focus{border-color:#b15a2e;box-shadow:0 0 0 2px rgba(177,90,46,.15)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:0 18px;border:1px solid #bb6840;
  background:linear-gradient(#b43c2a,#7f2017);color:#fff2d6;text-decoration:none;
  font:bold .78rem Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)
}
.discord-panel{display:flex;gap:20px;align-items:center}

.home-title{margin-top:4px}
.home-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
.home-card{margin:0;min-height:250px;display:flex;flex-direction:column}
.home-card .btn{margin-top:auto;align-self:flex-start}
.home-guide-link{display:block;padding:9px 0;border-bottom:1px solid rgba(170,92,49,.25);text-decoration:none}
.home-guide-link strong,.home-guide-link small{display:block}
.home-guide-link small{color:#a68d70;margin-top:3px}
.home-actions{grid-template-columns:1fr 1fr;margin-top:16px}
.action-card{padding:24px;text-decoration:none}
.action-card p{color:#ccb998;margin-bottom:0}

.master-footer{
  position:relative;
  z-index:20;
  width:100vw;
  line-height:0;
  margin-top:auto;
  filter:drop-shadow(0 -8px 15px rgba(0,0,0,.48));
}
.master-footer picture,.master-footer img{display:block;width:100%;height:auto}
.master-footer-hotspots{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
}
.master-footer-hotspots a{
  position:absolute;
  top:58%;
  height:9%;
  display:block;
  pointer-events:auto;
}

/* Footer-Klickflächen nach deiner Markierung */
.master-footer-hotspots a:nth-child(1){left:78.8%;width:4.5%}  /* Impressum */
.master-footer-hotspots a:nth-child(2){left:84.4%;width:5.0%}  /* Datenschutz */
.master-footer-hotspots a:nth-child(3){left:90.9%;width:3.2%}  /* Kontakt */

@media (min-width:3000px){
  .master-content{width:min(1750px,68vw)}
  .page-title{width:min(900px,52vw)}
}
@media (max-width:1100px){
  .master-content{width:92vw}
  .values,.member-grid,.home-grid{grid-template-columns:1fr}
  .guide-grid,.home-actions{grid-template-columns:1fr}
  .guide-meta{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .master-nav img{min-height:58px}
  .master-content{width:94vw;padding-top:14px}
  .page-title{width:100%;padding:20px 18px}
  .panel{padding:20px}
  .guide-meta{grid-template-columns:1fr}
}

/* ============================================================
   3.1.2 – SIMPLE WOOD FRAME
   Clean 8-piece frame. No glow, rivets, gems or decorative spikes.
   ============================================================ */

:root{
  --wood-frame:18px;
  --wood-corner:34px;
  --panel-pad-x:24px;
  --panel-pad-y:22px;
  --parchment-ink:#2b170d;
  --parchment-muted:#6b472c;
}

/*
 * The transparent border creates a protected frame zone.
 * background-clip:padding-box guarantees parchment never extends
 * underneath or outside the wooden frame.
 */
.page-title,
.panel,
.guide-card,
.member-card,
.action-card,
.guide-meta > div{
  position:relative;
  border:var(--wood-frame) solid transparent !important;
  outline:0 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.42);
  background-clip:padding-box !important;
  overflow:visible;
  isolation:isolate;
}

/* 8 physical assets: 4 corners + 4 repeating edges */
.page-title::before,
.panel::before,
.guide-card::before,
.member-card::before,
.action-card::before,
.guide-meta > div::before{
  content:"";
  position:absolute;
  inset:calc(var(--wood-frame) * -1);
  z-index:3;
  pointer-events:none;
  background-image:
    url('../ui/content/frame-simple/corner-tl.png'),
    url('../ui/content/frame-simple/corner-tr.png'),
    url('../ui/content/frame-simple/corner-bl.png'),
    url('../ui/content/frame-simple/corner-br.png'),
    url('../ui/content/frame-simple/edge-top.png'),
    url('../ui/content/frame-simple/edge-bottom.png'),
    url('../ui/content/frame-simple/edge-left.png'),
    url('../ui/content/frame-simple/edge-right.png');
  background-position:
    left top,
    right top,
    left bottom,
    right bottom,
    left var(--wood-corner) top,
    left var(--wood-corner) bottom,
    left top var(--wood-corner),
    right top var(--wood-corner);
  background-size:
    var(--wood-corner) var(--wood-corner),
    var(--wood-corner) var(--wood-corner),
    var(--wood-corner) var(--wood-corner),
    var(--wood-corner) var(--wood-corner),
    auto var(--wood-frame),
    auto var(--wood-frame),
    var(--wood-frame) auto,
    var(--wood-frame) auto;
  background-repeat:
    no-repeat,no-repeat,no-repeat,no-repeat,
    repeat-x,repeat-x,repeat-y,repeat-y;
}

.page-title > *,
.panel > *,
.guide-card > *,
.member-card > *,
.action-card > *,
.guide-meta > div > *{
  position:relative;
  z-index:4;
}

/* Standard inner spacing. */
.page-title{
  padding:26px 34px 24px;
}
.panel{
  padding:var(--panel-pad-y) var(--panel-pad-x);
}
.guide-card,
.member-card,
.action-card{
  padding:22px 24px;
}

/* Pergament NUR auf Guides / Bewerbung / Discord */
body:has(.guide-detail) .page-title,
body:has(.guide-detail) .guide-meta > div,
body:has(.guide-detail) .guide-body,
body:has(.guide-grid) .page-title,
body:has(.guide-grid) .guide-card,
body:has(.guide-grid) .panel,
body:has(.application-form) .page-title,
body:has(.application-form) .application-form,
body:has(.application-form) .success,
body:has(.discord-panel) .page-title,
body:has(.discord-panel) .discord-panel{
  background:
    linear-gradient(rgba(255,242,210,.045),rgba(166,106,49,.035)),
    url('../ui/content/parchment-bg.png') center/cover no-repeat !important;
  background-clip:padding-box !important;
  color:var(--parchment-ink);
  text-shadow:none;
}

/* Guides: meta/tag boxes need visibly more vertical room */
.guide-meta{
  gap:12px;
  align-items:stretch;
}
.guide-meta > div{
  --wood-frame:12px;
  --wood-corner:24px;
  min-height:72px;
  padding:16px 17px 15px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.guide-meta > div span{
  margin-bottom:5px;
  line-height:1.15;
}
.guide-meta > div strong{
  line-height:1.25;
}

/* Typography on parchment */
body:has(.guide-detail) .page-title h1,
body:has(.guide-detail) .guide-body h2,
body:has(.guide-detail) .guide-body h3,
body:has(.guide-detail) .guide-body h4,
body:has(.guide-grid) .page-title h1,
body:has(.guide-grid) .guide-card h3,
body:has(.application-form) .page-title h1,
body:has(.application-form) .application-form h2,
body:has(.discord-panel) .page-title h1,
body:has(.discord-panel) .discord-panel h2{
  color:#3a1d0e;
  text-shadow:0 1px 0 rgba(255,240,205,.45);
}
body:has(.guide-detail) .page-title p,
body:has(.guide-detail) .guide-body,
body:has(.guide-detail) .guide-meta strong,
body:has(.guide-grid) .page-title p,
body:has(.guide-grid) .guide-card,
body:has(.application-form) .page-title p,
body:has(.application-form) .application-form,
body:has(.discord-panel) .page-title p,
body:has(.discord-panel) .discord-panel p{
  color:var(--parchment-ink);
}
body:has(.guide-detail) .eyebrow,
body:has(.guide-grid) .eyebrow,
body:has(.application-form) .eyebrow,
body:has(.discord-panel) .eyebrow{color:#7f3f18}

body:has(.guide-detail) .guide-meta span,
body:has(.guide-detail) .muted,
body:has(.guide-grid) .guide-card small,
body:has(.application-form) .muted,
body:has(.discord-panel) .muted{color:var(--parchment-muted)}

/* Application fields */
body:has(.application-form) input,
body:has(.application-form) textarea{
  background:rgba(255,248,229,.82);
  color:#2b170d;
  border:1px solid #8b5a32;
  box-shadow:inset 0 1px 5px rgba(75,38,16,.12);
}

/* Long guide text: more breathing room so text never touches frame */
.guide-body{
  padding:28px 30px !important;
  line-height:1.62;
}
.guide-body p:last-child{
  margin-bottom:0;
}

/* Responsive */
@media (max-width:1100px){
  :root{
    --wood-frame:16px;
    --wood-corner:30px;
    --panel-pad-x:21px;
    --panel-pad-y:20px;
  }
  .guide-meta > div{
    --wood-frame:11px;
    --wood-corner:22px;
    min-height:68px;
  }
}
@media (max-width:700px){
  :root{
    --wood-frame:14px;
    --wood-corner:26px;
    --panel-pad-x:18px;
    --panel-pad-y:18px;
  }
  .page-title{padding:22px 20px}
  .guide-meta > div{
    --wood-frame:10px;
    --wood-corner:20px;
    min-height:64px;
    padding:14px 15px;
  }
  .guide-body{
    padding:22px 20px !important;
  }
}


/* ============================================================
   3.2.1 – STARTSEITE: ILLUSTRIERTE BEREICHE (Overlay + Rahmen-Fix)
   ============================================================ */

/* Nur die Inhaltskarten der Startseite erhalten diese Bildhintergründe. */
.home-card,
.home-actions .action-card{
  position:relative;
  overflow:visible; /* wichtig: der Holzrahmen liegt außen und darf nicht abgeschnitten werden */
  isolation:isolate;
  background-color:#140b08;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  min-height:270px;
}

/*
 * Lesbarkeit der Textkacheln verbessern, ohne die Artworks zu "erschlagen".
 * Statt die Motive stark abzudunkeln, nutzen wir lieber eine etwas fokussiertere
 * Verlaufsmaske in der Textzone plus kräftigere Textschatten.
 */
.home-card::after,
.home-actions .action-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,4,3,.62) 0%,rgba(8,4,3,.50) 34%,rgba(8,4,3,.28) 68%,rgba(8,4,3,.10) 100%),
    linear-gradient(0deg,rgba(8,4,3,.34) 0%,rgba(8,4,3,.07) 58%,rgba(8,4,3,.16) 100%);
}

/*
 * 3.1.2 benutzt ::before für den Holzrahmen.
 * Darum bleiben alle Inhalte über dem Overlay, der Rahmen ganz oben.
 */
.home-card > *,
.home-actions .action-card > *{
  position:relative;
  z-index:2;
}

.home-card::before,
.home-actions .action-card::before{
  z-index:3;
}

.home-card h2,
.home-actions .action-card h2{
  color:#f0d492;
  text-shadow:
    0 2px 5px rgba(0,0,0,.96),
    0 0 1px rgba(0,0,0,.85);
}

.home-card p,
.home-actions .action-card p,
.home-guide-link strong{
  color:#f5ead5;
  text-shadow:
    0 1px 4px rgba(0,0,0,.95),
    0 0 1px rgba(0,0,0,.85);
}

.home-card .eyebrow,
.home-actions .action-card .eyebrow{
  color:#d9a65d;
  text-shadow:
    0 1px 4px rgba(0,0,0,.98),
    0 0 1px rgba(0,0,0,.88);
}

/* Flache, unaufdringliche Lesefläche nur für Textbausteine der Bildkacheln. */
.home-card > p,
.home-actions .action-card > p,
.home-card-guides .home-guide-link,
.home-card .eyebrow,
.home-actions .action-card .eyebrow,
.home-card h2,
.home-actions .action-card h2{
  position:relative;
}

.home-card > p,
.home-actions .action-card > p,
.home-card-guides .home-guide-link{
  padding:4px 7px;
  border-radius:7px;
  background:linear-gradient(90deg,rgba(10,5,4,.30) 0%,rgba(10,5,4,.18) 72%,rgba(10,5,4,0) 100%);
}

/* Die fünf gewünschten Motive */
.home-card-guild{
  background-image:url('../ui/home/home-guild.jpg') !important;
  background-position:center 43%;
}
.home-card-members{
  background-image:url('../ui/home/home-members.jpg') !important;
  background-position:center 44%;
}
.home-card-guides{
  background-image:url('../ui/home/home-guides.jpg') !important;
  background-position:center 48%;
}
.home-card-application{
  background-image:url('../ui/home/home-application.jpg') !important;
  background-position:center 52%;
}
.home-card-discord{
  background-image:url('../ui/home/home-discord.jpg') !important;
  background-position:center 46%;
}

/* Neueste Guides: weiterhin dynamisch max. drei Einträge. */
.home-card-guides .home-guide-link{
  padding:8px 9px;
  margin:0 -3px;
  border-bottom:1px solid rgba(230,183,103,.25);
  background:rgba(12,6,4,.56);
  backdrop-filter:blur(1px);
}
.home-card-guides .home-guide-link small{
  color:#d5b98b;
}

/* Untere Karten etwas niedriger als die drei Hauptkarten. */
.home-actions .action-card{
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

/* Buttons bleiben klar vor dem Motiv. */
.home-card .btn,
.home-actions .btn{
  z-index:4;
  box-shadow:0 3px 10px rgba(0,0,0,.55);
}

@media (max-width:1100px){
  .home-card{min-height:245px}
  .home-actions .action-card{min-height:175px}
}
@media (max-width:700px){
  .home-card,
  .home-actions .action-card{
    min-height:220px;
    background-position:center;
  }
}


/* ============================================================
   3.2.2 – BILDHINTERGRÜNDE FÜR DIE OBEREN TITEL-KACHELN
   Untere Inhaltskästen bleiben unverändert.
   ============================================================ */

/*
 * Gemeinsamer Titelkarten-Stil.
 * Das Holzrahmen-System aus 3.1.2 bleibt aktiv.
 * Der dunkle Verlauf sitzt direkt im background, damit ::before
 * weiterhin ausschließlich dem Rahmen gehört.
 */
.home-title,
body:has(.values) > main .page-title,
body:has(.member-grid) > main .page-title,
body:has(.guide-grid) > main .page-title,
body:has(.guide-detail) > main .page-title,
body:has(.application-form) > main .page-title,
body:has(.success) > main .page-title,
body:has(.discord-panel) > main .page-title{
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-clip:padding-box !important;
  color:#f6ead2 !important;
  text-shadow:0 2px 4px rgba(0,0,0,.92) !important;
  overflow:visible;
}

/* STARTSEITE – obere "Die Schwingen der Horde"-Kachel */
.home-title{
  background-image:
    linear-gradient(90deg,rgba(8,4,3,.46),rgba(8,4,3,.24),rgba(8,4,3,.46)),
    linear-gradient(0deg,rgba(8,4,3,.46),rgba(8,4,3,.06),rgba(8,4,3,.30)),
    url('../ui/home/home-welcome.jpg') !important;
  background-position:center 47% !important;
}

/* DIE GILDE – benutzt das gleiche Wirtshausmotiv wie die Startseiten-Kachel */
body:has(.values) > main .page-title{
  background-image:
    linear-gradient(90deg,rgba(8,4,3,.48),rgba(8,4,3,.22),rgba(8,4,3,.42)),
    linear-gradient(0deg,rgba(8,4,3,.46),rgba(8,4,3,.08),rgba(8,4,3,.28)),
    url('../ui/home/home-guild.jpg') !important;
  background-position:center 45% !important;
}

/* MITGLIEDER – Armee */
body:has(.member-grid) > main .page-title{
  background-image:
    linear-gradient(90deg,rgba(8,4,3,.50),rgba(8,4,3,.20),rgba(8,4,3,.42)),
    linear-gradient(0deg,rgba(8,4,3,.48),rgba(8,4,3,.08),rgba(8,4,3,.28)),
    url('../ui/home/home-members.jpg') !important;
  background-position:center 43% !important;
}

/* GUIDES – Bibliothek/Kriegsarchiv */
body:has(.guide-grid) > main .page-title,
body:has(.guide-detail) > main .page-title{
  background-image:
    linear-gradient(90deg,rgba(8,4,3,.52),rgba(8,4,3,.21),rgba(8,4,3,.44)),
    linear-gradient(0deg,rgba(8,4,3,.48),rgba(8,4,3,.08),rgba(8,4,3,.30)),
    url('../ui/home/home-guides.jpg') !important;
  background-position:center 48% !important;
}

/* BEWERBUNG – Schriftrolle/Feder */
body:has(.application-form) > main .page-title,
body:has(.success) > main .page-title{
  background-image:
    linear-gradient(90deg,rgba(8,4,3,.50),rgba(8,4,3,.20),rgba(8,4,3,.42)),
    linear-gradient(0deg,rgba(8,4,3,.46),rgba(8,4,3,.08),rgba(8,4,3,.28)),
    url('../ui/home/home-application.jpg') !important;
  background-position:center 52% !important;
}

/* DISCORD – Horde-/Discord-Treffpunkt */
body:has(.discord-panel) > main .page-title{
  background-image:
    linear-gradient(90deg,rgba(8,4,3,.50),rgba(8,4,3,.20),rgba(8,4,3,.42)),
    linear-gradient(0deg,rgba(8,4,3,.46),rgba(8,4,3,.08),rgba(8,4,3,.28)),
    url('../ui/home/home-discord.jpg') !important;
  background-position:center 46% !important;
}

/* Helle Schrift in den oberen Bildkacheln überschreibt gezielt die Pergament-Typografie. */
.home-title h1,
.home-title p,
.home-title .eyebrow,
body:has(.values) > main .page-title h1,
body:has(.values) > main .page-title p,
body:has(.values) > main .page-title .eyebrow,
body:has(.member-grid) > main .page-title h1,
body:has(.member-grid) > main .page-title p,
body:has(.member-grid) > main .page-title .eyebrow,
body:has(.guide-grid) > main .page-title h1,
body:has(.guide-grid) > main .page-title p,
body:has(.guide-grid) > main .page-title .eyebrow,
body:has(.guide-detail) > main .page-title h1,
body:has(.guide-detail) > main .page-title p,
body:has(.guide-detail) > main .page-title .eyebrow,
body:has(.application-form) > main .page-title h1,
body:has(.application-form) > main .page-title p,
body:has(.application-form) > main .page-title .eyebrow,
body:has(.success) > main .page-title h1,
body:has(.success) > main .page-title p,
body:has(.success) > main .page-title .eyebrow,
body:has(.discord-panel) > main .page-title h1,
body:has(.discord-panel) > main .page-title p,
body:has(.discord-panel) > main .page-title .eyebrow{
  color:#f5ead5 !important;
  text-shadow:0 2px 4px rgba(0,0,0,.96) !important;
}

/* Eyebrow etwas goldener für klare Hierarchie. */
.home-title .eyebrow,
body:has(.values) > main .page-title .eyebrow,
body:has(.member-grid) > main .page-title .eyebrow,
body:has(.guide-grid) > main .page-title .eyebrow,
body:has(.guide-detail) > main .page-title .eyebrow,
body:has(.application-form) > main .page-title .eyebrow,
body:has(.success) > main .page-title .eyebrow,
body:has(.discord-panel) > main .page-title .eyebrow{
  color:#ddb66d !important;
}

/*
 * Wichtig:
 * Es werden ausschließlich die oberen page-title-Kacheln geändert.
 * .guide-body, .guide-card, .application-form und .discord-panel
 * behalten ihren bisherigen Pergament-Hintergrund.
 */


/* ============================================================
   3.3.0 – GRAFISCHE BUTTONS
   Buttontexte sind direkt Bestandteil der PNG-Dateien.
   Linkziele/Funktionen bleiben unverändert.
   ============================================================ */

.image-btn{
  display:inline-block;
  width:min(190px, 100%);
  line-height:0;
  text-decoration:none;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  margin-top:12px;
  cursor:pointer;
  position:relative;
  z-index:5;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.55));
  transition:transform .16s ease, filter .16s ease;
}

.image-btn img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  user-select:none;
}

.image-btn:hover,
.image-btn:focus-visible{
  transform:translateY(-2px) scale(1.025);
  filter:
    drop-shadow(0 5px 9px rgba(0,0,0,.62))
    brightness(1.10);
}

.image-btn:active{
  transform:translateY(1px) scale(.985);
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.50))
    brightness(.94);
}

.image-btn:focus-visible{
  outline:2px solid rgba(255,197,93,.88) !important;
  outline-offset:4px;
}

/* Formularbutton ist ein echtes <button>, optisch aber ausschließlich das Bild. */
button.image-btn{
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
}

/* Längerer Bewerbungstext braucht etwas mehr Breite. */
.image-btn-submit{
  width:min(255px, 100%);
}

/* Discord-Button sitzt innerhalb des hellen Inhaltsfeldes etwas kompakter. */
.discord-panel .image-btn{
  width:min(190px, 100%);
}

/* Die drei Buttons in den Startseitenkarten bleiben proportional und gut sichtbar. */
.home-card .image-btn{
  width:min(180px, 78%);
  margin-top:auto;
  padding-top:10px !important;
}

/* Auf kleinen Geräten nicht unnötig schrumpfen. */
@media (max-width:700px){
  .home-card .image-btn{
    width:min(190px, 82%);
  }
  .image-btn-submit{
    width:min(235px, 100%);
  }
}


/* ============================================================
   3.4.0 – SANFTE INHALTSNAVIGATION
   Nur der .master-content-Bereich wird gewechselt.
   Navigation, Hero, Footer und sämtliche Bilder bleiben stehen.
   ============================================================ */

.master-content{
  transition:
    opacity .19s ease,
    transform .19s ease,
    filter .19s ease;
  transform-origin:50% 0;
}

.master-content.content-leaving{
  opacity:0;
  transform:translateY(5px) scale(.995);
  filter:brightness(.62);
  pointer-events:none;
}

.master-content.content-entering{
  opacity:0;
  transform:translateY(8px) scale(.996);
  filter:brightness(.72);
  transition:none;
}

.master-content.content-entering.content-entering-active{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:brightness(1);
  transition:
    opacity .28s ease,
    transform .28s ease,
    filter .28s ease;
}

html.ajax-nav-busy .master-nav-hotspots{
  cursor:progress;
}

/* Nutzer mit reduzierten Animationen bekommen einen direkten Wechsel. */
@media (prefers-reduced-motion: reduce){
  .master-content,
  .master-content.content-leaving,
  .master-content.content-entering,
  .master-content.content-entering.content-entering-active{
    transition:none !important;
    transform:none !important;
    filter:none !important;
  }
}


/* ============================================================
   3.4.1 – BEWERBUNGSFORMULAR: LESBARE BESCHRIFTUNGEN
   Nur Textfarben/Abstände im Formular werden angepasst.
   ============================================================ */

body:has(.application-form) .application-form label,
body:has(.application-form) .application-form .form-label,
body:has(.application-form) .application-form legend{
  color:#4a2817 !important;
  font-weight:700;
  text-shadow:0 1px 0 rgba(255,245,218,.72);
}

body:has(.application-form) .application-form label{
  display:block;
  margin-bottom:7px;
  line-height:1.25;
}

body:has(.application-form) .application-form input,
body:has(.application-form) .application-form textarea,
body:has(.application-form) .application-form select{
  color:#2b170d !important;
  background:rgba(255,248,229,.90) !important;
  border:1px solid #8b5a32 !important;
}

body:has(.application-form) .application-form input::placeholder,
body:has(.application-form) .application-form textarea::placeholder{
  color:#8c715d !important;
  opacity:1;
}

/* Etwas mehr Abstand zwischen Beschriftung und Eingabefeld */
body:has(.application-form) .application-form .field,
body:has(.application-form) .application-form .form-field{
  margin-bottom:17px;
}

/* ============================================================
   3.4.2 – DIE GILDE: Bildkacheln + Pergament-Mittelbereich
   ============================================================ */

.guild-story{
  background:
    linear-gradient(rgba(255,242,210,.045),rgba(166,106,49,.035)),
    url('../ui/content/parchment-bg.png') center/cover no-repeat !important;
  background-clip:padding-box !important;
  color:var(--parchment-ink) !important;
  text-shadow:none !important;
  min-height:165px;
}

.guild-story h2,
.guild-story h3,
.guild-story h4{
  color:#3a1d0e;
  text-shadow:0 1px 0 rgba(255,240,205,.45);
}

.guild-story p,
.guild-story li,
.guild-story strong,
.guild-story em{
  color:var(--parchment-ink);
}

.guild-values{
  gap:18px;
  align-items:stretch;
}

.guild-values .guild-value{
  position:relative;
  min-height:265px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background-color:#140b08;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  overflow:visible;
  isolation:isolate;
}

.guild-values .guild-value::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(0deg, rgba(8,4,3,.68) 0%, rgba(8,4,3,.28) 44%, rgba(8,4,3,.08) 100%),
    linear-gradient(90deg, rgba(8,4,3,.42) 0%, rgba(8,4,3,.10) 52%, rgba(8,4,3,.26) 100%);
}

.guild-values .guild-value > *{
  position:relative;
  z-index:2;
}

.guild-values .guild-value h3{
  color:#f0d492;
  text-shadow:0 2px 4px rgba(0,0,0,.9);
  margin-bottom:.45rem;
}

.guild-values .guild-value p{
  color:#f4e8d2;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
  margin-bottom:0;
  line-height:1.45;
}

.guild-value-community{
  background-image:url('../ui/guild/guild-community.jpg') !important;
  background-position:center 48% !important;
}

.guild-value-real-life{
  background-image:url('../ui/guild/guild-real-life.jpg') !important;
  background-position:center 44% !important;
}

.guild-value-veterans{
  background-image:url('../ui/guild/guild-veterans.jpg') !important;
  background-position:center 42% !important;
}

@media (max-width:1100px){
  .guild-values .guild-value{
    min-height:250px;
  }
}

@media (max-width:700px){
  .guild-story{
    min-height:0;
  }
  .guild-values .guild-value{
    min-height:230px;
    background-position:center !important;
  }
}


/* ============================================================
   3.5.0 – MITGLIEDERFOTOS ALS KACHELHINTERGRUND
   ============================================================ */
.member-card.has-member-photo{
  min-height:235px;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center 36% !important;
  align-items:flex-end;
  color:#f5ead5;
  text-shadow:0 1px 3px rgba(0,0,0,.92);
}
.member-card.has-member-photo h3{
  color:#f0d492;
  text-shadow:0 2px 4px rgba(0,0,0,.95);
}
.member-card.has-member-photo .meta,
.member-card.has-member-photo small{
  color:#e2c99f;
}
.member-card.has-member-photo .avatar.sigil{
  background:rgba(20,8,5,.72);
  backdrop-filter:blur(2px);
}
.member-card.has-member-photo .member-copy{
  max-width:78%;
}
@media (max-width:700px){
  .member-card.has-member-photo{
    min-height:220px;
    background-position:center !important;
  }
  .member-card.has-member-photo .member-copy{max-width:100%}
}


/* ============================================================
   3.5.5 – GILDENRANG AUF MITGLIEDERKARTEN
   ============================================================ */
.member-card .member-rank{
  margin:.18rem 0 .28rem;
  color:#d7a45e;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.member-card.has-member-photo .member-rank{
  color:#f0cf91;
  text-shadow:0 1px 3px rgba(0,0,0,.92);
}


/* ============================================================
   3.5.7 – RASSENICON + RANGRAHMEN
   Ersetzt ausschließlich den bisherigen Buchstaben-Kreis.
   ============================================================ */
.member-race-avatar{
  position:relative;
  flex:0 0 82px;
  width:82px;
  height:82px;
  margin-top:1px;
  z-index:5;
}

.member-race-avatar-inner{
  position:absolute;
  left:16%;
  top:16%;
  width:68%;
  height:68%;
  overflow:hidden;
  background:#140b08;
  display:grid;
  place-items:center;
}

.member-race-icon{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.member-race-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:#f0d092;
  font-weight:700;
  font-size:1.15rem;
  background:radial-gradient(circle,#35180f,#110807 70%);
}

.member-rank-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  pointer-events:none;
  z-index:2;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.65));
}

/* Der alte Buchstaben-Kreis wird auf Mitgliederkarten nicht mehr benötigt. */
.member-card > .avatar.sigil{
  display:none;
}

@media (max-width:700px){
  .member-race-avatar{
    flex-basis:76px;
    width:76px;
    height:76px;
  }
}


/* ============================================================
   3.5.9 – MITGLIEDERKARTEN OBEN AUSRICHTEN
   Nur Position von Icon/Rahmen und Textfluss.
   ============================================================ */

/* Bildkarten nicht mehr am unteren Rand ausrichten. */
.member-card.has-member-photo{
  align-items:flex-start !important;
}

/* Auch normale Mitgliederkarten beginnen oben. */
.member-card{
  align-items:flex-start !important;
}

/* Rassenicon + Rangrahmen klar oben links platzieren. */
.member-race-avatar{
  align-self:flex-start;
  margin-top:0;
}

/* Text läuft von oben nach unten, direkt neben dem Icon. */
.member-card .member-copy{
  align-self:flex-start;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-width:0;
}

.member-card .member-copy h3{
  margin-top:0;
}

.member-card.has-member-photo .member-copy{
  max-width:78%;
}

/* Mobile bleibt ebenfalls von oben aufgebaut. */
@media (max-width:700px){
  .member-card,
  .member-card.has-member-photo{
    align-items:flex-start !important;
  }
  .member-race-avatar,
  .member-card .member-copy{
    align-self:flex-start;
  }
}


/* ============================================================
   3.6.0 – RASSENICON-CROP
   Die WoW-Rassenicons besitzen selbst bereits einen eingebauten
   quadratischen Rand. Dieser wird innerhalb unseres Rangrahmens
   bewusst weggezoomt, damit nur das Portrait sichtbar bleibt.
   ============================================================ */
.member-race-avatar-inner{
  overflow:hidden !important;
}

.member-race-icon{
  width:132% !important;
  height:132% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
}


/* ============================================================
   3.6.1 – RASSENICON-CROP FEINABSTIMMUNG
   Weniger Zoom, damit mehr vom Gesicht sichtbar bleibt.
   ============================================================ */
.member-race-avatar-inner{
  left:14% !important;
  top:14% !important;
  width:72% !important;
  height:72% !important;
  overflow:hidden !important;
}

.member-race-icon{
  width:116% !important;
  height:116% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
}


/* ============================================================
   3.6.2 – BILDER IN DISCORD-GUIDES
   ============================================================ */
.guide-body .guide-image-wrap{
  display:block;
  width:100%;
  margin:1.35rem 0;
  text-align:center;
}

.guide-body .guide-inline-image{
  display:block;
  width:auto;
  max-width:100%;
  max-height:min(760px,72vh);
  height:auto;
  margin:0 auto;
  object-fit:contain;
  border:1px solid rgba(111,69,39,.78);
  box-shadow:
    0 0 0 3px rgba(20,10,6,.72),
    0 9px 22px rgba(0,0,0,.38);
}

.guide-body .guide-inline-link{
  color:#8b3a24;
  text-decoration:underline;
  text-underline-offset:2px;
  overflow-wrap:anywhere;
}

.guide-body .guide-inline-link:hover{
  color:#b84c2c;
}

/* Discord can place an attachment after text in the same generated paragraph.
   Images stay on their own visual line without changing the guide text flow. */
.guide-body p .guide-image-wrap{
  margin-top:1rem;
  margin-bottom:.35rem;
}

@media(max-width:700px){
  .guide-body .guide-inline-image{
    max-height:65vh;
  }
}


/* ============================================================
   3.6.3 – GUIDE-AUTOR
   ============================================================ */
.guide-detail .page-title .guide-author{
  margin:.28rem 0 .45rem !important;
  color:#d4a35f !important;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:none;
  text-shadow:0 1px 2px rgba(0,0,0,.75);
}

.guide-detail .page-title .guide-description{
  margin:.25rem auto 0 !important;
}


/* ============================================================
   3.6.5 – FOOTER-KLICKBEREICHE NACH LINKS KORRIGIERT
   Nur die unsichtbaren Hotspots für Impressum, Datenschutz,
   Kontakt und Verwaltung werden horizontal verschoben.
   ============================================================ */
.final-subpage .sub-footer-hotspots{
  right:10.5% !important;
}


/* ============================================================
   3.6.6 – TATSÄCHLICHE FOOTER-HOTSPOTS NACH LINKS
   Vorher wurde versehentlich der alte .sub-footer-hotspots-
   Selektor angepasst. Aktiv ist aber .master-footer-hotspots.
   ============================================================ */
.master-footer-hotspots a:nth-child(1){
  left:74.8% !important; /* Impressum */
}
.master-footer-hotspots a:nth-child(2){
  left:80.4% !important; /* Datenschutz */
}
.master-footer-hotspots a:nth-child(3){
  left:86.9% !important; /* Kontakt */
}


/* ============================================================
   3.6.7 – FOOTER-HOTSPOTS EXAKT AUF DIE SCHRIFT
   Werte anhand der markierten Bereiche im 1911×415 Screenshot.
   Prozentwerte sorgen dafür, dass die Flächen bei 1080p,
   1440p und 4K proportional an derselben Stelle bleiben.
   ============================================================ */
.master-footer-hotspots a{
  top:35.2% !important;
  height:8.2% !important;
}

.master-footer-hotspots a:nth-child(1){
  left:77.03% !important;
  width:4.92% !important;
}

.master-footer-hotspots a:nth-child(2){
  left:83.62% !important;
  width:5.39% !important;
}

.master-footer-hotspots a:nth-child(3){
  left:90.53% !important;
  width:3.98% !important;
}


/* ============================================================
   3.6.8 – FOOTER-HOTSPOTS VERTIKAL ZURÜCK AUF DIE LINKS
   3.6.7 hatte die Flächen versehentlich zu hoch gesetzt.
   Horizontal bleibt die aktuelle Position erhalten.
   ============================================================ */
.master-footer-hotspots a{
  top:58% !important;
  height:9% !important;
}


/* ============================================================
   3.7.0 – MOBILE RESPONSIVE
   Ausschließlich für schmale Displays. Desktop/1080p/1440p/4K
   bleibt vollständig unter den bisherigen Regeln.
   ============================================================ */
@media (max-width:820px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
  }

  body.master-layout{
    min-width:0 !important;
    background-attachment:scroll !important;
    background-size:900px auto !important;
  }

  /* Mobile Navigation: bewusst vereinfacht statt die breite
     Desktop-Grafik winzig zusammenzuquetschen. Die vorhandenen
     Linkziele bleiben exakt dieselben. */
  .master-nav{
    position:sticky !important;
    top:0;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    line-height:normal !important;
    overflow:visible !important;
    background:linear-gradient(180deg,#21110c,#0c0705) !important;
    border-bottom:1px solid #704020;
    box-shadow:0 5px 16px rgba(0,0,0,.62);
    filter:none !important;
  }
  .master-nav picture{
    display:none !important;
  }
  .master-nav-hotspots{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    display:flex !important;
    gap:6px;
    padding:7px 8px;
    overflow-x:auto;
    overflow-y:hidden;
    pointer-events:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .master-nav-hotspots::-webkit-scrollbar{display:none}
  .master-nav-hotspots a,
  .master-nav-hotspots a:nth-child(n){
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    width:auto !important;
    height:42px !important;
    min-width:96px;
    flex:0 0 auto;
    display:flex !important;
    align-items:center;
    justify-content:center;
    padding:0 12px;
    pointer-events:auto !important;
    border:1px solid #6d3c23;
    border-radius:5px;
    background:linear-gradient(180deg,#392018,#1b0e0a);
    box-shadow:inset 0 1px rgba(255,215,151,.08),0 2px 5px rgba(0,0,0,.35);
    color:#efd4a0 !important;
    text-decoration:none;
    font:700 .72rem/1 Georgia,"Times New Roman",serif;
    letter-spacing:.025em;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .master-nav-hotspots a::before{
    content:attr(aria-label);
  }
  .master-nav-hotspots a:active{
    background:linear-gradient(180deg,#71261d,#35100c);
  }

  /* Hero bleibt dasselbe Mastermotiv, wird mobil lediglich
     zentral beschnitten. Keine Masterdatei wird verändert. */
  .master-hero{
    width:100% !important;
    height:clamp(178px,49vw,235px) !important;
    min-height:0 !important;
    overflow:hidden;
    margin:0 !important;
  }
  .master-hero picture{
    display:block;
    width:100%;
    height:100%;
  }
  .master-hero img{
    display:block;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:cover !important;
    object-position:center 48% !important;
  }
  .master-hero:after{height:16%}

  .master-content{
    width:calc(100% - 20px) !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:16px 0 30px !important;
  }

  .page-title,
  .home-title{
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    margin:0 auto 14px !important;
    padding:20px 17px !important;
    background-position:center !important;
  }
  .page-title h1{font-size:clamp(1.55rem,7vw,2.15rem) !important}
  .page-title p{font-size:.92rem;line-height:1.45}

  .values,
  .member-grid,
  .guide-grid,
  .home-grid,
  .home-actions,
  .guild-values{
    grid-template-columns:1fr !important;
    gap:13px !important;
  }

  .panel,
  .member-card,
  .guide-card,
  .action-card,
  .application-form,
  .discord-panel{
    max-width:100% !important;
  }

  .panel{
    margin:13px 0 !important;
    padding:19px 17px !important;
  }

  .home-grid{margin-top:13px !important}
  .home-card,
  .home-actions .action-card{
    min-height:205px !important;
    padding:19px 17px !important;
    background-position:center !important;
  }
  .home-actions .action-card{min-height:170px !important}

  .guild-story{min-height:0 !important}
  .guild-values .guild-value{
    min-height:215px !important;
    padding:18px 17px !important;
  }

  /* Mitglieder bleiben kompakt, Avatar oben links. */
  .member-card,
  .member-card.has-member-photo{
    min-height:0 !important;
    padding:16px !important;
    gap:9px !important;
    align-items:flex-start !important;
    background-position:center !important;
  }
  .member-card.has-member-photo{min-height:190px !important}
  .member-race-avatar{
    flex:0 0 68px !important;
    width:68px !important;
    height:68px !important;
  }
  .member-card .member-copy,
  .member-card.has-member-photo .member-copy{
    min-width:0;
    max-width:calc(100% - 77px) !important;
  }
  .member-card h3{font-size:1rem}
  .member-card p,.member-card small{overflow-wrap:anywhere}

  /* Guides */
  .guide-card{padding:17px !important}
  .guide-meta{
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-bottom:12px !important;
  }
  .guide-meta>div{padding:13px 14px !important}
  .guide-body{
    padding:20px 17px !important;
    font-size:.95rem;
    line-height:1.62 !important;
    overflow-wrap:anywhere;
  }
  .guide-body img,
  .guide-inline-image{
    max-width:100% !important;
    height:auto !important;
  }
  .guide-body table{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  /* Formulare: 16px verhindert den automatischen Safari-Zoom auf iPhones. */
  .form-grid{grid-template-columns:1fr !important}
  input,textarea,select{
    max-width:100%;
    font-size:16px !important;
  }
  textarea{min-height:120px}
  .image-btn,
  .image-btn-submit{
    max-width:100% !important;
  }

  .discord-panel{
    display:flex !important;
    flex-direction:column;
    align-items:flex-start !important;
    gap:12px !important;
  }
  .discord-icon{flex:0 0 auto}

  /* Footer mobil als klare Linkleiste statt einer unlesbar kleinen
     Desktopgrafik. Linkziele kommen unverändert aus dem HTML. */
  .master-footer{
    width:100% !important;
    margin-top:auto !important;
    padding:12px 10px calc(14px + env(safe-area-inset-bottom));
    line-height:normal !important;
    background:linear-gradient(180deg,#170c08,#080504) !important;
    border-top:1px solid #63371f;
    filter:none !important;
  }
  .master-footer picture{
    display:none !important;
  }
  .master-footer-hotspots{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    pointer-events:auto !important;
  }
  .master-footer-hotspots a,
  .master-footer-hotspots a:nth-child(n){
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    width:auto !important;
    height:42px !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    padding:0 10px;
    pointer-events:auto !important;
    border:1px solid #59331f;
    border-radius:5px;
    background:#160c08;
    color:#d9c19b !important;
    text-decoration:none;
    font:700 .75rem/1 system-ui,-apple-system,sans-serif;
  }
  .master-footer-hotspots a::before{
    content:attr(aria-label);
  }
}

@media (max-width:430px){
  .master-nav-hotspots a,
  .master-nav-hotspots a:nth-child(n){
    min-width:91px;
    padding:0 10px;
    font-size:.68rem;
  }
  .master-hero{height:185px !important}
  .master-content{width:calc(100% - 14px) !important}
  .page-title,.home-title{padding:18px 14px !important}
  .panel{padding:17px 14px !important}
  .home-card,.home-actions .action-card{padding:17px 14px !important}
  .member-card .member-copy,
  .member-card.has-member-photo .member-copy{max-width:calc(100% - 72px) !important}
}


/* ============================================================
   3.7.1 – MOBILE NAV/FOOTER BUTTONS
   Nur mobile Darstellung. Desktop bleibt unverändert.
   Stilistisch näher an den roten Horde-Buttons der Seite.
   ============================================================ */
@media (max-width:820px){
  .master-nav-hotspots a,
  .master-nav-hotspots a:nth-child(n){
    min-width:102px !important;
    height:44px !important;
    padding:0 14px !important;
    border:1px solid #b86b38 !important;
    border-radius:6px !important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 28%),
      linear-gradient(180deg,#8c241b 0%,#5c150f 52%,#33100c 100%) !important;
    box-shadow:
      inset 0 1px rgba(255,225,164,.28),
      inset 0 -1px rgba(0,0,0,.65),
      0 0 0 2px rgba(23,8,5,.85),
      0 4px 10px rgba(0,0,0,.45) !important;
    color:#f7dfad !important;
    text-shadow:0 2px 2px #000 !important;
    letter-spacing:.045em !important;
  }

  .master-nav-hotspots a::after{
    content:"" !important;
    position:absolute;
    left:18%;
    right:18%;
    bottom:4px;
    height:1px;
    background:linear-gradient(90deg,transparent,#e4a25d,transparent);
    opacity:.5;
  }

  .master-nav-hotspots a:active{
    transform:translateY(1px);
    filter:brightness(.96);
    box-shadow:
      inset 0 2px 4px rgba(0,0,0,.35),
      0 0 0 2px rgba(23,8,5,.85) !important;
  }

  .master-footer-hotspots{
    gap:9px !important;
  }

  .master-footer-hotspots a,
  .master-footer-hotspots a:nth-child(n){
    min-height:44px !important;
    border:1px solid #8e5730 !important;
    border-radius:6px !important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 30%),
      linear-gradient(180deg,#3a2116,#1f100b 58%,#120a07) !important;
    box-shadow:
      inset 0 1px rgba(255,216,149,.14),
      inset 0 -1px rgba(0,0,0,.62),
      0 0 0 2px rgba(11,5,3,.78),
      0 3px 8px rgba(0,0,0,.35) !important;
    color:#efd4a4 !important;
    text-shadow:0 2px 2px #000 !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:.76rem !important;
    letter-spacing:.03em;
  }

  .master-footer-hotspots a::after{
    content:"" !important;
    position:absolute;
    left:20%;
    right:20%;
    bottom:5px;
    height:1px;
    background:linear-gradient(90deg,transparent,#a75a31,transparent);
    opacity:.5;
  }

  .master-footer-hotspots a:active{
    transform:translateY(1px);
    filter:brightness(.96);
  }
}

@media (max-width:430px){
  .master-nav-hotspots a,
  .master-nav-hotspots a:nth-child(n){
    min-width:96px !important;
    padding:0 12px !important;
    font-size:.69rem !important;
  }

  .master-footer-hotspots a,
  .master-footer-hotspots a:nth-child(n){
    font-size:.72rem !important;
  }
}


/* ============================================================
   3.7.4 – KLICKBARER LINKTEXT IN GUIDES
   ============================================================ */
.guide-body .guide-inline-link,
.guide-body .guide-bare-link{
  color:#b95a36 !important;
  text-decoration:underline !important;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.guide-body .guide-inline-link:hover,
.guide-body .guide-bare-link:hover{
  color:#dc7a4d !important;
}


@media (max-width:700px){
  .home-card > p,
  .home-actions .action-card > p,
  .home-card-guides .home-guide-link{
    padding:4px 6px;
    border-radius:6px;
    background:linear-gradient(90deg,rgba(10,5,4,.38) 0%,rgba(10,5,4,.24) 74%,rgba(10,5,4,0) 100%);
  }
}


/* ============================================================
   3.7.7 – STARTSEITE: "GEMEINSCHAFT / DIE GILDE"
   Diese eine Kachel ist durch ihr Motiv deutlich heller/unruhiger.
   Deshalb bekommt nur sie eine minimal stärkere Textzone.
   ============================================================ */
.home-card-guild::after{
  background:
    linear-gradient(90deg,
      rgba(8,4,3,.74) 0%,
      rgba(8,4,3,.62) 38%,
      rgba(8,4,3,.38) 70%,
      rgba(8,4,3,.14) 100%),
    linear-gradient(0deg,
      rgba(8,4,3,.38) 0%,
      rgba(8,4,3,.10) 58%,
      rgba(8,4,3,.18) 100%) !important;
}

.home-card-guild > p{
  background:
    linear-gradient(90deg,
      rgba(10,5,4,.46) 0%,
      rgba(10,5,4,.30) 74%,
      rgba(10,5,4,0) 100%) !important;
}

.home-card-guild h2,
.home-card-guild .eyebrow,
.home-card-guild > p{
  text-shadow:
    0 1px 5px rgba(0,0,0,.98),
    0 0 1px rgba(0,0,0,.92) !important;
}


/* ============================================================
   3.7.8 – AKTIVE DESKTOP-NAVIGATION ALS BILD-OVERLAY
   Die bestehenden nav-master-*-overlay.png bleiben unverändert.
   ============================================================ */
.master-nav > picture.master-nav-active{
  position:absolute;
  inset:0 auto auto 0;
  display:block;
  width:100vw;
  height:auto;
  z-index:1;
  pointer-events:none;
}
.master-nav > picture.master-nav-active img{
  display:block;
  width:100vw;
  max-width:none;
  height:auto;
  object-fit:contain;
  object-position:top center;
}

/* Hotspots bleiben immer über der Grafik. */
.master-nav-hotspots{
  z-index:2;
}

/* Auf Mobilgeräten läuft weiterhin die bereits gebaute kompakte Navigation. */
@media (max-width:820px){
  .master-nav > picture.master-nav-active{
    display:none !important;
  }
}

/* ============================================================
   3.8.7 – HERO-UNTERKANTE: CSS-DUNKELVERLAUF ENTFERNT
   Der Hero-Master selbst bleibt unverändert.
   ============================================================ */
.master-hero::after{
  content:none !important;
  display:none !important;
  background:none !important;
  height:0 !important;
}


/* ============================================================
   3.8.9 – HERO 5 PX NACH OBEN
   Schließt den minimalen dunklen Spalt direkt unter der Desktop-Navigation.
   Mobile bleibt durch die bestehende margin:0!important-Regel unverändert.
   ============================================================ */
@media (min-width:821px){
  .master-hero{
    margin-top:-5px !important;
  }
}

/* ============================================================
   3.9.0 – RAIDS TITLE IMAGE + PARCHMENT CONTENT PANEL
   ============================================================ */
.raids-title-card{
  /*
   * Gleiche Geometrie wie die anderen oberen Unterseiten-Kacheln.
   * WICHTIG: overflow muss visible bleiben, weil der Holzrahmen
   * als ::before außerhalb der transparenten Border sitzt.
   */
  position:relative;
  overflow:visible !important;
  min-height:0;
  display:block;
  text-align:center;
  background-image:
    linear-gradient(90deg,rgba(8,4,3,.50),rgba(8,4,3,.20),rgba(8,4,3,.42)),
    linear-gradient(0deg,rgba(8,4,3,.46),rgba(8,4,3,.08),rgba(8,4,3,.28)),
    url('../ui/raids/raids-journey.png') !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center 48% !important;
  background-clip:padding-box !important;
  color:#f6ead2 !important;
  text-shadow:0 2px 4px rgba(0,0,0,.92) !important;
}
.raids-title-card > *{
  position:relative;
  z-index:2;
}
.raids-title-card::after{content:none !important;}
.raids-title-card .eyebrow{
  color:#f0d492;
  text-shadow:0 1px 3px rgba(0,0,0,.88);
}
.raids-title-card h1{
  color:#fff2d7;
  text-shadow:0 2px 6px rgba(0,0,0,.88);
}
.raids-title-card p{
  color:#f5ead7;
  max-width:55ch;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.raids-info-panel{
  background:
    linear-gradient(rgba(255,242,210,.045),rgba(166,106,49,.035)),
    url('../ui/content/parchment-bg.png') center/cover no-repeat !important;
  background-clip:padding-box !important;
  color:var(--parchment-ink);
  text-shadow:none;
}
.raids-info-panel h2,
.raids-info-panel h3,
.raids-info-panel h4{
  color:#3a1d0e;
  text-shadow:0 1px 0 rgba(255,240,205,.45);
}
.raids-info-panel p,
.raids-info-panel li{
  color:var(--parchment-ink);
}
.raids-info-panel .eyebrow,
.raids-info-panel .muted{
  color:var(--parchment-muted);
}
@media (max-width:1100px){
  .raids-title-card{background-position:center 48% !important;}
}
@media (max-width:700px){
  .raids-title-card{background-position:center 48% !important;}
}


/* ============================================================
   3.9.6 – Öffentliche Raidübersicht
   ============================================================ */
.raid-public-section{margin:28px 0 18px}
.raid-public-heading{text-align:center;margin-bottom:16px}
.raid-public-heading h2{margin:0;color:#ecd18f;text-shadow:0 2px 3px #000}
.raid-public-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.raid-public-card{
  position:relative;
  overflow:visible;
  padding:24px 26px!important;
  background:
    radial-gradient(circle at 88% 8%,rgba(148,50,30,.16),transparent 38%),
    linear-gradient(180deg,rgba(34,17,12,.97),rgba(8,6,5,.99))!important;
}
.raid-public-card::after{
  content:"";position:absolute;inset:10px;pointer-events:none;
  border:1px solid rgba(201,144,77,.13)
}
.raid-card-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;position:relative;z-index:2}
.raid-card-top h3{margin:0;color:#f0d492;font-size:1.35rem;text-shadow:0 2px 3px #000}
.raid-capacity{
  min-width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  border:1px solid #93613c;background:#120b08;color:#f0d492;font-weight:700;
  box-shadow:inset 0 0 12px rgba(142,55,30,.38)
}
.raid-instance{margin:.55rem 0 12px;color:#ead9bc;font-weight:700;position:relative;z-index:2}
.raid-public-meta{display:flex;flex-wrap:wrap;gap:8px 14px;color:#bca98a;font-size:.9rem;position:relative;z-index:2}
.raid-role-bars{display:grid;gap:10px;margin:18px 0;position:relative;z-index:2}
.raid-role-row>div:first-child{display:flex;justify-content:space-between;gap:14px;font-size:.88rem}
.raid-role-row strong{color:#e7c77e}
.raid-role-track{height:5px;background:#211711;border:1px solid #4a3021;margin-top:5px;overflow:hidden}
.raid-role-track i{display:block;height:100%;background:linear-gradient(90deg,#803322,#c17a39)}
.raid-card-bottom{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;border-top:1px solid rgba(151,93,51,.3);
  padding-top:14px;color:#bca98a;font-size:.86rem;position:relative;z-index:2
}
.raid-discord-link{
  margin-left:auto;text-decoration:none;color:#f2d49b;border-bottom:1px solid rgba(242,212,155,.45)
}
.raid-discord-link:hover{color:#fff0c8}
.raid-public-status-cancelled{opacity:.7}
.raid-archive{margin-top:22px}
.raid-archive summary{cursor:pointer;font-weight:700;color:#4a2614}
.raid-archive-list{display:grid;gap:8px;margin-top:16px}
.raid-archive-list>div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(91,57,30,.25);padding:8px 0}
.raid-archive-list span{color:#6d5036}
@media(max-width:900px){
  .raid-public-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .raid-public-card{padding:20px!important}
  .raid-card-top h3{font-size:1.15rem}
  .raid-capacity{min-width:46px;height:46px}
  .raid-discord-link{width:100%;margin-left:0;margin-top:4px}
  .raid-archive-list>div{display:block}
  .raid-archive-list span{display:block;margin-top:3px}
}


/* 3.9.7 – Raidbilder auf öffentlichen Karten */
.raid-public-card{padding:0!important;overflow:visible}
.raid-card-art{
  min-height:190px;
  margin:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  border-bottom:1px solid rgba(176,111,58,.45);
  position:relative;
}
.raid-card-art-badge{
  position:absolute;right:14px;bottom:12px;
  padding:5px 8px;border:1px solid rgba(222,175,106,.5);
  background:rgba(11,7,5,.78);color:#e8ca8d;
  font:bold .62rem Arial,sans-serif;letter-spacing:.09em;
}
.raid-card-content{padding:22px 26px 24px}
.raid-art-source{
  margin-top:11px;padding-top:9px;border-top:1px solid rgba(151,93,51,.18);
  font-size:.72rem;text-align:right
}
.raid-art-source a{color:#806c55;text-decoration:none}
.raid-art-source a:hover{color:#c4a77e}
@media(max-width:600px){
  .raid-card-art{min-height:145px}
  .raid-card-content{padding:19px 20px 21px}
}


/* ============================================================
   3.9.9 – Raids: Kommende / Vergangene als eigene Abschnitte
   ============================================================ */
.raid-public-heading p{
  max-width:720px;
  margin:.55rem auto 0;
  color:#baa78b;
  line-height:1.5;
}
.raid-upcoming-section{
  margin-top:10px;
}
.raid-past-section{
  margin-top:42px;
}
.raid-past-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.raid-past-card{
  padding:20px 22px!important;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
}
.raid-past-card h3{
  margin:.1rem 0 .35rem;
  color:#e7c77e;
}
.raid-past-card p{
  margin:0;
  color:#b8a58a;
}
.raid-past-meta{
  display:grid;
  gap:6px;
  min-width:170px;
  text-align:right;
  color:#9f8b70;
  font-size:.86rem;
}
.raid-public-status-cancelled.raid-past-card{
  opacity:.72;
}
@media(max-width:850px){
  .raid-past-list{grid-template-columns:1fr}
}
@media(max-width:600px){
  .raid-past-card{display:block}
  .raid-past-meta{
    min-width:0;
    text-align:left;
    margin-top:12px;
  }
}

/* ============================================================
   3.3.1 – STARTSEITE: GILDENÜBERSICHT
   Dynamisch: Raid/Briefrabe + editierbare Rekrutierung/Status
   ============================================================ */
.home-guild-dashboard{margin-top:20px}
.home-dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.home-dashboard-card{margin:0!important;min-height:245px;display:flex;flex-direction:column;position:relative;overflow:visible}
.home-dashboard-card h2{margin:.15rem 0 .65rem;color:#4a2614}
.home-dashboard-card h3{margin:.1rem 0 .5rem;color:#5b2d17;font-size:1.05rem}
.home-dashboard-card p{margin:.35rem 0;color:#4f3a28}
.home-dashboard-primary{font-weight:700}
.home-dashboard-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin:.55rem 0 .25rem;color:#6d5036;font-size:.9rem}
.home-dashboard-link{display:inline-block;margin-top:auto;padding-top:12px;color:#7d2d1e;font-weight:700;text-decoration:none}
.home-dashboard-link.secondary{margin-top:2px;padding-top:5px;font-size:.9rem}
.home-dashboard-link:hover{text-decoration:underline;color:#a64028}
.home-recruitment-list{display:grid;gap:8px;margin:.25rem 0 .55rem}
.home-recruitment-list>div{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:7px 9px;border-bottom:1px solid rgba(91,57,30,.18)}
.recruitment-state{font-size:.76rem;text-transform:uppercase;letter-spacing:.055em;padding:3px 7px;border:1px solid currentColor;border-radius:999px}
.recruitment-state.wanted{color:#8b281e;background:rgba(139,40,30,.07)}
.recruitment-state.open{color:#6c5b28;background:rgba(108,91,40,.06)}
.recruitment-state.closed{color:#74685c;background:rgba(70,60,50,.05)}
.home-dashboard-brief .home-dashboard-brief-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.home-briefrabe-mark{flex:0 0 50px;width:50px;height:50px;display:grid;place-items:center;border:1px solid rgba(126,62,34,.42);background:rgba(97,38,24,.08) url("../ui/briefrabe/briefrabe-avatar.png") center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,210,150,.08),0 4px 12px rgba(0,0,0,.35);font-size:0;line-height:0;color:transparent;overflow:hidden;transform:rotate(-2deg)}
.home-dashboard-brief h2{margin:.08rem 0 .2rem;font-size:1.15rem;color:#4a2614}
.home-dashboard-brief p{margin:0;color:#5d4733}
@media(max-width:1100px){.home-dashboard-grid{grid-template-columns:1fr}.home-dashboard-card{min-height:0}}
@media(max-width:700px){.home-guild-dashboard{margin-top:13px}.home-dashboard-grid{gap:13px}.home-dashboard-card{padding:19px 17px!important}.home-dashboard-brief .home-dashboard-brief-head{align-items:flex-start}.home-briefrabe-mark{flex-basis:44px;width:44px;height:44px}}

.home-dashboard-card .dashboard-image-btn{
  width:min(190px, 72%);
  margin-top:auto;
  padding-top:12px !important;
}
.home-dashboard-card .home-dashboard-link.secondary{
  margin-top:8px;
}
@media (max-width:700px){
  .home-dashboard-card .dashboard-image-btn{
    width:min(198px, 84%);
  }
}


/* ============================================================
   3.3.2 – STARTSEITE: RAID-FOKUS
   Große Raid-Kachel: kommender + vergangener Raid; Briefrabe rechts.
   ============================================================ */
.home-dashboard-grid-raid-focus{
  grid-template-columns:minmax(0,2fr) minmax(300px,1fr);
  align-items:stretch;
}
.home-dashboard-raid-focus{
  min-height:285px;
  background-image:
    linear-gradient(90deg,rgba(8,4,3,.72),rgba(8,4,3,.48),rgba(8,4,3,.68)),
    linear-gradient(0deg,rgba(8,4,3,.72),rgba(8,4,3,.36),rgba(8,4,3,.58)),
    url('../ui/raids/raids-journey.png') !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center 48% !important;
  background-clip:padding-box !important;
  color:#f6ead2 !important;
  text-shadow:0 2px 4px rgba(0,0,0,.92);
}
.home-dashboard-raid-focus > *{
  position:relative;
  z-index:2;
}
.home-dashboard-raid-focus h2,
.home-dashboard-raid-focus h3,
.home-dashboard-raid-focus p,
.home-dashboard-raid-focus .home-dashboard-primary,
.home-dashboard-raid-focus .home-dashboard-meta,
.home-dashboard-raid-focus .home-raid-kicker,
.home-dashboard-raid-focus .home-dashboard-link{
  color:#f6ead2;
  text-shadow:0 2px 4px rgba(0,0,0,.92);
}
.home-dashboard-raid-focus .eyebrow{
  color:#f0d492;
  text-shadow:0 1px 3px rgba(0,0,0,.88);
}
.home-raid-split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:4px;
}
.home-raid-block{
  min-width:0;
  padding:14px 16px;
  border:1px solid rgba(133,82,48,.34);
  background:
    linear-gradient(90deg,rgba(10,5,4,.78) 0%,rgba(18,8,6,.66) 62%,rgba(18,8,6,.34) 100%),
    linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.48));
  box-shadow:
    inset 0 1px 0 rgba(255,210,135,.06),
    0 7px 18px rgba(0,0,0,.16);
  backdrop-filter:blur(1.2px);
  -webkit-backdrop-filter:blur(1.2px);
}
.home-raid-kicker{
  display:block;
  margin-bottom:5px;
  color:#7b3d21;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.09em;
}
.home-raid-block h3{margin:.05rem 0 .45rem}
.home-raid-actions{
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:14px;
}
.home-raid-actions .dashboard-image-btn{
  margin-top:0;
  padding-top:0!important;
}
.home-raid-actions .home-dashboard-link.secondary{
  margin:0 0 2px;
  padding:0;
}
@media(max-width:1100px){
  .home-dashboard-grid-raid-focus{grid-template-columns:1fr}
}
@media(max-width:700px){
  .home-raid-split{grid-template-columns:1fr}
}


/* ============================================================
   STARTSEITE – BRIEFRABE: Durotar-Hintergrund + Ereignisfeed
   ============================================================ */
.home-dashboard-brief{
  min-height:285px;
  background:
    linear-gradient(90deg,rgba(9,5,4,.52),rgba(12,6,5,.26),rgba(8,4,3,.42)),
    linear-gradient(0deg,rgba(7,4,3,.48),rgba(7,4,3,.08)),
    url("../ui/briefrabe/briefrabe-durotar-bg.png") center/cover no-repeat !important;
  background-clip:padding-box !important;
  color:#f2e3c8 !important;
  text-shadow:0 2px 4px rgba(0,0,0,.92);
}
.home-dashboard-brief > *{
  position:relative;
  z-index:2;
}
.home-dashboard-brief-content{
  width:100%;
  padding:14px 15px;
  border:1px solid rgba(150,92,51,.34);
  background:
    linear-gradient(90deg,rgba(8,4,3,.84) 0%,rgba(15,7,5,.74) 63%,rgba(15,7,5,.42) 100%),
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.42));
  box-shadow:
    inset 0 1px 0 rgba(255,214,151,.055),
    0 8px 20px rgba(0,0,0,.18);
  backdrop-filter:blur(1.25px);
  -webkit-backdrop-filter:blur(1.25px);
}
.home-dashboard-brief .eyebrow{
  color:#e0a65c;
  text-shadow:0 1px 3px rgba(0,0,0,.95);
}
.home-dashboard-brief h2{
  color:#f2d39a;
  text-shadow:0 2px 5px rgba(0,0,0,.96);
}
.home-dashboard-brief p{
  color:#e7d4b7;
  text-shadow:0 1px 4px rgba(0,0,0,.96);
}
.home-brief-manual{
  margin:.2rem 0 .7rem !important;
  padding-bottom:.65rem;
  border-bottom:1px solid rgba(218,160,88,.18);
}
.home-brief-feed{
  display:grid;
  gap:7px;
}
.home-brief-item{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  padding:8px 10px;
  border-left:2px solid rgba(194,104,52,.58);
  background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.10));
  color:#ead7ba;
  text-decoration:none;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.home-brief-item:hover,
.home-brief-item:focus-visible{
  background:linear-gradient(90deg,rgba(79,26,14,.56),rgba(0,0,0,.14));
  border-left-color:#e09b4c;
  transform:translateX(2px);
}
.home-brief-item-label{
  color:#d79b52;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.home-brief-item strong{
  color:#f1ddbc;
  font-size:.91rem;
  line-height:1.22;
}
.home-brief-item small{
  color:#baa68a;
  font-size:.73rem;
}

/* ============================================================
   STARTSEITE – TEXTHINTERGRUND: NUR BESCHREIBUNG
   Die Überschrift/Eyebrow und der Button bleiben frei auf dem Bild.
   ============================================================ */
.home-card-guild p,
.home-card-members p{
  position:relative;
  z-index:1;
  margin:.45rem 0 .7rem;
  padding:10px 12px;
  color:#eadbc2;
  text-shadow:0 1px 4px rgba(0,0,0,.95);
  border-left:1px solid rgba(150,92,51,.24);
  background:
    linear-gradient(90deg,rgba(8,4,3,.80) 0%,rgba(15,7,5,.66) 68%,rgba(15,7,5,.26) 100%);
  box-shadow:inset 0 1px 0 rgba(255,214,151,.035);
  backdrop-filter:blur(.8px);
  -webkit-backdrop-filter:blur(.8px);
}


/* Startseite: Raid-Hauptüberschrift farblich an die übrigen Kachel-Überschriften angleichen */
.home-dashboard-raid-focus > h2{
  color:#f0d5a5 !important;
  text-shadow:0 2px 5px rgba(0,0,0,.94);
}


/* ============================================================
   DIE GILDE – bessere Leseführung + Abschluss-CTA
   Der vorhandene Gildentext bleibt inhaltlich unverändert.
   ============================================================ */
.guild-story-readable p{
  line-height:1.58;
  margin:0 0 1.05rem;
}
.guild-story-readable p:last-child{
  margin-bottom:0;
}

/* Nur visuelle Gliederung: keine Änderung/Ergänzung am eigentlichen Text. */
.guild-story-readable p:nth-of-type(2),
.guild-story-readable p:nth-of-type(4){
  margin-bottom:1.3rem;
  padding-bottom:1.15rem;
  border-bottom:1px solid rgba(88,48,22,.20);
}
.guild-story-readable p:first-child::first-letter{
  font-size:1.22em;
  font-weight:700;
}

.guild-next-steps{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:20px;
}
.guild-next-card{
  min-height:205px;
  display:flex;
  flex-direction:column;
  margin:0 !important;
  background:
    linear-gradient(90deg,rgba(18,8,5,.88),rgba(24,11,7,.72)),
    url("../ui/master/background-smoke.png") center/cover no-repeat !important;
}
.guild-next-card h2{
  margin:.15rem 0 .55rem;
}
.guild-next-card p{
  margin:.2rem 0 .75rem;
  max-width:92%;
}
.guild-next-card .guild-next-btn{
  width:min(205px,76%);
  margin-top:auto;
  padding-top:9px !important;
}
@media(max-width:800px){
  .guild-next-steps{grid-template-columns:1fr}
  .guild-next-card{min-height:0}
  .guild-next-card .guild-next-btn{width:min(205px,84%)}
}


/* ============================================================
   DIE GILDE – Abschluss-CTA mit den Hintergründen der Zielseiten
   Mitglieder -> home-members.jpg
   Bewerbung -> home-application.jpg
   ============================================================ */
.guild-next-card-members{
  background:
    linear-gradient(90deg,rgba(18,8,5,.88),rgba(24,11,7,.70)),
    linear-gradient(0deg,rgba(9,5,4,.30),rgba(9,5,4,.18)),
    url("../ui/home/home-members.jpg") center 43%/cover no-repeat !important;
}
.guild-next-card-application{
  background:
    linear-gradient(90deg,rgba(18,8,5,.88),rgba(24,11,7,.70)),
    linear-gradient(0deg,rgba(9,5,4,.30),rgba(9,5,4,.18)),
    url("../ui/home/home-application.jpg") center 52%/cover no-repeat !important;
}
.guild-next-card-members .eyebrow,
.guild-next-card-application .eyebrow{
  color:#dba45f;
  text-shadow:0 1px 3px rgba(0,0,0,.92);
}
.guild-next-card-members h2,
.guild-next-card-application h2{
  color:#f0d596;
  text-shadow:0 2px 4px rgba(0,0,0,.94);
}
.guild-next-card-members p,
.guild-next-card-application p{
  color:#eadbc2;
  text-shadow:0 1px 4px rgba(0,0,0,.96);
}


/* DIE GILDE – beide CTA-Buttons exakt auf einer Höhe ausrichten */
.guild-next-card .guild-next-btn{
  height:36px;
  width:auto;
  max-width:76%;
  display:flex;
  align-items:center;
  align-self:flex-start;
  margin-top:auto;
  padding-top:9px !important;
}
.guild-next-card .guild-next-btn img{
  display:block;
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  object-position:left center;
}
@media(max-width:800px){
  .guild-next-card .guild-next-btn{
    max-width:84%;
  }
}


/* KORREKTUR: CTA-Buttons auf ursprüngliche Größe zurücksetzen,
   aber weiterhin auf derselben vertikalen Linie halten. */
.guild-next-card .guild-next-btn{
  width:min(205px,76%);
  height:44px;
  max-width:none;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  align-self:flex-start;
  margin-top:auto;
  padding-top:9px !important;
}
.guild-next-card .guild-next-btn img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  max-height:none;
  object-fit:contain;
  object-position:left center;
}
@media(max-width:800px){
  .guild-next-card .guild-next-btn{
    width:min(205px,84%);
    height:44px;
  }
}


/* ============================================================
   GUIDES – Highlight + Suche / Filter + informativeres Archiv
   ============================================================ */
.guide-featured{
  display:block;
  position:relative;
  min-height:235px;
  margin:0 0 18px !important;
  padding:0 !important;
  overflow:hidden;
  text-decoration:none;
  background:
    linear-gradient(90deg,rgba(12,6,4,.94) 0%,rgba(18,8,5,.82) 48%,rgba(18,8,5,.35) 100%),
    linear-gradient(0deg,rgba(7,4,3,.45),rgba(7,4,3,.08)),
    url("../ui/home/home-guides.jpg") center 48%/cover no-repeat !important;
}
.guide-featured-copy{
  width:min(700px,82%);
  min-height:235px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:27px 31px;
}
.guide-featured h2{
  margin:.1rem 0 .45rem;
  color:#f1d79d !important;
  font-size:clamp(1.45rem,2vw,2.15rem);
  text-shadow:0 2px 5px rgba(0,0,0,.95);
}
.guide-featured p{
  margin:.15rem 0 .75rem;
  color:#e8d6ba !important;
  line-height:1.5;
  text-shadow:0 1px 4px rgba(0,0,0,.96);
}
.guide-featured-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px 14px;
  margin:.15rem 0 .8rem;
  color:#c8b08d;
  font-size:.79rem;
}
.guide-featured-meta span{
  padding-right:14px;
  border-right:1px solid rgba(220,163,87,.24);
}
.guide-featured-meta span:last-child{border-right:0}
.guide-featured-open{
  color:#e5a657;
  font-size:.82rem;
  letter-spacing:.03em;
}
.guide-featured:hover .guide-featured-open{color:#ffd18a}

.guide-filter-panel{
  margin:0 0 18px !important;
  padding:20px 23px !important;
  background:
    linear-gradient(rgba(255,242,210,.035),rgba(166,106,49,.025)),
    url("../ui/content/parchment-bg.png") center/cover no-repeat !important;
  color:var(--parchment-ink);
}
.guide-filter-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:14px;
}
.guide-filter-heading h2{
  margin:.08rem 0 0;
  color:#3a1d0e !important;
  text-shadow:0 1px 0 rgba(255,240,205,.42);
}
.guide-filter-heading .eyebrow{color:#8d5429}
.guide-filter-grid{
  display:grid;
  grid-template-columns:minmax(220px,1.45fr) repeat(4,minmax(130px,1fr));
  gap:12px;
}
.guide-filter-grid label{
  display:grid;
  gap:6px;
  color:#5b3820;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.055em;
}
.guide-filter-grid input,
.guide-filter-grid select{
  width:100%;
  margin:0;
  min-height:42px;
  padding:9px 11px;
  border:1px solid rgba(91,50,27,.48);
  background:rgba(74,42,21,.08);
  color:#3b2314;
  box-shadow:inset 0 1px 4px rgba(73,37,16,.10);
  font:inherit;
  font-size:.87rem;
  text-transform:none;
  letter-spacing:0;
}
.guide-filter-reset{
  border:1px solid rgba(109,55,29,.48);
  background:rgba(92,42,22,.08);
  color:#63351d;
  padding:8px 11px;
  cursor:pointer;
  font:700 .72rem Georgia,serif;
}
.guide-filter-reset:hover{
  background:rgba(122,50,27,.13);
  color:#7a2e1f;
}
.guide-filter-summary{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
  color:#76583d;
  font-size:.78rem;
  font-weight:700;
}

.guide-archive-card{
  min-height:175px;
  display:flex !important;
  flex-direction:column;
  background:
    linear-gradient(rgba(255,242,210,.045),rgba(166,106,49,.035)),
    url("../ui/content/parchment-bg.png") center/cover no-repeat !important;
  color:var(--parchment-ink) !important;
}
.guide-card-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:5px;
}
.guide-card-topline .eyebrow{margin:0;color:#8b5129}
.guide-card-topline time{color:#85684a;font-size:.72rem}
.guide-archive-card h3{
  margin:.15rem 0 .4rem;
  color:#3a1d0e !important;
}
.guide-card-description{
  margin:.1rem 0 .7rem;
  color:#5d422c;
  line-height:1.45;
}
.guide-card-meta{
  display:grid;
  gap:3px;
  margin-top:auto;
  color:#664830;
  font-size:.81rem;
}
.guide-card-meta small{color:#806448}
.guide-filter-empty{
  text-align:center;
  margin:18px 0 0 !important;
}
[data-guide-item][hidden]{display:none !important}

@media(max-width:1050px){
  .guide-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .guide-search-field{grid-column:1/-1}
}
@media(max-width:650px){
  .guide-featured-copy{
    width:100%;
    min-height:220px;
    padding:23px 20px;
  }
  .guide-filter-heading{
    align-items:flex-start;
    flex-direction:column;
  }
  .guide-filter-grid{grid-template-columns:1fr}
  .guide-search-field{grid-column:auto}
  .guide-filter-reset{width:100%}
}


/* ============================================================
   GUIDES – Korrektur: Holzrahmen + bessere Lesbarkeit
   ============================================================ */

/* Der Highlight-Guide soll wie die restlichen Kacheln den echten
   Holzrahmen behalten. overflow:hidden hatte den ::before-Rahmen
   abgeschnitten. */
body:has(.guide-grid) .guide-featured{
  overflow:visible !important;
  color:#ead8bb !important;
  background:
    linear-gradient(90deg,
      rgba(8,4,3,.94) 0%,
      rgba(14,7,5,.88) 43%,
      rgba(17,8,5,.68) 72%,
      rgba(12,6,4,.52) 100%),
    linear-gradient(0deg,rgba(6,3,2,.48),rgba(6,3,2,.10)),
    url("../ui/home/home-guides.jpg") center 48%/cover no-repeat !important;
  background-clip:padding-box !important;
}

/* Nur der eigentliche Textblock bekommt zusätzlich einen dezenten
   dunklen Verlauf – das Hintergrundmotiv bleibt sichtbar. */
body:has(.guide-grid) .guide-featured-copy{
  width:min(720px,84%);
  min-height:235px;
  margin:0;
  padding:27px 31px;
  background:
    linear-gradient(90deg,
      rgba(5,3,2,.72) 0%,
      rgba(8,4,3,.56) 72%,
      rgba(8,4,3,0) 100%);
}

body:has(.guide-grid) .guide-featured .eyebrow{
  color:#dca35a !important;
  text-shadow:0 1px 3px rgba(0,0,0,.95) !important;
}
body:has(.guide-grid) .guide-featured h2{
  color:#f4dca6 !important;
  text-shadow:0 2px 5px rgba(0,0,0,.98) !important;
}
body:has(.guide-grid) .guide-featured p{
  color:#efe0c8 !important;
  text-shadow:0 1px 4px rgba(0,0,0,.98) !important;
}
body:has(.guide-grid) .guide-featured-meta{
  color:#d7c2a2 !important;
  text-shadow:0 1px 3px rgba(0,0,0,.96);
}
body:has(.guide-grid) .guide-featured-open{
  color:#f1b866 !important;
  text-shadow:0 1px 3px rgba(0,0,0,.96);
}

/* Filterbereich bewusst etwas kontrastreicher, ohne vom
   Pergament-Look der Seite abzuweichen. */
body:has(.guide-grid) .guide-filter-panel{
  color:#2b170d !important;
}
body:has(.guide-grid) .guide-filter-panel .eyebrow{
  color:#7a421f !important;
}
body:has(.guide-grid) .guide-filter-panel h2{
  color:#35190c !important;
}
body:has(.guide-grid) .guide-filter-grid label{
  color:#4b2815 !important;
}
body:has(.guide-grid) .guide-filter-grid input,
body:has(.guide-grid) .guide-filter-grid select{
  background:rgba(255,246,220,.42) !important;
  border-color:rgba(82,43,22,.56) !important;
  color:#28140a !important;
}
body:has(.guide-grid) .guide-filter-grid input::placeholder{
  color:#8a6a4c;
  opacity:1;
}
body:has(.guide-grid) .guide-filter-summary{
  color:#5b351f !important;
}

/* Auch die normalen Archivkarten etwas deutlicher. */
body:has(.guide-grid) .guide-archive-card h3{
  color:#32170b !important;
}
body:has(.guide-grid) .guide-card-description{
  color:#4c2e1b !important;
}
body:has(.guide-grid) .guide-card-meta{
  color:#50311e !important;
}
body:has(.guide-grid) .guide-card-meta small,
body:has(.guide-grid) .guide-card-topline time{
  color:#6e4c31 !important;
}

@media(max-width:650px){
  body:has(.guide-grid) .guide-featured-copy{
    width:100%;
    background:rgba(6,3,2,.68);
  }
}


/* GUIDES – hervorgehobener neuester Guide wieder als Papyrus/Pergament,
   nicht mit dem Bild der Guides-Kachel. */
body:has(.guide-grid) .guide-featured{
  background:
    linear-gradient(rgba(255,242,210,.035),rgba(166,106,49,.025)),
    url("../ui/content/parchment-bg.png") center/cover no-repeat !important;
  color:#2f1a0f !important;
}
body:has(.guide-grid) .guide-featured-copy{
  width:min(760px,88%);
  min-height:235px;
  padding:27px 31px;
  background:
    linear-gradient(90deg,
      rgba(255,247,224,.10) 0%,
      rgba(255,247,224,.04) 72%,
      rgba(255,247,224,0) 100%);
}
body:has(.guide-grid) .guide-featured .eyebrow{
  color:#7b421f !important;
  text-shadow:none !important;
}
body:has(.guide-grid) .guide-featured h2{
  color:#32170b !important;
  text-shadow:0 1px 0 rgba(255,240,205,.45) !important;
}
body:has(.guide-grid) .guide-featured p{
  color:#4f301c !important;
  text-shadow:none !important;
}
body:has(.guide-grid) .guide-featured-meta{
  color:#67482f !important;
  text-shadow:none !important;
}
body:has(.guide-grid) .guide-featured-open{
  color:#8b3d22 !important;
  text-shadow:none !important;
}
body:has(.guide-grid) .guide-featured:hover .guide-featured-open{
  color:#b24a26 !important;
}
@media(max-width:650px){
  body:has(.guide-grid) .guide-featured-copy{
    width:100%;
    background:rgba(255,247,224,.08);
  }
}


/* ============================================================
   BEWERBUNG – bessere Bedienbarkeit / Lesbarkeit
   ============================================================ */
body:has(.application-form) .application-form input,
body:has(.application-form) .application-form textarea,
body:has(.application-form) .application-form select{
  width:100%;
  margin-top:7px;
  padding:12px 13px;
  border:1px solid rgba(92,49,25,.58);
  background:
    linear-gradient(rgba(255,249,229,.80),rgba(247,231,195,.78));
  color:#2c180d;
  box-shadow:
    inset 0 1px 4px rgba(89,46,21,.11),
    0 1px 0 rgba(255,255,255,.26);
  font:inherit;
  outline:none;
}
body:has(.application-form) .application-form select{
  min-height:46px;
  cursor:pointer;
}
body:has(.application-form) .application-form textarea{
  resize:vertical;
}
body:has(.application-form) .application-form input::placeholder,
body:has(.application-form) .application-form textarea::placeholder{
  color:#8b7258;
  opacity:1;
}
body:has(.application-form) .application-form input:focus,
body:has(.application-form) .application-form textarea:focus,
body:has(.application-form) .application-form select:focus{
  border-color:#9a4b27;
  box-shadow:
    0 0 0 2px rgba(154,75,39,.13),
    inset 0 1px 4px rgba(89,46,21,.09);
}
.application-required-note{
  margin:0 0 12px !important;
  color:#745039 !important;
  font-size:.78rem;
}
.application-required-note span,
.required-mark{
  color:#8d2d1f;
  font-weight:700;
}
.application-error{
  margin:0 0 16px;
  padding:12px 14px;
  border:1px solid rgba(126,36,28,.48);
  background:rgba(126,36,28,.09);
  color:#651e17;
  font-weight:700;
}
.application-success{
  background:
    linear-gradient(rgba(255,242,210,.055),rgba(166,106,49,.035)),
    url("../ui/content/parchment-bg.png") center/cover no-repeat !important;
  color:var(--parchment-ink) !important;
}
.application-success h2{
  color:#3a1d0e !important;
}
.application-success p{
  color:#4d301c !important;
}


/* ============================================================
   DISCORD – Zusatzbereiche: Was dich erwartet + Briefrabe
   ============================================================ */
.discord-main-btn{
  width:min(190px,100%);
  margin-top:12px;
}

.discord-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px;
}

.discord-info-card{
  margin:0 !important;
  min-height:285px;
  display:flex;
  flex-direction:column;
  position:relative;
}

.discord-info-card h2{
  margin:.12rem 0 .7rem;
}

/* Passend zur Discord-Unterseite: vorhandenes Discord-Motiv weiterverwenden. */
.discord-info-expect{
  background:
    linear-gradient(90deg,rgba(9,5,4,.90),rgba(16,8,6,.74)),
    linear-gradient(0deg,rgba(7,4,3,.42),rgba(7,4,3,.10)),
    url("../ui/home/home-discord.jpg") center 46%/cover no-repeat !important;
}
.discord-info-expect .eyebrow{
  color:#dfa55d;
  text-shadow:0 1px 3px rgba(0,0,0,.95);
}
.discord-info-expect h2{
  color:#f0d59b !important;
  text-shadow:0 2px 5px rgba(0,0,0,.96);
}

.discord-feature-list{
  display:grid;
  gap:8px;
  margin-top:2px;
}
.discord-feature-list > div{
  padding:9px 11px;
  border-left:2px solid rgba(206,107,55,.62);
  background:linear-gradient(90deg,rgba(0,0,0,.44),rgba(0,0,0,.12));
}
.discord-feature-list strong{
  display:block;
  margin-bottom:2px;
  color:#f0dbc1;
  font-size:.91rem;
}
.discord-feature-list span{
  display:block;
  color:#cdb99d;
  font-size:.81rem;
  line-height:1.4;
}

/* Briefrabe-Kachel bewusst etwas ruhiger, damit das Avatar im Fokus steht. */
.discord-info-raven{
  background:
    linear-gradient(90deg,rgba(11,5,4,.92),rgba(18,8,6,.76)),
    linear-gradient(0deg,rgba(8,4,3,.48),rgba(8,4,3,.12)),
    url("../ui/home/home-discord.jpg") right center/cover no-repeat !important;
}
.discord-raven-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
}
.discord-raven-avatar{
  width:72px;
  height:72px;
  flex:0 0 72px;
  object-fit:cover;
  border:1px solid rgba(184,102,56,.52);
  box-shadow:
    inset 0 0 0 1px rgba(255,211,147,.07),
    0 6px 14px rgba(0,0,0,.38);
}
.discord-info-raven .eyebrow{
  color:#dfa55d;
  text-shadow:0 1px 3px rgba(0,0,0,.95);
}
.discord-info-raven h2{
  margin:.08rem 0 0;
  color:#f0d59b !important;
  text-shadow:0 2px 5px rgba(0,0,0,.96);
}
.discord-info-raven > p{
  margin:.15rem 0 .7rem;
  color:#ead7bb;
  line-height:1.48;
  text-shadow:0 1px 4px rgba(0,0,0,.96);
}
.discord-raven-list{
  display:grid;
  gap:7px;
  margin:.1rem 0 0;
  padding:0;
  list-style:none;
}
.discord-raven-list li{
  position:relative;
  padding:8px 10px 8px 28px;
  background:linear-gradient(90deg,rgba(0,0,0,.38),rgba(0,0,0,.10));
  color:#d7c4a8;
  line-height:1.38;
}
.discord-raven-list li::before{
  content:"◆";
  position:absolute;
  left:10px;
  top:8px;
  color:#b95732;
  font-size:.66rem;
}

@media(max-width:900px){
  .discord-info-grid{grid-template-columns:1fr}
  .discord-info-card{min-height:0}
}
@media(max-width:600px){
  .discord-raven-avatar{
    width:60px;
    height:60px;
    flex-basis:60px;
  }
}


/* ============================================================
   DISCORD – neue Infokacheln als Papyrus/Pergament
   ============================================================ */
body:has(.discord-panel) .discord-info-card{
  background:
    linear-gradient(rgba(255,242,210,.045),rgba(166,106,49,.035)),
    url("../ui/content/parchment-bg.png") center/cover no-repeat !important;
  background-clip:padding-box !important;
  color:var(--parchment-ink) !important;
  text-shadow:none !important;
}

body:has(.discord-panel) .discord-info-card .eyebrow{
  color:#805026 !important;
  text-shadow:none !important;
}

body:has(.discord-panel) .discord-info-card h2{
  color:#3a1d0e !important;
  text-shadow:0 1px 0 rgba(255,240,205,.45) !important;
}

/* Die einzelnen Punkte erhalten nur eine sehr dezente Pergament-Absetzung. */
body:has(.discord-panel) .discord-feature-list > div,
body:has(.discord-panel) .discord-raven-list li{
  border-left:2px solid rgba(116,63,31,.46);
  background:linear-gradient(90deg,rgba(91,48,24,.075),rgba(91,48,24,.015)) !important;
}

body:has(.discord-panel) .discord-feature-list strong{
  color:#432313 !important;
}

body:has(.discord-panel) .discord-feature-list span,
body:has(.discord-panel) .discord-info-raven > p,
body:has(.discord-panel) .discord-raven-list li{
  color:#573923 !important;
  text-shadow:none !important;
}

body:has(.discord-panel) .discord-raven-list li::before{
  color:#8c3d23 !important;
}

/* Avatar weiterhin deutlich sichtbar auf dem hellen Papyrus. */
body:has(.discord-panel) .discord-raven-avatar{
  border:1px solid rgba(103,55,28,.56);
  box-shadow:
    inset 0 0 0 1px rgba(255,244,211,.18),
    0 5px 12px rgba(72,37,18,.22);
}


/* ============================================================
   RAIDS – öffentliche Raidkarten / Empty States
   ============================================================ */

.raid-discord-hint{
  width:min(720px,100%);
  margin:12px auto 0;
  padding:10px 14px;
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  border:1px solid rgba(136,75,38,.28);
  background:rgba(21,10,7,.44);
  color:#cdb89a;
  font-size:.82rem;
  text-align:center;
}
.raid-discord-hint strong{
  color:#e7c984;
}

.raid-empty-state{
  min-height:128px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px 24px !important;
  background:
    linear-gradient(rgba(255,242,210,.04),rgba(166,106,49,.03)),
    url("../ui/content/parchment-bg.png") center/cover no-repeat !important;
  color:var(--parchment-ink) !important;
}
.raid-empty-icon{
  flex:0 0 54px;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:1px solid rgba(99,53,27,.34);
  background:rgba(86,45,22,.08);
  color:#743b20;
  font-size:1.5rem;
}
.raid-empty-state .eyebrow{
  color:#835126 !important;
  text-shadow:none !important;
}
.raid-empty-state h3{
  margin:.1rem 0 .25rem;
  color:#3b1d0e !important;
  text-shadow:0 1px 0 rgba(255,240,205,.42);
}
.raid-empty-state p{
  margin:0;
  color:#553821 !important;
  line-height:1.45;
}

.raid-public-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.raid-public-card{
  display:grid;
  grid-template-columns:minmax(190px,.78fr) minmax(0,1.22fr);
  padding:0 !important;
  overflow:visible;
  min-height:320px;
}
.raid-card-art{
  min-height:320px;
  background-position:center;
  background-size:cover;
  position:relative;
}
.raid-card-art-badge{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:5px 7px;
  border:1px solid rgba(222,165,92,.32);
  background:rgba(5,3,2,.72);
  color:#dcb37b;
  font-size:.61rem;
  letter-spacing:.06em;
}
.raid-card-content{
  display:flex;
  flex-direction:column;
  padding:20px 22px;
  background:
    linear-gradient(rgba(255,242,210,.04),rgba(166,106,49,.03)),
    url("../ui/content/parchment-bg.png") center/cover no-repeat;
  color:#3d2414;
}
.raid-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}
.raid-card-top h3{
  margin:.12rem 0 .2rem;
  color:#381a0c !important;
  font-size:1.25rem;
}
.raid-card-top .eyebrow{
  color:#7c4823 !important;
  text-shadow:none !important;
}
.raid-capacity-wrap{
  min-width:72px;
  text-align:center;
  padding:8px 9px;
  border:1px solid rgba(100,54,29,.28);
  background:rgba(93,51,27,.06);
}
.raid-capacity{
  display:block;
  color:#6e2b1e;
  font:700 1.25rem/1 Georgia,serif;
}
.raid-capacity-wrap small{
  display:block;
  margin-top:3px;
  color:#74543b;
  font-size:.62rem;
}
.raid-instance{
  margin:.25rem 0 .65rem;
  color:#6b4128;
  font-weight:700;
}
.raid-public-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px 13px;
  padding:9px 0 11px;
  border-top:1px solid rgba(92,49,25,.16);
  border-bottom:1px solid rgba(92,49,25,.16);
  color:#5c3b25;
  font-size:.79rem;
}
.raid-free-slots{color:#4f5e28;font-weight:700}
.raid-no-slots{color:#7c3428;font-weight:700}

.raid-role-bars{
  display:grid;
  gap:9px;
  margin:13px 0 10px;
}
.raid-role-row{
  display:grid;
  gap:4px;
}
.raid-role-label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:#4e2e1b;
  font-size:.8rem;
}
.raid-role-label strong{
  color:#6d321f;
}
.raid-role-track{
  height:7px;
  border:1px solid rgba(82,43,22,.25);
  background:rgba(82,43,22,.08);
  overflow:hidden;
}
.raid-role-track i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#793022,#b15e31);
}
.raid-role-need{
  color:#795c42;
  font-size:.68rem;
}
.raid-card-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:7px 12px;
  margin-top:auto;
  padding-top:9px;
  color:#61412c;
  font-size:.78rem;
}
.raid-discord-cta{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  margin-top:10px;
  padding:8px 11px;
  border:1px solid rgba(116,45,30,.5);
  background:linear-gradient(#9f3426,#742018);
  color:#fff0d2 !important;
  text-decoration:none;
  font:bold .72rem Georgia,serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.raid-discord-cta:hover{
  filter:brightness(1.09);
}
.raid-art-source{
  margin-top:7px;
  font-size:.64rem;
}
.raid-art-source a{
  color:#80684f;
}

.raid-past-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.raid-past-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin:0 !important;
  padding:16px 18px !important;
  background:
    linear-gradient(rgba(255,242,210,.04),rgba(166,106,49,.03)),
    url("../ui/content/parchment-bg.png") center/cover no-repeat !important;
  color:var(--parchment-ink) !important;
}
.raid-past-main h3{
  margin:.1rem 0 .2rem;
  color:#3b1d0e !important;
}
.raid-past-main p{
  margin:0;
  color:#5b3a24;
}
.raid-past-card .eyebrow{
  color:#805026 !important;
  text-shadow:none !important;
}
.raid-past-meta{
  display:grid;
  gap:5px;
  min-width:160px;
  text-align:right;
  color:#65472f;
  font-size:.77rem;
}

@media(max-width:1100px){
  .raid-public-grid{grid-template-columns:1fr}
}
@media(max-width:800px){
  .raid-public-card{grid-template-columns:1fr}
  .raid-card-art{min-height:190px}
  .raid-past-list{grid-template-columns:1fr}
}
@media(max-width:600px){
  .raid-empty-state{align-items:flex-start}
  .raid-public-card{min-height:0}
  .raid-past-card{
    display:block;
  }
  .raid-past-meta{
    margin-top:10px;
    min-width:0;
    text-align:left;
  }
}


/* ============================================================
   MITGLIEDER – Suche / Filter / Rang-Badges / Detailprofile
   ============================================================ */
.member-filter-panel{
  margin:0 0 18px !important;
  padding:20px 23px !important;
  background:
    linear-gradient(rgba(255,242,210,.04),rgba(166,106,49,.028)),
    url("../ui/content/parchment-bg.png") center/cover no-repeat !important;
  color:var(--parchment-ink) !important;
}
.member-filter-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:14px;
}
.member-filter-heading h2{
  margin:.08rem 0 0;
  color:#35190c !important;
  text-shadow:0 1px 0 rgba(255,240,205,.42);
}
.member-filter-heading .eyebrow{color:#7b461f !important}
.member-filter-grid{
  display:grid;
  grid-template-columns:minmax(220px,1.45fr) repeat(4,minmax(125px,1fr));
  gap:12px;
}
.member-filter-grid label{
  display:grid;
  gap:6px;
  color:#4b2815;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.055em;
}
.member-filter-grid input,
.member-filter-grid select{
  width:100%;
  min-height:42px;
  margin:0;
  padding:9px 11px;
  border:1px solid rgba(91,50,27,.5);
  background:rgba(255,246,220,.42);
  color:#28140a;
  box-shadow:inset 0 1px 4px rgba(73,37,16,.10);
  font:inherit;
  font-size:.87rem;
  text-transform:none;
  letter-spacing:0;
}
.member-filter-grid input::placeholder{color:#896b4e;opacity:1}
.member-filter-reset{
  border:1px solid rgba(109,55,29,.48);
  background:rgba(92,42,22,.08);
  color:#63351d;
  padding:8px 11px;
  cursor:pointer;
  font:700 .72rem Georgia,serif;
}
.member-filter-reset:hover{background:rgba(122,50,27,.13);color:#7a2e1f}
.member-filter-summary{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
  color:#5b351f;
  font-size:.78rem;
  font-weight:700;
}
.member-filter-empty{
  text-align:center;
  margin:18px 0 0 !important;
}
[data-member-item][hidden]{display:none !important}

/* Die ganze Karte ist jetzt anklickbar. */
.member-card-link{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  transition:transform .16s ease,filter .16s ease;
}
.member-card-link:hover,
.member-card-link:focus-visible{
  transform:translateY(-2px);
  filter:brightness(1.06);
}
.member-card-link:focus-visible{
  outline:2px solid rgba(226,157,73,.82);
  outline-offset:4px;
}

/* Klarerer Rang, ohne moderne/bunte Badge-Optik. */
.member-rank-badge{
  display:inline-block;
  margin:.12rem 0 .35rem;
  padding:3px 7px;
  border:1px solid rgba(224,164,82,.38);
  background:rgba(17,8,6,.64);
  color:#e5c47b;
  font:bold .67rem Georgia,serif;
  letter-spacing:.075em;
  text-transform:uppercase;
  text-shadow:0 1px 2px #000;
}
.member-rank-badge.rank-gildemeister{border-color:rgba(238,176,72,.65);color:#f0ce7e}
.member-rank-badge.rank-offizier{border-color:rgba(196,98,54,.62);color:#e6b476}
.member-rank-badge.rank-veteran{border-color:rgba(165,126,71,.58);color:#dcc28e}
.member-rank-badge.rank-initiand{opacity:.88}

.member-card-bio{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:.45rem 0 0 !important;
}
.member-card-open{
  display:block;
  margin-top:9px;
  color:#d99a50;
  font:bold .7rem Georgia,serif;
  letter-spacing:.02em;
}

/* Detailansicht */
.member-detail-back{
  margin:-5px 0 12px;
}
.member-detail-back a{
  color:#d7a360;
  text-decoration:none;
  font:bold .78rem Georgia,serif;
}
.member-detail-back a:hover{text-decoration:underline}

.member-detail-card{
  min-height:380px;
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:24px;
  align-items:start;
  margin:0 !important;
  padding:30px !important;
  background:
    linear-gradient(90deg,rgba(10,5,4,.94),rgba(17,8,6,.88)),
    url("../ui/home/home-members.jpg") center/cover no-repeat !important;
  background-position:center !important;
  background-size:cover !important;
}
.member-detail-card.has-member-photo{
  background-position:center !important;
  background-size:cover !important;
}
.member-detail-avatar-wrap{
  display:flex;
  justify-content:center;
  padding-top:8px;
}
.member-race-avatar-detail{
  width:132px !important;
  height:132px !important;
  flex-basis:132px !important;
}
.member-race-avatar-detail .member-race-avatar-inner{
  inset:21px !important;
}
.member-detail-copy{
  max-width:760px;
}
.member-detail-copy h2{
  margin:.35rem 0 .85rem;
  color:#f0d596 !important;
  font-size:clamp(1.65rem,2.2vw,2.35rem);
  text-shadow:0 2px 5px rgba(0,0,0,.96);
}
.member-detail-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-bottom:18px;
}
.member-detail-facts > div{
  padding:9px 11px;
  border-left:2px solid rgba(184,88,47,.54);
  background:linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.12));
}
.member-detail-facts span{
  display:block;
  color:#b99569;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.member-detail-facts strong{
  display:block;
  margin-top:2px;
  color:#ead8bd;
  font-size:.9rem;
}
.member-detail-bio{
  padding:14px 16px;
  border:1px solid rgba(149,81,42,.28);
  background:linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.16));
}
.member-detail-bio .eyebrow{color:#d59b51}
.member-detail-bio p{
  margin:.45rem 0 0;
  color:#e2cfb2;
  line-height:1.55;
}

@media(max-width:1050px){
  .member-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .member-search-field{grid-column:1/-1}
}
@media(max-width:750px){
  .member-filter-heading{align-items:flex-start;flex-direction:column}
  .member-filter-grid{grid-template-columns:1fr}
  .member-search-field{grid-column:auto}
  .member-filter-reset{width:100%}
  .member-detail-card{grid-template-columns:1fr;padding:22px !important}
  .member-detail-avatar-wrap{justify-content:flex-start}
  .member-detail-facts{grid-template-columns:1fr}
}


/* ============================================================
   MITGLIEDER – Detailbild / Papyrus-Fallback + Twinks
   ============================================================ */

/* Individuell hinterlegtes Mitgliederbild wird in der Detailansicht
   wirklich als Hintergrund benutzt. */
.member-detail-card.has-member-photo{
  background:
    linear-gradient(90deg,
      rgba(7,4,3,.91) 0%,
      rgba(9,5,4,.76) 42%,
      rgba(9,5,4,.42) 72%,
      rgba(7,4,3,.28) 100%),
    linear-gradient(0deg,rgba(6,3,2,.58),rgba(6,3,2,.08) 72%),
    var(--member-detail-image) center/cover no-repeat !important;
  color:#ead8bd !important;
}

/* Ohne eigenes Bild wird bewusst die Papyrus-/Pergamentrolle genutzt. */
.member-detail-card.has-parchment{
  background:
    linear-gradient(rgba(255,242,210,.045),rgba(166,106,49,.035)),
    url("../ui/content/parchment-bg.png") center/cover no-repeat !important;
  color:var(--parchment-ink) !important;
  text-shadow:none !important;
}

.member-detail-card.has-parchment .member-detail-copy h2{
  color:#35190c !important;
  text-shadow:0 1px 0 rgba(255,240,205,.45) !important;
}
.member-detail-card.has-parchment .member-rank-badge{
  background:rgba(92,45,23,.08);
  color:#6e351f;
  border-color:rgba(105,55,27,.42);
  text-shadow:none;
}
.member-detail-card.has-parchment .member-detail-facts > div,
.member-detail-card.has-parchment .member-detail-bio,
.member-detail-card.has-parchment .member-detail-twinks{
  background:linear-gradient(90deg,rgba(91,48,24,.075),rgba(91,48,24,.015));
  border-color:rgba(108,59,31,.30);
}
.member-detail-card.has-parchment .member-detail-facts span,
.member-detail-card.has-parchment .member-detail-bio .eyebrow,
.member-detail-card.has-parchment .member-detail-twinks .eyebrow{
  color:#805026 !important;
  text-shadow:none !important;
}
.member-detail-card.has-parchment .member-detail-facts strong,
.member-detail-card.has-parchment .member-detail-bio p{
  color:#4f301c !important;
  text-shadow:none !important;
}

.member-detail-twinks{
  margin-top:14px;
  padding:14px 16px;
  border:1px solid rgba(149,81,42,.28);
  background:linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.16));
}
.member-detail-twinks .eyebrow{
  color:#d59b51;
}
.member-twink-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:8px;
}
.member-twink-list span{
  padding:6px 9px;
  border:1px solid rgba(184,104,57,.34);
  background:rgba(0,0,0,.24);
  color:#ead7ba;
  font-size:.79rem;
}
.member-detail-card.has-parchment .member-twink-list span{
  border-color:rgba(103,55,28,.34);
  background:rgba(91,48,24,.055);
  color:#4e301d;
}


/* ============================================================
   MITGLIEDER – Ranglabel auf Karten kürzer / enger am Text
   ============================================================ */
.member-copy .member-rank-badge{
  display:inline-flex !important;
  align-items:center;
  align-self:flex-start;
  width:auto !important;
  max-width:max-content;
  min-width:0 !important;
  white-space:nowrap;
  padding:3px 8px;
}


/* ============================================================
   FINAL 1.0 – QUALITY FIRST / MOBILE
   ============================================================ */
.master-mobile-nav,
.master-footer-mobile-links{display:none}

/* Lossless WebP ist pixelgenau zum PNG. PNG bleibt als Fallback erhalten. */
@supports (background-image:image-set(url("../ui/master/background-smoke.webp") type("image/webp"))){
  body.master-layout{
    background-image:image-set(
      url("../ui/master/background-smoke.webp") type("image/webp"),
      url("../ui/master/background-smoke.png") type("image/png")
    );
  }
}

@media(max-width:700px){
  .master-nav-hotspots{display:none}
  .master-mobile-nav{
    display:block;
    position:absolute;
    z-index:20;
    top:10px;
    right:10px;
    line-height:1.2;
    font-family:Georgia,"Times New Roman",serif;
  }
  .master-mobile-nav summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:92px;
    min-height:44px;
    padding:8px 12px;
    cursor:pointer;
    border:1px solid rgba(214,157,89,.66);
    outline:1px solid rgba(42,21,13,.92);
    background:linear-gradient(180deg,rgba(62,30,20,.98),rgba(13,8,6,.98));
    box-shadow:inset 0 0 0 3px rgba(0,0,0,.36),0 5px 14px rgba(0,0,0,.55);
    color:#f0d596;
    font-weight:700;
    font-size:.84rem;
    text-shadow:0 1px 2px #000;
  }
  .master-mobile-nav summary::-webkit-details-marker{display:none}
  .master-mobile-nav[open] summary{border-color:#d59a54}
  .master-mobile-nav nav{
    position:absolute;
    top:49px;
    right:0;
    width:min(270px,86vw);
    display:grid;
    padding:6px;
    border:1px solid #725037;
    outline:1px solid #2d170e;
    background:rgba(11,7,5,.985);
    box-shadow:0 12px 26px rgba(0,0,0,.68);
  }
  .master-mobile-nav nav a{
    display:flex;
    align-items:center;
    min-height:44px;
    padding:9px 12px;
    border-bottom:1px solid rgba(150,87,49,.24);
    color:#e7d2ae;
    text-decoration:none;
    font-size:.88rem;
  }
  .master-mobile-nav nav a:last-child{border-bottom:0}
  .master-mobile-nav nav a[aria-current="page"]{
    color:#f0c875;
    background:rgba(150,58,34,.18);
  }

  .master-footer-hotspots{display:none}
  .master-footer-mobile-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px 18px;
    padding:13px 14px 16px;
    line-height:1.35;
    background:#090605;
    border-top:1px solid rgba(122,80,55,.42);
  }
  .master-footer-mobile-links a{
    color:#cdb997;
    text-decoration:none;
    font-size:.78rem;
  }

  .image-btn,
  .btn{min-height:44px}
  .member-card-link{min-height:150px}
}

@media(max-width:430px){
  .master-content{width:95vw}
  .page-title{padding-left:15px;padding-right:15px}
  .panel{padding-left:17px;padding-right:17px}
}


/* ============================================================
   MOBILE NAV HOTFIX – nur Burger-Menü auf kleinen Displays
   ============================================================ */
@media(max-width:700px){
  .master-nav-hotspots,
  .master-nav-active,
  .master-nav .nav-active,
  .master-nav [class*="nav-active"],
  .master-nav [class*="nav-button"],
  .master-nav [class*="nav-btn"]{
    display:none !important;
  }

  .master-mobile-nav{
    display:block !important;
  }
}