/* ================================================================
   Seegfui — SEO-Landingpages / See-Hubs  (SEE-360)
   Ergänzt das sg-* Designsystem aus style.css. Nutzt dieselben Tokens.
   ================================================================ */

/* Brotkrümel-Navigation */
.sg-breadcrumb {
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  letter-spacing: .02em;
  margin-bottom: 22px;
}
.sg-breadcrumb a { color: var(--c-ink-soft); text-decoration: none; }
.sg-breadcrumb a:hover { color: var(--c-accent); }
.sg-breadcrumb span { margin: 0 8px; }

/* Hero-/Intro-Band der Landingpage */
.sg-landing-hero {
  background: var(--c-stage);
  border-bottom: 1px solid var(--c-line);
}
.sg-landing-hero .sg-wrap { max-width: 880px; }

/* ---------- CI-Hero für die FAQ-Seite („Häufig gefragt") — SEE-1451 ----------
   Ersetzt den flachen Creme-Block durch eine ruhige See-Blau-CI-Anmutung:
   weicher Verlauf (Accent-Wash → Weiß), See-Blau-Trennkante oben und ein
   Line-Icon-Badge. Modern, clean, markig — ohne Regression am Accordion/Copy. */
.sg-landing-hero--ci {
  background: linear-gradient(168deg, var(--c-accent-wash) 0%, #FFFFFF 68%);
  border-top: 3px solid var(--c-accent);
  border-bottom: 1px solid var(--c-line);
}
.sg-landing-hero--ci .sg-eyebrow { color: var(--c-accent); }
.sg-landing-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: 2px 0 20px;
  color: var(--c-accent);
  background: #FFFFFF;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(47, 111, 158, .13);
}
.sg-landing-h1 {
  font-size: var(--fs-hero);
  line-height: 1.05;
  margin: 8px 0 0;
  color: var(--c-ink);
}
.sg-landing-coords {
  font-family: var(--font-script);
  font-size: 1.35rem;
  color: var(--c-accent);
  margin: 12px 0 0;
}
.sg-landing-intro {
  margin-top: 26px;
  max-width: var(--measure);
}
.sg-landing-intro p {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--c-ink);
  margin: 0 0 18px;
}
.sg-landing-intro p:last-child { margin-bottom: 0; }
.sg-landing-intro strong { font-weight: 600; }

/* Roadmap-See: „in Vorbereitung"-Block */
.sg-landing-soon { max-width: 720px; text-align: center; }
.sg-landing-soon p {
  font-size: var(--fs-lead);
  color: var(--c-ink-soft);
  margin: 0 auto;
  max-width: 56ch;
}

