:root {
  --accent: #1f4f80;
  --accent-glow: rgba(31,79,128,.45);
  --bg-page: #0b0d10;
  --bg-card: rgba(20,22,28,.4);
  --bg-panel: rgba(10,12,16,.6);
  --border-soft: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.18);
  --text-main: #fff;
  --text-dim: rgba(255,255,255,.6);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: radial-gradient(circle at 20% 30%, rgba(40,120,255,.28) 0%, rgba(0,0,0,0) 60%), #0b0d10;
  color: var(--text-main);
  font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}


/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem;
  background: rgba(8,9,12,.5);
  border-bottom: 1px solid rgba(255,255,255,.03);
  padding: .8rem 1.5rem .6rem;
  backdrop-filter: blur(12px);
}
.brand {
  display: flex;
  gap: .5rem;
  align-items: center;
  font-size: .9rem;
}
.logo {
  width: 36px;
  height: 36px;
  border-radius: .8rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 600;
}

/* Main */
#profileMain {
  width: min(1020px, 100%);
  margin: 1.1rem auto 3.5rem;
  padding: 0 1rem;
}

/* Banner */
.banner-wrapper {
  width: 100%;
  margin-bottom: 1rem;
}

.banner-card {
  width: 100%;
  aspect-ratio: 3 / 1;   /* sauberes Seitenverhältnis */
  height: auto;
  border-radius: 1.3rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.03);
  background: transparent;   /* war #000 → erzeugte den „schwarzen Rand“ */
  box-shadow: 0 35px 120px rgba(0,0,0,.6);
  position: relative;
  cursor: pointer;
}

.banner-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* füllt die Karte vollständig */
  object-position: center;
  display: block;
}

.banner-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .65rem;
  display: flex;
  justify-content: center;
  gap: .4rem;
}

/* einzelne Dot-Leiste (nur 1 Slide) komplett ausblenden */
.banner-dots:has(.banner-dot:first-child:last-child) {
  display: none;
}

.banner-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
}

.banner-dot.active {
  background: #fff;
  box-shadow: 0 0 16px rgba(255,255,255,.7);
}

/* Karten-Stapel */
.profile-shell {
  width: 100%;
  max-width: 460px;
  margin: 0 auto 1rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.03) 0%, rgba(0,0,0,0) 65%),
    var(--bg-card, rgba(12,15,19,.45)); /* Branding-fähig */
  border: 1px solid rgba(255,255,255,.03);
  border-radius: 1.2rem;
  box-shadow: 0 30px 100px rgba(0,0,0,.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 1rem 1rem 1.25rem;
  position: relative;
}
.status-badge {
  position: absolute;
  top: .9rem;
  right: .9rem;
  border: 1px solid rgba(120,196,255,1);
  background: rgba(5,10,15,.6);
  border-radius: 1.2rem;
  padding: .25rem .7rem .28rem;
  font-size: .65rem;
  color: rgba(120,196,255,1);
}

/* Panel innen */
.panel {
  background: rgba(255,255,255,.01);
  border: 1px solid rgba(255,255,255,.02);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* Profilheader */
.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.avatar-circle {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: radial-gradient(circle at 22% 20%, rgba(140,190,255,.8) 0%, rgba(0,0,0,0) 55%), rgba(12,15,19,.4);
  border: 1px solid rgba(255,255,255,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 600;
  letter-spacing: .04em;
}
.identity-block { flex: 1; min-width: 0; }
#displayName { font-weight: 600; font-size: 1.05rem; }
.company-line { font-size: .85rem; margin-top: .35rem; }
.role-line { font-size: .78rem; opacity: .7; }
.address-wrap { font-size: .72rem; opacity: .55; margin-top: .5rem; white-space: pre-line; }

/* 2-Spalten (QR + Share) */
/* ✔ jetzt wirklich mittig – auch wenn nur 1 Karte da ist */
.grid-two {
  display: flex;
  gap: .75rem;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}
.grid-two > .mini-card {
  flex: 0 1 360px;   /* Breite der kleinen Karten */
  max-width: 100%;
}
@media (max-width: 560px) {
  .grid-two {
    justify-content: center;
  }
}

/* Mini-Karten */
.mini-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.02) 0%, rgba(0,0,0,0) 60%),
    var(--bg-panel, rgba(10,12,15,.45)); /* Branding-fähig */
  border: 1px solid rgba(255,255,255,.03);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 30px 100px rgba(0,0,0,.5);
}
.mini-headline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  font-weight: 500;
  color: rgba(173,210,255,1);
}

/* QR */
.qr-wrap { text-align: center; cursor: pointer; }
.qr-img {
  width: 150px;
  height: 150px;
  background: #fff;
  border-radius: .8rem;
  display: block;
  margin: 0 auto .5rem;
}
.qr-fullscreen-hint {
  font-size: .65rem;
  opacity: .6;
  display:flex;
  justify-content:center;
  gap:.35rem;
}

