/* SG Standorte – Section „Hier gibt’s Saures“. Werte aus Figma „SG OWL Redesign“ (Node 38:2335). */
.sgst {
	--sg-bg: #faf4e4; --sg-fg: #2b2619; --sg-primary: #265c40; --sg-primary-fg: #faf4e4; --sg-primary-hover: #174b31; --sg-softer: #eae9d7; --sg-field: #fdfbf4;
	--sg-secondary: #f1e9d3; --sg-secondary-hover: #e9dec1; --sg-secondary-fg: #403a2a; --sg-muted-fg: #6b634c;
	--sg-input: #898065; --sg-border: #e6dcc2; --sg-radius: 8px; --sg-radius-md: 6px;
	--sg-font: "EB Garamond", Garamond, "Times New Roman", serif;
	box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 0 16px;
	display: flex; flex-direction: column; gap: 32px;
	font-family: var(--sg-font); color: var(--sg-fg); font-size: 17px; line-height: 24px;
	font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased;
}
.sgst *, .sgst *::before, .sgst *::after { box-sizing: border-box; }
.sgst [hidden] { display: none !important; }
.sgst p { margin: 0; padding: 0; }
.sgst ul { margin: 0; padding: 0; list-style: none; }
.sgst li { margin: 0; padding: 0; list-style: none; }
.sgst li::before { content: none; }
.sgst a { color: var(--sg-primary); }
.sgst :focus-visible { outline: 2px solid var(--sg-primary); outline-offset: 2px; }

.sgst .sgst-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sgst .sgst-card-h { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; font: inherit; letter-spacing: 0; text-transform: none; }

/* Kopf */
.sgst-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.sgst .sgst-title { margin: 0; padding: 0; font-family: var(--sg-font); font-style: italic; font-weight: 700; font-size: 28px; line-height: 34px; letter-spacing: 0; text-transform: none; color: var(--sg-fg); text-wrap: balance; }
.sgst .sgst-lead { max-width: 590px; color: var(--sg-muted-fg); font-weight: 500; font-size: 17px; line-height: 24px; text-wrap: pretty; }
.sgst .sgst-lead a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sgst-search { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; max-width: 830px; margin: 0; text-align: left; }
.sgst .sgst-label { font-weight: 500; font-size: 17px; line-height: 24px; color: var(--sg-fg); margin: 0; padding: 0; white-space: nowrap; }
.sgst-field { display: flex; flex-wrap: wrap; gap: 8px; }
.sgst .sgst-input {
	flex: 1 1 100%; min-width: 0; height: 44px; margin: 0; padding: 8px 12px;
	background: var(--sg-field); border: 1px solid var(--sg-input); border-radius: var(--sg-radius-md); box-shadow: none;
	font-family: var(--sg-font); font-size: 17px; line-height: 24px; color: var(--sg-fg); letter-spacing: 0;
}
.sgst .sgst-input::placeholder { color: var(--sg-muted-fg); opacity: 1; }
.sgst .sgst-input:focus { outline: 2px solid var(--sg-primary); outline-offset: 1px; border-color: var(--sg-primary); box-shadow: none; }
.sgst .sgst-input[aria-invalid="true"] { border-color: #c4000a; }

/* Buttons */
.sgst .sgst-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	height: 44px; min-width: 0; margin: 0; padding: 0 24px; border: 0; border-radius: var(--sg-radius-md);
	font-family: var(--sg-font); font-weight: 500; font-size: 17px; line-height: 24px; letter-spacing: 0; text-transform: none;
	white-space: nowrap; cursor: pointer; box-shadow: none; text-decoration: none; transition: background-color .15s;
}
.sgst .sgst-btn--primary { background: var(--sg-primary); color: var(--sg-primary-fg); }
.sgst .sgst-btn--primary:hover { background: var(--sg-primary-hover); color: var(--sg-primary-fg); }
.sgst .sgst-btn--secondary { background: var(--sg-secondary); color: var(--sg-secondary-fg); }
.sgst .sgst-btn--secondary:hover { background: var(--sg-secondary-hover); }
.sgst .sgst-btn[aria-busy="true"] { cursor: progress; opacity: .7; }
.sgst-field .sgst-btn { flex: 1 1 auto; }

