/* =========================================================================
   Trittsiegel – Globus-Seite
   ========================================================================= */

.ts-body.globe-page {
    background: radial-gradient(1200px 700px at 50% 0%, #3a2e20 0%, #2c2318 55%, #241d14 100%);
    color: #f2ece0;
}
.globe-page .ts-header--solid {
    background: rgba(28, 22, 14, 0.6);
    border-bottom: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
}
.globe-page .ts-brand { color: #fff; }
.globe-page .ts-nav a { color: #d6cbb8; }
.globe-page .ts-nav__cta { border-color: rgba(255,255,255,.4); color: #fff; }
.globe-page .ts-nav__cta:hover { background: #fff; color: #2c2318; }

.globe-main {
    max-width: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.globe-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem 1rem;
}
.globe-intro .section-eyebrow { color: #d9a441; }
.globe-intro h1 {
    font-family: var(--ts-font-head);
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 3.4rem);
    margin: .4rem 0 .8rem;
    color: #fff;
}
.globe-lead { color: #c1b5a0; font-size: 1.1rem; margin: 0; }

.globe-stage {
    position: relative;
    width: 100%;
    flex: 1;
}
.globe-canvas {
    width: 100%;
    height: clamp(420px, 72vh, 820px);
    cursor: grab;
}
.globe-canvas:active { cursor: grabbing; }

.globe-empty {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #c1b5a0;
    background: rgba(0,0,0,.35);
    padding: 1rem 1.4rem;
    border-radius: 12px;
    font-size: 1rem;
}

/* globe.gl Tooltip */
.globe-tip {
    background: rgba(30, 24, 15, .94);
    border: 1px solid rgba(217,164,65,.5);
    border-radius: 10px;
    padding: .6rem .8rem;
    color: #fff;
    font-family: var(--ts-font-body);
    line-height: 1.35;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.globe-tip strong { display: block; font-size: 1rem; }
.globe-tip em { display: block; color: #d6cbb8; font-size: .85rem; margin: .1rem 0 .35rem; }
.globe-tip span { color: #d9a441; font-size: .8rem; font-weight: 600; }

.globe-page .ts-footer { background: #1b150e; }

/* ---- Steuerung (Suche + Filter-Chips) ---- */
.globe-controls {
    position: absolute; z-index: 20;
    top: 1rem; left: 50%; transform: translateX(-50%);
    width: min(92%, 760px);
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    pointer-events: none;
}
.globe-canvas { position: relative; z-index: 1; }
.globe-results {
    pointer-events: auto;
    width: min(100%, 380px); max-height: 50vh; overflow-y: auto;
    background: rgba(30,24,15,.94); border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px; backdrop-filter: blur(8px);
    display: flex; flex-direction: column; box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.globe-result {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .85rem; background: none; border: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #f2ece0; font-family: inherit; font-size: inherit; text-align: left; cursor: pointer;
}
.globe-result:last-child { border-bottom: none; }
.globe-result:hover { background: rgba(217,164,65,.16); }
.globe-result__dot { width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.globe-result strong { display: block; font-size: .95rem; }
.globe-result em { color: #c1b5a0; font-size: .8rem; font-style: italic; }
.globe-count { pointer-events: none; color: #b4a893; font-size: .82rem; }
.globe-searchbox {
    pointer-events: auto;
    width: min(100%, 320px);
    padding: .6rem .9rem; font-size: .95rem; font-family: inherit;
    color: #fff; background: rgba(30,24,15,.7);
    border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
    backdrop-filter: blur(8px);
}
.globe-searchbox::placeholder { color: #a89b86; }
.globe-searchbox:focus { outline: none; border-color: #d9a441; }
.globe-filter-head { pointer-events: auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.globe-filter-head__label { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: #b4a893; }
.globe-filter-btn { font-family: inherit; font-size: .78rem; padding: .25rem .7rem; border-radius: 999px; cursor: pointer; color: #2b2208; background: #d9a441; border: none; font-weight: 600; }
.globe-filter-btn:hover { background: #e7b758; }
.globe-chips { pointer-events: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.globe-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .32rem .7rem; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: .82rem; color: #e6ddcd;
    background: rgba(30,24,15,.6); border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(8px); transition: opacity .15s, border-color .15s;
}
.globe-chip__dot { width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.globe-chip:not(.is-on) { opacity: .4; }
.globe-chip.is-on { border-color: rgba(255,255,255,.35); }

/* ---- Info-Karte ---- */
.globe-info {
    /* fixed statt absolute: die Info-Karte bleibt immer im sichtbaren Bereich
       (der Globus-Container kann höher als der Viewport sein → Karte war sonst
       unter dem Falz und nicht anklickbar). */
    position: fixed; z-index: 60;
    left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
    width: min(86vw, 300px);
    max-height: min(75vh, 32rem); overflow: auto;
    padding: 1.3rem 1.4rem 1.4rem;
    background: rgba(30,24,15,.92); color: #fff;
    border: 1px solid rgba(217,164,65,.4); border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0,0,0,.5); backdrop-filter: blur(10px);
}
.globe-info__close {
    position: absolute; top: .5rem; right: .7rem;
    background: none; border: none; color: #b4a893; font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.globe-info__close:hover { color: #fff; }
.globe-info__hab { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.globe-info h3 { font-family: var(--ts-font-head); font-size: 1.5rem; margin: .25rem 0 .1rem; }
.globe-info em { display: block; color: #d0c4b0; font-size: .95rem; margin-bottom: 1rem; }
.globe-info__cta {
    display: inline-block; padding: .55rem 1.1rem; border-radius: 999px;
    background: #d9a441; color: #1b2a33; font-weight: 700; text-decoration: none; font-size: .9rem;
}
.globe-info__cta:hover { background: #e7b757; }

@media (max-width: 600px) {
    .globe-controls { top: .6rem; }
    .globe-chip { font-size: .76rem; padding: .28rem .6rem; }
}