/* Share */
.share-row-icons {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}
.share-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,.01);
  border: 1px solid rgba(255,255,255,.03);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.share-actions { display:flex; flex-direction:column; gap:.55rem; }
.share-action-row {
  display:flex;
  justify-content:space-between;
  gap:.5rem;
  border-top:1px solid rgba(255,255,255,.02);
  padding-top:.3rem;
  font-size:.78rem;
}
.share-action-right {
  color: rgba(173,210,255,1);
  cursor:pointer;
}

/* Promo */
.promo-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.02) 0%, rgba(0,0,0,0) 60%),
    var(--bg-panel, rgba(10,12,15,.45)); /* Branding-fähig */
  border: 1px solid rgba(255,255,255,.03);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 30px 100px rgba(0,0,0,.5);
}
.promo-headline {
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: .6rem;
  color: rgba(173,210,255,1);
}
.promo-media {
  border-radius: .7rem;
  overflow: hidden;
  background:#000;
  cursor:pointer;
}
.promo-media img {
  width: 100%;
  height: auto;
  display:block;
}

/* Stats */
.stats-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.02) 0%, rgba(0,0,0,0) 60%),
    var(--bg-panel, rgba(10,12,15,.45)); /* Branding-fähig */
  border: 1px solid rgba(255,255,255,.03);
  border-radius: 1rem;
  padding: 1rem;
  text-align:left;
}
.stats-headline {
  display:flex;
  justify-content:space-between;
  margin-bottom:.4rem;
}
.stats-value {
  font-size: 1.4rem;
  font-weight: 600;
  color: rgba(173,210,255,1);
}

/* =========================================================
   Popups & Kontakt-Visitenkarte
   ========================================================= */

.hidden { display:none !important; }

/* Overlays */
.lightbox-overlay,
.contact-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

/* Hintergründe */
.lightbox-overlay {
  background: rgba(0,0,0,.75);
  padding: 1rem;
}

.contact-modal-overlay {
  background: rgba(15,23,42,0.75);
  padding: 1rem;
  overflow-y: auto;      /* Overlay kann scrollen */
}

/* Body sperren wenn Modal offen */
body.modal-open {
  overflow: hidden;
}

/* auf sehr kleinen Screens Karte eher oben ausrichten */
@media (max-width: 480px) {
  .contact-modal-overlay {
    align-items: flex-start;
  }
}

/* Lightbox-Container */
.lightbox-inner {
  background: rgba(8,10,12,.6);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .9rem;
  padding: .75rem;
  max-width: 90vw;
  max-height: 90vh;
  position: relative;
}
.lightbox-inner img {
  max-width: 82vw;
  max-height: 82vh;
  display: block;
}
.lightbox-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .4rem;
  padding: .25rem .5rem;
  cursor: pointer;
}

/* Visitenkarten-Layout für Kontakt-Popup */
.contact-modal-card {
  --card-bg-color: #111827;
  --card-bg-image: none;
  --card-bg-opacity: 0.04;
  --card-bg-size: 45%;

  position: relative;
  width: 340px;
  max-width: 90vw;
  max-height: calc(100vh - 2rem); /* Karte bleibt im Viewport */
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  background: var(--card-bg-color);
  overflow: hidden;
  color: #f9fafb;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  display: flex; /* damit der Inhalt scrollen kann */
}

/* Wasserzeichen / Hintergrundbild in der Visitenkarte */
.contact-modal-card::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: var(--card-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--card-bg-size);
  opacity: var(--card-bg-opacity);
  filter: grayscale(1);
  pointer-events: none;
}

/* Innerer Card-Container */
.contact-card-inner {
  position: relative;
  z-index: 1;
  padding: 1rem 1.2rem 0.8rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  box-sizing: border-box;
  overflow-y: auto;   /* Inhalt der Karte kann scrollen */
}

/* Close-Button in der Karte */
.contact-modal-close {
  align-self: flex-end;
  border: none;
  background: transparent;
  color: rgba(248,250,252,0.8);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  padding: 0;
  margin-bottom: 0.25rem;
}
.contact-modal-close:hover {
  color: #ffffff;
}

/* Kopfbereich (Avatar + Name) */
.contact-card-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.35rem;
}

.contact-modal-avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, #38bdf8, #0ea5e9 45%, #0369a1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e5f6ff;
  font-weight: 700;
  font-size: 1.2rem;
  overflow: hidden;
}
.contact-modal-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.contact-modal-idblock {
  min-width: 0;
}

.contact-modal-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.contact-modal-company {
  font-size: 0.8rem;
  opacity: 0.9;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.contact-modal-role {
  font-size: 0.75rem;
  opacity: 0.8;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* feine Linie */
.contact-card-divider {
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(148,163,184,0.35),
    rgba(56,189,248,0.9),
    rgba(15,23,42,0.1)
  );
  margin: 0.3rem 0 0.35rem;
}

/* Body der Karte (Links) */
.contact-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.78rem;
}