/* Newsletter-Capture (Roadmap-Seen, SEE-367) */
.sg-nl-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 480px;
  margin: 28px auto 0;
}
.sg-nl-form input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  padding: 14px 18px;
  font-size: var(--fs-body);
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.sg-nl-form input[type="email"]:focus {
  outline: none;
  border-color: var(--c-accent);
}
.sg-nl-form .sg-btn { flex: 0 0 auto; }
.sg-nl-hint {
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  margin: 14px auto 0;
  max-width: 48ch;
}
.sg-btn-ghost {
  background: transparent;
  color: var(--c-accent);
  box-shadow: inset 0 0 0 1px var(--c-accent);
}
.sg-btn-ghost:hover { background: var(--c-accent); color: #fff; }

/* Reine Text-Kacheln für interne Verlinkung (ohne Bild) */
.sg-tiles-links { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sg-tile-link {
  aspect-ratio: auto;
  min-height: 150px;
  display: flex;
  align-items: flex-end;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color .2s ease, transform .2s ease;
}
.sg-tile-link::after { content: none; }
.sg-tile-link:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.sg-tile-link .sg-tile-label { position: static; padding: 24px; color: var(--c-ink); }
.sg-tile-link .sg-tile-label .e { color: var(--c-accent); }
.sg-tile-link .sg-tile-label h3 { color: var(--c-ink); margin-top: 4px; }

/* SEE-1472: Foto-Kacheln der Über-uns-Story-Seite (.sg-tiles-links--photo) werden
   bewusst INLINE im MU-Plugin (sg_landing_related_links) gestylt statt hier — der
   Theme-CSS-File wird von un-gemergten Geschwister-Deploys revertet (LIVE≠main,
   SEE-1446); die MU-Plugin-Ausgabe ist deploy-durabel. */

/* ================================================================
   Story-/Über-uns-Seite mit See-Heroes (SEE-1449 / Board SEE-1445)
   Foto-Hero + Sektions-Bänder + Werte-Line-Icons + Bild-Credits.
   Tokens aus style.css (--c-accent #2F6F9E, --c-stage, --font-script …).
   ================================================================ */

/* ① Foto-Hero (Ammersee) */
.sg-story-hero {
  position: relative;
  min-height: 410px; /* SEE-1482: dezent reduziert (460→410), Text bleibt mittig via align-items:center */
  display: flex;
  align-items: center; /* SEE-1467: Textblock vertikal mittig statt unten */
  overflow: hidden;
  background: var(--c-accent);
  /* SEE-1473: Freistellung (Knockout) für den weißen Hero-Text — hebt
     „Unsere Geschichte" + H1 + Script auch auf den hellsten Bildstellen klar ab.
     SEE-1514: Board wollte den Knockout GENAUSO wie auf der Kontakt-Seite
     (SEE-1513). Die harte 4-Wege-1px-Kontur war zu kräftig → jetzt WEICH:
     gelayerte, halbtransparente text-shadows in CI See-Blau (#2F6F9E =
     rgb 47,111,158) mit steigendem Blur-Radius statt scharfer 1px-Outline —
     identische Freistellung wie .sg-kontakt-hero__ko (contact-form MU v1.3.2). */
  --sg-ko-ring:
    0 0 2px rgba(47,111,158,.55),
    0 0 6px rgba(47,111,158,.50),
    0 1px 12px rgba(47,111,158,.42),
    0 2px 20px rgba(23,52,80,.38);
}
.sg-story-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* See-Blau-Verlauf für WCAG-Kontrast der weißen Schrift (Design-Brief §4) */
.sg-story-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,40,56,.20) 0%, rgba(28,40,56,.15) 45%, rgba(36,90,128,.78) 100%);
}
.sg-story-hero__inner {
  position: relative;
  width: 100%;
  padding: clamp(34px, 6vw, 64px) 0; /* SEE-1467: symmetrisch, damit align-items:center greift */
}
/* SEE-1467: Textblock horizontal + vertikal mittig im Hero-Bild */
.sg-story-hero .sg-wrap { text-align: center; }
.sg-breadcrumb--onphoto,
.sg-breadcrumb--onphoto a { color: rgba(255,255,255,.82); }
.sg-breadcrumb--onphoto a:hover { color: #fff; }
.sg-eyebrow--onphoto { color: #fff; opacity: .92; }
/* SEE-1473/SEE-1514: weicher Knockout (wie Kontakt) auf den Hero-Textblock ab „Unsere Geschichte" */
.sg-story-hero .sg-eyebrow--onphoto { text-shadow: var(--sg-ko-ring); }
.sg-story-hero__h1 {
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: #fff;
  margin: 6px auto 0; /* SEE-1467: Block bei max-width:20ch zentrieren */
  max-width: 20ch;
  /* SEE-1514: weicher See-Blau-Knockout (identisch zur Kontakt-Seite) */
  text-shadow: var(--sg-ko-ring);
}
.sg-story-hero__script {
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  color: #fff;
  opacity: .95;
  margin: 14px 0 0;
  /* SEE-1514: weicher See-Blau-Knockout (identisch zur Kontakt-Seite) */
  text-shadow: var(--sg-ko-ring);
}

/* ② Markengeschichte (warme Sand-/Stage-Fläche) */
.sg-story-text { background: var(--c-stage); }
.sg-story-text .sg-landing-intro { max-width: var(--measure); margin-top: 0; }

/* ③/⑤ Sektions-Bänder (Foto mit Overlay + zentriertem Inhalt) */
.sg-story-band {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--c-accent);
  text-align: center;
}
.sg-story-band--tall { min-height: 420px; }
.sg-story-band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sg-story-band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,40,56,.28), rgba(36,90,128,.55));
}
.sg-story-band__inner {
  position: relative;
  max-width: var(--container);
  padding: 48px var(--pad-x);
}
.sg-story-band__quote {
  font-family: var(--font-script);
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.15;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 20px rgba(20,30,44,.4);
}

