/* ═══ Sprachumschalter + Sprachrückfrage ═══
   Nutzt durchgehend die vorhandenen Design-Token der Seite
   (--stone-*, --red, --font-sans, --font-serif) — kein eigenes Farbschema.  */

/* ── Umschalter in der Topbar ─────────────────────────────────── */
.lang-switch{display:inline-flex;align-items:center;gap:.125rem;margin-left:.75rem;padding-left:.75rem;border-left:1px solid rgba(255,255,255,.18)}
.lang-switch-item{display:inline-block;padding:.125rem .375rem;font-size:.6875rem;font-weight:600;letter-spacing:.04em;line-height:1.4;border-radius:2px;text-decoration:none;transition:color .2s,background .2s}
a.lang-switch-item{opacity:.65}
a.lang-switch-item:hover,a.lang-switch-item:focus-visible{opacity:1;background:rgba(255,255,255,.12)}
.lang-switch-item.is-current{opacity:1;background:rgba(255,255,255,.16)}
@media (max-width:640px){.lang-switch{margin-left:.5rem;padding-left:.5rem}}

/* ── Sprachrückfrage ──────────────────────────────────────────────
   Mittig, nicht am Rand. Die frühere Fassung war ein schmaler Streifen
   über dem Seitenkopf — der wurde nicht wahrgenommen, weil Randstreifen
   wie Werbung aussehen und weggelesen werden.

   Formensprache bewusst von der Cookie-Notice übernommen (weiße Karte,
   Serifen-Überschrift, dieselben Schaltflächen, dieselbe Beschleunigungs-
   kurve): beide sind Rückfragen der Seite an den Besucher und sollen als
   dasselbe Element erkennbar sein.

   z-index 7000 gegen 8000 der Cookie-Notice: die sitzt als Balken am
   unteren Rand, und die Abdunklung hier darf nicht ueber ihr liegen.
   Zeitlich greift dieselbe Regel — assets/js/lang-hint.js wartet die
   Cookie-Entscheidung ab, bevor die Rueckfrage erscheint.              */
.lang-hint{position:fixed;inset:0;z-index:7000;display:flex;align-items:center;justify-content:center;
  padding:1.25rem;opacity:0;pointer-events:none;transition:opacity .35s cubic-bezier(.16,1,.3,1)}
.lang-hint.is-visible{opacity:1;pointer-events:auto}

.lang-hint-backdrop{position:absolute;inset:0;background:rgba(42,36,30,.55);cursor:pointer}

.lang-hint-card{position:relative;width:100%;max-width:30rem;background:var(--white,#fff);
  padding:2rem 2rem 1.75rem;box-shadow:0 20px 60px rgba(42,36,30,.22);
  transform:translateY(14px) scale(.98);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.lang-hint.is-visible .lang-hint-card{transform:translateY(0) scale(1)}

/* Typografische Hierarchie: Kennzeichnung — Frage — Übersetzung.
   Die Unterzeile steht in einer anderen Sprache als die Überschrift und
   ist deshalb bewusst leiser gesetzt, nicht gleichwertig: sie ist die
   Hilfestellung, nicht die eigentliche Frage. */
.lang-hint-eyebrow{font-family:var(--font-sans,system-ui,sans-serif);font-size:.6875rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--stone-400,#b5aa9c);margin:0 0 .625rem}
.lang-hint-title{font-family:var(--font-serif,Georgia,serif);font-size:1.375rem;line-height:1.3;
  color:var(--stone-900,#1a1613);margin:0 0 .5rem;font-weight:600}
.lang-hint-sub{font-family:var(--font-sans,system-ui,sans-serif);font-size:.9375rem;line-height:1.6;
  color:var(--stone-500,#8c8074);margin:0 0 1.5rem}

.lang-hint-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.lang-hint-actions .btn{font-size:.8125rem;padding:.5rem 1.25rem}
.lang-hint-go{text-decoration:none}

.lang-hint-close{position:absolute;top:.75rem;right:.875rem;background:none;border:none;
  color:var(--stone-400,#b5aa9c);font-size:1.5rem;line-height:1;cursor:pointer;padding:.125rem .375rem;
  transition:color .2s}
.lang-hint-close:hover,.lang-hint-close:focus-visible{color:var(--stone-800,#2d2620)}

@media (max-width:640px){
  .lang-hint{padding:1rem;align-items:flex-end}
  .lang-hint-card{padding:1.5rem 1.25rem 1.25rem;max-width:none}
  .lang-hint-title{font-size:1.1875rem}
  .lang-hint-sub{font-size:.875rem;margin-bottom:1.25rem}
  .lang-hint-actions{flex-direction:column;align-items:stretch}
  .lang-hint-actions .btn{text-align:center;justify-content:center}
}

/* Wer Bewegung reduziert haben will, bekommt keinen Einblend-Effekt. */
@media (prefers-reduced-motion:reduce){
  .lang-hint,.lang-hint-card{transition:none}
  .lang-hint-card{transform:none}
}