.contact-modal-links {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* einzelne Zeile (Adresse, Telefon, Mail, usw.) */
.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.45rem;
  border-radius: 0.45rem;
  text-decoration: none;
  color: inherit;
  background: radial-gradient(
    circle at 0% 0%,
    rgba(148,163,184,0.22),
    rgba(15,23,42,0.8)
  );
  border: 1px solid rgba(148,163,184,0.25);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(15,23,42,0.55);
}
.contact-row span:first-child {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.contact-row-right {
  font-size: 0.7rem;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.contact-row:hover {
  border-color: rgba(248,250,252,0.5);
  transform: translateY(-1px);
  transition: all 0.15s ease-out;
}

/* Footer mit Call-Button */
.contact-card-footer {
  margin-top: 0.35rem;
  display: flex;
  justify-content: flex-end;
}

/* Call-Button im Karten-Stil */
.call-now-btn {
  border: none;
  border-radius: 999px;
  padding: 0.32rem 0.95rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ecfdf3;
  box-shadow: 0 8px 18px rgba(22,163,74,0.45);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.call-now-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  transition: all 0.15s ease-out;
}

/* Mobile: Karte etwas kleiner skalieren */
@media (max-width: 480px) {
  .contact-modal-card {
    width: 90vw;
  }
}

/* Inactive */
.inactive-card {
  width: min(430px, 100%);
  margin: 2.5rem auto;
  background: rgba(255,0,60,.05);
  border: 1px solid rgba(255,70,100,.4);
  border-radius: 1rem;
  padding: 1.3rem 1rem 1.5rem;
  text-align: center;
  color: rgba(255,190,190,1);
}
.inactive-headline {
  font-weight: 600;
  margin-bottom: .45rem;
}

/* Footer Basis */
.page-footer {
  width: 100%;
  text-align: center;
  padding: 1rem 0 1.6rem;
  font-size: .7rem;
  opacity: .45;
}
.page-footer a { color: inherit; }

/* ===== Profil: Aktions-Buttons unten ===== */
.action-block {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: .75rem;
}
.profile-shell .action-block {
  margin-top: .25rem;
}
.sys-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 38px;
  padding: .55rem 1rem;
  background: rgba(13,16,20,.35);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: .75rem;
  font-size: .75rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 20px 50px rgba(0,0,0,.35),
    0 0 20px rgba(31,79,128,.15);
  transition: transform .1s ease-out, background .1s ease-out;
}
.sys-btn:hover {
  background: rgba(31,79,128,.3);
  transform: translateY(-1px);
}
.sys-btn:active {
  transform: translateY(0);
}
@media (max-width: 520px) {
  .action-block {
    flex-direction: column;
    align-items: stretch;
  }
  .sys-btn {
    width: 100%;
    justify-content: center;
  }
}
.profile-shell .action-block {
  justify-content: center;
}

/* =========================================================
   ADMIN-PROFILE (nur anhängen, Profil-CSS oben bleibt)
   ========================================================= */

/* ganze Admin-Seite bekommt denselben Hintergrund wie Profil */
body.admin-page {
  background: radial-gradient(circle at 20% 30%, rgba(40,120,255,.28) 0%, rgba(0,0,0,0) 60%), #0b0d10;
  color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* --------- TOPBAR OBEN --------- */
body.admin-page .admin-topbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1.5rem .6rem;
  background: rgba(8,9,12,.5);
  border-bottom: 1px solid rgba(255,255,255,.03);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 25px 60px rgba(0,0,0,.4);
}
body.admin-page .admin-topbar-left {
  display: flex;
  gap: .6rem;
  align-items: center;
}
body.admin-page .admin-logo {
  width: 36px;
  height: 36px;
  border-radius: .8rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .7rem;
}
body.admin-page .admin-top-text {
  line-height: 1.2;
}
body.admin-page .admin-title {
  font-size: .8rem;
  font-weight: 500;
}
body.admin-page .admin-sub {
  font-size: .65rem;
  opacity: .55;
}

/* Linkzeile unter dem Header (Zurück / Öffentliches Profil) */
body.admin-page .admin-nav {
  width: min(1100px, 100%);
  margin: .4rem auto 0;
  padding: 0 1rem;
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}
body.admin-page .admin-link {
  font-size: .7rem;
  color: #9fccff;
  text-decoration: none;
}
body.admin-page .admin-link:hover {
  text-decoration: underline;
}

/* --------- MAIN LAYOUT --------- */
/* genau wie beim Profil: mittig, nicht am linken Rand kleben */
body.admin-page .admin-main,
body.admin-page main {
  width: min(1100px, 100%);
  margin: 1.1rem auto 3.5rem;
  padding: 0 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* jede Sektion eine Card – gleiche Breite */
body.admin-page main > section,
body.admin-page .admin-card,
body.admin-page .admin-shell > section {
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.02) 0%, rgba(0,0,0,0) 60%), rgba(10,12,16,.45);
  border: 1px solid rgba(255,255,255,.03);
  border-radius: 1rem;
  box-shadow: 0 30px 100px rgba(0,0,0,.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 1rem 1.1rem 1.2rem;
}

/* Überschriften in Cards */
body.admin-page h1,
body.admin-page h2,
body.admin-page h3 {
  margin: 0 0 .5rem;
  line-height: 1.25;
}
body.admin-page h1 { font-size: 1.05rem; }
body.admin-page h2 { font-size: .95rem; }
body.admin-page h3 { font-size: .85rem; }
body.admin-page p  { font-size: .72rem; line-height: 1.4; }

/* --------- FORM FELDER ---------- */
/* alle Inputs im Admin sollen gleich aussehen, 100% breit */
body.admin-page input[type="text"],
body.admin-page input[type="email"],
body.admin-page input[type="tel"],
body.admin-page input[type="url"],
body.admin-page input[type="number"],
body.admin-page input:not([type]),
body.admin-page textarea,
body.admin-page select {
  width: 100%;
  background: rgba(255,255,255,.012);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: .55rem;
  padding: .4rem .55rem .45rem;
  color: #fff;
  font-size: .72rem;
  outline: none;
  margin-top: .25rem;
}
body.admin-page input:focus,
body.admin-page textarea:focus,
body.admin-page select:focus {
  border-color: rgba(160,210,255,.75);
  background: rgba(9,11,13,.35);
}

/* Checkboxen */
body.admin-page input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: #76b6ff;
  margin-right: .35rem;
}

