
.gc-stage{width:min(100%,1680px);min-height:100vh;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:0;color:#282828;background:#fff}
.gc-map{position:relative;min-width:0;min-height:620px;height:100vh;background:#fff;overflow:hidden;isolation:isolate}
.gc-map .maplibregl-canvas{outline:none}
.gc-overlay{position:absolute;left:28px;top:22px;z-index:2;pointer-events:none;max-width:430px}
.gc-kicker{font-size:11px;letter-spacing:.12em;color:#68716c;margin:0 0 12px}
.gc-overlay h1{font-size:clamp(24px,3vw,38px);font-weight:600;letter-spacing:-.04em;line-height:1.13;margin:0 0 9px;color:#222}
.gc-overlay p{font-size:13px;line-height:1.5;color:#5f6662;margin:0}
.gc-tools{position:absolute;bottom:24px;left:24px;z-index:3;display:flex;gap:6px}
.gc-tools button{border:1px solid #ddd;border-radius:50%;width:36px;height:36px;background:#fff;color:#333;cursor:pointer;font-size:20px;font-weight:400}
.gc-tools button:focus-visible{outline:2px solid #517a70}
.gc-card{border-left:1px solid #eee;padding:28px 25px 24px;min-width:0;overflow:auto;max-height:100vh;background:#fff}
.gc-card h2{font-size:23px;font-weight:600;letter-spacing:-.025em;margin:0 0 12px;line-height:1.2}
.gc-card p{font-size:14px;line-height:1.55;margin:0 0 14px}
.gc-meta{font-size:12px;color:#707070;margin-bottom:10px}
.gc-needle{font-size:54px;color:#537d6f;display:block;text-align:center;margin:15px 0;transition:transform .3s}
.gc-log{padding:9px 0;border-bottom:1px solid #ececec;font-size:13px}
.gc-card h3{font-size:14px;margin:22px 0 8px}
.gc-card select,.gc-card textarea{width:100%;padding:10px;margin:5px 0;border:1px solid #ddd;border-radius:7px;background:#fff;color:#222}
.gc-card textarea{min-height:62px}
.gc-card button{border:1px solid #ddd;border-radius:7px;background:#fff;padding:9px 12px;color:#222;cursor:pointer;font-size:13px}
.gc-votes{display:grid;gap:7px}
.gc-votes button{text-align:left}
.gc-card button:hover{background:#f5f7f5}
.gc-pin{width:28px;height:28px;padding:0;border:0;background:transparent;box-shadow:0 2px 8px #0002;border-radius:50%;cursor:pointer;display:grid;place-items:center}.gc-pin:hover{transform:scale(1.16)}
.gc-map-fallback{position:absolute;inset:38% 12% auto;padding:14px;text-align:center;background:#fff;border:1px solid #ddd;z-index:4}
.gc-disclaimer{font-size:11px;color:#777;text-align:center;margin:6px 16px 30px}
.gc-map .maplibregl-control-container{font-size:10px}
@media(max-width:850px){.gc-stage{grid-template-columns:1fr}.gc-map{height:60vh;min-height:410px}.gc-card{max-height:none;border-left:0;border-top:1px solid #eee;padding:20px}.gc-overlay{left:16px;top:14px;max-width:280px}.gc-overlay h1{font-size:26px}.gc-tools{bottom:16px;left:16px}}

.gc-map .maplibregl-canvas-container{background:#fff}

/* Controls appear only while the globe is being explored. */
.gc-tools{opacity:0;pointer-events:none;transform:translateY(5px);transition:opacity .25s ease,transform .25s ease}
.gc-map:hover .gc-tools,.gc-map:focus-within .gc-tools{opacity:1;pointer-events:auto;transform:translateY(0)}
@media(hover:none){.gc-tools{opacity:1;pointer-events:auto;transform:none}}
@media(prefers-reduced-motion:reduce){.gc-tools{transition:none}}
.gc-overlay,.gc-tools{z-index:3}

.gc-overlay{transition:opacity .35s ease,visibility .35s ease}
.gc-overlay--hidden{opacity:0;visibility:hidden}
@media(prefers-reduced-motion:reduce){.gc-overlay{transition:none}}

/* Self-contained Global Compass night mode; no global IFIS theme changes. */
body.gc-dark-mode,body.gc-dark-mode main#start{background:#101716!important;color:#ebf0ed}
body.gc-dark-mode .gc-stage,body.gc-dark-mode .gc-map,body.gc-dark-mode .gc-card{background:#101716;color:#ebf0ed}
body.gc-dark-mode .gc-map .maplibregl-canvas-container{background:#101716}
body.gc-dark-mode .gc-card{border-left-color:#35413c}
body.gc-dark-mode .gc-overlay h1{color:#f3f6f4}
body.gc-dark-mode .gc-kicker,body.gc-dark-mode .gc-overlay p,body.gc-dark-mode .gc-meta,body.gc-dark-mode .gc-disclaimer{color:#aabbb2}
body.gc-dark-mode .gc-card p,body.gc-dark-mode .gc-card h2,body.gc-dark-mode .gc-card h3{color:#ebf0ed}
body.gc-dark-mode .gc-log{border-bottom-color:#34433d}
body.gc-dark-mode .gc-tools button,body.gc-dark-mode .gc-card button,body.gc-dark-mode .gc-card select,body.gc-dark-mode .gc-card textarea{background:#1e2925;color:#eef4ef;border-color:#3a4a42}
body.gc-dark-mode .gc-card button:hover{background:#293a32}
body.gc-dark-mode .gc-map-fallback{background:#1e2925;color:#eef4ef}
body.gc-dark-mode .maplibregl-ctrl-attrib{background:rgba(20,27,24,.75);color:#bdcbc3}
body.gc-dark-mode .maplibregl-ctrl-attrib a{color:#d9e8dd}


/* Global Compass: breathing room for the heading and mobile-first layout */
.gc-overlay{top:clamp(42px,5vh,74px);left:clamp(20px,3vw,48px);max-width:min(480px,calc(100% - 40px))}
.gc-overlay h1{line-height:1.16;overflow-wrap:normal}
.gc-overlay .gc-kicker{display:block;line-height:1.5;margin-bottom:14px}
@media(max-width:850px){
 .gc-stage{display:flex;flex-direction:column;min-height:0}
 .gc-map{height:65svh;min-height:470px;max-height:760px}
 .gc-card{width:100%;padding:24px 20px 32px;overflow:visible;max-height:none}
 .gc-overlay{top:22px;left:20px;max-width:calc(100% - 40px)}
 .gc-overlay h1{font-size:clamp(25px,5.5vw,34px);line-height:1.18}
 .gc-overlay p{font-size:13px}
 .gc-tools{left:16px;bottom:16px}
 .gc-card select,.gc-card textarea,.gc-card button{min-height:42px}
}
@media(max-width:480px){
 .gc-map{height:58svh;min-height:430px}
 .gc-overlay{top:18px;left:16px;right:16px;max-width:none}
 .gc-overlay .gc-kicker{font-size:10px;margin-bottom:10px}
 .gc-overlay h1{font-size:clamp(23px,7vw,29px);line-height:1.18;max-width:330px}
 .gc-overlay p{max-width:290px;font-size:12px;line-height:1.5}
 .gc-card{padding:20px 16px 32px}
 .gc-needle{margin:8px 0;font-size:45px}
 .gc-disclaimer{padding:0 12px;line-height:1.5}
}


/* Language switch: light, always visible, without competing with globe controls. */
.gc-language{position:absolute;top:16px;right:18px;display:flex;align-items:center;gap:5px;z-index:5;font-size:12px;color:#7d8882}
.gc-language button{border:0;background:transparent;padding:5px 3px;color:inherit;font-size:12px;cursor:pointer}
.gc-language button.active{font-weight:700;color:#315d50}
.gc-language button:focus-visible{outline:2px solid currentColor;border-radius:3px}
body.gc-dark-mode .gc-language{color:#afc0b6}
body.gc-dark-mode .gc-language button.active{color:#e6f3eb}
/* On narrow screens, reserve a clear reading band before the globe. */
@media(max-width:850px){
.gc-stage{display:block}
.gc-map{height:calc(63svh + 150px);min-height:530px;max-height:none}
.gc-overlay{top:68px;left:18px;right:18px;max-width:none}
.gc-overlay h1{max-width:100%;font-size:clamp(24px,6vw,32px);line-height:1.15}
.gc-overlay p{max-width:100%}
.gc-tools{bottom:12px}
.gc-language{top:15px;right:16px}
}
@media(max-width:480px){
.gc-map{height:calc(60svh + 150px);min-height:520px}
.gc-overlay{top:67px;left:16px;right:16px}
.gc-overlay .gc-kicker{font-size:10px;margin-bottom:10px}
.gc-overlay h1{font-size:clamp(21px,6.4vw,28px);letter-spacing:-.035em;white-space:normal}
.gc-overlay p{font-size:12px}
}


/* Stable desktop composition: fixed viewport, independently scrollable card. */
@media(min-width:851px){
 html:has(.gc-stage),body:has(.gc-stage){height:100%;overflow:hidden}
 body:has(.gc-stage) main#start{height:100dvh;min-height:0;overflow:hidden}
 .gc-stage{width:100%;max-width:none;height:100dvh;min-height:0;grid-template-columns:minmax(0,1fr) clamp(310px,26vw,390px);align-items:stretch}
 .gc-map{height:100dvh;min-height:0;overflow:hidden}
 .gc-card{height:100dvh;min-height:0;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:clamp(26px,4vh,48px) 24px 36px}
 .gc-overlay{top:clamp(30px,4.4vh,58px);left:clamp(24px,3vw,50px);right:70px;max-width:560px}
 .gc-overlay .gc-kicker{margin-bottom:12px}
 .gc-language{top:clamp(21px,3vh,40px);right:clamp(18px,2vw,34px)}
}
/* Mobile: a readable heading, map centred in its own panel, normal page scrolling. */
@media(max-width:850px){
 html:has(.gc-stage),body:has(.gc-stage),body:has(.gc-stage) main#start{height:auto;overflow:visible}
 .gc-stage{display:flex;flex-direction:column;width:100%;height:auto;min-height:0}
 .gc-map{height:min(86svh,750px);min-height:500px;max-height:none;flex:none}
 .gc-overlay{top:64px;left:20px;right:20px;max-width:none}
 .gc-overlay h1{font-size:clamp(24px,5.8vw,33px);line-height:1.2}
 .gc-card{height:auto;min-height:0;max-height:none;overflow:visible;padding:28px 20px 38px}
 .gc-language{top:18px;right:20px}
}
@media(max-width:480px){
 .gc-map{height:min(83svh,680px);min-height:460px}
 .gc-overlay{top:66px;left:16px;right:16px}
 .gc-overlay h1{font-size:clamp(21px,6vw,27px)}
 .gc-card{padding:24px 16px 36px}
}


/* Quiet context link: accessible, unobtrusive and readable in both modes. */
.gc-thought{margin-top:19px;max-width:360px;opacity:1;transition:opacity .25s ease}
.gc-thought-changing{opacity:0}
.gc-thought a{pointer-events:auto;display:inline-flex;align-items:baseline;flex-wrap:wrap;column-gap:5px;row-gap:3px;text-decoration:none;color:#4b6e63;font-size:12px;line-height:1.6}
.gc-thought a:hover #gc-thought-title,.gc-thought a:focus-visible #gc-thought-title{text-decoration:underline;text-underline-offset:3px}
.gc-thought-label{font-size:10px;letter-spacing:.03em;color:#858e89;margin-right:4px}
body.gc-dark-mode .gc-thought a{color:#c5dbd0}
body.gc-dark-mode .gc-thought-label{color:#99aca2}
@media(max-width:480px){.gc-thought{margin-top:13px;max-width:260px}.gc-thought a{font-size:11px}}
@media(prefers-reduced-motion:reduce){.gc-thought{transition:none}}

/* No regular site header is rendered on this full-screen Compass page. */
body:has(.gc-stage) main#start{padding-top:0!important}


/* Align card header with the left headline; keep the globe below the intro. */
@media(min-width:851px){
 .gc-overlay{top:34px}
 .gc-card{padding-top:34px}
 .gc-thought{margin:24px 0 4px;padding-top:14px;border-top:1px solid #e4e8e5;max-width:none}
 body.gc-dark-mode .gc-thought{border-top-color:#35413c}
}
/* Mobile: a brief title introduction, then only the globe on a clean field.
   All explanation and links live in the card below. */
@media(max-width:850px){
 .gc-overlay{top:58px;left:20px;right:20px;max-width:none;animation:gc-mobile-intro 3.5s ease-in-out both}
 .gc-overlay .gc-kicker,.gc-overlay p{display:none}
 .gc-overlay h1{max-width:100%;font-size:clamp(25px,5.8vw,34px);text-align:center;margin:0;color:#222}
 .gc-map{background:#fff}
 .gc-card{padding-top:28px}
 .gc-thought{margin-top:24px;padding-top:14px;border-top:1px solid #e4e8e5;max-width:none}
 body.gc-dark-mode .gc-thought{border-top-color:#35413c}
}
@media(max-width:480px){.gc-overlay{top:64px;left:12px;right:12px}.gc-overlay h1{font-size:clamp(22px,6.4vw,29px)}}
@keyframes gc-mobile-intro{0%,62%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@media (max-width:850px) and (prefers-reduced-motion:reduce){.gc-overlay{animation:none;opacity:0;visibility:hidden}}


/* Mobile stacked reading: globe stays put while the profile sheet glides over it. */
@media(max-width:850px){
  body:has(.gc-stage) main#start{overflow:visible}
  .gc-stage{display:block;position:relative;height:auto;min-height:0;isolation:isolate}
  .gc-map{position:sticky;top:0;height:100svh;min-height:0;max-height:none;z-index:0;overflow:hidden}
  .gc-card{position:relative;z-index:2;margin:0;min-height:100svh;max-height:none;height:auto;overflow:visible;background:#fff;border-top:1px solid #e4e8e5;border-left:0;border-radius:18px 18px 0 0;box-shadow:0 -9px 28px rgba(0,0,0,.055);padding:28px 20px 42px}
  .gc-map .maplibregl-canvas{touch-action:pan-y}
  body.gc-dark-mode .gc-card{background:#101716;border-top-color:#35413c;box-shadow:0 -9px 28px rgba(0,0,0,.22)}
}
@media(max-width:480px){.gc-map{height:100svh;min-height:0;max-height:none}.gc-card{padding:26px 16px 40px}}


/* Mobile gestures: the globe is fully interactive; the sheet has its own grip. */
@media(max-width:850px){
 .gc-map .maplibregl-canvas,
 .gc-map .maplibregl-canvas-container{touch-action:none}
 .gc-card{margin-top:-78px;padding-top:88px;touch-action:pan-y}
 .gc-card::before{
  content:"Karteikarte hochziehen";
  position:absolute;top:0;left:0;right:0;height:72px;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:12px;box-sizing:border-box;
  border-radius:18px 18px 0 0;
  font-size:11px;letter-spacing:.03em;color:#697b70;
  background:linear-gradient(#fff,#fff);
 }
 .gc-card::after{content:"";position:absolute;top:10px;left:calc(50% - 23px);width:46px;height:5px;background:#c3ccc6;border-radius:9px;pointer-events:none}
 body.gc-dark-mode .gc-card::before{color:#aabbb2;background:#101716}
 body.gc-dark-mode .gc-card::after{background:#6f8177}
}
