/* Startseite mit Fast Lanes (27.10.2026). Entwurf: Leinwand „Guildbound – Startseite Fast Lanes“, Artboard 1b.
   Wiederverwendet: Navigation, .gb-home-button, Hero-Motiv, gemalte Icons, Zeitlinie und News. */
.gl-wrap{width:min(1208px,100%);margin:0 auto;padding:0 36px;box-sizing:border-box}
.gl-hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid #2b2822;color:var(--gb-ink,#eee6d5)}
.gl-hero::before{content:'';position:absolute;inset:0;z-index:-2;background:var(--gb-hero,url('/guildbound/brand/hero-neutral.webp')) 70% 40%/cover no-repeat}
.gl-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#111111f5 0%,#111111d9 40%,#11111180 75%,#11111155 100%),linear-gradient(180deg,#11111100 30%,#111111e6 100%)}
.gl-hero .gl-wrap{padding-top:24px;padding-bottom:22px}
.gl-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.gl-kicker{margin:0;font:700 13px/1.4 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gb-accent,#d5b978)}
.gl-hero h1{margin:4px 0 2px;font:400 40px/1.1 Georgia,serif;color:#f3ead6}
.gl-hero h1 em{font-style:normal;color:#e2bd68}
.gl-narrow{display:none}
.gl-lead{margin:0;font-size:16px;color:#d6cebf}
.gl-launch{display:flex;flex-direction:column;align-items:flex-end;padding:10px 16px;border:1px solid #71633e;border-radius:3px;background:#111111e6;font-size:14px;color:#c2bbad}
.gl-launch-big{font:400 22px/1.15 Georgia,serif;color:var(--gb-ink,#eee6d5)}
.gl-launch b{font-weight:400;color:#e2bd68}
.gl-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.gl-lane{position:relative;display:flex;flex-direction:column;min-width:0;padding:26px 22px 20px;border:1px solid #3d3628;border-radius:3px;background:#191919f2;transition:border-color .2s}
.gl-lane:hover,.gl-lane:focus-within{border-color:var(--gb-accent,#d5b978)}
.gl-lane:has(.gb-home-button.primary){border-color:#71633e;background:linear-gradient(180deg,#201d15f5 0%,#191919f2 60%)}
.gl-icon{position:absolute;left:14px;top:-34px;width:84px;height:84px;pointer-events:none}
.gl-icon img{position:absolute;inset:0;width:84px;height:84px;filter:drop-shadow(0 8px 12px #000b)}
.gl-icon .gl-compass-needle{filter:none;transform-origin:46.484375% 51.07421875%}
.gl-head{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:58px;margin-top:-14px;padding-left:88px}
.gl-head h2{margin:0;font:400 25px/1.15 Georgia,serif;color:var(--gb-ink,#eee6d5)}
.gl-tag{display:inline-block;padding:0 7px;border:1px solid #438e90;border-radius:2px;background:#102e30;color:#95e5df;font:700 13px/20px system-ui,sans-serif;letter-spacing:.04em}
.gl-tag-now{border-color:#5d7f55;background:#1c2a19;color:#9ccf94}
.gl-tag-plain{border-color:#3d3628;background:transparent;color:#a39c8f}
.gl-lane p{margin:12px 0 0;min-height:48px;font-size:15px;line-height:1.55;color:#c2bbad}
.gl-action{margin-top:auto;padding-top:16px}
.gl-lanes .gb-home-button,.gl-about .gb-home-button{display:flex;min-height:48px;padding:0 18px;border:1px solid #b59d37;border-radius:3px;background:#29271c;color:#ffd100;font-size:16px;font-weight:700;text-decoration:none;text-align:center}
.gl-about .gb-home-button{display:inline-flex}
.gl-lanes .gb-home-button.primary{background:#e2bd68;border-color:#e2bd68;color:#171510;font-weight:700}
.gl-lanes .gb-home-button:hover,.gl-about .gb-home-button:hover{filter:brightness(1.1)}
.gl-lanes .gb-home-button:focus-visible,.gl-about .gb-home-button:focus-visible{outline:2px solid #ead39e;outline-offset:3px}
.gl-phone-kompass{display:none}
.gl-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin:18px 0 0;padding:0;list-style:none;font-size:14px;color:#c2bbad}
.gl-trust li{display:flex;align-items:center;gap:7px}
.gl-trust li::before{content:'';width:12px;height:6px;margin-top:-4px;border-left:2px solid #9ccf94;border-bottom:2px solid #9ccf94;transform:rotate(-45deg)}
/* Movement belongs to the same rig family as the navigation icons. */
.gl-lane:is(:hover,:focus-within) .gl-compass-needle{animation:gl-needle 1.6s cubic-bezier(.3,0,.2,1)}
.gl-lane-guild:is(:hover,:focus-within) .gl-icon img{transform-origin:50% 8%;animation:gl-sway 1.4s ease-in-out}
.gl-lane-talents:is(:hover,:focus-within) .gl-icon img,.gl-lane-plan:is(:hover,:focus-within) .gl-icon img{animation:gl-glow 1.4s ease-in-out}
@keyframes gl-needle{0%,100%{transform:rotate(0)}18%{transform:rotate(-70deg)}40%{transform:rotate(38deg)}60%{transform:rotate(-16deg)}78%{transform:rotate(6deg)}90%{transform:rotate(-2deg)}}
@keyframes gl-sway{0%,100%{transform:rotate(0)}25%{transform:rotate(4deg)}60%{transform:rotate(-3deg)}85%{transform:rotate(1deg)}}
@keyframes gl-glow{0%,100%{filter:drop-shadow(0 8px 12px #000b)}45%{filter:drop-shadow(0 0 14px #95e5dfaa) brightness(1.15);transform:translateY(-3px)}}
html[data-gm-motion=off] .gl-icon img{animation:none!important}
@media(prefers-reduced-motion:reduce){.gl-icon img{animation:none!important}}
.gl-about{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px;align-items:center;padding:48px 0;color:var(--gb-ink,#eee6d5)}
.gl-about h2{margin:6px 0 10px;font:400 36px/1.15 Georgia,serif;color:#f3ead6}
.gl-about-text p{margin:0 0 20px;max-width:520px;font-size:17px;line-height:1.6;color:#c2bbad}
.gl-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.gl-tiles li{padding:18px;border:1px solid #2b2822;border-radius:3px;background:#151515}
.gl-tiles img{width:52px;height:52px;margin-bottom:8px;object-fit:contain}
.gl-tiles strong{display:block;font:400 19px/1.2 Georgia,serif;color:var(--gb-accent,#d5b978)}
.gl-tiles span{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:#c2bbad}
@media(max-width:1100px){.gl-about{grid-template-columns:1fr;gap:28px}}
/* Phone and tablet: the import needs the PC, the guild works completely here. */
@media(max-width:900px){
 .gl-hero::before{background-image:url('/guildbound/brand/hero-neutral-compact.webp');background-position:78% 40%}
 .gl-wrap{padding:0 16px}
 .gl-hero .gl-wrap{padding-top:20px;padding-bottom:20px}
 .gl-hero h1{font-size:32px}
 .gl-narrow{display:inline}.gl-wide{display:none}
 .gl-launch{align-items:flex-start;flex-direction:row;gap:8px;align-self:flex-start;padding:6px 10px}
 .gl-launch-big{font:400 15px/1.4 system-ui,sans-serif}
 .gl-lanes{display:flex;flex-direction:column;gap:8px;margin-top:16px}
 .gl-lane-guild{order:1}.gl-lane-talents{order:2}.gl-phone-kompass{order:3}.gl-lane-plan{order:3}
 .gl-lane{padding:16px}
 .gl-icon{position:static;width:50px;height:50px;flex:none}
 .gl-icon img{position:static;width:50px;height:50px}
 .gl-lane{display:grid;grid-template-columns:50px minmax(0,1fr);column-gap:12px;align-items:center}
 .gl-lanes .gl-lane-kompass{display:none}
 .gl-head{margin:0;padding:0;min-height:0}
 .gl-head h2{font-size:21px}
 .gl-lane p,.gl-action{grid-column:1/-1}
 .gl-lane p{min-height:0;margin-top:10px}
 .gl-action{padding-top:12px}
 .gl-lanes .gb-home-button.gl-mobile-primary{background:#e2bd68;border-color:#e2bd68;color:#171510;font-weight:700}
 .gl-lane-guild:has(.gl-mobile-primary){border-color:#71633e;background:linear-gradient(180deg,#201d15f5 0%,#191919f2 60%)}
 .gl-lane-talents p{display:none}
 .gl-phone-kompass{display:block;padding:16px;border:1px solid #2f4a4a;border-radius:3px;background:linear-gradient(180deg,#132022 0%,#161616 70%)}
 .gl-phone-head{display:flex;align-items:center;gap:12px}
 .gl-phone-head img{width:52px;height:52px;flex:none}
 .gl-phone-head h2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font:400 21px/1.2 Georgia,serif;color:var(--gb-ink,#eee6d5)}
 .gl-phone-kompass>p{margin:10px 0 12px;font-size:15px;line-height:1.55;color:#c2bbad}
 .gl-phone-kompass ul{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px;padding:0;list-style:none}
 .gl-phone-kompass li{padding:10px;border:1px solid #2b3636;border-radius:3px;background:#111111aa;font-size:13px;line-height:1.35;color:#d8d0bf}
 .gl-phone-kompass li strong{display:block;margin-bottom:2px;font-size:14px;color:var(--gb-ink,#eee6d5)}
 .gl-phone-kompass li small{display:block;margin-top:4px;font-size:13px;color:#a39c8f}
 .gl-phone-kompass .gb-home-button{display:flex;width:100%;box-sizing:border-box;min-height:46px;border:1px solid #b59d37;border-radius:3px;background:#29271c;color:#ffd100;font-weight:700}
 .gl-phone-note{margin:8px 0 0;font-size:13px;color:#a39c8f}
 .gl-phone-note b{color:var(--gb-ink,#eee6d5);font-weight:600}
 .gl-trust{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;justify-content:start;font-size:13px}
 .gl-trust li{align-items:flex-start}
 .gl-about{padding:32px 0}
 .gl-about h2{font-size:28px}
 .gl-tiles{grid-template-columns:1fr}
}
@media(max-width:360px){.gl-phone-kompass ul,.gl-trust{grid-template-columns:1fr}.gl-hero h1{font-size:29px}}