/* Buttons */
body.admin-page button,
body.admin-page .btn,
body.admin-page input[type="submit"] {
  background: #1f4f80;
  border: 1px solid rgba(181,214,255,.35);
  border-radius: .55rem;
  color: #fff;
  padding: .4rem .75rem .45rem;
  font-size: .7rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .45rem;
}
body.admin-page button:hover {
  background: #255f9a;
}
body.admin-page .btn-danger,
body.admin-page .danger {
  background: rgba(190,70,90,.85);
  border-color: rgba(240,160,175,.45);
}

/* 2-Spalten Layout für Formulare (Kontakt / Branding) */
body.admin-page .form-grid-2,
body.admin-page .admin-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .75rem 1rem;
}
@media (max-width: 820px) {
  body.admin-page .form-grid-2,
  body.admin-page .admin-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* jedes Label oberhalb */
body.admin-page label {
  font-size: .68rem;
  opacity: .85;
  display: block;
}

/* --------- PREVIEWS ---------- */
/* Branding Bild */
body.admin-page .admin-preview img,
body.admin-page .branding-preview img {
  max-width: 200px;
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,.02);
  display: block;
  margin-top: .5rem;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* Banner-Slides kleiner anzeigen */
body.admin-page .admin-banner-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .6rem;
}
body.admin-page .admin-banner-item {
  display: flex;
  gap: .6rem;
  align-items: center;
  background: rgba(1,1,1,.15);
  border: 1px solid rgba(255,255,255,.02);
  border-radius: .55rem;
  padding: .35rem .5rem;
}
body.admin-page .admin-banner-thumb {
  width: 120px;
  height: 60px;
  border-radius: .4rem;
  overflow: hidden;
  background: #000;
  flex: 0 0 120px;
}
body.admin-page .admin-banner-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------- LAYOUT DESIGNER (ziehbare Kacheln) ---------- */
body.admin-page .layout-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: .5rem;
}
body.admin-page .layout-item {
  display: flex;
  gap: .55rem;
  background: rgba(3,4,6,.3);
  border: 1px solid rgba(255,255,255,.03);
  border-radius: .7rem;
  padding: .5rem .6rem .55rem .4rem;
  align-items: flex-start;
}
body.admin-page .layout-handle {
  width: 28px;
  text-align: center;
  cursor: grab;
  font-size: 1.25rem;
  opacity: .5;
  user-select: none;
  line-height: 1.15;
}
body.admin-page .layout-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
body.admin-page .layout-title {
  font-size: .75rem;
  font-weight: 500;
}
body.admin-page .layout-info {
  font-size: .62rem;
  opacity: .5;
}
/* ✅ HTML nutzt .layout-desc → Alias */
body.admin-page .layout-desc{
  font-size: .62rem;
  opacity: .55;
}
body.admin-page .layout-align {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
body.admin-page .layout-pill {
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.02);
  border-radius: .55rem;
  padding: .25rem .55rem .3rem;
  font-size: .63rem;
  cursor: pointer;
}
body.admin-page .layout-pill.active {
  background: rgba(159,207,255,.15);
  border-color: rgba(159,207,255,.45);
  box-shadow: 0 0 15px rgba(159,207,255,.25);
}

