/* ============================================================================
   1ki-frame — Kopfleisten-Titel, Teilen-Menü, Schrumpf-Zustand
   ----------------------------------------------------------------------------
   Single Source of Truth. Quelle: Staging/_ui/frame/frame.css
   Setzt 1ki-theme.css voraus, nutzt dessen Variablen, keine eigenen Farben.

   Was hier NICHT steht: die Grundform von .topbar und .foot. Die gehört ins
   Design-System (1ki-theme.css Abschnitt 4 und 10), weil sie auch von Apps
   genutzt wird, die diesen Frame nicht einsetzen (me.1.ki, w.1.ki). Hier
   stehen nur die Teile, die es erst mit dem Frame gibt.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Seitentitel in der Kopfleiste
   Christian-Vorgabe 2026-08-06: "Eine H1 Überschrift der jeweiligen Seite,
   Das was wir auch in der Tab des Browsers anzeigen."
   Logo und Titel bilden EIN Flex-Kind, damit .topbar weiterhin nur zwei
   Kinder hat (Marke links, Bedienelemente rechts) und space-between nicht
   drei Blöcke auseinanderzieht.
   ------------------------------------------------------------------------ */
.topbar-brand-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;              /* erlaubt dem Titel zu schrumpfen statt zu drängen */
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
   Kein Flimmern beim Seitenaufruf
   ----------------------------------------------------------------------------
   Christian-Befund 2026-08-06: "Ich sehe bei dem Aufruf einer Seite auf dem
   Desktop den Header flimmern."

   Ursache: Sprache, Ansicht und Teilen sind leere Halter im Markup und werden
   erst client-seitig gefüllt (lang.js, a11y.js, frame.js). Beim ersten
   Rendern ist die rechte Seite der Leiste also leer und damit niedriger als
   das Logo; sobald die drei Regler eingesetzt sind, wächst sie auf ihre
   endgültige Höhe. Genau dieser Sprung ist das Flimmern -- ein klassischer
   Layout Shift, kein Ladefehler.

   Lösung: den Platz von Anfang an reservieren, statt ihn entstehen zu lassen.
   Die Leiste hat damit von der ersten gerenderten Zeile an ihre Endhöhe, das
   Einsetzen der Regler verschiebt nichts mehr. */
.topbar-actions { min-height: 44px; }
#langSwitch, #a11yMount, #shareMount {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
}
/* Breite der beiden Symbolknöpfe ist bekannt und fest -- reservieren, damit
   auch waagerecht nichts springt. Die Sprachauswahl bleibt ohne feste
   Breite: sie entfällt auf einsprachigen Seiten ganz (lang.js bricht dann
   ab), eine Reservierung hinterließe dort eine sichtbare Lücke. */
#a11yMount, #shareMount { min-width: 38px; }

/* Christian-Vorgabe 2026-08-06 (Nachfassung): "der Titel im Header könnte
   etwas größer sein und entweder in --sky oder --paper und Überschrift
   Ebene 1". Gewählt: --paper. Sky ist im Theme die Farbe für Links und
   aktive Zustände -- ein Seitentitel in Sky sähe anklickbar aus, ist er
   aber nicht. Paper trägt den Titel als das, was er ist: die Überschrift
   der Seite, ruhig und mit vollem Kontrast (21:1 auf dem Balken). */
.frame-title {
  margin: 0;
  padding-left: var(--space-3);
  border-left: 1px solid var(--line);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--t-fast), max-width var(--t-fast);
}

/* ---------------------------------------------------------------------------
   Schrumpf-Zustand beim Scrollen (frame.js setzt data-klein="true")
   Nur Größen ändern, nichts ausblenden, was zur Bedienung gebraucht wird --
   die Bedienelemente rechts bleiben vollständig erreichbar.
   ------------------------------------------------------------------------ */
.topbar[data-frame-scroll="auto"] {
  transition: padding var(--t-med), background-color var(--t-med);
}
.topbar[data-frame-scroll="auto"] .brand img {
  transition: height var(--t-med);
}

.topbar[data-klein="true"] {
  padding-top: max(5px, env(safe-area-inset-top));
  padding-bottom: 5px;
}
.topbar[data-klein="true"] .brand img { height: clamp(22px, 3vw, 28px); }
.topbar[data-klein="true"] .frame-title {
  opacity: 0;
  max-width: 0;
  padding-left: 0;
  border-left: 0;
}

/* Wer Bewegung reduziert haben will, bekommt keine Übergänge. frame.js
   schaltet das Schrumpfen dort ohnehin ganz ab, das hier ist der Gürtel
   zum Hosenträger. */
@media (prefers-reduced-motion: reduce) {
  .topbar[data-frame-scroll="auto"],
  .topbar[data-frame-scroll="auto"] .brand img,
  .frame-title { transition: none; }
}

/* ---------------------------------------------------------------------------
   Teilen-Menü
   Auslöser und Klappliste bewusst in derselben Optik wie die Sprachauswahl
   (lang.css) -- die kompakten Regler in der Leiste sollen sich gleich
   anfühlen, nicht jeder anders.
   ------------------------------------------------------------------------ */
.share { position: relative; display: inline-flex; }

.share-toggle {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.share-toggle:hover, .share-toggle:focus-visible {
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.5);
}

.share-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 65;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.share-menu[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }

.share-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
}
.share-opt:hover, .share-opt:focus-visible { background: rgba(68, 168, 222, 0.14); color: var(--paper); }
.share-opt svg { flex: 0 0 auto; opacity: 0.85; }

@media print { .share { display: none; } }

/* ---------------------------------------------------------------------------
   Kontakt-Menü
   Christian-Vorgabe 2026-08-06: nicht ein Link, sondern eine Auswahl —
   Kontaktdaten (Visitenkarte), Kennenlern-Termin, Nachricht schreiben.
   Der Auslöser bleibt optisch die primäre Schaltfläche der Leiste, das ist
   die einzige Stelle im Rahmen mit Verlauf; die Auswahl klappt darunter auf.
   ------------------------------------------------------------------------ */
.cta { position: relative; display: inline-flex; }

.cta-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 65;
  min-width: 268px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.cta-menu[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }

.cta-opt {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.cta-opt:hover, .cta-opt:focus-visible { background: rgba(68, 168, 222, 0.14); color: var(--paper); }
.cta-opt svg { flex: 0 0 auto; margin-top: 2px; opacity: 0.85; }
.cta-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cta-opt-label { font-size: var(--fs-sm); }
.cta-opt-hint { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.3; }

@media print { .cta { display: none; } }

/* ---------------------------------------------------------------------------
   Schmale Geräte
   Reihenfolge des Weichens, von unwichtig nach wichtig:
   Titel -> Kontakt-Beschriftung -> gar nichts mehr. Menü, Ansicht, Teilen
   und Sprache bleiben immer erreichbar, das sind Bedienelemente.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .frame-title { font-size: var(--fs-xs); }
}

@media (max-width: 720px) {
  /* Titel weicht ganz: auf dieser Breite konkurriert er mit den
     Bedienelementen, und die haben Vorrang. Der Titel steht ohnehin
     zusätzlich im Tab und in der H1-Struktur der Seite. */
  .frame-title { display: none; }
  .topbar-actions { gap: 6px; }
}

@media (max-width: 480px) {
  .share-toggle { width: 34px; height: 34px; }
  .share-menu { min-width: 190px; }
}