/* Gemeinsames Chrome ALLER Lernen-Begleitseiten (Header, Reiter-Nav, Footer, Lightbox).
   Gleiche Struktur wie GIS (CompanionHeader/CompanionFooter) — app-spezifisch ist NUR die
   Akzentfarbe. Pro App diese zwei Zeilen ändern. */
:root { --accent: #0f766e; --accent-strong: #115e59; }

/* Header: Marke + „Zur App" + klebrige Reiter-Navigation */
.site-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid #e2e8f0; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.site-header:empty { min-height: 5.6rem; }
.site-header .bar { max-width: 48rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; }
.brand { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; color: #0f172a; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand span { color: var(--accent); }
.btn-app { display: inline-block; background: var(--accent); color: #fff; padding: .375rem .75rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; transition: background .15s; text-decoration: none; }
.btn-app:hover { background: var(--accent-strong); text-decoration: none; }
.companion-tabs { max-width: 48rem; margin: 0 auto; display: flex; gap: .25rem 1rem; overflow-x: auto; white-space: nowrap; padding: 0 1rem .5rem; font-size: .875rem; scrollbar-width: none; }
.companion-tabs::-webkit-scrollbar { display: none; }
.companion-tabs a { flex-shrink: 0; border-bottom: 2px solid transparent; padding-bottom: .125rem; color: #64748b; text-decoration: none; transition: color .15s; }
.companion-tabs a:hover { color: var(--accent); text-decoration: none; }
.companion-tabs a.active { border-bottom-color: var(--accent); font-weight: 600; color: #0f172a; }

/* Footer: Reiter + rechtliche Links + Copyright */
.site-footer { border-top: 1px solid #e2e8f0; background: #f8fafc; margin-top: 3rem; }
.site-footer .inner { max-width: 48rem; margin: 0 auto; padding: 2rem 1rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .875rem; }
.site-footer nav a { color: #64748b; text-decoration: none; transition: color .15s; }
.site-footer nav a:hover { color: var(--accent); text-decoration: none; }
.site-footer nav a.active { color: #0f172a; font-weight: 500; }
.copyright { margin-top: 1rem; font-size: .75rem; color: #94a3b8; }

/* Lightbox — gleicher Look/Verhalten wie shared-libs/vue/Lightbox.vue */
.lb-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 100000; }
.lb-container { position: fixed; inset: 0; z-index: 100001; display: flex; flex-direction: column; user-select: none; -webkit-user-select: none; }
.lb-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 8px 12px; background: rgba(0,0,0,.5); z-index: 2; }
.lb-toolbar button { width: 36px; height: 36px; padding: 6px; background: none; border: none; color: #fff; cursor: pointer; border-radius: 4px; transition: background .15s; }
.lb-toolbar button:hover { background: rgba(255,255,255,.15); }
.lb-toolbar svg { width: 100%; height: 100%; display: block; }
.lb-zoom-label { color: rgba(255,255,255,.7); font-size: 13px; min-width: 32px; text-align: center; font-variant-numeric: tabular-nums; }
.lb-main { flex: 1; display: flex; overflow: hidden; }
.lb-image-area { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; }
.lb-image-area.lb-zoomed { cursor: grab; }
.lb-image-area.lb-zoomed:active { cursor: grabbing; }
.lb-image-wrapper { transition: transform .2s ease; }
.lb-image-wrapper.lb-no-transition { transition: none; }
.lb-image { max-width: 90vw; max-height: calc(100vh - 110px); object-fit: contain; pointer-events: none; display: block; }
.lb-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lb-spinner { width: 36px; height: 36px; border: 3px solid rgba(255,255,255,.2); border-top-color: #fff; border-radius: 50%; animation: lb-spin .7s linear infinite; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 80px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); transition: color .15s; z-index: 3; }
.lb-nav:hover { color: #fff; }
.lb-nav svg { width: 32px; height: 32px; }
.lb-nav-prev { left: 8px; }
.lb-nav-next { right: 8px; }
.lb-caption-bar { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 16px; background: rgba(0,0,0,.5); color: #fff; font-size: 14px; min-height: 42px; }
.lb-number { color: rgba(255,255,255,.6); font-size: 13px; }
[data-lightbox] { cursor: zoom-in; }