/* Buttons unten im Designer nebeneinander */
body.admin-page .layout-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .6rem;
}

/* --------- FOOTER --------- */
body.admin-page footer {
  width: 100%;
  text-align: center;
  font-size: .7rem;
  opacity: .4;
  margin-top: 1.5rem;
}
body.admin-page footer a {
  color: inherit;
  text-decoration: none;
}
body.admin-page footer a:hover {
  text-decoration: underline;
}

/* ====== NEU: Querlogo im Header (für breite Firmenlogos) ====== */
.brand {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.brand-logo-wide {
  height: 32px;
  max-width: 190px;
  object-fit: contain;
  display: none; /* wird per JS bei brandingHeaderImageUrl auf block gesetzt */
}

/* ====== NEU: Wasserzeichen-Hintergrund ====== */
.page-watermark {
  position: fixed;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 45%;
  opacity: .04;
  pointer-events: none;
  z-index: 0;
}

/* damit Inhalt über dem Wasserzeichen liegt */
.topbar,
#profileMain,
.page-footer {
  position: relative;
  z-index: 1;
}
body {
  position: relative;
}

/* =========================================================
   ERGÄNZUNGEN für admin-profile (NEUE FELDER)
   ========================================================= */

/* Kopf von Admin-Karten */
body.admin-page .admin-card-head {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: .75rem;
}
body.admin-page .admin-h2 {
  font-size: .9rem;
  font-weight: 600;
}
body.admin-page .admin-hint {
  font-size: .66rem;
  opacity: .5;
  line-height: 1.35;
}

/* Meta-Gitter oben (ID, Status, Aufrufe, Letzter Aufruf, Erstellt) */
body.admin-page .admin-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap: .75rem;
  margin-bottom: .75rem;
}
body.admin-page .admin-label-small {
  font-size: .63rem;
  opacity: .55;
  margin-bottom: .15rem;
}
body.admin-page .admin-meta {
  font-size: .78rem;
  font-weight: 500;
  word-break: break-word;
}
body.admin-page .admin-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .65rem;
  padding: .25rem .6rem .3rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
body.admin-page .admin-badge-on {
  border-color: rgba(120,196,255,.55);
  background: rgba(18,85,140,.35);
  color: #fff;
  box-shadow: 0 0 18px rgba(88,168,245,.3);
}
body.admin-page .admin-badge-off {
  border-color: rgba(255,120,120,.35);
  background: rgba(140,18,18,.15);
  color: rgba(255,190,190,1);
}

/* Button-Reihen unter den Sections */
body.admin-page .admin-btn-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: .5rem;
}
body.admin-page .admin-btn {
  background: #1f4f80;
  border: 1px solid rgba(181,214,255,.35);
  border-radius: .55rem;
  color: #fff;
  padding: .4rem .8rem .45rem;
  font-size: .7rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: background .12s ease-out, transform .12s ease-out;
}
body.admin-page .admin-btn:hover {
  background: #255f9a;
  transform: translateY(-1px);
}
body.admin-page .admin-btn:active {
  transform: translateY(0);
}
body.admin-page .admin-btn-warn,
body.admin-page .admin-btn.danger {
  background: rgba(190,70,90,.85);
  border-color: rgba(240,160,175,.45);
}
body.admin-page .admin-btn-secondary {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
}
body.admin-page .admin-btn-secondary:hover {
  background: rgba(255,255,255,.08);
}

/* Nachricht rechts neben Buttons (z.B. "gespeichert ✔") */
body.admin-page .admin-msg {
  font-size: .68rem;
  opacity: .6;
  min-height: 1.1rem;
}

/* kleine Inline-Felder (Checkbox + Label nebeneinander) */
body.admin-page .admin-field-inline {
  display: flex;
  align-items: center;
  gap: .5rem;
}
body.admin-page .admin-field-full {
  grid-column: 1 / -1;
}
body.admin-page .admin-input-file {
  margin-top: .35rem;
  font-size: .7rem;
}

/* kleine Zahlenfelder in Banner-Liste */
body.admin-page .admin-input-small {
  max-width: 110px; /* ✅ einheitlich */
}

/* leere Meldungen (z.B. "kein Banner") */
body.admin-page .admin-empty {
  font-size: .68rem;
  opacity: .5;
  background: rgba(255,255,255,.015);
  border: 1px dashed rgba(255,255,255,.06);
  border-radius: .5rem;
  padding: .4rem .6rem;
}

/* Promo-PDF Hinweiskästchen */
body.admin-page .admin-pdf {
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.03);
  border-radius: .5rem;
  padding: .45rem .55rem;
  font-size: .68rem;
  display: inline-flex;
  gap: .4rem;
  align-items: center;
}

