/* CGS Referenzen — everything scoped under .cgs-ref so the theme is untouched. */
.cgs-ref {
	--cgs-bg: #0f1112; --cgs-panel: #171a1c; --cgs-line: #262a2d; --cgs-text: #ececec; --cgs-muted: #8d9296; --cgs-green: #61a229;
	background: var(--cgs-bg); color: var(--cgs-text); font-family: inherit; line-height: 1.6;
	padding: 56px clamp(16px, 3vw, 40px) 72px; box-sizing: border-box;
}
.cgs-ref *, .cgs-ref *::before, .cgs-ref *::after { box-sizing: border-box; }
.cgs-ref { color-scheme: dark; } /* tells browsers the block is already dark, so their dark mode leaves it alone */
.cgs-ref .cgs-ref-inner { max-width: 1240px; margin: 0 auto; }

.cgs-ref .cgs-ref-top { margin: 0 0 28px; }
.cgs-ref .cgs-ref-eyebrow { color: var(--cgs-green); font-weight: 600; letter-spacing: .22em; font-size: 12px; text-transform: uppercase; }
.cgs-ref h2.cgs-ref-h1 { margin: 8px 0 0; padding: 0; font-size: clamp(28px, 4vw, 46px); line-height: 1.1; font-weight: 700; color: var(--cgs-text); text-transform: none; letter-spacing: 0; }