/* ⑤ Kollektions-Ausblick auf dem Starnberger-Band */
.sg-story-outlook__h2 {
  color: #fff;
  margin: 8px 0 0;
  text-shadow: 0 1px 18px rgba(20,30,44,.4);
}
.sg-story-outlook__lead {
  color: rgba(255,255,255,.94);
  font-size: var(--fs-lead);
  line-height: 1.6;
  max-width: 52ch;
  margin: 16px auto 0;
  text-shadow: 0 1px 14px rgba(20,30,44,.35);
}
.sg-story-outlook__cta { margin: 26px 0 0; }
.sg-story-outlook .sg-btn { background: #fff; color: var(--c-accent); }
.sg-story-outlook .sg-btn:hover { background: var(--c-stage); color: var(--c-accent-hover); }

/* ④ Werte — Line-Icon-Trio */
.sg-section-head--center { max-width: none; text-align: center; margin-left: auto; margin-right: auto; }
.sg-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}
.sg-value {
  text-align: center;
  padding: 8px;
}
.sg-value__icon {
  width: 44px;
  height: 44px;
  display: block;
  margin: 0 auto 14px;
}
.sg-value__title { font-size: var(--fs-h3); margin: 0 0 8px; color: var(--c-ink); }
.sg-value__text {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink-soft);
  max-width: 34ch;
  margin: 0 auto;
}

/* Bild-Credits zentral auf /bildnachweise/ (SEE-1542) — keine Seiten-Credits mehr. */

/* Mobil: Hero-/Band-Höhen reduzieren (Design-Brief §4) */
@media (max-width: 600px) {
  .sg-story-hero { min-height: 300px; } /* SEE-1482: dezent reduziert (340→300) */
  .sg-story-band { min-height: 240px; }
  .sg-story-band--tall { min-height: 320px; }
  .sg-story-band__inner { padding: 36px var(--pad-x); }
}

/* ================================================================
   FAQ-Foto-Hero — 1:1 gespiegelt vom Kontakt-Header (SEE-1479)
   Board-Wunsch: „gestalte den FAQ Header genauso wie bei Kontakt, aber
   nehme ein anderes Header Bild." Werte identisch zu .sg-kontakt-hero
   (seegfui-contact-form.php, SEE-1480/SEE-1487/SEE-1513): weicher See-Blau-
   Knockout (gelayerte text-shadows, KEINE harte 1px-Kontur), Höhe 288/200,
   mittiger Titel + Script + dezenter Bildnachweis. Bild: Ammersee (≠ Kontakt).
   ================================================================ */
.sg-faq-hero {
  position: relative;
  min-height: 236px; /* SEE-1530: schmaler (288→236) */
  margin: 0 0 20px; /* SEE-1530: Abstand zum ersten Text reduziert (40→20) */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--c-accent, #2f6f9e);
}
.sg-faq-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.sg-faq-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,40,56,.22) 0%, rgba(28,40,56,.16) 45%, rgba(36,90,128,.80) 100%);
}
.sg-faq-hero__inner {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) 20px;
  text-align: center;
}
.sg-faq-hero__eyebrow {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  opacity: .92;
}
.sg-faq-hero__h1 {
  font-size: var(--fs-hero, clamp(2.5rem, 6vw, 4rem));
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: #fff;
  margin: 6px auto 0;
}
/* Weicher See-Blau-Knockout (SEE-1513): solide weiß gefüllt, gelayerte halb-
   transparente text-shadows mit steigendem Blur-Radius → smoothe Kante. */
.sg-faq-hero__ko {
  display: inline-block;
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow:
    0 0 2px rgba(47,111,158,.55),
    0 0 6px rgba(47,111,158,.50),
    0 1px 12px rgba(47,111,158,.42),
    0 2px 20px rgba(23,52,80,.38);
}
.sg-faq-hero__script {
  font-family: var(--font-script, "Caveat", "Segoe Script", cursive);
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  color: #fff;
  opacity: .95;
  margin: 12px auto 0;
  text-shadow: 0 1px 16px rgba(20,30,44,.4);
}
/* SEE-1542: .sg-faq-hero__credit entfernt — Bildnachweis zentral auf /bildnachweise/. */
/* SEE-1530: Abstände auf der FAQ-Seite verkleinert. Beide betroffenen Sektionen
   (Intro-Lead + FAQ-Accordion) sind generische .sg-section mit großem Vertikal-
   Padding (clamp(64,9vw,128) oben+unten); via gekettete Adjacent-Sibling nur auf
   der FAQ-Seite reduziert (Hero → Intro → Accordion), andere Seiten unberührt. */
/* Hero → erster Text (Intro): Top des Intro-Blocks kleiner. */
.sg-faq-hero + .sg-section { padding-top: clamp(24px, 3.2vw, 44px); }
/* Intro-Text → erste Frage (Board-Wunsch): Unterkante Intro + Oberkante des
   FAQ-Accordions zusammenziehen. */