/* NO-ACCESS Screens schön zentrieren */
body.admin-page .admin-noaccess {
  background: rgba(140,18,18,.12);
  border: 1px solid rgba(255,120,120,.16);
  border-radius: .9rem;
  padding: 1.25rem 1rem 1.3rem;
  text-align: center;
}
body.admin-page .admin-noaccess h1 {
  font-size: 1rem;
  margin-bottom: .35rem;
}
body.admin-page .admin-noaccess p {
  opacity: .7;
}

/* Statistik-Section (showStats) – nur bisschen Abstand */
body.admin-page #showStatsInput {
  transform: translateY(1px);
}
body.admin-page section .stats-admin-hint {
  font-size: .64rem;
  opacity: .48;
  margin-top: .25rem;
}

/* Vorschaubild Branding etwas flexibler */
body.admin-page #brandingPreview img {
  max-width: 180px;
  height: auto;
}

/* =========================================================
   ADMIN – zusätzliche Felder für erweitertes Branding
   (Header-Querlogo, Wasserzeichen-Hintergrund)
   ========================================================= */

/* Datei-Inputs minimal angleichen */
body.admin-page .admin-input-file {
  display: block;
  width: 100%;
  margin-top: .35rem;
  font-size: .7rem;
  color: #fff;
  background: rgba(255,255,255,.01);
  border: 1px solid rgba(255,255,255,.02);
  border-radius: .4rem;
  padding: .35rem .4rem .4rem;
}

/* breitere Previews (Querlogo, Hintergrundbild) */
body.admin-page .admin-preview-wide img,
body.admin-page #brandingHeaderImagePreview img {
  max-width: 240px;
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,.04);
  box-shadow: 0 15px 45px rgba(0,0,0,.4);
  display: block;
  margin-top: .5rem;
}

/* Wasserzeichen-Vorschau im Admin (leicht transparent) */
body.admin-page .admin-preview-watermark img,
body.admin-page #brandingBgImagePreview img {
  max-width: 240px;
  opacity: .55;
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,.03);
  display: block;
  margin-top: .5rem;
  background: rgba(0,0,0,.2);
}

/* ein bisschen Abstand unterhalb der Hinweiszeilen */
body.admin-page .admin-hint + .admin-grid-2 {
  margin-top: .6rem;
}

/* =========================================================
   PUBLIC – Wasserzeichen / Hintergrundlogo
   ========================================================= */

/* Standardwerte – können per JS überschrieben werden */
:root {
  --wm-url: none;
  --wm-opacity: 0.04;
  --wm-size: 45%;
}

/* Body muss positioniert sein, damit ::before funktioniert */
body.has-watermark {
  position: relative;
  overflow-x: hidden;
}

/* das eigentliche Wasserzeichen */
body.has-watermark::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--wm-url);
  background-repeat: no-repeat;
  background-position: center 30%;
  background-size: var(--wm-size);
  opacity: var(--wm-opacity);
  pointer-events: none;
  z-index: 0;
}

/* damit der Inhalt über dem Wasserzeichen bleibt */
body.has-watermark > header,
body.has-watermark > main,
body.has-watermark > footer,
body.has-watermark .profile-shell,
body.has-watermark .banner-wrapper {
  position: relative;
  z-index: 1;
}

/* wenn du später mal ein sehr breites Querlogo im Kopf anzeigen willst */
.topbar.has-brand-image {
  min-height: 54px;
  align-items: center;
}
.topbar.has-brand-image .brand {
  gap: .8rem;
}
.topbar.has-brand-image #brandLogoHead {
  border-radius: .6rem;
}

/* falls du im Header ein breites Bild (brandingHeaderImageUrl) nutzt */
.topbar-brand-image {
  height: 32px;
  max-width: 210px;
  object-fit: contain;
  display: block;
}
@media (max-width: 520px) {
  .topbar-brand-image {
    max-width: 160px;
  }
}

/* ===== FIX für Index.html – gleicher Hintergrund & Layout ===== */

/* Hintergrund wie auf der Profilseite */
body:not(.admin-page) {
  background: radial-gradient(
      circle at 20% 30%,
      rgba(40,120,255,.28) 0%,
      rgba(0,0,0,0) 60%
    ),
    #0b0d10;
  color: var(--text-main);
}

/* Standard-Abschnitte wie HERO/FEATURES in gleiche Card-Optik setzen */
section,
.hero,
.features {
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.02) 0%, rgba(0,0,0,0) 60%),
              rgba(10,12,16,.45);
  border: 1px solid rgba(255,255,255,.03);
  border-radius: 1.2rem;
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 1.2rem;
  margin: 1.2rem auto;
  width: min(1020px, 100%);
}

/* Buttons wie in deiner gesamten Plattform */
.hero .cta,
.features a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 38px;
  padding: .55rem 1rem;
  background: rgba(13,16,20,.35);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: .75rem;
  font-size: .75rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 20px 50px rgba(0,0,0,.35),
    0 0 20px rgba(31,79,128,.15);
  transition: all .15s ease-out;
}