/* Board: map + drawer */
.cgs-ref .cgs-ref-board { position: relative; background: var(--cgs-panel); border: 1px solid var(--cgs-line); border-radius: 22px; overflow: hidden; }
.cgs-ref .cgs-ref-mapbox {
	position: relative; padding: 28px 28px 20px;
	background-image: linear-gradient(var(--cgs-line) 1px, transparent 1px), linear-gradient(90deg, var(--cgs-line) 1px, transparent 1px);
	background-size: 48px 48px; background-position: -1px -1px;
}
.cgs-ref svg.cgs-ref-map { width: 100%; height: auto; display: block; overflow: visible; max-width: none; }
.cgs-ref .cgs-ref-canton { fill: #1d2124; stroke: #353b40; stroke-width: .8; transition: fill .25s; }
.cgs-ref .cgs-ref-canton.is-served { fill: #22301a; }
.cgs-ref .cgs-ref-canton.is-active { fill: #3b5a22; }
.cgs-ref .cgs-ref-country { fill: none; stroke: #8a9096; stroke-width: 1.5; }
.cgs-ref .cgs-ref-lake { fill: var(--cgs-bg); }

.cgs-ref .cgs-ref-marker { cursor: pointer; outline: none; }
.cgs-ref .cgs-ref-hit { fill: transparent; }
.cgs-ref .cgs-ref-core { fill: var(--cgs-green); stroke: var(--cgs-bg); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform .2s, fill .2s; }
.cgs-ref .cgs-ref-pulse { fill: none; stroke: var(--cgs-green); stroke-width: 1.5; opacity: .8; transform-box: fill-box; transform-origin: center; animation: cgs-ref-pulse 2.4s ease-out infinite; }
.cgs-ref .cgs-ref-label { fill: var(--cgs-muted); font-size: 13px; font-weight: 500; paint-order: stroke; stroke: var(--cgs-panel); stroke-width: 4px; pointer-events: none; }
.cgs-ref .cgs-ref-marker:hover .cgs-ref-core, .cgs-ref .cgs-ref-marker:focus-visible .cgs-ref-core, .cgs-ref .cgs-ref-marker.is-active .cgs-ref-core { fill: #fff; transform: scale(1.4); }
.cgs-ref .cgs-ref-marker:hover .cgs-ref-label, .cgs-ref .cgs-ref-marker.is-active .cgs-ref-label { fill: #fff; }
@keyframes cgs-ref-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cgs-ref .cgs-ref-pulse { animation: none; opacity: 0; } }
.cgs-ref .cgs-ref-hint { position: absolute; left: 28px; bottom: 18px; font-size: 12px; color: var(--cgs-muted); }

@media (min-width: 900px) {
	.cgs-ref .cgs-ref-mapbox { transition: padding-right .35s cubic-bezier(.2,.8,.2,1); }
	.cgs-ref .cgs-ref-board.has-drawer .cgs-ref-mapbox { padding-right: 420px; }
}

/* Drawer (desktop: slides in from the right inside the board) */
.cgs-ref .cgs-ref-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 100%); background: #fff; color: #111; transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; z-index: 5; visibility: hidden; }
.cgs-ref .cgs-ref-drawer.is-open { transform: none; visibility: visible; box-shadow: -30px 0 60px rgba(0,0,0,.4); }
.cgs-ref .cgs-ref-photo { position: relative; flex: none; aspect-ratio: 4 / 3; background: #ddd; overflow: hidden; }
.cgs-ref .cgs-ref-photo img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; max-width: none; }
.cgs-ref .cgs-ref-thumbs { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 20px 0; flex: none; }
.cgs-ref button.cgs-ref-thumb { width: 54px; height: 42px; padding: 0; margin: 0; border: 2px solid transparent; border-radius: 6px; background: #ddd center / cover no-repeat; cursor: pointer; box-shadow: none; min-height: 0; }
.cgs-ref button.cgs-ref-thumb.is-on, .cgs-ref button.cgs-ref-thumb:hover { border-color: var(--cgs-green); background-color: #ddd; }
.cgs-ref .cgs-ref-body { padding: 16px 24px 24px; overflow: auto; }
.cgs-ref .cgs-ref-code { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #fff; background: var(--cgs-green); padding: 3px 8px; border-radius: 5px; }
.cgs-ref .cgs-ref-title { margin: 10px 0 2px; font-size: 20px; line-height: 1.2; font-weight: 700; text-transform: uppercase; color: #111; }
.cgs-ref .cgs-ref-town { color: #777; font-size: 13px; }
.cgs-ref .cgs-ref-unit { margin-top: 10px; font-weight: 600; font-size: 14px; }
.cgs-ref ul.cgs-ref-items { margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; }
.cgs-ref ul.cgs-ref-items li { padding: 8px 0; margin: 0; border-top: 1px solid #eee; list-style: none; }
.cgs-ref button.cgs-ref-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 20px; line-height: 34px; text-align: center; cursor: pointer; box-shadow: none; }
.cgs-ref button.cgs-ref-close:hover { background: #000; color: #fff; }
.cgs-ref .cgs-ref-body > .cgs-ref-close { position: static; float: right; background: #eee; color: #111; }
.cgs-ref .cgs-ref-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 20px; }
.cgs-ref button.cgs-ref-step { background: transparent; color: #111; border: 1px solid #ddd; border-radius: 99px; padding: 6px 14px; margin: 0; font: inherit; font-size: 13px; line-height: 1.4; text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none; min-height: 0; }
.cgs-ref button.cgs-ref-step:hover { background: #f3f3f3; color: #111; border-color: #bbb; }

/* Tiles */
.cgs-ref h2.cgs-ref-h2 { margin: 72px 0 24px; padding: 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; color: var(--cgs-text); text-transform: none; letter-spacing: 0; }
.cgs-ref .cgs-ref-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.cgs-ref .cgs-ref-tile { position: relative; overflow: hidden; background: var(--cgs-panel); border: 1px solid var(--cgs-line); border-radius: 16px; padding: 18px 18px 16px; cursor: pointer; transition: border-color .2s, transform .2s; outline: none; }
.cgs-ref .cgs-ref-tile:hover, .cgs-ref .cgs-ref-tile:focus-visible { border-color: var(--cgs-green); transform: translateY(-2px); }
.cgs-ref .cgs-ref-big { position: absolute; right: 12px; top: 6px; font-size: 40px; font-weight: 700; color: #1f2427; line-height: 1.1; pointer-events: none; }
.cgs-ref .cgs-ref-n { position: relative; font-size: 11px; color: var(--cgs-green); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cgs-ref h3.cgs-ref-h { position: relative; margin: 6px 0 4px; padding: 0; font-size: 14px; line-height: 1.3; font-weight: 700; color: var(--cgs-text); text-transform: uppercase; letter-spacing: .02em; }
.cgs-ref p.cgs-ref-p { position: relative; margin: 0; padding: 0; font-size: 12px; color: var(--cgs-muted); }
.cgs-ref .cgs-ref-sub { margin: 48px 0 16px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--cgs-muted); }

/* CTA */
.cgs-ref .cgs-ref-cta { margin-top: 64px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 28px 32px; border: 1px solid var(--cgs-line); border-radius: 20px; background: var(--cgs-panel); }
.cgs-ref .cgs-ref-cta p { margin: 0; color: var(--cgs-muted); }
.cgs-ref .cgs-ref-cta strong { display: block; color: var(--cgs-text); font-size: 20px; }
.cgs-ref a.cgs-ref-btn-cta, .cgs-ref a.cgs-ref-btn-cta:visited { background: var(--cgs-green); color: #fff !important; padding: 14px 26px; border-radius: 99px; font-weight: 600; text-decoration: none !important; white-space: nowrap; }
.cgs-ref a.cgs-ref-btn-cta:hover { background: #4f8a1f; color: #fff !important; }

/* Touch sizes: the map scales down with the screen, so the marker group is scaled back up
   (its local origin is the marker centre, so it grows in place). Labels stay outside the group. */
.cgs-ref .cgs-ref-mk { transform-box: view-box; transform-origin: 0 0; }
@media (max-width: 1099px) { .cgs-ref .cgs-ref-mk { transform: scale(1.3); } }
@media (max-width: 899px) { .cgs-ref .cgs-ref-mk { transform: scale(1.6); } .cgs-ref .cgs-ref-label { font-size: 16px; } }
@media (max-width: 599px) { .cgs-ref .cgs-ref-mk { transform: scale(2.2); } }

/* Tablet portrait + phone: the side panel becomes a bottom sheet */
@media (max-width: 899px) {
	.cgs-ref .cgs-ref-drawer { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 85vh; border-radius: 16px 16px 0 0; overflow: hidden; transform: translateY(100%); z-index: 99999; }
	.cgs-ref .cgs-ref-drawer.is-open { transform: none; box-shadow: 0 -20px 60px rgba(0,0,0,.5); }
	.cgs-ref .cgs-ref-photo { aspect-ratio: 16 / 9; max-height: 45vh; }
	.cgs-ref .cgs-ref-body { overflow: auto; }
}
@media (min-width: 600px) and (max-width: 899px) {
	.cgs-ref .cgs-ref-big { font-size: 30px; }
	.cgs-ref .cgs-ref-drawer { left: 50%; width: min(560px, 100%); transform: translate(-50%, 100%); }
	.cgs-ref .cgs-ref-drawer.is-open { transform: translate(-50%, 0); }
}

/* Phone */
@media (max-width: 599px) {
	.cgs-ref { padding-top: 40px; }
	.cgs-ref .cgs-ref-mapbox { padding: 10px; }
	.cgs-ref .cgs-ref-hint { position: static; display: block; padding: 4px 6px 6px; }
	.cgs-ref .cgs-ref-label { display: none; }
	/* Two compact columns on phones; the canton code shrinks to a small corner badge. */
	.cgs-ref .cgs-ref-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
	.cgs-ref .cgs-ref-tile { padding: 12px 12px 12px; border-radius: 12px; }
	.cgs-ref .cgs-ref-big { font-size: 18px; top: 8px; right: 10px; }
	.cgs-ref .cgs-ref-n { font-size: 9.5px; letter-spacing: .06em; display: block; padding-right: 30px; }
	.cgs-ref h3.cgs-ref-h { font-size: 12px; margin: 4px 0 2px; hyphens: auto; overflow-wrap: anywhere; }
	.cgs-ref p.cgs-ref-p { font-size: 11px; line-height: 1.35; }
	.cgs-ref h2.cgs-ref-h2 { margin-top: 48px; }
	.cgs-ref .cgs-ref-cta { padding: 22px; }
}

/* Samsung Internet only keeps a page's own colours when it finds real dark styles under this media query
   (a colour-scheme meta tag alone is not enough there). The block is dark by design, so the values repeat. */
@media (prefers-color-scheme: dark) {
	.cgs-ref { color-scheme: dark; background: #0f1112; color: #ececec; }
	.cgs-ref .cgs-ref-board, .cgs-ref .cgs-ref-tile, .cgs-ref .cgs-ref-cta { background: #171a1c; border-color: #262a2d; }
	.cgs-ref .cgs-ref-canton { fill: #1d2124; stroke: #353b40; }
	.cgs-ref .cgs-ref-canton.is-served { fill: #22301a; }
	.cgs-ref .cgs-ref-canton.is-active { fill: #3b5a22; }
	.cgs-ref .cgs-ref-country { stroke: #8a9096; }
	.cgs-ref .cgs-ref-lake { fill: #0f1112; }
	.cgs-ref .cgs-ref-core { fill: #61a229; stroke: #0f1112; }
	.cgs-ref .cgs-ref-big { color: #1f2427; }
	.cgs-ref h2.cgs-ref-h1, .cgs-ref h2.cgs-ref-h2, .cgs-ref h3.cgs-ref-h { color: #ececec; }
	.cgs-ref .cgs-ref-drawer { background: #fff; color: #111; }
}