.sg-faq-hero + .sg-section { padding-bottom: clamp(12px, 2vw, 28px); }
.sg-faq-hero + .sg-section + .sg-section { padding-top: clamp(8px, 1.6vw, 20px); }
@media (max-width: 680px) {
  .sg-faq-hero { min-height: 176px; margin-bottom: 16px; } /* SEE-1530: schmaler + enger */
  .sg-faq-hero + .sg-section { padding-top: 22px; padding-bottom: 14px; }
  .sg-faq-hero + .sg-section + .sg-section { padding-top: 10px; }
}

/* ---------- FAQ-Accordion (SEE-1394) ---------- */
.sg-faq { max-width: 820px; margin-left: auto; margin-right: auto; }
.sg-faq details {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg);
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sg-faq details:hover { border-color: var(--c-accent); }
.sg-faq details[open] {
  border-color: var(--c-accent);
  box-shadow: 0 6px 20px rgba(47, 111, 158, .10);
}
.sg-faq details[open] summary { background: var(--c-accent-wash); }
.sg-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 52px 18px 22px;
  position: relative;
  font-weight: 600;
  color: var(--c-ink);
  font-size: 1.05rem;
}
.sg-faq summary::-webkit-details-marker { display: none; }
.sg-faq summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--c-accent);
  transition: transform .2s ease;
}
.sg-faq details[open] summary::after { content: "\2013"; }
.sg-faq summary:hover { color: var(--c-accent); }
.sg-faq .sg-faq-body { padding: 0 22px 20px; color: var(--c-ink); }
.sg-faq .sg-faq-body p { margin: 0 0 10px; max-width: none; }
.sg-faq .sg-faq-body p:last-child { margin-bottom: 0; }

/* ================================================================
   Orte-Hoodie-Hub  (SEE-1299) — Beispiel-Mockup-Hero + See/Ort-Picker
   ================================================================ */

/* Hero: Foto-Hero (Ammersee) mit weichem See-Blau-Knockout + schwebende
   Beispiel-Produktkarte.
   SEE-1552: Board lehnte die flache Creme-Fläche (--c-stage) + den umgebrochenen
   Breadcrumb ab → an das moderne Marken-Foto-Hero-Muster angeglichen (vgl.
   .sg-story-hero SEE-1449/1514, .sg-kontakt-hero SEE-1466/1513, .sg-faq-hero
   SEE-1479): Foto + See-Blau-Scrim + weiße Knockout-Copy, Breadcrumb entfernt
   (konsistent SEE-1467 / SEE-1476). Das Beispiel-Produkt bleibt als schwebende
   weiße Karte erhalten — es ist die Kernaufgabe der Hub-Seite. */