.hero .cta:hover {
  background: rgba(31,79,128,.3);
  transform: translateY(-1px);
}

/* Textfarben wie im Profil */
.hero h1,
.features h3,
.hero p,
.features p {
  color: #fff;
}

/* Footer wie der App-Footer – jetzt mit gleichem Look wie Header */
.footer,
.page-footer {
  text-align: center;
  padding: 1rem 0 1.6rem;
  font-size: .7rem;
  opacity: .75;
  background: rgba(8,9,12,.5);
  border-top: 1px solid rgba(255,255,255,.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.footer a,
.page-footer a {
  color: inherit;
}

/* =========================================================
   CUSTOMER DASHBOARD – ANALYTICS (2026 UI)
   Klassen: .nc-analytics-*
   ========================================================= */

/* Tabs */
body.admin-page .nc-analytics-tabs{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
  margin-top:.65rem;
}

body.admin-page .nc-analytics-tab{
  appearance:none;
  border: 1px solid var(--border-soft, rgba(255,255,255,.08));
  background: rgba(255,255,255,.05);
  color: var(--text-main, #fff);
  border-radius: 999px;
  padding: .48rem .75rem;
  font-weight: 800;
  font-size: .85rem;
  cursor: pointer;
  transition: transform .10s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  user-select: none;
  outline: none;
}

body.admin-page .nc-analytics-tab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
}

body.admin-page .nc-analytics-tab[aria-selected="true"]{
  background: rgba(31,79,128,.22);
  border-color: var(--border-strong, rgba(255,255,255,.18));
  box-shadow: 0 0 18px var(--accent-glow, rgba(31,79,128,.45));
}

body.admin-page .nc-analytics-tab:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,255,255,.10), 0 0 0 6px var(--accent-glow, rgba(31,79,128,.45));
}

/* Hero: Big Number + KPI Cards */
body.admin-page .nc-analytics-hero{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}

body.admin-page .nc-analytics-big{
  font-size: 2.05rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

body.admin-page .nc-analytics-sub{
  margin-top:.25rem;
  font-size: .85rem;
  opacity: .72;
  color: var(--text-dim, rgba(255,255,255,.6));
}

body.admin-page .nc-analytics-kpis{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  align-items:stretch;
}

body.admin-page .nc-analytics-kpi{
  border: 1px solid var(--border-soft, rgba(255,255,255,.08));
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: .55rem .7rem;
  min-width: 120px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.admin-page .nc-analytics-kpi-label{
  font-size:.72rem;
  opacity:.72;
  color: var(--text-dim, rgba(255,255,255,.6));
  margin-bottom:.15rem;
}

body.admin-page .nc-analytics-kpi-val{
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--text-main, #fff);
}

/* Chart Container */
body.admin-page .nc-analytics-chart-wrap{
  margin-top: .85rem;
  border: 1px solid var(--border-soft, rgba(255,255,255,.08));
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.02) 0%, rgba(0,0,0,0) 60%),
    var(--bg-panel, rgba(10,12,16,.6));
  border-radius: 18px;
  padding: .75rem .75rem .55rem;
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Canvas (JS setzt DPR korrekt) */
body.admin-page .nc-analytics-chart{
  width: 100%;
  height: 190px;
  display:block;
  border-radius: 12px;
}

/* Legend */
body.admin-page .nc-analytics-legend{
  display:flex;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .45rem;
  font-size: .74rem;
  opacity: .72;
  color: var(--text-dim, rgba(255,255,255,.6));
}

/* Year Chips (nur im years-Mode sichtbar) */
body.admin-page .nc-analytics-years{
  display:flex;
  gap:.45rem;
  overflow:auto;
  padding: .35rem .05rem .15rem;
  margin-top: .4rem;
  -webkit-overflow-scrolling: touch;
}

body.admin-page .nc-analytics-year{
  appearance:none;
  border: 1px solid var(--border-soft, rgba(255,255,255,.08));
  background: rgba(255,255,255,.05);
  color: var(--text-main, #fff);
  border-radius: 999px;
  padding: .42rem .65rem;
  font-weight: 900;
  font-size: .82rem;
  cursor:pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .10s ease, box-shadow .15s ease;
}

body.admin-page .nc-analytics-year:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
}

body.admin-page .nc-analytics-year[aria-selected="true"]{
  background: rgba(31,79,128,.22);
  border-color: var(--border-strong, rgba(255,255,255,.18));
  box-shadow: 0 0 18px var(--accent-glow, rgba(31,79,128,.45));
}

body.admin-page .nc-analytics-year:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.10), 0 0 0 6px var(--accent-glow, rgba(31,79,128,.45));
}

