/* liebly.de – Top-Bar (Website und Vorschau im CMS). Eigene Datei, damit das CMS nicht das ganze Website-Stylesheet laden muss. */
.lb-bar {
  --e: cubic-bezier(.2, .7, .2, 1);
  position: sticky; top: 0; z-index: 70; overflow: hidden; color: var(--bar-fg); background-color: var(--bar-bg);
  font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; padding-top: env(safe-area-inset-top, 0px);
}
.lb-bar__in { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .3rem 1.1rem; max-width: 1180px; margin: 0 auto; padding: .55rem 3.2rem; min-height: 44px; font-size: .93rem; line-height: 1.3; text-align: center; flex-wrap: wrap; }
.lb-bar__label { font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; padding-right: 1.1rem; border-right: 1px solid color-mix(in srgb, currentColor 40%, transparent); white-space: nowrap; }
.lb-bar__label[hidden] { display: none; }
.lb-bar__text { font-weight: 400; letter-spacing: .01em; }
.lb-bar__em { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 500; font-size: 1.42em; line-height: .7; letter-spacing: 0; margin-right: .08em; }
.lb-bar__short { display: none; }
.lb-bar__cd { font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; opacity: .9; }
.lb-bar__cd::before { content: "·"; margin-right: .7rem; letter-spacing: 0; }
a.lb-bar__cta, .lb-bar__cta { display: inline-flex; align-items: center; gap: .4rem; color: inherit !important; font-weight: 500; text-decoration: none; padding: .2rem 0 .1rem; border-bottom: 1px solid currentColor; white-space: nowrap; }
.lb-bar__cta span { display: inline-block; transition: transform .3s var(--e); }
.lb-bar__cta:hover span { transform: translateX(4px); }
.lb-bar__cta[hidden] { display: none; }
.lb-bar__cta:focus-visible, .lb-bar__close:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.lb-bar__close { position: absolute; z-index: 2; right: .6rem; top: calc(50% + env(safe-area-inset-top, 0px) / 2); transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .75; transition: opacity .2s, background .2s; }
.lb-bar__close:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.lb-bar__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.lb-bar.is-closing { opacity: 0; transition: opacity .25s; }
/* Navigation rutscht unter die feststehende Leiste */
.lb-bar ~ .lb-head { top: var(--bar-h, 44px); }
@media (max-width: 640px) {
  /* Festes Raster: Text | Knopf | Platz fürs Kreuz – nichts kann sich überlagern oder aus dem Bild rutschen */
  .lb-bar__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .7rem; padding: .45rem 3.1rem .45rem .95rem; font-size: .86rem; text-align: left; }
  .lb-bar__label, .lb-bar__cd, .lb-bar__dot { display: none; }
  .lb-bar__text { min-width: 0; overflow-wrap: anywhere; }
  .lb-bar__long.has-short { display: none; } .lb-bar__short { display: inline; }
  a.lb-bar__cta, .lb-bar__cta { justify-self: end; padding: .32rem .8rem; border: 1px solid currentColor; border-radius: 999px; font-size: .82rem; line-height: 1.2; }
  .lb-bar__close { right: .35rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .lb-bar--fade .lb-bar__in { animation: lbbarin .8s var(--e) both; }
  @keyframes lbbarin { from { opacity: 0; transform: translateY(-5px); } }
  .lb-bar--shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 38%, rgb(255 255 255 / .28) 50%, transparent 62%); transform: translateX(-100%); animation: lbbarshine 6s ease-in-out 1.2s infinite; pointer-events: none; }
  @keyframes lbbarshine { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }
  .lb-bar__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: lbbarpulse 1.9s ease-out infinite; }
  @keyframes lbbarpulse { from { transform: scale(1); opacity: .55; } to { transform: scale(3); opacity: 0; } }
}