/* Guildbound Designsystem v3 (31.10.2026) – Tokens und Basiskomponenten.
   Quelle: docs/design-system-v3/DESIGN.md. Referenz: docs/design-system-v3/referenz.html.
   Entwurf zur Übergabe, noch nicht in dist/ eingebunden.
   Schriften: Marcellus, Source Sans 3, Cinzel selbst gehostet (OFL). Pfade beim Einbau anpassen. */

@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url("marcellus.ttf") format("truetype")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url("sourcesans3.ttf") format("truetype")}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400 900;font-display:swap;src:url("cinzel.ttf") format("truetype")}

:root{
  /* Grund */
  --gb-deep:#0d0d0b; --gb-page:#14100c; --gb-raised:#2a231a;
  --gb-window:linear-gradient(140deg,#28241e,#1d1b17 55%,#161715);
  --gb-panel:linear-gradient(140deg,#221e19,#1a1714);
  --gb-panel-world:rgba(20,16,11,.72);
  --gb-field:#0f0c09;
  /* Messing */
  --gb-brass-line:#5e4a28; --gb-brass-world:#7a6030; --gb-brass:#8a6d36; --gb-gold:#c9a24e; --gb-gold-text:#f2cf7a;
  --gb-rule:rgba(184,145,63,.18);
  /* Text (Kontrast auf Fenster) */
  --gb-title:#efe6d2; --gb-text:#e6dcc6; --gb-muted:#b5a789; --gb-quiet:#9a8f7c; --gb-link:#e0b860; --gb-disabled:#6f6656;
  /* Seele = Guildbound denkt mit */
  --gb-soul:#95e5df; --gb-soul-stone:#1d5e63; --gb-soul-deep:#06181a;
  --gb-soul-light:0 0 60px rgba(63,199,192,.16);
  --gb-soul-glow:0 0 28px rgba(149,229,223,.35);
  /* Handlung */
  --gb-quest:linear-gradient(#94221a,#540f08); --gb-quest-hover:linear-gradient(#a82a1f,#62130b); --gb-quest-text:#ffd27a;
  --gb-leather:linear-gradient(#2e2418,#18120b); --gb-leather-hover:linear-gradient(#3a2e1f,#211910); --gb-leather-text:#e8d7b0;
  /* Status (immer mit Wort oder Zeichen) */
  --gb-ok:#8fb35a; --gb-warn:#dcac4a; --gb-bad:#d9774a; --gb-neutral:#9b948a;
  /* Pergament */
  --gb-parch:#e7d7b0; --gb-ink:#3a2814; --gb-seal:#5c1f0c; --gb-ink-quiet:#5a4328;
  /* Spieldaten, Textvarianten ≥ 4,5:1 */
  --q-poor:#9d9d9d; --q-common:#fff; --q-uncommon:#1eff00; --q-rare:#3d8fe6; --q-epic:#b862ff; --q-legendary:#ff8000;
  --c-druid:#ff7c0a; --c-hunter:#aad372; --c-mage:#3fc7eb; --c-paladin:#f48cba; --c-priest:#fff;
  --c-rogue:#fff468; --c-shaman:#3d8fe6; --c-warlock:#8788ee; --c-warrior:#c69b6d;
  /* Schrift */
  --gb-font-display:"Marcellus",serif; --gb-font-text:"Source Sans 3",sans-serif; --gb-font-guild:"Cinzel",serif;
  --gb-display-stroke:.6px; --gb-display-stroke-small:.3px;
  /* Maße */
  --gb-r-chip:2px; --gb-r-control:3px; --gb-r-panel:4px; --gb-r-frame:6px;
  --gb-shadow-1:0 6px 16px rgba(0,0,0,.35);
  --gb-shadow-2:0 14px 30px rgba(0,0,0,.55);
  --gb-shadow-3:0 18px 50px rgba(0,0,0,.75);
  --gb-focus:0 0 0 2px #14100c,0 0 0 4px #95e5df;
  /* Filigran-Rahmen (Zwischenstand; GPT-Auftrag A1 ersetzt das Bild) */
  --gb-frame-img:url("guildbound-petrol-frame-07.webp"); --gb-frame-slice:112; --gb-frame-width:28px; --gb-frame-outset:4.8px;
}
@media (max-width:600px){:root{--gb-frame-width:23px;--gb-frame-outset:4px}}
@media (max-width:359px){:root{--gb-frame-width:21px}.gb-window{padding:18px 16px}}

/* Grund und Text */
.gb-page{background:var(--gb-page);color:var(--gb-text);font-family:var(--gb-font-text);font-size:16px;line-height:1.5}
.gb-page a{color:var(--gb-link);text-underline-offset:3px;text-decoration-color:rgba(224,184,96,.45)}
.gb-page a:hover{color:#ffd88a;text-decoration-color:currentColor}
.gb-page :focus-visible{outline:none;box-shadow:var(--gb-focus);border-radius:var(--gb-r-control)}
::selection{background:rgba(29,94,99,.7);color:#fff}

/* Titelschrift mit Konturverstärkung (immer über diese Klassen) */
.gb-display{font-family:var(--gb-font-display);font-weight:400;-webkit-text-stroke:var(--gb-display-stroke) currentColor;color:var(--gb-title);text-shadow:0 1px 0 #000}
.gb-display--small{-webkit-text-stroke-width:var(--gb-display-stroke-small)}
.gb-h1{font-size:54px;line-height:1.08;text-shadow:0 2px 0 #000}
.gb-h2{font-size:34px;line-height:1.15}
.gb-h3{font-size:26px;line-height:1.2}
.gb-wtitle{font-size:20px;color:var(--gb-gold-text);display:flex;align-items:center}
.gb-guildname{font-family:var(--gb-font-guild);font-weight:700;color:var(--gb-title);text-shadow:0 1px 0 #000}
.gb-meta{font-size:14px;color:var(--gb-quiet)}

/* Seelenstein und Guildbound-Hinweis */
.gb-gem{display:inline-block;flex:none;width:11px;height:11px;margin-right:10px;transform:rotate(45deg);background:linear-gradient(135deg,#c6f3ef,#2a8d92 55%,#0d3f43);border:1px solid #000;box-shadow:0 0 8px rgba(63,199,192,.6);vertical-align:middle;position:relative;top:-2px}
.gb-gem--small{width:8px;height:8px;margin-right:8px;border:0;top:-1px}
.gb-hint{display:flex;align-items:center;gap:0;font-size:14px;line-height:1.4;color:var(--gb-soul)}

/* Flächen nach Stufe */
.gb-window{position:relative;border:4px solid transparent;border-image:var(--gb-frame-img) var(--gb-frame-slice) / var(--gb-frame-width) / var(--gb-frame-outset) stretch;border-radius:var(--gb-r-frame);background:var(--gb-window) padding-box;box-shadow:var(--gb-shadow-2),var(--gb-soul-light);padding:22px 24px}
.gb-panel{border:1px solid var(--gb-brass-line);border-radius:var(--gb-r-panel);background:var(--gb-panel);box-shadow:inset 0 1px 0 rgba(255,220,150,.06),var(--gb-shadow-1);padding:20px 22px}
.gb-panel--world{border-color:var(--gb-brass-world);background:var(--gb-panel-world);box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,220,150,.08),0 10px 24px rgba(0,0,0,.4);backdrop-filter:blur(2px)}
.gb-parch{border-radius:2px;background:var(--gb-parch);background-image:radial-gradient(ellipse at 15% 15%,rgba(255,250,230,.55),transparent 50%),radial-gradient(ellipse at 90% 95%,rgba(140,90,30,.22),transparent 50%);box-shadow:inset 0 0 50px rgba(110,70,20,.38),0 0 0 1px #000,0 0 0 3px #6d5426,0 0 0 4px #000;color:var(--gb-ink);padding:32px 40px}
.gb-parch .gb-display{color:var(--gb-seal);text-shadow:none}
.gb-parch a{color:var(--gb-seal)}

/* Knöpfe */
.gb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;font-family:var(--gb-font-display);font-size:16px;-webkit-text-stroke:var(--gb-display-stroke-small) currentColor;border-radius:var(--gb-r-control);cursor:pointer;text-decoration:none;white-space:nowrap;box-sizing:border-box}
.gb-btn--primary{min-height:46px;padding:0 24px;font-size:17px;color:var(--gb-quest-text);background:var(--gb-quest);border:1px solid var(--gb-gold);box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,190,140,.35),inset 0 -2px 0 rgba(0,0,0,.4);text-shadow:0 1px 0 #000}
.gb-btn--primary:hover{background:var(--gb-quest-hover);color:#ffe2a0}
.gb-btn--secondary{color:var(--gb-leather-text);background:var(--gb-leather);border:1px solid var(--gb-brass);box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,220,150,.12)}
.gb-btn--secondary:hover{background:var(--gb-leather-hover);border-color:var(--gb-gold);color:#f2e3c0}
.gb-btn--icon{width:44px;padding:0;font-size:20px}
.gb-btn:active{transform:translateY(1px);box-shadow:0 0 0 1px #000,inset 0 2px 4px rgba(0,0,0,.5)}
.gb-btn:focus-visible{box-shadow:var(--gb-focus)}
.gb-btn:disabled,.gb-btn[aria-disabled="true"]{background:#1a1611;color:var(--gb-disabled);border-color:#3a2f1d;box-shadow:0 0 0 1px #000;text-shadow:none;cursor:not-allowed;transform:none}
.gb-btn[aria-busy="true"]::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.8}

/* Schildchen */
.gb-tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:1;padding:5px 8px;border-radius:var(--gb-r-chip);border:1px solid;white-space:nowrap}
.gb-tag--ok{color:var(--gb-ok);border-color:rgba(143,179,90,.45);background:rgba(143,179,90,.1)}
.gb-tag--warn{color:var(--gb-warn);border-color:rgba(220,172,74,.45);background:rgba(220,172,74,.1)}
.gb-tag--bad{color:var(--gb-bad);border-color:rgba(217,119,74,.5);background:rgba(217,119,74,.1)}
.gb-tag--neutral{color:var(--gb-muted);border-color:rgba(181,167,137,.4)}
.gb-tag--soul{color:var(--gb-soul);border-color:rgba(149,229,223,.45);background:rgba(29,94,99,.25)}
.gb-tag--season{color:var(--gb-muted);border-style:dashed;border-color:rgba(181,167,137,.45)}

/* Formulare */
.gb-label{display:block;font-size:14px;font-weight:600;color:#d6cbb3;margin-bottom:6px}
.gb-input{box-sizing:border-box;width:100%;min-height:44px;padding:0 12px;font:inherit;font-size:16px;color:var(--gb-title);background:var(--gb-field);border:1px solid var(--gb-brass);border-radius:var(--gb-r-control);box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.gb-input::placeholder{color:#7d7262}
.gb-input:focus{outline:none;border-color:var(--gb-soul);box-shadow:inset 0 2px 4px rgba(0,0,0,.5),0 0 0 3px rgba(149,229,223,.25)}
.gb-input[aria-invalid="true"]{border-color:var(--gb-bad)}
.gb-input:disabled{background:#17130e;border-color:#3a2f1d;color:var(--gb-disabled)}
.gb-help{font-size:14px;color:var(--gb-quiet);margin-top:6px}
.gb-error{font-size:14px;color:var(--gb-bad);margin-top:6px}
.gb-check{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}
.gb-check input{appearance:none;width:22px;height:22px;margin:0;flex:none;border:1px solid var(--gb-brass);border-radius:var(--gb-r-control);background:var(--gb-field);box-shadow:inset 0 2px 3px rgba(0,0,0,.5);display:grid;place-content:center}
.gb-check input:checked{background:linear-gradient(#2a6b70,#14474b);border-color:var(--gb-soul)}
.gb-check input:checked::after{content:"";width:6px;height:11px;border:solid #effcfb;border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px)}
.gb-segment{display:inline-flex;border:1px solid var(--gb-brass);border-radius:var(--gb-r-control);overflow:hidden;box-shadow:0 0 0 1px #000}
.gb-segment label{position:relative}
.gb-segment input{position:absolute;opacity:0;inset:0}
.gb-segment span{display:flex;align-items:center;min-height:42px;padding:0 18px;font-family:var(--gb-font-display);-webkit-text-stroke:var(--gb-display-stroke-small) currentColor;font-size:15px;color:#d6cbb3;background:#18120b;border-right:1px solid #3a2f1d;cursor:pointer}
.gb-segment label:last-child span{border-right:0}
.gb-segment input:checked+span{background:linear-gradient(#2a6b70,#14474b);color:#effcfb}
.gb-segment input:focus-visible+span{box-shadow:inset 0 0 0 2px var(--gb-soul)}

/* Tabs */
.gb-tabs{display:flex;border-bottom:1px solid var(--gb-brass-line)}
.gb-tab{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;font-family:var(--gb-font-display);-webkit-text-stroke:var(--gb-display-stroke-small) currentColor;font-size:15px;color:var(--gb-muted);background:#120e0a;border:1px solid #3a2f1d;border-bottom:0;border-radius:3px 3px 0 0;margin-right:-1px;cursor:pointer;text-decoration:none}
.gb-tab:hover{color:var(--gb-text);background:#1a1510}
.gb-tab[aria-selected="true"]{color:var(--gb-gold-text);background:#1f1b16;border-color:var(--gb-brass-line);position:relative;top:1px;min-height:44px}
.gb-tabpanel{background:#1f1b16;border:1px solid var(--gb-brass-line);border-top:0;border-radius:0 0 4px 4px;padding:18px 20px}

/* Fortschritt */
.gb-xp{position:relative;height:14px;background:#070504;border:1px solid var(--gb-brass-line);border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px #000}
.gb-xp__fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#9a5ad6,#57208f)}
.gb-xp__rest{position:absolute;top:0;bottom:0;background:rgba(60,110,200,.5)}
.gb-xp::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent 0 calc(5% - 1px),rgba(0,0,0,.7) calc(5% - 1px) 5%)}
.gb-bar{height:10px;background:#070504;border:1px solid var(--gb-brass-line);border-radius:2px;overflow:hidden}
.gb-bar__fill{height:100%;background:linear-gradient(#7fa24c,#4d6a26)}

/* Listen */
.gb-list{list-style:none;margin:0;padding:0}
.gb-row{display:grid;grid-template-columns:22px 1fr auto;gap:10px;padding:9px 0;border-top:1px solid var(--gb-rule);font-size:15px}
.gb-row:first-child{border-top:0}
.gb-row__aside{color:var(--gb-quiet)}
.gb-ok{color:var(--gb-ok)}.gb-warn{color:var(--gb-warn)}.gb-bad{color:var(--gb-bad)}.gb-neutral{color:var(--gb-neutral)}

/* Tooltip */
.gb-tooltip{background:rgba(16,12,8,.97);border:1px solid var(--gb-brass);border-radius:var(--gb-r-control);box-shadow:0 0 0 1px #000,0 10px 24px rgba(0,0,0,.6);padding:10px 12px;font-size:14px;line-height:1.4;color:var(--gb-text);max-width:280px}

/* Navigation als Aktionsleiste: Icons ragen heraus (Leistenbild später aus GPT-Auftrag A4) */
.gb-actionbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:end;height:96px;margin-top:34px;background:linear-gradient(#241c13,#120d08);border:1px solid #000;border-top:2px solid #8c6a2a;border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,220,150,.18),inset 0 -12px 22px rgba(0,0,0,.55),0 8px 18px rgba(0,0,0,.5)}
.gb-actionbar a{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;padding:0 6px 12px;box-sizing:border-box;border-right:1px solid #0a0806;font-family:var(--gb-font-display);-webkit-text-stroke:var(--gb-display-stroke-small) currentColor;font-size:15px;color:var(--gb-text);text-decoration:none}
.gb-actionbar a:last-child{border-right:0}
.gb-actionbar img{width:80px;height:80px;margin-top:-34px;filter:drop-shadow(0 8px 6px rgba(0,0,0,.75));transition:transform .2s ease}
.gb-actionbar a:hover img{transform:translateY(-4px)}
.gb-actionbar a[aria-current="page"]{color:var(--gb-gold-text);box-shadow:inset 0 -3px 0 var(--gb-soul);background:radial-gradient(ellipse at 50% 100%,rgba(29,94,99,.35),transparent 70%)}
.gb-actionbar a[aria-current="page"] img{transform:translateY(-6px);filter:drop-shadow(0 12px 8px rgba(0,0,0,.75)) drop-shadow(0 0 12px rgba(149,229,223,.3))}
.gb-actionbar--compact{height:60px;margin-top:20px;display:flex;align-items:center;gap:10px;padding:0 16px}
.gb-actionbar--compact a{flex-direction:row;align-items:center;justify-content:flex-start;height:60px;padding:12px 6px 0;gap:6px;border-right:0;white-space:nowrap}
.gb-actionbar--compact img{width:48px;height:48px;margin:0 -2px;position:relative;top:-20px}
.gb-actionbar--compact a[aria-current="page"] img{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.gb-actionbar img{transition:none}}
/* Handy: Aktionsleiste weicht dem Menü (Liste mit Icons 40 px, Zeilen 52 px) */
.gb-menu-button{display:none}
@media (max-width:760px){
  .gb-actionbar{display:none}
  .gb-menu-button{display:inline-flex}
}
.gb-menu{list-style:none;margin:0;padding:6px 0;background:var(--gb-deep)}
.gb-menu a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;font-family:var(--gb-font-display);-webkit-text-stroke:var(--gb-display-stroke-small) currentColor;font-size:17px;color:var(--gb-text);text-decoration:none}
.gb-menu img{width:40px;height:40px}
.gb-menu a[aria-current="page"]{color:var(--gb-gold-text);background:rgba(29,94,99,.18);box-shadow:inset 3px 0 0 var(--gb-soul)}

/* Medaillon */
.gb-medal{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.gb-medal--date{border:2px solid var(--gb-gold);background:radial-gradient(circle at 40% 35%,#3a2c1a,#120d08);box-shadow:0 0 0 1px #000,inset 0 0 0 2px #000}
.gb-medal--season{border:2px dashed var(--gb-brass-world);background:#120e0a;box-shadow:0 0 0 1px #000}
.gb-medal--next{width:96px;height:96px;border:2px solid var(--gb-gold);background:radial-gradient(circle at 40% 35%,var(--gb-soul-stone),var(--gb-soul-deep));box-shadow:0 0 0 1px #000,inset 0 0 0 2px #000,var(--gb-soul-glow)}
.gb-medal--past{width:44px;height:44px;border:1px solid var(--gb-brass-line);background:#17120d;opacity:.8}
.gb-today{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--gb-soul)}
.gb-today::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gb-soul);box-shadow:0 0 8px #3fc7c0}

/* Zustände */
.gb-alert{display:flex;gap:10px;padding:16px 18px;border:1px solid rgba(217,119,74,.55);border-radius:var(--gb-r-panel);background:rgba(217,119,74,.08)}
.gb-toast{display:flex;gap:10px;align-items:center;padding:12px 16px;border:1px solid rgba(143,179,90,.5);border-radius:var(--gb-r-panel);background:#18170f;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.gb-skeleton{height:14px;border-radius:2px;background:linear-gradient(90deg,#221c15,#33291d 50%,#221c15)}

/* Ragendes Objekt */
.gb-protrude{position:absolute;filter:drop-shadow(0 16px 14px rgba(0,0,0,.75));pointer-events:none}