/* Mobile Tweaks */
@media (max-width: 520px){
  body.admin-page .nc-analytics-big{
    font-size: 1.7rem;
  }
  body.admin-page .nc-analytics-chart{
    height: 170px;
  }
  body.admin-page .nc-analytics-kpi{
    min-width: 46%;
  }
}

/* =========================================================
   SHARE / KONTAKTIEREN – SVG Icons Styling (NEU)
   ========================================================= */

.share-icon-btn svg{
  width: 20px;
  height: 20px;
  display: block;
}

/* Buttons: smoother Hover / Glow */
.share-icon-btn{
  color: rgba(255,255,255,.88);
  transition: transform .12s ease-out, background .12s ease-out, border-color .12s ease-out, box-shadow .12s ease-out, opacity .12s ease-out;
}

.share-icon-btn:hover:not(:disabled){
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 0 18px var(--accent-glow);
  transform: translateY(-1px);
}

.share-icon-btn:active:not(:disabled){
  transform: translateY(0);
}

/* Keyboard-Focus (wichtig für iOS/Accessibility) */
.share-icon-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.10), 0 0 0 6px var(--accent-glow);
}

/* Disabled */
.share-icon-btn:disabled{
  opacity: .28;
  cursor: not-allowed;
  color: rgba(255,255,255,.25);
  box-shadow: none;
  transform: none;
}

/* WhatsApp: grün, aber bei disabled trotzdem grau */
.share-icon-btn.icon-wa{
  color: #25D366;
}
.share-icon-btn.icon-wa:disabled{
  color: rgba(255,255,255,.25);
}

/* =========================================================
   ✅ ADMIN-PROFILE FIXES (wichtig für dein aktuelles HTML/JS)
   ========================================================= */

/* Topbar: rechter Bereich wirklich rechts */
body.admin-page .admin-topbar{
  justify-content: space-between;
}
body.admin-page .admin-topbar-right{
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
}

/* Auth/Login Box (wird per JS als .admin-auth gerendert) */
body.admin-page .admin-auth{
  font-size: .72rem;
  line-height: 1.25;
  opacity: .95;
}

/* Deine HTML/JS nutzt .admin-btn-danger (Entfernen Buttons) */
body.admin-page .admin-btn-danger{
  background: rgba(190,70,90,.85);
  border-color: rgba(240,160,175,.45);
}

/* Generische button-Regel hatte margin-top → macht Button-Reihen “schief” */
body.admin-page .admin-btn{
  margin-top: 0;
}

/* Drag & Drop Klassen (Sortable) */
body.admin-page .layout-handle{
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  opacity: .9;
}
body.admin-page .layout-item{
  user-select: none;
  -webkit-user-select: none;
}
body.admin-page .nc-drag-ghost{ opacity: .55; }
body.admin-page .nc-drag-chosen{ transform: scale(1.01); }

/* =========================================================
   ADMIN APP MODE (SmartThings-like)
   Fixe Tabbar unten + Screen-Wechsel ohne neue Seiten
   ========================================================= */

/* Volle App-Höhe, kein Body-Scroll – Screens scrollen intern */
body.admin-page{
  height: 100dvh;
  overflow: hidden;
}

/* Main nimmt den restlichen Platz ein */
body.admin-page .admin-main.nc-app{
  flex: 1 1 auto;
  /* bestehende Layout-Optik behalten, aber als App-Fläche */
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 1rem 1rem calc(84px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

/* Shell + Screen Container */
body.admin-page .admin-shell{ height: 100%; }
body.admin-page .nc-screens{ height: 100%; }

/* Screens */
body.admin-page .nc-screen{
  display: none;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .75rem;
}

/* Active Screen: vertikaler Stack wie bisher */
body.admin-page .nc-screen.is-active{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Bottom Tabbar */
body.admin-page .nc-tabbar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12000;

  display: flex;
  justify-content: space-around;
  gap: .25rem;

  padding: .5rem .7rem calc(.5rem + env(safe-area-inset-bottom, 0px));
  background: rgba(8,9,12,.82);
  border-top: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Tab Buttons */
body.admin-page .nc-tab{
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.78);
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;

  min-width: 56px;
  padding: .35rem .55rem;
  border-radius: 14px;

  transition: background .12s ease, transform .12s ease, color .12s ease, box-shadow .12s ease;
}

body.admin-page .nc-tab svg{
  width: 22px;
  height: 22px;
  display: block;
}

body.admin-page .nc-tab span{
  font-size: .62rem;
  letter-spacing: .02em;
}

body.admin-page .nc-tab:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

body.admin-page .nc-tab.is-active{
  color: #fff;
  background: rgba(31,79,128,.22);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 0 18px var(--accent-glow, rgba(31,79,128,.45));
}

body.admin-page .nc-tab:active{
  transform: translateY(0);
}

body.admin-page .nc-tab:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.10), 0 0 0 6px var(--accent-glow, rgba(31,79,128,.45));
}