.sg-orte-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--c-accent);
  padding: clamp(48px, 7vw, 88px) 0;
  /* Weicher See-Blau-Knockout (identisch zu Kontakt/Story) für weiße Copy auf Foto */
  --sg-ko-ring:
    0 0 2px rgba(47,111,158,.55),
    0 0 6px rgba(47,111,158,.50),
    0 1px 12px rgba(47,111,158,.42),
    0 2px 20px rgba(23,52,80,.38);
}
.sg-orte-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.sg-orte-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,40,56,.30) 0%, rgba(28,40,56,.28) 45%, rgba(36,90,128,.80) 100%);
}
.sg-orte-hero__inner { position: relative; width: 100%; }
.sg-orte-hero .sg-wrap { max-width: 1100px; }
.sg-orte-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.sg-orte-hero-copy .sg-eyebrow--onphoto {
  color: #fff; opacity: .92; text-shadow: var(--sg-ko-ring);
}
.sg-orte-hero__h1 {
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: #fff;
  margin: 8px 0 0;
  text-shadow: var(--sg-ko-ring);
}
.sg-orte-hero__script {
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  color: #fff;
  opacity: .95;
  margin: 14px 0 0;
  text-shadow: var(--sg-ko-ring);
}
.sg-orte-hero-cta { margin-top: 28px; }
/* CTA auf Foto: weißer Button mit See-Blau-Text (Muster .sg-story-outlook) */
.sg-btn--onphoto { background: #fff; color: var(--c-accent); }
.sg-btn--onphoto:hover { background: var(--c-stage); color: var(--c-accent-hover); }

/* Beispiel-Produktkarte: schwebende weiße Karte hebt das Produkt klar vom Foto ab */
.sg-orte-hero-media { text-align: center; }
.sg-orte-hero-card {
  display: block;
  background: var(--c-bg);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(15,38,58,.55), 0 4px 12px -6px rgba(15,38,58,.30);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sg-orte-hero-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 52px -20px rgba(15,38,58,.60), 0 6px 14px -6px rgba(15,38,58,.34);
}
.sg-orte-hero-card img { display: block; width: 100%; height: auto; }
.sg-orte-hero-cap {
  display: block;
  margin-top: 14px;
  font-size: var(--fs-small);
  color: rgba(255,255,255,.90);
  text-shadow: 0 1px 10px rgba(20,30,44,.5);
}

/* Intro-Band unter dem Foto-Hero — ruhige, lesbare Prosa auf hellem Grund
   (aus dem Foto-Hero herausgelöst, damit langer Fließtext lesbar bleibt). */
.sg-orte-intro { background: var(--c-bg); }
.sg-orte-intro .sg-landing-intro { margin-top: 0; max-width: var(--measure); }

/* --- Fresh-CI-Picker (SEE-1299) — dokumentiert im design-ci-Skill §7 ---
   Luftiges Karten-Grid je See; jede Ort-Karte mit segmentiertem
   Zielgruppen-Footer. Tokens: See-Blau #2F6F9E + accent-wash #EAF1F6,
   CI-Line-Icons, Inter/Caveat, großzügiger Weißraum, weiche Elevation. */
.sg-orte-picker {
  display: flex;
  flex-direction: column;
  gap: 52px;
  margin-top: 8px;
}

/* Sektions-Kopf je See: rundes Icon-Badge (accent-wash) + Name + Koordinaten */
.sg-orte-see-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.sg-orte-see-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c-accent-wash);
  color: var(--c-accent);
}
.sg-orte-see-badge .sg-icon { width: 22px; height: 22px; }
.sg-orte-see-badge .sg-icon svg { width: 100%; height: 100%; display: block; }
.sg-orte-see-name {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--c-ink);
}
.sg-orte-coords {
  font-family: var(--font-script);
  font-size: 1.2rem;
  color: var(--c-accent);
  white-space: nowrap;
  margin-left: auto;
}

/* Ort-Karten-Grid */
.sg-orte-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.sg-orte-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .2s ease, transform .18s ease;
}
.sg-orte-card:hover {
  border-color: var(--c-accent);
  box-shadow: 0 10px 28px -14px rgba(47, 111, 158, .40);
  transform: translateY(-3px);
}
.sg-orte-card-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 18px 18px 6px;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -.01em;
  color: var(--c-ink);
}
/* Feine Micro-Eyebrow über der Zielgruppen-Auswahl (Führung + Premium-Feel) */
.sg-orte-card-choices-head {
  padding: 0 18px 8px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* Zielgruppen-Auswahl (SEE-1540) — premium CI-Karten-Rows statt schlichter
   Segment-Textlinks. Jede Zielgruppe ist eine klar tappbare Karte: rundes
   Line-Icon-Badge (accent-wash) + Label + Chevron. Hover füllt accent-wash,
   Badge füllt See-Blau, Chevron gleitet. Linsen: Visuelle Hierarchie (in 2 s
   als tappbar erkennbar), CI-Treue (See-Blau #2F6F9E + accent-wash #EAF1F6),
   Markenkohärenz (Line-Icons wie Nav/Startseiten-Kacheln), Minimalismus/Weißraum. */
.sg-orte-card-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding: 0 16px 16px;
}
.sg-aud {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.sg-aud .sg-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-accent-wash);
  color: var(--c-accent);
  transition: background .18s ease, color .18s ease;
}
.sg-aud .sg-icon svg { width: 18px; height: 18px; display: block; }
.sg-aud .sg-aud-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Chevron-Affordance (rein CSS, kein Extra-Markup) */
.sg-aud::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--c-ink-soft);
  border-bottom: 2px solid var(--c-ink-soft);
  transform: rotate(-45deg);
  transition: transform .18s ease, border-color .18s ease;
}
.sg-aud:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-wash);
  color: var(--c-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -12px rgba(47, 111, 158, .55);
}
.sg-aud:hover .sg-icon { background: var(--c-accent); color: #fff; }
.sg-aud:hover::after { border-color: var(--c-accent); transform: translateX(3px) rotate(-45deg); }
.sg-aud:active { transform: translateY(0); box-shadow: none; }
.sg-aud:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.sg-orte-empty { color: var(--c-ink-soft); }

@media (max-width: 782px) {
  .sg-orte-hero { min-height: 0; padding: clamp(36px, 8vw, 56px) 0; }
  .sg-orte-hero-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .sg-orte-hero-media { order: -1; max-width: 340px; margin: 0 auto; }
}