/* Icons (Mynaui, per Maske gefärbt) */
.sgst-ico { display: inline-block; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.sgst-btn .sgst-ico { width: 24px; height: 24px; }
.sgst-ico--lg { width: 42px; height: 42px; color: var(--sg-primary); }

/* Status unter der Suche */
.sgst .sgst-status { min-height: 0; font-size: 16px; line-height: 22px; color: var(--sg-muted-fg); max-width: 830px; }
.sgst .sgst-status:empty { display: none; }
.sgst .sgst-status.is-error { color: #c4000a; }
.sgst-status button { all: unset; cursor: pointer; color: var(--sg-primary); text-decoration: underline; text-underline-offset: 3px; }
.sgst-status button:focus-visible { outline: 2px solid var(--sg-primary); outline-offset: 2px; }

/* Ergebnisse */
.sgst-body { display: flex; flex-direction: column; gap: 8px; }
.sgst-results { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sgst-rail { display: flex; align-items: center; gap: 16px; width: 100%; }
.sgst .sgst-nav {
	display: none; flex: none; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: var(--sg-radius-md);
	background: var(--sg-secondary); color: var(--sg-fg); cursor: pointer; align-items: center; justify-content: center; box-shadow: none;
}
.sgst .sgst-nav:hover { background: var(--sg-secondary-hover); }
.sgst .sgst-nav:disabled { opacity: .4; cursor: default; }
.sgst-list { display: grid; grid-template-columns: 1fr; gap: 12px; width: 100%; }
.sgst-list > li { display: flex; min-width: 0; }

/* Karte (Card) */
.sgst-card {
	position: relative; display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 168px; padding: 16px;
	background: var(--sg-bg); border: 1px solid var(--sg-border); border-radius: var(--sg-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05); transition: border-color .15s;
}
.sgst-card:hover { border-color: var(--sg-input); }
.sgst-card.is-active { border-color: var(--sg-primary); }
.sgst-card-top { display: flex; align-items: flex-start; gap: 4px; }
.sgst-card-top .sgst-dist { margin-top: 2px; }
.sgst .sgst-card-name {
	all: unset; flex: 1 1 auto; min-width: 0; font-family: var(--sg-font); font-weight: 700; font-size: 17px; line-height: 24px; color: var(--sg-fg); cursor: pointer; overflow-wrap: anywhere;
}
.sgst .sgst-card-name::after { content: ""; position: absolute; inset: 0; border-radius: var(--sg-radius); }
.sgst .sgst-card-name:focus-visible { outline: none; }
.sgst .sgst-card-name:focus-visible::after { outline: 2px solid var(--sg-primary); outline-offset: 2px; }
.sgst-dist {
	flex: none; padding: 2px 8px; border-radius: var(--sg-radius-md); background: var(--sg-secondary); color: var(--sg-secondary-fg);
	font-weight: 600; font-size: 14px; line-height: 20px; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums;
}
.sgst-addr { color: var(--sg-muted-fg); font-size: 17px; line-height: 24px; }
.sgst-acts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; }
.sgst .sgst-act {
	display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 8px;
	border: 1px solid var(--sg-primary); border-radius: var(--sg-radius-md); background: transparent; color: var(--sg-primary);
	font-weight: 600; font-size: 14px; line-height: 20px; text-decoration: none; white-space: nowrap; transition: background-color .15s;
}
.sgst .sgst-act:hover { background: var(--sg-softer); color: var(--sg-primary); }
.sgst .sgst-act .sgst-ico { width: 15px; height: 15px; }

.sgst .sgst-more {
	display: inline-flex; align-items: center; gap: 6px; height: 40px; margin: 4px 0 0; padding: 0 8px; border: 0; border-radius: var(--sg-radius-md);
	background: transparent; color: var(--sg-primary); font-family: var(--sg-font); font-weight: 500; font-size: 17px; line-height: 24px; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0;
}
.sgst .sgst-more:hover { background: var(--sg-softer); }
.sgst .sgst-more[aria-expanded="true"] .sgst-ico { transform: rotate(180deg); }

/* Karte: auf dem Handy ausgeblendet (Entscheidung Georg 06.10.) */
.sgst-map { display: none; position: relative; height: 480px; border-radius: var(--sg-radius); overflow: hidden; background: var(--sg-secondary); }
.sgst-map-gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center;
	background-color: var(--sg-secondary);
	background-image: repeating-linear-gradient(35deg, transparent 0 9px, rgba(137, 128, 101, .12) 9px 10px);
}
.sgst .sgst-gate-t { font-weight: 700; font-size: 21px; line-height: 28px; }
.sgst .sgst-gate-d { max-width: 440px; font-size: 16px; line-height: 22px; color: var(--sg-muted-fg); }
.sgst-remember { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 22px; color: var(--sg-muted-fg); cursor: pointer; }
.sgst-remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--sg-primary); }
.sgst-map-canvas { position: absolute; inset: 0; z-index: 0; font-family: var(--sg-font); }
/* Kartenton wie gedruckte Landkarte: Acker ocker, Straßen hell, Wald salbeigrün (SVG-Filter #sgst-tint, Werte per Ausgleichsrechnung aus OSM-Farben) */
.sgst-map-canvas .leaflet-tile-pane { filter: url(#sgst-tint); }
.sgst .sgst-map-canvas img.leaflet-tile { max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; width: 256px !important; height: 256px !important; }
.sgst-map-canvas.leaflet-container { background: #dccc9e; font-family: var(--sg-font); }
.sgst-map-canvas .leaflet-control-attribution { font-family: system-ui, sans-serif; font-size: 11px; background: rgba(250, 244, 228, .85); }
.sgst-map-canvas .leaflet-control-attribution a { color: var(--sg-primary); }
.sgst-map-canvas .leaflet-bar a { color: var(--sg-fg); background: var(--sg-bg); border-color: var(--sg-border); }
/* Kartenpunkte: handgezeichnet, aktiver Laden lässt eine Pflanze wachsen (Stil wie die Lieferleiste) */
.sgst-map-canvas .sgst-pin-wrap { pointer-events: none !important; background: none; border: 0; }
.sgst-art { display: block; overflow: visible; }
.sgst-hit { fill: transparent; pointer-events: all; cursor: pointer; }
.sgst-blob { fill: var(--sg-primary); stroke: var(--sg-bg); stroke-width: 2; pointer-events: all; cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform .15s, fill .15s; }
.sgst-pin-wrap:hover .sgst-blob, .sgst-pin-wrap:focus-visible .sgst-blob { transform: scale(1.18); }
.sgst-pin-wrap:focus-visible { outline: none; }
.sgst-pin-wrap:focus-visible .sgst-blob { stroke: var(--sg-primary-hover); stroke-width: 2.5; }
.sgst-pin-wrap.is-active .sgst-blob { fill: var(--sg-primary-hover); }
.sgst-plant { visibility: hidden; transform-box: view-box; transform-origin: 22px 52px; transform: scale(1.3); }
.sgst-pin-wrap.is-active .sgst-plant { visibility: visible; }
.sgst-st { fill: none; stroke: var(--sg-primary-hover); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sgst-lf-o { fill: var(--sg-field); stroke: var(--sg-primary-hover); stroke-width: 1.05; stroke-linejoin: round; }
.sgst-lf-h { fill: none; stroke: var(--sg-primary); stroke-width: .5; stroke-linecap: round; }
.sgst-lf-r { fill: none; stroke: var(--sg-primary-hover); stroke-width: .6; stroke-linecap: round; }
.sgst-pin-wrap.is-active .sgst-st { stroke-dasharray: 1; animation: sgst-draw .45s ease-out both; animation-delay: var(--d); }
.sgst-pin-wrap.is-active .sgst-lf { transform-box: view-box; animation: sgst-sprout .4s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: var(--d); }
@keyframes sgst-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sgst-sprout { from { transform: scale(0) rotate(-12deg); } to { transform: none; } }
.sgst-home { display: block; overflow: visible; filter: drop-shadow(0 1px 1px rgba(43, 38, 25, .2)); }
.sgst-h-o, .sgst-h-r, .sgst-h-d { fill: var(--sg-field); stroke: var(--sg-fg); stroke-width: 1.1; stroke-linejoin: round; }
.sgst-h-h { fill: none; stroke: var(--sg-fg); stroke-width: .5; }
.sgst-h-g { fill: none; stroke: var(--sg-fg); stroke-width: .9; stroke-linecap: round; }
.sgst-map-canvas .leaflet-tooltip { font-family: var(--sg-font); font-size: 15px; line-height: 20px; color: var(--sg-fg); background: var(--sg-bg); border: 0; border-radius: var(--sg-radius-md); box-shadow: none; padding: 4px 9px; filter: drop-shadow(0 0 .6px rgba(43, 38, 25, .55)) drop-shadow(0 2px 3px rgba(43, 38, 25, .14)); }
.sgst-map-canvas .leaflet-tooltip-top::before { border-top-color: var(--sg-bg); }
.sgst-map-canvas .leaflet-tooltip-bottom::before { border-bottom-color: var(--sg-bg); }
.sgst-map-canvas .leaflet-tooltip-left::before { border-left-color: var(--sg-bg); }
.sgst-map-canvas .leaflet-tooltip-right::before { border-right-color: var(--sg-bg); }

/* Ranke von der Pflanze bis zur Card (nur Desktop mit Karte) */
.sgst-body { position: relative; }
.sgst-map { isolation: isolate; }
.sgst-vine { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; transition: opacity .25s; }
.sgst-vine.is-off { opacity: 0; }
.sgst-vine-stem, .sgst-vine-curl, .sgst-vine-hook { fill: none; stroke: var(--sg-primary); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sgst-vine-curl { stroke-width: 1.1; }
.sgst-vine-hook { stroke-width: 1.4; }
.sgst-vine-lf { fill: var(--sg-field); stroke: var(--sg-primary-hover); stroke-width: 1; stroke-linejoin: round; }
.sgst-vine-rib { fill: none; stroke: var(--sg-primary-hover); stroke-width: .6; stroke-linecap: round; }
.sgst-vine-leaf { transform-box: view-box; }
.sgst-vine.is-grow .sgst-vine-stem { stroke-dasharray: 1; animation: sgst-draw .7s ease-in-out .35s both; }
.sgst-vine.is-grow .sgst-vine-curl { stroke-dasharray: 1; animation: sgst-draw .35s ease-out 1s both; }
.sgst-vine.is-grow .sgst-vine-hook { stroke-dasharray: 1; animation: sgst-draw .25s ease-out 1.05s both; }
.sgst-vine.is-grow .sgst-vine-leaf { animation: sgst-sprout .35s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: var(--d); }
@media (prefers-reduced-motion: reduce) { .sgst-vine.is-grow * { animation: none !important; } }
@media (max-width: 767px) { .sgst-vine { display: none; } }

/* Händlerlogos (Originalfarben) */
.sgst-logos { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sgst .sgst-logos-t { font-size: 15px; line-height: 20px; color: var(--sg-muted-fg); }
.sgst-logos ul { display: flex; align-items: center; justify-content: center; gap: 32px; }
.sgst .sgst-logos ul li { display: block; margin: 0; padding: 0; line-height: 0; }
.sgst .sgst-logos img.sgst-logo { display: block !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; opacity: 1 !important; }
.sgst .sgst-logos img.sgst-logo--rewe { width: 82px !important; height: 22px !important; }
.sgst .sgst-logos img.sgst-logo--edeka { width: 33px !important; height: 40px !important; }
.sgst .sgst-card .sgst-note { font-size: 15px; line-height: 20px; color: var(--sg-muted-fg); font-style: italic; margin: 2px 0 0; }

@media (prefers-reduced-motion: reduce) { .sgst * { transition: none !important; } .sgst-map-canvas .sgst-pin-wrap.is-active .sgst-st, .sgst-map-canvas .sgst-pin-wrap.is-active .sgst-lf { animation: none !important; } }

/* Ab Tablet: Suche in einer Zeile, Karussell, Karte */
@media (min-width: 768px) {
	.sgst { gap: 48px; }
	.sgst .sgst-title { font-size: 38px; line-height: 44px; }
	.sgst-search { flex-direction: row; align-items: center; gap: 24px; }
	.sgst-field { flex: 1 1 auto; flex-wrap: nowrap; }
	.sgst .sgst-input { flex: 1 1 auto; height: 40px; }
	.sgst .sgst-btn { height: 40px; }
	.sgst-field .sgst-btn { flex: none; }
	.sgst-results { gap: 4px; }
	.sgst-map { display: block; }
	.sgst .sgst-nav { display: inline-flex; }
	.sgst-list {
		display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
		scrollbar-width: none; padding: 2px; margin: -2px; overscroll-behavior-x: contain;
	}
	.sgst-list::-webkit-scrollbar { display: none; }
	.sgst-list > li { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; }
	.sgst.is-expanded .sgst-nav { display: none; }
	.sgst.is-expanded .sgst-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
}
@media (min-width: 1000px) {
	.sgst-list > li { flex-basis: calc((100% - 48px) / 4); }
	.sgst.is-expanded .sgst-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sgst-map { height: 608px; }
}
@media (min-width: 768px) and (max-width: 999px) { .sgst-search { flex-wrap: wrap; } }
@media (max-width: 767px) { .sgst-card { min-height: 0; } .sgst-acts { margin-top: 0; } .sgst-list > li.is-overflow { display: none; } .sgst.is-expanded .sgst-list > li.is-overflow { display: flex; } }

/* Gegen Theme-Regeln (Salient, SG-Typo-Vorschau) absichern – live geprüft 06.10. */
.sgst .sgst-head .sgst-title { font-weight: 700; line-height: 34px; font-style: italic; }
.sgst .sgst-card .sgst-card-h, .sgst .sgst-card .sgst-card-name { font-style: normal; font-weight: 700; font-size: 17px; line-height: 24px; color: var(--sg-fg); }
.sgst .sgst-card .sgst-addr { font-size: 17px; line-height: 24px; color: var(--sg-muted-fg); }
.sgst .sgst-map .sgst-gate-d, .sgst .sgst-logos .sgst-logos-t { color: var(--sg-muted-fg); }
.sgst .sgst-map .sgst-gate-t { color: var(--sg-fg); }
.sgst .sgst-head .sgst-lead, .sgst .sgst-head .sgst-status { margin: 0; }
.sgst .sgst-search .sgst-input { height: 44px !important; padding: 8px 12px !important; font-size: 17px !important; line-height: 24px !important; }
.sgst .sgst-search button.sgst-btn, .sgst .sgst-map button.sgst-btn {
	height: 44px !important; padding: 0 24px !important; font-size: 17px !important; line-height: 24px !important; font-weight: 500 !important;
	letter-spacing: 0 !important; text-transform: none !important; border-radius: var(--sg-radius-md) !important; margin: 0 !important; min-height: 0 !important; box-shadow: none !important;
}
.sgst .sgst-search button.sgst-btn--primary, .sgst .sgst-map button.sgst-btn--primary { background: var(--sg-primary) !important; color: var(--sg-primary-fg) !important; }
.sgst .sgst-search button.sgst-btn--primary:hover, .sgst .sgst-map button.sgst-btn--primary:hover { background: var(--sg-primary-hover) !important; }
.sgst .sgst-search button.sgst-btn--secondary { background: var(--sg-secondary) !important; color: var(--sg-secondary-fg) !important; }
.sgst .sgst-search button.sgst-btn--secondary:hover { background: var(--sg-secondary-hover) !important; }
@media (min-width: 768px) {
	.sgst .sgst-head .sgst-title { line-height: 44px; }
	.sgst .sgst-search .sgst-input, .sgst .sgst-search button.sgst-btn { height: 40px !important; }
}